/* Veenstra IT — computerhulp voor thuis. Familiestijl (warm wit, oranje, Manrope) met eigen signatuur: de werkbon. */
@font-face{font-family:"Manrope";src:url("/assets/fonts/manrope-variable-latin.woff2") format("woff2");font-weight:400 800;font-style:normal;font-display:swap}

:root{
  --papier:#FFFCF7;--wit:#FFFFFF;--papier-rgb:255,252,247;
  --ink:#1C1C22;--zadel:#5C5C68;--zadel-2:#7E7E8A;
  --oranje:#FF8514;--oranje-d:#E8700B;--oranje-t:#B05200;--oranje-l:#FFF1E2;--geel:#FFBA09;
  --staal:#F3E9DA;--staal-t:#FFF5EA;
  --lijn:#EFE6D8;--lijn-z:#E2D5C2;
  --band:linear-gradient(160deg,#FF8514 0%,#FF9A2E 55%,#FFBA09 100%);--band-ink:#1C1C22;--band-mut:#3F2E1E;
  --groen:#2E9E5B;--rood:#C2410C;
  --schaduw:0 24px 60px -30px rgba(51,41,29,.35),0 2px 6px rgba(51,41,29,.06);
  --schaduw-s:0 10px 30px -18px rgba(51,41,29,.35),0 1px 3px rgba(51,41,29,.06);
  --uit:cubic-bezier(.23,1,.32,1);
  --display:"Manrope",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:"Manrope",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:14px;--r-s:8px;--r-pil:999px;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:110px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
body{margin:0;background:var(--papier);color:var(--ink);font:17px/1.65 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--oranje);color:#1C1C22}
img,svg{max-width:100%;display:block}
img{height:auto}
a{color:inherit;text-decoration:none}
a,button{-webkit-tap-highlight-color:transparent}
h1,h2,h3,h4,p,figure,dl,dd,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
[hidden]{display:none!important}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
:focus-visible{outline:3px solid var(--oranje-d);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:10px 14px;border-radius:var(--r-s);font-weight:700}
.skip:focus{top:12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.wrap{width:min(100% - 48px,1200px);margin-inline:auto}
@media (max-width:640px){.wrap{width:min(100% - 32px,1200px)}}
.sec{padding-block:clamp(64px,8vw,120px)}
.sec.strak{padding-block:clamp(40px,5vw,72px)}
.sec.alt{background:var(--staal-t)}

h1,h2,h3{font-family:var(--display);text-wrap:balance;letter-spacing:-.025em}
h1{font-size:clamp(2.4rem,5.4vw,4.4rem);font-weight:800;line-height:1.02}
h2{font-size:clamp(1.9rem,3.8vw,3rem);font-weight:800;line-height:1.08}
h3{font-size:1.3rem;font-weight:700;line-height:1.25;letter-spacing:-.015em}
h1 em,h2 em{font-style:normal;color:var(--oranje-d)}
.lead{font-size:1.15rem;line-height:1.6;color:var(--zadel);max-width:36em;text-wrap:pretty}
.kicker{display:inline-flex;align-items:center;gap:8px;font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--oranje-t)}
.kicker::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--oranje)}
.kop{display:grid;gap:16px;max-width:52rem;margin-bottom:clamp(32px,4vw,56px)}
.num{font-variant-numeric:tabular-nums}

/* knoppen */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 24px;border-radius:var(--r-pil);font-weight:700;font-size:1rem;line-height:1.2;background:var(--wit);color:var(--ink);border:1.5px solid var(--lijn-z);transition:transform .16s var(--uit),background .16s,border-color .16s;white-space:nowrap}
.knop svg{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover){.knop:hover{transform:translateY(-1px);border-color:var(--zadel-2)}}
.knop:active{transform:scale(.97)}
.knop.oranje{background:var(--oranje);color:#1C1C22;border-color:transparent}
.knop.oranje:hover{background:var(--oranje-d)}
.knop.groot{min-height:56px;padding:14px 28px;font-size:1.05rem}
.knop.donker{background:var(--ink);color:#fff;border-color:transparent}
.tlink{display:inline-flex;align-items:center;min-height:44px;gap:6px;font-weight:700;color:var(--oranje-t);border-bottom:2px solid transparent;transition:gap .16s var(--uit),border-color .16s}
.tlink::after{content:"→"}
.tlink:hover{border-bottom-color:var(--oranje-t);gap:10px}
.acties{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center;margin-top:28px}

/* telefoonblok */
.tel{display:grid;gap:4px;width:max-content;max-width:100%;min-height:44px;align-content:center}
.tel b{font-family:var(--display);font-size:clamp(1.6rem,2.4vw,2.1rem);font-weight:800;letter-spacing:-.02em;line-height:1;white-space:nowrap}
.tel span{display:inline-flex;align-items:center;gap:8px;font-size:.85rem;font-weight:600;color:var(--zadel)}
.tel i{width:8px;height:8px;border-radius:50%;background:var(--groen);box-shadow:0 0 0 3px color-mix(in srgb,var(--groen) 20%,transparent);flex:none}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:var(--r-pil);background:var(--wit);border:1px solid var(--lijn);font-size:.85rem;font-weight:600;color:var(--zadel)}
.chip b{color:var(--ink);font-weight:800}
.chip svg{width:16px;height:16px;stroke:var(--oranje-d);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* koptekst: vast, transparant boven de foto, papier zodra je scrolt */
.top{position:fixed;top:0;left:0;right:0;z-index:40;background:transparent;border-bottom:1px solid transparent;transition:background .25s ease,border-color .25s ease,box-shadow .25s ease}
.top.gescrold,.top.open{background:rgba(var(--papier-rgb),.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom-color:var(--lijn)}
body:not(.met-hero) main{padding-top:76px}
.belknop{display:none}
.top-in{display:flex;align-items:center;gap:24px;height:76px}
.merk{display:flex;align-items:center;gap:14px;margin-right:auto;min-height:48px}
.merk img{height:40px;width:auto}
@media (max-width:640px){.merk img{height:34px}.merk small{display:none}}
.merk .woord{font-family:var(--display);font-weight:800;font-size:1.35rem;letter-spacing:-.03em;color:var(--oranje-d);line-height:1}
.merk small{display:block;font-size:.68rem;color:var(--zadel);letter-spacing:.08em;text-transform:uppercase;font-weight:700;padding-left:14px;border-left:1px solid var(--lijn-z);line-height:1;white-space:nowrap}
.merk .leeuw{width:34px;height:34px;border-radius:9px;background:var(--oranje-l);display:grid;place-items:center}
.merk .leeuw svg{width:22px;height:22px}
.nav{display:flex;align-items:center;gap:22px;font-size:.95rem;font-weight:600;white-space:nowrap}
.nav a.alleen-mobiel{display:none}
.nav-groep{position:relative}
.nav-groep>a::after{content:"";display:inline-block;width:6px;height:6px;margin-left:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);opacity:.55}
.nav-sub{position:absolute;left:50%;top:100%;transform:translateX(-50%);padding-top:14px;opacity:0;visibility:hidden;transition:opacity .16s ease,visibility .16s}
.nav-groep:hover .nav-sub,.nav-groep:focus-within .nav-sub{opacity:1;visibility:visible}
.nav-sub{left:0;transform:none}
.nav-sub-in{display:grid;gap:2px;min-width:250px;background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r);box-shadow:var(--schaduw);padding:8px}
.nav-sub-in a{display:flex;align-items:center;justify-content:flex-start;text-align:left;min-height:44px;min-width:0;padding:8px 12px;border-radius:var(--r-s);border-bottom:0;font-weight:600;white-space:nowrap;color:var(--ink)}
.nav-sub-in a:hover,.nav-sub-in a:focus-visible{background:var(--staal-t);color:var(--oranje-t);outline-offset:-2px}
.nav a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 2px;border-bottom:2px solid transparent;transition:border-color .16s}
.nav a:hover,.nav a[aria-current=page]{border-color:var(--oranje)}
.top .knop{min-height:48px;padding:8px 20px;font-size:.95rem;display:inline-grid;grid-template-columns:auto auto;column-gap:8px;align-items:center;text-align:left}
.top .knop small{grid-column:2;font-size:.7rem;font-weight:600;line-height:1;margin-top:-4px;opacity:.85}
.top .knop svg{grid-row:span 2}
@media (max-width:1180px){.nav{gap:14px;font-size:.88rem}.merk small{display:none}.top .knop{padding:8px 16px}.top .knop small{font-size:.65rem}}
.menuknop{display:none;width:48px;height:48px;border-radius:12px;border:1.5px solid var(--lijn-z);place-items:center;background:var(--wit)}
.menuknop svg{width:22px;height:22px;stroke:var(--ink);fill:none;stroke-width:2;stroke-linecap:round}
@media (max-width:960px){
  .nav,.top .cta-top{display:none}
  .menuknop{display:grid}
  .belknop{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--oranje);color:#1C1C22}
  .belknop svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  body:not(.met-hero) main{padding-top:68px}
  .top-in{height:68px;gap:10px}
  .top.open .nav{display:flex;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;background:var(--papier);border-bottom:1px solid var(--lijn);padding:8px 24px 20px;box-shadow:var(--schaduw);max-height:calc(100dvh - 68px);overflow-y:auto;overscroll-behavior:contain}
  .top.open .nav a{padding:14px 4px;border-bottom:1px solid var(--lijn);font-size:1.05rem}
  .top.open .nav a:last-child{border-bottom:0}
  .top.open .nav a.alleen-mobiel{display:flex}
  .top.open .nav-groep{display:block;border-bottom:1px solid var(--lijn)}
  .top.open .nav-groep>a{border-bottom:0}
  .top.open .nav-sub{position:static;transform:none;opacity:1;visibility:visible;padding:0 0 12px}
  .top.open .nav-sub-in{border:0;box-shadow:none;padding:0;background:transparent;grid-template-columns:1fr;gap:4px;min-width:0}
  .top.open .nav-sub-in a{padding:10px 12px;background:var(--staal-t);font-size:.95rem;font-weight:600;white-space:normal;justify-content:flex-start}
  /* plaatsnamen zijn kort: twee naast elkaar */
  .top.open .nav-groep:nth-of-type(2) .nav-sub-in{grid-template-columns:1fr 1fr}
}

/* hero: vol-breed gezinsfoto, warm verloop links */
.hero.gezin{position:relative;overflow:hidden;background:var(--staal-t);min-height:min(88vh,780px);display:grid;align-items:center;padding:0}
.hero-achter{position:absolute;inset:0;margin:0}
.hero-achter img{width:100%;height:100%;object-fit:cover;object-position:74% 42%}
.hero-sluier{position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,252,247,.98) 0%,rgba(255,252,247,.96) 36%,rgba(255,252,247,.78) 50%,rgba(255,252,247,.22) 64%,rgba(255,252,247,0) 76%),linear-gradient(0deg,rgba(255,252,247,.92) 0%,rgba(255,252,247,0) 34%),linear-gradient(180deg,rgba(255,252,247,.55) 0%,rgba(255,252,247,0) 120px)}
.hero.gezin .hero-rij{position:relative;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px;padding-block:calc(76px + clamp(40px,6vw,88px)) clamp(96px,11vw,150px)}
.hero-tekst h1{margin-top:18px;max-width:12.5em}
.hero-tekst h1 span{display:block}
.hero-tekst .lead{margin-top:22px;font-size:1.2rem;color:#3F3F49;max-width:32em}
.hero-tekst .acties{margin-top:30px}
.hero-onder{margin-top:28px;display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center}
.hero-feiten{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.9rem;font-weight:600;color:#4A4A55}
.hero-feiten span{display:inline-flex;align-items:center;gap:8px}
.hero-feiten span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--oranje)}
.hero-bijschrift{position:absolute;right:24px;bottom:14px;font-size:.75rem;color:#3F3F49;background:rgba(255,252,247,.7);padding:4px 10px;border-radius:var(--r-pil)}
.hero-bon{position:relative;z-index:2;margin-top:-64px}
.werkbon.breed{padding:18px 24px 14px}
.werkbon.breed ul{display:grid;grid-template-columns:repeat(4,1fr);gap:0 24px}
.werkbon.breed li{display:grid;gap:4px;padding:14px 0 10px;border-bottom:0;border-right:1px dotted var(--lijn-z);padding-right:16px}
.werkbon.breed li:last-child{border-right:0}
.werkbon.breed li span:first-child{font-size:.8rem;color:var(--zadel);font-weight:600;letter-spacing:.02em}
.werkbon.breed li b{font-size:1.5rem;line-height:1.1}
.werkbon.breed li b small{font-size:.75rem;font-weight:600;color:var(--zadel);margin-left:4px}
.werkbon.breed .wb-voet{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;align-items:center}
@media (max-width:900px){
  .hero.gezin{min-height:0;display:block}
  .hero-achter{position:relative;aspect-ratio:5/4;margin-top:0}
  .hero-achter img{object-position:60% 40%}
  .hero-sluier{background:linear-gradient(0deg,var(--papier) 0%,rgba(255,252,247,.85) 14%,rgba(255,252,247,0) 40%),linear-gradient(180deg,rgba(255,252,247,.92) 0,rgba(255,252,247,.55) 68px,rgba(255,252,247,0) 130px);top:auto;height:100%;pointer-events:none}
  .hero.gezin .hero-rij{grid-template-columns:1fr;padding-block:0 clamp(72px,12vw,96px);margin-top:-14vw}
  .hero-achter{aspect-ratio:16/11;padding-top:0}
  .hero-tekst{display:grid}
  .hero-tekst .kicker{order:1;background:rgba(255,252,247,.9);padding:6px 10px;border-radius:var(--r-pil)}
  .hero-tekst .hero-onder{order:2;margin-top:14px;gap:10px 20px}
  .hero-tekst h1{order:3;font-size:clamp(2rem,8.5vw,2.6rem);margin-top:14px}
  .hero-tekst .acties{order:4;margin-top:20px}
  .hero-tekst .lead{order:5}.hero-tekst h1{order:2;margin-top:12px}.hero-tekst .hero-onder{order:3;margin-top:16px}.hero-tekst .acties{order:4;margin-top:18px}.hero-tekst .lead{order:5;margin-top:18px;font-size:1.08rem}
  .hero-bijschrift{display:none}
  .hero-bon{margin-top:-56px}
  .werkbon.breed ul{grid-template-columns:1fr 1fr;gap:0 16px}
  .werkbon.breed li{border-right:0;border-bottom:1px dotted var(--lijn-z);padding:10px 0}
  .werkbon.breed li:nth-child(odd){border-right:1px dotted var(--lijn-z);padding-right:12px}
  .werkbon.breed li:nth-last-child(-n+2){border-bottom:0}
}
@media (max-width:480px){.werkbon.breed li b{font-size:1.3rem}.hero.gezin .hero-rij{margin-top:-10vw}}

/* werkbon: de signatuur van deze site */
.werkbon{background:var(--wit);border:1px solid var(--lijn-z);border-radius:var(--r-s);box-shadow:var(--schaduw);padding:16px 18px 14px;font-size:.92rem;position:relative}
.werkbon::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:repeating-linear-gradient(90deg,var(--oranje) 0 14px,transparent 14px 20px);border-radius:var(--r-s) var(--r-s) 0 0;opacity:.9}
.werkbon .wb-kop{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--zadel);padding:6px 0 10px;border-bottom:1px dashed var(--lijn-z)}
.werkbon li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px dotted var(--lijn-z);align-items:baseline}
.werkbon li:last-child{border-bottom:0}
.werkbon li span:first-child{color:var(--ink)}
.werkbon li b{font-family:var(--display);font-weight:800;color:var(--oranje-t);white-space:nowrap;font-variant-numeric:tabular-nums}
.werkbon small{display:block;color:var(--zadel);font-size:.78rem;margin-top:8px}
.werkbon .wb-voet{margin-top:10px;padding-top:10px;border-top:1px dashed var(--lijn-z);font-size:.8rem;color:var(--zadel)}
.werkbon .wb-voet a{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:var(--oranje-t)}

/* substrip */
.substrip{border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn);background:var(--wit)}
.substrip ol{display:grid;grid-template-columns:repeat(4,1fr)}
.substrip li{padding:18px 20px;border-right:1px solid var(--lijn)}
.substrip li:last-child{border-right:0}
.substrip b{display:block;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--oranje-t);margin-bottom:4px}
.substrip span{font-size:.9rem;color:var(--zadel)}
@media (max-width:860px){.substrip ol{grid-template-columns:1fr 1fr}.substrip li:nth-child(2){border-right:0}.substrip li:nth-child(-n+2){border-bottom:1px solid var(--lijn)}}
@media (max-width:480px){.substrip ol{grid-template-columns:1fr}.substrip li{border-right:0;border-bottom:1px solid var(--lijn)}.substrip li:last-child{border-bottom:0}}

/* kaarten */
.kaarten{display:grid;gap:16px;grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.kaarten{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.kaarten{grid-template-columns:1fr}}
.kaart{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r);padding:24px;box-shadow:var(--schaduw-s);display:grid;gap:10px;align-content:start;transition:transform .2s var(--uit),box-shadow .2s}
a.kaart:hover{transform:translateY(-3px);box-shadow:var(--schaduw)}
.kaart .tegel{width:44px;height:44px;border-radius:10px;background:var(--oranje-l);display:grid;place-items:center;margin-bottom:6px}
.kaart .tegel svg{width:22px;height:22px;stroke:var(--oranje-d);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.kaart h3{font-size:1.15rem}
.kaart p{color:var(--zadel);font-size:.95rem}
.kaart .prijs{font-weight:800;color:var(--ink);font-size:.95rem}
.kaart .tlink{margin-top:4px;font-size:.92rem}

/* feiten-strip */
.feiten{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--lijn);border-radius:var(--r);background:var(--wit);overflow:hidden}
.feiten li{padding:22px 24px;border-right:1px solid var(--lijn)}
.feiten li:last-child{border-right:0}
.feiten b{display:block;font-family:var(--display);font-size:1.7rem;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.feiten span{display:block;font-size:.85rem;color:var(--zadel);margin-top:4px}
@media (max-width:860px){.feiten{grid-template-columns:1fr 1fr}.feiten li:nth-child(2){border-right:0}.feiten li:nth-child(-n+2){border-bottom:1px solid var(--lijn)}}
@media (max-width:420px){.feiten{grid-template-columns:1fr}.feiten li{border-right:0;border-bottom:1px solid var(--lijn)}.feiten li:last-child{border-bottom:0}}

/* fotokaart: beeld in kaart naast tekst */
.fotokaart{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:0;background:var(--wit);border:1px solid var(--lijn);border-radius:22px;overflow:hidden;box-shadow:var(--schaduw)}
.fotokaart .beeld{background:var(--staal-t);padding:clamp(20px,3vw,40px);display:grid;align-items:center}
.fotokaart .beeld img{border-radius:var(--r);width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;box-shadow:var(--schaduw-s)}
.fotokaart .tekst{padding:clamp(28px,4vw,56px);display:grid;gap:16px;align-content:center}
.fotokaart.omgekeerd .beeld{order:2}
@media (max-width:900px){.fotokaart,.fotokaart.omgekeerd{grid-template-columns:1fr}.fotokaart.omgekeerd .beeld{order:0}}
.vink{display:grid;gap:10px;font-size:1rem}
.vink li{display:flex;gap:12px;align-items:flex-start}
.vink li::before{content:"";flex:none;width:20px;height:20px;margin-top:3px;border-radius:50%;background:var(--oranje);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/14px no-repeat,linear-gradient(#000,#000);-webkit-mask-composite:destination-out;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/14px no-repeat,linear-gradient(#000,#000);mask-composite:exclude}

/* oranje band + stappen */
.band-oranje{background:linear-gradient(160deg,#FF8514 0%,#FF9A2E 55%,#FFBA09 100%);color:#1C1C22}
.band-oranje .kicker{color:#1C1C22}
.band-oranje .kicker::before{background:#1C1C22}
.band-oranje h2 em{color:#fff}
.band-oranje .lead{color:rgba(28,28,34,.82)}
.stappen{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;counter-reset:stap}
.stappen li{background:var(--wit);border-radius:var(--r);padding:22px;box-shadow:0 30px 60px -30px rgba(28,28,34,.45);display:grid;gap:8px;align-content:start}
.stappen li::before{counter-increment:stap;content:counter(stap,decimal-leading-zero);font-family:var(--display);font-weight:800;font-size:.8rem;letter-spacing:.1em;color:var(--oranje-t)}
.stappen h3{font-size:1.1rem}
.stappen p{color:var(--zadel);font-size:.95rem}
@media (max-width:900px){.stappen{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.stappen{grid-template-columns:1fr}}

/* werkgebied */
.plaatsen{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.plaatsen li{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r);padding:18px;box-shadow:var(--schaduw-s)}
.plaatsen a{display:grid;gap:4px}
.plaatsen b{font-family:var(--display);font-size:1.15rem;font-weight:800;letter-spacing:-.02em}
.plaatsen span{font-size:.85rem;color:var(--zadel)}
@media (max-width:900px){.plaatsen{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.plaatsen{grid-template-columns:1fr 1fr}}

/* keurmerken + reviews */
.merken{display:flex;flex-wrap:wrap;gap:14px 32px;align-items:center;padding:18px 0;border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn)}
.merken li{display:flex;align-items:center;gap:10px;font-size:.9rem;font-weight:600;color:#4A4A55}
.merken img,.merken svg{height:26px;width:auto}
.scores{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:56rem}
@media (max-width:700px){.scores{grid-template-columns:1fr}}
.score-kaart{display:grid;gap:16px;background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r);padding:26px;box-shadow:var(--schaduw-s);transition:transform .2s var(--uit),box-shadow .2s}
.score-kaart:hover{transform:translateY(-3px);box-shadow:var(--schaduw)}
.review-strip{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,56px);align-items:center}
@media (max-width:860px){.review-strip{grid-template-columns:1fr}}
.score{display:flex;align-items:center;gap:18px}
.score b{font-family:var(--display);font-size:clamp(3rem,6vw,4.5rem);font-weight:800;letter-spacing:-.04em;line-height:1}
.sterren{display:flex;gap:3px}
.sterren svg{width:22px;height:22px;fill:var(--oranje);stroke:none}
.sterren svg.half{fill:url(#half)}
.score small{display:block;color:var(--zadel);font-size:.9rem;margin-top:4px}

/* faq */
.faq{display:grid;gap:10px;max-width:56rem}
.faq details{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r);padding:0 22px;box-shadow:var(--schaduw-s)}
.faq summary{list-style:none;cursor:pointer;padding:18px 0;font-weight:700;font-size:1.05rem;display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:30px;height:30px;border-radius:50%;background:var(--oranje-l);color:var(--oranje-d);display:grid;place-items:center;font-weight:800}
.faq details[open] summary::after{content:"–"}
.faq details>div{padding:0 0 20px;color:var(--zadel)}
.faq details>div p+p{margin-top:10px}

/* donkere slotband */
.band{background:var(--band);color:var(--band-ink)}
.band .kicker,.slotband .kicker{color:#1C1C22}.slotband .kicker::before{background:#1C1C22}
.band .lead,.band p,.slotband .lead,.slotband p{color:rgba(28,28,34,.82)}
.band h2 em,.slotband h2 em{color:#fff}
.band .tel b{color:#1C1C22}
.band .tel span{color:var(--band-mut)}
.band .knop{border-color:rgba(28,28,34,.28);background:rgba(255,252,247,.55);color:#1C1C22}
.band .knop.oranje{background:var(--oranje);color:#1C1C22;border-color:transparent}
.slot{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,64px);align-items:center}
@media (max-width:860px){.slot{grid-template-columns:1fr}}
.tijden{display:grid;gap:8px;font-size:.95rem}
.tijden li{display:flex;justify-content:space-between;gap:16px;padding:8px 0;border-bottom:1px solid rgba(28,28,34,.18)}
.tijden li span:last-child{color:#1C1C22;font-weight:800;white-space:nowrap}
.band .tijden li span:first-child,.slotband .tijden li span:first-child{color:rgba(28,28,34,.75)}

/* voet */
.voet{background:var(--staal);color:#3F3F49;font-size:.92rem;padding:clamp(40px,6vw,72px) 0 28px;border-top:1px solid var(--lijn-z)}
.voet-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
@media (max-width:900px){.voet-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.voet-grid{grid-template-columns:1fr}}
.voet h2{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin-bottom:14px;font-weight:800}
.voet li{margin:0}
.voet li a,.voet address a{display:inline-flex;align-items:center;min-height:44px}
.voet-onder a{display:inline-flex;align-items:center;min-height:44px}
.voet a:hover{color:var(--oranje-t)}
.voet .merk .woord{color:var(--oranje-d)}
.voet .merk small{color:var(--zadel)}
.voet address{font-style:normal;line-height:1.5;margin-top:10px}
.voet-onder{margin-top:36px;padding-top:18px;border-top:1px solid var(--lijn-z);display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;font-size:.82rem}
.voet-onder ul{display:flex;flex-wrap:wrap;gap:16px}

/* mobiele plakbalk: verschijnt zodra je voorbij de hero scrolt */
.plak{position:fixed;left:12px;right:12px;bottom:12px;z-index:45;display:none;gap:8px;padding:8px;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--lijn);border-radius:var(--r-pil);box-shadow:var(--schaduw);transform:translateY(140%);transition:transform .3s var(--uit)}
.plak.zichtbaar{transform:none}
.plak .knop{flex:1;justify-content:center;min-height:52px;padding:12px 16px}
.plak .knop.wa{border-color:#25D366;color:#146B3C;background:var(--wit)}
.plak .knop.wa svg{stroke:#146B3C}
@media (max-width:860px){.plak{display:flex}body{padding-bottom:84px}}

/* binnenpagina's */
.pagina-hero{position:relative;overflow:hidden;background:var(--staal-t);padding-block:calc(76px + clamp(28px,4vw,56px)) clamp(36px,5vw,64px)}
.pagina-hero .wrap{position:relative}
.pagina-hero .hero-achter{position:absolute;inset:0;margin:0}
.pagina-hero .hero-achter img{width:100%;height:100%;object-fit:cover;object-position:70% 40%}
.pagina-hero .hero-sluier{position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,252,247,.985) 0%,rgba(255,252,247,.96) 40%,rgba(255,252,247,.8) 56%,rgba(255,252,247,.3) 72%,rgba(255,252,247,.05) 88%),linear-gradient(0deg,var(--papier) 0%,rgba(255,252,247,0) 40%),linear-gradient(180deg,rgba(255,252,247,.6) 0,rgba(255,252,247,0) 110px)}
.pagina-hero h1,.pagina-hero .lead,.pagina-hero .kruimels,.pagina-hero .acties{max-width:min(100%,44rem)}
@media (max-width:860px){
  .pagina-hero{padding-block:calc(68px + 20px) clamp(28px,5vw,44px)}
  .pagina-hero .hero-achter img{object-position:64% 38%}
  .pagina-hero .hero-sluier{background:linear-gradient(0deg,var(--papier) 0%,rgba(255,252,247,.94) 30%,rgba(255,252,247,.86) 60%,rgba(255,252,247,.8) 100%)}
}
.pagina-hero .lead{margin-top:18px}
.pagina-hero h1{max-width:16em}
.kruimels{display:flex;flex-wrap:wrap;gap:0 6px;font-size:.85rem;color:var(--zadel);margin-bottom:10px;align-items:center}
.kruimels a{display:inline-flex;align-items:center;min-height:44px}
.kruimels li+li::before{content:"/";margin-right:6px;color:var(--lijn-z)}
.kruimels a:hover{color:var(--oranje-d)}
.twee{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(28px,5vw,72px);align-items:start}
@media (max-width:960px){.twee{grid-template-columns:1fr}}
.zij{position:sticky;top:96px;display:grid;gap:16px}
@media (max-width:960px){.zij{position:static}}
.contactkaart{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r);padding:22px;box-shadow:var(--schaduw-s);display:grid;gap:12px}
.contactkaart .tel b{font-size:1.5rem}
/* De zijbalk is ook op desktop smal: nummer en bereikbaarheid altijd onder elkaar,
   anders schuift de regel over het nummer heen (a.tel verderop is inline-flex). */
.contactkaart a.tel{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.contactkaart a.tel .num{line-height:1.05}
.contactkaart .knop{width:100%}
.prose{max-width:62ch;font-size:1.05rem}
.prose>*+*{margin-top:1em}
.prose h2{font-size:clamp(1.5rem,2.6vw,2.1rem);margin-top:2.2em;scroll-margin-top:110px}
.prose h3{margin-top:1.6em}
.prose h2+p,.prose h3+p{margin-top:.6em}
.prose p{color:#33333C}
.prose a{color:var(--oranje-t);font-weight:700;border-bottom:1.5px solid rgba(176,82,0,.35)}
.prose a:hover{border-bottom-color:var(--oranje-d)}
.prose ul{display:grid;gap:8px;padding-left:0}
.prose ul li{position:relative;padding-left:28px}
.prose ul li::before{content:"";position:absolute;left:0;top:.45em;width:16px;height:16px;border-radius:50%;background:var(--oranje-l);box-shadow:inset 0 0 0 2px var(--oranje)}
.prose ol{counter-reset:s;display:grid;gap:10px}
.prose ol li{position:relative;padding-left:40px}
.prose ol li::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:0;width:28px;height:28px;border-radius:50%;background:var(--oranje);color:#1C1C22;font-weight:800;font-size:.85rem;display:grid;place-items:center}
.prose strong{color:var(--ink)}
.prose hr{border:0;border-top:1px solid var(--lijn);margin:2em 0}
.prose .tabel{overflow-x:auto;border:1px solid var(--lijn);border-radius:var(--r);background:var(--wit);box-shadow:var(--schaduw-s)}
.prose table{width:100%;border-collapse:collapse;font-size:.98rem}
.prose th,.prose td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--lijn);vertical-align:top}
.prose th{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--zadel);background:var(--staal-t)}
.prose tr:last-child td{border-bottom:0}
.prose td:nth-child(2){font-weight:700;white-space:nowrap}
.prose blockquote{border-left:4px solid var(--oranje);padding:4px 0 4px 20px;color:var(--zadel);font-size:1.1rem}
.prose .noot{background:var(--oranje-l);border-radius:var(--r-s);padding:14px 18px;font-size:.95rem}

/* formulier */
.form{display:grid;gap:16px;background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r);padding:clamp(20px,3vw,32px);box-shadow:var(--schaduw-s)}
.form label{display:grid;gap:6px;font-weight:700;font-size:.95rem}
.form input,.form textarea,.form select{width:100%;min-height:52px;padding:12px 14px;border:1.5px solid var(--lijn-z);border-radius:10px;background:var(--papier);font-size:1rem}
.form textarea{min-height:140px;resize:vertical}
.form input:focus,.form textarea:focus{border-color:var(--oranje-d);outline:none;box-shadow:0 0 0 4px rgba(255,133,20,.18)}
.form .rij{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:560px){.form .rij{grid-template-columns:1fr}}
.form .fout{color:var(--rood);font-size:.9rem;display:none}
.form .ongeldig input,.form .ongeldig textarea{border-color:var(--rood)}
.form .ongeldig .fout{display:block}
.form .hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.form small{color:var(--zadel)}
.contactgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:32px}
@media (max-width:860px){.contactgrid{grid-template-columns:1fr}}

/* overzichten */
.blog-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
@media (max-width:1000px){.blog-raster{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.blog-raster{grid-template-columns:1fr}}
.blog-kaart{display:grid;gap:14px;align-content:start}
.blog-beeld{display:block;overflow:hidden;background:var(--staal-t);border:1px solid var(--lijn);border-radius:var(--r)}
.blog-beeld img{display:block;width:100%;height:auto;aspect-ratio:8/5;object-fit:cover;transition:transform .5s var(--uit)}
@media (hover:hover){.blog-kaart:hover .blog-beeld img{transform:scale(1.04)}.blog-kaart:hover strong{color:var(--oranje-t)}}
.blog-tekst{display:grid;gap:8px}
.blog-soort{font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--zadel)}
.blog-kaart strong{font-family:var(--display);font-size:1.2rem;font-weight:800;line-height:1.25;letter-spacing:-.02em;transition:color .16s}
.blog-uitleg{font-size:.98rem;color:var(--zadel);line-height:1.55}
picture.artikel-omslag{display:block}
picture.artikel-omslag img{width:100%;height:auto;border-radius:var(--r)}
.artikel-omslag{width:100%;height:auto;border:1px solid var(--lijn);border-radius:var(--r);margin-bottom:1.6em}
.artikelen{display:grid;gap:16px;grid-template-columns:repeat(2,1fr)}
@media (max-width:760px){.artikelen{grid-template-columns:1fr}}
.artikel{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r);padding:24px;box-shadow:var(--schaduw-s);display:grid;gap:10px}
.artikel time{font-size:.8rem;color:var(--zadel);font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.centreer{text-align:center;max-width:44rem;margin-inline:auto;display:grid;gap:20px;justify-items:center;padding-block:clamp(48px,8vw,120px)}


/* tapdoelen: losse tel-/maillinks buiten lopende tekst */
a[href^="tel:"]:not(.prose a):not(.knop):not(.tel):not(.alleen-mobiel),a[href^="mailto:"]:not(.prose a){display:inline-flex;align-items:center;min-height:44px}
.form input[type=checkbox]{width:24px!important;min-height:24px!important;height:24px;accent-color:var(--oranje-d)}
.kruimels li{display:inline-flex;align-items:center;min-height:44px}

/* bereikbaarheid naast de belknop op binnenpagina's */
.bereik{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:.9rem;font-weight:600;color:var(--zadel)}
.bereik i{width:8px;height:8px;border-radius:50%;background:var(--groen);box-shadow:0 0 0 3px color-mix(in srgb,var(--groen) 20%,transparent);flex:none}
/* tikgebied van het akkoord-vinkje */
.form label:has(input[type=checkbox]){min-height:44px;align-items:center;padding:4px 0}
.form label:has(input[type=checkbox]) > span:first-of-type,.form .vinkvak{position:relative;display:inline-grid;place-items:center;width:44px;height:44px;flex:none;margin-left:-10px}
.form input[type=checkbox]{width:24px!important;min-height:24px!important;height:24px;accent-color:var(--oranje-d);outline-offset:6px}

/* op mobiel eerst bellen, dan pas de inleidende tekst */
@media (max-width:820px){
  .pagina-hero .ph-in{display:grid}
  .pagina-hero .ph-in .kruimels{order:1}
  .pagina-hero .ph-in .kicker{order:2}
  .pagina-hero .ph-in h1{order:3}
  .pagina-hero .ph-in .acties{order:4;margin-top:20px}
  .pagina-hero .ph-in .lead{order:5;margin-top:20px}
}

/* telefoonblok op de oranje band: donkere tekst voor voldoende contrast */
.band-oranje .tel span,.slotband .tel span{color:#3A2A14}
.band-oranje .tel i,.slotband .tel i{background:#1C6B3A;box-shadow:0 0 0 3px rgba(28,107,58,.22)}

/* categoriebalk boven het blogoverzicht */
.cat-balk{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(24px,3vw,36px)}
.cat-balk a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 18px;border-radius:var(--r-pil);background:var(--wit);border:1.5px solid var(--lijn-z);font-weight:700;font-size:.95rem;transition:border-color .16s,background .16s}
.cat-balk a b{font-weight:700;font-size:.8rem;color:var(--zadel)}
.cat-balk a:hover{border-color:var(--zadel-2)}
.cat-balk a[aria-current=page]{background:var(--oranje);border-color:transparent;color:#1C1C22}
.cat-balk a[aria-current=page] b{color:rgba(28,28,34,.7)}

/* categorielink in de kicker van een artikel: eigen tikgebied */
.kicker a{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.kicker a:hover{text-decoration-thickness:2px}

/* wat repareren we: compacte lijst met lijnen, geen kaartjes */
.rep-lijst{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(24px,4vw,56px)}
@media (max-width:760px){.rep-lijst{grid-template-columns:1fr}}
.rep-lijst li{padding:18px 0;border-top:1px solid var(--lijn)}
.rep-lijst h3{font-size:1.08rem;margin-bottom:4px}
.rep-lijst p{color:var(--zadel);font-size:.95rem}

/* echte klantcitaten */
.citaten{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:clamp(28px,4vw,44px)}
@media (max-width:900px){.citaten{grid-template-columns:1fr}}
.citaten li{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r);padding:24px;box-shadow:var(--schaduw-s);display:grid;gap:14px;align-content:start}
.citaten blockquote{margin:0;font-size:1rem;line-height:1.6;color:var(--ink);position:relative;padding-top:26px}
.citaten blockquote::before{content:"";position:absolute;top:0;left:0;width:22px;height:18px;background:var(--oranje);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 18'%3E%3Cpath d='M0 18V9C0 4 3 1 8 0l1 3C6 4 4 6 4 9h4v9zm14 0V9c0-5 3-8 8-9l1 3c-3 1-5 3-5 6h4v9z'/%3E%3C/svg%3E") no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 18'%3E%3Cpath d='M0 18V9C0 4 3 1 8 0l1 3C6 4 4 6 4 9h4v9zm14 0V9c0-5 3-8 8-9l1 3c-3 1-5 3-5 6h4v9z'/%3E%3C/svg%3E") no-repeat}
.citaten cite{font-style:normal;font-weight:800;font-size:.95rem}
.citaten cite span{display:block;font-weight:600;font-size:.82rem;color:var(--zadel);margin-top:2px}

/* vier gelijke kaarten naast elkaar (nazorg) */
.kaarten.vier{grid-template-columns:repeat(4,1fr)}
@media (max-width:1100px){.kaarten.vier{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.kaarten.vier{grid-template-columns:1fr}}

/* ---------- Afsprakenplanner ---------- */
.plan{background:var(--room,#FFF1E2);border-radius:22px;padding:clamp(22px,3.4vw,40px);border:1px solid rgba(28,28,34,.07)}
.plan__kop{display:flex;align-items:center;gap:12px;font-size:clamp(1.15rem,2vw,1.4rem);margin:0 0 6px}
.plan__num{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;flex:0 0 30px;
  border-radius:50%;background:var(--oranje,#FF8514);color:#fff;font-size:.85rem;font-weight:800}
.plan__uitleg,.plan__klein{color:var(--zadel,#6b6257);font-size:.92rem;margin:0 0 18px}
.plan__klein{margin:16px 0 0;font-size:.85rem}
.plan__velden{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end}
.plan__velden--breed{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-bottom:18px}
.plan .veld{display:flex;flex-direction:column;gap:6px;flex:1 1 190px;min-width:0}
.plan .veld--klein{flex:0 1 130px}
.plan .veld--vol{grid-column:1/-1}
.plan label{font-size:.85rem;font-weight:700}
.plan input,.plan textarea{font:inherit;padding:12px 14px;border-radius:12px;border:1px solid rgba(28,28,34,.18);
  background:#fff;color:inherit;min-height:48px;width:100%}
.plan input:focus-visible,.plan textarea:focus-visible{outline:3px solid var(--oranje,#FF8514);outline-offset:2px}
.plan__fout{color:#9d2f16;font-size:.9rem;margin:14px 0 0;font-weight:600}
.plan__adresregel{font-weight:700;margin:0 0 18px}
.plan__dag{margin:0 0 22px}
.plan__dag h3{font-size:1rem;margin:0 0 10px;text-transform:lowercase}
.plan__tijden{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:0}
.plan__tijd{font:inherit;font-weight:700;cursor:pointer;padding:11px 16px;min-height:48px;
  border-radius:999px;border:1px solid rgba(28,28,34,.18);background:#fff;color:inherit}
.plan__tijd:hover{border-color:var(--oranje,#FF8514)}
.plan__tijd[aria-pressed="true"]{background:var(--oranje,#FF8514);border-color:var(--oranje,#FF8514);color:#fff}
.plan__gekozen{font-weight:700;margin:0 0 18px}
.plan__naast{margin-top:clamp(24px,3vw,36px)}
.plan .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.plan[data-bezig] .knop{opacity:.55;pointer-events:none}
@media (min-width:980px){
  .sectie:has(>.plan){display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(24px,3vw,44px);align-items:start}
  .plan__naast{margin-top:0}
}
.plan__let{background:#fff4e6;border-left:4px solid var(--oranje,#FF8514);
  padding:12px 16px;border-radius:0 10px 10px 0;margin:0 0 20px;font-size:.9rem;font-weight:600}

/* Soortkeuze in de planner */
.plan__soort{border:0;padding:0;margin:0 0 28px;min-width:0}
.plan__soort legend{padding:0}
.plan__kiezen{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin-top:16px}
.plan__keus{display:block;cursor:pointer}
.plan__keus input{position:absolute;opacity:0;width:1px;height:1px}
.plan__keus-in{display:block;height:100%;background:#fff;border:2px solid rgba(28,28,34,.12);
  border-radius:14px;padding:16px 18px;transition:border-color .12s}
.plan__keus-in b{display:flex;align-items:center;gap:9px;font-size:1rem;margin-bottom:6px}
.plan__keus-in b svg{flex:0 0 auto;width:20px;height:20px}
.plan__keus-in small{display:block;color:var(--zadel,#6b6257);font-size:.87rem;line-height:1.5}
.plan__keus:hover .plan__keus-in{border-color:rgba(255,133,20,.5)}
.plan__keus input:focus-visible + .plan__keus-in{outline:3px solid var(--oranje,#FF8514);outline-offset:2px}
.plan__keus input:checked + .plan__keus-in{border-color:var(--oranje,#FF8514);background:#fffaf4}
.plan__soort .plan__let{margin-top:18px;font-weight:400}

/* ---------- Invoervelden en het toetsenbord op een telefoon ----------
   Twee dingen zaten in de weg. De vaste balk onderaan staat over het scherm
   heen, en de pagina kan bij het laatste veld niet ver genoeg door scrollen,
   waardoor het veld achter het toetsenbord verdwijnt. Zodra iemand in een veld
   tikt, halen we de balk weg en zetten we ruimte onder het formulier bij. */
body.typt .plak{transform:translateY(140%);pointer-events:none}
body.typt{padding-bottom:0}

/* De kop staat vast bovenaan, dus wat naar boven scrollt moet daaronder blijven. */
.plan__kop,.plan__soort,.plan__adres,.plan__uitkomst,.plan__gegevens,.veld{scroll-margin-top:84px}
.plan__tijd{scroll-margin-top:96px}

/* Ruimte om te kunnen scrollen terwijl het toetsenbord openstaat. Alleen dan,
   anders staat er onder aan elke pagina een gat. */
body.typt .plan{padding-bottom:var(--toetsenbord,55vh)}

@media (max-width:860px){
  /* Voorkomt dat iOS inzoomt bij het aantikken van een veld: dat gebeurt onder 16px. */
  .plan input,.plan textarea,.plan select{font-size:16px}
}

/* Lange links en adressen moeten kunnen afbreken; op 320 px past
   "veenstra-it.nl/help/" anders niet en schuift de hele pagina mee. */
.prose,.prose p,.prose li,.prose a,.plan__uitleg,.plan__klein,.plan__let{overflow-wrap:anywhere}

/* Kinderen van een grid of flexbox krimpen standaard niet onder hun eigen
   minimuminhoud. Eén afbeelding of één lange regel maakt de kolom dan breder
   dan het scherm; body{overflow-x:hidden} verbergt dat, en de tekst wordt
   afgeknipt in plaats van teruggelopen. Op 320 px was dat op bijna elke
   pagina zichtbaar: 339 px inhoud in een kolom van 288 px. */
.twee>*,.wrap>*,.plan__velden>*,.plan__kiezen>*,.acties>*{min-width:0}
.prose,.prose>*{min-width:0}

/* Ook de zijkolom en de kaarten daarin moeten kunnen krimpen. Op 320 px bleef
   de werkbon anders op 355 px staan terwijl de kolom 288 px breed is. */
.zij,.zij>*,.werkbon,.kaart,.contactkaart,.fotokaart,.plan,.plan>*{min-width:0}
.hero-rij,.hero-rij>*,.hero-tekst>*,.hero-tekst>*>*{min-width:0}
.werkbon li,.werkbon .wb-kop{min-width:0;flex-wrap:wrap}

/* Koppen met lange woorden ("Privacyverklaring") moeten op een smal scherm
   kunnen afbreken in plaats van uit hun kader te lopen. */
h1,h2,h3,.plan__kop{overflow-wrap:anywhere}

/* Een telefoonnummer of vinkje moet met een duim te raken zijn: 44 px. */
a.tel,.kaart a.tel{min-height:44px;display:inline-flex;align-items:center}
.form input[type=checkbox]{width:24px;height:24px;flex:0 0 24px}
.form label:has(input[type=checkbox]){display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer}

/* ---------- Hero op een telefoon: lucht en een pil die klopt ----------
   De kicker stond als pil over de volle breedte en liep over twee regels,
   met het bolletje verticaal in het midden van dat blok. Dat leest als een
   fout. De pil hoort om de tekst heen te zitten en het bolletje op de
   eerste regel. Daarnaast stond alles te dicht op elkaar. */
@media (max-width:860px){
  /* Als inline-flex kan de tekst niet afbreken: het hele label wordt één
     flexitem en de pil werd 477 px breed op een scherm van 390 px. Als blok
     met het bolletje er absoluut naast loopt hij netjes terug. */
  .hero-tekst .kicker{
    display:block;
    position:relative;
    justify-self:start;
    max-width:100%;
    line-height:1.5;
    padding:9px 15px 9px 30px;
  }
  .hero-tekst .kicker::before{
    position:absolute;
    left:14px;
    top:.95em;
  }

  .hero-tekst h1{margin-top:22px;line-height:1.12}
  .hero-tekst .lead{margin-top:20px;line-height:1.55}
  .hero-tekst .acties{margin-top:26px}

  /* Telefoonnummer, bereikbaarheid en de puntenlijst hadden geen tussenruimte. */
  .hero-tekst .telgroot{margin-top:24px}
  .hero-tekst .bereik{margin-top:10px}
  .hero-tekst .vink,.hero-tekst .punten{margin-top:20px;display:grid;gap:12px}
  .hero-tekst .vink li,.hero-tekst .punten li{line-height:1.45}
}

/* Op een telefoon botsten het nummer en de bereikbaarheidsregel op elkaar: het
   nummer mag niet afbreken en de regel ernaast paste er niet meer naast. Onder
   elkaar zetten. */
@media (max-width:860px){
  .hero-onder a.tel,.kaart a.tel{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
  .hero-onder a.tel .num{line-height:1.05}
  .hero-onder{align-items:flex-start}
  .hero-feiten{gap:10px 18px}
}

/* De werkplaats is onze voorkeur; die keuze mag dat laten zien. */
.plan__keus--voorkeur .plan__keus-in{border-color:rgba(255,133,20,.55);background:#fffaf4}
.plan__keus--voorkeur .plan__keus-in b::after{
  content:"onze voorkeur";
  margin-left:auto;
  font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:#fff;background:var(--oranje,#FF8514);padding:3px 9px;border-radius:999px;white-space:nowrap;
}

/* Knoppen stonden op white-space:nowrap. Een label als "Moment om langs te
   brengen" past dan niet op 320 px en duwt de hele rij buiten het scherm.
   Op smalle schermen mag de tekst gewoon over twee regels. */
@media (max-width:560px){
  .knop{white-space:normal;text-align:center}
  .acties{width:100%}
  .acties>.knop{flex:1 1 100%}
}

/* Sluitstuk tegen het automatische minimum: binnen de hero's, de tekstkolom en
   de kaarten mag niets zijn eigen inhoud als ondergrens opleggen. Zonder dit
   blijft er telkens één laag over waar een lange regel de kolom oprekt en
   body{overflow-x:hidden} de tekst afknipt in plaats van laat teruglopen. */
.hero *,.pagina-hero *,.prose *,.kaart *,.werkbon *,.contactkaart *,.plan *,.acties *{min-width:0}

/* justify-items:center maakt gridkinderen zo breed als hun inhoud wil, niet zo
   breed als de kolom. Daardoor liep de 404-kop 477 px breed op een scherm van
   320 px. Even afkappen op de kolombreedte. */
.centreer>*{max-width:100%}

/* Elke kicker moet kunnen teruglopen, niet alleen die in de hero op de
   homepage. Als inline-flex wordt het label één ondeelbaar blok. */
@media (max-width:860px){
  .kicker{display:block;position:relative;padding-left:16px;line-height:1.5;max-width:100%}
  .kicker::before{position:absolute;left:0;top:.55em}
  .hero-tekst .kicker{padding-left:30px}
  .hero-tekst .kicker::before{left:14px;top:.95em}
  .centreer .kicker{padding-left:0}
  .centreer .kicker::before{position:static;display:inline-block;margin-right:8px;vertical-align:middle}
}

/* Een grid met alleen impliciete kolommen laat de kolom meegroeien met de
   langste inhoud; op 320 px werd die 477 px. Een expliciete kolom met een
   minimum van nul houdt hem binnen de container. */
.centreer{grid-template-columns:minmax(0,1fr)}
.hero-tekst,.pagina-hero .wrap,.kop{grid-template-columns:minmax(0,1fr)}

/* Elk grid zonder expliciete kolom laat die kolom meegroeien met de langste
   inhoud. Op een breed scherm valt dat niet op, op 320 px liep er telkens iets
   470 tot 505 px breed. Deze grids zijn allemaal één kolom; met een minimum
   van nul blijven ze binnen hun container. */
.artikel,.blog-kaart,.blog-tekst,.centreer,.contactkaart,.faq,.form,.form label,
.fotokaart .beeld,.fotokaart .tekst,.kaart,.kop,.nav-sub-in,.plaatsen a,
.prose ol,.prose ul,.score-kaart,.stappen li,.tel,.tijden,.vink,
.werkbon.breed li,.zij,.citaten li,.hero-tekst{grid-template-columns:minmax(0,1fr)}

/* Een prijstabel kan niet altijd smal genoeg; die mag binnen zijn eigen kader
   opzij schuiven in plaats van de pagina mee te trekken. */
.tabel{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.tabel table{min-width:min(100%,32rem)}

/* Het groene bolletje plakte tegen het telefoonnummer aan. */
@media (min-width:861px){ .hero-onder a.tel{column-gap:14px} }

/* Laatste drie puntjes uit de mobiele meting. */

/* Het vinkje bij de privacyverklaring is 24 bij 24 pixels. Het raakvlak moet 44
   zijn, dus de omhulling eromheen wordt groter — maar zónder negatieve marge.
   Die duwde de omhulling buiten het label, en dan doet een klik daar niets:
   uitgeprobeerd, het vinkje bleef leeg. Nu ligt de hele omhulling binnen het
   label, en het label zelf schakelt het vinkje ook. */
.vinkvak{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:0 0 44px}
.form label:has(.vinkvak){align-items:center}

/* Een telefoonnummer midden in een zin is de belangrijkste knop van de site.
   Met wat lucht erboven en eronder is hij met een duim te raken, zonder dat de
   regelafstand verandert. */
a.num{display:inline-block;padding-block:10px;margin-block:-10px}

/* "vervalt bij reparatie" past op 320 px niet naast het bedrag. */
.werkbon .num small{white-space:normal;display:block}

/* Het telefoonpictogram stond tegen de linkerrand van het oranje rondje: de
   knop rekende als flexbox, en place-items centreert daar alleen verticaal.
   Deze twee regels centreren hem hoe dan ook. */
.belknop{justify-content:center;justify-items:center}
.belknop svg{margin:0}