/* Sektionen: Hero und Kapitel. Flaechenkontrast statt Schatten. */

/* ---------- Zahlen -------------------------------------------------------
   Alle Ziffern laufen in der Mono mit Tabellenziffern. Damit stehen sie
   untereinander buendig, springen beim Hochzaehlen nicht in der Breite
   und heben sich klar vom Fliesstext ab. */

.legende__wert,
.legende__anteil,
.balken__wert,
.saeule__wert,
.stat__wert,
.donut__mitte-wert,
.vergleich__wert,
.wagen__nummer {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* ---------- Rhythmus ------------------------------------------------------
   Ein Abstand statt vieler Einzelabstaende: der Inhaltsblock verteilt seine
   direkten Kinder gleichmaessig. Vorher trug jede Komponente ihr eigenes
   margin-bottom, dazu Ausnahmen fuer das jeweils letzte Element — das war
   die Quelle der ungleichen Luecken und der toten Flaechen in den Karten.

   Wichtig: der Abstand haengt am direkten Kind. Verschachtelte Listen und
   Karten bekommen ihn dadurch nicht mehr aufgedrueckt. */

.sektion__inhalt > .wrap {
  display: grid;
  gap: var(--section-gap);
  align-content: start;
}

/* ---------- Hero ---------- */

/* Der Hero traegt zwei Bloecke untereinander: Textspalte und Bildband.
   Die Zentrierung sitzt deshalb im Inhalt, nicht in der Sektion —
   sonst wird das Band zum Flex-Geschwister und drueckt die Spalte zusammen. */
/* Der Zahlenblock liegt direkt unter dem dunklen Film. Die Bandfarbe
   kommt aus sektion--akzent, gesetzt in render.js — der Wechsel von
   Dunkel auf Signal soll sitzen. Keine Mindesthoehe mehr: der Block
   stand vorher in 72svh mit halbleeren Kaertchen darin. */
/* Der Entwurf gibt dem Zahlenband die volle Fensterhoehe und verteilt
   Dachzeile, Zahl und Kennzahlenreihe darin auf oben, Mitte und unten. */
.hero {
  padding-block: clamp(48px, 5vw, 72px) clamp(44px, 4.6vw, 64px);
  min-height: 100svh;
  display: flex;
  align-items: stretch;
}
.hero > .sektion__inhalt { width: 100%; }

.hero .sektion__inhalt { display: grid; gap: clamp(34px, 4.4vw, 68px); }
.hero .wrap {
  display: grid;
  gap: clamp(28px, 4vw, 64px);
  align-content: space-between;
  min-height: 100%;
}

.hero__kopf { display: grid; gap: var(--element-gap); }
.hero__headline { max-width: 18ch; margin: 0; }
.hero__lead { max-width: 62ch; margin: 0; }

/* Die erste Kennzahl traegt das Band allein. Vier gleich grosse Kacheln
   hatten keine Rangfolge — hier steht sofort, worum es geht.
   Die Groesse ist unten nachgerechnet. */
/* Bezugsgroesse fuer die Riesenzahl: cqw rechnet gegen diese Breite. */
.hero .wrap { container-type: inline-size; }

.hero__riese {
  /* Negativer linker Rand wie im Entwurf: haengt die Ziffer optisch an
     die Kante, statt sie durch ihr Seitenlager eingerueckt stehen zu lassen. */
  margin: 0 0 0 -0.04em;
  font-family: var(--font-display);
  font-weight: var(--weight-laut);
  font-size: var(--riese);
  line-height: 0.82;
  letter-spacing: -0.06em;
}
/* Der Ziffernroller ist fuer kleine Zahlen in der Mono gebaut. In der
   Displayschrift und bei dieser Groesse passt davon nichts:

   - flex-wrap: wrap liess "131 Mrd." ueber zwei Zeilen brechen,
   - die feste Ziffernbreite 0,6em ist die Laufweite der Plex-Mono-Ziffer
     und damit hier zu breit,
   - der Wortteil lief in der Fliesstextschrift statt in der Display.

   Alles drei wird hier zurueckgenommen. Die Ziffernbreite bleibt fest,
   damit die Zahl beim Rollen nicht atmet — nur eben auf das Mass der
   Archivo-Ziffer. */
.hero__riese-wert.zaehler {
  display: flex;
  flex-wrap: nowrap;
  white-space: nowrap;
}
/* Die feste Ziffernbreite von 0,6em ist die Laufweite der Plex-Mono-
   Ziffer und gilt fuer die kleinen Zahlen in der Mono. Wo der Roller in
   der Displayschrift laeuft, braucht er mehr: Inter Tight misst bei
   Gewicht 900 gemessene 0,647em fuer die breiteste Ziffer. */
.hero__riese-wert .zaehler__stelle,
.hero .kpi__wert .zaehler__stelle,
.zahlenraster__wert .zaehler__stelle { width: 0.66em; }
/* 'pre' statt 'pre-wrap': der Wortteil beginnt mit einem Leerzeichen,
   und pre-wrap laesst genau dort umbrechen — daher stand "131" oben und
   "Mrd." darunter, obwohl der Roller selbst nicht umbrechen darf. */
.hero__riese-wert .zaehler__fest {
  font-family: inherit;
  letter-spacing: inherit;
  white-space: pre;
}

/* Einheit und Einordnung stehen nebeneinander: links gross, rechts klein.
   Unter 900 px untereinander, sonst wird der Lead zu schmal. */
.hero__zeile {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 56px);
  align-items: end;
  margin-top: clamp(10px, 1.4vw, 20px);
}
.hero__einheit {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: clamp(30px, 4vw, 62px);
  line-height: 0.9;
  letter-spacing: -0.03em;
}
.hero .hero__lead {
  margin: 0 0 clamp(4px, 0.8vw, 12px);
  max-width: 42ch;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.5;
}

@media (max-width: 900px) {
  .hero__zeile { grid-template-columns: 1fr; align-items: start; }
}

/* Beleg statt Inhalt: nebeneinander, kleiner, ohne Kasten. Der Entwurf
   setzt sie so an den Fuss des Bandes. */
.hero__fuss {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 56px);
  align-items: start;
}
.hero .fussnote {
  background: transparent;
  border: 0;
  border-left: 2px solid currentColor;
  border-radius: 0;
  padding: 0 0 0 clamp(14px, 1.6vw, 22px);
}
.hero .quellen__eintrag {
  background: transparent;
  border: 1px solid currentColor;
}
@media (max-width: 900px) {
  .hero__fuss { grid-template-columns: 1fr; }
}

/* Die drei uebrigen Zahlen stehen unter einer durchgehenden Linie —
   sie sind Beiwerk zur grossen Zahl, keine gleichrangige Reihe. */
.hero .kpi-liste--rest {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  border-top: 3px solid currentColor;
  padding-top: clamp(20px, 2.4vw, 34px);
}

.kpi-liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--element-gap);
}

/* Rote Oberkante, weisse Karte. Die Kante ist Grafik, nicht Text,
   deshalb DB Rot 100.

   Eine Regel fuer alle Karten: gleiche Rundung, Akzentkante immer oben.
   Vorher lag sie mal links mit abgeschnittener Rundung, mal oben — zwei
   nebeneinander liegende Karten hatten dadurch verschiedene Silhouetten. */
.kpi {
  background: var(--color-canvas);
  border: 1px solid var(--color-mist);
  border-top: 3px solid var(--akzent);
  border-radius: var(--radius-card);
  padding: calc(var(--card-padding) * 0.7) calc(var(--card-padding) * 0.7)
           calc(var(--card-padding) * 0.8);
}
.kapitel--ash .kpi { background: var(--color-canvas); }

/* Auf dem Band keine Karten. Vier Kaesten wuerden die Flaeche zerlegen,
   und genau das liess den Block vorher zerfallen: weisse Kacheln auf
   Weiss, mit einer duennen Kante als einzigem Halt. Jetzt traegt eine
   kraeftige Oberlinie, der Rest ist Groesse.

   Die Regel muss die Bandvorgabe aus baender.css ueberschreiben, die
   allen .kpi auf dem Akzentband eine aufgehellte Flaeche gibt. */
.sektion--akzent.hero .kpi,
.hero .kpi {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}

.hero .kpi-liste { gap: clamp(22px, 3vw, 44px); }

/* Die Zahl in der Displayschrift statt in der Mono — sie ist hier die
   Hauptsache, nicht eine Beschriftung. Alle Ziffernspalten des Rollers
   enthalten dieselben zehn Ziffern und sind deshalb gleich breit, auch
   ohne Tabellenziffern. */
.hero .kpi__wert {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  /* Der laengste Wert ist "ca. 90.000" mit neun Zeichen. Mit 70 px brach
     er mitten entzwei ("90.0" Umbruch "00").

     Der Deckel bei 48 px ist nicht geschaetzt: oberhalb der Inhaltsbreite
     waechst die Spalte nicht mehr mit — sie bleibt bei 244 px, waehrend
     vw weiterlaeuft. Bei 52 px fuellt der Wert die Spalte exakt aus, bei
     56 px liefe er ueber. 48 px laesst Luft. */
  font-size: clamp(30px, 3.2vw, 44px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: inherit;
  margin-bottom: clamp(12px, 1.4vw, 18px);
  /* Eine Zahl bricht nicht um. Die Ziffernspalten des Rollers sind
     einzelne Flex-Elemente und wuerden es sonst tun. */
  flex-wrap: nowrap;
  white-space: nowrap;
}

.hero .kpi__label {
  font-size: clamp(16px, 1.3vw, 19px);
  font-weight: var(--weight-medium, 500);
  line-height: 1.35;
  margin-bottom: 8px;
}

.kpi__wert {
  font-family: var(--font-mono);
  font-weight: var(--weight-regular);
  font-size: var(--text-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-graphite);
  display: flex;
  margin-bottom: 10px;
  font-variant-numeric: tabular-nums;
}

.kpi__label {
  display: block;
  font-size: var(--text-body);
  color: var(--color-graphite);
  margin-bottom: 6px;
}

.kpi__kontext { display: block; }

/* ---------- Kapitel ---------- */

.kapitel { padding-block: var(--chapter-gap); }
.kapitel--ash { background: var(--color-ash); }

/* ---------- Chart-Karte ---------- */

/* Keine Karte. Der Entwurf setzt den Block offen unter eine 3-px-Linie —
   ein gerahmter Kasten mit Rundung sass darin wie ein Fremdkoerper. */
.chart-karte {
  background: transparent;
  border: 0;
  border-top: 3px solid currentColor;
  border-radius: 0;
  padding: clamp(28px, 3.4vw, 48px) 0 0;
  container-type: inline-size;
}
.kapitel--ash .chart-karte { background: transparent; }

/* Titel in der Displayschrift, nicht im Fliesstextschnitt. */
.chart-karte__titel {
  margin-bottom: 8px;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: clamp(22px, 2.2vw, 32px);
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.chart-karte__einheit { display: block; margin-bottom: clamp(24px, 2.8vw, 40px); }

.chart-karte__buehne {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}

@media (max-width: 860px) {
  .chart-karte__buehne { grid-template-columns: 1fr; }
}

.donut { width: 100%; height: auto; }

.donut__segment {
  transform-box: view-box;
  transform-origin: 50% 50%;
}

.donut__mitte-wert {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: var(--weight-regular);
  letter-spacing: -0.5px;
  fill: var(--color-graphite);
}
.donut__mitte-label {
  font-size: 9.5px;
  letter-spacing: 0.01em;
  fill: var(--color-slate);
}

/* Legende: fuer Sehende. Screenreader bekommen die Datentabelle,
   deshalb ist die Legende aria-hidden. docs/barrierefreiheit.md */
.legende {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(16px, 3vw, 40px);
  align-content: start;
}
/* Einspaltig wie im Entwurf: zwei Spalten zerschnitten die Reihe und
   machten aus einer Liste eine Tabelle. */
.legende { grid-template-columns: 1fr; }

.legende__zeile {
  display: grid;
  grid-template-columns: 14px 1fr auto auto;
  gap: 14px;
  align-items: baseline;
  padding-block: 9px;
  border-bottom: 1px solid var(--color-mist);
  font-size: var(--text-caption);
}
.legende__zeile:last-child { border-bottom: none; }

.legende__swatch {
  width: 14px; height: 14px;
  border-radius: 3px;
  align-self: center;
}

.legende__label { color: var(--color-graphite); }
.legende__wert {
  color: var(--color-steel);
  font-variant-numeric: tabular-nums;
}
.legende__anteil {
  color: var(--color-slate);
  font-variant-numeric: tabular-nums;
  min-width: 5ch;
  text-align: right;
}

.legende__zeile--highlight .legende__label { color: var(--akzent-tief); }

.chart-karte__quelle {
  margin-top: var(--card-padding);
  padding-top: var(--element-gap);
  border-top: 1px solid var(--color-mist);
}

/* ---------- Textbloecke ---------- */

.bloecke {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--card-padding);
  align-items: start;
}

.bloecke__spalte {
  display: grid;
  gap: var(--card-padding);
  align-content: start;
}

.block {
  background: var(--color-canvas);
  border: 1px solid var(--color-mist);
  border-radius: var(--radius-card);
  padding: var(--card-padding);
}
.kapitel--ash .block { background: var(--color-canvas); }

/* Hervorgehobene Karten tragen die rote Kante oben, in gleicher Rundung
   wie ihre Nachbarn. */
.block--betont {
  border-top: 3px solid var(--akzent);
  border-radius: var(--radius-card);
}

.block__kicker { display: block; margin-bottom: var(--element-gap); }
.block__headline { margin-bottom: var(--element-gap); }
.block__text { margin-bottom: var(--element-gap); }

.punkte { display: grid; gap: 16px; }

.punkt {
  position: relative;
  padding-left: 20px;
  font-size: var(--text-body);
  line-height: var(--leading-body);
}
/* Rotes Aufzaehlungszeichen wie in der Vorlage. Dekorativ, deshalb
   ueber ::before und nicht als Zeichen im Text. */
.punkt::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--akzent);
}
.punkt__begriff { color: var(--color-graphite); font-weight: var(--weight-medium); }

/* ---------- Highlight ---------- */

.highlight {
  background: var(--color-navy);
  color: var(--color-on-dark);
  border-radius: var(--radius-card);
  padding: calc(var(--card-padding) * 1.4) var(--card-padding);
}
.highlight__headline { color: var(--color-on-dark); margin-bottom: var(--element-gap); }
.highlight__text { color: var(--color-on-dark); opacity: 0.86; max-width: 62ch; }

/* ---------- Fussnote und Quellen ---------- */

.fussnote {
  margin-top: 0;
  padding: var(--card-padding);
  background: var(--color-fog);
  border-left: 2px solid var(--akzent);
  border-radius: var(--radius-card);
}
.fussnote__marke {
  display: block;
  font-size: var(--text-kicker);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--akzent-tief);
  margin-bottom: 10px;
}

.quellen { margin-top: 0; }
.quellen__titel {
  font-family: var(--font-mono);
  font-size: var(--text-kicker);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--color-slate);
  margin-bottom: 8px;
}
.quellen__liste { display: flex; flex-wrap: wrap; gap: 10px; }
.quellen__eintrag {
  font-size: var(--text-caption);
  color: var(--color-slate);
  background: var(--color-fog);
  border-radius: var(--radius-tag);
  padding: 5px 14px;
}
.kapitel--ash .quellen__eintrag { background: var(--color-canvas); }

/* ---------- Einblend-Zustaende (nur transform und opacity) ---------- */

/* Der Startzustand wird erst gesetzt, wenn main.js bestaetigt hat, dass
   GSAP geladen ist und Bewegung erlaubt ist. Faellt das Skript aus,
   bleibt der Inhalt sichtbar statt unsichtbar. */
.bewegung .reveal { opacity: 0; transform: translate3d(0, 24px, 0); }

/* Startzustaende der Diagramm- und Kachelbewegung. Nur gesetzt, wenn
   Bewegung wirklich laeuft — sonst bliebe alles unsichtbar. */
.bewegung .balken__stab { transform: scaleX(0); }
.bewegung .saeule__stab { transform: scaleY(0); }
.bewegung .stapel__teil { transform: scaleX(0); }
.bewegung .kachel { opacity: 0; }
.bewegung .kette__schritt { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .bewegung .reveal,
  .bewegung .kachel,
  .bewegung .kette__schritt { opacity: 1; transform: none; }
  .bewegung .balken__stab,
  .bewegung .saeule__stab,
  .bewegung .stapel__teil { transform: none; }
  .donut__segment { opacity: 1 !important; transform: none !important; }
}

/* ---------- Videoabschnitt ---------- */

.video { padding-block: var(--chapter-gap); background: var(--color-canvas); }
.video__kopf { max-width: 68ch; margin-bottom: var(--card-padding); }
.video__headline { margin-block: var(--element-gap) calc(var(--element-gap) * 0.6); }

.video__rahmen {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--color-graphite);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.video__player {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  object-fit: contain;
}

.video__zustimmung,
.video__platzhalter {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--element-gap);
  padding: var(--card-padding);
  text-align: center;
}

.video__zustimmung-text {
  color: var(--color-on-dark);
  max-width: 48ch;
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
}

.video__zustimmung .t-caption,
.video__platzhalter .t-caption { color: var(--color-mist); }
.video__platzhalter .ebene__marke { color: var(--color-mist); }

.video__knopf {
  font: inherit;
  font-size: var(--text-body);
  color: var(--color-graphite);
  background: var(--color-canvas);
  border: 0;
  border-radius: var(--radius-button);
  padding: 14px 28px;
  cursor: pointer;
}
.video__knopf:hover { background: var(--color-ash); }

.video__transkript {
  display: inline-block;
  margin-top: var(--element-gap);
  color: var(--color-graphite);
  font-size: var(--text-caption);
  border-bottom: 1px solid var(--akzent);
  text-decoration: none;
  padding-bottom: 2px;
}

/* ---------- Gemeinsame Karte ---------- */

.karte {
  background: var(--color-canvas);
  border: 1px solid var(--color-mist);
  border-radius: var(--radius-card);
  padding: var(--card-padding);
  display: grid;
  gap: var(--element-gap);
  align-content: start;
  container-type: inline-size;
}

/* Rote Kante links: Fallstudien und Schwerpunktkarten. */
.karte--betont {
  border-top: 3px solid var(--akzent);
  border-radius: var(--radius-card);
}

.karte__titel { color: var(--color-graphite); }
.karte__untertitel { color: var(--color-graphite); margin-top: 4px; }
.karte__headline { margin: 0; }
.karte__text { margin: 0; }
.karte__fuss { margin: 0; }

.quellenzeile { margin: 0; color: var(--color-slate); }

/* In Diagrammkarten steht die Quelle abgesetzt unter der Grafik. */
.chart-karte > .quellenzeile {
  margin-top: var(--card-padding);
  padding-top: var(--element-gap);
  border-top: 1px solid var(--color-mist);
}

/* ---------- Kapitel 02: Kachelraster ---------- */

.kachelraster {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@container (min-width: 460px) {
  .kachelraster { grid-template-columns: repeat(2, 1fr); }
}
@container (min-width: 700px) {
  .kachelraster { grid-template-columns: repeat(3, 1fr); }
}

.kachel {
  background: var(--color-fog);
  border: 1px solid var(--color-mist);
  border-radius: var(--radius-card);
  padding: 14px 16px;
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  color: var(--color-graphite);
}

/* ---------- Kapitel 03: Zusatzblock ---------- */

/* Wie jede andere Inhaltskarte: weisse Flaeche, gleiche Rundung,
   rote Akzentkante oben. Vorher war es ein blosses Raster mit Haarlinie
   und wirkte neben den Karten unfertig. */
.zusatzblock {
  display: grid;
  gap: var(--element-gap);
  background: var(--color-canvas);
  border: 1px solid var(--color-mist);
  border-top: 3px solid var(--akzent);
  border-radius: var(--radius-card);
  padding: var(--card-padding);
}

/* ---------- Kapitel 04: Statliste ---------- */

.statliste { display: grid; gap: 10px; }

.stat {
  background: var(--color-fog);
  border-radius: var(--radius-card);
  padding: 16px 20px;
}
.stat__wert {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-heading);
  line-height: 1.1;
  letter-spacing: var(--tracking-heading);
  color: var(--color-graphite);
  font-variant-numeric: tabular-nums;
}
.stat__label {
  display: block;
  margin-top: 6px;
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  color: var(--color-steel);
}

/* ---------- Prozesskette ---------- */

.prozesskette {
  display: grid;
  gap: var(--element-gap);
  background: var(--color-canvas);
  border: 1px solid var(--color-mist);
  border-radius: var(--radius-card);
  padding: var(--card-padding);
}
.prozesskette--betont {
  border-top: 3px solid var(--akzent);
  border-radius: var(--radius-card);
}
.prozesskette__headline { margin: 0; }

.kette {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  counter-reset: schritt;
}

.kette__schritt {
  position: relative;
  border: 1px solid var(--color-mist);
  border-radius: var(--radius-card);
  padding: 16px;
  display: grid;
  gap: 8px;
  align-content: start;
}
/* Der Pfeil zwischen den Schritten ist entfallen. Er sass auf halber
   Hoehe der ganzen Spalte und landete dadurch je nach Textlaenge mitten
   im Fliesstext des Nachbarn. Die Abfolge tragen jetzt die Oberlinien und
   die Reihenfolge selbst — so macht es auch der Entwurf. */

.kette__titel {
  font-weight: var(--weight-medium);
  font-size: var(--text-caption);
  color: var(--color-graphite);
}
.kette__text { color: var(--color-steel); }

/* ---------- Kapitel 06: Hinweis ---------- */

.hinweis {
  background: var(--color-ivory);
  border-radius: var(--radius-card);
  padding: var(--card-padding);
}
.hinweis__text {
  margin: 0;
  font-size: var(--text-caption);
  line-height: var(--leading-body);
  color: var(--color-graphite);
}

/* ---------- Diagramme: waagerechte Balken ---------- */

/* Die Balken sitzen in einer Spalte, deren Breite vom Kapitel abhaengt.
   Deshalb Container-Query statt Viewport-Breakpoint: schmal wird
   gestapelt, breit steht Label, Balken und Wert nebeneinander. */
.balken { display: grid; gap: 14px; }

.balken__zeile {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 14px;
  align-items: baseline;
  font-size: var(--text-caption);
}
/* Schmal: Label und Wert in einer Zeile, der Balken darunter. */
.balken__label { grid-column: 1; grid-row: 1; }
.balken__wert  { grid-column: 2; grid-row: 1; text-align: right; }
.balken__spur  { grid-column: 1 / -1; grid-row: 2; }

@container (min-width: 520px) {
  .balken__zeile {
    grid-template-columns: minmax(120px, 190px) 1fr auto;
    align-items: center;
  }
  .balken__label,
  .balken__wert,
  .balken__spur { grid-column: auto; grid-row: auto; }
  .balken__wert { text-align: left; }
}

.balken__label { color: var(--color-graphite); }

.balken__spur {
  display: block;
  height: 14px;
  background: var(--color-mist);
  border-radius: 999px;
  overflow: hidden;
}
.balken__stab {
  display: block;
  height: 100%;
  width: var(--anteil, 0%);
  border-radius: 999px;
  transform-origin: 0 50%;
}
.balken__wert {
  color: var(--color-steel);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Auf dem Signalband ist die Akzentfarbe der Hintergrund — der betonte
   Balken war dort unsichtbar. Er wechselt auf die Textfarbe des Bandes,
   der unbetonte auf eine halbtransparente Abstufung davon. */
.sektion--akzent .balken__spur { background: var(--akzent-flaeche); }
/* 0,60 statt 0,45: gemessen ergab 0,45 nur 2,47:1 gegen die Spur und
   verfehlte die 3:1 fuer grafische Objekte. 0,60 liegt bei 3,49:1 und
   bleibt deutlich hinter dem betonten Balken (7,73:1) zurueck. */
.sektion--akzent .balken__stab { background: rgba(18, 20, 15, 0.6) !important; }
.sektion--akzent .balken__stab--betont { background: var(--akzent-text) !important; }
.sektion--akzent .balken__label,
.sektion--akzent .balken__wert { color: var(--akzent-text); }

/* ---------- Diagramme: Saeulenpaar ---------- */

/* Die Hoehe muss definiert sein, sonst loest sich die Prozenthoehe des
   Stabs gegen eine automatische Zeile auf und der Balken kollabiert. */
.saeulen {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--card-padding);
  height: clamp(200px, 26vh, 260px);
}
.saeule {
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  justify-items: center;
  gap: 10px;
}
.saeule__wert {
  font-family: var(--font-display);
  font-size: var(--text-subheading);
  color: var(--color-graphite);
  font-variant-numeric: tabular-nums;
}
.saeule__stab {
  display: block;
  align-self: end;
  width: min(96px, 60%);
  height: var(--anteil, 0%);
  min-height: 8px;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  transform-origin: 50% 100%;
}
.saeule__label { color: var(--color-steel); }

.differenz {
  background: var(--color-navy);
  color: var(--color-on-dark);
  border-radius: var(--radius-card);
  padding: var(--card-padding);
  display: grid;
  gap: 10px;
}
.differenz__wert {
  font-family: var(--font-display);
  font-size: var(--text-subheading);
  color: var(--color-on-dark);
}
.differenz__text { color: var(--color-on-dark); opacity: 0.86; margin: 0; }

/* ---------- Vergleichskarten ---------- */

.vergleich {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--element-gap);
}
.vergleich__karte {
  background: var(--color-fog);
  border-top: 3px solid var(--chart-06);
  border-radius: var(--radius-card);
  padding: 18px 20px;
  display: grid;
  gap: 4px;
  align-content: start;
}
/* Die Schiene traegt DB Rot — Sonderregel aus docs/design-system.md. */
.vergleich__karte--betont { border-top-color: var(--akzent); }

.vergleich__label { color: var(--color-steel); }
.vergleich__wert {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-heading);
  line-height: 1.1;
  letter-spacing: var(--tracking-heading);
  color: var(--color-graphite);
  font-variant-numeric: tabular-nums;
}
.vergleich__einheit { color: var(--color-slate); }

/* ---------- Gestapelter Balken ---------- */

.stapel {
  display: flex;
  height: 34px;
  border-radius: var(--radius-card);
  overflow: hidden;
}
.stapel__teil {
  width: var(--anteil, 0%);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  transform-origin: 0 50%;
}
.stapel__teil--akzent .stapel__text { color: var(--akzent-text); }

.stapel__text {
  font-size: 11px;
  color: var(--color-on-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-inline: 6px;
}

/* ---------- Sichtbare Tabelle ---------- */

.tabelle-huelle { display: grid; gap: 12px; overflow-x: auto; }

.tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-caption);
}
.tabelle th,
.tabelle td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-mist);
}
.tabelle thead th {
  color: var(--color-graphite);
  font-weight: var(--weight-medium);
  border-bottom-width: 1.5px;
}
.tabelle tbody th { color: var(--color-graphite); font-weight: var(--weight-regular); }
.tabelle td {
  color: var(--color-steel);
  font-variant-numeric: tabular-nums;
}

/* ---------- Kapitel 06: Kartenblock ---------- */

.kartenblock {
  display: grid;
  grid-template-columns: minmax(240px, 380px) 1fr;
  gap: var(--card-padding);
  align-items: center;
  background: var(--color-canvas);
  border: 1px solid var(--color-mist);
  border-radius: var(--radius-card);
  padding: var(--card-padding);
}
@media (max-width: 820px) { .kartenblock { grid-template-columns: 1fr; } }

/* Mit echter Karte traegt die Grafik das Seitenverhaeltnis selbst.

   Zwei Klassen, weil die Grundregel weiter unten in der Datei steht und
   bei gleicher Spezifitaet gewinnt: das 3:4 der Flaeche machte die
   Rasterzeile 377 px hoch, waehrend die Karte 407 px braucht — die
   Quellzeile lag dadurch ueber der Karte. */
.kartenblock__flaeche.kartenblock__flaeche--karte {
  aspect-ratio: auto;
  background: transparent;
  align-content: start;
  padding: 0;
  gap: 14px;
}

/* Eigener Name: .karte ist im Projekt bereits die Inhaltskarte. */
/* Ohne festes Seitenverhaeltnis rechnet der Rasterplatz die Hoehe des
   SVG nicht aus seinem viewBox — die Quellzeile lag dann ueber der
   Karte. Der Wert wird in bausteine.js aus dem viewBox gesetzt. */
.deutschlandkarte { width: 100%; height: auto; display: block; }

/* Farben ueber currentColor: die Karte funktioniert damit auf jedem Band,
   hell auf dunkel wie dunkel auf hell. */
.deutschlandkarte__flaeche { fill: currentColor; opacity: 0.12; }
.deutschlandkarte__umriss  { stroke: currentColor; stroke-width: 2.5; opacity: 0.55; }
.deutschlandkarte__punkt   { fill: currentColor; }

/* Punktschwarm: die Punkte tauchen gestaffelt auf, sobald die Karte in
   Sicht kommt. Nur opacity und transform. */
.bewegung .deutschlandkarte__punkt { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .bewegung .deutschlandkarte__punkt { opacity: 1; }
}

.deutschlandkarte__quelle { text-align: left; }

.kartenblock__flaeche {
  aspect-ratio: 3 / 4;
  background: var(--color-ash);
  border-radius: var(--radius-card);
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 8px;
  padding: var(--card-padding);
  text-align: center;
}
.kartenblock__text { display: grid; gap: 12px; align-content: start; }
.kartenblock__wert {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-heading-lg);
  line-height: 1;
  letter-spacing: var(--tracking-heading-lg);
  color: var(--akzent);
}

/* ---------- KPI-Varianten ---------- */

.kpi-liste--zwei { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.kpi-liste--drei { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.kpi-liste--klein .kpi__wert { font-size: var(--text-subheading); }
.kpi-liste--klein .kpi { padding: 14px 16px; }



.stapel__legende {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-size: var(--text-caption);
  color: var(--color-steel);
}
.stapel__eintrag { display: flex; align-items: center; gap: 8px; }
.stapel__punkt { width: 10px; height: 10px; border-radius: 2px; flex: none; }

/* ---------- Ziffernroller ---------- */

/* Ziffern laufen in der Mono, Woerter im Fliesstextschnitt. Mono ist
   deutlich breiter — ein ganzer Satz darin sprengt die Karte. */
.zaehler {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: flex-end;
  column-gap: 0;
  font-variant-numeric: tabular-nums;
}

.zaehler__stelle {
  display: inline-block;
  height: 1em;
  line-height: 1em;
  overflow: hidden;
  /* Feste Breite je Ziffer: die Zahl darf beim Rollen nicht atmen.
     0,6em entspricht der Laufweite der Plex-Mono-Ziffer. */
  width: 0.6em;
  flex: none;
}

.zaehler__spur { display: block; will-change: transform; }

.zaehler__ziffer {
  display: block;
  height: 1em;
  line-height: 1em;
  text-align: center;
}

/* Die Ziffernzellen sind 1em hoch mit Zeilenhoehe 1em, der Wortteil lief
   mit normaler Zeilenhoehe — dadurch sassen "131" und "Mrd." nicht auf
   derselben Grundlinie. Gleiche Box, gleiche Grundlinie. */
.zaehler__fest {
  display: inline-block;
  height: 1em;
  line-height: 1em;
  font-family: var(--font-body);
  letter-spacing: var(--tracking-heading);
  white-space: pre-wrap;
}

/* Ersatztext im <video>: nur sichtbar, wenn der Browser gar kein Video
   kann. Eigener Grund, weil er sonst die Farbe des Players erbt. */
.video__ersatz {
  margin: 0;
  padding: var(--card-padding);
  background: var(--color-ash);
  color: var(--color-graphite);
}


/* ---------- Offene Bloecke statt Karten ---------- */

/* Der Entwurf kennt genau zwei Formen: offene Bloecke unter einer Linie
   und Kacheln mit 2-px-Kontur. Keine Flaechen, keine Rundungen. */

/* Kacheln: Kontur statt Fuellung, Schrift gross und fett. */
.kachel {
  background: transparent;
  border: 2px solid currentColor;
  border-radius: 0;
  padding: clamp(10px, 1.1vw, 14px) clamp(16px, 1.7vw, 22px);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(17px, 2.1vw, 32px);
  letter-spacing: -0.02em;
  line-height: 1;
}
.kachelraster { gap: clamp(8px, 0.9vw, 12px); }

/* Alles Uebrige, was noch als Kasten stand, oeffnet sich unter einer
   Linie — dieselbe Form wie die grossen Bloecke. */
/* .differenz bleibt gefuellt: der Entwurf setzt sie als dunklen Block mit
   #141210 und heller Schrift. Offen gestellt stand die helle Schrift auf
   Weiss und fiel mit 1,17:1 durch. */
:is(.kapitel, .kennzahlenband, .hero) :is(.kpi, .vergleich__karte, .kette__schritt,
                                          .stat, .hinweis, .kartenblock) {
  background: transparent;
  border: 0;
  border-top: 3px solid currentColor;
  border-radius: 0;
  padding: clamp(16px, 1.8vw, 24px) 0 0;
}
/* Der Hinweis ist Beiwerk — feine Linie statt kraeftiger. */
:is(.kapitel, .kennzahlenband) .hinweis { border-top-width: 1px; }

/* Werte aus dem Entwurf: 28/32 Polsterung, keine Rundung. */
.differenz { padding: clamp(20px, 2.2vw, 28px) clamp(22px, 2.4vw, 32px); }
/* Auf dem Signalband hat der Hero seine eigene Regel, die hier nicht
   ueberschrieben werden darf. */
.hero .kpi { border-top: 0; padding-top: 0; }


/* Der Entwurf setzt keinen einzigen gerahmten Kasten. Struktur entsteht
   ueber eine kraeftige Oberlinie und Weissraum. Die einzelnen Bausteine
   behalten ihre Innenaufteilung, verlieren aber Rahmen und Flaeche. */
:is(.kapitel, .kennzahlenband) :is(.karte, .block, .zusatzblock, .prozesskette, .fussnote) {
  background: transparent;
  border: 0;
  border-top: 3px solid currentColor;
  border-radius: 0;
  padding: clamp(22px, 2.6vw, 36px) 0 0;
}

/* Die Fussnote ist Beleg, keine Aussage — feine Linie statt kraeftiger. */
:is(.kapitel, .kennzahlenband) .fussnote {
  border-top-width: 1px;
  border-top-color: var(--color-mist);
}

/* Auf dunklem und farbigem Grund traegt die Linie die Bandfarbe. */
.sektion--ink :is(.karte, .block, .zusatzblock, .prozesskette) { border-top-color: currentColor; }
.sektion--ink .fussnote { border-top-color: var(--band-ink-linie); }
.sektion--akzent .fussnote { border-top-color: var(--akzent-linie); }


/* ---------- Nebenseiten: Impressum und Kontakt ---------- */

/* Bewusst ruhig: dunkler Kopf, offene Bloecke darunter, gleicher Fuss.
   Sie sollen die Optik tragen, nicht die Hauptseite wiederholen. */
.seitenkopf {
  padding-block: clamp(72px, 12vw, 180px) clamp(48px, 6.4vw, 96px);
}
.seitenkopf__titel {
  margin: clamp(14px, 1.8vw, 24px) 0 0;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: clamp(40px, 6.4vw, 96px);
  line-height: 0.9;
  /* Etwas enger als die Kapitelzeilen: bei dieser Groesse standen die
     Buchstaben sonst zu locker. */
  letter-spacing: -0.035em;
}
.seitenkopf__lead {
  margin: clamp(18px, 2.2vw, 30px) 0 0;
  max-width: 54ch;
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.45;
  color: var(--band-ink-leise);
}

/* Zwei Spalten, damit kurze Bloecke wie Anschriften nicht als lange
   duenne Kette untereinander stehen. */
.seiteninhalt__raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(32px, 4vw, 64px) clamp(32px, 5vw, 88px);
  align-items: start;
}

.seitenblock {
  border-top: 3px solid currentColor;
  padding-top: clamp(16px, 1.8vw, 24px);
}
.seitenblock__titel {
  margin: 0 0 clamp(12px, 1.4vw, 18px);
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: clamp(19px, 1.7vw, 24px);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.seitenblock__zeilen {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 4px;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.5;
}
.seitenblock__text {
  margin: 0;
  max-width: 62ch;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.55;
  color: var(--color-slate);
}

.seitenzurueck { padding-block: 0 clamp(48px, 6vw, 88px); }
.seitenzurueck__link {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-kicker);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--akzent-tief);
  border-bottom: 2px solid currentColor;
  padding-bottom: 4px;
  text-decoration: none;
}
.seitenzurueck__link:hover { color: var(--color-graphite); }

/* Die Seitenleiste steht fest am rechten Rand — auf den Nebenseiten
   bekommt der Inhalt dort Luft, damit nichts darunter verschwindet. */
@media (min-width: 1101px) {
  body[data-seite] .sektion__inhalt { padding-right: clamp(48px, 4vw, 72px); }
}


/* ---------- Logowand auf der Seite "Ueber uns" ---------- */

/* Kacheln mit 2-px-Kontur, wie im Entwurf. Liegt eine Logodatei vor,
   steht sie darin; sonst der Name in der Displayschrift. So aendert der
   Wechsel spaeter nichts am Aufbau. */
.logoband { padding-block: clamp(40px, 5vw, 72px); }

.logowand__titel {
  margin: 0 0 clamp(18px, 2.2vw, 30px);
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: clamp(19px, 1.7vw, 24px);
  letter-spacing: -0.02em;
}
.logowand__raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: clamp(10px, 1.1vw, 14px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.logowand__feld {
  border: 2px solid currentColor;
  min-height: clamp(88px, 9vw, 128px);
  display: grid;
  place-items: center;
  padding: clamp(14px, 1.6vw, 22px);
  text-align: center;
}
.logowand__bild { max-height: 56px; width: auto; object-fit: contain; }
.logowand__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(15px, 1.4vw, 19px);
  letter-spacing: -0.02em;
  line-height: 1.15;
}
/* Platzhalterfelder etwas zurueckgenommen — sie tragen noch kein Logo. */
.logowand__feld--platzhalter { border-style: dashed; }
.logowand__hinweis {
  margin: clamp(14px, 1.6vw, 20px) 0 0;
  max-width: 62ch;
  font-size: var(--text-caption);
  line-height: 1.5;
  color: var(--color-slate);
}


/* ---------- Kontaktformular ---------- */

/* Formensprache des Entwurfs: 2-px-Kontur, keine Flaeche, keine Rundung. */
.kontaktband { padding-block: clamp(40px, 5vw, 72px) clamp(48px, 6vw, 88px); }

.kontaktformular {
  display: grid;
  gap: clamp(20px, 2.4vw, 32px);
  max-width: 62ch;
}
.kontaktformular__feld { display: grid; gap: 10px; }

.kontaktformular__label {
  font-family: var(--font-mono);
  font-size: var(--text-kicker);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--akzent-tief);
}

.kontaktformular__eingabe {
  font: inherit;
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.45;
  color: var(--color-graphite);
  background: transparent;
  border: 2px solid currentColor;
  border-radius: 0;
  padding: clamp(12px, 1.3vw, 17px) clamp(14px, 1.5vw, 20px);
  width: 100%;
  /* Nur senkrecht: waagerecht wuerde das Feld aus der Spalte laufen. */
  resize: vertical;
}
.kontaktformular__eingabe::placeholder { color: var(--color-slate); }
.kontaktformular__eingabe:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; }
.kontaktformular__eingabe--fehler { border-color: var(--akzent-tief); }

/* Der Fehler steht als Text da, nicht nur als Farbe — Farbe allein
   traegt keine Aussage. */
.kontaktformular__fehler {
  margin: 0;
  font-size: var(--text-caption);
  line-height: 1.4;
  color: var(--akzent-tief);
}

.kontaktformular__knopf {
  justify-self: start;
  font-family: var(--font-mono);
  font-size: var(--text-kicker);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--color-canvas);
  background: var(--color-graphite);
  border: 2px solid var(--color-graphite);
  border-radius: 0;
  padding: clamp(13px, 1.4vw, 18px) clamp(20px, 2.2vw, 30px);
  cursor: pointer;
}
.kontaktformular__knopf:hover:not(:disabled) {
  background: var(--akzent-tief);
  border-color: var(--akzent-tief);
}
/* Abgeschaltet nicht ueber Deckkraft: bei 0,45 sank der Text auf 4,38:1.
   Stattdessen ausgezeichnet — gestrichelte Kontur, Text im Hilfston,
   5,33:1. Deaktivierte Elemente sind von der Norm zwar ausgenommen, aber
   der Text erklaert hier, warum der Knopf nicht geht. */
.kontaktformular__knopf:disabled {
  background: transparent;
  border-style: dashed;
  border-color: var(--color-slate);
  color: var(--color-slate);
  cursor: not-allowed;
}

.kontaktformular__hinweis,
.kontaktformular__warnung {
  margin: 0;
  max-width: 60ch;
  font-size: var(--text-caption);
  line-height: 1.55;
  color: var(--color-slate);
}
/* Solange die Empfaengeradresse fehlt, ist das eine Baustelle und keine
   Nebenbemerkung. */
.kontaktformular__warnung {
  color: var(--akzent-tief);
  border-left: 2px solid currentColor;
  padding-left: clamp(12px, 1.4vw, 18px);
}


/* ---------- Mobil nachgezogen ---------- */

/* Zwei Beschriftungen in den Diagrammen standen mit 9,5 und 11 px da —
   auf dem Telefon zu klein zum Lesen. Sie sitzen im SVG, dort skaliert
   die Schrift mit der Grafik, deshalb hier ein eigener Wert. */
@media (max-width: 760px) {
  .donut__mitte-label { font-size: 12px; }
  .stapel__text { font-size: 13px; }
}

/* Die Verweise im Fuss waren 20 px hoch. Sie stehen jetzt mit Polsterung
   da, damit sie sich auf dem Telefon treffen lassen — 24 px sind das
   Mindestmass, 44 das bequeme. */
.seitenfuss__link {
  display: inline-block;
  padding-block: 12px;
}
.seitenfuss__nav { align-items: center; }