/* ==========================================================================
   GREEN · Energieberatung für Nichtwohngebäude · green-nwg.de

   Designsystem „Bühne und Beweis"
   Weite helle Flächen, in die sich ganzseitige beinahe-schwarze Kapitel
   schieben. Ein Objekt pro Bildschirm, eine Aussage pro Objekt.
   Selbst gehostete Schriften, keine externen Requests, kein Tracking.

   Reihenfolge: Schrift · Tokens · Basis · Typografie · Raster · Chrom ·
   Kapitel · Bühne · Bauteile · Formulare · Bewegung · Randfälle
   ========================================================================== */

/* ---------- Schrift -------------------------------------------------------
   Auf Apple-Geräten liefert -apple-system die Systemschrift San Francisco
   samt optischer Größen. Überall sonst greift das selbst gehostete Inter,
   das im Zeichenbild sehr nah daran liegt. Eine Datei, variabel im Gewicht,
   deshalb reicht ein einziger Download für alle Schriftstärken.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens -------------------------------------------------------- */
:root {
  /* Grundflächen. Der zweite Ton ist ein neutrales Grau mit einem Hauch
     Grün – gerade genug, dass er zur Marke gehört, statt kalt zu wirken. */
  --w: #ffffff;
  --w2: #f2f4f2;
  --w3: #e8ebe7;

  /* Schrift auf hell. Alle Werte gegen WCGA 2.2 AA gerechnet, siehe
     quellen/kontrast.py – nicht nach Augenmaß gesetzt. */
  --ink: #181715;      /* 17,9:1 auf Weiß */
  --ink-2: #5c5f58;    /*  6,5:1 auf Weiß */
  --ink-3: #6d7069;    /*  5,0:1 auf Weiß, 4,6:1 auf dem zweiten Grund */
  --line: rgba(24, 23, 21, 0.12);
  --line-soft: rgba(24, 23, 21, 0.07);

  /* Dunkle Kapitel */
  --d: #0a0a09;
  --d2: #161714;
  --d3: #232420;
  --d-ink: #f5f5f0;    /* 18,1:1 auf --d */
  --d-ink-2: #a2a69b;  /*  8,0:1 auf --d */
  --d-line: rgba(245, 245, 240, 0.14);
  --d-line-soft: rgba(245, 245, 240, 0.08);

  /* Marke. Das Logogrün trägt Flächen und Grafik, für Text auf Weiß ist es
     zu hell – dafür gibt es die dunkle Variante. */
  --green: #31a933;
  --green-text: #1c7a22;
  --green-deep: #14591a;
  --green-bright: #5fd463;
  --green-wash: #eaf6ea;

  /* Thermografie-Rampe. Nur für Messgrafik, nie für Text. */
  --th-0: #1b3a8f;
  --th-1: #2f8fbf;
  --th-2: #46b26a;
  --th-3: #d8b13a;
  --th-4: #e2622f;
  --th-5: #c9243f;

  --sans: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text',
    'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Maße. 980 px ist die klassische Lesebreite, 1280 px die weite Bühne. */
  --wrap: 980px;
  --wrap-wide: 1280px;
  --wrap-text: 700px;
  --gut: clamp(1.25rem, 5vw, 2.5rem);
  --nav-h: 48px;

  /* Rundungen: klein für Bedienelemente, groß für Flächen, Pille für Knöpfe. */
  --r-s: 12px;
  --r-m: 18px;
  --r-l: 28px;
  --r-xl: 36px;
  --r-pill: 980px;

  /* Bewegung. Die erste Kurve ist die weiche Landung für alles Sichtbare,
     die zweite die schnelle Antwort auf einen Druck. */
  --ease: cubic-bezier(0.28, 0.11, 0.32, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --press: cubic-bezier(0.4, 0, 0.2, 1);

  --shadow-s: 0 1px 2px rgba(24, 23, 21, 0.06), 0 4px 12px -4px rgba(24, 23, 21, 0.10);
  --shadow-m: 0 2px 6px rgba(24, 23, 21, 0.07), 0 18px 36px -14px rgba(24, 23, 21, 0.18);
  --shadow-l: 0 4px 14px rgba(24, 23, 21, 0.08), 0 44px 88px -32px rgba(24, 23, 21, 0.28);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1rem);
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.0625rem;        /* 17 px, wie in Apples Fließtext */
  line-height: 1.5;
  letter-spacing: -0.016em;
  font-synthesis-weight: none;
  color: var(--ink);
  background: var(--w);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

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

/* ---------- Oberflächen, die der Browser stellt ---------------------------
   Auswahl, Cursor, Fokusring und Bildlaufleiste gehören genauso zum
   Entwurf wie alles selbst Gezeichnete.
   -------------------------------------------------------------------------- */
::selection {
  background: rgba(49, 169, 51, 0.24);
  color: var(--ink);
}

.chapter--dark ::selection {
  background: rgba(95, 212, 99, 0.30);
  color: var(--d-ink);
}

:root {
  accent-color: var(--green-text);
  caret-color: var(--green-text);
  scrollbar-color: rgba(24, 23, 21, 0.28) transparent;
  scrollbar-width: thin;
}

::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(24, 23, 21, 0.24);
  border: 3px solid transparent;
  border-radius: 999px;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(24, 23, 21, 0.42);
  background-clip: content-box;
}

:focus-visible {
  outline: 2px solid var(--green-text);
  outline-offset: 3px;
  border-radius: 4px;
}

.chapter--dark :focus-visible {
  outline-color: var(--green-bright);
}

.skip {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 200;
  transform: translate(-50%, -110%);
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--r-s) var(--r-s);
  background: var(--ink);
  color: var(--w);
  font-size: 0.875rem;
  text-decoration: none;
  transition: transform 0.2s var(--ease);
}

.skip:focus {
  transform: translate(-50%, 0);
}

/* ---------- Typografie ----------------------------------------------------
   Laufweite ist größenabhängig: je größer der Grad, desto enger. Ein fester
   Wert für alle Größen wäre irgendwo immer falsch.
   -------------------------------------------------------------------------- */
h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 600;
  text-wrap: balance;
}

/* Keine automatische Trennung.

   `hyphens: auto` hängt davon ab, ob der Browser ein deutsches Trennwörterbuch
   mitbringt. Fehlt es, trennt er nach Gutdünken – gesehen: „Nichtw-ohngebäude",
   „Beratungsho-norars". Deshalb setzen wir die Trennstellen selbst, und zwar
   nur dort, wo ein Wort eine schmale Spalte wirklich sprengt (weiches
   Trennzeichen im Text, siehe shy() in quellen/build.py). */
h1,
h2,
h3,
h4,
p,
li,
figcaption,
dd {
  -webkit-hyphens: manual;
  hyphens: manual;
}

p {
  margin: 0;
}

.t-hero {
  font-size: clamp(2.75rem, 7vw, 5.5rem);
  line-height: 1.04;
  letter-spacing: -0.021em;
  font-weight: 600;
}

.t-h2 {
  font-size: clamp(2rem, 4.6vw, 3.5rem);
  line-height: 1.07;
  letter-spacing: -0.019em;
  font-weight: 600;
}

.t-h3 {
  font-size: clamp(1.375rem, 2.2vw, 1.875rem);
  line-height: 1.16;
  letter-spacing: -0.014em;
  font-weight: 600;
}

.t-h4 {
  font-size: 1.1875rem;
  line-height: 1.26;
  letter-spacing: -0.012em;
  font-weight: 600;
}

.t-lead {
  font-size: clamp(1.1875rem, 1.8vw, 1.5rem);
  line-height: 1.38;
  letter-spacing: -0.012em;
  font-weight: 400;
  color: var(--ink-2);
  text-wrap: pretty;
}

.t-body {
  font-size: 1.0625rem;
  line-height: 1.55;
  letter-spacing: -0.016em;
  text-wrap: pretty;
}

.t-small {
  font-size: 0.9375rem;
  line-height: 1.5;
  letter-spacing: -0.01em;
}

/* Kleine Schrift braucht etwas mehr Luft zwischen den Buchstaben, nicht
   weniger – deshalb hier positive Laufweite. */
.t-fine {
  font-size: 0.8125rem;
  line-height: 1.45;
  letter-spacing: 0.004em;
  color: var(--ink-3);
}

.t-measure {
  max-width: var(--wrap-text);
}

.t-dim {
  color: var(--ink-2);
}

.t-center {
  text-align: center;
}

.t-center .t-measure,
.t-center .t-lead {
  margin-inline: auto;
}

/* Aufeinanderfolgende Absätze brauchen Luft. Ohne diese Regel liefen die
   Fließtexte auf den Branchen- und Stadtseiten zusammen. */
.split > div > p + p,
.chapter > .wrap > p + p,
.stack > p + p,
.faq__answer p + p {
  margin-top: 0.9rem;
}

.split > div > h2 + p,
.split > div > h3 + p {
  margin-top: 0.85rem;
}

.chapter__head .t-h2 + .t-lead,
.chapter__head .t-h2 + p,
.split > div > .t-h2 + .t-lead,
.split > div > .t-h2 + p,
.pagehead .t-h2 + .t-lead,
.prose .t-h3 + p {
  margin-top: 0.85rem;
}

.t-lead + .actions,
p + .actions,
.t-lead + .chips,
p + .chips {
  margin-top: 2rem;
}

/* Zahlen in Tabellen und Messwerten laufen sonst unruhig. */
.num,
table,
.stat__value,
.calc output {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

strong,
b {
  font-weight: 600;
}

/* ---------- Verweise ------------------------------------------------------ */
a {
  color: var(--green-text);
  text-decoration-color: rgba(28, 122, 34, 0.35);
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
  transition: color 0.18s var(--press), text-decoration-color 0.18s var(--press);
}

a:hover {
  color: var(--green-deep);
  text-decoration-color: currentColor;
}

.chapter--dark a:not(.btn) {
  color: var(--green-bright);
  text-decoration-color: rgba(95, 212, 99, 0.4);
}

.chapter--dark a:not(.btn):hover {
  color: #8ce68f;
}

/* Der Pfeilverweis: Apples ruhigste Handlungsaufforderung. Das Zeichen ist
   gezeichnet, kein Schriftglyph, damit Strichstärke und Größe stimmen. */
.arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.34em;
  font-size: 1.0625rem;
  letter-spacing: -0.014em;
  text-decoration: none;
  white-space: nowrap;
}

.arrow::after {
  content: '';
  width: 0.42em;
  height: 0.42em;
  border-right: 1.7px solid currentColor;
  border-top: 1.7px solid currentColor;
  transform: rotate(45deg) translate(-0.04em, 0.04em);
  transition: transform 0.28s var(--ease);
}

.arrow:hover {
  text-decoration: underline;
  text-underline-offset: 0.24em;
}

.arrow:hover::after {
  transform: rotate(45deg) translate(0.1em, -0.1em);
}

/* ---------- Knöpfe -------------------------------------------------------- */
.btn {
  --btn-bg: var(--green-text);
  --btn-fg: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.72em 1.35em;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 400;
  letter-spacing: -0.014em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s var(--press), transform 0.12s var(--press),
    opacity 0.2s var(--press);
}

.btn:hover {
  background: var(--green-deep);
  color: var(--btn-fg);
}

/* Antwort auf den Druck, nicht erst auf das Loslassen. */
.btn:active {
  transform: scale(0.97);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--green-text);
  box-shadow: inset 0 0 0 1px rgba(28, 122, 34, 0.45);
}

.btn--ghost:hover {
  background: rgba(28, 122, 34, 0.07);
  color: var(--green-deep);
  box-shadow: inset 0 0 0 1px rgba(28, 122, 34, 0.7);
}

.btn--ink {
  --btn-bg: var(--ink);
}

.btn--ink:hover {
  background: #000;
}

.chapter--dark .btn {
  --btn-bg: var(--green-bright);
  --btn-fg: var(--d);
}

.chapter--dark .btn:hover {
  background: #86e589;
}

.chapter--dark .btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--d-ink);
  box-shadow: inset 0 0 0 1px rgba(245, 245, 240, 0.28);
}

.chapter--dark .btn--ghost:hover {
  background: rgba(245, 245, 240, 0.08);
  box-shadow: inset 0 0 0 1px rgba(245, 245, 240, 0.5);
}

.btn[disabled],
.btn[aria-disabled='true'] {
  opacity: 0.45;
  pointer-events: none;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.75rem;
}

/* ---------- Raster -------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.wrap--wide {
  max-width: var(--wrap-wide);
}

.wrap--text {
  max-width: calc(var(--wrap-text) + 2 * var(--gut));
}

.chapter {
  position: relative;
  padding-block: clamp(4.5rem, 9vw, 8.5rem);
}

.chapter--tight {
  padding-block: clamp(3.25rem, 6vw, 5.5rem);
}

.chapter--flush {
  padding-block: 0;
}

.chapter--w2 {
  background: var(--w2);
}

.chapter--dark {
  background: var(--d);
  color: var(--d-ink);
}

.chapter--dark .t-lead,
.chapter--dark .t-dim {
  color: var(--d-ink-2);
}

.chapter--dark .t-fine {
  color: var(--d-ink-2);
}

/* Der Kopf eines Kapitels: eine Überschrift, ein Satz. Kein Etikett darüber –
   die Überschrift trägt sich selbst. */
.chapter__head {
  display: grid;
  gap: 1rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.chapter__head .t-lead {
  max-width: 62ch;
}

.stack {
  display: grid;
  gap: 1.25rem;
}

.stack--s {
  gap: 0.75rem;
}

.stack--l {
  gap: 2rem;
}

.cols {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

@media (min-width: 700px) {
  .cols--2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .cols--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 980px) {
  .cols--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 700px) and (max-width: 979px) {
  .cols--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Zwei ungleiche Spalten: Text neben Objekt. */
.split {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

@media (min-width: 860px) {
  .split {
    grid-template-columns: 1fr 1fr;
  }

  .split--text-first > :first-child {
    order: 0;
  }

  .split--object-first > :first-child {
    order: 1;
  }
}

.wrap:has(> .cols--3),
.wrap:has(> .cols--4),
.wrap:has(> .steps--4),
.wrap:has(> .bento),
.wrap:has(> .stats--4) {
  max-width: var(--wrap-wide);
}

/* ---------- Kopfzeile ----------------------------------------------------
   Durchscheinende Leiste, unter der der Inhalt hindurchläuft. Kein
   deckender Streifen, der Höhe frisst.
   -------------------------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-h);
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: saturate(100%) blur(20px);
  backdrop-filter: saturate(100%) blur(20px);
  border-bottom: 1px solid rgba(24, 23, 21, 0.08);
}

/* Über einem dunklen Kapitel dreht sich die Leiste mit. Ohne das nimmt die
   durchscheinende Fläche die Farben des Wärmebilds an und wird zum
   schmutzigen Band, und über dem schwarzen Abschlusskapitel liest die
   Überschrift durch die Leiste hindurch. */
.nav[data-on-dark='true'] {
  background: rgba(10, 10, 9, 0.86);
  border-bottom-color: rgba(245, 245, 240, 0.12);
}

.nav[data-on-dark='true'] .nav__links a {
  color: rgba(245, 245, 240, 0.84);
}

.nav[data-on-dark='true'] .nav__links a:hover,
.nav[data-on-dark='true'] .nav__links a[aria-current='page'] {
  color: var(--d-ink);
}

.nav[data-on-dark='true'] .nav__toggle {
  color: var(--d-ink);
}

.nav[data-on-dark='true'] .nav__cta {
  background: var(--green-bright);
  color: var(--d);
}

.nav[data-on-dark='true'] .nav__cta:hover {
  background: #86e589;
}

.nav[data-on-dark='true'] :focus-visible {
  outline-color: var(--green-bright);
}

/* Der Farbwechsel selbst darf nicht springen. */
.nav,
.nav__links a,
.nav__cta,
.nav__toggle {
  transition: background-color 0.35s var(--press), color 0.35s var(--press),
    border-color 0.35s var(--press);
}

@media (prefers-reduced-transparency: reduce) {
  .nav[data-on-dark='true'] {
    background: var(--d);
  }
}

@media (prefers-contrast: more) {
  .nav[data-on-dark='true'] {
    background: var(--d);
  }
}

.nav__in {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: 100%;
  max-width: var(--wrap-wide);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.nav__logo {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  text-decoration: none;
}

.nav__logo img {
  width: auto;
  height: 26px;
}

/* Das Flex-Kind der Kopfzeile ist das <nav>, nicht die Liste darin. Ohne diese
   Regel bleibt es auf Inhaltsbreite: die Links rutschen nach links und die
   Schaltflaeche klebt daran, statt am rechten Rand zu sitzen. */
.nav__in > nav {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  min-width: 0;
}

.nav__links {
  display: none;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  gap: clamp(0.75rem, 2.4vw, 2rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__links a {
  display: block;
  padding: 0.35rem 0.1rem;
  color: rgba(24, 23, 21, 0.82);
  font-size: 0.8125rem;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.18s var(--press);
}

.nav__links a:hover {
  color: var(--ink);
}

.nav__links a[aria-current='page'] {
  color: var(--ink);
  font-weight: 500;
}

.nav__cta {
  flex: 0 0 auto;
  padding: 0.42em 0.95em;
  font-size: 0.8125rem;
}

.nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-inline-start: auto;
  margin-inline-end: -8px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
}

.nav__toggle span {
  position: relative;
  display: block;
  width: 17px;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.34s var(--ease), background-color 0.16s var(--press);
}

.nav__toggle span::before,
.nav__toggle span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 17px;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.34s var(--ease);
}

.nav__toggle span::before {
  top: -5.5px;
}

.nav__toggle span::after {
  top: 5.5px;
}

.nav__toggle[aria-expanded='true'] span {
  background: transparent;
}

.nav__toggle[aria-expanded='true'] span::before {
  transform: translateY(5.5px) rotate(45deg);
}

.nav__toggle[aria-expanded='true'] span::after {
  transform: translateY(-5.5px) rotate(-45deg);
}

/* Das aufgeklappte Menü ist dieselbe Materialschicht wie die Leiste. */
.nav__panel {
  position: fixed;
  /* Bis zum unteren Rand, nicht nur so hoch wie die Punkte: sonst steht die
     Seite darunter offen, der Knopf lag ohne z-index sogar hinter ihr. 90
     hält das Panel unter der Leiste (100), aber über allem Seiteninhalt. */
  inset: var(--nav-h) 0 0 0;
  z-index: 90;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.5rem var(--gut) 2rem;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: saturate(120%) blur(24px);
  backdrop-filter: saturate(120%) blur(24px);
  border-bottom: 1px solid var(--line);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.3s var(--ease), transform 0.34s var(--ease),
    visibility 0s linear 0.34s;
}

.nav__panel[data-open='true'] {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0s;
}

.nav__panel ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* :not(.btn), weil .nav__panel a sonst die Schriftfarbe des Knopfes am Ende
   überschreibt: schwarz auf Grün statt weiß. */
.nav__panel a:not(.btn) {
  display: block;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink);
  font-size: 1.375rem;
  letter-spacing: -0.016em;
  text-decoration: none;
}

/* Im Panel sind ohnehin alle Punkte in --ink gesetzt, eine Farbänderung
   würde die aktuelle Seite also nicht kenntlich machen. Stattdessen ein
   grüner Punkt am Zeilenende, dasselbe Motiv wie im Logo. */
.nav__panel a[aria-current='page'] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 500;
}

.nav__panel a[aria-current='page']::after {
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--green);
}

.nav__panel .btn {
  width: 100%;
  margin-top: 1.5rem;
}

@media (min-width: 940px) {
  .nav__links {
    display: flex;
  }

  .nav__toggle,
  .nav__panel {
    display: none;
  }
}

@media (max-width: 939px) {
  .nav__cta {
    display: none;
  }
}

/* ---------- Bühne (Auftakt) ----------------------------------------------
   Ein Objekt, eine Aussage, viel Luft. Die Fläche darf atmen, deshalb
   steht hier bewusst keine Karte und kein Kasten.
   -------------------------------------------------------------------------- */
.stage {
  position: relative;
  padding-block: clamp(3rem, 6vw, 5rem) clamp(2.5rem, 5vw, 4.5rem);
  text-align: center;
  overflow: clip;
}

.stage__in {
  position: relative;
  z-index: 1;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.stage .t-hero {
  margin-bottom: 1.25rem;
}

.stage .t-lead {
  max-width: 34ch;
  margin-inline: auto;
}

.stage__actions {
  justify-content: center;
  margin-top: 2rem;
}

/* Das Objekt der Auftaktbühne: breit, angeschnitten, ohne Rahmen. */
.stage__object {
  position: relative;
  max-width: var(--wrap-wide);
  margin: clamp(1.25rem, 2.5vw, 2.25rem) auto 0;
  padding-inline: var(--gut);
}

.stage__object svg,
.stage__object img {
  width: 100%;
  height: auto;
}

/* Das Auftaktbild steht ohne Beschriftung. Die Regel .stage__object img
   oben setzt Breite und Höhe, mehr braucht es nicht. */

/* Sekundärzeile unter dem Auftakt: kurze Belege, nebeneinander. */
.stage__proof {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 2.25rem;
  margin-top: 2rem;
  color: var(--ink-2);
}

.stage__proof li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  letter-spacing: -0.008em;
}

.stage__proof {
  margin-block-end: 0;
  padding: 0;
  list-style: none;
}

/* ---------- Kennzahlen ---------------------------------------------------- */
.stats {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  margin: 0;
  padding: 0;
}

@media (min-width: 640px) {
  .stats--3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .stats--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

.stat {
  display: grid;
  gap: 0.5rem;
  text-align: center;
}

.stat__value {
  font-size: clamp(2.75rem, 5.5vw, 4.25rem);
  line-height: 1;
  letter-spacing: -0.025em;
  font-weight: 600;
  color: var(--ink);
}

.chapter--dark .stat__value {
  color: var(--d-ink);
}

.stat__value em {
  font-style: normal;
  color: var(--green-text);
}

.chapter--dark .stat__value em {
  color: var(--green-bright);
}

.stat__label {
  font-size: 0.9375rem;
  line-height: 1.45;
  letter-spacing: -0.008em;
  color: var(--ink-2);
  text-wrap: pretty;
}

.chapter--dark .stat__label {
  color: var(--d-ink-2);
}

/* ---------- Aussage mit einer Zahl ---------------------------------------
   Eine Zahl trägt den Abschnitt, darunter der Weg dahin. Bewusst anders
   gebaut als die Splits, damit sich die Seite nicht wiederholt.
   -------------------------------------------------------------------------- */
.claim {
  display: grid;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}

@media (min-width: 900px) {
  .claim {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: center;
  }
}

.claim__body {
  max-width: 48ch;
}

/* Der Block wurde zuerst nur mit einem Absatz benutzt, deshalb fehlte der
   Abstand zwischen zweien und sie liefen zusammen. */
.claim__body p + p {
  margin-top: 1rem;
}

.claim__value {
  font-size: clamp(5rem, 13vw, 11rem);
  line-height: 0.86;
  letter-spacing: -0.045em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--green-bright);
  margin: 0;
}

.claim .t-h2 {
  margin-bottom: 0.85rem;
}

.claim__steps {
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--d-line);
}

.claim__actions {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.claim__quelle {
  margin-top: 1.75rem;
}

/* ---------- Kacheln ------------------------------------------------------
   Große, ruhige Flächen statt gleich großer Kärtchen. Die Kachel ist ein
   Ausschnitt der Seite, kein Kasten mit Rand.
   -------------------------------------------------------------------------- */
.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border-radius: var(--r-l);
  background: var(--w2);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
}

.chapter--w2 .tile {
  background: var(--w);
}

.chapter--dark .tile {
  background: var(--d2);
}

/* Nur anklickbare Kacheln bewegen sich. Eine Fläche, die nichts tut,
   darf auch nicht so aussehen. */
a.tile,
.tile--link {
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease),
    background-color 0.3s var(--press);
}

a.tile:hover,
.tile--link:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-m);
}

.chapter--dark a.tile:hover {
  background: var(--d3);
  box-shadow: none;
}

.tile__media {
  margin: calc(-1 * clamp(1.75rem, 3vw, 2.5rem));
  margin-bottom: 0.5rem;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--w3);
}

/* Gezeichnetes Objekt statt Foto: es soll auf seiner Fläche stehen, nicht
   formatfüllend beschnitten werden. */
.tile__media--objekt {
  display: grid;
  place-items: end center;
  padding: 7% 7% 0;
  aspect-ratio: 16 / 9;
  background: transparent;
}

.tile__media--objekt svg {
  width: 100%;
  height: auto;
  object-fit: contain;
}

a.tile:hover .tile__media--objekt svg {
  transform: scale(1.02);
}

.tile__media img,
.tile__media svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}

a.tile:hover .tile__media img {
  transform: scale(1.03);
}

.tile__foot {
  margin-top: auto;
  padding-top: 0.75rem;
}

/* Kachelfeld mit ungleichen Größen – die wichtigste Kachel bekommt Platz. */
.bento {
  display: grid;
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .bento {
    grid-template-columns: repeat(2, 1fr);
  }

  .bento__wide {
    grid-column: span 2;
  }
}

@media (min-width: 1040px) {
  .bento {
    grid-template-columns: repeat(3, 1fr);
  }

  .bento__wide {
    grid-column: span 2;
  }

  .bento__tall {
    grid-row: span 2;
  }
}

/* ---------- Listen -------------------------------------------------------- */
.list {
  display: grid;
  gap: 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.list__item {
  display: grid;
  gap: 0.4rem;
}

/* Aufzählung mit gezeichnetem Haken statt Glyphe. */
.ticks {
  display: grid;
  gap: 0.85rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ticks li {
  position: relative;
  padding-inline-start: 1.9rem;
  line-height: 1.5;
}

.ticks li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 0.52em;
  width: 0.72rem;
  height: 0.4rem;
  border-inline-start: 1.8px solid var(--green-text);
  border-block-end: 1.8px solid var(--green-text);
  transform: rotate(-45deg);
}

.chapter--dark .ticks li::before {
  border-color: var(--green-bright);
}

/* Nummerierte Schritte. Die Zahl trägt hier Information: sie ist die
   Reihenfolge, um die es inhaltlich geht. */
.steps {
  counter-reset: step;
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 780px) {
  .steps--4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .steps--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.steps li {
  counter-increment: step;
  display: grid;
  gap: 0.6rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

.chapter--dark .steps li {
  border-color: var(--d-line);
}

.steps li::before {
  content: counter(step);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--green-text);
}

.chapter--dark .steps li::before {
  color: var(--green-bright);
}

/* ---------- Abbildungen --------------------------------------------------- */
.fig {
  margin: 0;
  display: grid;
  gap: 0.85rem;
}

.fig__frame {
  border-radius: var(--r-l);
  background: var(--w2);
  overflow: hidden;
}

.chapter--w2 .fig__frame {
  background: var(--w);
}

.chapter--dark .fig__frame {
  background: var(--d2);
}

.fig__frame > svg,
.fig__frame > img {
  width: 100%;
  height: auto;
}

.fig figcaption {
  font-size: 0.8125rem;
  line-height: 1.45;
  letter-spacing: 0.004em;
  color: var(--ink-3);
}

.chapter--dark .fig figcaption {
  color: var(--d-ink-2);
}

.photo {
  margin: 0;
  display: grid;
  gap: 0.85rem;
}

.photo img {
  width: 100%;
  border-radius: var(--r-l);
  object-fit: cover;
}

.photo figcaption {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--ink-3);
}

/* Ganzflächiges Bild mit Text darüber. Der Verlauf sichert den Kontrast,
   damit die Schrift nicht auf dem hellen Teil des Fotos verschwindet. */
.hero-photo {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  isolation: isolate;
}

.hero-photo img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.hero-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 10, 9, 0.82) 0%,
    rgba(10, 10, 9, 0.45) 42%, rgba(10, 10, 9, 0.05) 100%);
}

.hero-photo__text {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 1;
  padding: clamp(1.5rem, 4vw, 3rem);
  color: var(--d-ink);
}

.hero-photo__text .t-lead {
  color: rgba(245, 245, 240, 0.86);
}

@media (max-width: 600px) {
  .hero-photo img {
    aspect-ratio: 4 / 5;
  }
}

/* ---------- Zitate -------------------------------------------------------- */
.quote {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 1.5rem;
  margin: 0;
  height: 100%;
}

.quote blockquote {
  margin: 0;
  font-size: clamp(1.1875rem, 1.7vw, 1.5rem);
  line-height: 1.35;
  letter-spacing: -0.016em;
  font-weight: 500;
  text-wrap: pretty;
}

.quote figcaption {
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--ink-2);
}

.chapter--dark .quote figcaption {
  color: var(--d-ink-2);
}

.quote__name {
  display: block;
  font-weight: 500;
  color: var(--ink);
}

.chapter--dark .quote__name {
  color: var(--d-ink);
}

/* ---------- Frage und Antwort --------------------------------------------- */
.faq {
  border-top: 1px solid var(--line);
}

.chapter--dark .faq {
  border-color: var(--d-line);
}

.faq details {
  border-bottom: 1px solid var(--line);
}

.chapter--dark .faq details {
  border-color: var(--d-line);
}

.faq summary {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  padding: 1.4rem 0;
  font-size: 1.1875rem;
  line-height: 1.35;
  letter-spacing: -0.014em;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: '';
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  margin-inline-start: auto;
  margin-top: 0.35em;
  background: currentColor;
  transition: transform 0.34s var(--ease);
  /* Gezeichnetes Plus, das sich zum Minus dreht. */
  -webkit-mask: linear-gradient(currentColor, currentColor) center/13px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center/1.5px 13px no-repeat;
  mask: linear-gradient(currentColor, currentColor) center/13px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center/1.5px 13px no-repeat;
  color: var(--green-text);
}

.chapter--dark .faq summary::after {
  color: var(--green-bright);
}

.faq details[open] summary::after {
  transform: rotate(135deg);
}

.faq__answer {
  padding-bottom: 1.5rem;
  max-width: 68ch;
  color: var(--ink-2);
}

.chapter--dark .faq__answer {
  color: var(--d-ink-2);
}

.faq__answer > * + * {
  margin-top: 0.85rem;
}

/* ---------- Tabellen ------------------------------------------------------ */
.table-scroll {
  overflow-x: auto;
  border-radius: var(--r-m);
  -webkit-overflow-scrolling: touch;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  letter-spacing: -0.008em;
}

th,
td {
  padding: 0.85rem 1rem;
  text-align: start;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

th {
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
}

.chapter--dark th,
.chapter--dark td {
  border-color: var(--d-line);
}

.chapter--dark th {
  color: var(--d-ink-2);
}

tbody tr:last-child td {
  border-bottom: 0;
}

/* ---------- Marken- und Ortsleiste ---------------------------------------- */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chips a {
  display: inline-block;
  padding: 0.42em 0.95em;
  border-radius: var(--r-pill);
  background: var(--w2);
  color: var(--ink);
  font-size: 0.9375rem;
  letter-spacing: -0.008em;
  text-decoration: none;
  transition: background-color 0.2s var(--press);
}

.chapter--w2 .chips a {
  background: var(--w);
}

.chips a:hover {
  background: var(--w3);
}

.chips a[aria-current='page'] {
  background: var(--ink);
  color: var(--w);
}

.chapter--dark .chips a {
  background: var(--d2);
  color: var(--d-ink);
}

.chapter--dark .chips a:hover {
  background: var(--d3);
}

/* ---------- Hinweisfläche ------------------------------------------------- */
.note {
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
  border-radius: var(--r-m);
  background: var(--green-wash);
  color: var(--ink);
}

.note .t-h4 {
  margin-bottom: 0.4rem;
}

.chapter--dark .note {
  background: rgba(95, 212, 99, 0.10);
  color: var(--d-ink);
}

.note--plain {
  background: var(--w2);
}

.chapter--w2 .note--plain {
  background: var(--w);
}

/* ---------- Brotkrumen ---------------------------------------------------- */
.crumbs {
  padding-block: 1.25rem 0;
}

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.8125rem;
  letter-spacing: 0.004em;
  color: var(--ink-3);
}

.crumbs a {
  color: var(--ink-2);
  text-decoration: none;
}

.crumbs a:hover {
  color: var(--ink);
  text-decoration: underline;
}

.crumbs li + li::before {
  content: '';
  display: inline-block;
  width: 0.32em;
  height: 0.32em;
  margin-inline-end: 0.5rem;
  border-right: 1.3px solid currentColor;
  border-top: 1.3px solid currentColor;
  transform: rotate(45deg) translateY(-0.02em);
  opacity: 0.7;
}

/* ---------- Seitenkopf (Unterseiten) -------------------------------------- */
.pagehead {
  padding-block: clamp(2rem, 4vw, 3.25rem) clamp(0.5rem, 1vw, 1rem);
}

.pagehead h1 {
  margin-bottom: 1rem;
}

/* ---------- Formulare ----------------------------------------------------- */
.form {
  display: grid;
  gap: 1.25rem;
}

.field {
  display: grid;
  gap: 0.4rem;
}

.field label {
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.008em;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.78em 0.95em;
  border: 1px solid rgba(24, 23, 21, 0.22);
  border-radius: var(--r-s);
  background: var(--w);
  color: var(--ink);
  font: inherit;
  font-size: 1.0625rem;
  letter-spacing: -0.014em;
  transition: border-color 0.18s var(--press), box-shadow 0.18s var(--press);
}

.field textarea {
  min-height: 8rem;
  resize: vertical;
}

.field select {
  appearance: none;
  padding-inline-end: 2.5rem;
  /* Gezeichneter Winkel, damit das Feld auf allen Systemen gleich aussieht. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%235c5f58' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--green-text);
  box-shadow: 0 0 0 3px rgba(28, 122, 34, 0.16);
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--ink-3);
}

.field__hint {
  font-size: 0.8125rem;
  letter-spacing: 0.004em;
  color: var(--ink-3);
}

.field__error {
  font-size: 0.8125rem;
  letter-spacing: 0.004em;
  color: #a3202c;
}

.field[data-invalid='true'] input,
.field[data-invalid='true'] select,
.field[data-invalid='true'] textarea {
  border-color: #a3202c;
}

.field[data-invalid='true'] input:focus,
.field[data-invalid='true'] textarea:focus {
  box-shadow: 0 0 0 3px rgba(163, 32, 44, 0.16);
}

.check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.7rem;
  align-items: start;
  font-size: 0.9375rem;
  line-height: 1.45;
}

.check input {
  width: 1.15rem;
  height: 1.15rem;
  margin: 0.14rem 0 0;
}

/* Vor der ersten Meldung ist das Feld leer – dann darf es auch keinen
   grünen Streifen zeigen. */
.form__status:empty {
  display: none;
}

.form__status {
  display: block;
  padding: 0.9rem 1.1rem;
  border-radius: var(--r-s);
  background: var(--green-wash);
  font-size: 0.9375rem;
}

.form__status[data-tone='error'] {
  background: #fbeaec;
  color: #7d1822;
}

/* ---------- Rechner ------------------------------------------------------- */
.calc {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
}

@media (min-width: 880px) {
  .calc {
    grid-template-columns: 1fr 1.1fr;
    align-items: start;
  }
}

.calc__out {
  display: grid;
  gap: 1.25rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--r-l);
  background: var(--d);
  color: var(--d-ink);
}

.calc__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--d-line);
}

.calc__row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.calc__label {
  font-size: 0.9375rem;
  color: var(--d-ink-2);
}

.calc__value {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.calc__value--accent {
  color: var(--green-bright);
}

/* ---------- Fußzeile ------------------------------------------------------ */
.foot {
  padding-block: clamp(3rem, 6vw, 4.5rem) 2.5rem;
  background: var(--w2);
  color: var(--ink-2);
  font-size: 0.8125rem;
  line-height: 1.5;
  letter-spacing: 0.004em;
}

.foot__top {
  display: grid;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--line);
}

@media (min-width: 760px) {
  .foot__top {
    grid-template-columns: 1.4fr repeat(3, 1fr);
  }
}

.foot__logo img {
  width: auto;
  height: 30px;
  margin-bottom: 1rem;
}

.foot h2 {
  margin-bottom: 0.9rem;
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.004em;
}

.foot ul {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.foot a {
  color: var(--ink-2);
  text-decoration: none;
}

.foot a:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.foot__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  padding-top: 2rem;
}

.foot__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.foot__note {
  flex-basis: 100%;
  max-width: 78ch;
  color: var(--ink-3);
}

/* ---------- Bewegung -----------------------------------------------------
   Grundzustand ist sichtbar. Erst wenn JavaScript läuft, wird verborgen
   und beim Eintritt eingeblendet – so bleibt die Seite ohne Skript ganz.
   -------------------------------------------------------------------------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

.js [data-reveal][data-shown='true'] {
  opacity: 1;
  transform: none;
}

/* Die Bühnengrafik kommt eine Spur später und aus etwas mehr Tiefe –
   sie ist das Objekt, nicht die Beschriftung. */
.js .stage__object[data-reveal] {
  transform: translateY(34px) scale(0.985);
}

.js .stage__object[data-reveal][data-shown='true'] {
  transform: none;
}

@media (max-width: 700px) {
  .stage__object {
    padding-inline: 0;
  }

  .stage__proof {
    gap: 0.65rem 1.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .js [data-reveal] {
    opacity: 1;
    transform: none;
  }

}

@media (prefers-reduced-transparency: reduce) {
  .nav,
  .nav__panel {
    background: var(--w);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (prefers-contrast: more) {
  :root {
    --ink-2: #3f423c;
    --ink-3: #55584f;
    --line: rgba(24, 23, 21, 0.3);
    --d-ink-2: #c8ccc0;
    --d-line: rgba(245, 245, 240, 0.35);
  }

  .nav {
    background: var(--w);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* ---------- Zeichen im Text ----------------------------------------------- */
.ic {
  display: block;
  margin-bottom: 0.9rem;
  color: var(--green-text);
}

.ic svg {
  width: 26px;
  height: 26px;
}

.chapter--dark .ic {
  color: var(--green-bright);
}

/* Im Fließtext einer Belegzeile steht das Zeichen neben der Zeile. */
.stage__proof .ic,
.ticks .ic {
  display: inline-block;
  margin: 0;
}

/* Gegenliste: dieselbe Struktur, aber ein Kreuz statt des Hakens. Ein grüner
   Haken vor einer Aufzählung von Fehlern liest sich als Empfehlung. Das Kreuz
   sind zwei gedrehte Linien; die Farbe bleibt gedeckt statt rot, es sind
   übliche Abläufe und keine Alarme. */
.ticks--gegen li::before,
.ticks--gegen li::after {
  content: '';
  position: absolute;
  inset-inline-start: 0.06rem;
  top: 0.72em;
  width: 0.66rem;
  height: 0;
  border: 0;
  border-block-start: 1.8px solid var(--ink-3);
  transform: rotate(45deg);
}

.ticks--gegen li::after {
  transform: rotate(-45deg);
}

/* Die Karte mit dem falschen Weg tritt zurück, damit der richtige führt.
   Der Kapitelselektor muss mit, sonst gewinnt `.chapter--w2 .tile` und die
   Karte bliebe weiß wie die andere. */
.tile--gegen,
.chapter--w2 .tile--gegen,
.chapter--dark .tile--gegen {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line);
}

.tile--gegen .ic {
  color: var(--ink-3);
}

.badge {
  display: inline-block;
  padding: 0.3em 0.75em;
  border-radius: var(--r-pill);
  background: var(--green-wash);
  color: var(--green-deep);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.004em;
}

.chapter--dark .badge {
  background: rgba(95, 212, 99, 0.14);
  color: var(--green-bright);
}

.req {
  color: var(--green-text);
}

/* ---------- Merkzahl neben einem Text -------------------------------------
   Trägt die eine Zahl, um die es in diesem Abschnitt geht.
   -------------------------------------------------------------------------- */
.marker {
  display: grid;
  gap: 0.85rem;
  align-content: center;
  padding: clamp(2rem, 4vw, 3rem);
  border-radius: var(--r-l);
  background: var(--w);
  box-shadow: var(--shadow-s);
}

.chapter--w2 .marker {
  background: var(--w);
}

.chapter--dark .marker {
  background: var(--d2);
  box-shadow: none;
}

.marker__value {
  font-size: clamp(3.5rem, 8vw, 6rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--green-text);
}

.chapter--dark .marker__value {
  color: var(--green-bright);
}

.marker__label {
  font-size: 1.0625rem;
  line-height: 1.45;
  letter-spacing: -0.012em;
  color: var(--ink-2);
  text-wrap: pretty;
}

.chapter--dark .marker__label {
  color: var(--d-ink-2);
}

/* ---------- Die Wärmebild-Szene ------------------------------------------
   --p kommt aus dem Scrollen (main.js). Ohne Skript bleibt der Rückfallwert 1
   stehen: Das Bild ist dann sofort vollständig da, nur eben ohne Auftritt.
   -------------------------------------------------------------------------- */
.scene__object {
  max-width: 1000px;
  margin: clamp(2rem, 4vw, 3.5rem) auto clamp(2.5rem, 5vw, 4rem);
}

.scene__object svg {
  width: 100%;
  height: auto;
}

/* Ohne Skript steht das Wärmebild sofort da. Mit Skript startet es bei null
   und wird vom Scrollen aufgezogen – sonst springt es beim Eintritt ins Bild
   von voll sichtbar auf null zurück. */
.scene .th {
  opacity: var(--p, 1);
  transition: opacity 0.12s linear;
}

.js .scene .th {
  opacity: var(--p, 0);
}

/* Bei reduzierter Bewegung läuft der Scroll-Aufzug gar nicht erst an. Dann
   muss das Wärmebild vollständig stehen, sonst fehlt der halbe Inhalt des
   Kapitels. Die Regel steht bewusst hier und nicht im Bewegungsblock weiter
   oben: dort stünde sie vor der Regel, die sie aufheben soll. */
@media (prefers-reduced-motion: reduce) {
  .js .scene .th {
    opacity: 1;
  }
}

.scene__facts {
  display: grid;
  gap: clamp(1.75rem, 3vw, 2.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 760px) {
  .scene__facts {
    grid-template-columns: repeat(3, 1fr);
  }
}

.scene__facts li {
  display: grid;
  gap: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--d-line);
}

/* Der Punkt in der Farbe, die im Wärmebild darüber steht. */
.scene__key {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.014em;
  color: var(--d-ink);
}

.scene__key::before {
  content: '';
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c, var(--green-bright));
}

.map svg {
  color: var(--ink);
}

.chapter--dark .map svg {
  color: var(--d-ink);
}

/* ---------- Menschen ------------------------------------------------------ */
.person {
  display: grid;
  gap: 0.35rem;
  justify-items: start;
}

/* Die Portraits sind Studioaufnahmen vor derselben Betonwand. Rund
   beschnitten stehen sie als Reihe ruhig nebeneinander. */
.person__foto {
  width: 100%;
  max-width: 200px;
  aspect-ratio: 1;
  margin-bottom: 1rem;
  border-radius: 50%;
  object-fit: cover;
  background: var(--w3);
}

/* ---------- Kontaktfeld --------------------------------------------------- */
.contact-grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
}

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

/* ---------- Formularraster ------------------------------------------------ */
.form__grid {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 620px) {
  .form__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .field--full {
    grid-column: 1 / -1;
  }
}

.form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
}

/* ---------- Rechner ------------------------------------------------------- */
.calc-inputs {
  display: grid;
  gap: 1.25rem;
  align-content: start;
}

.calc-row {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(2, 1fr);
}

.calc-field {
  display: grid;
  gap: 0.4rem;
}

.calc-field label {
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.008em;
}

.calc-field input,
.calc-field select {
  width: 100%;
  padding: 0.78em 0.95em;
  border: 1px solid rgba(24, 23, 21, 0.22);
  border-radius: var(--r-s);
  background: var(--w);
  color: var(--ink);
  font: inherit;
  font-size: 1.0625rem;
  letter-spacing: -0.014em;
  font-variant-numeric: tabular-nums;
  transition: border-color 0.18s var(--press), box-shadow 0.18s var(--press);
}

.calc-field select {
  appearance: none;
  padding-inline-end: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%235c5f58' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
}

.calc-field input:focus,
.calc-field select:focus {
  outline: none;
  border-color: var(--green-text);
  box-shadow: 0 0 0 3px rgba(28, 122, 34, 0.16);
}

.calc-hint {
  font-size: 0.8125rem;
  letter-spacing: 0.004em;
  color: var(--ink-3);
}

.calc-result {
  display: grid;
  gap: 1.75rem;
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  border-radius: var(--r-l);
  background: var(--d);
  color: var(--d-ink);
}

.calc-headline-label {
  font-size: 0.9375rem;
  color: var(--d-ink-2);
}

.calc-headline {
  font-size: clamp(2.75rem, 6vw, 4rem);
  line-height: 1;
  letter-spacing: -0.028em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--green-bright);
}

.calc-bars {
  display: grid;
  gap: 0.85rem;
}

.calc-bar-row {
  display: grid;
  gap: 0.35rem;
}

.calc-bar-label {
  font-size: 0.8125rem;
  letter-spacing: 0.004em;
  color: var(--d-ink-2);
}

.calc-bar-track {
  height: 44px;
  border-radius: var(--r-s);
  background: var(--d3);
  overflow: hidden;
}

/* Der Balken wird gestaucht, nicht in der Breite animiert: Breite anzufassen
   löst bei jedem Tastendruck ein Neu-Layout aus, Skalieren läuft auf dem
   Compositor. Die Beschriftung wird gegengestaucht, damit sie ihre Größe
   behält und am rechten Rand stehen bleibt. */
.calc-bar-fill {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  height: 100%;
  border-radius: var(--r-s);
  font-size: 1.0625rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transform: scaleX(var(--s, 1));
  transform-origin: left center;
  transition: transform 0.55s var(--ease);
  will-change: transform;
}

.calc-bar-fill > span {
  display: block;
  padding-inline-end: 0.85rem;
  transform: scaleX(calc(1 / var(--s, 1)));
  transform-origin: right center;
  transition: transform 0.55s var(--ease);
}

.calc-bar-fill--ist {
  --s: 1;
  background: var(--d3);
  color: var(--d-ink);
}

.calc-bar-fill--neu {
  background: var(--green-bright);
  color: var(--d);
}

.calc-facts {
  display: grid;
  gap: 1.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--d-line);
  grid-template-columns: repeat(2, 1fr);
  column-gap: 2rem;
}

.calc-fact {
  display: grid;
  gap: 0.25rem;
}

.calc-fact b {
  font-size: 1.375rem;
  letter-spacing: -0.018em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.calc-fact span {
  font-size: 0.8125rem;
  line-height: 1.35;
  letter-spacing: 0.004em;
  color: var(--d-ink-2);
}

.calc-disclaimer {
  font-size: 0.8125rem;
  line-height: 1.5;
  letter-spacing: 0.004em;
  color: var(--d-ink-2);
}

/* ---------- MEPS-Ersteinschätzung -----------------------------------------
   Fragen links, Ergebnis rechts. Das Ergebnisfeld trägt die Farbe des
   Bandes, damit die Aussage vor dem Lesen ankommt.
   -------------------------------------------------------------------------- */
.meps {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
}

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

.meps__fragen {
  display: grid;
  gap: 1.25rem;
}

/* Im dunklen Kapitel brauchen die Bedienelemente eigene Werte. */
.meps .calc-field label {
  color: var(--d-ink);
}

.meps .calc-field select {
  background-color: var(--d2);
  border-color: rgba(245, 245, 240, 0.24);
  color: var(--d-ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23a2a69b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.meps .calc-field select:focus {
  border-color: var(--green-bright);
  box-shadow: 0 0 0 3px rgba(95, 212, 99, 0.2);
}

.meps .calc-hint {
  color: var(--d-ink-2);
}

.meps__ergebnis {
  display: grid;
  gap: 1.25rem;
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
  border-radius: var(--r-l);
  background: var(--d2);
}

.meps__band {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.022em;
  font-weight: 600;
  color: var(--d-ink);
}

/* Die drei Bänder. Farbe aus der Messgrafik-Rampe, nie als einziges
   Unterscheidungsmerkmal: das Wort steht daneben. */
.meps__band[data-band='hoch']    { color: #ff8a6b; }
.meps__band[data-band='erhöht']  { color: #e8c65a; }
.meps__band[data-band='gering']  { color: var(--green-bright); }

.meps__satz {
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--d-ink-2);
}

.meps__satz strong {
  color: var(--d-ink);
}

.meps__gruende {
  padding-top: 1.25rem;
  border-top: 1px solid var(--d-line);
}

.meps__gruende ul {
  display: grid;
  gap: 0.5rem;
  margin: 0.85rem 0 0;
  padding: 0;
  list-style: none;
}

.meps__gruende li {
  position: relative;
  padding-inline-start: 1.1rem;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--d-ink-2);
}

.meps__gruende li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--d-ink-2);
}

.meps__aktion {
  margin-top: 0.5rem;
}

.meps__hinweis {
  max-width: 78ch;
  margin-top: clamp(2rem, 4vw, 3rem);
}

.meps__hinweis strong {
  color: var(--d-ink);
}

/* ---------- Langtext (Impressum, Datenschutz, AGB) ------------------------ */
.prose {
  max-width: calc(var(--wrap-text) + 2 * var(--gut));
}

.prose > * + * {
  margin-top: 1.15rem;
}

.prose h2 {
  margin-top: 2.75rem;
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
  line-height: 1.18;
  letter-spacing: -0.014em;
}

.prose h3 {
  margin-top: 2rem;
  font-size: 1.1875rem;
  line-height: 1.26;
  letter-spacing: -0.012em;
}

/* Mehr Luft über einer Überschrift als darunter. */
.prose h2 + *,
.prose h3 + * {
  margin-top: 0.6rem;
}

.prose ul,
.prose ol {
  padding-inline-start: 1.35rem;
}

.prose li + li {
  margin-top: 0.5rem;
}

.prose p,
.prose li {
  color: var(--ink-2);
}

.prose strong {
  color: var(--ink);
}

/* ---------- Kleinkram ----------------------------------------------------- */
.mt {
  margin-top: 1.75rem;
}

.stat__value small,
.marker__value small {
  display: block;
  margin-top: 0.75rem;
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: -0.008em;
  color: var(--ink-2);
}

.chapter--dark .stat__value small,
.chapter--dark .marker__value small {
  color: var(--d-ink-2);
}

/* Wenn eine Liste zugleich Raster ist, gewinnt das Raster – sonst
   addieren sich zwei Abstände. */
.list.cols {
  gap: clamp(1.75rem, 3vw, 2.75rem);
}

/* ---------- Hilfsklassen -------------------------------------------------
   Diese kleinen Klassen ersetzen die früheren style-Attribute im Markup.
   Dadurch kommt die Seite ohne 'unsafe-inline' in der style-src-Richtlinie
   aus, siehe website/_headers.
   -------------------------------------------------------------------------- */
.mt-075 { margin-top: 0.75rem; }
.mt-1   { margin-top: 1rem; }
.mt-15  { margin-top: 1.5rem; }
.mt-16  { margin-top: 1.6rem; }
.mt-2   { margin-top: 2rem; }
.mt-25  { margin-top: 2.5rem; }
.mb-0   { margin-bottom: 0; }
.mb-2   { margin-bottom: 2rem; }
.mb-3   { margin-bottom: 3rem; }
.m-0    { margin: 0; }
.m-0-0-1 { margin: 0 0 1rem; }
.mi-auto { margin-inline: auto; }
.mw-46  { max-width: 46ch; }
.mw-52  { max-width: 52ch; }
.mw-60rem { max-width: 60rem; }
.gap-09 { gap: 0.9rem; }
.ovx    { overflow-x: auto; }
.col-1  { grid-template-columns: 1fr; }
.pad-16 { padding: 1.6rem; }
.jc-center { justify-content: center; }

/* Abschnitt, der seine Höhe füllt und den Inhalt mittig setzt. */
.mittig-55,
.mittig-58 {
  display: grid;
  align-items: center;
}

.mittig-55 { min-height: 55vh; }
.mittig-58 { min-height: 58vh; }

/* Farbpunkt der Wärmebild-Legende. */
.key-1 { --c: var(--th-1); }
.key-4 { --c: var(--th-4); }
.key-5 { --c: var(--th-5); }

/* Das Logo in Kopf- und Fußzeile. */
.logo-bild { height: 26px; }
.foot__logo .logo-bild { height: 30px; }

/* ---------- Hilfsklassen -------------------------------------------------- */
.vh {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

[hidden] {
  display: none !important;
}

/* ---------- Druck --------------------------------------------------------- */
@media print {
  .nav,
  .nav__panel,
  .skip,
  .stage__object,
  .foot__top {
    display: none;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }

  .chapter,
  .chapter--dark {
    padding-block: 1.25rem;
    background: #fff;
    color: #000;
  }

  .faq details {
    break-inside: avoid;
  }

  a[href^='http']::after {
    content: ' (' attr(href) ')';
    font-size: 9pt;
    color: #444;
  }
}