/* V37 · neutraal donker (Sem, 5 nov): minder blauw, en de opbouw van Filmbox. Grijstinten per pagina via html[data-toon]. */
html{background:#141517}
html[data-shot]{background:#f0f}
html[data-toon="1"]{--g1:#0F1012;--g2:#17181B;--g3:#1F2023;--gv:#26272B}
html[data-toon="2"]{--g1:#17181A;--g2:#1F2023;--g3:#27282C;--gv:#2D2E32}
html[data-toon="3"]{--g1:#1C1D20;--g2:#242528;--g3:#2C2D31;--gv:#34353A}
html[data-toon="6"]{--g1:#131416;--g2:#1B1C1F;--g3:#232428;--gv:#2A2B2F}
:root{--verloop:radial-gradient(115% 120% at 92% 100%,#A8ADB0 0%,#7F878C 16%,#50585E 34%,#2A2E32 56%,#17181A 78%,#0E0E10 100%)}
.t-1{--bg:var(--g1);--fg:#ECEAE4;--mut:#A9ABAF;--vak:var(--g3);--lijn:rgba(236,234,228,.13)}
.t-2{--bg:var(--g2);--fg:#ECEAE4;--mut:#AEB0B4;--vak:var(--gv);--lijn:rgba(236,234,228,.13)}
.t-papier{--bg:#E6E4DD;--vak:#F3F2EC}
.t-glas{--mut:#C9CBCE;--vak:rgba(255,255,255,.08)}
.knop.hoofd{background:#ECEAE4;color:#141517}
.t-papier .knop.hoofd{background:#141517;color:#ECEAE4}
.t-glas .knop.hoofd{color:#141517}
.nav .knop{background:#ECEAE4;color:#141517}
.bg-grafiet{background:#0F1012 url(img/matglas-grafiet.jpg) center/cover}
.held.onscherp{background:var(--g2)}
.held.onscherp .wazig{opacity:.2}
/* vaste productbalk */
.balk{position:sticky;top:0;z-index:30;background:var(--bg);border-bottom:1px solid var(--lijn)}
.balk .wrap{display:flex;align-items:center;gap:14px;height:64px}
.balk img{width:38px;height:38px;border-radius:10px}
.balk b{font-weight:700;font-size:16px;line-height:1.15;display:block}
.balk small{font-size:13px;color:var(--mut);line-height:1.1;display:block}
.balk .rechts{margin-left:auto;display:flex;align-items:center;gap:22px;font:500 13px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.balk .knop{min-height:40px;padding:8px 18px;font-size:12px}
@media (max-width:760px){.balk small,.balk .verberg{display:none}}
/* één zin per blok */
.blok{padding:clamp(72px,8.5vw,120px) 0}
.blok.dun{padding:clamp(48px,6vw,80px) 0}
.blokkop{text-align:center;max-width:44em;margin:0 auto clamp(32px,4vw,56px)}
.blokkop .lede{margin-inline:auto}
.keten{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:26px}
.keten span{border:1px solid var(--lijn);border-radius:999px;padding:11px 18px;font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
/* vaste kijker met looks */
.kijker{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,56px);align-items:start;text-align:left}
.scherm{position:sticky;top:84px}
.scherm .kopje{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font:500 13px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.scherm .beeld{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#000}
.scherm .beeld img{width:100%;height:100%;object-fit:cover}
.scherm .onder{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-top:12px;flex-wrap:wrap}
.shots{display:flex;gap:8px}
.shots button{width:58px;aspect-ratio:16/10;padding:0;border:1px solid var(--lijn);border-radius:8px;overflow:hidden;cursor:pointer;background:#000;opacity:.6}
.shots button img{width:100%;height:100%;object-fit:cover}
.shots button[aria-pressed=true]{opacity:1;border-color:var(--fg)}
.zonder{border:1px solid var(--lijn);border-radius:999px;background:none;color:inherit;font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:11px 16px;cursor:pointer}
.groep{border-top:1px solid var(--lijn);padding:22px 0 26px}
.groep:first-child{border-top:0;padding-top:0}
.groep h3{margin:0;font-size:24px;font-weight:800;letter-spacing:-.02em;text-transform:uppercase}
.groep h3 span{font:500 12px/1 var(--mono);letter-spacing:.08em;color:var(--mut);margin-left:8px}
.groep p{margin:6px 0 12px;color:var(--mut);font-size:15px;line-height:1.35}
.keuzes{display:flex;flex-wrap:wrap;gap:8px}
.keuzes button{border:1px solid var(--lijn);background:var(--vak);color:inherit;border-radius:12px;padding:12px 14px;text-align:left;font:600 14px/1.2 var(--sans);cursor:pointer}
.keuzes button small{display:block;font:500 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mut);margin-top:6px}
.keuzes button[aria-pressed=true]{border-color:var(--fg);box-shadow:0 0 0 1px var(--fg) inset}
.keuzes em{align-self:center;font:500 12px/1 var(--mono);font-style:normal;letter-spacing:.06em;color:var(--mut);padding-left:6px;text-transform:uppercase}
@media (max-width:860px){.kijker{grid-template-columns:1fr}.scherm{top:64px;z-index:5;background:var(--bg);padding:10px 0}.scherm .onder{margin-top:8px}}
/* bedieningen als kaarten */
.kaarten{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,30px);text-align:left}
.kaart .pl{aspect-ratio:16/10;border-radius:14px;background-size:cover;background-position:center;background-color:#000}
.kaart p{margin:12px 0 0;font-size:15px;line-height:1.4;color:var(--mut)}
.kaart p b{color:var(--fg);font-weight:700;margin-right:5px}
@media (max-width:760px){.kaarten{grid-template-columns:1fr 1fr}}
/* edities en tabel */
.tabel{margin-top:clamp(32px,4vw,56px);border-radius:20px;overflow:hidden;background:var(--vak);text-align:center}
.tabel .rij{display:grid;grid-template-columns:1fr 1.3fr 1.3fr;border-top:1px solid var(--lijn)}
.tabel .rij:first-child{border-top:0;font-weight:800;font-size:17px}
.tabel .rij>*{padding:15px clamp(10px,2vw,24px);font-size:15px;line-height:1.3}
.tabel .rij>:first-child{text-align:left;font-weight:700}
.tabel .rij>:nth-child(n+2){border-left:1px solid var(--lijn)}
.tabel .nee{color:var(--mut)}
.plan{background:var(--vak)}
.tegel{background:var(--vak)}
.tegel img{width:64px;height:64px;border-radius:15px}
.kruisjes{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cpath d='M48 42v12M42 48h12' stroke='%23ECEAE4' stroke-opacity='.2' stroke-width='1'/%3E%3C/svg%3E")}
.vakje.verloop{background:var(--verloop)}
.vakje.t-1{background:var(--g1)}.vakje.t-2{background:var(--g2)}
.vakje .knop.hoofd{background:#ECEAE4;color:#141517}
.vakje.t-papier .knop.hoofd{background:#141517;color:#ECEAE4}
.voet .groot-woord{color:#ECEAE4}