/*
 * Konzept34 – scrollgesteuerte Landingpage
 *
 * Die Basisseite bleibt ohne JavaScript vollständig nutzbar. Erst die Klasse
 * .has-scroll-experience aktiviert die inszenierten Desktop-Sequenzen.
 */

.landing-page .lp-hero__stage {
  position: relative;
  isolation: isolate;
  display: grid;
  width: 100%;
  height: 100%;
  min-height: inherit;
  align-items: inherit;
  overflow: hidden;
  background: var(--lp-forest-950);
}

.landing-page .lp-hero__line {
  display: block;
}

.landing-page .lp-scroll-cue {
  display: none;
}

.landing-page .lp-project-story,
.landing-page .lp-services__story {
  position: relative;
}

/*
 * Matrix-Typografie: Der echte Text bleibt unverändert im Dokumentfluss.
 * Die absolut positionierte Ebene darüber ist rein dekorativ.
 */

.landing-page .lp-matrix-text {
  position: relative;
}

.landing-page .lp-matrix-text__source {
  opacity: 1;
}

.landing-page .lp-matrix-text__overlay {
  display: none;
}

/* Auch ohne Motion-Enhancement bleibt die letzte Reihe als echtes Zweierpaar. */

@media (min-width: 761px) {
  .landing-page .lp-service-grid > .lp-service-card--wide {
    grid-column: auto;
  }

  .landing-page .lp-service-grid > .lp-service-card--wide > a {
    height: 100%;
    min-height: 575px;
    grid-template-columns: minmax(0, 1fr);
  }

  .landing-page .lp-service-grid > .lp-service-card--wide .lp-service-card__media {
    height: 320px;
  }

  .landing-page .lp-service-grid > .lp-service-card--wide .lp-service-card__body {
    min-height: 255px;
    align-content: start;
    padding: 32px 34px 30px;
  }
}

.landing-page .lp-service-grid > .lp-additional {
  height: 100%;
  margin-top: 0;
  border-radius: var(--lp-radius-lg);
}

html.has-scroll-experience .landing-page::before {
  position: fixed;
  z-index: 89;
  top: var(--lp-header-height);
  right: 0;
  left: 0;
  height: 2px;
  background: var(--lp-olive);
  content: "";
  pointer-events: none;
  transform: scaleX(var(--lp-page-progress, 0));
  transform-origin: left center;
  will-change: transform;
}

/* Ruhige Einblendungen bleiben bewusst deutlich unterhalb einer Vollanimation. */

html.has-scroll-experience .landing-page [data-scroll-reveal].is-scroll-active {
  opacity: clamp(.2, var(--lp-section-enter, 0), 1);
  transform: translate3d(
    0,
    calc((1 - var(--lp-section-enter, 0)) * 34px),
    0
  );
  transition: none;
  will-change: opacity, transform;
}

@media (prefers-reduced-motion: no-preference) {
  html.has-scroll-experience .landing-page .lp-matrix-text.is-matrix-ready {
    --lp-matrix-source-opacity: clamp(
      0,
      calc((var(--lp-matrix-progress, 0) - .84) * 6.25),
      1
    );
    --lp-matrix-overlay-opacity: clamp(
      0,
      calc((1 - var(--lp-matrix-progress, 0)) * 6.25),
      1
    );
  }

  html.has-scroll-experience .landing-page .lp-matrix-text.is-matrix-ready .lp-matrix-text__source {
    opacity: var(--lp-matrix-source-opacity);
  }

  html.has-scroll-experience .landing-page .lp-matrix-text.is-matrix-ready .lp-matrix-text__overlay {
    position: absolute;
    inset: 0;
    display: block;
    overflow: visible;
    color: var(--lp-matrix-final-color, currentColor);
    font: inherit;
    font-kerning: none;
    font-variant-ligatures: none;
    letter-spacing: inherit;
    line-height: inherit;
    opacity: var(--lp-matrix-overlay-opacity);
    perspective: 900px;
    pointer-events: none;
    text-align: inherit;
    text-transform: inherit;
    user-select: none;
  }

  html.has-scroll-experience .landing-page .lp-matrix-text__cell {
    --lp-matrix-char-progress: clamp(
      0,
      calc(
        (var(--lp-matrix-progress, 0) - var(--lp-matrix-start, 0))
        * 5.5556
      ),
      1
    );
    position: absolute;
    display: grid;
    align-items: center;
    justify-items: center;
    color: var(--lp-matrix-final-color, currentColor);
    opacity: var(--lp-matrix-char-progress);
    transform:
      translate3d(
        calc(
          var(--lp-matrix-drift, 1)
          * (1 - var(--lp-matrix-char-progress))
          * .14em
        ),
        calc((1 - var(--lp-matrix-char-progress)) * .55em),
        0
      )
      rotateX(calc((1 - var(--lp-matrix-char-progress)) * -68deg))
      rotateZ(
        calc(
          var(--lp-matrix-drift, 1)
          * (1 - var(--lp-matrix-char-progress))
          * 2.5deg
        )
      )
      scale(calc(.72 + (var(--lp-matrix-char-progress) * .28)));
    transform-origin: 50% 68%;
    transform-style: preserve-3d;
    backface-visibility: hidden;
  }

  html.has-scroll-experience .landing-page .lp-matrix-text__cell::before {
    content: attr(data-matrix-glyph);
  }

  html.has-scroll-experience .landing-page .lp-matrix-text__cell.is-matrix-noise {
    color: var(--lp-matrix-accent-color, var(--lp-olive));
    opacity: calc(var(--lp-matrix-char-progress) * .82);
  }

  html.has-scroll-experience .landing-page .lp-matrix-text__cell.is-matrix-static {
    color: var(--lp-matrix-final-color, currentColor);
    opacity: var(--lp-matrix-char-progress);
    transform: none;
  }
}

@media (min-width: 1001px) and (min-height: 680px) and (prefers-reduced-motion: no-preference) {
  /* 01 — Hero: kompakter Einstieg, damit der nächste Inhalt früher erscheint */

  html.has-scroll-experience .landing-page .lp-hero {
    display: block;
    height: 165svh;
    min-height: 0;
    max-height: none;
    overflow: visible;
  }

  html.has-scroll-experience .landing-page .lp-hero__stage {
    position: sticky;
    top: var(--lp-header-height);
    height: calc(100svh - var(--lp-header-height));
    min-height: 606px;
    max-height: none;
    align-items: center;
    overflow: hidden;
  }

  html.has-scroll-experience .landing-page .lp-hero__media {
    inset: -7%;
  }

  html.has-scroll-experience .landing-page .lp-hero__media img {
    transform:
      translate3d(
        0,
        calc(var(--lp-hero-progress, 0) * -3%),
        0
      )
      scale(calc(1.04 + (var(--lp-hero-progress, 0) * .07)));
    transform-origin: 58% 54%;
    transition: none;
    will-change: transform;
  }

  html.has-scroll-experience .landing-page .lp-hero__shade::after {
    position: absolute;
    inset: 0;
    background: var(--lp-forest-950);
    content: "";
    opacity: calc(var(--lp-hero-progress, 0) * .28);
  }

  html.has-scroll-experience .landing-page .lp-hero__content {
    opacity: clamp(
      0,
      calc(1.207 - (var(--lp-hero-progress, 0) * 1.724)),
      1
    );
    transform: translate3d(
      0,
      calc(var(--lp-hero-progress, 0) * -48px),
      0
    );
    will-change: opacity, transform;
  }

  html.has-scroll-experience .landing-page .lp-hero__line {
    transform: translate3d(
      calc(var(--lp-hero-progress, 0) * -20px),
      0,
      0
    );
    will-change: transform;
  }

  html.has-scroll-experience .landing-page .lp-hero__line + .lp-hero__line {
    transform: translate3d(
      calc(var(--lp-hero-progress, 0) * 28px),
      0,
      0
    );
  }

  html.has-scroll-experience .landing-page .lp-scroll-cue {
    position: absolute;
    z-index: 3;
    right: max(28px, calc((100vw - var(--lp-shell)) / 2));
    bottom: 34px;
    display: grid;
    justify-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, .62);
    font-size: .62rem;
    font-weight: 760;
    letter-spacing: .2em;
    opacity: clamp(
      0,
      calc(1 - (var(--lp-hero-progress, 0) * 3.2)),
      1
    );
    text-transform: uppercase;
  }

  html.has-scroll-experience .landing-page .lp-scroll-cue i {
    display: block;
    width: 1px;
    height: 58px;
    background: linear-gradient(var(--lp-sage), transparent);
    transform: scaleY(calc(.25 + (var(--lp-hero-progress-inverse, 1) * .75)));
    transform-origin: top;
  }

  html.has-scroll-experience .landing-page .lp-trust {
    margin-top: -42px;
  }

  /* 02 — Leistungen: immer zwei Karten, ohne Sticky-Haltepunkte */

  .landing-page .lp-services {
    padding-block: 150px 132px;
    overflow-x: clip;
  }

  .landing-page .lp-services__story {
    display: block;
  }

  .landing-page .lp-services__story > .lp-heading {
    position: relative;
    top: auto;
    display: grid;
    margin-bottom: clamp(58px, 7vw, 92px);
  }

  .landing-page .lp-services__story > .lp-heading > p {
    max-width: 520px;
    margin-top: 0;
  }

  .landing-page .lp-service-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(22px, 2.4vw, 34px);
    row-gap: clamp(34px, 5vw, 62px);
    align-items: stretch;
    perspective: 1400px;
    perspective-origin: 50% 45%;
  }

  .landing-page .lp-service-card,
  .landing-page .lp-service-card--wide {
    min-height: 0;
    grid-column: auto;
  }

  .landing-page .lp-service-grid > :nth-child(odd) {
    --lp-service-start-x: -52vw;
    --lp-service-start-yaw: 16deg;
    --lp-service-start-roll: -.5deg;
    transform-origin: 100% 50%;
  }

  .landing-page .lp-service-grid > :nth-child(even) {
    --lp-service-start-x: 52vw;
    --lp-service-start-yaw: -16deg;
    --lp-service-start-roll: .5deg;
    transform-origin: 0 50%;
  }

  html.has-scroll-experience .landing-page .lp-service-card,
  html.has-scroll-experience .landing-page .lp-service-grid > .lp-additional {
    opacity: clamp(
      .35,
      calc(1 - (var(--lp-service-enter-inverse, 0) * .65)),
      1
    );
    transform:
      translate3d(
        calc(var(--lp-service-start-x, 0px) * var(--lp-service-enter-inverse, 0)),
        calc(18px * var(--lp-service-enter-inverse, 0)),
        calc(-80px * var(--lp-service-enter-inverse, 0))
      )
      rotateX(calc(2deg * var(--lp-service-enter-inverse, 0)))
      rotateY(calc(var(--lp-service-start-yaw, 0deg) * var(--lp-service-enter-inverse, 0)))
      rotateZ(calc(var(--lp-service-start-roll, 0deg) * var(--lp-service-enter-inverse, 0)))
      scale(calc(1 - (var(--lp-service-enter-inverse, 0) * .035)));
    transform-style: preserve-3d;
    backface-visibility: hidden;
    transition: none;
  }

  .landing-page .lp-service-card > a,
  .landing-page .lp-service-grid > .lp-service-card--wide > a {
    position: relative;
    top: auto;
    display: grid;
    width: 100%;
    height: clamp(600px, 75svh, 720px);
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1.18fr) minmax(238px, .82fr);
    border-color: rgba(36, 40, 38, .1);
    background: var(--lp-white);
    box-shadow: 0 20px 58px rgba(36, 40, 38, .1);
    opacity: 1;
    transform: none;
    transition:
      border-color .25s ease,
      box-shadow .25s ease,
      transform .25s ease;
  }

  .landing-page .lp-service-card > a:hover,
  .landing-page .lp-service-card--wide > a:hover {
    border-color: rgba(104, 112, 75, .5);
    box-shadow: 0 28px 72px rgba(36, 40, 38, .15);
    transform: translate3d(0, -5px, 0);
  }

  .landing-page .lp-service-card__media,
  .landing-page .lp-service-grid > .lp-service-card--wide .lp-service-card__media {
    height: 100%;
    min-height: 0;
  }

  html.has-scroll-experience .landing-page .lp-service-card__media img {
    transform:
      translate3d(
        0,
        calc(3% - (var(--lp-service-progress, .5) * 6%)),
        0
      )
      scale(1.075);
    transition: none;
  }

  html.has-scroll-experience .landing-page .lp-service-card > a:hover .lp-service-card__media img,
  html.has-scroll-experience .landing-page .lp-service-card--wide > a:hover .lp-service-card__media img {
    transform:
      translate3d(
        0,
        calc(3% - (var(--lp-service-progress, .5) * 6%)),
        0
      )
      scale(1.095);
  }

  .landing-page .lp-service-card__body,
  .landing-page .lp-service-grid > .lp-service-card--wide .lp-service-card__body {
    min-height: 0;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    align-content: stretch;
    padding: clamp(29px, 3.2vw, 42px);
  }

  .landing-page .lp-service-card__body > strong {
    font-size: clamp(1.55rem, 2.15vw, 2.05rem);
  }

  .landing-page .lp-service-grid > .lp-additional {
    height: clamp(600px, 75svh, 720px);
    min-height: 0;
    align-content: start;
    margin: 0;
    padding: clamp(34px, 4vw, 52px);
    border-color: rgba(104, 112, 75, .2);
    background:
      radial-gradient(circle at 92% 8%, rgba(104, 112, 75, .14), transparent 31%),
      var(--lp-paper);
  }

  /* 03 — Der Ablauf baut sich in vier präzisen Takten auf */

  html.has-scroll-experience .landing-page .lp-process__grid li {
    --lp-step-reveal: clamp(
      0,
      calc((var(--lp-section-enter, 0) - var(--lp-step-delay, 0)) * 4.5),
      1
    );
    opacity: var(--lp-step-reveal);
    transform: translate3d(
      0,
      calc((1 - var(--lp-step-reveal)) * 48px),
      0
    );
    transition: none;
    will-change: opacity, transform;
  }

  html.has-scroll-experience .landing-page .lp-process__grid li:nth-child(1) {
    --lp-step-delay: .02;
  }

  html.has-scroll-experience .landing-page .lp-process__grid li:nth-child(2) {
    --lp-step-delay: .1;
  }

  html.has-scroll-experience .landing-page .lp-process__grid li:nth-child(3) {
    --lp-step-delay: .18;
  }

  html.has-scroll-experience .landing-page .lp-process__grid li:nth-child(4) {
    --lp-step-delay: .26;
  }

  /* 04 — Projekte: vertikale Strecke wird pixelgenau horizontal abgebildet */

  html.has-scroll-experience .landing-page .lp-projects {
    padding-block: 0 110px;
  }

  html.has-scroll-experience .landing-page .lp-project-story {
    height: var(--lp-project-story-height, 380svh);
    overflow-anchor: none;
  }

  html.has-scroll-experience .landing-page .lp-project-story__stage {
    position: sticky;
    top: var(--lp-header-height);
    display: flex;
    height: calc(100svh - var(--lp-header-height));
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    overflow-anchor: none;
    padding-block: clamp(42px, 6svh, 66px);
  }

  html.has-scroll-experience .landing-page .lp-project-story__stage > .lp-heading {
    flex: 0 0 auto;
    margin-bottom: clamp(27px, 4svh, 46px);
  }

  html.has-scroll-experience .landing-page .lp-project-grid {
    display: flex;
    width: max-content;
    max-width: none;
    height: clamp(370px, 55svh, 570px);
    flex: 0 0 auto;
    gap: 22px;
    overflow-anchor: none;
    transform: translate3d(var(--lp-project-x, 0), 0, 0);
    transition: none;
    will-change: transform;
  }

  html.has-scroll-experience .landing-page .lp-project-grid > .lp-project,
  html.has-scroll-experience .landing-page .lp-project-grid > .lp-project:nth-child(3),
  html.has-scroll-experience .landing-page .lp-project-grid > .lp-project:nth-child(4) {
    width: clamp(680px, 76vw, 1040px);
    height: 100%;
    flex: 0 0 auto;
    grid-column: auto;
    grid-row: auto;
    border-radius: 28px;
    opacity: clamp(
      .72,
      calc(.68 + (var(--lp-project-enter, 0) * .32)),
      1
    );
  }

  html.has-scroll-experience .landing-page .lp-project-grid > .lp-project img {
    transform:
      translate3d(
        0,
        calc(3% - (var(--lp-project-progress, 0) * 6%)),
        0
      )
      scale(1.07);
    transition: none;
    will-change: transform;
  }

  html.has-scroll-experience .landing-page .lp-project-grid > .lp-project:hover img {
    transform:
      translate3d(
        0,
        calc(3% - (var(--lp-project-progress, 0) * 6%)),
        0
      )
      scale(1.1);
  }

  html.has-scroll-experience .landing-page .lp-project-grid > .lp-project > span {
    right: 34px;
    bottom: 31px;
    left: 34px;
  }

  html.has-scroll-experience .landing-page .lp-project-grid > .lp-project strong {
    max-width: 680px;
    font-size: clamp(1.25rem, 2vw, 1.85rem);
  }

  html.has-scroll-experience .landing-page .lp-project-grid > .lp-project:focus-visible {
    outline-offset: -6px;
  }

  html.has-scroll-experience .landing-page .lp-projects__more {
    padding-top: 56px;
  }

  /* 05 — Abschluss: Karte bleibt stehen, Inhalt und Kartografie kommen entgegen */

  html.has-scroll-experience .landing-page .lp-approach {
    height: 195svh;
    padding: 0;
    overflow: visible;
  }

  html.has-scroll-experience .landing-page .lp-approach > .lp-shell {
    position: sticky;
    top: var(--lp-header-height);
    display: grid;
    height: calc(100svh - var(--lp-header-height));
    place-items: center;
  }

  html.has-scroll-experience .landing-page .lp-approach__card {
    width: 100%;
    min-height: 0;
    height: clamp(580px, calc(100svh - 128px), 720px);
    opacity: clamp(
      .55,
      calc(.48 + (var(--lp-approach-enter, 0) * .6) - (var(--lp-approach-exit, 0) * .12)),
      1
    );
    transform:
      translate3d(
        0,
        calc((1 - var(--lp-approach-enter, 0)) * 58px),
        0
      )
      scale(calc(.96 + (var(--lp-approach-enter, 0) * .04)));
    will-change: opacity, transform;
  }

  html.has-scroll-experience .landing-page .lp-approach__visual {
    min-height: 0;
  }

  html.has-scroll-experience .landing-page .lp-map-ring--one {
    transform:
      translate(-50%, -50%)
      rotate(calc(var(--lp-approach-progress, 0) * 42deg))
      scale(calc(.86 + (var(--lp-approach-progress, 0) * .14)));
    will-change: transform;
  }

  html.has-scroll-experience .landing-page .lp-map-ring--two {
    transform:
      translate(-50%, -50%)
      rotate(calc(var(--lp-approach-progress, 0) * -68deg))
      scale(calc(.92 + (var(--lp-approach-progress, 0) * .08)));
    will-change: transform;
  }

  html.has-scroll-experience .landing-page .lp-map-center {
    transform:
      translate(-50%, -50%)
      scale(calc(.84 + (var(--lp-approach-progress, 0) * .16)));
    will-change: transform;
  }

  html.has-scroll-experience .landing-page .lp-approach__copy > * {
    --lp-copy-reveal: clamp(
      .15,
      calc((var(--lp-approach-progress, 0) - var(--lp-copy-delay, 0)) * 4.4),
      1
    );
    opacity: var(--lp-copy-reveal);
    transform: translate3d(
      0,
      calc((1 - var(--lp-copy-reveal)) * 28px),
      0
    );
  }

  html.has-scroll-experience .landing-page .lp-approach__copy > :nth-child(1) {
    --lp-copy-delay: 0;
  }

  html.has-scroll-experience .landing-page .lp-approach__copy > :nth-child(2) {
    --lp-copy-delay: .06;
  }

  html.has-scroll-experience .landing-page .lp-approach__copy > :nth-child(3) {
    --lp-copy-delay: .13;
  }

  html.has-scroll-experience .landing-page .lp-approach__copy > :nth-child(4) {
    --lp-copy-delay: .2;
  }

  html.has-scroll-experience .landing-page .lp-approach__copy > :nth-child(5) {
    --lp-copy-delay: .27;
  }

  /* 06 — finale Einladung */

  html.has-scroll-experience .landing-page .lp-final.is-scroll-active {
    opacity: 1;
    transform: none;
  }

  html.has-scroll-experience .landing-page .lp-final__inner {
    opacity: clamp(.35, var(--lp-section-enter, 0), 1);
    transform:
      translate3d(
        0,
        calc((1 - var(--lp-section-enter, 0)) * 54px),
        0
      )
      scale(calc(.97 + (var(--lp-section-enter, 0) * .03)));
    will-change: opacity, transform;
  }

  html.has-scroll-experience .landing-page .lp-final__inner::after {
    transform:
      translate3d(
        calc(var(--lp-section-enter, 0) * -34px),
        calc(var(--lp-section-enter, 0) * 28px),
        0
      )
      scale(calc(.8 + (var(--lp-section-enter, 0) * .2)));
  }
}

@media (forced-colors: active) {
  .landing-page .lp-matrix-text__source {
    opacity: 1 !important;
  }

  .landing-page .lp-matrix-text__overlay {
    display: none !important;
  }
}

/* Kleine Viewports bleiben im normalen Flow; nur die Typografie scrubbt mit. */

@media (max-width: 1000px), (max-height: 679px) {
  .landing-page .lp-hero__stage {
    height: auto;
  }

  html.has-scroll-experience .landing-page [data-scroll-reveal].is-scroll-active {
    opacity: clamp(.45, var(--lp-section-enter, 0), 1);
    transform: translate3d(
      0,
      calc((1 - var(--lp-section-enter, 0)) * 22px),
      0
    );
  }

  /*
   * Mobile Matrix-Variante: dieselbe scrollgenaue Entschlüsselung mit
   * kleinerem Bewegungsradius und flacherer Perspektive für ruhiges Touch-
   * Scrollen auf kompakten Displays.
   */

  html.has-scroll-experience .landing-page .lp-matrix-text__overlay {
    perspective: 620px;
  }

  html.has-scroll-experience .landing-page .lp-matrix-text__cell {
    transform:
      translate3d(
        calc(
          var(--lp-matrix-drift, 1)
          * (1 - var(--lp-matrix-char-progress))
          * .08em
        ),
        calc((1 - var(--lp-matrix-char-progress)) * .34em),
        0
      )
      rotateX(calc((1 - var(--lp-matrix-char-progress)) * -42deg))
      rotateZ(
        calc(
          var(--lp-matrix-drift, 1)
          * (1 - var(--lp-matrix-char-progress))
          * 1.25deg
        )
      )
      scale(calc(.82 + (var(--lp-matrix-char-progress) * .18)));
  }

  html.has-scroll-experience .landing-page .lp-matrix-text__cell.is-matrix-static {
    transform: none;
  }
}

/*
 * Mobile Leistungen: Jede Karte läuft einzeln vom abwechselnden Seitenrand
 * ein. Die Geometrie bleibt im normalen Dokumentfluss; nur der äußere
 * Karten-Layer wird direkt über den Scrollfortschritt transformiert.
 */

@media (max-width: 1000px) and (prefers-reduced-motion: no-preference) {
  .landing-page .lp-services {
    overflow-x: hidden;
    overflow-x: clip;
  }

  .landing-page .lp-service-grid {
    perspective: 1000px;
    perspective-origin: 50% 45%;
  }

  .landing-page .lp-service-grid > :nth-child(odd) {
    --lp-service-start-x: -52vw;
    --lp-service-start-yaw: 16deg;
    --lp-service-start-roll: -.5deg;
    transform-origin: 100% 50%;
  }

  .landing-page .lp-service-grid > :nth-child(even) {
    --lp-service-start-x: 52vw;
    --lp-service-start-yaw: -16deg;
    --lp-service-start-roll: .5deg;
    transform-origin: 0 50%;
  }

  html.has-scroll-experience .landing-page .lp-service-card,
  html.has-scroll-experience .landing-page .lp-service-grid > .lp-additional {
    opacity: clamp(
      .32,
      calc(1 - (var(--lp-service-enter-inverse, 0) * .68)),
      1
    );
    transform:
      translate3d(
        calc(var(--lp-service-start-x, 0px) * var(--lp-service-enter-inverse, 0)),
        calc(14px * var(--lp-service-enter-inverse, 0)),
        calc(-56px * var(--lp-service-enter-inverse, 0))
      )
      rotateX(calc(2deg * var(--lp-service-enter-inverse, 0)))
      rotateY(calc(var(--lp-service-start-yaw, 0deg) * var(--lp-service-enter-inverse, 0)))
      rotateZ(calc(var(--lp-service-start-roll, 0deg) * var(--lp-service-enter-inverse, 0)))
      scale(calc(1 - (var(--lp-service-enter-inverse, 0) * .035)));
    backface-visibility: hidden;
    transform-style: preserve-3d;
    transition: none;
  }

  html.has-scroll-experience .landing-page .lp-service-card__media img {
    transform:
      translate3d(
        0,
        calc(2% - (var(--lp-service-progress, .5) * 4%)),
        0
      )
      scale(1.06);
    transition: none;
  }
}

@media (max-width: 760px) {
  .landing-page .lp-service-grid > :nth-child(odd) {
    --lp-service-start-x: -92vw;
  }

  .landing-page .lp-service-grid > :nth-child(even) {
    --lp-service-start-x: 92vw;
  }

  .landing-page .lp-service-grid > .lp-service-card--wide > a {
    height: auto;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
  }

  .landing-page .lp-service-grid > .lp-service-card--wide .lp-service-card__media {
    height: 246px;
    min-height: 0;
  }

  .landing-page .lp-service-grid > .lp-service-card--wide .lp-service-card__body {
    min-height: 222px;
    padding: 26px 24px 24px;
  }
}

/* Bewegung reduzieren heißt: kein Pinning, kein Parallax, keine versteckten Inhalte. */

@media (prefers-reduced-motion: reduce) {
  .landing-page::before {
    display: none !important;
  }

  .landing-page .lp-hero,
  .landing-page .lp-project-story,
  .landing-page .lp-approach {
    height: auto !important;
    min-height: initial;
    overflow: visible;
  }

  .landing-page .lp-hero__stage,
  .landing-page .lp-project-story__stage,
  .landing-page .lp-approach > .lp-shell,
  .landing-page .lp-services__story > .lp-heading,
  .landing-page .lp-service-card > a {
    position: relative !important;
    top: auto !important;
  }

  .landing-page [data-scroll-reveal],
  .landing-page .lp-hero__content,
  .landing-page .lp-hero__line,
  .landing-page .lp-hero__media img,
  .landing-page .lp-service-card > a,
  .landing-page .lp-service-card__media img,
  .landing-page .lp-process__grid li,
  .landing-page .lp-project-grid,
  .landing-page .lp-project,
  .landing-page .lp-project img,
  .landing-page .lp-approach__card,
  .landing-page .lp-approach__copy > *,
  .landing-page .lp-map-ring,
  .landing-page .lp-map-center,
  .landing-page .lp-final,
  .landing-page .lp-final__inner,
  .landing-page .lp-final__inner::after {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }

  .landing-page .lp-project-grid {
    width: auto;
    height: auto;
  }
}

@media print {
  .landing-page::before,
  .landing-page .lp-scroll-cue {
    display: none !important;
  }

  .landing-page .lp-hero,
  .landing-page .lp-project-story,
  .landing-page .lp-approach {
    height: auto !important;
  }

  .landing-page .lp-hero__stage,
  .landing-page .lp-project-story__stage,
  .landing-page .lp-approach > .lp-shell,
  .landing-page .lp-services__story > .lp-heading,
  .landing-page .lp-service-card > a {
    position: static !important;
  }

  .landing-page * {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }

  .landing-page .lp-matrix-text__source {
    opacity: 1 !important;
  }

  .landing-page .lp-matrix-text__overlay {
    display: none !important;
  }
}