/* =====================================================
   All Ventilatie — style.css
   Huisstijl: logogroen #38B008 (accenten), #2C8A06 (knoppen/links),
   Inter, licht en fris met veel wit.
   ===================================================== */

:root {
  --groen: #38B008;          /* accenten, iconen, decoratie */
  --groen-donker: #2C8A06;   /* knoppen, links, hover */
  --groen-licht: #F9FFF6;    /* accentsectie-achtergrond */
  --groen-nacht: #152B0E;    /* donkere hero-achtergrond */
  --groen-nacht-2: #0F2109;  /* nog donkerder, voor diepte */
  --tekst: #1A1A1A;
  --tekst-invers: #FFFFFF;
  --tekst-invers-zacht: #D3DECC;
  --grijs: #5C6660;
  --lichtgrijs: #F5F6F5;
  --wit: #FFFFFF;

  --radius-panel: 12px;
  --radius-kaart: 12px;
  --font: "Plus Jakarta Sans", system-ui, sans-serif;
  --ease-soepel: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-swipe: cubic-bezier(0.65, 0, 0.35, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* alleen voor schermlezers: tekst die op beeld niets toevoegt */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

html {
  scroll-behavior: smooth;
  /* clip i.p.v. hidden: geen horizontale scroll, sticky header blijft werken */
  overflow-x: clip;
}

body {
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  color: var(--tekst);
  background: var(--wit);
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; display: block; }

a { color: var(--groen-donker); text-decoration: none; }

/* =====================================================
   Knoppen
   ===================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}

/* --- Primair: pil met wit bolletje + pijltje.
       Het bolletje start links; bij hover swipet het naar
       rechts en vult de knop wit mee met het bolletje. --- */

.btn-primary,
.btn-header {
  position: relative;
  overflow: hidden;
  background: var(--groen);
  color: var(--wit);
  padding: 20px 26px 20px 62px;
}

/* vulling (inclusief rand) die met het bolletje meeschuift;
   transform i.p.v. width zodat de animatie soepel blijft */
.btn-primary::before,
.btn-header::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--wit);
  transform: translateX(-100%);
  transition: transform .4s var(--ease-soepel);
  will-change: transform;
}

/* bolletje: 2px ruimte rondom, vult de pil bijna helemaal.
   Schuifafstand (--slide) wordt per knop gemeten in script.js */
.btn-circle {
  position: absolute;
  left: 2px;
  top: 50%;
  translate: 0 -50%;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--wit);
  color: var(--groen);
  display: grid;
  place-items: center;
  z-index: 1;
  transition: transform .4s var(--ease-soepel),
              background .4s var(--ease-soepel),
              color .4s var(--ease-soepel);
  will-change: transform;
}

.btn-circle .arrow { width: 18px; height: 18px; }

.btn-primary .btn-label,
.btn-header .btn-label {
  display: inline-block;
  position: relative;
  z-index: 1;
  transition: transform .4s var(--ease-soepel), color .4s var(--ease-soepel);
}

.btn-primary:hover::before,
.btn-header:hover::before { transform: translateX(0); }

.btn-primary:hover .btn-circle,
.btn-header:hover .btn-circle {
  transform: translateX(var(--slide, 0px));
  background: var(--groen);
  color: var(--wit);
}

.btn-primary:hover .btn-label,
.btn-header:hover .btn-label {
  transform: translateX(-36px);
  color: var(--groen-donker);
}

/* Variant voor knoppen op lichte achtergronden:
   donkergroene hover-vulling, zoals de headerknop */
.btn-donker-hover::before { background: var(--groen-donker); }

.btn-donker-hover:hover .btn-circle {
  background: var(--wit);
  color: var(--groen-donker);
}

.btn-donker-hover:hover .btn-label { color: var(--wit); }

/* Header-variant: compacter, en met donkergroene hover-vulling
   zodat de knop zichtbaar blijft op de witte headerbalk */
.btn-header {
  padding: 16px 22px 16px 53px;
  font-size: 15px;
}

.btn-header .btn-circle { width: 43px; height: 43px; }

.btn-header::before { background: var(--groen-donker); }

.btn-header:hover .btn-circle {
  background: var(--wit);
  color: var(--groen-donker);
}

.btn-header:hover .btn-label {
  transform: translateX(-31px);
  color: var(--wit);
}

/* --- Secundair: outline die bij hover soepel vult
       in dezelfde kleur als de rand. --- */

.btn-outline {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 19px 32px;
  border: 1.5px solid var(--wit);
  color: var(--wit);
  transition: color .35s var(--ease-soepel);
}

.btn-outline::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--wit);          /* zelfde kleur als de border */
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .4s var(--ease-soepel);
  border-radius: inherit;
}

.btn-outline:hover { color: var(--groen-nacht); }

.btn-outline:hover::before { transform: scaleX(1); }

/* =====================================================
   Header
   ===================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--wit);
}

.header-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand img { width: 170px; height: auto; }

.main-nav {
  display: flex;
  gap: 30px;
}

.nav-link {
  font-size: 15px;
  font-weight: 500;
  color: var(--tekst);
  position: relative;
  padding: 6px 0;
  transition: color .25s var(--ease-soepel);
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--groen);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .3s var(--ease-soepel);
}

.nav-link:hover { color: var(--groen-donker); }

.nav-link:hover::after,
.nav-link.is-active::after { transform: scaleX(1); }

.nav-link.is-active { font-weight: 600; }

.header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* alleen zichtbaar in het opengeklapte mobiele menu (zie main-nav) */
.nav-tel { display: none; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
}

.nav-toggle span {
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: var(--tekst);
  transition: transform .3s var(--ease-soepel), opacity .3s;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* =====================================================
   Hero — video als achtergrond van het hele groene vlak
   ===================================================== */

.hero { padding: 4px 16px 16px; }

/* hero vult het scherm precies tot 16px boven de onderrand;
   --header-hoogte wordt gemeten in script.js (4px boven + 16px onder = 20px) */
.hero-panel {
  position: relative;
  background: var(--groen-nacht);
  border-radius: var(--radius-panel);
  overflow: hidden;
  min-height: calc(100vh - var(--header-hoogte, 76px) - 20px);
  min-height: calc(100dvh - var(--header-hoogte, 76px) - 20px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* video vult het hele paneel; eigen afronding + isolatie zodat de
   hoeken ook na een refresh-op-scrollpositie rond blijven */
.hero-panel { isolation: isolate; }

.hero-bg {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-panel);
  overflow: hidden;
}

.hero-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* egale zwarte overlay over de hele hero, zodat de tekst leesbaar blijft */
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .6);
}

.hero-inner {
  position: relative;
  z-index: 2;
  padding: clamp(48px, 6vw, 88px) clamp(28px, 5vw, 80px) clamp(80px, 8vw, 110px);
}

/* --- Tekstkolom --- */

.hero-copy { max-width: 620px; }

.hero-title {
  font-size: clamp(2.5rem, 5.2vw, 4.2rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--tekst-invers);
  animation: opkomen .7s var(--ease-soepel) both;
}

.hero-text {
  margin-top: 24px;
  max-width: 46ch;
  font-size: 17px;
  color: var(--tekst-invers-zacht);
  animation: opkomen .7s var(--ease-soepel) .1s both;
}

.hero-buttons {
  margin-top: 36px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  animation: opkomen .7s var(--ease-soepel) .2s both;
}

/* --- Scheidingslijn + social proof --- */

.hero-divider {
  margin-top: 36px;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, .22);
  animation: opkomen .7s var(--ease-soepel) .3s both;
}

.hero-social {
  margin-top: 36px;
  display: flex;
  align-items: center;
  gap: 18px;
  animation: opkomen .7s var(--ease-soepel) .4s both;
}

.hero-social:hover .social-text p { color: var(--wit); }

.hero-social .social-text p { transition: color .25s var(--ease-soepel); }

.avatars { display: flex; }

.avatar {
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid var(--wit);
  object-fit: cover;
  position: relative;
}

.avatar + .avatar { margin-left: -20px; }

.avatar:nth-child(2) { z-index: 1; }
.avatar:nth-child(3) { z-index: 2; }
.avatar:nth-child(4) { z-index: 3; }

.social-text p {
  font-size: 16.5px;
  line-height: 1.45;
  font-weight: 500;
  color: var(--tekst-invers-zacht);
}

.social-text strong {
  color: var(--wit);
  font-weight: 700;
}

.stars {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-bottom: 5px;
}

.stars .rating {
  font-size: 15px;
  font-weight: 700;
  color: var(--wit);
  margin-right: 5px;
}

.stars svg {
  width: 15px;
  height: 15px;
  fill: #FFC531;
}

.stars svg:last-child { fill: none; }

/* --- Geluidsknop --- */

.sound-toggle {
  position: absolute;
  top: 22px;
  right: 22px;
  z-index: 3;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .5);
  backdrop-filter: blur(8px);
  color: var(--wit);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .3s var(--ease-soepel), transform .3s var(--ease-soepel);
}

.sound-toggle:hover { background: var(--groen-donker); transform: scale(1.06); }

.sound-toggle svg { width: 20px; height: 20px; }

.sound-toggle .icon-sound { display: none; }

.sound-toggle.is-on .icon-sound { display: block; }
.sound-toggle.is-on .icon-muted { display: none; }

/* --- Scroll-down knop --- */

.scroll-down {
  position: absolute;
  right: 22px;
  bottom: 22px;
  z-index: 3;
  width: 48px;
  height: 48px;
  border: 1.5px solid rgba(255, 255, 255, .35);
  border-radius: 50%;
  background: rgba(0, 0, 0, .3);
  backdrop-filter: blur(8px);
  color: var(--wit);
  cursor: pointer;
  display: grid;
  place-items: center;
  overflow: hidden;
  transition: border-color .3s var(--ease-soepel), background .3s var(--ease-soepel);
}

.scroll-down:hover {
  border-color: rgba(255, 255, 255, .8);
  background: rgba(255, 255, 255, .12);
}

.scroll-down svg {
  width: 18px;
  height: 18px;
  animation: scrollHint 2.4s ease-in-out infinite;
}

@keyframes scrollHint {
  0% { transform: translateY(-16px); opacity: 0; }
  35% { transform: translateY(0); opacity: 1; }
  65% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(16px); opacity: 0; }
}

/* =====================================================
   Secties (home)
   ===================================================== */

.sectie {
  /* zelfde waarde als de horizontale padding: de sliders rekenen ermee */
  --sectie-rand: 24px;
  padding: clamp(64px, 8vw, 110px) var(--sectie-rand);
  /* ankerlinks komen netjes onder de sticky header uit */
  scroll-margin-top: 70px;
}

.sectie-grijs { background: var(--lichtgrijs); }

/* de diensten-track heeft onderin zelf ruimte voor de hover-schaduw */
.sectie-diensten { padding-bottom: clamp(20px, 4vw, 58px); }

/* samen 100px lucht tussen twee aangrenzende secties (50 + 50) */
.sectie-einde-100 { padding-bottom: 50px; }
.sectie-start-100 { padding-top: 50px; }

.sectie-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.sectie-smal { max-width: 760px; text-align: center; }

.sectie h2 {
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--tekst);
}

.sectie-kop { margin-bottom: clamp(36px, 5vw, 56px); }

.sectie-kop p {
  margin-top: 14px;
  max-width: 58ch;
  color: var(--grijs);
}

.sectie-actie {
  margin-top: clamp(36px, 5vw, 48px);
  display: flex;
  justify-content: center;
}

/* --- Bedrijfsvisie --- */

.kolommen {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
}

.tekstblok { margin: 22px 0 8px; }

.tekstblok p { color: var(--grijs); }

.tekstblok p + p { margin-top: 14px; }

/* knop die direct op een tekstblok volgt heeft lucht nodig */
.tekstblok + .btn { margin-top: clamp(26px, 3vw, 36px); }

.visie-punten {
  list-style: none;
  margin: 14px 0 32px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 24px;
}

.visie-punten li {
  position: relative;
  padding: 8px 0 8px 34px;
  font-weight: 500;
}

.visie-punten li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  translate: 0 -50%;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--groen) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none"><path d="m3.5 8.5 3 3 6-6" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') center / 13px no-repeat;
}

.visie-foto {
  width: 100%;
  height: 100%;
  max-height: 480px;
  object-fit: cover;
  border-radius: var(--radius-kaart);
}


/* --- Before/after carrousel --- */

.sectie-kop-rij {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.carrousel-knoppen {
  display: flex;
  gap: 10px;
  flex: 0 0 auto;
}

.sectie-kop-rij .btn { flex: 0 0 auto; }

.carrousel-knop {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid rgba(26, 26, 26, .18);
  background: transparent;
  color: var(--tekst);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .3s var(--ease-soepel),
              border-color .3s var(--ease-soepel),
              color .3s var(--ease-soepel);
}

.carrousel-knop:hover {
  background: var(--groen);
  border-color: var(--groen);
  color: var(--wit);
}

.carrousel-knop svg { width: 18px; height: 18px; }

/* De track loopt aan beide zijden door tot de schermrand en heeft daar
   een even brede padding. Daardoor schuiven de slides links en rechts
   het beeld uit in plaats van bij de tekstrand af te breken; door de
   scroll-padding staat de eerste slide in ruststand toch gelijk met de
   kop en gaat er links pas iets uit beeld zodra je scrollt.
   (In scroll-padding rekent % tegen de scroller zelf, dus daar kan de
   50vw-50%-truc niet: vandaar de max()-berekening van de paginarand.) */
.ba-track {
  --ba-gap: clamp(16px, 2.5vw, 28px);
  --ba-rand: max(var(--sectie-rand, 24px), calc((100vw - 1200px) / 2));
  --ba-kolom: calc((100% - 2 * var(--ba-gap)) / 3);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--ba-kolom);
  gap: var(--ba-gap);
  overflow-x: auto;
  overflow-y: hidden;
  margin-inline: calc(-1 * var(--ba-rand));
  padding-inline: var(--ba-rand);
  scroll-padding-inline: var(--ba-rand);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.ba-track::-webkit-scrollbar { display: none; }

.ba-track .ba-slider { scroll-snap-align: start; }

.ba-slider {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-kaart);
  overflow: hidden;
  background: var(--groen-nacht);
}

.ba-slider img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ba-voor {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0);
}

.ba-label {
  position: absolute;
  top: 12px;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  z-index: 2;
  pointer-events: none;
}

.ba-label-voor { left: 12px; background: rgba(0, 0, 0, .65); color: var(--wit); }
.ba-label-na { right: 12px; background: var(--groen); color: var(--wit); }

.ba-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos, 50%);
  width: 2px;
  margin-left: -1px;
  background: var(--wit);
  z-index: 2;
  pointer-events: none;
}

.ba-handle svg {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 40px;
  height: 40px;
  padding: 9px;
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--wit);
  color: var(--groen-donker);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}

.ba-slider input[type="range"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: ew-resize;
  z-index: 3;
  margin: 0;
  -webkit-appearance: none;
}

/* --- Lichtgroene full-width secties (bewijs, prijzen) --- */

.sectie-groen {
  background: var(--groen-licht);
  border-top: 1px solid rgba(26, 26, 26, .08);
  border-bottom: 1px solid rgba(26, 26, 26, .08);
}

/* geen randlijn op de naad tussen twee aangrenzende groene secties:
   dezelfde achtergrondkleur, dus daar hoort geen scheidingslijn */
.sectie-groen + .sectie-groen { border-top: 0; }
.sectie-groen:has(+ .sectie-groen) { border-bottom: 0; }

/* --- Kernwaarden (USP's) --- */

.sectie-kop-midden { text-align: center; }

.sectie-kop-midden p { margin-inline: auto; }

.usp-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 44px);
  text-align: center;
}

.usp-cirkel {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(120px, 10.5vw, 150px);
  aspect-ratio: 1;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--groen-licht);
  border: 1.5px solid rgba(44, 138, 6, .3);
}

.usp-icoon {
  width: 46px;
  height: auto;
}

/* iconen worden "getekend" zodra de sectie in beeld komt, 1 voor 1 */
.usp-icoon path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.1s var(--ease-swipe);
}

.usp-grid.zichtbaar .usp-icoon path { stroke-dashoffset: 0; }

.usp:nth-child(1) .usp-icoon path { transition-delay: .15s; }
.usp:nth-child(2) .usp-icoon path { transition-delay: .5s; }
.usp:nth-child(3) .usp-icoon path { transition-delay: .85s; }
.usp:nth-child(4) .usp-icoon path { transition-delay: 1.2s; }

.usp-blad {
  position: absolute;
  top: -2px;
  right: 12%;
  width: 28px;
  height: 21px;
  transform: rotate(14deg);
}

.usp h3 {
  margin-top: 24px;
  font-size: 18px;
  font-weight: 700;
}

.usp p {
  margin-top: 8px;
  font-size: 15px;
  color: var(--grijs);
  max-width: 28ch;
  margin-inline: auto;
}

/* --- Diensten (slider met fotokaarten) --- */

.diensten-kop { align-items: flex-end; }

.diensten-kop p { max-width: 46ch; }

/* zelfde opzet als de before/after-track */
.diensten-track {
  --dienst-gap: clamp(16px, 2vw, 22px);
  --dienst-rand: max(var(--sectie-rand, 24px), calc((100vw - 1200px) / 2));
  --dienst-kolom: calc((100% - 2 * var(--dienst-gap)) / 3);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--dienst-kolom);
  gap: var(--dienst-gap);
  overflow-x: auto;
  overflow-y: hidden;
  margin-inline: calc(-1 * var(--dienst-rand));
  padding-inline: var(--dienst-rand);
  /* ruimte boven en onder zodat de kaart bij hover kan optillen en de
     schaduw (14px offset + 34px blur) niet door de scroller wordt
     afgesneden; de sectie eronder krijgt daarom minder padding */
  padding-block: 24px 54px;
  margin-top: -24px;
  scroll-padding-inline: var(--dienst-rand);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.diensten-track::-webkit-scrollbar { display: none; }

/* witte kaart met icoon-badge, titel, tekst en "Meer informatie"-link */
.dienst-kaart {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 26px 26px 28px;
  border: 1px solid rgba(26, 26, 26, .08);
  border-radius: var(--radius-kaart);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .06);
  background: var(--wit);
  color: var(--tekst);
  scroll-snap-align: start;
  transition: transform .35s var(--ease-soepel),
              box-shadow .35s var(--ease-soepel);
}

.dienst-kaart:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .12);
}

.dienst-icoon {
  display: block;
  width: 68px;
  height: 68px;
  margin-bottom: 18px;
}

/* de ronding zit in CSS, zodat de witte hoekjes van de webp wegvallen */
.dienst-icoon img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 17px;
  object-fit: cover;
}

.dienst-kaart strong {
  display: block;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
}

.dienst-tekst {
  display: block;
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--grijs);
}

/* onderaan uitlijnen zodat de link op elke kaart gelijk staat */
.dienst-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 20px;
  font-size: 15px;
  font-weight: 600;
  color: var(--groen-donker);
}

.dienst-link svg {
  width: 15px;
  height: 15px;
  transition: transform .3s var(--ease-soepel);
}

.dienst-kaart:hover .dienst-link svg { transform: translateX(4px); }

/* --- Prijzen --- */

.prijs-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.5vw, 28px);
  max-width: 1140px;
  margin: 0 auto;
}

.prijs-kaart {
  background: var(--wit);
  border: 1px solid rgba(26, 26, 26, .1);
  border-radius: var(--radius-kaart);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .07);
  padding: clamp(26px, 3vw, 36px);
}

.prijs-kaart h3 {
  font-size: 19px;
  font-weight: 700;
  color: var(--grijs);
}

.prijs {
  margin: 10px 0 8px;
  font-size: clamp(2.2rem, 3.4vw, 2.9rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--tekst);
}

.prijs-omschrijving {
  font-size: 15px;
  color: var(--grijs);
  min-height: 44px;
}

.prijs-kaart .btn {
  margin-top: 18px;
  font-size: 15px;
}

.prijs-scheiding {
  margin: 22px 0 18px;
  border: 0;
  border-top: 1px solid var(--lichtgrijs);
}

.prijs-inbegrepen {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 8px;
}

.prijs-lijst { list-style: none; }

.prijs-lijst li {
  position: relative;
  padding: 8px 0 8px 32px;
  font-size: 15px;
}

.prijs-lijst li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  translate: 0 -50%;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--groen-donker) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none"><path d="m3.5 8.5 3 3 6-6" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') center / 12px no-repeat;
}

/* niet inbegrepen: grijs vinkje + grijze tekst */
.prijs-lijst .niet { color: #A7ADA7; }

.prijs-lijst .niet::before { background-color: #C6CCC6; }

/* --- Reviews --- */

.reviews-slider { position: relative; }

.reviews-track {
  --review-gap: clamp(16px, 2.5vw, 24px);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * var(--review-gap)) / 3);
  gap: var(--review-gap);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  text-align: left;
}

.reviews-track::-webkit-scrollbar { display: none; }

.reviews-track .review-kaart { scroll-snap-align: start; }

/* pijlen links en rechts naast de kaarten, zoals de widget */
.reviews-pijl {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  z-index: 2;
  background: var(--wit);
  border-color: var(--lichtgrijs);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .1);
}

.reviews-pijl-links { left: -22px; }
.reviews-pijl-rechts { right: -22px; }

.review-kaart {
  background: var(--lichtgrijs);
  border-radius: var(--radius-kaart);
  padding: 26px;
}

.review-kop {
  display: flex;
  align-items: center;
  gap: 12px;
}

.review-avatar {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--groen-donker);
  color: var(--wit);
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 700;
}

.review-naam strong {
  display: block;
  font-size: 15px;
}

.review-naam span {
  display: block;
  font-size: 13px;
  color: var(--grijs);
}

.review-google {
  margin-left: auto;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

.review-sterren {
  display: inline-flex;
  gap: 3px;
  margin: 14px 0 10px;
}

.review-sterren svg {
  width: 15px;
  height: 15px;
  fill: #FFC531;
}

.review-kaart p { font-size: 15px; }

/* --- Contact --- */

.sectie-contact { padding-top: 20px; }

/* als er expliciet 100px boven de contactsectie gevraagd is, wint dat
   van de standaard krappe padding-top hierboven */
.sectie-contact.sectie-start-100 { padding-top: 50px; }

.contact-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
}

.contact-info h2 {
  color: var(--tekst);
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.contact-sub {
  margin-top: 10px;
  font-size: 19px;
  font-weight: 700;
  color: var(--groen-donker);
}

.contact-info > p:not(.contact-sub) {
  margin-top: 16px;
  color: var(--grijs);
  max-width: 48ch;
}

.contact-lijst {
  list-style: none;
  margin-top: 28px;
}

.contact-lijst li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  color: var(--grijs);
}

.contact-lijst li + li { border-top: 1px solid var(--lichtgrijs); }

.contact-lijst a { color: var(--tekst); font-weight: 600; }

.contact-lijst a:hover { color: var(--groen-donker); }

.contact-icoon {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--groen-licht);
  color: var(--groen-donker);
  display: grid;
  place-items: center;
}

.contact-icoon svg { width: 19px; height: 19px; }

.contact-form {
  background: var(--wit);
  border: 1px solid rgba(26, 26, 26, .1);
  border-radius: var(--radius-kaart);
  padding: clamp(26px, 3.5vw, 40px);
  box-shadow: 0 24px 60px rgba(21, 43, 14, .08);
}

.veld-rij {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.veld { margin-bottom: 16px; }

.veld label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
}

.verplicht { color: #C0392B; }

.veld input,
.veld textarea {
  width: 100%;
  font-family: var(--font);
  font-size: 15px;
  color: var(--tekst);
  background: var(--lichtgrijs);
  border: 1.5px solid #E2E6E2;
  border-radius: 12px;
  padding: 13px 16px;
  transition: border-color .25s var(--ease-soepel), background .25s var(--ease-soepel);
}

.veld input:focus,
.veld textarea:focus {
  outline: none;
  border-color: var(--groen);
  background: var(--wit);
}

.veld.heeft-fout input { border-color: #C0392B; }

.veld-fout {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: #C0392B;
  min-height: 0;
}

.form-actie-rij {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: nowrap;
}

.contact-form .btn {
  flex: 0 0 auto;
  font-size: 15px;
}

.form-notitie {
  flex: 0 1 auto;
  min-width: 0;
  font-size: 13px;
  color: var(--grijs);
}

.form-succes {
  margin-top: 16px;
  background: var(--groen-licht);
  border-radius: 12px;
  padding: 16px 18px;
  font-size: 15px;
}

/* =====================================================
   Footer
   ===================================================== */

.site-footer { padding: 90px 16px 16px; }

/* op de embed-paginas mag de footer strak tegen het formulier aan komen */
/* .site-footer.site-footer-strak i.p.v. de losse klasse: zo wint dit ook
   nog van de padding-top die de mobiele media query verderop op
   .site-footer zet (zelfde specificiteit, maar deze staat eerder) */
.site-footer.site-footer-strak { padding-top: 0; }

/* lichtgroene CTA-kaart die over de donkere footer valt */
.footer-card {
  position: relative;
  z-index: 2;
  width: 92%;
  max-width: 1160px;
  margin: 0 auto -110px;
  background: var(--groen-licht);
  border: 1px solid rgba(44, 138, 6, .16);
  border-radius: 12px;
  padding: clamp(32px, 4vw, 56px);
  padding-left: clamp(260px, 32vw, 440px);
  box-shadow: 0 24px 60px rgba(21, 43, 14, .16);
}

.footer-card h2 {
  font-size: clamp(2rem, 3.6vw, 3.1rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--tekst);
}

/* tekstblok rechts op de kaart, maar zelf links uitgelijnd */
.footer-card-copy {
  text-align: left;
  max-width: 620px;
  margin-left: auto;
}

.footer-card-tekst {
  margin-top: 14px;
  font-size: 16px;
  color: var(--grijs);
  max-width: 44ch;
}

/* outline-knop in logogroen op de lichte kaart */
.footer-card .btn-outline {
  border-color: var(--groen);
  color: var(--groen);
}

.footer-card .btn-outline::before { background: var(--groen); }

.footer-card .btn-outline:hover { color: var(--wit); }

.footer-card-actions {
  margin-top: 30px;
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

/* uitgeknipte monteur die boven de kaart uitsteekt */
.footer-card-persoon {
  position: absolute;
  left: clamp(24px, 5vw, 90px);
  bottom: 0;
  height: 152%;
  object-fit: contain;
  object-position: bottom;
}

/* donkergroen footerpaneel */
.footer-panel {
  background: var(--groen-nacht);
  border-radius: var(--radius-panel);
  padding: 180px clamp(28px, 5vw, 80px) 28px;
  color: var(--tekst-invers-zacht);
}

.footer-socials {
  margin-top: 18px;
  display: flex;
  gap: 10px;
}

.footer-socials a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .22);
  display: grid;
  place-items: center;
  color: var(--tekst-invers-zacht);
  transition: color .25s var(--ease-soepel),
              border-color .25s var(--ease-soepel),
              background .25s var(--ease-soepel);
}

.footer-socials a:hover {
  color: var(--wit);
  border-color: var(--groen);
  background: var(--groen);
}

.footer-socials svg { width: 18px; height: 18px; }

.footer-vca {
  display: block;
  margin-top: 22px;
  height: 46px;
  width: auto;
  background: var(--wit);
  padding: 5px 10px;
  border-radius: 12px;
}

/* linkkolommen rechts uitgelijnd, merk links */
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  column-gap: clamp(48px, 7vw, 110px);
  row-gap: 40px;
}

.footer-logo-img { width: 190px; height: auto; }

.footer-tagline {
  margin-top: 16px;
  font-size: 15px;
  max-width: 30ch;
}

.footer-col h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--wit);
  margin-bottom: 14px;
}

.footer-col a {
  display: block;
  width: fit-content;
  position: relative;
  padding: 5px 0;
  font-size: 15px;
  color: var(--tekst-invers-zacht);
  transition: color .25s var(--ease-soepel);
}

/* underline die soepel van links naar rechts inschuift */
.footer-col a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .35s var(--ease-soepel);
}

.footer-col a:hover { color: var(--wit); }

.footer-col a:hover::after { transform: scaleX(1); }

.footer-bottom {
  margin-top: clamp(40px, 5vw, 56px);
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 14px;
}

.footer-bottom a {
  color: var(--wit);
  font-weight: 600;
  transition: color .25s var(--ease-soepel);
}

.footer-bottom a:hover { color: var(--groen); }

/* =====================================================
   Subpagina's
   ===================================================== */

/* --- Compacte hero met foto-achtergrond ---
       Alle subpagina's delen dezelfde bannerhoogte --- */

.hero-sub .hero-panel {
  min-height: var(--sub-hero-hoogte, 396px);
  justify-content: center;
}

.hero-sub .hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* twee keer dezelfde (staande) foto naast elkaar, voor een liggende hero */
.hero-bg-duo { display: flex; }

.hero-sub .hero-bg.hero-bg-duo img { width: 50%; }

/* focus op het hoofd van de monteur in deze foto, iets boven het midden */
.hero-bg-boven { object-position: center 32%; }

.hero-sub .hero-inner {
  padding: clamp(36px, 4vw, 52px) clamp(28px, 5vw, 80px);
}

.hero-sub .hero-copy { max-width: 860px; }

.hero-sub .hero-title { font-size: clamp(2rem, 3.6vw, 2.9rem); }

.hero-sub .hero-text { margin-top: 18px; }

/* kortere banner voor pagina's met weinig hero-inhoud */
.hero-kort .hero-panel { min-height: 240px; }

.hero-sub .hero-buttons { margin-top: 28px; }

/* Directe links in de hero (404) */
.hero-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 24px;
  animation: opkomen .7s var(--ease-soepel) .25s both;
}

.hero-links a {
  position: relative;
  color: var(--wit);
  font-size: 15px;
  font-weight: 600;
  padding-bottom: 3px;
}

.hero-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1.5px;
  background: var(--groen);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .3s var(--ease-soepel);
}

.hero-links a:hover::after { transform: scaleX(1); }

/* --- Prijsindicatie rechts in de hero, onderkant gelijk met de knoppen --- */

.hero-inner-prijs {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(24px, 5vw, 56px);
}

.hero-prijs {
  flex: 0 0 auto;
  text-align: right;
  animation: opkomen .7s var(--ease-soepel) .3s both;
}

.hero-prijs-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tekst-invers-zacht);
}

.hero-prijs-bedrag {
  margin-top: 6px;
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  font-weight: 800;
  color: var(--wit);
  white-space: nowrap;
}

/* --- Check-lijst (één kolom, ook voor meerregelige punten) --- */

.check-lijst {
  list-style: none;
  margin: 18px 0 0;
}

.check-lijst li {
  position: relative;
  padding: 8px 0 8px 36px;
  font-weight: 500;
}

.check-lijst li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--groen) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none"><path d="m3.5 8.5 3 3 6-6" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') center / 13px no-repeat;
}

.check-lijst li strong { font-weight: 700; }

/* --- Puntenlijst met icoontegel, titel en toelichting --- */

.punt-lijst {
  list-style: none;
  margin-top: 26px;
  display: grid;
  gap: 20px;
}

.punt {
  display: flex;
  align-items: center;
  gap: 18px;
}

.punt-icoon {
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  border-radius: var(--radius-kaart);
  background: var(--groen-licht);
  color: var(--groen-donker);
  display: grid;
  place-items: center;
}

.punt-icoon svg { width: 30px; height: 30px; }

.punt-tekst {
  display: block;
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--grijs);
}

.punt-tekst strong {
  display: block;
  font-size: 16.5px;
  font-weight: 700;
  color: var(--tekst);
}

/* knop die in een tekstkolom onder een lijst volgt */
.kolom-actie { margin-top: 30px; }

/* fotokolom links i.p.v. rechts */
.kolommen-links {
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
}

/* foto even hoog als de tekstkolom ernaast */
.kolommen-gelijk { align-items: stretch; }

.kolommen-gelijk .visie-foto {
  max-height: none;
  /* hoogte 0 + min-height 100%: de tekstkolom bepaalt de rijhoogte,
     de foto rekt altijd exact mee (object-fit dekt het verschil af) */
  height: 0;
  min-height: 100%;
}

/* --- Voor wie werken wij (foto links, accordeon met timer rechts) --- */

.wissel-layout {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: stretch;
}

/* fotokolom: alle foto's liggen op elkaar en faden in elkaar over.
   Even hoog als de kolom ernaast; de panelen zijn allemaal
   even hoog, dus de foto springt niet mee. */
.wissel-media {
  position: relative;
  height: 100%;
  min-height: 420px;
  border-radius: var(--radius-panel);
  overflow: hidden;
  background: var(--lichtgrijs);
}

.wissel-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity .7s var(--ease-soepel), transform 1.4s var(--ease-soepel);
}

.wissel-foto.is-actief { opacity: 1; transform: scale(1); }

.wissel-tekst { display: flex; flex-direction: column; }

.wissel-tekst .sectie-kop { margin-bottom: clamp(22px, 2.6vw, 34px); }

.wissel-accordeon { border-top: 1px solid rgba(26, 26, 26, .1); }

.wissel-item {
  position: relative;
  border-bottom: 1px solid rgba(26, 26, 26, .1);
}

.wissel-knop {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  width: 100%;
  padding: 26px 2px;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  color: var(--tekst);
  cursor: pointer;
}

.wissel-icoon {
  display: grid;
  place-items: center;
  color: var(--grijs);
  transition: color .3s var(--ease-soepel);
}

.wissel-icoon svg { width: 24px; height: 24px; }

.wissel-item.is-actief .wissel-icoon { color: var(--groen); }

.wissel-titel {
  font-size: 17.5px;
  font-weight: 700;
  line-height: 1.3;
}

/* plus die een min wordt als het paneel openstaat */
.wissel-plus {
  position: relative;
  width: 16px;
  height: 16px;
  color: var(--grijs);
}

.wissel-plus::before,
.wissel-plus::after {
  content: "";
  position: absolute;
  background: currentColor;
  border-radius: 2px;
}

.wissel-plus::before { left: 0; right: 0; top: 7px; height: 2px; }

.wissel-plus::after {
  top: 0;
  bottom: 0;
  left: 7px;
  width: 2px;
  transition: transform .35s var(--ease-soepel);
}

.wissel-item.is-actief .wissel-plus::after { transform: scaleY(0); }

/* paneel opent zonder vaste hoogte (0fr -> 1fr) */
.wissel-paneel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .45s var(--ease-soepel);
}

.wissel-paneel > div { overflow: hidden; }

.wissel-item.is-actief .wissel-paneel { grid-template-rows: 1fr; }

.wissel-paneel p {
  max-width: 54ch;
  min-height: 48px;
  padding: 0 8px 28px 42px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--grijs);
}

/* voortgangsbalk: loopt vol zolang het item openstaat */
.wissel-balk {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  overflow: hidden;
  pointer-events: none;
}

.wissel-balk-vulling {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--groen);
  transform: scaleX(0);
  transform-origin: left center;
}

.wissel-item.is-actief .wissel-balk-vulling {
  animation: wisselVullen var(--wissel-duur, 7s) linear forwards;
}

.wissel-accordeon.is-gepauzeerd .wissel-balk-vulling { animation-play-state: paused; }

@keyframes wisselVullen {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .wissel-item.is-actief .wissel-balk-vulling { animation: none; transform: scaleX(1); }
  .wissel-foto { transition: opacity .2s linear; transform: none; }
}

/* gespiegelde variant: foto rechts, accordeon links */
.wissel-layout-spiegel { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.wissel-layout-spiegel .wissel-media { order: 2; }

/* stappenplan-variant: genummerde bolletjes in plaats van iconen */
.wissel-nummer {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--groen-licht);
  color: var(--groen-donker);
  font-size: 15px;
  font-weight: 800;
  transition: background .3s var(--ease-soepel), color .3s var(--ease-soepel);
}

.wissel-item.is-actief .wissel-nummer {
  background: var(--groen);
  color: var(--wit);
}

/* tekst uitlijnen onder de titel: bolletje (34px) + kolomgap (18px) */
.wissel-accordeon-stappen .wissel-paneel p { padding-left: 52px; }

/* --- Stappen (aanpak / werkwijze) --- */

.stappen-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 22px);
}

.stappen-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.stap-kaart {
  background: var(--wit);
  border-radius: var(--radius-kaart);
  padding: 28px 24px;
}

.stap-nummer {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--groen-licht);
  color: var(--groen-donker);
  font-size: 17px;
  font-weight: 800;
  display: grid;
  place-items: center;
}

.stap-kaart h3 {
  margin-top: 16px;
  font-size: 17.5px;
  font-weight: 700;
}

.stap-kaart p {
  margin-top: 8px;
  font-size: 14.5px;
  color: var(--grijs);
}

/* --- Vergelijkingstabel: met of zonder onderhoud ---
   Foto links en rechts als flanken, in het midden een tabel met kruisjes
   en vinkjes. De 'zonder'-kolom staat gedempt zodat de nadruk op de
   All Ventilatie-kolom valt. */

/* foto's en tabel vormen samen één blok: de rij is de kaart, de foto's
   sluiten er aan weerszijden op aan */
.vergelijk-rij {
  display: grid;
  grid-template-columns: minmax(150px, 208px) minmax(0, 1fr) minmax(150px, 208px);
  align-items: stretch;
  background: var(--wit);
  border: 1px solid rgba(26, 26, 26, .1);
  border-radius: var(--radius-panel);
  box-shadow: 0 10px 30px rgba(21, 43, 14, .07);
  overflow: hidden;
}

.vt-foto {
  width: 100%;
  height: 100%;
  min-height: 300px;
  object-fit: cover;
}

.vergelijk-tabel {
  width: 100%;
  border-collapse: collapse;
  background: transparent;
}

.vergelijk-tabel th,
.vergelijk-tabel td {
  padding: clamp(13px, 1.5vw, 17px) clamp(12px, 1.6vw, 22px);
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid rgba(26, 26, 26, .08);
}

.vergelijk-tabel tbody tr:last-child th,
.vergelijk-tabel tbody tr:last-child td { border-bottom: 0; }

/* kolomkoppen: zelfde stijl als de labels van de eerste opzet */
.vergelijk-tabel thead th {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--grijs);
  white-space: nowrap;
}

.vergelijk-tabel thead .vt-kolom-met { color: var(--groen-donker); }

.vergelijk-tabel tbody th {
  padding-right: clamp(26px, 3.4vw, 48px);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--tekst);
}

/* de twee icoonkolommen */
.vt-kolom-zonder,
.vt-kolom-met {
  width: clamp(88px, 12%, 132px);
  text-align: center !important;
}

/* gedempte kant: minder nadruk */
.vergelijk-tabel .vt-kolom-zonder { opacity: .45; }

/* uitgelichte kant: zachte groene baan door de tabel */
.vergelijk-tabel .vt-kolom-met { background: var(--lichtgrijs); }

.vt-teken {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
}

.vt-teken svg { width: 15px; height: 15px; }

.vt-kruis {
  background: rgba(26, 26, 26, .07);
  color: var(--grijs);
}

.vt-vink {
  background: var(--groen-donker);
  color: var(--wit);
}

/* --- USP-lijst: icoon in vierkant, titel + subregel eronder ---
   Zelfde opzet als de puntenlijst uit het portal-formulier: geen
   opsommingstekens, maar een rustig blok icoon met daarnaast titel en
   toelichting. */

.usp-lijst {
  list-style: none;
  margin-top: clamp(24px, 3vw, 34px);
  display: grid;
  gap: clamp(10px, 1.4vw, 16px);
}

.usp-lijst li {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.usp-lijst-icoon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--groen-licht);
  color: var(--groen-donker);
  display: grid;
  place-items: center;
}

.usp-lijst-icoon svg { width: 26px; height: 26px; }

.usp-lijst strong {
  display: block;
  font-size: 18.5px;
  font-weight: 700;
  line-height: 1.3;
}

/* alleen de subregel in de tekstkolom, niet het icoon-span ernaast */
.usp-lijst li > div span {
  display: block;
  margin-top: 4px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--grijs);
}

/* --- Voordeel-kaarten --- */

.voordelen-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.5vw, 28px);
}

.voordelen-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.voordeel-kaart {
  background: rgba(56, 176, 8, .05);
  border: 1px solid rgba(56, 176, 8, .18);
  border-radius: var(--radius-kaart);
  padding: clamp(28px, 3vw, 36px);
}

.sectie-groen .voordeel-kaart { background: var(--wit); }

/* icoon zonder achtergrondvlak, groot en met lucht naar de titel */
.voordeel-icoon {
  display: block;
  color: var(--groen-donker);
}

.voordeel-icoon svg { width: 52px; height: 52px; }

.voordeel-kaart h3 { margin-top: 30px; font-size: 19px; }

.sectie .voordeel-kaart h2 { margin-top: 30px; font-size: 22px; }

/* beeldmerk als heel licht grijs watermerk in de kaart; isolation houdt
   het via z-index: -1 achter de tekst maar boven de kaartachtergrond.
   De vorm is een losse SVG (beeldmerk.png heeft een witte achtergrond en
   wordt bij schalen pixelig), zwart op 5% = heel licht grijs op wit. */
.voordeel-kaart-merk {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.voordeel-kaart-merk::before {
  content: "";
  position: absolute;
  right: -4%;
  bottom: -8%;
  width: min(46%, 260px);
  aspect-ratio: 1;
  background: url("../img/logo/beeldmerk-vorm.svg") center / contain no-repeat;
  opacity: .03;
  z-index: -1;
  pointer-events: none;
}

/* de twee kaarten op over ons: witte kaart met groene rand */
#waarom-kiezen .voordeel-kaart {
  border: 1px solid rgba(44, 138, 6, .22);
  box-shadow: 0 10px 26px rgba(21, 43, 14, .07);
}

.voordeel-kaart p {
  margin-top: 8px;
  color: var(--grijs);
  font-size: 15.5px;
}

/* gecentreerde CTA-regel onder een grid */
.cta-onder {
  margin-top: clamp(36px, 5vw, 48px);
  text-align: center;
}

.cta-onder p {
  color: var(--grijs);
  margin-bottom: 18px;
}

/* --- FAQ (accordeon) --- */

.faq-lijst {
  max-width: 860px;
  margin: 0 auto;
}

.faq-item { border-bottom: 1px solid rgba(26, 26, 26, .12); }

.faq-vraag {
  width: 100%;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  font-size: 17.5px;
  font-weight: 700;
  color: var(--tekst);
  text-align: left;
}

.faq-plus {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid rgba(26, 26, 26, .18);
  color: var(--tekst);
  display: grid;
  place-items: center;
  transition: background .3s var(--ease-soepel),
              border-color .3s var(--ease-soepel),
              color .3s var(--ease-soepel),
              transform .3s var(--ease-soepel);
}

.faq-plus svg { width: 14px; height: 14px; }

.faq-item.is-open .faq-plus {
  background: var(--groen);
  border-color: var(--groen);
  color: var(--wit);
  transform: rotate(45deg);
}

/* paneel opent zonder vaste hoogte (0fr -> 1fr), zelfde soepele
   animatie als de andere accordeons op de site */
.faq-paneel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s var(--ease-soepel);
}

.faq-paneel > div { overflow: hidden; }

.faq-item.is-open .faq-paneel { grid-template-rows: 1fr; }

.faq-paneel p {
  padding: 0 60px 22px 0;
  color: var(--grijs);
}

/* --- Ingesloten aanvraagformulier (portal-embed) --- */

/* tekst links, het ingesloten formulier rechts */
.embed-grid {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}

.embed-tekst p:not(.contact-sub) {
  margin-top: 16px;
  color: var(--grijs);
  max-width: 46ch;
}

/* contactgegevens onder de tekst */
.contact-rij {
  list-style: none;
  display: grid;
  gap: 12px;
  margin-top: 28px;
}

.contact-rij li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--grijs);
  font-size: 15px;
}

.contact-rij a {
  color: var(--tekst);
  font-weight: 600;
}

.contact-rij a:hover { color: var(--groen-donker); }

.contact-rij .contact-icoon {
  width: 36px;
  height: 36px;
}

.contact-rij .contact-icoon svg { width: 17px; height: 17px; }

.embed-kaart iframe {
  width: 100%;
  border: 0;
  display: block;
}

/* het portaal post zijn eigen hoogte nog niet door (zie script.js), dus dit
   is de best passende schatting per breedte voor het 4-stappen-formulier
   totdat dat er is. Stap 1 verschilt qua lengte per formulier op mobiel
   (mechanische ventilatie ~685px, vetkanaalreiniging ~533px), maar
   convergeert vanaf tablet-breedte voor beide naar &plusmn;590px. */
.embed-kaart-form iframe { min-height: 670px; }

.embed-kaart-form-vetkanaal iframe { min-height: 520px; }

@media (min-width: 681px) {
  .embed-kaart-form iframe,
  .embed-kaart-form-vetkanaal iframe { min-height: 580px; }
}

/* --- Contactlijst met toelichting per regel (contactpagina) --- */

.contact-lijst-groot li { align-items: flex-start; padding: 14px 0; }

.contact-regel a,
.contact-regel strong {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--tekst);
}

.contact-regel a:hover { color: var(--groen-donker); }

.contact-regel > span {
  display: block;
  margin-top: 2px;
  font-size: 14.5px;
  color: var(--grijs);
}

/* --- Dropdown in het formulier --- */

.veld select {
  width: 100%;
  font-family: var(--font);
  font-size: 15px;
  color: var(--tekst);
  background: var(--lichtgrijs) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none"><path d="m3 6 5 5 5-5" stroke="%235C6660" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') right 16px center / 14px no-repeat;
  border: 1.5px solid #E2E6E2;
  border-radius: 12px;
  padding: 13px 44px 13px 16px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color .25s var(--ease-soepel), background-color .25s var(--ease-soepel);
}

.veld select:focus {
  outline: none;
  border-color: var(--groen);
  background-color: var(--wit);
}

/* --- Tekstpagina (privacybeleid) --- */

/* inhoudsopgave links, tekst rechts */
.tekst-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  max-width: 1060px;
  margin: 0 auto;
  align-items: start;
}

.inhoud {
  position: sticky;
  top: 100px;
}

.inhoud-titel {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--grijs);
  margin-bottom: 12px;
}

.inhoud ol {
  list-style: none;
  counter-reset: hoofdstuk;
}

.inhoud a {
  display: flex;
  gap: 10px;
  padding: 8px 0 8px 16px;
  border-left: 2px solid rgba(26, 26, 26, .12);
  color: var(--grijs);
  font-size: 14.5px;
  line-height: 1.4;
  transition: color .25s var(--ease-soepel),
              border-color .25s var(--ease-soepel);
}

.inhoud a::before {
  counter-increment: hoofdstuk;
  content: counter(hoofdstuk) ".";
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}

.inhoud a:hover { color: var(--tekst); }

.inhoud a.is-actief {
  color: var(--tekst);
  font-weight: 600;
  border-left-color: var(--groen);
}

.inhoud-datum {
  margin-top: 20px;
  padding-left: 18px;
  font-size: 13px;
  color: var(--grijs);
}

.prose {
  max-width: 800px;
  margin: 0 auto;
}

.tekst-layout .prose { margin: 0; }

.prose h2 { scroll-margin-top: 100px; }

.prose h2 {
  font-size: 23px;
  margin-top: 40px;
}

.prose h2:first-child { margin-top: 0; }

.prose h3 {
  font-size: 17.5px;
  margin-top: 22px;
}

.prose p,
.prose ul { margin-top: 14px; color: var(--grijs); }

.prose ul { padding-left: 22px; }

.prose li { margin-top: 6px; }

.prose strong { color: var(--tekst); }

/* --- 404 --- */

.pagina-404 .hero-inner { text-align: center; }

.pagina-404 .hero-copy {
  max-width: 780px;
  margin: 0 auto;
}

.pagina-404 .hero-text { margin-inline: auto; }

.pagina-404 .hero-buttons,
.pagina-404 .hero-links { justify-content: center; }

/* compacter zodat de banner even hoog blijft als op de andere pagina's */
.pagina-404 .hero-text { margin-top: 12px; }

.pagina-404 .hero-links { margin-top: 18px; }

.pagina-404 .hero-buttons { margin-top: 22px; }

/* =====================================================
   Animaties
   ===================================================== */

@keyframes opkomen {
  from { opacity: 0; translate: 0 22px; }
  to { opacity: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* =====================================================
   Responsive
   ===================================================== */

@media (max-width: 1080px) {
  .main-nav { gap: 20px; }
  .nav-link { font-size: 14px; }
}

@media (max-width: 920px) {
  /* dropdown die soepel open- en dichtklapt (max-height i.p.v. display,
     zodat de transition kan animeren) */
  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--wit);
    padding: 0 24px;
    border-radius: 0 0 20px 20px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, .12);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: max-height .4s var(--ease-soepel),
                opacity .3s var(--ease-soepel),
                padding .4s var(--ease-soepel);
  }

  .main-nav.is-open {
    max-height: 70vh;
    padding: 10px 24px 26px;
    opacity: 1;
    pointer-events: auto;
    overflow-y: auto;
  }

  /* dunne scheidingslijnen i.p.v. de onderstreep-hover van de desktopnav,
     die in een verticale lijst niet goed werkt */
  .nav-link {
    padding: 18px 0;
    font-size: 19px;
    font-weight: 600;
    border-bottom: 1px solid rgba(26, 26, 26, .08);
  }

  .nav-link::after { content: none; }

  .nav-link.is-active { color: var(--groen-donker); }

  .nav-toggle { display: flex; }

  /* belknop verhuist van de headerbalk naar het opengeklapte menu */
  .header-actions .btn-header { display: none; }

  .nav-tel {
    display: inline-flex;
    align-self: flex-start;
    margin-top: 18px;
  }

}

@media (max-width: 920px) {
  /* prijsindicatie onder de tekst i.p.v. ernaast */
  .hero-inner-prijs { flex-direction: column; align-items: flex-start; gap: 20px; }

  .hero-prijs { text-align: left; }

  .kolommen { grid-template-columns: minmax(0, 1fr); }

  .sectie-kop-rij { flex-wrap: wrap; align-items: center; }

  .ba-track { grid-auto-columns: min(420px, calc(100vw - 72px)); }

  .diensten-kop { align-items: center; }

  .diensten-track { grid-auto-columns: min(360px, calc(100vw - 72px)); }

  .kolommen-links { grid-template-columns: minmax(0, 1fr); }

  .kolommen-links img { order: 1; }

  .stappen-grid,
  .stappen-grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* foto's naast elkaar boven de tabel */
  .vergelijk-rij {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "fotolinks fotorechts" "tabel tabel";
  }

  .vt-foto-links { grid-area: fotolinks; }
  .vt-foto-rechts { grid-area: fotorechts; }
  .vergelijk-tabel { grid-area: tabel; }

  .vt-foto { min-height: 0; aspect-ratio: 1 / 1; }

  .wissel-layout,
  .wissel-layout-spiegel { grid-template-columns: minmax(0, 1fr); gap: 28px; }

  /* foto weer bovenaan, ook in de gespiegelde variant */
  .wissel-layout-spiegel .wissel-media { order: 0; }

  .wissel-media { height: 340px; }

  .voordelen-grid,
  .voordelen-grid-2 { grid-template-columns: minmax(0, 1fr); }

  .usp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }

  .visie-foto { max-height: 340px; }

  .prijs-grid { grid-template-columns: minmax(0, 1fr); }

  .reviews-track { grid-auto-columns: 88%; }

  .reviews-pijl-links { left: -6px; }
  .reviews-pijl-rechts { right: -6px; }

  .contact-grid,
  .embed-grid { grid-template-columns: minmax(0, 1fr); }

  /* inhoudsopgave boven de tekst i.p.v. ernaast */
  .tekst-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }

  .inhoud {
    position: static;
    background: var(--groen-licht);
    border-radius: var(--radius-kaart);
    padding: 20px 22px;
  }

  .inhoud a { padding: 6px 0 6px 14px; }

  .inhoud-datum { padding-left: 14px; }

  .footer-card { padding-left: clamp(32px, 4vw, 56px); }

  .footer-card-persoon { display: none; }

  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* smalle schermen: tabelkoppen mogen afbreken, anders loopt de tabel
   buiten beeld */
@media (max-width: 680px) {
  .vergelijk-tabel thead th {
    white-space: normal;
    font-size: 11.5px;
    letter-spacing: .03em;
  }

  .vergelijk-tabel th,
  .vergelijk-tabel td { padding: 12px 10px; }

  .vergelijk-tabel tbody th { font-size: 14.5px; }

  .vt-kolom-zonder,
  .vt-kolom-met { width: 66px; }

  .vt-teken { width: 23px; height: 23px; }
  .vt-teken svg { width: 13px; height: 13px; }
}

@media (max-width: 520px) {
  .brand img { width: 140px; }

  .site-footer { padding: 64px 10px 10px; }

  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }

  .hero { padding: 4px 10px 10px; }

  .hero-title { font-size: clamp(2rem, 8.5vw, 2.5rem); }

  /* op mobiel iets meer dekking: de tekst ligt over de hele video */
  .hero-bg::after { background: rgba(0, 0, 0, .5); }

  /* logo-watermerk iets hoger in het kaartje, anders hangt het te laag */
  .voordeel-kaart-merk::before { bottom: 6%; }

  /* inhoud onderin het herovlak i.p.v. gecentreerd; scroll-hint is dan
     overbodig (je ziet de volgende sectie al net onder de fold) */
  .hero-panel { justify-content: flex-end; }

  .scroll-down { display: none; }

  /* contactgegevens naast het ingesloten formulier: groter en beter
     leesbaar op een telefoonscherm */
  .contact-rij li { font-size: 17px; gap: 14px; }

  .contact-rij .contact-icoon { width: 44px; height: 44px; }

  .contact-rij .contact-icoon svg { width: 20px; height: 20px; }

  .btn-outline { justify-content: center; }

  /* review-rij compacter: kleinere avatars, tekst op één regel */
  .hero-social { gap: 12px; }

  .avatar { width: 32px; height: 32px; border-width: 1.5px; }

  .avatar + .avatar { margin-left: -13px; }

  .stars { margin-bottom: 3px; }

  .stars .rating { font-size: 13px; }

  .stars svg { width: 12px; height: 12px; }

  .social-text p { font-size: 11px; white-space: nowrap; }

  .sectie { --sectie-rand: 18px; }

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

  .wissel-media { height: 260px; }

  .wissel-paneel p,
  .wissel-accordeon-stappen .wissel-paneel p { padding-left: 0; }

  .faq-paneel p { padding-right: 0; }

  .usp-grid { grid-template-columns: minmax(0, 1fr); }

  .visie-punten { grid-template-columns: minmax(0, 1fr); }

  .veld-rij { grid-template-columns: 1fr; gap: 0; }

  .form-actie-rij { flex-wrap: wrap; }
}

/* ===== Forminator-formulier — styling gelijk aan prototype .contact-form =====
   De kaart zelf (achtergrond, rand, radius, padding, schaduw) komt van de
   .contact-form-wrapper in de paginatemplates. */

.forminator-custom-form .forminator-row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0 16px;
  margin: 0 !important;
  padding: 0;
}

.forminator-custom-form .forminator-col {
  grid-column: span 12;
  margin: 0 0 16px !important;
  padding: 0;
}
.forminator-custom-form .forminator-col-6 { grid-column: span 6; }
.forminator-custom-form .forminator-col-12 { grid-column: span 12; }
.forminator-custom-form .forminator-row.forminator-hidden { display: none; }
.forminator-custom-form .forminator-row-last .forminator-col { margin-bottom: 0; }

.forminator-custom-form .forminator-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--tekst);
}

.forminator-custom-form .forminator-required { color: #C0392B; }

.forminator-custom-form .forminator-input,
.forminator-custom-form .forminator-textarea,
.forminator-custom-form select.forminator-select--field {
  width: 100%;
  font-family: var(--font);
  font-size: 15px;
  color: var(--tekst);
  background: var(--lichtgrijs);
  border: 1.5px solid #E2E6E2;
  border-radius: 12px;
  padding: 13px 16px;
  transition: border-color .25s var(--ease-soepel), background .25s var(--ease-soepel);
}

.forminator-custom-form .forminator-textarea { min-height: 120px; resize: vertical; }

.forminator-custom-form .forminator-input:focus,
.forminator-custom-form .forminator-textarea:focus,
.forminator-custom-form select.forminator-select--field:focus {
  outline: none;
  border-color: var(--groen);
  background: var(--wit);
}

/* Select2-dropdown van Forminator gelijktrekken met prototype-select */
.forminator-custom-form .select2-container { width: 100% !important; }
.forminator-custom-form .select2-container .select2-selection--single,
.forminator-custom-form .select2-container .select2-selection--multiple {
  background: var(--lichtgrijs) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none"><path d="m3 6 5 5 5-5" stroke="%235C6660" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') right 16px center / 14px no-repeat;
  border: 1.5px solid #E2E6E2;
  border-radius: 12px;
  height: auto;
  min-height: 0;
  padding: 13px 44px 13px 16px;
  transition: border-color .25s var(--ease-soepel), background-color .25s var(--ease-soepel);
}
.forminator-custom-form .select2-container .select2-selection__rendered {
  padding: 0;
  line-height: 1.4;
  font-family: var(--font);
  font-size: 15px;
  color: var(--tekst);
}
.forminator-custom-form .select2-container .select2-selection__arrow { display: none; }
.forminator-custom-form .select2-container--open .select2-selection--single,
.forminator-custom-form .select2-container--focus .select2-selection--single {
  border-color: var(--groen);
  background-color: var(--wit);
}
.select2-dropdown {
  border: 1.5px solid #E2E6E2;
  border-radius: 12px;
  font-family: var(--font);
  font-size: 15px;
  overflow: hidden;
}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background: var(--groen-donker);
}

/* Consent-checkbox: vinkje en tekst op één regel */
.forminator-custom-form .forminator-checkbox__wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}
.forminator-custom-form .forminator-checkbox {
  display: inline-flex;
  align-items: center;
  margin: 0;
  cursor: pointer;
}
.forminator-custom-form .forminator-checkbox-box { display: none; }
.forminator-custom-form .forminator-checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--groen-donker);
  flex: 0 0 auto;
}
.forminator-custom-form .forminator-checkbox__label {
  font-size: 13px;
  color: var(--grijs);
}
.forminator-custom-form .forminator-checkbox__label a { color: var(--groen-donker); }

/* reCAPTCHA-veld */
.forminator-custom-form .forminator-field-captcha { margin-bottom: 16px; }

/* Verzendknop krijgt via site.js de .btn-markup van het prototype,
   inclusief bolletje en hover-animatie (meetSwipeKnoppen) */
.forminator-custom-form .btn { flex: 0 0 auto; font-size: 15px; }
.forminator-custom-form .forminator-row-last .forminator-col {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 0 !important;
}

/* Fout- en succesmeldingen */
.forminator-custom-form .forminator-error-message {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: #C0392B;
}
.forminator-custom-form .forminator-has_error .forminator-input,
.forminator-custom-form .forminator-has_error .forminator-textarea { border-color: #C0392B; }
.forminator-custom-form .forminator-response-message.forminator-error { color: #C0392B; font-size: 14px; margin-bottom: 12px; }
.forminator-custom-form .forminator-response-message.forminator-success {
  background: var(--groen-licht);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 16px;
  font-size: 14px;
}

@media (max-width: 700px) {
  .forminator-custom-form .forminator-col-6 { grid-column: span 12; }
}