/* /product/ (templates/product.php): de hero met vier latten die de demo sturen,
   twee hoofdstukken met elk twee schermen en twee bewegende beelden, de maker,
   beginnen op het lichte vlak, uitzetten, de strook en het slot met de duimstok.
   Waarden uit tokens.css, regels uit merk/STYLEGUIDE.md, de poort in
   ux-onderzoek/poort-product.md. Gedeelde bouwstenen in pagina.css, het
   demovenster in demo.css, het gedrag in assets/js/product.js. */

#demo,#afspraak,#klanten,#uren,#facturen,#maker,#beginnen,#onderdelen,#meer{
  scroll-margin-top:calc(var(--ruimte-knop) + var(--ruimte-sectie));
}

/* ---------- 1. hero: kop, de latten, de demo ---------- */

.zr-hero{position:relative;isolation:isolate;padding-top:var(--ruimte-sectie)}
body.zh .zr-hero__titel{font-size:var(--type-maat-titel);max-width:16ch;line-height:var(--type-regel-kop);text-wrap:balance}
.zr-hero__onder{
  display:flex;justify-content:space-between;align-items:flex-end;gap:var(--ruimte-goot);
  margin-top:var(--ruimte-blok-l);
}
.zr-hero__onder .zh-inleiding{min-width:0}
.zr-hero__onder .zh-knoppen{flex:none}

/* De latten: vier stations op een duimstok. De lat loopt door tot de rand in
   kleur.rand; wat je in de demo al hebt gezien staat open in kleur.actie
   (--vul, gezet door product.js). Zelfde streepjes als de meetlat van de demo. */
.zr-lat{
  --lat-y:22px;
  position:relative;list-style:none;margin:var(--ruimte-blok-l) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
}
.zr-lat::before,.zr-lat::after{
  content:"";position:absolute;left:var(--lat-y);top:calc(var(--lat-y) - 5px);height:10px;pointer-events:none;
  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;
  transform-origin:left center;
}
.zr-lat::before{--lat-streep:var(--kleur-rand);--lat-lijn:1px;right:0}
.zr-lat::after{
  --lat-streep:var(--kleur-actie);--lat-lijn:3px;width:var(--vul, 0px);
  transition:width var(--motion-duur-lade) var(--motion-curve-uit);
}
.zr-lat li{position:relative;z-index:1;min-width:0}
.zr-lat__stap{
  display:grid;justify-items:start;gap:var(--ruimte-blok-s);min-height:var(--ruimte-tikdoel);padding:0;border:0;background:none;
  font:inherit;color:var(--kleur-tekst-2);text-align:left;cursor:pointer;
  transition:color var(--motion-duur-hover) var(--motion-curve-uit);
}
.zr-lat__station{
  display:grid;place-items:center;width:var(--ruimte-tikdoel);height:var(--ruimte-tikdoel);border-radius:50%;
  background:var(--kleur-grond);box-shadow:inset 0 0 0 1.5px var(--kleur-veld-rand);
  transition:background var(--motion-duur-kaart) var(--motion-curve-uit),box-shadow var(--motion-duur-kaart) var(--motion-curve-uit),
    transform var(--motion-duur-kaart) var(--motion-curve-uit);
}
.zr-lat__ico{width:22px;height:22px;fill:none;stroke:var(--kleur-tekst-2);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.zr-lat__naam{font-size:var(--type-maat-inleiding);font-weight:var(--type-gewicht-kop);line-height:var(--type-regel-ui)}
.zr-lat__stap.is-aan{color:var(--kleur-tekst)}
.zr-lat__stap.is-aan .zr-lat__station{background:var(--kleur-accent-goud-was);box-shadow:inset 0 0 0 1.5px var(--kleur-actie)}
.zr-lat__stap.is-aan .zr-lat__ico{stroke:var(--kleur-tekst)}
.zr-lat__stap:active .zr-lat__station{transform:scale(var(--motion-schaal-druk))}
@media (hover:hover) and (pointer:fine){
  .zr-lat__stap:hover{color:var(--kleur-tekst)}
  .zr-lat__stap:hover .zr-lat__station{box-shadow:inset 0 0 0 2px var(--kleur-actie);transform:translateY(calc(var(--motion-verplaatsing-kaart) * -1))}
}

/* Bij het laden vouwt de lat een keer uit en komen de stations erop. */
html.js .zr-lat::before{animation:zh-vouw-x var(--motion-duur-vouw) var(--motion-curve-uit) both;animation-delay:var(--motion-duur-menu)}
html.js .zr-lat li{animation:zh-in var(--motion-duur-lade) var(--motion-curve-uit) both;animation-delay:calc(var(--motion-duur-menu) + var(--i) * var(--motion-duur-hover))}

/* Het demovenster staat vlak onder de latten: ze horen bij elkaar, en na een klik
   staan ze samen in beeld. */
.zr-hero .zh-podium{margin-top:var(--ruimte-sectie)}

/* Na een klik op een lat komt de rij latten net onder de kop, en de knop erboven
   valt achter de kop: dan neemt de goudknop in de kop het over. */
.zr-lat{scroll-margin-top:calc(var(--ruimte-knop) + var(--ruimte-blok-l) + var(--ruimte-blok-l))}

/* ---------- 2 en 3. de hoofdstukken ---------- */

.zr-hfst__kop{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ruimte-blok-l) var(--ruimte-goot);
  align-items:end;padding-bottom:var(--ruimte-blok-l);
}
body.zh .zr-hfst__kop h2{max-width:14ch;text-wrap:balance}
.zr-schermen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ruimte-goot)}
.zr-scherm{display:grid;gap:var(--ruimte-blok-m);align-content:start}
body.zh .zr-kreet{
  font-size:var(--type-maat-inleiding);font-weight:var(--type-gewicht-kop);line-height:var(--type-regel-ui);
  letter-spacing:var(--type-spatie-kop);color:var(--kleur-tekst);text-wrap:balance;
}

/* Het raster van Linear: alleen binnenlijnen, de beelden spelen zichzelf. */
.zr-raster{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:var(--ruimte-blok-l);
  border-top:1px solid var(--kleur-rand);
}
.zr-raster .zr-vignet{padding:var(--ruimte-blok-l) var(--ruimte-goot) 0 0}
.zr-raster .zr-vignet + .zr-vignet{padding-inline:var(--ruimte-goot) 0;border-left:1px solid var(--kleur-rand)}
.zr-vignet{display:grid;gap:var(--ruimte-blok-m);align-content:start;min-width:0}
.zr-vignet__beeld{aspect-ratio:320 / 200}

/* ---------- de bewegende beelden: de K40-taal uit herbouw.css, groter getekend ---------- */

.zr-b .zb-lat{stroke-width:2}
.zr-b .zb-maat{stroke-width:1}
.zr-b .zb-vink circle{fill:var(--kleur-gelukt)}
.zk-b[data-stap] .zr-in:not(.is-aan){opacity:0;transform:translateX(calc(var(--motion-verplaatsing-kaart) * 4))}
.zr-pil rect{fill:var(--kleur-rij)}
.zr-pil path{fill:none;stroke:var(--kleur-tekst-2);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.zr-pil--verstuurd rect{fill:var(--kleur-accent-goud-was);stroke:var(--kleur-actie);stroke-width:1}
.zr-pil--verstuurd path{stroke:var(--kleur-tekst)}
.zr-pil--betaald rect{fill:var(--kleur-gelukt)}
.zr-pil--betaald path{stroke:var(--kleur-vlak)}
.zk-b[data-stap] .zr-pil[data-vanaf]:not(.is-aan){opacity:0;transform:translateY(calc(var(--motion-verplaatsing-kaart) * 2))}

/* ---------- 4 en 5. de maker, je boekhouding ---------- */

.zr-maker{padding-block:var(--ruimte-sectie)}
.zr-maker__in{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--ruimte-blok-m) var(--ruimte-goot);
  padding-block:var(--ruimte-blok-l);border-top:1px solid var(--kleur-rand);
}
.zr-maker__wie{display:flex;align-items:center;gap:var(--ruimte-blok-m);min-width:0;flex:1 1 30rem}
.zr-maker__wie img{width:72px;height:72px;border-radius:50%;flex:none}
.zr-maker__wie p{font-size:var(--type-maat-inleiding);line-height:var(--type-regel-tekst);color:var(--kleur-tekst-2);min-width:0}
.zr-maker__wie b{color:var(--kleur-tekst);font-weight:var(--type-gewicht-label)}
.zr-regel{
  display:flex;align-items:center;gap:var(--ruimte-blok-s);min-height:var(--ruimte-tikdoel);padding-block:var(--ruimte-blok-l);
  border-block:1px solid var(--kleur-rand);
  font-size:var(--type-maat-inleiding);font-weight:var(--type-gewicht-kop);color:var(--kleur-link);text-decoration:none;
  text-wrap:balance;
}
.zr-regel + .zr-regel{border-top:0}
.zr-regel .zh-link__pijl{transition:transform var(--motion-duur-hover) var(--motion-curve-uit)}
@media (hover:hover) and (pointer:fine){
  .zr-regel:hover{color:var(--kleur-tekst);text-decoration:underline;text-underline-offset:4px}
  .zr-regel:hover .zh-link__pijl{transform:translateX(var(--motion-verplaatsing-pijl))}
}

/* ---------- 6. begin met één klant, op het lichte vlak (K41, grond in pagina.css) ---------- */

.zr-vignet--los .zr-vignet__beeld{padding:var(--ruimte-blok-l);border:1px solid var(--kleur-glas-paneel-rand);border-radius:var(--radius-kaart);background:var(--kleur-glas-paneel);aspect-ratio:auto}

/* ---------- 7. zet uit wat je niet gebruikt ---------- */

.zr-uit .zh-twee{align-items:start}
@media (min-width:861px){.zr-uit .zh-twee{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}}
.zr-uit__kaart{
  display:grid;grid-template-columns:minmax(0,1.25fr) repeat(2,minmax(0,1fr));gap:var(--ruimte-blok-l);align-items:start;
  border-block:1px solid var(--kleur-rand);
}
.zr-uit__kolom{
  display:grid;align-content:start;gap:var(--ruimte-blok-s);padding-block:var(--ruimte-blok-m);
  padding-left:var(--ruimte-blok-l);border-left:1px solid var(--kleur-rand);
}
.zr-mini{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:var(--type-maat-klein)}
.zr-mini li{
  padding:.4rem .75rem;border-radius:var(--radius-tip);background:var(--kleur-glas-vol);
  transition:opacity var(--motion-duur-hover) var(--motion-curve-uit),transform var(--motion-duur-hover) var(--motion-curve-uit);
}
.zr-mini--ai li{background:var(--kleur-accent-mos-was)}
/* Wat altijd blijft staat stiller dan wat je kunt uitzetten. */
.zr-mini li:not([data-menu]){background:none;box-shadow:inset 0 0 0 1px var(--kleur-rand);color:var(--kleur-tekst-2)}
.zr-mini li.is-weg{opacity:0;transform:translateX(calc(-1 * var(--motion-verplaatsing-kaart)))}

/* ---------- 8 en 9. de strook ---------- */

.zr-meer{padding-block:var(--ruimte-sectie)}
.zr-strook{
  list-style:none;margin:var(--ruimte-blok-m) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--kleur-rand);
}
.zr-strook li{padding:var(--ruimte-blok-l);border-left:1px solid var(--kleur-rand);min-width:0}
.zr-strook li:first-child{padding-left:0;border-left:0}
.zr-strook__kreet{
  display:inline;font-size:var(--type-maat-inleiding);font-weight:var(--type-gewicht-kop);line-height:var(--type-regel-ui);
  letter-spacing:var(--type-spatie-kop);color:var(--kleur-tekst);text-decoration:none;
}
/* Tikdoel van 44px zonder dat de regel verschuift. */
a.zr-strook__kreet{display:inline-block;padding-block:10px;margin-block:-10px;color:var(--kleur-link)}
.zr-strook__kreet .zh-link__pijl{transition:transform var(--motion-duur-hover) var(--motion-curve-uit)}
@media (hover:hover) and (pointer:fine){
  a.zr-strook__kreet:hover{color:var(--kleur-tekst);text-decoration:underline;text-underline-offset:4px}
  a.zr-strook__kreet:hover .zh-link__pijl{transform:translateX(var(--motion-verplaatsing-pijl))}
}

/* ---------- 10. het slot: de duimstok staat helemaal uit ---------- */

.zr-slot .zh-wrap{display:grid;justify-items:center;text-align:center;gap:var(--ruimte-blok-l)}
body.zh .zr-slot h2{font-size:var(--type-maat-titel);max-width:14ch}
.zr-slot .zh-inleiding{margin-inline:auto}
.zr-slot .zh-knoppen{justify-content:center}
/* De duimstok staat in pagina.css (.zh-slotduim), alle slots delen hem. */

/* ---------- smaller ---------- */

@media (max-width:860px){
  .zr-hero__onder{flex-direction:column;align-items:flex-start}
  .zr-hfst__kop,.zr-schermen,.zr-raster{grid-template-columns:1fr}
  .zr-raster .zr-vignet,.zr-raster .zr-vignet + .zr-vignet{padding:var(--ruimte-blok-l) 0 0;border-left:0}
  .zr-raster .zr-vignet + .zr-vignet{margin-top:var(--ruimte-blok-l);border-top:1px solid var(--kleur-rand)}
  .zr-uit__kaart{grid-template-columns:repeat(2,minmax(0,1fr))}
  .zr-uit__lijst{grid-column:1 / -1}
  .zr-uit__kolom{padding-top:var(--ruimte-blok-m);border-top:1px solid var(--kleur-rand)}
  .zr-uit__lijst + .zr-uit__kolom{padding-left:0;border-left:0}
  .zr-strook{grid-template-columns:repeat(2,minmax(0,1fr))}
  .zr-strook li:nth-child(odd){padding-left:0;border-left:0}
  .zr-strook li:nth-child(n+3){border-top:1px solid var(--kleur-rand)}
}
@media (max-width:600px){
  .zr-hero__onder .zh-knoppen{width:100%}
  .zr-lat__naam{font-size:var(--type-maat-tekst)}
}

/* ---------- minder beweging: alles stil, alles zichtbaar ---------- */

@media (prefers-reduced-motion:reduce){
  html.js .zr-lat::before,html.js .zr-lat li{animation:none}
  .zr-lat::after,.zr-lat__stap,.zr-lat__station,.zr-mini li,.zr-regel .zh-link__pijl,.zr-strook__kreet .zh-link__pijl{transition:none}
}