/* =========================================================================
   NeonLED Signs NL - stijlblad
   -------------------------------------------------------------------------
   Zwart doek, één accentkleur (#ffff00) en veel lucht. De kleur mag opvallen
   juist OMDAT er verder bijna geen kleur is; zet je hem overal neer, dan valt
   hij nergens meer op en ziet je site eruit als een waarschuwingsbord.

   Beweging: elke sectie heeft iets levends, maar altijd iets dat betekenis
   heeft (een band die doorloopt, een lijn die zich vult, een gloed die
   ademt). Nooit beweging om de beweging.
   ========================================================================= */

:root{
  --geel:#ffff00;
  --geel-zacht:#fff97a;
  --zwart:#000000;
  --paneel:#0a0a0a;
  --paneel-2:#111111;
  --lijn:rgba(255,255,255,.10);
  --lijn-fel:rgba(255,255,0,.35);
  --wit:#ffffff;
  --grijs:#a1a1a1;
  --grijs-diep:#6b6b6b;
  --gloed:0 0 12px rgba(255,255,0,.55), 0 0 40px rgba(255,255,0,.25);
  --gloed-zwaar:0 0 8px rgba(255,255,0,.9), 0 0 28px rgba(255,255,0,.6), 0 0 70px rgba(255,255,0,.35);
  --radius:14px;
  --radius-l:22px;
  --maat:1180px;
  --kop:'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --tekst:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --overgang:.45s cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--zwart);color:var(--wit);
  font:400 17px/1.65 var(--tekst);
  -webkit-font-smoothing:antialiased;
  /* clip en niet hidden. "hidden" maakt van de body een scrollbak, en dan
     werkt position:sticky nergens meer op de pagina - de plakkende koprij van
     de vergelijkingstabel bleef daardoor gewoon meescrollen. "clip" snijdt af
     zonder scrollbak. Browsers die clip niet kennen krijgen hidden. */
  overflow-x:hidden;overflow-x:clip;
}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
h1,h2,h3,h4{font-family:var(--kop);font-weight:700;line-height:1.08;letter-spacing:-.02em;margin:0}
h1{font-size:clamp(2.4rem,6vw,4.4rem)}
h2{font-size:clamp(1.9rem,4.2vw,3.1rem)}
h3{font-size:clamp(1.2rem,2.2vw,1.55rem);line-height:1.2}
p{margin:0 0 1rem}
::selection{background:var(--geel);color:#000}

/* Toetsenbordfocus moet je ZIEN. Een outline weghalen omdat hij lelijk is,
   is de snelste manier om je site onbruikbaar te maken voor wie niet muist. */
:focus-visible{outline:3px solid var(--geel);outline-offset:3px;border-radius:4px}

.omhulsel{width:100%;max-width:var(--maat);margin:0 auto;padding:0 22px}
.sectie{padding:clamp(58px,7.5vw,108px) 0;position:relative}
.sectie--nauw{padding:clamp(44px,6vw,84px) 0}
.midden{text-align:center}

/* --- Tekstbouwstenen ---------------------------------------------------- */
.oogmerk{
  display:inline-flex;align-items:center;gap:9px;
  font:600 11px/1 var(--tekst);letter-spacing:.22em;text-transform:uppercase;
  color:var(--geel);padding:9px 15px;border:1px solid var(--lijn-fel);
  border-radius:100px;background:rgba(255,255,0,.05);margin-bottom:20px;
}
.oogmerk::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--geel);
  box-shadow:0 0 8px var(--geel);animation:pols 2.4s ease-in-out infinite;
}
@keyframes pols{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}

.lood{font-size:clamp(1.02rem,1.6vw,1.2rem);color:var(--grijs);max-width:62ch}
.midden .lood{margin-left:auto;margin-right:auto}
.geel{color:var(--geel)}
.gloei{color:var(--geel);text-shadow:var(--gloed)}

/* Onderstreping die zichzelf trekt zodra hij in beeld komt. */
.streep{position:relative;display:inline-block}
.streep::after{
  content:"";position:absolute;left:0;bottom:-.12em;height:3px;width:100%;
  background:var(--geel);box-shadow:0 0 10px var(--geel);
  transform:scaleX(0);transform-origin:left;transition:transform .9s cubic-bezier(.22,.61,.36,1) .15s;
}
.zichtbaar .streep::after{transform:scaleX(1)}

/* --- Knoppen ------------------------------------------------------------ */
.knop{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 28px;border-radius:100px;border:1px solid transparent;
  font:600 15px/1 var(--tekst);letter-spacing:.01em;
  transition:transform .25s ease, box-shadow .3s ease, background .3s ease, color .3s ease;
  position:relative;overflow:hidden;
}
.knop--geel{background:var(--geel);color:#000;box-shadow:0 0 0 rgba(255,255,0,0)}
.knop--geel:hover{transform:translateY(-2px);box-shadow:var(--gloed-zwaar)}
.knop--rand{border-color:rgba(255,255,255,.22);color:var(--wit)}
.knop--rand:hover{border-color:var(--geel);color:var(--geel);transform:translateY(-2px)}
.knop--vlak{padding:0;color:var(--geel)}
.knop--vlak::after{content:"→";transition:transform .3s ease}
.knop--vlak:hover::after{transform:translateX(5px)}

/* Een veeg licht die over de gele knop loopt. Subtiel: het is een neonsite,
   de knop mag heel even oplichten zoals een buis dat doet. */
.knop--geel::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.75) 50%,transparent 65%);
  transform:translateX(-120%);
}
.knop--geel:hover::before{transform:translateX(120%);transition:transform .75s ease}

.knoprij{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.midden .knoprij{justify-content:center}

/* --- Kop / navigatie ------------------------------------------------------
   Een zwevende pil in plaats van een balk over de volle breedte.
   De balk plakte tegen de bovenrand en liep van rand tot rand; op een zwarte
   site is dat een streep die nergens begint of eindigt. Deze zweeft, heeft
   een eigen rand en laat het zwart eromheen doorlopen - hetzelfde idee als
   de kaarten verderop, zodat de kop bij de rest van de site hoort.
   De kop zelf is nu doorzichtig en is alleen nog het ophangpunt; alles wat
   je ziet zit op .kop__binnen. ------------------------------------------ */
/* top staat op de hoogte van de strook erboven en niet op 0.

   Allebei plakken ze, en allebei op top:0 betekent dat de kop ONDER de strook
   gaat liggen zodra je scrollt - je zag de bovenste helft van de pil dan
   verdwijnen. De hoogte van die strook staat in --levbalkh; die wordt in
   site.js gezet en verandert mee als het venster van breedte verandert (op een
   telefoon breekt de zin over twee regels en wordt de strook hoger).

   Staat de strook uit, dan bestaat de variabele niet en valt hij terug op 0 -
   precies zoals het vroeger was. */
.kop{
  position:sticky;top:var(--levbalkh,0px);z-index:80;
  background:transparent;border:0;
  /* Zijmarge op de WRAPPER en niet op de pil zelf. De pil is tegelijk een
     .omhulsel (zelfde element, twee klassen), dus zijn eigen padding is al
     bezet door de binnenruimte. Zonder deze marge liep de pil op een scherm
     smaller dan 1180 van rand tot rand en leek de gele knop van het scherm
     te vallen. Boven 1180 doet deze regel niets: de pil is daar afgetopt en
     staat gecentreerd. */
  padding:14px 16px 0;transition:padding .3s ease;
}
.kop__binnen{
  display:flex;align-items:center;gap:22px;height:64px;
  /* Links 20, rechts 14. Niet gelijk: rechts staat een gevulde knop en die
     draagt zijn eigen vorm, links staat een logo dat lucht nodig heeft. Het
     stond op 10 en dat is te krap - de knop raakte de rand van de pil. */
  padding-left:20px;padding-right:14px;
  border-radius:100px;border:1px solid var(--lijn);
  background:rgba(9,9,9,.72);backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  box-shadow:0 10px 34px rgba(0,0,0,.55);
  transition:background .3s ease,border-color .3s ease,box-shadow .3s ease;
}
/* Zodra je scrollt wordt hij vaster en krijgt hij een gele zweem: dan staat
   er tekst achter en moet de pil zich losmaken van de pagina. */
.kop.vast{padding-top:10px}
.kop.vast .kop__binnen{
  background:rgba(0,0,0,.9);border-color:var(--lijn-fel);
  box-shadow:0 12px 40px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,0,.05);
}
.merk{display:flex;align-items:center;gap:11px;font-family:var(--kop);font-weight:700;font-size:19px;letter-spacing:-.02em;flex:0 0 auto}
.merk__punt{
  width:11px;height:11px;border-radius:50%;background:var(--geel);
  box-shadow:0 0 10px var(--geel),0 0 26px rgba(255,255,0,.55);
  animation:flikker 6s infinite;
}
/* Een echte neonbuis heeft bij het opstarten die korte hapering. Precies dat,
   en daarna twintig seconden rust - anders wordt het een knipperlicht. */
@keyframes flikker{
  0%,88%,100%{opacity:1}
  89%{opacity:.25}90%{opacity:1}92%{opacity:.4}93%{opacity:1}
}
.merk__staart{color:var(--geel)}
.merk__woord{display:inline-flex}

/* Het beeldmerk. De gele stip hierboven was de plaatshouder tot het echte
   logo er was; die blijft staan voor het geval iemand het logo weghaalt in
   de thema-editor, dan valt de kop niet uit elkaar. */
.merk__beeld{
  height:34px;width:auto;flex:0 0 auto;display:block;
  filter:drop-shadow(0 0 8px rgba(255,255,0,.45)) drop-shadow(0 0 22px rgba(255,255,0,.22));
  animation:flikker 6s infinite;
}
.merk:hover .merk__beeld{filter:drop-shadow(0 0 10px rgba(255,255,0,.7)) drop-shadow(0 0 30px rgba(255,255,0,.35))}
.merk--voet{margin-bottom:16px}
.merk--voet .merk__beeld{height:40px}

.nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav a{
  padding:9px 11px;border-radius:9px;font-size:14px;color:var(--grijs);
  transition:color .2s ease,background .2s ease;position:relative;white-space:nowrap;
}
.nav a:hover,.nav a[aria-current="page"]{color:var(--wit);background:rgba(255,255,255,.06)}
.nav a[aria-current="page"]{color:var(--geel)}
.kop__acties{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.kop__acties .knop{padding:12px 20px;font-size:14px}

.taalkiezer{position:relative}
.taalkiezer__knop{
  background:none;border:1px solid var(--lijn);color:var(--grijs);
  padding:9px 13px;border-radius:9px;font-size:13px;display:flex;align-items:center;gap:7px;
  transition:border-color .2s ease,color .2s ease;
}
.taalkiezer__knop:hover{border-color:var(--lijn-fel);color:var(--geel)}
.taalkiezer__lijst{
  position:absolute;right:0;top:calc(100% + 8px);background:var(--paneel-2);
  border:1px solid var(--lijn);border-radius:12px;padding:6px;min-width:140px;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:all .22s ease;z-index:90;
}
.taalkiezer[data-open="1"] .taalkiezer__lijst{opacity:1;visibility:visible;transform:none}
.taalkiezer__lijst a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;font-size:14px;color:var(--grijs)}
.taalkiezer__lijst a:hover{background:rgba(255,255,0,.08);color:var(--geel)}
.taalkiezer__lijst a[aria-current="true"]{color:var(--geel)}
/* De vlaggen in de taalkiezer. Klein en met een randje, zodat wit-op-zwart
   niet in de knop verdwijnt. */
.taalkiezer .vlag,.nav__talen .vlag{flex:0 0 auto}

.hamburger{display:none;background:none;border:1px solid var(--lijn);border-radius:9px;padding:10px;color:var(--wit)}
.hamburger span{display:block;width:20px;height:2px;background:currentColor;margin:4px 0;transition:transform .3s ease,opacity .3s ease}
body[data-menu="1"] .hamburger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
body[data-menu="1"] .hamburger span:nth-child(2){opacity:0}
body[data-menu="1"] .hamburger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media (max-width:1500px){
  .nav{
    /* Hangt onder de pil en niet meer tegen de bovenrand: vandaar de marge
       opzij en de ronde hoeken. Anders zweeft de kop wel en het menu eronder
       niet, en dat leest als twee losse ontwerpen. */
    /* De 90 px is de hoogte van de pil plus de lucht erboven; --levbalkh is de
       strook met de levertijd die daar nog boven staat. Zonder die optelling
       schoof het uitklapmenu over de kop heen zodra die strook erbij kwam. */
    position:fixed;inset:calc(90px + var(--levbalkh,0px)) 14px auto;flex-direction:column;align-items:stretch;gap:0;
    background:rgba(0,0,0,.97);border:1px solid var(--lijn);border-radius:22px;
    padding:14px 20px 22px;box-shadow:0 18px 50px rgba(0,0,0,.6);
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    transform:translateY(-14px);opacity:0;visibility:hidden;transition:all .28s ease;
    max-height:calc(100vh - 106px - var(--levbalkh,0px));overflow-y:auto;
  }
  body[data-menu="1"] .nav{transform:none;opacity:1;visibility:visible}
  .nav a{padding:14px 6px;font-size:16px;border-bottom:1px solid rgba(255,255,255,.05)}
  .nav__uitklap{position:static;opacity:1;visibility:visible;transform:none;border:0;background:none;padding:0 0 0 12px;min-width:0}
  .nav__groep{display:block}
  .hamburger{display:block;order:3}
  .kop__acties .knop--rand{display:none}
  /* De navigatie is hier position:fixed en dus uit de rij gehaald; zonder deze
     regel bleef er niets over dat de knoppen naar rechts duwde en plakten ze
     tegen het logo aan met een gat aan de rechterkant. */
  .kop__acties{margin-left:auto}
}
@media (max-width:1360px) and (min-width:1501px){
  /* Vroeger ging het telefoonnummer al onder 1760 px weg, want er stonden toen
     zeven menu-items in de balk. Cases en Galerij zijn naar "Meer" verhuisd en
     dat scheelt ruim honderdvijftig pixel, dus het nummer mag nu veel langer
     blijven staan. Onder 1360 wordt het alsnog te krap en verdwijnt de minst
     belangrijke knop; bellen kan dan nog via Contact. */
  .kop__acties .knop--rand{display:none}
}

/* --- Hero --------------------------------------------------------------- */
.hero{position:relative;padding:clamp(56px,8vw,104px) 0 clamp(48px,7vw,90px);overflow:hidden}
/* Twee gloeivelden die traag ademen. Dat geeft het zwart diepte zonder dat je
   een achtergrondfoto nodig hebt die je laadtijd verpest. */
.hero::before,.hero::after{
  content:"";position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:0;
}
.hero::before{width:640px;height:640px;top:-260px;left:-180px;background:rgba(255,255,0,.11);animation:adem 13s ease-in-out infinite}
.hero::after{width:460px;height:460px;bottom:-220px;right:-120px;background:rgba(255,255,0,.07);animation:adem 17s ease-in-out infinite reverse}
@keyframes adem{0%,100%{transform:scale(1) translate(0,0);opacity:.85}50%{transform:scale(1.16) translate(28px,-22px);opacity:.5}}

.hero__raster{
  position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 55% at 50% 40%,#000 30%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 80% 55% at 50% 40%,#000 30%,transparent 78%);
}
.hero__binnen{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,64px);align-items:center}
@media (max-width:960px){.hero__binnen{grid-template-columns:1fr;gap:38px}}

.hero h1{margin-bottom:20px}
.hero__punten{list-style:none;padding:0;margin:26px 0 30px;display:grid;gap:11px}
.hero__punten li{display:flex;align-items:flex-start;gap:11px;color:#d6d6d6;font-size:15.5px}
.hero__punten svg{flex:0 0 auto;margin-top:3px;color:var(--geel)}

/* Het neonbord in de hero: een SVG-pad dat zichzelf tekent, daarna gloeit. */
.neonbord{position:relative;aspect-ratio:4/3;display:grid;place-items:center;
  border:1px solid var(--lijn);border-radius:var(--radius-l);
  background:radial-gradient(circle at 50% 55%,rgba(255,255,0,.10),transparent 62%),var(--paneel);
  overflow:hidden;
}
.neonbord img{width:100%;height:100%;object-fit:contain;padding:8%}
.neonbord__tekst{width:82%;height:auto}
.neonbord__tekst path,.neonbord__tekst line,.neonbord__tekst circle{
  fill:none;stroke:var(--geel);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 6px rgba(255,255,0,.9)) drop-shadow(0 0 22px rgba(255,255,0,.55));
  stroke-dasharray:var(--lengte,1400);stroke-dashoffset:var(--lengte,1400);
  animation:teken 2.6s cubic-bezier(.65,0,.35,1) .35s forwards;
}
@keyframes teken{to{stroke-dashoffset:0}}
.neonbord__voet{
  position:absolute;left:0;right:0;bottom:0;padding:13px 18px;font-size:12.5px;color:var(--grijs);
  display:flex;justify-content:space-between;gap:10px;border-top:1px solid var(--lijn);
  background:rgba(0,0,0,.5);backdrop-filter:blur(8px);
}

/* --- Lopende band (marquee) --------------------------------------------- */
.band{
  border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn);
  background:var(--paneel);overflow:hidden;position:relative;
}
.band--geel{background:var(--geel);border-color:var(--geel)}
.band__spoor{display:flex;width:max-content;animation:schuif var(--duur,34s) linear infinite}
.band:hover .band__spoor{animation-play-state:paused}
.band__groep{display:flex;align-items:center;flex:0 0 auto}
@keyframes schuif{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes schuif-terug{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.band__item{
  display:flex;align-items:center;gap:12px;padding:15px 30px;
  font:600 12.5px/1 var(--tekst);letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;
}
.band--geel .band__item{color:#000}
.band__item::after{content:"◆";font-size:8px;opacity:.5;margin-left:18px}

/* Logoband: grijs tot je erover gaat, dan volle sterkte. Zo blijft de
   aandacht bij de tekst en niet bij twintig vreemde merkkleuren. */
/* Wat hoger dan hij was (34 px): op een breed scherm was dit een dun streepje
   tussen twee zwarte vlakken en vielen de logo's weg. */
.logoband{padding:clamp(38px,4.2vw,58px) 0;border-block:1px solid var(--lijn);overflow:hidden;position:relative}
.logoband::before,.logoband::after{
  content:"";position:absolute;top:0;bottom:0;width:130px;z-index:2;pointer-events:none;
}
.logoband::before{left:0;background:linear-gradient(90deg,#000,transparent)}
.logoband::after{right:0;background:linear-gradient(-90deg,#000,transparent)}
/* De hoogte maal --schaal: dat is het percentage dat per logo in
   Beheer -> Beelden staat. Zonder die variabele is het gewoon 1. */
.logoband img{
  height:calc(clamp(30px,4vw,44px) * var(--schaal,1));width:auto;object-fit:contain;
  max-width:none;
  filter:grayscale(1) brightness(2.4);opacity:.42;transition:filter .35s ease,opacity .35s ease,transform .35s ease;
}
.logoband .band__item{padding:0 clamp(26px,4vw,52px)}
.logoband .band__item::after{display:none}
.logoband img:hover{filter:none;opacity:1;transform:scale(1.06)}

/* --- Galerij: twee sporen, tegen elkaar in ------------------------------ */
.galerij{overflow:hidden;position:relative}
/* Let op: GEEN gap tussen de twee groepen. De band schuift precies de helft
   van zijn eigen breedte op; zit er tussen de groepen een gap van 16 px, dan
   klopt die helft 8 px niet en zie je bij elke ronde een sprongetje. Elke
   groep draagt daarom zijn eigen ruimte aan de rechterkant mee. */
.galerij__spoor{display:flex;width:max-content;margin-bottom:16px;animation:schuif var(--duur,58s) linear infinite}
.galerij__spoor--terug{animation-name:schuif-terug;animation-duration:var(--duur2,72s)}
.galerij:hover .galerij__spoor{animation-play-state:paused}
.galerij__groep{display:flex;gap:16px;flex:0 0 auto;padding-right:16px}
.galerij__kaart{
  width:clamp(200px,26vw,320px);aspect-ratio:4/5;border-radius:var(--radius);overflow:hidden;
  position:relative;background:var(--paneel-2);flex:0 0 auto;border:1px solid var(--lijn);
}
.galerij__kaart img,.galerij__kaart video{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.22,.61,.36,1)}
.galerij__kaart:hover img,.galerij__kaart:hover video{transform:scale(1.07)}
.galerij__kaart figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:34px 16px 14px;font-size:13px;
  background:linear-gradient(transparent,rgba(0,0,0,.85));
  opacity:0;transform:translateY(8px);transition:all .35s ease;
}
.galerij__kaart:hover figcaption{opacity:1;transform:none}
.galerij__rand{position:absolute;inset:0;pointer-events:none;z-index:3;
  background:linear-gradient(90deg,#000 0,transparent 9%,transparent 91%,#000 100%)}

/* --- Stappen: een lijn die zich vult ------------------------------------ */
/* Het aantal kolommen komt uit het sjabloon (--stappen). Stond hier hard op
   vier; ging er een stap uit, dan bleef de vierde kolom leeg en leek het alsof
   er iets ontbrak - precies wat er gebeurde toen het "vier stappen" werden. */
.stappen{position:relative;display:grid;gap:clamp(26px,4vw,44px);
  grid-template-columns:repeat(var(--stappen,3),minmax(0,1fr))}
@media (max-width:900px){.stappen{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.stappen{grid-template-columns:1fr}}
.stap{position:relative;z-index:1}

/* Nummer en verbindingslijn staan naast elkaar in een flexregel. Eerst was
   dit één absolute balk over de hele sectie op een vaste hoogte; zodra de
   stappen een foto kregen liep die balk dwars over de foto's. Nu hangt de
   lijn aan het nummer zelf en klopt hij altijd, hoe hoog een foto ook is. */
.stap__kop{display:flex;align-items:center;margin-bottom:20px}
.stap__nr{
  width:54px;height:54px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
  background:var(--zwart);border:2px solid var(--lijn);
  font-family:var(--kop);font-weight:700;font-size:19px;color:var(--grijs);
  transition:all .5s ease;
}
.stap__lijn{
  flex:1;height:2px;background:var(--lijn);position:relative;
  /* Doorlopen tot in de tussenruimte, zodat de lijn de volgende bol raakt. */
  margin-right:calc(-1 * clamp(26px,4vw,44px));
}
.stap__lijn::after{
  content:"";position:absolute;inset:0 auto 0 0;width:0;
  background:var(--geel);box-shadow:0 0 10px var(--geel);
  transition:width 1s cubic-bezier(.22,.61,.36,1);
}
.zichtbaar .stap__lijn::after{width:100%}
.stap:nth-child(2) .stap__lijn::after{transition-delay:.25s}
.stap:nth-child(3) .stap__lijn::after{transition-delay:.5s}
.stap:nth-child(4) .stap__lijn::after{transition-delay:.75s}
/* In twee of één kolom staat er niets naast, dus dan geen lijn. */
@media (max-width:900px){ .stap__lijn{display:none} }

.zichtbaar .stap__nr{border-color:var(--geel);color:var(--geel);box-shadow:0 0 0 6px rgba(255,255,0,.08),var(--gloed)}
.stap h3{margin-bottom:9px}
.stap p{color:var(--grijs);font-size:15.5px;margin:0}
.stap__beeld{aspect-ratio:16/11;border-radius:var(--radius);overflow:hidden;margin-bottom:18px;background:var(--paneel-2);border:1px solid var(--lijn)}
.stap__beeld img,.stap__beeld video{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.stap:hover .stap__beeld img{transform:scale(1.05)}

/* --- Anatomie (de doorsnee van een bord) -------------------------------- */
/*
   Eerste opzet: alle uitleg in zwevende labels op de foto zelf, zichtbaar bij
   hover. Dat werkte niet. Bij hover zie je op een schermafdruk (en dus ook bij
   een eerste blik) alleen vijf stipjes zonder betekenis, en een label dat
   naast een stip past moet zó smal zijn dat er geen zin in kan.

   Nu: de foto in het midden, de uitleg in twee kolommen ernaast, elk op de
   hoogte van zijn eigen stip en met een streepje ernaartoe. Altijd leesbaar,
   ook zonder muis. Op een smal scherm valt alles onder elkaar.
*/
.anatomie{
  position:relative;display:grid;grid-template-columns:1fr minmax(240px,520px) 1fr;
  gap:clamp(16px,2.4vw,34px);align-items:center;
  border:1px solid var(--lijn);border-radius:var(--radius-l);
  background:radial-gradient(circle at 50% 50%,rgba(255,255,0,.09),transparent 62%),var(--paneel);
  padding:clamp(24px,4vw,54px) clamp(16px,2.6vw,34px);
}
.anatomie__doek{position:relative;animation:zweef 7s ease-in-out infinite}
.anatomie__beeld{display:block;width:100%;filter:drop-shadow(0 0 40px rgba(255,255,0,.35))}

/* De stip op de foto. x en y zijn percentages van de FOTO; stonden ze op
   percentages van de sectie, dan schoof een punt bij elke schermbreedte een
   andere kant op en wees hij ergens naast het beeld. */
.anatomie__stip{
  position:absolute;width:13px;height:13px;margin:-6.5px 0 0 -6.5px;border:0;padding:0;
  border-radius:50%;background:var(--geel);cursor:pointer;
  box-shadow:0 0 0 0 rgba(255,255,0,.55);animation:tik 2.8s ease-out infinite;
}
@keyframes tik{
  0%{box-shadow:0 0 0 0 rgba(255,255,0,.6)}
  70%{box-shadow:0 0 0 15px rgba(255,255,0,0)}
  100%{box-shadow:0 0 0 0 rgba(255,255,0,0)}
}
.anatomie__stip.aan,.anatomie__stip:hover{transform:scale(1.5)}

.anatomie__kolom{position:relative;height:100%;min-height:360px}
.anatomie__punt{
  position:absolute;top:var(--y,50%);transform:translateY(-50%);
  max-width:290px;transition:opacity .3s ease;
}
.anatomie__kolom--links .anatomie__punt{right:22px;text-align:right}
.anatomie__kolom--rechts .anatomie__punt{left:22px}
/* Het streepje naar de foto toe. */
.anatomie__punt::after{
  content:"";position:absolute;top:11px;width:22px;height:1px;background:var(--lijn-fel);
}
.anatomie__kolom--links .anatomie__punt::after{right:-22px}
.anatomie__kolom--rechts .anatomie__punt::after{left:-22px}
.anatomie__punt strong{
  display:block;color:var(--geel);font:600 11.5px/1.4 var(--tekst);
  letter-spacing:.13em;text-transform:uppercase;margin-bottom:5px;
}
.anatomie__punt span{display:block;font-size:13.5px;line-height:1.5;color:#c4c4c4}
.anatomie__punt.aan strong,.anatomie__punt:hover strong{text-shadow:var(--gloed)}
.anatomie__punt.aan span,.anatomie__punt:hover span{color:#f0f0f0}

/* Onder de 1000 px is er naast de foto geen ruimte meer voor tekst. Dan komt
   alles onder elkaar en verdwijnen de streepjes; twee kolommen van 120 px
   breed zijn geen kolommen meer, dat zijn afgebroken woorden. */
@media (max-width:1000px){
  .anatomie{grid-template-columns:1fr;gap:22px}
  .anatomie__doek{max-width:460px;margin:0 auto;animation:none}
  .anatomie__kolom{height:auto;min-height:0;display:grid;gap:12px}
  .anatomie__punt{
    position:static;transform:none;max-width:none;text-align:left !important;
    right:auto !important;left:auto !important;
    border:1px solid var(--lijn);border-radius:12px;padding:14px 16px;background:var(--zwart);
  }
  .anatomie__punt::after{display:none}
  .anatomie__stip{display:none}
}

/* --- Kaarten (cases, blog) ---------------------------------------------- */
.rooster{display:grid;gap:clamp(18px,2.4vw,26px)}
.rooster--3{grid-template-columns:repeat(3,1fr)}
.rooster--2{grid-template-columns:repeat(2,1fr)}
.rooster--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:980px){.rooster--3,.rooster--4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.rooster--2,.rooster--3,.rooster--4{grid-template-columns:1fr}}

.kaart{
  position:relative;border:1px solid var(--lijn);border-radius:var(--radius-l);
  background:var(--paneel);overflow:hidden;display:flex;flex-direction:column;
  transition:border-color .35s ease,transform .35s ease;
}
.kaart:hover{border-color:var(--lijn-fel);transform:translateY(-4px)}
.kaart__beeld{aspect-ratio:16/10;overflow:hidden;background:var(--paneel-2);position:relative}
.kaart__beeld img,.kaart__beeld video{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.22,.61,.36,1)}
.kaart:hover .kaart__beeld img{transform:scale(1.06)}
.kaart__lijf{padding:24px;display:flex;flex-direction:column;gap:10px;flex:1}
.kaart__meta{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--geel)}
.kaart h3{font-size:1.24rem}
.kaart p{color:var(--grijs);font-size:15px;margin:0;flex:1}
.kaart__voet{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:6px;font-size:13.5px;color:var(--grijs-diep)}
.kaart__link::after{content:"";position:absolute;inset:0}

/* Een gloed die de muis volgt. Dit is het enige "effect" op de kaarten; het
   maakt een zwart vlak levend zonder dat er iets beweegt dat je afleidt. */
.kaart::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s ease;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(255,255,0,.09),transparent 62%);
}
.kaart:hover::after{opacity:1}

/* --- Vergelijkingstabel -------------------------------------------------- */
.vergelijk{width:100%;border-collapse:separate;border-spacing:0;font-size:15px;
  border:1px solid var(--lijn);border-radius:var(--radius-l);overflow:hidden}
.vergelijk th,.vergelijk td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--lijn)}
.vergelijk thead th{background:var(--paneel-2);font:600 13px/1.3 var(--tekst);letter-spacing:.06em;text-transform:uppercase}
.vergelijk thead th:nth-child(2){color:var(--geel)}
/* De "wij"-kolom draagt het beeldmerk in plaats van de naam in letters. Het
   logo staat naast de naam en niet in de plaats ervan: wie de site voor het
   eerst ziet weet nog niet waar dat vlammetje voor staat. */
.vergelijk__wij{white-space:nowrap}
.vergelijk__merk{height:22px;width:auto;vertical-align:-5px;margin-right:8px;object-fit:contain;
  filter:drop-shadow(0 0 6px rgba(255,255,0,.45))}
.vergelijk__merknaam{letter-spacing:.06em}
@media(max-width:640px){
  .vergelijk__merk{height:18px;margin-right:5px;vertical-align:-4px}
}
.vergelijk tbody tr{transition:background .25s ease}
.vergelijk tbody tr:hover{background:rgba(255,255,0,.04)}
.vergelijk td:nth-child(2){color:var(--wit);font-weight:600}
.vergelijk td:nth-child(3){color:var(--grijs-diep)}
.vergelijk tr:last-child td{border-bottom:0}
.vink{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;
  background:rgba(255,255,0,.14);color:var(--geel);font-size:12px}
.kruis{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;
  background:rgba(255,255,255,.06);color:#5d5d5d;font-size:12px}
.tabelrol{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* --- Accordeon (FAQ) ---------------------------------------------------- */
.vragen{display:grid;gap:10px}
.vraag{border:1px solid var(--lijn);border-radius:var(--radius);background:var(--paneel);overflow:hidden;transition:border-color .3s ease}
.vraag[open]{border-color:var(--lijn-fel)}
.vraag summary{
  list-style:none;cursor:pointer;padding:19px 56px 19px 22px;position:relative;
  font-family:var(--kop);font-weight:600;font-size:16.5px;line-height:1.35;
}
.vraag summary::-webkit-details-marker{display:none}
.vraag summary::after{
  content:"";position:absolute;right:22px;top:50%;width:11px;height:11px;
  border-right:2px solid var(--geel);border-bottom:2px solid var(--geel);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s ease;
}
.vraag[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.vraag__antwoord{padding:0 22px 22px;color:var(--grijs);font-size:15.5px}
.vraag__antwoord p:last-child{margin-bottom:0}
.vraag[open] .vraag__antwoord{animation:openvouw .35s ease}
@keyframes openvouw{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* --- Reviews: een lopende band -------------------------------------------
   Hier stond een strook die je zelf moest wegvegen. Op een muis is dat een
   balkje onderaan dat bijna niemand aanraakt, dus las een bezoeker drie
   reviews en de rest nooit. Zelfde recept als de galerijband hierboven: de
   kaarten staan twee keer in de html en het spoor schuift precies een halve
   slag op, zodat de sprong aan het eind niet te zien is.

   Van rand tot rand en niet binnen de container: een band die netjes stopt
   bij de kolomrand ziet eruit als een tabel, een band die het scherm uit
   loopt ziet eruit als iets dat doorgaat. */
.reviews{
  margin:0 calc(50% - 50vw);width:100vw;max-width:100vw;
  padding:4px 0 12px;overflow:hidden;position:relative;
  /* De rafelrand links en rechts. Zonder dit knippen de kaarten hard af tegen
     de schermrand en lijkt het alsof de band stukloopt. */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.reviews__spoor{
  display:flex;gap:16px;width:max-content;padding-left:16px;
  animation:schuif var(--duur,60s) linear infinite;will-change:transform;
}
/* Stilstaan zodra iemand er echt eentje wil lezen - met de muis of met het
   toetsenbord. :focus-within hoort erbij: zonder dat schuift de kaart onder
   de cursor weg zodra je met tab door de links loopt. */
.reviews:hover .reviews__spoor,
.reviews:focus-within .reviews__spoor{animation-play-state:paused}
.review{flex:0 0 clamp(280px,32vw,380px);border:1px solid var(--lijn);
  border-radius:var(--radius-l);padding:26px;background:var(--paneel);display:flex;flex-direction:column;gap:14px}
/* Wie beweging uit heeft staan krijgt geen band maar gewoon een strook die
   hij zelf schuift. Dat is de eerlijke terugval: niets wat vanzelf beweegt. */
@media (prefers-reduced-motion:reduce){
  .reviews{overflow-x:auto;scroll-snap-type:x mandatory;
    scrollbar-width:thin;scrollbar-color:rgba(255,255,0,.4) transparent}
  .reviews__spoor{animation:none;width:auto}
  .review{scroll-snap-align:start}
}

/* OP EEN TELEFOON GEEN LOPENDE BAND. DIT WAS EEN ECHTE BUG, GEEN SMAAKKWESTIE.

   Op een iPhone waren er helemaal GEEN reviews te zien - een leeg gat waar de
   band hoort te staan. Op een computer werkte dezelfde code prima, en dat is
   precies waarom het zo lang bleef staan.

   Wat er gebeurt: het spoor is de kaarten twee keer achter elkaar. Bij tien
   reviews is dat twintig kaarten van 296 px, dus een element van bijna 6000 px
   breed. Daar staat `will-change:transform` en een animatie op, en dan zet de
   browser dat element in een eigen laag op de grafische kaart. iOS heeft een
   HARDE bovengrens aan hoe groot zo'n laag mag zijn (rond de 4096 px). Zit je
   erboven, dan tekent iOS de laag niet - hij verdwijnt gewoon. Geen fout in de
   console, geen waarschuwing, alleen een lege plek. Het masker met de
   rafelranden erbovenop maakt het op iOS nog wankeler.

   De oplossing is niet "de laag kleiner maken" - dat blijft afhangen van hoe
   veel reviews er staan, en dus gaat het bij de elfde review weer stuk. Op een
   telefoon vervangen we de band door een strook die je zelf veegt. Dat is
   dezelfde terugval als hierboven bij "verminder beweging", en op een telefoon
   is vegen sowieso het natuurlijke gebaar: een band die zelf schuift kun je
   niet stoppen om er eentje uit te lezen.

   De tweede set kaarten mag dan weg. Die staat er alleen om de sprong aan het
   eind van de animatie te verbergen; zonder animatie is het dezelfde tien
   reviews nog een keer. Ze zijn te herkennen aan aria-hidden, want dat is
   precies wat de verdubbeling meekrijgt. */
/* Niet alleen op breedte, ook op AANRAKING. Een iPad in portret is 768 px
   breed en valt dus buiten een gewone telefoonbreekpunt - terwijl het daar om
   dezelfde laag en hetzelfde vinger-veeg-gebaar gaat. "hover:none en
   pointer:coarse" is precies "dit is een aanraakscherm". */
@media (max-width:749px), (hover:none) and (pointer:coarse){
  .reviews{
    overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding-bottom:4px;
    /* het masker eraf: op iOS is een masker op een schuivende bak de tweede
       manier om hetzelfde lege gat te krijgen */
    -webkit-mask-image:none;mask-image:none;
  }
  .reviews::-webkit-scrollbar{display:none}
  .reviews__spoor{animation:none;width:auto;will-change:auto;padding:0 16px}
  .review{scroll-snap-align:start}
  .reviews__spoor .review[aria-hidden="true"]{display:none}
}
.review__sterren{color:var(--geel);letter-spacing:2px;font-size:14px}
.review p{margin:0;color:#d2d2d2;font-size:15.5px;flex:1}
.review__naam{font-weight:600;font-size:14.5px}
.review__bron{font-size:12.5px;color:var(--grijs-diep)}

/* --- Insluitkader voor offerte/configurator ----------------------------- */
.kader{width:100%;border:1px solid var(--lijn);border-radius:var(--radius-l);overflow:hidden;background:var(--paneel)}
.kader iframe{width:100%;border:0;display:block;min-height:760px}
.kader--vast iframe{height:80vh;overflow:auto}
@media (max-width:749px){
  .kader{border-radius:0;border-left:0;border-right:0;width:100vw;margin-left:calc(50% - 50vw)}
}

/* --- Artikel ------------------------------------------------------------ */
.artikel{max-width:74ch;margin:0 auto}
.artikel h2{font-size:clamp(1.5rem,2.6vw,2rem);margin:2.4em 0 .6em}
.artikel h3{font-size:1.28rem;margin:1.9em 0 .5em}
.artikel p,.artikel li{color:#d0d0d0;font-size:17.5px;line-height:1.75}
.artikel ul,.artikel ol{padding-left:1.3em;margin:0 0 1.3em}
.artikel li{margin-bottom:.5em}
.artikel a{color:var(--geel);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.artikel a:hover{text-shadow:var(--gloed)}
.artikel blockquote{
  margin:2em 0;padding:22px 26px;border-left:3px solid var(--geel);
  background:rgba(255,255,0,.05);border-radius:0 var(--radius) var(--radius) 0;
  font-size:18px;color:#e6e6e6;
}
.artikel blockquote p:last-child{margin-bottom:0}
.artikel table{width:100%;border-collapse:collapse;margin:1.8em 0;font-size:15.5px}
.artikel th,.artikel td{padding:12px 14px;border:1px solid var(--lijn);text-align:left}
.artikel th{background:var(--paneel-2);color:var(--geel);font-weight:600}
.artikel img{border-radius:var(--radius);margin:1.8em 0}
.artikel hr{border:0;border-top:1px solid var(--lijn);margin:2.6em 0}

.inhoudsopgave{
  border:1px solid var(--lijn);border-radius:var(--radius);padding:20px 24px;
  background:var(--paneel);margin:0 0 34px;
}
.inhoudsopgave b{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--geel)}
.inhoudsopgave ol{margin:12px 0 0;padding-left:1.2em}
.inhoudsopgave a{color:var(--grijs);font-size:15px;text-decoration:none}
.inhoudsopgave a:hover{color:var(--geel)}

/* Leesvoortgang bovenaan het artikel: één streep die meeloopt. */
.voortgang{position:fixed;top:0;left:0;height:2px;background:var(--geel);z-index:100;
  box-shadow:0 0 10px var(--geel);width:0;transition:width .1s linear}

/* --- Kruimelpad --------------------------------------------------------- */
.kruimels{font-size:13px;color:var(--grijs-diep);display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:22px}
.kruimels a{color:var(--grijs)}
.kruimels a:hover{color:var(--geel)}
.kruimels span::before{content:"/";margin-right:8px;opacity:.4}

/* --- Cijferblok --------------------------------------------------------- */
.cijfers{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;
  background:var(--lijn);border:1px solid var(--lijn);border-radius:var(--radius-l);overflow:hidden}
.cijfer{background:var(--zwart);padding:28px 22px;text-align:center}
.cijfer b{display:block;font-family:var(--kop);font-size:clamp(1.9rem,4vw,2.7rem);color:var(--geel);
  line-height:1;margin-bottom:8px;text-shadow:var(--gloed)}
.cijfer span{font-size:13.5px;color:var(--grijs)}

/* --- Voet --------------------------------------------------------------- */
.voet{border-top:1px solid var(--lijn);background:var(--paneel);padding:clamp(48px,6vw,76px) 0 30px;margin-top:clamp(50px,7vw,100px)}
.voet__rooster{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:clamp(24px,4vw,48px)}
@media (max-width:860px){.voet__rooster{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.voet__rooster{grid-template-columns:1fr}}
.voet h4{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--geel);margin-bottom:16px}
.voet ul{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.voet a{color:var(--grijs);font-size:14.5px}
.voet a:hover{color:var(--geel)}
.voet__over p{color:var(--grijs);font-size:14.5px;max-width:38ch}
.voet__onder{margin-top:44px;padding-top:22px;border-top:1px solid var(--lijn);
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;font-size:13px;color:var(--grijs-diep)}
.voet__onder a{font-size:13px}

/* --- Verschijnen bij scrollen ------------------------------------------- */
.op{opacity:0;transform:translateY(26px);transition:opacity .85s cubic-bezier(.22,.61,.36,1),transform .85s cubic-bezier(.22,.61,.36,1)}
.op.zichtbaar{opacity:1;transform:none}
.op[data-vertraag="1"]{transition-delay:.09s}
.op[data-vertraag="2"]{transition-delay:.18s}
.op[data-vertraag="3"]{transition-delay:.27s}
.op[data-vertraag="4"]{transition-delay:.36s}

/* Wie beweging heeft uitgezet in zijn systeem krijgt geen beweging. Dat is
   geen extraatje: voor mensen met evenwichtsklachten maakt dit het verschil
   tussen een site die werkt en een site waar ze misselijk van worden. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
  .op{opacity:1;transform:none}
  .neonbord__tekst path{stroke-dashoffset:0}
}

/* --- Kleine dingen ------------------------------------------------------- */
.enkel-lezer{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
.overslaan{position:absolute;left:-9999px;top:0;background:var(--geel);color:#000;padding:12px 20px;z-index:999;border-radius:0 0 9px 0}
.overslaan:focus{left:0}
.deel{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:30px;padding-top:24px;border-top:1px solid var(--lijn)}
.deel a,.deel button{border:1px solid var(--lijn);border-radius:100px;padding:9px 16px;font-size:13.5px;color:var(--grijs);background:none;transition:all .25s ease}
.deel a:hover,.deel button:hover{border-color:var(--geel);color:var(--geel)}


/* --- Uitklapper in de navigatie ----------------------------------------- */
.nav__groep{position:relative;display:flex}
.nav__knop{
  background:none;border:0;padding:9px 11px;border-radius:9px;font-size:14px;
  color:var(--grijs);display:flex;align-items:center;gap:6px;white-space:nowrap;
  transition:color .2s ease,background .2s ease;font-family:inherit;
}
.nav__knop:hover,.nav__groep[data-open="1"] .nav__knop{color:var(--wit);background:rgba(255,255,255,.06)}
.nav__knop::after{content:"";width:5px;height:5px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.nav__uitklap{
  position:absolute;left:0;top:calc(100% + 8px);background:var(--paneel-2);
  border:1px solid var(--lijn);border-radius:12px;padding:6px;min-width:230px;z-index:90;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:all .22s ease;
}
.nav__groep[data-open="1"] .nav__uitklap{opacity:1;visibility:visible;transform:none}
.nav__uitklap a{display:block;padding:9px 12px;border-radius:8px;font-size:14px}
/* "Meer" staat helemaal rechts in de pil. Een uitklapper die daar vanaf links
   uitrolt loopt het scherm uit, dus die hangt hij aan zijn rechterkant op. */
.nav__groep:last-of-type .nav__uitklap{left:auto;right:0}

/* --- Smalle schermen: wat er in de balk past ----------------------------- */
.alleen-smal{display:none}
.nav__talen{display:none;gap:8px;padding-top:14px;margin-top:8px;border-top:1px solid var(--lijn)}
.nav__talen a{display:flex;align-items:center;justify-content:center;gap:9px;padding:10px 14px;
  border:1px solid var(--lijn);border-radius:100px;font-size:14px;flex:1;text-align:center}
.nav__talen a[aria-current="true"]{border-color:var(--geel);color:var(--geel)}

@media (max-width:1500px){ .nav__talen{display:flex} }

/* --- De twee vlaggen in de balk. Alleen op een telefoon. -----------------
   Op een breed scherm staat de gewone taalkiezer met het uitklapmenu er al;
   twee taalknoppen naast elkaar zou daar dubbel zijn. */
.taalvlaggen{display:none;gap:4px;align-items:center;
  background:var(--paneel);border:1px solid var(--lijn);border-radius:100px;padding:3px}
.taalvlaggen__knop{
  display:flex;align-items:center;gap:5px;padding:5px 9px;border-radius:100px;
  font:700 11px/1 var(--tekst);letter-spacing:.06em;color:var(--grijs-diep);
  transition:background .2s ease,color .2s ease;
}
.taalvlaggen__knop .vlag{opacity:.5;transition:opacity .2s ease}
/* De taal waar je in staat is de opgelichte. Zonder dit verschil staan er twee
   knoppen die er hetzelfde uitzien en weet je niet welke je al hebt. */
.taalvlaggen__knop.aan{background:rgba(255,255,0,.12);color:var(--geel)}
.taalvlaggen__knop.aan .vlag{opacity:1}

/* ONDER 560 px NOG MAAR EEN KNOP: die van de ANDERE taal.

   Twee vlaggen met hun code erbij is 135 px breed. Samen met het beeldmerk, de
   offerteknop en de hamburger paste dat niet meer op een telefoon: de kop werd
   474 px op een scherm van 390 en de hele pagina schoof opzij. (Gemeten, niet
   gegokt - zie de overlooptoets in CLAUDE.md.)

   Wat overblijft is de knop die iets DOET. Sta je op de Nederlandse pagina,
   dan zie je de Britse vlag met "EN"; sta je op de Engelse, dan de
   Nederlandse. Eén tik, en het is meteen duidelijk wat er gebeurt - duidelijker
   zelfs dan twee knoppen waarvan er één niets doet. */
@media (max-width:560px){
  .taalvlaggen{background:none;border:0;padding:0}
  .taalvlaggen__knop.aan{display:none}
  .taalvlaggen__knop{
    border:1px solid var(--lijn);padding:8px 11px;color:var(--wit);background:var(--paneel);
  }
  .taalvlaggen__knop .vlag{opacity:1}
}

/* Onder 430 px valt ook de letters ("EN") weg en blijft alleen de vlag over.
   Gemeten: met de letters erbij werd de kop 407 px breed op een scherm van 390
   en schoof de hele pagina opzij. De vlag alleen is duidelijk genoeg - het is
   de enige knop in de balk met een vlag erin. */
@media (max-width:430px){
  .taalvlaggen__knop{padding:7px 8px}
  .taalvlaggen__knop span{display:none}
}
/* Op de smalste telefoons (320 px, een iPhone SE) paste de rij nog steeds niet
   en werd de hamburger half afgeknipt. Alles een maatje kleiner: minder lucht
   tussen de knoppen, een kortere offerteknop en een strakkere hamburger. */
@media (max-width:360px){
  .kop__binnen{gap:6px;padding-left:10px;padding-right:6px}
  .kop__acties{gap:6px}
  .kop__acties .knop{padding:10px 12px;font-size:13px}
  .taalvlaggen__knop{padding:6px 7px}
  .hamburger{padding:8px}
}

@media (max-width:720px){
  /* De taalkiezer verhuist naar het menu; in de balk blijven alleen de
     offerteknop en de hamburger over. Anders liep de knop van het scherm af -
     dat was op een telefoon van 390 px meteen zichtbaar. */
  .kop__acties .taalkiezer{display:none}
  .taalvlaggen{display:flex}
  .alleen-breed{display:none}
  .alleen-smal{display:inline}
  .kop__acties .knop{padding:11px 16px;font-size:13.5px}
  .kop{padding:10px 10px 0}
  .kop__binnen{gap:10px;height:58px;padding-left:14px;padding-right:10px}
  .nav{inset:calc(78px + var(--levbalkh,0px)) 10px auto;max-height:calc(100vh - 94px - var(--levbalkh,0px))}
  .merk{font-size:17px}
  .merk__beeld{height:28px}
}
@media (max-width:380px){
  .merk__staart{display:none}
}

/* --- Artikelkop --------------------------------------------------------- */
/* De kop van een artikel is geen landingspaginakop. Op de heldergrootte van
   de startpagina liep een titel van acht woorden over vijf regels; dat leest
   als een affiche en niet als een tekst die je gaat lezen. */
.artikelkop h1{font-size:clamp(1.9rem,3.4vw,2.85rem);line-height:1.12}

/* --- Vrije secties ------------------------------------------------------ */
/* Een blok dat je zelf in het beheer aanmaakt: kop, tekst, beeld of video,
   en een knop. Drie varianten: beeld links, beeld rechts, of over de volle
   breedte met de tekst eronder. */
.blok__twee{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4.5vw,64px);align-items:center;
}
.blok--links .blok__twee{grid-template-columns:1fr 1fr}
/* Onder de 1000 px onder elkaar, niet onder de 900. Bij 950 px stonden er
   twee kolommen van nog geen 400 px met een kop van drie woorden per regel;
   dat leest niet als twee kolommen maar als een fout. Het beeld gaat ALTIJD
   bovenaan, ook als het in de opmaak links staat: je wil eerst zien waar het
   over gaat en dan pas lezen. */
@media (max-width:1000px){
  /* LET OP DE .blok--links ERBIJ.

     Deze regel stond hier als ".blok__twee" alleen, en dat is gewicht 0-1-0.
     Boven de mediavraag staat ".blok--links .blok__twee{1fr 1fr}" en dat is
     0-2-0 - dus zwaarder, ook al staat hij eerder. Gevolg: een blok met het
     beeld LINKS bleef op een telefoon gewoon twee kolommen. Op een scherm van
     390 px werden dat twee kolommen van 162 px: een postzegel van een foto
     naast tekst die per drie woorden afbreekt. Precies waar de klacht over
     ging. Een mediavraag geeft GEEN extra gewicht; alleen de kiezer telt. */
  .blok__twee,
  .blok--links .blok__twee{grid-template-columns:1fr;gap:22px}
  /* Het beeld bovenaan en breed. 16/10 is de verhouding van een foto die je
     op een telefoon nog echt bekijkt; 4/3 vult te veel van het scherm. */
  .blok__twee .blok__doek,
  .blok--links .blok__twee .blok__doek{order:-1;aspect-ratio:16/10;width:100%}
}
.blok__doek{
  border-radius:var(--radius-l);overflow:hidden;border:1px solid var(--lijn);
  background:var(--paneel-2);position:relative;
}
.blok__doek img,.blok__doek video{width:100%;height:100%;object-fit:cover;display:block}
.blok__twee .blok__doek{aspect-ratio:4/3}
.blok__tekst h2{margin-bottom:0}
.blok__tekst .lood p:last-child{margin-bottom:0}

.blok__vol{position:relative;border-radius:var(--radius-l);overflow:hidden;border:1px solid var(--lijn)}
.blok__vol .blok__doek{border:0;border-radius:0;aspect-ratio:21/9}
@media (max-width:900px){ .blok__vol .blok__doek{aspect-ratio:4/3} }
.blok__over{
  position:absolute;inset:auto 0 0 0;padding:clamp(24px,4vw,52px);
  background:linear-gradient(transparent,rgba(0,0,0,.55) 35%,rgba(0,0,0,.92));
}
.blok__over h2{max-width:22ch}
.blok__over .lood{max-width:60ch;margin-top:12px}
/* Staat er een video met bediening in, dan mag de tekstlaag geen kliks
   opvangen - anders kun je de speler niet meer aanraken. */
.blok__vol .blok__over{pointer-events:none}
.blok__vol .blok__over a{pointer-events:auto}

/* --- Beeld naast een sectie --------------------------------------------- */
.zijbeeld{border-radius:var(--radius-l);overflow:hidden;border:1px solid var(--lijn);background:var(--paneel-2)}
.zijbeeld img,.zijbeeld video{width:100%;display:block;object-fit:cover;aspect-ratio:4/5}
.metzijbeeld{display:grid;grid-template-columns:1fr minmax(240px,340px);gap:clamp(24px,4vw,48px);align-items:start}
@media (max-width:900px){ .metzijbeeld{grid-template-columns:1fr} .zijbeeld{max-width:420px;margin:0 auto} }

/* --- Slotoproep met beeld ----------------------------------------------- */
.cta{
  border:1px solid var(--lijn-fel);border-radius:var(--radius-l);
  padding:clamp(34px,6vw,72px);text-align:center;position:relative;overflow:hidden;
  background:radial-gradient(circle at 50% 0%,rgba(255,255,0,.13),transparent 65%),var(--paneel);
}
.cta__doek{position:absolute;inset:0;z-index:0}
.cta__doek img,.cta__doek video{width:100%;height:100%;object-fit:cover;opacity:.32}
/* Zonder deze laag hangt het van de foto af of de knop nog leesbaar is. */
.cta--beeld::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:radial-gradient(circle at 50% 30%,rgba(0,0,0,.55),rgba(0,0,0,.86));
}
.cta__over{position:relative;z-index:2}

/* --- Review met gezicht -------------------------------------------------- */
.review__voet{display:flex;align-items:center;gap:12px}
.review__beeld{
  width:42px;height:42px;border-radius:50%;overflow:hidden;flex:0 0 auto;
  display:grid;place-items:center;background:var(--paneel-2);border:1px solid var(--lijn);
}
.review__beeld img,.review__beeld video{width:100%;height:100%;object-fit:cover}
.review__beeld--letter{color:var(--geel);font:600 17px/1 var(--kop)}

/* --- Landbalk ------------------------------------------------------------ */
/* Een dun strookje boven de kop. Rustig gehouden: het moet er staan voor wie
   het nodig heeft en verder niemand in de weg zitten. Wie hem wegklikt houdt
   hem weg - dat wordt in zijn eigen browser onthouden. */
/* Onder een zwevende pil hoort een zwevend strookje: een balk van rand tot
   rand vloekt met de kop erboven. */
.landbalk{background:transparent;border:0;font-size:13.5px;margin-top:10px}
.landbalk[hidden]{display:none}
.landbalk__binnen{display:flex;align-items:center;gap:11px;padding-top:9px;padding-bottom:9px;
  background:var(--paneel-2);border:1px solid var(--lijn);border-radius:100px}
@media (max-width:600px){ .landbalk__binnen{border-radius:18px} }
.landbalk p{margin:0;color:var(--grijs);flex:1}
.landbalk a{color:var(--geel);text-decoration:underline;text-underline-offset:3px}
.landbalk a:hover{text-shadow:var(--gloed)}
.landbalk__vlag{font-size:15px;line-height:1}
.landbalk__weg{
  background:none;border:0;color:var(--grijs-diep);font-size:20px;line-height:1;
  padding:2px 6px;border-radius:6px;flex:0 0 auto;
}
.landbalk__weg:hover{color:var(--wit);background:rgba(255,255,255,.08)}
@media (max-width:600px){ .landbalk{font-size:12.5px} }

/* --- Landkiezer ---------------------------------------------------------- */
.landkiezer[hidden]{display:none}
.landkiezer{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px}
.landkiezer__achter{position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(6px)}
.landkiezer__doos{
  position:relative;width:min(460px,100%);background:var(--paneel);
  border:1px solid var(--lijn-fel);border-radius:var(--radius-l);
  padding:clamp(26px,4vw,38px);text-align:center;
  box-shadow:0 30px 80px rgba(0,0,0,.7), 0 0 60px rgba(255,255,0,.08);
  animation:kiezerop .4s cubic-bezier(.22,.61,.36,1);
}
@keyframes kiezerop{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
.landkiezer__doos h2{font-size:clamp(1.35rem,3vw,1.7rem);margin-bottom:10px}
.landkiezer__doos > p{color:var(--grijs);font-size:15px;margin-bottom:22px}
.landkiezer__keuzes{display:grid;gap:10px;text-align:left}
.landkeuze{
  display:flex;align-items:center;gap:14px;width:100%;
  background:var(--paneel-2);border:1px solid var(--lijn);border-radius:14px;
  padding:15px 17px;color:var(--wit);font:inherit;text-align:left;
  transition:border-color .25s ease,transform .25s ease,background .25s ease;
}
.landkeuze:hover{border-color:var(--geel);transform:translateY(-2px);background:rgba(255,255,0,.05)}
.landkeuze__vlag{font-size:24px;line-height:1;flex:0 0 auto}
.landkeuze strong{display:block;font-size:15.5px;font-weight:600}
.landkeuze small{display:block;color:var(--grijs);font-size:13px;margin-top:2px;line-height:1.4}
.landkeuze--rustig strong{color:var(--grijs)}
.landkiezer__sluit{
  background:none;border:0;color:var(--grijs-diep);font-size:13.5px;margin-top:18px;
  padding:8px 14px;border-radius:8px;
}
.landkiezer__sluit:hover{color:var(--wit)}

/* Op een telefoon geen schermvullend tussenscherm maar een paneel dat van
   onderen opkomt: de halve pagina blijft zichtbaar, dus je ziet meteen waar
   je terechtgekomen bent. Google rekent paginagrote tussenschermen aan, en
   terecht - je wil niet dat iemand uit een zoekresultaat eerst iets moet
   wegklikken voor hij iets ziet. */
@media (max-width:620px){
  .landkiezer{place-items:end center;padding:0}
  .landkiezer__doos{
    width:100%;border-radius:20px 20px 0 0;border-bottom:0;
    animation:kiezeromhoog .38s cubic-bezier(.22,.61,.36,1);
  }
  @keyframes kiezeromhoog{from{transform:translateY(100%)}to{transform:none}}
}

/* --- Het logo van de Belgische site -------------------------------------- */
.landbalk__logo{flex:0 0 auto;display:block;line-height:0}
.landbalk__logo img{height:22px;width:auto;opacity:.85;transition:opacity .25s ease}
.landbalk__logo:hover img{opacity:1}
@media (max-width:600px){ .landbalk__logo{display:none} }

.landkeuze--zuster{position:relative;padding-right:88px}
.landkeuze__logo{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  height:26px;width:auto;opacity:.9;
}
.landkeuze--zuster:hover .landkeuze__logo{opacity:1}

.voet__zuster{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  margin-top:36px;padding:18px 22px;border:1px solid var(--lijn);border-radius:var(--radius);
  background:var(--zwart);
}
.voet__zuster img{height:30px;width:auto;flex:0 0 auto}
.voet__zuster p{margin:0;color:var(--grijs);font-size:14px}
.voet__zuster a{color:var(--geel);text-decoration:underline;text-underline-offset:3px}
/* Het venster zelf krijgt de focus (zie site.js); daar hoort geen rand omheen. */
.landkiezer__doos:focus{outline:none}

/* --- Kaart zonder foto --------------------------------------------------- */
/* Geen grijs vlak met een fotopictogram - dat leest als een storing. Wel een
   stukje huisstijl met de naam erin, zodat het eruitziet alsof het zo hoort. */
.kaart__beeld--leeg{
  /* align-content erbij sinds er een logo boven de tekst staat: zonder dat
     rekken de twee rijen uit en staan beide net niet in het midden. */
  display:grid;place-items:center;align-content:center;position:relative;overflow:hidden;
  background:radial-gradient(circle at 50% 120%,rgba(255,255,0,.16),transparent 62%),var(--paneel-2);
}
.kaart__beeld--leeg::before{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:34px 34px;
  mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000 20%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000 20%,transparent 75%);
}
.kaart__beeld--leeg span{
  position:relative;font-family:var(--kop);font-weight:700;
  font-size:clamp(1.1rem,2.4vw,1.5rem);letter-spacing:-.02em;
  color:var(--geel);text-shadow:var(--gloed);text-align:center;padding:0 18px;
}

/* --- "Eén zaak, twee sites" ---------------------------------------------- */
.zuster{
  display:grid;grid-template-columns:1fr minmax(300px,420px);
  gap:clamp(26px,4vw,56px);align-items:center;
  border:1px solid var(--lijn);border-radius:var(--radius-l);
  padding:clamp(28px,4.5vw,54px);
  background:radial-gradient(circle at 15% 0%,rgba(255,255,0,.09),transparent 58%),var(--paneel);
}
@media (max-width:900px){ .zuster{grid-template-columns:1fr;gap:26px} }
.zuster__over .lood p:last-child{margin-bottom:0}
.zuster__sites{display:grid;gap:12px}
.zustersite{
  display:flex;align-items:center;gap:14px;position:relative;
  background:var(--zwart);border:1px solid var(--lijn);border-radius:14px;
  padding:16px 18px;transition:border-color .25s ease,transform .25s ease;
}
a.zustersite:hover{border-color:var(--geel);transform:translateY(-2px)}
.zustersite--hier{border-color:var(--lijn-fel);background:rgba(255,255,0,.05)}
.zustersite__vlag{font-size:23px;line-height:1;flex:0 0 auto}
.zustersite strong{display:block;font-size:15.5px;font-weight:600}
.zustersite small{display:block;color:var(--grijs);font-size:13px;margin-top:2px;line-height:1.45}
.zustersite__nu{
  margin-left:auto;flex:0 0 auto;font:600 10.5px/1 var(--tekst);
  letter-spacing:.14em;text-transform:uppercase;color:var(--geel);
  border:1px solid var(--lijn-fel);border-radius:100px;padding:6px 11px;
}
.zustersite__logo{margin-left:auto;flex:0 0 auto;height:26px;width:auto;opacity:.9}
.zustersite--hier .zustersite__logo{filter:drop-shadow(0 0 7px rgba(255,255,0,.4));opacity:1}
.zustersite--hier .zustersite__logo + .zustersite__nu{margin-left:12px}
@media (max-width:620px){
  /* Op een telefoon passen vlag, tekst, logo én het label "je bent hier" niet
     naast elkaar: het label werd de rand uit geduwd en maakte de hele pagina
     19 px breder dan het scherm. Het label zegt hier meer dan het logo, dus
     dat laatste gaat weg. */
  .zustersite--hier .zustersite__logo{display:none}
  .zustersite__nu{margin-left:auto}
}
a.zustersite:hover .zustersite__logo{opacity:1}

/* --- Twee kolommen die op een telefoon onder elkaar vallen --------------- */
/* Dit stond eerst als inline stijl op de sectie "Typ je tekst en zie meteen
   wat het kost". Een inline stijl luistert niet naar een mediaquery, dus op
   een telefoon bleef het twee kolommen naast elkaar: de tekst werd een strook
   van vier woorden breed en het beeld een postzegel ernaast. */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,60px);align-items:center}
@media (max-width:900px){
  .duo{grid-template-columns:1fr;gap:26px}
  /* Beeld boven de tekst: je wil eerst zien waar het over gaat. */
  .duo__beeld{order:-1}
}

/* --- Vlaggen ------------------------------------------------------------- */
.vlag{display:block;border-radius:3px;box-shadow:0 0 0 1px rgba(255,255,255,.14)}
.landkeuze__vlag,.zustersite__vlag,.landbalk__vlag{display:flex;align-items:center;line-height:0}
.landkeuze__vlag--wereld .vlag{box-shadow:none;color:var(--geel);opacity:.85}

/* --- Het merk bovenaan het landkeuzevenster ------------------------------ */
.landkiezer__kop{
  display:flex;align-items:center;gap:11px;margin-bottom:18px;
  font:700 15px/1 var(--kop);letter-spacing:-.01em;
}
.landkiezer__kop b{color:var(--geel);font-weight:700}
.landkiezer__merk{
  height:32px;width:auto;display:block;
  filter:drop-shadow(0 0 8px rgba(255,255,0,.5)) drop-shadow(0 0 20px rgba(255,255,0,.25));
}
@media (max-width:620px){
  /* Op een telefoon staat de taalkiezer rechtsboven; het merk mag daar niet
     tegenaan lopen, dus houden we rechts ruimte vrij. */
  .landkiezer__kop{margin-bottom:14px;padding-right:86px}
  .landkiezer__merk{height:26px}
}

/* --- Taalknoppen in het landkeuzevenster --------------------------------- */
.landkiezer__talen{
  position:absolute;top:16px;right:16px;display:flex;gap:4px;
  background:rgba(255,255,255,.04);border:1px solid var(--lijn);border-radius:100px;padding:3px;
}
.landkiezer__talen a{
  padding:5px 11px;border-radius:100px;font:600 11.5px/1 var(--tekst);
  letter-spacing:.08em;color:var(--grijs-diep);transition:all .2s ease;
}
.landkiezer__talen a:hover{color:var(--wit)}
.landkiezer__talen a.aan{background:var(--geel);color:#000}
@media (max-width:620px){ .landkiezer__talen{top:14px;right:14px} }

/* --- Anatomie op een telefoon: beeld eerst ------------------------------- */
@media (max-width:1000px){
  /* De foto stond tussen de linker- en de rechterkolom in, dus op een smal
     scherm kwam hij middenin de lijst met uitleg te staan. Nu bovenaan. */
  .anatomie__doek{order:-1}
}

/* --- Aan en uit ---------------------------------------------------------- */
/* Een schakelaar die de neon op de foto's dooft. Geen tweede set foto's maar
   een filter over dezelfde afbeelding: dat scheelt laadtijd en het klopt met
   wat je in het echt ziet - een uitgeschakeld bord is niet zwart, het is een
   doffe siliconen buis op een heldere plaat. */
.lichtknop{display:flex;align-items:center;gap:13px;justify-content:center;margin-bottom:clamp(28px,4vw,44px)}
.lichtknop__label{font:600 12.5px/1 var(--tekst);letter-spacing:.16em;text-transform:uppercase;color:var(--geel);min-width:88px}
.schakelaar{
  width:58px;height:32px;border-radius:100px;position:relative;flex:0 0 auto;
  background:rgba(255,255,0,.18);border:1px solid var(--lijn-fel);
  transition:background .3s ease,border-color .3s ease,box-shadow .3s ease;
  box-shadow:0 0 18px rgba(255,255,0,.25);
}
.schakelaar__bal{
  position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;
  background:var(--geel);box-shadow:0 0 12px var(--geel);
  transition:transform .3s cubic-bezier(.22,.61,.36,1),background .3s ease,box-shadow .3s ease;
}
.schakelaar[aria-pressed="true"] .schakelaar__bal{transform:translateX(26px)}
.schakelaar[aria-pressed="false"]{background:rgba(255,255,255,.06);border-color:var(--lijn);box-shadow:none}
.schakelaar[aria-pressed="false"] .schakelaar__bal{background:#4a4a4a;box-shadow:none}

.uitersten{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,3vw,32px)}
@media (max-width:860px){ .uitersten{grid-template-columns:1fr} }

.uiterste{
  border:1px solid var(--lijn);border-radius:var(--radius-l);overflow:hidden;
  background:var(--paneel);display:flex;flex-direction:column;
  transition:border-color .35s ease;
}
.uiterste:hover{border-color:var(--lijn-fel)}
.uiterste__toneel{
  position:relative;aspect-ratio:5/4;display:grid;place-items:center;overflow:hidden;
  padding:clamp(18px,3vw,38px) clamp(18px,3vw,38px) 0;
  background:radial-gradient(ellipse 60% 55% at 50% 42%,rgba(255,255,0,.13),transparent 68%),#050505;
  transition:background .6s ease;
}
.uiterste__bord{
  max-width:100%;max-height:74%;width:auto;object-fit:contain;position:relative;z-index:2;
  filter:drop-shadow(0 0 26px rgba(255,255,0,.45));
  transition:filter .6s ease,opacity .6s ease;
}
/* De weerspiegeling op de vloer. */
.uiterste__spiegel{
  position:absolute;left:50%;top:calc(42% + 37%);transform:translateX(-50%) scaleY(-1);
  max-width:100%;max-height:74%;width:auto;object-fit:contain;opacity:.18;z-index:1;
  filter:blur(1.5px);
  mask-image:linear-gradient(to top,transparent 4%,#000 62%);
  -webkit-mask-image:linear-gradient(to top,transparent 4%,#000 62%);
  transition:opacity .6s ease,filter .6s ease;
  pointer-events:none;
}

/* Licht uit: geen gloed, geen kleur, geen weerspiegeling. */
.uitersten.uit .uiterste__toneel{background:radial-gradient(ellipse 60% 55% at 50% 42%,rgba(255,255,255,.05),transparent 68%),#0b0b0b}
.uitersten.uit .uiterste__bord{filter:grayscale(1) brightness(.42) contrast(.85) drop-shadow(0 6px 14px rgba(0,0,0,.6))}
.uitersten.uit .uiterste__spiegel{opacity:.05;filter:grayscale(1) brightness(.4) blur(2px)}

.uiterste__lijf{padding:clamp(20px,3vw,28px);display:flex;flex-direction:column;gap:9px;flex:1}
.uiterste__lijf h3{font-size:1.22rem}
.uiterste__lijf p{color:var(--grijs);font-size:15px;margin:0}
.uiterste__specs{
  display:grid;gap:1px;margin:14px 0 0;background:var(--lijn);
  border:1px solid var(--lijn);border-radius:12px;overflow:hidden;
}
.uiterste__specs > div{display:flex;justify-content:space-between;gap:14px;background:var(--zwart);padding:11px 15px}
.uiterste__specs dt{font-size:13px;color:var(--grijs-diep);margin:0}
.uiterste__specs dd{font-size:13.5px;font-weight:600;color:var(--wit);margin:0;text-align:right}

/* --- De atelierband: echte opnames, staand ------------------------------- */
/* Dit is bewust géén automatisch lopende band zoals de galerij. Video's die
   uit zichzelf voorbijschuiven kun je niet bekijken: net als je iets ziet is
   het weg. Deze strook staat stil tot jij hem duwt, klikt of veegt. */
.atelier{overflow:hidden}
.atelier__band{position:relative;margin-top:clamp(28px,4vw,42px)}
.atelier__spoor{
  display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:4px clamp(18px,6vw,64px) 18px;scroll-padding-left:clamp(18px,6vw,64px);
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.atelier__spoor::-webkit-scrollbar{display:none}
.atelierkaart{
  flex:0 0 auto;width:clamp(210px,22vw,268px);scroll-snap-align:start;margin:0;
}
.atelierkaart__doek{
  position:relative;aspect-ratio:9/16;border-radius:var(--radius);overflow:hidden;
  background:var(--paneel-2);border:1px solid var(--lijn);
  transition:border-color .3s ease,transform .5s cubic-bezier(.22,.61,.36,1);
}
.atelierkaart:hover .atelierkaart__doek{border-color:var(--lijn-fel);transform:translateY(-4px)}
/* Let op de > : zonder dat pakte deze regel ook het logo in de hoek, en dan
   ligt het beeldmerk als een gordijn van 100% over de hele opname heen. */
.atelierkaart__doek > video,.atelierkaart__doek > img{width:100%;height:100%;object-fit:cover;display:block}

/* Het beeldmerk in de hoek van elke kaart. Klein, half doorzichtig: het moet
   duidelijk maken dat dit eigen werk is en niet een voorraadfilmpje, zonder
   dat het als een watermerk over de opname heen ligt. */
.atelierkaart__merk{position:absolute;left:12px;top:12px;z-index:2;line-height:0;opacity:.75;pointer-events:none}
.atelierkaart__logo{height:22px;width:auto;display:block;filter:drop-shadow(0 0 6px rgba(0,0,0,.9))}
.atelierkaart figcaption{margin-top:11px;font-size:13.5px;color:var(--grijs)}

/* De randen: de strook loopt door tot buiten het scherm, dus vervagen we hem
   aan beide kanten. Zonder dit ziet een halve kaart eruit als een fout. */
.atelier__band::before,.atelier__band::after{
  content:'';position:absolute;top:0;bottom:0;width:clamp(18px,6vw,72px);pointer-events:none;z-index:2;
}
.atelier__band::before{left:0;background:linear-gradient(90deg,#000,transparent)}
.atelier__band::after{right:0;background:linear-gradient(270deg,#000,transparent)}

.atelier__pijl{
  position:absolute;top:calc(50% - 24px);z-index:3;width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;font:400 26px/1 var(--kop);padding-bottom:3px;
  background:rgba(0,0,0,.72);border:1px solid var(--lijn-fel);color:var(--wit);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:background .25s ease,color .25s ease,opacity .25s ease;
}
.atelier__pijl:hover{background:var(--geel);color:#000;border-color:var(--geel)}
.atelier__pijl--links{left:clamp(6px,2vw,20px)}
.atelier__pijl--rechts{right:clamp(6px,2vw,20px)}
.atelier__pijl[disabled]{opacity:.25;pointer-events:none}
@media (max-width:760px){
  /* Op een telefoon veeg je. Twee knoppen die over de kaarten heen liggen
     zitten dan alleen maar in de weg. */
  .atelier__pijl{display:none}
  .atelierkaart{width:min(64vw,230px)}
}

/* Het beeldmerk in het vlak dat een ontbrekende foto vervangt. */
.kaart__beeld-merk{height:34px;width:auto;opacity:.5;margin-bottom:10px;filter:drop-shadow(0 0 8px rgba(255,255,0,.35))}

/* --- De video bovenaan een case ------------------------------------------ */
/* Speelt vanzelf en zonder geluid. De knop rechtsonder zet het geluid aan;
   die verschijnt pas als je met je muis over de video gaat, want op een
   pagina die je aan het lezen bent hoort geen knop te schreeuwen. */
.casevideo{position:relative;overflow:hidden}
.casevideo__geluid{
  position:absolute;right:14px;bottom:14px;z-index:2;
  border:1px solid var(--lijn-fel);border-radius:100px;padding:8px 15px;
  font:600 12px/1 var(--tekst);letter-spacing:.04em;color:var(--wit);
  background:rgba(0,0,0,.6);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:0;transform:translateY(6px);transition:all .25s ease;cursor:pointer;
}
.casevideo:hover .casevideo__geluid,
.casevideo__geluid:focus-visible,
.casevideo__geluid[data-aan="1"]{opacity:1;transform:none}
.casevideo__geluid:hover{background:var(--geel);color:#000;border-color:var(--geel)}
@media (hover:none){ .casevideo__geluid{opacity:1;transform:none} }

/* ==========================================================================
   De offertepagina
   Eén document, geen menu, geen afleiding. Gebruikt dezelfde kleuren en
   hetzelfde lettertype als de site, zodat je klant ziet dat het van ons komt,
   maar verder een eigen indeling: hier wordt gelezen en beslist.
   ========================================================================== */
.offertepagina{background:var(--zwart)}
.offkop{border-bottom:1px solid var(--lijn);position:sticky;top:0;z-index:20;
  background:rgba(0,0,0,.86);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.offkop__binnen{display:flex;align-items:center;justify-content:space-between;gap:16px;height:66px}
.offkop__nr{font:600 12px/1 var(--tekst);letter-spacing:.14em;text-transform:uppercase;color:var(--grijs-diep)}

.offblad{padding:clamp(30px,5vw,60px) 0 clamp(60px,8vw,110px)}
.offblad .omhulsel{max-width:900px}

.offmelding{border-radius:14px;padding:15px 18px;margin-bottom:26px;font-size:14.5px;line-height:1.6}
.offmelding--let{background:rgba(255,255,0,.08);border:1px solid var(--lijn-fel);color:var(--wit)}
.offmelding--goed{background:rgba(80,220,120,.1);border:1px solid rgba(80,220,120,.4);color:#c8f5d6}

.offhero{margin-bottom:clamp(28px,4vw,44px)}
.offhero h1{font-size:clamp(1.9rem,5vw,3rem);margin:14px 0 0;line-height:1.08}
.offhero .lood{margin-top:18px;max-width:62ch}
.offmeta{display:flex;flex-wrap:wrap;gap:26px;margin-top:26px;padding-top:22px;border-top:1px solid var(--lijn)}
.offmeta div{display:flex;flex-direction:column;gap:5px}
.offmeta span{font:600 10.5px/1 var(--tekst);letter-spacing:.14em;text-transform:uppercase;color:var(--grijs-diep)}
.offmeta strong{font-size:15px}

/* --- één product --- */
.offregels{display:grid;gap:20px}
.offkaart{
  background:var(--paneel);border:1px solid var(--lijn);border-radius:var(--radius-l);
  overflow:hidden;display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);
}
@media (max-width:820px){ .offkaart{grid-template-columns:1fr} }
.offkaart__beelden{display:grid;gap:2px;background:var(--paneel-2);align-content:start}
.offkaart__beeld{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/5}
.offkaart__beeld.is-groot{aspect-ratio:1}
@media (max-width:820px){ .offkaart__beeld,.offkaart__beeld.is-groot{aspect-ratio:16/10} }
.offkaart__lijf{padding:clamp(20px,3vw,28px)}
.offkaart__kop{display:flex;justify-content:space-between;gap:18px;align-items:flex-start}
.offkaart__kop h2{font-size:clamp(1.15rem,2.4vw,1.5rem);margin:0}
.offkaart__onder{color:var(--grijs);font-size:14px;margin:6px 0 0}
.offkaart__prijs{text-align:right;flex:0 0 auto}
.offkaart__prijs small{display:block;color:var(--grijs-diep);font-size:12px;margin-bottom:2px}
.offkaart__prijs b{font:700 clamp(1.1rem,2.4vw,1.4rem)/1 var(--kop);color:var(--geel);white-space:nowrap}
.offkaart__tekst{color:var(--grijs);font-size:14.5px;line-height:1.7;margin:14px 0 0}

.offpunten{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.offpunten li{
  font-size:12.5px;color:var(--grijs);border:1px solid var(--lijn);
  border-radius:100px;padding:6px 13px;
}

/* --- de keuzes --- */
.offopties{margin-top:22px;padding-top:20px;border-top:1px solid var(--lijn)}
.offopties__kop{display:block;font:600 10.5px/1 var(--tekst);letter-spacing:.14em;
  text-transform:uppercase;color:var(--grijs-diep);margin-bottom:14px}
.offgroep + .offgroep{margin-top:16px}
.offgroep__naam{display:block;font-size:13.5px;color:var(--grijs);margin-bottom:8px}
.offkeuzes{display:flex;flex-wrap:wrap;gap:8px}
.offkeuze{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  background:var(--paneel-2);border:1px solid var(--lijn);border-radius:100px;
  padding:10px 16px;color:var(--wit);font:500 14px/1 var(--tekst);
  transition:border-color .2s ease,background .2s ease,transform .2s ease;
}
.offkeuze:hover{border-color:var(--lijn-fel);transform:translateY(-1px)}
.offkeuze.is-aan{border-color:var(--geel);background:rgba(255,255,0,.1);box-shadow:0 0 0 1px var(--geel) inset}
.offkeuze small{color:var(--grijs-diep);font-size:12.5px}
.offkeuze.is-aan small{color:var(--geel)}
.offkeuze__stip{width:14px;height:14px;border-radius:50%;box-shadow:0 0 0 1px rgba(255,255,255,.25),0 0 10px currentColor}
.offkeuze[disabled]{opacity:.55;cursor:default;transform:none}
.offinvoer{
  width:100%;background:var(--paneel-2);border:1px solid var(--lijn);border-radius:12px;
  padding:12px 15px;color:var(--wit);font:400 14.5px/1.4 var(--tekst);
}
.offinvoer:focus{outline:2px solid rgba(255,255,0,.55);outline-offset:1px}

.offincl{margin-top:20px;padding-top:18px;border-top:1px solid var(--lijn)}
.offincl__kop{display:block;font:600 10.5px/1 var(--tekst);letter-spacing:.14em;
  text-transform:uppercase;color:var(--grijs-diep);margin-bottom:10px}
.offincl ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.offincl li{position:relative;padding-left:22px;color:var(--grijs);font-size:14px}
.offincl li::before{content:"";position:absolute;left:0;top:7px;width:11px;height:6px;
  border-left:2px solid var(--geel);border-bottom:2px solid var(--geel);transform:rotate(-45deg)}

/* --- de rekening --- */
.offtotaal{
  margin-top:26px;background:var(--paneel);border:1px solid var(--lijn-fel);
  border-radius:var(--radius-l);padding:clamp(22px,3.4vw,32px);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,320px);gap:clamp(24px,4vw,40px);
}
@media (max-width:760px){ .offtotaal{grid-template-columns:1fr} }
.offrij{display:flex;justify-content:space-between;gap:16px;padding:9px 0;font-size:14.5px;color:var(--grijs)}
.offrij b{color:var(--wit);font-weight:600}
.offrij--groot{border-top:1px solid var(--lijn);margin-top:8px;padding-top:16px;font-size:16px;color:var(--wit)}
.offrij--groot b{font:700 clamp(1.5rem,3.4vw,2rem)/1 var(--kop);color:var(--geel)}
.offrij--klein{font-size:13px;color:var(--grijs-diep);padding:5px 0}
.offrij--klein b{color:var(--grijs);font-weight:500}
/* Even oplichten als het bedrag verandert: anders klikt iemand op "groot" en
   denkt hij dat er niets gebeurde. */
[data-som="totaal"].is-nieuw{animation:offpuls .5s ease}
@keyframes offpuls{
  0%{text-shadow:none} 30%{text-shadow:0 0 22px rgba(255,255,0,.85)} 100%{text-shadow:none}
}

.offakkoord{align-self:center}
.offakkoord label{display:block;font:600 10.5px/1 var(--tekst);letter-spacing:.14em;
  text-transform:uppercase;color:var(--grijs-diep);margin-bottom:8px}
.offakkoord input{
  width:100%;background:var(--paneel-2);border:1px solid var(--lijn);border-radius:12px;
  padding:13px 16px;color:var(--wit);font:400 15px/1.4 var(--tekst);margin-bottom:12px;
}
.offakkoord input:focus{outline:2px solid rgba(255,255,0,.55);outline-offset:1px}
.offakkoord__knop{width:100%;justify-content:center}
.offakkoord__hint{color:var(--grijs-diep);font-size:12.5px;line-height:1.6;margin:12px 0 0}
.offakkoord--klaar strong{display:block;font-size:17px;margin-bottom:6px}
.offakkoord--klaar p{color:var(--grijs);font-size:14px;margin:0}

.offslot{margin-top:26px;color:var(--grijs);font-size:15px;line-height:1.75;max-width:64ch}
.offvoet{
  margin-top:clamp(36px,6vw,64px);padding-top:28px;border-top:1px solid var(--lijn);
  display:flex;flex-wrap:wrap;gap:26px;justify-content:space-between;align-items:flex-start;
}
.offvoet h3{font-size:1.15rem;margin:0 0 8px}
.offvoet p{color:var(--grijs);font-size:14.5px;margin:0 0 16px;max-width:44ch}
.offvoet__links{display:flex;flex-direction:column;gap:10px;font-size:14px}
.offvoet__links a{color:var(--grijs);text-decoration:underline;text-underline-offset:3px}
.offvoet__links a:hover{color:var(--geel)}

/* --- de wegklikker --- */
.offblijf[hidden]{display:none}
.offblijf{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px;
  background:rgba(0,0,0,.72);backdrop-filter:blur(6px);opacity:0;transition:opacity .26s ease}
.offblijf.is-open{opacity:1}
.offblijf__doos{
  width:min(420px,100%);background:var(--paneel);border:1px solid var(--lijn-fel);
  border-radius:var(--radius-l);padding:clamp(24px,4vw,32px);text-align:center;
  transform:translateY(10px);transition:transform .3s cubic-bezier(.22,.61,.36,1);
}
.offblijf.is-open .offblijf__doos{transform:none}
.offblijf__doos h3{font-size:1.3rem;margin:0 0 10px}
.offblijf__doos p{color:var(--grijs);font-size:14.5px;margin:0 0 20px}

/* --- Pictogrammen in het menu -------------------------------------------- */
/* Alleen op smalle schermen. In de balk op een groot scherm maken ze het menu
   drukker zonder iets toe te voegen; in een uitgeklapte lijst van negen
   regels vind je met een vorm sneller je weg dan met een woord. */
.nav__icoon{display:none;flex:0 0 auto;opacity:.75}
.taalkiezer__bol{margin-right:6px;opacity:.8}
@media (max-width:1500px){
  .nav__icoon{display:inline-block;margin-right:12px;vertical-align:-4px}
  .nav a,.nav__knop{display:flex;align-items:center}
  .nav a[aria-current="page"] .nav__icoon{opacity:1;color:var(--geel)}
}

/* --- Het zwevende WhatsApp-knopje ---------------------------------------- */
/* Rechtsonder, boven alles, maar niet over de inhoud heen op een telefoon:
   daar schuift hij mee omhoog zodra het toetsenbord opengaat (env(safe-area)).
   De ring pulseert traag - één keer per vier seconden, niet vaker: een knop
   die constant knippert leest als een advertentie. */
.wa{
  position:fixed;right:clamp(14px,2.5vw,26px);z-index:150;
  bottom:calc(clamp(14px,2.5vw,26px) + env(safe-area-inset-bottom,0px));
  width:58px;height:58px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#25d366;color:#0a2f18;
  box-shadow:0 10px 30px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.12) inset;
  transition:transform .28s cubic-bezier(.22,.61,.36,1),box-shadow .28s ease;
}
.wa:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 16px 40px rgba(37,211,102,.35)}
.wa:active{transform:translateY(-1px) scale(.99)}
.wa__merk{position:relative;z-index:2}
.wa__ring{
  position:absolute;inset:0;border-radius:50%;border:2px solid #25d366;
  animation:wapuls 4s ease-out infinite;pointer-events:none;
}
@keyframes wapuls{
  0%{transform:scale(1);opacity:.7}
  40%{transform:scale(1.55);opacity:0}
  100%{transform:scale(1.55);opacity:0}
}
/* Het tekstballonnetje ernaast. Verschijnt bij hover op een muis; op een
   telefoon zou het over de knop heen liggen, dus daar niet. */
.wa__ballon{
  position:absolute;right:calc(100% + 12px);top:50%;transform:translateY(-50%) translateX(8px);
  background:var(--paneel);border:1px solid var(--lijn-fel);border-radius:14px;
  padding:10px 15px;white-space:nowrap;color:var(--wit);
  display:flex;flex-direction:column;gap:2px;line-height:1.3;
  opacity:0;visibility:hidden;transition:all .25s ease;pointer-events:none;
  box-shadow:0 10px 30px rgba(0,0,0,.5);
}
.wa__ballon strong{font-size:13.5px;font-weight:600}
.wa__ballon small{font-size:11.5px;color:var(--grijs-diep)}
.wa:hover .wa__ballon,.wa:focus-visible .wa__ballon{opacity:1;visibility:visible;transform:translateY(-50%) translateX(0)}
@media (max-width:640px){
  .wa{width:52px;height:52px}
  .wa__ballon{display:none}
}
@media (prefers-reduced-motion:reduce){ .wa__ring{animation:none;opacity:0} }

/* --- De bewijsstrook met cijfers ----------------------------------------- */
/* Hier stond een kale balk met vier getallen. Die leest als een sjabloon.
   Nu staat links waaróm je naar die getallen kijkt en rechts wat ze zijn,
   met bij elk getal één regel over waar het vandaan komt. */
.bewijs{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,64px);align-items:center}
@media (max-width:900px){ .bewijs{grid-template-columns:1fr} }
.bewijs__over h2{font-size:clamp(1.6rem,3.6vw,2.5rem);margin-top:14px}
.bewijs__raster{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:460px){ .bewijs__raster{grid-template-columns:1fr} }
.bewijs__kaart{
  position:relative;overflow:hidden;
  background:var(--paneel);border:1px solid var(--lijn);border-radius:var(--radius);
  padding:clamp(20px,2.6vw,26px);
  transition:border-color .3s ease,transform .3s ease;
}
.bewijs__kaart:hover{border-color:var(--lijn-fel);transform:translateY(-3px)}

/* De bron van het cijfer, rechtsboven in de kaart.

   Positie absoluut en niet in de tekstkolom: het getal moet het eerste zijn
   wat je ziet, het logo het tweede. Zou het in de stroom staan, dan duwde het
   het cijfer naar beneden en werd het logo net zo belangrijk als het getal.

   max-width op de hele groep is nodig, want de kaart is een grid van twee
   kolommen op een breed scherm en van één op een telefoon: zonder grens loopt
   een breed logo (PostNL naast bpost) over het getal heen. */
/* LET OP HET GEWICHT. Hier stond ".bewijs__merken" en dat verloor.
   Een paar regels hierboven staat ".bewijs__kaart span{display:block}" - dat
   weegt 0-1-1 (klasse + elementnaam) en dit hoekje is een <span>, dus het werd
   een blok in plaats van een flexrij en de twee logo's kwamen onder elkaar.
   Met de klasse van de kaart erbij weegt deze regel 0-2-0 en wint hij. Dezelfde
   val als bij het logo in de vergelijkingstabel; zie app-secties.php. */
.bewijs__kaart .bewijs__merken{
  position:absolute;top:clamp(16px,2vw,22px);right:clamp(16px,2vw,22px);
  display:flex;align-items:center;justify-content:flex-end;gap:10px;
  /* nowrap staat er met opzet bij. Zonder die regel viel het tweede logo
     onder het eerste (bpost boven PostNL) zodra de twee samen breder waren
     dan de max-width, en dan liep het hoekje twee regels hoog over het
     cijfer heen. Ze horen naast elkaar; passen ze niet, dan worden ze
     kleiner - daarvoor is de min-width:0 hieronder. */
  flex-wrap:nowrap;
  max-width:52%;pointer-events:none;
}
/* Staat er maar EEN beeld, dan mag het groter. Twee logo's naast elkaar in
   hetzelfde hoekje moeten kleiner blijven, anders raken ze het cijfer. */
.bewijs__kaart .bewijs__merken img:only-child{height:clamp(34px,4.4vw,52px)}
.bewijs__kaart .bewijs__merken img{
  height:clamp(24px,3.1vw,36px);width:auto;max-width:100%;object-fit:contain;
  min-width:0;flex:0 1 auto;
  /* Iets ingehouden: dit zijn andermans merken op onze kaart. Ze moeten
     herkenbaar zijn, niet de kaart overnemen. */
  opacity:.9;
}
@media (max-width:560px){
  .bewijs__kaart .bewijs__merken{max-width:38%;gap:7px}
  .bewijs__kaart .bewijs__merken img{height:24px}
}
/* Een dunne gele lijn die bij hover over de bovenrand loopt: hetzelfde
   trucje als bij de knop, zodat de kaarten bij de rest horen. */
.bewijs__kaart::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--geel),transparent);
  transform:translateX(-100%);transition:transform .7s ease;
}
.bewijs__kaart:hover::before{transform:translateX(100%)}
/* Ruimte rechts vrijhouden voor het hoekje met de merken. Dat hoekje staat
   absoluut - het duwt dus niets weg - en "4,9/5" is breed genoeg om er anders
   tegenaan te lopen. Padding en niet marge: de tekst blijft links uitgelijnd. */
.bewijs__kaart b{
  display:block;font:700 clamp(2rem,4.6vw,2.9rem)/1 var(--kop);color:var(--geel);
  letter-spacing:-.03em;text-shadow:0 0 26px rgba(255,255,0,.35);
  padding-right:calc(52% + 10px);
}
.bewijs__kaart span{display:block;margin-top:8px;font-size:14.5px;color:var(--wit)}
.bewijs__kaart small{display:block;margin-top:8px;font-size:12.5px;line-height:1.6;color:var(--grijs-diep)}

/* --- Reviews: lange, echte citaten ---------------------------------------- */
/* Deze reviews komen woordelijk uit Google en Trustpilot en sommige zijn lang.
   Afknippen mag niet - dan verander je wat iemand geschreven heeft - dus
   klemmen we ze visueel af op acht regels. De hele tekst blijft in de pagina
   staan, ook voor een zoekmachine en een schermlezer. */
.review p{
  display:-webkit-box;-webkit-line-clamp:8;line-clamp:8;-webkit-box-orient:vertical;
  overflow:hidden;
}

/* ==========================================================================
   De grote vergelijking
   Een tabel van zesentwintig rijen in drie kolommen. Op een breed scherm een
   echt raster met een plakkende koprij; op een telefoon valt elke rij uiteen
   in drie blokjes met hun eigen label, want een tabel van drie kolommen op
   390 px is onleesbaar - dat is precies waarom de meeste vergelijkingen op
   een telefoon niet gelezen worden.
   ========================================================================== */
/* Let op: GEEN overflow:hidden hier. Dat zette de plakkende koprij hieronder
   uit - een ouder met overflow:hidden maakt van position:sticky een gewone
   div, en dan schuift de koprij gewoon weg. De ronde hoeken zitten daarom op
   de koprij en op de laatste rij. */
/* Geen extra lucht bovenaan: de tekst erboven heeft zelf al ruimte onder
   zich, en samen werd dat een gat van een kwart scherm. */
.kwal{padding-top:0}
.kwaltabel{border:1px solid var(--lijn);border-radius:var(--radius-l);background:var(--paneel)}
.kwalkop{border-radius:calc(var(--radius-l) - 1px) calc(var(--radius-l) - 1px) 0 0}
.kwalrij:last-child{border-radius:0 0 calc(var(--radius-l) - 1px) calc(var(--radius-l) - 1px);overflow:hidden}
.kwalkop{
  display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));
  position:sticky;top:84px;z-index:10;
  background:rgba(8,8,8,.96);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--lijn-fel);
}
.kwalkop__wat,.kwalkop__cel{padding:16px 18px;font:600 13px/1.3 var(--tekst)}
.kwalkop__wat{color:var(--grijs-diep);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.kwalkop__cel{display:flex;align-items:center;gap:8px;color:var(--grijs);border-left:1px solid var(--lijn)}
.kwalkop__cel--wij{color:var(--geel);background:rgba(255,255,0,.05)}
.kwalkop__logo{height:20px;width:auto;flex:0 0 auto}

.kwalgroep{
  padding:14px 18px;background:var(--paneel-2);border-top:1px solid var(--lijn);
  font:600 10.5px/1 var(--tekst);letter-spacing:.16em;text-transform:uppercase;color:var(--grijs-diep);
}
.kwalrij{
  display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));
  border-top:1px solid var(--lijn);transition:background .25s ease;
}
.kwalrij:hover{background:rgba(255,255,255,.02)}
.kwalrij__wat{padding:16px 18px}
.kwalrij__wat strong{display:block;font-size:14.5px;font-weight:600}
.kwalrij__wat small{display:block;margin-top:5px;font-size:12.5px;line-height:1.6;color:var(--grijs-diep)}
.kwalrij__cel{
  padding:16px 18px;border-left:1px solid var(--lijn);
  font-size:14px;line-height:1.55;color:var(--grijs);
}
.kwalrij__cel--wij{color:var(--wit);background:rgba(255,255,0,.035)}
.kwalrij__cel--wij.is-winst{position:relative}
/* Een dun geel streepje links bij de rijen waar wij winnen. Geen vinkje: een
   vinkje beweert iets, dit wijst alleen aan waar je moet kijken. */
.kwalrij__cel--wij.is-winst::before{
  content:"";position:absolute;left:0;top:12px;bottom:12px;width:2px;
  background:var(--geel);box-shadow:0 0 12px rgba(255,255,0,.7);
}
.kwalrij__label{display:none}

@media (max-width:900px){
  .kwalkop{display:none}
  .kwalrij{grid-template-columns:1fr;gap:0}
  .kwalrij__wat{padding-bottom:8px}
  .kwalrij__cel{
    border-left:0;border-top:1px solid var(--lijn);padding:12px 18px;
    display:grid;grid-template-columns:minmax(0,120px) minmax(0,1fr);gap:14px;align-items:start;
  }
  .kwalrij__label{
    display:block;font:600 10.5px/1.4 var(--tekst);letter-spacing:.1em;
    text-transform:uppercase;color:var(--grijs-diep);
  }
  .kwalrij__cel--wij .kwalrij__label{color:var(--geel)}
  .kwalrij__cel--wij.is-winst::before{top:0;bottom:0}
}
@media (max-width:420px){
  .kwalrij__cel{grid-template-columns:1fr;gap:4px}
}

.kwaluitslag{
  margin-top:clamp(28px,4vw,44px);display:grid;
  grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:clamp(24px,4vw,48px);align-items:center;
  background:var(--paneel);border:1px solid var(--lijn-fel);border-radius:var(--radius-l);
  padding:clamp(24px,4vw,42px);
}
@media (max-width:760px){ .kwaluitslag{grid-template-columns:1fr;text-align:left} }
.kwaluitslag__cijfer b{
  display:block;font:700 clamp(3rem,8vw,4.6rem)/1 var(--kop);color:var(--geel);
  letter-spacing:-.04em;text-shadow:0 0 34px rgba(255,255,0,.4);
}
.kwaluitslag__cijfer small{font-size:.42em;color:var(--grijs-diep);text-shadow:none}
.kwaluitslag__cijfer span{display:block;margin-top:10px;font-size:13.5px;color:var(--grijs);max-width:24ch}
.kwaluitslag__tekst h3{font-size:clamp(1.3rem,2.8vw,1.9rem);margin:0 0 12px}

/* =========================================================================
   DE SHOP
   -------------------------------------------------------------------------
   Alles wat bij /shop/ en de productpagina's hoort. Onderaan dit blad en niet
   ertussenin, zodat je met één blik ziet wat er bij de winkel hoort.

   LET OP - dit blad wordt door nls_css_scope() (includes/app-secties.php)
   herschreven om ook ONDER de tools te kunnen staan. Die lezer is met opzet
   eenvoudig. Dus hier: GEEN nesting, GEEN &, GEEN :is/:where/:has. Eén kiezer
   per regel, plat. Een @keyframes krijgt een eigen naam met "shop" of "mont"
   erin, want keyframes zijn niet te schalen en de ontwerptool heeft er ook.
   ========================================================================= */

.ico{flex:none}

/* --- Het raster met productkaarten ------------------------------------- */
.prijk{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px}
.prijk--groot{grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:22px}

.pkaart{
  display:flex;flex-direction:column;background:var(--paneel);
  border:1px solid var(--lijn);border-radius:var(--radius-l);overflow:hidden;
  transition:transform .35s cubic-bezier(.22,.61,.36,1), border-color .3s ease, box-shadow .4s ease;
  position:relative;
}
.pkaart:hover{transform:translateY(-6px);border-color:var(--lijn-fel);box-shadow:0 22px 50px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,0,.09)}
.pkaart__beeld{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:#050505}
.pkaart__beeld img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.22,.61,.36,1),filter .4s ease}
.pkaart:hover .pkaart__beeld img{transform:scale(1.055)}
.pkaart__leeg{
  display:flex;align-items:center;justify-content:center;width:100%;height:100%;
  font:700 3.4rem/1 var(--kop);color:var(--geel);text-shadow:var(--gloed);
  background:radial-gradient(circle at 50% 45%,rgba(255,255,0,.10),transparent 62%);
}
.pkaart__badge{
  position:absolute;top:12px;left:12px;z-index:2;
  background:var(--geel);color:#000;font:700 10px/1 var(--tekst);
  letter-spacing:.14em;text-transform:uppercase;padding:7px 11px;border-radius:100px;
  box-shadow:0 0 18px rgba(255,255,0,.5);
}
/* De kleurstippen. Ze schuiven van onder in beeld bij aanwijzen: dat is het
   moment waarop iemand zich afvraagt "kan dit ook in het roze". */
.pkaart__stippen{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;align-items:center;gap:6px;padding:22px 14px 12px;
  background:linear-gradient(to top,rgba(0,0,0,.86),transparent);
  transform:translateY(100%);opacity:0;transition:transform .4s ease,opacity .35s ease;
}
.pkaart:hover .pkaart__stippen{transform:translateY(0);opacity:1}
.pkaart__stippen i{
  width:13px;height:13px;border-radius:50%;background:var(--k);
  box-shadow:0 0 8px var(--k),inset 0 0 0 1px rgba(255,255,255,.35);
}
.pkaart__stippen b{font:600 11px/1 var(--tekst);color:var(--grijs);margin-left:2px}
.pkaart__tekst{display:flex;flex-direction:column;gap:5px;padding:16px 17px 17px;flex:1}
.pkaart__cat{font:600 10px/1 var(--tekst);letter-spacing:.16em;text-transform:uppercase;color:var(--grijs-diep)}
.pkaart__titel{font:700 1.06rem/1.25 var(--kop);letter-spacing:-.015em;color:var(--wit)}
.pkaart__voet{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:11px}
.pkaart__prijs{font:700 1.12rem/1 var(--kop);color:var(--geel)}
.pkaart__prijs small{display:block;font:400 10px/1 var(--tekst);letter-spacing:.13em;text-transform:uppercase;color:var(--grijs-diep);margin-bottom:5px}
.pkaart__pijl{
  display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  border:1px solid var(--lijn);color:var(--grijs);
  transition:background .3s ease,color .3s ease,border-color .3s ease,transform .3s ease;
}
.pkaart:hover .pkaart__pijl{background:var(--geel);border-color:var(--geel);color:#000;transform:translateX(3px)}

/* --- De oneindige band ------------------------------------------------- */
.shopband{position:relative;overflow:hidden}
.shopband__band{overflow:hidden;padding:9px 0;-webkit-mask-image:none}
.shopband__spoor{display:flex;gap:18px;width:max-content;animation:shopschuif var(--duur,44s) linear infinite}
.shopband__spoor--terug{animation-direction:reverse}
.shopband__spoor .pkaart{width:262px;flex:none}
.shopband:hover .shopband__spoor{animation-play-state:paused}
.shopband:focus-within .shopband__spoor{animation-play-state:paused}
@keyframes shopschuif{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
/* De rand links en rechts: de kaarten moeten uit het niets komen en er weer
   in verdwijnen. Zonder dit zie je ze afgesneden tegen de schermrand en dan
   lijkt het of de pagina te breed is. */
.shopband__rand{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,var(--zwart),transparent 9%,transparent 91%,var(--zwart))}

/* --- De kop van het shopoverzicht -------------------------------------- */
.hero--shop{padding-top:clamp(24px,4vw,44px);padding-bottom:clamp(20px,3vw,34px)}
.shopkop{max-width:760px}
.shopkop h1{margin-top:4px}
.shopkop .lood{margin-top:18px}
.shopkop__punten{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 22px}
.shopkop__punten li{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--grijs)}
.shopkop__punten svg{color:var(--geel)}

.shopfilter{position:sticky;top:0;z-index:30;background:rgba(0,0,0,.86);
  backdrop-filter:blur(14px);border-block:1px solid var(--lijn)}
.shopfilter__rij{display:flex;gap:9px;overflow-x:auto;padding-block:13px;scrollbar-width:none}
.shopfilter__rij::-webkit-scrollbar{display:none}
.shopfilter__knop{
  display:inline-flex;align-items:center;gap:8px;flex:none;padding:9px 15px;border-radius:100px;
  border:1px solid var(--lijn);font:600 13px/1 var(--tekst);color:var(--grijs);
  transition:border-color .25s ease,color .25s ease,background .25s ease;
}
.shopfilter__knop:hover{border-color:var(--lijn-fel);color:var(--wit)}
.shopfilter__knop b{font:600 11px/1 var(--tekst);color:var(--grijs-diep)}
.shopfilter__knop.aan{background:var(--geel);border-color:var(--geel);color:#000}
.shopfilter__knop.aan b{color:rgba(0,0,0,.55)}

/* --- "Staat het er niet bij" -------------------------------------------- */
.opmaat{
  position:relative;overflow:hidden;margin-top:clamp(40px,6vw,72px);
  border:1px solid var(--lijn);border-radius:var(--radius-l);
  padding:clamp(28px,4vw,48px);background:var(--paneel);
}
.opmaat h2{font-size:clamp(1.5rem,3vw,2.2rem);margin-bottom:12px}
.opmaat p{color:var(--grijs);max-width:56ch}
.opmaat .knoprij{margin-top:24px}
.opmaat__licht{
  position:absolute;inset:-40% -10% auto auto;width:52%;height:180%;pointer-events:none;
  background:radial-gradient(circle at 70% 40%,rgba(255,255,0,.13),transparent 60%);
  animation:shopadem 7s ease-in-out infinite;
}
@keyframes shopadem{0%,100%{opacity:.65}50%{opacity:1}}

/* =========================================================================
   DE PRODUCTPAGINA
   ========================================================================= */

.pdt{position:relative;padding:clamp(20px,3vw,36px) 0 clamp(40px,5vw,60px)}
.pdt__gloed{
  position:absolute;inset:0 auto auto 0;width:100%;height:70%;pointer-events:none;
  background:radial-gradient(ellipse 60% 50% at 30% 20%,rgba(255,255,0,.07),transparent 70%);
}
.pdt__raster{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(26px,4vw,56px);align-items:start;position:relative;z-index:1}
.pdt__twee{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(26px,4vw,48px);align-items:start}

/* --- De foto's ---------------------------------------------------------- */
.pgal{position:sticky;top:96px}
.pgal__groot{
  position:relative;border-radius:var(--radius-l);overflow:hidden;
  border:1px solid var(--lijn);background:#050505;aspect-ratio:1/1;
  transition:filter .5s ease;
}
.pgal__vak{margin:0;position:absolute;inset:0;opacity:0;transition:opacity .45s ease;pointer-events:none}
.pgal__vak.aan{opacity:1;pointer-events:auto}
.pgal__vak img,.pgal__vak video{width:100%;height:100%;object-fit:cover}
/* "Licht uit": we halen de gloed weg en dempen het beeld. Geen tweede foto
   nodig - het is dezelfde opname, en dat is precies wat het verschil laat
   zien. */
.pgal__groot.uit{filter:brightness(.42) saturate(.55)}
.pgal__badge{
  position:absolute;top:14px;left:14px;z-index:3;background:var(--geel);color:#000;
  font:700 10px/1 var(--tekst);letter-spacing:.14em;text-transform:uppercase;
  padding:8px 12px;border-radius:100px;box-shadow:0 0 22px rgba(255,255,0,.5);
}
.pgal__licht{
  position:absolute;bottom:14px;right:14px;z-index:3;
  display:inline-flex;align-items:center;gap:9px;padding:9px 15px;border-radius:100px;
  border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.62);backdrop-filter:blur(10px);
  color:var(--wit);font:600 12px/1 var(--tekst);
  transition:border-color .25s ease,color .25s ease;
}
.pgal__licht:hover{border-color:var(--geel);color:var(--geel)}
.pgal__lichtbol{width:9px;height:9px;border-radius:50%;background:var(--geel);box-shadow:0 0 10px var(--geel);transition:all .3s ease}
.pgal__licht[aria-pressed="false"] .pgal__lichtbol{background:var(--grijs-diep);box-shadow:none}
.pgal__rij{display:flex;gap:10px;margin-top:12px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.pgal__rij::-webkit-scrollbar{display:none}
.pgal__mini{
  flex:none;width:74px;height:74px;border-radius:12px;overflow:hidden;padding:0;
  border:1px solid var(--lijn);background:#050505;
  transition:border-color .25s ease,transform .25s ease;
}
.pgal__mini img,.pgal__mini video{width:100%;height:100%;object-fit:cover}
.pgal__mini:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.25)}
.pgal__mini.aan{border-color:var(--geel);box-shadow:0 0 0 1px var(--geel),0 0 16px rgba(255,255,0,.3)}
.pgal__punten{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:11px 16px}
.pgal__punten li{display:flex;align-items:center;gap:9px;font-size:13.5px;line-height:1.35;color:var(--grijs)}
.pgal__punten svg{color:var(--geel)}

/* --- De configurator ---------------------------------------------------- */
.pcfg{min-width:0}
.pcfg__cat{
  display:inline-block;font:600 10px/1 var(--tekst);letter-spacing:.18em;text-transform:uppercase;
  color:var(--geel);border:1px solid var(--lijn-fel);background:rgba(255,255,0,.05);
  padding:8px 13px;border-radius:100px;margin-bottom:16px;
}
.pcfg h1{font-size:clamp(1.9rem,3.6vw,2.9rem)}
.pcfg__onder{margin:10px 0 0;color:var(--grijs);font-size:1.02rem}
.pcfg__sterren{display:flex;align-items:center;gap:9px;margin-top:14px;font-size:13.5px;color:var(--grijs)}
.pcfg__sterren span:first-child{color:var(--geel);letter-spacing:2px}
.pcfg__intro{margin:18px 0 0;color:var(--grijs);font-size:.99rem;line-height:1.6}
.pcfg__form{margin-top:28px}
/* Het honeypotveld. Niet display:none - sommige bots vullen juist alleen
   velden in die verborgen zijn met display. Dit staat gewoon uit beeld. */
.pcfg__val{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

.pblok{border:0;padding:0;margin:0 0 24px}
.pblok legend{
  display:flex;align-items:center;gap:11px;padding:0;margin-bottom:13px;
  font:600 13px/1 var(--tekst);letter-spacing:.02em;color:var(--wit);
}
.pblok__nr{
  display:grid;place-items:center;width:23px;height:23px;border-radius:50%;
  background:rgba(255,255,0,.12);border:1px solid var(--lijn-fel);
  font:700 11px/1 var(--tekst);color:var(--geel);
}
.pblok__waarde{margin-left:auto;font:400 12.5px/1 var(--tekst);color:var(--geel)}
.pblok__hulp{margin:10px 0 0;font-size:12.5px;line-height:1.5;color:var(--grijs-diep)}
.pblok input[type="radio"]{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}

/* --- maat --- */
/* margin-top voor het "meest gekozen"-vaantje: dat steekt boven de kaart uit
   en werd anders door de legend erboven afgesneden. */
.pmaten{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:10px;margin-top:12px}
.pmaat{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:15px 10px 13px;border-radius:var(--radius);border:1px solid var(--lijn);
  background:var(--paneel);cursor:pointer;
  transition:border-color .25s ease,background .25s ease,transform .25s ease;
}
.pmaat:hover{border-color:rgba(255,255,255,.24);transform:translateY(-2px)}
.pmaat.aan{border-color:var(--geel);background:rgba(255,255,0,.06);box-shadow:0 0 0 1px var(--geel)}
/* Het vormpje: de echte verhouding van dat bord, op schaal. Drie regels
   getallen naast elkaar zegt niemand iets; drie rechthoekjes van oplopende
   grootte zegt alles. */
.pmaat__vorm{
  display:block;width:calc(20px + 26px * var(--s));max-height:34px;aspect-ratio:var(--v);
  border:1.5px solid var(--grijs-diep);border-radius:3px;transition:all .3s ease;
}
.pmaat.aan .pmaat__vorm{border-color:var(--geel);box-shadow:0 0 10px rgba(255,255,0,.45)}
.pmaat__maat{font:600 12.5px/1.2 var(--tekst);color:var(--wit);text-align:center}
.pmaat__prijs{font:700 14px/1 var(--kop);color:var(--geel)}
.pmaat__tip{
  position:absolute;top:-9px;left:50%;transform:translateX(-50%);white-space:nowrap;
  background:var(--geel);color:#000;font:700 9px/1 var(--tekst);
  letter-spacing:.11em;text-transform:uppercase;padding:5px 9px;border-radius:100px;
}

/* --- kleur --- */
.pkleuren{display:flex;flex-wrap:wrap;gap:9px}
.pkleur{
  position:relative;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  border:1.5px solid var(--lijn);cursor:pointer;
  transition:border-color .22s ease,transform .22s ease;
}
.pkleur:hover{transform:scale(1.11);border-color:rgba(255,255,255,.3)}
.pkleur.aan{border-color:var(--geel);transform:scale(1.11)}
.pkleur__bol{
  width:24px;height:24px;border-radius:50%;background:var(--k);
  box-shadow:0 0 11px var(--k),inset 0 0 0 1px rgba(255,255,255,.28);
}
.pkleur.aan .pkleur__bol{box-shadow:0 0 18px var(--k),0 0 34px var(--k),inset 0 0 0 1px rgba(255,255,255,.4)}
/* Een stipje bij de kleuren waar we een echte foto van hebben. Klein, maar
   het verklaart waarom de foto bij de ene kleur wél wisselt en bij de andere
   niet. */
.pkleur--foto::after{
  content:"";position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;
  background:var(--geel);border:2px solid var(--zwart);
}
.pkleur__naam{
  position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);
  white-space:nowrap;background:#1a1a1a;color:var(--wit);border:1px solid var(--lijn);
  font:600 11px/1 var(--tekst);padding:6px 9px;border-radius:7px;
  opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:5;
}
.pkleur:hover .pkleur__naam{opacity:1}

/* --- binnen/buiten --- */
.pduo{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pkeuze{
  display:flex;flex-direction:column;gap:7px;padding:14px 15px;cursor:pointer;
  border:1px solid var(--lijn);border-radius:var(--radius);background:var(--paneel);
  transition:border-color .25s ease,background .25s ease;
}
.pkeuze:hover{border-color:rgba(255,255,255,.24)}
.pkeuze.aan{border-color:var(--geel);background:rgba(255,255,0,.06)}
.pkeuze__kop{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.pkeuze__vink{
  flex:none;width:17px;height:17px;border-radius:50%;border:1.5px solid var(--grijs-diep);
  position:relative;transition:all .25s ease;
}
.pkeuze.aan .pkeuze__vink{border-color:var(--geel);background:var(--geel)}
.pkeuze.aan .pkeuze__vink::after{
  content:"";position:absolute;inset:0;margin:auto;width:6px;height:6px;
  border-radius:50%;background:#000;
}
.pkeuze__titel{font:600 13.5px/1.25 var(--tekst);color:var(--wit)}
.pkeuze__prijs{margin-left:auto;font:700 12px/1 var(--tekst);color:var(--geel);white-space:nowrap}
.pkeuze__tekst{font-size:12.5px;line-height:1.5;color:var(--grijs-diep)}

/* --- ophangen --- */
.pmont{display:grid;grid-template-columns:repeat(auto-fit,minmax(122px,1fr));gap:10px}
.pmont__item{
  position:relative;display:flex;flex-direction:column;gap:6px;padding:9px 9px 11px;cursor:pointer;
  border:1px solid var(--lijn);border-radius:var(--radius);background:var(--paneel);
  transition:border-color .25s ease,background .25s ease,transform .25s ease;
}
.pmont__item:hover{border-color:rgba(255,255,255,.24);transform:translateY(-2px)}
.pmont__item.aan{border-color:var(--geel);background:rgba(255,255,0,.06)}
.pmont__beeld{display:block;aspect-ratio:16/11;border-radius:9px;overflow:hidden;background:#050505}
.pmont__beeld img,.pmont__beeld video{width:100%;height:100%;object-fit:cover}
.pmont__naam{font:600 12px/1.3 var(--tekst);color:var(--wit)}
.pmont__prijs{font:600 11px/1 var(--tekst);color:var(--geel)}
.pmont__i{
  position:absolute;top:15px;right:15px;z-index:2;display:grid;place-items:center;
  width:26px;height:26px;border-radius:50%;padding:0;color:var(--wit);
  background:rgba(0,0,0,.66);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(6px);
  transition:background .22s ease,color .22s ease,border-color .22s ease,transform .22s ease;
}
.pmont__i:hover{background:var(--geel);color:#000;border-color:var(--geel);transform:scale(1.1)}

/* --- kabel --- */
.ppillen{display:flex;flex-wrap:wrap;gap:8px}
.ppil{
  display:inline-flex;align-items:center;gap:7px;padding:10px 15px;cursor:pointer;
  border:1px solid var(--lijn);border-radius:100px;background:var(--paneel);
  font:600 12.5px/1 var(--tekst);color:var(--grijs);
  transition:border-color .25s ease,color .25s ease,background .25s ease;
}
.ppil:hover{border-color:rgba(255,255,255,.26);color:var(--wit)}
.ppil.aan{border-color:var(--geel);background:rgba(255,255,0,.08);color:var(--wit)}
.ppil b{font:700 11px/1 var(--tekst);color:var(--geel)}

/* --- prijs en bestellen --- */
.pprijs{
  margin-top:26px;padding:19px 19px 17px;border-radius:var(--radius-l);
  border:1px solid var(--lijn-fel);background:linear-gradient(180deg,rgba(255,255,0,.05),rgba(255,255,0,.01));
}
.pprijs__rij{display:flex;align-items:center;justify-content:space-between;gap:14px;
  font:600 13px/1 var(--tekst);color:var(--grijs)}
.pteller{display:inline-flex;align-items:center;border:1px solid var(--lijn);border-radius:100px;overflow:hidden}
.pteller button{
  display:grid;place-items:center;
  width:34px;height:34px;padding:0;background:transparent;border:0;color:var(--wit);
  transition:background .2s ease,color .2s ease;
}
.pteller button:hover{background:var(--geel);color:#000}
.pteller input{
  width:42px;height:34px;text-align:center;background:transparent;border:0;
  color:var(--wit);font:600 14px/1 var(--tekst);-moz-appearance:textfield;
}
.pteller input::-webkit-outer-spin-button,.pteller input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pprijs__som{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;
  margin-top:14px;padding-top:14px;border-top:1px solid var(--lijn)}
.pprijs__label{font:600 13px/1.3 var(--tekst);color:var(--wit)}
.pprijs__label small{display:block;font:400 11px/1.3 var(--tekst);color:var(--grijs-diep);margin-top:4px}
.pprijs__bedrag{font:700 clamp(1.7rem,3.4vw,2.3rem)/1 var(--kop);color:var(--geel);text-shadow:var(--gloed);white-space:nowrap}
.pprijs__uitleg{margin:7px 0 0;font-size:12px;color:var(--grijs-diep);text-align:right}
.pprijs__uitleg:empty{margin:0}
.pprijs__knop{width:100%;margin-top:15px;padding:18px 26px;font-size:15.5px}
.pprijs__knop:disabled{opacity:.6;cursor:progress}
.pprijs__knop.puls{animation:shoppuls 1.4s ease-out}
@keyframes shoppuls{0%,100%{box-shadow:0 0 0 rgba(255,255,0,0)}35%{box-shadow:0 0 0 12px rgba(255,255,0,.22)}}
.pprijs__fout{margin:11px 0 0;padding:10px 13px;border-radius:10px;font-size:13px;
  background:rgba(255,60,50,.12);border:1px solid rgba(255,60,50,.35);color:#ffb3ae}
.pprijs__hulp{display:block;margin-top:13px;text-align:center;font-size:12.5px;color:var(--grijs)}
.pprijs__hulp:hover{color:var(--geel)}

/* --- betaalmethodes --- */
.betaal{margin-top:16px;padding-top:15px;border-top:1px solid var(--lijn)}
.betaal__kop{display:flex;align-items:center;gap:8px;font:600 11px/1 var(--tekst);
  letter-spacing:.1em;text-transform:uppercase;color:var(--grijs-diep);margin-bottom:11px}
.betaal__kop svg{color:var(--geel)}
.betaal__rij{display:flex;flex-wrap:wrap;gap:7px}
.betaal__merk{
  display:grid;place-items:center;width:52px;height:32px;border-radius:7px;
  background:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.14);
  transition:transform .22s ease;
}
.betaal__merk:hover{transform:translateY(-2px)}

/* --- geen voorraad, wel meteen in productie --- */
.prodblok{
  display:flex;gap:14px;margin-top:24px;padding:17px 18px;
  border:1px solid var(--lijn);border-left:3px solid var(--geel);
  border-radius:var(--radius);background:var(--paneel);
}
.prodblok__vonk{
  flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:11px;
  background:rgba(255,255,0,.1);color:var(--geel);
  animation:montpuls 3.4s ease-in-out infinite;
}
@keyframes montpuls{0%,100%{box-shadow:0 0 0 rgba(255,255,0,0)}50%{box-shadow:0 0 20px rgba(255,255,0,.28)}}
.prodblok strong{display:block;font:700 14px/1.3 var(--kop);color:var(--wit);margin-bottom:6px}
.prodblok p{margin:0;font-size:13px;line-height:1.6;color:var(--grijs)}

/* --- wat zit erbij --- */
.pakket{border:1px solid var(--lijn);border-radius:var(--radius-l);padding:clamp(22px,3vw,34px);background:var(--paneel)}
.pakket__kop{font-size:clamp(1.25rem,2.4vw,1.7rem);margin-bottom:20px}
.pakket__lijst{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px 26px}
.pakket__lijst li{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--grijs)}
.pakket__icoon{
  flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:11px;
  background:rgba(255,255,0,.09);border:1px solid var(--lijn-fel);color:var(--geel);
}

/* --- de technische kolom --- */
.pspec{position:sticky;top:96px;border:1px solid var(--lijn);border-radius:var(--radius-l);
  padding:22px;background:var(--paneel)}
.pspec h3{font-size:1.05rem;margin-bottom:14px}
.pspec dl{margin:0;display:flex;flex-direction:column}
.pspec dl div{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-top:1px solid var(--lijn)}
.pspec dl div:first-child{border-top:0;padding-top:0}
.pspec dt{font-size:12.5px;color:var(--grijs-diep);flex:none}
.pspec dd{margin:0;font-size:12.5px;color:var(--wit);text-align:right}

/* --- de balk die meekomt --- */
.pbalk{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:rgba(0,0,0,.9);backdrop-filter:blur(16px);border-top:1px solid var(--lijn-fel);
  animation:shopopkomst .3s cubic-bezier(.22,.61,.36,1);
}
@keyframes shopopkomst{from{transform:translateY(100%)}to{transform:translateY(0)}}
.pbalk[hidden]{display:none}
/* Ruimte onderaan zodat de plakbalk nooit de laatste regel van de voet
   afdekt. Op de productpagina alleen, want daar bestaat die balk. */
body.heeftpbalk{padding-bottom:74px}
/* Het WhatsApp-knopje zweeft rechtsonder en de bestelbalk staat er ook.
   Op een telefoon dekten ze elkaar precies af: het knopje lag over
   "Direct bestellen" heen. Zodra de balk in beeld komt schuift het knopje
   erboven. */
body.pbalkaan .wa{bottom:86px}
.pbalk__binnen{display:flex;align-items:center;gap:14px;padding-block:11px}
.pbalk__beeld{flex:none;width:44px;height:44px;border-radius:10px;overflow:hidden;background:#050505}
.pbalk__beeld img{width:100%;height:100%;object-fit:cover}
.pbalk__naam{flex:1;min-width:0;font:600 13.5px/1.25 var(--tekst);color:var(--wit);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pbalk__naam small{display:block;font:400 11.5px/1.3 var(--tekst);color:var(--grijs-diep)}
.pbalk__prijs{font:700 1.2rem/1 var(--kop);color:var(--geel);white-space:nowrap}
.pbalk__knop{flex:none;padding:13px 22px;font-size:14px}

/* =========================================================================
   DE MONTAGESECTIE
   ========================================================================= */

.mont__raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:16px}
.mont--kaal .mont__raster{gap:12px}
.mont__kaart{
  display:flex;flex-direction:column;gap:0;padding:0;text-align:left;overflow:hidden;
  border:1px solid var(--lijn);border-radius:var(--radius-l);background:var(--paneel);
  transition:border-color .3s ease,transform .35s cubic-bezier(.22,.61,.36,1),box-shadow .4s ease;
  animation:shopopkomen .6s cubic-bezier(.22,.61,.36,1) both;animation-delay:var(--vertraag,0ms);
}
@keyframes shopopkomen{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.mont__kaart:hover{transform:translateY(-5px);border-color:var(--lijn-fel);
  box-shadow:0 20px 46px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,0,.08)}
.mont__beeld{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:#050505}
.mont__beeld img,.mont__beeld video{width:100%;height:100%;object-fit:cover;
  transition:transform .7s cubic-bezier(.22,.61,.36,1)}
.mont__kaart:hover .mont__beeld img,.mont__kaart:hover .mont__beeld video{transform:scale(1.05)}
.mont__vlag{
  position:absolute;top:11px;left:11px;display:inline-flex;align-items:center;gap:6px;
  padding:6px 10px;border-radius:100px;background:rgba(0,0,0,.7);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.18);color:var(--wit);
  font:600 10px/1 var(--tekst);letter-spacing:.1em;text-transform:uppercase;
}
.mont__i{
  position:absolute;top:11px;right:11px;display:grid;place-items:center;width:30px;height:30px;
  border-radius:50%;background:rgba(0,0,0,.66);border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(6px);color:var(--wit);
  transition:background .25s ease,color .25s ease,border-color .25s ease,transform .25s ease;
}
.mont__kaart:hover .mont__i{background:var(--geel);color:#000;border-color:var(--geel);transform:scale(1.1)}
.mont__tekst{display:flex;flex-direction:column;gap:6px;padding:15px 17px 17px}
.mont__titel{font:700 1rem/1.25 var(--kop);color:var(--wit)}
.mont__prijs{font:600 11.5px/1 var(--tekst);color:var(--geel)}
.mont__prijs--nul{color:var(--grijs-diep)}
.mont__uitleg{font-size:12.5px;line-height:1.55;color:var(--grijs)}

/* De strook: dezelfde vier, maar smal. Voor onder een offerte of een ontwerp. */
.montstrook{margin-top:22px}
.montstrook__kop{font-size:.95rem;margin-bottom:12px;color:var(--wit)}
.montstrook__rij{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:10px}
.montstrook__item{
  position:relative;display:flex;flex-direction:column;gap:8px;padding:9px;text-align:left;
  border:1px solid var(--lijn);border-radius:var(--radius);background:var(--paneel);
  font:600 12px/1.3 var(--tekst);color:var(--grijs);
  transition:border-color .25s ease,color .25s ease,transform .25s ease;
}
.montstrook__item:hover{border-color:var(--lijn-fel);color:var(--wit);transform:translateY(-2px)}
.montstrook__beeld{display:block;aspect-ratio:16/10;border-radius:8px;overflow:hidden;background:#050505}
.montstrook__beeld img,.montstrook__beeld video{width:100%;height:100%;object-fit:cover}
.montstrook__i{position:absolute;top:15px;right:15px;color:var(--wit);opacity:.8}

/* Het venster. Een echte <dialog>: die regelt focus, Escape en de rand zelf. */
.montv{
  width:min(680px,92vw);max-height:88vh;padding:0;border:1px solid var(--lijn-fel);
  border-radius:var(--radius-l);background:var(--paneel-2);color:var(--wit);overflow:auto;
}
.montv::backdrop{background:rgba(0,0,0,.82);backdrop-filter:blur(5px)}
.montv__sluit{
  position:absolute;top:12px;right:12px;z-index:3;display:grid;place-items:center;
  width:36px;height:36px;border-radius:50%;padding:0;color:var(--wit);
  background:rgba(0,0,0,.62);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(6px);
  transition:background .25s ease,color .25s ease;
}
.montv__sluit:hover{background:var(--geel);color:#000}
.montv__vak{padding:0 0 22px}
.montv__vak h3{padding:20px 24px 0;font-size:1.25rem}
.montv__vak p{padding:0 24px;margin:14px 0 0;color:var(--grijs);font-size:14.5px;line-height:1.65}
/* Een vaste verhouding op de BAK en niet op het beeld.

   Stond hier eerst height:auto op de video (dat erft van de regel
   img,video{height:auto} bovenaan dit blad). Een <video> waarvan de metadata
   nog niet binnen is heeft dan hoogte NUL: het venster ging open met de titel
   en de tekst, en daartussen niets. Precies het stuk waar het venster voor
   bedoeld is. Nu heeft de bak altijd een hoogte en valt het beeld erin - ook
   voordat er ook maar één byte video geladen is, want de poster vult hem al. */
.montv__media{margin-top:16px;background:#050505 center/contain no-repeat;aspect-ratio:4/3;max-height:58vh}
.montv__media img,.montv__media video{width:100%;height:100%;object-fit:contain;display:block}

/* =========================================================================
   SMALLE SCHERMEN

   Let op het GEWICHT: een @media geeft geen extra gewicht, alleen de kiezer
   telt. Een regel hieronder moet dus minstens even zwaar zijn als die
   hierboven, anders verandert er niets en zoek je een half uur naar een
   telefoon die in twee kolommen blijft staan.
   ========================================================================= */

@media (max-width:980px){
  .pdt__raster{grid-template-columns:1fr;gap:26px}
  .pdt__twee{grid-template-columns:1fr}
  .pgal{position:static}
  .pspec{position:static}
}
@media (max-width:620px){
  .pgal__punten{grid-template-columns:1fr}
  .pduo{grid-template-columns:1fr}
  .pmaten{grid-template-columns:1fr 1fr}
  .prijk{grid-template-columns:1fr 1fr;gap:12px}
  .prijk--groot{grid-template-columns:1fr 1fr;gap:12px}
  .pkaart__titel{font-size:.94rem}
  .pkaart__prijs{font-size:1rem}
  .pkaart__pijl{display:none}
  /* De stippen altijd tonen: op een telefoon bestaat "aanwijzen" niet, en
     dan zou niemand ooit zien dat er elf kleuren zijn. */
  .pkaart__stippen{transform:translateY(0);opacity:1;padding:18px 10px 9px}
  .pkaart__stippen i{width:10px;height:10px}
  .pbalk__naam small{display:none}
  .pbalk__knop{padding:12px 15px;font-size:13px}
  /* Ruimte houden voor het zwevende WhatsApp-knopje rechts. */
  .pbalk__binnen{padding-right:64px}
  .shopband__spoor .pkaart{width:200px}
  .montv__vak h3{padding:18px 18px 0}
  .montv__vak p{padding:0 18px}
}
@media (max-width:400px){
  .prijk{grid-template-columns:1fr}
  .prijk--groot{grid-template-columns:1fr}
}

/* Wie beweging heeft uitgezet krijgt geen lopende band maar een strook die
   hij zelf schuift. Hetzelfde als bij de reviews. */
@media (prefers-reduced-motion:reduce){
  .shopband__spoor{animation:none;width:auto;overflow-x:auto}
  .shopband__band{overflow-x:auto}
  .mont__kaart{animation:none}
  .opmaat__licht{animation:none}
  .prodblok__vonk{animation:none}
}

/* --- De banner bovenaan een case ---------------------------------------
   Van rand tot rand, met een verloop naar zwart aan de onderkant zodat de kop
   eronder er niet tegenaan botst. Geen 100vw-truc met een negatieve marge: die
   telt op een computer de schuifbalk mee en duwt de hele pagina scheef (staat
   in CLAUDE.md onder "horizontale overloop"). Deze staat al buiten de
   container, dus een gewone breedte van 100% is precies goed. */
.casebanner{
  position:relative;width:100%;overflow:hidden;
  aspect-ratio:21/9;max-height:60vh;background:var(--paneel);
}
.casebanner img,.casebanner video{width:100%;height:100%;object-fit:cover;display:block}
/* De overgang naar de pagina. Zonder dit staat er een harde rand tussen de
   foto en de zwarte kop eronder, en dat leest als twee losse blokken. */
.casebanner::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:45%;
  background:linear-gradient(to bottom,transparent,var(--zwart,#000));
  pointer-events:none;
}
@media (max-width:760px){
  /* Op een telefoon is 21:9 een streepje van 170 px hoog waar niets op te zien
     is. Vierkanter dus. */
  .casebanner{aspect-ratio:16/10;max-height:46vh}
}

/* ==========================================================================
   DE STROOK BOVEN DE KOP: HOE LANG HET DUURT

   De gewone versie van dit ding is één regel op een gekleurde balk. Die leest
   niemand meer. Hier staat het als drie stappen met een lijn ertussen, zodat
   je in een halve seconde ziet dat de drie werkdagen over het HELE traject
   gaan en niet alleen over de post.

   Plakt hij mee? Ja, samen met de kop. De kop staat op position:sticky met
   top:0; deze strook staat daarboven en is zelf ook sticky op top:0, met een
   hogere z-index. Ze schuiven dus als één geheel mee naar boven. Dat is met
   opzet: een strook die wegschuift terwijl de kop blijft plakken geeft bij
   elke scroll een sprongetje van 34 px.
   ========================================================================== */
.levbalk{
  position:sticky;top:0;z-index:90;
  background:linear-gradient(180deg,#0c0c0c,#050505);
  border-bottom:1px solid rgba(255,255,0,.14);
  font-size:12.5px;overflow:hidden;
}
/* De lichtstreep. Op een donkere achtergrond is dit het enige wat een strook
   van 34 px nog optilt; een gekleurd vlak zou met de kop eronder vechten. */
.levbalk__gloed{
  position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,0,.55),transparent);
}
.levbalk__binnen{
  display:flex;align-items:center;justify-content:center;gap:clamp(14px,3vw,34px);
  min-height:36px;padding-top:0;padding-bottom:0;flex-wrap:nowrap;
}

/* ---- de drie stappen ---- */
.levbalk__stappen{
  display:flex;align-items:center;gap:clamp(10px,2vw,20px);
  list-style:none;margin:0;padding:0;flex:0 0 auto;
}
.levbalk__stap{
  display:flex;align-items:center;gap:7px;position:relative;
  color:var(--grijs-diep);font-weight:600;letter-spacing:.05em;text-transform:uppercase;font-size:10px;
}
/* De verbindingslijn ZIT AAN DE STAP en niet tussen twee elementen in. Zo
   klopt hij ook als er twee of vier stappen staan in plaats van drie. */
.levbalk__stap + .levbalk__stap::before{
  content:"";position:absolute;left:calc(-1 * clamp(10px,2vw,20px));width:clamp(10px,2vw,20px);height:1px;
  background:linear-gradient(90deg,rgba(255,255,0,.15),rgba(255,255,0,.45));
}
.levbalk__bol{
  width:6px;height:6px;border-radius:50%;flex:none;
  background:var(--geel);box-shadow:0 0 7px rgba(255,255,0,.6);
  /* Elke bol licht om de beurt op. De vertraging komt uit --nr, dus het werkt
     bij elk aantal stappen zonder extra regels. */
  animation:levpuls 3.6s ease-in-out infinite;
  animation-delay:calc(var(--nr,0) * .5s);
}
@keyframes levpuls{
  0%,55%,100%{opacity:.35;box-shadow:0 0 0 rgba(255,255,0,0)}
  18%{opacity:1;box-shadow:0 0 9px rgba(255,255,0,.75)}
}
.levbalk__naam{white-space:nowrap}

/* ---- de zin ---- */
.levbalk__zin{
  margin:0;color:var(--grijs);display:flex;align-items:center;gap:8px;
  min-width:0;
}
.levbalk__zin b,.levbalk__zin strong{color:var(--wit);font-weight:700}
.levbalk__zin a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(255,255,0,.35)}
.levbalk__zin a:hover{color:var(--geel);border-bottom-color:var(--geel)}
.levbalk__klok{color:var(--geel);flex:none}

/* Wie beweging uit heeft staan krijgt drie stille bollen. */
@media (prefers-reduced-motion:reduce){
  .levbalk__bol{animation:none;opacity:.8}
}

/* Onder 900 px vallen de stapnamen weg: drie woorden van vier letters naast
   elkaar op een telefoon zeggen niets meer, en de zin is wat telt. */
@media (max-width:900px){
  .levbalk__stappen{display:none}
  .levbalk__binnen{justify-content:center;gap:0}
  .levbalk{font-size:11.5px}
  .levbalk__zin{text-align:center}
}
/* En op de smalste schermen mag de zin over twee regels; afknippen zou hem
   halverwege een woord afbreken. */
@media (max-width:430px){
  .levbalk__binnen{min-height:0;padding-top:7px;padding-bottom:7px}
  .levbalk__zin{align-items:flex-start;line-height:1.35}
  .levbalk__klok{margin-top:2px}
}

/* ==========================================================================
   NEON ART

   Deze borden worden anders bekeken dan de rest van de shop. Bij "coffee"
   kijkt iemand of het woord leesbaar is aan een gevel; hier kijkt iemand naar
   een muur thuis en vergelijkt met een schilderij. Vandaar de opzet: een
   donker doek met een lijst eromheen in plaats van een productkaart, en een
   raster van twee in plaats van een lopende band. Er valt hier niets te
   scrollen - er valt te kijken.
   ========================================================================== */
.neonart{position:relative;overflow:hidden}
/* Een enkele, brede gloed achter de sectie. Niet fel: hij moet het gevoel
   geven dat er licht in de kamer hangt, niet zelf opvallen. */
.neonart__gloed{
  position:absolute;left:50%;top:12%;width:min(1100px,120%);aspect-ratio:2/1;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(255,255,0,.09),transparent 68%);
  filter:blur(30px);
}
.neonart .omhulsel{position:relative;z-index:1}
.neonart__raster{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:clamp(20px,3vw,34px);align-items:start;
}
.neonart__kaart{
  background:var(--paneel);border:1px solid var(--lijn);border-radius:var(--radius-l);
  overflow:hidden;display:flex;flex-direction:column;
  transition:border-color .3s ease,transform .3s ease;
}
.neonart__kaart:hover{border-color:var(--lijn-fel);transform:translateY(-4px)}

/* Het doek. De lijst is een inset-schaduw en geen extra beeld: een echte
   passe-partout als png rekt bij elke maat anders uit. */
.neonart__doek{
  position:relative;display:block;aspect-ratio:4/3;background:#050505;overflow:hidden;
}
.neonart__doek .neonart__beeld,
.neonart__doek img,.neonart__doek video{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.2,.7,.3,1);
}
.neonart__kaart:hover .neonart__doek img,
.neonart__kaart:hover .neonart__doek video{transform:scale(1.04)}
.neonart__lijst{
  position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09), inset 0 0 60px rgba(0,0,0,.55);
}

.neonart__lijf{padding:clamp(18px,2.4vw,26px);display:flex;flex-direction:column;gap:9px;flex:1}
.neonart__lijf h3{margin:0;font-size:clamp(1.15rem,1.7vw,1.4rem);line-height:1.2}
.neonart__lijf h3 a{color:var(--wit)}
.neonart__lijf h3 a:hover{color:var(--geel)}
.neonart__onder{margin:0;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--grijs-diep)}
.neonart__tekst{margin:0;color:var(--grijs);font-size:14.5px;line-height:1.65;flex:1}
.neonart__voet{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-top:6px;padding-top:16px;border-top:1px solid var(--lijn);
}
.neonart__prijs{font:700 1.15rem/1 var(--kop);color:var(--wit)}
.neonart__prijs small{display:block;font:500 11px/1 var(--tekst);letter-spacing:.1em;
  text-transform:uppercase;color:var(--grijs-diep);margin-bottom:5px}
.neonart .knop--klein{padding:10px 18px;font-size:13.5px;min-height:0}

@media (max-width:560px){
  .neonart__raster{grid-template-columns:1fr}
  .neonart__doek{aspect-ratio:16/11}
}

/* De verwachte bezorgdatum onder de bestelknop. Rustig gehouden: het is geen
   knop en geen waarschuwing, het is een geruststelling. De datums zelf wél in
   het wit - dat is het stukje waar het oog naartoe moet. */
.plever{
  display:flex;align-items:flex-start;gap:11px;margin:16px 0 0;
  padding:13px 15px;border-radius:var(--radius);
  background:rgba(255,255,0,.05);border:1px solid rgba(255,255,0,.16);
  font-size:13.5px;line-height:1.55;color:var(--grijs);
}
.plever__icoon{color:var(--geel);flex:none;display:flex;margin-top:1px}
.plever__icoon svg{width:18px;height:18px}
.plever b{color:var(--wit);font-weight:600}
.plever time{color:var(--wit);font-weight:700;white-space:nowrap}
.plever small{display:block;margin-top:4px;font-size:12px;color:var(--grijs-diep)}