/*
Theme Name: Mijn Beveiligingadvies
Theme URI: https://mijnbeveiligingadvies.nl/
Author: Cloudzicht
Description: Eigen thema voor mijnbeveiligingadvies.nl. Eén letterfamilie, drie kleuren, harde vlakken. Het gereedschap is de pagina.
Version: 1.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.0
License: GPLv2 or later
Text Domain: mba
*/

:root{
  --inkt:#0C1B2A;
  --inkt-zacht:#4A5A68;
  --papier:#FFFFFF;
  --signaal:#FFD400;
  --alarm:#E4372B;
  --rust:#1E7F52;
  --vlak:#F2F4F6;
  --lijn:#0C1B2A;
  --schaduw:6px 6px 0 0 var(--inkt);
  --schaduw-klein:4px 4px 0 0 var(--inkt);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--papier);
  color:var(--inkt);
  font-family:Archivo,"Helvetica Neue",Arial,system-ui,sans-serif;
  font-size:17px;
  font-weight:400;
  line-height:1.6;
  letter-spacing:.1px;
}
img{max-width:100%;display:block}
a{color:var(--inkt)}

/* ---------- de leeslijn (scaleX, herberekent geen layout) ---------- */
#mba-leeslijn{
  position:fixed;top:0;left:0;right:0;height:4px;z-index:99;
  background:var(--signaal);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .12s linear;
}

/* ---------- de balk die aflost ---------- */
.mba-kop{
  position:sticky;top:0;z-index:60;background:var(--papier);
  border-bottom:1px solid var(--lijn);
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 20px;gap:14px;
}
.mba-merk{
  font-weight:800;font-size:17px;letter-spacing:-.3px;text-decoration:none;
  display:flex;align-items:center;gap:9px;
}
.mba-merk b{
  background:var(--inkt);color:var(--signaal);
  width:30px;height:30px;display:grid;place-items:center;font-size:15px;
}
.mba-kop .mba-tel{
  font-weight:800;font-size:15px;text-decoration:none;
  border:1px solid var(--lijn);padding:8px 14px;background:var(--signaal);
  box-shadow:var(--schaduw-klein);
  transition:transform .12s ease,box-shadow .12s ease;
}
.mba-kop .mba-tel:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 0 var(--inkt)}

/* ---------- typografie: één ladder, één sprong ---------- */
.bovenschrift{
  font-size:13px;font-weight:800;text-transform:uppercase;
  letter-spacing:.12em;color:var(--inkt-zacht);margin:0 0 14px;
}
h1{
  font-size:clamp(38px,8.4vw,86px);
  font-weight:800;line-height:.9;letter-spacing:-.022em;
  margin:0 0 18px;
}
h2{
  font-size:clamp(28px,4.6vw,52px);
  font-weight:800;line-height:.95;letter-spacing:-.022em;
  margin:0 0 16px;
}
h3{font-size:20px;font-weight:800;line-height:1.25;letter-spacing:-.01em;margin:0 0 8px}
p{margin:0 0 16px;max-width:64ch}
.groot{font-size:19px;font-weight:300;line-height:1.55}

.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
section{padding:64px 0;border-bottom:1px solid var(--lijn)}
section.geen-lijn{border-bottom:0}

/* ---------- de hero: het gereedschap staat bovenaan ---------- */
.hero{padding:44px 0 56px;border-bottom:1px solid var(--lijn)}
.hero .schuin{
  display:inline-block;background:var(--signaal);
  padding:0 .18em;box-decoration-break:clone;-webkit-box-decoration-break:clone;
}

/* ---------- het gereedschap ---------- */
.gereedschap{
  border:1px solid var(--lijn);background:var(--papier);
  box-shadow:var(--schaduw);margin-top:28px;
}
.gs-stap{display:none;padding:24px}
.gs-stap.aan{display:block}
.gs-balk{
  display:flex;border-bottom:1px solid var(--lijn);
  font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;
}
.gs-balk span{
  flex:1;padding:11px 8px;text-align:center;color:var(--inkt-zacht);
  border-right:1px solid var(--lijn);background:var(--vlak);
}
.gs-balk span:last-child{border-right:0}
.gs-balk span.nu{background:var(--inkt);color:var(--signaal)}
.gs-balk span.klaar{background:var(--signaal);color:var(--inkt)}

.gs-vraag{font-size:clamp(22px,3.4vw,32px);font-weight:800;line-height:1.05;letter-spacing:-.02em;margin:0 0 6px}
.gs-hulp{color:var(--inkt-zacht);font-size:14.5px;margin:0 0 18px}

/* keuzeknoppen A of B */
.gs-keuze{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.gs-keuze button{
  font:inherit;font-weight:800;font-size:17px;text-align:left;cursor:pointer;
  background:var(--papier);border:1px solid var(--lijn);
  padding:16px;box-shadow:var(--schaduw-klein);
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease;
}
.gs-keuze button small{display:block;font-weight:400;font-size:13.5px;color:var(--inkt-zacht);margin-top:5px;line-height:1.45}
.gs-keuze button:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 0 var(--inkt)}
.gs-keuze button.gekozen{background:var(--signaal)}
.gs-keuze button.gekozen small{color:var(--inkt)}

/* adresveld */
.gs-adres{position:relative}
.gs-adres input{
  width:100%;font:inherit;font-size:19px;font-weight:500;
  padding:16px 14px;border:1px solid var(--lijn);background:var(--vlak);
}
.gs-adres input:focus{outline:3px solid var(--signaal);outline-offset:-1px;background:var(--papier)}
.gs-tips{
  position:absolute;left:0;right:0;top:100%;z-index:20;
  background:var(--papier);border:1px solid var(--lijn);border-top:0;
  max-height:250px;overflow:auto;display:none;
}
.gs-tips.aan{display:block}
.gs-tips button{
  display:block;width:100%;text-align:left;font:inherit;font-size:15px;
  padding:11px 14px;background:none;border:0;border-bottom:1px solid #E3E7EA;cursor:pointer;
}
.gs-tips button:hover{background:var(--signaal)}

.knop{
  display:inline-block;font:inherit;font-weight:800;font-size:17px;cursor:pointer;
  background:var(--signaal);color:var(--inkt);border:1px solid var(--lijn);
  padding:15px 26px;box-shadow:var(--schaduw-klein);text-decoration:none;
  transition:transform .12s ease,box-shadow .12s ease;
}
.knop:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 0 var(--inkt)}
.knop.leeg{background:var(--papier)}
.knop[disabled]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:var(--schaduw-klein)}
.gs-terug{
  background:none;border:0;font:inherit;font-size:14px;font-weight:700;cursor:pointer;
  color:var(--inkt-zacht);padding:10px 0;text-decoration:underline;
}

/* de uitkomst: foto naast cijfers */
.uitkomst{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0}
.uitkomst>div{padding:24px}
.uitkomst>div:first-child{border-right:1px solid var(--lijn)}
.dak{border:1px solid var(--lijn);background:var(--vlak);aspect-ratio:62/44;overflow:hidden;position:relative}
.dak img{width:100%;height:100%;object-fit:cover}
.dak .laden{position:absolute;inset:0;display:grid;place-items:center;font-size:13px;color:var(--inkt-zacht)}
.dak-bron{font-size:11.5px;color:var(--inkt-zacht);margin:7px 0 0}

.score{display:flex;align-items:baseline;gap:12px;margin:0 0 4px}
.score b{font-size:clamp(46px,9vw,74px);font-weight:800;line-height:.85;letter-spacing:-.03em}
.score span{font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:.1em}
.meter{height:14px;border:1px solid var(--lijn);background:var(--vlak);margin:12px 0 6px}
.meter i{display:block;height:100%;background:var(--inkt);width:0;transition:width .8s ease}

table.cijfers{width:100%;border-collapse:collapse;font-size:14.5px;margin-top:14px}
table.cijfers th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--inkt-zacht);font-weight:800;padding:0 0 7px;border-bottom:1px solid var(--lijn)}
table.cijfers td{padding:9px 0;border-bottom:1px solid #E3E7EA}
table.cijfers td:nth-child(2),table.cijfers td:nth-child(3){text-align:right;font-weight:800;white-space:nowrap}
.op{color:var(--alarm);font-weight:800}
.neer{color:var(--rust);font-weight:800}
.bron{font-size:11.5px;color:var(--inkt-zacht);margin-top:12px}

/* het advies */
.advies-lijst{list-style:none;padding:0;margin:0 0 18px}
.advies-lijst li{
  border:1px solid var(--lijn);padding:15px;margin-bottom:12px;
  box-shadow:var(--schaduw-klein);background:var(--papier);
}
.advies-lijst li b{display:block;font-size:17px;margin-bottom:4px}
.advies-lijst li span{font-size:14.5px;color:var(--inkt-zacht);line-height:1.5}
.prijsband{
  border:1px solid var(--lijn);background:var(--inkt);color:var(--papier);
  padding:20px;margin-bottom:18px;
}
.prijsband b{display:block;font-size:clamp(30px,5.6vw,44px);font-weight:800;line-height:1;letter-spacing:-.02em;color:var(--signaal)}
.prijsband span{font-size:13.5px;color:#B9C6D2;display:block;margin-top:7px}

/* het formulier */
.formulier{border:1px solid var(--lijn);background:var(--vlak);padding:22px;box-shadow:var(--schaduw)}
.formulier .rij{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.formulier label{display:block;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.09em;margin:0 0 5px}
.formulier input{width:100%;font:inherit;font-size:16px;padding:13px;border:1px solid var(--lijn);background:var(--papier);margin-bottom:12px}
.formulier input:focus{outline:3px solid var(--signaal);outline-offset:-1px}
.formulier .klein{font-size:12.5px;color:var(--inkt-zacht);margin:8px 0 0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.gelukt{border:1px solid var(--lijn);background:var(--signaal);padding:22px;box-shadow:var(--schaduw)}

/* ---------- de vijf knopen als poster ---------- */
.knopen{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0;border:1px solid var(--lijn);border-right:0;border-bottom:0}
.knopen article{border-right:1px solid var(--lijn);border-bottom:1px solid var(--lijn);padding:22px}
.knopen article b{display:block;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--inkt-zacht);margin-bottom:10px}
.knopen article p{font-size:15px;margin:0;max-width:none}
.knopen article .vs{font-size:clamp(22px,2.6vw,28px);font-weight:800;line-height:1.05;letter-spacing:-.02em;margin:0 0 10px}

.tweeluik{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px;align-items:start}
.feit{border-left:4px solid var(--signaal);padding-left:16px;margin:0 0 22px}
.feit b{display:block;font-size:clamp(24px,3.4vw,34px);font-weight:800;line-height:1;letter-spacing:-.02em}
.feit span{font-size:14.5px;color:var(--inkt-zacht)}

.voet{background:var(--inkt);color:#C6D2DD;padding:44px 0;font-size:14.5px}
.voet a{color:var(--signaal)}
.voet h3{color:var(--papier)}

@media(max-width:860px){
  .uitkomst{grid-template-columns:1fr}
  .uitkomst>div:first-child{border-right:0;border-bottom:1px solid var(--lijn)}
  .tweeluik{grid-template-columns:1fr;gap:28px}
  .formulier .rij{grid-template-columns:1fr}
  section{padding:44px 0}
  .gs-keuze{grid-template-columns:1fr}
  body{font-size:16.5px}
}
@media(max-width:420px){
  .gs-stap{padding:18px}
  .uitkomst>div{padding:18px}
}
/* Op 320px duwden de kopbalk en de stappenbalk de pagina 13px breder. */
@media(max-width:380px){
  .mba-kop{padding:11px 13px;gap:8px}
  .mba-merk{font-size:15px;gap:7px}
  .mba-merk b{width:26px;height:26px;font-size:13px}
  /* Op 320px past de knop er niet naast. De doorloop staat er direct onder,
     dus er valt niets weg te klikken. */
  .mba-kop .mba-tel{display:none}
  .gs-balk{font-size:10px}
  .gs-balk span{padding:9px 3px;letter-spacing:.03em}
  h1{font-size:clamp(32px,10vw,40px)}
}

/* =========================================================
   AANKLEDING — hero met beeld, bewijsstrook, voorbeeldkaart,
   stappen, beeldstrook en de installatiepartner
   ========================================================= */

.hero-net{display:grid;grid-template-columns:1.12fr .88fr;gap:44px;align-items:start;margin-bottom:8px}
.hero-beeld{margin:0;border:1px solid var(--lijn);box-shadow:var(--schaduw);background:var(--vlak)}
.hero-beeld img{width:100%;height:auto;display:block}
.hero-beeld figcaption{
  font-size:13px;color:var(--inkt-zacht);padding:11px 14px;
  border-top:1px solid var(--lijn);background:var(--papier);
}

.vinkjes{list-style:none;margin:22px 0 0;padding:0}
.vinkjes li{
  position:relative;padding:0 0 0 32px;margin-bottom:11px;font-size:15.5px;line-height:1.45;
}
.vinkjes li::before{
  content:"";position:absolute;left:0;top:1px;width:20px;height:20px;
  background:var(--signaal);border:1px solid var(--lijn);
}
.vinkjes li::after{
  content:"";position:absolute;left:6px;top:6px;width:8px;height:4px;
  border-left:2px solid var(--inkt);border-bottom:2px solid var(--inkt);
  transform:rotate(-45deg);
}

/* ---- bewijsstrook ---- */
.bewijs{background:var(--inkt);color:#D7E0E8;border-bottom:0}
.bewijs h2{color:#fff}
.tellers{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:0;margin-top:32px;border:1px solid #24405A;border-right:0;border-bottom:0}
.teller{border-right:1px solid #24405A;border-bottom:1px solid #24405A;padding:22px}
.teller b{
  display:block;font-size:clamp(38px,5.6vw,54px);font-weight:800;line-height:.9;
  letter-spacing:-.03em;color:var(--signaal);margin-bottom:10px;font-variant-numeric:tabular-nums;
}
.teller span{display:block;font-size:14.5px;line-height:1.45;color:#EAF1F7}
.teller span i{font-style:normal;font-weight:700}
.teller em{display:block;font-style:normal;font-size:12px;color:#8FA6BA;margin-top:9px}
.bewijs-uitleg{font-size:13px;color:#8FA6BA;margin:20px 0 0;max-width:none}

/* ---- voorbeeldkaart ---- */
.voorbeeldkaart{position:relative;border:1px solid var(--lijn);box-shadow:var(--schaduw);background:var(--papier)}
.vb-stempel{
  position:absolute;top:-15px;right:16px;z-index:3;
  background:var(--alarm);color:#fff;font-size:12px;font-weight:800;
  text-transform:uppercase;letter-spacing:.14em;padding:8px 15px;
  border:1px solid var(--lijn);transform:rotate(-2.5deg);
}
.vb-net{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.vb-links{padding:26px;border-right:1px solid var(--lijn)}
.vb-rechts{padding:26px;background:var(--vlak)}
.vb-erbij{border:1px solid var(--lijn);background:var(--papier);padding:16px}
.vb-erbij b{display:block;font-size:14px;margin-bottom:9px}
.vb-erbij ul{margin:0;padding-left:19px;font-size:14.5px;color:var(--inkt-zacht);line-height:1.65}

/* ---- knoop met beeld ---- */
.knoop-beeld{padding:0 !important;display:flex;flex-direction:column}
.knoop-beeld img{width:100%;height:100%;object-fit:cover;flex:1 1 auto;min-height:170px}
.knoop-beeld p{
  font-size:13.5px !important;color:var(--inkt-zacht);padding:14px 18px;margin:0 !important;
  border-top:1px solid var(--lijn);background:var(--vlak);
}

/* ---- stappen ---- */
.stappen{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:0;border:1px solid var(--lijn);border-right:0;border-bottom:0;margin-bottom:34px}
.stappen article{border-right:1px solid var(--lijn);border-bottom:1px solid var(--lijn);padding:24px;position:relative}
.stappen .nr{
  display:block;font-size:40px;font-weight:800;line-height:1;letter-spacing:-.04em;
  color:var(--signaal);-webkit-text-stroke:1px var(--inkt);margin-bottom:12px;
}
.stappen p{font-size:14.5px;margin:0;color:var(--inkt-zacht)}

/* ---- beeldstrook ---- */
.strook-beeld{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:0;border:1px solid var(--lijn);border-right:0}
.strook-beeld img{width:100%;aspect-ratio:4/3;object-fit:cover;border-right:1px solid var(--lijn);display:block}

/* ---- partner ---- */
.partner-net{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:start;margin-top:26px}
.partner-beeld figure{margin:0 0 18px;border:1px solid var(--lijn);box-shadow:var(--schaduw-klein);background:var(--papier)}
.partner-beeld img{width:100%;height:auto;display:block}
.partner-beeld figcaption{font-size:13px;color:var(--inkt-zacht);padding:10px 13px;border-top:1px solid var(--lijn)}
.keurmerken{display:flex;gap:18px;flex-wrap:wrap;margin-top:26px}
.keurmerken figure{margin:0;border:1px solid var(--lijn);padding:13px;background:var(--papier);box-shadow:var(--schaduw-klein);max-width:236px}
.keurmerken img{width:100%;height:auto;display:block}
.keurmerken figcaption{font-size:12px;font-weight:700;color:var(--inkt-zacht);margin-top:9px;line-height:1.35}

@media(max-width:960px){
  .hero-net,.partner-net{grid-template-columns:1fr;gap:26px}
  .vb-net{grid-template-columns:1fr}
  .vb-links{border-right:0;border-bottom:1px solid var(--lijn)}
}
@media(max-width:860px){
  .hero-beeld img{max-height:168px;object-fit:cover}
  .strook-beeld img{border-right:0;border-bottom:1px solid var(--lijn)}
}
@media(max-width:420px){
  .vb-links,.vb-rechts,.teller,.stappen article{padding:18px}
  .vb-stempel{right:10px;font-size:11px;padding:7px 12px}
}

/* =========================================================
   HET SLOT — wat er pas verschijnt als iemand zich meldt
   ========================================================= */
.slot{border-top:1px solid var(--lijn);background:var(--vlak);padding:26px}
.slot-net{display:grid;grid-template-columns:1.05fr .95fr;gap:30px;align-items:start}
.slot-kop{font-size:clamp(21px,2.8vw,28px);font-weight:800;line-height:1.05;letter-spacing:-.02em;margin:0 0 8px}
.slot-lijst{list-style:none;margin:18px 0 0;padding:0}
.slot-lijst li{
  position:relative;border:1px solid var(--lijn);background:var(--papier);
  padding:12px 14px 12px 15px;margin-bottom:9px;font-size:14.5px;line-height:1.45;
  color:var(--inkt-zacht);
}
.slot-lijst li span{
  display:inline-block;background:var(--inkt);color:var(--signaal);
  font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;
  padding:3px 8px;margin-right:9px;vertical-align:1px;
}
.slot .formulier{position:relative}
.slot-hangslot{
  position:absolute;top:-16px;right:16px;background:var(--signaal);
  border:1px solid var(--lijn);width:44px;height:44px;display:grid;place-items:center;
  color:var(--inkt);
}

/* ---- wat er na het ontgrendelen komt ---- */
.ontgrendeld{border-top:1px solid var(--lijn)}
.open-kop{
  background:var(--signaal);border-bottom:1px solid var(--lijn);
  padding:14px 24px;font-size:15.5px;
}
.open-kop b{font-weight:800}
.open-net{display:grid;grid-template-columns:1fr 1fr;gap:0}
.open-vak{padding:22px 24px;border-bottom:1px solid var(--lijn);border-right:1px solid var(--lijn)}
.open-net .open-vak:nth-child(2n){border-right:0}
.open-vak.vol{border-right:0}
.laadtekst{font-size:14.5px;color:var(--inkt-zacht)}
.groot-getal{
  display:block;font-size:clamp(30px,4.6vw,42px);font-weight:800;line-height:1;
  letter-spacing:-.03em;margin-bottom:7px;font-variant-numeric:tabular-nums;
}
.open-vak .regel{font-size:15.5px;font-weight:700;line-height:1.35}
.open-vak .fijn{font-size:12px;color:var(--inkt-zacht);margin-top:9px;line-height:1.45}
dl.paren{margin:6px 0 0;display:grid;grid-template-columns:1fr auto;gap:0}
dl.paren dt{font-size:14px;color:var(--inkt-zacht);padding:8px 12px 8px 0;border-bottom:1px solid #E3E7EA}
dl.paren dd{font-size:14.5px;font-weight:800;margin:0;padding:8px 0;text-align:right;border-bottom:1px solid #E3E7EA;white-space:nowrap}
table.cijfers td.nul{color:#9AA7B2}
table.cijfers td.slot-regel{border-bottom:0;padding-top:11px;font-weight:800;font-size:13.5px}
ul.nieuwslijst{list-style:none;margin:0;padding:0}
ul.nieuwslijst li{border-bottom:1px solid #E3E7EA;padding:11px 0}
ul.nieuwslijst li:last-child{border-bottom:0}
ul.nieuwslijst a{font-size:15.5px;font-weight:700;line-height:1.35;display:block;text-decoration:none;border-bottom:2px solid var(--signaal);display:inline}
ul.nieuwslijst a:hover{background:var(--signaal)}
ul.nieuwslijst span{display:block;font-size:12px;color:var(--inkt-zacht);margin-top:4px}

/* ---- warm maken ---- */
.warm{background:var(--inkt);color:#D7E0E8;padding:28px 24px}
.warm-tekst h3{color:#fff;font-size:clamp(22px,3vw,30px);margin-bottom:10px}
.warm-tekst p{color:#C3D2DF;font-size:15.5px;max-width:66ch}
.warm-keuze{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-top:22px}
.warmknop{
  font:inherit;text-align:left;cursor:pointer;background:var(--papier);color:var(--inkt);
  border:1px solid var(--lijn);padding:0;overflow:hidden;
  box-shadow:5px 5px 0 0 var(--signaal);
  transition:transform .12s ease,box-shadow .12s ease;
}
.warmknop img{width:100%;aspect-ratio:16/10;object-fit:cover;border-bottom:1px solid var(--lijn)}
.warmknop b{display:block;font-size:17px;font-weight:800;padding:13px 15px 0}
.warmknop small{display:block;font-size:13.5px;color:var(--inkt-zacht);padding:5px 15px 15px;line-height:1.45}
.warmknop:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 0 var(--signaal)}
.warmknop.gekozen{box-shadow:5px 5px 0 0 var(--papier);outline:3px solid var(--signaal);outline-offset:-3px}
.warm-melding{color:var(--signaal);font-weight:700;font-size:15px;margin:16px 0 0;min-height:1.2em}

@media(max-width:860px){
  .slot-net,.open-net{grid-template-columns:1fr}
  .open-vak{border-right:0}
}
@media(max-width:420px){
  .slot{padding:18px}
  .open-vak{padding:18px}
  .warm{padding:20px 18px}
}

/* =========================================================
   KIJK IN HET RAPPORT — echte schermafdrukken als etalage
   ========================================================= */
.rubriek{
  font-size:15px;font-weight:700;margin:0 0 16px;max-width:none;
  display:flex;align-items:center;gap:11px;flex-wrap:wrap;
}
.rubriek span{
  background:var(--signaal);border:1px solid var(--lijn);
  font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.11em;
  padding:5px 10px;
}
.rubriek.slot-rubriek{margin-top:44px}
.rubriek.slot-rubriek span{background:var(--inkt);color:var(--signaal)}

.rapport-groot{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start}
.rapport-groot figure{margin:0;border:1px solid var(--lijn);box-shadow:var(--schaduw);background:var(--papier)}
.rapport-groot img{width:100%;height:auto;display:block;border-bottom:1px solid var(--lijn)}
.rapport-groot figcaption{font-size:13.5px;color:var(--inkt-zacht);padding:13px 15px;line-height:1.45}

.rapport-klein{display:grid;grid-template-columns:repeat(auto-fit,minmax(216px,1fr));gap:18px;align-items:start}
.rapport-klein figure{
  margin:0;border:1px solid var(--lijn);background:var(--papier);
  box-shadow:var(--schaduw-klein);position:relative;overflow:hidden;
}
.rapport-klein img{width:100%;height:auto;display:block;border-bottom:1px solid var(--lijn)}
.rapport-klein figcaption{font-size:12.5px;color:var(--inkt-zacht);padding:11px 13px;line-height:1.4}
.rapport-klein figure::after{
  content:"";position:absolute;top:0;left:0;right:0;height:5px;background:var(--inkt);
}

@media(max-width:860px){
  .rapport-groot{grid-template-columns:1fr;gap:18px}
}

/* =========================================================
   HET MANIFEST — waarom de site zo heet
   ========================================================= */
#persoonlijk{background:var(--vlak)}
.manifest{
  margin:0 0 26px;padding:0;
  font-size:clamp(28px,5.4vw,58px);font-weight:800;line-height:1;letter-spacing:-.025em;
  max-width:20ch;
}
.manifest .schuin{
  display:inline-block;background:var(--signaal);
  padding:0 .16em;box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
.manifest-tekst{columns:2;column-gap:44px}
.manifest-tekst p{font-size:16.5px;line-height:1.6;max-width:none;break-inside:avoid}
.manifest-tekst p:last-child{margin-bottom:0}
@media(max-width:860px){
  .manifest-tekst{columns:1}
}

/* =========================================================
   WAT KOST HET — de prijsladder
   ========================================================= */
.prijsnet{display:grid;grid-template-columns:repeat(auto-fit,minmax(214px,1fr));gap:0;border:1px solid var(--lijn);border-right:0;border-bottom:0}
.prijsnet article{border-right:1px solid var(--lijn);border-bottom:1px solid var(--lijn);padding:22px;position:relative}
.prijsnet .aantal{
  display:grid;place-items:center;width:34px;height:34px;margin-bottom:14px;
  background:var(--inkt);color:var(--signaal);font-weight:800;font-size:17px;
}
.prijsnet b{
  display:block;font-size:clamp(28px,4vw,38px);font-weight:800;line-height:1;
  letter-spacing:-.03em;margin-bottom:10px;
}
.prijsnet p{font-size:14.5px;color:var(--inkt-zacht);margin:0}
.prijsvoet{display:grid;grid-template-columns:1fr 1fr;gap:34px;margin-top:26px}
.prijsvoet p{font-size:15px;margin:0;max-width:none}

/* =========================================================
   HOE WILT U HET ADVIES
   ========================================================= */
.kanalen{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:0;border:1px solid var(--lijn);border-right:0;border-bottom:0}
.kanalen article{border-right:1px solid var(--lijn);border-bottom:1px solid var(--lijn);padding:22px}
.kanalen .kanaal-nr{
  display:inline-block;background:var(--signaal);border:1px solid var(--lijn);
  font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.11em;
  padding:4px 9px;margin-bottom:13px;
}
.kanalen h3{margin-bottom:7px}
.kanalen p{font-size:14.5px;color:var(--inkt-zacht);margin:0}
.kanalen .kanaal-uit{background:var(--inkt)}
.kanalen .kanaal-uit h3{color:#fff}
.kanalen .kanaal-uit p{color:#B9C6D2}

@media(max-width:860px){
  .prijsvoet{grid-template-columns:1fr;gap:16px}
}

/* ---- de merkenrij ---- */
.merkenrij{
  display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--lijn);border-right:0;border-bottom:0;
}
.merkenrij span{
  flex:1 1 auto;min-width:150px;text-align:center;
  border-right:1px solid var(--lijn);border-bottom:1px solid var(--lijn);
  padding:20px 12px;font-weight:800;font-size:clamp(16px,2vw,21px);letter-spacing:-.015em;
  transition:background .12s ease;
}
.merkenrij span:hover{background:var(--signaal)}
.merken-voet{font-size:15px;color:var(--inkt-zacht);margin:22px 0 0;max-width:74ch}