/* Mobile shell. Stage-specific mobile rules live in each stage module. */
.cf-mobile-nav-toggle{display:none}

@media(max-width:900px){
  :root{--cf-rail:0rem}

  .cf-cinema{margin-top:-163.2vh}
  .cf-stage[data-stage]{z-index:auto!important}

  /* One manifest-generated navigation, presented as a mobile hamburger menu. */
  .cf-rail{
    left:auto;
    right:max(1.75rem,env(safe-area-inset-right));
    top:max(1.75rem,env(safe-area-inset-top));
    bottom:auto;
    width:auto;
    padding:0;
    background:none;
    align-items:flex-end;
    transform:none;
  }
  .cf-rail.is-visible{transform:none}
  .cf-rail__track{display:none}

  .cf-mobile-nav-toggle{
    -webkit-appearance:none;
    appearance:none;
    position:relative;
    z-index:2;
    display:block;
    width:2.9rem;
    height:2.9rem;
    margin:0;
    padding:0;
    border:0;
    outline:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    color:#fff;
    opacity:.34;
    cursor:pointer;
    transition:opacity .2s ease;
    -webkit-tap-highlight-color:transparent;
  }
  .cf-mobile-nav-toggle span{
    position:absolute;
    left:50%;
    top:50%;
    display:block;
    width:1.48rem;
    height:1px;
    margin:0;
    border:0;
    background:#fff;
    box-shadow:none;
    transform-origin:center;
    transition:transform .25s var(--cf-ease),opacity .18s ease;
  }
  .cf-mobile-nav-toggle span:nth-child(1){transform:translate(-50%,-.34rem)}
  .cf-mobile-nav-toggle span:nth-child(2){transform:translate(-50%,0)}
  .cf-mobile-nav-toggle span:nth-child(3){transform:translate(-50%,.34rem)}
  .cf-mobile-nav-toggle.is-pointer-hover,
  .cf-rail.is-mobile-open .cf-mobile-nav-toggle{
    opacity:1;
    outline:0;
    box-shadow:none;
  }
  .cf-rail.is-mobile-open .cf-mobile-nav-toggle span:nth-child(1){transform:translate(-50%,0) rotate(45deg)}
  .cf-rail.is-mobile-open .cf-mobile-nav-toggle span:nth-child(2){opacity:0}
  .cf-rail.is-mobile-open .cf-mobile-nav-toggle span:nth-child(3){transform:translate(-50%,0) rotate(-45deg)}

  .cf-rail__nav{
    position:absolute;
    top:3.5rem;
    right:0;
    width:min(78vw,20rem);
    margin:0;
    padding:1rem 1.05rem;
    gap:.25rem;
    border:1px solid rgba(255,255,255,.085);
    background:rgba(5,5,6,.94);
    backdrop-filter:blur(14px);
    box-shadow:0 1rem 3rem rgba(0,0,0,.42);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-.5rem) scale(.98);
    transform-origin:top right;
    transition:opacity .2s ease,transform .25s var(--cf-ease),visibility .2s ease;
  }
  .cf-rail.is-mobile-open .cf-rail__nav{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:none;
  }
  .cf-rail__nav a{
    grid-template-columns:2rem 1fr;
    gap:.5rem;
    min-height:2.65rem;
    padding:.3rem .2rem;
    color:rgba(255,255,255,.70);
    font-size:.72rem;
  }
  .cf-rail__nav a.is-active{
    color:#fff;
    text-shadow:0 0 .8rem rgba(255,255,255,.12),0 0 1.1rem rgba(204,23,21,.24);
  }
  .cf-rail__nav a b{opacity:1;transform:none}

  /* Generic future-stage fallback. Specific modules may override these values. */
  .cf-stage[data-stage]:not(.cf-contact){min-height:160svh}
  .cf-stage-word{left:-4vw;font-size:52vw}

  /* Shared mobile neon language for the three requested CTAs. */
  :is(.cf-programm__all,.cf-about__cta,.cf-contact__form button){
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:3.15rem;
    padding:.78rem 1.25rem;
    border:1px solid rgba(204,23,21,.88);
    border-radius:.32rem;
    background:linear-gradient(180deg,rgba(204,23,21,.10),rgba(204,23,21,.035));
    box-shadow:inset 0 0 .9rem rgba(204,23,21,.09),0 0 .55rem rgba(204,23,21,.38),0 0 1.55rem rgba(204,23,21,.18);
    text-decoration:none;
    scale:1;
    transition:scale .22s var(--cf-ease),color .18s ease,box-shadow .25s ease,border-color .25s ease,background .25s ease;
  }
  .cf-programm .cf-programm__all,
  .cf-about .cf-about__cta{
    color:var(--cf-red);
    text-shadow:0 0 .35rem rgba(255,78,74,.58),0 0 .9rem rgba(204,23,21,.92),0 0 1.7rem rgba(204,23,21,.48);
  }
  .cf-contact__form button{
    color:#fff;
    text-shadow:0 0 .42rem rgba(255,255,255,.20),0 0 .95rem rgba(204,23,21,.60);
  }

  /* Desktop hover rules are neutralized on Mobile. Mouse hover is owned by
     pointer events, so touch taps never leave a sticky hover state behind. */
  :is(.cf-programm__all,.cf-about__cta,.cf-contact__form button):hover{
    scale:1;
    border-color:rgba(204,23,21,.88);
    background:linear-gradient(180deg,rgba(204,23,21,.10),rgba(204,23,21,.035));
    box-shadow:inset 0 0 .9rem rgba(204,23,21,.09),0 0 .55rem rgba(204,23,21,.38),0 0 1.55rem rgba(204,23,21,.18);
  }
  :is(.cf-programm__all,.cf-about__cta,.cf-contact__form button).is-pointer-hover{
    scale:1.045;
    border-color:rgba(255,70,66,.96);
    background:linear-gradient(180deg,rgba(204,23,21,.16),rgba(204,23,21,.055));
    box-shadow:inset 0 0 1rem rgba(204,23,21,.13),0 0 .75rem rgba(204,23,21,.60),0 0 2.15rem rgba(204,23,21,.30);
  }

  .cf-tech-footer{
    flex-wrap:wrap;
    padding:1rem 7vw 1.1rem;
  }
}

@media(max-width:420px){
  .cf-rail{
    right:max(1.75rem,env(safe-area-inset-right));
    top:max(1.75rem,env(safe-area-inset-top));
  }
  .cf-mobile-nav-toggle{width:2.8rem;height:2.8rem}
  .cf-rail__nav{top:3.35rem;width:min(84vw,19rem)}
}

@media(prefers-reduced-motion:reduce){
  .cf-particles,.cf-liquid,.cf-mitmachen__highlights{display:none}
  .cf-cinema,.cf-programm,.cf-mitmachen,.cf-about,.cf-contact{margin-top:0!important}
  .cf-stage{height:auto!important}
  .cf-sticky{position:relative;height:auto;min-height:100svh}
  .cf-news .cf-sticky,
  .cf-programm .cf-sticky,
  .cf-mitmachen__stage,
  .cf-about .cf-sticky,
  .cf-contact .cf-sticky{
    opacity:1!important;
    transform:none!important;
    filter:none!important;
  }
  .cf-stage-motion{
    opacity:1!important;
    transform:none!important;
    filter:none!important;
  }
  .cf-news__main,
  .cf-news__small,
  .cf-about__content,
  .cf-contact__grid,
  .cf-mitmachen__word{
    opacity:1!important;
    transform:none!important;
    filter:none!important;
  }
  .cf-programm__track{
    position:relative;
    top:auto;
    left:auto;
    height:auto;
    padding:14vh 7vw 8vh;
    display:grid;
    width:auto;
  }
  .cf-programm__item{
    position:relative;
    left:auto;
    top:auto;
    width:auto;
    opacity:1!important;
    transform:none!important;
    filter:none!important;
  }
}