/* 25bp — Stylesheet. 1:1 aus dem freigegebenen Mockup entwurf-a-rev3-farbig.html
   (Rev. 3), Mobil-Regeln als Media Query statt .phone-Klasse. */
:root{
  --bg:#eef0f6; --card:#ffffff; --ink:#15181d; --muted:#5c6372;
  --line:#dfe2ee; --line-strong:#c9cede;
  --band:#2c3a6e; --band-2:#37477f; --mint:#9fb2f5;
  --brand:#3d52a0; --brand-dark:#2f3e78; --brand-soft:#e2e7f7;
  --plum:#33417f; --plum-ink:#232c52;
  /* Heatmap-Stufen (Design-Spez 2.1) — dieselben Werte wie Heat::STEPS.
     Gestuft statt stufenlos: eine stufenlose Rampe hat eine Helligkeitszone,
     in der weder dunkler noch weißer Zelltext AA erreicht. */
  --heat-1:#f4efff; --heat-2:#ded4fe; --heat-3:#bdb5fc;
  --heat-4:#9093f0; --heat-5:#3947b3; --heat-6:#162371;
  --heat-ink:#221c46;
  /* Diagrammfarben — Spiegel der Konstanten in Svg.php / charts.js.
     Serienfarben in OKLCH konstruiert, Reihenfolge nach maximalem Abstand
     benachbarter Zinssätze. */
  --s1:#3d53b4; --s2:#bf443a; --s3:#0d8963; --s4:#871978; --s5:#2a94c2; --s6:#6c7e1e;
  --chart-accent:#cb8315; --chart-accent-ink:#9f6509;
  --chart-age:#dbdaf0; --chart-age-2:#7c72c1; --chart-age-ink:#6f64b8;
  --chart-none:#b7bdd1;
  /* Fließtext: leicht aufgehellt gegenüber --ink, aber in derselben
     Graufamilie. Der frühere Wert #333c35 war grünstichig und passte zu nichts. */
  --text-body:#2b303a;
  --head:'Space Grotesk','Segoe UI',-apple-system,sans-serif;
  --body:'Inter',-apple-system,'Segoe UI',Roboto,sans-serif;
}
@font-face{font-family:'Space Grotesk';src:url('/assets/fonts/space-grotesk-700.woff2') format('woff2');font-weight:700;font-display:swap;}
@font-face{font-family:'Inter';src:url('/assets/fonts/inter-400.woff2') format('woff2');font-weight:400;font-display:swap;}
@font-face{font-family:'Inter';src:url('/assets/fonts/inter-500.woff2') format('woff2');font-weight:500;font-display:swap;}
@font-face{font-family:'Inter';src:url('/assets/fonts/inter-600.woff2') format('woff2');font-weight:600;font-display:swap;}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--bg);font-family:var(--body);color:var(--ink);line-height:1.5;}
.num{font-variant-numeric:tabular-nums;font-feature-settings:'tnum';}
.wrap{max-width:1040px;margin:0 auto;padding:0 40px;}

/* ===== Dunkles Kopfband: Masthead + Hero ===== */
.band{background:linear-gradient(160deg,var(--band-2) 0%,var(--band) 70%);color:#fff;}
.masthead-top{display:flex;align-items:center;justify-content:space-between;padding:22px 0 14px;}
/* Wortmarke: SVG-Logo statt Textsatz. Die Konturen stecken in der Datei,
   das Logo hängt also nicht an der Verfügbarkeit von Space Grotesk. */
.wordmark{display:inline-block;line-height:0;text-decoration:none;}
.wordmark img{display:block;height:34px;width:auto;}
.lang{display:flex;border:1px solid rgba(255,255,255,.35);border-radius:8px;overflow:hidden;font-size:12.5px;font-weight:600;}
.lang a{padding:5px 12px;text-decoration:none;color:rgba(255,255,255,.75);}
.lang a.active{background:#fff;color:var(--band);}
.nav{display:flex;gap:26px;align-items:center;font-size:14.5px;border-bottom:1px solid rgba(255,255,255,.16);}
.nav a{color:rgba(255,255,255,.72);text-decoration:none;padding:10px 0 13px;font-weight:500;white-space:nowrap;}
.nav a.active{color:#fff;font-weight:600;box-shadow:inset 0 -2px 0 var(--mint);}
.nav a:hover{color:#fff;}
.nav .stand{margin-left:auto;font-size:12.5px;color:rgba(255,255,255,.55);font-weight:400;}

/* Ohne Eyebrow („kicker") beginnt die Headline direkt unter der Navigation —
   das frühere Label trug den Abstand mit, deshalb hier etwas mehr Luft oben. */
section.hero{padding:72px 0 92px;}
section.hero.slim{padding:56px 0 84px;}
h1.headline{font-family:var(--head);font-size:46px;line-height:1.12;font-weight:700;letter-spacing:-.028em;max-width:20em;color:#fff;}
h1.headline .hl{background:linear-gradient(transparent 62%,rgba(159,178,245,.45) 62%);border-radius:2px;padding:0 2px;}
h1.headline.md{font-size:36px;}
.hero-sub{margin-top:16px;font-size:16px;color:rgba(255,255,255,.75);max-width:44em;}

/* ===== Faktenkarten — überlappen das Band ===== */
.facts-row{margin-top:-52px;position:relative;}
.facts{display:flex;gap:16px;}
.fact{flex:1;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 24px;box-shadow:0 6px 18px rgba(25,32,60,.10);}
.fact .label{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;font-weight:600;}
.fact .value{font-family:var(--head);font-size:26px;font-weight:700;letter-spacing:-.015em;}
.fact .note{font-size:13px;color:var(--muted);margin-top:3px;}

/* ===== Abschnitte ===== */
.section{padding:44px 0 8px;}
.section:last-of-type{padding-bottom:44px;}
h2.sec-title{font-family:var(--head);font-size:26px;font-weight:700;letter-spacing:-.02em;margin-bottom:6px;}
.sec-sub{font-size:15px;color:var(--muted);margin-bottom:22px;max-width:46em;}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:28px 32px;box-shadow:0 1px 4px rgba(25,32,60,.06);}
.card svg{display:block;width:100%;height:auto;}
.stale-note{background:#fdf6e7;border:1px solid #ecd9a8;border-radius:12px;padding:12px 18px;font-size:14px;color:#6b5312;margin-top:20px;}

/* ===== Heatmap ===== */
/* Überschrift in der Karte: Die Heatmap braucht keine Sektionsüberschrift
   außerhalb, der Titel gehört zur Tabelle. */
.card > .card-title{font-family:var(--head);font-size:22px;font-weight:700;letter-spacing:-.02em;margin-bottom:18px;}
/* table-layout:fixed — ohne das richtet sich die Spaltenbreite nach dem
   Kopftext, und „aktueller Satz" ist breiter als „+25 bp". Die Spalte des
   aktuellen Satzes war dadurch sichtbar breiter als alle anderen. */
table.heat{width:100%;border-collapse:separate;border-spacing:4px;table-layout:fixed;}
col.heat-c0{width:28%;}
table.heat th{padding:8px 10px;text-align:center;font-size:13.5px;font-weight:600;}
table.heat thead th{color:var(--ink);padding-bottom:10px;}
table.heat thead th:first-child{text-align:left;color:var(--muted);font-weight:500;}
table.heat thead th small{display:block;font-size:11px;font-weight:500;color:var(--muted);}
table.heat thead th.cur-col small{color:var(--brand);font-weight:600;}
table.heat tbody th{text-align:left;font-weight:600;font-size:14.5px;white-space:nowrap;padding-right:16px;}
table.heat tbody th small{display:block;font-size:11.5px;font-weight:400;color:var(--muted);}
table.heat tbody th a{color:inherit;text-decoration:none;}
table.heat tbody th a:hover{color:var(--brand);}
table.heat td{padding:16px 10px;text-align:center;font-size:16px;font-weight:600;border-radius:10px;}
td.none{color:var(--chart-none);font-weight:400;}
.heat-note{font-size:12.5px;color:var(--muted);margin-top:14px;}
/* Weiterführender Link am Fuß einer Karte — die Übersicht endet nach fünf
   Zinsentscheiden, der Terminkalender führt sie fort. */
.card-more{margin-top:16px;font-size:14px;}
.card-more a{color:var(--brand);text-decoration:none;font-weight:600;}
.card-more a:hover{text-decoration:underline;}

/* ===== Lesetabellen ===== */
.table-card{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 1px 4px rgba(25,32,60,.06);}
.tbl-scroll{overflow-x:auto;}
table.plain{width:100%;border-collapse:collapse;font-size:14.5px;}
table.plain th,table.plain td{padding:12px 16px;text-align:right;border-bottom:1px solid var(--line);}
table.plain tr:last-child td{border-bottom:none;}
table.plain th:first-child,table.plain td:first-child{text-align:left;}
table.plain thead th{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600;background:#f3f5fa;}
table.plain td.hint{color:var(--chart-none);}
table.plain td strong{font-weight:700;}
table.plain td a{color:var(--brand);}

/* ===== Sitzungswechsler =====
   Waagerechte Leiste statt Dropdown: ohne JavaScript benutzbar, für
   Suchmaschinen eine normale Verlinkung, und jede Marke trägt ihr Ergebnis
   mit — damit ist die Leiste zugleich Überblick. */
.meeting-switch{display:flex;align-items:center;gap:14px;margin-top:34px;}
.ms-label{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600;white-space:nowrap;text-decoration:none;}
a.ms-label:hover{color:var(--brand);text-decoration:underline;}
.ms-rail{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 8px;scrollbar-width:thin;scroll-snap-type:x proximity;}
.ms-rail::-webkit-scrollbar{height:6px;}
.ms-rail::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:3px;}
.ms-item{flex:0 0 auto;scroll-snap-align:center;display:flex;flex-direction:column;gap:2px;
  padding:8px 13px;border:1px solid var(--line);border-radius:10px;background:var(--card);
  text-decoration:none;color:var(--ink);transition:border-color .15s,background .15s;}
.ms-item:hover{border-color:var(--brand);background:var(--brand-soft);}
.ms-item .ms-date{font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;}
.ms-item .ms-sub{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;}
.ms-item.past{background:transparent;border-style:dashed;}
.ms-item.past .ms-date{color:var(--muted);font-weight:500;}
.ms-item.active{background:var(--brand);border-color:var(--brand);cursor:default;}
.ms-item.active .ms-date{color:#fff;}
.ms-item.active .ms-sub{color:rgba(255,255,255,.75);}
.ms-item:focus-visible{outline:2px solid var(--brand);outline-offset:2px;}

/* ===== Diagramme =====
   Grundzustand ist das server-seitige SVG; charts.js ersetzt es durch die
   ECharts-Fassung und setzt .is-interactive. Die viewBox-Breiten in Svg.php
   entsprechen der Anzeigebreite hier — sonst skalieren die Schriftgrößen
   unterschiedlich stark und Teaser und Detailseite sehen verschieden aus. */
figure.chart{margin:0;}
figure.chart svg{display:block;width:100%;height:auto;}
.chart-canvas{width:100%;}
.chart-controls{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:14px;}
.ch-mini{margin-top:16px;}

.seg{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--card);}
.seg button{appearance:none;background:none;border:0;border-right:1px solid var(--line);padding:6px 13px;
  font:500 13px/1.2 var(--body);color:var(--muted);cursor:pointer;}
.seg button:last-child{border-right:0;}
.seg button:hover{color:var(--ink);background:var(--brand-soft);}
.seg button.active{background:var(--brand);color:#fff;font-weight:600;}
.seg button:focus-visible{outline:2px solid var(--brand);outline-offset:-2px;}

/* Doppelregler über die Prognosestände (Fächeransicht) */
.scrub{display:flex;align-items:center;gap:14px;flex:1 1 320px;min-width:280px;}
.scrub-label{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600;white-space:nowrap;}
.scrub .rail{position:relative;flex:1 1 auto;height:22px;}
.scrub .rail::before{content:"";position:absolute;left:0;right:0;top:10px;height:3px;border-radius:2px;background:var(--line);}
.scrub input[type=range]{position:absolute;left:0;top:0;width:100%;margin:0;height:22px;background:none;
  appearance:none;pointer-events:none;}
.scrub input[type=range]::-webkit-slider-thumb{appearance:none;width:16px;height:16px;border-radius:50%;
  background:var(--brand);border:2px solid var(--card);box-shadow:0 1px 3px rgba(25,32,60,.3);
  pointer-events:auto;cursor:grab;}
.scrub input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--brand);
  border:2px solid var(--card);box-shadow:0 1px 3px rgba(25,32,60,.3);pointer-events:auto;cursor:grab;}
.scrub input[type=range].lo::-webkit-slider-thumb{background:var(--chart-age-2);}
.scrub input[type=range].lo::-moz-range-thumb{background:var(--chart-age-2);}
.scrub input[type=range]:focus-visible{outline:2px solid var(--brand);outline-offset:4px;border-radius:4px;}
.scrub-out{font-size:12.5px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums;}

/* Zahlen als Anhang statt als eigener Abschnitt */
.data-details summary{cursor:pointer;font-size:14px;color:var(--brand);font-weight:600;padding:6px 0;
  list-style:none;display:inline-flex;align-items:center;gap:7px;}
.data-details summary::-webkit-details-marker{display:none;}
.data-details summary::before{content:"▸";font-size:11px;transition:transform .15s;}
.data-details[open] summary::before{transform:rotate(90deg);}
.data-details summary:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:4px;}
.data-details > .table-card{margin-top:14px;}

/* ===== Kapitel-Teaser ===== */
.chapters{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.chapter{border:1px solid var(--line);border-radius:16px;padding:28px 30px;text-decoration:none;color:var(--ink);display:block;background:var(--card);box-shadow:0 1px 4px rgba(25,32,60,.06);transition:border-color .15s;}
.chapter:hover{border-color:var(--brand);}
.chapter.wide{grid-column:1 / -1;display:grid;grid-template-columns:1.1fr 1fr;gap:36px;align-items:center;background:linear-gradient(135deg,#ffffff 55%,#f0f2fa);}
.chapter h3{font-family:var(--head);font-size:21px;font-weight:700;letter-spacing:-.015em;margin-bottom:8px;}
.chapter p{font-size:14.5px;line-height:1.6;color:var(--muted);}
.chapter .more{font-size:14px;color:var(--brand);font-weight:600;margin-top:14px;display:inline-block;}
.chapter svg{display:block;width:100%;height:auto;}

/* ===== KPI-Kacheln (Sitzung im Detail) ===== */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;align-items:stretch;}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 24px;box-shadow:0 1px 4px rgba(25,32,60,.06);}
.kpi .label{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;font-weight:600;line-height:1.35;}
/* Der Wert steht direkt unter seinem Label, der Hinweis wird nach unten
   gedrückt. So bleibt die Kachelreihe auf gleicher Höhe, auch wenn ein
   Hinweis zweizeilig wird — und der Wert rutscht nicht mit. */
.kpi{display:flex;flex-direction:column;}
.kpi .hint{margin-top:auto;padding-top:6px;}
/* Alle drei Kacheln tragen gleichwertige Zahlen und stehen nebeneinander —
   unterschiedliche Schriftgrößen wirkten wie ein Fehler. Die wichtigste Zahl
   hebt sich über die Farbe ab, nicht über die Größe. */
.kpi .value{font-family:var(--head);font-size:26px;font-weight:700;letter-spacing:-.015em;}
.kpi .value.lead{color:var(--brand-dark);}
.kpi .hint{font-size:13px;color:var(--muted);margin-top:3px;}

/* ===== Erklärtext / Fließtext ===== */
.explain{columns:2;column-gap:48px;font-size:15.5px;line-height:1.7;color:var(--text-body);}
.explain p{margin-bottom:1em;break-inside:avoid;}
.explain a{color:var(--brand);font-weight:500;}
.prose{font-size:15.5px;line-height:1.7;color:var(--text-body);max-width:46em;}
.prose p{margin-bottom:1em;}
.prose h2{font-family:var(--head);font-size:22px;font-weight:700;letter-spacing:-.02em;margin:1.6em 0 .5em;color:var(--ink);}
.prose h3{font-family:var(--head);font-size:17px;font-weight:700;margin:1.4em 0 .4em;color:var(--ink);}
.prose a{color:var(--brand);font-weight:500;}
.prose code{background:#f0f2fa;border-radius:4px;padding:1px 5px;font-size:.92em;}

/* ===== Footer ===== */
footer{background:var(--band);margin-top:44px;padding:30px 0 38px;font-size:13px;color:rgba(255,255,255,.65);}
footer .indep{margin-bottom:14px;line-height:1.6;max-width:58em;}
footer nav{display:flex;gap:22px;flex-wrap:wrap;}
footer a{color:rgba(255,255,255,.75);}
footer .stand-f{margin-left:auto;}

/* ===== Mobil (360 px = Normalfall) ===== */
@media (max-width:700px){
  .wrap{padding:0 16px;}
  .masthead-top{padding:16px 0 10px;}
  .wordmark img{height:28px;}
  .nav{gap:18px;overflow-x:auto;font-size:13.5px;white-space:nowrap;scrollbar-width:none;}
  .nav::-webkit-scrollbar{display:none;}
  .nav a{padding:8px 0 11px;}
  .nav .stand{display:none;}
  section.hero{padding:40px 0 70px;}
  h1.headline{font-size:27px;}
  h1.headline.md{font-size:24px;}
  .facts-row{margin-top:-44px;}
  .facts{flex-direction:column;gap:10px;}
  .fact{padding:14px 18px;}
  .fact .value{font-size:19px;}
  .section{padding:28px 0 4px;}
  h2.sec-title{font-size:20px;}
  .sec-sub{font-size:13.5px;}
  .card{padding:16px 14px;border-radius:12px;}
  .card > .card-title{font-size:18px;margin-bottom:14px;}
  table.heat{border-spacing:2.5px;}
  table.heat th{padding:5px 2px;font-size:11px;}
  table.heat thead th small{font-size:9px;}
  table.heat tbody th{font-size:11.5px;padding-right:6px;}
  table.heat td{padding:12px 2px;font-size:12.5px;border-radius:7px;}
  .heat-long{display:none;}
  .table-card{border-radius:10px;}
  table.plain{font-size:12px;}
  table.plain th,table.plain td{padding:9px 7px;}
  table.plain thead th{font-size:9.5px;}
  col.heat-c0{width:34%;}
  .meeting-switch{flex-direction:column;align-items:stretch;gap:8px;margin-top:26px;}
  .ms-rail{margin:0 -16px;padding:4px 16px 8px;}
  .ms-item{padding:7px 11px;}
  .chart-controls{gap:12px;margin-top:12px;}
  .scrub{flex:1 1 100%;min-width:0;gap:10px;}
  .scrub-label{display:none;}
  .seg button{padding:6px 11px;font-size:12.5px;}
  .chapters{grid-template-columns:1fr;gap:14px;}
  .chapter{padding:20px;}
  .chapter.wide{grid-template-columns:1fr;gap:18px;}
  .chapter h3{font-size:18px;}
  .kpis{grid-template-columns:1fr 1fr;gap:10px;}
  .kpi{padding:14px 16px;}
  .kpi .value{font-size:19px;}
  .explain{columns:1;font-size:14.5px;}
  footer .stand-f{margin-left:0;}
}