/* ============================================================
   DATENVISUALISIERUNG — Ergänzung zum Design-System (neu, nicht im gelieferten Kit).
   Komponenten: ax-result (Ergebnisblock in der Chat-Antwort), ax-chart, ax-legend,
   ax-tooltip, ax-seg (Umschalter Diagramm/Tabelle), Tabellen-Erweiterungen.

   Regeln (verbindlich):
   1  Form nach Aufgabe: Einzelwert → Kennzahl-Kachel · Zeitverlauf → Linie ·
      Anteile je Gruppe → gestapelter 100-%-Balken · Rangfolge/Einzelwerte → Tabelle.
   2  Reihenfarben in fester Reihenfolge --chart-1 … --chart-8, nie zyklisch.
      Farbe folgt dem Objekt, nicht dem Rang. Mehr als 8 Reihen → „Sonstige“.
   3  Vergleichszeitraum (Vorjahr, Plan): --chart-compare statt zweiter Kategoriefarbe.
   4  Genau eine y-Achse. Zwei Maße mit anderer Skala → zwei Diagramme.
   5  Linie 2 px; Endpunkt r = 4 mit 2 px Ring in Flächenfarbe. Balken ≤ 24 px dick,
      4 px Rundung am Datenende, eckig an der Basis, 2 px Flächenlücke zwischen Segmenten.
   6  Gitter 1 px durchgezogen (--chart-grid), Achsentext --text-3 Mono 11 px, tabellarische Ziffern.
   7  Legende ab 2 Reihen (Linie → Strich, Balken → Quadrat). Direktlabels sparsam
      (Endwert, Segment nur wenn es passt). Text nie in Reihenfarbe.
   8  Jedes Diagramm hat eine Tabellenansicht (Umschalter oder Tabelle darunter).
      Tooltips ergänzen, ersetzen nie.
   9  Hover: Linie → Fadenkreuz mit allen Reihen am X-Wert; Balken → Tooltip je Segment.
      Tastatur: Diagramm fokussierbar, Pfeiltasten bewegen die Auswahl.
   10 Kombination: Diagramm oben, Tabelle darunter, gleiche Reihenfolge und Farbschlüssel.
   Validiert (Palette-Prüfung, Fläche #FFF): chart-1…5 bestehen CVD-Trennung
   (schlechtestes Nachbarpaar ΔE 12,7). chart-3 hat < 3:1 Kontrast → Legende + Tabelle Pflicht.
   ============================================================ */
:root{--chart-compare:var(--gray-500);--chart-ring:var(--white);--chart-bar-h:20px}
.grow{flex:1}

.ax-result{display:flex;flex-direction:column;min-width:0;background:#fff;border-radius:var(--radius-3);box-shadow:var(--elev-0)}
.ax-result__head{display:flex;align-items:center;gap:8px;min-height:38px;padding:6px 8px 0 12px}
.ax-result__title{font:var(--type-card-title);color:var(--text-1)}
.ax-result__sub{font:var(--type-small);color:var(--text-3)}
.ax-result__table{overflow-x:auto;margin-top:8px;border-top:1px solid var(--border-1)}
.ax-result__table .ax-table th{top:0}
.ax-result__foot{display:flex;align-items:center;gap:8px;padding:8px 12px;border-top:1px solid var(--border-1);font:var(--type-small);color:var(--text-2)}
.ax-result__foot b{font:var(--fw-semibold) var(--fs-13)/1 var(--font-mono);color:var(--text-1)}

.ax-seg{display:inline-flex;gap:2px;padding:2px;border-radius:var(--radius-2);background:var(--gray-100)}
.ax-seg button{height:22px;padding:0 8px;border:0;border-radius:var(--radius-1);background:transparent;font:var(--type-small);color:var(--text-2);cursor:pointer}
.ax-seg button:hover{color:var(--text-1)}
.ax-seg button[aria-pressed="true"]{background:#fff;color:var(--text-1);box-shadow:var(--elev-1)}
.ax-seg button:focus-visible{outline:none;box-shadow:var(--focus-ring)}

.ax-legend{display:flex;flex-wrap:wrap;gap:4px 14px;padding:6px 12px 0;font:var(--type-small);color:var(--text-2)}
.ax-legend__item{display:inline-flex;align-items:center;gap:6px}
.ax-legend__key{width:10px;height:10px;border-radius:2px;flex:none}
.ax-legend__key--line{width:14px;height:2px;border-radius:1px}

.ax-chart{position:relative;padding:4px 4px 0;min-height:120px}
.ax-chart svg{display:block;overflow:visible}
.ax-chart svg:focus{outline:none}
.ax-chart svg:focus-visible{outline:2px solid rgba(76,144,240,.6);outline-offset:2px;border-radius:2px}
.ax-chart .grid{stroke:var(--chart-grid);stroke-width:1;shape-rendering:crispEdges}
.ax-chart .baseline{stroke:var(--gray-400);stroke-width:1;shape-rendering:crispEdges}
.ax-chart .tick{font-family:var(--font-mono);font-size:11px;font-weight:500;fill:var(--text-3);font-variant-numeric:tabular-nums}
.ax-chart .cat{font-family:var(--font-sans);font-size:12px;fill:var(--text-1)}
.ax-chart .endlabel{font-family:var(--font-mono);font-size:11px;font-weight:600;fill:var(--text-2)}
.ax-chart .seglabel{font-family:var(--font-mono);font-size:11px;font-weight:600;pointer-events:none}
.ax-chart .line{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.ax-chart .dot{stroke:var(--chart-ring);stroke-width:2}
.ax-chart .crosshair{stroke:var(--gray-600);stroke-width:1;shape-rendering:crispEdges}
.ax-chart .seg{cursor:default;transition:opacity var(--dur-fast) var(--ease-standard)}
.ax-chart svg.has-hover .seg:not(.is-hover){opacity:.4}

.ax-tooltip{position:absolute;z-index:5;display:none;min-width:150px;padding:8px 10px;pointer-events:none;background:#fff;border-radius:var(--radius-3);box-shadow:var(--elev-3);font:var(--type-small);color:var(--text-2)}
.ax-tooltip__head{margin-bottom:6px;font:var(--fw-semibold) 12px/1.2 var(--font-sans);color:var(--text-1)}
.ax-tooltip__row{display:flex;align-items:center;gap:8px;margin-top:4px}
.ax-tooltip__key{flex:none;width:12px;height:2px;border-radius:1px}
.ax-tooltip__val{min-width:44px;font:var(--fw-semibold) 12px/1 var(--font-mono);color:var(--text-1);font-variant-numeric:tabular-nums}

.ax-table .num{font-variant-numeric:tabular-nums}
.ax-table th.num{text-align:right}
.ax-table td.rank{width:28px;color:var(--text-3);font:var(--type-mono)}
.ax-table tfoot td{height:var(--row-h-lg);padding:0 10px;background:var(--gray-50);border-top:1px solid var(--border-2);font-weight:var(--fw-semibold);white-space:nowrap}
.ax-table tfoot tr + tr td{border-top:1px solid var(--border-1)}
.ax-table .th-key{display:inline-flex;align-items:center;gap:6px}
.delta--up{color:var(--green-600)}
.delta--down{color:var(--red-600)}
.ax-share{display:flex;align-items:center;gap:8px}
.ax-share__track{flex:1;min-width:60px;height:8px;background:var(--blue-50);border-radius:1px}
.ax-share__fill{height:100%;background:var(--chart-1);border-radius:0 2px 2px 0}
.ax-share span{min-width:44px;text-align:right;font:var(--fw-regular) var(--fs-12)/1 var(--font-mono);font-variant-numeric:tabular-nums}

/* Design-System-Seite */
.ds-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.ds-sw{display:flex;flex-direction:column;gap:4px;font:var(--type-small);color:var(--text-2)}
.ds-sw i{display:block;height:28px;border-radius:var(--radius-2)}
.ds-sw code{font:var(--type-mono);color:var(--text-3)}
.ds-list{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:5px;color:var(--text-2)}
.ds-list b{color:var(--text-1);font-weight:600}