/* Active portfolio design system. Legacy museum styles are kept separately. */
:root {
 --nacht:#142b24; --nacht-zacht:#203b32; --kalk:#edf0ed; --beton:#dfe4df;
 --inkt-op-licht:#182820; --inkt-op-donker:#f0f2ee; --schemer:#536057; --schemer-licht:#536057;
 --schemer-op-donker:#b5c1b8; --salie:#b5c1b8; --leer:#c6bbb0; --leer-op:#dfd6cc; --leer-diep:#655548;
 --accent-diep:#234c39; --hairline-licht:#c5cec6; --hairline-donker:#3f574b; --rand-knop-licht:#748178;
 --achtergrond:var(--nacht); --paneel:#142b24f5; --paneel-vast:#203b32; --inkt:var(--inkt-op-donker);
 --inkt-zacht:var(--schemer-op-donker); --inkt-flauw:#adbdb0; --lijn:var(--hairline-donker); --lijn-sterk:#81968a;
 --accent:var(--leer); --accent-zacht:#c6bbb01a; --waarschuwing:#ffaaa2;
 --sans:Inter,system-ui,-apple-system,'Segoe UI',sans-serif; --serif:'Cormorant Garamond',Georgia,serif;
 --meet:1320px; --meet-breed:1440px; --kant:clamp(1.25rem,4.5vw,5rem); --nav-hoogte:5rem;
 --band-lucht:clamp(4rem,8vw,8rem); --pil:3px; --veer:cubic-bezier(.22,.61,.36,1); --rond:4px; --rond-groot:12px;
 --soepel-tijd:260ms; --soepel-curve:var(--veer); --soepel:var(--soepel-tijd) var(--soepel-curve);
 --schaduw:0 18px 50px #0006; --veilig-onder:env(safe-area-inset-bottom,0px);
}
* { box-sizing:border-box }
html { height:auto; overflow:visible; background:var(--nacht); scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-hoogte) + 1.5rem) }
body { margin:0; height:auto; overflow:visible; overscroll-behavior:auto; font:400 1rem/1.65 var(--sans); color:var(--inkt-op-licht); background:var(--kalk); -webkit-font-smoothing:antialiased }
body.dialoog-open { overflow:hidden }
#detail,#offerte,#kiezer,#mand { color:var(--inkt) }
[hidden] { display:none!important }
img { display:block; max-width:100% }
figure,p,h1,h2,h3 { margin:0 }
button,input,textarea,select { font:inherit }
a { color:inherit; text-underline-offset:.3em }
button,a { -webkit-tap-highlight-color:transparent; touch-action:manipulation }
button { cursor:pointer }
::selection { background:var(--leer); color:var(--nacht) }
:focus-visible { outline:2px solid currentColor; outline-offset:5px }
.enkel-voorlezen,.overslaan:not(:focus) { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap }
.overslaan:focus { position:fixed; z-index:300; top:1rem; left:1rem; padding:1rem; background:var(--kalk); color:var(--nacht) }
.meet { width:100%; max-width:var(--meet); padding-inline:var(--kant); margin-inline:auto }
.meet-breed { max-width:var(--meet-breed) }
.wenkbrauw { font:500 .75rem/1.5 var(--sans); text-transform:uppercase; letter-spacing:.16em; color:var(--schemer-op-donker) }
.band-kalk .wenkbrauw,.band-beton .wenkbrauw,.tekstpagina .wenkbrauw { color:var(--schemer) }
.band-kop { font:400 clamp(2.65rem,5.1vw,5rem)/1.02 var(--serif); letter-spacing:-.035em; text-wrap:balance }
.lead { max-width:36rem; font-size:clamp(1rem,1.35vw,1.2rem); line-height:1.7; color:var(--schemer-op-donker) }
.band-kalk .lead,.band-beton .lead { color:var(--schemer) }
.lead-kort { max-width:29rem }
.klein-onder { font-size:.875rem; color:var(--schemer) }
.band-nacht .klein-onder { color:var(--schemer-op-donker) }
.pil { display:inline-flex; align-items:center; justify-content:center; gap:1.25rem; min-height:46px; padding:.8rem 1.35rem; border:1px solid transparent; border-radius:var(--pil); font:500 .875rem/1.35 var(--sans); text-decoration:none; transition:color 180ms,background 180ms,transform 180ms }
.pil-vol { background:var(--kalk); color:var(--nacht); border-color:var(--kalk) }
.pil-vol:hover { background:var(--leer-op); border-color:var(--leer-op) }
.band-kalk .pil-vol,.band-beton .pil-vol { background:var(--nacht); border-color:var(--nacht); color:var(--kalk) }
.band-kalk .pil-vol:hover,.band-beton .pil-vol:hover { background:var(--nacht-zacht) }
.pil-rand { color:inherit; background:transparent; border-color:var(--lijn-sterk) }
.pil-rand:hover { background:#ffffff0a }
.pil-stil { background:transparent; color:inherit }
.pil-groot { min-height:52px; padding:1rem 1.6rem }
.pil:active,.knop:active { transform:scale(.97); transition-duration:80ms }
.knop.primair:hover { background:var(--leer-op); border-color:var(--leer-op) }
.tekstlink { display:inline-flex; align-items:center; min-height:44px; gap:1.5rem; font-size:.875rem; text-decoration:none; border-bottom:1px solid currentColor }
.tekstlink:hover { opacity:.75 }
.band-knoppen { display:flex; align-items:center; flex-wrap:wrap; gap:1.5rem; margin-top:2rem }
#nav { position:sticky; z-index:40; top:0; height:var(--nav-hoogte); color:var(--kalk); background:#142b24f2; backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); transition:box-shadow 180ms }
body.gescrold #nav { box-shadow:0 10px 22px #0b1b161a }
.nav-binnen { max-width:1600px; height:100%; margin-inline:auto; padding-inline:var(--kant); display:flex; align-items:center; gap:2rem }
.nav-merk { font-size:1rem; font-weight:600; letter-spacing:.04em; text-decoration:none; white-space:nowrap }
.nav-merk small { display:block; font-weight:400; font-size:.75rem; letter-spacing:.2em; line-height:1.6; opacity:.75 }
.nav-links { display:flex; align-items:center; justify-content:center; gap:1.8rem; margin-left:auto }
.nav-links a { display:inline-flex; align-items:center; min-height:44px; color:#c3cec6; font-size:.875rem; text-decoration:none }
.nav-links a:hover,.nav-links a[aria-current='page'] { color:white }
.nav-links a[aria-current='page'] { text-decoration:underline; text-underline-offset:.65em }
.nav-acties { display:flex; gap:.65rem; align-items:center }
.nav-acties .pil { font-size:.875rem; min-height:44px }
.nav-schakel { display:none; width:44px; height:44px; padding:10px; border:0; color:inherit; background:transparent }
.nav-schakel span { display:block; height:1px; background:currentColor; margin:6px 0; transition:transform 180ms }
.nav-schakel[aria-expanded='true'] span:first-child { transform:translateY(3.5px) rotate(45deg) }
.nav-schakel[aria-expanded='true'] span:last-child { transform:translateY(-3.5px) rotate(-45deg) }
.pil-mand { padding-inline:.8rem }
.pil-mand svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.5 }
/* Eén ongetinte foto naast de typografische opening. */
.opening { color:var(--kalk); background:var(--nacht); padding:clamp(2rem,5vw,5rem) var(--kant) 0 }
.opening-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2rem,5vw,5rem); max-width:1450px; margin-inline:auto; align-items:center }
.opening-tekst { position:relative; z-index:1; padding-block:2rem 3rem }
.opening h1 { font:400 clamp(4.5rem,7.8vw,8rem)/.94 var(--serif); letter-spacing:-.045em; margin:2rem 0 }
.opening h1 span { color:#c5d0c7 }
.opening .lead { max-width:24rem; font-size:1rem }
.opening-foto { min-width:0 }
.opening-foto a { display:block; overflow:hidden }
.opening-foto img { width:100%; height:clamp(420px,62vh,760px); object-fit:cover; object-position:54% 50% }
.opening-foto figcaption { display:flex; justify-content:space-between; gap:1rem; padding-block:1rem; color:#c3cec6; font-size:.75rem }
.opening-onder { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding-block:2rem; margin:1rem auto 0; max-width:1450px; border-top:1px solid var(--hairline-donker); font-size:.75rem; color:#b5c1b8 }
.opening-onder a { text-decoration:none; padding-block:.5rem }
.band { padding-block:var(--band-lucht) }
.band-nacht { color:var(--inkt-op-donker); background:var(--nacht) }
.band-kalk { color:var(--inkt-op-licht); background:var(--kalk) }
.band-beton { color:var(--inkt-op-licht); background:var(--beton) }
.band > .meet > .wenkbrauw { margin-bottom:1.5rem }
.band > .meet > .band-kop + .lead { margin-top:1.5rem }
.sectie-kop { display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:end; margin-bottom:3rem }
.sectie-kop .wenkbrauw { margin-bottom:1rem }
.sectie-kop > :last-child { justify-self:end }
.selectie { display:grid; grid-template-columns:1.15fr .85fr; gap:4rem 3rem; align-items:start }
.selectie-kaart { display:block; min-width:0; color:inherit; text-decoration:none }
.selectie-kaart:nth-child(even) { margin-top:6rem }
.selectie-beeld { overflow:hidden; background:var(--beton) }
.selectie-beeld img { width:100%; height:auto; aspect-ratio:var(--verhouding,1.5); object-fit:cover; transition:transform 550ms var(--veer) }
.selectie-kaart:hover img { transform:scale(1.025) }
.selectie-meta { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; padding-top:1rem }
.selectie-meta h3 { font:400 1.6rem/1.2 var(--serif) }
.selectie-meta p { font-size:.75rem; color:var(--schemer) }
.raster-voet { margin-top:3rem }
.verhaal-grid { display:grid; grid-template-columns:.8fr 1fr; gap:clamp(2rem,7vw,7rem); align-items:center }
.verhaal-foto img { width:100%; max-height:650px; object-fit:cover }
.verhaal-tekst .band-kop { margin:1.5rem 0 }
.verhaal-tekst .lead + .lead { margin-top:1.2rem }
.signatuur { font:400 2.4rem/1 var(--serif); margin-top:2rem }
.onderwerpen { display:flex; flex-wrap:wrap; gap:.5rem 2rem; margin-top:2rem; padding-top:1.5rem; border-top:1px solid var(--hairline-donker) }
.onderwerpen a { padding-block:.5rem; font-size:.875rem; text-decoration:none }
.onderwerpen a:hover { text-decoration:underline }
/* Een sticky kijkvenster; de lenzen volgen de natuurlijke scrollroute. */
.lenzen-houder { margin-top:3rem }
.lenzen { position:relative; display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(2rem,6vw,5rem); align-items:start }
.lenzen-kijker { position:sticky; top:calc(var(--nav-hoogte) + 2rem) }
.kijker { position:relative; overflow:hidden; background:#0f201a }
.kijker img { width:100%; height:auto; aspect-ratio:4/3; max-height:max(10rem,calc(100svh - var(--nav-hoogte) - 12rem)); object-fit:cover }
.kijker-kader { position:absolute; left:50%; top:50%; width:calc(100% * var(--kader-deel,1)); height:calc(100% * var(--kader-deel,1)); transform:translate(-50%,-50%); border:1px solid #ffffffed; box-shadow:0 0 0 100vmax #08181070 }
.kijker-uitlezing { display:flex; justify-content:space-between; align-items:baseline; padding-top:1rem }
.kijker-mm { font:400 clamp(2.5rem,5vw,4rem)/1 var(--serif); font-variant-numeric:tabular-nums }
.kijker-eenheid { margin-left:.3rem; font-size:.875rem }
.kijker-hoek,.lens-noot { font-size:.75rem; color:var(--schemer-op-donker) }
.lens-noot { margin-top:1rem; max-width:34rem }
.lenslijst { list-style:none; padding:0; margin:0 }
.lenskaart { padding-block:3rem; min-height:52vh; border-top:1px solid var(--hairline-donker); display:flex; flex-direction:column; justify-content:center }
.lenskaart:first-child { padding-top:0; border-top:0 }
.lenskaart-bereik { font:400 clamp(2.5rem,4vw,4rem)/1 var(--serif); color:var(--leer); margin-bottom:1rem }
.lenskaart h3 { font-size:1rem; font-weight:500 }
.lenskaart-soort { font-size:.875rem; color:var(--schemer-op-donker); margin-top:.35rem }
.lenskaart > p:last-child { color:var(--schemer-op-donker); font-size:.9375rem; margin-top:1.25rem }
.stappen { display:grid; grid-template-columns:repeat(3,1fr); gap:3rem; list-style:none; padding:0; margin:3rem 0 0 }
.stappen li { border-top:1px solid var(--hairline-licht); padding-top:1.5rem }
.stap-cijfer { display:block; color:var(--leer-diep); font-size:.75rem; margin-bottom:2rem }
.stappen h3 { font:400 1.65rem/1.2 var(--serif); margin-bottom:1rem }
.stappen p { color:var(--schemer); font-size:.9375rem }
.contact-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:3rem; align-items:end }
.contact-grid .band-kop { margin:1.5rem 0 }
.contact-grid .lead { max-width:29rem }
.contact-direct { justify-self:end; display:grid; gap:.75rem }
.contact-direct a { overflow-wrap:anywhere }
.band-slot .meet > .lead { margin-top:1.5rem }
/* Gemeenschappelijke navigatie en voettekst. */
#voet { background:#10221c; color:#c0cbc2; padding-block:4rem 1.5rem }
.voet-kolommen { display:grid; grid-template-columns:2fr 1fr 1fr; gap:3rem }
.voet-merk { font-size:1.1rem; font-weight:600; letter-spacing:.04em; color:var(--kalk) }
.voet-onder { font-size:.875rem; margin-top:1rem; max-width:22rem }
.voet-kolom h2 { color:var(--kalk); font-size:.75rem; text-transform:uppercase; letter-spacing:.12em; margin-bottom:1rem }
.voet-kolom ul { padding:0; margin:0; list-style:none }
.voet-link { display:inline-flex; min-height:36px; align-items:center; color:inherit; font-size:.875rem; text-decoration:none; overflow-wrap:anywhere }
.voet-link:hover { color:white; text-decoration:underline }
.voet-knop { padding:0; border:0; background:transparent }
.voet-sociaal { display:flex; gap:1rem; margin-top:1rem }
.voet-sociaal-link { gap:.6rem }
.voet-sociaal-link svg,.voet-kaart svg { width:18px; height:18px }
.voet-klein,.voet-noot { font-size:.75rem }
.voet-noot { padding-top:2rem }
.voet-balk { display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; border-top:1px solid #365043; padding-top:1.5rem; margin-top:3rem; font-size:.75rem }
.voet-balk p { margin:0 }
.voet-registratie:empty { display:none }
.noscript-melding { padding:1.5rem; background:var(--kalk); color:var(--nacht) }
/* Inhoud standaard zichtbaar; scroll voegt alleen een entree toe. */
.komt-binnen { animation:verschijn 650ms var(--veer) both }
@keyframes verschijn { from { opacity:0; transform:translateY(18px) } to { opacity:1; transform:none } }
/* Galerie: volledige foto's, een eenvoudige filter en deelbare links. */
.galerie-kop { padding-block:4rem 2.5rem }
.galerie-kop .band-kop { font-size:clamp(4rem,8vw,7rem) }
.galerie-kop .lead { max-width:31rem; margin-top:1.5rem }
.galerie-band { padding-top:0 }
.galerie-filters { display:flex; gap:.5rem; flex-wrap:wrap; margin:2rem 0 3rem }
.galerie-filter { min-height:44px; padding:.55rem 1rem; border:1px solid var(--hairline-licht); background:transparent; color:var(--schemer); border-radius:2px; font-size:.875rem }
.galerie-filter:hover { border-color:var(--nacht); color:var(--nacht) }
.galerie-filter[aria-pressed='true'] { background:var(--nacht); border-color:var(--nacht); color:var(--kalk) }
.galerie-teller { font-size:.875rem; color:var(--schemer); margin-bottom:1.5rem }
.galerie-band .lijst-rooster { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2.5rem 1.5rem; align-items:start }
.galerie-band .lijst-kaart { display:block; width:100%; min-width:0; padding:0; border:0; border-radius:0; background:transparent; color:var(--nacht); text-align:left; cursor:zoom-in }
.galerie-band .lijst-kaart img { width:100%; height:auto; aspect-ratio:4/5; object-fit:contain; background:#e0e5e0; padding:1rem; transition:background 200ms }
.galerie-band .lijst-kaart:hover { transform:none; border:0; background:transparent }
.galerie-band .lijst-kaart:hover img { background:#d0d9d0 }
.galerie-band .lijst-tekst { padding:1rem 0 0; display:flex; justify-content:space-between; align-items:baseline; gap:.6rem }
.galerie-band .lijst-tekst strong { font:400 1.4rem/1.2 var(--serif) }
.galerie-band .lijst-meta { font-size:.75rem; color:var(--schemer) }
.galerie-laden,.raster-leeg { color:var(--schemer); padding:2rem 0 }
/* Leesbare documenten; de bestaande reviewmelding blijft herkenbaar. */
.tekstpagina { background:var(--kalk) }
.tekstkop { background:var(--nacht); color:var(--kalk); height:var(--nav-hoogte) }
.tekstkop .nav-binnen { justify-content:space-between }
.nav-terug { font-size:.875rem; text-decoration:none }
.tekstblad { max-width:800px; padding:4rem var(--kant) 6rem; margin-inline:auto }
.tekstblad h1 { font:400 clamp(2.5rem,6vw,4.5rem)/1.05 var(--serif); overflow-wrap:anywhere; margin-bottom:1.5rem }
.tekstblad h2 { font:400 2rem/1.2 var(--serif); margin-top:2.5rem; margin-bottom:1rem }
.tekstblad h3 { font-size:1.15rem; margin-top:1.5rem }
.tekstblad p,.tekstblad li { margin-block:.85rem }
.tekstblad a { color:var(--accent-diep) }
.tekstdatum { color:var(--schemer); font-size:.875rem }
.nakijken { background:#fff3cf; border:1px solid #d6bc71; color:#524315; padding:1.5rem; margin-block:2rem; border-radius:4px; font-size:.9375rem }
.nakijken strong { font-weight:600 }
.nakijken p { margin-top:.6rem }
.tekstvoet { background:var(--beton); padding-block:2rem; font-size:.875rem }
.tekstvoet-binnen { display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap }
.kaart-rooster { display:grid; grid-template-columns:1fr 1fr; gap:3rem }
.kaart-houder { min-height:350px }
.kaart-houder iframe { width:100%; min-height:350px; border:0 }
.kaart-voorbeeld { display:grid; justify-items:center; gap:1rem; padding:2rem; background:var(--beton) }
.kaart-speld { width:32px; fill:none; stroke:currentColor }
.kaart-voorbeeld-uitleg { font-size:.875rem }
@media (max-width:1100px) {
 .nav-binnen { gap:1.5rem } .nav-links { gap:1.2rem }
 .opening h1 { font-size:clamp(4rem,8.5vw,7rem) }
}
@media (max-width:900px) {
 body:not([data-paginadelen]) #nav { height:auto; min-height:var(--nav-hoogte) }
 body:not([data-paginadelen]) .nav-binnen { flex-wrap:wrap; padding-block:1rem }
 body:not([data-paginadelen]) .nav-links { display:flex; position:static; flex-wrap:wrap; padding:0; box-shadow:none }
 :root { --nav-hoogte:4.5rem }
 .nav-acties { margin-left:auto } .nav-acties .pil { padding-inline:1rem }
 .nav-schakel { display:block }
 .nav-links { display:none; position:absolute; top:100%; left:0; right:0; padding:1.25rem var(--kant) 2rem; background:var(--nacht); box-shadow:0 15px 20px #10221c22 }
 .nav-links.open { display:grid; gap:.4rem } .nav-links a { font-size:1.1rem; padding-block:.5rem }
 .opening-grid { grid-template-columns:1fr 1fr; gap:2rem } .opening h1 { font-size:clamp(3.6rem,9vw,6rem) }
 .opening-foto img { height:520px } .opening .band-knoppen { align-items:start; flex-direction:column; gap:.5rem }
 .selectie { gap:3rem 1.5rem } .verhaal-grid { gap:2.5rem } .stappen { gap:1.5rem }
 .lenzen { grid-template-columns:1fr 1fr; gap:2rem }
 .contact-grid { grid-template-columns:1fr } .contact-direct { justify-self:start }
 .galerie-band .lijst-rooster { grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media (max-width:600px) {
 .nav-binnen { gap:.5rem } .nav-merk { font-size:.8125rem } .nav-merk small { font-size:.75rem }
 .nav-acties .pil { min-height:44px; padding:.6rem .7rem }
 .opening { padding-top:1.5rem } .opening-grid { grid-template-columns:1fr; gap:0 } .opening-tekst { padding:1rem 0 2.5rem }
 .opening h1 { font-size:clamp(4rem,16vw,6rem); margin-block:1.5rem }
 .opening .band-knoppen { flex-direction:row; align-items:center; gap:1.5rem }
 .opening-foto img { height:auto; aspect-ratio:4/3 }
 .opening-onder { margin-top:.5rem; padding-block:1.3rem } .opening-onder > span { max-width:13rem }
 .sectie-kop { grid-template-columns:1fr; gap:1.5rem; margin-bottom:2rem } .sectie-kop > :last-child { justify-self:start }
 .selectie { gap:2rem 1rem } .selectie-kaart:nth-child(even) { margin-top:3rem }
 .selectie-meta { display:block; padding-top:.75rem } .selectie-meta h3 { font-size:1.3rem } .selectie-meta p { margin-top:.35rem }
 .verhaal-grid { grid-template-columns:1fr } .verhaal-foto img { aspect-ratio:4/3; object-position:50% 40% }
 .lenzen { display:block } .lenzen-kijker { top:var(--nav-hoogte); z-index:2; background:var(--nacht); padding-block:.75rem; margin-bottom:1.5rem }
 .kijker img { aspect-ratio:2/1; max-height:28svh } .kijker-mm { font-size:2rem } .lens-noot { margin-top:.5rem }
 .lenskaart { min-height:48svh; padding-block:2rem } .lenskaart:first-child { padding-top:2rem }
 .stappen { grid-template-columns:1fr; gap:2rem } .stap-cijfer { margin-bottom:1rem }
 .voet-kolommen { grid-template-columns:1fr 1fr; gap:2rem } .voet-merk-kolom { grid-column:1/-1 }
 .galerie-band .lijst-rooster { gap:1.5rem .8rem } .galerie-band .lijst-kaart img { padding:.5rem }
 .galerie-band .lijst-tekst { display:block } .galerie-band .lijst-tekst strong { font-size:1.15rem }
 .galerie-band .lijst-meta { display:block; margin-top:.25rem } .galerie-filters { gap:.4rem; margin-bottom:2rem }
 .galerie-filter { padding-inline:.8rem } .kaart-rooster { grid-template-columns:1fr }
}
@media (prefers-reduced-motion:reduce) {
 html { scroll-behavior:auto } .komt-binnen { animation:none } .selectie-kaart:hover img { transform:none }
 .selectie-beeld img,.pil,.nav-schakel span { transition:none }
 .lenzen-kijker { position:relative; top:auto } .lenskaart { min-height:auto; padding-block:2rem }
}
@media (prefers-reduced-transparency:reduce),(prefers-contrast:more) {
 #nav { background:var(--nacht); backdrop-filter:none; -webkit-backdrop-filter:none }
}