/* ==========================================================================
   Soft Structuralism met koperaccent
   Kleur, ruimte en beweging staan hier; de teksten staan in index.html en de
   gegevens in bedrijf.js. Wijzig een maat op één plek: de custom properties.
   ========================================================================== */

@font-face {
  font-family: 'Clash Display';
  src: url('/fonts/clash-display-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Clash Display';
  src: url('/fonts/clash-display-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/fonts/jakarta-latin.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
}

:root {
  --grond: #f2f2ef;
  --grond-stil: #eceae5;
  --vlak: #ffffff;
  --diep: #16191c;
  --inkt: #14171a;
  --inkt-zacht: #5f666d;
  --inkt-stil: #6b7177;      /* 4.9:1 op wit, was #8c9298 met 3.1:1 */
  --koper: #b06f3c;          /* iconen, lijnen, grote koppen: 3:1 volstaat */
  --koper-tekst: #8a5228;    /* kleine tekst: haalt 5.3:1 op het kopervlak */
  --koper-vlak: #f4e9df;
  --hairline: rgba(20, 23, 26, 0.07);
  --hairline-sterk: rgba(20, 23, 26, 0.12);

  --schaduw-zacht: 0 1px 2px rgba(20, 23, 26, .03), 0 8px 24px rgba(20, 23, 26, .04), 0 32px 64px rgba(20, 23, 26, .04);
  --schaduw-diep: 0 2px 4px rgba(20, 23, 26, .04), 0 16px 40px rgba(20, 23, 26, .07), 0 48px 96px rgba(20, 23, 26, .06);

  --straal: 2rem;
  --straal-kern: 1.625rem;
  --veer: cubic-bezier(0.32, 0.72, 0, 1);
  --veer-kort: cubic-bezier(0.22, 1, 0.36, 1);

  --marge: clamp(1.15rem, 4vw, 3rem);
  --breed: 76rem;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 7rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--grond);
  color: var(--inkt);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Filmkorrel: vast, doorklikbaar, buiten de scrollende laag zodat er geen
   herteken-storm ontstaat bij het scrollen. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: .028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 {
  font-family: 'Clash Display', 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.02;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2.6rem, 7.4vw, 5.2rem); }
h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.06; }
h3 { font-size: 1.0625rem; line-height: 1.35; letter-spacing: -0.015em; }
p { margin: 0; }
em { font-style: normal; color: var(--koper); }

a { color: inherit; text-decoration: none; }

.omhulsel {
  width: 100%;
  max-width: var(--breed);
  margin-inline: auto;
  padding-inline: var(--marge);
}

.overslaan {
  position: absolute; left: -9999px; top: 0;
  background: var(--diep); color: #fff; padding: .75rem 1.25rem; z-index: 60;
  border-radius: 0 0 1rem 0;
}
.overslaan:focus { left: 0; }

/* ---------- demolint ---------- */
.demo-lint {
  margin: 0;
  padding: .55rem var(--marge);
  background: var(--diep);
  color: rgba(255,255,255,.72);
  font-size: .7rem;
  letter-spacing: .06em;
  text-align: center;
}

/* ---------- scrollvoortgang ---------- */
.voortgang {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  z-index: 45; pointer-events: none; background: transparent;
}
.voortgang-vulling {
  display: block; height: 100%; width: 100%;
  background: var(--koper);
  transform: scaleX(0); transform-origin: 0 50%;
  will-change: transform;
}

/* ---------- navigatie ---------- */
.nav-zone {
  position: sticky; top: 0; z-index: 40;
  padding-top: 1.25rem;
  pointer-events: none;
}

.nav-pil {
  pointer-events: auto;
  width: max-content;
  max-width: calc(100% - (var(--marge) * 2));
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: clamp(.6rem, 2vw, 2rem);
  padding: .5rem .5rem .5rem 1.25rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .62);
  border: 1px solid rgba(255, 255, 255, .8);
  box-shadow: 0 1px 2px rgba(20,23,26,.03), 0 12px 32px rgba(20,23,26,.06);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  transition: transform .7s var(--veer), background .7s var(--veer), box-shadow .7s var(--veer);
}

.nav-pil.gedoken {
  background: rgba(255, 255, 255, .86);
  box-shadow: var(--schaduw-zacht);
}

.merk { display: flex; align-items: center; gap: .55rem; }
.merk-teken {
  display: grid; place-items: center;
  width: 2rem; height: 2rem; border-radius: 999px;
  background: var(--koper-vlak); color: var(--koper);
}
.merk-naam {
  font-family: 'Clash Display', sans-serif;
  font-weight: 700; letter-spacing: .13em; font-size: .82rem;
}

.nav-links {
  display: flex; gap: 1.4rem; list-style: none; margin: 0; padding: 0;
  font-size: .8125rem; color: var(--inkt-zacht);
}
.nav-links a {
  position: relative; padding-block: .35rem;
  transition: color .45s var(--veer-kort);
}
.nav-links a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--koper);
  transform: scaleX(0); transform-origin: 100% 50%;
  transition: transform .55s var(--veer);
}
.nav-links a:hover { color: var(--inkt); }
.nav-links a:hover::after { transform: scaleX(1); transform-origin: 0 50%; }

/* ---------- knoppen ---------- */
.knop {
  display: inline-flex; align-items: center; gap: .7rem;
  padding: .55rem .55rem .55rem 1.15rem;
  border-radius: 999px;
  font-size: .8125rem; font-weight: 600; letter-spacing: -.01em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .5s var(--veer), background .5s var(--veer),
              color .5s var(--veer), box-shadow .5s var(--veer);
  will-change: transform;
}
.knop-groot { padding: .75rem .75rem .75rem 1.5rem; font-size: .9375rem; }

.knop-primair { background: var(--diep); color: #fff; }
.knop-primair:hover { background: #000; box-shadow: 0 12px 28px rgba(20,23,26,.22); }
.knop-primair .knop-cirkel { background: rgba(255,255,255,.13); }

.knop-stil {
  background: rgba(255,255,255,.7);
  color: var(--inkt);
  border-color: var(--hairline-sterk);
}
.knop-stil:hover { background: #fff; box-shadow: var(--schaduw-zacht); }
.knop-stil .knop-cirkel { background: rgba(20,23,26,.06); }

.knop-cirkel {
  display: grid; place-items: center;
  width: 2rem; height: 2rem; border-radius: 999px;
  flex: 0 0 auto;
  transition: transform .55s var(--veer);
}
.knop-groot .knop-cirkel { width: 2.35rem; height: 2.35rem; }
.knop:hover .knop-cirkel { transform: translate3d(2px, -1px, 0) scale(1.06); }
.knop:active { transform: scale(.975); }

.knop:focus-visible, a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--koper);
  outline-offset: 3px;
}

/* ---------- burger ---------- */
.burger {
  display: none;
  position: relative;
  width: 2.6rem; height: 2.6rem;
  border-radius: 999px; border: 1px solid var(--hairline-sterk);
  background: rgba(255,255,255,.6);
  cursor: pointer;
}
.burger-lijn {
  position: absolute; left: 50%; width: 1.05rem; height: 1.2px;
  background: var(--inkt); border-radius: 2px;
  transition: transform .6s var(--veer), opacity .35s var(--veer);
}
.burger-boven { transform: translate(-50%, -3.5px); }
.burger-onder { transform: translate(-50%, 3.5px); }
.burger[aria-expanded='true'] .burger-boven { transform: translate(-50%, 0) rotate(45deg); }
.burger[aria-expanded='true'] .burger-onder { transform: translate(-50%, 0) rotate(-45deg); }

/* ---------- menu-overlay ---------- */
/* [hidden] moet winnen van de display hieronder. Zonder deze regel blijft de
   overlay als onzichtbare laag over de hele pagina liggen en vangt hij elke klik
   op: het formulier, elke link en de belknop doen dan niets. */
.menu-overlay[hidden] { display: none; }

.menu-overlay {
  position: fixed; inset: 0; z-index: 39;
  display: flex; flex-direction: column; justify-content: center;
  pointer-events: none;
  gap: 2.5rem;
  padding: 6rem var(--marge) 3rem;
  background: rgba(242, 242, 239, .82);
  backdrop-filter: blur(28px) saturate(1.4);
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
  opacity: 0;
  transition: opacity .6s var(--veer);
}
.menu-overlay.zichtbaar { opacity: 1; pointer-events: auto; }

.menu-lijst { list-style: none; margin: 0; padding: 0; }
.menu-lijst li { overflow: hidden; }
.menu-lijst a {
  display: block;
  font-family: 'Clash Display', sans-serif;
  font-weight: 600; font-size: clamp(2rem, 9vw, 3rem);
  letter-spacing: -.03em; line-height: 1.28;
  transform: translate3d(0, 105%, 0);
  transition: transform .8s var(--veer);
}
.menu-overlay.zichtbaar .menu-lijst a { transform: translate3d(0, 0, 0); }
.menu-overlay.zichtbaar li:nth-child(1) a { transition-delay: .06s; }
.menu-overlay.zichtbaar li:nth-child(2) a { transition-delay: .12s; }
.menu-overlay.zichtbaar li:nth-child(3) a { transition-delay: .18s; }
.menu-overlay.zichtbaar li:nth-child(4) a { transition-delay: .24s; }
.menu-overlay.zichtbaar li:nth-child(5) a { transition-delay: .30s; }

.menu-voet { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.menu-plaats { font-size: .8125rem; color: var(--inkt-zacht); }

/* ---------- onthullen bij scrollen ---------- */
/* Alleen verbergen als er ook JavaScript is om het weer zichtbaar te maken.
   Zonder deze voorwaarde staat de hele pagina op opacity 0 zodra app.js niet
   laadt, en ziet de bezoeker niets. Browsers die (scripting) niet kennen slaan
   het blok over en tonen alles meteen: dat is de veilige kant om op te vallen. */
@media (scripting: enabled) {
  .onthul {
    opacity: 0;
    transform: translate3d(0, 3.5rem, 0);
    filter: blur(9px);
    transition: opacity .9s var(--veer), transform .9s var(--veer), filter .9s var(--veer);
    will-change: transform, opacity;
  }
  .onthul.in-beeld { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); will-change: auto; }
}

/* ---------- hero ---------- */
.hero { padding: clamp(3.5rem, 9vw, 7rem) 0 clamp(4rem, 8vw, 6rem); }

.hero-raster {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.pil {
  display: inline-block;
  padding: .3rem .85rem;
  border-radius: 999px;
  background: var(--koper-vlak);
  color: var(--koper-tekst);
  font-size: .625rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .2em;
  margin-bottom: 1.5rem;
}

.lood {
  max-width: 34rem;
  margin-top: 1.75rem;
  color: var(--inkt-zacht);
  font-size: 1.0625rem;
}

.hero-acties { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.5rem; }
.hero-tekst .onthul:nth-child(2) { transition-delay: .08s; }
.hero-tekst .onthul:nth-child(3) { transition-delay: .16s; }
.hero-tekst .onthul:nth-child(4) { transition-delay: .24s; }

/* ---------- dubbele bezel ---------- */
.bezel {
  padding: .5rem;
  border-radius: var(--straal);
  background: rgba(20, 23, 26, .035);
  border: 1px solid var(--hairline);
  transition: transform .7s var(--veer), box-shadow .7s var(--veer);
}
.bezel-kern {
  border-radius: var(--straal-kern);
  background: var(--vlak);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.9), var(--schaduw-zacht);
  height: 100%;
}

.paneel-kern { padding: 1.75rem; }

.status-regel {
  display: flex; align-items: center; gap: .6rem;
  padding-bottom: 1.25rem; margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--hairline);
}
.status-stip {
  width: .5rem; height: .5rem; border-radius: 999px;
  background: var(--inkt-stil);
  box-shadow: 0 0 0 0 rgba(176, 111, 60, .5);
}
.status-stip.open { background: #4f8a5b; animation: pols 2.6s var(--veer) infinite; }
@keyframes pols {
  0%   { box-shadow: 0 0 0 0 rgba(79, 138, 91, .45); }
  70%  { box-shadow: 0 0 0 .55rem rgba(79, 138, 91, 0); }
  100% { box-shadow: 0 0 0 0 rgba(79, 138, 91, 0); }
}
.status-tekst { font-size: .8125rem; color: var(--inkt-zacht); }

.paneel-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.35rem; }
.paneel-lijst li { display: flex; gap: .9rem; }
.paneel-icoon {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 2.35rem; height: 2.35rem; border-radius: .85rem;
  background: var(--grond-stil); color: var(--koper);
}
.paneel-lijst p { font-size: .8125rem; color: var(--inkt-zacht); margin-top: .2rem; }

/* ---------- secties ---------- */
.sectie { padding-block: clamp(4.5rem, 11vw, 9rem); }
.sectie-stil { background: var(--grond-stil); }
.sectie-kop { max-width: 44rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.sectie-lood { margin-top: 1.25rem; color: var(--inkt-zacht); max-width: 38rem; }

/* ---------- bento ---------- */
.bento {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1rem;
}
.bento > * { grid-column: span 2; }
.bento-groot { grid-column: span 3; grid-row: span 2; }
.bento-breed { grid-column: span 4; }

.kaart-kern { padding: 1.75rem; display: flex; flex-direction: column; gap: .75rem; }
.kaart-icoon {
  display: grid; place-items: center;
  width: 3rem; height: 3rem; border-radius: 1rem;
  background: var(--grond-stil); color: var(--koper);
  margin-bottom: .5rem;
  transition: transform .7s var(--veer), background .7s var(--veer);
}
.kantel:hover .kaart-icoon { transform: translate3d(0, -3px, 0); background: var(--koper-vlak); }
.kaart-kern p { font-size: .875rem; color: var(--inkt-zacht); }

.kaart-punten {
  list-style: none; margin: .75rem 0 0; padding: 0;
  display: grid; gap: .5rem;
  font-size: .8125rem; color: var(--inkt-zacht);
}
.kaart-punten li { padding-left: 1rem; position: relative; }
.kaart-punten li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: .4rem; height: 1px; background: var(--koper);
}

.kaart-donker {
  background: var(--diep);
  color: rgba(255,255,255,.92);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.12), var(--schaduw-diep);
}
.kaart-donker p { color: rgba(255,255,255,.62); }
.kaart-donker .kaart-icoon { background: rgba(255,255,255,.08); color: #dda678; }

.kantel { will-change: transform; }
.kantel:hover { box-shadow: var(--schaduw-diep); }

/* ---------- stappen ---------- */
.stappen {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem;
  counter-reset: stap;
}
.stap { border-top: 1px solid var(--hairline-sterk); padding-top: 1.5rem; }
.stap:nth-child(2) { transition-delay: .08s; }
.stap:nth-child(3) { transition-delay: .16s; }
.stap:nth-child(4) { transition-delay: .24s; }
.stap-nummer {
  display: block;
  font-family: 'Clash Display', sans-serif;
  font-size: .75rem; letter-spacing: .18em; color: var(--koper-tekst);
  margin-bottom: 1rem;
}
.stap h3 { margin-bottom: .6rem; }
.stap p { font-size: .875rem; color: var(--inkt-zacht); }

/* ---------- tarieven ---------- */
.tarief-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.tarief-kern { padding: 1.75rem; }
.tarief-label { font-size: .6875rem; text-transform: uppercase; letter-spacing: .16em; color: var(--inkt-stil); }
.tarief-bedrag {
  font-family: 'Clash Display', sans-serif; font-weight: 600;
  font-size: clamp(2.2rem, 4.5vw, 3rem); letter-spacing: -.03em;
  margin: .75rem 0 .5rem;
}
.tarief-uitleg { font-size: .8125rem; color: var(--inkt-zacht); }
.tarief-raster .bezel:nth-child(2) { transition-delay: .08s; }
.tarief-raster .bezel:nth-child(3) { transition-delay: .16s; }

/* ---------- werkgebied ---------- */
.werkgebied-raster {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.plaats-kern { padding: 1.75rem; }
.plaats-lijst {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .5rem;
}
.plaats-lijst li {
  padding: .45rem .95rem;
  border-radius: 999px;
  border: 1px solid var(--hairline-sterk);
  font-size: .8125rem; color: var(--inkt-zacht);
  transition: transform .5s var(--veer), background .5s var(--veer), color .5s var(--veer);
}
.plaats-lijst li:hover { background: var(--koper-vlak); color: var(--koper-tekst); transform: translate3d(0, -2px, 0); }

/* ---------- aanvraag ---------- */
.aanvraag-raster {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 4rem); align-items: start;
}
.contact-blok { display: grid; gap: .35rem; margin-top: 2rem; }
.contact-regel {
  font-family: 'Clash Display', sans-serif; font-size: 1.25rem;
  color: var(--inkt); width: max-content;
  border-bottom: 1px solid var(--hairline-sterk);
  transition: color .5s var(--veer), border-color .5s var(--veer);
}
.contact-regel:hover { color: var(--koper-tekst); border-color: var(--koper-tekst); }

.formulier-kern { padding: clamp(1.5rem, 3vw, 2.25rem); }
.veld { display: grid; gap: .4rem; margin-bottom: 1rem; }
.veld-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
label { font-size: .75rem; font-weight: 600; color: var(--inkt-zacht); letter-spacing: .01em; }

/* button hoort erbij: die erft de lettertypefamilie niet vanzelf en valt
   anders terug op Arial, precies het font dat wij nergens willen. */
input, select, textarea, button {
  font-family: inherit;
  font-size: 1rem; /* 16px: voorkomt inzoomen door iOS Safari bij focus */
  color: var(--inkt);
  padding: .8rem 1rem;
  border-radius: .9rem;
  border: 1px solid var(--hairline-sterk);
  background: var(--grond);
  transition: border-color .5s var(--veer), background .5s var(--veer), box-shadow .5s var(--veer);
  width: 100%;
}
button { font-size: inherit; }
textarea { resize: vertical; min-height: 6.5rem; }
input:focus, select:focus, textarea:focus {
  background: #fff; border-color: var(--koper);
  box-shadow: 0 0 0 3px rgba(176, 111, 60, .12);
}
input.fout, textarea.fout { border-color: #b04747; background: #fdf5f4; }

.formulier-knop { width: 100%; justify-content: space-between; margin-top: .5rem; }
.formulier-knop[disabled] { opacity: .6; cursor: progress; }

.formulier-melding { margin-top: 1rem; font-size: .8125rem; min-height: 1.25rem; }
.formulier-melding.goed { color: #3f7a4c; }
.formulier-melding.mis { color: #b04747; }

/* ---------- voet ---------- */
.voet { background: var(--diep); color: rgba(255,255,255,.7); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.voet-raster {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem;
  padding-bottom: 2.5rem; margin-bottom: 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.voet-merk { font-family: 'Clash Display', sans-serif; font-weight: 700; letter-spacing: .13em; color: #fff; margin-bottom: .5rem; }
.voet-kop { font-size: .6875rem; text-transform: uppercase; letter-spacing: .16em; color: rgba(255,255,255,.58); margin-bottom: .75rem; }
.voet-regel { font-size: .875rem; }
.voet-regel a { transition: color .45s var(--veer); }
.voet-regel a:hover { color: #dda678; }
.voet-klein { font-size: .75rem; color: rgba(255,255,255,.58); }
.voet-onder { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: space-between; }

/* ---------- zwevende belknop (alleen mobiel) ---------- */
.bel-fab {
  position: fixed;
  right: 1rem;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  z-index: 38;
  display: none;
  width: 3.5rem; height: 3.5rem;
  border-radius: 999px;
  background: var(--diep); color: #fff;
  place-items: center;
  box-shadow: 0 8px 24px rgba(20,23,26,.28);
  transition: transform .5s var(--veer);
}
.bel-fab:active { transform: scale(.94); }

/* ==========================================================================
   Mobiel: elke asymmetrie valt terug op één kolom, rotaties en overlappingen
   verdwijnen, en de belknop komt op duimafstand.
   ========================================================================== */
@media (max-width: 960px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento > *, .bento-groot, .bento-breed { grid-column: span 1; grid-row: auto; }
  .stappen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tarief-raster { grid-template-columns: 1fr; }
  .hero-raster, .werkgebied-raster, .aanvraag-raster { grid-template-columns: minmax(0, 1fr); }
  .voet-raster { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .nav-links, .nav-knop { display: none; }
  .burger { display: block; }
  .nav-pil { width: auto; justify-content: space-between; padding-right: .45rem; }
  .bel-fab { display: grid; }

  .bento, .stappen { grid-template-columns: minmax(0, 1fr); }
  .voet-raster { grid-template-columns: 1fr; }

  .sectie { padding-block: 4rem; }
  .hero { padding-top: 2.5rem; }
  .kaart-kern, .paneel-kern, .tarief-kern, .plaats-kern { padding: 1.35rem; }
  .hero-acties .knop { width: 100%; justify-content: space-between; }

  /* Raakvlakken minstens 44px: met een duim is 18px hoge voettekst niet te raken. */
  .contact-regel,
  .voet-regel a,
  .merk {
    display: flex; align-items: center;
    min-height: 44px;
  }
  .contact-regel { width: 100%; }
  .voet-regel a { width: max-content; }
}

@media (max-width: 380px) {
  :root { --straal: 1.5rem; --straal-kern: 1.15rem; }
  .veld-paar { grid-template-columns: 1fr; }
  .merk-naam { font-size: .72rem; }
}

/* ==========================================================================
   Wie beweging heeft uitgezet, krijgt geen beweging. Alles blijft bruikbaar.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .onthul { opacity: 1; transform: none; filter: none; }
  .menu-lijst a { transform: none; }
}