/*
Theme Name: Camerapaal
Description: Thema voor camerapaal.nl
Version: 3.1.0
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: camerapaal
*/

/* ---------- letters, zelf gehost ----------
   Dit was het enige externe verzoek dat de site nog deed. Zelf hosten scheelt
   een verbinding met een andere partij in het kritieke pad, en het haalt de
   vraag weg of er persoonsgegevens naar een lettertypedienst lekken.
   Alleen de latijnse stukken: Nederlands heeft de rest niet nodig.
   Archivo is een variabel bestand, dus vier gewichten uit één woff2. */
@font-face{font-family:'Archivo';font-style:normal;font-weight:500 800;font-display:swap;
  src:url(https://camerapaal.nl/wp-content/uploads/2026/08/archivo-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:normal;font-weight:500 800;font-display:swap;
  src:url(https://camerapaal.nl/wp-content/uploads/2026/08/archivo-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Caveat';font-style:normal;font-weight:600;font-display:swap;
  src:url(https://camerapaal.nl/wp-content/uploads/2026/08/caveat-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Caveat';font-style:normal;font-weight:600;font-display:swap;
  src:url(https://camerapaal.nl/wp-content/uploads/2026/08/caveat-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}


:root{
  --papier:#f4f6f3;
  --papier-diep:#e9ede8;
  --wit:#ffffff;
  --inkt:#101418;
  --inkt-zacht:#525a62;
  --rand:#dbe0da;
  --blauw:#1266d6;
  --blauw-diep:#0d4ea6;
  --blauw-licht:#e4eefc;
  --groen:#12a05c;
  --groen-diep:#0d7a46;
  --staal:#9aa3ab;
  --max:1220px;
  --smal:700px;
  --r:16px;
  --r-klein:11px;
  --kop:"Archivo","Segoe UI",-apple-system,"Arial Black",sans-serif;
  --body:"Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;
  --hand:"Caveat","Segoe Script",cursive;
  --schaduw:0 1px 2px rgba(16,20,24,.05), 0 12px 34px rgba(16,20,24,.08);
  --schaduw-diep:0 20px 60px rgba(16,20,24,.16);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;color:var(--inkt);font:400 17px/1.62 var(--body);overflow-x:hidden;
  background-color:var(--papier);
  background-image:radial-gradient(rgba(16,20,24,.075) 1px, transparent 1px);
  background-size:22px 22px;
}
img,svg,video,iframe{max-width:100%;height:auto;display:block}
a{color:var(--blauw);text-underline-offset:3px}
a:hover{color:var(--blauw-diep)}

h1,h2,h3,h4{font-family:var(--kop);line-height:1.02;letter-spacing:-.03em;margin:0 0 .45em;font-weight:800}
h1{font-size:clamp(2.5rem,1.4rem + 4.6vw,4.9rem)}
h2{font-size:clamp(1.95rem,1.35rem + 2.5vw,3.35rem);margin-top:0}
h3{font-size:clamp(1.2rem,1.06rem + .55vw,1.45rem);line-height:1.16}
p,ul,ol{margin:0 0 1.15em}
ul,ol{padding-left:1.15em}
li{margin-bottom:.4em}
strong{font-weight:600}

.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 22px}
.smal{max-width:var(--smal)}
.sectie{padding:clamp(3rem,2rem + 4vw,5.5rem) 0}
.sectie--rust{background:var(--papier-diep)}
.sectie--wit{background:var(--wit)}
.sectie--donker{background:var(--inkt);color:#d7dce1;background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);background-size:22px 22px}
.sectie--donker h2,.sectie--donker h3{color:var(--wit)}
.sectie--donker a{color:#8dc0f5}

/* ---------- het veegje: markering met een geschilderde rand ---------- */
.veeg{position:relative;white-space:nowrap;color:var(--wit);padding:0 .18em;z-index:0}
.veeg::before{
  content:"";position:absolute;z-index:-1;left:-.16em;right:-.16em;top:.02em;bottom:.06em;
  background:var(--blauw);
  border-radius:18px 22px 20px 24px / 26px 20px 24px 22px;
  transform:rotate(-.8deg);
}
.veeg--groen::before{background:var(--groen)}
.veeg--inkt::before{background:var(--inkt)}

/* ---------- sectie-opschrift met het paal-oogje ---------- */
.hoed{display:flex;align-items:center;gap:11px;font-family:var(--body);font-size:.74rem;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:var(--inkt-zacht);margin:0 0 1.1em}
.hoed svg{width:44px;height:20px;flex:0 0 auto;overflow:visible}
.sectie--donker .hoed{color:#9aa3ab}

/* ---------- handgeschreven notitie met pijl ---------- */
.notitie{position:relative;font-family:var(--hand);font-size:1.32rem;line-height:1.2;color:var(--inkt);
  transform:rotate(-2deg);display:inline-block;max-width:22ch}
.notitie svg{position:absolute;width:64px;height:44px;overflow:visible;stroke:var(--inkt);fill:none;stroke-width:1.8;
  stroke-linecap:round}
.notitie--rechts svg{right:-58px;top:60%}
.notitie--onder svg{left:40%;top:100%}

/* ---------- sticker ---------- */
.sticker{display:inline-block;background:var(--inkt);color:var(--wit);font-family:var(--body);font-weight:800;
  font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;padding:8px 14px;border-radius:999px;
  transform:rotate(-2.5deg);box-shadow:var(--schaduw)}
.sticker--blauw{background:var(--blauw)}
.sticker--groen{background:var(--groen)}

/* ---------- bovenbalk ---------- */
.balk{background:var(--inkt);color:#aeb6bd;font-size:.83rem}
.balk__in{display:flex;align-items:center;gap:18px;min-height:38px}
.balk a{color:#aeb6bd;text-decoration:none}
.balk a:hover{color:var(--wit)}
.balk__doel{display:flex;gap:16px;margin-right:auto;font-weight:600}
.balk__doel a.is-aan{color:var(--wit)}
.balk__rechts{display:flex;gap:18px;align-items:center}
.balk__rechts strong{color:var(--wit)}
.balk__rechts a{white-space:nowrap}
@media(max-width:760px){
  .balk__doel{display:none}
  .balk__in{justify-content:center;min-height:34px}
  .balk__rechts{margin:0 auto;gap:14px;font-size:.8rem}
  .balk__moeder{display:none}
}

/* ---------- hoofdmenu ---------- */
.kop{position:sticky;top:0;z-index:80;background:var(--wit);border-bottom:1px solid var(--rand);box-shadow:0 1px 0 rgba(16,20,24,.02)}
.kop__in{display:flex;align-items:center;gap:14px;min-height:76px}
.kop__merk{display:flex;align-items:center;text-decoration:none;margin-right:auto}
.kop__merk svg{height:34px;width:auto;overflow:visible}
.kop__nav{display:flex;align-items:center;gap:4px}
.kop__item{position:relative}
.kop__item > a{display:inline-flex;align-items:center;gap:6px;padding:12px 14px;border-radius:10px;
  color:var(--inkt);text-decoration:none;font-size:.95rem;font-weight:600;white-space:nowrap}
.kop__item > a:hover{background:var(--papier);color:var(--blauw)}
.kop__item > a .pijl{width:9px;height:9px;border-right:2px solid var(--staal);border-bottom:2px solid var(--staal);
  transform:translateY(-2px) rotate(45deg);transition:transform .16s}
.kop__item:hover > a .pijl{transform:translateY(1px) rotate(225deg)}
.kop__uit{position:absolute;left:0;top:100%;min-width:264px;background:var(--wit);border:1px solid var(--rand);
  border-radius:var(--r);box-shadow:var(--schaduw-diep);padding:10px;opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .16s,transform .16s,visibility .16s}
.kop__item:hover .kop__uit,.kop__item:focus-within .kop__uit{opacity:1;visibility:visible;transform:translateY(0)}
.kop__uit a{display:block;padding:10px 12px;border-radius:9px;color:var(--inkt);text-decoration:none;font-size:.94rem}
.kop__uit a:hover{background:var(--blauw-licht);color:var(--blauw-diep)}
.kop__uit b{display:block;font-weight:700}
.kop__uit span{display:block;font-size:.83rem;color:var(--inkt-zacht);margin-top:1px}
.kop__cta{background:var(--blauw);color:var(--wit);text-decoration:none;font-weight:800;font-size:.93rem;
  padding:14px 22px;border-radius:999px;white-space:nowrap;box-shadow:0 6px 18px rgba(18,102,214,.28)}
.kop__cta:hover{background:var(--blauw-diep);color:var(--wit)}
.kop__knop{display:none;background:none;border:1px solid var(--rand);border-radius:11px;padding:11px 12px;cursor:pointer}
.kop__knop span{display:block;width:19px;height:2px;background:var(--inkt);margin:4px 0;border-radius:2px}

@media(max-width:1100px){
  .kop__nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--wit);border-bottom:1px solid var(--rand);
    flex-direction:column;align-items:stretch;gap:0;padding:10px 22px 20px;box-shadow:var(--schaduw)}
  .kop__nav.open{display:flex}
  .kop__item > a{padding:14px 0;border-bottom:1px solid var(--papier-diep);border-radius:0;font-size:1.02rem}
  .kop__item > a .pijl{margin-left:auto}
  .kop__uit{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;padding:4px 0 12px 12px;min-width:0;display:none}
  .kop__item.open .kop__uit{display:block}
  .kop__knop{display:block}
  .kop__cta{display:none}
}

/* ---------- zweefknoppen rechts ---------- */
.zweef{position:fixed;right:16px;bottom:16px;z-index:75;display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.zweef a{display:inline-flex;align-items:center;gap:9px;padding:12px 18px;border-radius:999px;color:var(--wit);
  /* De voet is even donker als de belknop. Zonder rand verdween hij daar volledig. */
  border:1px solid rgba(255,255,255,.28);
  text-decoration:none;font-weight:700;font-size:.93rem;box-shadow:var(--schaduw-diep)}
.zweef a svg{width:19px;height:19px;flex:0 0 auto}
.zweef__app{background:var(--groen)}
.zweef__app:hover{background:var(--groen-diep);color:var(--wit)}
.zweef__bel{background:var(--inkt)}
.zweef__bel:hover{background:#000;color:var(--wit)}
@media(max-width:620px){.zweef a span{display:none}.zweef a{padding:15px}}

/* ---------- zijtab ---------- */
.zijtab{position:fixed;left:0;top:46%;z-index:74;transform:rotate(-90deg);transform-origin:left top;
  background:var(--blauw);color:var(--wit);text-decoration:none;font-weight:800;font-size:.8rem;letter-spacing:.1em;
  text-transform:uppercase;padding:12px 20px;border-radius:0 0 10px 10px;box-shadow:var(--schaduw)}
.zijtab:hover{background:var(--blauw-diep);color:var(--wit)}
@media(max-width:1100px){.zijtab{display:none}}

/* ---------- hero ---------- */
.hero{padding:clamp(2.5rem,1.6rem + 3.6vw,4.5rem) 0 clamp(2rem,1.4rem + 2.4vw,3.5rem);position:relative}
.hero__raster{display:grid;grid-template-columns:1fr;gap:clamp(2.2rem,1.4rem + 3vw,4rem);align-items:center}
@media(min-width:980px){.hero__raster{grid-template-columns:1.05fr .95fr}}
.hero h1{margin-bottom:.32em}
.hero__lead{font-size:clamp(1.06rem,1rem + .45vw,1.26rem);color:var(--inkt-zacht);max-width:47ch;margin-bottom:1.7em}
.hero__acties{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hero__bewijs{display:flex;flex-wrap:wrap;gap:10px 20px;margin-top:2.1em;padding-top:1.3em;border-top:1px dashed var(--rand);
  font-size:.86rem;font-weight:700;color:var(--inkt-zacht)}
.hero__bewijs span{display:inline-flex;align-items:center;gap:8px}
.hero__bewijs svg{width:15px;height:15px;color:var(--groen);flex:0 0 auto}

/* het beeld in de hero: iets scheef, met sticker en notitie */
.hero__beeld{position:relative}
.hero__beeld figure{margin:0;transform:rotate(1.1deg)}
.hero__beeld img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r);box-shadow:var(--schaduw-diep);
  border:6px solid var(--wit)}
.hero__sticker{position:absolute;left:-14px;top:18px;z-index:3}
.hero__notitie{position:absolute;left:4%;bottom:-42px;z-index:3}
@media(max-width:980px){.hero__notitie{position:static;display:block;margin-top:22px}.hero__sticker{left:6px}}

/* ---------- knoppen ---------- */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 28px;border-radius:999px;
  font-weight:800;text-decoration:none;border:2px solid transparent;cursor:pointer;font-size:1rem;line-height:1;font-family:var(--body)}
.knop--a{background:var(--blauw);color:var(--wit);box-shadow:0 8px 22px rgba(18,102,214,.3)}
.knop--a:hover{background:var(--blauw-diep);color:var(--wit);transform:translateY(-1px)}
.knop--b{background:var(--wit);color:var(--inkt);border-color:var(--inkt)}
.knop--b:hover{background:var(--inkt);color:var(--wit)}
.knop--app{background:var(--groen);color:var(--wit);box-shadow:0 8px 22px rgba(18,160,92,.28)}
.knop--app:hover{background:var(--groen-diep);color:var(--wit)}
.knop svg{width:19px;height:19px;flex:0 0 auto}
.sectie--donker .knop--b,.cta .knop--b{background:transparent;color:var(--wit);border-color:rgba(255,255,255,.6)}
.sectie--donker .knop--b:hover,.cta .knop--b:hover{background:var(--wit);color:var(--inkt)}

/* ---------- beeld ---------- */
.beeld{margin:0}
.beeld img{width:100%;border-radius:var(--r);background:var(--papier-diep)}
.beeld figcaption{font-size:.85rem;line-height:1.45;color:var(--inkt-zacht);margin-top:.8em;padding-left:14px;
  border-left:3px solid var(--staal);max-width:46ch}
.beeld--staand img{aspect-ratio:3/4;object-fit:cover}
.beeld--breed img{aspect-ratio:16/9;object-fit:cover}
.beeld--vier img{aspect-ratio:4/3;object-fit:cover}

/* ---------- de drie lagen ---------- */
.lagen{display:grid;gap:20px;grid-template-columns:1fr;counter-reset:laag}
@media(min-width:860px){.lagen{grid-template-columns:repeat(3,1fr)}}
.laag{position:relative;display:flex;flex-direction:column;text-decoration:none;color:inherit;background:var(--wit);
  border:1px solid var(--rand);border-radius:var(--r);overflow:hidden;transition:transform .18s,box-shadow .18s}
.laag:hover{transform:translateY(-5px);box-shadow:var(--schaduw-diep);color:inherit}
.laag__beeld{aspect-ratio:5/4;overflow:hidden;background:var(--papier-diep);position:relative}
.laag__beeld img{width:100%;height:100%;object-fit:cover;border-radius:0;transition:transform .5s}
.laag:hover .laag__beeld img{transform:scale(1.04)}
.laag__merk{position:absolute;left:14px;top:14px;background:var(--wit);color:var(--inkt);font-weight:800;font-size:.7rem;
  letter-spacing:.13em;text-transform:uppercase;padding:7px 12px;border-radius:999px;box-shadow:var(--schaduw)}
.laag__tekst{padding:22px}
.laag h3{margin:0 0 .45em}
.laag p{margin:0;color:var(--inkt-zacht);font-size:.97rem}
.laag__meer{margin-top:1em;font-weight:800;color:var(--blauw);font-size:.94rem;display:inline-flex;align-items:center;gap:7px}
.laag:hover .laag__meer{gap:11px}

/* ---------- rasters ---------- */
.raster{display:grid;gap:20px;grid-template-columns:1fr}
@media(min-width:700px){.raster--2{grid-template-columns:repeat(2,1fr)}.raster--3{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1020px){.raster--3{grid-template-columns:repeat(3,1fr)}}

.kaart{background:var(--wit);border:1px solid var(--rand);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;text-decoration:none;color:inherit;position:relative}
a.kaart{transition:transform .18s,box-shadow .18s}
a.kaart:hover{transform:translateY(-5px);box-shadow:var(--schaduw-diep);color:inherit}
.kaart__beeld{aspect-ratio:4/3;background:var(--papier-diep);overflow:hidden}
.kaart__beeld img{width:100%;height:100%;object-fit:cover;border-radius:0;transition:transform .5s}
a.kaart:hover .kaart__beeld img{transform:scale(1.05)}
.kaart__tekst{padding:20px 22px 22px}
.kaart__tekst h2,.kaart__tekst h3{margin-top:0;margin-bottom:.4em;
  font-size:clamp(1.2rem,1.06rem + .55vw,1.45rem);line-height:1.16}
.kaart__tekst p{margin-bottom:0;color:var(--inkt-zacht);font-size:.95rem}

/* ---------- probleem ---------- */
.probleem{background:var(--wit);border:1px solid var(--rand);border-radius:var(--r);padding:26px}
.probleem__nr{font-family:var(--kop);font-size:2.4rem;font-weight:800;color:var(--blauw-licht);line-height:1;margin-bottom:.1em}
.probleem h3{margin-bottom:.5em}
.probleem p{color:var(--inkt-zacht)}

/* ---------- cijferband ---------- */
.cijfers{display:grid;gap:26px;grid-template-columns:repeat(2,1fr)}
@media(min-width:820px){.cijfers{grid-template-columns:repeat(4,1fr)}}
.cijfer strong{display:block;font-family:var(--kop);font-weight:800;letter-spacing:-.04em;line-height:1;
  font-size:clamp(2.4rem,1.6rem + 3vw,4rem);color:var(--wit)}
.cijfer span{display:block;color:#9aa3ab;font-size:.92rem;margin-top:.6em;max-width:24ch}

/* ---------- projectblok ---------- */
.project{display:grid;gap:0;grid-template-columns:1fr;background:var(--wit);border:1px solid var(--rand);
  border-radius:var(--r);overflow:hidden;box-shadow:var(--schaduw)}
@media(min-width:900px){.project{grid-template-columns:.95fr 1.05fr}}
.project__beeld{aspect-ratio:4/3;background:var(--papier-diep);position:relative}
.project__beeld img{width:100%;height:100%;object-fit:cover;border-radius:0}
.project__tekst{padding:clamp(1.6rem,1.1rem + 2vw,2.8rem)}
.project__regel{display:grid;grid-template-columns:104px 1fr;gap:14px;padding:14px 0;border-top:1px dashed var(--rand)}
.project__regel dt{font-size:.72rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--inkt-zacht);padding-top:.3em}
.project__regel dd{margin:0;color:var(--inkt-zacht);font-size:.98rem}
@media(max-width:540px){.project__regel{grid-template-columns:1fr;gap:2px}}

/* ---------- stappen ---------- */
.stappen{display:grid;gap:24px;grid-template-columns:1fr}
@media(min-width:640px){.stappen{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.stappen{grid-template-columns:repeat(5,1fr);gap:16px}}
.stap{position:relative;padding-top:22px;border-top:2px solid rgba(255,255,255,.2)}
.stap__nr{position:absolute;top:-16px;left:0;background:var(--inkt);color:var(--wit);font-family:var(--kop);font-weight:800;
  width:32px;height:32px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-size:.95rem}
.stap h3{font-size:1.05rem;margin:1em 0 .45em}
.stap p{color:#9aa3ab;font-size:.93rem;margin:0}

/* ---------- kort antwoord ---------- */
.kort{background:var(--blauw-licht);border-radius:var(--r);padding:24px 28px;margin:0 0 2.2em;position:relative}
.kort__hoed{font-size:.73rem;text-transform:uppercase;letter-spacing:.15em;font-weight:800;color:var(--blauw-diep);margin-bottom:.55em}
.kort p:last-child{margin-bottom:0}

/* ---------- whatsapp-blok ---------- */
.app{display:grid;gap:clamp(1.6rem,1.1rem + 2vw,3rem);grid-template-columns:1fr;align-items:center;
  background:var(--wit);border:1px solid var(--rand);border-radius:var(--r);padding:clamp(1.7rem,1.2rem + 2vw,3rem);
  box-shadow:var(--schaduw)}
@media(min-width:860px){.app{grid-template-columns:1.12fr .88fr}}
.app h2{margin-bottom:.4em}
.app p{color:var(--inkt-zacht);max-width:50ch}
.app__beeld{position:relative}
.app__beeld img{border-radius:var(--r-klein);aspect-ratio:4/3;object-fit:cover;width:100%;transform:rotate(-1.4deg);
  box-shadow:var(--schaduw)}

/* ---------- video ---------- */
.video{position:relative;aspect-ratio:16/9;background:var(--inkt);border-radius:var(--r);overflow:hidden;cursor:pointer}
.video img{width:100%;height:100%;object-fit:cover;opacity:.78;transition:opacity .25s,transform .5s;border-radius:0}
.video:hover img{opacity:.62;transform:scale(1.03)}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video__knop{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:80px;height:80px;border-radius:50%;
  background:var(--wit);border:0;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;
  box-shadow:var(--schaduw-diep);transition:transform .18s}
.video:hover .video__knop{transform:translate(-50%,-50%) scale(1.07)}
.video__knop::after{content:"";border-left:22px solid var(--inkt);border-top:14px solid transparent;border-bottom:14px solid transparent;margin-left:6px}
.video__titel{position:absolute;left:0;right:0;bottom:0;padding:40px 24px 20px;
  background:linear-gradient(transparent,rgba(0,0,0,.84));color:var(--wit);font-weight:700;font-size:1.02rem}

/* ---------- strook ---------- */
.strook{display:grid;gap:20px;grid-template-columns:1fr}
@media(min-width:680px){.strook{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1020px){.strook{grid-template-columns:repeat(3,1fr)}}
.strook figure:nth-child(2){transform:translateY(22px)}
@media(max-width:680px){.strook figure:nth-child(2){transform:none}}

/* ---------- faq ---------- */
.faq details{background:var(--wit);border:1px solid var(--rand);border-radius:var(--r-klein);margin-bottom:10px}
.faq summary{cursor:pointer;padding:19px 50px 19px 22px;font-weight:700;position:relative;list-style:none;
  font-size:1.04rem;font-family:var(--kop);letter-spacing:-.015em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:20px;top:50%;width:10px;height:10px;
  border-right:2.5px solid var(--blauw);border-bottom:2.5px solid var(--blauw);transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.faq details[open]{border-color:var(--blauw);box-shadow:var(--schaduw)}
.faq details[open] summary::after{transform:translateY(-20%) rotate(-135deg)}
.faq details > div{padding:0 22px 20px;color:var(--inkt-zacht)}
.faq details > div p:last-child{margin-bottom:0}

/* ---------- cta ---------- */
.cta{background:var(--inkt);color:#d7dce1;border-radius:var(--r);padding:clamp(2rem,1.4rem + 2.6vw,3.4rem);
  display:grid;gap:28px;grid-template-columns:1fr;position:relative;overflow:hidden;
  background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);background-size:22px 22px}
@media(min-width:920px){.cta{grid-template-columns:1.1fr .9fr;align-items:center}}
.cta h2{color:var(--wit);margin-top:0}
.cta p{max-width:52ch}
.cta__acties{display:flex;flex-wrap:wrap;gap:12px;margin-top:1.6em}
.cta__beeld img{border-radius:var(--r-klein);aspect-ratio:4/3;object-fit:cover;width:100%;transform:rotate(1.6deg);box-shadow:var(--schaduw-diep)}

/* ---------- formulier ---------- */
.form{display:grid;gap:24px}
.form__rij{display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:620px){.form__rij{grid-template-columns:repeat(2,1fr)}}
.veld{display:flex;flex-direction:column;gap:7px}
.veld label{font-weight:700;font-size:.93rem}
.veld input,.veld select,.veld textarea{font:inherit;font-size:1rem;padding:14px 16px;border:1px solid var(--rand);
  border-radius:var(--r-klein);background:var(--wit);color:var(--inkt);width:100%}
.veld input:focus,.veld select:focus,.veld textarea:focus{outline:2px solid var(--blauw);outline-offset:1px;border-color:var(--blauw)}
.veld textarea{min-height:128px;resize:vertical}
.veld__hint{font-size:.86rem;color:var(--inkt-zacht)}
.form__val{position:absolute;left:-9999px}
.form__melding{padding:18px 20px;border-radius:var(--r-klein);font-weight:600}
.form__melding--ok{background:#e4f5ea;border:1px solid #a9d9bb;color:#15602f}
.form__melding--fout{background:#fdeaea;border:1px solid #e6b5b5;color:#8a2020}

.keuze{display:flex;flex-wrap:wrap;gap:10px}
.keuze input{position:absolute;opacity:0;width:0;height:0}
.keuze label{display:inline-flex;align-items:center;padding:12px 19px;border:2px solid var(--rand);border-radius:999px;
  background:var(--wit);cursor:pointer;font-size:.95rem;font-weight:600;transition:border-color .14s,background .14s,transform .14s}
.keuze label:hover{border-color:var(--blauw);transform:translateY(-1px)}
.keuze input:checked + label{background:var(--blauw);border-color:var(--blauw);color:var(--wit);font-weight:800}
.keuze input:focus-visible + label{outline:2px solid var(--blauw);outline-offset:2px}
.vraag{padding-top:24px;border-top:1px dashed var(--rand)}
.vraag > p{font-weight:800;font-size:1.06rem;margin:0 0 .9em;font-family:var(--kop);letter-spacing:-.02em}

/* ---------- inhoud ---------- */
.inhoud{max-width:var(--smal)}
.inhoud > *:first-child{margin-top:0}
.inhoud h2{margin-top:1.8em}
.inhoud h3{margin-top:1.6em}
.inhoud figure{margin:2.2em 0}
.inhoud figure img{width:100%;border-radius:var(--r)}
.inhoud figcaption{font-size:.85rem;color:var(--inkt-zacht);margin-top:.7em;padding-left:14px;border-left:3px solid var(--staal)}

.kruimel{font-size:.86rem;color:var(--inkt-zacht);padding:18px 0 0}
.kruimel a{color:var(--inkt-zacht)}
.kruimel span{color:var(--staal);margin:0 7px}

.lijst-schoon{list-style:none;padding:0}
.lijst-schoon li{position:relative;padding-left:30px;margin-bottom:.7em}
.lijst-schoon li::before{content:"";position:absolute;left:0;top:.42em;width:17px;height:17px;border-radius:999px;
  background:var(--blauw-licht)}
.lijst-schoon li::after{content:"";position:absolute;left:5px;top:.72em;width:6px;height:3px;border-left:2px solid var(--blauw);
  border-bottom:2px solid var(--blauw);transform:rotate(-45deg)}

.auteur{display:flex;gap:16px;align-items:center;border-top:1px dashed var(--rand);border-bottom:1px dashed var(--rand);
  padding:20px 0;margin:2.6em 0;font-size:.93rem;color:var(--inkt-zacht)}
.auteur strong{color:var(--inkt);display:block;font-family:var(--kop);font-size:1.04rem}

/* ---------- voet ---------- */
.voet{background:var(--inkt);color:#a9b1b8;padding:clamp(3rem,2.2rem + 2.4vw,4.5rem) 0 2.2rem;margin-top:clamp(3rem,2rem + 3vw,5rem);
  background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);background-size:22px 22px}
.voet a{color:#a9b1b8;text-decoration:none}
.voet a:hover{color:var(--wit)}
.voet__raster{display:grid;gap:34px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.voet h3{color:var(--wit);font-size:.95rem;margin:0 0 1em;font-family:var(--body);font-weight:800;letter-spacing:.03em}
.voet ul{list-style:none;padding:0;margin:0}
.voet li{margin-bottom:.6em;font-size:.94rem}
.voet__moeder{border-top:1px solid rgba(255,255,255,.14);margin-top:2.8rem;padding-top:1.7rem;display:flex;flex-wrap:wrap;
  gap:14px;align-items:center;justify-content:space-between;font-size:.9rem}
.voet__moeder strong{color:var(--wit)}

.overslaan{position:absolute;left:-9999px}
.overslaan:focus{left:14px;top:14px;z-index:100;background:var(--wit);padding:12px 18px;border-radius:var(--r-klein)}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}
  .hero__beeld figure,.sticker,.notitie,.strook figure:nth-child(2){transform:none!important}}

/* ---------- woordmerk: de laatste letter is de paal ---------- */
.merk{display:inline-flex;align-items:baseline;gap:.5px;font-family:var(--kop);font-weight:800;
  font-size:1.52rem;letter-spacing:-.035em;color:var(--inkt);line-height:1}
.merk__accent{color:var(--blauw)}
.merk__paal{width:.58em;height:1.14em;overflow:visible;align-self:flex-end;margin-bottom:-.06em;color:var(--blauw)}
.merk__lens{fill:var(--wit)}
.merk__grond{stroke:var(--inkt)}
.kop__merk:hover .merk{color:var(--blauw-diep)}
.kop__merk:hover .merk__accent,.kop__merk:hover .merk__paal{color:var(--blauw-diep)}
@media(max-width:560px){.merk{font-size:1.26rem}}

/* ---------- tekstpagina: tekst links, meelopend kaartje rechts ---------- */
.lees{display:grid;gap:clamp(2rem,1.4rem + 2.4vw,3.5rem);grid-template-columns:1fr;align-items:start}
@media(min-width:1000px){.lees{grid-template-columns:minmax(0,1fr) minmax(260px,320px)}}
.lees .inhoud{max-width:none}
.lees h2{font-size:clamp(1.5rem,1.2rem + 1.1vw,2.05rem);margin-top:1.9em}
.lees h3{font-size:clamp(1.12rem,1.04rem + .38vw,1.28rem)}
.zij{position:sticky;top:104px;display:flex;flex-direction:column;gap:18px}
.zij__kaart{background:var(--wit);border:1px solid var(--rand);border-radius:var(--r);overflow:hidden}
.zij__kaart img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:0}
.zij__tekst{padding:20px}
.zij__tekst p:last-child{margin-bottom:0}
.zij__tekst h3{margin:0 0 .5em;font-size:1.1rem}
.zij__tekst .knop{width:100%;margin-top:.6em;padding:13px 18px;font-size:.94rem}
.zij__bij{font-size:.84rem;color:var(--inkt-zacht);line-height:1.45;padding:14px 20px 0}
@media(max-width:999px){.zij{position:static}}

/* ---------- tekentool ---------- */
.tt{display:grid;gap:22px;grid-template-columns:1fr;align-items:start}
@media(min-width:900px){
  .tt{grid-template-columns:minmax(0,1fr) minmax(280px,340px);grid-template-areas:"knoppen knoppen" "beeld uit"}
  .tt__knoppen{grid-area:knoppen}.tt__beeld{grid-area:beeld}.tt__uit{grid-area:uit}
}

.tt__knoppen{display:grid;gap:20px;grid-template-columns:1fr;background:var(--wit);
  border:1px solid var(--rand);border-radius:var(--r);padding:22px}
@media(min-width:760px){.tt__knoppen{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.tt__knoppen{grid-template-columns:1.2fr 1.4fr .8fr .8fr}}
.tt__label{display:block;font-size:.8rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--inkt-zacht);margin-bottom:.7em}
.tt__label b{color:var(--blauw);letter-spacing:0;text-transform:none;font-size:.95rem}
.keuze--klein{gap:7px}
.tt__k{font:inherit;font-size:.9rem;font-weight:600;padding:10px 15px;border:2px solid var(--rand);
  border-radius:999px;background:var(--wit);color:var(--inkt);cursor:pointer;transition:border-color .14s,background .14s}
.tt__k:hover{border-color:var(--blauw)}
.tt__k.is-aan{background:var(--blauw);border-color:var(--blauw);color:var(--wit);font-weight:800}
.tt__hint{font-size:.86rem;color:var(--inkt-zacht);margin:.9em 0 0;line-height:1.45}
.tt__groep--schuif input[type=range]{width:100%;accent-color:var(--blauw)}

.tt__beeld{background:var(--wit);border:1px solid var(--rand);border-radius:var(--r);padding:16px}
.tt__plan{width:100%;height:auto;border-radius:var(--r-klein);touch-action:none;cursor:grab;background:var(--papier)}
.tt__zij{width:100%;height:auto;margin-top:10px;background:var(--papier);border-radius:var(--r-klein)}
.tt-grijp{cursor:grab}
.tt__uitleg{font-size:.87rem;color:var(--inkt-zacht);margin:.9em 0 0}
.tt__stip{display:inline-block;width:11px;height:11px;border-radius:50%;vertical-align:middle;margin:0 2px}
.tt__stip--paal{background:var(--blauw)}
.tt__stip--richt{background:var(--wit);border:2px solid var(--inkt)}

.tt__uit{background:var(--wit);border:1px solid var(--rand);border-radius:var(--r);padding:24px;
  position:sticky;top:104px}
@media(max-width:899px){.tt__uit{position:static}}
.tt-uitslag{margin:0 0 1.2em}
.tt-uitslag div{display:flex;justify-content:space-between;gap:12px;align-items:baseline;
  padding:9px 0;border-bottom:1px dashed var(--rand)}
.tt-uitslag dt{color:var(--inkt-zacht);font-size:.93rem}
.tt-uitslag dd{margin:0;font-family:var(--kop);font-weight:800;font-size:1.1rem;white-space:nowrap}
.tt-opmerking{background:var(--blauw-licht);border-radius:var(--r-klein);padding:14px 16px;
  font-size:.92rem;color:var(--inkt);margin:0 0 1.2em}
.tt__legenda{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.82rem;color:var(--inkt-zacht);margin-bottom:1.4em}
.tt__legenda span{display:inline-flex;align-items:center;gap:6px}
.tt__legenda i{width:12px;height:12px;border-radius:3px;display:inline-block}
.tt__uit .knop{width:100%}
.tt__klein{font-size:.8rem;color:var(--inkt-zacht);margin:1.1em 0 0;line-height:1.5}
/* op de toolpagina telt het speeltje, niet de kop */
.page-template-page-tekentool h1{font-size:clamp(1.9rem,1.4rem + 1.9vw,2.9rem)}
.tt__groep--schuif .tt__label{white-space:nowrap}

/* ---------- tekentool: eigen adres ---------- */
@media(min-width:900px){
  .tt--adres{grid-template-areas:"adres adres" "knoppen knoppen" "beeld uit"}
  .tt--adres .tt__adres{grid-area:adres}
}
.tt__adres{background:var(--wit);border:1px solid var(--rand);border-radius:var(--r);
  padding:22px;display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:820px){.tt__adres{grid-template-columns:minmax(0,1fr) auto;align-items:start}
  .tt__adres .tt__hint{grid-column:1}
  .tt__uitsnede{grid-column:2;grid-row:1 / span 2}}
.tt__zoek{position:relative}
.tt__zoek input{font:inherit;font-size:1.05rem;padding:15px 18px;width:100%;border:2px solid var(--rand);
  border-radius:999px;background:var(--wit);color:var(--inkt)}
.tt__zoek input:focus{outline:2px solid var(--blauw);outline-offset:1px;border-color:var(--blauw)}
.tt__lijst{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:20;background:var(--wit);
  border:1px solid var(--rand);border-radius:var(--r);box-shadow:var(--schaduw-diep);overflow:hidden}
.tt__suggestie{display:block;width:100%;text-align:left;font:inherit;font-size:.96rem;padding:12px 16px;
  background:none;border:0;border-bottom:1px solid var(--papier-diep);cursor:pointer;color:var(--inkt)}
.tt__suggestie:last-child{border-bottom:0}
.tt__suggestie:hover{background:var(--blauw-licht);color:var(--blauw-diep)}
.tt__uitsnede{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.tt__uitsnede .tt__label{white-space:nowrap}
.tt__zoomrij{display:flex;align-items:center;gap:10px;min-width:230px}
.tt__zoomrij input[type=range]{flex:1;accent-color:var(--blauw)}
.tt__rond{width:38px;height:38px;flex:0 0 auto;border-radius:999px;border:2px solid var(--rand);
  background:var(--wit);color:var(--inkt);font-size:1.25rem;line-height:1;cursor:pointer;font-weight:700}
.tt__rond:hover{border-color:var(--blauw);color:var(--blauw)}
.tt__plan{cursor:grab}
.tt__plan:active{cursor:grabbing}
@media(min-width:1100px){.tt__knoppen{grid-template-columns:1fr 1.15fr 1.2fr .75fr .75fr}}
.tt__paalknoppen{display:flex;gap:8px;margin-top:9px;flex-wrap:wrap}
.tt__k--erbij{border-color:var(--groen);color:var(--groen-diep);font-weight:800}
.tt__k--erbij:hover:not(:disabled){background:var(--groen);border-color:var(--groen);color:var(--wit)}
.tt__k--weg{font-size:.85rem;padding:9px 13px}
.tt__k:disabled{opacity:.4;cursor:not-allowed}
.tt__welke{font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--blauw);margin:0 0 .8em}

/* ---------- de kijker ---------- */
.kijker{display:grid;gap:22px;grid-template-columns:1fr;align-items:start}
@media(min-width:900px){.kijker{grid-template-columns:minmax(0,1fr) minmax(300px,360px)}}
.kijker__beeld{position:relative;background:var(--inkt);border-radius:var(--r);overflow:hidden;
  aspect-ratio:3/4;max-height:74vh}
@media(min-width:900px){.kijker__beeld{aspect-ratio:4/3;max-height:none}}
.kijker__beeld video{width:100%;height:100%;object-fit:cover;display:block}
.kijker__laag{position:absolute;inset:0;touch-action:none;cursor:grab}
.kijker__laag:active{cursor:grabbing}
.kijker__leeg{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:14px;padding:28px;text-align:center;background:var(--inkt);color:#c6ced4;
  background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);background-size:22px 22px}
.kijker__leeg p{max-width:34ch;margin:0}
.kijker.is-aan .kijker__leeg{display:none}
.kijker__klaar{position:absolute;inset:0;display:none;flex-direction:column;background:var(--inkt)}
.kijker.is-klaar .kijker__klaar{display:flex}
.kijker__klaar img{flex:1;width:100%;object-fit:contain;min-height:0}
.kijker__klaarknoppen{display:flex;flex-wrap:wrap;gap:10px;padding:16px;background:rgba(16,20,24,.9)}
.kijker__klaarknoppen .knop{flex:1;min-width:140px;padding:13px 18px;font-size:.94rem}
.kijker__bediening{background:var(--wit);border:1px solid var(--rand);border-radius:var(--r);
  padding:24px;display:grid;gap:22px}
.kijker__melding{margin:0;padding:13px 16px;border-radius:var(--r-klein);font-size:.93rem;
  background:var(--papier-diep);color:var(--inkt)}
.kijker__melding--ok{background:#e4f5ea;color:#15602f}
.kijker__melding--fout{background:#fdeaea;color:#8a2020}
.kijker__kleuren{display:flex;flex-wrap:wrap;gap:10px}
.kijker__kleur{width:42px;height:42px;border-radius:50%;border:3px solid var(--rand);cursor:pointer;padding:0}
.kijker__kleur:hover{transform:scale(1.06)}
.kijker__kleur.is-aan{border-color:var(--blauw);box-shadow:0 0 0 3px var(--blauw-licht)}
.kijker__kiek{width:100%}
.kijker canvas{display:none}

/* op smalle schermen mogen de opschriften afbreken, anders duwen ze de kaart uit beeld */
@media(max-width:560px){
  .tt__groep--schuif .tt__label,.tt__uitsnede .tt__label{white-space:normal}
  .tt__zoomrij{min-width:0}
  .tt__adres,.tt__knoppen,.tt__uit,.kijker__bediening{padding:18px}
  .tt__uitsnede{width:100%}
  .tt__uitsnede .keuze{width:100%}
}
.tt__adres,.tt__knoppen,.tt__beeld,.tt__uit{min-width:0}
.tt__zoek input{max-width:100%}

/* raakvlakken groot genoeg voor een duim, zonder dat het opvalt */
.kruimel a{display:inline-block;padding:8px 0}
.kruimel{padding-top:10px}
input[type=range]{height:34px;cursor:pointer}
input[type=range]::-webkit-slider-thumb{width:24px;height:24px}
input[type=range]::-moz-range-thumb{width:24px;height:24px}
.auteur__datum{display:block;margin-top:.5em;font-size:.85rem;color:var(--staal)}
.cta__gerust{margin:1.1em 0 0;font-size:.88rem;color:#9aa3ab;max-width:52ch}

/* Projectverhaal: feitenstrook en verwante pagina's */
.feiten{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;margin:0;
  background:var(--lijn);border:1px solid var(--lijn);border-radius:var(--r-klein);overflow:hidden}
.feiten__cel{background:var(--wit);padding:1rem 1.1rem}
.feiten dt{font-size:.76rem;letter-spacing:.07em;text-transform:uppercase;color:var(--staal);margin:0 0 .35em}
.feiten dd{margin:0;font-family:var(--kop);font-size:1.02rem;line-height:1.35;color:var(--inkt)}
.verwant{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-top:1.6rem}
.verwant__kaart{display:block;background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r-klein);
  padding:1.1rem 1.2rem;text-decoration:none;transition:border-color .15s,transform .15s}
.verwant__kaart:hover{border-color:var(--blauw);transform:translateY(-2px)}
.verwant__kaart strong{display:block;font-family:var(--kop);color:var(--inkt);margin-bottom:.3em}
.verwant__kaart span{font-size:.9rem;color:var(--staal)}

/* ---------- FotoCheck ---------- */

/* De tekening ligt over de foto. Het vlak krijgt de verhouding van de foto zelf
   mee (inline, uit de mediabibliotheek), zodat er niets wordt bijgesneden en de
   tekening op zijn plek blijft, welk formaat de bezoeker ook krijgt. */
.fc__voorbeeld{display:grid;gap:clamp(2rem,1.4rem + 2.4vw,3.4rem);grid-template-columns:1fr;align-items:start}
@media(min-width:960px){.fc__voorbeeld{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}}
.fc__doek{position:relative;margin:0;border-radius:var(--r);overflow:hidden;
  box-shadow:var(--schaduw-diep);background:var(--papier-diep)}
.fc__doek img{width:100%;height:100%;object-fit:cover;border-radius:0;display:block}
.fc__tekening{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
  transition:opacity .25s}
.fc__doek--bloot .fc__tekening{opacity:0}
.fc__tekening ellipse{fill:none;stroke:#ffb020;stroke-width:6;stroke-dasharray:18 13;stroke-linecap:round}
.fc__pijl{fill:none;stroke:#ffb020;stroke-width:6;stroke-linecap:round}
.fc__boog{fill:none;stroke:#ffb020;stroke-width:6;stroke-linecap:round;stroke-dasharray:15 12}
.fc__hand{font-family:var(--hand);font-size:var(--fc-letter,46px);fill:#101418;
  stroke:#fff;stroke-width:9;paint-order:stroke;stroke-linejoin:round}
/* De knop stond eerst over de foto heen, maar botste op smalle schermen op het
   onderste bijschrift van de tekening. Onder de foto kan dat niet gebeuren. */
.fc__onder{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:14px 0 0}
.fc__onder span{font-size:.86rem;color:var(--inkt-zacht)}
.fc__wissel{font:600 .86rem/1 var(--body);padding:11px 16px;border-radius:999px;
  border:1px solid var(--rand);background:var(--wit);color:var(--inkt);cursor:pointer}
.fc__wissel:hover{border-color:var(--inkt);background:var(--papier-diep)}
.fc__wissel:focus-visible{outline:2px solid var(--blauw);outline-offset:2px}

.fc__drie{margin:0 0 1.15em;padding-left:1.2em}
.fc__drie li{margin-bottom:.8em}

.fc__stappen{list-style:none;margin:2.2rem 0 1.4rem;padding:0;display:grid;gap:20px;
  grid-template-columns:1fr;counter-reset:fc}
@media(min-width:700px){.fc__stappen{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.fc__stappen{grid-template-columns:repeat(4,1fr);gap:16px}}
.fc__stappen li{counter-increment:fc;background:var(--wit);border:1px solid var(--rand);
  border-radius:var(--r);padding:22px 20px;margin:0}
.fc__stappen li::before{content:counter(fc);display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;background:var(--blauw-licht);color:var(--blauw-diep);
  font:800 1.05rem/1 var(--kop);margin-bottom:14px}
.fc__stappen h3{margin:0 0 .4em}
.fc__stappen p{margin:0;font-size:.97rem;color:var(--inkt-zacht)}

.veld__naam{font-weight:700;font-size:.93rem}
/* .veld input is specifieker dan een losse klasse en zet width:100%; zonder de
   typekiezer erbij werd dit weggeschoven veld schermbreed en schoof de pagina. */
.veld input[type=file].fc__bestand{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.fc__kies{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;
  font:700 .97rem/1 var(--body);padding:14px 20px;border-radius:999px;
  border:1px dashed var(--staal);background:var(--wit);color:var(--inkt);cursor:pointer}
.fc__kies::before{content:"";width:20px;height:15px;border-radius:3px;border:2px solid var(--blauw);
  border-top-width:6px}
.fc__kies:hover{border-color:var(--blauw);border-style:solid;background:var(--blauw-licht)}
.veld input[type=file].fc__bestand:focus-visible + .fc__kies{outline:2px solid var(--blauw);outline-offset:2px}

/* ---------- samensteller ---------- */

.sm{display:grid;gap:22px;grid-template-columns:1fr;align-items:start}
/* Op een telefoon moet de tekening NAAR VOREN: wie eerst vijf vragen moet
   doorscrollen voordat er iets gebeurt, haakt af. Dus eerst de twee vragen die
   het meest bepalen, dan de uitkomst, dan pas de verfijning. */
.sm__bediening{order:1}
.sm__uitkomst{order:2}
.sm__verfijning{order:3}
.sm__onderdelen{order:4}
@media(min-width:1000px){
  .sm{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
  .sm__bediening{grid-column:1;grid-row:1}
  .sm__verfijning{grid-column:1;grid-row:2}
  .sm__uitkomst{grid-column:2;grid-row:1 / span 2}
  .sm__onderdelen{grid-column:1 / -1;grid-row:3}
}
.sm__bediening,.sm__verfijning{background:var(--wit);border:1px solid var(--rand);
  border-radius:var(--r);padding:22px;display:grid;gap:22px;align-content:start}
.sm__vraag input[type=range]{width:100%;accent-color:var(--blauw);margin-top:10px}
.sm__keuze{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}

.sm__uitkomst{display:grid;gap:18px;grid-template-columns:minmax(0,1fr)}
/* Eigen vak, géén .tt__uit hergebruiken: die klasse draagt in de tekentool een
   grid-area mee, en een naam die in dit raster niet bestaat maakte er stilletjes
   een tweede kolom bij. Dezelfde vorm, eigen plaatsing. */
.sm__advies{background:var(--wit);border:1px solid var(--rand);border-radius:var(--r);padding:24px}
.sm__beeldvak{background:var(--wit);border:1px solid var(--rand);border-radius:var(--r);padding:16px}
.sm__beeld{width:100%;height:auto;background:var(--papier);border-radius:var(--r-klein)}
.sm__legenda{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:14px;font-size:.84rem;
  color:var(--inkt-zacht)}
.sm__legenda span{display:inline-flex;align-items:center;gap:7px}
.sm__legenda i{width:11px;height:11px;border-radius:3px;flex:none}
.sm__maat{font:600 11px var(--body);fill:var(--inkt-zacht)}
.sm__paalnaam{font:800 13px var(--kop);fill:var(--inkt)}
.sm__kop{font-family:var(--kop);font-size:clamp(1.15rem,1.02rem + .6vw,1.45rem);line-height:1.25;
  margin:0 0 1em}
.sm__kop b{color:var(--blauw-diep)}
.sm__waarschuwing{background:var(--blauw-licht);border-radius:var(--r-klein);padding:14px 16px;
  margin:0 0 12px;font-size:.93rem}
.sm__waarschuwing b{font-family:var(--kop);display:block;margin-bottom:.3em}
.sm__waarschuwing p{margin:0}

.sm__onderdelen{background:var(--wit);border:1px solid var(--rand);border-radius:var(--r);padding:22px}
.sm__lijst{display:grid;gap:12px;grid-template-columns:1fr;margin-top:18px}
@media(min-width:700px){.sm__lijst{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.sm__lijst{grid-template-columns:repeat(3,1fr)}}
.sm__rij{border:1px solid var(--rand);border-radius:var(--r-klein);padding:14px 16px;
  background:var(--papier);transition:border-color .18s,background .18s}
.sm__rij.is-aan{background:var(--wit);border-color:var(--blauw)}
.sm__schakel{display:flex;align-items:center;gap:10px;width:100%;text-align:left;font:inherit;
  /* Was 26px hoog. Een tikdoel op een telefoon hoort 44px te halen; de rijpadding
     zat op de ouder, dus de knop zelf was maar zo hoog als de letters. */
  min-height:44px;padding:0;border:0;background:none;cursor:pointer;color:inherit}
.sm__schakel b{font-family:var(--kop);font-size:1rem;letter-spacing:-.01em}
.sm__vink{width:16px;height:16px;border-radius:5px;border:2px solid var(--staal);flex:none}
.sm__rij.is-aan .sm__vink{border-color:transparent}
.sm__uitleg{font-size:.89rem;color:var(--inkt-zacht);margin-top:10px}
.sm__uitleg p{margin:0 0 .6em}
.sm__uitleg p:last-child{margin-bottom:0}
.sm__let{color:var(--inkt)}
.sm__reden{font-style:italic}

.sm__voorbeelden{display:grid;gap:14px;grid-template-columns:1fr;margin-top:2rem}
@media(min-width:640px){.sm__voorbeelden{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1060px){.sm__voorbeelden{grid-template-columns:repeat(4,1fr)}}
.sm__voorbeeld{display:flex;flex-direction:column;gap:8px;text-align:left;font:inherit;cursor:pointer;
  background:var(--wit);border:1px solid var(--rand);border-radius:var(--r);padding:20px;
  color:inherit;transition:border-color .18s,transform .18s}
.sm__voorbeeld:hover{border-color:var(--blauw);transform:translateY(-2px)}
.sm__voorbeeld b{font-family:var(--kop);font-size:1.08rem;letter-spacing:-.02em}
.sm__voorbeeld span{font-size:.89rem;color:var(--inkt-zacht);line-height:1.45}


/* ---------- voorpagina: volgorde van de hero ----------
   Blauw betekent op deze site "hier kunt u iets doen". Nummers, labels en
   streepjes zijn versiering en horen dus grijs; dat staat hierboven al
   rechtgezet. Hieronder de tweede ingreep: op een telefoon staat het bewijs
   niet meer onder de vouw.
   Alleen op de voorpagina, want de andere sjablonen hebben een andere hero. */
.hero__raster--voor .hero__kop{order:1}
.hero__raster--voor .hero__beeld{order:2}
.hero__raster--voor .hero__tekst{order:3}
.hero__raster--voor .hero__kop h1{margin-bottom:0}
@media(min-width:980px){
  .hero__raster--voor{align-items:start}
  .hero__raster--voor .hero__kop{grid-column:1;grid-row:1;order:0}
  .hero__raster--voor .hero__tekst{grid-column:1;grid-row:2;order:0}
  .hero__raster--voor .hero__beeld{grid-column:2;grid-row:1 / span 2;order:0;align-self:center}
  .hero__raster--voor .hero__kop h1{margin-bottom:.45em}
}
/* Rechtsonder staat de WhatsApp-knop al vast in beeld. */
@media(max-width:699px){.hero__app{display:none}}
/* De foto naar voren halen loste het ene op en maakte het andere stuk: op een
   telefoon van 844px hoog begon de eerste zin daarna op 845px, dus precies
   eronder. Een smallere foto is nog steeds duidelijk en geeft de zin en de
   knop hun plek terug. */
@media(max-width:979px){
  .hero__raster--voor{gap:1.1rem}
  .hero__raster--voor .hero__beeld figure{max-width:min(100%,57vw)}
  .hero__raster--voor .hero__lead{margin-bottom:.9em}
  .hero__raster--voor .hero__notitie{margin-top:10px}
}

/* ---------- voorpagina: de mensen bij de werkdag ---------- */
.werkdag{display:grid;gap:clamp(1.6rem,1rem + 2.4vw,2.6rem);grid-template-columns:1fr;
  align-items:center}
@media(min-width:820px){.werkdag{grid-template-columns:1.15fr .85fr}}
.werkdag__beeld{margin:0}
.werkdag__beeld img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r);
  box-shadow:var(--schaduw-diep)}
.werkdag__beeld figcaption{margin-top:.8em;font-size:.86rem;color:#9aa3ab;
  padding-left:12px;border-left:3px solid rgba(255,255,255,.22)}

/* ---------- de zweefknoppen en de gereedschappen ----------
   Op een telefoon liggen de WhatsApp- en belknop over de bediening van de
   tekentool en de samensteller: de zoomknop verdween er half onder en een
   uitlegregel werd afgekapt. Op precies de pagina's waar iemand moet TEKENEN
   mag er geen knop overheen liggen. Bereikbaar blijft het: het telefoonnummer
   en WhatsApp staan boven in de balk op elke pagina. */
@media(max-width:979px){
  .page-template-page-tekentool .zweef,
  .page-template-page-samensteller .zweef,
  .page-template-page-kijker .zweef{display:none}
}

/* ---------- specificatietabel ----------
   De markt zwijgt over de grond: wie een paal verkoopt laat het graafwerk weg,
   wie graaft zet er geen maten bij. Deze tabel is daarom een inhoudelijk
   middel, geen opmaak. Hij moet op een telefoon leesbaar blijven, dus hij
   schuift in zijn eigen vak in plaats van de pagina mee te trekken. */
/* Een rasterkind mag standaard niet kleiner worden dan zijn inhoud, dus zonder
   min-width:0 duwde de tabel de hele pagina breed in plaats van zelf te schuiven. */
.lees .inhoud,.inhoud{min-width:0}
.tabelrol{overflow-x:auto;max-width:100%;margin:1.6em 0;border:1px solid var(--rand);
  border-radius:var(--r);background:var(--wit);-webkit-overflow-scrolling:touch}
table.spec{width:100%;border-collapse:collapse;font-size:.95rem;min-width:520px}
table.spec caption{text-align:left;padding:16px 18px 0;font-family:var(--kop);font-weight:800;
  font-size:1.02rem;letter-spacing:-.01em;color:var(--inkt)}
table.spec th,table.spec td{padding:12px 18px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--rand)}
table.spec thead th{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--inkt-zacht);font-weight:800}
table.spec tbody th{font-weight:700;width:34%;color:var(--inkt)}
table.spec tbody tr:last-child th,table.spec tbody tr:last-child td{border-bottom:0}
table.spec tbody tr:hover{background:var(--papier)}
@media(max-width:560px){table.spec{min-width:440px;font-size:.9rem}
  table.spec th,table.spec td{padding:10px 14px}}

/* ---------- tikdoelen op een telefoon ----------
   Gemeten op 390px: het telefoonnummer in de bovenbalk was 81x21 px, de
   zoomknoppen van de tekentool 38x38 en de wisselknop op de FotoCheck 153x38.
   Google en Apple houden 44px aan, en juist dat telefoonnummer is hier de
   conversie. De letters in die balk stonden op 13,3px; onder de 14 wordt het
   op een telefoon slecht leesbaar.
   Links in de lopende tekst laten wij met rust: die 44px maken zou de
   typografie slopen, en daar is de regel ook niet voor bedoeld. */
@media(max-width:979px){
  .balk{font-size:.875rem}
  .balk__in{min-height:44px}
  .balk a{display:inline-flex;align-items:center;min-height:44px}
  .tt__rond{width:44px;height:44px}
  .fc__wissel{min-height:44px}
}