/* Die Zahlen – mobile first, Farbwelt aus dem Newsletter-Projekt */
:root {
  --tinte: #0E1A2B;        /* Nachtblau */
  --akzent: #E8452C;       /* Signalrot */
  --papier: #F5F0E8;       /* Papierweiss */
  --tiefblau: #1F4E79;
  --nebentext: #4A4945;
  --flaeche: #FFFFFF;
  --linie: #D9D3C7;
  --band: rgba(31, 78, 121, 0.18);
  --balken: #1F4E79;
  --balken-total: #0E1A2B;
  --plus-rgb: 30, 105, 185;  /* Wachstum: Blau (kräftiger als Tiefblau, wirkt auf Papierweiss sonst grau) */
  --minus-rgb: 232, 69, 44;  /* Rückgang: Signalrot */
}
@media (prefers-color-scheme: dark) {
  :root {
    --tinte: #ECE7DE; --akzent: #FF6B52; --papier: #10161F; --tiefblau: #7FB0DC;
    --nebentext: #B5B0A6; --flaeche: #18212D; --linie: #2E3A49;
    --band: rgba(127, 176, 220, 0.22); --balken: #7FB0DC; --balken-total: #ECE7DE;
    --plus-rgb: 127, 176, 220; --minus-rgb: 255, 107, 82;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--papier); color: var(--tinte);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}
a { color: var(--tiefblau); }
main { max-width: 760px; margin: 0 auto; padding: 0 16px 32px; }
h1 { font-size: 1.5rem; line-height: 1.25; margin: .5rem 0; }
h2 { font-size: 1.15rem; margin: 2rem 0 .5rem; }
h3 { font-size: 1rem; margin: 0 0 .25rem; }
.meta, .einleitung { color: var(--nebentext); }
.meta { font-size: .875rem; }

.kopfleiste {
  display: flex; flex-wrap: wrap; gap: .25rem 1rem; align-items: center; justify-content: space-between;
  padding: .75rem 16px; border-bottom: 2px solid var(--tinte); max-width: 760px; margin: 0 auto;
}
.kopfleiste .name { display: block; line-height: 0; text-decoration: none; }
.logo { height: 22px; width: auto; }
.logo-quadrat { fill: var(--akzent); }
.logo-text { fill: var(--tinte); }
.kopfleiste nav a { margin-left: 1rem; }
.kopfleiste nav a:first-child { margin-left: 0; }
.brotkrumen { font-size: .85rem; margin: .75rem 0 0; color: var(--nebentext); }
.fuss { max-width: 760px; margin: 0 auto; padding: 16px; border-top: 1px solid var(--linie); font-size: .85rem; color: var(--nebentext); }

/* Aktualität (eingeklappt) */
.aktualitaet { margin: .75rem 0 0; font-size: .85rem; }
.aktualitaet dl { margin: .35rem 0 0; }
.aktualitaet dl > div { display: flex; justify-content: space-between; gap: 1rem; padding: .2rem 0; border-bottom: 1px solid var(--linie); }
.aktualitaet dt { color: var(--nebentext); }
.aktualitaet dd { margin: 0; font-weight: 600; text-align: right; }

/* Auswahl */
.auswahl { margin: 1.25rem 0 0; }
.wahl { border: 1px solid var(--linie); border-radius: 6px; background: var(--flaeche); margin: .4rem 0; }
.wahl summary { cursor: pointer; padding: .5rem .75rem; }
.wahl .aendern { color: var(--tiefblau); font-size: .85rem; margin-left: .25rem; }
[hidden] { display: none !important; }
.pillen { list-style: none; margin: 0; padding: 0 .5rem .5rem; display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.pillen.gross { padding: 0; }
.pille { display: inline-block; padding: .3rem .65rem; border: 1px solid var(--linie); border-radius: 999px;
  font-size: .875rem; text-decoration: none; color: var(--tinte); background: var(--papier); }
a.pille:hover { border-color: var(--tiefblau); }
.pille.aktiv { background: var(--tinte); color: var(--papier); border-color: var(--tinte); }
.pille.leer { color: var(--nebentext); opacity: .55; }

/* Diagramme */
figure { margin: .5rem 0; }
.zeitreihe { margin-top: 1rem; }
.diagramm { width: 100%; max-width: 600px; height: auto; display: block; background: var(--flaeche); border-radius: 6px; }
.diagramm .gitter { stroke: var(--linie); stroke-width: 1; }
.diagramm .achse { fill: var(--nebentext); font-size: 12px; }
.diagramm .label.aktiv { fill: var(--tinte); font-weight: 700; }
.diagramm .wert { fill: var(--tinte); }
.diagramm .linie { fill: none; stroke: var(--akzent); stroke-width: 2.5; }
.diagramm .linie-zweite { fill: none; stroke: var(--tiefblau); stroke-width: 2.5; }
.diagramm .wertlabel { fill: var(--tinte); font-size: 11px; font-weight: 600; paint-order: stroke; stroke: var(--flaeche); stroke-width: 3px; stroke-linejoin: round; }
.diagramm .band { fill: var(--band); stroke: none; }
.diagramm .band-strich { stroke: var(--band); stroke-width: 6; }
.diagramm .punkt { fill: var(--akzent); stroke: var(--flaeche); stroke-width: 1.5; }
.diagramm .punkt.klein:not(.hohl) { stroke: none; }
.diagramm .punkt.hohl { fill: var(--flaeche); stroke: var(--akzent); stroke-width: 2; }
.diagramm .luecke { fill: var(--akzent); font-weight: 700; }
.diagramm .bruch { stroke: var(--akzent); stroke-dasharray: 4 3; }
.diagramm .ereignis { stroke: var(--nebentext, #4A4945); stroke-width: 1; stroke-dasharray: 1 3; opacity: .8; }
.diagramm .balken { fill: var(--balken); }
.diagramm .balken.total { fill: var(--balken-total); }
.diagramm .balken.unsicher { fill-opacity: .35; stroke: var(--balken); stroke-dasharray: 3 2; }
.diagramm .balken.aktiv { fill: var(--akzent); }
.diagramm .fehlerbalken { stroke: var(--tinte); stroke-width: 1.25; fill: none; }
.diagramm a:hover .label { fill: var(--tiefblau); text-decoration: underline; }
.legende { display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: .8rem; color: var(--nebentext); margin-top: .35rem; }
.legende i { display: inline-block; width: 16px; height: 10px; margin-right: .35rem; vertical-align: middle; }
.l-punkt { width: 10px !important; background: var(--akzent); border-radius: 50%; }
.l-band { background: var(--band); }
/* Antippen und Download (statisch/diagramm.js) */
.jahr-panel { position: relative; }
.diagramm { touch-action: pan-y; }
.diagramm .fadenkreuz { stroke: var(--nebentext); stroke-width: 1; stroke-dasharray: 2 2; pointer-events: none; }
.chart-info { position: absolute; top: .4rem; right: .4rem; max-width: 70%; padding: .3rem .5rem; font-size: .8rem;
  line-height: 1.35; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,.12); pointer-events: none; }
.chart-aktionen { font-size: .8rem; color: var(--nebentext); margin: .3rem 0 0; }
.textknopf { font: inherit; color: var(--tiefblau); background: none; border: 0; padding: .2rem .1rem; text-decoration: underline; cursor: pointer; }
.l-linie { height: 0 !important; border-top: 2.5px solid var(--akzent); }
.l-bruch { width: 0 !important; height: 14px !important; border-left: 1.5px dashed var(--akzent); }
.l-ereignis { width: 0 !important; height: 14px !important; border-left: 1.5px dotted var(--nebentext, #4A4945); }
.l-zweite { height: 0 !important; border-top: 2.5px solid var(--tiefblau); }
.l-hohl { width: 10px !important; border: 2px solid var(--akzent); border-radius: 50%; }
.achsenhinweis { font-style: italic; }

/* Tabellen (Vorbild TheGlobalEconomy) */
.tabelle-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; margin: .75rem 0; }
caption { text-align: left; font-size: .85rem; color: var(--nebentext); padding-bottom: .25rem; }
th, td { text-align: left; padding: .35rem .5rem; border-bottom: 1px solid var(--linie); vertical-align: top; }
th[scope="row"] { font-weight: 400; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Veränderung zur Vorperiode: Stärke von Wachstum und Rückgang als Farbstufe */
.plus-1 { background: rgba(var(--plus-rgb), .10); }
.plus-2 { background: rgba(var(--plus-rgb), .20); }
.plus-3 { background: rgba(var(--plus-rgb), .32); }
.plus-4 { background: rgba(var(--plus-rgb), .45); }
.minus-1 { background: rgba(var(--minus-rgb), .10); }
.minus-2 { background: rgba(var(--minus-rgb), .20); }
.minus-3 { background: rgba(var(--minus-rgb), .32); }
.minus-4 { background: rgba(var(--minus-rgb), .45); }
tr.aktiv th, tr.aktiv td { font-weight: 700; }
.luecke { color: var(--akzent); font-weight: 700; }
details > summary { cursor: pointer; color: var(--tiefblau); }
.fussnoten { font-size: .85rem; padding-left: 1.1rem; }

/* Belege */
.beleg { display: inline; font-size: .8rem; }
.beleg summary { display: inline; }
.beleg[open] { display: block; background: var(--flaeche); border-left: 3px solid var(--tiefblau); padding: .35rem .5rem; margin: .25rem 0; }
.marke { font-size: .75rem; padding: .05rem .4rem; border-radius: 4px; white-space: nowrap; }
.ungeprueft { background: #FCE4DF; color: #7A1F10; }
@media (prefers-color-scheme: dark) { .ungeprueft { background: #4A1E16; color: #FFC9BE; } }

/* Methodik, Leiste (Vorbild Data Commons) */
.methodik dl, .leiste dl { margin: 0; }
.methodik dl > div, .leiste dl > div { padding: .5rem 0; border-bottom: 1px solid var(--linie); }
.methodik dt, .leiste dt { font-weight: 600; font-size: .9rem; }
.methodik dd, .leiste dd { margin: .15rem 0 0; }
code { font-size: .8rem; }

/* Listen */
.karten, .bereiche { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.bereiche { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.karte, .bereich { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 6px; padding: .6rem .75rem; }
.bereich p { margin: .25rem 0 0; font-size: .875rem; }
.bereich.geplant h3, span.geplant { color: var(--nebentext); opacity: .7; }
.anzahl { color: var(--nebentext); font-weight: 400; font-size: .85em; }
.frage { margin: .1rem 0; font-style: italic; color: var(--nebentext); }
.kartenwert { margin: .25rem 0; }

/* Jahreswahl in der Aufschlüsselung: Radio-Knöpfe plus CSS, ohne JavaScript.
 * Ohne CSS (z.B. Crawler) sind alle Jahre sichtbar. Regeln für bis zu 10 Jahre
 * (JAHRE_AUSWAHL in portal/seiten.py). */
.jahr-wahl { position: absolute; opacity: 0; pointer-events: none; }
.jahr-pillen { padding: 0; margin: 0 0 .5rem; }
.jahr-pillen .pille { cursor: pointer; }
.jahre .jahr-panel { display: none; }
.jahr-wahl:nth-of-type(1):checked ~ .jahr-panel:nth-of-type(1) { display: block; }
.jahr-wahl:nth-of-type(1):checked ~ .jahr-pillen .pille:nth-of-type(1) { background: var(--tinte); color: var(--papier); border-color: var(--tinte); }
.jahr-wahl:nth-of-type(1):focus-visible ~ .jahr-pillen .pille:nth-of-type(1) { outline: 2px solid var(--tiefblau); outline-offset: 2px; }
.jahr-wahl:nth-of-type(2):checked ~ .jahr-panel:nth-of-type(2) { display: block; }
.jahr-wahl:nth-of-type(2):checked ~ .jahr-pillen .pille:nth-of-type(2) { background: var(--tinte); color: var(--papier); border-color: var(--tinte); }
.jahr-wahl:nth-of-type(2):focus-visible ~ .jahr-pillen .pille:nth-of-type(2) { outline: 2px solid var(--tiefblau); outline-offset: 2px; }
.jahr-wahl:nth-of-type(3):checked ~ .jahr-panel:nth-of-type(3) { display: block; }
.jahr-wahl:nth-of-type(3):checked ~ .jahr-pillen .pille:nth-of-type(3) { background: var(--tinte); color: var(--papier); border-color: var(--tinte); }
.jahr-wahl:nth-of-type(3):focus-visible ~ .jahr-pillen .pille:nth-of-type(3) { outline: 2px solid var(--tiefblau); outline-offset: 2px; }
.jahr-wahl:nth-of-type(4):checked ~ .jahr-panel:nth-of-type(4) { display: block; }
.jahr-wahl:nth-of-type(4):checked ~ .jahr-pillen .pille:nth-of-type(4) { background: var(--tinte); color: var(--papier); border-color: var(--tinte); }
.jahr-wahl:nth-of-type(4):focus-visible ~ .jahr-pillen .pille:nth-of-type(4) { outline: 2px solid var(--tiefblau); outline-offset: 2px; }
.jahr-wahl:nth-of-type(5):checked ~ .jahr-panel:nth-of-type(5) { display: block; }
.jahr-wahl:nth-of-type(5):checked ~ .jahr-pillen .pille:nth-of-type(5) { background: var(--tinte); color: var(--papier); border-color: var(--tinte); }
.jahr-wahl:nth-of-type(5):focus-visible ~ .jahr-pillen .pille:nth-of-type(5) { outline: 2px solid var(--tiefblau); outline-offset: 2px; }
.jahr-wahl:nth-of-type(6):checked ~ .jahr-panel:nth-of-type(6) { display: block; }
.jahr-wahl:nth-of-type(6):checked ~ .jahr-pillen .pille:nth-of-type(6) { background: var(--tinte); color: var(--papier); border-color: var(--tinte); }
.jahr-wahl:nth-of-type(6):focus-visible ~ .jahr-pillen .pille:nth-of-type(6) { outline: 2px solid var(--tiefblau); outline-offset: 2px; }
.jahr-wahl:nth-of-type(7):checked ~ .jahr-panel:nth-of-type(7) { display: block; }
.jahr-wahl:nth-of-type(7):checked ~ .jahr-pillen .pille:nth-of-type(7) { background: var(--tinte); color: var(--papier); border-color: var(--tinte); }
.jahr-wahl:nth-of-type(7):focus-visible ~ .jahr-pillen .pille:nth-of-type(7) { outline: 2px solid var(--tiefblau); outline-offset: 2px; }
.jahr-wahl:nth-of-type(8):checked ~ .jahr-panel:nth-of-type(8) { display: block; }
.jahr-wahl:nth-of-type(8):checked ~ .jahr-pillen .pille:nth-of-type(8) { background: var(--tinte); color: var(--papier); border-color: var(--tinte); }
.jahr-wahl:nth-of-type(8):focus-visible ~ .jahr-pillen .pille:nth-of-type(8) { outline: 2px solid var(--tiefblau); outline-offset: 2px; }
.jahr-wahl:nth-of-type(9):checked ~ .jahr-panel:nth-of-type(9) { display: block; }
.jahr-wahl:nth-of-type(9):checked ~ .jahr-pillen .pille:nth-of-type(9) { background: var(--tinte); color: var(--papier); border-color: var(--tinte); }
.jahr-wahl:nth-of-type(9):focus-visible ~ .jahr-pillen .pille:nth-of-type(9) { outline: 2px solid var(--tiefblau); outline-offset: 2px; }
.jahr-wahl:nth-of-type(10):checked ~ .jahr-panel:nth-of-type(10) { display: block; }
.jahr-wahl:nth-of-type(10):checked ~ .jahr-pillen .pille:nth-of-type(10) { background: var(--tinte); color: var(--papier); border-color: var(--tinte); }
.jahr-wahl:nth-of-type(10):focus-visible ~ .jahr-pillen .pille:nth-of-type(10) { outline: 2px solid var(--tiefblau); outline-offset: 2px; }

/* Auswahl «ab Jahr …» bzw. «anderes Jahr …» als letzte Pille (nur mit JavaScript,
 * statisch/diagramm.js) */
select.pille { font-family: inherit; font-size: .875rem; line-height: inherit; color: var(--tinte); background-color: var(--papier); cursor: pointer;
  appearance: none; -webkit-appearance: none; padding-right: 1.6rem;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right .8rem center, right .5rem center; background-size: .3rem .3rem; background-repeat: no-repeat; }
/* Gleiche Höhe und Lage für Pillen und Auswahlfelder (iOS gibt select eigene Abstände) */
.jahr-pillen .pille { box-sizing: border-box; height: 2rem; margin: 0; line-height: 1.2;
  display: inline-flex; align-items: center; padding-top: 0; padding-bottom: 0; vertical-align: middle; }
select.pille.aktiv { background-color: var(--tinte); color: var(--papier); border-color: var(--tinte); }

/* Lange Tabelle: 3 Zeilen, Rest per Kontrollkästchen (portal/vorlagen/reihe.html) */
.mehr-schalter { position: absolute; opacity: 0; pointer-events: none; }
.mehr-schalter:not(:checked) ~ .tabelle-wrap tr.mehr { display: none; }
.mehr-knopf { display: inline-block; margin: .4rem 0 .6rem; color: var(--tiefblau); cursor: pointer; }
.mehr-knopf::before { content: "▸ "; }
.mehr-schalter:checked ~ .mehr-knopf::before { content: "▾ "; }
.mehr-schalter:checked ~ .mehr-knopf .zu, .mehr-schalter:not(:checked) ~ .mehr-knopf .auf { display: none; }
.mehr-schalter:focus-visible ~ .mehr-knopf { outline: 2px solid var(--tiefblau); outline-offset: 2px; }

/* «Dazu passend»: nur Titel */
.verwandte { margin-top: 2rem; }
/* Aufklappbare Abschnitte (Methodik, Quelle): Überschrift als Klickfläche */
.klappbar > summary { list-style-position: inside; }
.klappbar > summary h2 { display: inline; color: var(--tinte); }
.methodik, .leiste { margin-top: 1.5rem; }
.titelliste { list-style: none; padding: 0; margin: 0; }
.titelliste li { padding: .45rem 0; border-top: 1px solid var(--linie); }
.titelliste li:last-child { border-bottom: 1px solid var(--linie); }

/* Impressum: E-Mail-Adresse als Grafik (design/email.py) */
.email-bild { height: 1.05em; width: auto; vertical-align: -0.2em; color: var(--tinte); }
.email-knopf { margin-left: .5rem; font: inherit; font-size: .875rem; padding: .2rem .65rem; border: 1px solid var(--linie);
  border-radius: 999px; background: var(--flaeche); color: var(--tiefblau); cursor: pointer; }