/* coom.im — mobiele verbeteringen. Geldt ALLEEN op smalle schermen (<= 640px).
   Op desktop (> 640px) verandert er niets. */

@media (max-width: 640px){
  html, body{ overflow-x: hidden; }
  main, .hero, .box{ padding-left:16px !important; padding-right:16px !important; }

  /* topbar + footer */
  .topbar{ flex-wrap:wrap !important; gap:8px 12px !important; padding:12px 16px !important; font-size:13px; }
  .topbar span[style*="gap"]{ gap:10px !important; flex-wrap:wrap; }
  .topbar .right{ gap:10px !important; flex-wrap:wrap; }
  .signin{ padding:8px 14px !important; }
  .site-footer{ padding:12px 16px !important; }

  /* koppen + kaarten */
  h1{ font-size:clamp(22px,6.5vw,28px) !important; }
  h2{ font-size:17px !important; }
  .card, .box, .claim{ padding:14px !important; }
  .lead{ font-size:16px !important; }

  /* formulieren: velden full-width, rijen stapelen, grote tap-targets, geen iOS-zoom */
  .addrow{ flex-direction:column !important; align-items:stretch !important; }
  .addrow input, .addrow select, .addrow button, .addrow a.bluebtn{ width:100% !important; flex:1 1 auto !important; }
  .addrow input.host, .addrow select, .addrow input.value, .addrow input.ttl{ flex:1 1 auto !important; width:100% !important; }
  input, select, textarea{ font-size:16px !important; }
  button, .btn, .cta, a.cta, a.btn, .claim-btn, a.bluebtn, .logout, .rm{ min-height:44px; }
  a.cta, .cta, .btn, .claim-btn, a.bluebtn, .logout{ display:inline-flex; align-items:center; justify-content:center; }
  .claim .row{ flex-direction:column !important; }

  /* brede tabellen horizontaal scrollbaar i.p.v. proppen */
  .scrollx{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .scrollx table{ min-width:480px; }
  table{ font-size:13px; }
  th, td{ padding:7px 6px; }
}