/* ==========================================================================
   ontruimenvanwoningen.be — stijl

   Het thema (Autismia) levert de vormentaal: pilvormige badges met een ster,
   titels met één woord in accentkleur, ronde beelden die over de kaartrand
   heen steken, zwevende cijferkaartjes met schaduw, een horizontale stepper
   en golvende sectieovergangen. Die taal is hier overgenomen en toegepast op
   een ontruimingsbedrijf.

   Bewust NIET overgenomen: Bootstrap (228 kB), jQuery, slick en de rest van
   de pluginstack van het thema. Alles hieronder is eigen CSS, en de
   animaties draaien op ~5 kB vanilla JavaScript. Het uiterlijk is dat van
   het thema; de laadtijd niet.

   INHOUD
   1. Tokens
   2. Basis en typografie
   3. Knoppen en badges
   4. Header
   5. Hero
   6. Secties, koppen, golven
   7. Kaarten
   8. Beeldslots
   9. Cijfers en zwevende kaartjes
  10. Stepper
  11. Carrousel
  12. Feiten- en lokale blokken
  13. Tabellen
  14. Stappen
  15. FAQ
  16. CTA en bandeau
  17. Formulier
  18. Footer
  19. Animaties
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root {
  /* Palet van het thema */
  --ovw-primair:        #19C1B6;
  --ovw-primair-donker: #00313C;
  --ovw-accent:         #0A3943;
  --ovw-accent-alt:     #029E9D;
  --ovw-secundair:      #F9A825;
  --ovw-secundair-2:    #FFD500;
  --ovw-licht:          #F3FCF7;
  --ovw-licht-warm:     #FFF8EE;
  --ovw-grijs:          #F9FAFA;
  --ovw-tekst:          #5B6B70;
  --ovw-titel:          #10232A;
  --ovw-rand:           #E3EDEC;
  --ovw-rand-zacht:     #EFF5F4;

  --ovw-radius-xl: 32px;
  --ovw-radius:    18px;
  --ovw-radius-sm: 10px;

  --ovw-schaduw:    0 8px 28px rgba(10, 57, 67, .07);
  --ovw-schaduw-h:  0 18px 46px rgba(10, 57, 67, .15);
  --ovw-schaduw-xl: 0 26px 70px rgba(10, 57, 67, .2);

  --ovw-font:       'Lato', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --ovw-titel-font: 'Bricolage Grotesque', 'Lato', Arial, sans-serif;

  --ovw-soepel: cubic-bezier(.22, 1, .36, 1);
}

/* ==========================================================================
   2. BASIS EN TYPOGRAFIE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-x: clip; }

body {
  margin: 0;
  font-family: var(--ovw-font);
  color: var(--ovw-tekst);
  font-size: 16px;
  line-height: 1.7;
  background: #fff;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5 {
  font-family: var(--ovw-titel-font);
  color: var(--ovw-titel);
  line-height: 1.15;
  font-weight: 700;
  margin: 0 0 .6em;
  letter-spacing: -.01em;
}
h1 { font-size: clamp(2rem, 1.3rem + 2.8vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 1.15rem + 1.9vw, 2.6rem); }
h3 { font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem); }
h4 { font-size: 1.1rem; }
p  { margin: 0 0 1.1em; }

/* Het woord dat in de titel oplicht — het handelsmerk van dit thema. */
.accent    { color: var(--ovw-accent-alt); }
.accent-warm { color: var(--ovw-secundair); }

a { color: var(--ovw-accent-alt); text-decoration: none; transition: color .2s; }
a:hover { color: var(--ovw-primair-donker); }

img { max-width: 100%; height: auto; }
ul, ol { margin: 0 0 1.1em; }

:focus-visible { outline: 3px solid var(--ovw-primair); outline-offset: 3px; border-radius: 6px; }

.ovw-skip { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--ovw-accent); color: #fff; padding: .8rem 1.4rem; }
.ovw-skip:focus { left: 0; }

.ovw-container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: clamp(1rem, .5rem + 2vw, 2rem); }
.ovw-container--smal { max-width: 840px; }

.ovw-center { text-align: center; }
.ovw-klein { font-size: .88rem; }
.ovw-gedempt { color: #8299A0; }
.ovw-visueel-verborgen { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.ovw-prose > * + * { margin-top: 1.1em; }
.ovw-prose h2 { margin-top: 2.4em; }
.ovw-prose h3 { margin-top: 1.7em; }
.ovw-prose ul, .ovw-prose ol { padding-left: 1.4rem; }
.ovw-prose li + li { margin-top: .45em; }
.ovw-prose > :first-child { margin-top: 0; }

.ovw-split { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(1.5rem, 1rem + 3vw, 3.5rem); align-items: start; }
@media (max-width: 940px) { .ovw-split { grid-template-columns: 1fr; } }

/* ==========================================================================
   3. KNOPPEN EN BADGES
   ========================================================================== */
.ovw-btn {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .95rem 1.9rem;
  border-radius: 999px;
  font-weight: 800; font-size: .96rem; line-height: 1.2;
  border: 2px solid transparent;
  cursor: pointer;
  position: relative; overflow: hidden;
  transition: transform .3s var(--ovw-soepel), box-shadow .3s var(--ovw-soepel), background-color .25s, color .25s, border-color .25s;
}
/* Glans die bij hover over de knop schuift — uit de vormentaal van het thema. */
.ovw-btn::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 20%, rgba(255,255,255,.45) 50%, transparent 80%);
  transform: translateX(-120%);
  transition: transform .6s var(--ovw-soepel);
}
.ovw-btn:hover { transform: translateY(-3px); }
.ovw-btn:hover::after { transform: translateX(120%); }

.ovw-btn--primair { background: var(--ovw-primair); color: #042b30; }
.ovw-btn--primair:hover { background: var(--ovw-accent-alt); color: #fff; box-shadow: var(--ovw-schaduw-h); }
.ovw-btn--donker { background: var(--ovw-accent); color: #fff; }
.ovw-btn--donker:hover { background: var(--ovw-primair-donker); color: #fff; box-shadow: var(--ovw-schaduw-h); }
.ovw-btn--geel { background: var(--ovw-secundair); color: #3B2500; }
.ovw-btn--geel:hover { background: #ffb937; color: #3B2500; box-shadow: 0 16px 40px rgba(249,168,37,.3); }
.ovw-btn--outline { border-color: currentColor; color: var(--ovw-accent); background: transparent; }
.ovw-btn--outline:hover { background: var(--ovw-accent); color: #fff; border-color: var(--ovw-accent); }
.ovw-btn--wa { background: #25D366; color: #06331a; }
.ovw-btn--wa:hover { background: #1eb457; color: #fff; }
/* Op een donkere ondergrond */
.ovw-op-donker .ovw-btn--outline { color: #fff; border-color: rgba(255,255,255,.55); }
.ovw-op-donker .ovw-btn--outline:hover { background: #fff; color: var(--ovw-accent); border-color: #fff; }

/* De pilvormige badge met ster, de signatuur van het thema. */
.ovw-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .6rem 1.2rem;
  border: 1px solid var(--ovw-rand);
  border-radius: 999px;
  font-size: .82rem; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--ovw-accent);
  background: #fff;
}
.ovw-badge::before { content: '★'; color: var(--ovw-secundair); font-size: .95rem; }
.ovw-op-donker .ovw-badge { border-color: rgba(255,255,255,.35); background: transparent; color: #fff; }

/* ==========================================================================
   4. HEADER
   ========================================================================== */
.ovw-topbar {
  background: var(--ovw-accent);
  color: #A9CFCD; font-size: .86rem; padding: .5rem 0;
}
.ovw-topbar a { color: #fff; font-weight: 700; }
.ovw-topbar__inner { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; }
@media (max-width: 600px) { .ovw-topbar__inner > :first-child { display: none; } }

.ovw-header { position: sticky; top: 0; z-index: 60; transition: box-shadow .3s, background .3s; }
.ovw-header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(170%) blur(14px);
  border: 1px solid var(--ovw-rand);
  border-radius: 999px;
  padding: .6rem .6rem .6rem 1.4rem;
  margin-block: .9rem;
  transition: margin .35s var(--ovw-soepel), border-radius .35s var(--ovw-soepel), box-shadow .35s, padding .35s;
}
/* Bij het scrollen gaat de balk tegen de rand aan liggen. */
.ovw-header.is-vast .ovw-header__inner {
  margin-block: 0; border-radius: 0 0 var(--ovw-radius) var(--ovw-radius);
  box-shadow: var(--ovw-schaduw); border-top-color: transparent;
}

.ovw-logo {
  display: inline-flex; align-items: center; flex: none;
}
.ovw-logo img {
  display: block; width: clamp(195px, 18vw, 236px); height: auto;
  transition: opacity .25s ease;
}
.ovw-logo:hover img { opacity: .82; }
.ovw-logo--footer { margin-bottom: 1rem; }

.ovw-nav { display: flex; align-items: center; gap: clamp(.7rem, .2rem + .9vw, 1.5rem); }
.ovw-nav a { color: var(--ovw-titel); font-weight: 700; font-size: clamp(.82rem, .72rem + .28vw, .93rem); position: relative; padding-block: .2rem; white-space: nowrap; }
.ovw-nav a:not(.ovw-btn)::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--ovw-primair); border-radius: 2px;
  transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ovw-soepel);
}
.ovw-nav a:not(.ovw-btn):hover::after,
.ovw-nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.ovw-nav a:hover { color: var(--ovw-accent-alt); }

.ovw-nav__toggle {
  display: none; background: none; border: 0; padding: .5rem .8rem;
  font-size: 1.4rem; color: var(--ovw-titel); cursor: pointer;
}
@media (max-width: 1100px) {
  .ovw-nav__toggle { display: block; }
  .ovw-nav {
    position: fixed; inset: 0 0 0 auto; width: min(340px, 82vw);
    flex-direction: column; align-items: flex-start; justify-content: flex-start;
    background: #fff; padding: 5.5rem 1.6rem 2rem; gap: 1.1rem;
    transform: translateX(105%); transition: transform .4s var(--ovw-soepel);
    box-shadow: -16px 0 50px rgba(0,0,0,.16); overflow-y: auto; z-index: 70;
  }
  .ovw-nav[data-open="true"] { transform: translateX(0); }
  .ovw-nav a { font-size: 1.05rem; }
  .ovw-nav-overlay {
    position: fixed; inset: 0; background: rgba(10,57,67,.45);
    opacity: 0; pointer-events: none; transition: opacity .35s; z-index: 65;
  }
  .ovw-nav-overlay[data-open="true"] { opacity: 1; pointer-events: auto; }
}

/* ==========================================================================
   5. HERO
   ========================================================================== */
.ovw-hero {
  position: relative; isolation: isolate;
  background: radial-gradient(120% 130% at 15% 0%, #12505C 0%, var(--ovw-accent) 45%, var(--ovw-primair-donker) 100%);
  color: #CDE7E4;
  padding: clamp(3rem, 2rem + 5vw, 6rem) 0 0;
  overflow: hidden;
}
/* Twee zachte lichtvlekken, zoals de overlays van het thema. */
.ovw-hero::before, .ovw-hero::after {
  content: ''; position: absolute; border-radius: 50%; z-index: -1;
  filter: blur(70px); opacity: .5;
}
.ovw-hero::before { width: 460px; height: 460px; background: var(--ovw-accent-alt); top: -160px; right: -120px; }
.ovw-hero::after  { width: 380px; height: 380px; background: #0E6E73; bottom: -180px; left: -100px; }

.ovw-hero h1 { color: #fff; }
.ovw-hero h1 .accent { color: var(--ovw-primair); }
.ovw-hero__lead { font-size: clamp(1.02rem, .95rem + .4vw, 1.2rem); max-width: 60ch; color: #B3D8D5; }
.ovw-hero__inner { max-width: 62rem; margin-inline: auto; text-align: center; padding-bottom: clamp(2rem, 1rem + 3vw, 3rem); }
.ovw-hero__inner .ovw-hero__lead { margin-inline: auto; }
.ovw-hero__acties { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.ovw-hero__inner .ovw-hero__acties { justify-content: center; }

.ovw-hero__usp {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem;
  margin-top: 2.4rem; padding-top: 1.6rem;
  border-top: 1px solid rgba(255,255,255,.14);
}
.ovw-hero__inner .ovw-hero__usp { justify-content: center; }
.ovw-hero__usp span { display: flex; align-items: center; gap: .5rem; font-size: .92rem; color: #A5CFCC; font-weight: 600; }
.ovw-hero__usp span::before { content: '✓'; color: var(--ovw-primair); font-weight: 900; }

/* De beeldenrij onderaan de hero, zoals de banner-images van het thema. */
.ovw-hero__beelden {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
  max-width: 62rem; margin: 0 auto; padding-bottom: clamp(2rem, 1rem + 3vw, 3.5rem);
}
.ovw-hero__beeld {
  border-radius: var(--ovw-radius-xl); overflow: hidden;
  border: 4px solid rgba(255,255,255,.14);
  aspect-ratio: 4/5; background: rgba(255,255,255,.05);
  transition: transform .5s var(--ovw-soepel), border-color .4s;
}
.ovw-hero__beeld:nth-child(2) { transform: translateY(-1.6rem); }
.ovw-hero__beeld:hover { transform: translateY(-2.4rem) scale(1.02); border-color: var(--ovw-primair); }
.ovw-hero__beeld:nth-child(1):hover, .ovw-hero__beeld:nth-child(3):hover { transform: translateY(-.8rem) scale(1.02); }
@media (max-width: 720px) {
  .ovw-hero__beelden { grid-template-columns: repeat(3, 1fr); gap: .5rem; }
  .ovw-hero__beeld { aspect-ratio: 3/4; border-width: 2px; }
}

/* Golfrand onder de hero — de "shape" van het thema. */
.ovw-golf { display: block; width: 100%; height: auto; margin-bottom: -1px; }
.ovw-golf path { fill: #fff; }
.ovw-golf--licht path { fill: var(--ovw-licht); }

/* ==========================================================================
   6. SECTIES, KOPPEN
   ========================================================================== */
.ovw-sectie { padding: clamp(3rem, 2rem + 3.5vw, 5.5rem) 0; position: relative; }
.ovw-sectie--licht  { background: var(--ovw-licht); }
.ovw-sectie--warm   { background: var(--ovw-licht-warm); }
.ovw-sectie--grijs  { background: var(--ovw-grijs); }
.ovw-sectie--donker { background: var(--ovw-accent); color: #BCDAD8; }
.ovw-sectie--donker h2, .ovw-sectie--donker h3, .ovw-sectie--donker h4 { color: #fff; }
.ovw-sectie--strak { padding-block: 0; }

.ovw-kop { max-width: 68ch; margin-bottom: clamp(2rem, 1.5rem + 1.5vw, 3rem); }
.ovw-kop--midden { margin-inline: auto; text-align: center; }
.ovw-kop h2 { margin-top: .9rem; }
.ovw-kop p { font-size: 1.04rem; }

/* Diagonaal streepjespatroon uit het thema, als scheiding. */
.ovw-patroon {
  height: 10px;
  background: repeating-linear-gradient(-60deg, var(--ovw-rand), var(--ovw-rand) 1px, transparent 1px, transparent 8px);
}

/* ==========================================================================
   7. KAARTEN
   ========================================================================== */
.ovw-grid { display: grid; gap: 1.4rem; }
.ovw-grid--2 { grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); }
.ovw-grid--3 { grid-template-columns: repeat(auto-fit, minmax(275px, 1fr)); }
.ovw-grid--4 { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }

.ovw-kaart {
  display: block;
  background: #fff;
  border: 1px solid var(--ovw-rand);
  border-radius: var(--ovw-radius);
  padding: 1.8rem;
  height: 100%;
  position: relative; overflow: hidden;
  transition: transform .4s var(--ovw-soepel), box-shadow .4s, border-color .3s, background-color .3s;
}
/* Cirkel die vanuit de hoek opengaat bij hover. */
.ovw-kaart::before {
  content: ''; position: absolute; top: 0; right: 0;
  width: 140px; height: 140px; border-radius: 50%;
  background: var(--ovw-licht);
  transform: translate(50%, -50%) scale(0);
  transition: transform .55s var(--ovw-soepel);
  z-index: 0;
}
.ovw-kaart > * { position: relative; z-index: 1; }
.ovw-kaart:hover { transform: translateY(-6px); box-shadow: var(--ovw-schaduw-h); border-color: var(--ovw-primair); }
.ovw-kaart:hover::before { transform: translate(40%, -40%) scale(1); }
.ovw-kaart h3 { margin-bottom: .55rem; }
.ovw-kaart p { font-size: .96rem; margin-bottom: .9rem; }

/* Eén kaart per rij in de accentkleur, zoals het thema doet. */
.ovw-kaart--accent { background: var(--ovw-accent-alt); border-color: var(--ovw-accent-alt); color: #D6F1EF; }
.ovw-kaart--accent h3 { color: #fff; }
.ovw-kaart--accent::before { background: rgba(255,255,255,.1); }
.ovw-kaart--accent:hover { border-color: var(--ovw-secundair); }
.ovw-kaart--accent .ovw-kaart__link { color: var(--ovw-secundair-2); }
.ovw-kaart--accent .ovw-kaart__icoon { background: rgba(255,255,255,.14); color: #fff; }

.ovw-kaart__icoon {
  width: 54px; height: 54px; border-radius: 15px; margin-bottom: 1.2rem;
  display: grid; place-items: center;
  background: var(--ovw-licht); color: var(--ovw-accent-alt); font-size: 1.35rem;
  transition: transform .45s var(--ovw-soepel), background-color .3s;
}
.ovw-kaart:hover .ovw-kaart__icoon { transform: rotate(-8deg) scale(1.08); }

.ovw-kaart__link { font-weight: 800; font-size: .92rem; display: inline-flex; align-items: center; gap: .4rem; }
.ovw-kaart__link::after { content: '→'; transition: transform .35s var(--ovw-soepel); }
.ovw-kaart:hover .ovw-kaart__link::after { transform: translateX(5px); }

/* Kaart met een rond beeld dat over de bovenrand steekt — het patroon uit
   de "recognize"-sectie van het thema. */
.ovw-kaart--rond { padding-top: 1.5rem; overflow: visible; }
.ovw-kaart--rond::before { display: none; }
.ovw-kaart--rond .ovw-rondbeeld {
  width: 150px; height: 150px; border-radius: 50%;
  border: 3px solid var(--ovw-secundair); padding: 5px;
  margin: -5.5rem 0 1.2rem auto; background: #fff;
  overflow: hidden; flex: none;
  transition: transform .5s var(--ovw-soepel), border-color .35s;
}
.ovw-kaart--rond:hover .ovw-rondbeeld { transform: translateY(-6px) rotate(4deg); }
.ovw-kaart--rond .ovw-rondbeeld > * { border-radius: 50%; width: 100%; height: 100%; }
.ovw-kaart__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }

/* ==========================================================================
   8. BEELDSLOTS
   Zolang een gegenereerde foto ontbreekt, staat hier een verzorgde
   placeholder met het label van de fase — nooit een gebroken afbeelding.
   ========================================================================== */
.beeld-slot { border-radius: var(--ovw-radius); overflow: hidden; border: 1px solid var(--ovw-rand); background: #fff; margin: 0; }
.beeld-slot__img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; display: block; transition: transform .7s var(--ovw-soepel); }
.beeld-slot:hover .beeld-slot__img { transform: scale(1.05); }
.beeld-slot__foto { display: block; position: relative; overflow: hidden; }
.beeld-slot__foto--werf::after {
  content: ''; position: absolute; right: 10px; bottom: 10px;
  width: min(70%, 200px); aspect-ratio: 320 / 70;
  background: url('../img/watermark.svg') center / contain no-repeat;
  pointer-events: none;
}
.beeld-slot__leeg {
  aspect-ratio: 4/3;
  display: grid; place-items: center; gap: .6rem;
  background:
    radial-gradient(circle at 30% 20%, rgba(25,193,182,.12), transparent 60%),
    repeating-linear-gradient(-60deg, #E8F3F2 0 1px, transparent 1px 9px),
    var(--ovw-licht);
  color: #6E9296; font-weight: 800; font-size: .78rem;
  letter-spacing: .1em; text-transform: uppercase; text-align: center; padding: 1.2rem;
  position: relative;
}
.beeld-slot__leeg::before {
  content: '⬚'; display: block; font-size: 2rem; opacity: .5; letter-spacing: 0;
}
.beeld-slot__bijschrift {
  padding: .7rem 1rem; font-size: .8rem; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--ovw-accent); background: var(--ovw-licht);
  border-top: 1px solid var(--ovw-rand);
}
.ovw-beelden { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.2rem; }

/* Beeldslot binnen een hero of een rond kader erft de achtergrond. */
.ovw-hero__beeld .beeld-slot__leeg,
.ovw-rondbeeld .beeld-slot__leeg { aspect-ratio: auto; height: 100%; border: 0; background: rgba(255,255,255,.07); color: rgba(255,255,255,.5); }
.ovw-rondbeeld .beeld-slot__leeg { background: var(--ovw-licht); color: #6E9296; }
.ovw-hero__beeld .beeld-slot, .ovw-rondbeeld .beeld-slot { border: 0; height: 100%; border-radius: inherit; background: transparent; }
.ovw-hero__beeld .beeld-slot__img, .ovw-rondbeeld .beeld-slot__img { height: 100%; aspect-ratio: auto; }

/* Groot beeldblok met overlappend tweede beeld, zoals de "about" van het thema. */
.ovw-duobeeld { position: relative; padding-bottom: 3rem; }
.ovw-duobeeld__groot { border-radius: var(--ovw-radius-xl); overflow: hidden; box-shadow: var(--ovw-schaduw); }
.ovw-duobeeld__klein {
  position: absolute; left: 0; bottom: 0; width: 44%;
  border: 8px solid #fff; border-radius: var(--ovw-radius-xl); overflow: hidden;
  box-shadow: var(--ovw-schaduw-xl);
}
@media (max-width: 640px) { .ovw-duobeeld__klein { width: 52%; left: 0; } }

/* ==========================================================================
   9. CIJFERS EN ZWEVENDE KAARTJES
   ========================================================================== */
.ovw-cijfers { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1.2rem; }
.ovw-cijfer {
  background: #fff; border: 1px solid var(--ovw-rand); border-radius: var(--ovw-radius);
  padding: 1.6rem; text-align: center;
  transition: transform .4s var(--ovw-soepel), box-shadow .4s;
}
.ovw-cijfer:hover { transform: translateY(-5px); box-shadow: var(--ovw-schaduw-h); }
.ovw-cijfer__waarde {
  font-family: var(--ovw-titel-font); font-weight: 800;
  font-size: clamp(2rem, 1.5rem + 1.6vw, 2.8rem); color: var(--ovw-accent);
  line-height: 1; display: block; margin-bottom: .4rem;
}
.ovw-cijfer__label { font-size: .92rem; }
.ovw-sectie--donker .ovw-cijfer { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); }
.ovw-sectie--donker .ovw-cijfer__waarde { color: var(--ovw-primair); }

/* Het zwevende cijferkaartje over een beeld — de "feature"-boxen van het thema. */
.ovw-zwever {
  position: absolute; z-index: 2;
  background: #fff; border-radius: var(--ovw-radius);
  box-shadow: var(--ovw-schaduw-xl);
  padding: 1rem 1.2rem; text-align: center; max-width: 230px;
  animation: ovw-zweef 5s ease-in-out infinite;
}
.ovw-zwever__kop { display: flex; align-items: center; justify-content: center; gap: .7rem; margin-bottom: .4rem; }
.ovw-zwever__icoon {
  width: 46px; height: 46px; border-radius: 12px; flex: none;
  background: var(--ovw-secundair); color: #3B2500;
  display: grid; place-items: center; font-size: 1.2rem;
}
.ovw-zwever__waarde { font-family: var(--ovw-titel-font); font-size: 1.5rem; font-weight: 800; color: var(--ovw-titel); }
.ovw-zwever p { font-size: .85rem; margin: 0; line-height: 1.4; }
.ovw-zwever--1 { top: 4%; left: -1.5rem; }
.ovw-zwever--2 { bottom: 6%; right: 0; animation-delay: -1.7s; }
.ovw-zwever--3 { bottom: -1rem; left: 10%; animation-delay: -3.4s; }
@keyframes ovw-zweef { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@media (max-width: 900px) {
  .ovw-zwever { position: static; max-width: none; animation: none; box-shadow: var(--ovw-schaduw); }
  .ovw-zwevers { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; margin-top: 1.5rem; }
}

/* ==========================================================================
   10. STEPPER — horizontale harmonica uit de "condition"-sectie
   ========================================================================== */
.ovw-stepper { display: flex; gap: 0; border-radius: var(--ovw-radius); overflow: hidden; border: 1px solid var(--ovw-rand); min-height: 170px; }
.ovw-stepper__item {
  flex: 1; min-width: 0;
  background: var(--ovw-grijs);
  border-right: 1px solid var(--ovw-rand);
  padding: 1.4rem 1.2rem;
  display: flex; align-items: center; gap: 1rem;
  cursor: pointer; overflow: hidden; position: relative;
  text-align: left; border-top: 0; border-bottom: 0; border-left: 0;
  font: inherit; color: inherit;
  transition: flex .5s var(--ovw-soepel), background-color .45s, color .45s;
}
.ovw-stepper__item:last-child { border-right: 0; }
.ovw-stepper__nummer {
  font-family: var(--ovw-titel-font); font-size: 2.6rem; font-weight: 800;
  color: var(--ovw-rand); line-height: 1; flex: none;
  transition: color .45s;
}
.ovw-stepper__tekst { min-width: 0; }
.ovw-stepper__titel { display: block; font-family: var(--ovw-titel-font); font-weight: 700; font-size: 1rem; color: var(--ovw-titel); margin-bottom: .3rem; }
.ovw-stepper__desc { display: block; font-size: .92rem; opacity: 0; max-height: 0; transition: opacity .4s .1s, max-height .5s; overflow: hidden; }
.ovw-stepper__item[aria-expanded="true"] { flex: 3.2; background: var(--ovw-accent); }
.ovw-stepper__item[aria-expanded="true"] .ovw-stepper__nummer { color: var(--ovw-primair); }
.ovw-stepper__item[aria-expanded="true"] .ovw-stepper__titel { color: #fff; font-size: 1.15rem; }
.ovw-stepper__item[aria-expanded="true"] .ovw-stepper__desc { opacity: 1; max-height: 12rem; color: #BCDAD8; }
@media (max-width: 900px) {
  .ovw-stepper { flex-direction: column; min-height: 0; }
  .ovw-stepper__item { border-right: 0; border-bottom: 1px solid var(--ovw-rand); }
  .ovw-stepper__item[aria-expanded="true"] { flex: 1; }
}

/* ==========================================================================
   11. CARROUSEL — scroll-snap, geen slick, geen jQuery
   ========================================================================== */
.ovw-carrousel { position: relative; }
/* Flexbox in plaats van grid-auto-columns: in een horizontaal scrollende
   container lost een percentage op een grid-kolom onbetrouwbaar op, waardoor
   de kaarten in elkaar geduwd worden. Een flex-basis rekent wel tegen de
   breedte van de container. */
.ovw-carrousel__spoor {
  display: flex; gap: 1.4rem;
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 5.5rem .25rem 1.5rem; margin-inline: -.25rem;
  scrollbar-width: none;
}
.ovw-carrousel__spoor::-webkit-scrollbar { display: none; }
.ovw-carrousel__spoor > * { scroll-snap-align: start; flex: 0 0 min(80vw, 330px); }
@media (min-width: 720px) { .ovw-carrousel__spoor > * { flex-basis: calc((100% - 1.4rem) / 2); } }
@media (min-width: 992px) { .ovw-carrousel__spoor > * { flex-basis: calc((100% - 2.8rem) / 3); } }
.ovw-carrousel__knoppen { display: flex; gap: .6rem; justify-content: flex-end; margin-bottom: .75rem; position: relative; z-index: 3; }
.ovw-carrousel__knop {
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--ovw-rand); background: #fff; color: var(--ovw-accent);
  font-size: 1.1rem; cursor: pointer;
  display: grid; place-items: center;
  transition: background-color .25s, color .25s, transform .3s var(--ovw-soepel), opacity .25s;
}
.ovw-carrousel__knop:hover { background: var(--ovw-accent); color: #fff; transform: scale(1.08); }
.ovw-carrousel__knop[disabled] { opacity: .35; cursor: default; transform: none; }

/* ==========================================================================
   12. FEITEN- EN LOKALE BLOKKEN
   ========================================================================== */
.ovw-feiten {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px; background: var(--ovw-rand);
  border: 1px solid var(--ovw-rand); border-radius: var(--ovw-radius); overflow: hidden;
}
.ovw-feit { background: #fff; padding: 1.2rem 1.3rem; transition: background-color .3s; }
.ovw-feit:hover { background: var(--ovw-licht); }
.ovw-feit__label { font-size: .73rem; text-transform: uppercase; letter-spacing: .08em; color: #8299A0; font-weight: 800; }
.ovw-feit__waarde { font-family: var(--ovw-titel-font); font-size: 1.35rem; font-weight: 700; color: var(--ovw-titel); line-height: 1.2; }
.ovw-feit__waarde--klein { font-size: 1rem; }
.ovw-feit__detail { font-size: .84rem; }

.ovw-lokaal { display: grid; gap: 1.2rem; }
.ovw-lokaal__blok {
  background: #fff; border: 1px solid var(--ovw-rand);
  border-left: 4px solid var(--ovw-accent-alt);
  border-radius: 0 var(--ovw-radius) var(--ovw-radius) 0;
  padding: 1.5rem 1.7rem;
  transition: transform .35s var(--ovw-soepel), box-shadow .35s, border-left-color .3s;
}
.ovw-lokaal__blok:hover { transform: translateX(5px); box-shadow: var(--ovw-schaduw); border-left-color: var(--ovw-secundair); }
.ovw-lokaal__blok h3 { font-size: 1.06rem; margin-bottom: .45rem; }
.ovw-lokaal__blok > :last-child { margin-bottom: 0; }

/* Rij van blokken met wisselende inspringing — de "facts"-sectie van het thema. */
.ovw-trapblok { display: grid; gap: 1.2rem; }
.ovw-trapblok > :nth-child(even) { margin-left: clamp(0rem, 4vw, 3rem); }

.ovw-buren { display: flex; flex-wrap: wrap; gap: .65rem; }
.ovw-buren a {
  display: inline-block; padding: .55rem 1.15rem;
  background: #fff; border: 1px solid var(--ovw-rand); border-radius: 999px;
  font-size: .9rem; font-weight: 700; color: var(--ovw-accent);
  transition: background-color .25s, color .25s, transform .3s var(--ovw-soepel), border-color .25s;
}
.ovw-buren a:hover { background: var(--ovw-accent); color: #fff; border-color: var(--ovw-accent); transform: translateY(-3px); }

/* Het directe antwoord bovenaan elke pagina: kort en zelfstandig leesbaar,
   het formaat dat snippets en AI-antwoorden overnemen. Niet verlengen. */
.ovw-antwoord {
  background: linear-gradient(100deg, var(--ovw-licht), #fff);
  border-left: 4px solid var(--ovw-primair);
  border-radius: 0 var(--ovw-radius) var(--ovw-radius) 0;
  padding: 1.5rem 1.8rem; margin: 0 0 2.4rem;
  font-size: 1.06rem; color: var(--ovw-titel);
  box-shadow: var(--ovw-schaduw);
}
.ovw-antwoord strong { color: var(--ovw-accent); }
.ovw-antwoord > :last-child { margin-bottom: 0; }

/* ==========================================================================
   13. TABELLEN
   ========================================================================== */
.ovw-tabelwrap { overflow-x: auto; border-radius: var(--ovw-radius); box-shadow: var(--ovw-schaduw); }
.ovw-prijstabel { width: 100%; border-collapse: collapse; background: #fff; min-width: 540px; }
.ovw-prijstabel th, .ovw-prijstabel td { padding: 1rem 1.2rem; text-align: left; border-bottom: 1px solid var(--ovw-rand); }
.ovw-prijstabel thead th { background: var(--ovw-accent); color: #fff; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
.ovw-prijstabel tbody tr { transition: background-color .25s; }
.ovw-prijstabel tbody tr:hover { background: var(--ovw-licht); }
.ovw-prijstabel tbody tr:last-child td { border-bottom: 0; }
.ovw-prijstabel td strong { color: var(--ovw-titel); }

/* ==========================================================================
   14. STAPPEN
   ========================================================================== */
.ovw-stappen { counter-reset: stap; display: grid; gap: 1.6rem; position: relative; }
.ovw-stap { position: relative; padding-left: 4.6rem; }
.ovw-stap::before {
  counter-increment: stap; content: counter(stap, decimal-leading-zero);
  position: absolute; left: 0; top: -.2rem;
  width: 52px; height: 52px; border-radius: 16px;
  background: var(--ovw-primair); color: #042b30;
  display: grid; place-items: center;
  font-family: var(--ovw-titel-font); font-weight: 800; font-size: 1.05rem;
  box-shadow: 0 8px 20px rgba(25,193,182,.3);
  transition: transform .4s var(--ovw-soepel);
}
/* Verbindingslijn tussen de stappen. */
.ovw-stap:not(:last-child)::after {
  content: ''; position: absolute; left: 25px; top: 3.2rem; bottom: -1.6rem;
  width: 2px; background: repeating-linear-gradient(to bottom, var(--ovw-rand) 0 5px, transparent 5px 10px);
}
.ovw-stap:hover::before { transform: rotate(-8deg) scale(1.06); }
.ovw-stap h3 { margin-bottom: .3rem; }
.ovw-stap p { margin-bottom: 0; }
.ovw-sectie--donker .ovw-stap:not(:last-child)::after { background: repeating-linear-gradient(to bottom, rgba(255,255,255,.2) 0 5px, transparent 5px 10px); }

/* ==========================================================================
   15. FAQ — werkt zonder JavaScript
   ========================================================================== */
.ovw-faq { display: grid; gap: .85rem; }
.ovw-faq details {
  background: #fff; border: 1px solid var(--ovw-rand);
  border-radius: var(--ovw-radius); padding: 1.2rem 1.5rem;
  transition: border-color .3s, box-shadow .3s;
}
.ovw-faq details[open] { border-color: var(--ovw-primair); box-shadow: var(--ovw-schaduw); }
.ovw-faq summary {
  cursor: pointer; font-weight: 800; color: var(--ovw-titel);
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  font-family: var(--ovw-titel-font);
}
.ovw-faq summary::-webkit-details-marker { display: none; }
.ovw-faq summary::after {
  content: '+'; font-size: 1.5rem; line-height: 1; flex: none;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--ovw-licht); color: var(--ovw-accent-alt);
  display: grid; place-items: center;
  transition: transform .35s var(--ovw-soepel), background-color .3s, color .3s;
}
.ovw-faq details[open] summary::after { content: '−'; background: var(--ovw-primair); color: #042b30; transform: rotate(180deg); }
.ovw-faq details > *:not(summary) { margin-top: .9rem; margin-bottom: 0; animation: ovw-open .4s var(--ovw-soepel); }
@keyframes ovw-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   16. CTA EN BANDEAU
   ========================================================================== */
.ovw-cta {
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(135deg, var(--ovw-accent) 0%, var(--ovw-primair-donker) 100%);
  color: #BCDAD8; border-radius: var(--ovw-radius-xl);
  padding: clamp(2rem, 1.4rem + 2.4vw, 3.4rem);
}
.ovw-cta::before {
  content: ''; position: absolute; z-index: -1; border-radius: 50%;
  width: 340px; height: 340px; background: var(--ovw-accent-alt);
  filter: blur(80px); opacity: .45; top: -140px; right: -80px;
}
.ovw-cta h2 { color: #fff; }
.ovw-cta > :last-child { margin-bottom: 0; }
.ovw-cta__acties { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.5rem; }

/* Smalle band met icoon, zoals de "assesment"-strook van het thema. */
.ovw-band { background: var(--ovw-licht); padding: 1.5rem 0; border-block: 1px solid var(--ovw-rand); }
.ovw-band__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; }
.ovw-band__icoon {
  width: 58px; height: 58px; border-radius: 16px; flex: none;
  background: #fff; color: var(--ovw-primair); font-size: 1.5rem;
  display: grid; place-items: center; box-shadow: var(--ovw-schaduw);
}
.ovw-band__titel { font-family: var(--ovw-titel-font); font-weight: 800; color: var(--ovw-titel); font-size: 1.1rem; }
.ovw-band p { margin: 0; flex: 1 1 380px; font-size: .95rem; }

/* ==========================================================================
   17. FORMULIER
   ========================================================================== */
.ovw-form { display: grid; gap: 1.2rem; }
.ovw-form__rij { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.2rem; }
.ovw-veld label { display: block; font-weight: 800; font-size: .9rem; color: var(--ovw-titel); margin-bottom: .4rem; }
.ovw-veld input, .ovw-veld select, .ovw-veld textarea {
  width: 100%; padding: .9rem 1.1rem;
  border: 1px solid var(--ovw-rand); border-radius: var(--ovw-radius-sm);
  font-family: inherit; font-size: 1rem; background: #fff; color: var(--ovw-titel);
  transition: border-color .25s, box-shadow .25s;
}
.ovw-veld input:focus, .ovw-veld select:focus, .ovw-veld textarea:focus {
  border-color: var(--ovw-primair); outline: none; box-shadow: 0 0 0 4px rgba(25,193,182,.18);
}
.ovw-veld__hint { font-size: .82rem; color: #8299A0; margin: .35rem 0 0; }
.ovw-veld__fout { font-size: .82rem; color: #B33; margin: .35rem 0 0; font-weight: 700; }
/* Honeypot: onzichtbaar voor mensen, ingevuld door bots. */
.ovw-hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.ovw-melding { padding: 1.2rem 1.5rem; border-radius: var(--ovw-radius); margin-bottom: 1.8rem; animation: ovw-open .45s var(--ovw-soepel); }
.ovw-melding--ok   { background: #E8F8F1; border-left: 4px solid #2FA36B; color: #1C5B3D; }
.ovw-melding--fout { background: #FDECEC; border-left: 4px solid #D64545; color: #7A2020; }

/* ==========================================================================
   18. KRUIMELPAD EN FOOTER
   ========================================================================== */
.ovw-kruimels { font-size: .85rem; padding: 1rem 0; color: #8299A0; }
.ovw-kruimels ol { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; padding: 0; }
.ovw-kruimels li + li::before { content: '›'; margin-right: .45rem; color: #B4C7C9; }

.ovw-footer { background: var(--ovw-primair-donker); color: #8FB8BA; padding: 4rem 0 0; font-size: .93rem; position: relative; }
.ovw-footer h4 { color: #fff; font-size: 1rem; margin-bottom: 1.1rem; font-family: var(--ovw-titel-font); }
.ovw-footer a { color: #B0D3D4; }
.ovw-footer a:hover { color: var(--ovw-primair); }
.ovw-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.ovw-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 2.4rem; }
.ovw-footer__onder {
  margin-top: 3.5rem; padding: 1.4rem 0; border-top: 1px solid rgba(255,255,255,.1);
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-size: .85rem;
}

/* Mobiele belbalk: op gsm is bellen de belangrijkste conversie. */
.ovw-belbalk { display: none; }
@media (max-width: 767px) {
  .ovw-belbalk {
    display: grid; grid-template-columns: 1fr 1fr;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
    box-shadow: 0 -6px 24px rgba(0,0,0,.18);
  }
  .ovw-belbalk a { padding: 1rem; text-align: center; font-weight: 800; color: #042b30; background: var(--ovw-primair); }
  .ovw-belbalk a + a { background: #25D366; }
  body { padding-bottom: 3.6rem; }
}

/* Terug naar boven */
.ovw-omhoog {
  position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 70;
  width: 48px; height: 48px; border-radius: 50%; border: 0;
  background: var(--ovw-accent); color: #fff; font-size: 1.2rem; cursor: pointer;
  display: grid; place-items: center; box-shadow: var(--ovw-schaduw-h);
  opacity: 0; transform: translateY(14px) scale(.85); pointer-events: none;
  transition: opacity .35s, transform .35s var(--ovw-soepel), background-color .25s;
}
.ovw-omhoog.is-zichtbaar { opacity: 1; transform: none; pointer-events: auto; }
.ovw-omhoog:hover { background: var(--ovw-primair); color: #042b30; }
@media (max-width: 767px) { .ovw-omhoog { bottom: 4.4rem; } }

/* ==========================================================================
   19. ANIMATIES
   Elementen met data-reveal komen bij het scrollen in beeld. De klasse
   wordt door JavaScript gezet; zonder JavaScript blijft alles gewoon
   zichtbaar (de regel hieronder geldt alleen als de html-tag js-klasse heeft).
   ========================================================================== */
.js [data-reveal] { opacity: 0; transform: translateY(26px); }
.js [data-reveal="links"]  { transform: translateX(-30px); }
.js [data-reveal="rechts"] { transform: translateX(30px); }
.js [data-reveal="zoom"]   { transform: scale(.94); }
.js [data-reveal].is-in {
  opacity: 1; transform: none;
  transition: opacity .75s var(--ovw-soepel), transform .75s var(--ovw-soepel);
  transition-delay: var(--vertraging, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
}

@media print {
  .ovw-header, .ovw-topbar, .ovw-footer, .ovw-belbalk, .ovw-cta, .ovw-omhoog, .ovw-carrousel__knoppen { display: none !important; }
}

/* Een beeldslot op een donkere ondergrond: de lichte placeholder zou daar
   als een witte vlek uitkomen. */
.ovw-op-donker .beeld-slot { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.16); }
.ovw-op-donker .beeld-slot__leeg {
  background:
    radial-gradient(circle at 30% 20%, rgba(25,193,182,.18), transparent 60%),
    repeating-linear-gradient(-60deg, rgba(255,255,255,.05) 0 1px, transparent 1px 9px);
  color: rgba(255,255,255,.45);
}
.ovw-op-donker .beeld-slot__bijschrift {
  background: rgba(255,255,255,.08); color: #fff; border-top-color: rgba(255,255,255,.14);
}