/* btc.swissnwx.ch – Diagramme (AP08, Spezifikation 6.6). Nur Diagrammklassen; Farben über die Tokens aus app.css
   (--serie-1/2/3, --gitter, --achse, Status-Tokens). Grün nur im Statusband. Keine Inline-Styles, kein data:. */

/* Figur, Kopf, Legende */
.diagramm { position: relative; margin: 0; display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.diagramm-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--a-1) var(--a-3); margin: 0 0 var(--a-2); }
.diagramm-kopf h3 { margin: 0; }
.diagramm-kopf p { margin: 0; }
.diagramm-leer > .hinweis { margin: var(--a-4) 0 0; }
.diagramm > .aufklapper { margin-top: auto; }
.diagramm .aufklapper { margin-top: var(--a-3); }
.diagramm .aufklapper .hinweis { margin: var(--a-2) 0 0; }
.diagramm .aufklapper td .hinweis { margin: 0; font-size: var(--kleinst); }
.legende { display: flex; flex-wrap: wrap; gap: var(--a-1) var(--a-4); margin: 0 0 var(--a-2); padding: 0; list-style: none; font-size: var(--klein); color: var(--text-2); }
.legende li { display: inline-flex; align-items: center; gap: 6px; }
.legende-punkt { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.legende-feld { width: 18px; height: 12px; border-radius: 2px; flex: none; }
.legende .s1 { background: var(--serie-1); }
.legende .s2 { background: var(--serie-2); }
.legende .s3 { background: var(--serie-3); }
.legende .null { background: var(--rand-stark); }
.legende .s1-55 { background: var(--serie-1); opacity: .55; }
.legende .s1-25 { background: var(--serie-1); opacity: .25; }
.legende .ereignis { width: 2px; height: 12px; border-radius: 0; background: var(--achse); }
.legende .hilfslinie { width: 18px; height: 0; border-radius: 0; background: none; border-top: 2px dashed var(--achse); }
.legende .hm-1, .legende .hm-2, .legende .hm-3, .legende .hm-4, .legende .hm-5 { background: var(--serie-1); }
.legende .hm-1 { opacity: .12; } .legende .hm-2 { opacity: .3; } .legende .hm-3 { opacity: .5; }
.legende .hm-4 { opacity: .72; } .legende .hm-5 { opacity: .95; }
.legende .hm-leer { background: var(--flaeche-2); border: 1px solid var(--rand); }
.legende-skala { gap: var(--a-1) var(--a-3); }

/* SVG */
.diagramm-bild { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--schrift); }
.diagramm-bild:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; border-radius: 2px; }
.diagramm-bild text { font-size: 13px; font-variant-numeric: tabular-nums; }
.diagramm-bild :is(path, line, circle, rect) { vector-effect: non-scaling-stroke; }
.achse-text { fill: var(--achse); }
.wert-text { fill: var(--text); font-weight: 600; }
.direkt-text { fill: var(--serie-3); }
.diagramm-bild .gitter, .diagramm-bild .gitter line { stroke: var(--gitter); stroke-width: 1; }
.diagramm-bild .achse { stroke: var(--rand-stark); stroke-width: 1; }
.diagramm-bild .hilfslinie { stroke: var(--achse); stroke-width: 1; stroke-dasharray: 4 3; }
.diagramm-bild .ereignis { stroke: var(--achse); stroke-width: 1.5; }
.s1-l, .s2-l, .s3-l { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.s1-l { stroke: var(--serie-1); }
.s2-l { stroke: var(--serie-2); }
.s3-l { stroke: var(--serie-3); stroke-dasharray: 6 4; }
.s1-f { fill: var(--serie-1); fill-opacity: .82; }
.s2-f { fill: var(--serie-2); fill-opacity: .82; }
.s3-f { fill: var(--serie-3); fill-opacity: .82; }
.trenner { fill: none; stroke: var(--flaeche); stroke-width: 1.5; }
.s1-wasch { fill: var(--serie-1); fill-opacity: .18; }
.s1-balken { fill: var(--serie-1); fill-opacity: .9; }
.s2-balken { fill: var(--serie-2); fill-opacity: .9; }
.s3-balken { fill: var(--serie-3); fill-opacity: .9; }
.null-balken { fill: var(--rand-stark); }
.s1-55 { fill: var(--serie-1); fill-opacity: .55; }
.s1-25 { fill: var(--serie-1); fill-opacity: .25; }
.punkt { fill: var(--serie-1); stroke: var(--flaeche); stroke-width: 2; }
.hm-1, .hm-2, .hm-3, .hm-4, .hm-5 { fill: var(--serie-1); }
.hm-1 { fill-opacity: .12; } .hm-2 { fill-opacity: .3; } .hm-3 { fill-opacity: .5; }
.hm-4 { fill-opacity: .72; } .hm-5 { fill-opacity: .95; }
.hm-leer { fill: var(--flaeche-2); stroke: var(--rand); stroke-width: 1; }
.diagramm-bild .treffer { fill: transparent; stroke: none; pointer-events: all; }
.fadenkreuz { stroke: var(--achse); stroke-width: 1; vector-effect: non-scaling-stroke; pointer-events: none; }

/* Sparkline */
.sparkline { display: block; width: 100%; max-width: 160px; height: 32px; overflow: visible; }
.sparkline .s1-l { stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.sparkline .punkt { stroke-width: 1.5; }

/* Statusband: Spalten aus der Zahl der Kinder */
.band { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); column-gap: 1px; height: 24px; margin: var(--a-2) 0 0; }
.band-dicht { column-gap: 0; }
.band > span { display: block; min-width: 0; border-radius: 1px; }
.band-ok { background: var(--erfolg); }
.band-warnung { background: var(--warnung); }
.band-fehler { background: var(--fehler); }
.band-leer { background: var(--rand); }

/* Horizontale Balken: Label / Balken / Zahl */
.balken-h { display: grid; grid-template-columns: minmax(6rem, max-content) minmax(3rem, 1fr) max-content; gap: var(--a-2) var(--a-3); align-items: center; margin: 0; padding: 0; list-style: none; font-size: var(--klein); }
.balken-h li { display: contents; }
.balken-h-label { color: var(--text); overflow-wrap: anywhere; }
.balken-h-bild { display: block; width: 100%; height: 10px; }
.balken-h-zahl { color: var(--text-2); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

/* Tooltip (Position per CSSOM --x/--y, AP09) */
.tooltip { position: absolute; left: 0; top: 0; z-index: 2; translate: var(--x, 0) var(--y, 0); max-width: 18rem; padding: var(--a-1) var(--a-2); border: 1px solid var(--rand); border-radius: var(--radius); background: var(--flaeche); box-shadow: var(--schatten); color: var(--text); font-size: var(--klein); font-variant-numeric: tabular-nums; pointer-events: none; white-space: nowrap; }
.tooltip[hidden] { display: none; }

/* Mobil: grössere Achsenschrift, dichte Marken aus, Legende unter dem Bild */
@media (max-width: 599px) {
    .diagramm-bild text { font-size: 19px; }
    .diagramm-bild .ab-600 { display: none; }
    .diagramm > .legende { order: 2; margin: var(--a-2) 0 0; }
    .diagramm > .diagramm-bild { order: 1; }
    .diagramm > .aufklapper { order: 3; }
}
@media (prefers-reduced-motion: reduce) { .tooltip { transition: none; } }

/* Druck: Linien schwarz-tauglich, Flächen mit Opazität */
@media print {
    .diagramm-bild, .band > span { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
    .s1-f, .s2-f, .s3-f, .s1-balken, .s2-balken { fill-opacity: .5; }
    .achse-text, .wert-text, .direkt-text { fill: #000; }
    .tooltip, .fadenkreuz, .diagramm .aufklapper { display: none; }
}