/* Mobiele laag voor het Claude Design-ontwerp. Grijpt pas onder 900px; desktop blijft ongewijzigd. */
@media (max-width:900px){
  .m-cols3,.m-cols4{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .m-navlinks{display:none!important}
  nav{width:min(760px,100%)!important;padding-left:14px!important;padding-right:6px!important}
}
@media (max-width:640px){
  .m-grid{grid-template-columns:minmax(0,1fr)!important}
  section{padding-left:20px!important;padding-right:20px!important}
  section:not([data-screen-label="Header"]):not([data-screen-label="Hero"]):not([data-screen-label="CTA"]){padding-top:56px!important;padding-bottom:56px!important}
  section[data-screen-label="CTA"]{padding-bottom:56px!important}
  section[data-screen-label="Header"]{padding-bottom:48px!important}
  section[data-screen-label="Header"] nav + div{margin-top:48px!important}
  h1{font-size:34px!important;line-height:1.1!important}
  h2{font-size:28px!important}
  h3{font-size:22px!important}
  .m-img{height:260px!important;min-height:0!important}
  .m-card{padding:24px!important}
  .m-ctabox{padding:28px 24px!important}
  .m-ctatitle{font-size:24px!important}
  footer{padding-left:20px!important;padding-right:20px!important;padding-top:56px!important}
  /* homepage */
  section[data-screen-label="Hero"]{height:560px!important}
  section[data-screen-label="Hero"] > div:last-child{padding:0 20px 28px!important}
  section[data-screen-label="Hero"] > div:last-child > div:last-child{min-width:0!important;width:100%}
  section[data-screen-label="Intro"] .m-introtext{font-size:24px!important;margin-bottom:40px!important}
  section[data-screen-label="Intro"] .m-grid > div:not(.m-img){height:auto!important;min-height:0!important;gap:24px}
  .m-svclist{flex-direction:row!important;flex-wrap:wrap;gap:6px}
  .m-svclist button{border-bottom:none!important;padding:10px 12px!important;border-radius:999px!important;border:1px solid #2a2a2a!important}
  .m-svccard{padding:24px!important}
  .m-steps{padding:28px 0!important}
  .m-steps > span{font-size:13px!important}
  .m-steps > div{font-size:22px!important}
  .m-inlineh2{font-size:24px!important}
  .m-fact{font-size:28px!important}
}
@media (max-width:640px){
  nav > a:first-child > span:last-child > span:first-child{font-size:14px!important}
  nav > a:first-child > span:last-child > span:last-child{font-size:9px!important;letter-spacing:.06em!important}
  nav > div:last-child{display:none!important} /* telefoon + knop zitten in het uitklapmenu */
}
@media (max-width:640px){
  section[data-screen-label="Filters"]{padding-top:32px!important;padding-bottom:0!important}
  section[data-screen-label="Aanbod"]{padding-top:24px!important}
}
/* mobiel menu (hamburger) — eigen laag, knop en paneel staan buiten de React-boom in <body> */
@media (max-width:900px){
  nav{padding-right:56px!important}
  .m-menubtn{position:absolute;z-index:60;width:44px;height:44px;border:1px solid #3a3a3a;border-radius:8px;background:rgba(20,20,20,.92);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .m-menubtn i{display:block;width:20px;height:2px;background:#fff;border-radius:2px;transition:transform .18s,opacity .18s}
  .m-menubtn.open i:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .m-menubtn.open i:nth-child(2){opacity:0}
  .m-menubtn.open i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .m-menu{position:absolute;left:0;right:0;z-index:59;background:#0d0d0d;border-top:1px solid #262626;border-bottom:1px solid #262626;display:none;flex-direction:column;padding:8px 20px 16px;box-shadow:0 20px 40px rgba(0,0,0,.45);font-family:'Hanken Grotesk',Helvetica,Arial,sans-serif}
  .m-menu.open{display:flex}
  .m-menu a{color:#fff;font-size:18px;font-weight:500;padding:15px 0;border-bottom:1px solid #1f1f1f;text-decoration:none}
  .m-menu a:last-child{border-bottom:0}
  .m-menu a.m-cta{color:#f05a1a;font-weight:600}
  .m-menubtn i{pointer-events:none}
}
@media (min-width:901px){.m-menubtn,.m-menu{display:none!important}}
@media (max-width:640px){
  section[data-screen-label="Fotos"] > div > div:first-child{height:260px!important}
  section[data-screen-label="Fotos"] button{min-width:0!important;width:calc((100% - 24px) / 4)!important;height:56px!important}
}
@media (max-width:640px){
  section[data-screen-label="Galerij"] .m-grid{grid-template-rows:auto!important}
  section[data-screen-label="Galerij"] .m-grid > div{height:220px;grid-row:auto!important}
  section[data-screen-label="Galerij"] .m-grid > div:first-child{height:260px}
  aside{position:static!important}
}