/* Look and palette follow warnung.bund.de: dark blue #0B3A6A, orange #EC7000, blue-grey #CED7E1, neutral greys, Arial.
   Rule: blue = structure and quantity, orange = highlight only.
   Layout rule: one content column (.wrap). Every block (figure, notes, table, list, text) uses the full column width,
   all sections share the same rhythm (rule on top, same padding). Nothing sets its own max-width. */
:root{
  --blue:#0B3A6A; --orange:#EC7000; --tint:#CED7E1; --ink:#212529; --muted:#6c757d; --rule:#dee2e6; --light:#f8f9fa;
  --sans:BundesSansWeb,Arial,Helvetica,sans-serif;
  --col:1040px;           /* content column incl. gutters */
  --gutter:20px;
  --gap:40px;             /* gap between side-by-side blocks */
  --pad:32px;             /* vertical padding of every section */
}
*{box-sizing:border-box}
body{margin:0;background:#fff;color:var(--ink);font:16px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--col);margin:0 auto;padding:0 var(--gutter)}

/* header band */
.band{background:var(--blue);color:#fff}
.masthead{padding-top:20px}
.eyebrow{font:700 12px var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--tint)}
h1{font:700 32px/1.15 var(--sans);margin:6px 0 6px;color:#fff}
.dek{color:var(--tint);font-size:15px;margin:0 0 16px}
nav{display:flex;flex-wrap:wrap;gap:28px}
nav a{color:#fff;opacity:.82;text-decoration:none;font-size:15px;padding:10px 0 9px;border-bottom:3px solid transparent}
nav a:hover{opacity:1}
nav a.active{opacity:1;font-weight:700;border-bottom-color:var(--orange)}

main{padding-bottom:20px}
main>*{min-width:0}
.note{margin:22px 0 0;padding:10px 14px;background:var(--light);border:1px solid var(--rule);font-size:14px}

/* key figures */
.kf{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:0 var(--gap);margin:28px 0 6px;border-top:3px solid var(--blue)}
.kf>div{padding:14px 0 10px}
.kf .v{font:700 40px/1.1 var(--sans);color:var(--blue)}
.kf .l{color:var(--muted);font-size:13px;margin-top:4px}

/* headings and lead text: full column width */
h3{font:700 20px/1.3 var(--sans);margin:0 0 6px;color:var(--blue)}
.sub{color:var(--muted);font-size:14px;margin:0 0 14px;text-wrap:pretty}

/* every section: same rule, same rhythm, full width */
.fig,.findings,.legend,.events,.row2{padding:var(--pad) 0 10px;border-top:1px solid var(--rule)}
.fig{margin:0}
main>:first-child.fig,main>:first-child.row2,main>.note+.fig,main>.note+.row2{border-top:0;padding-top:24px}
.findings{margin-top:20px}
.findings ul{margin:12px 0 0;padding-left:1.1em;columns:2;column-gap:var(--gap)}
.findings li{margin:0 0 9px;break-inside:avoid}

/* two figures side by side; title, lead text and chart line up across both columns */
.row2{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto 1fr auto;gap:0 var(--gap);align-items:start}
.row2>.fig{border-top:0;padding:0 0 10px;display:grid;grid-template-rows:subgrid;grid-row:span 4;min-width:0}
.row2 h3{font-size:18px}
.row2>.fig>.notes{grid-row:auto}

/* charts fill their container completely */
.chart{width:100%;min-width:0}
.chart .js-plotly-plot,.chart .plot-container,.chart .svg-container{width:100%!important}
.fig img.wc{width:100%;height:auto;display:block}
.source{color:var(--muted);font-size:12px;margin:10px 0 0}

/* annotations under a chart (numbers match the marks inside the chart) */
.notes{margin-top:22px}
.notes h4{font:700 12px var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
.notes ol{list-style:none;margin:0;padding:0}
.notes li{display:grid;grid-template-columns:30px 1fr;padding:11px 0;border-top:1px solid var(--rule)}
.notes .mark{color:var(--muted)}
.notes .num{display:inline-grid;place-items:center;width:20px;height:20px;background:var(--orange);color:#fff;font:700 12px var(--sans)}
.notes p{margin:3px 0 0;font-size:14px}
.notes .sw{display:inline-block;width:10px;height:10px;margin-right:7px}

/* press events: same list pattern as the notes */
.events ol{list-style:none;margin:6px 0 0;padding:0}
.events>ol>li{display:grid;grid-template-columns:30px 1fr;padding:14px 0;border-top:1px solid var(--rule)}
.events .mark .num{display:inline-grid;place-items:center;width:20px;height:20px;background:var(--blue);color:#fff;font:700 12px var(--sans)}
.events p{margin:4px 0;font-size:14px}
.datarow{margin:6px 0 0;color:#343a40}
.when{color:var(--muted);font-size:12px;font-weight:400}
ul.press{list-style:none;margin:6px 0 0;padding:0;font-size:13px}ul.press li{margin:2px 0}
.press a,td.press a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
td.press{font-size:13px}
h4.subhead{font:700 16px var(--sans);color:var(--blue);margin:26px 0 4px}
.src{margin:8px 0 0;font-size:12px}.src a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}

/* tables: always the full column; wide comparison tables scroll inside it */
.tablewrap{overflow-x:auto}
table.key{width:100%;border-collapse:collapse;font-size:14px;margin-top:6px}
.key th{text-align:left;font:700 12px var(--sans);letter-spacing:.05em;text-transform:uppercase;color:var(--muted);border-bottom:2px solid var(--blue);padding:6px 10px 6px 0}
.key td{border-bottom:1px solid var(--rule);padding:9px 10px 9px 0;vertical-align:top}
.key .r{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.key .sw{display:inline-block;width:10px;height:10px;margin-right:9px;vertical-align:-1px}
.key .code{color:var(--muted);font:12px Consolas,monospace;margin-left:6px}
.key .barcol{width:120px;padding-left:14px}
.key .bar{display:block;height:8px}
.key .def{color:#343a40}
.key tr.zero td{color:var(--muted)}
/* the two legend tables (categories, severities) share identical column widths */
table.leg{table-layout:fixed}
.leg th:nth-child(1){width:25%}.leg th:nth-child(2){width:100px}.leg th:nth-child(3){width:70px}.leg th.barcol{width:150px}
table.cmp{min-width:900px}
table.cmp td,table.cmp th{vertical-align:top}
table.cmp td{font-size:13px;min-width:170px;padding-right:14px}
table.cmp th.rowh{text-align:left;text-transform:none;letter-spacing:0;font-size:13px;color:var(--blue);white-space:nowrap;padding:9px 12px 9px 0;border-bottom:1px solid var(--rule)}
table.cmp code{font-size:12px;background:var(--light);padding:0 3px}

footer{background:var(--light);border-top:1px solid var(--rule);margin-top:36px;padding:16px 0 36px;color:var(--muted);font-size:12px}
footer p{margin:0}

@media (max-width:900px){
  .row2{grid-template-columns:1fr;grid-template-rows:none}
  .row2>.fig{display:block;grid-row:auto;padding-bottom:26px}
  .findings ul{columns:1}
  .row2 .chart{height:auto!important;aspect-ratio:1/1.1}   /* stacked: height follows the width, no empty space around maps */
}
@media (max-width:720px){
  :root{--gutter:16px;--pad:26px}
  h1{font-size:26px}.kf .v{font-size:32px}
  .key .barcol,.key th.barcol{display:none}
  .key .def{display:none}.key th:last-child{display:none}
}