/* Werkwijze: de lijntekening uit de film (pand, tandwiel, bus, drie pijlen) als herobeeld,
   in HUD-haken op een blauwdruk-stippenraster. Tekent zichzelf bij het laden (klaar rond 1,4 s).
   De glimlach rijdt mee als logo op de bus. */
.pagina-werkwijze .hero h1{font-size:clamp(38px,5.2vw,74px);hyphens:auto;overflow-wrap:anywhere;} /* "Doorvoeren." past zo in de tekstkolom; breekt alleen af als het niet past (bv. met extra letterafstand, WCAG 1.4.12) */
@media (min-width:1240px){.pagina-werkwijze .hero__beeld{margin-right:calc(var(--gutter) * -1);}}
.pagina-werkwijze .hero__lead{margin-top:clamp(26px,3vw,40px);} /* ruimte onder de diepe glimlach van het lange woord */
.pagina-werkwijze .hero__beeld{animation-duration:.6s;animation-delay:.1s;} /* eerder in beeld, zodat je het tekenen ziet */
.pagina-werkwijze .ww-tekening{padding:clamp(10px,1.4vw,16px);border-radius:var(--r-l);border:1px solid rgba(126,166,247,.16);
  background:radial-gradient(rgba(126,166,247,.14) 1px,transparent 1px) 0 0/24px 24px,radial-gradient(60% 60% at 50% 55%,rgba(37,99,235,.28),transparent 75%),rgba(11,28,61,.55);
  box-shadow:var(--glas-rand),var(--schaduw-zweef);}
.pagina-werkwijze .ww-tekening::before{animation:ww-haken .5s var(--ease) .3s both;}
.pagina-werkwijze .ww-svg{display:block;width:100%;height:auto;overflow:visible;}

/* lijnen */
.pagina-werkwijze .ww-lijn{fill:none;stroke:var(--wit);stroke-opacity:.85;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:1;animation:ww-teken .8s var(--ease) forwards;animation-delay:var(--d,.3s);}
.pagina-werkwijze .ww-grond{stroke:url(#ww-grond);stroke-opacity:1;--d:.3s;}
.pagina-werkwijze .ww-pand{--d:.35s;}
.pagina-werkwijze .ww-ramen{--d:.6s;animation-duration:.6s;}
.pagina-werkwijze .ww-tandwiel .ww-lijn{--d:.5s;}
.pagina-werkwijze .ww-bus .ww-lijn{--d:.5s;animation-duration:.65s;}
.pagina-werkwijze .ww-bus .ww-wiel{--d:.7s;animation-duration:.5s;}
.pagina-werkwijze .ww-hulp{fill:none;stroke:var(--lucht);stroke-opacity:.22;stroke-width:1;stroke-dasharray:2 6;}
.pagina-werkwijze .ww-vonk{fill:none;stroke:var(--ijs);stroke-width:1.6;stroke-linecap:round;animation:ww-in .3s var(--ease) 1.1s both;}

/* het tandwiel draait één keer rond en staat dan stil; de bus rijdt het beeld in */
.pagina-werkwijze .ww-tandwiel{transform-box:fill-box;transform-origin:center;animation:ww-draai 1.2s var(--ease) .3s both;}
.pagina-werkwijze .ww-bus{animation:ww-rijden .9s var(--ease) .45s both;}

/* pijlen en labels */
.pagina-werkwijze .ww-pijl{fill:none;stroke:var(--lucht);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:ww-teken .35s var(--ease) 1s forwards;}
.pagina-werkwijze .ww-punt{fill:none;stroke:var(--lucht);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;animation:ww-in .2s var(--ease) 1.25s both;}
.pagina-werkwijze .ww-labels{font:600 17px/1 var(--f-tekst);fill:var(--wit);animation:ww-in .3s var(--ease) 1.1s both;}
.pagina-werkwijze .ww-nr{fill:var(--lucht);font-family:var(--f-display);font-weight:800;}

/* de glimlach op de bus tekent zich als laatste */
.pagina-werkwijze .ww-glimlach path{fill:none;stroke:var(--lucht);stroke-width:8;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:ww-teken .4s var(--ease) .95s forwards;}
.pagina-werkwijze .ww-glimlach circle{fill:var(--lucht);transform-box:fill-box;transform-origin:center;animation:ww-plop .2s var(--ease) 1.3s both;}

@keyframes ww-teken{0%{stroke-dashoffset:1;opacity:0}1%{opacity:1}100%{stroke-dashoffset:0;opacity:1}}
@keyframes ww-in{from{opacity:0}}
@keyframes ww-plop{from{scale:0}}
@keyframes ww-draai{from{rotate:-360deg}}
@keyframes ww-rijden{from{translate:-36px 0}}
@keyframes ww-haken{from{inset:-34px;opacity:0}}

/* afspraken: laatste scène voor de CTA, rustig nacht */
.pagina-werkwijze .ww-afspraken h2{max-width:22ch;} /* twee regels in plaats van drie */
.pagina-werkwijze .ww-afspraken .kaart p{font-size:17px;}

@media (max-width:1239px){.pagina-werkwijze .ww-labels{font-size:20px;}} /* smallere kolom: labels groter in de tekening */
@media (max-width:900px){
  .pagina-werkwijze .ww-tekening{max-width:560px;} /* hoogstens ~360px hoog */
  .pagina-werkwijze .hero h1{font-size:min(10.2vw,56px);} /* één kolom: groter op tablet, "Doorvoeren." past op 320 */
}

/* telefoon: grotere labels (de tekening schaalt terug) */
@media (max-width:640px){
  .pagina-werkwijze .ww-labels{font-size:21px;}
  .pagina-werkwijze .ww-afspraken .kaart{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;row-gap:4px;align-items:start;}
  .pagina-werkwijze .ww-afspraken .kaart .chip{grid-row:span 2;}
  .pagina-werkwijze .ww-afspraken .kaart p{font-size:16px;}
}
@media (prefers-reduced-motion:reduce){
  .pagina-werkwijze :is(.ww-lijn,.ww-pijl,.ww-glimlach path){animation:none;stroke-dashoffset:0;}
  .pagina-werkwijze :is(.ww-tandwiel,.ww-bus,.ww-vonk,.ww-punt,.ww-labels,.ww-glimlach circle){animation:none;}
  .pagina-werkwijze .ww-tekening::before{animation:none;}
}