/* ======================================================================
   PIETER DE VIDTS — licht is de standaard, donker is een schakelaar.
   Eén mechanisme draagt alles: de thermostaat. Draaien = navigeren.
   ====================================================================== */

:root{
  /* merkkleuren, uit zijn logo */
  --vuur:#E8371F; --vlam:#F08A12; --ijs:#1C9BDC; --diep:#0A6FA8;
  --vuur-d:#B82810; --ijs-d:#0A6189;
  --groen:#12A150; --groen-d:#0B7A3B; --buitenring:#AFBAC8;

  /* licht — de standaard */
  --bg:#FFFFFF; --bg2:#F5F7FA; --w-paneel:#FFFFFF; --paneel2:#F8FAFC;
  --w-lijn:#E3E8EF; --lijn2:#CFD7E2;
  --ink:#0F141A; --grijs:#5A6675; --grijs2:#808C9C;
  --schaduw:0 1px 2px rgba(16,24,40,.04), 0 12px 32px -12px rgba(16,24,40,.18);
  --schaduw-op:0 2px 4px rgba(16,24,40,.06), 0 28px 60px -20px rgba(16,24,40,.3);
  --w-glas:rgba(255,255,255,.8);
  --sluier:linear-gradient(90deg,rgba(255,255,255,.99) 0%,rgba(255,255,255,.94) 24%,rgba(255,255,255,.6) 44%,rgba(255,255,255,.2) 66%,rgba(255,255,255,0) 100%),
           linear-gradient(180deg,rgba(255,255,255,0) 48%,rgba(255,255,255,.72) 80%,#FFFFFF 100%);

  --max:1280px;
  --f:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --d:'Space Grotesk','Inter',sans-serif;
  --m:'JetBrains Mono',ui-monospace,monospace;

  /* --mix: 0 = koud, 1 = warm. De thermostaat zet hem. */
  --mix:1;
  --w-accent:color-mix(in oklab, var(--ijs) calc((1 - var(--mix)) * 100%), var(--vuur));
  --accent2:color-mix(in oklab, var(--diep) calc((1 - var(--mix)) * 100%), var(--vlam));
  --accent-tekst:color-mix(in oklab, var(--ijs-d) calc((1 - var(--mix)) * 100%), var(--vuur-d));
  --w-gloed:linear-gradient(135deg,var(--w-accent),var(--accent2));
  --wash:color-mix(in oklab, var(--w-accent) 8%, transparent);
}

:root[data-thema="donker"]{
  --vuur:#FF4A2E; --vlam:#FFA12B; --ijs:#3FBEF5; --diep:#1287C6;
  --vuur-d:#FF7357; --ijs-d:#6CD0FF;
  --groen:#2BC56B; --groen-d:#5FE39A; --buitenring:#3C4858;
  --bg:#070A0F; --bg2:#0B0F16; --w-paneel:#101620; --paneel2:#151D28;
  --w-lijn:#1C242F; --lijn2:#2B3542;
  --ink:#EDF2F8; --grijs:#9BA7B6; --grijs2:#78848F;
  --schaduw:0 1px 0 rgba(255,255,255,.04), 0 18px 40px -16px rgba(0,0,0,.8);
  --schaduw-op:0 1px 0 rgba(255,255,255,.05), 0 36px 80px -24px rgba(0,0,0,.95);
  --w-glas:rgba(7,10,15,.78);
  --sluier:linear-gradient(90deg,rgba(7,10,15,.99) 0%,rgba(7,10,15,.95) 24%,rgba(7,10,15,.62) 44%,rgba(7,10,15,.22) 66%,rgba(7,10,15,0) 100%),
           linear-gradient(180deg,rgba(7,10,15,0) 48%,rgba(7,10,15,.74) 80%,#070A0F 100%);
  --wash:color-mix(in oklab, var(--w-accent) 15%, transparent);
}

*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:86px}
body{background:var(--bg);color:var(--ink);font:16px/1.65 var(--f);overflow-x:hidden;
  -webkit-font-smoothing:antialiased;transition:background .5s ease,color .5s ease}
h1,h2,h3,h4{font-family:var(--d);line-height:1.05;letter-spacing:-.028em;font-weight:700}
h1,h2{text-wrap:balance}
a{color:inherit;text-decoration:none}
img,svg,video{max-width:100%}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
:focus-visible{outline:2.5px solid var(--w-accent);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.reveal{opacity:0;transform:translateY(24px);transition:opacity .75s cubic-bezier(.16,.8,.24,1),transform .75s cubic-bezier(.16,.8,.24,1)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.07s}
.reveal[data-d="2"]{transition-delay:.14s}
.reveal[data-d="3"]{transition-delay:.21s}

.eyebrow{font-family:var(--m);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent-tekst);display:flex;align-items:center;gap:10px;transition:color .5s}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--w-gloed);border-radius:2px}
.sec{padding:108px 0;position:relative}
@media(max-width:760px){.sec{padding:74px 0}}
.sec-kop{max-width:54ch;margin-bottom:50px}
.sec-kop h2{font-size:clamp(30px,4.4vw,50px);margin-top:16px}
.sec-kop p{color:var(--grijs);margin-top:16px;font-size:17.5px;max-width:56ch}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 26px;border-radius:999px;
  font-weight:600;font-size:15px;white-space:nowrap;flex:none;
  transition:transform .18s,box-shadow .22s,background .5s,border-color .2s}
.btn-vol{background:var(--w-gloed);color:#fff;box-shadow:0 10px 26px -10px color-mix(in oklab,var(--w-accent) 70%,transparent)}
.btn-vol:hover{transform:translateY(-2px);box-shadow:0 18px 36px -12px color-mix(in oklab,var(--w-accent) 80%,transparent)}
.btn-rand{border:1.5px solid var(--lijn2);color:var(--ink);background:var(--w-paneel)}
.btn-rand:hover{border-color:var(--w-accent);transform:translateY(-2px)}

/* ===== KOP ============================================================= */
.kop{position:sticky;top:0;z-index:70;background:var(--w-glas);backdrop-filter:blur(18px) saturate(1.5);
  border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s}
.kop.vast{border-bottom-color:var(--w-lijn);box-shadow:0 1px 20px -10px rgba(16,24,40,.3)}
.kop .wrap{display:flex;align-items:center;gap:16px;height:76px}
.merkje{display:flex;align-items:center;gap:11px;flex:none}
.merkje img{height:46px;width:auto}
.merkje b{font-family:var(--d);font-size:15.5px;letter-spacing:-.01em;line-height:1.1;display:block}
.merkje small{display:block;font:500 9px/1.3 var(--m);letter-spacing:.14em;color:var(--grijs2);margin-top:3px}
.kop nav{display:flex;gap:24px;white-space:nowrap;font-size:14.5px;color:var(--grijs);font-weight:500;margin-left:12px}
.kop nav a{position:relative;padding:5px 0}
.kop nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--w-gloed);
  border-radius:2px;transition:right .3s cubic-bezier(.16,.8,.24,1)}
.kop nav a:hover{color:var(--ink)}
.kop nav a:hover::after{right:0}
.kop-r{margin-left:auto;display:flex;align-items:center;gap:11px}

.publiek{display:inline-flex;background:var(--bg2);border:1px solid var(--w-lijn);border-radius:999px;padding:3px;position:relative}
.publiek button{padding:8px 15px;border-radius:999px;font-size:13px;font-weight:600;color:var(--grijs);
  transition:color .25s;position:relative;z-index:1;white-space:nowrap}
.publiek button[aria-pressed="true"]{color:#fff}
.publiek .pil{position:absolute;top:3px;bottom:3px;left:0;width:0;border-radius:999px;background:var(--w-gloed);
  transition:transform .42s cubic-bezier(.16,.8,.24,1),width .42s cubic-bezier(.16,.8,.24,1),background .5s}
.thema-knop{width:42px;height:42px;border-radius:50%;border:1px solid var(--w-lijn);background:var(--w-paneel);
  display:grid;place-items:center;flex:none;transition:border-color .2s,transform .3s}
.thema-knop:hover{border-color:var(--w-accent);transform:rotate(-20deg)}
.thema-knop svg{width:19px;height:19px}
:root:not([data-thema="donker"]) .thema-knop .maan{display:none}
:root[data-thema="donker"] .thema-knop .zon{display:none}
.bel{font-family:var(--m);font-size:13.5px;color:var(--grijs);white-space:nowrap}
.bel:hover{color:var(--accent-tekst)}
.mini{width:40px;height:40px;flex:none;border-radius:50%;position:relative;opacity:0;pointer-events:none;
  transform:scale(.6);transition:opacity .35s,transform .35s;cursor:pointer}
.mini.w-aan{opacity:1;transform:none;pointer-events:auto}
.mini .ring{position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 220deg,var(--diep),var(--ijs) 70deg,var(--lijn2) 140deg,var(--vlam) 230deg,var(--vuur) 300deg,var(--diep));
  -webkit-mask:radial-gradient(circle closest-side,transparent 64%,#000 65%,#000 88%,transparent 89%);
  mask:radial-gradient(circle closest-side,transparent 64%,#000 65%,#000 88%,transparent 89%)}
.mini .w-stip{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--w-accent);box-shadow:0 0 0 2.5px var(--bg);transition:background .5s}
.burger{display:none;width:44px;height:44px;border:1px solid var(--w-lijn);border-radius:13px;background:var(--w-paneel);place-items:center;flex:none}
.burger span{display:block;width:17px;height:2px;background:var(--ink);margin:3.5px auto;border-radius:2px;transition:transform .25s,opacity .25s}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
.lade{display:none;border-top:1px solid var(--w-lijn);background:var(--bg)}
.lade.open{display:block}
.lade a{display:block;padding:16px 24px;border-bottom:1px solid var(--w-lijn);font-weight:500}
.lade a:last-child{border:none;color:var(--accent-tekst)}
@media(max-width:1180px){.kop nav{display:none}.burger{display:grid}}
@media(max-width:820px){.bel,.kop .btn{display:none}}
.kort{display:none}
@media(max-width:700px){.lang{display:none}.kort{display:inline}.merkje b,.merkje small{display:none}
  .publiek button{padding:8px 13px;font-size:12.5px}.merkje img{height:40px}.kop .wrap{gap:10px}}
@media(min-width:1181px){.lade{display:none!important}}

/* ===== HERO ============================================================ */
.w-hero{position:relative;overflow:hidden;padding:68px 0 60px}
.w-hero .wash{position:absolute;inset:-20% -10% auto -10%;height:130%;z-index:-2;pointer-events:none;
  background:radial-gradient(45% 55% at 80% 10%, var(--wash), transparent 70%),
             radial-gradient(40% 50% at 8% 88%, color-mix(in oklab,var(--ijs) 9%,transparent), transparent 70%);
  transition:background .6s ease}
.w-hero .w-raster{position:absolute;inset:0;z-index:-1;opacity:.6;pointer-events:none;
  background-image:linear-gradient(var(--w-lijn) 1px,transparent 1px),linear-gradient(90deg,var(--w-lijn) 1px,transparent 1px);
  background-size:72px 72px;mask-image:radial-gradient(ellipse 70% 60% at 50% 25%,#000,transparent 72%)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:36px;align-items:center}
@media(max-width:1000px){.hero-grid{grid-template-columns:1fr;gap:10px}.w-hero{padding:44px 0 36px}}
.merk-tag{display:inline-flex;align-items:center;gap:10px;font-family:var(--m);font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--grijs);border:1px solid var(--lijn2);
  padding:8px 15px;border-radius:999px;background:var(--w-paneel)}
.merk-tag .w-stip{width:7px;height:7px;border-radius:50%;background:var(--w-accent);
  box-shadow:0 0 0 4px color-mix(in oklab,var(--w-accent) 22%,transparent);animation:klop 2.6s ease-in-out infinite}
@keyframes klop{50%{box-shadow:0 0 0 9px color-mix(in oklab,var(--w-accent) 0%,transparent)}}
.w-hero h1{font-size:clamp(37px,5.6vw,72px);margin:24px 0 20px;max-width:15ch}
.w-hero h1 .draai{color:var(--accent-tekst);transition:color .5s ease}
.w-hero .lead{font-size:clamp(16.5px,1.9vw,20px);color:var(--grijs);max-width:50ch;margin-bottom:28px}
.hero-knoppen{display:flex;flex-wrap:wrap;gap:12px}
.bewijsrij{display:flex;flex-wrap:wrap;gap:26px;margin-top:32px;padding-top:24px;border-top:1px solid var(--w-lijn)}
.bewijsrij div{display:flex;flex-direction:column}
.bewijsrij b{font-family:var(--d);font-size:21px;line-height:1}
.bewijsrij span{font-family:var(--m);font-size:10px;color:var(--grijs2);text-transform:uppercase;letter-spacing:.11em;margin-top:6px}
@media(max-width:560px){.hero-knoppen{display:grid;grid-template-columns:1fr}.hero-knoppen .btn{width:100%}}

/* ===== DE TELEFOON IN DE HAND ========================================== */
.toestel{position:relative;height:530px;display:flex;align-items:flex-end;justify-content:center;perspective:1500px}
@media(max-width:1200px) and (min-width:1001px){.kaartfoto{width:52%;top:30px}.hand{height:76%}}
@media(max-width:1000px){.toestel{height:470px;margin-top:14px}}
@media(max-width:560px){.toestel{height:450px}}
.toestel .plas{position:absolute;right:-4%;bottom:14px;width:62%;height:86px;border-radius:50%;
  background:radial-gradient(ellipse,color-mix(in oklab,var(--w-accent) 34%,transparent),transparent 70%);
  filter:blur(36px);opacity:.8;transition:background .5s}
/* de telefoon wordt op HOOGTE gemaatvoerd, anders groeit hij uit het kader */
.hand{position:absolute;right:9%;bottom:30px;height:84%;z-index:5;
  animation:binnen 1.25s cubic-bezier(.17,.84,.33,1) both}
@media(max-width:620px){.hand{right:50%;transform-origin:bottom center;margin-right:-23%}}
.zwaai,.fon{height:100%}
.fon{width:auto}
@keyframes binnen{from{transform:translate3d(-70px,200px,0) rotate(-18deg);opacity:0}
                  to{transform:translate3d(0,0,0) rotate(0);opacity:1}}
.zwaai{transform-style:preserve-3d;animation:zweef 8s ease-in-out infinite alternate}
@keyframes zweef{from{transform:rotateY(-13deg) rotateZ(-7deg) rotateX(3deg)}
                 to{transform:rotateY(-7deg) rotateZ(-4deg) rotateX(1deg) translateY(-16px)}}
.fon{position:relative;border-radius:40px;background:linear-gradient(150deg,#39414F,#11161D 45%,#2A323E);
  padding:10px;aspect-ratio:9/19.2;
  box-shadow:0 2px 0 rgba(255,255,255,.16) inset, 0 50px 80px -30px rgba(10,15,25,.6), 0 16px 36px -16px rgba(10,15,25,.45)}
.fon::after{content:"";position:absolute;left:34%;right:34%;top:15px;height:22px;border-radius:999px;background:#05080C;z-index:4}
.scherm{position:relative;height:100%;border-radius:31px;overflow:hidden;background:#05080C}
.reel{position:absolute;inset:0}
.reel figure{position:absolute;inset:0;opacity:0;animation:reelwissel 15s linear infinite}
.reel figure:nth-child(2){animation-delay:5s}
.reel figure:nth-child(3){animation-delay:10s}
.reel img{width:100%;height:100%;object-fit:cover;animation:duw 15s linear infinite}
.reel figure:nth-child(2) img{animation-delay:5s}
@keyframes reelwissel{0%{opacity:0}2%,31%{opacity:1}34%,100%{opacity:0}}
@keyframes duw{0%{transform:scale(1.03)}34%{transform:scale(1.17)}100%{transform:scale(1.17)}}
.reel .vulling{display:grid;place-content:center;text-align:center;padding:24px;background:linear-gradient(150deg,#E8371F,#F08A12)}
.reel .vulling b{display:block;font-family:var(--d);font-size:21px;color:#fff;line-height:1.15}
.reel .vulling span{display:block;font-family:var(--m);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.85);margin-top:12px}
.duister{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(rgba(0,0,0,.5),transparent 24%,transparent 52%,rgba(0,0,0,.76))}
.chroom{position:absolute;inset:0;z-index:3;color:#fff;display:flex;flex-direction:column;padding:48px 14px 18px}
.balkjes{display:flex;gap:4px;margin-bottom:12px}
.balkjes i{flex:1;height:2.5px;border-radius:2px;background:rgba(255,255,255,.35);overflow:hidden}
.balkjes i::after{content:"";display:block;height:100%;width:100%;background:#fff;transform-origin:left;transform:scaleX(0);
  animation:vul 15s linear infinite}
.balkjes i:nth-child(2)::after{animation-delay:5s}
.balkjes i:nth-child(3)::after{animation-delay:10s}
@keyframes vul{0%{transform:scaleX(0)}33%{transform:scaleX(1)}100%{transform:scaleX(1)}}
.chroom .naam{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.chroom .naam img{width:27px;height:27px;border-radius:50%;background:#fff;object-fit:contain;padding:2px}
.chroom .onder{margin-top:auto;display:flex;align-items:flex-end;gap:10px}
.bijschrift{font-size:12.5px;max-width:74%;line-height:1.45;text-shadow:0 1px 10px rgba(0,0,0,.7)}
.bijschrift b{display:block;font-weight:600}
.bijschrift span{opacity:.85;font-size:11.5px}
.knoppen{margin-left:auto;display:flex;flex-direction:column;gap:13px;align-items:center}
.knoppen svg{width:21px;height:21px;filter:drop-shadow(0 1px 4px rgba(0,0,0,.6))}
.knoppen b{font-size:9.5px;font-weight:600;margin-top:-9px;text-shadow:0 1px 4px rgba(0,0,0,.7)}
/* duim en vingertoppen: eenvoudige vormen, geen anatomieles */
.vingers{position:absolute;inset:0;z-index:5;pointer-events:none}
.vingers span{position:absolute;background:linear-gradient(120deg,#E3B693,#C98E68);
  box-shadow:0 2px 12px rgba(0,0,0,.28), inset 0 2px 6px rgba(255,255,255,.35)}
:root[data-thema="donker"] .vingers span{background:linear-gradient(120deg,#C49A77,#9C7050)}
/* één duim over de rand, en een donkere arm erachter: dat leest als een
   hand. Vier losse vingers lezen als worsten. */
.vingers .duim{width:26%;height:30%;left:-9%;bottom:14%;transform:rotate(14deg);
  border-radius:50% 50% 46% 46%/62% 62% 38% 38%}
.arm{position:absolute;z-index:-1;right:-14%;bottom:-22%;width:62%;height:52%;
  background:radial-gradient(60% 60% at 40% 20%, rgba(12,18,28,.5), rgba(12,18,28,0) 72%);
  filter:blur(22px);border-radius:46% 46% 30% 30%;transform:rotate(-12deg)}

/* ===== SFEER: de achtergrond reist mee met de thermostaat ==============
   Diep ijsblauw als het koud staat, grasgroen in het comfortgebied,
   vuurrood op het maximum. Alles hangt aan twee kleuren die het script
   per stand zet, zodat er maar één waarheid is. */
.sfeer{position:absolute;inset:0;z-index:-3;pointer-events:none;transition:background .9s ease;
  background:radial-gradient(58% 70% at 72% 18%, var(--sfeer-a,transparent), transparent 72%),
             radial-gradient(52% 62% at 12% 88%, var(--sfeer-b,transparent), transparent 72%)}
/* een canvas is een vervangen element: zonder breedte/hoogte houdt hij
   zijn eigen maat en doet `inset` niets */
.deeltjes{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.w-hero .wrap{position:relative;z-index:2}

/* luchttrilling: banden die traag omhoog kruipen, sterker naarmate het warmer staat */
.trilling{position:absolute;left:0;right:0;bottom:0;height:46%;z-index:-2;pointer-events:none;
  opacity:calc(var(--mix) * .5);transition:opacity .9s ease;
  background:repeating-linear-gradient(0deg,
    rgba(255,255,255,0) 0px, rgba(255,255,255,.07) 3px, rgba(255,255,255,0) 7px);
  mask-image:linear-gradient(0deg,#000,transparent 85%);
  -webkit-mask-image:linear-gradient(0deg,#000,transparent 85%);
  animation:trilt 5.5s linear infinite}
@keyframes trilt{to{background-position:0 -28px}}

/* damp achter de kaart: ijsnevel als het koud staat, stoom als het warm staat */
.toestel .damp{position:absolute;z-index:1;pointer-events:none;filter:blur(24px);
  transition:background .9s ease;border-radius:50%}
.damp.een{left:2%;bottom:14%;width:46%;height:44%;animation:damp 9s ease-in-out infinite}
.damp.twee{right:8%;bottom:6%;width:40%;height:38%;animation:damp 11s ease-in-out infinite 2.5s}
@keyframes damp{0%{transform:translateY(14px) scale(.9);opacity:0}
                35%{opacity:.75}
                100%{transform:translateY(-54px) scale(1.25);opacity:0}}
.kaartfoto{z-index:2}
.w-chip{z-index:6}

@media(prefers-reduced-motion:reduce){
  .deeltjes,.trilling,.toestel .damp{display:none}
}

/* ===== DE THERMOSTAAT — het mechanisme ================================= */
.kiezer{border-block:1px solid var(--w-lijn);background:var(--bg2);position:relative;overflow:hidden;isolation:isolate}
/* het beeld achter de thermostaat: cover + center, zodat de knop in het beeld
   op elke breedte in het midden blijft staan en mee schaalt */
.kiezer .w-kiezerbeeld{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url("beelden/header/thermostaat-sfeer.jpg");
  background-size:cover;background-position:center center;background-repeat:no-repeat;opacity:.9}
/* links en rechts vervaagt het naar de grond, zodat de twee teksten leesbaar blijven */
.kiezer .w-kiezersluier{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,
    var(--bg2) 0%, color-mix(in oklab,var(--bg2) 55%,transparent) 20%,
    transparent 36%, transparent 64%,
    color-mix(in oklab,var(--bg2) 55%,transparent) 80%, var(--bg2) 100%),
  linear-gradient(180deg, var(--bg2), transparent 16%, transparent 84%, var(--bg2))}
@media(max-width:900px){
  .kiezer .w-kiezerbeeld{background-size:auto 100%}
  .kiezer .w-kiezersluier{background:linear-gradient(180deg, var(--bg2), color-mix(in oklab,var(--bg2) 40%,transparent) 14%, transparent 34%, transparent 66%, color-mix(in oklab,var(--bg2) 40%,transparent) 86%, var(--bg2))}
}
:root[data-thema="donker"] .kiezer .w-kiezerbeeld{opacity:.4;filter:saturate(1.15)}
.kiezer .w-sfeerband{position:absolute;inset:0;z-index:2;pointer-events:none;transition:background .9s ease;
  background:radial-gradient(42% 78% at 50% 50%, var(--sfeer-a-sterk,transparent), transparent 70%),
             radial-gradient(85% 70% at 50% 118%, var(--sfeer-b-sterk,transparent), transparent 72%),
             radial-gradient(30% 50% at 8% 20%, var(--sfeer-b,transparent), transparent 70%)}
.kiezer .wrap{position:relative;z-index:3}
.kiezer .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:26px;padding:52px 24px}
@media(max-width:900px){.kiezer .wrap{grid-template-columns:1fr;gap:16px;padding:38px 24px}}
.pool{display:flex;flex-direction:column;gap:7px;cursor:pointer;border-radius:18px;padding:18px 20px;
  border:1.5px solid var(--w-lijn);transition:border-color .35s,background .35s,opacity .35s,box-shadow .35s;
  background:color-mix(in oklab,var(--w-paneel) 72%,transparent);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
  opacity:.72;text-align:left;align-items:flex-start}
.pool:hover{opacity:.92}
.pool.w-aan{opacity:1;border-color:var(--lijn2);background:var(--w-paneel);box-shadow:var(--schaduw)}
.pool.w-rechts{text-align:right;align-items:flex-end}
.pool .k{font-family:var(--m);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--grijs2)}
.pool b{font-family:var(--d);font-size:clamp(19px,2.4vw,28px);letter-spacing:-.02em;line-height:1.1}
.pool.links b{color:var(--ijs-d)}
.pool.w-rechts b{color:var(--vuur-d)}
.pool p{font-size:14px;color:var(--grijs);max-width:32ch}
@media(max-width:900px){
  .pool,.pool.w-rechts{text-align:center;align-items:center}
  .pool p{max-width:40ch}
  /* op een telefoon moet zichtbaar zijn dát ge erop kunt tikken */
  .pool{opacity:.78;border-color:var(--w-lijn);background:var(--w-paneel)}
  .pool.w-aan{opacity:1;border-color:var(--w-accent);box-shadow:0 10px 26px -14px color-mix(in oklab,var(--w-accent) 70%,transparent)}
  .pool .k::after{content:" · tik hier";letter-spacing:.08em}
  .pool.w-aan .k::after{content:" · staat aan"}
}
.dial{position:relative;width:min(252px,64vw);aspect-ratio:1;touch-action:none;cursor:grab;border-radius:50%;justify-self:center}
.dial:active{cursor:grabbing}
.dial .ring{position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 220deg,var(--diep) 0deg,var(--ijs) 62deg,var(--lijn2) 126deg,var(--vlam) 196deg,var(--vuur) 272deg,transparent 280deg);
  -webkit-mask:radial-gradient(circle closest-side,transparent 63%,#000 64%,#000 81%,transparent 82%);
  mask:radial-gradient(circle closest-side,transparent 63%,#000 64%,#000 81%,transparent 82%)}
.dial .halo{position:absolute;inset:12%;border-radius:50%;background:var(--w-accent);opacity:.16;filter:blur(32px);transition:background .5s}
.dial .w-knop{position:absolute;width:30px;height:30px;border-radius:50%;background:var(--w-paneel);
  border:2.5px solid var(--w-accent);box-shadow:0 6px 16px -4px rgba(16,24,40,.45);transition:border-color .5s}
.dial .w-knop::after{content:"";position:absolute;inset:6px;border-radius:50%;background:var(--w-gloed)}
/* In het midden staat zijn knop uit het beeld, met zijn vlam erin. Geen
   witte schijf en geen cijfer meer van ons: twee knoppen over elkaar is er
   een te veel, en het logo hoort daar. De graad blijft bestaan voor wie
   voorleest; ze staat in aria-valuetext en in de verborgen tekst. */
.dial .mid{position:absolute;inset:22%;border-radius:50%;
  background:url("beelden/header/thermostaat-knop.png") center/contain no-repeat;
  filter:drop-shadow(0 10px 22px rgba(16,24,40,.22))}
/* De temperatuur staat niet meer op de knop — daar staat zijn logo — maar in
   een eigen schijfje in de opening onderaan de ring. Zo is de stand af te
   lezen zonder dat er iets over zijn merk ligt. */
.dial .graad{position:absolute;left:50%;bottom:-18%;transform:translateX(-50%);z-index:3;
  width:40%;aspect-ratio:1;border-radius:50%;display:grid;place-content:center;
  background:var(--w-paneel);border:1.5px solid var(--w-lijn);box-shadow:var(--schaduw);
  font-family:var(--d);font-size:clamp(19px,3.9vw,26px);line-height:1;letter-spacing:-.03em;
  color:var(--accent-tekst);transition:color .5s,border-color .5s}
.dial .stand{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.op-klein{display:none}
@media(max-width:900px){.op-groot{display:none}.op-klein{display:inline}}
.kiezer .hint{grid-column:1/-1;text-align:center;font-family:var(--m);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--grijs2);margin-top:2px}

/* ===== DE GROENE RING: publiek, en ze draait de ándere kant op ========= */
:root[data-publiek="zakelijk"]{--buitenring:var(--groen)}
.dubbel{position:relative;width:min(352px,80vw);aspect-ratio:1;justify-self:center;margin-bottom:26px}
/* Safari gaf dit vak breedte nul: `inset` samen met de aspect-ratio die
   .dial van zijn basisregel meekrijgt. Vandaar vaste percenten. */
.dubbel .dial{position:absolute;left:17%;top:17%;width:66%;height:66%;aspect-ratio:auto}
.buiten{position:absolute;inset:0;border-radius:50%;cursor:grab;touch-action:none}
.buiten:active{cursor:grabbing}
.buiten .baan{position:absolute;inset:0;border-radius:50%;transition:background .55s ease;
  background:conic-gradient(from 220deg,var(--buitenring) 0deg 280deg,transparent 280deg);
  -webkit-mask:radial-gradient(circle closest-side,transparent 85%,#000 86%,#000 99%,transparent 100%);
  mask:radial-gradient(circle closest-side,transparent 85%,#000 86%,#000 99%,transparent 100%)}
.buiten::before{content:"";position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 220deg,var(--w-lijn) 0deg 280deg,transparent 280deg);
  -webkit-mask:radial-gradient(circle closest-side,transparent 84%,#000 85%,#000 100%);
  mask:radial-gradient(circle closest-side,transparent 84%,#000 85%,#000 100%)}
.buiten .gloed{position:absolute;inset:0;border-radius:50%;opacity:0;transition:opacity .55s;
  background:conic-gradient(from 220deg,var(--groen) 0deg 280deg,transparent 280deg);
  -webkit-mask:radial-gradient(circle closest-side,transparent 84%,#000 85%,#000 100%);filter:blur(9px);
  mask:radial-gradient(circle closest-side,transparent 84%,#000 85%,#000 100%);filter:blur(9px)}
:root[data-publiek="zakelijk"] .buiten .gloed{opacity:.5}
.buiten .knopB{position:absolute;width:28px;height:28px;border-radius:50%;background:var(--w-paneel);
  border:2.5px solid var(--buitenring);display:grid;place-items:center;transition:border-color .55s;
  box-shadow:0 4px 12px -2px rgba(16,24,40,.35)}
.buiten .knopB svg{width:13px;height:13px;color:var(--buitenring);transition:color .55s}
.merkpunt{position:absolute;display:flex;align-items:center;gap:7px;
  font-family:var(--m);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--grijs2);
  transition:color .4s,opacity .4s;opacity:.55}
.merkpunt svg{width:17px;height:17px}
.merkpunt.prive{right:0;bottom:-26px;cursor:pointer}
.merkpunt.zaak{left:0;bottom:-26px;cursor:pointer}
:root:not([data-publiek="zakelijk"]) .merkpunt.prive{opacity:1;color:var(--accent-tekst)}
:root[data-publiek="zakelijk"] .merkpunt.zaak{opacity:1;color:var(--groen-d)}
.publiek button[aria-pressed="true"]{color:#fff}
:root[data-publiek="zakelijk"] .publiek .pil{background:linear-gradient(135deg,var(--groen),var(--groen-d))}
/* schalen: zakelijk leest dichter en zakelijker, particulier ruimer */
:root[data-publiek="zakelijk"] .w-hero h1{font-size:clamp(34px,4.9vw,62px);max-width:17ch}
:root[data-publiek="zakelijk"] .w-hero .lead{max-width:56ch;font-size:clamp(16px,1.75vw,18.5px)}
:root[data-publiek="zakelijk"] .eyebrow::before{background:linear-gradient(135deg,var(--groen),var(--groen-d))}

/* ===== DE SCÈNE: de gsm staat niet meer alleen te zweven ============== */
.toestel{position:relative;height:560px;display:block}
@media(max-width:1000px){.toestel{height:520px;margin-top:16px}}
.kaartfoto{position:absolute;left:0;top:18px;width:66%;aspect-ratio:3/4;border-radius:26px;overflow:hidden;
  border:1px solid var(--w-lijn);box-shadow:var(--schaduw-op);background:var(--w-paneel)}
.kaartfoto img{width:100%;height:100%;object-fit:cover}
.kaartfoto figcaption{position:absolute;inset:auto 0 0 0;padding:34px 16px 14px;color:#fff;font-size:11.5px;
  font-family:var(--m);letter-spacing:.04em;background:linear-gradient(transparent,rgba(5,8,12,.88))}
.kaartfoto figcaption b{display:block;font-family:var(--d);font-size:15px;letter-spacing:-.01em;margin-bottom:3px}
.w-chip{position:absolute;left:0;bottom:-28px;z-index:6;background:var(--w-paneel);border:1px solid var(--w-lijn);
  border-radius:16px;padding:13px 16px;box-shadow:var(--schaduw-op);max-width:230px;
  animation:chipop 1s cubic-bezier(.17,.84,.33,1) .7s both}
@keyframes chipop{from{opacity:0;transform:translateY(16px) scale(.94)}to{opacity:1;transform:none}}
.w-chip .sterren{color:var(--vlam);letter-spacing:2px;font-size:11px}
.w-chip p{font-size:13px;line-height:1.45;margin:5px 0 6px}
.w-chip span{font-family:var(--m);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--grijs2)}
@media(max-width:620px){
  .kaartfoto{display:none}
  .w-chip{right:auto;left:0;bottom:0;max-width:190px}
}

/* ===== SPOOR =========================================================== */
.spoor{border-bottom:1px solid var(--w-lijn);background:var(--bg);overflow:hidden}
.spoor .baan{display:flex;width:max-content;padding:17px 0;animation:schuif 44s linear infinite}
.spoor i{display:flex;align-items:center;gap:44px;padding-right:44px;font-style:normal;font-family:var(--m);
  font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--grijs2);white-space:nowrap}
.spoor i::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--w-accent);flex:none}
@keyframes schuif{to{transform:translateX(-50%)}}
.spoor:hover .baan{animation-play-state:paused}

/* ===== DIENSTEN ======================================================== */
.diensten{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:940px){.diensten{grid-template-columns:1fr}}
.w-kaart{position:relative;background:var(--w-paneel);border:1px solid var(--w-lijn);border-radius:22px;padding:30px 28px 32px;
  overflow:hidden;transition:transform .3s cubic-bezier(.16,.8,.24,1),box-shadow .3s,border-color .3s}
.w-kaart::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .3s;pointer-events:none;
  background:radial-gradient(400px circle at var(--mx,50%) var(--my,0%), var(--wash), transparent 45%)}
.w-kaart:hover{transform:translateY(-6px);box-shadow:var(--schaduw-op);border-color:var(--lijn2)}
.w-kaart:hover::before{opacity:1}
.w-kaart .num{font-family:var(--m);font-size:11px;color:var(--grijs2);letter-spacing:.14em}
.w-kaart .ic{width:50px;height:50px;border-radius:15px;display:grid;place-items:center;margin:16px 0 18px;
  background:var(--wash);color:var(--accent-tekst);border:1px solid var(--w-lijn)}
.w-kaart .ic svg{width:24px;height:24px}
.w-kaart h3{font-size:22px;margin-bottom:10px;position:relative}
.w-kaart>p{color:var(--grijs);font-size:14.5px;margin-bottom:18px;position:relative}
.w-kaart ul{list-style:none;display:flex;flex-direction:column;gap:9px;position:relative}
.w-kaart li{font-size:13.5px;color:var(--grijs);padding-left:21px;position:relative;font-family:var(--m)}
.w-kaart li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:2px;border-radius:2px;background:var(--w-accent)}

/* ===== IN DE PERS ====================================================== */
.pers{background:var(--bg2);border-block:1px solid var(--w-lijn)}
.pers-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:20px;align-items:stretch}
@media(max-width:900px){.pers-grid{grid-template-columns:1fr}}
.artikel{background:var(--w-paneel);border:1px solid var(--w-lijn);border-radius:22px;padding:36px 34px;
  box-shadow:var(--schaduw);display:flex;flex-direction:column}
.artikel .bron{display:flex;align-items:center;gap:10px;font-family:var(--m);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grijs2);margin-bottom:20px}
.artikel .bron::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--w-accent);flex:none}
.artikel blockquote{font-family:var(--d);font-size:clamp(20px,2.5vw,29px);line-height:1.24;letter-spacing:-.02em}
.artikel .wie{margin-top:20px;font-size:14px;color:var(--grijs)}
.artikel .lees{margin-top:auto;padding-top:22px;font-weight:600;font-size:14.5px;color:var(--accent-tekst);
  display:inline-flex;align-items:center;gap:8px;transition:gap .2s}
.artikel .lees:hover{gap:14px}
.plek{border:1.5px dashed var(--lijn2);border-radius:22px;padding:30px;display:flex;flex-direction:column;
  justify-content:center;gap:10px;color:var(--grijs2)}
.plek b{font-family:var(--d);font-size:17px;color:var(--grijs)}
.plek p{font-size:13.5px;line-height:1.55}

/* ===== BANNERSCHUIF ACHTER DE EERSTE BLOK ============================== */
.banner{position:absolute;inset:0;z-index:-3;overflow:hidden;pointer-events:none}
.bslide{position:absolute;inset:0;opacity:0;animation:bfade 16s ease-in-out infinite}
.bslide:nth-child(2){animation-delay:8s}
/* hij staat centraal in het beeld: die uitsnede blijft staan, op elke breedte */
/* volledig in beeld en scherp: `contain` laat niets wegvallen, en zonder
   onscherpte blijft het een foto in plaats van een vlek */
.bslide img{width:100%;height:100%;object-fit:contain;object-position:50% 0;filter:saturate(1.04)}
.bslide.merkvlak{background:linear-gradient(130deg,var(--vuur),var(--vlam) 48%,var(--ijs))}
.banner .w-sluier{position:absolute;inset:0;background:var(--sluier);transition:background .5s}
@media(max-width:1000px){
  /* Op een telefoon moeten zijn beelden te zien zijn. Daarom bovenaan een
     echte beeldstrook, en pas daaronder gaat de sluier dicht zodat de tekst
     leesbaar blijft. */
  .w-hero{padding-top:214px}
  /* de banner is hier geen achtergrond maar een strook: anders zie je enkel
     de bovenkant van het beeld, en dat is lucht */
  .banner{height:236px;bottom:auto}
  .banner .w-sluier{background:linear-gradient(180deg,
      transparent 0, transparent 140px,
      color-mix(in oklab,var(--bg) 55%,transparent) 196px,
      var(--bg) 236px)}
  .bslide img{object-fit:cover;object-position:50% 58%}
}
@media(max-width:620px){.w-hero{padding-top:172px}}
/* twee beelden, altijd één in beeld: de overgang overlapt */
@keyframes bfade{0%,44%{opacity:1}50%,94%{opacity:0}100%{opacity:1}}
@media(prefers-reduced-motion:reduce){.bslide{animation:none}.bslide:first-child{opacity:1}}

/* ===== DE FEED: metselwerk met filters ================================= */
.filters{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:26px}
.filters button{font-size:13.5px;font-weight:600;color:var(--grijs);background:var(--w-paneel);
  border:1.5px solid var(--w-lijn);padding:9px 17px;border-radius:999px;
  transition:color .2s,border-color .2s,background .3s,transform .18s}
.filters button:hover{color:var(--ink);transform:translateY(-1px)}
.filters button[aria-pressed="true"]{color:#fff;background:var(--w-gloed);border-color:transparent;
  box-shadow:0 8px 20px -8px color-mix(in oklab,var(--w-accent) 70%,transparent)}
.filters button b{font-family:var(--m);font-size:10.5px;opacity:.65;margin-left:6px}
.feed{column-count:4;column-gap:14px}
@media(max-width:1100px){.feed{column-count:3}}
@media(max-width:760px){.feed{column-count:2}}
@media(max-width:330px){.feed{column-count:1}}
.w-tegel{break-inside:avoid;margin:0 0 14px;position:relative;border-radius:18px;overflow:hidden;
  border:1px solid var(--w-lijn);background:var(--w-paneel);display:block;
  transition:transform .35s cubic-bezier(.16,.8,.24,1),box-shadow .35s,opacity .35s}
.w-tegel:hover{transform:translateY(-5px);box-shadow:var(--schaduw-op)}
.w-tegel.weg{display:none}
.w-tegel img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.16,.8,.24,1)}
.w-tegel:hover img{transform:scale(1.07)}
.w-tegel .merkje-tag{position:absolute;top:11px;left:11px;z-index:3;font-family:var(--m);font-size:9px;
  letter-spacing:.12em;text-transform:uppercase;background:rgba(255,255,255,.92);color:#11161D;
  padding:5px 9px;border-radius:999px;backdrop-filter:blur(6px)}
.w-tegel figcaption{position:absolute;inset:auto 0 0 0;z-index:2;padding:34px 14px 13px;color:#fff;font-size:12px;
  line-height:1.4;background:linear-gradient(transparent,rgba(5,8,12,.9))}
.w-tegel .kijk{position:absolute;inset:0;z-index:2;display:grid;place-items:center;opacity:0;transition:opacity .3s;
  background:color-mix(in oklab,var(--w-accent) 58%,transparent)}
.w-tegel:hover .kijk{opacity:1}
.w-tegel .kijk span{display:inline-flex;align-items:center;gap:8px;background:#fff;color:#11161D;font-weight:600;
  font-size:13px;padding:10px 16px;border-radius:999px;transform:translateY(8px);transition:transform .3s}
.w-tegel:hover .kijk span{transform:none}
/* gekleurde tegels */
.w-tegel.kleur{padding:24px 22px;color:#fff;border:none;display:flex;flex-direction:column;justify-content:flex-end;min-height:208px}
.w-tegel.kleur .k{font-family:var(--m);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;opacity:.9;margin-bottom:auto}
.w-tegel.kleur b{font-family:var(--d);font-size:clamp(17px,1.6vw,22px);line-height:1.15;display:block;margin:16px 0 8px}
.w-tegel.kleur p{font-size:13px;line-height:1.5;opacity:.94}
.w-tegel.vuur{background:linear-gradient(145deg,#E8371F,#F08A12)}
.w-tegel.ijs{background:linear-gradient(145deg,#1C9BDC,#0A6FA8)}
.w-tegel.groen{background:linear-gradient(145deg,#12A150,#0B7A3B)}
.w-tegel.nacht{background:linear-gradient(145deg,#1B2432,#0C1119)}
.w-tegel.cijfer{display:grid;place-content:center;text-align:center;padding:30px 20px;min-height:200px;
  background:var(--paneel2);border:1px solid var(--w-lijn);color:var(--ink)}
.w-tegel.cijfer b{display:block;font-family:var(--d);font-size:clamp(38px,4vw,54px);letter-spacing:-.04em;
  background:var(--w-gloed);-webkit-background-clip:text;background-clip:text;color:transparent}
.w-tegel.cijfer span{display:block;font-family:var(--m);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--grijs2);margin-top:10px}
.w-tegel.citaat{padding:26px 22px;background:var(--w-paneel)}
.w-tegel.citaat .sterren{color:var(--vlam);letter-spacing:3px;font-size:13px;margin-bottom:12px}
.w-tegel.citaat p{font-family:var(--d);font-size:17px;line-height:1.3;letter-spacing:-.01em}
.w-tegel.citaat span{display:block;font-family:var(--m);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--grijs2);margin-top:14px}
.w-tegel.leeg{border:1.5px dashed var(--lijn2);background:transparent;display:grid;place-content:center;
  text-align:center;padding:30px 20px;min-height:190px}
.w-tegel.leeg svg{width:24px;height:24px;color:var(--grijs2);margin:0 auto 10px;display:block}
.w-tegel.leeg span{font-family:var(--m);font-size:10.5px;letter-spacing:.07em;color:var(--grijs2);line-height:1.7}
.volgknop{display:inline-flex;align-items:center;gap:9px;margin-top:14px;background:#fff;color:#11161D;
  font-weight:600;font-size:13px;padding:10px 16px;border-radius:999px;align-self:flex-start}

/* ===== REKENMODULE ===================================================== */
.cfg{display:grid;grid-template-columns:1fr .8fr;gap:20px;align-items:start}
@media(max-width:1000px){.cfg{grid-template-columns:1fr}}
.cfg-paneel{background:var(--w-paneel);border:1px solid var(--w-lijn);border-radius:24px;padding:32px 30px;box-shadow:var(--schaduw)}
.cfg-rij{padding:22px 0;border-bottom:1px solid var(--w-lijn)}
.cfg-rij:first-child{padding-top:0}
.cfg-rij:last-child{border-bottom:none;padding-bottom:0}
.cfg-rij>label,.cfg-rij>.w-vraag{display:block;font-family:var(--m);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grijs2);margin-bottom:13px}
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chips label{display:inline-flex;align-items:center;gap:9px;font-size:14px;border:1.5px solid var(--w-lijn);
  border-radius:999px;padding:10px 16px;cursor:pointer;color:var(--grijs);background:var(--bg);
  transition:border-color .2s,background .2s,color .2s}
.chips label:hover{color:var(--ink);border-color:var(--lijn2)}
.chips input{position:absolute;opacity:0;width:0;height:0}
.chips label:has(input:checked){border-color:var(--w-accent);background:var(--wash);color:var(--ink);font-weight:600}
.schuif{display:flex;align-items:center;gap:16px}
.schuif input[type=range]{flex:1;-webkit-appearance:none;appearance:none;height:6px;border-radius:999px;background:var(--w-lijn);outline:none}
.schuif input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;
  background:var(--bg);border:2.5px solid var(--w-accent);cursor:pointer;box-shadow:0 2px 8px rgba(16,24,40,.25)}
.schuif input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--bg);
  border:2.5px solid var(--w-accent);cursor:pointer}
.schuif output{font-family:var(--d);font-size:25px;min-width:4.6ch;text-align:right;letter-spacing:-.02em}
.schuif output small{font-family:var(--m);font-size:11px;color:var(--grijs2);margin-left:3px}
.cfg-uit{position:sticky;top:96px;background:var(--w-paneel);border:1px solid var(--lijn2);border-radius:24px;
  padding:30px 28px;box-shadow:var(--schaduw-op)}
@media(max-width:1000px){.cfg-uit{position:static}}
.cfg-uit .bovenlijn{display:flex;justify-content:space-between;font-family:var(--m);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--grijs2);margin-bottom:20px}
.w-advies{display:flex;align-items:center;gap:14px}
.w-advies .ic{width:46px;height:46px;flex:none;border-radius:14px;display:grid;place-items:center;
  background:var(--wash);border:1px solid var(--w-lijn);color:var(--accent-tekst)}
.w-advies .ic svg{width:23px;height:23px}
.w-advies h3{font-size:21px}
.w-advies p{font-family:var(--m);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--grijs2);margin-top:5px}
.cfg-uit .w-uitleg{color:var(--grijs);font-size:14.5px;margin:18px 0 22px;min-height:3.4em}
.cijfers{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--w-lijn);border:1px solid var(--w-lijn);border-radius:16px;overflow:hidden}
.cijfers div{background:var(--paneel2);padding:18px 16px}
.cijfers b{display:block;font-family:var(--d);font-size:25px;letter-spacing:-.03em}
.cijfers span{display:block;font-family:var(--m);font-size:9.5px;color:var(--grijs2);text-transform:uppercase;letter-spacing:.1em;margin-top:6px}
.cfg-uit .btn{width:100%;margin-top:20px}
.cfg-uit .fijn{font-family:var(--m);font-size:10.5px;color:var(--grijs2);line-height:1.6;margin-top:14px;text-align:center}

/* ===== AANPAK ========================================================== */
.rail{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--w-lijn);border-radius:22px;
  overflow:hidden;background:var(--w-paneel);box-shadow:var(--schaduw)}
@media(max-width:900px){.rail{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.rail{grid-template-columns:1fr}}
.stap{padding:30px 26px 34px;border-right:1px solid var(--w-lijn);transition:background .3s}
.stap:last-child{border-right:none}
.stap:hover{background:var(--paneel2)}
.stap .n{font-family:var(--m);font-size:10.5px;letter-spacing:.14em;color:var(--grijs2)}
.stap .punt{width:10px;height:10px;border-radius:50%;background:var(--w-accent);margin:15px 0;
  box-shadow:0 0 0 5px var(--wash);transition:background .5s}
.stap h4{font-size:18px;margin-bottom:8px}
.stap p{font-size:14px;color:var(--grijs)}
@media(max-width:900px){.stap:nth-child(2n){border-right:none}.stap:nth-child(-n+2){border-bottom:1px solid var(--w-lijn)}}
@media(max-width:560px){.stap{border-right:none;border-bottom:1px solid var(--w-lijn)}.stap:last-child{border-bottom:none}}

/* ===== WERK + REVIEWS ================================================== */
.werk{display:grid;grid-template-columns:1.4fr 1fr;gap:18px}
@media(max-width:860px){.werk{grid-template-columns:1fr}}
.foto{position:relative;border:1px solid var(--w-lijn);border-radius:22px;overflow:hidden;background:var(--w-paneel)}
.foto img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:16/10;transition:transform .8s cubic-bezier(.16,.8,.24,1)}
.foto:hover img{transform:scale(1.045)}
.werk .foto:nth-child(2) img{aspect-ratio:4/3}
.foto figcaption{position:absolute;inset:auto 0 0 0;padding:40px 22px 20px;color:#fff;font-family:var(--m);font-size:11.5px;
  background:linear-gradient(transparent,rgba(5,8,12,.9))}
.foto figcaption b{display:block;font-family:var(--d);font-size:17px;letter-spacing:-.01em;margin-bottom:4px}
.rev-spoor{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 4px 14px;
  scrollbar-width:thin;scrollbar-color:var(--lijn2) transparent}
.rev-spoor::-webkit-scrollbar{height:6px}
.rev-spoor::-webkit-scrollbar-thumb{background:var(--lijn2);border-radius:999px}
.review{flex:0 0 min(400px,84vw);scroll-snap-align:start;background:var(--w-paneel);border:1px solid var(--w-lijn);
  border-radius:20px;padding:26px;display:flex;flex-direction:column;box-shadow:var(--schaduw)}
.review .sterren{color:var(--vlam);letter-spacing:3px;font-size:14px;margin-bottom:14px}
.review p{font-size:15px;line-height:1.65}
.review .wie{margin-top:auto;padding-top:18px;font-family:var(--m);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--grijs2)}

/* ===== AANVRAAG ======================================================== */
.band{position:relative;overflow:hidden;border-radius:28px;padding:54px 44px;border:1px solid var(--w-lijn);
  background:var(--w-paneel);box-shadow:var(--schaduw-op)}
@media(max-width:620px){.band{padding:36px 20px;border-radius:22px}}
.band::before{content:"";position:absolute;inset:0;pointer-events:none;transition:background .6s;
  background:radial-gradient(60% 60% at 12% 0%, var(--wash), transparent 70%),
             radial-gradient(50% 50% at 92% 100%, color-mix(in oklab,var(--ijs) 10%,transparent), transparent 70%)}
.band .inner{position:relative;z-index:1}
.bandlogo{display:block;width:min(146px,40vw);height:auto;margin:0 auto 20px}
.band h2{font-size:clamp(27px,4vw,44px);margin-bottom:12px;text-align:center}
.band>.inner>p.sub{color:var(--grijs);max-width:48ch;margin:0 auto 28px;text-align:center}
.tabs{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin-bottom:26px}
.tabs button{font-weight:600;font-size:14px;color:var(--grijs);background:var(--bg2);border:1.5px solid var(--w-lijn);
  padding:12px 22px;border-radius:999px;transition:color .2s,border-color .2s,background .3s}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-selected=true]{color:#fff;background:var(--w-gloed);border-color:transparent}
form.aanvraag{max-width:780px;margin:0 auto}

/* ===== De echte formulieren uit de plugin ==============================
   De bezoeker vult hier het formulier van Beheer -> Formulieren in: de
   velden, de controle, de antispam en de bevestigingsmail komen daarvandaan.
   Het thema geeft ze enkel hun kleed, zodat Pieter een veld kan bijzetten
   zonder dat er een ontwerper aan te pas komt. De namen hieronder (.veld,
   .invoer, .knop) zijn van de plugin; daarom staan ze hier zonder w-. */
.aanvraag.echt{max-width:780px;margin:0 auto}
.aanvraag.echt form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:620px){.aanvraag.echt form{grid-template-columns:1fr}}
.aanvraag.echt .veld{display:flex;flex-direction:column;gap:7px;margin:0}
/* een bericht, een vinkje en de knop nemen de volle breedte */
.aanvraag.echt .veld:has(textarea),
.aanvraag.echt .veld:has(select),
.aanvraag.echt .veld:has(input[type=checkbox]),
.aanvraag.echt form>div:last-of-type{grid-column:1/-1}
.aanvraag.echt .veld__label{font-family:var(--m);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--grijs)}
.aanvraag.echt .veld__uitleg,.aanvraag.echt .veld__grens{font-size:12.5px;color:var(--grijs2);text-transform:none;letter-spacing:0}
.aanvraag.echt .invoer{font:15px/1.5 var(--f);color:var(--ink);background:var(--bg);
  border:1.5px solid var(--w-lijn);border-radius:13px;padding:13px 15px;width:100%;
  transition:border-color .2s,box-shadow .2s}
.aanvraag.echt textarea.invoer{min-height:112px;resize:vertical}
.aanvraag.echt .invoer::placeholder{color:var(--grijs2)}
.aanvraag.echt .invoer:focus{outline:none;border-color:var(--w-accent);box-shadow:0 0 0 4px var(--wash)}
.aanvraag.echt select.invoer{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%235A6675' stroke-width='1.6'%3E%3Cpath d='m1 1 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center}
/* het vinkje van de toestemming leest als een zin, niet als een veld */
.aanvraag.echt .veld:has(input[type=checkbox]){flex-direction:row;align-items:flex-start;gap:11px;
  font-size:13.5px;color:var(--grijs);margin-top:4px}
.aanvraag.echt .veld:has(input[type=checkbox]) .veld__label{font-family:var(--f);font-size:13.5px;
  letter-spacing:0;text-transform:none;color:var(--grijs);order:2}
.aanvraag.echt input[type=checkbox],.aanvraag.echt input.vinkje{appearance:auto;-webkit-appearance:checkbox;
  accent-color:var(--w-accent);width:17px;height:17px;min-width:17px;flex:none;margin:2px 0 0;padding:0;order:1;
  border:0;background:none;box-shadow:none;border-radius:0}
.aanvraag.echt .veld:has(input[type=checkbox]){border:0;background:none;padding:0}
/* de rij met het vinkje leest van links naar rechts, en het vinkje blijft
   een vinkje: aambeeld geeft .vinkje een eigen hoogte, en dan staat er een
   zwarte balk naast de zin in plaats van een vakje */
.aanvraag.echt form label.veld:has(input[type=checkbox]){justify-content:flex-start;align-items:flex-start}
.aanvraag.echt form label.veld>input[type=checkbox]{height:17px;min-height:0;max-height:17px;align-self:flex-start}
/* het vakje wordt door de browser zelf getekend, en die kijkt naar
   color-scheme. Aambeeld zet die op donker; op een witte site geeft dat een
   zwart blokje naast de zin. */
.aanvraag.echt form label.veld>input[type=checkbox]{color-scheme:light}
:root[data-thema="donker"] .aanvraag.echt form label.veld>input[type=checkbox]{color-scheme:dark}


.aanvraag.echt .veld--fout .invoer{border-color:var(--vuur)}
.aanvraag.echt .veld__fout,.aanvraag.echt .fout{font-size:12.5px;color:var(--vuur-d)}
.aanvraag.echt .knop--hoofd{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
  font:600 15px/1 var(--f);color:#fff;background:var(--w-gloed);border:0;cursor:pointer;
  padding:15px 26px;border-radius:999px;box-shadow:var(--schaduw);
  transition:transform .18s cubic-bezier(.16,.8,.24,1),box-shadow .25s}
.aanvraag.echt .knop--hoofd:hover{transform:translateY(-2px);box-shadow:var(--schaduw-op)}
.aanvraag.echt .melding,.aanvraag.echt .bericht{grid-column:1/-1}

/* Dezelfde kleding voor het formulier op zijn eigen adres (/formulier/<sleutel>).
   Daar staat geen band omheen, dus de regels hangen aan de wikkel van de kern. */
main .omhulsel--smal{max-width:780px;margin:0 auto}
main .omhulsel--smal form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:620px){main .omhulsel--smal form{grid-template-columns:1fr}}
main .omhulsel--smal .veld{display:flex;flex-direction:column;gap:7px;margin:0}
/* een bericht, een vinkje en de knop nemen de volle breedte */
main .omhulsel--smal .veld:has(textarea),
main .omhulsel--smal .veld:has(select),
main .omhulsel--smal .veld:has(input[type=checkbox]),
main .omhulsel--smal form>div:last-of-type{grid-column:1/-1}
main .omhulsel--smal .veld__label{font-family:var(--m);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--grijs)}
main .omhulsel--smal .veld__uitleg,main .omhulsel--smal .veld__grens{font-size:12.5px;color:var(--grijs2);text-transform:none;letter-spacing:0}
main .omhulsel--smal .invoer{font:15px/1.5 var(--f);color:var(--ink);background:var(--bg);
  border:1.5px solid var(--w-lijn);border-radius:13px;padding:13px 15px;width:100%;
  transition:border-color .2s,box-shadow .2s}
main .omhulsel--smal textarea.invoer{min-height:112px;resize:vertical}
main .omhulsel--smal .invoer::placeholder{color:var(--grijs2)}
main .omhulsel--smal .invoer:focus{outline:none;border-color:var(--w-accent);box-shadow:0 0 0 4px var(--wash)}
main .omhulsel--smal select.invoer{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%235A6675' stroke-width='1.6'%3E%3Cpath d='m1 1 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center}
/* het vinkje van de toestemming leest als een zin, niet als een veld */
main .omhulsel--smal .veld:has(input[type=checkbox]){flex-direction:row;align-items:flex-start;gap:11px;
  font-size:13.5px;color:var(--grijs);margin-top:4px}
main .omhulsel--smal .veld:has(input[type=checkbox]) .veld__label{font-family:var(--f);font-size:13.5px;
  letter-spacing:0;text-transform:none;color:var(--grijs);order:2}
main .omhulsel--smal input[type=checkbox],main .omhulsel--smal input.vinkje{appearance:auto;-webkit-appearance:checkbox;
  accent-color:var(--w-accent);width:17px;height:17px;min-width:17px;flex:none;margin:2px 0 0;padding:0;order:1;
  border:0;background:none;box-shadow:none;border-radius:0}
main .omhulsel--smal .veld:has(input[type=checkbox]){border:0;background:none;padding:0}
/* de rij met het vinkje leest van links naar rechts, en het vinkje blijft
   een vinkje: aambeeld geeft .vinkje een eigen hoogte, en dan staat er een
   zwarte balk naast de zin in plaats van een vakje */
main .omhulsel--smal form label.veld:has(input[type=checkbox]){justify-content:flex-start;align-items:flex-start}
main .omhulsel--smal form label.veld>input[type=checkbox]{height:17px;min-height:0;max-height:17px;align-self:flex-start}
/* het vakje wordt door de browser zelf getekend, en die kijkt naar
   color-scheme. Aambeeld zet die op donker; op een witte site geeft dat een
   zwart blokje naast de zin. */
main .omhulsel--smal form label.veld>input[type=checkbox]{color-scheme:light}
:root[data-thema="donker"] main .omhulsel--smal form label.veld>input[type=checkbox]{color-scheme:dark}


main .omhulsel--smal .veld--fout .invoer{border-color:var(--vuur)}
main .omhulsel--smal .veld__fout,main .omhulsel--smal .fout{font-size:12.5px;color:var(--vuur-d)}
main .omhulsel--smal .knop--hoofd{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
  font:600 15px/1 var(--f);color:#fff;background:var(--w-gloed);border:0;cursor:pointer;
  padding:15px 26px;border-radius:999px;box-shadow:var(--schaduw);
  transition:transform .18s cubic-bezier(.16,.8,.24,1),box-shadow .25s}
main .omhulsel--smal .knop--hoofd:hover{transform:translateY(-2px);box-shadow:var(--schaduw-op)}
main .omhulsel--smal .melding,main .omhulsel--smal .bericht{grid-column:1/-1}
.stapbalk{display:flex;align-items:center;gap:10px;margin-bottom:22px;font-family:var(--m);font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--grijs2)}
.stapbalk .goot{flex:1;height:4px;border-radius:999px;background:var(--w-lijn);overflow:hidden}
.stapbalk .goot i{display:block;height:100%;width:8%;background:var(--w-gloed);transition:width .4s cubic-bezier(.16,.8,.24,1)}
.velden{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:620px){.velden{grid-template-columns:1fr}}
.w-veld{display:flex;flex-direction:column;gap:7px}
.w-veld.vol{grid-column:1/-1}
.w-veld>label{font-family:var(--m);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--grijs)}
.ster{color:var(--vuur-d)}
.w-veld input,.w-veld select,.w-veld textarea{font:15px/1.5 var(--f);color:var(--ink);background:var(--bg);
  border:1.5px solid var(--w-lijn);border-radius:13px;padding:13px 15px;width:100%;transition:border-color .2s,box-shadow .2s}
.w-veld textarea{min-height:112px;resize:vertical}
.w-veld input::placeholder,.w-veld textarea::placeholder{color:var(--grijs2)}
.w-veld input:focus,.w-veld select:focus,.w-veld textarea:focus{outline:none;border-color:var(--w-accent);box-shadow:0 0 0 4px var(--wash)}
.w-veld select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%235A6675' stroke-width='1.6'%3E%3Cpath d='m1 1 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center}
.w-veld .fout{font-size:12.5px;color:var(--vuur-d);display:none}
.w-veld.mis .fout{display:block}
.w-veld.mis input,.w-veld.mis select,.w-veld.mis textarea{border-color:var(--vuur)}
.akkoord{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;color:var(--grijs);margin-top:18px}
.akkoord input{accent-color:var(--w-accent);width:17px;height:17px;flex:none;margin-top:3px}
.akkoord a{color:var(--accent-tekst);text-decoration:underline;text-underline-offset:3px}
.akkoord.mis{color:var(--vuur-d)}
.pot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.verstuur{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:22px}
.verstuur small{font-family:var(--m);font-size:11px;color:var(--grijs2);max-width:34ch}
.samenvat{margin-top:16px;padding:14px 16px;border:1.5px dashed var(--lijn2);border-radius:14px;
  font-family:var(--m);font-size:11.5px;color:var(--grijs);display:none}
.samenvat.in{display:block}
.samenvat b{color:var(--accent-tekst)}
.gelukt{display:none;text-align:center;padding:44px 20px}
.gelukt.in{display:block}
.gelukt .vink{width:62px;height:62px;border-radius:50%;margin:0 auto 18px;display:grid;place-items:center;
  background:var(--wash);border:1.5px solid var(--w-accent);color:var(--accent-tekst)}
.gelukt h3{font-size:25px;margin-bottom:10px}
.gelukt p{color:var(--grijs);max-width:46ch;margin:0 auto}

/* ===== VRAGEN + VOET =================================================== */
.faq{max-width:880px;margin:0 auto;border:1px solid var(--w-lijn);border-radius:22px;overflow:hidden;
  background:var(--w-paneel);box-shadow:var(--schaduw)}
.faq details{border-bottom:1px solid var(--w-lijn)}
.faq details:last-child{border-bottom:none}
.faq summary{list-style:none;cursor:pointer;padding:22px 24px;display:flex;align-items:center;gap:16px;
  font-family:var(--d);font-size:17px;font-weight:600;transition:background .2s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{background:var(--paneel2)}
.faq summary::after{content:"+";margin-left:auto;font-family:var(--m);font-size:21px;color:var(--accent-tekst);transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{padding:0 24px 24px;color:var(--grijs);font-size:15px;max-width:68ch}
footer{padding:64px 0 38px;border-top:1px solid var(--w-lijn);background:var(--bg2)}
.voet{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
@media(max-width:820px){.voet{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.voet{grid-template-columns:1fr}}
.voetlogo{display:block;width:min(180px,60%);height:auto}
.voet .over p{color:var(--grijs);font-size:14px;margin-top:16px;max-width:36ch}
.voet h5{font-family:var(--m);font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:var(--grijs2);margin-bottom:15px}
.voet a,.voet span.l{display:block;font-size:14.5px;margin-bottom:9px}
.voet a:hover{color:var(--accent-tekst)}
.copyr{margin-top:42px;padding-top:22px;border-top:1px solid var(--w-lijn);color:var(--grijs2);font-size:12px;
  font-family:var(--m);display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between}
.belbalk{position:fixed;left:0;right:0;bottom:0;z-index:75;display:none;gap:1px;background:var(--lijn2);border-top:1px solid var(--lijn2)}
.belbalk a{flex:1;text-align:center;padding:15px 8px;font-size:14px;font-weight:600;background:var(--bg)}
.belbalk a.prim{background:var(--w-gloed);color:#fff}
@media(max-width:820px){.belbalk{display:flex}body{padding-bottom:54px}}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1!important;transform:none!important}
  .reel figure:first-child{opacity:1}
}


/* ===== De onderliggende bladzijden ====================================
   Privacy, voorwaarden, over ons, contact: die komen uit Beheer -> Pagina's
   en worden door de kern in `.prosa` gezet. Aambeeld rekent daar op een
   donkere grond, dus zonder deze regels staan de koppen in crèmewit op wit
   en plakken de alinea's aan elkaar. Alles hieronder is alleen opmaak; de
   woorden komen uit het beheer. */
main > .omhulsel--smal,
main > article.omhulsel--smal{padding-block:46px 72px}
main .kruimels{display:flex;gap:9px;align-items:center;font-family:var(--m);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--grijs2);margin-bottom:18px}
main .kruimels a{color:var(--grijs);text-decoration:none}
main .kruimels a:hover{color:var(--accent-tekst)}
main .omhulsel--smal h1{color:var(--ink);font-size:clamp(30px,5vw,46px);line-height:1.04;
  letter-spacing:-.03em;margin:0}
main .omhulsel--smal header .gedempt{color:var(--grijs);max-width:62ch;line-height:1.6}

.prosa{max-width:70ch;color:var(--grijs);font-size:16.5px;line-height:1.75}
.prosa h2,.prosa h3,.prosa h4{color:var(--ink);margin:36px 0 10px;letter-spacing:-.02em;line-height:1.2}
.prosa h2{font-size:clamp(22px,3vw,30px)}
.prosa h3{font-size:clamp(19px,2.4vw,23px)}
.prosa h4{font-size:17px}
.prosa > *:first-child{margin-top:0}
.prosa p{margin:0 0 16px}
.prosa ul,.prosa ol{margin:0 0 18px;padding-left:20px;display:grid;gap:7px}
.prosa li{padding-left:2px}
.prosa a{color:var(--accent-tekst);text-decoration:underline;text-underline-offset:3px}
.prosa strong,.prosa b{color:var(--ink);font-weight:600}
.prosa hr{border:0;border-top:1px solid var(--w-lijn);margin:34px 0}
.prosa blockquote{margin:22px 0;padding:14px 18px;border-left:3px solid var(--w-accent);
  background:var(--bg2);border-radius:0 12px 12px 0;color:var(--ink)}
.prosa img{max-width:100%;height:auto;border-radius:var(--radius-l,18px)}
.prosa table{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:15px}
.prosa th,.prosa td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--w-lijn)}
.prosa th{color:var(--ink);font-family:var(--m);font-size:11px;letter-spacing:.1em;text-transform:uppercase}