/* ==========================================================================
   KTITM · Klaus Tesching IT & Media
   Design-System "REIHENFOLGE"

   These der Seite: Klaus verkauft keine Technik, sondern die Reihenfolge,
   in der die Fragen gestellt werden. Deshalb ist die Seite ein Werkzeug
   und kein Prospekt.

   Farbe   Petrolschwarz als Grundton, kaltes Papier als Gegenstück,
           EIN Signalton (Orange) ausschliesslich fuer Entscheidungen.
   Rhythmus Dunkel = Argument. Hell = Dokument.
   Typo    Eine Schrift (Archivo) traegt die gesamte Hierarchie ueber die
           Breitenachse: breit + gemischt = Aussage, schmal + versal = Marke.
   Raster  Aktenrand links, durchgehende Haarlinie als Rueckgrat.

   Alle Assets lokal - kein CDN, kein IP-Abfluss.
   Keine Animationsbibliothek: Scroll-Choreografie laeuft nativ ueber
   animation-timeline: view().
   ========================================================================== */

/* ── Schriften (selbst gehostet, DSGVO) ─────────────────────────────────── */
@font-face {
  font-family: "Archivo var";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("../fonts/archivo-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+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter var";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-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;
}
@font-face {
  font-family: "Inter var";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root {
  /* Flaechen */
  --deep: oklch(29% 0.028 202);
  --deep-2: oklch(23% 0.025 202);
  --deep-3: oklch(33.5% 0.031 202);
  --paper: oklch(96.5% 0.007 190);
  --paper-2: oklch(93.2% 0.010 190);

  /* Schrift auf Papier */
  --ink: oklch(23% 0.03 202);
  --ink-2: oklch(43% 0.028 202);
  --ink-3: oklch(47.5% 0.025 202);

  /* Schrift auf Petrol */
  --on-deep: oklch(96% 0.008 190);
  --on-deep-2: oklch(81% 0.016 195);
  --on-deep-3: oklch(74% 0.019 195);

  /* Signal - nur dort, wo entschieden wird.
     Schrift AUF dem Signalton ist dunkel, nicht weiss: Weiss kaeme auf diesem
     Orange nur auf 3,4:1 und riss damit WCAG AA fuer normale Schriftgroessen. */
  --signal: oklch(63% 0.205 41);
  --signal-ink: oklch(47% 0.165 39);
  --signal-up: oklch(80% 0.155 58);
  --on-signal: oklch(17% 0.045 42);

  /* Leseposition. Bewusst NICHT der Signalton: Wo gescrollt wurde, ist keine
     Entscheidung. Das Tuerkis ist der Grundton der Seite hochgezogen
     (Farbwinkel 196 statt 202) und liegt 155 Grad vom Orange entfernt - mit
     den orangen Unterstrichen der Navigation kann es niemand verwechseln. */
  --progress: oklch(72% 0.12 196);

  /* Linien */
  --rule-paper: oklch(23% 0.03 202 / 0.17);
  --rule-paper-2: oklch(23% 0.03 202 / 0.34);
  --rule-deep: oklch(95% 0.01 190 / 0.17);
  --rule-deep-2: oklch(95% 0.01 190 / 0.36);

  /* Duoton fuer Bewegtbild */
  --duo-dark: oklch(29% 0.028 202);
  --duo-light: oklch(91% 0.045 62);

  /* Raster */
  --max: 1320px;
  --pad: clamp(1.15rem, 4vw, 4rem);
  --gap: clamp(1.4rem, 2.6vw, 2.75rem);
  --rail-w: 170px;
  --head-h: 68px;
  --sec-y: clamp(4.75rem, 9vw, 8.5rem);

  /* Typo */
  --display: "Archivo var", "Segoe UI Variable Display", "Arial Black", system-ui, sans-serif;
  --sans: "Inter var", "Segoe UI Variable Text", "Segoe UI", system-ui, Arial, sans-serif;
  /* Gemessen, nicht geraten: "Die Technologie" braucht in Archivo (wdth 116,
     wght 800, ls -0.048em) das 8,5-Fache der Schriftgroesse an Breite. Die
     Inhaltsspalte ist ab 1320 px Fensterbreite auf 959 px begrenzt, also sind
     959/8,5 = 112 px das Maximum - darueber bricht die Zeile um.
     Das zweite Mass ist die Fensterhoehe: der Hero soll genau eine Bildschirm-
     hoehe fuellen, also darf die Zeile auf flachen Fenstern nicht mitwachsen. */
  --fs-hero: clamp(2.4rem, min(8.4vw, 13.5vh), 6.9rem);
  --fs-display: clamp(2.1rem, 4.7vw, 4.35rem);
  --fs-h3: clamp(1.28rem, 2vw, 1.85rem);
  --fs-lead: clamp(1.08rem, 0.55vw + 0.95rem, 1.4rem);
  --fs-body: clamp(1rem, 0.2vw + 0.95rem, 1.075rem);
  --fs-label: 0.7rem;

  /* Bewegung */
  --ease: cubic-bezier(0.22, 0.72, 0.24, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  color-scheme: dark;
}

/* Kontextfarben. Jede Komponente liest nur --tx, --rule, --sig, --surface -
   dadurch funktioniert dieselbe Komponente auf Petrol wie auf Papier, ohne
   dass eine zweite Regel mit hoeherer Spezifitaet dagegenhalten muss. */
:root,
.ctx-deep {
  --tx: var(--on-deep);
  --tx-2: var(--on-deep-2);
  --tx-3: var(--on-deep-3);
  --rule: var(--rule-deep);
  --rule-2: var(--rule-deep-2);
  --sig: var(--signal-up);
  --surface: var(--deep-3);
  --field: var(--deep);
}
.ctx-paper {
  --tx: var(--ink);
  --tx-2: var(--ink-2);
  --tx-3: var(--ink-3);
  --rule: var(--rule-paper);
  --rule-2: var(--rule-paper-2);
  --sig: var(--signal-ink);
  --surface: var(--paper);
  --field: var(--paper-2);
  color-scheme: light;
}

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

html {
  scroll-behavior: smooth;
  /* Genau Balkenhoehe plus dessen Unterkante - kein Zuschlag. Sonst bleibt
     beim Ankersprung ein Streifen des vorigen Abschnitts unter der Kopfleiste
     stehen. Die Luft im Abschnitt kommt aus --sec-y, nicht von hier. */
  scroll-padding-top: calc(var(--head-h) + 1px);
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Kein overflow-x am body: zusammen mit dem clip am html-Element wuerde daraus
   overflow-y: auto und der body ein eigener Scroll-Container. Das clip oben
   reicht, um seitliches Scrollen zu verhindern. */
body {
  margin: 0;
  background: var(--deep);
  color: var(--tx);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.7;
  font-optical-sizing: auto;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv05" 1, "cv11" 1, "ss03" 1;
}
body.is-locked { overflow: hidden; }

h1, h2, h3, h4 { margin: 0; font-family: var(--display); text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
img, video, canvas, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
fieldset { margin: 0; padding: 0; border: 0; min-inline-size: 0; }
legend { padding: 0; }

/* Muss !important sein: Klassen wie .btn setzen display und wuerden das
   display:none des hidden-Attributs sonst ueberstimmen. */
[hidden] { display: none !important; }

a, button, summary, label, [role="button"] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

::selection { background: var(--signal); color: var(--on-signal); }

/* Kopierschutz (Vorgabe Klaus) - Eingaben bleiben bedienbar */
body { -webkit-user-select: none; user-select: none; }
input, textarea, [contenteditable="true"], .u-selectable {
  -webkit-user-select: text;
  user-select: text;
}
img, video, canvas { -webkit-user-drag: none; user-drag: none; }

:where(a, button, summary, [tabindex], input):focus-visible {
  outline: 2px solid var(--sig);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: 0.75rem;
  top: -6rem;
  z-index: 1200;
  padding: 0.7rem 1.1rem;
  background: var(--signal);
  color: var(--on-signal);
  font-family: var(--display);
  font-size: var(--fs-label);
  font-weight: 660;
  font-stretch: 70%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 0.75rem; }

/* ── Raster: Aktenrand + durchgehendes Rueckgrat ────────────────────────── */
.shell {
  width: min(100%, var(--max));
  margin-inline: auto;
  padding-inline: var(--pad);
}

.section {
  position: relative;
  padding-block: var(--sec-y);
  background: var(--deep);
  color: var(--tx);
}
.section.ctx-paper { background: var(--paper); }
.section.is-sunken { background: var(--deep-2); }
.section.ctx-paper.is-sunken { background: var(--paper-2); }

.band { display: grid; gap: 0.9rem var(--gap); }
.band-rail { align-self: start; }
.band-main { min-width: 0; }

@media (min-width: 1080px) {
  .band { grid-template-columns: var(--rail-w) minmax(0, 1fr); }
  .band-rail {
    padding-right: var(--gap);
    text-align: right;
    position: sticky;
    top: calc(var(--head-h) + 2rem);
  }
  .band-main {
    border-left: 1px solid var(--rule);
    padding-left: var(--gap);
  }
}

.rail-label {
  font-family: var(--display);
  font-size: var(--fs-label);
  font-weight: 640;
  font-stretch: 68%;
  letter-spacing: 0.2em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--tx-3);
}
.rail-label b {
  display: block;
  font-weight: 640;
  color: var(--sig);
}

/* ── Typografie ─────────────────────────────────────────────────────────── */
.display {
  font-size: var(--fs-display);
  font-weight: 720;
  font-stretch: 112%;
  line-height: 0.94;
  letter-spacing: -0.032em;
  color: var(--tx);
}
.display--tight { max-width: 17ch; }

h3, .h3 {
  font-size: var(--fs-h3);
  font-weight: 640;
  font-stretch: 106%;
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.lead {
  max-width: 58ch;
  margin-top: 1.4rem;
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--tx-2);
}
.body-wide { max-width: 64ch; color: var(--tx-2); }

.mark {
  color: var(--sig);
  font-weight: 500;
  white-space: nowrap;
}
.mark--wrap { white-space: normal; }

/* ── Schaltflaechen ─────────────────────────────────────────────────────── */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem 1.4rem;
  margin-top: 2.1rem;
}

.btn {
  --btn-bg: var(--signal);
  --btn-tx: var(--on-signal);
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 48px;
  padding: 0.8rem 1.45rem;
  background: var(--btn-bg);
  color: var(--btn-tx);
  font-family: var(--display);
  font-size: 0.875rem;
  font-weight: 660;
  font-stretch: 96%;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.22s var(--ease), filter 0.22s var(--ease),
    background-color 0.22s var(--ease), color 0.22s var(--ease);
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
.btn:active { transform: translateY(0); }
.btn .ico {
  transition: transform 0.22s var(--ease);
  font-family: var(--sans);
}
.btn:hover .ico { transform: translate(2px, -2px); }

.btn--quiet {
  --btn-bg: transparent;
  --btn-tx: var(--tx);
  border: 1px solid var(--rule-2);
}
.btn--quiet:hover {
  --btn-bg: var(--tx);
  --btn-tx: var(--deep);
  filter: none;
}
.ctx-paper .btn--quiet:hover { --btn-tx: var(--paper); }

.btn--mini {
  min-height: 38px;
  padding: 0.35rem 0.8rem;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-stretch: 74%;
}

.tlink {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  color: var(--tx-2);
  font-family: var(--display);
  font-size: 0.875rem;
  font-weight: 620;
  font-stretch: 94%;
  text-decoration: none;
  border-bottom: 1px solid var(--rule-2);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), gap 0.2s var(--ease);
}
.tlink:hover { color: var(--sig); border-color: var(--sig); gap: 0.75rem; }

/* Eckmarken - Registermarken eines Druckbogens, nur auf entscheidenden Flaechen */
.ticked { position: relative; }
.ticked::before,
.ticked::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  border: 1px solid var(--sig);
  opacity: 0.85;
  pointer-events: none;
}
.ticked::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.ticked::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

/* ── Kopfzeile ──────────────────────────────────────────────────────────── */
.head {
  position: fixed;
  inset: 0 0 auto;
  z-index: 900;
  background: transparent;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease);
  border-bottom: 1px solid transparent;
}
/* Voll deckend, nicht 90 % mit Weichzeichner: hinter dem Balken laeuft die
   Titelzeile in Weiss und 110 px Groesse durch. Bei 90 % blieb davon ein
   heller Schatten stehen, der die Menuepunkte unruhig machte. */
.head.is-stuck,
.head.is-open {
  background: var(--deep-2);
  border-bottom-color: var(--rule-deep);
}

/* stretch statt center: Marke, Menuepunkte und Handlungsknopf laufen ueber die
   volle Balkenhoehe und sitzen damit oben wie unten buendig auf der Kante. */
.nav {
  position: relative;
  /* Ueber dem Leseposition-Balken: beide liegen auf derselben Unterkante, und
     wenn der Balken darueber laeuft, muss der Marker des aktiven Abschnitts
     sichtbar bleiben. Ohne z-index gewaenne der Balken - er steht im Markup
     hinter der Navigation. */
  z-index: 1;
  width: min(100%, var(--max));
  min-height: var(--head-h);
  margin-inline: auto;
  padding-inline: var(--pad);
  display: flex;
  align-items: stretch;
  gap: 1.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  min-height: var(--head-h);
  gap: 0.6rem;
  margin-right: auto;
  font-family: var(--display);
  font-size: 1.02rem;
  font-weight: 760;
  font-stretch: 78%;
  letter-spacing: 0.18em;
  color: var(--on-deep);
  text-decoration: none;
}
.brand-mark {
  width: 11px;
  height: 11px;
  background: var(--signal);
  transition: transform 0.3s var(--ease);
}
.brand:hover .brand-mark { transform: rotate(45deg); }

.nav-links { display: flex; align-items: stretch; gap: 0.35rem; }
.nav-links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--head-h);
  padding: 0 0.65rem;
  font-family: var(--display);
  font-size: 0.755rem;
  font-weight: 620;
  font-stretch: 78%;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--on-deep-2);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}
.nav-links a:hover { color: var(--on-deep); }
.nav-links a[aria-current] { color: var(--signal-up); }

/* Die Marke des aktiven Abschnitts sitzt auf der Unterkante des Balkens. */
.nav-links a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  inset: auto 0.65rem 0 0.65rem;
  height: 2px;
  background: var(--signal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease-out);
}
.nav-links a:not(.nav-cta):hover::after,
.nav-links a[aria-current]::after { transform: scaleX(1); }

.nav-cta {
  margin-left: 0.6rem;
  padding: 0 1.15rem !important;
  background: var(--signal);
  color: var(--on-signal) !important;
  transition: filter 0.2s var(--ease);
}
.nav-cta:hover { filter: brightness(1.1); }

.nav-toggle {
  display: none;
  width: 46px;
  min-height: var(--head-h);
  margin-right: -0.6rem;
  place-items: center;
  cursor: pointer;
}
.nav-toggle-box { display: grid; gap: 5px; width: 22px; }
.nav-toggle-box i {
  height: 2px;
  background: var(--on-deep);
  transition: transform 0.28s var(--ease), opacity 0.2s var(--ease);
}
.head.is-open .nav-toggle-box i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.head.is-open .nav-toggle-box i:nth-child(2) { opacity: 0; }
.head.is-open .nav-toggle-box i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Liegt auf der Unterkante statt darunter: sonst waere der Balken 71 statt
   68 px hoch und stimmte nicht mehr mit --head-h ueberein, an dem der
   Ankersprung und die Hero-Oberkante haengen. */
.head-progress {
  position: absolute;
  inset: auto 0 -1px 0;
  height: 2px;
  background: var(--progress);
  transform: scaleX(var(--read, 0));
  transform-origin: 0 50%;
  transition: opacity 0.3s var(--ease);
  opacity: 0;
}
.head.is-stuck .head-progress { opacity: 1; }

@media (max-width: 1180px) {
  .nav-toggle { display: grid; }
  .nav-links {
    position: fixed;
    inset: var(--head-h) 0 auto;
    display: grid;
    gap: 0;
    padding: 1rem var(--pad) 2rem;
    background: oklch(23% 0.025 202 / 0.97);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--rule-deep);
    clip-path: inset(0 0 100% 0);
    transition: clip-path 0.4s var(--ease-out);
  }
  .head.is-open .nav-links { clip-path: inset(0 0 0 0); }
  .nav-links a {
    min-height: 56px;
    padding: 0.95rem 0;
    font-size: 0.98rem;
    font-stretch: 92%;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--rule-deep);
  }
  /* Im aufgeklappten Menue markiert die Farbe den aktiven Punkt, kein Strich. */
  .nav-links a:not(.nav-cta)::after { content: none; }
  .nav-cta {
    margin-left: 0;
    margin-top: 1.1rem;
    padding: 0.9rem 1.2rem !important;
    justify-content: center;
    border-bottom: 0 !important;
  }
}

/* ── Duoton fuer alles Bewegtbild ───────────────────────────────────────── */
.duo { position: relative; isolation: isolate; overflow: hidden; background: var(--deep-2); }
.duo > video,
.duo > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05) brightness(0.94);
}
.duo::before,
.duo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.duo::before { background: var(--duo-dark); mix-blend-mode: lighten; z-index: 1; }
.duo::after { background: var(--duo-light); mix-blend-mode: darken; z-index: 2; }

/* ── Hero ───────────────────────────────────────────────────────────────── */
/* Der Hero ist genau eine Bildschirmhoehe hoch - nicht 880 px, nicht mehr.
   Damit der Inhalt auch in ein flaches Fenster passt, haengt der senkrechte
   Rhythmus an der Fensterhoehe (vh) statt an der Breite.

   Zentriert wird ueber margin-block: auto am Inhalt, NICHT ueber
   align-content: center. Der Unterschied zaehlt: wird der Inhalt einmal hoeher
   als der Platz, werden automatische Aussenabstaende zu Null und der Inhalt
   bleibt an der Oberkante stehen. align-content: center haette ihn zur Haelfte
   nach oben unter die Kopfleiste geschoben - genau das darf nicht passieren.
   Die Oberkante liegt dabei immer unter dem Balken, weil sie im Innenabstand
   des Heros steckt. */
.hero {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  padding-block: calc(var(--head-h) + clamp(1.25rem, 4.5vh, 4rem)) clamp(1.5rem, 5vh, 4.5rem);
  display: grid;
  grid-template-rows: 1fr;
  overflow: hidden;
}
.hero > .shell { margin-block: auto; }
.hero-media { position: absolute; inset: 0; z-index: -2; opacity: 0.34; }
.hero-poster {
  position: absolute;
  inset: 0;
  background: var(--hero-poster, none) center / cover no-repeat;
  filter: grayscale(1) contrast(1.05) brightness(0.94);
}
.hero-media > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  filter: grayscale(1) contrast(1.05) brightness(0.94);
  transition: opacity 0.9s var(--ease);
}
.hero.is-playing .hero-media > video { opacity: 1; }
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, oklch(23% 0.025 202 / 0.74) 0%, oklch(23% 0.025 202 / 0.4) 42%, var(--deep) 96%),
    radial-gradient(120% 90% at 82% 18%, oklch(76% 0.165 55 / 0.1), transparent 62%);
}

/* Die These bekommt die volle Breite, damit sie zwei Zeilen bleibt statt fuenf.
   Erst darunter teilt sich der Raum in Erlaeuterung und Reihenfolge-Leiter. */
.hero-grid { display: grid; gap: clamp(1.25rem, 4vh, 3.25rem) var(--gap); }

/* Zwischenbreiten: kein Aktenrand mehr, aber Erlaeuterung und Reihenfolge-Leiter
   stehen weiter nebeneinander. Uebereinander gestapelt waere der Hero hier rund
   260 px zu hoch fuer einen Bildschirm. */
@media (min-width: 760px) and (max-width: 1079.98px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(255px, 0.8fr);
    grid-template-areas:
      "rail rail"
      "lead lead"
      "copy ladder";
    align-items: start;
  }
  .hero-rail { grid-area: rail; }
  .hero-lead { grid-area: lead; }
  .hero-copy { grid-area: copy; }
  .ladder { grid-area: ladder; }
}

@media (min-width: 1080px) {
  .hero-grid {
    grid-template-columns: var(--rail-w) minmax(0, 1.15fr) minmax(290px, 0.75fr);
    grid-template-areas:
      "rail lead lead"
      ".    copy ladder";
    align-items: start;
  }
  .hero-rail { grid-area: rail; }
  .hero-lead { grid-area: lead; }
  .hero-copy { grid-area: copy; }
  .ladder { grid-area: ladder; }
  .hero-lead,
  .hero-copy { border-left: 1px solid var(--rule); padding-left: var(--gap); }
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  margin-bottom: clamp(0.7rem, 1.6vh, 1.2rem);
  padding: 0.5rem 0.9rem 0.5rem 0.75rem;
  border: 1px solid var(--rule-2);
  font-size: 0.78rem;
  color: var(--on-deep-2);
  text-decoration: none;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.hero-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--signal);
  border-radius: 50%;
  flex: none;
}
.hero-badge b {
  font-family: var(--display);
  font-size: 0.68rem;
  font-weight: 660;
  font-stretch: 72%;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-deep);
}
.hero-badge:hover { border-color: var(--signal); color: var(--on-deep); }

.hero h1 {
  font-size: var(--fs-hero);
  font-weight: 800;
  font-stretch: 116%;
  line-height: 0.84;
  letter-spacing: -0.048em;
  color: var(--on-deep);
}
.hero h1 .num {
  display: inline-block;
  color: var(--signal-up);
  font-stretch: 125%;
}
.hero-sub {
  max-width: 46ch;
  margin-top: clamp(0.85rem, 2.2vh, 1.8rem);
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--on-deep-2);
}
/* Auch die Luft ueber den Handlungsknoepfen haengt an der Fensterhoehe -
   sonst passt der Hero auf flachen Fenstern nicht auf einen Bildschirm. */
.hero-copy .btn-row { margin-top: clamp(1rem, 2.6vh, 2.1rem); }

/* Die Reihenfolge als Instrument neben der These */
.ladder {
  border-top: 1px solid var(--rule-2);
  padding-top: 0.9rem;
}
.ladder-cap {
  font-family: var(--display);
  font-size: var(--fs-label);
  font-weight: 640;
  font-stretch: 68%;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--on-deep-3);
}
.ladder ol { margin-top: 0.9rem; display: grid; }
.rung {
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  align-items: baseline;
  gap: 0.4rem;
  padding: clamp(0.3rem, 0.95vh, 0.62rem) 0;
  /* Einzeilige Marken brauchen keinen Fliesstext-Durchschuss. */
  line-height: 1.35;
  border-bottom: 1px solid var(--rule);
  color: var(--on-deep-2);
}
.rung i {
  font-family: var(--display);
  font-style: normal;
  font-size: 0.82rem;
  font-weight: 500;
  font-stretch: 90%;
  letter-spacing: 0.08em;
  color: var(--on-deep-3);
  font-variant-numeric: tabular-nums;
}
.rung span {
  font-family: var(--display);
  font-size: 0.98rem;
  font-weight: 560;
  font-stretch: 98%;
  letter-spacing: -0.005em;
}
.rung--break {
  margin-top: 0.55rem;
  border-top: 2px solid var(--signal);
  border-bottom: 0;
  padding-top: 0.85rem;
  color: var(--on-deep);
}
.rung--break i { color: var(--signal-up); font-weight: 640; }
.rung--break span { font-weight: 700; }
.rung-note {
  grid-column: 2;
  margin-top: 0.15rem;
  font-family: var(--sans);
  font-size: 0.83rem;
  line-height: 1.45;
  color: var(--signal-up);
}

.hero-tools {
  margin-top: clamp(1rem, 3vh, 2rem);
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

/* Ab der Rasterbreite stehen Scrollhinweis und Bewegungsschalter unten im
   Aktenrand. Dort ist die Spalte frei, deshalb kosten sie keine Hoehe und
   koennen nichts ueberlagern - die Textspalte beginnt erst rechts daneben.
   Die left-Rechnung trifft die linke Kante des Rasters: solange das Fenster
   schmaler ist als --max, ist das schlicht der Seitenrand, danach der
   zentrierte Rasterbeginn. */
@media (min-width: 1080px) {
  .hero-tools {
    position: absolute;
    bottom: calc(clamp(1rem, 3vh, 2.25rem) + env(safe-area-inset-bottom));
    left: max(var(--pad), calc((100% - var(--max)) / 2 + var(--pad)));
    z-index: 3;
    width: var(--rail-w);
    margin-top: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
  }
}
.hero-foot {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--display);
  font-size: var(--fs-label);
  font-weight: 620;
  font-stretch: 70%;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--on-deep-3);
}
.hero-foot i {
  width: 1px;
  height: 26px;
  background: linear-gradient(var(--on-deep-3), transparent);
  animation: drip 2.4s var(--ease) infinite;
}
@keyframes drip {
  0%, 100% { transform: scaleY(0.4); transform-origin: top; opacity: 0.4; }
  50% { transform: scaleY(1); transform-origin: top; opacity: 1; }
}
/* Auf dem Telefon laeuft kein Hero-Video (site.js startet es erst ab 768 px),
   und "Scrollen" muss dort niemandem erklaert werden. Damit ist die ganze
   Werkzeugzeile leer und darf keine Hoehe mehr kosten. */
@media (max-width: 767px) {
  .hero-tools { display: none; }
}

/* Ebenfalls nur auf dem Telefon: der Absender steht in einer Zeile statt in
   drei. Das spart zwei Zeilen Hoehe, ohne etwas wegzulassen. */
@media (max-width: 759.98px) {
  .hero-rail .rail-label b { display: inline; }
  .hero-rail .rail-label b::before,
  .hero-rail .rail-label b::after { content: " · "; color: var(--on-deep-3); }
  /* Einspaltig stehen vier Bloecke untereinander, also drei Abstaende. Die
     duerfen hier nicht so gross sein wie nebeneinander. */
  .hero-grid { row-gap: clamp(0.9rem, 2.4vh, 2rem); }
}

/* Der Aktenrand im Hero laeuft nicht mit, er nennt nur den Absender. */
.hero-rail { align-self: start; }
@media (min-width: 1080px) {
  .hero-rail { text-align: right; padding-right: var(--gap); padding-top: 0.55rem; }
}

/* Dieselbe Marke ausserhalb des Rasters: links, mit Luft nach unten. */
.split-copy .rail-label,
.closing-copy .rail-label,
.book-content .rail-label { display: block; margin-bottom: 1.05rem; }
.book-content .rail-label b { display: inline; margin-left: 0.55rem; }
.closing-copy { max-width: 48rem; }
.manifest-lines { margin-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--rule); }

/* ── Vertrauensband ─────────────────────────────────────────────────────── */
.trust {
  background: var(--deep-2);
  border-block: 1px solid var(--rule-deep);
  padding-block: 1.5rem;
}
.trust-inner { display: grid; gap: 1rem var(--gap); align-items: center; }
@media (min-width: 900px) { .trust-inner { grid-template-columns: auto 1fr; } }
.trust-label {
  font-family: var(--display);
  font-size: var(--fs-label);
  font-weight: 640;
  font-stretch: 68%;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--on-deep-3);
}
.trust-items {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2.1rem;
}
.trust-items li {
  font-family: var(--display);
  font-size: 0.9rem;
  font-weight: 560;
  font-stretch: 92%;
  letter-spacing: 0.005em;
  color: var(--on-deep-2);
}

/* ── Haltung / Manifest ─────────────────────────────────────────────────── */
.manifest-line {
  display: grid;
  gap: 0.2rem 2rem;
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 780px) {
  .manifest-line { grid-template-columns: 12rem minmax(0, 1fr); align-items: baseline; }
}
.manifest-line > span {
  font-family: var(--display);
  font-size: var(--fs-label);
  font-weight: 640;
  font-stretch: 68%;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sig);
}
.manifest-line > strong {
  font-family: var(--display);
  font-size: clamp(1.15rem, 2.1vw, 1.72rem);
  font-weight: 600;
  font-stretch: 104%;
  line-height: 1.2;
  letter-spacing: -0.018em;
  color: var(--tx);
}

/* ── Leistungen ─────────────────────────────────────────────────────────── */
.svc-grid {
  margin-top: clamp(2.5rem, 5vw, 3.75rem);
  display: grid;
  gap: 1px;
  background: var(--rule-2);
  border: 1px solid var(--rule-2);
}
/* Flex-Spalte, damit die Trennlinie ueber den Schlagworten in allen drei
   Karten auf derselben Hoehe sitzt - auch bei unterschiedlich langem Text. */
.svc {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
  background: var(--surface);
  transition: background-color 0.3s var(--ease);
}
.svc:hover { background: color-mix(in oklab, var(--surface), var(--sig) 6%); }

/* Der Unterstrich wischt beim Ueberfahren von links ein und zeigt, welche
   Karte gerade gelesen wird. */
.svc::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: var(--signal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease-out);
}
.svc:hover::after { transform: scaleX(1); }
.svc h3 { color: var(--tx); }
.svc > p { margin-top: 0.9rem; color: var(--tx-2); font-size: 0.985rem; }
/* min-height auf zwei gemessene Schlagwortzeilen (2x1,156rem + 0,4rem Abstand
   + 1,5rem Innenabstand = 4,25rem): sonst sitzt die Trennlinie in jeder Karte
   auf einer anderen Hoehe, je nachdem wie viele Schlagworte umbrechen. */
.svc-tags {
  margin-top: auto;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end;
  min-height: 5.7rem;
  gap: 0.4rem;
}
.svc-tags li {
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--rule-2);
  font-family: var(--display);
  font-size: 0.68rem;
  font-weight: 620;
  font-stretch: 72%;
  letter-spacing: 0.15em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--tx-3);
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease),
    background-color 0.25s var(--ease);
}
/* Beim Ueberfahren der Karte leuchten die Kaestchen nacheinander auf. Die
   Verzoegerung steht nur in der Hover-Regel - beim Verlassen gehen sie
   deshalb sofort gemeinsam zurueck. */
.svc:hover .svc-tags li {
  border-color: var(--sig);
  color: var(--sig);
  background: color-mix(in oklab, var(--surface), var(--signal) 9%);
}
.svc:hover .svc-tags li:nth-child(2) { transition-delay: 0.06s; }
.svc:hover .svc-tags li:nth-child(3) { transition-delay: 0.12s; }
.svc:hover .svc-tags li:nth-child(4) { transition-delay: 0.18s; }

/* subgrid: Alle drei Karten teilen sich dieselben Zeilenhoehen. Dadurch sitzt
   die Trennlinie ueber den Schlagworten in jeder Karte auf derselben Hoehe -
   auch dann, wenn die Kaestchen in einer Karte zwei und in der naechsten drei
   Zeilen brauchen. Der Zeilenabstand muss dafuer 0 sein, sonst liefe die
   Rasterfarbe als Linie mitten durch die Karten. */
@media (min-width: 900px) {
  .svc-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto auto;
    row-gap: 0;
  }
  .svc {
    display: grid;
    grid-row: 1 / span 3;
    grid-template-rows: subgrid;
  }
  .svc-tags { min-height: 0; margin-top: 0; }
}

/* ── Split-Sektionen ────────────────────────────────────────────────────── */
.split {
  display: grid;
  background: var(--deep);
  color: var(--tx);
}
.split.ctx-paper { background: var(--paper); }
@media (min-width: 950px) {
  .split { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .split--flip .split-media { order: 2; }
}
.split-media { position: relative; min-height: clamp(280px, 46vw, 620px); }
.split-media > .duo { position: absolute; inset: 0; }
.split-cap {
  position: absolute;
  left: clamp(1rem, 2vw, 1.75rem);
  bottom: clamp(1rem, 2vw, 1.75rem);
  z-index: 3;
  padding: 0.4rem 0.75rem;
  background: oklch(23% 0.025 202 / 0.74);
  backdrop-filter: blur(6px);
  font-family: var(--display);
  font-size: var(--fs-label);
  font-weight: 640;
  font-stretch: 70%;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-deep);
}
.split-copy {
  display: grid;
  align-content: center;
  padding: clamp(2.75rem, 7vw, 6rem) var(--pad);
}
.split-copy .inner { width: min(100%, 34rem); margin-inline: auto; }
.split-copy h2 {
  font-size: clamp(1.75rem, 3.3vw, 3rem);
  font-weight: 700;
  font-stretch: 108%;
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--tx);
}
.split-copy > .inner > p { margin-top: 1.35rem; color: var(--tx-2); font-size: 1.05rem; }
.pulse {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.9rem !important;
  font-family: var(--display);
  font-size: var(--fs-label);
  font-weight: 640;
  font-stretch: 70%;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sig) !important;
}
.pulse i {
  width: 7px;
  height: 7px;
  background: currentColor;
  border-radius: 50%;
  animation: beat 2.6s var(--ease) infinite;
}
@keyframes beat {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.7); }
}

/* ── Zeilenlisten (Faktoren, Zertifikate, Phasen) ───────────────────────── */
.rows { margin-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--rule); }
.row {
  display: grid;
  gap: 0.35rem 2rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 860px) {
  .row { grid-template-columns: 15rem minmax(0, 1fr); }
}
.row > span {
  font-family: var(--display);
  font-size: var(--fs-label);
  font-weight: 640;
  font-stretch: 68%;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tx-3);
  padding-top: 0.3rem;
}
.row strong {
  display: block;
  font-family: var(--display);
  font-size: 1.12rem;
  font-weight: 620;
  font-stretch: 102%;
  letter-spacing: -0.015em;
  color: var(--tx);
}
.row p { margin-top: 0.4rem; color: var(--tx-2); font-size: 0.985rem; max-width: 62ch; }
.row > p { padding-top: 0.15rem; }

/* ── Aussagekasten ──────────────────────────────────────────────────────── */
.callout {
  margin-top: clamp(2.25rem, 4vw, 3.25rem);
  padding: clamp(1.5rem, 3vw, 2.4rem);
  background: var(--field);
  border-left: 3px solid var(--signal);
}
.callout > span {
  font-family: var(--display);
  font-size: var(--fs-label);
  font-weight: 640;
  font-stretch: 68%;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sig);
}
.callout > p {
  margin-top: 0.7rem;
  font-family: var(--display);
  font-size: clamp(1.28rem, 2.5vw, 2rem);
  font-weight: 640;
  font-stretch: 106%;
  line-height: 1.16;
  letter-spacing: -0.024em;
  color: var(--tx);
  max-width: 24ch;
}

/* ══ SIGNATUR: Der Vier-Wege-Kompass ════════════════════════════════════ */
.kompass { margin-top: clamp(2.5rem, 5vw, 4rem); }
.kompass-grid { display: grid; gap: var(--gap); }
@media (min-width: 1000px) {
  .kompass-grid { grid-template-columns: minmax(0, 1fr) minmax(340px, 0.92fr); align-items: start; }
}

.ask-set { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.ask { padding: clamp(1.1rem, 2.2vw, 1.6rem); background: var(--surface); }
/* float statt display: Eine legend wird sonst ueber die obere Kante des
   fieldsets gelegt, und der Hintergrund des fieldsets bleibt dahinter
   ausgespart - sichtbar als hellerer Streifen hinter der Frage. */
.ask legend {
  float: left;
  width: 100%;
  display: flex;
  gap: 0.75rem;
  font-family: var(--display);
  font-size: 1.02rem;
  font-weight: 620;
  font-stretch: 100%;
  letter-spacing: -0.012em;
  line-height: 1.25;
  color: var(--tx);
}
.ask legend i {
  font-style: normal;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--sig);
  flex: none;
}
.ask-opts { clear: both; padding-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.opt { position: relative; }
.opt input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.opt span {
  display: block;
  min-height: 44px;
  padding: 0.62rem 1rem;
  display: flex;
  align-items: center;
  border: 1px solid var(--rule-2);
  font-size: 0.9rem;
  line-height: 1.25;
  color: var(--tx-2);
  cursor: pointer;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease),
    background-color 0.2s var(--ease);
}
.opt:hover span { border-color: var(--sig); color: var(--tx); }
.opt input:checked + span {
  border-color: var(--signal);
  background: var(--signal);
  color: var(--on-signal);
  font-weight: 500;
}
.opt input:focus-visible + span { outline: 2px solid var(--sig); outline-offset: 3px; }

/* Kein position: sticky. Diese Spalte ist die hoehere der beiden und damit
   genau so hoch wie ihr Rasterfeld - ein klebendes Element ohne Spielraum
   klebt nicht, die Regel war von Anfang an wirkungslos. Beide Spalten passen
   bei ueblichen Fensterhoehen ohnehin nebeneinander auf einen Bildschirm. */
.cmp-side { display: grid; gap: 1rem; }

.ways-hint { font-size: 0.85rem; color: var(--tx-3); }

.ways { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.way {
  position: relative;
  background: var(--surface);
  transition: background-color 0.4s var(--ease);
}

/* Die ganze Karte ist die Schaltflaeche. Der Aufhell-Effekt liegt bewusst als
   halbtransparente Flaeche darueber statt als fester Farbwert: die Karte hat je
   nach Zustand einen anderen Untergrund, ein fester Wert wuerde ihn ersetzen. */
.way-btn {
  position: relative;
  display: grid;
  gap: 0.5rem;
  width: 100%;
  padding: 1.05rem 1.2rem;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.3s var(--ease), opacity 0.3s var(--ease);
}
/* Der Streifen am unteren Rand zeigt, welche Karte gerade angefasst wird. */
.way-btn::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: var(--signal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-out);
}
.way-btn:hover,
.way-btn:focus-visible { background: color-mix(in srgb, var(--tx) 8%, transparent); }
.way-btn:hover::after { transform: scaleX(1); }
.way-btn:hover .way-name { color: var(--sig); }
.way-btn:hover .way-more { color: var(--sig); }
.way-btn:hover .way-more i { transform: translateX(4px); }

.way-head { display: flex; align-items: center; gap: 0.85rem; }
.way-name {
  flex: 1;
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 640;
  font-stretch: 102%;
  letter-spacing: -0.015em;
  color: var(--tx);
  transition: color 0.25s var(--ease);
}
.way-state {
  font-family: var(--display);
  font-size: 0.66rem;
  font-weight: 660;
  font-stretch: 70%;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.24rem 0.5rem;
  border: 1px solid var(--rule-2);
  color: var(--tx-3);
  white-space: nowrap;
}
.way-why {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--tx-2);
  min-height: 1.32rem;
}
.way-more {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding-top: 0.5rem;
  font-family: var(--display);
  font-size: 0.7rem;
  font-weight: 640;
  font-stretch: 74%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tx-3);
  transition: color 0.25s var(--ease);
}
.way-more i {
  font-style: normal;
  transition: transform 0.3s var(--ease);
}

.way[data-state="traegt"] { background: var(--field); }
.way[data-state="traegt"] .way-state {
  border-color: var(--signal);
  background: var(--signal);
  color: var(--on-signal);
}
.way[data-state="moeglich"] .way-state { border-color: var(--rule-2); color: var(--tx-2); }
/* Weggefallene Wege bleiben anklickbar, deshalb nur gedaempft statt fast weg -
   und beim Anfassen wieder voll da, damit die Begruendung lesbar bleibt. */
.way[data-state="weg"] .way-btn { opacity: 0.55; }
.way[data-state="weg"] .way-btn:hover,
.way[data-state="weg"] .way-btn:focus-visible { opacity: 1; }
.way[data-state="weg"] .way-name { text-decoration: line-through; text-decoration-thickness: 1px; }

.cmp-sum {
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--rule-2);
  background: var(--field);
}
.cmp-sum > span {
  font-family: var(--display);
  font-size: var(--fs-label);
  font-weight: 640;
  font-stretch: 68%;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tx-3);
}
.cmp-sum > p {
  margin-top: 0.5rem;
  font-family: var(--display);
  font-size: 1.16rem;
  font-weight: 640;
  font-stretch: 104%;
  line-height: 1.25;
  letter-spacing: -0.018em;
  color: var(--tx);
}
.cmp-sum > .cmp-fine {
  margin-top: 0.7rem;
  font-family: var(--sans);
  font-size: 0.83rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--tx-3);
}
.cmp-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.cmp-reset {
  min-height: 44px;
  font-family: var(--display);
  font-size: 0.7rem;
  font-weight: 620;
  font-stretch: 74%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tx-3);
  cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.cmp-reset:hover { color: var(--tx); border-bottom-color: var(--rule-2); }

/* ── Kennzahlen ─────────────────────────────────────────────────────────── */
.facts {
  margin-top: clamp(2.5rem, 5vw, 3.75rem);
  display: grid;
  gap: 1px;
  background: var(--rule);
  border-block: 1px solid var(--rule);
}
@media (min-width: 620px) { .facts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .facts { grid-template-columns: repeat(4, 1fr); } }
.fact { padding: 1.6rem clamp(1rem, 2vw, 1.6rem); background: var(--deep); }
.section.is-sunken .fact { background: var(--deep-2); }
.fact-num {
  display: flex;
  align-items: baseline;
  gap: 0.1rem;
  font-family: var(--display);
  font-size: clamp(2.6rem, 5vw, 4rem);
  font-weight: 250;
  font-stretch: 100%;
  line-height: 0.92;
  letter-spacing: -0.03em;
  color: var(--tx);
  font-variant-numeric: tabular-nums;
}
.fact-num > span:last-child:not(.js-count) { font-size: 0.5em; color: var(--sig); font-weight: 400; }
.fact-lbl {
  margin-top: 0.9rem;
  font-size: 0.87rem;
  line-height: 1.5;
  color: var(--tx-2);
}

.duo-cols { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); display: grid; gap: var(--gap); }
@media (min-width: 860px) { .duo-cols { grid-template-columns: repeat(2, 1fr); } }
.duo-cols p { color: var(--tx-2); }
.statement {
  font-family: var(--display);
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  font-weight: 600;
  font-stretch: 104%;
  line-height: 1.22;
  letter-spacing: -0.02em;
  color: var(--tx) !important;
}

/* ── Arbeitsweise: echte Abfolge, deshalb nummeriert ────────────────────── */
.steps {
  margin-top: clamp(2.5rem, 5vw, 3.75rem);
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  counter-reset: step;
}
@media (min-width: 780px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1180px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.steps-hint { margin-top: 1.6rem; font-size: 0.9rem; color: var(--tx-3); }
.steps-hint + .steps { margin-top: 1.1rem; }

.step {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 2.6vw, 2rem) clamp(1.25rem, 2.2vw, 1.75rem) clamp(1.75rem, 3vw, 2.25rem);
  background: var(--surface);
  counter-increment: step;
  transition: background-color 0.35s var(--ease);
}
.step::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  margin-bottom: 1.1rem;
  font-family: var(--display);
  font-size: 0.78rem;
  font-weight: 520;
  font-stretch: 88%;
  letter-spacing: 0.16em;
  color: var(--sig);
  font-variant-numeric: tabular-nums;
  transition: color 0.3s var(--ease), letter-spacing 0.35s var(--ease);
}
.step h3 { color: var(--tx); transition: color 0.3s var(--ease); }
.step p { margin-top: 0.75rem; color: var(--tx-2); font-size: 0.95rem; transition: color 0.3s var(--ease); }

/* Der Streifen laeuft oben ein, weil die Schritte von oben durchnummeriert sind. */
.step::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--signal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease-out);
}

.step-more {
  margin-top: auto;
  padding-top: 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--display);
  font-size: 0.7rem;
  font-weight: 640;
  font-stretch: 74%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tx-3);
  transition: color 0.3s var(--ease);
}
.step-more i { font-style: normal; transition: transform 0.3s var(--ease); }

/* Die Schaltflaeche deckt die ganze Karte ab. Dadurch bleiben h3 und p echte
   Textelemente - ein <button> darf sie nicht enthalten - und die Karte ist
   trotzdem komplett anklickbar. */
.step-hit {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  cursor: pointer;
}
.step-hit:focus-visible { outline: 2px solid var(--sig); outline-offset: -5px; }

/* Beim Anfassen kippt die Karte auf Petrol - dunkel ist auf dieser Seite die
   Farbe des Arguments, und genau das steht im Modal dahinter. Umgeschaltet
   werden nur die Kontextfarben, nicht jede Auszeichnung einzeln. */
.step:hover,
.step:has(.step-hit:focus-visible) {
  background: var(--deep);
  --tx: var(--on-deep);
  --tx-2: var(--on-deep-2);
  --tx-3: var(--on-deep-3);
  --sig: var(--signal-up);
}
.step:hover::after,
.step:has(.step-hit:focus-visible)::after { transform: scaleX(1); }
.step:hover::before { letter-spacing: 0.3em; }
.step:hover .step-more { color: var(--signal-up); }
.step:hover .step-more i { transform: translateX(4px); }

/* ── Buch ───────────────────────────────────────────────────────────────── */
.book-layout { display: grid; gap: clamp(2.25rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 900px) {
  .book-layout { grid-template-columns: minmax(220px, 0.62fr) minmax(0, 1fr); }
}
.book-object {
  position: relative;
  transform: perspective(1400px) rotateY(-13deg) rotateX(2.5deg);
  transform-origin: left center;
  box-shadow:
    24px 34px 60px oklch(8% 0.018 202 / 0.6),
    2px 0 0 oklch(100% 0 0 / 0.1);
  transition: transform 0.6s var(--ease-out);
}
.book-object:hover { transform: perspective(1400px) rotateY(-6deg) rotateX(1deg); }
.book-object img { width: 100%; height: auto; }
/* Die perspektivische Drehung rendert das Cover rund 10 % breiter als seinen
   Kasten. Sobald es einspaltig ueber die ganze Breite laeuft, schiebt es die
   Seite dadurch seitlich auf - deshalb hier begrenzen. */
@media (max-width: 899px) {
  .book-visual { width: min(100%, 320px); }
}
.book-content h2 {
  margin-top: 0.7rem;
  font-size: clamp(1.9rem, 3.6vw, 3.2rem);
  font-weight: 740;
  font-stretch: 110%;
  line-height: 0.98;
  letter-spacing: -0.034em;
  color: var(--tx);
}
.book-sub {
  margin-top: 0.6rem;
  font-family: var(--display);
  font-size: 1.02rem;
  font-weight: 480;
  font-stretch: 100%;
  color: var(--tx-2);
}
.book-promise {
  margin-top: 1.5rem;
  font-family: var(--display);
  font-size: clamp(1.1rem, 2vw, 1.42rem);
  font-weight: 620;
  font-stretch: 104%;
  letter-spacing: -0.02em;
  color: var(--sig);
}
.book-facts { margin-top: 1.5rem; display: grid; gap: 0.65rem; }
.book-facts li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.95rem;
  color: var(--tx-2);
}
.book-facts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 1px;
  background: var(--sig);
}
/* Kein italic: Archivo bringt keinen kursiven Schnitt mit, der Browser wuerde
   ihn schraeg rechnen. Das Zitat markieren stattdessen Linie und Gewicht. */
.book-quote {
  margin: 1.75rem 0 0;
  padding-left: 1.1rem;
  border-left: 2px solid var(--signal);
  font-family: var(--display);
  font-size: clamp(1.05rem, 1.9vw, 1.32rem);
  font-weight: 520;
  font-stretch: 100%;
  line-height: 1.4;
  color: var(--tx);
}
.book-meta {
  font-family: var(--display);
  font-size: var(--fs-label);
  font-weight: 620;
  font-stretch: 70%;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tx-3);
}

/* ── FAQ ────────────────────────────────────────────────────────────────── */
.byline {
  margin-top: 1.75rem;
  padding-left: 1rem;
  border-left: 1px solid var(--rule-2);
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--tx-3);
}
.byline strong { color: var(--tx-2); font-weight: 600; }
.byline span { display: block; }

.faq { margin-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--rule); }
.faq-item { border-bottom: 1px solid var(--rule); }
.faq-item summary {
  display: flex;
  align-items: baseline;
  gap: 1.1rem;
  padding: 1.3rem 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--display);
  font-size: clamp(1.02rem, 1.6vw, 1.22rem);
  font-weight: 600;
  font-stretch: 102%;
  letter-spacing: -0.016em;
  line-height: 1.3;
  color: var(--tx);
  transition: color 0.2s var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "";
  flex: none;
  align-self: center;
  margin-left: auto;
  width: 13px;
  height: 13px;
  border-right: 1.5px solid var(--sig);
  border-bottom: 1.5px solid var(--sig);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.28s var(--ease);
}
.faq-item[open] summary::after { transform: rotate(225deg) translate(-3px, -3px); }
.faq-item summary:hover { color: var(--sig); }
.faq-answer { padding: 0 0 1.6rem; max-width: 68ch; display: grid; gap: 0.9rem; }
.faq-answer p { color: var(--tx-2); font-size: 0.985rem; }
.faq-answer a { color: var(--sig); text-underline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .faq-item[open] .faq-answer { animation: unfold 0.35s var(--ease-out); }
}
@keyframes unfold {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

/* ── Eigene Projekte ────────────────────────────────────────────────────── */
.plinks { margin-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--rule); }
.plink {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  transition: padding-left 0.3s var(--ease), background-color 0.3s var(--ease);
}
.plink:hover { padding-left: 1rem; background: var(--field); }
.plink h3 { color: var(--tx); transition: color 0.25s var(--ease); }
.plink:hover h3 { color: var(--sig); }
.plink p { margin-top: 0.3rem; color: var(--tx-2); font-size: 0.94rem; }
.plink b {
  margin-left: auto;
  font-family: var(--sans);
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--tx-3);
  transition: transform 0.25s var(--ease), color 0.25s var(--ease);
}
.plink:hover b { transform: translate(3px, -3px); color: var(--sig); }

/* ── Abschluss-Szene ────────────────────────────────────────────────────── */
.closing {
  position: relative;
  isolation: isolate;
  min-height: min(76svh, 640px);
  display: grid;
  align-content: center;
  padding-block: clamp(4rem, 9vw, 7rem);
  overflow: hidden;
}
.closing > .duo { position: absolute; inset: 0; z-index: -2; }
.closing::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    100deg,
    oklch(23% 0.025 202 / 0.94) 0%,
    oklch(23% 0.025 202 / 0.78) 46%,
    oklch(23% 0.025 202 / 0.34) 100%
  );
}
.closing h2 {
  margin-top: 0.8rem;
  font-size: clamp(2rem, 4.4vw, 3.9rem);
  font-weight: 740;
  font-stretch: 112%;
  line-height: 0.96;
  letter-spacing: -0.035em;
  color: var(--on-deep);
}

/* ── Kontakt ────────────────────────────────────────────────────────────── */
.contact-grid { display: grid; gap: clamp(2.25rem, 5vw, 4rem); }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1fr 1fr; } }
.contact h2 {
  font-size: clamp(1.85rem, 3.6vw, 3.1rem);
  font-weight: 720;
  font-stretch: 110%;
  line-height: 1;
  letter-spacing: -0.032em;
  color: var(--tx);
}
.contact-details { display: grid; gap: 1.4rem; align-content: start; }
.contact-details .big {
  font-family: var(--display);
  font-size: clamp(1.4rem, 3vw, 2.3rem);
  font-weight: 600;
  font-stretch: 100%;
  letter-spacing: -0.026em;
  color: var(--tx);
  text-decoration: none;
  border-bottom: 2px solid var(--signal);
  justify-self: start;
  transition: color 0.25s var(--ease);
}
.contact-details .big:hover { color: var(--sig); }
.contact-details address {
  font-style: normal;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--tx-2);
}

/* ── Fusszeile ──────────────────────────────────────────────────────────── */
.foot {
  background: var(--deep-2);
  border-top: 1px solid var(--rule-deep);
  padding-block: 2.25rem;
  font-size: 0.83rem;
  color: var(--on-deep-3);
}
.foot-inner { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; align-items: center; }
.foot-links { display: flex; gap: 1.5rem; margin-left: auto; }
.foot-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  transition: color 0.2s var(--ease);
}
.foot-links a:hover { color: var(--signal-up); }

/* ── Modale ─────────────────────────────────────────────────────────────── */
.modal {
  width: min(100% - 2rem, 42rem);
  max-height: min(86svh, 52rem);
  margin: auto;
  padding: 0;
  border: 1px solid var(--rule-deep-2);
  background: var(--deep-3);
  color: var(--on-deep);
  overflow: hidden;
}
.modal--wide { width: min(100% - 2rem, 56rem); }
.modal::backdrop {
  background: oklch(10% 0.018 202 / 0.74);
  backdrop-filter: blur(6px);
}
@media (prefers-reduced-motion: no-preference) {
  .modal[open] { animation: pop 0.32s var(--ease-out); }
  .modal[open]::backdrop { animation: fade 0.32s var(--ease-out); }
}
@keyframes pop {
  from { opacity: 0; transform: translateY(18px) scale(0.985); }
  to { opacity: 1; transform: none; }
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.modal-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 3;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: var(--on-deep-2);
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.modal-close:hover { background: var(--deep); color: var(--on-deep); }
.modal-body {
  max-height: min(86svh, 52rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(1.75rem, 4vw, 2.75rem);
}
.modal-tag {
  display: inline-block;
  font-family: var(--display);
  font-size: var(--fs-label);
  font-weight: 660;
  font-stretch: 68%;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--signal-up);
}
.modal h2 {
  margin-top: 0.6rem;
  font-size: clamp(1.6rem, 3.4vw, 2.5rem);
  font-weight: 720;
  font-stretch: 110%;
  line-height: 1;
  letter-spacing: -0.032em;
}
.mdl-lead {
  margin-top: 1.1rem;
  font-size: 1.02rem;
  line-height: 1.62;
  color: var(--on-deep-2);
}
.mdl-split { margin-top: 1.9rem; display: grid; gap: 1px; background: var(--rule-deep); border: 1px solid var(--rule-deep); }
@media (min-width: 720px) { .mdl-split { grid-template-columns: 1fr 1fr; } }
.mdl-col { padding: 1.2rem 1.35rem; background: var(--deep); }
.mdl-col h3 {
  font-size: var(--fs-label);
  font-weight: 660;
  font-stretch: 68%;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.mdl-col--yes h3 { color: var(--signal-up); }
.mdl-col--no h3 { color: var(--on-deep-3); }
.mdl-col ul { margin-top: 0.9rem; display: grid; gap: 0.6rem; }
.mdl-col li {
  position: relative;
  padding-left: 1.3rem;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--on-deep-2);
}
.mdl-col--yes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.58em;
  width: 8px;
  height: 1px;
  background: var(--signal-up);
}
.mdl-col--no li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.58em;
  width: 8px;
  height: 1px;
  background: var(--on-deep-3);
}
.mdl-h {
  margin-top: 1.9rem;
  font-size: var(--fs-label);
  font-weight: 660;
  font-stretch: 68%;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-deep-3);
}
.mdl-list { margin-top: 0.9rem; display: grid; gap: 0.55rem; }
.mdl-list li {
  position: relative;
  padding-left: 1.3rem;
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--on-deep-2);
}
.mdl-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 8px;
  height: 1px;
  background: var(--rule-deep-2);
}
.mdl-h + p { margin-top: 0.9rem; color: var(--on-deep-2); font-size: 0.96rem; }
.mdl-catch {
  margin-top: 1.9rem;
  padding: 1.15rem 1.3rem;
  background: var(--deep);
  border-left: 3px solid var(--signal);
  font-size: 0.96rem;
  line-height: 1.6;
  color: var(--on-deep-2);
}
.mdl-catch b { color: var(--on-deep); }
.modal-actions {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem 1.4rem;
  align-items: center;
}
.modal-book { margin-top: 1.35rem; display: grid; gap: 1.35rem; align-items: center; }
@media (min-width: 560px) { .modal-book { grid-template-columns: 120px minmax(0, 1fr); } }
.modal-book img { width: 100%; height: auto; box-shadow: 10px 14px 30px oklch(8% 0.018 202 / 0.55); }
.modal-book h2 { margin-top: 0; }
.modal-book p { margin-top: 0.7rem; color: var(--on-deep-2); font-size: 0.95rem; }
.modal > .modal-body > p { color: var(--on-deep-2); margin-top: 1rem; }
.modal-list { margin-top: 1.4rem; display: grid; gap: 0.55rem; }
.modal-list li {
  position: relative;
  padding-left: 1.3rem;
  font-size: 0.93rem;
  color: var(--on-deep-2);
}
.modal-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 8px;
  height: 1px;
  background: var(--signal-up);
}
.modal-dismiss {
  min-height: 44px;
  font-family: var(--display);
  font-size: 0.7rem;
  font-weight: 620;
  font-stretch: 74%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-deep-3);
  cursor: pointer;
  transition: color 0.2s var(--ease);
}
.modal-dismiss:hover { color: var(--on-deep); }

/* ── Hinweis des Kopierschutzes ─────────────────────────────────────────── */
/* protection.js erzeugt das Element erst bei Bedarf. Ohne diese Regeln stuende
   der Hinweis unformatiert am Seitenende. */
.content-protection-notice {
  position: fixed;
  z-index: 1150;
  left: 50%;
  bottom: 1.5rem;
  width: min(calc(100% - 2rem), 28rem);
  padding: 0.85rem 1.1rem;
  background: var(--deep-2);
  color: var(--on-deep);
  border-left: 3px solid var(--signal);
  box-shadow: 0 1rem 2.5rem oklch(8% 0.018 202 / 0.5);
  font-size: 0.85rem;
  line-height: 1.5;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 1rem);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.content-protection-notice.is-visible { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) {
  .content-protection-notice { transition: opacity 0.25s linear; transform: translate(-50%, 0); }
}

/* ── Scroll-Choreografie: nativ, ohne Bibliothek ────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .rise {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 6% entry 86%;
    }
    .wipe {
      animation: wipe linear both;
      animation-timeline: view();
      animation-range: entry 8% entry 92%;
    }
  }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; }
}
@keyframes wipe {
  from { opacity: 0; clip-path: inset(0 100% 0 0); }
  to { opacity: 1; clip-path: inset(0 0 0 0); }
}

/* Eroeffnung: die Reihenfolge baut sich einmal auf, 04 zuletzt und markiert. */
@media (prefers-reduced-motion: no-preference) {
  .js .rung {
    opacity: 0;
    animation: rung-in 0.6s var(--ease-out) forwards;
    animation-delay: calc(0.45s + var(--i) * 0.13s);
  }
  .js .rung-note {
    opacity: 0;
    animation: rung-in 0.6s var(--ease-out) 1.35s forwards;
  }
  .js .hero h1 > span {
    display: inline-block;
    opacity: 0;
    animation: rung-in 0.75s var(--ease-out) forwards;
    animation-delay: calc(var(--i) * 0.09s);
  }
}
@keyframes rung-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* ── Druck ──────────────────────────────────────────────────────────────── */
@media print {
  .head, .hero-media, .hero-scrim, .split-media, .closing > .duo,
  .nav-toggle, .modal, .btn, .hero-tools { display: none !important; }
  body { background: #fff; color: #000; }
  .section { background: #fff !important; color: #000 !important; padding-block: 1.5rem; }
}


/* ══ BELEGE UND ANTWORTEN ═══════════════════════════════════════════════════
   Bausteine für Auffindbarkeit in KI-Antworten. Sie lesen ausschliesslich die
   Kontext-Token (--tx, --rule, --sig, --surface, --field) und funktionieren
   deshalb auf Petrol wie auf Papier ohne zweite Regel.
   ─────────────────────────────────────────────────────────────────────────── */

/* Antwortpassage: beantwortet eine Frage sofort und bleibt ohne ihr Umfeld
   verständlich. KI-Systeme entnehmen Passagen, nicht Seiten. */
.answer {
  max-width: 58rem;
  padding-left: 1.15rem;
  border-left: 2px solid var(--sig);
}
.lead.answer { border-left-width: 3px; }

/* Frage als Zwischenüberschrift */
.qhead {
  margin-top: clamp(2rem, 3.6vw, 2.9rem);
  margin-bottom: 0.7rem;
  max-width: 32ch;
  font-family: var(--display);
  font-size: var(--fs-h3);
  font-weight: 640;
  font-stretch: 106%;
  line-height: 1.18;
  letter-spacing: -0.022em;
  color: var(--tx);
}

/* ── Datentabelle mit Quellenangabe ─────────────────────────────────────── */
.datatable { margin: clamp(1.9rem, 3.4vw, 2.7rem) 0 0; padding: 0; }
.datatable table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.datatable caption,
.datatable figcaption {
  color: var(--tx-3);
  text-align: left;
}
.datatable caption {
  margin-bottom: 0.75rem;
  font-family: var(--display);
  font-size: var(--fs-label);
  font-weight: 640;
  font-stretch: 68%;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.datatable th,
.datatable td {
  padding: 0.78rem 0.9rem;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
  line-height: 1.55;
}
.datatable thead th {
  border-bottom: 2px solid var(--rule-2);
  color: var(--tx-2);
  font-family: var(--display);
  font-size: var(--fs-label);
  font-weight: 640;
  font-stretch: 68%;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}
.datatable tbody th {
  color: var(--tx);
  font-family: var(--display);
  font-weight: 620;
  font-stretch: 100%;
  white-space: nowrap;
}
.datatable td { color: var(--tx-2); }
.datatable td.num {
  color: var(--tx);
  font-weight: 640;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.datatable tbody tr:hover { background: var(--field); }
/* Hervorgehobene Zeile. BEWUSST NICHT im Signalton: der ist laut
   Design-System Entscheidungen vorbehalten, und eine Kennzahl ist keine.
   Dieselbe Begründung wie beim Leseprogress. */
.datatable tr.key > * { background: var(--field); }
.datatable tr.key th,
.datatable tr.key td { color: var(--tx); font-weight: 650; }
.datatable figcaption { margin-top: 0.85rem; font-size: 0.78rem; line-height: 1.6; }
.datatable a { color: var(--sig); font-weight: 620; text-underline-offset: 3px; }
/* Was auf eine Tabelle folgt, braucht Luft, sonst klebt es an der Quellenzeile */
.datatable + p { margin-top: clamp(1.4rem, 2.4vw, 2rem); }

/* Breite Tabellen rollen in sich. Die Seite darf das nie. */
.datatable.wide { overflow-x: auto; overscroll-behavior-x: contain; }
.datatable.wide table { min-width: 44rem; }

/* ── Belegliste ─────────────────────────────────────────────────────────── */
.factlist {
  margin-top: clamp(1.9rem, 3.4vw, 2.5rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: 1px;
  background: var(--rule);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.factlist li {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: clamp(1.15rem, 2vw, 1.6rem);
  background: var(--surface);
}
.factlist b {
  font-family: var(--display);
  font-size: clamp(1.9rem, 3.2vw, 2.7rem);
  font-weight: 250;
  font-stretch: 106%;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--sig);
}
.factlist span { color: var(--tx-2); font-size: 0.92rem; line-height: 1.6; }
.factlist cite {
  margin-top: auto;
  padding-top: 0.55rem;
  font-style: normal;
  font-size: 0.76rem;
  color: var(--tx-3);
}
.factlist cite a { color: inherit; text-underline-offset: 3px; }
.factlist cite a:hover { color: var(--sig); }

/* Aktualisierungsdatum in der Fusszeile */
.foot-date {
  display: inline-block;
  margin-top: 0.4rem;
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
  color: var(--tx-3);
}