/* hekwerk/hekwerk.css — productgroep 1 "Metalen hekwerk" 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.3 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)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.num{display:inline-grid;place-items:center;flex:none;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)}
.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)}
.vleugel{height:12px;max-width:280px;margin:4px 0;
  background:linear-gradient(90deg,transparent,var(--dgoud) 20%,var(--dgoud) 80%,transparent) center/100% 1px no-repeat}

/* ---------- 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;min-width:0}
.maan{display:inline-grid;place-items:center;flex:none;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)}
.terug{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;border:1px solid var(--lijn-goud);text-decoration:none;white-space:nowrap;
  font:500 var(--fs-xs)/1 var(--f-kop);letter-spacing:.2em;text-transform:uppercase;color:var(--inkt)}
.terug:hover{background:var(--goudlicht)}
.terug .lang{display:none}
@media (min-width:700px){.terug .lang{display:inline}}

/* ---------- held ---------- */
.held{position:relative;overflow:hidden;padding:18px 0 40px;
  background:radial-gradient(60% 50% at 85% 10%,var(--goudwas),transparent),radial-gradient(50% 40% at 10% 90%,var(--inktwas),transparent)}
.held{background:radial-gradient(60% 50% at 85% 10%,var(--goudwas),transparent),radial-gradient(50% 40% at 10% 90%,var(--inktwas),transparent),var(--rijst) url(../assets/orn/rijstpapier-tegel.jpg?v=766948a5) repeat 0 0/512px auto}
.held .tak{position:absolute;right:-56px;top:-34px;width:min(40vw,380px);opacity:.55;pointer-events:none;z-index:0}
@media (max-width:699px){.held .tak{display:none}}
.held>.container{position:relative;z-index:auto}
.held-tekst{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 16px;align-content:start}
.held .rubriek{display:flex;align-items:center;gap:10px;margin:0;grid-column:1}
.held h1{grid-column:1;margin:4px 0 0;font:300 clamp(2.1rem,1.1rem + 4.4vw,4.2rem)/1.04 var(--f-kop);letter-spacing:.14em;text-transform:uppercase;color:var(--inkt)}
.held h1 span{display:block;font-size:.4em;letter-spacing:.3em;color:var(--grijs1);margin-top:.55em}
.kalli-kolom{grid-column:2;grid-row:1/span 3;display:flex;flex-direction:column;align-items:center;gap:10px;padding-top:4px}
.kalli-kolom .teken{font:400 clamp(52px,12vw,96px)/1 var(--f-kalli);color:var(--inkt)}
.held-intro{display:grid;gap:8px;margin-top:18px}
.held-feiten{display:flex;flex-wrap:wrap;gap:6px 18px;margin:6px 0 0;padding:0;list-style:none;
  font:500 var(--fs-xs)/1.4 var(--f-kop);letter-spacing:.18em;text-transform:uppercase;color:var(--grijs1)}
.held-feiten li::before{content:"◆";color:var(--goud);margin-right:8px;font-size:.7em;vertical-align:.15em}
.held-beeld{position:relative;margin:16px 0 0;isolation:auto}
.held-beeld img{width:100%;height:auto;aspect-ratio:1/1;mix-blend-mode:multiply;
  -webkit-mask-image:radial-gradient(closest-side at 50% 50%,#000 78%,rgba(0,0,0,.85) 88%,transparent 100%);
          mask-image:radial-gradient(closest-side at 50% 50%,#000 78%,rgba(0,0,0,.85) 88%,transparent 100%);
  -webkit-mask-size:112% 118%;mask-size:112% 118%;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
@media (min-width:641px){.held-beeld img{aspect-ratio:3/2}}
@media (min-width:1000px){
  .held{padding:44px 0 72px}
  /* tekst links (kop boven, intro onder), beeld rechts over beide rijen */
  .held-raster{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);grid-template-areas:"tekst beeld" "intro beeld";column-gap:40px;row-gap:0}
  .held-tekst{grid-area:tekst;align-self:end}
  .held-intro{grid-area:intro;align-self:start}
  .held-beeld{grid-area:beeld;align-self:center}
  .held h1{font-size:clamp(2.4rem,1rem + 2.4vw,3.4rem)}
  .held .tak{display:block;right:-40px;top:-20px;width:420px;opacity:.5}
  .held-beeld{margin:0}
}

/* ---------- studio (3D) ---------- */
.studio{position:relative;padding:56px 0;border-top:1px solid var(--lijn-goud-zacht)}
.sectie-kop{display:grid;gap:8px;margin-bottom:20px;position:relative;padding-right:64px}
.sectie-kop .rubriek{display:flex;align-items:center;gap:10px;margin:0}
.sectie-kop h2{margin:0;font:400 var(--fs-xl)/var(--lh-kop) var(--f-kop);letter-spacing:.2em;text-transform:uppercase;color:var(--inkt)}
.sectie-kop .kalli{position:absolute;right:0;top:0;font:400 clamp(52px,12vw,80px)/1 var(--f-kalli);color:var(--inkt);opacity:.9}
.tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:0 0 14px;padding:0;list-style:none}
.tab{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%;min-height:44px;padding:6px 4px 8px;border:1px solid var(--lijn-goud-zacht);
  background:rgba(var(--rijst-rgb),.7);cursor:pointer;color:var(--inkt);font:500 12px/1.2 var(--f-kop);letter-spacing:.12em;text-transform:uppercase;text-align:center}
.tab img{width:100%;max-width:96px;height:auto;aspect-ratio:1;object-fit:contain}
.tab[aria-selected=true]{border-color:var(--dgoud);background:var(--goudlicht);box-shadow:inset 0 -2px 0 var(--dgoud)}
.tab:hover{border-color:var(--dgoud)}
.studio-raster{display:grid;gap:18px;grid-template-columns:minmax(0,1fr)}
.studio-raster>*{min-width:0}

.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:60%;top:42%;width:64cqmin;height:64cqmin;translate:-50% -50%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(226,204,152,.34),rgba(224,202,150,.30) 82%,rgba(222,200,148,.22) 94%,rgba(222,200,148,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%;z-index:2}
.podium-beeld img{width:100%;height:100%;object-fit:contain}
.podium-beeld{transition:opacity var(--duur-lang) var(--ease)}
.podium-doek{opacity:0;transition:opacity var(--duur-lang) var(--ease)}
.podium-doek canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab;
  /* randfade: wat buiten het podium zou vallen lost op in het papier, nooit hard afgesneden op de rand */
  -webkit-mask-image:linear-gradient(90deg,transparent 1.5%,#000 8%,#000 92%,transparent 98.5%),linear-gradient(transparent 1.5%,#000 7%,#000 93%,transparent 98.5%);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 1.5%,#000 8%,#000 92%,transparent 98.5%),linear-gradient(transparent 1.5%,#000 7%,#000 93%,transparent 98.5%);mask-composite:intersect}
.podium-doek canvas[data-sleept]{cursor:grabbing}
.podium.actief .podium-doek{opacity:1}
.podium.actief .podium-beeld{opacity:0}
/* mist ligt ACHTER het product (alleen over de bergen): palen lopen door tot hun voet, niets vervaagt naar wit */
.podium-mist{position:absolute;left:0;right:0;bottom:0;height:22%;pointer-events:none;z-index:1;
  background:linear-gradient(rgba(244,239,228,0),rgba(244,239,228,.7) 55%,rgba(244,239,228,.96))}
.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:14px;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),.94);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}
.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:34px;top:14px;bottom:auto;translate:none;padding:0 14px}
/* hint als pil onderin (ver van de gouden hoekornamenten en de sluitknop) */
.podium-hint{position:absolute;left:50%;bottom:16px;translate:-50% 0;z-index:8;margin:0;padding:7px 14px;max-width:calc(100% - 48px);
  font:500 11px/1.3 var(--f-kop);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:var(--inkt2);background:rgba(var(--rijst-rgb),.88);border:1px solid var(--lijn-goud);border-radius:999px;
  opacity:0;transition:opacity var(--duur-lang) var(--ease);pointer-events:none}
.podium-hint .muis{display:none}
@media (hover:hover) and (pointer:fine){.podium-hint .muis{display:inline}.podium-hint .aanraak{display:none}}
.podium.melding .podium-hint{white-space:normal;text-align:center;width:calc(100% - 48px)}
.podium.actief.verkend .podium-hint{opacity:0}
.podium.actief .podium-hint,.podium.melding .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 .8s linear infinite}
@keyframes draai{to{rotate:360deg}}
/* onderschrift zoals in de PDF en de renders: volledig cursieve Cormorant, ook de cijfers, × en / */
.bijschrift{margin:12px 0 0;padding:0 16px;font:italic 400 var(--fs-l)/1.4 var(--f-serif);color:var(--grijs1);min-height:2.8em;text-wrap:pretty}
.maat,.s-mono{font:500 .8em/1 var(--f-mono);font-style:normal;font-variant-numeric:tabular-nums lining-nums;letter-spacing:0;color:var(--inkt2);white-space:nowrap}

.paneel{display:grid;gap:16px;align-content:start}
.paneel h3{margin:0;font:400 1.35rem/1.2 var(--f-kop);letter-spacing:.14em;text-transform:uppercase;color:var(--inkt)}
.paneel .omschrijving{margin:0;max-width:var(--max-tekst)}
.punten{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:var(--fs-s);color:var(--grijs1)}
.punten li::before{content:"◆";color:var(--goud);margin-right:8px;font-size:.7em;vertical-align:.15em}
.varianten{display:grid;gap:12px;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),.85);font:400 var(--fs-s)/1 var(--f-kop);letter-spacing:.06em;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[disabled]{opacity:.55;cursor:progress}
.knop.inkt{background:var(--inkt);color:var(--goudlicht);border-color:var(--inkt)}
.knop.inkt:hover{background:var(--inkt2)}
.detail{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center;padding:14px;border:1px solid var(--lijn-goud-zacht);background:rgba(var(--rijst-rgb),.6)}
.medaillon{width:112px;aspect-ratio:1;border-radius:50%;overflow:hidden;background:var(--rijst2) radial-gradient(closest-side,rgba(240,219,160,.5),rgba(240,219,160,.1));
  box-shadow:0 0 0 3px var(--rijst),0 0 0 5px var(--dgoud),0 0 0 9px var(--rijst),0 0 0 10px var(--lijn-goud),0 10px 24px rgba(26,26,26,.16);margin:10px}
.medaillon img{width:100%;height:100%;object-fit:cover}
.detail p{margin:0;font-size:var(--fs-s);color:var(--grijs1)}
.detail .label{margin-bottom:4px;display:flex;align-items:center;gap:8px}
.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:1000px){
  .studio{padding:80px 0}
  .studio-raster{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:44px;align-items:start}
  .studio-podium{position:sticky;top:96px}
  .podium{aspect-ratio:1/1}
  .tabs{gap:10px;margin-bottom:22px}
  .tab{flex-direction:row;justify-content:flex-start;gap:14px;padding:6px 14px 6px 6px;font-size:13px;letter-spacing:.16em;text-align:left}
  .tab img{width:64px;max-width:64px}
}

/* ---------- galerij (stillevens) ---------- */
.galerij{padding:56px 0;border-top:1px solid var(--lijn-goud-zacht);background:linear-gradient(rgba(var(--goud-rgb),.05),rgba(var(--goud-rgb),0) 60%)}
.kaarten{list-style:none;margin:0;padding:0;display:grid;gap:18px;grid-template-columns:minmax(0,1fr)}
@media (min-width:641px){.kaarten{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.kaarten{grid-template-columns:repeat(4,minmax(0,1fr))}}
.kaart{display:grid;gap:10px;align-content:start}
.kaart a{display:block;border:1px solid var(--lijn-goud);box-shadow:var(--schaduw-kaart);transition:transform var(--duur) var(--ease),border-color var(--duur)}
.kaart a:hover{transform:translateY(-3px);border-color:var(--dgoud)}
.kaart img{width:100%;height:auto;aspect-ratio:1}
.kaart h3{margin:0;font:500 var(--fs-s)/1.3 var(--f-kop);letter-spacing:.16em;text-transform:uppercase;color:var(--inkt)}
.kaart p{margin:0;font-size:var(--fs-s);color:var(--grijs1)}
.uitvoeringen{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:900px){.uitvoeringen{grid-template-columns:repeat(5,minmax(0,1fr))}}
.uitvoeringen figure{margin:0;display:grid;gap:6px}
.uitvoeringen img{width:100%;height:auto;aspect-ratio:1;border:1px solid var(--lijn-goud-zacht)}
.uitvoeringen figcaption{font:italic 400 var(--fs-s)/1.35 var(--f-serif);color:var(--grijs1)}

/* ---------- slot & voet ---------- */
.slot{padding:60px 0 36px;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:.18em;text-transform:uppercase;color:var(--inkt)}
.slot .lead{margin:0 auto 22px}
.slot .knoppen{justify-content:center}
.slot .zegel{margin:0 auto}
.voet{position:relative;padding:44px 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-flex;align-items:center;min-height:44px}

/* ---------- ronde 4: detail onder het podium (desktop), vast podium tijdens configureren (telefoon), bevestiging ---------- */
.detail-breed{display:none}
@media (min-width:1000px){
  .podium{aspect-ratio:4/3}
  .detail-breed{display:grid;margin-top:14px}
  .detail-breed .medaillon{width:128px}
  .detail-smal{display:none}
}
@media (max-width:999px){
  /* na "Draai in 3D": podium + bijschrift blijven bovenin (± 46 % van het scherm) terwijl de klant opties kiest */
  .studio-podium:has(.podium.actief){position:sticky;top:var(--kop-hoogte);z-index:4;margin:0 calc(-1 * var(--gutter));padding:6px var(--gutter) 8px;
    background:var(--rijst) url(../assets/orn/rijstpapier-tegel.jpg?v=766948a5) repeat;background-size:512px auto;
    box-shadow:0 10px 18px -12px rgba(26,26,26,.35);border-bottom:1px solid var(--lijn-goud-zacht)}
  .studio-podium:has(.podium.actief) .podium{aspect-ratio:auto;height:min(46svh,calc(100vw - 2 * var(--gutter)))}
  .studio-podium:has(.podium.actief) .bijschrift{min-height:0;margin-top:6px;font-size:1.02rem;line-height:1.3}
}
.podium-toast{position:absolute;left:18px;top:18px;translate:0 -6px;z-index:8;margin:0;padding:7px 14px;max-width:calc(100% - 150px);
  font:500 12px/1.3 var(--f-kop);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:var(--zegeltekst);background:var(--rood);border-radius:var(--straal-s);box-shadow:var(--schaduw-zegel);
  opacity:0;pointer-events:none;transition:opacity var(--duur) var(--ease),translate var(--duur) var(--ease)}
.podium-toast.zichtbaar{opacity:1;translate:0 0}
@media (max-width:999px){
  /* met het vaste podium: opties die in beeld scrollen (focus, ankers) landen onder het podium, niet erachter */
  html:has(.podium.actief){scroll-padding-top:calc(var(--kop-hoogte) + min(46svh, 100vw) + 96px)}
}

/* ---------- ronde 5 (jury): canon-onderdelen ---------- */
/* T08 · lead met gouden linkerstreep */
.lead.streep{border-left:1.5px solid var(--goud);padding-left:14px}
.slot .lead.streep{text-align:left}
/* O05 · ruitbullet voor labels zonder cijferzegel */
.label.ruit::before{content:"";display:inline-block;width:7px;height:7px;background:var(--goud);transform:rotate(45deg);margin-right:4px;flex:none}
/* kit-kalligrafie als beeld (匠心, verticaal) en 全貌 verticaal uit de subset */
.sectie-kop .kalli-svg{width:clamp(30px,6vw,40px);height:auto;opacity:.88}
.sectie-kop .kalli-v{font-size:clamp(40px,9vw,56px);line-height:.98;text-align:center}
/* TB09 · codebadge: zwarte chip, gouden Oswald, gouden binnenrand, tegen de linkerrand van het beeld */
.codebadge{display:inline-flex;align-items:center;height:22px;padding:0 8px;background:var(--inkt);color:var(--goud);
  font:500 13px/1 var(--f-kop);letter-spacing:.14em;text-transform:uppercase;border-radius:2px;box-shadow:inset 0 0 0 1px rgba(217,180,92,.6);white-space:nowrap}
.podium-code{position:absolute;left:0;top:36px;z-index:8;pointer-events:none}
.held-badge{position:absolute;left:84.5%;top:75%;translate:-50% 0;z-index:2}
.kaart h3{display:flex;align-items:center;gap:10px}
.kaart h3 .codebadge{height:20px;font-size:12px}
/* L05 · specregel: haarlijn met korte dikke goudstreep op de lijn; G05 · groot getal, kleine gouden eenheid */
.specregel{position:relative;display:flex;flex-wrap:wrap;gap:6px 34px;margin:14px 16px 0;padding-top:12px;border-top:1px solid #C8BFAE}
.specregel::before{content:"";position:absolute;left:0;top:-2px;width:34px;height:3px;background:var(--dgoud);transform-origin:left}
.spec{display:grid;gap:2px;margin:0}
.spec .groot{font:300 1.9rem/1 var(--f-kop);letter-spacing:.04em;color:var(--inkt);font-variant-numeric:tabular-nums;white-space:nowrap}
.spec .groot small{font:400 .42em/1 var(--f-kop);letter-spacing:.2em;color:var(--dgoud);margin-left:.35em;text-transform:lowercase}
.spec-l{font:italic 400 var(--fs-s)/1.3 var(--f-serif);color:var(--grijs1)}
/* I03/I04 · gouden marker-munten op de 3D-weergave (klikbaar, gekoppeld aan de camerastanden) */
.markers{position:absolute;inset:0;z-index:7;pointer-events:none;display:none}
.podium.actief .markers{display:block}
.munt{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;padding:0;border:0;background:none;cursor:pointer;pointer-events:auto;display:grid;place-items:center;transition:opacity var(--duur) var(--ease)}
.munt[hidden]{display:none}
.munt span{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#F3DFA4,#D9B45C 45%,#B08A32);color:var(--inkt);font:600 13px/1 var(--f-kop);
  box-shadow:0 0 0 1px #1A1A1A,0 0 0 2.5px rgba(244,239,228,.95),0 1.5px 4px rgba(0,0,0,.4)}
.munt[aria-pressed=true] span{background:var(--rood);color:var(--zegeltekst)}
.knop .munt-mini{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;margin-left:-4px;
  background:radial-gradient(circle at 35% 30%,#F3DFA4,#D9B45C 45%,#B08A32);color:var(--inkt);font:600 12px/1 var(--f-kop);letter-spacing:0;box-shadow:0 0 0 1px #1A1A1A}
.knop[aria-pressed=true] .munt-mini{background:var(--rood);color:var(--zegeltekst)}
.tel .s-mono{font-size:1em;color:var(--inkt)}
/* KV04/KV05 · voetregel: web in goud · uitdovende lijn · sectie in grijs · lijn · voetzegel 龍 + nummer */
.voetregel{position:relative;display:flex;align-items:center;justify-content:center;gap:14px;max-width:var(--max-pagina);margin:0 auto 14px;padding:0 var(--gutter);
  font:500 11px/1.4 var(--f-kop);letter-spacing:.3em;text-transform:uppercase}
.voetregel .web{color:var(--dgoud)}
.voetregel .sectie{color:var(--grijs2)}
.voetregel .lijn{flex:1;max-width:220px;height:1px;background:linear-gradient(90deg,rgba(176,138,50,.08),rgba(176,138,50,.6),rgba(176,138,50,.08))}
.voetregel .pnr{display:inline-flex;align-items:center;gap:8px;color:var(--inkt);letter-spacing:.2em}
.voetregel .pnr em{font-style:normal;color:var(--grijs2)}
.voetzegel{display:inline-grid;place-items:center;width:17px;height:17px;background:var(--rood);border-radius:2px;box-shadow:inset 0 0 0 1px rgba(248,233,223,.25)}
.voetzegel i{display:block;width:12px;height:12px;background:var(--zegeltekst);-webkit-mask:url(bron/long.svg?v=275a9080) center/contain no-repeat;mask:url(bron/long.svg?v=275a9080) center/contain no-repeat}

/* ---------- telefoon: geen tekst kleiner dan 14 px (ONTWERP §0.1) ---------- */
@media (max-width:640px){
  .label,.held-feiten,.tab,.keuze span,.keuze span small,.varianten legend,.knop,.podium-knop,.podium-hint,.podium-toast,.terug,
  .voet,.voetregel,.kaart h3,.codebadge,.kaart h3 .codebadge,.detail p,.noot,.punten,.kaart p,.uitvoeringen figcaption,.spec-l{font-size:14px}
  .label{letter-spacing:.2em}
  .held-feiten{letter-spacing:.14em}
  .tab{letter-spacing:.06em;padding:6px 2px 8px}
  .knop,.podium-knop{letter-spacing:.14em}
  .merk-naam{font-size:14px;letter-spacing:.22em}
  .merk-naam small{font-size:14px}
  .num{width:26px;height:26px;font-size:14px}
  .codebadge{height:24px}
  .held-badge{left:auto;right:30%;top:13%;translate:none}
  .voetregel{flex-wrap:wrap;gap:8px 12px;letter-spacing:.2em}
  .voetregel .lijn{flex:0 0 40px}
  .voetregel .pnr{flex-basis:100%;justify-content:center}
  .spec .groot{font-size:1.7rem}
  .spec .groot small{font-size:14px;letter-spacing:.12em}
  .specregel::before{width:28px}
}