/* meneerdeontwerper.nl — omgezet uit design/meneerdeontwerper/home.html (v4) */
/* Zelf gehost (latin-subset, variabele fonts). Licentie: zie fonts/LICENTIE.md */
@font-face{font-family:"Big Shoulders";font-style:normal;font-weight:600 900;font-display:swap;src:url(fonts/big-shoulders-var.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/hanken-grotesk-var.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Hanken Grotesk";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/hanken-grotesk-italic-var.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400 500;font-display:swap;src:url(fonts/jetbrains-mono-var.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Terugvalletter voor Big Shoulders (bijv. Safari via file://, of als het font niet laadt): Arial Narrow, verkleind
   tot ongeveer dezelfde breedte (Arial Narrow is ~22% breder). Zo blijft de opmaak heel als het webfont ontbreekt. */
@font-face{font-family:"Big Shoulders terugval";src:local("Arial Narrow Bold"),local("ArialNarrow-Bold"),local("Arial Narrow");font-weight:600 900;size-adjust:84%}

/* ---------- minimale reset (gedeeld) ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body,h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{margin:0;padding:0}
ul,ol{list-style:none}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}

/* ---------- tokens ---------- */
:root{
  --inkt:#15171a; --inkt-2:#1d2024; --inkt-3:#262a2f; --inkt-lijn:#33383e;
  --beton:#e6e4de; --papier:#f4f3ef; --wit:#fbfaf7; --lijn:#cdcac2; --lijn-fijn:#dedbd4;
  --tekst:#15171a; --tekst-zacht:#52585e;
  --op-donker:#eceae5; --op-donker-zacht:#a3a9af;
  --oranje:#ff5b1f; --oranje-hover:#ff7440; --oranje-tekst:#b13c0b; --oranje-zacht:#ffe3d6;
  --fout:#b3261e; --goed:#2f7d4f;

  --f-display:"Big Shoulders","Big Shoulders terugval","Arial Narrow",sans-serif;
  --f-tekst:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;

  --t-mega:clamp(2.6rem,17cqi,11.25rem);
  --t-xl:clamp(2.1rem,12.5cqi,6.6rem);
  --t-l:clamp(1.8rem,9.5cqi,3.9rem);
  --t-m:clamp(1.35rem,6cqi,1.9rem);
  --t-body:1.0625rem;
  --t-klein:.9rem;
  --t-mono:.72rem;

  --rand:clamp(16px,4vw,56px);
  --kol:minmax(0,88px);
  --goot:clamp(12px,1.8vw,24px);
  --r:4px;
  --lijndikte:1px;
  --zwaar:3px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* ---------- basis ---------- */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--inkt);color:var(--tekst);font-family:var(--f-tekst);font-size:var(--t-body);line-height:1.55;
  font-feature-settings:"kern","liga";text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
.num{font-variant-numeric:tabular-nums lining-nums}
::selection{background:var(--oranje);color:var(--inkt)}
:focus-visible{outline:3px solid var(--oranje);outline-offset:3px;border-radius:2px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.overslaan{position:absolute;left:12px;top:-60px;z-index:100;background:var(--oranje);color:var(--inkt);padding:10px 14px;font-weight:600;text-decoration:none}
.overslaan:focus{top:12px}

/* 12-koloms raster met aflopende randen: lijn 2 = kolom 1, lijn 14 = einde kolom 12, lijn 15 = rand */
.raster{display:grid;grid-template-columns:[vol-start] minmax(var(--rand),1fr) repeat(12,var(--kol)) minmax(var(--rand),1fr) [vol-eind];column-gap:var(--goot)}
.raster > *{grid-column:2 / 14}

.mono{font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:.06em;text-transform:uppercase;font-weight:500;font-variant-numeric:tabular-nums}
.display{font-family:var(--f-display);font-optical-sizing:auto;font-weight:800;text-transform:uppercase;letter-spacing:-.005em;line-height:.86}
.kop-l{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:var(--t-l);line-height:.9;letter-spacing:0}
.lead{font-size:clamp(1.12rem,1.35vw,1.3rem);line-height:1.5;max-width:34em}
.maat{max-width:62ch}

/* knoppen */
.knop{display:inline-flex;align-items:center;gap:.7em;min-height:52px;padding:0 22px;border:0;border-radius:var(--r);
  font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:1.3rem;letter-spacing:.02em;text-decoration:none;cursor:pointer;
  transition:background-color .18s var(--ease),transform .18s var(--ease),color .18s}
.knop svg{width:18px;height:18px;transition:transform .2s var(--ease)}
.knop:hover svg{transform:translateX(3px)}
.knop-oranje{background:var(--oranje);color:var(--inkt)}
.knop-oranje:hover{background:var(--oranje-hover)}
.knop-lijn{background:transparent;color:currentColor;box-shadow:inset 0 0 0 1.5px currentColor}
.knop-lijn:hover{background:rgba(255,255,255,.08)}
.knop-inkt{background:var(--inkt);color:var(--op-donker)}
.knop-inkt:hover{background:#000}
.knop:active{transform:translateY(1px)}

  writing-mode:vertical-rl;display:flex;align-items:center;gap:10px;justify-content:flex-start;font-family:var(--f-mono);font-size:.68rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase}
section{position:relative}

/* verschijnen */
.js-beweging .kom-op{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js-beweging .kom-op.zichtbaar{opacity:1;transform:none}

/* ================= KOP ================= */
.site-kop{position:sticky;top:0;z-index:50;background:rgba(21,23,26,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--op-donker);border-bottom:1px solid var(--inkt-lijn)}
.site-kop-in{display:flex;align-items:center;justify-content:space-between;min-height:72px;gap:24px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--op-donker)}
.logo-merk{width:38px;height:38px;flex:none}
.logo-woord{font-family:var(--f-display);font-weight:900;text-transform:uppercase;font-size:1.45rem;line-height:.9;letter-spacing:.01em}
.logo-woord small{display:block;font-family:var(--f-mono);font-weight:500;font-size:.6rem;letter-spacing:.14em;color:var(--op-donker-zacht);margin-top:4px}
.hoofdmenu ul{display:flex;gap:4px;align-items:center}
.hoofdmenu a{display:block;padding:10px 12px;text-decoration:none;font-weight:500;font-size:.98rem;color:var(--op-donker);position:relative}
.hoofdmenu a::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:2px;background:var(--oranje);transform:scaleX(0);transform-origin:left;transition:transform .2s var(--ease)}
.hoofdmenu a:hover::after{transform:scaleX(1)}
.hoofdmenu .sep{width:1px;height:22px;background:var(--inkt-lijn);margin:0 8px}
.hoofdmenu .knop{min-height:44px;font-size:1.15rem;padding:0 18px;margin-left:8px}
.hoofdmenu .knop::after{display:none}
.hoofdmenu a.knop{display:inline-flex}
.menu-knop{display:none;background:none;border:1px solid var(--inkt-lijn);color:var(--op-donker);min-height:44px;padding:0 14px;border-radius:var(--r);font-family:var(--f-mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}

/* ================= 01 HERO ================= */
.hero{background:var(--inkt);color:var(--op-donker);overflow:hidden}
.hero .raster{min-height:min(860px,calc(100vh - 106px));grid-template-rows:auto}
.hero-tekst{grid-column:2 / 9;padding:clamp(40px,6vw,84px) 0 64px;display:flex;flex-direction:column;position:relative;z-index:2}
.artikelregel{display:flex;flex-wrap:wrap;gap:8px 22px;color:var(--op-donker-zacht);padding-bottom:18px;border-bottom:1px solid var(--inkt-lijn);margin-bottom:26px}
.artikelregel b{color:var(--oranje);font-weight:500}
.hero h1{font-size:var(--t-mega);margin-left:-.04em}
.hero h1 .r1{display:block;font-size:.5em;letter-spacing:.01em;color:var(--op-donker-zacht);font-weight:700;margin-bottom:.06em}
.hero h1 .r2{display:block}
.hero h1 .r2 i{font-style:normal;color:var(--oranje)}
.hero .lead{margin-top:28px;color:var(--op-donker);max-width:31em}
.datasheet{margin-top:36px;display:grid;grid-template-columns:1fr 1fr;border-top:var(--zwaar) solid var(--op-donker);max-width:640px}
.datasheet div{display:grid;grid-template-columns:118px 1fr;gap:12px;padding:11px 0;border-bottom:1px solid var(--inkt-lijn);align-items:baseline}
.datasheet div:nth-child(odd){padding-right:22px}
.datasheet div:nth-child(even){padding-left:22px;border-left:1px solid var(--inkt-lijn)}
.datasheet dt{color:var(--op-donker-zacht)}
.datasheet dd{font-weight:500;font-size:.98rem}
.hero-koop{display:flex;flex-wrap:wrap;align-items:flex-end;gap:20px 32px;margin-top:38px}
.prijsvlag{display:flex;align-items:flex-end;gap:12px}
.prijsvlag .bedrag{font-family:var(--f-display);font-weight:900;font-size:clamp(4rem,6.5vw,6rem);line-height:.78;color:var(--oranje);letter-spacing:-.01em}
.prijsvlag .bedrag sup{font-size:.42em;vertical-align:top;position:relative;top:.08em;margin-right:.06em}
.prijsvlag .uitleg{font-size:.84rem;line-height:1.35;color:var(--op-donker-zacht);padding-bottom:3px}
.prijsvlag .uitleg b{display:block;color:var(--op-donker);font-weight:600;font-size:.95rem}
.hero-knoppen{display:flex;flex-wrap:wrap;gap:12px}
.hero-alt{margin-top:18px;font-size:.84rem;color:var(--op-donker-zacht)}

.hero-beeld{grid-column:9 / vol-eind;grid-row:1;position:relative;margin:0;min-height:560px}
.hero-beeld img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:40% 45%;filter:saturate(.92) contrast(1.05)}
.hero-beeld::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--inkt) 0,rgba(21,23,26,.15) 22%,rgba(21,23,26,0) 45%),linear-gradient(0deg,rgba(21,23,26,.55),transparent 30%)}
.hero-annotatie{position:absolute;inset:0;z-index:2;pointer-events:none}
.hero-annotatie svg{width:100%;height:100%}

.productlabel{position:absolute;z-index:4;left:-64px;bottom:150px;width:210px;background:var(--oranje);color:var(--inkt);padding:14px 16px 12px;border-radius:2px;
  box-shadow:0 18px 40px rgba(0,0,0,.35);transform:rotate(-3deg)}
.productlabel .mono{font-size:.64rem;display:flex;justify-content:space-between}
.productlabel strong{display:block;font-family:var(--f-display);font-weight:900;font-size:2.5rem;line-height:.82;text-transform:uppercase;margin:8px 0 2px}
.productlabel em{font-style:normal;font-family:var(--f-display);font-weight:700;font-size:1.05rem;text-transform:uppercase;letter-spacing:.04em}
.productlabel svg{width:100%;height:34px;margin-top:10px}
.productlabel .code{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.3em;text-align:center;margin-top:2px}


/* ================= 02 STORINGSTABEL ================= */
.storing{background:var(--beton);padding:clamp(72px,9vw,136px) 0 clamp(64px,8vw,120px)}
.storing-kop{grid-column:2 / 11;grid-row:1;align-self:start}
.storing-kop .mono{color:var(--oranje-tekst);display:block;margin-bottom:22px}
.storing-kop h2{font-size:var(--t-xl)}
.storing-kop h2 span{display:block}
.storing-kop h2 .zacht{color:#6b6e72}
.storing-beeld{grid-column:11 / vol-eind;grid-row:1 / 4;margin:clamp(0px,4vw,60px) 0 0;position:relative;align-self:start}
.storing-beeld img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:35% 50%;filter:saturate(.85)}
.storing-beeld figcaption{display:flex;gap:10px;margin-top:10px;color:var(--tekst-zacht);font-size:.82rem;line-height:1.35}
.storing-beeld figcaption .mono{color:var(--oranje-tekst);flex:none}
.storing-intro{grid-column:2 / 8;grid-row:2;margin-top:28px;color:var(--tekst-zacht)}
.storingstabel{grid-column:2 / 11;grid-row:3;margin-top:clamp(48px,6vw,84px)}
.st-rij{display:grid;grid-template-columns:78px 1.05fr 1.2fr 1.25fr;gap:0 28px}
.st-rij{padding:26px 0 28px;border-bottom:1px solid var(--lijn);align-items:start;transition:background-color .25s}
.st-rij:hover{background:rgba(255,255,255,.35)}
.st-code{font-family:var(--f-display);font-weight:900;font-size:2.7rem;line-height:.8;color:var(--oranje-tekst)}
.st-storing{font-family:var(--f-display);font-weight:800;font-size:1.9rem;line-height:.95;text-transform:uppercase}
.st-oorzaak{color:var(--tekst-zacht);font-size:.98rem}
.st-oplossing{font-size:.98rem;padding-left:22px;position:relative;font-weight:500}
.st-oplossing::before{content:"";position:absolute;left:0;top:.62em;width:12px;height:2px;background:var(--oranje)}
.st-oplossing::after{content:"";position:absolute;left:7px;top:calc(.62em - 3px);width:6px;height:6px;border-top:2px solid var(--oranje);border-right:2px solid var(--oranje);transform:rotate(45deg)}

/* ================= 03 UITVOERINGEN ================= */
.uitvoering{background:var(--papier);padding:clamp(72px,9vw,136px) 0;overflow:hidden}
.uv-links{grid-column:2 / 6;grid-row:1;align-self:start;position:relative;z-index:2}
.uv-links .mono{color:var(--oranje-tekst)}
.uv-links h2{font-size:var(--t-l);margin:18px 0 18px}
.uv-links p{color:var(--tekst-zacht);max-width:30em}
.uv-kies{margin-top:34px;border-top:var(--zwaar) solid var(--inkt)}
.uv-kies button{width:100%;display:grid;grid-template-columns:62px 1fr 22px;gap:12px;align-items:center;text-align:left;background:none;border:0;border-bottom:1px solid var(--lijn);padding:16px 0;cursor:pointer;position:relative}
.uv-kies button::before{content:"";position:absolute;left:-18px;top:0;bottom:0;width:4px;background:var(--oranje);transform:scaleY(0);transition:transform .25s var(--ease)}
.uv-kies button[aria-selected="true"]::before{transform:scaleY(1)}
.uv-kies .mono{color:var(--tekst-zacht)}
.uv-kies .naam{font-family:var(--f-display);font-weight:800;font-size:1.7rem;text-transform:uppercase;line-height:.95}
.uv-kies .naam small{display:block;font-family:var(--f-tekst);font-weight:400;text-transform:none;font-size:.86rem;color:var(--tekst-zacht);margin-top:5px;line-height:1.3}
.uv-kies svg{width:20px;height:20px;opacity:.25;transition:opacity .2s,transform .2s}
.uv-kies button[aria-selected="true"] svg,.uv-kies button:hover svg{opacity:1}
.uv-kies button[aria-selected="true"] .mono{color:var(--oranje-tekst)}
.uv-overig{margin-top:22px;font-size:.9rem;color:var(--tekst-zacht);display:flex;gap:10px}
.uv-overig .mono{color:var(--inkt);flex:none;padding-top:3px}

.uv-podium{grid-column:7 / vol-eind;grid-row:1;position:relative;padding-bottom:40px}
.uv-podium .browser{height:620px;margin-right:calc(var(--rand) * -1);border-top-right-radius:0;border-bottom-right-radius:0}
.uv-telefoon{position:absolute;right:calc(var(--rand) + 36px);bottom:-10px;width:236px;z-index:3}
.voorbeeldtag{position:absolute;top:-14px;left:28px;z-index:4;background:var(--inkt);color:var(--op-donker);padding:7px 10px;border-radius:2px}
.voorbeeldtag b{color:var(--oranje);font-weight:500}

/* browservenster (gedeeld door uitvoeringen en demo) */
.browser{background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 1px 0 rgba(0,0,0,.05),0 30px 60px -20px rgba(21,23,26,.35),0 0 0 1px rgba(21,23,26,.12);display:flex;flex-direction:column}
.browser-balk{flex:none;display:flex;align-items:center;gap:14px;height:42px;padding:0 14px;background:#ecebe8;border-bottom:1px solid #d9d7d2}
.browser-balk .stip{display:flex;gap:6px}
.browser-balk .stip i{width:10px;height:10px;border-radius:50%;background:#cfcdc8}
.adres{flex:1;max-width:420px;margin:0 auto;display:flex;align-items:center;justify-content:center;gap:7px;height:26px;border-radius:6px;background:#fff;font-size:.78rem;color:#3d4247;font-family:var(--f-tekst)}
.adres svg{width:11px;height:11px;flex:none}
.browser-balk .mono{font-size:.6rem;color:#6b7075}
.browser-scherm{flex:1;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}

/* telefoonmock */
.telefoon{background:#0c0d0f;border-radius:34px;padding:9px;box-shadow:0 30px 60px -18px rgba(0,0,0,.5),inset 0 0 0 1.5px #3a3e44}
.telefoon-scherm{border-radius:26px;overflow:hidden;background:#fff;position:relative;aspect-ratio:9/19;display:flex;flex-direction:column}
.telefoon-scherm .browser-scherm{flex:1}

/* ================= voorbeeldsite (.vs) — het product dat we verkopen ================= */
.vs{--vs-accent:#1f3d5c;--vs-accent-2:#e8eef4;--vs-inkt:#15191d;--vs-bg:#fff;--vs-zacht:#5b636b;--vs-knop:#1f3d5c;--vs-knop-tekst:#fff;
  background:var(--vs-bg);color:var(--vs-inkt);font-family:var(--f-tekst);font-size:14px;line-height:1.5}
.vs.inst{--vs-accent:#0e4a5c;--vs-accent-2:#e3eef0;--vs-knop:#e8612a;--vs-knop-tekst:#1a0f08}
.vs.schil{--vs-accent:#23463a;--vs-accent-2:#ecefe8;--vs-bg:#f7f4ee;--vs-knop:#23463a;--vs-knop-tekst:#fff}
.vs.hov{--vs-accent:#3c4f24;--vs-accent-2:#eef0e4;--vs-knop:#c9a15a;--vs-knop-tekst:#1d1a12}
.vs.klus{--vs-accent:#1c2f4a;--vs-accent-2:#e7ebf1;--vs-knop:#1c2f4a;--vs-knop-tekst:#fff}
.vs-balk{background:var(--vs-accent);color:#fff;font-size:12px;padding:7px 22px;display:flex;justify-content:space-between;gap:12px}
.vs-balk b{font-weight:600}
.vs-balk[hidden]{display:none}
.vs-kop{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 22px;border-bottom:1px solid rgba(0,0,0,.08);background:var(--vs-bg)}
.vs-logo{font-weight:700;font-size:16px;letter-spacing:-.01em;min-width:0;display:flex;align-items:center;gap:9px}
.vs-logo__naam{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vs-logo i{flex:none;width:24px;height:24px;border-radius:5px;background:var(--vs-accent);display:grid;place-items:center;color:#fff;font-style:normal;font-size:12px;font-weight:700}
.vs-nav{display:flex;flex:none;gap:12px;font-size:12.5px;color:var(--vs-zacht)}
.vs-bel{font-size:12.5px;font-weight:600;padding:8px 12px;border-radius:6px;background:var(--vs-accent-2);color:var(--vs-accent);white-space:nowrap}
.vs-hero{position:relative;min-height:320px;display:flex;align-items:flex-end;color:#fff;overflow:hidden}
.vs-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vs-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,14,18,.86) 8%,rgba(10,14,18,.2) 70%),linear-gradient(90deg,rgba(10,14,18,.55),transparent 65%)}
.vs-hero-in{position:relative;z-index:1;padding:26px 22px 24px;max-width:560px}
.vs-plaats{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;opacity:.85;font-weight:600}
.vs-hero h3{font-size:30px;line-height:1.08;letter-spacing:-.02em;font-weight:700;margin:8px 0 10px}
.vs-hero p{font-size:14px;opacity:.92;max-width:44ch;overflow-wrap:anywhere}
.vs-knoppen{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.vs-knoppen span{display:inline-flex;align-items:center;gap:6px;padding:10px 14px;border-radius:7px;font-weight:600;font-size:13px;background:#fff;color:var(--vs-inkt)}
.vs-knoppen span.hoofd{background:var(--vs-knop);color:var(--vs-knop-tekst)}
.vs-knoppen svg{width:14px;height:14px}
.vs.split .vs-hero{display:grid;grid-template-columns:1.1fr 1fr;color:var(--vs-inkt);min-height:300px;align-items:stretch}
.vs.split .vs-hero::after{display:none}
.vs.split .vs-hero img{position:relative;inset:auto;order:2;height:100%}
.vs.split .vs-hero-in{align-self:center}
.vs.split .vs-hero h3{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:32px;color:var(--vs-accent)}
.vs.split .vs-knoppen span{background:var(--vs-accent-2);color:var(--vs-accent)}
.vs.split .vs-knoppen span.hoofd{background:var(--vs-knop);color:var(--vs-knop-tekst)}
.vs-sectie{padding:26px 22px;border-bottom:1px solid rgba(0,0,0,.07)}
.vs-sectie h4{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--vs-accent);margin-bottom:12px;font-weight:700}
.vs-diensten li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px dashed rgba(0,0,0,.14);font-size:14px}
.vs-diensten li span:first-child{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vs-diensten li span:last-child{white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--vs-zacht)}
.vs-diensten li span:last-child b{color:var(--vs-inkt);font-weight:600}
.vs-twee{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.vs-projecten{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.vs-projecten figure{position:relative;overflow:hidden;border-radius:6px;aspect-ratio:1}
.vs-projecten img{width:100%;height:100%;object-fit:cover}
.vs-projecten figcaption{position:absolute;left:0;right:0;bottom:0;padding:18px 8px 6px;font-size:11px;color:#fff;background:linear-gradient(0deg,rgba(0,0,0,.7),transparent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vs-gebied{display:flex;flex-wrap:wrap;gap:6px}
.vs-gebied span{padding:5px 10px;border-radius:99px;background:var(--vs-accent-2);color:var(--vs-accent);font-size:12.5px;font-weight:500}
.vs-uren{font-size:13px;width:100%;border-collapse:collapse}
.vs-uren td{padding:4px 0;font-variant-numeric:tabular-nums}
.vs-uren td:last-child{text-align:right}
.vs-uren tr.vandaag td{font-weight:700;color:var(--vs-accent)}
.vs-uren .dicht{color:#9a9fa4}
.vs-vandaag{display:inline-block;margin-bottom:10px;font-size:12px;font-weight:600;padding:4px 9px;border-radius:5px;background:var(--vs-accent-2);color:var(--vs-accent)}
.vs-vandaag.dicht{background:#fbe5e1;color:#9b2a1a}
.vs-review blockquote{font-size:17px;line-height:1.4;font-weight:500;letter-spacing:-.01em;max-width:40ch}
.vs-review .sterren{color:var(--vs-knop);letter-spacing:2px;font-size:14px;margin-bottom:8px}
.vs.inst .vs-review .sterren,.vs.klus .vs-review .sterren{color:#e8612a}
.vs-review p{font-size:12px;color:var(--vs-zacht);margin-top:8px}
.vs-offerte{background:var(--vs-accent);color:#fff}
.vs-offerte h4{color:#fff;opacity:.8}
.vs-velden{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.vs-velden span{display:block;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:6px;padding:10px;font-size:12px;color:rgba(255,255,255,.75)}
.vs-velden span.breed{grid-column:1 / -1;height:62px}
.vs-velden span.knop-vs{background:var(--vs-knop);color:var(--vs-knop-tekst);font-weight:600;text-align:center;border:0}
.vs.schil .vs-offerte .knop-vs,.vs.klus .vs-offerte .knop-vs{background:#fff;color:var(--vs-accent)}
.vs-voet{padding:16px 22px 70px;font-size:11.5px;color:var(--vs-zacht);display:flex;justify-content:space-between;gap:10px}
.vs-voet b{color:var(--vs-inkt);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60%}
.vs:not(.smal) .vs-sticky{display:none}
.vs-sticky{position:sticky;bottom:0;display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:8px;background:rgba(255,255,255,.96);border-top:1px solid rgba(0,0,0,.08);z-index:2}
.vs-sticky span{display:flex;align-items:center;justify-content:center;gap:6px;height:38px;border-radius:7px;font-weight:600;font-size:13px;background:var(--vs-accent);color:#fff}
.vs-sticky span.wa{background:#1a7d43}
.vs-sticky svg{width:14px;height:14px}
/* smal (telefoon): wordt op 375 px breed opgemaakt en met zoom verkleind in de telefoonmock */
.vs.smal{width:375px}
.vs.smal .vs-nav,.vs.smal .vs-bel{display:none}
.vs.smal .vs-logo{max-width:100%}
.vs.smal .vs-balk span:last-child{display:none}
.vs.smal .vs-hero{min-height:420px}
.vs.smal .vs-hero h3{font-size:27px}
.vs.smal.split .vs-hero{grid-template-columns:1fr;min-height:0}
.vs.smal.split .vs-hero img{order:0;height:220px}
.vs.smal .vs-twee{grid-template-columns:1fr}
.vs.smal .vs-projecten{grid-template-columns:repeat(2,1fr)}
.uv-telefoon .browser-scherm{overflow:hidden}
/* oplichten van gewijzigde plek */
@keyframes licht{0%{box-shadow:0 0 0 3px var(--oranje),0 0 0 9px rgba(255,91,31,.28);background-color:rgba(255,91,31,.14)}100%{box-shadow:0 0 0 3px rgba(255,91,31,0),0 0 0 9px rgba(255,91,31,0);background-color:transparent}}
.licht{animation:licht 1.6s var(--ease) 1;border-radius:6px}
@media (prefers-reduced-motion:reduce){.licht{animation:none;box-shadow:0 0 0 3px var(--oranje)}}

/* ================= 04 IN DE DOOS ================= */
.doos{background:var(--beton);padding:clamp(72px,9vw,136px) 0;
  background-image:linear-gradient(rgba(21,23,26,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(21,23,26,.045) 1px,transparent 1px);background-size:24px 24px}
.doos-kop{grid-column:2 / 9;display:flex;align-items:flex-end;gap:28px;flex-wrap:wrap}
.doos-kop h2{font-size:var(--t-mega);line-height:.8}
.doos-kop p{max-width:22em;color:var(--tekst-zacht);padding-bottom:6px}
.doos-tekening{grid-column:2 / 9;align-self:start;margin-top:40px;background:var(--wit);border:1px solid var(--lijn);padding:18px;position:relative}
.doos-tekening svg{width:100%;height:auto;color:var(--inkt)}
.doos-tekening .hoek{position:absolute;width:14px;height:14px;border-color:var(--inkt);border-style:solid}
.doos-tekening .hoek.lb{top:-1px;left:-1px;border-width:2px 0 0 2px}.doos-tekening .hoek.rb{top:-1px;right:-1px;border-width:2px 2px 0 0}
.doos-tekening .hoek.lo{bottom:-1px;left:-1px;border-width:0 0 2px 2px}.doos-tekening .hoek.ro{bottom:-1px;right:-1px;border-width:0 2px 2px 0}
.doos-lijst{grid-column:10 / 14;margin-top:40px;align-self:start}
.doos-lijst h3{display:flex;justify-content:space-between;padding-bottom:10px;border-bottom:var(--zwaar) solid var(--inkt)}
.doos-lijst ol li{display:grid;grid-template-columns:42px 1fr;gap:6px 10px;padding:15px 0;border-bottom:1px solid var(--lijn)}
.doos-lijst .pos{grid-row:span 2;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--inkt);display:grid;place-items:center;font-family:var(--f-mono);font-size:.7rem;font-weight:500}
.doos-lijst li:hover .pos{background:var(--oranje);border-color:var(--oranje)}
.doos-lijst strong{font-family:var(--f-display);font-weight:800;font-size:1.45rem;text-transform:uppercase;line-height:1}
.doos-lijst p{font-size:.93rem;color:var(--tekst-zacht);line-height:1.45}
.meegeleverd{margin-top:26px;background:var(--inkt);color:var(--op-donker);padding:18px 20px}
.meegeleverd .mono{color:var(--oranje)}
.meegeleverd ul{margin-top:10px;display:grid;gap:6px}
.meegeleverd li{display:flex;justify-content:space-between;gap:12px;font-size:.93rem;border-bottom:1px dotted var(--inkt-lijn);padding-bottom:6px}
.meegeleverd li span:last-child{color:var(--op-donker-zacht)}

/* ================= 05 BEDIENING (demo) ================= */
.bediening{background:var(--inkt);color:var(--op-donker);padding:clamp(72px,9vw,128px) 0 clamp(72px,9vw,120px);
  background-image:radial-gradient(ellipse 60% 50% at 70% 60%,rgba(255,91,31,.07),transparent 70%)}
.bd-kop{grid-column:2 / 9}
.bd-kop .mono{color:var(--oranje)}
.bd-kop h2{font-size:var(--t-xl);margin-top:18px}
.bd-kop h2 span{color:var(--oranje)}
.bd-intro{grid-column:10 / 14;align-self:end;color:var(--op-donker-zacht);font-size:.98rem}
.bd-intro strong{color:var(--op-donker);font-weight:600}
.knop-stuk{min-height:46px;padding:0 16px;border:0;cursor:pointer;border-radius:var(--r);font-family:var(--f-display);font-weight:800;font-size:1.1rem;text-transform:uppercase;color:var(--inkt);
  background:repeating-linear-gradient(-45deg,var(--oranje) 0 12px,#ffb08f 12px 24px);box-shadow:inset 0 0 0 2px var(--oranje);white-space:nowrap}
.knop-stuk span{background:var(--oranje);padding:3px 8px;border-radius:2px}
.knop-stuk:hover{background:repeating-linear-gradient(-45deg,var(--oranje) 0 12px,#ffc6ae 12px 24px)}

.bd-podium{grid-column:2 / 14;margin-top:44px;display:grid;grid-template-columns:372px minmax(0,1fr);gap:clamp(24px,3vw,48px);align-items:start}
.bd-podium .browser{height:760px;position:sticky;top:96px}
.bd-podium .browser-balk{background:#2a2e33;border-bottom-color:#3a3f45}
.bd-podium .browser-balk .stip i{background:#4a5057}
.bd-podium .adres{background:#1d2024;color:#d7d9dc}
.bd-podium .browser-balk .mono{color:#a3a9af}
.bd-label{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px;color:var(--op-donker-zacht)}
.bd-label b{color:var(--oranje);font-weight:500}



/* ---- v3: banners en slimme openingstijden op de voorbeeldsite ---- */
.vs-banner{display:flex;gap:12px;align-items:baseline;padding:9px 22px;font-size:13px;line-height:1.4;font-weight:500}
.vs-banner b{flex:none;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;opacity:.85}
.vs-banner span{overflow-wrap:anywhere}
.vs-banner u{text-underline-offset:2px;font-weight:600;white-space:nowrap}
.vs-banner.actie{background:var(--vs-knop);color:var(--vs-knop-tekst)}
.vs.klus .vs-banner.actie{background:#e8612a;color:#1a0f08}
.vs-banner.vakantie{background:#f3e9d6;color:#5a4214;border-bottom:1px solid #e4d5b8}
.vs-banner.nieuws{background:var(--vs-inkt);color:#fff}
.vs-banner + .vs-banner{border-top:1px solid rgba(0,0,0,.12)}
.vs-nu{display:flex;align-items:center;gap:8px;padding:7px 22px;font-size:12px;font-weight:600;background:var(--vs-accent-2);color:#8a2a18}
.vs-nu.open,.vs-regel.open{color:#1d6b3d}
.vs-nu i,.vs-regel i{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.vs-regel{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-size:15px;font-weight:700;line-height:1.3;color:#8a2a18}
.vs-uren td small{color:var(--vs-zacht);font-weight:400;font-size:11px;margin-left:4px}
.vs-uren tr.vandaag td small{color:inherit}

.modus{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;padding:4px 8px;border-radius:4px;white-space:nowrap}
.modus.live{background:#1f3a2a;color:#9fdcb4}
.modus.concept{background:#4a2413;color:#ffb08f}

/* ================= 06 PRIJSLIJST ================= */
.prijslijst{background:var(--papier);padding:clamp(72px,9vw,136px) 0 clamp(72px,9vw,120px)}
.pl-kop{grid-column:2 / 9}
.pl-kop .mono{color:var(--oranje-tekst)}
.pl-kop h2{font-size:var(--t-mega);line-height:.8;margin-top:14px}
.pl-schakel{grid-column:9 / 14;align-self:end;padding-bottom:6px}
.pl-schakel p{font-size:.9rem;color:var(--tekst-zacht);margin-top:12px;max-width:30em}
.tuimel{display:grid;grid-template-columns:1fr 1fr;background:var(--inkt);border-radius:6px;padding:4px;gap:4px;box-shadow:inset 0 2px 4px rgba(0,0,0,.5)}
.tuimel button{border:0;border-radius:4px;padding:12px 14px;background:transparent;color:var(--op-donker-zacht);cursor:pointer;text-align:left;transition:background .2s,color .2s}
.tuimel button b{display:block;font-family:var(--f-display);font-weight:800;font-size:1.3rem;text-transform:uppercase;line-height:1}
.tuimel button span{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase}
.tuimel button[aria-pressed="true"]{background:var(--oranje);color:var(--inkt);box-shadow:0 2px 0 #b23f10}
.tuimel button:not([aria-pressed="true"]):hover{color:var(--op-donker)}
.pl-regels{grid-column:2 / 14;margin-top:52px;border-top:var(--zwaar) solid var(--inkt)}
.pl-regel{display:grid;grid-template-columns:130px minmax(0,1.5fr) minmax(0,1fr) minmax(0,1.5fr);gap:0 var(--goot);align-items:end}
.pl-regel{padding:28px 0 30px;border-bottom:1px solid var(--lijn);transition:background .2s}
.pl-regel .art{font-family:var(--f-mono);font-size:.78rem;color:var(--tekst-zacht);align-self:start;padding-top:10px}
.pl-regel h4{font-family:var(--f-display);font-weight:900;font-size:clamp(2.2rem,3.6vw,3.4rem);text-transform:uppercase;line-height:.85}
.pl-regel h4 + p{margin-top:10px;color:var(--tekst-zacht);font-size:.95rem;max-width:30em}
.pl-regel .termijn{font-size:.9rem;color:var(--tekst-zacht);line-height:1.4}
.pl-regel .termijn b{display:block;color:var(--inkt);font-weight:600}
.pl-bedrag{text-align:right;line-height:.8}
.pl-bedrag .groot{font-family:var(--f-display);font-weight:900;font-size:clamp(4rem,7.5vw,7.4rem);letter-spacing:-.015em;font-variant-numeric:tabular-nums}
.pl-bedrag .groot sup{font-size:.36em;vertical-align:top;position:relative;top:.12em;margin-right:.08em}
.pl-bedrag .per{display:block;font-size:.86rem;color:var(--tekst-zacht);margin-top:12px;line-height:1.35}
.pl-bedrag .per b{color:var(--inkt);font-weight:600}
.pl-intro{display:inline-block;margin-top:10px;padding:5px 9px;border-radius:3px;background:var(--inkt);color:var(--op-donker);font-size:.84rem;font-weight:600;line-height:1.2}
/* Groepskop boven de regels: startontwerp / eigen ontwerp */
.pl-groep{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 22px;padding:30px 0 4px}
.pl-groep + .pl-regel{padding-top:20px}
.pl-regel + .pl-groep{margin-top:44px;border-top:1px solid var(--lijn)}
.pl-groep h3{font-family:var(--f-mono);font-size:.86rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--oranje-tekst)}
.pl-groep p{color:var(--tekst-zacht);font-size:.95rem;max-width:40em}
[data-modus="a"] .alleen-b,[data-modus="b"] .alleen-a{display:none !important}
.pl-onder{grid-column:2 / 14;margin-top:26px;display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--goot);align-items:start}
.inbegrepen{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--lijn);background:var(--wit)}
.inbegrepen .mono{width:100%;padding:12px 16px;border-bottom:1px solid var(--lijn);color:var(--tekst-zacht);display:flex;justify-content:space-between}
.inbegrepen li.mono{flex:1 1 100%;font-weight:500;font-size:var(--t-mono);border-right:0}
.inbegrepen li{flex:1 1 0;min-width:130px;padding:14px 16px;font-weight:600;font-size:.95rem;border-right:1px solid var(--lijn)}
.inbegrepen li:last-child{border-right:0}
.inbegrepen li small{display:block;font-weight:400;color:var(--tekst-zacht);font-size:.8rem}
.voorwaarden{margin-top:14px;font-size:.88rem;color:var(--tekst-zacht);max-width:64ch}
.intro-label{position:relative;background:var(--oranje);color:var(--inkt);padding:18px 20px 18px 34px;border-radius:3px 10px 10px 3px;transform:rotate(1.5deg);box-shadow:0 14px 30px -12px rgba(0,0,0,.35)}
.intro-label::before{content:"";position:absolute;left:12px;top:50%;width:10px;height:10px;border-radius:50%;background:var(--papier);transform:translateY(-50%);box-shadow:inset 0 1px 2px rgba(0,0,0,.4)}
.intro-label .mono{font-size:.66rem}
.intro-label strong{display:block;font-family:var(--f-display);font-weight:900;font-size:2.1rem;line-height:.9;text-transform:uppercase;margin:6px 0 8px}
.intro-label p{font-size:.86rem;line-height:1.4}

/* Google Bedrijfsprofiel */
.gbp{grid-column:vol-start / vol-eind;margin-top:clamp(64px,8vw,110px);background:var(--inkt);color:var(--op-donker);position:relative;overflow:hidden}
.gbp-in{display:grid;grid-template-columns:[vol-start] minmax(var(--rand),1fr) repeat(12,var(--kol)) minmax(var(--rand),1fr) [vol-eind];column-gap:var(--goot);padding:clamp(56px,7vw,96px) 0}
.gbp-tekst{grid-column:2 / 8}
.gbp-tekst .mono{color:var(--oranje);display:flex;gap:14px;flex-wrap:wrap}
.gbp-tekst .mono span{padding:4px 8px;border:1px solid var(--oranje);border-radius:2px}
.gbp-tekst h3{font-family:var(--f-display);font-weight:900;text-transform:uppercase;font-size:var(--t-xl);line-height:.86;margin:22px 0 22px}
.gbp-tekst h3 span{color:var(--oranje)}
.gbp-tekst > p{color:var(--op-donker-zacht);max-width:36em}
.gbp-tekst ul{margin-top:24px;display:grid;gap:0;max-width:34em;border-top:1px solid var(--inkt-lijn)}
.gbp-tekst li{padding:10px 0 10px 28px;border-bottom:1px solid var(--inkt-lijn);position:relative;font-size:.96rem}
.gbp-tekst li::before{content:"";position:absolute;left:2px;top:17px;width:12px;height:7px;border-left:2px solid var(--oranje);border-bottom:2px solid var(--oranje);transform:rotate(-45deg)}
.gbp-prijs{margin-top:28px;display:flex;align-items:flex-end;gap:14px}
.gbp-prijs .groot{font-family:var(--f-display);font-weight:900;font-size:4.6rem;line-height:.78;color:var(--oranje)}
.gbp-prijs .groot sup{font-size:.4em;vertical-align:top;position:relative;top:.1em}
.gbp-prijs > span:last-child{font-size:.86rem;color:var(--op-donker-zacht);line-height:1.35}
.gbp-kaart{grid-column:9 / 14;align-self:center}
.kaartmock{background:#fff;color:#1f2328;border-radius:14px;overflow:hidden;box-shadow:0 30px 60px -20px rgba(0,0,0,.6);transform:rotate(-1.2deg)}
.kaartmock .zoek{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid #eceae6;font-size:14px}
.kaartmock .zoek svg{width:16px;height:16px;color:#555b61}
.kaartmock .kaartvlak{height:170px;position:relative;background:#e9efe6}
.kaartmock .kaartvlak svg{width:100%;height:100%}
.kaartmock ol{padding:4px 0}
.kaartmock li{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:11px 14px;border-bottom:1px solid #f0eeea;font-size:12.5px}
.kaartmock li:last-child{border-bottom:0}
.kaartmock li b{font-size:14px;font-weight:600}
.kaartmock li .grijs{display:block;height:9px;border-radius:4px;background:#e6e4df;width:70%;margin:4px 0}
.kaartmock li.jij{background:var(--oranje-zacht);box-shadow:inset 3px 0 0 var(--oranje)}
.kaartmock li .st{color:#b8860b;letter-spacing:1px}
.kaartmock li .open{color:#1d6b3d;font-weight:600}
.kaartmock .knopje{grid-row:span 2;align-self:center;border:1px solid #d6d3cc;border-radius:99px;padding:5px 10px;font-weight:600;font-size:11.5px;color:#1f2328}
.kaartmock .onder{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;color:#555b61;padding:8px 14px;background:#f7f6f3}

.accessoires{grid-column:2 / 14;margin-top:clamp(56px,7vw,96px);display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--goot)}
.accessoires h3{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:var(--t-m);line-height:.95}
.accessoires h3 + p{margin-top:10px;color:var(--tekst-zacht);font-size:.92rem;max-width:24em}
.acc-lijst{border-top:var(--zwaar) solid var(--inkt)}
.acc-lijst li{display:grid;grid-template-columns:100px 1fr auto;gap:16px;align-items:baseline;padding:15px 0;border-bottom:1px solid var(--lijn)}
.acc-lijst .art{color:var(--tekst-zacht)}
.acc-lijst .naam{font-weight:600}
.acc-lijst .naam small{display:block;font-weight:400;color:var(--tekst-zacht);font-size:.86rem}
.acc-lijst .prijs{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.acc-lijst .prijs small{display:block;font-weight:400;color:var(--tekst-zacht);font-size:.78rem}

/* ================= 07 ZNDR ================= */
.zndr{background:var(--inkt);color:var(--op-donker);overflow:hidden}
.zndr .raster{position:relative;min-height:640px;align-items:center}
.zndr-foto{grid-column:vol-start / vol-eind;grid-row:1;align-self:stretch;position:relative;margin:0}
.zndr-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;filter:saturate(.8) brightness(.8)}
.zndr-foto::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(21,23,26,.97) 0,rgba(21,23,26,.93) 46%,rgba(21,23,26,.45) 72%,rgba(21,23,26,.25))}
.zndr-tekst{grid-column:2 / 8;grid-row:1;position:relative;z-index:2;padding:clamp(72px,9vw,120px) 0}
.zndr-tekst .mono{color:var(--op-donker-zacht)}
.zndr-tekst h2{font-size:var(--t-xl);margin:18px 0 26px}
.zndr-tekst h2 span{color:var(--oranje)}
.zndr-tekst p{color:var(--op-donker);max-width:32em}
.zndr-tekst p + p{margin-top:14px;color:var(--op-donker-zacht);font-size:.95rem}
.zndr-merk{margin-top:30px;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.zndr-merk .woord{font-family:var(--f-tekst);font-weight:600;font-size:2rem;letter-spacing:-.04em;line-height:1}
.zndr-merk a{color:var(--op-donker);font-weight:600;text-underline-offset:5px;text-decoration-color:var(--oranje);text-decoration-thickness:2px}
.zndr-merk a:hover{color:var(--oranje)}
.oproepen{grid-column:9 / 14;grid-row:1;position:relative;z-index:2;background:rgba(21,23,26,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:18px 18px 16px}
.oproepen .kop{display:flex;justify-content:space-between;color:var(--op-donker-zacht);padding-bottom:12px;border-bottom:1px solid var(--inkt-lijn)}
.oproepen li{display:grid;grid-template-columns:34px 1fr auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--inkt-lijn)}
.oproepen li .ic{width:34px;height:34px;border-radius:50%;background:rgba(255,91,31,.14);color:var(--oranje);display:grid;place-items:center}
.oproepen li .ic svg{width:16px;height:16px}
.oproepen li b{display:block;font-weight:600;font-size:.95rem;font-variant-numeric:tabular-nums}
.oproepen li small{color:var(--op-donker-zacht);font-size:.8rem}
.oproepen li .t{font-family:var(--f-mono);font-size:.74rem;color:var(--op-donker-zacht)}
.oproepen .som{margin-top:14px;display:flex;justify-content:space-between;align-items:center}
.oproepen .som span:first-child{font-size:.86rem;color:var(--op-donker-zacht)}
.oproepen .som strong{font-family:var(--f-display);font-weight:900;font-size:2.6rem;line-height:.8;color:var(--oranje)}

/* ================= 08 VRAAG EN ANTWOORD ================= */
.vragen{background:var(--beton);padding:clamp(72px,9vw,136px) 0}
.vr-kop{grid-column:2 / 6;align-self:start;position:sticky;top:110px}
.vr-kop .mono{color:var(--oranje-tekst)}
.vr-kop h2{font-size:var(--t-xl);margin-top:16px}
.vr-kop p{margin-top:18px;color:var(--tekst-zacht);max-width:20em}
.vr-lijst{grid-column:7 / 14;columns:2;column-gap:var(--goot);column-rule:1px solid var(--lijn)}
.vr{break-inside:avoid;padding:0 0 30px;margin-bottom:30px;border-bottom:1px solid var(--lijn);position:relative}
.vr .mono{color:var(--oranje-tekst)}
.vr h3{font-family:var(--f-display);font-weight:800;font-size:1.65rem;text-transform:uppercase;line-height:.95;margin:8px 0 10px}
.vr p{font-size:.96rem;color:#33383d}
.vr:first-child h3{font-size:2.2rem}

/* ================= 09 WERKBON / CTA ================= */
.werkbon-sectie{background:var(--oranje);color:var(--inkt);padding:clamp(72px,9vw,128px) 0;overflow:hidden}
.wb-tekst{grid-column:2 / 9;align-self:center}
.wb-tekst .mono{display:block;margin-bottom:20px}
.wb-tekst h2{font-size:var(--t-mega);line-height:.86}
.wb-tekst p{margin-top:26px;font-size:1.15rem;max-width:30em;font-weight:500}
.wb-tekst .knop{margin-top:30px}
.werkbon{grid-column:10 / 14;align-self:center;background:var(--wit);padding:30px 24px 22px;position:relative;transform:rotate(2deg);box-shadow:0 30px 50px -20px rgba(60,20,0,.45);font-size:.92rem}
.werkbon::before{content:"";position:absolute;left:24px;right:24px;top:10px;border-top:1.5px dashed #bdb9b0}
.werkbon-kop{display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:14px;border-bottom:var(--zwaar) solid var(--inkt)}
.werkbon-kop strong{font-family:var(--f-display);font-weight:900;font-size:2.2rem;text-transform:uppercase;line-height:.8}
.werkbon-kop .mono{text-align:right;color:var(--tekst-zacht);line-height:1.5}
.werkbon dl div{display:grid;grid-template-columns:96px 1fr;gap:10px;padding:10px 0;border-bottom:1px dashed #bdb9b0}
.werkbon dt{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--tekst-zacht);padding-top:3px}
.werkbon dd{font-weight:500}
.vinkjes{display:grid;gap:4px}
.vinkjes span{display:flex;gap:8px;align-items:center}
.vinkjes span::before{content:"";width:13px;height:13px;border:1.5px solid var(--inkt);flex:none;background:linear-gradient(45deg,transparent 45%,var(--inkt) 45% 55%,transparent 55%),linear-gradient(-45deg,transparent 45%,var(--inkt) 45% 55%,transparent 55%)}

/* ================= VOET ================= */
.site-voet{background:var(--inkt);color:var(--op-donker-zacht);padding:64px 0 28px}
.voet-merk{grid-column:2 / 7}
.voet-merk p{margin-top:16px;max-width:26em;font-size:.93rem}
.voet-kol{grid-row:1}
.voet-vak{grid-column:8 / 10}
.voet-info{grid-column:10 / 12}
.voet-kol h2{font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--op-donker);font-weight:500;margin-bottom:14px}
.voet-kol li + li{margin-top:6px}
.voet-kol a{text-decoration:none;font-size:.95rem}
.voet-kol a:hover{color:var(--oranje)}
.voet-waasup{grid-column:12 / 14;grid-row:1;align-self:start;justify-self:end;text-align:right}
.voet-waasup a{display:inline-block;text-decoration:none;color:var(--op-donker);font-weight:600;font-size:1.05rem;border-bottom:2px solid var(--op-donker-zacht);padding-bottom:2px}
.voet-waasup a:hover{border-color:var(--op-donker)}
.voet-waasup small{display:block;font-size:.8rem;margin-bottom:4px}
.voet-onder{grid-column:2 / 14;margin-top:56px;padding-top:18px;border-top:1px solid var(--inkt-lijn);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}


/* ================= v4: rustiger ================= */
.storing,.uitvoering,.doos,.bediening,.prijslijst,.vragen{padding-top:clamp(96px,12vw,184px);padding-bottom:clamp(96px,12vw,184px)}
.werkbon-sectie{padding:clamp(96px,11vw,168px) 0}
.hero-tekst{padding-top:clamp(56px,8vw,112px);padding-bottom:88px}
.hero .lead{margin-top:32px}
.datasheet{display:block;margin-top:40px;border-top:0;max-width:520px}
.datasheet div,.datasheet div:nth-child(odd),.datasheet div:nth-child(even){grid-template-columns:110px 1fr;padding:7px 0;border:0}
.datasheet dt{font-size:.86rem;color:var(--op-donker-zacht)}
.datasheet dd{font-size:.95rem;font-weight:400}
.hero-koop{margin-top:44px}
.prijsvlag .bedrag{color:var(--op-donker)}
.storing-kop h2{margin-top:0}
.storing-beeld figcaption{display:none}
.storingstabel{margin-top:clamp(64px,7vw,104px)}
.st-rij{padding:34px 0 36px;border-bottom:1px solid var(--lijn-fijn)}
.st-rij:first-child{border-top:1px solid var(--lijn-fijn)}
.st-rij:hover{background:none}
.st-code{color:#6f7276}
.st-oplossing::before{background:var(--inkt)}
.st-oplossing::after{border-color:var(--inkt)}
.uv-links h2{margin-top:0}
.uv-kies{border-top:1px solid var(--lijn)}
.uv-kies button{grid-template-columns:1fr 22px;padding:20px 0;border-bottom-color:var(--lijn-fijn)}
.uv-kies button::before{background:var(--inkt);width:3px}
.voorbeeldtag{font-size:.8rem;padding:6px 10px;letter-spacing:0}
.doos{background-image:none}
.doos-tekening{border:0;padding:28px;background:var(--wit)}
.doos-lijst{margin-top:56px}
.doos-lijst h3{display:block;font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:1.5rem;border-bottom:0;padding-bottom:6px}
.doos-lijst ol li{padding:16px 0;border-bottom:0}
.meegeleverd{margin-top:20px;background:none;color:var(--tekst-zacht);padding:0;font-size:.95rem;max-width:30em}
.bd-kop h2 span,.zndr-tekst h2 span,.gbp-tekst h3 span{color:var(--op-donker-zacht)}
.bd-sub{margin-top:18px;font-family:var(--f-display);font-weight:700;font-size:clamp(1.6rem,2.6vw,2.4rem);text-transform:uppercase;color:var(--op-donker-zacht);line-height:1}
.bd-intro{display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.bd-intro p{color:var(--op-donker-zacht)}
.bd-podium{margin-top:72px}
.bd-label{display:flex;justify-content:space-between;font-size:.84rem;color:var(--op-donker-zacht);margin-bottom:10px}
.pl-kop h2{margin-top:0}
.tuimel button[aria-pressed="true"]{background:var(--papier);color:var(--inkt);box-shadow:none}
.pl-regels{margin-top:72px;border-top:1px solid var(--lijn)}
.pl-regel{padding:36px 0 38px;border-bottom-color:var(--lijn-fijn)}
.pl-onder{margin-top:40px}
.inbegrepen-kop{font-weight:600;font-size:.95rem;margin-bottom:8px}
.inbegrepen{border:0;background:none;gap:6px 26px}
.inbegrepen li{flex:0 0 auto;min-width:0;padding:0;border:0;font-weight:500}
.inbegrepen li small{display:inline;margin-left:5px}
.intro-label{background:var(--inkt);color:var(--op-donker)}
.intro-label::before{background:var(--papier)}
.intro-kop{font-size:.82rem;font-weight:600;color:var(--op-donker-zacht)}
.gbp-kop{font-size:.9rem;font-weight:600;color:var(--op-donker-zacht)}
.gbp-tekst ul{border-top:0}
.gbp-tekst li{border-bottom:0;padding:6px 0 6px 28px}
.gbp-tekst li::before{border-color:var(--op-donker-zacht);top:13px}
.gbp-prijs .groot{color:var(--op-donker)}
.acc-lijst{border-top:1px solid var(--lijn)}
.acc-lijst li{grid-template-columns:1fr auto;padding:18px 0;border-bottom-color:var(--lijn-fijn)}
.oproepen .kop{font-size:.82rem}
.zndr-tekst{padding:clamp(96px,11vw,160px) 0}
.vr-kop h2{margin-top:0}
.vr-lijst{column-rule:0;column-gap:clamp(32px,4vw,64px)}
.vr{border-bottom:0;padding-bottom:0;margin-bottom:44px}
.vr h3{margin-top:0}
.vr:first-child h3{font-size:1.65rem}
.wb-tekst p{margin-top:30px}
.voet-onder{font-size:.82rem}
.voet-kol h2{font-family:var(--f-tekst);font-size:.9rem;letter-spacing:0;text-transform:none;font-weight:600}
.logo-woord small{font-family:var(--f-tekst);font-size:.72rem;letter-spacing:.02em;text-transform:none;font-weight:500}
@media (max-width:640px){.inbegrepen{flex-direction:column;gap:6px}}
@media (max-width:960px){.storing-beeld{display:block}.bd-intro{margin-top:24px}.bd-podium{margin-top:48px}}

/* ================= RESPONSIEF ================= */
@media (max-width:1180px){
  .hoofdmenu li.vak-link{display:none}
  .uv-telefoon{width:210px}
  .bd-podium{grid-template-columns:340px minmax(0,1fr)}
}
@media (max-width:960px){
  .hoofdmenu{display:none;position:absolute;left:0;right:0;top:100%;background:var(--inkt);border-bottom:1px solid var(--inkt-lijn);padding:8px var(--rand) 20px}
  .hoofdmenu.open{display:block}
  .hoofdmenu ul{flex-direction:column;align-items:stretch}
  .hoofdmenu li.vak-link{display:block}
  .hoofdmenu a{padding:14px 0;font-size:1.1rem;border-bottom:1px solid var(--inkt-lijn)}
  .hoofdmenu a::after{display:none}
  .hoofdmenu .sep{display:none}
  .hoofdmenu .knop{margin:14px 0 0;justify-content:center}
  .menu-knop{display:block}
  .hero .raster{min-height:0}
  .hero-tekst{grid-column:2 / 14;padding-bottom:40px}
  .hero-beeld{grid-column:vol-start / vol-eind;grid-row:2;min-height:0;aspect-ratio:4/3}
  .hero-beeld::after{background:linear-gradient(0deg,rgba(21,23,26,.6),transparent 40%),linear-gradient(180deg,var(--inkt),transparent 18%)}
  .productlabel{left:auto;right:var(--rand);top:22px;bottom:auto;width:160px}
  .productlabel strong{font-size:2rem}
  .hero-annotatie{display:none}
  .storing-kop,.storing-intro,.storingstabel{grid-column:2 / 14;grid-row:auto}
  .storing-beeld{grid-column:2 / 14;grid-row:auto;margin:32px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:end}
  .storing-beeld img{aspect-ratio:4/3}
  .uv-links{grid-column:2 / 14}
  .uv-podium{grid-column:2 / 14;grid-row:2;margin-top:48px;padding-bottom:0}
  .uv-podium .browser{margin-right:0;border-radius:10px;height:560px}
  .uv-telefoon{right:-8px;bottom:-30px;width:180px}
  .doos-kop,.doos-tekening,.doos-lijst{grid-column:2 / 14}
  .bd-kop,.bd-intro{grid-column:2 / 14}
  .bd-intro{margin-top:18px}
  .bd-podium{grid-template-columns:minmax(0,1fr);justify-items:center}
  .bd-podium > div{width:100%;min-width:0}
  .bd-app{max-width:390px}
  .bd-podium .browser{position:relative;top:0;height:620px}
  .pl-kop,.pl-schakel{grid-column:2 / 14}
  .pl-schakel{margin-top:28px}
  .pl-onder{grid-template-columns:1fr}
  .intro-label{max-width:380px}
  .gbp-tekst,.gbp-kaart{grid-column:2 / 14}
  .gbp-kaart{margin-top:44px;max-width:460px}
  .accessoires{grid-template-columns:1fr}
  .zndr-tekst{grid-column:2 / 14;padding-bottom:32px}
  .oproepen{grid-column:2 / 14;grid-row:2;margin-bottom:72px;max-width:460px}
  .zndr-foto{grid-row:1 / span 2}
  .zndr-foto::after{background:linear-gradient(180deg,rgba(21,23,26,.96) 0,rgba(21,23,26,.85) 55%,rgba(21,23,26,.55))}
  .vr-kop{grid-column:2 / 14;position:static}
  .vr-lijst{grid-column:2 / 14;margin-top:40px}
  .wb-tekst,.werkbon{grid-column:2 / 14}
  .werkbon{margin-top:48px;max-width:420px}
  .voet-merk{grid-column:2 / 14}
  .voet-kol{grid-row:2;margin-top:36px}
  .voet-vak{grid-column:2 / 8}.voet-info{grid-column:8 / 14}
  .voet-waasup{grid-column:2 / 14;grid-row:3;justify-self:start;text-align:left;margin-top:36px}
}
@media (max-width:640px){
  :root{--t-body:1rem}
  .logo-woord{font-size:1.2rem}
  .hero h1{font-size:clamp(3.6rem,19vw,5.4rem)}
  .datasheet{grid-template-columns:1fr}
  .datasheet div:nth-child(odd),.datasheet div:nth-child(even){padding:10px 0;border-left:0}
  .datasheet div{grid-template-columns:104px 1fr}
  .productlabel{width:136px;padding:10px 12px}
  .productlabel strong{font-size:1.7rem}
  .productlabel svg{height:22px}
  .productlabel .code{display:none}
  .hero-knoppen{width:100%}
  .hero-knoppen .knop{flex:1 1 100%;justify-content:center}
  .storing-beeld{grid-template-columns:1fr}
  .st-rij{grid-template-columns:56px 1fr;gap:10px 14px;padding:22px 0}
  .st-code{grid-row:span 3;font-size:2.2rem}
  .st-storing{font-size:1.6rem}
  .uv-kies .naam{font-size:1.4rem}
  .uv-podium .browser{display:none}
  .uv-podium{padding-top:22px}
  .voorbeeldtag{top:0;left:50%;transform:translateX(-50%);white-space:nowrap}
  .uv-telefoon{position:relative;right:auto;bottom:auto;width:272px;margin:0 auto}
  .uv-podium .adres{font-size:.7rem}
  .browser-balk .mono{display:none}
  .doos-kop h2{font-size:clamp(3.8rem,20vw,6rem)}
  .doos-tekening{padding:8px;margin-left:calc(var(--rand) * -1);margin-right:calc(var(--rand) * -1);border-left:0;border-right:0}
  .bd-podium .browser{height:560px}
  .bd-podium .browser-balk .stip{display:none}
  .bd-podium .browser-balk{gap:8px;padding:0 8px}
  .bd-podium .adres{font-size:.7rem;white-space:nowrap;overflow:hidden}
  .modus{font-size:.56rem;padding:3px 6px}
  .pl-regel{grid-template-columns:1fr auto;gap:10px 16px;align-items:start}
  .pl-regel .art{grid-column:1 / -1;padding-top:0}
  .pl-regel .termijn{grid-column:1 / 2;grid-row:3}
  .pl-regel .pl-bedrag{grid-column:2;grid-row:2 / span 2;align-self:end}
  .pl-bedrag .groot{font-size:3.6rem}
  .tuimel button b{font-size:1.1rem}
  .inbegrepen li{flex-basis:50%;border-bottom:1px solid var(--lijn)}
  .acc-lijst li{grid-template-columns:1fr auto}
  .acc-lijst .art{display:none}
  .gbp-prijs .groot{font-size:3.8rem}
  .vr-lijst{columns:1}
  .werkbon{transform:rotate(1deg)}
  .wb-tekst .knop{font-size:1.1rem;padding:0 16px}
}

/* ================= SUBPAGINA'S (bouw) ================= */
.uv-meer{margin-top:12px;font-size:.9rem;color:var(--tekst-zacht)}
.uv-meer a{color:var(--inkt);text-underline-offset:3px}
a:hover{text-decoration-color:var(--oranje)}

/* vak-hero */
.vak-hero{background:var(--inkt);color:var(--op-donker);overflow:hidden}
.vak-hero .raster{min-height:600px}
.vak-hero-tekst{grid-column:2 / 9;grid-row:1;padding:clamp(56px,8vw,112px) 0 clamp(56px,7vw,96px);align-self:center;position:relative;z-index:2}
.vak-kicker{color:var(--op-donker-zacht);font-size:1rem;margin-bottom:18px}
.vak-hero h1{font-size:var(--t-xl);max-width:9em}
.vak-hero .lead{margin-top:28px;color:var(--op-donker)}
.vak-hero .hero-knoppen{margin-top:36px}
.vak-prijsregel{margin-top:22px;font-size:.9rem;color:var(--op-donker-zacht)}
.vak-beeld{grid-column:9 / vol-eind;grid-row:1;position:relative;margin:0}
.vak-beeld img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vak-beeld::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--inkt),rgba(21,23,26,0) 30%)}

/* waar klanten naar zoeken */
.vak-punten{background:var(--papier);padding:clamp(96px,12vw,176px) 0}
.vp-kop{grid-column:2 / 6;align-self:start}
.vp-kop h2{font-size:var(--t-l)}
.vp-kop p{margin-top:18px;color:var(--tekst-zacht);max-width:24em}
.vp-lijst{grid-column:7 / 14;display:grid;gap:34px;counter-reset:vp}
.vp-lijst li{display:grid;grid-template-columns:64px 1fr;gap:4px 18px;counter-increment:vp}
.vp-lijst li::before{content:counter(vp,decimal-leading-zero);grid-row:span 2;font-family:var(--f-display);font-weight:900;font-size:2.2rem;line-height:.9;color:#a2a5a8}
.vp-lijst h3{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:1.6rem;line-height:1}
.vp-lijst p{color:var(--tekst-zacht);max-width:40em}

/* voorbeeldsite */
.vak-voorbeeld{background:var(--beton);padding:clamp(96px,12vw,176px) 0}
.vv-kop{grid-column:2 / 10}
.vv-kop h2{font-size:var(--t-l)}
.vv-kop p{margin-top:16px;color:var(--tekst-zacht);max-width:36em}
.vv-podium{grid-column:2 / 14;margin-top:48px;position:relative}
.vv-podium .browser{height:680px}
.vv-podium .voorbeeldtag{top:-14px}
.vv-telefoon{display:none;width:280px;margin:0 auto}

/* zo houd je hem bij */
.vak-bijhouden{background:var(--inkt);color:var(--op-donker);padding:clamp(96px,12vw,176px) 0}
.vb-kop{grid-column:2 / 8}
.vb-kop h2{font-size:var(--t-l)}
.vb-kop p{margin-top:16px;color:var(--op-donker-zacht);max-width:28em}
.vb-kop .knop{margin-top:30px}
.vb-lijst{grid-column:9 / 14;display:grid;gap:30px;align-self:center}
.vb-lijst li{padding-left:22px;border-left:2px solid var(--inkt-lijn)}
.vb-lijst b{display:block;font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:1.5rem;line-height:1;margin-bottom:6px}
.vb-lijst span{color:var(--op-donker-zacht)}

/* prijs kort */
.prijs-kort{background:var(--papier);padding:clamp(96px,12vw,176px) 0}
.pk-kop{grid-column:2 / 6}
.pk-kop p{margin-top:16px;color:var(--tekst-zacht)}
.pk-opties{grid-column:7 / 14;display:grid;grid-template-columns:1fr 1fr;gap:var(--goot)}
.pk{padding-top:18px;border-top:1px solid var(--lijn)}
.pk-naam{font-weight:600}
.pk-bedrag{font-family:var(--f-display);font-weight:900;font-size:clamp(3rem,5vw,4.6rem);line-height:.9;margin:10px 0 12px}
.pk-bedrag small{font-family:var(--f-tekst);font-weight:500;font-size:.9rem;color:var(--tekst-zacht)}
.pk p:last-child{color:var(--tekst-zacht);font-size:.95rem}
.pk-meer{grid-column:7 / 14;margin-top:28px;color:var(--tekst-zacht);font-size:.95rem}
.pk-meer a{color:var(--inkt)}

/* cta-band */
.cta-band{background:var(--oranje);color:var(--inkt);padding:clamp(88px,10vw,144px) 0}
.cta-in{grid-column:2 / 11}
.cta-in h2{font-size:var(--t-xl)}
.cta-in p{margin-top:24px;font-size:1.12rem;font-weight:500;max-width:32em}
.cta-in .knop{margin-top:30px}

/* tekstpagina's (contact, privacy, bedankt) */
.pagina-kop{background:var(--inkt);color:var(--op-donker);padding:clamp(72px,9vw,128px) 0 clamp(56px,6vw,88px)}
.pagina-kop h1{grid-column:2 / 12;font-size:var(--t-xl)}
.pagina-kop p{grid-column:2 / 10;margin-top:22px;color:var(--op-donker-zacht);font-size:1.15rem;max-width:34em}
.tekst-sectie{background:var(--papier);padding:clamp(72px,9vw,128px) 0 clamp(96px,11vw,160px)}
.tekst{grid-column:2 / 10;max-width:62ch}
.tekst h2{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:1.7rem;line-height:1;margin:44px 0 12px}
.tekst h2:first-child{margin-top:0}
.tekst p+p,.tekst ul,.tekst ul+p{margin-top:12px}
.tekst ul{list-style:disc;padding-left:1.2em}
.tekst li+li{margin-top:6px}
.tekst a{color:var(--inkt);text-underline-offset:3px}

/* contact */
.contact-grid{display:contents}
.contact-info{grid-column:2 / 6;align-self:start}
.contact-info h2{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:1.6rem;line-height:1}
.contact-info p{margin-top:12px;color:var(--tekst-zacht)}
.contact-info .knop{margin-top:22px}
.contact-info dl{margin-top:30px;display:grid;gap:8px}
.contact-info dt{font-size:.85rem;color:var(--tekst-zacht)}
.formulier{grid-column:7 / 14;display:grid;gap:18px}
.formulier .veld-r{display:grid;gap:6px}
.formulier label{font-weight:600;font-size:.95rem}
.formulier label small{font-weight:400;color:var(--tekst-zacht)}
.formulier input,.formulier textarea,.formulier select{width:100%;min-height:50px;padding:12px 14px;border:1.5px solid var(--lijn);border-radius:var(--r);background:var(--wit);font-size:1rem}
.formulier textarea{min-height:150px;resize:vertical}
.formulier input:focus,.formulier textarea:focus,.formulier select:focus{outline:none;border-color:var(--inkt);box-shadow:0 0 0 3px rgba(255,91,31,.35)}
.formulier [aria-invalid="true"]{border-color:var(--fout)}
.veld-fout{color:var(--fout);font-size:.88rem}
.veld-fout:empty{display:none}
.twee-velden{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.honing{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-privacy{font-size:.88rem;color:var(--tekst-zacht)}
.form-privacy a{color:var(--inkt)}
.formulier .knop{justify-self:start;border:0}
.formulier .knop:disabled{opacity:.5;cursor:default}
.form-klaar{padding:16px 18px;background:var(--wit);border-left:4px solid var(--oranje);font-weight:500}
.form-klaar:focus{outline:2px solid var(--inkt);outline-offset:2px}

@media (max-width:960px){
  .vak-hero .raster{min-height:0}
  .vak-hero-tekst{grid-column:2 / 14;padding-bottom:48px}
  .vak-beeld{grid-column:vol-start / vol-eind;grid-row:2;aspect-ratio:3/2}
  .vak-beeld::after{background:linear-gradient(180deg,var(--inkt),rgba(21,23,26,0) 25%)}
  .vp-kop,.vp-lijst,.vv-kop,.vb-kop,.vb-lijst,.pk-kop,.pk-opties,.pk-meer,.cta-in,.contact-info,.formulier,.tekst,.pagina-kop h1,.pagina-kop p{grid-column:2 / 14}
  .vp-lijst,.vb-lijst,.pk-opties,.formulier{margin-top:44px}
  .vv-podium .browser{display:none}
  .vv-telefoon{display:block}
  .vv-podium .voorbeeldtag{top:-30px;left:50%;transform:translateX(-50%);white-space:nowrap}
}
@media (max-width:640px){
  .pk-opties,.twee-velden{grid-template-columns:1fr}
  .vp-lijst li{grid-template-columns:48px 1fr}
  .vp-lijst li::before{font-size:1.8rem}
  .vak-hero h1{font-size:clamp(2.8rem,13vw,4rem)}
  .vv-telefoon{width:260px}
}
.hoofdmenu a[aria-current="page"]::after{transform:scaleX(1)}
@media (max-width:640px){.cta-in .knop{font-size:1.05rem;padding:0 14px}}

/* ================= VAKKENMENU (uitklapmenu in de kop) ================= */
.menu-vakken{position:relative}
.menu-vakken-knop{display:none;align-items:center;gap:6px;padding:10px 12px;background:none;border:0;color:var(--op-donker);font:inherit;font-weight:500;font-size:.98rem;cursor:pointer;border-radius:var(--r)}
.menu-vakken-knop svg{width:12px;height:12px;transition:transform .2s var(--ease)}
.menu-vakken-knop[aria-expanded="true"] svg{transform:rotate(180deg)}
.menu-vakken-knop:hover,.menu-vakken-knop[aria-expanded="true"]{background:var(--inkt-3)}
.menu-vakken.actief > .menu-vakken-knop,.menu-vakken.actief > .menu-vakken-link{color:#fff;box-shadow:inset 0 -2px 0 var(--oranje)}
.js-menu .menu-vakken-link{display:none}
.js-menu .menu-vakken-knop{display:inline-flex}
.vakkenmenu{display:none}
.menu-vakken.open .vakkenmenu{display:block}
@media (min-width:961px){
  .site-kop-in{position:relative}
  .menu-vakken{position:static}
  .vakkenmenu{position:absolute;top:calc(100% - 4px);right:0;width:min(600px,calc(100vw - 32px));background:var(--wit);color:var(--tekst);border-radius:6px;box-shadow:0 24px 50px -16px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.08);padding:10px;z-index:60}
  .hoofdmenu .vm-lijst{display:grid;grid-template-columns:1fr 1fr;gap:2px}
}

.hoofdmenu .vm-lijst{display:grid;gap:2px;flex-direction:column;align-items:stretch}
.hoofdmenu .vm-lijst a{display:grid;gap:2px;padding:12px 14px;border-radius:4px;color:var(--tekst)}
.hoofdmenu .vm-lijst a::after{display:none}
.vm-lijst b{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:1.3rem;line-height:1;letter-spacing:.01em}
.vm-lijst small{font-size:.85rem;color:var(--tekst-zacht);font-weight:400}
.hoofdmenu .vm-lijst a:hover,.hoofdmenu .vm-lijst a:focus-visible,.hoofdmenu .vm-lijst a[aria-current]{background:var(--papier)}
/* Focusrand binnen het vak, zodat een buurvak met hover hem niet bedekt */
.hoofdmenu .vm-lijst a:focus-visible{outline:3px solid var(--oranje);outline-offset:-3px;border-radius:4px}
.hoofdmenu .vm-lijst a[aria-current] b{color:var(--oranje-tekst)}
.vm-onder{display:flex;justify-content:space-between;gap:8px;margin-top:8px;padding:12px 14px 6px;border-top:1px solid var(--lijn-fijn)}
.hoofdmenu .vm-onder a{padding:4px 0;font-size:.92rem;font-weight:600;color:var(--tekst);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--lijn)}
.hoofdmenu .vm-onder a::after{display:none}
.hoofdmenu .vm-onder a:hover{text-decoration-color:var(--oranje)}
@media (max-width:960px){
  .js-menu .menu-vakken-knop{display:flex;width:100%;justify-content:space-between;padding:14px 0;font-size:1.1rem;border-bottom:1px solid var(--inkt-lijn);border-radius:0}
  .menu-vakken-knop:hover,.menu-vakken-knop[aria-expanded="true"]{background:none}
  .menu-vakken.actief > .menu-vakken-knop,.menu-vakken.actief > .menu-vakken-link{box-shadow:none}
  .vakkenmenu{padding:6px 0 10px 14px;border-left:2px solid var(--oranje);margin:10px 0 6px}
  .hoofdmenu .vm-lijst a{padding:10px 0;border-bottom:0;color:var(--op-donker)}
  .vm-lijst b{font-size:1.15rem}
  .vm-lijst small{color:var(--op-donker-zacht)}
  .hoofdmenu .vm-lijst a:hover,.hoofdmenu .vm-lijst a[aria-current]{background:none}
  .hoofdmenu .vm-lijst a[aria-current] b{color:var(--oranje)}
  .vm-onder{flex-direction:column;border-top:1px solid var(--inkt-lijn);padding:10px 0 0}
  .hoofdmenu .vm-onder a{color:var(--op-donker);border-bottom:0;padding:8px 0;font-size:1rem;text-decoration-color:var(--inkt-lijn)}
}

/* ================= VAKPAGINA: live voorbeeldsite in kaders ================= */
.kruimel{margin-bottom:22px;font-size:.88rem;color:var(--op-donker-zacht)}
.kruimel ol{display:flex;flex-wrap:wrap;gap:4px 0}
.kruimel li+li::before{content:"›";margin:0 9px;color:var(--op-donker-zacht)}
.kruimel a{color:var(--op-donker);text-underline-offset:3px;text-decoration-color:var(--inkt-lijn)}
.kruimel a:hover{text-decoration-color:var(--oranje)}
.kruimel [aria-current]{color:var(--op-donker-zacht)}
.vv-kop .knop{margin-top:26px}
.vv-podium{display:block;padding:0 120px 40px 0}
.vv-podium .browser{height:auto}
.vv-venster{--schaal:.75;position:relative;overflow:hidden;background:#fff}
.vv-venster iframe{display:block;border:0;width:1280px;height:calc(640px / var(--schaal));transform:scale(var(--schaal));transform-origin:0 0;background:#fff}
.vv-browser .vv-venster{height:640px}
.vv-telefoon{display:block;position:absolute;right:0;bottom:0;width:270px;z-index:3}
.vv-venster--mobiel{--schaal:.645;height:auto;aspect-ratio:390/780;border-radius:26px}
.vv-venster--mobiel iframe{width:390px;height:780px}
.vv-waarom{grid-column:2 / 14;margin-top:64px;padding-top:36px;border-top:1px solid var(--lijn)}
.vv-waarom > h3{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:var(--t-m);line-height:1}
.vv-waarom ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--goot);margin-top:24px;counter-reset:w}
.vv-waarom li{counter-increment:w;padding:22px 22px 24px;background:var(--wit);border-radius:var(--r)}
.vv-waarom li::before{content:counter(w,decimal-leading-zero);display:block;font-family:var(--f-mono);font-size:.75rem;color:var(--oranje-tekst);margin-bottom:12px}
.vv-waarom li h3{font-weight:700;font-size:1.12rem;line-height:1.3}
.vv-waarom li p{margin-top:8px;color:var(--tekst-zacht);font-size:.97rem}
@media (max-width:960px){
  .vv-podium{padding:0 0 0 0}
  .vv-telefoon{width:220px;right:-8px;bottom:-30px}
  .vv-browser .vv-venster{height:520px}
  .vv-venster iframe{height:calc(520px / var(--schaal))}
  .vv-venster--mobiel iframe{height:780px}
  .vv-waarom ol{grid-template-columns:1fr}
  .vv-waarom{margin-top:72px}
}
@media (max-width:640px){
  .vv-podium .browser{display:none}
  .vv-telefoon{position:relative;right:auto;bottom:auto;width:280px;margin:0 auto}
}

/* ================= VAKKEN (overzicht) ================= */
.pagina-kop .kruimel{grid-column:2 / 14}
.vk-lijst{background:var(--papier);padding:clamp(64px,8vw,112px) 0}
.vk-kaarten{grid-column:2 / 14;display:grid;gap:clamp(40px,5vw,72px)}
.vk-kaart{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center}
.vk-kaart:nth-child(even) .vk-beeld{order:2}
.vk-beeld{display:block;border-radius:8px;overflow:hidden;box-shadow:0 30px 60px -28px rgba(21,23,26,.45),0 0 0 1px rgba(21,23,26,.1);background:#fff}
.vk-beeld img{width:100%;height:auto;transition:transform .5s var(--ease)}
.vk-beeld:hover img{transform:scale(1.02)}
.vk-ook{font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--oranje-tekst)}
.vk-tekst h2{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:var(--t-l);line-height:.9;margin-top:12px}
.vk-tekst h2 a{text-decoration:none}
.vk-tekst h2 a:hover{text-decoration:underline;text-decoration-color:var(--oranje);text-decoration-thickness:3px}
.vk-tekst > p:not(.vk-ook):not(.vk-links){margin-top:16px;color:var(--tekst-zacht);max-width:30em}
.vk-links{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:26px}
.vk-vb{font-weight:600;color:var(--inkt);text-underline-offset:3px}
.vk-ander{background:var(--inkt);color:var(--op-donker);padding:clamp(80px,10vw,144px) 0}
.av-kop{grid-column:2 / 8}
.av-kop h2{font-size:var(--t-xl)}
.av-kop p{margin-top:24px;color:var(--op-donker-zacht);font-size:1.1rem;max-width:32em}
.av-kop .hero-knoppen{margin-top:32px;display:flex;flex-wrap:wrap;gap:12px}
.av-vakken{grid-column:9 / 14;align-self:center}
.av-vakken .mono{color:var(--op-donker-zacht)}
.av-vakken ul{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.av-vakken li{padding:8px 13px;border:1px solid var(--inkt-lijn);border-radius:999px;font-size:.95rem}
.av-noot{margin-top:20px;color:var(--op-donker-zacht);font-size:.95rem}
@media (max-width:960px){
  .vk-kaart{grid-template-columns:1fr}
  .vk-kaart:nth-child(even) .vk-beeld{order:0}
  .av-kop,.av-vakken{grid-column:2 / 14}
  .av-vakken{margin-top:48px}
}

/* ================= PRIJZEN (pagina) ================= */
.pz .pl-kop h2{font-size:var(--t-xl);line-height:.88}
.pz-sub{margin-top:18px;color:var(--tekst-zacht);max-width:32em}
.js-menu .pz-sub{max-width:32em}
html:not(.js-menu) .pz .tuimel{display:none}
html:not(.js-menu) .pz .alleen-b{border-top:1px dashed var(--lijn);padding-top:8px}
.pl-meer{grid-column:2 / 14;display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:40px}
.pl-meer span{color:var(--tekst-zacht);font-size:.95rem;max-width:34em}
.pz-reken{background:var(--beton);padding:clamp(80px,10vw,136px) 0}
.rk-kop{grid-column:2 / 10}
.rk-kop p{margin-top:16px;color:var(--tekst-zacht);max-width:38em}
.rk-noscript{font-size:.9rem}
.rk-bonnen{grid-column:2 / 14;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--goot);margin-top:44px}
.rk-bon{background:var(--wit);padding:22px 22px 20px;border-top:var(--zwaar) solid var(--inkt);box-shadow:0 14px 30px -20px rgba(0,0,0,.35)}
.rk-bon h3{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:1.35rem;line-height:1}
.rk-bon dl{margin-top:16px;display:grid;gap:12px}
.rk-bon dt{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.04em;color:var(--tekst-zacht)}
.rk-bon dd{font-family:var(--f-display);font-weight:900;font-size:2.4rem;line-height:1;font-variant-numeric:tabular-nums}
.rk-uitkomst{margin-top:16px;padding-top:12px;border-top:1px dashed var(--lijn);font-weight:600;font-size:.92rem}
.rk-uitkomst:empty{display:none}
.rk-advies{grid-column:2 / 14;display:grid;grid-template-columns:1fr 1fr;gap:var(--goot);margin-top:40px}
.rk-advies p{color:var(--tekst-zacht);max-width:34em}
.rk-advies b{color:var(--inkt)}
@media (max-width:1100px){.rk-bonnen{grid-template-columns:1fr 1fr}}
@media (max-width:960px){.rk-kop{grid-column:2 / 14}.rk-advies{grid-template-columns:1fr}}
@media (max-width:640px){.rk-bonnen{grid-template-columns:1fr}}

/* home: voorbeeldsites live in de kaders */
.uv-podium .browser{display:flex;flex-direction:column}
.uv-venster{flex:1;height:578px}
.uv-venster iframe{height:calc(578px / var(--schaal))}
.uv-telefoon .vv-venster--mobiel{border-radius:26px}
.uv-meer #uv-open{font-weight:600}
.bd-meer{grid-column:2 / 14;margin-top:40px;color:var(--op-donker-zacht)}
.bd-meer a{color:inherit;font-weight:600;text-underline-offset:3px}
@media (max-width:960px){.uv-venster{height:518px}.uv-venster iframe{height:calc(518px / var(--schaal))}}
.uv-podium{grid-column:7 / 14}
.uv-podium .browser{margin-right:0;border-radius:10px}
.uv-telefoon{right:-28px}
@media (max-width:960px){.uv-podium{grid-column:2 / 14}}

/* ================= ROBUUSTE KOPPEN =================
   Grote koppen schalen mee met hun eigen kolom (container query units, cqi), niet met het scherm.
   Factor: het langste woord (bijv. INSTALLATEURS, STORINGSNUMMER: 13–14 tekens à ~0,5em) moet in de kolom passen.
   Vangnet: overflow-wrap en min-width:0 op grid-items. Zonder container-query-ondersteuning: vw-waarden. */
.hero-tekst,.storing-kop,.uv-links,.doos-kop,.bd-kop,.pl-kop,.pl-regel > div,.pl-bedrag,.gbp-tekst,.accessoires > div,
.zndr-tekst,.vr-kop,.wb-tekst,.vak-hero-tekst,.vp-kop,.vv-kop,.vb-kop,.pk,.cta-in,.pagina-kop > .raster,.vk-tekst,.av-kop,
.rk-kop,.rk-bon,.vv-waarom,.contact-info,.tekst{container-type:inline-size}
.raster > *{min-width:0}
.display,.kop-l,h1,h2,h3,h4{overflow-wrap:break-word}
.pl-regel h4{font-size:clamp(1.7rem,13cqi,3.4rem)}
.pl-bedrag .groot{font-size:clamp(3rem,30cqi,7.4rem)}
.gbp-tekst h3{font-size:var(--t-xl)}
.pk-bedrag{font-size:clamp(2.6rem,24cqi,4.6rem)}
.rk-bon dd{font-size:clamp(1.8rem,16cqi,2.4rem)}
.prijsvlag .bedrag{font-size:clamp(3rem,6.5vw,6rem)}
@media (max-width:640px){
  .hero h1{font-size:clamp(2.6rem,17cqi,5.4rem)}
  .doos-kop h2{font-size:clamp(2.6rem,17cqi,6rem)}
  .vak-hero h1{font-size:clamp(2.2rem,12.5cqi,4rem)}
}
@supports not (width:1cqi){
  :root{--t-mega:clamp(2.6rem,9vw,11.25rem);--t-xl:clamp(2.1rem,5.5vw,6.6rem);--t-l:clamp(1.8rem,3.6vw,3.9rem);--t-m:clamp(1.35rem,2vw,1.9rem)}
}
.form-uitleg{font-size:.9rem;color:var(--tekst-zacht)}
.form-samenvatting{padding:12px 14px;border-left:3px solid var(--fout);background:#fbeceb;color:var(--fout);font-weight:600}
.form-samenvatting[hidden]{display:none}
.form-samenvatting:focus,.form-bevestiging:focus{outline:none}
.formulier[hidden]{display:none}
.form-bevestiging{gap:10px;align-content:start;padding:clamp(20px,3.4vw,40px);background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r)}
.form-bevestiging__titel{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:var(--t-m);line-height:1}
.form-bevestiging__tekst{color:var(--tekst-zacht)}
html{scroll-padding-top:96px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:0s !important;animation-duration:0s !important}}
.hoofdmenu a.knop-oranje{color:var(--inkt)}
@media (max-width:640px){
  .pl-regel{grid-template-columns:minmax(0,1fr);gap:10px}
  .pl-regel .art,.pl-regel .termijn,.pl-regel .pl-bedrag{grid-column:1;grid-row:auto}
  .pl-bedrag{text-align:left}
}
/* reveal zonder doorzichtigheid: tekst is altijd leesbaar (ook voor contrastmetingen en trage apparaten) */
.js-beweging .kom-op{opacity:1}
.kaartmock .knopje-stil{color:#6b6e72}
@media (max-width:640px){.uv-telefoon,.vv-telefoon{width:min(280px,100%)}}

/* wachtlijst */
@media (min-width:961px){
  .contact-info--vast{position:sticky;top:110px}
}
.contact-info p+h2{margin-top:36px}
.formulier--wachtlijst{gap:20px;padding:clamp(20px,3.4vw,40px);background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r)}
.formulier--wachtlijst input:not(.keuze-tegel__invoer),.formulier--wachtlijst textarea{background:var(--papier)}
.formulier--wachtlijst textarea{min-height:110px}
.formulier .veld-r[hidden]{display:none}
.form-kop{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:1.6rem;line-height:1}
.form-kop--verder{margin-top:8px;padding-top:26px;border-top:1px solid var(--lijn)}
.keuze-groep{margin:0;padding:0;border:0;min-width:0}
.keuze-groep__titel{padding:0;margin-bottom:8px;font-weight:600}
.keuze-groep__tegels{display:flex;flex-wrap:wrap;gap:8px}
.keuze-groep__tegels>.keuze-tegel{flex:1 1 0;min-width:max-content}
.formulier .keuze-tegel{position:relative;display:grid;font-weight:400;font-size:1rem;cursor:pointer}
.formulier .keuze-tegel__invoer{position:absolute;inset:0;width:100%;height:100%;min-height:0;margin:0;padding:0;opacity:0;cursor:pointer}
.keuze-tegel__vak{position:relative;display:block;padding:12px 27px 12px 12px;border:1.5px solid #85837b;border-radius:var(--r);background:var(--papier);transition:background-color .15s,border-color .15s}
.keuze-tegel__naam{display:block;font-weight:600;line-height:1.25}
.keuze-tegel__uitleg{display:block;margin-top:3px;font-size:.88rem;line-height:1.35;color:var(--tekst-zacht)}
.keuze-tegel:hover .keuze-tegel__vak{border-color:var(--inkt)}
.keuze-tegel__invoer:checked+.keuze-tegel__vak{background:var(--inkt);border-color:var(--inkt);color:var(--op-donker)}
.keuze-tegel__invoer:checked+.keuze-tegel__vak .keuze-tegel__uitleg{color:var(--op-donker-zacht)}
.keuze-tegel__invoer:checked+.keuze-tegel__vak::after{content:"";position:absolute;top:13px;right:11px;width:7px;height:13px;border:solid var(--oranje);border-width:0 3px 3px 0;transform:rotate(45deg)}
.keuze-tegel__invoer:focus-visible+.keuze-tegel__vak{outline:3px solid var(--oranje);outline-offset:2px}
.keuze-tegel--vink .keuze-tegel__vak{padding:14px 16px 14px 50px}
.keuze-tegel--vink .keuze-tegel__vak::before{content:"";position:absolute;top:14px;left:14px;width:22px;height:22px;border:2px solid currentColor;border-radius:var(--r);background:transparent}
.keuze-tegel--vink .keuze-tegel__invoer:checked+.keuze-tegel__vak::after{top:17px;right:auto;left:21px}
@media (max-width:640px){
  .keuze-groep__tegels>.keuze-tegel{flex-basis:100%}
  .keuze-groep__tegels--twee>.keuze-tegel{flex-basis:0}
}