/* HADS V34 — MOBILE/TABLET REFINEMENT ONLY
   IMPORTANT: all visual rules are scoped to <=1024px so desktop rendering is untouched. */

@media (max-width:1024px){
  html,body{overflow-x:hidden!important}
  .lang-btn[data-lang="de"]{display:inline-flex!important;visibility:visible!important;opacity:1!important}
}

@media (max-width:700px){
  /* =========================================================
     HOME HERO — compact, readable, centred on phone only
     ========================================================= */
  #homeHero.hero{
    height:auto!important;
    min-height:0!important;
    padding:0!important;
    background:#121019!important;
    color:#fff!important;
    overflow:hidden!important;
  }
  #homeHero .hero-slides{
    position:absolute!important;
    inset:0!important;
    left:0!important;right:0!important;top:0!important;bottom:0!important;
    z-index:0!important;
  }
  #homeHero .hero-slide{
    background-position:center center!important;
    background-size:cover!important;
    transform:none!important;
  }
  #homeHero .hero-slide::after{
    background:linear-gradient(180deg,rgba(14,12,18,.30) 0%,rgba(14,12,18,.58) 44%,rgba(14,12,18,.90) 100%)!important;
  }
  #homeHero .hero-content-wrap{
    position:relative!important;
    z-index:2!important;
    display:block!important;
    width:100%!important;
    min-height:720px!important;
    padding:36px 18px 86px!important;
    pointer-events:auto!important;
  }
  #homeHero .hero-copy{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:24px 20px!important;
    border-radius:26px!important;
    background:linear-gradient(145deg,rgba(23,19,28,.78),rgba(23,19,28,.48))!important;
    border:1px solid rgba(255,255,255,.18)!important;
    backdrop-filter:blur(9px)!important;
    box-shadow:0 18px 44px rgba(0,0,0,.20)!important;
  }
  #homeHero .hero-experience{margin:0 0 14px!important;color:#eee!important}
  #homeHero .hero-experience strong,#homeHero .hero-experience span{color:#eee!important}
  #homeHero .hero-title,#homeHero .hero-title-fixed{
    color:#fff!important;
    font-size:clamp(34px,10.2vw,46px)!important;
    line-height:1.02!important;
    letter-spacing:-1.6px!important;
    margin:0 0 18px!important;
    max-width:none!important;
  }
  #homeHero .hero-title-premium,#homeHero .hero-title-strong{color:#fff!important}
  #homeHero .hero-title-accent,#homeHero .hero-title span{color:#bc76da!important}
  #homeHero .hero-description{
    color:#eee9f0!important;
    font-size:14px!important;
    line-height:1.6!important;
    margin:0 0 18px!important;
    max-width:none!important;
  }
  #homeHero .hero-process-line{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:8px!important;
    margin:0 0 20px!important;
    font-size:9px!important;
    letter-spacing:.05em!important;
    color:#fff!important;
  }
  #homeHero .hero-process-line span{
    display:inline-flex!important;
    align-items:center!important;
    min-height:34px!important;
    padding:7px 11px!important;
    border-radius:999px!important;
    background:rgba(255,255,255,.92)!important;
    color:#60406f!important;
    box-shadow:0 5px 12px rgba(0,0,0,.12)!important;
  }
  #homeHero .hero-process-line i{display:none!important}
  #homeHero .hero-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
    max-width:none!important;
  }
  #homeHero .hero-actions a{
    width:100%!important;
    min-height:54px!important;
    border-radius:17px!important;
    justify-content:center!important;
    text-align:center!important;
    font-size:10px!important;
    padding:15px 16px!important;
  }
  #homeHero .hero-nav{
    left:18px!important;right:auto!important;bottom:22px!important;
    display:flex!important;gap:7px!important;
    padding:7px 10px!important;
    border-radius:999px!important;
    background:rgba(20,16,24,.56)!important;
  }
  #homeHero .hero-dot{
    width:30px!important;height:8px!important;min-width:0!important;
    padding:0!important;border-radius:999px!important;
    font-size:0!important;background:rgba(255,255,255,.24)!important;
  }
  #homeHero .hero-dot::after{display:none!important}
  #homeHero .hero-dot.active{background:#a958ca!important}
  #homeHero .hero-progress{display:none!important}

  /* =========================================================
     HOME CHAPTER BUBBLES — same premium logic as Expertise
     ========================================================= */
  .home-path{
    position:relative!important;
    inset:auto!important;
    padding:16px 0 20px!important;
    background:linear-gradient(180deg,#fff,#faf8fb)!important;
    overflow:hidden!important;
  }
  .home-path-inner{
    display:flex!important;
    gap:12px!important;
    overflow-x:auto!important;
    scroll-snap-type:x mandatory!important;
    padding:2px 18px 12px!important;
    scrollbar-width:none!important;
  }
  .home-path-inner::-webkit-scrollbar{display:none!important}
  .home-path a{
    flex:0 0 82vw!important;
    min-width:82vw!important;
    max-width:330px!important;
    min-height:72px!important;
    display:grid!important;
    grid-template-columns:52px minmax(0,1fr)!important;
    grid-template-rows:auto auto!important;
    column-gap:14px!important;
    align-items:center!important;
    text-align:left!important;
    padding:10px 16px 10px 10px!important;
    border-radius:22px!important;
    border:1px solid #e7ddeb!important;
    background:linear-gradient(145deg,#fff,#f7f1f9)!important;
    box-shadow:0 8px 0 #e0d4e5,0 15px 26px rgba(62,42,72,.10)!important;
    scroll-snap-align:start!important;
    transform:none!important;
  }
  .home-path a b{
    grid-row:1/3!important;
    width:52px!important;height:52px!important;
    border-radius:16px!important;
    margin:0!important;
    background:linear-gradient(145deg,#a65bc5,#713f8b)!important;
    color:#fff!important;
    font-size:14px!important;
  }
  .home-path a span{font-size:13px!important;line-height:1.15!important;color:#332d37!important;text-transform:uppercase!important}
  .home-path a small{font-size:9px!important;line-height:1.25!important;margin:2px 0 0!important;color:#817687!important}
  .home-path a::before,.home-path a::after{display:none!important}
  .home-path a:hover,.home-path a.wave-active{transform:none!important}

  /* =========================================================
     WORKWEAR FAMILY BUBBLES — index + family pages
     ========================================================= */
  .hads-workwear-index .ww-family-rail,
  .hads-family-page .catalogue-family-nav{
    position:relative!important;
    inset:auto!important;
    margin:0!important;
    padding:16px 0 20px!important;
    background:linear-gradient(180deg,#fff,#faf8fb)!important;
    border:0!important;
    overflow:hidden!important;
  }
  .hads-workwear-index .ww-family-rail{
    display:flex!important;
    gap:12px!important;
    overflow-x:auto!important;
    padding-left:18px!important;
    padding-right:18px!important;
    scrollbar-width:none!important;
    scroll-snap-type:x mandatory!important;
  }
  .hads-workwear-index .ww-family-rail::-webkit-scrollbar,
  .hads-family-page .catalogue-family-nav .container::-webkit-scrollbar{display:none!important}
  .hads-workwear-index .ww-family-rail a{
    flex:0 0 82vw!important;
    min-width:82vw!important;
    max-width:330px!important;
    min-height:72px!important;
    display:grid!important;
    grid-template-columns:52px minmax(0,1fr) 20px!important;
    gap:13px!important;
    padding:10px 14px 10px 10px!important;
    border-radius:22px!important;
    border:1px solid #e7ddeb!important;
    background:linear-gradient(145deg,#fff,#f7f1f9)!important;
    color:#352e3a!important;
    box-shadow:0 8px 0 #e0d4e5,0 15px 26px rgba(62,42,72,.10)!important;
    scroll-snap-align:start!important;
  }
  .hads-workwear-index .ww-family-rail .num{
    width:52px!important;height:52px!important;border-radius:16px!important;
    background:linear-gradient(145deg,#a65bc5,#713f8b)!important;color:#fff!important;
  }
  .hads-workwear-index .ww-family-rail .label{
    color:#352e3a!important;font-size:12px!important;line-height:1.18!important;text-align:left!important;
  }
  .hads-workwear-index .ww-family-rail .arrow{color:#8b579f!important;font-size:16px!important}

  .hads-family-page .catalogue-family-nav .container{
    display:flex!important;
    gap:12px!important;
    overflow-x:auto!important;
    padding:2px 18px 12px!important;
    scroll-snap-type:x mandatory!important;
    scrollbar-width:none!important;
  }
  .hads-family-page .catalogue-family-nav a{
    flex:0 0 78vw!important;
    min-width:78vw!important;
    max-width:315px!important;
    min-height:66px!important;
    border-radius:21px!important;
    border:1px solid #e7ddeb!important;
    background:linear-gradient(145deg,#fff,#f7f1f9)!important;
    color:#3a303e!important;
    font-size:11px!important;
    box-shadow:0 8px 0 #e0d4e5,0 15px 26px rgba(62,42,72,.09)!important;
    scroll-snap-align:start!important;
  }
  .hads-family-page .catalogue-family-nav a.active{
    color:#fff!important;
    background:linear-gradient(145deg,#a45bc4,#74428c)!important;
    border-color:#9c62b4!important;
    box-shadow:0 8px 0 #5e3575,0 15px 26px rgba(83,45,101,.18)!important;
    transform:none!important;
  }

  /* =========================================================
     WHO WE ARE SUBNAV — History / HADS Today / Values
     ========================================================= */
  .hads-who-history .subnav,
  .hads-who-today .subnav,
  .hads-who-values .subnav,
  body:not(.hads-who-history):not(.hads-who-today) .subnav{
    position:relative!important;
    margin:0!important;
    padding:16px 0 20px!important;
    background:linear-gradient(180deg,#fff,#faf8fb)!important;
    border:0!important;
    z-index:8!important;
  }
  .hads-who-history .subnav-inner,
  .hads-who-today .subnav-inner,
  .hads-who-values .subnav-inner,
  .subnav .subnav-inner{
    display:flex!important;
    gap:12px!important;
    overflow-x:auto!important;
    padding:2px 18px 12px!important;
    scrollbar-width:none!important;
    scroll-snap-type:x mandatory!important;
  }
  .subnav .subnav-inner::-webkit-scrollbar{display:none!important}
  .hads-who-history .subnav a,
  .hads-who-today .subnav a,
  .hads-who-values .subnav a,
  .subnav .subnav-inner>a{
    flex:0 0 78vw!important;
    min-width:78vw!important;
    max-width:315px!important;
    min-height:66px!important;
    border-radius:21px!important;
    border:1px solid #e7ddeb!important;
    background:linear-gradient(145deg,#fff,#f7f1f9)!important;
    color:#3a303e!important;
    font-size:11px!important;
    font-weight:850!important;
    box-shadow:0 8px 0 #e0d4e5,0 15px 26px rgba(62,42,72,.09)!important;
    scroll-snap-align:start!important;
    transform:none!important;
  }
  .hads-who-history .subnav a.active,
  .hads-who-today .subnav a.active,
  .hads-who-values .subnav a.active,
  .subnav .subnav-inner>a.active{
    color:#fff!important;
    background:linear-gradient(145deg,#a45bc4,#74428c)!important;
    border-color:#9c62b4!important;
    box-shadow:0 8px 0 #5e3575,0 15px 26px rgba(83,45,101,.18)!important;
  }
  .history-hero-quicknav{display:none!important}
}

@media (min-width:701px) and (max-width:1024px){
  /* Tablet keeps desktop content but uses comfortable 2-column navigation cards. */
  .home-path-inner{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important}
  .hads-family-page .catalogue-family-nav .container{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;overflow:visible!important}
  .hads-family-page .catalogue-family-nav a{min-width:0!important;min-height:58px!important}
  .subnav .subnav-inner{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important;overflow:visible!important}
  .subnav .subnav-inner>a{min-width:0!important;min-height:58px!important}
}