/* BERZAN Mobile UX 2026 — mobile-only refinement. Desktop intentionally untouched. */
@media (max-width:760px){
  :root{
    --mobile-edge:14px;
    --mobile-header:70px;
  }

  html{
    overflow-x:hidden;
    scroll-padding-top:calc(var(--mobile-header) + 10px);
    -webkit-text-size-adjust:100%;
  }
  body{
    overflow-x:hidden;
    min-width:0;
  }
  img,video{max-width:100%}
  a,button,summary,input,select,textarea{touch-action:manipulation}

  /* Header: keep logo, language and menu usable on narrow phones. */
  .site-header,.legal-header{
    z-index:180!important;
  }
  .nav-wrap,
  .legal-header-inner,
  .legal-header-inner.is-full-nav{
    min-height:calc(var(--mobile-header) + env(safe-area-inset-top))!important;
    padding-top:env(safe-area-inset-top)!important;
    gap:8px!important;
  }
  .brand{min-width:0!important;flex:1 1 auto!important;gap:7px!important}
  .brand-logo{width:37px!important;min-width:37px!important}
  .brand-name{font-size:19px!important;white-space:nowrap!important}
  .brand-name small{display:none!important}

  #berzan-language-switcher{margin-left:auto!important;flex:0 0 auto!important}
  #berzan-language-switcher summary{
    min-width:50px!important;
    height:40px!important;
    padding:0 7px!important;
    gap:5px!important;
  }
  #berzan-language-switcher .pro-lang-globe{width:14px!important;height:14px!important}
  #berzan-language-switcher .pro-lang-menu{
    position:fixed!important;
    top:calc(var(--mobile-header) + env(safe-area-inset-top) + 8px)!important;
    right:12px!important;
    left:auto!important;
    bottom:auto!important;
    width:min(224px,calc(100vw - 24px))!important;
    padding:7px!important;
    border-radius:14px!important;
    z-index:260!important;
    box-shadow:0 24px 70px rgba(17,20,22,.22)!important;
  }
  #berzan-language-switcher .pro-lang-menu:after{display:none!important}
  #berzan-language-switcher button{min-height:46px!important;padding:0 11px!important;font-size:13px!important}

  .mobile-nav{flex:0 0 auto!important;margin-left:0!important}
  .mobile-nav summary{
    min-width:56px!important;
    height:40px!important;
    padding:0 9px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    border:1px solid rgba(17,20,22,.25)!important;
    border-radius:999px!important;
    background:rgba(255,255,255,.28)!important;
    font-size:10px!important;
    letter-spacing:.07em!important;
    line-height:1!important;
  }
  .mobile-nav summary::-webkit-details-marker{display:none!important}
  .mobile-nav nav{
    position:fixed!important;
    top:calc(var(--mobile-header) + env(safe-area-inset-top) + 8px)!important;
    left:12px!important;
    right:12px!important;
    width:auto!important;
    min-width:0!important;
    max-height:calc(100svh - var(--mobile-header) - env(safe-area-inset-top) - 30px)!important;
    overflow:auto!important;
    overscroll-behavior:contain;
    padding:8px!important;
    border-radius:14px!important;
    background:rgba(255,255,255,.985)!important;
    box-shadow:0 24px 70px rgba(17,20,22,.22)!important;
    z-index:250!important;
  }
  .mobile-nav nav a{
    min-height:48px!important;
    padding:0 13px!important;
    display:flex!important;
    align-items:center!important;
    border-bottom:1px solid #ece8df!important;
    font-size:15px!important;
  }
  .mobile-nav nav a:last-child{border-bottom:0!important}

  /* Mobile hero: less dead space, readable copy, thumb-friendly actions. */
  .hero-media{
    height:min(43svh,410px)!important;
    min-height:300px!important;
    max-height:410px!important;
  }
  .hero-copy{padding:38px 0 50px!important}
  .hero .eyebrow{margin-bottom:15px!important;line-height:1.45!important}
  .hero h1{
    font-size:clamp(40px,12.5vw,54px)!important;
    line-height:.94!important;
    letter-spacing:-.058em!important;
  }
  .hero h1 .hero-line,
  .hero h1 .hero-line:first-child,
  .hero h1 .hero-line + .hero-line{
    white-space:normal!important;
    max-width:100%!important;
  }
  .hero-lead{font-size:15.5px!important;line-height:1.58!important;margin-top:19px!important}
  .hero-actions{gap:9px!important;margin-top:24px!important}
  .hero-actions .button{min-height:52px!important}
  .trust-row{
    grid-template-columns:1fr!important;
    gap:0!important;
    margin-top:25px!important;
    padding-top:10px!important;
  }
  .trust-row>span{
    min-height:42px!important;
    display:flex!important;
    align-items:center!important;
    border-bottom:1px solid rgba(17,20,22,.10)!important;
  }
  .trust-row>span:last-child{border-bottom:0!important}
  .hero-slide-status{left:12px!important;bottom:12px!important;max-width:70%!important}
  .hero-slide-controls{right:10px!important;bottom:10px!important}

  /* General rhythm: shorter scroll without squeezing content. */
  .section{padding:58px 0!important}
  .service-area{padding:46px 0!important}
  .section-heading{margin-bottom:30px!important;padding-bottom:18px!important}
  .section-heading>p{margin-top:16px!important;font-size:15px!important;line-height:1.62!important}
  .service-area h2,.section-heading h2,.process-intro h2,.contact-copy h2{
    font-size:clamp(34px,10.5vw,46px)!important;
    line-height:.98!important;
  }
  .button{min-height:50px!important;padding-inline:16px!important}

  /* Leistungsshowcase: horizontal tabs, compact media, full-width actions. */
  .service-showcase-shell{margin-top:30px!important;padding:18px 0!important;border-left:0!important;border-right:0!important}
  .service-showcase-headline{padding:0 16px!important;margin-bottom:20px!important;gap:12px!important}
  .service-showcase-headline h3{font-size:30px!important;max-width:15ch!important}
  .service-showcase-headline p:last-child{font-size:14px!important;line-height:1.58!important}
  .service-showcase-nav{
    padding:10px 12px!important;
    gap:8px!important;
    flex-wrap:nowrap!important;
    overflow-x:auto!important;
    scroll-snap-type:x proximity;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .service-showcase-nav::-webkit-scrollbar{display:none}
  .service-tab{scroll-snap-align:start;min-height:44px!important;padding:0 13px!important}
  .service-tab strong{font-size:13px!important}
  .service-stage-main{min-height:250px!important;aspect-ratio:4/3!important}
  .service-stage-badges{left:12px!important;right:12px!important;top:12px!important}
  .service-stage-badges span{min-height:28px!important;padding:0 9px!important;font-size:9px!important}
  .service-stage-thumbs{
    display:flex!important;
    gap:8px!important;
    overflow-x:auto!important;
    padding:10px 12px!important;
    scrollbar-width:none;
    scroll-snap-type:x proximity;
  }
  .service-stage-thumbs::-webkit-scrollbar{display:none}
  .service-thumb{flex:0 0 29%!important;height:72px!important;scroll-snap-align:start}
  .service-stage-copy{padding:22px 16px 24px!important}
  .service-stage-copy h4{font-size:32px!important;margin-top:12px!important}
  .service-stage-lead{font-size:15.5px!important;line-height:1.55!important}
  .service-stage-points{margin-top:20px!important;gap:10px!important}
  .service-stage-points li{font-size:14px!important;grid-template-columns:20px minmax(0,1fr)!important;gap:10px!important}
  .service-stage-points li::before{width:20px!important;height:20px!important}
  .service-stage-actions{display:grid!important;grid-template-columns:1fr!important;gap:9px!important;margin-top:22px!important}
  .service-stage-actions a{width:100%!important;min-height:48px!important}
  .service-stage-controls{margin-top:18px!important;padding-top:16px!important}
  .service-stage-controls p{font-size:10.5px!important;max-width:60%!important}
  .service-arrow{width:44px!important;height:44px!important}

  /* Project/reference page: make photos the focus, keep copy easy to scan. */
  .references-hero{padding:50px 0 46px!important}
  .references-hero-grid{gap:18px!important}
  .references-hero h1{font-size:clamp(54px,17vw,72px)!important;line-height:.9!important}
  .references-hero-grid>p{font-size:15px!important;line-height:1.6!important}
  .home-intro-video{padding:12px 0!important}
  .home-intro-video .site-shell{width:calc(100% - 20px)!important}
  .home-intro-video video{box-shadow:none!important}

  .pro-project-showcase{padding:50px 0 78px!important}
  .pro-projects-head{margin-bottom:28px!important;gap:18px!important}
  .pro-projects-head h2{font-size:clamp(36px,10.5vw,46px)!important;max-width:12ch!important}
  .pro-projects-head>p{font-size:14.5px!important;line-height:1.62!important}
  .pro-project-index-wrap{margin-bottom:44px!important;padding:13px 0 17px!important}
  .pro-project-index{
    scroll-snap-type:x proximity;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
  }
  .pro-project-index a{min-height:44px!important;scroll-snap-align:start;padding-inline:12px!important}
  .pro-project-list{gap:58px!important}
  .pro-project-card{gap:23px!important;scroll-margin-top:86px!important}
  .pro-project-gallery{
    width:calc(100% + 28px)!important;
    margin-left:-14px!important;
    aspect-ratio:4/3!important;
    box-shadow:0 16px 40px rgba(17,20,22,.12)!important;
  }
  .pro-project-media-top{top:10px!important;left:10px!important;right:10px!important}
  .pro-project-media-top>span{min-height:28px!important;padding:0 9px!important}
  .pro-project-gallery-bottom{left:10px!important;right:10px!important;bottom:10px!important;gap:10px!important}
  .pro-project-dot{width:20px!important;height:4px!important}
  .pro-project-dot.is-active{width:30px!important}
  .pro-project-arrows button{width:44px!important;height:44px!important}
  .pro-project-kicker{padding-bottom:12px!important;margin-bottom:14px!important}
  .pro-project-meta{margin-bottom:13px!important;font-size:9.5px!important;letter-spacing:.105em!important}
  .pro-project-area{font-size:clamp(48px,15vw,62px)!important;margin-bottom:13px!important}
  .pro-project-copy h3{font-size:clamp(27px,8.5vw,36px)!important;line-height:1.03!important;margin-bottom:13px!important;max-width:18ch!important}
  .pro-project-body{font-size:14.5px!important;line-height:1.64!important}
  .pro-project-service-label{margin-top:20px!important}
  .pro-project-tags{gap:6px!important;margin-top:8px!important}
  .pro-project-tags span{font-size:10.5px!important;padding:7px 9px!important}

  /* Field notes / process imagery stays visual without consuming a whole screen per card. */
  .field-notes-section{padding:58px 0!important}
  .field-notes-head{margin-bottom:24px!important;padding-bottom:18px!important;gap:16px!important}
  .field-notes-head h2{font-size:clamp(36px,11vw,48px)!important}
  .field-notes-head>p{font-size:14.5px!important;line-height:1.62!important}
  .field-notes-video{min-height:330px!important}
  .field-note-card{min-height:245px!important}
  .field-notes-caption{left:14px!important;right:14px!important;bottom:14px!important}
  .field-notes-caption strong{font-size:17px!important}

  /* FAQ/forms: iOS-safe 16px controls and larger tap targets. */
  .faq-list summary{min-height:58px!important;padding:20px 52px 20px 0!important;font-size:18px!important;display:flex!important;align-items:center!important}
  .faq-list summary:after{width:38px!important;height:38px!important;right:0!important;top:50%!important;transform:translateY(-50%)!important}
  .faq-list details p{font-size:15px!important;line-height:1.65!important;margin:0 0 22px!important}
  .project-calculator{padding:16px!important;border-radius:0!important}
  .calculator-head{padding-bottom:20px!important}
  .calculator-head h3{font-size:27px!important}
  .calculator-layout{padding-top:20px!important;gap:14px!important}
  .calculator-sliders{gap:12px!important}
  .calculator-row{padding:16px!important;border-radius:12px!important;gap:12px!important}
  .calculator-row-head{gap:12px!important}
  .calculator-row-head strong{font-size:14px!important;max-width:60%!important}
  .calculator-row-head output{font-size:16px!important}
  .calculator-row input[type=range]{height:26px!important}
  .inquiry-form{padding:16px!important;border-radius:12px!important}
  .inquiry-fields{grid-template-columns:1fr!important;gap:10px!important}
  .inquiry-form input,.inquiry-form select,.inquiry-form textarea{font-size:16px!important}
  .inquiry-form input,.inquiry-form select{min-height:52px!important}
  .inquiry-form textarea{min-height:120px!important}
  .inquiry-submit{min-height:54px!important}
  .direct-contact{margin-top:28px!important;gap:16px!important}
  .direct-contact a{min-height:54px!important;justify-content:center!important}

  /* Footer remains complete, but uses two columns instead of one very long stack. */
  footer{padding-bottom:calc(102px + env(safe-area-inset-bottom))!important}
  .footer-grid{grid-template-columns:1fr 1fr!important;gap:30px 18px!important}
  .footer-grid>div:first-child{grid-column:1/-1!important}
  .brand-footer{width:max-content!important;max-width:100%!important}
  .brand-logo-footer{width:52px!important;min-width:52px!important}
  .footer-grid p{font-size:14px!important;line-height:1.65!important}
  .footer-bottom{margin-top:34px!important;gap:8px!important;line-height:1.6!important}

  /* Persistent mobile action bar + iPhone safe area. */
  .mobile-cta-bar{
    z-index:300!important;
    grid-template-columns:.82fr 1.18fr!important;
    gap:8px!important;
    padding:8px 10px calc(8px + env(safe-area-inset-bottom))!important;
    background:rgba(14,16,17,.94)!important;
    backdrop-filter:blur(14px)!important;
    -webkit-backdrop-filter:blur(14px)!important;
    border-top:1px solid rgba(255,255,255,.12)!important;
  }
  .mobile-cta-bar a{min-height:48px!important;font-size:13px!important}

  /* Legal/contact pages: keep header and cards manageable. */
  .legal-main{padding:52px 0 80px!important}
  .legal-intro{margin-bottom:38px!important;font-size:16px!important}
  .legal-section{padding:28px 0!important}
  .contact-page-card{min-height:160px!important;padding:20px!important}
  .map-card-head,.map-consent{padding:22px 18px!important}
  .map-frame{height:360px!important}
}

@media (max-width:390px){
  :root{--mobile-edge:12px}
  .brand-logo{width:34px!important;min-width:34px!important}
  .brand-name{font-size:17px!important}
  #berzan-language-switcher summary{min-width:46px!important;padding:0 6px!important}
  .mobile-nav summary{min-width:52px!important;padding:0 8px!important}
  .hero h1{font-size:clamp(38px,12.2vw,48px)!important}
  .pro-project-gallery{width:calc(100% + 24px)!important;margin-left:-12px!important}
  .footer-grid{grid-template-columns:1fr!important}
  .footer-grid>div:first-child{grid-column:auto!important}
}

@media (hover:none) and (pointer:coarse){
  a:hover,button:hover{transform:none!important}
}

/* Restored BERZAN opening screen: keep the page fixed while the intro is visible. */
html.berzan-intro-open,body.berzan-intro-open{overflow:hidden!important}
@media(max-width:600px){
  .site-intro-content{width:min(92vw,520px)}
  .site-intro-logo-wrap{gap:16px}
  .site-intro-logo-wrap img{width:76px;height:76px}
  .site-intro-wordmark strong{font-size:clamp(34px,11vw,54px)}
  .site-intro-wordmark small{font-size:9px;letter-spacing:.22em}
  .site-intro-content p{font-size:13px;letter-spacing:.055em;padding:0 12px}
}