/* ==========================================================================
   E&B Vliegenramen
   Nachtblauw-zwart met het merkblauw #050CE8 als actiekleur. Dat blauw is
   prachtig als vlak maar veel te donker als tekst, dus voor letters en
   randen gebruiken we lichtere tinten van dezelfde kleur.
   Alles ademt: gaas dat over vlakken schuift, licht dat de muis volgt,
   kaders die oplichten wanneer je erlangs gaat.
   ========================================================================== */

:root{
  /* --- donker (standaard) --------------------------------------------- */
  --ink:      #07070c;
  --ink-1:    #0b0b12;
  --ink-2:    #101019;
  --ink-3:    #161622;
  --ink-4:    #1e1e2d;
  --line:     #23233a;
  --line-2:   #2f2f4a;

  /* --- merkblauw ------------------------------------------------------- */
  --blauw:     #050ce8;   /* het echte merkblauw: vlakken en knoppen */
  --blauw-hel: #2a33ff;   /* iets lichter, voor gloed en randen */
  --blauw-tx:  #6f78ff;   /* tekstvariant, haalt 5,4:1 op donker */
  --blauw-zt:  #9aa1ff;   /* zachte variant voor grote koppen */
  --blauw-dp:  #03086f;   /* diep, voor schaduwen en verlopen */
  --blauw-glans: rgba(42,51,255,.42);

  --fg:       #eef0f8;
  --fg-2:     #b6bacb;
  --muted:    #7b8098;

  --ok:       #3ddc84;
  --warn:     #e5a83c;
  --bad:      #ff5f57;
  --info:     #58a6ff;

  --sans:    "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Sora", "Manrope", ui-sans-serif, system-ui, sans-serif;
  --mono:    ui-monospace, "SF Mono", "JetBrains Mono", Consolas, monospace;

  --wrap: 1240px;
  --r:    18px;
  --r-sm: 12px;
  --r-pill: 999px;

  --ease:   cubic-bezier(.22,.61,.36,1);
  --spring: cubic-bezier(.34,1.4,.64,1);

  --bel-h: 38px;
  /* De hoogte van de vaste kop INCLUSIEF de beloftebalk erboven.
     Alles wat eronder begint, rekent hiermee. */
  --nav-h: 122px;
}

/* --------------------------------------------------------------- reset */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 18px)}
body{
  margin:0;background:var(--ink);color:var(--fg);
  font-family:var(--sans);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;line-height:1.1;font-weight:700}
p{margin:0 0 1em}
table{border-collapse:collapse}
:focus-visible{outline:2px solid var(--blauw-tx);outline-offset:3px;border-radius:6px}
::selection{background:var(--blauw);color:#fff}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--ink-1)}
::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:9px;border:3px solid var(--ink-1)}
::-webkit-scrollbar-thumb:hover{background:var(--blauw-dp)}

.wrap{width:min(100% - clamp(28px,6vw,120px),var(--wrap));margin-inline:auto}
.skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--blauw);color:#fff;padding:12px 20px;font-weight:700}
.skip:focus{left:12px;top:12px}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
[hidden]{display:none!important}

/* =======================================================================
   Het gaasmotief
   -----------------------------------------------------------------------
   Dit is een vliegenramenzaak, dus het gaas is het merkteken. Een fijn
   raster dat we over vlakken leggen, precies zoals het echte doek.
   ======================================================================= */
.gaas{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 6px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 6px);
  mask-image:radial-gradient(75% 65% at 50% 40%,#000,transparent);
}
.gaas-fijn{
  background-image:
    repeating-linear-gradient(0deg,rgba(255,255,255,.045) 0 1px,transparent 1px 4px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.045) 0 1px,transparent 1px 4px);
}

/* =======================================================================
   Bewegingen
   ======================================================================= */
@keyframes veeg   { 0%{transform:translateX(-140%) skewX(-16deg)} 100%{transform:translateX(340%) skewX(-16deg)} }
@keyframes adem   { 0%,100%{opacity:.32} 50%{opacity:.85} }
@keyframes drift  { from{transform:translate3d(0,0,0)} to{transform:translate3d(-50%,0,0)} }
@keyframes stijg  { from{opacity:0;transform:translateY(26px)} to{opacity:1;transform:none} }
@keyframes klop   { 0%{box-shadow:0 0 0 0 rgba(5,12,232,.55)} 70%{box-shadow:0 0 0 13px rgba(5,12,232,0)} 100%{box-shadow:0 0 0 0 rgba(5,12,232,0)} }
@keyframes popIn  { from{opacity:0;transform:scale(.9)} to{opacity:1;transform:none} }
@keyframes zweef  { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes glans  { 0%{background-position:-200% 0} 100%{background-position:200% 0} }

.rv{opacity:0;transform:translateY(30px);transition:opacity .85s var(--ease),transform .85s var(--ease);transition-delay:calc(var(--i,0)*70ms)}
.rv.in{opacity:1;transform:none}
.rv-s{opacity:0;transform:scale(.94);transition:opacity .8s var(--ease),transform .8s var(--spring);transition-delay:calc(var(--i,0)*60ms)}
.rv-s.in{opacity:1;transform:none}
.reveal-line{display:block;overflow:hidden}
.reveal-line > span{display:block;transform:translateY(108%);transition:transform 1s var(--ease);transition-delay:calc(var(--i,0)*110ms)}
.in .reveal-line > span,.reveal-line.in > span{transform:none}

.spot{position:relative;isolation:isolate}
.spot::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;
  background:radial-gradient(460px circle at var(--mx,50%) var(--my,50%),rgba(42,51,255,.14),transparent 62%);
  transition:opacity .55s var(--ease);
}
.spot:hover::before{opacity:1}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .rv,.rv-s{opacity:1;transform:none}
  .reveal-line > span{transform:none}
}

/* =======================================================================
   Typografie
   ======================================================================= */
.display{font-family:var(--display);font-weight:800;letter-spacing:-.035em;line-height:1.02;font-size:clamp(2.5rem,6.2vw,4.9rem)}
.display em{font-style:normal;color:var(--blauw-zt)}
.h2{font-family:var(--display);font-size:clamp(1.85rem,4vw,3rem);font-weight:800;letter-spacing:-.03em}
.h3{font-family:var(--display);font-size:clamp(1.2rem,2.1vw,1.6rem);font-weight:700;letter-spacing:-.02em}

.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.68rem;font-weight:800;letter-spacing:.26em;text-transform:uppercase;color:var(--blauw-tx);
  margin:0 0 18px;
}
.eyebrow::before{content:"";width:26px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--blauw-hel))}
.lead{font-size:clamp(1.02rem,1.5vw,1.16rem);color:var(--fg-2);max-width:60ch}
.muted{color:var(--muted)}
.blauw{color:var(--blauw-tx)}

/* =======================================================================
   Pillen
   ======================================================================= */
.pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 15px;border-radius:var(--r-pill);
  border:1px solid var(--line-2);background:rgba(255,255,255,.03);
  font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-2);
  backdrop-filter:blur(10px);white-space:nowrap;
}
.pill .dot{width:7px;height:7px;border-radius:50%;background:var(--muted);flex:none}
.pill-open{color:var(--ok);border-color:rgba(61,220,132,.35);background:rgba(61,220,132,.08)}
.pill-open .dot{background:var(--ok);animation:klop 2.4s infinite}
.pill-blauw{color:var(--blauw-tx);border-color:rgba(111,120,255,.4);background:rgba(42,51,255,.1)}
.pill-blauw .dot{background:var(--blauw-hel)}
.pill-glas{
  position:relative;overflow:hidden;isolation:isolate;
  border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(140deg,rgba(255,255,255,.07),rgba(255,255,255,.015));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 8px 26px -18px #000;
}
.pill-glas::after{
  content:"";position:absolute;top:-70%;bottom:-70%;left:0;width:40%;z-index:2;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(154,161,255,.24),transparent);
  animation:veeg 7s var(--ease) infinite;animation-delay:var(--sd,0s);
}

/* =======================================================================
   Knoppen
   ======================================================================= */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 30px;border:1px solid transparent;border-radius:var(--r-pill);
  font-size:.86rem;font-weight:800;letter-spacing:.03em;
  cursor:pointer;overflow:hidden;isolation:isolate;white-space:nowrap;
  transition:transform .32s var(--spring),box-shadow .32s var(--ease),border-color .32s var(--ease),color .32s var(--ease),opacity .3s;
}
.btn.sm{padding:11px 20px;font-size:.76rem}
.btn.lg{padding:18px 38px;font-size:.94rem}
.btn.block{display:flex;width:100%}
.btn:active{transform:translateY(1px) scale(.985)}
.btn[disabled],.btn.is-bezig{opacity:.5;pointer-events:none}

.btn-blauw{background:linear-gradient(135deg,var(--blauw-hel),var(--blauw) 55%,var(--blauw-dp));color:#fff;box-shadow:0 12px 34px -14px var(--blauw-glans)}
.btn-blauw::after{
  content:"";position:absolute;top:-70%;bottom:-70%;left:-45%;width:34%;z-index:1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-18deg);transition:left .62s var(--ease);
}
.btn-blauw:hover{transform:translateY(-3px);box-shadow:0 20px 48px -16px var(--blauw-glans)}
.btn-blauw:hover::after{left:135%}

/* Nog steeds "goud" in de klassenaam laten zou verwarren; dit is de tweede
   actieknop: licht van rand, oplichtend van binnen. */
.btn-goud,.btn-rand{border-color:var(--line-2);color:var(--fg);background:rgba(255,255,255,.02);backdrop-filter:blur(8px)}
.btn-goud::after,.btn-rand::after{
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;transform:scale(.9);
  background:radial-gradient(120% 160% at 50% 120%,rgba(42,51,255,.4),transparent 70%);
  transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.btn-goud:hover,.btn-rand:hover{border-color:var(--blauw-hel);color:#fff;transform:translateY(-3px)}
.btn-goud:hover::after,.btn-rand:hover::after{opacity:1;transform:scale(1)}

.btn-lijn{padding:0;border:0;border-radius:0;background:none;color:var(--blauw-tx);font-size:.95rem;font-weight:700}
.btn-lijn span{position:relative;padding-bottom:3px}
.btn-lijn span::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--blauw-hel);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.btn-lijn:hover span::after{transform:scaleX(1)}
.btn-lijn .arw{display:inline-block;transition:transform .4s var(--spring)}
.btn-lijn:hover .arw{transform:translateX(6px)}

/* =======================================================================
   Navigatie
   ======================================================================= */
/* De balk is een zwevende pil: hij hangt los boven de pagina en staat exact
   even breed als de inhoud eronder. Daardoor lijnt het menu netjes uit met
   de gecentreerde hero-tekst in plaats van tegen de schermranden te plakken. */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;padding:14px 0;background:transparent;
  transition:padding .45s var(--ease),transform .5s var(--ease);
}
.nav.hide{transform:translateY(-118%)}
.nav-in{
  display:flex;align-items:center;gap:14px;
  padding:8px 9px 8px 16px;border-radius:var(--r-pill);
  border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(150deg,rgba(22,22,34,.72),rgba(11,11,18,.66));
  backdrop-filter:blur(18px) saturate(1.6);-webkit-backdrop-filter:blur(18px) saturate(1.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 18px 44px -26px #000;
  transition:background .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease);
}
.nav.stuck{padding:9px 0}
.nav.stuck .nav-in{
  background:linear-gradient(150deg,rgba(16,16,25,.92),rgba(7,7,12,.9));
  border-color:var(--line-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 22px 54px -24px #000;
}
html[data-thema="licht"] .nav-in{
  border-color:rgba(16,19,34,.09);
  background:linear-gradient(150deg,rgba(255,255,255,.86),rgba(255,255,255,.74));
  box-shadow:inset 0 1px 0 #fff,0 16px 40px -28px rgba(16,19,34,.6);
}
html[data-thema="licht"] .nav.stuck .nav-in{background:rgba(255,255,255,.95);border-color:var(--line)}

.mark{display:flex;align-items:center;gap:10px;flex:none}
.mark-ico{color:var(--blauw-tx);flex:none;transition:transform .7s var(--spring),color .4s}
.mark:hover .mark-ico{transform:rotate(-8deg) scale(1.06);color:var(--blauw-zt)}
.mark-tx{display:flex;flex-direction:column;line-height:1.1}
.mark-tx b{font-family:var(--display);font-size:1.06rem;font-weight:800;letter-spacing:.01em}
.mark-tx i{font-style:normal;font-size:.55rem;letter-spacing:.28em;text-transform:uppercase;color:var(--muted)}
@media (max-width:1180px){.mark-tx i{display:none}}

/* Het echte beeldmerk in de navigatiepil. Het logo is zwart lijnwerk op een
   doorzichtige achtergrond: prima op het lichte thema (de standaard), maar
   onzichtbaar zodra iemand naar donker schakelt. Daar keren we het om. */
.mark-beeld{height:40px;width:auto;display:block;flex:none;
  transition:transform .7s var(--spring),filter .4s}
.mark:hover .mark-beeld{transform:rotate(-4deg) scale(1.05)}
html[data-thema="donker"] .mark-beeld{filter:invert(1)}
@media (max-width:560px){.mark-beeld{height:32px}}

/* Het menu staat midden in de pil, ongeacht hoe breed het merk of de
   knoppenrij rechts is. */
.nav-links{display:flex;gap:2px;margin:0 auto}
.nav-links a{
  position:relative;padding:9px 14px;border-radius:var(--r-pill);
  font-size:.82rem;font-weight:600;color:var(--fg-2);transition:color .3s var(--ease);
  /* isolate + z-index:-1 hieronder houden het pilvormige vlak ACHTER de
     tekst. Zonder dit schuift een absoluut geplaatste ::before over de
     inhoud heen zodra de link zelf een flexcontainer wordt, en dan
     verdwijnt precies het menu-item waar je op staat. */
  isolation:isolate;
}
.nav-links a::before{
  content:"";position:absolute;inset:0;z-index:-1;
  border-radius:var(--r-pill);background:rgba(42,51,255,.16);
  transform:scale(.8);opacity:0;transition:transform .38s var(--spring),opacity .3s;
}
.nav-links a:hover,.nav-links a.on{color:#fff}
.nav-links a:hover::before,.nav-links a.on::before{transform:scale(1);opacity:1}

.nav-act{display:flex;gap:8px;align-items:center;flex:none}
.nav-tel{display:inline-flex;align-items:center;gap:7px;font-size:.84rem;font-weight:700;color:var(--fg-2);padding:8px 12px;border-radius:var(--r-pill);transition:color .3s,background .3s}
.nav-tel:hover{color:#fff;background:rgba(255,255,255,.05)}
@media (max-width:1120px){.nav-tel span{display:none}}

.thema{
  width:36px;height:36px;flex:none;display:grid;place-items:center;
  border:1px solid var(--line-2);border-radius:50%;background:rgba(255,255,255,.03);
  color:var(--fg-2);cursor:pointer;
  transition:transform .45s var(--spring),color .3s,border-color .3s;
}
.thema:hover{color:var(--blauw-tx);border-color:var(--blauw-hel);transform:rotate(-18deg)}
.thema .zon{display:none}
html[data-thema="licht"] .thema .maan{display:none}
html[data-thema="licht"] .thema .zon{display:block}

.burger{display:none;width:38px;height:38px;background:none;border:1px solid var(--line-2);border-radius:var(--r-pill);cursor:pointer;position:relative;flex:none}
.burger span,.burger span::before,.burger span::after{
  position:absolute;left:50%;width:18px;height:1.7px;background:var(--fg);border-radius:2px;
  transition:transform .42s var(--spring),opacity .25s,background .25s;
}
.burger span{top:50%;transform:translate(-50%,-50%)}
.burger span::before,.burger span::after{content:"";left:0;transform-origin:center}
.burger span::before{top:-6px}
.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg);background:var(--blauw-tx)}
.burger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg);background:var(--blauw-tx)}

.mob{
  display:none;flex-direction:column;
  width:min(calc(var(--wrap) - 0px),calc(100vw - 32px));margin:10px auto 0;
  background:rgba(7,7,12,.97);backdrop-filter:blur(22px);
  border:1px solid var(--line);border-radius:22px;
  box-shadow:0 26px 60px -28px #000;
  padding:8px 20px 20px;max-height:calc(100svh - 110px);overflow-y:auto;overscroll-behavior:contain;
}
.mob a{padding:15px 4px;border-bottom:1px solid var(--line);font-size:1.05rem;font-weight:600;opacity:0;transform:translateX(-16px);transition:opacity .4s var(--ease),transform .4s var(--ease),color .25s}
.mob a:hover{color:var(--blauw-tx)}
.mob.open a{opacity:1;transform:none}
.mob.open a:nth-child(1){transition-delay:.05s} .mob.open a:nth-child(2){transition-delay:.1s}
.mob.open a:nth-child(3){transition-delay:.15s} .mob.open a:nth-child(4){transition-delay:.2s}
.mob.open a:nth-child(5){transition-delay:.25s} .mob.open a:nth-child(6){transition-delay:.3s}
.mob.open a:nth-child(7){transition-delay:.35s}
.mob-tel{color:var(--blauw-tx);border-bottom:0!important}

@media (max-width:1040px){
  .nav-links{display:none}
  .nav-act{margin-left:auto}
  .burger{display:block}
  .mob{display:flex}
}
@media (max-width:760px){
  .nav-act .btn{display:none}
  .nav-in{padding-left:12px}
}

/* =======================================================================
   Sterren
   ======================================================================= */
.sterren{display:inline-flex;gap:2px;color:#ffc531;vertical-align:middle}
.sterren svg{display:block}

/* =======================================================================
   Secties
   ======================================================================= */
.sec{position:relative;padding:clamp(64px,7.5vw,112px) 0}
.sec-alt{background:var(--ink-1)}
.sec-head{max-width:64ch;margin-bottom:44px}
.sec-head.c{margin-inline:auto;text-align:center}
.sec-head .h2{margin-bottom:16px}

.lijn{position:relative;height:1px;border:0;margin:0;background:linear-gradient(90deg,transparent,var(--line-2),transparent)}

/* =======================================================================
   Voet
   ======================================================================= */
.foot{border-top:1px solid var(--line);background:var(--ink-1);padding:clamp(46px,6vw,72px) 0 26px}
.foot-top{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:clamp(24px,3vw,46px)}
.foot-brand .mark{margin-bottom:16px}
.foot-brand p{color:var(--muted);font-size:.92rem}
.foot-sterren{display:flex;align-items:center;gap:9px;font-size:.85rem;color:var(--fg-2);margin-top:12px;flex-wrap:wrap}
.foot-col h3{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--blauw-tx);margin-bottom:14px;font-weight:800}
.foot-col p{margin:0 0 12px;color:var(--fg-2);font-size:.92rem;line-height:1.75}
.foot-col a{transition:color .25s}
.foot-col a:hover{color:var(--blauw-tx)}
.uren-mini{width:100%;font-size:.86rem}
.uren-mini th{text-align:left;font-weight:500;padding:4px 12px 4px 0;color:var(--muted);white-space:nowrap}
.uren-mini td{text-align:right;padding:4px 0;color:var(--fg-2);font-variant-numeric:tabular-nums}
.uren-mini td.dicht{color:var(--muted)}
.foot-bar{display:flex;align-items:center;gap:18px;margin-top:38px;padding-top:22px;border-top:1px solid var(--line);font-size:.8rem;color:var(--muted);flex-wrap:wrap}
.foot-lijn{flex:1;height:1px;min-width:60px;background:linear-gradient(90deg,var(--line),transparent)}
@media (max-width:900px){.foot-top{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.foot-top{grid-template-columns:1fr}}

/* =======================================================================
   Meldingen en formulieren
   ======================================================================= */
.note{padding:14px 18px;border-radius:var(--r-sm);border:1px solid var(--line-2);background:var(--ink-2);font-size:.92rem;line-height:1.6}
.note-ok{border-color:rgba(61,220,132,.4);background:rgba(61,220,132,.08);color:#c7f5dd}
.note-bad{border-color:rgba(255,95,87,.4);background:rgba(255,95,87,.08);color:#ffd3d1}
.note-info{border-color:rgba(111,120,255,.4);background:rgba(42,51,255,.1);color:#d5d8ff}
.note-warn{border-color:rgba(229,168,60,.4);background:rgba(229,168,60,.08);color:#ffe7bf}

.veld{margin-bottom:16px}
.veld label{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:800;margin-bottom:7px}
.veld input,.veld select,.veld textarea{
  width:100%;padding:13px 15px;border:1px solid var(--line-2);border-radius:var(--r-sm);
  background:var(--ink-1);color:var(--fg);font-size:.97rem;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease),background .3s;
}
.veld input:focus,.veld select:focus,.veld textarea:focus{
  outline:0;border-color:var(--blauw-hel);background:var(--ink-2);
  box-shadow:0 0 0 3px rgba(42,51,255,.2);
}
.veld textarea{min-height:104px;resize:vertical}
.veld .hint{font-size:.79rem;color:var(--muted);margin-top:6px}
.veld-fout input,.veld-fout select,.veld-fout textarea{border-color:var(--bad)}
.rij{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.rij-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
@media (max-width:640px){.rij,.rij-3{grid-template-columns:1fr}}

/* =======================================================================
   Toast
   ======================================================================= */
.toasts{position:fixed;z-index:300;right:16px;bottom:16px;display:flex;flex-direction:column;gap:9px;pointer-events:none}
.toast{
  pointer-events:auto;padding:13px 18px;border-radius:var(--r-sm);
  border:1px solid var(--line-2);background:rgba(16,16,25,.97);backdrop-filter:blur(12px);
  color:var(--fg);font-size:.9rem;box-shadow:0 20px 46px -22px #000;
  animation:popIn .34s var(--spring) both;max-width:min(340px,calc(100vw - 32px));
}
.toast.ok{border-color:rgba(61,220,132,.42)}
.toast.bad{border-color:rgba(255,95,87,.45)}
.toast.weg{opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s}

/* =======================================================================
   Lichte modus
   -----------------------------------------------------------------------
   Alleen de tokens wisselen. Het merkblauw blijft exact hetzelfde als
   vlakkleur; alleen de tekstvariant wordt donkerder zodat hij op wit leest.
   ======================================================================= */
html[data-thema="licht"]{
  --ink:      #f7f8fb;
  --ink-1:    #ffffff;
  --ink-2:    #ffffff;
  --ink-3:    #f1f2f7;
  --ink-4:    #e7e9f1;
  --line:     #e3e5ee;
  --line-2:   #ccd0e0;

  --blauw-tx: #1a23c9;
  --blauw-zt: #3c45e6;
  --blauw-hel: #050ce8;
  --blauw-glans: rgba(5,12,232,.3);

  --fg:       #101322;
  --fg-2:     #414659;
  --muted:    #666c80;

  --ok:       #148f4e;
  --warn:     #9a6212;
  --bad:      #c62b22;
  --info:     #1d5fbf;
}
html[data-thema="licht"] .gaas{
  background-image:
    repeating-linear-gradient(0deg,rgba(16,19,34,.05) 0 1px,transparent 1px 6px),
    repeating-linear-gradient(90deg,rgba(16,19,34,.05) 0 1px,transparent 1px 6px);
}
html[data-thema="licht"] .mob{background:rgba(255,255,255,.98)}
html[data-thema="licht"] .toast{background:rgba(255,255,255,.97)}
html[data-thema="licht"] .btn-goud,html[data-thema="licht"] .btn-rand{background:rgba(16,19,34,.02)}

/* =======================================================================
   Hero
   ======================================================================= */
.hero{position:relative;min-height:min(94svh,860px);display:flex;align-items:center;overflow:hidden;padding:calc(var(--nav-h) + 54px) 0 60px}
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(70% 55% at 18% 12%,rgba(5,12,232,.28),transparent 62%),
    radial-gradient(55% 45% at 88% 78%,rgba(42,51,255,.16),transparent 65%);
}
.hero-gaas{
  position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.6;
  background-image:
    repeating-linear-gradient(0deg,rgba(255,255,255,.045) 0 1px,transparent 1px 7px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.045) 0 1px,transparent 1px 7px);
  mask-image:radial-gradient(85% 75% at 30% 40%,#000,transparent);
}
.hero-in{position:relative;z-index:2;width:100%}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(30px,4.5vw,64px);align-items:center}
.hero-pills{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:24px}
.hero h1{margin:0 0 22px}
.hero-sub{font-size:clamp(1.02rem,1.55vw,1.2rem);color:var(--fg-2);max-width:52ch;margin:0 0 30px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hero-usp{display:flex;flex-wrap:wrap;gap:20px;margin-top:32px;padding-top:26px;border-top:1px solid var(--line)}
.hero-usp div{display:flex;align-items:center;gap:9px;font-size:.87rem;color:var(--fg-2);font-weight:600}
.hero-usp svg{color:var(--blauw-tx);flex:none}
@media (max-width:940px){
  .hero-grid{grid-template-columns:1fr}
  .hero{min-height:auto;padding-top:calc(var(--nav-h) + 34px)}
}

/* =======================================================================
   Live configuratorvoorbeeld
   -----------------------------------------------------------------------
   Een echt raam dat meegroeit met de schuifbalken. Het gaas verandert van
   dichtheid en doorzicht per gaassoort, en het profiel neemt de RAL-kleur
   aan. Dit is geen plaatje: alles is CSS die op de waarden reageert.
   ======================================================================= */
.demo{
  position:relative;padding:clamp(20px,2.6vw,30px);border:1px solid var(--line);border-radius:26px;
  background:linear-gradient(165deg,var(--ink-2),var(--ink-1));
  box-shadow:0 40px 90px -50px #000;isolation:isolate;overflow:hidden;
}
.demo::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(70% 55% at 50% 0%,rgba(42,51,255,.14),transparent 68%);
}
.demo-kop{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px;flex-wrap:wrap}
.demo-kop b{font-family:var(--display);font-size:1.02rem;font-weight:800;letter-spacing:-.01em}
.demo-kop .pill{font-size:.66rem;padding:5px 12px}

/* Het raam zelf. */
.raam-vak{
  position:relative;display:grid;place-items:center;
  aspect-ratio:4/3;border-radius:16px;overflow:hidden;
  background:
    linear-gradient(180deg,#9fb6cf 0%,#c9d8e6 44%,#8aa47f 44%,#5e7d55 100%);
}
html[data-thema="licht"] .raam-vak{background:linear-gradient(180deg,#a9c0d8 0%,#d3e0ec 44%,#93ad88 44%,#67865e 100%)}
/* wat achtergrond zodat je ziet dat je door het gaas kijkt */
.raam-vak::before{
  content:"";position:absolute;left:8%;bottom:0;width:26%;height:38%;
  background:radial-gradient(60% 70% at 50% 100%,rgba(30,60,25,.7),transparent 70%);
}
.raam-vak::after{
  content:"";position:absolute;right:12%;top:12%;width:64px;height:64px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,244,214,.95),rgba(255,240,190,0) 70%);
}

.raam{
  position:relative;z-index:2;
  width:var(--raam-b,62%);height:var(--raam-h,72%);
  border:var(--profiel,10px) solid var(--ral,#f1f0ea);
  border-radius:3px;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.65), inset 0 0 0 1px rgba(0,0,0,.18);
  transition:width .45s var(--ease),height .45s var(--ease),border-color .45s var(--ease);
  overflow:hidden;
}
/* Het gaas: twee rasters die samen het doek vormen. De maaswijdte en de
   dekking komen als variabele binnen. */
.raam-gaas{
  position:absolute;inset:0;
  background-color:var(--gaas-kleur,rgba(60,60,60,.34));
  background-image:
    repeating-linear-gradient(0deg,rgba(0,0,0,.5) 0 1px,transparent 1px var(--maas,4px)),
    repeating-linear-gradient(90deg,rgba(0,0,0,.5) 0 1px,transparent 1px var(--maas,4px));
  opacity:var(--gaas-dek,.55);
  transition:opacity .45s var(--ease),background-color .45s var(--ease),background-image .3s;
}
/* Een dwarslat bij deuren, precies zoals op de foto's van de zaak. */
.raam.met-lat::after{
  content:"";position:absolute;left:0;right:0;top:58%;height:var(--profiel,10px);
  background:var(--ral,#f1f0ea);box-shadow:0 1px 3px rgba(0,0,0,.3);
}
.raam-maat{
  position:absolute;z-index:3;font-size:.7rem;font-weight:800;letter-spacing:.08em;
  color:#fff;background:rgba(7,7,12,.72);padding:3px 9px;border-radius:var(--r-pill);
  backdrop-filter:blur(6px);white-space:nowrap;
}
.raam-maat.b{bottom:9px;left:50%;transform:translateX(-50%)}
.raam-maat.h{top:50%;right:9px;transform:translateY(-50%)}

.demo-bedien{display:grid;gap:14px;margin-top:18px}
.schuif label{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:800;margin-bottom:8px}
.schuif label b{font-family:var(--display);font-size:.95rem;color:var(--blauw-tx);letter-spacing:0}
.schuif input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:99px;
  background:linear-gradient(90deg,var(--blauw) 0%,var(--blauw) var(--vul,50%),var(--line-2) var(--vul,50%),var(--line-2) 100%);
  outline:0;cursor:pointer;
}
.schuif input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:22px;height:22px;border-radius:50%;
  background:#fff;border:3px solid var(--blauw);cursor:grab;
  box-shadow:0 4px 12px -3px rgba(5,12,232,.7);transition:transform .2s var(--spring);
}
.schuif input[type=range]::-webkit-slider-thumb:active{transform:scale(1.15);cursor:grabbing}
.schuif input[type=range]::-moz-range-thumb{
  width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid var(--blauw);cursor:grab;
}

.keuzerij{display:flex;flex-wrap:wrap;gap:7px}
.keuze{
  padding:8px 14px;border:1px solid var(--line-2);border-radius:var(--r-pill);
  background:rgba(255,255,255,.02);cursor:pointer;font-size:.79rem;font-weight:600;color:var(--fg-2);
  transition:border-color .3s,background .3s,color .3s,transform .3s var(--spring);
}
.keuze:hover{transform:translateY(-2px);color:var(--fg)}
.keuze.aan{border-color:var(--blauw-hel);background:rgba(42,51,255,.16);color:#fff}
.keuze-kleur{display:inline-flex;align-items:center;gap:7px}
.keuze-kleur i{width:14px;height:14px;border-radius:4px;border:1px solid rgba(255,255,255,.25);flex:none}

.demo-info{
  display:flex;align-items:flex-start;gap:11px;margin-top:16px;padding:13px 15px;
  border-radius:var(--r-sm);border:1px solid var(--line);background:rgba(255,255,255,.02);
  font-size:.86rem;color:var(--fg-2);line-height:1.55;
}
.demo-info svg{color:var(--blauw-tx);flex:none;margin-top:2px}
.demo-balken{display:grid;gap:9px;margin-top:14px}
.balk{display:grid;grid-template-columns:88px 1fr 40px;align-items:center;gap:11px;font-size:.76rem;color:var(--muted);font-weight:700}
.balk-spoor{height:6px;border-radius:99px;background:var(--line-2);overflow:hidden}
.balk-vul{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--blauw),var(--blauw-hel));transition:width .5s var(--ease)}
.balk b{color:var(--blauw-tx);text-align:right;font-variant-numeric:tabular-nums}

/* =======================================================================
   Productkaarten
   ======================================================================= */
.producten{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,268px),1fr));gap:16px}
.prod{
  position:relative;display:flex;flex-direction:column;
  padding:26px 24px 22px;border:1px solid var(--line);border-radius:22px;overflow:hidden;isolation:isolate;
  background:linear-gradient(168deg,var(--ink-2),var(--ink-1));
  transition:transform .45s var(--ease),border-color .45s var(--ease),box-shadow .45s var(--ease);
}
.prod::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;
  background:radial-gradient(70% 55% at 50% 0%,rgba(42,51,255,.2),transparent 68%);
  transition:opacity .5s var(--ease);
}
.prod:hover{transform:translateY(-6px);border-color:rgba(42,51,255,.45);box-shadow:0 28px 58px -34px #000}
.prod:hover::before{opacity:1}
.prod-ico{
  width:52px;height:52px;border-radius:15px;display:grid;place-items:center;margin-bottom:18px;
  border:1px solid rgba(42,51,255,.32);color:var(--blauw-tx);
  background:linear-gradient(150deg,rgba(42,51,255,.2),rgba(42,51,255,.04));
  transition:transform .55s var(--spring);
}
.prod:hover .prod-ico{transform:translateY(-4px) rotate(-7deg)}
.prod h3{font-size:1.1rem;margin-bottom:5px}
.prod .onder{font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--blauw-tx);font-weight:800;margin-bottom:12px}
.prod p{margin:0 0 14px;color:var(--muted);font-size:.89rem;line-height:1.6}
.prod ul{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:7px}
.prod li{display:flex;gap:9px;font-size:.85rem;color:var(--fg-2);line-height:1.45}
.prod li svg{color:var(--ok);flex:none;margin-top:3px}
.prod .btn{margin-top:auto}

/* =======================================================================
   Gaasvergelijker
   ======================================================================= */
.gaaslijst{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,238px),1fr));gap:14px}
.gaaskaart{
  position:relative;border:1px solid var(--line);border-radius:20px;overflow:hidden;
  background:var(--ink-2);cursor:pointer;text-align:left;
  transition:transform .4s var(--ease),border-color .4s var(--ease);
}
.gaaskaart:hover,.gaaskaart.aan{transform:translateY(-4px);border-color:rgba(42,51,255,.5)}
.gaaskaart-beeld{position:relative;aspect-ratio:16/10;overflow:hidden;
  background:linear-gradient(180deg,#9fb6cf 0%,#c9d8e6 46%,#8aa47f 46%,#5e7d55 100%)}
.gaaskaart-doek{position:absolute;inset:0}
.gaaskaart-tx{padding:15px 17px 17px}
.gaaskaart-tx b{display:block;font-family:var(--display);font-size:1rem;font-weight:800;margin-bottom:5px}
.gaaskaart-tx p{margin:0;font-size:.84rem;color:var(--muted);line-height:1.55}

/* Twee staafjes per kaart: hoeveel zie je erdoor, en hoe stevig is het.
   De vulling groeit pas wanneer de kaart in beeld komt. */
.gaasmeter{margin-top:14px;display:grid;gap:8px}
.meter{display:grid;grid-template-columns:78px 1fr 28px;align-items:center;gap:14px;
  font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:800}
.meter-spoor{height:5px;border-radius:99px;background:var(--ink-4);overflow:hidden}
.meter-spoor i{display:block;height:100%;border-radius:99px;width:0;
  background:linear-gradient(90deg,var(--blauw),var(--blauw-hel));
  transition:width 1s var(--ease) .15s}
.gaaskaart.in .meter-spoor i,.rv-s.in .meter-spoor i{width:var(--w,0)}
.meter b{color:var(--fg-2);text-align:right;font-size:.78rem}
.gaaskaart-link{margin-top:14px;display:inline-flex;align-items:center;gap:7px;font-size:.84rem}

/* =======================================================================
   Realisaties
   ======================================================================= */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.filter{
  padding:9px 17px;border:1px solid var(--line-2);border-radius:var(--r-pill);
  background:rgba(255,255,255,.02);cursor:pointer;font-size:.8rem;font-weight:700;color:var(--fg-2);
  transition:border-color .3s,background .3s,color .3s,transform .3s var(--spring);
}
.filter:hover{transform:translateY(-2px);color:var(--fg)}
.filter.aan{border-color:transparent;background:linear-gradient(135deg,var(--blauw-hel),var(--blauw));color:#fff;box-shadow:0 10px 26px -12px var(--blauw-glans)}

.galerij{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr));gap:14px}
.werk{
  position:relative;display:block;border-radius:20px;overflow:hidden;isolation:isolate;
  border:1px solid var(--line);background:var(--ink-2);cursor:zoom-in;
  transition:transform .45s var(--ease),border-color .45s var(--ease),box-shadow .45s var(--ease);
}
.werk img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .7s var(--ease),filter .5s}
.werk:hover{transform:translateY(-5px);border-color:rgba(42,51,255,.45);box-shadow:0 26px 54px -32px #000}
.werk:hover img{transform:scale(1.06)}
.werk-tx{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:34px 16px 15px;
  background:linear-gradient(180deg,transparent,rgba(7,7,12,.9));
  transform:translateY(12px);opacity:0;transition:transform .45s var(--ease),opacity .45s var(--ease);
}
.werk:hover .werk-tx{transform:none;opacity:1}
.werk-tx b{display:block;font-family:var(--display);font-size:.98rem;font-weight:800;color:#fff}
.werk-tx span{font-size:.78rem;color:#bcc0d6}
.werk-vlag{
  position:absolute;top:12px;left:12px;z-index:2;padding:5px 11px;border-radius:var(--r-pill);
  background:rgba(7,7,12,.7);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.16);
  font-size:.64rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#fff;
}

/* Lightbox */
.lb{
  position:fixed;inset:0;z-index:400;display:grid;place-items:center;padding:22px;
  background:rgba(4,4,8,.94);backdrop-filter:blur(8px);
  opacity:0;pointer-events:none;transition:opacity .35s var(--ease);
}
.lb.open{opacity:1;pointer-events:auto}
.lb img{max-width:min(1200px,94vw);max-height:86svh;border-radius:14px;box-shadow:0 40px 100px -30px #000;animation:popIn .4s var(--spring) both}
.lb-tx{position:absolute;left:0;right:0;bottom:26px;text-align:center;color:#e7e9f5;font-size:.9rem}
.lb-sluit,.lb-vorige,.lb-volgende{
  position:absolute;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:#fff;cursor:pointer;
  transition:background .3s,transform .3s var(--spring);
}
.lb-sluit:hover,.lb-vorige:hover,.lb-volgende:hover{background:rgba(255,255,255,.18);transform:scale(1.08)}
.lb-sluit{top:20px;right:20px}
.lb-vorige{left:18px;top:50%;transform:translateY(-50%)}
.lb-volgende{right:18px;top:50%;transform:translateY(-50%)}
.lb-vorige:hover,.lb-volgende:hover{transform:translateY(-50%) scale(1.08)}
@media (max-width:640px){.lb-vorige,.lb-volgende{display:none}}

/* =======================================================================
   Werkwijze
   ======================================================================= */
.stappen-rij{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,224px),1fr));gap:16px;counter-reset:stap}
.stap{
  position:relative;padding:26px 22px;border:1px solid var(--line);border-radius:20px;
  background:linear-gradient(165deg,var(--ink-2),var(--ink-1));overflow:hidden;
  transition:transform .45s var(--ease),border-color .45s var(--ease);
}
.stap:hover{transform:translateY(-5px);border-color:rgba(42,51,255,.4)}
.stap-nr{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;margin-bottom:16px;
  font-family:var(--display);font-weight:800;font-size:.95rem;color:#fff;
  background:linear-gradient(135deg,var(--blauw-hel),var(--blauw));
  box-shadow:0 10px 24px -10px var(--blauw-glans);
}
.stap h3{font-size:1.02rem;margin-bottom:8px}
.stap p{margin:0;color:var(--muted);font-size:.88rem;line-height:1.6}
.stap::after{
  content:"";position:absolute;right:-30px;top:-30px;width:110px;height:110px;border-radius:50%;
  background:radial-gradient(circle,rgba(42,51,255,.14),transparent 70%);
}

/* =======================================================================
   Reviews
   ======================================================================= */
.score-blok{
  display:flex;align-items:center;gap:clamp(18px,3vw,38px);flex-wrap:wrap;
  padding:clamp(20px,3vw,32px);border:1px solid var(--line);border-radius:24px;
  background:linear-gradient(150deg,var(--ink-2),var(--ink-1));margin-bottom:26px;
}
.score-cijfer{font-family:var(--display);font-size:clamp(2.6rem,5vw,3.8rem);font-weight:800;color:var(--blauw-tx);line-height:1;letter-spacing:-.04em}
.score-tx b{display:block;font-size:1rem;font-weight:800;margin-bottom:3px}
.score-tx span{font-size:.88rem;color:var(--muted)}
.score-logo{margin-left:auto;display:flex;align-items:center;gap:9px;font-size:.85rem;color:var(--fg-2);font-weight:700}

.reviews{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,276px),1fr));gap:14px}
.review{
  padding:22px 22px 20px;border:1px solid var(--line);border-radius:20px;background:var(--ink-2);
  transition:transform .4s var(--ease),border-color .4s var(--ease);
}
.review:hover{transform:translateY(-4px);border-color:var(--line-2)}
.review .sterren{margin-bottom:12px}
.review p{margin:0 0 14px;font-size:.92rem;line-height:1.65;color:var(--fg-2)}
.review footer{display:flex;align-items:center;gap:10px;font-size:.84rem}
.review footer b{font-weight:700}
.review footer span{color:var(--muted)}
.review-av{
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:linear-gradient(135deg,var(--blauw-hel),var(--blauw-dp));color:#fff;
  font-family:var(--display);font-weight:800;font-size:.9rem;
}

/* =======================================================================
   Contactblok
   ======================================================================= */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(18px,3vw,32px)}
.paneel{padding:clamp(22px,3vw,32px);border:1px solid var(--line);border-radius:22px;background:linear-gradient(165deg,var(--ink-2),var(--ink-1))}
.info-lijst{list-style:none;margin:0;padding:0}
.info-lijst li{display:flex;gap:14px;padding:15px 0;border-bottom:1px solid var(--line)}
.info-lijst li:last-child{border-bottom:0}
.info-lijst .ico{width:36px;height:36px;flex:none;border-radius:11px;display:grid;place-items:center;background:rgba(42,51,255,.14);border:1px solid rgba(42,51,255,.3);color:var(--blauw-tx)}
.info-lijst b{display:block;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:800;margin-bottom:2px}
.info-lijst a:hover{color:var(--blauw-tx)}
.uren-lijst{width:100%;font-size:.94rem}
.uren-lijst tr{border-bottom:1px solid var(--line)}
.uren-lijst tr:last-child{border-bottom:0}
.uren-lijst tr.vandaag th{color:var(--blauw-tx)}
.uren-lijst tr.vandaag{background:rgba(42,51,255,.07)}
.uren-lijst th{text-align:left;font-weight:600;padding:12px 0;color:var(--fg-2)}
.uren-lijst td{text-align:right;padding:12px 0;font-variant-numeric:tabular-nums;color:var(--fg)}
.uren-lijst td.dicht{color:var(--muted)}

/* =======================================================================
   Oproepbalk
   ======================================================================= */
.oproep{
  position:relative;overflow:hidden;isolation:isolate;
  padding:clamp(30px,4.5vw,54px) clamp(22px,4vw,52px);border-radius:26px;
  background:linear-gradient(135deg,var(--blauw-dp),var(--blauw) 58%,var(--blauw-hel));
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.oproep::after{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.34;
  background-image:
    repeating-linear-gradient(0deg,rgba(255,255,255,.16) 0 1px,transparent 1px 7px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.16) 0 1px,transparent 1px 7px);
  mask-image:radial-gradient(70% 80% at 80% 30%,#000,transparent);
}
.oproep h2{font-family:var(--display);font-size:clamp(1.5rem,3vw,2.2rem);font-weight:800;color:#fff;letter-spacing:-.03em;margin-bottom:8px}
.oproep p{margin:0;color:rgba(255,255,255,.86);font-size:1rem;max-width:52ch}
.oproep .btn{background:#fff;color:var(--blauw-dp);border-color:transparent}
.oproep .btn:hover{background:#fff;transform:translateY(-3px);box-shadow:0 18px 40px -16px rgba(0,0,0,.6)}

/* =======================================================================
   Configurator
   ======================================================================= */
.cfg{padding:calc(var(--nav-h) + 34px) 0 120px}
.cfg-kop{margin-bottom:26px}
.cfg-kop h1{font-family:var(--display);font-size:clamp(1.9rem,4.2vw,2.9rem);font-weight:800;letter-spacing:-.03em}

/* De voortgangsbalk met vier stappen. */
.trap{display:flex;align-items:center;gap:0;margin:0 0 32px;list-style:none;padding:0;flex-wrap:wrap}
.trap li{display:flex;align-items:center;gap:10px;flex:1;min-width:130px}
.trap li + li::before{content:"";height:2px;flex:1;background:var(--line-2);margin:0 10px;border-radius:2px;transition:background .5s var(--ease)}
.trap li.klaar + li::before,.trap li.nu::before{background:linear-gradient(90deg,var(--blauw),var(--blauw-hel))}
.trap-bol{
  width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;
  border:2px solid var(--line-2);background:var(--ink-1);color:var(--muted);
  font-size:.84rem;font-weight:800;transition:all .45s var(--spring);
}
.trap li.nu .trap-bol{border-color:var(--blauw-hel);background:rgba(42,51,255,.16);color:#fff;animation:klop 2.4s infinite}
.trap li.klaar .trap-bol{border-color:var(--ok);background:rgba(61,220,132,.16);color:var(--ok)}
.trap-tx{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.trap-tx b{font-size:.86rem;font-weight:700;color:var(--fg-2)}
.trap li.nu .trap-tx b,.trap li.klaar .trap-tx b{color:var(--fg)}
.trap-tx span{font-size:.7rem;color:var(--muted)}
@media (max-width:720px){
  .trap li .trap-tx{display:none}
  .trap li.nu .trap-tx{display:flex}
  .trap li{min-width:0;flex:0 0 auto}
  .trap li + li::before{min-width:16px;margin:0 6px}
}

.cfg-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,352px);gap:clamp(20px,3vw,36px);align-items:start}
@media (max-width:1000px){.cfg-grid{grid-template-columns:1fr}}

.stapvak{display:none}
.stapvak.aan{display:block;animation:stijg .45s var(--ease) both}

/* Productkeuze */
.typen{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,232px),1fr));gap:13px}
.type{
  position:relative;text-align:left;padding:22px 20px;border:1px solid var(--line);border-radius:20px;
  background:linear-gradient(168deg,var(--ink-2),var(--ink-1));cursor:pointer;
  transition:transform .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease);
}
.type:hover{transform:translateY(-4px);border-color:var(--line-2)}
.type.aan{border-color:var(--blauw-hel);box-shadow:0 0 0 1px var(--blauw-hel),0 22px 46px -30px #000}
.type.aan::after{
  content:"";position:absolute;top:14px;right:14px;width:22px;height:22px;border-radius:50%;
  background:var(--blauw) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4 10-10'/%3E%3C/svg%3E") center/13px no-repeat;
}
.type-ico{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;margin-bottom:14px;
  border:1px solid rgba(42,51,255,.3);color:var(--blauw-tx);background:linear-gradient(150deg,rgba(42,51,255,.18),rgba(42,51,255,.03))}
.type b{display:block;font-family:var(--display);font-size:1rem;font-weight:800;margin-bottom:4px}
.type span{font-size:.84rem;color:var(--muted);line-height:1.5;display:block}

/* Maatvelden */
.maten{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.maten{grid-template-columns:1fr}}
.maat-veld{position:relative}
.maat-veld input{padding-right:52px;font-family:var(--display);font-size:1.15rem;font-weight:700}
.maat-veld .eenheid{position:absolute;right:15px;bottom:14px;font-size:.82rem;color:var(--muted);font-weight:700;pointer-events:none}

/* Toegevoegde ramen */
.mand{display:grid;gap:10px;margin-top:8px}
.mand-regel{
  display:flex;align-items:flex-start;gap:13px;padding:14px 15px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--ink-2);animation:stijg .35s var(--ease) both;
}
.mand-nr{width:26px;height:26px;flex:none;border-radius:8px;display:grid;place-items:center;
  background:rgba(42,51,255,.16);border:1px solid rgba(42,51,255,.3);color:var(--blauw-tx);font-size:.78rem;font-weight:800}
.mand-body{flex:1;min-width:0}
.mand-body b{display:block;font-size:.94rem;font-weight:700}
.mand-body small{display:block;color:var(--muted);font-size:.8rem;line-height:1.5}
.mand-weg{border:0;background:none;color:var(--muted);cursor:pointer;font-size:.78rem;text-decoration:underline;padding:2px 0}
.mand-weg:hover{color:var(--bad)}
.mand-leeg{padding:26px 18px;text-align:center;color:var(--muted);border:1px dashed var(--line-2);border-radius:var(--r-sm);font-size:.9rem}

/* Zijpaneel met de samenvatting */
.zij{position:sticky;top:calc(var(--nav-h) + 16px);padding:22px;border:1px solid var(--line);border-radius:22px;
  background:linear-gradient(168deg,var(--ink-2),var(--ink-1))}
.zij h3{font-family:var(--display);font-size:1.02rem;font-weight:800;margin-bottom:4px}
.zij .zij-sub{font-size:.83rem;color:var(--muted);margin-bottom:16px}
.zij-prijsloos{
  display:flex;gap:11px;align-items:flex-start;padding:13px 14px;border-radius:var(--r-sm);
  border:1px solid rgba(42,51,255,.28);background:rgba(42,51,255,.08);
  font-size:.85rem;color:var(--fg-2);line-height:1.55;margin-top:16px;
}
.zij-prijsloos svg{color:var(--blauw-tx);flex:none;margin-top:2px}

/* Plaatsingskeuze */
.plaats-keuze{display:grid;grid-template-columns:1fr 1fr;gap:13px}
@media (max-width:640px){.plaats-keuze{grid-template-columns:1fr}}
.plaats{
  position:relative;text-align:left;padding:20px;border:1px solid var(--line);border-radius:18px;
  background:var(--ink-2);cursor:pointer;transition:border-color .35s,transform .35s var(--ease);
}
.plaats:hover{transform:translateY(-3px)}
.plaats.aan{border-color:var(--blauw-hel);box-shadow:0 0 0 1px var(--blauw-hel)}
.plaats b{display:block;font-size:.98rem;font-weight:800;margin-bottom:5px}
.plaats span{font-size:.84rem;color:var(--muted);line-height:1.55;display:block}

/* Fotoupload */
.drop{
  border:2px dashed var(--line-2);border-radius:18px;padding:28px 20px;text-align:center;
  cursor:pointer;transition:border-color .3s,background .3s;
}
.drop:hover,.drop.sleep{border-color:var(--blauw-hel);background:rgba(42,51,255,.06)}
.drop svg{color:var(--blauw-tx);margin:0 auto 12px}
.drop b{display:block;font-size:.95rem;font-weight:700;margin-bottom:4px}
.drop span{font-size:.83rem;color:var(--muted)}
.fotos{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:9px;margin-top:14px}
.foto{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;border:1px solid var(--line-2)}
.foto img{width:100%;height:100%;object-fit:cover}
.foto button{
  position:absolute;top:5px;right:5px;width:22px;height:22px;border-radius:50%;border:0;
  background:rgba(7,7,12,.8);color:#fff;cursor:pointer;display:grid;place-items:center;font-size:.8rem;
}

.cfg-voet{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-top:26px;flex-wrap:wrap}

/* =======================================================================
   Offertepagina voor de klant
   ======================================================================= */
.off{padding:calc(var(--nav-h) + 30px) 0 110px}
.off-blad{
  position:relative;max-width:880px;margin-inline:auto;overflow:hidden;
  border:1px solid var(--line);border-radius:26px;
  background:linear-gradient(170deg,var(--ink-2),var(--ink-1));
  box-shadow:0 40px 100px -56px #000;
}
.off-kop{position:relative;padding:clamp(24px,4vw,38px);border-bottom:1px solid var(--line);overflow:hidden}
.off-kop::after{
  content:"";position:absolute;inset:0;z-index:0;opacity:.5;pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 7px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 7px);
  mask-image:radial-gradient(70% 90% at 85% 20%,#000,transparent);
}
.off-kop > *{position:relative;z-index:1}
.off-ref{font-family:var(--display);font-size:clamp(1.9rem,4.4vw,2.7rem);font-weight:800;letter-spacing:-.035em;color:var(--blauw-tx);margin:8px 0 4px}
.off-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.off-body{padding:clamp(22px,4vw,36px)}

.off-partijen{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:28px}
@media (max-width:640px){.off-partijen{grid-template-columns:1fr}}
.off-partij b{display:block;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:800;margin-bottom:9px}
.off-partij p{margin:0;font-size:.94rem;line-height:1.7;color:var(--fg-2)}
.off-partij p strong{color:var(--fg);font-weight:700}

.off-regels{width:100%;font-size:.94rem}
.off-regels thead th{
  text-align:left;padding:10px 0;border-bottom:1px solid var(--line-2);
  font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:800;
}
.off-regels tbody td{padding:15px 0;border-bottom:1px solid var(--line);vertical-align:top}
.off-regels .num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.off-regels b{font-weight:700}
.off-regels small{display:block;color:var(--muted);font-size:.83rem;line-height:1.5;margin-top:3px}

.off-totalen{margin-left:auto;max-width:340px;margin-top:20px}
.off-tot-rij{display:flex;justify-content:space-between;gap:16px;padding:7px 0;font-size:.94rem;color:var(--fg-2)}
.off-tot-rij.groot{
  margin-top:10px;padding-top:14px;border-top:1px solid var(--line-2);
  font-size:1.02rem;color:var(--fg);font-weight:700;align-items:baseline;
}
.off-tot-rij.groot b{font-family:var(--display);font-size:1.55rem;font-weight:800;color:var(--blauw-tx);letter-spacing:-.02em}
.off-voorschot{
  margin-top:14px;padding:14px 16px;border-radius:var(--r-sm);
  border:1px solid rgba(42,51,255,.3);background:rgba(42,51,255,.09);
  display:flex;justify-content:space-between;gap:14px;align-items:baseline;font-size:.92rem;
}
.off-voorschot b{color:var(--blauw-tx);font-family:var(--display);font-size:1.1rem;font-weight:800;white-space:nowrap}

/* Handtekening */
.tekenvak{
  position:relative;border:2px dashed var(--line-2);border-radius:16px;overflow:hidden;
  background:var(--ink-1);touch-action:none;cursor:crosshair;
}
.tekenvak canvas{display:block;width:100%;height:170px}
.tekenvak.geraakt{border-style:solid;border-color:var(--blauw-hel)}
.tekenvak-hint{
  position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;
  color:var(--muted);font-size:.88rem;transition:opacity .3s;
}
.tekenvak.geraakt .tekenvak-hint{opacity:0}
.teken-wis{position:absolute;top:8px;right:8px;z-index:2;padding:5px 12px;border-radius:var(--r-pill);
  border:1px solid var(--line-2);background:var(--ink-2);color:var(--muted);font-size:.74rem;font-weight:700;cursor:pointer}
.teken-wis:hover{color:var(--fg);border-color:var(--line-2)}

.off-akkoord{margin-top:26px;padding-top:26px;border-top:1px solid var(--line)}
.off-getekend{
  padding:20px 22px;border-radius:18px;border:1px solid rgba(61,220,132,.35);
  background:rgba(61,220,132,.07);display:flex;gap:15px;align-items:flex-start;
}
.off-getekend svg{color:var(--ok);flex:none;margin-top:2px}
.off-getekend b{display:block;font-size:1rem;font-weight:800;margin-bottom:3px}
.off-getekend span{font-size:.88rem;color:var(--fg-2)}
.off-hand{margin-top:14px;padding:12px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid var(--line)}
.off-hand svg{width:100%;height:88px;color:var(--fg)}

.betaalvakken{display:grid;grid-template-columns:repeat(auto-fill,minmax(122px,1fr));gap:9px;margin-top:8px}
.betaalvak{
  display:flex;align-items:center;gap:9px;padding:12px 14px;position:relative;
  border:1px solid var(--line-2);border-radius:var(--r-sm);background:rgba(255,255,255,.02);
  cursor:pointer;font-size:.85rem;transition:border-color .3s,background .3s,transform .3s var(--spring);
}
.betaalvak input{position:absolute;opacity:0;pointer-events:none}
.betaalvak img{width:26px;height:auto;flex:none}
.betaalvak:hover{transform:translateY(-2px)}
.betaalvak.aan{border-color:var(--blauw-hel);background:rgba(42,51,255,.12)}

.off-vw{margin-top:28px;padding-top:22px;border-top:1px solid var(--line)}
.off-vw h4{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:800;margin-bottom:10px}
.off-vw p{margin:0;font-size:.86rem;color:var(--muted);line-height:1.7;white-space:pre-line}

/* =======================================================================
   Hero met echte foto
   -----------------------------------------------------------------------
   De foto van een geplaatste schuifdeur, zwaar verduisterd zodat de tekst
   wint, met het gaasmotief eroverheen. Rechts zweeft de configurator op
   glas.
   ======================================================================= */
.hero-foto{position:absolute;inset:-4% 0 -8%;z-index:0;overflow:hidden}
.hero-foto img{
  width:100%;height:100%;object-fit:cover;object-position:center 42%;
  filter:saturate(.78) contrast(1.06) brightness(.42);
  transform:scale(1.06);animation:heroIn 2.2s var(--ease) both;
}
@keyframes heroIn{
  from{transform:scale(1.16);opacity:0;filter:saturate(.3) brightness(.15)}
  to  {transform:scale(1.06);opacity:1;filter:saturate(.78) contrast(1.06) brightness(.42)}
}
.hero.met-foto::before{
  background:
    /* het donkerst precies achter de tekst, zodat elk woord leesbaar blijft
       zonder dat de foto verdwijnt */
    radial-gradient(72% 58% at 50% 46%,rgba(4,4,9,.9) 0%,rgba(4,4,9,.72) 42%,rgba(4,4,9,.3) 72%,transparent 100%),
    linear-gradient(180deg,rgba(7,7,12,.8) 0%,rgba(7,7,12,.44) 24%,rgba(7,7,12,.62) 66%,var(--ink) 100%),
    radial-gradient(60% 50% at 14% 16%,rgba(5,12,232,.28),transparent 68%);
}
html[data-thema="licht"] .hero-foto img{filter:saturate(.9) contrast(1.02) brightness(.62)}
html[data-thema="licht"] .hero.met-foto::before{
  background:
    radial-gradient(72% 58% at 50% 44%,rgba(8,10,22,.82) 0%,rgba(8,10,22,.6) 44%,rgba(8,10,22,.24) 74%,transparent 100%),
    linear-gradient(180deg,rgba(8,10,22,.62) 0%,rgba(8,10,22,.3) 26%,rgba(247,248,251,.9) 84%,var(--ink) 100%);
}
html[data-thema="licht"] .hero h1,html[data-thema="licht"] .hero-sub{color:#fff}
html[data-thema="licht"] .hero-usp div{color:#e6e8f5}
html[data-thema="licht"] .hero-usp{border-top-color:rgba(255,255,255,.22)}

/* De configurator zweeft op glas boven de foto. */
.demo.glas{
  background:linear-gradient(160deg,rgba(16,16,25,.86),rgba(11,11,18,.92));
  backdrop-filter:blur(18px) saturate(1.2);
  border-color:rgba(255,255,255,.12);
  box-shadow:0 50px 110px -50px #000, inset 0 1px 0 rgba(255,255,255,.08);
}
html[data-thema="licht"] .demo.glas{
  background:linear-gradient(160deg,rgba(255,255,255,.95),rgba(255,255,255,.99));
  border-color:rgba(16,19,34,.1);
}

/* =======================================================================
   Lopende band met kaartjes
   ======================================================================= */
.band{
  position:relative;z-index:3;overflow:hidden;padding:16px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--ink-1);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.band-rij{display:flex;width:max-content;gap:12px;padding-inline:6px;animation:drift 78s linear infinite;
  will-change:transform;transform:translate3d(0,0,0);backface-visibility:hidden}
.band:hover .band-rij{animation-play-state:paused}
.band-kaart{
  display:flex;align-items:center;gap:12px;flex:none;
  padding:13px 20px 13px 15px;border:1px solid var(--line);border-radius:var(--r-pill);
  background:linear-gradient(140deg,var(--ink-2),var(--ink-1));
  transition:border-color .4s var(--ease),transform .4s var(--spring);
}
.band-kaart:hover{border-color:rgba(42,51,255,.45);transform:translateY(-3px)}
.band-ico{
  width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(42,51,255,.3);color:var(--blauw-tx);
  background:radial-gradient(circle at 34% 28%,rgba(42,51,255,.3),rgba(42,51,255,.05));
}
.band-tx{display:flex;flex-direction:column;line-height:1.3;white-space:nowrap}
.band-tx b{font-family:var(--display);font-size:.93rem;font-weight:800;letter-spacing:-.01em}
.band-tx i{font-style:normal;font-size:.77rem;color:var(--muted)}

/* =======================================================================
   Productkaarten met foto
   ======================================================================= */
.prod{padding:0}
.prod-beeld{position:relative;aspect-ratio:4/3;overflow:hidden}
.prod-beeld img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease);filter:brightness(.86)}
.prod:hover .prod-beeld img{transform:scale(1.07)}
.prod-beeld::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(7,7,12,.1) 0%,rgba(7,7,12,.35) 55%,rgba(16,16,25,.98) 100%);
}
.prod-beeld .gaas{opacity:.75;mask-image:linear-gradient(180deg,#000,transparent 70%)}
.prod-ico{
  position:absolute;left:18px;bottom:16px;z-index:2;margin:0;
  background:linear-gradient(150deg,rgba(42,51,255,.9),rgba(3,8,111,.9));
  border-color:rgba(255,255,255,.24);color:#fff;backdrop-filter:blur(6px);
}
.prod-tx{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.prod-tx h3{margin-bottom:4px}
html[data-thema="licht"] .prod-beeld::after{
  background:linear-gradient(180deg,rgba(7,7,12,.06) 0%,rgba(7,7,12,.24) 55%,rgba(255,255,255,.98) 100%);
}

/* =======================================================================
   Cijferband
   ======================================================================= */
.cijfers{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,168px),1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:22px;overflow:hidden}
.cijfer{padding:26px 22px;background:var(--ink-1);text-align:center;transition:background .4s}
.cijfer:hover{background:var(--ink-2)}
.cijfer b{display:block;font-family:var(--display);font-size:clamp(1.9rem,3.6vw,2.7rem);font-weight:800;
  color:var(--blauw-tx);letter-spacing:-.04em;line-height:1}
.cijfer span{display:block;margin-top:7px;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700}

/* =======================================================================
   Hero gecentreerd
   ======================================================================= */
.hero.met-foto .hero-in{display:flex;justify-content:center}
.hero-midden{
  max-width:920px;margin-inline:auto;text-align:center;
  display:flex;flex-direction:column;align-items:center;width:100%;
}
.hero-midden > *{margin-left:auto;margin-right:auto}
.hero-midden .hero-pills{justify-content:center}
.hero-midden .hero-sub{margin-inline:auto;max-width:56ch}
.hero-midden .hero-cta{justify-content:center}
.hero-midden .hero-usp{justify-content:center;gap:14px 26px;border-top-color:rgba(255,255,255,.18)}
.hero.met-foto{min-height:min(96svh,880px);text-align:center}
.hero.met-foto .display{font-size:clamp(2.5rem,6.6vw,5.2rem)}
@media (max-width:520px){
  .hero-midden .hero-cta{flex-direction:column;align-items:stretch;width:min(100%,340px)}
  .hero-midden .hero-cta .btn{width:100%}
  .hero-midden .hero-usp{gap:10px 18px;font-size:.82rem}
}
.hero-pijl{
  position:absolute;left:50%;bottom:26px;z-index:3;transform:translateX(-50%);
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.08);color:#fff;
  backdrop-filter:blur(8px);animation:zweef 2.6s ease-in-out infinite;
  transition:background .3s,border-color .3s;
}
.hero-pijl:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.4)}
@media (max-width:640px){.hero-pijl{display:none}}

/* =======================================================================
   Configurator als eigen sectie
   ======================================================================= */
.demo-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(18px,3vw,32px);align-items:start}
@media (max-width:900px){.demo-grid{grid-template-columns:1fr}}
.demo-zij{
  padding:clamp(20px,2.6vw,28px);border:1px solid var(--line);border-radius:26px;
  background:linear-gradient(168deg,var(--ink-2),var(--ink-1));
}
.demo-label{
  display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);font-weight:800;margin-bottom:9px;
}

/* =======================================================================
   "Was dit het?" na het toevoegen
   ======================================================================= */
.nogiets{
  margin-top:22px;padding:22px;border-radius:20px;
  border:1px solid rgba(61,220,132,.32);background:rgba(61,220,132,.06);
  animation:stijg .4s var(--ease) both;
}
.nogiets-kop{display:flex;align-items:center;gap:11px;margin-bottom:6px}
.nogiets-kop svg{color:var(--ok);flex:none}
.nogiets-kop b{font-family:var(--display);font-size:1.02rem;font-weight:800}
.nogiets p{margin:0 0 16px;font-size:.89rem;color:var(--fg-2)}
.nogiets-typen{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr));gap:9px;margin-bottom:14px}
.mini-type{
  display:flex;align-items:center;gap:10px;padding:11px 13px;text-align:left;
  border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--ink-2);
  cursor:pointer;transition:border-color .3s,transform .3s var(--spring),background .3s;
}
.mini-type:hover{transform:translateY(-2px);border-color:var(--blauw-hel);background:rgba(42,51,255,.1)}
.mini-type svg{color:var(--blauw-tx);flex:none}
.mini-type b{font-size:.85rem;font-weight:700;line-height:1.25}
.nogiets-klaar{display:flex;gap:10px;flex-wrap:wrap}

/* =======================================================================
   Het voorbeeldvak compact houden
   -----------------------------------------------------------------------
   Met alleen een beeldverhouding groeide het vak mee met de kolombreedte
   en vulde het op een breed scherm het hele venster. Een harde hoogte-
   grens houdt het altijd binnen beeld; de verhouding blijft kloppen omdat
   het raam zelf in procenten van het vak wordt getekend.
   ======================================================================= */
.demo-grid .demo{max-width:560px;margin-inline:auto;width:100%}
.demo-grid .raam-vak{aspect-ratio:auto;height:clamp(240px,34vh,380px)}
.zij .raam-vak{aspect-ratio:auto;height:clamp(170px,22vh,230px)}
@media (max-width:900px){
  .demo-grid .demo{max-width:none}
  .demo-grid .raam-vak{height:clamp(220px,42vw,320px)}
}

/* =======================================================================
   De adviseur
   -----------------------------------------------------------------------
   Drie vragen op een kaart, elk antwoord schuift de volgende vraag in
   beeld. Het is geen formulier: er wordt niets verstuurd, alles gebeurt
   in de browser. Het resultaat linkt door naar de configurator met het
   juiste producttype al gekozen.
   ======================================================================= */
.advies-vak{
  position:relative;max-width:820px;margin-inline:auto;overflow:hidden;
  padding:clamp(24px,3.4vw,40px);border:1px solid var(--line);border-radius:28px;
  background:linear-gradient(168deg,var(--ink-2),var(--ink-1));
  box-shadow:0 48px 100px -58px #000;isolation:isolate;
}
.advies-vak::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(80% 60% at 50% 0%,rgba(42,51,255,.16),transparent 70%);
}
.advies-balk{height:4px;border-radius:99px;background:var(--ink-4);overflow:hidden;margin-bottom:24px}
.advies-balk i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--blauw),var(--blauw-hel));
  transition:width .5s var(--ease)}

.advies-stap{display:none;animation:stijg .45s var(--ease) both}
.advies-stap.aan{display:block}
.advies-tel{display:block;font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--blauw-tx);font-weight:800;margin-bottom:10px}
.advies-stap .h3{margin:0 0 6px}
.advies-stap > p{margin:0 0 22px;font-size:.9rem}

.advies-opties{display:grid;gap:10px}
.advies-optie{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;cursor:pointer;
  padding:14px 16px;border:1px solid var(--line-2);border-radius:16px;
  background:var(--ink-2);color:var(--fg);font-family:inherit;
  animation:stijg .5s var(--ease) both;animation-delay:calc(var(--i,0)*60ms);
  transition:transform .3s var(--spring),border-color .3s,background .3s;
}
.advies-optie:hover{transform:translateY(-2px);border-color:var(--blauw-hel);background:rgba(42,51,255,.1)}
.advies-optie b{font-size:.95rem;font-weight:700;line-height:1.3;flex:1}
.advies-ico{width:40px;height:40px;flex:none;border-radius:12px;display:grid;place-items:center;
  background:rgba(42,51,255,.14);color:var(--blauw-tx);border:1px solid rgba(111,120,255,.28)}
.advies-pijl{color:var(--muted);flex:none;transition:transform .32s var(--spring),color .3s}
.advies-optie:hover .advies-pijl{transform:translateX(4px);color:var(--blauw-tx)}
.advies-terug{margin-top:18px;background:none;border:0;padding:0;cursor:pointer;
  color:var(--muted);font-family:inherit;font-size:.84rem;font-weight:700;transition:color .3s}
.advies-terug:hover{color:var(--fg)}

.advies-kaarten{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:22px 0}
@media (max-width:560px){.advies-kaarten{grid-template-columns:1fr}}
.advies-kaart{padding:18px;border:1px solid var(--line-2);border-radius:18px;
  background:var(--ink-2);display:flex;flex-direction:column;gap:4px}
.advies-label{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:800}
.advies-kaart b{font-family:var(--display);font-size:1.16rem;font-weight:800;color:var(--blauw-tx);letter-spacing:-.02em}
.advies-kaart span.muted{font-size:.85rem;line-height:1.5}
.advies-knoppen{display:flex;flex-wrap:wrap;gap:10px}
.advies-noot{margin:16px 0 0;font-size:.8rem;color:var(--muted)}

/* =======================================================================
   Google-merkje
   ======================================================================= */
.g-ico{flex:none;display:inline-block;vertical-align:-2px}

/* =======================================================================
   Zwevende snelknop
   -----------------------------------------------------------------------
   Rechtsonder, altijd bereikbaar. Dicht is het een enkele bel; open klapt
   hij uit naar bellen, WhatsApp en de offerte. De toasts staan links
   ernaast zodat ze elkaar niet overlappen.
   ======================================================================= */
/* De zwevende WhatsApp-knop rechtsonder.
   Op een breed scherm met de tekst erbij, op een gsm alleen het rondje:
   daar is de duim de knop en de tekst alleen maar in de weg. */
.snel-wa{
  position:fixed;right:18px;bottom:18px;z-index:250;
  display:inline-flex;align-items:center;gap:12px;
  padding:9px 20px 9px 9px;border-radius:var(--r-pill);
  background:#25d366;color:#04310f;
  box-shadow:0 20px 44px -16px rgba(37,211,102,.65),0 4px 14px -6px rgba(0,0,0,.6);
  transition:transform .35s var(--spring),box-shadow .35s var(--ease);
}
.snel-wa:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 26px 54px -16px rgba(37,211,102,.8)}
.snel-wa-ico{
  width:46px;height:46px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.9);color:#25d366;
}
.snel-wa-ico.bel{background:rgba(255,255,255,.9);color:var(--blauw)}
.snel-wa-tx b{display:block;font-size:.92rem;font-weight:800;line-height:1.2}
.snel-wa-tx i{display:block;font-style:normal;font-size:.76rem;opacity:.82;line-height:1.3}

/* Een zacht kloppend randje: genoeg om op te vallen, niet genoeg om te
   storen. Staat uit voor wie beweging liever vermijdt. */
@keyframes waKlop{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}70%{box-shadow:0 0 0 16px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
.snel-wa-ico{animation:waKlop 3.4s ease-out infinite}
@media (prefers-reduced-motion:reduce){.snel-wa-ico{animation:none}}

@media (max-width:760px){
  .snel-wa{right:14px;bottom:14px;padding:7px;gap:0}
  .snel-wa-tx{display:none}
  .snel-wa-ico{width:50px;height:50px;background:#fff}
}
.toasts{right:auto;left:16px}
@media (max-width:520px){.snel{right:12px;bottom:12px}.snel-knop{width:50px;height:50px}}

/* =======================================================================
   Winkel: kruimels, productoverzicht en productpagina
   -----------------------------------------------------------------------
   De productpagina is de plek waar de beslissing valt. De opbouw volgt de
   vragen die iemand in zijn hoofd heeft, in die volgorde: hoe ziet het
   eruit, wat kost het, wat als ik me vergis, wanneer heb ik het, en wie
   kan ik bellen als ik twijfel.
   ======================================================================= */
.kruimels{display:flex;align-items:center;gap:9px;font-size:.8rem;color:var(--muted);margin-bottom:22px;flex-wrap:wrap}
.kruimels a{color:var(--muted);transition:color .25s}
.kruimels a:hover{color:var(--blauw-tx)}
.kruimels b{color:var(--fg-2);font-weight:700}

.vink{
  width:19px;height:19px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:rgba(61,220,132,.14);color:var(--ok);border:1px solid rgba(61,220,132,.32);
}

/* --------------------------------------------------------- overzicht */
.po-kop{padding-top:calc(var(--nav-h) + 30px)}
.po-band{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:20px;overflow:hidden;
}
.po-band-item{display:flex;align-items:center;gap:11px;padding:16px 18px;background:var(--ink-1)}
.po-band-item b{display:block;font-size:.86rem;font-weight:700}
.po-band-item i{display:block;font-style:normal;font-size:.78rem;color:var(--muted)}

.po-lijst{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:18px}
.po-kaart{
  display:flex;flex-direction:column;border:1px solid var(--line);border-radius:22px;overflow:hidden;
  background:var(--ink-2);transition:transform .45s var(--ease),border-color .45s var(--ease),box-shadow .45s var(--ease);
}
.po-kaart:hover{transform:translateY(-5px);border-color:rgba(42,51,255,.5);box-shadow:0 34px 70px -46px #000}
.po-beeld{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:var(--ink-3)}
.po-beeld img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.po-kaart:hover .po-beeld img{transform:scale(1.05)}
.po-vanaf{
  position:absolute;left:14px;bottom:14px;z-index:2;display:inline-flex;align-items:baseline;gap:6px;
  padding:8px 15px;border-radius:var(--r-pill);font-size:.74rem;font-weight:700;color:#fff;
  background:rgba(7,7,12,.72);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(8px);
}
.po-vanaf b{font-family:var(--display);font-size:1.02rem;font-weight:800}
.po-tx{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1;gap:9px}
.po-tx h2{font-family:var(--display);font-size:1.24rem;font-weight:800;letter-spacing:-.02em;margin:0}
.po-onder{margin:0;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--blauw-tx);font-weight:800}
.po-tx > p{margin:0;font-size:.9rem;color:var(--fg-2);line-height:1.6}
.po-tx ul{list-style:none;margin:2px 0;padding:0;display:grid;gap:6px}
.po-tx li{display:flex;gap:9px;align-items:flex-start;font-size:.86rem;color:var(--fg-2)}
.po-tx li svg{color:var(--blauw-tx);flex:none;margin-top:3px}
.po-maat{margin-top:auto;padding:11px 0;border-top:1px solid var(--line);font-size:.8rem;color:var(--muted)}
.po-maat b{color:var(--fg-2)}

.po-gaas{margin-top:clamp(30px,4vw,50px)}
.po-gaas .h3{margin-bottom:18px}
.po-gaasrij{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:14px}
.po-gaaskaart{padding:18px;border:1px solid var(--line);border-radius:18px;background:var(--ink-2)}
.po-gaaskaart b{display:block;font-family:var(--display);font-size:1rem;font-weight:800;margin:12px 0 5px}
.po-gaaskaart p{margin:0 0 10px;font-size:.83rem;color:var(--muted);line-height:1.55}
.po-gaaskaart em{font-style:normal;font-size:.78rem;font-weight:800;color:var(--blauw-tx)}
.po-doek,.pk-doek{
  display:block;border-radius:10px;background-color:var(--dk,#333);opacity:1;position:relative;overflow:hidden;
  background-image:
    repeating-linear-gradient(0deg,rgba(0,0,0,.55) 0 1px,transparent 1px var(--ms,3px)),
    repeating-linear-gradient(90deg,rgba(0,0,0,.55) 0 1px,transparent 1px var(--ms,3px));
}
.po-doek{height:62px;box-shadow:inset 0 0 30px rgba(0,0,0,.4)}

/* -------------------------------------------------------- productpagina */
.pd{padding:calc(var(--nav-h) + 26px) 0 clamp(50px,7vw,90px)}
.pd-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(24px,3.4vw,48px);align-items:start}
@media (max-width:980px){.pd-grid{grid-template-columns:1fr}}

.pd-groot{position:relative;border-radius:24px;overflow:hidden;border:1px solid var(--line);background:var(--ink-2);aspect-ratio:4/3}
.pd-slide{position:absolute;inset:0;opacity:0;transition:opacity .45s var(--ease)}
.pd-slide.aan{opacity:1}
.pd-slide picture{display:block;width:100%;height:100%}
.pd-groot img{width:100%;height:100%;object-fit:cover}
.pd-vlag{
  position:absolute;left:14px;top:14px;z-index:3;padding:7px 14px;border-radius:var(--r-pill);
  font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#fff;
  background:rgba(5,12,232,.76);border:1px solid rgba(255,255,255,.26);backdrop-filter:blur(8px);
}
/* auto-fit met een minimum van 0 is een val: de browser mag dan zelf kiezen
   hoeveel kolommen hij maakt en kiest er in de praktijk één, waardoor elke
   miniatuur zo breed werd als de hele kolom. Een echt minimum lost dat op. */
.pd-mini{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:9px;margin-top:10px}
.pd-mini button{
  padding:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:none;cursor:pointer;
  aspect-ratio:4/3;transition:border-color .3s,transform .3s var(--spring),opacity .3s;opacity:.62;
}
.pd-mini button img{width:100%;height:100%;object-fit:cover;display:block}
.pd-mini button:hover{opacity:1;transform:translateY(-2px)}
.pd-mini button.aan{opacity:1;border-color:var(--blauw-hel);box-shadow:0 0 0 2px rgba(42,51,255,.28)}

.pd-waarom{margin-top:22px;display:grid;gap:14px}
.pd-waarom-rij{display:flex;gap:12px;align-items:flex-start}
.pd-waarom-rij b{display:block;font-size:.92rem;font-weight:700;margin-bottom:2px}
.pd-waarom-rij p{margin:0;font-size:.85rem;color:var(--muted);line-height:1.55}

/* ---- het koopvak ---- */
.pd-score{
  display:inline-flex;align-items:center;gap:9px;padding:7px 15px;border-radius:var(--r-pill);
  border:1px solid var(--line-2);background:var(--ink-2);margin-bottom:16px;font-size:.82rem;color:var(--fg-2);
  transition:border-color .3s,transform .3s var(--spring);
}
.pd-score:hover{border-color:var(--blauw-hel);transform:translateY(-2px)}
.pd-score b{color:var(--fg);font-weight:800}
.pd-score .sterren{color:#fbbc05}
.pd-titel{font-family:var(--display);font-size:clamp(1.8rem,3.4vw,2.6rem);font-weight:800;letter-spacing:-.032em;line-height:1.08;margin:0 0 12px}
.pd-onder{margin:0 0 20px;font-size:1rem;color:var(--fg-2);line-height:1.65}

.pd-vanaf{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding-bottom:18px;border-bottom:1px solid var(--line)}
.pd-vanaf span{font-size:.82rem;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.14em}
.pd-vanaf b{font-family:var(--display);font-size:clamp(1.7rem,3vw,2.2rem);font-weight:800;letter-spacing:-.03em;color:var(--fg)}
.pd-vanaf small{font-size:.8rem;color:var(--muted)}

.pd-usp{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:11px}
.pd-usp li{display:flex;gap:11px;align-items:flex-start}
.pd-usp b{display:block;font-size:.9rem;font-weight:700}
.pd-usp i{display:block;font-style:normal;font-size:.8rem;color:var(--muted);margin-top:1px}

.pd-hulp{
  display:flex;gap:14px;margin-top:20px;padding:18px;border-radius:18px;
  border:1px solid rgba(37,211,102,.28);background:rgba(37,211,102,.07);
}
.pd-hulp-ico{width:38px;height:38px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(150deg,#4ee27a,#25d366);color:#0b2c17}
.pd-hulp b{display:block;font-size:.95rem;font-weight:800;margin-bottom:4px}
.pd-hulp p{margin:0 0 12px;font-size:.87rem;color:var(--fg-2);line-height:1.6}
.pd-hulp a{color:var(--fg);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.pd-hulp-knoppen{display:flex;flex-wrap:wrap;gap:8px}
.mini-knop{
  display:inline-flex;align-items:center;padding:8px 15px;border-radius:var(--r-pill);
  border:1px solid var(--line-2);background:var(--ink-2);font-size:.8rem;font-weight:700;color:var(--fg);
  transition:transform .3s var(--spring),border-color .3s,background .3s;
}
.mini-knop:hover{transform:translateY(-2px);border-color:var(--blauw-hel)}
.mini-knop.wa{background:#25d366;border-color:#25d366;color:#08240f}
.mini-knop.wa:hover{background:#2fe173;border-color:#2fe173}

/* ---- de configurator in het koopvak ---- */
.pk{margin-top:24px;border:1px solid var(--line);border-radius:24px;background:linear-gradient(168deg,var(--ink-2),var(--ink-1));overflow:hidden}
.pk-stappen{display:flex;gap:4px;padding:12px 14px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.pk-stappen::-webkit-scrollbar{display:none}
.pk-stappen span{
  display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:var(--r-pill);cursor:pointer;
  font-size:.76rem;font-weight:700;color:var(--muted);white-space:nowrap;transition:color .3s,background .3s;
}
.pk-stappen span i{
  width:19px;height:19px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:.66rem;
  background:var(--ink-4);color:var(--muted);transition:background .3s,color .3s;
}
.pk-stappen span.nu{color:#fff;background:rgba(42,51,255,.16)}
.pk-stappen span.nu i{background:var(--blauw-hel);color:#fff}
.pk-stappen span.klaar i{background:rgba(61,220,132,.2);color:var(--ok)}

.pk-vak{padding:20px 22px;border-bottom:1px solid var(--line)}
.pk-vak h2{font-family:var(--display);font-size:1.02rem;font-weight:800;letter-spacing:-.01em;margin:0 0 14px}
.pk-kop{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.pk-kop h2{margin:0}
.pk-uitleg{background:none;border:0;padding:0;cursor:pointer;font-family:inherit;font-size:.8rem;font-weight:700;color:var(--blauw-tx);text-decoration:underline;text-underline-offset:3px}
.pk-hint{margin:10px 0 0;font-size:.8rem;color:var(--muted);line-height:1.55}

.pk-maten{display:grid;grid-template-columns:1fr 1fr;gap:11px}
@media (max-width:420px){.pk-maten{grid-template-columns:1fr}}
.pk-maat{position:relative;display:block}
.pk-maat > span{display:block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:800;margin-bottom:7px}
.pk-maat input{
  width:100%;padding:14px 46px 14px 15px;border:1px solid var(--line-2);border-radius:13px;
  background:var(--ink-1);color:var(--fg);font-family:var(--display);font-size:1.14rem;font-weight:700;
  transition:border-color .25s,box-shadow .25s,background .25s;
}
.pk-maat input:focus{outline:0;border-color:var(--blauw-hel);background:var(--ink-2);box-shadow:0 0 0 3px rgba(42,51,255,.2)}
.pk-maat i{position:absolute;right:15px;bottom:15px;font-style:normal;font-size:.84rem;color:var(--muted);font-weight:700;pointer-events:none}

.pk-opties{display:grid;gap:8px}
.pk-optie{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer;font-family:inherit;
  padding:11px 13px;border:1px solid var(--line-2);border-radius:14px;background:var(--ink-1);color:var(--fg);
  transition:border-color .3s,background .3s,transform .3s var(--spring);
}
.pk-optie:hover{transform:translateY(-2px);border-color:var(--blauw-hel)}
.pk-optie.aan{border-color:var(--blauw-hel);background:rgba(42,51,255,.12)}
.pk-doek{width:42px;height:42px;flex:none}
.pk-optie-tx{flex:1;min-width:0}
.pk-optie-tx b{display:block;font-size:.9rem;font-weight:700}
.pk-optie-tx i{display:block;font-style:normal;font-size:.77rem;color:var(--muted);line-height:1.45;margin-top:2px}
.pk-meer{flex:none;font-size:.78rem;font-weight:800;color:var(--blauw-tx);white-space:nowrap}
.pk-meer.gratis{color:var(--ok)}

.pk-kleuren{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,104px),1fr));gap:8px}
.pk-kleur{
  display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;font-family:inherit;
  padding:11px 8px;border:1px solid var(--line-2);border-radius:14px;background:var(--ink-1);color:var(--fg);
  transition:border-color .3s,background .3s,transform .3s var(--spring);
}
.pk-kleur:hover{transform:translateY(-2px);border-color:var(--blauw-hel)}
.pk-kleur.aan{border-color:var(--blauw-hel);background:rgba(42,51,255,.12)}
.pk-kleur i{width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.2);flex:none}
.pk-kleur span{font-size:.74rem;font-weight:700;text-align:center;line-height:1.25}
.pk-kleur em{font-style:normal;font-size:.7rem;font-weight:800;color:var(--blauw-tx)}

.pk-aantalrij{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.pk-teller{display:flex;align-items:center;border:1px solid var(--line-2);border-radius:13px;overflow:hidden;background:var(--ink-1);flex:none}
.pk-teller button{width:42px;height:48px;border:0;background:none;color:var(--fg-2);font-size:1.1rem;cursor:pointer;transition:background .25s,color .25s}
.pk-teller button:hover{background:rgba(42,51,255,.16);color:#fff}
.pk-teller input{width:56px;height:48px;border:0;background:none;color:var(--fg);text-align:center;font-family:var(--display);font-size:1.08rem;font-weight:800}
.pk-teller input:focus{outline:0}
.pk-ruimte{flex:1;min-width:180px}
.pk-ruimte > span{display:block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:800;margin-bottom:7px}
.pk-ruimte > span i{font-style:normal;letter-spacing:.04em;text-transform:none;color:var(--muted);opacity:.7;font-weight:600}
.pk-ruimte input{width:100%;padding:14px 15px;border:1px solid var(--line-2);border-radius:13px;background:var(--ink-1);color:var(--fg);font-size:.95rem}
.pk-ruimte input:focus{outline:0;border-color:var(--blauw-hel);background:var(--ink-2);box-shadow:0 0 0 3px rgba(42,51,255,.2)}

.pk-prijs{padding:20px 22px 22px;background:rgba(42,51,255,.06)}
.pk-prijs-rijen{display:grid;gap:9px;margin-bottom:12px}
.pk-prijs-rij{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.pk-prijs-rij span{font-size:.88rem;font-weight:700}
.pk-prijs-rij span i{display:block;font-style:normal;font-size:.76rem;color:var(--muted);font-weight:600;margin-top:1px}
.pk-prijs-rij b{font-family:var(--display);font-size:1.5rem;font-weight:800;letter-spacing:-.03em;white-space:nowrap}
.pk-prijs-rij.zacht{padding-top:9px;border-top:1px dashed var(--line-2)}
.pk-prijs-rij.zacht b{font-size:1.16rem;color:var(--fg-2)}
.pk-prijs-noot{margin:0 0 14px;font-size:.78rem;color:var(--muted)}
.pk-gerust{display:grid;gap:5px;margin-top:12px}
.pk-gerust span{font-size:.76rem;color:var(--muted);display:flex;gap:7px;align-items:center}
.pk-gerust span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--ok);flex:none}

.pk-na{margin-top:14px;padding:16px;border-radius:16px;border:1px solid rgba(61,220,132,.32);background:rgba(61,220,132,.08);animation:stijg .4s var(--ease) both}
.pk-na b{display:block;font-family:var(--display);font-size:.98rem;font-weight:800;margin-bottom:4px}
.pk-na p{margin:0 0 12px;font-size:.85rem;color:var(--fg-2)}
.pk-na-knoppen{display:flex;flex-wrap:wrap;gap:8px}

/* ---- de blokken onder de vouw ---- */
.pd-sec{margin-top:clamp(46px,6vw,84px)}
.pd-sec .h2{margin-bottom:12px}
.pd-sec .lead{margin-bottom:26px}
.meet-stappen{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:14px}
.meet-stap{padding:20px;border:1px solid var(--line);border-radius:18px;background:var(--ink-2)}
.meet-nr{
  display:grid;place-items:center;width:30px;height:30px;border-radius:50%;margin-bottom:12px;
  background:linear-gradient(150deg,var(--blauw-hel),var(--blauw));color:#fff;
  font-family:var(--display);font-size:.86rem;font-weight:800;
}
.meet-stap b{display:block;font-size:.95rem;font-weight:700;margin-bottom:5px}
.meet-stap p{margin:0;font-size:.85rem;color:var(--muted);line-height:1.6}
.meet-noot{margin-top:16px;padding:18px;border-radius:16px;border:1px solid rgba(111,120,255,.32);background:rgba(42,51,255,.09);font-size:.9rem;line-height:1.65;color:var(--fg-2)}
.meet-noot b{color:var(--fg)}

.vragen{display:grid;gap:9px}
.vraag{border:1px solid var(--line);border-radius:16px;background:var(--ink-2);overflow:hidden}
.vraag summary{
  list-style:none;cursor:pointer;padding:16px 20px;display:flex;align-items:center;justify-content:space-between;gap:14px;
  font-size:.98rem;font-weight:700;transition:background .25s;
}
.vraag summary::-webkit-details-marker{display:none}
.vraag summary:hover{background:var(--ink-3)}
.vraag-plus{position:relative;width:14px;height:14px;flex:none}
.vraag-plus::before,.vraag-plus::after{content:"";position:absolute;background:var(--blauw-tx);border-radius:2px;transition:transform .3s var(--spring)}
.vraag-plus::before{left:0;right:0;top:6px;height:2px}
.vraag-plus::after{top:0;bottom:0;left:6px;width:2px}
.vraag[open] .vraag-plus::after{transform:scaleY(0)}
.vraag-tx{padding:0 20px 18px;font-size:.9rem;color:var(--fg-2);line-height:1.7}

.pd-andere{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:12px}
.pd-kaart{
  display:flex;flex-direction:column;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--ink-2);
  transition:transform .4s var(--ease),border-color .4s;
}
.pd-kaart:hover{transform:translateY(-4px);border-color:rgba(42,51,255,.5)}
.pd-kaart img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.pd-kaart-tx{padding:14px 16px 16px}
.pd-kaart-tx b{display:block;font-family:var(--display);font-size:1rem;font-weight:800}
.pd-kaart-tx i{display:block;font-style:normal;font-size:.78rem;color:var(--muted);margin:2px 0 7px}
.pd-kaart-tx em{font-style:normal;font-size:.82rem;font-weight:800;color:var(--blauw-tx)}

/* ---- de vaste balk onderaan op de gsm ---- */
.pd-balk{
  position:fixed;left:0;right:0;bottom:0;z-index:210;display:none;
  align-items:center;justify-content:space-between;gap:14px;padding:11px 16px;
  background:rgba(11,11,18,.96);backdrop-filter:blur(18px);border-top:1px solid var(--line);
  box-shadow:0 -14px 40px -22px #000;
}
.pd-balk span{display:block;font-size:.76rem;color:var(--muted)}
.pd-balk b{font-family:var(--display);font-size:1.15rem;font-weight:800;letter-spacing:-.02em}
@media (max-width:760px){
  .pd-balk:not([hidden]){display:flex}
  .snel-wa{bottom:84px}
}
html[data-thema="licht"] .pd-balk{background:rgba(255,255,255,.97)}

/* Het mandje in de kopbalk. */
.nav-mand{
  position:relative;width:36px;height:36px;flex:none;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--line-2);background:rgba(255,255,255,.03);color:var(--fg-2);
  transition:color .3s,border-color .3s,transform .35s var(--spring);
}
.nav-mand:hover{color:#fff;border-color:var(--blauw-hel);transform:translateY(-2px)}
.nav-mand-tel{
  position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  display:grid;place-items:center;font-size:.66rem;font-weight:800;color:#fff;
  background:linear-gradient(150deg,var(--blauw-hel),var(--blauw));border:2px solid var(--ink);
}
html[data-thema="licht"] .nav-mand-tel{border-color:#fff}
.nav-mand-tel.pop{animation:popIn .4s var(--spring)}

/* =======================================================================
/* =======================================================================
   Weggehaald: de opmaak van de oude winkelmand
   -----------------------------------------------------------------------
   Hier stond de CSS van de webshop: de mandpagina, de tellers, de
   bedragen, de bestelbevestiging. Die pagina's bestaan niet meer.

   Het stond niet alleen voor niets in het bestand, het deed ook schade:
   .mand-regel werd hier opnieuw gedefinieerd als een raster van vier
   kolommen voor een opbouw die er niet meer is. Het zijpaneel van de
   offerte gebruikt diezelfde klassenaam met twee elementen, en die
   belandden daardoor over elkaar. Precies het soort spook dat je uren
   laat zoeken naar een fout die je zelf al verwijderd dacht te hebben.
   ======================================================================= */


/* =======================================================================
   Mobiel: overloop dichttimmeren
   -----------------------------------------------------------------------
   Eén element dat een paar pixels breder is dan het scherm maakt de hele
   pagina horizontaal sleepbaar, en dan lijkt alles scheef te staan. Dat is
   hier op drie manieren opgelost: de wortel mag niet meer zijwaarts
   scrollen, roostercellen mogen krimpen (min-width:0 hoort daarbij, anders
   houdt de inhoud de cel breder dan de kolom), en decoratie die bewust
   buiten haar kader steekt wordt afgeknipt.
   ======================================================================= */
html{overflow-x:clip}
@supports not (overflow:clip){html{overflow-x:hidden}}

/* Roostercellen mogen kleiner worden dan hun inhoud. */
.pd-grid > *,.po-lijst > *,.demo-grid > *,.cfg-grid > *{min-width:0}

/* .stap heeft een sierlijke cirkel op right:-30px. Die stak dertig pixels
   buiten de kaart, en op een gsm buiten het scherm. */
.stap{overflow:hidden}

/* Lange woorden en e-mailadressen mogen breken in plaats van uit te steken. */
.pd-hulp p,.po-tx,.vraag-tx,.mand-body{overflow-wrap:anywhere}

@media (max-width:760px){
  /* De pagina begint hoger: de zwevende pil is smaller dan op de laptop. */
  .pd{padding-top:calc(var(--nav-h) + 12px)}
  .po-kop{padding-top:calc(var(--nav-h) + 14px)}

  /* Miniaturen worden een strook die zelf schuift; zes vierkantjes naast
     elkaar wringen op een gsm en duwden de pagina open. */
  .pd-mini{
    display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;
    padding-bottom:4px;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .pd-mini::-webkit-scrollbar{display:none}
  .pd-mini button{flex:0 0 84px;scroll-snap-align:start}

  .pd-titel{font-size:clamp(1.55rem,7vw,2rem)}
  .pd-vanaf b{font-size:1.7rem}
  .pd-waarom{margin-top:18px}

  /* Het koopvak: iets minder lucht, zodat de knop sneller in beeld komt. */
  .pk-vak{padding:16px 15px}
  .pk-prijs{padding:16px 15px 18px}
  .pk-stappen{padding:10px 10px}
  .pk-optie{padding:10px 11px;gap:10px}
  .pk-doek{width:36px;height:36px}
  .pk-optie-tx i{font-size:.74rem}
  .pk-meer{font-size:.72rem}

  /* Teller en ruimteveld onder elkaar: naast elkaar werd het veld te smal
     om nog iets in te kunnen typen. */
  .pk-aantalrij{flex-direction:column;align-items:stretch}
  .pk-ruimte{min-width:0;width:100%}
  .pk-teller{align-self:flex-start}

  .pk-prijs-rij b{font-size:1.32rem}
  .pk-prijs-rij.zacht b{font-size:1.05rem}

  .meet-stap{padding:16px}
  .pd-sec{margin-top:40px}
  .vraag summary{padding:14px 16px;font-size:.92rem}
  .vraag-tx{padding:0 16px 16px}

  /* Op de mand: prijs en teller op één regel, niet elk op een eigen rij. */
  .mand-regel{padding:14px 15px}
}

@media (max-width:420px){
  /* Kleurstalen: drie per rij blijft leesbaar, vier wordt geknepen. */
  .pk-kleuren{grid-template-columns:repeat(3,1fr)}
  .pk-kleur span{font-size:.68rem}
  .pd-balk{padding:10px 13px;gap:10px}
  .pd-balk b{font-size:1.05rem}
  .po-band-item{padding:13px 15px}
}

/* De vaste koopbalk en de zwevende belknop stonden op elkaar. De balk wint
   onderaan; de belknop schuift erboven. */
@media (max-width:760px){
  .snel{right:12px}
  .pd-balk{padding-bottom:calc(11px + env(safe-area-inset-bottom))}
}

/* Aanraakvlakken: op een gsm is alles onder ongeveer 44 pixels lastig raak
   te tikken. Dat geldt vooral voor de knoppen die iemand meermaals gebruikt. */
@media (hover:none){
  .pk-uitleg{padding:8px 0 8px 10px;margin:-8px 0}
  .pk-teller button{width:48px;height:50px}
  .pk-teller input{height:50px}
  .mand-weg button{width:40px;height:40px}
  .vraag summary{min-height:52px}
}

/* =======================================================================
   De mand op een gsm
   ======================================================================= */
.mand-regel{min-width:0}
/* De prijs mag niet afbreken, maar wel kleiner worden dan zijn vaste breedte
   zou vragen. Zonder deze grens duwt hij de hele kaart open. */

@media (max-width:560px){
  /* Keuzeblokken: prijs onder de tekst in plaats van ernaast, anders blijft
     er voor de uitleg een kolom van twee woorden breed over. */



  /* De samenvatting bij het afrekenen: naam boven, prijs eronder rechts. */
}

/* Zelfde grens in het koopvak op de productpagina. */
.pk-prijs-rij{min-width:0}
.pk-prijs-rij span{min-width:0;overflow-wrap:anywhere}
.pd-vanaf{min-width:0;flex-wrap:wrap}
.pd-score{max-width:100%;flex-wrap:wrap}



/* =======================================================================
   De vernieuwing van 2026
   -----------------------------------------------------------------------
   De webshop is verdwenen. Er staat nergens nog een bedrag: alles loopt
   via de offerte. Wat hieronder staat hoort bij die omslag, plus de
   twee stroken die de zaak laten zien in plaats van beschrijven.
   ======================================================================= */

/* ------------------------------------------------------- beloftebalk */
/* Drie zinnen die op elke pagina meegaan, vastgezet BOVEN de navigatie.
   Dit is wat een bezoeker zich als eerste afvraagt, dus het hoort ook
   letterlijk bovenaan te staan en niet weg te scrollen. */
.belofte{
  position:fixed;top:0;left:0;right:0;z-index:120;
  height:var(--bel-h);
  display:flex;align-items:center;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg,rgba(9,10,28,.96),rgba(6,6,16,.94));
  backdrop-filter:blur(14px) saturate(1.5);-webkit-backdrop-filter:blur(14px) saturate(1.5);
  overflow:hidden;
}
html[data-thema="licht"] .belofte{
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(246,247,252,.94));
  border-bottom-color:rgba(16,19,34,.1);
}
.belofte-in{
  display:flex;align-items:center;justify-content:center;
  font-size:.8rem;color:var(--fg-2);overflow:hidden;
}
.belofte-band{display:flex;align-items:center;gap:clamp(14px,3vw,40px)}
.belofte-item{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.belofte-item svg{color:var(--blauw-tx);flex:none}
.belofte-item b{color:var(--fg);font-weight:800}

/* Op een breed scherm tonen we er DRIE. Er staan er vijf in de reeks (en
   die reeks staat er twee keer voor de gsm-slider), maar vijf naast elkaar
   passen niet in de wrap: dan worden de buitenste twee afgekapt en lees je
   "rte binnen 3 uur". Drie is wat er comfortabel op past. */
@media (min-width:861px){
  .belofte-item:nth-child(n+4){display:none}
  .belofte-in{overflow:visible}
  .belofte-band{
    flex-wrap:wrap;justify-content:center;
    width:auto;max-width:100%;
  }
}

/* Op een middelgroot scherm passen er nog maar twee. */
@media (min-width:861px) and (max-width:1100px){
  .belofte-item:nth-child(n+3){display:none}
}

/* De navigatie schuift mee omlaag, en alles wat onder een vaste kop hoort
   te beginnen rekent met --nav-h, dus die telt de balk mee. */
.nav{top:var(--bel-h)}
.nav.hide{transform:translateY(calc(-100% - var(--bel-h) - 10px))}

@media (max-width:860px){
  /* Op een gsm passen ze niet naast elkaar. In plaats van te laten
     scrollen (wat niemand doet in een balk van dertig pixels hoog) laten
     we ze traag voorbijschuiven. Rustig genoeg om te lezen: een balk die
     te snel gaat, leest niemand en irriteert iedereen. */
  .belofte-in{justify-content:flex-start;width:100%;padding:0}
  .belofte-band{
    width:max-content;gap:26px;
    animation:drift 42s linear infinite;
    will-change:transform;
  }
  .belofte-item{font-size:.76rem}
  /* Aanraken zet hem stil, zodat je een zin kan uitlezen. */
  .belofte:active .belofte-band{animation-play-state:paused}
}
@media (prefers-reduced-motion:reduce){
  .belofte-band{animation:none}
  .belofte-in{overflow-x:auto;scrollbar-width:none}
}

/* ------------------------------------------------------ atelierstrook */
/* Drie kolommen met foto's die traag langs elkaar schuiven: de buitenste
   omhoog, de middelste omlaag. Boven en onder lopen ze weg in de
   achtergrond, zodat het aanvoelt als naar binnen kijken. */
@keyframes atelierOp   { from{transform:translate3d(0,0,0)}    to{transform:translate3d(0,-50%,0)} }
@keyframes atelierNeer { from{transform:translate3d(0,-50%,0)} to{transform:translate3d(0,0,0)} }

.atelier-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(28px,5vw,64px);align-items:center;
}
.atelier-tx .lead{margin-bottom:26px}

.atelier-punten{display:grid;gap:16px;margin-bottom:28px}
.atelier-punt{display:flex;gap:12px;align-items:flex-start}
.atelier-punt b{display:block;font-size:.96rem;font-weight:700;margin-bottom:3px}
.atelier-punt p{margin:0;font-size:.88rem;color:var(--fg-2);line-height:1.6}

.atelier-cta{display:flex;align-items:center;gap:clamp(14px,3vw,26px);flex-wrap:wrap}

.atelier-strook{
  position:relative;
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(10px,1.4vw,18px);
  height:clamp(420px,62vh,640px);
  overflow:hidden;
  /* De vervaging boven en onder. Een masker in plaats van een verloop
     over de foto's, zodat het ook klopt op een lichte achtergrond. */
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);
}
.atelier-kolom{position:relative;overflow:hidden}
.atelier-band{
  display:flex;flex-direction:column;gap:clamp(10px,1.4vw,18px);
  will-change:transform;
  animation:atelierOp var(--duur,46s) linear infinite;
}
.atelier-kolom.neer .atelier-band{animation-name:atelierNeer}

/* Bij hover stopt de beweging. Wie een foto wil bekijken, moet hem niet
   achterna hoeven kijken. */
.atelier-strook:hover .atelier-band{animation-play-state:paused}

.atelier-foto{
  position:relative;margin:0;flex:none;
  border-radius:16px;overflow:hidden;
  border:1px solid var(--line);
  background:var(--ink-2);
}
.atelier-foto img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/4;display:block}
.atelier-foto figcaption{
  position:absolute;inset:auto 0 0 0;
  padding:22px 12px 10px;
  font-size:.74rem;font-weight:700;color:#fff;
  background:linear-gradient(180deg,transparent,rgba(3,3,10,.82));
  opacity:0;transition:opacity .4s var(--ease);
}
.atelier-foto:hover figcaption{opacity:1}

/* Een tweede en derde kolom die net iets verschoven starten, zodat het
   geen raster wordt. */
.atelier-kolom:nth-child(2){transform:translateY(-22px)}
.atelier-kolom:nth-child(3){transform:translateY(14px)}

@media (max-width:980px){
  .atelier-grid{grid-template-columns:1fr}
  .atelier-strook{height:clamp(320px,46vh,420px)}
}
@media (max-width:560px){
  /* Drie kolommen naast elkaar worden postzegels op een gsm. Twee is
     genoeg om het idee over te brengen. */
  .atelier-strook{grid-template-columns:repeat(2,1fr)}
  .atelier-strook .atelier-kolom:nth-child(3){display:none}
}
@media (prefers-reduced-motion:reduce){
  .atelier-band{animation:none}
  .atelier-strook{overflow-y:auto}
}

/* ------------------------------------------------------ reviewstrook */
/* Twee rijen die tegen elkaar in schuiven. */
@keyframes rvwLinks  { from{transform:translate3d(0,0,0)}    to{transform:translate3d(-50%,0,0)} }
@keyframes rvwRechts { from{transform:translate3d(-50%,0,0)} to{transform:translate3d(0,0,0)} }

.rvw-strook{
  display:grid;gap:14px;margin-top:clamp(26px,4vw,42px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.rvw-rij{overflow:hidden}
.rvw-band{
  display:flex;gap:14px;width:max-content;
  will-change:transform;
  animation:rvwLinks var(--duur,58s) linear infinite;
}
.rvw-rij.terug .rvw-band{animation-name:rvwRechts}
.rvw-strook:hover .rvw-band{animation-play-state:paused}

.rvw-kaart{
  flex:none;width:min(84vw,340px);
  padding:20px;border-radius:18px;
  border:1px solid var(--line);background:var(--ink-2);
  display:flex;flex-direction:column;gap:10px;
  transition:border-color .35s var(--ease),transform .35s var(--ease);
}
.rvw-kaart:hover{border-color:var(--line-2);transform:translateY(-3px)}
.rvw-kop{display:flex;align-items:center;gap:10px}
.rvw-av{
  width:36px;height:36px;flex:none;border-radius:50%;
  display:grid;place-items:center;
  background:linear-gradient(140deg,var(--blauw),var(--blauw-dp));
  color:#fff;font-weight:800;font-size:.92rem;
}
.rvw-wie{min-width:0;flex:1}
.rvw-wie b{display:block;font-size:.9rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rvw-wie i{display:block;font-style:normal;font-size:.74rem;color:var(--muted)}
.rvw-g{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:#fff}
.rvw-kaart .sterren{margin:0}
.rvw-kaart p{
  margin:0;font-size:.9rem;line-height:1.62;color:var(--fg-2);
  /* Vier regels, daarna afkappen. Anders wordt één lange review twee keer
     zo hoog als de rest en danst de rij op en neer. */
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
}
.rvw-ok{
  display:inline-flex;align-items:center;gap:6px;margin-top:auto;
  font-size:.72rem;font-weight:800;color:var(--ok);
}
.rvw-voet{display:flex;justify-content:center;margin-top:clamp(24px,4vw,38px)}
.rvw-voet .btn{gap:9px}

@media (prefers-reduced-motion:reduce){
  .rvw-band{animation:none}
  .rvw-rij{overflow-x:auto}
}

/* --------------------------------------------------- moduskeuze offerte */
/* Twee grote knoppen in plaats van een schuifje: op een telefoon is een
   schuifje te klein, en niet iedereen begrijpt wat het doet. */
.modus{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
  margin:0 0 28px;padding:6px;
  border:1px solid var(--line);border-radius:18px;background:var(--ink-1);
}
.modus-knop{
  border:1px solid transparent;background:transparent;color:var(--fg-2);
  border-radius:13px;padding:13px 16px;cursor:pointer;text-align:left;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.modus-knop b{display:block;font-size:.98rem;font-weight:800;margin-bottom:2px}
.modus-knop i{display:block;font-style:normal;font-size:.79rem;color:var(--muted)}
.modus-knop:hover{color:var(--fg);background:var(--ink-2)}
.modus-knop.aan{
  background:rgba(42,51,255,.16);border-color:var(--blauw-hel);color:#fff;
}
.modus-knop.aan i{color:var(--blauw-zt)}

.modusvak{display:none}
.modusvak.aan{display:block;animation:stijg .4s var(--ease) both}

@media (max-width:560px){
  .modus{grid-template-columns:1fr}
}

/* ------------------------------------------------ het eenvoudige vak */
/* Grotere letters en meer lucht dan elders op de site. De mensen die dit
   invullen zijn zelden twintig. */
.simpel .veld label{font-size:.8rem;letter-spacing:.06em;text-transform:none;color:var(--fg-2)}
.simpel .veld input,.simpel .veld textarea{padding:14px 15px;font-size:1rem;border-radius:13px}
.simpel .veld textarea{min-height:130px}
.simpel .ster{color:var(--blauw-tx)}
.veld-uitleg{font-size:.84rem;color:var(--muted);margin:0 0 9px;line-height:1.55}
.veld label .opt{font-style:normal;text-transform:none;letter-spacing:0;font-weight:500;color:var(--muted)}

.wens-tips{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.wens-tips button{
  border:1px dashed var(--line-2);background:transparent;color:var(--fg-2);
  border-radius:var(--r-pill);padding:7px 13px;font-size:.8rem;font-weight:700;cursor:pointer;
  transition:border-color .25s var(--ease),color .25s var(--ease),background .25s var(--ease);
}
.wens-tips button:hover{border-color:var(--blauw-hel);color:#fff}
.wens-tips button.aan{border-style:solid;border-color:var(--blauw-hel);background:rgba(42,51,255,.14);color:#fff}

.simpel-noot{margin:14px 0 0;font-size:.86rem;color:var(--muted);text-align:center}
.simpel-noot a{color:var(--blauw-tx);font-weight:700}

/* ------------------------------------------------------ het zijpaneel */
.zij-belofte{display:grid;gap:12px;margin:18px 0;padding:16px 0;border-block:1px solid var(--line)}
.zij-belofte-rij{display:flex;gap:11px;align-items:flex-start}
.zij-bol{
  width:22px;height:22px;flex:none;border-radius:50%;
  display:grid;place-items:center;font-size:.72rem;font-weight:800;
  background:rgba(42,51,255,.18);color:var(--blauw-zt);border:1px solid var(--blauw-dp);
}
.zij-belofte-rij b{display:block;font-size:.85rem;font-weight:700}
.zij-belofte-rij i{display:block;font-style:normal;font-size:.75rem;color:var(--muted);line-height:1.45}

.zij-bel{
  display:flex;align-items:center;gap:11px;margin-top:16px;padding:13px 15px;
  border:1px solid var(--line);border-radius:14px;background:var(--ink-2);
  transition:border-color .3s var(--ease),transform .3s var(--ease);
}
.zij-bel:hover{border-color:var(--blauw-hel);transform:translateY(-2px)}
.zij-bel svg{color:var(--blauw-tx);flex:none}
.zij-bel b{display:block;font-size:.86rem;font-weight:700}
.zij-bel i{display:block;font-style:normal;font-size:.82rem;color:var(--blauw-tx);font-weight:800}

/* -------------------------------------------- het samenstelvak (product) */
.pk-hoofd{
  font-family:var(--display);font-size:1.1rem;font-weight:800;
  padding:18px 22px 0;margin:0;
}
.pk-vak h3{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  font-family:var(--display);font-size:1rem;font-weight:800;letter-spacing:-.01em;margin:0 0 14px;
}
.pk-nr{
  width:22px;height:22px;flex:none;border-radius:50%;
  display:grid;place-items:center;font-size:.74rem;font-weight:800;
  background:rgba(42,51,255,.2);color:var(--blauw-zt);
}
.pk-opt{font-style:normal;font-size:.72rem;font-weight:600;color:var(--muted);text-transform:none;letter-spacing:0}

.pk-hint.slecht{color:var(--bad);font-weight:700}

.pk-doek-vraag{
  display:grid;place-items:center;border-radius:10px;
  border:1px dashed var(--line-2);color:var(--muted);
  font-size:1.1rem;font-weight:800;background:var(--ink-3);
}
.pk-kleur-vraag{
  display:grid!important;place-items:center;
  border:1px dashed var(--line-2)!important;color:var(--muted);
  font-size:.94rem;font-weight:800;background:var(--ink-3)!important;
}

.pk-snelruimte{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
.pk-snelruimte button{
  border:1px solid var(--line);background:var(--ink-2);color:var(--fg-2);
  border-radius:var(--r-pill);padding:6px 12px;font-size:.78rem;font-weight:700;cursor:pointer;
  transition:border-color .25s var(--ease),color .25s var(--ease),background .25s var(--ease);
}
.pk-snelruimte button:hover{border-color:var(--blauw-hel);color:#fff}
.pk-snelruimte button.aan{border-color:var(--blauw-hel);background:rgba(42,51,255,.14);color:#fff}

.pk-tip{
  margin-top:11px;padding:11px 13px;border-radius:12px;
  background:rgba(42,51,255,.09);border:1px solid var(--blauw-dp);
  font-size:.82rem;line-height:1.55;color:var(--fg-2);
}

.pk-slot{padding:20px 22px}
.pk-slot-noot{margin:11px 0 0;font-size:.79rem;color:var(--muted);text-align:center;line-height:1.5}
.pk-slot .btn.bezig{opacity:.6;pointer-events:none}

/* ---- wat er verschijnt nadat er iets is toegevoegd ---- */
.pk-erna{
  margin:0 14px 16px;padding:18px;border-radius:16px;
  border:1px solid var(--blauw-dp);background:rgba(42,51,255,.07);
  animation:stijg .45s var(--ease) both;
}
.pk-erna-kop{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.pk-erna-kop svg{color:var(--ok);flex:none}
.pk-erna-kop b{font-size:.98rem;font-weight:800}
.pk-erna-tekst{font-size:.86rem;color:var(--fg-2);line-height:1.6;margin:0 0 16px}

.pk-erna-blok{margin-bottom:16px}
.pk-erna-blok > b{display:block;font-size:.84rem;font-weight:800;margin-bottom:9px}
.pk-erna-noot{display:block;margin-top:8px;font-size:.75rem;color:var(--muted);line-height:1.5}

.pk-cross{display:grid;gap:10px}
.pk-cross-kaart{
  display:flex;gap:12px;align-items:center;
  padding:11px;border-radius:13px;
  border:1px solid var(--line);background:var(--ink-2);
  transition:border-color .3s var(--ease),transform .3s var(--ease);
}
.pk-cross-kaart:hover{border-color:var(--blauw-hel);transform:translateY(-2px)}
.pk-cross-kaart img{width:64px;height:56px;flex:none;object-fit:cover;border-radius:9px}
.pk-cross-kaart b{display:block;font-size:.87rem;font-weight:700}
.pk-cross-kaart i{display:block;font-style:normal;font-size:.76rem;color:var(--muted);line-height:1.5;margin:2px 0 4px}
.pk-cross-kaart em{font-style:normal;font-size:.76rem;font-weight:800;color:var(--blauw-tx)}

/* ---- de lijst zoals hij op de productpagina meeleest ---- */
.pk-lijst{margin:0 14px 16px;padding:15px;border:1px solid var(--line);border-radius:15px;background:var(--ink-1)}
.pk-lijst-kop{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:11px}
.pk-lijst-kop b{font-size:.9rem;font-weight:800}
.pk-lijst-kop span{font-size:.78rem;color:var(--blauw-tx);font-weight:700}
.pk-lijst-rij{
  display:flex;align-items:flex-start;gap:10px;
  padding:9px 0;border-top:1px solid var(--line);
}
.pk-lijst-rij:first-child{border-top:0}
.pk-lijst-rij > div{flex:1;min-width:0}
.pk-lijst-rij b{display:block;font-size:.85rem;font-weight:700}
.pk-lijst-rij i{display:block;font-style:normal;font-size:.75rem;color:var(--muted);line-height:1.45;margin-top:1px}
.pk-lijst-weg{
  flex:none;width:24px;height:24px;border-radius:8px;
  border:1px solid var(--line);background:transparent;color:var(--muted);
  font-size:1rem;line-height:1;cursor:pointer;
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
.pk-lijst-weg:hover{color:var(--bad);border-color:var(--bad)}
.pk-lijst-door{
  display:block;margin-top:12px;text-align:center;
  font-size:.82rem;font-weight:800;color:var(--blauw-tx);
}

/* -------------------------------------------------- productpagina extra */
.pd-belofte{
  margin:16px 0 18px;padding:15px 17px;border-radius:15px;
  border:1px solid var(--blauw-dp);background:rgba(42,51,255,.08);
}
.pd-belofte b{display:block;font-size:.95rem;font-weight:800;margin-bottom:5px}
.pd-belofte span{display:block;font-size:.85rem;line-height:1.6;color:var(--fg-2)}

/* Er staat geen prijs meer op de vaste balk, wel de maat waar je op staat. */
.pd-balk b{font-family:var(--display);font-size:.95rem;font-weight:800;color:var(--blauw-tx)}

/* ---- productoverzicht: waar dit type meestal voor dient ---- */
.po-voor{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin:14px 0}
.po-voor > span{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:800}
.po-voor i{
  font-style:normal;font-size:.76rem;font-weight:700;color:var(--fg-2);
  border:1px solid var(--line);border-radius:var(--r-pill);padding:4px 10px;
}
/* "Op maat gemaakt" staat waar vroeger de vanafprijs stond. */
.po-vanaf{font-size:.78rem;font-weight:800}

/* ------------------------------------------ het uitvoeringsvak (offerte) */
.uitvoering{
  margin-top:22px;padding:20px;border-radius:18px;
  border:1px solid var(--line);background:var(--ink-1);
  animation:stijg .4s var(--ease) both;
}
.uitvoering-kop{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.uitvoering-kop b{font-family:var(--display);font-size:1rem;font-weight:800}

/* --------------------------------------------------- tabs in het beheer */
.adm-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.adm-tabs a{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 15px;border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--ink-2);
  font-size:.86rem;font-weight:700;color:var(--fg-2);
  transition:border-color .25s var(--ease),color .25s var(--ease),background .25s var(--ease);
}
.adm-tabs a:hover{border-color:var(--blauw-hel);color:#fff}
.adm-tabs a.on{border-color:var(--blauw-hel);background:rgba(42,51,255,.16);color:#fff}
.adm-tabs a b{
  font-size:.72rem;font-weight:800;padding:1px 7px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.08);
}

/* De eigen woorden van de klant, terug op zijn statuspagina. */
.aanvraag-wens{
  margin:0 0 16px;padding:14px 16px;
  border-left:3px solid var(--blauw-hel);border-radius:0 12px 12px 0;
  background:var(--ink-2);
  font-size:.94rem;line-height:1.65;color:var(--fg-2);
}

/* =======================================================================
   De vijf echte uitvoeringen
   -----------------------------------------------------------------------
   Vijf producten in een raster is lastig: vier naast elkaar laat er eentje
   alleen achter op de tweede rij, en dat oogt als een fout. Daarom drie
   kolommen op een breed scherm (3 + 2 leest als een bewuste keuze) en twee
   op een tablet. De laatste kaart in een oneven rij mag breder worden.
   ======================================================================= */
/* Vijf kaarten in drie kolommen laat er twee over op de tweede rij, en die
   plakten links met een gat ernaast. Een raster kan een halve rij niet
   centreren; flexbox wel. Vandaar geen grid maar wrap met een vaste basis:
   de laatste rij komt vanzelf in het midden, hoeveel producten er ook
   bijkomen. */
.producten{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:16px;grid-template-columns:none;
}
.producten > .prod{flex:1 1 300px;max-width:calc((100% - 32px) / 3)}

@media (max-width:1080px){
  .producten > .prod{max-width:calc((100% - 16px) / 2)}
}
@media (max-width:640px){
  .producten > .prod{max-width:100%;flex-basis:100%}
}



/* De foto's zijn staand (gsm-formaat). Een vierkant uitsnede toont het
   raam en niet de lucht erboven. */
.prod-beeld{aspect-ratio:1/1}
.prod-act{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:auto;padding-top:14px}

/* =======================================================================
   Realisaties per categorie
   ======================================================================= */
.cat-lijst{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:clamp(14px,1.8vw,20px);
}
.cat-kaart{
  display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:20px;overflow:hidden;
  background:var(--ink-2);
  transition:transform .45s var(--ease),border-color .45s var(--ease),box-shadow .45s var(--ease);
}
.cat-kaart:hover{transform:translateY(-5px);border-color:rgba(42,51,255,.45);box-shadow:0 26px 54px -34px #000}

/* Het mozaiek: een grote links, drie kleintjes rechts. */
.cat-beeld{
  position:relative;display:grid;grid-template-columns:1.6fr 1fr;gap:3px;
  height:clamp(200px,24vw,260px);background:var(--ink-3);
}
.cat-groot,.cat-klein{display:grid;overflow:hidden}
.cat-groot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--ease)}
.cat-kaart:hover .cat-groot img{transform:scale(1.05)}
.cat-klein{grid-template-rows:repeat(3,1fr);gap:3px}
.cat-klein img{width:100%;height:100%;object-fit:cover;display:block}
.cat-tel{
  position:absolute;top:12px;left:12px;
  min-width:30px;height:30px;padding:0 9px;border-radius:var(--r-pill);
  display:grid;place-items:center;
  background:rgba(5,6,16,.78);backdrop-filter:blur(6px);
  color:#fff;font-size:.8rem;font-weight:800;
}

.cat-tx{display:flex;flex-direction:column;gap:2px;padding:18px 20px 20px}
.cat-ico{
  display:inline-grid;place-items:center;width:34px;height:34px;margin-bottom:8px;
  border-radius:11px;background:rgba(42,51,255,.16);color:var(--blauw-zt);
}
.cat-tx b{font-family:var(--display);font-size:1.02rem;font-weight:800}
.cat-tx i{font-style:normal;font-size:.84rem;color:var(--muted)}
.cat-tx em{font-style:normal;font-size:.82rem;font-weight:800;color:var(--blauw-tx);margin-top:9px}

/* Het rijtje andere categorieen onderaan een galerij. */
.cat-rij{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:12px}
.cat-mini{
  display:flex;align-items:center;gap:11px;padding:10px;
  border:1px solid var(--line);border-radius:14px;background:var(--ink-2);
  transition:border-color .3s var(--ease),transform .3s var(--ease);
}
.cat-mini:hover{border-color:var(--blauw-hel);transform:translateY(-2px)}
.cat-mini img{width:52px;height:66px;flex:none;object-fit:cover;border-radius:9px}
.cat-mini b{display:block;font-size:.86rem;font-weight:700;line-height:1.25}
.cat-mini i{display:block;font-style:normal;font-size:.76rem;color:var(--muted)}

/* ----------------------------------------------- de galerij per categorie */
.werk-kop{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;flex-wrap:wrap;margin-bottom:clamp(22px,3vw,34px);
}
.werk-kop .eyebrow{display:flex;align-items:center;gap:8px}
.werk-kop-act{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.werk-tel{font-size:.84rem;color:var(--muted);font-weight:700}

/* Een metselwerkraster: staande foto's, wisselende hoogtes, geen gaten. */
.werkraster{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));
  gap:clamp(10px,1.2vw,16px);
}
.werkfoto{
  position:relative;display:block;overflow:hidden;
  border-radius:16px;border:1px solid var(--line);background:var(--ink-2);
  aspect-ratio:3/4;
  transition:transform .45s var(--ease),border-color .45s var(--ease)}
.werkfoto img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--ease)}
.werkfoto:hover{transform:translateY(-4px);border-color:rgba(42,51,255,.5)}
.werkfoto:hover img{transform:scale(1.06)}
/* Elke vierde foto twee rijen hoog: dat breekt het raster open zonder dat
   het rommelig wordt. */
.werkfoto:nth-child(7n+3){aspect-ratio:3/5}
.werkfoto-tx{
  position:absolute;inset:auto 0 0 0;padding:26px 13px 11px;
  font-size:.78rem;font-weight:700;color:#fff;
  background:linear-gradient(180deg,transparent,rgba(3,3,10,.86));
  opacity:0;transition:opacity .4s var(--ease);
}
.werkfoto:hover .werkfoto-tx{opacity:1}

@media (max-width:560px){
  .werkraster{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .werkfoto{border-radius:12px}
  .werkfoto:nth-child(7n+3){aspect-ratio:3/4}
}

/* ------------------------------------------------- productoverzicht extra */
.po-tel{
  position:absolute;top:14px;right:14px;
  padding:5px 11px;border-radius:var(--r-pill);
  background:rgba(5,6,16,.76);backdrop-filter:blur(6px);
  color:#fff;font-size:.74rem;font-weight:800;
}
.po-vanaf{display:inline-flex;align-items:center;gap:7px}
.po-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px 0 0}
.po-strip img{width:100%;height:88px;object-fit:cover;display:block;border-radius:8px;transition:opacity .3s var(--ease)}
.po-strip a:hover img{opacity:.75}
.po-werk{
  display:block;margin-top:11px;text-align:center;
  font-size:.82rem;font-weight:800;color:var(--blauw-tx);
}

/* -------------------------------------------------- productpagina extra */
.pd-meerwerk{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin-top:14px;padding:12px 16px;
  border:1px solid var(--line);border-radius:13px;background:var(--ink-2);
  font-size:.86rem;font-weight:700;color:var(--blauw-tx);
  transition:border-color .3s var(--ease),transform .3s var(--ease);
}
.pd-meerwerk:hover{border-color:var(--blauw-hel);transform:translateY(-2px)}
.pd-groot{position:relative;min-height:220px}
.pd-geenfoto{
  position:absolute;inset:0;display:grid;place-items:center;
  color:var(--muted);font-size:.9rem;
}

/* =======================================================================
   Nasleep van de omslag: dingen die pas scheefliepen toen de echte
   productnamen erin stonden.
   ======================================================================= */

/* "Plissé (vouw) vliegendeuren" is twee regels lang, "Voor dakramen" één.
   Als de kaarten niet als kolom uitgelijnd staan, schuift de ene tekst
   over de andere heen. Een flexkolom met een eigen ruimte lost dat op,
   ongeacht hoe lang een productnaam wordt. */
.type{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:100%}
.type .type-ico{display:grid;flex:none}
.type b{margin-bottom:2px;line-height:1.25}
.type > span:not(.type-ico){margin-top:auto;padding-top:4px}

/* Hetzelfde in het zijpaneel: het bolletje met het aantal mag nooit over
   de productnaam schuiven, ook niet bij een lange naam. */
.mand-regel{align-items:center}
.mand-nr{align-self:flex-start;margin-top:2px}
.mand-body b{line-height:1.3;overflow-wrap:anywhere}
.mand-body small{overflow-wrap:anywhere}

/* Het zijpaneel scrolt mee, maar mag nooit langer worden dan het scherm:
   anders zie je de onderste helft nooit. */
.zij{max-height:calc(100svh - var(--nav-h) - 32px);overflow-y:auto;overscroll-behavior:contain}
.zij::-webkit-scrollbar{width:7px}
.zij::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:7px}

/* De atelierfoto's: eb_werkbeeld levert soms een picture, soms een losse
   img. Allebei moeten ze het kader vullen. */
.atelier-foto picture{display:block;width:100%;height:100%}
.atelier-foto img{aspect-ratio:3/4}
.cat-groot picture,.cat-klein picture,.werkfoto picture,.prod-beeld picture,.po-beeld picture{
  display:block;width:100%;height:100%;
}
.cat-klein picture img{height:100%}
.po-strip picture{display:block}
.po-strip picture img{height:88px}
.cat-mini picture img{width:52px;height:66px;object-fit:cover;border-radius:9px}

/* =======================================================================
   De atelierfoto's: één in de schijnwerper, de rest als strookje
   -----------------------------------------------------------------------
   Werkt op radioknoppen. Geen javascript, dus het werkt ook als een script
   niet laadt, en de browser onthoudt zelf welke er aanstaat.
   ======================================================================= */
.spotlight{position:relative;display:flex;flex-direction:column;gap:12px}
/* De radioknoppen staan bovenaan de spotlight, maar een verborgen invoer
   die de browser toch focust, laat de pagina naar dat punt springen. Door
   ze op de plek van hun eigen strookje te leggen blijft de pagina staan
   waar hij stond. Vandaar top:100% en niet display:none: dat laatste zou
   de radio's onbedienbaar maken en de hele koppeling breken. */
.spot-radio{
  position:absolute;left:0;top:100%;width:1px;height:1px;
  opacity:0;pointer-events:none;margin:0;
}

.spot-groot{
  position:relative;overflow:hidden;
  border-radius:22px;border:1px solid var(--line);background:var(--ink-2);
  aspect-ratio:4/5;
  box-shadow:0 34px 70px -40px #000;
}
.spot-beeld{
  position:absolute;inset:0;margin:0;
  opacity:0;transform:scale(1.03);
  transition:opacity .55s var(--ease),transform .8s var(--ease);
}
.spot-beeld picture,.spot-beeld img{display:block;width:100%;height:100%;object-fit:cover}
.spot-beeld figcaption{
  position:absolute;inset:auto 0 0 0;padding:38px 18px 16px;
  font-size:.86rem;font-weight:700;color:#fff;
  background:linear-gradient(180deg,transparent,rgba(3,3,10,.86));
}
.spot-merk{
  position:absolute;top:14px;left:14px;z-index:2;
  padding:6px 13px;border-radius:var(--r-pill);
  background:rgba(5,6,16,.7);backdrop-filter:blur(8px);
  color:#fff;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
}

.spot-strip{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:10px}
.spot-mini{
  position:relative;display:block;overflow:hidden;cursor:pointer;
  border-radius:13px;border:1px solid var(--line);background:var(--ink-3);
  aspect-ratio:1/1;
  transition:border-color .3s var(--ease),transform .3s var(--ease);
}
.spot-mini img{width:100%;height:100%;object-fit:cover;display:block;opacity:.62;transition:opacity .35s var(--ease)}
.spot-mini:hover{transform:translateY(-3px)}
.spot-mini:hover img{opacity:.9}

/* De koppeling: staat radio n aan, dan verschijnt beeld n en licht het
   bijhorende strookje op. Voor twaalf foto's is dat twaalf regels; met een
   lus in de bouwstap zou het korter kunnen, maar dan is het minder
   leesbaar voor wie hier over een jaar nog iets aan wil veranderen. */
.spot-radio:nth-of-type(1):checked  ~ .spot-groot .spot-beeld[data-spot="0"],
.spot-radio:nth-of-type(2):checked  ~ .spot-groot .spot-beeld[data-spot="1"],
.spot-radio:nth-of-type(3):checked  ~ .spot-groot .spot-beeld[data-spot="2"],
.spot-radio:nth-of-type(4):checked  ~ .spot-groot .spot-beeld[data-spot="3"],
.spot-radio:nth-of-type(5):checked  ~ .spot-groot .spot-beeld[data-spot="4"],
.spot-radio:nth-of-type(6):checked  ~ .spot-groot .spot-beeld[data-spot="5"],
.spot-radio:nth-of-type(7):checked  ~ .spot-groot .spot-beeld[data-spot="6"],
.spot-radio:nth-of-type(8):checked  ~ .spot-groot .spot-beeld[data-spot="7"],
.spot-radio:nth-of-type(9):checked  ~ .spot-groot .spot-beeld[data-spot="8"],
.spot-radio:nth-of-type(10):checked ~ .spot-groot .spot-beeld[data-spot="9"],
.spot-radio:nth-of-type(11):checked ~ .spot-groot .spot-beeld[data-spot="10"],
.spot-radio:nth-of-type(12):checked ~ .spot-groot .spot-beeld[data-spot="11"]{
  opacity:1;transform:none;
}

.spot-radio:nth-of-type(1):checked  ~ .spot-strip .spot-mini[data-spot="0"],
.spot-radio:nth-of-type(2):checked  ~ .spot-strip .spot-mini[data-spot="1"],
.spot-radio:nth-of-type(3):checked  ~ .spot-strip .spot-mini[data-spot="2"],
.spot-radio:nth-of-type(4):checked  ~ .spot-strip .spot-mini[data-spot="3"],
.spot-radio:nth-of-type(5):checked  ~ .spot-strip .spot-mini[data-spot="4"],
.spot-radio:nth-of-type(6):checked  ~ .spot-strip .spot-mini[data-spot="5"],
.spot-radio:nth-of-type(7):checked  ~ .spot-strip .spot-mini[data-spot="6"],
.spot-radio:nth-of-type(8):checked  ~ .spot-strip .spot-mini[data-spot="7"],
.spot-radio:nth-of-type(9):checked  ~ .spot-strip .spot-mini[data-spot="8"],
.spot-radio:nth-of-type(10):checked ~ .spot-strip .spot-mini[data-spot="9"],
.spot-radio:nth-of-type(11):checked ~ .spot-strip .spot-mini[data-spot="10"],
.spot-radio:nth-of-type(12):checked ~ .spot-strip .spot-mini[data-spot="11"]{
  border-color:var(--blauw-hel);box-shadow:0 0 0 1px var(--blauw-hel);
}
.spot-radio:checked ~ .spot-strip .spot-mini[data-spot] img{opacity:.62}
.spot-radio:nth-of-type(1):checked  ~ .spot-strip .spot-mini[data-spot="0"] img,
.spot-radio:nth-of-type(2):checked  ~ .spot-strip .spot-mini[data-spot="1"] img,
.spot-radio:nth-of-type(3):checked  ~ .spot-strip .spot-mini[data-spot="2"] img,
.spot-radio:nth-of-type(4):checked  ~ .spot-strip .spot-mini[data-spot="3"] img,
.spot-radio:nth-of-type(5):checked  ~ .spot-strip .spot-mini[data-spot="4"] img,
.spot-radio:nth-of-type(6):checked  ~ .spot-strip .spot-mini[data-spot="5"] img,
.spot-radio:nth-of-type(7):checked  ~ .spot-strip .spot-mini[data-spot="6"] img,
.spot-radio:nth-of-type(8):checked  ~ .spot-strip .spot-mini[data-spot="7"] img,
.spot-radio:nth-of-type(9):checked  ~ .spot-strip .spot-mini[data-spot="8"] img,
.spot-radio:nth-of-type(10):checked ~ .spot-strip .spot-mini[data-spot="9"] img,
.spot-radio:nth-of-type(11):checked ~ .spot-strip .spot-mini[data-spot="10"] img,
.spot-radio:nth-of-type(12):checked ~ .spot-strip .spot-mini[data-spot="11"] img{opacity:1}

/* Toetsenbord: wie met tab door de strookjes gaat, moet zien waar hij is. */
.spot-radio:focus-visible ~ .spot-strip .spot-mini{outline:2px solid var(--blauw-tx);outline-offset:3px}

@media (max-width:980px){
  .spot-groot{aspect-ratio:16/11}
}
@media (max-width:520px){
  .spot-strip{grid-auto-flow:row;grid-template-columns:repeat(4,1fr);grid-auto-columns:auto}
}

/* =======================================================================
   Geen gaasmotief meer over de foto's
   -----------------------------------------------------------------------
   Het rasterpatroon was bedoeld als knipoog naar het product, maar over
   een echte foto ziet het eruit alsof het beeld slecht gecomprimeerd is.
   Op vlakken en verlopen mag het blijven; over foto's niet.
   ======================================================================= */
.prod-beeld .gaas,
.po-beeld .gaas,
.werkfoto .gaas,
.spot-groot .gaas,
.cat-beeld .gaas,
.atelier-foto .gaas{display:none}

/* De donkere waas over de productfoto's mag ook weg: de foto's zijn van
   de zaak zelf en mogen gewoon te zien zijn. */
.prod-beeld img{filter:none}
.prod-beeld::after{opacity:.28}

/* =======================================================================
   Het uitstapvenster
   -----------------------------------------------------------------------
   Verschijnt alleen wanneer iemand wegklikt met een half ingevuld
   formulier. Bewust rustig: geen tellertje, geen "wacht!", geen korting.
   Een simpele vraag of we mogen terugbellen.
   ======================================================================= */
.uitstap{
  position:fixed;inset:0;z-index:400;
  display:grid;place-items:center;padding:20px;
  background:rgba(4,4,12,.72);backdrop-filter:blur(6px);
  opacity:0;transition:opacity .3s var(--ease);
}
.uitstap.open{opacity:1}
.uitstap-kaart{
  position:relative;width:min(100%,440px);
  padding:clamp(24px,4vw,34px);border-radius:24px;
  border:1px solid var(--line-2);
  background:linear-gradient(168deg,var(--ink-2),var(--ink-1));
  box-shadow:0 50px 100px -40px #000;
  transform:translateY(14px) scale(.97);
  transition:transform .4s var(--spring);
}
.uitstap.open .uitstap-kaart{transform:none}
.uitstap-kaart h2{font-family:var(--display);font-size:clamp(1.25rem,3.4vw,1.55rem);font-weight:800;margin-bottom:10px;padding-right:30px}
.uitstap-kaart > p{font-size:.92rem;line-height:1.65;color:var(--fg-2);margin-bottom:20px}
.uitstap-x{
  position:absolute;top:14px;right:14px;width:34px;height:34px;
  display:grid;place-items:center;border-radius:50%;cursor:pointer;
  border:1px solid var(--line-2);background:transparent;color:var(--muted);
  transition:color .25s,border-color .25s;
}
.uitstap-x:hover{color:var(--fg);border-color:var(--fg-2)}
.uitstap-klein{margin:16px 0 0;font-size:.76rem;line-height:1.6;color:var(--muted)}
.uitstap-klein a{color:var(--blauw-tx);font-weight:700}
.uitstap-ok{display:grid;justify-items:center;gap:4px;text-align:center;padding:18px 0 6px}
.uitstap-ok svg{color:var(--ok);margin-bottom:6px}
.uitstap-ok b{font-size:1rem;font-weight:800}
.uitstap-ok span{font-size:.85rem;color:var(--muted)}
.simpel-klein{margin:14px 0 0;font-size:.76rem;line-height:1.6;color:var(--muted);text-align:center}

/* =======================================================================
   De aankondiging op de homepage
   -----------------------------------------------------------------------
   Bedoeld voor het bouwverlof: de weken waarin half Vlaanderen dicht is en
   E&B net wel werkt. Geen kortingsvenster met een tellertje, maar een
   mededeling die eruitziet als een mededeling.
   ======================================================================= */
.mld{
  position:fixed;inset:0;z-index:420;
  display:grid;place-items:center;padding:20px;
  background:rgba(4,4,12,.74);backdrop-filter:blur(7px);
  opacity:0;transition:opacity .34s var(--ease);
}
.mld.open{opacity:1}
.mld-kaart{
  position:relative;width:min(100%,540px);overflow:hidden;
  padding:clamp(26px,4.4vw,40px);border-radius:26px;
  border:1px solid var(--line-2);
  background:linear-gradient(168deg,var(--ink-2),var(--ink-1));
  box-shadow:0 56px 110px -44px #000;
  transform:translateY(18px) scale(.965);
  transition:transform .46s var(--spring);
}
.mld.open .mld-kaart{transform:none}

/* Een gekleurde gloed bovenaan, in de kleur die in het beheer gekozen is. */
.mld-kaart::before{
  content:"";position:absolute;inset:-40% 0 auto 0;height:70%;pointer-events:none;
  background:radial-gradient(60% 70% at 50% 0%,rgba(42,51,255,.34),transparent 70%);
}
.mld-goud::before{background:radial-gradient(60% 70% at 50% 0%,rgba(240,180,41,.3),transparent 70%)}
.mld-kaart > *{position:relative}

.mld-x{
  position:absolute;top:15px;right:15px;width:34px;height:34px;
  display:grid;place-items:center;border-radius:50%;cursor:pointer;
  border:1px solid var(--line-2);background:rgba(0,0,0,.25);color:var(--muted);
  transition:color .25s,border-color .25s;
}
.mld-x:hover{color:var(--fg);border-color:var(--fg-2)}

.mld-lint{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:14px;
  padding:6px 14px;border-radius:var(--r-pill);
  border:1px solid rgba(61,220,132,.4);background:rgba(61,220,132,.12);
  color:var(--ok);font-size:.74rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
}
.mld-lint .dot{width:7px;height:7px;border-radius:50%;background:var(--ok);animation:adem 2.2s infinite}

.mld-kaart h2{
  font-family:var(--display);font-size:clamp(1.4rem,4vw,1.95rem);
  font-weight:800;letter-spacing:-.02em;line-height:1.12;margin-bottom:12px;padding-right:34px;
}
.mld-kaart p{font-size:.95rem;line-height:1.7;color:var(--fg-2);margin:0 0 12px}

.mld-punten{display:grid;gap:10px;margin:20px 0 24px;padding:16px 0;border-block:1px solid var(--line)}
.mld-punt{display:flex;gap:11px;align-items:flex-start}
.mld-punt b{display:block;font-size:.9rem;font-weight:700}
.mld-punt i{display:block;font-style:normal;font-size:.8rem;color:var(--muted);line-height:1.45}

.mld-knoppen{display:flex;gap:11px;flex-wrap:wrap}
.mld-knoppen .btn{flex:1;min-width:150px;justify-content:center}

@media (max-width:520px){
  .mld{padding:14px;align-items:flex-end}
  .mld-kaart{border-radius:22px;padding:24px 20px 22px}
  .mld-punten{margin:16px 0 20px}
  .mld-knoppen .btn{flex:1 1 100%}
}

/* =======================================================================
   Leesbaarheid in het lichte thema
   -----------------------------------------------------------------------
   Een paar plekken hielden hun donkere tekstkleur terwijl de achtergrond
   licht werd, of andersom. Op een scherm in de zon leest dat niet.
   ======================================================================= */
html[data-thema="licht"]{
  /* De hero staat op een donkere foto: daar blijft alles wit. */
}
html[data-thema="licht"] .hero .pill-glas{
  background:rgba(12,14,28,.62);border-color:rgba(255,255,255,.28);color:#fff;
}
html[data-thema="licht"] .hero .pill-glas span,
html[data-thema="licht"] .hero .pill-glas b{color:#fff}
html[data-thema="licht"] .hero .btn-rand{
  background:rgba(12,14,28,.5);border-color:rgba(255,255,255,.4);color:#fff;
}
html[data-thema="licht"] .hero .btn-rand:hover{background:rgba(12,14,28,.68)}
html[data-thema="licht"] .hero-pijl{color:#fff;border-color:rgba(255,255,255,.35)}

/* De gekozen tab van de moduskeuze: witte letters op lichtblauw las niet. */
html[data-thema="licht"] .modus-knop.aan{
  background:rgba(5,12,232,.1);border-color:var(--blauw-hel);color:var(--blauw-tx);
}
html[data-thema="licht"] .modus-knop.aan b{color:var(--blauw-tx)}
html[data-thema="licht"] .modus-knop.aan i{color:var(--fg-2)}

/* De noot onder de openingsuren stond in een lichte doos met lichte tekst. */
.uren-noot{
  margin-top:14px;padding:13px 15px;border-radius:var(--r-sm);
  background:rgba(42,51,255,.08);border:1px solid var(--line);
  font-size:.86rem;line-height:1.6;color:var(--fg-2);
}
.uren-noot b{color:var(--fg)}
html[data-thema="licht"] .uren-noot{background:rgba(5,12,232,.06);color:var(--fg-2)}

/* Alles wat als "zacht" bedoeld was maar op licht te zacht werd. */
html[data-thema="licht"] .muted{color:#5a6072}
html[data-thema="licht"] .zij-prijsloos,
html[data-thema="licht"] .pk-tip,
html[data-thema="licht"] .pd-belofte{color:var(--fg-2)}
html[data-thema="licht"] .pd-belofte span{color:var(--fg-2)}
html[data-thema="licht"] .mld-kaart p,
html[data-thema="licht"] .uitstap-kaart > p{color:var(--fg-2)}

/* De vaste beloftebalk bovenaan. */
html[data-thema="licht"] .belofte-item{color:var(--fg-2)}
html[data-thema="licht"] .belofte-item b{color:var(--fg)}

/* =======================================================================
   Bewegende iconen in het hoofdmenu
   -----------------------------------------------------------------------
   Klein en rustig: het icoon wipt even op bij het passeren. Genoeg om het
   menu levendig te maken, niet genoeg om af te leiden.
   ======================================================================= */
.nav-links a{display:inline-flex;align-items:center;gap:7px}
.nav-ico{
  display:inline-grid;place-items:center;width:17px;height:17px;flex:none;
  color:var(--blauw-tx);opacity:.72;
  transition:transform .4s var(--spring),opacity .3s var(--ease);
}
.nav-links a:hover .nav-ico{opacity:1;transform:translateY(-2px) scale(1.12)}
.nav-links a.on .nav-ico{opacity:1}
/* Het icoon van de actieve pagina ademt zachtjes mee. */
.nav-links a.on .nav-ico{animation:zweef 3.6s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){
  .nav-links a.on .nav-ico{animation:none}
  .nav-links a:hover .nav-ico{transform:none}
}
@media (max-width:1180px){
  /* Bij weinig ruimte is de tekst belangrijker dan het plaatje. */
  .nav-ico{display:none}
}

/* =======================================================================
   De gaaskaarten: een aanrader aanduiden
   ======================================================================= */
.gaaskaart{position:relative}
.gaas-badge{
  position:absolute;top:12px;right:12px;z-index:2;
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 12px;border-radius:var(--r-pill);
  background:linear-gradient(150deg,var(--blauw-hel),var(--blauw));
  color:#fff;font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  box-shadow:0 10px 24px -12px rgba(5,12,232,.9);
}
.gaas-badge svg{flex:none}

/* De meterbalk: de vulling begint netjes op nul en niet met een randje. */
.meter-spoor{background:var(--ink-4);box-shadow:inset 0 0 0 1px var(--line)}
.meter-spoor i{transition:width 1.1s var(--ease) .15s}

/* De sitemap onderaan: één rij links, wat breekt op een gsm. */
.foot-sitemap{
  display:flex;flex-wrap:wrap;gap:8px 20px;
  margin:26px 0 0;padding:20px 0 0;border-top:1px solid var(--line);
  font-size:.85rem;
}
.foot-sitemap a{color:var(--fg-2);transition:color .25s var(--ease)}
.foot-sitemap a:hover{color:var(--blauw-tx)}

/* =======================================================================
   De juridische pagina's
   -----------------------------------------------------------------------
   Voorwaarden worden zelden gelezen, en meestal omdat ze eruitzien alsof
   ze niet gelezen willen worden. Vandaar een leesbare regelbreedte,
   ademruimte tussen de artikels en een inhoudsopgave die meescrollt.
   ======================================================================= */
.jur{padding-top:calc(var(--nav-h) + 30px)}
.jur-grid{
  display:grid;grid-template-columns:minmax(0,1fr) 240px;
  gap:clamp(28px,4vw,56px);align-items:start;
}
.jur-tekst{max-width:72ch}
.jur-tekst .lead{margin-bottom:6px}
.jur-datum{font-size:.82rem;color:var(--muted);margin-bottom:34px}

.jur-sectie{margin-bottom:32px}
.jur-sectie h2{
  font-family:var(--display);font-size:1.12rem;font-weight:800;
  letter-spacing:-.01em;margin-bottom:10px;
}
.jur-sectie p{font-size:.96rem;line-height:1.75;color:var(--fg-2);margin:0 0 12px}
.jur-sectie p:last-child{margin-bottom:0}

.jur-voet{
  margin-top:44px;padding-top:24px;border-top:1px solid var(--line);
  font-size:.9rem;line-height:1.7;
}
.jur-voet a{color:var(--blauw-tx);font-weight:700}

.jur-zij{
  position:sticky;top:calc(var(--nav-h) + 16px);
  display:grid;gap:2px;padding:18px;
  border:1px solid var(--line);border-radius:18px;background:var(--ink-2);
}
.jur-zij b{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.jur-zij a{
  padding:9px 11px;border-radius:10px;font-size:.88rem;color:var(--fg-2);
  transition:background .25s var(--ease),color .25s var(--ease);
}
.jur-zij a:hover{background:var(--ink-3);color:var(--fg)}
.jur-zij a.aan{background:rgba(42,51,255,.14);color:var(--blauw-tx);font-weight:700}

.jur-kaarten{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:14px}
.jur-kaart{
  display:flex;flex-direction:column;gap:5px;padding:22px;
  border:1px solid var(--line);border-radius:18px;background:var(--ink-2);
  transition:transform .4s var(--ease),border-color .4s var(--ease);
}
.jur-kaart:hover{transform:translateY(-4px);border-color:var(--blauw-hel)}
.jur-kaart b{font-family:var(--display);font-size:1.04rem;font-weight:800}
.jur-kaart i{font-style:normal;font-size:.86rem;color:var(--muted);line-height:1.55}
.jur-kaart em{font-style:normal;font-size:.82rem;font-weight:800;color:var(--blauw-tx);margin-top:8px}

@media (max-width:900px){
  .jur-grid{grid-template-columns:1fr}
  .jur-zij{position:static;order:-1}
}

/* =======================================================================
   Het werkgebied
   ======================================================================= */
.wg{padding-top:calc(var(--nav-h) + 30px)}
.wg-band{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));
  gap:1px;margin-bottom:clamp(30px,4vw,48px);
  background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden;
}
.wg-band-item{padding:18px 20px;background:var(--ink-1);text-align:center}
.wg-band-item b{display:block;font-family:var(--display);font-size:1.24rem;font-weight:800;letter-spacing:-.02em}
.wg-band-item span{display:block;font-size:.8rem;color:var(--muted);margin-top:3px}

.wg-streek{margin-bottom:clamp(28px,4vw,44px)}
.wg-streek-kop{max-width:66ch;margin-bottom:18px}
.wg-streek-kop h2{font-family:var(--display);font-size:clamp(1.2rem,2.6vw,1.5rem);font-weight:800;margin-bottom:6px}
.wg-streek-kop p{font-size:.92rem;color:var(--fg-2);line-height:1.65;margin:0}

.wg-lijst{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));gap:10px}
.wg-gemeente{
  padding:13px 15px;border:1px solid var(--line);border-radius:13px;background:var(--ink-2);
  transition:border-color .3s var(--ease),transform .3s var(--ease);
}
.wg-gemeente:hover{border-color:var(--blauw-hel);transform:translateY(-2px)}
.wg-gemeente b{display:block;font-size:.94rem;font-weight:700}
.wg-gemeente i{display:block;font-style:normal;font-size:.78rem;color:var(--muted);margin-top:2px;font-variant-numeric:tabular-nums}

/* =======================================================================
   De blog
   ======================================================================= */
.blog-artikel{padding-top:calc(var(--nav-h) + 30px)}
.blog-kop{max-width:72ch;margin-bottom:26px}
.blog-meta{display:flex;gap:8px;align-items:center;font-size:.82rem;color:var(--muted);margin-bottom:12px}
.blog-kop h1{
  font-family:var(--display);font-size:clamp(1.7rem,4.4vw,2.7rem);
  font-weight:800;letter-spacing:-.025em;line-height:1.12;margin-bottom:12px;
}
.blog-beeld{margin:0 0 30px;border-radius:20px;overflow:hidden;border:1px solid var(--line)}
.blog-beeld img{width:100%;height:auto;display:block}

.blog-tekst{max-width:72ch;font-size:1.02rem;line-height:1.8;color:var(--fg-2)}
.blog-tekst p{margin:0 0 1.15em}
.blog-tekst h2{
  font-family:var(--display);font-size:1.32rem;font-weight:800;color:var(--fg);
  letter-spacing:-.015em;margin:1.8em 0 .5em;
}
.blog-tekst h3{font-family:var(--display);font-size:1.1rem;font-weight:800;color:var(--fg);margin:1.5em 0 .4em}
.blog-tekst ul,.blog-tekst ol{margin:0 0 1.15em;padding-left:1.3em}
.blog-tekst li{margin-bottom:.45em}
.blog-tekst a{color:var(--blauw-tx);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.blog-tekst img{max-width:100%;height:auto;border-radius:14px;margin:1.4em 0}
.blog-tekst blockquote{
  margin:1.5em 0;padding:14px 20px;border-left:3px solid var(--blauw-hel);
  background:var(--ink-2);border-radius:0 12px 12px 0;font-style:italic;
}
.blog-tekst table{width:100%;margin:1.4em 0;font-size:.94rem}
.blog-tekst th,.blog-tekst td{padding:9px 10px;border-bottom:1px solid var(--line);text-align:left}
.blog-tekst hr{border:0;border-top:1px solid var(--line);margin:2em 0}

.blog-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.blog-tags span{
  padding:5px 13px;border-radius:var(--r-pill);border:1px solid var(--line);
  font-size:.78rem;color:var(--muted);
}

.blog-lijst{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr));gap:16px}
.blog-kaart{
  display:flex;flex-direction:column;gap:5px;padding:20px;overflow:hidden;
  border:1px solid var(--line);border-radius:18px;background:var(--ink-2);
  transition:transform .4s var(--ease),border-color .4s var(--ease);
}
.blog-kaart:hover{transform:translateY(-4px);border-color:var(--blauw-hel)}
.blog-kaart-beeld{display:block;margin:-20px -20px 14px;aspect-ratio:16/9;overflow:hidden;background:var(--ink-3)}
.blog-kaart-beeld img{width:100%;height:100%;object-fit:cover;display:block}
.blog-kaart-datum{font-size:.76rem;color:var(--muted)}
.blog-kaart b{font-family:var(--display);font-size:1.04rem;font-weight:800;line-height:1.3}
.blog-kaart i{font-style:normal;font-size:.86rem;color:var(--muted);line-height:1.6}
.blog-kaart em{font-style:normal;font-size:.82rem;font-weight:800;color:var(--blauw-tx);margin-top:auto;padding-top:10px}

/* =======================================================================
   De fasebanner op een offerte
   -----------------------------------------------------------------------
   Een voorlopige offerte moet er anders uitzien dan een definitieve, en
   dat verschil hoort bovenaan te staan. Iemand die denkt dat hij een
   bindende prijs tekent terwijl er nog niets is opgemeten, is een discussie
   die je achteraf niet meer wint.
   ======================================================================= */
.off-fase{
  display:flex;gap:16px;align-items:flex-start;
  margin-bottom:26px;padding:20px 22px;border-radius:18px;
  border:1px solid rgba(240,180,41,.42);
  background:linear-gradient(150deg,rgba(240,180,41,.14),rgba(240,180,41,.05));
}
.off-fase-def{
  border-color:rgba(61,220,132,.4);
  background:linear-gradient(150deg,rgba(61,220,132,.13),rgba(61,220,132,.04));
}
.off-fase-lint{
  flex:none;padding:6px 13px;border-radius:var(--r-pill);
  background:rgba(0,0,0,.28);color:var(--fg);
  font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
}
.off-fase b{display:block;font-size:1.02rem;font-weight:800;margin-bottom:6px}
.off-fase p{margin:0 0 8px;font-size:.9rem;line-height:1.65;color:var(--fg-2)}
.off-fase p:last-child{margin-bottom:0}
.off-fase-klein{font-size:.82rem !important;color:var(--muted) !important}

@media (max-width:600px){
  .off-fase{flex-direction:column;gap:10px;padding:16px 17px}
}

/* =======================================================================
   Het offerteformulier op de homepage
   ======================================================================= */
.thuis-grid{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(26px,4vw,54px);align-items:start;
}
.thuis-tx .lead{margin-bottom:24px}
.thuis-punten{display:grid;gap:13px;margin-bottom:24px}
.thuis-punt{display:flex;gap:11px;align-items:flex-start}
.thuis-punt b{display:block;font-size:.94rem;font-weight:700}
.thuis-punt i{display:block;font-style:normal;font-size:.85rem;color:var(--muted);line-height:1.55}
.thuis-uitgebreid{font-size:.88rem}

.thuis-vak{
  padding:clamp(22px,3vw,32px);border-radius:22px;
  border:1px solid var(--line);
  background:linear-gradient(168deg,var(--ink-2),var(--ink-1));
  box-shadow:0 30px 64px -40px #000;
}
.thuis-ok{
  display:grid;justify-items:center;gap:6px;text-align:center;padding:26px 10px;
}
.thuis-ok svg{color:var(--ok);margin-bottom:8px}
.thuis-ok b{font-family:var(--display);font-size:1.14rem;font-weight:800}
.thuis-ok span{font-size:.9rem;color:var(--muted);line-height:1.6;max-width:34ch}

@media (max-width:900px){
  .thuis-grid{grid-template-columns:1fr}
}

/* =======================================================================
   Realisaties op de homepage: een spotlight per uitvoering
   -----------------------------------------------------------------------
   Dezelfde opbouw als bij het atelier: één foto groot, de rest als
   strookje eronder, klikken wisselt. Per categorie een eigen blok, met een
   knop naar de volledige galerij.
   ======================================================================= */
.cat-blokken{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(14px,1.8vw,20px);
}
.cat-blok{
  flex:1 1 300px;max-width:calc((100% - 40px) / 3);
  display:flex;flex-direction:column;gap:14px;
  padding:14px;border:1px solid var(--line);border-radius:20px;
  background:var(--ink-2);
  transition:border-color .4s var(--ease),transform .4s var(--ease);
}
.cat-blok:hover{border-color:rgba(42,51,255,.4);transform:translateY(-3px)}

/* De spotlight binnen zo'n blok is compacter dan die van het atelier. */
.cat-blok .spot-groot{aspect-ratio:4/3;border-radius:15px}
.cat-blok .spot-strip{gap:7px}
.cat-blok .spot-mini{border-radius:10px}
.cat-blok .spot-merk{top:10px;left:10px;padding:5px 11px;font-size:.68rem}

.cat-blok-tx{display:flex;flex-direction:column;gap:3px;padding:2px 6px 6px}
.cat-blok-tx b{font-family:var(--display);font-size:1.02rem;font-weight:800}
.cat-blok-tx i{font-style:normal;font-size:.84rem;color:var(--muted)}
.cat-blok-tx .btn{margin-top:11px;justify-content:center}
.cat-blok-tx .cat-ico{margin-bottom:6px}

@media (max-width:1080px){
  .cat-blok{max-width:calc((100% - 20px) / 2)}
}
@media (max-width:620px){
  .cat-blok{max-width:100%;flex-basis:100%}
}

/* =======================================================================
   Iconen in het mobiele menu
   ======================================================================= */
.mob a{display:flex;align-items:center;gap:12px}
.mob-ico{
  display:inline-grid;place-items:center;width:32px;height:32px;flex:none;
  border-radius:10px;background:rgba(42,51,255,.14);color:var(--blauw-tx);
  transition:background .25s var(--ease),transform .3s var(--spring);
}
.mob a:active .mob-ico{transform:scale(.94)}
.mob a:hover .mob-ico{background:rgba(42,51,255,.24)}
.mob-offerte{font-weight:800;color:var(--blauw-tx)}
.mob-offerte .mob-ico{background:var(--blauw);color:#fff}
html[data-thema="licht"] .mob-ico{background:rgba(5,12,232,.1)}

/* De kop van de nieuwssectie: titel links, knop rechts. */
.nieuws-kop{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;flex-wrap:wrap;max-width:none;
}
.nieuws-kop > div{max-width:64ch}
.nieuws-alles{flex:none}
@media (max-width:640px){
  .nieuws-kop{align-items:flex-start}
}

/* Het sleepvak is nu ook toetsenbordbereikbaar (tabindex), dus het heeft
   een zichtbare focus nodig. */
.drop:focus-visible{outline:2px solid var(--blauw-hel);outline-offset:3px;border-color:var(--blauw-hel)}
/* Zit het vol, dan mag het rustiger worden: nog een foto toevoegen kan niet. */
.drop.vol{opacity:.55}
.drop.vol b::after{content:" (maximum bereikt)";font-weight:500;color:var(--muted)}

/* Een foto die nog verkleind wordt. Zonder dit lijkt er niets te gebeuren
   als iemand vier foto's tegelijk kiest op een oudere telefoon. */
.foto-wacht{
  background:var(--ink-2);border-style:dashed;
  position:relative;overflow:hidden;
}
.foto-wacht::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.14) 50%,transparent 80%);
  animation:fotoglans 1.1s linear infinite;
}
@keyframes fotoglans{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){.foto-wacht::after{animation:none}}

/* =======================================================================
   De offertepagina van de klant op een telefoon
   -----------------------------------------------------------------------
   Deze pagina is het enige wat een klant van ons systeem te zien krijgt,
   en de helft bekijkt hem op zijn gsm terwijl hij in de zetel zit. Vier
   kolommen naast elkaar werkt daar niet: de kopjes plakken aan elkaar tot
   "AANTALSTUKPRIJS TOTAAL" en de bedragen lopen in elkaar over.

   Elke regel wordt daarom een blokje: eerst waarover het gaat, dan op één
   lijn "1 x EUR 29,33" links en het regeltotaal rechts.

   Met flex en niet met grid: bij grid zouden het aantal en de stukprijs in
   hetzelfde vakje belanden en dus over elkaar heen komen te staan.
   ======================================================================= */
@media (max-width:680px){
  .off-regels{display:block;font-size:.92rem}
  .off-regels thead{display:none}
  .off-regels tbody,.off-regels td{display:block;width:auto}

  .off-regels tbody tr{
    display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px;
    padding:14px 0;border-bottom:1px solid var(--line);
  }
  .off-regels tbody tr:last-child{border-bottom:0}

  /* De omschrijving met haar detail over de volle breedte. */
  .off-regels td:first-child{flex:0 0 100%;padding:0 0 7px;border:0}
  .off-regels td:first-child b{font-size:.98rem}

  /* Aantal en stukprijs onder elkaar op dezelfde regel: "1 x EUR 29,33". */
  .off-regels td:nth-child(2),
  .off-regels td:nth-child(3){
    flex:0 0 auto;padding:0;border:0;
    color:var(--muted);font-size:.87rem;text-align:left !important;
  }
  .off-regels td:nth-child(2)::after{content:" \00d7";color:var(--muted)}

  /* Het regeltotaal helemaal rechts, met de lege ruimte ertussen. */
  .off-regels td:nth-child(4){
    flex:0 0 auto;margin-left:auto;padding:0;border:0;
    text-align:right !important;white-space:nowrap;
  }
  .off-regels td:nth-child(4) b{font-size:1rem;color:var(--fg)}

  /* Het totalenblok mag de volle breedte hebben. */
  .off-totalen{max-width:none;margin-left:0}
  .off-tot-rij.groot b{font-size:1.3rem}
  .off-voorschot{flex-wrap:wrap;gap:6px}

  .off-blad{border-radius:16px}
  .off-kop,.off-body{padding:18px 16px}
  .off-akkoord{margin-top:20px;padding-top:20px}
  .off-vw{margin-top:22px;padding-top:18px}

  /* De zwevende WhatsApp-knop stond over de onderste knoppen heen.
     Ruimte onderaan, zodat er altijd iets tussen zit. */
  .off-blad{margin-bottom:88px}
}

/* Op zeer smalle toestellen het totaal op een eigen regel: anders botst
   "1 x EUR 1.245,50" tegen het bedrag ernaast. */
@media (max-width:380px){
  .off-regels td:nth-child(4){flex:0 0 100%;margin:5px 0 0;text-align:left !important}
}

/* De regel over de lakkosten onder de kleurknoppen. Nadrukkelijk genoeg om
   gelezen te worden, rustig genoeg om niet als waarschuwing te oogen. */
.kleur-noot{
  margin-top:9px;padding:9px 12px;border-radius:10px;
  background:rgba(240,181,41,.08);border:1px solid rgba(240,181,41,.22);
  color:var(--fg-2);line-height:1.55;
}
[data-thema="licht"] .kleur-noot{background:rgba(169,116,26,.08);border-color:rgba(169,116,26,.22)}
/* Op de korte formulieren staan de kleuren onder elkaar te verspringen als
   ze allemaal even breed willen zijn; laat ze gewoon vloeien. */
.kleurrij .keuze{flex:0 0 auto}

/* ------------------------------------------------------------------ */
/* De kleurenpagina                                                     */
/* ------------------------------------------------------------------ */
/* Een staal met de naam eronder, meer moet dat niet zijn. Het staal is
   bewust groot: een kleur beoordeel je niet op een bolletje van 20 pixels. */
.kleurgrid{
  display:grid;gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));
}
.kleurkaart{
  border:1px solid var(--line);border-radius:18px;overflow:hidden;
  background:var(--ink-2);
  transition:transform .4s var(--ease),border-color .4s var(--ease);
}
.kleurkaart:hover{transform:translateY(-4px);border-color:rgba(42,51,255,.5)}
.kleurkaart-staal{display:block;height:104px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
.kleurkaart-tx{padding:13px 15px 15px}
.kleurkaart-tx b{display:block;font-family:var(--display);font-size:.95rem;font-weight:800}
.kleurkaart-tx i{display:block;font-style:normal;font-size:.78rem;color:var(--muted);margin-top:3px}

.kleur-anders{
  margin-top:clamp(24px,3vw,38px);
  padding:clamp(18px,2.4vw,26px);
  border:1px solid var(--line);border-radius:20px;background:var(--ink-2);
}
.kleur-anders h2{margin:0 0 8px}
.kleur-anders p{margin:0 0 10px;color:var(--fg-2);line-height:1.65;font-size:.94rem}
.kleur-anders p:last-child{margin-bottom:0}

@media (max-width:560px){
  .kleurgrid{grid-template-columns:repeat(2,1fr);gap:10px}
  .kleurkaart-staal{height:78px}
}