/* Stable large-viewport stage: browser chrome reveals footage, not a white edge.
   The white area belongs only to the deliberate final reef composition. */
.mobile-arrival{display:none}
@media(max-width:720px), (pointer:coarse) and (max-width:1024px) and (max-height:500px){
 html body.editorial-site #main #start .stage{
  height:100vh!important;height:var(--mobile-viewport-height,100lvh)!important;min-height:0!important;background:#fff!important;
 }
 html body.editorial-site #main #start .scene{
  top:var(--mobile-scene-top,0px)!important;left:var(--mobile-scene-left,0px)!important;
  width:var(--mobile-scene-width,100%)!important;height:var(--mobile-scene-height,100%)!important;
  right:auto!important;bottom:auto!important;background:#102e3b!important;
 }
 html body.editorial-site #main #start .hero-copy{
  bottom:calc(116px + var(--opening-chrome-inset,max(0px,100lvh - 100dvh)))!important;
  transition:opacity .45s ease-out,visibility 0s linear!important;
 }
 html body.editorial-site #main #start .hero-copy::before{
  bottom:calc(-116px - var(--opening-chrome-inset,max(0px,100lvh - 100dvh)))!important;
  transition:none!important;
 }
 html body.editorial-site #main #start .film-toolbar{
  bottom:calc(22px + var(--opening-chrome-inset,max(0px,100lvh - 100dvh)))!important;
  transition:none!important;
 }
 html body.editorial-site #main #start .settle-copy{
  display:none!important;
 }
 html body.editorial-site #main>section.mobile-arrival#cinema-arrival{
  --arrival-copy-top:calc(clamp(40px,8.5lvh,88px) + (100vw - 48px)*9/16 + 28px);
  position:relative!important;z-index:3!important;display:block!important;
  margin-top:calc(-100lvh - var(--arrival-runway,66.5lvh))!important;margin-bottom:0!important;
  box-sizing:border-box!important;height:calc(var(--arrival-runway,66.5lvh) + var(--arrival-copy-top) + var(--arrival-copy-height,230px) + 48px)!important;min-height:0!important;
  padding:var(--arrival-copy-top) 24px 48px!important;
  background:transparent!important;color:#102e3b!important;border:0!important;border-radius:0!important;
  pointer-events:none;
  opacity:1!important;transform:none!important;transition:none!important;
 }
 html body.editorial-site #main #cinema-arrival .mobile-arrival-copy{
  position:sticky!important;top:var(--arrival-copy-top)!important;
  max-width:400px!important;margin:0 auto!important;padding:0!important;border:0!important;text-align:center;
 }
 html body.editorial-site #main>section.mobile-arrival#cinema-arrival h2{
  max-width:none!important;margin:0!important;font-size:clamp(32px,9vw,40px)!important;
  line-height:1.08!important;font-weight:400!important;letter-spacing:-.055em!important;color:#102e3b!important;
 }
 html body.editorial-site #main #cinema-arrival p{
  margin:18px auto 0!important;font-size:16px!important;line-height:1.5!important;max-width:34ch!important;color:#62747b!important;
 }
 html body.editorial-site #main #cinema-arrival .story-line{color:inherit!important;text-wrap:balance}
 html body.editorial-site #main #cinema-arrival .story-line+.story-line{margin-top:12px!important}
 html body.editorial-site #main #cinema-arrival .mobile-arrival-copy>[data-arrival-reveal]{opacity:1!important;transform:none!important;transition:none!important}
 html body.editorial-site #main #cinema-arrival .arrival-line{
  display:block!important;white-space:nowrap;margin:0!important;color:inherit!important;opacity:1;transform:none;
  transition:opacity .65s ease var(--arrival-delay),transform .75s cubic-bezier(.22,.7,.25,1) var(--arrival-delay);
 }
 html body.editorial-site #main #cinema-arrival[data-cinema-arrival='pending'] .arrival-line{opacity:0;transform:none}
 /* Reserve a compact, constant gap. Reveal the following section only after
    leaving the film; visibility never changes its position in the document. */
 html body.editorial-site #main>section#vergleich[data-cinema-departure='pending']{
  opacity:0!important;visibility:hidden!important;pointer-events:none!important;
 }
 html body.editorial-site #main #start.journey-return{margin-bottom:0!important}
 /* The returned hero is an ordinary static composition. Browser toolbar
    changes must not resize its inner stage or move copy against the photo. */
 html.scrub body.editorial-site #main #start.journey-return .stage{
  height:var(--returned-hero-height,100svh)!important;min-height:0!important;
 }
 html body.editorial-site #main #start.journey-return .scene{
  top:0!important;left:0!important;width:100%!important;height:100%!important;
  transform:none!important;clip-path:none!important;transition:none!important;
 }
 html body.editorial-site #main #start.journey-return .poster{
  inset:0!important;width:100%!important;height:100%!important;min-width:0!important;
  object-fit:cover!important;object-position:50% 50%!important;
  transform:none!important;transition:none!important;animation:none!important;
 }
 html body.editorial-site #main #start.journey-return .hero-copy{
  bottom:calc(116px + var(--returned-chrome-inset,0px))!important;
  transition:none!important;
 }
 html body.editorial-site #main #start.journey-return .hero-copy::before{
  bottom:calc(-116px - var(--returned-chrome-inset,0px))!important;
  transition:none!important;
 }
 html body.editorial-site #main #start.journey-return .film-toolbar{
  bottom:calc(22px + var(--returned-chrome-inset,0px))!important;
  transition:none!important;
 }
}
@media(max-width:720px) and (orientation:landscape), (pointer:coarse) and (max-width:1024px) and (max-height:500px){
 html body.editorial-site #main>section.mobile-arrival#cinema-arrival{
  --arrival-copy-top:calc((100lvh - var(--arrival-copy-height,230px))/2);
  padding-left:57%!important;
 }
 html body.editorial-site #main>section.mobile-arrival#cinema-arrival h2{font-size:28px!important}
 html body.editorial-site #main #cinema-arrival p{font-size:14px!important;line-height:1.4!important}
}
@media(max-width:720px), (pointer:coarse) and (max-width:1024px) and (max-height:500px){
 html body.editorial-site #main #start.journey-return+section.mobile-arrival#cinema-arrival,
 html:not(.scrub) body.editorial-site #main>section.mobile-arrival#cinema-arrival{
  margin-top:0!important;height:auto!important;padding:36px 24px 48px!important;background:#fff!important;
 }
 html body.editorial-site #main #start.journey-return+#cinema-arrival .mobile-arrival-copy,
 html:not(.scrub) body.editorial-site #main #cinema-arrival .mobile-arrival-copy{position:relative!important;top:auto!important}
}
@media(prefers-reduced-motion:reduce){
 html:not(.site-motion-opt-in) body.editorial-site #main #start :is(.hero-copy,.film-toolbar),
 html:not(.site-motion-opt-in) body.editorial-site #main #start .hero-copy::before{transition:none!important}
 html:not(.site-motion-opt-in) body.editorial-site #main #cinema-arrival .arrival-line{opacity:1!important;transform:none!important;transition:none!important}
}

/* Finish the opacity fade before visibility is removed. This also holds after
   a larger thumb gesture, rather than cutting the remaining text away. */
@media(max-width:720px), (pointer:coarse) and (max-width:1024px) and (max-height:500px){
 html body.editorial-site #main #start:not(.journey-return) :is(.hero-copy,.film-caption,.film-toolbar){
  transition:opacity .45s ease-out,visibility 0s linear!important;
 }
 html body.editorial-site #main #start:not(.journey-return) :is(.hero-copy,.film-caption,.film-toolbar)[aria-hidden="true"]{
  transition:opacity .45s ease-out,visibility 0s linear .45s!important;
 }
}
@media(prefers-reduced-motion:reduce){
 html:not(.site-motion-opt-in) body.editorial-site #main #start :is(.hero-copy,.film-caption,.film-toolbar){transition:none!important}
}