/* Diagramm – rein funktionales Styling (Höhe, Tabelle, Quellzeile). */

.chart {
    margin: 0 0 1.5rem;
}

.chart__canvas {
    position: relative;
    width: 100%;
    height: 24rem;
}

.chart__canvas--tall {
    height: 34rem;
}

@media (max-width: 40rem) {
    .chart__canvas {
        height: 16rem;
    }

    .chart__canvas--tall {
        height: 22rem;
    }
}

.chart__table {
    margin-top: 0.75rem;
}

.chart__table summary {
    cursor: pointer;
    color: var(--color-accent, #0b6e8a);
}

.chart__table-scroll {
    overflow-x: auto;
    margin-top: 0.5rem;
}

.chart__table table {
    border-collapse: collapse;
    min-width: 100%;
    font-size: 0.9rem;
}

.chart__table th,
.chart__table td {
    padding: 0.35rem 0.6rem;
    border-bottom: 1px solid var(--color-surface, #f3f6f8);
    text-align: left;
    vertical-align: top;
}

.chart__table td,
.chart__table thead th:not(:first-child) {
    text-align: right;
    white-space: nowrap;
}

.chart__source,
.chart__hint {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: var(--color-muted, #5b6b75);
}

.chart__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}