@font-face{font-family:'Fredoka';font-style:normal;font-weight:500 700;font-display:swap;src:url(fonts/fredoka-latin-ext.woff2?v=5f32ce3bcc) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Fredoka';font-style:normal;font-weight:500 700;font-display:swap;src:url(fonts/fredoka-latin.woff2?v=57044ac146) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/inter-tight-latin-ext.woff2?v=fdac46ab9b) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/inter-tight-latin.woff2?v=35babd4308) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
:root{
  --bg:#ffffff; --ink:#1f1a2e; --ink-rgb:31,26,46; --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(var(--ink-rgb),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(var(--ink-rgb),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(var(--ink-rgb),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 */
.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(var(--ink-rgb),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(var(--ink-rgb),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-roze::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-groen::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 als grote kaarten, twee naast elkaar (op mobiel onder elkaar) */
section.series-sectie{padding-top:56px;}
.grid-series{grid-template-columns:repeat(auto-fill,minmax(min(420px,100%),1fr));gap:48px 30px;}
.kaart-serie-groot .kaart-titel{font-size:26px;margin:0;}
/* Collage: grote foto links, twee kleine rechts; buitenhoeken rond zoals de andere kaartfoto's */
.serie-collage{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:6px;aspect-ratio:3/2;border-radius:22px;overflow:hidden;}
.serie-collage.collage-1{grid-template-columns:1fr;grid-template-rows:1fr;}
.serie-collage > :first-child{grid-row:1 / -1;}
.collage-2 > :last-child{grid-row:1 / -1;}
.collage-cel{position:relative;overflow:hidden;background:var(--kaart);border-radius:8px;}
.collage-cel picture{display:block;width:100%;height:100%;}
.collage-cel img{display:block;width:100%;height:100%;object-fit:cover;}
.collage-meer{position:absolute;right:10px;bottom:10px;background:rgba(255,255,255,0.92);color:var(--ink);font-size:13px;font-weight:600;line-height:1;padding:7px 11px;border-radius:999px;}
.kaart-serie-groot .kaart-kop .meta-pil{font-size:13px;white-space:nowrap;}
.kaart-serie-groot .kaart-tekst{font-size:15px;color:var(--muted);max-width:56ch;}
.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);}

/* 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;}
  .kop-collage-foto{animation:none;transition:none;}
}
.spec-box{flex:1 1 260px;min-width:240px;align-self:flex-start;border:1px solid rgba(var(--ink-rgb),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(var(--ink-rgb),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;}
.gerelateerd{padding-top:80px;}
.kop-collage{position:relative;margin-top:40px;aspect-ratio:16/9;border-radius:22px;overflow:hidden;background:var(--kaart);--schaal:1;}
.kop-collage-geel{background:var(--geel);}
.kop-collage-roze{background:var(--roze);}
.kop-collage-groen{background:var(--groen);}
.kop-collage-paars{background:var(--paars);}
.kop-collage-foto{position:absolute;left:var(--x);top:var(--y);width:calc(var(--w) * var(--schaal));aspect-ratio:var(--a);padding:0;border:6px solid var(--bg);border-radius:18px;overflow:hidden;background:var(--bg);cursor:zoom-in;
  box-shadow:0 18px 40px -16px rgba(31,26,46,.55);transform:translate(-50%,-50%) rotate(var(--r));transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s;
  animation:kop-collage-in .8s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(var(--i) * 70ms);}
.kop-collage-foto img{display:block;width:100%;height:100%;object-fit:cover;}
.kop-collage-foto:hover,.kop-collage-foto:focus-visible{transform:translate(-50%,-50%) rotate(0deg) scale(1.08);z-index:30 !important;box-shadow:0 26px 50px -18px rgba(31,26,46,.6);}
@keyframes kop-collage-in{from{opacity:0;transform:translate(-50%,-38%) rotate(calc(var(--r) * 2.5)) scale(.85);}}
.foto-rijen{display:flex;flex-direction:column;gap:16px;padding-top:44px;}
.foto-rij{display:flex;gap:16px;width:100%;margin:0 auto;}
.galerij-foto.rij-foto{flex:var(--a) 1 0;width:auto;min-width:0;aspect-ratio:var(--a);}

/* 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;}
/* Miniaturen: krimpen tot 84px, passen ze dan nog niet dan schuift de rij (zonder schuifbalk). Een vervaging en pijltjes
   aan de kant waar nog meer foto's zijn (kan-links / kan-rechts, gezet door site.js) */
.thumbs-wrap{position:relative;}
.thumbs{position:relative;display:flex;gap:10px;padding-top:10px;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:40px;scrollbar-width:none;overscroll-behavior-x:contain;}
.thumbs::-webkit-scrollbar{display:none;}
.thumbs-wrap::before,.thumbs-wrap::after{content:"";position:absolute;top:10px;bottom:0;width:56px;pointer-events:none;opacity:0;transition:opacity .2s;z-index:1;}
.thumbs-wrap::before{left:0;background:linear-gradient(to right,var(--bg),transparent);}
.thumbs-wrap::after{right:0;background:linear-gradient(to left,var(--bg),transparent);}
.thumbs-wrap.kan-links::before,.thumbs-wrap.kan-rechts::after{opacity:1;}
.thumbs-pijl{position:absolute;top:calc(10px + 39px);z-index:2;width:34px;height:34px;margin-top:-17px;padding:0 0 3px;border:0;border-radius:50%;background:var(--bg);color:var(--ink);font-size:24px;line-height:1;cursor:pointer;
  box-shadow:0 4px 14px rgba(31,26,46,0.22);opacity:0;pointer-events:none;transition:opacity .2s,transform .18s;}
.thumbs-pijl:hover{transform:scale(1.08);}
.thumbs-vorige{left:4px;}
.thumbs-volgende{right:4px;}
.thumbs-wrap.kan-links .thumbs-vorige,.thumbs-wrap.kan-rechts .thumbs-volgende{opacity:1;pointer-events:auto;}
.thumb{border:0;padding:0;cursor:pointer;flex:0 1 104px;min-width:84px;height:78px;scroll-snap-align:start;overflow:hidden;background:var(--kaart);border-radius:12px;outline:2px solid rgba(var(--ink-rgb),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(var(--ink-rgb),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(var(--ink-rgb),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(var(--ink-rgb),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(var(--ink-rgb),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(var(--ink-rgb),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{font-size:14px;padding-top:48px;padding-bottom:28px;}
/* Naam links, daarnaast een kolom per groep links (een kolom zonder inhoud valt weg) */
.footer-boven{display:grid;grid-auto-flow:column;grid-template-columns:minmax(0,1fr);grid-auto-columns:auto;gap:32px 72px;align-items:start;}
.footer-brand{display:flex;align-items:center;gap:12px;font-family:var(--kop);font-weight:600;font-size:22px;color:var(--bg);}
.footer-plaats{margin:8px 0 0 27px;}
.footer-kolom{display:flex;flex-direction:column;align-items:flex-start;gap:8px;}
.footer-kop{margin:0 0 4px;font-size:12px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:rgba(233,225,242,0.6);}
.footer-onder{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin-top:40px;padding-top:20px;border-top:1px solid rgba(233,225,242,0.14);color:rgba(233,225,242,0.7);}
.site-footer a{color:var(--geel);}
.site-footer a:hover{color:var(--bg);}
.taal{display:inline-flex;align-items:center;gap:8px;color:var(--geel);}
/* Eigen pijltje (zoals bij de filterkeuze op Te koop): het pijltje van de browser zit te dicht op de rand */
.taal-select{position:relative;display:inline-flex;}
.taal-select:hover{color:var(--bg);}
.taal-select::after{content:"";position:absolute;right:16px;top:50%;width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-70%) rotate(45deg);pointer-events:none;}
.taal select{-webkit-appearance:none;appearance:none;margin:0;font:inherit;color:inherit;background:transparent;border:2px solid currentColor;border-radius:999px;padding:5px 38px 5px 14px;cursor:pointer;}
.taal select:focus-visible{outline:3px solid var(--geel);outline-offset:2px;}
.taal option{color:var(--ink);background:var(--bg);}
/* Melding bovenaan als de pagina vertaald is (zie vertaaldMelding) */
.vertaald{display:none;background:var(--geel);font-size:14px;line-height:1.4;}
html.translated-ltr .vertaald,html.translated-rtl .vertaald{display:block;}
.vertaald-inner{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;padding-top:9px;padding-bottom:9px;}
.vertaald-inner svg{flex:none;}
.vertaald-inner > span{flex:1 1 16em;}
.vertaald-terug{font:inherit;font-weight:600;color:var(--ink);background:none;border:0;padding:0;margin-left:auto;cursor:pointer;text-decoration:underline;text-underline-offset:3px;}
.vertaald-terug:hover{color:var(--rood-dik);}
/* Google Translate: geen balk bovenaan de pagina, geen uitleg of markering bij aanwijzen van tekst */
body{top:0!important;}
iframe.skiptranslate,.goog-te-banner-frame,#goog-gt-tt,.goog-te-balloon-frame,#vertaal-google{display:none!important;}
.goog-text-highlight{background:none!important;box-shadow:none!important;}

/* 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;}
  .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(var(--ink-rgb),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;}
  section.series-sectie{padding-top:40px;}
  .kaart-serie-groot .kaart-titel{font-size:23px;}
  section.losse-sectie{padding-top:64px;}
  .voor-na{padding-top:56px;}
  .proces{padding-top:56px;}
  .gerelateerd{padding-top:56px;}
  .kop-collage{aspect-ratio:4/3;--schaal:1.333;}
  .kop-collage-foto{border-width:4px;border-radius:12px;}
  /* Mobiel: de rijen vervallen en de foto's lopen door; per regel even hoog en samen de volle breedte */
  .foto-rijen{flex-direction:row;flex-wrap:wrap;gap:10px;}
  .foto-rij{display:contents;}
  .galerij-foto.rij-foto{flex:var(--a) 0 calc(var(--a) * 130px);border-radius:16px;}
  /* 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;}
  .site-footer{margin-top:64px;}
  /* Footer: naam over de hele breedte, de kolommen ernaast als ze passen, anders eronder */
  .footer-inner{padding-top:40px;}
  .footer-boven{display:flex;flex-wrap:wrap;gap:28px 32px;}
  .footer-boven > :first-child{flex-basis:100%;}
  .footer-onder{margin-top:32px;}
  .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;}
}

/* Easter egg: licht uit. Dubbelklik op het bolletje in de header (zie LICHT_JS) en de lamp gaat uit: het bolletje dooft
   en de site wordt donker. Pastelkleurige pillen, de footer en de lightbox houden hun eigen (lichte) kleuren. */
.site-header .brand{-webkit-user-select:none;user-select:none;}
.site-header .brand-dot{position:relative;}
.site-header .brand-dot::after{content:"";position:absolute;inset:-9px;border-radius:50%;}
/* Smalle telefoons: iets kleiner, zodat de naam met het bolletje ervoor op één regel blijft */
@media (max-width:380px){
  .site-header .brand{font-size:18px;gap:9px;}
}
html.licht-uit{
  color-scheme:dark;
  --bg:#15111d; --ink:#f2ecf8; --ink-rgb:242,236,248; --muted:#c3b9d1; --faint:#9c91ad;
  --rood:#ef5536; --rood-dik:#c93d22; --kaart:#2a2337;
}
html.licht-uit .brand-dot{background:#4a4358;box-shadow:0 0 0 5px rgba(242,236,248,0.07);}
html.licht-uit :is(.pil-roze,.pil-geel,.pil-groen,.prijs-pil,.prijs-groot,.badge-jaar,.badge-los,.badge-portfolio,.badge-voor,.collage-meer,.voor-inzet span,.voor-na-pijl,.vertaald,.toegang-fout,.lightbox){
  --bg:#ffffff; --ink:#1f1a2e; --ink-rgb:31,26,46; --muted:#4a4358; --faint:#706580; --rood-dik:#a82a13;
}
html.licht-uit .site-footer{--ink:#0d0a13;--bg:#ffffff;}
html.licht-uit.rand-onder{background:#0d0a13;}
html.licht-uit .site-header{background:rgba(21,17,29,0.92);}
html.licht-uit .panel-geel{background:#3a3016;}
html.licht-uit .panel-groen{background:#1d3329;}
html.licht-uit .panel-paars{background:#2b2445;}
html.licht-uit .nav-link:hover,html.licht-uit .pil-link:hover{color:#1f1a2e;}
html.licht-uit :is(.btn-rood,.btn-rood:hover,.btn-donker:hover,.badge-koop,.badge-verkocht){color:#ffffff;}
html.licht-uit .lightbox{background:rgba(13,10,19,0.97);}
html.licht-uit main img{filter:brightness(.9);}
html.licht-uit .kop-collage{background:var(--kaart);}
/* Lichtschakelaar, vlak getekend: komt bij het schakelen midden in beeld (vierkant plaatje met een schroefje links en
   rechts, een wip met een lampje dat geel gloeit als het licht aan is), de wip klapt om en op dat moment springt het
   licht direct om (zie LICHT_JS). Aan = bovenkant ingedrukt, dus de onderrand van de wip is zichtbaar.
   Alleen zo groot als het plaatje: Safari op iOS kleurt de balk bovenin naar een vast element over de hele breedte. */
.schakelaar{position:fixed;left:50%;top:50%;z-index:70;transform:translate(-50%,-50%);pointer-events:none;opacity:0;transition:opacity .2s ease;}
.schakelaar.is-zichtbaar{opacity:1;}
.schakelaar-plaat{position:relative;width:136px;height:136px;padding:0 15px;border-radius:24px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,#fffdf9 0 54%,#f9f4ec 54% 100%);box-shadow:0 7px 0 #e0d4c2;transform:scale(.9) translateY(8px);transition:transform .3s cubic-bezier(.2,.9,.3,1.25);}
.schakelaar-plaat::after{content:"";position:absolute;left:8%;right:8%;bottom:-26px;height:10px;border-radius:50%;background:rgba(13,10,19,0.16);}
.schakelaar.is-zichtbaar .schakelaar-plaat{transform:none;}
html.licht-uit .schakelaar-plaat{filter:brightness(.82);}
.schakelaar-schroef{width:11px;height:11px;border-radius:50%;background:linear-gradient(45deg,transparent 42%,rgba(31,26,46,0.4) 42% 58%,transparent 58%),#d9cdbb;}
.schakelaar-wip{position:relative;width:46px;height:70px;border-radius:9px;background:#ebe2d4;box-shadow:0 0 0 2px #e2d7c5,0 -6px 0 2px #d6c9b5;transition:background-color .12s,box-shadow .12s;}
.schakelaar.is-aan .schakelaar-wip{background:#ffffff;box-shadow:0 0 0 2px #e2d7c5,0 6px 0 2px #d6c9b5;}
.schakelaar-wip span{position:absolute;left:50%;top:14px;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:#cbbfad;transition:background-color .12s,box-shadow .12s;}
.schakelaar.is-aan .schakelaar-wip span{background:#ffd23f;box-shadow:0 0 0 3px rgba(255,210,63,0.35),0 0 10px 3px rgba(255,210,63,0.45);}
@media (prefers-reduced-motion: reduce){
  .schakelaar-plaat,.schakelaar-wip,.schakelaar-wip span{transition:none;}
}
/* Korte fade bij het omspringen: de hele pagina vloeit in één keer over (View Transition, zie LICHT_JS). Geen transitie
   per element: tekst erft zijn kleur, en dan start Chrome elke frame een nieuwe transitie en flikkert de tekst. */
::view-transition-old(root),::view-transition-new(root){animation-duration:.3s;}