/* ============================================================================
   Diagramme (charts.js) — die Regeln zu den Inline-SVG aus shared/ui/charts.js.

   WARUM EIGENE DATEI. Diese Regeln standen bis zum 18.09.2026 in
   sichten/sichten.css. Damit zeichneten die Diagramme UEBERALL SONST als
   schwarze Rechtecke: charts.js setzt nur Klassen, die Farbe kommt aus dem
   Stylesheet. Kein String-Assertion-Test faengt das — das Markup ist ja
   richtig. Wer charts.js laedt, MUSS charts.css einbinden (Waechter in
   sichten/views.test.mjs).

   Ausschliesslich Token aus tokens.css. Die AP-Farben sind Methodik, kein
   Geschmack; ein hier wiederholter Hex-Wert waere die naechste Drift-Quelle.
   ============================================================================ */
/* Diagramme */
.ch-fig { margin: 0 0 16px; }
.ch-titel { font-size: var(--fs-xs); font-weight: 700; color: var(--text-muted); margin-bottom: 4px; }
/* Proportional auf die Bereichsbreite skalieren: die viewBox bestimmt das
   Seitenverhaeltnis, der Bereich die tatsaechliche Groesse. */
.ch { display: block; width: 100%; height: auto; overflow: visible; }
/* Eine quadratische Matrix darf NICHT auf die volle Bereichsbreite wachsen:
   gestreckt fuellt sie den halben Bildschirm und sagt dabei nicht mehr als
   klein. Die drei Matrizen stehen deshalb nebeneinander, solange Platz ist.
   (Gemessen beim ersten Rendern: eine Matrix war 950 px breit und 960 px hoch.) */
.ch-fig.ch-heat { display: inline-block; vertical-align: top; max-width: 360px; margin-right: 18px; }
.ch.ch-heat { max-width: 360px; }
.ch-bar { fill: var(--accent); }
.ch-bar:hover, .ch-bar:focus-visible { fill: var(--brand-mint); outline: none; }
.ch-bar.ap-h { fill: var(--ap-h); }
.ch-bar.ap-m { fill: var(--ap-m); }
.ch-bar.ap-n { fill: var(--ap-n); }
.ch-vorher { fill: var(--brand-grey); }
.ch-nachher { fill: var(--accent); }
.ch-axis { stroke: var(--border); stroke-width: 1; }
.ch-tick line { stroke: var(--border-soft); stroke-width: 1; }
.ch-tick text, .ch-xlabel, .ch-axis-num { font-family: var(--font-data); font-size: 9px; fill: var(--text-faint); }
.ch-axis-title { font-family: var(--font-data); font-size: 10px; font-weight: 700; fill: var(--text-muted); }
.ch-kum { fill: none; stroke: var(--brand-mint); stroke-width: 1.8; }
.ch-kum-pt { fill: var(--brand-mint); }
.ch-kum-label, .ch-legende text { font-family: var(--font-data); font-size: 9px; fill: var(--text-muted); }
.ch-stack.ap-h { fill: var(--ap-h); }
.ch-stack.ap-m { fill: var(--ap-m); }
.ch-stack.ap-n { fill: var(--ap-n); }
.ch-stack:hover, .ch-stack:focus-visible { opacity: .85; outline: none; }
.ch-stack-label { font-family: var(--font-data); font-size: 10px; fill: var(--accent-ink); font-weight: 700; }
.ch-leer-text { font-family: var(--font-ui); font-size: 12px; fill: var(--text-faint); }
/* Matrix: die Zone ist die Farbe, die Saettigung die Belegung — zwei Aussagen,
   die sich nicht ins Gehege kommen. */
.ch-cell-zone { fill: var(--bg-soft); stroke: var(--border-soft); stroke-width: .5; }
.zone-h .ch-cell-zone { fill: var(--ap-h-soft); }
.zone-m .ch-cell-zone { fill: var(--ap-m-soft); }
.zone-n .ch-cell-zone { fill: var(--ap-n-soft); }
.ch-cell-fill { fill: var(--accent); }
.ch-cell-fill:hover, .ch-cell-fill:focus-visible { fill: var(--brand-mint); outline: none; }
.ch-cell-sel .ch-cell-zone { stroke: var(--brand-mint); stroke-width: 2.5; }
.ch-cell-sel .ch-cell-fill { fill: var(--brand-mint); }
.ch-cell-num { font-family: var(--font-data); font-size: 10px; font-weight: 700; fill: var(--accent-ink); pointer-events: none; }

/* ============================================================================
   Nachtrag 19.09.2026 — zwei gemessene Befunde
   ============================================================================ */

/* SCHRIFT DARF NICHT MIT DER BREITE WACHSEN.
   charts.js zeichnet mit `viewBox="0 0 900 220" width="100%"`. Damit skaliert
   ALLES proportional mit dem Behaelter — auch die Schrift. Gemessen an der
   Versalhoehe: die Achsenbeschriftung war bei 1920 px rund doppelt so gross wie
   der Fliesstext direkt darunter, bei 480 px rund 6 px und nicht mehr
   entzifferbar. Ein Diagramm, dessen Beschriftung je nach Fensterbreite die
   halbe oder die doppelte Groesse der Seitenschrift hat, hat keine Schriftskala.
   Deckel auf die Breite der viewBox: darueber wird nicht mehr vergroessert.
   Nach unten bleibt es beim Mitskalieren — ein Diagramm, das seitlich
   herauslaeuft, ist schlechter als eines, das etwas kleiner wird. */
.ch-fig svg.ch { max-width: 900px; }
.ch-fig.ch-heat svg.ch { max-width: 360px; }

/* KONTRAST AUF DEN AP-FLAECHEN.
   Die AP-Farben sind Methodik (K7-A) und werden NICHT umgefaerbt. Die Schrift
   darauf schon: weiss auf dem AP-Rot traegt 6,5:1 und bleibt, weiss auf
   Orange (2,77:1) und auf Gruen (2,87:1) lag darunter — bei 10 px Schrift
   verschwimmt die Beschriftung sichtbar mit ihrer Flaeche. Auf den beiden
   helleren Flaechen steht der Text deshalb dunkel.
   Ueber :has(), weil die Beschriftung ein Geschwister des Rechtecks ist und
   ihre Farbe nicht selbst kennt — dasselbe Muster wie bei .ls-kachel. */
.ch-stack-part:has(.ch-stack.ap-m) .ch-stack-label,
.ch-stack-part:has(.ch-stack.ap-n) .ch-stack-label { fill: var(--text); }