/* ==========================================================================
   Beer Marketing · site v2 · stijl "Stempel"
   Tokens gelijk aan brand/colors.css v2.0. Fonts: Tanker + Switzer (Fontshare,
   ITF FFL 2.0) — zelf hosten op beermarketing.nl mag; bestanden NIET meeleveren
   aan derden. Download: fontshare.com.
   ========================================================================== */
@font-face{font-family:"Tanker";src:url(../fonts/Tanker-Regular.ttf) format("truetype");font-display:swap}
@font-face{font-family:"Switzer";src:url(../fonts/Switzer-Variable.ttf) format("truetype");font-weight:100 900;font-display:swap}
:root{
  --inkt:#1A1410;--papier:#F2ECE2;--zand:#E8DFD0;--klei:#5B4E42;
  --honing:#B8761A;--honing-licht:#E3A548;--honing-donker:#8A5712;
  --vacht:#352A28;--snuit:#BFAF9D;--inkt-2:#241B16;--inkt-3:#2E241E;
  --display:"Tanker",Impact,"Arial Narrow",sans-serif;
  --sans:"Switzer",Arial,Helvetica,sans-serif;
  --d1:4px;--d2:6px;--d3:10px;--rand:2px;--r:2px;
  --wrap:1240px;--gut:clamp(20px,4vw,48px);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font:400 17px/1.6 var(--sans);color:var(--inkt);background:var(--papier);-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
img,svg{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--honing);outline-offset:3px}
.skip{position:absolute;left:-999px;top:8px;background:var(--inkt);color:var(--papier);padding:10px 14px;z-index:99}.skip:focus{left:8px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- type ---------- */
.t,h1,h2{font-family:var(--display);font-weight:400;text-transform:uppercase;line-height:.92;letter-spacing:0}
h1{font-size:clamp(46px,8vw,112px)}
h2{font-size:clamp(38px,5.6vw,80px)}
h3{font:700 clamp(19px,1.8vw,22px)/1.25 var(--sans);letter-spacing:-.01em}
.st{display:inline-block;background:var(--honing);color:var(--inkt);padding:.04em .12em 0;transform:rotate(-2deg);line-height:.92}
.dark .st{background:var(--honing-licht)}
.lab{font:600 13px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--klei)}
.dark .lab{color:rgba(242,236,226,.66)}
.lead{font:600 clamp(19px,1.7vw,23px)/1.4 var(--sans);letter-spacing:-.015em}
.muted{color:var(--klei)} .dark .muted{color:rgba(242,236,226,.78)}
.prose p+p{margin-top:.9em}
.prose{max-width:62ch}

/* ---------- secties ---------- */
section{padding:clamp(64px,9vw,120px) 0}
.dark{background:var(--inkt);color:var(--papier)}
.dark-2{background:var(--inkt-2);color:var(--papier)}
.zand{background:var(--zand)}
.sec-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px 48px;align-items:end;margin-bottom:clamp(36px,5vw,64px)}
.sec-head .lab{grid-column:1/-1;margin-bottom:-12px}

/* ---------- knoppen (3D) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:12px 24px;font:600 16px/1.2 var(--sans);text-decoration:none;text-align:center;border:var(--rand) solid var(--inkt);border-radius:var(--r);background:transparent;color:inherit;cursor:pointer;transition:transform .15s,box-shadow .15s}
.btn-honing{background:var(--honing);color:var(--inkt);box-shadow:var(--d1) var(--d1) 0 var(--inkt)}
.btn-honing:hover,.btn-honing:focus-visible{transform:translate(-2px,-2px);box-shadow:var(--d2) var(--d2) 0 var(--inkt)}
.dark .btn-honing,.dark-2 .btn-honing{background:var(--honing-licht);border-color:var(--inkt);box-shadow:var(--d1) var(--d1) 0 var(--papier)}
.dark .btn-honing:hover,.dark-2 .btn-honing:hover{box-shadow:var(--d2) var(--d2) 0 var(--papier)}
.btn-lijn:hover{background:rgba(26,20,16,.06)}
.dark .btn-lijn,.dark-2 .btn-lijn{border-color:var(--papier)} .dark .btn-lijn:hover{background:rgba(242,236,226,.08)}
.btns{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- header ---------- */
.top{background:var(--papier);position:relative;z-index:10}
.top.dark{background:var(--inkt)}
.top .wrap{display:flex;align-items:center;gap:24px;min-height:84px}
.logo img{height:34px;width:auto}
.hoofdnav{margin-left:auto}
.nav{display:flex;gap:26px;list-style:none;font-weight:500;font-size:15px}
.nav a{text-decoration:none;padding:6px 0}
.nav a:hover,.nav a[aria-current]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.menu-btn{display:none}
/* Schermvullend menu (mobiel/tablet), geopend door site.js */
.menu{position:fixed;inset:0;z-index:1000;background:var(--inkt);color:var(--papier);display:flex;flex-direction:column;
  padding:0 var(--gut) max(28px,env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain}
.menu[hidden]{display:none}
.menu-kop{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:84px;flex:none}
.menu-kop .logo img{height:34px;width:auto}
.menu .btn-lijn{border-color:var(--papier);color:var(--papier)}
.menu-dicht{min-height:44px;padding:8px 14px;font-size:15px;gap:8px}
.menu-dicht span{font-size:24px;line-height:1;font-weight:400}
.menu-links{list-style:none;margin:clamp(16px,5vh,48px) 0 0;display:flex;flex-direction:column;gap:clamp(2px,1vh,10px)}
.menu-links a{display:block;font-family:var(--display);text-transform:uppercase;font-size:clamp(40px,11vw,64px);line-height:1;padding:8px 0;text-decoration:none;color:var(--papier)}
.menu-links a:hover,.menu-links a:focus-visible{color:var(--honing-licht)}
.menu-links a[aria-current]{color:var(--honing-licht)}
.menu-cta{align-self:stretch;margin-right:var(--d1);justify-content:center;margin-top:clamp(28px,6vh,56px);flex:none;min-height:56px;font-size:17px}
html.menu-open,html.menu-open body{overflow:hidden}
@media (min-width:1121px){.menu{display:none!important}}
@media (max-width:1120px){
  .top .cta{display:none}
  /* zonder JavaScript: links als rij onder het logo, geen menuknop */
  .top .wrap{flex-wrap:wrap;row-gap:4px;padding-top:14px;padding-bottom:14px}
  .hoofdnav{margin-left:0;flex-basis:100%}
  .nav{flex-wrap:wrap;gap:4px 20px;font-size:16px}
  .nav a{display:inline-block;padding:8px 0}
  /* met JavaScript: alleen de menuknop */
  .js .top .wrap{flex-wrap:nowrap;padding-top:0;padding-bottom:0}
  .js .hoofdnav{display:none}
  .js .menu-btn{display:inline-flex;margin-left:auto;min-height:44px;padding:8px 14px;font-size:15px}
}
/* ---------- hero ---------- */
.hero{padding:clamp(40px,6vw,80px) 0 clamp(64px,8vw,110px);background:radial-gradient(ellipse 50% 70% at 75% 45%,#3A2C25 0%,#241B16 50%,var(--inkt) 80%)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:center}
.slogan{font-size:clamp(46px,7.4vw,108px)}
.slogan .r{display:block;white-space:nowrap}
.hero .lead{margin-top:28px;max-width:34ch}
.hero .intro{margin-top:12px;max-width:52ch}
.hero .btns{margin-top:30px}
.held{position:relative;min-height:560px}
/* mascotte-placeholder */
.ph{background:var(--vacht);color:var(--snuit);display:grid;place-items:center;position:relative;overflow:hidden}
.ph::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,transparent 0 18px,rgba(191,175,157,.06) 18px 19px)}
.ph img{width:28%;opacity:.35;position:relative}
.ph .phlab{position:absolute;left:14px;right:14px;bottom:14px;font:600 11px/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--papier);background:rgba(26,20,16,.75);padding:8px 10px}
.held .ph{position:absolute;right:0;top:0;width:78%;aspect-ratio:4/5}

/* ---------- 3D-kaarten ---------- */
.d3{background:var(--papier);color:var(--inkt);border:var(--rand) solid var(--inkt);box-shadow:var(--d2) var(--d2) 0 var(--inkt)}
.dark .d3,.dark-2 .d3{box-shadow:var(--d2) var(--d2) 0 var(--honing-licht)}
.tag{position:absolute;top:-15px;right:18px;font:20px/1 var(--display);text-transform:uppercase;background:var(--honing);color:var(--inkt);padding:6px 9px 2px;transform:rotate(3deg)}
.tag.l{transform:rotate(-3deg)}

/* ---------- Berenrapport (het product) ---------- */
.rapport{position:relative;padding:26px 26px 22px;max-width:420px}
.rapport.groot{max-width:620px;padding:36px 36px 30px;box-shadow:var(--d3) var(--d3) 0 var(--inkt)}
.held .rapport{position:absolute;left:0;bottom:0;width:min(400px,80%);transform:rotate(-3deg);box-shadow:var(--d3) var(--d3) 0 var(--honing-licht)}
.rapport .kop{display:flex;justify-content:space-between;align-items:center;gap:12px}
.rapport .kop .t{font-size:30px}.rapport.groot .kop .t{font-size:44px}
.rapport .kop img{width:34px}
.rapport .meta{font:600 10px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--klei);margin:6px 0 16px}
.tegels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.tegel{background:var(--zand);padding:10px}
.tegel span{display:block;font:600 9px/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--klei)}
.tegel b{display:block;font:400 24px/1 var(--display);margin-top:6px}
.rapport.groot .tegel{padding:14px}.rapport.groot .tegel b{font-size:34px}
.rapport .acties{margin-top:16px;font-size:13px}.rapport.groot .acties{font-size:15px}
.rapport .acties strong{display:block}
.stempel{display:inline-block;font:400 17px/1 var(--display);text-transform:uppercase;border:3px solid var(--inkt);padding:7px 10px 3px;transform:rotate(-4deg);margin-top:14px}
.rapport-sec .wrap{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:64px;align-items:center}
.uitleg{list-style:none;display:grid;gap:26px}
.uitleg li{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start}

/* ---------- stempelnummers ---------- */
.sn{font:400 34px/1 var(--display);background:var(--honing);color:var(--inkt);width:60px;height:60px;display:grid;place-items:center;padding-top:5px;flex:none}
.dark .sn,.dark-2 .sn{background:var(--honing-licht)}
.sn.r1{transform:rotate(-4deg)}.sn.r2{transform:rotate(3deg)}.sn.r3{transform:rotate(-2deg)}.sn.r4{transform:rotate(2deg)}
.stappen{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px}
.stappen h3{margin-top:22px}.stappen p{margin-top:6px}

/* ---------- checkbox-stempels ---------- */
.vink{list-style:none;display:grid;gap:18px}
.vink li{position:relative;padding-left:56px;min-height:38px}
.vink li::before{content:"";position:absolute;left:0;top:-2px;width:38px;height:38px;border:2.5px solid currentColor;background:transparent}
.vink li::after{content:"";position:absolute;left:12px;top:-1px;width:12px;height:23px;border:solid var(--honing);border-width:0 5px 5px 0;transform:rotate(40deg)}
.dark .vink li::after,.dark-2 .vink li::after{border-color:var(--honing-licht)}
.vink li.nee::after{display:none}
.vink li.nee{color:var(--klei)} .dark .vink li.nee{color:rgba(242,236,226,.6)}
.vink strong{display:block;font-size:19px;line-height:1.3}
.vink span{display:block;font-size:15px;color:var(--klei);margin-top:2px}
.dark .vink span,.dark-2 .vink span{color:rgba(242,236,226,.75)}

/* ---------- diensten ---------- */
.diensten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;align-items:start}
.dienst{position:relative;padding:32px 28px 28px;display:flex;flex-direction:column;height:100%}
.dienst:nth-child(2){margin-top:28px}.dienst:nth-child(3){margin-top:56px}
.dienst .t{font-size:clamp(34px,3.4vw,46px)}
.dienst p{margin-top:12px;color:var(--klei)}
.dienst ul{list-style:none;margin-top:18px;display:grid;gap:8px;font-size:15px;font-weight:500}
.dienst ul li{padding-left:22px;position:relative}
.dienst ul li::before{content:"";position:absolute;left:0;top:.45em;width:10px;height:10px;background:var(--honing);transform:rotate(-8deg)}
.dienst .meer{margin-top:auto;padding-top:22px;font-weight:600;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.ook{margin-top:48px;font-weight:500}

/* ---------- beloftes ---------- */
.beloftes .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start}
.doorhaal{position:relative;display:inline-block}
.doorhaal img{position:absolute;left:7%;top:0;width:97%;height:100%;pointer-events:none}
/* doorgehaald woord: Inkt, 2 dunne krassen vanaf de rechterhelft van de G tot net voorbij de S (in % van het woord) */

/* ---------- beer-check ---------- */
.check .wrap{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:64px;align-items:start}
.zegel{width:190px;height:190px;border-radius:50%;background:var(--honing-licht);color:var(--inkt);border:3px solid var(--inkt);display:grid;place-items:center;text-align:center;transform:rotate(-8deg);margin-bottom:28px}
.zegel img{width:52px;margin:0 auto}
.zegel .t{font-size:26px;margin-top:8px}
form.d3{padding:32px}
.veld{display:block;margin-top:18px}
.veld:first-of-type{margin-top:0}
.veld span{display:block;font:600 14px/1.3 var(--sans);margin-bottom:6px}
.veld input,.veld textarea{width:100%;font:400 16px/1.4 var(--sans);padding:12px 14px;border:var(--rand) solid var(--inkt);border-radius:var(--r);background:#fff;color:var(--inkt)}
.veld input:focus,.veld textarea:focus{outline:none;box-shadow:var(--d1) var(--d1) 0 var(--honing)}
.formnoot{font-size:13px;color:var(--klei);margin-top:14px}

/* ---------- over ---------- */
.over .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:center}
.over .ph{aspect-ratio:4/5}

/* ---------- regio ---------- */
.plaatsen{list-style:none;display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.plaatsen a{display:inline-block;font:400 22px/1 var(--display);text-transform:uppercase;text-decoration:none;border:var(--rand) solid var(--inkt);padding:10px 12px 6px;background:var(--papier)}
.plaatsen a:hover{background:var(--honing)}
.plaatsen li:nth-child(3n+1) a{transform:rotate(-1.5deg)}.plaatsen li:nth-child(3n+2) a{transform:rotate(1deg)}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:12px;max-width:860px}
.faq details{background:var(--papier);border:var(--rand) solid var(--inkt)}
.zand .faq details{background:var(--papier)}
.faq summary{cursor:pointer;list-style:none;padding:18px 56px 18px 20px;font-weight:700;font-size:18px;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);font:400 30px/1 var(--display)}
.faq details[open] summary::after{content:"–"}
.faq details>div{padding:0 20px 20px;color:var(--klei);max-width:70ch}

/* ---------- prijs ---------- */
.prijs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.prijs .d3{padding:30px;position:relative}
.prijs .bedrag{font:400 clamp(36px,4vw,52px)/1 var(--display);margin:14px 0 10px}

/* ---------- broodkruimel / template-notitie ---------- */
.kruimel{font-size:14px;color:var(--klei);padding-top:24px}
.kruimel a{text-decoration:none}.kruimel a:hover{text-decoration:underline}
.dark .kruimel{color:rgba(242,236,226,.7)}
.tpl{background:var(--honing-licht);color:var(--inkt);font:600 13px/1.4 var(--sans);padding:10px var(--gut);text-align:center}
.tpl code{font:700 13px ui-monospace,monospace;background:rgba(26,20,16,.1);padding:1px 5px}
.wk{font-style:normal;background:rgba(184,118,26,.16);outline:1px dashed var(--honing-donker);padding:0 3px}

/* ---------- pagina-hero (licht) ---------- */
.phero{padding:clamp(28px,4vw,48px) 0 clamp(64px,8vw,100px)}
.phero .wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:center}
.phero h1{font-size:clamp(44px,6.6vw,96px);margin-top:18px}
.phero .lead{margin-top:24px;max-width:38ch}
.phero .btns{margin-top:28px}
.hoek{position:relative;overflow:hidden}
.hoek>.kras{position:absolute;right:0;top:0;width:min(220px,30vw);pointer-events:none}

/* ---------- wel/niet ---------- */
.welniet{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px}

/* ---------- footer ---------- */
.foot{background:var(--inkt);color:var(--papier);padding:72px 0 36px}
.foot .grid{display:grid;grid-template-columns:minmax(0,5fr) repeat(3,minmax(0,2fr));gap:40px}
.foot .slogan-k{font-size:clamp(30px,3vw,40px);margin-top:22px}
.foot h2{font:600 13px/1.3 var(--sans);letter-spacing:.14em;color:rgba(242,236,226,.6)}
.foot ul{list-style:none;margin-top:14px;display:grid;gap:8px;font-size:15px}
.foot a{text-decoration:none}.foot a:hover{text-decoration:underline}
.foot .onder{margin-top:56px;font-size:13px;color:rgba(242,236,226,.6);display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .hero .wrap,.phero .wrap,.rapport-sec .wrap,.beloftes .wrap,.check .wrap,.over .wrap,.sec-head{grid-template-columns:1fr;gap:40px}
  .sec-head .lab{margin-bottom:0}
  .diensten{grid-template-columns:1fr;gap:36px}.dienst:nth-child(n){margin-top:0}
  .stappen{grid-template-columns:repeat(2,minmax(0,1fr))}
  .held{min-height:0;display:grid;padding-bottom:20px}
  .held .ph{position:relative;width:72%;margin-left:auto}
  .held .rapport{position:relative;margin-top:-90px;width:min(380px,92%)}
  .foot .grid{grid-template-columns:1fr 1fr}
  .welniet,.prijs{grid-template-columns:1fr}
}
@media (max-width:560px){
  body{font-size:16px}
  .slogan{font-size:clamp(40px,12.6vw,60px)}
  .stappen{grid-template-columns:1fr;gap:28px}
  .btns .btn{width:100%}
  .tegels{gap:6px}.tegel b{font-size:20px}.rapport.groot .tegel b{font-size:24px}.rapport.groot{padding:24px 20px}.rapport.groot .kop .t{font-size:32px}
  .foot .grid{grid-template-columns:1fr}
  .zegel{width:150px;height:150px}.zegel .t{font-size:21px}
  form.d3{padding:22px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- correcties na visuele check ---------- */
.foot .st{background:var(--honing-licht)}
.dienst.d3{box-shadow:var(--d1) var(--d1) 0 var(--inkt)}
.ph .phlab{bottom:auto;top:14px}
.held .ph{width:82%}
.held{min-height:600px}
@media (max-width:980px){.held{min-height:0}}
@media (max-width:980px){[data-grid]{grid-template-columns:1fr!important}}
.phero .rapport{max-width:440px}
@media (max-width:980px){.phero .rapport{justify-self:start!important}}
.held .rapport{margin-left:4px}
.foot{background:#100C09}
.dark .wk{background:rgba(227,165,72,.16);outline-color:var(--honing-licht)}
.phero .rapport{max-width:480px;padding:30px}
.phero .rapport .kop .t{font-size:38px}.phero .rapport .tegel b{font-size:30px}
@media (max-width:560px){.phero .rapport{padding:22px}.phero .rapport .tegel b{font-size:22px}.phero .rapport .kop .t{font-size:30px}.tegel{padding:8px}.tegel span{font-size:8px;letter-spacing:.08em}}

/* ==========================================================================
   DIENSTENBLOK · varianten A en B, schalen vanzelf van 3 naar 4 diensten
   ========================================================================== */
/* A · kaartenraster: 3 → 4 kolommen (≥1200), 2x2 (700-1199), 1 kolom (<700) */
.dienstblok-a .diensten:has(>:nth-child(4)){grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.dienstblok-a .diensten:has(>:nth-child(4)) .dienst{padding:28px 22px 24px}
.dienstblok-a .diensten:has(>:nth-child(4)) .dienst:nth-child(4){margin-top:84px}
.dienstblok-a .diensten:has(>:nth-child(4)) .dienst .t{font-size:clamp(30px,2.7vw,38px)}
@media (max-width:1199px){
  .dienstblok-a .diensten:has(>:nth-child(4)){grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
  .dienstblok-a .diensten:has(>:nth-child(4)) .dienst:nth-child(n){margin-top:0}
  .dienstblok-a .diensten:has(>:nth-child(4)) .dienst:nth-child(even){margin-top:28px}
}
@media (max-width:699px){
  .dienstblok-a .diensten:has(>:nth-child(4)){grid-template-columns:1fr}
  .dienstblok-a .diensten:has(>:nth-child(4)) .dienst:nth-child(n){margin-top:0}
}

/* B · dienstrijen: brede panelen op elkaar gestapeld, dikke rand, geen haarlijnen */
.rijen{display:grid;gap:14px;counter-reset:none}
.rij{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,4fr) minmax(0,3fr) auto;gap:20px 36px;align-items:center;
  background:var(--zand);border:var(--rand) solid var(--inkt);padding:30px 32px;position:relative;transition:transform .15s,box-shadow .15s,background .15s}
.rij:nth-child(odd){margin-right:28px}.rij:nth-child(even){margin-left:28px}
.rij:hover,.rij:focus-within{background:var(--papier);transform:translate(-3px,-3px);box-shadow:var(--d2) var(--d2) 0 var(--inkt)}
.rij .t{font-size:clamp(36px,3.6vw,54px)}
.rij p{color:var(--klei)}
.rij ul{list-style:none;display:grid;gap:6px;font-size:15px;font-weight:500}
.rij ul li{padding-left:20px;position:relative}
.rij ul li::before{content:"";position:absolute;left:0;top:.45em;width:10px;height:10px;background:var(--honing);transform:rotate(-8deg)}
.rij .btn{white-space:nowrap}
@media (max-width:1100px){.rij{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.rij .t{grid-column:1/-1}.rij .btn{justify-self:start}}
@media (max-width:640px){.rij{grid-template-columns:1fr;padding:24px 20px}.rij:nth-child(n){margin:0}.rij .btn{width:100%;white-space:normal}}

/* demo-label 'voorbeeld toekomst' (alleen in demo-pagina's) */
.toekomst{position:relative;outline:3px dashed var(--honing-donker);outline-offset:6px}
.toekomst::before{content:"Voorbeeld toekomst · niet live";position:absolute;z-index:3;top:-20px;left:12px;font:600 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;background:var(--honing-donker);color:var(--papier);padding:6px 8px}
.demo-balk{background:var(--honing-donker);color:var(--papier);font:600 14px/1.4 var(--sans);text-align:center;padding:12px var(--gut)}

/* ---------- checkbox-stempel v2: vinkje exact gecentreerd ----------
   Eén vakje (::before) met het vinkje als SVG-achtergrond, background-position:center.
   Het pad in de viewBox is zelf gecentreerd (bbox x 4-20, y 6.5-17.5 → midden 12,12).
   Schaalt mee met de lettergrootte (em), dus op elke breedte/fontgrootte in het midden. */
.vink li{padding-left:2.6em;min-height:2.1em}
.vink li::before{top:-.1em;width:2.1em;height:2.1em;max-width:38px;max-height:38px;min-width:30px;min-height:30px;
  border:2.5px solid currentColor;box-sizing:border-box;
  background:center/64% 64% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.2l5.2 5.3L20 6.5' fill='none' stroke='%23B8761A' stroke-width='3.6' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E")}
.dark .vink li::before,.dark-2 .vink li::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.2l5.2 5.3L20 6.5' fill='none' stroke='%23E3A548' stroke-width='3.6' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E")}
.vink li::after{content:none;display:none}
.vink li.nee::before{background-image:none}
/* lange dienstnamen (bijv. AUTOMATISEREN) nooit midden in een woord breken */
.dienst .t,.rij .t{overflow-wrap:normal;word-break:normal;hyphens:manual}
.rij{grid-template-columns:minmax(300px,4fr) minmax(0,4fr) minmax(0,3fr) auto}
.rij .t{font-size:clamp(32px,3.2vw,46px)}
@media (max-width:1100px){.rij{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (max-width:640px){.rij{grid-template-columns:1fr}.rij .t{font-size:clamp(30px,9vw,40px)}}
.dienstblok-a .diensten:has(>:nth-child(4)) .dienst .t{font-size:clamp(28px,2.4vw,36px)}
.rij{grid-template-columns:minmax(280px,4fr) minmax(0,4fr) minmax(0,4fr) 220px}
.rij .btn{white-space:normal;justify-self:stretch}
@media (max-width:1100px){.rij{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.rij .btn{justify-self:start}}
@media (max-width:640px){.rij{grid-template-columns:1fr}.rij .btn{justify-self:stretch}}

/* ==========================================================================
   v2.1 · prijzen, lokale slots, contact, privacy
   ========================================================================== */
/* prijs in dienstkaart (variant A) */
.prijsje{display:flex;align-items:flex-end;gap:10px;margin-top:22px;padding:12px 14px 10px;background:var(--zand);border:var(--rand) solid var(--inkt);align-self:flex-start;transform:rotate(-1.5deg)}
.dienst:nth-child(even) .prijsje{transform:rotate(1.2deg)}
.prijsje .v{font:600 12px/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--klei);padding-bottom:6px}
.prijsje b{font:400 38px/.9 var(--display);color:var(--inkt)}
.prijsje .pm{font:500 12px/1.25 var(--sans);color:var(--klei);padding-bottom:3px}
.zand .dienst .prijsje{background:var(--papier)}
.dienst .prijsje+.meer{padding-top:18px}
.prijsnoot{margin-top:40px;font-size:15px;color:var(--klei);max-width:70ch}
.bedrag .v{font:600 14px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;vertical-align:middle;color:var(--klei)}
.btw{font:600 13px/1.3 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--honing-donker)}

/* unieke-tekst-slots (lokale pagina's) */
.slot{border:2.5px dashed var(--honing-donker);background:rgba(184,118,26,.10);padding:16px 18px;margin-bottom:16px;color:var(--inkt)}
.slot .slot-lab{display:inline-block;font:600 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;background:var(--honing-donker);color:var(--papier);padding:5px 7px;margin-bottom:10px}
.slot p{font-size:15px;color:var(--klei)}
.slot.ok{border:0;background:none;padding:0}
.lokaal-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px 64px}
.bron{font-size:11px;color:var(--klei);margin-top:12px;line-height:1.4}
.foot .kol2{grid-template-columns:1fr 1fr;column-gap:16px}

/* contact */
.contact-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr)!important;gap:56px;align-items:start}
.gegevens{list-style:none;margin-top:32px;display:grid;gap:16px}
.gegevens li{display:grid;grid-template-columns:170px 1fr;gap:12px;align-items:baseline;font-size:18px;font-weight:600}
.gegevens .lab{font-size:12px}
.gegevens a{text-decoration-thickness:2px;text-underline-offset:4px}

/* privacy */
.juridisch{max-width:70ch}
.juridisch h2{font-size:clamp(28px,3vw,38px);margin:40px 0 10px}
.juridisch h2:first-child{margin-top:0}
.juridisch p,.juridisch li{color:var(--klei)}
.juridisch ul.l{margin:10px 0 10px 20px}

@media (max-width:980px){.lokaal-grid,.contact-grid{grid-template-columns:1fr!important}.gegevens li{grid-template-columns:1fr;gap:2px}}

/* ==========================================================================
   Over Sibe · foto-onthulling (scroll). Zonder JS of bij reduced motion: statisch.
   --p (0..1) wordt gezet door site.js
   ========================================================================== */
.over .wrap{align-items:start}
.onthul{margin:0}
.onthul-frame{position:relative;aspect-ratio:4/5;overflow:hidden;border:var(--rand) solid var(--inkt);box-shadow:10px 10px 0 var(--inkt);background:var(--vacht)}
.onthul .laag{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.onthul .laag-echt{clip-path:inset(0 0 calc((1 - var(--p,1)) * 100%) 0)}
.ph-echt{background:var(--snuit);color:var(--vacht)}
.ph-echt::before{background:repeating-linear-gradient(135deg,transparent 0 18px,rgba(53,42,40,.07) 18px 19px)}
.ph-sil{position:relative;width:46%;aspect-ratio:3/4;background:radial-gradient(circle at 50% 26%,var(--vacht) 0 22%,transparent 22.5%),radial-gradient(ellipse 50% 34% at 50% 100%,var(--vacht) 0 99%,transparent 100%);opacity:.32}
.onthul-rand{position:absolute;left:0;right:0;height:5px;background:var(--honing-licht);top:calc(var(--p,1) * 100%);transform:translateY(-50%);opacity:calc(1 - var(--p,1) * var(--p,1) * var(--p,1));pointer-events:none}
.onthul-stempel{position:absolute;right:16px;bottom:18px;font:400 clamp(24px,2.6vw,34px)/1 var(--display);text-transform:uppercase;background:var(--honing-licht);color:var(--inkt);padding:7px 12px 3px;transform:rotate(-4deg) scale(var(--s,1));opacity:var(--o,1);transition:transform .25s cubic-bezier(.3,1.6,.5,1),opacity .2s}
.onthul-cap{position:relative;margin-top:22px;font:600 13px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--klei);min-height:1.3em}
.onthul-cap span{position:absolute;left:0;top:0;transition:opacity .25s}
.onthul-cap .c-beer{opacity:0}
/* actief (JS + beweging toegestaan) */
.js-onthul .onthul-spoor{height:170vh}
.js-onthul .onthul{position:sticky;top:max(90px,calc(50vh - 340px));max-width:calc((100vh - 230px) * .8)}
.js-onthul .over-tekst{position:sticky;top:calc(50vh - 220px)}
.js-onthul .onthul-stempel{--s:.6;--o:0}
.js-onthul .klaar .onthul-stempel{--s:1;--o:1}
.js-onthul .onthul-cap .c-beer{opacity:1}
.js-onthul .onthul-cap .c-echt{opacity:0}
.js-onthul .klaar .onthul-cap .c-beer{opacity:0}
.js-onthul .klaar .onthul-cap .c-echt{opacity:1}
@media (max-width:980px){
  .js-onthul .onthul-spoor{height:135vh}
  .js-onthul .onthul{top:84px;max-width:min(100%,calc((100vh - 200px) * .8));margin:0 auto}
  .js-onthul .over-tekst{position:static}
}
/* reduced motion: beide foto's naast elkaar, geen scroll-effect */
@media (prefers-reduced-motion:reduce){
  .onthul-frame{display:grid;grid-template-columns:1fr 1fr;gap:10px;aspect-ratio:auto;border:0;box-shadow:none;background:none;overflow:visible}
  .onthul .laag{position:relative;inset:auto;aspect-ratio:4/5;clip-path:none;border:var(--rand) solid var(--inkt)}
  .onthul-rand,.onthul-stempel,.onthul-cap .c-beer{display:none}
}

/* Demo-alternatief: sleepbare voor/na-slider (demo-over-sibe-slider.html) */
.vergelijk{position:relative;aspect-ratio:4/5;border:var(--rand) solid var(--inkt);box-shadow:10px 10px 0 var(--inkt);overflow:hidden;background:var(--vacht);--v:50}
.vergelijk .laag{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vergelijk .laag-echt{clip-path:inset(0 calc((100 - var(--v)) * 1%) 0 0)}
.vergelijk .greep{position:absolute;top:0;bottom:0;left:calc(var(--v) * 1%);width:4px;margin-left:-2px;background:var(--honing-licht);pointer-events:none}
.vergelijk .greep::after{content:"";position:absolute;top:50%;left:50%;width:46px;height:46px;margin:-23px 0 0 -23px;background:var(--honing-licht) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l-6 6 6 6M15 6l6 6-6 6' fill='none' stroke='%231A1410' stroke-width='2.6' stroke-linecap='square'/%3E%3C/svg%3E") center/24px no-repeat;border:var(--rand) solid var(--inkt);box-shadow:4px 4px 0 var(--inkt)}
.vergelijk input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.vergelijk:has(input:focus-visible) .greep::after{outline:3px solid var(--inkt);outline-offset:3px}
.vergelijk .vtag{position:absolute;bottom:14px;font:600 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;background:var(--inkt);color:var(--papier);padding:7px 9px;pointer-events:none}
.vergelijk .vtag.l{left:14px}.vergelijk .vtag.r{right:14px}
.onthul-cap .c-rm{display:none}
@media (prefers-reduced-motion:reduce){.onthul-cap .c-echt{display:none}.onthul-cap .c-rm{display:inline;position:static}}

/* ==========================================================================
   BLOKKENBIBLIOTHEEK · lange content (zie /blokken/ en _bouw/blokken/)
   ========================================================================== */
.bl-sectie{padding:96px 0}
.bl-lang{display:grid;grid-template-columns:240px minmax(0,1fr);gap:64px;align-items:start}
.bl-lang>.bl-inhoud{position:sticky;top:96px}
.bl-artikel{max-width:760px;display:grid;gap:48px}
.bl-artikel>*{margin:0}
/* 1 · lange tekst */
.bl-tekst{max-width:68ch;font-size:18px;line-height:1.7}
.bl-tekst>*+*{margin-top:1em}
.bl-tekst h2{font:400 clamp(34px,4vw,50px)/.95 var(--display);text-transform:uppercase;margin-top:1.4em;scroll-margin-top:100px}
.bl-tekst h2:first-child,.bl-tekst h3:first-child{margin-top:0}
.bl-tekst h3{font:700 22px/1.25 var(--sans);letter-spacing:-.01em;margin-top:1.6em}
.bl-tekst h2+*,.bl-tekst h3+*{margin-top:.6em}
.bl-tekst p,.bl-tekst li{color:var(--klei)}
.bl-tekst strong{color:var(--inkt)}
.bl-tekst a{color:var(--honing-donker);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;font-weight:600}
.bl-tekst a:hover{color:var(--inkt)}
.bl-tekst ul,.bl-tekst ol{padding-left:0;list-style:none;display:grid;gap:.5em}
.bl-tekst ul li{position:relative;padding-left:26px}
.bl-tekst ul li::before{content:"";position:absolute;left:2px;top:.62em;width:10px;height:10px;background:var(--honing);transform:rotate(-6deg)}
.bl-tekst ol{counter-reset:n}
.bl-tekst ol li{counter-increment:n;position:relative;padding-left:38px}
.bl-tekst ol li::before{content:counter(n);position:absolute;left:0;top:.1em;width:26px;height:26px;display:grid;place-items:center;font:400 17px/1 var(--display);padding-top:2px;background:var(--honing);color:var(--inkt);transform:rotate(-4deg)}
/* afbeeldingen + placeholders */
.bl-fig{margin:0}
.bl-fig img,.bl-breed img{display:block;width:100%;height:auto;border:var(--rand) solid var(--inkt)}
.bl-fig figcaption,.bl-breed figcaption{margin-top:12px;font-size:14px;line-height:1.5;color:var(--klei)}
.bl-ph{background:var(--zand) repeating-linear-gradient(135deg,transparent 0 16px,rgba(26,20,16,.05) 16px 17px);border:var(--rand) dashed var(--klei);display:grid;place-items:center;padding:16px;text-align:center}
.bl-ph span{font:600 12px/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--klei);background:var(--papier);padding:7px 10px}
/* 2 · tekst + beeld */
.bl-duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center}
.bl-duo.omgekeerd>.bl-fig{order:-1}
.bl-artikel .bl-duo{gap:32px}
/* 3 · brede screenshot met aanwijzingen */
.bl-breed{margin:0}
.bl-breed-beeld{position:relative}
.bl-pin{position:absolute;width:38px;height:38px;margin:-19px 0 0 -19px;display:grid;place-items:center;font:400 22px/1 var(--display);padding-top:3px;background:var(--honing-licht);color:var(--inkt);border:var(--rand) solid var(--inkt);box-shadow:3px 3px 0 var(--inkt);transform:rotate(-4deg)}
.bl-legenda{list-style:none;padding:0;margin:4px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px 28px}
.bl-legenda li{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--klei)}
.bl-legenda b{flex:none;width:26px;height:26px;display:grid;place-items:center;font:400 16px/1 var(--display);padding-top:2px;background:var(--honing-licht);color:var(--inkt);transform:rotate(-4deg)}
/* 4 · stappen met beeld */
.bl-stappen{list-style:none;padding:0;margin:0;display:grid;gap:40px}
.bl-stappen>li{display:grid;grid-template-columns:60px minmax(0,1fr) minmax(0,1fr);gap:24px 28px;align-items:start}
.bl-stappen>li:not(:has(figure)){grid-template-columns:60px minmax(0,1fr)}
.bl-stappen .bl-tekst h3{margin-top:6px}
/* 5 · tip / let op / citaat */
.bl-noot{border:var(--rand) solid var(--inkt);padding:22px 24px;max-width:68ch;position:relative}
.bl-noot.tip{background:var(--zand)}
.bl-noot.letop{background:var(--inkt);color:var(--papier)}
.bl-noot p{font-size:17px;line-height:1.6}
.bl-noot-lab{display:inline-block;font:400 20px/1 var(--display)!important;text-transform:uppercase;padding:6px 10px 3px;margin:-36px 0 12px -6px;transform:rotate(-3deg);background:var(--honing);color:var(--inkt)}
.bl-noot.letop .bl-noot-lab{background:var(--honing-licht)}
.bl-noot+.bl-noot{margin-top:40px}
.bl-citaat{margin:0;max-width:640px}
.bl-citaat p{font:400 clamp(30px,3.6vw,44px)/1 var(--display);text-transform:uppercase}
.bl-citaat p::before{content:"\201C";color:var(--honing)}.bl-citaat p::after{content:"\201D";color:var(--honing)}
.bl-citaat footer{margin-top:14px;font:600 13px/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--klei)}
.bl-citaat footer::before{content:"— "}
/* 6 · tabel */
.bl-tabel-wrap{overflow-x:auto}
.bl-tabel{width:100%;border-collapse:collapse;background:var(--papier);border:var(--rand) solid var(--inkt);font-size:16px}
.bl-tabel caption{text-align:left;font:700 18px/1.3 var(--sans);padding-bottom:12px}
.bl-tabel th,.bl-tabel td{padding:14px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--lijn,rgba(26,20,16,.16))}
.bl-tabel thead th{background:var(--inkt);color:var(--papier);font:600 13px/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase}
.bl-tabel tbody th{font-weight:700;width:34%}
.bl-tabel td{color:var(--klei)}
.bl-tabel tr:last-child>*{border-bottom:0}
/* 8 · inhoudsopgave */
.bl-inhoud details{border:var(--rand) solid var(--inkt);background:var(--zand);padding:16px 18px}
.bl-inhoud summary{cursor:pointer;font:600 12px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--klei);list-style:none}
.bl-inhoud summary::-webkit-details-marker{display:none}
.bl-inhoud ol{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:8px;counter-reset:n}
.bl-inhoud li{counter-increment:n;display:flex;gap:10px;font-weight:600;font-size:15px;line-height:1.35}
.bl-inhoud li::before{content:counter(n);flex:none;font:400 15px/1 var(--display);color:var(--honing-donker);padding-top:3px}
.bl-inhoud a{color:var(--inkt);text-decoration:none}
.bl-inhoud a:hover{text-decoration:underline;text-decoration-color:var(--honing)}
/* stijlgids /blokken/ */
.gids-blok{padding:72px 0;border-top:var(--rand) solid var(--inkt)}
.gids-blok .gids-kop{display:flex;gap:16px;align-items:center;margin-bottom:12px}
.gids-uitleg{max-width:70ch;color:var(--klei);margin-bottom:36px}
.gids-uitleg code,.gids-code code{font:500 13px/1.5 ui-monospace,Menlo,Consolas,monospace}
.gids-code{margin-top:36px}
.gids-code summary{cursor:pointer;font-weight:700}
.gids-code pre{margin-top:12px;background:var(--inkt);color:var(--papier);padding:18px;overflow:auto;max-height:420px;font-size:13px}
@media (max-width:980px){
  .bl-lang{grid-template-columns:1fr;gap:32px}
  .bl-lang>.bl-inhoud{position:static}
  .bl-duo{grid-template-columns:1fr;gap:20px}
  .bl-duo.omgekeerd>.bl-fig{order:0}
  .bl-stappen>li,.bl-stappen>li:not(:has(figure)){grid-template-columns:48px minmax(0,1fr)}
  .bl-stappen>li .bl-fig{grid-column:2}
  .bl-stappen .sn{width:48px;height:48px;font-size:28px}
  .bl-sectie{padding:64px 0}
  .bl-tekst{font-size:17px}
}
@media (max-width:640px){
  .bl-pin{width:30px;height:30px;margin:-15px 0 0 -15px;font-size:18px}
  .bl-tabel thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .bl-tabel,.bl-tabel tbody,.bl-tabel tr,.bl-tabel th,.bl-tabel td{display:block;width:100%}
  .bl-tabel{border:0;background:none}
  .bl-tabel caption{display:block;width:100%}
  .bl-tabel tr{border:var(--rand) solid var(--inkt);background:var(--papier);margin-bottom:12px}
  .bl-tabel tbody th{width:auto;background:var(--inkt);color:var(--papier)}
  .bl-tabel td{display:flex;justify-content:space-between;gap:16px}
  .bl-tabel td::before{content:attr(data-label);font-weight:700;color:var(--inkt)}
}

/* ---------- De Honingraat (campagnepagina /honingraat/, noindex) ---------- */
.hr-hero{background:var(--inkt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='76.2' height='132'%3E%3Cg fill='none' stroke='%23B8761A' stroke-width='1.5' opacity='.22'%3E%3Cpolygon points='38.1,0 76.2,22 76.2,66 38.1,88 0,66 0,22'/%3E%3Cpolyline points='0,88 0,132'/%3E%3Cpolyline points='76.2,88 76.2,132'/%3E%3C/g%3E%3C/svg%3E")}
.hr-hero .lab.hr-lab{color:var(--honing-licht)}
.hr-hero .lead{color:var(--papier)}
.hr-prijs{margin-top:18px;max-width:44ch;font:600 18px/1.5 var(--sans);color:var(--zand)}
.hr-hero .btn-lijn{border-color:var(--papier);color:var(--papier)}
.hr-beeld{margin:0;justify-self:end;max-width:400px;border:var(--rand) solid var(--papier);box-shadow:var(--d3) var(--d3) 0 var(--honing-licht);transform:rotate(1.5deg)}
.hr-beeld img{display:block;width:100%;height:auto}
.hr-stappen{grid-template-columns:repeat(3,minmax(0,1fr))}
.hr-noot{margin-top:40px;font:600 18px/1.5 var(--sans);max-width:60ch}
.hr-formulieren{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start}
.hr-form{background:var(--papier)}
.hr-form-honing{background:var(--honing-licht)}
.hr-form-honing .lab{color:var(--inkt)}
.hr-fkop{font-size:clamp(28px,3vw,40px);margin:10px 0 24px}
.hr-form .veld:first-of-type{margin-top:0}
.hr-vink{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;align-items:start;margin-top:18px;font:400 15px/1.45 var(--sans);cursor:pointer}
.hr-vink input{appearance:none;-webkit-appearance:none;width:28px;height:28px;margin:0;border:var(--rand) solid var(--inkt);background:#fff;cursor:pointer;display:grid;place-items:center}
.hr-vink input:checked{background:#fff center/70% 70% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.2l5.2 5.3L20 6.5' fill='none' stroke='%231A1410' stroke-width='3.6' stroke-linecap='square'/%3E%3C/svg%3E")}
.hr-vink input:focus-visible{outline:none;box-shadow:var(--d1) var(--d1) 0 var(--honing)}
.hr-regels{max-width:820px}
@media (max-width:980px){.hr-formulieren{grid-template-columns:1fr;gap:40px}.hr-beeld{justify-self:start;max-width:320px}.hr-stappen{grid-template-columns:1fr;gap:28px}}

/* ---------- teksten v1 (nov 2026): formulier-keuzelijst, bedankmelding, pakketblok, lange bedragen ---------- */
.veld select{width:100%;font:400 16px/1.4 var(--sans);padding:12px 40px 12px 14px;border:var(--rand) solid var(--inkt);border-radius:var(--r);color:var(--inkt);
  appearance:none;-webkit-appearance:none;background:#fff right 14px center/14px 14px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 9l7 7 7-7' fill='none' stroke='%231A1410' stroke-width='3'/%3E%3C/svg%3E")}
.veld select:focus{outline:none;box-shadow:var(--d1) var(--d1) 0 var(--honing)}
.form-bedankt{margin-top:4px}
.form-bedankt .t{font-size:clamp(28px,3vw,38px);line-height:.95}
.form-bedankt p+p{margin-top:12px}
form.verstuurd>*:not(.form-bedankt){display:none}
.form-test{font-size:12px;color:var(--klei);margin-top:14px}
.pakket .vink{margin-top:6px}
.pakket-prijs{margin-top:26px;font:600 17px/1.45 var(--sans);max-width:44ch}
/* tegels met lange bedragen (bijv. € 10.597,98): kleiner zetten i.p.v. afkappen */
.tegel b.lang{font-size:.78em}
.rapport.groot .tegels{grid-template-columns:repeat(6,minmax(0,1fr))}
.rapport.groot .tegel{grid-column:span 2}
.rapport.groot .tegels .tegel:nth-child(4):nth-last-child(2),.rapport.groot .tegels .tegel:nth-child(5):last-child{grid-column:span 3}

/* ---------- reviewsblok (statisch, _bouw/reviews.py) ---------- */
.rv-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:8px;align-items:start}
.rv-kaart{position:relative;margin:0;padding:34px 28px 24px;background:var(--papier)}
.rv-kaart.r1{transform:rotate(-.6deg)}.rv-kaart.r2{transform:rotate(.5deg)}.rv-kaart.r3{transform:rotate(-.3deg)}
.rv-stempel{position:absolute;top:-14px;left:20px;font:18px/1 var(--display);text-transform:uppercase;background:var(--honing);color:var(--inkt);padding:6px 9px 2px;transform:rotate(-3deg)}
.rv-kaart blockquote p{font:600 19px/1.5 var(--sans);letter-spacing:-.01em}
.rv-kaart figcaption{margin-top:18px;padding-top:14px;border-top:2px solid var(--zand);display:grid;gap:2px}
.rv-kaart figcaption b{font-size:16px}
.rv-kaart figcaption span{font-size:14px;color:var(--klei)}
.rv-score{margin-top:14px;font:600 16px/1.4 var(--sans);color:var(--klei)}
.rv-alle{margin-top:36px}
.rv-vb{position:absolute;top:-14px;right:16px;font:700 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;background:var(--inkt);color:var(--honing-licht);padding:7px 8px}
@media (max-width:980px){.rv-grid{grid-template-columns:1fr;gap:36px}.rv-kaart.r1,.rv-kaart.r2,.rv-kaart.r3{transform:none}}
.tegel b{white-space:nowrap}
@media (max-width:560px){
  .rapport.groot .tegels{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rapport.groot .tegels .tegel{grid-column:auto!important}
  .rapport.groot .tegels .tegel:last-child:nth-child(odd){grid-column:1/-1!important}
  .tegel b.lang{font-size:.72em}
}
/* v6: komma na 'garanties' moet op dezelfde regel passen */
@media (min-width:981px){#bel-t{font-size:clamp(38px,4.9vw,72px)}}
/* v6: SEO-werkwijze met 5 stappen */
.stappen.vijf{grid-template-columns:repeat(5,minmax(0,1fr));gap:28px}
.sn.r5{transform:rotate(-3deg)}
@media (max-width:980px){.stappen.vijf{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.stappen.vijf{grid-template-columns:1fr}}
/* v7: schematisch voorbeeld Google Bedrijfsprofiel (SEO-stap 2) */
.gbp-vb{position:relative;margin:22px 0 0;max-width:340px}
.gbp-vb svg{display:block;width:100%;height:auto;box-shadow:var(--d1) var(--d1) 0 var(--inkt);border-radius:14px}
.gbp-vb .tag{top:-12px;right:-6px;font-size:16px}
.gbp-vb figcaption{margin-top:12px;font-size:13px;line-height:1.4;color:var(--klei)}
/* v8: kolomnaam in mobiele tabelkaart niet afbreken */
@media (max-width:560px){.bl-tabel td::before{white-space:nowrap;flex:none}}
/* v8: width/height-attributen alleen voor de beeldverhouding; CSS bepaalt de maat */
:where(img[width][height]){height:auto}

/* Hero: beerkop uit het logo als beeld (v11). Snuit blijft vrij boven het Berenrapport. */
.held-beer{position:absolute;right:2%;top:0;width:60%;height:auto;aspect-ratio:1;transform:rotate(4deg);pointer-events:none}
@media (max-width:980px){
  .held-beer{position:relative;right:auto;top:auto;width:min(48%,260px);margin-left:auto;margin-right:8%}
  .held .rapport{margin-top:-28px}
}

/* Formulier: na een verzendpoging lege/foute velden markeren (v12). De browser toont zelf de melding. */
form.geprobeerd .veld :is(input,textarea,select):invalid{border-color:var(--honing-donker);background:#FBF1E1;box-shadow:var(--d1) var(--d1) 0 var(--honing-donker)}

/* v13: alle paginahero's donker, met dezelfde warme gloed als de homepage */
.phero.dark{background:radial-gradient(ellipse 50% 70% at 75% 45%,#3A2C25 0%,#241B16 50%,var(--inkt) 80%)}

/* v14: juridische pagina's (privacy, algemene voorwaarden) */
.jur-datum{margin-top:18px;font:600 13px/1.4 var(--sans);letter-spacing:.06em;color:rgba(242,236,226,.7)}
.juridisch ol.n{margin:10px 0 10px 22px;list-style:decimal}
.juridisch ol.n li+li,.juridisch ul.l li+li{margin-top:8px}
.juridisch ol.n li::marker{font-weight:700;color:var(--inkt)}
.juridisch strong{color:var(--inkt)}
.juridisch a{text-decoration-thickness:2px;text-underline-offset:3px}
.juridisch .bl-tabel-wrap{margin:22px 0 26px;max-width:none}
.juridisch>p+.bl-tabel-wrap,.juridisch>.bl-tabel-wrap+p{margin-top:22px}
.jur-tabel{font-size:15px}
.jur-tabel tbody th{width:auto;min-width:12ch}
.juridisch{max-width:78ch}
@media (max-width:640px){
  .jur-tabel td{display:block}
  .jur-tabel td::before{display:block;white-space:normal;font:600 12px/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;margin-bottom:4px}
}

/* v15: cookiemelding (geen muur: klein kaartje linksonder, site blijft bruikbaar) */
.cookie{position:fixed;left:24px;bottom:24px;z-index:900;width:min(440px,calc(100% - 48px));background:var(--inkt);color:var(--papier);
  border:var(--rand) solid var(--papier);box-shadow:var(--d2) var(--d2) 0 var(--honing-licht);padding:22px 22px 20px}
.cookie[hidden]{display:none}
.ck-t{font:400 30px/1 var(--display);text-transform:uppercase}
.ck-d{margin-top:10px;font-size:15px;line-height:1.5;color:rgba(242,236,226,.86)}
.ck-d a{color:var(--papier);text-decoration-thickness:2px;text-underline-offset:3px}
.ck-knoppen{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}
.ck-knop{min-height:48px;padding:10px 14px;background:var(--papier);color:var(--inkt);border-color:var(--papier);font-size:16px}
.ck-knop:hover,.ck-knop:focus-visible{background:var(--honing-licht);border-color:var(--honing-licht)}
.linkknop{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-decoration:none}
.linkknop:hover{text-decoration:underline}
@media (max-width:560px){.cookie{left:12px;right:12px;bottom:12px;width:auto;padding:18px 16px 16px}.ck-t{font-size:26px}.ck-d{font-size:14px}}
html.menu-open .cookie{display:none}

/* Voorbeeld-label op een Berenrapport met voorbeeldcijfers */
.vb-label{display:inline-block;background:var(--honing-licht);color:var(--inkt);border:2px solid var(--inkt);padding:3px 7px 2px;margin-right:6px;font-weight:700;letter-spacing:.12em}

/* v16: vaste CTA-balk onderaan, alleen mobiel (<=768px). Getoond door site.js na de hero. */
.ctabalk{display:none}
@media (max-width:768px){
  .ctabalk{position:fixed;left:0;right:0;bottom:0;z-index:800;display:grid;grid-template-columns:1.25fr 1fr;gap:10px;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));background:var(--inkt);border-top:var(--rand) solid var(--honing-licht);
    transform:translateY(0);transition:transform .2s ease,visibility .2s}
  .ctabalk[hidden]{display:grid;transform:translateY(110%);visibility:hidden}
  .ctabalk .btn{min-height:46px;padding:10px 12px;font-size:15px;color:var(--papier)}
  .ctabalk .btn-honing{color:var(--inkt)}
  body.met-ctabalk{padding-bottom:calc(70px + env(safe-area-inset-bottom,0px))}
  html.menu-open .ctabalk{visibility:hidden}
}
@media (prefers-reduced-motion:reduce){.ctabalk{transition:none}}