/* Helfen statt Blockieren, Fragmente „Blockaden der Weltwirtschaft“ (3. November 2026).
   Ergänzt redaktion.css um Farben je Akteur und je Art sowie um Flächen- und Netzbilder.
   Kategoriale Farben nach dem dataviz-Verfahren, geprüft mit validate_palette.js auf weißer Fläche:
   #2a78d6, #eb6834, #1baf7a, #eda100, #e87ba4, #008300 bestehen alle Pflichtprüfungen; Aqua, Gelb und Magenta
   liegen unter 3:1 Kontrast, deshalb stehen alle Werte zusätzlich als Tabelle und als Beschriftung bereit.
   Farbe folgt dem Akteur, nicht der Rangfolge: USA immer Blau, EU immer Orange, UN immer Aqua, andere Gelb. */
.hsb-red{
  --k-1:#2a78d6; --k-2:#eb6834; --k-3:#1baf7a; --k-4:#eda100; --k-5:#e87ba4; --k-6:#008300; --k-7:#6250d6;
}
/* Akteure (GSDB): USA, EU, UN, andere */
.hsb-red [data-palette="akteure"] .ser-1{--c:var(--k-1)}
.hsb-red [data-palette="akteure"] .ser-2{--c:var(--k-2)}
.hsb-red [data-palette="akteure"] .ser-3{--c:var(--k-3)}
.hsb-red [data-palette="akteure"] .ser-4{--c:var(--k-4)}
/* TIES: USA, Vereinigtes Königreich, UdSSR/Russland, China (geprüft: CVD 13,0, Normalsicht 27,5) */
.hsb-red [data-palette="ties"] .ser-1{--c:var(--k-1)}
.hsb-red [data-palette="ties"] .ser-2{--c:var(--k-5)}
.hsb-red [data-palette="ties"] .ser-3{--c:var(--k-6)}
.hsb-red [data-palette="ties"] .ser-4{--c:var(--k-7)}
/* Zwei Reihen: Gesamt und Neu, schädlich und liberalisierend, G7 und BRICS */
.hsb-red [data-palette="zwei"] .ser-1{--c:#1f4f8f}
.hsb-red [data-palette="zwei"] .ser-2{--c:var(--k-2)}
/* Freie Tooltips außerhalb der Abbildung */
.hsb-tip .k-1{--c:#2a78d6}.hsb-tip .k-2{--c:#eb6834}.hsb-tip .k-3{--c:#1baf7a}.hsb-tip .k-4{--c:#eda100}.hsb-tip .k-5{--c:#e87ba4}.hsb-tip .k-6{--c:#008300}

/* Gestapelte Flächen und Säulen (inline-SVG) */
.hsb-red .hsb-stack svg{display:block;width:100%;height:auto;overflow:visible}
.hsb-red .hsb-stack .f1{fill:var(--k-1)}.hsb-red .hsb-stack .f2{fill:var(--k-2)}.hsb-red .hsb-stack .f3{fill:var(--k-3)}
.hsb-red .hsb-stack .f4{fill:var(--k-4)}.hsb-red .hsb-stack .f5{fill:var(--k-5)}.hsb-red .hsb-stack .f6{fill:var(--k-6)}
.hsb-red .hsb-stack .area{stroke:var(--c-surface,#fff);stroke-width:1.5;stroke-linejoin:round}
.hsb-red .hsb-stack .seg{stroke:var(--c-surface,#fff);stroke-width:2}
.hsb-red .hsb-stack .band{fill:transparent;cursor:crosshair;outline:none}
.hsb-red .hsb-stack .band:hover,.hsb-red .hsb-stack .band:focus-visible{fill:rgba(14,27,50,.06)}
.hsb-red .hsb-stack .band:focus-visible{stroke:var(--blue-accent,#3b6fb6);stroke-width:2}
.hsb-red .hsb-stack .lbl{font:600 13px var(--f-cond,system-ui);fill:var(--c-ink,#0e1b32)}
.hsb-red .hsb-stack .tick{font:500 12.5px var(--f-cond,system-ui);fill:var(--c-muted,#6b7385)}
.hsb-red .hsb-stack .grid line{stroke:var(--c-grid,#e3e8f0)}
.hsb-red .hsb-keys{display:flex;flex-wrap:wrap;gap:6px 18px;list-style:none;margin:2px 0 10px;padding:0;font-size:14.5px;color:var(--c-ink2,#525b6b)}
.hsb-red .hsb-keys li{display:flex;align-items:center;gap:7px}
.hsb-red .hsb-keys i{display:inline-block;width:12px;height:12px;border-radius:3px;flex:none}
.hsb-red .hsb-keys .k1{background:var(--k-1)}.hsb-red .hsb-keys .k2{background:var(--k-2)}.hsb-red .hsb-keys .k3{background:var(--k-3)}
.hsb-red .hsb-keys .k4{background:var(--k-4)}.hsb-red .hsb-keys .k5{background:var(--k-5)}.hsb-red .hsb-keys .k6{background:var(--k-6)}
.hsb-red .hsb-keys .dash{width:22px;height:0;border-radius:0;border-top:3px solid var(--c-ink2,#525b6b)}
.hsb-red .hsb-keys .dash.d1{border-color:var(--k-1)}.hsb-red .hsb-keys .dash.d2{border-color:var(--k-2);border-top-style:dashed}
.hsb-red .hsb-keys .dash.d3{border-color:var(--k-3);border-top-style:dotted}.hsb-red .hsb-keys .dash.d4{border-color:#b97e00;border-top-width:4px}
.hsb-red .hsb-keys .dash.d5{border-color:var(--k-5);border-top-style:dashed}

/* Netzbild Wirtschaftsraum gegen Wirtschaftsraum */
.hsb-red .hsb-net svg{display:block;width:100%;height:auto}
.hsb-red .hsb-net .node circle{fill:#f2f6fc;stroke:#1f4f8f;stroke-width:2}
.hsb-red .hsb-net .node text{font:700 15px var(--f-text,system-ui);fill:var(--c-ink,#0e1b32);text-anchor:middle}
.hsb-red .hsb-net .node .s{font:400 12px var(--f-text,system-ui);fill:var(--c-ink2,#525b6b)}
.hsb-red .hsb-net .edge path{fill:none;stroke-width:2.4;stroke-linecap:round}
.hsb-red .hsb-net .edge .hit{stroke:transparent;stroke-width:16;cursor:help}
.hsb-red .hsb-net .e1 path.v{stroke:var(--k-1)}
.hsb-red .hsb-net .e2 path.v{stroke:var(--k-2);stroke-dasharray:8 5}
.hsb-red .hsb-net .e3 path.v{stroke:var(--k-3);stroke-dasharray:2 4}
.hsb-red .hsb-net .e4 path.v{stroke:#b97e00;stroke-width:3.2}
.hsb-red .hsb-net .e5 path.v{stroke:var(--k-5);stroke-dasharray:10 4 2 4}
.hsb-red .hsb-net .e1 .ah{fill:var(--k-1)}.hsb-red .hsb-net .e2 .ah{fill:var(--k-2)}.hsb-red .hsb-net .e3 .ah{fill:var(--k-3)}
.hsb-red .hsb-net .e4 .ah{fill:#b97e00}.hsb-red .hsb-net .e5 .ah{fill:var(--k-5)}
.hsb-red .hsb-net .edge{outline:none}
.hsb-red .hsb-net .edge:hover path.v,.hsb-red .hsb-net .edge:focus-visible path.v{stroke-width:4.5}
.hsb-red .hsb-net .edge:focus-visible .hit{stroke:rgba(59,111,182,.25)}
.hsb-red .hsb-net .elab{font:600 12px var(--f-cond,system-ui);fill:var(--c-ink2,#525b6b);paint-order:stroke;stroke:#fff;stroke-width:4px;stroke-linejoin:round}
.hsb-red .hsb-net .narrow-note{display:none}
@media (max-width:860px){
  .hsb-red .hsb-net .wide{display:none}
  .hsb-red .hsb-net .narrow-note{display:block;font-size:15px;color:var(--c-ink2,#525b6b)}
}
.hsb-red table.hsb-wide{width:100%;border-collapse:collapse;font-size:15px;margin:10px 0}
.hsb-red table.hsb-wide th,.hsb-red table.hsb-wide td{padding:7px 8px;border-bottom:1px solid var(--c-grid,#e3e8f0);vertical-align:top;text-align:left}
.hsb-red table.hsb-wide thead th{color:var(--c-ink2,#525b6b);font-weight:600}
.hsb-red table.hsb-wide td.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
/* Einblendung: die Abbildungen tragen zusätzlich die Klasse hsb-sketch, charts.js blendet sie damit ein */
@media (forced-colors:active){
  .hsb-red .hsb-stack path,.hsb-red .hsb-stack rect,.hsb-red .hsb-keys i,.hsb-red .hsb-net path{forced-color-adjust:none}
}