/*
Theme Name: Pranger Kozijnen
Theme URI: https://prangerkozijnen.nl
Author: NassLabs
Description: Maatwerk thema voor Pranger Kozijnen (kozijnen, schuifpuien, deuren). Gebaseerd op het NassLabs Core Theme + Meta Builder. Lean 6-blok productpagina-systeem, herbruikbare parts-templates, CPT Projecten / Locaties (lokale SEO) / Producten.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: pranger
*/

/* ============================================================
   Pranger design-system (geport uit hi-fi prototype HERO_06)
   Bron: pranger-prototype/css/style.css + concept.css
   ============================================================ */

/* ===== Pranger Kozijnen – prototype stylesheet (HERO_06) ===== */
:root{
  --ivory:#fffdf5; --charcoal:#333331; --red:#ed1f24; --sec:#6e706e;
  --line:#e5e5e4; --white:#fffdf5; --band:#f2efe6;
  --gut:80px; --maxw:1440px;
  --ff-display:'Oswald',sans-serif; --ff-body:'Inter',sans-serif; --ff-accent:'Fraunces',serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--ff-body);color:var(--charcoal);background:var(--ivory);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);width:100%}
/* Skip-link: onzichtbaar tot toetsenbord-focus (toegankelijkheid) */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--charcoal);color:var(--ivory);padding:12px 20px;font-family:var(--ff-body);font-size:14px;font-weight:600;text-decoration:none}
.skip-link:focus{left:8px;top:8px;outline:2px solid var(--red);outline-offset:2px}
/* Prose (juridische + content-pagina's) */
.prose{max-width:720px;margin:0 auto}
.prose h2{font-family:var(--ff-display);font-weight:500;font-size:clamp(22px,3vw,30px);margin:34px 0 12px}
.prose h3{font-family:var(--ff-display);font-weight:500;font-size:20px;margin:26px 0 10px}
.prose p{font-size:16px;line-height:1.75;color:#3a3a38;margin-bottom:16px}
.prose ul,.prose ol{margin:0 0 16px 22px;line-height:1.7;color:#3a3a38}
.prose li{margin-bottom:8px}
.prose a{color:#cf1a1f;text-decoration:underline}
.prose strong{color:var(--charcoal)}
/* Error-pagina's (404 / kritieke fout) */
.err-page{max-width:640px;margin:0 auto;text-align:center;padding:clamp(56px,9vw,110px) 0}
.err-page__code{font-family:var(--ff-display);font-weight:600;font-size:clamp(64px,13vw,128px);line-height:1;color:var(--red)}
.err-page__actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:22px 0 30px}
.err-page__links{margin-top:24px;font-size:14px;color:var(--sec)}
.err-page__links a{color:var(--charcoal)}
/* Cookie-consent-banner (AVG) */
.cc-banner{position:fixed;left:16px;right:16px;bottom:16px;z-index:90;max-width:520px;margin:0 auto;background:var(--charcoal);color:var(--ivory);padding:20px 22px;box-shadow:0 12px 40px rgba(0,0,0,.22);transform:translateY(160%);transition:transform .4s var(--ease)}
.cc-banner.is-on{transform:translateY(0)}
.cc-banner p{font-size:13px;line-height:1.6;color:rgba(255,253,245,.85);margin-bottom:14px}
.cc-banner a{color:var(--ivory);text-decoration:underline}
.cc-banner__row{display:flex;gap:10px;flex-wrap:wrap}
.cc-banner__row .btn{flex:1;justify-content:center}
/* Zoekresultaten */
.search-wrap{max-width:720px;margin:0 auto}
.search-results{list-style:none;margin:28px 0 0;padding:0}
.search-result{border-top:1px solid var(--line)}
.search-result a{display:block;padding:22px 0;text-decoration:none}
.search-result__type{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--red)}
.search-result__title{font-family:var(--ff-display);font-weight:500;font-size:21px;margin:6px 0 6px;color:var(--charcoal)}
.search-result a:hover .search-result__title{color:var(--red)}
.search-result p{font-size:15px;line-height:1.6;color:#4a4a47}
.prod-card__desc{font-size:13px;line-height:1.5;color:var(--sec);margin-top:4px}

/* ---- type helpers ---- */
.h2{font-family:var(--ff-display);font-weight:500;font-size:clamp(30px,4vw,44px);line-height:1.05;letter-spacing:-.01em}
.h2--light{color:var(--ivory)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-weight:500;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--red);margin-bottom:18px}
.eyebrow .dash{width:32px;height:2px;background:var(--red);display:inline-block}
.eyebrow--light{color:rgba(255,255,255,.85)}
.eyebrow--light .dash{background:var(--red)}
/* eyebrows overal verborgen (klant-keuze 2026-06-18) — verwijder deze regel om ze terug te zetten */
.eyebrow,.scene__eyebrow{display:none!important}
/* decoratieve eyebrow-achtige kicker-labels ook weg (klant-keuze) — functionele keuze-labels (cfg/calc/info-panel) blijven */
.scene__kicker,.wz-step__tag,.def-card__tag,.sub-case__who,.opt-card__cat,.kb-card__cat{display:none!important}
.link{font-weight:500;font-size:14px;color:var(--red);transition:opacity .2s}
.link:hover{opacity:.65}
.link--lg{font-size:15px;white-space:nowrap}
.section{padding:64px 0}   /* vaste ruimte i.p.v. clamp(56px,8vw,104px): minder lucht, secties raken elkaar nooit */
.section__head{max-width:760px;margin-bottom:48px}
.section__head--row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;max-width:none}
.section__sub{color:var(--sec);font-size:17px;margin-top:14px;max-width:560px}
/* Pagina-kop: binnen .pagehead staat er niets onder de section__head, dus die 48px
   is dode ruimte, en de sectie erna telt er nog eens 64px bovenop (op /kennisbank/
   zat er 244px tussen de titel en het zoekveld). Resultaat: 64px, gelijk aan het
   ritme tussen de andere secties. */
.pagehead .section__head{margin-bottom:0}
.pagehead + .section{padding-top:0}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--ff-body);font-weight:500;font-size:14px;padding:13px 24px;border:1px solid transparent;cursor:pointer;transition:transform .2s var(--ease),background .2s,color .2s;border-radius:0}
.btn:hover{transform:translateY(-2px)}
.btn--lg{padding:16px 30px;font-size:15px}
.btn--sm{padding:11px 18px;font-size:13px}
.btn--block{display:flex;width:100%}
.btn--red{background:var(--red);color:#fff}
.btn--ivory{background:var(--ivory);color:var(--charcoal)}
.btn--dark{background:var(--charcoal);color:var(--ivory)}
.btn--outline{background:transparent;border-color:var(--charcoal);color:var(--charcoal)}
.btn--ghost-light{background:transparent;border-color:rgba(255,255,255,.5);color:#fff}

/* ---- servicebalk boven de header ---- */
.topbar{background:var(--charcoal);color:rgba(255,253,245,.82);font-size:13px;line-height:1.3}
.topbar__inner{display:flex;align-items:center;gap:26px;padding-top:9px;padding-bottom:9px}
.topbar a{color:inherit}
.topbar__reviews{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.topbar__stars{color:#f5b301;letter-spacing:.06em}
.topbar__reviews strong{color:#fff;font-weight:600}
.topbar__src{opacity:.75}
a.topbar__reviews:hover strong,a.topbar__reviews:hover .topbar__src{color:#fff;opacity:1}
.topbar__mail{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.topbar__mail:hover{color:#fff}
.topbar__ico{font-family:'Material Symbols Outlined';font-size:16px;line-height:1;color:var(--red)}
.topbar__ico::before{content:"mail"}
.topbar__cta{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-weight:600;color:#fff;white-space:nowrap}
.topbar__cta:hover{color:var(--red)}
@media(max-width:860px){
  .topbar__inner{gap:16px;justify-content:space-between}
  .topbar__mail{display:none}          /* e-mail staat in de footer en op contact */
  .topbar__src{display:none}
  .topbar__cta{margin-left:0}
}
@media(max-width:420px){
  .topbar{font-size:12px}
  .topbar__cta span{display:none}
}

/* ---- header ---- */
.site-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);transition:box-shadow .3s}
.site-header.is-scrolled{box-shadow:0 6px 24px rgba(0,0,0,.06)}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:18px;padding-bottom:18px}
/* Het woordmerk is sinds 24-09 het echte logo (window-icoon + "pranger kozijnen")
   in plaats van de tekst "pranger.". De viewBox is bijgesneden tot de inhoud —
   in het bronbestand was ruim 40% van de hoogte lege marge, waardoor het logo in
   de header minuscuul werd. De hoogte stuurt de maat; de breedte volgt (3,28:1). */
.logo{display:inline-flex;align-items:center;line-height:0}
.logo img{display:block;height:30px;width:auto}
.footer .logo img{height:34px}
.nav{display:flex;align-items:center;gap:30px}
.nav__item{position:static}
.nav__link{font-family:var(--ff-body);font-weight:500;font-size:15px;color:var(--charcoal);background:none;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;transition:color .2s}
.nav__link:hover{color:var(--red)}
.caret{font-size:10px;color:var(--sec);transition:transform .25s}
.header__right{display:flex;align-items:center;gap:22px}
.header__phone{display:inline-flex;align-items:center;gap:7px;font-weight:500;font-size:14px}
.material-symbols-outlined,.header__phone .ico,.trust__ico,.pp-card__ico,.cm-card__ico,.teams-pill__ico,.kb-search__ico{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;direction:ltr;-webkit-font-smoothing:antialiased;font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24}
.header__phone .ico{display:inline-flex;align-items:center;justify-content:center;color:var(--red);font-size:19px;width:auto;height:auto;background:none}
.header__phone .ico::before{content:"call"}

/* mega menu */
.has-mega .mega{position:absolute;left:0;right:0;top:100%;background:var(--white);border-top:2px solid var(--red);box-shadow:0 18px 40px rgba(0,0,0,.12);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .25s,transform .25s,visibility .25s;z-index:55}
.has-mega:hover .mega,.has-mega.is-open .mega{opacity:1;visibility:visible;transform:translateY(0)}
.has-mega:hover .caret{transform:rotate(180deg)}
/* Twee kolommen: links de intro mét de productkaarten eronder, rechts de promo.
   De kaarten hebben zo de volle breedte, zodat vier producten op één rij passen
   en de promo niet naar een tweede rij zakt. */
.mega__inner{display:grid;grid-template-columns:minmax(0,1fr) 260px;grid-template-areas:"intro intro" "cards promo";gap:18px 40px;padding:36px var(--gut) 40px;align-items:start}
.mega__intro{grid-area:intro;max-width:640px}
.mega__cards{grid-area:cards;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px 28px}
.mega__promo{grid-area:promo;align-self:start}
/* Smallere desktopschermen: de vier kaarten blijven op één rij, maar compacter
   (kleiner beeld, zonder omschrijving). Twee rijen maakte het menu ~750px hoog,
   waardoor de promo onder de schermrand verdween op een gemiddelde laptop. */
@media(max-width:1200px){
  .mega__inner{grid-template-columns:minmax(0,1fr) 230px;gap:14px 28px;padding-top:28px;padding-bottom:32px}
  .mega__cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
  .mega__img{height:96px}
  .mega__name{font-size:18px}
  .mega__desc{display:none}
  .mega__promo{padding:18px}
  .mega__promo .mega__promo-title{font-size:19px}
}
/* Tussen de mobiel-grens (960px) en ~1200px is er te weinig ruimte voor logo +
   nav + telefoonnummer + knop: de nav liep tegen het logo aan en "Over ons" /
   "Über uns" brak over twee regels, waardoor de header hoger werd. Hier maken
   we de nav compacter en laten we het telefoonnummer weg (dat staat ook in de
   contactbalk onderaan en in de footer). */
@media(max-width:1200px){
  .header__inner{gap:16px}
  .nav{gap:18px}
  .nav__link{font-size:14px}
  .header__phone{display:none}
  .header__right{gap:14px}
}

/* Veiligheidsnet: het menu mag nooit voorbij de onderkant van het scherm lopen
   (korte laptopschermen met een 2×2-kaartraster). */
.mega{max-height:calc(100vh - 80px);overflow-y:auto;overscroll-behavior:contain}
.mega__intro .mega__title{font-family:var(--ff-display);font-weight:500;font-size:22px;line-height:1.12;margin:6px 0 8px}
.mega__intro .mega__sub{font-size:13px;color:var(--sec)}
.mega__card{display:flex;flex-direction:column;gap:8px}
.mega__img{display:block;height:132px;border-radius:0;background:var(--band) center/cover}
.mega__name{font-family:var(--ff-display);font-weight:500;font-size:22px}
.mega__desc{font-size:14px;color:var(--sec);line-height:1.5}
.mega__card .link{margin-top:2px}
.mega__promo{background:var(--charcoal);border-radius:0;padding:22px;color:var(--ivory)}
.mega__promo .mega__promo-title{font-family:var(--ff-display);font-weight:500;font-size:22px;line-height:1.12;margin:8px 0}
.mega__promo p{font-size:13px;color:rgba(255,255,255,.72);margin-bottom:14px}
.eyebrow--red{color:#cf1a1f}

/* hamburger + mobile menu */
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px}
.hamburger span{width:24px;height:2px;background:var(--charcoal);transition:.3s}
.mobile-menu{position:fixed;inset:0;background:var(--white);z-index:80;transform:translateX(100%);transition:transform .35s var(--ease);display:flex;flex-direction:column;visibility:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding-bottom:env(safe-area-inset-bottom)}
.mobile-menu.is-open{transform:translateX(0);visibility:visible}
.mobile-menu__bar{display:flex;justify-content:space-between;align-items:center;padding:14px 24px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--white);z-index:2}
.mobile-menu__close{background:none;border:none;font-size:22px;cursor:pointer;width:44px;height:44px;display:grid;place-items:center;margin-right:-10px}
.mobile-menu__nav{display:flex;flex-direction:column;padding:4px 24px 8px;flex:none}
.mobile-menu__nav a{font-family:var(--ff-display);font-weight:500;font-size:21px;padding:14px 0;border-bottom:1px solid var(--line);display:flex;align-items:center;min-height:52px}
.mm-prod{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:none;border-bottom:1px solid var(--line);font-family:var(--ff-display);font-weight:500;font-size:21px;padding:14px 0;min-height:52px;color:var(--charcoal);cursor:pointer;text-align:left}
.mm-prod .caret{font-size:14px;color:var(--sec);transition:transform .25s}
.mm-prod.is-open .caret{transform:rotate(180deg)}
.mm-sub{display:flex;flex-direction:column;padding:2px 0 10px 16px}
.mm-sub[hidden]{display:none}
.mobile-menu .mm-sub a{font-family:var(--ff-body);font-weight:500;font-size:16px;padding:10px 0;min-height:44px;border-bottom:1px solid var(--line);color:var(--charcoal)}
.mm-sub a:last-child{border-bottom:none}
.mobile-menu__foot{padding:16px 24px 28px;display:flex;flex-direction:column;gap:10px;margin-top:auto;background:var(--band)}
.mobile-menu__foot .btn{min-height:48px}
.mobile-menu__phone{font-family:var(--ff-display);font-weight:500;font-size:22px;display:inline-flex;align-items:center;gap:8px;margin-bottom:4px}
.mobile-menu__phone::before{content:"call";font-family:'Material Symbols Outlined';font-size:20px;color:var(--red);font-weight:400}
.mobile-menu__foot p{font-size:13px;color:var(--sec)}

/* ---- hero ---- */
.hero{position:relative;min-height:min(880px,92vh);display:flex;align-items:center;color:#fff;overflow:hidden}
.hero__bg{position:absolute;inset:0;background:#2a2a2c center/cover;transform:scale(1.1);transition:transform 2.2s var(--ease)}
.hero.is-visible .hero__bg{transform:scale(1)}
.hero__scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,15,17,.86) 0%,rgba(15,15,17,.6) 45%,rgba(15,15,17,.2) 100%),linear-gradient(0deg,rgba(15,15,17,.4) 0%,rgba(15,15,17,0) 40%)}
.hero .container{position:relative;z-index:2}
.hero__copy{max-width:680px}
.hero__title{font-family:var(--ff-display);font-weight:600;font-size:clamp(40px,7vw,84px);line-height:.98;letter-spacing:-.02em;margin:14px 0 22px}
.hero__lead{font-size:clamp(16px,1.4vw,19px);color:rgba(255,255,255,.9);max-width:600px;margin-bottom:30px}
.hero__actions{display:flex;gap:14px;flex-wrap:wrap}
/* gestaggerde hero-entree */
.hero__copy>*{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.hero.is-visible .hero__copy>*{opacity:1;transform:none}
.hero.is-visible .hero__copy>*:nth-child(1){transition-delay:.15s}
.hero.is-visible .hero__copy>*:nth-child(2){transition-delay:.32s}
.hero.is-visible .hero__copy>*:nth-child(3){transition-delay:.52s}
.hero.is-visible .hero__copy>*:nth-child(4){transition-delay:.68s}
.hero .eyebrow .dash{width:0;transition:width .7s var(--ease) .25s}
.hero.is-visible .eyebrow .dash{width:32px}

/* ---- isde strip ---- */
.isde{background:var(--charcoal);color:var(--ivory)}
.isde__inner{display:flex;align-items:center;gap:18px;padding:16px var(--gut)}
.isde__badge{display:inline-flex;align-items:center;font-weight:600;font-size:11px;letter-spacing:.1em;color:var(--red);position:relative;padding-left:16px}
.isde__badge::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:7px;height:7px;border-radius:0;background:var(--red)}
.isde__text{font-size:15px;flex:1}
.isde__link{font-weight:500;font-size:14px;color:var(--ivory);white-space:nowrap}
.isde__link:hover{color:var(--red)}

/* ---- positionering ---- */
.positie__grid{display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:center}
.positie__visual{position:relative;height:540px;overflow:visible}
.positie__accent{position:absolute;left:0;top:180px;z-index:5;font-family:var(--ff-display);font-weight:600;font-size:clamp(28px,3.2vw,46px);line-height:1;color:var(--charcoal)}
.positie__photos{position:absolute;inset:0;overflow:hidden}
/* skewX → boven/onder horizontaal (0°), zijkanten schuin; beeld counter-skewed = recht */
.dphoto{position:absolute;top:0;height:100%;overflow:hidden;transform:skewX(-20deg);transform-origin:center}
.dphoto__img{position:absolute;top:-40px;bottom:-40px;left:-300px;right:-300px;background:var(--band) center/cover;transform:skewX(20deg)}
.dphoto--wide{left:40%;width:24%}
.dphoto--narrow{left:72%;width:8%}
.doutline{position:absolute;top:-18px;height:calc(100% + 36px);border:1.5px solid var(--red);transform:skewX(-20deg);transform-origin:center;pointer-events:none;z-index:4}
.doutline--wide{left:37%;width:24%}
.doutline--narrow{left:75%;width:8%}
/* ── Positionering entree-animatie ── */
.positie[data-reveal]{opacity:1;transform:none}
.dphoto{opacity:0;transition:opacity .8s var(--ease),transform .9s var(--ease)}
.dphoto--wide{transform:skewX(-20deg) translateY(46px)}
.dphoto--narrow{transform:skewX(-20deg) translateY(46px)}
.positie.is-visible .dphoto{opacity:1}
.positie.is-visible .dphoto--wide{transform:skewX(-20deg) translateY(0);transition-delay:.05s}
.positie.is-visible .dphoto--narrow{transform:skewX(-20deg) translateY(0);transition-delay:.18s}
.dphoto__img{transition:transform 1.1s var(--ease)}
.dphoto--wide .dphoto__img,.dphoto--narrow .dphoto__img{transform:skewX(20deg) scale(1.12)}
.positie.is-visible .dphoto__img{transform:skewX(20deg) scale(1)}
.doutline{clip-path:inset(0 100% 0 0);opacity:0;transition:clip-path .85s var(--ease),opacity .3s var(--ease)}
.positie.is-visible .doutline{opacity:1}
.positie.is-visible .doutline--wide{clip-path:inset(0);transition-delay:.42s}
.positie.is-visible .doutline--narrow{clip-path:inset(0);transition-delay:.56s}
.positie__accent{opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.positie.is-visible .positie__accent{opacity:1;transform:none;transition-delay:.12s}
.positie__body>*{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.positie.is-visible .positie__body>*{opacity:1;transform:none}
.positie.is-visible .positie__body>*:nth-child(2){transition-delay:.08s}
.positie.is-visible .positie__body>*:nth-child(3){transition-delay:.16s}
.positie.is-visible .positie__body>*:nth-child(4){transition-delay:.24s}
.positie.is-visible .positie__body>*:nth-child(5){transition-delay:.32s}
.positie.is-visible .positie__body>*:nth-child(6){transition-delay:.40s}
.positie__body .h2{margin-bottom:14px}
.rating{color:var(--red);font-weight:600;font-size:14px;margin-bottom:20px}
.rating span{color:var(--sec);font-weight:500}
.positie__body p{color:#4a4a47;margin-bottom:16px;max-width:560px}
.positie__links{display:flex;align-items:center;gap:24px;margin-top:10px}

/* ---- producten (dark, overlay cards) ---- */
.producten{background:var(--charcoal);color:var(--ivory)}
.section__head--split{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;max-width:none}
.producten__sub{color:rgba(255,255,255,.7);font-size:16px;max-width:360px}
.prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.prod-card{position:relative;display:block;height:520px;overflow:hidden;border-radius:0}
.prod-card__img{position:absolute;inset:0;background:var(--band) center/cover;transition:transform .6s var(--ease)}
.prod-card:hover .prod-card__img{transform:scale(1.05)}
.prod-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 38%,rgba(0,0,0,.78) 100%)}
.prod-card__body{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;flex-direction:column;gap:6px;padding:26px}
.prod-card__no{font-weight:500;font-size:12px;color:#fff;opacity:.82;letter-spacing:.05em}
.prod-card__title{font-family:var(--ff-display);font-weight:500;font-size:26px;color:#fff}
.prod-card__cta{font-weight:500;font-size:14px;color:#fff;display:inline-flex;gap:8px;margin-top:4px}
.prod-card__cta i{color:var(--red);font-style:normal;transition:transform .3s var(--ease)}
.prod-card:hover .prod-card__cta i{transform:translateX(6px)}
.prod-card::after{transition:opacity .4s}
.prod-card:hover::after{opacity:.92}
/* ── Producten entree: beeld wipet open (onder→boven) + tekst rijst ── */
.producten[data-reveal]{opacity:1;transform:none}
.section__head--split>*{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.producten.is-visible .section__head--split>*{opacity:1;transform:none}
.producten.is-visible .section__head--split>*:nth-child(2){transition-delay:.1s}
.prod-card__img{clip-path:inset(100% 0 0 0);transition:transform .6s var(--ease),clip-path .9s var(--ease)}
.producten.is-visible .prod-card__img{clip-path:inset(0)}
.producten.is-visible .prod-card:nth-child(2) .prod-card__img{transition-delay:.18s}
.producten.is-visible .prod-card:nth-child(3) .prod-card__img{transition-delay:.36s}
.prod-card__body{opacity:0;transform:translateY(26px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.producten.is-visible .prod-card:nth-child(1) .prod-card__body{opacity:1;transform:none;transition-delay:.34s}
.producten.is-visible .prod-card:nth-child(2) .prod-card__body{opacity:1;transform:none;transition-delay:.52s}
.producten.is-visible .prod-card:nth-child(3) .prod-card__body{opacity:1;transform:none;transition-delay:.70s}

/* ---- werkwijze (light, 2-col list) ---- */
.werkwijze__grid{display:grid;grid-template-columns:1fr 1.25fr;gap:64px;align-items:start}
.steps{list-style:none}
.step{display:flex;align-items:flex-start;gap:24px;padding:24px 0;border-top:1px solid var(--line)}
.step__no{font-family:var(--ff-display);font-weight:500;font-size:34px;color:var(--red);line-height:1;flex:none;min-width:46px}
.step__txt{flex:1}
.step__txt h3{font-family:var(--ff-display);font-weight:500;font-size:22px;margin-bottom:6px}
.step__txt p{color:var(--sec);font-size:14px;max-width:430px}
.step__ico{width:18px;height:18px;background:var(--band);flex:none;margin-top:6px}
/* ── Werkwijze: beginbeeld = originele lijst (rij voor rij), gaat over in pin ── */
.wp-list[data-reveal]{opacity:1;transform:none}
.wp-list{position:absolute;inset:0;display:flex;align-items:center;will-change:opacity,transform}
.werkwijze__head>*{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.wp-list.is-visible .werkwijze__head>*{opacity:1;transform:none}
.wp-list.is-visible .werkwijze__head>*:nth-child(2){transition-delay:.1s}
.step__no{opacity:0;transform:translateX(-20px) scale(.55);transform-origin:left center;transition:opacity .5s var(--ease),transform .55s var(--ease)}
.step__txt{opacity:0;transform:translateY(14px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.step__ico{opacity:0;transition:opacity .5s var(--ease)}
.wp-list.is-visible .step__no{opacity:1;transform:none}
.wp-list.is-visible .step__txt{opacity:1;transform:none}
.wp-list.is-visible .step__ico{opacity:1}
.wp-list.is-visible .step:nth-child(1) .step__no{transition-delay:.10s}
.wp-list.is-visible .step:nth-child(1) .step__txt{transition-delay:.20s}
.wp-list.is-visible .step:nth-child(1) .step__ico{transition-delay:.28s}
.wp-list.is-visible .step:nth-child(2) .step__no{transition-delay:.25s}
.wp-list.is-visible .step:nth-child(2) .step__txt{transition-delay:.35s}
.wp-list.is-visible .step:nth-child(2) .step__ico{transition-delay:.43s}
.wp-list.is-visible .step:nth-child(3) .step__no{transition-delay:.40s}
.wp-list.is-visible .step:nth-child(3) .step__txt{transition-delay:.50s}
.wp-list.is-visible .step:nth-child(3) .step__ico{transition-delay:.58s}
.wp-list.is-visible .step:nth-child(4) .step__no{transition-delay:.55s}
.wp-list.is-visible .step:nth-child(4) .step__txt{transition-delay:.65s}
.wp-list.is-visible .step:nth-child(4) .step__ico{transition-delay:.73s}
/* ── Werkwijze scroll-pin: titel uit naar links, stappenblok naar midden, elke stap komt naar voren ── */
.werkwijze-pin{position:relative;height:260vh;background:var(--ivory)}
/* 260vh, was 480vh. De sectie was 4320px op een homepage van 10.043px — 43% van de
   pagina voor 688 tekens, oftewel bijna vijf schermen scrollen voor vijf stappen.
   main.js §8 rekent met de voortgang dóór de sectie, dus dit is puur deze waarde:
   hoger = langer blijven hangen per stap, lager = vlotter. Onder 860px is de pin
   uit en staan de stappen gewoon onder elkaar (zie de media query hieronder). */
.wp-sticky{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:center}
.wp-stage{display:flex;align-items:center;gap:64px;width:min(1180px,90vw)}
.wp-title-col{flex:0 0 42%;will-change:transform,opacity}
.wp-title-col .eyebrow{margin-bottom:16px}
.wp-steps{flex:1;list-style:none;will-change:transform}
.wp-row{display:flex;gap:24px;align-items:flex-start;padding:22px 0;border-top:1px solid var(--line);transform-origin:left center;will-change:transform,opacity;opacity:.32;transform:scale(.99);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.wp-row.is-active{opacity:1;transform:scale(1.025)}
.wp-rno{font-family:var(--ff-display);font-weight:500;font-size:38px;line-height:1;color:var(--red);flex:none;min-width:60px}
.wp-rtxt h3{font-family:var(--ff-display);font-weight:500;font-size:26px;margin-bottom:8px;color:var(--charcoal)}
.wp-rtxt p{font-size:15px;line-height:1.55;color:var(--sec);max-width:470px;max-height:0;opacity:0;overflow:hidden;margin-top:0;transition:opacity .4s var(--ease),max-height .45s var(--ease),margin-top .45s var(--ease)}
.wp-row.is-active .wp-rtxt p{max-height:240px;opacity:1;margin-top:10px}
.wp-progress{position:absolute;left:0;right:0;bottom:46px;display:flex;flex-direction:column;align-items:center;gap:12px;z-index:5}
.wp-count{font-weight:600;font-size:12px;letter-spacing:.14em;color:var(--sec)}
.wp-bar{width:min(420px,68vw);height:2px;background:var(--line);position:relative;overflow:hidden}
.wp-bar i{position:absolute;left:0;top:0;height:100%;width:0;background:var(--red)}
@media(max-width:860px){
  .werkwijze-pin{height:auto;padding:clamp(48px,8vw,72px) 0}
  .wp-sticky{position:static;height:auto;overflow:visible;display:block}
  .wp-stage{flex-direction:column;align-items:stretch;gap:24px;width:auto;padding:0 var(--gut)}
  .wp-title-col{flex:none;opacity:1!important;transform:none!important}
  .wp-steps{transform:none!important}
  .wp-row{opacity:1;transform:none;padding:18px 0;gap:16px}
  .wp-rno{font-size:28px;min-width:44px}
  .wp-rtxt h3{font-size:21px;margin-bottom:4px}
  .wp-rtxt p{max-height:none;opacity:1;margin-top:6px;font-size:14px}
  .wp-progress{display:none}
}

/* ---- projecten / blogs cards ---- */
.proj-grid,.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.proj-card__img{display:block;height:320px;border-radius:0;background:var(--band) center/cover;margin-bottom:16px;transition:transform .5s var(--ease)}
.proj-card{overflow:hidden}
.proj-card:hover .proj-card__img{transform:scale(1.03)}
.proj-card__meta,.blog-card__cat,.blog-card__meta{font-weight:500;font-size:11px;letter-spacing:.08em;color:var(--red)}
.proj-card__title{font-family:var(--ff-display);font-weight:500;font-size:24px;margin:6px 0 4px}
.proj-card__detail{font-size:13px;color:var(--sec)}
.blog-card__img{display:block;height:200px;border-radius:0;background:var(--band) center/cover;margin-bottom:16px}
.blog-card h3{font-family:var(--ff-display);font-weight:500;font-size:22px;line-height:1.1;margin:8px 0}
.blog-card p{font-size:14px;color:var(--sec);line-height:1.55;margin-bottom:12px}
.blog-card__meta{color:var(--sec);letter-spacing:.06em}

/* ---- reviews (light, centered) ---- */
.reviews__inner{text-align:center;max-width:900px;margin:0 auto;display:flex;flex-direction:column;align-items:center}
.eyebrow--center{justify-content:center}
.reviews .h2{margin-bottom:32px}
/* De carrousel reserveert de hoogte van de langste review zodat de pagina niet
   springt (main.js §20). Die reservering zat op de tekst zélf, met de tekst
   verticaal gecentreerd erin: bij een korte review stond de naam daardoor
   tientallen pixels van de tekst af. Nu zit de reservering op het hele blok en
   blijven tekst en naam als groep bij elkaar. */
/* De gereserveerde hoogte (de langste review) verdeelde zijn speling boven én
   onder de inhoud: bij een korte review stond alles 43px verder uit elkaar dan
   bij een lange, en het hele blok verschoof bij elke wissel. Met flex-end zakt
   de speling naar bóven het aanhalingsteken — dat is gewoon sectieruimte — en
   staat alles vanaf het teken tot de link bij elke review op dezelfde plek. */
.quote{position:relative;max-width:820px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}
.quote__mark{font-family:var(--ff-accent);font-style:italic;font-size:72px;color:var(--red);line-height:0;display:block;height:34px}
.quote>p:not(.quote__vertaald){font-family:var(--ff-display);font-weight:500;font-size:clamp(22px,2.6vw,34px);line-height:1.28;color:var(--charcoal);margin:14px 0 24px;max-width:100%}
.quote__by{display:inline-flex;align-items:center;gap:12px;justify-content:center}
/* Stond leeg en las daardoor als een kapotte afbeelding; nu de initiaal van de klant. */
.quote__avatar{width:40px;height:40px;border-radius:0;background:var(--red);flex:none;display:flex;align-items:center;justify-content:center;font-family:var(--ff-display);font-weight:600;font-size:18px;line-height:1;color:var(--white)}
.quote__who{display:flex;flex-direction:column;text-align:left}
.quote__who strong{font-size:15px;color:var(--charcoal)}
.quote__who span{font-size:13px;color:var(--sec)}
/* Melding onder een review die niet in de oorspronkelijke taal staat. */
.reviews__src{margin:20px 0 0}
.quote__vertaald{margin:10px 0 0;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--sec);opacity:.75}
.quote__vertaald[hidden]{display:none}
.reviews__dots{display:flex;gap:8px;justify-content:center;margin-top:28px}
.reviews__dots i{width:8px;height:8px;border-radius:0;background:var(--line);transition:.25s}
.reviews__dots i.is-active{background:var(--red);width:22px;border-radius:0}

/* ---- faq ---- */
.faq__grid{display:grid;grid-template-columns:420px 1fr;gap:64px;align-items:start}
.faq__intro p{color:var(--sec);margin:16px 0 24px;max-width:340px}
.faq__list{border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__item summary{list-style:none;display:flex;align-items:center;gap:16px;padding:22px 0;cursor:pointer;font-weight:500;font-size:17px}
.faq__item summary::-webkit-details-marker{display:none}
.faq__no{font-family:var(--ff-display);font-weight:500;color:var(--sec);font-size:15px}
.faq__sign{margin-left:auto;width:16px;height:16px;position:relative;flex:none}
.faq__sign::before,.faq__sign::after{content:"";position:absolute;background:var(--sec);transition:.25s}
.faq__sign::before{left:0;top:7px;width:16px;height:2px}
.faq__sign::after{left:7px;top:0;width:2px;height:16px}
.faq__item[open] .faq__sign::after{transform:rotate(90deg);opacity:0}
.faq__item[open] .faq__sign::before{background:var(--red)}
.faq__a{padding:0 0 24px 31px;color:var(--sec);max-width:640px;line-height:1.6}

/* ---- werkgebied ---- */
.werkgebied__grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.werkgebied__body p{color:#4a4a47;margin:14px 0 24px;max-width:480px}
.cities{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cities a{display:block;padding:12px 16px;background:var(--white);border:1px solid var(--line);font-weight:500;font-size:14px;transition:.2s}
.cities a:hover{border-color:var(--red);color:var(--red)}
.werkgebied__map{aspect-ratio:4/3;border-radius:0;background:var(--band) center/cover;min-height:300px}
/* Kaart in de linkerkolom van de contactpagina (zie page-contact.php). */
.contact-map{margin-top:32px;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.contact-map .wg-map{width:100%;aspect-ratio:4/3;background:var(--band)}
/* min-height pas vanaf 480px: samen met aspect-ratio rekent de browser de bréédte
   uit de hoogte (280 × 4/3 = 373px), en dan is de kolom breder dan een scherm van
   280 of 375px. Boven 480px bindt de min-height nooit, dus daar is hij veilig. */
@media(min-width:480px){ .contact-map .wg-map{min-height:280px} }

/* ---- eind-cta (dark) ---- */
.cta{background:var(--charcoal);color:var(--ivory);text-align:center}
.cta__inner{padding:clamp(64px,9vw,110px) 0;display:flex;flex-direction:column;align-items:center}
.cta__title{font-family:var(--ff-display);font-weight:500;font-size:clamp(30px,4.2vw,48px);line-height:1.04;margin:4px 0 18px}
.cta p{color:rgba(255,255,255,.75);max-width:560px;margin-bottom:30px}
.cta__actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}

/* ---- footer ---- */
.footer{background:var(--charcoal);color:var(--ivory)}
.footer__top{display:grid;grid-template-columns:2fr 1fr 1fr 1.3fr 1.6fr;gap:48px;padding-top:72px;padding-bottom:44px}
.footer__brand p{font-size:14px;color:rgba(255,255,255,.66);line-height:1.6;margin:18px 0;max-width:320px}
.footer__badge{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.22);border-radius:0;padding:8px 16px;font-weight:500;font-size:12px}
.footer__badge i{width:7px;height:7px;border-radius:0;background:var(--red)}
.footer__col .footer__h{font-family:inherit;font-weight:600;font-size:12px;line-height:inherit;letter-spacing:.1em;margin:0 0 14px}
.footer__col a,.footer__col span{display:block;font-size:14px;color:rgba(255,255,255,.66);margin-bottom:10px;transition:color .2s}
.footer__col a:hover{color:#fff}
.news{display:flex;border:1px solid rgba(255,255,255,.28);margin-top:4px}
.news input{flex:1;background:none;border:none;padding:12px 14px;color:#fff;font-family:var(--ff-body);font-size:14px}
.news input::placeholder{color:rgba(255,255,255,.5)}
.news button{background:var(--red);border:none;color:#fff;padding:0 16px;font-size:16px;cursor:pointer}
/* Extra ruimte onderaan: de zwevende contactknop (.fab, rechtsonder, 24px marge)
   dekte anders de links Voorwaarden en Cookies af. Sinds de sticky CTA-balk weg
   is (24-09) is de FAB het enige zwevende element en valt dat direct op. */
.footer__bottom{display:flex;justify-content:space-between;align-items:center;gap:24px;border-top:1px solid rgba(255,255,255,.14);padding-top:20px;padding-bottom:36px;flex-wrap:wrap}
.footer__bottom{padding-bottom:calc(36px + 72px)}
@media(min-width:860px){.footer__meta{padding-right:190px}.footer__bottom{padding-bottom:36px}}
.footer__legal{display:flex;gap:18px;font-size:12px;color:rgba(255,255,255,.45);flex-wrap:wrap}
.footer__meta{display:flex;align-items:center;gap:20px;font-size:12px;color:rgba(255,255,255,.45)}
.socials{display:flex;gap:10px}
.socials a{width:30px;height:30px;border-radius:0;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;font-size:11px;color:rgba(255,255,255,.8)}
.socials a:hover{background:var(--red);color:#fff}

/* ===== productpagina ===== */
.breadcrumb{background:var(--ivory);border-bottom:1px solid var(--line)}
.breadcrumb .container{padding-top:16px;padding-bottom:16px;font-size:13px;color:var(--sec)}
.breadcrumb a,.breadcrumb em{color:var(--sec);font-style:normal}.breadcrumb a:hover{color:var(--red)}.breadcrumb strong{color:var(--charcoal);font-weight:500}.breadcrumb span{margin:0 8px;color:var(--line)}
.h1{font-family:var(--ff-display);font-weight:600;font-size:clamp(38px,5.5vw,68px);line-height:1.0;letter-spacing:-.02em;margin-bottom:20px}
/* Duitse samenstellingen ("Dreifachverglasung", "Kondenswasser") passen op smalle
   schermen niet in één regel en maakten de pagina breder dan het scherm. Breekt
   alleen af wanneer het woord anders niet past, dus geen effect op NL/EN. */
h1,h2,h3,h4,.h1,.h2,.h3,.post-title{overflow-wrap:break-word;hyphens:manual} /* 24 sep: geen automatische afbreking in koppen; gemeten op 360/390px: niets loopt over */
.phero{position:relative;background:var(--ivory);overflow:hidden}
/* Hoger dan 600px: in het ontwerp staat het profiel bijna van boven tot onder in
   de sectie en zit de kop met de balk in de onderste helft. Met de oude hoogte
   stond de balk vrijwel tegen het kruimelpad aan. De extra padding boven duwt de
   (verticaal gecentreerde) tekstkolom naar beneden. */
.phero__inner{position:relative;min-height:580px;display:flex;align-items:center;padding:96px var(--gut) 56px}
/* Het ontwerp geeft de tekstkolom 47% van de schermbreedte; met de vaste 560px
   brak de grotere kop naar een extra regel. */
/* Het ontwerp geeft de tekstkolom 47% van de schermbreedte; dat is 52% van de
   binnenruimte van de sectie (de gutter van 80px valt er aan weerszijden af).
   Met alleen max-width kromp de kolom mee met de tekst en werd het donkere
   paneel smaller dan ontworpen. */
.phero__copy{position:relative;z-index:3;width:max-content;max-width:min(58%,700px)}
/* margin-bottom houdt het donkere paneel onder de staarten van regel 1. Met
   line-height 1.02 steken die ongeveer .16em onder de regelbox uit, en het
   paneel begon precies daar: de onderkant van 'Kozijnen'/'Opslaande' werd
   afgesneden, op elke breedte. */
.phero__t1{display:block;font-family:var(--ff-display);font-weight:600;font-size:var(--phero-fs,clamp(34px,6.4vw,101px));line-height:1.02;letter-spacing:-.02em;color:var(--charcoal);margin-bottom:.34em;white-space:nowrap}
/* De balk is in het ontwerp veel hoger dan de tekstregel (op 66px letter ongeveer
   250px) en loopt onderlangs door achter het donkere paneel. Die hoogte komt uit
   de verticale padding van het gemarkeerde woord; de regelhoogte verandert er
   niet door, dus de kop blijft staan waar hij stond. */
.phero__wie{position:relative;color:#fff;background:var(--red);padding:.12em .08em 1.74em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
/* De rode balk is het verlengde van het gemarkeerde woord: vanaf het woord tot
   de schermrand, en dus altijd exact op dezelfde hoogte. Losse positionering
   (de oude .phero__red) liep uit de pas zodra de kop door clamp() meeschaalde. */
.phero__wie::after{content:"";position:absolute;left:100%;top:0;bottom:0;width:100vw;background:var(--red)}
/* Beeld zonder doorzichtige achtergrond (main.js §2b): balk stopt ervoor,
   anders slaat het witte vlak van de foto een gat in de balk. */
.phero--vlak .phero__wie::after{width:var(--phero-band,100vw)}
.phero__panel{position:relative;display:block;width:max-content;max-width:100%;background:var(--charcoal);color:#fff;padding:0 6px 4px 0}
.phero__panel::before{content:"";position:absolute;top:0;right:100%;bottom:0;width:var(--gut);background:var(--charcoal)}
.phero__t2{display:block;font-family:var(--ff-display);font-weight:600;font-size:var(--phero-fs,clamp(34px,6.4vw,101px));line-height:1.02;letter-spacing:-.02em;color:#fff}
.phero__panel--wrap{padding-right:24px}
.phero__panel--wrap .phero__t2{line-height:1.28}
.phero__panel p{font-size:15px;line-height:1.65;color:rgba(255,253,245,.82);margin-top:16px;max-width:370px}
.phero__actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px}
/* De rode balk liep van 34% tot de rechterrand en dus dwars door de kop: het
   woordeinde van regel 1 stond zwart op rood en was onleesbaar. De balk staat nu
   rechts van de tekstkolom, met zijn rechterrand een stukje onder de foto zodat
   er diepte ontstaat. De foto zelf heeft een witte achtergrond in het bestand;
   met multiply valt dat wit weg tegen de ivoren ondergrond in plaats van als een
   wit vlak door de rode balk te snijden. */
/* De balk loopt van 34% door tot de schermrand en ligt op de hoogte van regel 1
   van de kop. Het laatste woord van die regel krijgt .phero__wie: wit, met
   dezelfde rode achtergrond, zodat woord en balk in elkaar overlopen. Zonder die
   markering stond dat woord zwart op rood en was het onleesbaar. */
.phero__red{display:none}   /* vervangen door .phero__wie::after, zie hierboven */
/* Het ontwerp laat het profiel bijna de hele sectiehoogte vullen (~85%). Het
   vak was zo smal dat de bréédte de maat bepaalde: op 1082px kwam het beeld
   daardoor op 59% van de sectie uit in plaats van ~79%. Vak nu ruim genoeg,
   zodat de hoogte leidend is. */
.phero__photo{position:absolute;right:7%;top:6%;height:85%;width:min(34%,380px);background:center/contain no-repeat;z-index:4}
/* Tussen 640 en 960px bleef in het ontwerp de tweekolomsopzet staan (tekst links,
   product rechts); pas daaronder gaat het onder elkaar. Het omslagpunt stond op
   960px en stapelde dus te vroeg. De foto krimpt mee in plaats van te verspringen. */
@media(max-width:960px) and (min-width:641px){
  /* Zelfde verhoudingen als op desktop: de balk hoort niet tegen de sectierand te
     plakken en het profiel moet er boven- en onderuit kunnen steken. Met de oude
     480px werd het profiel bovenaan afgesneden. */
  .phero__inner{min-height:570px;padding:96px var(--gut) 44px}
  .phero__copy{width:max-content;max-width:58%}
  .phero__photo{right:5%;top:14px;height:min(470px,74vw);width:min(32%,300px)}
}
@media(max-width:640px){
  .phero__inner{flex-direction:column;align-items:stretch;min-height:0;padding:36px var(--gut) 40px}
  /* De kolombreedte van 52% geldt alleen naast het beeld; onder elkaar hoort de
     tekst de volle breedte te krijgen, anders breekt de kop af. */
  .phero__copy{width:auto;max-width:none}
  /* Balk en paneel blijven staan zoals in het ontwerp: de balk begint bij het
     gemarkeerde woord en loopt door tot de schermrand, het donkere paneel sluit
     om regel 2 en de alinea en loopt links de schermrand uit. De kop is hier
     naar verhouding groter dan de vw-maat van de brede opzet (in het ontwerp
     ~7,7vw); onder de 34px-ondergrens van die maat viel regel 1 anders uit
     elkaar. Past regel 1 niet, dan krimpt main.js §2b2 hem alsnog. */
  .phero__t1,.phero__t2{font-size:var(--phero-fs,clamp(22px,7.7vw,49px))}
  /* Het beeld staat hier bóven de tekst, niet ernaast: de balk hoeft dus nergens
     voor te stoppen. */
  .phero--vlak .phero__wie::after{width:100vw}
  /* Knoppen op volle breedte: twee verschillend brede knoppen onder elkaar
     oogden rafelig. */
  .phero__actions{gap:10px}
  .phero__actions .btn{width:100%}
  /* Het profiel is smal en hoog (0,6:1); met 300px stond het als klein voorwerp
     in veel lege ruimte. De hoogte bepaalt hier de maat. */
  .phero__photo{position:relative;inset:auto;width:100%;height:min(95vw,400px);margin-top:12px;order:-1}
}
/* kenmerken – beeld met plusjes (hotspots) + uitvoerings-tabs */
.hotspots{background:var(--ivory)}
.hotspots__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,80px);align-items:center}
.hotspots__media{position:relative;aspect-ratio:1;max-width:640px;width:100%;margin:0 auto}
.hs-stage{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s}
.hs-stage.is-active{opacity:1;visibility:visible}
.hs-stage img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;user-select:none;-webkit-user-drag:none}
.hs-spot{position:absolute;transform:translate(-50%,-50%);z-index:2}
.hs-plus{position:relative;width:34px;height:34px;border:0;padding:0;background:var(--red);color:#fff;cursor:pointer;display:grid;place-items:center;transition:transform .2s var(--ease),background .2s}
.hs-plus::after{content:"";position:absolute;inset:0;background:var(--red);opacity:.35;animation:hs-pulse 2.2s var(--pulse-delay,0s) infinite;z-index:-1}
.hs-plus span{position:relative;width:14px;height:14px}
.hs-plus span::before,.hs-plus span::after{content:"";position:absolute;background:#fff;left:50%;top:50%;transform:translate(-50%,-50%);transition:transform .25s var(--ease)}
.hs-plus span::before{width:14px;height:2px}
.hs-plus span::after{width:2px;height:14px}
.hs-spot:hover .hs-plus,.hs-spot.is-open .hs-plus{background:var(--charcoal);transform:scale(1.08)}
.hs-spot.is-open .hs-plus span::after{transform:translate(-50%,-50%) rotate(90deg)}
.hs-spot.is-open .hs-plus::after,.hs-spot:hover .hs-plus::after{animation:none;opacity:0}
@keyframes hs-pulse{0%{transform:scale(1);opacity:.35}70%{transform:scale(1.7);opacity:0}100%{transform:scale(1.7);opacity:0}}
.hs-info{position:absolute;top:50%;width:min(260px,60vw);background:var(--charcoal);color:#fff;padding:14px 16px;font-size:13px;line-height:1.55;opacity:0;visibility:hidden;transform:translateY(-50%) translateX(-6px);transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s;z-index:5;pointer-events:none;box-shadow:0 12px 30px rgba(0,0,0,.18)}
.hs-info strong{display:block;font-family:var(--ff-display);font-weight:500;font-size:16px;letter-spacing:.01em;margin-bottom:4px}
.hs-info p{color:rgba(255,253,245,.82);margin:0}
.hs-spot--right .hs-info{left:calc(100% + 12px)}
.hs-spot--left .hs-info{right:calc(100% + 12px);transform:translateY(-50%) translateX(6px)}
.hs-info--up.hs-spot .hs-info{top:auto;bottom:0;transform:none}
.hs-spot:hover .hs-info,.hs-spot.is-open .hs-info{opacity:1;visibility:visible;transform:translateY(-50%) translateX(0);pointer-events:auto}
.hs-info--up.hs-spot:hover .hs-info,.hs-info--up.hs-spot.is-open .hs-info{transform:none}
.hs-spot:hover{z-index:6}.hs-spot.is-open{z-index:7}
.hotspots__txt .h2{margin-bottom:12px}
.hotspots__txt .section__sub{margin-bottom:22px}
.hs-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.hs-tab{border:1px solid var(--line);background:transparent;padding:10px 18px;font:inherit;font-size:14px;font-weight:500;color:var(--charcoal);cursor:pointer;transition:.15s var(--ease)}
.hs-tab:hover{border-color:var(--charcoal)}
.hs-tab.is-active{background:var(--charcoal);border-color:var(--charcoal);color:#fff}
.hs-content{display:none}
.hs-content.is-active{display:block}
.hs-content p{color:#4a4a47;line-height:1.65;max-width:480px;margin-bottom:22px}
@media(max-width:900px){
  .hotspots__grid{grid-template-columns:1fr;gap:28px}
  .hotspots__media{order:2;max-width:520px}
  .hotspots__txt{order:1}
  .hs-plus{width:30px;height:30px}
  .hs-info{width:min(220px,58vw);font-size:12px;padding:12px 13px}
}
@media(max-width:560px){
  .hs-spot .hs-info{left:50%;right:auto;top:calc(100% + 10px);bottom:auto;transform:translateX(-50%) translateY(-4px);width:min(240px,80vw)}
  .hs-spot:hover .hs-info,.hs-spot.is-open .hs-info{transform:translateX(-50%) translateY(0)}
  .hs-info--up.hs-spot .hs-info{top:auto;bottom:calc(100% + 10px)}
}
/* goed om te weten – productinfo als UI-modules (tegels / prijstabel / kaarten) */
.pinfo{background:var(--band)}
.pinfo__grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.pinfo__mod{background:var(--ivory);border:1px solid var(--line);padding:clamp(24px,3vw,36px)}
.pinfo__mod--tiles,.pinfo__mod--price{grid-column:1/-1;display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(24px,4vw,56px);align-items:center}
.pinfo__no{display:block;font-family:var(--ff-display);font-weight:500;font-size:12px;letter-spacing:.12em;color:#cf1a1f;margin-bottom:8px}
.pinfo__mod h3{font-family:var(--ff-display);font-weight:500;font-size:clamp(21px,2.2vw,28px);line-height:1.15;margin-bottom:12px}
.pinfo__mod p{font-size:14.5px;line-height:1.65;color:#4a4a47;margin-bottom:12px}
.pinfo__mod-head p{max-width:460px}
/* tegels */
.pinfo__tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pinfo__tile{display:flex;gap:12px;align-items:flex-start;background:var(--band);padding:16px 18px;font-size:14px;line-height:1.5;font-weight:500;color:var(--charcoal)}
.pinfo__tile .material-symbols-outlined{font-size:20px;color:var(--red);flex:none;margin-top:1px}
/* prijstabel */
.pinfo__mod--price{background:var(--charcoal);color:#fff;border-color:var(--charcoal)}
.pinfo__mod--price h3{color:#fff}
.pinfo__mod--price p{color:rgba(255,253,245,.78)}
.pinfo__mod--price .btn{margin-top:6px}
.pinfo__price dl{margin:0}
/* De regel mag wrappen en het bedrag mag afbreken zodra het niet meer naast de
   omschrijving past. Met nowrap op de dd liep de prijslijst op tussenbreedtes
   buiten beeld, het duidelijkst in het Duits: /producten/kunststofffenster/
   was op 640px 103px te breed en op 961px zelfs 205px. */
.pinfo__price dl div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 20px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.14);font-size:14.5px}
.pinfo__price dt{min-width:0;flex:1 1 60%}
.pinfo__price dd{min-width:0}
.pinfo__price dl div:first-child{border-top:1px solid rgba(255,255,255,.14)}
.pinfo__price dt{color:rgba(255,253,245,.82)}
.pinfo__price dd{font-family:var(--ff-display);font-weight:500;font-size:17px;letter-spacing:.01em;white-space:normal;overflow-wrap:break-word;text-align:right;margin-left:auto}
.pinfo__price-note{font-size:12.5px;color:rgba(255,253,245,.6)!important;margin:14px 0 0!important}
/* kaart */
.pinfo__list{list-style:none;margin:4px 0 6px;display:grid;gap:9px}
.pinfo__list li{position:relative;padding-left:26px;font-size:14px;line-height:1.5;color:var(--charcoal);font-weight:500}
.pinfo__list li::before{content:"";position:absolute;left:0;top:.42em;width:14px;height:14px;background:var(--red);clip-path:polygon(0 45%,12% 33%,40% 60%,88% 8%,100% 20%,40% 85%)}
.pinfo__note{display:flex;gap:10px;align-items:flex-start;background:var(--band);padding:12px 14px;font-size:13px;line-height:1.5;color:var(--charcoal);margin:14px 0 0!important}
.pinfo__note .material-symbols-outlined{font-size:18px;color:var(--red);flex:none;margin-top:1px}
/* lees verder */
.pinfo__more{margin-top:4px}
.pinfo__more summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--charcoal);padding:4px 0;margin-bottom:8px}
.pinfo__more summary::-webkit-details-marker{display:none}
.pinfo__more summary::after{content:"+";font-family:var(--ff-display);font-size:16px;color:var(--red);line-height:1}
.pinfo__more[open] summary::after{content:"–"}
.pinfo__mod--price .pinfo__more summary{color:#fff}
.pinfo__more p{font-size:14px}
@media(max-width:900px){
  .pinfo__grid{grid-template-columns:1fr;gap:16px}
  .pinfo__mod--tiles,.pinfo__mod--price{grid-template-columns:1fr;gap:20px}
  .pinfo__tiles{grid-template-columns:1fr}
}
.chip{display:inline-block;padding:5px 11px;background:var(--band);color:var(--sec);font-weight:600;font-size:11px;letter-spacing:.05em}
.chip--red{background:var(--red);color:#fff}
/* configurator slot-act */
.cfg{display:grid;grid-template-columns:1.5fr .9fr;gap:48px;align-items:start}
.cfg__groups{display:flex;flex-direction:column;gap:30px}
.cfg__label{display:block;font-size:11px;font-weight:600;letter-spacing:.06em;color:#cf1a1f;margin-bottom:12px}
.cfg__swatches{display:flex;flex-wrap:wrap;gap:10px}
.cfg__swgroups{display:flex;flex-direction:column;gap:20px;max-height:540px;overflow-y:auto;padding-right:8px}
.cfg__swhead{display:flex;align-items:center;gap:7px;font-size:10px;font-weight:600;letter-spacing:.08em;color:var(--sec);margin-bottom:10px}
.cfg__swhead i{font-style:normal;opacity:.5}
.cfg__swgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:8px}
.cfg-sw{aspect-ratio:1;border:1px solid var(--line);background:var(--band) center/cover no-repeat;cursor:pointer;padding:0;transition:.15s var(--ease)}
.cfg-sw:hover{transform:translateY(-2px)}
.cfg-sw.is-on{box-shadow:0 0 0 2px var(--red);border-color:var(--red)}
.cfg__opts{display:flex;flex-wrap:wrap;gap:8px}
.cfg__opts--col{flex-direction:column;align-items:stretch}
.cfg-opt{border:1px solid var(--line);background:transparent;padding:12px 16px;font:inherit;font-size:14px;font-weight:500;cursor:pointer;text-align:left;transition:.15s var(--ease)}
.cfg-opt:hover{border-color:var(--charcoal)}
.cfg-opt.is-on{background:var(--charcoal);border-color:var(--charcoal);color:#fff}
.cfg-opt em{display:block;font-style:normal;font-weight:400;font-size:12px;color:var(--sec);margin-top:3px}
.cfg-opt.is-on em{color:rgba(255,255,255,.7)}
.cfg__summary{background:var(--band);border:1px solid var(--line);padding:26px;position:sticky;top:100px}
.cfg__chip{display:block;width:100%;height:96px;background:var(--band) center/cover no-repeat;border:1px solid var(--line);margin-bottom:18px}
.cfg__list{margin:6px 0 16px}
.cfg__list div{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.cfg__list dt{color:#626462}
.cfg__list dd{font-weight:500;text-align:right}
.cfg__note{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:#4a4a47;line-height:1.5;margin-bottom:18px}
.cfg__summary .link{display:inline-block;margin-top:12px;font-size:14px}
@media(max-width:860px){.cfg{grid-template-columns:1fr;gap:32px}.cfg__summary{position:static}}
/* materiaal & opties */
.opt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;align-items:start}
.opt-card{background:var(--white);border:1px solid var(--line);padding:24px}
.opt-card__cat{font-weight:600;font-size:11px;letter-spacing:.08em;color:var(--red)}
.opt-card h3{font-family:var(--ff-display);font-weight:500;font-size:24px;margin:6px 0 16px}
.swatches{display:flex;flex-wrap:wrap;gap:10px}
.swatches i{width:40px;height:40px;display:block}
.opt-card .link{display:inline-block;margin-top:16px}
.glas-list,.prof-list{list-style:none}
.glas-list li{display:flex;justify-content:space-between;align-items:center;padding:13px 0;border-bottom:1px solid var(--line)}
.glas-list li:last-child{border-bottom:0}
.glas-list li.is-active{font-weight:600}
.glas-list em{font-style:normal;font-size:11px;color:var(--red);letter-spacing:.04em;margin-left:8px}
.glas-u{font-weight:500;color:var(--sec)}
.prof-list li{padding:12px 0;border-bottom:1px solid var(--line)}
.prof-list li:last-child{border-bottom:0}
.prof-list strong{display:block;font-family:var(--ff-display);font-weight:500;font-size:18px}
.prof-list span{font-size:13px;color:var(--sec)}
/* prijsindicatie */
.prijs{text-align:center}
.prijs__inner{max-width:680px;margin:0 auto;display:flex;flex-direction:column;align-items:center}
.prijs__inner .eyebrow{justify-content:center}
.prijs p{color:var(--sec);margin:14px 0 22px}
.prijs__chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:26px}
.prijs__chips .chip{padding:9px 15px;font-size:12px;letter-spacing:.02em}
@media(max-width:960px){.phero__inner{grid-template-columns:1fr;gap:36px}.phero__visual{height:420px}.opt-grid{grid-template-columns:1fr}}

/* ===== content-pagina's: gedeelde hero ===== */
.pagehero{padding:clamp(48px,7vw,90px) 0 clamp(28px,4vw,48px)}
.pagehero .h1{margin-bottom:18px}
.pagehero__lead{font-size:clamp(16px,1.5vw,20px);color:#4a4a47;max-width:660px;line-height:1.6}
.team__cap{position:absolute;left:0;right:0;bottom:0;background:rgba(51,51,49,.82);color:#fff;font-size:13px;padding:12px 18px}
.misgaat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.misgaat-card{background:var(--white);border:1px solid var(--line);border-left:3px solid var(--red);padding:26px}
.misgaat-card h3{font-family:var(--ff-display);font-weight:500;font-size:22px;margin-bottom:10px}
.misgaat-card p{font-size:14px;line-height:1.6;color:var(--sec)}
@media(max-width:960px){.wsteps{grid-template-columns:1fr 1fr}.detail__body{grid-template-columns:1fr;gap:18px;padding-left:0}.team__grid{grid-template-columns:1fr;gap:32px}.misgaat-grid{grid-template-columns:1fr}}

/* ===== subsidie (ISDE) ===== */
.check{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;background:var(--red);color:#fff;font-size:11px;font-weight:700;flex:0 0 auto}
.check--lg{width:26px;height:26px;font-size:14px}
.sub-hero{padding:clamp(40px,6vw,72px) 0 clamp(36px,5vw,64px)}
.sub-hero__grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.sub-hero__lead{font-size:clamp(16px,1.5vw,19px);color:#4a4a47;line-height:1.6;margin:16px 0 22px;max-width:480px}
.sub-badges{display:flex;flex-wrap:wrap;gap:10px}
.sub-badge{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);padding:8px 14px;font-size:13px;font-weight:500}
.sub-badge--muted{color:var(--sec)}
.calc{background:var(--white);border:1px solid var(--line);padding:clamp(24px,2.5vw,34px)}
.calc__head{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:22px}
.calc__title{font-family:var(--ff-display);font-weight:500;font-size:18px;letter-spacing:.04em}
.calc__sub{font-size:12px;color:var(--sec)}
.calc__q{border:0;padding:0;margin:0 0 22px}
.calc__q legend{font-size:13px;font-weight:600;color:var(--charcoal);margin-bottom:10px;padding:0}
.calc__opts{display:flex;flex-wrap:wrap;gap:8px}
.calc__opt{cursor:pointer}
.calc__opt input{position:absolute;opacity:0;width:0;height:0}
.calc__opt span{display:inline-block;border:1px solid var(--line);padding:9px 14px;font-size:13px;font-weight:500;transition:.18s var(--ease)}
.calc__opt:has(input:checked) span{background:var(--red);border-color:var(--red);color:#fff}
.calc__opt input:focus-visible + span{outline:2px solid var(--charcoal);outline-offset:2px}
.calc__range input[type=range]{width:100%;accent-color:var(--red);height:4px;margin:6px 0 12px}
.calc__rangeval{font-size:14px;color:var(--charcoal)}
.calc__rangeval strong{font-family:var(--ff-display);font-weight:500;font-size:26px;color:var(--red);margin-right:4px}
.calc__rangeval span{color:var(--sec);margin-left:10px;font-size:13px}
.calc__hint{font-size:12.5px;color:var(--sec);line-height:1.5;margin-top:8px}
.calc__select{position:relative}
.calc__select select{width:100%;appearance:none;border:1px solid var(--line);background:transparent;padding:11px 36px 11px 14px;font:inherit;font-size:14px;cursor:pointer}
.calc__select .caret{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--sec);pointer-events:none}
/* "Kijk ook wat je gemeente doet" onder de ISDE-uitkomst. */
.sub-lokaal{background:var(--band)}
.sub-lokaal__inner{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:start}
.sub-lokaal__inner p{color:#4a4a47;line-height:1.65;margin:0 0 16px;max-width:60ch}
.sub-lokaal__inner .h2{margin-bottom:16px}
.sub-lokaal__feiten{background:var(--white);border:1px solid var(--line);padding:28px}
.sub-lokaal__feiten h3{font-family:var(--ff-display);font-weight:500;font-size:19px;margin-bottom:14px}
.sub-lokaal__feiten ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.sub-lokaal__feiten li{position:relative;padding-left:20px;font-size:14.5px;line-height:1.6;color:#4a4a47}
.sub-lokaal__feiten li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:1.5px;background:var(--red)}
.sub-lokaal__bron{font-size:12px;color:var(--sec);margin:18px 0 0!important}
@media(max-width:860px){.sub-lokaal__inner{grid-template-columns:1fr;gap:32px}}
/* Lege beginstand van de ISDE-uitkomst: geen bedrag, en de uitleg iets lichter.
   Er stond eerst een em-dash als plaatshouder, maar die telt gewoon mee als dash. */
.sub-result__inner.is-leeg .res__amount{display:none}
.sub-result__inner.is-leeg .res__pct{opacity:.75}
.sub-result{background:var(--charcoal);color:var(--ivory);padding:clamp(48px,6vw,80px) 0}
.sub-result__inner{max-width:680px;margin:0 auto;text-align:center}
.sub-result__inner .eyebrow{color:var(--ivory)}
.res__amount{display:block;font-family:var(--ff-display);font-weight:600;font-size:clamp(56px,9vw,104px);line-height:1;color:#fff;margin:10px 0 14px}
.res__pct{font-size:clamp(16px,1.6vw,20px);color:#fff;max-width:520px;margin:0 auto;line-height:1.5}
.res__disc{font-size:13px;color:rgba(255,253,245,.6);margin:12px auto 0;max-width:520px;line-height:1.5}
.sub-result__inner.is-blocked .res__amount{color:rgba(255,255,255,.45);font-size:clamp(36px,5vw,56px)}
.res__note{border-top:1px solid rgba(255,253,245,.22);margin:28px auto 0;padding-top:24px;max-width:620px}
.res__note-tag{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.06em;color:#fff;margin-bottom:12px}
.res__note p{font-size:14px;color:rgba(255,253,245,.82);line-height:1.6;margin-bottom:20px}
.voorw-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.voorw-card{display:flex;gap:16px;align-items:flex-start;border:1px solid var(--line);border-top:3px solid var(--red);padding:22px 24px}
.voorw-card .check--lg{margin:2px 0 0;flex:none}
.voorw-card h3{font-family:var(--ff-display);font-weight:500;font-size:19px;line-height:1.25;margin:0 0 6px}
.voorw-card p{font-size:13px;color:var(--sec);line-height:1.6;margin:0}
.isde-sec{background:var(--band)}
.isde-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:64px;align-items:start;margin-bottom:56px}
.isde-body p{color:#4a4a47;line-height:1.7;margin-top:16px;max-width:560px}
.def-card{background:var(--white);border:1px solid var(--line);padding:28px}
.def-card__tag{display:block;font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--red);margin-bottom:16px}
.def-list{display:flex;flex-direction:column}
.def-row{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--line);font-size:14px}
.def-row:last-child{border-bottom:0}
.def-row dt{color:var(--sec)}
.def-row dd{font-weight:500;text-align:right}
.kb-wrap .eyebrow{margin-bottom:18px}
.kb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.kb-card{display:flex;flex-direction:column;gap:10px;background:var(--white);border:1px solid var(--line);padding:24px;transition:.2s var(--ease)}
.kb-card:hover{transform:translateY(-3px);border-color:var(--charcoal)}
.kb-card__meta{font-size:12px;color:var(--sec);letter-spacing:.04em}
.kb-card h3,.kb-card h2{font-family:var(--ff-display);font-weight:500;font-size:20px;line-height:1.25;flex:1}
.sub-case{background:var(--band)}
.sub-case__grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.sub-case__media{aspect-ratio:4/3;background:var(--charcoal) center/cover}
.sub-case__who{display:block;font-size:13px;font-weight:600;letter-spacing:.08em;margin:14px 0 14px;color:var(--sec)}
.sub-case__title{font-family:var(--ff-display);font-weight:500;font-size:clamp(24px,3vw,36px);line-height:1.15;margin-bottom:14px}
.sub-case__text{font-size:clamp(15px,1.5vw,18px);color:#4a4a47;line-height:1.6;margin-bottom:24px;max-width:520px}
@media(max-width:960px){
  .sub-hero__grid{grid-template-columns:1fr;gap:36px}
  .sub-case__grid{grid-template-columns:1fr;gap:28px}
  .voorw-grid{grid-template-columns:1fr 1fr}
  .isde-grid{grid-template-columns:1fr;gap:32px}
  .kb-grid{grid-template-columns:1fr}
}
@media(max-width:560px){.voorw-grid{grid-template-columns:1fr}}

/* ===== content-pagina's: gedeelde helpers ===== */
.section--tight{padding:clamp(32px,4vw,56px) 0}
.lead-text{font-size:clamp(16px,1.6vw,19px);color:#4a4a47;line-height:1.7;max-width:760px;margin-bottom:34px}
.link--lg{font-size:16px;margin-top:26px;display:inline-block}
.btn--block{display:flex;width:100%;justify-content:center;margin-top:8px}
.btn--ghost{background:transparent;color:var(--charcoal);border:1px solid var(--line)}
.btn--ghost:hover{border-color:var(--charcoal)}
.info-panel__t{display:block;font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--red);margin-bottom:14px}
.pagehero__tel{color:var(--sec);font-size:14px;margin-left:6px}
.faq__list--wide{margin-top:8px}
.faq-foot{margin-top:26px;font-size:15px;color:var(--sec)}

/* over ons */
.about-hero{padding:clamp(40px,6vw,72px) 0 0}
.about-hero__copy{max-width:760px;margin-bottom:clamp(28px,4vw,48px)}
.about-hero__media{position:relative;aspect-ratio:21/9;overflow:hidden;background:var(--charcoal)}
.about-hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 22%}
.about-hero__cap{position:absolute;left:0;bottom:0;background:rgba(51,51,49,.88);color:#fff;font-size:12px;padding:9px 14px}
/* feiten-strip */
.about-facts{background:var(--ivory)}
.about-facts__row{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-top:0}
.about-fact{padding:clamp(20px,2.6vw,30px) clamp(18px,2.4vw,30px);border-left:1px solid var(--line)}
.about-fact:first-child{border-left:0}
.about-fact b{display:block;font-family:var(--ff-display);font-weight:600;font-size:clamp(24px,2.6vw,34px);line-height:1;color:var(--charcoal)}
.about-fact span{display:block;font-size:13px;color:var(--sec);margin-top:8px;line-height:1.45}
/* verhaal + stappen */
.about-story__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);align-items:start}
.about-story__txt .h2{margin-bottom:16px}
.about-story__txt .lead-text{margin-bottom:0}
.about-steps{background:var(--band);padding:clamp(22px,3vw,34px)}
.about-steps__head{display:block;font-family:var(--ff-display);font-weight:500;font-size:18px;margin-bottom:14px}
.about-steps ol{list-style:none}
.about-steps li{display:flex;gap:16px;padding:13px 0;border-top:1px solid var(--line)}
.about-steps__no{font-family:var(--ff-display);font-weight:500;font-size:13px;letter-spacing:.1em;color:var(--red);flex:none;width:26px;padding-top:3px}
.about-steps strong{display:block;font-family:var(--ff-display);font-weight:500;font-size:17px;margin-bottom:2px}
.about-steps p{font-size:13.5px;line-height:1.5;color:var(--sec)}
/* aanspreekpunt */
.about-contact{background:var(--charcoal);color:#fff;overflow:hidden}
.about-contact__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,5vw,72px);align-items:end}
.about-contact__txt{padding:clamp(48px,7vw,96px) 0}
.about-contact__txt .h2{color:#fff;margin-bottom:14px}
.about-contact__txt p{color:rgba(255,253,245,.8);max-width:520px;line-height:1.65;margin-bottom:24px}
.about-contact__actions{display:flex;gap:12px;flex-wrap:wrap}
.btn--ghost-light{color:#fff;border-color:rgba(255,255,255,.35)}
.btn--ghost-light:hover{border-color:#fff}
.about-contact__hours{display:block;margin-top:14px;font-size:13px;color:rgba(255,253,245,.55)}
.about-contact__media{position:relative;align-self:end;display:flex;justify-content:center}
.about-contact__media img{display:block;width:min(100%,460px);height:auto;margin-top:clamp(24px,4vw,48px)}
.about-contact__tag{position:absolute;left:0;bottom:clamp(24px,4vw,48px);background:var(--red);color:#fff;padding:10px 14px;line-height:1.2}
.about-contact__tag b{display:block;font-family:var(--ff-display);font-weight:500;font-size:16px}
.about-contact__tag i{display:block;font-style:normal;font-size:12px;opacity:.85;margin-top:2px}
@media(max-width:900px){
  .about-hero__media{aspect-ratio:4/3}
  .about-facts__row{grid-template-columns:1fr 1fr}
  .about-fact:nth-child(3){border-left:0}.about-fact:nth-child(n+3){border-top:1px solid var(--line)}
  .about-story__grid{grid-template-columns:1fr;gap:28px}
  .about-contact__grid{grid-template-columns:1fr;gap:0}
  .about-contact__txt{padding:44px 0 28px}
  .about-contact__media img{width:min(100%,360px);margin-top:0}
}
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:clamp(28px,4vw,44px)}
.team-card__img{aspect-ratio:4/5;background:var(--band) center/cover no-repeat;margin-bottom:12px}
.team-card strong{display:block;font-family:var(--ff-display);font-weight:500;font-size:18px}
.team-card span{font-size:13px;color:var(--sec)}
@media(max-width:860px){.team-grid{grid-template-columns:repeat(2,1fr)}}
/* Waarden: kolommen met verticale verdelers */
.values-cols{display:grid;grid-template-columns:repeat(3,1fr);margin-top:36px}
.value-col{padding:0 34px;text-align:center}
.value-col+.value-col{border-left:1px solid var(--line)}
.value-col__mark{display:block;width:24px;height:2px;background:var(--red);margin:0 auto 16px}
.value-col h3{font-family:var(--ff-display);font-weight:500;font-size:clamp(19px,2vw,24px);margin:0 0 12px}
.value-col p{font-size:14px;color:var(--sec);line-height:1.6}
@media(max-width:760px){.values-cols{grid-template-columns:1fr}.value-col{padding:26px 0;border-left:0!important}.value-col:first-child{padding-top:0}.value-col+.value-col{border-top:1px solid var(--line)}}
.parent-band{background:var(--band);color:var(--charcoal);padding:clamp(40px,5vw,64px) 0}
.parent-band__inner{display:flex;flex-direction:column;align-items:center;text-align:center;gap:28px}
.parent-band__body .h2,.parent-band__body p{margin-left:auto;margin-right:auto}
.parent-band__logo{width:180px;height:88px;flex:none;background:var(--white);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;transition:border-color .2s var(--ease)}
.parent-band__logo:hover{border-color:var(--charcoal)}
.parent-band__logo img{display:block;width:auto;height:44px;max-width:76%}
.parent-band__body .h2{color:var(--charcoal);max-width:640px}
.parent-band__body p{color:#4a4a47;margin:14px 0 22px;max-width:560px;line-height:1.6}
.parent-band__body .btn--dark{background:var(--charcoal);color:#fff}
/* over-ons team gestapeld + werkgebied 2-koloms */
.team-stack__head{max-width:680px;margin-bottom:30px}
.team-stack__head p{color:#4a4a47;margin-top:14px;line-height:1.6}
.team-stack__media{position:relative;aspect-ratio:21/9;background:var(--charcoal) center/cover;margin-bottom:34px}
.werkgebied .wg-places{display:grid;grid-template-columns:1fr 1fr;column-gap:36px;align-content:start}
.werkgebied .wg-places__title,.werkgebied .wg-places>.link{grid-column:1/-1}
/* werkgebied */
.wg-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.wg-map{aspect-ratio:4/3;background:var(--band) center/cover;border:1px solid var(--line)}
/* interactieve kaart (Leaflet) */
.werkgebied__map,.wg-map{position:relative;overflow:hidden;isolation:isolate;z-index:0}
.werkgebied__map .leaflet-tile-pane,.wg-map .leaflet-tile-pane{filter:grayscale(1) contrast(.92) brightness(1.04)}
.leaflet-control-attribution{font-size:10px;background:rgba(255,253,245,.8)!important}
.leaflet-container{font-family:var(--ff-body);background:var(--band)}
.leaflet-interactive,.wg-tip{cursor:pointer}
.leaflet-container a{color:var(--charcoal)}
.wg-tip{background:var(--charcoal);color:#fff;border:none;border-radius:0;font-weight:600;font-size:12px;padding:3px 8px;box-shadow:0 2px 6px rgba(0,0,0,.25);white-space:nowrap}
.wg-tip:before{display:none!important}
.leaflet-popup-content-wrapper,.leaflet-popup-tip{border-radius:0}
.leaflet-popup-content{font-size:13px;line-height:1.5}
.leaflet-popup-content strong{font-family:var(--ff-display);font-weight:500;font-size:15px}
.leaflet-popup-content a{color:var(--red);font-weight:600}
.leaflet-bar a{border-radius:0!important;color:var(--charcoal)}
.wg-places__title{display:block;font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--red);margin-bottom:14px}
.wg-link{display:flex;justify-content:space-between;align-items:center;padding:13px 0;border-bottom:1px solid var(--line);font-size:15px;font-weight:500;color:var(--charcoal);transition:.15s var(--ease)}
.wg-link:hover{padding-left:6px;color:var(--red)}
.wg-link span{color:var(--red)}
.wg-places .link{margin-top:18px;display:inline-block}
.wg-places--row{display:grid;grid-template-columns:repeat(4,1fr);gap:0 32px}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:start}
.cm-card{display:flex;gap:16px;align-items:center;border:1px solid var(--line);padding:18px 20px;margin-bottom:12px;transition:.18s var(--ease)}
.cm-card:hover{border-color:var(--charcoal)}
.cm-card__ico{font-size:23px;color:var(--red);width:46px;height:46px;display:flex;align-items:center;justify-content:center;background:var(--band);flex:0 0 auto}
.cm-card__lbl{display:block;font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--sec)}
.cm-card strong{display:block;font-size:17px;margin:2px 0}
.cm-card__sub{display:block;font-size:12px;color:var(--sec)}
.info-panel{border:1px solid var(--line);padding:24px;margin-top:22px}
.info-panel p{font-size:14px;line-height:1.7;color:#4a4a47}
.hours{margin-top:14px}
.hours div{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px}
.hours div:last-child{border-bottom:0}
.hours dt{color:var(--sec)}
.why-list{margin-top:22px}
.why-list p{display:flex;gap:10px;align-items:flex-start;font-size:14px;padding:7px 0;line-height:1.5}
/* formulieren */
.form-card{background:var(--white);border:1px solid var(--line);padding:clamp(26px,3vw,40px)}
.form-card--wide{max-width:820px;margin:0 auto}
.form-card__title{font-family:var(--ff-display);font-weight:500;font-size:clamp(22px,2.6vw,30px);margin:6px 0 8px}
.form-card__sub{font-size:14px;color:var(--sec);line-height:1.6;margin-bottom:22px;max-width:560px}
.field{display:block;margin-bottom:16px}
.field>span{display:block;font-size:13px;font-weight:500;margin-bottom:7px}
.field input,.field textarea,.sel select{width:100%;border:1px solid var(--line);background:transparent;padding:11px 14px;font:inherit;font-size:14px}
.field input:focus,.field textarea:focus,.sel select:focus{outline:none;border-color:var(--charcoal)}
.field textarea{resize:vertical}
.field.is-error input,.field.is-error textarea,.field.is-error .sel select{border-color:var(--red)}
.field.is-error>span{color:var(--red)}
.check-row.is-error{color:var(--red)}
.check-row.is-error input{outline:1.5px solid var(--red)}
.form-sent{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:56px 32px;background:var(--band);border:1px solid var(--line)}
.form-sent .material-symbols-outlined{font-size:60px;color:var(--red)}
.form-sent h3{font-family:var(--ff-display);font-weight:500;font-size:28px;line-height:1.1}
.form-sent p{color:var(--sec);max-width:460px;margin:0}
.bk-bar__field.is-error input{outline:1.5px solid var(--red);outline-offset:0}
.bk-bar__field.is-error span{color:var(--red)}
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field-grid--3{grid-template-columns:repeat(3,1fr)}
.sel{position:relative}
.sel select{appearance:none;padding-right:36px;cursor:pointer}
.sel .caret{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--sec);pointer-events:none}
.check-row{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.5;color:#4a4a47;margin:10px 0}
.check-row input{margin-top:2px;accent-color:var(--red);flex:0 0 auto}
.check-row--box{border:1px solid var(--line);padding:14px 16px;background:var(--band)}
.check-row--box small{display:block;color:var(--sec);margin-top:4px}
.form-note{font-size:12px;color:var(--sec);margin-top:12px}
.dropzone{border:1.5px dashed var(--line);padding:26px;text-align:center;color:var(--sec);font-size:14px;cursor:pointer}
.dropzone small{display:block;font-size:12px;margin-top:6px}

/* projecten */
.proj-toolbar__inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.chips__lbl{font-size:13px;color:var(--sec);margin-right:4px}
.chip{border:1px solid var(--line);background:transparent;padding:8px 14px;font:inherit;font-size:13px;font-weight:500;cursor:pointer;transition:.15s var(--ease);color:var(--charcoal)}
.chip:hover{border-color:var(--charcoal)}
.chip.is-on{background:var(--charcoal);border-color:var(--charcoal);color:#fff}
.chip i{font-style:normal;opacity:.6;margin-left:5px}
.sel--sort select{border:1px solid var(--line);font-size:13px;padding:8px 34px 8px 12px}
.proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.proj-grid--3{grid-template-columns:repeat(3,1fr)}
.proj-card{display:flex;flex-direction:column;border:1px solid var(--line);background:var(--white);position:relative;transition:.2s var(--ease)}
.proj-card:hover{transform:translateY(-3px);border-color:var(--charcoal)}
.proj-card__img{aspect-ratio:4/3;background:var(--band) center/cover}
.proj-card__tag{position:absolute;top:0;left:0;background:var(--red);color:#fff;font-size:11px;font-weight:600;letter-spacing:.05em;padding:6px 12px;z-index:2}
.proj-card__loc{font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--sec);padding:18px 20px 0}
.proj-card__fam{font-family:var(--ff-display);font-weight:500;font-size:21px;padding:6px 20px 0}
.proj-card__d{font-size:13px;color:var(--sec);line-height:1.5;padding:8px 20px 0;flex:1}
.proj-card .link{padding:14px 20px 20px;font-size:14px}
.proj-card--feat{grid-column:span 3;flex-direction:row;align-items:stretch}
.proj-card--feat .proj-card__img{aspect-ratio:auto;width:55%;min-height:340px;flex:none}
.proj-card--feat .proj-card__body{display:flex;flex-direction:column;justify-content:center;flex:1;padding:clamp(28px,3.2vw,48px)}
.proj-card--feat .proj-card__body>*{padding-left:0;padding-right:0}
.proj-card--feat .proj-card__loc{padding-top:0}
.proj-card--feat .proj-card__d{flex:none;padding-top:10px}
.proj-card--feat .proj-card__fam{font-size:clamp(26px,2.6vw,32px)}
.loadmore{text-align:center;margin-top:40px;display:flex;flex-direction:column;align-items:center;gap:14px}
.loadmore span{font-size:13px;color:var(--sec)}

/* project detail */
.pd__grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.pd__media{position:sticky;top:100px}
.pd__photo{aspect-ratio:4/3;background:var(--band) center/cover}
.pd__thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}
.pd__thumbs span{aspect-ratio:1;background:var(--band) center/cover;display:block}
.pd__meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.pd__meta span{border:1px solid var(--line);padding:5px 12px;font-size:12px;font-weight:500;color:var(--sec)}
.pd-spec{margin:8px 0 24px}
.pd-spec div{display:grid;grid-template-columns:160px 1fr;gap:16px;padding:13px 0;border-bottom:1px solid var(--line);font-size:14px}
.pd-spec dt{font-size:11px;font-weight:600;letter-spacing:.05em;color:var(--red)}
.pd-isde{display:flex;align-items:center;gap:12px;background:var(--band);padding:16px 20px;margin-bottom:22px}
.pd-isde p{flex:1;font-size:14px}
.pd-region{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}

/* kennisbank */
.kb-search{display:flex;align-items:center;gap:12px;border:1px solid var(--line);padding:4px 18px;background:var(--white)}
.kb-search__ico{color:var(--sec);font-size:20px;display:inline-flex;align-items:center}
.kb-search input{flex:1;border:0;background:transparent;font:inherit;font-size:15px;padding:14px 0;outline:none}
.kb-search__count{font-size:12px;color:var(--sec);white-space:nowrap}
.kb-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
/* Negen categorieën vulden op een telefoon vijf regels onder elkaar. Daar is het
   nu één strip die je opzij schuift, met de chips doorlopend tot de schermrand
   zodat zichtbaar is dat er meer staat. Op grotere schermen passen ze gewoon. */
@media(max-width:720px){
  .kb-chips{
    flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;
    scrollbar-width:none;-ms-overflow-style:none;
    margin-left:calc(var(--gut) * -1);margin-right:calc(var(--gut) * -1);
    padding-left:var(--gut);padding-right:var(--gut);
    scroll-padding-left:var(--gut);
  }
  .kb-chips::-webkit-scrollbar{display:none}
  .kb-chips .chip{flex:none;scroll-snap-align:start}
}
.kb-featured{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);background:var(--white);overflow:hidden;transition:.2s var(--ease)}
.kb-featured:hover{border-color:var(--charcoal)}
.kb-featured__img{background:var(--band) center/cover;min-height:300px}
.kb-featured__body{padding:clamp(26px,3vw,44px)}
.kb-featured__meta{display:block;font-size:12px;color:var(--sec);letter-spacing:.04em;margin:8px 0 10px}
.kb-featured__body p{font-size:15px;color:#4a4a47;line-height:1.6;margin:12px 0 18px}
.kb-grid--4{grid-template-columns:repeat(4,1fr)}
.kb-card__cat{font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--red)}
.kb-card--img{padding:0;gap:0}
.kb-card__img{aspect-ratio:16/10;background:var(--band) center/cover;display:block}
.kb-card__body{display:flex;flex-direction:column;gap:8px;padding:20px;flex:1}
.kb-card__body h3,.kb-card__body h2{flex:1;font-family:var(--ff-display);font-weight:500;font-size:19px;line-height:1.25}

/* blogpost */
.post{padding-top:8px}
.post-header{max-width:760px;margin:0 auto;padding-top:24px;padding-bottom:8px}
.post-meta{display:block;font-size:13px;color:var(--sec);margin:10px 0 14px}
.post-title{margin-bottom:16px}
.post-intro{font-size:clamp(17px,1.8vw,21px);color:#4a4a47;line-height:1.6;margin-bottom:24px}
.post-byline{display:flex;align-items:center;gap:14px;border-top:1px solid var(--line);padding-top:20px}
.post-byline__av,.post-author__av{width:48px;height:48px;border-radius:0;background:var(--band) center/cover;flex:0 0 auto}
.post-byline strong{display:block;font-size:14px}
.post-byline span{font-size:12px;color:var(--sec)}
.post-share{margin-left:auto;font-size:13px;color:var(--sec);display:flex;align-items:center;gap:8px}
.post-share a{width:30px;height:30px;border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;font-size:12px}
.post-hero{margin:24px auto;max-width:1000px}
.post-hero__img{aspect-ratio:16/8;background:var(--band) center/cover}
.post-body{max-width:720px;margin:0 auto;padding:16px 24px 8px}
.post-body h2{font-family:var(--ff-display);font-weight:500;font-size:clamp(24px,3vw,32px);margin:38px 0 14px}
.post-body p{font-size:16px;line-height:1.75;color:#3a3a38;margin-bottom:18px}
.post-quote{border-left:3px solid var(--red);padding:6px 0 6px 24px;margin:28px 0;font-family:var(--ff-serif);font-style:italic;font-size:22px;line-height:1.4;color:var(--charcoal)}
.post-quote cite{display:block;font-family:var(--ff-base);font-style:normal;font-size:13px;color:var(--sec);margin-top:12px}
.post-figure{margin:28px 0}
.post-figure__img{aspect-ratio:16/9;background:var(--band) center/cover}
.post-figure figcaption{font-size:13px;color:var(--sec);margin-top:10px;line-height:1.5}
.post-steps{list-style:none;counter-reset:s;margin:18px 0}
.post-steps li{padding:12px 0;border-bottom:1px solid var(--line);font-size:15px;line-height:1.6;color:#3a3a38}
.post-steps strong{color:var(--red);margin-right:6px}
.callout{border:1px solid var(--line);background:var(--band);padding:28px;margin:30px 0}
.callout h3{font-family:var(--ff-display);font-weight:500;font-size:22px;margin:8px 0 8px}
.callout p{font-size:14px;color:#4a4a47;margin-bottom:16px;line-height:1.6}
.callout--red{background:var(--red);border-color:var(--red);color:#fff}
.callout--red h3,.callout--red p{color:#fff}
.callout--red .btn--ivory{background:var(--white);color:var(--charcoal)}
.post-author{max-width:760px;margin:24px auto 0;padding:24px;border-top:1px solid var(--line)}
.post-author__row{display:flex;gap:16px;align-items:flex-start;margin-top:10px}
.post-author__row strong{font-size:15px}
.post-author__row p{font-size:14px;color:var(--sec);line-height:1.6;margin-top:6px}

/* wizard + trust-strip */
.wz-hero{padding:clamp(40px,5vw,64px) 0 clamp(16px,2vw,28px)}
.wz-hero__alt{font-size:14px;color:var(--sec);margin-top:14px}
.wizard{border:1px solid var(--line);background:var(--white);padding:clamp(26px,3.5vw,48px)}
.wz-nav{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;border-bottom:1px solid var(--line);padding-bottom:24px;margin-bottom:30px}
.wz-nav__item{display:flex;gap:12px;align-items:center;opacity:.45;transition:.2s var(--ease)}
.wz-nav__item.is-active,.wz-nav__item.is-done{opacity:1;cursor:pointer}
.wz-nav__n{width:30px;height:30px;flex:0 0 auto;border:1.5px solid var(--charcoal);display:flex;align-items:center;justify-content:center;font-family:var(--ff-display);font-size:15px}
.wz-nav__item.is-active .wz-nav__n{background:var(--red);border-color:var(--red);color:#fff}
.wz-nav__item.is-done .wz-nav__n{background:var(--charcoal);border-color:var(--charcoal);color:#fff}
.wz-nav__t{font-size:13px;line-height:1.3}
.wz-nav__t b{display:block;font-size:11px;color:var(--sec);font-weight:600}
.wz-step__tag{display:block;font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--red);margin-bottom:8px}
.wz-step__sub{font-size:14px;color:var(--sec);line-height:1.6;margin:6px 0 22px;max-width:620px}
.wz-step__hint{font-size:13px;color:var(--sec);margin:6px 0 12px}
/* Grid-kinderen zijn standaard min-content breed. De Duitse labels
   ("Kunststofffenster", "Haus- oder Hintertür") rekten hun kolom daardoor op en
   maakten /de/offerte-snel/ op 640px 20px te breed. Deze regel gold alleen onder
   400px; hij hoort overal te gelden. */
.prod-pick{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:18px}
.pp-card,.pp-card__box{min-width:0}
.pp-card__box strong,.pp-card__box small{overflow-wrap:break-word;hyphens:auto}
.pp-card input{position:absolute;opacity:0}
.pp-card__box{display:block;border:1px solid var(--line);padding:24px;position:relative;cursor:pointer;transition:.18s var(--ease);height:100%}
.pp-card:has(input:checked) .pp-card__box{border-color:var(--red);background:rgba(237,31,36,.05)}
.pp-card__ico{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;background:none;color:var(--sec);font-size:28px}
.pp-card:has(input:checked) .pp-card__ico{background:none;color:var(--red)}
.pp-card__box strong{display:block;font-size:17px;margin-top:18px}
.pp-card__box small{display:block;font-size:13px;color:var(--sec);margin-top:6px}
.pp-card__check{position:absolute;top:18px;right:18px;width:24px;height:24px;background:var(--red);color:#fff;display:none;align-items:center;justify-content:center;font-size:13px}
.pp-card:has(input:checked) .pp-card__check{display:flex}
.pp-card__box--row{display:flex;align-items:center;gap:12px;padding:18px 20px}
.pp-card__box--row strong{margin-top:0;font-size:16px}
.pp-card__box--row .pp-card__check{position:static;margin-left:auto}
.koz-table{width:100%;border-collapse:collapse;margin:8px 0 14px;font-size:13px}
.koz-table th{text-align:left;font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--sec);padding:8px 10px;border-bottom:1px solid var(--line)}
.koz-table td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.sel--sm select{padding:7px 28px 7px 10px;font-size:13px}
.sel--sm .caret{right:10px}
.koz-in{width:100%;border:1px solid var(--line);background:transparent;padding:7px 9px;font:inherit;font-size:13px}
.koz-in:focus{outline:none;border-color:var(--charcoal)}
.koz-in--n{max-width:72px}
@media(max-width:600px){
  .koz-table thead{display:none}
  .koz-table,.koz-table tbody{display:block}
  .koz-table tr{display:block;border:1px solid var(--line);padding:2px 14px;margin-bottom:14px}
  .koz-table td{display:flex;justify-content:space-between;align-items:center;gap:14px;border:none;border-bottom:1px solid var(--line);padding:11px 0;text-align:right}
  .koz-table tr td:last-child{border-bottom:none;justify-content:flex-end}
  .koz-table td::before{content:attr(data-l);font-weight:600;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--sec);text-align:left}
  .koz-table td[data-l="#"]::before{content:"Kozijn"}
  .koz-table .sel--sm,.koz-table .koz-in{width:58%;max-width:210px}
}
.koz-colorpick{margin-top:6px}
.koz-colorpick__sel{margin:10px 0 0;font-size:13px;color:var(--sec)}
.koz-colorpick .cfg-sw.is-on{outline:2px solid var(--red);outline-offset:1px}
.cfg-carry{display:flex;gap:12px;align-items:center;background:var(--band);border-left:3px solid var(--red);padding:14px 18px;margin-bottom:22px}
.cfg-carry .material-symbols-outlined{color:var(--red);font-size:24px;flex:0 0 auto}
.cfg-carry strong{display:block;font-size:14px}
.cfg-carry span{font-size:13px;color:var(--sec)}
.check,.check--lg,.confirm__check,.pp-card__check{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;line-height:1;font-variation-settings:'FILL' 0,'wght' 500,'GRAD' 0,'opsz' 24}
.check{font-size:15px}
.check--lg{font-size:19px}
/* FAB – zwevende contact-knop */
.fab{position:fixed;right:24px;bottom:24px;z-index:70;display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.fab__toggle{display:inline-flex;align-items:center;gap:8px;background:var(--red);color:#fff;border:none;cursor:pointer;padding:14px 18px;font-family:var(--ff-body);font-weight:600;font-size:14px;box-shadow:0 8px 24px rgba(0,0,0,.18)}
.fab__toggle .material-symbols-outlined{font-size:22px}
.fab__ico-close{display:none}
.fab.is-open .fab__ico-open{display:none}
.fab.is-open .fab__ico-close{display:inline-flex}
.fab.is-open .fab__label{display:none}
.fab__panel{background:var(--white);border:1px solid var(--line);box-shadow:0 16px 40px rgba(0,0,0,.16);width:288px;display:flex;flex-direction:column}
.fab__panel[hidden]{display:none}
.fab__action{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line);color:var(--charcoal)}
.fab__action:hover{background:var(--band)}
.fab__action .material-symbols-outlined{color:var(--red);font-size:24px;flex:0 0 auto}
.fab__txt strong{display:block;font-size:14px;line-height:1.2}
.fab__txt small{color:var(--sec);font-size:12px}
.fab__btn{position:relative;display:inline-flex}
.fab__dismiss{position:absolute;top:-10px;right:-10px;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;background:var(--charcoal);color:#fff;border:2px solid var(--ivory);cursor:pointer;z-index:1;padding:0}
.fab__dismiss .material-symbols-outlined{font-size:15px}
.fab__dismiss:hover{background:var(--red)}
@media(max-width:600px){.fab{right:14px;bottom:14px}.fab__label{display:none}.fab__toggle{padding:14px}.fab__panel{width:min(86vw,300px)}}
/* Sticky CTA-balk (conversie-nudge, Patroon 1) */
.cta-bar{position:fixed;left:0;right:0;bottom:0;z-index:75;background:var(--charcoal);color:var(--ivory);display:flex;align-items:center;gap:20px;padding:12px 24px;box-shadow:0 -8px 24px rgba(0,0,0,.18);transform:translateY(100%);transition:transform .35s var(--ease)}
.cta-bar.is-on{transform:translateY(0)}
.cta-bar__txt{font-family:var(--ff-display);font-weight:500;font-size:16px;letter-spacing:.01em;margin-right:auto}
.cta-bar__actions{display:flex;align-items:center;gap:10px}
.cta-bar__actions .btn{gap:8px}
.cta-bar__actions .material-symbols-outlined{font-size:19px}
.cta-bar__close{background:none;border:0;color:var(--ivory);opacity:.55;cursor:pointer;display:inline-flex;padding:6px}
.cta-bar__close:hover{opacity:1}
/* body.cta-bar-on .fab{display:none} — de sticky CTA-balk is 24-09 verwijderd (main.js §23) */
@media(max-width:600px){
  .cta-bar{padding:0;gap:0}
  .cta-bar__txt,.cta-bar__close{display:none}
  .cta-bar__actions{width:100%;gap:0}
  .cta-bar__actions .btn{flex:1;flex-direction:column;gap:2px;padding:11px 4px;font-size:11px;border-right:1px solid rgba(255,255,255,.15)}
  .cta-bar__actions .btn:last-child{border-right:0}
}
.row-del{border:0;background:transparent;color:var(--sec);cursor:pointer;font-size:14px}
.koz-total{display:flex;justify-content:space-between;align-items:center;background:var(--band);padding:16px 20px;margin:8px 0 16px}
.koz-total strong{font-family:var(--ff-display);font-weight:500;font-size:18px;display:block}
.koz-total span{font-size:11px;font-weight:600;letter-spacing:.05em;color:var(--sec)}
.koz-total__isde{font-size:14px;color:var(--charcoal)}
.koz-total__isde strong{display:inline;color:var(--red);font-size:20px}
.review{border:1px solid var(--line);padding:0 28px}
.review-row{padding:22px 0;border-bottom:1px solid var(--line)}
.review-row:last-child{border-bottom:0}
.review-row__h{display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:600;letter-spacing:.05em;color:var(--red);margin-bottom:10px}
.review-row__h .link{font-size:12px}
.review-row dl div{display:flex;justify-content:space-between;gap:16px;padding:6px 0;font-size:14px}
.review-row dt{color:var(--sec)}
.review-row dd{font-weight:500;text-align:right}
.next-steps{background:var(--band);padding:24px;margin-top:22px}
.next-steps__row{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:6px}
.ns__n{width:28px;height:28px;background:var(--charcoal);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--ff-display);margin-bottom:10px}
.ns strong{display:block;font-size:15px;margin-bottom:4px}
.ns p{font-size:13px;color:var(--sec);line-height:1.5}
.wz-actions{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:28px;border-top:1px solid var(--line);padding-top:24px}
.chips--pick{margin-top:4px}
.trust-strip{background:var(--charcoal);color:var(--ivory);padding:clamp(36px,4vw,56px) 0}
.trust-strip__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.trust__ico{display:inline-flex;align-items:center;justify-content:center;color:var(--red);font-size:30px;margin-bottom:14px}
.trust h3,.trust .trust__t{font-family:var(--ff-display);font-weight:500;font-size:18px;margin:0 0 6px}
.trust p{font-size:13px;color:var(--sec);line-height:1.55}
.trust-strip .trust h3,.trust-strip .trust .trust__t{color:#fff}
.trust-strip .trust p{color:rgba(255,253,245,.7)}
.trust-strip__foot{border-top:1px solid rgba(255,255,255,.15);margin-top:32px;padding-top:22px;font-size:14px;color:rgba(255,253,245,.8)}
.trust-strip__foot strong{color:#fff}
.trust-strip__foot .link{color:#fff}
.im-benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:36px}
.im-benefits .trust{border:1px solid var(--line);padding:22px}

/* teams booking */
.booking{display:grid;grid-template-columns:300px 1.25fr .9fr;gap:24px;align-items:start}
.bk-side{background:var(--charcoal);color:var(--ivory);padding:26px}
.bk-side__head{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.bk-side__av{width:46px;height:46px;background:var(--band) center/cover;flex:0 0 auto}
.bk-side__head strong{display:block;font-size:14px;color:#fff}
.bk-side__head span{font-size:12px;color:rgba(255,253,245,.6)}
.bk-side__title{font-family:var(--ff-display);font-weight:500;font-size:24px;margin-bottom:8px;color:#fff}
.bk-side__meta{display:flex;flex-direction:column;gap:8px;font-size:14px;color:rgba(255,253,245,.7);margin-bottom:18px}
.bk-side__meta span{display:inline-flex;align-items:center;gap:7px}
.bk-side__meta .material-symbols-outlined{font-size:17px;color:var(--red)}
.bk-side__list{list-style:none;display:flex;flex-direction:column;gap:10px}
.bk-side__list li{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.45;color:rgba(255,253,245,.85)}
.bk-side__tz{font-size:12px;color:rgba(255,253,245,.55);margin-top:18px;border-top:1px solid rgba(255,255,255,.15);padding-top:14px}
.bk-cal{border:1px solid var(--line);padding:24px}
.bk-cal__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.bk-cal__head strong{font-family:var(--ff-display);font-weight:500;font-size:18px}
.bk-cal__nav button{border:1px solid var(--line);background:transparent;width:30px;height:30px;cursor:pointer;margin-left:6px}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal__dow{text-align:center;font-size:11px;color:var(--sec);padding-bottom:6px}
.cal__day{aspect-ratio:1;border:1px solid var(--line);background:transparent;font:inherit;font-size:13px;cursor:pointer;transition:.15s var(--ease)}
.cal__day:hover:not(.is-dis){border-color:var(--charcoal)}
.cal__day.is-sel{background:var(--red);border-color:var(--red);color:#fff}
.cal__day.is-dis{opacity:.3;cursor:not-allowed}
.bk-slots{border:1px solid var(--line);padding:24px}
.bk-slots__day{font-family:var(--ff-display);font-weight:500;font-size:16px;margin-bottom:14px}
/* lege dagen vóór de 1e van de maand */
.cal__pad{display:block}
.bk-slots__none{font-size:14px;color:var(--sec);line-height:1.5;padding:10px 0}
.bk-slots__grid[aria-busy="true"]{opacity:.5;pointer-events:none}
.bk-slots__note{font-size:12.5px;color:var(--sec);line-height:1.5;margin-top:14px}
.bk-cal__nav button[disabled]{opacity:.3;cursor:not-allowed}
.bk-slots__grid{display:grid;grid-template-columns:1fr;gap:8px}
.slot{border:1px solid var(--line);background:transparent;padding:13px;font:inherit;font-size:14px;cursor:pointer;transition:.15s var(--ease);text-align:center}
.slot:hover{border-color:var(--charcoal)}
.slot.is-sel{background:var(--red);border-color:var(--red);color:#fff}
.bk-bar{display:flex;align-items:flex-end;flex-wrap:wrap;gap:20px;background:var(--charcoal);color:#fff;padding:24px 28px;margin-top:24px}
.bk-bar__when{display:flex;flex-direction:column;flex:0 0 auto;margin-right:auto}
.bk-bar__tag{font-size:11px;font-weight:600;letter-spacing:.05em;color:var(--red)}
.bk-bar__when strong{font-size:17px;color:#fff;margin:5px 0 2px}
.bk-bar__sub{font-size:12px;color:rgba(255,253,245,.6)}
.bk-bar__field{display:flex;flex-direction:column;flex:1;min-width:180px;font-size:13px}
.bk-bar__field span{color:rgba(255,253,245,.7);margin-bottom:6px}
.bk-bar__field input{background:transparent;border:1px solid rgba(255,255,255,.25);color:#fff;padding:11px 14px;font:inherit;font-size:14px}
.bk-bar__field input::placeholder{color:rgba(255,253,245,.4)}
.bk-bar .btn{flex:0 0 auto}
.bk-bar__consent{display:flex;align-items:center;gap:8px;font-size:12px;color:rgba(255,253,245,.75)}
.bk-bar__consent a{color:var(--ivory)}
@media(max-width:760px){.bk-bar{flex-direction:column;align-items:stretch}.bk-bar .btn{width:100%;justify-content:center}}

/* teams bevestiging */
.confirm{padding:clamp(48px,7vw,96px) 0}
.confirm__inner{max-width:620px;margin:0 auto;text-align:center}
.confirm__check{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;background:var(--red);color:#fff;font-size:30px;margin-bottom:20px}
.confirm__sub{font-size:16px;color:#4a4a47;line-height:1.6;margin:12px 0 28px}
.confirm-card{border:1px solid var(--line);padding:28px;text-align:left}
.confirm-card__top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:16px}
.confirm-card__when strong{display:block;font-family:var(--ff-display);font-weight:500;font-size:22px}
.confirm-card__when span{font-size:14px;color:var(--sec)}
.teams-pill{display:inline-flex;align-items:center;gap:7px;background:#5b5fc7;color:#fff;font-size:12px;font-weight:600;padding:8px 12px;white-space:nowrap;flex:0 0 auto}
.teams-pill__ico{display:inline-flex;align-items:center;color:#fff;font-size:16px}
.btn--teams{background:#5b5fc7;color:#fff}
.btn--teams .teams-pill__ico{margin-right:7px}
.confirm-card__via{display:flex;gap:14px;align-items:flex-start;margin-bottom:20px}
.confirm-card__av{width:42px;height:42px;background:var(--band) center/cover;flex:0 0 auto}
.confirm-card__via strong{display:block;font-size:15px}
.confirm-card__via span{display:block;font-size:13px;color:var(--sec)}
.confirm-card__btns{display:flex;gap:10px;flex-wrap:wrap}
.confirm-list{list-style:none;text-align:left;max-width:520px;margin:28px auto 0;display:flex;flex-direction:column;gap:12px}
.confirm-list li{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.5}
.confirm__alt{font-size:14px;color:var(--sec);margin-top:24px}

/* apeldoorn */
.metrics{background:var(--band);padding:clamp(32px,4vw,52px) 0}
.metrics__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.wijk-chips{display:flex;flex-wrap:wrap;gap:8px}
.wijk-chip{border:1px solid var(--line);padding:8px 14px;font-size:13px;font-weight:500;background:var(--white)}
.wtype-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:14px}
.wtype{background:var(--white);border:1px solid var(--line);border-top:3px solid var(--red);padding:24px}
.wtype__loc{font-size:11px;font-weight:600;letter-spacing:.05em;color:var(--sec)}
.wtype h3{font-family:var(--ff-display);font-weight:500;font-size:21px;margin:8px 0 10px}
.wtype p{font-size:13px;color:var(--sec);line-height:1.6}
.wtype-foot{margin-top:24px;font-size:15px}

@media(max-width:960px){
  .about-hero__grid,.contact-grid,.wg-grid,.pd__grid,.kb-featured,.parent-band__inner{grid-template-columns:1fr;gap:32px}
  .pd__media{position:static}
  .stat-row,.metrics__grid{grid-template-columns:1fr 1fr;gap:24px}
  .timeline{grid-template-columns:1fr 1fr}
  .proj-grid,.proj-grid--3,.kb-grid,.kb-grid--4,.wtype-grid,.im-benefits,.next-steps__row,.field-grid--3,.wg-places--row{grid-template-columns:1fr 1fr}
  .proj-card--feat{flex-direction:column}.proj-card--feat .proj-card__img{width:100%;min-height:0;aspect-ratio:16/9}
  .proj-card--feat .proj-card__body{padding:24px}
  .wz-nav{grid-template-columns:1fr 1fr}
  .booking{grid-template-columns:1fr}
  .trust-strip__grid{grid-template-columns:1fr 1fr}.trust--accent{margin:0}
}
@media(max-width:600px){
  .stat-row,.stat-row--3,.timeline,.metrics__grid,.proj-grid,.proj-grid--3,.kb-grid,.kb-grid--4,.wtype-grid,.im-benefits,.next-steps__row,.review-grid,.field-grid,.field-grid--3,.prod-pick,.bk-slots__grid,.wg-places--row,.werkgebied .wg-places,.trust-strip__grid{grid-template-columns:1fr}
  .review-block--wide{grid-column:span 1}
}

/* ===== reveal animations ===== */
/* Alleen verbergen als JS draait (html.js-reveal, gezet in wp_head) — anders
   blijft de pagina leeg wanneer main.js niet laadt. Duur terug van .7s naar
   .45s: met de oude waarde plus de late trigger leek een sectie er nog niet
   te zijn terwijl je er al langs scrolde. */
.js-reveal [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.js-reveal [data-reveal].is-visible{opacity:1;transform:none}
.js-reveal [data-stagger]{opacity:0;transform:translateY(18px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.js-reveal [data-stagger].is-visible{opacity:1;transform:none}
/* Zig-zag tijdlijn (over ons) — centrale lijn, jaartallen alternerend links/rechts */
@media(prefers-reduced-motion:reduce){[data-reveal],[data-stagger],.hero__bg,.hero__copy>*{opacity:1!important;transform:none!important;transition:none!important}.hero .eyebrow .dash{width:32px!important}
  .dphoto{opacity:1!important;transform:skewX(-20deg)!important}.dphoto__img{transform:skewX(20deg) scale(1)!important}
  .doutline{opacity:1!important;clip-path:none!important}.positie__accent,.positie__body>*{opacity:1!important;transform:none!important}
  .step__no,.step__txt,.step__ico,.werkwijze__head>*{opacity:1!important;transform:none!important}
  .prod-card__img{clip-path:none!important}.prod-card__body,.section__head--split>*{opacity:1!important;transform:none!important}
  .sp-img,.sp-pin,.sp-ring,.sp-label{transition:none!important}
  .scene{height:auto!important}.scene__pin{position:static!important;height:auto!important;min-height:70vh}
  .scene__bg,.scene__art-img{transform:none!important}
  .scene__layers{min-height:0!important}.scene__layer{position:relative!important;opacity:1!important;transform:none!important;margin-bottom:28px}}

/* ===== responsive ===== */
@media(max-width:1080px){
  :root{--gut:40px}
  .footer__top{grid-template-columns:1fr 1fr 1fr;gap:36px}
  .footer__news{grid-column:span 3}
}
@media(max-width:960px){
  .nav,.header__phone{display:none}
  .hamburger{display:flex}
  .positie__grid,.faq__grid,.werkgebied__grid,.werkwijze__grid{grid-template-columns:1fr;gap:40px}
  .section__head--split{flex-direction:column;align-items:flex-start;gap:16px}
  .prod-grid,.proj-grid,.blog-grid{grid-template-columns:1fr 1fr}
  .faq__intro h2{max-width:none}
}
@media(max-width:640px){
  :root{--gut:24px}
  .section{padding:48px 0}
  .prod-grid,.proj-grid,.blog-grid,.steps,.cities{grid-template-columns:1fr}
  .werkgebied__map{min-height:0}
  .positie__visual{height:300px}
  .positie__accent{top:auto;bottom:16px;font-size:clamp(24px,7vw,32px)}
  .footer__top{grid-template-columns:1fr 1fr;gap:28px}
  .footer__brand,.footer__news{grid-column:span 2}
  .isde__inner{flex-direction:column;align-items:flex-start;gap:8px}
  .section__head--row{flex-direction:column;align-items:flex-start}
  .hero__actions,.cta__actions{flex-direction:column}
  .hero__actions .btn,.cta__actions .btn{width:100%}
  .footer__bottom{flex-direction:column;align-items:flex-start}
}

/* ===== Micro-interacties (site-breed) ===== */
/* knoppen: lift + zachte schaduw */
.btn{transition:transform .2s var(--ease),background .2s,color .2s,box-shadow .25s var(--ease)}
.btn:hover{box-shadow:0 8px 22px rgba(51,51,49,.16)}
.btn--red:hover{box-shadow:0 10px 24px rgba(237,31,36,.30)}
.btn:active{transform:translateY(0)}

/* nav: animerende underline */
.nav__link{position:relative}
.nav__link::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav__link:hover::after,.nav__link.is-active::after{transform:scaleX(1)}

/* tekst-links: underline-reveal (werkt ook inline) + nudge */
.link{background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-position:0 100%;background-size:0% 1px;transition:background-size .3s var(--ease),opacity .2s,color .2s}
.link:hover{opacity:1;background-size:100% 1px}

/* hover-lift op secundaire kaarten */
.def-card,.voorw-card,.cm-card,.opt-card,.sub-case,.wg-link,.kb-featured,.mega__card{transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.def-card:hover,.voorw-card:hover,.cm-card:hover,.opt-card:hover,.sub-case:hover,.wg-link:hover,.kb-featured:hover{transform:translateY(-4px);box-shadow:0 14px 32px rgba(51,51,49,.10)}
.mega__card:hover{transform:translateY(-3px)}

/* beeld-zoom op kaarten met een afbeelding (container clipt) */
.mega__card{overflow:hidden}
.mega__img{transition:transform .55s var(--ease)}
.mega__card:hover .mega__img{transform:scale(1.05)}
.mega__card:hover .link{background-size:100% 1px}
.kb-featured{overflow:hidden}
.kb-featured__img{transition:transform .6s var(--ease)}
.kb-featured:hover .kb-featured__img{transform:scale(1.05)}

/* iconen die meebewegen */
.cm-card__ico,.trust__ico{transition:transform .3s var(--ease)}
.cm-card:hover .cm-card__ico{transform:translateY(-2px)}

@media(prefers-reduced-motion:reduce){
  .btn,.nav__link::after,.link,.mega__img,.kb-featured__img,.def-card,.voorw-card,.cm-card,.opt-card,.sub-case,.wg-link,.kb-featured,.mega__card{transition:none!important}
}

/* ===== Reviews-rotator (crossfade) ===== */
.quote{transition:opacity .32s var(--ease)}
.quote.is-swapping{opacity:0}
/* .quote p{min-height:3.4em;…} — reservering staat nu op .quote zelf (zie boven) */
.reviews__dots i{cursor:pointer}
@media(max-width:640px){.quote p{min-height:5.5em}}
/* projecten-sectie (homepage): kaarten zonder eigen achtergrond/rand; sectie houdt ivoor */
.projecten .proj-card{background:none;border:none}

/* ===== "Wat als er misgaat" – redactionele ledger-rijen ===== */
@media(max-width:760px){.risk-item{grid-template-columns:1fr;gap:10px;padding:22px 0}.risk-item__l{gap:14px}}

/* ===== "Drie waarden" – grote alternerende statements ===== */
/* "Drie waarden" – redactionele ledger met grote nummers */
.values-ledger{border-top:2px solid var(--charcoal);margin-top:28px}
.value-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,3vw,44px);align-items:baseline;padding:30px 0;border-bottom:1px solid var(--line)}
.value-num{font-family:var(--ff-display);font-weight:600;font-size:clamp(46px,7vw,92px);color:var(--red);line-height:.78}
.value-row__c h3{font-family:var(--ff-display);font-weight:600;font-size:clamp(26px,3vw,40px);line-height:1.04;margin-bottom:8px;color:var(--charcoal)}
.value-row__c p{font-size:clamp(16px,1.35vw,18px);line-height:1.6;color:var(--sec);max-width:640px;margin:0}
@media(max-width:600px){.value-row{grid-template-columns:1fr;gap:6px;padding:24px 0}.value-num{font-size:46px}}

/* "Voldoe je aan deze voorwaarden?" – donkere contrast-sectie */
.voorw-sec{background:var(--charcoal);color:var(--ivory)}
.voorw-sec .section__head .h2{color:#fff}
.voorw-sec .section__sub{color:rgba(255,253,245,.66)}
.voorw-sec .voorw-card{background:transparent;border:none;border-top:1px solid rgba(255,255,255,.18);padding:22px 0 0}
.voorw-sec .voorw-card h3{color:#fff}
.voorw-sec .voorw-card p{color:rgba(255,253,245,.6)}

/* ===== Cremewit kaarten met donkere randen (was #fff) ===== */
.opt-card,.calc,.def-card,.kb-card,.form-card,.wizard,.kb-search,.kb-featured,.cities a,.fab__panel,.wijk-chip,.voorw-card,.wtype,.parent-band__logo,.proj-card{border-color:var(--charcoal)}
.voorw-card,.wtype{border-top-color:var(--red)}

/* Projecten-filterbalk: chips + sort gelijk uitgelijnd, donkere randen */
.proj-toolbar__inner{align-items:center}
.proj-toolbar .chips{align-items:center}
.proj-toolbar .chip{border-color:var(--charcoal);padding:9px 15px;line-height:1}
.proj-toolbar .sel--sort select{border-color:var(--charcoal);padding:9px 34px 9px 14px;font-size:13px;line-height:1}

/* ===== Keuzehulp (leadfunnel quiz) ===== */
.kh{max-width:860px;margin:0 auto}
.kh-progress{display:flex;align-items:center;gap:16px;margin-bottom:30px}
.kh-count{font-size:12px;font-weight:600;letter-spacing:.05em;color:var(--sec);white-space:nowrap}
.kh-bar{flex:1;height:3px;background:var(--line)}
.kh-bar i{display:block;height:100%;background:var(--red);width:0;transition:width .4s var(--ease)}
.kh-q{font-family:var(--ff-display);font-weight:500;font-size:clamp(24px,3vw,34px);margin-bottom:24px;color:var(--charcoal)}
.kh-opts{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.kh-opts--3{grid-template-columns:repeat(3,1fr)}
.kh-opt{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;padding:22px;border:1px solid var(--charcoal);background:var(--white);cursor:pointer;transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease);font-family:var(--ff-body)}
.kh-opt:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(51,51,49,.10)}
.kh-opt.is-on{border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red)}
.kh-opt .material-symbols-outlined{font-size:30px;color:var(--red);margin-bottom:8px}
.kh-opt .kh-sw{width:36px;height:36px;border:1px solid var(--charcoal);margin-bottom:10px}
.kh-opt strong{font-family:var(--ff-display);font-weight:500;font-size:18px;color:var(--charcoal)}
.kh-opt small{font-size:13px;color:var(--sec)}
.kh-actions{margin-top:24px}
.kh-step[hidden],.kh-result[hidden]{display:none}
.kh-result{text-align:center;max-width:680px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:14px}
.kh-result .h2{font-size:clamp(26px,3vw,38px)}
.kh-result__lead{color:var(--sec);line-height:1.62}
.kh-spec{width:100%;border-top:1px solid var(--charcoal);margin:8px 0 4px}
.kh-spec__row{display:flex;justify-content:space-between;gap:20px;padding:13px 0;border-bottom:1px solid var(--line);text-align:left}
.kh-spec__row span{color:var(--sec);font-size:14px}
.kh-spec__row strong{font-weight:500;font-size:14px;text-align:right;color:var(--charcoal)}
.kh-result__cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:10px}
.kh-result__alt{font-size:14px;color:var(--sec)}
.kh-restart{background:none;border:none;color:var(--sec);font-size:13px;cursor:pointer;font-family:var(--ff-body);margin-top:4px}
.kh-restart:hover{color:var(--red)}
@media(max-width:600px){.kh-opts,.kh-opts--3{grid-template-columns:1fr}}

/* globale guard: [hidden] altijd verbergen (overschrijft display:flex/inline-flex e.d.) */
[hidden]{display:none!important}

.cta-keuzehulp{margin-top:18px}

/* keuzehulp-link in hero */
.hero__kh{display:inline-block;margin-top:20px;color:#fff;font-family:var(--ff-body);font-weight:600;font-size:15px;border-bottom:1px solid rgba(255,255,255,.45);padding-bottom:3px;transition:opacity .9s var(--ease) .84s,transform .9s var(--ease) .84s,color .2s,border-color .2s}
.hero__kh:hover{color:var(--red);border-color:var(--red)}

/* ===== concept.css — lean 6-blok parts (why / proof / specbar) ===== */
/* ===== CONCEPT-ONLY styles · lean 6-blok productpagina (Kozijnen / Deuren / Schuifpuien) ===== */

/* genummerd blok-label (vervangt verborgen eyebrow, maakt de spine zichtbaar) */
.blocklbl{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--red);margin-bottom:18px}
.blocklbl b{font-family:var(--ff-display);font-weight:600;font-size:13px;color:var(--charcoal);opacity:.35}
.blocklbl i{width:32px;height:2px;background:var(--red);display:inline-block;font-style:normal}

/* concept-strip bovenaan */
.cbar{background:var(--charcoal);color:var(--ivory)}
.cbar__inner{display:flex;align-items:center;gap:18px;padding:12px var(--gut);flex-wrap:wrap}
.cbar__tag{font-weight:600;font-size:11px;letter-spacing:.14em;color:var(--red)}
.cbar__txt{font-size:13.5px;color:rgba(255,253,245,.78);flex:1;min-width:240px}
.cbar__steps{display:flex;gap:6px;flex-wrap:wrap}
.cbar__steps span{font-size:11px;font-weight:500;letter-spacing:.04em;color:rgba(255,253,245,.6);border:1px solid rgba(255,253,245,.18);border-radius:999px;padding:4px 12px}

/* BLOK 02 · Waarom dit product (3-up, vervangt 5 scroll-scenes) */
.why{background:var(--band)}
.why__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--ivory)}
.why__card{padding:40px 36px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:14px}
.why__card:last-child{border-right:none}
.why__ico{width:52px;height:52px;display:inline-flex;align-items:center;justify-content:center;background:var(--charcoal);color:var(--ivory);border-radius:8px}
.why__ico .material-symbols-outlined{font-size:28px}
.why__stat{font-family:var(--ff-display);font-weight:600;font-size:13px;letter-spacing:.04em;color:var(--red)}
.why__h{font-family:var(--ff-display);font-weight:500;font-size:24px;line-height:1.1;color:var(--charcoal)}
.why__p{font-size:15px;color:var(--sec);line-height:1.6;margin-top:-2px}

/* BLOK 04 · Bewijs (1 project + 1 quote, samen) */
.proof{background:var(--charcoal);color:var(--ivory)}
.proof__grid{display:grid;grid-template-columns:1.15fr 1fr;gap:0;align-items:stretch;min-height:520px}
.proof__img{background:var(--sec) center/cover;min-height:420px}
.proof__panel{padding:clamp(40px,5vw,72px);display:flex;flex-direction:column;justify-content:center;gap:22px}
.proof__quote{font-family:var(--ff-accent);font-style:italic;font-size:clamp(22px,2.4vw,30px);line-height:1.35;color:var(--ivory)}
.proof__who{display:flex;flex-direction:column;gap:3px}
.proof__who b{font-family:var(--ff-display);font-weight:500;font-size:17px}
.proof__who span{font-size:13px;color:rgba(255,253,245,.6)}
.proof__stats{display:flex;gap:40px;padding:22px 0;border-top:1px solid rgba(255,253,245,.16);border-bottom:1px solid rgba(255,253,245,.16)}
.proof__stat b{display:block;font-family:var(--ff-display);font-weight:600;font-size:30px;line-height:1;color:var(--red)}
.proof__stat span{font-size:12.5px;color:rgba(255,253,245,.6);letter-spacing:.04em;margin-top:6px;display:block}
.proof__link{font-weight:500;font-size:14px;color:var(--ivory)}
.proof__link:hover{color:var(--red)}

/* BLOK 05 · Specs + vragen */
.specbar{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-bottom:48px;background:var(--ivory)}
.specbar__cell{padding:26px 28px;border-right:1px solid var(--line)}
.specbar__cell:last-child{border-right:none}
.specbar__v{font-family:var(--ff-display);font-weight:600;font-size:28px;color:var(--charcoal);line-height:1}
.specbar__l{font-size:12.5px;color:var(--sec);letter-spacing:.03em;margin-top:8px}

@media(max-width:880px){
  .why__grid{grid-template-columns:1fr}
  .why__card{border-right:none;border-bottom:1px solid var(--line)}
  .why__card:last-child{border-bottom:none}
  .proof__grid{grid-template-columns:1fr}
  .specbar{grid-template-columns:1fr 1fr}
  .specbar__cell:nth-child(2){border-right:none}
  .cbar__steps{display:none}
}

/* ===== lead-form feedback (AJAX) ===== */
.form-feedback{margin-top:14px;font-size:14px;font-weight:500;min-height:1em}
.form-feedback.is-success{color:#1f7a3d}
.form-feedback.is-error{color:var(--red)}
.contact-grid__info .contact-info{margin-top:24px;font-style:normal;line-height:1.9}
.contact-grid__info .contact-info a:hover{color:var(--red)}

/* ===== taalwisselaar (header) ===== */
.lang-switch{display:inline-flex;gap:2px;align-items:center;font-weight:500;font-size:13px}
.lang-switch__item{padding:4px 7px;color:var(--sec);border-radius:4px;letter-spacing:.04em;transition:color .2s,background .2s}
.lang-switch__item:hover{color:var(--charcoal)}
.lang-switch__item.is-current{color:var(--charcoal);background:var(--band)}
@media(max-width:980px){.lang-switch{display:none}}
.mobile-menu .lang-switch{display:inline-flex;margin-top:8px}


/* Werkgebied-index: alfabetisch overzicht van alle plaatsen (archive-locatie.php). */
.werkgebied-index{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:28px 32px}
.werkgebied-index__letter{font-size:13px;letter-spacing:.12em;color:var(--red);margin:0 0 10px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.werkgebied-index__groep ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.werkgebied-index__groep a{color:var(--charcoal);text-decoration:none;font-size:15px}
.werkgebied-index__groep a:hover{color:var(--red);text-decoration:underline}

/* Inmeetbezoek: kalender + tijden in het formulier (zonder zijbalk van het Teams-consult). */
.booking--visit{grid-template-columns:1.3fr 1fr;gap:16px;margin-bottom:14px}
.booking--visit .bk-slots__grid{grid-template-columns:1fr 1fr}
.im-when{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding:14px 16px;background:var(--band);font-size:15px;margin-bottom:32px}
.im-when strong{font-family:var(--ff-display);font-weight:500;font-size:17px}
.im-when__sub{font-size:13px;color:var(--sec)}
@media(max-width:720px){.booking--visit{grid-template-columns:1fr}}

/* Twee tegels i.p.v. drie (inmeet/offerte): geen lege kolom. Op mobiel blijven de bestaande regels gelden. */
.trust-strip__grid--2{grid-template-columns:repeat(2,1fr)}
.im-benefits--2{grid-template-columns:repeat(2,1fr)}
@media(max-width:720px){.trust-strip__grid--2,.im-benefits--2{grid-template-columns:1fr}}

/* Inmeetbezoek-bevestiging (page-inmeet-bevestiging.php) */
.teams-pill--visit{background:var(--charcoal)}
.confirm-card__av--ico{display:inline-flex;align-items:center;justify-content:center;color:var(--red);background:var(--band)}
.confirm-card__av--ico .material-symbols-outlined{font-size:22px}

/* ===== Kennisbank: ruimte tussen zoekveld/filterchips en de artikelen ===== */
.kb-chips + .kb-grid,
.kb-search + .kb-grid{margin-top:32px}

/* ===== Kleine schermen — getest van 280 t/m 360px =====
   Grid- en flex-kinderen mogen smaller worden dan hun inhoud (anders duwen
   lange woorden, invoervelden of knoppen de pagina breder dan het scherm). */
.footer__top > *,
.booking > *,
.wz-nav__item,
.kb-search input{min-width:0}
.footer__meta,
.confirm-card__top{flex-wrap:wrap}
.prose table{display:block;max-width:100%;overflow-x:auto}   /* cookietabel: horizontaal scrollen binnen de tabel */

/* Productinfo: modules mogen smaller dan hun inhoud; lange (Duitse) woorden breken af. */
.pinfo__grid > *,
.pinfo__mod--tiles > *,
.pinfo__mod--price > *{min-width:0}
.pinfo__mod h3,
.pinfo__tile,
.hs-info strong{overflow-wrap:break-word;hyphens:auto}

/* Hotspots: de (verborgen) infokaartjes mogen de pagina niet breder maken.
   Een geopend kaartje wordt door main.js §9 binnen het scherm geschoven (--hs-shift). */
.hotspots{overflow-x:clip}
.hs-info{translate:var(--hs-shift,0px) 0}

@media(max-width:400px){
  :root{--gut:16px}
  .positie{overflow-x:clip}                          /* schuine rode lijn steekt anders 3px uit */
  .header__inner{gap:10px}
  .header__right{gap:10px}
  .header__right > .btn{padding-left:14px;padding-right:14px;font-size:14px;white-space:nowrap}
  .logo img{height:28px}
  .pinfo__price dd{white-space:normal}
  .topbar__inner{gap:10px}
  .topbar__cta{white-space:normal;text-align:right}
  .footer__top{grid-template-columns:1fr}
  .footer__brand,.footer__news{grid-column:auto}
  .footer__meta{gap:12px 16px}
  .kb-search{padding:4px 12px;gap:8px}
  .kb-search__count{display:none}
  .wz-nav{grid-template-columns:repeat(4,1fr);gap:8px}
  .wz-nav__t{display:none}                          /* alleen de stapnummers; de stap zelf staat in het paneel */
  .bk-cal,.bk-slots{padding:16px}
  .cal{gap:2px}
  .teams-pill{white-space:normal}

  /* Duitse samenstellingen ("Kunststofffenster", "Einsatzgebiet", "Mitarbeiter")
     zijn breder dan de kolom. Een grid-kind is standaard min-content breed, dus
     rekte de kolom mee en werd de pagina breder dan het scherm: /de/ +33px,
     /de/offerte-snel/ +18px, /de/over-ons/ +17px op 280px. */
  .werkgebied__body,.werkgebied__map,.about-fact,.pp-card,.pp-card__box{min-width:0}
  .werkgebied__body h2,.werkgebied__body p,.about-fact b,.about-fact span,
  .pp-card__box strong,.pp-card__box small{overflow-wrap:break-word;hyphens:auto}
  .about-facts__row{grid-template-columns:1fr}
  .about-fact{border-left:0}
  .about-fact:nth-child(n+2){border-top:1px solid var(--line)}
  .link--lg{white-space:normal}          /* "Das gesamte Einsatzgebiet ansehen →" past anders niet */
}
@media(max-width:320px){
  .header__right > .btn{padding-left:10px;padding-right:10px;font-size:13px}
  .logo img{height:24px}
}


/* Alleen voor schermlezers en zoekmachines; visueel weg, niet display:none. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ── Toegankelijkheid en tikdoelen (audit 24-09) ──────────────────────────
   Het zoekveld van de kennisbank had outline:none zonder vervanging: met het
   toetsenbord was niet te zien dat het focus had. */
.kb-search:focus-within{outline:2px solid var(--charcoal);outline-offset:3px}
/* Kleine tekstlinks (topbalk 16px hoog, footer 22px, kruimelpad 16px) halen de
   ondergrens van 24px voor tikdoelen niet. Padding met een even grote negatieve
   marge vergroot het raakvlak zonder dat de opmaak verschuift. */
@media(max-width:960px){
  .topbar a,.footer__col a,.footer__meta a,.breadcrumb a,.link,.isde__link{padding-top:7px;padding-bottom:7px;margin-top:-7px;margin-bottom:-7px}
  .breadcrumb a{display:inline-block}
}