/* ── mobile.css — weergave op gsm ───────────────────────────────────
   Alles in dit bestand staat binnen @media (max-width: 768px), zodat de
   desktopweergave ongewijzigd blijft. Wordt als laatste stijlblad geladen. */
@media (max-width: 768px) {

  /* ── Kop: laag, zonder kruimelpad en zonder achtergrondfoto ────────
     (een verborgen achtergrond wordt niet gedownload) */
  .hero .wrap        { padding-top: 28px; padding-bottom: 36px; gap: 0; }
  .hero h1           { margin-bottom: 14px; }
  .hero p.lead       { font-size: 1.06rem; margin-bottom: 22px; }
  .hero .bg-img,
  .pagehead .bg-img  { display: none; }
  .hero-card         { display: none; }
  .pagehead          { min-height: 0; padding: 26px 0 30px; }
  .pagehead p        { font-size: 1.06rem; margin-top: 12px; }
  .breadcrumb        { display: none; }

  /* Knoppen in de kop naast elkaar, minstens 48 px hoog */
  .hero .cta-row,
  .pagehead .kop-knoppen { gap: 10px; }
  .hero .cta-row .btn,
  .pagehead .kop-knoppen .btn { flex: 1 1 auto; justify-content: center; min-height: 48px; padding: .75rem 1.1rem; }

  /* Eerste blok na de kop minder hoog */
  .pagehead + .band  { padding-top: 26px; }

  /* ── Dienstpagina's: prijsvork direct na de kop, foto na de eerste
     alinea. Enkel de weergavevolgorde wijzigt, niet de HTML. ─────── */
  .svc-detail .body                     { display: flex; flex-direction: column; }
  .svc-detail .body > *                 { order: 3; }
  .svc-detail .body > .prijs-el         { order: 0; }
  .svc-detail .body > .media + h2,
  .svc-detail .body > .media + h2 + p   { order: 1; }
  .svc-detail .body > .media            { order: 2; margin-top: 8px; }
  .svc-detail .body > .prijs-kop        { margin-top: 0; }

  /* ── Tekst minstens 16 px (kleine lettertjes uitgezonderd) ──────── */
  .btn,
  .svc-body p,
  .svc-link,
  .svc-more,
  .aud p,
  .step p,
  .qa .ans,
  .feature p,
  .svc-detail .body p,
  .other-svc a,
  .callout,
  .form-subtitle,
  .field label,
  .info-row a,
  .info-row span,
  .info-row b,
  .split p,
  footer.site p,
  .foot-links a,
  .stat span,
  .socials a        { font-size: 1rem; }

  /* ── Tikvlakken minstens 44 px ──────────────────────────────────── */
  .logo             { display: inline-flex; align-items: center; min-height: 44px; }
  .socials a        { width: 44px; height: 44px; }
  .other-svc a      { display: flex; align-items: center; min-height: 48px; }
  .foot-links li    { margin-bottom: 0; }
  .foot-links a,
  footer.site p a,
  .foot-bottom a,
  .info-row a       { display: inline-block; padding: 11px 0; }
  .info-row div     { line-height: 1.4; }

  /* ── Cookiebanner compacter ─────────────────────────────────────── */
  #cookieBanner     { padding: 14px 16px; }
  .cookie-inner     { gap: 10px; }
  .cookie-inner p   { font-size: 1rem; line-height: 1.45; }
  .cookie-btns .btn { min-height: 46px; padding: .6rem 1rem; }
}