/*
 * Modul Auswertung – Kennzahl-Kacheln, Wartezeit-Ampel, Diagramme (SVG), Heatmap, Balkenlisten.
 *
 * Farben ausschließlich aus Tokens abgeleitet (Datenvisualisierungs-Leitfaden, geprüft mit dem
 * Palettenprüfer): eine Reihe = DIWA-Blau; Median/90 % = zwei Stufen derselben Familie (Ordinal,
 * helle Stufe 3,1 : 1 auf Weiß); Vorzeitraum = Grau (3,1 : 1); Heatmap = eine Familie hell → dunkel
 * (monoton, „kein Wert“ neutral grau); Ampel = Statusfarben, immer mit Balkensymbol und Wort.
 * Ziel- und Bezugslinien bleiben zurückhaltend (gestrichelt, Textgrau).
 */

.an {
    --an-series: var(--c-blue);
    --an-series-light: color-mix(in srgb, var(--c-blue) 65%, var(--c-white));
    --an-compare: color-mix(in srgb, var(--c-muted) 70%, var(--c-white));
    --an-grid: var(--c-line);
    --an-axis: var(--c-border);
    --an-target: var(--c-text);
    --an-target-mark: var(--c-text-strong);
    --an-surface: var(--c-white);
    --an-track: color-mix(in srgb, var(--c-blue) 12%, var(--c-white));
    --an-heat-0: var(--c-row-alt);
    --an-heat-1: color-mix(in srgb, var(--c-blue) 10%, var(--c-white));
    --an-heat-2: color-mix(in srgb, var(--c-blue) 24%, var(--c-white));
    --an-heat-3: color-mix(in srgb, var(--c-blue) 40%, var(--c-white));
    --an-heat-4: color-mix(in srgb, var(--c-blue) 58%, var(--c-white));
    --an-heat-5: color-mix(in srgb, var(--c-blue) 80%, var(--c-white));
    --an-heat-6: var(--c-blue);
}

/* ---- Reiter und Filterzeile -------------------------------------------------------------- */

.an-tabs {
    margin-bottom: var(--space-4);
}

.an-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-3) var(--space-4);
    margin: 0 0 var(--space-4);
    padding: var(--space-4);
    border: 1px solid var(--c-line);
    border-radius: var(--radius-lg);
    background: var(--c-white);
}

.an-filters .field {
    margin: 0;
    min-width: 0;
}

.an-filters select,
.an-filters input[type="date"],
.an-filters input[type="search"] {
    min-width: 9.5rem;
    max-width: 16rem;
}

.an-filters__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
}

.an-filters .field__help {
    flex-basis: 100%;
    margin: 0;
}

@media (max-width: 640px) {
    .an-filters .field,
    .an-filters select,
    .an-filters input[type="date"],
    .an-filters input[type="search"] {
        width: 100%;
        max-width: none;
    }
}

.an-notes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    margin: 0 0 var(--space-5);
    padding: 0;
    list-style: none;
    color: var(--c-muted);
    font-size: var(--fs-small);
}

.an-notes li {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.an-notes .an-notes__warn {
    color: var(--c-warning-text);
    font-weight: 500;
}

/* ---- Herunterladen (Aufklappmenü) ---------------------------------------------------------- */

.an-export {
    position: relative;
}

.an-export > summary {
    list-style: none;
}

.an-export > summary::-webkit-details-marker {
    display: none;
}

.an-export__menu {
    position: absolute;
    right: 0;
    z-index: 20;
    display: grid;
    gap: 2px;
    min-width: 17rem;
    max-width: calc(100vw - 2 * var(--space-4));
    margin-top: var(--space-1);
    padding: var(--space-2);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    background: var(--c-white);
    box-shadow: var(--shadow-pop);
}

.an-export__title {
    margin: var(--space-2) var(--space-2) 2px;
    color: var(--c-muted);
    font-size: var(--fs-tiny);
    font-weight: 500;
}

.an-export__menu a {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 6px var(--space-2);
    border-radius: var(--radius);
    color: var(--c-text-strong);
}

.an-export__menu a:hover,
.an-export__menu a:focus-visible {
    background: var(--c-row-hover);
    text-decoration: none;
}

/* Downloads mit personenbezogenen Daten gehen per Formular (POST) – Schaltfläche wie ein Menüeintrag */
.an-export__menu form {
    margin: 0;
}

.an-export__item {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    width: 100%;
    padding: 6px var(--space-2);
    border: 0;
    border-radius: var(--radius);
    background: none;
    color: var(--c-text-strong);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.an-export__item:hover,
.an-export__item:focus-visible {
    background: var(--c-row-hover);
}

.an-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-3);
}

.an-pager form {
    margin: 0;
}

/* ---- Kennzahl-Kacheln --------------------------------------------------------------------- */

/*
 * Jede Kachel belegt fünf Zeilen des Rasters (Bezeichnung, Wert, Zusatz, Vergleich, Hinweis) und übernimmt
 * sie per subgrid – so stehen die Werte nebeneinanderliegender Kacheln immer auf einer Höhe.
 */
.an-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 0;
    margin: 0 0 var(--space-5);
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--c-line);
    border-radius: var(--radius-lg);
    background: var(--c-white);
    list-style: none;
}

/* Trennlinien rechts und unten; die äußeren verschwinden unter dem Rahmen (leere Zellen bleiben weiß) */
.an-stat {
    display: grid;
    grid-row: span 5;
    grid-template-rows: subgrid;
    row-gap: 2px;
    align-content: start;
    min-width: 0;
    margin: 0 -1px -1px 0;
    padding: var(--space-4) var(--space-4) 14px;
    border-right: 1px solid var(--c-line);
    border-bottom: 1px solid var(--c-line);
    background: var(--c-white);
}

@supports not (grid-template-rows: subgrid) {
    .an-stat {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
}

.an-stat > span:empty {
    display: none;
}

@supports (grid-template-rows: subgrid) {
    .an-stat > span:empty {
        display: block;
    }
}

.an-stat__label {
    color: var(--c-text);
    font-size: var(--fs-small);
    line-height: 1.35;
}

.an-stat__value {
    color: var(--c-heading);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
    /* Einzelwerte mit proportionalen Ziffern (Leitfaden: tabular-nums nur in Spalten) */
    font-variant-numeric: normal;
    overflow-wrap: anywhere;
}

.an-stat__unit {
    margin-left: 4px;
    color: var(--c-text);
    font-size: 16px;
    font-weight: 500;
}

.an-stat__extra {
    color: var(--c-text);
    font-size: var(--fs-small);
}

.an-stat__compare {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px var(--space-2);
    color: var(--c-muted);
    font-size: var(--fs-tiny);
}

.an-stat__hint {
    color: var(--c-muted);
    font-size: var(--fs-tiny);
}

.an-stats--compact {
    margin-bottom: 0;
}

.an-stats--compact .an-stat {
    padding: var(--space-3) var(--space-4);
}

.an-stats--compact .an-stat__value {
    font-size: 24px;
}

.an-delta {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-weight: 500;
}

.an-delta .icon {
    width: 14px;
    height: 14px;
}

.an-delta--good {
    color: var(--c-success-text);
}

.an-delta--bad {
    color: var(--c-danger-text);
}

.an-delta--neutral {
    color: var(--c-text);
}

/* ---- Wartezeit-Ampel: drei Balken (1 im Ziel, 2 knapp, 3 über Ziel) + Wort ----------------- */

.an-ampel {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    font-size: var(--fs-tiny);
    font-weight: 500;
    color: var(--c-text-strong);
}

.an-ampel__bars {
    display: inline-grid;
    grid-template-columns: repeat(3, 4px);
    align-items: end;
    gap: 2px;
    height: 14px;
}

.an-ampel__bars > span {
    display: block;
    border-radius: 1px;
    background: var(--c-line);
}

.an-ampel__bars > span:nth-child(1) { height: 6px; }
.an-ampel__bars > span:nth-child(2) { height: 10px; }
.an-ampel__bars > span:nth-child(3) { height: 14px; }

.an-ampel--ok .an-ampel__bars > span:nth-child(1) { background: var(--c-success); }
.an-ampel--warn .an-ampel__bars > span:nth-child(-n + 2) { background: var(--c-warning); }
.an-ampel--over .an-ampel__bars > span { background: var(--c-danger); }
.an-ampel--ok .an-ampel__word { color: var(--c-success-text); }
.an-ampel--warn .an-ampel__word { color: var(--c-warning-text); }
.an-ampel--over .an-ampel__word { color: var(--c-danger-text); }

/* ---- Raster der Karten ------------------------------------------------------------------ */

.an-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--space-5);
    margin-bottom: var(--space-5);
}

.an-span-12 { grid-column: span 12; }
.an-span-8 { grid-column: span 8; }
.an-span-7 { grid-column: span 7; }
.an-span-6 { grid-column: span 6; }
.an-span-5 { grid-column: span 5; }
.an-span-4 { grid-column: span 4; }

@media (max-width: 1100px) {
    .an-span-8,
    .an-span-7,
    .an-span-6,
    .an-span-5,
    .an-span-4 {
        grid-column: span 12;
    }
}

.an-card {
    min-width: 0;
    margin: 0;
}

.an-card .panel__header h2,
.an-card .panel__header h3 {
    font-size: 18px;
}

.an-card__lead {
    margin: 0 0 var(--space-3);
    color: var(--c-text);
    font-size: var(--fs-small);
}

.an-card__note {
    margin: var(--space-3) 0 0;
    color: var(--c-muted);
    font-size: var(--fs-small);
}

.an-subhead {
    margin: var(--space-5) 0 var(--space-3);
    padding-top: var(--space-4);
    border-top: 1px solid var(--c-line);
    color: var(--c-text-strong);
    font-size: 15px;
    font-weight: 500;
}

.an-facts {
    grid-template-columns: minmax(8rem, max-content) 1fr;
    gap: var(--space-1) var(--space-4);
    margin-top: var(--space-4);
    font-size: var(--fs-small);
}

.an-facts dd {
    font-variant-numeric: tabular-nums;
}

.an-panel-note {
    justify-content: flex-start;
    font-size: var(--fs-small);
}

.an-empty {
    margin: 0;
    padding: var(--space-5) 0;
    color: var(--c-muted);
    text-align: center;
}

/* ---- Diagramme (SVG) -------------------------------------------------------------------- */

.an-chart {
    margin: 0;
}

.an-chart + .an-chart {
    margin-top: var(--space-6);
}

.an-chart__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2) var(--space-4);
    margin-bottom: var(--space-3);
}

.an-chart__head h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    color: var(--c-text-strong);
}

/* Zu schmal für alle Säulen ohne Überdeckung: eigene Bildlaufleiste (die Seite selbst scrollt nie quer) */
.an-chart__plot {
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: var(--radius);
    outline-offset: 4px;
}

/* Feste Spalte für die Achsenwerte, rechts die Zeichenfläche in voller Breite (Prozent-Koordinaten) */
.an-chart__frame {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    min-width: calc(48px + var(--an-min, 240px) + var(--an-gutter, 16px));
    padding-right: var(--an-gutter, 16px);
}

.an-chart__frame svg {
    display: block;
    overflow: visible;
}

.an-chart__svg {
    width: 100%;
}

.an-chart__summary {
    margin: var(--space-2) 0 0;
    color: var(--c-muted);
    font-size: var(--fs-small);
}

.an-chart__caption {
    margin: 2px 0 0;
    padding-right: var(--space-4);
    color: var(--c-muted);
    font-size: var(--fs-tiny);
    text-align: right;
}

.an-chart__hint {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    margin: var(--space-1) 0 0;
    color: var(--c-muted);
    font-size: var(--fs-tiny);
}

.an-chart__hint[hidden] {
    display: none;
}

.an-chart__hint .icon {
    width: 14px;
    height: 14px;
}

/* Schmale Flächen: Namen am Linienende entfallen (die Legende trägt sie), der Rand wird schmal */
@media (max-width: 640px) {
    .an-chart .an-direct--end {
        display: none;
    }

    .an-chart__frame {
        min-width: calc(48px + var(--an-min, 240px) + 12px);
        padding-right: 12px;
    }
}

.an-chart text {
    fill: var(--c-text);
    font-family: var(--font);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.an-chart .an-tick {
    fill: var(--c-muted);
}

.an-chart .an-direct {
    fill: var(--c-text-strong);
    font-weight: 500;
}

.an-gridline {
    stroke: var(--an-grid);
    stroke-width: 1;
    shape-rendering: crispEdges;
}

.an-baseline {
    stroke: var(--an-axis);
    stroke-width: 1;
    shape-rendering: crispEdges;
}

.an-mark--series { fill: var(--an-series); }
.an-mark--series-light { fill: var(--an-series-light); }
.an-mark--compare { fill: var(--an-compare); }

.an-line {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.an-line--series { stroke: var(--an-series); }
.an-line--series-light { stroke: var(--an-series-light); }
.an-line--compare { stroke: var(--an-compare); }

.an-dot {
    stroke: var(--an-surface);
    stroke-width: 2;
}

.an-dot--series { fill: var(--an-series); }
.an-dot--series-light { fill: var(--an-series-light); }
.an-dot--compare { fill: var(--an-compare); }

.an-target-line {
    stroke: var(--an-target);
    stroke-width: 1;
    stroke-dasharray: 5 4;
    shape-rendering: crispEdges;
}

.an-chart .an-target-label {
    fill: var(--c-text-strong);
    font-weight: 500;
}

.an-crosshair {
    stroke: var(--c-text-strong);
    stroke-width: 1;
    shape-rendering: crispEdges;
    pointer-events: none;
}

.an-hit {
    fill: transparent;
    cursor: crosshair;
}

.an-hit.is-active,
.an-hit:hover {
    fill: color-mix(in srgb, var(--c-blue) 6%, transparent);
}

/* Heatmap: 2 px Flächenfarbe als Abstand zwischen den Zellen */
.an-cell {
    cursor: pointer;
    stroke: var(--an-surface);
    stroke-width: 2;
}

.an-cell--0 { fill: var(--an-heat-0); }
.an-cell--1 { fill: var(--an-heat-1); }
.an-cell--2 { fill: var(--an-heat-2); }
.an-cell--3 { fill: var(--an-heat-3); }
.an-cell--4 { fill: var(--an-heat-4); }
.an-cell--5 { fill: var(--an-heat-5); }
.an-cell--6 { fill: var(--an-heat-6); }

.an-cell.is-active,
.an-cell:hover {
    stroke: var(--c-text-strong);
}

/* Legende: Linienschlüssel für Linien, Rechteck für Säulen; Text in Textfarbe (nie in Datenfarbe) */
.an-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--c-text);
    font-size: var(--fs-small);
}

.an-legend li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.an-key {
    display: inline-block;
    flex: none;
    width: 12px;
    height: 12px;
    border-radius: 2px;
}

.an-key--line {
    width: 16px;
    height: 2px;
    border-radius: 1px;
}

.an-key--target {
    width: 16px;
    height: 0;
    border-top: 1px dashed var(--an-target);
    border-radius: 0;
}

.an-key--series { background: var(--an-series); }
.an-key--series-light { background: var(--an-series-light); }
.an-key--compare { background: var(--an-compare); }

.an-scale {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    color: var(--c-text);
    font-size: var(--fs-tiny);
}

.an-scale__steps {
    display: inline-flex;
    gap: 2px;
}

.an-scale__steps span {
    display: block;
    width: 18px;
    height: 12px;
    border-radius: 2px;
}

.an-scale__steps span:nth-child(1) { background: var(--an-heat-1); }
.an-scale__steps span:nth-child(2) { background: var(--an-heat-2); }
.an-scale__steps span:nth-child(3) { background: var(--an-heat-3); }
.an-scale__steps span:nth-child(4) { background: var(--an-heat-4); }
.an-scale__steps span:nth-child(5) { background: var(--an-heat-5); }
.an-scale__steps span:nth-child(6) { background: var(--an-heat-6); }

/* Tooltip: Wert vorn und kräftig, Bezeichnung dahinter; Linienschlüssel statt Kästchen */
.an-tooltip {
    position: absolute;
    z-index: 10;
    min-width: 11rem;
    max-width: 18rem;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    background: var(--c-white);
    box-shadow: var(--shadow-pop);
    color: var(--c-text);
    font-size: var(--fs-small);
    pointer-events: none;
}

.an-tooltip__title {
    display: block;
    margin-bottom: 2px;
    color: var(--c-text);
    font-size: var(--fs-tiny);
}

.an-tooltip__row {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.an-tooltip__row strong {
    color: var(--c-heading);
    font-variant-numeric: tabular-nums;
}

/* Tabellen-Zwilling */
.an-table-toggle {
    margin-top: var(--space-3);
}

.an-table-toggle > summary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--c-blue);
    cursor: pointer;
    font-size: var(--fs-small);
}

.an-table-toggle[open] > summary {
    margin-bottom: var(--space-2);
}

.an-table td,
.an-table th {
    font-variant-numeric: tabular-nums;
}

/* Zeilenköpfe der letzten Zeile ohne Linie – wie die übrigen Zellen */
.an-table tbody tr:last-child th {
    border-bottom: 0;
}

/* ---- Balkenlisten (HTML) ----------------------------------------------------------------- */

.an-bars {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.an-bars li {
    display: grid;
    grid-template-columns: minmax(6rem, 13rem) minmax(3rem, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--fs-small);
}

.an-bars__label {
    overflow-wrap: anywhere;
    color: var(--c-text-strong);
}

.an-bars__value {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 2px var(--space-2);
    color: var(--c-text-strong);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.an-bars__value .subtle {
    font-weight: 400;
}

.an-track {
    position: relative;
    height: 8px;
    border-radius: 4px;
    background: var(--an-track);
}

.an-track__fill {
    display: block;
    height: 100%;
    border-radius: 4px;
    background: var(--an-series);
}

.an-track__target {
    position: absolute;
    top: -4px;
    bottom: -4px;
    width: 2px;
    margin-left: -1px;
    background: var(--an-target-mark);
}

@media (max-width: 640px) {
    .an-bars li {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .an-bars .an-track {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}

/* ---- Auffällig ---------------------------------------------------------------------------- */

.an-findings {
    margin: 0;
    padding: 0;
    list-style: none;
}

.an-finding {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 2px var(--space-3);
    padding: var(--space-3) 0;
    border-top: 1px solid var(--c-line);
}

.an-finding:first-child {
    border-top: 0;
    padding-top: 0;
}

.an-finding > .icon {
    width: 22px;
    height: 22px;
}

.an-finding--warn > .icon { color: var(--c-warning-text); }
.an-finding--info > .icon { color: var(--c-blue); }

.an-finding small {
    display: block;
    color: var(--c-text);
    font-size: var(--fs-small);
}

@media (max-width: 640px) {
    .an-finding {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .an-finding .btn {
        grid-column: 2;
        justify-self: start;
    }
}

/* ---- Vergleichstabelle ------------------------------------------------------------------- */

.an-segmented {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
    margin: 0 0 var(--space-4);
    padding: 3px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    background: var(--c-page);
    list-style: none;
}

.an-segmented a {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 4px 12px;
    border-radius: var(--radius);
    color: var(--c-text-strong);
    font-size: var(--fs-small);
    font-weight: 500;
}

.an-segmented a:hover {
    text-decoration: none;
    background: var(--c-white);
}

.an-segmented a[aria-current="page"] {
    background: var(--c-white);
    box-shadow: inset 0 0 0 1px var(--c-border);
    color: var(--c-blue-dark);
}

.an-compare-table th[scope="colgroup"] {
    border-bottom: 1px solid var(--c-line);
    color: var(--c-text-strong);
    font-size: var(--fs-tiny);
    font-weight: 500;
    text-align: center;
}

.an-compare-table .an-group-start {
    border-left: 1px solid var(--c-line);
}

/* Summenzeile „Zusammen“ deutlich abgesetzt */
.an-compare-table tbody tr:last-child th,
.an-compare-table tbody tr:last-child td {
    border-bottom: 1px solid var(--c-border);
}

.an-compare-table tfoot th,
.an-compare-table tfoot td {
    border-bottom: 0;
    color: var(--c-text-strong);
    font-weight: 700;
}

.an-compare-value {
    display: inline-grid;
    grid-template-columns: minmax(3rem, auto) 3rem;
    align-items: center;
    gap: var(--space-2);
}

.an-sort {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-weight: inherit;
    text-align: inherit;
    cursor: pointer;
}

.an-sort .icon {
    width: 14px;
    height: 14px;
    opacity: 0.6;
}

/* ---- Einstellungen ---------------------------------------------------------------------- */

.an-option-unit {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.an-option-unit input[type="number"] {
    max-width: 8rem;
}

/* ---- Hochkontrast (forced-colors): Formen statt Farben -------------------------------------- */

@media (forced-colors: active) {
    .an-mark--series,
    .an-mark--series-light,
    .an-mark--compare,
    .an-dot {
        fill: CanvasText;
    }

    .an-line,
    .an-target-line,
    .an-crosshair {
        stroke: CanvasText;
    }

    .an-line--compare,
    .an-line--series-light {
        stroke: GrayText;
    }

    .an-cell {
        stroke: Canvas;
    }

    .an-cell.is-active,
    .an-cell:hover {
        stroke: Highlight;
    }

    .an-track__fill,
    .an-ampel__bars > span {
        background: CanvasText;
        forced-color-adjust: none;
    }
}

@media print {
    .an-filters,
    .an-export,
    .an-table-toggle > summary {
        display: none;
    }

    .an-table-toggle {
        display: block;
    }

    .an-chart__plot {
        overflow: visible;
    }
}