/*
Theme Name: Goed Wifi Bereik
Theme URI: https://goedwifibereik.nl
Author: GoedWifiBereik.nl
Description: Eigen thema voor goedwifibereik.nl. Opzet: de dekkingskaart - meten, tonen, oplossen.
Version: 1.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
License: GPLv2 or later
Text Domain: goedwifibereik
*/

/* ============================================================
   Basis. Alles hier is met opzet plat en scherp: dit is een
   meetrapport, geen app. Zwevende kaartjes horen daar niet bij.
   ============================================================ */

:root{
  --inkt:#101a17;
  --inkt-zacht:#2c3a35;
  --grijs:#5b6663;
  --papier:#f8f5ee;
  --papier-diep:#efeade;
  --wit:#fff;
  --lijn:#dcd7cd;
  --lijn-hard:#b9b3a7;
  --groen:#14684a;
  --groen-diep:#0b402d;
  --groen-licht:#e4efe9;
  --amber:#b57c17;
  --rood:#a33b2a;
  --rond:12px;
  --rond-klein:8px;
  --breed:1180px;
  --smal:760px;
  --kop:"Familjen Grotesk","Segoe UI",system-ui,-apple-system,sans-serif;
  --tekst:"Figtree","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --meet:"Familjen Grotesk","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:"DM Mono",ui-monospace,"Cascadia Mono",Consolas,"Courier New",monospace;
  --hand:"Architects Daughter","Segoe Script",cursive;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--papier);color:var(--inkt);
  font-family:var(--tekst);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--groen);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--groen-diep)}
h1,h2,h3,h4{font-family:var(--kop);font-weight:700;letter-spacing:-.025em;line-height:1.08;margin:0 0 .5em}
h1{font-size:clamp(34px,6vw,62px)}
h2{font-size:clamp(27px,4vw,44px)}
h3{font-size:clamp(19px,2.2vw,24px);letter-spacing:-.015em}
body{font-size:17.5px}
p{margin:0 0 1.1em}
ul,ol{margin:0 0 1.2em;padding-left:1.1em}
li{margin-bottom:.45em}
strong{font-weight:650}
hr{border:0;border-top:1px solid var(--lijn);margin:2.5rem 0}
::selection{background:var(--groen);color:#fff}

.wrap{max-width:var(--breed);margin:0 auto;padding:0 22px}
.smal{max-width:var(--smal)}
.sec{padding:72px 0}
.sec-krap{padding:46px 0}
.sec-inkt{background:var(--inkt);color:#e9ebe9}
.sec-inkt h2,.sec-inkt h3{color:#fff}
.sec-inkt a{color:#8fd3b6}
.sec-diep{background:var(--papier-diep)}
.sec-wit{background:var(--wit)}
.vzr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- meetlabel: het typografische handelsmerk van deze site ---- */
.meet{font-family:var(--meet);font-weight:600;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--grijs)}
.sec-inkt .meet{color:#8a9a94}
.meetkop{display:flex;align-items:center;gap:14px;margin-bottom:26px}
.meetkop::after{content:"";flex:1;height:1px;background:var(--lijn)}
.sec-inkt .meetkop::after{background:#2e3d38}

/* ---- knoppen ---- */
.knop{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--kop);font-weight:600;font-size:17px;line-height:1;
  padding:16px 28px;border:1px solid var(--groen);border-radius:var(--rond-klein);
  background:var(--groen);color:#fff!important;text-decoration:none;cursor:pointer;
  transition:background .15s,border-color .15s;
}
.knop:hover{background:var(--groen-diep);border-color:var(--groen-diep);color:#fff!important}
.knop-om{background:transparent;color:var(--inkt)!important;border-color:var(--lijn-hard)}
.knop-om:hover{background:transparent;border-color:var(--inkt);color:var(--inkt)!important}
.sec-inkt .knop-om,.hero .knop-om,.slot .knop-om{color:#fff!important;border-color:#4a5a54}
.sec-inkt .knop-om:hover,.hero .knop-om:hover,.slot .knop-om:hover{border-color:#fff;color:#fff!important}
.knop-groot{font-size:18px;padding:18px 30px;width:100%}
.stilelink{font-family:var(--kop);font-weight:600;text-decoration:none;border-bottom:1px solid var(--lijn-hard);padding-bottom:2px}

/* ============================================================
   Kop van de site
   ============================================================ */
.kopbalk{background:var(--wit);border-bottom:1px solid var(--lijn);position:sticky;top:0;z-index:60}
.admin-bar .kopbalk{top:32px}
.kopbalk-in{display:flex;align-items:center;gap:26px;min-height:72px}
.merk{display:flex;align-items:baseline;gap:9px;text-decoration:none;color:var(--inkt);font-family:var(--kop);font-weight:700;font-size:20px;letter-spacing:-.03em;flex-shrink:0}
.merk span{color:var(--groen)}
.merk small{font-family:var(--meet);font-size:10px;letter-spacing:.12em;color:var(--grijs);text-transform:uppercase;font-weight:400}
.hoofdmenu{display:flex;gap:22px;margin-left:auto;align-items:center}
.hoofdmenu a{font-family:var(--kop);font-weight:500;font-size:15.5px;color:var(--inkt-zacht);text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
.hoofdmenu a:hover,.hoofdmenu a[aria-current]{color:var(--inkt);border-bottom-color:var(--groen)}
.kop-tel{font-family:var(--kop);font-weight:600;font-size:15.5px;color:var(--inkt);text-decoration:none;white-space:nowrap}
.menuknop{display:none;margin-left:auto;background:none;border:1px solid var(--lijn-hard);border-radius:var(--rond);padding:9px 13px;font-family:var(--kop);font-weight:600;font-size:15px;cursor:pointer;color:var(--inkt)}
.mobielmenu{display:none;border-top:1px solid var(--lijn);background:var(--wit);padding:10px 0 18px}
.mobielmenu.open{display:block}
.mobielmenu a{display:block;padding:12px 22px;font-family:var(--kop);font-weight:500;color:var(--inkt);text-decoration:none;border-bottom:1px solid var(--papier-diep)}

/* ============================================================
   Hero
   ============================================================ */
.hero{position:relative;background:var(--inkt);color:#eef1ef;overflow:hidden}
.hero-in{position:relative;z-index:2;padding:66px 0 60px;display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center}
.hero h1{color:#fff;margin-bottom:18px}
.hero h1 em{font-style:normal;color:#6ecfa5}
.hero-lead{font-size:19px;line-height:1.6;color:#c3cbc7;max-width:34em;margin-bottom:26px}
.hero-knoppen{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:24px}
.hero-onder{display:flex;flex-wrap:wrap;gap:8px 26px;font-family:var(--meet);font-weight:500;font-size:13.5px;letter-spacing:0;text-transform:none;color:#9fb0aa}
.hero-onder span{display:flex;align-items:center;gap:8px}
.hero-onder span::before{content:"";width:14px;height:1px;background:#4d5f59}
.hero-beeld{position:relative}
.hero-beeld img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--rond)}
.hero-bijschrift{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(transparent,rgba(8,14,12,.86));padding:34px 18px 14px;font-family:var(--meet);font-size:11.5px;letter-spacing:.06em;color:#d6ded9}

/* het dekkingsraster achter de hero */
.raster{position:absolute;inset:0;z-index:1;opacity:.5;
  background-image:linear-gradient(rgba(110,207,165,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(110,207,165,.09) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(120% 90% at 78% 20%,#000 10%,transparent 72%);
  mask-image:radial-gradient(120% 90% at 78% 20%,#000 10%,transparent 72%);
}

/* ============================================================
   De wifi-check (het formulier dat leads oplevert)
   ============================================================ */
.check{background:var(--wit);border:1px solid var(--lijn-hard);border-radius:var(--rond);padding:0;overflow:hidden;max-width:640px;margin:0 auto}
.check-kop{background:var(--groen-diep);color:#fff;padding:18px 24px;display:flex;justify-content:space-between;align-items:center;gap:16px}
.check-kop b{font-family:var(--kop);font-size:17px;font-weight:600;letter-spacing:-.01em}
.check-tel{font-family:var(--meet);font-size:11.5px;letter-spacing:.12em;color:#9fd8bf;white-space:nowrap}
.check-balk{height:3px;background:var(--papier-diep)}
.check-balk i{display:block;height:100%;background:var(--groen);width:14%;transition:width .3s}
.check-body{padding:26px 24px 24px}
.stap{display:none}
.stap.actief{display:block}
.stap-vraag{font-family:var(--kop);font-size:21px;font-weight:700;letter-spacing:-.015em;margin:0 0 6px}
.stap-hint{font-size:14.5px;color:var(--grijs);margin:0 0 18px}
.opties{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.opties.een{grid-template-columns:1fr}
.optie{
  display:flex;flex-direction:column;gap:3px;text-align:left;
  border:1px solid var(--lijn);border-radius:var(--rond);background:var(--wit);
  padding:13px 15px;font:inherit;cursor:pointer;color:var(--inkt);
  transition:border-color .12s,background .12s;
}
.optie:hover{border-color:var(--groen);background:var(--groen-licht)}
.optie[aria-pressed="true"]{border-color:var(--groen);background:var(--groen-licht);box-shadow:inset 3px 0 0 var(--groen)}
.optie b{font-family:var(--kop);font-weight:600;font-size:15.5px}
.optie small{color:var(--grijs);font-size:13px;line-height:1.35}
.check-voet{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:18px}
.terug{background:none;border:0;padding:6px 0;font:inherit;font-size:14.5px;color:var(--grijs);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.terug[hidden]{visibility:hidden;display:block}
.velden{display:grid;gap:11px}
.veld label{display:block;font-family:var(--meet);font-weight:600;font-size:12.5px;letter-spacing:.01em;text-transform:none;color:var(--inkt-zacht);margin-bottom:5px}
.veld input,.veld textarea{
  width:100%;padding:13px 14px;border:1px solid var(--lijn-hard);border-radius:var(--rond);
  font:inherit;font-size:16px;background:var(--wit);color:var(--inkt);
}
.veld input:focus,.veld textarea:focus{outline:2px solid var(--groen);outline-offset:-1px;border-color:var(--groen)}
.twee{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.klein{font-size:13px;color:var(--grijs);line-height:1.5;margin:12px 0 0}
.uitkomst{border:1px solid var(--groen);border-radius:var(--rond);background:var(--groen-licht);padding:18px 20px;margin-bottom:18px}
.uitkomst .getal{font-family:var(--kop);font-size:40px;font-weight:700;line-height:1;color:var(--groen-diep);letter-spacing:-.03em}
.uitkomst .bij{font-family:var(--meet);font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--groen-diep);display:block;margin-bottom:8px}
.uitkomst ul{margin:12px 0 0;padding-left:1.05em;font-size:15px}
.uitkomst li{margin-bottom:5px}
.fout{color:var(--rood);font-size:14.5px;margin:10px 0 0}
.gelukt{text-align:center;padding:14px 0}
.gelukt .vink{width:52px;height:52px;border:2px solid var(--groen);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;color:var(--groen);font-size:26px;font-family:var(--kop)}

/* ============================================================
   Inhoudsblokken
   ============================================================ */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.duo-tekst h2{margin-top:0}
.duo img{border-radius:var(--rond);width:100%;aspect-ratio:4/3;object-fit:cover}
.duo.omgekeerd .duo-beeld{order:-1}

.kolommen{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.kolommen > div{padding:0 30px;border-left:1px solid var(--lijn)}
.kolommen > div:first-child{padding-left:0;border-left:0}
.kolommen h3{margin-bottom:.4em}
.kolommen p{font-size:15.5px;color:var(--inkt-zacht);margin-bottom:0}
.sec-inkt .kolommen > div{border-left-color:#2e3d38}
.sec-inkt .kolommen p{color:#b9c3bf}

/* genummerde werkwijze, zonder bolletjes en zonder kaartjes */
.stappen{counter-reset:s;display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:10px}
.stappen > div{counter-increment:s;padding:24px 26px 0;border-top:2px solid var(--inkt)}
.stappen > div::before{content:counter(s,decimal-leading-zero);display:block;font-family:var(--meet);font-size:12px;letter-spacing:.14em;color:var(--groen);margin-bottom:12px}
.stappen h3{font-size:19px}
.stappen p{font-size:15px;color:var(--inkt-zacht)}
.sec-inkt .stappen > div{border-top-color:#4a5a54}
.sec-inkt .stappen p{color:#b9c3bf}

/* cijferrij: typografisch, met haarlijnen, geen vakjes */
.cijfers{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn)}
.cijfers > div{padding:26px 24px;border-left:1px solid var(--lijn)}
.cijfers > div:first-child{border-left:0;padding-left:0}
.cijfers b{display:block;font-family:var(--kop);font-size:clamp(28px,3.6vw,40px);font-weight:700;letter-spacing:-.035em;line-height:1}
.cijfers span{display:block;font-family:var(--meet);font-weight:500;font-size:13.5px;letter-spacing:0;text-transform:none;color:var(--grijs);margin-top:8px}
.sec-inkt .cijfers,.sec-inkt .cijfers > div{border-color:#2e3d38}

/* situatielijst en probleemlijst: rijen met haarlijnen, geen tegels */
.situaties{border-top:1px solid var(--lijn)}
.situaties a{
  display:grid;grid-template-columns:minmax(180px,300px) 1fr auto;gap:24px;align-items:baseline;
  padding:22px 0;border-bottom:1px solid var(--lijn);text-decoration:none;color:var(--inkt);
}
.situaties a:hover{background:var(--wit)}
.situaties h3{margin:0;font-size:20px}
.situaties p{margin:0;font-size:15.5px;color:var(--inkt-zacht)}
.situaties em{font-family:var(--meet);font-weight:600;font-style:normal;font-size:13px;letter-spacing:0;color:var(--groen);white-space:nowrap}

/* probleem -> oorzaak -> oplossing */
.pvo{border-top:1px solid var(--lijn)}
.pvo > div{display:grid;grid-template-columns:1fr 1fr 1fr;gap:30px;padding:26px 0;border-bottom:1px solid var(--lijn)}
.pvo h3{margin:0 0 .35em;font-size:19px}
.pvo p{margin:0;font-size:15.5px;color:var(--inkt-zacht)}
.pvo .kolomkop{font-family:var(--meet);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--grijs);margin-bottom:8px;display:block}
.pvo .los strong{color:var(--groen-diep)}
.sec-inkt .pvo,.sec-inkt .pvo > div{border-color:#2e3d38}
.sec-inkt .pvo p{color:#b9c3bf}

/* wat wij doen: brede lijst met haarlijnen */
.kunnen{display:grid;grid-template-columns:repeat(2,1fr);gap:0 44px}
.kunnen > div{padding:20px 0;border-top:1px solid var(--lijn)}
.kunnen h3{font-size:18px;margin:0 0 .3em}
.kunnen p{margin:0;font-size:15px;color:var(--inkt-zacht)}
.sec-inkt .kunnen > div{border-top-color:#2e3d38}
.sec-inkt .kunnen p{color:#b9c3bf}

/* dekkingsstrook: de visuele handtekening */
.strook{display:flex;height:8px;border-radius:var(--rond);overflow:hidden;margin:0 0 10px}
.strook i{display:block;height:100%}
.strook .g{background:#2f8a63}.strook .m{background:#c99b2c}.strook .s{background:#b0523f}.strook .d{background:#8d9994}
.legenda{display:flex;flex-wrap:wrap;gap:6px 20px;font-family:var(--meet);font-weight:600;font-size:12px;letter-spacing:.03em;color:var(--grijs)}
.legenda i{display:inline-block;width:10px;height:10px;margin-right:6px;vertical-align:-1px}

/* citaat / uitspraak */
.uitspraak{border-left:2px solid var(--groen);padding:4px 0 4px 24px;margin:32px 0;font-family:var(--kop);font-size:clamp(19px,2.4vw,25px);font-weight:500;letter-spacing:-.015em;line-height:1.4}
.uitspraak cite{display:block;font-family:var(--meet);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--grijs);font-style:normal;margin-top:14px}

/* vraag en antwoord */
.vragen{border-top:1px solid var(--lijn)}
.vraag{border-bottom:1px solid var(--lijn)}
.vraag summary{
  list-style:none;cursor:pointer;padding:20px 40px 20px 0;position:relative;
  font-family:var(--kop);font-weight:600;font-size:18px;letter-spacing:-.01em;
}
.vraag summary::-webkit-details-marker{display:none}
.vraag summary::after{content:"+";position:absolute;right:6px;top:18px;font-family:var(--kop);font-size:24px;font-weight:400;color:var(--groen);line-height:1}
.vraag[open] summary::after{content:"\2212"}
.vraag .antwoord{padding:0 0 20px;max-width:70ch}
.vraag .antwoord p:last-child{margin-bottom:0}

/* fotoband */
.band{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.band img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--rond)}
.band figure{margin:0}
.band figcaption{font-family:var(--meet);font-size:11px;letter-spacing:.06em;color:var(--grijs);margin-top:8px;line-height:1.4}

/* video */
.video{position:relative;aspect-ratio:16/9;background:var(--inkt);border-radius:var(--rond);overflow:hidden}
.video img{width:100%;height:100%;object-fit:cover;opacity:.72}
.video button{position:absolute;inset:0;width:100%;height:100%;background:none;border:0;cursor:pointer;display:flex;align-items:center;justify-content:center}
.video .speel{width:74px;height:74px;border:2px solid #fff;border-radius:50%;display:flex;align-items:center;justify-content:center}
.video .speel::after{content:"";border-left:19px solid #fff;border-top:12px solid transparent;border-bottom:12px solid transparent;margin-left:5px}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* bewijsregel met keurmerken */
.keur{display:flex;flex-wrap:wrap;gap:10px 0;align-items:center;font-family:var(--meet);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--grijs)}
.keur span{padding:0 18px;border-left:1px solid var(--lijn)}
.keur span:first-child{padding-left:0;border-left:0}

/* uitgelichte band onderaan elke pagina */
.slot{background:var(--groen-diep);color:#fff}
.slot h2{color:#fff;max-width:16ch}
.slot p{color:#bfded1;max-width:44ch}
.slot .in{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center;padding:52px 0}
.slot .knop{background:#fff;color:var(--groen-diep)!important;border-color:#fff}
.slot .knop:hover{background:#e4efe9;border-color:#e4efe9;color:var(--groen-diep)!important}

/* kruimelpad */
.kruimel{font-family:var(--meet);font-size:11.5px;letter-spacing:.08em;color:var(--grijs);padding:16px 0 0}
.kruimel a{color:var(--grijs);text-decoration:none}
.kruimel a:hover{color:var(--inkt)}

/* artikelkop */
.paginakop{padding:44px 0 8px}
.paginakop .meet{margin-bottom:14px;display:block}
.paginakop p.intro{font-size:19.5px;line-height:1.55;color:var(--inkt-zacht);max-width:36em}

/* inhoud van een gewone pagina */
.inhoud h2{margin-top:2.2em}
.inhoud h3{margin-top:1.8em}
.inhoud > *:first-child{margin-top:0}
.inhoud table{width:100%;border-collapse:collapse;margin:0 0 1.6em;font-size:15.5px}
.inhoud th,.inhoud td{text-align:left;padding:11px 14px 11px 0;border-bottom:1px solid var(--lijn);vertical-align:top}
.inhoud th{font-family:var(--meet);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--grijs);font-weight:400}
.tabelrol{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* voettekst */
.voet{background:var(--inkt);color:#9aa8a3;padding:56px 0 30px;font-size:15px}
.voet a{color:#c8d3cf;text-decoration:none}
.voet a:hover{color:#fff;text-decoration:underline}
.voet-in{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:30px}
.voet h4{font-family:var(--meet);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:#7d8c87;font-weight:400;margin:0 0 14px}
.voet ul{list-style:none;margin:0;padding:0}
.voet li{margin-bottom:8px}
.voet .merk{color:#fff;margin-bottom:14px}
.voet-onder{border-top:1px solid #2a3833;margin-top:40px;padding-top:20px;display:flex;flex-wrap:wrap;gap:8px 24px;font-family:var(--meet);font-size:11px;letter-spacing:.08em;color:#6f7d78}

/* vaste balk op mobiel: bellen of check. Mobiel is bijna de helft van het verkeer. */
.mobielbalk{display:none;position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--wit);border-top:1px solid var(--lijn);padding:9px 12px calc(9px + env(safe-area-inset-bottom));gap:9px}
.mobielbalk a{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 8px;border-radius:var(--rond);font-family:var(--kop);font-weight:600;font-size:15.5px;text-decoration:none}
.mobielbalk .bel{border:1px solid var(--lijn-hard);color:var(--inkt)}
.mobielbalk .doe{background:var(--groen);color:#fff}

/* ============================================================
   Smaller scherm
   ============================================================ */
@media (max-width:1000px){
  .hero-in{grid-template-columns:1fr;gap:34px;padding:44px 0 46px}
  .hero-beeld{order:-1}
  .hero-beeld img{aspect-ratio:16/10}
  .duo{grid-template-columns:1fr;gap:28px}
  .duo.omgekeerd .duo-beeld{order:0}
  .kolommen{grid-template-columns:1fr;gap:26px}
  .kolommen > div{padding:0 0 0 20px;border-left:1px solid var(--lijn)}
  .kolommen > div:first-child{padding-left:20px;border-left:1px solid var(--lijn)}
  .stappen{grid-template-columns:1fr 1fr}
  .pvo > div{grid-template-columns:1fr;gap:14px}
  .kunnen{grid-template-columns:1fr}
  .voet-in{grid-template-columns:1fr 1fr}
  .slot .in{grid-template-columns:1fr;gap:22px;padding:40px 0}
}
@media (max-width:780px){
  body{font-size:16.5px;padding-bottom:70px}
  .hoofdmenu,.kop-tel{display:none}
  .menuknop{display:block}
  .mobielbalk{display:flex}
  .sec{padding:48px 0}
  .sec-krap{padding:34px 0}
  .stappen{grid-template-columns:1fr}
  .stappen > div{padding:20px 0 0}
  .cijfers{grid-template-columns:1fr 1fr}
  .cijfers > div{padding:20px 16px;border-left:1px solid var(--lijn);border-top:1px solid var(--lijn)}
  .cijfers > div:first-child,.cijfers > div:nth-child(3){border-left:0;padding-left:0}
  .cijfers > div:nth-child(-n+2){border-top:0}
  .band{grid-template-columns:1fr}
  .situaties a{grid-template-columns:1fr;gap:6px;padding:18px 0}
  .situaties em{margin-top:4px}
  .voet-in{grid-template-columns:1fr;gap:28px}
  .opties{grid-template-columns:1fr}
  .twee{grid-template-columns:1fr}
  .check-body{padding:22px 18px}
  .check-kop{padding:15px 18px}
  .check-tel{display:none}
  .hero-onder{gap:6px 18px;font-size:11px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ============================================================
   TWEEDE RONDE: meer bewijs, meer gezicht, meer beeld.
   De vormtaal blijft van deze site (scherp, haarlijnen, groen);
   overgenomen is het niveau, niet het uiterlijk.
   ============================================================ */

/* ---- dunne balk boven de kop ---- */
.topbalk{background:var(--inkt);color:#9fb3ac;font-family:var(--meet);font-weight:500;font-size:13px;letter-spacing:0}
.topbalk-in{display:flex;align-items:center;gap:22px;min-height:34px;flex-wrap:wrap}
.topbalk a{color:#cfe0d9;text-decoration:none}
.topbalk a:hover{color:#fff}
.topbalk .rechts{margin-left:auto;display:flex;gap:20px;align-items:center}
.topbalk .stip::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#4fbf8c;margin-right:8px;vertical-align:1px}

/* ---- hero opnieuw: groter, met formulier ---- */
.hero h1{font-size:clamp(34px,6.2vw,66px);letter-spacing:-.035em;line-height:1.03}
.hero-in{grid-template-columns:1.02fr .98fr;gap:48px;padding:56px 0 54px}
.hero-lead{font-size:18.5px;max-width:31em;margin-bottom:22px}
/* het gemeten accent: geen markeerstift maar een meetlijn onder het woord */
.hero h1 em{position:relative;font-style:normal;color:#6ecfa5}
.hero h1 em::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:3px;background:repeating-linear-gradient(90deg,#6ecfa5 0 9px,transparent 9px 15px)}

.snelform{background:var(--wit);color:var(--inkt);border-radius:var(--rond);padding:20px 20px 18px;max-width:410px}
.snelform h2{font-size:19px;margin:0 0 3px;letter-spacing:-.015em;color:var(--inkt)}
.snelform a{color:var(--groen)}
.snelform .gelukt p{color:var(--inkt)}
.snelform p.uitleg{font-size:13.5px;color:var(--grijs);margin:0 0 14px;line-height:1.45}
.snelform .velden{gap:9px}
.snelform input{padding:12px 13px;font-size:16px}
.snelform .knop{width:100%;margin-top:2px}
.snelform .of{margin:12px 0 0;font-size:13.5px;color:var(--grijs);text-align:center}
.snelform .of a{font-weight:600}

/* ---- bewijsbalk met sterren ---- */
.bewijs{background:var(--wit);border-bottom:1px solid var(--lijn)}
.bewijs-in{display:flex;flex-wrap:wrap;align-items:center;gap:0;padding:0}
.bewijs-in > span{display:flex;align-items:center;gap:8px;padding:15px 17px;border-left:1px solid var(--lijn);font-family:var(--meet);font-weight:500;font-size:13.5px;letter-spacing:-.005em;text-transform:none;color:var(--inkt-zacht);white-space:nowrap}
.bewijs-in > span:first-child{border-left:0;padding-left:0}
.sterren{color:#c99b2c;letter-spacing:1px;font-size:13px;font-family:var(--tekst)}
.bewijs-in b{font-family:var(--kop);font-weight:700;font-size:14px;letter-spacing:-.015em;text-transform:none;color:var(--inkt)}

/* ---- de dekkingskaart: de handtekening van deze site ---- */
.kaarten{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start}
.kaartblok{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--rond);padding:16px 16px 14px}
.kaartblok img{width:100%;height:auto;display:block;border-radius:2px}
.kaartblok .kop{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:12px}
.kaartblok .kop b{font-family:var(--kop);font-size:16.5px;font-weight:600;letter-spacing:-.01em}
.kaartblok .kop em{font-family:var(--meet);font-style:normal;font-size:12px;letter-spacing:.08em}
.kaartblok.slecht .kop em{color:var(--rood)}
.kaartblok.goed .kop em{color:var(--groen)}
.kaartblok p{margin:12px 0 0;font-size:14.5px;color:var(--inkt-zacht);line-height:1.5}
.kaartvoet{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;margin-top:20px;padding-top:16px;border-top:1px solid var(--lijn)}

/* ---- adviseursblok ---- */
.adviseur{display:grid;grid-template-columns:270px 1fr 380px;gap:0;background:var(--wit);border:1px solid var(--lijn);border-radius:var(--rond);overflow:hidden;align-items:end}
.adviseur .portret{background:linear-gradient(180deg,var(--papier-diep),#dfe6e1);align-self:stretch;display:flex;align-items:flex-end;justify-content:center;position:relative}
.adviseur .portret img{width:100%;height:auto;object-fit:contain;object-position:bottom}
.adviseur .praat{padding:34px 34px;align-self:center}
.adviseur .praat h2{font-size:clamp(22px,2.6vw,29px);margin-bottom:.45em}
.adviseur .praat p{font-size:16px;color:var(--inkt-zacht)}
.adviseur .praat p:last-child{margin-bottom:0}
.adviseur .form{padding:30px 30px;background:var(--papier);border-left:1px solid var(--lijn);align-self:stretch}
.adviseur .form h3{font-size:18px;margin-bottom:.35em}
.adviseur .form p.klein{margin-top:10px}
.stappenpaar{display:grid;gap:10px;margin:18px 0 0;padding:0;list-style:none;counter-reset:sp}
.stappenpaar li{counter-increment:sp;display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:baseline;font-size:15px;color:var(--inkt-zacht);margin:0}
.stappenpaar li::before{content:counter(sp,decimal-leading-zero);font-family:var(--meet);font-size:12px;letter-spacing:.1em;color:var(--groen)}

/* ---- dienstraster met beeld ---- */
.dienstraster{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 24px}
.dienst{display:flex;flex-direction:column}
.dienst img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--rond);margin-bottom:14px}
.dienst h3{font-size:18.5px;margin-bottom:.35em}
.dienst p{font-size:15px;color:var(--inkt-zacht);margin-bottom:.7em}
.dienst .naar{margin-top:auto;font-family:var(--kop);font-weight:600;font-size:14.5px;text-decoration:none;border-bottom:1px solid var(--groen);align-self:flex-start;padding-bottom:2px}

/* ---- zwevende contactknoppen op groot scherm ---- */
.zweef{position:fixed;right:18px;bottom:18px;z-index:65;display:flex;flex-direction:column;gap:9px}
.zweef a{display:flex;align-items:center;gap:9px;padding:11px 16px;border-radius:var(--rond);font-family:var(--kop);font-weight:600;font-size:14.5px;text-decoration:none;box-shadow:0 1px 3px rgba(16,26,23,.22)}
.zweef .wa{background:#1f9d54;color:#fff}
.zweef .bel{background:var(--inkt);color:#fff}
.zweef svg{width:17px;height:17px;flex-shrink:0}

/* ---- bijschrift onder losse foto's ---- */
figure.plaat{margin:0}
figure.plaat img{width:100%;border-radius:var(--rond)}
figure.plaat figcaption{font-family:var(--meet);font-size:11.5px;letter-spacing:.05em;color:var(--grijs);margin-top:9px;line-height:1.45}

@media (max-width:1000px){
  .adviseur{grid-template-columns:1fr}
  .adviseur .portret{max-height:300px;justify-content:flex-start;padding-left:20px}
  .adviseur .portret img{width:auto;height:300px}
  .adviseur .form{border-left:0;border-top:1px solid var(--lijn)}
  .dienstraster{grid-template-columns:1fr 1fr}
  .kaarten{grid-template-columns:1fr}
}
@media (max-width:780px){
  .topbalk{display:none}
  .zweef{display:none}
  .hero-in{padding:34px 0 40px}
  .snelform{max-width:none}
  .dienstraster{grid-template-columns:1fr;gap:30px}
  .bewijs-in > span{padding:12px 14px;border-left:0;border-top:1px solid var(--lijn);width:100%}
  .bewijs-in > span:first-child{border-top:0}
  .adviseur .praat{padding:24px 20px}
  .adviseur .form{padding:22px 20px}
}

/* ---- de drie ingangen: thuis, zakelijk, buiten ---- */
.hero-sub{font-family:var(--kop);font-weight:600;font-size:clamp(19px,2.6vw,27px);letter-spacing:-.02em;color:#6ecfa5;margin:-.25em 0 .7em}
.ingangen{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.ingang{padding:0 32px;border-left:1px solid var(--lijn)}
.ingang:first-child{padding-left:0;border-left:0}
.ingang .beeld{display:block;margin-bottom:16px}
.ingang .beeld img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--rond)}
.ingang h3{font-size:clamp(21px,2.4vw,26px);margin:0 0 .35em}
.ingang h3 a{color:var(--inkt);text-decoration:none}
.ingang h3 a:hover{color:var(--groen)}
.ingang > p{font-size:15px;color:var(--inkt-zacht);margin-bottom:1em}
.ingang ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--lijn)}
.ingang li{margin:0;border-bottom:1px solid var(--lijn)}
.ingang li a{display:block;padding:10px 0;font-family:var(--kop);font-weight:500;font-size:15.5px;color:var(--inkt);text-decoration:none}
.ingang li a::before{content:"\2192";color:var(--groen);margin-right:9px;font-weight:400}
.ingang li a:hover{color:var(--groen)}
@media (max-width:1000px){
  .ingangen{grid-template-columns:1fr;gap:34px}
  .ingang{padding:0;border-left:0}
  .ingang:not(:first-child){border-top:1px solid var(--lijn);padding-top:30px}
}
.hero h1{hyphens:manual;overflow-wrap:break-word}

/* ============================================================
   SPEELSHEID. Drie dingen, en ze komen alle drie uit het vak:
   een markeerstiftveeg, een krabbel zoals op een bouwtekening,
   en meetlabels die ergens naar wijzen.
   ============================================================ */

/* ---- markeerstiftveeg achter een woord ---- */
.veeg{
  position:relative;display:inline-block;padding:0 .16em;
  color:var(--inkt);z-index:0;white-space:nowrap;
}
.veeg::before{
  content:"";position:absolute;z-index:-1;
  left:-.05em;right:-.05em;top:.1em;bottom:.06em;
  background:#7fe3b4;
  /* met de hand gezet: vier hoeken die net niet gelijk zijn */
  border-radius:14px 5px 12px 6px / 6px 13px 5px 12px;
  transform:rotate(-.7deg);
}
.hero .veeg{color:var(--inkt)}
.veeg.stil::before{background:#d8ecdf}

/* ---- krabbel: aantekening zoals op een werktekening ---- */
.krabbel{
  font-family:var(--hand);font-size:clamp(15px,1.7vw,19px);line-height:1.35;
  color:var(--groen-diep);position:relative;display:inline-block;max-width:22ch;
}
.sec-inkt .krabbel,.hero .krabbel{color:#8fd3b6}
.krabbel svg{position:absolute;width:60px;height:44px;overflow:visible}
.krabbel .pijl-r{right:-64px;top:60%}
.krabbel .pijl-l{left:-64px;top:60%;transform:scaleX(-1)}
.krabbel .pijl-o{left:38%;top:100%}
.krabbel path{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}

/* ---- meetvaan: een klein label dat ergens naar wijst ---- */
.vaan{
  position:absolute;z-index:3;display:inline-flex;align-items:center;gap:7px;
  background:var(--inkt);color:#dff3e8;
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  padding:7px 11px;border-radius:8px 8px 8px 2px;
  box-shadow:0 2px 10px rgba(16,26,23,.28);
}
.vaan b{color:#7fe3b4;font-weight:500}
.vaan.goed{background:#0f4d37}
.vaan.slecht{background:#7d2c1f}

/* ---- de hoeken zachter, maar niet overal hetzelfde ---- */
.kaartblok,.check,.snelform,.adviseur,.video,.dienst img,.duo img,.hero-beeld img,
figure.plaat img,.ingang .beeld img,.band img{border-radius:var(--rond)}
.optie{border-radius:var(--rond-klein)}
.veld input,.veld textarea{border-radius:var(--rond-klein)}
.mobielbalk a,.zweef a{border-radius:var(--rond-klein)}

/* ---- kop met wat meer ritme ---- */
.hero-in{align-items:center}
.hero h1{margin-bottom:12px}
.hero-sub{margin:-.1em 0 .75em}

/* ---- de dekkingskaarten mogen wat opvallender ---- */
.kaartblok{position:relative;box-shadow:0 1px 0 rgba(16,26,23,.04)}
.kaartblok .kop em{font-family:var(--mono);font-weight:500;font-size:12.5px}
.kaartvoet{align-items:flex-start}

/* ---- lijstjes met een streepje in plaats van een bolletje ---- */
.inhoud ul{list-style:none;padding-left:0}
.inhoud ul > li{position:relative;padding-left:20px}
.inhoud ul > li::before{content:"";position:absolute;left:0;top:.72em;width:11px;height:1.5px;background:var(--groen)}
.inhoud ol{padding-left:1.35em}
.inhoud ol > li::marker{font-family:var(--meet);font-size:.9em;color:var(--groen)}

@media (max-width:780px){
  .krabbel svg{display:none}
  .krabbel{max-width:none}
}

/* ============================================================
   HERSTEL VOOR KLEIN SCHERM.
   Dit blok staat bewust helemaal onderaan: alles wat hierboven in
   latere rondes is toegevoegd, wint anders van de media-queries.
   ============================================================ */
@media (max-width:1000px){
  .hero-in{grid-template-columns:1fr!important;gap:30px;padding:40px 0 44px}
  .adviseur{grid-template-columns:1fr!important}
  .kaarten{grid-template-columns:1fr!important}
  .ingangen{grid-template-columns:1fr!important;gap:34px}
  .dienstraster{grid-template-columns:1fr 1fr!important}
  .duo{grid-template-columns:1fr!important}
  .kolommen{grid-template-columns:1fr!important}
  .pvo > div{grid-template-columns:1fr!important;gap:12px}
  .kunnen{grid-template-columns:1fr!important}
}
@media (max-width:780px){
  .hero-in{padding:30px 0 36px}
  .hero h1{font-size:clamp(31px,8.6vw,44px)}
  .hero-sub{font-size:clamp(17px,4.6vw,22px)}
  .hero-lead{font-size:16.5px}
  .snelform{max-width:none}
  .dienstraster{grid-template-columns:1fr!important;gap:30px}
  .stappen{grid-template-columns:1fr!important}
  .voet-in{grid-template-columns:1fr!important}
  .situaties a{grid-template-columns:1fr!important;gap:6px}
  /* de bewijsregel korter houden: drie is genoeg op een telefoon */
  .bewijs-in > span:nth-child(n+4){display:none}
  .bewijs-in > span{padding:11px 0;justify-content:flex-start}
  .kaartvoet{flex-direction:column;gap:14px}
}

/* ---- de probleemzoeker ---- */
.zoeker .opties{grid-template-columns:1fr 1fr}
.diagnose{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:18px 0 0;padding:18px 0 0;border-top:1px solid var(--lijn)}
.diagnose p{margin:0;font-size:15px;color:var(--inkt-zacht)}
.diagnose .kolomkop{font-family:var(--meet);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--grijs);display:block;margin-bottom:7px}
.diagnose > div:first-child .kolomkop{color:var(--rood)}
.diagnose > div:last-child .kolomkop{color:var(--groen)}
ul.verderin{list-style:none;margin:18px 0 0;padding:16px 0 0;border-top:1px solid var(--lijn)}
ul.verderin li{margin:0 0 8px}
ul.verderin li a{font-family:var(--kop);font-weight:600;font-size:15.5px;text-decoration:none}
ul.verderin li a::before{content:"\2192";margin-right:8px;color:var(--groen)}
.zoeker-voet{display:grid;grid-template-columns:1fr auto;gap:11px;margin-top:20px}
.zoeker-voet .knop{font-size:15.5px;padding:14px 20px}

/* ---- afstandstabel ---- */
.afstanden{border-top:1px solid var(--lijn)}
.afstanden > div{display:grid;grid-template-columns:130px 1fr 1fr;gap:26px;padding:22px 0;border-bottom:1px solid var(--lijn);align-items:baseline}
.afstanden .meters{font-family:var(--kop);font-weight:700;font-size:clamp(21px,2.4vw,27px);letter-spacing:-.03em;color:var(--groen-diep)}
.afstanden h3{margin:0 0 .3em;font-size:18px}
.afstanden p{margin:0;font-size:15px;color:var(--inkt-zacht)}

@media (max-width:780px){
  .zoeker .opties{grid-template-columns:1fr}
  .diagnose{grid-template-columns:1fr;gap:16px}
  .zoeker-voet{grid-template-columns:1fr}
  .afstanden > div{grid-template-columns:1fr;gap:8px;padding:18px 0}
}

/* ---- waarom het ertoe doet ---- */
.waarom-kop{max-width:46em;margin-bottom:32px}
.waarom-kop h2{margin-bottom:.35em}
.waarom-kop p{font-size:18.5px;color:var(--inkt-zacht);margin:0}
.waarom-lijst{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.waarom-lijst > div{padding:0 30px;border-left:2px solid var(--groen-licht)}
.waarom-lijst > div:first-child{padding-left:0;border-left:0}
.waarom-lijst h3{margin:0 0 .4em;font-size:20px}
.waarom-lijst p{font-size:15.5px;color:var(--inkt-zacht);margin:0}
.waarom-slot{margin:32px 0 0;font-family:var(--kop);font-weight:500;font-size:clamp(17px,2vw,21px);letter-spacing:-.01em;max-width:44em;color:var(--inkt)}

/* ---- de twee kernwaarden ---- */
.kern{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}
.kernpunt{padding-top:22px;border-top:2px solid #4a5a54}
.kernnr{font-family:var(--meet);font-size:12px;letter-spacing:.16em;color:#7fe3b4;display:block;margin-bottom:14px}
.kernpunt h3{font-size:clamp(21px,2.6vw,28px);margin-bottom:.45em}
.kernpunt p{font-size:15.5px;color:#c2cdc9}
.kernpunt p:last-child{margin-bottom:0}
.kernpunt strong{color:#fff}
.kernslot{margin:34px 0 0;font-family:var(--meet);font-size:12.5px;letter-spacing:.05em;color:#8a9a94;max-width:60ch}

@media (max-width:1000px){
  .waarom-lijst{grid-template-columns:1fr;gap:26px}
  .waarom-lijst > div{padding:0 0 0 20px;border-left:2px solid var(--groen-licht)}
  .waarom-lijst > div:first-child{padding-left:20px;border-left:2px solid var(--groen-licht)}
  .kern{grid-template-columns:1fr;gap:32px}
}

/* ---- vier kernwaarden passen niet in drie kolommen ---- */
.kern{grid-template-columns:repeat(2,1fr);gap:40px}
.kern > .kernpunt:nth-child(5){grid-column:1 / -1}
/* ---- hoe wij helpen ---- */
.hoe{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.hoe-stap{padding:22px 26px 0;border-top:2px solid var(--inkt)}
.hoe-stap:first-child{padding-left:0}
.hoe-stap .kernnr{color:var(--groen);font-size:11.5px}
.hoe-stap h3{font-size:19px;margin-bottom:.4em}
.hoe-stap p{font-size:15px;color:var(--inkt-zacht);margin:0}
@media (max-width:1000px){
  .kern{grid-template-columns:1fr!important}
  .hoe{grid-template-columns:1fr 1fr}
}
@media (max-width:780px){ .hoe{grid-template-columns:1fr}.hoe-stap{padding:20px 0 0} }

/* ---- productraster op de merkpagina's ---- */
.producten{display:grid;grid-template-columns:repeat(4,1fr);gap:26px 22px;margin:0 0 10px}
.product{display:flex;flex-direction:column;text-align:left}
.product .doos{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--rond);padding:16px;display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;margin-bottom:13px}
.product .doos img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.product b{font-family:var(--kop);font-weight:600;font-size:16px;letter-spacing:-.01em;display:block;margin-bottom:.25em}
.product span{font-family:var(--meet);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--groen);display:block;margin-bottom:.5em}
.product p{font-size:14.5px;color:var(--inkt-zacht);margin:0}
.sec-inkt .product .doos{background:#f4f2ec;border-color:#2e3d38}
.sec-inkt .product p{color:#b9c3bf}

/* ---- merkkeuze naast elkaar ---- */
.merken{display:grid;grid-template-columns:1fr 1fr;gap:0}
.merken > div{padding:0 34px;border-left:1px solid var(--lijn)}
.merken > div:first-child{padding-left:0;border-left:0}
.merken h3{font-size:clamp(22px,2.6vw,28px);margin-bottom:.3em}
.merken .rol{font-family:var(--meet);font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--groen);display:block;margin-bottom:1em}
.merken p{font-size:15.5px;color:var(--inkt-zacht)}

/* ---- wel/niet voor wie ---- */
.voorwie{display:grid;grid-template-columns:1fr 1fr;gap:34px;margin-top:8px}
.voorwie > div{padding:22px 0 0;border-top:2px solid var(--lijn-hard)}
.voorwie > div:first-child{border-top-color:var(--groen)}
.voorwie h3{font-size:19px;margin-bottom:.5em}
.voorwie ul{list-style:none;padding:0;margin:0}
.voorwie li{position:relative;padding-left:20px;font-size:15.5px;color:var(--inkt-zacht);margin-bottom:.55em}
.voorwie li::before{content:"";position:absolute;left:0;top:.7em;width:11px;height:1.5px;background:var(--lijn-hard)}
.voorwie > div:first-child li::before{background:var(--groen)}

@media (max-width:1000px){
  .producten{grid-template-columns:1fr 1fr}
  .merken{grid-template-columns:1fr;gap:30px}
  .merken > div{padding:0;border-left:0}
  .merken > div:not(:first-child){border-top:1px solid var(--lijn);padding-top:28px}
  .voorwie{grid-template-columns:1fr;gap:24px}
}

/* ---- kopfoto begrenzen: een staande foto vult anders het halve scherm ---- */
.kopbeeld{margin:0}
.kopbeeld img{width:100%;aspect-ratio:16/7;object-fit:cover;border-radius:var(--rond);max-height:480px}
.kopbeeld figcaption{font-family:var(--meet);font-size:11.5px;letter-spacing:.05em;color:var(--grijs);margin-top:9px}
@media (max-width:780px){ .kopbeeld img{aspect-ratio:16/10;max-height:280px} }

/* ---- snelheid versus stabiliteit ---- */
.snelheid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.snelheid-tekst h2{margin-top:0}
.snelheid-tekst p{font-size:16.5px}
.snelheid-paar{display:grid;gap:16px}
.snelheid-kaart{border:1px solid var(--lijn);border-radius:var(--rond);padding:20px 22px;background:var(--papier)}
.snelheid-kaart .kernnr{font-family:var(--meet);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;display:block;margin-bottom:8px}
.snelheid-kaart b{font-family:var(--kop);font-weight:700;font-size:clamp(38px,5vw,58px);letter-spacing:-.04em;line-height:1;display:block;margin-bottom:.25em}
.snelheid-kaart p{font-size:15px;color:var(--inkt-zacht);margin:0}
.snelheid-kaart.mis{border-color:#e0c3bc}
.snelheid-kaart.mis .kernnr{color:var(--rood)}
.snelheid-kaart.mis b{color:var(--rood)}
.snelheid-kaart.goed{border-color:var(--groen);background:var(--groen-licht)}
.snelheid-kaart.goed .kernnr{color:var(--groen-diep)}
.snelheid-kaart.goed b{color:var(--groen-diep)}
@media (max-width:1000px){ .snelheid{grid-template-columns:1fr;gap:30px} }

/* ---- het korte antwoord bovenaan een pagina ---- */
.inhoud p.direct{
  font-size:17.5px;line-height:1.6;color:var(--inkt);
  background:var(--groen-licht);border-left:3px solid var(--groen);
  border-radius:0 var(--rond) var(--rond) 0;
  padding:18px 22px;margin:0 0 1.8em;
}
.inhoud p.direct strong:first-child{font-family:var(--kop);font-weight:700}

/* ---- het meetrapport tonen ---- */
.rapport{display:grid;grid-template-columns:1.35fr 1fr;gap:22px;align-items:start}
.rapport figure{margin:0}
.rapport img{width:100%;border-radius:var(--rond);display:block}
.rapport figcaption{font-size:14px;color:var(--inkt-zacht);margin-top:10px;line-height:1.45}
.rapport-groot figcaption{font-size:15px}
.rapport-klein{display:grid;gap:22px}
@media (max-width:1000px){ .rapport{grid-template-columns:1fr} }

/* bewijsbalk op een regel houden */
.bewijs-in > span{padding:14px 14px}
@media (max-width:1180px){ .bewijs-in > span:nth-child(n+6){display:none} }

/* ============================================================
   De dekkingstekenaar
   ============================================================ */
.tekenaar{background:var(--wit);border:1px solid var(--lijn-hard);border-radius:var(--rond);overflow:hidden}
.tk-balk{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center;padding:14px 16px;background:var(--papier-diep);border-bottom:1px solid var(--lijn)}
.tk-groep{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tk-groep label{font-family:var(--meet);font-weight:600;font-size:12.5px;color:var(--inkt-zacht);display:flex;gap:8px;align-items:center}
.tk-rechts{margin-left:auto}
.tk-knop{font-family:var(--kop);font-weight:600;font-size:14.5px;padding:9px 15px;border:1px solid var(--lijn-hard);background:var(--wit);color:var(--inkt);border-radius:var(--rond-klein);cursor:pointer}
.tk-knop:hover{border-color:var(--groen)}
.tk-knop.actief{background:var(--groen);border-color:var(--groen);color:#fff}
.tk-leeg{border-style:dashed}
.tk-upload{cursor:pointer;border:1px dashed var(--lijn-hard);border-radius:var(--rond-klein);padding:8px 13px;background:var(--wit)}
.tk-upload:hover{border-color:var(--groen);color:var(--groen)}
.tk-schaal{display:flex;align-items:center;gap:7px}
.tk-schaal input[type=range]{width:110px;accent-color:var(--groen)}
.tk-schaal b{font-family:var(--mono);font-size:12.5px;min-width:1.6em;text-align:right}
.tk-groep select{font:inherit;font-size:13.5px;padding:7px 9px;border:1px solid var(--lijn-hard);border-radius:var(--rond-klein);background:var(--wit)}
.tk-doekhouder{padding:16px}
.tekenaar canvas{width:100%;height:auto;display:block;border:1px solid var(--lijn);border-radius:var(--rond-klein);background:#fff;cursor:crosshair;touch-action:none}
.tk-hint{font-size:14px;color:var(--grijs);margin:11px 0 0}
.tk-onder{display:flex;flex-wrap:wrap;gap:18px 30px;align-items:center;justify-content:space-between;padding:0 16px 14px}
.tk-uitslag{display:flex;gap:26px}
.tk-cijfer b{font-family:var(--kop);font-weight:700;font-size:30px;letter-spacing:-.03em;line-height:1;display:block;color:var(--groen-diep)}
.tk-cijfer span{font-family:var(--meet);font-weight:500;font-size:12.5px;color:var(--grijs);display:block;margin-top:4px}
.tk-advies{margin:0;padding:16px 18px;background:var(--groen-licht);border-top:1px solid var(--lijn);font-size:15.5px;line-height:1.55}
.tk-advies em{color:var(--rood);font-style:normal;font-weight:600}
.tk-versturen{display:grid;grid-template-columns:1fr 380px;gap:26px;align-items:center;padding:20px 16px;border-top:1px solid var(--lijn);background:var(--papier)}
.tk-versturen h3{margin:0 0 .3em;font-size:20px}
.tk-versturen .snelform{padding:0;border:0;background:none;max-width:none}
.tk-versturen .snelform h2{font-size:16px}
@media (max-width:900px){
  .tk-rechts{margin-left:0}
  .tk-versturen{grid-template-columns:1fr}
  .tk-uitslag{gap:18px}
  .tk-cijfer b{font-size:24px}
}

/* ---- stappen en maten in de tekenaar ---- */
.tk-stappen{display:flex;gap:0;list-style:none;margin:0;padding:0;border-bottom:1px solid var(--lijn);background:var(--wit)}
.tk-stappen li{flex:1;display:flex;align-items:center;gap:11px;padding:14px 18px;font-family:var(--kop);font-weight:600;font-size:15px;color:var(--grijs);cursor:pointer;border-right:1px solid var(--lijn)}
.tk-stappen li:last-child{border-right:0}
.tk-stappen li b{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--lijn-hard);display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0}
.tk-stappen li.actief{color:var(--inkt);background:var(--groen-licht)}
.tk-stappen li.actief b{border-color:var(--groen);background:var(--groen);color:#fff}
.tk-stappen li.gedaan b{border-color:var(--groen);color:var(--groen)}
.tk-gereedschap{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;width:100%}
.tk-uitleg{flex-basis:100%;margin:0 0 4px;font-size:14.5px;color:var(--inkt-zacht)}
.tk-knop[data-tk]{display:flex;flex-direction:column;align-items:flex-start;gap:1px;line-height:1.25;text-align:left}
.tk-knop[data-tk] small{font-family:var(--tekst);font-weight:400;font-size:11.5px;opacity:.72}
.tk-knop.tk-stil{background:transparent;border-style:dashed}
.tk-scheiding{width:1px;align-self:stretch;min-height:32px;background:var(--lijn);margin:0 4px}
.tk-maten{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center}
.tk-maat{font-family:var(--meet);font-weight:600;font-size:13px;color:var(--inkt-zacht);display:flex;align-items:center;gap:7px}
.tk-maat input{width:5.5em;font:inherit;font-size:14px;padding:7px 9px;border:1px solid var(--lijn-hard);border-radius:var(--rond-klein)}
.tk-huidig{font-family:var(--meet);font-weight:600;font-size:13px;color:var(--grijs)}
.tk-huidig b{color:var(--inkt)}
.tk-cijfer.klein b{font-size:20px}
@media (max-width:780px){ .tk-stappen{flex-direction:column} .tk-stappen li{border-right:0;border-bottom:1px solid var(--lijn)} }

/* ---- knop met een zender erop ---- */
.tk-knop.tk-metbeeld{flex-direction:row;align-items:center;gap:10px;padding:7px 15px 7px 8px}
.tk-knop.tk-metbeeld img{width:34px;height:34px;object-fit:contain;flex-shrink:0;mix-blend-mode:multiply}
.tk-knop.tk-metbeeld.actief img{mix-blend-mode:normal;background:#fff;border-radius:50%;padding:2px}
.tk-knop.tk-metbeeld .tk-tekst{display:flex;flex-direction:column;align-items:flex-start;gap:1px}

/* ---- wie het schreef en wanneer ---- */
.herkomst{display:flex;flex-wrap:wrap;gap:6px 18px;margin:18px 0 0;padding-top:14px;
  border-top:1px solid rgba(20,104,74,.16);font-size:.82rem;line-height:1.5;color:#5d6b65}
.herkomst strong{font-weight:600;color:#14684a}
.herkomst a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.herkomst a:hover{color:#14684a}
.herkomst time{font-variant-numeric:tabular-nums}
@media (max-width:640px){.herkomst{font-size:.78rem;gap:4px 12px}}

/* ---- de vraag-kop met het kernantwoord eronder ---- */
.inhoud h2.kernvraag{margin:0 0 10px;font-size:clamp(1.18rem,2.4vw,1.42rem);line-height:1.25;
  color:#14684a;letter-spacing:-.01em}
.inhoud h2.kernvraag + p.direct{margin-top:0}
@media (max-width:640px){.inhoud h2.kernvraag{font-size:1.12rem}}