/* ── 01-tokens.css ── */
@font-face {
  font-family: "Inter";
  src: url(fonts/InterVariable.woff2) format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Farben – Schwarz mit kaum merklichem kühlem Hauch */
  --schwarz: #070b0c;
  --grund-2: #0a0f10;
  --flaeche: #0d1213;
  --flaeche-2: #121819;
  --flaeche-3: #182021;
  --linie: rgba(200, 222, 220, 0.09);
  --linie-stark: rgba(200, 222, 220, 0.17);
  --text: #eef2f1;
  --text-2: #a9b4b3;
  --text-3: #808c8b;
  --kuehl: #a9c2bf;
  --orange: #fc8604;
  --orange-tinte: #0d0d0d;
  --orange-schein: rgba(252, 134, 4, 0.32);
  --gold: #ffa94d;

  /* Schrift */
  --schrift: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Raster */
  --breite: 1320px;
  --rand: clamp(20px, 5.2vw, 96px);
  --kopf-hoehe: 76px;
  --abschnitt: clamp(104px, 13vw, 200px);
  --radius: 22px;
  --radius-klein: 12px;

  /* Bewegung */
  --e-aus: cubic-bezier(0.16, 1, 0.3, 1);
  --e-ein-aus: cubic-bezier(0.76, 0, 0.24, 1);
  --e-weich: cubic-bezier(0.33, 1, 0.68, 1);
  --e-feder: cubic-bezier(0.34, 1.4, 0.64, 1);
  --t-schnell: 0.25s;
  --t-mittel: 0.6s;
  --t-lang: 1.2s;
}

/* ── 02-basis.css ── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  color-scheme: dark;
  background: var(--schwarz);
  scroll-padding-top: calc(var(--kopf-hoehe) + 24px);
}

html.ruhig {
  scroll-behavior: auto;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--schwarz);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 400;
  font-feature-settings: "cv05", "calt";
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

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

img {
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}

p,
h1,
h2,
h3,
h4,
ul,
ol,
figure,
blockquote {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

::selection {
  background: var(--orange);
  color: var(--orange-tinte);
}

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

[hidden] {
  display: none !important;
}

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

.skip {
  position: fixed;
  left: 16px;
  top: 12px;
  z-index: 200;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--orange);
  color: var(--orange-tinte);
  font-weight: 600;
  transform: translateY(-160%);
  transition: transform var(--t-schnell) var(--e-aus);
}

.skip:focus {
  transform: none;
}

main:focus {
  outline: none;
}

/* Matte Körnung über allem, nicht klickbar */
.koernung {
  position: fixed;
  inset: -50%;
  z-index: 90;
  pointer-events: none;
  background-image: url(bilder/koernung.png);
  background-size: 256px 256px;
  opacity: 0.055;
  mix-blend-mode: overlay;
}

.wrap {
  width: 100%;
  max-width: calc(var(--breite) + 2 * var(--rand));
  margin-inline: auto;
  padding-inline: var(--rand);
}

.zahl {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum", "cv05", "case";
}

.abschnitt {
  padding-block: var(--abschnitt);
  position: relative;
}

.no-js .js-only {
  display: none !important;
}

/* ── 03-typo.css ── */
h1,
h2,
h3,
h4 {
  font-weight: 560;
  letter-spacing: -0.03em;
  line-height: 1.08;
  text-wrap: balance;
}

p,
li {
  text-wrap: pretty;
}

.d1 {
  font-size: clamp(2.9rem, 7.4vw, 8.2rem);
  line-height: 0.93;
  letter-spacing: -0.055em;
  font-weight: 560;
}

h2,
.d2 {
  font-size: clamp(2.35rem, 5.2vw, 5.2rem);
  line-height: 0.98;
  letter-spacing: -0.048em;
  font-weight: 540;
}

.d2--klein {
  font-size: clamp(2rem, 3.8vw, 3.7rem);
}

h3,
.d3 {
  font-size: clamp(1.22rem, 1.55vw, 1.55rem);
  letter-spacing: -0.022em;
  line-height: 1.2;
}

.lead {
  font-size: clamp(1.1rem, 1.35vw, 1.32rem);
  line-height: 1.55;
  color: var(--text-2);
  max-width: 58ch;
}

.text p,
.text li {
  max-width: 65ch;
  color: var(--text-2);
}

.text p + p {
  margin-top: 1em;
}

.text strong {
  color: var(--text);
  font-weight: 600;
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 0.74rem;
  font-weight: 560;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
  line-height: 1.4;
}

.halt-nr {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  height: 22px;
  padding-inline: 8px;
  border: 1px solid var(--linie-stark);
  border-radius: 999px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.punkt-orange {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 4px rgba(252, 134, 4, 0.14), 0 0 18px rgba(252, 134, 4, 0.45);
}

.kleingedruckt {
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--text-3);
  max-width: 62ch;
}

.etikett {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 11px;
  border: 1px dashed var(--linie-stark);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 560;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2);
  white-space: nowrap;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text);
}

.status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid var(--text-2);
  transition: background 0.4s var(--e-aus), border-color 0.4s var(--e-aus), box-shadow 0.4s var(--e-aus);
}

.status[data-stufe="beobachten"]::before {
  border-color: var(--gold);
  background: linear-gradient(90deg, var(--gold) 50%, transparent 50%);
}

.status[data-stufe="handeln"]::before {
  border-color: var(--orange);
  background: var(--orange);
  box-shadow: 0 0 12px var(--orange-schein);
}

/* ── 04-kopf-fuss.css ── */
/* ───────── Kopf ───────── */
.kopf {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  height: var(--kopf-hoehe);
  transition: transform 0.55s var(--e-aus), background-color 0.4s var(--e-aus), border-color 0.4s var(--e-aus);
  border-bottom: 1px solid transparent;
  view-transition-name: kopf;
}

.kopf::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(7, 11, 12, 0.62);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  opacity: 0;
  transition: opacity 0.4s var(--e-aus);
}

.kopf--fest::before,
.no-js .kopf::before {
  opacity: 1;
}

.kopf--fest {
  border-bottom-color: var(--linie);
}

.kopf--weg {
  transform: translateY(-100%);
}

.menue-offen .kopf,
.panel-offen .kopf {
  transform: none;
}

.kopf-innen {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 28px;
}

.kopf-marke {
  display: block;
  width: 108px;
  flex: none;
  margin-right: auto;
  padding: 6px 0;
}

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

.kopf-liste {
  display: flex;
  align-items: center;
  gap: 4px;
}

.kopf-punkt {
  position: relative;
  display: flex;
  align-items: center;
}

.kopf-link {
  position: relative;
  display: block;
  padding: 10px 14px;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text-2);
  transition: color 0.3s var(--e-aus);
}

.kopf-link::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 4px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s var(--e-aus);
}

.kopf-link:hover,
.kopf-link[aria-current="page"],
.kopf-punkt.ist-offen .kopf-link {
  color: var(--text);
}

.kopf-link:hover::after,
.kopf-link[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

.kopf-panel-knopf {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-left: -10px;
  border-radius: 50%;
  color: var(--text-3);
  transition: transform 0.4s var(--e-aus), color 0.3s;
}

.kopf-panel-knopf svg {
  width: 10px;
  height: 10px;
}

.kopf-punkt.ist-offen .kopf-panel-knopf {
  transform: rotate(180deg);
  color: var(--text);
}

.kopf-panel {
  position: absolute;
  top: calc(100% + 14px);
  left: -24px;
  width: min(560px, 80vw);
  padding: 22px;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: rgba(13, 18, 19, 0.82);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  backdrop-filter: blur(24px) saturate(140%);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.985);
  transform-origin: 30px 0;
  transition: opacity 0.35s var(--e-aus), transform 0.5s var(--e-aus), visibility 0s linear 0.5s;
}

.kopf-panel::before {
  content: "";
  position: absolute;
  inset: -16px 0 auto;
  height: 16px;
}

.kopf-punkt.ist-offen .kopf-panel {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.35s var(--e-aus), transform 0.5s var(--e-aus), visibility 0s;
}

.panel-liste {
  margin-top: 12px;
  display: grid;
  gap: 2px;
}

.panel-liste a {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 10px;
  padding: 12px 12px;
  border-radius: var(--radius-klein);
  transition: background-color 0.3s var(--e-aus);
}

.panel-liste a:hover,
.panel-liste a:focus-visible {
  background: rgba(255, 255, 255, 0.045);
}

.panel-nr {
  font-size: 0.75rem;
  color: var(--text-3);
  padding-top: 3px;
  font-variant-numeric: tabular-nums;
}

.panel-liste strong {
  display: block;
  font-weight: 560;
  font-size: 0.98rem;
  letter-spacing: -0.01em;
}

.panel-liste span span {
  display: block;
  font-size: 0.85rem;
  color: var(--text-2);
  line-height: 1.45;
  margin-top: 2px;
}

.panel-liste li {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s var(--e-aus), transform 0.5s var(--e-aus);
}

.kopf-punkt.ist-offen .panel-liste li {
  opacity: 1;
  transform: none;
}

.panel-liste li:nth-child(2) { transition-delay: 0.04s; }
.panel-liste li:nth-child(3) { transition-delay: 0.08s; }
.panel-liste li:nth-child(4) { transition-delay: 0.12s; }
.panel-liste li:nth-child(5) { transition-delay: 0.16s; }

.kopf-fortschritt {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  pointer-events: none;
}

.kopf-fortschritt i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, rgba(252, 134, 4, 0.2), var(--orange));
  transform: scaleX(0);
  transform-origin: left;
  box-shadow: 0 0 10px rgba(252, 134, 4, 0.5);
}

.kopf-menue-knopf {
  display: none;
  position: relative;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--linie-stark);
}

.kopf-menue-knopf i {
  position: absolute;
  left: 14px;
  right: 14px;
  height: 1.5px;
  background: var(--text);
  transition: transform 0.5s var(--e-aus), top 0.5s var(--e-aus);
}

.kopf-menue-knopf i:first-of-type { top: 19px; }
.kopf-menue-knopf i:last-of-type { top: 26px; }

.menue-offen .kopf-menue-knopf i:first-of-type {
  top: 22px;
  transform: rotate(45deg);
}

.menue-offen .kopf-menue-knopf i:last-of-type {
  top: 22px;
  transform: rotate(-45deg);
}

/* Vollbildmenü mobil */
.mobil-menue {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(var(--kopf-hoehe) + 28px) var(--rand) 36px;
  background: rgba(7, 11, 12, 0.94);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.7s var(--e-ein-aus), visibility 0s linear 0.7s;
  visibility: hidden;
  overflow-y: auto;
}

.menue-offen .mobil-menue {
  clip-path: inset(0 0 0 0);
  visibility: visible;
  transition: clip-path 0.7s var(--e-ein-aus), visibility 0s;
}

.mobil-liste a {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 10px 0;
  font-size: clamp(2rem, 9vw, 3.2rem);
  font-weight: 540;
  letter-spacing: -0.045em;
  line-height: 1.05;
  border-bottom: 1px solid var(--linie);
}

.mobil-liste a span {
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  transform: translateY(-0.6em);
}

.mobil-liste li {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.5s var(--e-aus), transform 0.8s var(--e-aus);
}

.menue-offen .mobil-liste li {
  opacity: 1;
  transform: none;
}

.mobil-liste li:nth-child(1) { transition-delay: 0.18s; }
.mobil-liste li:nth-child(2) { transition-delay: 0.23s; }
.mobil-liste li:nth-child(3) { transition-delay: 0.28s; }
.mobil-liste li:nth-child(4) { transition-delay: 0.33s; }
.mobil-liste li:nth-child(5) { transition-delay: 0.38s; }
.mobil-liste li:nth-child(6) { transition-delay: 0.43s; }

.mobil-menue-fuss {
  margin-top: 40px;
  display: grid;
  gap: 8px;
  color: var(--text-2);
}

.mobil-menue-fuss a {
  font-size: 1.05rem;
}

@media (max-width: 1020px) {
  .kopf-nav,
  .kopf-kontakt {
    display: none;
  }

  .kopf-menue-knopf {
    display: block;
  }

  .mobil-menue {
    display: flex;
  }
}

/* ───────── Fuß mit Finale ───────── */
.fuss {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--linie);
  background: var(--schwarz);
  isolation: isolate;
}

.fuss-buehne {
  position: absolute;
  inset: 0;
  z-index: -1;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 40%, #000 70%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 40%, #000 70%, transparent 100%);
  opacity: 0.8;
}

.fuss-finale {
  padding-top: clamp(110px, 14vw, 220px);
  padding-bottom: clamp(70px, 9vw, 140px);
}

.finale-link {
  display: block;
  width: fit-content;
  margin-top: 28px;
  font-size: clamp(2.8rem, 8.4vw, 9.4rem);
  font-weight: 560;
  letter-spacing: -0.06em;
  line-height: 0.92;
  color: var(--text);
  transition: color 0.5s var(--e-aus);
}

.finale-link .bst {
  display: inline-block;
  transition: transform 0.7s var(--e-feder), color 0.5s var(--e-aus);
  transition-delay: calc(var(--i, 0) * 14ms);
}

.finale-link .bst-wort {
  display: inline-block;
  white-space: nowrap;
}

.finale-link:hover .bst,
.finale-link:focus-visible .bst {
  transform: translateY(-0.09em);
}

.finale-link:hover .bst:last-child,
.finale-link:focus-visible .bst:last-child {
  color: var(--orange);
  text-shadow: 0 0 40px var(--orange-schein);
}

.finale-raster {
  margin-top: clamp(36px, 5vw, 72px);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px;
  align-items: end;
}

.finale-text {
  color: var(--text-2);
  max-width: 44ch;
}

.finale-kanal {
  display: block;
  padding: 22px 24px;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.02);
  transition: border-color 0.4s var(--e-aus), background-color 0.4s var(--e-aus);
}

.finale-kanal:hover {
  border-color: var(--linie-stark);
  background: rgba(255, 255, 255, 0.04);
}

.finale-kanal .kicker {
  display: flex;
  justify-content: space-between;
}

.finale-kanal strong {
  display: block;
  margin-top: 10px;
  font-size: clamp(1.1rem, 1.6vw, 1.45rem);
  font-weight: 540;
  letter-spacing: -0.02em;
}

.fuss-leiste {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 28px 40px;
  align-items: center;
  padding-block: 30px 36px;
  border-top: 1px solid var(--linie);
  font-size: 0.88rem;
  color: var(--text-3);
}

.fuss-marke {
  width: 84px;
  opacity: 0.9;
}

.fuss-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
}

.fuss-nav a,
.fuss-recht a {
  color: var(--text-2);
  transition: color 0.3s;
}

.fuss-nav a:hover,
.fuss-recht a:hover {
  color: var(--text);
}

.fuss-recht {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 22px;
}

.bewegung-knopf {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px 7px 10px;
  border: 1px solid var(--linie-stark);
  border-radius: 999px;
  font-size: 0.8rem;
  color: var(--text-2);
  transition: color 0.3s, border-color 0.3s;
}

.bewegung-knopf:hover {
  color: var(--text);
  border-color: rgba(200, 222, 220, 0.3);
}

.bewegung-knopf::before {
  content: "";
  width: 12px;
  height: 12px;
  background: linear-gradient(90deg, currentColor 0 35%, transparent 35% 65%, currentColor 65%);
  border-radius: 1px;
}

.bewegung-knopf[aria-pressed="true"]::before {
  background: none;
  width: 0;
  height: 0;
  border-left: 10px solid currentColor;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-radius: 0;
}

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

  .fuss-leiste {
    grid-template-columns: 1fr;
  }
}

/* ── 05-bausteine.css ── */
/* ───────── Schaltflächen ───────── */
.knopf {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 17px 20px 17px 28px;
  border-radius: 999px;
  background: var(--orange);
  color: var(--orange-tinte);
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
  overflow: hidden;
  isolation: isolate;
  transition: box-shadow 0.5s var(--e-aus), transform 0.5s var(--e-aus);
  will-change: transform;
}

.knopf::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: #ffa13a;
  transform: translateY(101%);
  transition: transform 0.55s var(--e-aus);
}

.knopf:hover::before,
.knopf:focus-visible::before {
  transform: none;
}

.knopf:hover,
.knopf:focus-visible {
  box-shadow: 0 18px 50px -14px var(--orange-schein), 0 0 0 1px rgba(252, 134, 4, 0.3);
}

.knopf > span {
  display: inline-block;
}

.pfeil {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--orange-tinte);
  color: var(--orange);
  font-style: normal;
  font-size: 0.9rem;
  overflow: hidden;
}

.pfeil::before,
.pfeil::after {
  content: "↗";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transition: transform 0.55s var(--e-aus);
}

.pfeil::after {
  transform: translate(-120%, 120%);
}

.knopf:hover .pfeil::before,
a:hover > .pfeil::before {
  transform: translate(120%, -120%);
}

.knopf:hover .pfeil::after,
a:hover > .pfeil::after {
  transform: none;
}

.knopf--hohl {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--linie-stark);
}

.knopf--hohl::before {
  background: rgba(255, 255, 255, 0.07);
}

.knopf--hohl:hover {
  box-shadow: none;
}

.knopf--hohl .pfeil {
  background: var(--text);
  color: var(--schwarz);
}

.knopf--klein {
  padding: 11px 18px;
  font-size: 0.9rem;
}

/* Textverweis mit wischender Linie und fliegendem Pfeil */
.textlink {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-block: 4px;
  font-weight: 540;
  color: var(--text);
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat,
    linear-gradient(var(--linie-stark), var(--linie-stark)) 0 100% / 100% 1px no-repeat;
  transition: background-size 0.6s var(--e-aus);
}

.textlink:hover {
  background-size: 0 1px, 100% 1px;
  background-position: 100% 100%, 0 100%;
  animation: textlink-wisch 0.9s var(--e-aus) forwards;
}

@keyframes textlink-wisch {
  0% { background-size: 100% 1px, 100% 1px; background-position: 100% 100%, 0 100%; }
  45% { background-size: 0% 1px, 100% 1px; background-position: 100% 100%, 0 100%; }
  46% { background-size: 0% 1px, 100% 1px; background-position: 0 100%, 0 100%; }
  100% { background-size: 100% 1px, 100% 1px; background-position: 0 100%, 0 100%; }
}

.textlink i {
  font-style: normal;
  display: inline-block;
  transition: transform 0.5s var(--e-aus);
}

.textlink:hover i {
  transform: translate(3px, -3px);
}

.textlink i.runter {
  transform: none;
}

.textlink:hover i.runter {
  transform: translateY(4px);
}

/* ───────── Glas + Licht, das dem Cursor folgt ───────── */
.glas {
  position: relative;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012) 42%, rgba(255, 255, 255, 0.008));
  -webkit-backdrop-filter: blur(22px) saturate(130%);
  backdrop-filter: blur(22px) saturate(130%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 40px 90px -50px rgba(0, 0, 0, 0.9);
}

[data-licht] {
  --mx: 50%;
  --my: 50%;
  --licht: 0;
  position: relative;
  isolation: isolate;
}

[data-licht]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(520px circle at var(--mx) var(--my), rgba(220, 235, 233, 0.065), transparent 46%);
  opacity: var(--licht);
  transition: opacity 0.5s var(--e-aus);
  pointer-events: none;
}

[data-licht]::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(360px circle at var(--mx) var(--my), rgba(252, 134, 4, 0.55), rgba(252, 134, 4, 0.08) 38%, transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: var(--licht);
  transition: opacity 0.5s var(--e-aus);
  pointer-events: none;
}

/* ───────── Schieberegler ───────── */
.regler {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 4px 12px;
}

.regler label {
  font-size: 0.84rem;
  color: var(--text-2);
}

.regler output {
  font-size: 0.95rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.regler input[type="range"] {
  --anteil: 50%;
  grid-column: 1 / -1;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 26px;
  margin: 0;
  background: transparent;
  cursor: ew-resize;
}

.regler input[type="range"]::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--kuehl) 0 var(--anteil), rgba(200, 222, 220, 0.16) var(--anteil));
}

.regler input[type="range"]::-moz-range-track {
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--kuehl) 0 var(--anteil), rgba(200, 222, 220, 0.16) var(--anteil));
}

.regler input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -8.5px;
  border-radius: 50%;
  background: var(--text);
  border: 5px solid var(--schwarz);
  box-shadow: 0 0 0 1px var(--linie-stark), 0 0 0 0 rgba(252, 134, 4, 0);
  transition: box-shadow 0.35s var(--e-aus), transform 0.35s var(--e-feder);
}

.regler input[type="range"]::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--text);
  border: 5px solid var(--schwarz);
  box-shadow: 0 0 0 1px var(--linie-stark);
}

.regler input[type="range"]:hover::-webkit-slider-thumb,
.regler input[type="range"]:focus-visible::-webkit-slider-thumb,
.regler input[type="range"]:active::-webkit-slider-thumb {
  transform: scale(1.18);
  background: var(--orange);
  box-shadow: 0 0 0 1px rgba(252, 134, 4, 0.5), 0 0 22px rgba(252, 134, 4, 0.45);
}

.regler input[type="range"]:focus-visible {
  outline: none;
}

.regler input[type="range"]:focus-visible::-webkit-slider-runnable-track {
  outline: 2px solid var(--orange);
  outline-offset: 8px;
}

/* ───────── Umschalter (zwei Szenarien) ───────── */
.umschalter {
  position: relative;
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  padding: 4px;
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.25);
  isolation: isolate;
}

.umschalter::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  border-radius: 999px;
  background: var(--text);
  transition: transform 0.6s var(--e-feder);
}

.umschalter[data-wahl="1"]::before {
  transform: translateX(100%);
}

.umschalter button {
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 560;
  white-space: nowrap;
  color: var(--text-2);
  transition: color 0.4s var(--e-aus);
}

.umschalter button[aria-pressed="true"] {
  color: var(--schwarz);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  padding: 7px 13px;
  border: 1px solid var(--linie-stark);
  border-radius: 999px;
  font-size: 0.8rem;
  color: var(--text-2);
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.chip:hover,
.chip[aria-pressed="true"] {
  color: var(--text);
  border-color: rgba(200, 222, 220, 0.36);
  background: rgba(255, 255, 255, 0.05);
}

/* ───────── Aufklapper mit animierter Höhe ───────── */
details {
  interpolate-size: allow-keywords;
}

details::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size 0.6s var(--e-aus), content-visibility 0.6s allow-discrete;
}

details[open]::details-content {
  block-size: auto;
}

summary {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  list-style: none;
  font-size: 0.9rem;
  font-weight: 540;
  color: var(--text-2);
  transition: color 0.3s;
}

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

summary::before {
  content: "+";
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--linie-stark);
  border-radius: 50%;
  font-size: 0.9rem;
  line-height: 1;
  transition: transform 0.5s var(--e-aus);
}

details[open] > summary::before {
  transform: rotate(45deg);
}

summary:hover {
  color: var(--text);
}

/* ───────── Listen, Tabellen, Hinweise ───────── */
.ergebnisliste {
  display: grid;
  gap: 14px;
}

.ergebnisliste li {
  position: relative;
  padding-left: 30px;
  color: var(--text-2);
}

.ergebnisliste li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 14px;
  height: 1px;
  background: var(--orange);
}

.tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}

.tabelle caption {
  text-align: left;
  color: var(--text-3);
  font-size: 0.8rem;
  padding-bottom: 8px;
}

.tabelle th,
.tabelle td {
  padding: 9px 0;
  border-bottom: 1px solid var(--linie);
  text-align: left;
  font-weight: 400;
}

.tabelle td {
  text-align: right;
}

.tabelle thead th {
  color: var(--text-3);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.tabelle thead th:not(:first-child) {
  text-align: right;
}

/* ───────── Formular ───────── */
.feld {
  position: relative;
  display: grid;
  gap: 8px;
}

.feld label {
  font-size: 0.84rem;
  color: var(--text-2);
}

.feld label span {
  color: var(--text-3);
}

.feld input,
.feld select,
.feld textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius-klein);
  background: rgba(0, 0, 0, 0.28);
  color: var(--text);
  transition: border-color 0.3s var(--e-aus), box-shadow 0.3s var(--e-aus), background-color 0.3s;
}

.feld textarea {
  resize: vertical;
  min-height: 140px;
  line-height: 1.55;
}

.feld select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%), linear-gradient(135deg, var(--text-2) 50%, transparent 50%);
  background-position: calc(100% - 22px) 52%, calc(100% - 16px) 52%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
}

.feld select option {
  background: var(--flaeche-2);
}

.feld input:focus,
.feld select:focus,
.feld textarea:focus {
  outline: none;
  border-color: rgba(252, 134, 4, 0.7);
  box-shadow: 0 0 0 4px rgba(252, 134, 4, 0.12), 0 0 30px -6px rgba(252, 134, 4, 0.3);
  background-color: rgba(0, 0, 0, 0.4);
}

.kopier-knopf {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--linie-stark);
  border-radius: 999px;
  font-size: 0.82rem;
  color: var(--text-2);
  transition: color 0.3s, border-color 0.3s, background-color 0.3s;
}

.kopier-knopf:hover {
  color: var(--text);
  border-color: rgba(200, 222, 220, 0.36);
}

.kopier-knopf svg {
  width: 14px;
  height: 14px;
}

.kopier-knopf .haken {
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  transition: stroke-dashoffset 0.5s var(--e-aus);
}

.kopier-knopf .blatt {
  transition: opacity 0.3s;
}

.kopier-knopf.ist-kopiert {
  color: var(--text);
  border-color: rgba(252, 134, 4, 0.6);
}

.kopier-knopf.ist-kopiert .haken {
  stroke-dashoffset: 0;
}

.kopier-knopf.ist-kopiert .blatt {
  opacity: 0;
}

.kopier-status {
  min-height: 1.4em;
  font-size: 0.84rem;
  color: var(--text-2);
}

/* ── 06-bewegung.css ── */
/* ───────── Erscheinen beim Scrollen ─────────
   Nur mit .js aktiv; ohne JavaScript ist alles sofort sichtbar.            */
.js [data-einblenden] {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity 1s var(--e-aus), transform 1.2s var(--e-aus);
  transition-delay: calc(var(--v, 0) * 1ms);
}

.js [data-einblenden].ist-da {
  opacity: 1;
  transform: none;
}

/* Zeilen aus Masken + animiertes Schriftgewicht */
.zeile {
  display: block;
}

.js [data-zeilen] .zeile {
  overflow: hidden;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}

.js [data-zeilen] .zeile > span {
  display: block;
  transform: translate3d(0, 108%, 0) rotate(2deg);
  transform-origin: 0 100%;
  font-variation-settings: "wght" 300;
  transition: transform 1.25s var(--e-aus), font-variation-settings 1.6s var(--e-aus);
}

.js [data-zeilen].ist-da .zeile > span {
  transform: none;
  font-variation-settings: "wght" 560;
}

.js [data-zeilen] .zeile:nth-child(2) > span { transition-delay: 0.09s; }
.js [data-zeilen] .zeile:nth-child(3) > span { transition-delay: 0.18s; }
.js [data-zeilen] .zeile:nth-child(4) > span { transition-delay: 0.27s; }

.zeile--leise > span {
  color: var(--text-3);
}

/* Wörter aus Masken (Überschriften h2) */
.js [data-woerter] .wort {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}

.js [data-woerter] .wort > span {
  display: inline-block;
  transform: translate3d(0, 105%, 0);
  transition: transform 1.1s var(--e-aus);
  transition-delay: calc(var(--i, 0) * 45ms);
}

.js [data-woerter].ist-da .wort > span {
  transform: none;
}

/* Wort für Wort aufhellen, an den Scrollfortschritt gekoppelt */
.js [data-wortweise] .ww {
  color: rgba(238, 242, 241, 0.16);
  transition: color 0.35s linear;
}

.js [data-wortweise] .ww.an {
  color: var(--text);
}

/* Bildmaske */
.js [data-maske] {
  clip-path: inset(100% 0 0 0 round var(--radius));
  transition: clip-path 1.5s var(--e-ein-aus);
}

.js [data-maske] img {
  transform: scale(1.18);
  transition: transform 2s var(--e-aus);
}

.js [data-maske].ist-da {
  clip-path: inset(0 0 0 0 round var(--radius));
}

.js [data-maske].ist-da img {
  transform: none;
}

/* ───────── Laufband ───────── */
.laufband {
  position: relative;
  overflow: hidden;
  padding-block: clamp(36px, 5vw, 64px);
  border-block: 1px solid var(--linie);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.laufband-spur {
  display: flex;
  width: max-content;
  will-change: transform;
}

.laufband-reihe {
  display: flex;
  flex: none;
}

.laufband-reihe li {
  display: flex;
  align-items: center;
  white-space: nowrap;
  font-size: clamp(1.6rem, 3.4vw, 3.3rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  color: var(--text-3);
  transition: color 0.5s var(--e-aus), text-shadow 0.5s var(--e-aus);
}

.laufband-reihe li::after {
  content: "";
  width: 9px;
  height: 9px;
  margin-inline: clamp(24px, 3vw, 48px);
  border: 1.5px solid var(--linie-stark);
  border-radius: 50%;
  transition: border-color 0.5s, background-color 0.5s, box-shadow 0.5s;
}

.laufband-reihe li.im-fokus {
  color: var(--text);
  text-shadow: 0 0 34px rgba(220, 235, 233, 0.22);
}

.laufband-reihe li.im-fokus::after {
  border-color: var(--orange);
  background: var(--orange);
  box-shadow: 0 0 14px var(--orange-schein);
}

/* ───────── Cursor-Begleiter (nur feine Zeiger) ───────── */
.cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 120;
  pointer-events: none;
  display: none;
}

.hat-cursor .cursor {
  display: block;
}

.cursor-ring {
  position: absolute;
  left: -18px;
  top: -18px;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(238, 242, 241, 0.45);
  border-radius: 50%;
  transition: transform 0.45s var(--e-aus), border-color 0.3s, background-color 0.3s, opacity 0.3s;
}

.cursor-label {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%) scale(0.6);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--schwarz);
  opacity: 0;
  white-space: nowrap;
  transition: opacity 0.3s, transform 0.45s var(--e-aus);
}

.cursor.ist-link .cursor-ring {
  transform: scale(1.65);
  background: rgba(238, 242, 241, 0.06);
  border-color: rgba(238, 242, 241, 0.25);
}

.cursor.ist-label .cursor-ring {
  transform: scale(2.1);
  background: var(--text);
  border-color: transparent;
}

.cursor.ist-label .cursor-label {
  opacity: 1;
  transform: translate(-50%, -50%);
}

.cursor.ist-text .cursor-ring {
  opacity: 0;
}

.cursor.ist-weg .cursor-ring {
  opacity: 0;
}

/* ───────── Intro ───────── */
.intro {
  display: none;
}

.intro-an .intro {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  place-items: center;
  background: var(--schwarz);
  clip-path: inset(0 0 0 0);
}

.intro-an body {
  overflow: hidden;
}

.intro-mitte {
  width: min(340px, 70vw);
}

.intro-marke {
  clip-path: inset(0 100% 0 0);
  animation: intro-marke 1.1s var(--e-ein-aus) 0.15s forwards;
}

.intro-linie {
  position: relative;
  height: 1px;
  margin-top: 26px;
  background: var(--linie);
  overflow: hidden;
}

.intro-linie i {
  position: absolute;
  inset: 0;
  background: var(--orange);
  box-shadow: 0 0 12px var(--orange-schein);
  transform: scaleX(0);
  transform-origin: left;
  animation: intro-linie 1.25s var(--e-ein-aus) 0.25s forwards;
}

.intro-zeile {
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
  opacity: 0;
  animation: intro-text 0.6s var(--e-aus) 0.35s forwards;
}

.intro.ist-fertig {
  animation: intro-weg 0.95s var(--e-ein-aus) forwards;
}

@keyframes intro-marke { to { clip-path: inset(0 0 0 0); } }
@keyframes intro-linie { to { transform: scaleX(1); } }
@keyframes intro-text { to { opacity: 1; } }
@keyframes intro-weg { to { clip-path: inset(0 0 100% 0); } }

/* ───────── Seitenübergänge (View Transitions über Dokumente) ───────── */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: vt-alt 0.55s var(--e-ein-aus) both;
}

::view-transition-new(root) {
  animation: vt-neu 0.85s var(--e-aus) both;
}

::view-transition-group(kopf) {
  animation-duration: 0.5s;
}

@keyframes vt-alt {
  to {
    opacity: 0;
    transform: translateY(-3vh) scale(0.985);
    filter: blur(4px);
  }
}

@keyframes vt-neu {
  from {
    clip-path: inset(100% 0 0 0);
    transform: translateY(6vh);
  }
  to {
    clip-path: inset(0 0 0 0);
    transform: none;
  }
}

/* ───────── Ruhe: reduzierte Bewegung oder Schalter „Bewegung aus“ ───────── */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

.ruhig *,
.ruhig *::before,
.ruhig *::after {
  transition-duration: 0.01ms !important;
  transition-delay: 0s !important;
  animation-duration: 0.01ms !important;
  animation-delay: 0s !important;
  scroll-behavior: auto !important;
}

.ruhig [data-einblenden],
.ruhig [data-zeilen] .zeile > span,
.ruhig [data-woerter] .wort > span,
.ruhig [data-maske],
.ruhig [data-maske] img {
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
  font-variation-settings: "wght" 560 !important;
}

.ruhig [data-wortweise] .ww {
  color: var(--text) !important;
}

.landschaft-statisch {
  display: none;
}

.ruhig .landschaft,
.kein-webgl .landschaft {
  display: none;
}

.ruhig .landschaft-statisch,
.kein-webgl .landschaft-statisch,
.no-js .landschaft-statisch {
  display: block;
}

/* ── 07-start.css ── */
/* ═════════ HERO: Zahlenlandschaft ═════════ */
.held {
  --hp: 0;
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: calc(var(--kopf-hoehe) + 48px);
  overflow: hidden;
  isolation: isolate;
}

.held-buehne,
.sub-buehne {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.landschaft,
.landschaft-statisch {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.landschaft-statisch {
  object-fit: cover;
  opacity: 0.9;
}

.held-buehne::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(110% 80% at 0% 100%, rgba(7, 11, 12, 0.94) 18%, rgba(7, 11, 12, 0.6) 46%, transparent 72%),
    linear-gradient(180deg, rgba(7, 11, 12, 0.7) 0%, transparent 22%, transparent 62%, var(--schwarz) 100%);
  pointer-events: none;
}

.held-licht {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(55% 45% at 74% 36%, rgba(169, 194, 191, 0.075), transparent 70%),
    radial-gradient(38% 30% at 88% 72%, rgba(252, 134, 4, 0.055), transparent 72%);
  pointer-events: none;
}

.held-raster {
  position: relative;
}

.held-kicker {
  margin-bottom: clamp(22px, 3vw, 40px);
}

.held-titel .zeile {
  transform: translate3d(0, calc(var(--hp) * var(--tiefe, -40px)), 0);
  opacity: calc(1 - var(--hp) * 1.25);
}

.held-titel .zeile:nth-child(1) { --tiefe: -30px; }
.held-titel .zeile:nth-child(2) { --tiefe: -70px; }
.held-titel .zeile:nth-child(3) { --tiefe: -110px; }

.held-fuss {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) auto minmax(0, 0.9fr);
  align-items: end;
  gap: 28px clamp(28px, 4vw, 64px);
  margin-top: clamp(36px, 5vw, 76px);
  padding-top: 28px;
  border-top: 1px solid var(--linie);
}

.held-intro {
  color: var(--text-2);
  font-size: clamp(1.02rem, 1.2vw, 1.15rem);
  max-width: 52ch;
}

.held-aktionen {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

.person-chip {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-self: end;
  max-width: 380px;
  padding: 10px 18px 10px 10px;
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: rgba(13, 18, 19, 0.5);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transition: border-color 0.4s var(--e-aus), background-color 0.4s;
}

.person-chip:hover {
  border-color: var(--linie-stark);
  background: rgba(18, 24, 25, 0.7);
}

.person-chip img {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  flex: none;
  object-fit: cover;
}

.person-chip strong {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
}

.person-chip span span {
  display: block;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--text-2);
}

.held-unten {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: clamp(26px, 4vw, 44px);
  padding-bottom: 26px;
}

.scroll-hinweis {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
}

.scroll-hinweis i {
  position: relative;
  width: 1px;
  height: 38px;
  background: var(--linie);
  overflow: hidden;
}

.scroll-hinweis i::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 40%;
  background: var(--text);
  animation: scroll-hinweis 2.2s var(--e-ein-aus) infinite;
}

@keyframes scroll-hinweis {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(260%); }
}

/* ═════════ Route: feste Kapitel-Schiene ═════════ */
.route {
  position: fixed;
  left: clamp(16px, 1.7vw, 30px);
  top: 50%;
  z-index: 40;
  width: 40px;
  height: min(54vh, 460px);
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.7s var(--e-aus);
}

.route.ist-sichtbar {
  opacity: 1;
  pointer-events: auto;
}

.route-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.route-weg {
  fill: none;
  stroke: rgba(200, 222, 220, 0.22);
  stroke-width: 1;
  stroke-dasharray: 2 6;
}

.route-gefahren {
  fill: none;
  stroke: var(--kuehl);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.route-marker {
  position: absolute;
  left: 0;
  top: 0;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 5px rgba(252, 134, 4, 0.15), 0 0 24px rgba(252, 134, 4, 0.65);
  will-change: transform;
}

.route ol {
  position: absolute;
  inset: 0;
}

.route li {
  position: absolute;
  left: 0;
  top: 0;
}

.route a {
  position: absolute;
  left: -14px;
  top: -14px;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 28px;
  padding-left: 8px;
}

.route-ring {
  width: 12px;
  height: 12px;
  flex: none;
  border-radius: 50%;
  border: 1.5px solid rgba(200, 222, 220, 0.4);
  background: var(--schwarz);
  transition: border-color 0.5s var(--e-aus), background-color 0.5s var(--e-aus), transform 0.5s var(--e-feder);
}

.route a.ist-erreicht .route-ring {
  border-color: var(--kuehl);
  background: var(--kuehl);
}

.route a:hover .route-ring {
  transform: scale(1.3);
}

.route-label {
  padding: 4px 10px;
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: rgba(7, 11, 12, 0.82);
  font-size: 0.7rem;
  font-weight: 560;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-2);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.45s var(--e-aus), transform 0.6s var(--e-aus);
  pointer-events: none;
}

.route a:hover .route-label,
.route a:focus-visible .route-label {
  opacity: 1;
  transform: none;
}

@media (max-width: 1180px) {
  .route {
    display: none;
  }
}

/* ═════════ Kapitelkopf ═════════ */
.kapitel-kopf {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  gap: 24px clamp(32px, 6vw, 110px);
  align-items: end;
  margin-bottom: clamp(48px, 6vw, 90px);
}

.kapitel-kopf .kicker {
  grid-column: 1 / -1;
}

.kapitel-kopf h2 {
  max-width: 13ch;
}

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

/* ═════════ 01 Ausgangslage: Wege ═════════ */
.wege {
  border-bottom: 1px solid var(--linie);
}

.weg {
  display: grid;
  grid-template-columns: 64px minmax(0, 1.05fr) minmax(0, 1fr) 128px 44px;
  gap: 8px 28px;
  align-items: center;
  padding: clamp(26px, 3vw, 40px) 20px;
  border-top: 1px solid var(--linie);
  border-radius: 0;
  overflow: hidden;
  transition: border-radius 0.5s var(--e-aus);
}

.weg > * {
  position: relative;
  z-index: 1;
}

.weg-flaeche {
  position: absolute !important;
  inset: 0;
  z-index: 0 !important;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.75s var(--e-aus);
}

.weg:hover .weg-flaeche,
.weg:focus-visible .weg-flaeche {
  transform: none;
}

.weg-nr {
  font-size: 0.8rem;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

.weg-frage {
  font-size: clamp(1.45rem, 2.3vw, 2.25rem);
  font-weight: 540;
  letter-spacing: -0.035em;
  line-height: 1.1;
  transition: transform 0.7s var(--e-aus);
}

.weg:hover .weg-frage {
  transform: translateX(10px);
}

.weg-angebot {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 6px;
}

.weg-ergebnis {
  display: block;
  color: var(--text-2);
  font-size: 0.97rem;
  line-height: 1.55;
  max-width: 46ch;
}

.weg-pfeil {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--linie-stark);
  border-radius: 50%;
  transition: transform 0.6s var(--e-aus), background-color 0.4s, color 0.4s, border-color 0.4s;
}

.weg:hover .weg-pfeil {
  transform: rotate(45deg);
  background: var(--text);
  color: var(--schwarz);
  border-color: var(--text);
}

/* kleine Grafiken je Angebot */
.weg-grafik {
  position: relative;
  height: 64px;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  opacity: 0.45;
  transition: opacity 0.5s var(--e-aus);
}

.weg:hover .weg-grafik {
  opacity: 1;
}

.weg-grafik i {
  display: block;
  width: 12px;
  border-radius: 2px;
  background: rgba(200, 222, 220, 0.35);
  transition: transform 0.8s var(--e-feder), height 0.8s var(--e-feder), background-color 0.5s;
}

/* 1 Überblick: Balken sortieren sich */
.weg-grafik--sortieren i:nth-child(1) { height: 40px; }
.weg-grafik--sortieren i:nth-child(2) { height: 18px; }
.weg-grafik--sortieren i:nth-child(3) { height: 56px; }
.weg-grafik--sortieren i:nth-child(4) { height: 28px; }
.weg-grafik--sortieren i:nth-child(5) { height: 46px; }
.weg:hover .weg-grafik--sortieren i:nth-child(1) { height: 18px; }
.weg:hover .weg-grafik--sortieren i:nth-child(2) { height: 28px; transition-delay: 0.04s; }
.weg:hover .weg-grafik--sortieren i:nth-child(3) { height: 40px; transition-delay: 0.08s; }
.weg:hover .weg-grafik--sortieren i:nth-child(4) { height: 46px; transition-delay: 0.12s; }
.weg:hover .weg-grafik--sortieren i:nth-child(5) { height: 56px; transition-delay: 0.16s; background: var(--orange); }

/* 2 Kalkulation: Wasserfall */
.weg-grafik--wasserfall { align-items: flex-start; }
.weg-grafik--wasserfall i { height: 0; }
.weg-grafik--wasserfall i:nth-child(1) { height: 60px; }
.weg-grafik--wasserfall i:nth-child(2) { height: 16px; }
.weg-grafik--wasserfall i:nth-child(3) { height: 18px; transform: translateY(16px); }
.weg-grafik--wasserfall i:nth-child(4) { height: 12px; transform: translateY(34px); }
.weg-grafik--wasserfall i:nth-child(5) { height: 14px; transform: translateY(46px); background: rgba(252, 134, 4, 0.5); }
.weg:hover .weg-grafik--wasserfall i:nth-child(5) { background: var(--orange); box-shadow: 0 0 14px var(--orange-schein); }
.weg:hover .weg-grafik--wasserfall i:nth-child(2) { transform: translateY(0) scaleY(1.1); }

/* 3 Begleitung: Monatstakt */
.weg-grafik--takt { align-items: center; gap: 5px; }
.weg-grafik--takt i { width: 6px; height: 24px; }
.weg:hover .weg-grafik--takt i { animation: takt 1.6s var(--e-weich) infinite; }
.weg-grafik--takt i:nth-child(2) { animation-delay: 0.12s !important; }
.weg-grafik--takt i:nth-child(3) { animation-delay: 0.24s !important; }
.weg-grafik--takt i:nth-child(4) { animation-delay: 0.36s !important; }
.weg-grafik--takt i:nth-child(5) { animation-delay: 0.48s !important; }
.weg-grafik--takt i:nth-child(6) { animation-delay: 0.6s !important; }
@keyframes takt {
  0%, 100% { transform: scaleY(0.5); background: rgba(200, 222, 220, 0.3); }
  40% { transform: scaleY(1.6); background: var(--kuehl); }
}

/* 4 Abläufe: Knoten mit wanderndem Punkt */
.weg-grafik--fluss { align-items: center; gap: 0; }
.weg-grafik--fluss i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--kuehl); background: transparent; }
.weg-grafik--fluss b { display: block; width: 26px; height: 1px; background: rgba(200, 222, 220, 0.35); }
.weg-grafik--fluss em {
  position: absolute;
  left: 3px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 10px var(--orange-schein);
  opacity: 0;
}
.weg:hover .weg-grafik--fluss em { animation: fluss 1.8s var(--e-ein-aus) infinite; }
@keyframes fluss {
  0% { transform: translateX(0); opacity: 1; }
  85% { transform: translateX(100px); opacity: 1; }
  100% { transform: translateX(100px); opacity: 0; }
}

/* 5 Anliegen: Kreis zeichnet sich */
.weg-grafik--frage svg { width: 64px; height: 64px; }
.weg-grafik--frage circle {
  fill: none;
  stroke: var(--kuehl);
  stroke-width: 1.5;
  stroke-dasharray: 160;
  stroke-dashoffset: 120;
  transition: stroke-dashoffset 1.2s var(--e-aus);
}
.weg-grafik--frage .punkt { fill: var(--orange); opacity: 0.5; transition: opacity 0.5s; }
.weg:hover .weg-grafik--frage circle { stroke-dashoffset: 0; }
.weg:hover .weg-grafik--frage .punkt { opacity: 1; }

@media (max-width: 960px) {
  .weg {
    grid-template-columns: 40px minmax(0, 1fr) 44px;
    padding-inline: 4px;
  }

  .weg-text {
    grid-column: 2 / 3;
  }

  .weg-grafik {
    display: none;
  }

  .weg-pfeil {
    grid-row: 1;
    grid-column: 3;
  }
}

/* ═════════ Bühnen mit Erzählung (Tour, Liquidität) ═════════ */
.buehne {
  position: relative;
}

.buehne-sticky {
  position: relative;
  padding-block: var(--abschnitt);
}

.buehne--erzaehlt .buehne-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  padding-block: calc(var(--kopf-hoehe) + 8px) 24px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.buehne-raster {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(32px, 5vw, 96px);
  align-items: center;
}

.buehne-raster h2 {
  margin-top: 22px;
  max-width: 11ch;
}

.schritte {
  margin-top: clamp(26px, 3vw, 44px);
  display: grid;
  gap: 18px;
}

.schritt {
  position: relative;
  padding-left: 26px;
  border-left: 1px solid var(--linie-stark);
  color: var(--text-2);
}

.schritt strong {
  color: var(--text);
  font-weight: 600;
}

.buehne--erzaehlt .schritte {
  position: relative;
  min-height: 9.5em;
  font-size: clamp(1.05rem, 1.35vw, 1.28rem);
  line-height: 1.5;
}

.buehne--erzaehlt .schritt {
  position: absolute;
  inset: 0 0 auto 0;
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  filter: blur(6px);
  transition: opacity 0.6s var(--e-aus), transform 0.8s var(--e-aus), filter 0.6s var(--e-aus);
  border-left-color: var(--orange);
  pointer-events: none;
}

.buehne--erzaehlt .schritt.ist-vorbei {
  transform: translate3d(0, -22px, 0);
}

.buehne--erzaehlt .schritt.ist-aktiv {
  opacity: 1;
  transform: none;
  filter: none;
  pointer-events: auto;
}

.schritt-punkte {
  display: none;
  gap: 8px;
  margin-top: 30px;
}

.buehne--erzaehlt .schritt-punkte {
  display: flex;
}

.schritt-punkte button {
  position: relative;
  width: 34px;
  height: 22px;
}

.schritt-punkte button::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 10px;
  height: 2px;
  border-radius: 2px;
  background: rgba(200, 222, 220, 0.18);
  transition: background-color 0.4s;
}

.schritt-punkte button::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 10px;
  height: 2px;
  border-radius: 2px;
  background: var(--text);
  transform: scaleX(var(--f, 0));
  transform-origin: left;
}

.schritt-punkte button:hover::before {
  background: rgba(200, 222, 220, 0.4);
}

.panel {
  padding: clamp(20px, 2.4vw, 34px);
}

.panel-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* ═════════ 02 Tourrechner ═════════ */
.tour-ergebnis-zeile {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
}

.tour-ergebnis-label {
  font-size: 0.86rem;
  color: var(--text-2);
}

.tour-ergebnis {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 4px;
  font-size: clamp(3rem, 5.6vw, 5.6rem);
  font-weight: 560;
  letter-spacing: -0.05em;
  line-height: 1;
}

.tour-ergebnis .einheit {
  font-size: 0.42em;
  color: var(--text-2);
  letter-spacing: 0;
}

.tour-rechnung {
  font-size: 0.82rem;
  color: var(--text-3);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.ziffern {
  display: inline-flex;
  height: 1em;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}

.ziffer {
  display: inline-block;
  height: 1em;
  overflow: hidden;
}

.ziffer-band {
  display: flex;
  flex-direction: column;
  transition: transform 0.95s var(--e-aus);
}

.ziffer-band span,
.ziffer-fest {
  display: block;
  height: 1em;
  line-height: 1;
}

.diagramm {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 14px;
  overflow: visible;
}

.diagramm text {
  font-family: var(--schrift);
  font-variant-numeric: tabular-nums;
  fill: var(--text-2);
  font-size: 12px;
}

.diagramm .achse {
  stroke: var(--linie-stark);
  stroke-width: 1;
}

.diagramm .gitter {
  stroke: var(--linie);
  stroke-width: 1;
}

.diagramm .verbinder {
  stroke: rgba(200, 222, 220, 0.3);
  stroke-width: 1;
  stroke-dasharray: 2 3;
}

.diagramm .balken-erloes {
  fill: rgba(169, 194, 191, 0.28);
  stroke: var(--kuehl);
  stroke-width: 1;
}

.diagramm .balken-kosten {
  fill: url(#schraffur);
  stroke: rgba(238, 242, 241, 0.42);
  stroke-width: 1;
}

.diagramm .balken-ergebnis {
  fill: var(--orange);
  filter: drop-shadow(0 0 14px rgba(252, 134, 4, 0.45));
}

.diagramm .balken-ergebnis.ist-negativ {
  fill: url(#schraffur-orange);
  stroke: var(--orange);
  stroke-dasharray: 4 3;
  filter: none;
}

.diagramm .wert {
  fill: var(--text);
  font-weight: 600;
  font-size: 13px;
}

.diagramm .wert-ergebnis {
  fill: var(--orange);
  font-size: 15px;
}

.diagramm .schwelle {
  stroke: var(--gold);
  stroke-width: 1.2;
  stroke-dasharray: 6 5;
}

.diagramm .schwelle-text {
  fill: var(--gold);
  font-size: 11.5px;
  font-weight: 560;
}

.diagramm .kategorie {
  fill: var(--text-3);
  font-size: 11px;
}

.diagramm .wf-gruppe {
  transition: opacity 0.6s var(--e-aus);
}

.diagramm .wf-gruppe.ist-aus {
  opacity: 0;
}

.tour-regler {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 28px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--linie);
  transition: opacity 0.6s var(--e-aus);
}

.buehne--erzaehlt .tour-regler:not(.ist-frei) {
  opacity: 0.38;
}

.tour-regler .chips {
  align-self: end;
}

.tour-fuss {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 24px;
  margin-top: 16px;
}

.tour-fuss details {
  flex: 1 1 260px;
}

.tour-fuss details p {
  padding-top: 10px;
  font-size: 0.84rem;
  color: var(--text-2);
}

/* ═════════ Bildbühne Transport ═════════ */
.bildbuehne {
  --p: 0;
  position: relative;
  height: 260vh;
}

.bildbuehne-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

.bildbuehne-fenster {
  position: absolute;
  inset: 0;
  clip-path: inset(calc((1 - var(--p)) * 24%) calc((1 - var(--p)) * 31%) round calc((1 - var(--p)) * 30px));
  will-change: clip-path;
}

.bildbuehne-fenster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(calc(1.32 - var(--p) * 0.32));
  will-change: transform;
}

.bildbuehne-fenster::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 11, 12, 0.35) 0%, rgba(7, 11, 12, 0.12) 32%, rgba(7, 11, 12, 0.82) 82%, var(--schwarz) 100%);
  opacity: calc(0.4 + var(--p) * 0.6);
}

.bildbuehne-vorab {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  pointer-events: none;
  opacity: calc(1 - var(--p) * 2.4);
  transform: scale(calc(1 + var(--p) * 0.25));
}

.bildbuehne-vorab p {
  font-size: clamp(2.6rem, 7.6vw, 8.4rem);
  font-weight: 560;
  letter-spacing: -0.055em;
  line-height: 0.92;
  max-width: 12ch;
  mix-blend-mode: difference;
  color: #f2f5f4;
}

.bildbuehne-text {
  position: relative;
  z-index: 2;
  padding-bottom: clamp(48px, 8vh, 96px);
  opacity: clamp(0, calc((var(--p) - 0.6) * 3.4), 1);
  transform: translate3d(0, calc((1 - var(--p)) * 80px), 0);
}

.bildbuehne-text h2 {
  margin-top: 20px;
  max-width: 16ch;
}

.bildbuehne-text p:not(.kicker) {
  margin-top: 22px;
  max-width: 58ch;
  color: var(--text-2);
}

.bildbuehne-text .textlink {
  margin-top: 26px;
}

.no-js .bildbuehne,
.ruhig .bildbuehne {
  --p: 1;
  height: auto;
}

.no-js .bildbuehne-sticky,
.ruhig .bildbuehne-sticky {
  position: relative;
  min-height: 90vh;
}

.no-js .bildbuehne-vorab,
.ruhig .bildbuehne-vorab {
  display: none;
}

/* ═════════ 03 Liquidität ═════════ */
.liqui-diagramm .plan,
.liqui-diagramm .spaet {
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.liqui-diagramm .plan {
  stroke: var(--kuehl);
}

.liqui-diagramm .spaet {
  stroke: var(--text);
}

.liqui-diagramm .ist-zweitrangig {
  stroke-opacity: 0.35;
}

.liqui-diagramm .spanne {
  fill: url(#schraffur-liqui);
  opacity: 0;
  transition: opacity 0.8s var(--e-aus);
}

.liqui-diagramm .spanne.ist-an {
  opacity: 1;
}

.liqui-diagramm .flaeche {
  fill: url(#liqui-verlauf);
}

.liqui-diagramm .puffer {
  stroke: var(--gold);
  stroke-width: 1.2;
  stroke-dasharray: 6 5;
}

.liqui-diagramm .puffer-text {
  fill: var(--gold);
  font-size: 11.5px;
  font-weight: 560;
}

.liqui-diagramm .knoten {
  fill: var(--schwarz);
  stroke: var(--text);
  stroke-width: 2;
}

.liqui-diagramm .knoten-plan {
  stroke: var(--kuehl);
}

.liqui-diagramm .fokus-ring {
  fill: none;
  stroke: var(--orange);
  stroke-width: 1.5;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 0.6s var(--e-aus);
}

.liqui-diagramm .fokus-ring.ist-an {
  opacity: 1;
  animation: fokus-puls 2.4s var(--e-aus) infinite;
  filter: drop-shadow(0 0 8px rgba(252, 134, 4, 0.6));
}

@keyframes fokus-puls {
  0% { transform: scale(0.8); opacity: 1; }
  100% { transform: scale(2.2); opacity: 0; }
}

.liqui-diagramm .wert-label {
  fill: var(--text);
  font-weight: 600;
  font-size: 12.5px;
}

.liqui-kennzahlen {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--linie);
}

.liqui-kennzahlen strong {
  display: block;
  margin-top: 6px;
  font-size: clamp(1.25rem, 1.8vw, 1.7rem);
  font-weight: 560;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.liqui-kennzahlen .status {
  margin-top: 10px;
}

.liqui-fuss {
  margin-top: 16px;
  display: grid;
  gap: 10px;
}

.liqui-fuss details .tabelle {
  margin-top: 12px;
}

.liqui-fuss details p {
  margin-top: 10px;
  font-size: 0.84rem;
  color: var(--text-2);
}

/* ═════════ 04 Zusammenarbeit: waagerechte Fahrt ═════════ */
.ablauf {
  --p: 0;
  position: relative;
  padding-block: var(--abschnitt);
}

.ablauf--quer {
  padding-block: 0;
}

.ablauf--quer .ablauf-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ablauf-spur {
  display: grid;
  gap: 28px;
}

.ablauf--quer .ablauf-spur {
  display: flex;
  align-items: stretch;
  gap: clamp(18px, 2.2vw, 36px);
  width: max-content;
  padding-inline: var(--rand) 12vw;
  will-change: transform;
}

.ablauf-intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
  max-width: 560px;
}

.ablauf--quer .ablauf-intro {
  flex: 0 0 min(520px, 80vw);
  padding-right: clamp(20px, 4vw, 70px);
}

.ablauf-intro p:not(.kicker) {
  color: var(--text-2);
  max-width: 44ch;
}

.ablauf-stationen {
  display: grid;
  gap: 18px;
}

.ablauf--quer .ablauf-stationen {
  display: flex;
  gap: clamp(18px, 2.2vw, 36px);
}

.station {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  padding: clamp(24px, 2.6vw, 38px);
  border-radius: var(--radius);
  border: 1px solid var(--linie);
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
  transition: border-color 0.6s var(--e-aus), background-color 0.6s;
}

.ablauf--quer .station {
  flex: 0 0 clamp(300px, 31vw, 460px);
  min-height: min(60vh, 520px);
}

.station-nr {
  font-size: clamp(5rem, 10vw, 10rem);
  font-weight: 600;
  line-height: 0.8;
  letter-spacing: -0.07em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(200, 222, 220, 0.3);
  transition: color 0.8s var(--e-aus), text-shadow 0.8s var(--e-aus), -webkit-text-stroke-color 0.8s;
  font-variant-numeric: tabular-nums;
}

.station.ist-aktiv {
  border-color: var(--linie-stark);
}

.station.ist-aktiv .station-nr {
  color: var(--text);
  -webkit-text-stroke-color: transparent;
  text-shadow: 0 0 70px rgba(220, 235, 233, 0.16);
}

.station h3 {
  margin-bottom: 12px;
}

.station p {
  color: var(--text-2);
  max-width: 38ch;
}

.ablauf-ende {
  display: flex;
  align-items: center;
}

.ablauf--quer .ablauf-ende {
  flex: 0 0 auto;
  padding-left: clamp(20px, 4vw, 60px);
}

.ablauf-leiste {
  display: none;
}

.ablauf--quer .ablauf-leiste {
  display: block;
  position: relative;
  height: 1px;
  margin: clamp(30px, 5vh, 56px) var(--rand) 0;
  background: var(--linie);
}

.ablauf-leiste i {
  position: absolute;
  inset: 0;
  background: var(--kuehl);
  transform: scaleX(var(--p));
  transform-origin: left;
}

.ablauf-leiste b {
  position: absolute;
  top: -5px;
  left: calc(var(--p) * 100%);
  width: 11px;
  height: 11px;
  margin-left: -5px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 5px rgba(252, 134, 4, 0.14), 0 0 20px rgba(252, 134, 4, 0.6);
}

/* ═════════ Person ═════════ */
.person-raster {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(36px, 6vw, 120px);
  align-items: center;
}

.person-bild {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  aspect-ratio: 3 / 4;
  background: var(--flaeche-2);
}

.person-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.person-bild figcaption {
  position: absolute;
  left: 16px;
  bottom: 16px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(7, 11, 12, 0.72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-size: 0.78rem;
  color: var(--text-2);
}

.zitat {
  margin-top: 24px;
  font-size: clamp(1.75rem, 3.3vw, 3.25rem);
  font-weight: 500;
  letter-spacing: -0.038em;
  line-height: 1.13;
  max-width: 22ch;
}

.person-fakten {
  margin-top: clamp(32px, 4vw, 52px);
  display: grid;
  gap: 0;
  border-top: 1px solid var(--linie);
}

.person-fakten li {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--linie);
  color: var(--text-2);
}

.person-fakten li span {
  font-size: 0.78rem;
  color: var(--text-3);
  padding-top: 3px;
  font-variant-numeric: tabular-nums;
}

.person-text .textlink {
  margin-top: 28px;
}

/* ═════════ Responsiv ═════════ */
@media (max-width: 1020px) {
  .held-fuss {
    grid-template-columns: 1fr;
  }

  .person-chip {
    justify-self: start;
  }

  .buehne-raster,
  .person-raster {
    grid-template-columns: 1fr;
  }

  .tour-regler {
    grid-template-columns: 1fr;
  }

  .liqui-kennzahlen {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .held-unten .bewegung-knopf {
    font-size: 0.74rem;
  }

  .tour-ergebnis-zeile {
    flex-direction: column;
    align-items: flex-start;
  }

  .tour-rechnung {
    text-align: left;
  }

  .bildbuehne {
    height: 200vh;
  }
}

/* Höhe der Erzählbühnen (nur wenn JS die Erzählung aktiviert) */
.tour.buehne--erzaehlt {
  height: 720vh;
}

.liqui.buehne--erzaehlt {
  height: 540vh;
}

.ablauf:not(.ablauf--quer) .ablauf-spur {
  width: 100%;
  max-width: calc(var(--breite) + 2 * var(--rand));
  margin-inline: auto;
  padding-inline: var(--rand);
}

.ablauf:not(.ablauf--quer) .ablauf-stationen {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.buehne--erzaehlt .diagramm {
  max-height: min(34vh, 300px);
}

.buehne--erzaehlt .buehne-raster h2 {
  max-width: 12ch;
}

/* ── 08-seiten.css ── */
/* ═════════ Unterseiten: Kopfbühne ═════════ */
.sub-held {
  --hp: 0;
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: flex-end;
  padding-top: calc(var(--kopf-hoehe) + 80px);
  padding-bottom: clamp(56px, 8vw, 110px);
  overflow: hidden;
  isolation: isolate;
}

.sub-held--schmal {
  min-height: 62vh;
}

.sub-held--fehler {
  min-height: 100vh;
  min-height: 100svh;
}

.sub-buehne::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(100% 90% at 0% 100%, rgba(7, 11, 12, 0.92) 20%, rgba(7, 11, 12, 0.5) 52%, transparent 78%),
    linear-gradient(180deg, rgba(7, 11, 12, 0.6) 0%, transparent 30%, transparent 60%, var(--schwarz) 100%);
}

.sub-held .kicker {
  margin-bottom: 26px;
}

.sub-held h1 {
  max-width: 16ch;
}

.sub-held h1 .zeile {
  transform: translate3d(0, calc(var(--hp) * var(--tiefe, -40px)), 0);
}

.sub-held h1 .zeile:nth-child(2) {
  --tiefe: -80px;
}

.sub-held .lead {
  margin-top: clamp(24px, 3vw, 40px);
}

.fehler-aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 30px;
  margin-top: 40px;
}

.abschnitt--eng {
  padding-block: clamp(40px, 6vw, 90px) var(--abschnitt);
}

/* ═════════ Rechtstexte ═════════ */
.recht {
  max-width: calc(780px + 2 * var(--rand));
  color: var(--text-2);
}

.recht h2 {
  margin: 2.4em 0 0.7em;
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: var(--text);
}

.recht h2:first-child,
.recht > p:first-child + h2 {
  margin-top: 0.6em;
}

.recht h3 {
  margin: 1.8em 0 0.5em;
  font-size: 1.08rem;
  letter-spacing: -0.01em;
  color: var(--text);
}

.recht p,
.recht li {
  max-width: 68ch;
}

.recht p + p {
  margin-top: 0.9em;
}

.recht ul {
  display: grid;
  gap: 10px;
  margin-top: 0.9em;
}

.recht li {
  position: relative;
  padding-left: 24px;
}

.recht li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.7em;
  width: 10px;
  height: 1px;
  background: var(--orange);
}

.recht strong {
  color: var(--text);
  font-weight: 600;
}

.recht a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: rgba(252, 134, 4, 0.6);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.3s;
}

.recht a:hover {
  text-decoration-color: var(--orange);
}

.recht .note {
  margin-top: 1.6em;
  padding: 22px 24px;
  border: 1px solid var(--linie);
  border-left: 2px solid var(--orange);
  border-radius: var(--radius-klein);
  background: rgba(255, 255, 255, 0.02);
}

.recht .note h3 {
  margin-top: 0;
}

.seite-weiter main {
  min-height: 100vh;
}

/* ── 09-unterseiten.css ── */
/* ═════════ Gemeinsame Layouthelfer ═════════ */
.zwei-spalten {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 28px clamp(36px, 6vw, 110px);
  align-items: start;
}

.zwei-spalten h2 {
  margin-top: 22px;
  max-width: 12ch;
}

.zwei-spalten .text > * + * {
  margin-top: 1.1em;
}

.aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  margin-top: 30px;
}

.abschnitt--bis-buehne {
  padding-bottom: 0;
}

.abschnitt--bis-buehne .kapitel-kopf {
  margin-bottom: 0;
}

.anker {
  display: block;
  height: 0;
}

/* ═════════ Leistungen: Stapelkarten ═════════ */
.stapel {
  display: grid;
  gap: 28px;
}

.stapel-karte {
  --dunkel: 0;
  position: sticky;
  top: calc(var(--kopf-hoehe) + 24px);
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 28px clamp(32px, 5vw, 90px);
  min-height: min(68vh, 560px);
  padding: clamp(28px, 4vw, 60px);
  border: 1px solid var(--linie);
  border-radius: calc(var(--radius) + 6px);
  background: linear-gradient(160deg, #141a1b, #0c1112 60%);
  box-shadow: 0 -30px 60px -30px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transform-origin: 50% 0;
  overflow: hidden;
}

.stapel-karte::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--schwarz);
  opacity: var(--dunkel);
  pointer-events: none;
}

.stapel-karte:nth-child(2) { top: calc(var(--kopf-hoehe) + 40px); }
.stapel-karte:nth-child(3) { top: calc(var(--kopf-hoehe) + 56px); }
.stapel-karte:nth-child(4) { top: calc(var(--kopf-hoehe) + 72px); }
.stapel-karte:nth-child(5) { top: calc(var(--kopf-hoehe) + 88px); }

.stapel-kopf {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.stapel-nr {
  font-size: clamp(4.5rem, 9vw, 8.5rem);
  font-weight: 600;
  line-height: 0.8;
  letter-spacing: -0.07em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(200, 222, 220, 0.35);
  margin-bottom: auto;
  padding-bottom: 30px;
}

.stapel-inhalt {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 22px;
}

.stapel-inhalt .ergebnisliste {
  margin-top: 4px;
}

@media (max-width: 1020px) {
  .stapel-karte {
    position: relative;
    top: auto !important;
    grid-template-columns: 1fr;
    min-height: 0;
  }
}

/* ═════════ Leistungen: Ablaufprobe mit wachsender Linie ═════════ */
.ablaufprobe-raster {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 40px clamp(36px, 6vw, 110px);
  align-items: start;
}

.ablaufprobe-kopf {
  position: sticky;
  top: calc(var(--kopf-hoehe) + 40px);
  display: grid;
  gap: 24px;
  justify-items: start;
}

.ablaufprobe-weg {
  position: relative;
  padding-left: 46px;
}

.ablaufprobe-linie {
  position: absolute;
  left: 11px;
  top: 10px;
  height: var(--linien-hoehe, 70%);
  width: 1px;
  background: var(--linie-stark);
}

.ablaufprobe-linie i {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--kuehl), var(--orange));
  transform: scaleY(var(--p, 0));
  transform-origin: top;
  box-shadow: 0 0 12px rgba(252, 134, 4, 0.35);
}

.ruhig .ablaufprobe-linie i,
.no-js .ablaufprobe-linie i {
  transform: none;
}

.ablaufprobe-liste {
  display: grid;
  gap: clamp(36px, 6vh, 64px);
}

.ablaufprobe-liste li {
  position: relative;
}

.ablauf-punkt {
  position: absolute;
  left: -41px;
  top: 6px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1.5px solid var(--linie-stark);
  background: var(--schwarz);
  transition: border-color 0.5s, background-color 0.5s, box-shadow 0.5s;
}

.ablaufprobe-liste li.ist-erreicht .ablauf-punkt,
.ruhig .ablauf-punkt {
  border-color: var(--kuehl);
  background: var(--kuehl);
  box-shadow: 0 0 0 5px rgba(169, 194, 191, 0.12);
}

.ablaufprobe-liste h3 {
  margin-bottom: 8px;
}

.ablaufprobe-liste p {
  color: var(--text-2);
  max-width: 48ch;
}

.ablaufprobe-entscheidung {
  margin-top: 48px;
  margin-left: -46px;
  padding: clamp(24px, 3vw, 36px);
  display: grid;
  gap: 16px;
  justify-items: start;
}

.ablaufprobe-entscheidung p:not(.kicker):not(.kleingedruckt) {
  font-size: 1.12rem;
  color: var(--text);
  max-width: 50ch;
}

/* ═════════ Angebote ═════════ */
.wegweiser {
  margin-top: -20px;
}

.wegweiser-liste {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.wegweiser-liste a {
  display: flex;
  flex-direction: column;
  gap: 18px;
  height: 100%;
  min-height: 210px;
  padding: 22px;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.02);
  transition: border-color 0.4s var(--e-aus), transform 0.6s var(--e-aus), background-color 0.4s;
}

.wegweiser-liste a:hover {
  border-color: var(--linie-stark);
  background: rgba(255, 255, 255, 0.04);
  transform: translateY(-4px);
}

.ww-nr {
  font-size: 0.75rem;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

.wegweiser-liste strong {
  font-size: 1.08rem;
  font-weight: 540;
  letter-spacing: -0.015em;
  line-height: 1.3;
}

.ww-angebot {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange);
}

.ww-angebot i {
  font-style: normal;
  transition: transform 0.5s var(--e-aus);
}

.wegweiser-liste a:hover .ww-angebot i {
  transform: translateY(4px);
}

.angebote-raster {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: clamp(40px, 6vw, 110px);
  padding-block: var(--abschnitt);
}

.angebote-index {
  position: sticky;
  top: calc(var(--kopf-hoehe) + 40px);
  align-self: start;
  display: grid;
  gap: 18px;
  justify-items: start;
}

.angebote-index ol {
  display: grid;
  width: 100%;
  border-top: 1px solid var(--linie);
}

.angebote-index ol a {
  position: relative;
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 8px;
  padding: 13px 0;
  border-bottom: 1px solid var(--linie);
  font-size: 0.92rem;
  color: var(--text-3);
  transition: color 0.4s var(--e-aus);
}

.angebote-index ol a span {
  font-size: 0.75rem;
  padding-top: 2px;
  font-variant-numeric: tabular-nums;
}

.angebote-index ol a i {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--orange);
  transform: scaleX(var(--f, 0));
  transform-origin: left;
  box-shadow: 0 0 8px rgba(252, 134, 4, 0.5);
}

.angebote-index ol a:hover,
.angebote-index ol a.ist-aktiv {
  color: var(--text);
}

.angebote-liste {
  display: grid;
  gap: clamp(90px, 12vw, 170px);
}

.angebot {
  scroll-margin-top: calc(var(--kopf-hoehe) + 30px);
}

.angebot h2 {
  margin-top: 20px;
}

.angebot-wann {
  margin-top: clamp(26px, 3vw, 40px);
}

.angebot-wann h3,
.angebot-erhalten,
.angebot-details-text h3 {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 12px;
}

.angebot-wann p {
  font-size: clamp(1.1rem, 1.4vw, 1.3rem);
  color: var(--text);
  line-height: 1.55;
  max-width: 54ch;
}

.angebot-erhalten {
  margin-top: 40px;
}

.ergebnis-karten {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.ergebnis-karten li {
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding: 22px;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
}

.ergebnis-karten span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--linie-stark);
  font-size: 0.8rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.ergebnis-karten p {
  color: var(--text-2);
  font-size: 0.98rem;
  line-height: 1.55;
}

.angebot-aktion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  margin-top: 32px;
}

.angebot-details {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--linie);
}

.angebot-details-text {
  padding-top: 24px;
  display: grid;
  gap: 6px;
}

.angebot-details-text h3:not(:first-child) {
  margin-top: 18px;
}

@media (max-width: 1180px) {
  .wegweiser-liste {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wegweiser-liste li:last-child {
    grid-column: 1 / -1;
  }

  .angebote-raster {
    grid-template-columns: 1fr;
  }

  .angebote-index {
    display: none;
  }
}

@media (max-width: 760px) {
  .ergebnis-karten {
    grid-template-columns: 1fr;
  }

  .wegweiser-liste {
    grid-template-columns: 1fr;
  }

  .wegweiser-liste a {
    min-height: 0;
  }
}

/* ═════════ Transport & Logistik ═════════ */
.sub-held--foto {
  min-height: 92vh;
}

.sub-foto {
  overflow: hidden;
}

.sub-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(calc(1.06 + var(--hp) * 0.08)) translate3d(0, calc(var(--hp) * 40px), 0);
  animation: kenburns 14s var(--e-weich) both;
}

@keyframes kenburns {
  from { scale: 1.12; }
  to { scale: 1; }
}

.sub-foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(7, 11, 12, 0.9) 0%, rgba(7, 11, 12, 0.55) 45%, rgba(7, 11, 12, 0.1) 75%),
    linear-gradient(180deg, rgba(7, 11, 12, 0.5) 0%, transparent 30%, transparent 70%, var(--schwarz) 100%);
}

.fragen-raster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.frage-karte {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(26px, 3vw, 42px);
  align-items: flex-start;
}

.frage-karte h3 {
  font-size: clamp(1.4rem, 2vw, 1.9rem);
  letter-spacing: -0.03em;
}

.frage-karte p:not(.kicker) {
  color: var(--text-2);
  max-width: 54ch;
}

.frage-karte .textlink {
  margin-top: auto;
}

.frage-symbol {
  width: 64px;
  height: 40px;
  margin-bottom: 18px;
  overflow: visible;
}

.frage-symbol path,
.frage-symbol circle {
  fill: none;
  stroke: var(--kuehl);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.frage-symbol circle:last-of-type {
  stroke: var(--orange);
  fill: var(--orange);
  filter: drop-shadow(0 0 6px rgba(252, 134, 4, 0.6));
}

.js .frage-symbol path {
  stroke-dasharray: 140;
  stroke-dashoffset: 140;
  transition: stroke-dashoffset 1.8s var(--e-aus) 0.3s;
}

.js .ist-da .frage-symbol path {
  stroke-dashoffset: 0;
}

.vergleich-panel {
  padding: clamp(24px, 3.4vw, 48px);
  display: grid;
  gap: 28px;
}

.vergleich-legende {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  font-size: 0.78rem;
  color: var(--text-2);
}

.vergleich-legende i {
  display: inline-block;
  width: 14px;
  height: 8px;
  margin-right: 5px;
  border-radius: 2px;
  vertical-align: middle;
}

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

.zeitleiste-name {
  margin-top: 14px;
  font-size: 0.92rem;
  color: var(--text-2);
}

.zeitleiste-name strong {
  color: var(--text);
}

.zeitleiste-spur {
  display: flex;
  gap: 4px;
  height: 54px;
}

.zeitleiste-spur--b {
  width: 85%;
}

.seg {
  display: flex;
  align-items: center;
  padding-inline: 12px;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 560;
  white-space: nowrap;
  overflow: hidden;
  transform-origin: left;
}

.js .seg {
  transform: scaleX(0);
  transition: transform 1.1s var(--e-aus);
}

.js .ist-da .seg {
  transform: none;
}

.js .ist-da .seg:nth-child(2) { transition-delay: 0.25s; }
.js .ist-da .seg:nth-child(3) { transition-delay: 0.45s; }
.js .ist-da .seg:nth-child(4) { transition-delay: 0.65s; }

.seg-55 { flex: 5.5; }
.seg-20 { flex: 2; }
.seg-15 { flex: 1.5; }
.seg-10 { flex: 1; }
.seg-05 { flex: 0.5; }

.seg-fahrt,
.lg-fahrt {
  background: rgba(169, 194, 191, 0.32);
  color: var(--text);
}

.seg-laden,
.lg-laden {
  background: rgba(169, 194, 191, 0.16);
  color: var(--text);
}

.seg-warten,
.lg-warten {
  background: repeating-linear-gradient(45deg, rgba(255, 169, 77, 0.35) 0 5px, rgba(255, 169, 77, 0.08) 5px 10px);
  color: var(--text);
}

.seg-leer,
.lg-leer {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--linie-stark);
  color: var(--text-2);
}

.seg-annahme,
.lg-annahme {
  background: transparent;
  border: 1.5px dashed var(--orange);
  color: var(--orange);
}

.fluss-liste {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--linie);
}

.fluss-liste li {
  display: grid;
  gap: 12px;
  align-content: start;
  color: var(--text-2);
  font-size: 0.95rem;
}

.fluss-liste span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--linie-stark);
  border-radius: 50%;
  font-size: 0.78rem;
  color: var(--text);
}

.fluss-liste strong {
  color: var(--text);
}

@media (max-width: 960px) {
  .fragen-raster,
  .fluss-liste {
    grid-template-columns: 1fr;
  }

  .zeitleiste-spur .seg {
    font-size: 0.7rem;
    padding-inline: 6px;
  }
}

/* ═════════ Über dimeva ═════════ */
.ueber-held {
  position: relative;
  padding-top: calc(var(--kopf-hoehe) + clamp(40px, 7vw, 100px));
  padding-bottom: var(--abschnitt);
  overflow: hidden;
  isolation: isolate;
}

.ueber-raster {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(36px, 6vw, 110px);
  align-items: end;
}

.ueber-text .kicker {
  margin-bottom: 26px;
}

.ueber-text .lead {
  margin-top: 30px;
}

.ueber-bild {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  aspect-ratio: 3 / 4;
  background: var(--flaeche-2);
}

.ueber-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.zitat--klein {
  margin-top: 0;
  font-size: clamp(1.45rem, 2.4vw, 2.3rem);
  max-width: 26ch;
}

.text .zitat--klein {
  color: var(--text);
}

.drei-karten {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.weise-karte {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(24px, 3vw, 40px);
}

.weise-nr {
  font-size: clamp(3.4rem, 6vw, 5.5rem);
  font-weight: 600;
  letter-spacing: -0.07em;
  line-height: 0.85;
  color: transparent;
  -webkit-text-stroke: 1px rgba(200, 222, 220, 0.35);
  margin-bottom: 34px;
  transition: color 0.6s var(--e-aus), -webkit-text-stroke-color 0.6s;
}

.weise-karte:hover .weise-nr {
  color: var(--text);
  -webkit-text-stroke-color: transparent;
}

.weise-karte p:not(.kicker) {
  color: var(--text-2);
}

@media (max-width: 1020px) {
  .zwei-spalten,
  .ablaufprobe-raster,
  .ueber-raster,
  .drei-karten {
    grid-template-columns: 1fr;
  }

  .ablaufprobe-kopf {
    position: relative;
    top: auto;
  }

  .ueber-bild {
    max-width: 460px;
  }
}

/* ═════════ Kontakt ═════════ */
.kontakt-held {
  min-height: 0;
  padding-top: calc(var(--kopf-hoehe) + clamp(60px, 9vw, 130px));
}

.kontakt-wege {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: clamp(36px, 5vw, 64px);
}

.kontakt-weg {
  display: grid;
  gap: 14px;
  align-content: start;
  justify-items: start;
  padding: clamp(24px, 3vw, 40px);
}

.kontakt-wert {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  font-size: clamp(1.5rem, 3vw, 2.8rem);
  font-weight: 540;
  letter-spacing: -0.04em;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.kontakt-wert i {
  font-style: normal;
  font-size: 0.6em;
  color: var(--text-3);
  transition: transform 0.5s var(--e-aus), color 0.4s;
}

.kontakt-wert:hover i {
  transform: translate(4px, -4px);
  color: var(--orange);
}

.kontakt-raster {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(40px, 6vw, 110px);
  align-items: start;
}

.kontakt-erwartung {
  position: sticky;
  top: calc(var(--kopf-hoehe) + 30px);
  display: grid;
  gap: 24px;
  justify-items: start;
}

.kontakt-schritte {
  display: grid;
  width: 100%;
  border-top: 1px solid var(--linie);
}

.kontakt-schritte li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 8px;
  padding: 20px 0;
  border-bottom: 1px solid var(--linie);
}

.kontakt-schritte span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--linie-stark);
  font-size: 0.78rem;
}

.kontakt-schritte h3 {
  font-size: 1.1rem;
  margin-bottom: 6px;
}

.kontakt-schritte p {
  color: var(--text-2);
  font-size: 0.97rem;
}

.kontakt-erwartung .person-chip {
  justify-self: start;
}

.anfrage {
  display: grid;
  gap: 18px;
}

.anfrage-panel {
  padding: clamp(24px, 3vw, 42px);
}

.anfrage-titel {
  margin-top: 14px;
}

.anfrage-hinweis {
  margin-top: 14px;
  color: var(--text-2);
  max-width: 56ch;
}

#anfrage {
  display: grid;
  gap: 18px;
  margin-top: 28px;
}

#anfrage .knopf {
  justify-self: start;
}

.form-zeile {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.feld textarea[aria-invalid="true"] {
  border-color: var(--orange);
}

/* Briefkarte: wächst live mit */
.brief {
  position: relative;
  padding: 26px 28px 30px;
  border-radius: var(--radius);
  background: linear-gradient(170deg, #eef2f1, #dfe6e4);
  color: #141a1b;
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.9);
  transform: rotate(-0.6deg);
  transition: transform 0.6s var(--e-feder);
}

.brief:hover {
  transform: rotate(0deg) translateY(-3px);
}

.brief-kopf {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(20, 26, 27, 0.14);
  font-size: 0.86rem;
}

.brief-kopf span {
  color: #4b5655;
}

.brief-kopf strong {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.brief-text {
  display: grid;
  gap: 12px;
  margin-top: 18px;
  font-size: 0.98rem;
  line-height: 1.6;
  white-space: pre-line;
}

.brief-text .ist-leer {
  color: #5e6766;
  font-style: italic;
}

.brief-stempel {
  position: absolute;
  right: 22px;
  top: 18px;
  padding: 4px 10px;
  border: 1.5px solid var(--orange);
  border-radius: 6px;
  color: #9a5100;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transform: rotate(4deg);
}

.anfrage-ergebnis {
  padding: clamp(24px, 3vw, 36px);
  display: grid;
  gap: 14px;
  border-color: rgba(252, 134, 4, 0.4);
}

.anfrage-ergebnis[hidden] {
  display: none;
}

.anfrage-ergebnis p {
  color: var(--text-2);
}

.anfrage-ergebnis textarea {
  margin-top: 10px;
}

.seite-kontakt .fuss-finale {
  display: none;
}

@media (max-width: 1020px) {
  .kontakt-wege,
  .kontakt-raster,
  .form-zeile {
    grid-template-columns: 1fr;
  }

  .kontakt-erwartung {
    position: relative;
    top: auto;
  }
}

/* ── 10-dunkel.css ── */
/* Claude-Fassung: dunklere Flaechen, ohne Hintergrundsterne. */
:root {
  --schwarz: #020303;
  --grund-2: #050707;
  --flaeche: #080b0c;
  --flaeche-2: #0d1112;
  --flaeche-3: #131819;
}
.landschaft { opacity: .68; }
.landschaft-statisch { opacity: .56; }
.held-licht { opacity: .6; }
.held-buehne::after {
  background:
    radial-gradient(110% 80% at 0% 100%, rgba(2, 3, 3, .94) 18%, rgba(2, 3, 3, .6) 46%, transparent 72%),
    linear-gradient(180deg, rgba(2, 3, 3, .7) 0%, transparent 22%, transparent 62%, var(--schwarz) 100%);
}
.kopf::before { background: rgba(2, 3, 3, .72); }

.sub-buehne::after {
  background:
    radial-gradient(100% 90% at 0% 100%, rgba(2, 3, 3, .92) 20%, rgba(2, 3, 3, .5) 52%, transparent 78%),
    linear-gradient(180deg, rgba(2, 3, 3, .6) 0%, transparent 30%, transparent 60%, var(--schwarz) 100%);
}
.stapel-karte { background: linear-gradient(160deg, #101415, #080b0c 60%); }