/* Keep the profile image attached to the complete detail sequence on phones
   and tablets. The visual uses a full-height track instead of CSS sticky,
   because mobile Safari can stop sticky descendants when a page clips
   horizontal overflow. JavaScript only moves the stage inside this track. */
#aufbau {
  content-visibility: visible !important;
  contain: none !important;
}

@media (max-width: 880px) {
  #aufbau,
  #aufbau > .container,
  #aufbau .scrolly__grid {
    overflow: visible;
  }

  #aufbau .scrolly__grid {
    --mobile-scrolly-stage-height: min(42vh, 360px);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    align-items: stretch;
    gap: 0;
    position: relative;
  }

  #aufbau .scrolly__stage-wrap {
    grid-area: 1 / 1;
    position: relative;
    top: auto;
    z-index: 10;
    height: auto;
    min-height: 100%;
    margin-bottom: 0;
    padding: 0;
    display: block;
    pointer-events: none;
  }

  #aufbau .scrolly__stage {
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: var(--mobile-scrolly-stage-height);
    max-height: var(--mobile-scrolly-stage-height);
    transform: translate3d(0, var(--mobile-scrolly-stage-y, 0px), 0);
    will-change: transform;
    isolation: isolate;
  }

  /* The moving stage already makes the scroll interaction clear. Keeping the
     hint out of the mobile layout prevents it from travelling across the
     viewport while the stage is positioned and eliminates the related CLS. */
  #aufbau .scrolly__hint {
    display: none !important;
  }

  #aufbau .scrolly__steps {
    grid-area: 1 / 1;
    position: relative;
    z-index: 11;
    padding: calc(var(--mobile-scrolly-stage-height) + clamp(28px, 8vh, 64px)) 0 18vh;
  }

  #aufbau .scrolly__step {
    min-height: max(70vh, 500px);
  }
}