/* led/led.css — aanvulling op ../css/showcase.css voor de pagina Ledverlichting (mobiel eerst, tokens uit dsd-tokens.css).
   Schemer = warme sepiawas over het papier (nooit een inktzwart vlak); rood alleen voor zegels en nummers. */

/* ---------- schemer op het podium: warme was over het rijstpapier ----------
   Papier met een indigo → sepia-was van hooguit 55 % dekking (de vezel blijft zichtbaar; nooit een inktzwart vlak),
   een crème maan met zachte halo en bergen in gedempt indigo. Zelfde taal als de schemerrenders (compositie.js). */
.podium-schemer{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity var(--duur-lang) var(--ease);z-index:0;
  background:
    radial-gradient(circle at 56% 15%,#FBF4E2 0 3.6cqmin,#F0E3C2 4.6cqmin,rgba(236,222,186,.9) 5.1cqmin,rgba(250,238,206,.38) 5.5cqmin,rgba(240,226,190,.12) 13cqmin,rgba(240,226,190,0) 26cqmin),
    radial-gradient(55% 40% at 70% 70%,rgba(246,236,214,.14),rgba(246,236,214,0)),
    linear-gradient(rgba(72,74,100,.44),rgba(116,98,92,.36) 50%,rgba(146,110,72,.3)),
    url(../assets/orn/rijstpapier-tegel.jpg?v=766948a5) 0 0/42% auto repeat,#F4EFE4}
.podium.schemer .podium-schemer{opacity:1}
.podium.schemer .podium-maan{opacity:0}
.podium-maan{transition:opacity var(--duur-lang) var(--ease)}
.podium-bergen2{position:absolute;left:-12%;width:124%;max-width:none;bottom:24%;transform:scaleX(-1);opacity:0;pointer-events:none;z-index:1;
  filter:brightness(0) invert(.42) sepia(.4) hue-rotate(185deg) saturate(1.5);transition:opacity var(--duur-lang) var(--ease)}
.podium.schemer .podium-bergen2{opacity:.3}
.podium.schemer .podium-bergen{z-index:1;opacity:.4;filter:brightness(.55) sepia(.3) hue-rotate(190deg)}
.podium.schemer .podium-mist{background:linear-gradient(rgba(206,194,178,0),rgba(206,194,178,.5) 55%,rgba(214,204,190,.82))}
.podium.schemer::before{opacity:0}
.podium-beeld,.podium-doek{z-index:1}
.podium-tak{display:none}
.podium-mist{z-index:3}

/* bedieningsknoppen ruim binnen het kader: nooit over de gouden 回纹-hoeken (ornament 26 px + 32 px marge) */
.podium-avond{position:absolute;left:58px;top:14px;z-index:8;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;
  border:1px solid var(--lijn-goud);background:rgba(var(--rijst-rgb),.92);color:var(--inkt);cursor:pointer;
  font:500 var(--fs-xs)/1 var(--f-kop);letter-spacing:.2em;text-transform:uppercase}
.podium-avond svg{width:16px;height:16px;fill:none;stroke:var(--dgoud);stroke-width:1.6}
.podium-avond[aria-pressed=true]{background:var(--inkt2);color:var(--goudlicht);border-color:var(--dgoud)}
.podium-avond[aria-pressed=true] svg{fill:var(--goud);stroke:var(--goud)}
.podium-knop.sluit{right:58px;top:14px}
/* bedieningshint: papierkleurig pilletje onderin, op één regel, verdwijnt na de eerste interactie */
.podium-hint{left:50%;right:auto;top:auto;bottom:18px;translate:-50% 0;max-width:calc(100% - 40px);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;padding:8px 16px;background:rgba(243,238,226,.85);color:var(--inkt);border:1px solid var(--dgoud);
  letter-spacing:.18em;box-shadow:0 4px 14px rgba(26,26,26,.12);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.podium-hint .kort{display:none}
.podium.actief.bediend .podium-hint{opacity:0}
@media (max-width:640px){.podium-hint .lang{display:none}.podium-hint .kort{display:inline}.podium-hint{bottom:14px;padding:8px 14px}}

/* kalligrafie naast de titel, in de flow (verdwijnt niet half onder de vaste kop) */
.groep{scroll-margin-top:calc(var(--kop-hoogte) + 12px)}
.groep-kop{padding-right:0}
.titel-rij{display:flex;align-items:center;justify-content:space-between;gap:14px}
.groep .titel-rij .kalli{position:static;flex:none;font-size:clamp(46px,11vw,80px);line-height:1}

/* held: dagpodium */
.held-podium{box-shadow:0 18px 40px rgba(26,26,26,.16)}

/* ---------- kaarten (vier armaturen) ---------- */
.kaarten{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px;position:relative;z-index:1}
.kaarten a{position:relative;display:block;text-decoration:none;background:var(--rijst);border:1px solid var(--lijn-goud-zacht);
  box-shadow:var(--schaduw-kaart);transition:transform var(--duur) var(--ease),border-color var(--duur) var(--ease)}
.kaarten a:hover{transform:translateY(-2px);border-color:var(--dgoud)}
.kaarten img{width:100%;height:auto;aspect-ratio:1;background:#EFE7D6}
.kaarten b{display:flex;align-items:center;justify-content:center;min-height:44px;padding:6px 8px;border-top:1px solid var(--lijn-goud-zacht);
  font:500 var(--fs-xs)/1.2 var(--f-kop);letter-spacing:.2em;text-transform:uppercase;color:var(--inkt);text-align:center}
@media (min-width:900px){.kaarten{grid-template-columns:repeat(4,1fr);gap:16px}}

/* ---------- galerij (detail + avond) ---------- */
.galerij{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.medaille{position:relative;display:block;text-decoration:none;border:1px solid var(--lijn-goud-zacht);background:var(--rijst);overflow:hidden;
  box-shadow:var(--schaduw-kaart)}
.medaille img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;background:#EFE7D6}
.medaille span{position:absolute;left:0;right:0;bottom:0;padding:10px 8px;min-height:44px;display:flex;align-items:center;justify-content:center;
  background:rgba(var(--rijst-rgb),.9);font:500 var(--fs-xs)/1.2 var(--f-kop);letter-spacing:.22em;text-transform:uppercase;color:var(--inkt)}
.medaille:hover span{background:var(--goudlicht)}

/* varianten: iets compacter op de telefoon */
.varianten .keuze span{padding:0 11px}
@media (max-width:420px){.varianten .keuze span small{display:none}}

/* held: kortere titel dan de overzichtspagina, zodat het kalligrafische teken vrij blijft */
.held h1{font-size:clamp(1.9rem,0.9rem + 4.2vw,3.1rem);letter-spacing:.1em}
.held h1 .woord{display:inline;font-size:1em;letter-spacing:inherit;color:inherit;margin:0;white-space:nowrap}
@media (min-width:900px){.held h1{font-size:clamp(2.2rem,0.9rem + 2vw,2.95rem)}}

/* bergen onder de held lopen boven en onder uit in het papier (geen harde grijze band boven de eerste sectie) */
.held .bergen{-webkit-mask-image:linear-gradient(transparent,#000 38%,#000 72%,transparent);mask-image:linear-gradient(transparent,#000 38%,#000 72%,transparent)}
.held{padding-bottom:72px}

/* ---------- keuzeknoppen: woorden in Source Sans 3, alleen maten en RAL-nummers in Plex Mono (G01) ---------- */
.varianten .keuze span{font:500 var(--fs-s)/1 var(--f-tekst);letter-spacing:.01em}
.varianten .keuze span small{font:400 12px/1 var(--f-mono);font-variant-numeric:tabular-nums;letter-spacing:0}

/* telefoonnummer: Plex Mono, nooit afgebroken (ONTWERP §0.1 punt 9) */
.knop.tel{font:500 var(--fs-s)/1 var(--f-mono);letter-spacing:.02em;white-space:nowrap;text-transform:none}

/* ---------- slot: hoofdknop als papier met dubbele goudlijn (geen massief inktvlak) ---------- */
.slot .knop.goud{background:var(--rijst);color:var(--inkt);border:1px solid var(--dgoud);
  box-shadow:inset 0 0 0 3px var(--rijst),inset 0 0 0 4px rgba(176,138,50,.55)}
.slot .knop.goud:hover{background:var(--goudlicht)}

/* ---------- voet zoals in de offerte: webadres in goud, uitdovende haarlijnen met een klein 龍-zegel, sectienaam ---------- */
.voet-lijn{position:relative;display:grid;grid-template-columns:auto minmax(40px,1fr) auto;align-items:center;gap:14px;margin-bottom:18px}
.voet-web{color:#B08A32;letter-spacing:.22em}
.voet-sectie{color:var(--grijs2)}
.voet-mid{display:flex;align-items:center;gap:10px}
.voet-mid i{flex:1;height:1px}
.voet-mid i:first-child{background:linear-gradient(90deg,rgba(176,138,50,0),rgba(176,138,50,.8))}
.voet-mid i:last-child{background:linear-gradient(90deg,rgba(176,138,50,.8),rgba(176,138,50,0))}
.zegel.klein{width:22px;padding:3px 0;font:700 13px/1 var(--f-zh);transform:none;border-radius:2px}

/* ---------- telefoon: tak nooit over tekst, kalligrafie vrij van de H1 ---------- */
@media (max-width:640px){
  .held .tak{display:none}
  .podium-tak{display:block;position:absolute;right:10px;top:10px;width:40%;max-width:none;z-index:6;pointer-events:none;opacity:.92}
  .held-tekst{grid-template-columns:minmax(0,1fr) auto}
  .kalli-kolom{padding-top:6px}
}

/* ---------- telefoon (≤ 480 px): geen tekst kleiner dan 14 px (ONTWERP §0.1), minder spatiëring zodat niets breekt ---------- */
@media (max-width:480px){
  .label,.rubriek .label,.held-feiten,.kop nav a,.kop summary,.podium-knop,.podium-avond,.podium-hint,.kaarten b,.medaille span,
  .knop,.varianten legend,.merk-naam small,.voet,.voet a,.bijschrift,.noot{font-size:14px}
  .label,.rubriek .label,.held-feiten,.kop nav a,.kop summary,.podium-knop,.podium-avond,.kaarten b,.medaille span,.knop,.voet{letter-spacing:.14em}
  .varianten .keuze span,.varianten .keuze span small{font-size:14px}
  .merk-naam{font-size:15px;letter-spacing:.16em}
  .held h1 span{font-size:14px;letter-spacing:.2em}
  .voet-lijn{grid-template-columns:1fr;justify-items:center;gap:8px}
  .voet-mid{width:70%}
}