/* Custom scroll-driven hero storytelling (replaces the Webflow click-interaction). */

/* Pin/unpin is handled entirely by hero-scroll.js (position:fixed while scrolling through
   the section, position:absolute at rest before/after) instead of position:sticky - real
   iOS Safari did not stick this element at all in testing, even though every other engine
   (Chromium, Playwright's WebKit) handled the sticky version fine. `left`/`width` need to be
   explicit here because fixed/absolute (unlike sticky) take the element out of flow. */
.hero-startseite {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

/* More scroll distance per slide (was 100vh/slide) so a normal scroll/swipe doesn't blow
   through all 4 slides in an instant - the JS reads this height dynamically, no JS change needed. */
#hero-scroll-section {
  height: 700vh;
}

/* "Vorteile" section - light editorial zigzag layout (chosen after A/B/C/D comparison).
   Lives inside the existing .section-2 > .div-block-117 wrapper, so it automatically gets
   the same 30px eyebrow/heading/intro spacing as every other section on the page. */
.vorteile-b-list {
  display: flex;
  flex-flow: column;
  gap: 90px;
}

.vorteile-b-row {
  display: flex;
  align-items: center;
  gap: 60px;
}

.vorteile-b-row-reverse {
  flex-direction: row-reverse;
}

.vorteile-b-media,
.vorteile-b-text {
  flex: 1 1 0;
  min-width: 0;
}

.vorteile-b-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 20px;
  box-shadow: 0 20px 40px -12px #1a1a1a26;
}

.vorteile-b-text {
  position: relative;
}

.vorteile-b-number {
  font-size: 5.5rem;
  font-weight: 800;
  line-height: 1;
  color: var(--tertiär);
  opacity: 0.18;
  margin-bottom: -1.6rem;
}

.vorteile-b-text h3 {
  position: relative;
  color: var(--black);
  margin-bottom: 14px;
}

.vorteile-b-text p {
  color: var(--black);
  opacity: 0.75;
}

@media screen and (max-width: 900px) {
  .vorteile-b-list {
    gap: 50px;
  }

  .vorteile-b-row,
  .vorteile-b-row-reverse {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }

  .vorteile-b-number {
    font-size: 3.5rem;
  }
}

.hero-bg {
  opacity: 0;
  will-change: opacity;
}

.hero-bg.is-active {
  opacity: 1;
}

.hero-bg-scrim {
  display: none;
}

.hero-text {
  opacity: 1;
}

.hero-text:not(.is-active) {
  pointer-events: none;
}

/* Exiting text: quick, near-simultaneous fade so it's fully gone before the next slide's text starts appearing. */
.hero-text .div-block-116 > * {
  opacity: 0;
  transform: translateY(-14px);
  transition: opacity 0.2s ease-in, transform 0.2s ease-in;
  transition-delay: 0s;
}

/* Entering text: staggered rise-in, delayed until after the exit above has fully finished (0.2s + 0.06s max stagger). */
.hero-text.is-active .div-block-116 > * {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s cubic-bezier(0.19, 1, 0.22, 1), transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}

.hero-text.is-active .div-block-116 > *:nth-child(1) { transition-delay: 0.3s; }
.hero-text.is-active .div-block-116 > *:nth-child(2) { transition-delay: 0.4s; }
.hero-text.is-active .div-block-116 > *:nth-child(3) { transition-delay: 0.5s; }
.hero-text.is-active .div-block-116 > *:nth-child(4) { transition-delay: 0.6s; }

/* Pre-entry state (never yet shown): no transition, just hidden, so it doesn't animate in on first paint. */
.hero-text:not(.was-active):not(.is-active) .div-block-116 > * {
  transition: none;
  transform: translateY(14px);
}

.hero-step {
  background-color: var(--grey);
  position: relative;
  overflow: hidden;
}

.hero-step-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background-color: var(--tertiär);
  transition: width 0.08s linear;
}

@media screen and (max-width: 767px) {
  .div-block-116 {
    max-width: 92%;
  }

  .button.seite {
    width: auto;
    padding: 12px 24px;
  }
}

/* Mobile nav: match desktop's white/blue theme instead of the leftover purple-gradient hamburger
   and transparent glass panel, and remove the sticky "settling" scroll before the hero starts. */
@media screen and (max-width: 991px) {
  .navigation-wrap {
    position: fixed;
  }

  .menu-mob {
    background-color: var(--primär);
    background-image: none;
  }

  .menu-mob.w--open {
    background-color: var(--primär);
  }

  .mobile-nav {
    background-color: #fff;
  }

  .div-block-115 {
    background-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .navigation-mob {
    background-color: #fff;
  }

  .text-block-37,
  .dropdown-link-4,
  .mobile-nav-link,
  .icon {
    color: var(--black);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-text .div-block-116 > * {
    transition-duration: 0.01s;
    transform: none;
  }
}

/* No overflow-x rule on html/body on purpose: real Safari (unlike Chromium and even
   Playwright's own WebKit build) breaks position:sticky entirely as soon as ANY
   ancestor has overflow set to anything but `visible` - hidden, clip, scroll, all of
   them. The grid fixes below already remove the actual causes of horizontal overflow,
   so no safety-net overflow-x rule is needed (or safe to have) here. */

/* "Für Ihre Praxis" and "Prozess" card grids: stack instead of squeezing 3-4 fixed-width
   columns into a narrow viewport (the cause of horizontal scrolling on mobile). */
@media screen and (max-width: 900px) {
  .div-block-118,
  .div-block-4er,
  .div-block-117-copy {
    grid-template-columns: 1fr;
  }

  .leistungs_card,
  .prozess_card {
    min-height: 0;
  }

  .button-2 {
    width: auto;
    padding: 12px 24px;
  }
}