/* ===== 1april.net mobiel-responsive laag — Lex 2026-06-03 ===== */
/* Geladen NA css/style.css (in boven.php én boven2.php). Desktop blijft  */
/* volledig ongewijzigd: alles zit in @media (max-width:800px).           */
/* De .net-markup gebruikt vaste 979px-breedtes (body / #header /         */
/* #content / #content1) en float-kolommen (#content_left /               */
/* #content_left_left / #content_left_right / #content_right). Op mobiel   */
/* maken we die vloeiend en stapelen we ze verticaal. !important is nodig  */
/* omdat style.css zeer specifieke id-selectors met vaste px-breedtes zet. */

@media (max-width: 800px) {

  html { overflow-x: hidden; }

  /* ---------- root-containers vloeiend ---------- */
  body {
    width: auto !important;
    max-width: 979px !important;
    margin: 0 auto !important;
    -webkit-text-size-adjust: 100%;
  }
  #header, #content, #content1, #content_left,
  #content_left_left, #content_left_right, #content_right,
  #footer, #footer2 {
    width: auto !important;
    max-width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* verticale scheidings-PNG van #content weg op mobiel */
  #content { background: none !important; }

  /* ---------- header-afbeelding schaalt mee ---------- */
  #header { height: auto !important; margin: 0 !important; }
  #header img { width: 100% !important; height: auto !important; display: block; }

  /* ---------- topnav-balk: links laten wrappen ---------- */
  #menunav {
    height: auto !important;
    margin: 0 !important;
    padding: 8px 6px !important;
    line-height: 2.1;
    text-align: center;
    border-left: 0 !important;
    border-right: 0 !important;
  }
  #menunav a, #menunav u a {
    display: inline-block !important;
    margin: 4px 3px !important;
    padding: 8px 10px !important;
    font-size: 16px !important;
  }

  /* breadcrumb vloeiend */
  #content_left_breadcrumb {
    width: auto !important;
    height: auto !important;
    padding: 10px 12px !important;
    word-break: break-word;
  }

  /* ---------- hoofd-kolommen stapelen ---------- */
  #content_left { padding: 0 0 10px 0 !important; }

  #content_left_left { padding: 0 12px !important; }
  #content_left_left h1, #content_left_left p { width: auto !important; }
  #content_left_left ul { margin: 0 0 8px 0 !important; }
  #content_left_left li a:link, #content_left_left li a:visited {
    display: block !important;
    width: auto !important;
    height: auto !important;
    padding: 12px 12px !important;
    font-size: 16px !important;
  }

  #content_left_right {
    width: auto !important;
    margin: 0 !important;            /* desktop had margin-top:-17px */
    padding: 0 12px !important;
  }
  #content_left_right h1, #content_right h1, #content_right h1.red {
    width: auto !important;
    height: auto !important;
    box-sizing: border-box !important;
  }
  #content_left_right p { margin-left: 0 !important; }

  /* alle content-media schalen mee */
  #content img, #content video, #content iframe,
  #content embed, #content object {
    max-width: 100% !important;
    height: auto !important;
  }
  #content_left_right img.float, img.float, img.edit {
    float: none !important;
    display: block;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 0 10px 0 !important;
  }

  /* "verras jezelf"-knop netjes vol-breedte */
  .gaterugbut {
    width: 100% !important;
    height: auto !important;
    margin: 8px 0 12px 0 !important;
    padding: 12px 10px !important;
    box-sizing: border-box;
  }

  /* lay-out-/brede tabellen vloeiend */
  #content_left_right table, #content_right table {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  #content_left_right table td { word-break: break-word; }

  /* SMS-/telefoon-grafiek niet laten overlopen */
  #entry_sms_links, #entry_sms_rechts,
  #widebar_sms_rechts {
    float: none !important;
    width: auto !important;
    max-width: 100% !important;
  }

  /* ---------- rechter-kolom (zoek + ads) eronder ---------- */
  #content_right { padding: 12px !important; }
  #content_right form { padding: 0 0 14px 0 !important; }
  #content_right input.zoeken { width: 65% !important; box-sizing: border-box; }
  #copyright { margin-left: 0 !important; }

  /* ---------- footer vloeiend ---------- */
  #footer, #footer2 {
    height: auto !important;
    margin: 0 0 20px 0 !important;
    padding: 16px 14px !important;
    box-sizing: border-box;
    line-height: 1.5;
  }
  #footer p.left { padding: 10px 0 0 0 !important; }

  /* leesbaarheid */
  h1 { font-size: 1.4em !important; line-height: 1.3 !important; }
}