/* ============================================================
HUISINFO — DESIGN SYSTEM (v2)
Gedeeld stylesheet voor alle pagina's.
Link in elke pagina met:
En laad de fonts in de :
============================================================ */
/* ---- 1. DESIGN TOKENS ---------------------------------------
Pas hier iets aan en het verandert op de hele site. */
:root{
/* Kleuren — merk */
--ink:#10202f; /* hoofdtekst */
--navy:#0f2a43; /* koppen, primaire knop, donkere banden */
--navy-2:#16395a; /* navy variant */
--blue:#2563a8; /* accent blauw, links, iconen */
--blue-soft:#eaf1f8; /* blauwe vlakken/tags */
--amber:#f59e0b; /* accentkleur / CTA */
--amber-deep:#b45309; /* amber tekst op licht */
--amber-soft:#fef3e2; /* amber vlakken */
/* Kleuren — neutraal */
--paper:#faf9f6; /* pagina-achtergrond */
--white:#ffffff;
--muted:#5d6b78; /* secundaire tekst */
--veldrand:#7c8791; /* rand om invoervelden — 3,66:1 op wit.
--line (1,26:1) is te licht voor een bedieningselement. */
--line:#e8e5dd; /* randen op paper */
--line-2:#dfe6ee; /* randen op wit/blauw */
/* Vorm */
--radius:18px;
--radius-sm:12px;
--shadow:0 1px 2px color-mix(in srgb,var(--ink) 5%,transparent),0 12px 32px color-mix(in srgb,var(--ink) 7%,transparent);
--shadow-lg:0 2px 4px color-mix(in srgb,var(--ink) 6%,transparent),0 28px 70px color-mix(in srgb,var(--ink) 16%,transparent);
/* Typografie */
--display:"Bricolage Grotesque",sans-serif; /* koppen */
--body:"Inter",sans-serif; /* tekst */
/* Donker & tekst-op-donker */
--navy-deep:#0b1f33; /* footer / diepste donker */
--amber-ink:#3a2600; /* tekst op amber knop */
--on-dark:#b9cde0; /* subtiele tekst op donkere band */
--on-dark-2:#dce8f3; /* checklist-tekst op donker */
--footer-fg:#a8bbcd; /* footer-tekst */
--footer-fg-dim:#7e95a9; /* footer onderbalk */
--paper-2:#f4f2ec; /* .prose th */
--paper-3:#f1efe9; /* .alt-secties */
}
/* ---- 2. BASIS & TYPOGRAFIE --------------------------------- */
*{box-sizing:border-box;margin:0;padding:0}
/* Basisregel voor . De width/height-attributen in de HTML staan er tegen
layout shift, maar het height-attribuut werkt door als CSS-hoogte zodra een
regel wél width zet en géén height (zoals .sol-shot img) — het
beeld wordt dan uitgerekt. Deze regel houdt de verhouding intact. Regels die
bewust een vaste hoogte zetten (.media img, .marquee-track img, .logo img,
.team-member img, …) zijn specifieker en winnen gewoon. */
img{height:auto}
/* scroll-padding-top houdt ankerdoelen onder de sticky header vandaan;
smooth-scroll alleen als de gebruiker geen bewegingsreductie wil (a11y) */
html{scroll-padding-top:90px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{font-family:var(--body);color:var(--ink);background:var(--paper);line-height:1.65;-webkit-font-smoothing:antialiased}
::selection{background:var(--amber);color:var(--amber-ink)}
a{color:inherit;text-decoration:none}
/* Focus-states — zichtbaar voor toetsenbordgebruikers (a11y).
Blauwe ring op licht, witte ring binnen donkere secties. */
a:focus-visible,button:focus-visible,.btn:focus-visible,.role:focus-visible,
input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{
outline:3px solid var(--blue);outline-offset:2px;border-radius:6px}
.band-dark a:focus-visible,.band-dark .btn:focus-visible,
.finalcta a:focus-visible,.finalcta .btn:focus-visible,
footer a:focus-visible,.btn-ghost.on-dark:focus-visible{outline-color:#fff}
h1,h2,h3{font-family:var(--display);color:var(--navy);line-height:1.08;letter-spacing:-.02em}
/* Nederlandse samenstellingen ("kopersbegeleiding", "onderaannemers") zijn zo
lang dat ze bij 200% tekst op een smal scherm breder worden dan de kolom.
'anywhere' en niet 'break-word': alleen 'anywhere' telt mee in de
min-content-breedte, en dat is wat een flex- of rasteritem gebruikt om
zichzelf te meten. Zie dezelfde afweging bij .prose.
hyphens:auto helpt hier niet — Chromium heeft geen Nederlandse
afbreekpatronen, dat is gemeten. */
h1,h2,h3,h4,p,li,dt,dd,figcaption,blockquote,label,.lead,.eyebrow{overflow-wrap:anywhere}
h2{font-size:clamp(1.8rem,3.4vw,2.6rem);font-weight:800;margin-bottom:.7rem}
h3{font-weight:700}
.lead{color:var(--muted);font-size:1.1rem;max-width:660px}
/* Layout helpers */
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
section{padding:96px 0}
.center{text-align:center}
.center .lead{margin:0 auto}
/* Eyebrow — klein label boven een kop */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;font-weight:700;letter-spacing:.14em;
text-transform:uppercase;color:var(--amber-deep);background:var(--amber-soft);border:1px solid #f7dcb0;
border-radius:999px;padding:6px 14px;margin-bottom:18px}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--amber)}
/* Marker — amber onderstreping op een woord in een kop */
/* nowrap alleen waar de frase past: op smalle schermen werd de hero-kop
anders midden in een woord afgeknipt door .hero{overflow:hidden}. */
.mark{position:relative;z-index:0}
@media(min-width:600px){.mark{white-space:nowrap}}
.mark::after{content:"";position:absolute;left:-2px;right:-2px;bottom:.06em;height:.32em;background:var(--amber);
opacity:.4;border-radius:3px;z-index:-1}
/* Zodra de frase over meerdere regels breekt, kan de absolute streep er maar
onder een van kruipen. Dan tekenen we hem als achtergrond per regel. */
@media(max-width:599px){
.mark::after{display:none}
.mark{background:linear-gradient(color-mix(in srgb,var(--amber) 40%,transparent),
color-mix(in srgb,var(--amber) 40%,transparent)) left calc(100% - .06em)/100% .32em no-repeat;
-webkit-box-decoration-break:clone;box-decoration-break:clone;border-radius:3px}
}
/* ---- 3. SCROLL-REVEAL ANIMATIE -----------------------------
Zet class="reveal" op elementen; voeg d1/d2/d3 toe voor vertraging.
Vereist het scriptje onderaan elke pagina (zie template).
NO-JS VANGNET: de verberg-regels gelden alleen onder .js, dat de
-snippet (document.documentElement.classList.add('js'))
zet. Zonder JS blijft alle content gewoon zichtbaar. */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.js .reveal.in{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}
/* BOVEN DE VOUW: animeren bij het tekenen, niet pas als huisinfo.js draait.
De hero staat al in beeld bij het laden, dus wachten op de
IntersectionObserver levert niets op - het kost alleen tijd. Gemeten op
31 aug 2026: LCP ging van 1384 ms naar 524 ms op index.html, van 1308 ms
naar 528 ms op bouwkwaliteit.html en van 1048 ms naar 364 ms op
veelgestelde-vragen.html. Chrome telt een element pas als het niet meer op
opacity 0 staat; met een overgang die pas na DOMContentLoaded begint schuift
dat moment ruim acht tienden van een seconde op. Een animatie loopt al vanaf
de eerste frame. Zelfde beweging, zelfde stagger, alleen eerder. Blijft
onder .js staan, zodat het no-JS-vangnet blijft werken. */
@keyframes hi-reveal{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.js .hero .reveal,
.js #main>section:first-child>.reveal:first-child,
.js .reveal.nu{animation:hi-reveal .7s cubic-bezier(.16,1,.3,1) both}
.js .hero .reveal.d1,.js .reveal.nu.d1{animation-delay:.08s}
.js .hero .reveal.d2,.js .reveal.nu.d2{animation-delay:.16s}
.js .hero .reveal.d3,.js .reveal.nu.d3{animation-delay:.24s}
/* Bewegingsvoorkeur. Let op de specificiteit: een media query telt niet mee,
dus `.js .reveal` (0,2,0) verliest het van `.js .hero .reveal` (0,3,0). De
drie animatieselectoren moeten daarom letterlijk herhaald worden, anders
loopt de hero-animatie gewoon door bij prefers-reduced-motion. */
@media (prefers-reduced-motion:reduce){
.js .reveal{opacity:1;transform:none;transition:none;animation:none}
.js .hero .reveal,
.js #main>section:first-child>.reveal:first-child,
.js .reveal.nu{animation:none;opacity:1;transform:none}
}
/* Geen hover-verschuivingen bij bewegingsvoorkeur */
@media (prefers-reduced-motion:reduce){
.btn:hover,.feat:hover,.role:hover,.stat:hover,.quote:hover{transform:none}
.nav,.logo img,header{transition:none}
}
/* ---- 4. KNOPPEN --------------------------------------------
.btn + één variant: .btn-navy / .btn-amber / .btn-ghost
Voeg .on-dark toe aan .btn-ghost op donkere achtergrond. */
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 26px;border-radius:999px;font-weight:700;
font-size:.97rem;font-family:var(--body);cursor:pointer;border:0;
transition:transform .18s cubic-bezier(.16,1,.3,1),box-shadow .18s,background .18s}
.btn-navy{background:var(--navy);color:#fff;box-shadow:0 10px 24px color-mix(in srgb,var(--navy) 28%,transparent)}
.btn-navy:hover{transform:translateY(-2px);box-shadow:0 16px 32px color-mix(in srgb,var(--navy) 34%,transparent)}
.btn-navy .arr{transition:transform .18s}
.btn-navy:hover .arr{transform:translateX(3px)}
.btn-amber{background:var(--amber);color:var(--amber-ink);box-shadow:0 10px 26px color-mix(in srgb,var(--amber) 38%,transparent)}
.btn-amber:hover{transform:translateY(-2px);box-shadow:0 16px 34px color-mix(in srgb,var(--amber) 46%,transparent)}
.btn-ghost{background:#fff;color:var(--navy);border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue)}
.btn-ghost.on-dark{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.3)}
.btn-ghost.on-dark:hover{background:rgba(255,255,255,.16);color:#fff}
/* ---- 5. HEADER / NAVIGATIE ---------------------------------
Sticky, semi-transparant met blur. Vereist de mobiele-menu
markup uit het template + de toggle in het script. */
header{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--paper) 85%,transparent);backdrop-filter:blur(14px);
border-bottom:1px solid color-mix(in srgb,var(--line) 80%,transparent)}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px;
transition:height .22s cubic-bezier(.16,1,.3,1)}
header{transition:margin-bottom .22s cubic-bezier(.16,1,.3,1),box-shadow .22s,background .22s}
.logo img{height:38px;width:auto;display:block;transition:height .22s cubic-bezier(.16,1,.3,1)}
/* Gekrompen balk zodra de bovenkant van de pagina uit beeld is. De klasse komt
van een sentinel met IntersectionObserver in huisinfo.js — geen scroll-listener.
De margin-bottom is geen opmaak maar een correctie. De header staat in de flow
(sticky, niet fixed), dus 16 px minder hoogte zou alle inhoud eronder 16 px
omhoog trekken: een zichtbare sprong precies op het moment dat je begint te
scrollen. Die 16 px marge vult het gat weer op, zodat de flow-hoogte 74 px
blijft terwijl de zichtbare balk 58 px wordt. Wijzig je de hoogte hierboven,
pas dan ook deze marge aan — 74 min de nieuwe hoogte. */
header.krimp .nav{height:58px}
header.krimp{margin-bottom:16px}
header.krimp .logo img{height:30px}
header.krimp{box-shadow:0 2px 14px color-mix(in srgb,var(--navy) 7%,transparent);
background:color-mix(in srgb,var(--paper) 94%,transparent)}
.logo-fallback{font-family:var(--display);font-weight:800;font-size:1.4rem;color:var(--navy)}
.nav nav{display:flex;gap:30px;align-items:center}
.nav nav a{font-weight:600;font-size:.94rem;color:var(--ink);position:relative}
.nav nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-4px;height:2px;background:var(--amber);transition:right .2s}
.nav nav a:hover::after{right:0}
.nav .btn{padding:11px 22px;font-size:.92rem}
.menu-toggle{display:none;font-size:1.6rem;background:none;border:0;color:var(--navy);cursor:pointer}
.mobile-menu{display:none;border-top:1px solid var(--line);background:var(--paper);padding:10px 24px 20px}
.mobile-menu a{display:block;padding:12px 0;font-weight:600;border-bottom:1px solid var(--line)}
.mobile-menu.open{display:block}
/* ---- 6. HERO ----------------------------------------------- */
.hero{position:relative;padding:96px 0 40px;overflow:hidden;background:
radial-gradient(900px 480px at 12% -10%,color-mix(in srgb,var(--amber) 12%,transparent),transparent 60%),
radial-gradient(1000px 560px at 88% 0%,color-mix(in srgb,var(--blue) 12%,transparent),transparent 60%),var(--paper)}
/* max-width in em, niet px: bij een grotere standaardletter groeit de kop mee terwijl
een vast plafond van 820px bleef staan — dan liep de nowrap-frase in .mark buiten
het kader en knipte .hero{overflow:hidden} hem af. 51,25em is bij 16px exact 820px. */
.hero-inner{text-align:center;max-width:51.25em;margin:0 auto}
.hero h1{font-size:clamp(2.6rem,5.6vw,4.2rem);font-weight:800;margin-bottom:1.2rem}
.hero p{color:var(--muted);font-size:clamp(1.05rem,1.6vw,1.25rem);max-width:640px;margin:0 auto 2rem}
.hero .actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.hero .trust{margin-top:1.6rem;color:var(--muted);font-size:.9rem;display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap}
.hero .trust .dotsep{opacity:.4}
/* Browser-frame mockup (rond screenshots) */
.hero-stage{position:relative;margin:64px auto 0;max-width:980px}
.hero-stage::before{content:"";position:absolute;inset:6% -4% -10% -4%;z-index:0;filter:blur(54px);opacity:.5;
background:radial-gradient(40% 55% at 22% 60%,color-mix(in srgb,var(--amber) 50%,transparent),transparent 70%),
radial-gradient(45% 60% at 78% 40%,color-mix(in srgb,var(--blue) 55%,transparent),transparent 70%)}
/* Zwevende statuskaartjes bij de mockup */
.float-card{position:absolute;z-index:2;background:#fff;border:1px solid var(--line);border-radius:14px;
box-shadow:var(--shadow-lg);padding:14px 18px;display:flex;gap:12px;align-items:center;font-size:.86rem}
.float-card .fc-ico{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;flex:0 0 38px}
.float-card b{display:block;color:var(--navy);font-size:.9rem}
.float-card span{color:var(--muted);font-size:.78rem}
.fc-1{left:-46px;top:18%;animation:float 6s ease-in-out infinite}
.fc-1 .fc-ico{background:#e8f6ea;color:#1d7a3a}
.fc-1 .fc-tag{color:#1d7a3a}
.fc-3{right:-44px;top:13%;animation:float 6.6s ease-in-out .6s infinite}
.fc-3 .fc-ico{background:#e8f0fb;color:var(--blue)}
.fc-3 .fc-tag{color:var(--blue)}
.fc-2{right:-52px;bottom:15%;animation:float 7s ease-in-out 1.2s infinite}
.fc-2 .fc-ico{background:var(--amber-soft);color:var(--amber-deep)}
.fc-2 .fc-tag{color:var(--amber-deep)}
.float-card .fc-tag{display:block;font-size:.62rem;letter-spacing:.07em;text-transform:uppercase;font-weight:700;line-height:1.2;margin-bottom:2px}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@media (prefers-reduced-motion:reduce){.fc-1,.fc-2,.fc-3{animation:none}}
/* ---- 7. LOGO-MARQUEE --------------------------------------- */
.logostrip{padding:44px 0 52px;border-bottom:1px solid var(--line);background:var(--paper)}
.logostrip .lab{text-align:center;color:var(--muted);font-size:.8rem;font-weight:700;text-transform:uppercase;
letter-spacing:.12em;margin-bottom:26px}
.marquee{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-track{display:flex;gap:72px;align-items:center;width:max-content;animation:scrollx 36s linear infinite}
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track{animation-play-state:paused}
/* WCAG 2.2.2 vraagt een pauzeermogelijkheid voor beweging die vanzelf start en langer dan
vijf seconden duurt. Hover was de enige rem — die bestaat niet op een telefoon en niet op
een toetsenbord. Deze knop zet alle sier-beweging op de pagina stil, dus ook de zwevende
kaartjes in de hero. prefers-reduced-motion blijft daarnaast gewoon werken. */
.beweging-wrap{display:flex;justify-content:center;margin-top:24px}
.beweging-knop{font-family:var(--body);font-size:.76rem;font-weight:700;letter-spacing:.1em;
text-transform:uppercase;color:var(--muted);background:none;border:1px solid var(--veldrand);
border-radius:999px;padding:7px 16px;cursor:pointer;transition:color .2s,border-color .2s}
.beweging-knop:hover{color:var(--ink);border-color:var(--ink)}
html.geen-beweging .marquee-track,
html.geen-beweging .float-card{animation-play-state:paused}
.marquee-track img{height:44px;width:auto;opacity:.6;filter:grayscale(100%);transition:.25s}
.marquee-track img:hover{opacity:1;filter:none}
.lname{font-family:var(--display);font-weight:700;color:var(--muted);font-size:1.05rem;white-space:nowrap}
@keyframes scrollx{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none}}
/* ---- 8. STATS ---------------------------------------------- */
.stats{padding:72px 0;background:var(--paper)}
.stats .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 26px;position:relative;overflow:hidden}
.stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(var(--amber),var(--blue))}
.stat .num{font-family:var(--display);font-size:clamp(2.4rem,3.6vw,3.2rem);font-weight:800;color:var(--navy);line-height:1}
.stat .num em{font-style:normal;color:var(--amber-deep)}
.stat .lab{font-weight:700;color:var(--navy);margin-top:8px}
.stat .desc{font-size:.86rem;color:var(--muted);margin-top:2px}
.stats .source{color:var(--muted);font-size:.82rem;margin-top:26px;text-align:center}
/* ---- 9. PROBLEM — genummerde editorial-lijst --------------- */
.problem .split{display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:start;margin-top:8px}
.problem .split>div:first-child{position:sticky;top:110px}
.plist{display:grid;gap:0;counter-reset:p;margin:0;padding-left:0;list-style:none}
.pitem{counter-increment:p;display:grid;grid-template-columns:64px 1fr;gap:22px;padding:30px 0;border-top:1px solid var(--line)}
.pitem:last-child{border-bottom:1px solid var(--line)}
.pitem::before{content:"0" counter(p);font-family:var(--display);font-weight:800;font-size:1.7rem;
color:transparent;-webkit-text-stroke:1.4px var(--blue);line-height:1.2}
.pitem h3{font-size:1.18rem;margin-bottom:.35rem}
.pitem p{color:var(--muted);font-size:.96rem}
/* ---- 10. DARK BAND (.band-dark — donkere navy sectie) -----
Donkere navy sectie. Werkt voor 'oplossing', uitgelichte
blokken etc. Gebruik .checks/.check voor opsommingen. */
.band-dark{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.band-dark::before{content:"";position:absolute;width:640px;height:640px;border-radius:50%;right:-200px;top:-280px;
background:radial-gradient(circle,color-mix(in srgb,var(--amber) 16%,transparent),transparent 65%)}
.band-dark h2{color:#fff}.band-dark .lead{color:var(--on-dark)}
.band-dark .grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;position:relative;z-index:1}
.band-dark .eyebrow{background:color-mix(in srgb,var(--amber) 12%,transparent);border-color:color-mix(in srgb,var(--amber) 30%,transparent);color:#fbc566}
.checks{margin-top:26px;margin-bottom:0;display:grid;gap:14px;max-width:620px;padding-left:0;list-style:none}
.check{display:flex;gap:13px;align-items:flex-start;color:var(--on-dark-2)}
.check .tick{flex:0 0 26px;width:26px;height:26px;border-radius:50%;background:color-mix(in srgb,var(--amber) 18%,transparent);
color:var(--amber);display:grid;place-items:center}
.check .tick svg{width:13px;height:13px}
.sol-shot{border-radius:var(--radius);overflow:hidden;border:1px solid rgba(255,255,255,.14);
box-shadow:0 30px 80px rgba(0,0,0,.4);transform:rotate(1.2deg)}
.sol-shot img{display:block;width:100%}
/* ---- 11. MODULEBANDEN --------------------------------------
.modrow — één module per volle band. Drie keer exact dezelfde opbouw,
beeld om en om links en rechts (.omgekeerd). Vervangt de oude bento
waarin Kopersbegeleiding een volle rij kreeg en de andere twee een
halve kaart: dat las als één module plus twee losse schermen.
Het scherm wordt bijgesneden (object-fit:cover), niet verkleind —
anders is de tekst erin onleesbaar. */
.modrow{display:grid;grid-template-columns:1fr 1.1fr;align-items:stretch;background:#fff;
border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
box-shadow:var(--shadow);margin-top:24px}
.modrow:first-of-type{margin-top:52px}
.modrow .body{padding:46px 48px;display:flex;flex-direction:column;justify-content:center}
.modrow.omgekeerd .body{order:2}
.modrow .shotbox{min-height:400px;overflow:hidden;
background:linear-gradient(150deg,#1d4a73,#2563a8)}
.modrow .shotbox img{display:block;width:100%;height:100%;object-fit:cover;object-position:top left}
/* De bouwtekening heeft veel lege marge links; iets naar rechts snijden
zet de plattegrond en de gepinde melding in beeld. */
.modrow .shotbox.pos-mid img{object-position:top 30%}
/* De modulenaam is de kop, niet een labeltje: hij is het enige wat een
bezoeker moet onthouden. Het volgnummer maakt zichtbaar dat het er drie
zijn. De beloftezin zakt naar een blauwe regel eronder. */
.modrow .modnr{display:block;font-family:var(--display);font-weight:800;font-size:.95rem;
color:var(--amber-deep);letter-spacing:.14em;margin-bottom:10px}
.modrow h3{font-size:2rem;line-height:1.1;letter-spacing:-.02em;margin-bottom:8px}
.modrow .mod-belofte{color:var(--blue);font-weight:600;font-size:1.12rem;margin-bottom:10px}
.modrow .mod-lead{color:var(--muted);font-size:1rem;margin-bottom:6px}
.modrow .checks{margin-top:22px;gap:12px}
.modrow .check{color:var(--ink);font-size:.95rem}
.modrow .check .tick{background:var(--amber-soft);color:var(--amber-deep)}
.modrow .more{margin-top:26px}
@media(max-width:980px){
.modrow{grid-template-columns:1fr}
.modrow .body{padding:34px 30px;order:1}
.modrow .shotbox{order:2;min-height:280px}
}
/* Smalle telefoons. "Kopersbegeleiding" is één onbreekbaar woord dat op 2rem
277px meet; met 60px padding werd de rasterkolom 337px terwijl de rij op een
320px-scherm 272px is. Omdat .modrow op overflow:hidden staat werd het verschil
niet weggeschoven maar weggeknipt — 65px op 320px, 25px op 360px, 10px op 375px,
zonder scrollbalk of enig ander signaal (gemeten 28 aug 2026).
overflow-wrap:anywhere is de garantie: daarmee kan de kolom altijd krimpen,
ongeacht het lettertype. De kleinere kop en smallere padding zorgen dat het
afbreken in de praktijk niet nodig is — op 320px houdt de langste modulenaam
11% marge. Haal die anywhere niet weg. */
@media(max-width:420px){
.modrow .body{padding:30px 18px}
.modrow h3{font-size:1.5rem;overflow-wrap:anywhere}
}
.tag{display:inline-block;font-weight:700;color:var(--blue);background:var(--blue-soft);border-radius:999px;
font-size:.76rem;text-transform:uppercase;letter-spacing:.08em;padding:5px 12px;margin-bottom:14px;align-self:flex-start}
.more{margin-top:18px;font-weight:700;color:var(--navy);display:inline-flex;align-items:center;gap:6px}
.more svg{width:15px;height:15px;transition:transform .2s}
/* ---- 13. FEATURES — kleine icoon-kaarten ------------------ */
.feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:48px}
/* .drie voor een rij van drie kaarten. Als min-width-query, zodat de
mobiele regels verderop (max-width 980/560) hem niet hoeven te verslaan. */
@media(min-width:981px){.feat-grid.drie{grid-template-columns:repeat(3,1fr)}}
.feat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px 24px;transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s}
.feat:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.feat .ico{width:46px;height:46px;border-radius:13px;background:var(--blue-soft);color:var(--blue);
display:grid;place-items:center;margin-bottom:16px}
.feat .ico svg{width:22px;height:22px}
.feat h3{font-size:1.05rem;margin-bottom:.35rem}
.feat p{color:var(--muted);font-size:.89rem}
/* ---- 14. ROLE PILLS (voor wie) ---------------------------- */
.roles{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:40px;margin-bottom:0;max-width:860px;margin-left:auto;margin-right:auto;padding-left:0;list-style:none}
.role{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);border-radius:999px;
padding:12px 22px;font-weight:600;color:var(--navy);font-size:.95rem;transition:.2s}
.role:hover{border-color:var(--amber);background:var(--amber-soft);transform:translateY(-2px)}
.role i{width:7px;height:7px;border-radius:50%;background:var(--amber)}
/* "Voor wie"-sectie: witte band met lijnen boven/onder */
.voorwie{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
/* ---- 15. PWA / TELEFOON-MOCKUP ---------------------------- */
.pwa .grid{display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:center}
.pwa .check{color:var(--ink)}
.pwa .check .tick{background:var(--amber-soft);color:var(--amber-deep)}
.phone{width:min(300px,76vw);margin:0 auto;background:var(--navy);border-radius:38px;padding:13px;
box-shadow:var(--shadow-lg),inset 0 0 0 2px rgba(255,255,255,.07);position:relative}
.phone::before{content:"";position:absolute;top:13px;left:50%;transform:translateX(-50%);width:110px;height:24px;
background:var(--navy);border-radius:0 0 14px 14px;z-index:3}
.phone .scr{border-radius:27px;overflow:hidden;background:#fff;aspect-ratio:9/17.5}
.phone .scr img{width:100%;height:100%;object-fit:cover;object-position:top}
.pwa-stage{position:relative}
.pwa-stage::before{content:"";position:absolute;inset:12% 6%;border-radius:50%;filter:blur(48px);opacity:.4;z-index:-1;
background:radial-gradient(circle,color-mix(in srgb,var(--blue) 55%,transparent),color-mix(in srgb,var(--amber) 40%,transparent) 70%,transparent)}
/* ---- 16. TESTIMONIALS / QUOTES ---------------------------- */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.quote{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px;display:flex;flex-direction:column;position:relative}
.quote::before{content:"\201C";font-family:var(--display);font-size:4.4rem;font-weight:800;color:var(--amber);
opacity:.3;position:absolute;top:2px;left:20px;line-height:1}
.quote p{color:var(--ink);font-size:.95rem;flex:1;position:relative;z-index:1;padding-top:20px}
.qfoot{margin-top:20px;display:flex;gap:12px;align-items:center}
.avatar{width:2.625rem;height:2.625rem;border-radius:50%;flex:0 0 2.625rem;display:grid;place-items:center;
font-family:var(--display);font-weight:700;font-size:.88rem;color:#fff;background:linear-gradient(135deg,var(--blue),var(--navy))}
.quote .who{font-weight:700;color:var(--navy);font-size:.9rem;line-height:1.3}
.quote .firm{color:var(--muted);font-size:.8rem}
/* ---- 17. FINAL CTA (donkere afsluiter) -------------------- */
.finalcta{background:var(--navy);color:#fff;text-align:center;position:relative;overflow:hidden;padding:110px 0}
.finalcta::before{content:"";position:absolute;left:50%;top:-46%;transform:translateX(-50%);width:880px;height:560px;
border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--amber) 20%,transparent),transparent 65%)}
.finalcta .wrap{position:relative;z-index:1}
.finalcta h2{color:#fff;font-size:clamp(2rem,4vw,3rem)}
.finalcta p{color:var(--on-dark);max-width:560px;margin:.7rem auto 2.2rem;font-size:1.1rem}
.finalcta .actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
/* ---- 18. FOOTER ------------------------------------------- */
footer{background:var(--navy-deep);color:var(--footer-fg);padding:64px 0 32px;font-size:.9rem}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px}
.footer-logo{height:40px;width:auto;display:block;margin-bottom:16px}
.footer-logo+p{margin-top:14px}
/* Kolomkoppen zijn h2 en geen h4: de diepste kop erboven is een h2, dus h4 sloeg een
niveau over. font-weight, line-height en letter-spacing staan hier expliciet omdat de
basisregels voor h2 (800, 1.08, -.02em) anders zouden doorwerken — met deze drie is de
weergave rekenkundig gelijk aan de oude h4. */
footer h2{color:#fff;font-family:var(--display);font-size:.98rem;margin-bottom:14px;
font-weight:700;line-height:1.65;letter-spacing:normal}
footer a:hover{color:#fff}
footer .col p{margin-bottom:8px}
.fbot{border-top:1px solid rgba(255,255,255,.1);margin-top:44px;padding-top:24px;display:flex;
justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.82rem;color:var(--footer-fg-dim)}
/* Demo/concept-balkje bovenaan (optioneel) */
/* ---- 19. CONTENT / PROSE (blog, tekstpagina's) -----------
Wrap lopende tekst in .prose voor leesbare typografie met
zichtbare links, lijsten, citaten en tabellen. */
/* 600px en niet 720px: bij 720 kwam elke alinea in de artikelen op circa 90 tekens per
regel, ruim boven de 45-75 die als comfortabel geldt en boven de 85 waar het oog de
volgende regel begint kwijt te raken. Bij 600px zit alles binnen de norm (mediaan 75,
niets boven 75) — gemeten over 58 alinea's met de echte Inter, niet met de ch-eenheid.
overflow-wrap:anywhere staat er tegen lange samenstellingen; zie de reflow-notitie. */
.prose{max-width:600px;color:var(--ink);font-size:1.02rem;overflow-wrap:anywhere}
.prose>*+*{margin-top:1.1em}
.prose h2{margin-top:1.6em}
.prose h3{font-size:1.25rem;margin-top:1.4em}
.prose a{color:var(--blue);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1.5px}
.prose a:hover{color:var(--navy)}
.prose ul,.prose ol{padding-left:1.3em}
.prose li{margin-top:.4em}
.prose li::marker{color:var(--amber-deep)}
.prose blockquote{border-left:3px solid var(--amber);background:var(--amber-soft);
padding:14px 20px;border-radius:0 var(--radius-sm) var(--radius-sm) 0;color:var(--navy);font-style:italic}
.prose hr{border:0;border-top:1px solid var(--line);margin:2em 0}
.prose img{max-width:100%;height:auto;border-radius:var(--radius-sm)}
.prose code{background:var(--blue-soft);color:var(--navy);padding:2px 6px;border-radius:6px;font-size:.9em}
.prose table{width:100%;border-collapse:collapse;font-size:.95rem}
.prose th,.prose td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line)}
.prose th{font-family:var(--display);color:var(--navy);font-weight:700;background:var(--paper-2)}
/* ---- 20. FORMULIEREN (contact / demo aanvragen) ----------
Markup: .form > .field (label + control). .form-row voor
twee velden naast elkaar. */
.form{max-width:560px}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:18px}
.field label{font-weight:600;color:var(--navy);font-size:.92rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
input,textarea,select{font-family:var(--body);font-size:1rem;color:var(--ink);background:#fff;
border:1.5px solid var(--veldrand);border-radius:var(--radius-sm);padding:12px 14px;width:100%;transition:border-color .15s}
input::placeholder,textarea::placeholder{color:var(--muted)}
input:focus,textarea:focus,select:focus{border-color:var(--blue)}
textarea{min-height:130px;resize:vertical}
select{-webkit-appearance:none;appearance:none;cursor:pointer;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235d6b78' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 14px center;padding-right:40px}
.check-row{display:flex;gap:10px;align-items:flex-start;font-size:.92rem;color:var(--ink);min-width:0}
.check-row input[type=checkbox],.check-row input[type=radio]{width:18px;height:18px;flex:0 0 18px;margin-top:2px;accent-color:var(--blue)}
/* Skip-link — onzichtbaar tot toetsenbordfocus */
.skip-link{position:absolute;left:-9999px;top:8px;z-index:200;background:var(--navy);color:#fff;
padding:10px 18px;border-radius:999px;font-weight:700;font-size:.9rem}
.skip-link:focus{left:16px}
/* ---- 21. FOTO-MEDIA & TEAM -------------------------------
.media = foto met afgerond kader + schaduw (hero/sectie).
.team = grid met ronde teamportretten. */
.media{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg);border:1px solid var(--line)}
.media img{display:block;width:100%;height:100%;object-fit:cover}
.team{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:26px;margin-top:42px}
.team-member{text-align:center}
.team-member img{width:120px;height:120px;border-radius:50%;object-fit:cover;box-shadow:var(--shadow);margin:0 auto 12px;display:block}
.team-member .name{font-weight:700;color:var(--navy)}
.team-member .role{color:var(--muted);font-size:.85rem}
/* ---- 22. RESPONSIVE --------------------------------------- */
@media(max-width:980px){
.problem .split{grid-template-columns:1fr;gap:30px}
.problem .split>div:first-child{position:static}
}
/* Deze twee in em en niet in px. Bij 16px zijn 56,25em en 35em exact 900px en 560px, dus
voor een normale instelling verandert er niets. Bij een grotere standaardletter klappen de
rasters wél op tijd terug: met vier kolommen en dubbele tekst liep nazorg.html 197px
zijwaarts (gemeten 28 aug 2026). Zet ze niet terug naar px. */
@media(max-width:56.25em){
section{padding:72px 0}
.pwa .grid,.band-dark .grid{grid-template-columns:1fr;gap:40px}
.stats .grid,.feat-grid,.quotes,.fgrid{grid-template-columns:1fr 1fr}
.fc-1,.fc-2,.fc-3{display:none}
}
@media(max-width:35em){
.stats .grid,.feat-grid,.quotes,.fgrid{grid-template-columns:1fr}
.form-row{grid-template-columns:1fr}
.hero{padding-top:64px}
}
/* ---- 12. KENNISBANK -----------------------------------------
Artikeloverzicht (.kb-grid/.kb-card) en artikelpagina
(.artikel-hero/.artikel-body). Gebruikt .prose voor de tekst. */
.kb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
/* Een raster-item kan standaard niet smaller worden dan zijn eigen inhoud
(min-width:auto). Bij 200% tekst op een smalle telefoon duwt dat de hele
pagina zijwaarts. Met min-width:0 mag de kolom wel krimpen en breekt de
tekst in plaats van dat het scherm meeschuift. Kost niets bij normale
letters: dan is de inhoud toch al smaller dan de kolom. */
.quotes>*,.kb-grid>*,.modrow>*{min-width:0}
.kb-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px 26px;
display:flex;flex-direction:column;transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s}
.kb-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.kb-card .tag{align-self:flex-start;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
color:var(--blue);background:var(--blue-soft);border-radius:999px;padding:5px 12px}
.kb-card h3{font-size:1.12rem;margin:16px 0 .5rem;line-height:1.3}
.kb-card h3 a{color:var(--navy)}
.kb-card h3 a:hover{color:var(--blue)}
.kb-card p{color:var(--muted);font-size:.9rem;flex:1}
.kb-card .meta{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);color:var(--muted);
font-size:.8rem;display:flex;justify-content:space-between;align-items:center;gap:10px}
.kb-card .meta .lees{color:var(--blue);font-weight:600;white-space:nowrap}
.artikel-hero{padding:88px 0 8px}
.artikel-hero .wrap{max-width:760px}
.artikel-hero h1{font-size:clamp(2rem,4vw,2.9rem);margin:.7rem 0 1rem}
.artikel-meta{color:var(--muted);font-size:.88rem;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.artikel-meta .dotsep{opacity:.4}
.artikel-body{padding:28px 0 96px}
.artikel-body .wrap{max-width:760px}
.artikel-terug{display:inline-block;margin-bottom:1.8rem;color:var(--blue);font-weight:600;font-size:.9rem}
/* De navigatie klapt om in **em**, niet in px. In een media query is em gebaseerd op
de standaardlettergrootte van de browser, dus deze grens beweegt mee met een bezoeker
die zijn tekst groter heeft ingesteld. Bij 16px zijn 73,75em en 68,75em exact gelijk
aan 1180px en 1100px. Zet deze twee dus niet terug naar px.
Waarom em (gemeten 28 aug 2026, met --blink-settings=defaultFontSize): op een venster
van 1280px past de balk tot en met een standaard van 22px, en breekt hij bij 24px. In
px bleef de balk daar staan en liep de pagina 287px zijwaarts bij 32px.
Waarom deze twee grenzen (gemeten 31 aug 2026, per 20px doorgemeten): de balk met zes
items plus knop wikkelde tussen 901 en 1075px en opnieuw tussen 1101 en 1140px. Op
1024px — een gewone laptop en een iPad in liggende stand — raakte het logo de eerste
link, stonden "Nazorg & Service", "Voor wie" en "Over Huisinfo" op twee of drie regels
en werd de demoknop 71px hoog in plaats van 46. De oude grenzen waren 56,25em (900px)
voor het hamburgermenu en 68,75em (1100px) voor de krappe balk; daartussen paste de
balk gewoon niet.
Nu: hamburger tot 1120px, krappe balk 1121–1200px, volle balk vanaf 1201px. Overal
minstens 15px lucht naast het logo, niets dat wikkelt.
De grenzen liggen bewust ruimer dan de meting in de testbrowser vroeg. Dezelfde pagina
op de live site in Chrome op Windows gaf op 1181px maar 9px lucht waar Chromium hier
19px gaf: dezelfde CSS, ~10px bredere letterweergave. Reken dus op een marge van
minstens 15px, niet op de krapste waarde die op één machine nog net past. */
@media(max-width:75em){.nav nav{gap:20px}.nav nav a{font-size:.9rem}}
@media(max-width:70em){.nav nav{display:none}.nav>.btn{display:none}.menu-toggle{display:block}}
@media(max-width:900px){.kb-grid{grid-template-columns:1fr 1fr}}
/* Een kennisbankblok met twee kaarten in plaats van drie. Als klasse en niet als
inline stijl: een inline grid-template verslaat elke media query, waardoor het
raster op 320px twee kolommen hield en de categoriechip 13px buiten beeld liep.
Zie de valkuil bij .feat-grid.drie — dezelfde fout, dezelfde oplossing. */
@media(min-width:901px){.kb-grid.twee{grid-template-columns:repeat(2,1fr);max-width:760px;margin-left:auto;margin-right:auto}}
@media(max-width:560px){.kb-grid{grid-template-columns:1fr}}
/* ---- 23. COOKIEBALK ------------------------------------------
Verschijnt alleen als er een GA-meet-ID is ingesteld én de
bezoeker nog niet gekozen heeft. Weigeren kost net zoveel
klikken als accepteren — dat is een wettelijke eis, geen smaak. */
.cookiebar{position:fixed;left:0;right:0;bottom:0;z-index:60;background:#fff;
border-top:1px solid var(--line);box-shadow:0 -14px 40px rgba(15,42,67,.10)}
.cookiebar .cb-in{max-width:1180px;margin:0 auto;padding:20px 24px;display:flex;align-items:center;
gap:28px;flex-wrap:wrap}
.cookiebar .cb-tx{flex:1 1 420px;min-width:0}
.cookiebar .cb-tx b{display:block;font-family:var(--display);color:var(--navy);font-size:1.02rem;margin-bottom:3px}
.cookiebar .cb-tx p{color:var(--muted);font-size:.88rem;line-height:1.55;margin:0}
.cookiebar .cb-tx a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.cookiebar .cb-bt{display:flex;gap:11px;flex:0 0 auto}
.cookiebar .cb-bt .btn{padding:12px 24px;font-size:.9rem}
@media(prefers-reduced-motion:no-preference){
.cookiebar{animation:cb-in .32s cubic-bezier(.16,1,.3,1) both}
@keyframes cb-in{from{transform:translateY(100%)}to{transform:none}}
}
@media(max-width:640px){
.cookiebar .cb-in{padding:18px 20px;gap:16px}
.cookiebar .cb-bt{width:100%;flex-wrap:wrap}
.cookiebar .cb-bt .btn{flex:1 1 130px;justify-content:center;min-width:0;overflow-wrap:anywhere}
}
/* Knop in de footer waarmee je je keuze later kunt wijzigen. */
.cb-open{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;
text-decoration:underline;text-underline-offset:2px}
.cb-open:hover{color:#fff}
/* ---- 24. LOGOWAND + LICHTE WISSELBAND ----------------------
.logo-wall is de statische tegenhanger van de marquee: zelfde
bestanden, maar rustig te lezen op de klantenpagina.
.alt geeft een sectie de lichte wisselkleur. */
.alt{background:var(--paper-3);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
/* De scheidingslijnen komen van een schaduw per cel, niet van een gekleurde
achtergrond achter het raster. Anders kleurt de lege ruimte in de laatste
rij (13 logo's passen niet rond op 5 kolommen) mee als een grijs blok. */
.logo-wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:1px;
background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
max-width:1180px;margin:0 auto}
.logo-wall .lw-cel{background:#fff;min-height:112px;display:grid;place-items:center;padding:22px 20px;
box-shadow:1px 0 0 var(--line),0 1px 0 var(--line)}
.logo-wall .lw-cel img{max-height:46px;max-width:100%;width:auto;
filter:grayscale(100%);opacity:.62;transition:filter .25s,opacity .25s}
.logo-wall .lw-cel:hover img{filter:none;opacity:1}
.logo-wall .lw-cel .lname{white-space:normal;text-align:center;font-size:.98rem;line-height:1.25}
@media(max-width:560px){
.logo-wall{grid-template-columns:1fr 1fr}
.logo-wall .lw-cel{min-height:92px;padding:16px 14px}
.logo-wall .lw-cel img{max-height:36px}
}
/* ---- 26. SMAL SCHERM MET GROTE LETTERS ------------------------
Een venster van minder dan veertien keer de basisletter breed. Dat is
geen gewone telefoon: 320px bij de standaard 16px is twintig em, ruim
buiten dit blok. Het treft alleen wie zijn systeemletter fors groter
heeft gezet en dan een smal scherm gebruikt — precies de combinatie
waarin rijen die naast elkaar staan niet meer passen.
Geen enkel WCAG-criterium eist deze combinatie: SC 1.4.10 gaat over
320px bij normale letters, SC 1.4.4 over 200% tekst op een gewoon
venster. Allebei slagen los van elkaar. Dit blok is voor de optelsom.
Meet het met --blink-settings=defaultFontSize=32 op 320px breed, niet
met html{font-size} — em in een media query volgt de browserinstelling,
niet de opmaak. */
@media (max-width:14em){
.qfoot{flex-direction:column;align-items:flex-start;gap:9px}
.kb-card .meta{flex-direction:column;align-items:flex-start;gap:7px}
.kb-card .meta .lees{white-space:normal}
.kb-card .tag,.eyebrow{overflow-wrap:anywhere}
.more{flex-wrap:wrap}
.stat .desc,.stat .num{overflow-wrap:anywhere}
.hero-stage{max-width:100%;overflow:hidden}
}