/* SchuhSki Mobile Header CSS
   Einbindung: <link rel="stylesheet" href="assets/mobile.css">
   Dieses CSS greift nur auf kleinen Screens und überschreibt den bestehenden Header mobil. */

.mobile-menu-toggle{display:none}

@media (max-width:760px){
  :root{
    --mobile-header-height:66px;
  }

  body.mobile-menu-open{
    overflow-x:hidden;
  }

  /* Obere rote Infozeile kompakter */
  .topbar{
    font-size:.76rem;
  }

  .topbar-inner{
    min-height:34px!important;
    padding:6px 0!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:center!important;
    gap:0!important;
    text-align:center;
  }

  .topbar .ticker{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    max-width:100%;
    white-space:nowrap!important;
    overflow:hidden;
    text-overflow:ellipsis;
    font-size:0!important;
  }

  .topbar .ticker::before{
    display:none!important;
  }

  .topbar .ticker::after{
    content:"SchuhSki Bad Ischl · Service vor Ort";
    font-size:.78rem;
    font-weight:950;
    letter-spacing:.015em;
  }

  .topbar-inner > div:last-child{
    display:none!important;
  }

  /* Header mobil: Logo links, Menü rechts */
  .header{
    position:sticky;
    top:0;
  }

  .header-main{
    min-height:var(--mobile-header-height)!important;
    padding:9px 0!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:10px!important;
  }

  .brand{
    width:178px!important;
    min-height:44px!important;
    padding:10px 14px!important;
    flex:0 0 auto;
  }

  .brand img{
    width:126px!important;
    height:auto!important;
  }

  .search-look{
    display:none!important;
  }

  .header-actions{
    display:none!important;
  }

  .mobile-menu-toggle{
    display:inline-flex!important;
    align-items:center;
    justify-content:center;
    gap:9px;
    min-height:42px;
    margin-left:auto;
    padding:10px 13px 10px 15px;
    border:2px solid var(--red,#d91608);
    border-radius:999px;
    background:var(--red,#d91608);
    color:#fff;
    font:inherit;
    font-size:.82rem;
    font-weight:950;
    text-transform:uppercase;
    letter-spacing:.04em;
    line-height:1;
    cursor:pointer;
    box-shadow:0 10px 24px rgba(217,22,8,.22);
    transition:transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
    -webkit-tap-highlight-color:transparent;
  }

  .mobile-menu-toggle:focus-visible{
    outline:3px solid rgba(217,22,8,.28);
    outline-offset:3px;
  }

  .mobile-menu-toggle:active{
    transform:translateY(1px);
  }

  .mobile-menu-toggle i{
    position:relative;
    display:block;
    width:20px;
    height:2px;
    border-radius:999px;
    background:currentColor;
    transition:background .18s ease;
  }

  .mobile-menu-toggle i::before,
  .mobile-menu-toggle i::after{
    content:"";
    position:absolute;
    left:0;
    width:20px;
    height:2px;
    border-radius:999px;
    background:currentColor;
    transition:transform .18s ease, top .18s ease;
  }

  .mobile-menu-toggle i::before{top:-7px}
  .mobile-menu-toggle i::after{top:7px}

  body.mobile-menu-open .mobile-menu-toggle{
    background:#161114;
    border-color:#161114;
    box-shadow:0 14px 30px rgba(22,17,20,.2);
  }

  body.mobile-menu-open .mobile-menu-toggle i{
    background:transparent;
  }

  body.mobile-menu-open .mobile-menu-toggle i::before{
    top:0;
    transform:rotate(45deg);
  }

  body.mobile-menu-open .mobile-menu-toggle i::after{
    top:0;
    transform:rotate(-45deg);
  }

  /* Hamburger-Menü: nur aktiv, wenn JS den Menü-Button gesetzt hat */
  body.has-mobile-menu .category-nav{
    position:absolute;
    left:0;
    right:0;
    top:100%;
    z-index:70;
    max-height:0;
    overflow:hidden;
    opacity:0;
    visibility:hidden;
    transform:translateY(-8px);
    pointer-events:none;
    background:#fff;
    border-top:1px solid rgba(217,22,8,.18);
    border-bottom:5px solid var(--red,#d91608);
    box-shadow:0 22px 55px rgba(37,29,32,.16);
    transition:max-height .28s ease, opacity .2s ease, transform .22s ease, visibility .22s ease;
  }

  body.has-mobile-menu.mobile-menu-open .category-nav{
    max-height:460px;
    opacity:1;
    visibility:visible;
    transform:translateY(0);
    pointer-events:auto;
  }

  body.has-mobile-menu .category-nav .container{
    width:min(100% - 22px,var(--max,1240px))!important;
    display:grid!important;
    grid-template-columns:1fr;
    align-items:stretch!important;
    gap:7px!important;
    padding:12px 0 15px!important;
    overflow:visible!important;
  }

  body.has-mobile-menu .category-nav a{
    width:100%;
    display:flex!important;
    align-items:center;
    justify-content:flex-end;
    min-height:46px;
    padding:13px 16px!important;
    border:1px solid rgba(217,22,8,.18);
    border-radius:13px;
    background:var(--red-soft,#fff0ee)!important;
    color:var(--ink,#251d20)!important;
    text-align:right;
    font-size:.84rem!important;
    box-shadow:0 8px 20px rgba(217,22,8,.06);
  }

  body.has-mobile-menu .category-nav a:hover,
  body.has-mobile-menu .category-nav a:focus-visible{
    background:var(--red,#d91608)!important;
    color:#fff!important;
    transform:none!important;
  }

  body.has-mobile-menu .category-nav a:focus-visible{
    outline:3px solid rgba(217,22,8,.25);
    outline-offset:2px;
  }

  /* Etwas Luft unter Sprungzielen, weil der mobile Header sticky ist */
  section,
  #top,
  #jobs,
  #lehre,
  #lager,
  #skiverleih,
  #skiservice,
  #ueber-uns,
  #rundgang{
    scroll-margin-top:96px;
  }
}

@media (max-width:390px){
  .container{
    width:min(100% - 18px,var(--max,1240px))!important;
  }

  .topbar .ticker::after{
    content:"SchuhSki Bad Ischl";
  }

  .brand{
    width:158px!important;
    min-height:40px!important;
    padding:9px 12px!important;
  }

  .brand img{
    width:112px!important;
  }

  .mobile-menu-toggle{
    min-height:40px;
    padding:9px 11px 9px 13px;
    font-size:.78rem;
  }
}


@media (max-width:760px){
  .red-soft[aria-labelledby="shops-title"]{
    display:none!important;
  }
}

/* Mobile-Fix für den Marken-Slider */
@media (max-width:760px){
  .logo-viewport{
    overflow:hidden!important;
    width:100%!important;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  }

  .logo-track{
    display:flex!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    gap:16px!important;
    width:max-content!important;
    min-width:max-content!important;
    min-height:130px!important;
    animation:brandSlideMobile 120s linear infinite!important;
    will-change:transform;
    transform:translate3d(0,0,0);
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
  }

  .logo-slide{
    flex:0 0 170px!important;
    width:170px!important;
    height:130px!important;
    display:grid!important;
    place-items:center!important;
    padding:12px!important;
  }

  .logo-slide img{
    display:block!important;
    max-width:150px!important;
    max-height:110px!important;
    width:auto!important;
    height:auto!important;
    object-fit:contain!important;
  }

  @keyframes brandSlideMobile{
    from{
      transform:translate3d(0,0,0);
    }
    to{
      transform:translate3d(-50%,0,0);
    }
  }
}