/* /demo/: de klikbare voorbeeldwerkruimte met rondleiding.
   Vorm van de rondleiding naar de vPlan-demo (punt op het onderdeel, donkere
   ballon met teller en vorige/volgende, startscherm over een vervaagd scherm);
   alle waarden uit de stijlgids. De voortgang is de meetlat, met een streep per
   stap. Rondloop: ux-onderzoek/rondloop-vplan-supademo.md. */

/* Het venster komt uit het oude component-systeem en leest nog een deel van
   diens namen. Tot fase 5 (24 oktober 2026) stonden ze in home-redesign.css,
   dat niet meer laadt; hier met dezelfde waarden, zodat er niets verschuift.
   De .zh-regels onderaan zetten de kleuren op de merktokens. */
:root{
  --ink:#211812;--ink-soft:#5b4d43;--ink-faint:#7a6b5d;
  --clay:#c0553a;--clay-deep:#9c3f28;--clay-wash:#f2ddd2;
  --sand:#f4ece0;--parchment:#faf5ee;--paper:#fff;--cream:#f9f1e4;
  --ocher:#dca63f;--ocher-tekst:#8f6414;--line:#e6dac9;--line-2:#d8c8b2;
  --fd:"Fraunces",Georgia,serif;--fs:"Hanken Grotesk",system-ui,sans-serif;
  --e:cubic-bezier(.22,1,.36,1);--wide:1320px;
}
.dmstart__kaart .kicker{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--fs);font-weight:700;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--clay-deep)}

.dmhero{padding-block:clamp(1.8rem,3vh,3rem) clamp(1.4rem,2vh,2rem)}
.dmhero__grid{display:grid;grid-template-columns:minmax(0,1.3fr) auto;gap:clamp(1.4rem,4vw,4rem);align-items:end;margin-top:1rem}
.dmhero__cta{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:flex-end}

.dmstage{background:var(--sand);padding:0 0 clamp(3rem,2rem + 4vw,5.5rem)}
.dmstage__wrap{width:min(100% - 2.6rem,var(--wide));margin-inline:auto}
.dmstage{scroll-margin-top:92px}

.dmframe{background:var(--paper);border-radius:22px;overflow:hidden;border:1px solid var(--line);box-shadow:0 34px 74px rgba(33,24,18,.18),0 2px 8px rgba(33,24,18,.08)}
.dmframe__bar{display:flex;align-items:center;gap:1rem;padding:.6rem .9rem;background:var(--parchment);border-bottom:1px solid var(--line)}
.dmframe__dots{display:flex;gap:6px;flex:none}
.dmframe__dots i{width:10px;height:10px;border-radius:50%;background:var(--line-2)}
.dmframe__adres{flex:1;min-width:0;max-width:420px;margin-inline:auto;padding:.32rem .9rem;border-radius:999px;background:var(--paper);border:1px solid var(--line);font-size:.8rem;color:var(--ink-faint);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dmframe__los{flex:none;display:inline-flex;align-items:center;min-height:44px;padding-inline:.4rem;font-size:.85rem;font-weight:650;color:var(--ocher-tekst);text-decoration:none}
.dmframe__weer{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0;border:0;background:none;font:inherit;cursor:pointer}
.dmframe__weer span{padding:.28rem .8rem;border-radius:999px;border:1.5px solid var(--line-2);background:var(--paper);font-size:.8rem;font-weight:650;color:var(--ink);transition:border-color .2s var(--e),background .2s var(--e)}
.dmframe__weer[hidden]{display:none}
.dmframe__weer:focus-visible{outline:none}
.dmframe__weer:focus-visible span{outline:2.5px solid var(--clay);outline-offset:2px}
@media(hover:hover){
	.dmframe__los{transition:color .2s var(--e)}
	.dmframe__los:hover{text-decoration:underline;text-underline-offset:3px}
	.dmframe__weer:hover span{border-color:var(--ocher);background:var(--parchment)}
}

/* Venster plus balk en voet passen samen onder de vaste siteheader. */
.dmframe__view{position:relative;height:clamp(520px,calc(100vh - 250px),860px);height:clamp(520px,calc(100svh - 250px),860px);background:var(--sand)}
.dmframe__view iframe{position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%;border:0}
/* Het volgende scherm laadt in het iframe erachter (wissel() in demo.js). */
.dmframe__view iframe.is-wacht{z-index:0;opacity:0;pointer-events:none}

/* De rondleiding: een laag over het iframe die zelf geen klikken vangt. */
.dmtour{position:absolute;inset:0;pointer-events:none;z-index:2}
.dmtour[hidden]{display:none}
.dmtour__punt{position:absolute;left:0;top:0;width:44px;height:44px;margin:-22px 0 0 -22px;border:0;padding:0;background:transparent;cursor:pointer;pointer-events:auto;transition:transform .35s var(--e)}
.dmtour__punt::before{content:"";position:absolute;inset:11px;border-radius:50%;background:var(--ocher);box-shadow:0 0 0 3px var(--paper),0 4px 12px rgba(33,24,18,.35)}
.dmtour__punt::after{content:"";position:absolute;inset:11px;border-radius:50%;border:2px solid var(--ocher);animation:dm-puls 1.6s var(--e) infinite}
.dmtour__punt[hidden]{display:none}
@keyframes dm-puls{from{transform:scale(1);opacity:.9}to{transform:scale(2.6);opacity:0}}

.dmtour__ballon{position:absolute;left:0;top:0;width:min(340px,calc(100% - 24px));padding:1.1rem 1.15rem .95rem;border-radius:16px;background:var(--ink);color:var(--cream);box-shadow:0 18px 44px rgba(33,24,18,.38);pointer-events:auto;transition:transform .35s var(--e),opacity .25s var(--e)}
/* De ballon krijgt focus als houder voor de schermlezer; de knoppen erin dragen de focusring. */
.dmtour__ballon:focus{outline:none}
.dmtour__bouw{display:inline-block;margin:0 0 .5rem;padding:.2rem .6rem;border-radius:999px;background:var(--clay-wash);color:var(--clay-deep);font-size:.72rem;font-weight:700;letter-spacing:.04em}
.dmtour__bouw[hidden]{display:none}
.dmtour__titel{margin:0 2rem .35rem 0;font-family:var(--fd);font-weight:380;font-size:1.22rem;line-height:1.2;color:var(--cream)}
.dmtour__tekst{margin:0;font-size:.95rem;line-height:1.5;color:var(--sand)}
.dmtour__tekst b{color:var(--cream);font-weight:650}
.dmtour__voet{display:flex;align-items:center;gap:.5rem;margin-top:.95rem}
.dmtour__teller{margin-right:auto;font-size:.8rem;color:#c3b2a2;font-variant-numeric:tabular-nums}
.dmtour__knop{min-height:44px;padding:0 1.1rem;border-radius:999px;border:1.5px solid var(--ocher);background:var(--ocher);color:var(--ink);font:inherit;font-size:.9rem;font-weight:650;cursor:pointer;transition:background .2s var(--e),transform .2s var(--e)}
.dmtour__knop--stil{background:transparent;border-color:rgba(249,241,228,.3);color:var(--cream)}
.dmtour__knop[disabled]{border-color:rgba(195,178,162,.35);color:#c3b2a2;cursor:default}
.dmtour__knop:focus-visible,.dmtour__dicht:focus-visible{outline:2.5px solid var(--clay);outline-offset:2px}
.dmtour__dicht{position:absolute;top:.35rem;right:.35rem;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:#c3b2a2;font-size:1.5rem;line-height:1;cursor:pointer;transition:color .2s var(--e),background .2s var(--e)}
@media(hover:hover){
	.dmtour__knop:not([disabled]):hover{background:#e8b954;border-color:#e8b954;transform:translateY(-1px)}
	.dmtour__knop--stil:not([disabled]):hover{background:rgba(249,241,228,.08);border-color:var(--cream);transform:translateY(-1px)}
	.dmtour__dicht:hover{color:var(--cream);background:rgba(249,241,228,.08)}
}

/* Start- en eindscherm, over een vervaagde werkruimte. */
.dmstart{position:absolute;inset:0;z-index:3;display:grid;place-items:center;padding:1rem;background:rgba(33,24,18,.28);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.dmstart[hidden]{display:none}
.dmstart__kaart{width:min(460px,100%);padding:clamp(1.4rem,1rem + 2vw,2.2rem);border-radius:22px;background:var(--parchment);box-shadow:0 34px 74px rgba(33,24,18,.3);text-align:center}
.dmstart__kaart .kicker{justify-content:center}
.dmstart__kaart h2{margin:.5rem 0 .6rem;font-family:var(--fd);font-weight:380;font-size:clamp(1.6rem,1.2rem + 1.4vw,2.2rem);line-height:1.1;letter-spacing:-.01em;text-wrap:balance}
.dmstart__kaart p{margin:0 auto;max-width:36ch;color:var(--ink-soft);line-height:1.5}
.dmstart__knoppen{display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem;margin-top:1.4rem}
.dmstart__icoon{display:none}
.dmstart__link{display:inline-flex;align-items:center;min-height:44px;margin-top:.4rem;padding:0 .4rem;border:0;background:none;font:inherit;font-size:.9rem;font-weight:650;color:var(--ocher-tekst);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.dmstart__link:focus-visible{outline:2.5px solid var(--clay);outline-offset:2px;border-radius:4px}

/* Onder het venster: de meetlat als voortgang en de uitleg bij het scherm. */
.dmframe__voet{padding:.9rem clamp(1rem,2vw,1.6rem) 1.1rem;border-top:1px solid var(--line);background:var(--parchment)}
/* Het recept van .artbar (inner.css): een fijne streep per 12px, de stappen als grove streep. */
.dmlat{position:relative;height:10px;background:repeating-linear-gradient(90deg,rgba(33,24,18,.28) 0 1px,transparent 1px 12px) left top/100% 4px no-repeat}
.dmlat[hidden]{display:none}
.dmlat__vul{position:absolute;left:0;top:0;height:3px;width:0;background:var(--ocher);transition:width .45s var(--e)}
.dmlat__streep{position:absolute;top:0;height:10px;width:1px;background:rgba(33,24,18,.4)}
.dmuitleg[hidden]{display:none}
.dmuitleg{margin:.7rem 0 0;font-size:.95rem;line-height:1.5;color:var(--ink-soft)}
.dmuitleg b{color:var(--ink);font-weight:650}
.dmuitleg .dmpil{display:inline-block;margin-left:.35rem;padding:.08rem .5rem;border-radius:999px;background:var(--clay-wash);color:var(--clay-deep);font-size:.75rem;font-weight:700;vertical-align:1px}

.dmnote{margin:.9rem 0 0;font-size:.85rem;color:var(--ink-soft);text-align:center}

@media(max-width:860px){
	.dmhero__grid{grid-template-columns:1fr;align-items:start}
	.dmhero__cta{justify-content:flex-start}
}
@media(max-width:600px){
	.dmstage__wrap{width:min(100% - 2rem,var(--wide))}
	.dmframe{border-radius:16px}
	.dmframe__view{height:clamp(480px,calc(100svh - 230px),760px)}
	.dmframe__dots{display:none}
	/* Op de telefoon onderin vast, zodat de ballon nooit het onderdeel bedekt. */
	.dmtour__ballon{left:8px!important;right:8px;top:auto!important;bottom:8px;width:auto;transform:none!important}
	.dmhero__cta .btn{flex:1 1 100%}
}
@media(prefers-reduced-motion:reduce){
	.dmtour__punt::after{animation:none;opacity:0}
	.dmtour__punt,.dmtour__ballon,.dmlat__vul{transition:none}
}

/* ==========================================================================
   Het demovenster op de pagina's van de herbouw (body.zh): home en /product/.
   Kwam uit home.css (22 oktober 2026), zodat /product/ hetzelfde venster krijgt.
   Waarden uit tokens.css, regels uit merk/STYLEGUIDE.md.
   ========================================================================== */

/* Het ritme breekt een keer, rond de demo: twee keer de sectieruimte erboven. */
.zh-podium{
  max-width:calc(var(--ruimte-breed) * 1.18);margin:calc(var(--ruimte-sectie) * 2) auto 0;
  padding-inline:max(var(--ruimte-blok-s), env(safe-area-inset-left, 0px)) max(var(--ruimte-blok-s), env(safe-area-inset-right, 0px));
}

/* De demo-omlijsting uit demo.css, op home in het nieuwe merk. */
.zh .dmframe{
  background:var(--kleur-glas-paneel);border:1px solid var(--kleur-glas-paneel-rand);
  border-radius:var(--radius-paneel);box-shadow:var(--schaduw-glas);
}
.zh .dmframe__bar{background:transparent;border-bottom-color:var(--kleur-glas-paneel-rand)}
.zh .dmframe__dots i{background:var(--kleur-glas-ring-hover)}
.zh .dmframe__adres{background:var(--kleur-glas-vol);border-color:var(--kleur-glas-paneel-rand);color:var(--kleur-tekst-2)}
.zh .dmframe__los{color:var(--kleur-link)}
.zh .dmframe__view{background:var(--kleur-grond-diep)}
/* Kop, balk, venster en voet samen binnen het scherm, ook op een laptop van 643 hoog. */
@media (min-width:601px){.zh .dmframe__view{height:clamp(440px,calc(100svh - 230px),860px)}}
.zh .dmframe__voet{background:transparent;border-top-color:var(--kleur-glas-paneel-rand)}
.zh .dmuitleg{color:var(--kleur-tekst-2)}
.zh .dmuitleg b{color:var(--kleur-tekst)}
.dmframe__poster{position:absolute;inset:0;z-index:1;overflow:hidden}
.dmframe__poster img{width:100%;height:100%;object-fit:cover;object-position:0 0}
.dmframe__poster[hidden]{display:none}
.zh .dmstart{
  background:color-mix(in srgb, var(--kleur-grond) 55%, transparent);-webkit-backdrop-filter:none;backdrop-filter:none;
}
/* Start: de poster blijft scherp, de kaart staat klein onderin. */
.zh .dmstart[data-demo-scherm="start"]{
  align-items:end;padding:clamp(1rem,2.5vw,2rem);
  background:linear-gradient(to bottom, transparent 35%, color-mix(in srgb, var(--kleur-grond) 70%, transparent));
}
.zh .dmstart[data-demo-scherm="start"] .dmstart__kaart{width:min(420px,100%);padding:var(--ruimte-blok-l)}
body.zh .dmstart[data-demo-scherm="start"] .dmstart__kaart h2{font-size:var(--type-maat-inleiding);margin:.35rem 0 .4rem}
.zh .dmstart[data-demo-scherm="start"] .dmstart__knoppen{margin-top:var(--ruimte-blok-m)}
.zh .dmstart__kaart{background:var(--kleur-grond);border-radius:var(--radius-kaart);box-shadow:var(--schaduw-op)}
.zh .dmstart__kaart .kicker{
  font-size:var(--type-maat-groepslabel);letter-spacing:var(--type-spatie-groepslabel);
  font-weight:var(--type-gewicht-label);color:var(--kleur-tekst-2);
}
.zh .dmstart__kaart .kicker::before{content:none}
body.zh .dmstart__kaart h2{font-family:var(--type-familie-tekst);font-weight:var(--type-gewicht-kop);letter-spacing:var(--type-spatie-kop)}
.zh .dmstart__kaart p{color:var(--kleur-tekst-2)}
.zh .dmstart__link{color:var(--kleur-link)}
/* In de demo zijn alle knoppen gewone knoppen, op het eindscherm na: de hero
   draagt al het goud, en een goudknop per scherm (STYLEGUIDE 5). */
.zh .dmframe .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:var(--ruimte-knop);padding:0 1.35em;
  border-radius:var(--radius-pil);border:1px solid var(--kleur-glas-rand);background:var(--kleur-glas-vol);
  box-shadow:inset 0 0 0 1px var(--kleur-glas-ring);color:var(--kleur-tekst);
  font:var(--type-gewicht-label) var(--type-maat-knop)/var(--type-regel-ui) var(--type-familie-tekst);cursor:pointer;
  transition:background var(--motion-duur-hover) var(--motion-curve-uit),transform var(--motion-duur-druk) var(--motion-curve-uit);
}
.zh .dmstart[data-demo-scherm="einde"] .btn.ocher{background:var(--kleur-actie);border-color:var(--kleur-actie);box-shadow:none;color:var(--kleur-op-actie)}
.zh .dmframe .btn:active{transform:scale(var(--motion-schaal-druk))}
.zh .dmtour__knop:not(.dmtour__knop--stil){background:var(--kleur-actie);border-color:var(--kleur-actie);color:var(--kleur-op-actie)}
.zh .dmtour__knop[disabled]{visibility:hidden}
/* Op de startkaart is Zelf rondklikken de tweede weg: een tekstlink, geen tweede knop. */
.zh .dmstart[data-demo-scherm="start"] .btn.ghost{
  padding:0 .4rem;border:0;background:none;box-shadow:none;color:var(--kleur-link);
  text-decoration:underline;text-underline-offset:3px;
}
@media (hover:hover) and (pointer:fine){
  .zh .dmframe .btn:hover{background:var(--kleur-vlak);box-shadow:inset 0 0 0 1px var(--kleur-glas-ring-hover);transform:none}
  .zh .dmstart[data-demo-scherm="start"] .btn.ghost:hover{background:none;box-shadow:none;color:var(--kleur-tekst);text-decoration-thickness:2px}
  .zh .dmtour__knop:not(.dmtour__knop--stil):not([disabled]):hover{background:var(--kleur-actie-hover);border-color:var(--kleur-actie-hover)}
  .zh .dmstart[data-demo-scherm="einde"] .btn.ocher:hover{background:var(--kleur-actie-hover)}
}

/* De meetlat van de demo is de signature move (docs/concept.md): streepjes op een
   basislijn in kleur.rand, en wat je al gezien hebt is opengevouwen in kleur.actie.
   Is de rondleiding klaar, dan vouwt hij dicht en staat het app-icoon naast
   Start je proef. Dezelfde duur en curve als het woordmerk in de kop. */
.zh .dmlat,.zh .dmlat__vul{
  background:
    repeating-linear-gradient(90deg, var(--lat-streep) 0 1px, transparent 1px 12px) left bottom / 100% 6px no-repeat,
    linear-gradient(var(--lat-streep), var(--lat-streep)) left bottom / 100% var(--lat-lijn) no-repeat;
}
.zh .dmlat{
  --lat-streep:var(--kleur-rand);--lat-lijn:1px;height:10px;transform-origin:left center;
  transition:transform var(--motion-duur-vouw) var(--motion-curve-uit),opacity var(--motion-duur-vouw) var(--motion-curve-uit);
}
.zh .dmlat__vul{
  --lat-streep:var(--kleur-actie);--lat-lijn:2px;height:10px;
  transition:width var(--motion-duur-lade) var(--motion-curve-uit);
}
.zh .dmlat__streep{height:10px;background:var(--kleur-tekst-3)}
.zh [data-demo-klaar] .dmlat{transform:scaleX(0);opacity:0}
.zh .dmstart__icoon{
  display:inline-grid;place-items:center;width:var(--ruimte-knop);height:var(--ruimte-knop);flex:none;
  border-radius:var(--radius-tegel);background:var(--kleur-balk);
}
.zh [data-demo-klaar] .dmstart__icoon{animation:zh-icoon var(--motion-duur-vouw) var(--motion-curve-uit) both}
@keyframes zh-icoon{from{transform:scaleX(.2);opacity:0}to{transform:none;opacity:1}}

@media (max-width:600px){
  .zh .dmframe__view{height:clamp(440px,calc(100svh - 200px),640px)}
}
@media (prefers-reduced-motion:reduce){
  .zh .dmlat,.zh .dmlat__vul{transition:none}
  .zh [data-demo-klaar] .dmstart__icoon{animation:none}
}