/* ═══════════════════════════════════════════════════════════════
   COMFOREST — thema-stylesheet

   AUTOMATISCH SAMENGESTELD. Niet met de hand bijwerken zolang de
   HTML-versie nog de bron is; pas die aan en bouw dit bestand opnieuw.

   Samengevoegd uit:
     • comforest-site/stijl.css        (gedeelde huisstijl)
     • de <style>-blokken van 18 pagina's

   Regels die per paginatype verschilden, hebben een .pt-…-klasse
   gekregen (home, thema, verplichting, artikel, overzicht, juridisch,
   fout). Zo houdt elk paginatype exact de waarden die het in de
   HTML-versie had en verschuift er niets in het ontwerp.
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   COMFOREST — gedeelde huisstijl
   Gebruikt door index.html en gacs.html.
   Pagina-specifieke regels staan in een <style> in de pagina zelf.

   Officiële huisstijl (aug 2025): leisteen #506276 · papier #F0F0EF
   · lime #DBDF6B · salie #B9C9B6 · inkt #2A2735
   ═══════════════════════════════════════════════════════════════ */

/* ── Lettertype ──────────────────────────────────────────────
   De @font-face-regels stonden hier. Ze staan nu in theme.json, zodat
   WordPress ze zelf uitserveert en Barlow ook in de tekstverwerker
   beschikbaar is. De bestanden staan nog steeds op onze eigen server
   (assets/fonts/) en worden dus NIET bij Google opgehaald — anders gaat
   het IP-adres van elke bezoeker naar Google en heb je daar een
   privacyverplichting bij. */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --paper:#F0F0EF; --white:#FFFFFF; --ink:#2A2735; --slate:#506276;
  --slate-d:#3E4D5E; --lime:#DBDF6B; --sage:#B9C9B6;

  /* Gedempte tekst. Was #75808F — dat haalde 4,01:1 op wit en 3,51:1 op
     papier, beide onder de WCAG AA-eis van 4,5:1. #5F6B7A haalt 5,6:1
     op wit en 4,9:1 op papier. */
  --mt:#5F6B7A;

  /* De overgangstokens --teal/--teal-t (wezen naar de off-brand teal
     #1EBE9B) en --coral/--coral-t zijn verwijderd: alle pagina's zijn
     herbouwd op de officiële huisstijl en gebruikten ze nergens meer. */

  --line:rgba(42,39,53,.10); --line2:rgba(42,39,53,.16);
  --sh:0 2px 6px rgba(42,39,53,.05),0 14px 34px rgba(42,39,53,.08);
  --sh-lg:0 6px 16px rgba(42,39,53,.07),0 30px 60px rgba(42,39,53,.13);
  --fh:'Barlow',sans-serif; --fb:'Barlow','Roboto',sans-serif;
}

/* scroll-padding-top houdt rekening met de vaste navigatiebalk (80px).
   Zonder dit landt een ankerlink (#contact, #ingangen) precies zó dat de
   kop áchter de balk verdwijnt — de bezoeker ziet dan de tekst zonder de
   titel. Raakt ook WCAG 2.4.11: een element dat focus krijgt mag niet
   door vaste elementen bedekt worden. 96px = balk + wat lucht. */
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{font-family:var(--fb);background:var(--paper);color:var(--ink);min-height:100vh;overflow-x:hidden;line-height:1.65;-webkit-font-smoothing:antialiased}
::selection{background:rgba(219,223,107,.6)}
h1,h2,h3,h4{font-family:var(--fh);line-height:1.08;letter-spacing:-.02em;font-weight:700}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit}

::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--paper)}
::-webkit-scrollbar-thumb{background:#c9ccc9;border-radius:5px}
::-webkit-scrollbar-thumb:hover{background:#aeb2ae}

/* ── Toetsenbordnavigatie ──────────────────────────────────────
   Zonder dit ziet iemand die met Tab navigeert niet waar hij is.
   :focus-visible toont de ring alleen bij toetsenbordgebruik, niet
   bij een muisklik. */
:focus-visible{
  outline:3px solid var(--slate);
  outline-offset:3px;
  border-radius:4px;
}
.card-dark :focus-visible,
footer :focus-visible,
nav :focus-visible,
.weii :focus-visible{outline-color:var(--lime)}

/* Overslaan-link: eerste tabstop, springt naar de hoofdinhoud. */
.skip{
  position:absolute;left:8px;top:-60px;z-index:200;
  background:var(--lime);color:var(--ink);
  font-family:var(--fh);font-weight:600;font-size:15px;
  padding:12px 22px;border-radius:0 0 12px 12px;
  transition:top .18s ease;
}
.skip:focus{top:0}

/* ── Bewegingsgevoeligheid ─────────────────────────────────────
   Respecteert de systeeminstelling "verminder beweging". Zonder dit
   draaien de scroll-reveals en de markeerstift ook voor mensen die
   daar misselijk van worden. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  /* .js .rv (0,2,0) is specifieker dan .rv (0,1,0), dus deze regel moet
     dezelfde specificiteit hebben om te winnen. Anders blijft alles op
     opacity:0 staan tot JS toeslaat — precies wat we hier niet willen. */
  .js .rv{opacity:1;transform:none}
  .mark::before{transform:scaleX(1)}
}

.wrap{max-width:1140px;margin:0 auto;padding:0 32px;position:relative;z-index:1}
section{position:relative}
.klabel{display:inline-block;font-family:var(--fh);font-size:13px;font-weight:600;letter-spacing:2.2px;text-transform:uppercase;color:var(--slate);margin-bottom:16px}

/* markeerstift */
.mark{position:relative;display:inline-block;white-space:nowrap}
.mark::before{content:'';position:absolute;left:-.12em;right:-.12em;bottom:.06em;height:.42em;background:var(--lime);z-index:-1;border-radius:3px;transform:scaleX(0);transform-origin:left;animation:markin .7s .5s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes markin{to{transform:scaleX(1)}}

/* ── Nav (donker) ── */
nav{position:fixed;top:0;left:0;right:0;z-index:100;height:80px;background:rgba(42,39,53,.98);box-shadow:0 2px 20px rgba(42,39,53,.25)}
.nav-in{max-width:1140px;margin:0 auto;height:100%;display:flex;align-items:center;justify-content:space-between;padding:0 32px}
.logo img{height:40px}
.nav-links{display:flex;align-items:center;gap:24px}
.nav-links a:not(.btn){font-size:14px;font-weight:500;color:#c9c6d2;transition:color .2s;white-space:nowrap}
.nav-links a:not(.btn):hover{color:#fff}

/* Huidige pagina: aria-current vertelt het aan een schermlezer, deze
   regels laten het ook zien. Niet alleen kleurverschil — er komt een
   streepje onder, zodat het ook zonder kleurwaarneming leesbaar is. */
.nav-links a[aria-current="page"]:not(.btn){color:#fff;box-shadow:inset 0 -2px 0 var(--lime)}
.mmenu a[aria-current="page"]{color:#fff}
@media(max-width:1080px){
  .nav-links{gap:16px}
  .nav-links a:not(.btn){font-size:13px}
}

/* mobiel menu */
.hamb{display:none;width:44px;height:44px;border:none;background:transparent;cursor:pointer;padding:10px;margin-left:4px}
.hamb svg{width:100%;height:100%;stroke:#fff;stroke-width:2.2;stroke-linecap:round}
.mmenu{display:none;position:fixed;top:80px;left:0;right:0;z-index:99;background:rgba(42,39,53,.98);box-shadow:0 24px 44px rgba(0,0,0,.35);padding:8px 22px 24px;flex-direction:column}
.mmenu a{padding:14px 4px;font-size:16px;font-weight:500;color:#e6e3ec;border-bottom:1px solid rgba(255,255,255,.08)}
.mmenu a.btn{border:none;margin-top:16px;justify-content:center;color:var(--ink)}
body.menu-open .mmenu{display:flex}
body.menu-open .hamb .h-open{display:none}
.hamb .h-dicht{display:none}
body.menu-open .hamb .h-dicht{display:block}

/* ── Knoppen ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:12px;cursor:pointer;border:none;font-family:var(--fh);font-weight:600;font-size:15.5px;padding:13px 26px;transition:all .22s ease;white-space:nowrap}
.btn-p{background:var(--slate);color:#fff;box-shadow:0 6px 18px rgba(80,98,118,.28)}
.btn-p:hover{background:var(--slate-d);transform:translateY(-2px);box-shadow:0 12px 28px rgba(80,98,118,.36)}
.btn-l{background:var(--lime);color:var(--ink);box-shadow:0 6px 18px rgba(160,165,60,.3)}
.btn-l:hover{background:#e3e678;transform:translateY(-2px);box-shadow:0 12px 28px rgba(160,165,60,.4)}
.btn-o{background:transparent;color:var(--ink);border:1.5px solid var(--line2)}
.btn-o:hover{border-color:var(--slate);background:rgba(80,98,118,.05)}
.btn-lg{padding:16px 32px;font-size:16.5px;border-radius:14px}
.btn-sm{padding:9px 18px;font-size:13.5px;border-radius:10px}

/* .pill en .pdot zijn verwijderd. Ze werden op geen enkele pagina meer
   gebruikt, en .pdot was juist het pulserende "live"-bolletje dat er
   volgens de afgesproken toon (menselijk/warm, niet techy) uit moest. */

/* WCAG 2.2 voegde 2.5.8 toe: een klikdoel moet minstens 24x24 px meten.
   De "lees meer"- en "ontdek hoe"-links in de kaarten zijn 14 px tekst
   zonder padding en komen op ongeveer 23 px uit — net te klein, vooral
   vervelend op een telefoon. Deze regel tilt ze over de grens zonder dat
   de opmaak zichtbaar verschuift. */
.vk a,.ak a.rd,.ik .go,.fout-links a{min-height:24px;display:inline-flex;align-items:center}

/* ── Kaarten ── */
.card{background:var(--white);border:1px solid var(--line);border-radius:20px;box-shadow:var(--sh);transition:transform .25s,box-shadow .25s}
.card.hov:hover{transform:translateY(-5px);box-shadow:var(--sh-lg)}
.card-dark{background:var(--ink);color:#F4F3F6;border:none;border-radius:24px}
.card-lime{background:var(--lime);color:var(--ink);border:none;border-radius:24px}

/* ── Foto-slots ──────────────────────────────────────────────
   Faalt een afbeelding, dan toonde de site eerst de interne notitie
   "foto volgt: fotos/web/hero.jpg" aan de bezoeker. Nu een neutraal
   vlak; de verwachte bestandsnaam staat nog in data-naam voor onszelf. */
.foto{position:relative;border-radius:18px;overflow:hidden;background:#e6e7e2}
.foto img{width:100%;height:100%;object-fit:cover;display:block}
.foto.leeg{
  border:1px solid var(--line2);
  background:repeating-linear-gradient(-45deg,rgba(185,201,182,.16) 0 22px,rgba(255,255,255,.55) 22px 44px);
}

/* ── Bronvermelding ────────────────────────────────────────────
   Bij uitleg over wetgeving hoort waar het vandaan komt. Dat is niet
   alleen netjes: zoekmachines én AI-assistenten citeren eerder een
   pagina die naar de officiële bron verwijst. */
.bron{margin-top:28px;padding-top:16px;border-top:1px solid var(--line);font-size:14px;color:var(--mt);line-height:1.6}
.bron a{color:var(--slate);text-decoration:underline;text-underline-offset:2px}
.bron a:hover{color:var(--ink)}

/* ── Reveal ────────────────────────────────────────────────────
   LET OP: .rv start op opacity:0 en wordt pas zichtbaar als JavaScript
   de klasse .in toevoegt. Stond dat verbergen onvoorwaardelijk in de
   CSS, dan was de hele site blanco voor iedereen zonder werkende JS —
   uitgeschakeld, geblokkeerd door een adblocker, of gewoon een script
   dat niet laadt. De inhoud stond er wel, maar was onzichtbaar.

   Daarom hangt het verbergen nu aan .js op <html>, die door een klein
   inline script bovenaan elke pagina wordt gezet. Geen JS = geen .js =
   alles gewoon zichtbaar. */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.js .rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}.rv-d4{transition-delay:.32s}

/* ── Footer ── */
footer{background:var(--ink);color:#c9c6d2;padding:60px 0 40px;position:relative;z-index:1}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:40px;margin-bottom:44px}
.foot-brand img{height:34px;filter:brightness(0) invert(1);opacity:.9;margin-bottom:16px}
.foot-brand p{font-size:14px;color:#a8a4b3;max-width:300px;line-height:1.7}
.foot-col h3{font-family:var(--fh);font-size:13px;letter-spacing:1.6px;text-transform:uppercase;color:var(--lime);margin-bottom:16px;font-weight:600}
.foot-col a{display:block;font-size:14px;color:#a8a4b3;padding:5px 0;transition:color .2s}
.foot-col a:hover{color:#fff}
/* was #75717f (3,07:1) — nu 4,6:1 op inkt */
.foot-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:26px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;font-size:12.5px;color:#96919f}

@media(max-width:1000px){
  .foot-grid{grid-template-columns:1fr;gap:28px}
}
/* ── Navigatie op smallere schermen ────────────────────────────
   Stond op 720px, maar tussen 720 en 1080 passen de acht links van de
   homepage al niet meer naast het logo: die schoven eroverheen. Nu klapt
   het menu al bij 1000px in.

   .altijd is de uitzondering, voor pagina's zonder hamburgermenu. 404.html
   heeft er geen: daar verborg deze regel álle links, zodat de foutpagina op
   de telefoon alleen nog een logo toonde en geen enkele uitweg bood. Een
   handvol losse links past prima naast het logo, dus die krijgen .altijd
   en blijven staan. (Verving .terug, die nergens meer gebruikt werd.) */
@media(max-width:1000px){
  .nav-links a:not(.btn):not(.altijd){display:none}
  .nav-links .btn:not(.altijd){display:none}
  .hamb{display:block}
}
@media(max-width:460px){
  /* Op heel smalle schermen past alleen nog de contactknop naast het logo. */
  .nav-links a.altijd:not(.btn){display:none}
}
@media(max-width:720px){
  .wrap{padding:0 20px}
  .nav-in{padding:0 20px}
  .logo img{height:34px}
}


/* ══ Uit de <style>-blokken van de pagina's ══ */

.hasdrop{position:relative}
.hasdrop>a::after{content:'';display:inline-block;width:7px;height:7px;margin-left:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.hasdrop:hover>a::after,.hasdrop:focus-within>a::after{transform:rotate(225deg) translateY(2px)}
.drop{position:absolute;top:100%;left:-14px;min-width:230px;background:rgba(42,39,53,.99);border-radius:0 0 14px 14px;box-shadow:0 24px 44px rgba(0,0,0,.35);padding:8px;opacity:0;visibility:hidden;transform:translateY(6px);transition:all .18s ease}
.hasdrop:hover .drop,.hasdrop:focus-within .drop{opacity:1;visibility:visible;transform:none}
.drop a{display:block;padding:11px 14px;border-radius:9px;font-size:14px;color:#c9c6d2}
.drop a:hover{background:rgba(255,255,255,.07);color:#fff}
.hero{padding:130px 0 84px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(34px,5vw,62px);line-height:1.04;letter-spacing:-.025em;color:var(--ink);max-width:14ch}
.hero .lead{font-size:clamp(18px,2.1vw,22px);color:var(--slate);font-weight:500;margin-top:24px;max-width:30ch}
.hero .btns{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.hero-foto{aspect-ratio:4/5;box-shadow:var(--sh-lg)}
.shead{max-width:54ch;margin-bottom:38px}
.pt-home .shead{max-width:52ch;margin-bottom:44px}
.shead h2{font-size:clamp(25px,3.2vw,37px);letter-spacing:-.02em;color:var(--ink)}
.pt-home .shead h2{font-size:clamp(26px,3.4vw,40px);letter-spacing:-.02em;color:var(--ink)}
.shead p{color:var(--slate);font-size:17px;margin-top:12px;font-weight:500}
.sec{padding:74px 0}
.pt-juridisch .sec, .pt-verplichting .sec{padding:52px 0 78px;background:var(--paper)}
.pt-artikel .sec{padding:56px 0 78px;background:var(--paper)}
.pt-overzicht .sec{padding:44px 0 78px;background:var(--white)}
.pt-home .sec{padding:76px 0}
.sec-paper{background:var(--paper)}
.sec-white{background:var(--white)}
.verpl{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.vk{padding:26px 24px 22px;display:flex;flex-direction:column;gap:14px;border-top:3px solid var(--lime)}
.vk-ic{width:34px;height:34px;stroke:var(--slate);stroke-width:1.8;fill:none}
.vk h3{font-size:19px;color:var(--ink)}
.vk p{font-size:14.5px;color:var(--mt);line-height:1.6;flex:1}
.vk a{font-family:var(--fh);font-weight:600;font-size:14px;color:var(--slate);display:inline-flex;align-items:center;gap:6px}
.vk a:hover{gap:10px}
.ingang{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.ik{overflow:hidden;display:flex;flex-direction:column}
.ik .foto{aspect-ratio:16/10;border-radius:20px 20px 0 0}
.ik-body{padding:26px 28px 30px;display:flex;flex-direction:column;gap:12px;flex:1}
.ik h3{font-size:23px;color:var(--ink)}
.ik p{font-size:15.5px;color:var(--mt);line-height:1.62;flex:1}
.ik .go{font-family:var(--fh);font-weight:600;font-size:15px;color:var(--slate);display:inline-flex;align-items:center;gap:8px;margin-top:4px}
.ik:hover .go{gap:12px}
.ptease{display:grid;grid-template-columns:1fr 1fr;gap:0;overflow:hidden}
.ptease .foto{min-height:340px;border-radius:24px 0 0 24px}
.ptease-body{padding:52px 54px;display:flex;flex-direction:column;justify-content:center;gap:16px}
.ptease-body h2{font-size:clamp(24px,3vw,34px);color:#F4F3F6}
.ptease-body p{color:#c3c9d0;font-size:16.5px;line-height:1.7;max-width:44ch}
.ktease{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.ak .foto{aspect-ratio:16/10;border-radius:18px 18px 0 0}
.pt-overzicht .ak .foto{aspect-ratio:16/10;border-radius:20px 20px 0 0}
.ak-body{padding:22px 24px 26px;display:flex;flex-direction:column;gap:10px}
.pt-overzicht .ak-body{padding:22px 24px 26px;display:flex;flex-direction:column;gap:11px;flex:1}
.tag{display:inline-block;font-family:var(--fh);font-size:11.5px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--slate);background:rgba(185,201,182,.28);padding:5px 11px;border-radius:100px;margin:14px 0 10px}
.pt-home .tag, .pt-overzicht .tag{align-self:flex-start;font-family:var(--fh);font-size:11.5px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--slate);background:rgba(185,201,182,.28);padding:5px 11px;border-radius:100px}
.ak h3{font-size:18.5px;color:var(--ink);line-height:1.25}
.pt-overzicht .ak h3{font-size:19px;color:var(--ink);line-height:1.28}
.ak .snip{font-size:14px;color:var(--mt);line-height:1.55}
.pt-overzicht .ak .snip{font-size:14.5px;color:var(--mt);line-height:1.6;flex:1}
.ak a.rd{font-family:var(--fh);font-weight:600;font-size:14px;color:var(--slate);display:inline-flex;gap:6px;margin-top:2px}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.contact-intro h2{font-size:clamp(26px,3.4vw,38px);color:var(--ink)}
.contact-intro p{color:var(--slate);font-size:17px;margin-top:14px;line-height:1.7;max-width:38ch;font-weight:500}
.contact-meta{margin-top:28px;font-size:15px;color:var(--mt);line-height:1.9}
.contact-meta b{color:var(--ink);font-family:var(--fh)}
.form{background:var(--white);border:1px solid var(--line);border-radius:22px;box-shadow:var(--sh);padding:34px 32px}
.veld{margin-bottom:18px}
.veld label{display:block;font-family:var(--fh);font-weight:600;font-size:14px;color:var(--ink);margin-bottom:7px}
.veld input,.veld textarea{width:100%;font-family:var(--fb);font-size:15.5px;color:var(--ink);background:var(--paper);border:1.5px solid var(--line2);border-radius:12px;padding:13px 15px;transition:border-color .18s}
.veld input:focus,.veld textarea:focus{outline:none;border-color:var(--slate)}
.veld textarea{resize:vertical;min-height:96px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form .btn{width:100%;margin-top:4px}
.form .btn[aria-busy="true"]{opacity:.7;cursor:progress}
.verplicht-teken{color:var(--slate)}
.verplicht-uitleg{margin:-8px 0 18px;font-size:12.5px;color:var(--mt)}
.veldfout{margin-top:6px;font-size:13.5px;line-height:1.5;color:#A32B2B;font-weight:500}
.veld input[aria-invalid="true"],.veld textarea[aria-invalid="true"]{border-color:#A32B2B;background:#FDF6F6}
.form-status{margin-top:14px;padding:12px 14px;border-radius:10px;font-size:14.5px;line-height:1.6}
.form-status[data-soort="goed"]{background:rgba(185,201,182,.35);color:#2C4A34;border:1px solid rgba(80,98,118,.2)}
.form-status[data-soort="fout"]{background:#FDF6F6;color:#A32B2B;border:1px solid rgba(163,43,43,.25)}
.form .klein{font-size:12.5px;color:var(--mt);text-align:center;margin-top:14px;line-height:1.6}
.form .klein a{color:var(--slate);text-decoration:underline}
.tp-hero{padding:128px 0 66px;background:var(--white)}
.tp-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
.crumb{font-family:var(--fh);font-size:13px;font-weight:600;color:var(--slate)}
.crumb a{color:var(--mt)}
.crumb a:hover{color:var(--slate)}
.tp-hero h1{font-size:clamp(34px,5vw,58px);line-height:1.05;letter-spacing:-.025em;color:var(--ink);margin:14px 0 0}
.pg-installateur-adviseur .tp-hero h1{font-size:clamp(32px,4.6vw,54px);line-height:1.05;letter-spacing:-.025em;color:var(--ink);margin:14px 0 0}
.tp-lead{font-size:clamp(18px,2vw,21px);color:var(--slate);font-weight:500;margin-top:18px;max-width:34ch}
.tp-hero .foto{aspect-ratio:4/3;box-shadow:var(--sh-lg)}
.block2{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.block2.rev .htxt{order:2}
.block2 .foto{aspect-ratio:4/3;box-shadow:var(--sh)}
.htxt h2{font-size:clamp(24px,3vw,34px);letter-spacing:-.02em;color:var(--ink)}
.htxt p{color:var(--slate);font-size:17px;line-height:1.75;margin-top:14px;font-weight:500}
.points{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pt{padding:28px 26px;border-top:3px solid var(--lime)}
.pt h3{font-size:18px;color:var(--ink);margin-bottom:8px}
.pg-over-ons .pt h3{font-size:19px;color:var(--ink);margin-bottom:8px}
.pt p{font-size:14.5px;color:var(--mt);line-height:1.6}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:10px}
.step .num{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:11px;background:var(--slate);color:#fff;font-family:var(--fh);font-weight:700;font-size:16px;margin-bottom:16px}
.step h3{font-size:20px;color:var(--ink);margin-bottom:8px}
.step p{font-size:15px;color:var(--mt);line-height:1.65}
.proof{background:var(--ink);color:#F4F3F6;border-radius:26px;padding:44px 48px;display:grid;grid-template-columns:auto 1fr;gap:44px;align-items:center}
.proof .big{font-family:var(--fh);font-weight:700;font-size:clamp(58px,9vw,88px);line-height:.9;color:var(--lime);letter-spacing:-.03em}
.proof .big span{display:block;font-size:15px;font-weight:600;color:#c3c9d0;letter-spacing:.5px;margin-top:10px}
.proof p{font-size:19px;line-height:1.6;color:#e7e9ec}
.proof p b{color:#fff}
.cta-band{background:var(--lime);border-radius:26px;padding:52px 44px;text-align:center}
.pt-overzicht .cta-band{background:var(--lime);border-radius:26px;padding:52px 44px;text-align:center;margin-top:16px}
.cta-band h2{font-size:clamp(24px,3.2vw,34px);color:var(--ink)}
.cta-band p{color:#5a5d2f;font-size:17px;font-weight:600;margin:12px auto 26px;max-width:40ch}
.sayband{background:var(--ink);border-radius:26px;padding:56px 48px;text-align:center}
.sayband p{font-family:var(--fh);font-weight:700;font-size:clamp(24px,3.6vw,40px);color:#fff;line-height:1.25;letter-spacing:-.01em;max-width:24ch;margin:0 auto}
.pg-installateur-adviseur .sayband p{font-family:var(--fh);font-weight:700;font-size:clamp(24px,3.6vw,40px);color:#fff;line-height:1.25;letter-spacing:-.01em;max-width:26ch;margin:0 auto}
.sayband p em{font-style:normal;color:var(--lime)}
.pull{border-left:4px solid var(--lime);padding:6px 0 6px 24px;margin:32px 0;font-family:var(--fh);font-weight:600;font-size:23px;line-height:1.4;color:var(--ink)}
.pt-thema .pull{border-left:4px solid var(--lime);padding:6px 0 6px 24px;margin:34px auto 0;max-width:760px;font-family:var(--fh);font-weight:600;font-size:clamp(22px,3vw,30px);line-height:1.35;color:var(--ink)}
.pull cite{display:block;font-size:14px;font-weight:500;color:var(--mt);font-style:normal;margin-top:12px}
.art-head{padding:126px 0 12px;background:var(--white)}
.art-head h1{font-size:clamp(30px,4.4vw,48px);letter-spacing:-.025em;color:var(--ink);max-width:20ch}
.pg-eml .art-head h1, .pg-gacs .art-head h1, .pg-kennis-ai-gebouw .art-head h1{font-size:clamp(30px,4.4vw,48px);letter-spacing:-.025em;color:var(--ink);max-width:22ch}
.pg-privacy .art-head h1{font-size:clamp(30px,4.4vw,48px);letter-spacing:-.025em;color:var(--ink);max-width:20ch;margin-top:14px}
.art-head .lead{font-size:clamp(18px,2vw,21px);color:var(--slate);font-weight:500;margin-top:16px;max-width:56ch}
.pt-juridisch .art-head .lead{font-size:clamp(17px,2vw,20px);color:var(--slate);font-weight:500;margin-top:16px;max-width:60ch}
.art{max-width:720px;margin:0 auto;padding:44px 0 20px}
.pt-artikel .art{max-width:720px;margin:0 auto;padding:48px 0 20px}
.art p{font-size:17.5px;line-height:1.8;color:var(--ink);margin-bottom:22px}
.pt-juridisch .art p{font-size:17px;line-height:1.8;color:var(--ink);margin-bottom:20px}
.art h2{font-size:26px;color:var(--ink);letter-spacing:-.02em;margin:38px 0 14px}
.pg-c-label .art h2, .pg-eml .art h2, .pg-paris-proof .art h2{font-size:25px;color:var(--ink);letter-spacing:-.02em;margin:36px 0 12px}
.pg-gacs .art h2{font-size:25px;color:var(--ink);letter-spacing:-.02em;margin:36px 0 14px}
.pg-privacy .art h2{font-size:24px;color:var(--ink);letter-spacing:-.02em;margin:38px 0 12px}
.fact{background:var(--ink);color:#F4F3F6;border-radius:20px;padding:26px 30px;margin:18px 0;display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center}
.fact .fg{font-family:var(--fh);font-weight:700;font-size:clamp(34px,5vw,46px);line-height:1;color:var(--lime);white-space:nowrap}
.fact p{font-size:15.5px;line-height:1.65;color:#e7e9ec;margin:0}
.fact p b{color:#fff}
.eisen{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:6px 0 8px}
.eis{padding:24px 24px}
.eis .enum{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;background:rgba(185,201,182,.35);font-family:var(--fh);font-weight:700;color:var(--ink);margin-bottom:12px}
.eis h3{font-size:16.5px;color:var(--ink);margin-bottom:6px}
.eis p{font-size:14px;color:var(--mt);line-height:1.6}
.help{background:var(--paper);border-radius:20px;padding:30px 32px;margin:34px 0 6px}
.help h2{margin-top:0}
.help ul{list-style:none;display:flex;flex-direction:column;gap:12px;margin-top:6px}
.help li{display:flex;gap:12px;font-size:16px;color:var(--ink);line-height:1.6}
.help li svg{width:20px;height:20px;stroke:var(--slate);stroke-width:2.4;flex-shrink:0;margin-top:3px}
.help li b{font-weight:600}
.art ul{margin:0 0 22px 22px}
.art li{font-size:17px;line-height:1.7;color:var(--ink);margin-bottom:8px}
.pt-juridisch .art li{font-size:17px;line-height:1.75;color:var(--ink);margin-bottom:8px}
.help p{margin-bottom:0}
.art-meta{font-size:13.5px;color:var(--mt);margin-top:18px;font-family:var(--fh);font-weight:500}
.art-hero{margin:34px 0 0}
.art-hero .foto{aspect-ratio:16/8;box-shadow:var(--sh-lg);max-width:900px;margin:0 auto}
.share{max-width:720px;margin:8px auto 0;padding:22px 0;border-top:1px solid var(--line);display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.share span{font-family:var(--fh);font-weight:600;font-size:14px;color:var(--mt)}
.share a{display:inline-flex;align-items:center;gap:8px;font-family:var(--fh);font-weight:600;font-size:14px;color:#fff;background:#0a66c2;padding:9px 16px;border-radius:10px}
.share a:hover{background:#08529c}
.khead{padding:128px 0 20px;background:var(--white)}
.khead h1{font-size:clamp(34px,5vw,54px);letter-spacing:-.025em;color:var(--ink);margin-top:12px}
.khead p{color:var(--slate);font-size:18px;font-weight:500;margin-top:14px;max-width:48ch}
.klist{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.ak{overflow:hidden;display:flex;flex-direction:column}
.ak .meta{font-size:12.5px;color:var(--mt)}
.ak .rd{font-family:var(--fh);font-weight:600;font-size:14.5px;color:var(--slate);display:inline-flex;gap:7px}
.ak:hover .rd{gap:11px}
.ak.soon{opacity:.72}
.ak.soon .tag{background:rgba(80,98,118,.12)}
.phead{padding:128px 0 20px;background:var(--white)}
.phead h1{font-size:clamp(34px,5vw,54px);letter-spacing:-.025em;color:var(--ink);margin-top:12px}
.phead p{color:var(--slate);font-size:18px;font-weight:500;margin-top:14px;max-width:50ch}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.pk{overflow:hidden;display:flex;flex-direction:column}
.pk .foto{aspect-ratio:16/11;border-radius:20px 20px 0 0}
.pk .foto.leeg{border-radius:20px 20px 0 0;min-height:170px}
.pk-body{padding:22px 24px 26px;display:flex;flex-direction:column;gap:9px;flex:1}
.plaats{font-family:var(--fh);font-size:12px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:var(--slate)}
.pk h3{font-size:20px;color:var(--ink);line-height:1.2}
.pk p{font-size:14.5px;color:var(--mt);line-height:1.6;flex:1}
.pk .rd{font-family:var(--fh);font-weight:600;font-size:14px;color:var(--slate);display:inline-flex;gap:7px}
.pk:hover .rd{gap:11px}
.pk.leeg-kaart{border-style:dashed}
.pk.leeg-kaart .pk-body h3{color:var(--mt)}
.art h3{font-size:18.5px;color:var(--ink);margin:26px 0 8px}
.art a{color:var(--slate);text-decoration:underline;text-underline-offset:2px}
.art table{width:100%;border-collapse:collapse;margin:0 0 24px}
.art th,.art td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line);font-size:16px;vertical-align:top}
.art th{font-family:var(--fh);font-weight:600;color:var(--ink);background:var(--paper)}
.invullen{background:#FDF3D9;border:1px dashed #A8862B;border-radius:6px;padding:1px 7px;font-size:.94em;color:#6B540F;font-weight:600}
.let-op{background:var(--paper);border-left:4px solid var(--lime);border-radius:0 14px 14px 0;padding:22px 26px;margin:30px 0}
.let-op p:last-child{margin-bottom:0}
.bijgewerkt{font-size:14.5px;color:var(--mt);margin-top:34px;padding-top:18px;border-top:1px solid var(--line)}
.fout{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:120px 24px 80px;position:relative;overflow:hidden}
.fout-blob{position:absolute;border-radius:50%;pointer-events:none;opacity:.7}
.fb1{width:620px;height:620px;background:radial-gradient(circle,rgba(185,201,182,.5),transparent 68%);top:-240px;right:-200px}
.fb2{width:520px;height:520px;background:radial-gradient(circle,rgba(219,223,107,.35),transparent 68%);bottom:-220px;left:-180px}
.fout-in{max-width:620px;text-align:center;position:relative;z-index:1}
.fout-code{font-family:var(--fh);font-size:clamp(64px,12vw,120px);font-weight:700;line-height:.9;letter-spacing:-.04em;color:var(--slate);margin-bottom:8px}
.fout-in h1{font-size:clamp(26px,4vw,38px);margin-bottom:16px}
.fout-in p{font-size:16.5px;color:var(--slate);line-height:1.8;margin-bottom:32px}
.fout-knoppen{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-bottom:40px}
.fout-links{border-top:1px solid var(--line);padding-top:26px;display:flex;gap:22px;flex-wrap:wrap;justify-content:center}
.fout-links a{font-size:14.5px;color:var(--mt);transition:color .2s}
.fout-links a:hover{color:var(--ink)}

@media(max-width:920px){
  .hero-grid{grid-template-columns:1fr;gap:36px}
  .hero-foto{aspect-ratio:16/11;max-width:520px}
  .verpl{grid-template-columns:repeat(2,1fr)}
  .ingang{grid-template-columns:1fr}
  .ptease{grid-template-columns:1fr}
  .ptease .foto{min-height:230px;border-radius:24px 24px 0 0}
  .ptease-body{padding:38px 32px}
  .ktease{grid-template-columns:1fr;max-width:480px}
  .contact-grid{grid-template-columns:1fr;gap:32px}
  .tp-hero-grid{grid-template-columns:1fr;gap:34px}
  .tp-hero .foto{aspect-ratio:16/10;max-width:560px}
  .block2{grid-template-columns:1fr;gap:30px}
  .block2.rev .htxt{order:0}
  .points,.steps{grid-template-columns:1fr;max-width:520px}
  .proof{grid-template-columns:1fr;gap:22px;padding:36px 32px;text-align:left}
  .sayband{padding:40px 30px}
  .points{grid-template-columns:1fr;max-width:520px}
  .klist{grid-template-columns:1fr;max-width:480px}
  .khead{padding:108px 0 12px}
  .pgrid{grid-template-columns:1fr;max-width:480px}
  .phead{padding:108px 0 12px}
}

@media(max-width:560px){
  .hero{padding:110px 0 60px}
  .verpl{grid-template-columns:1fr}
  .sec{padding:54px 0}
  .pt-home .sec{padding:56px 0}
  .tp-hero{padding:108px 0 52px}
  .art-head{padding:104px 0 8px}
  .art{padding:32px 0 10px}
  .pt-artikel .art{padding:34px 0 10px}
  .art table{font-size:15px}
}

@media(max-width:720px){
  .eisen{grid-template-columns:1fr}
  .fact{grid-template-columns:1fr;gap:12px}
}