/* De bouwstenen die elke pagina van de herbouw deelt: wrap, sectie, kop-2,
   inleiding, label, knoppenrij, twee kolommen, tekstlink, venster, vlekken, de
   schakelaar en binnenkomen. Kwam uit home.css (22 oktober 2026), zodat /prijzen/
   en de pagina's daarna ze krijgen zonder de stijl van home. Waarden uit
   tokens.css, regels uit merk/STYLEGUIDE.md. Binnenkomen zet herbouw.js. */

.zh-wrap{
  max-width:var(--ruimte-breed);margin-inline:auto;
  padding-inline:max(var(--ruimte-goot), env(safe-area-inset-left, 0px)) max(var(--ruimte-goot), env(safe-area-inset-right, 0px));
}
.zh-sectie{padding-block:var(--ruimte-sectie)}
body.zh .zh-sectie h2{font-size:var(--type-maat-kop-2);max-width:18ch}
.zh-inleiding{font-size:var(--type-maat-inleiding);line-height:var(--type-regel-tekst);color:var(--kleur-tekst-2);max-width:44ch}
.zh-tekst{display:grid;gap:var(--ruimte-blok-m);min-width:0}
/* De twee zinnen onder een kop die buiten .zh-tekst staan (K45): dezelfde afstand als binnen .zh-tekst. */
.zs-vast__zin,.zp-route__zin,.zt-zien__zin{margin-top:var(--ruimte-blok-m)}
/* Ook als kop (h3 boven een groep): de kopregel in herbouw.css weegt anders zwaarder. */
.zh-label,body.zh :is(h2,h3,h4).zh-label{
  font-size:var(--type-maat-groepslabel);font-weight:var(--type-gewicht-label);line-height:var(--type-regel-ui);
  letter-spacing:var(--type-spatie-groepslabel);text-transform:uppercase;color:var(--kleur-tekst-2);
  font-variant-numeric:tabular-nums;
}
.zh-drempel{font-size:var(--type-maat-klein);color:var(--kleur-tekst-2)}
.zh-drempel a,.zh-inleiding a{color:var(--kleur-link);text-decoration:underline;text-underline-offset:3px}
.zh-knoppen{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1rem}
.zh-twee{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.75rem,5vw,5rem);align-items:center}

/* Tekstlink: kleur.link met een pijl die verschuift. */
.zh-link{
  display:inline-flex;align-items:center;gap:.4em;min-height:var(--ruimte-tikdoel);
  color:var(--kleur-link);font-weight:var(--type-gewicht-label);text-decoration:none;
}
.zh-link__pijl{display:inline-block;transition:transform var(--motion-duur-hover) var(--motion-curve-uit)}
@media (hover:hover) and (pointer:fine){
  .zh-link:hover{text-decoration:underline;text-underline-offset:4px}
  .zh-link:hover .zh-link__pijl{transform:translateX(var(--motion-verplaatsing-pijl))}
  .zh-drempel a:hover,.zh-inleiding a:hover{color:var(--kleur-tekst);text-decoration-thickness:2px}
}

/* Een app-scherm in glas.paneel, de demo-omlijsting. */
.zh-venster{
  border-radius:var(--radius-paneel);border:1px solid var(--kleur-glas-paneel-rand);
  background:var(--kleur-glas-paneel);box-shadow:var(--schaduw-glas);overflow:hidden;
}
.zh-venster img{width:100%;height:auto;aspect-ratio:1440 / 900}
/* De uitsnede voor de telefoon zit in een picture; die doet voor de opmaak niet mee. */
.zh picture{display:contents}

/* Vlekken achter het glas. Ze bewegen nooit (STYLEGUIDE 6). */
.zh-vlekken{position:absolute;inset:0;overflow:hidden;z-index:-1;pointer-events:none}
.zh-vlekken i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.75}
.zh-vlekken i:nth-child(1){width:46vw;height:46vw;background:var(--kleur-vlek-een);left:-12vw;top:-10vw}
.zh-vlekken i:nth-child(2){width:38vw;height:38vw;background:var(--kleur-vlek-twee);right:-10vw;top:8vw}
.zh-vlekken i:nth-child(3){width:30vw;height:30vw;background:var(--kleur-vlek-drie);left:32vw;top:26vw}

/* De schakelaar: een tikdoel van 44, de pil zelf kleiner, aan is kleur.gelukt. */
.zh-schakel{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:calc(var(--ruimte-tikdoel) + 8px);
  border-bottom:1px solid var(--kleur-glas-paneel-rand);font-weight:var(--type-gewicht-menu);
}
.zh-schakel:last-child{border-bottom:0}
.zh-schakel__vast{font-size:var(--type-maat-bijschrift);font-weight:var(--type-gewicht-tekst);color:var(--kleur-tekst-2)}
.zh-schakel button{
  position:relative;flex:none;width:calc(var(--ruimte-tikdoel) + 8px);height:var(--ruimte-tikdoel);
  margin-right:-4px;border:0;padding:0;background:none;cursor:pointer;
}
.zh-schakel button::before{
  content:"";position:absolute;left:4px;top:9px;width:var(--ruimte-tikdoel);height:26px;border-radius:var(--radius-pil);
  background:var(--kleur-glas-ring-hover);box-shadow:inset 0 0 0 1px var(--kleur-veld-rand);
  transition:background var(--motion-duur-hover) var(--motion-curve-uit),box-shadow var(--motion-duur-hover) var(--motion-curve-uit);
}
.zh-schakel button::after{
  content:"";position:absolute;left:7px;top:12px;width:20px;height:20px;border-radius:50%;
  background:var(--kleur-vlak);box-shadow:0 1px 3px color-mix(in srgb, var(--kleur-tekst) 25%, transparent);
  transition:transform var(--motion-duur-menu) var(--motion-curve-veer);
}
.zh-schakel button[aria-checked="true"]::before{background:var(--kleur-gelukt);box-shadow:none}
@media (hover:hover) and (pointer:fine){
  .zh-schakel button:hover::before{box-shadow:inset 0 0 0 2px var(--kleur-veld-rand)}
  .zh-schakel button[aria-checked="true"]:hover::before{box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--kleur-tekst) 35%, transparent)}
}
.zh-schakel button[aria-checked="true"]::after{transform:translateX(18px)}

/* ---------- het lichte vlak: de app in licht ---------- */

/* Een sectie met data-vlak="licht" is de app in de lichte stand, niet wit: de
   creme grond met drie vlekken, het recept van app/src/app/huid/schil.css, en
   glas erop. De donkere secties zijn de app in het donker (Sepp, 22 oktober
   2026). tokens.css zet in het vlak de lichte tokens. */
.zh-sectie[data-vlak="licht"]{
  color:var(--kleur-tekst);background-color:var(--kleur-grond);
  background-image:
    radial-gradient(42vw 34vw at 6% -4%, var(--kleur-vlek-een), transparent 70%),
    radial-gradient(38vw 30vw at 96% 4%, var(--kleur-vlek-drie), transparent 70%),
    radial-gradient(46vw 36vw at 70% 104%, var(--kleur-vlek-twee), transparent 70%);
}
/* In de lichte stand is de bladzijde zelf al creme met vlekken, en dan valt het
   lichte vlak weg. Daar wordt het papier: wit, zonder vlekken, zodat de sectie
   zich losmaakt van de grond (site-ronde, must-fix 3). */
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .zh-sectie[data-vlak="licht"]{background-color:var(--kleur-vlak);background-image:none}
}
:root[data-theme="light"] .zh-sectie[data-vlak="licht"]{background-color:var(--kleur-vlak);background-image:none}

/* ---------- de duimstok in een slot (zm-duimstok.js), in de kleuren van het thema ---------- */

.duim{position:relative}
.duim__doek{position:absolute;inset:0;width:100%;height:100%;visibility:hidden;overflow:visible}
.duim.is-lat .duim__z{visibility:hidden}
.duim.is-lat .duim__doek{visibility:visible}

/* De duimstok boven de kop van een slot (home, /product/, /demo/, /teams/): hij vouwt
   open tot een lat en weer dicht tot het merk (open-dicht). Het stilstaande merk
   volgt het thema zoals de lat dat doet. */
.zh-slotduim{width:min(100%,560px);height:130px;margin:0 auto;display:grid;place-items:center}
.zh-slotduim .duim__z{width:96px;height:96px}
.zh-slotduim .duim__z g{stroke:var(--kleur-tekst)}
.zh-slotduim .duim__z > line{stroke:var(--kleur-actie)}

/* ---------- twee schermen die uit elkaar schuiven ---------- */

/* Overal waar twee schermen naast elkaar staan (/vergelijk/<pakket>/, /product/):
   het tweede ligt eerst over het eerste en schuift bij het scrollen ernaast,
   eerst één scherm, dan het verschil. Een rij met data-duo en de klasse zh-duo,
   de twee schermen met zh-duo__scherm--1 en --2. Waar de browser scroll-tijdlijnen
   kent doet CSS het, anders zet herbouw.js .is-uit zodra het duo half in beeld is. */
.zh-duo__scherm{position:relative}
.zh-duo__scherm--2{z-index:1}
@media (min-width:861px) and (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .zh-duo__scherm{animation-timeline:view();animation-range:entry 15% cover 45%;animation-fill-mode:both;animation-timing-function:linear}
    .zh-duo__scherm--1{animation-name:zh-duo-een}
    .zh-duo__scherm--2{animation-name:zh-duo-twee}
  }
  @supports not (animation-timeline:view()){
    html.js .zh-duo__scherm{transition:transform var(--motion-duur-vouw) var(--motion-curve-uit)}
    html.js .zh-duo:not(.is-uit) .zh-duo__scherm--1{transform:translateX(var(--motion-duo-schuif-een)) scale(var(--motion-schaal-druk))}
    html.js .zh-duo:not(.is-uit) .zh-duo__scherm--2{transform:translateX(var(--motion-duo-schuif-twee)) translateY(var(--ruimte-blok-l)) rotate(var(--motion-duo-kanteling))}
  }
}
/* Staat een scherm in een binnenkomer (.rv), dan zou het invagen het begin van het
   schuiven verbergen, en juist de overlap draagt het effect. Op breed is het duo
   zelf de binnenkomst. */
@media (min-width:861px) and (prefers-reduced-motion:no-preference){
  html.js .zh-duo .rv{opacity:1;transform:none}
}
@keyframes zh-duo-een{from{transform:translateX(var(--motion-duo-schuif-een)) scale(var(--motion-schaal-druk))}to{transform:none}}
/* Gedeelde binnenkomst van de herbouwpagina's (fase 5): een rij die een kaart
   omhoog komt, en een lat die van links uitvouwt. Tot 24 oktober 2026 had elke
   pagina er een eigen kopie van (zp-in, zr-in, zd-in, zr-vouw, zt-loop). */
@keyframes zh-in{from{opacity:0;transform:translateY(var(--motion-verplaatsing-kaart))}to{opacity:1;transform:none}}
@keyframes zh-vouw-x{from{transform:scaleX(0)}to{transform:none}}
@keyframes zh-duo-twee{from{transform:translateX(var(--motion-duo-schuif-twee)) translateY(var(--ruimte-blok-l)) rotate(var(--motion-duo-kanteling))}to{transform:none}}

/* ---------- binnenkomen: start zichtbaar, verborgen pas met html.js ---------- */

html.js .rv{
  opacity:0;transform:translateY(calc(var(--motion-verplaatsing-kaart) * 4));
  transition:opacity var(--motion-duur-lade) var(--motion-curve-uit),transform var(--motion-duur-lade) var(--motion-curve-uit);
  transition-delay:var(--rv-vertraging, 0ms);
}
html.js .rv.in{opacity:1;transform:none}

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

@media (max-width:860px){
  .zh-twee{grid-template-columns:1fr}
}
@media (max-width:600px){
  .zh-knoppen .knop{flex:1 1 100%}
  .zh-venster img{aspect-ratio:660 / 600}
}

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

@media (prefers-reduced-motion:reduce){
  html.js .rv{opacity:1;transform:none;transition:none}
  .zh-schakel button::before,.zh-schakel button::after,.zh-link__pijl{transition:none}
}