/* ENDLICH DU V27 – mobile only: top filmstrips fade into continuous colour.
   V26 repeated a second filmstrip image below the first. That layer is deliberately removed.
   All desktop styles remain unchanged. */
@media (max-width: 767px) {
  /* One continuous backdrop for the ENTIRE hero; no repeated or stretched photograph. */
  #hero.hero {
    background: linear-gradient(180deg,
      #dd98ad 0%,
      #e5a3a2 23%,
      #d99699 44%,
      #b87b8b 68%,
      #70465e 87%,
      #35283c 100%) !important;
  }
  /* The original V19 collage appears only at the top. Its bottom edge disappears softly. */
  #hero .hero-mobile-bg {
    display:block !important;
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    background-image:none !important; /* removes the SECOND, lower V12 filmstrip */
    background-color:transparent !important;
    background-size:auto !important;
    background-position:center top !important;
    background-repeat:no-repeat !important;
    filter:none !important;
    opacity:1 !important;
    z-index:-3 !important;
    pointer-events:none !important;
  }
  #hero .hero-mobile-bg::before {
    content:'' !important;
    display:block !important;
    position:absolute !important;
    left:0 !important;
    top:0 !important;
    right:0 !important;
    bottom:auto !important;
    width:100% !important;
    height:177.778vw !important; /* V19 original: 1152 x 2048, intrinsic aspect ratio */
    max-height:none !important;
    background-image:url('../../neu/assets/film/hero-mobile-v19-reference.webp') !important;
    background-size:100% auto !important;
    background-position:center top !important;
    background-repeat:no-repeat !important;
    -webkit-mask-image:linear-gradient(180deg,
       #000 0%,
       #000 30%,
       rgba(0,0,0,.96) 42%,
       rgba(0,0,0,.73) 57%,
       rgba(0,0,0,.32) 76%,
       transparent 100%) !important;
    mask-image:linear-gradient(180deg,
       #000 0%,
       #000 30%,
       rgba(0,0,0,.96) 42%,
       rgba(0,0,0,.73) 57%,
       rgba(0,0,0,.32) 76%,
       transparent 100%) !important;
    pointer-events:none !important;
  }
}