/* www.bejaehringerhof.de (Wetterstation) in Lumen: nur, was die Wetterseiten zusätzlich zu
   design/tokens.css, design/base.css und seiten.css brauchen (Wind-Zeile mit Kompass, Unterseiten-Kopf,
   Diagramme). Übernommen aus bejaehringerhof-design-lumen, varianten/www/www.css. */

/* Wind-Zeile: Kompass rechts neben dem Wert */
.now .wind { grid-template-columns: minmax(0, 1fr) 72px; }
.now .wind .sub { grid-column: 1; }
.now .dir { grid-column: 2; grid-row: 2 / span 2; align-self: center; }

/* Kompass: Nadel als Lichtzeiger */
.compass { display: block; width: 72px; height: 72px; overflow: visible; }
.compass circle { fill: var(--glas-2); stroke: var(--linie-hell); stroke-width: 1; }
.compass .tick { stroke: var(--text-3); stroke-width: 1.25; stroke-linecap: round; }
.compass text { fill: var(--text-3); font: 500 9px var(--schrift-marke); }
.compass .needle { transform-origin: 50px 50px; transform: rotate(var(--deg)); fill: var(--akzent); filter: drop-shadow(0 0 4px var(--akzent-glow)); }
.compass.draw:not(.on) .needle { transform: rotate(0deg); }
.compass.draw.on .needle { transition: transform 1.6s var(--kurve-klappen); }

/* Unterseiten-Kopf: Titel, großer Wert, Einleitung, Messwerte */
.page-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 32px; padding-top: 36px; }
.page-head .intro { grid-column: 1; }
.page-head .big { grid-column: 2; grid-row: 1 / span 2; align-self: start; margin: 0; font: 200 88px/1 var(--schrift-text); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; text-shadow: 0 0 40px var(--akzent-glow); }
.page-head .big small { margin-left: 6px; font: 300 24px/1 var(--schrift-text); color: var(--text-2); letter-spacing: 0; }
.page-head .lead { grid-column: 1; max-width: 68ch; margin: 18px 0 0; color: var(--text-2); }
.page-head .now { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.legal.page-head, .page-head:not(:has(.big)) { grid-template-columns: minmax(0, 1fr); }

/* Diagramme: Plättchen (Ebene 2), Linie als Lichtstrahl in Akzentfarbe */
.charts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.charts-wide { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.chart { margin: 0; padding: 18px 20px 16px; border-radius: var(--r-innen); background: var(--glas-2); box-shadow: inset 0 1px 0 var(--innenkante), inset 0 0 0 1px var(--linie); min-width: 0; }
.chart figcaption { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.chart figcaption h3 { margin: 0; font: 500 11px/16px var(--schrift-marke); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2); }
.chart figcaption span { font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; text-align: right; }
.chart .legend { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 20px; padding: 0; margin: 8px 0 0; font-size: 13px; color: var(--text-2); }
.chart .legend li { display: flex; align-items: center; gap: 8px; }
.chart .legend .key { width: 14px; height: 2px; border-radius: 2px; background: var(--akzent); box-shadow: 0 0 6px var(--akzent-glow); }
.chart .legend .key.s2 { background: var(--warnung); box-shadow: none; }
.viz-plot { position: relative; height: 220px; margin-top: 16px; touch-action: pan-y; }
.chart-small .viz-plot { height: 76px; margin-top: 16px; }
.viz-plot svg { display: block; width: 100%; height: 100%; overflow: visible; }
.viz-plot svg:focus { outline: none; }
.viz-plot svg:focus-visible { outline: 2px solid var(--akzent); outline-offset: 4px; }
.viz-plot .empty { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: var(--text-3); font-size: 13px; }
.viz .base { stroke: var(--linie-hell); stroke-width: 1; shape-rendering: crispEdges; }
.viz-tick { fill: var(--text-3); font: 400 11.5px var(--schrift-text); font-variant-numeric: tabular-nums; pointer-events: none; }
.viz-end { fill: var(--text-1); font: 500 12px var(--schrift-text); font-variant-numeric: tabular-nums; pointer-events: none; }
.viz-line { fill: none; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.viz-line.s1 { stroke: var(--akzent); filter: drop-shadow(0 0 3px var(--akzent-glow)); }
.viz-line.s2 { stroke: var(--warnung); }
.viz-line.s0 { stroke: color-mix(in oklab, var(--akzent) 45%, var(--text-2)); }
.viz-dot { stroke: var(--glas-3); stroke-width: 1.5; fill: var(--akzent); filter: drop-shadow(0 0 6px var(--akzent)); }
.viz-dot.s2 { fill: var(--warnung); }
.viz-dot.s0 { fill: var(--text-2); }
.viz-cross { stroke: var(--text-3); stroke-width: 1; stroke-dasharray: 2 3; shape-rendering: crispEdges; }
.viz .viz-bar { fill: color-mix(in oklab, var(--akzent) 70%, transparent); }
.viz .viz-bar.is-active { fill: var(--akzent); }
.viz-hit { fill: transparent; }
.viz-tip { position: absolute; top: 0; z-index: 2; min-width: 110px; pointer-events: none; padding: 8px 12px; border-radius: 12px; background: var(--glas-3); -webkit-backdrop-filter: blur(var(--blur-3)); backdrop-filter: blur(var(--blur-3)); box-shadow: inset 0 1px 0 var(--innenkante), inset 0 0 0 1px var(--linie), 0 16px 40px var(--hochschatten); font: 400 12.5px/1.4 var(--schrift-text); }
.viz-tip[hidden] { display: none; }
.viz-tip .row { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; }
.viz-tip .k { display: inline-block; width: 12px; height: 2px; border-radius: 2px; background: var(--akzent); }
.viz-tip .k.s2 { background: var(--warnung); }
.viz-tip .k.s0 { background: var(--text-2); }
.viz-tip .name { color: var(--text-2); font-weight: 400; font-size: 12.5px; }
.viz-tip .t { color: var(--text-3); }
.chart .axis { display: flex; justify-content: space-between; margin: 6px 0 0; font-size: 11.5px; line-height: 16px; color: var(--text-3); }

/* Linien zeichnen sich ein, sobald der Abschnitt sichtbar wird (www.js setzt .on) */
.draw .viz-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.draw:not(.on) .viz-line { stroke-linecap: butt; }
.draw.on .viz-line { transition: stroke-dashoffset 1.6s var(--kurve-aus); stroke-dashoffset: 0; }
.draw.on .viz-line + .viz-line { transition-delay: 0.15s; }
.draw.bars .viz-bar { transform-box: fill-box; transform-origin: bottom; }
.draw.bars:not(.on) .viz-bar { transform: scaleY(0); }
.draw.bars.on .viz-bar { transition: transform 900ms var(--kurve-aus); }

/* Werte als Tabelle und weiterführender Link */
.chart details { margin-top: 12px; font-size: 13px; }
.chart summary { width: max-content; max-width: 100%; cursor: pointer; color: var(--akzent); list-style-position: outside; }
.chart details[open] summary { margin-bottom: 8px; }
.chart details > table { display: block; max-height: 280px; overflow: auto; }
.chart > a { display: inline-block; margin-top: 6px; font-size: 13px; color: var(--text-2); text-decoration: none; }
.chart > a::after { content: " →"; color: var(--akzent); }
.chart > a:hover { color: var(--akzent); }
.legal { padding-top: 32px; }

/* Responsiv */
@media (max-width: 1099px) { .page-head .now { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 959px) { .charts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) {
  .charts { grid-template-columns: minmax(0, 1fr); }
  .page-head .now { grid-template-columns: minmax(0, 1fr); }
  .page-head { grid-template-columns: minmax(0, 1fr); padding-top: 24px; }
  .page-head .big { grid-column: 1; grid-row: auto; margin-top: 16px; font-size: 64px; }
}

/* Weniger Bewegung: Linien und Nadel stehen sofort */
@media (prefers-reduced-motion: reduce) {
  .draw .viz-line, .draw.on .viz-line { stroke-dashoffset: 0; transition: none; }
  .draw.bars:not(.on) .viz-bar, .draw.bars.on .viz-bar { transform: none; transition: none; }
  .compass.draw:not(.on) .needle, .compass.draw.on .needle { transform: rotate(var(--deg)); transition: none; }
}
/* Ohne JavaScript: Nadel steht, Diagramme gibt es nur als Tabelle */
html:not(.js) .compass .needle { transform: none; } /* ohne JS keine Richtung: Nadel steht nach Norden, Text daneben nennt sie */
html:not(.js) .viz-plot:not(:has(.empty)), html:not(.js) .chart .axis { display: none; }
html:not(.js) .theme-schalter { display: none; } /* Schalter braucht lumen.js */
@media (prefers-reduced-transparency: reduce) { :root:not([data-transparenz="voll"]) .viz-tip { -webkit-backdrop-filter: none; backdrop-filter: none; } }
[data-transparenz="reduziert"] .viz-tip { -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (forced-colors: active) { .viz-line { stroke: CanvasText; } .viz .viz-bar, .viz-dot { fill: CanvasText; } }