/* HADS V33 — MOBILE/TABLET FINAL STABILIZATION
   Scoped to <=1024px only. Desktop is intentionally untouched. */
@media (max-width:1024px){
  html,body{max-width:100%;overflow-x:hidden!important}
  .lang-btn[data-lang="de"]{display:inline-flex!important;visibility:visible!important;opacity:1!important}
  .lang-switch{white-space:nowrap!important;flex-wrap:nowrap!important}
  img{max-width:100%}
  .top-btn{z-index:30}
}

@media (max-width:700px){
  /* HOME — prevent desktop overrides from squeezing the expertise/process cards. */
  #from-idea{height:auto!important;min-height:0!important;max-height:none!important;padding:46px 0!important;overflow:hidden!important}
  #from-idea>.container{width:92%!important;max-width:none!important;padding:0!important}
  #from-idea .expertise-grid{display:grid!important;grid-template-columns:1fr!important;gap:24px!important;align-items:stretch!important}
  #from-idea .expertise-visual{width:100%!important;height:520px!important;min-height:0!important;border-radius:30px!important;overflow:hidden!important}
  #from-idea .expertise-copy{width:100%!important;min-width:0!important}
  #from-idea .process{display:grid!important;grid-template-columns:1fr!important;gap:14px!important;width:100%!important}
  #from-idea .process-item{width:100%!important;min-width:0!important;min-height:0!important;padding:22px!important;overflow:visible!important}
  #from-idea .process-item h3,#from-idea .process-item p{white-space:normal!important;overflow-wrap:anywhere!important;word-break:normal!important}

  /* HOME — journey bubbles must remain complete cards, not clipped fragments. */
  .journey-track,.chapter-track,.home-path-track{scroll-padding-inline:18px!important}
  .journey-card,.chapter-card,.home-path-card{min-width:min(82vw,330px)!important;max-width:min(82vw,330px)!important}

  /* Expertise-family pages — remove dead header space and keep hero media centered. */
  .hads-page-co-creation .hero,.hads-page-development .hero,.hads-page-sourcing .hero,
  .hads-page-manufacturing .hero,.hads-page-delivery .hero,.hads-page-quality-control .hero{
    margin-top:0!important;padding-top:0!important;background-position:center!important
  }
  .hads-page-co-creation .workshop-photo,.hads-page-co-creation .workshop-visual,
  .hads-page-manufacturing .manufacturing-photo,.hads-page-delivery .delivery-photo{
    background-position:center!important
  }

  /* QUALITY CONTROL — cards/images fit the phone and overlays stay inside the visual. */
  .hads-page-quality-control .quality-grid{grid-template-columns:1fr!important;gap:16px!important}
  .hads-page-quality-control .quality-card{width:100%!important;min-width:0!important}
  .hads-page-quality-control .quality-photo{width:100%!important;height:230px!important;object-fit:cover!important;object-position:center!important}
  .hads-page-quality-control .quality-card-copy{padding:22px!important}
  .hads-page-quality-control .quality-card h3,.hads-page-quality-control .quality-card p{overflow-wrap:anywhere!important}
  .hads-page-quality-control .quality-visual,.hads-page-quality-control .detail-visual{overflow:hidden!important}

  /* EXPERTISE — six process bubbles become a clean vertical mobile sequence. */
  .hads-page-expertise .process-grid{grid-template-columns:1fr!important;gap:16px!important}
  .hads-page-expertise .process-card{width:100%!important;min-width:0!important;height:auto!important;min-height:0!important;padding:24px!important}
  .hads-page-expertise .process-card h3,.hads-page-expertise .process-card p{white-space:normal!important;overflow-wrap:anywhere!important}

  /* Manufacturing capability cards: no cut text / overflow. */
  .hads-page-manufacturing .capability-grid,.hads-page-manufacturing .industrial-grid,
  .hads-page-manufacturing .why-grid{grid-template-columns:1fr!important}
  .hads-page-manufacturing .capability-card,.hads-page-manufacturing .why-card{min-width:0!important;width:100%!important}

  /* Image overlay panels: stay readable and inside the photo on narrow screens. */
  .hads-page-manufacturing .visual-copy,.hads-page-delivery .visual-copy,
  .hads-page-quality-control .visual-copy,.hads-page-sourcing .visual-copy{
    max-width:78%!important;width:auto!important;padding:22px!important
  }

  /* Contact — never let email / labels push the page horizontally. */
  .hads-page-contact .contact-card,.hads-page-contact .contact-person{min-width:0!important;width:100%!important}
  .hads-page-contact a[href^="mailto:"]{overflow-wrap:anywhere!important;word-break:break-word!important}
}

@media (min-width:701px) and (max-width:1024px){
  /* Tablet: preserve desktop visual language but avoid compressed columns. */
  #from-idea .expertise-grid{grid-template-columns:1fr!important;gap:28px!important}
  #from-idea .expertise-visual{height:560px!important;min-height:0!important}
  #from-idea .process{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .hads-page-expertise .process-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .hads-page-quality-control .quality-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

@media (max-width:700px){
  .hads-page-delivery .logistics{padding:58px 0!important}
  .hads-page-delivery .logistics-grid{grid-template-columns:1fr!important;gap:30px!important}
  .hads-page-delivery .logistics-visual{min-height:560px!important;border-radius:30px!important}
  .hads-page-delivery .logistics-box{padding:20px!important}
  .hads-page-delivery .logistics-box.one{left:7%!important;top:8%!important;width:55%!important}
  .hads-page-delivery .logistics-box.two{right:6%!important;bottom:8%!important;width:58%!important}
  .hads-page-delivery .logistics-box strong{font-size:17px!important;line-height:1.28!important;overflow-wrap:anywhere!important}
  .hads-page-co-creation .workshop,.hads-page-co-creation .co-workshop{padding:58px 0!important}
  .hads-page-co-creation .workshop-grid,.hads-page-co-creation .co-workshop-grid{grid-template-columns:1fr!important;gap:28px!important}
  .hads-page-co-creation .workshop-visual,.hads-page-co-creation .co-workshop-photo{min-height:520px!important;border-radius:30px!important}
}