/* ==========================================================================
   /over/ (templates/over.php): Sepp met naam en gezicht, het verhaal als strip
   van vier ramen, waarom een duimstok, wat niet verandert, het contact op het
   lichte vlak met gegevens die je kopieert, en de proef. De bouwstenen staan
   in pagina.css.
   Waarden uit tokens.css, regels uit merk/STYLEGUIDE.md, de poort in
   ux-onderzoek/poort-over.md.
   ========================================================================== */

.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- 1. de kop: wie ik ben, met het portret ernaast ---------- */

.zs-hero{position:relative;isolation:isolate;padding-block:var(--ruimte-sectie) calc(var(--ruimte-sectie) * 1.6)}
.zs-hero__in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2rem,6vw,6rem);align-items:center}
.zs-hero__tekst{display:grid;gap:var(--ruimte-blok-l);justify-items:start}
body.zh .zs-hero__titel{font-size:var(--type-maat-titel);line-height:var(--type-regel-kop);max-width:16ch;text-wrap:balance}

/* Het portret in warm zwart-wit: de blauwe studiogrond past niet in het palet, en
   een goudvlak mag niet (goud is actie, STYLEGUIDE 1; review /over/). Bij
   binnenkomen gaan vijf latten omhoog weg,
   een duimstok die openvouwt (logodocument: hij beweegt alleen door uit te vouwen). */
.zs-portret{margin:0;display:grid;gap:var(--ruimte-blok-s);justify-self:end;width:min(100%,440px)}
.zs-portret__beeld{position:relative;display:block;border-radius:var(--radius-paneel);overflow:hidden;background:var(--kleur-grond-diep);aspect-ratio:4 / 5}
.zs-portret__beeld img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1) sepia(.22) contrast(1.06)}
.zs-portret__latten{position:absolute;inset:0;display:grid;grid-template-columns:repeat(5,1fr);pointer-events:none}
.zs-portret__latten i{display:block;background:var(--kleur-grond);transform-origin:top center;transform:scaleY(0)}
html.js .zs-portret:not(.in) .zs-portret__latten i{transform:none}
html.js .zs-portret .zs-portret__latten i{transition:transform var(--motion-duur-vouw) var(--motion-curve-uit)}
html.js .zs-portret.in .zs-portret__latten i:nth-child(1){transition-delay:120ms}
html.js .zs-portret.in .zs-portret__latten i:nth-child(2){transition-delay:190ms}
html.js .zs-portret.in .zs-portret__latten i:nth-child(3){transition-delay:260ms}
html.js .zs-portret.in .zs-portret__latten i:nth-child(4){transition-delay:330ms}
html.js .zs-portret.in .zs-portret__latten i:nth-child(5){transition-delay:400ms}
.zs-portret figcaption{display:grid;gap:2px;font-size:var(--type-maat-klein);line-height:var(--type-regel-ui);color:var(--kleur-tekst-2)}
.zs-portret figcaption strong{font-size:var(--type-maat-kaartkop);font-weight:var(--type-gewicht-kop);color:var(--kleur-tekst)}

/* ---------- 2. het verhaal: een strip van vier ramen ---------- */

/* Vier staande ramen op een rij, elk in de stand van zijn stap, met de zin eronder. Tot
   24 oktober 2026 stond hier het vastgezette podium van home (build__*), en dat
   was hetzelfde scroll-skelet gespiegeld (red team fase 4, must-fix 1). De strip
   leest als een storyboard: je ziet alle vier tegelijk, en bij binnenkomst
   schuift elk raam van de vorige stand naar de zijne (over.js). */
.zs-strip{
  list-style:none;margin:calc(var(--ruimte-blok-l) * 2) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--ruimte-blok-l) var(--ruimte-blok-m);
  counter-reset:raam;
}
.zs-raam{display:grid;grid-template-rows:auto 1fr;gap:var(--ruimte-blok-m);align-content:start;counter-increment:raam}
/* Het nummer van het raam staat als een maatstreep boven de zin. */
.zs-raam__zin::before{
  content:counter(raam);display:block;margin-bottom:calc(var(--ruimte-blok-s) / 2);
  font-size:var(--type-maat-klein);font-weight:var(--type-gewicht-label);line-height:var(--type-regel-ui);
  color:var(--kleur-tekst-3);font-variant-numeric:tabular-nums;
}
body.zh .zs-raam__zin{
  margin:0;font-size:var(--type-maat-kaartkop);font-weight:var(--type-gewicht-tekst);line-height:var(--type-regel-ui);
  color:var(--kleur-tekst-2);max-width:26ch;
}
body.zh .zs-raam__zin b{font-weight:var(--type-gewicht-kop);color:var(--kleur-tekst)}
/* Het citaat: dezelfde maat, met een lijn in klei, de kleur van de vergeten factuur. */
.zs-citaat{padding-left:var(--ruimte-blok-s);border-left:3px solid var(--kleur-attentie)}
.zs-citaat p{margin:0}

/* De losse apps staan scheef en verschoven en steken anders buiten het raam. */
.zs-verhaal{overflow-x:clip}

/* Het podium: vier kaarten met de naam van een app, die eerst los liggen, dan
   een keten met open schakels vormen, dan de factuur laten liggen, en in de
   laatste stap wijken voor één venster met Betaald. */
.zs-podium{
  position:relative;aspect-ratio:4 / 5;border-radius:var(--radius-kaart);
  background:var(--kleur-glas-vlak);border:1px solid var(--kleur-glas-rand);
}
.zs-podium__keten{
  position:absolute;inset:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;
  gap:10% 14%;padding:9% 8%;align-items:stretch;
}
.zs-app{
  --x:0;--y:0;--r:0deg;
  position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:10px;align-content:start;
  padding:clamp(8px,1vw,14px);border-radius:var(--radius-tegel);
  border:1px solid var(--kleur-glas-paneel-rand);background:var(--kleur-glas-vol);
  transform:translate(var(--x),var(--y)) rotate(var(--r));
  transition:transform var(--motion-duur-vouw) var(--motion-curve-uit),opacity var(--motion-duur-lade) var(--motion-curve-uit),
    background-color var(--motion-duur-lade) var(--motion-curve-uit),border-color var(--motion-duur-lade) var(--motion-curve-uit);
}
.zs-app__naam,.zs-app__stuk{transition:opacity var(--motion-duur-kaart) var(--motion-curve-uit)}
.zs-app__naam,.zs-app__stuk{grid-area:1 / 1;min-height:2lh}
.zs-app__naam{font-size:var(--type-maat-klein);font-weight:var(--type-gewicht-kop);line-height:var(--type-regel-ui);color:var(--kleur-tekst)}
/* Het stuk werk staat in hetzelfde vak als de naam en neemt het over zodra de keten staat. */
.zs-app__stuk{
  opacity:0;
  font-size:var(--type-maat-klein);font-weight:var(--type-gewicht-kop);line-height:var(--type-regel-ui);color:var(--kleur-tekst);
}
.zs-app__regels{grid-row:2;display:grid;gap:5px;margin-top:2px}
.zs-app__regels i{display:block;height:5px;border-radius:var(--radius-pil);background:var(--kleur-glas-ring)}
.zs-app__regels i:nth-child(2){width:78%}
.zs-app__regels i:nth-child(3){width:54%}
.zs-app__regels{transition:opacity var(--motion-duur-kaart) var(--motion-curve-uit)}
/* Het label neemt het vak van de regels over, zodat de kaart niet groeit en binnen het raam blijft. */
.zs-app__vergeten{
  grid-row:2;grid-column:1;align-self:center;justify-self:start;padding:3px 8px;border-radius:var(--radius-tip);opacity:0;
  font-size:var(--type-maat-bijschrift);font-weight:var(--type-gewicht-label);line-height:var(--type-regel-ui);
  color:var(--kleur-attentie-diep);background:var(--kleur-vlak);border:1px solid var(--kleur-attentie);
  transform:translateY(var(--motion-verplaatsing-kaart));
  transition:opacity var(--motion-duur-kaart) var(--motion-curve-uit),transform var(--motion-duur-kaart) var(--motion-curve-uit);
}
/* De open schakel tussen twee kaarten: twee stukjes lijn met een gat ertussen. */
.zs-app:nth-child(odd)::after{
  content:"";position:absolute;left:100%;top:50%;width:28%;height:2px;opacity:0;
  background:linear-gradient(90deg, var(--kleur-tekst-3) 0 34%, transparent 34% 66%, var(--kleur-tekst-3) 66%);
  transition:opacity var(--motion-duur-kaart) var(--motion-curve-uit);
}

.zs-podium__een{
  position:absolute;inset:6%;opacity:0;transform:scale(.92);
  transition:opacity var(--motion-duur-lade) var(--motion-curve-uit),transform var(--motion-duur-vouw) var(--motion-curve-uit);
}
.zs-podium__een img{width:100%;height:100%;object-fit:cover;object-position:left top;aspect-ratio:auto}
.zs-podium__betaald{
  position:absolute;right:2%;top:1%;z-index:1;padding:6px 14px;border-radius:var(--radius-pil);
  font-size:var(--type-maat-klein);font-weight:var(--type-gewicht-kop);line-height:var(--type-regel-ui);
  color:var(--kleur-vlak);background:var(--kleur-gelukt);box-shadow:var(--schaduw-tip);
  opacity:0;transform:translateY(calc(var(--motion-verplaatsing-kaart) * 3));
  transition:opacity var(--motion-duur-kaart) var(--motion-curve-uit) 250ms,transform var(--motion-duur-kaart) var(--motion-curve-veer) 250ms;
}

/* Stand 1, vier losse apps: verspreid en scheef, de namen staan erop. */
.zs-podium[data-step="1"] .zs-app:nth-child(1){--x:-3%;--y:-6%;--r:-5deg}
.zs-podium[data-step="1"] .zs-app:nth-child(2){--x:4%;--y:5%;--r:4deg}
.zs-podium[data-step="1"] .zs-app:nth-child(3){--x:-4%;--y:-4%;--r:-3deg}
.zs-podium[data-step="1"] .zs-app:nth-child(4){--x:3%;--y:6%;--r:5deg}

/* Stand 2 en 3, de keten: op een rij, het stuk werk in plaats van de naam, de schakels open. */
.zs-podium:is([data-step="2"],[data-step="3"]) .zs-app__naam{opacity:0}
.zs-podium:is([data-step="2"],[data-step="3"]) .zs-app__stuk{opacity:1}
.zs-podium:is([data-step="2"],[data-step="3"]) .zs-app::after{opacity:1}

/* Stand 3, de vergeten factuur: de rest wijkt, de factuur kleurt klei. */
.zs-podium[data-step="3"] .zs-app:not(:nth-child(4)){opacity:.4}
.zs-podium[data-step="3"] .zs-app:nth-child(4){
  --y:-6%;background:var(--kleur-accent-klei-was);border-color:var(--kleur-attentie);
}
.zs-podium[data-step="3"] .zs-app:nth-child(4) .zs-app__regels{opacity:0}
.zs-podium[data-step="3"] .zs-app__vergeten{opacity:1;transform:none}

/* Stand 4: de kaarten vouwen naar het midden en wijken voor één venster. */
.zs-podium[data-step="4"] .zs-app{opacity:0;transform:scale(.6)}
.zs-podium[data-step="4"] .zs-app:nth-child(1){transform:translate(57%,55%) scale(.6)}
.zs-podium[data-step="4"] .zs-app:nth-child(2){transform:translate(-57%,55%) scale(.6)}
.zs-podium[data-step="4"] .zs-app:nth-child(3){transform:translate(57%,-55%) scale(.6)}
.zs-podium[data-step="4"] .zs-app:nth-child(4){transform:translate(-57%,-55%) scale(.6)}
.zs-podium[data-step="4"] .zs-podium__een{opacity:1;transform:none}
.zs-podium[data-step="4"] .zs-podium__betaald{opacity:1;transform:none}

/* ---------- 3. waarom een duimstok ---------- */

.zs-duim .zh-twee{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.zs-duim__beeld{margin:0;height:clamp(180px,22vw,280px);display:grid;place-items:center}
.zs-duim__beeld .duim__z{width:clamp(120px,14vw,200px);height:auto}
#zs-duim-titel{scroll-margin-top:calc(var(--ruimte-knop) + var(--ruimte-sectie))}
#zs-duim-titel:focus{outline:none}
.zs-lees{list-style:none;margin:0;padding:0;display:grid;gap:0;max-width:34rem}
.zs-lees li{
  display:grid;grid-template-columns:9rem 1fr;gap:var(--ruimte-blok-s);align-items:baseline;
  padding-block:12px;border-top:1px solid var(--kleur-rand);font-size:var(--type-maat-tekst);color:var(--kleur-tekst-2);
}
.zs-lees li:last-child{border-bottom:1px solid var(--kleur-rand)}
.zs-lees span{font-weight:var(--type-gewicht-kop);color:var(--kleur-tekst)}
.zs-duim .zh-link{justify-self:start}

/* ---------- 4. wat niet verandert: drie beloftes, elk met een eigen beeldje ---------- */

.zs-vast__lijst{
  list-style:none;margin:calc(var(--ruimte-blok-l) * 2) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--ruimte-blok-l);
}
/* Een kaart krijgt een rand, geen schaduw (STYLEGUIDE). */
.zs-belofte{
  display:grid;align-content:start;gap:var(--ruimte-blok-s);padding:var(--ruimte-blok-l);
  border-radius:var(--radius-kaart);border:1px solid var(--kleur-rand);background:var(--kleur-glas-paneel);
  transition:opacity var(--motion-duur-lade) var(--motion-curve-uit),transform var(--motion-duur-lade) var(--motion-curve-uit);
}
body.zh .zs-belofte h3{margin:0;font-size:var(--type-maat-inleiding);line-height:var(--type-regel-ui);max-width:18ch}
.zs-belofte p{margin:0;color:var(--kleur-tekst-2);max-width:30ch}
.zs-belofte .zh-link{justify-self:start}
.zs-belofte__beeld{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-height:48px;
}
.zs-bestand{
  display:inline-flex;align-items:center;gap:10px;padding:8px 12px 8px 8px;border-radius:var(--radius-tip);
  background:var(--kleur-glas-vol);border:1px solid var(--kleur-glas-paneel-rand);
  font-size:var(--type-maat-klein);font-weight:var(--type-gewicht-menu);font-variant-numeric:tabular-nums;color:var(--kleur-tekst);
}
.zs-bestand__pijl{
  display:grid;place-items:center;width:28px;height:28px;border-radius:var(--radius-tip);
  background:var(--kleur-accent-mos-was);color:var(--kleur-gelukt);font-weight:var(--type-gewicht-kop);
  transition:transform var(--motion-duur-menu) var(--motion-curve-veer);
}
.zs-pil{
  display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:var(--radius-pil);
  font-size:var(--type-maat-klein);font-weight:var(--type-gewicht-label);line-height:var(--type-regel-ui);
}
.zs-pil::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
/* De tekst van een pil blijft kleur.tekst (STYLEGUIDE 6); het groen zit in het stipje. */
.zs-pil--werkt{color:var(--kleur-tekst);background:var(--kleur-accent-mos-was)}
.zs-pil--werkt::before{background:var(--kleur-gelukt)}
.zs-pil--bouw{color:var(--kleur-tekst-2);background:var(--kleur-glas-vol);border:1px dashed var(--kleur-tekst-3)}
.zs-boek{display:flex;align-items:center;width:100%;gap:8px;font-size:var(--type-maat-klein);font-weight:var(--type-gewicht-menu)}
.zs-boek__z,.zs-boek__jij{padding:7px 11px;border-radius:var(--radius-tip);border:1px solid var(--kleur-glas-paneel-rand);background:var(--kleur-glas-vol);white-space:nowrap}
.zs-boek__lijn{flex:1;min-width:16px;height:2px;background:repeating-linear-gradient(90deg, var(--kleur-tekst-3) 0 6px, transparent 6px 11px)}

/* ---------- 5. contact op het lichte vlak, met de gegevens om te kopiëren ---------- */

.zs-contact__in{align-items:start}
.zs-contact .zh-tekst{align-content:start}
.zs-contact__helper{margin:0;max-width:40ch;color:var(--kleur-tekst-2)}
.zs-gegevens{
  display:grid;gap:var(--ruimte-blok-s);padding:var(--ruimte-blok-l);
  border-radius:var(--radius-paneel);border:1px solid var(--kleur-glas-paneel-rand);
  background:var(--kleur-glas-paneel);
}
.zs-gegevens dl{margin:0;display:grid}
.zs-rij{
  display:grid;grid-template-columns:7rem minmax(0,1fr);align-items:center;gap:var(--ruimte-blok-s);
  border-top:1px solid var(--kleur-glas-paneel-rand);
}
.zs-rij:first-child{border-top:0}
.zs-rij dt{font-size:var(--type-maat-klein);color:var(--kleur-tekst-2)}
.zs-rij dd{margin:0;min-width:0}
.zs-rij__waarde,.zs-kopieer{
  display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:calc(var(--ruimte-tikdoel) + 4px);
  font-size:var(--type-maat-tekst);font-weight:var(--type-gewicht-menu);color:var(--kleur-tekst);
}
.zs-kopieer{
  margin-inline:-10px;width:calc(100% + 20px);padding:0 10px;border:0;border-radius:var(--radius-tip);
  background:transparent;text-align:left;font-family:inherit;cursor:pointer;
  transition:background-color var(--motion-duur-hover) var(--motion-curve-uit);
}
.zs-kopieer__waarde{min-width:0;overflow-wrap:anywhere}
/* Het teken: twee vellen als kopieer, een vinkje in kleur.gelukt als het gelukt is. */
.zs-kopieer__teken{
  position:relative;flex:none;width:18px;height:18px;opacity:0;color:var(--kleur-tekst-2);
  transition:opacity var(--motion-duur-hover) var(--motion-curve-uit);
}
.zs-kopieer__teken::before,.zs-kopieer__teken::after{
  content:"";position:absolute;width:11px;height:13px;border:1.6px solid currentColor;border-radius:3px;
}
.zs-kopieer__teken::before{left:1px;top:1px;opacity:.55}
.zs-kopieer__teken::after{left:5px;top:4px;background:var(--kleur-vlak)}
.zs-kopieer.is-gekopieerd .zs-kopieer__teken{opacity:1;color:var(--kleur-gelukt)}
.zs-kopieer.is-gekopieerd .zs-kopieer__teken::before{display:none}
.zs-kopieer.is-gekopieerd .zs-kopieer__teken::after{
  left:3px;top:1px;width:7px;height:12px;border-width:0 2px 2px 0;border-radius:0;background:none;transform:rotate(45deg);
}
.zs-kopieer:focus-visible .zs-kopieer__teken{opacity:1}

/* ---------- 6. de laatste stap ---------- */

.zs-slot{padding-bottom:calc(var(--ruimte-sectie) * 1.6)}
.zs-slot .zh-wrap{display:grid;justify-items:center;text-align:center;gap:var(--ruimte-blok-l)}
body.zh .zs-slot h2{font-size:var(--type-maat-titel);max-width:14ch}
.zs-slot .zh-knoppen{justify-content:center}

/* ---------- hover, alleen met een muis ---------- */

@media (hover:hover) and (pointer:fine){
  .zs-belofte:hover .zs-bestand__pijl{transform:translateY(var(--motion-verplaatsing-pijl))}
  .zs-kopieer:hover{background:var(--kleur-glas-zacht)}
  .zs-kopieer:hover .zs-kopieer__teken{opacity:1}
}

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

/* Onder 1024 twee bij twee, op een telefoon onder elkaar. */
@media (max-width:1023px){
  .zs-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Twee breed is een raam breed genoeg om liggend te staan. */
  .zs-podium{aspect-ratio:5 / 4}
}
@media (max-width:860px){
  .zs-hero__in{grid-template-columns:1fr}
  .zs-portret{justify-self:start;width:min(80%,360px)}
  .zs-duim .zh-twee{grid-template-columns:1fr}
  .zs-duim__beeld{height:160px;justify-items:start}
  .zs-vast__lijst{grid-template-columns:1fr}
}
@media (max-width:600px){
  .zs-strip{grid-template-columns:minmax(0,1fr)}
  .zs-raam{max-width:26rem}
  .zs-lees li{grid-template-columns:7.5rem 1fr}
  .zs-rij{grid-template-columns:5.5rem minmax(0,1fr);gap:12px}
}

/* ---------- minder beweging: dezelfde standen, zonder overgang ---------- */

@media (prefers-reduced-motion:reduce){
  .zs-app,.zs-app__naam,.zs-app__stuk,.zs-app::after,.zs-app__vergeten,.zs-podium__een,.zs-podium__betaald,
  .zs-belofte,.zs-bestand__pijl,.zs-kopieer,.zs-kopieer__teken{transition:none}
  html.js .zs-portret .zs-portret__latten i,html.js .zs-portret:not(.in) .zs-portret__latten i{transition:none;transform:scaleY(0)}
}