:root{
  --bg:#ffffff; --ink:#1f1a2e; --muted:#4a4358; --faint:#706580;
  --rood:#d0391f; --rood-dik:#a82a13; --geel:#ffd23f; --roze:#f7b7cc;
  --kaart:#f1e4cf; --groen:#bfe6d0; --groen-dot:#3fa776; --paars:#cdbaf5;
  --kop:'Fredoka', system-ui, sans-serif;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--bg);}
/* Onderste helft van de pagina (klasse via site.js): niet elastisch doorschieten onder de footer, want Safari op iOS
   toont daar wit en trekt de sticky header mee weg. Bovenaan blijft het doorschieten (en vernieuwen door te trekken) werken.
   De footerkleur is een terugval voor browsers die overscroll-behavior niet kennen. */
html.rand-onder{background:var(--ink);overscroll-behavior-y:none;}
body{color:var(--ink);font-family:'Inter Tight',system-ui,sans-serif;font-size:16px;line-height:1.6;min-height:100vh;display:flex;flex-direction:column;}
img{display:block;max-width:100%;height:auto;}
picture{display:contents;}
a{color:var(--rood);text-decoration:none;}
h1,h2,h3{font-family:var(--kop);font-weight:600;letter-spacing:-0.01em;}
.wrap{max-width:1140px;margin:0 auto;padding-left:28px;padding-right:28px;width:100%;}
main{flex:1;}

/* Header */
.site-header{border-bottom:1px solid rgba(31,26,46,0.12);position:sticky;top:0;background:rgba(255,255,255,0.94);backdrop-filter:blur(8px);z-index:20;}
.header-inner{display:flex;align-items:center;gap:24px;flex-wrap:wrap;padding-top:18px;padding-bottom:18px;}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--kop);font-weight:600;font-size:27px;line-height:1;color:var(--ink);margin-right:auto;}
.brand-accent{color:var(--rood);}
.brand-dot{width:15px;height:15px;border-radius:50%;background:var(--geel);box-shadow:0 0 0 5px rgba(255,210,63,0.35),0 0 18px 6px rgba(255,210,63,0.45);}
.site-nav{display:flex;gap:4px;flex-wrap:wrap;font-size:15px;font-weight:500;}
.nav-link{color:var(--ink);padding:7px 14px;border-radius:999px;transition:background .15s,color .15s;}
.nav-link:hover{background:var(--geel);color:var(--ink);}
.nav-insta:hover{background:var(--roze);}
.nav-extern{display:none;}
.nav-link.is-active{background:var(--ink);color:var(--bg);}
.menu-toggle{display:none;width:46px;height:46px;border:2px solid var(--ink);border-radius:999px;background:transparent;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:4px;}
.menu-toggle span{width:18px;height:2px;border-radius:2px;background:var(--ink);transition:transform .2s,opacity .2s;}
.menu-toggle.is-open span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.menu-toggle.is-open span:nth-child(2){opacity:0;}
.menu-toggle.is-open span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

/* Buttons & pillen */
.btn{display:inline-block;padding:13px 26px;font-size:15px;font-weight:600;border-radius:999px;transition:background-color .18s,color .18s,border-color .18s;cursor:pointer;}
.btn-klein{padding:9px 18px;font-size:14px;}
.btn-rood{background:var(--rood);color:var(--bg);}
.btn-rood:hover{background:var(--rood-dik);color:var(--bg);}
.btn-donker{background:var(--ink);color:var(--bg);}
.btn-donker:hover{background:var(--rood);color:var(--bg);}
.btn-lijn{border:2px solid var(--ink);color:var(--ink);padding:11px 24px;}
.btn-lijn.btn-klein{padding:7px 16px;}
.btn-lijn:hover{background:var(--ink);color:var(--bg);}
.knoppen{display:flex;gap:14px;flex-wrap:wrap;}
.pil{font-size:12px;letter-spacing:0.12em;text-transform:uppercase;display:inline-block;padding:6px 13px;border-radius:999px;font-weight:600;color:var(--ink);}
.pil-roze{background:var(--roze);}
.pil-geel{background:var(--geel);}
.pil-groen{background:var(--groen);}
.pil-donker{background:var(--ink);color:var(--bg);letter-spacing:0.1em;}
.pil-link{transition:background .18s;}
.pil-link:hover{background:var(--geel);}
/* Losse lamp die te koop is: gele pil naar het product, met roze hover zodat hij niet wegvalt */
.pil-link.pil-koop:hover{background:var(--roze);}
.kicker{font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink);font-weight:600;margin:0;}
.tekst-link{display:inline-block;font-size:15px;font-weight:600;color:var(--ink);border-bottom:2px solid var(--ink);padding-bottom:2px;transition:background-color .18s,color .18s,border-color .18s;}
.tekst-link:hover{color:var(--rood);border-bottom-color:var(--rood);}
.sectie-onder-link{display:none;}

/* Secties */
section.wrap{padding-top:72px;}
/* Paginakop: pil op gelijke afstand onder de header op elke pagina */
section.hero,section.pagina-kop,section.over{padding-top:56px;}
p.pil{margin:0 0 16px;}
.hero{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:56px;align-items:center;}
.hero-tekst h1{font-size:60px;line-height:1.02;letter-spacing:-0.02em;margin:0 0 22px;text-wrap:pretty;}
.lead{font-size:18px;color:var(--muted);margin:0 0 30px;max-width:48ch;text-wrap:pretty;}
.hero-kaart{display:block;color:var(--ink);transition:transform .18s;}
.hero-kaart:hover{transform:translateY(-4px);}
.hero-foto{aspect-ratio:3/2;overflow:hidden;background:var(--kaart);border-radius:22px;position:relative;}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.4s ease-in-out;}
.hero-img.is-visible{opacity:1;}
/* Pil linksboven op de foto (serie of te koop); bij hover beweegt de hele kaart, de pil houdt zijn kleur */
.hero-pil{position:absolute;left:16px;top:16px;z-index:1;transition:opacity .7s ease-in-out;}
.hero-pil.is-weg{opacity:0;}

.sectie-kop{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;border-bottom:1px solid rgba(31,26,46,0.14);padding-bottom:14px;margin-bottom:26px;flex-wrap:wrap;}
.sectie-kop h2{font-size:34px;line-height:1.12;margin:0;}
.sectie-lijn-kop{font-size:32px;margin:0 0 26px;border-bottom:1px solid rgba(31,26,46,0.14);padding-bottom:14px;}

/* Panels */
.panel{border-radius:28px;padding:44px;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:28px 48px;align-items:start;}
.panel h2{font-size:34px;line-height:1.12;margin:0 0 8px;}
.panel-groen{background:var(--groen);}
.panel-geel{background:var(--geel);row-gap:12px;}
.panel-paars{background:var(--paars);}
.panel-tekst{margin:0 0 16px;font-size:17px;color:var(--muted);max-width:60ch;text-wrap:pretty;}
.panel-cta{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.cta-groot{font-family:var(--kop);font-weight:600;font-size:26px;margin:0;max-width:34ch;}

/* Grids & kaarten */
.grid{display:grid;gap:40px 30px;}
.grid-klein{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:32px 24px;}
.grid-shop{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));}
.grid-thuis{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;}
.kaart{display:block;color:var(--ink);transition:transform .2s;}
.kaart:hover{transform:translateY(-5px);}
.kaart-foto{aspect-ratio:4/3;overflow:hidden;background:var(--kaart);border-radius:22px;position:relative;}
.kaart-foto img{width:100%;height:100%;object-fit:cover;}
/* Serie-kaart op de homepage: zelfde opbouw als op het portfolio, zonder rand */
.kaart-serie .kaart-foto{aspect-ratio:3/2;}
.kaart-serie .serie-rij-meta{margin-top:8px;}
.badge{position:absolute;left:12px;top:12px;font-size:11px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;padding:6px 12px;border-radius:999px;}
.badge-koop{background:var(--rood);color:var(--bg);}
.badge-verkocht{background:rgba(31,26,46,0.82);color:var(--bg);}
.badge-portfolio{background:rgba(255,255,255,0.92);color:var(--ink);}
.badge-jaar{background:var(--roze);color:var(--ink);}
.badge-los{background:var(--groen);color:var(--ink);}
.badge-voor{background:rgba(255,255,255,0.92);color:var(--ink);}
/* Jaartal: boven de titel, op kleine schermen als sticker op de foto */
.jaar-foto{display:none;}
.badge.jaar-tekst{position:static;display:block;width:fit-content;margin:0 0 12px;}
.kaart-kop{display:flex;justify-content:space-between;gap:14px;align-items:baseline;padding-top:14px;}
.kaart-titel{font-family:var(--kop);font-weight:600;font-size:21px;line-height:1.2;}
.prijs-pil{font-size:14px;font-weight:600;color:var(--ink);background:var(--geel);padding:2px 10px;border-radius:999px;white-space:nowrap;}
.kaart-tekst{font-size:14px;color:var(--faint);margin:6px 0 0;text-wrap:pretty;}
.kaart-kleuren{display:flex;align-items:center;gap:9px;margin-top:12px;}
.kleur-dot{width:18px;height:18px;border-radius:50%;box-shadow:0 0 0 1px rgba(31,26,46,0.22);}
.kleur-label{font-size:13px;color:var(--faint);}
.thuis-foto{aspect-ratio:4/3;overflow:hidden;background:var(--kaart);border-radius:22px;}
.thuis-foto img{width:100%;height:100%;object-fit:cover;}

/* Pagina-kop */
.pagina-kop h1{font-size:48px;line-height:1.05;letter-spacing:-0.02em;margin:0 0 18px;}
.pagina-kop .pil{margin-bottom:16px;}
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px;}
section.shop-lijst{padding-top:40px;}
.filter{cursor:pointer;padding:8px 16px;border-radius:999px;font-family:inherit;font-size:14px;font-weight:500;background:transparent;color:var(--ink);border:2px solid rgba(31,26,46,0.22);transition:background-color .18s,color .18s,border-color .18s;}
.filter:hover{border-color:var(--ink);}
.filter.is-active{background:var(--ink);color:var(--bg);border-color:var(--ink);}
.filter-select{display:none;position:relative;margin-top:4px;}
.filter-select select{-webkit-appearance:none;appearance:none;width:100%;margin:0;cursor:pointer;padding:11px 48px 11px 20px;border-radius:999px;font-family:inherit;font-size:16px;font-weight:500;line-height:1.4;background:transparent;color:var(--ink);border:2px solid var(--ink);}
.filter-select::after{content:"";position:absolute;right:22px;top:50%;width:8px;height:8px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:translateY(-70%) rotate(45deg);pointer-events:none;}
.stats{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:30px;font-size:15px;font-weight:500;color:var(--ink);}
.stat{display:inline-flex;align-items:center;gap:9px;}
.stat::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--geel);flex:0 0 auto;box-shadow:0 0 0 3px rgba(255,210,63,0.35),0 0 11px 3px rgba(255,210,63,0.45);}
.stat:nth-child(1)::before{background:var(--roze);box-shadow:0 0 0 3px rgba(247,183,204,0.45),0 0 11px 3px rgba(247,183,204,0.5);}
.stat:nth-child(2)::before{background:var(--rood);box-shadow:0 0 0 3px rgba(208,57,31,0.28),0 0 11px 3px rgba(208,57,31,0.32);}
.stat:nth-child(4)::before{background:var(--groen-dot);box-shadow:0 0 0 3px rgba(63,167,118,0.3),0 0 11px 3px rgba(63,167,118,0.35);}

/* Portfolio series-lijst */
.series-lijst{display:flex;flex-direction:column;gap:28px;}
.serie-rij{display:flex;flex-wrap:wrap;gap:36px;align-items:center;color:var(--ink);border:2px solid rgba(31,26,46,0.14);border-radius:28px;padding:22px;transition:transform .2s,border-color .2s;}
.serie-rij:hover{transform:translateY(-5px);border-color:var(--ink);}
.serie-rij.rij-om{flex-direction:row-reverse;}
.serie-rij-foto{position:relative;flex:1 1 460px;min-width:260px;aspect-ratio:3/2;overflow:hidden;background:var(--kaart);border-radius:22px;}
.serie-rij-foto img{width:100%;height:100%;object-fit:cover;}
.serie-rij-tekst{flex:1 1 320px;min-width:230px;padding:12px 14px;}
.serie-rij-tekst h2{font-size:36px;line-height:1.1;margin:0 0 12px;}
.serie-intro{font-size:17px;color:var(--muted);margin:0;max-width:52ch;text-wrap:pretty;}
.serie-rij-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:12px;font-size:13px;font-weight:500;}
.meta-pil{display:inline-flex;align-items:center;gap:7px;color:var(--faint);font-weight:500;}
.meta-pil::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--geel);flex:0 0 auto;box-shadow:0 0 0 2.5px rgba(255,210,63,0.35),0 0 8px 2px rgba(255,210,63,0.45);}
.meta-pil-rood::before{background:var(--rood);box-shadow:0 0 0 2.5px rgba(208,57,31,0.28),0 0 8px 2px rgba(208,57,31,0.32);}
.serie-rij-cta{margin-left:auto;background:var(--ink);color:var(--bg);font-size:14px;font-weight:600;padding:9px 18px;border-radius:999px;}

/* Artikel (serie) */
.artikel{padding-top:34px;}
.artikel-pillen{display:flex;flex-wrap:wrap;gap:8px;margin:34px 0 16px;}
.artikel-titel{font-size:52px;line-height:1.02;letter-spacing:-0.025em;margin:0 0 20px;max-width:22ch;text-wrap:pretty;}
.artikel-intro{font-size:20px;color:var(--muted);margin:0;max-width:58ch;text-wrap:pretty;}
.artikel-hero{margin-top:40px;aspect-ratio:16/9;overflow:hidden;background:var(--kaart);border-radius:22px;}
.artikel-hero img{width:100%;height:100%;object-fit:cover;}
.artikel-body{display:flex;flex-wrap:wrap;gap:48px;padding-top:56px;}
.verhaal{flex:1 1 440px;min-width:280px;}
.verhaal p{font-size:18px;color:var(--muted);margin:0 0 20px;max-width:62ch;text-wrap:pretty;}
/* Lange teksten: site.js klapt ze in tot een aantal hele regels met een fade erover, de knop eronder klapt ze uit.
   Zonder JS, of als de tekst kort genoeg is, staat alles er gewoon en blijft de knop weg. */
.lees-meer{position:relative;}
.lees-meer.is-lang{overflow:hidden;}
.lees-meer.is-lang > :last-child{margin-bottom:0;}
.lees-meer.is-lang::after{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--fade,64px);background:linear-gradient(to bottom,rgba(255,255,255,0),var(--bg) 90%);pointer-events:none;transition:opacity .3s ease;}
.lees-meer.is-open::after{opacity:0;}
.lees-meer-knop{display:none;align-items:center;gap:10px;margin-top:16px;background:transparent;font-family:inherit;line-height:1.6;}
.lees-meer.is-lang + .lees-meer-knop{display:inline-flex;}
.lees-meer-knop::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .3s ease;}
.lees-meer-knop[aria-expanded="true"]::after{transform:translateY(2px) rotate(-135deg);}
.lees-meer-knop[aria-expanded="true"] .lm-meer,.lees-meer-knop[aria-expanded="false"] .lm-minder{display:none;}
@media (prefers-reduced-motion: reduce){
  .lees-meer.is-lang::after,.lees-meer-knop::after{transition:none;}
}
.spec-box{flex:1 1 260px;min-width:240px;align-self:flex-start;border:1px solid rgba(31,26,46,0.12);border-radius:24px;padding:8px 24px;}
.spec-rij{display:grid;grid-template-columns:minmax(110px,150px) minmax(0,1fr);gap:20px;align-items:baseline;padding:13px 0;}
.spec-lijn{border-top:1px dashed rgba(31,26,46,0.14);}
.spec-label{font-size:12px;letter-spacing:0.1em;text-transform:uppercase;color:var(--faint);}
.spec-waarde{font-size:16px;font-weight:500;color:var(--ink);}
.serie-galerij{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;padding-top:44px;}
.galerij-foto{display:block;width:100%;padding:0;border:0;cursor:zoom-in;aspect-ratio:3/2;overflow:hidden;background:var(--kaart);border-radius:22px;transition:opacity .18s;}
.galerij-foto:hover{opacity:.85;}
.galerij-foto img{width:100%;height:100%;object-fit:cover;}
.serie-shop,.serie-thuis{padding-top:80px;}

/* Losse lampen: kaarten onder de series op het portfolio, met de voor-foto als kleine inzet */
section.losse-sectie{padding-top:90px;}
.voor-inzet{position:absolute;right:12px;bottom:12px;width:26%;aspect-ratio:3/4;overflow:hidden;border-radius:14px;border:3px solid var(--bg);box-shadow:0 6px 16px rgba(31,26,46,0.22);background:var(--kaart);}
.voor-inzet img{width:100%;height:100%;object-fit:cover;}
.voor-inzet span{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);font-size:10px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;line-height:1.5;padding:2px 8px;border-radius:999px;background:rgba(255,255,255,0.92);color:var(--ink);}
/* Voor en na op de pagina van een losse lamp */
.voor-na{padding-top:80px;}
.voor-na-grid{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:22px;align-items:center;max-width:820px;}
.galerij-foto.voor-na-foto{position:relative;aspect-ratio:3/4;}
/* Losse lamp met staande foto's: foto's naast elkaar bovenaan; op de kaart iets hoger uitsnijden zodat de lamp erop past */
.los-fotos{margin-top:40px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:820px;}
.galerij-foto.staand-foto{aspect-ratio:3/4;}
.proces{padding-top:80px;}
/* Procesfoto's: altijd drie per rij, zodat een rij eerst vol is voordat de volgende begint */
.proces-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
.galerij-foto.vierkant-foto{aspect-ratio:1/1;}
.los-fotos-een{grid-template-columns:minmax(0,1fr);max-width:540px;}
.galerij-een{max-width:540px;}
.los-fotos-drie{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none;}
.kaart-los.is-staand .kaart-foto img{object-position:50% 40%;}
.voor-na-pijl{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;background:var(--geel);font-size:22px;font-weight:600;color:var(--ink);}
.panel-cta-serie{margin-top:80px;}

/* Detail (lamp) */
.detail{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:44px 52px;padding-top:26px;}
.hoofd-foto{display:block;width:100%;padding:0;border:0;cursor:zoom-in;background:var(--kaart);position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:22px;transition:opacity .18s;}
.hoofd-foto:hover{opacity:.85;}
.hoofd-foto img{width:100%;height:100%;object-fit:cover;}
.thumbs{display:flex;gap:10px;padding-top:10px;flex-wrap:nowrap;}
.thumb{border:0;padding:0;cursor:pointer;flex:0 1 104px;min-width:0;height:78px;overflow:hidden;background:var(--kaart);border-radius:12px;outline:2px solid rgba(31,26,46,0.16);outline-offset:-1px;opacity:.62;transition:opacity .18s;}
.thumb:hover{opacity:.85;}
.thumb.is-active{outline-color:var(--ink);opacity:1;}
.thumb img{width:100%;height:100%;object-fit:cover;}
.detail-specs{margin-top:28px;}
.detail-titel{font-size:46px;line-height:1.04;letter-spacing:-0.02em;margin:14px 0 14px;}
.prijs-groot{display:inline-block;font-family:var(--kop);font-weight:600;font-size:26px;line-height:1;color:var(--ink);background:var(--geel);padding:9px 18px;border-radius:999px;margin:4px 0 28px;}
.detail-tekst{margin:0 0 16px;font-size:17px;color:var(--muted);text-wrap:pretty;}
.varianten{margin-top:30px;}
.varianten-kop{font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:var(--faint);margin:0 0 12px;}
.varianten-rij{display:flex;flex-wrap:wrap;gap:10px;}
.variant-knop{display:flex;align-items:center;gap:9px;cursor:pointer;padding:7px 16px 7px 8px;border-radius:999px;font-family:inherit;font-size:14px;font-weight:500;background:transparent;color:var(--ink);border:2px solid rgba(31,26,46,0.22);transition:background-color .18s,color .18s,border-color .18s;}
.variant-knop:hover{border-color:var(--ink);}
.variant-knop.is-active{background:var(--ink);color:var(--bg);border-color:var(--ink);}
.variant-dot{width:16px;height:16px;border-radius:50%;outline:1px solid rgba(31,26,46,0.18);outline-offset:-1px;}
.cta-box{margin-top:34px;}
.cta-box-fijn{font-size:13px;color:var(--faint);margin:14px 0 0;}
/* Eén kolom (grid valt onder 788px terug): foto's, dan info, dan de eigenschappen en het mailblok als laatste */
@media (max-width:787px){
  .detail{display:flex;flex-direction:column;gap:0;}
  .detail-media,.detail-info{display:contents;}
  .detail-info > .pil-link{margin-top:28px;}
  .detail-info > .pil-link,.prijs-groot,.lees-meer-knop{align-self:flex-start;}
  .detail-tekst:last-of-type{margin-bottom:0;}
  .detail-specs{order:1;margin-top:34px;}
  .cta-box{order:2;}
}

/* Over */
.over{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:48px 56px;align-items:start;}
.over-tekst h1{font-size:48px;line-height:1.05;letter-spacing:-0.02em;margin:0 0 26px;}
.over-lead{font-size:18px;margin:0 0 18px;}
.over-contact{margin-top:30px;border-top:1px solid rgba(31,26,46,0.14);padding-top:22px;}
.over-contact p{font-size:17px;color:var(--muted);margin:0 0 18px;max-width:62ch;}
.over-foto{aspect-ratio:4/3;overflow:hidden;background:var(--kaart);border-radius:22px;margin-bottom:14px;}
.over-foto img{width:100%;height:100%;object-fit:cover;}
/* Twee kolommen (vanaf 752px): bovenkant foto gelijk met bovenkant titel, dus omlaag met de hoogte van de pil + marge */
.over-tekst > .pil{display:block;width:fit-content;}
@media (min-width:752px){
  .over-foto-wrap{margin-top:calc(12px * 1.6 + 12px + 16px);}
}

/* Veelgestelde vragen: vraag links, antwoord rechts (onder 788px onder elkaar) */
section.faq{padding-top:10px;}
.faq-lijst{border-top:1px solid rgba(31,26,46,0.14);}
.faq-item{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:12px 48px;align-items:baseline;padding:26px 0;border-bottom:1px dashed rgba(31,26,46,0.14);}
.faq-vraag{font-size:22px;line-height:1.25;margin:0;text-wrap:pretty;}
.faq-antwoord{margin:0;font-size:17px;color:var(--muted);max-width:62ch;text-wrap:pretty;}
.faq-cta{margin-top:72px;}
.knoppen-midden{align-items:center;gap:14px 24px;}
.lead-link{color:var(--ink);border-bottom:2px solid var(--ink);transition:color .18s,border-color .18s;}
.lead-link:hover{color:var(--rood);border-bottom-color:var(--rood);}
.cta-box-fijn a{color:var(--faint);text-decoration:underline;text-underline-offset:2px;}
.cta-box-fijn a:hover{color:var(--rood);}
@media (max-width:787px){
  .faq-item{grid-template-columns:minmax(0,1fr);gap:8px;padding:22px 0;}
  .faq-vraag{font-size:20px;}
}

/* Binnenkort-pagina en preview-inlog (worker.js toont ze zolang de site niet openbaar is) */
.binnenkort{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:56px;align-items:center;}
section.binnenkort{padding-top:56px;}
.binnenkort-tekst h1{font-size:60px;line-height:1.02;letter-spacing:-0.02em;margin:0 0 22px;text-wrap:pretty;}
.binnenkort-tekst .lead{margin-bottom:16px;}
.binnenkort-tekst .knoppen{margin-top:30px;}
/* Drie foto's in een waaier op een crèmekleurig vlak, zoals de deelafbeeldingen */
.binnenkort-waaier{position:relative;aspect-ratio:5/4;background:var(--kaart);border-radius:28px;}
.binnenkort-waaier img{position:absolute;top:50%;width:36%;aspect-ratio:3/4;object-fit:cover;border-radius:18px;box-shadow:0 18px 40px rgba(31,26,46,0.22);background:var(--bg);}
.binnenkort-waaier .waaier-links{left:8%;transform:translateY(-46%) rotate(-7deg);object-position:30% 50%;}
.binnenkort-waaier .waaier-rechts{right:8%;transform:translateY(-46%) rotate(7deg);object-position:70% 50%;}
.binnenkort-waaier .waaier-midden{left:50%;width:44%;transform:translate(-50%,-50%);z-index:1;}
.toegang-form{display:flex;flex-direction:column;align-items:flex-start;gap:10px;max-width:420px;}
.toegang-form label{font-weight:600;font-size:15px;}
.toegang-form input{width:100%;font:inherit;font-size:17px;color:var(--ink);padding:12px 20px;border:2px solid var(--ink);border-radius:999px;background:var(--bg);margin-bottom:10px;}
.toegang-form input:focus{outline:3px solid var(--geel);outline-offset:2px;}
.toegang-form button{border:0;font-family:inherit;}
.toegang-fout{margin:0 0 6px;padding:10px 18px;border-radius:16px;background:var(--roze);font-weight:500;}
.toegang-fout[hidden]{display:none;}

/* Footer */
.site-footer{margin-top:100px;background:var(--ink);color:#e9e1f2;}
.footer-inner{display:flex;gap:28px;flex-wrap:wrap;align-items:center;font-size:14px;padding-top:40px;padding-bottom:40px;}
.footer-brand{display:flex;align-items:center;gap:12px;font-family:var(--kop);font-weight:600;font-size:22px;color:var(--bg);margin-right:auto;}
.site-footer a{color:var(--geel);}
.site-footer a:hover{color:var(--bg);}

/* Lightbox — zelfde stijl als de rest van de site: donkerpaars vlak, kopletter, ronde knoppen en gele pil */
.lightbox{position:fixed;inset:0;z-index:50;background:rgba(31,26,46,0.96);display:none;flex-direction:column;padding:20px;gap:18px;overscroll-behavior:contain;opacity:0;transition:opacity .38s ease;}
.lightbox.open{display:flex;}
.lightbox.zichtbaar{opacity:1;}
/* Kopie van de foto die tussen de pagina en de lightbox vliegt (hero-animatie) */
.lightbox-vlieger{position:fixed;z-index:60;margin:0;object-fit:cover;pointer-events:none;}
@media (prefers-reduced-motion: reduce){
  .lightbox{transition:none;}
}
.lightbox-bar{display:flex;align-items:center;gap:14px;color:var(--bg);}
.lightbox-bar .ttl{min-width:0;font-family:var(--kop);font-weight:600;font-size:22px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lightbox-bar .tel{margin-left:auto;flex:0 0 auto;font-size:12px;font-weight:600;letter-spacing:0.12em;line-height:1.6;padding:6px 13px;border-radius:999px;background:var(--geel);color:var(--ink);}
.lightbox-sluit{flex:0 0 auto;border:2px solid var(--bg);border-radius:999px;background:transparent;color:var(--bg);font-family:inherit;font-size:14px;font-weight:600;padding:7px 16px;cursor:pointer;transition:background-color .18s,color .18s,border-color .18s;}
.lightbox-sluit:hover{background:var(--bg);color:var(--ink);}
.lightbox-pin{flex:0 0 auto;display:flex;align-items:center;gap:7px;border:2px solid var(--bg);border-radius:999px;color:var(--bg);font-size:14px;font-weight:600;line-height:normal;padding:7px 16px 7px 11px;transition:background-color .18s,color .18s;}
.lightbox-pin:hover{background:var(--bg);color:var(--ink);}
.lightbox-pin svg{width:17px;height:17px;}
.lightbox-mid{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;gap:18px;}
.lightbox-mid img{min-width:0;max-width:100%;max-height:100%;object-fit:contain;border-radius:16px;cursor:zoom-out;}
.lightbox-nav{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:48px;height:48px;padding:0;border:2px solid var(--bg);border-radius:999px;background:transparent;color:var(--bg);cursor:pointer;transition:background-color .18s,color .18s,border-color .18s;}
.lightbox-nav:hover{background:var(--bg);color:var(--ink);}
/* Kleine schermen: geen pijlknoppen (die vallen buiten beeld), bladeren gaat met swipen */
@media (max-width:720px){
  .lightbox-nav{display:none;}
  /* Alleen het logo, zodat de titel ruimte houdt */
  .lightbox-pin{padding:7px 9px;}
  .lightbox-pin span{display:none;}
}
/* Kleine schermen: eigenschappen van een lamp met label boven de waarde i.p.v. ernaast */
@media (max-width:720px){
  .detail-specs{padding:6px 20px;}
  .detail-specs .spec-rij{grid-template-columns:minmax(0,1fr);gap:3px;padding:14px 0;}
}

/* Responsive */
@media (max-width:720px){
  .menu-toggle{display:flex;flex:0 0 auto;}
  .header-inner{gap:14px;align-items:center;flex-wrap:nowrap;}
  .brand{font-size:20px;min-width:0;}
  .site-header .brand-dot{display:none;}
  .hero-kaart{display:none;}
  .site-nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:var(--bg);border-bottom:1px solid rgba(31,26,46,0.12);box-shadow:0 10px 22px rgba(31,26,46,0.10);padding:10px 28px 18px;gap:4px;font-size:20px;}
  .site-nav.open{display:flex;}
  /* In het uitklapmenu: icoontje achter Instagram, zodat duidelijk is dat de link de site verlaat */
  .nav-extern{display:inline-block;vertical-align:-1px;margin-left:8px;}
  main > section:first-child,main > article:first-child{padding-top:32px;}
  .hero-tekst h1{font-size:40px;}
  .binnenkort-tekst h1{font-size:40px;}
  .binnenkort{gap:40px;}
  .pagina-kop h1,.over-tekst h1{font-size:36px;}
  .artikel-titel{font-size:36px;}
  .detail-titel{font-size:34px;}
  .serie-rij-tekst h2{font-size:28px;}
  .serie-rij{gap:18px;padding:16px;}
  .serie-rij-tekst{padding:4px 6px 8px;}
  .serie-rij-cta{display:none;}
  section.losse-sectie{padding-top:64px;}
  .voor-na{padding-top:56px;}
  .proces{padding-top:56px;}
  /* Op mobiel twee per rij; bij een oneven aantal de eerste over de hele breedte, zodat elke rij vol is */
  .proces-grid{gap:10px;grid-template-columns:repeat(2,minmax(0,1fr));}
  .proces-grid > :first-child:nth-last-child(odd){grid-column:1 / -1;}
  .voor-na-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;}
  .voor-na-pijl{display:none;}
  .los-fotos{gap:10px;}
  /* Drie staande foto's bovenaan: op mobiel de eerste over de hele breedte, de andere twee eronder */
  .los-fotos:has(> :nth-child(3):last-child){grid-template-columns:repeat(2,minmax(0,1fr));}
  .los-fotos > :first-child:nth-last-child(3){grid-column:1 / -1;}
  .jaar-foto{display:block;}
  .badge.jaar-tekst{display:none;}
  .site-footer{margin-top:64px;}
  .panel{padding:28px;}
  .panel-groen{row-gap:12px;}
  .sectie-kop-link{display:none;}
  .sectie-onder-link{display:inline-block;margin-top:26px;}
  .filters{display:none;}
  .filter-select{display:block;}
}