/* ========================================================================== time-bucket-bars.css — TimeBucketBars Custom-SVG-Chart Konsument: web/js/domain/charts/time-bucket-bars.js (window.TimeBucketBars) TimeBucketBars rendert intern dieselbe SVG-Struktur wie das Dashboard- DailyChart (`.dash-daily-chart-host` als inner Wrapper) und nutzt `.tbb-*`-Klassen statt `.dc-*`. Die Compound-Selektoren `.dash-daily- chart-host .tbb-*` greifen, weil der Renderer `
` aufbaut. Tooltip-Klassen `.dc-tooltip*` werden geteilt und liegen separat in domain/dashboard/chart-tooltip.css. Aus domain/dashboard/daily-chart.css extrahiert in die Mirror-Topologie zu web/js/domain/charts/. Chart ist Domain- "charts", nicht "dashboard" — daher eigenes Verzeichnis. ========================================================================== */ .dash-daily-chart-host .tbb-svg, .tbb-chart .tbb-svg { display: block; width: 100%; height: 100%; } /* Plot-Höhe über `--tbb-plot-h` steuerbar (Vorgabe 180px). Das JS LIEST die Variable und zeichnet die SVG-Geometrie danach — deshalb müssen CSS-Höhe und gezeichnete Höhe dieselbe Quelle haben, sonst wird das SVG gestreckt und die Beschriftung verzerrt (`preserveAspectRatio="none"`). Konsumenten setzen die Variable in ihrem eigenen Stylesheet, inklusive Breakpoints. */ .tbb-chart .dash-daily-chart-host { min-height: var(--tbb-plot-h, 180px); } .tbb-chart .dash-daily-chart-host .tbb-svg { height: var(--tbb-plot-h, 180px); } .dash-daily-chart-host .tbb-grid, .tbb-chart .tbb-grid { stroke: var(--color-border-light); stroke-width: 1; shape-rendering: crispEdges; } .dash-daily-chart-host .tbb-y-label, .dash-daily-chart-host .tbb-x-label, .tbb-chart .tbb-y-label, .tbb-chart .tbb-x-label { font-family: inherit; font-size: 10.5px; fill: var(--color-text-muted); } /* Wert-Beschriftung über der Spalte (opt-in `valueLabels`). Kräftiger als die Achsen- Labels — sie ist eine AUSSAGE, kein Orientierungsraster; und `pointer-events:none`, damit sie die Hover-Fläche der Spalte nicht abfängt (sonst kein Tooltip genau dort, wo der interessante Wert steht). */ .dash-daily-chart-host .tbb-val-label, .tbb-chart .tbb-val-label { font-family: inherit; font-size: 10.5px; font-weight: var(--fw-semibold); fill: var(--color-text); pointer-events: none; } .dash-daily-chart-host .tbb-bar, .tbb-chart .tbb-bar { transition: opacity var(--duration-quick); cursor: pointer; } .dash-daily-chart-host .tbb-bar:hover, .tbb-chart .tbb-bar:hover { opacity: 0.85; } .dash-daily-chart-host .tbb-hover, .tbb-chart .tbb-hover { cursor: pointer; } /* ── Soll-/Referenz-Anzeige: EIN Design für ZWEI Formen ───────────────────── ★★ DIE ZWEI FORMEN SAGEN DASSELBE und sahen bis 2026-07-31 wie zwei verschiedene Aussagen aus — im Browser gemessen: die Marke je Spalte 2,5px Tinte auf 5,5px Halo mit runden Kappen und voller Deckung (im Monatsverlauf ein zweiter, schwarzer Balken quer durch die Spalte), die durchgehende Linie 1,5px bei 0,55 Deckung OHNE Halo — auf dem dunkelblauen Balken damit unsichtbar (Kyle 2026-07-31: „Soll-Linie im Monatsdiagramm ist quasi unsichtbar, im Jahresdiagramm gigantisch. Beide auf ein schönes SSOT Design, dezent"). Beide Befunde haben EINE Ursache: es waren zwei unabhängig gepflegte Deklarationen für eine Bedeutung. Jetzt gibt es GENAU EINEN Satz Werte, und beide Formen lesen ihn: · dieselbe Farbe (Tinte, keine sechste Palettenfarbe), · dieselbe Strichstärke, · dasselbe Strichmuster — gestrichelt ist die Konvention für „Ziel/Plan" und trennt die Referenz vom Datum ohne zusätzliche Farbe, · derselbe Halo in Flächenfarbe DARUNTER. Er ist der Grund, warum eine dezente Linie trotzdem lesbar ist: sie muss auf dem hellen Track UND auf dem dunklen Balken tragen. Sein Fehlen an der durchgehenden Linie war der ganze „unsichtbar"-Befund. Wer die Anmutung ändert, ändert diese vier Variablen — nicht die Regeln darunter. */ .dash-daily-chart-host, .tbb-chart { --tbb-ref-farbe: var(--lod-darkblue-900, #0b2036); --tbb-ref-breite: 1.75; --tbb-ref-deckung: 0.8; --tbb-ref-halo-breite: 4; --tbb-ref-muster: 5 4; } .dash-daily-chart-host .tbb-ref, .tbb-chart .tbb-ref { pointer-events: none; stroke: var(--tbb-ref-farbe); stroke-width: var(--tbb-ref-breite); stroke-linecap: butt; stroke-dasharray: var(--tbb-ref-muster); opacity: var(--tbb-ref-deckung); } .dash-daily-chart-host .tbb-ref-halo, .tbb-chart .tbb-ref-halo { pointer-events: none; stroke: var(--color-surface); stroke-width: var(--tbb-ref-halo-breite); stroke-linecap: butt; /* Der Halo ist DURCHGEHEND, auch wenn die Linie darüber gestrichelt ist: als Strichel wäre er eine zweite gestrichelte Linie und die Lücken lägen sichtbar frei. */ opacity: 0.85; } /* Legenden-Muster liest dieselbe Farbe wie die Marke — sonst behauptet die Legende einen Ton, den das Diagramm nicht zeichnet (vorher zwei Hex-Literale an zwei Stellen). Und dasselbe Strichmuster, sonst behauptet sie eine durchgehende Linie. */ .dash-daily-chart-host .tbb-legend-line, .tbb-chart .tbb-legend-line { border-color: var(--tbb-ref-farbe); border-top-style: dashed; opacity: var(--tbb-ref-deckung); } /* Durchgehende Referenzlinie („Soll 8,00 h") — dieselben Werte wie die Spaltenmarke, nur über die ganze Fläche gezogen. Sie braucht KEINE eigene Strichstärke und keine eigene Deckung mehr: eine Linie, die auf zwei Untergründen tragen muss, ist mit Halo dezent lesbar statt entweder unsichtbar oder laut. */ /* ══ VERGLEICHS-LINIE (z.B. Vorjahr) ═══════════════════════════════════════════ ★★ SIE MUSS VON DER REFERENZ UNTERSCHEIDBAR SEIN, OHNE EINE SECHSTE PALETTENFARBE ZU VERBRAUCHEN. Beide Linien liegen über den Balken und beide sind dezent — wären sie gleich gemustert, müsste der Leser an der Legende raten, welche welche ist. Getrennt werden sie durch die FORM, nicht durch Farbe: die Referenz ist gestrichelt („Ziel/Plan", die Konvention), die Vergleichs-Linie DURCHGEZOGEN mit Punkten an den Messstellen — sie trägt gemessene Werte, keine Vorgabe. ★ Der Ton ist derselbe Tinten-Grundwert, nur schwächer gedeckt: eine eigene Farbe würde im gestapelten Diagramm mit den Kategorie-Tönen konkurrieren, und das Reservat „Status-Farben nie als Serie" gilt hier genauso. ★ Halo aus DEMSELBEN Satz Werte wie die Referenz (`--tbb-ref-halo-breite`, `--color-surface`) — er ist der Grund, warum eine dezente Linie auf dem hellen Track UND auf dem dunkelblauen Balken lesbar bleibt. Sein Fehlen war 2026-07-31 der ganze „quasi unsichtbar"-Befund an der Soll-Linie; ihn hier nicht mitzunehmen hieße, denselben Fehler ein zweites Mal zu bauen. */ .dash-daily-chart-host .tbb-vgl, .tbb-chart .tbb-vgl { pointer-events: none; fill: none; stroke: var(--tbb-ref-farbe); stroke-width: var(--tbb-ref-breite); stroke-linecap: round; stroke-linejoin: round; opacity: 0.55; } .dash-daily-chart-host .tbb-vgl-halo, .tbb-chart .tbb-vgl-halo { pointer-events: none; fill: none; stroke: var(--color-surface); stroke-width: var(--tbb-ref-halo-breite); stroke-linecap: round; stroke-linejoin: round; opacity: 0.85; } /* Die Punkte markieren die Messstellen. Ohne sie liest sich eine an einer Lücke unterbrochene Linie wie ein Darstellungsfehler statt wie „hier gibt es keinen Wert". */ .dash-daily-chart-host .tbb-vgl-punkt, .tbb-chart .tbb-vgl-punkt { pointer-events: none; fill: var(--tbb-ref-farbe); stroke: var(--color-surface); stroke-width: 1.5; opacity: 0.75; } /* Legenden-Muster der Vergleichs-Linie: DURCHGEZOGEN, damit die Legende dieselbe Unterscheidung trägt wie die Zeichnung (die Referenz-Zeile darüber ist gestrichelt). */ .dash-daily-chart-host .tbb-legend-line--vgl, .tbb-chart .tbb-legend-line--vgl { border-top-style: solid; opacity: 0.55; } .dash-daily-chart-host .tbb-ref-label, .tbb-chart .tbb-ref-label { font-family: inherit; font-size: 10.5px; font-weight: var(--fw-semibold); fill: var(--tbb-ref-farbe); opacity: 0.75; pointer-events: none; /* ★★ DAS LABEL BRAUCHT DENSELBEN HALO WIE SEINE LINIE — die Heilung vom 2026-07-31 war halb. Die Linie bekam einen Halo in Flächenfarbe, damit sie auf dem hellen Track UND auf dem dunkelblauen Balken trägt; ihre BESCHRIFTUNG bekam keinen. Sie sitzt am rechten Ende des letzten Referenz-Laufs, und ob dort ein Balken steht, entscheiden die Daten: im Verzögerungs-Diagramm lag „Ziel 2,00 T" auf dem Juli-Balken (gemessen 2026-08-01 am Screenshot), im Pünktlichkeits-Diagramm daneben frei. Ein Text, dessen Lesbarkeit von der Datenlage abhängt, ist an manchen Tagen lesbar und an anderen nicht — und nichts meldet das. `paint-order: stroke fill` zeichnet die Kontur UNTER der Füllung, der Text bleibt also scharf. Dieselbe Farbe und Breite wie der Linien-Halo, damit es EIN Satz Werte bleibt. */ paint-order: stroke fill; stroke: var(--color-surface); stroke-width: 3px; stroke-linejoin: round; } .tbb-chart .tbb-tooltip { /* Tooltip uebernimmt .dc-tooltip-Styles aus chart-tooltip.css */ } /* Loading-State: Skeleton-Shimmer ueber dem existierenden Plot. Existierende Daten werden abgedimmt sichtbar, ein animierter Streifen laeuft horizontal durch — verhindert Verwirrung beim Range-Switch. */ .tbb-chart.is-loading { position: relative; pointer-events: none; } .tbb-chart.is-loading > * { opacity: 0.45; filter: grayscale(0.4); transition: opacity var(--duration-quick); } .tbb-chart.is-loading::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 90deg, transparent 0%, rgba(255, 255, 255, 0.65) 50%, transparent 100% ); background-size: 50% 100%; background-repeat: no-repeat; animation: tbb-skeleton-shimmer var(--duration-shimmer) var(--ease-inout-soft) infinite; pointer-events: none; } @keyframes tbb-skeleton-shimmer { 0% { background-position: -50% 0; } 100% { background-position: 150% 0; } } /* Legend-Linie (Reference) — `.dc-tooltip .kvc-tip-line` Compound-Selector bleibt parallel in chart-tooltip.css. Hier nur die TBB-Variante. */ .dash-daily-legend .tbb-legend-line { display: inline-block; width: 14px; height: 0; border-top: 2px solid; vertical-align: middle; margin-right: var(--space-1); } /* ── Track hinter der Spalte (opt-in `bucketTrack`) ────────────────────────── Gegenstück zu `.zw-bar-track` im Mein-Tag-Zeitwidget: er zeigt, dass eine Spalte EXISTIERT und nur nichts trägt. Ohne ihn ist ein leerer Tag eine Lücke im Raster, und das liest sich wie „fehlt" statt „nichts gebucht". Bewusst sehr leise — er ist Kulisse, nicht Wert. */ .dash-daily-chart-host .tbb-track, .tbb-chart .tbb-track { fill: var(--lod-gray-100); fill-opacity: 0.4; pointer-events: none; } /* Aufhellung beim Überfahren wie im Referenz-Widget (`.zw-bar:hover`) — der Balken antwortet auf den Zeiger, statt nur den Tooltip auszulösen. */ .dash-daily-chart-host .tbb-bar:hover, .tbb-chart .tbb-bar:hover { filter: brightness(1.08); opacity: 1; }