/* ==========================================================================
   Ansatz – Lichtwechsel, zentrierte Typografie, vertikale Transformation
   ========================================================================== */

.approach {
  position: relative;
  isolation: isolate;
  background: var(--c-ivory);
  color: var(--c-ink);
  padding-bottom: var(--space-section-tight);
}


/* Lichtwechsel: weicher S-Kurven-Verlauf über der Section-Grenze.
   Er beginnt knapp oberhalb der Grenze, damit das Licht optisch genau dort einsetzt. */
.approach__light {
  --ramp: clamp(14rem, 30svh, 22rem);
  position: absolute;
  left: 0; right: 0;
  top: calc(var(--ramp) * -0.19);
  height: var(--ramp);
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--c-ivory) 0.0%, var(--c-dark)) 0.0%,
    color-mix(in srgb, var(--c-ivory) 2.0%, var(--c-dark)) 8.3%,
    color-mix(in srgb, var(--c-ivory) 7.4%, var(--c-dark)) 16.7%,
    color-mix(in srgb, var(--c-ivory) 15.6%, var(--c-dark)) 25.0%,
    color-mix(in srgb, var(--c-ivory) 25.9%, var(--c-dark)) 33.3%,
    color-mix(in srgb, var(--c-ivory) 37.6%, var(--c-dark)) 41.7%,
    color-mix(in srgb, var(--c-ivory) 50.0%, var(--c-dark)) 50.0%,
    color-mix(in srgb, var(--c-ivory) 62.4%, var(--c-dark)) 58.3%,
    color-mix(in srgb, var(--c-ivory) 74.1%, var(--c-dark)) 66.7%,
    color-mix(in srgb, var(--c-ivory) 84.4%, var(--c-dark)) 75.0%,
    color-mix(in srgb, var(--c-ivory) 92.6%, var(--c-dark)) 83.3%,
    color-mix(in srgb, var(--c-ivory) 98.0%, var(--c-dark)) 91.7%,
    color-mix(in srgb, var(--c-ivory) 100.0%, var(--c-dark)) 100.0%);
}

.approach__intro {
  padding-top: clamp(10rem, 32svh, 19rem);
  text-align: center;
}

.approach__title {
  max-width: 17em;
  margin: clamp(3rem, 2rem + 3vw, 4.5rem) auto 0;
}
.approach__title .word { display: inline-block; white-space: nowrap; }
.approach__title .char { display: inline-block; }

.approach__lead {
  margin: clamp(3rem, 2rem + 3vw, 4.5rem) auto 0;
  max-width: 36rem;
  color: var(--c-muted-on-ivory);
}

/* ---------- Sequenz WAHRNEHMUNG → VERTRAUEN → ANFRAGE ---------- */

.sequence {
  margin-top: clamp(3.5rem, 2.5rem + 4vw, 6rem);
}
/* gepinnt zentriert die Bühne bereits im Viewport → kein zusätzlicher Abstand */
.sequence.is-pinned { margin-top: 0; }

.sequence__stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(2.5rem, 6svh, 4rem);
  padding-inline: var(--gutter);
}

.sequence__list {
  display: grid;
  gap: clamp(4rem, 10svh, 7rem);
  width: 100%;
  text-align: center;
}

.sequence__item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sequence__num {
  font-size: 0.75rem;
  font-weight: 500;
  font-stretch: 115%;
  letter-spacing: 0.2em;
  color: var(--c-bronze-on-light);
}

.sequence__word {
  margin-top: 1rem;
  font-size: min(13.2vw, 23svh);
  font-weight: 500;
  font-stretch: 78%;
  line-height: 0.9;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  color: var(--c-ink);
  white-space: nowrap;
}

.sequence__text {
  margin-top: clamp(1.5rem, 3.5svh, 2.5rem);
  max-width: 34rem;
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--c-muted-on-ivory);
  text-wrap: balance;
}

.sequence__summary {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.6rem 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--c-line);
  font-size: 0.75rem;
  font-weight: 500;
  font-stretch: 115%;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-ink);
}
.sequence__summary svg {
  width: 1rem; height: 1rem;
  color: var(--c-bronze);
}

/* Gepinnter Modus (Desktop mit Animation): alle Wörter an derselben Position */
.sequence.is-pinned .sequence__stage {
  height: 100svh;
  padding-top: var(--header-h);
}
.sequence.is-pinned .sequence__list { gap: 0; }
.sequence.is-pinned .sequence__item { grid-area: 1 / 1; }

.approach__cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
}
/* gepinnte Bühne ist 100svh hoch und endet mit viel Leerraum –
   der CTA rückt in diesen Bereich nach oben */
.approach__cta.is-tight { margin-top: calc(2rem - 11svh); }
.sequence.is-pinned .sequence__item { align-self: center; }