@font-face{font-family:'Satoshi';src:url('/public/assets/fonts/satoshi-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Satoshi';src:url('/public/assets/fonts/satoshi-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Satoshi';src:url('/public/assets/fonts/satoshi-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Satoshi';src:url('/public/assets/fonts/satoshi-900.woff2') format('woff2');font-weight:900;font-display:swap}
/* DISPLAY-LETTER · Satoshi 900, de hoekige moderne. Op 2026-09-02 stond hier kort Zodiak, een
   schreefletter, als invulling van punt 02 van de 10K-standaard. Nick 2026-09-03: "dit lettertype
   klopt niet, het was de hoekige moderne." Teruggezet naar de stand van ervoor. Punt 02 van die
   standaard (een gepaard display plus body) staat daarmee weer open, en dat is een bewuste keuze
   van de eigenaar en geen vergeten regel. */
/* Zelfde tokens als index.html. Beide namen staan er, want de homepage gebruikt --line en deze
   pagina's gebruikten --lijn. Twee namen voor een kleur is precies hoe twee ontwerpsystemen
   uit elkaar lopen; hier zijn ze aan elkaar gelijk gezet. */
:root{--bg:#faf7f2;--ink:#1d1a16;--sub:#6d675d;--line:#e6e0d6;--lijn:#e6e0d6;--oranje:#f56b20;--diep:#0d1420;
 /* --oranje-tekst is de enige oranje die als TEKST op creme mag staan. De merk-oranje #f56b20
    haalt daar 2,80:1 en zakt dus door WCAG AA (4,5:1 nodig). Deze donkere variant haalt 4,92:1
    en leest nog steeds als dezelfde kleur. Gemeten 2026-09-02 met visual_qa.py. Randen, lijnen
    en vlakken houden --oranje: die dragen geen tekst. */
 --oranje-tekst:#b8490f}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:'Satoshi',system-ui,sans-serif;line-height:1.62;
 -webkit-font-smoothing:antialiased;overflow-x:clip}
/* overflow-x:clip is nodig omdat het beeld in .duo met een negatieve marge uit de kolom breekt.
   Zonder dit wordt het document breder dan het scherm, en dan stoppen de volle-breedte-secties
   (cta-blok, voet) bij de schermrand terwijl de rest doorloopt. Dat gaf een witte strook rechts. */
.wrap{max-width:1240px;margin:0 auto;padding:0 clamp(24px,4vw,64px)}

/* REDACTIONELE INDELING 2026-09-18. Nick: "slecht gebruik van de breedte, komt over als een
   worddocument". Gemeten op how-it-works: 1240px breed, maar een enkele kolom van 27 alinea's
   over 6.500 pixels hoogte, regels tot 85 tekens. Dat is een A4 in een browser.
   Nu: de kop staat links en blijft staan zolang zijn eigen sectie loopt, de tekst leest rechts
   op 68 tekens, en blokken die een eigen ding zijn (prijzen, werk, productbeeld, meting) nemen
   de volle breedte. De breedte doet dus iets, in plaats van leeg te staan. */
section > .wrap{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);
  gap:clamp(26px,4vw,80px);align-items:start}
section > .wrap > *{grid-column:2;min-width:0}
section > .wrap > h2{grid-column:1;position:sticky;top:96px;margin:0;align-self:start;font-size:clamp(22px,2vw,30px);letter-spacing:-.01em}
section > .wrap:not(:has(> h2)){display:block}
section > .wrap > .prijsblok,section > .wrap > .werk,section > .wrap > .productbeeld,
section > .wrap > .zelftest,section > .wrap > .stappen,section > .wrap > .duo,
section > .wrap > .lijst,section > .wrap > .meting{grid-column:1 / -1}
section > .wrap > .klachten{grid-column:1 / -1}
.productbeeld{margin:0;max-width:820px}.productbeeld img{display:block;width:100%;height:auto;border-radius:6px;border:1px solid var(--line)}
/* Nick 2026-09-21: het klachtenonderzoek niet als losse route, maar als grafiek onder de beloftes die eruit volgen */
.klachten{margin:clamp(30px,3.5vw,46px) 0 0;max-width:68ch}
.klachten figcaption{margin-bottom:14px}
.staaf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr) 3ch;align-items:center;gap:10px;font-size:14px;margin:6px 0}
.staaf i{display:block;height:10px;background:var(--oranje);width:calc(var(--w) * 1%)}
.staaf b{font-weight:500;text-align:right}
@media(max-width:600px){.staaf{grid-template-columns:1fr 3ch}.staaf span{grid-column:1 / -1}}
section p{max-width:68ch}
@media(max-width:1000px){
  section > .wrap{display:block}
  section > .wrap > h2{position:static}
}


header{position:sticky;top:0;z-index:10;background:rgba(250,247,242,.94);backdrop-filter:blur(8px);
 border-bottom:1px solid var(--line)}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:14px;padding-bottom:14px}
/* Het WOORDMERK blijft Satoshi. Nick 2026-09-02: het lettertype in de kop was fout. Terecht:
   een woordmerk is een vaste identiteit, geen typografische variabele die meebeweegt zodra er
   een nieuwe display-letter komt. Die regel blijft staan, ook nu de koppen weer Satoshi zijn. */
.brand{font-family:'Satoshi',system-ui,sans-serif;font-weight:900;text-transform:uppercase;font-size:22px;letter-spacing:.14em;color:var(--ink);
 text-decoration:none;line-height:1;flex:none}
.brand .y{color:var(--oranje)}
.nav-menu{display:flex;align-items:center;gap:22px;font-weight:500;font-size:14.5px}
.nav-menu a{color:var(--ink);text-decoration:none;opacity:.78;transition:opacity .2s}
.nav-menu a:hover,.nav-menu a[aria-current="page"]{opacity:1}
.nav-menu a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--oranje)}
/* de knop is een LIJN, niet een blok. Zelfde besluit als op de homepage (Nick 2026-09-02):
   een gevuld oranje vlak was het minst statige element op de pagina. Op creme draagt oranje
   tekst te weinig contrast, dus de tekst blijft inkt en het oranje zit in de rand. */
.alleen-mobiel{display:none!important}
@media(max-width:700px){.nav-li{display:none!important}.alleen-mobiel{display:block!important}}
/* LINKEDIN-MERK. Nick 2026-09-18: het moet een LinkedIn-logo zijn dat bij de stijl past.
   Dus het echte merkteken, maar in inkt en zonder het blauwe vlak: op deze site draagt oranje
   de aandacht en is blauw een vreemde kleur. Bij hover wordt hij oranje, net als de rest. */
.nav-li{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;color:var(--ink);opacity:.72;transition:opacity .2s,color .2s;text-decoration:none}
.nav-li:hover{opacity:1;color:var(--oranje)}
.nav-li .li-merk{display:block}
.foot-li{display:inline-flex;align-items:center;gap:8px}
.foot-li .li-merk{width:15px;height:15px;flex:none;opacity:.85}
.bron{margin-top:10px;font-size:13.5px;color:var(--sub);display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.bron a{border-bottom:1px solid var(--line)}
.bron-label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--ink);border:1px solid var(--line);border-radius:3px;padding:2px 7px}
.bron img{height:18px;width:auto;display:block;opacity:.85}
.bewijsvorm{margin-top:26px;counter-reset:bw;list-style:none;padding:0;display:grid;gap:14px;max-width:70ch}
.bewijsvorm li{position:relative;padding-left:34px;font-size:15.5px;line-height:1.55;color:var(--sub)}
.bewijsvorm li::before{counter-increment:bw;content:counter(bw);position:absolute;left:0;top:1px;width:22px;height:22px;border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--ink)}
.bewijsvorm strong{color:var(--ink)}
.flagship{margin-top:clamp(22px,2.6vw,34px);border-top:2px solid var(--ink);padding-top:22px;max-width:72ch}
.flagship-regel{font-size:clamp(17px,1.5vw,21px);line-height:1.4;color:var(--ink);margin-top:10px;max-width:34ch}
.flagship h3{font-size:clamp(20px,2vw,27px);font-weight:900;line-height:1.15;margin-bottom:16px;max-width:24ch}
.flagship p{color:var(--sub);line-height:1.6;margin-top:12px}
a:focus-visible,button:focus-visible{outline:2px solid var(--oranje);outline-offset:3px;border-radius:2px}
.taalvlag{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--sub);border:1px solid var(--line);border-radius:999px;padding:2px 9px;vertical-align:middle;white-space:nowrap}
.navcta{background:transparent;color:var(--ink);text-decoration:none;padding:9px 18px;font-weight:700;
 font-size:14.5px;flex:none;border:1.5px solid var(--oranje);transition:background .25s,color .25s}
.navcta:hover{background:var(--oranje);color:var(--ink)}
.taalwissel{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.6}
.nav-toggle{display:none;flex-direction:column;gap:5px;width:44px;height:44px;border:0;background:transparent;
 cursor:pointer;align-items:center;justify-content:center}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--ink);transition:background .25s}
.nav-item{position:relative;display:flex;align-items:center}
.nav-item > a{display:flex;align-items:center;gap:6px;white-space:nowrap}
.nav-item .pijl{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
 transform:rotate(45deg) translate(-1px,-1px);transition:transform .2s;opacity:.7}
.nav-item.uit > a .pijl{transform:rotate(-135deg) translate(-2px,-2px)}
.uitklap{position:absolute;top:100%;left:-14px;min-width:240px;background:var(--bg);border:1px solid var(--line);
 box-shadow:0 18px 40px rgba(29,26,22,.10);padding:6px;display:flex;flex-direction:column;
 opacity:0;pointer-events:none;transform:translateY(6px);transition:opacity .18s,transform .18s;z-index:11}
.nav-item.uit .uitklap{opacity:1;pointer-events:auto;transform:none}
.uitklap a{padding:11px 14px;font-size:14.5px;opacity:.85;white-space:nowrap}
.uitklap a:hover{opacity:1;background:#fff;color:var(--oranje-tekst)}
body.menu-op{overflow:hidden}

/* DE BEELDBAND. Dit is de brug naar de homepage: dezelfde beelden, dezelfde raam-warm-grade.
   Er staat met opzet GEEN tekst overheen. Tekst boven beeld is precies de constructie waar de
   contrastpoort blind voor is, en waar dus stille leesbaarheidsfouten in ontstaan. */
.beeldband{position:relative;height:clamp(240px,38vw,460px);overflow:hidden;background:var(--diep)}
.beeldband img{width:100%;height:100%;object-fit:cover;display:block}
.beeldband::after{content:"";position:absolute;left:0;right:0;bottom:0;height:45%;pointer-events:none;
 background:linear-gradient(to bottom,rgba(250,247,242,0),var(--bg))}

section[id]{scroll-margin-top:84px}
.kop{padding:clamp(40px,5vw,64px) 0 clamp(26px,3vw,38px)}
.kicker{font-size:11.5px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--oranje-tekst);
 margin-bottom:20px}
h1{font-family:'Satoshi',system-ui,sans-serif;font-weight:900;text-transform:uppercase;letter-spacing:.005em;line-height:1.06;
 font-size:clamp(34px,5.8vw,76px);max-width:17ch}
.lead{margin-top:26px;font-size:clamp(17px,1.55vw,22px);line-height:1.55;color:var(--sub);max-width:56ch}

/* de sectie klemt de uitbraak van .duo af. Zonder dit groeit de documentbreedte mee met de
   negatieve marge en stoppen de volle-breedte-secties bij de schermrand: witte strook rechts. */
main section{padding:clamp(56px,7.5vw,104px) 0;border-top:1px solid var(--line);overflow:hidden}
main section:first-of-type{padding-top:clamp(30px,3.4vw,48px)}
main section:first-child{border-top:1px solid var(--line)}
h2{font-family:'Satoshi',system-ui,sans-serif;font-weight:900;text-transform:uppercase;letter-spacing:.005em;line-height:1.12;
 font-size:clamp(22px,2.7vw,36px);max-width:24ch}
h3{font-weight:700;font-size:clamp(17px,1.5vw,20px);line-height:1.32}
p{max-width:62ch}
main p + p{margin-top:15px}
h2 + p,h3 + p{margin-top:16px}
.sub{color:var(--sub)}
.pagina-route{display:flex;flex-wrap:wrap;gap:12px 24px;padding-top:24px;padding-bottom:24px}
.antwoorden article{margin-bottom:32px}
.antwoorden p{max-width:65ch}
[id]{scroll-margin-top:90px}
a{color:var(--ink)}
a:hover{color:var(--oranje-tekst)}
.label{font-size:11.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--oranje-tekst)}

/* stappen: geen rasterkader meer, alleen haarlijnen. Een tabel met randen om alles heen las
   als een formulier; een lijst met lijnen leest als een document. */
/* STAPPEN NAAST ELKAAR (2026-09-18). Ze stonden onder elkaar over duizend pixels hoogte in een
   kolom van 1125 breed: dat las als een opsomming in een tekstverwerker. Nu een spoor, met een
   haarlijn en een stip per stap, precies zoals op de homepage. */
.stappen{counter-reset:stap;margin-top:clamp(30px,3.5vw,46px);display:grid;
 grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:clamp(18px,2vw,34px)}
/* Zes stappen vielen op 1440 uiteen in vijf plus een wees, en dan leest de zesde als een
   losse toevoeging in plaats van als de laatste stap. Vanaf zes kinderen dus drie kolommen. */
.stappen:has(> :nth-child(6)){grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:820px){.stappen:has(> :nth-child(6)){grid-template-columns:1fr}}
.stap{position:relative;padding-top:22px;border-top:1px solid var(--line)}
.stap::after{content:"";position:absolute;top:-5px;left:0;width:9px;height:9px;border-radius:50%;
 background:var(--oranje)}
.stap::before{counter-increment:stap;content:counter(stap,decimal-leading-zero);display:block;font-weight:700;
 font-size:11px;letter-spacing:.18em;color:var(--sub);margin-bottom:10px}
.stap h3{font-size:17px;line-height:1.25;margin-bottom:8px}
.stap p{font-size:14.5px;line-height:1.6}
@media(max-width:820px){.stappen{grid-template-columns:1fr;gap:0}
  .stap{padding:24px 0 24px 0}.stap::after{display:none}}
.stap .nodig{margin-top:12px;font-size:14.5px;color:var(--sub)}
.stap .nodig b{color:var(--ink);font-weight:700}
.stap.zonder-nummer::before{content:"";counter-increment:none}

/* De landing is randloos: het beeld raakt de schermrand en de tekst zit in de compositie. De
   subpagina zat in een smalle kolom met een postzegel ernaast en veel leegte rechts. Nick
   2026-09-02: "de uitleg is lelijk, zie het verschil". Het beeld breekt nu uit de kolom en loopt
   door tot de rand, precies zoals slide2 op de homepage. */
.duo{margin-top:clamp(34px,4vw,56px);display:grid;gap:clamp(28px,4vw,64px);
  grid-template-columns:minmax(0,1fr) minmax(0,.92fr);align-items:center}
/* Sinds de redactionele indeling staat dit blok over de volle breedte, en toen groeide het
   beeld door tot 1300 pixels: een schermvullend leeg vlak in het midden van de pagina.
   Een vaste verhouding met een plafond houdt het een beeld in plaats van een gat. */
.duo .beeld{position:relative;overflow:hidden;margin-right:calc(50% - 50vw);
  align-self:stretch;aspect-ratio:16/11;min-height:clamp(300px,34vw,460px);max-height:62vh}
.duo .beeld video,.duo .beeld img{width:100%;height:100%;object-fit:cover;display:block}
/* VOL vlak achter het onderschrift, geen verloop. Een verloop laat de contrastpoort blind:
   die meet tekst tegen de achtergrondKLEUR van het element en ziet het beeld eronder niet.
   Met een vol vlak meet hij wit op #0d1420 en kan hij het dus WEL beoordelen. Vandaag zijn er
   twee echte leesbaarheidsfouten gevonden die precies zo door de poort glipten. */
/* het beeld loopt door tot voorbij de schermrand, dus het onderschrift mag NIET meelopen:
   dan valt het laatste woord buiten beeld. Vandaar een vaste leesbreedte links in het beeld. */
.duo .beeld figcaption{position:absolute;left:0;right:auto;bottom:0;width:min(560px,72%);
  font-size:13.5px;line-height:1.5;color:#fff;padding:clamp(16px,1.8vw,24px);background:var(--diep)}
@media(max-width:860px){
  .duo{grid-template-columns:1fr}
  .duo .beeld{margin-right:calc(50% - 50vw);margin-left:calc(50% - 50vw);min-height:clamp(260px,70vw,420px)}
}

/* prijs: geen kaartje met een kader, maar een blok lucht met een lijn erboven. */
/* REPARATIE 2026-09-03, Nick: "de pricing page is kk wierd". Vijf dingen tegelijk mis, alle vijf
   gevolgen van de serif die te ver doorlekte en van drie lagen witruimte op elkaar.
   1. de fijndruk onder het bedrag stond in de SERIF en vet, want hij erfde van .bedrag. Fijndruk
      hoort body-letter te zijn, altijd.
   2. "Op aanvraag" stond even groot als 17.500. Drie lettergrepen op 62 pixels lezen als een even
      zware prijs, en dat is het niet.
   3. een half leeg scherm tussen de lead en het eerste blok: sectie-padding plus blok-marge plus
      kop-padding stapelden op elkaar.
   4. de naam van het product was kleiner dan zijn eigen prijs. Het cijfer domineerde alles.
   5. de twee kolommen hingen los van elkaar. */
/* MATRIX 2026-09-18, Nick: "het getal van het geld is groter dan de inhoud". Drie harde
   fouten weg: het bedrag was zwart, groter dan zijn eigen kop, en droeg een euroteken.
   Plus: de treden liepen naadloos in elkaar over, nu losse kaarten met lucht ertussen. */
.prijsblok{margin-top:clamp(18px,2vw,30px);display:grid;gap:clamp(16px,2vw,26px);
 grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.trede{border:1px solid var(--line);border-radius:12px;background:#fff;padding:clamp(24px,2.6vw,34px);
 display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(14px,1.6vw,20px);align-items:start}
.trede h3{font-family:'Satoshi',system-ui,sans-serif;font-weight:900;font-size:clamp(20px,1.9vw,26px);line-height:1.2;margin-top:6px}

.trede.ingang .bedrag{color:var(--sub)}
.bedrag{font-family:'Satoshi',system-ui,sans-serif;font-weight:600;font-size:clamp(16px,1.35vw,19px);line-height:1.25;letter-spacing:.01em;margin-top:6px;color:var(--sub);order:9}
/* Een woord is geen getal. 'Op aanvraag' krijgt de BODY-letter, niet de serif: twee
   serif-regels onder elkaar ('Bouwwerk' plus 'Op aanvraag') lazen als een kop van twee
   regels in plaats van als naam-plus-waarde. */
.bedrag.woord{font-family:'Satoshi',system-ui,sans-serif;font-weight:700;
  font-size:clamp(19px,1.7vw,23px);letter-spacing:.01em;color:var(--sub);margin-top:10px}
.bedrag small{display:block;font-family:'Satoshi',system-ui,sans-serif;font-size:14px;font-weight:400;letter-spacing:.01em;color:var(--sub);margin-top:14px;line-height:1.55;max-width:38ch}
.trede ul{list-style:none;padding:0;margin:0;font-size:15.5px}
.trede li{padding-left:26px;position:relative;margin-top:11px;color:var(--sub)}
/* haarlijn in plaats van een oranje vierkant blokje */
.trede li::before{content:"";position:absolute;left:0;top:12px;width:14px;height:1px;background:var(--oranje)}
.trede li:first-child{margin-top:0}


.lijst{margin-top:clamp(26px,3vw,38px);list-style:none;padding:0}
.lijst li{padding:22px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.lijst li:last-child{border-bottom:1px solid var(--line)}
.datum{font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--sub);font-weight:700}
.werk{margin-top:clamp(26px,3vw,38px);display:grid;gap:clamp(20px,2.6vw,34px);grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.werk figure{margin:0}
.werk img{width:100%;height:auto;display:block;background:#f2ede5}
.werk figcaption{padding-top:16px}
.werk h3{margin-bottom:8px}

.meting{margin-top:clamp(28px,3.2vw,40px);border-left:2px solid var(--oranje);padding:4px 0 4px 24px}

/* PRODUCTBEELD. Nick 2026-09-02: vier meter tekst met wat gebouwen ertussen is nog steeds vier
   meter tekst. Wat op de prijspagina hoort is het PRODUCT zelf, niet sfeer. Dit is de
   promptvergelijking uit de eerste oplevering, als echte HTML in plaats van een plaatje: scherp op
   elk scherm, meetbaar door de contrastpoort, en geen bestand dat kan verouderen.
   Het is nadrukkelijk een VOORBEELD met een verzonnen kantoor. Een echte uitdraai over een echt
   kantoor hier neerzetten zou bewijs suggereren dat er niet is. */
.toon{margin-top:clamp(34px,4vw,54px);border:1px solid var(--line);background:#fff}
.toon-kop{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:clamp(18px,2vw,26px);border-bottom:1px solid var(--line)}
.toon-kop .vraag{font-weight:700;font-size:clamp(15px,1.4vw,18px);max-width:52ch}
.toon-kop .stempel{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--sub);white-space:nowrap}
.toon-raster{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.toon-cel{padding:clamp(16px,1.6vw,22px);border-left:1px solid var(--line)}
.toon-cel:first-child{border-left:0}
.toon-cel h3,.toon-cel h4{font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--oranje-tekst);margin-bottom:12px}
.toon-cel p{font-size:14px;line-height:1.55;color:var(--sub);max-width:none}
.toon-cel .naam{color:var(--ink);font-weight:700}
.toon-cel .leeg{color:var(--ink);font-weight:700}
.toon-voet{padding:clamp(14px,1.4vw,20px) clamp(18px,2vw,26px);border-top:1px solid var(--line);
  font-size:13.5px;color:var(--sub);background:var(--bg)}
@media(max-width:860px){
  .toon-raster{grid-template-columns:repeat(2,minmax(0,1fr))}
  .toon-cel:nth-child(3){border-left:0}
  .toon-cel:nth-child(n+3){border-top:1px solid var(--line)}
}
@media(max-width:520px){
  .toon-raster{grid-template-columns:1fr}
  .toon-cel{border-left:0;border-top:1px solid var(--line)}
  .toon-cel:first-child{border-top:0}
}

/* ZELFTEST · toegevoegd 2026-09-07 op verzoek van Nick: "ook een test het zelf knop. met daarin
   een prompt en instructie voor inprivate search naar zichzelf". Een lezer die de vraag zelf
   stelt heeft het bewijs binnen een minuut, en dat is sterker dan welke zin op deze pagina ook.
   Zelfde witte kaart als .toon, want dat is al de vorm voor "hier staat materiaal, geen betoog". */
.zelftest{margin-top:clamp(28px,3.2vw,42px);border:1px solid var(--line);background:#fff;
 padding:clamp(20px,2.4vw,30px)}
.zelftest .prompt{margin:0;font-weight:700;font-size:clamp(15px,1.4vw,18px);max-width:56ch;
 line-height:1.5}
.zelftest ol{margin:20px 0 0;padding-left:20px;font-size:15px;color:var(--sub);max-width:62ch}
.zelftest li{margin-top:9px}
.knop-licht{display:inline-block;margin-top:20px;background:transparent;color:var(--ink);
 font-family:inherit;font-weight:700;font-size:15px;padding:12px 24px;border:1.5px solid var(--oranje);
 cursor:pointer;transition:background .25s,color .25s}
.knop-licht:hover{background:var(--oranje);color:var(--ink)}

.cta-blok{background:var(--diep);color:#fff;border-top:0}
.cta-blok h2,.cta-blok p{color:#fff}
.cta-blok .label{color:var(--oranje)}
.cta-blok p{color:rgba(255,255,255,.82)}
.knop{display:inline-block;margin-top:26px;background:transparent;color:#fff;text-decoration:none;
 font-weight:700;font-size:16px;padding:14px 30px;border:1.5px solid var(--oranje);
 transition:background .25s,color .25s}
.knop:hover{background:var(--oranje);color:var(--ink)}
/* FORMULIER · Web3Forms, bezorging op nick@beacy.nl. Toegevoegd 2026-09-03 op verzoek van Nick.
   De oude site had dit al; bij de overstap naar deze bouwer viel het weg en bleef er alleen een
   mailto over. Randen dragen --oranje, tekst dragt --oranje-tekst: die splitsing staat hierboven
   uitgelegd en geldt hier net zo goed. */
.fmt{margin-top:30px;display:grid;gap:18px;max-width:560px}
.fmt-rij{display:grid;gap:18px;grid-template-columns:1fr 1fr}
.fmt-veld{display:grid;gap:7px}
.fmt-veld span{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--sub)}
.fmt-veld input,.fmt-veld textarea{font-family:inherit;font-size:16px;color:var(--ink);background:#fff;
 border:1px solid var(--lijn);padding:13px 14px;width:100%;border-radius:0}
.fmt-veld textarea{min-height:120px;resize:vertical}
.fmt-veld input:focus-visible,.fmt-veld textarea:focus-visible{outline:2px solid var(--oranje);outline-offset:1px}
.fmt .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.fmt button{justify-self:start;background:transparent;color:var(--ink);font-family:inherit;font-weight:700;
 font-size:16px;padding:14px 30px;border:1.5px solid var(--oranje);cursor:pointer;
 transition:background .25s,color .25s}
.fmt button:hover{background:var(--oranje);color:var(--ink)}
.fmt-melding{font-size:15px;color:var(--sub)}
.fmt-akkoord{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;color:var(--sub);line-height:1.5}
.fmt-akkoord input{margin-top:3px;width:18px;height:18px;flex:none;accent-color:var(--ink)}
.fmt-akkoord a{color:var(--oranje-tekst)}
@media(max-width:640px){ .fmt-rij{grid-template-columns:1fr} }

/* op creme draagt witte tekst niets, dus daar is de knop inkt op een oranje lijn */
main section:not(.cta-blok) .knop{color:var(--ink)}
main section:not(.cta-blok) .knop:hover{color:var(--ink)}

footer{background:var(--diep);color:rgba(255,255,255,.62);padding:clamp(16px,1.8vw,24px) 0 14px;font-size:14px}
footer a{color:rgba(255,255,255,.62);text-decoration:none;transition:color .2s}
footer a:hover{color:#fff}
.foot-rij{display:flex;align-items:center;justify-content:space-between;gap:clamp(10px,2vw,28px);flex-wrap:wrap}
.foot-merk{font-family:'Satoshi',system-ui,sans-serif;font-weight:900;text-transform:uppercase;letter-spacing:.14em;font-size:17px;color:#fff;
 text-decoration:none;flex:none;line-height:1}
.foot-merk .y{color:var(--oranje)}
.foot-links{display:flex;flex-wrap:wrap;gap:0 22px;flex:1 1 auto;justify-content:center}
.foot-links a{white-space:nowrap}
.foot-mail{flex:none;color:#fff;font-weight:500}
.foot-rechts{display:inline-flex;align-items:center;gap:10px}
.foot-li-merk{display:inline-flex;color:inherit;opacity:.8;transition:opacity .2s,color .2s}
.foot-li-merk:hover{opacity:1;color:var(--oranje)}
.foot-onder{margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.14);
 display:flex;flex-wrap:wrap;gap:5px 20px;justify-content:space-between;font-size:12.5px;color:rgba(255,255,255,.48)}
@media(max-width:760px){.foot-links{justify-content:flex-start;gap:4px 18px}}

@media(max-width:1080px){
  /* BLOKKER, gevonden met grill_site.py op 375px: de knop "De Foundation" in de kopbalk lag
     OVER de menuknop heen (kop is 327px breed, merk plus knop plus hamburger plus tussenruimte
     telt op tot 329px). De menuknop was daardoor niet aan te klikken en een mobiele bezoeker had
     op ALLE zeven subpagina's geen navigatie. De knop staat op mobiel in het menu zelf, dus in de
     balk kan hij weg. */
  .navcta{display:none}
  .nav-toggle{display:flex}
  .nav-menu{position:fixed;inset:0;z-index:9;flex-direction:column;justify-content:center;gap:2px;
   background:rgba(8,11,17,.975);opacity:0;pointer-events:none;transition:opacity .25s;padding:84px 24px 24px;
   overflow-y:auto}
  .nav-menu.open{opacity:1;pointer-events:auto}
  .nav-item{display:block;width:100%;max-width:420px;margin:0 auto}
  .nav-menu a{color:#fff;font-size:20px;font-weight:700;padding:14px 0;width:100%;text-align:center;
   border-bottom:1px solid rgba(255,255,255,.12);opacity:.95;justify-content:center}
  /* DE ECHTE BLOKKER, gemeten met elementsFromPoint op 375px: dit blok zette
     `pointer-events:auto` en hield `z-index:11` vast, hoger dan de kopbalk (10). Het onzichtbare
     uitklapmenu ving daardoor de tik op de menuknop op, op alle zeven subpagina's. `inherit` laat
     het weer meedoen met het gesloten menu (`pointer-events:none`), zoals de bedoeling was. */
  .uitklap{position:static;opacity:1;pointer-events:inherit;transform:none;background:transparent;border:0;
   box-shadow:none;padding:0;z-index:auto}
  .uitklap a{font-size:16px;opacity:.7;border-bottom:0;padding:9px 0}
  .nav-item .pijl{display:none}
  /* aanraakvlakken op 44px, de richtlijn van Apple en WCAG 2.5.8 */
  .foot-links a,.foot-onder a{display:inline-block;padding:0;min-height:44px;line-height:44px}
  .stap{grid-template-columns:1fr;gap:8px}
  .stap::before{line-height:1.4}
  .foot-rij{gap:8px}
}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*{transition-duration:.01s!important}}