.statistics-chart {
    margin: var(--paragraph-spacer) 0 calc(var(--article-space) / 2);
    --statistics-bar-color: #d0d0d0;
    --pie-gap-color: #ffffff;
}

@media only screen and (prefers-color-scheme: dark) {
    .statistics-chart {
        --statistics-bar-color: #7a7a7a;
        --pie-gap-color: #1a1a1a;
    }

    /* Heatmap ist server-seitig als Graustufe (hell = wenige) gerendert. Auf dunklem
       Hintergrund invertieren, damit viele Posts hell und leere Monate dunkel sind. */
    .statistics-chart .statistics-heatmap-svg {
        filter: invert(1);
    }
}

.statistics-chart h2 {
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: .6rem;
}

.statistics-chart .statistics-chart-svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
}

.statistics-chart .bar {
    fill: var(--statistics-bar-color);
}

.statistics-chart .grid-line {
    stroke: var(--ruler-color);
    stroke-width: 1;
}

.statistics-chart .axis-line {
    stroke: var(--marker-color);
    stroke-width: 1;
}

.statistics-chart .value-label {
    fill: var(--text-color);
    font-size: 9px;
}

.statistics-chart .cat-label {
    fill: var(--text-color);
    font-size: 11px;
}

.statistics-chart .tick-label {
    fill: var(--marker-color);
    font-size: 10px;
}

.statistics-chart-empty {
    color: var(--marker-color);
    font-style: italic;
}

/* Heatmap Jahr x Monat: Fuellfarbe (hellgrau..dunkelgrau) kommt inline aus dem Renderer. */
.statistics-chart .heatmap-head,
.statistics-chart .heatmap-row-label,
.statistics-chart .heatmap-legend {
    fill: var(--marker-color);
    font-size: 10px;
}

/* Torte/Donut: Segmentfarben kommen inline aus den Slices, nur Trennlinie und Labels via CSS. */
.statistics-chart .pie-slice {
    stroke: var(--pie-gap-color, #fff);
    stroke-width: 2;
}

.statistics-chart .pie-label {
    fill: #fff;
    font-size: 11px;
    font-weight: 600;
}

.statistics-chart .pie-legend {
    fill: var(--text-color);
    font-size: 11px;
}