/* Landingspagina als productshowcase. Bouwt op tokens.css en site.css; alleen voor body.showcase.
   Vaste art direction: de hele pagina is donker (data-theme="dark" op body, besluit 2026-10-08). Secties wisselen
   alleen tussen --night-0 en --night-50, zodat er nergens fel wit tussen het donker staat.
   Kiln is hier alleen licht van het apparaat (zand, focusring, de punt op de i), nooit vlak of decoratie. */

.showcase .kop{position:absolute;top:0;left:0;right:0;z-index:5;}
.showcase section{padding:0;}
.showcase .binnen{max-width:1280px;}
.showcase [data-theme="dark"]{color:var(--color-text-primary);}
.showcase h2{font-size:clamp(34px,4.6vw,64px);line-height:1.02;letter-spacing:-.035em;}

/* ── Het ritueel: de zandloper blijft staan, de stappen schuiven erlangs ── */

.verhaal{--scene:var(--night-0);--gloed:rgba(224,138,92,.2);--gloed-y:50%;--gloed-kracht:.45;
  position:relative;background-color:var(--scene);color:var(--color-text-primary);transition:background-color 700ms var(--ease-settle);}
/* Pauze: de hele kamer kleurt mee, zoals in de app (pauzeDonker). */
.verhaal[data-modus="pauze"]{--scene:#1F241C;--gloed:rgba(159,176,143,.2);}

.podium{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:center;gap:clamp(40px,6vw,96px);background-color:var(--scene);transition:background-color 700ms var(--ease-settle);}
.kast{transition:transform 90ms linear;will-change:transform;}
.zandloper{position:relative;isolation:isolate;aspect-ratio:74/142;}
/* De gloed hangt in de zandloper, dus draait hij mee en zit hij waar het zand brandt. */
.zandloper::before{content:"";position:absolute;z-index:-1;left:50%;top:var(--gloed-y);width:240%;aspect-ratio:1;transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,var(--gloed),transparent);opacity:var(--gloed-kracht);pointer-events:none;
  transition:top 500ms var(--ease-settle),opacity 600ms var(--ease-settle);}
.zandloper svg{display:block;width:100%;height:100%;filter:drop-shadow(0 0 48px rgba(0,0,0,.55));}
.zandloper .punten{filter:drop-shadow(0 0 .6px rgba(224,138,92,.6));}
.verhaal[data-modus="pauze"] .zandloper .punten{filter:drop-shadow(0 0 .6px rgba(159,176,143,.6));}
.verhaal:not(.live) .podium{display:none;}
.verhaal:not(.live) .stap{min-height:0;margin:0;padding:var(--space-16) var(--rand) 0;}
.verhaal:not(.live) .stap:last-child{padding-bottom:var(--space-20);}

/* Telefoon: wat er tegelijk op je iPhone gebeurt */
.telefoon{flex:none;aspect-ratio:9/19.5;border-radius:16% / 7.4%;padding:4%;background:var(--night-150);box-shadow:inset 0 0 0 1px var(--night-200),0 30px 60px rgba(0,0,0,.45);}
.scherm{height:100%;border-radius:13% / 6%;background:var(--night-50);padding:22% 9% 0;display:flex;flex-direction:column;}
.fase{font-size:.8em;line-height:1.3;color:var(--color-text-secondary);}
.tijd{font-size:2.6em;line-height:1;font-weight:300;letter-spacing:-.03em;margin:.15em 0 .9em;}
.rijen{list-style:none;margin:0;padding:0;font-size:.72em;line-height:1.35;}
.rijen li{display:flex;flex-direction:column;gap:.35em;padding:.85em 0;border-top:1px solid var(--night-200);}
.rijen small{display:block;font-size:1em;color:var(--color-text-tertiary);}
.soort{font-weight:600;}
.staat{display:inline-flex;align-items:center;gap:.5em;font-weight:500;color:var(--color-text-secondary);transition:color 300ms;}
.staat::before{content:"";width:.6em;height:.6em;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--color-text-tertiary);transition:background-color 300ms,box-shadow 300ms;}
[data-stand="open"] .staat{color:var(--color-mode-break);}
[data-stand="open"] .staat::before{background:var(--color-mode-break);box-shadow:none;}

.stap{display:flex;flex-direction:column;justify-content:center;padding:0 var(--rand);}
.stap .groot{max-width:440px;margin-top:var(--space-5);}
.verhaal.live .stap{opacity:.3;transition:opacity 400ms var(--ease-settle);}
.verhaal.live .stap.actief{opacity:1;}
.held h1{font-size:clamp(56px,8.4vw,128px);line-height:.95;letter-spacing:-.05em;}
.held .onder{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4) var(--space-6);margin-top:var(--space-8);}
.held .prijs{color:var(--color-text-secondary);font-size:13px;line-height:18px;}

@media (min-width:860px){
  .verhaal{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);}
  .stappen-kolom{grid-column:1;grid-row:1;padding-left:max(0px,calc((100vw - 1280px) / 2));}
  .podium{grid-column:2;grid-row:1;align-self:start;height:100vh;height:100svh;}
  .zandloper{height:min(70vh,640px);}
  .telefoon{width:clamp(150px,13vw,200px);font-size:clamp(12px,1.05vw,15px);}
  .stap{min-height:100vh;min-height:100svh;}
  .stap+.stap{margin-top:-10vh;}
  .held{padding-top:72px;}
}

/* Smal: zandloper en telefoon bovenin vast, de tekst schuift eronder door. */
@media (max-width:859px){
  .podium{height:56svh;padding-top:56px;}
  .zandloper{height:38svh;}
  .telefoon{width:min(30vw,132px);font-size:min(2.6vw,11px);}
  .rijen small{display:none;}
  .rijen li{padding:.7em 0;}
  .stap{min-height:72svh;justify-content:flex-start;padding-top:6svh;}
  .stap:last-child{min-height:90svh;}
  .held h1{font-size:clamp(44px,13vw,64px);}
}

/* Smal: het ritueel als losse scènes (voorstel A). Elke scène staat even stil terwijl de zandloper loopt;
   de tekst blijft staan. Gebouwd door showcase.js; desktop gebruikt .podium en .stappen-kolom. */
.scenes{display:none;}
@media (max-width:859px){
  .verhaal.live .podium,.verhaal.live .stappen-kolom{display:none;}
  .verhaal.live .scenes{display:block;}
  /* Ook de scène zelf kleurt mee: op iPhone wordt onder de vaste scène zichtbaar wat eronder ligt als de adresbalk inklapt. */
  .scene{position:relative;background-color:var(--scene);transition:background-color 700ms var(--ease-settle);}
  .scene[data-modus="pauze"]{--scene:#1F241C;--gloed:rgba(159,176,143,.2);}
  .scene-view{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background-color:var(--scene);transition:background-color 700ms var(--ease-settle);}
  .scene-tekst{position:absolute;left:var(--rand);right:var(--rand);top:max(48px,7svh);will-change:transform,opacity;}
  /* Pauze en verder: het spiegelbeeld van focus. De tekst eindigt even ver van de onderkant als hij bij focus van de bovenkant begint. */
  .scene-tekst.onderin{top:auto;bottom:max(48px,7svh);}
  .scene-tekst .groot{margin-top:var(--space-4);}
  /* --hoog 0 → 1: de zandloper (38svh + tijdregel 36px) schuift van 46svh vanaf boven naar 46svh vanaf onder. */
  .scene-toestel{position:absolute;left:0;right:0;top:46svh;display:flex;flex-direction:column;align-items:center;will-change:transform;transform:translateY(calc(var(--hoog,0) * (-30svh - 36px)));}
  .scene .zandloper{height:38svh;}
  /* Hero: tekst bovenin, de zandloper op vaste afstand eronder in de ruimte die overblijft. */
  .scene.held .scene-view{display:flex;flex-direction:column;padding:76px var(--rand) 4svh;}
  .scene.held .scene-tekst{position:relative;top:auto;left:auto;right:auto;flex:none;}
  .scene.held .scene-toestel{position:relative;top:auto;flex:1;min-height:0;margin-top:var(--space-10);}
  .scene.held .kast{flex:1;min-height:0;display:flex;justify-content:center;align-items:center;}
  .scene.held .zandloper{height:100%;max-height:36svh;}
  .scene.held .scene-regel{display:none;}
  .scene-regel{margin-top:var(--space-4);min-height:20px;font-size:15px;line-height:20px;color:var(--color-text-secondary);}
}

/* ── Foto en tekst tot aan de rand (sleutel, achterkant), in wisselende verhouding ── */

.split{display:grid;}
.split .beeld{position:relative;margin:0;}
.split .beeld img{display:block;width:100%;height:100%;object-fit:cover;border-radius:0;}
.split figcaption{position:absolute;left:var(--rand);bottom:var(--space-5);margin:0;color:var(--color-text-tertiary);}
.tekstvlak{padding:var(--space-16) var(--rand);max-width:640px;}
.tekstvlak .groot{margin-top:var(--space-5);}
.tekstvlak .groot+.groot{margin-top:var(--space-4);}
@media (max-width:859px){.split .beeld img{aspect-ratio:1;}}

.sleutel{background:var(--color-background-secondary);}
.sleutel .beeld img{background:var(--night-0);}
/* De sleutel staat los op het donker: passend schalen, zodat hij in het hoge paneel niet wordt afgesneden. */
@media (min-width:860px){.sleutel .beeld img{object-fit:contain;}}
.sleutel h2{font-size:clamp(40px,5.4vw,84px);line-height:.98;letter-spacing:-.04em;}
@media (min-width:860px){
  .sleutel{grid-template-columns:7fr 5fr;min-height:min(100vh,940px);}
  .split .beeld img{position:absolute;inset:0;}
  /* De tekst begint op de hoogte van de bovenkant van de sleutel in de foto. */
  .sleutel .tekstvlak{padding:clamp(80px,13vw,180px) clamp(40px,5vw,96px) var(--space-20);}
}

/* ── Op het bureau: het product los op de donkere paginakleur (--night-0), zonder studiovloer ── */

.bureau-beeld{position:relative;display:flex;justify-content:center;background:var(--night-0);}
.bureau-beeld img{display:block;width:min(100%,960px);height:auto;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(to right,transparent,#000 14%,#000 86%,transparent);}
.showcase .bureau-beeld h2{position:absolute;z-index:1;top:clamp(16px,4%,64px);left:var(--rand);color:#F5F2EC;font-size:clamp(28px,6.4vw,104px);line-height:.95;letter-spacing:-.045em;}
@media (min-width:860px){.showcase .bureau-beeld h2{left:max(var(--rand),calc((100vw - 1280px) / 2 + var(--rand)));max-width:6.5em;}}

.bureau-onder{background:var(--color-background-primary);}
.bureau-onder .groot{max-width:460px;margin-top:0;font-size:clamp(19px,1.8vw,24px);line-height:1.4;color:var(--color-text-primary);letter-spacing:-.01em;}
.bureau-onder .beeld img{background:var(--night-0);}
.specs{margin:var(--space-12) 0 0;}
.specs div{display:grid;grid-template-columns:150px 1fr;gap:var(--space-4);padding:var(--space-5) 0;border-top:1px solid var(--color-border);}
.specs div:last-child{border-bottom:1px solid var(--color-border);}
.specs dt{color:var(--color-text-tertiary);}
.specs dd{margin:0;}
@media (max-width:559px){.specs div{grid-template-columns:116px 1fr;}}
@media (min-width:860px){
  /* Half om half: bij 5fr 7fr werd de specskolom zo smal dat de waarden over meerdere regels braken. */
  .bureau-onder{grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:min(92vh,860px);}
  /* Geen max-width op het vlak zelf: de linkermarge groeit mee met brede schermen en at anders de tabel op
     (op 1920 px bleef er 27 px over voor de waarden). De tekst zelf krijgt een maximum. */
  .bureau-onder .tekstvlak{max-width:none;align-self:end;padding:var(--space-20) clamp(40px,5vw,96px) clamp(64px,9vw,128px) max(var(--rand),calc((100vw - 1280px) / 2 + var(--rand)));}
  .bureau-onder .specs{max-width:520px;}
}

/* ── Kleuren: de drie hulzen los op de donkere paginakleur (--night-0), net als "Van binnen" ── */

.kleuren{background:var(--color-background-primary);color:var(--color-text-primary);}
.kleuren-kop{padding-top:var(--space-20);}
.kleuren-kop .groot{max-width:460px;margin-top:var(--space-5);color:var(--color-text-secondary);}
.kleuren-beeld{position:relative;margin:var(--space-10) 0 0;}
/* Onderin loopt de vloer van de render uit in de sectieachtergrond. */
.kleuren-beeld img{display:block;width:100%;height:auto;border-radius:0;
  -webkit-mask-image:linear-gradient(#000 90%,transparent);mask-image:linear-gradient(#000 90%,transparent);}
.kleuren-beeld figcaption{position:absolute;left:var(--rand);bottom:0;margin:0;color:var(--color-text-tertiary);}
.kleuren-namen{list-style:none;display:grid;gap:var(--space-5);margin-top:var(--space-8);padding-bottom:var(--space-20);}
.kleuren-namen li{padding-top:var(--space-3);border-top:1px solid var(--color-border);font-size:15px;line-height:22px;color:var(--color-text-secondary);}
.kleuren-namen strong{display:block;font-weight:600;color:var(--color-text-primary);}
@media (min-width:860px){
  .kleuren-kop{display:grid;grid-template-columns:5fr 7fr;gap:var(--space-16);align-items:end;}
  .kleuren-kop .groot{margin-top:0;}
  /* Elke naam staat onder zijn huls: de midden van de kolommen vallen op 24, 50 en 79 % van de render. */
  .kleuren .kleuren-namen{max-width:none;padding-left:0;padding-right:0;gap:0;margin-top:var(--space-4);
    grid-template-columns:12fr 24fr 2fr 24fr 5fr 24fr 9fr;text-align:center;}
  .kleuren-namen li:nth-child(1){grid-column:2;}
  .kleuren-namen li:nth-child(2){grid-column:4;}
  .kleuren-namen li:nth-child(3){grid-column:6;}
}

/* ── Van binnen: de exploded view, op de achtergrond van de render (--night-0) ── */

.binnenkant{background:var(--color-background-primary);color:var(--color-text-primary);}
.binnenkant-kop{padding-top:var(--space-20);}
.binnenkant-kop .groot{max-width:460px;margin-top:var(--space-5);color:var(--color-text-secondary);}
.binnenkant-beeld{position:relative;margin:var(--space-10) 0 0;}
.binnenkant-beeld img{display:block;width:100%;height:auto;border-radius:0;
  -webkit-mask-image:linear-gradient(transparent,#000 8%,#000 80%,transparent);mask-image:linear-gradient(transparent,#000 8%,#000 80%,transparent);}
/* Op mobiel 4:3, zodat de onderdelen niet te klein worden; alle delen blijven in beeld. */
@media (max-width:859px){.binnenkant-beeld img{aspect-ratio:4/3;object-fit:cover;object-position:52% 50%;}}
.binnenkant-beeld figcaption{position:absolute;left:var(--rand);bottom:0;margin:0;color:var(--color-text-tertiary);}
.binnenkant-delen{list-style:none;display:grid;gap:var(--space-5);margin-top:var(--space-8);padding-bottom:var(--space-20);}
.binnenkant-delen li{padding-top:var(--space-3);border-top:1px solid var(--color-border);font-size:15px;line-height:22px;color:var(--color-text-secondary);}
.binnenkant-delen strong{display:block;font-weight:600;color:var(--color-text-primary);}
@media (min-width:860px){
  .binnenkant-kop{display:grid;grid-template-columns:5fr 7fr;gap:var(--space-16);align-items:end;}
  .binnenkant-kop .groot{margin-top:0;}
  .binnenkant-delen{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-8);}
}

/* ── Kop links, inhoud rechts (vragen) ── */

.kolommen{display:grid;gap:var(--space-10);}
@media (min-width:860px){
  .kolommen{grid-template-columns:4fr 8fr;gap:var(--space-16);align-items:start;}
  .kolommen>h2{position:sticky;top:var(--space-12);}
}

/* Klein, met opzet: drie uitspraken onder elkaar, op --night-50. Bewust geen drie kolommen zoals de onderdelen
   van "Van binnen" erboven, anders leest het als een vervolg van die lijst. */
.showcase .klein{padding:var(--space-20) 0;background:var(--color-background-secondary);}
.colofon{display:grid;gap:var(--space-8);}
.colofon ul{list-style:none;margin:0;padding:0;}
.colofon li{display:grid;gap:var(--space-2);padding:var(--space-6) 0;border-top:1px solid var(--color-border);font-size:15px;line-height:22px;color:var(--color-text-secondary);text-wrap:pretty;}
.colofon li:last-child{border-bottom:1px solid var(--color-border);}
.colofon strong{font-size:clamp(22px,2.4vw,32px);line-height:1.15;font-weight:500;letter-spacing:-.02em;color:var(--color-text-primary);}
@media (min-width:860px){
  .colofon{grid-template-columns:4fr 8fr;gap:var(--space-16);align-items:start;}
  .colofon li{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-8);align-items:baseline;}
}

/* ── Wachtlijst: geen kaart, de velden staan direct in de kamer ── */

.showcase .wachtlijst{padding:var(--space-24) 0;background:var(--color-background-primary);}
.showcase .wachtlijst .binnen{gap:var(--space-12);}
.showcase .wachtlijst .prijsregel{margin-top:var(--space-10);flex-wrap:wrap;column-gap:var(--space-4);}
.showcase .wachtlijst .prijsregel .bedrag{font-size:clamp(88px,12vw,184px);line-height:.85;font-weight:200;letter-spacing:-.06em;}
.showcase .formulier{background:none;border:0;border-radius:0;padding:0;}
@media (min-width:860px){
  .showcase .wachtlijst .binnen{grid-template-columns:7fr 5fr;gap:var(--space-16);}
  .showcase .formulier{padding-top:var(--space-3);}
}

.showcase .vragen-sectie{padding:var(--space-24) 0;background:var(--color-background-secondary);}
.showcase .voet{background:var(--color-background-secondary);}
.showcase .vragen{max-width:none;}