/* styles.css · responsieve laag over de inline opmaak heen.
   Gegenereerd door tools/statisch_maken.py · niet met de hand bijwerken. */

html, body { max-width: 100%; }
img, svg, video { max-width: 100%; height: auto; }

/* Uitklapknop van de navigatie. Op de desktop onzichtbaar. */
.mg-nav-knop { display: none; background: none; border: 1px solid #E1DCCF;
  width: 42px; height: 42px; padding: 0; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.mg-nav-streep { display: block; width: 18px; height: 1.5px; background: #0E1112;
  transition: transform 0.2s ease, opacity 0.2s ease; }

/* Hover-effecten die eerder door de ontwerp-runtime werden gezet. */
.mg-hv-1:hover { background:#324023;color:#F6F4EE; }
.mg-hv-2:hover { color:#0E1112; }
.mg-hv-3:hover { background:#FFFFFF;color:#0E1112; }
.mg-hv-4:hover { border-color:#0E1112; }
.mg-hv-5:hover { background:#E7E2D6;color:#0E1112; }
.mg-hv-6:hover { color:#F6F4EE; }
.mg-hv-7:hover { color:#3F4A2E; }
.mg-hv-8:hover { background:#EFEBE1; }
.mg-hv-9:hover { filter:brightness(0.95);color:#0E1112; }
.mg-hv-10:hover { background:#324023; }
.mg-hv-11:hover { border-color:#F6F4EE;color:#F6F4EE; }
.mg-hv-nav:hover { background:#324023; color:#F6F4EE; }

/* Tablet */
@media (max-width: 1024px) {
  .mg-wrap { padding-left: 24px !important; padding-right: 24px !important; }
  .mg-grid--cards { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .mg-fs-96 { font-size: 75px !important; }
  .mg-fs-66 { font-size: 51px !important; }
  .mg-fs-64 { font-size: 50px !important; }
  .mg-fs-60 { font-size: 47px !important; }
  .mg-fs-56 { font-size: 44px !important; }
  .mg-fs-52 { font-size: 41px !important; }
  .mg-fs-50 { font-size: 39px !important; }
  .mg-fs-48 { font-size: 37px !important; }
  .mg-fs-46 { font-size: 36px !important; }
  .mg-fs-44 { font-size: 34px !important; }
  .mg-fs-42 { font-size: 33px !important; }
  .mg-fs-40 { font-size: 31px !important; }
}

/* Telefoon */
@media (max-width: 760px) {
  body { overflow-x: hidden; }
  .mg-nav-knop { display: inline-flex; }
  .mg-wrap { padding-left: 20px !important; padding-right: 20px !important; }
  .mg-grid--pair, .mg-grid--cards { grid-template-columns: minmax(0, 1fr) !important; }
  .mg-grid--foot { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .mg-h-auto { height: auto !important; min-height: 420px; }
  .mg-deco { max-width: 100vw !important; }
  input, textarea, select { font-size: 16px !important; }
  .mg-nav .mg-nav-balk { padding-top: 12px !important; padding-bottom: 12px !important; }
  .mg-nav .mg-nav-menu { position: absolute; top: 100%; left: 0; right: 0;
    background: #F6F4EE; border-bottom: 1px solid #E1DCCF;
    flex-direction: column; align-items: stretch !important;
    gap: 0 !important; padding: 4px 20px 20px; display: none !important; }
  .mg-nav[data-open="true"] .mg-nav-menu { display: flex !important; }
  .mg-nav .mg-nav-link { padding: 15px 0; border-bottom: 1px solid #E1DCCF; font-size: 16px; }
  .mg-nav .mg-nav-link--actief { color: #0E1112 !important; }
  .mg-nav .mg-nav-cta { justify-content: center; margin-top: 18px;
    padding: 15px 18px !important; font-size: 15px !important; }
  .mg-nav[data-open="true"] .mg-nav-streep:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
  .mg-nav[data-open="true"] .mg-nav-streep:nth-child(2) { opacity: 0; }
  .mg-nav[data-open="true"] .mg-nav-streep:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
  .mg-fs-96 { font-size: 39px !important; }
  .mg-fs-66 { font-size: 31px !important; }
  .mg-fs-64 { font-size: 30px !important; }
  .mg-fs-60 { font-size: 29px !important; }
  .mg-fs-56 { font-size: 28px !important; }
  .mg-fs-52 { font-size: 27px !important; }
  .mg-fs-50 { font-size: 26px !important; }
  .mg-fs-48 { font-size: 26px !important; }
  .mg-fs-46 { font-size: 25px !important; }
  .mg-fs-44 { font-size: 25px !important; }
  .mg-fs-42 { font-size: 24px !important; }
  .mg-fs-40 { font-size: 24px !important; }
  .mg-fs-38 { font-size: 23px !important; }
  .mg-fs-36 { font-size: 23px !important; }
  .mg-fs-34 { font-size: 22px !important; }
  .mg-fs-33 { font-size: 22px !important; }
  .mg-fs-32 { font-size: 22px !important; }
  .mg-fs-30 { font-size: 22px !important; }
  .mg-pd-1 { padding: 7px 18px !important; }
  .mg-pd-2 { padding: 16px 20px !important; }
  .mg-pd-3 { padding: 40px 20px 40px !important; }
  .mg-pd-4 { padding: 14px 18px !important; }
  .mg-pd-5 { padding: 20px 18px !important; }
  .mg-pd-6 { padding: 48px 0 !important; }
  .mg-pd-7 { padding: 0 20px !important; }
  .mg-pd-8 { padding: 56px 0 0 !important; }
  .mg-pd-9 { padding: 24px 20px !important; }
  .mg-pd-10 { padding: 56px 0 !important; }
  .mg-pd-11 { padding: 56px 20px !important; }
  .mg-pd-12 { padding: 8px 0 56px !important; }
  .mg-pd-13 { padding: 6px 0 6px 18px !important; }
  .mg-pd-14 { padding: 22px 18px !important; }
  .mg-pd-15 { padding: 56px 0 !important; }
  .mg-pd-16 { padding: 56px 0 !important; }
  .mg-pd-17 { padding: 40px 20px !important; }
  .mg-pd-18 { padding: 40px 20px !important; }
  .mg-pd-19 { padding: 0 0 56px !important; }
  .mg-pd-20 { padding: 36px 20px !important; }
  .mg-pd-21 { padding: 0 20px 24px 0 !important; }
  .mg-pd-22 { padding: 32px !important; }
  .mg-pd-23 { padding: 16px 18px !important; }
  .mg-pd-24 { padding: 40px 0 32px !important; }
  .mg-pd-25 { padding: 48px 20px 40px !important; }
  .mg-pd-26 { padding: 32px 20px !important; }
  .mg-pd-27 { padding: 32px !important; }
  .mg-pd-28 { padding: 22px 18px !important; }
  .mg-pd-29 { padding: 32px 18px !important; }
  .mg-pd-30 { padding: 30px 18px !important; }
  .mg-pd-31 { padding: 16px 18px !important; }
  .mg-pd-32 { padding: 48px 20px 40px !important; }
  .mg-pd-33 { padding: 30px 18px !important; }
  .mg-pd-34 { padding: 34px 18px !important; }
  .mg-pd-35 { padding: 32px 18px !important; }
  .mg-pd-36 { padding: 48px 20px 56px !important; }
  .mg-pd-37 { padding: 26px 18px !important; }
  .mg-pd-38 { padding: 32px 20px 32px !important; }
  .mg-pd-39 { padding: 15px 18px !important; }
  .mg-pd-40 { padding: 34px 20px 40px !important; }
  .mg-pd-41 { padding: 40px 20px !important; }
  .mg-gp-1 { gap: 18px !important; }
  .mg-gp-2 { gap: 28px !important; }
  .mg-gp-3 { gap: 28px !important; }
  .mg-gp-4 { gap: 22px !important; }
  .mg-gp-5 { gap: 22px !important; }
  .mg-gp-6 { gap: 28px !important; }
}

@media (max-width: 460px) {
  .mg-grid--foot { grid-template-columns: minmax(0, 1fr) !important; }
}