/* ============================================================================
   Kastelier, gedeeld visueel systeem (2026-08-30)

   Eén bestand voor de hele site. Bovenaan de nieuwe kern, onderaan de oude
   class-API van light.css opnieuw getekend, zodat bestaande pagina-eigen CSS
   die op tokens zoals --radius, --shadow-sm of --surface steunt vanzelf
   meekantelt in plaats van tegen het nieuwe systeem in te werken.

   Regels die niet gebroken mogen worden:
   - geen border-radius, geen gradients, geen glas, geen glow, geen pillen
   - één grotesk (Archivo), geen kleine uppercase eyebrow boven elke titel
   - één zwarte rechthoek als actie, verder tekstlinks
   - geen fade-in-on-scroll
   - geen drie identieke kaarten naast elkaar
   ========================================================================== */

:root{
  --bg:#F0ECE4;
  --bg2:#E6E0D5;
  --walnoot:#5B3F2B;
  --walnoot-d:#4A3323;
  --op-walnoot:#D9CBB8;
  --dark:#24231F;
  --ink:#20201D;
  --ink2:#68645D;
  --line:#D6CFC2;
  --line2:#C3BAAB;
  --accent:#5B3F2B;
  --accent-l:#C9A882;

  /* Oude namen uit light.css en styles.css, doorgesluisd naar het nieuwe
     palet. Zo blijft bestaande pagina-CSS werken zonder oude kleuren. */
  --bg-cream:#F0ECE4;
  --bg-stone:#E6E0D5;
  --surface:#F0ECE4;
  --surface-sunken:#E6E0D5;
  --text:#20201D;
  --text-heading:#20201D;
  --text-muted:#68645D;
  --text-faint:#8A857C;
  --text-on-dark:#F4F2ED;
  --walnut:#4D5345;
  --walnut-deep:#3C4136;
  --walnut-soft:#8E9682;
  --walnut-wash:#E9E6DF;
  --navy:#24231F;
  --navy-light:#3A382F;
  --cream:#F4F2ED;
  --cream-light:#F4F2ED;
  --charcoal:#20201D;
  --warm-grey:#68645D;
  --line-strong:#C4BFB4;
  --line-faint:rgba(32,32,29,.07);
  --success:#4D5345;
  --info:#5A6472;
  --attention:#8C6A3C;
  --focus:#4D5345;

  --sp-1:8px;--sp-2:16px;--sp-3:24px;--sp-4:32px;--sp-5:48px;
  --sp-6:64px;--sp-7:96px;--sp-8:128px;--sp-9:160px;

  --container:1280px;--container-wide:1440px;--container-mid:1040px;--container-narrow:680px;--max-width:1320px;

  /* hoekig */
  --radius-sm:0;--radius:0;--radius-lg:0;
  /* geen zwevende kaarten */
  --shadow-sm:none;--shadow-md:none;--shadow-lg:none;

  --ease-out:cubic-bezier(.22,1,.36,1);
  --duration-fast:180ms;--duration:280ms;--duration-slow:600ms;

  --overlay-soft:none;
  --overlay-tint:rgba(244,242,237,.55);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:80px;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--ink);
  font-family:"Archivo",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  font-size:17px;line-height:1.55;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;
}
::selection{background:var(--ink);color:var(--bg)}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}

h1,h2,h3,h4,h5,.serif{
  font-family:"Archivo",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  font-weight:500;letter-spacing:-.03em;line-height:1.04;color:var(--ink);
}
h1{font-size:clamp(2.45rem,5.3vw,4.5rem);letter-spacing:-.035em;line-height:1.0}
h2{font-size:clamp(1.85rem,3.4vw,3.15rem);line-height:1.07}
h3{font-size:clamp(1.45rem,2.3vw,2.05rem)}
h4{font-size:1.12rem;letter-spacing:-.015em}
p{max-width:35rem}

.lede,.lead{font-size:1.16rem;color:var(--ink2);line-height:1.5;max-width:38rem}
.note{font-size:.86rem;color:var(--ink2);line-height:1.6}
.tcol{max-width:35rem}
.acc{color:var(--accent)}
.small{font-size:.9rem}

/* Bewust geen container die overal terugkomt: elke sectie kiest haar eigen
   inspringing, zodat het ritme van de pagina niet vlak wordt. */
.pad{padding-inline:clamp(1.25rem,6vw,6.5rem)}
.deep{padding-inline:clamp(1.25rem,15vw,17rem)}
.pad-l{padding-left:clamp(1.25rem,6vw,6.5rem)}
.pad-r{padding-right:clamp(1.25rem,6vw,6.5rem)}

/* acties */
.cta,.btn-primary{
  display:inline-flex;align-items:center;gap:.7em;background:var(--ink);color:var(--bg);
  border:1px solid var(--ink);border-radius:0;padding:1.02rem 1.55rem;
  font-size:.95rem;font-weight:500;cursor:pointer;box-shadow:none;
  transition:background .2s,color .2s;
}
.cta:hover,.btn-primary:hover{background:transparent;color:var(--ink);transform:none;box-shadow:none}
.tlink,.btn-secondary,.btn-text{
  display:inline-flex;align-items:center;gap:.5em;background:none;
  border:0;border-bottom:1px solid var(--ink);border-radius:0;padding:0 0 2px;
  font-size:.95rem;font-weight:500;color:var(--ink);cursor:pointer;box-shadow:none;
}
.tlink:hover,.btn-secondary:hover,.btn-text:hover{color:var(--ink2);border-bottom-color:var(--ink2);background:none;transform:none}
.ar{display:inline-block;transition:transform .2s}
.cta:hover .ar,.tlink:hover .ar,.btn-primary:hover .ar{transform:translateX(4px)}

/* navigatie: typografie, geen pil */
.topnav{position:fixed;top:0;left:0;right:0;z-index:120;border-bottom:1px solid transparent;
  transition:background .25s,border-color .25s}
.topnav.on{background:rgba(240,236,228,.95);backdrop-filter:blur(10px);border-bottom-color:var(--line)}
.topnav__in{display:flex;align-items:baseline;justify-content:space-between;gap:2rem;padding-block:1.3rem}
.mark{font-size:1rem;font-weight:600;letter-spacing:.14em;color:var(--ink)}
.topnav__l{display:flex;align-items:baseline;gap:1.85rem;font-size:.93rem}
.topnav__l a{color:var(--ink2);transition:color .18s}
.topnav__l a:hover{color:var(--ink)}
.topnav__l .go{color:var(--ink);font-weight:500;border-bottom:1px solid var(--ink);padding-bottom:2px}
.topnav__l .here{color:var(--ink)}
.topnav__l .tiny{font-size:.79rem}

/* De mobiele navigatie zit volledig in nav.js, ook haar opmaak (06/09/2026).
   Stond die hier, dan kon een bezoeker een verse nav.js krijgen met een
   kastelier.css uit zijn cache van daarvoor, en dan bouwde het script een knop
   waarvoor geen enkele regel bestond. Wijzig de menu-opmaak dus in nav.js.
   Zonder JavaScript wordt die stijl nooit ingevoegd en blijven de .sm-links
   gewoon staan, doorlopend op een tweede regel. Dat is de bedoelde terugval. */

/* De balk staat vast bovenaan, dus een anker mag niet onder de balk landen. */
[id]{scroll-margin-top:78px}

/* voettekst */
.foot{border-top:1px solid var(--line);padding-block:clamp(3rem,6vw,4.5rem) 0;font-size:.9rem;color:var(--ink2)}
.foot a:hover{color:var(--ink)}
.foot__grid{display:grid;grid-template-columns:minmax(0,4fr) repeat(3,minmax(0,2.3fr));gap:clamp(1.8rem,4vw,3.5rem)}
@media(max-width:900px){.foot__grid{grid-template-columns:1fr 1fr;gap:2.4rem}}
@media(max-width:520px){.foot__grid{grid-template-columns:1fr}}
.foot__brand p{margin-top:.9rem;max-width:32ch;line-height:1.6}
.foot__col{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem}
.foot__col h4{font-size:.78rem;font-weight:500;letter-spacing:.1em;color:var(--ink);margin-bottom:.4rem}
.foot__col a{color:var(--ink2);border-bottom:1px solid transparent;padding-bottom:1px;transition:color .18s,border-color .18s}
.foot__col a:hover{color:var(--ink);border-bottom-color:var(--ink)}
.foot__onder{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem 1.5rem;align-items:baseline;
  margin-top:clamp(2.5rem,5vw,4rem);padding-block:1.4rem 2.2rem;border-top:1px solid var(--line);font-size:.83rem}
.foot__onder .rechts a{margin-left:1.5rem}
.foot__onder .rechts a:first-child{margin-left:0}
/* oude voettekst, blijft staan voor pagina's die nog niet om zijn */
.foot__in{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1.2rem 2.5rem;align-items:baseline}

/* beeld */
.shot{position:relative;overflow:hidden;background:var(--bg2)}
.shot img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.75,.25,1)}
@media(prefers-reduced-motion:no-preference){.shot:hover img{transform:scale(1.018)}}

/* prijs */
.price{font-size:clamp(2.1rem,4.4vw,3.4rem);font-weight:500;letter-spacing:-.04em;line-height:1;margin:.2rem 0 .1rem}
.price em{font-style:normal;font-size:.85rem;font-weight:400;letter-spacing:0;color:var(--ink2);display:block;margin-top:.55rem;line-height:1.6}
.spec{list-style:none;font-size:.93rem;color:var(--ink2);margin-top:1.4rem}
.spec li{border-top:1px solid var(--line);padding:.52rem 0}

/* keten, proces en levering: typografie en dunne lijnen, geen iconen */
.chain{background:var(--dark);color:#EDEAE3;padding-block:clamp(4.5rem,9vw,8.5rem)}
.chain h2,.chain h3{color:#F4F2ED}
.chain .lede{color:rgba(237,234,227,.62)}
.chains{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,7vw,6.5rem);margin-top:clamp(2.6rem,5vw,4.2rem);max-width:56rem}
@media(max-width:640px){.chains{grid-template-columns:1fr;gap:2.6rem}}
.chains h4{font-size:.95rem;font-weight:500;color:#F4F2ED;padding-bottom:.85rem;
  border-bottom:1px solid rgba(244,242,237,.22);margin-bottom:1.2rem}
.chains ul{list-style:none;font-size:1.05rem;line-height:2.1;color:rgba(237,234,227,.55)}
.chains li::before{content:"";display:inline-block;width:16px;height:1px;
  background:rgba(237,234,227,.3);vertical-align:middle;margin-right:.75rem}
.chains .us li{color:#F4F2ED}
.chains .us li::before{background:var(--accent-l);width:26px}
.chain__foot{margin-top:clamp(2.4rem,4vw,3.4rem);max-width:44rem;color:rgba(237,234,227,.66);font-size:1.02rem}

.steps{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line)}
.steps>div{padding:1.35rem 1.15rem 1.5rem;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.steps>div:last-child{border-right:0}
.steps b{display:block;font-weight:500;font-size:1rem;margin-bottom:.28rem}
.steps span{font-size:.85rem;color:var(--ink2);line-height:1.5;display:block}
@media(max-width:860px){.steps{grid-template-columns:1fr 1fr}.steps>div:nth-child(2n){border-right:0}}

.lev{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.2rem;align-items:baseline;
  border-bottom:1px solid var(--line);padding:1.05rem 0}
.lev b{font-weight:500;font-size:1.05rem}
.lev p{font-size:.89rem;color:var(--ink2);margin-top:.15rem;max-width:38rem}
.lev .amt{font-weight:500;font-size:1.05rem;white-space:nowrap}

/* formulieren */
.fld{display:block;margin-bottom:1.05rem}
.fld>span{display:block;font-size:.82rem;color:var(--ink2);margin-bottom:.38rem}
.fld input,.fld textarea,.fld select{width:100%;font:inherit;font-size:1rem;padding:.82rem .9rem;
  border:1px solid var(--line);background:transparent;color:inherit;border-radius:0}
.fld input:focus,.fld textarea:focus,.fld select:focus{outline:none;border-color:var(--ink)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
@media(max-width:560px){.grid2{grid-template-columns:1fr}}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.9rem}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip span{display:inline-block;border:1px solid var(--line);padding:.6rem 1.05rem;font-size:.92rem;cursor:pointer;transition:.15s}
.chip span:hover{border-color:var(--line2)}
.chip input:checked+span{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.chip input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.file{margin:.3rem 0 1.1rem}
.file>span{display:block;font-size:.82rem;color:var(--ink2);margin-bottom:.38rem}
.file input{font-size:.87rem;color:var(--ink2)}
.consent{display:flex;gap:.55rem;align-items:flex-start;font-size:.85rem;color:var(--ink2);margin:.5rem 0 1.2rem;line-height:1.5}
.hp{position:absolute;left:-9999px}
.fmsg{min-height:1px;font-size:.89rem;margin-bottom:.6rem}
.fmsg.err{color:#8C3A21}.fmsg.ok{color:var(--accent)}

/* lopende tekst, voor de juridische pagina's */
.prose{max-width:38rem}
.prose h2{font-size:clamp(1.4rem,2.2vw,1.85rem);margin:2.6rem 0 .8rem}
.prose h3{font-size:1.15rem;margin:1.8rem 0 .5rem}
.prose p,.prose li{color:var(--ink2);margin-bottom:.85rem}
.prose ul,.prose ol{padding-left:1.15rem;margin-bottom:1.1rem}
.prose li{margin-bottom:.35rem}
.prose a{border-bottom:1px solid var(--line2)}
.prose a:hover{border-bottom-color:var(--ink);color:var(--ink)}
.prose strong{color:var(--ink);font-weight:500}
.prose table{width:100%;border-collapse:collapse;margin:1.2rem 0;font-size:.93rem}
.prose th,.prose td{border-bottom:1px solid var(--line);padding:.7rem .8rem .7rem 0;text-align:left;vertical-align:top}
.prose th{font-weight:500;color:var(--ink)}

/* ============================================================================
   OUDE CLASS-API, opnieuw getekend
   Zelfde namen als in light.css zodat de bestaande pagina-markup blijft
   werken, maar dan in het nieuwe systeem.
   ========================================================================== */

.container,.container-mid,.container-narrow{
  width:100%;margin-inline:auto;padding-inline:clamp(1.25rem,6vw,6.5rem)}
.container{max-width:1600px}
.container-mid{max-width:78rem}
.container-narrow{max-width:44rem}

.section{padding-block:clamp(3.5rem,7vw,6.5rem)}
.section-cream{background:var(--bg)}
.section-stone{background:var(--bg2)}
.section-walnut-wash{background:var(--bg2)}

.section-head{max-width:40rem;margin-bottom:clamp(2rem,4vw,3rem)}
.section-head h2{margin-bottom:.9rem}

/* Kleine uppercase labels boven elke titel geven een gegenereerde look.
   Ze blijven bestaan voor de markup, maar rustig en zonder tracking. */
.eyebrow,.label,.meta,.tag{
  display:inline-block;font-size:.79rem;font-weight:500;letter-spacing:0;
  text-transform:none;color:var(--ink2);margin-bottom:.55rem;
  background:none;border:0;padding:0;border-radius:0}
.tag{border:1px solid var(--line);padding:.3rem .6rem;margin:0}

/* geen zwevende kaarten, wel een haarlijn */
.card,.keuken-kaart,.faq-item,.usp-item,.step-item,.trust-item{
  background:none;border-radius:0;box-shadow:none;border:1px solid var(--line);
  padding:1.4rem 1.5rem 1.6rem;transition:border-color .18s}
.card:hover,.keuken-kaart:hover,.usp-item:hover{transform:none;box-shadow:none;border-color:var(--line2)}
.keuken-kaart-head,.keuken-kaart-body,.keuken-kaart-footer{background:none;border-radius:0}

/* iconenrijen en genummerde bolletjes zijn precies het patroon dat we weg
   willen; ze worden typografie of verdwijnen */
.usp-icon,.faq-icon{display:none}
.step-number{display:block;font-size:.85rem;font-weight:500;color:var(--accent);
  background:none;border:0;border-radius:0;width:auto;height:auto;line-height:1.4;margin-bottom:.4rem}

.usp-grid,.steps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0}
.usp-grid>*,.steps-grid>*{margin:-1px 0 0 -1px}

.price-block{margin-block:1rem}
.price-now{font-size:clamp(2rem,4vw,3rem);font-weight:500;letter-spacing:-.04em;line-height:1;color:var(--ink)}
/* geen doorstreepte korting */
.price-was{display:block;text-decoration:none;font-size:.85rem;color:var(--ink2);margin-top:.5rem}

.included-list,.options-table{width:100%;border-collapse:collapse;font-size:.93rem}
.included-list li{list-style:none;border-top:1px solid var(--line);padding:.52rem 0;color:var(--ink2)}
.options-table th,.options-table td{border-bottom:1px solid var(--line);padding:.7rem .8rem .7rem 0;text-align:left}
.options-table th{font-weight:500}

.faq-list{max-width:44rem}
.faq-item{border:0;border-top:1px solid var(--line);padding:1.1rem 0}
.faq-item:last-child{border-bottom:1px solid var(--line)}
.faq-answer{color:var(--ink2);font-size:.97rem}

.hero-light{padding-top:68px;background:var(--bg)}
.hero-inner{padding-inline:clamp(1.25rem,6vw,6.5rem);padding-block:clamp(3rem,7vw,6rem);
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(1.8rem,5vw,5rem);align-items:end}
@media(max-width:900px){.hero-inner{grid-template-columns:1fr;gap:2rem}}
.hero-text-col{min-width:0}
.hero-image-col,.hero-image-wrap{min-width:0;border-radius:0;box-shadow:none;overflow:hidden}
.hero-ctas{display:flex;gap:1.4rem;align-items:center;flex-wrap:wrap;margin-top:1.6rem}
.hero-trust,.trust-item{border:0;padding:0;font-size:.86rem;color:var(--ink2)}
.hero-trust{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;margin-top:1.6rem}

.render-slot,.plan-slot,.placeholder-slot{border-radius:0;box-shadow:none;background:var(--bg2);border:1px solid var(--line)}
.render-caption,.plan-caption{font-size:.82rem;color:var(--ink2);padding-top:.6rem}
.render-plan-pair{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
@media(max-width:760px){.render-plan-pair{grid-template-columns:1fr}}

/* geen fade-in-on-scroll */
.reveal,.reveal-delay-1,.reveal-delay-2,.reveal-delay-3{opacity:1!important;transform:none!important;animation:none!important;transition:none!important}

/* de oude donkere voettekst en navigatie worden niet meer gebruikt, maar
   blijven neutraal staan voor het geval een pagina ze nog draagt */
.footer-dark{background:var(--dark);color:var(--text-on-dark);padding-block:clamp(3rem,6vw,5rem) 2rem}
.footer-dark a{color:rgba(244,242,237,.7)}
.footer-dark a:hover{color:#F4F2ED}
.nav-toggle{display:none}

/* ----------------------------------------------------------------------------
   Mobiel vangnet voor de oudere pagina's.
   Daar staan rasters met een inline style zoals
   style="display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-6)"
   zonder mediaquery. Op een smal scherm passen die niet en duwen ze de hele
   pagina breder dan het venster. Onder 820px gaan ze gewoon onder elkaar.
   -------------------------------------------------------------------------- */
@media(max-width:820px){
  [style*="grid-template-columns"]{grid-template-columns:1fr!important;gap:var(--sp-4)!important}
}
/* Raster- en flexkinderen mogen krimpen onder hun min-content breedte, anders
   blaast één lange regel de kolom op. */
.container>*,.container-mid>*,.container-narrow>*{min-width:0}

/* Brede tabellen scrollen in hun eigen kader in plaats van de pagina mee te nemen. */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ============================================================================
   Site rond de configurator (01/10/2026)
   Gedeelde onderdelen voor de homepage, /voorbeelden.html, /hoe-het-werkt.html,
   /veelgestelde-vragen.html en /contact.html.
   ========================================================================== */

/* Hero: een groot beeld over de volle breedte, de kop over het beeld. Het donkere
   verloop onderaan is er voor de leesbaarheid van de witte tekst, niet als decor. */
.hero{position:relative}
.hero__img{height:clamp(560px,86vh,960px)}
.hero__img img{object-position:50% 55%}
.hero__img::before{content:"";position:absolute;inset:0 0 auto;height:120px;z-index:1;
  background:linear-gradient(180deg,rgba(244,242,237,.72),rgba(244,242,237,0));pointer-events:none}
.hero__img::after{content:"";position:absolute;inset:auto 0 0;height:66%;z-index:1;
  background:linear-gradient(180deg,rgba(20,18,15,0),rgba(20,18,15,.78));pointer-events:none}
.hero__over{position:absolute;left:0;right:0;bottom:clamp(2rem,5vw,4rem);z-index:2;color:#F4F2ED;
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(1.6rem,4vw,3.5rem);align-items:end}
@media(max-width:900px){.hero__over{grid-template-columns:1fr;gap:1.2rem}
  .hero__img::after{height:92%;background:linear-gradient(180deg,rgba(20,18,15,0),rgba(20,18,15,.55) 38%,rgba(20,18,15,.84))}}
.hero__over h1{color:#F4F2ED;max-width:14ch}
.hero__over .lede{color:rgba(244,242,237,.9)}
.hero__over .cta{background:#F4F2ED;color:#20201D;border-color:#F4F2ED}
.hero__over .cta:hover{background:transparent;color:#F4F2ED;border-color:#F4F2ED}
.hero__over .cta:focus-visible,.hero__tlink:focus-visible{outline:2px solid #F4F2ED;outline-offset:3px}
.hero__akt{display:flex;align-items:center;gap:1.2rem 1.8rem;flex-wrap:wrap;margin-top:1.5rem}
.hero__tlink{color:#F4F2ED;font-size:.95rem;border-bottom:1px solid rgba(244,242,237,.5);padding:.7rem 0 2px}
.hero__tlink:hover{border-bottom-color:#F4F2ED}
.hero__feit{margin-top:1.2rem;font-size:.86rem;color:rgba(244,242,237,.82);line-height:1.55}
.hero__bron{position:absolute;right:clamp(1.25rem,6vw,6.5rem);top:5.2rem;z-index:2;font-size:.78rem;color:var(--ink2);
  background:rgba(244,242,237,.82);padding:.3rem .55rem}
.hero--laag .hero__img{height:clamp(440px,64vh,700px)}

/* Een voorbeeld: beeld en tekst naast elkaar, om de rij van kant wisselend.
   Geen kaarten naast elkaar: elk voorbeeld krijgt de volle breedte. */
.vbs{margin-top:clamp(2rem,4vw,3.2rem)}
.vb{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(1.4rem,4vw,4rem);align-items:center;
  padding-block:clamp(1.8rem,3.5vw,3rem);border-top:1px solid var(--line)}
.vb:nth-child(even) .vb__beeld{order:2}
.vb__beeld{display:block;background:#F4F2ED;border:1px solid var(--line);aspect-ratio:16/10;overflow:hidden}
.vb__beeld img{width:100%;height:100%;object-fit:contain;transition:transform 1.1s cubic-bezier(.2,.75,.25,1)}
@media(prefers-reduced-motion:no-preference){.vb__beeld:hover img{transform:scale(1.02)}}
.vb__tekst h2,.vb__tekst h3{font-size:clamp(1.45rem,2.4vw,2.1rem);max-width:18ch}
.vb__prijs{font-size:clamp(2rem,3.6vw,3rem);font-weight:500;letter-spacing:-.04em;line-height:1;margin-top:.9rem}
.vb__prijs small{display:block;font-size:.82rem;font-weight:400;letter-spacing:0;color:var(--ink2);margin-top:.5rem}
.vb__tekst>p:not([class]){color:var(--ink2);margin-top:1.1rem;font-size:.97rem}
.vb__feiten{margin-top:1.2rem;font-size:.9rem;border-top:1px solid var(--line)}
.vb__feiten div{display:grid;grid-template-columns:5.5rem minmax(0,1fr);gap:1rem;padding:.5rem 0;border-bottom:1px solid var(--line)}
.vb__feiten dt{color:var(--ink2)}
.vb__tekst .cta{margin-top:1.5rem}
.vb__bron{font-size:.8rem;color:var(--ink2);margin-top:.8rem}
@media(max-width:860px){.vb{grid-template-columns:1fr}.vb:nth-child(even) .vb__beeld{order:0}}
.cta:focus-visible,.tlink:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* Wat er in de prijs zit: lijst met rechts waar het staat. */
.inhoud{background:var(--bg2);padding-block:clamp(4rem,8vw,6.5rem)}
.inhoud__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,6vw,6rem);align-items:start}
@media(max-width:900px){.inhoud__grid{grid-template-columns:1fr;gap:1.8rem}}
.inhoud .lev:first-child{border-top:1px solid var(--line2)}
.inhoud .lev{border-bottom-color:var(--line2)}
.inhoud .lev .amt{white-space:normal;text-align:right;max-width:13rem;font-size:.95rem}
@media(max-width:480px){.inhoud .lev{grid-template-columns:1fr;gap:.2rem}.inhoud .lev .amt{text-align:left;max-width:none;font-weight:400;color:var(--ink2)}}

/* Veelgestelde vragen: gewone details, de vraag is de knop. */
.vragen{max-width:48rem}
.vragen details{border-top:1px solid var(--line)}
.vragen details:last-of-type{border-bottom:1px solid var(--line)}
.vragen summary{cursor:pointer;list-style:none;padding:1.1rem 2.2rem 1.1rem 0;position:relative;font-weight:500;font-size:1.06rem}
.vragen summary::-webkit-details-marker{display:none}
.vragen summary::after{content:"";position:absolute;right:.3rem;top:1.45rem;width:.6rem;height:.6rem;
  border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform:rotate(45deg);transition:transform .2s}
.vragen details[open] summary::after{transform:rotate(-135deg);top:1.7rem}
.vragen summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.vragen details>div{padding:0 0 1.3rem;color:var(--ink2)}
.vragen details>div p+p{margin-top:.7rem}
.vragen h3{font-size:1.15rem;margin:clamp(2.4rem,4vw,3.2rem) 0 .6rem}

/* Contactformulier voor vragen (contactformulier.js). */
.ask{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,6vw,6rem);align-items:start}
@media(max-width:900px){.ask{grid-template-columns:1fr;gap:2.4rem}}
.fdone{border:1px solid var(--ink);padding:clamp(1.3rem,3vw,1.9rem)}
.fdone:focus{outline:none}
.fdone:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.fdone b{display:block;font-weight:500;font-size:1.2rem;letter-spacing:-.02em;margin-bottom:.5rem}
.fdone p{font-size:.93rem;color:var(--ink2);line-height:1.6}
.vraagform [disabled]{opacity:.55;cursor:default}
.vraagform .file__lab{display:block;font-size:.82rem;color:var(--ink2);margin-bottom:.4rem}

/* Cervano: sober kader. */
.cervano{padding-block:clamp(3.5rem,7vw,6rem)}
.cervano__kader{border:1px solid var(--ink);padding:clamp(1.6rem,4vw,3.2rem);
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(1.6rem,4vw,4rem);align-items:end}
@media(max-width:900px){.cervano__kader{grid-template-columns:1fr}}
.cervano h2{font-size:clamp(1.6rem,2.8vw,2.5rem);max-width:22ch}
.cervano p{color:var(--ink2);margin-top:1rem}
.cervano .tlink{padding-top:.6rem}

/* Lopende pagina's zonder volle hero-tekst: kop onder het beeld. */
.pkop{padding-block:clamp(2.6rem,5vw,4rem) clamp(1rem,2vw,1.6rem)}
.pkop h1{max-width:16ch}
.pkop .lede{margin-top:1.2rem}
.blok{padding-block:clamp(3rem,6vw,5rem)}
.blok+.blok{border-top:1px solid var(--line)}
.twee{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(1.8rem,5vw,5rem);align-items:start}
@media(max-width:900px){.twee{grid-template-columns:1fr;gap:1.2rem}}
.twee p+p,.twee ul+p,.twee p+ul{margin-top:.9rem}
.twee p,.twee li{color:var(--ink2)}
.twee ul{padding-left:1.1rem}
.twee li{margin-bottom:.4rem;max-width:38rem}
.twee strong{color:var(--ink);font-weight:500}

/* ============================================================================
   Richting B "Materiaal", met delen van A (keuze Kevin 01/10/2026)
   Gekozen uit een vergelijking van drie richtingen. Walnoot is de merkkleur,
   koppen in een bredere snit van Archivo, de hero in twee delen (tekst op
   walnoot, beeld ernaast, nooit tekst over de foto). Uit A: drie feiten in de
   hero, het donkere prijsblok en het Cervano-blok met foto.
   ========================================================================== */

h1,h2,h3{font-weight:600;font-stretch:115%;letter-spacing:-.04em}
h1{line-height:.97}
.vb__prijs,.price,.price-now{color:var(--walnoot);font-variant-numeric:tabular-nums}

/* Hero: links walnoot met de tekst, rechts het beeld. */
.hero__img{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);background:var(--walnoot);height:auto;min-height:clamp(600px,88vh,920px)}
.hero__img img{grid-column:2;grid-row:1;height:100%;min-height:100%}
.hero__img::after{display:none}
/* Donkere waas bovenaan, zodat de lichte navigatie leesbaar blijft op het beeld. */
.hero__img::before{height:150px;background:linear-gradient(180deg,rgba(20,18,15,.5),rgba(20,18,15,0))}
.hero__over{position:relative;left:auto;right:auto;bottom:auto;grid-column:1;grid-row:1;
  display:flex;flex-direction:column;justify-content:flex-end;gap:0;align-items:stretch;
  padding-top:8rem;padding-bottom:clamp(2.5rem,5vw,4.5rem);padding-right:clamp(1.5rem,4vw,4rem)}
.hero__over h1{color:#F2EBE0;font-size:clamp(2.7rem,5.2vw,5rem);max-width:11ch}
.hero__over .lede{color:var(--op-walnoot);margin-top:1.5rem}
.hero__over .cta{background:#F2EBE0;color:var(--walnoot);border-color:#F2EBE0}
.hero__over .cta:hover{background:transparent;color:#F2EBE0}
.hero__akt{margin-top:2rem}
.hero__tlink{color:#F2EBE0}
.hero__feiten{display:grid;grid-template-columns:repeat(3,minmax(0,max-content));gap:.6rem clamp(1rem,2vw,2rem);margin-top:2.4rem;padding-top:1.2rem;
  border-top:1px solid rgba(242,235,224,.25);font-size:.86rem;color:var(--op-walnoot);line-height:1.4}
.hero__feiten b{display:block;color:#F2EBE0;font-weight:500;font-size:1rem}
.hero__bron{top:auto;bottom:0;right:0;background:var(--bg);color:var(--ink2)}
.hero--laag .hero__img{height:auto;min-height:clamp(460px,64vh,680px)}
.hero--laag .hero__over h1{font-size:clamp(2.3rem,4.2vw,3.8rem)}
@media(max-width:900px){
  .hero__img,.hero--laag .hero__img{grid-template-columns:1fr;min-height:0}
  .hero__img img{grid-column:1;grid-row:1;aspect-ratio:4/3;height:auto;min-height:0}
  .hero__over{grid-column:1;grid-row:2;padding-top:2.2rem;padding-bottom:2.6rem}
  .hero__bron{bottom:auto;top:calc(75vw - 1.9rem)}
}

/* Navigatie licht zolang ze boven een hero hangt, donker zodra u scrolt. */
body:has(.hero) .topnav:not(.on):not(.menu-open) .mark,
body:has(.hero) .topnav:not(.on):not(.menu-open) .topnav__l a,
body:has(.hero) .topnav:not(.on):not(.menu-open) .topnav__knop{color:#F2EBE0;border-bottom-color:transparent}
body:has(.hero) .topnav:not(.on):not(.menu-open) .topnav__l .go{border-bottom-color:#F2EBE0}

/* Stalenstrook onder de hero. */
.stalen{padding-block:clamp(3rem,6vw,5rem)}
.stalen__kop{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:1rem 3rem}
.stalen__kop .lede{max-width:28rem}
.stalen__rij{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:clamp(.5rem,1vw,.9rem);margin-top:2rem;list-style:none}
.stalen__rij img{width:100%;aspect-ratio:3/4;object-fit:cover}
.stalen__rij span{display:block;font-size:.82rem;margin-top:.5rem;line-height:1.3}
.stalen__rij small{display:block;color:var(--ink2);font-size:.75rem}
@media(max-width:760px){.stalen__rij{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Voorbeelden: de render bijgesneden, de lege kamer valt weg. */
.vb__beeld{border:0;background:#E4DED3;aspect-ratio:16/10}
.vb__beeld img{object-fit:cover;transform:scale(1.22);transform-origin:50% 60%}
@media(prefers-reduced-motion:no-preference){.vb__beeld:hover img{transform:scale(1.26)}}

/* Wat er in de prijs zit: donker vlak (uit A). */
.inhoud{background:var(--dark);color:var(--bg)}
.inhoud h2,.inhoud h3,.inhoud .lev b,.inhoud .lev .amt{color:#F2EBE0}
.inhoud .lede,.inhoud .lev p{color:#B9B2A6}
.inhoud .lev,.inhoud .lev:first-child{border-color:#3D3A33}
.inhoud .tlink{color:#F2EBE0;border-bottom-color:#F2EBE0}

/* Cervano: foto en tekst naast elkaar (uit A). */
.cervano--foto{padding:0;display:grid;grid-template-columns:1fr 1fr;background:var(--bg2);min-height:28rem}
.cervano--foto>img{width:100%;height:100%;object-fit:cover}
.cervano--foto .cervano__tekst{padding:clamp(2rem,5vw,4.5rem);display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.cervano--foto .note{margin-top:1.4rem}
@media(max-width:900px){.cervano--foto{grid-template-columns:1fr}.cervano--foto>img{aspect-ratio:4/3;height:auto}}

/* Drie stappen naast elkaar, met het schermbeeld eronder (uit A). */
.wegen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--ink);margin-top:clamp(2rem,4vw,3rem)}
.wegen>div{padding:1.6rem 1.6rem 0 0}
.wegen>div+div{padding-left:1.6rem;border-left:1px solid var(--line)}
.wegen h3{font-size:clamp(1.35rem,2vw,1.6rem)}
.wegen h3 i{font-style:normal;color:var(--walnoot);margin-right:.5rem}
.wegen p{color:var(--ink2);margin-top:.7rem;font-size:.97rem}
.wegen .tlink{margin-top:1.1rem}
@media(max-width:900px){.wegen{grid-template-columns:1fr}.wegen>div+div{border-left:0;padding-left:0;border-top:1px solid var(--line);margin-top:1.6rem}}
@media(max-width:600px){.hero__feiten{grid-template-columns:1fr 1fr}}

/* ============================================================================
   Foto's van echte realisaties (02/10/2026)
   Kevin: de hero moest beter, met echte realisaties en veel meer keukens.
   Drie soorten beeld, elk met een eigen label dat nooit wisselt:
   - foto van een uitgevoerd project: "Realisatie" (locatie enkel Antwerpen);
   - met AI gemaakt beeld: "Sfeerbeeld", zonder locatie of prijs;
   - schermafbeelding: "Uit de configurator".
   ========================================================================== */

/* Hero met een echte foto over de volle breedte, de tekst onderaan erover.
   Het verloop dient enkel de leesbaarheid van de witte tekst. */
.fhero{position:relative;height:100vh;height:100svh;min-height:620px;max-height:1080px;overflow:hidden;background:var(--dark);color:#F4F2ED}
.fhero__beeld,.fhero__beeld img{position:absolute;inset:0;width:100%;height:100%}
.fhero__beeld img{object-fit:cover;object-position:38% 72%}
.fhero::before{content:"";position:absolute;inset:0 0 auto;height:150px;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,18,15,.42),rgba(20,18,15,0))}
.fhero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(0deg,rgba(20,18,15,.78) 0%,rgba(20,18,15,.38) 28%,rgba(20,18,15,0) 50%),
    linear-gradient(90deg,rgba(20,18,15,.5) 0%,rgba(20,18,15,.18) 42%,rgba(20,18,15,0) 62%)}
.fhero__tekst{position:absolute;left:0;right:0;bottom:0;z-index:2;padding-bottom:clamp(1.8rem,4.5vw,3.6rem)}
.fhero h1{color:#F4F2ED;font-size:clamp(2.6rem,5.4vw,5rem);max-width:15ch;line-height:.96}
.fhero__onder{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.4rem 3rem;align-items:end;margin-top:clamp(1.2rem,2.4vw,1.8rem)}
.fhero .lede{color:rgba(244,242,237,.9);max-width:33rem}
.fhero__akt{display:flex;align-items:center;gap:1rem 1.8rem;flex-wrap:wrap;margin-top:1.4rem}
.fhero .cta{background:#F4F2ED;color:#20201D;border-color:#F4F2ED}
.fhero .cta:hover{background:transparent;color:#F4F2ED}
.fhero .cta:focus-visible,.fhero .hero__tlink:focus-visible{outline:2px solid #F4F2ED;outline-offset:3px}
.fhero__feiten{display:grid;gap:.7rem;font-size:.86rem;color:rgba(244,242,237,.78);line-height:1.35;
  border-left:1px solid rgba(244,242,237,.3);padding-left:1.2rem;min-width:13rem}
.fhero__feiten b{display:block;color:#F4F2ED;font-weight:500;font-size:.98rem}
.fhero__bron{margin-top:clamp(1.2rem,2.5vw,2rem);font-size:.78rem;color:rgba(244,242,237,.7)}
@media(max-width:820px){
  .fhero{min-height:640px}
  .fhero__beeld img{object-position:40% 62%}
  .fhero::after{background:linear-gradient(0deg,rgba(20,18,15,.9) 0%,rgba(20,18,15,.7) 45%,rgba(20,18,15,0) 78%)}
  .fhero__onder{grid-template-columns:1fr}
  .fhero__feiten{grid-template-columns:repeat(3,minmax(0,1fr));border-left:0;padding-left:0;border-top:1px solid rgba(244,242,237,.3);padding-top:.9rem;min-width:0;gap:.8rem}
  .fhero__feiten b{font-size:.9rem}
}
@media(max-width:560px){.fhero__feiten{display:none}.fhero .lede{font-size:1.02rem}.fhero__akt{gap:.9rem 1.4rem}
  .fhero::after{background:linear-gradient(0deg,rgba(20,18,15,.9) 0%,rgba(20,18,15,.62) 38%,rgba(20,18,15,0) 62%)}}
body:has(.fhero) .topnav:not(.on):not(.menu-open) .mark,
body:has(.fhero) .topnav:not(.on):not(.menu-open) .topnav__l a,
body:has(.fhero) .topnav:not(.on):not(.menu-open) .topnav__knop{color:#F2EBE0;border-bottom-color:transparent}
body:has(.fhero) .topnav:not(.on):not(.menu-open) .topnav__l .go{border-bottom-color:#F2EBE0}

/* Bijschrift onder een foto: titel, dan wat het is en waar. */
.bijschrift{padding-top:.75rem;font-size:.88rem;color:var(--ink2);line-height:1.45}
.bijschrift b{display:block;color:var(--ink);font-weight:500;font-size:1rem;letter-spacing:-.01em}
.label{display:inline-block;font-size:.76rem;color:var(--ink2);border:1px solid var(--line2);padding:.12rem .45rem;margin-top:.45rem}
.label--sfeer{border-style:dashed}

/* Galerij van realisaties op de homepage: rijen met elk een eigen verdeling,
   zodat het geen raster van gelijke tegels wordt. */
.rg{display:grid;gap:clamp(1.6rem,3vw,2.6rem)}
.rg__rij{display:grid;gap:clamp(.8rem,1.6vw,1.4rem)}
.rg__rij--a{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.rg__rij--b{grid-template-columns:repeat(3,minmax(0,1fr))}
.rg__rij--c{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.rg figure{min-width:0}
.rg a{display:block;color:inherit}
.rg .shot{height:clamp(240px,34vw,560px)}
.rg__rij--b .shot{height:clamp(220px,24vw,400px)}
.rg a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(max-width:820px){
  .rg__rij,.rg__rij--a,.rg__rij--b,.rg__rij--c{grid-template-columns:1fr 1fr}
  .rg .shot,.rg__rij--b .shot{height:auto;aspect-ratio:4/5}
  .rg__rij--a,.rg__rij--c{grid-template-columns:1fr}
  .rg__rij--a .shot,.rg__rij--c .shot{aspect-ratio:4/3}
  .rg__rij--b figure:last-child{grid-column:1/-1}
  .rg__rij--b figure:last-child .shot{aspect-ratio:4/3}
}
@media(max-width:420px){.rg .bijschrift{font-size:.82rem}.rg .bijschrift b{font-size:.92rem}}

/* Sfeerbeelden: een groot en twee kleine. */
.sfeer__raster{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:clamp(.8rem,1.6vw,1.4rem)}
.sfeer__raster figure{min-width:0}
.sfeer__groot .shot{height:100%;min-height:clamp(260px,40vw,640px)}
.sfeer__groot{display:flex;flex-direction:column}
.sfeer__groot .shot{flex:1}
.sfeer__klein{display:grid;gap:clamp(.8rem,1.6vw,1.4rem)}
.sfeer__klein .shot{aspect-ratio:3/2}
@media(max-width:820px){.sfeer__raster{grid-template-columns:1fr}.sfeer__groot .shot{min-height:0;aspect-ratio:3/2}.sfeer__klein{grid-template-columns:1fr 1fr}}

/* Stalen als scrollstrook met pijlknoppen. */
.strook{position:relative;margin-top:clamp(1.6rem,3vw,2.4rem)}
.strook__lijst{display:flex;gap:clamp(.5rem,1vw,.8rem);overflow-x:auto;scroll-snap-type:x mandatory;list-style:none;
  scrollbar-width:thin;padding-bottom:.8rem;overscroll-behavior-x:contain}
.strook__lijst>li{flex:0 0 clamp(96px,10.5vw,138px);scroll-snap-align:start;min-width:0}
.strook__lijst img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;background:var(--bg2)}
.strook__lijst span{display:block;font-size:.8rem;margin-top:.45rem;line-height:1.3}
.strook__lijst small{display:block;color:var(--ink2);font-size:.72rem}
.strook__alle{display:flex;flex-direction:column;justify-content:flex-end;aspect-ratio:3/4;padding:.9rem;background:var(--ink);color:var(--bg);
  font-weight:500;font-size:.95rem;line-height:1.25}
.strook__alle:hover{background:var(--walnoot)}
.strook__alle:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.strook__knoppen{display:flex;gap:.5rem}
.strook__knop{width:2.75rem;height:2.75rem;border:1px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;border-radius:0}
.strook__knop:hover{background:var(--ink);color:var(--bg)}
.strook__knop:disabled{opacity:.3;cursor:default;background:transparent;color:var(--ink)}
.strook__knop:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(hover:none),(max-width:820px){.strook__knoppen{display:none}}

/* Voorbeelden als prijslijst: klein beeld, naam, maten, prijs. */
.vlijst{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(1.6rem,4vw,3.6rem);margin-top:clamp(1.8rem,3.5vw,2.8rem);list-style:none;border-top:1px solid var(--ink)}
.vlijst li{min-width:0;border-bottom:1px solid var(--line)}
.vlijst a{display:grid;grid-template-columns:clamp(96px,11vw,150px) minmax(0,1fr) auto;gap:1rem 1.2rem;align-items:center;padding:1rem 0;color:inherit}
.vlijst__beeld{aspect-ratio:4/3;overflow:hidden;background:#E4DED3}
.vlijst__beeld img{width:100%;height:100%;object-fit:cover;transform:scale(1.3);transform-origin:50% 60%}
.vlijst b{display:block;font-weight:500;font-size:1.02rem;line-height:1.25}
.vlijst small{display:block;color:var(--ink2);font-size:.84rem;margin-top:.25rem;line-height:1.35}
.vlijst__prijs{font-weight:500;font-size:clamp(1.05rem,1.5vw,1.3rem);color:var(--walnoot);white-space:nowrap;font-variant-numeric:tabular-nums;text-align:right}
.vlijst__prijs small{font-weight:400;font-size:.72rem}
.vlijst a:hover b{text-decoration:underline;text-underline-offset:3px}
.vlijst a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(max-width:900px){.vlijst{grid-template-columns:1fr}}
@media(max-width:480px){.vlijst a{grid-template-columns:84px minmax(0,1fr)}.vlijst__prijs{grid-column:2;text-align:left}}

/* Configuratorpagina met voorbeelden: het 3D-beeld kleiner naast de tekst. */
.vblijst .vb{grid-template-columns:minmax(0,4fr) minmax(0,7fr)}
@media(max-width:860px){.vblijst .vb{grid-template-columns:1fr}.vblijst .vb__beeld{max-width:28rem}}

/* Lichtbak voor de foto's van een realisatie. */
.lichtbak{border:0;padding:0;margin:auto;width:min(100vw,1600px);max-width:100vw;height:100vh;height:100dvh;max-height:100dvh;background:#14120F;color:#F4F2ED}
.lichtbak::backdrop{background:rgba(20,18,15,.92)}
.lichtbak__in{display:grid;grid-template-rows:auto minmax(0,1fr) auto;height:100%}
.lichtbak__kop{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:1rem clamp(1rem,3vw,2rem)}
.lichtbak__kop p{font-size:.9rem;color:rgba(244,242,237,.75);min-width:0}
.lichtbak__kop b{color:#F4F2ED;font-weight:500}
.lichtbak__beeld{display:flex;align-items:center;justify-content:center;min-height:0;padding:0 clamp(.5rem,2vw,1.5rem)}
.lichtbak__beeld img{max-width:100%;max-height:100%;object-fit:contain}
.lichtbak__voet{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem clamp(1rem,3vw,2rem)}
.lichtbak button{background:transparent;color:#F4F2ED;border:1px solid rgba(244,242,237,.5);font:inherit;font-size:.9rem;padding:.7rem 1.1rem;cursor:pointer;border-radius:0;min-height:44px}
.lichtbak button:hover{background:#F4F2ED;color:#14120F}
.lichtbak button:focus-visible{outline:2px solid #F4F2ED;outline-offset:3px}
.lichtbak__teller{font-size:.85rem;color:rgba(244,242,237,.7);font-variant-numeric:tabular-nums}
/* Een <picture> rond het beeld neemt de maat van zijn kader over. */
.shot>picture,.cervano--foto>picture{display:block;width:100%;height:100%;min-height:0}
.cervano--foto>picture img{width:100%;height:100%;object-fit:cover}
@media(max-width:900px){.cervano--foto>picture img{aspect-ratio:4/3;height:auto}}
.hero__img>picture{grid-column:2;grid-row:1;display:block;min-height:100%}
.hero__img>picture img{width:100%;height:100%;object-fit:cover}
@media(max-width:900px){.hero__img>picture{grid-column:1;grid-row:1;min-height:0}.hero__img>picture img{aspect-ratio:4/3;height:auto}}
.vblijst .vb:nth-child(even){grid-template-columns:minmax(0,7fr) minmax(0,4fr)}
@media(max-width:860px){.vblijst .vb:nth-child(even){grid-template-columns:1fr}}

/* ============================================================================
   Configurator als hoofdactie (02/10/2026)
   Kevin: "De configurator moet echt een duidelijke CTA zijn." De knop in de
   navigatie en de onderbalk op de telefoon staan in nav.js (eigen stijl).
   Hier: de grotere heroknop, de doorverwijzing na een sectie (.verwijs) en
   het blok "Zelf aan de slag?" (.zelf). Overal dezelfde zwarte rechthoek met
   dezelfde tekst, en nooit twee knoppen in één scherm.
   Elke knop draagt data-cta="<plaats>", zodat een latere meting klikken per
   plaats kan onderscheiden. Er is vandaag geen klikmeting; er is niets gebouwd.
   ========================================================================== */
.cta--groot{padding:1.2rem 1.9rem;font-size:1.05rem;min-height:56px}
.fhero__akt:has(.fhero__knop){align-items:baseline}
.fhero__gerust{margin-top:.7rem;font-size:.86rem;color:rgba(244,242,237,.85)}
@media(max-width:560px){.fhero__knop{width:100%}}
@media(max-width:560px){.cta--groot{padding:1.05rem 1.3rem;font-size:1rem;width:100%;justify-content:space-between}}

.verwijs{display:flex;align-items:center;justify-content:space-between;gap:1.1rem 2rem;flex-wrap:wrap;
  margin-top:clamp(2.2rem,4vw,3.2rem);padding-top:clamp(1.2rem,2vw,1.6rem);border-top:1px solid var(--line)}
.verwijs p{font-size:1.02rem;color:var(--ink2);max-width:34rem;line-height:1.5}
.verwijs p b{color:var(--ink);font-weight:500}
@media(max-width:560px){.verwijs .cta{width:100%;justify-content:space-between}}
/* Op een donker vlak: lichte rechthoek. */
.inhoud .verwijs{border-top-color:#3D3A33}
.inhoud .verwijs p{color:#B9B2A6}
.inhoud .verwijs p b{color:#F2EBE0}
.inhoud .verwijs .cta{background:#F4F2ED;color:#20201D;border-color:#F4F2ED}
.inhoud .verwijs .cta:hover{background:transparent;color:#F4F2ED}
.inhoud .verwijs .cta:focus-visible{outline-color:#F4F2ED}

.zelf{background:var(--bg2);border-block:1px solid var(--line);padding-block:clamp(3rem,6vw,5rem)}
.zelf__in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:1.6rem clamp(2rem,6vw,6rem);align-items:end}
.zelf h2{font-size:clamp(2rem,3.6vw,3.1rem);max-width:14ch}
.zelf .lede{margin-top:1rem}
.zelf__akt{display:flex;flex-direction:column;align-items:flex-start;gap:.7rem}
.zelf__akt .note{margin:0}
@media(max-width:820px){.zelf__in{grid-template-columns:1fr}.zelf__akt .cta{width:100%;justify-content:space-between}}
/* In de linkerkolom van "Wat er in uw prijs zit": tekst en knop onder elkaar,
   zo hoog mogelijk, zodat hij niet in hetzelfde scherm valt als die na de vragen. */
.verwijs--kolom{flex-direction:column;align-items:flex-start;justify-content:flex-start}
/* --ink2 haalt op --bg2 net geen 4,5:1; in het blok iets donkerder. */
.zelf .lede,.zelf .note{color:#5F5B54}