/* cf-diagramm.css — Darstellung der Diagramm-Bauteile.
   Farben kommen ausschliesslich aus den Konsolen-Tokens, damit ein Mandant mit eigener Marke
   nicht ploetzlich fremde Diagrammfarben bekommt (White-Label, siehe cf-designregeln). */

.dg{position:relative;width:100%}
.dg svg{display:block;width:100%;height:auto;overflow:visible}

/* Achsen und Raster: leise. Ein Raster, das mit den Daten um Aufmerksamkeit konkurriert,
   macht das Diagramm schwerer lesbar, nicht praeziser. */
.dg-raster{stroke:var(--line);stroke-width:1}
.dg-basis{stroke:var(--line-strong);stroke-width:1}
.dg-tick{fill:var(--ink-soft);font-size:10.5px;font-weight:700;letter-spacing:.02em}
.dg-yt{fill:var(--ink-faint);font-size:10.5px;font-weight:700}

.dg-balken rect{transition:opacity .18s}
.dg-flaeche{opacity:.16}
.dg-linie{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dg-punkt{stroke:var(--surface);stroke-width:2}

/* GERUEST — der Leerzustand. Kein leeres Rechteck und kein erfundener Verlauf: die Achsen
   stehen, die Balken sind als Umriss angedeutet, und darueber steht in Worten, was hier
   erscheinen wird. Der Nutzer sieht damit die Form der spaeteren Antwort, ohne dass ihm eine
   Zahl vorgespielt wird, die es nicht gibt. */
.dg-geruest rect{fill:none;stroke:var(--line-strong);stroke-width:1.5;stroke-dasharray:3 4;opacity:.55}
.dg-geruest path{stroke:var(--line-strong);stroke-width:1.5;stroke-dasharray:4 5;fill:none;opacity:.55}
.dg-leer{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:14px;pointer-events:none}
.dg-leer div{max-width:300px}
.dg-leer b{display:block;font-family:var(--disp);font-size:.95rem;color:var(--ink);margin-bottom:5px}
.dg-leer span{display:block;font-size:.82rem;color:var(--ink-soft);line-height:1.55}

/* Legende: der Wert steht IN der Legende. Eine Legende, die nur Farben benennt, zwingt zum
   Ablesen am Balken — und am Nullpunkt ist dort nichts abzulesen. */
.dg-leg{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:14px}
.dg-leg-i{display:flex;align-items:center;gap:8px;font-size:.84rem;color:var(--ink-soft)}
.dg-leg-i i{width:10px;height:10px;border-radius:3px;flex:none;font-style:normal}
.dg-leg-i b{color:var(--ink);font-weight:800}

/* Kopfzeile einer Diagrammkarte: Titel, Grosswert, Zeitraum-Marke */
.dg-kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.dg-kopf h4{font-size:.96rem;font-weight:800;display:flex;align-items:center;gap:7px}
.dg-kopf .dg-gross{font-family:var(--disp);font-weight:800;font-size:1.5rem;line-height:1;color:var(--ink)}
.dg-kopf .dg-sub{font-size:.8rem;color:var(--ink-soft);margin-top:4px}
.dg-zeitraum{display:flex;align-items:center;gap:6px;font-size:.82rem;color:var(--ink-soft)}

/* Tooltip am Balken — CI, nicht der System-Tooltip des Browsers */
.dg-tip{position:absolute;z-index:20;pointer-events:none;background:var(--rail);color:#fff;border-radius:10px;padding:8px 11px;font-size:.8rem;font-weight:700;box-shadow:var(--shadow-lg);white-space:nowrap;opacity:0;transform:translate(-50%,-118%);transition:opacity .13s}
.dg-tip.an{opacity:1}
.dg-tip small{display:block;font-weight:600;opacity:.78;margin-top:2px}

@media (prefers-reduced-motion:reduce){.dg-balken rect,.dg-tip{transition:none}}