/* Homepage "Wie es funktioniert" — inset/pressed well + scroll-linked horizontal card movement.
   The PAGE scrolls normally. The card track is moved via its NATIVE horizontal scroll (scrollLeft)
   in JS, so the slider layout is untouched. Scoped to .tb-hpin (homepage only). */

/* The section is just a transparent wrapper. flow-root contains the inner block's margins so they
   don't collapse into / merge with neighbouring sections — the gap becomes deterministic. */
.tb-hpin {
  display: flow-root;
}
/* The ACTUAL block = .isolate (heading rich-text + cards container as ONE unit). All visual
   treatment and the top/bottom spacing live here. */
.tb-hpin > .isolate {
  background: #f1f1ef;
  box-shadow: inset 0 12px 28px rgba(0, 0, 0, 0.10), inset 0 -12px 28px rgba(0, 0, 0, 0.06);
  margin: 8rem 0;
}
/* heading stays put — only the cards row scrolls */
.tb-hpin .rich-text {
  background: transparent !important;
  transform: none !important;
}
/* the only gap is the 8rem margin on both sides — neutralize the facing section padding of the
   immediate neighbour above (padding-bottom) and below (padding-top) so nothing adds unevenly */
:where(section, div):has(+ .tb-hpin) [class*="-padding"]:not(.has-padding) {
  padding-bottom: 0 !important;
}
.tb-hpin + :where(section, div) [class*="-padding"]:not(.has-padding) {
  padding-top: 0 !important;
}
/* if a CTA block follows directly: drop the block's bottom gap AND the CTA's top gap -> flush */
.tb-hpin:has(+ .cta-brand) > .isolate {
  margin-bottom: 0 !important;
}
.tb-hpin + .cta-brand {
  margin-top: 0 !important;
}
/* remove the left/right edge fade on this block (overrides base + tablet/desktop masks) */
.tb-hpin .process-cards__slider,
.tb-hpin .process-cards__slider.slider--tablet.grid--peek {
  -webkit-mask-image: none !important;
  mask-image: none !important;
  -webkit-mask: none !important;
  mask: none !important;
}
/* full-width track so cards don't hard-cut inside the narrow 120rem column (this was the fix
   for the clipping — card width itself is left untouched at its original size) */
.tb-hpin .process-cards__container {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* start the first card at the content column's left edge (no big centered gap) */
@media (min-width: 990px) {
  .tb-hpin .process-cards__slider .grid__item:first-child {
    margin-left: max(2rem, calc(50vw - 60rem)) !important;
  }
}
/* hide slider nav buttons on this block at every width
   (mobile/tablet swipe the native slider, desktop uses JS scroll) */
.tb-hpin .slider-buttons {
  display: none !important;
}
/* on hover the card lifts (translateY -4px); keep the timeline dot fixed by countering the lift */
.tb-hpin .process-cards__dot {
  transition: transform 0.3s ease;
}
.tb-hpin .process-cards__item:hover .process-cards__dot {
  transform: translate(-50%, -50%) translateY(4px) !important;
}

@media (min-width: 990px) {
  /* desktop JS-scroll layout: extra room below the dashed line, line raised to match dots */
  .tb-hpin .process-cards__slider {
    padding-bottom: 15rem !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
    scroll-behavior: auto !important;
    transform: translateX(var(--tb-hx, 0px));
    will-change: transform;
  }
  .tb-hpin .process-cards__slider::before {
    bottom: 6rem !important;
  }
  /* clip the flying cards at the block edges (no page scrollbar) */
  .tb-hpin .process-cards__container {
    overflow: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tb-hpin .process-cards__slider {
    transform: none !important;
  }
}