/* Keep the profile image attached to the complete detail sequence on phones
   and tablets. The image now follows the sequence with native CSS sticky.
   This lets Safari's compositor move the visual without a JavaScript layout
   read and transform write on every scroll frame. */
#aufbau {
  content-visibility: visible !important;
  contain: none !important;
}

@media (max-width: 880px) {
  html,
  body {
    overflow-x: clip !important;
  }

  #aufbau,
  #aufbau > .container,
  #aufbau .scrolly__grid {
    overflow: visible;
  }

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

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

  #aufbau .scrolly__stage {
    position: sticky;
    top: calc(var(--nav-h) + 14px);
    inset-inline: auto;
    bottom: auto;
    width: 100%;
    height: var(--mobile-scrolly-stage-height);
    max-height: var(--mobile-scrolly-stage-height);
    transform: none !important;
    will-change: auto;
    isolation: isolate;
    background: var(--bg-soft);
    -webkit-mask-image: none;
    mask-image: none;
  }

  #aufbau .scrolly__img {
    transition-duration: .42s;
    transition-timing-function: ease-out;
    backface-visibility: hidden;
  }

  /* The fixed visual already makes the scroll interaction clear. Keeping the
     hint out of the mobile layout prevents unnecessary movement and CLS. */
  #aufbau .scrolly__hint {
    display: none !important;
  }

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

  #aufbau .scrolly__step {
    min-height: max(70vh, 500px);
    opacity: 0 !important;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(12px);
    transition: opacity .18s ease, transform .18s ease;
  }

  /* The steps keep their height because they form the scroll track. Only the
     current description remains visible, while the opaque image stage is the
     higher layer. The copy can therefore be read below the image and then
     disappears cleanly behind it as the visitor continues scrolling. */
  #aufbau .scrolly__step.active {
    z-index: 12;
    opacity: 1 !important;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }
}