/* ==========================================================================
   Startseite — Neubau
   ==========================================================================

   Drei Festlegungen tragen die ganze Seite:

   1. EINE linke Achse. Jeder Abschnitt beginnt an derselben Container-Kante.
      Nichts wird zentriert. Zwei Spaltenteilungen sind erlaubt und wechseln
      sich ab, damit Rhythmus entsteht - aber die linke Kante bleibt stehen.

   2. DREI Abschnittshöhen statt sieben zufälligen: inszeniert, regulär,
      kompakt. Dadurch ragt die Problembühne als Ereignis heraus und der Rest
      liegt ruhig darunter.

   3. VIER scrollgekoppelte Animationen, die Inhalt erklären. Jede ist eine
      reine Funktion der Scrollposition und läuft deshalb vorwärts wie
      rückwärts. Keine generischen Einblendungen, kein Abschnitt startet
      unsichtbar.
   ========================================================================== */

.home {
  /* --- Vertikale Rollen ------------------------------------------------- */
  --space-stage: clamp(5rem, 9vw, 8.5rem);
  --space-regular: clamp(4rem, 6.5vw, 6.5rem);
  --space-compact: clamp(3rem, 4.5vw, 4.5rem);

  /* --- Spaltenteilung: nur diese zwei ----------------------------------- */
  --split-gap: clamp(2.5rem, 5vw, 5rem);

  /* --- Textmasse: je Rolle genau eines ---------------------------------- */
  --measure-lead: 34rem;
  --measure-body: 60ch;
  --measure-title: 18ch;
  --measure-quote: 22ch;

  /* --- Zwei Werte, die es global nicht gibt ------------------------------ */
  --navy-deep: #061523;
  --blue-bright: #7ba8ff;

  /* --- Bewegungsfortschritte: von home-story.js gesetzt, 0…1 ------------- */
  --stage-progress: 0;
  --answer-progress: 0;
  --proof-progress: 0;
  --offer-progress: 0;
}

/* ==========================================================================
   Gemeinsame Bausteine
   ========================================================================== */

.home section {
  position: relative;
}

.home__section {
  padding-block: var(--space-regular);
}

.home__section--stage {
  padding-block: var(--space-stage);
}

.home__section--compact {
  padding-block: var(--space-compact);
}

.home__section--soft {
  background-color: var(--color-bg-soft);
}

/* Die eine Titelrolle. Linksbündig, immer. */
.home h2 {
  max-width: var(--measure-title);
  margin: 0;
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.home h2.home__quote {
  max-width: var(--measure-quote);
}

.home__body {
  max-width: var(--measure-body);
  margin: 0;
  color: var(--color-ink-soft);
  font-size: var(--text-base);
  line-height: 1.7;
}

/* Die zwei erlaubten Zweiteilungen. Die linke Kante bleibt in beiden stehen. */
.home__split {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--split-gap);
  align-items: start;
}

.home__split--mirrored {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}

.home__cta {
  min-height: 3.375rem;
  padding-inline: 1.75rem;
  font-size: var(--text-base);
}

/* ==========================================================================
   1 — Hero · Weiss · inszeniert · statisch
   Das Portrait ist das einzige bewusst angeschnittene Element der Seite und
   endet exakt auf der Kante zur Bühne.
   ========================================================================== */

.hero {
  overflow: hidden;
  padding-top: var(--space-stage);
  background-color: var(--color-bg);
}

.hero__layout {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--split-gap);
  align-items: end;
}

.hero__copy {
  align-self: center;
  padding-bottom: var(--space-stage);
}

.hero h1 {
  max-width: 13ch;
  margin: 0;
  color: var(--navy-deep);
  font-size: var(--text-4xl);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.hero__lead {
  max-width: var(--measure-lead);
  margin: 1.5rem 0 0;
  color: var(--color-ink-soft);
  font-size: var(--text-lg);
  line-height: 1.55;
}

.hero__copy .home__cta {
  margin-top: 2.25rem;
}

.hero__portrait {
  display: flex;
  align-self: end;
  justify-content: flex-end;
  margin-bottom: -1px;
  line-height: 0;
}

.hero__portrait img {
  width: auto;
  max-width: 100%;
  height: clamp(24rem, 40vw, 34rem);
  object-fit: contain;
  object-position: bottom center;
}

/* ==========================================================================
   2 — Problembühne · Navy · inszeniert · M1
   Der einzige filmische Moment der Seite. Bild und Textzone sind getrennte
   Flächen: Copy liegt nie auf dem Bild.
   ========================================================================== */

.stage {
  --stage-steps: 3;
  background-color: var(--color-dark-bg);
  color: var(--color-dark-text);
  /* Sticky-Strecke: eine Bildschirmhöhe plus Scrollweg je Gedanke. */
  min-height: calc(
    (100svh - var(--header-height, 4.5rem)) + (var(--stage-steps) * 62svh)
  );
}

.stage__viewport {
  position: sticky;
  top: var(--header-height, 4.5rem);
  height: calc(100svh - var(--header-height, 4.5rem));
  overflow: hidden;
}

/* --- Textzone ----------------------------------------------------------
   Auf Desktop liegt die Copy im abgedunkelten Negativraum der Szene und
   beginnt exakt auf der linken Achse der ganzen Website. */

.stage__panel {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  height: 100%;
  padding-inline: max(var(--container-pad), (100vw - var(--container-max)) / 2);
}

.stage__panel-inner {
  max-width: 32rem;
}

.stage__panel h2 {
  max-width: 15ch;
  color: #ffffff;
}

.stage__thoughts {
  position: relative;
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding: 0 0 0 1.75rem;
  list-style: none;
}

/* Ruhende Spur und wachsender Fortschritt - der Fortschritt ist die
   sichtbare Verdichtung der Sorge, nicht Dekoration. */
.stage__thoughts::before,
.stage__thoughts::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  border-radius: 2px;
}

.stage__thoughts::before {
  background-color: rgba(255, 255, 255, 0.16);
}

.stage__thoughts::after {
  background-color: var(--blue-bright);
  transform: scaleY(var(--stage-progress));
  transform-origin: top;
}

.stage__thought {
  margin: 0;
  padding-block: 0.75rem;
  color: rgba(255, 255, 255, 0.42);
  font-family: var(--font-heading);
  font-size: clamp(1.375rem, 2.2vw, 1.875rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
  transition:
    color 420ms var(--ease-out),
    opacity 420ms var(--ease-out);
}

.stage[data-step='0'] .stage__thought:nth-child(1),
.stage[data-step='1'] .stage__thought:nth-child(2),
.stage[data-step='2'] .stage__thought:nth-child(3) {
  color: #ffffff;
}

.stage__meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  padding-left: 1.75rem;
  color: rgba(255, 255, 255, 0.5);
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
}

/* --- Bildzone ---------------------------------------------------------- */

.stage__media {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: 0;
  overflow: hidden;
}

.stage__media picture,
.stage__media img {
  display: block;
  width: 100%;
  height: 100%;
}

.stage__media img {
  object-fit: cover;
  object-position: 62% center;
  transform-origin: 62% 42%;
  /* Der Zoom ist minimal und dient der Verdichtung, nicht dem Effekt. */
  transform: scale(calc(1.02 + (var(--stage-progress) * 0.07)));
}

/* Scrim zur Textzone und Vignette, die sich mit dem Fortschritt schliesst. */
.stage__media::before,
.stage__media::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.stage__media::before {
  z-index: 1;
  background: linear-gradient(
    90deg,
    var(--color-dark-bg) 0%,
    rgba(7, 27, 47, 0.72) 22%,
    rgba(7, 27, 47, 0.08) 62%,
    rgba(7, 27, 47, 0) 100%
  );
}

.stage__media::after {
  z-index: 2;
  background: radial-gradient(
    circle at 62% 42%,
    rgba(6, 21, 35, 0) 0%,
    rgba(6, 21, 35, 0.15) 38%,
    rgba(6, 21, 35, 0.82) 92%
  );
  opacity: calc(0.12 + (var(--stage-progress) * 0.68));
}

/* ==========================================================================
   3 — Gespräch · Weiss · regulär · M2
   Zwei Register: die Kundenstimme links, Simons Antwort rechts an einer
   blauen Linie. Die Linie wächst weiter zum Beweisbild und verbindet damit
   Aussage und Beleg.
   ========================================================================== */

.talk {
  background-color: var(--color-bg);
}

.talk__layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--split-gap);
  align-items: start;
}

.talk__voice h2 {
  color: var(--navy-deep);
}

.talk__failed {
  margin: clamp(2rem, 3.5vw, 2.75rem) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-border);
}

.talk__failed li {
  position: relative;
  padding: 1.05rem 0 1.05rem 2rem;
  color: var(--color-ink-soft);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-base);
  line-height: 1.55;
}

.talk__failed li::before {
  content: '×';
  position: absolute;
  top: 1.05rem;
  left: 0.1rem;
  color: var(--color-error);
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.4;
}

/* Simons Register. Die Linie links ist seine Stimme. */
.talk__answer {
  position: relative;
  padding-left: clamp(1.5rem, 3vw, 2.5rem);
}

.talk__answer::before,
.talk__answer::after {
  content: '';
  position: absolute;
  top: 0.35rem;
  left: 0;
  width: 2px;
  border-radius: 2px;
}

.talk__answer::before {
  bottom: 0;
  background-color: var(--color-border);
}

.talk__answer::after {
  height: calc(100% - 0.35rem);
  background-color: var(--color-accent);
  transform: scaleY(var(--answer-progress));
  transform-origin: top;
}

.talk__opener {
  margin: 0 0 1rem;
  color: var(--color-ink);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.55;
}

.talk__analogy {
  max-width: 32ch;
  margin: 0;
  color: var(--navy-deep);
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: -0.02em;
}

.talk__turn {
  max-width: var(--measure-body);
  margin: 1.75rem 0 0;
  color: var(--color-ink-soft);
  font-size: var(--text-base);
  line-height: 1.7;
}

/* Das Beweisbild schliesst die Aussage ab: es beruhigt sich auf 1.0,
   während die Antwortlinie es erreicht. */
.talk__proof {
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background-color: var(--color-dark-bg);
}

.talk__proof picture,
.talk__proof img {
  display: block;
  width: 100%;
}

.talk__proof img {
  aspect-ratio: 1448 / 810;
  object-fit: cover;
  transform: scale(calc(1.04 - (var(--answer-progress) * 0.04)));
}

/* ==========================================================================
   4 — Referenz · Soft-Grau · regulär · M3
   Die Erklärung übergibt an das echte Projekt. Der Frame ist der Schwerpunkt.
   ========================================================================== */

.proof {
  background-color: var(--color-bg-soft);
}

.proof__layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--split-gap);
  align-items: start;
}

.proof__copy h2 {
  max-width: var(--measure-quote);
  color: var(--navy-deep);
}

.proof__steps {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

.proof__step {
  max-width: 42ch;
  margin: 0 0 1.25rem;
  color: var(--color-ink-soft);
  font-size: var(--text-base);
  line-height: 1.7;
}

/* Die Übergabelinie: kurz, gerichtet, erklärt den Sprung zum Projekt. */
.proof__handover {
  position: relative;
  height: 2.5rem;
  margin-bottom: 1.25rem;
}

.proof__handover::before,
.proof__handover::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  border-radius: 2px;
}

.proof__handover::before {
  background-color: var(--color-border);
}

.proof__handover::after {
  background-color: var(--color-accent);
  transform: scaleY(var(--proof-progress));
  transform-origin: top;
}

.proof__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-accent);
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: 700;
  text-decoration: none;
}

.proof__link span,
.proof__caption a span {
  transition: transform 180ms var(--ease-out);
}

.proof__link:hover span,
.proof__caption a:hover span {
  transform: translate3d(0.18rem, -0.18rem, 0);
}

.proof__visual {
  min-width: 0;
  margin: 0;
}

.frame {
  display: block;
  overflow: hidden;
  color: inherit;
  background-color: #ffffff;
  border: 1px solid #d8dee5;
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 66px rgba(6, 21, 35, 0.13);
  text-decoration: none;
  /* Der Frame setzt sich mit dem Fortschritt um maximal 12px. */
  transform: translateY(calc((1 - var(--proof-progress)) * 12px));
}

.frame:hover,
.frame:focus-visible {
  color: inherit;
}

.frame__bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding-inline: 1rem;
  background-color: #f7f8fa;
  border-bottom: 1px solid #e4e8ec;
}

.frame__bar i {
  width: 0.55rem;
  height: 0.55rem;
  background-color: #c8d0d8;
  border-radius: 50%;
}

.frame__bar b {
  min-width: 0;
  margin-left: 0.35rem;
  overflow: hidden;
  color: var(--color-muted);
  font-size: 0.8125rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.frame__viewport {
  display: block;
  overflow: hidden;
  background-color: #f3ede1;
}

.frame__viewport picture,
.frame__viewport img {
  display: block;
  width: 100%;
}

.proof__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.proof__caption a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--color-accent);
  font-family: var(--font-heading);
  font-weight: 700;
  text-decoration: none;
}

/* ==========================================================================
   5 — Angebot · Weiss · regulär · M4
   Gespiegelte Zweiteilung: das Visual steht links, der Inhalt rechts. So
   wiederholt der Abschnitt die Referenz nicht.
   ========================================================================== */

.offer {
  background-color: var(--color-bg);
}

.offer h2 {
  color: var(--navy-deep);
}

.offer__layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--split-gap);
  align-items: center;
  margin-top: clamp(2.5rem, 4.5vw, 4rem);
}

/* Kein Telefon, kein Geräte-Stillleben: ein Laptop und die drei Kanäle,
   ausgeschrieben. */
.presence {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background-color: var(--color-dark-bg);
  border-radius: var(--radius-lg);
}

.presence__device {
  overflow: hidden;
  border-radius: 0.5rem;
}

.presence__bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2rem;
  padding-inline: 0.75rem;
  background-color: #e9edf1;
}

.presence__bar i {
  width: 0.4rem;
  height: 0.4rem;
  background-color: #b9c3cd;
  border-radius: 50%;
}

.presence__bar span {
  margin-left: 0.3rem;
  color: var(--color-muted);
  font-family: var(--font-heading);
  font-size: 0.6875rem;
  font-weight: 700;
}

.presence__screen {
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background-color: #ffffff;
}

.presence__screen picture,
.presence__screen img {
  display: block;
  width: 100%;
  height: 100%;
}

.presence__screen img {
  object-fit: cover;
  object-position: top center;
}

.presence__channels {
  display: grid;
  gap: 0.5rem;
  margin-top: 1.25rem;
  padding: 0;
  list-style: none;
}

.presence__channels li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.7rem 0.9rem;
  color: rgba(255, 255, 255, 0.86);
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-sm);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 600;
  transition:
    color 320ms var(--ease-out),
    background-color 320ms var(--ease-out),
    border-color 320ms var(--ease-out);
}

.presence__channels li::before {
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  background-color: rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  transition: background-color 320ms var(--ease-out);
}

.offer[data-offer-step='1'] .presence__channels li:nth-child(1),
.offer[data-offer-step='2'] .presence__channels li:nth-child(-n + 2),
.offer[data-offer-step='3'] .presence__channels li {
  color: #ffffff;
  background-color: rgba(21, 95, 215, 0.55);
  border-color: var(--blue-bright);
}

.offer[data-offer-step='1'] .presence__channels li:nth-child(1)::before,
.offer[data-offer-step='2'] .presence__channels li:nth-child(-n + 2)::before,
.offer[data-offer-step='3'] .presence__channels li::before {
  background-color: var(--blue-bright);
}

/* Die drei Leistungsversprechen: Häkchen werden mit dem Fortschritt gesetzt. */
.offer__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-border);
}

.offer__list li {
  position: relative;
  padding: 1.2rem 0 1.2rem 2.75rem;
  color: var(--color-muted);
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.45;
  transition: color 320ms var(--ease-out);
}

.offer__list li::before {
  content: '';
  position: absolute;
  top: 1.25rem;
  left: 0;
  width: 1.5rem;
  height: 1.5rem;
  background-color: var(--color-bg);
  border: 2px solid var(--color-border);
  border-radius: 50%;
  transition:
    background-color 320ms var(--ease-out),
    border-color 320ms var(--ease-out);
}

.offer__list li::after {
  content: '';
  position: absolute;
  top: 1.55rem;
  left: 0.42rem;
  width: 0.65rem;
  height: 0.35rem;
  border-left: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  opacity: 0;
  transform: rotate(-45deg) scale(0.6);
  transition:
    opacity 260ms var(--ease-out),
    transform 320ms var(--ease-spring);
}

.offer[data-offer-step='1'] .offer__list li:nth-child(1),
.offer[data-offer-step='2'] .offer__list li:nth-child(-n + 2),
.offer[data-offer-step='3'] .offer__list li {
  color: var(--navy-deep);
}

.offer[data-offer-step='1'] .offer__list li:nth-child(1)::before,
.offer[data-offer-step='2'] .offer__list li:nth-child(-n + 2)::before,
.offer[data-offer-step='3'] .offer__list li::before {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}

.offer[data-offer-step='1'] .offer__list li:nth-child(1)::after,
.offer[data-offer-step='2'] .offer__list li:nth-child(-n + 2)::after,
.offer[data-offer-step='3'] .offer__list li::after {
  opacity: 1;
  transform: rotate(-45deg) scale(1);
}

.offer__focus {
  max-width: 28ch;
  margin: clamp(2rem, 3.5vw, 2.75rem) 0 0;
  color: var(--navy-deep);
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.015em;
}

.offer__note {
  max-width: 46ch;
  margin: 0.9rem 0 0;
  color: var(--color-muted);
  font-size: var(--text-base);
  line-height: 1.65;
}

.offer__content .home__cta {
  margin-top: 2rem;
}

/* ==========================================================================
   6 — FAQ · Soft-Grau · kompakt
   Linienliste an derselben linken Achse. Keine Kartenbox, keine Zentrierung.
   ========================================================================== */

.faq-block {
  background-color: var(--color-bg-soft);
}

.faq-block h2 {
  color: var(--navy-deep);
}

.faq-block .faq {
  max-width: 46rem;
  gap: 0;
  margin-top: clamp(2rem, 3.5vw, 3rem);
  border-top: 1px solid var(--color-border);
}

.faq-block .faq__item {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
}

.faq-block .faq__question {
  position: relative;
  min-height: 3.5rem;
  padding: 1.1rem 3.5rem 1.1rem 0;
  color: var(--navy-deep);
  font-size: var(--text-base);
  line-height: 1.5;
}

.faq-block .faq__chevron {
  display: none;
}

.faq-block .faq__question::before,
.faq-block .faq__question::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  width: 1rem;
  height: 2px;
  background-color: var(--color-accent);
  border-radius: 2px;
  transform: translateY(-50%);
  transition: transform 220ms var(--ease-out);
}

.faq-block .faq__question::after {
  transform: translateY(-50%) rotate(90deg);
}

.faq-block .faq__item[open] .faq__question::after {
  transform: translateY(-50%) rotate(0);
}

.faq-block .faq__answer {
  max-width: var(--measure-body);
  padding: 0 3.5rem 1.4rem 0;
  color: var(--color-ink-soft);
  line-height: 1.7;
}

/* ==========================================================================
   7 — Schluss-CTA · Navy · kompakt · statisch
   Schliesst den Bogen zum Hero, ohne einen zweiten Kino-Moment zu erzeugen.
   Eine Tonstufe über dem Footer, damit beide als zwei Ebenen lesbar bleiben.
   ========================================================================== */

.closing {
  padding-block: var(--space-compact);
  color: #ffffff;
  background-color: var(--color-dark-surface);
}

.closing__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
}

.closing h2 {
  max-width: none;
  color: #ffffff;
}

/* ==========================================================================
   Tablet
   ========================================================================== */

@media (max-width: 64rem) {
  .home__split,
  .home__split--mirrored,
  .talk__layout,
  .proof__layout,
  .offer__layout,
  .hero__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero__layout {
    gap: 0;
  }

  .hero__copy {
    padding-bottom: 2.5rem;
  }

  .hero__portrait {
    justify-content: flex-start;
  }

  .hero__portrait img {
    height: clamp(20rem, 46vw, 27rem);
  }

  /* Mobile Bühne: Bild oben, Textzone unten. Text liegt nie auf dem Bild. */
  .stage__viewport {
    display: grid;
    grid-template-rows: 56% 44%;
  }

  .stage__media {
    position: relative;
    inset: auto;
  }

  .stage__media::before {
    background: linear-gradient(
      180deg,
      rgba(7, 27, 47, 0) 52%,
      rgba(7, 27, 47, 0.5) 86%,
      var(--color-dark-bg) 100%
    );
  }

  .stage__panel {
    align-items: flex-start;
    height: auto;
    padding: clamp(1.25rem, 4vw, 2rem) var(--container-pad);
  }

  .stage__panel-inner {
    max-width: none;
  }

  .stage__panel h2 {
    max-width: 20ch;
    font-size: var(--text-2xl);
  }

  .stage__thoughts {
    margin-top: 1.25rem;
  }

  .stage__thought {
    font-size: clamp(1.125rem, 4.4vw, 1.5rem);
  }

  .stage__meta {
    margin-top: 1rem;
  }

  .offer__layout {
    gap: 2.5rem;
  }

  .presence {
    max-width: 32rem;
  }

  .proof__handover {
    height: 2rem;
  }
}

/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 48rem) {
  .home {
    --space-stage: clamp(3.5rem, 12vw, 5rem);
    --space-regular: clamp(3rem, 10vw, 4rem);
    --space-compact: clamp(2.5rem, 8vw, 3.25rem);
  }

  .hero__copy .home__cta,
  .offer__content .home__cta,
  .closing .home__cta {
    width: 100%;
  }

  .stage {
    --stage-steps: 3;
  }

  .stage__viewport {
    grid-template-rows: 55% 45%;
  }

  .talk__answer {
    padding-left: 1.25rem;
  }

  .closing__inner {
    align-items: stretch;
    flex-direction: column;
  }
}

/* Sehr flache Viewports: die Bühne verliert die Sticky-Mechanik und wird zum
   ruhigen Grundlayout, statt Copy abzuschneiden. */
.stage[data-static] {
  min-height: 0;
}

.stage[data-static] .stage__viewport {
  position: static;
  display: grid;
  grid-template-rows: auto auto;
  height: auto;
}

/* Im ruhenden Zustand wird die Bühne zur Zweiteilung wie die übrigen
   Abschnitte: Text links auf derselben Achse, Bild rechts. Eine vollbreite
   Bildfläche mit Text darunter erzeugt hier nur leeren Raum. */
.stage[data-static] .stage__viewport {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-rows: auto;
  align-items: center;
}

.stage[data-static] .stage__media {
  position: relative;
  inset: auto;
  order: 2;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
}

.stage[data-static] .stage__media::before,
.stage[data-static] .stage__media::after {
  display: none;
}

.stage[data-static] .stage__panel {
  order: 1;
  align-items: center;
  height: auto;
  padding-block: var(--space-regular);
  padding-right: var(--split-gap);
}

.stage[data-static] .stage__thought {
  color: #ffffff;
}

.stage[data-static] .stage__meta {
  display: none;
}

/* ==========================================================================
   Reduced Motion und ohne JavaScript
   Der Grundzustand ist vollständig: alle Gedanken, beide Erklärungsschritte,
   alle drei Häkchen und sämtliche Copy sind sichtbar.
   ========================================================================== */

.home:not([data-enhanced]) {
  --stage-progress: 1;
  --answer-progress: 1;
  --proof-progress: 1;
}

.home:not([data-enhanced]) .stage__thought,
.home:not([data-enhanced]) .offer__list li {
  color: #ffffff;
}

.home:not([data-enhanced]) .offer__list li {
  color: var(--navy-deep);
}

.home:not([data-enhanced]) .offer__list li::before {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}

.home:not([data-enhanced]) .offer__list li::after {
  opacity: 1;
  transform: rotate(-45deg) scale(1);
}

.home:not([data-enhanced]) .presence__channels li {
  color: #ffffff;
  background-color: rgba(21, 95, 215, 0.55);
  border-color: var(--blue-bright);
}

.home:not([data-enhanced]) .presence__channels li::before {
  background-color: var(--blue-bright);
}

.home:not([data-enhanced]) .stage__meta {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .home {
    --stage-progress: 1;
    --answer-progress: 1;
    --proof-progress: 1;
  }

  .stage {
    min-height: 0;
  }

  .stage__viewport {
    position: static;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: center;
    height: auto;
  }

  .stage__media {
    position: relative;
    inset: auto;
    order: 2;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-lg);
  }

  .stage__media::before,
  .stage__media::after {
    display: none;
  }

  .stage__panel {
    order: 1;
    align-items: center;
    height: auto;
    padding-block: var(--space-regular);
    padding-right: var(--split-gap);
  }

  .stage__media img,
  .talk__proof img,
  .frame {
    transform: none !important;
  }

  .stage__thought {
    color: #ffffff !important;
  }

  .stage__meta {
    display: none;
  }

  .offer__list li,
  .presence__channels li,
  .stage__thought,
  .proof__link span,
  .proof__caption a span {
    transition: none !important;
  }
}

/* Ruhender Zustand auf schmalen Viewports: wieder Bild oben, Text darunter. */
@media (max-width: 64rem) {
  .stage[data-static] .stage__viewport {
    grid-template-columns: minmax(0, 1fr);
  }

  .stage[data-static] .stage__media {
    order: 0;
  }

  .stage[data-static] .stage__panel {
    order: 0;
    align-items: flex-start;
    padding-right: var(--container-pad);
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 64rem) {
  .stage__viewport {
    grid-template-columns: minmax(0, 1fr);
  }

  .stage__media {
    order: 0;
  }

  .stage__panel {
    order: 0;
    align-items: flex-start;
    padding-right: var(--container-pad);
  }
}