/* AdWarp homepage-prototype · 18-9-2026
   Tokens uit 07-HUISSTIJL-TOKENS.md, opbouw uit 09-VISUELE-RICHTING.md.
   Alleen Avenir Regular (400) en Heavy (800). Geen nagemaakte tussengewichten. */

@font-face{
  font-family:"AvenirLokaal";
  src:url("fonts/avenir-regular.ttf") format("truetype");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"AvenirLokaal";
  src:url("fonts/avenir-heavy.ttf") format("truetype");
  font-weight:800; font-style:normal; font-display:swap;
}

:root{
  --orange:#F65332; --orange-warm:#F9A542; --orange-deep:#C93E1F; --orange-tint:#FBE9DD;
  --navy:#1B2337; --navy-2:#232C42; --navy-3:#333B52;
  --offwhite:#F9F9FB; --white:#fff; --grey:#DCDCDC; --line:#E6E8EC;
  --ink:#1B2337; --ink-soft:#4E5666; --muted:#8A909E;
  --on-navy:#E8EAEF; --on-navy-soft:#B6BECE; --on-navy-muted:#7F8798;
  --groen:#16A34A; --blauw:#2563EB; --rood:#DC2626; --slate:#64748B;
  --gradient:linear-gradient(100deg,#F9A542,#F65332);

  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-pill:999px;
  --e1:0 1px 2px rgba(27,35,55,.06), 0 4px 10px rgba(27,35,55,.07);
  --e2:0 2px 6px rgba(27,35,55,.07), 0 10px 24px rgba(27,35,55,.10);
  --e3:0 4px 12px rgba(27,35,55,.09), 0 20px 44px rgba(27,35,55,.14);

  /* Eén vinkje voor de hele pagina: een SVG met een vierkante viewBox waarin het vinkje
     optisch in het midden staat. Als achtergrond op center gezet, dus geen gedraaid randje
     met een marge meer, dat hing zichtbaar naar rechtsonder. */
  --vink:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.7 9.5 3.4' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --font:"AvenirLokaal","Avenir Next","Avenir",system-ui,-apple-system,"Segoe UI",sans-serif;
  --breed:1300px;
  --uit:cubic-bezier(.16,1,.3,1);

  /* ---------- typeschaal (bijstellen doe je hier, nergens anders) ----------
     Besluit Tufan 18-9: een stap terug, het was te groot en daardoor druk.
     De clamp loopt van de mobiele maat (390) naar de desktopmaat (1200 en breder); de
     meeschalende middenwaarde is zo gezet dat hij op 1024 px precies op de tabletmaat
     uitkomt. De mobiele waarden staan als override in het blok voor 520 px. */
  --t-h1:clamp(36px,calc(-17.8px + 6.82vw),64px);   /* 64 / 52 / 36 */
  --t-h1-lh:1.04;
  --t-h2:clamp(28px,calc(3.1px + 3.41vw),44px);     /* 44 / 38 / 28 */
  --t-h2-lh:1.08;
  --t-h3:20px;            /* koppen in kaarten en vragen; 18 px op 390 */
  --t-intro:18px;         /* hero-subkop en sectie-intro; 17 px op 390 */
  --t-tekst:16px;         /* lopende tekst, regelhoogte 1,6 */
  --t-klein:14px;         /* kleine tekst, eyebrows, labels */
  --t-mini:13px;          /* ondergrens voor de mini-interfaces */
  --t-knop:16px;
  --t-bedrag:44px;        /* € 2.397 in de rapportkaart; 33 px op 390 */
  --t-prijs:clamp(34px,3.6vw,44px);   /* € 0, € 99, € 199 */
  --t-band:20px;          /* lopende band; 18 px op 390 */
  /* Uitzondering die niet meeschaalt: de statuslabels Lekt / Nakijken / In orde blijven
     Avenir Heavy 19 px. Zie de toelichting bij .status: alleen als grote tekst haalt
     #F65332 op wit genoeg contrast. */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font);
  font-weight:400;
  font-size:var(--t-tekst);
  line-height:1.6;
  color:var(--ink);
  background:var(--white);
  font-synthesis:none;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
p{margin:0 0 16px}
ul,ol{margin:0;padding:0;list-style:none}
b,strong{font-weight:800}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:4px}

.wrap{max-width:var(--breed);margin:0 auto;padding-inline:28px}
/* Skiplink: wit op navy-hero én op witte secties zichtbaar dankzij de oranje rand; fixed zodat hij
   boven de vaste nav (z-index 50) staat en ook na scrollen in beeld komt. Was navy-op-navy en
   daardoor onzichtbaar (testrapport 19-9). */
.overslaan{position:fixed;left:-9999px;top:12px;z-index:100;background:#fff;color:var(--navy);padding:14px 20px;border-radius:var(--r-md);text-decoration:none;font-weight:800;box-shadow:0 0 0 3px var(--orange),0 8px 24px rgba(0,0,0,.25)}
.overslaan:focus{left:12px;outline:none}

.form-noot{font-size:var(--t-klein);color:var(--ink-soft);margin:0 0 14px}

/* ---------- typografie ---------- */
/* Maximale H1 van 86 naar 72 px (besluit Tufan 18-9). 5.9vw geeft ongeveer 60 px op 1024 en
   loopt daaronder door tot de ondergrens van 40 px, die op 390 px geldt. */
.h1{
  font-weight:800;
  font-size:var(--t-h1);
  line-height:var(--t-h1-lh);
  letter-spacing:-.02em;
  margin:0 0 28px;
}
.h2{
  font-weight:800;
  font-size:var(--t-h2);
  line-height:var(--t-h2-lh);
  letter-spacing:-.02em;
  margin:0 0 20px;
}
h3{font-weight:800;font-size:var(--t-h3);line-height:1.24;letter-spacing:-.012em;margin:0 0 8px}
.eyebrow{
  font-weight:800;font-size:var(--t-klein);line-height:1.4;letter-spacing:.01em;
  color:var(--orange-deep);margin:0 0 16px;
  display:flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:22px;height:2px;background:currentColor;flex:none}
.vlag{
  display:inline-block;font-size:12px;line-height:1.3;font-weight:800;
  color:var(--ink-soft);background:var(--offwhite);
  border:1px solid var(--line);border-radius:var(--r-pill);padding:4px 10px;
}
.bedrag,.vk-geld,.mt-geld,.mr-bedrag,.pk-prijs{font-variant-numeric:tabular-nums}

/* ---------- knoppen ---------- */
.knop{
  display:inline-flex;align-items:center;gap:12px;
  font-weight:800;font-size:var(--t-knop);line-height:1;
  padding:14px 14px 14px 24px;
  border-radius:var(--r-pill);
  text-decoration:none;white-space:nowrap;
  border:2px solid transparent;
  transition:transform .16s ease-out, background-color .2s ease, box-shadow .25s var(--uit);
}
.knop .pijl{
  width:28px;height:28px;border-radius:50%;flex:none;
  background:var(--orange);color:#fff;
  display:grid;place-items:center;
  transition:transform .25s var(--uit);
}
.knop .pijl svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover) and (pointer:fine){
  .knop:hover .pijl{transform:translateX(3px)}
}
.knop:active{transform:scale(.975)}
.knop-navy{background:var(--navy);color:#fff;box-shadow:var(--e2)}
.knop-navy:hover{background:var(--navy-2)}
.knop-wit{background:#fff;color:var(--navy);box-shadow:var(--e3)}
.knop-wit:hover{background:var(--offwhite)}
.knop-vol{display:flex;justify-content:space-between;width:100%}
.stille-link{
  font-weight:800;font-size:16px;color:inherit;
  text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;
  text-decoration-color:var(--orange);
}
.stille-link:hover{text-decoration-color:currentColor}

/* ---------- 1. nav ---------- */
.nav{
  position:fixed;inset:0 0 auto;z-index:50;
  background:#fff;box-shadow:0 1px 0 var(--line);
  transition:background-color .3s ease, box-shadow .3s ease, padding .3s ease;
  padding:12px 0;
}
.nav-rij{display:flex;align-items:center;gap:36px}
.logo{flex:none;display:block;text-decoration:none}
.logo img{height:30px;width:auto}
.logo-wit{display:none}
.nav-knop{padding:11px 11px 11px 20px;font-size:15px;box-shadow:none}
.nav-knop-kort{display:none}
.nav-knop .pijl{width:26px;height:26px}
.nav-knop .pijl svg{width:14px;height:14px}

/* ---------- 1a. taalwissel (14-TALEN.md, dropdown sinds 22-9) ----------
   Een <details>: de <summary> is de knop met de huidige taal en een chevron, het paneel
   eronder toont de talen voluit met een vinkje bij de huidige. Zonder JavaScript werkt
   details/summary vanzelf; met JavaScript sluit beweging.js het paneel bij klik buiten,
   Escape en focusverlies, en houdt het megamenu en de wissel wederzijds dicht.
   Het paneel is altijd wit met navy tekst (los van de navstaat), net als de megamenupanelen;
   de knop erft de tekstkleur, dus hij staat goed op navy en op wit. */
.taal{position:relative;flex:none;font-weight:800;font-size:13px;letter-spacing:.04em}
.taal-knop{
  display:inline-flex;align-items:center;gap:6px;list-style:none;cursor:pointer;
  padding:8px 10px;border-radius:999px;border:1px solid currentColor;
  color:inherit;opacity:.85;transition:opacity .2s ease,background-color .2s ease;
  -webkit-user-select:none;user-select:none;
}
.taal-knop::-webkit-details-marker{display:none}
.taal-knop::marker{content:""}
.taal-knop:hover,.taal[open] .taal-knop{opacity:1}
.taal-knop .mm-chev{width:10px;height:10px}
.taal[open] .taal-knop .mm-chev{transform:rotate(180deg)}
.taal-knop:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.taal-paneel{
  position:absolute;top:calc(100% + 8px);right:0;z-index:60;min-width:172px;
  background:#fff;color:var(--navy);border-radius:var(--r-md);
  box-shadow:0 1px 0 var(--line),var(--e3);padding:6px;
}
.taal-lijst{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.taal-k{
  display:flex;align-items:center;gap:10px;
  padding:9px 10px;border-radius:var(--r-sm);
  color:inherit;text-decoration:none;font-weight:400;font-size:15px;letter-spacing:0;
  white-space:nowrap;
}
.taal-k:hover{background:var(--offwhite)}
.taal-k:focus-visible{outline:2px solid var(--orange);outline-offset:-2px}
.taal-k[aria-current="true"]{font-weight:800;cursor:default}
.taal-kort{font-weight:800;font-size:12px;letter-spacing:.04em;width:22px;opacity:.55}
.taal-k[aria-current="true"] .taal-kort{opacity:1}
.taal-vink{margin-left:auto;width:12px;height:12px;color:var(--orange)}
.taal-vink svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* paneel komt 6 px omhoog binnen, zoals de megamenupanelen */
.js .taal-paneel{animation:taal-in .18s var(--uit)}
@keyframes taal-in{from{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}
/* in het mobiele menu: geen dropdown maar een rij van drie pillen boven de auditkaart */
.taal-mob{margin:2px 0 14px}
.taal-mob .taal-lijst{display:flex;gap:8px}
.taal-mob .taal-k{border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:8px 12px;font-size:14px}
.taal-mob .taal-k[aria-current="true"]{background:#fff;color:var(--navy);border-color:#fff}
.taal-mob .taal-kort{display:none}
.taal-mob .taal-vink{display:none}
/* in de footer (navy-2): het paneel klapt naar boven open, anders valt het onder de pagina */
.taal-voet .taal-paneel{top:auto;bottom:calc(100% + 8px);right:auto;left:0}
.js .taal-voet .taal-paneel{animation-name:taal-in-op}
@keyframes taal-in-op{from{opacity:0;translate:0 6px}to{opacity:1;translate:0 0}}
@media (prefers-reduced-motion:reduce){.js .taal-paneel{animation:none}}
/* met JS: transparant boven de hero, wit zodra je scrolt of zodra een menupaneel open staat.
   .mm-open is dezelfde staat als .vast, maar houdt de hogere padding: anders zou de balk bij
   het openen van een paneel ineenschuiven en het logo verspringen. */
.js .nav{background:transparent;box-shadow:none;padding:20px 0}
.js .nav:not(.vast):not(.mm-open){color:#fff}
.js .nav:not(.vast):not(.mm-open) .logo-navy{display:none}
.js .nav:not(.vast):not(.mm-open) .logo-wit{display:block}
.js .nav:not(.vast):not(.mm-open) .knop-navy{background:#fff;color:var(--navy)}
.js .nav.vast{background:rgba(255,255,255,.96);backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--line);padding:12px 0}
/* vol wit, geen schaduwlijn: de balk loopt naadloos over in het witte paneel eronder, dat zelf
   de dunne lijn bovenaan draagt */
.js .nav.mm-open{background:#fff;box-shadow:none}
/* het mobiele menu is navy, dus daar blijft de balk navy en de tekst wit */
.js .nav.mm-open-mobiel{background:var(--navy);color:#fff}
.js .nav.mm-open-mobiel .logo-navy{display:none}
.js .nav.mm-open-mobiel .logo-wit{display:block}
.js .nav.mm-open-mobiel .knop-navy{background:#fff;color:var(--navy)}

/* ---------- 1b. megamenu (12-MEGAMENU.md) ----------
   Twee panelen onder de nav: "Voor wie" (twee kaarten met een mini-interface) en "Hoe het
   werkt" (twee kolommen links naar de secties van de home). Rechts in beide panelen dezelfde
   uitgelichte auditkaart, uit delen/menukaart.html.

   Opbouw: het witte vlak (.mm-vlak) en de panelen hangen absoluut aan .nav, die fixed staat.
   Dus top:100% = precies onder de balk, over de volle breedte, terwijl de inhoud op de
   1300 px-kolom blijft (.mm-in is ook .wrap). Het vlak groeit mee met de hoogte van het open
   paneel (--mm-h uit beweging.js): zo wisselt de inhoud bij het overstappen naar het andere
   paneel zonder dicht-open-flits.

   In de DOM staat elk paneel direct achter zijn eigen knop, zodat Tab de zichtbare volgorde
   volgt: knop, inhoud van dat paneel, volgende knop. De li's zijn daarom niet positioned.

   Zonder JavaScript: .mm-paneel staat op visibility:hidden (dus ook niet bereikbaar met Tab),
   de twee menuknoppen zijn verborgen en de gewone links (.mm-nojs) staan er in plaats daarvan. */
.mm{margin-right:auto;min-width:0}
.mm-menu{display:flex;gap:2px}
.mm-knop{
  display:inline-flex;align-items:center;gap:7px;
  font:400 16px/1 var(--font);color:inherit;
  background:none;border:0;border-radius:var(--r-sm);
  padding:11px 13px;margin:0;cursor:pointer;
  text-decoration:none;white-space:nowrap;
}
/* zelfde oranje streepje als de oude nav: bij hover, bij een open paneel en blijvend op de
   groep waar de huidige pagina onder hangt */
.mm-label{position:relative}
.mm-label::after{
  content:"";position:absolute;left:0;right:0;bottom:-5px;height:2px;
  background:var(--orange);transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--uit);
}
.mm-knop:hover .mm-label::after,
.mm-knop[aria-expanded="true"] .mm-label::after,
.mm-knop.actief .mm-label::after{transform:scaleX(1)}
.mm-chev{width:11px;height:11px;flex:none;transition:transform .3s var(--uit)}
.mm-chev svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.mm-knop[aria-expanded="true"] .mm-chev{transform:rotate(180deg)}
.js .mm-nojs{display:none}
html:not(.js) button.mm-knop,
html:not(.js) .burger{display:none}

/* het witte vlak onder de balk */
.mm-vlak{
  position:absolute;left:0;right:0;top:100%;z-index:0;
  height:var(--mm-h,0px);background:#fff;pointer-events:none;
  /* padding-box: anders schijnt het witte vlak door de doorzichtige rand van 1 px heen en
     staat er een streep onder de balk terwijl het menu dicht is */
  background-clip:padding-box;
  border-top:1px solid var(--line);
  border-radius:0 0 var(--r-xl) var(--r-xl);
  box-shadow:var(--e3);
  transition:height .34s var(--uit);
}
.nav:not(.mm-open) .mm-vlak{box-shadow:none;border-top-color:transparent}

.mm-paneel{
  position:absolute;left:0;right:0;top:100%;z-index:1;color:var(--ink);
  padding:30px 0 34px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .22s ease-out,visibility .22s;
}
.mm-paneel.open{opacity:1;visibility:visible;pointer-events:auto}
/* kolommen of kaarten links, de auditkaart rechts */
.mm-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);gap:28px;align-items:stretch}
.mm-kaarten{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.mm-kolommen{display:grid;grid-template-columns:1fr 1fr;gap:30px}

/* de twee kaarten in paneel "Voor wie" */
.mm-kaart{
  display:flex;flex-direction:column;gap:16px;height:100%;
  background:var(--offwhite);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:18px;text-decoration:none;color:inherit;box-shadow:var(--e2);
  transition:transform .25s var(--uit),box-shadow .25s var(--uit);
}
/* de twee mini-interfaces worden even hoog, zodat de koppen eronder op één lijn staan */
.mm-kaart-beeld{display:flex;flex:1}
.mr-menu{flex:1}
.mm-kaart-in{display:grid;gap:8px;margin-top:auto}
.mm-kaart-kop{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  font-weight:800;font-size:var(--t-h3);line-height:1.2;letter-spacing:-.012em;
}
/* zelfde pijlrondje als in de knoppen (.knop .pijl), hier als losse bubbel */
.mm-bubbel{
  width:28px;height:28px;border-radius:50%;flex:none;
  background:var(--orange);color:#fff;display:grid;place-items:center;
  transition:transform .25s var(--uit);
}
.mm-bubbel svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mm-kaart-tekst{font-size:var(--t-tekst);line-height:1.5;color:var(--ink-soft)}
.mm-kaart-regel{
  font-weight:800;font-size:var(--t-klein);line-height:1.4;
  border-top:1px solid var(--line);padding-top:12px;
}

/* de kolommen met links in paneel "Hoe het werkt" */
.mm-kolomkop{
  font-weight:800;font-size:13px;line-height:1.3;color:var(--ink-soft);
  margin:0 0 12px;padding-bottom:10px;border-bottom:1px solid var(--line);
}
.mm-kolom > ul{display:grid;gap:4px;margin:0 -12px}
.mm-link{
  position:relative;display:grid;gap:3px;
  padding:12px 42px 12px 12px;border-radius:var(--r-md);
  text-decoration:none;color:inherit;
  transition:background-color .2s ease;
}
.mm-link-titel{font-weight:800;font-size:var(--t-tekst);line-height:1.3}
.mm-link-sub{font-size:var(--t-klein);line-height:1.35;color:var(--ink-soft)}
/* het pijltje schuift 4 px in bij hover; als masker, zodat de kleur uit de tekstkleur komt */
.mm-link::after{
  content:"";position:absolute;right:12px;top:50%;width:16px;height:16px;margin-top:-8px;
  background:var(--orange-deep);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8h9M7.6 4.2 11.4 8l-3.8 3.8' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8h9M7.6 4.2 11.4 8l-3.8 3.8' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity:0;transform:translateX(-4px);
  transition:opacity .2s ease,transform .25s var(--uit);
}
.mm-link:hover,.mm-link:focus-visible{background:var(--offwhite)}
.mm-link:hover::after,.mm-link:focus-visible::after{opacity:1;transform:none}

/* de uitgelichte auditkaart, in beide panelen gelijk */
.mm-uit{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;
  background:var(--navy);color:#fff;border-radius:var(--r-xl);
  padding:24px 26px 26px;box-shadow:var(--e2);
}
/* de kleine wig als accent in de rechterbovenhoek, met de punt naar binnen. Klein en in de
   lege ruimte boven de tekst: een groot oranje vlak mag niet en er mag geen tekst op vallen. */
.mm-uit-wig{position:absolute;right:20px;top:20px;width:88px;height:auto}
/* de tekst komt boven de wig te staan; de wig zelf blijft absoluut */
.mm-uit > *:not(.mm-uit-wig){position:relative}
.mm-uit .eyebrow{color:var(--orange);margin-bottom:12px}
.mm-uit-kop{font-weight:800;font-size:var(--t-h3);line-height:1.25;letter-spacing:-.012em;margin:0 0 10px}
.mm-uit-regel{font-size:var(--t-klein);line-height:1.5;color:var(--on-navy-soft);margin:0 0 18px}
.mm-uit-knop{margin:0 0 14px}
.mm-uit-praat{margin:0}

/* de mini-interfaces in paneel "Voor wie": verkleinde, statische versies van de rapportkaart
   en van het accountoverzicht, met dezelfde cijfers. Geen afbeeldingen, en decoratief: de
   kaart eromheen zegt zelf waar hij over gaat, dus aria-hidden. */
.mr-menu{display:block;box-shadow:var(--e1);border:1px solid var(--line)}
.mr-menu .mr-body{display:block;padding:14px 16px 16px}
.mr-menu .mr-bedrag{font-size:26px}
.mr-menu .mr-label{margin:4px 0 10px}
.mr-vlag{display:block;font-size:11px;font-weight:800;line-height:1.3;color:var(--muted);margin-bottom:8px}
.mr-menu .mr-balk{display:flex;gap:2px;height:10px;margin-bottom:12px}
.mr-menu .mr-balk > span{display:block;width:var(--w);border-radius:2px}
.mr-rijen{display:grid}
.mr-rij{display:flex;align-items:center;gap:10px;padding:7px 0;border-top:1px solid var(--line)}
.mr-naam{font-size:12.5px;line-height:1.25;color:var(--ink-soft);margin-right:auto}
.mr-geld{font-size:12.5px;font-weight:800;font-variant-numeric:tabular-nums}
/* het accountoverzicht heeft een kopregel met dezelfde woorden als op Voor agencies */
.mr-ao .mr-rij{display:grid;grid-template-columns:minmax(0,1fr) 54px 74px;gap:8px;align-items:center}
.mr-ao .mr-naam{font-weight:800;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mr-ao .mr-geld{color:var(--orange-deep);text-align:right}
.mr-kop{border-top:0;padding-top:0;font-size:10.5px;line-height:1.2;color:var(--muted)}
.mr-kop span:nth-child(2){text-align:right}
/* De statuslabels zijn hier 12,5 px en dus geen "grote tekst" meer: --orange (3,39:1 op wit)
   en --groen (3,05:1) mogen dan niet als tekstkleur. Het label staat daarom in navy en de
   kleur zit in het rondje, dat zijn eigen vorm houdt (vol / half / vinkje). */
.status.mm-status{font-size:12.5px;line-height:1.2;color:var(--ink);gap:6px}
.status.mm-status i{width:12px;height:12px;border-width:1.6px}
.status.mm-status.s-lek i{background:var(--rood);border-color:var(--rood)}
.status.mm-status.s-kijk i{background:linear-gradient(90deg,var(--orange) 0 50%,transparent 50% 100%);border-color:var(--orange)}
.status.mm-status.s-ok i{background:var(--groen) var(--vink) no-repeat center/90%;border-color:var(--groen)}

/* de hamburger is ook het kruisje: bij een open menu draaien de twee streepjes tot een X */
.burger{
  display:none;width:44px;height:44px;flex:none;padding:0;
  border:1.5px solid currentColor;border-radius:50%;
  background:none;color:inherit;cursor:pointer;
  place-items:center;align-content:center;gap:5px;
}
.burger span{display:block;width:18px;height:2px;background:currentColor;border-radius:2px;transition:transform .3s var(--uit)}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

/* mobiel menu: vol scherm in navy onder de balk, de lijst scrollt, de auditkaart staat vast
   onderaan. De accordeon groeit met grid-template-rows, zodat de hoogte meeanimeert. */
.mm-mobiel{
  position:absolute;left:0;right:0;top:100%;z-index:2;
  height:calc(100dvh - var(--nav-h,64px));
  display:flex;flex-direction:column;
  background:var(--navy);color:var(--on-navy);
  padding-inline:22px;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .22s ease-out,transform .28s var(--uit),visibility .22s;
}
.mm-mobiel.open{opacity:1;visibility:visible;transform:none}
/* zonder JavaScript blijft het hidden-attribuut staan; .mm-mobiel{display:flex} zou het
   UA-voorschrift voor [hidden] overschrijven, vandaar deze regel */
.mm-mobiel[hidden]{display:none}
/* boven de mobiele grens bestaat het overlay-menu niet, ook niet met ?menu=mobiel */
@media (min-width:901px){.mm-mobiel{display:none}}
.mm-mob-rol{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:4px 0 20px}
.mm-mob-groep + .mm-mob-groep{border-top:1px solid rgba(255,255,255,.14)}
.mm-mob-knop{
  display:flex;justify-content:space-between;align-items:center;gap:16px;width:100%;
  font:800 20px/1.25 var(--font);letter-spacing:-.012em;color:#fff;
  background:none;border:0;padding:17px 0;margin:0;cursor:pointer;
  text-align:left;text-decoration:none;
}
.mm-mob-knop .mm-chev{width:13px;height:13px}
.mm-mob-knop[aria-expanded="true"] .mm-chev{transform:rotate(180deg)}
/* visibility erbij: een dichte accordeon is met overflow:hidden wel weggeklapt, maar zijn
   links blijven zonder dit met Tab bereikbaar. Bij het openen slaat visibility meteen om, bij
   het sluiten pas aan het eind, dus de animatie blijft heel. */
.mm-mob-acc{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .3s var(--uit),visibility .3s}
.mm-mob-acc.open{grid-template-rows:1fr;visibility:visible}
.mm-mob-in{min-height:0;overflow:hidden;display:grid;gap:2px;padding:0}
.mm-mob-acc.open .mm-mob-in{padding:0 0 14px}
.mm-mobiel .mm-link{color:#fff;padding:9px 34px 9px 0;border-radius:0}
.mm-mobiel .mm-link-sub{color:var(--on-navy-soft)}
.mm-mobiel .mm-link:hover,.mm-mobiel .mm-link:focus-visible{background:none}
/* op een aanraakscherm is er geen hover, dus het pijltje staat er altijd, in oranje op navy */
.mm-mobiel .mm-link::after{right:4px;background:var(--orange);opacity:1;transform:none}
.mm-mob-voet{flex:none;padding:14px 0 calc(16px + env(safe-area-inset-bottom,0px));border-top:1px solid rgba(255,255,255,.14)}
/* dezelfde kaart, maar navy-2 met een haarlijn zodat hij op navy los staat. Eyebrow en
   tekstlink blijven hier weg: de voet moet laag blijven en Contact staat in de lijst erboven. */
.mm-mob-voet .mm-uit{background:var(--navy-2);border:1px solid rgba(255,255,255,.12);box-shadow:none;padding:18px 20px 20px}
.mm-mob-voet .eyebrow,.mm-mob-voet .mm-uit-praat{display:none}
.mm-mob-voet .mm-uit-wig{width:70px;right:16px;top:14px}
body.mm-vast{overflow:hidden}
/* het prototype-paneeltje rechtsonder staat anders over de vaste auditkaart van het mobiele
   menu heen; zolang dat menu open is, is het even weg */
body.mm-vast .schakels{display:none}

/* micro-interacties. Het paneel komt met een fade binnen, de kaarten en kolommen erin schuiven
   8 px omhoog met 40 ms ertussen. Alles hangt aan .js en staat stil bij prefers-reduced-motion
   (het algemene blok onderaan zet alle transities uit). */
@media (hover:hover) and (pointer:fine){
  .mm-kaart:hover{transform:translateY(-2px);box-shadow:var(--e3)}
  .mm-kaart:hover .mm-bubbel{transform:translateX(3px)}
}
.js .mm-paneel .mm-kaarten > li,
.js .mm-paneel .mm-kolommen > li,
.js .mm-paneel .mm-uit{opacity:0;transform:translateY(8px);transition:opacity .22s ease-out,transform .28s var(--uit)}
.js .mm-paneel.open .mm-kaarten > li,
.js .mm-paneel.open .mm-kolommen > li,
.js .mm-paneel.open .mm-uit{opacity:1;transform:none}
.js .mm-paneel.open .mm-kaarten > li:nth-child(2),
.js .mm-paneel.open .mm-kolommen > li:nth-child(2){transition-delay:.04s}
.js .mm-paneel.open .mm-uit{transition-delay:.08s}

/* ---------- 2. hero ---------- */
.hero{
  background:var(--navy);color:#fff;
  position:relative;overflow:hidden;
  min-height:660px;
  padding:132px 0 92px;   /* ruimte onder de tekst waar de straal doorheen loopt */
  display:flex;align-items:center;
}

/* ---------- C1. het oranje element, twee varianten ----------
   B (standaard, gekozen 18-9): de A uit het logo als supergraphic, heel groot en rechts en
   onder afgesneden. De letter zelf in navy-2 op navy, nauwelijks zichtbaar; alleen de wig
   staat in gradient en loopt achter de rapportkaart langs. De vorm eindigt ruim boven de
   sectierand, dus er blijft geen afgesneden rest over.
   A (alternatief, achter de schakelaar): dezelfde wig als lange dunne lichtstraal met de
   punt links, oplopend naar rechts, met een masker dat naar 0 uitfadet en een zachte gloed.
   Wisselen: data-hero op <html>. Geen attribuut = B, dus ook zonder JS. */
.vorm{position:absolute;inset:0;pointer-events:none;overflow:hidden;will-change:transform}
.straal{position:absolute}
.straal-gloed,.straal-wig{position:absolute;inset:0;display:block}
.straal-gloed{filter:blur(40px);opacity:.35}
.straal-gloed i,.straal-wig{
  background:var(--gradient);
  /* punt linksonder, hoogste punt rechtsboven: de straal loopt licht op */
  clip-path:polygon(0 84%, 100% 2%, 100% 60%);
  -webkit-mask-image:linear-gradient(90deg,#000 0 34%,rgba(0,0,0,.6) 66%,transparent 95%);
  mask-image:linear-gradient(90deg,#000 0 34%,rgba(0,0,0,.6) 66%,transparent 95%);
}
.straal-gloed i{position:absolute;inset:0;display:block}
.vorm-hero .straal{left:-6%;right:0;bottom:36px;height:150px}
.beeldmerk{position:absolute;height:auto}
.vorm-hero .beeldmerk{right:-8%;bottom:-30%;width:min(1000px,70%)}

/* B is de standaard: de straal staat uit tenzij er expliciet om variant A gevraagd wordt */
.straal{display:none}
.beeldmerk{display:block}
html[data-hero="a"] .straal{display:block}
html[data-hero="a"] .beeldmerk{display:none}
.hero-grid{
  position:relative;z-index:1;width:100%;
  display:grid;grid-template-columns:minmax(0,1fr) 520px;gap:60px;align-items:center;
}
.hero .eyebrow{color:var(--orange)}
.hero h1 .regel{display:block;overflow:hidden;padding-bottom:.04em}
.hero h1 .regel > span{display:block}
.hero-sub{color:var(--on-navy-soft);max-width:46ch;font-size:var(--t-intro);line-height:1.55;margin:0 0 28px}
.hero-knop{margin:0 0 14px}
.hero-borg{color:var(--on-navy-soft);font-size:var(--t-klein);line-height:1.5;margin:0 0 22px}
.hero-praat{margin:0;color:#fff}

/* rapportkaart */
/* Navy halo in plaats van een zwarte schaduw: een zwarte slagschaduw valt vuil over de
   straal eronder. Het dunne lichte randje houdt de kaart los van de gloed. */
.rk{
  margin:0;background:#fff;color:var(--ink);
  border-radius:var(--r-xl);overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,255,255,.10),
             0 8px 24px rgba(15,22,42,.42),
             0 34px 64px rgba(15,22,42,.46);
}
.rk-gradient{height:5px;background:var(--gradient)}
.rk-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 24px 0;flex-wrap:wrap}
.rk-periode{font-size:13px;color:var(--ink-soft)}
.rk-body{padding:16px 24px 24px}
.rk-vondst{font-weight:800;font-size:18px;line-height:1.34;letter-spacing:-.012em;margin:0 0 20px}
.rk-getal{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.rk-getal .bedrag{font-weight:800;font-size:var(--t-bedrag);line-height:1;letter-spacing:-.025em}
.rk-onder{font-size:14px;color:var(--ink-soft)}

.rk-balk{display:flex;gap:3px;height:16px;border-radius:var(--r-sm);overflow:hidden;margin-bottom:14px}
.seg{width:var(--w);border-radius:3px;transform-origin:left center}
.seg-lek{background:var(--rood)}
.seg-kijk{background:repeating-linear-gradient(135deg,var(--orange-warm) 0 6px,#F7C079 6px 12px)}
.seg-ok{background:var(--groen)}
.rk-legenda{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:13.5px;color:var(--ink-soft);margin-bottom:22px}
.rk-legenda li{display:flex;align-items:center;gap:7px}
.rk-legenda b{color:var(--ink)}
.vlek{width:11px;height:11px;border-radius:3px;flex:none}
.v-lek{background:var(--rood)}
.v-kijk{background:repeating-linear-gradient(135deg,var(--orange-warm) 0 4px,#F7C079 4px 8px)}
.v-ok{background:var(--groen)}

.rk-tegels{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.rk-tegels li{background:#fff;padding:11px 13px;display:flex;flex-direction:column;gap:5px}
.tegel-naam{font-size:13px;color:var(--ink-soft);line-height:1.2}
/* Statuslabels op Avenir Heavy 19 px. Dat is "grote tekst" (>= 18,66 px vet), waardoor de
   eis 3:1 geldt en --orange #F65332 op wit (3,39:1) mag. Zo leest "Nakijken" als oranje en
   niet als een tweede rood naast "Lekt". */
.status{display:flex;align-items:center;gap:8px;font-weight:800;font-size:19px;line-height:1.2}
.status i{width:15px;height:15px;border-radius:50%;flex:none;border:2px solid currentColor;position:relative}
.s-lek{color:var(--rood)}
.s-lek i{background:currentColor}
.s-kijk{color:var(--orange)}
.s-kijk i{background:linear-gradient(90deg,currentColor 0 50%,transparent 50% 100%)}
.s-ok{color:var(--groen)}
.s-ok i{background:currentColor var(--vink) no-repeat center/90%}
.s-uit{color:var(--slate)}
.s-uit i{border-style:dashed}

/* ---------- 4. lopende band (C5) ----------
   Eén rij met de zes pijnpunten, tussen de bento en de stappen. Bewust klein: een dunne
   strook van ongeveer 64 px tussen twee secties, geen sectie op zich. Rustig tempo, stil
   bij hover en bij focus. */
.band{background:var(--orange-tint);color:var(--navy);overflow:hidden;padding:16px 0}
.band-spoor{display:flex;width:max-content}
.band-rij{display:flex;align-items:center;white-space:nowrap}
.band-rij li{
  font-weight:800;font-size:var(--t-band);line-height:1.15;letter-spacing:-.015em;
  display:flex;align-items:center;
}
/* de kleine wig als scheiding; staat in ::after, dus schermlezers lezen alleen de tekst */
.band-rij li::after{
  content:"";flex:none;width:28px;height:7px;margin:0 34px;
  background:url("beeld/swoosh.svg") no-repeat center/contain;
}
.js .band-spoor{animation:loop 45s linear infinite}
.js .band:hover .band-spoor,
.js .band:focus-within .band-spoor,
.js .band:focus .band-spoor{animation-play-state:paused}
.band:focus-visible{outline:3px solid var(--orange-deep);outline-offset:-3px}
@keyframes loop{to{transform:translateX(-50%)}}

/* ---------- secties ---------- */
.sectie{padding:100px 0}
.op-wit{background:#fff}
.op-offwhite{background:var(--offwhite)}
.op-tint{background:var(--orange-tint)}
.sectie-kop{margin-bottom:46px;max-width:720px}
.sectie-intro{color:var(--ink-soft);font-size:var(--t-intro);margin:0;max-width:420px}
/* kop met het label "Voorbeeld · fictief account" ernaast */
.sectie-kop-breed{max-width:none;display:flex;justify-content:space-between;align-items:flex-end;gap:32px}
.sectie-kop-breed > div{max-width:720px}
.vlag-fictief{flex:none;margin-bottom:6px}

/* ---------- 4. bento ---------- */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.tegel{
  grid-column:span 4;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);
  padding:32px;min-height:300px;
  display:flex;flex-direction:column;
  box-shadow:var(--e1);
  transition:transform .35s var(--uit),box-shadow .35s var(--uit);
}
@media (hover:hover) and (pointer:fine){
  .tegel:hover{transform:translateY(-4px);box-shadow:var(--e2)}
}
.tegel p{color:var(--ink-soft);font-size:16px;line-height:1.5;margin:0 0 22px;max-width:30ch}
.tegel .mini{flex:1;justify-content:center}
/* 5-4-3 boven, 4-5-3 onder: Advertentietekst heeft breedte nodig voor de twee blokken,
   Performance Max is de smalle navy hoek. */
.bento .tegel:nth-child(1){grid-column:span 5}
.bento .tegel:nth-child(2){grid-column:span 4}
.bento .tegel:nth-child(3){grid-column:span 3}
.bento .tegel:nth-child(4){grid-column:span 4}
.bento .tegel:nth-child(5){grid-column:span 5}
.bento .tegel:nth-child(6){grid-column:span 3}
.t-navy{background:var(--navy);border-color:var(--navy);color:#fff;box-shadow:var(--e2)}
.t-navy p{color:var(--on-navy-soft)}

/* mini-interfaces. Cijfers zijn fictief, zie het label bij de sectiekop. Alles minimaal 13 px. */
.mini{border-top:1px solid var(--line);padding-top:18px;display:flex;flex-direction:column;gap:0}
.t-navy .mini{border-top-color:rgba(255,255,255,.16)}
.streep{display:block;height:9px;width:var(--b,60%);border-radius:var(--r-pill);background:var(--grey)}
.mini .mini-regel{font-size:13px;line-height:1.45;color:var(--ink-soft);margin:14px 0 0;max-width:none}
.t-navy .mini .mini-regel{color:var(--on-navy-soft)}

/* 1. zoektermen */
.mini-termen{justify-content:flex-start}
.mt-kop,.mt-rij{display:grid;grid-template-columns:1fr 78px 40px;gap:14px;align-items:center}
.mt-kop{font-size:12px;color:var(--muted);padding-bottom:9px;border-bottom:1px solid var(--line)}
.mt-kop span:not(:first-child){text-align:right}
.mt-rij{padding:12px 0;border-bottom:1px solid var(--line)}
.mt-term{font-size:14px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mt-geld,.mt-nul{font-size:14px;font-weight:800;text-align:right}
.mt-nul{color:var(--rood)}

/* 2. conversiemeting */
.mc-rij{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14px}
.mc-rij:last-child{border-bottom:0}
.mc-naam{margin-right:auto}
.mc-st{font-size:13px;color:var(--ink-soft);white-space:nowrap}
.mc-uit .mc-naam,.mc-uit .mc-st{color:var(--orange-deep);font-weight:800}
.bol{width:16px;height:16px;border-radius:50%;flex:none;border:2px solid var(--grey);position:relative}
.bol-ok{background:var(--groen) var(--vink) no-repeat center/84%;border-color:var(--groen)}
.bol-leeg{border-style:dashed;border-color:var(--orange-deep)}
.bol-bezig{border-color:var(--orange-deep);border-right-color:transparent;border-bottom-color:transparent}
.bol-wacht{border-color:var(--grey)}

/* 3. budget */
.mini-budget{justify-content:center;gap:22px}
.mb-balk{height:14px;background:var(--offwhite);border:1px solid var(--line);border-radius:var(--r-pill);overflow:hidden}
.mb-vol{display:block;height:100%;width:var(--v);background:var(--navy-3);border-radius:var(--r-pill)}
.mb-voet{display:grid;gap:2px;font-size:13px;margin:0 0 9px}
.mb-naam{font-weight:800}
.mb-cijfer{color:var(--ink-soft);white-space:nowrap}

/* 4. zoekwoorden */
.mini.mini-chips{flex-direction:row;flex-wrap:wrap;align-content:center;justify-content:flex-start;gap:8px}
.chip{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 14px;border:1px solid var(--line);border-radius:var(--r-pill);
  background:var(--offwhite);font-size:13px;line-height:1.2;
}
.chip-uit{border:1px dashed var(--orange-deep);background:var(--orange-tint);color:var(--orange-deep)}
.chip-uit b{font-size:12px}

/* 5. advertentietekst */
.mini-ad{justify-content:center;gap:0}
.ad-blok{display:grid;gap:4px;border:1px solid var(--line);border-radius:var(--r-md);padding:12px 14px;background:var(--offwhite)}
.ad-label{font-size:12px;color:var(--muted)}
.ad-tekst{font-size:14px;font-weight:800;line-height:1.3}
.ad-tussen{display:flex;align-items:center;gap:12px;padding:10px 0 10px 14px}
.ad-streep{display:block;flex:1;height:2px;background:var(--orange-deep);border-radius:2px}
.ad-oordeel{font-size:13px;font-weight:800;color:var(--orange-deep);white-space:nowrap}

/* 6. performance max */
.mini-pmax{justify-content:center}
.mp-balk{display:flex;gap:3px;height:16px;margin-bottom:18px}
.mp-balk span{width:var(--w);border-radius:3px}
.mp-1{background:var(--on-navy-soft)}
.mp-2{background:var(--on-navy-muted)}
.mp-3{background:#4E5875}
.mp-4{background:var(--navy-3)}
.mp-legenda{display:grid;gap:9px;font-size:13px;color:var(--on-navy-soft)}
.mp-legenda li{display:flex;align-items:center;gap:9px}
.mp-legenda b{margin-left:auto;color:#fff;font-variant-numeric:tabular-nums}

/* ---------- 5. stappen ---------- */
.stappen{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;counter-reset:stap}
.stap{
  background:var(--offwhite);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:36px 32px 32px;display:flex;flex-direction:column;
}
.stap-nr{
  font-weight:800;font-size:15px;line-height:1;
  color:var(--orange-deep);
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;
  border:2px solid var(--orange-deep);
  margin-bottom:24px;
}
.stap h3{font-size:var(--t-h3);margin-bottom:8px}
.stap p{color:var(--ink-soft);font-size:16px;margin:0 0 26px}
.stap .mini{flex:1;justify-content:center;gap:14px}
.stap .mini-rapport{margin:auto 0}  /* midden in de resterende ruimte, niet onderaan geplakt */
.stap-uit{background:var(--navy);border-color:var(--navy);color:#fff}
.stap-uit p{color:var(--on-navy-soft)}
.stap-uit .stap-nr{color:var(--orange-warm);border-color:var(--orange-warm)}
/* stap 1: het koppelscherm. Drie regels met een vinkje, daaronder de knop. */
.mini-google{gap:0;justify-content:flex-start}
.mg-lijst{display:grid;gap:12px;margin-bottom:18px}
.mg-lijst li{display:flex;gap:11px;font-size:13px;line-height:1.45;color:var(--ink-soft)}
.mg-lijst .bol{margin-top:2px}
.nep-knop{
  display:block;text-align:center;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-pill);padding:13px 16px;font-weight:800;font-size:14.5px;color:var(--ink-soft);
  box-shadow:var(--e1);margin-top:auto;
}
/* stap 2: de zes onderdelen bij naam, drie klaar, één bezig, twee wachtend. */
.mini-voortgang{gap:0;justify-content:flex-start}
.mv-lijst{display:grid;gap:0}
.mv-lijst li{display:flex;align-items:center;gap:11px;font-size:13.5px;padding:9px 0;border-bottom:1px solid var(--line)}
.mv-lijst li:last-child{border-bottom:0}
.mv-lijst b{margin-left:auto;font-size:12.5px;color:var(--orange-deep)}
.mv-wacht{color:var(--muted)}
.mv-balk{height:7px;background:var(--line);border-radius:var(--r-pill);margin-top:16px;overflow:hidden}
.mv-balk span{display:block;width:58%;height:100%;background:var(--orange-deep);border-radius:var(--r-pill)}
.mini-rapport{background:#fff;color:var(--ink);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--e2)}
.mr-gradient{height:4px;background:var(--gradient)}
.mr-body{padding:20px 22px 22px}
.mr-bedrag{font-weight:800;font-size:29px;line-height:1;letter-spacing:-.02em;display:block}
.mr-label{font-size:12.5px;color:var(--ink-soft);display:block;margin:5px 0 12px}
.mr-balk{display:flex;gap:2px;height:12px;margin-bottom:14px}
.mr-balk span{width:var(--w);border-radius:2px}
.mr-tegels{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.mr-tegels span{height:24px;border-radius:5px;background:var(--offwhite);border:1px solid var(--line)}
.mr-tegels span:nth-child(1){background:#FDE5E5;border-color:#F6C6C6}
/* tegel 2, 4, 5 en 6 staan op Nakijken, dus in de oranje tint */
.mr-tegels span:nth-child(2),.mr-tegels span:nth-child(4),
.mr-tegels span:nth-child(5),.mr-tegels span:nth-child(6){background:var(--orange-tint);border-color:#F3D3C2}
.mr-tegels span:nth-child(3){background:#DDF3E5;border-color:#B9E4C9}
.stappen-knop{margin:48px 0 0;text-align:center}

/* ---------- 6. oplossen ---------- */
.oplossen{padding-bottom:148px}
.op-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:0 32px;align-items:start;position:relative}
.op-foto{grid-column:1/6;grid-row:1;margin:0;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--e2)}
.op-foto img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:38% 40%}
.op-tekst{grid-column:7/13;grid-row:1;padding-top:4px}
.op-tekst p{color:var(--ink-soft);max-width:38ch}
.punten{display:grid;gap:14px;margin-top:28px}
.punten li{position:relative;padding-left:34px;font-size:var(--t-tekst);line-height:1.55;max-width:42ch}
.punten li::before{
  content:"";position:absolute;left:0;top:7px;width:18px;height:18px;border-radius:50%;
  background:var(--orange-deep) var(--vink) no-repeat center/72%;
}
.op-kaart{grid-column:4/12;grid-row:1;align-self:end;margin-bottom:-88px;z-index:2}
.vk{background:#fff;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--e3)}
.vk-gradient{height:5px;background:var(--gradient)}
.vk-body{padding:24px 28px 26px}
.vk-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.vk-soort{font-weight:800;font-size:13px;color:var(--orange-deep)}
.vk-kop{font-weight:800;font-size:var(--t-h3);line-height:1.3;letter-spacing:-.012em;margin:0 0 18px}
.vk-bewijs{margin:0 0 22px;display:grid;gap:10px;border-top:1px solid var(--line);padding-top:16px}
.vk-bewijs > div{display:flex;justify-content:space-between;gap:20px;align-items:baseline}
.vk-bewijs dt{font-size:var(--t-klein);color:var(--ink-soft)}
.vk-bewijs dd{margin:0;font-weight:800;font-size:var(--t-klein);text-align:right}
.vk-geld{font-size:17px}
.vk-acties{display:flex;gap:12px;align-items:center}
.vk-doen{background:var(--navy);color:#fff;font-weight:800;font-size:var(--t-klein);padding:12px 24px;border-radius:var(--r-pill)}
.vk-over{border:2px solid var(--line);color:var(--ink-soft);font-weight:800;font-size:var(--t-klein);padding:10px 22px;border-radius:var(--r-pill)}

/* ---------- 7. prijs (C2) ----------
   Drie lagen: de gratis audit als brede ingang, een tussenregel, en pas daarna de twee
   echte plannen naast elkaar. Eén knop op de hele sectie, die van de ingang. */
.ingang{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:var(--e1);padding:32px 36px;
  display:flex;align-items:center;gap:40px;
}
.ingang-stap{
  display:inline-block;font-weight:800;font-size:13px;color:var(--orange-deep);
  margin-bottom:10px;
}
.ingang-tekst h3{font-size:var(--t-h3);margin:0 0 6px}
.ingang-tekst p{margin:0;color:var(--ink-soft);font-size:var(--t-tekst)}
.ingang-prijs{margin:0 0 0 auto;font-weight:800;font-size:var(--t-prijs);line-height:1;letter-spacing:-.028em}
.ingang .knop{flex:none}
.prijs-tussen{margin:24px 0 20px;color:var(--ink-soft);font-size:var(--t-tekst)}

.prijzen{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch}
.pk{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);padding:36px 32px 32px;display:flex;flex-direction:column;box-shadow:var(--e1)}
.pk h3{font-size:var(--t-h3);color:var(--ink-soft);font-weight:400;margin-bottom:14px}
.pk-prijs{display:flex;align-items:baseline;gap:10px;margin:0 0 6px}
.pk-prijs .bedrag{font-weight:800;font-size:var(--t-prijs);line-height:1;letter-spacing:-.028em}
.pk-per{font-size:var(--t-klein);color:var(--ink-soft)}
.pk-omvang{font-weight:800;font-size:15px;margin:0 0 24px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.punten-klein li{font-size:var(--t-tekst);padding-left:30px}
.punten-klein li::before{width:16px;height:16px;top:5px}
.pk .punten{margin-top:0}
.pk-link{margin:26px 0 0}
.pk-uit{background:var(--navy);border-color:var(--navy);color:#fff;box-shadow:var(--e2)}
.pk-uit h3{color:var(--on-navy-soft)}
.pk-uit .pk-per{color:var(--on-navy-soft)}
.pk-uit .pk-omvang{border-bottom-color:rgba(255,255,255,.16)}
.pk-uit .punten li::before{background-color:var(--orange)}
.prijs-slot{margin:26px 0 0;color:var(--ink-soft);font-size:var(--t-tekst)}

/* ---------- 8. wie dit bouwt ---------- */
.bouw-grid{display:grid;grid-template-columns:7fr 5fr;gap:80px;align-items:start}
.bouw-grid .h2{margin-bottom:24px}
.bouw-tekst{color:var(--ink-soft);max-width:44ch;margin:0}
.contactkaart{background:var(--offwhite);border:1px solid var(--line);border-radius:var(--r-xl);padding:32px}
.contactkaart dl{margin:0;display:grid;gap:22px}
.contactkaart dt,.persoon-gegevens dt{font-size:var(--t-mini);color:var(--ink-soft);font-weight:800;margin-bottom:5px}
.contactkaart dd,.persoon-gegevens dd{margin:0;font-weight:800;font-size:17px;line-height:1.45}
.contactkaart a,.persoon-gegevens a{text-decoration:none;border-bottom:2px solid var(--orange);padding-bottom:1px}
.contactkaart a:hover,.persoon-gegevens a:hover{border-bottom-color:var(--navy)}

/* ---------- 9. vragen ---------- */
.vragen-grid{display:grid;grid-template-columns:4fr 8fr;gap:64px;align-items:start}
.vragen-grid .sectie-kop{margin-bottom:0;position:sticky;top:104px}
.faq{max-width:800px;border-top:2px solid var(--navy)}
.faq h3{margin:0;font-size:inherit;font-weight:400}
.faq-rij{border-bottom:1px solid var(--line)}
.faq-knop{
  width:100%;background:none;border:0;padding:23px 0;margin:0;
  font:800 var(--t-h3)/1.35 var(--font);letter-spacing:-.012em;color:var(--ink);
  display:flex;justify-content:space-between;align-items:center;gap:24px;
  text-align:left;cursor:pointer;
}
.faq-knop .plus{
  width:34px;height:34px;flex:none;border-radius:50%;border:2px solid var(--line);
  position:relative;transition:background-color .2s ease,border-color .2s ease,transform .3s var(--uit);
}
.faq-knop .plus::before,.faq-knop .plus::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--ink);border-radius:2px;
  transform:translate(-50%,-50%);transition:opacity .2s ease,background-color .2s ease;
}
.faq-knop .plus::before{width:13px;height:2.5px}
.faq-knop .plus::after{width:2.5px;height:13px}
.faq-knop[aria-expanded="true"] .plus{background:var(--navy);border-color:var(--navy)}
.faq-knop[aria-expanded="true"] .plus::before{background:#fff}
.faq-knop[aria-expanded="true"] .plus::after{opacity:0}
@media (hover:hover) and (pointer:fine){.faq-knop:hover .plus{border-color:var(--navy)}}
.faq-antw{padding:0 60px 23px 0}
.faq-antw p{margin:0;color:var(--ink-soft)}

/* ---------- 10. slot ---------- */
/* Dezelfde straal, maar horizontaal en onder de knop door. Geen extra lege ruimte eronder:
   de onderrand van de sectie ligt net onder de straal. */
.slot{background:var(--navy);color:#fff;position:relative;overflow:hidden;padding:112px 0 158px;text-align:center}
.vorm-slot .straal{left:-6%;right:0;bottom:22px;height:104px}
.vorm-slot .straal-gloed i,.vorm-slot .straal-wig{clip-path:polygon(0 50%, 100% 12%, 100% 88%)}
.vorm-slot .beeldmerk{right:-12%;width:min(800px,58vw);bottom:calc(min(800px,58vw) * -0.31)}  /* px: een percentage
   rekent met de hoogte van de hele sectie en schuift de wig dan tegen de footer aan */
.slot-binnen{position:relative;z-index:1}
.slot-kop{font-size:var(--t-h1);line-height:var(--t-h1-lh);margin:0 auto 30px;max-width:900px}
.slot-knop{margin:0 0 18px}
.slot .hero-borg{margin:0 0 20px}

/* ---------- 12. Cialdini-ingrepen (11-CIALDINI.md, lijst "Wat ik nu laat bouwen") ----------
   Zeven kleine ingrepen in de bestaande secties. Geen nieuwe claims, geen nieuwe kleuren. */

/* Ankerdoelen blijven onder de vaste nav uit. .anker is het lege blokje waarmee #contact
   bleef bestaan nadat de sectie "Wie dit bouwt" #wie werd (voor het megamenu). */
[id]{scroll-margin-top:96px}
.anker{height:0;overflow:hidden}

/* 4. Autoriteit: "Hoe we dit gemeten hebben" onder de rapportkaart in de hero. Klein en
   rustig, en het staat onder de kaart, dus het duwt niets boven de vouw weg.
   <details> doet dit zonder JavaScript. */
.hero-rechts{min-width:0}
/* Het hele blokje staat op navy-2 met een haarlijn: de oranje wig van de hero loopt hier
   langs en grijze tekst op oranje haalt geen contrast. Dicht is het een klein pilletje, open
   groeit het met de drie regels mee. */
.gemeten{
  margin-top:14px;font-size:var(--t-klein);line-height:1.5;color:var(--on-navy-soft);
  background:var(--navy-2);border:1px solid rgba(255,255,255,.10);
  border-radius:var(--r-md);padding:8px 14px;width:fit-content;max-width:100%;
}
.gemeten summary{
  display:flex;align-items:center;gap:8px;width:fit-content;
  font-weight:800;cursor:pointer;list-style:none;padding:3px 0;
}
.gemeten summary::-webkit-details-marker{display:none}
.gemeten-chev{width:10px;height:10px;flex:none;transition:transform .25s var(--uit)}
.gemeten-chev svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.gemeten[open] .gemeten-chev{transform:rotate(180deg)}
.gemeten-lijst{display:grid;gap:4px;margin:8px 0 2px}
.gemeten-lijst li{position:relative;padding-left:15px}
.gemeten-lijst li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:var(--orange)}

/* 5. Sympathie: Warp klein rechtsboven in stapkaart 2, decoratief.
   Het bestand warp-head.svg is ongewijzigd overgenomen uit de brandguide en heeft ruim 30 %
   lege ruimte in zijn viewBox: de kop staat van 50 tot 210 in een vierkant van 260. Een kader
   van 64 px levert daarom een Warp van ongeveer 41 px, en dat is de maat die de opdracht
   vraagt (40 tot 48 px). Op een kader van 46 px werd de kop een vlekje van 30 px. */
.stap{position:relative}
.stap-warp{position:absolute;right:18px;top:12px;width:64px;height:auto}

/* 1. Wederkerigheid: het rapport is van de bezoeker. Twee klassen diep, want .ingang-tekst p
   zet de maat van de regel erboven. */
.ingang-tekst .ingang-cadeau{
  margin:8px 0 0;color:var(--ink-soft);
  font-size:var(--t-klein);line-height:1.5;max-width:52ch;
}

/* 6. Verliesframing onder de slotkop. */
.slot-verlies{
  margin:0 auto 26px;max-width:58ch;
  color:var(--on-navy-soft);font-size:var(--t-intro);line-height:1.55;
}

/* 2. Commitment: "Herken je dit?" met drie echte checkboxes in pilvorm.
   Het vinkje-in-rondje is hetzelfde component als in de opsommingen en de mini-interfaces:
   oranje rondje met het witte vinkje. De aangevinkte staat verschilt op drie manieren van de
   uitgevinkte, niet alleen in kleur: het vinkje verschijnt, het rondje vult zich en de rand
   van de pil wordt wit. Er wordt niets opgeslagen en niets verstuurd.
   De meldregel houdt altijd één regel ruimte: hij is een aria-live-gebied en moet in de
   pagina blijven staan, ook als hij leeg is (zonder JavaScript blijft hij leeg). */
.herken{margin:0 auto 26px;max-width:780px}
.herken-kop{font-weight:800;font-size:var(--t-klein);line-height:1.4;margin:0 0 14px;color:#fff}
.herken-pillen{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.hk{
  display:inline-flex;align-items:center;gap:10px;
  padding:9px 18px 9px 14px;border-radius:var(--r-pill);
  /* .42 wit op navy geeft 3,46:1 met de achtergrond; .34 haalde de 3:1 voor een randje net niet */
  border:2px solid rgba(255,255,255,.42);background:rgba(255,255,255,.04);
  font-size:var(--t-klein);line-height:1.3;color:#fff;cursor:pointer;
  transition:background-color .2s ease,border-color .2s ease;
}
.hk-in{
  appearance:none;-webkit-appearance:none;margin:0;flex:none;
  width:20px;height:20px;border-radius:50%;cursor:pointer;
  border:2px solid rgba(255,255,255,.6);
  background:transparent var(--vink) no-repeat center/0;
  transition:background-color .2s ease,border-color .2s ease,background-size .25s var(--uit);
}
.hk-in:checked{background-color:var(--orange);background-size:72%;border-color:var(--orange)}
.hk:has(.hk-in:checked){border-color:#fff;background:rgba(255,255,255,.12)}
@media (hover:hover) and (pointer:fine){
  .hk:hover{border-color:rgba(255,255,255,.6)}
}
.herken-melding{
  margin:16px 0 0;min-height:22px;
  font-size:var(--t-klein);line-height:1.5;color:var(--on-navy-soft);
}

/* ---------- 11. footer ---------- */
.voet{background:var(--navy-2);color:var(--on-navy-soft);padding:28px 0}
.voet-rij{display:flex;align-items:center;gap:32px;flex-wrap:wrap;font-size:var(--t-klein)}
.voet-logo img{height:24px}
.voet-links{display:flex;gap:26px;margin-left:auto}
.voet-links a{text-decoration:none;border-bottom:1px solid transparent;padding-bottom:2px}
.voet-links a:hover{border-bottom-color:var(--orange)}
.voet-naam{color:var(--on-navy-soft)}

/* ---------- beweging ---------- */
/* Zonder JS is alles zichtbaar: elke verbergende regel hangt aan .js */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .55s ease-out,transform .75s var(--uit);transition-delay:var(--d,0s)}
.js .rv.in{opacity:1;transform:none}

.js .hero h1 .regel > span{transform:translateY(106%);transition:transform .95s var(--uit)}
.js.geladen .hero h1 .regel > span{transform:none}
.js .hero h1 .regel:nth-child(2) > span{transition-delay:.07s}
.js .hero h1 .regel:nth-child(3) > span{transition-delay:.14s}
.js .hero-tekst > *:not(h1){opacity:0;transform:translateY(16px);transition:opacity .6s ease-out,transform .7s var(--uit)}
.js.geladen .hero-tekst > *:not(h1){opacity:1;transform:none}
.js .hero-tekst > .eyebrow{transition-delay:.05s}
.js .hero-tekst > .hero-sub{transition-delay:.26s}
.js .hero-tekst > .hero-knop{transition-delay:.34s}
.js .hero-tekst > .hero-borg{transition-delay:.4s}
.js .hero-tekst > .hero-praat{transition-delay:.46s}

.js .rk{opacity:0;transform:translateY(24px) scale(.985);transition:opacity .7s ease-out,transform .9s var(--uit);transition-delay:.2s}
.js.geladen .rk{opacity:1;transform:none}
.js .gemeten{opacity:0;transition:opacity .6s ease-out;transition-delay:.55s}
.js.geladen .gemeten{opacity:1}
.js .rk .seg{transform:scaleX(0);transition:transform .8s var(--uit)}
.js .rk.bouwt .seg{transform:scaleX(1)}
.js .rk .seg-lek{transition-delay:.55s}
.js .rk .seg-kijk{transition-delay:.72s}
.js .rk .seg-ok{transition-delay:.89s}
.js .rk-tegels li{opacity:0;transform:translateY(8px);transition:opacity .4s ease-out,transform .5s var(--uit)}
.js .rk.bouwt .rk-tegels li{opacity:1;transform:none}
.js .rk.bouwt .rk-tegels li:nth-child(1){transition-delay:1.0s}
.js .rk.bouwt .rk-tegels li:nth-child(2){transition-delay:1.08s}
.js .rk.bouwt .rk-tegels li:nth-child(3){transition-delay:1.16s}
.js .rk.bouwt .rk-tegels li:nth-child(4){transition-delay:1.24s}
.js .rk.bouwt .rk-tegels li:nth-child(5){transition-delay:1.32s}
.js .rk.bouwt .rk-tegels li:nth-child(6){transition-delay:1.40s}

/* C3: de mini-interfaces spelen één keer af zodra hun tegel in beeld komt.
   .bw komt op (klein stukje omhoog), .bx tekent of vult zich van links.
   Beide luisteren naar de .in die de observer op de tegel zet. */
.js .bw{opacity:0;transform:translateY(7px);transition:opacity .45s ease-out,transform .55s var(--uit);transition-delay:var(--d,0s)}
.js .in .bw{opacity:1;transform:none}
.js .bx{transform:scaleX(0);transform-origin:left center;transition:transform .7s var(--uit);transition-delay:var(--d,0s)}
.js .in .bx{transform:scaleX(1)}
/* het vinkje in de conversietegel zet zich pas als de regel er staat */
.js .mini-conv .bol-ok{background-color:transparent;background-size:0;border-color:var(--grey);
  transition:background-color .25s ease,border-color .25s ease,background-size .25s var(--uit);
  transition-delay:calc(var(--d,0s) + .18s),calc(var(--d,0s) + .18s),calc(var(--d,0s) + .28s)}
.js .in .mini-conv .bol-ok{background-color:var(--groen);background-size:84%;border-color:var(--groen)}
/* het lijntje in de advertentietegel tekent grijs en wordt daarna oranje-deep */
.js .ad-streep{background:var(--line);transition:transform .7s var(--uit),background-color .3s ease;transition-delay:var(--d,0s),calc(var(--d,0s) + .5s)}
.js .in .ad-streep{background:var(--orange-deep)}

.js .faq-antw{display:none}
.js .faq-antw.open{display:block}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .rv,.js .hero-tekst > *,.js .rk,.js .gemeten{opacity:1!important;transform:none!important}
  .js .mm-paneel .mm-kaarten > li,.js .mm-paneel .mm-kolommen > li,.js .mm-paneel .mm-uit{transition-delay:0s!important}
  .js .hero h1 .regel > span{transform:none!important}
  .js .rk .seg{transform:scaleX(1)!important}
  .js .rk-tegels li{opacity:1!important;transform:none!important}
  .js .band-spoor{animation:none!important;transform:none!important}
  .js .bw{opacity:1!important;transform:none!important}
  .js .bx{transform:none!important}
  .js .mini-conv .bol-ok{background-color:var(--groen)!important;background-size:84%!important;border-color:var(--groen)!important}
  .js .ad-streep{background:var(--orange-deep)!important}
}

/* ---------- C4. rapportkaart, kleurvariant B ----------
   Rustiger: de balk in navy, gearceerd oranje-deep en grijs, statuslabels in navy en alleen
   "Lekt" nog rood. Zetten met data-kaart op <html>; geen attribuut = variant A. */
html[data-kaart="b"] .seg-lek,
html[data-kaart="b"] .v-lek{background:var(--navy)}
html[data-kaart="b"] .seg-kijk,
html[data-kaart="b"] .v-kijk{background:repeating-linear-gradient(135deg,var(--orange-deep) 0 6px,#E7B5A6 6px 12px)}
html[data-kaart="b"] .v-kijk{background-size:8px 8px}
html[data-kaart="b"] .seg-ok,
html[data-kaart="b"] .v-ok{background:var(--grey)}
html[data-kaart="b"] .rk .s-kijk,
html[data-kaart="b"] .rk .s-ok,
html[data-kaart="b"] .rk .s-uit{color:var(--navy)}

/* ---------- prototype-schakelaars ----------
   Gereedschap, geen onderdeel van het ontwerp. Zonder JS blijft het paneeltje verborgen. */
.schakels[hidden]{display:none}   /* anders wint display:flex van het hidden-attribuut en
                                      staat het paneeltje er zonder JavaScript toch */
.schakels{
  position:fixed;right:16px;bottom:16px;z-index:60;
  display:flex;gap:8px;
  background:rgba(27,35,55,.94);backdrop-filter:blur(8px);
  border-radius:var(--r-pill);padding:7px 10px;
  box-shadow:0 6px 18px rgba(15,22,42,.3);
}
.schakel{display:flex;align-items:center;gap:6px;margin:0;font-size:12px;line-height:1;color:var(--on-navy-soft)}
.schakel + .schakel{padding-left:8px;border-left:1px solid rgba(255,255,255,.16)}
.schakel-naam{font-weight:800}
.schakel-streep{color:rgba(255,255,255,.3)}
.schakel button{
  font:800 12px/1 var(--font);color:var(--on-navy-soft);
  background:none;border:0;border-radius:var(--r-pill);
  padding:5px 8px;cursor:pointer;
}
.schakel button[aria-pressed="true"]{background:#fff;color:var(--navy)}
@media (hover:hover) and (pointer:fine){
  .schakel button:hover{color:#fff}
  .schakel button[aria-pressed="true"]:hover{color:var(--navy)}
}

/* ---------- 1024 ---------- */
@media (max-width:1180px){
  .nav-rij{gap:22px}
  .mm-knop{padding:11px 10px}
  .mm-in{grid-template-columns:minmax(0,1fr) minmax(0,320px);gap:22px}
  .mm-kolommen{gap:22px}
  .mm-kaarten{gap:16px}
  .hero-grid{grid-template-columns:minmax(0,1fr) 440px;gap:40px}
  .rk-body{padding:14px 20px 20px}
  .rk-top{padding:16px 20px 0}
  .rk-getal .bedrag{font-size:38px}
  .rk-vondst{font-size:17px}
  .sectie{padding:94px 0}
  .bouw-grid{gap:48px}
  .bento .tegel:nth-child(1),.bento .tegel:nth-child(6){grid-column:span 6}
  .bento .tegel:nth-child(2),.bento .tegel:nth-child(5){grid-column:span 6}
  .bento .tegel:nth-child(3),.bento .tegel:nth-child(4){grid-column:span 6}
  .op-foto{grid-column:1/6}
  .op-tekst{grid-column:7/13}
  .op-kaart{grid-column:3/12}
  .vragen-grid{gap:40px}
  .tegel{padding:28px}
}

/* ---------- 1024 en kleiner: hero onder elkaar ---------- */
@media (max-width:980px){
  .hero{min-height:0;padding:108px 0 124px;display:block}
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:44px}
  .rk{max-width:560px}
  .vorm-hero .straal{height:116px;bottom:18px}
  /* gestapelde hero: de A staat onder de rapportkaart, zodat de wig in de onderrand valt.
     Vaste px, want een percentage rekent hier met de hoogte van de hele hero. */
  .vorm-hero .beeldmerk{width:min(560px,88vw);right:-20%;bottom:calc(min(560px,88vw) * -0.32)}
  .sectie-kop-breed{flex-direction:column;align-items:flex-start;gap:20px}
  .vlag-fictief{margin-bottom:0}
  .ingang{flex-wrap:wrap;gap:24px;padding:28px 30px}
  .ingang-prijs{margin-left:0}
  .ingang .knop{margin-left:auto}
  .stappen{grid-template-columns:1fr}
  .stap{padding:30px 26px 26px}
  .prijzen{grid-template-columns:1fr}
  .pk-uit{padding:36px 32px 32px}
  .bouw-grid{grid-template-columns:1fr;gap:40px}
  .oplossen{padding-bottom:116px}
  .op-grid{grid-template-columns:1fr;gap:32px}
  .op-foto,.op-tekst,.op-kaart{grid-column:1/-1}
  .op-foto{grid-row:1}
  .op-kaart{grid-row:2;align-self:auto;margin-bottom:0;margin-top:-72px;width:min(100%,520px);margin-left:auto;margin-right:0}
  .op-tekst{grid-row:3;padding-top:0}
  .sectie-kop{margin-bottom:36px}
  .vragen-grid{grid-template-columns:1fr;gap:32px}
  .vragen-grid .sectie-kop{position:static;margin-bottom:0}
}

/* ---------- 900: het megamenu wordt de hamburger (12-MEGAMENU.md) ----------
   Met JavaScript verdwijnt de menubalk en komt de hamburger rechts naast de hoofdknop.
   Zonder JavaScript blijven de vier links staan, want dan doet de hamburger niets: ze breken
   dan af onder het logo in plaats van te verdwijnen. */
@media (max-width:900px){
  .nav-rij{gap:14px}
  .js .mm{display:none}
  .js .burger{display:grid}
  .js .logo{margin-right:auto}
  /* de taalwissel staat hier in het mobiele menu (boven de auditkaart), niet in de balk.
     Zonder JavaScript is er geen mobiel menu, dus dan blijft hij wel in de balk staan. */
  .js .taal-nav{display:none}
  /* Zonder JavaScript krijgt de balk twee regels: logo en hoofdknop boven, de vier links
     eronder. Hij staat dan niet vast maar gewoon in de pagina, want twee regels passen niet
     onder de vaste balk zonder de hero te overlappen. */
  html:not(.js) .nav{position:static}
  html:not(.js) .nav-rij{flex-wrap:wrap;row-gap:6px}
  html:not(.js) .logo{margin-right:auto}
  html:not(.js) .mm{order:3;width:100%;margin-right:0}
  html:not(.js) .mm-menu{flex-wrap:wrap;gap:0 2px}
  html:not(.js) .mm-knop{font-size:15px;padding:8px 8px}
}

/* ---------- 768 ---------- */
@media (max-width:768px){
  .wrap{padding-inline:22px}
  .sectie{padding:76px 0}
  .bento{gap:16px}
  .bento .tegel,.bento .tegel:nth-child(n){grid-column:span 12;min-height:0}
  .tegel p{margin-bottom:20px}
  .faq-knop{font-size:19px;padding:20px 0}
  .faq-antw{padding-right:40px}
  .op-kaart{margin-top:-56px;width:100%}
}

/* ---------- 390 ---------- */
@media (max-width:520px){
  /* de mobiele stap van de typeschaal; de rest schaalt via de clamp mee */
  :root{--t-h3:18px;--t-intro:17px;--t-band:18px;--t-bedrag:33px}
  .wrap{padding-inline:18px}
  .hero{padding:88px 0 100px}
  .vorm-hero .straal{height:84px;bottom:14px}
  .vorm-hero .beeldmerk{width:88vw;right:-20%;bottom:calc(88vw * -0.29)}
  .vorm-slot .beeldmerk{width:88vw;right:-22%;bottom:calc(88vw * -0.31)}
  .hero-sub{margin-bottom:24px}
  .hero-grid{gap:36px}
  .knop{padding:12px 12px 12px 20px}
  .knop .pijl{width:26px;height:26px}
  .nav{padding:10px 0}
  .js .nav{padding:12px 0}
  .mm-mobiel{padding-inline:18px}
  .mm-mob-knop{font-size:19px;padding:15px 0}
  .logo img{height:25px}
  .nav-knop{font-size:14px;padding:9px 9px 9px 16px}
  /* pt: "Iniciar auditoria gratuita" duwt op 390 px de hamburger buiten beeld (gemeten 22-9:
     burger op 377-421). In de balk staat dan de kortere vorm; in de rest van de site de volle. */
  .nav-knop:has(.nav-knop-kort) .nav-knop-vol{display:none}
  .nav-knop-kort{display:inline}
  .nav-knop .pijl{width:24px;height:24px}
  .rk-vondst{font-size:17px}
  .rk-tegels{grid-template-columns:1fr}
  .rk-top{padding:14px 16px 0}
  .rk-body{padding:12px 16px 18px}
  .band{padding:14px 0}
  .band-rij li::after{width:24px;height:6px;margin:0 24px}
  .sectie{padding:58px 0}
  .tegel{padding:24px 22px}
  .sectie-kop{max-width:none}
  .stap{padding:26px 22px 22px}
  .punten li{padding-left:30px}
  .vk-body{padding:20px 20px 22px}
  .vk-kop{font-size:18px}
  .vk-acties{flex-wrap:wrap}
  .pk{padding:28px 24px 26px}
  .pk-uit{padding:28px 24px 26px}
  .ingang{padding:24px 22px;gap:20px}
  .ingang-tekst h3{font-size:23px}
  .ingang .knop{margin-left:0;width:100%;justify-content:space-between}
  .mt-kop,.mt-rij{grid-template-columns:1fr 72px 34px;gap:10px}
  .faq-knop{gap:16px}
  .faq-knop .plus{width:30px;height:30px}
  .faq-antw{padding-right:20px}
  [id]{scroll-margin-top:84px}
  .stap-warp{width:56px;right:14px;top:10px}
  .herken-pillen{gap:8px}
  .hk{padding:8px 15px 8px 12px}
  .slot{padding:76px 0 102px}
  .vorm-slot .straal{height:74px;bottom:16px}
  .vorm-slot .beeldmerk{width:min(420px,88vw);right:-20%;bottom:calc(min(420px,88vw) * -0.31)}
  .schakels{right:10px;bottom:10px;padding:6px 8px}
  .vk-bewijs > div{flex-direction:column;align-items:flex-start;gap:2px}
  .vk-bewijs dd{text-align:left}
  .contactkaart{padding:26px 24px}
  .voet-rij{gap:18px}
  .voet-links{margin-left:0;gap:20px;order:3;width:100%}
  .voet-naam{margin-left:auto}
}

/* ==========================================================================
   De vier andere pagina's (10-PAGINAS.md, 18-9-2026)
   Alles hieronder hergebruikt de componenten van de home: de rapportkaart, de statusvormen,
   de plankaarten, de stapkaarten, de accordeon, de band en de supergraphic. Nieuwe klassen
   zijn er alleen voor wat de home niet kent: het accountoverzicht, de schakelaar
   Bedrijf | Bureau, het formulier en het tekstsjabloon.
   Dit blok staat na de breekpunten van de home; de breekpunten ervan staan onderaan.
   ========================================================================== */

/* ---------- nav: actieve pagina ---------- */
/* Zelfde oranje streepje als bij hover, maar blijvend. */
.menu a.actief::after{transform:scaleX(1)}

/* ---------- accountoverzicht in de hero van Voor agencies ----------
   Dezelfde kaart als de rapportkaart (gradientlijn, vlag, statusvormen). De rijen komen één
   voor één binnen zodra de kaart opbouwt, net als de zes scoretegels op de home.
   Cijfers fictief, zie het label in de kaart. */
.ao .rk-vondst{margin-bottom:18px}
.ao-kop,.ao-rij{display:grid;grid-template-columns:minmax(0,1fr) 72px 92px 118px;gap:10px;align-items:center}
.ao-kop{font-size:12px;color:var(--muted);padding-bottom:9px;border-bottom:1px solid var(--line)}
.ao-kop span:nth-child(2),.ao-kop span:nth-child(3){text-align:right}
.ao-rij{padding:11px 0;border-bottom:1px solid var(--line)}
.ao-lijst li:last-child{border-bottom:0}
.ao-naam{font-size:14px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ao-geld{font-size:14px;font-weight:800;text-align:right;font-variant-numeric:tabular-nums}
/* het bedrag dat niets opleverde staat in oranje-deep: oranje tekst op licht is altijd #C93E1F */
.ao-conv{color:var(--orange-deep)}
.ao-label{display:none}

/* ---------- schakelaar Bedrijf | Bureau ----------
   Twee echte knoppen met aria-pressed, dus met het toetsenbord te bedienen. Zonder JavaScript
   staat de weergave Bedrijf aan en doen de knoppen niets: de kaart toont dan de eindstand.
   Met ?weergave=bureau in de URL start de kaart op Bureau. */
.weergave{
  display:inline-flex;gap:4px;margin:0 0 18px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-pill);
  padding:4px;box-shadow:var(--e1);
}
.weergave button{
  font:800 15px/1 var(--font);color:var(--ink-soft);
  background:none;border:0;border-radius:var(--r-pill);
  padding:11px 22px;cursor:pointer;
}
.weergave button[aria-pressed="true"]{background:var(--navy);color:#fff}
@media (hover:hover) and (pointer:fine){
  .weergave button:hover{color:var(--ink)}
  .weergave button[aria-pressed="true"]:hover{color:#fff}
}
.wv-bureau{display:none}
.wv[data-weergave="bureau"] .wv-bedrijf{display:none}
.wv[data-weergave="bureau"] .wv-bureau{display:block}
/* zachte overgang bij het wisselen; de klas zet het script er per wissel op */
.js .wv-in{animation:wv-in .3s var(--uit)}
@keyframes wv-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* kop en kaart staan op elkaars hoogte gecentreerd, anders valt de linkerkolom leeg */
.wv-grid{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:center}
.wv-kop{margin-bottom:0}
.wv .rk{margin:0}

/* tabel in de weergave Bureau: dezelfde mini-tabel als in de bento, vijf kolommen */
.mt-smal .mt-kop,.mt-smal .mt-rij{grid-template-columns:minmax(0,1fr) 100px}
.mt-smal .mt-rij:last-child{border-bottom:0}
.mt-breed .mt-kop,.mt-breed .mt-rij{grid-template-columns:minmax(0,1fr) 156px 62px 84px 46px}
.mt-camp{font-size:13.5px;line-height:1.3;color:var(--ink-soft);text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mt-klik{font-size:14px;text-align:right;font-variant-numeric:tabular-nums}
.wv-bureau .mini{border-top:0;padding-top:0}
.wv-bureau .mt-rij:last-of-type{border-bottom:0}

/* ---------- Wat het je oplevert ----------
   Dezelfde kaarten als de drie stappen op de home, zonder nummers: dit is geen volgorde. */
.stap > h3:first-child{margin-top:2px}
.stap .vk{margin-top:auto}
/* de voorstelkaart is wit en staat in een navy kaart: tekstkleur terugzetten, anders erft
   de kop van .stap-uit p het licht op navy en valt hij weg op wit */
.stap-uit .vk{color:var(--ink)}
.stap-uit .vk p{color:var(--ink)}
.vk-klein .vk-body{padding:18px 20px 20px}
.vk-klein .vk-top{margin-bottom:12px;gap:8px}
.vk-klein .vk-kop{font-size:16px;line-height:1.35;margin-bottom:14px}
.vk-klein .vk-bewijs{margin-bottom:16px;gap:8px;padding-top:13px}
.vk-klein .vk-bewijs dt,.vk-klein .vk-bewijs dd{font-size:13.5px}
.vk-klein .vk-geld{font-size:16px}
.vk-klein .vk-doen{font-size:13.5px;padding:11px 20px}
.vk-klein .vk-over{font-size:13.5px;padding:9px 18px}

/* ---------- Contact ----------
   Hero klein: dezelfde navy strook met supergraphic, ongeveer 420 px hoog. */
.hero-klein{min-height:0;padding:130px 0 58px;display:block}
.hero-klein .hero-grid{grid-template-columns:minmax(0,760px);gap:0}
.hero-klein .h1{margin-bottom:22px}
.hero-klein .hero-sub{margin-bottom:0}
.hero-klein .straal{height:92px;bottom:18px}
/* de wig ligt in de onderrand van de strook, net als op de home, en raakt geen tekst */
.hero-klein .beeldmerk{right:-4%;width:min(520px,38vw);bottom:calc(min(520px,38vw) * -0.28)}

/* Beide kaarten staan bovenaan uitgelijnd en houden hun natuurlijke hoogte. De persoonskaart
   is compact (klein portret naast de naam), zodat hij ongeveer even hoog is als het formulier. */
/* Kop en raster staan op de gewone kolom (.wrap), net als elke andere sectie op deze pagina.
   Een eigen, smallere en gecentreerde kolom liet deze sectie zichtbaar verspringen ten
   opzichte van de routetegels erboven en de drie kaarten eronder. */
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:48px;align-items:start}
.veld-rij{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.formkaart{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);padding:36px;box-shadow:var(--e1)}

/* Persoonskaart, compact: een klein afgerond portret links van de naam, daaronder de twee
   zinnen en de gegevens als rijtjes met een dunne lijn ertussen. Zo is de kaart ongeveer even
   hoog als het formulier ernaast. */
.persoon{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--e1);padding:28px}
.persoon-kop{display:flex;align-items:center;gap:18px;margin-bottom:20px}
.persoon-foto{
  margin:0;position:relative;flex:none;
  width:96px;height:96px;overflow:hidden;
  border-radius:var(--r-lg);background:var(--offwhite);
}
/* De foto is niet bewerkt: hij staat hier op ware verhouding en het kader snijdt hem bij.
   De maten zijn percentages van het kader, dus de uitsnede blijft dezelfde als het kader op
   mobiel 80 px wordt. Het kader toont bij benadering bron-x 262 tot 702 en y 362 tot 802 van
   933 x 1400: gezicht gecentreerd, lucht boven de kruin, kin binnen het kader. */
/* max-width:none is nodig: de algemene img-regel zet max-width op 100% en dan past de
   uitsnede niet */
.persoon-foto img{position:absolute;width:212%;max-width:none;height:auto;left:-60%;top:-82%}
.persoon-naam{font-weight:800;font-size:var(--t-h3);line-height:1.25;letter-spacing:-.012em;margin:0}
.persoon-functie{font-size:var(--t-klein);line-height:1.4;color:var(--ink-soft);margin:4px 0 0}
.persoon-tekst{color:var(--ink-soft);margin:0}
.persoon-gegevens{margin:22px 0 0;display:grid}
.persoon-gegevens > div{
  display:flex;justify-content:space-between;gap:18px;align-items:baseline;
  padding:14px 0;border-top:1px solid var(--line);
}
.persoon-gegevens dt{margin:0}
.persoon-gegevens dd{text-align:right}
.form{display:grid;gap:22px}
.veld{display:grid;gap:8px;margin:0}
.veld label{font-weight:800;font-size:var(--t-klein);line-height:1.3}
.veld input,.veld textarea{
  font:400 var(--t-tekst)/1.5 var(--font);color:var(--ink);
  width:100%;padding:13px 15px;
  background:var(--offwhite);border:1px solid var(--line);border-radius:var(--r-md);
}
.veld textarea{resize:vertical;min-height:200px}
.veld input:focus-visible,.veld textarea:focus-visible{background:#fff}
/* foutmelding in tekst, in oranje-deep; leeg is hij weg, dus zonder script staat er niets */
.veld-fout{font-weight:800;font-size:14px;line-height:1.35;color:var(--orange-deep)}
.veld-fout:empty{display:none}
.veld-mis input,.veld-mis textarea{border-color:var(--orange-deep);background:#fff}
button.knop{font-family:var(--font);cursor:pointer}
.form-knop{margin:2px 0 0}
.form-melding{margin:0;font-size:var(--t-klein);line-height:1.55;color:var(--ink-soft)}
.js .form-melding{display:none}
.js .form-melding.open{display:block}

/* slot klein: dezelfde vorm als het slot op de home, op de maat van een afsluiter */
.slot-klein{padding:80px 0 98px}
.slot-klein .slot-kop{font-size:var(--t-h2);line-height:var(--t-h2-lh);margin-bottom:26px}
.slot-klein .straal{height:84px;bottom:18px}
.slot-klein .beeldmerk{right:-10%;width:min(560px,42vw);bottom:calc(min(560px,42vw) * -0.30)}

/* ---------- Privacy en Voorwaarden ----------
   Rustig tekstsjabloon: kleine navy kop, één leeskolom van maximaal 720 px, inhoudsopgave
   rechts die meeloopt. Geen slot-CTA; de footer sluit de pagina af. */
.paginakop{background:var(--navy);color:#fff;position:relative;overflow:hidden;padding:134px 0 58px}
.paginakop-binnen{position:relative;z-index:1;max-width:820px}
.paginakop .vlag{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.22);color:var(--on-navy)}
.h1-tekst{font-size:clamp(28px,3.4vw,44px);line-height:var(--t-h2-lh);margin:18px 0 0}
.vorm-kop .straal{left:-6%;right:0;bottom:14px;height:84px}
.vorm-kop .beeldmerk{right:-8%;width:min(520px,40vw);bottom:calc(min(520px,40vw) * -0.30)}

.tekstpagina{padding:68px 0 94px}
.tekst-grid{display:grid;grid-template-columns:minmax(0,720px) 1fr;gap:64px;align-items:start}
.tekst-kolom{grid-column:1;grid-row:1}
.iho{grid-column:2;grid-row:1;position:sticky;top:112px}
.iho-kop{font-weight:800;font-size:13px;line-height:1.3;color:var(--ink-soft);margin:0 0 14px}
.iho-lijst{display:grid;gap:11px;font-size:var(--t-klein);line-height:1.4}
.iho-lijst a{color:var(--ink-soft);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:2px}
.iho-lijst a:hover{color:var(--ink);border-bottom-color:var(--orange)}
.tekst-lead{font-size:var(--t-intro);line-height:1.55;margin:0;max-width:62ch}
.tekst-kolom h2{
  font-weight:800;font-size:22px;line-height:1.28;letter-spacing:-.014em;
  margin:34px 0 12px;padding-top:28px;border-top:1px solid var(--line);
}
.tekst-kolom p{color:var(--ink-soft);max-width:68ch}
.tekst-kolom p:last-child{margin-bottom:0}
.tekst-kolom a{color:var(--ink);text-decoration:none;border-bottom:2px solid var(--orange);padding-bottom:1px}
.tekst-kolom a:hover{border-bottom-color:var(--navy)}

/* ---------- beweging op de nieuwe pagina's ---------- */
/* de zes rijen van het accountoverzicht komen één voor één binnen, zoals de scoretegels */
.js .ao-rij{opacity:0;transform:translateY(8px);transition:opacity .4s ease-out,transform .5s var(--uit)}
.js .rk.bouwt .ao-rij{opacity:1;transform:none}
.js .rk.bouwt .ao-rij:nth-child(1){transition-delay:.45s}
.js .rk.bouwt .ao-rij:nth-child(2){transition-delay:.57s}
.js .rk.bouwt .ao-rij:nth-child(3){transition-delay:.69s}
.js .rk.bouwt .ao-rij:nth-child(4){transition-delay:.81s}
.js .rk.bouwt .ao-rij:nth-child(5){transition-delay:.93s}
.js .rk.bouwt .ao-rij:nth-child(6){transition-delay:1.05s}

@media (prefers-reduced-motion:reduce){
  .js .ao-rij{opacity:1!important;transform:none!important}
  .js .wv-in{animation:none!important}
}

/* ---------- 1180 ---------- */
@media (max-width:1180px){
  .wv-grid{gap:40px;grid-template-columns:4fr 8fr}
  .tekst-grid{gap:44px}
  .contact-grid{gap:36px;grid-template-columns:minmax(0,1fr) 360px}
  .formkaart{padding:30px}
  .ao-kop,.ao-rij{grid-template-columns:minmax(0,1fr) 64px 82px 112px;gap:8px}
  .mt-breed .mt-kop,.mt-breed .mt-rij{grid-template-columns:minmax(0,1fr) 132px 56px 78px 42px}
  .hero-klein{padding:138px 0 62px}
}

/* ---------- 980 ---------- */
@media (max-width:980px){
  .wv-grid{grid-template-columns:1fr;gap:32px}
  .wv .rk{max-width:none}
  .contact-grid,.contact-kop{max-width:560px;margin-inline:auto}
  .contact-grid{grid-template-columns:1fr;gap:24px}
  .persoon{order:1}
  .formkaart{order:2}
  .persoon{padding:24px 22px}
  .persoon-foto{width:80px;height:80px}
  .persoon-kop{gap:14px}
  .hero-klein{padding:106px 0 58px}
  .hero-klein .beeldmerk{right:-10%;width:min(430px,52vw);bottom:calc(min(430px,52vw) * -0.28)}
  .veld-rij{grid-template-columns:1fr 1fr}
  .slot-klein{padding:70px 0 84px}
  .slot-klein .beeldmerk{right:-16%;width:min(430px,62vw);bottom:calc(min(430px,62vw) * -0.30)}
  .paginakop{padding:106px 0 50px}
  /* verder naar rechts: op ongeveer 560 px reikte de tip van de wig tot de H1 */
  .vorm-kop .beeldmerk{right:-24%;width:min(430px,58vw);bottom:calc(min(430px,58vw) * -0.30)}
  .tekst-grid{grid-template-columns:1fr;gap:28px}
  .tekst-kolom{grid-column:1;grid-row:2}
  .iho{grid-column:1;grid-row:1;position:static;background:var(--offwhite);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 24px}
  .tekstpagina{padding:50px 0 76px}
}

/* ---------- 768 ---------- */
@media (max-width:768px){
  .formkaart{padding:26px 24px}
  .tekst-kolom h2{font-size:20px;margin-top:30px;padding-top:26px}
}

/* ---------- 390 ---------- */
@media (max-width:520px){
  /* de wig moet onder de subkop blijven: meer ruimte onder de tekst en een kleinere,
     lager hangende supergraphic (gemeten met controle/hulp/meet-vorm.html) */
  .hero-klein{padding:88px 0 96px}
  .hero-klein .straal{height:70px;bottom:14px}
  .hero-klein .beeldmerk{right:-16%;width:min(300px,72vw);bottom:calc(min(300px,72vw) * -0.28)}
  /* accountoverzicht in twee regels per account: naam en status boven, de bedragen eronder
     met hun eigen label, zodat er niets wegvalt */
  .ao-kop{display:none}
  .ao-rij{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"naam status" "uit conv";gap:4px 12px;padding:13px 0}
  .ao-naam{grid-area:naam;font-weight:800;font-size:15px}
  .ao-rij .status{grid-area:status}
  .ao-geld:not(.ao-conv){grid-area:uit;text-align:left}
  .ao-conv{grid-area:conv}
  .ao-label{display:inline;font-weight:400;font-size:12.5px;color:var(--muted);margin-right:6px}
  .weergave{width:100%}
  .weergave button{flex:1;padding:11px 12px;font-size:14px}
  /* de Bureau-tabel is op 390 px te breed voor vijf kolommen: campagne en klikken eronder */
  .mt-breed .mt-kop{grid-template-columns:minmax(0,1fr) 72px 40px}
  .mt-breed .mt-kop span:nth-child(2),.mt-breed .mt-kop span:nth-child(3){display:none}
  .mt-breed .mt-rij{grid-template-columns:minmax(0,1fr) 72px 40px;grid-template-areas:"term geld nul" "camp klik klik";gap:2px 10px}
  .mt-breed .mt-term{grid-area:term}
  .mt-breed .mt-geld{grid-area:geld}
  .mt-breed .mt-nul{grid-area:nul}
  .mt-breed .mt-camp{grid-area:camp;text-align:left;font-size:12.5px}
  .mt-breed .mt-klik{grid-area:klik;font-size:12.5px;color:var(--ink-soft)}
  .slot-klein{padding:58px 0 76px}
  .slot-klein .straal{height:64px;bottom:14px}
  .slot-klein .beeldmerk{right:-20%;width:min(400px,86vw);bottom:calc(min(400px,86vw) * -0.30)}
  /* zelfde reden als bij hero-klein: de wig kruiste de H1 */
  .paginakop{padding:86px 0 86px}
  .h1-tekst{font-size:30px}
  .vorm-kop .straal{height:64px;bottom:12px}
  .vorm-kop .beeldmerk{right:-18%;width:min(300px,70vw);bottom:calc(min(300px,70vw) * -0.30)}
  .tekstpagina{padding:40px 0 62px}
  .tekst-kolom h2{font-size:19px;margin-top:26px;padding-top:22px}
  .iho{padding:18px 20px}
  .formkaart{padding:24px 20px}
  .form-knop .knop{width:100%;justify-content:space-between}
}

/* ==========================================================================
   Prijzen en Contact (13-PRIJZEN-EN-CONTACT.md, 21-9-2026)
   De pagina /prijzen/ en de aanvullingen op /contact/. Alles hieronder hergebruikt de
   componenten van de home: de plankaarten, de stapkaarten, de voorstelkaart, de accordeon,
   de statusvormen en de supergraphic. Nieuwe klassen zijn er alleen voor wat de home niet
   kent: de rekenhulp, de vergelijkingstabel, de navy strook met vier punten, de drie routes,
   de onderwerpkeuze en de Haarlem-strook. De breekpunten staan onderaan dit blok.
   ========================================================================== */

/* ---------- hulpklassen ---------- */
/* Tekst die alleen voor de schermlezer is: het vinkje en het streepje in de tabel zijn vorm,
   en vorm alleen is geen informatie. */
.alleen-lezer{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}
.js .nojs-alleen{display:none}
html:not(.js) .js-alleen{display:none}

/* ---------- tekstlink onder de prijssectie (home en Voor agencies) ---------- */
.prijs-meer{margin:16px 0 0}

/* ---------- A1. hero van /prijzen/ ----------
   Dezelfde kleine hero als Contact, met de hoofdknop en de geruststellingsregel erbij; dus
   meer ruimte onder de tekst, anders loopt de wig door de knop. */
.hero-prijzen{padding-bottom:92px}
.hero-prijzen .hero-sub{margin-bottom:28px}
.hero-prijzen .hero-borg{margin-bottom:0}

/* ---------- A2. plankaarten met een knop erin ----------
   Op de home dragen de plankaarten geen knop (één knop per sectie, die van de ingang). Hier
   is de plankaart het eindpunt van de pagina-trap, dus staat de knop erin. margin-top:auto
   houdt de twee knoppen op één lijn, ook als de ene kaart een regel langer is. */
.pk-knop{margin:0;padding-top:28px;margin-top:auto}
.pk-knop .knop{width:100%}
.pk-onder{margin:14px 0 0;font-size:var(--t-klein);line-height:1.5;color:var(--ink-soft)}
.pk-uit .pk-onder{color:var(--on-navy-soft)}

/* ---------- A3. de drie kaarten "De audit vindt het" ----------
   Dezelfde stapkaarten als op de home, zonder nummers, de derde navy. In alle drie staat
   hetzelfde beeld: de voorstelkaart (.vk .vk-klein), in drie momenten van hetzelfde voorstel.
   De beelden zijn tekeningen van een interface; de bedragen komen letterlijk uit
   paginas/home.html. De drie kaartjes staan met margin-top:auto onderaan (.stap .vk), dus hun
   onderranden liggen op één lijn. */
/* De drie kaartjes zijn even hoog: ze vullen de ruimte onder de tekst (flex:1), en de laatste
   regel van elk kaartje staat onderaan (margin-top:auto op het laatste kind). Zo beginnen en
   eindigen de drie beelden op dezelfde hoogte en valt er nergens een gat tussen de tekst en
   het beeld. margin-top expliciet op 0: een auto-marge slokt in flexbox de vrije ruimte op
   voordat flex-grow eraan toekomt. */
.stappen-voorstel .vk{margin-top:0;flex:1;display:flex;flex-direction:column}
.stappen-voorstel .vk-body{flex:1;display:flex;flex-direction:column}
.stappen-voorstel .vk-body > :last-child{margin-top:auto}

/* kaart 1: het bewijs als tabel met de drie soorten zoekopdracht */
/* .stap .mini zet gap:14px; die telt hier niet, de rijen hebben hun eigen lijn en padding.
   Twee klassen diep, anders wint .stap .mini. */
.stap .mini.vk-termen{gap:0}
.vk-termen{border-top:0;padding-top:0;margin-bottom:2px}
.vk-termen .mt-kop,.vk-termen .mt-rij{grid-template-columns:minmax(0,1fr) 64px 28px;gap:8px}
.vk-termen .mt-kop{font-size:11px;padding-bottom:7px}
.vk-termen .mt-rij{padding:7px 0}
.vk-termen .mt-rij:last-of-type{border-bottom:0}
.vk-termen .mt-term{font-size:13px}
.vk-termen .mt-geld,.vk-termen .mt-nul{font-size:13px}

/* kaart 2 en 3: dezelfde kaart met het bewijs uit de voorstelkaart van de home en een voet
   achter een scheidingslijn */
.vk-klein .vk-bewijs{margin-bottom:24px}
.vk-voet{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  border-top:1px solid var(--line);padding-top:18px;
}
/* de knop Doorvoeren staat licht ingedrukt; het vinkje komt erbij zodra de kaart in beeld is
   (.bw luistert naar de .in die de observer op de kaart zet) */
.mk-doen{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--navy);color:#fff;font-weight:800;font-size:var(--t-klein);
  padding:12px 22px;border-radius:var(--r-pill);
  transform:translateY(1px);box-shadow:inset 0 2px 5px rgba(0,0,0,.28);
}
.mk-vink{
  width:18px;height:18px;border-radius:50%;flex:none;
  background:var(--orange) var(--vink) no-repeat center/72%;
}
/* kaart 3: dezelfde kaart in navy-2 met een haarlijn, want hij staat in de navy stapkaart */
.stap-uit .vk-donker{background:var(--navy-2);border:1px solid rgba(255,255,255,.14);box-shadow:none}
.stap-uit .vk-donker,.stap-uit .vk-donker p{color:#fff}
.stap-uit .vk-donker .vk-soort{color:var(--orange)}
.stap-uit .vk-donker .vk-bewijs{border-top-color:rgba(255,255,255,.16)}
.stap-uit .vk-donker .vk-bewijs dt{color:var(--on-navy-soft)}
.stap-uit .vk-donker .vk-voet{border-top-color:rgba(255,255,255,.16)}
.vk-donker .vlag{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.22);color:var(--on-navy)}
.vk-status{display:flex;align-items:center;gap:9px;font-weight:800;font-size:var(--t-klein);margin-right:auto}
.vk-terug{
  border:2px solid rgba(255,255,255,.42);border-radius:var(--r-pill);
  padding:9px 18px;font-weight:800;font-size:13px;line-height:1.2;
}

/* ---------- A4. rekenhulp ----------
   Puur rekenwerk met het getal van de bezoeker zelf: prijs gedeeld door budget. Geen belofte
   over besparing en geen bedrag dat AdWarp zou vinden.
   Zonder JavaScript staat de uitkomst voor € 3.000 er stil en zijn de keuze, de schuif en het
   getalveld weg (.js-alleen); de kleine regel noemt dan het bedrag waarmee gerekend is. */
.rh-grid{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:center}
.rh-kop .h2{margin-bottom:18px}
.rh{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--e1);padding:32px}
.rh-keuze{border:0;margin:0 0 24px;padding:0;min-width:0}
.rh-legend{padding:0;font-weight:800;font-size:var(--t-klein);line-height:1.3;margin-bottom:12px}
.rh-pillen{display:flex;flex-wrap:wrap;gap:10px}
.rh-pil{
  display:inline-flex;align-items:center;gap:9px;
  padding:11px 18px;border:2px solid var(--line);border-radius:var(--r-pill);
  background:#fff;cursor:pointer;font-size:var(--t-klein);line-height:1.2;
  transition:border-color .2s ease,background-color .2s ease;
}
.rh-pil input,.ow-in{accent-color:var(--orange-deep);margin:0;flex:none;width:16px;height:16px;cursor:pointer}
.rh-pil-prijs{font-weight:800}
.rh-pil:has(input:checked){border-color:var(--navy);background:var(--offwhite)}
@media (hover:hover) and (pointer:fine){
  .rh-pil:hover,.ow:hover{border-color:var(--muted)}
}
.rh-vraag{font-weight:800;font-size:var(--t-tekst);line-height:1.45;margin:0 0 14px}
.rh-invoer{
  display:inline-flex;align-items:center;margin:0 0 20px;padding-left:14px;
  background:var(--offwhite);border:1px solid var(--line);border-radius:var(--r-md);
}
.rh-invoer:focus-within{outline:3px solid var(--orange);outline-offset:3px;background:#fff}
.rh-euro{font-weight:800;color:var(--ink-soft)}
.rh-getal{
  font:800 18px/1.2 var(--font);color:var(--ink);font-variant-numeric:tabular-nums;
  width:136px;padding:13px 12px 13px 8px;border:0;background:none;
}
.rh-getal:focus-visible{outline:none}
.rh-schuif{display:block;width:100%;margin:0;accent-color:var(--orange-deep)}
.rh-grenzen{display:flex;justify-content:space-between;font-size:var(--t-mini);color:var(--ink-soft);margin:8px 0 0}
.rh-uitkomst{margin:26px 0 16px;font-size:var(--t-tekst);line-height:1.4;color:var(--ink-soft)}
.rh-groot{
  display:block;font-weight:800;font-size:var(--t-prijs);line-height:1.1;
  letter-spacing:-.028em;color:var(--ink);font-variant-numeric:tabular-nums;margin-bottom:6px;
}
/* één balk van het hele budget met het plakje van de prijs erin; minimaal 4 px, anders is het
   plakje bij een groot budget niet meer te zien */
.rh-balk{
  height:22px;background:var(--offwhite);border:1px solid var(--line);
  border-radius:var(--r-sm);overflow:hidden;margin:0 0 16px;
}
.rh-plak{display:block;height:100%;min-width:4px;background:var(--gradient);border-radius:3px}
.rh-lek{margin:0 0 10px;color:var(--ink-soft);line-height:1.55}
.rh-klein{margin:0 0 24px;color:var(--ink-soft);font-size:var(--t-mini);line-height:1.5}
.rh-knop{margin:0}

/* ---------- A5. vergelijkingstabel ----------
   De houder schuift, niet de pagina. border-collapse:separate, want een samengevouwen rand
   verdwijnt onder een sticky cel; de randen staan daarom per cel. */
.tabel-houder{
  overflow-x:auto;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--e1);
  /* contain:paint erbij: zonder dit telt Chrome de breedte van de tabel mee in de
     scrollbreedte van de pagina, ook al schuift de tabel netjes binnen deze houder. Op 390 px
     schoof de pagina daardoor 81 px mee naar rechts. Gemeten 21-9. */
  contain:paint;
}
.tabel-houder:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.vergelijk{width:100%;border-collapse:separate;border-spacing:0;text-align:left}
.vergelijk th,.vergelijk td{padding:16px 20px;border-bottom:1px solid var(--line);vertical-align:middle}
.vergelijk tbody tr:last-child th,.vergelijk tbody tr:last-child td{border-bottom:0}
.vergelijk thead th,.vergelijk .vg-hoek{background:var(--offwhite);border-bottom:1px solid var(--line)}
.vergelijk th[scope="col"]{width:210px}
.vg-naam{display:block;font-weight:800;font-size:var(--t-tekst);line-height:1.3}
.vg-prijs{display:block;font-weight:400;font-size:var(--t-klein);line-height:1.4;color:var(--ink-soft);margin-top:3px}
.vergelijk tbody th{font-weight:400;font-size:var(--t-tekst);line-height:1.4;color:var(--ink)}
.vg-tekst{font-size:var(--t-klein);line-height:1.4}
/* de kolom Ondernemers krijgt een rustige tint, zodat de uitgelichte plankaart en de tabel
   hetzelfde zeggen */
.vergelijk tbody td:nth-child(3){background:#FCFCFD}
.tv{display:inline-block;vertical-align:middle}
.tv-ja{width:22px;height:22px;border-radius:50%;background:var(--orange-deep) var(--vink) no-repeat center/62%}
.tv-nee{width:14px;height:2px;border-radius:2px;background:var(--grey)}

/* ---------- A6. wat vaststaat: navy strook met vier punten ---------- */
/* section.vast en niet .vast: de nav krijgt bij scrollen ook de klasse .vast (zie 1. nav) en
   werd door deze regel wit op wit. */
section.vast{background:var(--navy);color:#fff;padding:82px 0}
.vast-kop{margin:0 0 42px;max-width:640px}
.vast-rij{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.vast-item{display:grid;gap:14px;align-content:start;padding-top:22px;border-top:2px solid rgba(255,255,255,.20)}
.vast-icoon{display:block;width:30px;height:30px;color:var(--orange)}
.vast-icoon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.vast-item p{margin:0;color:var(--on-navy-soft);font-size:var(--t-tekst);line-height:1.55}

/* ---------- A7. regel onder de accordeon ---------- */
.faq-onder{margin:26px 0 0;color:var(--ink-soft)}

/* ---------- B1. drie routes op /contact/ ---------- */
.sectie-routes{padding:72px 0}
.routes{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.route{
  display:flex;flex-direction:column;gap:10px;height:100%;
  background:var(--offwhite);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:28px;text-decoration:none;color:inherit;box-shadow:var(--e1);
  transition:transform .25s var(--uit),box-shadow .25s var(--uit);
}
@media (hover:hover) and (pointer:fine){
  .route:hover{transform:translateY(-3px);box-shadow:var(--e2)}
  .route:hover .mm-bubbel{transform:translateX(3px)}
}
.route-icoon{display:block;width:34px;height:34px;color:var(--orange-deep);margin-bottom:6px}
.route-icoon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.route-kop{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  font-weight:800;font-size:var(--t-h3);line-height:1.25;letter-spacing:-.012em;
}
.route-waarde{font-weight:800;font-size:var(--t-tekst);line-height:1.4;overflow-wrap:anywhere}
.route-tekst{font-size:var(--t-tekst);line-height:1.5;color:var(--ink-soft);margin-top:auto}

/* ---------- B2. onderwerpkeuze boven het formulier ----------
   Vier echte radioknoppen, dus toetsenbord en schermlezer werken zonder extra werk. De keuze
   komt als onderwerp in de mailto; zonder JavaScript gaat het bericht zoals eerder zonder
   onderwerp weg en staat de keuze in de tekst van de mail. */
.onderwerp{border:0;margin:0;padding:0;min-width:0}
.onderwerp-kop{padding:0;font-weight:800;font-size:var(--t-klein);line-height:1.3;margin-bottom:12px}
/* de vier pillen passen op de volle kolom net op één rij; gap en padding zijn daarop
   afgestemd. Passen ze niet, dan breken ze gewoon af naar een tweede rij. */
.onderwerp-pillen{display:flex;flex-wrap:wrap;gap:7px}
.ow{
  display:inline-flex;align-items:center;gap:9px;
  padding:10px 14px;border:2px solid var(--line);border-radius:var(--r-pill);
  background:#fff;cursor:pointer;font-size:var(--t-klein);line-height:1.3;
  transition:border-color .2s ease,background-color .2s ease;
}
.ow:has(.ow-in:checked){border-color:var(--navy);background:var(--offwhite)}
.form .form-noot{margin:0}

/* ---------- B3. de twee nieuwe mini-interfaces op /contact/ ---------- */
/* de twee regels staan uit elkaar over de hoogte van de kaart, zodat er geen gat boven of
   onder het beeld valt */
.stap .mini-staffel{justify-content:space-between}
.mini-staffel{gap:0}
.ms-rij{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:14px 0;border-bottom:1px solid var(--line);font-size:var(--t-tekst);
}
.ms-rij:last-child{border-bottom:0}
.ms-naam{color:var(--ink-soft)}
.ms-geld{font-weight:800;text-align:right}
.ms-meer .ms-geld{color:var(--orange-deep)}
.stap .stap-link{margin:20px 0 0}
.mini-bellen{gap:10px}
.stap-uit .mb-nummer{margin:0;font-weight:800;font-size:24px;line-height:1.2;letter-spacing:-.02em;color:#fff}
.stap-uit .mb-mail{margin:0;font-size:var(--t-tekst);color:#fff}
.mini-bellen a{text-decoration:none;border-bottom:2px solid var(--orange);padding-bottom:1px}
.mini-bellen a:hover{border-bottom-color:#fff}

/* ---------- B5. Haarlem ---------- */
.sectie-haarlem{padding:60px 0}
.haarlem{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:26px;
  border-top:2px solid var(--navy);padding-top:28px;
}
.haarlem-adres{margin:0 0 10px;font-weight:800;font-size:var(--t-h3);line-height:1.35}
.haarlem-kaart{margin:0}
.haarlem-rechts{margin:0;color:var(--ink-soft);font-size:var(--t-intro);line-height:1.5;max-width:34ch;text-align:right}

/* ---------- 1180 ---------- */
@media (max-width:1180px){
  .rh-grid{gap:40px;grid-template-columns:1fr 1fr}
  .vast-rij{gap:22px}
  .vergelijk th[scope="col"]{width:160px}
  .routes{gap:18px}
  .route{padding:24px}
}

/* ---------- 980 ---------- */
@media (max-width:980px){
  .rh-grid{grid-template-columns:1fr;gap:30px}
  .rh-kop .sectie-intro{max-width:none}
  .routes{grid-template-columns:1fr;gap:16px}
  .route{flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 18px;padding:22px 24px}
  .route-icoon{margin-bottom:0}
  .route-kop{flex:1;min-width:0}
  .route-waarde{width:100%;order:3}
  .route-tekst{width:100%;order:4;margin-top:0}
  section.vast{padding:66px 0}
  .vast-rij{grid-template-columns:1fr 1fr;gap:26px 24px}
  .haarlem{gap:20px}
  .haarlem-rechts{text-align:left;max-width:none}
  .hero-prijzen{padding-bottom:86px}
}

/* ---------- 768 ---------- */
@media (max-width:768px){
  .rh{padding:28px 24px}
  /* de tabel schuift zelf; de eerste kolom blijft staan, anders weet je niet meer welke regel
     je leest. Samengevouwen randen verdwijnen onder een sticky cel, vandaar de schaduwlijn. */
  .tabel-houder{border-radius:var(--r-lg)}
  .vergelijk{min-width:560px}
  .vergelijk th[scope="row"],.vergelijk .vg-hoek{
    position:sticky;left:0;z-index:1;background:#fff;box-shadow:1px 0 0 var(--line);
  }
  .vergelijk .vg-hoek{background:var(--offwhite)}
  .vergelijk th[scope="col"]{width:132px}
  .vergelijk th,.vergelijk td{padding:14px 16px}
}

/* ---------- 390 ---------- */
@media (max-width:520px){
  .hero-prijzen{padding-bottom:84px}
  .rh{padding:24px 20px}
  .rh-getal{width:112px;font-size:17px}
  .rh-pil{padding:10px 15px}
  section.vast{padding:52px 0}
  .vast-kop{margin-bottom:30px}
  .vast-rij{gap:20px 14px}
  .vast-item{padding-top:16px;gap:10px}
  .vast-icoon{width:26px;height:26px}
  .vast-item p{font-size:14.5px;line-height:1.45}
  .vergelijk{min-width:524px}
  .vergelijk th[scope="row"]{width:196px}
  .vergelijk th[scope="col"]{width:108px}
  .vergelijk th,.vergelijk td{padding:12px 13px}
  .vergelijk tbody th{font-size:14px}
  .vg-naam{font-size:14.5px}
  .vg-prijs{font-size:12.5px}
  .vg-tekst{font-size:13px}
  .sectie-routes{padding:48px 0}
  .route{padding:20px 20px}
  .route-icoon{width:30px;height:30px}
  .sectie-haarlem{padding:44px 0}
  .haarlem{padding-top:24px}
  .stap-uit .mb-nummer{font-size:21px}
}

/* ---------- pt-PT: twee kolommen die alleen in het Portugees te smal zijn (14-TALEN.md) ------
   Dit is de enige taalgebonden CSS op de hele site. Reden: "Com perdas" is de vastgelegde
   vertaling van "Lekt" en dat zijn twee woorden. De pil heeft 131 px nodig; de statuskolom van
   het accountoverzicht geeft er 118 (112 onder 1180 px), dus brak "perdas" naar een tweede
   regel en werden de rijen ongelijk hoog. Kleiner zetten mag niet: bij de statuslabels geldt de
   contrasteis 3:1 alleen boven 18,66 px vet, zie LEESMIJ.md onder "Typeschaal".
   De ruimte komt uit de kolom "sem conversão", die zijn getal (5.650 €, 58 px) ruim overhoudt.
   Onder 520 px staat de rij in twee regels en is er niets aan de hand; die opzet wordt hier
   hersteld, want :lang(pt) weegt zwaarder dan de losse klasse verderop in dit bestand.
   :lang(pt) raakt <html lang="pt-PT">; de Nederlandse en Engelse pagina's blijven ongemoeid. */
:lang(pt) .ao-kop,:lang(pt) .ao-rij{grid-template-columns:minmax(0,1fr) 72px 76px 134px}
@media (max-width:1180px){
  :lang(pt) .ao-kop,:lang(pt) .ao-rij{grid-template-columns:minmax(0,1fr) 64px 70px 134px}
}
@media (max-width:520px){
  :lang(pt) .ao-rij{grid-template-columns:minmax(0,1fr) auto}
}
/* dezelfde kolom in de verkleinde versie in het megamenu: daar is de pil 12,5 px en heeft
   hij 89 px nodig, dus 92 px. De naamkolom houdt ruim over (61 px nodig, 184 px over). */
:lang(pt) .mr-ao .mr-rij{grid-template-columns:minmax(0,1fr) 54px 92px}