/* =====================================================================
   Werkwijze (herwerkt 2026-11-06): geen salespage en geen omkaderde tegels. Pagina-eigen fijnregeling op gedeelde blokken:
   koffievorm gespiegeld (.ft, opener en powerbankske), openklaplijst (.ag), prijskop (.pr__top), tegels (.tg), slider (.bs), koffie (.kf-ab).
   ===================================================================== */

/* ---------- 1. opener: zoals Meet the team, tekst start bovenaan, knoppen op de onderrand van de foto ---------- */
.wzh .ft__pic img{object-position:50% 72%}
@media (min-width:768px){
  .wzh .ft__r .cap:first-child,.wz-c .ft__r .cap:first-child{margin-top:0}   /* bovenkant tekst = bovenkant foto */
}
.wzh .ft__r .wzh__p{margin-top:var(--s-groep);max-width:none;text-wrap:pretty}
@media (min-width:1025px){.wzh .ft__r .wzh__p,.wzh .ft__r .stm{white-space:nowrap}}

/* ---------- 2. goed nieuws: gecentreerd ---------- */
.wz-g__in{text-align:center}
.wz-g__in .txt{margin:var(--s-groep) auto 0;max-width:none;text-align:center;text-wrap:wrap}
@media (min-width:1025px){.wz-g__in .txt{white-space:nowrap}}

/* ---------- 3. drie vaten: maten van de homepagelijst ---------- */
.wz-v .vb-w__sp + .ag{margin-top:5vw}
@media (min-width:1025px){
  .wz-v .ag__t{font-size:2.7vw}
  .wz-v .ag__lead{white-space:nowrap}
}

/* ---------- 4. powerbankske ---------- */
.wz-c .ft__r .txt{max-width:none}
@media (min-width:1025px){.wz-c .ft__r .txt{white-space:nowrap}}

/* ---------- 5. why ---------- */
.wz-y .pr__top{align-items:end}
.wz-y .pr__top .lead{margin-top:var(--s-groep)}
.wz-y .pr__top .txt{margin-top:var(--s-kop);max-width:none;text-wrap:pretty}
@media (min-width:1025px){
  .wz-y .pr__top > div[data-ap-kids]{max-width:50vw}
  .wz-y .pr__top .lead,.wz-y .pr__top .stm,.wz-y .pr__top .txt{white-space:nowrap}
  .wz-y .pr__pics{grid-template-columns:14vw 18vw}
}

/* ---------- 6. zo pakken we dat aan: kaarten met sticker, zelfde stickermaat als het team ---------- */
.wz-a .vk-grid{margin-top:7vw}
.wz-a .vk-tag{font-size:1.15vw;padding:.8em 1.2em}
.wz-a .wk__end{margin-top:7vw}

/* ---------- gsm ---------- */
@media (max-width:767px){
  html:not(#a) body:not(#z) .md[data-pg="werkwijze"] .wzh .ft__r .stm{font-size:8.2vw !important;line-height:1.1 !important}
  html:not(#a) body:not(#z) .md[data-pg="werkwijze"] .wzh .ft__r .stm br{display:inline !important}
  .wzh .ft__r .wzh__p{margin-top:var(--r2)}
  .wzh .ft__pic{margin-top:var(--r3)}
  .wz-g__in .txt{max-width:none;margin-top:var(--r2);text-align:justify;text-align-last:left;hyphens:auto;text-wrap:pretty}
  html:not(#a) body:not(#z) .wz-g .stm br{display:inline !important}
  .wz-v .vb-w__sp + .ag{margin-top:3.6vw}
  .wz-v .ag__lead{text-align:left;hyphens:none;text-wrap:pretty}
  .wz-c .ft__pic{margin-top:var(--r3)}
  html:not(#a) body:not(#z) .wz-v .ag__pic{aspect-ratio:3/2;margin-bottom:8vw}
  html:not(#a) body:not(#z) .wz-v .ag__over{margin-top:11vw}
  html:not(#a) body:not(#z) .wz-v .ag__pts{margin-top:5.4vw}
  html:not(#a) body:not(#z) .wz-v .ag__row{padding:3.4vw 0}
  html:not(#a) body:not(#z) .wz-v .ag__t{font-size:5.2vw}
  html:not(#a) body:not(#z) .wz-v .ag__pts .bdy{font-size:3.73vw !important;line-height:1.55 !important;padding-bottom:5vw}
  .wz-y .pr__top .lead,.wz-y .pr__top .txt{margin-top:var(--r2)}
  html:not(#a) body:not(#z) .wz-a .vk-tag{font-size:3.3vw;padding:.8em 1.2em}
  .md[data-pg="werkwijze"] .wk__end .lead{font-size:4.75vw;line-height:1.32;white-space:normal;text-align:justify;text-align-last:left;hyphens:none;text-wrap:pretty}
}