/*
Theme Name: Het Schouwrapport
Theme URI: https://camerabewakinginhetgooi.nl/
Author: MegaSnel
Description: Eigen thema voor Camerabewaking in het Gooi. Opgebouwd als een schouwrapport: grote foto's met aangewezen zwakke plekken, met de hand aangevuld.
Version: 3.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: gooi
*/

/* =========================================================
   ONTWERPGEDACHTE

   Wij verkopen geen angst maar een oordeel. Onze monteur loopt om
   uw huis, wijst de zwakke plek aan en zet er een cirkel omheen.
   Die beweging is het hele ontwerp: grote foto's van echt werk,
   met de hand aangewezen, en cijfers die het onderbouwen.

   Vandaar de handgeschreven aantekeningen naast het beeld, de
   ingecirkelde plekken en de mono-labels bij elke meting. Warm
   waar het over mensen gaat, koel waar het over cijfers gaat.
   ========================================================= */

:root{
  /* grond */
  --wit:#FFFFFF;
  --papier:#FBF9F4;
  --zand:#F1ECE2;
  --zand-diep:#E5DDCE;

  /* inkt */
  --inkt:#15181B;
  --inkt-2:#3D4348;
  --grijs:#767D84;
  --grijs-licht:#A5ABB1;
  --lijn:#DFD8C9;
  --lijn-fijn:#EDE8DD;

  /* het potlood van de monteur */
  --stift:#D14318;
  --stift-diep:#A83210;
  --stift-zacht:#FBEAE2;

  /* het groen van de regio, rustig vlak */
  --bos:#1D3A2C;
  --bos-2:#284B39;

  /* data */
  --op:#B3382B;
  --neer:#2F6B45;

  --breed:1240px;
  --lees:64ch;
  --rond:18px;
  --rond-s:12px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--papier);color:var(--inkt);
  font-family:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
  font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--inkt);text-decoration-color:var(--stift);text-underline-offset:3px}
a:hover{color:var(--stift)}
:focus-visible{outline:2.5px solid var(--stift);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ---------- typografie ---------- */
h1,h2,h3,h4{margin:0;text-wrap:balance}
h1,h2,h3{font-family:"Archivo",system-ui,sans-serif;font-weight:700;letter-spacing:-.035em}
h1{font-size:clamp(2.9rem,6.4vw,5.2rem);line-height:.98}
h2{font-size:clamp(2rem,4vw,3.2rem);line-height:1.04}
h3{font-size:clamp(1.2rem,2.1vw,1.55rem);line-height:1.2;letter-spacing:-.022em}
h4{font-family:"Instrument Sans",sans-serif;font-size:1.02rem;font-weight:600;line-height:1.3;letter-spacing:-.005em}
p{margin:0 0 1.15em}

/* de gele marker, zoals iemand die met een stift over een woord haalt */
.markeer{
  background:linear-gradient(103deg,rgba(255,209,102,.85) 0%,rgba(255,209,102,.95) 6%,rgba(255,209,102,.9) 94%,rgba(255,209,102,.7) 100%);
  padding:.02em .22em;border-radius:3px 9px 5px 8px;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
.op-donker .markeer{background:rgba(255,209,102,.95);color:var(--inkt)}

/* handschrift van de monteur */
.krabbel{
  font-family:"Architects Daughter",cursive;
  font-size:1.12rem;line-height:1.35;color:var(--stift);
  transform:rotate(-1.6deg);display:inline-block;
}
.krabbel-grijs{color:var(--grijs)}

.mono{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.68rem;letter-spacing:.19em;text-transform:uppercase;
  color:var(--grijs);display:block;
}

.overslaan{position:absolute;left:-9999px;top:0;background:var(--inkt);color:#fff;padding:12px 20px;z-index:500}
.overslaan:focus{left:0}
.wrap{max-width:var(--breed);margin:0 auto;padding:0 30px;position:relative}
.lees{max-width:var(--lees)}

/* =========================================================
   KNOPPEN
   ========================================================= */
.knop{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--stift);color:#fff;text-decoration:none;
  padding:16px 27px;font-size:.94rem;font-weight:600;letter-spacing:-.008em;
  border:2px solid var(--stift);border-radius:100px;
  transition:background .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease;
  white-space:nowrap;box-shadow:0 2px 0 rgba(21,24,27,.1);
}
.knop::after{content:"\2192";transition:transform .2s ease}
.knop:hover{background:var(--stift-diep);border-color:var(--stift-diep);color:#fff;transform:translateY(-2px);box-shadow:0 6px 16px rgba(209,67,24,.28)}
.knop:hover::after{transform:translateX(4px)}
.knop-lijn{background:transparent;color:var(--inkt);border-color:var(--inkt);box-shadow:none}
.knop-lijn:hover{background:var(--inkt);border-color:var(--inkt);color:var(--papier);box-shadow:0 6px 16px rgba(21,24,27,.2)}
.op-donker .knop-lijn{color:#fff;border-color:rgba(255,255,255,.55)}
.op-donker .knop-lijn:hover{background:#fff;color:var(--inkt);border-color:#fff}
.knop-plat::after{content:none}
.knop-klein{padding:12px 20px;font-size:.87rem}

/* =========================================================
   KOP  -  zwevende balk
   ========================================================= */
.kop{position:sticky;top:0;z-index:300;padding:14px 0 0;background:transparent}
.kop-balk{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  background:rgba(255,255,255,.93);backdrop-filter:saturate(160%) blur(14px);
  border:1px solid var(--lijn-fijn);border-radius:100px;
  padding:10px 12px 10px 20px;
  box-shadow:0 4px 24px rgba(21,24,27,.07);
}
.merk{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none}
.merk-teken{width:34px;height:34px;flex:none;position:relative;border-radius:50%;background:var(--inkt);display:grid;place-items:center}
.merk-teken::before{content:"";width:13px;height:13px;border-radius:50%;border:2.5px solid var(--papier)}
.merk-teken::after{content:"";position:absolute;width:5px;height:5px;border-radius:50%;background:var(--stift);top:9px;right:8px}
.merk-tekst{display:flex;flex-direction:column;line-height:1.02}
.merk-boven{font-family:"IBM Plex Mono",monospace;font-size:.53rem;letter-spacing:.2em;text-transform:uppercase;color:var(--grijs)}
.merk-naam{font-family:"Archivo",system-ui,sans-serif;font-weight:700;font-size:1.06rem;letter-spacing:-.028em;color:var(--inkt);margin-top:2px}

.hoofdmenu ul{display:flex;gap:22px;list-style:none;margin:0;padding:0;align-items:center;flex-wrap:nowrap}
.hoofdmenu a{text-decoration:none;font-size:.9rem;font-weight:500;color:var(--inkt-2);white-space:nowrap;padding:4px 0;position:relative}
.hoofdmenu a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;background:var(--stift);border-radius:2px;transition:right .24s cubic-bezier(.2,.7,.3,1)}
.hoofdmenu a:hover::after,.hoofdmenu .current-menu-item>a::after{right:0}
.hoofdmenu a:hover{color:var(--inkt)}

.kop-acties{display:flex;align-items:center;gap:14px;flex:none}
.tel{font-family:"Archivo",sans-serif;font-weight:700;font-size:.95rem;text-decoration:none;color:var(--inkt);white-space:nowrap;letter-spacing:-.02em}
.menu-knop{display:none;background:none;border:1.5px solid var(--lijn);border-radius:100px;padding:10px 16px;font:inherit;font-size:.85rem;font-weight:600;cursor:pointer;color:var(--inkt)}

/* =========================================================
   BEELDBAND  -  full bleed boven de vouw
   ========================================================= */
.beeldband{position:relative;width:100%;height:clamp(280px,42vw,520px);overflow:hidden;background:var(--zand-diep)}
.beeldband img{width:100%;height:100%;object-fit:cover;object-position:center 58%}
.beeldband-label{
  position:absolute;left:clamp(20px,4vw,54px);bottom:clamp(20px,4vw,40px);z-index:2;
  background:rgba(21,24,27,.62);backdrop-filter:blur(6px);
  color:#fff;padding:9px 16px;border-radius:100px;
  font-family:"IBM Plex Mono",monospace;font-size:.63rem;letter-spacing:.14em;text-transform:uppercase;
}

/* =========================================================
   HERO
   ========================================================= */
.hero{padding:clamp(48px,7vw,88px) 0 clamp(40px,6vw,72px);position:relative;overflow:hidden}
.hero-stip{
  position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(var(--lijn) 1.1px,transparent 1.1px);
  background-size:22px 22px;
  mask-image:linear-gradient(to bottom,#000 0%,transparent 72%);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,transparent 72%);
}
.hero-binnen{position:relative;z-index:1;display:grid;gap:clamp(32px,5vw,64px);grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);align-items:start}
.hero .mono{margin-bottom:20px}
.hero h1{margin-bottom:6px}
.hero-onderkop{
  font-family:"Archivo",sans-serif;font-weight:700;letter-spacing:-.03em;
  font-size:clamp(1.5rem,3vw,2.3rem);line-height:1.1;margin:14px 0 0;
}
.hero-tekst{font-size:1.06rem;color:var(--inkt-2);margin:24px 0 0;max-width:46ch;line-height:1.6}

/* terugbel-veld */
.terugbel{display:flex;gap:8px;margin-top:30px;max-width:470px;background:var(--wit);border:2px solid var(--inkt);border-radius:100px;padding:6px 6px 6px 22px;align-items:center;box-shadow:0 3px 0 rgba(21,24,27,.1)}
.terugbel input{flex:1;border:none;background:none;font:inherit;font-size:.95rem;color:var(--inkt);outline:none;min-width:0}
.terugbel input::placeholder{color:var(--grijs-licht)}
.terugbel .knop{padding:13px 22px;box-shadow:none}
.terugbel-onder{font-size:.85rem;color:var(--grijs);margin:12px 0 0;max-width:46ch;line-height:1.5}
.terugbel-onder a{color:var(--inkt);font-weight:600}

/* vertrouwens-chips */
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}
.chip{
  display:inline-flex;align-items:center;gap:7px;
  border:1.5px solid var(--lijn);border-radius:100px;
  padding:8px 16px;font-size:.85rem;color:var(--inkt-2);background:var(--wit);
}
.chip b{font-weight:600;color:var(--inkt)}
.chip .ster{color:var(--stift)}

/* de foto met aantekening ernaast */
.aanwijs{position:relative;padding-top:52px}
.aanwijs-krabbel{position:absolute;top:0;left:2px;max-width:22ch;z-index:3;font-size:1.05rem}
.aanwijs-pijl{position:absolute;top:22px;left:min(255px,58%);width:66px;height:52px;z-index:3;color:var(--stift);transform:scaleX(-1) rotate(6deg)}
.aanwijs-foto{position:relative;border-radius:var(--rond);overflow:hidden;box-shadow:0 14px 40px rgba(21,24,27,.14);transform:rotate(1.1deg)}
.aanwijs-foto img{width:100%;aspect-ratio:4/3;object-fit:cover}
.aanwijs-onderschrift{font-size:.88rem;color:var(--grijs);line-height:1.5;margin:16px 4px 0;max-width:40ch}

/* de ingecirkelde plek op een foto */
.cirkel{position:absolute;z-index:3;pointer-events:none;color:var(--stift)}
.cirkel svg{width:100%;height:100%;display:block}

/* =========================================================
   LOPENDE PLAATSNAMEN
   ========================================================= */
.plaatsband{background:var(--inkt);color:var(--papier);overflow:hidden;padding:15px 0}
.plaatsband-spoor{display:flex;gap:0;width:max-content;animation:schuif 44s linear infinite}
.plaatsband:hover .plaatsband-spoor{animation-play-state:paused}
@keyframes schuif{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.plaatsband span{
  font-family:"Archivo",sans-serif;font-weight:700;font-size:.95rem;
  letter-spacing:.1em;text-transform:uppercase;padding:0 22px;white-space:nowrap;
  display:flex;align-items:center;gap:22px;
}
.plaatsband span::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--stift);flex:none}

/* =========================================================
   STROKEN
   ========================================================= */
.strook{padding:clamp(58px,7.5vw,104px) 0;position:relative}
.strook-zand{background:var(--zand)}
.strook-wit{background:var(--wit)}
.strook-bos{background:var(--bos);color:var(--papier)}
.strook-bos h2,.strook-bos h3,.strook-bos h4{color:var(--wit)}
.strook-bos p{color:rgba(251,249,244,.78)}
.strook-bos .mono{color:rgba(251,249,244,.55)}

.strook-kop{margin-bottom:clamp(34px,4.4vw,56px);max-width:58ch}
.strook-kop .mono{margin-bottom:16px}
.strook-kop p{margin-top:18px;color:var(--inkt-2);font-size:1.05rem;max-width:56ch}
.strook-bos .strook-kop p{color:rgba(251,249,244,.78)}
.strook-kop-krabbel{margin-top:14px}

/* twee kolommen */
.duo{display:grid;gap:clamp(30px,4.6vw,66px);grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
.duo-breed{grid-template-columns:minmax(0,1.12fr) minmax(0,1fr)}
.duo-om>.duo-beeld{order:-1}
.duo-beeld{position:relative;border-radius:var(--rond);overflow:hidden;box-shadow:0 12px 36px rgba(21,24,27,.13)}
.duo-beeld img{width:100%;aspect-ratio:4/3;object-fit:cover}
.duo-beeld.staand img{aspect-ratio:3/4}
.duo-tekst h2{margin-bottom:18px}
.duo-tekst .mono{margin-bottom:14px}
.duo-lijst{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:13px}
.duo-lijst li{display:flex;gap:13px;align-items:flex-start;font-size:.97rem;color:var(--inkt-2);line-height:1.5}
.duo-lijst li::before{
  content:"";flex:none;width:20px;height:20px;border-radius:50%;margin-top:2px;
  background:var(--stift-zacht) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23D14318' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 10.5l3.5 3.5L15 6.5'/%3E%3C/svg%3E") center/13px no-repeat;
}
.strook-bos .duo-lijst li{color:rgba(251,249,244,.82)}

/* kaarten */
.raster{display:grid;gap:16px}
.raster-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.raster-3{grid-template-columns:repeat(auto-fit,minmax(262px,1fr))}
.raster-4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.kaart{
  background:var(--wit);border:1px solid var(--lijn-fijn);border-radius:var(--rond);
  padding:30px 26px;display:flex;flex-direction:column;gap:12px;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.kaart:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(21,24,27,.09);border-color:var(--lijn)}
.strook-bos .kaart{background:var(--bos-2);border-color:rgba(255,255,255,.12)}
.kaart-teken{
  width:42px;height:42px;border-radius:12px;background:var(--stift-zacht);
  display:grid;place-items:center;color:var(--stift);margin-bottom:4px;flex:none;
}
.strook-bos .kaart-teken{background:rgba(255,255,255,.1);color:#fff}
.kaart-teken svg{width:21px;height:21px}
.kaart h3{font-family:"Instrument Sans",sans-serif;font-size:1.08rem;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.kaart p{font-size:.93rem;color:var(--inkt-2);line-height:1.55;margin:0}
.strook-bos .kaart p{color:rgba(251,249,244,.72)}
.kaart-prijs{font-family:"Archivo",sans-serif;font-weight:700;font-size:1.05rem;letter-spacing:-.02em;margin-top:auto;padding-top:10px}
.kaart-prijs small{font-weight:400;font-size:.78rem;color:var(--grijs);letter-spacing:0}
.kaart-link{padding-top:12px;margin-top:2px;font-size:.9rem;font-weight:600;text-decoration:none;color:var(--stift);border-top:1px solid var(--lijn-fijn)}
.kaart-link::after{content:" \2192"}
.strook-bos .kaart-link{color:#F5C98A}

/* cijferblokken */
.cijfers{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.cijfer{background:var(--wit);border:1px solid var(--lijn-fijn);border-radius:var(--rond);padding:26px 24px;display:flex;flex-direction:column;gap:8px;position:relative}
.strook-bos .cijfer{background:var(--bos-2);border-color:rgba(255,255,255,.12)}
.cijfer b{font-family:"Archivo",sans-serif;font-weight:700;font-size:clamp(2.7rem,5vw,3.9rem);line-height:.92;letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.cijfer b sup{font-size:.35em;vertical-align:super;color:var(--stift);letter-spacing:0}
.strook-bos .cijfer b sup{color:#F5C98A}
.cijfer .uitleg{font-size:.94rem;color:var(--inkt-2);line-height:1.5;max-width:28ch}
.strook-bos .cijfer .uitleg{color:rgba(251,249,244,.75)}
.cijfer .bron{font-family:"IBM Plex Mono",monospace;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--grijs);margin-top:6px}

/* beeldtegels */
.beeldrij{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.beeldtegel{position:relative;border-radius:var(--rond);overflow:hidden;background:var(--zand-diep);box-shadow:0 8px 26px rgba(21,24,27,.1)}
.beeldtegel img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.beeldtegel:hover img{transform:scale(1.04)}
.beeldtegel-onderschrift{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:44px 22px 20px;
  background:linear-gradient(to top,rgba(21,24,27,.93),rgba(21,24,27,.55) 55%,transparent);
  color:#fff;font-size:.89rem;line-height:1.42;
}
.beeldtegel-onderschrift b{
  display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:.58rem;
  letter-spacing:.15em;text-transform:uppercase;color:#F5C98A;margin-bottom:7px;font-weight:400;
}

/* voor en na */
.vergelijk{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.vergelijk figure{margin:0;position:relative}
.vergelijk .beeld{border-radius:var(--rond);overflow:hidden;box-shadow:0 10px 30px rgba(21,24,27,.12);position:relative}
.vergelijk img{width:100%;aspect-ratio:4/3;object-fit:cover}
.vergelijk figcaption{padding:16px 4px 0;font-size:.92rem;color:var(--inkt-2);line-height:1.5}
.vergelijk figcaption b{display:block;font-family:"IBM Plex Mono",monospace;font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;margin-bottom:7px;font-weight:400}
.vergelijk .fout figcaption b{color:var(--op)}
.vergelijk .goed figcaption b{color:var(--neer)}
.stempel{
  position:absolute;top:14px;right:14px;z-index:3;
  font-family:"Architects Daughter",cursive;font-size:1rem;
  border:2.5px solid currentColor;border-radius:100px;padding:5px 15px;
  transform:rotate(-6deg);background:rgba(255,255,255,.9);
}
.stempel-fout{color:var(--op)}
.stempel-goed{color:var(--neer)}

/* citaat */
.citaat-blok{display:grid;gap:clamp(28px,4vw,58px);grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:start}
.citaat{
  font-family:"Archivo",sans-serif;font-weight:700;letter-spacing:-.032em;
  font-size:clamp(1.7rem,3.4vw,2.7rem);line-height:1.1;margin:0;
}
.citaat-bron{font-family:"IBM Plex Mono",monospace;font-size:.63rem;letter-spacing:.15em;text-transform:uppercase;color:var(--grijs);margin-top:24px;display:block}

/* =========================================================
   INHOUD VAN EEN PAGINA
   ========================================================= */
.inhoud{padding:clamp(46px,5.5vw,78px) 0}
.inhoud>*{max-width:var(--lees)}
.inhoud>.breed,.inhoud>figure,.inhoud>.im,.inhoud>.raster,.inhoud>.cijfers,.inhoud>table,.inhoud>.tabelrol,.inhoud>.beeldrij,.inhoud>.duo,.inhoud>.vergelijk{max-width:none}
.inhoud h2{margin:2.1em 0 .5em;max-width:24ch}
.inhoud h3{margin:1.8em 0 .4em}
.inhoud>h2:first-child,.inhoud>h3:first-child{margin-top:0}
.inhoud ul,.inhoud ol{padding-left:1.2em;margin:0 0 1.2em}
.inhoud li{margin-bottom:.55em}
.inhoud blockquote{margin:2.2em 0;padding:22px 26px;border-left:4px solid var(--stift);background:var(--zand);border-radius:0 var(--rond-s) var(--rond-s) 0;font-size:1.08rem;color:var(--inkt)}

.antwoord{
  font-size:1.09rem;line-height:1.58;color:var(--inkt);
  background:var(--zand);border-left:4px solid var(--stift);
  padding:20px 24px;border-radius:0 var(--rond-s) var(--rond-s) 0;margin-bottom:1.7em;
}
.tabelrol{overflow-x:auto;margin:0 0 1.6em;border-radius:var(--rond-s)}
.inhoud table{width:100%;border-collapse:collapse;font-size:.92rem;font-variant-numeric:tabular-nums;min-width:520px}
.inhoud th,.inhoud td{text-align:left;padding:13px 16px 13px 0;border-bottom:1px solid var(--lijn-fijn);vertical-align:top}
.inhoud thead th{font-family:"IBM Plex Mono",monospace;font-size:.61rem;letter-spacing:.13em;text-transform:uppercase;color:var(--grijs);font-weight:400;border-bottom:1.5px solid var(--lijn)}

/* pagina-hero */
.hero-pagina{padding:clamp(44px,6vw,82px) 0 clamp(34px,4vw,54px)}
.hero-pagina .hero-binnen{grid-template-columns:1fr}
.hero-pagina h1{font-size:clamp(2.3rem,5vw,3.9rem);max-width:20ch}
.kruimel{font-family:"IBM Plex Mono",monospace;font-size:.63rem;letter-spacing:.15em;text-transform:uppercase;color:var(--grijs);margin-bottom:22px}
.kruimel a{text-decoration:none;color:var(--grijs)}
.kruimel a:hover{color:var(--stift)}

/* =========================================================
   OPROEP
   ========================================================= */
.oproep{background:var(--inkt);color:var(--papier);position:relative;overflow:hidden}
.oproep-binnen{position:relative;z-index:2;padding:clamp(60px,7.5vw,102px) 0;display:grid;gap:clamp(34px,4.6vw,64px);grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:start}
.oproep h2{color:#fff;margin-bottom:18px;max-width:16ch}
.oproep p{color:rgba(251,249,244,.76);max-width:48ch}
.oproep .mono{color:rgba(251,249,244,.5);margin-bottom:18px}
.oproep-stappen{list-style:none;margin:0;padding:0;counter-reset:st}
.oproep-stappen li{
  counter-increment:st;padding:17px 0;border-bottom:1px solid rgba(255,255,255,.13);
  font-size:.95rem;color:rgba(251,249,244,.84);line-height:1.5;
  display:flex;gap:16px;align-items:flex-start;
}
.oproep-stappen li:last-child{border-bottom:none}
.oproep-stappen li::before{
  content:counter(st,decimal-leading-zero);flex:none;
  font-family:"IBM Plex Mono",monospace;font-size:.68rem;color:var(--stift);padding-top:3px;
}
.oproep-acties{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

/* =========================================================
   VOET
   ========================================================= */
.voet{background:var(--zand);color:var(--inkt-2);padding:74px 0 32px;font-size:.92rem;border-top:1px solid var(--lijn)}
.voet a{color:var(--inkt-2);text-decoration:none}
.voet a:hover{color:var(--stift)}
.voet-raster{display:grid;gap:44px;grid-template-columns:minmax(0,1.5fr) repeat(auto-fit,minmax(150px,1fr))}
.voet h4{font-family:"IBM Plex Mono",monospace;font-size:.61rem;letter-spacing:.17em;text-transform:uppercase;color:var(--grijs);margin-bottom:18px;font-weight:400}
.voet ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.voet-merk p{margin:16px 0 0;max-width:35ch;line-height:1.65;color:var(--grijs)}
.voet-nap{margin-top:18px;line-height:1.85;font-size:.9rem}
.voet-nap a{font-weight:600;color:var(--inkt)}
.voet-onder{margin-top:56px;padding-top:22px;border-top:1px solid var(--lijn);display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;font-size:.79rem;color:var(--grijs)}

/* =========================================================
   BERICHTEN
   ========================================================= */
.berichtenlijst{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.bericht-kaart{background:var(--wit);border:1px solid var(--lijn-fijn);border-radius:var(--rond);padding:32px 28px;display:flex;flex-direction:column;gap:12px;transition:transform .22s ease,box-shadow .22s ease}
.bericht-kaart:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(21,24,27,.09)}
.bericht-kaart h2{font-size:1.35rem;line-height:1.16}
.bericht-kaart h2 a{text-decoration:none}
.bericht-datum{font-family:"IBM Plex Mono",monospace;font-size:.61rem;letter-spacing:.14em;text-transform:uppercase;color:var(--grijs)}
.bericht-kaart p{font-size:.93rem;color:var(--inkt-2);margin:0}
.paginering{display:flex;gap:9px;margin-top:44px}
.paginering a,.paginering span{padding:11px 17px;border:1.5px solid var(--lijn);border-radius:100px;text-decoration:none;font-size:.86rem;font-weight:600}
.paginering .current{background:var(--inkt);color:var(--papier);border-color:var(--inkt)}

/* =========================================================
   KLEINE SCHERMEN
   ========================================================= */
@media (max-width:1020px){
  .hero-binnen,.duo,.duo-breed,.citaat-blok,.oproep-binnen{grid-template-columns:1fr}
  .duo-om>.duo-beeld{order:0}
  .aanwijs{padding-top:26px}
}
@media (max-width:860px){
  .hoofdmenu{display:none}
  .hoofdmenu.open{display:block;position:absolute;left:0;right:0;top:calc(100% + 10px);background:var(--wit);border:1px solid var(--lijn-fijn);border-radius:var(--rond);padding:22px 26px;box-shadow:0 12px 34px rgba(21,24,27,.12)}
  .hoofdmenu.open ul{flex-direction:column;align-items:flex-start;gap:18px}
  .menu-knop{display:block}
  .kop-acties .tel{display:none}
  .voet-raster{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  body{font-size:16px}
  .wrap{padding:0 18px}
  .kop-balk{border-radius:var(--rond);padding:10px 10px 10px 16px}
  .kaart,.cijfer{padding:26px 22px}
  .voet-raster{grid-template-columns:1fr}
  .terugbel{flex-direction:column;border-radius:var(--rond);padding:14px;align-items:stretch;gap:12px}
  .terugbel input{padding:6px 4px}
  .terugbel .knop{justify-content:center}
  .aanwijs-pijl{display:none}
  .aanwijs-krabbel{position:static;margin-bottom:10px;display:block}
}

/* =========================================================
   MEGAMENU
   ========================================================= */
.heeft-mega{position:relative}
.mega-knop{
  display:inline-flex;align-items:center;gap:7px;background:none;border:none;
  font:inherit;font-size:.9rem;font-weight:500;color:var(--inkt-2);cursor:pointer;
  padding:4px 0;position:relative;
}
.mega-knop::after{
  content:"";width:7px;height:7px;border-right:1.8px solid currentColor;border-bottom:1.8px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform .24s ease;
}
.heeft-mega:hover .mega-knop,.heeft-mega:focus-within .mega-knop{color:var(--inkt)}
.heeft-mega:hover .mega-knop::after,.heeft-mega:focus-within .mega-knop::after{transform:rotate(225deg) translateY(-3px)}

.mega{
  position:absolute;top:calc(100% + 20px);left:50%;transform:translateX(-50%) translateY(-8px);
  width:min(940px,calc(100vw - 60px));
  background:var(--wit);border:1px solid var(--lijn-fijn);border-radius:var(--rond);
  box-shadow:0 22px 60px rgba(21,24,27,.16);
  padding:26px;z-index:320;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .2s ease,transform .24s cubic-bezier(.2,.7,.3,1),visibility .2s;
}
.heeft-mega:hover .mega,.heeft-mega:focus-within .mega{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.mega-raster{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mega-item{
  display:flex;gap:13px;align-items:flex-start;padding:13px;border-radius:var(--rond-s);
  text-decoration:none;transition:background .16s ease;
}
.mega-item:hover{background:var(--zand)}
.mega-teken{
  width:36px;height:36px;border-radius:10px;background:var(--stift-zacht);color:var(--stift);
  display:grid;place-items:center;flex:none;
}
.mega-teken svg{width:18px;height:18px}
.mega-item b{display:block;font-size:.93rem;font-weight:600;color:var(--inkt);letter-spacing:-.01em;margin-bottom:3px}
.mega-item span{display:block;font-size:.83rem;color:var(--grijs);line-height:1.42}
.mega-voet{
  margin-top:20px;padding-top:18px;border-top:1px solid var(--lijn-fijn);
  display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;
}
.mega-voet p{margin:0;font-size:.88rem;color:var(--grijs);max-width:44ch}
.mega-voet b{color:var(--inkt)}

@media (max-width:860px){
  .mega{position:static;transform:none;width:auto;opacity:1;visibility:visible;pointer-events:auto;box-shadow:none;border:none;padding:14px 0 0;background:none}
  .mega-raster{grid-template-columns:1fr}
  .mega-item{padding:9px 0}
  .mega-item:hover{background:none}
  .mega-voet{display:none}
  .heeft-mega{width:100%}
  .mega-knop{display:none}
}