/* ==========================================================================
   Authentic Living Design – Abschnitte
   ========================================================================== */

.sprungmarke {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 200;
  padding: 0.7rem 1.2rem;
  font-family: var(--grotesk);
  font-size: var(--t-klein);
  background: var(--tinte);
  color: var(--papier);
  border-radius: 4px;
  text-decoration: none;
  transform: translateY(-200%);
}
.sprungmarke:focus { transform: none; }

/* --- Ladevorgang ---------------------------------------------------------- */
/* Das Signet zeichnet sich in zwei Stufen: erst das Quadrat, dann die
   Buchstaben darin. Danach blendet die Fläche auf und die Lage fährt nach
   oben weg.

   Rein per CSS. Ohne JavaScript läuft die Folge genauso ab – `forwards` plus
   `visibility: hidden` am Ende sorgen dafür, dass die Lage sicher
   verschwindet und den Inhalt nie dauerhaft verdeckt.

   Getrickst wird mit `pathLength="1"` im Markup: dadurch ist jede Kontur
   normiert auf die Länge 1 und `stroke-dasharray: 1` genügt – die echte
   Pfadlänge müsste sonst JavaScript ausmessen. */
.ladelage {
  position: fixed;
  inset: 0;
  z-index: 150;
  /* Die Farben der Seite: Tinte und Papier, wie in Leistungsstapel und Fuß. */
  background: var(--tinte);
  color: var(--papier);
  animation: ladelage-weg 0.9s var(--kurve) 4.6s forwards;
}
/* Hart zentriert statt über `place-items`: so hängt die Mitte an nichts
   anderem als am Fenster – kein Raster, kein Zeilenfluss, keine Scrollleiste. */
.ladelage__zeichen {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: clamp(5rem, 10vw, 8.5rem);
  aspect-ratio: 1 / 1;
  overflow: visible;
}

/* Die Konturen zeichnen sich. `stroke-dashoffset` läuft von 1 auf 0. */
.ladelage__rahmen,
.ladelage__buchstaben {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.ladelage__rahmen { animation: strich-ziehen 1.8s var(--kurve) 0.25s forwards; }
.ladelage__buchstaben { animation: strich-ziehen 1.9s var(--kurve) 1.9s forwards; }

/* Zum Schluss füllt sich das Zeichen, die Konturen treten zurück. */
.ladelage__flaeche {
  fill: currentColor;
  opacity: 0;
  animation: flaeche-auf 0.7s var(--kurve) 3.7s forwards;
}

@keyframes strich-ziehen { to { stroke-dashoffset: 0; } }
@keyframes flaeche-auf { to { opacity: 1; } }
@keyframes ladelage-weg {
  to { transform: translateY(-100%); visibility: hidden; }
}

/* Bei reduzierter Bewegung nur ein kurzes Aufblenden – kein Zeichnen,
   kein Wegfahren über die halbe Seite. */
@media (prefers-reduced-motion: reduce) {
  .ladelage { animation: ladelage-aus 0.3s linear 0.6s forwards; }
  .ladelage__rahmen,
  .ladelage__buchstaben { display: none; }
  .ladelage__flaeche { animation: flaeche-auf 0.3s linear forwards; }
  @keyframes ladelage-aus { to { opacity: 0; visibility: hidden; } }
}

/* --- Kopfzeile ------------------------------------------------------------ */
/* Kein Balken: die Kopfzeile ist immer durchsichtig. Über Bildern steht sie
   in Papier, über hellen Abschnitten in Tinte – die Farbe wechselt, der
   Grund nie. Für die Lesbarkeit auf Bildern sorgt ein Verlauf, der mit
   umschaltet. */
.kopf {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(0.9rem, 1.6vw, 1.6rem) var(--rand);
  color: var(--papier);
  transition: color 0.4s var(--kurve), transform 0.45s var(--kurve);
}
/* Beim Abwärtslesen fährt die Kopfzeile weg. Sonst laufen große
   Überschriften – etwa „Besichtigung oder Videocall" – mitten durch die
   Navigation. Beim Zurückscrollen ist sie sofort wieder da. */
.kopf--weg { transform: translateY(-105%); }
@media (prefers-reduced-motion: reduce) {
  .kopf { transition: color 0.4s; }
}
/* Weicher Abdunkler statt eines Balkens: hell auf Bild bleibt lesbar, ohne
   dass eine Fläche über dem Motiv liegt. */
.kopf::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 210%;
  z-index: -1;
  background: linear-gradient(180deg, rgba(18, 16, 14, 0.5) 0%, rgba(18, 16, 14, 0) 100%);
  transition: opacity 0.4s var(--kurve);
  pointer-events: none;
}
/* Über hellen Abschnitten: dunkle Schrift, kein Verlauf, weiterhin kein Grund. */
.kopf--dunkel { color: var(--tinte); }
.kopf--dunkel::before { opacity: 0; }

/* Das Signet ist ausgespart: das Monogramm zeigt den Hintergrund. Deshalb
   nur `fill` setzen – es nimmt über currentColor die Farbe der Kopfzeile an. */
.signet {
  display: block;
  width: auto;
  height: 100%;
  aspect-ratio: 1 / 1;
  fill: currentColor;
}

.kopf__marke {
  display: grid;
  align-content: center;
  /* Mindestens 44 px hoch, sonst ist das Signet am Handy kaum zu treffen. */
  min-height: 44px;
  padding: 0.35rem 0;
  text-decoration: none;
}
.kopf__marke .signet {
  /* Unter etwa 38 px läuft das ausgesparte Monogramm optisch zu. */
  height: clamp(2.4rem, 3vw, 3rem);
}

/* Eine durchlaufende Zeile in gemischter Schreibung, Wörter durch Kommas
   getrennt – der aktuelle Abschnitt ist unterstrichen. Keine Versalien und
   keine gesperrte Laufweite: das Vorbild setzt hier bewusst schlicht. */
.kopf__nav {
  display: flex;
  align-items: baseline;
  /* Der Abstand sitzt nach dem Komma, nicht um jedes Wort – sonst reißt
     die Zeile auseinander und liest sich nicht mehr als ein Satz. */
  gap: 0;
  font-family: var(--grotesk);
  font-size: clamp(0.8125rem, 0.62vw + 0.53rem, 1rem);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}
.kopf__nav span { padding-right: 0.45em; }
.kopf__nav a {
  text-decoration: none;
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
  transition: opacity 0.3s var(--kurve);
}
.kopf__nav a:hover,
.kopf__nav a[aria-current='true'] { text-decoration: underline; }

@media (pointer: coarse) {
  /* Am Finger braucht jeder Eintrag 44 px Höhe. Die Kommas bleiben auf der
     Grundlinie, weil inline-flex seine Grundlinie vom ersten Kind erbt. */
  .kopf__nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

@media (max-width: 560px) {
  /* Am Handy wird die Zeile sonst breiter als das Fenster. */
  .kopf__nav { font-size: 0.8125rem; }
  .kopf__nav a[href='#haltung'],
  .kopf__nav a[href='#haltung'] + span { display: none; }
}

/* --- 1 · Auftakt ---------------------------------------------------------- */
.hero {
  position: relative;
  /* svh statt vh: sonst schiebt die Adressleiste auf iOS den Fuß aus dem Bild. */
  height: 100svh;
  min-height: 34rem;
  display: grid;
  align-items: end;
  overflow: hidden;
  color: var(--papier);
}
/* Reserve nach oben für die Parallaxe: das Bild wandert beim Scrollen um
   0,15 × Fensterhöhe nach unten (an der Referenz gemessen). Ohne die
   Reserve käme oben eine leere Kante zum Vorschein. */
.hero__bild {
  position: absolute;
  inset: -18% 0 0 0;
  height: 118%;
  will-change: transform;
}
.hero__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__bild::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(18, 16, 14, 0.42) 0%, rgba(18, 16, 14, 0.12) 38%, rgba(18, 16, 14, 0.62) 100%);
}
.hero__satz {
  position: relative;
  z-index: 2;
  padding: 0 var(--rand) clamp(5rem, 12vh, 9rem);
  grid-row: 1;
  align-self: end;
}
.hero__titel {
  display: grid;
  font-size: var(--t-riesig);
  /* Versalien: keine negative Laufweite, sonst stoßen die Buchstaben
     aneinander. Ohne Unterlängen darf die Zeile enger stehen. */
  letter-spacing: 0.005em;
  line-height: 0.9;
}
.hero__claim {
  margin-top: clamp(1.1rem, 2.6vh, 2.2rem);
  max-width: 30ch;
  color: rgba(247, 244, 239, 0.88);
}
.hero__fuss {
  position: absolute;
  left: var(--rand);
  right: var(--rand);
  bottom: clamp(1.2rem, 3vh, 2.2rem);
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}
.hero__fuss .label { color: rgba(247, 244, 239, 0.8); }
.hero__pfeil {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  gap: 0.5em;
  min-height: 44px;
  align-items: center;
}

/* --- 2 · Leistungen: der gestapelte Abschnitt ----------------------------- */
/* Sicherer Zustand ohne Skript: schlichte Bilderfolge, volle Höhe nur dann,
   wenn die Bewegung auch wirklich eingerichtet wurde (Klasse --bewegt). */
.stapel {
  position: relative;
  background: var(--tinte);
}
.stapel__bilder { position: relative; }
.stapel__ebene {
  position: relative;
  height: 68svh;
  margin: 0;
}
.stapel__ebene img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.stapel__verlauf { display: none; }

.stapel__liste {
  display: grid;
  gap: 0.15em;
  padding: clamp(1.5rem, 4vh, 3rem) var(--rand);
  font-family: var(--grotesk);
  font-size: var(--t-klein);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(247, 244, 239, 0.55);
}
.stapel__liste a {
  position: relative;
  display: block;
  min-height: 30px;
  padding: 0.28em 0 0.28em 1.4em;
  text-decoration: none;
  transition: color 0.35s var(--kurve);
}
/* Ring als Marke der aktiven Leistung */
.stapel__liste a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 0.55em;
  height: 0.55em;
  margin-top: -0.28em;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.35s var(--kurve);
}
.stapel__liste a:hover { color: var(--papier); }
.stapel__liste a[aria-current='true'] {
  color: var(--papier);
  font-weight: 600;
}
.stapel__liste a[aria-current='true']::before { opacity: 1; }

.stapel__ort {
  padding: 0 var(--rand) clamp(1.5rem, 4vh, 3rem);
  color: rgba(247, 244, 239, 0.45);
}

/* Großer Titel der aktiven Leistung. Ohne Skript zeigt er einfach die
   erste Leistung – die Maske schneidet nichts weg, solange nichts läuft. */
.stapel__titel {
  padding: 0 var(--rand);
  color: var(--papier);
  font-family: var(--display);
  /* Bemessen am längsten Namen („Terrassengestaltung", 19 Zeichen):
     bei 4,3 vw passt er auf einer Zeile in die linke Hälfte. */
  font-size: clamp(1.3rem, 3.7vw, 3.8rem);
  line-height: 1.04;
  letter-spacing: 0.01em;
}
.stapel__titel-maske {
  display: block;
  overflow: hidden;
  /* Feste Höhe: die Ebenen liegen übereinander, der Kasten darf beim
     Wechsel nicht springen. Etwas Luft für die Unterlängen. */
  height: 1.24em;
}
.stapel__titel-text {
  display: block;
  position: relative;
  height: 100%;
}
.stapel__titel-lage {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
}
.stapel__titel .zeichen {
  display: inline-block;
  will-change: transform;
}

/* Bewegte Fassung – wird von seite.js zugeschaltet */
.stapel--bewegt {
  height: calc(var(--ebenen) * 80svh);
}
.stapel--bewegt .stapel__rahmen {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  display: grid;
  align-content: end;
}
.stapel--bewegt .stapel__bilder {
  position: absolute;
  inset: 0;
}
.stapel--bewegt .stapel__ebene {
  position: absolute;
  inset: 0;
  height: auto;
  /* Gemessene Mechanik: Ebene verschiebt sich, der Beschnitt läuft doppelt
     so schnell mit – dadurch sind immer genau zwei Bilder zu sehen. */
  transform: translate3d(0, var(--y, 0px), 0);
  clip-path: inset(0 0 calc(-1 * var(--y, 0px)) 0);
  z-index: var(--z, 1);
  will-change: transform, clip-path;
}
.stapel--bewegt .stapel__verlauf {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 62%;
  z-index: 50;
  /* Kräftiger als zuvor: über hellen Innenaufnahmen war die Leistungsreihe
     sonst kaum zu lesen. */
  background: linear-gradient(180deg, rgba(18, 16, 14, 0) 0%, rgba(18, 16, 14, 0.55) 55%, rgba(18, 16, 14, 0.88) 100%);
  pointer-events: none;
}
/* Titel und Liste stehen beide links unten, untereinander. Die rechte
   Seite bleibt frei – dort soll ausdrücklich keine Navigation stehen. */
.stapel--bewegt .stapel__titel,
.stapel--bewegt .stapel__liste,
.stapel--bewegt .stapel__ort {
  position: relative;
  z-index: 60;
  justify-self: start;
  text-align: left;
  padding-inline: var(--rand);
  margin: 0;
}

/* Die Titelebenen sind absolut gesetzt, der Kasten hätte sonst keine
   Breite – und die Maske (overflow: hidden) würde den Namen wegschneiden. */
.stapel--bewegt .stapel__titel {
  justify-self: stretch;
  width: 100%;
}

/* Die Liste läuft als eine Reihe unter dem Titel. */
.stapel--bewegt .stapel__liste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 clamp(1rem, 2vw, 2.2rem);
  padding-top: clamp(0.8rem, 2vh, 1.4rem);
  padding-bottom: 0;
  max-width: 62rem;
}
.stapel--bewegt .stapel__liste a {
  padding: 0.3em 0;
  min-height: 0;
}
/* Der Ring vor dem Eintrag würde in der Reihe unruhig wirken – hier
   markiert stattdessen eine feine Linie unter dem aktiven Eintrag. */
.stapel--bewegt .stapel__liste a::before { content: none; }
.stapel--bewegt .stapel__liste a[aria-current='true'] {
  box-shadow: 0 1px 0 0 currentColor;
}
.stapel--bewegt .stapel__ort {
  padding-top: clamp(1rem, 2.6vh, 1.8rem);
  padding-bottom: clamp(1.4rem, 4vh, 2.6rem);
}

@media (pointer: coarse) {
  .stapel--bewegt .stapel__liste a { min-height: 44px; justify-content: flex-start; }
}

@media (max-width: 900px) {
  .stapel--bewegt .stapel__liste { max-width: none; }
}
/* --- 3 · Haltung ---------------------------------------------------------- */
.haltung {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0 clamp(0.8rem, 1.6vw, 1.6rem);
  padding: clamp(5rem, 14vh, 11rem) var(--rand);
}
.haltung__kopf { grid-column: 1 / 5; }
.haltung__titel {
  font-size: var(--t-gross);
  line-height: 0.98;
  margin-bottom: 1.8rem;
}
.haltung__text {
  grid-column: 5 / 10;
  display: grid;
  gap: 1.4rem;
}
.haltung__text-zwei { color: var(--tinte-leise); }

/* --- Parallaxen-Galerie --------------------------------------------------- */
/* Vier Spalten in einem Raster, jede mit eigenem Versatz. Das
   unterschiedliche Tempo kommt aus dem Skript (data-tempo); ohne Skript
   steht hier ein ruhiges, versetztes Raster – auch das funktioniert. */
.haltung__galerie {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0 clamp(0.8rem, 1.6vw, 1.6rem);
  margin-top: clamp(3rem, 9vh, 7rem);
  /* Platz für den Vorlauf der schnellsten Spalte */
  padding-bottom: clamp(4rem, 14vh, 11rem);
}
.haltung__spalte {
  position: relative;
  margin: 0;
  will-change: transform;
}
.haltung__spalte--a { grid-column: 1 / 4; margin-top: 0; }
.haltung__spalte--b { grid-column: 5 / 8; margin-top: clamp(6rem, 18vh, 14rem); }
.haltung__spalte--c { grid-column: 9 / 13; margin-top: clamp(2rem, 6vh, 5rem); }
.haltung__spalte--d { grid-column: 3 / 6; margin-top: clamp(5rem, 14vh, 11rem); }

.haltung__spalte .bild-rahmen {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
}
/* 120 px Reserve oben: das Bild läuft im Rahmen um 95 px nach unten
   (gemessener Wert), ohne dass eine Kante frei wird. */
.haltung__spalte .bild-rahmen img {
  width: 100%;
  height: calc(100% + 120px);
  margin-top: -120px;
  object-fit: cover;
  will-change: transform;
}
.haltung__spalte figcaption {
  display: grid;
  gap: 0.2rem;
  padding-top: 0.9rem;
}
.haltung__bild-titel { font-size: var(--t-text); }
.haltung__bild-unter {
  font-family: var(--grotesk);
  font-size: var(--t-mikro);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinte-leise);
}
@media (max-width: 900px) {
  .haltung { grid-template-columns: repeat(6, 1fr); }
  .haltung__kopf,
  .haltung__text { grid-column: 1 / -1; }
  .haltung__text { margin-top: 1.8rem; }
  .haltung__galerie { grid-template-columns: repeat(6, 1fr); }
  .haltung__spalte--a { grid-column: 1 / 5; }
  .haltung__spalte--b { grid-column: 3 / -1; margin-top: clamp(3rem, 8vh, 6rem); }
  .haltung__spalte--c { grid-column: 1 / 5; margin-top: clamp(3rem, 8vh, 6rem); }
  .haltung__spalte--d { grid-column: 3 / -1; margin-top: clamp(3rem, 8vh, 6rem); }
}

/* --- 3b · Der Satz, der sich auflädt --------------------------------------- */
.aufladen {
  display: grid;
  place-items: center;
  /* Reichlich Luft, und zwar aus einem Grund: die Strecke, auf der sich der
     Satz auflädt, ist genau die Höhe dieses Abschnitts plus ein Fenster.
     Bei knapper Höhe wäre er voll, bevor man ihn überhaupt liest. */
  padding: clamp(8rem, 28vh, 20rem) var(--rand);
}
.aufladen__satz {
  max-width: 30ch;
  font-family: var(--grotesk);
  font-size: clamp(1.35rem, 3.4vw, 3rem);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.015em;
  text-align: center;
  text-wrap: pretty;
}
/* Sicherer Zustand ist der volle Satz. Blass wird erst, was das Skript
   in Wörter zerlegt hat – ohne Skript bleibt alles lesbar. */
.aufladen--wach .aufladen__wort { opacity: 0.13; }

/* --- 3c · Band: schräger Lauf, Bild geht auf, Folge quer ------------------- */
/* Sicherer Zustand: das Band steht still, darunter zwei Tafeln
   untereinander. Die Strecke kommt erst mit .band--bewegt. */
.band {
  position: relative;
  --lauf-hoehe: clamp(16rem, 46svh, 32rem);
}

.band__lauf {
  position: relative;
  height: var(--lauf-hoehe);
  overflow: hidden;
}
.band__schraege {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  rotate: -6deg;
  width: 150%;
  height: 100%;
}
.band__reihe {
  position: absolute;
  top: 50%;
  left: 0;
  /* Die senkrechte Mitte über `translate`, nicht über `transform`: so bleibt
     `transform` allein für das Skript – sonst überschreibt GSAP die
     Zentrierung beim ersten Setzen von x. */
  translate: 0 -50%;
  width: 200%;
  display: flex;
  gap: clamp(0.5rem, 1vw, 1rem);
  align-items: center;
  will-change: transform;
}
.band__bild { flex: 1; aspect-ratio: 5 / 3; }
.band__bild img { width: 100%; height: 100%; object-fit: cover; }
.band__lauf .ki-hinweis { z-index: 2; }

.band__buehne {
  position: relative;
  height: 100svh;
  overflow: hidden;
}
.band__gross {
  /* Ohne Skript unsichtbar: dann gibt es keine Bühne, auf der es aufgehen
     könnte, und das Motiv steht schon im Band. */
  display: none;
  position: absolute;
  inset: 0;
  z-index: 3;
  margin: 0;
  overflow: hidden;
  will-change: clip-path, transform;
}
.band--bewegt .band__gross { display: block; }
.band__gross img { width: 100%; height: 100%; object-fit: cover; }

.band__folge {
  position: relative;
  display: grid;
  gap: clamp(3rem, 9vh, 6rem);
  padding: clamp(3rem, 9vh, 6rem) var(--rand);
}
.band__tafel--leer { display: none; }
.band__tafel {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.band__spalte { display: grid; align-content: center; justify-items: center; }
.band__satz {
  font-size: clamp(1.3rem, 2.6vw, 2.4rem);
  font-weight: 400;
  line-height: 1.1;
  max-width: 24ch;
}

/* --- Die scrollgesteuerte Fassung ---------------------------------------- */
.band--bewegt {
  /* Bandlauf + festgehaltene Bühne + Strecke der waagrechten Folge.
     Die Strecke setzt das Skript, weil sie von der Fensterhöhe abhängt.

     **Höhe, nicht padding-bottom.** Der Spielraum eines `sticky` bemisst
     sich am *Inhaltskasten* des Elternteils – Innenabstand zählt nicht
     dazu. Mit padding-bottom war der Spielraum exakt null und die Bühne
     lief einfach mit nach oben weg. */
  height: calc(var(--lauf-hoehe) + 100svh + var(--folge-strecke, 0px));
}
.band--bewegt .band__buehne {
  position: sticky;
  top: 0;
  height: 100svh;
  /* Der Grund wechselt beim Aufgehen des Bildes von Papier auf Tinte.
     Nur hier, nicht am <body>: die folgenden Abschnitte bleiben hell. */
  background-color: rgba(247, 244, 239, 0);
}
.band--bewegt .band__folge {
  position: absolute;
  inset: 0;
  display: flex;
  width: 300%;
  height: 100%;
  gap: 0;
  padding: 0;
  will-change: transform;
}
.band--bewegt .band__tafel {
  flex: 0 0 33.3333%;
  height: 100%;
  padding: clamp(3rem, 9vh, 6rem) var(--rand);
  background: var(--tinte);
  color: var(--papier);
}
/* Die erste Tafel ist leer: durch sie hindurch sieht man das aufgegangene
   Bild, bevor die beiden echten Tafeln von rechts hereinlaufen. */
.band--bewegt .band__tafel--leer { display: block; background: transparent; }
.band--bewegt .band__satz { color: var(--papier); }
.band--bewegt .band__spalte img { max-height: 62svh; width: auto; }

@media (max-width: 900px) {
  .band__tafel { grid-template-columns: 1fr; }
  .band--bewegt .band__tafel {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    gap: clamp(1rem, 3vh, 1.8rem);
    align-content: center;
  }
  .band--bewegt .band__spalte img { max-height: 38svh; }
  /* Im Hochformat füllt der Satz die ganze Breite – zentriert stünde ein
     linksbündiger Block mit großer Lücke rechts. */
  .band--bewegt .band__spalte { justify-items: stretch; }
  .band--bewegt .band__satz { max-width: 100%; }
  .band__schraege { width: 300%; }
}

/* --- 3d · Vorwort zu den Schwerpunkten ------------------------------------ */
/* Ruhig und senkrecht – der Abschnitt ist die Atempause zwischen der
   waagrechten Folge des Bands und der waagrechten Strecke danach. Keine
   eigene Bewegung außer der Zeilenenthüllung aus seite.js. */
.vorwort {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(2rem, 5vh, 3.5rem) clamp(1.2rem, 2vw, 2rem);
  align-items: start;
  /* Fast eine volle Fensterhöhe: der Abschnitt soll die beiden
     Querbewegungen wirklich auseinanderhalten. Mit reinem Innenabstand kam
     er auf 572 px – eine Bildschirmhöhe später lief es schon wieder quer. */
  min-height: 92svh;
  align-content: center;
  padding: clamp(5rem, 12vh, 9rem) var(--rand);
}
.vorwort__kopf { grid-column: 1 / 7; }
.vorwort__titel {
  font-size: var(--t-gross);
  line-height: 0.98;
  margin-top: 1.4rem;
}
.vorwort__text {
  grid-column: 8 / 13;
  display: grid;
  gap: 1.4rem;
  align-self: end;
}
.vorwort__satz {
  font-family: var(--grotesk);
  font-size: var(--t-text);
  line-height: 1.6;
  color: var(--tinte-leise);
  max-width: 42ch;
}

@media (max-width: 900px) {
  .vorwort { grid-template-columns: repeat(6, 1fr); }
  .vorwort__kopf,
  .vorwort__text { grid-column: 1 / -1; }
}

/* --- 4 · Schwerpunkte: waagrechte Strecke --------------------------------- */
/* Sicherer Zustand: die Felder stehen untereinander. Die waagrechte Fassung
   kommt erst, wenn seite.js sie eingerichtet hat (.schwerpunkte--quer). */
.schwerpunkte {
  /* Keine Trennlinie zum vorigen Abschnitt: die hellen Abschnitte sollen
     als eine durchgehende Fläche gelesen werden. */
  padding: clamp(4rem, 10vh, 8rem) var(--rand) clamp(5rem, 14vh, 11rem);
}
.schwerpunkte__kopf {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  margin-bottom: clamp(2rem, 6vh, 4rem);
}
/* Fortschrittsbalken der waagrechten Strecke */
.schwerpunkte__balken { display: none; }

.schwerpunkte__spur {
  display: grid;
  gap: clamp(4rem, 12vh, 9rem);
}

.schwerpunkt {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.2rem, 2vw, 2rem);
  align-items: center;
}
.schwerpunkt__satz {
  grid-column: 1 / 7;
  display: grid;
  gap: 1.1rem;
  justify-items: start;
  align-content: center;
}
.schwerpunkt__zahl { margin: 0; }
.schwerpunkt__titel {
  font-size: var(--t-mittel);
  hyphens: auto;
  margin: 0;
}
.schwerpunkt__text { color: var(--tinte-leise); max-width: 46ch; }
.schwerpunkt__punkte {
  display: grid;
  gap: 0.55rem;
  margin: 0.4rem 0 0.8rem;
  padding: 0;
  list-style: none;
  font-family: var(--grotesk);
  font-size: var(--t-klein);
  color: var(--tinte-leise);
}
.schwerpunkt__punkte li {
  padding-top: 0.55rem;
  border-top: 1px solid var(--linie);
}
.schwerpunkt__bild {
  position: relative;
  grid-column: 8 / 13;
  margin: 0;
}
.schwerpunkt__bild img { width: 100%; height: auto; }

/* --- Die waagrechte Fassung ---------------------------------------------- */
.schwerpunkte--quer {
  /* Fensterhöhe zum Festhalten plus die Strecke, die seitlich zurückgelegt
     wird. Der Wert kommt aus dem Skript, weil er von der Spurbreite abhängt. */
  height: calc(100svh + var(--strecke, 0px));
  /* Auch der Seitenrand muss weg, nicht nur der obere und untere: die Felder
     sind 100 vw breit. Blieb der Rand stehen, war die Spur um zweimal
     --rand breiter als ihr Rahmen und jedes Feld rechts angeschnitten.
     Den Rand setzt der Kopf für sich selbst wieder (siehe unten). */
  padding: 0;
}
.schwerpunkte--quer .schwerpunkte__rahmen {
  position: sticky;
  top: 0;
  height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: clamp(1rem, 3vh, 2rem);
  padding: clamp(4.5rem, 11vh, 8rem) 0 clamp(2rem, 6vh, 4rem);
  /* Die Spur läuft über die volle Fensterbreite, der Kopf bleibt im Satzspiegel. */
  overflow: hidden;
}
.schwerpunkte--quer .schwerpunkte__kopf {
  margin: 0 var(--rand);
}
.schwerpunkte--quer .schwerpunkte__balken {
  display: block;
  flex: 1;
  max-width: 22rem;
  height: 1px;
  background: var(--linie);
}
.schwerpunkte--quer .schwerpunkte__balken span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--tinte);
  transform-origin: left center;
}

.schwerpunkte--quer .schwerpunkte__spur {
  display: flex;
  gap: 0;
  height: 100%;
  will-change: transform;
}
.schwerpunkte--quer .schwerpunkt {
  flex: 0 0 100vw;
  height: 100%;
  padding: 0 var(--rand);
  grid-template-columns: repeat(12, 1fr);
  align-content: center;
}
.schwerpunkte--quer .schwerpunkt__satz { grid-column: 1 / 6; }
.schwerpunkte--quer .schwerpunkt__bild {
  grid-column: 7 / 13;
  height: 100%;
  max-height: 100%;
  display: grid;
  align-content: center;
}
.schwerpunkte--quer .schwerpunkt__bild img {
  height: 100%;
  max-height: min(66svh, 100%);
  width: 100%;
  object-fit: cover;
}

@media (max-width: 900px) {
  .schwerpunkt { grid-template-columns: repeat(6, 1fr); }
  .schwerpunkt__satz { grid-column: 1 / -1; grid-row: 2; }
  .schwerpunkt__bild { grid-column: 1 / -1; grid-row: 1; margin-bottom: 1.6rem; }

  /* Die waagrechte Strecke läuft auch am Telefon – ein Feld füllt das
     Fenster, Bild oben, Text darunter. Alles muss ohne eigenes Scrollen in
     ein 100-svh-Feld passen, deshalb die gedeckelte Bildhöhe. */
  .schwerpunkte--quer .schwerpunkte__rahmen {
    padding: clamp(3.5rem, 9vh, 5rem) 0 clamp(1.5rem, 4vh, 2.5rem);
  }
  .schwerpunkte--quer .schwerpunkt {
    grid-template-columns: 1fr;
    gap: clamp(0.9rem, 3vh, 1.5rem);
    align-content: center;
  }
  .schwerpunkte--quer .schwerpunkt__satz { grid-column: 1; grid-row: 2; gap: 0.7rem; }
  .schwerpunkte--quer .schwerpunkt__bild {
    grid-column: 1;
    grid-row: 1;
    height: auto;
    margin-bottom: 0;
  }
  /* Ein Feld muss ganz in ein 100-svh-Fenster passen – es lässt sich ja
     nicht einzeln scrollen. Deshalb sind Bild und Schrift hier an der
     Fensterhöhe ausgerichtet, nicht an der Breite. */
  .schwerpunkte--quer .schwerpunkt__bild img { max-height: min(20svh, 44vw); }
  .schwerpunkte--quer .schwerpunkt__titel { font-size: clamp(1.4rem, 6vw, 2.1rem); }
  .schwerpunkte--quer .schwerpunkt__text {
    font-size: var(--t-klein);
    line-height: 1.5;
    max-width: 100%;
  }
  .schwerpunkte--quer .schwerpunkt__punkte {
    font-size: var(--t-mikro);
    gap: 0.3rem;
    margin: 0.1rem 0 0.3rem;
  }
  .schwerpunkte--quer .schwerpunkt__punkte li { padding-top: 0.3rem; }
  /* Ohne min-width: 0 zieht der Fließtext die Rasterspalte über die
     Feldbreite hinaus – die Zeilen liefen rechts aus dem Bild. */
  .schwerpunkte--quer .schwerpunkt__satz { min-width: 0; }
}

/* Kleine Telefone im Querformat-Verhältnis (iPhone SE & Co.): dort bleiben
   nach Kopf und Rändern nur rund 540 px für ein Feld. Gemessen, nicht
   geschätzt – ohne diese Stufe wurde der Knopf unten abgeschnitten. */
@media (max-width: 900px) and (max-height: 760px) {
  .schwerpunkte--quer .schwerpunkte__rahmen {
    padding: clamp(3rem, 7.5vh, 4rem) 0 clamp(1rem, 3vh, 1.6rem);
    gap: clamp(0.6rem, 2vh, 1rem);
  }
  .schwerpunkte--quer .schwerpunkt { gap: 0.8rem; }
  .schwerpunkte--quer .schwerpunkt__satz { gap: 0.5rem; }
  .schwerpunkte--quer .schwerpunkt__bild img { max-height: min(15svh, 38vw); }
  .schwerpunkte--quer .schwerpunkt__titel { font-size: clamp(1.25rem, 5.4vw, 1.7rem); }
}

/* --- 5 · Weiteres: Namensliste mit Bildvorschau --------------------------- */
.weitere {
  position: relative;
  /* Gleicher Grund wie die übrigen hellen Abschnitte – der frühere zweite
     Farbton zog eine sichtbare Kante quer über die Seite. */
  padding: clamp(4rem, 10vh, 8rem) var(--rand) clamp(5rem, 13vh, 10rem);
}
.weitere__kopf {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.2rem, 2vw, 2rem);
  align-items: end;
  margin-bottom: clamp(2.5rem, 7vh, 5rem);
}
.weitere__titel { grid-column: 1 / 6; font-size: var(--t-mittel); }
.weitere__lead { grid-column: 7 / 12; }

.weitere__liste {
  margin: 0;
  padding: 0;
  list-style: none;
}
.eintrag { border-bottom: 0; }

.eintrag__griff {
  position: relative;
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: baseline;
  gap: clamp(1rem, 2.5vw, 2.5rem);
  width: 100%;
  padding: clamp(1.1rem, 2.6vh, 2rem) 0;
  text-align: left;
  color: inherit;
  transition: opacity 0.4s var(--kurve);
}
.eintrag__zahl {
  font-family: var(--grotesk);
  font-size: var(--t-mikro);
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--tinte-leise);
}
.eintrag__name {
  font-size: clamp(1.5rem, 3.4vw, 3.2rem);
  line-height: 1;
  /* Rückt beim Überfahren ein Stück nach rechts – die einzige Bewegung,
     die die Zeile selbst macht. */
  transition: transform 0.5s var(--kurve);
}
.eintrag__text {
  font-family: var(--grotesk);
  font-size: var(--t-klein);
  line-height: 1.6;
  color: var(--tinte-leise);
  max-width: 44ch;
}
.eintrag__pfeil {
  font-family: var(--grotesk);
  font-size: var(--t-mikro);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-0.4rem);
  transition: opacity 0.4s var(--kurve), transform 0.4s var(--kurve);
}
.eintrag__griff:hover .eintrag__name,
.eintrag__griff:focus-visible .eintrag__name { transform: translateX(clamp(0.5rem, 1.4vw, 1.4rem)); }
.eintrag__griff:hover .eintrag__pfeil,
.eintrag__griff:focus-visible .eintrag__pfeil { opacity: 1; transform: none; }

/* Die übrigen Zeilen treten zurück, sobald eine angesteuert ist. */
.weitere--aktiv .eintrag__griff { opacity: 0.4; }
.weitere--aktiv .eintrag--aktiv .eintrag__griff { opacity: 1; }

/* Bild unter dem Namen – die Fassung ohne Vorschau. */
.eintrag__bild { position: relative; margin: 0 0 clamp(1rem, 2.6vh, 1.8rem); }
.eintrag__bild img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }

/* Fassung fürs Telefon: die aktive Zeile wird vom Scrollen bestimmt.
   Die Regeln oben (.weitere--aktiv) greifen unverändert – hier kommt nur
   dazu, was am Zeigegerät der Hover erledigt. */
.weitere--tasten .eintrag--aktiv .eintrag__name {
  transform: translateX(clamp(0.4rem, 2vw, 1rem));
}
.weitere--tasten .eintrag--aktiv .eintrag__pfeil { opacity: 1; transform: none; }
.weitere--tasten .eintrag__bild { transition: opacity 0.5s var(--kurve); opacity: 0.55; }
.weitere--tasten .eintrag--aktiv .eintrag__bild { opacity: 1; }

/* --- Die Vorschau, die dem Zeiger folgt ---------------------------------- */
.weitere__vorschau { display: none; }

.weitere--vorschau .weitere__vorschau {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 40;
  width: clamp(16rem, 22vw, 24rem);
  aspect-ratio: 4 / 5;
  pointer-events: none;
  opacity: 0;
  /* Kein Versatz über Ränder: die Lage rechnet das Skript aus und hält das
     Bild dabei innerhalb der Namensliste. */
  will-change: transform;
}
.weitere--vorschau .eintrag__bild { display: none; }

.vorschau__blatt {
  position: absolute;
  inset: 0;
  margin: 0;
  overflow: hidden;
  opacity: 0;
}
.vorschau__blatt img { width: 100%; height: 100%; object-fit: cover; }
/* Auf hellem Grund braucht die Kennzeichnung die dunkle Fassung. */
.weitere__vorschau .ki-hinweis {
  bottom: -1.4rem;
  right: 0;
  color: rgba(18, 16, 14, 0.5);
  text-shadow: none;
}

@media (max-width: 900px) {
  .weitere__kopf { grid-template-columns: 1fr; }
  .weitere__titel, .weitere__lead { grid-column: 1; }
  .eintrag__griff {
    grid-template-columns: 2.6rem minmax(0, 1fr);
    align-items: start;
    gap: 0.6rem 1rem;
  }
  .eintrag__name { grid-column: 2; }
  .eintrag__text { grid-column: 2; margin-top: 0.4rem; }
  .eintrag__pfeil { grid-column: 2; opacity: 1; transform: none; margin-top: 0.6rem; }
}

/* --- 6 · Ablauf: scrollgesteuertes Raster --------------------------------- */
/* Sicherer Zustand: einspaltige Liste, jeder Schritt mit eigenem Bild.
   Die Bühne kommt erst, wenn seite.js sie eingerichtet hat
   (.ablauf--buehne). Ohne Skript sähe man sonst überhaupt kein Bild. */
.ablauf { padding: clamp(4rem, 12vh, 9rem) var(--rand); }
.ablauf__kopf { margin-bottom: clamp(2.5rem, 7vh, 5rem); }
.ablauf__titel { font-size: var(--t-mittel); margin-top: 0.8rem; }

.ablauf__buehne {
  position: relative;
  display: grid;
  gap: clamp(2rem, 5vw, 5rem);
}
.ablauf__szenen { display: none; }

.ablauf__liste {
  display: grid;
  gap: clamp(1.6rem, 4vh, 3rem);
  align-content: start;
  margin: 0;
  padding: 0;
  list-style: none;
}
.schritt { display: grid; gap: 0.6rem; }

.schritt__griff {
  display: grid;
  gap: 0.15rem;
  justify-items: start;
  text-align: left;
  padding: 0.2rem 0;
  min-height: 44px;
  color: inherit;
}
.schritt__zahl {
  font-family: var(--display);
  font-size: clamp(1.8rem, 3.4vw, 3.2rem);
  line-height: 1;
  color: var(--messing);
}
.schritt__titel {
  font-family: var(--display);
  font-size: clamp(1.1rem, 1.6vw, 1.5rem);
  font-weight: 400;
  letter-spacing: 0.02em;
}
.schritt__text {
  font-family: var(--grotesk);
  font-size: var(--t-klein);
  line-height: 1.6;
  color: var(--tinte-leise);
  max-width: 34ch;
}
.schritt__bild { position: relative; margin: 0.4rem 0 0; }
.schritt__bild img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }

/* --- Die scrollgesteuerte Fassung ---------------------------------------- */
.ablauf--buehne {
  /* Ein Drittel der Strecke je Schritt, dazu etwas Vorlauf. */
  height: calc(var(--schritte, 3) * 82svh + 40svh);
  padding-block: 0;
}
.ablauf--buehne .ablauf__rahmen {
  position: sticky;
  top: 0;
  height: 100svh;
  display: grid;
  align-content: center;
  gap: clamp(1.5rem, 4vh, 3rem);
  padding-block: clamp(4rem, 10vh, 7rem) clamp(2rem, 6vh, 4rem);
}
.ablauf--buehne .ablauf__kopf { margin-bottom: 0; }
.ablauf--buehne .ablauf__buehne {
  grid-template-columns: minmax(0, 32%) minmax(0, 1fr);
  min-height: 0;
  align-items: stretch;
}
.ablauf--buehne .ablauf__szenen { display: block; position: relative; }
.ablauf--buehne .schritt__bild { display: none; }
.ablauf--buehne .ablauf__liste { gap: clamp(1.2rem, 3.4vh, 2.6rem); align-content: center; }

/* Der aktive Schritt steht vorn, die übrigen treten zurück. */
.ablauf--buehne .schritt__griff,
.ablauf--buehne .schritt__text {
  opacity: 0.3;
  transition: opacity 0.55s var(--kurve);
}
.ablauf--buehne .schritt--aktiv .schritt__griff,
.ablauf--buehne .schritt--aktiv .schritt__text { opacity: 1; }

/* Fortschrittsstrich am linken Rand jedes Schritts */
.ablauf--buehne .schritt {
  position: relative;
  padding-left: clamp(1rem, 2vw, 1.8rem);
}
.ablauf--buehne .schritt::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.35rem;
  bottom: 0.35rem;
  width: 1px;
  background: var(--linie);
}
.ablauf--buehne .schritt::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0.35rem;
  width: 1px;
  height: 0;
  background: var(--messing);
  transition: height 0.5s var(--kurve);
}
.ablauf--buehne .schritt--aktiv::after { height: calc(100% - 0.7rem); }

/* --- Die Bühne ------------------------------------------------------------ */
.szene {
  position: absolute;
  inset: 0;
  display: grid;
  /* 10 × 10 – dieselben Rastermaße wie in der Vorlage. */
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(10, 1fr);
  opacity: 0;
  pointer-events: none;
}
.szene--aktiv { opacity: 1; }

.szene__titel {
  position: relative;
  z-index: 10;
  grid-area: 1 / 2 / -1 / -2;
  display: grid;
  align-content: center;
  justify-items: center;
  margin: 0;
  font-size: clamp(1.8rem, 5.2vw, 4.6rem);
  line-height: 1;
  /* Dunkel, nicht hell wie in der Vorlage: die dortige Bühne liegt auf
     Schwarz, unsere auf Papier – cremefarben wäre kaum zu sehen. */
  color: var(--tinte);
  opacity: 0;
  text-shadow: 0 2px 30px rgba(247, 244, 239, 0.85);
}

.szene__bild {
  position: relative;
  overflow: hidden;
  will-change: clip-path, filter;
}
.szene__bild-innen {
  display: block;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: 50% 45%;
  will-change: transform;
}

/* Rasterplätze aus der Vorlage (pos-1 bis pos-9). */
.lage-1 { grid-area: 1 / 1 / 5 / 5; }
.lage-2 { grid-area: 5 / 8 / 10 / 11; }
.lage-3 { grid-area: 8 / 3 / 11 / 5; }
.lage-4 { grid-area: 3 / 5 / 8 / 10; }
.lage-5 { grid-area: 7 / 4 / 10 / 7; }
.lage-6 { grid-area: 2 / 2 / 4 / 4; }
.lage-7 { grid-area: 8 / 2 / 11 / 5; }
.lage-8 { grid-area: 2 / 8 / 8 / 11; }
.lage-9 { grid-area: 3 / 3 / 6 / 6; }

/* Immer sichtbar, nicht erst beim Überfahren: eine Kennzeichnung, die man
   nur mit der Maus zu sehen bekommt, erfüllt Art. 50 EU-KI-VO nicht. */
.ablauf__szenen .ki-hinweis { bottom: -1.4rem; }

/* Am Telefon läuft dieselbe Bühne – nur gestapelt: Bilder oben, die drei
   Schritte darunter. Früher war sie hier ganz abgeschaltet; der Wunsch war
   ausdrücklich, dass am Handy dieselben Bewegungen laufen wie am Desktop.
   Damit die feste Bühne in ein 100-svh-Fenster passt, zeigt nur der aktive
   Schritt seinen Text – das spart die Höhe von zwei Absätzen. */
@media (max-width: 900px) {
  .ablauf--buehne {
    /* Etwas kürzere Strecke je Schritt: am Telefon scrollt man mit dem
       Daumen, 82 svh je Schritt fühlen sich dort zäh an. */
    height: calc(var(--schritte, 3) * 72svh + 30svh);
  }
  .ablauf--buehne .ablauf__rahmen {
    padding-block: clamp(3.5rem, 9vh, 5rem) clamp(1.2rem, 4vh, 2rem);
    gap: clamp(1rem, 3vh, 1.6rem);
  }
  .ablauf--buehne .ablauf__buehne {
    grid-template-columns: 1fr;
    /* Bühne oben, Liste unten – die Liste bekommt nur, was sie braucht. */
    grid-template-rows: minmax(0, 1fr) auto;
    gap: clamp(1.2rem, 4vh, 2rem);
  }
  /* Im Markup steht die Liste zuerst (Lesereihenfolge ohne Skript). */
  .ablauf--buehne .ablauf__szenen { order: -1; min-height: 34svh; }
  .ablauf--buehne .ablauf__liste { gap: 0.2rem; }
  .ablauf--buehne .schritt { padding-left: 0.9rem; }
  .ablauf--buehne .schritt__griff {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    gap: 0.7rem;
    padding: 0.35rem 0;
    min-height: 0; /* kein Tap-Ziel mehr: das Scrollen steuert die Bühne */
  }
  .ablauf--buehne .schritt__zahl { font-size: 1.1rem; }
  .ablauf--buehne .schritt__titel { font-size: 1.25rem; }
  /* Nur der aktive Schritt zeigt seinen Text. max-height statt height, weil
     auf 'auto' nicht übergeblendet werden kann; der Wert ist großzügig
     gewählt und wirkt deshalb nicht als Beschnitt. */
  .ablauf--buehne .schritt__text {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.55s var(--kurve), opacity 0.35s var(--kurve);
  }
  .ablauf--buehne .schritt--aktiv .schritt__text {
    max-height: 11rem;
    opacity: 1;
  }
  /* Die Einzelbilder der Liste ersetzt die Bühne. */
  .ablauf--buehne .schritt__bild { display: none; }
  /* Zwei Bildplätze je Szene reichen im Hochformat; der dritte drängt sich
     im schmalen Raster über die anderen. */
  .ablauf--buehne .szene__bild:nth-child(4) { display: none; }
  .szene__titel { font-size: clamp(1.6rem, 8vw, 2.6rem); }
}

/* --- 7 · Kontakt ---------------------------------------------------------- */
.kontakt {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 1.2rem;
  padding: clamp(6rem, 16vh, 11rem) var(--rand);
  overflow: hidden;
  text-align: center;
  color: var(--papier);
  background: var(--tinte);
}
/* Wie beim Auftakt: Reserve für die Parallaxe (gemessen 150 px). */
.kontakt__bild {
  position: absolute;
  inset: -20% 0 0 0;
  height: 120%;
  will-change: transform;
}
.kontakt__bild img { width: 100%; height: 100%; object-fit: cover; }
.kontakt__bild::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(18, 16, 14, 0.52);
}
.kontakt__satz {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 1.1rem;
}
.kontakt__vor {
  font-family: var(--grotesk);
  font-size: var(--t-klein);
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(247, 244, 239, 0.75);
}
.kontakt__titel { font-size: var(--t-gross); }
.kontakt__unter {
  font-family: var(--grotesk);
  font-size: var(--t-klein);
  color: rgba(247, 244, 239, 0.75);
}
.kontakt__knoepfe {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem;
  margin-top: 0.6rem;
}
.kontakt__daten {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  margin-top: clamp(2rem, 6vh, 4rem);
}

/* --- Fuß ------------------------------------------------------------------ */
.fuss {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(3rem, 8vh, 6rem) var(--rand) clamp(1.5rem, 4vh, 2.5rem);
  background: var(--tinte);
  color: var(--papier);
}
/* Videoschleife im Hintergrund. Stark abgedunkelt – der Fuß muss lesbar
   bleiben, das Bewegtbild ist Stimmung, nicht Inhalt. */
.fuss__film {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.fuss__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.42;
}
.fuss__film::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(18, 16, 14, 0.72) 0%, rgba(18, 16, 14, 0.5) 45%, rgba(18, 16, 14, 0.82) 100%);
}
.fuss__ki { z-index: 6; bottom: auto; top: clamp(1rem, 3vh, 2rem); }

/* Ruhezustand der Enthüllung: fertig. Erst das Skript zieht den Inhalt für
   den Verlauf nach oben – so ist der Fuß ohne Skript ganz normal da. */
.fuss__enthuellung { position: relative; z-index: 6; will-change: transform; }
.fuss__schleier {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: var(--tinte);
  opacity: 0;
  pointer-events: none;
}
.fuss__marke { overflow: hidden; }
.fuss__wort {
  display: block;
  /* Wortmarke füllt die Breite – 22 Zeichen inkl. Leerzeichen. */
  font-size: clamp(1.3rem, 7.1vw, 9.2rem);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.fuss__spalten {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  margin: clamp(2.5rem, 7vh, 5rem) 0 clamp(2rem, 6vh, 4rem);
}
.fuss__spalte { display: grid; gap: 0.5rem; align-content: start; }
.fuss__spalte .label { color: rgba(247, 244, 239, 0.5); margin-bottom: 0.3rem; }
.fuss__spalte a {
  font-family: var(--grotesk);
  font-size: var(--t-klein);
  text-decoration: none;
  color: rgba(247, 244, 239, 0.82);
  padding: 0.35em 0;
  /* Die E-Mail-Adresse ist länger als eine schmale Spalte – ohne das
     schiebt sie im Fuß die ganze Seite nach rechts. */
  overflow-wrap: anywhere;
  transition: color 0.3s var(--kurve);
}
.fuss__spalte a:hover { color: var(--papier); }
.fuss__zeile {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(247, 244, 239, 0.18);
  font-family: var(--grotesk);
  font-size: var(--t-mikro);
  letter-spacing: 0.06em;
  color: rgba(247, 244, 239, 0.45);
}
@media (max-width: 700px) {
  /* minmax(0, 1fr) statt 1fr: sonst wächst die Spalte auf ihren längsten
     Inhalt und sprengt das Raster. */
  .fuss__spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 400px) {
  .fuss__spalten { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
}

/* --- Formular-Ebene ------------------------------------------------------- */
.formular {
  position: fixed;
  inset: 0;
  z-index: 180;
  display: grid;
  justify-items: end;
}
.formular[hidden] { display: none; }
.formular__grund {
  position: absolute;
  inset: 0;
  background: rgba(18, 16, 14, 0.55);
  animation: ein 0.35s var(--kurve);
}
@keyframes ein { from { opacity: 0; } }

.formular__blatt {
  position: relative;
  width: min(38rem, 100%);
  height: 100%;
  /* Panel muss bis zum letzten Bedienelement scrollbar sein. */
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: clamp(2.5rem, 6vh, 4rem) clamp(1.25rem, 4vw, 3rem)
           calc(clamp(2rem, 5vh, 3rem) + env(safe-area-inset-bottom));
  background: var(--papier);
  animation: blatt-rein 0.45s var(--kurve);
}
@keyframes blatt-rein { from { transform: translateX(4%); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .formular__grund,
  .formular__blatt { animation: none; }
}

.formular__zu {
  position: absolute;
  top: clamp(0.8rem, 2vh, 1.5rem);
  right: clamp(0.8rem, 2vw, 1.5rem);
  width: 44px;
  height: 44px;
  font-size: 1.6rem;
  line-height: 1;
  border-radius: 50%;
  transition: background 0.3s var(--kurve);
}
.formular__zu:hover { background: var(--papier-tief); }

.formular__titel {
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  margin: 0.4rem 0 clamp(1.5rem, 4vh, 2.5rem);
}

.formular__form { display: grid; gap: 1.1rem; }

.feld { display: grid; gap: 0.4rem; }
.feld--halb { grid-template-columns: 1fr 1fr; gap: 1rem; }
.feld--halb > div { display: grid; gap: 0.4rem; }
.feld--wahl { border: 0; padding: 0; margin: 0 0 0.4rem; }

.feld__label {
  font-family: var(--grotesk);
  font-size: var(--t-mikro);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinte-leise);
  padding: 0;
}
.feld__zusatz {
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: none;
  opacity: 0.7;
}

.formular input[type='text'],
.formular input[type='email'],
.formular input[type='tel'],
.formular select,
.formular textarea {
  width: 100%;
  min-height: 44px;
  padding: 0.7em 0.9em;
  font-family: var(--grotesk);
  /* Mindestens 16px – darunter zoomt iOS Safari beim Fokus ungefragt hinein. */
  font-size: 16px;
  color: var(--tinte);
  background: transparent;
  border: 1px solid var(--linie);
  border-radius: 2px;
  transition: border-color 0.3s var(--kurve);
}
.formular textarea { resize: vertical; min-height: 7rem; }
.formular :is(input, select, textarea):focus {
  border-color: var(--tinte);
  outline: none;
}
.formular :is(input, select, textarea)[aria-invalid='true'] { border-color: #a4342a; }

.wahl { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-top: 0.5rem; }
.wahl__option {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 48px;
  padding: 0.7em 1em;
  font-family: var(--grotesk);
  font-size: var(--t-klein);
  border: 1px solid var(--linie);
  border-radius: 2px;
  cursor: pointer;
  transition: border-color 0.3s var(--kurve), background 0.3s var(--kurve);
}
.wahl__option:has(input:checked) {
  border-color: var(--tinte);
  background: var(--papier-tief);
}
.wahl__option input { accent-color: var(--tinte); width: 18px; height: 18px; }

.zustimmung {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  font-family: var(--grotesk);
  font-size: var(--t-klein);
  line-height: 1.5;
  color: var(--tinte-leise);
  cursor: pointer;
  padding: 0.4rem 0;
}
.zustimmung input {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 0.1rem;
  accent-color: var(--tinte);
}

.formular__senden { justify-self: start; margin-top: 0.4rem; }
.formular__senden[disabled] { opacity: 0.5; cursor: progress; }

.formular__meldung {
  font-family: var(--grotesk);
  font-size: var(--t-klein);
  line-height: 1.5;
  min-height: 1.2em;
}
.formular__meldung[data-zustand='fehler'] { color: #a4342a; }
.formular__meldung[data-zustand='ok'] { color: #3f6b43; }

.formular__fussnote {
  font-family: var(--grotesk);
  font-size: var(--t-mikro);
  color: var(--tinte-leise);
  padding-top: 0.6rem;
  border-top: 1px solid var(--linie);
}

/* Honigtopf: unsichtbar, aber im Layout vorhanden (kein display:none). */
.honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 520px) {
  .feld--halb { grid-template-columns: 1fr; }
  .wahl { grid-template-columns: 1fr; }
  .formular__blatt { width: 100%; }
}

/* --- Finger statt Mauszeiger ---------------------------------------------- */
/* Am Zeigegerät festgemacht, nicht an der Fensterbreite: mit der Maus darf
   es eng bleiben, am Touchgerät braucht jedes Ziel 44 px. */
@media (pointer: coarse) {
  .stapel__liste a,
  .fuss__spalte a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 44px;
  }
  /* Freistehende Textlinks auf Fingergröße bringen. */
  .link-fein { min-height: 44px; }
}

/* --- Sanftes Einblenden beim Scrollen ------------------------------------- */
/* Sicherer Zustand ist sichtbar. Erst wenn das Skript die Beobachtung
   eingerichtet hat, setzt es .js-blende auf <html> und blendet gezielt ein. */
.js-blende [data-blende] {
  opacity: 0;
  transform: translateY(1.4rem);
  transition: opacity 0.9s var(--kurve), transform 0.9s var(--kurve);
}
.js-blende [data-blende].ist-da {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .js-blende [data-blende] { opacity: 1; transform: none; transition: none; }
}