/* Beispielbericht auf der Landingpage (statistik.js) – dunkel, im Erscheinungsbild von MINKENBERG.
   Balken neutral hell (#C8C8CD), Sondertage Magenta (#E10074): geprüft auf Farbfehlsichtigkeit und
   mindestens 3:1 gegen die Fläche #26262A. Werte und Beschriftungen stehen in Textfarben, nie in Balkenfarben. */
.pd__intro { margin-bottom: 24px; max-width: 46em; color: var(--text-2); font-size: .9375rem; }
.pd__intro strong { color: var(--text); }
.kpis { display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-bottom: 32px; border: 1px solid var(--linie); background: var(--linie); }
.kpi { padding: 16px 18px 18px; background: var(--flaeche); }
.kpi__v { display: block; font: italic 700 clamp(2rem, 3.4vw, 2.6rem)/1 var(--titel-font); letter-spacing: -.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.kpi__l { display: block; margin-top: 8px; color: var(--text-2); font: 500 .6875rem/1.4 var(--mono-font); letter-spacing: .1em; text-transform: uppercase; }
.charts { display: grid; gap: 32px 40px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.chart h3 { margin: 0 0 6px !important; font-size: 1.375rem; font-weight: 700; line-height: 1.1; letter-spacing: -.01em; }
.chart p { margin: 0 0 14px; font-size: .875rem; color: var(--text-2); }
.chart svg { width: 100%; height: auto; overflow: visible; }
.chart svg text { font-family: var(--mono-font); font-size: 11px; fill: var(--text-3); }
.chart__raster { stroke: var(--linie); }
.chart__balken { fill: #C8C8CD; }
.chart__balken.is-sonder { fill: #E10074; }
.chart__balken:hover { opacity: .8; }
.legende { display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 1px; vertical-align: -1px; }
.legende--sonder { background: #E10074; }
.hbars { display: grid; gap: 10px; }
.hbar { display: grid; grid-template-columns: 150px 1fr 48px; align-items: center; gap: 12px; font-size: .875rem; color: var(--text-2); }
.hbar__track { height: 12px; border-radius: 2px; background: var(--flaeche-2); overflow: hidden; }
.hbar__fill { display: block; height: 100%; border-radius: 2px; background: #C8C8CD; }
.hbar__v { text-align: right; color: var(--text); font: 500 .8125rem/1 var(--mono-font); font-variant-numeric: tabular-nums; }
.demo-live { margin-top: 22px; padding: 14px 18px; border: 1px solid var(--linie); border-radius: 2px; font-size: .9375rem; }
.demo-live h3 { margin: 0 0 6px !important; }
.demo-live ol { margin: 8px 0 0; padding-left: 1.2em; font-family: var(--mono-font); font-size: .8125rem; max-height: 160px; overflow: auto; }
.fineprint { margin-top: 28px; max-width: 60em; font-size: .8125rem; color: var(--text-3); }
.chart--wide { grid-column: 1 / -1; }
@media (max-width: 480px) { .hbar { grid-template-columns: 112px 1fr 44px; } }