/* byRenzo.art – vormgeving. Kleuren en maten staan bovenin onder :root. */

@font-face{font-family:'Syne';font-weight:700;font-style:normal;font-display:swap;src:url(../fonts/syne-700.woff2) format('woff2')}
@font-face{font-family:'Syne';font-weight:800;font-style:normal;font-display:swap;src:url(../fonts/syne-800.woff2) format('woff2')}
@font-face{font-family:'Instrument Sans';font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/instrument-400.woff2) format('woff2')}
@font-face{font-family:'Instrument Sans';font-weight:500;font-style:normal;font-display:swap;src:url(../fonts/instrument-500.woff2) format('woff2')}
@font-face{font-family:'Instrument Serif';font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/instrument-serif-400.woff2) format('woff2')}
@font-face{font-family:'Instrument Serif';font-weight:400;font-style:italic;font-display:swap;src:url(../fonts/instrument-serif-400-italic.woff2) format('woff2')}
@font-face{font-family:'Instrument Sans';font-weight:600;font-style:normal;font-display:swap;src:url(../fonts/instrument-600.woff2) format('woff2')}

:root{
  color-scheme:dark;
  --bg:#050507;--fg:#F4F2EE;--muted:rgba(244,242,238,.62);--accent:#FF2E9A;--magenta:#E6007E;--on-accent:#050507;
  --line:rgba(255,255,255,.12);--line-strong:rgba(244,242,238,.5);--panel:rgba(255,255,255,.05);--ph:#111114;
  --display:'Syne',system-ui,sans-serif;--body:'Instrument Sans',system-ui,sans-serif;
  --radius:999px;--radius-img:4px;--ls:-.02em;
  --wrap:1280px;--gutter:clamp(16px,4vw,48px);
  --bg-rgb:5,5,7;--kaart:#0b0b0e;
}
/* kleurpaletten (beheer: Algemeen > Kleur van de site; bezoeker via de knop naast de mand) */
html[data-thema=elektrisch]{--bg:#3B2BFF;--bg-rgb:59,43,255;--fg:#FFFFFF;--muted:rgba(255,255,255,.76);--accent:#3DFF8F;--on-accent:#07071A;--line:rgba(255,255,255,.22);--line-strong:rgba(255,255,255,.62);--panel:rgba(255,255,255,.08);--ph:#3324E6;--kaart:#2416C9}
html[data-thema=stilte]{--bg:#0A0A0B;--bg-rgb:10,10,11;--fg:#F4F2EE;--muted:rgba(244,242,238,.6);--accent:#F4F2EE;--on-accent:#0A0A0B;--line:rgba(255,255,255,.12);--line-strong:rgba(244,242,238,.45);--panel:rgba(255,255,255,.04);--ph:#141416;--kaart:#141416;--tick2:rgba(10,10,11,.45);--schaduw:0 30px 50px -28px rgba(244,242,238,.2)}
html[data-thema=zuur]{color-scheme:light;--bg:#D4FF2E;--bg-rgb:212,255,46;--fg:#0B0B0E;--muted:rgba(11,11,14,.72);--accent:#FF2E9A;--on-accent:#0B0B0E;--line:rgba(11,11,14,.18);--line-strong:rgba(11,11,14,.58);--panel:rgba(11,11,14,.06);--ph:#C2EC1E;--kaart:#0B0B0E}
html[data-thema=cyaan]{color-scheme:light;--bg:#00D9FF;--bg-rgb:0,217,255;--fg:#0B0B0E;--muted:rgba(11,11,14,.72);--accent:#FF1F8F;--on-accent:#0B0B0E;--line:rgba(11,11,14,.18);--line-strong:rgba(11,11,14,.58);--panel:rgba(11,11,14,.06);--ph:#00C4E6;--kaart:#0B0B0E}
html[data-thema=kauwgom]{color-scheme:light;--bg:#FF4DB8;--bg-rgb:255,77,184;--fg:#0B0B0E;--muted:rgba(11,11,14,.72);--accent:#2B2BFF;--on-accent:#FFFFFF;--line:rgba(11,11,14,.18);--line-strong:rgba(11,11,14,.58);--panel:rgba(11,11,14,.06);--ph:#F03DA8;--kaart:#0B0B0E}
html[data-thema=vuur]{color-scheme:light;--bg:#FF1F2D;--bg-rgb:255,31,45;--fg:#0B0B0E;--muted:rgba(11,11,14,.72);--accent:#FFFFFF;--on-accent:#0B0B0E;--line:rgba(11,11,14,.18);--line-strong:rgba(11,11,14,.58);--panel:rgba(11,11,14,.06);--ph:#E6121F;--kaart:#0B0B0E}
html[data-thema=papier],
html[data-thema=poster]{color-scheme:light;--bg:#EEEBE3;--bg-rgb:238,235,227;--fg:#0B0B0E;--muted:rgba(11,11,14,.72);--accent:#E8200C;--on-accent:#FFFFFF;--line:rgba(11,11,14,.18);--line-strong:rgba(11,11,14,.58);--panel:rgba(11,11,14,.06);--ph:#E2DED4;--kaart:#0B0B0E}
html{background:var(--bg);transition:background-color .4s}
/* de hero ligt op beeld en blijft altijd licht op donker */
.hero{--fg:#F4F2EE;--bg:#050507;--line-strong:rgba(244,242,238,.5);color:var(--fg)}
.zoeker .zoeker__sort{width:auto;flex:none}
html[data-thema=zuur] .sel,html[data-thema=cyaan] .sel,html[data-thema=kauwgom] .sel,html[data-thema=vuur] .sel,html[data-thema=papier] .sel,html[data-thema=poster] .sel{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%23140303' stroke-width='2'/%3E%3C/svg%3E")}
.zoeker__zoek input::placeholder{color:var(--muted)}
.thema{position:relative}
.thema__knop{-webkit-appearance:none;appearance:none;height:46px;padding:0 18px;border-radius:999px;border:2px solid var(--fg);background:transparent;color:var(--fg);font:700 13px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.thema__knop[aria-expanded=true]{background:var(--fg);color:var(--bg)}
.thema__lijst{position:absolute;right:0;top:calc(100% + 10px);display:grid;gap:14px;min-width:280px;padding:18px 20px;border-radius:14px;background:var(--bg);border:1px solid var(--line-strong);box-shadow:0 14px 40px rgba(0,0,0,.35);z-index:5}
.thema__rij{display:grid;gap:6px}
.thema__rij+.thema__rij{padding-top:14px;border-top:1px solid var(--line)}
.thema__soort{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.thema__keuzes{display:flex;flex-wrap:wrap;gap:4px 18px}
.thema__keuzes button{-webkit-appearance:none;appearance:none;background:none;border:0;border-bottom:2px solid transparent;border-radius:0;padding:2px 0;color:var(--fg);font:700 16px/1.3 var(--body);cursor:pointer}
.thema__keuzes button:hover{border-bottom-color:var(--line-strong)}
.thema__keuzes button[aria-pressed=true]{border-bottom-color:var(--accent)}
@media (max-width:600px){.thema__knop{height:40px;padding:0 12px;font-size:12px}.thema__lijst{position:fixed;left:16px;right:16px;top:70px;min-width:0}}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh}
img,video{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.skip{position:absolute;left:-999px;top:8px;z-index:100;padding:10px 16px;background:var(--fg);color:var(--bg);border-radius:var(--radius)}
.skip:focus{left:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--smal{max-width:860px}
.disp{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:var(--ls);line-height:.92;text-wrap:balance;overflow-wrap:normal;word-break:keep-all;hyphens:manual;min-width:0;max-width:100%}
.disp--vet{letter-spacing:-.03em}
.disp--klein{font-size:clamp(28px,3.5vw,48px)!important}
.disp--kop{font-size:clamp(20px,2vw,26px)!important;margin:32px 0 10px}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.eyebrow--accent{color:var(--accent)}
.sec{padding-block:clamp(56px,8vw,104px)}
.sec--boven{padding-top:clamp(28px,4vw,56px)}
.sec--onder{padding-top:0}
.sec--lijn{border-top:1px solid var(--line)}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:clamp(24px,3vw,40px);flex-wrap:wrap}
.sec-head--kruimel{margin-top:16px}
.sec-head--meer{margin-top:clamp(56px,8vw,104px)}
.sec-head h1,.sec-head h2{margin:0;font-size:clamp(40px,6vw,80px)}
.more{font-size:14px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);border-bottom:2px solid transparent;transition:border-color .3s;white-space:nowrap}
.more:hover{border-color:var(--accent)}
.lead{font-size:clamp(17px,1.5vw,22px);line-height:1.45;max-width:56ch;margin:0;text-wrap:balance}
.werk__intro{margin-bottom:28px}
.muted{color:var(--muted)}
.link{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.linkknop{background:none;border:0;padding:0;color:var(--muted);font-size:13px;text-decoration:underline;cursor:pointer;text-underline-offset:3px}
.cta-row{display:flex;gap:14px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:54px;padding:0 28px;font-size:16px;font-weight:700;border:2px solid var(--fg);background:var(--fg);color:var(--bg);border-radius:var(--radius);transition:transform .35s cubic-bezier(.2,.8,.2,1),background .3s,color .3s,opacity .3s;cursor:pointer;white-space:nowrap;text-align:center}
.btn:hover{transform:translateY(-2px)}
.btn--ghost{background:transparent;color:var(--fg)}
.btn--accent{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn--donker{background:#050507;border-color:#050507;color:#fff}
.btn--donker.btn--ghost{background:transparent;color:#050507}
.btn--sm{height:44px;padding:0 18px;font-size:14px}
.btn--breed{width:100%}
.btn[disabled],.btn.is-bezig{opacity:.55;cursor:wait;transform:none}
em{font-style:normal;color:var(--accent)}
.accent{color:var(--accent)}

/* woord voor woord omhoog */
/* woord-voor-woord koppen: geen balance (Safari balanceert opnieuw zodra de woorden binnen zijn, waardoor de kop verspringt) */
.hl{text-wrap:wrap}
.hl .w{white-space:nowrap}
.hl .wb{white-space:nowrap}
.hl .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
.hl .w>span{display:inline-block;transform:translateY(112%);opacity:0}
.hl.play .w>span{animation:rise 1s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0)*.11s)}
.hl.uit .w>span{animation:sink .5s cubic-bezier(.6,0,.8,.2) both;animation-delay:calc(var(--i,0)*.04s)}
@keyframes rise{from{transform:translateY(112%);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes sink{from{transform:translateY(0);opacity:1}to{transform:translateY(-112%);opacity:0}}
.rv{min-width:0;opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0)*70ms)}
.rv.in{opacity:1;transform:none}
.fade{animation:fadein .5s ease both}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.rainbow{background:linear-gradient(90deg,#FF2E9A,#FFB800 30%,#41FF8C 55%,#3EC8FF 78%,#B96CFF);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ticker */
.ticker{overflow:hidden;display:flex;align-items:center;height:60px;background:var(--accent);font-family:var(--display);font-weight:700;font-size:clamp(14px,1.4vw,20px);letter-spacing:.08em;text-transform:uppercase;color:var(--on-accent)}
.ticker__in{display:flex;white-space:nowrap;animation:tick var(--tick,30s) linear infinite;will-change:transform}
.ticker__in span{padding:0 clamp(14px,2vw,32px)}
.ticker__in span:nth-child(even){color:var(--tick2,var(--bg))}
html:not([data-thema]),html[data-thema=nacht]{--tick2:#fff}
html[data-thema=papier],
html[data-thema=poster]{--tick2:#0B0B0E}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* navigatie */
.nav{position:sticky;top:0;z-index:20;height:80px;display:flex;align-items:center;transition:background .4s,box-shadow .4s;background:rgba(var(--bg-rgb),.8);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.heeft-hero .nav{position:fixed;left:0;right:0}
.nav.solid,.nav.scrolled{background:rgba(var(--bg-rgb),.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%}
.nav__logo img{height:52px;width:auto}
@media (max-width:600px){.nav__logo img{height:42px}}
.nav__links{display:flex;gap:clamp(14px,2.5vw,36px);font-size:14px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.nav__links a{padding:8px 10px;transition:color .4s;position:relative}
.nav__links a:hover{color:var(--accent)}
.nav__links a.on::after{content:"";position:absolute;left:10px;right:10px;bottom:2px;height:3px;background:var(--accent)}
.nav__right{display:flex;align-items:center;gap:10px}
.cartbtn{position:relative;display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 18px;border:2px solid var(--fg);background:transparent;color:var(--fg);border-radius:var(--radius);font-weight:700;font-size:14px;cursor:pointer;transition:background .3s,color .3s}
.cartbtn:hover{background:var(--fg);color:var(--bg)}
.cartbtn b{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--accent);color:var(--on-accent);font-size:12px;transition:transform .3s}
.cartbtn b.tik{transform:scale(1.35)}
.nav__toggle{display:none;width:44px;height:44px;border:0;background:transparent;color:inherit;cursor:pointer;align-items:center;justify-content:center}
.nav__toggle .ico-x{display:none}
.nav__toggle[aria-expanded=true] .ico-x{display:block}.nav__toggle[aria-expanded=true] .ico-menu{display:none}
@media (max-width:860px){
  .nav__links{display:none}
  .nav__toggle{display:inline-flex}
  .cartbtn span{display:none}
  /* open menu: vol scherm in de kleur van de beleving (geen backdrop-filter, anders knipt het vlak af) */
  .nav.open{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 1px 0 var(--line)}
  .nav.open .nav__links{display:flex;position:fixed;left:0;right:0;top:80px;bottom:0;height:calc(100svh - 80px);overflow-y:auto;overscroll-behavior:contain;flex-direction:column;gap:0;padding:8px var(--gutter) calc(32px + env(safe-area-inset-bottom,0px));background:var(--bg);color:var(--fg);z-index:19;animation:menuIn .35s cubic-bezier(.2,.8,.2,1) both}
  .nav.open .nav__links a{display:flex;align-items:center;justify-content:space-between;padding:20px 0;font-size:22px;line-height:1.1;letter-spacing:.08em;color:var(--fg);border-bottom:1px solid var(--line)}
  .nav.open .nav__links a::before{content:"";order:2;width:10px;height:10px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);opacity:.45}
  .nav.open .nav__links a.on{color:var(--accent)}
  .nav.open .nav__links a.on::after{display:none}
  html.menu-open{overflow:hidden}
}
@keyframes menuIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* hero */
/* vaste hoogte: de kop mag korter of langer zijn, de regel eronder en de knoppen blijven op hun plek */
.hero{position:relative;overflow:hidden;height:min(92vh,900px);min-height:600px;display:flex;align-items:flex-end}
.hero__media,.hero__poster{position:absolute;inset:-12% 0;width:100%;height:124%;object-fit:cover;will-change:transform,opacity;transition:opacity 1.2s ease}
.hero__media.off{opacity:0}
.hero__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,5,7,.1) 0%,rgba(5,5,7,0) 35%,rgba(5,5,7,.35) 70%,rgba(5,5,7,.82) 100%)}
.hero__body{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:22px;width:100%;padding-block:clamp(120px,14vw,160px) clamp(26px,3.6vw,52px)}
.hero__kop{margin:0;font-size:clamp(36px,5.6vw,94px);min-height:1.85em;max-width:11.5ch;letter-spacing:-.035em;overflow-wrap:normal;hyphens:manual;word-break:keep-all}
.hero__kop .wit{color:#F4F2EE}
.hero__lead{color:rgba(244,242,238,.85)}
.hero__onder{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.hero .btn--ghost{border-color:rgba(244,242,238,.5)}
.playtag{display:inline-flex;align-items:center;gap:14px;padding:10px 20px 10px 10px;border-radius:999px;background:rgba(5,5,7,.65);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-size:13px;line-height:1.25;color:#F4F2EE;transition:border-color .3s}
.playtag:hover{border-color:var(--accent)}
.playtag strong{display:block;font-weight:700;font-size:14px}
.playtag--klein{gap:8px;padding:6px 13px 6px 11px;background:rgba(5,5,7,.4);border-color:rgba(255,255,255,.12)}
.playtag--klein strong{font-size:12px;font-weight:600;letter-spacing:.02em}
.playtag__stip{flex:none;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.playtag{position:relative}
.playtag:has(.playtag__balk){padding-bottom:11px}
.playtag__balk{position:absolute;left:14px;right:14px;bottom:5px;height:2px;border-radius:2px;background:rgba(255,255,255,.14);overflow:hidden;pointer-events:none}
.playtag__balk i{display:block;height:100%;background:rgba(244,242,238,.7);transform-origin:0 50%;transform:scaleX(0)}
.dot{flex:none;width:40px;height:40px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:var(--accent);animation:pulse 2.2s ease-out infinite}
.dot svg{width:14px;height:14px}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,46,154,.7)}70%{box-shadow:0 0 0 20px transparent}100%{box-shadow:0 0 0 0 transparent}}
.dots{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.dots button{width:22px;height:6px;border:0;border-radius:999px;background:rgba(255,255,255,.3);padding:0;cursor:pointer;transition:background .3s}
.dots button.on{background:var(--accent)}
.hero--stil .hero__poster{position:absolute}

/* kaarten */
.grid{display:grid;gap:clamp(16px,2.5vw,32px);grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr))}
.grid--4{grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr))}
.grid--3{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.kaart{display:flex;flex-direction:column;gap:10px;cursor:pointer;text-align:left;background:none;border:0;padding:0;color:inherit;font:inherit;position:relative;height:100%}
.kaart__media{position:relative;overflow:hidden;aspect-ratio:1;background:var(--ph);border-radius:var(--radius-img);display:flex;align-items:center;justify-content:center}
.kaart__media img,.kaart__media video{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
/* Alle kaarten vierkant uitgesneden, ook panorama en staand werk; de echte verhouding staat in de meta-regel. */
.kaart__media--panorama img,.kaart__media--staand img{transition:transform .8s cubic-bezier(.2,.8,.2,1),object-fit 0s .25s}

@keyframes knip{0%{opacity:1}30%{opacity:.35}100%{opacity:1}}
.kaart__video{position:absolute;inset:0;opacity:0;transition:opacity .5s}
.kaart:hover .kaart__video.speelt,.kaart .kaart__video.speelt{opacity:1}
.kaart:hover .kaart__media img,.kaart:hover .kaart__media video{transform:scale(1.06)}
/* Muis op een werk: alleen dat werk komt naar voren (schaduw en iets groter), de rest blijft zoals het is (beheer: Animaties en effecten). */
:root{--schaduw:0 34px 56px -24px rgba(255,46,154,.55)}
html[data-thema=elektrisch]{--schaduw:0 36px 60px -22px rgba(7,7,26,.85)}
html[data-thema=zuur],html[data-thema=cyaan],html[data-thema=kauwgom],html[data-thema=vuur],html[data-thema=papier],html[data-thema=poster]{--schaduw:0 36px 60px -22px rgba(11,11,14,.62)}
@media (hover:hover) and (pointer:fine){
  html:not([data-hover=uit]) .kaart__media{transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s cubic-bezier(.2,.8,.2,1)}
  html:not([data-hover=uit]) .kaart:hover{z-index:3}
  html:not([data-hover=uit]) .kaart:hover .kaart__media{transform:translateY(-10px) scale(1.05);box-shadow:var(--schaduw)}
  html:not([data-hover=uit]) .kaart:hover .kaart__media img,html:not([data-hover=uit]) .kaart:hover .kaart__media video{transform:scale(1.02)}
}
@media (prefers-reduced-motion:reduce){html .kaart:hover .kaart__media{transform:none!important}}
.kaart__titel{font-family:var(--display);font-weight:800;font-size:clamp(16px,1.3vw,20px);letter-spacing:-.01em;line-height:1.15}
.kaart__kort{font-size:14px;line-height:1.4;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kaart__vorm{display:inline-flex;align-items:center;gap:6px;min-width:0}
.kaart__vorm .vorm{flex:none;opacity:.8}
.kaart__verhouding{white-space:nowrap}
.kaart__verhouding::before{content:'·';margin-right:6px}
@media (max-width:480px){.kaart__verhouding{display:none}}
.kaart__meta{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:13px;color:var(--muted);margin-top:auto;padding-top:2px}
.kaart__meta b{color:var(--accent);font-weight:700;white-space:nowrap}
.tag{position:absolute;left:14px;top:14px;display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px 0 10px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-radius:var(--radius);background:rgba(5,5,7,.7);color:#F4F2EE;z-index:2}
.tag svg{width:10px;height:10px}
.tag--top{left:auto;right:14px;background:var(--accent);color:var(--on-accent)}
.tag--reeks{left:auto;right:14px;top:auto;bottom:14px;gap:7px;padding:0 11px 0 10px}
.tag--reeks svg{width:11px;height:11px}
.sec-head--reeks .muted{font-size:14px}
.tegels{display:grid;gap:clamp(14px,2vw,24px);grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.tegel{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:var(--ph);border-radius:var(--radius-img)}
.tegel img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.tegel:hover img{transform:scale(1.07)}
.tegel::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,5,7,0) 40%,rgba(5,5,7,.8) 100%);pointer-events:none}
.tegel__naam{position:absolute;left:18px;bottom:14px;z-index:2;font-family:var(--display);font-weight:800;font-size:clamp(22px,2.2vw,32px);text-transform:uppercase;color:#F4F2EE;line-height:1}
.tegel__kop{position:absolute;left:18px;bottom:calc(14px + 1.45em + 12px);z-index:2;font-size:13px;font-weight:600;color:rgba(244,242,238,.85);letter-spacing:.02em}
.tegel small{position:absolute;right:16px;top:14px;z-index:2;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#F4F2EE;background:rgba(5,5,7,.55);padding:6px 10px;border-radius:999px}

/* filters */
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;height:38px;padding:0 14px;border:2px solid var(--line-strong);font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;cursor:pointer;background:transparent;color:var(--fg);border-radius:var(--radius);transition:background .3s,color .3s,border-color .3s}
.chip:hover,.chip.on{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.filters{display:flex;flex-direction:column;gap:14px;margin-bottom:clamp(24px,3vw,40px)}
.filters__row{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.filters__row .eyebrow{min-width:72px}
.zoeker{margin-bottom:clamp(24px,3vw,40px)}
.zoeker__balk{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.zoeker__knop{gap:8px}.zoeker__knop b{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--accent);color:var(--on-accent);font-size:11px}
.zoeker__knop[aria-expanded=true]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.zoeker__zoek{flex:1 1 260px;display:flex;align-items:center;gap:10px;height:38px;padding:0 14px;border:2px solid var(--line-strong);border-radius:var(--radius);color:var(--muted)}
.zoeker__zoek:focus-within{border-color:var(--fg)}
.zoeker__zoek input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--fg);font:inherit;font-size:14px}
.zoeker__sort{width:auto;flex:none;min-width:0;height:38px;padding-top:0;padding-bottom:0;font-size:13px;font-weight:700;border:2px solid var(--line-strong);border-radius:var(--radius);background-color:transparent;color:var(--fg)}
.zoeker__paneel{display:flex;flex-direction:column;gap:14px;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.zoeker__paneel .filters__row .eyebrow{min-width:84px}
.chip--kleur{gap:8px}.chip--kleur i{width:12px;height:12px;border-radius:50%;box-shadow:0 0 0 1px rgba(244,242,238,.35)}
.zoeker__wis{margin:0}.zoeker__wis .link{background:none;border:0;padding:0;color:var(--muted);font:inherit;font-size:13px;text-decoration:underline;cursor:pointer}
.leeg .link{background:none;border:0;padding:0;color:var(--accent);font:inherit;text-decoration:underline;cursor:pointer}
.crumb{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);display:flex;gap:10px;flex-wrap:wrap}
.crumb a:hover{color:var(--accent)}


/* band: twee regels, strak en groot, wit en magenta, lopen aan beide kanten van het scherm af en schuiven mee bij het scrollen */
.band{overflow:hidden;padding-block:clamp(40px,6vw,88px);border-block:1px solid var(--line);position:relative}
.band__in{display:flex;flex-direction:column;gap:.02em;font-size:clamp(56px,9.5vw,150px)}
.band .disp{margin:0;font-size:1em;white-space:nowrap;will-change:transform;line-height:.9;letter-spacing:-.035em}
.band .disp:first-child{margin-left:-4vw}
.band .disp+.disp{margin-left:10vw;color:var(--accent)}
.band--vol .disp:first-child{color:var(--accent)}
.band--vol .disp+.disp{color:var(--fg)}

/* typo-tegel tussen de werken: twee kolommen breed, strak in het raster, verspringend links / rechts / midden.
   De kreet past altijd helemaal in de tegel; --n (regels) en --l (langste regel) sturen de lettergrootte. */
.grid{grid-auto-flow:dense}
.kreet{position:relative;grid-column:1/span 2;aspect-ratio:2/1;container-type:inline-size;overflow:hidden;border-radius:var(--radius-img);display:flex;align-items:center;user-select:none;pointer-events:none;background:none}
.kreet--rechts{grid-column:span 2/-1}
@media (min-width:900px){.kreet--midden{grid-column:2/span 2}}
.kreet__t{margin:0;padding:0 .12em;font-family:var(--display);font-weight:800;text-transform:uppercase;line-height:.86;letter-spacing:-.035em;white-space:nowrap;font-size:min(calc(76cqw / var(--l,8)),calc(56cqw / var(--n,1) / .86));text-wrap:unset;overflow-wrap:normal;width:100%}
.kreet.is-gemeten .kreet__t{font-size:var(--kreet-fs)}
.kreet__t b{display:block;font-weight:inherit}
.kreet--rechts .kreet__t{text-align:center}
.kreet--midden .kreet__t{text-align:center}
/* typo-tegels zonder vlak: de letters staan los op de achtergrond van de site, nooit rechts uitgelijnd */
.kreet--a{color:var(--accent)}
.kreet--b{color:var(--fg)}
.kreet--c{color:var(--fg)}
.kreet--e{color:var(--accent)}
.kreet .kreet__t{width:100%}
.kreet{--k2:var(--fg)}.kreet--a{--k2:var(--fg)}.kreet--c{--k2:var(--accent)}.kreet--e{--k2:var(--fg)}
.kreet .kl{display:inline-block;white-space:pre}
@media (prefers-reduced-motion:no-preference){
.kreet[data-anim=schuif] .kreet__t b{transform:translateX(-35%);opacity:0;transition:transform 1s cubic-bezier(.2,.8,.2,1),opacity .8s}
.kreet[data-anim=schuif] .kreet__t b:nth-child(even){transform:translateX(35%)}
.kreet[data-anim=letters] .kl{transform:translateY(70%);opacity:0;transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .5s;transition-delay:calc(var(--i,0) * 40ms)}
.kreet[data-anim=typ] .kreet__t b{clip-path:inset(0 100% 0 0);transition:clip-path .9s steps(12)}
.kreet[data-anim=zoom] .kreet__t{transform:scale(1.4);filter:blur(14px);opacity:0;transition:transform 1.2s cubic-bezier(.2,.8,.2,1),filter 1.2s,opacity 1s}
.kreet[data-anim=flip] .kreet__t b{transform:perspective(700px) rotateX(-95deg);transform-origin:50% 100%;opacity:0;transition:transform .9s cubic-bezier(.2,.8,.2,1),opacity .5s}
.kreet[data-anim].is-in .kreet__t b,.kreet[data-anim].is-in .kl,.kreet[data-anim].is-in .kreet__t{transform:none;opacity:1;filter:none;clip-path:inset(0 0 0 0)}
.kreet.is-in .kreet__t b:nth-child(2){transition-delay:.14s}.kreet.is-in .kreet__t b:nth-child(3){transition-delay:.28s}
.kreet[data-anim=glitch].is-in .kreet__t{animation:kr-glitch .45s steps(2) .1s 3}
.kreet[data-anim=golf].is-in .kl{animation:kr-golf 2.6s ease-in-out infinite;animation-delay:calc(var(--i,0) * 70ms)}
.kreet[data-anim=adem].is-in .kreet__t{animation:kr-adem 6s ease-in-out infinite}
.kreet[data-anim=zweef].is-in .kreet__t{animation:kr-zweef 8s ease-in-out infinite alternate}
.kreet[data-anim=kleur].is-in .kreet__t b{animation:kr-kleur 2.4s steps(1) infinite}
.kreet[data-anim=kleur].is-in .kreet__t b:nth-child(2){animation-delay:.8s}.kreet[data-anim=kleur].is-in .kreet__t b:nth-child(3){animation-delay:1.6s}
}
@keyframes kr-glitch{0%{transform:translate(0)}25%{transform:translate(-3%,1%)}50%{transform:translate(2.5%,-1%)}75%{transform:translate(-1%,.5%)}100%{transform:none}}
@keyframes kr-golf{0%,100%{transform:none}50%{transform:translateY(-9%)}}
@keyframes kr-adem{0%,100%{transform:scale(1)}50%{transform:scale(.93)}}
@keyframes kr-zweef{from{transform:translateX(5%)}to{transform:translateX(-5%)}}
@keyframes kr-kleur{0%{color:inherit}50%{color:var(--k2)}}
/* explosie: de woorden vliegen achter de werken langs tot de randen van het venster */
.kreet-boem{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.kreet-boem span{position:absolute;font-family:var(--display);font-weight:800;text-transform:uppercase;line-height:.9;letter-spacing:-.035em;white-space:nowrap;will-change:transform,opacity}
.kreet-boem .kb--a{color:var(--accent)}.kreet-boem .kb--w{color:var(--fg)}.kreet-boem .kb--d{color:var(--line-strong)}
@media (max-width:640px){.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}.kreet,.kreet--rechts,.kreet--midden{grid-column:1/-1}}
@supports not (font-size:1cqw){.kreet__t{font-size:clamp(40px,9vw,120px)}}

/* detail */
.detail{display:grid;gap:clamp(24px,5vw,72px);grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);align-items:start;margin-top:28px}
.detail__links{position:sticky;top:96px}
/* het werk zelf: alleen het netto beeld, met een schaduw rondom die naar onder steviger is */
:root{--werk-schaduw:0 0 0 1px rgba(255,255,255,.06),0 2px 6px rgba(0,0,0,.35),0 34px 70px -22px rgba(0,0,0,.95)}
html[data-thema=zuur],html[data-thema=cyaan],html[data-thema=kauwgom],html[data-thema=vuur],html[data-thema=papier],html[data-thema=poster]{--werk-schaduw:0 1px 3px rgba(20,16,12,.12),0 6px 18px -4px rgba(20,16,12,.16),0 38px 60px -26px rgba(20,16,12,.55)}
/* hoogte van het werk: past in het venster met vaste lucht eronder (boven ±240px kop en kruimelpad) */
:root{--werk-onder:clamp(28px,3.5vh,56px)}
.detail__img{position:relative;display:block;width:min(100%,max(calc((100svh - 240px - var(--werk-onder)) * var(--verh,1)),calc(320px * var(--verh,1))));margin-inline:auto;background:var(--ph);border-radius:var(--radius-img);overflow:hidden;cursor:zoom-in;box-shadow:var(--werk-schaduw)}
.detail__img img{display:block;width:100%;height:100%;object-fit:cover}
.detail__loop video{width:100%;border-radius:var(--radius-img);background:#000}
.detail__info{display:flex;flex-direction:column;gap:22px;min-width:0}
.detail>*{min-width:0}
.detail__info h1{margin:0;font-size:clamp(36px,4.5vw,64px)}
.detail__tekst p{margin:0 0 12px}
.detail__kort{margin:0;font-size:clamp(17px,1.4vw,20px)}
.detail__maat{display:flex;align-items:center;gap:6px}
.detail__maat .vorm{opacity:.8}
.leesmeer{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.leesmeer summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 0;font-family:var(--display);font-weight:800;font-size:15px;text-transform:uppercase;letter-spacing:.02em}
.leesmeer summary::-webkit-details-marker{display:none}
.leesmeer summary i{width:28px;height:28px;border-radius:999px;border:2px solid var(--line-strong);position:relative;flex:none;transition:transform .3s}
.leesmeer summary i::before,.leesmeer summary i::after{content:'';position:absolute;left:50%;top:50%;width:12px;height:2px;background:currentColor;transform:translate(-50%,-50%)}
.leesmeer summary i::after{transform:translate(-50%,-50%) rotate(90deg)}
.leesmeer[open] summary i{transform:rotate(45deg)}
.leesmeer .detail__tekst{padding-bottom:8px}
.detail__maat{margin:0}
.detail__nav{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;padding-top:8px}
.cadeau{display:flex;gap:12px;align-items:flex-start;margin:0;padding:14px 16px;border:1px solid var(--accent);border-radius:8px;font-size:14px;line-height:1.45;color:var(--fg)}
.cadeau svg{flex:none;width:18px;height:18px;color:var(--accent);margin-top:2px}
.cadeau--knop{width:100%;text-align:left;background:none;font:inherit;cursor:pointer;align-items:center;transition:background .25s}
.cadeau--knop:hover{background:var(--panel)}
.cadeau__loop{flex:none;width:72px;height:72px;object-fit:cover;border-radius:4px;background:var(--ph)}
.cadeau__bekijk{display:block;margin-top:4px;color:var(--accent);font-weight:700}
.regel__loop{display:flex;align-items:center;gap:6px;margin-top:4px;font-weight:700;color:var(--accent)}
.regel__loop svg{width:12px;height:12px}
.kort__loop{display:flex;justify-content:space-between;gap:12px;color:var(--accent);font-size:14px}
img,video{-webkit-touch-callout:none}
img{-webkit-user-drag:none}
.opties{display:flex;flex-direction:column;gap:14px}
.opties__keuzes{display:flex;flex-direction:column;gap:14px}.opties__keuzes[hidden]{display:none}.opties__keuzes .note{margin:-6px 0 0}
.opties__set{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;min-width:0}
.opties__set legend{padding:0;margin-bottom:8px;color:var(--fg)}
label.o{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;border:2px solid var(--line-strong);border-radius:var(--radius);cursor:pointer;transition:background .25s,color .25s,border-color .25s;position:relative}
label.o:has(input:checked){background:var(--fg);color:var(--bg);border-color:var(--fg)}
label.o input{position:absolute;opacity:0;width:1px;height:1px}
#maten{display:flex;flex-direction:column;gap:8px}
label.o b{font-weight:600}
label.o small{font-size:13px;opacity:.8}
.sel,.inp{width:100%;height:50px;padding:0 14px;border:2px solid var(--line-strong);background:transparent;color:var(--fg);font-size:16px;font-family:var(--body);border-radius:var(--radius)}
.sel{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%23F4F2EE' stroke-width='2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:44px}
.sel option{color:#111;background:#fff}
textarea.inp{height:110px;padding:12px 14px;resize:vertical;border-radius:14px}
.inp:focus,.sel:focus{border-color:var(--fg);outline:none}
.veld{display:flex;flex-direction:column;gap:8px;min-width:0}
.veld label{font-size:13px;font-weight:700;color:var(--fg)}
.veld label small{font-weight:400;color:var(--muted)}
.prijsvak{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:18px 0;border-top:2px solid var(--line-strong);border-bottom:2px solid var(--line-strong)}
.bedrag{font-family:var(--display);font-weight:800;font-size:40px;letter-spacing:-.02em;line-height:1}
.aantal{display:inline-flex;align-items:center;border:2px solid var(--line-strong);border-radius:var(--radius);overflow:hidden;align-self:center}
.aantal button{width:42px;height:42px;border:0;background:transparent;color:inherit;font-size:20px;cursor:pointer}
.aantal span{min-width:36px;text-align:center;font-weight:700}
.note{font-size:13px;color:var(--muted);line-height:1.5;margin:0}
.viewtabs{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap;align-items:center}
.viewtabs .chip{height:36px}
.viewtabs .spacer{flex:1}
.zoombtn{position:absolute;right:14px;bottom:14px;width:46px;height:46px;border-radius:999px;border:0;background:rgba(255,255,255,.92);color:#111;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.35);transition:transform .3s}
.zoombtn:hover{transform:scale(1.08)}
@media (max-width:900px){.detail{grid-template-columns:minmax(0,1fr)}.detail__links{position:static}}

/* aan de muur */
.room{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--wall,#F1EDE6);border-radius:var(--radius-img);transition:background .5s}
.room__light{position:absolute;inset:0;background:radial-gradient(ellipse 70% 60% at 50% 30%,rgba(255,255,255,.28),rgba(0,0,0,0) 60%),linear-gradient(180deg,rgba(0,0,0,0) 60%,rgba(0,0,0,.08) 100%)}
.room__floor{position:absolute;left:0;right:0;bottom:0;height:22%;background:linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.3));border-top:1px solid rgba(0,0,0,.15)}
.room__plint{position:absolute;left:0;right:0;bottom:22%;height:1.6%;background:rgba(255,255,255,.55);border-top:1px solid rgba(0,0,0,.08)}
.room__sofa{position:absolute;left:50%;bottom:14%;width:55%;height:17%;transform:translateX(-50%)}
.room__sofa i{position:absolute;display:block;background:var(--sofa,#3A3A40);border-radius:6px}
.room__sofa .back{left:0;right:0;top:0;height:55%;border-radius:10px 10px 4px 4px}
.room__sofa .seat{left:0;right:0;bottom:8%;height:50%;border-radius:6px 6px 10px 10px;filter:brightness(1.12)}
.room__sofa .arm{top:12%;bottom:8%;width:7%;border-radius:8px;filter:brightness(1.05)}
.room__sofa .arm.l{left:-3%}.room__sofa .arm.r{right:-3%}
.room__sofa .leg{bottom:0;width:2.5%;height:9%;border-radius:2px;filter:brightness(.7)}
.room__sofa .leg.l{left:6%}.room__sofa .leg.r{right:6%}
.room__sofa .shadow{left:-4%;right:-4%;bottom:-4%;height:6%;background:rgba(0,0,0,.25);filter:blur(6px);border-radius:50%}
.room__side{position:absolute;bottom:22%;width:9%;height:9%;background:var(--sofa,#3A3A40);border-radius:3px;filter:brightness(.9)}
.room__plant{position:absolute;bottom:22%;width:5%;height:26%;left:12%;background:linear-gradient(180deg,#4F7B4A,#2F5A2E);border-radius:50% 50% 8px 8px / 60% 60% 8px 8px;opacity:.85}
.room__pot{position:absolute;bottom:22%;left:13.2%;width:2.6%;height:6%;background:#8F7A62;border-radius:2px 2px 4px 4px}
.room__art{position:absolute;left:50%;bottom:calc(22% + 17% + 9%);transform:translateX(-50%);box-shadow:0 18px 40px rgba(0,0,0,.35),0 2px 6px rgba(0,0,0,.25);background:#111;box-sizing:content-box;transition:width .4s,height .4s}
.room__art img{width:100%;height:100%;object-fit:cover;display:block}
.room__art.canvas{outline:1px solid rgba(255,255,255,.35);outline-offset:-1px}
.room__art.dibond{border:2px solid #E8E6E1}
.room__art.plexi::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.35) 0%,rgba(255,255,255,0) 35%,rgba(255,255,255,0) 65%,rgba(255,255,255,.18) 100%);pointer-events:none}
.room__art.poster{padding:3%;background:#fff;border:4px solid #151515}
.room__scale{position:absolute;left:50%;bottom:6%;transform:translateX(-50%);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.85);background:rgba(0,0,0,.35);padding:4px 10px;border-radius:999px;white-space:nowrap}
.room__note{position:absolute;left:14px;top:14px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:rgba(0,0,0,.55);color:#fff;padding:6px 10px;border-radius:999px}
.walls{display:flex;gap:6px;align-items:center}
.walls button{width:26px;height:26px;border-radius:999px;border:2px solid rgba(255,255,255,.4);cursor:pointer;padding:0;transition:transform .2s}
.walls button.on{border-color:var(--accent);transform:scale(1.15)}

/* zoom */
.zoom{position:fixed;inset:0;z-index:85;background:rgba(5,5,7,.96);display:flex;flex-direction:column}
.zoom__stage{flex:1;overflow:hidden;position:relative;touch-action:none;cursor:grab;display:flex;align-items:center;justify-content:center}
.zoom__stage.drag{cursor:grabbing}
.zoom__stage img{max-width:100%;max-height:100%;width:auto;transform-origin:center center;will-change:transform;user-select:none;-webkit-user-drag:none}
.zoom__ctl{position:absolute;left:50%;bottom:max(40px,7vh);translate:var(--sx,0px) var(--sy,0px);transform:translateX(-50%);z-index:3;display:flex;justify-content:center;align-items:center;gap:8px;padding:8px 10px 8px 6px;color:#F4F2EE;font-size:14px;background:rgba(18,18,20,.78);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:999px;box-shadow:0 18px 40px -16px rgba(0,0,0,.7);max-width:calc(100% - 24px);white-space:nowrap}
.zoom__greep{display:flex;align-items:center;justify-content:center;width:28px;height:44px;cursor:move;touch-action:none;opacity:.6}
.zoom__greep:hover{opacity:1}
.zoom__pijl{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:52px;height:52px;border-radius:999px;border:0;background:#fff;color:#111;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 30px -12px rgba(0,0,0,.7)}
.zoom__pijl--vorige{left:clamp(10px,2.5vw,36px)}
.zoom__pijl--volgende{right:clamp(10px,2.5vw,36px)}
.zoom__pijl:focus-visible,.zoom__ctl button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.zoom__tel{font-family:var(--body);font-weight:600;font-size:13px;letter-spacing:.08em;opacity:.7;margin-left:8px}
@media (max-width:600px){.zoom__hint{display:none}.zoom__pijl{width:44px;height:44px}}
.zoom__ctl button{height:44px;min-width:44px;padding:0 16px;border:0;border-radius:999px;background:#fff;color:#111;font-weight:700;cursor:pointer}
.zoom__ctl span{min-width:56px;text-align:center;font-weight:600}
.zoom__hint{opacity:.7;min-width:0!important}
.zoom__title{position:absolute;left:clamp(12px,3vw,40px);top:clamp(16px,3vw,44px);color:#F4F2EE;font-family:var(--display);font-weight:800;font-size:20px;text-transform:uppercase;letter-spacing:-.02em;pointer-events:none;z-index:2}
.lb__close{position:absolute;right:clamp(12px,3vw,40px);top:clamp(12px,3vw,40px);width:48px;height:48px;border-radius:999px;border:0;background:#fff;color:#111;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:3}

/* bestelband en stappen */
.bestelband{border-top:1px solid var(--line)}
.bestelband__kop{margin:0 0 20px;font-size:clamp(36px,4.4vw,64px)}
.bestelband .prose{margin:0 0 24px}
.cols{display:grid;gap:clamp(32px,5vw,72px);grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:start}
.cols>*{min-width:0}
.stappen{display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.stappen--staand{grid-template-columns:minmax(0,1fr)}
.stap{border-top:4px solid var(--accent);padding-top:16px;display:flex;flex-direction:column;gap:10px}
.stap .num{font-family:var(--display);font-weight:800;font-size:44px;color:var(--accent);line-height:1}
.stap h3{margin:0;font-family:var(--display);font-weight:800;font-size:19px;text-transform:uppercase;letter-spacing:-.02em}
.stap p{margin:0;line-height:1.5;font-size:15px;color:var(--muted)}
.prose{max-width:64ch;font-size:17px;line-height:1.6}
.prose p{margin:0 0 16px}
.prose--groot{font-size:clamp(17px,1.3vw,19px)}
@media (max-width:900px){.cols{grid-template-columns:minmax(0,1fr)}}

/* over */
.over{display:grid;gap:clamp(32px,5vw,72px);grid-template-columns:minmax(0,1.4fr) minmax(280px,.8fr);align-items:start;margin-top:16px}
.over__kop{margin:0 0 24px;font-size:clamp(40px,6vw,88px)}
.over__intro{margin:0 0 24px}
.over__zij .eyebrow{display:block;margin-bottom:16px}
@media (max-width:900px){.over{grid-template-columns:minmax(0,1fr)}}

/* nieuws */
.nieuws{display:grid;gap:clamp(16px,2.5vw,32px);grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr))}
.bericht{display:flex;flex-direction:column;gap:10px}
.bericht__media{display:block;aspect-ratio:16/10;overflow:hidden;border-radius:var(--radius-img);background:var(--ph)}
.bericht__media img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.bericht:hover .bericht__media img{transform:scale(1.05)}
.bericht__titel{font-family:var(--display);font-weight:800;font-size:clamp(18px,1.5vw,22px);line-height:1.15;text-transform:uppercase}
.bericht__kop{margin:8px 0 24px;font-size:clamp(36px,5vw,72px)}
.bericht__groot{position:relative;display:block;margin:0 0 28px;border-radius:var(--radius-img);overflow:hidden}
.bericht__groot .tag{left:auto;right:14px;top:auto;bottom:14px}

/* faq */
.faq{display:flex;flex-direction:column;border-top:1px solid var(--line);max-width:860px}
.faq__item{border-bottom:1px solid var(--line)}
.faq__item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 0;font-family:var(--display);font-weight:800;font-size:clamp(18px,1.6vw,24px);text-transform:uppercase;letter-spacing:-.01em;line-height:1.15}
.faq__item summary::-webkit-details-marker{display:none}
@media (max-width:374px){.faq__item summary{font-size:15px;gap:12px}}
.faq__item summary i{flex:none;width:34px;height:34px;border-radius:999px;border:2px solid var(--line-strong);position:relative;transition:transform .3s,background .3s}
.faq__item summary i::before,.faq__item summary i::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;background:currentColor;transform:translate(-50%,-50%)}
.faq__item summary i::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq__item[open] summary i{transform:rotate(45deg);background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.faq__antwoord{padding:0 0 22px;max-width:60ch;color:var(--muted)}
.faq__antwoord p:last-child{margin-bottom:0}

/* winkelmand en aanvraag */
.regels{display:flex;flex-direction:column;border-top:2px solid var(--line-strong)}
.regel{display:grid;grid-template-columns:96px 1fr auto;gap:18px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line)}
.regel img{width:96px;height:96px;object-fit:cover;border-radius:var(--radius-img);background:var(--ph)}
.regel__t{display:flex;flex-direction:column;gap:6px}
.regel__t b{font-family:var(--display);font-weight:800;font-size:18px;text-transform:uppercase;line-height:1.1}
.regel__t span{font-size:14px;color:var(--muted)}
.regel__r{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.regel__r .bedrag{font-size:20px}
.totalen{display:flex;flex-direction:column;gap:10px;padding:20px 0;font-size:16px}
.totalen div{display:flex;justify-content:space-between;gap:16px}
.totalen .groot{font-family:var(--display);font-weight:800;font-size:28px;letter-spacing:-.02em;text-transform:uppercase}
.samenvatting{padding:clamp(20px,3vw,32px);background:var(--panel);border:1px solid var(--line);border-radius:12px;display:flex;flex-direction:column;gap:12px;position:sticky;top:96px}
.samenvatting__regels{display:flex;flex-direction:column;gap:10px;font-size:14px}
.samenvatting__regels div{display:flex;justify-content:space-between;gap:12px}
.samenvatting__regels .muted{display:block}
.aanvraag{display:flex;flex-direction:column;gap:18px}
.twee{display:grid;gap:16px;grid-template-columns:1fr 1fr}
.drie{display:grid;gap:16px;grid-template-columns:1fr 1.4fr 1fr}
.vink{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.5;cursor:pointer}
.vink input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--accent);flex:none}
.fout{color:var(--accent);font-size:14px;min-height:18px;font-weight:600}
.lok{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.leeg{padding:clamp(32px,5vw,64px);border:2px dashed var(--line);text-align:center;color:var(--muted);border-radius:12px}
.leeg--klein{padding:16px;font-size:14px;text-align:left}
.ok{padding:clamp(24px,4vw,40px);background:var(--accent);color:var(--on-accent);display:flex;flex-direction:column;gap:14px;border-radius:12px}
.ok h1{margin:0;font-size:clamp(32px,4vw,56px)}
.ok p{margin:0;line-height:1.55;font-size:17px}
.ok em{color:color-mix(in srgb,var(--on-accent) 58%,transparent);font-weight:inherit;font-family:inherit;letter-spacing:inherit}
.ok__ref{color:inherit;opacity:.7}
@media (max-width:900px){.samenvatting{position:static}.twee,.drie{grid-template-columns:minmax(0,1fr)}.regel{grid-template-columns:72px minmax(0,1fr)}.regel img{width:72px;height:72px}.regel__r{grid-column:1/-1;flex-direction:row;justify-content:space-between;align-items:center}}

/* tekstpagina's */
.tekst{display:grid;gap:clamp(32px,5vw,72px);grid-template-columns:minmax(0,1.5fr) minmax(220px,.5fr);align-items:start}
.tekst__zij{position:sticky;top:96px;display:flex;flex-direction:column;gap:12px;padding:20px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.punten,.inhoud{margin:0;padding-left:20px;font-size:14px;line-height:1.6;color:var(--muted)}
.inhoud a:hover{color:var(--accent)}
@media (max-width:900px){.tekst{grid-template-columns:minmax(0,1fr)}.tekst__zij{position:static}}

/* voet */
.foot{border-top:1px solid var(--line);padding-block:40px}
.foot .wrap{display:flex;flex-wrap:wrap;gap:32px 56px;align-items:flex-start;justify-content:space-between}
.foot__col{display:flex;flex-direction:column;gap:10px}
.foot__col div{display:flex;gap:20px;flex-wrap:wrap;font-weight:600;font-size:15px}
.foot__col a:hover{color:var(--accent)}
.foot__mail a{color:var(--accent)}
.foot__logo{height:44px;width:auto}

/* cursor en toast */
.cursor{position:fixed;left:0;top:0;z-index:70;pointer-events:none;transform:translate(-50%,-50%) scale(0);width:84px;height:84px;border-radius:999px;background:#fff;color:#111;display:flex;align-items:center;justify-content:center;font:700 13px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.cursor.show{transform:translate(-50%,-50%) scale(1)}
@media (hover:none),(pointer:coarse){.cursor{display:none}}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);opacity:0;z-index:65;padding:12px 20px;border-radius:999px;background:#fff;color:#111;font:600 14px/1.3 var(--body);box-shadow:0 12px 40px rgba(0,0,0,.3);transition:.4s;pointer-events:none;max-width:90vw;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){
  .hl .w>span{transform:none;opacity:1}
  .hl.play .w>span,.hl.uit .w>span,.ticker__in,.dot,.fade{animation:none}
  .rv{opacity:1;transform:none;transition:none}
  .hero__media,.hero__poster,.band .disp{transform:none!important}
  html{scroll-behavior:auto}
}
@media print{.nav,.foot,.cursor,.toast,.ticker,.bestelband{display:none}body{background:#fff;color:#000}}


/* ---------- Belevingen: het palet zet ook typografie, ruimte en beweging ---------- */
/* Rustig: gewone letters in plaats van kapitalen, meer lucht, grotere werken, zachte beweging. */
html[data-beleving=rustig]{--radius-img:2px}
html[data-beleving=rustig] :is(.disp,.kreet__t,.kreet-boem span){text-transform:none;font-weight:700;letter-spacing:-.03em}
html[data-beleving=rustig] .grid{gap:clamp(24px,3.6vw,56px);grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr))}
html[data-beleving=rustig] .grid--4{grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr))}
html[data-beleving=rustig] .ticker__in{animation-duration:calc(var(--tick,30s) * 2.2)}
html[data-beleving=rustig] .rv:not(.in){transform:translateY(12px)}
/* Heftig: grotere koppen, strak en dicht raster, harde hoeken, alles sneller. */
html[data-beleving=heftig]{--radius-img:0px;--ls:-.035em}
html[data-beleving=heftig] .ticker__in{animation-duration:calc(var(--tick,30s) * .55)}
@media (hover:hover) and (pointer:fine){
  html[data-beleving=rustig]:not([data-hover=uit]) .kaart:hover .kaart__media{transform:translateY(-6px) scale(1.03)}
}

/* ---------- talen: schakelaar in de navigatie en de suggestie onderin ---------- */
.talen{display:flex;align-items:center;height:46px;padding:0 6px;border:2px solid var(--fg);border-radius:999px}
.talen a{display:grid;place-items:center;min-width:34px;height:34px;padding:0 6px;border-radius:999px;font:700 12px/1 var(--body);letter-spacing:.08em;color:var(--muted);transition:color .2s,background .2s}
.talen a:hover{color:var(--fg)}
.talen a.on{background:var(--fg);color:var(--bg)}
.taalhint{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:70;display:flex;align-items:center;gap:14px;max-width:calc(100% - 32px);padding:10px 10px 10px 20px;border-radius:999px;background:var(--fg);color:var(--bg);font:600 14px/1.35 var(--body);box-shadow:0 14px 40px rgba(0,0,0,.35)}
.taalhint[hidden]{display:none}
.taalhint a{flex:none;display:inline-flex;align-items:center;height:36px;padding:0 16px;border-radius:999px;background:var(--accent);color:var(--on-accent);font-weight:700;white-space:nowrap}
.taalhint__x{flex:none;display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:50%;background:transparent;color:inherit;cursor:pointer;opacity:.7}
.taalhint__x:hover{opacity:1}
@media (max-width:600px){.taalhint{border-radius:18px;flex-wrap:wrap;padding:12px 12px 12px 16px;gap:10px}.taalhint span{flex:1 1 100%}}
@media (prefers-reduced-motion:no-preference){.taalhint:not([hidden]){animation:taalin .5s cubic-bezier(.2,.8,.2,1)}@keyframes taalin{from{opacity:0;transform:translate(-50%,16px)}}}
.nav__links .talen a{padding:0 6px}.nav__links .talen a.on::after{display:none}

/* Van dichtbij (details op ware grootte) en in een ruimte */
.superdetail{margin-top:clamp(40px,6vw,88px)}
.superdetail__rij,.superdetail__ruimtes{display:grid;gap:clamp(10px,1.4vw,20px);grid-template-columns:repeat(3,minmax(0,1fr))}
.superdetail__rij--1{grid-template-columns:minmax(0,1fr)}
.superdetail__rij--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.superdetail__ruimtes{margin-bottom:8px}
.superdetail__vak{display:block;padding:0;border:0;background:none;cursor:zoom-in;overflow:hidden;border-radius:var(--r,6px);aspect-ratio:1/1;position:relative}
.superdetail__vak--ruimte{aspect-ratio:auto}
.superdetail__vak img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.superdetail__vak:hover img,.superdetail__vak:focus-visible img{transform:scale(1.06)}
@media (max-width:700px){.superdetail__rij{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:78%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}.superdetail__vak{scroll-snap-align:start}.superdetail__ruimtes{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.superdetail__vak img{transition:none}}

/* de i bij materiaal en prijs: alles over het product */
.info-i{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:22px;height:22px;padding:0;margin-left:6px;border:1.5px solid currentColor;border-radius:999px;background:none;color:inherit;font:700 12px/1 var(--body);cursor:pointer;vertical-align:middle;transition:background .2s,color .2s}
.info-i:hover,.info-i:focus-visible{background:var(--fg);color:var(--bg)}
.info-i--link{width:fit-content;align-self:flex-start;justify-self:start;height:auto;min-height:26px;padding:4px 10px;margin:10px 0 0;font-weight:600;font-size:12px;letter-spacing:.02em}
.info-i--link span{display:inline-grid;place-items:center;width:16px;height:16px;border:1.5px solid currentColor;border-radius:999px;font-size:10px;font-weight:800}
.opties__bij{margin:4px 0 0}
dialog.info{width:min(560px,calc(100vw - 32px));max-height:calc(100vh - 48px);padding:clamp(22px,4vw,36px);border:0;border-radius:var(--radius-img,10px);background:var(--bg);color:var(--fg);box-shadow:0 30px 80px rgba(0,0,0,.45);overflow:auto}
dialog.info::backdrop{background:rgba(0,0,0,.6);backdrop-filter:blur(3px)}
.info__dicht{position:absolute;top:14px;right:14px}
.info__dicht:focus-visible{outline:2px solid var(--accent);outline-offset:-4px}
.info__m h3{margin:6px 0 14px}
.info__m .prose p{margin:0 0 12px}
.info__m .prose ul{margin:0 0 18px;padding-left:18px;display:grid;gap:6px}
.info__maten{list-style:none;margin:8px 0 16px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px 18px}
.info__maten li{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid var(--line)}
/* v52: formaten als strak raster: 3 kolommen, formaat boven, prijs eronder, nooit afgebroken */
.info__maten--formaat{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 18px}
.info__maten--formaat li{flex-direction:column;justify-content:flex-start;gap:2px;padding:10px 0 12px;border-bottom:0;border-top:1px solid var(--line)}
.info__maten--formaat span,.info__maten--formaat b{white-space:nowrap;font-variant-numeric:tabular-nums}
.info__maten--formaat span{font-size:15px}
.info__maten--formaat b{font-size:17px;font-weight:700}
/* v52: zelf te kiezen: per keuze een kolom, de naam erboven, elke mogelijkheid op een eigen regel */
.info__maten--keuze{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px}
.info__maten--keuze li{flex-direction:column;justify-content:flex-start;gap:3px;padding:10px 0 12px;border-bottom:0;border-top:1px solid var(--line)}
.info__maten--keuze span{font-size:13px;letter-spacing:.06em;text-transform:uppercase;opacity:.75}
.info__maten--keuze b{font-size:16px;font-weight:700;line-height:1.25}
.info__maten--keuze b+b{margin-top:6px}
@media (max-width:480px){.info__maten--formaat{gap:0 10px}.info__maten--formaat span{font-size:13px}.info__maten--formaat b{font-size:15px}}
@media (max-width:359px){.info__maten--formaat{grid-template-columns:repeat(2,minmax(0,1fr))}.info__maten--keuze{grid-template-columns:minmax(0,1fr)}}
.info__voet{margin:0}
.info__dicht{width:38px;height:38px}

/* sfeerfilms: niet te koop, wel de beleving */
.film{position:relative;margin:0;overflow:hidden;border-radius:var(--radius-img);background:#000;grid-column:span 2;aspect-ratio:var(--r,1.7778)}
.film--vierkant{grid-row:span 2;aspect-ratio:1}
.film--staand{grid-column:span 1;grid-row:span 2;aspect-ratio:auto}
.film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.film figcaption{position:absolute;left:14px;bottom:12px;display:flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:rgba(5,5,7,.55);color:#F4F2EE;font:600 12px/1 var(--body);letter-spacing:.04em;backdrop-filter:blur(4px)}
.film figcaption span{font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.films{display:grid;gap:clamp(12px,1.6vw,24px);grid-template-columns:repeat(2,minmax(0,1fr))}
.films--1{grid-template-columns:minmax(0,1fr)}
.films--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.films .film{grid-column:auto;grid-row:auto;aspect-ratio:var(--r,1.7778);max-height:78vh}
.films--1 .film--vierkant,.films--1 .film--staand{max-width:min(100%,78vh);margin-inline:auto;width:100%}
@media (max-width:700px){.film{grid-column:1/-1;grid-row:auto}.film--staand{aspect-ratio:9/16}.films,.films--3{grid-template-columns:minmax(0,1fr)}}

/* ---------- welkom: stemming kiezen bij het eerste bezoek ---------- */
.welkom{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:80;width:min(940px,calc(100% - 24px));max-height:calc(100svh - 32px);overflow:auto;padding:clamp(22px,3vw,36px);background:var(--bg);color:var(--fg);border:2px solid var(--fg);border-radius:var(--radius-img,14px);box-shadow:0 30px 90px rgba(0,0,0,.5);animation:welkomIn .7s cubic-bezier(.2,.8,.2,1) both;transition:background .35s,color .35s,border-color .35s}
@keyframes welkomIn{from{opacity:0;transform:translate(-50%,28px)}to{opacity:1;transform:translate(-50%,0)}}
.welkom[hidden]{display:none}
.welkom__x{position:absolute;top:12px;right:12px;width:40px;height:40px;border-radius:999px;border:2px solid var(--line-strong);background:none;color:var(--fg);display:grid;place-items:center;cursor:pointer}
.welkom__x:hover,.welkom__x:focus-visible{background:var(--fg);color:var(--bg)}
.welkom .welkom__kop{font-size:clamp(28px,3.6vw,48px)!important;line-height:1.02;margin:10px 48px 10px 0;hyphens:manual;overflow-wrap:normal;word-break:normal}
.welkom__tekst{max-width:60ch;margin:0;opacity:.85}
.welkom__keuzes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:22px 0}
.welkom:focus{outline:none}
.stemming{display:flex;flex-direction:column;justify-content:space-between;gap:14px;padding:16px 18px;border:2px solid var(--line-strong);border-radius:min(var(--radius),16px);transition:border-color .25s,transform .25s}
.stemming:hover{transform:translateY(-3px);border-color:var(--fg)}
.stemming:has([aria-pressed=true]){border-color:var(--accent)}
.stemming__knop{display:flex;flex-direction:column;gap:6px;padding:0;border:0;background:none;color:inherit;text-align:left;font:inherit;cursor:pointer}
.stemming__knop b{font:700 clamp(20px,1.8vw,24px)/1.1 var(--body)}
.stemming__knop span{font-size:14px;line-height:1.45;opacity:.8}
.stemming__knop:focus-visible,.stemming__kleuren button:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:6px}
.stemming__kleuren{display:flex;gap:8px}
.stemming__kleuren button{width:30px;height:30px;padding:0;border-radius:999px;border:2px solid var(--fg);background:linear-gradient(135deg,var(--a) 0 58%,var(--b) 58% 100%);cursor:pointer;transition:transform .2s}
.stemming__kleuren button:hover{transform:scale(1.12)}
.stemming__kleuren button[aria-pressed=true]{box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--accent)}
.welkom__onder{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.welkom__verras{padding:0;border:0;background:none;color:var(--fg);font:600 15px/1 var(--body);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
/* laptop (13 inch en dergelijke): hetzelfde venster, een maat kleiner; op een groot scherm blijft het zoals het is */
@media (min-width:761px) and (max-width:1600px), (min-width:761px) and (max-height:950px){
  .welkom{width:min(760px,calc(100% - 24px));padding:22px 28px 24px}
  .welkom .welkom__kop{font-size:clamp(24px,2.5vw,34px)!important;margin:6px 44px 8px 0}
  .welkom__tekst{font-size:14.5px;line-height:1.5}
  .welkom__keuzes{gap:10px;margin:16px 0}
  .stemming{padding:12px 14px;gap:10px}
  .stemming__knop b{font-size:18px}
  .stemming__knop span{font-size:13px;line-height:1.4}
  .stemming__kleuren button{width:24px;height:24px}
  .welkom__onder .btn{height:44px;padding:0 20px;font-size:13px}
  .welkom__x{width:34px;height:34px;top:10px;right:10px}
}
@media (max-width:760px){
  .welkom{left:0;right:0;bottom:0;transform:none;width:auto;max-height:88svh;border-width:2px 0 0;border-radius:18px 18px 0 0;padding:22px 16px calc(18px + env(safe-area-inset-bottom,0px))}
  @keyframes welkomIn{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
  .welkom__keuzes{grid-template-columns:minmax(0,1fr);gap:8px;margin:16px 0}
  .stemming{flex-direction:row;align-items:center;padding:12px 14px}
  .stemming__knop span{font-size:13px}
  .welkom__tekst{font-size:15px}
  .welkom .welkom__kop{font-size:28px!important}
  .stemming__kleuren{flex:none;gap:6px}
  .stemming__kleuren button{width:24px;height:24px}
}
@media (prefers-reduced-motion:reduce){.welkom{animation:none}.stemming,.stemming:hover{transform:none}}

/* =========================================================================
   Belevingen: niet alleen kleur en letter, ook een andere opbouw.
   Rustig = museum: één werk in stilte, geen film, geen strook, gewone letters, veel lucht.
   Levendig = de standaard.
   Heftig = alles harder: reuzekoppen, dubbele strook, mozaïek, dikke lijnen.
   ========================================================================= */
.rust-hero,.ticker--terug{display:none}
.ticker--terug .ticker__in{animation-direction:reverse}

/* ---------- Rustig ---------- */
html[data-beleving=rustig] #hero,
html[data-beleving=rustig] .ticker,
html[data-beleving=rustig] .band,
html[data-beleving=rustig] .grid > .kreet,
html[data-beleving=rustig] .grid > .film,
html[data-beleving=rustig] .sec--films,
html[data-beleving=rustig] .sec--beweging{display:none!important}
html[data-beleving=rustig] .rust-hero{display:block;padding-block:clamp(120px,14vw,170px) clamp(48px,7vw,96px)}
.rust-hero__in{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center}
.rust-hero__podium{position:relative;height:min(72vh,760px);min-height:320px}
.rust-hero__werk{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity 1.8s ease,visibility 0s linear 1.8s}
.rust-hero__werk.on{opacity:1;visibility:visible;transition:opacity 1.8s ease,visibility 0s}
.rust-hero__werk img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;box-shadow:var(--werk-schaduw);border-radius:var(--radius-img)}
@media (max-width:860px){.rust-hero__podium{height:min(62vh,560px)}}
@media (prefers-reduced-motion:reduce){.rust-hero__werk,.rust-hero__werk.on{transition:none}}
.rust-hero__tekst{display:flex;flex-direction:column;align-items:flex-start;gap:18px;max-width:34ch}
.rust-hero__kop{margin:0;font-size:clamp(30px,3.4vw,52px)!important;line-height:1.05}
.rust-hero__bij{font-size:13px;margin:10px 0 0;letter-spacing:.04em}
@media (max-width:860px){.rust-hero__in{grid-template-columns:minmax(0,1fr)}.rust-hero__tekst{max-width:none}}
/* letters: een klassieke schreef voor koppen en titels, de schreefloze voor tekst en kleine kapitalen voor labels.
   Instrument Serif hoort bij dezelfde familie als de Instrument Sans van de lopende tekst. */
html[data-beleving=rustig]{--serif:'Instrument Serif','Iowan Old Style','Times New Roman',serif}
html[data-beleving=rustig] :is(.disp,.kreet__t,.kreet-boem span,.kaart__titel,.tegel__naam,.bericht__titel,.welkom__kop){font-family:var(--serif)!important;font-weight:400!important;text-transform:none!important;letter-spacing:-.012em!important;line-height:1.02}
html[data-beleving=rustig] :is(.disp,.kaart__titel,.tegel__naam,.bericht__titel) em{font-style:italic;color:inherit}
html[data-beleving=rustig] :is(.sec-head h1,.sec-head h2){font-size:clamp(42px,4.8vw,76px)!important;line-height:1}
html[data-beleving=rustig] .rust-hero__kop{font-size:clamp(48px,5.4vw,88px)!important;line-height:.98;letter-spacing:-.018em!important}
html[data-beleving=rustig] .kaart__titel{font-size:clamp(20px,1.6vw,24px)!important;line-height:1.1}
html[data-beleving=rustig] .tegel__naam{font-size:clamp(28px,2.6vw,40px)!important}
html[data-beleving=rustig] :is(.nav__links a,.eyebrow,.btn,.thema__knop,.cartbtn,.linkknop,.more,.rust-hero__bij,.kruimels){font-family:var(--body);font-weight:500;text-transform:uppercase;letter-spacing:.16em;font-size:11.5px}
html[data-beleving=rustig] .eyebrow{color:var(--muted,inherit);opacity:.75}
html[data-beleving=rustig] .linkknop{text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:4px}
html[data-beleving=rustig] .rust-hero__tekst{gap:22px;max-width:30ch}
html[data-beleving=rustig] .rust-hero__tekst .lead{font-size:clamp(16px,1.2vw,18px);line-height:1.6;opacity:.78;max-width:34ch}
html[data-beleving=rustig] .rust-hero__bij{font-size:10.5px;opacity:.55;margin-top:14px}
html[data-beleving=rustig] .sec-head .muted{font-family:var(--serif);font-style:italic;font-size:18px;letter-spacing:0;text-transform:none}
html[data-beleving=rustig] .sec{padding-block:clamp(72px,10vw,140px)}
html[data-beleving=rustig] .sec-head{border-bottom:1px solid var(--line);padding-bottom:18px}
html[data-beleving=rustig] .grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr))!important;gap:clamp(36px,5vw,72px)!important}
html[data-beleving=rustig] .kaart__media{background:transparent}
html[data-beleving=rustig] .btn{border-radius:2px}

/* ---------- Heftig ---------- */
html[data-beleving=heftig] .hero__media,html[data-beleving=heftig] .hero__poster{filter:contrast(1.18) saturate(1.35)}
html[data-beleving=heftig] .btn{border-radius:0;font-weight:800;text-transform:uppercase;letter-spacing:.04em}

/* ---------- werk bij de beleving: Rustig toont ingetogen werk, Heftig het uitgesproken werk ---------- */
.zaal-set{display:none}
html:not([data-beleving=rustig]):not([data-beleving=heftig]) .zaal-set[data-voor=levendig],
html[data-beleving=rustig] .zaal-set[data-voor=rustig],
html[data-beleving=heftig] .zaal-set[data-voor=heftig]{display:grid}

/* ---------- het overzicht als verhaal: rijen tussen het werk ---------- */
.tussen{grid-column:1/-1}
[data-rest]{display:none!important}
.verhaal{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:center;padding-block:clamp(28px,5vw,72px);border-block:1px solid var(--line)}
.verhaal__werk{display:flex;justify-content:center;min-width:0}
.verhaal__werk img{display:block;width:auto;height:auto;max-width:100%;max-height:min(62vh,560px);box-shadow:var(--werk-schaduw);border-radius:var(--radius-img)}
/* tekstkolom: vaste linkerlijn, nooit over het beeld heen; de kop schaalt mee met de kolom zodat woorden heel blijven */
.verhaal__tekst{min-width:0;width:100%;max-width:560px;justify-self:start;display:flex;flex-direction:column;align-items:flex-start;gap:14px;container-type:inline-size}
.verhaal__titel{margin:0;font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.03em;line-height:.9;font-size:clamp(22px,8.2cqi,60px);overflow-wrap:normal;word-break:keep-all;hyphens:manual;text-wrap:balance}
.verhaal__titel a{color:inherit;text-decoration:none}
.verhaal__citaat{margin:0;max-width:44ch;font:400 clamp(15px,1.15vw,18px)/1.55 var(--body);letter-spacing:0;text-transform:none;opacity:.82}
.verhaal__prijs{margin:0;font-weight:600;font-size:15px}
.verhaal:nth-of-type(even) .verhaal__werk{order:2}
@media (max-width:760px){.verhaal{grid-template-columns:minmax(0,1fr)}.verhaal:nth-of-type(even) .verhaal__werk{order:0}}
.regel-rij{padding-block:clamp(18px,2.6vw,30px);border-block:1px solid var(--line);text-align:center}
.regel-rij p{margin:0 auto;max-width:72ch;font-size:clamp(15px,1.2vw,17px);line-height:1.5;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;align-items:baseline}
.regel-rij .linkknop{white-space:nowrap;color:var(--accent)}
html[data-beleving=rustig] .verhaal__titel{font-family:var(--serif);font-weight:400;text-transform:none;letter-spacing:-.012em;line-height:1;font-size:clamp(26px,9cqi,64px)}
html[data-beleving=rustig] .verhaal__citaat{font-family:var(--serif);font-style:italic;font-size:clamp(17px,1.3vw,20px);line-height:1.45}
html[data-beleving=rustig] .regel-rij p{font-family:var(--serif);font-style:italic;font-size:clamp(18px,1.5vw,22px)}
html[data-beleving=heftig] .verhaal__titel{font-size:clamp(24px,9.5cqi,76px);line-height:.86;letter-spacing:-.04em}
html[data-beleving=heftig] .verhaal{border-block:6px solid var(--fg)}
html[data-beleving=heftig] .regel-rij{background:var(--accent);color:var(--bg);border:0;padding-inline:20px}
html[data-beleving=heftig] .regel-rij p{font:800 clamp(14px,1.3vw,18px)/1.3 var(--display);text-transform:uppercase;letter-spacing:.02em;max-width:none}
html[data-beleving=heftig] .regel-rij .linkknop{color:var(--bg);text-decoration:underline}

/* ---------- taal en beleving samen in een klein menu ---------- */
.nav__right .thema__knop{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 12px 0 10px;border-width:1.5px;font:700 12px/1 var(--body);letter-spacing:.08em;text-transform:uppercase}
.thema__stip{width:14px;height:14px;border-radius:999px;background:linear-gradient(135deg,var(--bg) 0 50%,var(--accent) 50% 100%);box-shadow:0 0 0 1.5px var(--fg)}
.thema__keuzes button{display:inline-flex;align-items:center;gap:7px}
.thema__keuzes button::before{content:"";width:12px;height:12px;border-radius:999px;background:linear-gradient(135deg,var(--a) 0 55%,var(--b) 55% 100%);box-shadow:0 0 0 1px var(--line-strong)}
.thema__rij--taal .talen{height:auto;padding:0;border:0;gap:4px}
.thema__rij--taal .talen a{min-width:40px;height:32px;border:1.5px solid var(--line-strong)}
.nav__right > .talen{display:none}

.nav__right .thema__lijst{right:0}
.welkom__hint{flex-basis:100%;margin:6px 0 0;font-size:13.5px;opacity:.75;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.welkom__hint .thema__stip{display:inline-block;width:15px;height:15px;vertical-align:middle}
/* keuzemenu strak: twee vaste kolommen, alle namen op dezelfde lijn */
.thema__lijst{min-width:300px;padding:18px 22px}
.thema__keuzes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 20px}
.thema__keuzes button{justify-self:start;font-size:15px;padding:3px 0}
.thema__rij--taal .talen{display:grid;grid-template-columns:repeat(3,44px);gap:8px}
.thema__rij--taal .talen a{min-width:0;width:44px}

/* vrijstaand: een los object zonder achtergrond, op de ondergrond van de beleving */
.kaart__media--vrijstaand{background:transparent;overflow:visible;padding:2%}
.kaart__media--vrijstaand img{object-fit:contain}
html:not([data-hover=uit]) .kaart:hover .kaart__media--vrijstaand{box-shadow:none}
.detail__img--vrij{background:transparent;box-shadow:none;overflow:visible}
.detail__img--vrij img{object-fit:contain}
.verhaal--vrij .verhaal__werk img{box-shadow:none;border-radius:0;max-height:min(70vh,640px)}
/* de schaduw van een los object mag buiten het beeld vallen (een img knipt standaard af) */
.detail__img--vrij img,.kaart__media--vrijstaand img,.verhaal--vrij .verhaal__werk img{overflow:visible}
.verhaal--vrij .verhaal__werk{overflow:visible}

/* betaalwijzen: slotje + merktekens */
.betaal{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:4px;font:500 12px/1.3 var(--body);color:var(--muted)}
.betaal__slot{display:inline-flex;align-items:center;gap:6px;letter-spacing:.02em}
.betaal__rij{display:flex;flex-wrap:wrap;gap:6px}
.betaal__m{display:inline-flex;align-items:center;height:26px;padding:0 9px;border:1px solid var(--line-strong);border-radius:6px;font:700 11px/1 var(--body);letter-spacing:.03em;color:var(--fg);text-transform:none;background:transparent}
.betaal__m--beeld{padding:0;border:0;width:auto;height:26px;border-radius:4px}
.betaal--voet{margin-top:14px}
html[data-beleving=rustig] .betaal__m{font-weight:600;letter-spacing:.05em}

/* afrekenen: vier vlakken, elk veld met een eigen controle */
.aanvraag .blok{margin:0;padding:clamp(18px,2.4vw,28px);border:1.5px solid var(--line-strong);border-radius:var(--radius-img,14px);display:flex;flex-direction:column;gap:16px;min-width:0}
.aanvraag .blok--licht{border-style:dashed}
.blok__kop{display:flex;align-items:center;gap:10px;padding:0 8px;margin-left:-8px;font:700 13px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--fg)}
.blok__kop small{font-weight:400;letter-spacing:.02em;text-transform:none;color:var(--muted)}
.blok__nr{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--fg);color:var(--bg);font-size:12px;letter-spacing:0}
.adres-rij{display:grid;gap:16px;grid-template-columns:minmax(0,2.2fr) minmax(0,1fr) minmax(0,1fr)}
.veld__in{position:relative}
.veld__ok{position:absolute;right:14px;top:50%;width:20px;height:20px;margin-top:-10px;border-radius:50%;background:var(--accent);opacity:0;transform:scale(.6);transition:opacity .2s,transform .2s;pointer-events:none}
.veld__ok::after{content:"";position:absolute;left:7px;top:4px;width:5px;height:9px;border:solid var(--on-accent);border-width:0 2px 2px 0;transform:rotate(45deg)}
.veld.is-goed .veld__ok{opacity:1;transform:none}
.veld.is-goed .inp{padding-right:44px}
.veld.is-fout .inp,.veld.is-fout .sel{border-color:var(--fg);border-style:dashed}
.veld__fout{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--fg);min-height:0}
.veld__fout::before{content:"!";flex:none;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--fg);color:var(--bg);font:800 12px/1 var(--body)}
.veld__fout:empty{display:none}
.veld__hulp{font-size:12.5px;color:var(--muted)}
.veld.is-fout .veld__hulp{display:none}
@media (max-width:600px){.adres-rij{grid-template-columns:1fr 1fr}.adres-rij [data-veld=straat]{grid-column:1/-1}}
/* een vlak dat klaar is zakt af: ingevuld blijft leesbaar, de rest wordt stil */
.aanvraag .blok{transition:opacity .35s,border-color .35s,background .35s}
.aanvraag .blok.is-klaar{border-style:dashed;border-color:var(--line)}
.aanvraag .blok .veld label,.aanvraag .blok .blok__kop,.aanvraag .blok .inp,.aanvraag .blok .sel,.aanvraag .blok .veld__ok{transition:opacity .35s,border-color .35s}
.aanvraag .blok.is-klaar .veld label,.aanvraag .blok.is-klaar .blok__kop{opacity:.45}
.aanvraag .blok.is-klaar .inp,.aanvraag .blok.is-klaar .sel{border-color:var(--line)}
.aanvraag .blok.is-klaar .veld.is-goed .veld__ok{opacity:.6}
.aanvraag .blok.is-klaar .blok__nr{background:var(--accent);color:transparent;position:relative}
.aanvraag .blok.is-klaar .blok__nr::after{content:"";position:absolute;left:8px;top:5px;width:6px;height:11px;border:solid var(--on-accent);border-width:0 2px 2px 0;transform:rotate(45deg)}
.aanvraag .blok.is-klaar .veld__hulp{display:none}
@media (prefers-reduced-motion:reduce){.aanvraag .blok{transition:none}}

/* afrekenen: het werk dat bijna van jou is */
.bijna:empty{display:none}
.bijna{display:flex;flex-direction:column;gap:10px;padding-bottom:18px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.bijna__stapel{position:relative;display:grid;grid-template:100%/100%;place-items:center;height:clamp(220px,24vw,300px);margin:6px 0 10px}
.bijna__werk{grid-area:1/1;min-height:0;max-width:78%;max-height:calc(100% - 14px);width:auto;height:auto;object-fit:contain;border-radius:var(--radius-img,6px);box-shadow:0 22px 44px rgba(0,0,0,.34),0 4px 10px rgba(0,0,0,.18);animation:bijnaIn .9s cubic-bezier(.2,.8,.2,1) both;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.bijna__werk--0{z-index:3;animation-delay:.15s}
.is-meer .bijna__werk--0{transform:translateY(6px)}
.bijna__werk--1{z-index:2;max-width:64%;transform:translate(-16%,-4%) rotate(-7deg);opacity:.92;animation-delay:.05s}
.bijna__werk--2{z-index:1;max-width:60%;transform:translate(16%,-6%) rotate(6deg);opacity:.85}
.bijna:hover .bijna__werk--0{transform:translateY(-6px) rotate(-1deg)}
.bijna__kop{margin:0;font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.02em;line-height:.95;font-size:clamp(26px,2.6vw,38px)}
html[data-beleving=rustig] .bijna__kop{font-family:var(--serif);text-transform:none;font-weight:400;letter-spacing:-.01em;font-style:italic;font-size:clamp(30px,3vw,44px)}
.bijna__tekst{margin:0;font-size:15px;line-height:1.5;color:var(--muted)}
.bijna__tekst b{color:var(--fg);font-weight:700}
@keyframes bijnaIn{from{opacity:0;transform:translateY(24px) rotate(-3deg) scale(.96)}}
@media (prefers-reduced-motion:reduce){.bijna__werk{animation:none;transition:none}}

/* ---------- kop: beleving met naam, streepje, rond mandje dat bij de muis uitschuift ---------- */
.nav__right{gap:14px}
.nav__streep{flex:none;width:1.5px;height:26px;background:var(--fg);opacity:.25}
.nav__right .thema__knop{height:40px;padding:0 14px 0 8px;gap:8px;border-width:1.5px;font-size:11.5px;letter-spacing:.08em;white-space:nowrap}
.nav__right .thema__stip{flex:none;width:22px;height:22px}
.thema__pijl{flex:none;opacity:.7;transition:transform .25s}
.thema__knop[aria-expanded=true] .thema__pijl{transform:rotate(180deg)}
.cartbtn{height:44px;min-width:44px;padding:0;gap:0;border-radius:999px;justify-content:center;box-sizing:border-box;transition:padding .35s cubic-bezier(.2,.8,.2,1),background .3s,color .3s}
.cartbtn span{display:inline-block;max-width:0;opacity:0;overflow:hidden;white-space:nowrap;transition:max-width .35s cubic-bezier(.2,.8,.2,1),opacity .25s,margin .35s}
.cartbtn b{position:absolute;top:-6px;right:-8px;min-width:20px;height:20px;padding:0 5px;font-size:11px;box-sizing:border-box}
@media (hover:hover) and (pointer:fine){
  .cartbtn:hover,.cartbtn:focus-visible{padding:0 18px}
  .cartbtn:hover span,.cartbtn:focus-visible span{max-width:72px;opacity:1;margin-left:9px}
}
@media (max-width:860px){.cartbtn span{display:none}}
@media (max-width:600px){
  .nav__logo img{height:36px}
  .nav__right{gap:9px}
  .nav__streep{height:22px}
  .nav__right .thema__knop{height:38px;padding:0 10px 0 6px;gap:6px;font-size:10.5px;letter-spacing:.05em}
  .nav__right .thema__stip{width:20px;height:20px}
  .cartbtn{height:40px;min-width:40px}
  .cartbtn b{top:-6px;right:-7px;min-width:18px;height:18px;font-size:10px}
  .nav__toggle{width:36px}
}
html[data-beleving=rustig] .nav__right .thema__knop{letter-spacing:.12em}

/* ---------- Heftig: kleur en letters vol, het werk in rust. Opmaak a = Galerie, c = Spread (Beheer > Beleving) ---------- */
html[data-beleving=heftig] .sec{border-top:0}
html[data-beleving=heftig] .sec-head h1{font-size:clamp(44px,6.5vw,104px);line-height:.86;letter-spacing:-.045em}
html[data-beleving=heftig] .sec-head h2{font-size:clamp(28px,3vw,44px);line-height:.9;letter-spacing:-.035em}
html[data-beleving=heftig] .ticker{height:56px}
/* werken kleiner, vrij op de kleur, met veel lucht */
html[data-beleving=heftig] .grid{column-gap:clamp(20px,3vw,48px);row-gap:clamp(40px,5vw,72px)}
html[data-beleving=heftig] .grid:not(.grid--3){grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr))}
html[data-beleving=heftig] .kaart__media{background:transparent;overflow:visible}
html[data-beleving=heftig] .kaart__media,html[data-beleving=heftig] .kaart:hover .kaart__media{box-shadow:none!important}
/* het werk zelf krijgt de schaduw (box-shadow op het beeld, geen filter: een filterlaag geeft in Safari een lichte rand om het vlak) */
html[data-beleving=heftig] .kaart__media:not(.kaart__media--vrijstaand) img{width:auto;height:auto;max-width:84%;max-height:84%;object-fit:contain;box-shadow:0 1px 3px rgba(11,11,14,.16),0 24px 34px -16px rgba(11,11,14,.45);transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s cubic-bezier(.2,.8,.2,1)}
html[data-beleving=heftig] .kaart__media:not(.kaart__media--vrijstaand) video{inset:8%;width:84%;height:84%;object-fit:contain;background:transparent}
@media (hover:hover) and (pointer:fine){
  html[data-beleving=heftig]:not([data-hover=uit]) .kaart:hover .kaart__media{transform:none}
  html[data-beleving=heftig]:not([data-hover=uit]) .kaart:hover .kaart__media:not(.kaart__media--vrijstaand) img{box-shadow:0 2px 4px rgba(11,11,14,.18),0 34px 44px -18px rgba(11,11,14,.55)}
  html[data-beleving=heftig] .kaart:hover .kaart__media video{transform:none}
  html[data-beleving=heftig]:not([data-hover=uit]) .kaart:hover .kaart__media img{transform:translateY(-6px)}
  html[data-beleving=heftig][data-hover=uit] .kaart:hover .kaart__media img{transform:none}
}
@media (max-width:640px){html[data-beleving=heftig] .grid.grid--4{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;row-gap:36px}html[data-beleving=heftig] .hero .btn{height:48px;padding:0 18px;font-size:13px}}

/* hero: geen scherm vol film, maar een vlak op het stramien */
html[data-beleving=heftig] .hero{--fg:unset;--bg:unset;--line-strong:unset;color:var(--fg);height:auto;min-height:0;max-height:none;overflow:visible;display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);column-gap:clamp(24px,4vw,64px);align-items:end;padding-block:calc(80px + clamp(24px,4vw,56px)) clamp(48px,6vw,88px);padding-inline:max(var(--gutter),calc((100% - var(--wrap)) / 2 + var(--gutter)))}
html[data-beleving=heftig] .hero__media,html[data-beleving=heftig] .hero__poster{grid-area:1/1;position:relative;inset:auto;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;transform:none!important;filter:none;background:#050507;will-change:opacity}
html[data-beleving=heftig] .hero__shade{display:none}
html[data-beleving=heftig] .hero__body{grid-area:1/2;max-width:none;margin:0;padding:0;gap:22px}
html[data-beleving=heftig] .hero__kop{font-size:clamp(34px,4.2vw,62px);max-width:none;min-height:0;line-height:.9;letter-spacing:-.035em;color:var(--fg)}
html[data-beleving=heftig] .hero__kop .wit{color:inherit}
html[data-beleving=heftig] .hero__lead{color:var(--fg);font-size:clamp(16px,1.3vw,19px);font-weight:400;max-width:40ch}
html[data-beleving=heftig] .hero__onder{flex-direction:column;align-items:flex-start;gap:18px}
html[data-beleving=heftig] .hero .btn--ghost{border-color:var(--fg)}
html[data-beleving=heftig] .hero .playtag{background:transparent;border:1.5px solid var(--fg);-webkit-backdrop-filter:none;backdrop-filter:none;color:var(--fg)}
html[data-beleving=heftig] .hero .playtag__balk{background:var(--line)}
html[data-beleving=heftig] .hero .playtag__balk i{background:var(--fg)}
@media (max-width:760px){
  html[data-beleving=heftig] .hero{grid-template-columns:minmax(0,1fr);padding-top:calc(80px + 12px)}
  html[data-beleving=heftig] .hero__body{grid-area:2/1;margin-top:32px}
}
/* c: Spread. Links een gekleurd vlak met het werk zwevend erin, rechts de kop */
@keyframes hf-zweef{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-16px) rotate(2deg)}}
@keyframes hf-draai{to{transform:rotate(360deg)}}
html[data-beleving=heftig][data-heftig=c] .hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(clamp(480px,48vw,760px),auto);column-gap:0;align-items:stretch;padding:80px 0 0}
html[data-beleving=heftig][data-heftig=c] .hero::before{content:"";grid-area:1/1;background:var(--accent)}
html[data-beleving=heftig][data-heftig=c] .hero::after{content:"";grid-area:1/1;place-self:center;width:min(76%,560px);aspect-ratio:1;border-radius:50%;border:2px dotted var(--on-accent);opacity:.45;animation:hf-draai 60s linear infinite;pointer-events:none}
html[data-beleving=heftig][data-heftig=c] .hero__media,html[data-beleving=heftig][data-heftig=c] .hero__poster{place-self:center;z-index:1;width:min(58%,400px);height:auto;aspect-ratio:1/1;box-shadow:0 30px 60px -24px rgba(5,5,7,.7);animation:hf-zweef 8s ease-in-out infinite}
html[data-beleving=heftig][data-heftig=c] .hero__body{align-self:end;padding-block:clamp(40px,6vw,96px) clamp(40px,5vw,80px);padding-inline:clamp(28px,5vw,80px) max(var(--gutter),calc(100% - var(--wrap) / 2 + var(--gutter)))}
html[data-beleving=heftig][data-heftig=c] .hero__kop{font-size:clamp(40px,5.4vw,84px);line-height:.88}
@media (max-width:760px){
  html[data-beleving=heftig][data-heftig=c] .hero{grid-template-columns:minmax(0,1fr);grid-template-rows:min(110vw,480px) auto}
  html[data-beleving=heftig][data-heftig=c] .hero__body{grid-area:2/1;margin:0;padding:36px var(--gutter) 56px}
}
@media (prefers-reduced-motion:reduce){html[data-beleving=heftig][data-heftig=c] .hero::after,html[data-beleving=heftig][data-heftig=c] .hero__media,html[data-beleving=heftig][data-heftig=c] .hero__poster{animation:none}}

/* quotes van rand tot rand: de regels vullen de breedte (site.js meet ze) */
html[data-beleving=heftig] .band{padding-block:clamp(36px,5vw,72px);border:0;border-block:6px solid var(--fg)}
html[data-beleving=heftig] .band__in{max-width:none;padding-inline:var(--gutter);font-size:clamp(48px,11vw,180px);gap:0}
html[data-beleving=heftig] .band .disp{width:max-content;max-width:none;margin:0!important;transform:none!important;line-height:.86;letter-spacing:-.03em;color:var(--fg)}
html[data-beleving=heftig][data-heftig=c] .band{background:var(--fg);border:0}
html[data-beleving=heftig][data-heftig=c] .band .disp:first-child{color:var(--accent)}
html[data-beleving=heftig][data-heftig=c] .band .disp+.disp{color:var(--bg)}
.vol{display:none}
html[data-beleving=heftig] .vol{display:block;background:var(--accent);color:var(--on-accent);padding-block:clamp(40px,6vw,88px)}
.vol__t{margin:0;padding-inline:var(--gutter);font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.03em;line-height:.86;font-size:clamp(48px,11vw,180px)}
.vol-regel{display:block;width:max-content;white-space:nowrap}
.vol__onder{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px;margin-top:clamp(24px,3vw,40px);padding-inline:max(var(--gutter),calc((100% - var(--wrap)) / 2 + var(--gutter)))}
.vol__onder p{margin:0;max-width:52ch;font-size:clamp(16px,1.4vw,20px);line-height:1.45}
.vol .btn{background:var(--on-accent);border-color:var(--on-accent);color:var(--accent)}

/* ---------- zwevende vensters: zelf omhoog of omlaag te schuiven ---------- */
.welkom,.taalhint{translate:var(--sx,0px) var(--sy,0px)}
.schuifgreep{flex:none;display:flex;align-items:center;justify-content:center;width:28px;height:36px;cursor:move;touch-action:none;opacity:.55;color:inherit}
.schuifgreep:hover,.schuift .schuifgreep{opacity:1}
.schuift{transition:none!important;user-select:none}
@media (hover:hover) and (pointer:fine){.schuifbaar{cursor:grab}.schuifbaar :is(button,a,input,select,label){cursor:pointer}.schuift,.schuift *{cursor:grabbing!important}}
.welkom > .schuifgreep{position:absolute;top:4px;left:50%;transform:translateX(-50%);width:56px;height:24px}
.taalhint > .schuifgreep{margin-left:-10px;margin-right:-6px}

/* ---------- keuzemenu beleving en taal: zo breed als de inhoud, per beleving één regel ---------- */
.thema__lijst{min-width:0;width:max-content;max-width:min(420px,calc(100vw - 24px));padding:14px 16px;gap:0;display:grid;grid-template-columns:auto auto;column-gap:18px;row-gap:0}
.thema__rij{display:contents}
.thema__rij+.thema__rij{padding-top:0;border-top:0}
.thema__soort{align-self:center;padding:9px 0;font-size:10.5px;letter-spacing:.14em;white-space:nowrap}
.thema__keuzes{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center;padding:6px 0}
.thema__lijst > .thema__rij--taal{display:grid;grid-column:1/-1;grid-template-columns:subgrid;column-gap:18px;margin-top:6px;padding-top:4px;border-top:1px solid var(--line)}
.thema__keuzes button{font-size:14.5px;padding:3px 0;white-space:nowrap}
.thema__rij--taal .talen{display:grid;grid-template-columns:repeat(3,max-content);gap:6px;padding:8px 0}
.thema__rij--taal .talen a{width:auto;min-width:38px;height:28px;padding:0 8px;font-size:12px}
@media (max-width:600px){.thema__lijst,.nav__right .thema__lijst{position:fixed;left:auto;right:12px;top:70px;width:max-content;max-width:calc(100vw - 24px)}}

/* ---------- verhaalrij: werk en tekst samen naar het midden, het werk groter ---------- */
@media (min-width:761px){
  .verhaal{column-gap:clamp(32px,4.5vw,80px)}
  .verhaal__werk{justify-content:flex-end}
  .verhaal:nth-of-type(even) .verhaal__werk{justify-content:flex-start}
  .verhaal__tekst{justify-self:start;max-width:480px}
  .verhaal:nth-of-type(even) .verhaal__tekst{justify-self:end}
  .verhaal__werk img{max-height:min(76vh,720px)}
  .verhaal--vrij .verhaal__werk img{max-height:min(80vh,780px)}
}

/* ---------- binnenkomer: een vrijstaand werk zweeft in de hero (Beheer > Startpagina) ----------
   Geen filter voor de schaduw (Safari tekent daar lichte vlakken omheen), maar een eigen schaduw op de grond
   die kleiner en lichter wordt als het werk omhoog zweeft. */
.hero__object,.hero__objectlink{display:none}
@keyframes obj-zweef{0%,100%{transform:translateY(0) rotate(-1.2deg)}50%{transform:translateY(-3.2%) rotate(1.2deg)}}
@keyframes obj-grond{0%,100%{transform:translateX(-50%) scale(1);opacity:1}50%{transform:translateX(-50%) scale(.82);opacity:.62}}
:is(html[data-beleving=heftig][data-hero-object],html[data-beleving=levendig][data-hero-object]) .hero :is(.hero__media,.hero__poster,.hero__shade,.playtag){display:none!important}
:is(html[data-beleving=heftig][data-hero-object],html[data-beleving=levendig][data-hero-object]) .hero .hero__object{position:relative;justify-self:center;align-self:center;height:clamp(380px,46vw,720px);aspect-ratio:var(--obj-r,.53);z-index:1;translate:var(--ox,0px) var(--oy,0px);transition:translate .6s cubic-bezier(.2,.8,.2,1)}
:is(html[data-beleving=heftig][data-hero-object],html[data-beleving=levendig][data-hero-object]) .hero .hero__objectlink{align-items:center;gap:8px;font-weight:600;font-size:14px;letter-spacing:.04em;text-decoration:underline;text-underline-offset:4px;color:inherit}
.hero__object img{position:relative;display:block;width:100%;height:100%;object-fit:contain}
.hero__zweef{position:relative;display:block;width:100%;height:100%;animation:obj-zweef 7s ease-in-out infinite;transform-origin:50% 60%;will-change:transform}
.hero__grond{position:absolute;left:50%;bottom:-5%;width:74%;height:8%;border-radius:50%;background:radial-gradient(closest-side,var(--grond,rgba(11,11,14,.5)),transparent);transform:translateX(-50%);animation:obj-grond 7s ease-in-out infinite}
html[data-beleving=levendig] .hero__object{--grond:color-mix(in srgb,var(--accent) 55%,transparent)}
@media (prefers-reduced-motion:reduce){.hero__zweef,.hero__grond{animation:none}.hero__object{transition:none}}
/* Heftig a: het object in het linkervlak, zonder zwart kader */
html[data-beleving=heftig][data-hero-object] .hero .hero__object{grid-area:1/1}
/* Heftig c: het object zweeft in het gekleurde vlak, boven de cirkel */
html[data-beleving=heftig][data-heftig=c][data-hero-object] .hero .hero__object{height:clamp(380px,42vw,660px)}
/* Levendig: tekst links, het object groot rechts op de donkere grond */
html[data-beleving=levendig][data-hero-object] .hero{height:auto;min-height:min(92vh,900px);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(24px,4vw,64px);align-items:center;background:var(--bg);padding-block:calc(80px + clamp(24px,4vw,56px)) clamp(48px,6vw,88px);padding-inline:max(var(--gutter),calc((100% - var(--wrap)) / 2 + var(--gutter)))}
html[data-beleving=levendig][data-hero-object] .hero .hero__body{grid-area:1/1;padding:0;max-width:none;margin:0}
html[data-beleving=levendig][data-hero-object] .hero .hero__object{grid-area:1/2}
html[data-beleving=levendig][data-hero-object] .hero .hero__onder{flex-direction:column;align-items:flex-start;gap:18px}
@media (max-width:760px){
  :is(html[data-beleving=heftig][data-hero-object],html[data-beleving=levendig][data-hero-object]) .hero .hero__object{height:min(118vw,520px)}
  html[data-beleving=levendig][data-hero-object] .hero{grid-template-columns:minmax(0,1fr);padding-top:calc(80px + 16px)}
  html[data-beleving=levendig][data-hero-object] .hero .hero__object{grid-area:1/1}
  html[data-beleving=levendig][data-hero-object] .hero .hero__body{grid-area:2/1;margin-top:28px}
  html[data-beleving=heftig][data-heftig=c][data-hero-object] .hero .hero__object{height:min(100vw,420px)}
}

/* ---------- binnenkomer groot: het werk vult de linkerhelft en steekt ver over de balk en de zaal heen ----------
   De rest van de pagina staat er gewoon achter. Bij het scrollen schuift het werk sneller omhoog en krimpt het,
   zodat de zaal vrijkomt. site.js zet --p (0 bovenaan, 1 na een schermhoogte scrollen). */
@media (min-width:761px){
  :is(html[data-beleving=heftig][data-hero-object],html[data-beleving=levendig][data-hero-object]) .hero[data-object-stijl=groot]{--p:0;position:relative;z-index:6;display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);grid-template-rows:auto;column-gap:clamp(24px,4vw,64px);align-items:center;height:auto;min-height:max(540px,64vh);max-height:none;overflow:visible;padding:80px max(var(--gutter),calc((100% - var(--wrap)) / 2 + var(--gutter))) clamp(56px,8vh,104px)}
  :is(html[data-beleving=heftig][data-hero-object],html[data-beleving=levendig][data-hero-object]) .hero[data-object-stijl=groot]::before,:is(html[data-beleving=heftig][data-hero-object],html[data-beleving=levendig][data-hero-object]) .hero[data-object-stijl=groot]::after{display:none}
  :is(html[data-beleving=heftig][data-hero-object],html[data-beleving=levendig][data-hero-object]) .hero[data-object-stijl=groot] .hero__object{grid-area:auto;justify-self:auto;align-self:auto;position:absolute;top:clamp(10px,2vh,24px);left:max(var(--gutter),calc((100% - var(--wrap)) / 2 + var(--gutter)));width:calc((min(100%,var(--wrap)) - 2 * var(--gutter) - clamp(24px,4vw,64px)) / 2);height:auto;aspect-ratio:var(--obj-r,.6);margin:0;pointer-events:none;transform-origin:50% 0;transform:translateY(calc(var(--p) * -45vh)) scale(calc(1 - var(--p) * .35))}
  :is(html[data-beleving=heftig][data-hero-object],html[data-beleving=levendig][data-hero-object]) .hero[data-object-stijl=groot] .hero__body{grid-area:1/2;align-self:center;position:relative;margin:0;padding:clamp(24px,4vh,56px) 0 0;max-width:none}
  :is(html[data-beleving=heftig][data-hero-object],html[data-beleving=levendig][data-hero-object]) .hero[data-object-stijl=groot] .hero__onder{flex-direction:column;align-items:flex-start;gap:18px}
  :is(html[data-beleving=heftig][data-hero-object],html[data-beleving=levendig][data-hero-object]) .hero[data-object-stijl=groot] .hero__grond{display:none}
}
@media (min-width:761px) and (prefers-reduced-motion:reduce){:is(html[data-beleving=heftig][data-hero-object],html[data-beleving=levendig][data-hero-object]) .hero[data-object-stijl=groot] .hero__object{transform:none}}

/* ---------- invulvelden: voorbeeldtekst leesbaar, maar duidelijk lichter dan wat je zelf invult ---------- */
:root{--ph-a:.6}
html[data-thema=cyaan],html[data-thema=kauwgom]{--ph-a:.68}
html[data-thema=vuur],html[data-thema=elektrisch]{--ph-a:.76}
:is(input,textarea)::placeholder{color:color-mix(in srgb,var(--fg) calc(var(--ph-a) * 100%),transparent);opacity:1;font-weight:400}
.hero :is(input,textarea)::placeholder{color:rgba(244,242,238,.6)}

/* ---------- afrekenen: vlakken in plaats van kaders; de velden zelf lichter in het vlak ---------- */
.aanvraag .blok{border:0;background:color-mix(in srgb,var(--fg) 6%,transparent);padding:clamp(20px,2.6vw,32px)}
.aanvraag .blok--licht{background:color-mix(in srgb,var(--fg) 3%,transparent)}
.aanvraag .blok__legend{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.aanvraag .blok{position:relative;border-radius:20px}
.aanvraag .blok > .blok__kop{margin:0 0 4px;padding:0}
.aanvraag .blok .inp,.aanvraag .blok .sel{background-color:var(--bg);border-width:1.5px;border-color:var(--line-strong)}
.aanvraag .blok .inp:focus,.aanvraag .blok .sel:focus{border-color:var(--fg);outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--fg) 14%,transparent)}
.aanvraag .blok.is-klaar{border:0;background:color-mix(in srgb,var(--fg) 3%,transparent)}
.aanvraag .blok.is-klaar .inp,.aanvraag .blok.is-klaar .sel{border-color:var(--line)}

/* welkom: geen losse link meer, de knop over de volle breedte */
.welkom__onder{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
.welkom__onder .btn.welkom__klaar{width:100%;justify-content:center}
.welkom__hint{display:block}
.welkom__hint .thema__stip{margin:0 2px;vertical-align:-3px}

/* binnenkomer Groot: het werk loopt door tot de bovenrand, achter het menu langs; het menu blijft erboven leesbaar en klikbaar.
   Bovenaan is de menubalk doorzichtig, zodra je scrolt krijgt hij zijn vlak terug. */
@media (min-width:761px){
  html:is([data-beleving=heftig],[data-beleving=levendig])[data-hero-object]:has(.hero[data-object-stijl=groot]) .nav:not(.scrolled):not(.open){background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
  html:is([data-beleving=heftig],[data-beleving=levendig])[data-hero-object]:has(.hero[data-object-stijl=groot]) .nav:not(.scrolled):not(.open) .nav__links a{background:var(--bg);margin:-7px -12px;padding:7px 12px;border-radius:999px;transition:background .3s}
}

/* ---------- rustiger: de werken zijn de hoofdzaak ---------- */
/* teller (de zaal in cijfers): een stille regel onder de werken, geen blok */
.teller--raster{grid-column:1/-1;padding-block:clamp(4px,1vw,12px)}
.teller--zaal{grid-column:1/-1;margin:clamp(4px,1vw,12px) 0}
.teller__rij{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr))}
.teller__n{font-family:var(--display);font-variant-numeric:tabular-nums}
html[data-beleving=rustig] .teller__n{font-family:var(--serif);font-weight:400}
.teller__c{display:flex;min-width:0}
.teller__kop{margin:0 0 12px;font:600 11px/1 var(--body);letter-spacing:.18em;text-transform:uppercase;font-style:normal;color:var(--muted)}
.teller__rij{gap:0;border-block:1px solid var(--line)}
.teller__c{flex-direction:row;align-items:baseline;gap:10px;padding:14px 18px;border-left:1px solid var(--line)}
.teller__c:first-child{border-left:0;padding-left:0}
.teller__n{font-size:clamp(22px,2vw,30px);line-height:1;letter-spacing:-.01em;color:var(--fg)}
html[data-beleving=levendig] .teller__n{font-weight:700}
html[data-beleving=heftig] .teller__n{font-weight:800}
.teller__l{font:600 11px/1.2 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.teller__l::before{display:none}
.teller__c:first-child .teller__n{color:var(--accent)}
@media (max-width:720px){
  .teller__rij{grid-template-columns:repeat(2,minmax(0,1fr))}
  .teller__c{padding:12px 0;border-left:0}
  .teller__c:nth-child(n+3){border-top:1px solid var(--line)}
}
/* Heftig: quotes op een rustige maat, binnen het stramien */
html[data-beleving=heftig] .band{padding-block:clamp(32px,4vw,56px);border-block-width:3px}
html[data-beleving=heftig] .band__in{padding-inline:max(var(--gutter),calc((100% - var(--wrap)) / 2 + var(--gutter)));font-size:clamp(28px,4.6vw,72px)}
html[data-beleving=heftig] .band .disp{width:auto;white-space:normal}
html[data-beleving=heftig] .vol{padding-block:clamp(36px,4.5vw,64px)}
html[data-beleving=heftig] .vol__t{padding-inline:max(var(--gutter),calc((100% - var(--wrap)) / 2 + var(--gutter)));font-size:clamp(30px,5.2vw,84px)}
html[data-beleving=heftig] .vol-regel{white-space:normal;width:auto}
/* welkom op de telefoon: de knop Kijken maar staat altijd in beeld, onderaan het venster; de rest schuift erboven */
@media (max-width:760px){
  .welkom{padding-bottom:0;max-height:86svh}
  .welkom .welkom__kop{font-size:26px!important;margin-bottom:6px}
  .welkom__tekst{font-size:14px;line-height:1.45}
  .welkom__keuzes{margin:14px 0 12px}
  .stemming{padding:10px 14px}
  .stemming__knop b{font-size:18px}
  .welkom__onder{position:sticky;bottom:0;z-index:2;margin-inline:-16px;padding:12px 16px calc(14px + env(safe-area-inset-bottom,0px));gap:10px;background:var(--bg);box-shadow:0 -14px 22px -14px rgba(0,0,0,.35);transition:background .35s}
  .welkom__onder .btn.welkom__klaar{height:50px}
  .welkom__hint{margin:0;font-size:12px}
}
@media (max-width:760px) and (max-height:720px){.welkom__hint{display:none}}
/* Heftig: de regels tussen het werk gewoon leesbaar, als zin */
html[data-beleving=heftig] .regel-rij{color:var(--on-accent)}
html[data-beleving=heftig] .regel-rij p{font:500 clamp(16px,1.35vw,20px)/1.45 var(--body);text-transform:none;letter-spacing:0;max-width:72ch}
html[data-beleving=heftig] .regel-rij .linkknop{color:var(--on-accent);font-weight:700;text-decoration:underline;text-underline-offset:3px}
/* kortingscode */
.totalen [hidden]{display:none}
.totalen__korting{color:var(--fg)}
.totalen__korting span:last-child{white-space:nowrap;font-weight:600}
.korting{margin:0 0 18px}
.korting__vak{display:flex;gap:8px;align-items:stretch;margin-top:4px}
.korting__vak[hidden]{display:none}
.korting__vak .inp{height:44px;text-transform:uppercase;letter-spacing:.04em;min-width:0;flex:1}
.korting__vak .btn{flex:none;height:44px}
.korting__melding{margin:8px 0 0;font-size:14px;line-height:1.45;min-height:0}
.korting__melding:empty{display:none}
.korting__melding.is-goed{color:var(--fg);font-weight:600}
.korting__melding.is-goed .linkknop{margin-left:6px;font-weight:400}
.korting__melding.is-fout{color:var(--accent)}
.totalen .groot span:last-child{white-space:nowrap}
.totalen .groot{flex-wrap:wrap;row-gap:4px}.totalen .groot span:last-child{margin-left:auto}
@media (max-width:480px){.totalen .groot{font-size:22px}}
/* groot vrijstaand werk: een zachte schaduw, zodat het boven de balk en de zaal zweeft (de grondschaduw past hier niet) */
@media (min-width:761px){:is(html[data-beleving=heftig][data-hero-object],html[data-beleving=levendig][data-hero-object]) .hero[data-object-stijl=groot] .hero__object img{filter:drop-shadow(0 34px 44px rgba(0,0,0,.30)) drop-shadow(0 10px 14px rgba(0,0,0,.16))}}
/* stille inloglink in de voet (alleen zichtbaar in de browser van de beheerder) */
.foot__beheer[hidden]{display:none}
.foot__col .foot__beheer{display:inline-flex;align-items:center;gap:6px;font-weight:400;opacity:.55}
.foot__col .foot__beheer:hover{opacity:1}
/* afrekenen: een klaar vlak klapt in tot één regel */
.aanvraag .blok__dicht{display:none}
.aanvraag .blok.is-klaar{gap:8px;padding-top:clamp(16px,2vw,22px);padding-bottom:clamp(16px,2vw,22px)}
.aanvraag .blok.is-klaar > :not(legend):not(.blok__kop):not(.blok__dicht){display:none}
.aanvraag .blok.is-klaar .blok__dicht{display:flex;align-items:baseline;justify-content:space-between;gap:16px;width:100%;margin:0;padding:0;border:0;background:none;color:var(--fg);font:500 16px/1.4 var(--body);text-align:left;cursor:pointer}
.aanvraag .blok__samen{min-width:0;overflow-wrap:anywhere}
.aanvraag .blok__wijzig{flex:none;font-size:13px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.aanvraag .blok__dicht:hover .blok__wijzig,.aanvraag .blok__dicht:focus-visible .blok__wijzig{color:var(--fg)}
.aanvraag .blok__dicht:focus-visible{outline:2px solid var(--fg);outline-offset:6px;border-radius:4px}
.aanvraag .blok.is-klaar .blok__kop{opacity:.75}
/* kortingscode: duidelijk te vinden, maar rustiger dan de afrekenknop */
.korting__open{display:flex;align-items:center;gap:10px;width:100%;min-height:50px;padding:12px 16px;border:1.5px dashed var(--line-strong);border-radius:var(--radius);background:none;color:var(--fg);font:600 15px/1.25 var(--body);text-align:left;cursor:pointer;transition:border-color .2s,background .2s}
.korting__open[hidden]{display:none}
.korting__open:hover{border-style:solid;border-color:var(--fg)}
.korting__open:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
.korting__open svg{flex:none;color:var(--accent)}
.korting__plus{margin-left:auto;font-size:22px;font-weight:400;line-height:1}
/* feestje bij een werkende kortingscode */
.feest-doek{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:9999}
.feest-rustig{animation:feest-rustig 1.4s ease-out}
@keyframes feest-rustig{0%{opacity:0;transform:translateY(6px)}40%{opacity:1;transform:none;color:var(--accent)}100%{opacity:1}}
.feest-pop{animation:feest-pop .7s cubic-bezier(.3,1.6,.5,1)}
@keyframes feest-pop{0%{transform:scale(.8);opacity:0}60%{transform:scale(1.08);opacity:1;color:var(--accent)}100%{transform:scale(1)}}
.feest-pil{border-radius:999px;padding:6px 14px;margin:0 -14px;animation:feest-pil 1.6s linear;color:#fff}
.feest-pil .linkknop{color:inherit}
@keyframes feest-pil{
  0%{background:#FF2E9A;transform:rotate(0) scale(.9)}8%{background:#FF6A00;transform:rotate(-4deg) scale(1.12)}16%{background:#00E5FF;transform:rotate(4deg) scale(1.1);color:#0B0B0E}
  24%{background:#8A2BFF;transform:rotate(-5deg) translateX(-6px);color:#fff}32%{background:#FFE600;transform:rotate(5deg) translateX(6px);color:#0B0B0E}40%{background:#E6007E;transform:rotate(-3deg);color:#fff}
  48%{background:#7CFF00;transform:rotate(3deg) scale(1.06);color:#0B0B0E}56%{background:#FF2E9A;transform:rotate(-2deg);color:#fff}64%{background:#FF6A00;transform:rotate(2deg)}
  76%{background:#E6007E;transform:rotate(-1deg) scale(1.03)}88%{background:#FF2E9A;transform:rotate(0)}100%{background:transparent;transform:none;color:inherit}}
#inhoud.feest-schud{animation:feest-schud .8s cubic-bezier(.36,.07,.19,.97)}
@keyframes feest-schud{0%,100%{transform:none}10%{transform:translate(-9px,4px) rotate(-.6deg)}20%{transform:translate(10px,-5px) rotate(.7deg)}30%{transform:translate(-12px,3px) rotate(-.8deg)}40%{transform:translate(11px,5px) rotate(.6deg)}50%{transform:translate(-8px,-4px) rotate(-.4deg)}60%{transform:translate(7px,3px) rotate(.3deg)}70%{transform:translate(-5px,-2px)}80%{transform:translate(3px,2px)}90%{transform:translate(-2px,0)}}
.feest-stempel{position:fixed;left:50%;top:50%;z-index:10000;pointer-events:none;font:800 clamp(90px,22vw,300px)/1 var(--display);letter-spacing:-.04em;color:#FF2E9A;white-space:nowrap;transform:translate(-50%,-50%) rotate(-10deg);animation:feest-stempel 1.5s cubic-bezier(.2,1.4,.4,1) forwards}
@keyframes feest-stempel{0%{transform:translate(-50%,-50%) rotate(-30deg) scale(3);opacity:0}18%{transform:translate(-50%,-50%) rotate(-10deg) scale(1);opacity:1}70%{transform:translate(-50%,-50%) rotate(-8deg) scale(1.05);opacity:1}100%{transform:translate(-50%,-50%) rotate(-6deg) scale(1.3);opacity:0}}
@media (prefers-reduced-motion:reduce){.feest-pop,.feest-pil,.feest-rustig,#inhoud.feest-schud,.feest-stempel{animation:none}.feest-stempel{display:none}}

/* Levendig: de zaal in cijfers als smalle band in de accentkleur, over de volle vensterbreedte.
   De kleur loopt door tot de randen van het venster zonder dat de pagina breder wordt (schaduw + clip). Rustig en heftig blijven een stille regel. */
html[data-beleving=levendig] .teller--raster,
html[data-beleving=levendig] .teller--zaal,
html[data-beleving=levendig] .teller--home .wrap{--band:var(--accent);--op:var(--bg);background:var(--band);color:var(--op);box-shadow:0 0 0 100vmax var(--band);clip-path:inset(0 -100vmax);display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:clamp(18px,3vw,48px);padding-block:0;margin-block:clamp(18px,2.4vw,32px)}
html[data-beleving=levendig] .teller--home{padding-block:0}
html[data-beleving=levendig] .teller__kop{margin:0;color:var(--op);opacity:.8}
html[data-beleving=levendig] .teller__rij{border-block:0}
html[data-beleving=levendig] .teller__c{padding:13px 18px;border-left-color:color-mix(in srgb,var(--op) 28%,transparent)}
html[data-beleving=levendig] .teller__c:first-child{padding-left:18px}
html[data-beleving=levendig] .teller__n,html[data-beleving=levendig] .teller__c:first-child .teller__n{color:var(--op)}
html[data-beleving=levendig] .teller__l{color:var(--op);opacity:.85}
@media (max-width:720px){
  html[data-beleving=levendig] .teller--raster,
  html[data-beleving=levendig] .teller--zaal,
  html[data-beleving=levendig] .teller--home .wrap{grid-template-columns:minmax(0,1fr);padding-top:14px}
  html[data-beleving=levendig] .teller__rij{column-gap:18px}
  html[data-beleving=levendig] .teller__c,html[data-beleving=levendig] .teller__c:first-child{padding:11px 0}
  html[data-beleving=levendig] .teller__c:nth-child(n+3){border-top-color:color-mix(in srgb,var(--op) 28%,transparent)}
}

/* ---------- v21: kaarten op één lijn ----------
   Het label (x in reeks) staat los van het beeld in een vaste strook boven de titel; zonder label blijft de strook even hoog.
   Heftig: elk werk staat onderin een even groot vlak (4:5), op één grondlijn, nooit bijgesneden.
   Titel en regel onderaan lopen per rij gelijk (site.js zet per rij dezelfde hoogte). */
.kaart{gap:0}
.kaart__media{margin-bottom:12px}
.kaart__label{display:flex;align-items:center;min-height:26px;margin-bottom:8px}
.kaart__label .tag--reeks{position:static;height:26px;padding:0 10px 0 9px;font-size:11px;letter-spacing:.1em;background:color-mix(in srgb,var(--fg) 12%,transparent);color:var(--fg);backdrop-filter:none}
html[data-beleving=heftig] .kaart__label .tag--reeks{background:var(--fg);color:var(--bg)}
html[data-beleving=rustig] .kaart__label .tag--reeks{background:none;padding:0;color:var(--muted);letter-spacing:.14em}
.kaart__titel{margin-bottom:8px;overflow-wrap:normal;hyphens:manual}
.kaart__kort{margin-bottom:10px}
.kaart__meta{padding-top:0;align-items:flex-start;line-height:1.45}
/* regel onderaan altijd op één regel: collectie kort af als het echt niet past; is de kaart smal, dan vertelt het vormicoon de verhouding */
.kaart__meta{container-type:inline-size}
.kaart__vorm{flex-wrap:nowrap}
.kaart__vorm > span:not(.kaart__verhouding){white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.kaart__verhouding{flex:none}
@container (max-width:300px){.kaart__verhouding{display:none}}
html[data-beleving=heftig] .kaart__media{aspect-ratio:4/5;min-height:0;height:auto;flex:none;align-items:flex-end;padding:6% 0 0}
html[data-beleving=heftig] .kaart__media:not(.kaart__media--vrijstaand) img{max-width:100%;max-height:100%}
html[data-beleving=heftig] .kaart__media:not(.kaart__media--vrijstaand) video{inset:4.8% 0 0 0;width:100%;height:95.2%;object-position:50% 100%}
html[data-beleving=heftig] .kaart__media--vrijstaand{padding:6% 0 0}
html[data-beleving=heftig] .kaart__media--vrijstaand img{object-position:50% 100%}

/* ---------- v27: vrijstaande werken als carrousel in de hero, met icoontjes onder de knoppen ----------
   Meer vrijstaande werken bij één beleving (Beheer > Beeld bovenaan) = ze wisselen vanzelf (inslag of draaideur).
   Het werk blijft zweven en schudt wild als de muis erover gaat. site.js zet .is-carrousel, .is-mee, .is-nu en .is-weg. */
.hero__wissel,.hero__schud{position:relative;display:block;width:100%;height:100%}
.hero__schud{transform-origin:50% 38%}
.hero__schud.is-schud{animation:obj-schud .95s cubic-bezier(.36,.07,.19,.97)}
@keyframes obj-schud{0%{transform:none}8%{transform:translate(-3%,1.2%) rotate(-8deg) scale(1.05)}17%{transform:translate(3.2%,-1%) rotate(7deg) scale(1.06)}26%{transform:translate(-3%,1%) rotate(-7deg) scale(1.05)}35%{transform:translate(2.6%,-.6%) rotate(6deg) scale(1.04)}45%{transform:translate(-2%,.6%) rotate(-4.5deg) scale(1.03)}56%{transform:translate(1.4%,0) rotate(3deg) scale(1.02)}68%{transform:translate(-.8%,0) rotate(-1.8deg)}82%{transform:rotate(.8deg)}100%{transform:none}}
html:not([data-beleving=rustig])[data-hero-object] .hero.is-carrousel .hero__object.is-mee{display:block}
.hero.is-carrousel .hero__object.is-mee:not(.is-nu):not(.is-weg){visibility:hidden}
.hero.is-carrousel .hero__object.is-nu{z-index:2}
.hero__minis{display:none}
:is(html[data-beleving=heftig][data-hero-object],html[data-beleving=levendig][data-hero-object]) .hero.is-carrousel .hero__minis{display:flex;flex-wrap:wrap;align-items:flex-end;gap:6px 10px;margin-top:-4px}
.hero__mini{appearance:none;position:relative;display:grid;place-items:end center;min-width:34px;height:62px;margin:0;padding:4px 4px 10px;border:0;background:none;color:inherit;cursor:pointer}
.hero__mini[hidden]{display:none}
.hero__mini img{display:block;width:auto;height:44px;opacity:.38;filter:saturate(.4);transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .35s,filter .35s}
.hero__mini:hover img{opacity:.8;filter:none}
.hero__mini[aria-current=true] img{opacity:1;filter:none;transform:translateY(-4px) scale(1.12)}
.hero__mini:focus-visible{outline:2px solid currentColor;outline-offset:2px;border-radius:4px}
.hero__ministreep{position:absolute;left:4px;right:4px;bottom:0;height:3px;border-radius:2px;overflow:hidden;background:color-mix(in srgb,currentColor 18%,transparent)}
.hero__ministreep i{position:absolute;inset:0;background:currentColor;transform-origin:0 50%;transform:scaleX(0)}
.hero__mini[aria-current=true] .hero__ministreep i{animation:obj-tijd var(--tempo,6s) linear forwards}
.hero.is-rust .hero__mini[aria-current=true] .hero__ministreep i{animation-play-state:paused}
@keyframes obj-tijd{to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.hero__mini img{transition:none}.hero__mini[aria-current=true] .hero__ministreep i{animation:none;transform:scaleX(1)}.hero__schud.is-schud{animation:none}}

/* ---------- v28: de schaduw van het grote werk als vaste laag (geen filter per beeldje), en een zachte wiggle ---------- */
.hero__schaduw{display:none;position:absolute;pointer-events:none}
@media (min-width:761px){
  :is(html[data-beleving=heftig][data-hero-object],html[data-beleving=levendig][data-hero-object]) .hero[data-object-stijl=groot] .hero__schaduw{display:block}
  :is(html[data-beleving=heftig][data-hero-object],html[data-beleving=levendig][data-hero-object]) .hero.heeft-schaduwlaag[data-object-stijl=groot] .hero__object img{filter:none}
}
.hero__schud.is-schud-zacht{animation:obj-wiggle .7s cubic-bezier(.36,.07,.19,.97)}
@keyframes obj-wiggle{0%,100%{transform:none}20%{transform:rotate(-2.5deg)}45%{transform:rotate(2deg)}70%{transform:rotate(-1.2deg)}88%{transform:rotate(.5deg)}}
@media (prefers-reduced-motion:reduce){.hero__schud.is-schud-zacht{animation:none}}

/* vrijstaand werk op de werkpagina: de schaduw pas zetten als het beeld echt getekend is. Sommige browsers (Safari)
   tekenen een schaduwfilter op een beeld dat nog laadt anders niet, tot er iets aan het venster verandert. */
/* v52: vrijstaand werk overal als los object: de schaduw zit in het beeld zelf (beeld.php, vrij-zN.png (BR_VRIJ_SCHADUW)), dus geen
   CSS-schaduw, geen filter, geen vlak, geen afgeronde hoeken. Een filter gaf in Safari afgeknipte schaduwen. */
img.is-vrij{box-shadow:none!important;border-radius:0!important;background:transparent!important;object-fit:contain!important;filter:none!important}
:is(.bericht__media,.tegel,.rust-hero__werk,.verhaal__werk,.kaart__media):has(> img.is-vrij){background:transparent;box-shadow:none}
html:not([data-hover=uit]) .kaart:hover .kaart__media:has(> img.is-vrij){box-shadow:none}
.room__art--vrij{background:transparent!important;box-shadow:none!important;border:0!important;outline:0!important;padding:0!important}
.room__art--vrij::after{display:none}
.room__art--vrij img{position:absolute;max-width:none;object-fit:fill!important}
.regel img.is-vrij{background:transparent}
/* een heel staand vrijstaand werk (bijvoorbeeld een schedel van 1:2) mag het vierkante vlak niet oprekken: anders
   lopen de titels in die rij niet meer op één lijn */
.kaart__media--vrijstaand{min-height:0}
.kaart__media--vrijstaand img{width:100%;height:100%;min-height:0;max-height:100%}
/* filter: vier kolommen, elk een uitklapmenu in dezelfde vorm als Aanbevolen; de categorie staat erop, de keuze ernaast */
.zoeker__kolommen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:10px}
.zoeker__kol{position:relative;min-width:0}
.zoeker__open{width:100%;display:flex;align-items:center;gap:8px;height:38px;padding:0 12px 0 14px;border:2px solid var(--line-strong);border-radius:var(--radius);background:transparent;color:var(--fg);font:inherit;cursor:pointer;text-align:left;transition:border-color .2s,background .2s,color .2s}
.zoeker__open:hover,.zoeker__kol.is-open .zoeker__open{border-color:var(--fg)}
.zoeker__cat{flex:none;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.zoeker__open b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.zoeker__pijl{flex:none;transition:transform .25s}
.zoeker__kol.is-open .zoeker__pijl{transform:rotate(180deg)}
.zoeker__kol.is-gekozen .zoeker__open{background:var(--fg);border-color:var(--fg);color:var(--bg)}
.zoeker__kol.is-gekozen .zoeker__cat{color:inherit;opacity:.65}
.zoeker__lijst{position:absolute;left:0;top:calc(100% + 6px);z-index:15;min-width:100%;width:max-content;max-width:min(340px,calc(100vw - 32px));max-height:min(60vh,420px);overflow:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:2px;padding:6px;background:var(--bg);border:2px solid var(--fg);border-radius:calc(var(--radius) + 4px);box-shadow:0 18px 40px -14px rgba(0,0,0,.35)}
.zoeker__lijst[hidden]{display:none}
.zoeker__lijst--meer{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:min(360px,calc(100vw - 32px))}
.zoeker__kol.is-rechts .zoeker__lijst{left:auto;right:0}
.zoeker__lijst .chip{width:100%;justify-content:flex-start;height:36px;border-color:transparent;border-radius:max(0px,calc(var(--radius) - 2px))}
.zoeker__lijst .chip:hover{background:transparent;color:var(--fg);border-color:var(--line-strong)}
.zoeker__lijst .chip.on{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.zoeker__wis{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:12px 0 0}
.zoeker__wis[hidden]{display:none}
@media (max-width:760px){.zoeker__kolommen{grid-template-columns:repeat(2,minmax(0,1fr))}.zoeker__kol:nth-child(even) .zoeker__lijst{left:auto;right:0}}
/* zoeken, Aanbevolen en de vier menu's: één hoogte, één lettertype, strak onder elkaar */
.zoeker .zoeker__zoek,.zoeker .zoeker__sort,.zoeker .zoeker__open{height:44px}
.zoeker .zoeker__sort{padding:0 42px 0 16px;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background-position:right 14px center}
.zoeker__lijst{border-radius:min(var(--radius),18px)}
.zoeker__lijst .chip{border-radius:min(var(--radius),12px)}
/* onderhoud (v39): balk onderin als bestellen even dicht is, of voor de beheerder als de site in onderhoud staat */
.onderhoudbalk{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;padding:14px clamp(16px,4vw,48px) calc(14px + env(safe-area-inset-bottom,0px));background:#0B0B0E;color:#F4F2EE;font-family:var(--body);font-size:15px;line-height:1.4;text-align:center;box-shadow:0 -10px 30px -12px rgba(0,0,0,.45)}
.onderhoudbalk b{font-weight:600}
.onderhoudbalk--beheer{background:#FF2E9A;color:#0B0B0E}
.onderhoudbalk__form{margin:0;display:inline-flex}
.onderhoudbalk__knop{appearance:none;border:0;border-radius:999px;padding:9px 16px;background:#0B0B0E;color:#F4F2EE;font:600 14px/1 var(--body);cursor:pointer}
.onderhoudbalk__knop:hover{background:#2a2a30}.onderhoudbalk__knop:focus-visible,.onderhoudbalk__link:focus-visible{outline:2px solid #0B0B0E;outline-offset:3px}
.onderhoudbalk__link{color:inherit;font-weight:600;text-decoration:underline;text-underline-offset:3px}
@media (max-width:600px){.onderhoudbalk--beheer{gap:8px 14px;padding-top:10px;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));font-size:14px}.onderhoudbalk--beheer .onderhoudbalk__stip,.onderhoudbalk__meer{display:none}.onderhoudbalk--beheer>span:not(.onderhoudbalk__stip){flex-basis:100%}}
.onderhoudbalk__stip{flex:none;width:10px;height:10px;border-radius:50%;background:#FF2E9A;animation:ondknip 1.6s ease-in-out infinite}
.onderhoudbalk--beheer .onderhoudbalk__stip{background:#0B0B0E}
@keyframes ondknip{50%{opacity:.25}}
body:has(.onderhoudbalk){padding-bottom:64px}
@media (prefers-reduced-motion:reduce){.onderhoudbalk__stip{animation:none}}
.btn[aria-disabled="true"]{opacity:.55;pointer-events:none;cursor:not-allowed}