/* ===========================================================================
   Hagen Fisbeck - fisbeck.de
   Richtung "Instrument".

   Gestalterische Grundregeln dieser Seite
     - Die Fläche ist weiß. Struktur entsteht durch Haarlinien, nicht durch
       Kästen, Schatten oder Rundungen. Es gibt keine Karten.
     - Überschriften stehen in einer schmalen Grotesk, Fließtext in der
       normalen, Messwerte in der Mono. Die Schriftwahl sagt, was die Zeile ist.
     - Farbe erscheint ausschließlich dort, wo sie etwas bedeutet:
       Evidenzgrad A bis D. Die Oberfläche selbst ist unbunt.
     - Jeder Abschnitt trägt links eine Marginalspalte mit Mono-Metadaten.
       Das ist das tragende Ordnungsmittel und ersetzt Kicker-Label über
       Überschriften.

   Aufbau
     1  Grundlagen        5  Bausteine
     2  Typografie        6  Hilfsklassen
     3  Raster            7  Medienabfragen
     4  Kopf und Fuß
   =========================================================================== */

/* ---------------------------------------------------------- 1  Grundlagen */

*, *::before, *::after { box-sizing: border-box; }

html {
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--t-body-size);
  line-height: var(--t-body-lh);
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--c-ink-900); color: var(--c-white);
  padding: var(--s-3) var(--s-5); font-weight: 500; text-decoration: none;
}
.skip:focus { left: 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------- 2  Typografie */

h1, h2 {
  font-family: var(--font-cond);
  font-weight: 600;
  color: var(--c-ink-800);
  margin: 0 0 var(--s-4);
  text-wrap: balance;
}
h3, h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--c-ink-800);
  margin: 0 0 var(--s-3);
}

h1, .h1 { font-size: var(--t-h1-size); line-height: var(--t-h1-lh); letter-spacing: var(--t-h1-ls); }
.display {
  font-family: var(--font-cond); font-weight: 600;
  font-size: var(--t-display-size); line-height: var(--t-display-lh);
  letter-spacing: var(--t-display-ls);
  margin: 0 0 var(--s-5); text-wrap: balance;
}
h2, .h2 { font-size: var(--t-h2-size); line-height: var(--t-h2-lh); letter-spacing: var(--t-h2-ls); }
h3, .h3 { font-size: var(--t-h3-size); line-height: var(--t-h3-lh); letter-spacing: var(--t-h3-ls); }
h4, .h4 { font-size: var(--t-h4-size); line-height: var(--t-h4-lh); }

p { margin: 0 0 var(--s-4); max-width: var(--measure); }
.lead { font-size: var(--t-lead-size); line-height: var(--t-lead-lh); color: var(--c-ink-700); max-width: 58ch; }
.small { font-size: var(--t-small-size); line-height: var(--t-small-lh); }
.muted { color: var(--text-muted); }
.data { font-family: var(--font-mono); font-size: var(--t-data-size); }
.num { font-variant-numeric: tabular-nums; }

/* Mono-Marginalie. Steht links vom Inhalt, nicht darüber. */
.tag {
  font-family: var(--font-mono);
  font-size: var(--t-label-size);
  letter-spacing: var(--t-label-ls);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-muted);
  display: block;
}
.tag--mark { color: var(--mark); }

a { color: var(--c-ink-800); text-decoration-color: var(--mark); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--mark); }

ul, ol { margin: 0 0 var(--s-4); padding-left: 1.1em; max-width: var(--measure); }
li { margin-bottom: var(--s-2); }
li::marker { color: var(--c-grey-400); }

/* Die Listenform der Marke: keine Punkte, sondern Zeilen mit Trennlinie. */
.rows { list-style: none; padding: 0; margin: 0; max-width: none; border-top: 1px solid var(--line); }
.rows > li {
  display: grid; grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: var(--s-5); margin: 0; padding: var(--s-4) 0;
  border-bottom: 1px solid var(--line); align-items: baseline;
}
.rows > li > :first-child { font-family: var(--font-mono); font-size: var(--t-data-size); color: var(--text-muted); }
.rows--plain > li { grid-template-columns: 1fr; gap: 0; }

blockquote {
  margin: var(--s-6) 0; padding: 0 0 0 var(--s-5);
  border-left: 2px solid var(--mark);
  font-size: var(--t-lead-size); line-height: 1.55; color: var(--c-ink-700);
  max-width: 56ch;
}
blockquote p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------- 3  Raster */

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--s-6); }
.container--narrow { max-width: var(--container-narrow); }

section { padding: var(--s-9) 0; border-top: 1px solid var(--line); }
section:first-of-type { border-top: 0; }
section.tight { padding: var(--s-8) 0; }

.band { background: var(--bg-band); }

/* Abschnittskopf: Marginalspalte links, Inhalt rechts. Das Leitmotiv. */
.head { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); gap: var(--s-6); margin-bottom: var(--s-7); }
.head__meta { display: flex; flex-direction: column; gap: var(--s-2); padding-top: 6px; }
.head__body > :last-child { margin-bottom: 0; }

/* Inhaltsblock ohne eigenen Kopf, aber im selben Raster */
.railed { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); gap: var(--s-6); }
.railed__meta { padding-top: 4px; }

.grid { display: grid; gap: 0; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--s-8); }

/* ------------------------------------------------------- 4  Kopf und Fuß */

.site-header { border-bottom: 1px solid var(--c-ink-800); background: var(--bg); position: sticky; top: 0; z-index: 40; }
.site-header__inner { display: flex; align-items: center; gap: var(--s-5); min-height: 68px; }
/* Personenmarke mit Descriptor. Der Descriptor steht als Text neben dem Logo:
   als Logo-Unterzeile wäre er in Kopfgröße nicht lesbar. */
.site-header__brand { display: flex; align-items: center; gap: var(--s-4); flex-shrink: 0; color: var(--c-ink-800); text-decoration: none; }
.site-header__logo { display: block; flex-shrink: 0; }
.site-header__logo svg { width: 218px; display: block; }
.site-header__descriptor {
  display: block; padding-left: var(--s-4); border-left: 1px solid var(--line-strong);
  font-family: var(--font-mono); font-size: 0.6875rem; line-height: 1.35; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-muted);
}
.site-header__descriptor span { display: block; }

.nav { margin-left: auto; display: flex; align-items: center; gap: var(--s-6); }
.nav a {
  color: var(--c-ink-700); text-decoration: none;
  font-family: var(--font-cond); font-size: 1.0625rem; font-weight: 500;
  letter-spacing: -.005em; padding: var(--s-2) 0; border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--c-ink-800); border-bottom-color: var(--line-strong); }
.nav a[aria-current="page"] { color: var(--c-ink-800); border-bottom-color: var(--mark); }
/* .nav a setzt das seitliche Innenpolster auf 0 - für den Button wiederherstellen */
.nav a.btn { border-bottom: 0; color: var(--c-white); padding-inline: var(--s-4); }
.nav a.btn:hover { color: var(--c-white); }

.nav-toggle {
  display: none; margin-left: auto; background: none; border: 1px solid var(--line-strong);
  padding: 9px 11px; cursor: pointer; color: var(--c-ink-800);
}

.site-footer { background: var(--bg-inverse); color: var(--text-inverse-muted); padding: var(--s-8) 0 var(--s-6); }
.site-footer a { color: var(--c-white); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-decoration-color: var(--mark-inverse); }
.site-footer__grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr; gap: var(--s-6); }
/* Beim Neuschreiben des Stylesheets verloren gegangen: ohne diese Regeln läuft der
   Fußbereich auf Telefonen seitlich aus der Seite. */
@media (max-width: 820px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .site-footer__grid > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .site-footer__grid { grid-template-columns: 1fr; }
  .site-footer__legal p[style] { margin-left: 0 !important; }
}
.site-footer h2 {
  font-family: var(--font-mono); font-size: var(--t-label-size);
  letter-spacing: var(--t-label-ls); text-transform: uppercase;
  color: var(--mark-inverse); font-weight: 600; margin-bottom: var(--s-4);
}
.site-footer__logo svg { width: 232px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: var(--s-3); }
.site-footer__legal {
  margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--line-inverse);
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); font-size: var(--t-small-size);
}
.site-footer__legal p { margin: 0; max-width: none; }

/* Spezifikationsband unter dem Kopf - ersetzt das Kicker-Label über der
   Überschrift und gibt der Seite den Charakter eines Dokumentenkopfs. */
.specbar { border-bottom: 1px solid var(--line); background: var(--bg-band); }
.specbar__inner { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); padding-block: 9px; }
.specbar span {
  font-family: var(--font-mono); font-size: var(--t-label-size);
  letter-spacing: var(--t-label-ls); text-transform: uppercase; color: var(--text-muted);
}
.specbar span:first-child { color: var(--c-ink-800); }
.specbar span + span::before { content: "·"; margin-right: var(--s-6); color: var(--c-grey-400); }

/* --------------------------------------------------------- 5  Bausteine */

/* Schaltflächen: rechteckig, kein Radius, keine Fläche ohne Grund. */
.btn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-sans); font-size: 0.9375rem; font-weight: 500;
  padding: 12px 20px; border: 1px solid transparent; text-decoration: none; cursor: pointer;
  transition: background-color .12s, color .12s, border-color .12s;
}
.btn--primary { background: var(--c-ink-800); color: var(--c-white); }
.btn--primary:hover { background: var(--mark); color: var(--c-white); }
.btn--dark { background: var(--c-ink-800); color: var(--c-white); }
.btn--dark:hover { background: var(--mark); color: var(--c-white); }
.btn--ghost { border-color: var(--c-ink-800); color: var(--c-ink-800); }
.btn--ghost:hover { background: var(--c-ink-800); color: var(--c-white); }
.btn--inverse { background: var(--c-white); color: var(--c-ink-900); }
.btn--inverse:hover { background: var(--mark-inverse); color: var(--c-ink-900); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 500;
  text-decoration: none; color: var(--c-ink-800);
  border-bottom: 1px solid var(--mark); padding-bottom: 3px;
}
.link-arrow:hover { color: var(--mark); }
.link-arrow svg { width: 15px; height: 15px; transition: transform .12s; }
.link-arrow:hover svg { transform: translateX(3px); }

.actions { display: flex; flex-wrap: wrap; gap: var(--s-5); align-items: center; margin-top: var(--s-6); }

/* Hero: Text links, Messwerttafel rechts. Keine Bühne, keine Fläche. */
.hero { padding: var(--s-9) 0 var(--s-8); border-top: 0; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--s-8); align-items: start; }
.hero p.lead { margin-bottom: 0; }

/* Blöcke statt Karten: oben eine Linie, kein Rahmen, kein Hintergrund. */
.block { padding: var(--s-4) var(--s-5) var(--s-5) 0; border-top: 1px solid var(--line); }
.block--mark { border-top: 2px solid var(--c-ink-800); }
.block__icon { color: var(--mark); display: block; margin-bottom: var(--s-3); }
.block__icon svg { width: 24px; height: 24px; display: block; }
.block h3 { margin-bottom: var(--s-2); }
.block p { margin-bottom: 0; }
.block p + p { margin-top: var(--s-3); }

/* Im mehrspaltigen Raster bekommen Blöcke senkrechte Trennlinien. */
.grid-2 > .block, .grid-3 > .block, .grid-4 > .block { padding-right: var(--s-6); }
.grid-2 > .block + .block, .grid-3 > .block + .block, .grid-4 > .block + .block {
  padding-left: var(--s-6); border-left: 1px solid var(--line); margin-left: -1px;
}

/* Evidenz-Chip: das einzige farbige Element der Oberfläche. */
.grade {
  display: inline-flex; align-items: center; font-family: var(--font-mono);
  font-size: 0.6875rem; font-weight: 600; letter-spacing: .05em;
  padding: 3px 7px; white-space: nowrap;
}
.grade--a { background: var(--c-grade-a-tint); color: var(--c-grade-a); }
.grade--b { background: var(--c-grade-b-tint); color: var(--c-grade-b); }
.grade--c { background: var(--c-grade-c-tint); color: var(--c-grade-c); }
.grade--d { background: var(--c-grade-d-tint); color: var(--c-grade-d); }

/* Tabellen sind hier ein Hauptdarsteller, kein Sonderfall. */
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; min-width: 620px; font-size: var(--t-small-size); }
caption { text-align: left; padding-bottom: var(--s-3); color: var(--text-muted); font-size: var(--t-small-size); }
th, td { text-align: left; padding: var(--s-3) var(--s-5) var(--s-3) 0; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th {
  border-bottom: 1px solid var(--c-ink-800);
  font-family: var(--font-mono); font-size: var(--t-label-size);
  letter-spacing: var(--t-label-ls); text-transform: uppercase; font-weight: 600;
  color: var(--text-muted); white-space: nowrap; padding-top: 0;
}
tbody tr:hover { background: var(--bg-field); }
td.data { font-family: var(--font-mono); color: var(--text-muted); white-space: nowrap; }

/* Messwerttafel im Hero: Zeilen mit Index, wie ein Auszug aus der Evidence Base. */
.readout { border-top: 1px solid var(--c-ink-800); }
.readout__row { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: var(--s-4); padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }
.readout__i { font-family: var(--font-mono); font-size: var(--t-label-size); color: var(--c-grey-400); letter-spacing: .06em; padding-top: 3px; }
.readout__t { font-family: var(--font-cond); font-size: 1.1875rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; }
.readout__d { font-size: var(--t-small-size); color: var(--text-muted); margin-top: 2px; }

/* Prozess: nummerierte Schritte, Nummer in der Marginalspalte. */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; border-top: 1px solid var(--line); }
.steps > li {
  counter-increment: step; margin: 0; padding: var(--s-5) 0;
  border-bottom: 1px solid var(--line);
  display: grid; grid-template-columns: var(--rail) minmax(0, 1fr);
  /* Nur Spaltenabstand: ein Zeilenabstand würde Überschrift und Text auseinanderreißen. */
  column-gap: var(--s-6); row-gap: 0;
}
.steps > li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono); font-size: var(--t-label-size); font-weight: 600;
  letter-spacing: .08em; color: var(--mark); padding-top: 5px;
}
/* Alle Inhalte des Schritts stehen rechts; die Nummer allein steht links.
   Ohne diese Regel verteilt die automatische Rasterplatzierung Überschrift und
   Text auf beide Spalten. */
.steps > li > * { grid-column: 2; }
.steps h3 { margin-bottom: var(--s-2); }
.steps p { margin-bottom: 0; }

/* Kette: waagerechte Abfolge mit Trennlinien statt Kästen. */
.chain { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); border-top: 2px solid var(--c-ink-800); }
.chain > li { margin: 0; padding: var(--s-4) var(--s-5) var(--s-5) 0; border-right: 1px solid var(--line); }
.chain > li:last-child { border-right: 0; }
.chain strong { display: block; font-family: var(--font-cond); font-size: 1.0625rem; letter-spacing: -.005em; }
.chain span { font-size: var(--t-small-size); color: var(--text-muted); }

/* Abgrenzungsblock */
.notice { border-left: 2px solid var(--mark); padding: var(--s-2) 0 var(--s-2) var(--s-5); }
.notice--warn { border-left-color: var(--c-grade-c); }
.notice > :last-child { margin-bottom: 0; }

/* Fragen und Antworten */
.faq { border-top: 1px solid var(--c-ink-800); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; padding: var(--s-5) var(--s-6) var(--s-5) 0;
  font-family: var(--font-cond); font-weight: 600; font-size: 1.1875rem; position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 4px; top: 50%; width: 11px; height: 1px;
  background: var(--c-ink-800);
}
.faq summary::before {
  content: ""; position: absolute; right: 9px; top: 50%; width: 1px; height: 11px;
  margin-top: -5px; background: var(--c-ink-800); transition: opacity .15s;
}
.faq details[open] summary::before { opacity: 0; }
.faq details > div { padding: 0 var(--s-6) var(--s-5) 0; max-width: var(--measure); }
.faq details > div > :last-child { margin-bottom: 0; }

/* Handlungsaufforderung: volle dunkle Fläche, randlos */
.cta { background: var(--bg-inverse); color: var(--text-inverse); padding: var(--s-8) 0; border-top: 0; }
.cta h2 { color: var(--c-white); }
.cta p { color: var(--text-inverse-muted); }
.cta .tag { color: var(--mark-inverse); }

/* Seitenkopf der Unterseiten */
.page-head { padding: var(--s-8) 0 var(--s-7); border-bottom: 1px solid var(--c-ink-800); }
.page-head h1 { max-width: 18ch; }
.page-head .lead { margin-bottom: 0; }

/* Porträt */
.portrait-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-7); align-items: end; }
.portrait { margin: 0; }
.portrait img { display: block; width: 240px; height: 300px; object-fit: cover; object-position: center top; filter: grayscale(1) contrast(1.04); }

/* Fließtext der Rechtsseiten */
.prose h2 { margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.prose h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.prose h3 { margin-top: var(--s-6); }
.prose address { font-style: normal; margin-bottom: var(--s-4); }

/* ------------------------------------------------------ 6  Hilfsklassen */

.mb-0 { margin-bottom: 0; }
.mt-6 { margin-top: var(--s-6); }
.mt-7 { margin-top: var(--s-7); }
.rule { border: 0; border-top: 1px solid var(--line); margin: var(--s-6) 0; }

/* ----------------------------------------------------- 7  Medienabfragen */

@media (max-width: 1080px) {
  :root { --rail: 116px; }
}
@media (max-width: 980px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { grid-template-columns: 1fr; gap: var(--s-6); }
  .hero__grid { grid-template-columns: 1fr; gap: var(--s-7); }
}
@media (max-width: 1060px) {
  .nav-toggle { display: block; }
  .nav {
    position: fixed; inset: 68px 0 auto 0; flex-direction: column; align-items: stretch;
    gap: 0; background: var(--bg); border-bottom: 1px solid var(--c-ink-800);
    padding: 0 var(--s-6) var(--s-5); box-shadow: var(--sh-raised);
  }
  .nav[hidden] { display: none; }
  .nav a { padding: var(--s-4) 0; border-bottom: 1px solid var(--line); font-size: 1.25rem; }
  .nav .btn { margin-top: var(--s-4); justify-content: center; }
}
@media (max-width: 760px) {
  /* Umgebrochene Trennpunkte am Zeilenanfang sehen aus wie ein Fehler. */
  .specbar span + span::before { content: none; }
  .specbar__inner { gap: 2px var(--s-5); }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .grid-2 > .block + .block, .grid-3 > .block + .block, .grid-4 > .block + .block {
    padding-left: 0; border-left: 0; margin-left: 0;
  }
  .grid-2 > .block, .grid-3 > .block, .grid-4 > .block { padding-right: 0; }
  /* Die Marginalspalte klappt über den Inhalt, statt ihn zu quetschen. */
  .head, .railed, .steps > li, .rows > li { grid-template-columns: 1fr; gap: var(--s-3); }
  .steps > li::before { padding-top: 0; }
  .chain { grid-template-columns: 1fr; border-top-width: 1px; }
  .chain > li { border-right: 0; border-bottom: 1px solid var(--line); padding-right: 0; }
  .chain > li:last-child { border-bottom: 0; }
  .portrait-head { grid-template-columns: 1fr; }
  .portrait { order: -1; }
  .portrait img { width: 150px; height: 188px; }
  section { padding: var(--s-8) 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
@media (prefers-contrast: more) {
  :root { --line: var(--c-grey-400); --text-muted: var(--c-ink-700); }
}
@media print {
  .site-header, .site-footer, .nav-toggle, .cta, .skip { display: none !important; }
  body { font-size: 10.5pt; }
  section { padding: 10pt 0; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8.5pt; color: #555; }
}

/* ===========================================================================
   Insights
   Dieselbe Formensprache wie der Rest der Seite: Zeilen und Haarlinien statt
   Karten, Marginalspalte links, Farbe nur für Bedeutung. Status-Chips sind
   deshalb unbunt - Farbe bleibt den Evidenzgraden vorbehalten.
   =========================================================================== */

.insight-list { list-style: none; margin: 0; padding: 0; max-width: none; border-top: 1px solid var(--c-ink-800); }
.insight-row {
  display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); column-gap: var(--s-6);
  margin: 0; padding: var(--s-6) 0; border-bottom: 1px solid var(--line);
}
.insight-row__i {
  font-family: var(--font-mono); font-size: var(--t-label-size); font-weight: 600;
  letter-spacing: .08em; color: var(--mark); padding-top: 9px;
}
.insight-row__t { font-size: clamp(1.35rem, 1.15rem + .8vw, 1.75rem); line-height: 1.18; margin: 0; }
.insight-row__t a { color: var(--c-ink-800); text-decoration: none; }
.insight-row__t a:hover { color: var(--mark); text-decoration: underline; text-decoration-color: var(--mark); }
.insight-row__d { color: var(--c-ink-700); margin: var(--s-3) 0 var(--s-3); max-width: 62ch; }
.insight-row__m {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-5); margin: 0;
  font-family: var(--font-mono); font-size: var(--t-data-size); color: var(--text-muted);
}
.status-chip {
  display: inline-block; border: 1px solid var(--c-ink-800); color: var(--c-ink-800);
  font-family: var(--font-mono); font-size: .6875rem; font-weight: 600; letter-spacing: .05em;
  padding: 1px 6px; line-height: 1.4;
}

/* Beitragsseite: Marginalspalte links, Lesespalte rechts */
.article { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); column-gap: var(--s-6); }
.article__meta { display: flex; flex-direction: column; gap: var(--s-2); padding-top: 6px; }
.article__meta a.tag { text-decoration: none; }
.article__meta a.tag:hover { text-decoration: underline; }
.page-head .article h1 { max-width: 30ch; }

.byline { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); margin: var(--s-5) 0 0; }
.byline > div { display: flex; gap: var(--s-2); align-items: baseline; }
.byline dt {
  font-family: var(--font-mono); font-size: var(--t-label-size); letter-spacing: var(--t-label-ls);
  text-transform: uppercase; font-weight: 600; color: var(--text-muted);
}
.byline dd { margin: 0; font-size: var(--t-small-size); }

/* Lesetypografie des Beitragstexts */
.prose-article { max-width: var(--measure); }
.prose-article > * + * { margin-top: var(--s-4); }
.prose-article p, .prose-article ul, .prose-article ol { margin-bottom: 0; }
.prose-article li { margin-bottom: var(--s-2); }
.prose-article h2 {
  margin: var(--s-8) 0 0; padding-top: var(--s-5); border-top: 1px solid var(--line);
}
.prose-article > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose-article h3 { margin-top: var(--s-6); }
.prose-article code { font-family: var(--font-mono); font-size: .9em; background: var(--bg-field); padding: 1px 4px; }
.prose-article blockquote { margin-top: var(--s-6); }
.prose-article > .rule { margin: var(--s-7) 0 0; }

/* Typisiertes Beispiel: abgesetzt durch Fläche und Kopflinie, nicht durch Farbe */
.example { margin-top: var(--s-6); background: var(--bg-band); border-top: 2px solid var(--c-ink-800); padding: var(--s-5); }
.example > * + * { margin-top: var(--s-3); }
.example p, .example ul, .example ol { margin-bottom: 0; }
.example__title { font-family: var(--font-cond); font-weight: 600; font-size: 1.1875rem; line-height: 1.25; }

/* Quellenverzeichnis */
.sources ul, .sources ol {
  list-style: none; counter-reset: quelle; padding: 0; margin: 0; max-width: none;
  border-top: 1px solid var(--line);
}
.sources li {
  counter-increment: quelle; display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--s-4);
  margin: 0; padding: var(--s-3) 0; border-bottom: 1px solid var(--line);
  font-size: var(--t-small-size); overflow-wrap: anywhere;
}
.sources li::before { content: "[" counter(quelle) "]"; font-family: var(--font-mono); color: var(--text-muted); }

/* Schlusstext über dem Button */
.cta__text p { font-size: var(--t-lead-size); line-height: var(--t-lead-lh); color: var(--text-inverse); max-width: 58ch; }
.cta__text p + p { margin-top: var(--s-3); }

/* Vor/Zurück */
.article-nav { border-top: 1px solid var(--line); }
.article-nav__inner { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); padding-block: var(--s-6); }
.article-nav a { display: block; text-decoration: none; color: var(--c-ink-800); }
.article-nav a span {
  display: block; margin-bottom: var(--s-2); font-family: var(--font-mono); font-size: var(--t-label-size);
  letter-spacing: var(--t-label-ls); text-transform: uppercase; color: var(--text-muted);
}
.article-nav a strong { font-family: var(--font-cond); font-size: 1.125rem; font-weight: 600; line-height: 1.25; }
.article-nav a:hover strong { color: var(--mark); }
.article-nav__prev { grid-column: 1; }
.article-nav__all { grid-column: 2; text-align: center; }
.article-nav__next { grid-column: 3; text-align: right; }

/* Interne Vorschau - erscheint nie in website/ */
.preview-note {
  background: var(--c-ink-800); color: var(--c-white);
  font-family: var(--font-mono); font-size: var(--t-label-size); letter-spacing: var(--t-label-ls);
  text-transform: uppercase; font-weight: 600;
}
.preview-note .container { padding-top: 8px; padding-bottom: 8px; }

@media (max-width: 760px) {
  .insight-row, .article { grid-template-columns: 1fr; row-gap: var(--s-3); }
  .insight-row__i { padding-top: 0; }
  .article__meta { flex-direction: row; flex-wrap: wrap; gap: var(--s-2) var(--s-4); padding-top: 0; }
  .article__meta:empty { display: none; }
  .article-nav__inner { grid-template-columns: 1fr; gap: var(--s-5); }
  .article-nav__prev, .article-nav__all, .article-nav__next { grid-column: auto; text-align: left; }
  .sources li { grid-template-columns: 2.5rem minmax(0, 1fr); }
}

/* Lange deutsche Komposita („Nachhaltigkeitsberichterstattung“) reißen auf schmalen
   Bildschirmen große Lücken. Automatische Silbentrennung ändert nur den Umbruch,
   nicht den Text; lang="de" ist im Dokument gesetzt. Überschriften bleiben ausgenommen. */
@media (max-width: 760px) {
  p, li, blockquote, .lead { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 10 4 4; }
}

/* ===========================================================================
   Hilfsklassen statt style-Attributen. Die Content-Security-Policy (style-src 'self')
   blockiert Inline-Styles; pruefen.py meldet jeden Rückfall.
   =========================================================================== */
.site-footer__claim { margin-top: var(--s-4); max-width: 36ch; }
.site-footer__legal .site-footer__abgrenzung { margin-left: auto; }
.text-mark { color: var(--mark); }
.split--center { align-items: center; }
.actions.actions--flush { margin: 0; }
.link-arrow.link-arrow--inverse { color: var(--c-white); border-bottom-color: var(--mark-inverse); }
.link-arrow.link-arrow--inverse:hover { color: var(--mark-inverse); }
.grid.grid--gap-3 { gap: var(--s-3); }
.grid > .block.block--compact { padding: var(--s-4); }
.col-stufe { width: 11em; }
.th-strong { font-weight: 600; }
address.address-plain { font-style: normal; color: var(--text-muted); }
.container.pad-block-8 { padding-block: var(--s-8); }

/* ===========================================================================
   Grafiken in Beiträgen (build/insights_grafiken.py)
   Unbunt, Haarlinien, Mono-Beschriftung. Farbe nur als Markierung eines Punkts.
   =========================================================================== */
.prose-article > .gfx { margin-top: var(--s-7); }
.prose-article > .gfx + * { margin-top: var(--s-7); }
.gfx { margin-inline: 0; margin-bottom: 0; padding-top: var(--s-5); border-top: 2px solid var(--c-ink-800); max-width: none; }
.gfx__kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-4); margin-bottom: var(--s-5); }
.gfx__titel { font-family: var(--font-cond); font-weight: 600; font-size: 1.1875rem; line-height: 1.25; color: var(--c-ink-800); }
.gfx__beschreibung { font-size: var(--t-small-size); color: var(--text-muted); margin: calc(-1 * var(--s-3)) 0 var(--s-4); }
.gfx__quelle { font-family: var(--font-mono); font-size: var(--t-label-size); line-height: 1.5; color: var(--text-muted); margin: var(--s-4) 0 0; max-width: none; }
.gfx__quelle a { color: inherit; }
.gfx ul, .gfx ol, .gfx dl { list-style: none; padding: 0; margin: 0; max-width: none; }
.gfx li { margin: 0; }
.gfx dd { margin: 0; }

/* Drei Spalten, Ungleichheitszeichen zwischen den ersten beiden */
.gfx-spalten { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) minmax(0, 1fr); border-block: 1px solid var(--line); }
.gfx-spalte { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-4) var(--s-4) var(--s-5) 0; }
.gfx-spalte + .gfx-spalte { border-left: 1px solid var(--line); padding-left: var(--s-4); }
.gfx-spalten__ungleich { align-self: center; padding: 0 var(--s-4); font-family: var(--font-cond); font-size: 2.25rem; line-height: 1; color: var(--mark); }
.gfx-spalte__k { font-family: var(--font-mono); font-size: var(--t-label-size); letter-spacing: .06em; text-transform: uppercase; font-weight: 600; color: var(--c-ink-800); }
.gfx-spalte__t { font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--c-ink-700); }

/* Zeitleiste: senkrechte Linie, quadratische Marken, letzter Punkt = Stand */
.gfx-zeit { border-left: 1px solid var(--line-strong); margin-left: 5px; }
.gfx-zeit__punkt { position: relative; display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); column-gap: var(--s-5); padding: 0 0 var(--s-5) var(--s-5); }
.gfx-zeit__punkt:last-child { padding-bottom: 0; }
.gfx-zeit__punkt::before { content: ""; position: absolute; left: -6px; top: .3em; width: 11px; height: 11px; background: var(--c-white); border: 2px solid var(--c-ink-800); }
.gfx-zeit__punkt:last-child::before { background: var(--mark); border-color: var(--mark); }
.gfx-zeit__datum { grid-column: 1; grid-row: 1 / span 3; font-family: var(--font-mono); font-size: var(--t-data-size); color: var(--c-ink-800); padding-top: 1px; }
.gfx-zeit__text, .gfx-zeit__detail, .gfx-zeit__quelle { grid-column: 2; }
.gfx-zeit__text { font-weight: 600; line-height: 1.35; }
.gfx-zeit__detail { font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--c-ink-700); margin-top: 2px; }
.gfx-zeit__quelle { font-family: var(--font-mono); font-size: var(--t-label-size); color: var(--text-muted); margin-top: var(--s-2); }
.gfx-zeit__quelle a { color: inherit; }

/* Kennzahlen */
.gfx-fakten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.gfx-fakt { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-4) var(--s-5) var(--s-2) 0; }
.gfx-fakt + .gfx-fakt { border-left: 1px solid var(--line); padding-left: var(--s-5); }
.gfx-fakt__wert { font-family: var(--font-cond); font-weight: 600; font-size: clamp(1.45rem, 1.25rem + .6vw, 1.75rem); line-height: 1.1; letter-spacing: -.015em; color: var(--c-ink-900); font-variant-numeric: tabular-nums; }
.gfx-fakt__text { font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--c-ink-700); }

/* Balken: SVG mit Länge als Attribut, Farbe aus dem Stylesheet */
.gfx-balken__zeile { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr) 3.5rem; gap: var(--s-4); align-items: center; padding: var(--s-3) 0; border-top: 1px solid var(--line); }
.gfx-balken__zeile:last-child { border-bottom: 1px solid var(--line); }
.gfx-balken__label { font-size: var(--t-small-size); line-height: 1.35; }
.gfx-balken__svg { display: block; width: 100%; height: 14px; }
.gfx-balken__spur { fill: var(--bg-field); }
.gfx-balken__wert { fill: var(--c-ink-800); }
.gfx-balken__zeile:first-child .gfx-balken__wert { fill: var(--mark); }
.gfx-balken__zahl { font-family: var(--font-mono); font-size: var(--t-data-size); text-align: right; font-variant-numeric: tabular-nums; }

/* Fluss: Quellen → Evidence Base → Adressaten */
.gfx-fluss { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.1fr) auto minmax(0, 1fr); align-items: center; gap: var(--s-3); }
.gfx-fluss__gruppe { display: flex; flex-direction: column; gap: var(--s-2); }
.gfx-fluss__knoten { border: 1px solid var(--line-strong); padding: var(--s-2) var(--s-3); font-family: var(--font-mono); font-size: var(--t-data-size); color: var(--c-ink-800); }
.gfx-fluss__gruppe--ziele .gfx-fluss__knoten { border-color: var(--c-ink-800); }
.gfx-fluss__mitte { background: var(--c-ink-800); color: var(--c-white); border-top: 3px solid var(--mark-inverse); padding: var(--s-6) var(--s-4); text-align: center; font-family: var(--font-cond); font-weight: 600; font-size: 1.25rem; line-height: 1.15; }
.gfx-fluss__pfeil { font-family: var(--font-mono); font-size: 1.25rem; color: var(--mark); text-align: center; }
.gfx-fluss__pfeil-hoch { display: none; }

/* Vier Ebenen als Treppe - dieselbe Stufe wie in der Bildmarke */
.gfx-ebenen { display: grid; gap: var(--s-2); counter-reset: ebene; }
.gfx-ebenen__stufe { counter-increment: ebene; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); column-gap: var(--s-3); padding: var(--s-3) var(--s-4); background: var(--bg-band); border-left: 2px solid var(--c-ink-800); }
.gfx-ebenen__stufe:nth-child(2) { margin-left: 8%; }
.gfx-ebenen__stufe:nth-child(3) { margin-left: 16%; }
.gfx-ebenen__stufe:nth-child(4) { margin-left: 24%; border-left-color: var(--mark); }
.gfx-ebenen__stufe::before { content: counter(ebene, decimal-leading-zero); grid-column: 1; grid-row: 1 / span 2; font-family: var(--font-mono); font-size: var(--t-label-size); color: var(--text-muted); padding-top: 4px; }
.gfx-ebenen__name, .gfx-ebenen__frage { grid-column: 2; }
.gfx-ebenen__name { font-family: var(--font-cond); font-weight: 600; font-size: 1.0625rem; line-height: 1.3; }
.gfx-ebenen__frage { font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--c-ink-700); }

/* Ein Datenpunkt, fünf Nutzungen */
.gfx-verteilung { display: grid; grid-template-columns: minmax(0, 13.5rem) minmax(0, 1fr); border-top: 1px solid var(--line); }
.gfx-verteilung__zentrum { display: flex; flex-direction: column; justify-content: center; gap: var(--s-2); padding: var(--s-5); background: var(--c-ink-800); color: var(--c-white); }
.gfx-verteilung__zentrum .tag { color: var(--mark-inverse); }
.gfx-verteilung__name { font-family: var(--font-cond); font-weight: 600; font-size: 1.375rem; line-height: 1.1; overflow-wrap: anywhere; }
.gfx-verteilung__zeile { position: relative; display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: var(--s-4); padding: var(--s-3) 0 var(--s-3) var(--s-5); border-bottom: 1px solid var(--line); }
.gfx-verteilung__zeile::before { content: ""; position: absolute; left: 0; top: 50%; width: var(--s-3); border-top: 1px solid var(--c-ink-800); }
.gfx-verteilung__zeile dt { font-family: var(--font-mono); font-size: var(--t-data-size); color: var(--c-ink-800); }
.gfx-verteilung__zeile dd { font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--c-ink-700); }

/* Evidence-Card */
.gfx-karte { border: 1px solid var(--c-ink-800); }
.gfx-karte__zeile { display: grid; grid-template-columns: 11.5rem minmax(0, 1fr); gap: var(--s-4); padding: var(--s-3) var(--s-4); border-top: 1px solid var(--line); }
.gfx-karte__zeile:first-child { border-top: 0; background: var(--bg-band); }
.gfx-karte__zeile dt { font-family: var(--font-mono); font-size: var(--t-label-size); letter-spacing: .06em; text-transform: uppercase; font-weight: 600; color: var(--c-ink-800); padding-top: 2px; }
.gfx-karte__zeile dd { font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--c-ink-700); }

@media (max-width: 760px) {
  .gfx-spalten { grid-template-columns: 1fr; }
  .gfx-spalte + .gfx-spalte { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; }
  .gfx-spalten__ungleich { padding: 0 0 var(--s-2); }
  .gfx-zeit__punkt { grid-template-columns: 1fr; }
  .gfx-zeit__datum { grid-row: auto; }
  .gfx-zeit__datum, .gfx-zeit__text, .gfx-zeit__detail, .gfx-zeit__quelle { grid-column: 1; }
  .gfx-fakten { grid-template-columns: 1fr; }
  .gfx-fakt { padding: var(--s-4) 0; }
  .gfx-fakt + .gfx-fakt { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; }
  .gfx-balken__zeile { grid-template-columns: minmax(0, 1fr) 3.5rem; row-gap: var(--s-2); }
  .gfx-balken__label { grid-column: 1 / -1; }
  .gfx-fluss { grid-template-columns: 1fr; }
  .gfx-fluss__gruppe { flex-direction: row; flex-wrap: wrap; }
  .gfx-fluss__pfeil-quer { display: none; }
  .gfx-fluss__pfeil-hoch { display: inline; }
  .gfx-ebenen__stufe:nth-child(2) { margin-left: var(--s-3); }
  .gfx-ebenen__stufe:nth-child(3) { margin-left: var(--s-5); }
  .gfx-ebenen__stufe:nth-child(4) { margin-left: var(--s-6); }
  .gfx-verteilung { grid-template-columns: 1fr; }
  .gfx-verteilung__zeile { grid-template-columns: 1fr; gap: 2px; }
  .gfx-karte__zeile { grid-template-columns: 1fr; gap: 2px; }
}

/* Descriptor im Fuß */
.site-footer__descriptor {
  margin: var(--s-3) 0 0; max-width: none; color: var(--mark-inverse);
  font-family: var(--font-mono); font-size: var(--t-label-size); letter-spacing: var(--t-label-ls);
  text-transform: uppercase; font-weight: 600;
}

/* Kopf: Zwischen 1061 und 1199 px reicht die Breite nicht für Descriptor und volle Navigation.
   Darunter klappt die Navigation ein, dann ist wieder Platz. */
@media (min-width: 1061px) and (max-width: 1199px) {
  .site-header__descriptor { display: none; }
}
/* Smartphone: Descriptor einzeilig unter dem Logo, innerhalb der Kopfhöhe */
@media (max-width: 560px) {
  .site-header__brand { flex-direction: column; align-items: flex-start; gap: 3px; }
  .site-header__logo svg { width: 172px; }
  .site-header__descriptor { padding-left: 0; border-left: 0; font-size: 0.5625rem; letter-spacing: .02em; }
  .site-header__descriptor span { display: inline; }
}