/* ============================================================================================
   WERKWIJZE · lichte proef op de gedeelde basis (B105 punt 3, 04-10-2026). Voortgangsproef, geen kandidaat.
   Laadt NA nx-basis.css. Alleen wat van deze pagina is: hero-indeling (richting A, B89), trajectlijn, tijdlijn,
   afspraken en koppelingen, vragen, slot. Teksten staan in werkwijze.html en zijn niet gewijzigd.
   ER IS GEEN LICHT BEELD: de plaat is het schema uit de maquette. Plaatfracties van dat schema
   (WERKWIJZE-COMPOSITIE.md §4): liggend vogel met sleep x 5,0-22,7 %, y 14,0-47,0 %; staand x 6,0-73,9 %, y 33,5-73,5 %.
   Twee standen van de hero:
     L liggend of breder dan 1100 px  plaat links verankerd op haar eigen verhouding; kop, zin, knop en direct daaronder de trajectlijn rechts
     S staand tot 1100 px breed       kop en zin in de lucht, daaronder de plaat met de hele vogel, knop en trajectlijn op het water
   RONDE 2 (04-10-2026, alleen opmaak): S geldt nu ook voor staande tablets tot 1100 px; in L is de hero precies het eerste
   scherm hoog (de plaat houdt haar verhouding en loopt onder de vouw door); de trajectlijn staat direct onder de knop;
   L rekent met het vak van een vogel van 1,5x (plaat x 4,0-30,6 %, y 12,0-61,5 %; VAKKEN-WERKWIJZE.json); kop in rem.
   RONDE 3 (04-10-2026, B117 punt 2): L rekent met het vak van de grotere vogel (plaat x 4-34 %, y 12-68 %); boven de
   trajectlijn staat het zichtbare bijschrift "De vier stappen".
   RONDE 4 (04-10-2026, na de keuring van ronde 3): het vogelvak ligt in de plaat 3 % lager en 1 % verder naar links
   (x 3-33 %, y 15-71 %, zelfde maat) zodat er reserve is onder de kopbalk en naast de tekst als een beeld de vogel groter
   maakt; liggend is de hero zo hoog als de plaat (de voorgrond is te zien, de groep kop-knop-trajectlijn blijft in het
   eerste scherm); de kop blijft bij grote letters in twee regels; staand loopt het water door tot onder de trajectlijn.
   RONDE 5 (04-10-2026, na de keuring van ronde 4, B129): de plaatshouder is het warme schema (ww-schema-r5-*.svg, de
   compositie van de warme schets; geen woord in het beeld); liggend zakt de plaat op lage vensters zo ver dat de kuif
   12 % van de vogelhoogte onder de kopbalk vrij heeft; staand staat de knop iets lager (ruimte voor veer en waterval);
   de trajectlijn toont de stap waar de lezer is.
   Beweging (EMIL-HELE-SITE.md 2.3 en deel 3): alleen transform en opacity; het ene moment is de lijn van de tijdlijn
   die één keer van stap naar stap aangaat; de stilstaande stand is de gewone css.
   ============================================================================================ */

.ww{background:#f2ece0;color:var(--nx-inkt);--ww-lucht:#dbe7ee;--ww-water:#b4dedb}   /* ronde 5: bovenste luchtkleur en egale waterkleur van het schema; een beeld moet op die randen aansluiten */
.ww .kw{font:inherit;color:inherit}

/* ---------------------------------------------------------------- hero, gedeeld */
.ww-hero{position:relative;isolation:isolate;overflow:clip;background:#f2ece0}
.ww-stage{z-index:0;pointer-events:none}
.ww-stage picture{display:block;width:100%;height:100%}
.ww-plaat{display:block;width:100%;height:100%;max-width:none;object-fit:fill}
/* label "schema, geen beeld": klein, hoort bij de proef en niet bij de site */
.ww-schema{position:absolute;z-index:4;margin:0;padding:3px 9px;border-radius:999px;white-space:nowrap;
  font:400 10px/1.3 var(--sans);letter-spacing:.04em;color:var(--nx-inkt);background:rgba(255,253,248,.9);box-shadow:inset 0 0 0 1px rgba(176,138,69,.4)}
.ww-schema b{margin-right:6px;font-weight:700;letter-spacing:.2em;text-transform:uppercase}

.ww-kop .eyebrow{margin:0 0 14px;font-size:.8125rem;letter-spacing:.32em;color:var(--nx-inkt-diep)}
.ww-kop .eyebrow::after{width:48px;background:#b18243}
.ww-kop h1{--km:4.5rem;font:400 4.5rem/1.04 var(--serif);letter-spacing:-.006em;color:var(--nx-inkt-diep);overflow-wrap:anywhere}   /* rem: de kop groeit mee met de letterinstelling */
.ww-kop h1 .kw{display:block}
.ww-lead{max-width:34em;font-size:1.125rem;line-height:1.5;color:var(--nx-inkt);text-wrap:pretty}

/* de trajectlijn: één smalle heldere strook met de vier stapnamen op een lijn; elke naam is een anker naar zijn stap.
   Kiezen antwoordt direct: de ruit vult zich zonder overgang van maat of plaats, er verschuift niets. */
.ww-lijn{--g-r:22px;padding:6px 20px}
/* bijschrift (ronde 3, B117): klein, in de stijl van de bovenregels, boven de strook; het telt niet mee in de hoogte van
   het glas. Voor een schermlezer draagt de navigatie de naam al (aria-label); het zichtbare bijschrift is daarom aria-hidden. */
.ww-lijn__naam{position:absolute;left:20px;width:max-content;max-width:calc(100% - 40px);bottom:calc(100% + .5rem);margin:0;font:500 .75rem/1.2 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--nx-inkt-diep);overflow-wrap:anywhere;pointer-events:none}
.ww-lijn ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;margin:0;padding:0}      /* past de rij niet (grote letter), dan breekt zij af; er loopt niets in elkaar */
.ww-lijn li{display:flex;align-items:center;flex:1 0 auto}
.ww-lijn li:last-child{flex:0 0 auto}
.ww-lijn li:not(:last-child)::after{content:"";flex:1 1 12px;min-width:12px;height:1px;margin:0 14px;background:rgba(11,44,41,.34)}
.ww-lijn a{position:relative;display:inline-flex;align-items:center;gap:11px;min-height:44px;padding:0 2px;border-radius:8px;
  font:400 1.375rem/1.1 var(--serif);color:var(--nx-inkt-diep);text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:6px;white-space:nowrap}
.ww-lijn a::before{content:"";flex:0 0 auto;width:9px;height:9px;transform:rotate(45deg);border:1px solid var(--nx-inkt);background:rgba(255,253,248,.7)}
.ww-lijn a[aria-current]{text-decoration-color:#8a6a2b}
.ww-lijn a[aria-current]::before{border-color:var(--nx-petrol);background:var(--nx-petrol)}
.ww-lijn a:active{opacity:.62}
.ww-lijn a:active::before{transform:rotate(45deg) scale(.86)}
@media (hover:hover) and (pointer:fine){
  .ww-lijn a:hover{text-decoration-color:rgba(11,44,41,.5)}
  .ww-lijn a[aria-current]:hover{text-decoration-color:#8a6a2b}
}

/* ---------------------------------------------------------------- L · liggend, of breder dan 1100 px */
@media (min-width:1101px),(orientation:landscape){
  .ww-hero{
    --hh:100svh;                                           /* de hero is precies het eerste scherm hoog (ronde 2): op een venster breder dan 16:9 stond de trajectlijn onder de vouw */
    --ph:max(100svh,56.25vw);                              /* plaathoogte volgt het eerste scherm; breder dan 16:9 volgt de breedte en loopt de plaat onder de vouw door */
    --pw:calc(var(--ph) * 16 / 9);                         /* de plaat staat altijd in haar eigen verhouding */
    --gut:calc(var(--edge) - 12px);                        /* rechts dezelfde lijn als de kopbalk */
    --kl:max(46vw,calc(var(--pw) * .34 + 40px));           /* linkerlijn van de kop: het vogelvak eindigt op 33 % van de plaat (ronde 4); de kolom begint 1 % + 40 px verder, dat is de reserve voor een vogel die breder uitvalt */
    --st:max(0px,calc(var(--header-h) - var(--ph) * .0828)); /* ronde 5: de kuif (plaat 15 %) houdt 6,72 % van de plaathoogte vrij onder de kopbalk, dat is 12 % van de vogelhoogte (56 %); op lage vensters zakt de plaat daarvoor 2 tot 16 px */
    background:linear-gradient(180deg,var(--ww-lucht) 0,var(--ww-lucht) var(--st),#f2ece0 var(--st));
    min-height:calc(var(--st) + var(--ph));                /* ronde 4: de hele plaat hoort bij de hero; op een venster breder dan 16:9 loopt de voorgrond onder de vouw door in plaats van weg te vallen */
  }
  /* de kop groeit mee met de letterinstelling (--km in rem) maar nooit breder dan de kolom: "Van eerste idee" blijft één regel */
  .ww-kop h1{font-size:min(var(--km),calc((100vw - var(--kl) - var(--gut)) / 5.1))}
  /* links verankerd: bij een venster smaller dan 16:9 valt rechts lucht en water weg, nooit de sleep (plaat 5 %) */
  .ww-stage{position:absolute;top:var(--st);left:0;width:var(--pw);height:var(--ph);background:linear-gradient(180deg,var(--ww-lucht) 0 50%,#f2ece0 50%)}
  .ww-schema{left:4.5%;top:90%}
  .ww-inhoud{position:relative;z-index:1;display:flex;flex-direction:column;min-height:var(--hh);
    padding:min(calc(var(--ph) * .23),calc(var(--hh) * .27)) var(--gut) calc(var(--hh) * .08) var(--kl)}
  .ww-lead{margin-top:18px}
  .ww-acties{margin-top:22px;margin-bottom:2.75rem}        /* ronde 3: ruimte voor het bijschrift boven de trajectlijn */
  /* de trajectlijn hoort bij de knop (ronde 2): direct eronder, niet breder dan nodig; zo leest zij als keuze */
  .ww-lijn{margin-top:0;align-self:flex-start;width:min(100%,44rem)}
  /* overgang naar het marmer: licht over de onderrand van de hero, geen harde snede; is de hero hoger dan de plaat, dan begint zij op de onderrand van de plaat */
  .ww-hero::after{content:"";position:absolute;left:0;right:0;top:min(calc(var(--st) + var(--ph) - 64px),calc(100% - 64px));bottom:0;z-index:0;pointer-events:none;
    background:linear-gradient(180deg,rgba(247,243,236,0) 0,rgba(247,243,236,.5) 37px,#f7f3ec 64px)}
}
@media (min-width:1700px){.ww-lead{font-size:1.25rem}}                                   /* ronde 2: 18 px naast een kop van 72 px was klein */
@media (min-width:861px) and (max-width:1699.98px){.ww-kop h1{--km:3.75rem}}
@media (min-width:861px) and (max-width:1400px){.ww-kop h1{--km:3.25rem}.ww-lead{font-size:1.0625rem}}
@media (min-width:861px) and (max-width:1100px){
  .ww-kop h1{--km:3rem}
  .ww-lijn{padding-inline:14px}
  .ww-lijn a{font-size:1.1875rem;gap:8px}
  .ww-lijn li:not(:last-child)::after{margin:0 8px;min-width:6px;flex-basis:6px}
}
/* liggend en smal of laag (telefoon liggend, desktop op zoom 200 %) */
@media (orientation:landscape) and (max-width:860px),(orientation:landscape) and (max-height:520px){
  .ww-hero{--gut:max(16px,calc(var(--edge) - 12px))}
  .ww-schema__lang{display:none}                             /* ronde 5: het lange proeflabel lag hier over het pyriet van het schema */
  .ww-kop h1{--km:2.25rem}
  .ww-lead{font-size:1rem}
  .ww-inhoud{padding-top:calc(var(--header-h) + 28px);padding-bottom:28px}
  /* ronde 4: de vier namen in één rij als dat past (844x390); past het niet (grote letter), dan breekt de rij af */
  .ww-lijn{padding-inline:12px}
  .ww-lijn ol{flex-wrap:wrap;justify-content:space-between;gap:0 10px}
  .ww-lijn li:not(:last-child)::after{display:none}
  .ww-lijn li,.ww-lijn li:last-child{flex:0 0 auto}
  .ww-lijn a{font-size:1rem;gap:6px}
  .ww-lijn a::before{width:7px;height:7px}
}

/* ---------------------------------------------------------------- S · staand tot 1100 px breed (ronde 2: ook de staande tablet) */
/* De onderdelen staan onder elkaar in de stroom: kop en zin in de lucht, dan de plaat, dan knop en trajectlijn die over
   het water van de plaat liggen. De plaat begint 30 % van haar hoogte boven de onderkant van de zin (kuif op 33,5 %),
   dus wordt de tekst groter, dan schuift de vogel mee omlaag en raakt de tekst de kuif niet. Boven de plaat loopt de
   lucht door als effen kleur: een echt beeld moet daar zelf lucht bieden (zie VAKKEN-werkwijze.json). */
@media (max-width:1100px) and (orientation:portrait){
  .ww-hero{--pw:100vw;--ph:calc(var(--pw) * 16 / 9);display:flex;flex-direction:column;align-items:center;padding-bottom:64px;
    background:linear-gradient(180deg,var(--ww-lucht) 0,var(--ww-lucht) 50%,var(--ww-water) 50%,var(--ww-water) calc(100% - 40px),#f7f3ec 100%)}
  .ww-inhoud,.ww-kopblok{display:contents}
  .ww-kop,.ww-lead,.ww-acties,.ww-lijn{position:relative;z-index:1}
  .ww-kop{order:1;padding:calc(var(--header-h) + 26px) 16px 0;text-align:center}
  .ww-kop .eyebrow{justify-content:center;margin-bottom:8px;letter-spacing:.3em}
  .ww-kop h1{font-size:2.25rem;line-height:1.1}
  .ww-lead{order:2;margin-top:12px;padding:0 20px;font-size:1rem;text-align:center}
  .ww-stage{order:3;position:relative;flex:0 0 auto;width:var(--pw);height:var(--ph);margin-top:calc(var(--ph) * -.30);
    -webkit-mask-image:linear-gradient(180deg,#000 0,#000 94%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 94%,transparent 100%)}
  .ww-schema{left:4%;top:33.2%}                              /* ronde 5: boven de jade, onder de zin */
  .ww-schema__lang{display:none}
  /* knop 14 px onder de sleep (onderkant vogel 77,2 % van de plaat), daaronder de trajectlijn; beide op het water */
  .ww-acties{order:4;max-width:calc(100% - 32px);margin-top:calc(var(--ph) * -.222 + max(16px,var(--ph) * .021))}   /* ronde 4: 0,6 % van de plaat lager, zodat de losse veer langs de vrije voorrand van het marmer past (VAKKEN-WERKWIJZE.json) */
  .ww-lijn{order:5;align-self:stretch;margin:2.125rem 12px 0;padding:4px 12px}
  .ww-lijn__naam{left:50%;max-width:100%;transform:translateX(-50%);text-align:center;letter-spacing:.24em}
  .ww-lijn ol{justify-content:space-between;flex-wrap:wrap;gap:0 6px}
  .ww-lijn li,.ww-lijn li:last-child{flex:0 0 auto}
  .ww-lijn li:not(:last-child)::after{display:none}
  .ww-lijn a{gap:6px;font-size:1.0625rem}
  .ww-lijn a::before{width:7px;height:7px}
}
@media (min-width:601px) and (max-width:1100px) and (orientation:portrait){
  .ww-kop h1{font-size:3rem}
  .ww-lead{font-size:1.0625rem}
  .ww-lijn{align-self:center;width:min(100% - 56px,40rem);padding:6px 20px}
  .ww-lijn a{font-size:1.25rem;gap:10px}
}
@media (min-width:861px) and (max-width:1100px) and (orientation:portrait){
  .ww-kop{padding-top:calc(var(--header-h) + 14px)}        /* ronde 5: 26 px minder lucht boven de paginanaam; de knop staat op de tablet 24 px lager en de trajectlijn blijft zo in het eerste scherm van 1024x1366 */
  .ww-kop h1{font-size:3.5rem}
  .ww-lead{font-size:1.125rem}
}
@media (max-width:375px) and (orientation:portrait){.ww-kop h1{font-size:2.125rem}.ww-lijn a{font-size:1rem}}
@media (max-width:300px){.ww-kop h1{font-size:1.625rem}.ww-kop{padding-inline:10px}.ww-kop .eyebrow{letter-spacing:.18em}.ww-kop .eyebrow::after{display:none}.ww-lead{padding:0 12px}.ww-acties{max-width:calc(100% - 20px)}}

/* ---------------------------------------------------------------- vervolgsecties op de vloer */
.ww-sectiekop{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:18px clamp(32px,4.4vw,96px);align-items:end;margin-bottom:clamp(36px,4vw,64px)}
.ww-tekst{margin-top:18px;max-width:36em;font-size:1.0625rem;line-height:1.6;color:var(--nx-tekst);text-wrap:pretty}
.ww-noot{margin-top:14px;max-width:40em;font-size:.9375rem;line-height:1.5;color:var(--nx-tekst)}   /* noten in de gewone tekstkleur: de zachte kleur haalde op een marmerader 3,8-4,0 (gemeten) */
.ww-traject{padding-top:clamp(56px,6vw,104px)}
/* een tekstlink mag afbreken (smal scherm, grote letter): de pijl zakt dan naar de volgende regel, er steekt niets uit */
.ww .tekstlink{flex-wrap:wrap;max-width:100%;overflow-wrap:anywhere}
/* de bovenregel is in de basis een rij die niet afbreekt: 'ANTWOORDEN' met spatiëring en streep was op een smal scherm of bij een grote letter breder dan het scherm (gemeten 18-100 px overloop) */
.ww .eyebrow{flex-wrap:wrap;row-gap:6px;overflow-wrap:anywhere}
.site-footer .legal a{overflow-wrap:anywhere}

/* de tijdlijn: vier stappen naast elkaar op één lijn. Geen kaarten, geen glas. */
.ww-tijdlijn{--kol:clamp(20px,2.6vw,48px);list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,10.25rem),1fr));column-gap:var(--kol);row-gap:40px}   /* vier naast elkaar zolang een kolom 10,25rem haalt; bij een grotere letter minder kolommen */
.ww-stap{position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:46px 0 0;scroll-margin-top:calc(var(--header-h) + 44px)}
/* dunne grondlijn (staat er altijd) en de lichtlijn eroverheen (eindstand: aan) */
.ww-stap::before,.ww-stap::after{content:"";position:absolute;left:0;right:calc(var(--kol) * -1);top:15px;height:1px;pointer-events:none}
.ww-stap::before{background:var(--nx-goud-lijn)}
.ww-stap::after{top:14px;height:2px;background:linear-gradient(90deg,#8a6a2b,#b08a45);transform-origin:0 50%}
.ww-stap:last-child::before,.ww-stap:last-child::after{right:0}
.ww-stap__ruit{position:absolute;z-index:1;left:0;top:9px;width:13px;height:13px;transform:rotate(45deg);border:1px solid #8a6a2b;background:var(--nx-ivoor-licht)}
.ww-stap__ruit::after{content:"";position:absolute;inset:-1px;background:var(--nx-petrol)}
.ww-stap h3{font-size:clamp(1.625rem,2.1vw,2.125rem);line-height:1.1}
.ww-stap > p{margin-top:12px;max-width:30em;font-size:1.0625rem;line-height:1.55;color:var(--nx-tekst);text-wrap:pretty}
/* wie beslist: een regel met een eigen merkteken, geen kaart */
.ww-stap > .ww-stap__moment{display:flex;align-items:center;gap:10px;margin-top:16px;font:500 .78125rem/1.35 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--nx-goud-tekst);overflow-wrap:anywhere}
.ww-stap__moment::before{content:"";flex:0 0 auto;width:18px;height:1px;background:var(--nx-goud)}
.ww-stap .tekstlink{margin-top:auto;padding-top:10px}
/* de gekozen stap (anker uit de trajectlijn; :target werkt zonder JavaScript) */
.ww-stap:is(:target,.is-gekozen) h3{text-decoration:underline;text-decoration-color:#8a6a2b;text-decoration-thickness:1px;text-underline-offset:7px}
.ww-stap:is(:target,.is-gekozen) .ww-stap__ruit{box-shadow:0 0 0 4px var(--nx-ivoor-licht),0 0 0 5px #8a6a2b}

/* HET ENE MOMENT: de lichtlijn gaat één keer van stap naar stap aan zodra de tijdlijn in beeld komt. Alleen het decor
   wacht (lijn en vulling van de ruit); de tekst staat er altijd. De wachtstand bestaat alleen als het script hem zet
   (.ww-wacht), bij beweging aan; valt het script weg of gaat beweging uit, dan geldt de eindstand hierboven. */
@media (prefers-reduced-motion:no-preference){
  html.ww-js:not(.beweging-uit) .ww-stap:not(.ww-wacht)::after{transition:transform .6s var(--ease)}                      /* alleen het aangaan beweegt; de wachtstand zelf wordt zonder overgang gezet */
  html.ww-js:not(.beweging-uit) .ww-stap:not(.ww-wacht) .ww-stap__ruit::after{transition:opacity var(--t-op) ease-out}
  html.ww-js:not(.beweging-uit) .ww-stap.ww-wacht::after{transform:scaleX(0)}
  html.ww-js:not(.beweging-uit) .ww-stap.ww-wacht .ww-stap__ruit::after{opacity:0}
  @media (min-width:861px){
    html.ww-js:not(.beweging-uit) .ww-stap:nth-child(2)::after,html.ww-js:not(.beweging-uit) .ww-stap:nth-child(2) .ww-stap__ruit::after{transition-delay:.3s}
    html.ww-js:not(.beweging-uit) .ww-stap:nth-child(3)::after,html.ww-js:not(.beweging-uit) .ww-stap:nth-child(3) .ww-stap__ruit::after{transition-delay:.6s}
    html.ww-js:not(.beweging-uit) .ww-stap:nth-child(4)::after,html.ww-js:not(.beweging-uit) .ww-stap:nth-child(4) .ww-stap__ruit::after{transition-delay:.9s}
  }
}

/* ---------------------------------------------------------------- online afspraken en koppelingen (inhoud ongewijzigd; rustiger opmaak) */
/* RONDE 2: de sectie stond in twee kolommen (1,3 : 0,7) met rechts alleen de vier koppelingen: daaronder bleef een lege
   kolom van ongeveer 400 px. Nu dezelfde twee kolommen als de sectiekop en het slot (0,9 : 1,1): links bovenregel en kop,
   rechts de tekst, de lijst, de link en de noot; de koppelingen als één rij over de hele breedte eronder. Tot 860 px één kolom. */
.ww-afspraken__grid{display:block}
.ww-ruiten{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:10px 28px;max-width:36em;margin:22px 0 0;padding:0}
.ww-ruiten li{position:relative;padding-left:22px;overflow-wrap:anywhere;font-size:1.0625rem;line-height:1.4;color:var(--nx-navy)}
.ww-ruiten li::before{content:"";position:absolute;left:1px;top:.5em;width:8px;height:8px;transform:rotate(45deg);border:1px solid #8a6a2b}
.ww-demo{margin-top:20px}
.ww-tekstlink__label{font-weight:400}
.ww-koppelingen{margin-top:36px;padding:26px 0 0;border-top:1px solid var(--nx-goud-lijn)}
@media (min-width:861px){
  .ww-afspraak,.ww-koppelingen{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);column-gap:clamp(32px,4.4vw,96px);align-items:start}
  .ww-afspraak{grid-template-rows:max-content 1fr}
  .ww-afspraak > .eyebrow{grid-column:1;grid-row:1}
  .ww-afspraak > h2{grid-column:1;grid-row:2 / span 4}
  .ww-afspraak > .ww-tekst{grid-column:2;grid-row:1 / span 2;margin-top:0}
  .ww-afspraak > .ww-ruiten{grid-column:2;grid-row:3}
  .ww-afspraak > .ww-demo{grid-column:2;grid-row:4;justify-self:start}
  .ww-afspraak > .ww-noot{grid-column:2;grid-row:5}
  .ww-koppelingen{margin-top:clamp(36px,4vw,56px);padding-top:clamp(26px,2.6vw,36px)}
  .ww-koppelingen h3{grid-column:1;grid-row:1 / span 2}
  .ww-afspraken .ww-koppelingen ul{grid-column:2;margin-top:0;grid-template-columns:repeat(2,minmax(0,1fr))}   /* twee bij twee: vier naast elkaar brak "Google Calendar" en "Microsoft Teams" af */
  .ww-koppelingen .ww-noot{grid-column:2}
}.ww-koppelingen ul{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,9.5rem),1fr));gap:16px 20px;margin:20px 0 0;padding:0}
.ww-koppelingen li{display:flex;align-items:center;gap:12px;min-width:0;overflow-wrap:anywhere;font-size:1rem;line-height:1.3;color:var(--nx-navy)}
.ww-logo{flex:0 0 auto;display:grid;place-items:center;width:36px;height:36px}
.ww-logo img{width:30px;height:30px}

/* ---------------------------------------------------------------- vragen */
.ww-faq__grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(36px,5vw,96px);align-items:start}
.ww-faq__vraag{margin-top:30px;padding-top:18px;max-width:24em;border-top:1px solid var(--nx-goud-lijn)}
.ww-faq__vraagkop{font:400 1.4375rem/1.2 var(--serif);color:var(--nx-navy)}
.ww-faq__vraagtekst{margin-top:4px;color:var(--nx-tekst)}
.ww-faq__vraag .tekstlink{margin-top:10px}                /* ronde 4: de lichte rand om de focusring dekte de regel erboven af */
.ww-faq__lijst{border-top:1px solid var(--nx-goud-lijn)}
.ww-faq details{border-bottom:1px solid var(--nx-goud-lijn)}
.ww-faq summary{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:68px;padding:14px 4px;cursor:pointer;list-style:none;
  font:400 clamp(1.3125rem,1.6vw,1.625rem)/1.2 var(--serif);color:var(--nx-navy)}
.ww-faq summary::-webkit-details-marker{display:none}
.ww-faq summary::after{content:"";flex:0 0 auto;width:10px;height:10px;margin-right:6px;border-right:1.5px solid #8a6a2b;border-bottom:1.5px solid #8a6a2b;transform:translateY(-3px) rotate(45deg);transition:transform var(--t-terug) var(--ease)}
.ww-faq details[open] > summary::after{transform:translateY(2px) rotate(225deg)}
.ww-faq summary:focus-visible{outline-offset:-2px;box-shadow:none}
.ww-faq details > p{max-width:44em;padding:0 4px 22px;font-size:1.0625rem;line-height:1.6;color:var(--nx-tekst)}
.ww-faq details > p a{color:var(--nx-navy);text-decoration:underline;text-decoration-color:var(--nx-goud);text-underline-offset:4px}
@media (hover:hover) and (pointer:fine){
  .ww-faq summary:hover{background-color:rgba(176,138,69,.07)}
}
.ww-faq summary:active{background-color:rgba(176,138,69,.16)}          /* na de hoverregel: indrukken wint ook met een muis */
/* uitklappen: alleen de dekking van het antwoord, 160 ms; geen hoogte-animatie */
@media (prefers-reduced-motion:no-preference){
  html:not(.beweging-uit) .ww-faq details[open] > p{animation:nx-op var(--t-op) ease-out}
}

/* ---------------------------------------------------------------- slot: één primaire handeling */
.ww-slot{padding-bottom:clamp(72px,7.5vw,128px)}
.ww-slot__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:22px clamp(32px,4.4vw,96px);align-items:start;padding-top:clamp(36px,4vw,56px);border-top:1px solid var(--nx-goud-lijn)}
.ww-slot__acties{display:flex;flex-wrap:wrap;align-items:center;gap:12px 30px;margin-top:26px}
.ww-slot .cta-mail{display:flex;flex-wrap:wrap;align-items:center;gap:2px 16px}
.ww-slot__belofte{margin-top:20px}
.ww-slot .cta-note{color:var(--nx-tekst)}                 /* de zachte kleur haalde hier op een marmerader 4,0 (gemeten; p5 4,7) */

/* ---------------------------------------------------------------- 861-1100 px */
@media (min-width:861px) and (max-width:1100px){
  .ww-stap > p{font-size:1rem}
}

/* ---------------------------------------------------------------- tot 860 px: alles in één kolom, de tijdlijn staand langs één lijn */
@media (max-width:860px){
  .ww-sectiekop,.ww-faq__grid,.ww-slot__grid{grid-template-columns:minmax(0,1fr)}
  .ww-sectiekop{align-items:start;margin-bottom:32px}
  .ww-tekst,.ww-stap > p,.ww-faq details > p,.ww-ruiten li{font-size:1rem}
  .ww-tijdlijn{grid-template-columns:minmax(0,1fr);column-gap:0;row-gap:0}
  .ww-stap{padding:0 0 34px 34px}
  .ww-stap:last-child{padding-bottom:0}
  .ww-stap::before,.ww-stap::after,.ww-stap:last-child::before,.ww-stap:last-child::after{left:6px;right:auto;top:10px;bottom:-10px;width:1px;height:auto}
  .ww-stap::after{left:5.5px;width:2px;background:linear-gradient(180deg,#8a6a2b,#b08a45);transform-origin:50% 0}
  .ww-stap:last-child::before,.ww-stap:last-child::after{bottom:8px}
  .ww-stap__ruit{top:8px}
  .ww-stap .tekstlink{margin-top:6px;padding-top:0}
  .ww-slot{padding-bottom:88px}
  .ww-slot__acties{flex-direction:column;align-items:flex-start}
  @media (prefers-reduced-motion:no-preference){
    html.ww-js:not(.beweging-uit) .ww-stap.ww-wacht::after{transform:scaleY(0)}
  }
}
/* geforceerde kleuren (ronde 4, F8): vulling en onderstreepkleur van de gekozen stap vallen daar weg; een rand om de naam
   en een dikkere ruit maken haar te onderscheiden. De focusring gaat voor. */
@media (forced-colors:active){
  .ww-lijn a[aria-current]:not(:focus-visible){outline:2px solid Highlight;outline-offset:2px}
  .ww-lijn a[aria-current]::before{border-width:3px}
  .ww-stap:is(:target,.is-gekozen) .ww-stap__ruit{outline:2px solid Highlight;outline-offset:3px}
}
@media (prefers-contrast:more){
  .ww-lijn a[aria-current]{text-decoration-color:currentColor;text-decoration-thickness:2px}
  .ww-stap::before{background:#131d33}
}