/* Mobile enhancements – desktop layout is untouched (everything below is scoped to small screens,
   except the media-scaling rule, which has no visible effect on desktop). */
img,video,canvas,picture{max-width:100%;height:auto}
iframe,embed,object{max-width:100%}

.nav-toggle{display:none}

@media (max-width:860px){
  html,body{overflow-x:hidden}
  @supports (overflow:clip){html,body{overflow-x:clip}}

  /* Collapsible main menu */
  .js header .header-in{flex-wrap:wrap;row-gap:0}
  .js header .header-in>.logo{flex:1 1 0;min-width:0}
  .js header .header-in>.logo span{overflow-wrap:break-word}
  .js .nav-toggle{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;min-height:44px;padding:10px 16px;margin-left:auto;border:1.5px solid #0E3B36;border-radius:999px;background:transparent;color:#0E3B36;font:inherit;font-weight:600;font-size:16px;cursor:pointer}
  .js .nav-toggle:focus-visible{outline:3px solid #1F6F5F;outline-offset:2px}
  .nav-toggle .bars{position:relative;width:18px;height:2px;background:currentColor;border-radius:2px;transition:background .15s}
  .nav-toggle .bars::before,.nav-toggle .bars::after{content:"";position:absolute;left:0;width:18px;height:2px;background:currentColor;border-radius:2px;transition:transform .15s}
  .nav-toggle .bars::before{top:-6px}.nav-toggle .bars::after{top:6px}
  .nav-toggle[aria-expanded="true"] .bars{background:transparent}
  .nav-toggle[aria-expanded="true"] .bars::before{transform:translateY(6px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] .bars::after{transform:translateY(-6px) rotate(-45deg)}
  .js header .header-in>nav{display:none;flex:1 1 100%;flex-direction:column;align-items:stretch;gap:0;padding:12px 0 4px}
  .js header .header-in>nav.open{display:flex}
  .js header .header-in>nav a{display:flex;align-items:center;min-height:48px;padding:4px 0;border-bottom:1px solid #E2DED3}
  .js header .header-in>nav a.btn{justify-content:center;margin-top:16px;border-bottom:0;padding:12px 20px}

  /* Tap targets */
  .chips button,.seg2 button,.switch button,.seg button{min-height:44px}
  .footer-links a,.crumbs a,.toc a,.top>a:not(.logo){display:inline-flex;align-items:center;min-height:44px}
  .toc li{margin:0}
  .footer-links{gap:0 20px}
  .stepper button{min-width:44px;min-height:44px}
  .chk input,.extra input{min-width:22px;min-height:22px}

  /* Prevent sideways scrolling */
  .grid,.cards{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
  .related{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
  .two,.stats ul{grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
  .pk h4{white-space:normal}
  h1,h2,h3,h4,p,li,td,th,a{overflow-wrap:break-word}
  table{max-width:100%}
  pre,code{white-space:pre-wrap;word-break:break-word}
}

@media (max-width:420px){
  .nav-toggle .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .js .nav-toggle{padding:10px 13px}
}

@media (max-width:600px){
  .wrap{padding-left:20px;padding-right:20px}
  .vs{grid-template-columns:1fr}
  /* Readable body text: at least 16px */
  footer,.toc ol,.side-cta p,.res-sub,.meta,.disc,.crumbs,.card .more,
  .fld>span,.fld legend,.fld small,.seg2 button,.chips button,.tbl th,.rh-out table,
  .stats span,.pk .sub,.pk3 .s,.holding p,.toeslagen,.disclaimer,.consent,
  .calc .hint,.calc legend,.extra small,label,.vgl tr.grp th,.vgl thead th small,
  .pain-a small,.pk .amt small,.pk3 .a small{font-size:16px}
  [style*="font-size:15px"],[style*="font-size:14px"]{font-size:16px!important}
}
