/*
Theme Name: VeiligheidZeker
Theme URI: https://veiligheidzeker.nl/
Author: VeiligheidZeker
Description: Nachtwacht - eigen thema voor veiligheidzeker.nl. Donker waar het spannend is, licht waar het rustig wordt.
Version: 2.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: veiligheidzeker
*/

@font-face{font-family:'Figtree';font-style:normal;font-weight:500 900;font-display:swap;src:url('fonts/figtree-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Figtree';font-style:normal;font-weight:500 900;font-display:swap;src:url('fonts/figtree-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url('fonts/manrope-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url('fonts/manrope-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/plex-mono-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/plex-mono-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
  --nacht:#0B0F0E;
  --nacht-2:#141A18;
  --nacht-3:#1E2624;
  --nacht-lijn:#2C3634;
  --nacht-tekst:#E7EBE7;
  --nacht-zacht:#9AA7A2;

  --dag:#F2F3EE;
  --dag-2:#E6E8E0;
  --wit:#FFFFFF;
  --inkt:#0F1413;
  --inkt-zacht:#59625E;
  --lijn:#D2D6CC;

  --sein:#CDF546;
  --sein-diep:#7E9E10;
  --goed:#2E7D5B;
  --goed-vlak:#DCEDE4;
  --fout:#B23A2B;
  --fout-vlak:#F3DFDB;
  --let:#8A6410;
  --let-vlak:#F0E7D2;

  --kop:"Figtree","Helvetica Neue",Arial,sans-serif;
  --tekst:"Manrope","Segoe UI",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;

  --breed:1240px;
  --smal:66ch;
  --r:2px;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:90px}

body{
  margin:0;background:var(--dag);color:var(--inkt);
  font-family:var(--tekst);font-size:17.5px;line-height:1.62;font-weight:400;
  -webkit-font-smoothing:antialiased;hyphens:auto;-webkit-hyphens:auto;
}
img,svg,video{max-width:100%;height:auto}
img{display:block}

h1,h2,h3,h4{font-family:var(--kop);text-wrap:balance;margin:0;hyphens:auto;letter-spacing:-.03em}
h1{font-size:clamp(2.4rem,7vw,5.2rem);font-weight:800;line-height:.94}
h2{font-size:clamp(1.75rem,4vw,3rem);font-weight:800;line-height:1.02}
h3{font-size:1.22rem;font-weight:700;line-height:1.25;letter-spacing:-.015em}
h4{font-size:1rem;font-weight:700;letter-spacing:-.01em}
p{margin:0 0 1.05em}
ul,ol{margin:0 0 1.05em;padding-left:1.25em}
li{margin:.3em 0}
strong,b{font-weight:700}

a{color:var(--goed);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
a:hover{text-decoration-thickness:3px}
:focus-visible{outline:2.5px solid var(--sein);outline-offset:3px}
code{font-family:var(--mono);font-size:.88em;background:var(--dag-2);padding:1px 5px}

.wrap{max-width:var(--breed);margin:0 auto;padding:0 26px}
.lees{max-width:var(--smal)}

.etiket{
  font-family:var(--mono);font-size:.66rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--inkt-zacht);
  display:inline-flex;align-items:center;gap:9px;
}
.etiket::before{content:"";width:16px;height:2px;background:var(--sein-diep);flex:none}

.knop{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--kop);font-size:1rem;font-weight:700;letter-spacing:-.01em;
  text-decoration:none;padding:15px 26px;border-radius:var(--r);
  background:var(--sein);color:var(--nacht);border:2px solid var(--sein);
  min-height:52px;transition:transform .12s ease,background .12s ease,border-color .12s ease;
}
.knop:hover{background:var(--wit);border-color:var(--wit);color:var(--nacht);text-decoration:none;transform:translateY(-2px)}
.knop--rand{background:transparent;color:var(--inkt);border-color:var(--lijn)}
.knop--rand:hover{background:transparent;border-color:var(--goed);color:var(--goed)}

.kop{background:var(--nacht);border-bottom:1px solid var(--nacht-lijn);position:sticky;top:0;z-index:40}
.kop__in{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 26px}
.merk{display:flex;flex-direction:column;gap:1px;text-decoration:none}
.merk:hover{text-decoration:none}
.merk__naam{
  font-family:var(--kop);font-weight:800;font-size:1.3rem;letter-spacing:-.045em;
  line-height:1;text-transform:uppercase;color:var(--nacht-tekst);
}
.merk__naam em{font-style:normal;color:var(--sein)}
.merk__regel{font-family:var(--mono);font-size:.57rem;letter-spacing:.2em;text-transform:uppercase;color:var(--nacht-zacht)}

.menu{display:flex;gap:26px;align-items:center;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.menu li{margin:0}
.menu a{
  font-family:var(--tekst);font-size:.95rem;font-weight:600;color:var(--nacht-tekst);
  text-decoration:none;padding:6px 0;border-bottom:2px solid transparent;
}
.menu a:hover,.menu .current-menu-item>a{color:var(--sein);border-bottom-color:var(--sein);text-decoration:none}

.hero{position:relative;background:var(--nacht);color:var(--nacht-tekst);overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    repeating-linear-gradient(90deg,transparent 0 79px,rgba(205,245,70,.08) 79px 80px),
    repeating-linear-gradient(0deg,transparent 0 79px,rgba(205,245,70,.05) 79px 80px);
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 55%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 0,#000 55%,transparent 100%);
}
.hero__raster{position:relative;z-index:2;display:grid;gap:34px;padding:78px 26px 84px;align-items:center}
.hero__in{display:grid;gap:26px;max-width:24ch}
.hero h1{color:var(--nacht-tekst)}
.hero h1 em{font-style:normal;color:var(--sein)}
.hero__lead{font-size:1.16rem;line-height:1.55;color:var(--nacht-zacht);margin:0;max-width:46ch}
.hero__knoppen{display:flex;gap:12px;flex-wrap:wrap;margin-top:4px}
.hero .knop--rand{color:var(--nacht-tekst);border-color:var(--nacht-lijn)}
.hero .knop--rand:hover{border-color:var(--sein);color:var(--sein)}
.hero__beeld{margin:0;position:relative}
.hero__beeld img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r);filter:saturate(.9) contrast(1.04)}
.hero__beeld::after{
  content:"";position:absolute;inset:0;border-radius:var(--r);
  box-shadow:inset 0 0 0 1px rgba(205,245,70,.35);
  background:linear-gradient(180deg,rgba(11,15,14,0) 55%,rgba(11,15,14,.5) 100%);
}
@media (min-width:940px){
  .hero--beeld .hero__raster{grid-template-columns:1.02fr .98fr;gap:56px}
  .hero__in{max-width:none}
}

.sectie{padding:74px 0}
.sectie--wit{background:var(--wit)}
.sectie--nacht{background:var(--nacht);color:var(--nacht-tekst)}
.sectie--nacht h2,.sectie--nacht h3,.sectie--nacht h4{color:var(--nacht-tekst)}
.sectie--nacht p{color:var(--nacht-zacht)}
.sectie--nacht strong,.sectie--nacht b{color:var(--nacht-tekst)}
.sectie--nacht a:not(.knop){color:var(--sein)}
.sectie--nacht a.knop,.hero a.knop,.vzk__uit a.knop,.vzr__uit a.knop{color:var(--nacht)}
.sectie--nacht a.knop--rand{color:var(--nacht-tekst)}
.sectie--nacht .etiket{color:var(--nacht-zacht)}
.sectie--nacht .etiket::before{background:var(--sein)}
.sectiekop{display:grid;gap:14px;margin-bottom:34px;max-width:min(46ch,100%)}
.sectiekop--breed{max-width:min(58ch,100%)}
.sectiekop p{margin:0;color:var(--inkt-zacht);font-size:1.06rem}
.sectie--nacht .sectiekop p{color:var(--nacht-zacht)}

.raster{display:grid;gap:1px;grid-template-columns:repeat(auto-fit,minmax(min(270px,100%),1fr));background:var(--lijn);border:1px solid var(--lijn)}
.kaart{background:var(--wit);padding:28px 24px;display:grid;gap:10px;align-content:start}
.kaart p{margin:0;font-size:.99rem;color:var(--inkt-zacht)}
.sectie--nacht .raster{background:var(--nacht-lijn);border-color:var(--nacht-lijn)}
.sectie--nacht .kaart{background:var(--nacht-2)}
.sectie--nacht .kaart p{color:var(--nacht-zacht)}
.kaart--goed{box-shadow:inset 4px 0 0 var(--goed)}
.kaart--fout{box-shadow:inset 4px 0 0 var(--fout)}
.kaart--sein{box-shadow:inset 4px 0 0 var(--sein-diep)}
.sectie--nacht .kaart--sein{box-shadow:inset 4px 0 0 var(--sein)}

.cijfers{display:grid;gap:1px;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));background:var(--nacht-lijn)}
.cijfer{background:var(--nacht);padding:34px 24px;display:grid;gap:8px}
.cijfer__getal{font-family:var(--kop);font-size:clamp(2.1rem,4.4vw,3.2rem);font-weight:800;line-height:1;color:var(--sein);letter-spacing:-.045em}
.cijfer__bij{font-size:.95rem;color:var(--nacht-zacht);margin:0}

.tabelvak{overflow-x:auto;border:1px solid var(--lijn);background:var(--wit)}
table{border-collapse:collapse;width:100%;min-width:480px;font-size:.95rem}
caption{
  text-align:left;padding:15px 18px;border-bottom:1px solid var(--lijn);
  font-family:var(--mono);font-size:.65rem;letter-spacing:.18em;text-transform:uppercase;color:var(--inkt-zacht);
}
th,td{padding:13px 18px;text-align:left;border-bottom:1px solid var(--lijn);vertical-align:top}
thead th{font-family:var(--mono);font-size:.65rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--inkt-zacht);background:var(--dag-2)}
tbody tr:last-child td{border-bottom:0}
td.getal,th.getal{text-align:right;font-variant-numeric:tabular-nums;font-family:var(--mono);font-size:.9rem}
.sectie--nacht .tabelvak{background:var(--nacht-2);border-color:var(--nacht-lijn)}
.sectie--nacht th,.sectie--nacht td{border-color:var(--nacht-lijn);color:var(--nacht-tekst)}
.sectie--nacht thead th{background:var(--nacht-3);color:var(--nacht-zacht)}
.sectie--nacht caption{color:var(--nacht-zacht);border-color:var(--nacht-lijn)}

.dossierlijst{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.dossierlijst li{padding-left:30px;position:relative;font-size:1rem}
.dossierlijst li::before{content:"";position:absolute;left:0;top:.5em;width:13px;height:13px;border:2px solid var(--sein-diep);border-radius:1px}
.sectie--nacht .dossierlijst li::before{border-color:var(--sein)}
.dossierlijst li.kruis::before{border-color:var(--fout)}

.kernantwoord{
  border-left:4px solid var(--sein-diep);background:var(--wit);
  padding:22px 26px;margin:0 0 30px;max-width:var(--smal);font-size:1.1rem;line-height:1.58;
}
.kernantwoord p{margin:0}
.sectie--nacht .kernantwoord{background:var(--nacht-2);border-left-color:var(--sein);color:var(--nacht-tekst)}

.vz-beeld{margin:0}
.vz-beeld img{width:100%;aspect-ratio:3/2;object-fit:cover;background:var(--dag-2)}
.vz-beeld figcaption,.duo__beeld figcaption{font-family:var(--mono);font-size:.68rem;line-height:1.6;color:var(--inkt-zacht);padding-top:10px}
.sectie--nacht figcaption{color:var(--nacht-zacht)}
.beeldrij{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));margin-top:32px}
.duo{display:grid;gap:34px;align-items:center;grid-template-columns:1fr}
@media (min-width:860px){.duo{grid-template-columns:1fr 1fr;gap:52px}.duo--omgekeerd .duo__beeld{order:-1}}
.duo__beeld{margin:0}
.duo__beeld img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--dag-2)}

.herkomst{font-family:var(--mono);font-size:.7rem;line-height:1.7;color:var(--inkt-zacht);border-top:1px solid var(--lijn);padding-top:16px;margin-top:44px}
.herkomst b{color:var(--inkt);font-weight:600}
.bronnen{font-family:var(--mono);font-size:.7rem;line-height:1.75;color:var(--inkt-zacht);border:1px solid var(--lijn);border-left:3px solid var(--let);padding:16px 20px;margin-top:30px;background:var(--wit)}
.bronnen b{color:var(--inkt)}

.voet{background:var(--nacht);color:var(--nacht-zacht);padding:64px 0 40px;font-size:.95rem;border-top:1px solid var(--nacht-lijn)}
.voet__in{display:grid;gap:34px;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr))}
.voet h4{margin:0 0 14px;font-size:.64rem;font-family:var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--sein)}
.voet ul{list-style:none;padding:0;margin:0}
.voet li{margin:.45em 0}
.voet a{color:var(--nacht-tekst);text-decoration:none}
.voet a:hover{color:var(--sein);text-decoration:underline}
.voet__slot{margin-top:44px;padding-top:22px;border-top:1px solid var(--nacht-lijn);font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;display:flex;gap:10px 26px;flex-wrap:wrap}

.overslaan{position:absolute;left:-9999px;top:0;background:var(--sein);color:var(--nacht);padding:12px 18px;z-index:99;text-decoration:none;font-family:var(--kop);font-weight:700}
.overslaan:focus{left:10px;top:10px}

@media (max-width:1249px){
  .kop__in{flex-wrap:wrap;row-gap:8px}
  .merk{flex:1 1 auto;min-width:0}
  .kop__bel{order:2}
  
  .kop__in nav{order:3;flex:1 0 100%;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;
    scrollbar-width:none;-ms-overflow-style:none}
  .kop__in nav::-webkit-scrollbar{display:none}
  .menu{flex-wrap:nowrap;gap:20px}
  .menu a{white-space:nowrap}
}
@media (max-width:720px){
  body{font-size:16.5px}
  .sectie{padding:52px 0}
  .hero__raster{padding:44px 26px 48px;gap:26px}
  .hero__in{gap:20px}
  .hero--beeld .hero__beeld img{aspect-ratio:16/9}
  .menu{gap:16px}
  .menu a{font-size:.9rem}
  .hero__knoppen .knop{width:100%}
  .hero__actie .knop{width:100%}
  .hero__actie{gap:12px}
  .kop__in{padding:11px 26px}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

.vzr{display:grid;gap:1px;background:var(--nacht-lijn);border:1px solid var(--nacht-lijn)}
.vzr__vraag{background:var(--nacht-2);padding:28px 26px;display:grid;gap:12px}
.vzr__vraag h3{margin:0}
.vzr__uitleg{margin:0;font-size:.95rem;color:var(--nacht-zacht)}
.vzr__keuzes{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));margin-top:6px}
.vzr__knop{
  font-family:var(--tekst);font-size:.98rem;text-align:left;cursor:pointer;
  background:var(--nacht-3);color:var(--nacht-tekst);
  border:2px solid var(--nacht-lijn);border-radius:var(--r);
  padding:14px 16px;display:grid;gap:5px;min-height:52px;
  transition:border-color .12s ease,background .12s ease;
}
.vzr__knop b{font-family:var(--kop);font-weight:700;font-size:1.02rem}
.vzr__knop span{font-size:.85rem;color:var(--nacht-zacht);line-height:1.45}
.vzr__knop:hover{border-color:var(--sein)}
.vzr__knop[aria-pressed="true"]{border-color:var(--sein);background:rgba(205,245,70,.09)}
.vzr__knop[aria-pressed="true"] b{color:var(--sein)}
.vzr__uit{display:block;background:var(--nacht-3);padding:30px 26px;border-top:2px solid var(--sein)}
.vzr__klasse{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.vzr__cijfer{font-family:var(--kop);font-weight:800;font-size:clamp(2.4rem,5.5vw,3.6rem);line-height:1;color:var(--sein);letter-spacing:-.05em}
.vzr__label{font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--nacht-zacht)}
.vzr__uit p{color:var(--nacht-zacht);margin:0 0 .9em;max-width:62ch}
.vzr__uit p strong{color:var(--nacht-tekst)}
.vzr__waarschuwing{border-left:3px solid var(--sein);padding-left:16px;margin-top:16px}

.vzf{background:var(--nacht-2);border:1px solid var(--nacht-lijn);padding:30px 28px;max-width:640px}
.sectie--wit .vzf,.sectie--dag .vzf{background:var(--wit);border-color:var(--lijn)}
.vzf__titel{margin:0 0 8px}
.vzf__intro{margin:0 0 22px;color:var(--nacht-zacht);font-size:1rem}
.sectie--wit .vzf__intro{color:var(--inkt-zacht)}
.vzf__form{display:grid;gap:16px}
.vzf__rij{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:620px){.vzf__rij{grid-template-columns:1fr 1fr}}
.vzf__veld{display:grid;gap:7px}
.vzf__veld span{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--nacht-zacht)}
.sectie--wit .vzf__veld span{color:var(--inkt-zacht)}
.vzf__veld input,.vzf__veld textarea{
  font-family:var(--tekst);font-size:1rem;color:var(--nacht-tekst);
  background:var(--nacht-3);border:2px solid var(--nacht-lijn);border-radius:var(--r);
  padding:13px 14px;width:100%;min-height:50px;
}
.sectie--wit .vzf__veld input,.sectie--wit .vzf__veld textarea{background:var(--dag);border-color:var(--lijn);color:var(--inkt)}
.vzf__veld input:focus,.vzf__veld textarea:focus{outline:none;border-color:var(--sein)}
.vzf__veld textarea{min-height:96px;resize:vertical}
.vzf__val{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.vzf__melding{margin:0;font-size:.95rem;min-height:1px}
.vzf__melding--fout{color:var(--fout)}
.sectie--nacht .vzf__melding--fout{color:#E8907F}
.vzf__klein{margin:0;font-family:var(--mono);font-size:.66rem;line-height:1.6;color:var(--nacht-zacht)}
.sectie--wit .vzf__klein{color:var(--inkt-zacht)}
.vzf__gelukt{margin:0;font-size:1.05rem;line-height:1.6}
.vzf__gelukt strong{color:var(--sein)}
.sectie--wit .vzf__gelukt strong{color:var(--goed)}

.bel{display:inline-flex;align-items:center;gap:10px;font-family:var(--kop);font-weight:700;
  font-size:1.05rem;text-decoration:none;color:var(--sein)}
.bel:hover{text-decoration:underline}
.sectie--wit .bel,.kop .bel{color:var(--sein)}
.kop__bel{display:inline-flex;white-space:nowrap;flex:none}

.vzk{display:grid;gap:1px;background:var(--nacht-lijn);border:1px solid var(--nacht-lijn)}
.vzk__velden{background:var(--nacht-2);padding:26px;display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr))}
.vzk__veld{display:grid;gap:7px}
.vzk__label{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--nacht-zacht)}
.vzk__invoer{display:flex;align-items:center;background:var(--nacht-3);border:2px solid var(--nacht-lijn);border-radius:var(--r)}
.vzk__invoer:focus-within{border-color:var(--sein)}
.vzk__euro{padding:0 4px 0 13px;color:var(--nacht-zacht);font-family:var(--mono)}
.vzk__veld input{
  font-family:var(--mono);font-size:1.05rem;color:var(--nacht-tekst);background:transparent;
  border:0;padding:13px 13px 13px 4px;width:100%;min-height:50px;
}
.vzk__veld input:focus{outline:none}
.vzk__veld small{font-size:.78rem;color:var(--nacht-zacht);line-height:1.5}
.vzk__uit{display:block;background:var(--nacht-3);padding:30px 26px;border-top:2px solid var(--sein)}
.vzk__kop{font-family:var(--kop);font-weight:800;font-size:clamp(1.5rem,3.4vw,2.2rem);line-height:1.1;color:var(--sein);letter-spacing:-.03em;margin:0 0 16px}
.vzk__uit p{color:var(--nacht-zacht);margin:0 0 .8em;max-width:62ch}
.vzk__uit strong{color:var(--nacht-tekst)}
.vzk__staaf{display:grid;gap:10px;margin:20px 0 6px;max-width:560px}
.vzk__balk{display:grid;grid-template-columns:96px 1fr auto;gap:12px;align-items:center;font-family:var(--mono);font-size:.8rem;color:var(--nacht-zacht)}
.vzk__meter{height:18px;background:var(--nacht-lijn);position:relative;overflow:hidden}
.vzk__meter i{position:absolute;inset:0 auto 0 0;background:var(--sein);display:block}
.vzk__meter.is-huur i{background:var(--fout)}

.sectie--nacht .herkomst,.sectie--nacht .bronnen{color:var(--nacht-zacht);border-color:var(--nacht-lijn);background:transparent}
.sectie--nacht .herkomst b,.sectie--nacht .bronnen b{color:var(--nacht-tekst)}

.hero__actie{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:2px}
.hero__terug{color:var(--nacht-zacht);font-size:.95rem;text-decoration:underline;text-underline-offset:3px}
.hero__terug:hover{color:var(--sein)}

.kernvraag{font-size:clamp(1.5rem,3.4vw,2.15rem);line-height:1.06;margin:0 0 15px;max-width:var(--smal)}

@media (max-width:1249px){
  
  .kop__bel{padding:10px 2px;margin:-10px 0}
}
@media (max-width:359px){
  
  .merk__regel{display:none}
}
@media (max-width:460px){
  .merk__naam{font-size:1.06rem}
  .merk__regel{font-size:.5rem;letter-spacing:.12em}
  .kop__bel{font-size:.95rem;gap:6px}
  .kop__in{gap:10px}
}

@media (max-width:1249px){html{scroll-padding-top:115px}}

.kaart--let{box-shadow:inset 4px 0 0 var(--let)}
.sectie--nacht .kaart--let{box-shadow:inset 4px 0 0 #C9A227}

.citaat{margin:26px 0;max-width:var(--smal);border-left:4px solid var(--let);background:var(--wit);padding:20px 24px}
.citaat p{margin:0 0 10px;font-size:1.03rem;line-height:1.62}
.citaat p:last-child{margin-bottom:0}
.citaat cite{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--inkt-zacht);font-style:normal;padding-top:6px}
.sectie--nacht .citaat{background:var(--nacht-2);border-left-color:#C9A227}
.sectie--nacht .citaat cite{color:var(--nacht-zacht)}

.stappen{list-style:none;counter-reset:stap;padding:0;margin:0;display:grid;gap:22px;max-width:var(--smal)}
.stappen li{counter-increment:stap;position:relative;padding-left:56px}
.stappen li::before{
  content:counter(stap);position:absolute;left:0;top:-2px;width:38px;height:38px;
  display:grid;place-items:center;font-family:var(--kop);font-weight:800;font-size:1.15rem;
  color:var(--nacht);background:var(--sein);border-radius:1px;
}
.sectie--wit .stappen li::before{background:var(--sein-diep);color:var(--wit)}
.stappen h3{margin:0 0 6px;font-size:1.12rem}
.stappen p{margin:0;color:var(--inkt-zacht)}
.sectie--nacht .stappen p{color:var(--nacht-zacht)}

.notitie{border:1px dashed var(--lijn);padding:14px 18px;margin:22px 0;max-width:var(--smal);font-size:.97rem;color:var(--inkt-zacht)}
.notitie b{color:var(--inkt)}
.sectie--nacht .notitie{border-color:var(--nacht-lijn);color:var(--nacht-zacht)}
.sectie--nacht .notitie b{color:var(--nacht-tekst)}

.sectie{padding:52px 0}
.sectiekop{margin-bottom:24px}
.hero__raster{padding:56px 26px 60px}
.voet{padding:46px 0 30px}
.kaart{padding:22px 20px;gap:8px}
.cijfer{padding:26px 22px}
.duo__beeld img{aspect-ratio:3/2}
.vz-beeld img{aspect-ratio:16/9}
.beeldrij{margin-top:22px;gap:16px}
.kernantwoord{padding:18px 22px;margin-bottom:24px}
.stappen{gap:18px}
.citaat{margin:20px 0;padding:17px 21px}
.herkomst{margin-top:32px;padding-top:14px}
.bronnen{margin-top:24px;padding:14px 18px}
.vzr__vraag{padding:22px 22px}
@media (min-width:860px){.duo{gap:44px}}
@media (max-width:720px){
  .sectie{padding:40px 0}
  .hero__raster{padding:36px 26px 40px;gap:22px}
  .voet{padding:38px 0 26px}
}

:root{--smal:54ch}
.dossierlijst{max-width:56ch!important}
.duo>div>p,.duo>div>ul,.stappen p,.stappen h3{max-width:54ch}
.sectiekop--breed{max-width:min(50ch,100%)}
.sectie{padding:46px 0}
@media (max-width:720px){.sectie{padding:36px 0}}
.vzk__uit p{max-width:54ch}

.menuknop{display:none}
@media (max-width:1249px){
  .kop__in{flex-wrap:wrap;row-gap:0}
  .menuknop{
    display:inline-flex;align-items:center;gap:9px;order:2;
    background:transparent;border:1px solid var(--nacht-lijn);border-radius:var(--r);
    color:var(--nacht-tekst);font-family:var(--kop);font-weight:700;font-size:.95rem;
    padding:9px 14px;min-height:44px;cursor:pointer;
  }
  .menuknop__streep{
    position:relative;width:17px;height:2px;background:var(--sein);flex:none;
  }
  .menuknop__streep::before,.menuknop__streep::after{
    content:"";position:absolute;left:0;width:17px;height:2px;background:var(--sein);
  }
  .menuknop__streep::before{top:-5px}
  .menuknop__streep::after{top:5px}
  .kop--open .menuknop{border-color:var(--sein)}
  .kop--open .menuknop__streep{background:transparent}
  .kop--open .menuknop__streep::before{top:0;transform:rotate(45deg)}
  .kop--open .menuknop__streep::after{top:0;transform:rotate(-45deg)}

  .kop__bel{order:3}
  .kop__in nav{
    order:4;flex-basis:100%;overflow:visible;display:none;
    border-top:1px solid var(--nacht-lijn);margin-top:12px;
  }
  .kop--open .kop__in nav{display:block}
  .menu{
    flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:0;
    padding:4px 0 10px;max-height:min(62vh,460px);overflow-y:auto;
  }
  .menu li{margin:0}
  .menu a{
    display:block;padding:13px 2px;font-size:1.02rem;border-bottom:1px solid var(--nacht-lijn);
    border-left:3px solid transparent;padding-left:12px;
  }
  .menu li:last-child a{border-bottom:0}
  .menu a:hover,.menu .current-menu-item>a{
    border-bottom-color:var(--nacht-lijn);border-left-color:var(--sein);
  }
}
@media (max-width:460px){
  .menuknop{padding:9px 11px;font-size:.9rem}
}

.sectie .hero__actie{margin:6px 0 30px}
.sectie .hero__terug{color:var(--inkt-zacht)}
.sectie .hero__terug:hover{color:var(--goed)}
.sectie--nacht .hero__terug{color:var(--nacht-zacht)}

@media (max-width:1249px){html{scroll-padding-top:86px}}

.vzk__uit p.vzk__kop{color:var(--sein);max-width:none}
@media (max-width:1249px){html{scroll-padding-top:100px}}

.schouw__plan{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  -webkit-mask-image:radial-gradient(120% 92% at 86% 42%,#000 0,transparent 68%);
          mask-image:radial-gradient(120% 92% at 86% 42%,#000 0,transparent 68%);
}
.schouw__plan svg{
  position:absolute;right:-6%;top:48%;transform:translateY(-50%);
  width:min(760px,64vw);height:auto;
}

.hero--schouw .hero__raster{align-items:start;padding-bottom:44px}
.hero--schouw h1{font-size:clamp(1.85rem,3.4vw,2.65rem);line-height:1}
.hero--schouw .hero__lead{font-size:1.02rem;max-width:34ch;margin:0}
@media (min-width:1000px){
  .hero--schouw .hero__raster{
    grid-template-columns:minmax(0,24rem) minmax(0,32rem);
    justify-content:start;gap:60px;
  }
  .hero--schouw .hero__in{max-width:none}
}

.teller{
  display:flex;align-items:center;gap:11px;margin-bottom:18px;
  font-family:var(--mono);font-size:.66rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--nacht-zacht);
}
.teller__balk{display:flex;gap:4px;flex:none}
.teller__balk i{width:22px;height:3px;background:var(--nacht-lijn);display:block;transition:background .18s ease}
.teller__balk i.aan{background:var(--sein)}

.schouw__vraag{
  font-family:var(--kop);font-weight:800;letter-spacing:-.03em;
  font-size:clamp(1.5rem,3vw,2.3rem);line-height:1.05;
  color:var(--nacht-tekst);margin:0 0 18px;hyphens:manual;overflow-wrap:break-word;
}
.schouw__vraag em{font-style:normal;color:var(--sein)}
.schouw__hulp{margin:0 0 16px;font-size:.93rem;line-height:1.5;color:var(--nacht-zacht);max-width:46ch}

.keuzes{display:grid;gap:2px;background:var(--nacht-lijn);border:1px solid var(--nacht-lijn)}
.keuze{
  appearance:none;font-family:var(--tekst);text-align:left;cursor:pointer;width:100%;
  background:var(--nacht-2);color:var(--nacht-tekst);border:0;border-left:4px solid transparent;
  padding:17px 20px;display:grid;gap:4px;min-height:60px;align-content:center;
  transition:background .14s ease,border-color .14s ease;
}
.keuze b{font-family:var(--kop);font-weight:700;font-size:1.06rem;letter-spacing:-.015em}
.keuze span{font-size:.88rem;line-height:1.45;color:var(--nacht-zacht)}
.keuze:hover{background:var(--nacht-3);border-left-color:var(--sein-diep)}
.keuze[aria-pressed="true"]{border-left-color:var(--sein);background:var(--nacht-3)}
.keuze[aria-pressed="true"] b{color:var(--sein)}
.keuze__terug{
  background:none;border:0;color:var(--nacht-zacht);cursor:pointer;text-align:left;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  padding:14px 2px 0;
}
.keuze__terug:hover{color:var(--sein)}
.schouw__bron{
  margin:16px 0 0;font-family:var(--mono);font-size:.64rem;line-height:1.7;
  color:var(--nacht-zacht);max-width:52ch;
}
.schouw__bron a{color:var(--nacht-zacht);text-decoration:underline}
.schouw__bron a:hover{color:var(--sein)}

.schouw__velden{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr))}
.schouw__velden .vzk__veld input{font-size:1.02rem}

.uitslag{position:relative;z-index:2;background:var(--nacht-3);border-top:2px solid var(--sein)}
.uitslag__in{max-width:var(--breed);margin:0 auto;padding:26px 26px 32px;display:grid;gap:20px}
.uitslag__cijfer{display:grid;gap:4px;align-content:start}
.uitslag__nr{
  font-family:var(--kop);font-weight:800;letter-spacing:-.055em;color:var(--sein);
  font-size:clamp(3.2rem,10vw,8rem);line-height:.82;font-variant-numeric:tabular-nums;
}
.uitslag__wat{
  font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--nacht-zacht);line-height:1.7;
}
.uitslag__regel{
  margin:14px 0 0;padding-top:12px;border-top:1px solid var(--nacht-lijn);
  font-size:.9rem;line-height:1.55;color:var(--nacht-zacht);max-width:28ch;
}
.uitslag__tekst h2{font-size:clamp(1.35rem,2.5vw,1.85rem);line-height:1.08;margin:0 0 12px;color:var(--nacht-tekst)}
.uitslag__tekst p{color:var(--nacht-zacht);margin:0 0 .8em;max-width:58ch;font-size:1rem}
.uitslag__tekst strong{color:var(--nacht-tekst)}
.uitslag .knop{margin-top:18px}
.uitslag a.knop{color:var(--nacht)}
@media (min-width:1000px){
  .uitslag__in{grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:44px;align-items:start;padding:38px 26px 44px}
  
  .uitslag__cijfer{margin-left:-26px}
}
@media (min-width:1360px){.uitslag__cijfer{margin-left:-3.4rem}}

.gevolg{
  list-style:none;padding:0;margin:18px 0 0;display:grid;gap:1px;
  background:var(--nacht-lijn);border:1px solid var(--nacht-lijn);
}
.gevolg li{
  background:var(--nacht-2);padding:14px 18px;display:grid;grid-template-columns:8.5rem 1fr;
  gap:16px;align-items:baseline;font-size:.96rem;color:var(--nacht-zacht);margin:0;
}
.gevolg dfn{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sein-diep);font-style:normal;
}
.gevolg b{color:var(--nacht-tekst);font-weight:700}
@media (max-width:680px){.gevolg li{grid-template-columns:1fr;gap:4px}}

.uitslag .vzk__staaf{margin:16px 0 0;max-width:100%}
.uitslag .vzk__balk{color:var(--nacht-zacht)}

.mens{position:relative;z-index:2;background:var(--nacht-2);border-top:1px solid var(--nacht-lijn)}
.mens__in{
  max-width:var(--breed);margin:0 auto;padding:16px 26px;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
}
.mens img{
  width:54px;height:54px;object-fit:cover;object-position:50% 14%;border-radius:50%;
  border:1px solid var(--nacht-lijn);flex:none;background:var(--nacht-3);
}
.mens p{margin:0;font-size:.94rem;line-height:1.55;color:var(--nacht-zacht);max-width:56ch;flex:1 1 20rem}
.mens b{color:var(--nacht-tekst)}
.mens .bel{white-space:nowrap}

div.herkomst{display:flex;gap:13px;align-items:flex-start}
div.herkomst img{
  width:34px;height:34px;flex:none;border-radius:50%;object-fit:cover;object-position:50% 14%;
  background:var(--dag-2);margin-top:3px;
}

@media (min-width:1080px){
  .zij{float:right;clear:right;width:min(21rem,33%);margin:5px 0 22px 44px}
  .zij--breed{width:min(34rem,46%)}
  .zij--smal{width:min(16rem,26%)}
  .citaat.zij,.notitie.zij{max-width:none}
  .vz-beeld.zij img{aspect-ratio:4/3}
  
  .sectie .wrap::after{content:"";display:block;clear:both}
  .dossierlijst--twee{max-width:none!important;columns:2;column-gap:44px}
  .dossierlijst--twee li{break-inside:avoid}
}

@media (min-width:820px){
  .cijfers--ongelijk{grid-template-columns:1.55fr 1fr 1fr 1fr}
  .cijfers--ongelijk .cijfer:first-child{padding:38px 28px}
  .cijfers--ongelijk .cijfer:first-child .cijfer__getal{font-size:clamp(3rem,6vw,4.6rem)}
  .cijfers--ongelijk .cijfer:first-child .cijfer__bij{font-size:1.02rem;color:var(--nacht-tekst)}
}

@media (min-width:960px){
  .kaart--eerst,.kaart--zwaar{grid-column:span 2}
  .kaart--eerst h3,.kaart--zwaar h3{font-size:1.4rem}
  .kaart--eerst p,.kaart--zwaar p{font-size:1.04rem;color:var(--inkt)}
  .sectie--nacht .kaart--eerst p,.sectie--nacht .kaart--zwaar p{color:var(--nacht-tekst)}
}

.actiebalk{
  position:fixed;left:0;right:0;bottom:0;z-index:45;display:none;gap:10px;align-items:center;
  background:var(--nacht);border-top:1px solid var(--nacht-lijn);
  padding:9px 14px calc(9px + env(safe-area-inset-bottom));
  transform:translateY(118%);transition:transform .2s ease;
}
.actiebalk.aan{transform:none}
.actiebalk a{
  flex:1;display:flex;align-items:center;justify-content:center;min-height:50px;border-radius:var(--r);
  font-family:var(--kop);font-weight:700;font-size:1rem;text-decoration:none;
}
.actiebalk .a1{background:var(--sein);color:var(--nacht)}
.actiebalk .a2{background:transparent;color:var(--nacht-tekst);border:2px solid var(--nacht-lijn);flex:0 0 40%}
.actiebalk a:hover{text-decoration:none}
@media (max-width:860px){.actiebalk{display:flex}body{padding-bottom:74px}}
@media print{.actiebalk{display:none}}

@media (max-width:720px){
  .hero--schouw .hero__raster{padding:28px 26px 32px;gap:20px}
  .hero--schouw h1{font-size:clamp(1.55rem,6.4vw,2rem)}
  .hero--schouw .hero__lead{display:none}
  .schouw__vraag{hyphens:auto;font-size:1.42rem}
  .schouw__plan{opacity:.4}
  .keuze{padding:14px 16px;min-height:56px}
  .uitslag__in{padding:22px 26px 26px}
  .mens__in{padding:14px 26px}
}

:root{--sein-donker:#4A6B08}
.bel{color:var(--sein-donker)}
.sectie--wit .bel,.sectie .bel,.vz-inhoud .bel{color:var(--sein-donker)}
.kop .bel,.sectie--nacht .bel,.voet .bel,.hero .bel,.mens .bel,.uitslag .bel{color:var(--sein)}

.sectie--wit .stappen li::before,.sectie .stappen li::before{background:var(--sein-donker);color:var(--wit)}
.sectie--nacht .stappen li::before{background:var(--sein);color:var(--nacht)}

:focus-visible{
  outline:3px solid var(--inkt);
  outline-offset:2px;
  box-shadow:0 0 0 6px rgba(205,245,70,.92);
}
.sectie--nacht :focus-visible,.hero :focus-visible,.kop :focus-visible,
.voet :focus-visible,.uitslag :focus-visible,.mens :focus-visible,.actiebalk :focus-visible{
  outline-color:var(--nacht);
}

.vzf__veld input:focus-visible,.vzf__veld textarea:focus-visible,.vzk__veld input:focus-visible{
  outline:3px solid var(--sein);outline-offset:2px;box-shadow:none;
}

.hero .etiket,.uitslag .etiket,.mens .etiket{color:var(--nacht-zacht)}
.hero .etiket::before,.uitslag .etiket::before{background:var(--sein)}

.vz-beeld img[style*="aspect-ratio"],.duo__beeld img[style*="aspect-ratio"]{object-fit:cover}
.hero__beeld img{aspect-ratio:4/5;object-position:50% 30%}
@media (max-width:720px){.hero--beeld .hero__beeld img{aspect-ratio:1/1;object-position:50% 26%}}

div.herkomst>p{margin:0}

@media (max-width:860px){
  .voet li{margin:0}
  .voet li a{display:inline-block;padding:11px 0;min-height:44px}
  .voet__slot .bel{padding:9px 0;display:inline-flex;min-height:44px}
}
.voet__kop{
  margin:0 0 14px;font-size:.64rem;font-family:var(--mono);letter-spacing:.2em;
  text-transform:uppercase;color:var(--sein);font-weight:700;
}

.etiket{hyphens:manual;-webkit-hyphens:manual}

.uitslag--geld .uitslag__nr{font-size:clamp(2.4rem,5.4vw,4.4rem);letter-spacing:-.04em;white-space:nowrap}
@media (min-width:1000px){.uitslag--geld .uitslag__in{grid-template-columns:minmax(0,17rem) minmax(0,1fr)}}

.antwoorden{
  list-style:none;padding:0;margin:24px 0 0;display:grid;gap:1px;
  background:var(--nacht-lijn);border:1px solid var(--nacht-lijn);max-width:24rem;
}
.antwoorden li{
  background:var(--nacht-2);padding:11px 16px;margin:0;display:grid;
  grid-template-columns:7.6rem 1fr;gap:12px;align-items:baseline;
  font-size:.92rem;color:var(--nacht-tekst);
}
.antwoorden dfn,.gevolg dfn{hyphens:manual;-webkit-hyphens:manual}
.antwoorden dfn{
  font-family:var(--mono);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--nacht-zacht);font-style:normal;
}
@media (max-width:960px){.antwoorden{display:none}}

@media (max-width:720px){
  .schouw__bron{font-size:.6rem;line-height:1.65}
}

@media (min-width:860px){
  .duo{grid-template-columns:1.32fr .68fr}
  
  .duo--omgekeerd{grid-template-columns:.68fr 1.32fr}
  .beeldrij{max-width:840px}
  .stappen{max-width:none;display:grid;grid-template-columns:1fr 1fr;gap:20px 44px}
  .stappen li{max-width:52ch}
}
@media (min-width:1080px){
  
  .vz-beeld:not(.zij){max-width:min(620px,62%)}
  .beeldrij .vz-beeld{max-width:none}
}
.sectie{padding:40px 0}
@media (max-width:720px){.sectie{padding:32px 0}}

@media (min-width:1380px){
  :root{--breed:1320px}
}

:root{--smal:61ch}

@media (min-width:1180px){
  .sectie .sectiekop{
    float:left;clear:left;width:19rem;max-width:none;margin:0 0 18px;
    position:sticky;top:82px;
  }
  .sectie .sectiekop h2{font-size:clamp(1.5rem,2.05vw,2.05rem);line-height:1.06}
  .sectie .sectiekop p{font-size:.98rem}
  .sectie .wrap:has(> .sectiekop) > *:not(.sectiekop){margin-left:22rem}
  
  .sectie .wrap:has(> .sectiekop) > .zij{margin-left:0;width:min(18rem,30%)}
  .sectie .wrap:has(> .sectiekop) > .zij--breed{width:min(30rem,44%)}
  .sectie .wrap:has(> .sectiekop) > .zij--smal{width:min(14rem,24%)}
}

@media (min-width:1180px) and (max-width:1379px){
  .sectie .sectiekop{width:15rem}
  .sectie .wrap:has(> .sectiekop) > *:not(.sectiekop){margin-left:18rem}
  .sectie .wrap:has(> .sectiekop) > .zij{width:min(16rem,28%)}
  .sectie .wrap:has(> .sectiekop) > .zij--breed{width:min(26rem,42%)}
}

.sectie--wit + .sectie--wit,
.sectie--nacht + .sectie--nacht{padding-top:0}

@media (min-width:900px){
  .dossierlijst--twee,
  .dossierlijst:has(li:nth-child(6)){
    display:block;columns:2;column-gap:44px;max-width:none!important;
  }
  .dossierlijst--twee li,
  .dossierlijst:has(li:nth-child(6)) li{break-inside:avoid;margin-bottom:12px}
}

@media (min-width:1180px){
  .sectie .wrap:has(> .kernvraag) > .kernvraag{
    float:left;clear:left;width:16rem;margin:0 0 18px;
    font-size:clamp(1.3rem,1.85vw,1.7rem);line-height:1.08;
    text-wrap:pretty;hyphens:manual;-webkit-hyphens:manual;
  }
  .sectie .wrap:has(> .kernvraag) > .kernantwoord,
  .sectie .wrap:has(> .kernvraag) > .hero__actie{margin-left:19rem}
  .sectie .wrap:has(> .kernvraag) > .vz-inhoud{clear:left}
}

.bronnen{overflow:hidden}