/* Helfen statt Blockieren, Rubrik Artikel: Diagramme, Kacheln, Skizzen.
   Ergänzt site.css (Farben --navy, --blue-ink, --ink, Schriften Barlow und Montserrat).
   Diagrammfarben geprüft mit dem Palettenprüfer des dataviz-Verfahrens auf weißer Fläche:
   Jahre als geordnete Blau-Stufe (#86b6ef, #2a78d6, #0d366b), Plus und Minus als Blau und Rot
   (#1f4f8f, #e34948), eine Reihe in #1f4f8f. Die Seite hat kein dunkles Farbschema; die
   Diagramme stehen deshalb immer auf weißer Fläche. */
.hsb-red{
  --c-surface:#ffffff; --c-ink:#0e1b32; --c-ink2:#525b6b; --c-muted:#6b7385;
  --c-grid:#e3e8f0; --c-base:#b9c3d3; --c-cross:#8d98ab;
  --c-1:#1f4f8f; --c-y24:#86b6ef; --c-y25:#2a78d6; --c-y26:#0d366b;
  --c-pos:#1f4f8f; --c-neg:#e34948;
}
.hsb-red .ser-1{--c:var(--c-1)}
.hsb-red [data-palette="ordinal"] .ser-1{--c:var(--c-y24)}
.hsb-red [data-palette="ordinal"] .ser-2{--c:var(--c-y25)}
.hsb-red [data-palette="ordinal"] .ser-3{--c:var(--c-y26)}
.hsb-red .ser-pos{--c:var(--c-pos)}
.hsb-red .ser-neg{--c:var(--c-neg)}

/* Abbildung */
.hsb-red figure{margin:34px 0 30px;padding:20px 20px 14px;background:var(--c-surface);border-radius:var(--r-md,20px);box-shadow:0 1px 2px rgba(1,41,91,.05),0 10px 30px -14px rgba(1,41,91,.22)}
.hsb-red figcaption{font:700 clamp(17px,2vw,19px)/1.3 var(--f-display,system-ui);color:var(--navy,#01295b);margin:0 0 4px}
.hsb-red figcaption + .hsb-sub,.hsb-red .hsb-sub{font-size:15px;line-height:1.45;color:var(--c-ink2);margin:0 0 12px}
.hsb-red .hsb-src{font-size:13.5px;line-height:1.45;color:var(--c-muted);margin:10px 0 0}
.hsb-red .hsb-plot{position:relative;width:100%;overflow:hidden}
.hsb-red .hsb-plot svg{display:block;width:100%;height:auto;overflow:visible}
.hsb-red .hsb-plot svg:focus-visible{outline:3px solid var(--blue-accent,#3b6fb6);outline-offset:4px;border-radius:6px}

/* Tabelle: ohne JavaScript sichtbar, mit JavaScript aufklappbar */
.hsb-red figure table{width:100%;border-collapse:collapse;font-size:15px;font-variant-numeric:tabular-nums;margin:6px 0 4px}
.hsb-red figure th,.hsb-red figure td{padding:6px 8px;border-bottom:1px solid var(--c-grid);text-align:right}
.hsb-red figure th:first-child,.hsb-red figure td:first-child{text-align:left}
.hsb-red figure thead th{color:var(--c-ink2);font-weight:600}
.hsb-red .hsb-tablewrap{overflow-x:auto}
.hsb-red details.hsb-data{margin-top:8px}
.hsb-red details.hsb-data summary{cursor:pointer;font-size:14.5px;color:var(--blue-ink,#1f4f8f);font-weight:600;padding:6px 0}
.hsb-red details.hsb-data summary:focus-visible{outline:3px solid var(--blue-accent,#3b6fb6);outline-offset:3px;border-radius:4px}

/* Achsen und Marken */
.hsb-red .grid line{stroke:var(--c-grid);stroke-width:1}
.hsb-red .grid line.base{stroke:var(--c-base)}
.hsb-red .tick{font:500 12.5px var(--f-cond,system-ui);fill:var(--c-muted);font-variant-numeric:tabular-nums}
.hsb-red .lab{font:500 14px var(--f-text,system-ui);fill:var(--c-ink)}
.hsb-red .val{font:600 13px var(--f-cond,system-ui);fill:var(--c-ink2);font-variant-numeric:tabular-nums}
.hsb-red .ln{fill:none;stroke:var(--c);stroke-width:2.25;stroke-linejoin:round;stroke-linecap:round}
.hsb-red .dot{fill:var(--c);stroke:var(--c-surface);stroke-width:2}
.hsb-red .hover{fill:var(--c);stroke:var(--c-surface);stroke-width:2.5}
.hsb-red .cross{stroke:var(--c-cross);stroke-width:1;stroke-dasharray:3 3}
.hsb-red .hit{fill:transparent;cursor:crosshair;touch-action:pan-y}
.hsb-red .bar{fill:var(--c);cursor:default}
.hsb-red .bar:focus{outline:none}
.hsb-red .bar:focus-visible{stroke:var(--c-ink);stroke-width:2}
.hsb-red .bar:hover{filter:brightness(1.12)}

/* Legende und Schlüssel */
.hsb-red .hsb-legend{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)}
.hsb-red .hsb-legend li{display:flex;align-items:center;gap:7px}
.hsb-red .key,.hsb-tip .key{display:inline-block;width:12px;height:12px;border-radius:3px;background:var(--c);flex:none}
.hsb-tip .key{margin-right:6px;vertical-align:-1px}

/* Tooltip */
.hsb-tip{position:absolute;z-index:20;pointer-events:none;max-width:260px;background:#fff;color:#0e1b32;border-radius:10px;padding:8px 11px;font:400 14px/1.4 var(--f-text,system-ui);box-shadow:0 0 0 1px rgba(1,41,91,.10),0 10px 26px -8px rgba(1,41,91,.35);font-variant-numeric:tabular-nums}
.hsb-tip strong{display:block;font-weight:600;margin-bottom:2px}
.hsb-tip span{display:flex;align-items:center}
.hsb-tip-free{max-width:300px}
/* Farbvariablen auch für den freien Tooltip */
.hsb-tip .ser-1{--c:#1f4f8f}.hsb-tip .ser-pos{--c:#1f4f8f}.hsb-tip .ser-neg{--c:#e34948}

/* Kacheln */
.hsb-red .hsb-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:30px 0}
.hsb-red .hsb-tile{background:var(--c-surface);border-radius:16px;padding:18px 18px 14px;box-shadow:0 0 0 1px rgba(1,41,91,.08);outline:none}
.hsb-red .hsb-tile:focus-visible{box-shadow:0 0 0 3px var(--blue-accent,#3b6fb6)}
.hsb-red .hsb-tile .v{display:block;font:800 clamp(28px,4vw,38px)/1.05 var(--f-display,system-ui);color:var(--navy,#01295b);letter-spacing:-.01em}
.hsb-red .hsb-tile .l{display:block;margin-top:6px;font-size:15px;line-height:1.4;color:var(--c-ink)}
.hsb-red .hsb-tile .q{display:block;margin-top:8px;font-size:12.5px;line-height:1.35;color:var(--c-muted)}

/* Skizzen (inline-SVG) */
.hsb-red .hsb-sketch svg{display:block;width:100%;height:auto}
.hsb-red .hsb-sketch .box{fill:#f2f6fc;stroke:#b9c9e2;stroke-width:1.5}
.hsb-red .hsb-sketch .box.hl{fill:#e3edfa;stroke:var(--c-1)}
.hsb-red .hsb-sketch .box.stop{fill:#fdeeee;stroke:var(--c-neg)}
.hsb-red .hsb-sketch .box.ok{fill:#eaf3ea;stroke:#2f7d32}
.hsb-red .hsb-sketch .t{font:600 15px var(--f-text,system-ui);fill:var(--c-ink)}
.hsb-red .hsb-sketch .s{font:400 13px var(--f-text,system-ui);fill:var(--c-ink2)}
.hsb-red .hsb-sketch .n{font:700 13px var(--f-cond,system-ui);fill:var(--c-1)}
.hsb-red .hsb-sketch .arrow{fill:none;stroke:var(--c-1);stroke-width:2}
.hsb-red .hsb-sketch .arrow.no{stroke:var(--c-neg);stroke-dasharray:5 4}
.hsb-red .hsb-sketch .head{fill:var(--c-1)}
.hsb-red .hsb-sketch .head.no{fill:var(--c-neg)}
.hsb-red .hsb-sketch [data-tip]{cursor:help;outline:none}
.hsb-red .hsb-sketch [data-tip]:focus-visible .box{stroke-width:3;stroke:var(--blue-accent,#3b6fb6)}
.hsb-red .hsb-sketch .wide{display:block}
.hsb-red .hsb-sketch .narrow{display:none}
@media (max-width:620px){
  .hsb-red .hsb-sketch .wide{display:none}
  .hsb-red .hsb-sketch .narrow{display:block}
  .hsb-red figure{padding:16px 12px 12px;margin-left:-4px;margin-right:-4px}
}

/* Kästen im Text */
.hsb-red .hsb-box{background:linear-gradient(160deg,#eaf2fd,#f6f9fd);border-radius:var(--r-md,20px);padding:18px 22px;margin:28px 0}
.hsb-red .hsb-box h3{font-size:19px;margin:0 0 8px}
.hsb-red .hsb-box p{font-size:17px}
.hsb-red .hsb-box p:last-child,.hsb-red .hsb-box ul:last-child{margin-bottom:0}
.hsb-red ol.hsb-steps{padding-left:1.3em}
.hsb-red ol.hsb-steps li{margin:0 0 10px;font-size:18px;line-height:1.6}
.hsb-red .hsb-byline{font-size:15px;color:var(--on-dark-muted,#b4c0d6)}
.hsb-red .qlist li{margin-bottom:6px}
.hsb-red .qlist a{overflow-wrap:anywhere}

/* Einblendung beim Scrollen, nur mit JavaScript und ohne „Bewegung reduzieren“ */
@media (prefers-reduced-motion:no-preference){
  .hsb-js .hsb-red .hsb-chart.has-chart .bar{transform-box:fill-box;transform-origin:left center;transform:scaleX(0);transition:transform .9s cubic-bezier(.2,.7,.2,1)}
  .hsb-js .hsb-red .hsb-chart.has-chart .bar[data-origin="right"]{transform-origin:right center}
  .hsb-js .hsb-red .hsb-chart.has-chart .bar.col{transform-origin:center bottom;transform:scaleY(0)}
  .hsb-js .hsb-red .hsb-chart.is-in .bar,.hsb-js .hsb-red .hsb-chart.is-in .bar.col,.hsb-js .hsb-red .hsb-chart.is-in .bar[data-origin="right"]{transform:none}
  .hsb-js .hsb-red .hsb-chart.has-chart .ln{transition:stroke-dashoffset 1.4s cubic-bezier(.3,.6,.2,1)}
  .hsb-js .hsb-red .hsb-chart.is-in .ln{stroke-dashoffset:0 !important}
  .hsb-js .hsb-red .hsb-chart.has-chart .dot{opacity:0;transition:opacity .4s 1.2s}
  .hsb-js .hsb-red .hsb-chart.is-in .dot{opacity:1}
  .hsb-js .hsb-red .hsb-sketch,.hsb-js .hsb-red .hsb-tiles{opacity:0;transform:translateY(14px);transition:opacity .7s,transform .7s cubic-bezier(.2,.7,.2,1)}
  .hsb-js .hsb-red .hsb-sketch.is-in,.hsb-js .hsb-red .hsb-tiles.is-in{opacity:1;transform:none}
}
@media (forced-colors:active){
  .hsb-red .bar,.hsb-red .key{forced-color-adjust:none}
  .hsb-red .ln{stroke:CanvasText}
}
@media print{
  .hsb-red figure{box-shadow:none;border:1px solid #ccc;break-inside:avoid}
  .hsb-red details.hsb-data{display:block}
  .hsb-tip{display:none}
}

/* Zeitleiste (echte Abfolge, daher nummeriert) */
.hsb-red ol.hsb-timeline{list-style:none;counter-reset:z;margin:26px 0 30px;padding:0;position:relative}
.hsb-red ol.hsb-timeline::before{content:"";position:absolute;left:15px;top:6px;bottom:6px;width:2px;background:#c9d7ec}
.hsb-red ol.hsb-timeline li{counter-increment:z;position:relative;padding:0 0 18px 50px;font-size:17px;line-height:1.55}
.hsb-red ol.hsb-timeline li::before{content:counter(z);position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%;background:var(--navy,#01295b);color:#fff;font:700 14px/32px var(--f-cond,system-ui);text-align:center}
.hsb-red ol.hsb-timeline time{display:block;font:600 14px/1.3 var(--f-cond,system-ui);letter-spacing:.04em;color:var(--blue-ink,#1f4f8f);padding-top:6px}
.hsb-red ol.hsb-timeline b{display:block;font:700 18px/1.35 var(--f-display,system-ui);color:var(--navy,#01295b);margin:2px 0 4px}
.hsb-red ol.hsb-timeline span{display:block;color:var(--c-ink)}

/* Skizzen dürfen breiter als die Textspalte sein */
.hsb-red figure.hsb-sketch.breit{width:min(1072px,calc(100vw - 32px));margin-left:calc(50% - min(536px,50vw - 16px))}
@media (max-width:860px){
  .hsb-red .hsb-sketch .wide{display:none}
  .hsb-red .hsb-sketch .narrow{display:block;max-width:420px;margin:0 auto}
}