/* ============================================================================
   MANOEL DECHERT — Feinschliff über der Spotlight-Variante

   Die Seite hat drei Zustände: ein schwarzer Kopf, in dem nur der Lichtstrahl
   leuchtet; danach heller, warmer Raum für alles Inhaltliche; und dazwischen
   die Vorhang-Sektion, die stehen bleibt, während das nächste Kapitel darüber
   zieht.

   Der Akzent ist ein sattes Orange (#C6B29A) und bleibt sparsam: ein Wort im
   Satz, eine Linie, eine Zahl. Flächig wird er fast nie.

   Diese Datei liegt zuletzt in der Kette. Die Bausteine davor stammen aus der
   Vorlage und werden hier nur dort korrigiert, wo sie eine andere Fläche
   erwarten als die, auf der sie jetzt stehen.
   ============================================================================ */

/* ── Grundwerte ───────────────────────────────────────────────────────────── */
.ws-spot {
  /* Der Raum, in den der Lichtstrahl flutet, ist reines Weiß: so geht der
     Kegel ohne Kante in die Fläche über. Der wärmere Ton kommt erst in den
     Sektionen danach, als Wechsel im Rhythmus. */
  --raum:     #FFFFFF;
  --papier:   #FFFFFF;
  --papier-2: #F6F3EE;
  --ink:      #08090B;
  --ink-2:    #101216;

  /* Der Akzent als Schriftfarbe auf hellem Papier: abgedunkelt, damit er
     die Kontrastschwelle hält. Das helle Orange bleibt Linien und Flächen. */
  --gold-text: #6F5F4C;
}

/* Eine Schriftfamilie, kein Kursiv. Plus Jakarta Sans hat keinen echten
   Kursivschnitt; ein schräg gestellter wäre nur eine Fälschung. Betont wird
   über Gewicht, Laufweite und Farbe. */
.ws-seite, .ws-seite *, .wmds-seite, .wmds-seite * { font-style: normal !important; }
.ws-spot h1, .ws-spot h2 { letter-spacing: -.035em; font-weight: 600; }
.ws-spot h3 { letter-spacing: -.02em; }
.ws-spot em { font-weight: 300; }
.ws-spot h2 em, .ws-spot h1 em { font-weight: 300; }

/* ── Der schwarze Kopf ────────────────────────────────────────────────────── */
.ws-spot .sp-grund {
  background-color: #000;
  background-image: none;
}
/* Der geflutete Raum liegt gleichmäßig da. Das Licht kommt aus den Sektionen
   selbst, nicht aus einem festen Schimmer am oberen Fensterrand, der beim
   Scrollen als Kante mitläuft. */
.ws-spot .sp-grund::after { background: var(--raum); }
.ws-spot .sp-main,
html.js.sparsam .ws-spot .sp-main { background: var(--raum); }
html.js .ws-spot .sp-main { background: transparent; }

.sp-cta--kopf { margin-top: clamp(30px, 4vh, 48px); }

/* Der Claim steht allein im Kegel, ohne zweite Zeile. Er darf deshalb
   größer stehen als im Original. */
.ws-spot .sp-claim--kurz { margin-bottom: 0; }
.ws-spot .sp-claim--kurz .sp-zeile { font-size: clamp(42px, 8vw, 116px); }

/* ── Psst ────────────────────────────────────────────────────────────────────
   Hier liegt nichts hinter der Schrift. Der Lichtkegel endet in reinem Weiß,
   und jede getönte Fläche würde an der Sektionskante eine sichtbare Linie
   ziehen. Also: keine. Die beiden Zeilen tragen sich allein. */
.ws-spot .sp-fluester::before,
.ws-spot .sp-fluester::after { content: none; display: none; }
.ws-spot .sp-fluester { display: block; margin-bottom: clamp(38px, 5vw, 68px); }

/* ── „Psst," als Zeichnung ───────────────────────────────────────────────────
   Das Wort ist keine gesetzte Schrift mehr, sondern eine Motion Graphic:
   sieben Striche, die sich in der Reihenfolge einer Handschrift selbst
   ziehen, und drei Bogen daneben, die den Ton weitertragen und sich
   verlaufen. Bewegt werden nur stroke-dashoffset, transform und opacity.

   Gestartet wird über [data-an]: js/selbststaendig.js setzt .an, sobald die
   Stelle im Bild steht. Die Staffelung steckt als --d in Millisekunden am
   einzelnen Pfad, nicht in einer Kette von nth-child-Regeln. */
.md-psst {
  display: block;
  margin: 0 auto;
  width: clamp(224px, 33vw, 384px);
  line-height: 0;
}
.md-psst-riss {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.md-psst-zug path {
  fill: none;
  stroke: var(--tinte);
  stroke-width: 9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.md-psst-ton path {
  fill: none;
  stroke: rgba(var(--akzent-r), .95);
  stroke-width: 6;
  stroke-linecap: round;
  transform-box: view-box;
  transform-origin: 392px 110px;
}

/* Ruhezustand ohne Skript und im Sparbetrieb: das fertige Bild */
.md-psst-zug path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.md-psst-ton path { opacity: .55; }

/* Mit Skript liegt die Zeichnung zuerst leer da */
.js .md-psst-zug path { stroke-dashoffset: 1; }
.js .md-psst-ton path { opacity: 0; }

.js .md-psst.an .md-psst-zug path {
  animation: md-psst-ziehen .62s cubic-bezier(.65, 0, .35, 1) forwards;
  animation-delay: calc(var(--d) * 1ms);
}
@keyframes md-psst-ziehen { to { stroke-dashoffset: 0; } }

/* Die drei Bogen laufen nach dem letzten Strich los und danach im Kreis:
   sie treten aus dem Komma heraus, werden weiter und verlieren sich. */
.js .md-psst.an .md-psst-ton path {
  animation: md-psst-ton 3.4s cubic-bezier(.33, 0, .2, 1) infinite;
  animation-delay: calc(1500ms + var(--d) * 1ms);
}
@keyframes md-psst-ton {
  0%        { opacity: 0; transform: scale(.72); }
  14%       { opacity: .95; }
  46%, 100% { opacity: 0; transform: scale(1.22); }
}

html.sparsam .md-psst-zug path { stroke-dashoffset: 0 !important; animation: none !important; }
html.sparsam .md-psst-ton path { opacity: .55 !important; animation: none !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  .md-psst-zug path { stroke-dashoffset: 0 !important; animation: none !important; }
  .md-psst-ton path { opacity: .55 !important; animation: none !important; transform: none !important; }
}

/* Das Wort bleibt für Vorleseprogramme da, nur nicht im Bild */
.md-nurlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Frage und Antwort stehen gleich groß untereinander */
.sp-antwort .sp-psst--antwort {
  margin-top: clamp(4px, .6vw, 10px);
}
.sp-antwort .sp-psst--antwort em {
  color: var(--gold-text);
  font-weight: 300;
}

/* ============================================================================
   DAS BAND — Bekenntnis auf warmem Papier

   Die Stelle bekommt eine eigene Fläche, aber keine dunkle: ein warmes
   Papier, eine Spur tiefer als das Weiß der Sektion, das sich oben und unten
   darin auflöst. Keine Kante läuft quer über die Seite, und der Wechsel ist
   trotzdem zu sehen.

   Darauf zieht der Vogelschwarm durch. Davor stehen zwei Spalten: links das
   Bild frei im hellen Rahmen, rechts der Satz in einer deckenden Karte.
   Deckend, nicht aus Glas — auf hellem Papier hat Glas nichts hinter sich
   und wirkt schmutzig.

   Die Fläche geht über die volle Fensterbreite. Sie sitzt in einem auf
   900 px begrenzten Behälter, deshalb der Ausbruch über 100vw. Die Sektion
   darüber trägt overflow:clip, es entsteht also kein Querlauf.
   ============================================================================ */
.md-band {
  position: relative;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-block: clamp(78px, 9vw, 128px) clamp(84px, 9vw, 118px);
  text-align: left;
}

/* Die Fläche liegt in einem eigenen Element, damit sie sich oben und unten
   weich auflösen kann, ohne den Inhalt mitzunehmen. Der Ton ist warm, kein
   Neutralgrau: er trägt das Taupe der Seite weiter. */
.md-band-grund {
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background-color: #F1EBE1;
  background-image:
    radial-gradient(70% 52% at 16% 10%, rgba(198,178,154,.4), transparent 62%),
    radial-gradient(60% 46% at 86% 86%, rgba(190,168,142,.36), transparent 64%),
    radial-gradient(90% 62% at 50% 44%, rgba(255,255,255,.34), transparent 74%);
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0, #000 clamp(70px, 8vw, 118px),
    #000 calc(100% - clamp(84px, 9vw, 118px)), transparent 100%);
          mask-image: linear-gradient(to bottom,
    transparent 0, #000 clamp(70px, 8vw, 118px),
    #000 calc(100% - clamp(84px, 9vw, 118px)), transparent 100%);
}
/* Ohne Maske bleibt die Fläche stehen und bekommt wenigstens weiche Ecken,
   damit sie nicht als Balken quer durch die Seite schneidet. */
@supports not ((mask-image: linear-gradient(#000, #000)) or (-webkit-mask-image: linear-gradient(#000, #000))) {
  .md-band-grund { border-radius: 40px; inset: 0 max(0px, calc(50vw - 760px)); }
}

/* ── Der Schwarm ─────────────────────────────────────────────────────────────
   Er liegt über der Fläche und unter dem Inhalt. Sein Schwerpunkt sitzt auf
   der Überschrift am Fuß des Bandes. */
.md-szene { position: relative; }
.md-voegel {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 74%;
  width: min(118%, 1480px);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.md-voegel canvas { display: block; }

/* Leseplatte: dämpft den Schwarm dort, wo die Überschrift steht, und lässt
   ihn außen herum fliegen. Auf dem hellen Band ist sie hell. */
.md-voegel::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(42% 23% at 50% 50%,
    rgba(244,239,231,.9) 0%,
    rgba(244,239,231,.66) 44%,
    rgba(244,239,231,.26) 70%,
    transparent 90%);
}
@media (max-width: 760px) {
  .md-voegel { width: 172%; top: 76%; }
  .md-voegel::after {
    background: radial-gradient(66% 16% at 50% 50%,
      rgba(244,239,231,.92) 0%,
      rgba(244,239,231,.68) 46%,
      rgba(244,239,231,.28) 72%,
      transparent 92%);
  }
}

/* ── Zwei Spalten: Bild und Satz ─────────────────────────────────────────── */
.md-bekenntnis {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 290px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(26px, 4vw, 60px);
  max-width: 1040px;
  margin-inline: auto;
  padding-inline: clamp(22px, 5vw, 48px);
}

/* Das Bild steht frei: heller Rahmen, weicher Abwurf, dahinter ein Schein
   in Taupe. Es wird nicht beschnitten und nicht zur Scheibe gerundet, es
   bleibt ein Bild an der Wand. */
.md-bild { position: relative; margin: 0; }
.md-bild-rahmen {
  display: block;
  padding: clamp(9px, 1vw, 13px);
  border-radius: 26px;
  background: #FFFFFF;
  box-shadow:
    0 0 0 1px rgba(40,32,24,.07),
    0 26px 48px -26px rgba(40,32,24,.36),
    0 8px 18px -12px rgba(40,32,24,.2);
}
.md-bild img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 17px;
}
/* Ein leiser warmer Schein hinter dem Rahmen, damit das Bild nicht wie
   ausgeschnitten auf der Fläche klebt. */
.md-bild-schein {
  position: absolute;
  z-index: -1;
  inset: -14% -12% -20%;
  border-radius: 40px;
  pointer-events: none;
  background: radial-gradient(60% 55% at 50% 48%, rgba(198,178,154,.42), transparent 72%);
  filter: blur(26px);
}
.md-bild figcaption {
  display: block;
  margin-top: clamp(13px, 1.4vw, 18px);
  text-align: center;
}
.md-bild figcaption b {
  display: block;
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--tinte);
}
.md-bild figcaption i {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: .02em;
  color: rgba(11,11,11,.55);
}

/* Das Bild atmet: neun Sekunden auf und ab, sieben Pixel weit. Nur transform,
   und der Reveal schreibt in derselben Eigenschaft, deshalb läuft das Heben
   erst an, wenn der Reveal durch ist. */
.js .md-bild.ws-reveal.in { animation: md-bild-atem 9s ease-in-out 1.4s infinite; }
@keyframes md-bild-atem {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
html.sparsam .md-bild.ws-reveal.in { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .md-bild.ws-reveal.in { animation: none !important; }
}

/* ── Die Karte mit dem Satz ──────────────────────────────────────────────────
   Deckend, mit weichem Radius und einem sehr kurzen Abwurf. Der eigentliche
   Rahmen ist keine border, sondern eine gezeichnete Linie darüber: sie läuft
   beim Erscheinen einmal herum, danach wandert ein Licht auf derselben Bahn
   weiter. Die Maße dafür setzt js/md-rahmen.js in echten Pixeln, sonst
   verzögen sich die runden Ecken zu Ellipsen. */
.md-rahmen {
  position: relative;
  /* Abstand der gezeichneten Linie zur Kante der Karte. js/md-rahmen.js
     liest denselben Wert aus, damit Linie und Karte zusammenpassen. */
  --abstand: clamp(9px, 1.15vw, 16px);
  border-radius: clamp(20px, 2.2vw, 28px);
  padding: clamp(28px, 3.2vw, 44px) clamp(24px, 3vw, 42px);
  background: #FFFFFF;
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 0 0 1px rgba(40,32,24,.06),
    0 24px 48px -30px rgba(40,32,24,.3),
    0 6px 16px -12px rgba(40,32,24,.14);
}
/* Die Linie steht frei um die Karte, nicht auf ihrer Kante: ein
   Passepartout. Auf dem warmen Papier ist sie damit zu sehen, ohne dass die
   Karte einen harten Rand bekommt. */
.md-rahmen-riss {
  position: absolute;
  /* Maße ausgeschrieben, nicht über inset: ein SVG ist ein ersetztes Element
     und nimmt bei width/height auto seine eigene Seitenverhältnis-Größe aus
     der viewBox an, nicht das aufgespannte Kästchen. Mit inset allein wurde
     der Rahmen quadratisch. */
  top: calc(-1 * var(--abstand));
  left: calc(-1 * var(--abstand));
  width: calc(100% + 2 * var(--abstand));
  height: calc(100% + 2 * var(--abstand));
  overflow: visible;
  pointer-events: none;
}
.md-rahmen-riss rect {
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
}
/* Die Linie, die einmal herumläuft */
.md-rahmen-zug {
  stroke: rgba(var(--akzent-r), 1);
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
/* Das Licht danach: ein kurzes Stück derselben Bahn, das immer wieder
   herumwandert. Bewegt wird nur stroke-dashoffset. */
.md-rahmen-licht {
  stroke: rgba(111, 95, 76, .8);
  stroke-width: 2.6;
  stroke-dasharray: .09 .91;
  stroke-dashoffset: 0;
  opacity: 0;
}

/* Mit Skript liegt die Karte zuerst ohne Rahmen da */
.js .md-rahmen-zug { stroke-dashoffset: 1; }

.js .md-rahmen.an .md-rahmen-zug {
  animation: md-rahmen-ziehen 1.5s cubic-bezier(.65, 0, .35, 1) .35s forwards;
}
@keyframes md-rahmen-ziehen { to { stroke-dashoffset: 0; } }

.js .md-rahmen.an .md-rahmen-licht {
  animation: md-rahmen-licht 5.2s linear 2.1s infinite;
}
@keyframes md-rahmen-licht {
  0%       { stroke-dashoffset: 0;  opacity: 0; }
  6%       { opacity: .9; }
  34%      { opacity: .9; }
  40%, 100%{ stroke-dashoffset: -1; opacity: 0; }
}

html.sparsam .md-rahmen-zug { stroke-dashoffset: 0 !important; animation: none !important; }
html.sparsam .md-rahmen-licht { display: none; }
@media (prefers-reduced-motion: reduce) {
  .md-rahmen-zug { stroke-dashoffset: 0 !important; animation: none !important; }
  .md-rahmen-licht { display: none !important; }
}

/* ── Der Satz ────────────────────────────────────────────────────────────── */
.md-bekenntnis-wort { position: relative; z-index: 1; text-align: left; }
.md-eyebrow {
  margin: 0 0 clamp(14px, 1.6vw, 20px) !important;
  font-size: 11.5px !important;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  line-height: 1.4 !important;
  color: var(--gold-text) !important;
}
.md-bekenntnis-wort p {
  margin: 0;
  max-width: 52ch;
  font-size: clamp(16.5px, 1.25vw, 18.5px) !important;
  line-height: 1.72 !important;
  color: rgba(11,11,11,.74) !important;
}
/* Der erste Absatz führt: etwas größer, etwas dunkler. */
.md-bekenntnis-wort .md-lead {
  font-size: clamp(18px, 1.55vw, 22.5px) !important;
  line-height: 1.58 !important;
  font-weight: 300;
  letter-spacing: -.012em;
  color: var(--tinte) !important;
}
.md-bekenntnis-wort p + p { margin-top: clamp(16px, 1.8vw, 24px); }

/* Die Stelle im Satz bekommt keinen fetten Schnitt, sondern einen Strich,
   der sich einmal darunterzieht, wie mit dem Lineal nachgezogen. */
.md-strich {
  position: relative;
  font-weight: 500;
  color: var(--tinte);
  white-space: nowrap;
}
.md-strich::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -.22em;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg,
    rgba(var(--akzent-r), .3), rgba(var(--akzent-r), 1) 40%, rgba(var(--akzent-r), 1));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.1s var(--ease-out) .9s;
}
.js .md-rahmen.in .md-strich::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .md-strich::after { transform: none !important; transition: none !important; }
}
/* Auf schmalen Geräten passt die Stelle nicht mehr in eine Zeile. Ein
   gezogener Strich unter einem umbrechenden Satzteil bricht auseinander,
   deshalb übernimmt dort die normale Unterstreichung, ohne Bewegung. */
@media (max-width: 430px) {
  .md-strich { white-space: normal; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .22em; text-decoration-color: rgba(var(--akzent-r), 1); }
  .md-strich::after { content: none; }
}

/* Hochkant: das Bild steht über der Karte, kleiner und mittig. Der Satz
   bleibt linksbündig, drei Zeilen mittig sind schwer zu lesen. */
@media (max-width: 880px) {
  .md-bekenntnis {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: clamp(26px, 5vw, 40px);
  }
  .md-bild { width: min(224px, 60vw); }
  .md-rahmen { width: 100%; }
  .md-bekenntnis-wort p { max-width: none; }
}

/* ── Überschrift am Fuß des Bandes ─────────────────────────────────────────
   Zwei Klassen im Selektor, weil .sp-antwort h2 aus der Vorlage sonst mit
   margin:0 gewinnt und die Überschrift an der Karte klebt. */
.md-band .md-tuer-kopf {
  position: relative;
  z-index: 2;
  margin-top: clamp(78px, 10vw, 132px);
  text-align: center;
  font-size: clamp(27px, 3.4vw, 46px) !important;
  letter-spacing: -.035em;
}
/* ── Die drei Schritte ───────────────────────────────────────────────────────
   Zwei Spalten statt einer schmalen: links die Stufe, rechts der Satz. So
   nutzt der Block die Breite, die der Rahmen ohnehin hergibt, und die Zeile
   bleibt trotzdem kurz genug zum Lesen.

   Die Trennlinie links ist kein Rand, sondern eine eigene Fläche: sie
   zeichnet sich beim Erscheinen von oben nach unten und trägt danach ein
   Licht, das sie immer wieder entlangläuft. */
.md-stufen {
  list-style: none;
  display: grid;
  gap: clamp(26px, 3vw, 40px);
  max-width: none;
  margin: clamp(38px, 5vw, 64px) 0 0;
  text-align: left;
}
.md-stufen li {
  position: relative;
  display: grid;
  grid-template-columns: clamp(150px, 17vw, 210px) minmax(0, 1fr);
  column-gap: clamp(20px, 2.6vw, 40px);
  align-items: baseline;
  padding-left: 26px;
}
.js .an.md-stufen li { animation: ws-hoch .9s var(--ease-out) forwards; animation-delay: calc(var(--d) * 1ms); }
.js .md-stufen li { opacity: 0; }

/* Die Linie */
.md-stufen li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(to bottom,
    rgba(var(--akzent-r), .1), rgba(var(--akzent-r), .55) 22%,
    rgba(var(--akzent-r), .55) 78%, rgba(var(--akzent-r), .1));
  transform-origin: top;
}
/* Ohne Skript steht die Linie einfach da. Erst mit Skript wird sie
   eingefahren, sonst fehlte sie, falls die Animation nie startet. */
.js .md-stufen li::before { transform: scaleY(0); }
.js .an.md-stufen li::before {
  animation: md-linie 1s var(--ease-out) forwards;
  animation-delay: calc((var(--d) + 260) * 1ms);
}
@keyframes md-linie { to { transform: scaleY(1); } }

/* Das Licht, das die Linie entlangläuft.
   Der Trick: das Element ist so hoch wie die Linie, sichtbar ist davon nur
   der Punkt in den obersten zehn Pixeln. Dadurch entspricht translateY(100%)
   genau der Linienlänge — das Licht läuft also in jedem Schritt bis unten,
   egal wie lang er ist, und bewegt wird trotzdem nur transform. */
.md-stufen li::after {
  content: '';
  position: absolute;
  left: -4px;
  top: 2px;
  width: 10px;
  height: calc(100% - 4px);
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle 5px at 5px 5px,
    #fff 0%, var(--akzent) 42%, var(--gold-tief) 76%, transparent 100%) no-repeat;
  filter: drop-shadow(0 0 7px rgba(var(--akzent-r), .8));
  animation: md-kugel 5.2s cubic-bezier(.45,.05,.55,.95) infinite;
  animation-delay: calc((var(--d) + 900) * 1ms);
}
@keyframes md-kugel {
  0%   { transform: translateY(-10px); opacity: 0; }
  12%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(calc(100% - 10px)); opacity: 0; }
}
html.sparsam .md-stufen li::after { display: none; }
@media (prefers-reduced-motion: reduce) {
  .md-stufen li::after { display: none; }
  .md-stufen li::before { transform: none !important; animation: none !important; }
}

.md-stufen-nr {
  display: block;
  padding-top: 3px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.md-stufen p {
  margin-bottom: 0 !important;
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.7;
  color: rgba(11,11,11,.76);
}

@media (max-width: 760px) {
  .md-stufen li { grid-template-columns: minmax(0, 1fr); row-gap: 7px; }
}

/* ── Vorhang ──────────────────────────────────────────────────────────────────
   Der Film liegt als eigene Ebene hinter Kapitel zwei. Er hängt oben fest und
   nimmt durch die negative Marge keinen Platz im Fluss ein: das Kapitel zieht
   also über einen stehenden Vorhang hinweg. Kein Farbfilter, das Material
   trägt sich selbst. */
.md-vorhang {
  position: relative;
  background-color: #08090B;
  /* Oben keine Sektionspolsterung: sonst beginnt der feste Film erst darunter
     und darüber bliebe ein schwarzer Streifen stehen. Den Abstand trägt das
     Zitat selbst. */
  padding-top: 0;
}
.md-vorhang-halt {
  position: sticky;
  top: 0;
  z-index: 0;
  height: 100vh;
  margin-bottom: -100vh;
  overflow: hidden;
  pointer-events: none;
}
.md-vorhang-film {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Kein Schleier über dem Film: er läuft unverändert, so wie er ist. Damit
   die Schrift trotzdem lesbar bleibt, steht sie nicht direkt auf dem Bild,
   sondern auf eigenen dunklen Glasflächen. Zwischen und neben ihnen ist der
   Vorhang unverfälscht zu sehen. */
.md-vorhang .md-vorhang-zitat,
.md-vorhang .ws-kopf,
.md-vorhang .ws-zeit,
.md-vorhang .md-referenz-kopf,
.md-vorhang .md-referenz-text {
  position: relative;
  padding: clamp(24px, 3vw, 42px) clamp(22px, 3vw, 44px);
  border-radius: 26px;
  background: linear-gradient(152deg, rgba(9,10,12,.4), rgba(9,10,12,.22));
  backdrop-filter: blur(30px) saturate(130%) brightness(.9);
  -webkit-backdrop-filter: blur(30px) saturate(130%) brightness(.9);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow:
    0 1px 0 rgba(255,255,255,.16) inset,
    0 40px 80px -60px rgba(0,0,0,.9);
  /* Die Füllung trägt kaum noch, also stützt die Schrift sich selbst. */
  text-shadow: 0 1px 2px rgba(0,0,0,.42), 0 2px 16px rgba(0,0,0,.34);
}
@supports not (backdrop-filter: blur(1px)) {
  .md-vorhang .md-vorhang-zitat,
  .md-vorhang .ws-kopf,
  .md-vorhang .ws-zeit,
  .md-vorhang .md-referenz-kopf,
  .md-vorhang .md-referenz-text { background: rgba(9,10,12,.82); }
}
/* Die Flächen sollen nicht über die ganze Breite laufen, sonst ist der
   Vorhang doch wieder zugedeckt. */
.md-vorhang .md-vorhang-zitat,
.md-vorhang .ws-kopf { max-width: 72ch; }
.md-vorhang .ws-kopf { margin-bottom: 0; }

/* Das Zitat eröffnet den Vorhang */
.md-vorhang-zitat {
  margin-top: clamp(40px, 8vh, 96px);
  margin-bottom: clamp(56px, 8vw, 104px);
}
.md-vorhang-zitat .md-band-satz {
  max-width: 20ch;
  margin: 0;
  font-size: clamp(32px, 5vw, 70px);
  line-height: 1.04;
  letter-spacing: -.04em;
  font-weight: 600;
  color: #fff;
  text-wrap: balance;
}
.md-vorhang-zitat .md-band-satz em { color: var(--akzent); font-weight: 300; }
.md-vorhang-zitat .md-band-fuss {
  max-width: 48ch;
  margin-top: 24px;
  font-size: clamp(16px, 1.3vw, 18px) !important;
  line-height: 1.7 !important;
  color: rgba(255,255,255,.72) !important;
}
.md-vorhang-inhalt { position: relative; z-index: 1; }

@media (max-width: 760px) {
  .md-vorhang-zitat .md-band-satz { max-width: none; }
}

/* ============================================================================
   DUNKLE SEKTIONEN
   Nur Kapitel zwei liegt dunkel, auf dem Vorhang. Die Bausteine der Vorlage
   lesen --navy, --leise, --linie und --gold-text; hier bekommen sie innerhalb
   dunkler Sektionen neue Werte, damit Karten, Listen und Zahlen mitziehen.
   ============================================================================ */
.ws-spot .ws-dark {
  --navy:      #F3F1EE;
  --tinte:     #F3F1EE;
  --text:      #F3F1EE;
  --linie:     rgba(255,255,255,.14);
  --leise:     rgba(243,241,238,.62);
  --gold-text: #D3C2AC;
  --papier:    #111318;
  --papier-2:  #16191F;
}
.ws-spot .ws-dark .sp-mehr {
  background: rgba(255,255,255,.07);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.2);
  color: var(--navy);
}
.ws-spot .ws-dark .sp-mehr:hover { background: rgba(255,255,255,.12); }
.ws-spot .ws-dark .sp-mehr svg { stroke: var(--akzent); }
.ws-spot .ws-dark .ws-btn--line {
  color: #fff;
  background: rgba(255,255,255,.08);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.24);
}
.ws-spot .ws-dark .ws-zeit-satz { color: #fff; }

/* ============================================================================
   HELLE SEKTIONEN
   Die Bausteine für Kurve, Zahlenband, Check und Schluss stammen aus dunklen
   Sektionen der Vorlage. Hier stehen sie auf hellem Papier und bekommen die
   passenden Werte. Gesammelt an einer Stelle, statt in der Vorlage verstreut.
   ============================================================================ */
.md-hell { --auf-dunkel: rgba(11,11,11,.72); }
.md-hell h2, .md-hell h3, .md-hell .ws-check-danke h3 { color: var(--navy); }
.md-hell p { color: rgba(11,11,11,.72); }
.md-hell .ws-kapitel { color: var(--gold-text) !important; }
.md-hell .ws-eyebrow { color: var(--gold-text) !important; }
.md-hell em, .md-hell h2 em { color: var(--gold-text) !important; }

/* Die Lichtwolken liegen auf Papier, also multiplizieren statt leuchten */
.md-hell .ws-aura i { mix-blend-mode: multiply; opacity: .13; }
.md-hell .ws-signet { background: var(--navy); opacity: .032; }

/* Kurve */
.md-hell .k-raster path { stroke: rgba(11,11,11,.07); }
.md-hell .k-knoten circle { fill: var(--papier); }
.md-hell .k-knoten text { fill: rgba(11,11,11,.62); }
.md-hell .k-licht circle { fill: var(--gold-tief); filter: drop-shadow(0 0 8px rgba(var(--akzent-r), .8)); }
.md-hell .ws-meilensteine li { border-top-color: rgba(11,11,11,.14); }
.md-hell .ws-meilensteine b { color: var(--gold-text); }
.md-hell .ws-meilensteine strong { color: var(--navy); }
.md-hell .ws-meilensteine span { color: rgba(11,11,11,.66); }

/* Zahlenband */
.md-hell .ws-heute {
  background: rgba(255,255,255,.6);
  border-color: rgba(var(--akzent-r), .22);
}
.md-hell .ws-heute > div + div { border-left-color: rgba(var(--akzent-r), .16); }
.md-hell .ws-heute b { color: var(--gold-text); }
.md-hell .ws-heute span { color: rgba(11,11,11,.66); }

/* Check: Karte, Felder und Fortschritt */
.md-hell .ws-check {
  background: rgba(255,255,255,.72);
  border-color: rgba(11,11,11,.1);
  box-shadow: 0 30px 60px -40px rgba(11,11,11,.5);
}
.md-hell .ws-check-fortschritt { background: rgba(11,11,11,.09); }
.md-hell .ws-check-schritt { color: rgba(11,11,11,.6); }
.md-hell .ws-frage legend { color: var(--navy); }
.md-hell .ws-feld span { color: rgba(11,11,11,.55); }
.md-hell .ws-feld input,
.md-hell .ws-feld textarea {
  color: var(--tinte);
  background: rgba(255,255,255,.9);
  border-color: rgba(11,11,11,.18);
}
.md-hell .ws-feld input::placeholder,
.md-hell .ws-feld textarea::placeholder { color: rgba(11,11,11,.35); }
.md-hell .ws-feld input:focus,
.md-hell .ws-feld textarea:focus { border-color: var(--gold-tief); background: #fff; }
.md-hell .ws-einwilligung { color: rgba(11,11,11,.7); }
.md-hell .ws-einwilligung a { color: var(--gold-text); }
.md-hell .ws-zurueck { color: rgba(11,11,11,.66); }
.md-hell .ws-zurueck:hover { color: var(--tinte); }
.md-hell .ws-check-fehler { color: #6F5F4C !important; }
.md-hell .ws-check-danke svg { stroke: var(--gold-tief); }
.md-hell .ws-ansprech {
  background: rgba(255,255,255,.66);
  border-color: rgba(11,11,11,.1);
}
.md-hell .ws-ansprech strong { color: var(--navy); }
.md-hell .ws-ansprech span { color: rgba(11,11,11,.6); }
.md-hell .ws-ansprech a { color: var(--gold-text); }
.md-frage-hinweis {
  margin-top: 18px;
  padding-left: 16px;
  border-left: 2px solid rgba(var(--akzent-r), .34);
  font-size: 14.5px !important;
  line-height: 1.6 !important;
  color: rgba(11,11,11,.62) !important;
}

/* Schluss */
.md-hell.ws-schluss::after {
  background: radial-gradient(80% 90% at 50% 50%, rgba(255,255,255,0), rgba(247,244,239,.6));
}

/* ── Projektkarten ────────────────────────────────────────────────────────── */
.md-vorhang .md-faelle { margin-top: clamp(28px, 3.4vw, 44px); }
.md-faelle {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(18px, 2vw, 28px);
  margin-top: clamp(40px, 5vw, 66px);
}
.md-fall {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(26px, 2.6vw, 38px);
  border-radius: 20px;
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(11,11,11,.09);
  overflow: hidden;
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
@media (hover: hover) {
  .md-fall:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -34px rgba(11,11,11,.55); }
}
.md-fall-jahr {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.md-fall h3 { font-size: clamp(21px, 1.9vw, 26px); color: var(--navy); }
.md-fall h3 span { display: block; font-size: 13.5px; font-weight: 400; letter-spacing: .02em; color: rgba(11,11,11,.5); margin-top: 6px; }
.md-fall p { color: rgba(11,11,11,.72); font-size: 16px; }
.md-fall ul { list-style: none; display: flex; flex-wrap: wrap; gap: 7px; margin-top: auto; padding-top: 8px; }
.md-fall ul li {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(11,11,11,.14);
  font-size: 13px;
  color: rgba(11,11,11,.66);
}
.md-fall a.md-fall-link {
  align-self: flex-start;
  font-size: 14px;
  color: var(--gold-text);
  border-bottom: 1px solid rgba(var(--akzent-r), .45);
  padding-bottom: 2px;
}
.md-fall a.md-fall-link:hover { border-bottom-color: var(--gold-tief); }

/* ── Werkzeuge ────────────────────────────────────────────────────────────── */
.md-werkzeuge {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: 1px;
  margin-top: clamp(40px, 5vw, 66px);
  background: rgba(11,11,11,.1);
  border: 1px solid rgba(11,11,11,.1);
  border-radius: 18px;
  overflow: hidden;
}
.md-werkzeuge > div {
  padding: clamp(22px, 2.2vw, 30px);
  background: var(--papier-2);
}
.md-werkzeuge h4 {
  font: 600 16px/1.25 'Plus Jakarta Sans', sans-serif;
  letter-spacing: -.01em;
  color: var(--navy);
  margin-bottom: 8px;
}
.md-werkzeuge h4::before {
  content: '';
  display: block;
  width: 22px; height: 2px;
  margin-bottom: 14px;
  background: var(--gold-tief);
}
.md-werkzeuge p { font-size: 15px; color: rgba(11,11,11,.66); }

/* ── Porträt ──────────────────────────────────────────────────────────────── */
.md-portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 22px;
  overflow: hidden;
  margin: 0;
  background: var(--papier-2);
  border: 1px solid rgba(11,11,11,.08);
}
.md-portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
  filter: saturate(.72) contrast(1.02);
}
.md-portrait::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(var(--akzent-r), .14), transparent 46%);
  mix-blend-mode: multiply;
}
.ws-ansprech img {
  width: 56px; height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

/* ── Kleinigkeiten ────────────────────────────────────────────────────────── */
.ws-spot .ws-person-text p + p { margin-top: 18px; }
.ws-spot .wmds-wortmarke em { color: var(--akzent) !important; }

/* ============================================================================
   KAPITEL ZWEI AUF DEM VORHANG
   Die Projektkarten sind weiter oben für helles Papier beschrieben. Hier
   stehen sie auf dem Film und bekommen Glas statt Fläche.
   ============================================================================ */
.ws-dark .md-fall {
  background: linear-gradient(152deg, rgba(9,10,12,.46), rgba(9,10,12,.3));
  border-color: rgba(255,255,255,.14);
  backdrop-filter: blur(28px) saturate(130%) brightness(.9);
  -webkit-backdrop-filter: blur(28px) saturate(130%) brightness(.9);
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
  padding: 0 0 clamp(24px, 2.4vw, 34px);
  gap: 12px;
}
.ws-dark .md-fall > *:not(.md-fall-bild) { padding-inline: clamp(24px, 2.4vw, 34px); }
@media (hover: hover) {
  .ws-dark .md-fall:hover { box-shadow: 0 30px 60px -34px rgba(0,0,0,.9); }
}
.ws-dark .md-fall h3 { color: #fff; }
.ws-dark .md-fall h3 span { color: rgba(255,255,255,.55); }
.ws-dark .md-fall p { color: rgba(255,255,255,.74); }
.ws-dark .md-fall ul li { border-color: rgba(255,255,255,.16); color: rgba(255,255,255,.72); }
.ws-dark .md-fall-jahr { color: var(--akzent); }
.ws-dark .md-fall a.md-fall-link { color: var(--akzent); }

/* Das Bild sitzt oben in der Karte, ohne Rand */
.md-fall-bild {
  margin: 0 0 6px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #101216;
}
.md-fall-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.1s var(--ease-out);
}
@media (hover: hover) {
  .md-fall:hover .md-fall-bild img { transform: scale(1.04); }
}

/* ── Referenz mit Vorher und Nachher ──────────────────────────────────────── */
.md-referenz { margin-top: clamp(64px, 8vw, 112px); }
.md-referenz-kopf { margin-bottom: clamp(26px, 3vw, 40px); }
.md-referenz-kopf h3 {
  font-size: clamp(26px, 3.2vw, 44px) !important;
  letter-spacing: -.035em;
  color: #fff;
}
.md-referenz-kopf h3 em { color: var(--akzent); font-weight: 300; }
.md-referenz-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(24px, 3.4vw, 54px);
  align-items: start;
}
.md-referenz-bild { margin: 0; }
/* Die Bildzeile steht direkt auf dem Film, also bekommt sie eine eigene
   kleine Fläche statt eines Schattens. */
.md-referenz-bild figcaption {
  display: inline-block;
  margin-top: 12px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(9,10,12,.34);
  backdrop-filter: blur(20px) brightness(.9);
  -webkit-backdrop-filter: blur(20px) brightness(.9);
  border: 1px solid rgba(255,255,255,.1);
  font-size: 13px;
  color: rgba(255,255,255,.7);
}
.md-referenz-text p { color: rgba(255,255,255,.74); font-size: 16px; margin-bottom: 14px; }
.md-referenz-logo { width: clamp(120px, 12vw, 168px); height: auto; filter: brightness(0) invert(1); opacity: .9; }
.md-referenz-lage {
  margin: 10px 0 20px !important;
  font-size: 12px !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--akzent) !important;
}
.md-referenz-liste { list-style: none; display: grid; gap: 12px; margin-top: 26px; }
.md-referenz-liste li {
  display: grid;
  gap: 2px;
  padding-left: 16px;
  border-left: 2px solid rgba(var(--akzent-r), .4);
}
.md-referenz-liste b { font-size: 15px; font-weight: 600; color: #fff; }
.md-referenz-liste span { font-size: 14.5px; color: rgba(255,255,255,.62); }

/* Der Regler selbst. Gezogen wird über die ganze Fläche (js/wmds.js), der
   unsichtbare Schieberegler bedient Tastatur und Vorlesesoftware.
   touch-action:pan-y lässt das senkrechte Scrollen auf dem Handy durch. */
.vn {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  cursor: ew-resize;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  background: #101216;
  border: 1px solid rgba(255,255,255,.12);
}
.vn__bild {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.vn__bild--nachher { clip-path: inset(0 0 0 var(--pos, 50%)); }
.vn__marke {
  position: absolute;
  bottom: 14px;
  z-index: 2;
  pointer-events: none;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(8,9,11,.32);
  backdrop-filter: blur(16px) saturate(160%) brightness(.9);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  border: 1px solid rgba(255,255,255,.26);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
  transition: opacity .3s var(--ease-out);
}
.vn__marke--vorher { left: 14px; top: 14px; bottom: auto; }
.vn__marke--nachher { right: 14px; }
.vn[data-seite="vorher"] .vn__marke--nachher,
.vn[data-seite="nachher"] .vn__marke--vorher { opacity: 0; }
.vn__griff { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); z-index: 3; width: 0; pointer-events: none; }
.vn__griff::before {
  content: '';
  position: absolute; top: 0; bottom: 0; left: -1px;
  width: 2px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 0 18px rgba(0,0,0,.5);
}
.vn__griff i {
  position: absolute; top: 50%; left: 0;
  width: 46px; height: 46px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(255,255,255,.95);
  box-shadow: 0 8px 24px -8px rgba(0,0,0,.7);
  transition: transform .3s var(--ease-out);
}
.vn__griff i::before, .vn__griff i::after {
  content: '';
  position: absolute; top: 50%;
  width: 7px; height: 7px;
  border: solid #0A0B0D;
  border-width: 0 0 2px 2px;
}
.vn__griff i::before { left: 12px; transform: translateY(-50%) rotate(45deg); }
.vn__griff i::after  { right: 12px; transform: translateY(-50%) rotate(-135deg); }
.vn.zieht .vn__griff i { transform: translate(-50%, -50%) scale(1.08); }
.vn__regler { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
.vn:has(.vn__regler:focus-visible) .vn__griff i { outline: 2px solid var(--akzent); outline-offset: 3px; }

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

/* ============================================================================
   AUFTRITT
   Der Claim im Lichtkegel und die Antwort darunter sind die beiden Sätze,
   auf die alles zuläuft. Sie stehen nicht einfach da, sie kommen an.

   Das Mittel ist immer dasselbe und braucht kein Skript: jedes Wort sitzt in
   einem Fenster mit .md-wort, das seinen Überstand abschneidet. Das Wort
   selbst liegt eine Zeilenhöhe darunter und fährt hoch. Gestaffelt ergibt
   das den Aufzug. Bewegt wird nur transform.
   ============================================================================ */
.md-worte .md-wort {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  /* Unterlängen brauchen Luft, sonst schneidet das Fenster sie ab */
  padding-bottom: .14em;
  margin-bottom: -.14em;
}
.md-worte .md-wort > * {
  display: inline-block;
  font-style: normal;
}
.js .md-worte .md-wort > * {
  transform: translateY(115%);
  transition: transform 1.05s var(--ease-out);
}
.js .md-worte.in .md-wort > *,
.js .in .md-worte .md-wort > * { transform: none; }

/* Staffel: jedes Wort kommt eine Spur später */
.js .md-worte .md-wort:nth-child(1) > * { transition-delay: 0ms; }
.js .md-worte .md-wort:nth-child(2) > * { transition-delay: 90ms; }
.js .md-worte .md-wort:nth-child(3) > * { transition-delay: 180ms; }
.js .md-worte .md-wort:nth-child(4) > * { transition-delay: 270ms; }
.js .md-worte .md-wort:nth-child(5) > * { transition-delay: 360ms; }
.js .md-worte .md-wort:nth-child(6) > * { transition-delay: 450ms; }
.js .md-worte .md-wort:nth-child(7) > * { transition-delay: 540ms; }

/* Der Block selbst tritt nicht mehr eigens auf, das tragen jetzt die Wörter */
.js .md-auftritt.ws-reveal,
.js .md-tuer-kopf.ws-reveal { opacity: 1; transform: none; }

/* ── Der Claim im Kegel ────────────────────────────────────────────────────
   Die Wörter fahren beim Laden auf, ganz ohne Beobachter: über dem Falz
   steht der Satz ohnehin sofort im Bild. */
.js .sp-claim--kurz .md-wort > * {
  transform: translateY(115%);
  animation: md-aufzug 1.15s var(--ease-out) forwards;
}
.js .sp-claim--kurz .md-wort:nth-child(1) > * { animation-delay: .35s; }
.js .sp-claim--kurz .md-wort:nth-child(2) > * { animation-delay: .47s; }
.js .sp-claim--kurz .md-wort:nth-child(3) > * { animation-delay: .59s; }
@keyframes md-aufzug { to { transform: none; } }

.ws-spot .sp-claim--kurz .sp-zeile { position: relative; display: inline-block; }

/* Die Haarlinie unter dem Claim wächst mit dem Scrollweg. --p setzt
   js/selbst-spotlight.js auf den Body; hier wird daraus die Breite. Der
   Strich ist fertig, bevor der Claim ausblendet. */
.md-mitlauf {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -.18em;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(var(--akzent-r), 0), rgba(var(--akzent-r), .85) 18%,
    rgba(var(--akzent-r), .85) 82%, rgba(var(--akzent-r), 0));
  transform: scaleX(clamp(0, calc((var(--p) - .02) / .26), 1));
  transform-origin: left;
  pointer-events: none;
}

/* ── Psst und die Antwort ───────────────────────────────────────────────── */
.md-auftritt { position: relative; }

/* Die Haarlinie zwischen Frage und Antwort zieht aus der Mitte nach außen */
.md-haarlinie {
  display: block;
  width: min(420px, 62%);
  height: 1px;
  margin: clamp(22px, 2.8vw, 36px) auto clamp(34px, 4.4vw, 58px);
  background: linear-gradient(90deg,
    rgba(var(--akzent-r), 0), rgba(var(--akzent-r), .9), rgba(var(--akzent-r), 0));
  transform: scaleX(0);
  transition: transform 1.1s var(--ease-out) .2s;
}
.js .md-auftritt.in .md-haarlinie { transform: scaleX(1); }

/* ── Der Kringel ────────────────────────────────────────────────────────────
   Eine von Hand gezogene Schlaufe um die Antwort, mit Überstand am Ende wie
   bei einem Stift, der einmal zu weit fährt. Gezeichnet über pathLength und
   stroke-dashoffset; non-scaling-stroke hält den Strich gleich dick, auch
   wenn das Bild für die Textbreite verzerrt wird. */
.md-antwort { position: relative; display: inline-block; }
.md-kringel {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: 111%;
  height: 132%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  overflow: visible;
}
.md-kringel path {
  stroke: rgba(var(--akzent-r), .9);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.js .md-auftritt.in .md-kringel path {
  animation: md-kringel-ziehen 1.5s cubic-bezier(.65,0,.35,1) 1.25s forwards;
}
@keyframes md-kringel-ziehen { to { stroke-dashoffset: 0; } }

/* Die Antwort fährt nach der Linie auf, damit die Reihenfolge stimmt */
.js .md-antwort .md-wort:nth-child(1) > * { transition-delay: .55s; }
.js .md-antwort .md-wort:nth-child(2) > * { transition-delay: .68s; }
.js .md-antwort .md-wort:nth-child(3) > * { transition-delay: .81s; }

/* ── Ruhe ────────────────────────────────────────────────────────────────── */
html.sparsam .md-mitlauf { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .md-worte .md-wort > *,
  .js .sp-claim--kurz .md-wort > * { transform: none !important; animation: none !important; }
  .md-haarlinie { transform: none !important; }
  .md-mitlauf { transform: none !important; }
  .md-kringel path { stroke-dashoffset: 0 !important; animation: none !important; }
}

/* ============================================================================
   AUSKLANG
   Ab der Zeile „Die drei Schritte zu mehr Flexibilität" verlässt der Raum
   sein reines Weiß und läuft in den wärmeren Ton der nächsten Sektion. Der
   Verlauf hängt am Behälter, nicht an einer geratenen Höhe: er beginnt
   genau an der Zeile und endet auf der Kante der Sektion, also ohne Naht.

   Die letzten Stufen sitzen schon bei 92 Prozent auf dem Zielton. Damit
   stimmt die Kante auch dann, wenn der Inhalt ein paar Pixel anders fällt
   als gerechnet.
   ============================================================================ */
.md-ausklang {
  position: relative;
  max-width: 900px;
  margin-inline: auto;
  text-align: center;
}
.md-ausklang-verlauf {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 50%;
  width: 100vw;
  /* Die Sektion polstert unten; genau so weit reicht der Verlauf hinunter. */
  bottom: calc(-1 * clamp(90px, 13vh, 150px));
  transform: translateX(-50%);
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(255,255,255,0) 0%,
    rgba(252,250,247,.5) 24%,
    rgba(250,247,243,.82) 54%,
    var(--papier-2) 92%,
    var(--papier-2) 100%);
}