/* BambuHub Chart-Komponenten (dependency-frei, reines CSS/SVG)
   Nur einbinden, wenn ein Artikel Charts nutzt:
   <link rel="stylesheet" href="../css/charts.css">
   Farben/Werte kommen per Inline-Custom-Property (--v, --c, --h ...).
   Nutzt die Farb-Variablen aus style.css (--accent/--yellow/--red/--green/--bg*).
   Template + Nutzung: bambuhub-Skill ("Reusable components").
   Kurz-Erinnerung Werte→Prozent: pct = (wert - min) / (max - min) * 100. */

/* ── 1. Horizontale Balken (Vergleich: Preise, Specs, Anteile) ── */
.chart-bars{display:flex;flex-direction:column;gap:.55rem;margin:1.5rem 0}
.chart-bars .row{display:grid;grid-template-columns:var(--label,88px) 1fr auto;align-items:center;gap:.7rem}
.chart-bars .lbl{font-size:.83rem;color:var(--text2);text-align:right}
.chart-bars .track{background:var(--bg3);border-radius:5px;height:22px;overflow:hidden}
.chart-bars .fill{height:100%;width:var(--v,50%);border-radius:5px;
  background:var(--c,linear-gradient(90deg,var(--accent),var(--yellow)))}
.chart-bars .val{font-size:.82rem;font-weight:700;color:var(--text);min-width:2.5em;text-align:right}

/* ── 2. Vertikale Säulen (Werte über Zeit/Kategorien) ── */
.chart-cols{display:flex;align-items:flex-end;gap:.5rem;height:180px;margin:1.5rem 0}
.chart-cols .col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%}
.chart-cols .cval{font-size:.76rem;font-weight:700;color:var(--text);margin-bottom:.25rem}
.chart-cols .bar{width:100%;max-width:48px;height:var(--h,50%);min-height:4px;border-radius:6px 6px 0 0;
  background:var(--c,var(--accent))}
.chart-cols .clbl{font-size:.72rem;color:var(--text3);text-transform:uppercase;margin-top:.4rem;text-align:center}

/* ── 3. Donut / Fortschritts-Ring (Prozent, Fundraiser, Marktanteil) ── */
.chart-donut{--v:60;--c:var(--accent);width:var(--size,120px);height:var(--size,120px);border-radius:50%;
  background:conic-gradient(var(--c) calc(var(--v)*1%),var(--bg3) 0);display:grid;place-items:center;position:relative}
.chart-donut::before{content:"";position:absolute;width:70%;height:70%;border-radius:50%;background:var(--bg)}
.chart-donut .dv{position:relative;font-weight:800;font-size:1.35rem;color:var(--text);line-height:1;text-align:center}
.chart-donut .dv small{display:block;font-size:.62rem;font-weight:600;color:var(--text3);text-transform:uppercase;margin-top:.2rem}

/* ── 4. Kerzendiagramm (Preisspanne über Zeit; grün=hoch/rauf, rot=runter) ──
   Pro Kerze Inline: --wt/--wb = Docht oben/unten (High/Low als % von oben),
   --bt/--bb = Körper oben/unten (Open/Close). --c Farbe. */
.chart-candles{display:flex;align-items:stretch;gap:.55rem;height:190px;margin:1.5rem 0}
.chart-candles .candle{flex:1;position:relative}
.chart-candles .candle .wick{position:absolute;left:50%;transform:translateX(-50%);
  top:var(--wt,10%);bottom:var(--wb,10%);width:2px;background:var(--c,var(--text3))}
.chart-candles .candle .body{position:absolute;left:50%;transform:translateX(-50%);
  top:var(--bt,30%);bottom:var(--bb,30%);width:62%;max-width:24px;border-radius:2px;background:var(--c,var(--text3))}
.chart-candles .candle .clbl{position:absolute;bottom:-1.4rem;left:0;right:0;text-align:center;
  font-size:.68rem;color:var(--text3);text-transform:uppercase}
.chart-candles.has-labels{margin-bottom:2.6rem}

/* ── Gemeinsam: kleine Legende ── */
.chart-legend{display:flex;flex-wrap:wrap;gap:.8rem;margin:.6rem 0 0;font-size:.76rem;color:var(--text2)}
.chart-legend span{display:inline-flex;align-items:center;gap:.35rem}
.chart-legend i{width:11px;height:11px;border-radius:3px;background:var(--c,var(--accent));display:inline-block}
.chart-cap{font-size:.76rem;color:var(--text3);margin:.4rem 0 0;text-align:center}

/* ── 5. Linien-/Flächenchart = Inline-SVG (Template im Skill).
   Nutzt .chart-svg als Wrapper für responsive Skalierung. ── */
.chart-svg{width:100%;height:auto;margin:1.5rem 0}
.chart-svg .area{fill:var(--accent);opacity:.14}
.chart-svg .line{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.chart-svg .dot{fill:var(--accent)}
.chart-svg .grid{stroke:var(--border);stroke-width:1}
.chart-svg .axis{fill:var(--text3);font-size:11px}