/* css/showcase.css — showcase productgroepen in de DSD-stijl "Inkt & rijstpapier".
   Mobiel eerst (iPhone 14 Pro Max = 430 px), tokens uit ../assets/dsd-tokens.css. Rood alleen voor zegels en nummers. */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--kop-hoogte) + 8px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;color:var(--inkt2);font:400 var(--fs-m)/var(--lh-tekst) var(--f-tekst);
  background:var(--rijst) url(../assets/orn/rijstpapier-tegel.jpg?v=766948a5) repeat;background-size:512px auto;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:var(--inkt)}
:focus-visible{outline:2px solid var(--dgoud);outline-offset:3px}
.skip{position:absolute;left:-999px;top:8px;background:var(--rijst);padding:12px 16px;z-index:var(--z-overlay)}
.skip:focus{left:16px}
.container{width:100%;max-width:var(--max-pagina);margin:0 auto;padding:0 var(--gutter)}
@media (min-width:768px){.container{padding:0 32px}}
.label{font:500 var(--fs-xs)/1.2 var(--f-kop);letter-spacing:var(--sp-kapitaal);text-transform:uppercase;color:var(--dgoud);margin:0}
.lead{font:italic 400 var(--fs-l)/1.4 var(--f-serif);color:var(--grijs1);max-width:var(--max-tekst);margin:0}
.zh{font-family:var(--f-zh)}

/* ---------- kop ---------- */
.kop{position:sticky;top:0;z-index:var(--z-kop);height:var(--kop-hoogte);
  background:rgba(var(--rijst-rgb),.94);border-bottom:1px solid var(--lijn-goud-zacht);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.kop .container{display:flex;align-items:center;justify-content:space-between;height:100%;gap:12px}
.merk{display:flex;align-items:center;gap:10px;text-decoration:none;min-height:44px;white-space:nowrap}
.maan{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(var(--goud-rgb),.30),rgba(var(--goud-rgb),.12) 80%,transparent);
  box-shadow:0 0 0 1px var(--lijn-goud-sterk)}
.maan img{width:36px;height:36px;border-radius:50%}
.merk-naam{font:400 .8rem/1.15 var(--f-kop);letter-spacing:.3em;text-transform:uppercase;color:var(--inkt)}
.merk-naam span{color:var(--dgoud)}
.merk-naam small{display:block;font:italic 400 .85rem/1.2 var(--f-serif);letter-spacing:0;text-transform:none;color:var(--grijs2)}
.kop nav ul{display:none;list-style:none;margin:0;padding:0;gap:4px}
.kop nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;text-decoration:none;white-space:nowrap;
  font:500 var(--fs-xs)/1 var(--f-kop);letter-spacing:.2em;text-transform:uppercase;color:var(--grijs1)}
.kop nav a:hover{color:var(--dgoud)}
.kop details{position:relative}
.kop summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;
  border:1px solid var(--lijn-goud);font:500 var(--fs-xs)/1 var(--f-kop);letter-spacing:.25em;text-transform:uppercase;color:var(--inkt)}
.kop summary::-webkit-details-marker{display:none}
.kop details[open] ul{display:flex;flex-direction:column;position:absolute;right:0;top:52px;min-width:240px;padding:8px;
  background:var(--rijst);border:1px solid var(--lijn-goud);box-shadow:var(--schaduw-kaart)}
@media (min-width:1100px){.kop details{display:none}.kop nav>ul{display:flex}}

/* ---------- held ---------- */
.held{position:relative;overflow:hidden;padding:28px 0 56px;
  background:radial-gradient(60% 50% at 85% 10%,var(--goudwas),transparent),radial-gradient(50% 40% at 10% 90%,var(--inktwas),transparent)}
.held .tak{position:absolute;right:-40px;top:-10px;width:min(52vw,420px);opacity:var(--op-tak);pointer-events:none}
.held .bergen{position:absolute;left:0;right:0;bottom:0;width:100%;opacity:var(--op-bergen);pointer-events:none;mix-blend-mode:multiply}
.held .watermerk{position:absolute;left:-6%;top:12%;width:min(70vw,640px);opacity:var(--op-watermerk);pointer-events:none;mix-blend-mode:multiply}
.held>.container{position:relative;z-index:1}
.held-raster{position:relative;display:grid;gap:24px;grid-template-columns:minmax(0,1fr)}
.held-tekst{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 16px;align-content:start}
.held h1{grid-column:1;margin:8px 0 0;font:300 clamp(2.4rem,1.3rem + 4.6vw,4.4rem)/1.04 var(--f-kop);letter-spacing:.16em;text-transform:uppercase;color:var(--inkt);
  hyphens:manual}
.held h1 span{display:block;font-size:.42em;letter-spacing:.32em;color:var(--grijs1);margin-top:.5em}
.held .lead{grid-column:1/-1;margin-top:8px}
.held .vleugel{grid-column:1/-1;height:12px;max-width:280px;margin:6px 0 2px;
  background:linear-gradient(90deg,transparent,var(--dgoud) 20%,var(--dgoud) 80%,transparent) center/100% 1px no-repeat}
.kalli-kolom{grid-column:2;grid-row:1/span 3;display:flex;flex-direction:column;align-items:center;gap:10px}
.kalli-kolom .teken{writing-mode:vertical-rl;font:400 clamp(44px,9vw,72px)/1 var(--f-kalli);color:var(--inkt);letter-spacing:.06em}
.zegel{display:inline-grid;place-items:center;background:var(--rood);color:var(--zegeltekst);font:400 15px/1.05 var(--f-kalli);
  width:30px;padding:4px 0;border-radius:var(--straal-s);box-shadow:var(--schaduw-zegel);text-align:center;transform:rotate(-3deg)}
.held-feiten{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px 18px;margin:10px 0 0;padding:0;list-style:none;
  font:500 var(--fs-xs)/1.3 var(--f-kop);letter-spacing:.2em;text-transform:uppercase;color:var(--grijs1)}
.held-feiten li::before{content:"◆";color:var(--goud);margin-right:8px;font-size:.7em;vertical-align:.15em}
@media (min-width:900px){
  .held{padding:48px 0 96px}
  .held-raster{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:40px}
}

/* ---------- index van groepen ---------- */
.index{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px;position:relative}
.index a{display:flex;align-items:center;gap:10px;min-height:56px;padding:10px 12px;text-decoration:none;
  background:rgba(var(--rijst-rgb),.94);border:1px solid var(--lijn-goud-zacht);box-shadow:var(--schaduw-kaart);
  transition:border-color var(--duur) var(--ease),transform var(--duur) var(--ease)}
.index a:hover{border-color:var(--dgoud);transform:translateY(-2px)}
.index .num{flex:none}
.index b{font:500 .78rem/1.25 var(--f-kop);letter-spacing:.12em;text-transform:uppercase;color:var(--inkt)}
@media (min-width:900px){.index{grid-template-columns:repeat(6,1fr)}.index a{flex-direction:column;align-items:flex-start;min-height:96px}}
.num{display:inline-grid;place-items:center;width:24px;height:24px;background:var(--rood);color:var(--zegeltekst);
  font:700 13px/1 var(--f-zh);border-radius:var(--straal-s);box-shadow:var(--schaduw-zegel)}

/* ---------- podium: stilleven op rijstpapier (zelfde compositie als lib/scene.js → tekenStilleven/tekenMist) ---------- */
.podium{position:relative;margin:0;aspect-ratio:1/1;container-type:size;overflow:hidden;isolation:isolate;
  background:var(--rijst) url(../assets/orn/rijstpapier-tegel.jpg?v=766948a5) repeat;background-size:42% auto;
  border:1px solid var(--lijn-goud);box-shadow:var(--schaduw-kaart)}
@media (min-width:641px){.podium{aspect-ratio:4/3}}
.podium::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 70% at 85% 5%,rgba(var(--dgoud-rgb),.10),transparent 70%),radial-gradient(60% 60% at 10% 90%,rgba(43,43,43,.05),transparent 70%)}
.podium::after{content:"";position:absolute;inset:5px;border:1px solid var(--lijn-goud-zacht);pointer-events:none;z-index:6}
.podium-maan{position:absolute;left:64%;top:40%;width:60cqmin;height:60cqmin;translate:-50% -50%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(236,214,152,.62),rgba(236,214,152,.56) 86%,rgba(236,214,152,.18) 97%,rgba(236,214,152,0))}
.podium-bergen{position:absolute;left:-5%;width:110%;max-width:none;bottom:14%;opacity:.32;mix-blend-mode:multiply;pointer-events:none}
.podium-beeld,.podium-doek{position:absolute;inset:0;width:100%;height:100%}
.podium-beeld img{width:100%;height:100%;object-fit:contain}
.podium-beeld{transition:opacity var(--duur-lang) var(--ease)}
.podium-doek canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}
.podium-doek canvas[data-sleept]{cursor:grabbing}
.podium-doek{opacity:0;transition:opacity var(--duur-lang) var(--ease)}
.podium.actief .podium-doek{opacity:1}
.podium.actief .podium-beeld{opacity:0}
.podium-mist{position:absolute;left:0;right:0;bottom:0;height:24%;pointer-events:none;z-index:3;
  background:linear-gradient(rgba(244,239,228,0),rgba(244,239,228,.72) 55%,rgba(244,239,228,.97))}
.podium-hoek{position:absolute;width:26px;height:26px;z-index:7;pointer-events:none;
  background:url(../assets/orn/hui.svg?v=3877cd7e) center/contain no-repeat}
.podium-hoek.lb{left:-1px;top:-1px;transform:scale(-1,-1)}
.podium-hoek.rb{right:-1px;top:-1px;transform:scaleY(-1)}
.podium-hoek.lo{left:-1px;bottom:-1px;transform:scaleX(-1)}
.podium-hoek.ro{right:-1px;bottom:-1px}
.podium-knop{position:absolute;left:50%;bottom:16px;translate:-50% 0;z-index:8;display:inline-flex;align-items:center;gap:10px;
  min-height:44px;padding:0 18px;border:1px solid var(--dgoud);background:rgba(var(--rijst-rgb),.92);color:var(--inkt);cursor:pointer;
  font:500 var(--fs-xs)/1 var(--f-kop);letter-spacing:.25em;text-transform:uppercase;box-shadow:var(--schaduw-kaart);white-space:nowrap;text-decoration:none}
.podium-knop:hover{background:var(--goudlicht)}
.podium-knop svg{width:18px;height:18px;stroke:var(--dgoud);fill:none;stroke-width:1.5}
.podium.actief .podium-knop.start,.podium:not(.actief) .podium-knop.sluit{display:none}
.podium-knop.sluit{left:auto;right:12px;top:12px;bottom:auto;translate:none;padding:0 14px}
.podium-hint{position:absolute;left:36px;top:16px;z-index:8;margin:0;font:500 11px/1.3 var(--f-kop);letter-spacing:.2em;text-transform:uppercase;
  color:var(--grijs2);opacity:0;transition:opacity var(--duur-lang) var(--ease);pointer-events:none;max-width:55%}
.podium.actief .podium-hint{opacity:1}
.podium.laadt .podium-knop.start::after{content:"";width:12px;height:12px;border:1.5px solid var(--dgoud);border-right-color:transparent;
  border-radius:50%;animation:draai 0.8s linear infinite}
@keyframes draai{to{rotate:360deg}}
.podium-leeg{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:14px;text-align:center;padding:24px;z-index:4}
.podium-leeg p{margin:0;font:500 var(--fs-xs)/1.5 var(--f-kop);letter-spacing:.25em;text-transform:uppercase;color:var(--grijs1)}
.medaillon{width:min(46cqmin,220px);aspect-ratio:1;border-radius:50%;overflow:hidden;margin:0 auto;
  box-shadow:0 0 0 3px var(--rijst),0 0 0 4px var(--lijn-goud-sterk),0 10px 26px rgba(26,26,26,.18)}
.medaillon img{width:100%;height:100%;object-fit:cover;filter:sepia(.25) saturate(.85)}
.bijschrift{margin:10px 2px 0;font:500 var(--fs-s)/1.4 var(--f-mono);color:var(--grijs1);min-height:1.4em}

/* ---------- groepsecties ---------- */
.groep{position:relative;padding:56px 0;border-top:1px solid var(--lijn-goud-zacht)}
.groep:nth-of-type(even){background:linear-gradient(rgba(var(--goud-rgb),.05),rgba(var(--goud-rgb),0) 60%)}
.groep-raster{display:grid;gap:24px;grid-template-columns:minmax(0,1fr)}
.groep-raster>*,.held-raster>*{min-width:0}
.groep-kop{position:relative;display:grid;gap:10px;padding-right:76px}
.rubriek{display:flex;align-items:center;gap:10px;margin:0}
.rubriek .label{line-height:1.5}
.held-tekst>.label{grid-column:1;padding-right:8px}
.groep h2{margin:0;font:400 var(--fs-xl)/var(--lh-kop) var(--f-kop);letter-spacing:.2em;text-transform:uppercase;color:var(--inkt)}
.groep .kalli{position:absolute;right:0;top:0;font:400 clamp(56px,13vw,92px)/1 var(--f-kalli);color:var(--inkt);opacity:.9}
.groep-kop p.tekst{margin:0;max-width:var(--max-tekst);color:var(--inkt2)}
.paneel{display:grid;gap:18px;align-content:start}
.producten{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.producten li{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;padding:8px 12px;
  border:1px solid var(--lijn-goud-zacht);background:rgba(var(--rijst-rgb),.6);font-size:var(--fs-s)}
.producten li.klaar{border-color:var(--lijn-goud);background:var(--goudlicht)}
.producten .status{font:500 11px/1 var(--f-kop);letter-spacing:.2em;text-transform:uppercase;color:var(--grijs2);white-space:nowrap}
.producten li.klaar .status{color:var(--dgoud)}
.varianten{display:grid;gap:14px;margin:0}
.varianten fieldset{border:0;margin:0;padding:0;min-width:0}
.varianten legend{padding:0;margin-bottom:6px}
.keuzes{display:flex;flex-wrap:wrap;gap:6px}
.keuze{position:relative}
.keuze input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.keuze span{display:inline-flex;align-items:center;gap:8px;min-height:44px;min-width:44px;justify-content:center;padding:0 12px;
  border:1px solid var(--grijs3);background:rgba(var(--rijst-rgb),.8);font:500 var(--fs-s)/1 var(--f-mono);color:var(--inkt2);
  transition:border-color var(--duur-kort),background var(--duur-kort)}
.keuze span small{font:400 11px/1 var(--f-tekst);color:var(--grijs2)}
.keuze .staal{width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.25),0 0 0 2px var(--rijst)}
.keuze input:checked+span{border-color:var(--dgoud);background:var(--goudlicht);box-shadow:inset 0 -2px 0 var(--dgoud)}
.keuze input:focus-visible+span{outline:2px solid var(--dgoud);outline-offset:2px}
.knoppen{display:flex;flex-wrap:wrap;gap:6px}
.knop{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:1px solid var(--lijn-goud);background:transparent;
  color:var(--inkt);cursor:pointer;font:500 var(--fs-xs)/1 var(--f-kop);letter-spacing:.2em;text-transform:uppercase;text-decoration:none}
.knop:hover,.knop[aria-pressed=true]{background:var(--goudlicht);border-color:var(--dgoud)}
.knop.goud{background:var(--inkt);color:var(--goudlicht);border-color:var(--inkt)}
.noot{margin:0;font-size:var(--fs-s);color:var(--grijs1);max-width:var(--max-tekst)}
.noot b{font-weight:600;color:var(--inkt2)}
@media (min-width:900px){
  .groep{padding:88px 0}
  .groep-raster{grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"kop podium" "paneel podium";column-gap:48px;row-gap:28px;align-items:start}
  .groep[data-kant=links] .groep-raster{grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-areas:"podium kop" "podium paneel"}
  .groep-kop{grid-area:kop}.groep-podium{grid-area:podium;position:sticky;top:calc(var(--kop-hoogte) + 24px)}.paneel{grid-area:paneel}
}

/* ---------- slot & voet ---------- */
.slot{padding:64px 0 40px;border-top:1px solid var(--lijn-goud-zacht);text-align:center}
.slot h2{margin:12px 0;font:300 var(--fs-2xl)/1.1 var(--f-kop);letter-spacing:.2em;text-transform:uppercase}
.slot .lead{margin:0 auto 22px}
.slot .knoppen{justify-content:center}
.voet{position:relative;padding:48px 0 calc(28px + env(safe-area-inset-bottom));overflow:hidden;
  font:400 var(--fs-xs)/1.7 var(--f-kop);letter-spacing:.22em;text-transform:uppercase;color:var(--grijs2);text-align:center}
.voet img{position:absolute;left:0;bottom:0;width:100%;opacity:.35;mix-blend-mode:multiply;pointer-events:none}
.voet p{position:relative;margin:0}
.voet a{color:var(--grijs1);display:inline-block;padding:6px 0;min-height:44px;line-height:32px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}