/* Helfen statt Blockieren, Themenreihe v10 (Völkerrecht, Sterblichkeit, Titel III, Krieg und Hunger, Listungen, Syrien,
   Berliner Dekret, Kuba Menschenrechte, Wirkung, Unterricht). Redaktionslauf vom 3. November 2026.
   Ergänzt site.css, redaktion.css und leitartikel.css; nutzt deren Variablen und Schriften. Kein Skript, keine externen Dateien.
   Farbe trägt keine Information allein: jede Grafik steht auch als Tabelle im HTML. */

/* Kernaussagen oben im Artikel */
.hsb-red .th-kern{margin:6px 0 26px;padding:18px 22px 8px;border-radius:var(--r-md,20px);background:#fff;box-shadow:0 0 0 1px rgba(1,41,91,.12);border-left:6px solid var(--navy,#01295b)}
.hsb-red .th-kern h2{font-size:20px;margin:0 0 8px}
.hsb-red .th-kern ol{margin:0 0 10px;padding-left:1.3em}
.hsb-red .th-kern li{font-size:17px;line-height:1.5;margin:0 0 8px}

/* Kasten: Was dieser Text nicht sagt, Praxisfragen, Prüfschritte */
.hsb-red .th-kasten{margin:28px 0;padding:18px 22px 10px;border-radius:var(--r-md,20px);background:var(--surface,#f6f9fd);box-shadow:0 0 0 1px rgba(1,41,91,.1)}
.hsb-red .th-kasten h2{font-size:20px;margin:0 0 8px}
.hsb-red .th-kasten ul,.hsb-red .th-kasten ol{margin:0 0 10px;padding-left:1.2em}
.hsb-red .th-kasten li{font-size:16px;line-height:1.5;margin:0 0 6px}

/* Zwei Seiten nebeneinander, auf schmalen Bildschirmen untereinander */
.hsb-red .th-seiten{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin:18px 0 24px}
.hsb-red .th-seiten>div{background:#fff;border-radius:16px;padding:14px 18px;box-shadow:0 0 0 1px rgba(1,41,91,.08)}
.hsb-red .th-seiten h3{font-size:17px;margin:0 0 6px}
.hsb-red .th-seiten p{font-size:16px;line-height:1.5;margin:0 0 8px}

/* Tabellen ohne Diagramm (charts.js liest nur figure.hsb-chart) */
.hsb-red figure.th-tabelle{margin:22px 0 26px}
.hsb-red figure.th-tabelle table,.hsb-red figure.th-spannefig table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.45}
.hsb-red figure.th-tabelle th,.hsb-red figure.th-tabelle td,.hsb-red figure.th-spannefig th,.hsb-red figure.th-spannefig td{padding:8px 10px;border-bottom:1px solid rgba(1,41,91,.12);text-align:left;vertical-align:top}
.hsb-red figure.th-tabelle thead th,.hsb-red figure.th-spannefig thead th{font:600 14px/1.3 var(--f-cond,system-ui);color:var(--ink-muted,#525b6b);border-bottom:2px solid rgba(1,41,91,.25)}
.hsb-red figure.th-tabelle td.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}

/* Spannweiten (Inline-SVG) */
.hsb-red svg.th-spanne{display:block;width:100%;height:auto;margin:10px 0 12px}
.hsb-red .th-spanne .th-grid{stroke:#d5deeb;stroke-width:1}
.hsb-red .th-spanne .th-tick{font:500 12px var(--f-cond,system-ui);fill:#525b6b}
.hsb-red .th-spanne .th-lab{font:600 13px var(--f-cond,system-ui);fill:#1b2433}
.hsb-red .th-spanne .th-bar{fill:#2a78d6;opacity:.35}
.hsb-red .th-spanne .th-pt{fill:#01295b;stroke:#fff;stroke-width:2}

/* Unterricht: Arbeitsblätter, Rollenkarten, Druck */
.hsb-red .th-blatt{margin:30px 0;padding:20px 22px;border:2px solid rgba(1,41,91,.18);border-radius:16px;background:#fff}
.hsb-red .th-blatt h2{margin-top:0}
.hsb-red .th-blatt .th-meta{font:600 14px/1.3 var(--f-cond,system-ui);color:var(--ink-muted,#525b6b);margin:0 0 10px}
.hsb-red .th-aufgabe{margin:14px 0;padding:12px 16px;border-left:5px solid var(--blue-accent,#3b6fb6);background:var(--surface,#f6f9fd);border-radius:0 12px 12px 0}
.hsb-red .th-linien{display:block;height:7.5em;margin:6px 0 14px;background:repeating-linear-gradient(to bottom,transparent 0,transparent 1.45em,#c9d4e4 1.45em,#c9d4e4 1.5em)}
.hsb-red .th-rollen{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin:14px 0}
.hsb-red .th-rollen>div{border:1.5px dashed rgba(1,41,91,.35);border-radius:12px;padding:12px 14px;background:#fff}
.hsb-red .th-rollen h3{font-size:16px;margin:0 0 6px}
.hsb-red .th-rollen p{font-size:15px;line-height:1.45;margin:0 0 6px}
@media print{
  .hsb-red .th-blatt{break-before:page;border:0;padding:0}
  .hsb-red .th-rollen>div{break-inside:avoid}
  .hsb-red .leit-weiter{display:none}
}
@media (max-width:640px){
  .hsb-red figure.th-tabelle table{font-size:14px}
  .hsb-red figure.th-tabelle th,.hsb-red figure.th-tabelle td{padding:6px 6px}
}