/* ==========================================================================
   /teams/ (templates/teams.php): de teamdemo in de hero, drie schermen met een
   lat die doorloopt, Sepp die het inricht op het lichte vlak, de wissel tussen
   Jan en Mila, het menu dat krimpt, de vragen en het slot. Het venster zelf
   staat in demo.css, de bouwstenen in pagina.css. Waarden uit tokens.css,
   regels uit merk/STYLEGUIDE.md, de poort in ux-onderzoek/poort-teams.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: een zin en een regel, de demo meteen eronder ---------- */

.zt-hero{position:relative;isolation:isolate;padding-block:var(--ruimte-sectie) calc(var(--ruimte-sectie) * 2)}
body.zh .zt-hero__titel{font-size:var(--type-maat-titel);max-width:20ch;line-height:var(--type-regel-kop);text-wrap:balance}
.zt-hero .zh-inleiding{margin-top:var(--ruimte-blok-l)}
.zt-hero .zh-inleiding a{white-space:nowrap}
.zt-hero .zh-podium{margin-top:calc(var(--ruimte-blok-l) * 2)}

/* De kop heeft hier Plan een gesprek, maar die gaat stil zolang de startkaart in
   beeld is (data-zk-dubbel): Start de rondleiding is dan het goud van dit scherm,
   zoals op /demo/ (rondleiding.css). De kaart staat bovenin, zodat hij in het
   eerste scherm valt; een klik ernaast is zelf rondklikken (demo.js). */
.zt-hero .dmstart[data-demo-scherm="start"]{
  align-items:start;cursor:pointer;
  background:linear-gradient(to top, transparent 35%, color-mix(in srgb, var(--kleur-grond) 70%, transparent));
}
.zt-hero .dmstart[data-demo-scherm="start"] .dmstart__kaart{cursor:auto}
.zt-hero .dmstart[data-demo-scherm="start"] .btn.ocher{background:var(--kleur-actie);border-color:var(--kleur-actie);box-shadow:none;color:var(--kleur-op-actie)}

/* ---------- 2. wat staat er klaar: drie tabs met een lat die doorloopt ---------- */

/* Zoals de rolltabs van Rentman: een harde wissel van scherm, de tab kleurt in
   200ms. De lat eronder is van mij: hij loopt in zes seconden vol en zet dan de
   volgende tab (teams.js). Een gewone lijn en geen meetlat: de meetlatten staan
   bij de stappen en in het slot. */
.zt-zien__in{margin-top:calc(var(--ruimte-blok-l) * 2)}
.zt-zien__balk{display:flex;align-items:flex-end;gap:var(--ruimte-blok-m)}
.zt-zien__lijst{list-style:none;margin:0;padding:0;flex:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--ruimte-blok-l)}
.zt-tab{
  display:grid;gap:var(--ruimte-blok-s);width:100%;min-height:56px;padding:var(--ruimte-blok-s) 0 0;
  border:0;background:none;text-align:left;cursor:pointer;color:var(--kleur-tekst-2);
  font:inherit;font-size:var(--type-maat-kaartkop);font-weight:var(--type-gewicht-label);line-height:var(--type-regel-ui);
  transition:color var(--motion-duur-hover) var(--motion-curve-uit);
}
.zt-tab[aria-selected="true"]{color:var(--kleur-tekst)}
.zt-tab__lat{display:block;height:2px;border-radius:var(--radius-pil);background:var(--kleur-rand);overflow:hidden}
.zt-tab__lat span{display:block;height:100%;background:var(--kleur-actie);transform:scaleX(0);transform-origin:left center}
.zt-tab[aria-selected="true"] .zt-tab__lat span{transform:none}
.zt-zien.is-loopt .zt-tab[aria-selected="true"] .zt-tab__lat span{animation:zh-vouw-x 6s linear forwards}
.zt-zien.is-stil .zt-tab[aria-selected="true"] .zt-tab__lat span{animation-play-state:paused}

/* Pauze: twee strepen, gepauzeerd een driehoek. */
.zt-pauze{
  position:relative;flex:none;width:var(--ruimte-tikdoel);height:var(--ruimte-tikdoel);margin-bottom:-12px;
  border:1px solid var(--kleur-glas-paneel-rand);border-radius:50%;background:var(--kleur-glas-vol);cursor:pointer;color:var(--kleur-tekst);
  transition:background var(--motion-duur-hover) var(--motion-curve-uit);
}
.zt-pauze::before{
  content:"";position:absolute;left:50%;top:50%;width:10px;height:12px;transform:translate(-50%,-50%);
  background:linear-gradient(90deg,currentColor 0 3px,transparent 3px 7px,currentColor 7px 10px);
}
.zt-pauze[aria-pressed="true"]::before{
  transform:translate(-35%,-50%);background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%);
}
.zt-zien__schermen{margin-top:var(--ruimte-blok-l)}
.zt-scherm{margin:0}
.zt-scherm:not([hidden]){animation:zt-scherm var(--motion-duur-kaart) var(--motion-curve-uit)}
@keyframes zt-scherm{from{opacity:.4}to{opacity:1}}

/* ---------- 3. ik richt het in, op het lichte vlak (K41, grond in pagina.css) ---------- */

.zt-maker{padding-block:calc(var(--ruimte-sectie) * 1.6)}
.zt-maker__in{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(1.75rem,5vw,5rem);align-items:center}
.zt-maker__wie{display:grid;gap:var(--ruimte-blok-m);justify-items:start}
.zt-maker__wie img{width:96px;height:96px;border-radius:50%}

/* De stappen hangen aan een staande meetlat. Komt de lijst in beeld, dan gaat
   station voor station aan en vouwt het stuk lat erna uit (teams.js). */
.zt-stappen{list-style:none;margin:0;padding:0;display:grid}
.zt-stap{
  --zt-nr:52px;
  position:relative;display:grid;grid-template-columns:var(--zt-nr) minmax(0,1fr);gap:var(--ruimte-blok-l);align-items:center;
  padding-bottom:calc(var(--ruimte-blok-l) * 1.5);
}
.zt-stap:last-child{padding-bottom:0}
.zt-stap:not(:last-child)::before,.zt-stap:not(:last-child)::after{
  content:"";position:absolute;left:calc(var(--zt-nr) / 2 - 5px);top:var(--zt-nr);bottom:0;width:10px;
  background:
    repeating-linear-gradient(180deg, var(--lat-streep) 0 1px, transparent 1px 12px) left top / 6px 100% no-repeat,
    linear-gradient(var(--lat-streep), var(--lat-streep)) left top / var(--lat-lijn) 100% no-repeat;
}
.zt-stap::before{--lat-streep:var(--kleur-rand);--lat-lijn:1px}
.zt-stap::after{
  --lat-streep:var(--kleur-actie);--lat-lijn:2px;transform-origin:center top;
  transition:transform var(--motion-duur-vouw) var(--motion-curve-uit);
}
.zt-stap__nr{
  display:grid;place-items:center;width:var(--zt-nr);height:var(--zt-nr);border-radius:50%;
  background:var(--kleur-accent-goud-was);box-shadow:inset 0 0 0 1.5px var(--kleur-actie);
  font-size:var(--type-maat-kaartkop);font-weight:var(--type-gewicht-kop);font-variant-numeric:tabular-nums;
  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-veer);
}
.zt-stap__tekst{
  font-size:var(--type-maat-inleiding);font-weight:var(--type-gewicht-kop);line-height:var(--type-regel-ui);
  letter-spacing:var(--type-spatie-kop);text-wrap:balance;
  transition:color var(--motion-duur-kaart) var(--motion-curve-uit);
}
/* Zonder script staat alles aan; met script wacht het op de lijst. */
html.js .zt-stap:not(.is-aan) .zt-stap__nr{background:var(--kleur-glas-vol);box-shadow:inset 0 0 0 1px var(--kleur-glas-paneel-rand);transform:scale(.9)}
html.js .zt-stap:not(.is-aan) .zt-stap__tekst{color:var(--kleur-tekst-3)}
html.js .zt-stap:not(.is-aan)::after{transform:scaleY(0)}

/* ---------- 4. wie ziet wat: de wissel tussen Jan en Mila ---------- */

.zt-wie__kop{display:grid;gap:var(--ruimte-blok-m)}
.zt-als{
  display:inline-flex;gap:4px;margin-top:calc(var(--ruimte-blok-l) * 1.5);padding:4px;
  border:1px solid var(--kleur-glas-paneel-rand);border-radius:var(--radius-pil);background:var(--kleur-glas-vol);
}
.zt-als__keus{
  min-height:var(--ruimte-tikdoel);padding:0 1.15rem;border:0;border-radius:var(--radius-pil);background:none;cursor:pointer;
  font:inherit;font-size:var(--type-maat-knop);font-weight:var(--type-gewicht-label);color:var(--kleur-tekst-2);
  transition:background var(--motion-duur-hover) var(--motion-curve-uit),color var(--motion-duur-hover) var(--motion-curve-uit);
}
.zt-als__keus[aria-pressed="true"]{background:var(--kleur-accent-goud-was);color:var(--kleur-tekst);box-shadow:inset 0 0 0 1.5px var(--kleur-actie)}
.zt-als__keus:active{transform:scale(var(--motion-schaal-druk))}

/* Mila ligt boven Jan en veegt van links naar rechts over hem heen, met een
   gouden rand op de veeg. */
.zt-wie__venster{position:relative;margin-top:var(--ruimte-blok-l)}
.zt-wie__laag{margin:0}
.zt-wie__laag--mila{
  position:absolute;inset:0;clip-path:inset(0 100% 0 0);
  transition:clip-path var(--motion-duur-vouw) var(--motion-curve-uit);
}
.zt-wie.is-mila .zt-wie__laag--mila{clip-path:inset(0)}
.zt-wie__lat{
  position:absolute;inset:0;pointer-events:none;opacity:0;transform:translateX(-100%);
  transition:transform var(--motion-duur-vouw) var(--motion-curve-uit),opacity var(--motion-duur-hover) var(--motion-curve-uit);
}
.zt-wie__lat::after{content:"";position:absolute;right:-2px;top:0;bottom:0;width:4px;background:var(--kleur-actie)}
.zt-wie.is-mila .zt-wie__lat{transform:none}
.zt-wie.is-veegt .zt-wie__lat{opacity:1}

.zt-wie__rollen{
  display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:clamp(1.75rem,5vw,5rem);align-items:center;
  margin-top:calc(var(--ruimte-blok-l) * 2.5);
}
.zt-wie__rol img{aspect-ratio:660 / 600}
.zt-wie__tekst{display:grid;gap:var(--ruimte-blok-s)}
body.zh .zt-wie__tekst h3{font-size:var(--type-maat-inleiding);max-width:20ch}
.zt-wie__tekst p{font-size:var(--type-maat-tekst);line-height:var(--type-regel-tekst);color:var(--kleur-tekst-2);max-width:36ch}

/* ---------- 5. zet uit wat je niet gebruikt: het menu krimpt ---------- */

/* Onderop Mila's menu zonder Opvolgen, daarover dat met Opvolgen in drie lagen.
   Uit: de regel klapt dicht en de onderste laag schuift 36 van de 600 px op, tot
   hij precies op de opname eronder valt. */
@media (min-width:861px){.zt-uit .zh-twee{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}}
.zt-uit__schakel{max-width:360px;margin-top:var(--ruimte-blok-s);border-top:1px solid var(--kleur-glas-paneel-rand)}
.zt-menu{position:relative;justify-self:center;width:min(100%,320px);margin:0}
.zt-menu img{display:block;width:100%;height:auto;aspect-ratio:560 / 1200}
.zt-menu__laag{
  position:absolute;inset:0;
  transition:transform var(--motion-duur-kaart) var(--motion-curve-veer),opacity var(--motion-duur-kaart) var(--motion-curve-uit);
}
.zt-menu__laag--boven{clip-path:inset(0 0 40.08% 0)}
.zt-menu__laag--rij{clip-path:inset(59.92% 0 34.08% 0);transform-origin:center 62.92%}
.zt-menu__laag--onder{clip-path:inset(65.92% 0 0 0)}
.zt-uit.is-uit .zt-menu__laag--rij{opacity:0;transform:scaleY(0)}
.zt-uit.is-uit .zt-menu__laag--onder{transform:translateY(-6%)}

/* ---------- 6. de vragen, twee bij twee ---------- */

.zt-vragen__raster{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(var(--ruimte-blok-l) * 2) clamp(1.75rem,5vw,5rem);
  margin-top:calc(var(--ruimte-blok-l) * 2);interpolate-size:allow-keywords;
}
.zt-groep{display:grid;align-content:start}
.zt-groep .zh-label{padding-bottom:var(--ruimte-blok-s);border-bottom:1px solid var(--kleur-rand)}
.zt-vraag{border-bottom:1px solid var(--kleur-rand)}
.zt-vraag summary{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:calc(var(--ruimte-tikdoel) + 16px);
  padding-block:.6rem;cursor:pointer;list-style:none;
  font-size:var(--type-maat-tekst);font-weight:var(--type-gewicht-label);line-height:var(--type-regel-ui);
  transition:color var(--motion-duur-hover) var(--motion-curve-uit);
}
.zt-vraag summary::-webkit-details-marker{display:none}
/* Een plus die een min wordt, zoals op /prijzen/. */
.zt-vraag summary::after{
  content:"";flex:none;width:14px;height:14px;
  background:
    linear-gradient(var(--kleur-tekst-2), var(--kleur-tekst-2)) center / 14px 2px no-repeat,
    linear-gradient(var(--kleur-tekst-2), var(--kleur-tekst-2)) center / 2px 14px no-repeat;
  transition:background-size var(--motion-duur-menu) var(--motion-curve-uit);
}
.zt-vraag[open] summary::after{
  background:
    linear-gradient(var(--kleur-tekst), var(--kleur-tekst)) center / 14px 2px no-repeat,
    linear-gradient(var(--kleur-tekst), var(--kleur-tekst)) center / 2px 0 no-repeat;
}
.zt-vraag__antwoord p{max-width:var(--ruimte-meet);padding-bottom:var(--ruimte-blok-m);color:var(--kleur-tekst-2);line-height:var(--type-regel-tekst)}
@supports selector(::details-content){
  .zt-vraag::details-content{
    block-size:0;overflow:hidden;
    transition:block-size var(--motion-duur-lade) var(--motion-curve-uit),content-visibility var(--motion-duur-lade) allow-discrete;
  }
  .zt-vraag[open]::details-content{block-size:auto}
}
/* Wat nog niet kan, staat er met een label voor (F2). */
.zt-bouw{
  display:inline-block;margin-right:.4rem;padding:.15rem .55rem;border-radius:var(--radius-pil);vertical-align:.1em;
  background:var(--kleur-accent-klei-was);color:var(--kleur-tekst);
  font-size:var(--type-maat-groepslabel);font-weight:var(--type-gewicht-label);letter-spacing:var(--type-spatie-groepslabel);text-transform:uppercase;
}

/* ---------- 7. het slot: de duimstok vouwt uit ---------- */

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

@media (hover:hover) and (pointer:fine){
  .zt-hero .dmstart[data-demo-scherm="start"] .btn.ocher:hover{background:var(--kleur-actie-hover);border-color:var(--kleur-actie-hover)}
  .zt-tab:hover{color:var(--kleur-tekst)}
  .zt-tab:hover .zt-tab__lat{background:var(--kleur-glas-ring-hover)}
  .zt-pauze:hover{background:var(--kleur-glas-rand)}
  .zt-als__keus:hover{color:var(--kleur-tekst)}
  .zt-als__keus[aria-pressed="false"]:hover{background:var(--kleur-glas-zacht)}
  .zt-vraag summary:hover{color:var(--kleur-link)}
}

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

@media (max-width:860px){
  .zt-zien__balk{align-items:flex-start}
  .zt-zien__lijst{grid-template-columns:1fr;gap:0}
  .zt-tab{min-height:var(--ruimte-tikdoel);padding-top:.6rem}
  .zt-pauze{margin-bottom:0}
  .zt-maker__in,.zt-wie__rollen,.zt-vragen__raster{grid-template-columns:1fr}
  .zt-wie__rol{max-width:440px}
}
@media (max-width:600px){
  .zt-als{display:flex}
  .zt-als__keus{flex:1;padding-inline:.5rem}
  .zt-stap{--zt-nr:44px;gap:var(--ruimte-blok-m)}
  .zt-stap__tekst{font-size:var(--type-maat-tekst)}
}

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

@media (prefers-reduced-motion:reduce){
  .zt-zien.is-loopt .zt-tab[aria-selected="true"] .zt-tab__lat span,.zt-scherm:not([hidden]){animation:none}
  .zt-tab,.zt-pauze,.zt-stap::after,.zt-stap__nr,.zt-stap__tekst,.zt-als__keus,.zt-wie__laag--mila,.zt-wie__lat,.zt-menu__laag,.zt-vraag summary,.zt-vraag summary::after{transition:none}
  .zt-vraag::details-content{transition:none}
  html.js .zt-stap:not(.is-aan) .zt-stap__nr{transform:none}
}