/* Mobiele finish: tikdoelen minimaal 44px, geen tekst onder 12px, geen horizontale overloop.
   Laadt als laatste, zodat deze regels de paginastijlen overschrijven. */
@media(max-width:760px){

  /* ---- tikdoelen ---- */
  .modebtn{width:44px;height:44px}
  .navtoggle{width:46px;height:46px}
  .dtab{min-height:44px;padding:0 16px;display:inline-flex;align-items:center;justify-content:center}
  .sldot{width:34px;height:34px;display:grid;place-items:center}
  .sldot::after{content:"";position:absolute;inset:-6px}
  .sldots{gap:2px}
  .qav{min-height:44px;padding:0 15px;display:inline-flex;align-items:center}
  .tgl{min-height:46px}
  .livebtn,.wlink,.lblink,.faqlnk,.antwlnk{min-height:44px;display:inline-flex;align-items:center}
  .logitem{min-height:56px}
  input:not([type="range"]):not([type="radio"]):not([type="checkbox"]),select,textarea,.btn,button.btn{min-height:46px}
  textarea{min-height:88px}
  .planpick label,.a11yopt{min-height:46px}
  input[type="radio"],input[type="checkbox"]{width:22px;height:22px;min-width:22px}
  .rng{height:44px}
  .capsom input{min-height:44px}

  /* ---- leesbaarheid: niets onder 12px ---- */
  .kicker,.mile,.altbadge,.dhost,.hint,.geensite,.reassure,.plantag,.rkl,.lalt,.mt,.cmeta,
  .lvtxt small,.sldots b,.sldots small,.dragcue b,.dragcue small,.velderr,.formvoet,.aanvraagnoot,
  .plan .pl,.pkgnoot,.rekenuitleg,.rkhint,.antw p,.faqvk,.sdlijst li,.sdwat li,.logmeer,.logmeta,
  .stats small,.fact small,.tbfeiten dd,.cfeiten dd,.cfeiten dt,.wcijfers dd,.artnr,.veldopt,
  .planpick small,.demotag,.dlegend,.panvoet,.checks li,.sm .sml,.smeta,.klein,small{font-size:.78rem!important}
  .kicker{font-size:.8rem!important}
  /* resterende microlabels */
  .bcpop .bck,.hoogtetag .m,.spoor .k,.sldots .slcue,.bbar span,.viewport .scrollhint,
  .artnr,.wtab,.rstap .rkop,.rstap .ralt,.plnr,.mmp,.a11ykop{font-size:.75rem!important}
  .hoogtetag{font-size:.75rem}
  .eyebrow,.ckick,.rfase,.logkop .h4,.logkop h3,.fld em,.planpick legend em,
  .vglkick,.vgltag,.natijd,.ijk i,.uitleg .ijk i{font-size:.75rem!important}
  /* tikdoelen, laatste ronde */
  header .logo{min-height:44px;display:inline-flex;align-items:center}
  .sldot{width:40px;height:40px}
  .livebtn{min-height:46px}
  .planpick input[type="radio"],.a11yopt input,input[type="radio"],input[type="checkbox"]{width:22px!important;height:22px!important;min-width:22px}
  .caplabel+.capsom input{min-width:64px}
  figcaption,figcaption small,figcaption span{font-size:.78rem!important}
  .rkchart text{font-size:16px}

  /* ---- geen horizontale overloop ---- */
  .route{grid-template-columns:1fr!important;gap:14px}
  .route .rstap{width:auto!important}
  .rstappen,.rstap,.routekaart{flex-direction:column!important}
  .rstappen{display:flex;gap:14px}
  .rstap{width:100%!important;flex:0 0 auto!important}
  .rstap+.rstap{border-left:none}
  .dcard,.wpaneel,.kostenpaneel,.routebox,.aanvraagform,.sdform{max-width:100%}
  .deck,.dcard{width:100%!important;max-width:100%!important;left:0!important;transform:none!important}
  .dcard .shot{max-width:100%}
  img,svg,video,canvas{max-width:100%}
  .wrap{overflow-x:clip}
}
@media(max-width:760px){
  .hoogtetag{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .hoogtetag .m{flex:0 0 auto}
  .kopreeks,.logkop{max-width:100%}
  .rk .alt,.rkstap .alt,span.alt,dl dt,.pvmeta dt,.vwmeta dt,.ckmeta dt,.rkmeta dt{font-size:.75rem!important}
}

/* ===== mobiele invoer en zwevende knoppen ===== */
@media(max-width:760px){
  /* iOS zoomt in zodra je een veld onder 16px aantikt; dat wil je niet */
  input:not([type=radio]):not([type=checkbox]):not([type=range]),
  textarea,select{font-size:16px!important}
  /* ruimte vrijhouden voor de home-indicator onderaan iPhones */
  .floatscan{bottom:calc(14px + env(safe-area-inset-bottom))}
  .a11ywidget{bottom:calc(14px + env(safe-area-inset-bottom))}
  .altbadge{bottom:calc(12px + env(safe-area-inset-bottom))}
}

/* het dienstenpaneel gebruikt binnen het mobiele menu de volle breedte */
@media(max-width:1000px){
  .navlinks .megamenu{position:static;width:auto;left:auto;right:auto;box-shadow:none;border:none;border-radius:0;padding:2px 0 6px;background:none;transform:none}
  .navlinks .megamenu .mmcard{padding:11px 10px!important}
  .navlinks .megamenu .mmcard small{display:block}
}

/* scanveld compacter op mobiel: de knop onder het veld, minder lucht */
@media(max-width:760px){
  .dtop{padding-bottom:14px;margin-bottom:14px}
  .dtop .flabel{margin-bottom:6px;font-size:.84rem}
  /* grid in plaats van wrappende flex: die rekte het veld in de hoogte uit */
  .scanrow{display:grid;grid-template-columns:1fr;gap:8px;padding:6px;margin-bottom:8px}
  .scanrow input{width:100%;padding:11px 12px}
  .scanrow>.btn{width:100%;justify-content:center;padding:12px 16px}
  .dtop .hint{font-size:.74rem;white-space:normal}
}

@media(max-width:760px){
  .dcard .phone{width:88px;right:12px;bottom:-12px;padding:12px 5px 6px}
  .dcard .phone::before{width:20px;height:3px;top:5px}
}

/* de licht/donker-knop hoort in het uitklapmenu, niet los in de balk */
@media(max-width:1000px){
  header .nav-cta .modebtn{display:none}
  .navlinks .modeitem{display:flex!important;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:12px 2px;margin-top:4px;border-top:1px solid var(--lijn);background:none;border-left:0;border-right:0;border-bottom:0;font:inherit;font-size:.94rem;font-weight:600;color:var(--ink);cursor:pointer}
  .navlinks .modeitem .modeic{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--grijs-licht);color:var(--paars)}
  .navlinks .modeitem svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
  .navlinks .modeitem .zon{display:none}
  html.dark .navlinks .modeitem .zon{display:block}
  html.dark .navlinks .modeitem .maan{display:none}
  html.dark .navlinks .modeitem{color:var(--ink)}
  html.dark .navlinks .modeitem .modeic{background:#2A2140;color:var(--geel)}
}