/* =========================================================================
   RD-0-06 — Diagramm-Bausteine D (Redesign 2026/27): <x-akw.diagramm.*> und die Daten-Palette. Rein additiv: nichts hier greift, solange
   keine Seite einen Baustein ausgibt; die Tokens gelten nur im Scope der Tokens D (.d-system bzw. [data-design="2027"], siehe ci.css RD-0-01).
   Bausteine tragen .d-system nicht selbst — die Seite setzt den Scope (und ggf. data-theme) wie bei allen Tokens D.

   1. Daten-Palette --d-daten-1 bis -6 (feste Reihenfolge Amber · Stahl · Glut · Sand · Kupfer · Grün), hell und dunkel mit denselben vier Formen
      der Modus-Wahl wie in ci.css. App\Support\Design\DatenPalette ist die Quelle; ein Test hält diese Datei und die Klasse gleich und prüft
      Kontrast (≥ 3:1 gegen Grund, Fläche, Glas) und Unterscheidbarkeit benachbarter Reihen (Normalsicht ΔE ≥ 15, Farbsehschwäche ΔE ≥ 8).
   2. Bausteine: nur var(--d-…)-Tokens, keine festen Farben (ein Test hält das fest). Zustand = Form + Farbe + Text, nie Farbe allein.
   3. Keine Animation hier: Zeichnen, Zählen, Signal und Schalten macht akw-bewegung.js (RD-0-05); ohne Skript steht der Endzustand.
   Spur der Lücke zwischen Segmenten und Füllung offener Lampen: --dg-luecke (Standard --d-flaeche) — auf Glas-Karten die Fläche darunter setzen.
   Diagramme stehen auf Grund, Fläche oder Glas — NICHT direkt auf der Aura (dort sinken Datenfarben unter 3:1, z. B. Amber dunkel auf „Glaskarte über
   beiden Auren“ 2,9:1); über der Aura die Karte auf --d-flaeche setzen. Mehrere Reihen unterscheiden sich zusätzlich durch Form/Strichart und Text.
   ========================================================================= */

/* 1. Palette — hell (Standard) */
.d-system,
[data-design="2027"]{
    --d-daten-1:#b5750b;
    --d-daten-2:#3d6478;
    --d-daten-3:#d06600;
    --d-daten-4:#7a6e58;
    --d-daten-5:#c2410c;
    --d-daten-6:#3f7d4e;
}

/* … dunkel, ausdrücklich: data-theme="dark" am Scope selbst … */
.d-system[data-theme="dark"],
[data-design="2027"][data-theme="dark"]{
    --d-daten-1:#f2a516;
    --d-daten-2:#8fb0c2;
    --d-daten-3:#ff8a2a;
    --d-daten-4:#a89c86;
    --d-daten-5:#d2502a;
    --d-daten-6:#6cc58a;
}

/* … oder an einem Vorfahren (Werbeseite: <html data-theme>); ein Scope mit data-theme="light" bleibt hell. */
[data-theme="dark"] .d-system:not([data-theme="light"]),
[data-theme="dark"] [data-design="2027"]:not([data-theme="light"]){
    --d-daten-1:#f2a516;
    --d-daten-2:#8fb0c2;
    --d-daten-3:#ff8a2a;
    --d-daten-4:#a89c86;
    --d-daten-5:#d2502a;
    --d-daten-6:#6cc58a;
}

/* … oder nach der Systemeinstellung, solange weder Wurzelelement noch Scope hell erzwingen. */
@media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]) .d-system:not([data-theme="light"]),
    :root:not([data-theme="light"]) [data-design="2027"]:not([data-theme="light"]),
    :root[data-design="2027"]:not([data-theme="light"]){
        --d-daten-1:#f2a516;
        --d-daten-2:#8fb0c2;
        --d-daten-3:#ff8a2a;
        --d-daten-4:#a89c86;
        --d-daten-5:#d2502a;
        --d-daten-6:#6cc58a;
    }
}

/* 2. Bausteine */
/* Vorgabe der Reihenfarbe mit Spezifität 0: sie darf eine Ton-Klasse auf demselben Element (Messbogen, Sparkline) nie überstimmen. */
:where(.akw-dg){--dg-farbe:var(--d-daten-1)}
.akw-dg-ton-1{--dg-farbe:var(--d-daten-1)}
.akw-dg-ton-2{--dg-farbe:var(--d-daten-2)}
.akw-dg-ton-3{--dg-farbe:var(--d-daten-3)}
.akw-dg-ton-4{--dg-farbe:var(--d-daten-4)}
.akw-dg-ton-5{--dg-farbe:var(--d-daten-5)}
.akw-dg-ton-6{--dg-farbe:var(--d-daten-6)}
.akw-dg-ton-ok{--dg-farbe:var(--d-ok)}
.akw-dg-ton-warnung{--dg-farbe:var(--d-daten-1)} /* Amber der Palette: --d-akzent erreicht hell nur 1,7:1 */
.akw-dg-ton-kritisch{--dg-farbe:var(--d-kritisch)}
.akw-dg-ton-info{--dg-farbe:var(--d-info)}

.akw-dg{position:relative;margin:0;color:var(--d-text);font-family:var(--d-font-body)}
ol.akw-dg{list-style:none;padding:0}
.akw-dg__svg{display:block;overflow:visible}
.akw-dg__sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}

.akw-dg__tabellen-huelle:not(.akw-dg__sr){margin-top:10px}
.akw-dg__tabelle{width:100%;border-collapse:collapse;font-size:13px;color:var(--d-text-2)}
.akw-dg__tabelle caption{padding-bottom:6px;text-align:left;font-weight:600;color:var(--d-text)}
.akw-dg__tabelle th,.akw-dg__tabelle td{padding:6px 8px;border-bottom:1px solid var(--d-kante);text-align:left;font-weight:400}
.akw-dg__tabelle thead th{font-weight:600;color:var(--d-text)}
.akw-dg__tabelle td{font-variant-numeric:tabular-nums}

.akw-dg__spur{fill:none;stroke:var(--d-spur);stroke-width:9;stroke-linecap:round}
.akw-dg__spur-fl{fill:var(--d-spur)}
.akw-dg__zahl{font:700 15px/1 var(--d-font-display);font-stretch:80%;font-variant-numeric:tabular-nums;fill:var(--d-text)}

/* Messbogen */
.akw-dg--messbogen .akw-dg__svg{width:100%;max-width:240px;height:auto}
.akw-dg__bogen{fill:none;stroke:var(--dg-farbe);stroke-width:9;stroke-linecap:round;filter:drop-shadow(0 0 6px var(--d-glow))}

/* Segment-Ring */
.akw-dg--segmentring{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.akw-dg--segmentring .akw-dg__svg{flex:none;width:72px;height:72px}
.akw-dg--segmentring .akw-dg__spur{stroke-linecap:butt}
.akw-dg--segmentring .akw-dg__zahl{font-size:10px}
.akw-dg__seg{fill:none;stroke:var(--dg-farbe);stroke-width:9;stroke-linecap:butt}
.akw-dg--segmentring .akw-dg__legende{flex:1 1 140px;margin-top:0}

/* Stapel */
.akw-dg--stapel .akw-dg__svg{width:100%;height:14px}
.akw-dg__stapel-seg{fill:var(--dg-farbe);stroke:var(--dg-luecke,var(--d-flaeche));stroke-width:2}

/* Legende mit Formmarken: Status trägt Form UND Farbe */
.akw-dg__legende{display:flex;flex-wrap:wrap;gap:4px 12px;margin:10px 0 0;padding:0;list-style:none;font-size:12.5px;line-height:1.3;color:var(--d-text-2)}
.akw-dg__legende li{display:inline-flex;align-items:center}
.akw-dg__legende b{margin-left:5px;font-weight:600;color:var(--d-text);font-variant-numeric:tabular-nums}
.akw-dg__marke{display:inline-block;flex:none;width:10px;height:10px;margin-right:6px;background:var(--dg-farbe)}
.akw-dg__marke--kreis{border-radius:50%}
.akw-dg__marke--ring{box-sizing:border-box;border:3px solid var(--dg-farbe);border-radius:50%;background:transparent}
.akw-dg__marke--dreieck{clip-path:polygon(50% 0,100% 100%,0 100%)}
.akw-dg__marke--raute{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.akw-dg__marke--quadrat{border-radius:2px}
.akw-dg__probe{flex:none;margin-right:6px;overflow:visible}

/* Sparkline und Liniendiagramm */
.akw-dg--sparkline .akw-dg__svg{width:100%;height:64px}
.akw-dg__stufe-oben{stop-color:var(--dg-farbe);stop-opacity:.38}
.akw-dg__stufe-unten{stop-color:var(--dg-farbe);stop-opacity:0}
.akw-dg__flaeche{stroke:none}
.akw-dg__linie{fill:none;stroke:var(--dg-farbe);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.akw-dg--linie .akw-dg__svg{width:100%;height:auto}
.akw-dg--linie .akw-dg__linie{stroke-width:2.6;vector-effect:none;filter:drop-shadow(0 0 8px color-mix(in srgb,var(--dg-farbe) 55%,transparent))}
.akw-dg__gitter line{stroke:var(--d-kante);stroke-width:1}
.akw-dg__achse{font:500 10.5px/1 var(--d-font-mono);fill:var(--d-text-3)}
.akw-dg__halo{fill:none;stroke:var(--dg-farbe);stroke-width:1.5}
.akw-dg__punkt-ende{fill:var(--dg-farbe);stroke:var(--dg-luecke,var(--d-flaeche));stroke-width:2}
.akw-dg__wertmarke{font:700 13px/1 var(--d-font-display);fill:var(--d-text);font-variant-numeric:tabular-nums}

/* Lampenreihe und Leitung: Liste, Lampe 24 px, Leitung als Linie hinter der Lampe */
.akw-dg__lampensvg{position:relative;z-index:1;display:block;flex:none;overflow:visible}
.akw-dg__draht{position:relative;display:flex;justify-content:center;width:100%;height:24px}
.akw-dg__draht::before,.akw-dg__draht::after{content:"";position:absolute;top:11px;height:2px;background:var(--d-spur)}
.akw-dg__draht::before{left:0;right:50%}
.akw-dg__draht::after{left:50%;right:0}
.akw-dg__lampe:first-child .akw-dg__draht::before,.akw-dg__lampe:last-child .akw-dg__draht::after,
.akw-dg__knoten:first-child .akw-dg__draht::before,.akw-dg__knoten:last-child .akw-dg__draht::after{display:none}
.akw-dg__lampe--strom-links .akw-dg__draht::before,.akw-dg__lampe--strom-rechts .akw-dg__draht::after{background:var(--d-akzent);box-shadow:0 0 10px var(--d-glow)}

.akw-dg__l-fuell{fill:var(--d-text);stroke:var(--d-text);stroke-width:2}
.akw-dg__l-kontur{fill:var(--dg-luecke,var(--d-flaeche));stroke:var(--d-kontur);stroke-width:2}
.akw-dg__l-gestrichelt{stroke-dasharray:3 3}
.akw-dg__l-akzent{fill:var(--d-akzent);stroke:var(--d-kontur);stroke-width:1.5;filter:drop-shadow(0 0 6px var(--d-glow))}
.akw-dg__l-ring{fill:none;stroke:var(--d-akzent);stroke-width:1.5}
.akw-dg__l-stoerung{fill:var(--d-kritisch);stroke:var(--d-kritisch);stroke-width:1;stroke-linejoin:round}
.akw-dg__l-zeichen{fill:none;stroke:var(--d-flaeche);stroke-width:2;stroke-linecap:round}
.akw-dg__l-punkt{fill:var(--d-flaeche)}

.akw-dg__zahl-text{display:block;margin-bottom:6px;font:800 26px/1 var(--d-font-display);font-stretch:80%;font-variant-numeric:tabular-nums;color:var(--d-text)}
.akw-dg__zahl-text--leer{visibility:hidden}
.akw-dg__name{display:block;margin-top:8px;font:600 13px/1.25 var(--d-font-body);color:var(--d-text)}
.akw-dg__text{display:block;margin-top:4px;font-size:12px;line-height:1.35;color:var(--d-text-2)}
.akw-dg__nr{display:block;margin-top:8px;font:500 11px/1.3 var(--d-font-mono);letter-spacing:.12em;color:var(--d-akzent-text)}
.akw-dg__lampe--aktiv .akw-dg__name,.akw-dg__knoten--aktiv .akw-dg__name{color:var(--d-akzent-text)}
.akw-dg__knoten--ohne .akw-dg__l-kontur{stroke:var(--d-akzent-text)}

ol.akw-dg--lampenreihe{display:flex;flex-wrap:wrap;gap:22px 0}
.akw-dg__lampe{flex:1 1 0;min-width:84px;display:flex;flex-direction:column;align-items:center;text-align:center}
.akw-dg__lampe .akw-dg__name,.akw-dg__lampe .akw-dg__text{padding:0 6px}

/* Leitung: senkrecht ist der Grundzustand (Handy), waagerecht ab 761 px */
/* Leitung: Wurzel ist ein <div> (Bewegungsteile stehen neben der Liste, nie in ihr), die Liste ein <ol class="akw-dg__leitung-liste"> */
.akw-dg--leitung{display:block}
ol.akw-dg__leitung-liste{display:grid;gap:0;margin:0;padding:0;list-style:none}
.akw-dg__knoten{position:relative;display:grid;grid-template-columns:24px 1fr;column-gap:14px;padding-bottom:22px;text-align:left}
.akw-dg__knoten:last-child{padding-bottom:0}
.akw-dg__knoten .akw-dg__draht{grid-row:1 / span 4;grid-column:1;align-self:stretch;width:24px;height:auto;justify-content:center;align-items:flex-start}
.akw-dg__knoten .akw-dg__draht::before,.akw-dg__knoten .akw-dg__draht::after{left:11px;right:auto;width:2px}
.akw-dg__knoten .akw-dg__draht::before{top:0;height:12px}
.akw-dg__knoten .akw-dg__draht::after{top:12px;bottom:-22px;height:auto}
.akw-dg__knoten:last-child .akw-dg__draht::after{bottom:0}
.akw-dg__knoten > .akw-dg__nr,.akw-dg__knoten > .akw-dg__name,.akw-dg__knoten > .akw-dg__text{grid-column:2;margin-top:0}
.akw-dg__knoten > .akw-dg__name{margin-top:2px}
.akw-dg__knoten > .akw-dg__text{margin-top:4px}
.akw-dg__knoten .akw-dg__lampensvg{position:relative;z-index:1}
@media (min-width:761px){
    .akw-dg--leitung-h > ol.akw-dg__leitung-liste{grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);column-gap:0}
    .akw-dg--leitung-h .akw-dg__knoten{display:flex;flex-direction:column;align-items:flex-start;padding:0 14px 0 0}
    .akw-dg--leitung-h .akw-dg__knoten .akw-dg__draht{grid-row:auto;align-self:auto;width:calc(100% + 14px);height:24px;margin-right:-14px;align-items:center;justify-content:flex-start}
    .akw-dg--leitung-h .akw-dg__knoten .akw-dg__draht::before,.akw-dg--leitung-h .akw-dg__knoten .akw-dg__draht::after{top:11px;bottom:auto;width:auto;height:2px}
    .akw-dg--leitung-h .akw-dg__knoten .akw-dg__draht::before{left:0;right:auto;width:12px}
    .akw-dg--leitung-h .akw-dg__knoten .akw-dg__draht::after{left:12px;right:0}
    .akw-dg--leitung-h .akw-dg__knoten:last-child .akw-dg__draht::after{display:none}
    .akw-dg--leitung-h .akw-dg__knoten > .akw-dg__nr{margin-top:10px}
    .akw-dg--leitung-h .akw-dg__knoten > .akw-dg__name{margin-top:2px}
}

/* Bewegungs-Haken von akw-bewegung.js (RD-0-05): Messstrecke [data-leitung-linie] und Impuls .d-spur laufen von der ersten bis zur letzten Lampe.
   Die Anzahl der Schritte (2 bis 8) kommt über akw-dg--n-N; senkrecht haben alle Zeilen dieselbe Höhe, waagerecht alle Spalten dieselbe Breite. */
.akw-dg--n-2{--dg-n:2}
.akw-dg--n-3{--dg-n:3}
.akw-dg--n-4{--dg-n:4}
.akw-dg--n-5{--dg-n:5}
.akw-dg--n-6{--dg-n:6}
.akw-dg--n-7{--dg-n:7}
.akw-dg--n-8{--dg-n:8}
[data-leitung] > ol.akw-dg__leitung-liste{grid-auto-rows:1fr}
.akw-dg__knopf{z-index:1;display:block;width:24px;height:24px;border-radius:50%}
.akw-dg__leitungslinie,.akw-dg__spurlicht{position:absolute;display:block;pointer-events:none}
.akw-dg__leitungslinie{left:11px;top:12px;width:2px;height:calc(100% * (var(--dg-n) - 1) / var(--dg-n))}
.akw-dg__spurlicht{z-index:2;left:4px;top:12px;width:16px;height:calc(100% * (var(--dg-n) - 1) / var(--dg-n))}
.akw-dg__spurlicht > i{position:absolute;left:0;top:-8px;display:block;width:16px;height:16px;border-radius:50%;background:var(--d-text);box-shadow:0 0 0 4px var(--d-glow),0 0 24px 6px var(--d-akzent)}
@media (min-width:761px){
    .akw-dg--leitung-h[data-leitung] > ol.akw-dg__leitung-liste{grid-auto-rows:auto}
    .akw-dg--leitung-h .akw-dg__leitungslinie{left:12px;top:11px;width:calc(100% * (var(--dg-n) - 1) / var(--dg-n));height:2px}
    .akw-dg--leitung-h .akw-dg__spurlicht{left:12px;top:4px;width:calc(100% * (var(--dg-n) - 1) / var(--dg-n));height:16px}
    .akw-dg--leitung-h .akw-dg__spurlicht > i{left:-8px;top:0}
}

@media (max-width:560px){
    ol.akw-dg--lampenreihe .akw-dg__draht::before,ol.akw-dg--lampenreihe .akw-dg__draht::after{display:none}
}

/* Systemeinstellungen: kein Glow bei erhöhtem Kontrast; erzwungene Farben → Systemfarben, Form und Text bleiben */
@media (prefers-contrast:more){
    .akw-dg *,.akw-dg *::before,.akw-dg *::after{filter:none!important;box-shadow:none!important}
    .akw-dg__draht::before,.akw-dg__draht::after{background:var(--d-kontur)}
    .akw-dg__lampe--strom-links .akw-dg__draht::before,.akw-dg__lampe--strom-rechts .akw-dg__draht::after{background:var(--d-text)}
}
@media (forced-colors:active){
    .akw-dg__spur,.akw-dg__gitter line{stroke:GrayText}
    .akw-dg__spur-fl{fill:GrayText}
    .akw-dg__bogen,.akw-dg__seg,.akw-dg__linie,.akw-dg__halo{stroke:Highlight}
    .akw-dg__stapel-seg{fill:Highlight;stroke:Canvas}
    .akw-dg__punkt-ende{fill:Highlight;stroke:Canvas}
    .akw-dg__zahl,.akw-dg__wertmarke,.akw-dg__achse{fill:CanvasText}
    .akw-dg__marke{background:CanvasText;border-color:CanvasText}
    .akw-dg__marke--ring{background:transparent}
    .akw-dg__draht::before,.akw-dg__draht::after{background:GrayText}
    .akw-dg__lampe--strom-links .akw-dg__draht::before,.akw-dg__lampe--strom-rechts .akw-dg__draht::after{background:Highlight;box-shadow:none}
    .akw-dg__l-fuell,.akw-dg__l-akzent,.akw-dg__l-stoerung{fill:CanvasText;stroke:CanvasText}
    .akw-dg__l-kontur{fill:Canvas;stroke:CanvasText}
    .akw-dg__l-ring{stroke:Highlight}
    .akw-dg__l-zeichen{stroke:Canvas}
    .akw-dg__l-punkt{fill:Canvas}
    .akw-dg__spurlicht > i{background:Highlight}
}