/* ==========================================================================
   Vloertech — site.css
   Huisstijl: VloerTech Brand Guide v1.1 (Studio Sterk Staal)
   ========================================================================== */

/* ---------- Fonts (zelf gehost, SIL Open Font License) ---------- */
@font-face{font-family:"Libre Caslon Condensed";font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/libre-caslon-condensed-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Libre Caslon Condensed";font-style:normal;font-weight:500;font-display:swap;
  src:url(/assets/fonts/libre-caslon-condensed-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Libre Caslon Condensed";font-style:italic;font-weight:400;font-display:swap;
  src:url(/assets/fonts/libre-caslon-condensed-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"Stack Sans Text";font-style:normal;font-weight:200 700;font-display:swap;
  src:url(/assets/fonts/stack-sans-text-latin-wght-normal.woff2) format("woff2-variations"),
      url(/assets/fonts/stack-sans-text-latin-wght-normal.woff2) format("woff2")}

/* ---------- Tokens ---------- */
:root{
  /* Primair */
  --zwart:#141211;        /* Diep Rijk Zwart */
  --kwarts:#4F4540;       /* Warm Kwartsgrijs */
  /* Accent / secundair */
  --goud:#FFF5BF;         /* Zacht goud — alleen accent */
  --wit:#FFFFFF;
  /* Tinten uit de brand guide */
  --zwart-80:#434140; --zwart-60:#727070; --zwart-40:#A1A09F;
  --kwarts-80:#726A66; --kwarts-60:#958F8C; --kwarts-40:#B8B4B2; --kwarts-20:#DBD9D8;
  --vlak:#EDEDED;         /* vlakgrijs uit de brand guide */

  --font-kop:"Libre Caslon Condensed", Georgia, "Times New Roman", serif;
  --font-tekst:"Stack Sans Text", Arial, Helvetica, sans-serif;

  --tekst:var(--zwart);
  --tekst-zacht:var(--kwarts);
  --lijn:var(--kwarts-20);

  --max:1240px;
  --gutter:clamp(16px, 4vw, 40px);
  --sectie:clamp(64px, 9vw, 128px);
  --radius:2px;
  --header-h:72px;
}

/* ---------- Basis ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 16px)}
body{margin:0;background:var(--wit);color:var(--tekst);font-family:var(--font-tekst);
  font-size:1.0625rem;line-height:1.65;font-weight:400;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--zwart);outline-offset:3px}
.donker :focus-visible,.site-footer :focus-visible{outline-color:var(--goud)}
p{margin:0 0 1em}
ul,ol{margin:0 0 1em;padding-left:1.2em}
li{margin-bottom:.35em}
strong{font-weight:600}
h1,h2,h3,h4{font-family:var(--font-kop);font-weight:400;line-height:1.05;margin:0 0 .5em;letter-spacing:-.005em;text-wrap:balance}
h1{font-size:clamp(2.6rem,6.2vw,4.9rem)}
h2{font-size:clamp(2.05rem,4.2vw,3.25rem)}
h3{font-size:clamp(1.45rem,2.2vw,1.8rem);font-weight:500;line-height:1.15}
h4{font-size:1.25rem;font-weight:500}
.thuis{font-style:italic}
.lead{font-size:clamp(1.125rem,1.6vw,1.3rem);line-height:1.55;max-width:38em}
.zacht{color:var(--tekst-zacht)}
.klein{font-size:.9375rem}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--zwart);color:var(--wit);padding:10px 14px}
.skip:focus{top:12px}
[hidden]{display:none!important}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.smal{max-width:760px}
.sectie{padding:var(--sectie) 0}
.sectie--vlak{background:var(--vlak)}
.donker{background:var(--zwart);color:var(--wit)}
.donker .zacht{color:var(--kwarts-40)}

/* Sectiekop zoals in de brand guide: titel met haarlijn eronder */
.kop{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;border-bottom:1px solid var(--lijn);
  padding-bottom:18px;margin-bottom:clamp(32px,4vw,56px)}
.kop h2{margin:0}
.kop p{margin:0;max-width:32em;color:var(--tekst-zacht)}
.donker .kop{border-color:var(--zwart-80)}
.donker .kop p{color:var(--kwarts-40)}

/* ---------- Knoppen ---------- */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:48px;padding:.75em 1.35em;
  border:1px solid var(--zwart);border-radius:var(--radius);background:var(--zwart);color:var(--wit);
  font:600 1rem/1.2 var(--font-tekst);text-decoration:none;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.knop:hover{background:var(--kwarts);border-color:var(--kwarts)}
.knop--rand{background:transparent;color:var(--zwart)}
.knop--rand:hover{background:var(--zwart);color:var(--wit)}
.donker .knop,.knop--goud{background:var(--goud);border-color:var(--goud);color:var(--zwart)}
.donker .knop:hover,.knop--goud:hover{background:var(--wit);border-color:var(--wit)}
.donker .knop--rand{background:transparent;border-color:var(--kwarts-60);color:var(--wit)}
.donker .knop--rand:hover{border-color:var(--goud);color:var(--goud);background:transparent}
.knoppen{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.knop svg{width:18px;height:18px;flex:none}
.tekstlink{font-weight:600;text-decoration:underline}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:var(--wit);border-bottom:1px solid var(--lijn)}
.site-header .wrap{display:flex;align-items:center;gap:24px;height:var(--header-h)}
.logo{display:block;flex:none;line-height:0}
.logo img{width:168px;height:auto}
.hoofdnav{margin-left:auto}
.hoofdnav>ul{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0}
.hoofdnav li{margin:0;position:relative}
.hoofdnav a,.hoofdnav button.nav-sub{display:block;padding:10px 12px;font:500 .975rem/1.2 var(--font-tekst);
  color:var(--zwart);text-decoration:none;background:none;border:0;cursor:pointer}
.hoofdnav a:hover,.hoofdnav button.nav-sub:hover{text-decoration:underline}
.hoofdnav a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:2px}
.nav-sub::after{content:"";display:inline-block;width:7px;height:7px;margin-left:8px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:translateY(-3px) rotate(45deg)}
.submenu{position:absolute;left:0;top:100%;min-width:290px;background:var(--wit);border:1px solid var(--lijn);
  padding:10px 0;list-style:none;margin:0;display:none;box-shadow:0 18px 40px -24px rgba(20,18,17,.45)}
.submenu a{padding:9px 20px;font-weight:400}
.submenu .sub-alle{border-top:1px solid var(--lijn);margin-top:6px;padding-top:6px}
.submenu .sub-alle a{font-weight:600}
.heeft-sub:hover>.submenu,.heeft-sub:focus-within>.submenu,.heeft-sub.open>.submenu{display:block}
.header-tel{font-weight:600;text-decoration:none;white-space:nowrap;font-size:.975rem}
.header-tel:hover{text-decoration:underline}
.header-cta{min-height:44px;padding:.6em 1.1em}
.menuknop{display:none;margin-left:auto;background:none;border:1px solid var(--zwart);border-radius:var(--radius);
  min-height:44px;padding:0 14px;font:600 .95rem var(--font-tekst);color:var(--zwart);cursor:pointer}

@media (max-width:1080px){
  .header-tel{display:none}
}
@media (max-width:900px){
  :root{--header-h:64px}
  .logo img{width:146px}
  .menuknop{display:inline-flex;align-items:center}
  .header-cta{display:none}
  .hoofdnav{position:fixed;inset:var(--header-h) 0 0 0;background:var(--wit);overflow-y:auto;padding:12px var(--gutter) 120px;
    display:none;margin:0}
  .hoofdnav.open{display:block}
  .hoofdnav>ul{flex-direction:column;align-items:stretch;gap:0}
  .hoofdnav>ul>li{border-bottom:1px solid var(--lijn)}
  .hoofdnav a,.hoofdnav button.nav-sub{padding:16px 0;font-size:1.15rem;width:100%;text-align:left}
  .submenu{position:static;display:none;border:0;box-shadow:none;padding:0 0 10px 14px;min-width:0}
  .heeft-sub:hover>.submenu{display:none}
  .heeft-sub.open>.submenu,.heeft-sub:focus-within>.submenu{display:block}
  .submenu a{padding:10px 0;font-size:1.02rem}
  .no-js .hoofdnav{display:block;position:static;padding:0}
}

/* ---------- Kruimelpad ---------- */
.kruimel{font-size:.9rem;color:var(--tekst-zacht);margin:0 0 22px}
.kruimel ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;padding:0;margin:0}
.kruimel li{margin:0}
.kruimel li+li::before{content:"/";margin-right:6px;color:var(--kwarts-40)}
.kruimel a{text-decoration:none}
.kruimel a:hover{text-decoration:underline}

/* ---------- Home: hero met scrollverloop ---------- */
.hero{position:relative;background:var(--zwart);color:var(--wit)}
.hero__binnen{min-height:calc(100svh - var(--header-h));display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(32px,6vw,96px);align-items:center;padding-top:clamp(40px,6vw,72px);padding-bottom:clamp(40px,6vw,72px)}
.hero h1{font-size:clamp(2.7rem,6.4vw,5.4rem);line-height:.98;margin-bottom:.3em}
.hero__tagline{font-family:var(--font-kop);font-size:clamp(1.6rem,2.8vw,2.35rem);line-height:1.1;color:var(--goud);margin:0 0 28px}
.hero__tekst p{max-width:33em;color:var(--kwarts-20)}
.hero__feiten{display:flex;flex-wrap:wrap;gap:8px 22px;margin:28px 0 0;padding:0;list-style:none;font-size:.95rem;color:var(--kwarts-40)}
.hero__feiten li{margin:0;display:flex;align-items:center;gap:8px}
.hero__feiten li::before{content:"";width:6px;height:6px;background:var(--goud);transform:rotate(45deg)}

.verloop{position:relative;justify-self:end;width:min(100%,430px)}
.verloop__kader{position:relative;aspect-ratio:9/15.2;overflow:hidden;background:var(--zwart-80);border-radius:var(--radius)}
.verloop__kader img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.verloop__laag{will-change:clip-path,opacity}
.verloop__stappen{list-style:none;padding:0;margin:18px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;counter-reset:st}
.verloop__stappen li{margin:0;padding-top:10px;border-top:2px solid var(--zwart-80);font-size:.9rem;color:var(--kwarts-40);
  transition:border-color .3s,color .3s;counter-increment:st}
.verloop__stappen li::before{content:counter(st);display:block;font-family:var(--font-kop);font-size:1.35rem;line-height:1;margin-bottom:4px}
.verloop__stappen li.actief{border-color:var(--goud);color:var(--wit)}
.verloop__bron{margin:12px 0 0;font-size:.875rem;color:var(--kwarts-40)}
.verloop__bron a{color:var(--wit)}

/* Scrollgestuurd: alleen met JS en zonder 'minder beweging' */
.js .hero--scroll{height:230vh}
.js .hero--scroll .hero__plak{position:sticky;top:var(--header-h)}
@media (max-width:900px){
  .hero__binnen{grid-template-columns:1fr;min-height:0;gap:28px;padding-top:36px}
  .verloop{justify-self:stretch;width:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:16px;align-items:end}
  .verloop__kader{aspect-ratio:9/13}
  .verloop__stappen{grid-template-columns:1fr;margin:0}
  .verloop__bron{grid-column:1/-1;margin:0}
  .js .hero--scroll{height:auto}
  .js .hero--scroll .hero__plak{position:static}
}
@media (prefers-reduced-motion:reduce){
  .js .hero--scroll{height:auto}
  .js .hero--scroll .hero__plak{position:static}
}

/* ---------- Bewijsregel ---------- */
.bewijs{border-bottom:1px solid var(--lijn)}
.bewijs ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr)}
.bewijs li{margin:0;padding:28px 24px 28px 0;border-right:1px solid var(--lijn)}
.bewijs li+li{padding-left:24px}
.bewijs li:last-child{border-right:0}
.bewijs strong{display:block;font-family:var(--font-kop);font-weight:400;font-size:1.65rem;line-height:1.1;margin-bottom:4px}
.bewijs span{color:var(--tekst-zacht);font-size:.95rem}
@media (max-width:900px){
  .bewijs ul{grid-template-columns:1fr 1fr}
  .bewijs li{padding:20px 12px 20px 0}
  .bewijs li+li{padding-left:0}
  .bewijs li:nth-child(2n){padding-left:16px;border-right:0}
  .bewijs li:nth-child(-n+2){border-bottom:1px solid var(--lijn)}
}

/* ---------- Herkenbare problemen ---------- */
.problemen{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,96px);align-items:start}
.problemen ul{list-style:none;padding:0;margin:0}
.problemen li{display:grid;grid-template-columns:minmax(0,1fr);padding:20px 0;border-top:1px solid var(--lijn);margin:0}
.problemen li:last-child{border-bottom:1px solid var(--lijn)}
.problemen li strong{font-family:var(--font-kop);font-weight:500;font-size:1.4rem;line-height:1.2;margin-bottom:4px}
.problemen li span{color:var(--tekst-zacht)}
@media (max-width:900px){.problemen{grid-template-columns:1fr}}

/* ---------- Diensten-index (home) ---------- */
.dienstindex{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,5vw,80px);align-items:start}
.dienstindex__beeld{position:sticky;top:calc(var(--header-h) + 32px);aspect-ratio:4/5;overflow:hidden;background:var(--vlak);border-radius:var(--radius)}
.dienstindex__beeld img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s}
.dienstindex__beeld img.zichtbaar{opacity:1}
.dienstlijst{list-style:none;margin:0;padding:0}
.dienstlijst li{margin:0;border-top:1px solid var(--lijn)}
.dienstlijst li:last-child{border-bottom:1px solid var(--lijn)}
.dienstlijst a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 20px;padding:22px 0;text-decoration:none}
.dienstlijst h3{margin:0;font-size:clamp(1.6rem,2.6vw,2.15rem);font-weight:400}
.dienstlijst p{grid-column:1;margin:0;color:var(--tekst-zacht);max-width:34em}
.dienstlijst .pijl{grid-row:1/3;grid-column:2;align-self:center;width:44px;height:44px;border:1px solid var(--lijn);
  border-radius:50%;display:grid;place-items:center;transition:background .15s,border-color .15s}
.dienstlijst .pijl svg{width:16px;height:16px}
.dienstlijst a:hover h3,.dienstlijst a:focus-visible h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.15em}
.dienstlijst a:hover .pijl,.dienstlijst a:focus-visible .pijl{background:var(--zwart);border-color:var(--zwart);color:var(--wit)}
.dienstlijst .ook{display:block;margin-top:6px;font-size:.9rem;color:var(--kwarts-80)}
@media (max-width:900px){
  .dienstindex{grid-template-columns:1fr}
  .dienstindex__beeld{display:none}
}

/* ---------- Werkwijze (echte volgorde) ---------- */
.stappen{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(32px,5vw,80px);counter-reset:stap}
.stappen li{counter-increment:stap;display:grid;grid-template-columns:56px minmax(0,1fr);gap:4px 16px;padding:22px 0;border-top:1px solid var(--lijn);margin:0}
.stappen li::before{content:counter(stap);grid-row:1/3;font-family:var(--font-kop);font-size:2.4rem;line-height:.9;color:var(--kwarts)}
.stappen strong{font-weight:600}
.stappen span{color:var(--tekst-zacht);grid-column:2}
.donker .stappen li{border-color:var(--zwart-80)}
.donker .stappen li::before{color:var(--goud)}
.donker .stappen span{color:var(--kwarts-40)}
@media (max-width:760px){.stappen{grid-template-columns:1fr}}

/* ---------- Projectkaarten ---------- */
.projecten-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.projecten-raster--home{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,1fr);align-items:start}
.projecten-raster--home .projectkaart:first-child .projectkaart__beeld{aspect-ratio:4/5.4}
.projectkaart{display:block;text-decoration:none}
.projectkaart__beeld{aspect-ratio:4/5;overflow:hidden;background:var(--vlak);border-radius:var(--radius);margin-bottom:14px}
.projectkaart__beeld img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.projectkaart:hover .projectkaart__beeld img{transform:scale(1.03)}
.projectkaart h3{font-size:1.5rem;margin:0 0 2px}
.projectkaart p{margin:0;color:var(--tekst-zacht);font-size:.95rem}
.projectkaart:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.15em}
@media (max-width:900px){
  .projecten-raster,.projecten-raster--home{grid-template-columns:1fr 1fr}
  .projecten-raster--home .projectkaart:first-child{grid-column:1/-1}
  .projecten-raster--home .projectkaart:first-child .projectkaart__beeld{aspect-ratio:4/3}
}
@media (max-width:560px){.projecten-raster,.projecten-raster--home{grid-template-columns:1fr}}

/* ---------- Eerlijke prijs / Sander ---------- */
.verhaal{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,6vw,96px);align-items:center}
.verhaal figure{margin:0}
.verhaal img{width:100%;border-radius:var(--radius)}
.verhaal figcaption{font-size:.9rem;color:var(--tekst-zacht);margin-top:10px}
.redenen{list-style:none;padding:0;margin:24px 0 0}
.redenen li{padding:14px 0 14px 28px;border-top:1px solid var(--lijn);position:relative;margin:0}
.redenen li::before{content:"";position:absolute;left:4px;top:1.35em;width:8px;height:8px;background:var(--kwarts);transform:rotate(45deg)}
@media (max-width:900px){.verhaal{grid-template-columns:1fr}}

/* ---------- Werkgebied ---------- */
.gebied{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:start}
.plaatsen{columns:2;column-gap:32px;list-style:none;padding:0;margin:0}
.plaatsen li{break-inside:avoid;padding:8px 0;border-bottom:1px solid var(--lijn);margin:0}
.plaatsen a{font-weight:600}
@media (max-width:760px){.gebied{grid-template-columns:1fr}}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--lijn)}
.faq details{border-bottom:1px solid var(--lijn)}
.faq summary{list-style:none;cursor:pointer;padding:20px 44px 20px 0;position:relative;font-family:var(--font-kop);
  font-size:1.35rem;line-height:1.25;font-weight:500}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:50%;width:12px;height:12px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:translateY(-75%) rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:translateY(-25%) rotate(-135deg)}
.faq .antwoord{padding:0 0 22px;max-width:44em;color:var(--zwart-80)}

/* ---------- CTA-band ---------- */
.ctaband{padding:clamp(56px,8vw,104px) 0}
.ctaband__raster{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(32px,6vw,96px);align-items:end}
.ctaband h2{margin-bottom:.35em}
.contactregels{list-style:none;padding:0;margin:0}
.contactregels li{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid var(--zwart-80);margin:0}
.contactregels li span:first-child{color:var(--kwarts-40)}
.contactregels a{color:var(--wit);font-weight:600}
@media (max-width:900px){.ctaband__raster{grid-template-columns:1fr}}

/* ---------- Pagina-hero (subpagina's) ---------- */
.paginakop{padding:clamp(32px,5vw,64px) 0 clamp(40px,6vw,80px);border-bottom:1px solid var(--lijn)}
.paginakop__raster{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(32px,6vw,96px);align-items:end}
.paginakop h1{font-size:clamp(2.5rem,5.6vw,4.4rem)}
.paginakop figure{margin:0}
.paginakop figure img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius)}
.paginakop figcaption{font-size:.875rem;color:var(--tekst-zacht);margin-top:8px}
.paginakop--zonder .paginakop__raster{grid-template-columns:minmax(0,1fr)}
.kenmerken{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:24px 0 0}
.kenmerken li{margin:0;padding:6px 12px;border:1px solid var(--lijn);border-radius:999px;font-size:.9rem;color:var(--zwart-80)}
@media (max-width:900px){
  .paginakop__raster{grid-template-columns:1fr}
  .paginakop figure img{aspect-ratio:4/3}
}

/* ---------- Inhoud + zijkolom ---------- */
.inhoud-raster{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(40px,6vw,96px);align-items:start}
.inhoud>section{padding-bottom:clamp(40px,5vw,64px);margin-bottom:clamp(40px,5vw,64px);border-bottom:1px solid var(--lijn)}
.inhoud>section:last-child{border-bottom:0;margin-bottom:0}
.inhoud h2{font-size:clamp(1.9rem,3.4vw,2.6rem)}
.inhoud h3{margin-top:1.4em}
.inhoud p,.inhoud ul,.inhoud ol{max-width:40em}
.inhoud ul li::marker{color:var(--kwarts)}
.inhoud figure{margin:28px 0}
.inhoud figure img{border-radius:var(--radius)}
.inhoud figcaption{font-size:.875rem;color:var(--tekst-zacht);margin-top:8px}
.zijkolom{position:sticky;top:calc(var(--header-h) + 28px)}
.kaart{background:var(--vlak);padding:28px;border-radius:var(--radius)}
.kaart h2,.kaart h3{font-size:1.7rem;margin-bottom:.4em}
.kaart .knop{width:100%;margin-top:8px}
.kaart ul{list-style:none;padding:0;margin:18px 0 0;font-size:.95rem}
.kaart ul li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--kwarts-20);margin:0}
.kaart ul li span:first-child{color:var(--tekst-zacht)}
@media (max-width:1000px){
  .inhoud-raster{grid-template-columns:1fr}
  .zijkolom{position:static}
}

.twee{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 40px}
@media (max-width:700px){.twee{grid-template-columns:1fr}}
.vergelijk{width:100%;border-collapse:collapse;margin:20px 0;font-size:.975rem}
.vergelijk th,.vergelijk td{text-align:left;padding:12px 14px 12px 0;border-bottom:1px solid var(--lijn);vertical-align:top}
.vergelijk th{font-weight:600}
.vergelijk thead th{font-family:var(--font-kop);font-weight:500;font-size:1.2rem}
.tabelwrap{overflow-x:auto}

.factoren{list-style:none;padding:0;margin:20px 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px}
.factoren li{padding:16px 0;border-top:1px solid var(--lijn);margin:0}
.factoren strong{display:block;font-family:var(--font-kop);font-weight:500;font-size:1.25rem;margin-bottom:2px}
.factoren span{color:var(--tekst-zacht);font-size:.975rem}
@media (max-width:700px){.factoren{grid-template-columns:1fr}}

.notitie{border-left:3px solid var(--kwarts);padding:4px 0 4px 18px;margin:24px 0;color:var(--zwart-80)}

/* Dienstkaarten op /diensten/ */
.dienstblok{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:clamp(24px,5vw,72px);padding:clamp(40px,5vw,64px) 0;border-top:1px solid var(--lijn);align-items:start}
.dienstblok figure{margin:0}
.dienstblok figure img,.dienstblok video{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius);background:var(--vlak)}
.dienstblok h2{font-size:clamp(1.9rem,3.4vw,2.6rem)}
.dienstblok .soorten{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0 0 18px}
.dienstblok .soorten li{margin:0;padding:5px 12px;border:1px solid var(--lijn);border-radius:999px;font-size:.9rem}
.dienstblok--zonderbeeld{grid-template-columns:minmax(0,1fr)}
.dienstblok--zonderbeeld>div{max-width:760px}
@media (max-width:800px){.dienstblok{grid-template-columns:1fr}.dienstblok figure img,.dienstblok video{aspect-ratio:4/3}}

/* ---------- Project-detail ---------- */
.projectfeiten{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:0;margin:28px 0 0;border-top:1px solid var(--lijn)}
.projectfeiten div{padding:14px 16px 14px 0;border-bottom:1px solid var(--lijn)}
.projectfeiten dt{font-size:.875rem;color:var(--tekst-zacht)}
.projectfeiten dd{margin:2px 0 0;font-weight:600}
.galerij{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;list-style:none;padding:0;margin:0}
.galerij li{margin:0}
.galerij a{display:block;aspect-ratio:3/4;overflow:hidden;border-radius:var(--radius);background:var(--vlak)}
.galerij a:focus-visible{outline-offset:2px}
.galerij img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.galerij a:hover img{transform:scale(1.04)}
.galerij li:first-child{grid-column:span 2;grid-row:span 2}
@media (max-width:760px){.galerij{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Lightbox */
.lightbox{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:100vw;height:100vh;margin:0;color:var(--wit)}
.lightbox::backdrop{background:rgba(20,18,17,.94)}
.lightbox__binnen{position:relative;width:100%;height:100%;display:grid;place-items:center;padding:64px 72px}
.lightbox img{max-width:100%;max-height:calc(100vh - 140px);object-fit:contain;border-radius:var(--radius)}
.lightbox__tekst{position:absolute;left:0;right:0;bottom:16px;text-align:center;font-size:.95rem;color:var(--kwarts-20);padding:0 72px}
.lightbox button{position:absolute;background:transparent;border:1px solid var(--zwart-60);color:var(--wit);width:48px;height:48px;
  border-radius:50%;cursor:pointer;display:grid;place-items:center}
.lightbox button:hover{border-color:var(--goud);color:var(--goud)}
.lightbox button svg{width:18px;height:18px}
.lb-sluit{top:16px;right:16px}
.lb-vorige{left:16px;top:50%;transform:translateY(-50%)}
.lb-volgende{right:16px;top:50%;transform:translateY(-50%)}
@media (max-width:600px){.lightbox__binnen{padding:64px 8px 72px}.lb-vorige,.lb-volgende{top:auto;bottom:12px;transform:none}.lightbox__tekst{bottom:70px;padding:0 16px}}

/* ---------- Formulieren ---------- */
.formulier{display:grid;gap:22px}
.veld{display:grid;gap:6px}
.veld label,.veld legend{font-weight:600;font-size:.975rem}
.veld .hulp{font-size:.875rem;color:var(--tekst-zacht);font-weight:400}
.veld input,.veld select,.veld textarea{width:100%;font:inherit;font-size:1rem;color:var(--zwart);background:var(--wit);
  border:1px solid var(--kwarts-60);border-radius:var(--radius);padding:12px 14px;min-height:48px}
.veld textarea{min-height:130px;resize:vertical}
.veld input:focus,.veld select:focus,.veld textarea:focus{outline:2px solid var(--zwart);outline-offset:0;border-color:var(--zwart)}
.veld input[readonly]{background:var(--vlak)}
fieldset{border:0;padding:0;margin:0}
.keuzes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:6px}
.keuze{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border:1px solid var(--kwarts-40);border-radius:var(--radius);cursor:pointer;background:var(--wit);font-weight:400}
.keuze:has(input:checked){border-color:var(--zwart);box-shadow:inset 0 0 0 1px var(--zwart)}
.keuze input{width:18px;height:18px;margin:3px 0 0;accent-color:var(--zwart);flex:none}
.rij{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.rij--adres{grid-template-columns:minmax(0,1fr) minmax(0,.7fr)}
@media (max-width:640px){.keuzes,.rij,.rij--adres{grid-template-columns:1fr}}
.stapkop{display:flex;gap:12px;align-items:baseline;border-bottom:1px solid var(--lijn);padding-bottom:12px;margin-bottom:6px}
.stapkop span{font-family:var(--font-kop);font-size:1.6rem;line-height:1;color:var(--kwarts)}
.stapkop h2{font-size:1.9rem;margin:0}
.formstap{display:grid;gap:22px}
.js .formstap[data-stap="2"]:not(.actief),.js .formstap[data-stap="1"]:not(.actief){display:none}
.stapvoortgang{display:none;font-size:.9rem;color:var(--tekst-zacht)}
.js .stapvoortgang{display:block}
.akkoord{display:flex;gap:10px;align-items:flex-start;font-size:.95rem}
.akkoord input{width:18px;height:18px;margin-top:4px;accent-color:var(--zwart)}
.adresmelding{font-size:.875rem;color:var(--tekst-zacht);min-height:1.3em;margin:0}
.formfout{color:#8a1f11;font-weight:600;font-size:.95rem}
.honing{position:absolute;left:-9999px}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--zwart-80);background:var(--zwart);color:var(--kwarts-20);padding:clamp(56px,7vw,88px) 0 calc(28px + env(safe-area-inset-bottom));font-size:.975rem}
.site-footer a{color:var(--wit);text-decoration:none}
.site-footer a:hover{text-decoration:underline}
.footer-raster{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:40px}
.footer-logo img{width:190px;height:auto;margin-bottom:18px}
.footer-tagline{font-family:var(--font-kop);font-size:1.5rem;color:var(--goud);line-height:1.15;margin-bottom:12px}
.site-footer h2{font-family:var(--font-tekst);font-size:1rem;font-weight:600;color:var(--wit);margin:0 0 12px}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin:0 0 8px}
.tijden{display:grid;grid-template-columns:auto auto;gap:4px 16px;margin:0;justify-content:start}
.tijden dt{color:var(--kwarts-40)}
.tijden dd{margin:0;color:var(--wit)}
.footer-onder{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;border-top:1px solid var(--zwart-80);
  margin-top:48px;padding-top:22px;font-size:.875rem;color:var(--kwarts-40)}
.footer-onder ul{display:flex;flex-wrap:wrap;gap:6px 20px}
.footer-onder button{background:none;border:0;padding:0;font:inherit;color:var(--wit);cursor:pointer}
.footer-onder button:hover{text-decoration:underline}
@media (max-width:900px){.footer-raster{grid-template-columns:1fr 1fr}.footer-raster>div:first-child{grid-column:1/-1}}
@media (max-width:520px){.footer-raster{grid-template-columns:1fr}}

/* ---------- Mobiele actiebalk ---------- */
.actiebalk{display:none}
@media (max-width:900px){
  .actiebalk{display:grid;grid-template-columns:1fr 1fr 1.3fr;position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--wit);
    border-top:1px solid var(--lijn);padding:8px 8px calc(8px + env(safe-area-inset-bottom));gap:8px}
  .actiebalk a{display:flex;align-items:center;justify-content:center;gap:6px;min-height:46px;border:1px solid var(--zwart);border-radius:var(--radius);
    font-weight:600;font-size:.95rem;text-decoration:none;color:var(--zwart)}
  .actiebalk a:last-child{background:var(--zwart);color:var(--wit)}
  .actiebalk svg{width:17px;height:17px}
  body{padding-bottom:72px}
}

/* ---------- Cookiebanner ---------- */
.cookiebanner{position:fixed;left:16px;bottom:16px;z-index:100;width:min(440px,calc(100vw - 32px));background:var(--wit);color:var(--zwart);
  border:1px solid var(--lijn);border-radius:var(--radius);padding:22px;box-shadow:0 24px 60px -28px rgba(20,18,17,.55);font-size:.95rem}
.cookiebanner h2{font-size:1.5rem;margin:0 0 .35em}
.cookiebanner p{margin:0 0 14px;color:var(--zwart-80)}
.cookiebanner .knoppen{margin-top:0;gap:8px}
.cookiebanner .knop{min-height:44px;padding:.6em 1em;font-size:.95rem;flex:1 1 auto}
.cookie-opties{border-top:1px solid var(--lijn);margin:4px 0 14px;padding-top:8px}
.cookie-opties label{display:flex;gap:10px;align-items:flex-start;padding:8px 0;font-size:.925rem}
.cookie-opties input{width:18px;height:18px;margin-top:3px;accent-color:var(--zwart)}
.cookie-opties small{display:block;color:var(--tekst-zacht)}
@media (max-width:900px){.cookiebanner{bottom:84px}}

/* ---------- Blog ---------- */
.artikel{max-width:720px}
.artikel h2{font-size:clamp(1.7rem,3vw,2.2rem);margin-top:1.4em}
.bloglijst{list-style:none;padding:0;margin:0}
.bloglijst li{border-top:1px solid var(--lijn);margin:0}
.bloglijst li:last-child{border-bottom:1px solid var(--lijn)}
.bloglijst a{display:block;padding:26px 0;text-decoration:none}
.bloglijst h2{font-size:clamp(1.6rem,2.6vw,2.1rem);margin:0 0 4px}
.bloglijst p{margin:0;color:var(--tekst-zacht)}
.bloglijst a:hover h2{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.15em}

/* ---------- Reviewblok (staat klaar, verborgen tot er echte klantreviews zijn) ---------- */
.reviews blockquote{margin:0;font-family:var(--font-kop);font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.25}
.reviews cite{display:block;margin-top:14px;font:600 .975rem var(--font-tekst);font-style:normal}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}
@media print{.site-header,.actiebalk,.cookiebanner,.site-footer{display:none}}

/* Stappen in het verloop zijn ook aanklikbaar */
.verloop__stappen button{all:unset;display:block;cursor:pointer;width:100%}
.verloop__stappen button:focus-visible{outline:2px solid var(--goud);outline-offset:4px}
.verloop__stappen li:hover{color:var(--wit)}
@media (max-width:700px){.kop{flex-direction:column;align-items:flex-start;gap:8px}}
.lightbox{background:rgba(20,18,17,.9)}

/* Verloop ondergrond -> vloer op lichte achtergrond */
.verloop--licht{justify-self:start;width:min(100%,380px);margin-top:36px}
.verloop--licht .verloop__kader{background:var(--vlak)}
.verloop--licht .verloop__stappen li{border-color:var(--kwarts-20);color:var(--tekst-zacht)}
.verloop--licht .verloop__stappen li.actief{border-color:var(--zwart);color:var(--zwart)}
.verloop--licht .verloop__stappen li:hover{color:var(--zwart)}
.verloop--licht .verloop__stappen button:focus-visible{outline-color:var(--zwart)}
.verloop--licht .verloop__bron{color:var(--tekst-zacht)}
.verloop--licht .verloop__bron a{color:var(--zwart)}
@media (max-width:900px){.verloop--licht{width:100%}}

/* Video in paginakop */
.paginakop figure video{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius);background:var(--vlak)}
@media (max-width:900px){.paginakop figure video{aspect-ratio:4/3}}
.videos{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,320px));gap:16px}
.videos video{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:var(--radius);background:var(--vlak)}

/* ==========================================================================
   Zwarte header (sluit aan op de zwarte hero; licht logo volgens brand guide)
   ========================================================================== */
.site-header{background:var(--zwart);border-bottom-color:var(--zwart-80);color:var(--wit)}
.site-header :focus-visible{outline-color:var(--goud)}
.hoofdnav a,.hoofdnav button.nav-sub,.header-tel{color:var(--wit)}
.hoofdnav a:hover,.hoofdnav button.nav-sub:hover,.header-tel:hover{color:var(--goud)}
.submenu{background:var(--zwart);border-color:var(--zwart-80);box-shadow:0 24px 48px -24px rgba(0,0,0,.6)}
.submenu .sub-alle{border-top-color:var(--zwart-80)}
.menuknop{border-color:var(--kwarts-60);color:var(--wit)}
@media (max-width:900px){
  .hoofdnav{background:var(--zwart)}
  .hoofdnav>ul>li{border-bottom-color:var(--zwart-80)}
}

/* ==========================================================================
   Scrollbeweging: blokken komen zacht in beeld, foto's worden 'gelegd'
   (alleen met JS en zonder 'minder beweging')
   ========================================================================== */
@media (prefers-reduced-motion:no-preference){
  .js .reveal{opacity:0;transform:translateY(28px);transition:opacity .65s cubic-bezier(.2,.7,.2,1) var(--d,0s),transform .75s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
  .js .reveal.in-beeld{opacity:1;transform:none}
  .js .reveal-beeld{clip-path:inset(100% 0 0 0);transition:clip-path .95s cubic-bezier(.65,0,.25,1) var(--d,0s)}
  .js .reveal-beeld img,.js .reveal-beeld video{transform:scale(1.08);transition:transform 1.6s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
  .js .reveal-beeld.in-beeld{clip-path:inset(0 0 0 0)}
  .js .reveal-beeld.in-beeld img,.js .reveal-beeld.in-beeld video{transform:scale(1)}
  /* Werkwijze: gouden lijn loopt per stap mee */
  .donker .stappen li{position:relative}
  .donker .stappen li::after{content:"";position:absolute;left:0;top:-1px;height:2px;width:100%;background:var(--goud);
    transform:scaleX(0);transform-origin:left;transition:transform 1.1s cubic-bezier(.65,0,.25,1) calc(var(--d,0s) + .15s)}
  .donker .stappen li.in-beeld::after{transform:scaleX(1)}
  /* Projectfoto's bewegen licht mee tijdens het scrollen */
  .js .projectkaart__beeld img{transform:translateY(var(--py,0)) scale(1.08)}
  .js .projectkaart:hover .projectkaart__beeld img{transform:translateY(var(--py,0)) scale(1.11)}
}

/* ==========================================================================
   Hero: van ruwe ondergrond naar visgraat (rustig, met pauze aan begin en eind)
   ========================================================================== */
.verloop-spoor{justify-self:end;width:min(100%,430px)}
@media (min-width:901px){.verloop-spoor{width:min(100%,430px,calc((100svh - var(--header-h) - 250px) * .59))}}
.hero .verloop{width:100%}
.verloop__laag--2{transition:opacity .2s linear}
.verloop__laag--3{transition:clip-path .2s linear}
.verloop__hint{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);margin:0;padding:7px 14px;background:rgba(20,18,17,.72);
  color:var(--wit);font-size:.85rem;border-radius:999px;white-space:nowrap;opacity:0;transition:opacity .4s;pointer-events:none}
.js .hero--scroll .verloop__hint{opacity:1}
.js .hero--scroll .verloop.bezig .verloop__hint{opacity:0}
.js .hero--scroll{height:320vh}
@media (max-width:900px){
  .verloop-spoor{justify-self:stretch;width:100%}
  .hero .verloop{display:block}
  .hero .verloop__kader{aspect-ratio:4/5;max-height:calc(100svh - var(--header-h) - 150px);width:100%}
  .hero .verloop__stappen{grid-template-columns:repeat(3,1fr);margin-top:12px}
  .hero .verloop__bron{margin-top:8px}
  .js .hero--scroll{height:auto}
  .js .hero--scroll .verloop-spoor{height:230vh}
  .js .hero--scroll .verloop{position:sticky;top:calc(var(--header-h) + 12px)}
}
@media (prefers-reduced-motion:reduce){
  .js .hero--scroll,.js .hero--scroll .verloop-spoor{height:auto}
  .js .hero--scroll .verloop{position:static}
  .verloop__hint{display:none}
}
.footer-gebied{margin:40px 0 0;font-size:.875rem;color:var(--kwarts-40);max-width:none}
.footer-gebied a{color:var(--kwarts-20);text-decoration:underline;text-decoration-color:var(--zwart-60)}

/* ==========================================================================
   Hero: bladeren met pijltjes (4-11: geen scrollgestuurde foto's meer)
   ========================================================================== */
.hero .verloop--blader{justify-self:end;width:min(100%,430px)}
@media (min-width:901px){.hero .verloop--blader{width:min(100%,430px,calc((100svh - var(--header-h) - 230px) * .59))}}
.verloop--blader .verloop__laag--2{transition:opacity .7s ease}
.verloop--blader .verloop__laag--3{transition:clip-path .9s cubic-bezier(.65,0,.25,1)}
.verloop__pijl{display:none;position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;
  border:0;background:rgba(20,18,17,.72);color:var(--wit);cursor:pointer;place-items:center;transition:background .15s}
.js .verloop__pijl{display:grid}
.verloop__pijl:hover{background:var(--zwart)}
.verloop__pijl:focus-visible{outline:2px solid var(--goud);outline-offset:2px}
.verloop__pijl svg{width:20px;height:20px}
.verloop__pijl--vorige{left:12px}
.verloop__pijl--volgende{right:12px}
@media (max-width:900px){
  .hero .verloop--blader{justify-self:stretch;width:100%}
  .hero .verloop--blader .verloop__kader{aspect-ratio:4/5;max-height:70svh;width:100%}
  .hero .verloop--blader{display:block}
  .hero .verloop--blader .verloop__stappen{grid-template-columns:repeat(3,1fr);margin-top:12px}
}
@media (prefers-reduced-motion:reduce){.verloop--blader .verloop__laag--2,.verloop--blader .verloop__laag--3{transition:none}}

/* Team: groter in beeld, en een vast gezicht in de zijkaarten */
.verhaal--team{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
.verhaal--team img{aspect-ratio:4/3;object-fit:cover;object-position:52% 30%}
@media (max-width:900px){.verhaal--team{grid-template-columns:1fr}}
.persoon{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.persoon img{width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:51% 18%;flex:none;background:var(--kwarts-20)}
.persoon p{margin:0;line-height:1.3}
.persoon strong{display:block}
.persoon span{font-size:.9rem;color:var(--tekst-zacht)}

/* ==========================================================================
   Donker thema (voorbeeld). Aan te zetten met <html data-thema="donker">.
   Zwart als basis, gouden H2-koppen; tekst licht en groot genoeg voor contrast (quickscan Uitstraling A).
   ========================================================================== */
:root[data-thema="donker"]{--tekst:var(--wit);--tekst-zacht:var(--kwarts-20);--lijn:#2E2A28;--vlak:#1C1918}
[data-thema="donker"] body{background:var(--zwart);color:var(--wit)}
[data-thema="donker"] h2{color:var(--goud)}
[data-thema="donker"] .kaart h2,[data-thema="donker"] .cookiebanner h2,[data-thema="donker"] .site-footer h2,[data-thema="donker"] .stapkop h2{color:var(--wit)}
[data-thema="donker"] :focus-visible{outline-color:var(--goud)}
[data-thema="donker"] .knop{background:var(--goud);border-color:var(--goud);color:var(--zwart)}
[data-thema="donker"] .knop:hover{background:var(--wit);border-color:var(--wit)}
[data-thema="donker"] .knop--rand{background:transparent;border-color:var(--kwarts-60);color:var(--wit)}
[data-thema="donker"] .knop--rand:hover{background:transparent;border-color:var(--goud);color:var(--goud)}
[data-thema="donker"] .sectie--vlak,[data-thema="donker"] .kaart{background:var(--vlak)}
[data-thema="donker"] .paginakop{border-bottom-color:var(--lijn)}
[data-thema="donker"] .kruimel{color:var(--kwarts-40)}
[data-thema="donker"] .kenmerken li,[data-thema="donker"] .dienstblok .soorten li{border-color:#3A3532;color:var(--kwarts-20)}
[data-thema="donker"] .dienstlijst .pijl{border-color:#3A3532}
[data-thema="donker"] .dienstlijst a:hover .pijl,[data-thema="donker"] .dienstlijst a:focus-visible .pijl{background:var(--goud);border-color:var(--goud);color:var(--zwart)}
[data-thema="donker"] .dienstlijst .ook{color:var(--kwarts-40)}
[data-thema="donker"] .projectkaart__beeld,[data-thema="donker"] .galerij a,[data-thema="donker"] .dienstindex__beeld{background:var(--vlak)}
[data-thema="donker"] .stappen li::before{color:var(--goud)}
[data-thema="donker"] .redenen li::before{background:var(--goud)}
[data-thema="donker"] .inhoud ul li::marker{color:var(--goud)}
[data-thema="donker"] .faq .antwoord,[data-thema="donker"] .notitie{color:var(--kwarts-20)}
[data-thema="donker"] .notitie{border-left-color:var(--goud)}
[data-thema="donker"] .kaart ul li{border-top-color:#3A3532}
[data-thema="donker"] .veld input,[data-thema="donker"] .veld select,[data-thema="donker"] .veld textarea{background:var(--vlak);color:var(--wit);border-color:var(--kwarts-80)}
[data-thema="donker"] .veld input:focus,[data-thema="donker"] .veld select:focus,[data-thema="donker"] .veld textarea:focus{outline-color:var(--goud);border-color:var(--goud)}
[data-thema="donker"] .veld input[readonly]{background:#262220}
[data-thema="donker"] .keuze{background:var(--vlak);border-color:#3A3532}
[data-thema="donker"] .keuze:has(input:checked){border-color:var(--goud);box-shadow:inset 0 0 0 1px var(--goud)}
[data-thema="donker"] .keuze input,[data-thema="donker"] .akkoord input,[data-thema="donker"] .cookie-opties input{accent-color:var(--goud)}
[data-thema="donker"] .stapkop span{color:var(--goud)}
[data-thema="donker"] .formfout{color:#FFB4A6}
[data-thema="donker"] .cookiebanner{background:var(--vlak);color:var(--wit);border-color:#3A3532}
[data-thema="donker"] .cookiebanner p{color:var(--kwarts-20)}
[data-thema="donker"] .submenu{border-color:#3A3532}
@media (max-width:900px){
  [data-thema="donker"] .actiebalk{background:var(--zwart);border-top-color:#3A3532}
  [data-thema="donker"] .actiebalk a{border-color:var(--kwarts-60);color:var(--wit)}
  [data-thema="donker"] .actiebalk a:last-child{background:var(--goud);border-color:var(--goud);color:var(--zwart)}
}
[data-thema="donker"] .persoon img{background:#3A3532}
[data-thema="donker"] .bewijs{border-bottom-color:var(--lijn)}
[data-thema="donker"] .bewijs strong{color:var(--goud)}
[data-thema="donker"] .ctaband{border-top:1px solid var(--lijn)}