:root{
  --creme:#FBF7F0;
  --creme-diep:#F3EDE2;
  --ink:#14201A;
  --ink-zacht:#4A574F;
  --groen:#3ED47F;
  --groen-diep:#0E7A45;
  --boter:#F5C64E;
  --klei:#E8927C;
  --r-vlak:42px;
  --r-kaart:24px;
  --r-pil:999px;
  --kolom:1180px;
  --display:"Bricolage Grotesque","Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
  --tekst:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--creme);color:var(--ink);
  font-family:var(--tekst);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--kolom);margin:0 auto;padding:0 24px}

/* ---------- typografie ---------- */
h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-.03em;line-height:.98;margin:0}
h1{font-size:clamp(40px,7.4vw,86px)}
h2{font-size:clamp(30px,4.6vw,58px);line-height:1.02}
h3{font-size:clamp(19px,2vw,24px);line-height:1.15;letter-spacing:-.015em}
.kicker{font-family:var(--tekst);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.lead{font-size:clamp(17px,1.5vw,20px);line-height:1.6;max-width:56ch}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
.zacht{color:var(--ink-zacht)}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:40;background:rgba(251,247,240,.88);backdrop-filter:blur(10px)}
.nav-in{max-width:var(--kolom);margin:0 auto;padding:16px 24px;display:flex;align-items:center;gap:20px}
.merk{font-family:var(--display);font-weight:800;font-size:20px;letter-spacing:-.03em;text-decoration:none}
.merk span{color:var(--groen-diep)}
.nav-links{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.nav-links a{font-size:14px;text-decoration:none;padding:9px 14px;border-radius:var(--r-pil);font-weight:500}
.nav-links a:hover{background:var(--creme-diep)}
.nav-links a.prim{background:var(--ink);color:var(--creme)}

/* ---------- Z1 hero ---------- */
.hero{padding:14px 0 0}
.hero-vlak{
  background:var(--groen);border-radius:var(--r-vlak);
  padding:clamp(30px,5vw,68px);position:relative;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,58fr) minmax(0,42fr);gap:clamp(24px,4vw,56px);align-items:center;
}
.hero-vlak::after{
  content:"";position:absolute;right:-120px;bottom:-160px;width:420px;height:420px;
  border-radius:50%;background:rgba(255,255,255,.16);pointer-events:none;
}
.hero-kicker{color:var(--groen-diep)}
.hero h1{margin:16px 0 22px}
.hero-lead{font-size:clamp(16px,1.45vw,19px);max-width:44ch}
.hero-onder{margin-top:26px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.pil{display:inline-block;padding:11px 20px;border-radius:var(--r-pil);font-size:14px;font-weight:600;text-decoration:none}
.pil-ink{background:var(--ink);color:var(--creme)}
.pil-licht{background:rgba(255,255,255,.75);color:var(--ink)}
.hero-beeld{position:relative;z-index:2}
.hero-beeld img{border-radius:28px;aspect-ratio:1/1;object-fit:cover;box-shadow:0 24px 48px rgba(20,32,26,.18)}
.beeld-bijschrift{margin-top:10px;font-size:12px;color:var(--groen-diep);font-weight:500}

/* ---------- Z2 vergelijking ---------- */
.z2{padding:clamp(64px,9vw,120px) 0 clamp(30px,5vw,60px)}
.z2-kop{max-width:30ch}
.z2-intro{margin-top:16px}
.duo{margin-top:44px;display:grid;grid-template-columns:1fr 1fr;gap:20px}
.kaart{border-radius:var(--r-kaart);padding:clamp(24px,3vw,36px)}
.kaart-oud{background:var(--creme-diep);color:var(--ink-zacht)}
.kaart-nieuw{background:var(--ink);color:var(--creme)}
.kaart h3{margin-bottom:18px}
.kaart-oud h3{color:var(--ink)}
.kaart ul{list-style:none;margin:0;padding:0}
.kaart li{padding:11px 0;border-top:1px solid rgba(20,32,26,.12);font-size:15.5px;line-height:1.45}
.kaart-nieuw li{border-top-color:rgba(251,247,240,.18)}
.kaart li:first-of-type{border-top:0}
.kaart-oud li{text-decoration:line-through;text-decoration-color:rgba(20,32,26,.32)}
.merkje{display:inline-block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;padding:5px 11px;border-radius:var(--r-pil);margin-bottom:14px}
.merkje-oud{background:rgba(20,32,26,.09);color:var(--ink-zacht)}
.merkje-nieuw{background:var(--groen);color:var(--groen-diep)}
.z2-slot{margin-top:30px;font-family:var(--display);font-weight:600;font-size:clamp(19px,2.2vw,27px);line-height:1.25;letter-spacing:-.02em;max-width:none}

/* ---------- Z3 de prijs ---------- */
.z3{margin-block:clamp(56px,8vw,104px)}
.z3-vlak{background:var(--ink);color:var(--creme);border-radius:var(--r-vlak);padding:clamp(32px,5vw,68px)}
.z3-top{display:grid;grid-template-columns:minmax(0,26fr) minmax(0,48fr) minmax(0,26fr);gap:clamp(22px,4vw,46px);align-items:start}
.z3-beeld img{border-radius:20px;aspect-ratio:1/1;object-fit:cover}
.band{margin-block:clamp(20px,3vw,38px) 0}
.band-fig{margin:0}
.band-fig img{width:100%;border-radius:var(--r-vlak);aspect-ratio:16/7;object-fit:cover}
.band-fig figcaption{margin-top:14px;font-size:14.5px;color:var(--ink-zacht);max-width:52ch}
.groot-getal{font-family:var(--display);font-weight:800;font-size:clamp(64px,11vw,148px);line-height:.82;letter-spacing:-.05em;color:var(--groen)}
.groot-getal small{display:block;font-size:14px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--creme);opacity:.62;margin-top:16px;font-family:var(--tekst)}
.z3-top h2{color:var(--creme)}
.z3-body{margin-top:18px;opacity:.84;max-width:52ch}
.stappen{margin-top:clamp(30px,4vw,54px);display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.stap{background:rgba(251,247,240,.07);border-radius:18px;padding:22px}
.stap b{display:block;font-family:var(--display);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--groen);margin-bottom:9px;font-weight:600}
.stap span{font-size:15px;line-height:1.5;opacity:.9}

/* ---------- Z4 wat bleef ---------- */
.z4{padding:clamp(50px,7vw,92px) 0}
.z4-in{display:grid;grid-template-columns:minmax(0,44fr) minmax(0,56fr);gap:clamp(26px,5vw,64px);align-items:center}
.rollen{display:flex;flex-wrap:wrap;gap:12px}
.rol{background:var(--creme-diep);border-radius:var(--r-pil);padding:13px 20px;display:flex;align-items:center;gap:11px}
.rol i{width:34px;height:34px;border-radius:50%;display:block;flex:0 0 34px}
.rol-a i{background:var(--boter)}
.rol-b i{background:var(--klei)}
.rol-c i{background:var(--groen)}
.rol b{font-family:var(--display);font-size:15px;font-weight:800;letter-spacing:-.01em}
.rol span{font-size:13px;color:var(--ink-zacht);display:block;line-height:1.3}
.z4-noot{margin-top:22px;font-size:15px;color:var(--ink-zacht);max-width:48ch}

/* ---------- Z5 de proef ---------- */
.z5{margin-block:clamp(46px,6vw,84px)}
.z5-vlak{background:var(--boter);border-radius:var(--r-vlak);padding:clamp(30px,5vw,66px);position:relative}
.z5-grid{display:grid;grid-template-columns:minmax(0,52fr) minmax(0,48fr);gap:clamp(24px,4vw,52px);align-items:start}
.z5-vlak h2{max-width:16ch}
.z5-body{margin-top:18px;max-width:50ch}
.twee{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:6px}
.persoon{background:var(--creme);border-radius:20px;padding:22px}
.persoon .naam{font-family:var(--display);font-weight:800;font-size:18px;letter-spacing:-.02em}
.persoon .rolregel{font-size:13px;color:var(--ink-zacht);margin-top:3px}
.persoon .stand{margin-top:14px;font-size:14px;line-height:1.45}
.persoon.b{background:var(--ink);color:var(--creme)}
.persoon.b .rolregel{color:rgba(251,247,240,.62)}
.z5-slot{margin-top:26px;font-family:var(--display);font-weight:600;font-size:clamp(18px,2.1vw,25px);line-height:1.24;letter-spacing:-.02em;max-width:32ch}

/* ---------- Z6 stukken + voet ---------- */
.z6{padding:clamp(50px,7vw,92px) 0 0}
.z6-kop{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap}
.stukken{margin-top:32px;border-top:1px solid rgba(20,32,26,.14)}
.stuk{display:grid;grid-template-columns:44px 1fr auto;gap:18px;align-items:baseline;
      padding:17px 0;border-bottom:1px solid rgba(20,32,26,.14);text-decoration:none}
.stuk:hover{background:var(--creme-diep)}
.stuk .nr{font-family:var(--display);font-weight:800;font-size:14px;color:var(--groen-diep)}
.stuk .tt{display:block;font-family:var(--display);font-weight:600;font-size:clamp(17px,1.7vw,21px);letter-spacing:-.02em;line-height:1.2}
.stuk .on{display:block;font-size:13.5px;color:var(--ink-zacht);margin-top:5px;line-height:1.4}
.stuk .pijl{font-size:16px;color:var(--ink-zacht)}
.voet{margin-top:clamp(48px,7vw,88px);background:var(--ink);color:var(--creme);border-radius:var(--r-vlak) var(--r-vlak) 0 0;padding:clamp(32px,5vw,60px) 0}
.voet-in{max-width:var(--kolom);margin:0 auto;padding:0 24px;display:flex;justify-content:space-between;gap:26px;flex-wrap:wrap;align-items:end}
.voet h3{color:var(--creme);max-width:18ch}
.voet .fijn{font-size:13px;opacity:.6;margin-top:14px}

/* ---------- wireframe-strip ---------- */
.wf{background:var(--groen-diep);color:#fff;font-size:12.5px;letter-spacing:.04em;text-align:center;padding:8px 16px}

@media (max-width:900px){
  .hero-vlak,.z2 .duo,.z3-top,.z4-in,.z5-grid{grid-template-columns:1fr}
  .z3-beeld{max-width:240px}
  .band-fig img{aspect-ratio:4/3}
  .stappen{grid-template-columns:1fr}
  .hero-vlak{padding-top:30px}
  .hero-beeld{max-width:320px}
  .wf{font-size:11px;letter-spacing:0}
  .nav-in{flex-wrap:wrap;gap:10px;padding:12px 16px}
  .nav-links{margin-left:0;width:100%;flex-wrap:nowrap;overflow-x:auto;gap:2px;scrollbar-width:none}
  .nav-links::-webkit-scrollbar{display:none}
  .nav-links a{white-space:nowrap;font-size:13px;padding:8px 12px}
  .twee{grid-template-columns:1fr}
  .stuk{grid-template-columns:34px 1fr;}
  .stuk .pijl{display:none}
  :root{--r-vlak:28px}
}

/* ================= v2 componenten (27-08) ================= */

/* de stand — het blok dat verandert */
.stand{margin-block:clamp(30px,5vw,56px)}
.stand-kop{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.stand-kop h2{font-size:clamp(26px,3.4vw,40px)}
.leeft{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--groen-diep);
  background:rgba(62,212,127,.18);padding:7px 13px;border-radius:var(--r-pil)}
.leeft i{width:8px;height:8px;border-radius:50%;background:var(--groen-diep);display:block}
.stand-grid{display:grid;grid-template-columns:minmax(0,38fr) minmax(0,62fr);gap:18px}
.acteur{background:var(--creme-diep);border-radius:var(--r-kaart);padding:clamp(20px,2.6vw,30px)}
.acteur.nu{background:var(--ink);color:var(--creme)}
.acteur .rolregel{font-size:13px;color:var(--ink-zacht);margin-top:2px}
.acteur.nu .rolregel{color:rgba(251,247,240,.6)}
.acteur .naam{font-family:var(--display);font-weight:800;font-size:clamp(20px,2.2vw,26px);letter-spacing:-.02em}
.acteur .stand-regel{margin-top:16px;font-size:15.5px;line-height:1.5}
.acteur .fase{display:inline-block;margin-top:16px;font-size:11.5px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;padding:6px 12px;border-radius:var(--r-pil)}
.fase-af{background:rgba(62,212,127,.25);color:var(--groen-diep)}
.fase-start{background:rgba(245,198,78,.22);color:var(--boter)}
.werkkaart{background:var(--creme);border:1px solid rgba(20,32,26,.14);border-radius:var(--r-kaart);
  padding:clamp(20px,2.6vw,30px);display:flex;flex-direction:column;gap:14px;text-decoration:none}
.werkkaart:hover{border-color:var(--ink)}
.werkkaart .wk-label{font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-zacht)}
.werkkaart .wk-kop{font-family:var(--display);font-weight:800;font-size:clamp(19px,2.1vw,25px);letter-spacing:-.02em;line-height:1.12}
.werkkaart .wk-rij{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 0;border-top:1px solid rgba(20,32,26,.12);font-size:14.5px}
.werkkaart .wk-rij:first-of-type{border-top:0}
.werkkaart .wk-staat{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-zacht);white-space:nowrap}
.werkkaart .wk-door{margin-top:auto;font-weight:600;font-size:14.5px;color:var(--groen-diep)}

/* takenbord op /challenge/ */
.bord{margin-top:28px;border-top:1px solid rgba(20,32,26,.14)}
.bord-rij{display:grid;grid-template-columns:38px 1fr 190px;gap:16px;align-items:center;
  padding:16px 0;border-bottom:1px solid rgba(20,32,26,.14)}
.bord-rij .nr{font-family:var(--display);font-weight:800;font-size:13px;color:var(--ink-zacht)}
.bord-rij .taak{font-size:16px;line-height:1.35}
.bord-rij .staat{font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  text-align:right;color:var(--ink-zacht);white-space:nowrap}
.bord-rij.wacht .taak{color:var(--ink-zacht)}
.let-op{background:var(--creme-diep);border-radius:var(--r-kaart);padding:clamp(20px,2.6vw,28px);
  margin-top:26px;font-size:15.5px;line-height:1.55;max-width:64ch}

/* eenvoudige tekstpagina */
.blad{max-width:66ch;margin-inline:auto}
.blad h2{margin-top:clamp(36px,5vw,60px)}
.blad p{margin-top:16px}
.blad .aanhef{font-size:clamp(18px,1.7vw,21px);line-height:1.55;margin-top:20px}

@media (max-width:900px){
  .stand-grid{grid-template-columns:1fr}
  .bord-rij{grid-template-columns:30px 1fr;row-gap:6px}
  .bord-rij .staat{grid-column:2;text-align:left}
}

/* ---------- portretten met kleurvlak (27-08) ---------- */
.wie{margin-block:clamp(50px,7vw,90px)}
.wie-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:30px}
.persoonkaart{border-radius:var(--r-vlak);padding:clamp(22px,2.8vw,34px);display:grid;
  grid-template-columns:minmax(0,38fr) minmax(0,62fr);gap:clamp(18px,2.4vw,28px);align-items:center}
.persoonkaart.a{background:var(--boter)}
.persoonkaart.b{background:var(--klei)}
.persoonkaart img{border-radius:20px;aspect-ratio:4/5;object-fit:cover;width:100%;
  box-shadow:0 14px 30px rgba(20,32,26,.18)}
.persoonkaart .pnaam{font-family:var(--display);font-weight:800;font-size:clamp(21px,2.3vw,28px);letter-spacing:-.025em;line-height:1.05}
.persoonkaart .prol{font-size:13.5px;font-weight:600;margin-top:6px;opacity:.72}
.persoonkaart .ptekst{font-size:15px;line-height:1.5;margin-top:14px}
.persoonkaart .pfeit{display:inline-block;margin-top:14px;font-size:11.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;background:rgba(20,32,26,.14);
  padding:6px 12px;border-radius:var(--r-pil)}
@media (max-width:900px){
  .wie-grid{grid-template-columns:1fr}
  .persoonkaart{grid-template-columns:110px 1fr;gap:16px;align-items:start}
}

/* ---------- het afleveringen-bord (27-08, centerpiece) ---------- */
.bord-zone{margin-block:clamp(56px,8vw,104px)}
.bord-kop{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap}
.bord-kop h2{font-size:clamp(32px,5vw,62px);max-width:16ch}
.bord-kop p{color:var(--ink-zacht);max-width:34ch;font-size:15.5px}
.sporen{display:flex;gap:8px;flex-wrap:wrap;margin-top:30px;border-bottom:1px solid rgba(20,32,26,.14);padding-bottom:16px}
.spoor{appearance:none;border:0;cursor:pointer;font-family:var(--tekst);font-size:14.5px;font-weight:600;
  padding:11px 18px;border-radius:var(--r-pil);background:var(--creme-diep);color:var(--ink-zacht);
  display:inline-flex;align-items:center;gap:9px}
.spoor:hover{background:rgba(20,32,26,.1)}
.spoor[aria-selected="true"]{background:var(--ink);color:var(--creme)}
.spoor .tel{font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:var(--r-pil);
  background:rgba(20,32,26,.12)}
.spoor[aria-selected="true"] .tel{background:var(--groen);color:var(--groen-diep)}
.afl-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:26px}
.afl{background:var(--creme-diep);border-radius:var(--r-kaart);padding:clamp(20px,2.4vw,28px);
  text-decoration:none;display:flex;flex-direction:column;gap:10px;min-height:100%}
.afl:hover{background:var(--groen);}
.afl .aflnr{font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-zacht)}
.afl:hover .aflnr{color:var(--groen-diep)}
.afl .afltitel{font-family:var(--display);font-weight:800;font-size:clamp(18px,1.9vw,23px);
  letter-spacing:-.02em;line-height:1.13}
.afl .aflprob{font-size:15px;line-height:1.5;color:var(--ink-zacht)}
.afl:hover .aflprob{color:var(--ink)}
.afl .aflmeer{margin-top:auto;padding-top:8px;font-size:14px;font-weight:600;color:var(--groen-diep)}
.leeg-spoor{background:var(--creme-diep);border-radius:var(--r-kaart);padding:clamp(28px,4vw,44px);
  margin-top:26px;max-width:62ch}
.leeg-spoor h3{margin-bottom:12px}
.leeg-spoor p{font-size:16px;line-height:1.6;color:var(--ink-zacht)}
@media (max-width:900px){ .afl-grid{grid-template-columns:1fr} }

/* hidden moet winnen van display:grid/flex (gemeten fout 27-08) */
[hidden]{display:none !important}

/* ================= v4 · blogstijl (27-08) ================= */
.stelling{margin-top:20px;font-family:var(--display);font-weight:600;
  font-size:clamp(17px,1.7vw,21px);line-height:1.3;letter-spacing:-.015em;max-width:34ch}
.voorwie{margin-block:clamp(48px,7vw,84px)}
.voorwie-in{display:grid;grid-template-columns:minmax(0,40fr) minmax(0,60fr);gap:clamp(24px,4vw,56px);align-items:start}
.voorwie h2{max-width:12ch}
.merklogo{margin-top:16px;display:flex;align-items:center;gap:10px}
.merklogo img{height:26px;width:auto;opacity:.85}
.merklogo span{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;opacity:.6}

/* nieuwsingang */
.nieuws{margin-block:clamp(48px,7vw,84px)}
.nieuws-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px}
.nieuwskaart{text-decoration:none;display:flex;flex-direction:column;gap:12px}
.nieuwskaart img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--r-kaart)}
.nieuwskaart .nk-datum{font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-zacht)}
.nieuwskaart .nk-kop{font-family:var(--display);font-weight:800;font-size:clamp(17px,1.8vw,21px);
  letter-spacing:-.02em;line-height:1.15}
.nieuwskaart .nk-sub{font-size:14.5px;line-height:1.45;color:var(--ink-zacht)}
.nieuwskaart:hover .nk-kop{color:var(--groen-diep)}

/* hoofdstukken + afleveringen in één kolom */
/* ---------- DEEL-scheiding (twee delen boven de hoofdstukken) ---------- */
.deel{display:flex;align-items:center;gap:16px;margin:clamp(52px,7vw,84px) 0 4px}
.deel:first-child{margin-top:clamp(30px,4vw,44px)}
.deel-nr{font-family:var(--display);font-weight:800;font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--groen-diep);background:var(--groen);
  padding:5px 12px;border-radius:var(--r-pil);white-space:nowrap}
.deel-t{font-family:var(--display);font-weight:800;font-size:clamp(15px,1.5vw,18px);
  letter-spacing:-.01em;white-space:nowrap}
.deel-lijn{flex:1;height:1px;background:rgba(20,32,26,.16)}
.deel-jaar{font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-zacht);white-space:nowrap}

/* ---------- HOOFDSTUK: titel bovenaan, artikelen zichtbaar eronder ---------- */
.hfd{margin-top:clamp(46px,6vw,76px)}
/* de kop is het anker: nummer klein, titel groot, op een eigen vlak */
.hfd-kop{display:block;padding:0 0 4px;border-bottom:2px solid var(--ink);margin-bottom:6px}
.hfd-nr{display:block;font-family:var(--display);font-weight:800;font-size:12.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--groen-diep);margin-bottom:6px}
.hfd-kop h3{font-size:clamp(21px,2.7vw,32px);letter-spacing:-.025em;padding-bottom:12px}
/* de haak is EEN regel en leest nooit als artikel: klein, zacht, cursief */
.hfd-body{display:grid;grid-template-columns:220px 1fr;gap:22px;align-items:center;
  padding:0 22px 20px;background:var(--creme-diep);
  border-radius:0 0 var(--r-kaart) var(--r-kaart)}
.hfd-beeld{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:18px}
.hfd-praat{margin:0;color:var(--ink-zacht);font-size:15px;line-height:1.6;max-width:62ch}
/* de artikelen hangen zichtbaar ONDER de kop: ingesprongen, aan een haarlijn */
.rijen{margin-top:0;padding-left:0;border-left:0}
.rijen>*:first-child{margin-top:14px}
.hfd-kop{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  border-top:2px solid var(--ink);padding-top:16px}
.hfd-nr{font-family:var(--display);font-weight:800;font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--groen-diep)}
.hfd-kop h3{font-size:clamp(22px,2.8vw,34px);letter-spacing:-.025em}
.rij{display:grid;grid-template-columns:200px 1fr;gap:22px;align-items:center;
  padding:18px 0;border-bottom:1px solid rgba(20,32,26,.14);text-decoration:none}
.rij:hover{background:var(--creme-diep)}
.rij img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px}
.rij .rk{font-family:var(--display);font-weight:800;font-size:clamp(17px,1.8vw,22px);
  letter-spacing:-.02em;line-height:1.15;display:block}
.rij .rp{font-size:15px;line-height:1.5;color:var(--ink-zacht);display:block;margin-top:6px}
.rij .rd{font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-zacht);display:block;margin-top:9px}
.nieuw-stuk{background:var(--creme-diep);border-radius:14px;padding:18px 20px;
  border-bottom:1px solid rgba(20,32,26,.14);margin-top:0}
.nieuw-stuk b{display:block;line-height:1.25;font-family:var(--display);font-size:15px;letter-spacing:-.01em}
.nieuw-stuk span{display:block;font-size:14.5px;color:var(--ink-zacht);margin-top:5px;line-height:1.5}
@media (max-width:900px){
  .voorwie-in{grid-template-columns:1fr}
  .nieuws-grid{grid-template-columns:1fr}
  .rij{grid-template-columns:110px 1fr;gap:15px}
}

/* ================= v5 · commentaarronde 27-08 ================= */
/* 818: hoofdstuknummer BOVEN de titel, niet ernaast */
.hfd-kop{display:block}
.hfd-nr{display:block;margin-bottom:8px}
/* 814: logo groot, in de hoek van de foto */
.persoonkaart{position:relative}
.fotohoek{position:relative;display:block}
.fotohoek .vlag{position:absolute;right:-10px;bottom:-10px;background:var(--creme);
  border-radius:14px;padding:9px 12px;box-shadow:0 6px 16px rgba(20,32,26,.18);
  display:flex;align-items:center}
.fotohoek .vlag img{height:30px;width:auto;border-radius:0;aspect-ratio:auto;box-shadow:none}
/* thumbnails zijn nu breedbeeld */
.rij{grid-template-columns:280px 1fr}
.rij img{aspect-ratio:16/9;border-radius:12px}
.nieuwskaart img{aspect-ratio:16/9}
/* hero met portret */
.hero-beeld img.portret{aspect-ratio:auto;object-fit:contain;border-radius:0;box-shadow:none;
  filter:drop-shadow(0 18px 34px rgba(20,32,26,.28))}
@media (max-width:900px){ .rij{grid-template-columns:130px 1fr} }

/* ================= v6 · hero compacter (Menno 27-08: "veel te groot") ================= */
.hero-vlak{padding:clamp(26px,3.2vw,44px);align-items:center}
.hero h1{font-size:clamp(30px,3.9vw,52px);margin:12px 0 16px;max-width:20ch}
/* hero C, gekozen door Menno 28-08: drie zinnen in een kop, de laatste in creme */
.hero h1{max-width:26ch;font-size:clamp(28px,3.35vw,45px)}
.h1-accent{color:var(--creme)}
.hero .hero-lead{font-size:clamp(15px,1.25vw,17px);max-width:52ch}
.hero .stelling{margin-top:14px;font-size:clamp(16px,1.5vw,20px);max-width:30ch}
.hero-onder{margin-top:20px}
.hero-beeld img{aspect-ratio:1/1;border-radius:22px}
.hero-vlak::after{width:320px;height:320px;right:-90px;bottom:-120px}


/* ---------- hoofdstukken op smal scherm ---------- */
@media (max-width:640px){
  .hfd-body{grid-template-columns:1fr;gap:14px;padding:0 16px 16px}
  .hfd-beeld{aspect-ratio:1/1;max-width:260px;margin:0 auto}
  .hfd-praat{font-size:14.5px}
  .deel{gap:10px;flex-wrap:wrap}
  .deel-lijn{min-width:20px}
  .deel-jaar{flex-basis:100%;margin-top:2px}
}


/* ---------- TIJDLIJN: de techniek naast Menno ---------- */
.tijdlijn{margin:clamp(30px,4vw,46px) 0 clamp(10px,2vw,18px);
  border:1px solid rgba(20,32,26,.14);border-radius:var(--r-kaart);overflow:hidden;background:#fff}
.tl-kop{padding:16px 20px;background:var(--creme-diep);border-bottom:1px solid rgba(20,32,26,.12)}
.tl-kop b{font-family:var(--display);font-size:clamp(15px,1.6vw,18px);letter-spacing:-.01em;display:block}
.tl-kop span{display:block;margin-top:4px;font-size:13.5px;color:var(--ink-zacht);line-height:1.45}
.tl-rij{display:grid;grid-template-columns:112px 1fr 1fr;gap:0;
  border-top:1px solid rgba(20,32,26,.08)}
.tl-rij:first-of-type{border-top:0}
.tl-rij>*{padding:12px 16px;font-size:13.5px;line-height:1.45}
.tl-jaar{font-family:var(--display);font-weight:800;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-zacht);background:var(--creme)}
.tl-wereld{border-left:1px solid rgba(20,32,26,.08)}
.tl-ik{border-left:1px solid rgba(20,32,26,.08);background:rgba(62,212,127,.07)}
.tl-legenda{display:grid;grid-template-columns:112px 1fr 1fr;
  border-top:1px solid rgba(20,32,26,.12);background:var(--creme-diep)}
.tl-legenda>*{padding:9px 16px;font-size:11px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-zacht)}
.tl-legenda>*+*{border-left:1px solid rgba(20,32,26,.08)}
.tl-slot{padding:14px 20px;border-top:1px solid rgba(20,32,26,.12);
  font-size:14px;line-height:1.55;color:var(--ink-zacht);background:var(--creme)}
.tl-slot b{color:var(--ink)}
@media (max-width:720px){
  .tl-rij,.tl-legenda{grid-template-columns:74px 1fr}
  .tl-rij>*,.tl-legenda>*{padding:10px 12px;font-size:13px}
  .tl-legenda>*:nth-child(3){display:none}
  .tl-ik{grid-column:2;border-left:0;border-top:1px dashed rgba(20,32,26,.14)}
}

/* een rij zonder beeld (nog te schrijven stuk) blijft uitgelijnd */
.rij:not(:has(img)){grid-template-columns:1fr}
.rij:not(:has(img)) .rd{color:var(--groen-diep)}

/* ---------- portret in de header van Over Menno ---------- */
.vh-met-portret{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(24px,4vw,52px);align-items:center}
.vh-portret{margin:0}
.vh-portret img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;
  border-radius:var(--r-kaart);background:var(--creme-diep)}
@media (max-width:820px){
  .vh-met-portret{grid-template-columns:1fr;gap:26px}
  .vh-portret{order:-1;max-width:230px}
}

/* ---------- de teller ---------- */
.teller{margin:22px 0 30px;padding:20px 24px;background:var(--creme-diep);border-radius:var(--r-kaart)}
.teller-cijfers{display:flex;flex-wrap:wrap;gap:clamp(24px,5vw,64px)}
.tc{display:flex;align-items:baseline;gap:10px}
.tc b{font-family:var(--display);font-weight:800;font-size:clamp(34px,5vw,52px);line-height:1;
  letter-spacing:-.03em;color:var(--groen-diep)}
.tc i{font-style:normal;font-size:14px;color:var(--ink-zacht);max-width:11ch;line-height:1.3}
.teller-uitleg{margin:16px 0 0;font-size:14px;line-height:1.55;color:var(--ink-zacht);max-width:64ch}
.persoonkaart.open{border:1px dashed rgba(20,32,26,.3);background:transparent}
.fotohoek.leeg{display:flex;align-items:center;justify-content:center;background:var(--creme-diep);
  border-radius:18px;aspect-ratio:1/1}
.plusteken{font-family:var(--display);font-weight:800;font-size:40px;color:var(--ink-zacht);line-height:1}
@media (max-width:640px){ .teller{padding:16px 18px} .tc i{max-width:none} }

/* ---------- knop ---------- */
.knop-donker{display:inline-block;background:var(--ink);color:var(--creme);text-decoration:none;
  font-family:var(--tekst);font-weight:600;font-size:15px;padding:13px 24px;border-radius:var(--r-pil)}
.knop-donker:hover{background:#0b1512}

/* wie de lezer is, klein onder de hero-tekst */
.hero-wie{margin:20px 0 0;font-size:14.5px;line-height:1.55;color:rgba(20,32,26,.9);max-width:48ch;
  border-left:2px solid rgba(20,32,26,.28);padding-left:14px}

/* ---------- stappen met kleur ---------- */
#stappen,#stramien{margin-top:clamp(48px,7vw,84px)}
.stappen{display:grid;gap:16px;margin-top:26px}
.stap{position:relative;padding:26px 28px 26px 92px;border-radius:var(--r-kaart)}
.stap.groen{background:var(--groen)}
.stap.boter{background:var(--boter)}
.stap.klei{background:var(--klei)}
.stap-nr{position:absolute;left:28px;top:24px;font-family:var(--display);font-weight:800;
  font-size:34px;line-height:1;letter-spacing:-.03em;color:rgba(20,32,26,.35)}
.stap h3{font-size:clamp(19px,2.2vw,26px);letter-spacing:-.02em}
.stap p{margin:8px 0 0;font-size:15.5px;line-height:1.55;max-width:60ch;color:rgba(20,32,26,.82)}
.raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-top:26px}
.kaartje{background:var(--creme-diep);border-radius:18px;padding:22px 24px}
.kaartje h3{font-size:17px;letter-spacing:-.01em}
.kaartje p{margin:8px 0 0;font-size:14.5px;line-height:1.55;color:var(--ink-zacht)}
@media (max-width:640px){
  .stap{padding:22px 20px 22px 20px}
  .stap-nr{position:static;display:block;margin-bottom:6px;font-size:28px}
}

/* ---------- taaktabel op Over mij ---------- */
.taaktabel{width:100%;border-collapse:collapse;margin-top:24px;font-size:15px}
.taaktabel tr.groep th{text-align:left;font-family:var(--display);font-weight:800;font-size:13px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--groen-diep);
  padding:22px 0 8px;border-bottom:2px solid var(--ink)}
.taaktabel tr.groep th span{float:right;color:var(--ink-zacht);font-size:12px;letter-spacing:.06em}
.taaktabel td{padding:9px 12px 9px 0;border-bottom:1px solid rgba(20,32,26,.08);vertical-align:top;
  line-height:1.45}
.taaktabel td.nr{width:36px;font-family:var(--display);font-weight:800;font-size:12px;
  color:var(--ink-zacht);padding-top:11px}
.taaktabel td.staat{width:150px;font-size:12.5px;color:var(--ink-zacht);text-align:right;padding-top:11px}
@media (max-width:640px){
  .taaktabel{font-size:14px}
  .taaktabel td.staat{display:none}
  .taaktabel td.nr{width:26px}
}

/* ---------- tussenbeeld met bijschrift ---------- */
.tussenbeeld{margin:34px 0 0}
.tussenbeeld img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:var(--r-kaart)}
.tussenbeeld figcaption{margin-top:10px;font-size:13.5px;line-height:1.5;color:var(--ink-zacht);max-width:62ch}

/* ---------- In het kort — extraheerbaar blok (feedback 821) ---------- */
.nugget{padding:34px 0 46px;border-top:1px solid rgba(20,32,26,.14)}
.nugget h2{margin:0 0 20px}
.nugget-dl{margin:0;display:grid;gap:16px}
.nugget-dl dt{font-family:var(--display);font-weight:600;font-size:1.05rem;color:var(--ink)}
.nugget-dl dd{margin:5px 0 0;color:var(--ink-zacht);max-width:70ch;line-height:1.6}
.nugget-lijst{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:12px}
.nugget-lijst li{position:relative;padding-left:20px;color:var(--ink-zacht);line-height:1.6;max-width:70ch}
.nugget-lijst li:before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;
  border-radius:50%;background:var(--klei)}
.nugget-lijst li b{color:var(--ink);font-weight:600}
/* logo's groter, in de hoek van de foto (feedback 814) */
.fotohoek .vlag{right:-6px;bottom:-6px;padding:11px 15px;border-radius:16px}
.fotohoek .vlag img{height:auto;width:auto;max-height:44px;max-width:84px;object-fit:contain}
@media (max-width:640px){ .fotohoek .vlag img{max-height:34px;max-width:64px} }

/* ---------- De systeemplaat (feedback 849) ---------- */
.plaat{margin-top:26px;background:var(--creme-diep);border-radius:var(--r-vlak,20px);
  padding:26px 22px;display:grid;gap:2px;overflow-x:auto}
.pl-band{display:grid;gap:12px}
.pl-band + .pl-band{margin-top:2px}
.pl-label{font-family:var(--display);font-weight:600;font-size:.78rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-zacht)}
.pl-rij{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pl-rij-4{grid-template-columns:repeat(4,1fr)}
.pl-rij-2{grid-template-columns:repeat(2,1fr)}
.pl-blok{background:#fff;border:1px solid rgba(20,32,26,.12);border-radius:12px;
  padding:12px 14px;font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.35}
.pl-blok i{display:block;font-style:normal;font-weight:400;font-size:13px;
  color:var(--ink-zacht);margin-top:3px}
.pl-blok-zacht{background:transparent;border-style:dashed}
.pl-blok-uit{background:var(--creme);font-weight:400;font-size:14px}
.pl-pijl{text-align:center;color:var(--ink-zacht);font-size:20px;line-height:1.1;margin:2px 0}
.pl-ruit{background:var(--boter);border-radius:999px;padding:12px 26px;justify-self:center;
  font-family:var(--display);font-weight:600;color:var(--ink);text-align:center}
.pl-ruit i{display:block;font-style:normal;font-weight:400;font-size:13.5px;opacity:.75}
.pl-band:has(.pl-agent){grid-template-columns:1fr 250px;gap:14px;align-items:stretch}
.pl-agent{background:#fff;border:2px solid var(--groen-diep);border-radius:16px;padding:16px 18px;display:grid;gap:9px}
.pl-agent-kop{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pl-agent-kop b{font-family:var(--display);font-size:1.15rem}
.pl-agent-kop span{color:var(--ink-zacht);font-size:14px}
.pl-agent-kop em{margin-left:auto;font-style:normal;font-weight:600;font-size:14px;
  border:1.5px solid var(--groen-diep);color:var(--groen-diep);border-radius:999px;padding:3px 12px}
.pl-sub{font-size:13px;color:var(--groen-diep);font-weight:600}
.pl-poort{background:#fff;border:2px solid var(--klei);border-radius:16px;padding:16px 18px}
.pl-poort b{display:block;font-family:var(--display);font-size:1.05rem;color:var(--klei);margin-bottom:6px}
.pl-poort span{font-size:14px;color:var(--ink-zacht);line-height:1.5}
@media (max-width:820px){
  .plaat{padding:20px 16px}
  .pl-rij,.pl-rij-4,.pl-rij-2{grid-template-columns:repeat(2,1fr)}
  .pl-band:has(.pl-agent){grid-template-columns:1fr}
}
@media (max-width:520px){ .pl-rij,.pl-rij-4,.pl-rij-2{grid-template-columns:1fr} }

/* ---------- Takenlijst: groepsnaam links, taken rechts (feedback 850) ---------- */
.taaklijst{margin-top:26px;display:grid;gap:4px}
.taakgroep{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(20px,4vw,48px);
  padding:22px 0;border-top:1px solid rgba(20,32,26,.14)}
.tg-kop b{display:block;font-family:var(--display);font-weight:800;font-size:15px;
  letter-spacing:.01em;color:var(--ink);line-height:1.25}
.tg-kop span{display:block;margin-top:5px;font-size:12px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-zacht)}
.tg-taken{margin:0;padding:0;list-style:none;display:grid;gap:1px}
.tg-taken li{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:baseline;
  padding:9px 0;border-bottom:1px solid rgba(20,32,26,.08);font-size:15px;line-height:1.45}
.tg-taken li:last-child{border-bottom:0}
.tg-nr{font-family:var(--display);font-weight:800;font-size:12px;color:var(--ink-zacht);
  letter-spacing:.04em}
.tg-taken em{font-style:normal;font-size:12.5px;color:var(--ink-zacht);white-space:nowrap;
  padding-left:12px}
@media (max-width:760px){
  .taakgroep{grid-template-columns:1fr;gap:12px;padding:18px 0}
  .tg-taken li{grid-template-columns:28px minmax(0,1fr);gap:8px}
  .tg-taken em{grid-column:2;padding-left:0;margin-top:2px}
}

/* ---------- de belofte-regel direct onder de H1 ---------- */
.hero-belofte{margin:18px 0 0;font-family:var(--display);font-weight:600;
  font-size:clamp(19px,2.05vw,26px);line-height:1.3;letter-spacing:-.015em;
  color:var(--ink);max-width:32ch;margin-bottom:22px}
@media (max-width:900px){ .hero-belofte{max-width:none} }

/* ---------- de kascadering, diagram bij de Canoniek-methode ---------- */
.kas{margin:26px 0 0;display:grid;grid-template-columns:118px minmax(0,1fr) 118px;
  gap:14px;align-items:stretch}
.kas-lagen{display:grid;gap:10px}
.kas-laag{border-radius:14px;padding:14px 18px;border:1.5px solid transparent}
.kas-laag b{display:block;font-family:var(--display);font-weight:700;font-size:1.02rem;color:var(--ink)}
.kas-laag span{display:block;margin-top:3px;font-size:13.5px;line-height:1.45;color:var(--ink-zacht)}
.kas-1{background:#E6F7EE;border-color:var(--groen-diep)}
.kas-2{background:#FDF3D8;border-color:var(--boter)}
.kas-3{background:#FBEAE4;border-color:var(--klei)}
.kas-2{margin-left:26px}
.kas-3{margin-left:52px}
.kas-pijl{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  text-align:center;padding:10px 4px;border-radius:14px;background:var(--creme-diep)}
.kas-pijl b{font-family:var(--display);font-weight:700;font-size:13.5px;color:var(--ink)}
.kas-pijl span{font-size:11.5px;line-height:1.3;color:var(--ink-zacht)}
.kas-pijl i{font-style:normal;font-size:19px;color:var(--groen-diep);line-height:1}
.kas-schrijven i{color:var(--klei)}
.kas-noot{margin-top:14px;font-size:14px;line-height:1.55;color:var(--ink-zacht);max-width:62ch}
@media (max-width:760px){
  .kas{grid-template-columns:1fr;gap:10px}
  .kas-pijl{flex-direction:row;gap:8px;padding:9px 14px;justify-content:flex-start}
  .kas-2,.kas-3{margin-left:0}
  .kas-2{border-left-width:5px} .kas-3{border-left-width:9px}
}

/* ---------- plaat v2: logo's, System/Rules en de lus ---------- */
.pl-ic{width:20px;height:20px;flex:0 0 20px;display:block}
.pl-ic-groot{width:26px;height:26px;flex:0 0 26px}
.pl-blok{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.pl-blok > span{font-weight:600}
.pl-blok i{flex-basis:100%;margin-top:0}
.pl-label-2{margin-top:6px}
.pl-fijn{display:block;font-size:12.5px;line-height:1.4;color:var(--ink-zacht);margin-top:2px}
.pl-blok-paars{background:#fff;border-color:#B9A6E8}
.pl-erboven{background:#F4F1FB;border-radius:14px;padding:14px;gap:10px}
.pl-lus{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:2px}
.pl-lus span{font-size:12.5px;line-height:1.35;font-weight:600;padding:8px 12px;border-radius:10px}
.pl-lus-af{background:#EDE7FA;color:#5B3FA8}
.pl-lus-op{background:#E6F7EE;color:var(--groen-diep);text-align:right}
.pl-band-agent{margin-top:2px}
@media (max-width:820px){ .pl-lus{grid-template-columns:1fr} .pl-lus-op{text-align:left} }
.pl-poort{display:flex;flex-direction:column}
.pl-poort-rij{display:grid;gap:8px;margin-top:12px}
.pl-poort-rij .pl-blok{background:var(--creme);border-color:rgba(20,32,26,.10)}
.pl-poort-slot{margin-top:auto;padding-top:14px;font-style:normal;font-size:13px;
  font-weight:600;line-height:1.4;color:var(--klei)}

/* ---------- plaat v3: post en aanjagers naast elkaar, zoals op de bron ---------- */
.pl-top{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:18px;align-items:start}
.pl-kolom{display:grid;gap:10px;align-content:start}
.pl-kolom-rechts{background:#F7F3EC;border-radius:14px;padding:14px}
.pl-rij-1{grid-template-columns:1fr}
.pl-pijl-links{margin:0}
.pl-top .pl-ruit{justify-self:center}
.pl-omweg{display:flex;align-items:center;gap:10px;margin-top:2px;
  border-left:2px dashed rgba(20,32,26,.28);padding-left:12px}
.pl-omweg span{font-size:12.5px;line-height:1.35;font-weight:600;color:var(--ink-zacht)}
.pl-omweg i{font-style:normal;font-size:18px;color:var(--ink-zacht);margin-left:auto}
@media (max-width:820px){
  .pl-top{grid-template-columns:1fr}
  .pl-kolom-rechts{padding:12px}
}

/* ---------- plaat v4: System/Rules naast de stroom, niet erin ---------- */
.pl-top{grid-template-rows:auto auto}
.pl-kolom-verdeler{align-items:center;justify-items:center;gap:4px;align-content:start}
.pl-kolom-verdeler .pl-pijl{margin:0}
.pl-erboven{background:#F4F1FB;border-radius:14px;padding:14px;gap:8px;align-content:start}
.pl-erboven .pl-lus{margin-top:4px}
.pl-erboven .pl-fijn{color:#5B3FA8;font-weight:600}
@media (max-width:820px){ .pl-erboven{padding:12px} }
.pl-zijkant{display:grid;gap:12px;align-content:start}
.pl-aanjagers{background:#F7F3EC;border-radius:14px;padding:14px;display:grid;gap:10px;margin-top:2px}
.pl-aanjagers .pl-blok{align-content:start}
.pl-aanjagers .pl-omweg{margin-top:0}
@media (max-width:640px){ .pl-aanjagers .pl-rij{grid-template-columns:1fr} }

/* ---------- de claim-regel onder de H1 (feedback 870) ---------- */
.hero-claim{margin:14px 0 20px;font-family:var(--display);font-weight:800;
  font-size:clamp(20px,2.35vw,30px);line-height:1.2;letter-spacing:-.02em;
  color:var(--ink);max-width:22ch}
@media (max-width:900px){ .hero-claim{max-width:none;margin:12px 0 16px} }

/* ---------- hairline tussen opeenvolgende tekstblokken (feedback 876) ---------- */
.hairline{border-top:1px solid rgba(20,32,26,.14)}
.hairline > .voorwie-in, .hairline > h2{padding-top:clamp(28px,4vw,52px)}
.hairline.wie{padding-top:clamp(28px,4vw,52px)}

/* ---------- de doorlopende laag onder de stappen (feedback 894, 899) ---------- */
.stap-laag{margin-top:14px;background:var(--ink);color:var(--creme);border-radius:var(--r-kaart,18px);
  padding:clamp(22px,3vw,34px);display:grid;grid-template-columns:minmax(0,34fr) minmax(0,66fr);
  gap:clamp(18px,3vw,40px);align-items:start}
.laag-label{display:block;font-size:12px;letter-spacing:.09em;text-transform:uppercase;
  color:rgba(251,247,240,.62);margin-bottom:8px}
.stap-laag h3{margin:0;font-family:var(--display);font-weight:800;
  font-size:clamp(21px,2.4vw,30px);line-height:1.15;letter-spacing:-.02em;color:var(--creme)}
.stap-laag p{margin:0;color:rgba(251,247,240,.85);line-height:1.6;font-size:15.5px}
.stap-laag p + p{margin-top:12px}
@media (max-width:760px){ .stap-laag{grid-template-columns:1fr;gap:14px} }
.na-laag{margin-top:clamp(56px,7vw,84px)}
.hairline.z4, .hairline.z2{padding-top:clamp(28px,4vw,52px)}
.hairline > .z4-in, .hairline > .taaklijst{padding-top:0}
/* over-menno draagt de sectieruimte niet in .z2/.z4, dus expliciet (feedback: hairlines overal) */
.hairline.z4, .hairline.wrap#lijst{margin-top:clamp(56px,7vw,84px)}

/* ---------- 804 · het bureau zichtbaar bij de takenlijst ---------- */
#lijst .merklogo{gap:14px;align-items:center}
#lijst .merklogo img{height:auto;width:auto;max-height:52px;max-width:96px;opacity:1}
#lijst .merklogo span{font-size:12.5px;opacity:.7}

/* ================= HET ARTIKELFORMAT (Menno 28-08: foto + gekleurd vlak) ================= */
.artkaart{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,3vw,44px);align-items:end;
  background:var(--boter);border-radius:var(--r-vlak);
  padding:clamp(22px,2.6vw,34px);padding-bottom:0;
  text-decoration:none;color:var(--ink);overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease;
}
.artkaart:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(20,32,26,.14)}
.ak-beeld{display:block;align-self:end;line-height:0}
.ak-beeld img{width:clamp(160px,22vw,306px);height:auto;display:block}
.ak-tekst{display:block;padding-bottom:clamp(26px,3vw,38px);align-self:center}
.ak-datum{display:block;font-size:11.5px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(20,32,26,.62)}
.ak-kop{display:block;margin-top:10px;font-family:var(--display);font-weight:800;
  font-size:clamp(21px,2.9vw,38px);line-height:1.04;letter-spacing:-.025em;max-width:23ch}
.ak-sub{display:block;margin-top:12px;font-size:clamp(14.5px,1.15vw,16px);line-height:1.5;
  color:rgba(20,32,26,.78);max-width:52ch}
.ak-lees{display:inline-block;margin-top:16px;font-size:13px;font-weight:600;
  border-bottom:2px solid rgba(20,32,26,.28);padding-bottom:2px}
.artkaart:hover .ak-lees{border-bottom-color:var(--ink)}
@media (max-width:640px){
  .artkaart{grid-template-columns:1fr;gap:0;align-items:start}
  .ak-tekst{padding-bottom:22px;order:1}
  .ak-beeld{order:2;justify-self:start}
  .ak-beeld img{width:170px}
}
.cliff{margin-top:26px;padding-top:22px;border-top:1px solid rgba(20,32,26,.14);
  max-width:64ch;font-family:var(--display);font-weight:600;
  font-size:clamp(17px,1.6vw,21px);line-height:1.34;letter-spacing:-.015em}

/* het format ALS artikelkop (Menno 28-08: "moet ook de header van het artikel zijn") */
/* .hero nult de zijpadding van .wrap (regel 50 wint van regel 26), dus die zet ik hier terug
   -- anders steekt de kop 24px buiten de bodytekst van hetzelfde artikel */
.artkaart-kop{cursor:default;margin-left:24px;margin-right:24px}
.artkaart-kop:hover{transform:none;box-shadow:none}
.artkaart-kop .ak-kop{font-size:clamp(26px,3.6vw,48px);max-width:19ch}
.artkaart-kop .ak-sub{max-width:48ch;font-size:clamp(15px,1.3vw,17.5px)}

/* het format als THUMBNAIL — zelfde vlak, klein (Menno 28-08: "moet klein worden, zoals het was") */
.fotovlak{display:block;position:relative;overflow:hidden;background:var(--boter);
  border-radius:var(--r-kaart);aspect-ratio:16/10}
/* aspect-ratio en object-fit MOETEN hier terug naar auto: .nieuwskaart img en .rij img
   leggen er anders een 16/10 respectievelijk 4/3 met object-fit:cover overheen, en dan
   wordt de staande uitsnede tot een liggend kader gesneden -- precies door zijn hoofd. */
.fotovlak img{position:absolute;left:auto;right:4%;bottom:0;transform:none;
  width:auto;height:94%;max-width:none;display:block;aspect-ratio:auto;object-fit:contain}
.rij .fotovlak{aspect-ratio:16/9;border-radius:12px}
.rij .fotovlak img{height:96%}

/* ---- twee maten van hetzelfde format (Menno 28-08: "waarom niet de titel er in. Je had dit goed") ---- */
/* KLEIN — de smalle kaart op de homepage. ZELFDE OPBOUW als de grote en de rij:
   beeld links, tekst ernaast, alles IN het gekleurde vlak. Menno 28-08: "Waarom kan je in het
   kleine formaat geen titel erin zetten? Hier lukt dat toch ook?" -- eerder stond de tekst ONDER
   een beeldband, en dat leest als twee blokken in plaats van een kaart. */
.artkaart-klein{grid-template-columns:minmax(96px,38%) 1fr;gap:0;
  padding:clamp(16px,1.6vw,22px);padding-bottom:0;align-items:end}
.artkaart-klein .ak-beeld{align-self:end;margin-left:calc(-1 * clamp(16px,1.6vw,22px))}
.artkaart-klein .ak-beeld img{position:static;width:100%;height:auto;max-width:none;
  aspect-ratio:auto;object-fit:contain;transform:none}
.artkaart-klein .ak-tekst{padding:0 0 clamp(18px,2vw,24px) clamp(12px,1.4vw,18px);align-self:center}
.artkaart-klein .ak-datum{font-size:10.5px;letter-spacing:.1em}
.artkaart-klein .ak-kop{font-size:clamp(17px,1.45vw,20px);max-width:none;margin-top:7px;line-height:1.08}
.artkaart-klein .ak-lees{margin-top:12px;font-size:12px}

/* RIJ — compact en liggend op /nieuws/ */
.artkaart-rij{grid-template-columns:210px 1fr;gap:clamp(18px,2.4vw,34px);
  padding:clamp(18px,2vw,26px);padding-bottom:0;align-items:end}
.artkaart-rij .ak-beeld img{width:clamp(120px,13vw,186px)}
.artkaart-rij .ak-tekst{padding-bottom:clamp(20px,2.2vw,28px);align-self:center}
.artkaart-rij .ak-kop{font-size:clamp(20px,2.2vw,29px);max-width:22ch}
.artkaart-rij .ak-sub{max-width:56ch}
@media (max-width:640px){
  .artkaart-rij{grid-template-columns:1fr;gap:0}
  .artkaart-rij .ak-tekst{order:1;padding-bottom:20px}
  .artkaart-rij .ak-beeld{order:2;justify-self:end}
  .artkaart-rij .ak-beeld img{width:150px}
}

/* De mobiele regel van de GROTE kaart (.ak-beeld order:2 + justify-self:start) klapt de
   beeldband van de KLEINE kaart naar breedte 0, want daar staan alleen absolute kinderen in.
   De kleine kaart houdt op elke maat dezelfde opbouw: band boven, tekst eronder. */
@media (max-width:640px){
  /* de kleine kaart houdt op ELKE maat beeld-links-tekst-rechts; de mobiele omklap van de
     grote kaart mag hier niet grijpen */
  .artkaart-klein{grid-template-columns:minmax(96px,38%) 1fr;gap:0;align-items:end}
  .artkaart-klein .ak-beeld{order:0;align-self:end}
  .artkaart-klein .ak-tekst{order:1;align-self:center}
}

/* Menno 28-08: "Kan je de plaatjes weghalen als je naar mobiel schaalt? Dit hangt er nu maar een beetje
   onder zonder functie. Liever dan gewoon weghalen en de tekst het werk laten doen."
   900px is precies het punt waarop .hero-vlak naar een kolom klapt en het hero-beeld ONDER de tekst
   belandt; daaronder heeft het geen compositorische rol meer. Raakt alleen .hero-beeld -- de foto in
   .artkaart hoort bij het vlak en blijft, net als de portretten en de tussenbeelden. */
@media (max-width:900px){
  .hero-beeld{display:none}
  .hero-vlak{padding-bottom:clamp(26px,3.2vw,44px)}
}

/* ---- de zijmarge terug op de tekstsecties (Menno 28-08: "Bij In het kort loopt de marge niet goed") ----
   .wrap zet padding:0 24px op r.26, maar .z2 (r.72), .z4 (r.110) en .nugget (r.512) zetten daarna een
   VERTICALE padding met 0 aan de zijkant. Gelijke specificiteit, latere regel wint, dus de zijmarge viel
   weg en die secties begonnen op x=0 terwijl de rest van de pagina op 24 staat.
   Alleen deze drie: .hero houdt zijn eigen gedrag, want daar zit de inhoud in een gekleurd vlak met
   eigen padding en loopt het vlak bewust breder dan de tekstkolom. */
.z2.wrap, .z4.wrap, .nugget.wrap{padding-left:24px;padding-right:24px}