/* metaal/css/metaal.css — aanvulling op ../css/showcase.css voor de pagina "Metaalfabricage in 3D".
   Mobiel eerst (iPhone 14 Pro Max = 430 px). Tokens uit ../assets/dsd-tokens.css; rood alleen voor zegels en nummers. */

.held-terug{grid-column:1/-1;margin:6px 0 0}
.held-terug a{display:inline-flex;align-items:center;min-height:44px;font:500 var(--fs-xs)/1 var(--f-kop);letter-spacing:.2em;
  text-transform:uppercase;color:var(--dgoud);text-decoration:none}
.held-terug a:hover{color:var(--inkt)}

/* ---------- sectiekop ---------- */
.sectie-kop{display:grid;gap:10px;margin-bottom:24px}
.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 .lead{max-width:60ch}

/* ---------- producttabs ---------- */
.tabs{list-style:none;margin:0 0 18px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tab{position:relative;display:flex;align-items:center;gap:8px;width:100%;min-height:60px;padding:6px 10px 6px 8px;cursor:pointer;text-align:left;
  border:1px solid var(--lijn-goud-zacht);background:rgba(var(--rijst-rgb),.9);box-shadow:var(--schaduw-kaart);color:var(--inkt);
  transition:border-color var(--duur-kort) var(--ease),background var(--duur-kort) var(--ease)}
.tab .num{flex:none;width:20px;height:20px;font-size:11px}
.tab img{flex:none;width:46px;height:46px;border-radius:50%;object-fit:cover;background:var(--rijst) url(../../assets/orn/rijstpapier-tegel.jpg?v=766948a5) center/180% auto;
  box-shadow:0 0 0 2px var(--rijst),0 0 0 3px var(--lijn-goud)}
.tab b{font:500 .78rem/1.2 var(--f-kop);letter-spacing:.14em;text-transform:uppercase}
.tab:hover{border-color:var(--dgoud)}
.tab[aria-pressed=true]{border-color:var(--dgoud);background:var(--goudlicht);box-shadow:inset 0 -2px 0 var(--dgoud),var(--schaduw-kaart)}
@media (min-width:900px){.tabs{grid-template-columns:repeat(4,1fr);gap:12px}.tab{min-height:72px}.tab img{width:56px;height:56px}}

/* ---------- werkbank ---------- */
.werk-raster{display:grid;gap:22px;grid-template-columns:minmax(0,1fr)}
.werk-raster>*{min-width:0}
.werk-raster .paneel,.werk-raster .werk-podium{grid-area:auto}   /* showcase.css zet .paneel in een benoemd gebied */
@media (min-width:900px){
  .werk-raster{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px;align-items:start}
  .werk-podium{position:sticky;top:calc(var(--kop-hoogte) + 20px)}
}
.werk-podium .podium-knop.start{left:auto;right:14px;translate:none}
/* "geopend"-medaillon met het detail, zoals in de DSD-offerte */
.medaillon-knop{position:absolute;left:14px;bottom:14px;z-index:8;width:min(30cqmin,176px);aspect-ratio:1;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:var(--rijst) url(../../assets/orn/rijstpapier-tegel.jpg?v=766948a5) center/160% auto;
  box-shadow:0 0 0 3px var(--rijst),0 0 0 4.5px var(--dgoud),0 10px 24px rgba(42,33,23,.22);transition:transform var(--duur) var(--ease)}
.medaillon-knop::before{content:"";position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(70% 70% at 62% 36%,rgba(236,214,152,.55),rgba(236,214,152,.08));pointer-events:none}
.medaillon-knop img{position:relative;width:100%;height:100%;border-radius:50%;object-fit:cover}
.medaillon-knop .zegel{position:absolute;left:-4px;bottom:6px;width:24px;padding:3px 0;font-size:14px}
.medaillon-knop:hover{transform:scale(1.04)}
.podium.actief .medaillon-knop{opacity:0;pointer-events:none}
.podium-beeld img{transition:opacity var(--duur) var(--ease)}
.podium.wisselt .podium-beeld img{opacity:.25}

.werk-paneel{gap:16px}
.product-kop{display:grid;gap:8px}
.product-kop h3{margin:0;font:400 1.35rem/1.15 var(--f-kop);letter-spacing:.14em;text-transform:uppercase;color:var(--inkt)}
.product-kop .tekst{margin:0;color:var(--inkt2)}
.kenmerken{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:4px;font-size:var(--fs-s);color:var(--grijs1)}
.kenmerken li{position:relative;padding-left:18px}
.kenmerken li::before{content:"◆";position:absolute;left:0;top:.15em;color:var(--goud);font-size:.7em}
.knoppen.camera .knop[disabled]{opacity:.5;cursor:progress}

/* maattekening (goudlijn) */
.tekening{margin:0;padding:12px 12px 8px;border:1px solid var(--lijn-goud-zacht);background:rgba(var(--rijst-rgb),.75);box-shadow:var(--schaduw-kaart)}
.tekening .label{display:block;margin-bottom:6px}
.tekening svg{display:block;width:100%;height:auto}
.tekening .contour{fill:none;stroke:var(--inkt2);stroke-width:1.1;stroke-linejoin:round}
.tekening .hart{fill:none;stroke:var(--grijs2);stroke-width:.5;stroke-dasharray:9 3 2 3}
.tekening .maat{fill:none;stroke:var(--dgoud);stroke-width:.7}
.tekening .pijl{fill:var(--dgoud)}
.tekening text{font:500 11px var(--f-mono);fill:var(--dgoud)}

/* ---------- uitvoeringen (kaarten) ---------- */
.kaarten{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (min-width:700px){.kaarten{grid-template-columns:repeat(3,1fr);gap:16px}}
@media (min-width:1100px){.kaarten{grid-template-columns:repeat(4,1fr)}}
.kaart{display:grid;gap:6px;width:100%;padding:0;border:0;background:none;text-align:left;cursor:pointer;color:var(--inkt)}
.kaart img{width:100%;height:auto;aspect-ratio:1;box-shadow:var(--schaduw-kaart);transition:transform var(--duur) var(--ease),box-shadow var(--duur) var(--ease)}
.kaart:hover img{transform:translateY(-2px);box-shadow:0 1px 0 rgba(176,138,50,.35),0 12px 28px rgba(26,26,26,.12)}
.kaart b{font:500 .74rem/1.25 var(--f-kop);letter-spacing:.14em;text-transform:uppercase}
.kaart small{display:block;font:400 12px/1.35 var(--f-mono);color:var(--grijs1)}

/* ---------- werkwijze ---------- */
.stappen{list-style:none;margin:0;padding:0;display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
@media (min-width:700px){.stappen{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.stappen{grid-template-columns:repeat(3,1fr)}}
.stappen li{display:grid;grid-template-columns:auto 1fr;gap:12px;padding:16px;border:1px solid var(--lijn-goud-zacht);background:rgba(var(--rijst-rgb),.8);box-shadow:var(--schaduw-kaart)}
.stappen h3{margin:2px 0 6px;font:500 .9rem/1.2 var(--f-kop);letter-spacing:.14em;text-transform:uppercase;color:var(--inkt)}
.stappen p{margin:0;font-size:var(--fs-s);color:var(--inkt2)}

/* ---------- stillevens ---------- */
.stillevens{list-style:none;margin:0;padding:0;display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.stillevens{grid-template-columns:1fr 1fr;gap:20px}}
.stillevens a{display:block}
.stillevens img{width:100%;height:auto;aspect-ratio:3/2;box-shadow:var(--schaduw-kaart);transition:box-shadow var(--duur) var(--ease)}
.stillevens a:hover img{box-shadow:0 1px 0 rgba(176,138,50,.35),0 14px 30px rgba(26,26,26,.14)}

/* ---------- ronde 2: product nooit in de mist, ankers onder de kop, held op de telefoon ---------- */
/* De mist hoort bij de omgeving: hij ligt achter het product (beeld én 3D-doek), nooit eroverheen. */
.podium .podium-mist{z-index:1}
.podium .podium-beeld,.podium .podium-doek{z-index:2}
/* Ankers (menu, kaarten → werkbank) landen onder de vaste kop in plaats van eronder te verdwijnen. */
main section[id]{scroll-margin-top:calc(var(--kop-hoogte) + 12px)}
.zegel,.kalli-kolom .teken{font-family:'DSD Kalli Metaal',var(--f-kalli)}
/* Telefoon: het product staat boven de vouw, direct onder de titel (zoals de PDF opent met het object groot in beeld). */
@media (max-width:899px){
  .held{padding-top:14px}
  .held-raster{gap:0}
  .held-tekst{display:contents}
  .held-raster>.held-podium{order:3;margin:14px 0 6px}
  .held-tekst>.label{order:1;padding-right:72px}
  .held h1{order:2;margin-top:6px;font-size:clamp(2rem,1.2rem + 4vw,2.6rem);padding-right:64px}
  .held .vleugel{order:4}
  .held .lead{order:5;margin-top:4px}
  .held-feiten{order:6}
  .held-terug{order:7}
  .held-raster>.held-tekst>.kalli-kolom{position:absolute;right:0;top:0;z-index:2}
  .kalli-kolom .teken{font-size:34px}
  .held-raster>.held-tekst>.kalli-kolom .zegel{display:none}
}
/* miniaturen in de tabs: het product vult de cirkel, iets meer contrast op het papier */
.tab img{object-fit:contain;background-size:220% auto;filter:contrast(1.06)}
.kaart small::before{content:"bijv. ";color:var(--grijs2)}

/* ---------- ronde 3: held-typografie, 3D-knop onder het kader, werkbankbediening, bijschriften ---------- */
/* Desktop: tekstblok breed genoeg voor de eyebrow op één regel; "in 3D" breekt niet los. */
@media (min-width:1100px){
  .held-raster{grid-template-columns:minmax(560px,6fr) minmax(0,6fr)}
  .held h1{font-size:clamp(2.6rem,1.2rem + 3.2vw,4rem)}
}
.held h1 span{white-space:nowrap}
/* "Bekijk in 3D" staat onder het beeld, nooit over het product */
.held-3d{margin:12px 0 0;display:flex;justify-content:center}
.held-3d .knop{display:inline-flex;align-items:center;gap:10px;min-height:44px}
.held-3d svg{width:18px;height:18px;stroke:var(--dgoud);fill:none;stroke-width:1.5}
@media (min-width:900px){.held-raster>.held-3d{grid-column:2;margin-top:-4px}}
@media (max-width:899px){
  .held-raster>.held-3d{order:3;margin:0 0 8px}
  .held-raster>.held-podium{margin-bottom:0}
  /* bloesemtak achter de tekst en buiten het tekstblok: rechtsboven, klein en zacht */
  .held .tak{z-index:0;width:min(34vw,150px);right:-18px;top:-14px;opacity:.5}
  .held>.container{z-index:1}
  .held-tekst>.label{padding-right:92px}
  .held h1{font-size:clamp(1.6rem,0.9rem + 4.2vw,2.25rem);letter-spacing:.12em;padding-right:72px}
}
/* werkbank: kader met ornamenten als laag boven het doek; Sluit binnen het kader, ruim van het hoekornament */
.werk-podium .podium::after{z-index:6}
.werk-podium .podium-hoek{z-index:9}
.werk-podium .podium-knop.sluit{top:20px;right:44px;z-index:10}
.werk-podium .podium-hint{left:50%;top:auto;bottom:14px;translate:-50% 0;max-width:calc(100% - 64px);padding:6px 12px;white-space:nowrap;
  background:rgba(var(--rijst-rgb),.9);border:1px solid var(--lijn-goud-zacht);border-radius:999px;color:var(--grijs1)}
.werk-podium .podium.actief .podium-hint{animation:hint-weg 3.6s var(--ease) forwards}
@keyframes hint-weg{0%,75%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.werk-podium .podium.actief .podium-hint{animation:none;opacity:1}}
@media (max-width:640px){.werk-podium .podium-hint{font-size:11px;letter-spacing:.14em}}
/* bijschriften bij de stillevens */
.stillevens figure{margin:0}
.stillevens figcaption{margin:8px 2px 0;font-size:12px}
/* Het podium is breder gevuld dan zijn kader (bergen 110 %): met overflow:hidden kon een scrollIntoView/ankersprong
   het podium horizontaal verschuiven (ornamenten en linkerkaderrand vielen weg op de iPhone). clip = niet scrollbaar. */
.podium{overflow:hidden;overflow:clip}

/* ---------- ronde 4: held groter, mobiele kop rustig, minder lege banden ---------- */
.held-tekst>.label .kort{display:none}
/* Desktop: het product is het dominante element (± 56 % van de breedte, zoals het huis in de PDF); minder lucht onder de held */
@media (min-width:1100px){
  .held-raster{grid-template-columns:minmax(440px,4.4fr) minmax(0,5.6fr);gap:36px}
  .held{padding-bottom:40px}
}
@media (min-width:900px) and (max-width:1099px){.held{padding-bottom:48px}}
/* Telefoon (≤ 480 px): eyebrow op één regel, bloesem klein in de hoek, kalligrafie verticaal naast de titel */
@media (max-width:480px){
  .held-tekst>.label .lang{display:none}
  .held-tekst>.label .kort{display:inline}
  .held-tekst>.label{padding-right:0;white-space:nowrap}
  .held .tak{width:78px;right:-16px;top:-20px;opacity:.42}
  .held-raster>.held-tekst>.kalli-kolom{top:24px;right:2px}
  .kalli-kolom .teken{font-size:27px}
  .held h1{padding-right:52px}
}
/* Telefoon: secties dichter op elkaar (geen lege band van ± 100 px onder de vaste kop bij het scrollen) */
@media (max-width:899px){
  .groep{padding:36px 0 32px}
  .sectie-kop{margin-bottom:18px}
}

/* ---------- ronde 5: huisstijl-typografie (geen typemachine), rustiger tabs, 3D-knop onder het beeld op de telefoon ---------- */
/* Bijschriften als in de PDF: Cormorant italic, 'Bijvoorbeeld' in kleinkapitaal; maten breken niet af (nbsp in pagina.js) */
.werk-podium .bijschrift,.stillevens figcaption{font:italic 400 1.05rem/1.45 var(--f-serif);color:var(--inkt2);letter-spacing:.01em}
.bijschrift .bv{font-style:normal;font-variant:small-caps;letter-spacing:.08em;color:var(--dgoud)}
.stillevens figcaption{font-size:1rem}
/* optieknoppen en maten: schone sans met tabelcijfers (zoals het blok 'In één oogopslag') */
.werk-paneel .keuze span{font:500 .92rem/1 var(--f-tekst);font-variant-numeric:tabular-nums;letter-spacing:.01em}
.kaart small{font:400 13px/1.4 var(--f-tekst);font-variant-numeric:tabular-nums}
.tekening text{font-family:var(--f-tekst);font-variant-numeric:tabular-nums}
/* tabs: het rode zegel alleen op de actieve tab; anders een klein inktcijfer */
.tab .num{background:transparent;color:var(--grijs1);box-shadow:none;font:500 12px/1 var(--f-kop)}
.tab[aria-pressed=true] .num{background:var(--rood);color:var(--zegeltekst)}
/* terug-link nooit onder de vaste kop */
.held-terug a{scroll-margin-top:calc(var(--kop-hoogte) + 16px)}
@media (max-width:899px){.held-terug{padding-top:10px}}
/* Telefoon: 'Draai in 3D' onder het beeld, niet over product en medaillon */
@media (max-width:640px){
  .werk-podium .podium{overflow-x:clip;overflow-y:visible;margin-bottom:58px}   /* clip + visible mag samen: geen horizontale scroll */
  .werk-podium .podium-knop.start{top:calc(100% + 8px);bottom:auto;left:50%;right:auto;translate:-50% 0}
}
/* Telefoon: staande uitsnede van de stillevens (zonder ingebakken kader) */
.stillevens picture{display:block}
@media (max-width:640px){
  .stillevens img{aspect-ratio:1290/1600;
    box-shadow:0 0 0 1px rgba(176,138,50,.7),0 0 0 5px var(--rijst),0 0 0 6px rgba(176,138,50,.4),var(--schaduw-kaart)}   /* één (CSS-)kader */
  .stillevens{gap:26px;padding:0 6px}
}
/* Desktop: held ± 15 % groter (dominant zoals in de PDF), 3D-knop dichter op het beeld */
@media (min-width:1100px){
  .held-raster{grid-template-columns:minmax(420px,3.9fr) minmax(0,6.1fr);gap:32px}
  .held-raster>.held-3d{margin-top:-14px}
}

/* ---------- ronde 6: mobiele ondergrens 14 px, canon-details (G01 · G05 · L05 · TB09 · KV04/05), ornamenten vrij van tekst ---------- */
/* koppen en labels zonder weeswoorden */
h1,h2,h3,.lead,.rubriek .label{text-wrap:balance}
@media (max-width:640px){body .rubriek .label{letter-spacing:.14em}}
.held-feiten li{white-space:nowrap}
/* maten: Plex Mono met tabelcijfers (G01), ook in de Cormorant-bijschriften */
.maat{font-family:var(--f-mono);font-style:normal;font-variant-numeric:tabular-nums;font-size:.86em;letter-spacing:0;white-space:nowrap;color:var(--inkt)}
.kaart small .maat{font-size:.92em}
.kaart small::before{content:none}
.kaart .bijv{display:block;margin-top:2px;font:italic 400 .85rem/1.2 var(--f-serif);letter-spacing:.02em;text-transform:none;color:var(--grijs2)}

/* codebadge tegen de linkerrand van het podium (TB09) + in de productkop */
.code,.code-badge{display:inline-flex;align-items:center;background:#1A1A1A;color:#D9B45C;font:500 13px/1.1 var(--f-kop);letter-spacing:.14em;
  padding:4px 9px 3px;border-radius:2px;box-shadow:inset 0 0 0 1px rgba(217,180,92,.6)}
.code-badge{position:absolute;left:0;top:44px;z-index:9;border-radius:0 2px 2px 0;pointer-events:none}
.podium.actief .code-badge{opacity:.85}
/* haarlijn met korte, dikke goudstreep óp de lijn (L05) onder de productkop */
.specregel{position:relative;display:flex;align-items:center;gap:12px;margin:2px 0 4px;padding-top:12px;border-top:1px solid #C8BFAE}
.specregel::before{content:"";position:absolute;left:0;top:-2px;width:34px;height:3px;background:var(--dgoud)}
.specregel-tekst{font:400 .9rem/1.2 var(--f-serif);font-style:italic;color:var(--grijs1)}
/* "in één oogopslag" onder het podium: kerncijfer groot (G05) + specregels met goudstreep */
.spec-blok{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 28px;align-items:start;margin-top:18px;padding-top:14px;
  border-top:1px solid #C8BFAE;position:relative}
.spec-blok::before{content:"";position:absolute;left:0;top:-2px;width:34px;height:3px;background:var(--dgoud)}
.kerncijfer{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px;max-width:12rem}
.kerncijfer b{font:300 clamp(2.8rem,2rem + 2.4vw,4rem)/1 var(--f-kop);font-variant-numeric:tabular-nums;color:var(--inkt);letter-spacing:.02em}
.kerncijfer .eenheid{font:400 1rem/1 var(--f-kop);letter-spacing:.2em;color:var(--dgoud)}
.kerncijfer small{flex-basis:100%;margin-top:4px;font:italic 400 .95rem/1.2 var(--f-serif);color:var(--grijs1)}
.spec{list-style:none;margin:0;padding:0;display:grid;gap:0}
.spec li{position:relative;padding:8px 0 8px 0;border-bottom:1px solid rgba(200,191,174,.7);font-size:var(--fs-s);color:var(--inkt2)}
.spec li:first-child{padding-top:2px}
.spec li::after{content:"";position:absolute;left:0;bottom:-2px;width:18px;height:3px;background:var(--dgoud)}
@media (max-width:640px){.spec-blok{grid-template-columns:minmax(0,1fr);gap:12px}.specregel::before,.spec-blok::before{width:28px}}

/* medaillon vrij van het hoekornament (≥ 24 px van de hoek) */
.medaillon-knop{left:34px;bottom:34px}
@media (max-width:640px){.medaillon-knop{left:28px;bottom:28px}}

/* held: bergen niet door de tekst; papiergloed achter de tekstkolom; watermerk ≤ 6 % */
.held .watermerk{opacity:.045}
@media (min-width:900px){
  .held .bergen{left:auto;right:0;width:64%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 28%);mask-image:linear-gradient(90deg,transparent 0,#000 28%)}
  .held-tekst{isolation:isolate}
  .held-tekst::before{content:"";position:absolute;inset:-40px -70px -30px -60px;z-index:-1;pointer-events:none;
    background:radial-gradient(closest-side,rgba(var(--rijst-rgb),.88),rgba(var(--rijst-rgb),0))}
}

/* tabs: niet-actieve tabs krijgen een klein, strak cijferzegel (goudlijn), niet een los grijs teken */
.tab .num{width:22px;height:22px;border-radius:2px;box-shadow:inset 0 0 0 1px var(--dgoud);background:rgba(var(--rijst-rgb),.9);color:var(--dgoud);
  font:400 14px/1 'DSD Kalli Metaal',var(--f-kalli)}
.tab[aria-pressed=true] .num{box-shadow:inset 0 0 0 1px rgba(248,233,223,.35)}

/* galerij: legenda bij de genummerde posities (desktop; de telefoonbeelden hebben de legenda in het beeld) */
.beeld-legenda{list-style:none;display:flex;flex-wrap:wrap;gap:4px 16px;margin:0 0 6px;padding:0;font:500 13px/1.3 var(--f-kop);letter-spacing:.16em;
  text-transform:uppercase;font-style:normal;color:var(--inkt)}
.beeld-legenda li{display:inline-flex;align-items:center;gap:6px}
.beeld-legenda .nr{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--dgoud);
  font:600 13px/1 var(--f-serif);letter-spacing:0;color:#8C6B22;background:#F7F1E3}
@media (max-width:640px){.beeld-legenda{display:none}}

/* voet: bergen lopen naar transparant uit (geen harde rechthoekranden, X07); web in goud, uitdovende lijnen, voetzegel 龍 (KV04/05) */
.voet img{-webkit-mask-image:radial-gradient(ellipse 52% 90% at 50% 100%,#000 35%,transparent 100%);
  mask-image:radial-gradient(ellipse 52% 90% at 50% 100%,#000 35%,transparent 100%);opacity:.26}
.voet-regel{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-bottom:6px!important}
.voet .web{color:var(--dgoud);letter-spacing:.3em;text-decoration:none}
.voet-lijn{flex:0 1 90px;height:1px;background:linear-gradient(90deg,rgba(176,138,50,.08),rgba(176,138,50,.6),rgba(176,138,50,.08))}
.voet-sectie{color:var(--grijs2);letter-spacing:.3em}
.voet-zegel{display:inline-grid;place-items:center;width:17px;height:17px;border-radius:2px;background:var(--rood);color:var(--zegeltekst);
  font:400 12px/1 'Noto Serif SC',serif;letter-spacing:0;box-shadow:inset 0 0 0 1px rgba(248,233,223,.25)}

/* werkbank desktop: geen lege band onder het podium (spec-blok vult; podium blijft sticky) */
@media (min-width:900px){.werk-podium{position:static}}   /* podium + spec + werktekening: kolommen lopen gelijk, geen sticky nodig */

/* telefoon: geen tekst kleiner dan 14 px (DETAILCANON §0) */
@media (max-width:640px){
  body .label,body .held-feiten,body .held-feiten li,body .rubriek .label,body .tab b,body .varianten legend,body .varianten small,body .keuze small,
  body .kop summary,body .kop nav a,body .merk-naam small,body .held-terug a,body .knop,body .voet,body .voet a,body .voet p,
  body .kaart small,body .kaart b,body .kaart .bijv,body .stillevens figcaption,body .kenmerken,body .noot,body .tekening .label,
  body .specregel-tekst,body .spec li,body .code,body .code-badge,body .bijschrift{font-size:max(14px,1em)}
  body .label,body .varianten legend,body .tab b,body .held-feiten,body .kop summary,body .held-terug a,body .knop,body .voet{font-size:14px}
  body .tab b{letter-spacing:.06em}
  body .held h1 span{font-size:max(15px,.42em)}
  body .werk-podium .podium-hint{font-size:14px;letter-spacing:.04em;white-space:normal;text-align:center;line-height:1.25}
  body .tekening text{font-size:14.5px}
  body .medaillon-knop .zegel{font-size:15px}
  body .voet{letter-spacing:.12em}
  body .voet-lijn{display:none}
  body .voet-regel{column-gap:12px;row-gap:0}
  body .voet .web{flex-basis:100%;letter-spacing:.14em}
  body .maat,body .kaart small .maat{font-size:max(14px,.9em)}
  body .merk-naam,body .podium-knop{font-size:14px}
}

/* desktop: onder het podium "in één oogopslag" en de werktekening naast elkaar → beide kolommen lopen even lang */
@media (min-width:900px){
  .werk-podium{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:24px;align-items:start}
  .werk-podium>.podium,.werk-podium>.bijschrift{grid-column:1/-1}
  .werk-podium>.spec-blok{grid-template-columns:minmax(0,1fr);gap:10px}
  .werk-podium>.spec-blok:last-child{grid-column:1/-1;grid-template-columns:auto minmax(0,1fr);gap:8px 28px}
  .werk-podium .tekening{margin-top:18px}
}