/* ============================================================
   seite-leadmagneten.css — Unterseite „Leadmagneten" (Baustein)
   Nutzt main.css-Tokens und -Klassen (.hero, .naht, .faq, .finale,
   .motor-link ...). Eigenheiten dieser Seite:
   1. Magnet-Feldlinien im Held (konzentrische Hairline-Ringe).
   2. Signature: „Der Tausch" als zwei überlappende Platten (weiße
      Wert-Platte, Petrol-Kontakt-Platte, Schimmer-Fuge dazwischen).
      Seit Welle 68; davor ein SVG-Diagramm mit gestrichelten Bögen,
      das als Powerpoint-Schaubild gelesen wurde.
   3. „Was wir bauen" als drei Zeilen mit Petrol-Zählmarken (Tally-
      Striche): Foto, bedienbarer Selbst-Check (reines CSS, :has()),
      Strecke mit vier Stationen und wanderndem Punkt.
   4. Engpass-Report als EIN echtes Blatt (Seite 13) statt eines Stapels.
   Bühnen: Weiß → Tint → Weiß → Tint → DUNKEL (einziger Akt) →
   Weiß → Tint → Finale dunkel.
   ============================================================ */

/* ---------- Unterseiten-Held: weiße Bühne + Magnet-Feldlinien ---------- */

.unterheld { padding-bottom: clamp(40px, 6vh, 72px); }
.unterheld .wrap { position: relative; z-index: var(--z-inhalt); }
.unterheld h1 { max-width: 22ch; font-size: clamp(2.5rem, 5vw, 3.9rem); }
.unterheld .hero-lead { max-width: 34rem; }
.unterheld .hero-ctas { margin-bottom: 0; }

/* Volle Bühne statt 699 px (Welle 55). Vorher war der Held KÜRZER als der
   Viewport: die Folgesektion stand bei scrollY 0 schon angeschnitten im Bild,
   und der Aufschlag lief zu Ende, während das Objekt oben aus dem Bild fuhr.
   Beides zusammen war der Grund für "setzt zu spät ein". svh statt vh wegen
   der mobilen Adressleiste; der Pin greift ohnehin erst ab 861 px. */
@media (min-width: 861px) {
  .unterheld {
    min-height: 100svh;
    display: flex;
    align-items: center;
  }
  .unterheld .hero-grid { width: 100%; }
}

/* ---------- Der Report als 3D-Held ----------
   Echtes Cover (report-cover-2026.webp), perspektivisch geneigt, mit Blatt-
   stapel an der rechten Kante und Bodenschatten. Die Schwebe-Animation
   trägt die Grundneigung in beiden Keyframes; data-tilt (GSAP) liegt auf
   der Bühne drumherum, damit sich die transforms nicht überschreiben. */
.report-buehne {
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Vierte Transform-Ebene, allein für die Kamerafahrt im Pin (Welle 55). Die
   anderen drei sind belegt: .report-buehne trägt die Maus-Neigung (data-tilt),
   .report-held Grundneigung und Schweben, .rh-blatt den Aufschlag. Eine fünfte
   Animation auf einer davon würde sie überschreiben, das ist die dokumentierte
   Check-Loop-Falle dieser Seite. */
.rh-kamera {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
}

/* Der Lichtkegel, der im Pin hinter dem Report angeht. Eigenes Element statt
   Pseudo, weil GSAP keine Pseudo-Elemente animiert. */
.rh-kegel {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(70, 184, 177, 0.30) 0%,
    rgba(20, 120, 124, 0.16) 34%,
    transparent 68%);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}

.report-held {
  position: relative;
  z-index: 1;
  margin: 0;
  width: min(72%, 360px);
  /* Grundneigung auf dem Element selbst: bei ?static/reduced-motion stirbt
     die Animation, das Cover soll trotzdem 3D stehen, nicht flach. */
  transform: perspective(1100px) rotateY(-16deg) rotateX(3deg);
  animation: report-schwebt 8s ease-in-out infinite alternate;
}

.report-held img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 5px 12px 12px 5px;
  box-shadow:
    0 34px 70px rgba(14, 94, 99, 0.30),
    0 6px 18px rgba(6, 23, 25, 0.18);
}

/* ---------- Der Aufschlag (Welle 53): das Cover dreht beim Scrollen um die
   linke Kante weg und gibt die Innenseite frei. DREI GETRENNTE EBENEN, das
   ist der ganze Trick: .report-buehne traegt die Maus-Neigung (data-tilt,
   GSAP), .report-held die Grundneigung samt Schweben (CSS-Animation), und
   NUR .rh-blatt die Aufschlag-Drehung (GSAP-Scrub). Liegen zwei davon auf
   einem Element, ueberschreiben sie sich (dokumentierte Check-Loop-Falle).
   Ruhezustand ohne JS/static/reduced: rotateY 0 = geschlossenes Cover, also
   exakt das bisherige Bild. ---------- */

/* perspective als PROPERTY (nicht als transform-Funktion): nur so bekommen
   die Kinder einen 3D-Raum. Die transform-Funktion perspective(1100px) in
   .report-held wirkt ausschliesslich auf .report-held selbst. */
.report-held { perspective: 1500px; }

.rh-innen { position: relative; z-index: 0; }

.rh-blatt {
  position: absolute;
  inset: 0;
  z-index: 1;
  transform-origin: left center;
  transform-style: preserve-3d;
  will-change: transform;
}

.rh-blatt img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Licht: das wegdrehende Blatt laeuft aus dem Licht, GSAP faehrt die
   Deckkraft hoch. Sitzt auf der Vorderseite, also mit versteckter Rueckseite. */
.rh-schatten {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 5px 12px 12px 5px;
  background: linear-gradient(100deg, rgba(6, 23, 25, 0.55), rgba(6, 23, 25, 0.15));
  opacity: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  pointer-events: none;
}

/* Rueckseite des Blattes: weisses Papier statt gespiegeltem Cover. War bis
   24.07. cremefarben (#f6f3ec) und stach damit als einziger warmer Ton aus
   einer Palette heraus, die sonst nur Weiss und Petrol kennt. Der Verlauf
   bleibt: ohne ihn sieht die aufgeklappte Innenseite aus wie eine Flaeche,
   nicht wie Papier im Licht. */
.rh-rueck {
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 12px 5px 5px 12px;
  background:
    linear-gradient(255deg, rgba(6, 23, 25, 0.09), transparent 46%),
    #ffffff;
  box-shadow: inset 0 0 0 1px rgba(14, 94, 99, 0.08);
}

/* Papierdicke an der Aussenkante: steht senkrecht zur Blattflaeche und ist
   genau dann zu sehen, wenn das Blatt bei 90 Grad sonst auf Null schrumpfen
   wuerde. Ohne sie verschwindet das Blatt fuer einen Frame komplett. */
.rh-kante {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 5px;
  transform-origin: right center;
  transform: rotateY(90deg);
  border-radius: 0 2px 2px 0;
  /* Weisse Bloetter mit hauchduennen Trennlinien statt Creme auf Beige. */
  background: repeating-linear-gradient(to bottom,
    #ffffff 0 2px, #e4ecec 2px 3px);
}

/* Blattstapel an der rechten Kante: feine Papierlinien */
.report-held::after {
  content: '';
  position: absolute;
  top: 1.6%;
  bottom: 1.2%;
  right: -8px;
  width: 8px;
  border-radius: 0 3px 3px 0;
  background: repeating-linear-gradient(to bottom,
    #ffffff 0 2px, #e4ecec 2px 3px);
}

/* Bodenschatten unter dem schwebenden Report */
.report-held::before {
  content: '';
  position: absolute;
  left: 6%;
  right: -6%;
  bottom: -34px;
  height: 26px;
  background: radial-gradient(50% 100% at 50% 50%, rgba(6, 23, 25, 0.20), transparent 72%);
  filter: blur(7px);
}

@keyframes report-schwebt {
  from { transform: perspective(1100px) rotateY(-16deg) rotateX(3deg) translateY(0); }
  to { transform: perspective(1100px) rotateY(-12deg) rotateX(2deg) translateY(-14px); }
}

/* 860 und nicht 900: Das JS schaltet den Aufschlag bei min-width 861 px ein.
   Standen die Grenzen auseinander (CSS 900, JS 861), lief zwischen 861 und
   900 px die Desktop-Animation auf dem Mobil-Report. Gefunden im Audit zu
   Welle 55; wer eine der beiden Zahlen ändert, ändert beide. */
@media (max-width: 860px) {
  .report-buehne { min-height: 0; margin-top: 8px; }
  .report-held { width: min(52%, 230px); }
  .rh-kegel { display: none; }
}

/* Konzentrische Hairline-Ringe oben rechts: die Feldlinien des Magneten */
.feldlinien {
  position: absolute;
  top: -340px;
  right: -300px;
  width: 900px;
  height: 900px;
  border-radius: 50%;
  background: repeating-radial-gradient(circle at center,
    transparent 0 74px, rgba(14, 94, 99, 0.1) 74px 75px);
  -webkit-mask-image: radial-gradient(circle at center, #000 30%, transparent 68%);
  mask-image: radial-gradient(circle at center, #000 30%, transparent 68%);
}

/* Aktiver Baustein im Dropdown + Mobilnav */
.dd-zeile[aria-current="page"] {
  background: rgba(14, 94, 99, 0.1);
  color: var(--petrol);
  font-weight: 600;
}

.mobilnav-neben a[aria-current="page"] {
  color: var(--petrol) !important;
  font-weight: 600 !important;
}

/* ---------- Der Tausch: getönte Bühne, Signature-Diagramm ---------- */

.tausch {
  background: var(--bg-tint);
  padding-block: clamp(60px, 8.5vh, 108px);
}

.tausch h2 {
  font-size: var(--fs-h2);
  max-width: 26ch;
  margin-bottom: clamp(28px, 4vh, 44px);
}

/* Die Tafel: zwei Platten, die sich überlappen.
   Der Vorgänger war ein SVG-Schaubild (zwei Kästen, gestrichelte Bögen,
   Pfeilspitzen) und las sich wie Powerpoint. Hier tragen Material und
   Überlappung die Aussage: Die helle Platte gibt, die Petrol-Platte nimmt,
   und beide fassen sich in der Mitte an. Bewusst ungleich groß und versetzt
   (Verbot „keine identischen Karten-Grids"). */
.tausch-tafel {
  --tt-versatz: clamp(18px, 3.4vw, 54px);
  position: relative;
  display: grid;
  /* ungleich: die gebende Platte führt */
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  align-items: start;
  /* nicht die volle Wrap-Breite: sonst stehen zwei sehr breite, sehr leere
     Flächen da. Links bündig zur Headline, rechts läuft die Tafel aus. */
  max-width: 92%;
  margin-bottom: clamp(40px, 6vh, 68px);
}

.tt-platte {
  position: relative;
  display: grid;
  gap: clamp(10px, 1.4vw, 16px);
  padding: clamp(26px, 3.4vw, 46px) clamp(24px, 3vw, 42px);
  border-radius: 24px;
  min-width: 0;
}

.tt-wort {
  font-family: var(--f-display);
  font-weight: 600;
  /* bleibt unter dem 6rem-Deckel aus DESIGN.md */
  font-size: clamp(2.5rem, 5.6vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
}

.tt-satz {
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  line-height: 1.5;
  /* keine max-width: der Satz soll die Platte füllen, sonst steht rechts
     eine leere Hälfte und die Platte wirkt unfertig. */
  text-wrap: balance;
}

/* Die gebende Seite: weiße Platte auf der getönten Bühne, mit Gewicht. */
.tt-wert {
  z-index: 2;
  background: var(--bg);
  box-shadow: var(--karte-schatten);
  padding-right: calc(clamp(24px, 3vw, 42px) + var(--tt-versatz));
}

.tt-wert .tt-wort { color: var(--ink); }
.tt-wert .tt-satz { color: var(--ink-soft); }

/* Die nehmende Seite: Petrol-Drench, sitzt tiefer und schiebt sich unter
   die weiße Platte. Der negative Rand ist die Überlappung selbst. */
.tt-kontakt {
  z-index: 1;
  margin-left: calc(-1 * var(--tt-versatz));
  margin-top: clamp(30px, 5vw, 68px);
  padding-left: calc(clamp(24px, 3vw, 42px) + var(--tt-versatz));
  background:
    radial-gradient(120% 140% at 88% 6%, rgba(103, 205, 198, 0.22), transparent 58%),
    linear-gradient(150deg, var(--petrol) 0%, var(--petrol-tief) 100%);
  border-radius: 24px;
}

.tt-kontakt .tt-wort { color: #ffffff; }
.tt-kontakt .tt-satz { color: var(--dunkel-soft); }

/* Die Kante, an der getauscht wird: eine Schimmer-Hairline auf der
   Überlappungsfuge, das einzige bewegte Licht der Sektion. */
.tt-kontakt::before {
  content: '';
  position: absolute;
  inset-block: 0;
  left: var(--tt-versatz);
  width: 2px;
  border-radius: 2px;
  background: var(--shimmer);
  background-size: 100% 260%;
  animation: tt-fuge 5.5s linear infinite;
}

@keyframes tt-fuge {
  to { background-position: 0 -260%; }
}

/* dieselbe Fuge, wenn sie einspaltig waagerecht liegt */
@keyframes tt-fuge-quer {
  to { background-position: -260% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .tt-kontakt::before { animation: none; }
}

.tausch-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 64px);
}

.tausch-label {
  display: block;
  font-weight: 700;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--petrol);
  margin-bottom: clamp(16px, 2vw, 22px);
}

/* Andock-Punkt vor dem Label: greift die Ports des Diagramms auf */
.tausch-label::before {
  content: '';
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--petrol);
  margin-right: 10px;
}

.tausch-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(12px, 1.6vw, 18px);
}

/* Jeder Punkt eine Karte mit Häkchen-Marker statt nackter Zeile */
.tausch-liste li {
  position: relative;
  padding: clamp(18px, 2.2vw, 26px) clamp(20px, 2.4vw, 28px) clamp(18px, 2.2vw, 26px) 58px;
  background: #ffffff;
  border: 1px solid var(--linie);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(11, 27, 29, 0.03);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}

.tausch-liste li:hover {
  transform: translateY(-3px);
  border-color: rgba(14, 94, 99, 0.3);
  box-shadow: 0 2px 6px rgba(11, 27, 29, 0.04), 0 20px 44px rgba(14, 94, 99, 0.12);
}

/* Häkchen-Marker links */
.tausch-liste li::before {
  content: '';
  position: absolute;
  left: clamp(18px, 2vw, 22px);
  top: clamp(20px, 2.4vw, 28px);
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background:
    linear-gradient(155deg, rgba(103, 205, 198, 0.22), rgba(14, 94, 99, 0.12)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.5' fill='none' stroke='%230e5e63' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px no-repeat;
}

.tausch-liste h3 { font-size: 1.1rem; margin-bottom: 5px; }

.tausch-liste p {
  color: var(--ink-soft);
  font-size: 0.96rem;
  line-height: 1.6;
}

/* „Was Sie bekommen" (rechte Spalte) petrol getönt — der Gewinn für den Kunden */
.tausch-col + .tausch-col .tausch-liste li {
  background: linear-gradient(160deg, rgba(103, 205, 198, 0.09), rgba(14, 94, 99, 0.04));
  border-color: rgba(14, 94, 99, 0.16);
}

@media (max-width: 720px) {
  .tausch-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Was wir bauen: WEISSE Bühne, drei Zeilen (Welle 55) ----------
   Vorher: Ledger links, EIN haftendes Foto rechts. Das Foto zeigt den
   gedruckten Report und illustrierte damit nur Punkt 1; Punkt 2 und 3 standen
   ohne Bild da, rechts blieb Leerraum. Jetzt hat jeder Punkt sein eigenes
   Beweisstück, in drei bewusst verschiedenen Formen: Foto, bedienbares
   Werkzeug, gebaute Grafik. Drei gleiche Karten wären das Gegenteil davon. */

.bauen {
  background: var(--bg);
  padding-block: clamp(72px, 10vh, 128px);
}

.bauen h2 { max-width: 16ch; margin-bottom: clamp(40px, 5vh, 64px); }

.bau-zeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(32px, 5vw, 76px);
  align-items: center;
  padding-block: clamp(34px, 4.5vh, 58px);
  border-top: 1px solid var(--linie);
}

/* Zweite Zeile gespiegelt: das Werkzeug steht links, wo der Blick zuerst
   hinfällt. Reine Anzeige-Umkehr, die Lesereihenfolge im DOM bleibt richtig. */
.bau-zeile-gedreht { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }

/* Die Petrol-Zählmarken bleiben das Ordnungszeichen dieser Sektion. Sie sind
   der Grund, warum hier KEINE 01/02/03 stehen: Tally-Striche sind ein
   Zeus-Element, gesetzte Ziffern wären das Gerüst, das jede zweite Website
   benutzt (der impeccable-Hook flaggt sie zu Recht). */
.zaehl {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  margin-bottom: 18px;
}

.zaehl i {
  width: 5px;
  height: 30px;
  border-radius: 3px;
  background: var(--petrol);
  transform: rotate(12deg);
}

.bau-text h3 {
  margin: 0 0 12px;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
}

.bau-text p {
  margin: 0;
  color: var(--ink-soft);
  max-width: 44ch;
  line-height: 1.7;
}

.bau-beleg {
  margin-top: 14px !important;
  font-size: 0.9rem;
  color: var(--ink-leise) !important;
}

.bau-foto {
  margin: 0;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--karte-schatten);
}

.bau-foto img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.bau-foto:hover img { transform: scale(1.03); }

/* ---------- Der Selbst-Check: ein Werkzeug statt eines Bildes davon --------
   Die Urteilszeile reagiert ohne JavaScript. Für "genau eines angekreuzt"
   genügt :has(:checked); für "zwei oder mehr" gibt es in CSS keinen Zähler,
   deshalb sind die sechs Paare aus vier Kästchen ausgeschrieben. Vier ist
   genau die Zahl, bei der das noch lesbar ist. Wer eine fünfte Frage ergänzt,
   kommt auf zehn Paare und sollte dann auf JS wechseln.
   Ohne :has()-Unterstützung greift keine der Regeln, dann bleibt die neutrale
   Zeile stehen und das Ankreuzen funktioniert trotzdem. */

.selbstcheck {
  padding: clamp(22px, 2.6vw, 30px);
  border-radius: 20px;
  border: 1px solid var(--linie);
  background: var(--bg);
  box-shadow: var(--karte-schatten);
}

.sc-kopf {
  margin: 0 0 16px;
  font-weight: 600;
  color: var(--ink);
}

.sc-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.sc-frage label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 13px;
  align-items: start;
  padding: 11px 12px;
  border-radius: 12px;
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ink-soft);
  transition: background 0.2s ease, color 0.2s ease;
}

.sc-frage label:hover { background: var(--bg-tint); }

.sc-frage input {
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--petrol);
  cursor: pointer;
}

.sc-frage:has(input:checked) label { color: var(--ink); font-weight: 500; }

.sc-urteil {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--linie);
  font-size: 0.95rem;
  line-height: 1.55;
  min-height: 3em;
}

/* Genau eine der drei Fassungen ist sichtbar. Grundzustand: die neutrale. */
.sc-u { display: none; color: var(--ink-leise); }
.sc-u-null { display: block; }

.selbstcheck:has(input:checked) .sc-u-null { display: none; }
.selbstcheck:has(input:checked) .sc-u-eins { display: block; }

.selbstcheck:has(.sc-frage:nth-child(1) input:checked):has(.sc-frage:nth-child(2) input:checked) .sc-u-eins,
.selbstcheck:has(.sc-frage:nth-child(1) input:checked):has(.sc-frage:nth-child(3) input:checked) .sc-u-eins,
.selbstcheck:has(.sc-frage:nth-child(1) input:checked):has(.sc-frage:nth-child(4) input:checked) .sc-u-eins,
.selbstcheck:has(.sc-frage:nth-child(2) input:checked):has(.sc-frage:nth-child(3) input:checked) .sc-u-eins,
.selbstcheck:has(.sc-frage:nth-child(2) input:checked):has(.sc-frage:nth-child(4) input:checked) .sc-u-eins,
.selbstcheck:has(.sc-frage:nth-child(3) input:checked):has(.sc-frage:nth-child(4) input:checked) .sc-u-eins { display: none; }

.selbstcheck:has(.sc-frage:nth-child(1) input:checked):has(.sc-frage:nth-child(2) input:checked) .sc-u-zwei,
.selbstcheck:has(.sc-frage:nth-child(1) input:checked):has(.sc-frage:nth-child(3) input:checked) .sc-u-zwei,
.selbstcheck:has(.sc-frage:nth-child(1) input:checked):has(.sc-frage:nth-child(4) input:checked) .sc-u-zwei,
.selbstcheck:has(.sc-frage:nth-child(2) input:checked):has(.sc-frage:nth-child(3) input:checked) .sc-u-zwei,
.selbstcheck:has(.sc-frage:nth-child(2) input:checked):has(.sc-frage:nth-child(4) input:checked) .sc-u-zwei,
.selbstcheck:has(.sc-frage:nth-child(3) input:checked):has(.sc-frage:nth-child(4) input:checked) .sc-u-zwei {
  display: block;
  color: var(--petrol);
  font-weight: 600;
}

/* ---------- Die Strecke: volle Breite, vier Stationen ---------- */

.bau-strecke {
  position: relative;
  padding-block: clamp(34px, 4.5vh, 58px) 0;
  border-top: 1px solid var(--linie);

  /* Die Stationsmitten stehen NICHT bei glatten 12.5/37.5/62.5/87.5 Prozent:
     zwischen den vier Spalten liegen drei Lücken, die die Mitten nach innen
     schieben. Mit den glatten Werten saß der Läufer gemessen 11 px neben der
     letzten Station. Deshalb hier die echte Rechnung, einmal als Variablen:
     --st-schritt = eine Spalte plus eine Lücke, --st-halb = halbe Spalte.
     .bau-strecke und .strecke sind exakt gleich breit, die Prozente lösen
     also in beiden gleich auf. */
  --st-gap: clamp(16px, 2.4vw, 34px);
  --st-halb: calc((100% - 3 * var(--st-gap)) / 8);
  --st-schritt: calc((100% - 3 * var(--st-gap)) / 4 + var(--st-gap));
}

.bau-text-breit p { max-width: 52ch; }

.strecke {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--st-gap);
  margin: clamp(34px, 4vh, 52px) 0 0;
  padding: 0;
  position: relative;
}

/* Die Linie, auf der die Stationen sitzen. Läuft von der ersten bis zur
   letzten Station, nicht über die volle Breite: sonst zeigt sie ins Nichts. */
.strecke::before {
  content: '';
  position: absolute;
  top: 7px;
  left: var(--st-halb);
  right: var(--st-halb);
  height: 2px;
  background: linear-gradient(90deg,
    var(--petrol) 0%, #2e9e96 50%, var(--mint-hell) 100%);
  opacity: 0.35;
}

.strecke li {
  display: grid;
  gap: 6px;
  padding-top: 30px;
  text-align: center;
}

.st-punkt {
  position: absolute;
  top: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--petrol);
  transform: translateX(-50%);
  left: 50%;
}

.strecke li { position: relative; }

.strecke strong { font-size: 1rem; color: var(--ink); }
.strecke span:last-child { font-size: 0.86rem; color: var(--ink-leise); line-height: 1.45; }

/* Der wandernde Punkt als Pseudo-Element von .strecke und NICHT als eigenes
   Element: Nur so liegt er in derselben Bezugsbox wie die Linie (.strecke
   ::before) und teilt deren top-Wert. Als Geschwister von .strecke musste
   sein Abstand von Hand nachgerechnet werden, und genau das ging schief (er
   saß über der Linie statt darauf). Ein <span> INNERHALB der Liste wäre
   ungültiges HTML, ein <ol> nimmt nur <li>.
   Ruhezustand ist die LETZTE Station und nicht die erste: Ohne Animation
   (static, reduced motion, kein JS) soll die Grafik das Ergebnis zeigen,
   also den Termin. Stünde der Punkt dort auf Station 1, erzählte die Sektion
   im Standbild das Gegenteil ihrer Aussage. */
.strecke::after {
  content: '';
  position: absolute;
  top: 7px;
  left: calc(3 * var(--st-schritt) + var(--st-halb));
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: var(--mint-hell);
  box-shadow: 0 0 0 4px rgba(70, 184, 177, 0.22);
}

html.js .strecke::after {
  animation: strecke-lauf 5.5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes strecke-lauf {
  0%, 8% { left: var(--st-halb); }
  30%, 38% { left: calc(var(--st-schritt) + var(--st-halb)); }
  60%, 68% { left: calc(2 * var(--st-schritt) + var(--st-halb)); }
  90%, 100% { left: calc(3 * var(--st-schritt) + var(--st-halb)); }
}

@media (prefers-reduced-motion: reduce) {
  html.js .strecke::after { animation: none; }
}

@media (max-width: 860px) {
  .bau-zeile,
  .bau-zeile-gedreht { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  /* Auf schmal steht das Bild bzw. Werkzeug UNTER dem Text: erst lesen,
     was es ist, dann sehen. Auf breit liegt beides nebeneinander. */
  .bau-zeile-gedreht .selbstcheck { order: 2; }
  .strecke { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 18px; }
  .strecke::before,
  .strecke::after { display: none; }
}

/* ---------- Beweis: getönte Bühne, EIN Blatt + Beleg (Welle 55) ----------
   Vorher lagen hier zwei leere Fake-Blätter hinter einer hellen Textseite.
   Das Problem war nicht der Stapel, sondern die Seite: Report-Seite 03 hat
   die Mittelfarbe #EDF3F3 und steht damit mit gemessenen 1.02:1 auf der
   getönten Bühne — als Objekt praktisch unsichtbar. Jetzt liegt dort Seite 13
   (#34787B, 4.66:1). Ein einzelnes echtes Blatt trägt mehr als drei, von
   denen zwei erfunden sind. Und es wird nicht mehr auf 3/4 beschnitten:
   der alte Zuschnitt rasierte Kopf- und Fußzeile der Seite weg. */

.anzeige {
  background: var(--bg-tint);
  padding-block: clamp(64px, 9vh, 116px);
}

.anzeige-wrap {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  gap: clamp(48px, 7vw, 110px);
  align-items: center;
}

.anzeige-blatt {
  position: relative;
  margin: 0;
  width: 100%;
  max-width: 400px;
  justify-self: center;
}

/* Das ganze Blatt ist der Weg zum Report. */
/* Haarlinie plus tiefer Schatten: Die gezeigte Seite ist zur Hälfte hell, und
   eine helle Fläche auf heller Bühne schwimmt. Die Kante macht daraus ein
   Objekt mit Rand, der Schatten hebt es von der Bühne ab. */
.anzeige-blatt a {
  display: block;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(14, 94, 99, 0.12),
    0 1px 2px rgba(11, 27, 29, 0.07),
    0 22px 52px rgba(11, 27, 29, 0.20);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.anzeige-blatt a:hover {
  transform: translateY(-7px);
  box-shadow:
    0 0 0 1px rgba(14, 94, 99, 0.16),
    0 1px 2px rgba(11, 27, 29, 0.07),
    0 32px 68px rgba(11, 27, 29, 0.26);
}

/* Kein aspect-ratio, kein object-fit: die Seite behält ihr A4-Verhältnis. */
.anzeige-blatt img {
  display: block;
  width: 100%;
  height: auto;
}

/* Einmaliger Lichtstreifen beim Einblenden. Läuft genau einmal, nicht in
   Schleife: eine Dauer-Animation auf einem Beweisstück wirkt wie Werbung.
   Im static-Modus und bei reduzierter Bewegung passiert nichts (animation
   wird dort global abgeschaltet), der Ruhezustand ist das saubere Blatt. */
.anzeige-schimmer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(100deg,
    transparent 38%, rgba(255, 255, 255, 0.42) 50%, transparent 62%);
  background-size: 280% 100%;
  background-position: 130% 0;
}

.anzeige-blatt.ist-sichtbar .anzeige-schimmer {
  animation: anzeige-schimmer 1.5s cubic-bezier(0.33, 0, 0.2, 1) 0.35s 1 backwards;
}

@keyframes anzeige-schimmer {
  from { background-position: 130% 0; }
  to { background-position: -70% 0; }
}

.anzeige-blatt figcaption {
  margin-top: 14px;
  text-align: center;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--ink-leise);
}

.anzeige-label {
  display: block;
  font-weight: 700;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--petrol);
  margin-bottom: 16px;
}

.anzeige-text h2 {
  max-width: 15ch;
  margin: 0 0 20px;
}

.anzeige-beleg {
  font-size: 1.05rem;
  color: var(--ink-soft);
  max-width: 42ch;
  line-height: 1.65;
  margin: 0 0 clamp(24px, 3vh, 34px);
}

/* Die Zahl als Monument neben dem Beleg: Zahl links, Einordnung rechts,
   getrennt durch eine Haarlinie statt durch eine Karte. */
.anzeige-zahl {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  margin: 0 0 clamp(24px, 3vh, 32px);
  padding-top: 22px;
  border-top: 1px solid var(--linie);
  max-width: 34rem;
}

.anzeige-zahl .odo {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(2.6rem, 4.4vw, 3.6rem);
  line-height: 1;
  color: var(--petrol);
  letter-spacing: -0.03em;
}

.anzeige-zahl span:last-child {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-leise);
}

/* ---------- Warum ein Baustein: der EINE dunkle Akt ---------- */

.warum {
  background: var(--bg-deep);
  color: var(--dunkel-ink);
  padding-block: clamp(68px, 9.5vh, 120px);
  overflow: clip;
  text-align: center;
}

.warum-aurora {
  position: absolute;
  inset: -10% -20%;
  z-index: var(--z-orb);
  background:
    radial-gradient(760px 420px at 20% 10%, rgba(20, 120, 124, 0.32), transparent 65%),
    radial-gradient(700px 400px at 85% 85%, rgba(103, 205, 198, 0.14), transparent 60%);
  filter: blur(10px);
  animation: orb-drift 28s ease-in-out infinite alternate;
}

.warum .wrap {
  position: relative;
  z-index: var(--z-inhalt);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.warum h2 {
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  color: #ffffff;
  max-width: 26ch;
  margin-bottom: 24px;
}

.warum h2 em { color: var(--mint-hell); }

.warum p {
  max-width: 62ch;
  font-size: 1.08rem;
  line-height: 1.7;
  color: var(--dunkel-soft);
}

/* ---------- Brücke zu den Motoren: schlichte weiße Zeile ---------- */

.bruecke {
  background: var(--bg);
  padding-block: clamp(20px, 4vh, 48px) clamp(60px, 8.5vh, 108px);
}

.bruecke-intro {
  font-size: 0.98rem;
  color: var(--ink-soft);
  margin-bottom: 20px;
}

.motor-links {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 4vw, 56px);
}

/* ---------- FAQ: hier getönt (Bühnenwechsel nach der weißen Brücke) ---------- */

.faq { background: var(--bg-tint); }

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
  .bauen-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "kopf"
      "foto"
      "liste";
  }

  .bauen-foto {
    position: static;
    max-width: 680px;
    margin-bottom: clamp(32px, 5vh, 48px);
  }
}

@media (max-width: 860px) {
  /* Einspaltig kippt die Überlappung von waagerecht auf senkrecht: die
     Petrol-Platte schiebt sich unter die untere Kante der weißen. Der
     Versatz bleibt sichtbar, sonst wären es zwei gestapelte Karten. */
  .tausch-tafel {
    grid-template-columns: minmax(0, 1fr);
  }

  .tt-wert {
    padding-right: clamp(24px, 3vw, 42px);
    padding-bottom: calc(clamp(26px, 3.4vw, 46px) + var(--tt-versatz));
  }

  .tt-kontakt {
    margin-left: clamp(20px, 5vw, 40px);
    margin-top: calc(-1 * var(--tt-versatz));
    padding-left: clamp(24px, 3vw, 42px);
    padding-top: calc(clamp(26px, 3.4vw, 46px) + var(--tt-versatz));
  }

  .tt-kontakt::before {
    inset-block: auto;
    inset-inline: 0;
    top: var(--tt-versatz);
    width: auto;
    height: 2px;
    background-size: 260% 100%;
    animation-name: tt-fuge-quer;
  }

  .tausch-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }

  .tausch-col { padding-right: 0; }

  .tausch-col + .tausch-col {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--linie);
    margin-top: clamp(28px, 5vw, 40px);
    padding-top: clamp(28px, 5vw, 40px);
  }

  .anzeige-wrap { grid-template-columns: minmax(0, 1fr); gap: 44px; }

  .stapel { max-width: 340px; }

  /* Weniger Ausschlag: nichts ragt aus der schmalen Bühne */
  .blatt-a { transform: rotate(-3deg) translate(-7px, 7px); }
  .blatt-b { transform: rotate(2deg) translate(7px, 3px); }
  .stapel:hover .blatt-a { transform: rotate(-4.5deg) translate(-11px, 9px); }
  .stapel:hover .blatt-b { transform: rotate(3deg) translate(11px, 4px); }
}

@media (max-width: 720px) {
  .hero.unterheld { padding-top: 108px; }
  .unterheld .hero-ctas .btn-gross { width: 100%; justify-content: center; }

  .ledger li { grid-template-columns: 48px minmax(0, 1fr); }

  .zaehl i { width: 4px; height: 22px; }
  .ledger li:first-child .zaehl i { height: 30px; }
}