/* ==========================================================================
   Product — Identify & order spare parts
   ========================================================================== */

/* Whole page sits on a soft white → lavender horizontal wash */
.sp { background: linear-gradient(90deg, #fff 15%, #f5f5fe 100%); overflow: clip; }

.br-d, .br-t { display: inline; }
.br-p { display: none; }

/* ---------- Lottie crop wrapper ----------
   .sp-art is sized to the *visible card bounds* inside the animation.
   The .lottie inside is scaled/offset so its padding bleeds outside. */
.sp-art { position: relative; display: flow-root; width: 100%; }
.sp-art > .lottie {
  width: calc(100% * var(--lw) / var(--cw));
  margin: calc(-100% * var(--y0) / var(--cw)) 0 calc(-100% * (var(--lh) - var(--y1)) / var(--cw)) calc(-100% * var(--x0) / var(--cw));
}

/* ---------- Hero ---------- */
.sp-hero { position: relative; padding-top: 45px; text-align: center; }
.sp-hero__inner { display: flex; flex-direction: column; align-items: center; }
.sp-hero__title { max-width: 1000px; margin-top: 22px; }
.sp-hero__lead { max-width: 840px; margin-top: 20px; }
.sp-hero__btn { margin-top: 19px; }
.sp-hero__scroller { margin-top: 40px; }
/* The process strip spans the full container (1344px visible at 1440 = 1.22× the 1103px it
   used to be; its 8-unit captions read at ~10px). .sp clips the canvas padding. */
.sp-art--hero { width: 100%; }
/* desktop: 6 % larger so its cards read closer to the size of the step illustrations below */
@media (min-width: 1200px) { .sp-art--hero { width: 106%; margin-left: -3%; } }

/* ---------- Steps ---------- */
.sp-steps { padding: 159px 0 95px; }
.sp-steps__list { max-width: 1056px; margin: 0 auto; }
.sp-step {
  display: grid;
  grid-template-columns: 488px 488px;
  column-gap: 80px;
  align-items: center;
}
.sp-step:nth-child(2) { margin-top: 112px; }
.sp-step:nth-child(3) { margin-top: 144px; }
.sp-step:nth-child(4) { margin-top: 158px; }
.sp-step__text { grid-column: 1; grid-row: 1; }
.sp-step__title { max-width: 484px; }
.sp-step__body { max-width: 472px; }
.sp-step__art { grid-column: 2; grid-row: 1; justify-self: center; }
.sp-step--flip .sp-step__text { grid-column: 2; padding-left: 16px; }
.sp-step--flip .sp-step__art { grid-column: 1; }

/* Visible card widths: 364px = 1.3× the 280-unit cards (~10px card text); the dashboard row
   gives the art the wider column (600px = 1.3× the former 462px). */
.sp-art--card { width: 364px; }
.sp-art--dash { width: 600px; }
.sp-step:nth-child(4) { grid-template-columns: 600px 400px; column-gap: 56px; }

.sp-num {
  display: grid;
  place-items: center;
  width: 51px;
  height: 51px;
  border-radius: 15px;
  background: var(--blue);
  color: #fff;
  font-size: 28px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 10px 24px -12px rgba(53, 90, 240, 0.7);
}
.sp-num[data-reveal="scale"] { transform: scale(0.6); transition: opacity 0.7s var(--ease-out), transform 0.9s var(--ease-spring); }
.sp-num[data-reveal].is-in { transform: none; }

.sp-step__title {
  margin-top: 15px;
  font-size: 48px;
  line-height: 56px;
  font-weight: 700;
  letter-spacing: -0.038em;
}
.sp-step__body { margin-top: 23px; font-size: 20px; line-height: 32px; }
.sp-step:first-child .sp-step__body { margin-top: 18px; }
/* Per-row optical nudges (measured against the design); no layout impact */
.sp-step__text, .sp-step__art { position: relative; top: var(--nudge, 0px); }

@media (min-width: 1200px) {
  .sp-step:nth-child(1) .sp-step__art { --nudge: 4px; }
  .sp-step:nth-child(2) .sp-step__text { --nudge: -6px; }
  .sp-step:nth-child(2) .sp-step__art { --nudge: 2px; }
  .sp-step:nth-child(3) .sp-step__text { --nudge: -13px; }
  .sp-step:nth-child(3) .sp-step__art { --nudge: 8px; }
  .sp-step:nth-child(4) .sp-step__text { --nudge: -22px; }
  .sp-step:nth-child(4) .sp-step__art { --nudge: -14px; }
}

.sp-step__art { margin: 0; }

/* ---------- CTA band (page copy differs from the shared band) ---------- */
.sp-cta.cta-band { padding: 64px 0 60px; }
.sp-cta.cta-band .eyebrow { margin: 0 auto 22px; }
.sp-cta.cta-band h2 { max-width: none; }
.sp-cta.cta-band p.lead { max-width: 880px; margin: 22px auto 19px; }

/* ==========================================================================
   Tablet
   ========================================================================== */
@media (max-width: 1199px) {
  .br-d { display: none; }

  .sp-hero { padding-top: 40px; }
  .sp-hero__title { margin-top: 13px; line-height: 48px; }
  .sp-hero__lead { max-width: none; margin-top: 17px; font-size: 16px; line-height: 22px; }
  .sp-hero__btn { align-self: stretch; margin-top: 16px; }
  /* Below 1080px the process strip would shrink under ~0.9× — it keeps a 1000px minimum and
     becomes the swipeable strip (as on phones; spare-parts.js auto-follows the animation). */
  .sp-hero__scroller {
    margin: 10px calc(-1 * var(--gutter)) -30px;
    padding: 30px var(--gutter);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
  }
  .sp-hero__scroller::-webkit-scrollbar { display: none; }
  .sp-art--hero { width: max(100%, 1000px); margin: 0; }
  /* the canvas' transparent right padding must not add a few px of scroll once the strip fits */
  .sp-art--hero { overflow: clip; overflow-clip-margin: 24px; }

  .sp-steps { padding: 66px 0 49px; }
  .sp-steps__list { max-width: none; }
  /* Art gets the wider column (47/53); the dashboard row stacks under its copy */
  .sp-step { grid-template-columns: minmax(0, 47fr) minmax(0, 53fr); column-gap: 20px; }
  .sp-step--flip { grid-template-columns: minmax(0, 53fr) minmax(0, 47fr); }
  .sp-step:nth-child(n + 2) { margin-top: 88px; }
  .sp-step:nth-child(4) { display: block; margin-top: 96px; }
  .sp-step:nth-child(4) .sp-step__title, .sp-step:nth-child(4) .sp-step__body { max-width: 600px; }
  /* justify-self must be stretch: Chromium honours start/end on block-level boxes too */
  .sp-step:nth-child(4) .sp-step__art { justify-self: stretch; margin-top: 28px; }
  .sp-step__title, .sp-step__body { max-width: none; }
  .sp-step--flip .sp-step__text { padding-left: 0; }
  .sp-step__art { justify-self: end; }

  .sp-step--flip .sp-step__art { justify-self: start; }
  /* cards fill their column (354px at 768 = 1.26×), capped at 440px (1.57×) on wide tablets;
     the stacked dashboard spans the content width up to 760px */
  .sp-step__art:has(.sp-art--card) { width: min(100%, 440px); }
  .sp-art--card { width: 100%; }
  .sp-art--dash { width: min(100%, 760px); margin-inline: auto; }

  .sp-num { width: 40px; height: 40px; border-radius: 12px; font-size: 22px; }
  .sp-step__title { margin-top: 15px; margin-right: -12px; font-size: 35px; line-height: 44px; }
  .sp-step__body, .sp-step:first-child .sp-step__body { margin-top: 21px; font-size: 16px; line-height: 22px; }
  .sp-step:nth-child(3) .sp-step__body { margin-top: 18px; }
  .sp-step:nth-child(1) .sp-step__text { --nudge: -1px; }
  .sp-step:nth-child(1) .sp-step__art { --nudge: 5px; }
  .sp-step:nth-child(2) .sp-step__text { --nudge: -3px; }
  .sp-step:nth-child(2) .sp-step__art { --nudge: 6px; }
  .sp-step:nth-child(3) .sp-step__text { --nudge: -9px; }
  .sp-step:nth-child(3) .sp-step__art { --nudge: 14px; }
  .sp-step:nth-child(4) .sp-step__text { --nudge: -15px; }
  .sp-step:nth-child(4) .sp-step__art { --nudge: -6px; }

  .sp-cta.cta-band { padding: 39px 0 40px; }
  .sp-cta.cta-band .eyebrow { margin-bottom: 12px; }
  .sp-cta.cta-band h2 { font-size: 40px; line-height: 48px; }
  .sp-cta.cta-band p.lead { margin: 16px auto 15px; font-size: 16px; line-height: 22px; }
  .sp-cta .btn-row { flex-direction: column; gap: 8px; }
  .sp-cta .btn { width: 100%; }
}

/* ==========================================================================
   Phone
   ========================================================================== */
@media (max-width: 767px) {
  .br-t { display: none; }
  .br-p { display: inline; }

  .sp-hero { padding-top: 40px; }
  .sp-hero__title { margin-top: 14px; font-size: 40px; line-height: 44px; }
  .sp-hero__lead { margin-top: 18px; }
  .sp-hero__btn { margin-top: 16px; }

  /* The wide process illustration keeps its desktop scale and becomes a swipeable strip */
  .sp-hero__scroller { margin: 18px calc(-1 * var(--gutter)) -30px; padding: 30px 32px; }
  /* 1.2× the canvas (was 1103px = 1×) so the captions stay legible while swiping */
  .sp-art--hero { width: 1324px; margin: 0; }

  .sp-steps { padding: 31px 0 23px; }
  .sp-step { grid-template-columns: 1fr; }
  .sp-step:nth-child(n + 2) { margin-top: 66px; }
  .sp-step__text, .sp-step--flip .sp-step__text { grid-column: 1; grid-row: 1; }
  .sp-step__art, .sp-step--flip .sp-step__art, .sp-step__art:has(.sp-art--card) { grid-column: 1; grid-row: 2; justify-self: stretch; width: auto; margin-top: 38px; }
  /* visible cards span the column plus 8px of each gutter (344px at 360) */
  .sp-art--card, .sp-art--dash { width: calc(100% + 16px); margin-left: -8px; }
  .sp-step:nth-child(1) .sp-step__art { margin-top: 34px; }
  .sp-step:nth-child(2) .sp-step__art { margin-top: 28px; }
  .sp-step:nth-child(3) .sp-step__art { margin-top: 29px; }
  .sp-step:nth-child(4) { margin-top: 33px; }
  .sp-step:nth-child(4) .sp-step__art { margin-top: 25px; }
  .sp-step .sp-step__text, .sp-step .sp-step__art { --nudge: 0px; }

  .sp-num { width: 32px; height: 32px; border-radius: 9px; font-size: 18px; }
  .sp-step__title { margin-top: 14px; font-size: 26px; line-height: 30px; }
  .sp-step__body, .sp-step:first-child .sp-step__body, .sp-step:nth-child(3) .sp-step__body { margin-top: 17px; }

  .sp-cta.cta-band { padding: 40px 0 40px; }
  .sp-cta.cta-band .eyebrow { margin-bottom: 14px; }
  .sp-cta.cta-band h2 { font-size: 40px; line-height: 44px; }
  .sp-cta.cta-band p.lead { margin: 18px auto 16px; }
}

/* ==========================================================================
   German (html[lang="de"]) — wrap tuning for the longer copy. EN is untouched.
   (The EN manual breaks .br-d/.br-t/.br-p are not used on the DE page.)
   ========================================================================== */
html[lang="de"] .nobr { white-space: nowrap; }
/* Step titles sit inside <li>, which inherits the shared DE running-text hyphenation —
   split-line headings must never hyphenate. */
html[lang="de"] .sp-step__title { -webkit-hyphens: manual; hyphens: manual; }
/* Centred leads: even line lengths instead of a one-word last line */
html[lang="de"] .sp-hero__lead,
html[lang="de"] .sp-cta.cta-band p.lead { text-wrap: balance; }
/* "Ersatzteilidentifikation" (528px at 48px) is wider than the 484px text column —
   let step 1's title run into the empty column gap so it stays one word + "mit KI". */
html[lang="de"] .sp-step:nth-child(1) .sp-step__title { max-width: 540px; margin-right: -56px; }
@media (max-width: 1199px) {
  /* narrower tablet text column: 29px keeps "Ersatzteilidentifikation" (≈320px) clear of the art at 768 */
  html[lang="de"] .sp-step:nth-child(1) .sp-step__title { max-width: none; margin-right: -20px; font-size: 29px; line-height: 38px; }
}
@media (max-width: 767px) {
  html[lang="de"] .sp-step:nth-child(1) .sp-step__title { margin-right: -12px; font-size: 26px; line-height: 30px; }
}