/* De herbouw van fase 7.0: de kop, het paneel, de voet en de knoppen die elke
   nieuwe pagina deelt. Elke waarde komt uit tokens.css (gegenereerd uit
   merk/tokens.json); de regels staan in merk/STYLEGUIDE.md.

   Sinds 24 oktober 2026 (fase 5) het eerste bestand na tokens.css: het oude
   component-systeem (home-redesign.css) is weg. De lettertypen en de
   kale basis die de herbouw daaruit nog gebruikte staan hieronder; Fraunces
   hoort alleen in het woordmerk (stijlgids 1.5). */

@font-face{font-family:"Fraunces";src:url("../fonts/fraunces-var.woff2") format("woff2");font-weight:300 650;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url("../fonts/fraunces-italic-var.woff2") format("woff2");font-weight:400 600;font-style:italic;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("../fonts/hanken-var.woff2") format("woff2");font-weight:300 800;font-style:normal;font-display:swap}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
img,svg{max-width:100%;height:auto;display:block}
/* zakenmaat_scherm() wikkelt beelden in <picture>; zo valt dat element uit de
   layout en werken regels op de img alsof hij er direct in staat. */
picture{display:contents}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p{margin:0}
section{scroll-margin-top:90px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* De skip-link zet de focus op main (tabindex -1); main zelf krijgt geen ring. */
main[tabindex="-1"]:focus{outline:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}

/* ---------- basis voor een herbouwde pagina ---------- */

/* De grond is die van de app (app/src/app/huid/schil.css): de grond met drie
   vlekken die blijven staan als je scrolt, in het donker en in het licht (K42). */
body.zh{
  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%);
  background-attachment:fixed;
  color:var(--kleur-tekst);
  font-family:var(--type-familie-tekst);
  font-size:var(--type-maat-tekst);
  line-height:var(--type-regel-tekst);
  overflow-x:clip;
}
body.zh h1,body.zh h2,body.zh h3,body.zh h4{
  font-family:var(--type-familie-tekst);
  font-weight:var(--type-gewicht-kop);
  line-height:var(--type-regel-kop);
  letter-spacing:var(--type-spatie-kop);
  text-wrap:balance;
  margin:0;
}
:where(body.zh) p{margin:0}
/* Het merk komt uit inc/merk.php met vaste kleuren; de lat volgt hier de tekstkleur,
   zodat de Z ook in de donkere stand zichtbaar blijft. */
body.zh .zm-merk [stroke="#211812"]{stroke:var(--kleur-tekst)}
body.zh .zm-merk [fill="#211812"]{fill:var(--kleur-tekst)}
:where(body.zh) img{max-width:100%;height:auto;display:block}
body.zh :focus-visible{
  outline:var(--ruimte-focus-breedte) solid var(--kleur-focus);
  outline-offset:var(--ruimte-focus-afstand);
}
.zh-skip{
  position:absolute;left:var(--ruimte-blok-s);top:calc(-1 * var(--ruimte-knop) * 2);z-index:60;
  padding:var(--ruimte-blok-s) var(--ruimte-blok-m);border-radius:var(--radius-pil);
  background:var(--kleur-vlak);color:var(--kleur-tekst);font-weight:var(--type-gewicht-label);
}
.zh-skip:focus{top:var(--ruimte-blok-s)}

/* ---------- knoppen (STYLEGUIDE 5) ---------- */

.knop{
  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);color:var(--kleur-tekst);
  box-shadow:inset 0 0 0 1px var(--kleur-glas-ring);
  font:var(--type-gewicht-label) var(--type-maat-knop)/var(--type-regel-ui) var(--type-familie-tekst);
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background var(--motion-duur-hover) var(--motion-curve-uit),
             box-shadow var(--motion-duur-hover) var(--motion-curve-uit),
             transform var(--motion-duur-druk) var(--motion-curve-uit);
}
.knop--actie{
  background:var(--kleur-actie);color:var(--kleur-op-actie);
  border-color:var(--kleur-actie);box-shadow:none;
}
.knop:active{transform:scale(var(--motion-schaal-druk))}
.knop__pijl{display:inline-block;transition:transform var(--motion-duur-hover) var(--motion-curve-uit)}
@media (hover:hover) and (pointer:fine){
  .knop:hover{background:var(--kleur-vlak);box-shadow:inset 0 0 0 1px var(--kleur-glas-ring-hover)}
  .knop--actie:hover{
    background:var(--kleur-actie-hover);border-color:var(--kleur-actie-hover);
    box-shadow:0 var(--ruimte-focus-gloed) calc(var(--ruimte-focus-gloed) * 4) color-mix(in srgb, var(--kleur-actie) 45%, transparent);
  }
  .knop:hover .knop__pijl{transform:translateX(var(--motion-verplaatsing-pijl))}
}

/* ---------- de kop (STYLEGUIDE 6, K39) ---------- */

/* Breed: vier onderwerpen links, het logo in het midden, rechts Prijzen, Inloggen
   en de goudknop. Elk onderwerp klapt een vlak met kaarten uit. Er is een vlak
   voor alle vier: wissel je van onderwerp, dan schuift het mee en neemt het de
   maat van het nieuwe aan (rondloop-menu.md, Attio en Linear). De kaarten met
   beeld komen van Notion, het bewegende beeld van Linear (K40). Onder 1080px de
   vier in een lade achter de menuknop. */
.zk{
  --zk-hoogte:calc(var(--ruimte-knop) + var(--ruimte-blok-l));
  position:sticky;top:0;z-index:50;
  padding-top:env(safe-area-inset-top, 0px);
  background:color-mix(in srgb, var(--kleur-grond) 82%, transparent);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--kleur-glas-paneel-rand);
}
.zk__in{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--ruimte-blok-s);
  height:var(--zk-hoogte);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));
}
.zk__logo{
  grid-column:2;grid-row:1;display:inline-flex;align-items:center;gap:.5rem;
  min-height:var(--ruimte-tikdoel);color:var(--kleur-merk);text-decoration:none;
}
.zk__logo svg{width:var(--ruimte-logo-min);height:var(--ruimte-logo-min);flex:none}
.zk__woord{
  display:inline-block;max-width:9em;overflow:hidden;white-space:nowrap;
  font-family:var(--type-familie-woordmerk);font-weight:var(--type-gewicht-woordmerk);
  font-size:var(--type-maat-inleiding);line-height:1;letter-spacing:-.01em;
  transition:max-width var(--motion-duur-vouw) var(--motion-curve-uit),opacity var(--motion-duur-vouw) var(--motion-curve-uit);
}
.zk.is-dicht .zk__woord{max-width:0;opacity:0}
.zk__rechts{--zk-gap:clamp(.6rem,1.4vw,1.4rem);grid-column:3;grid-row:1;justify-self:end;display:flex;align-items:center;gap:var(--zk-gap)}
.zk__link{
  display:inline-flex;align-items:center;min-height:var(--ruimte-tikdoel);
  font-weight:var(--type-gewicht-menu);font-size:var(--type-maat-klein);color:var(--kleur-tekst);text-decoration:none;
}
.zk__knop{max-width:14rem;overflow:hidden;white-space:nowrap;
  transition:opacity var(--motion-duur-menu) var(--motion-curve-uit),visibility var(--motion-duur-menu),
  background var(--motion-duur-hover) var(--motion-curve-uit),box-shadow var(--motion-duur-hover) var(--motion-curve-uit),
  transform var(--motion-duur-druk) var(--motion-curve-uit)}
/* Een goudknop per scherm: zolang de hero-knop, de demo of de slotknop in beeld
   is, zwijgt die in de kop. Hij vervaagt alleen, met behoud van zijn breedte:
   inklappen schoof de kop elke keer 158px opzij (bevestigingsronde 22 oktober). */
.zk.is-stil .zk__knop{visibility:hidden;opacity:0}
/* Inloggen is een gewone knop (Sepp, 22 oktober): duidelijker dan een link, en goud blijft voor Start je proef. */
.zk__inlog{flex:none}
.zk .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* De onderwerpen. */
.zk__nav{grid-column:1;grid-row:1;justify-self:start}
.zk__hoofd{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:.15rem}
.zk__item--lade{display:none}
.zk__trigger{
  display:inline-flex;align-items:center;gap:.35rem;min-height:var(--ruimte-tikdoel);padding:0 .8rem;
  border:0;border-radius:var(--radius-pil);background:transparent;color:var(--kleur-tekst);
  font:var(--type-gewicht-menu) var(--type-maat-klein)/1 var(--type-familie-tekst);text-decoration:none;cursor:pointer;
  transition:background var(--motion-duur-hover) var(--motion-curve-uit),color var(--motion-duur-hover) var(--motion-curve-uit);
}
.zk__trigger[aria-expanded="true"]{background:var(--kleur-glas-zacht)}
.zk__punt{color:var(--kleur-tekst-3);transition:transform var(--motion-duur-menu) var(--motion-curve-uit)}
.zk__trigger[aria-expanded="true"] .zk__punt{transform:rotate(180deg)}

/* Het vlak: een achtergrond voor alle vier, de inhoud ligt erboven. */
.zk__vlak,.zk__drop{position:absolute;top:calc(100% + var(--ruimte-blok-s) / 4);left:0}
.zk__vlak{
  z-index:0;width:var(--zk-b,0);height:var(--zk-h,0);
  border-radius:var(--radius-paneel);border:1px solid var(--kleur-glas-paneel-rand);
  background:var(--kleur-vlak);
  box-shadow:var(--schaduw-tip);
  transform:translateX(var(--zk-x,0)) translateY(calc(-1 * var(--motion-verplaatsing-kaart) * 2)) scale(var(--motion-schaal-druk));
  transform-origin:var(--zk-oorsprong,0) 0;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--motion-duur-menu) var(--motion-curve-uit),transform var(--motion-duur-menu) var(--motion-curve-uit),
    visibility 0s var(--motion-duur-menu);
}
.zk.is-uit .zk__vlak{
  opacity:1;visibility:visible;transform:translateX(var(--zk-x,0));
  transition:opacity var(--motion-duur-menu) var(--motion-curve-uit),transform var(--motion-duur-menu) var(--motion-curve-uit),
    visibility 0s;
}
/* In het donker is kleur.vlak bijna de grond; een tint lichter met een lichte rand
   laat het vlak loskomen, zoals het witte vlak in het licht (review 22 oktober). */
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .zk__vlak{background:var(--kleur-vlak-2);border-color:var(--kleur-glas-ring-hover)}}
:root[data-theme="dark"] .zk__vlak{background:var(--kleur-vlak-2);border-color:var(--kleur-glas-ring-hover)}
/* Smal geldt hetzelfde voor de lade. */
@media (max-width:1079px) and (prefers-color-scheme: dark){:root:not([data-theme="light"]) .zk__nav{background:var(--kleur-vlak-2);border-color:var(--kleur-glas-ring-hover)}}
@media (max-width:1079px){:root[data-theme="dark"] .zk__nav{background:var(--kleur-vlak-2);border-color:var(--kleur-glas-ring-hover)}}
/* Wisselen van onderwerp: het vlak schuift en neemt de nieuwe maat aan. */
.zk.is-wissel .zk__vlak{
  transition:opacity var(--motion-duur-menu) var(--motion-curve-uit),transform var(--motion-duur-menu) var(--motion-curve-uit),
    width var(--motion-duur-menu) var(--motion-curve-uit),height var(--motion-duur-menu) var(--motion-curve-uit),visibility 0s;
}
.zk__drop{
  z-index:1;width:max-content;max-width:calc(100vw - 2 * var(--ruimte-goot));padding:.6rem;
  transform:translateX(calc(var(--zk-x,0) + var(--zk-schuif,0px)));
  opacity:0;visibility:hidden;
  transition:opacity calc(var(--motion-duur-menu) * .6) var(--motion-curve-uit),transform var(--motion-duur-menu) var(--motion-curve-uit),
    visibility 0s var(--motion-duur-menu);
}
.zk__drop.is-actief{
  opacity:1;visibility:visible;transform:translateX(var(--zk-x,0));
  transition:opacity var(--motion-duur-menu) var(--motion-curve-uit) calc(var(--motion-duur-menu) * .15),
    transform var(--motion-duur-menu) var(--motion-curve-uit),visibility 0s;
}
.zk__kaarten{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--zk-n),13.5rem);gap:.25rem}
.zk__kaart{
  display:grid;gap:.15rem;padding:.4rem .4rem .7rem;border-radius:var(--radius-tip);
  color:var(--kleur-tekst);text-decoration:none;
  transition:background var(--motion-duur-hover) var(--motion-curve-uit);
}
.zk__beeld{
  position:relative;display:block;aspect-ratio:16/10;overflow:hidden;margin-bottom:.55rem;
  border-radius:var(--radius-tip);background:var(--zk-vlek);
}
.zk__beeld img{width:100%;height:100%;object-fit:cover;transition:transform var(--motion-duur-kaart) var(--motion-curve-uit)}
.zk__kaart-t{display:flex;align-items:center;gap:.35rem;padding-inline:.35rem;font-size:var(--type-maat-kaartkop);font-weight:var(--type-gewicht-kop);line-height:var(--type-regel-ui)}
.zk__kaart-r{padding-inline:.35rem;font-size:var(--type-maat-klein);line-height:var(--type-regel-ui);color:var(--kleur-tekst-2)}
.zk__pijl{display:inline-block;color:var(--kleur-tekst-3);opacity:0;transform:translateX(calc(-1 * var(--motion-verplaatsing-pijl)));
  transition:opacity var(--motion-duur-hover) var(--motion-curve-uit),transform var(--motion-duur-kaart) var(--motion-curve-uit)}
.zk__uit{color:var(--kleur-tekst-3)}
.zk__los{list-style:none;margin:.35rem 0 0;padding:.6rem .75rem 0;border-top:1px solid var(--kleur-rand-zacht);display:flex;gap:1.25rem}
.zk__los a{display:inline-flex;align-items:center;min-height:var(--ruimte-tikdoel);font-size:var(--type-maat-klein);font-weight:var(--type-gewicht-menu);color:var(--kleur-tekst);text-decoration:none}

/* Het bewegende beeld op een menukaart (K40, 22 oktober 2026): een schema uit
   onderdelen van de app dat in stappen speelt zolang het menu open is
   (zakenmaat_kop_beweging() en herbouw.js). Het mechanisme komt van Linear: kleine
   svg's die in stappen lopen, met een rustwaarde en eindeloos herhaald
   (rondloop-menu.md). De overgang per stap is van ons: motion.duur.lade op
   motion.curve.uit, kleur in motion.duur.kaart. Zonder data-stap staat alles in de
   eindstand, zo ziet het eruit zonder script en bij minder beweging. */
.zk-b{display:block;width:100%;height:100%;transition:transform var(--motion-duur-kaart) var(--motion-curve-uit)}
.zk-b *{
  transition:opacity var(--motion-duur-kaart) var(--motion-curve-uit),transform var(--motion-duur-lade) var(--motion-curve-uit),
    fill var(--motion-duur-kaart) var(--motion-curve-uit),stroke var(--motion-duur-kaart) var(--motion-curve-uit),
    stroke-dashoffset var(--motion-duur-lade) var(--motion-curve-uit);
}
.zk-b.zb-terug,.zk-b.zb-terug *{transition:none!important}
.zk-b [data-vanaf],.zb-muis-in{transform-box:fill-box;transform-origin:center}
.zb-muis-in{transition:transform var(--motion-duur-druk) var(--motion-curve-uit)}
.zb-vlak{fill:var(--kleur-vlak);stroke:var(--kleur-rand);stroke-width:1}
.zb-streep{fill:var(--kleur-rand)}
.zb-rij{fill:var(--kleur-rij)}
.zb-maat{fill:none;stroke:var(--kleur-rand);stroke-width:1.5}
.zb-tik,.zb-draad{fill:none;stroke:var(--kleur-tekst-3);stroke-width:1}
.zb-draad{stroke-dasharray:2 3}
.zb-ico{fill:none;stroke:var(--kleur-tekst-2);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.zb-lat{fill:none;stroke:var(--kleur-actie);stroke-width:3;stroke-dasharray:1;stroke-dashoffset:0}
.zk-b[data-stap] .zb-lat:not(.is-aan){stroke-dashoffset:1}

/* Een station of tegel: in rust zand met een rand, aan goud. Het laatste station is betaald. */
.zb-st :is(circle,rect){fill:var(--kleur-accent-goud-was);stroke:var(--kleur-actie);stroke-width:1.5}
.zb-st .zb-ico{stroke:var(--kleur-tekst)}
.zb-st--klaar circle{fill:var(--kleur-gelukt);stroke:var(--kleur-gelukt)}
.zb-st--klaar .zb-ico{stroke:var(--kleur-vlak)}
.zk-b[data-stap] .zb-st:not(.is-aan){transform:scale(var(--motion-schaal-druk))}
.zk-b[data-stap] .zb-st:not(.is-aan) :is(circle,rect){fill:var(--kleur-vlak);stroke:var(--kleur-rand)}
.zk-b[data-stap] .zb-st:not(.is-aan) .zb-ico{stroke:var(--kleur-tekst-3)}
.zb-golf{fill:none;stroke:var(--kleur-gelukt);stroke-width:1.5;opacity:0}
.zk-b--koppel .zb-golf{stroke:var(--kleur-actie)}
.zb-golf.is-aan{animation:zb-golf calc(var(--motion-duur-vouw) * 2) var(--motion-curve-uit) both}
@keyframes zb-golf{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.8)}}

/* Demo: de muis kiest een rij, het detail schuift in, de knop wordt goud. */
.zb-kies{fill:var(--kleur-accent-goud-was);stroke:var(--kleur-actie);stroke-width:1}
.zk-b[data-stap] .zb-kies:not(.is-aan){opacity:0}
.zk-b[data-stap] .zb-paneel:not(.is-aan){opacity:0;transform:translateX(calc(var(--motion-verplaatsing-kaart) * 6))}
.zb-knopje{fill:var(--kleur-actie)}
.zk-b[data-stap] .zb-knopje:not(.is-aan){fill:var(--kleur-rand)}
.zb-muis path{fill:var(--kleur-tekst);stroke:var(--kleur-vlak);stroke-width:1;stroke-linejoin:round}
.zb-muis{transform:translate(122px,75px)}
.zk-b[data-stap="0"] .zb-muis{transform:translate(132px,86px)}
.zk-b:is([data-stap="1"],[data-stap="2"],[data-stap="3"]) .zb-muis{transform:translate(88px,55px)}
.zk-b:is([data-stap="2"],[data-stap="4"]) .zb-muis-in{transform:scale(.85)}

/* Prijzen: je zet aan wat je gebruikt. Er staat geen bedrag in, want een prijs beweegt nooit. */
.zb-munt{fill:var(--kleur-accent-goud-was);stroke:var(--kleur-actie);stroke-width:1}
.zb-baan{fill:var(--kleur-actie)}
.zb-duim{fill:var(--kleur-vlak);transform:translateX(9px)}
.zb-optie--uit .zb-baan,.zk-b[data-stap] .zb-optie:not(.is-aan) .zb-baan{fill:var(--kleur-rand)}
.zb-optie--uit .zb-duim,.zk-b[data-stap] .zb-optie:not(.is-aan) .zb-duim{transform:none}
.zb-optie--uit .zb-streep,.zk-b[data-stap] .zb-optie:not(.is-aan) .zb-streep{fill:var(--kleur-rij)}

/* Koppelingen: van elke tegel loopt een stip naar het app-icoon. */
.zb-stip{fill:var(--kleur-actie);opacity:0;transform:translate(var(--zb-dx),var(--zb-dy))}
.zk-b[data-stap] .zb-stip.is-aan{opacity:1}
.zk-b[data-stap] .zb-stip:not(.is-aan){transform:none}

/* Vergelijken: rij voor rij een vinkje, een lijst loopt mee. */
.zb-merkpil{fill:var(--kleur-actie)}
.zb-vink circle{fill:var(--kleur-gelukt)}
.zb-vink path{fill:none;stroke:var(--kleur-vlak);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.zk-b[data-stap] .zb-vink:not(.is-aan){opacity:0;transform:scale(.4)}
.zb-band{fill:none;stroke:var(--kleur-actie);stroke-width:1.2;opacity:0;transform:translateY(36px)}
.zk-b[data-stap]:not([data-stap="0"]) .zb-band{opacity:1}
.zk-b[data-stap="1"] .zb-band{transform:none}
.zk-b[data-stap="2"] .zb-band{transform:translateY(12px)}
.zk-b[data-stap="3"] .zb-band{transform:translateY(24px)}

/* Handleiding: de inhoudsopgave loopt door, de uitleg wijst een plek aan. */
.zb-wijzer{fill:var(--kleur-actie);transform:translateY(20px)}
.zk-b:is([data-stap="0"],[data-stap="1"]) .zb-wijzer{transform:none}
.zk-b[data-stap="2"] .zb-wijzer{transform:translateY(10px)}
.zb-noot circle{fill:var(--kleur-actie)}
.zb-noot .zb-noot-ring{fill:none;stroke:var(--kleur-actie);stroke-width:1}
.zb-noot{transform:translate(117px,53px)}
.zk-b:is([data-stap="0"],[data-stap="1"]) .zb-noot{transform:translate(81px,53px)}
.zk-b[data-stap="2"] .zb-noot{transform:translate(126px,39px)}
.zb-regel{transform-box:fill-box;transform-origin:left center}
.zb-regel--een{transform:scaleX(.9)}
.zb-regel--twee{transform:scaleX(.6)}
.zk-b:is([data-stap="0"],[data-stap="1"]) .zb-regel--twee{transform:scaleX(.75)}
.zk-b:is([data-stap="0"],[data-stap="1"]) .zb-regel--een{transform:none}
.zk-b[data-stap="2"] .zb-regel--een{transform:scaleX(.8)}
.zk-b[data-stap="2"] .zb-regel--twee{transform:scaleX(.95)}

/* De kaarten komen een voor een binnen als het vlak opengaat (motion.md, stagger). */
html.zk-js .zk__drop .zk__kaarten li{opacity:0;transform:translateY(calc(var(--motion-verplaatsing-kaart) * 2))}
html.zk-js .zk__drop.is-actief .zk__kaarten li{
  opacity:1;transform:none;
  transition:opacity var(--motion-duur-kaart) var(--motion-curve-uit) calc(var(--zk-k) * var(--motion-duur-kaart) / 8 + var(--motion-duur-kaart) / 6),
    transform var(--motion-duur-kaart) var(--motion-curve-uit) calc(var(--zk-k) * var(--motion-duur-kaart) / 8 + var(--motion-duur-kaart) / 6);
}
html.zk-js .zk.is-wissel .zk__drop.is-actief .zk__kaarten li{transition-delay:calc(var(--zk-k) * var(--motion-duur-kaart) / 12)}

/* Zonder script klapt een onderwerp uit zodra je erop staat of er met tab komt. */
html:not(.zk-js) .zk__item:is(:hover,:focus-within) .zk__drop{opacity:1;visibility:visible;transform:none;background:var(--kleur-grond);border-radius:var(--radius-paneel);box-shadow:var(--schaduw-tip)}

.zk__menu{
  display:none;align-items:center;gap:.55rem;min-height:var(--ruimte-tikdoel);
  padding:0 1rem;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-klein)/1 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);
}
.zk__menu:active{transform:scale(var(--motion-schaal-druk))}
.zk__streep{position:relative;width:var(--ruimte-icoon-knop);height:10px}
.zk__streep::before,.zk__streep::after{
  content:"";position:absolute;left:0;right:0;height:1.5px;border-radius:2px;background:currentColor;
  transition:transform var(--motion-duur-menu) var(--motion-curve-uit),top var(--motion-duur-menu) var(--motion-curve-uit);
}
.zk__streep::before{top:1px}
.zk__streep::after{top:7.5px}
.zk__menu[aria-expanded="true"] .zk__streep::before{top:4.25px;transform:rotate(45deg)}
.zk__menu[aria-expanded="true"] .zk__streep::after{top:4.25px;transform:rotate(-45deg)}

@media (hover:hover) and (pointer:fine){
  .zk__link:hover{color:var(--kleur-link)}
  .zk__trigger:hover{background:var(--kleur-glas-zacht)}
  .zk__menu:hover{background:var(--kleur-vlak);box-shadow:inset 0 0 0 1px var(--kleur-glas-ring-hover)}
  .zk__kaart:hover{background:var(--kleur-glas-zacht)}
  .zk__kaart:hover .zk-b{transform:translateY(calc(-1 * var(--motion-verplaatsing-kaart)))}
  .zk__kaart:hover .zk__pijl{opacity:1;transform:none}
  .zk__los a:hover{color:var(--kleur-link)}
}

/* Smal: het logo links, rechts de goudknop en de menuknop, de vier onderwerpen in
   een lade met per onderwerp een harmonica. */
@media (max-width:1079px){
  .zk__in{grid-template-columns:auto 1fr}
  .zk__logo{grid-column:1}
  .zk__rechts{grid-column:2}
  .zk__link,.zk__inlog{display:none}
  .zk__menu{display:inline-flex;order:2}
  .zk__knop{min-height:40px;padding:0 1rem;font-size:var(--type-maat-klein)}
  .zk__vlak{display:none}
  .zk__nav{
    position:absolute;top:calc(100% + var(--ruimte-blok-s) / 2);justify-self:stretch;
    left:max(var(--ruimte-goot), env(safe-area-inset-left, 0px));right:max(var(--ruimte-goot), env(safe-area-inset-right, 0px));
    max-height:calc(100dvh - var(--zk-hoogte) - var(--ruimte-blok-l));overflow:auto;overscroll-behavior:contain;
    padding:.5rem;border-radius:var(--radius-paneel);border:1px solid var(--kleur-glas-paneel-rand);
    background:var(--kleur-grond);box-shadow:var(--schaduw-tip);
    opacity:0;visibility:hidden;transform:translateY(calc(-1 * var(--motion-verplaatsing-kaart) * 2));
    transition:opacity var(--motion-duur-menu) var(--motion-curve-uit),transform var(--motion-duur-menu) var(--motion-curve-uit),visibility 0s var(--motion-duur-menu);
  }
  .zk.is-lade .zk__nav{opacity:1;visibility:visible;transform:none;transition:opacity var(--motion-duur-menu) var(--motion-curve-uit),transform var(--motion-duur-menu) var(--motion-curve-uit),visibility 0s}
  .zk__hoofd{flex-direction:column;align-items:stretch;gap:0}
  .zk__item--lade{display:block}
  .zk__item + .zk__item{border-top:1px solid var(--kleur-rand-zacht)}
  .zk__trigger{width:100%;justify-content:space-between;border-radius:var(--radius-veld);padding:0 .75rem;font-size:var(--type-maat-tekst)}
  .zk__drop,html:not(.zk-js) .zk__item:is(:hover,:focus-within) .zk__drop{
    position:static;display:none;width:auto;max-width:none;padding:.25rem 0 .75rem;
    opacity:1;visibility:visible;transform:none;transition:none;background:none;box-shadow:none;
  }
  .zk__drop.is-actief{display:block}
  .zk__kaarten{grid-template-columns:repeat(auto-fill,minmax(9rem,1fr))}
  .zk__los{padding-inline:.4rem}
}
@media (max-width:480px){
  .zk__menu-t{display:none}
  .zk__menu{padding:0;width:var(--ruimte-tikdoel);justify-content:center}
  .zk__kaart-r{display:none}
}
@media (pointer:coarse){
  .zk__knop{min-height:var(--ruimte-tikdoel)}
}
/* Onder 380 past het woordmerk niet naast de knop en het menu (op 320 was de
   kop 24 px te breed, op /teams/ 48). De kop staat dan dicht, zoals na het
   scrollen: alleen de duimstok-Z, het woord blijft voor een schermlezer. */
@media (max-width:379px){
  .zk__woord{max-width:0;opacity:0}
}

/* ---------- de voet ---------- */

.zv{
  margin-top:calc(var(--ruimte-sectie) * 1.5);
  background:var(--kleur-grond-diep);border-top:1px solid var(--kleur-rand);
  font-size:var(--type-maat-klein);color:var(--kleur-tekst-2);
}
.zv__in,.zv__onder{
  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));
}
.zv__in{
  display:grid;grid-template-columns:minmax(0,1.5fr) repeat(5,minmax(0,1fr));gap:var(--ruimte-blok-l);
  padding-block:calc(var(--ruimte-sectie) * 1.3) var(--ruimte-sectie);
}
.zv__logo{display:inline-flex;align-items:center;gap:.5rem;min-height:var(--ruimte-tikdoel);color:var(--kleur-merk);text-decoration:none}
.zv__logo svg{width:var(--ruimte-logo-min);height:var(--ruimte-logo-min)}
.zv__logo span{font-family:var(--type-familie-woordmerk);font-weight:var(--type-gewicht-woordmerk);font-size:var(--type-maat-inleiding);line-height:1}
.zv__merk p{margin-top:.6rem;max-width:28ch;line-height:var(--type-regel-tekst)}
body.zh .zv__kop{
  font-size:var(--type-maat-groepslabel);font-weight:var(--type-gewicht-label);
  letter-spacing:var(--type-spatie-groepslabel);text-transform:uppercase;line-height:var(--type-regel-ui);
  color:var(--kleur-tekst-2);margin-bottom:.5rem;
}
.zv__groep ul{list-style:none;margin:0;padding:0}
.zv__groep a,.zv__onder a{
  display:inline-flex;align-items:center;min-height:var(--ruimte-tikdoel);
  color:var(--kleur-tekst);text-decoration:none;transition:color var(--motion-duur-hover) var(--motion-curve-uit);
}
.zv__onder{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.25rem var(--ruimte-blok-l);
  padding-block:var(--ruimte-blok-s) calc(var(--ruimte-blok-l) + env(safe-area-inset-bottom, 0px));
  border-top:1px solid var(--kleur-rand);color:var(--kleur-tekst-2);font-variant-numeric:tabular-nums;
}
.zv__heel{white-space:nowrap}
.zv__punt{margin-inline:.5rem;color:var(--kleur-tekst-3)}
@media (hover:hover) and (pointer:fine){
  .zv__groep a:hover,.zv__onder a:hover{color:var(--kleur-link)}
}
@media (max-width:1024px){
  .zv__in{grid-template-columns:repeat(3,minmax(0,1fr))}
  .zv__merk{grid-column:1 / -1}
}
@media (max-width:600px){
  .zv__in{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Op een smal scherm een regel per gegeven, anders begint een punt de nieuwe regel. */
  .zv__punt{display:none}
  .zv__heel{display:block}
}
/* Eindigt de pagina op het lichte vlak, dan zou de voetmarge een losse strook in de grondkleur zijn. */
main:has(> [data-vlak="licht"]:last-child) ~ .zv{margin-top:0}

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

@media (prefers-reduced-motion:reduce){
  .knop,.knop__pijl,.zk__woord,.zk__knop,.zk__menu,.zk__streep::before,.zk__streep::after,.zk__trigger,.zk__punt,.zk__vlak,.zk__drop,.zk__kaart,.zk__beeld img,.zk__pijl,.zk__nav,.zv a{transition:none!important}
  .zk__vlak,.zk__drop{transform:translateX(var(--zk-x,0))!important}
  .zk__nav,.zk__beeld img,html.zk-js .zk__drop .zk__kaarten li{transform:none!important}
  html.zk-js .zk__drop .zk__kaarten li{opacity:1}
  .knop:active,.zk__menu:active{transform:none}
  .zk-b,.zk-b *{transition:none!important;animation:none!important}
}