/* ============================================================
   verwandlung.css — SIGNATURE-Sektion „Die Verwandlung"
   Eine Bühne (form-identisch über alle Schritte), fünf Schichten,
   diagonale Kellenstrich-Wipes per clip-path.

   Modi:
   - Bühne  (Desktop ≥ 900px, Motion erlaubt)  → gepinnt, Scrub-Wipes
   - Story  (< 900px, Motion erlaubt)          → gepinnte Hochformat-Bühne
     mit Story-Segmenten oben und Schichttext unten (Handy-Bildsprache)
   - Karten (reduced-motion)                   → gestapelte Karten
     Der Modus ergibt sich daraus, WO die .vw-layer im DOM liegen
     (verwandlung.js hängt sie um) plus [data-mode] auf der Sektion.
   ============================================================ */

.verwandlung {
  /* Sehr entsättigtes, warmes Beige für die Schicht „FARBE".
     Kein zweiter Buntakzent — abgeleitet aus der bg-Rampe. */
  --vw-paint: #D9CCB6;
  --vw-dim: 0.25;
  background: var(--bg-1);
}

/* Der Kellenstrich hat kein height-Attribut — ohne Seitenverhältnis fällt er
   auf die 150px-Ersatzhöhe zurück. Nur innerhalb dieser Sektion korrigiert. */
.verwandlung .strich {
  aspect-ratio: 240 / 44;
  height: auto;
}

/* ---------- Kopf ---------- */
.vw-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-s);
  /* Eng am Bild: der gepinnte Aufbau steht direkt unter der Headline,
     sonst klafft vor dem Pinnen eine leere Bahn (Kundenfeedback 09/2026). */
  margin-bottom: clamp(20px, 2.2vw, 36px);
}
.vw-head .strich--s { width: 2.6rem; }
.vw-head h2 { max-width: 22ch; }
.vw-lead {
  color: var(--fg-muted);
  font-size: var(--t-l);
  max-width: 42ch;
  line-height: 1.45;
}

/* ---------- Raster ---------- */
.vw-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 4vw, 72px);
  align-items: center;
}

/* ---------- Die Bühne ---------- */
.vw-stage {
  position: relative;
  width: 100%;
  max-width: calc(64vh * 4 / 3);
  aspect-ratio: 4 / 3;
  border-radius: var(--r-m);
  overflow: hidden;
  background: var(--bg-3);
  contain: paint;
  isolation: isolate;
}

.vw-stage__frame {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px var(--line),
    inset 0 -60px 90px -60px rgba(23, 19, 16, 0.22);
}

/* ---------- Die Schichten ---------- */
.vw-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transform: translateZ(0);
  backface-visibility: hidden;
}
.vw-layer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Vor dem JS-Start: alles außer dem Rohbau verdeckt. */
.vw-layer:not(.vw-layer--base) { clip-path: inset(0 100% 0 0); }

/* Schicht 04 — ruhige Farbfläche mit dezenter Textur- und Rollenspur-Überlagerung */
.vw-layer--paint { background: var(--vw-paint); }
.vw-layer--paint img {
  opacity: 0.24;
  mix-blend-mode: multiply;
}
.vw-layer--paint::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    rgba(23, 19, 16, 0) 0px,
    rgba(23, 19, 16, 0.045) 42px,
    rgba(23, 19, 16, 0) 96px
  );
}

/* Die „nasse Kante": ein diagonales Schattenband, das dem Wipe nachläuft
   und dem Material Dicke gibt. Nur transform wird animiert. */
.vw-layer__wet {
  position: absolute;
  top: -25%;
  bottom: -25%;
  left: -70%;
  width: 240%;
  pointer-events: none;
  background: linear-gradient(
    75deg,
    rgba(23, 19, 16, 0) 47.4%,
    rgba(23, 19, 16, 0.22) 50%,
    rgba(23, 19, 16, 0) 52.6%
  );
}

/* will-change nur solange die Bühne wirklich läuft (JS setzt .is-live) */
.vw-stage.is-live .vw-layer { will-change: clip-path; }
.vw-stage.is-live .vw-layer__wet { will-change: transform; }

/* ---------- Panel: Zähler + Fertig-Marke ---------- */
.vw-panel__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  padding-bottom: var(--space-s);
  margin-bottom: clamp(20px, 2.4vw, 34px);
  border-bottom: 1px solid var(--line);
}
.vw-counter {
  display: flex;
  align-items: baseline;
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  font-size: clamp(1.75rem, 2.6vw, 2.5rem);
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
}
.vw-counter__total {
  font-size: 0.44em;
  color: var(--fg-muted);
  letter-spacing: var(--mono-letter-spacing);
}
.vw-finish {
  display: flex;
  align-items: center;
  gap: 0.55em;
  color: var(--accent);
  opacity: 0;
  clip-path: inset(0% 100% 0% 0%);
}
.vw-finish .strich--s { width: 2.4rem; }
.vw-finish .mono {
  font-weight: 600;
  letter-spacing: var(--mono-letter-spacing);
  text-transform: uppercase;
}

/* ---------- Fortschrittsschiene + Schritte ---------- */
.vw-steps-wrap { position: relative; }

.vw-rail {
  position: absolute;
  left: 0;
  top: 0.4em;
  bottom: 0.4em;
  width: 1px;
  background: var(--line);
}
.vw-rail__fill {
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top center;
}

.vw-steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 8vw, 72px);
}
.vw-step__label {
  display: block;
  color: var(--fg-muted);
  margin-bottom: 0.7em;
}
.vw-step h3 {
  font-size: clamp(1.15rem, 1.6vw, 1.55rem);
  margin-bottom: 0.35em;
}
.vw-step p {
  font-size: var(--t-s);
  color: var(--fg-2);
  max-width: 38ch;
  line-height: 1.6;
}

/* ---------- Karten-Modus: die Schicht liegt IM Textblock ---------- */
.vw-step .vw-layer {
  position: relative;
  inset: auto;
  aspect-ratio: 4 / 3;
  width: 100%;
  border-radius: var(--r-m);
  overflow: hidden;
  background: var(--bg-3);
  margin-bottom: var(--space-m);
  clip-path: none;
}
.vw-step .vw-layer__wet { display: none; }

/* ============================================================
   BÜHNEN-MODUS — ab 900px
   ============================================================ */
@media (min-width: 900px) {
  .vw-pin {
    /* Holt die Bühne unter die Headline hoch — der Pin selbst bleibt 100vh. */
    margin-top: -48px;
    min-height: 100vh;
    display: grid;
    align-content: center;
    /* Die fixe Nav (~76px) liegt über dem gepinnten Inhalt:
       oben Platz lassen, sonst verdeckt sie Zähler und FERTIG-Marke */
    padding-top: 84px;
    box-sizing: border-box;
  }
  .vw-grid {
    grid-template-columns: minmax(0, 60fr) minmax(0, 40fr);
    gap: clamp(40px, 5vw, 88px);
  }
  .vw-steps { gap: clamp(16px, 1.9vw, 26px); }
  .vw-steps-wrap { padding-left: clamp(22px, 2.4vw, 36px); }
  .vw-step p { font-size: var(--t-s); max-width: 42ch; }
}

/* Niedrige, breite Viewports: Panel enger stellen, damit nichts überläuft */
@media (min-width: 900px) and (max-height: 780px) {
  .vw-stage { max-width: calc(58vh * 4 / 3); }
  .vw-steps { gap: 16px; }
  .vw-step__label { margin-bottom: 0.45em; }
  .vw-step h3 { font-size: 1.05rem; }
  .vw-step p { font-size: var(--t-xs); line-height: 1.55; }
  .vw-counter { font-size: 1.6rem; }
  .vw-panel__top { margin-bottom: 18px; }
}

/* ============================================================
   STORY-MODUS — unter 900px, Motion erlaubt
   Gepinnte Hochformat-Bühne: Bild randlos, Fortschritts-Segmente
   direkt unter der Nav, Schichttext unten auf einem Verlauf.
   Der Container ändert seine Form über alle Schritte NIE.
   ============================================================ */
.verwandlung[data-mode="story"] {
  /* identisch zu .nav__inner min-height in hero.css */
  --vw-nav: clamp(64px, 8.5svh, 88px);
  --vw-scrim: 23, 19, 16;

  /* Unter dem Vollbild-Panel klafft sonst der Sektionsabstand als weißer
     Streifen. Oben bleibt er stehen — dort steht die Überschrift auf Weiß. */
  padding-bottom: 0;
}

/* Die Bühne ist exakt 100svh hoch, das sichtbare Fenster am Handy zeitweise
   mehr (eingefahrene Adressleiste). Der Rest der Scrollstrecke lag bis hier
   auf der weißen Sektion — dann blitzte Weiß am unteren Rand durch das
   Vollbild. GSAP legt den Platzhalter .pin-spacer um die gepinnte Bühne;
   der bekommt dieselbe Farbe, damit darunter nichts Helles mehr liegt. */
.verwandlung[data-mode="story"] .pin-spacer {
  background: rgb(var(--vw-scrim));
}

/* Die gepinnte Bühne: volle (kleine) Viewporthöhe, Nav-Platz oben */
.verwandlung[data-mode="story"] .vw-pin {
  position: relative;
  display: block;
  padding: 0;
  height: 100vh;      /* Fallback */
  height: 100svh;     /* iOS: nicht mit der Adressleiste springen */
  overflow: hidden;
  background: rgb(var(--vw-scrim));
}

.verwandlung[data-mode="story"] .vw-grid {
  position: absolute;
  inset: var(--vw-nav) 0 0 0;
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  gap: 0;
}

.verwandlung[data-mode="story"] .vw-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  aspect-ratio: auto;
}
.verwandlung[data-mode="story"] .vw-stage__frame { box-shadow: none; }
.verwandlung[data-mode="story"] .vw-layer img { object-position: 50% 52%; }

/* Die nasse Kante liegt im Hochformat quer und läuft nach oben/unten mit.
   Winkel ~200deg = senkrecht zur Kantenneigung (SLANT_V in verwandlung.js). */
.verwandlung[data-mode="story"] .vw-layer__wet {
  top: -70%;
  bottom: auto;
  height: 240%;
  left: -25%;
  width: 150%;
  background: linear-gradient(
    200deg,
    rgba(23, 19, 16, 0) 47.4%,
    rgba(23, 19, 16, 0.24) 50%,
    rgba(23, 19, 16, 0) 52.6%
  );
}

/* ---------- Story-Segmente (von verwandlung.js erzeugt) ---------- */
.vw-story-bars {
  position: absolute;
  top: var(--vw-nav);
  left: 0;
  right: 0;
  z-index: 26;
  display: flex;
  gap: 5px;
  padding: 14px var(--gutter) 44px;
  pointer-events: none;
  /* Verlauf, damit die dünnen Segmente auch auf hellen Bildern stehen */
  background: linear-gradient(
    to bottom,
    rgba(var(--vw-scrim, 23, 19, 16), 0.62) 0%,
    rgba(var(--vw-scrim, 23, 19, 16), 0.32) 44%,
    rgba(var(--vw-scrim, 23, 19, 16), 0) 100%
  );
  filter: drop-shadow(0 1px 1px rgba(17, 17, 17, 0.45));
}
.vw-story-bar {
  position: relative;
  flex: 1 1 0;
  height: 3px;
  overflow: hidden;
  background: rgba(245, 244, 239, 0.42);
}
.vw-story-bar__fill {
  position: absolute;
  inset: 0;
  background: var(--accent-bright);
  transform: scaleX(0);
  transform-origin: left center;
}
.verwandlung[data-mode="story"] .vw-story-bar__fill { will-change: transform; }

/* ---------- Textblock unten über dem Bild ---------- */
.verwandlung[data-mode="story"] .vw-panel {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 22;
  pointer-events: none;
  padding: clamp(72px, 17vh, 150px) var(--gutter)
           calc(var(--gutter) + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(
    to top,
    rgba(var(--vw-scrim), 0.94) 0%,
    rgba(var(--vw-scrim), 0.86) 26%,
    rgba(var(--vw-scrim), 0.5) 64%,
    rgba(var(--vw-scrim), 0) 100%
  );
}

/* Kopfzeile des Panels trägt hier nur die FERTIG-Marke */
.verwandlung[data-mode="story"] .vw-panel__top {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: clamp(10px, 2.6vw, 16px);
  justify-content: flex-start;
  min-height: 1.55rem;
}
.verwandlung[data-mode="story"] .vw-counter { display: none; }
.verwandlung[data-mode="story"] .vw-finish { color: var(--accent-bright); }
.verwandlung[data-mode="story"] .vw-finish .strich { color: var(--accent-bright); }
.verwandlung[data-mode="story"] .vw-rail { display: none; }
.verwandlung[data-mode="story"] .vw-steps-wrap { padding-left: 0; }

/* Alle fünf Texte liegen in DERSELBEN Zelle, unten bündig:
   der Block wechselt per Crossfade, ohne die Höhe zu verändern. */
.verwandlung[data-mode="story"] .vw-steps {
  display: grid;
  gap: 0;
}
.verwandlung[data-mode="story"] .vw-step {
  grid-area: 1 / 1;
  align-self: end;
}
.verwandlung[data-mode="story"] .vw-step__label {
  color: rgba(245, 244, 239, 0.72);
  margin-bottom: 0.5em;
}
.verwandlung[data-mode="story"] .vw-step h3 {
  color: var(--fg-on-dark);
  font-size: clamp(1.55rem, 7.4vw, 2.35rem);
  margin-bottom: 0.32em;
}
.verwandlung[data-mode="story"] .vw-step p {
  color: rgba(245, 244, 239, 0.86);
  font-size: var(--t-m);
  line-height: 1.5;
  max-width: 40ch;
}

/* Kleine Displays (360×640) und Querformat: Typo und Verlauf enger */
@media (max-width: 899.98px) and (max-height: 700px) {
  .verwandlung[data-mode="story"] .vw-panel {
    padding-top: clamp(56px, 12vh, 96px);
  }
  .verwandlung[data-mode="story"] .vw-step h3 { font-size: clamp(1.35rem, 6.4vw, 1.9rem); }
  .verwandlung[data-mode="story"] .vw-step p { font-size: var(--t-s); }
  .verwandlung[data-mode="story"] .vw-panel__top { min-height: 1.35rem; }
  .vw-story-bars { padding-bottom: 34px; }
}

/* ============================================================
   KARTEN-MODUS erzwungen (reduced-motion, auch auf Desktop)
   Steht bewusst NACH dem Media-Query.
   ============================================================ */
.verwandlung[data-mode="cards"] .vw-pin {
  min-height: 0;
  display: block;
}
.verwandlung[data-mode="cards"] .vw-grid { grid-template-columns: 1fr; }
/* JS hat die Schichten in die Karten gehängt — die leere Bühne fällt weg. */
.verwandlung[data-mode="cards"] .vw-stage { display: none; }
.verwandlung[data-mode="cards"] .vw-panel {
  max-width: 46rem;
  margin-inline: auto;
}
.verwandlung[data-mode="cards"] .vw-panel__top { display: none; }
.verwandlung[data-mode="cards"] .vw-rail { display: none; }
.verwandlung[data-mode="cards"] .vw-steps-wrap { padding-left: 0; }
.verwandlung[data-mode="cards"] .vw-steps { gap: clamp(48px, 8vw, 72px); }
.verwandlung[data-mode="cards"] .vw-step { opacity: 1; }
.verwandlung[data-mode="cards"] .vw-step p { font-size: var(--t-m); max-width: 60ch; }
.verwandlung[data-mode="cards"] .vw-step:last-child .vw-step__label { color: var(--accent); }

/* ============================================================
   Fallbacks
   ============================================================ */
html:not(.js) .vw-layer {
  position: relative;
  inset: auto;
  aspect-ratio: 4 / 3;
  clip-path: none;
  margin-bottom: var(--space-s);
  border-radius: var(--r-m);
}
html:not(.js) .vw-stage { aspect-ratio: auto; max-width: none; }
html:not(.js) .vw-layer__wet { display: none; }

@media (prefers-reduced-motion: reduce) {
  .vw-finish { opacity: 1; clip-path: none; }
  .vw-rail__fill { transform: scaleY(1); }
  .vw-layer:not(.vw-layer--base) { clip-path: none; }
  .vw-stage.is-live .vw-layer,
  .vw-stage.is-live .vw-layer__wet { will-change: auto; }
}