/* =========================================================
   De Lesbrigade, workshoppagina
   Laadt na stijl.css, alleen op /workshops/<slug>/. Alles hier
   leunt op de tokens, knoppen, strook, stappen en vragen van de
   homepage; alleen wat die pagina niet heeft staat hieronder.
   Opbouw en skeletten per sectie: bouw/sjablonen/workshop.mjs.
   ========================================================= */

/* ---------- achtergrond om en om ----------
   Het sjabloon zet w-canvas of w-panel pas nadat lege secties zijn
   weggevallen. Drie klassen specificiteit, zodat de vaste achtergrond van
   .sectie-voorwie, .sectie-vragen en .sectie-voorstel niet meer telt. */
.workshop .sectie.w-canvas{--vlak:var(--canvas);--vlak-ander:var(--panel);background:var(--canvas);border-top:0;border-bottom:0}
.workshop .sectie.w-panel{--vlak:var(--panel);--vlak-ander:var(--canvas);background:var(--panel);border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn)}

/* kaarten, formulier en blokjes nemen steeds het andere vlak, zodat ze op
   elke achtergrond als los vel papier lezen */
.workshop .w-panel .kaart,
.workshop .w-panel .formulier{background:var(--canvas)}
.workshop .w-panel .kaart-beeld{background:var(--panel)}
.workshop .w-panel .veld input,
.workshop .w-panel .veld select,
.workshop .w-panel .veld textarea{background:var(--panel)}


/* =========================================================
   1. KOP
   ========================================================= */
.w-kop{padding-top:calc(76px + clamp(22px,3.4vw,52px));padding-bottom:clamp(64px,8vw,120px)}

.kruimel{margin-bottom:clamp(26px,3.6vw,52px)}
.kruimel ol{
  list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;
  font-size:14px;font-weight:700;color:var(--text-secondary);
}
.kruimel li{display:inline-flex;align-items:center}
.kruimel li + li::before{
  content:"";width:6px;height:6px;margin:0 13px 0 9px;flex:none;
  border-top:2px solid var(--lijn-sterk);border-right:2px solid var(--lijn-sterk);
  transform:rotate(45deg);
}
.kruimel a{
  color:var(--text-secondary);text-decoration:underline;text-decoration-thickness:2px;
  text-underline-offset:5px;text-decoration-color:transparent;
  transition:color .25s var(--ease),text-decoration-color .25s var(--ease);
}
.kruimel a:hover{color:var(--cta);text-decoration-color:var(--accent)}
.kruimel [aria-current]{color:var(--cta)}

.w-kop-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);
  gap:clamp(36px,6vw,96px);align-items:center;
}
.w-kop h1{
  font-size:clamp(38px,4.7vw,68px);line-height:1.03;letter-spacing:-.012em;
  margin:0 0 22px;max-width:13ch;text-wrap:balance;
}
.w-kop .label{color:var(--accent-tekst)}
.w-kop .lede{max-width:44ch}
.w-strook{margin:30px 0 0;padding-top:16px;max-width:560px}
.w-acties{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;margin-top:34px}

/* de tweede knop: dezelfde knop, maar alleen de rand */
.btn-rand{background:transparent;color:var(--cta);box-shadow:inset 0 0 0 2px var(--cta)}
.btn-rand:hover{color:#fff;box-shadow:inset 0 0 0 2px var(--cta-hover),0 8px 22px rgba(3,40,103,.22)}

/* De hoofdfoto ligt op een tweede vel dat iets scheef onder de foto uitsteekt:
   een foto die op papier is gelegd, niet in een kader gezet. Het vel steekt
   hoogstens 14 px uit, binnen de marge die het zweefsel aanhoudt. */
.w-foto{position:relative;margin:0;isolation:isolate}
.w-foto::before{
  content:"";position:absolute;inset:6px -2px -2px 6px;z-index:-1;border-radius:6px;
  background:var(--vlak-ander,var(--panel));border:1px solid var(--lijn);
  transform:translate(8px,8px) rotate(1.6deg);
  box-shadow:0 18px 40px rgba(27,37,64,.07);
}
.w-foto img{
  display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  border-radius:6px;border:1px solid var(--lijn);background:var(--panel);
}

/* geen hoofdfoto: een leeg vel met het vliegtuigje en zijn spoor */
/* het vel zit in een eigen laag: het scheve tweede vel eronder mag niet door
   de achtergrond heen tekenen */
.w-plek-vel{
  position:relative;aspect-ratio:4/3;border-radius:6px;border:1px solid var(--lijn);
  background:
    radial-gradient(ellipse 70% 60% at 30% 30%,rgba(254,186,2,.08),transparent 70%),
    var(--panel);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(22px,3.2vw,40px);overflow:hidden;
}
.w-plek-vel::after{
  content:"";position:absolute;inset:14px;border-radius:3px;pointer-events:none;
  border:1.5px dashed var(--lijn);
}
.w-plek-tekening{position:absolute;inset:0;width:100%;height:100%}
.w-plek-spoor{stroke:var(--perzik);stroke-width:4;stroke-linecap:round;stroke-dasharray:1 14}
/* de titel ligt op een eigen stukje papier: een titel van twee of drie regels
   groeit naar boven, en dan begint het spoor achter de titel in plaats van er
   dwars doorheen te lopen */
.w-plek-titel{
  position:relative;align-self:flex-start;font-family:var(--display);font-weight:700;color:var(--cta);
  font-size:clamp(26px,3vw,40px);line-height:1.05;max-width:12ch;text-wrap:balance;
  background:var(--panel);padding:.14em .3em .1em 0;margin:0 0 -.1em;border-radius:0 4px 0 0;
}

/* =========================================================
   2. WAT JE GAAT DOEN
   ========================================================= */
.w-doen-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
  gap:clamp(32px,5.4vw,88px);align-items:start;
}
.w-doen-enkel{grid-template-columns:minmax(0,1fr)}

.w-proza{font-size:18px;color:var(--text-secondary);text-wrap:pretty}
.w-proza > *{max-width:62ch}
.w-proza p + p,.w-proza ul + p,.w-proza ol + p,.w-proza blockquote + p{margin-top:1em}
.w-proza > p:first-child{font-size:20px;line-height:1.55;color:var(--text-primary)}
.w-proza h3{font-size:clamp(21px,1.9vw,25px);margin:1.5em 0 .45em;color:var(--cta)}
.w-proza h4{font-family:var(--display);font-weight:600;font-size:19px;margin:1.3em 0 .35em;color:var(--cta)}
.w-proza ul,.w-proza ol{margin:1em 0 0;padding-left:1.2em}
.w-proza li + li{margin-top:.35em}
.w-proza li::marker{color:var(--accent)}
.w-proza strong{color:var(--text-primary)}
.w-proza a{
  color:var(--cta);font-weight:700;text-decoration:underline;text-decoration-thickness:2px;
  text-underline-offset:4px;text-decoration-color:var(--lijn-sterk);
}
.w-proza a:hover{text-decoration-color:var(--cta)}
.w-proza blockquote{margin:1.2em 0 0;padding:4px 0 4px 20px;border-left:3px solid var(--geel);color:var(--text-primary)}

.w-onderdelen{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.2vw,16px);
}
/* een oneven laatste blokje gaat over de volle breedte: nooit een gat */
.w-onderdeel:last-child:nth-child(odd){grid-column:1/-1}
.w-doen-enkel .w-onderdelen{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.w-doen-enkel .w-onderdeel:last-child:nth-child(odd){grid-column:auto}
.w-onderdeel{
  position:relative;background:var(--vlak-ander,var(--canvas));
  border:1px solid var(--lijn);border-radius:6px;
  padding:clamp(18px,1.8vw,24px) clamp(18px,1.8vw,24px) clamp(20px,2vw,26px);
}
/* een klein geel lipje bovenaan, zoals een tab op een kaartenbak */
.w-onderdeel::before{
  content:"";position:absolute;top:-1px;left:clamp(18px,1.8vw,24px);width:28px;height:3px;
  border-radius:0 0 2px 2px;background:var(--geel);
}
.w-onderdeel h3{font-size:19px;line-height:1.2;margin-bottom:6px}
.w-onderdeel p{font-size:15.5px;line-height:1.55;color:var(--text-secondary)}

/* de blokjes komen na elkaar binnen, na de sectie zelf */
.w-doen-grid.op .w-onderdeel{
  opacity:0;transform:translateY(12px);
  transition:opacity .5s var(--ease) calc(.12s + var(--i,0)*.06s),transform .5s var(--ease) calc(.12s + var(--i,0)*.06s);
}
.w-doen-grid.in .w-onderdeel{opacity:1;transform:none}

/* =========================================================
   3. ZO VERLOOPT HET
   Genummerde stappen aan het spoor van het papieren vliegtuigje: een
   stippellijn van nummer naar nummer die zich bij binnenkomst tekent, en
   achter de laatste stap vliegt het vliegtuigje verder.
   ========================================================= */
.workshop .w-stappen{
  --gat:clamp(22px,2.8vw,40px);--nr:52px;
  list-style:none;margin:0 auto;padding:0;max-width:760px;
  display:grid;gap:0;
}
.w-stap{
  position:relative;display:grid;grid-template-columns:var(--nr) minmax(0,1fr);
  column-gap:clamp(18px,2.4vw,28px);padding-bottom:clamp(26px,3vw,36px);
}
.w-stap:last-child{padding-bottom:0}
.w-stap-nr{
  position:relative;z-index:1;grid-row:1 / span 2;
  display:grid;place-items:center;width:var(--nr);height:var(--nr);border-radius:50%;
  background:var(--vlak,var(--canvas));border:2px solid var(--cta);
  font-family:var(--display);font-weight:700;font-size:21px;line-height:1;color:var(--cta);
}
.w-stap h3{font-size:21px;line-height:1.2;margin:12px 0 8px;max-width:24ch}
.w-stap p{color:var(--text-secondary);max-width:52ch}

/* het spoor: een rij ronde stippen, per stap naar de volgende */
.w-stap:not(:last-child)::before{
  content:"";position:absolute;pointer-events:none;
  background-image:radial-gradient(circle,var(--perzik) 2.1px,transparent 2.6px);
  /* onder elkaar: een staande lijn vanaf het nummer tot het volgende */
  left:calc(var(--nr)/2 - 3px);top:calc(var(--nr) + 8px);bottom:8px;width:6px;
  background-size:6px 12px;background-repeat:repeat-y;
  transform-origin:50% 0;
}
.w-stap-vlieg{display:none}

@media (min-width:1024px){
  .workshop .w-stappen-rij{
    max-width:1180px;grid-template-columns:repeat(var(--n),minmax(0,1fr));column-gap:var(--gat);
  }
  /* twee stappen over de hele breedte lezen als een gat; houd ze bij elkaar */
  .workshop .w-stappen-twee{max-width:820px}
  .w-stappen-rij .w-stap{display:block;padding-bottom:0}
  .w-stappen-rij .w-stap-nr{margin-bottom:22px}
  .w-stappen-rij .w-stap h3{margin-top:0;max-width:18ch}
  /* naast elkaar: een liggende lijn naar het volgende nummer; achter de
     laatste een kort stuk naar het vliegtuigje */
  .w-stappen-rij .w-stap::before{
    content:"";position:absolute;pointer-events:none;
    background-image:radial-gradient(circle,var(--perzik) 2.1px,transparent 2.6px);
    left:calc(var(--nr) + 10px);right:calc(-1 * var(--gat) + 10px);
    top:calc(var(--nr)/2 - 3px);bottom:auto;width:auto;height:6px;
    background-size:12px 6px;background-repeat:repeat-x;background-position:0 0;
    transform-origin:0 50%;
  }
  .w-stappen-rij .w-stap:last-child::before{right:auto;width:36px}
  /* een klasse meer dan de staande regel verderop (scaleY), anders wint die en
     groeit de lijn in de hoogte in plaats van zich te tekenen */
  .workshop .w-stappen-rij.op .w-stap::before{transform:scaleX(0)}
  .workshop .w-stappen-rij.in .w-stap::before{transform:none}
  /* het vliegtuigje vliegt achter de laatste stap het beeld uit */
  .w-stappen-rij .w-stap-vlieg{
    display:block;position:absolute;left:calc(var(--nr) + 52px);top:6px;width:46px;height:auto;
  }
}

/* binnenkomst: eerst de nummers, dan tekent het spoor zich, dan vliegt het vliegtuigje */
.w-stappen.op .w-stap{
  opacity:0;transform:translateY(12px);
  transition:opacity .5s var(--ease) calc(var(--i,0)*.11s),transform .5s var(--ease) calc(var(--i,0)*.11s);
}
.w-stappen.op .w-stap::before{
  transform:scaleY(0);
  transition:transform .7s var(--ease-zacht) calc(.25s + var(--i,0)*.11s);
}
.w-stappen.op .w-stap-vlieg{
  opacity:0;transform:translate(-14px,10px) rotate(-8deg);
  transition:opacity .6s var(--ease) calc(.4s + var(--n,3)*.11s),transform .9s var(--ease) calc(.4s + var(--n,3)*.11s);
}
.w-stappen.in .w-stap{opacity:1;transform:none}
.w-stappen.in .w-stap::before{transform:none}
.w-stappen.in .w-stap-vlieg{opacity:1;transform:none}

/* =========================================================
   4. VOOR WIE: de opbouw en stijl van de homepage
   ========================================================= */
.w-voorwie .voorwie-kop{position:sticky;top:112px}

/* =========================================================
   5. FOTO'S
   ========================================================= */
.w-galerij{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(12px,1.5vw,20px);
}
.w-foto-derde{grid-column:span 2}
.w-foto-half{grid-column:span 3}
.w-foto-heel{grid-column:1/-1}
/* een losse foto staat links op de kolom, gelijk met de sectiekop (de kolom is
   1180 px gecentreerd), en blijft kleiner dan het scherm hoog is */
.workshop .w-galerij-een{max-width:760px;margin-left:max(0px,calc((100% - 1180px) / 2))}

.w-galerij-link{
  position:relative;display:block;overflow:hidden;cursor:zoom-in;
  border-radius:6px;border:1px solid var(--lijn);background:var(--vlak-ander,var(--panel));
  transition:border-color .35s var(--ease),box-shadow .35s var(--ease);
}
.w-galerij-link img{
  display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  transition:transform .8s var(--ease);
}
.w-galerij-link:hover{border-color:var(--text-secondary);box-shadow:0 14px 32px rgba(27,37,64,.09)}
.w-galerij-link:hover img{transform:scale(1.035)}
/* een vergrootglas-hoekje dat bij hover en focus opkomt */
.w-galerij-link::after{
  content:"";position:absolute;right:12px;bottom:12px;width:36px;height:36px;border-radius:50%;
  background:var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 3v7M3 6.5h7' stroke='%23032867' stroke-width='1.8' stroke-linecap='round'/%3E%3Cpath d='m10 10 3.2 3.2' stroke='%23032867' stroke-width='1.8' stroke-linecap='round'/%3E%3Ccircle cx='6.5' cy='6.5' r='5' fill='none' stroke='%23032867' stroke-width='1.6'/%3E%3C/svg%3E") center/18px no-repeat;
  box-shadow:0 4px 12px rgba(27,37,64,.14);
  opacity:0;transform:translateY(6px);
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.w-galerij-link:hover::after,.w-galerij-link:focus-visible::after{opacity:1;transform:none}

.w-galerij.op .w-galerij-item{
  opacity:0;transform:translateY(14px);
  transition:opacity .55s var(--ease) calc(.1s + var(--i,0)*.07s),transform .55s var(--ease) calc(.1s + var(--i,0)*.07s);
}
.w-galerij.in .w-galerij-item{opacity:1;transform:none}

/* ---------- de lichtbak ---------- */
html.lichtbak-open{overflow:hidden}
.lichtbak{
  width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;
  background:transparent;color:var(--text-primary);overflow:hidden;
}
.lichtbak::backdrop{background:rgba(17,24,43,.86);backdrop-filter:blur(6px)}
.lichtbak[open]{animation:lichtbak-in .35s var(--ease)}
.lichtbak[open]::backdrop{animation:lichtbak-vervaag .35s var(--ease)}
@keyframes lichtbak-in{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}
@keyframes lichtbak-vervaag{from{opacity:0}to{opacity:1}}

.lichtbak-vlak{
  position:relative;width:100%;height:100%;
  display:grid;place-items:center;padding:clamp(64px,8vh,88px) clamp(16px,7vw,112px);
}
/* zonder touch-action neemt de browser het veeggebaar over (pointercancel) en
   komt pointerup nooit; verticaal pannen en knijpen mag hij houden */
.lichtbak-figuur{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;max-width:100%;max-height:100%;touch-action:pan-y pinch-zoom}
.lichtbak-beeld{
  display:block;max-width:min(100%,1600px);max-height:calc(100dvh - 2*clamp(64px,8vh,88px) - 44px);
  width:auto;height:auto;border-radius:6px;background:var(--panel);
  box-shadow:0 24px 60px rgba(0,0,0,.35);
  transition:opacity .25s var(--ease);
}
.lichtbak-beeld.laadt{opacity:0}
.lichtbak-onder{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:4px 16px;color:var(--panel);text-align:center}
.lichtbak-teller{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--perzik)}
.lichtbak-bijschrift{font-size:16px;max-width:60ch}

.lichtbak-knop{
  position:absolute;display:grid;place-items:center;width:52px;height:52px;padding:0;
  border:0;border-radius:50%;cursor:pointer;
  background:var(--panel);color:var(--cta);box-shadow:0 6px 18px rgba(0,0,0,.25);
  transition:background .25s var(--ease),transform .25s var(--ease);
}
.lichtbak-knop svg{width:18px;height:18px}
.lichtbak-knop:hover{background:#fff;transform:scale(1.06)}
.lichtbak-knop:focus-visible{outline:3px solid var(--geel);outline-offset:3px}
.lichtbak-vorige{left:clamp(10px,2.2vw,32px);top:50%;margin-top:-26px}
.lichtbak-volgende{right:clamp(10px,2.2vw,32px);top:50%;margin-top:-26px}
.lichtbak-sluit{right:clamp(10px,2.2vw,32px);top:clamp(10px,2.2vw,32px)}
/* telefoon: bladeren onderaan, niet over de foto */
@media (max-width:560px){
  .lichtbak-vlak{padding:72px 12px 104px}
  .lichtbak-beeld{max-height:calc(100dvh - 72px - 104px - 44px)}
  .lichtbak-vorige,.lichtbak-volgende{top:auto;bottom:28px;margin-top:0}
  .lichtbak-vorige{left:calc(50% - 64px)}
  .lichtbak-volgende{right:calc(50% - 64px)}
}
.lichtbak-enkel .lichtbak-vorige,.lichtbak-enkel .lichtbak-volgende,.lichtbak-enkel .lichtbak-teller{display:none}

/* =========================================================
   6. PRAKTISCH
   De feiten staan op een los vel links, de kop staat er rechts naast.
   Naam en waarde delen per regel een basislijn.
   ========================================================= */
.w-praktisch-grid{
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(250px,.65fr);
  gap:clamp(32px,5.4vw,88px);align-items:start;
}
.w-praktisch-kop{grid-column:2;grid-row:1;position:sticky;top:112px}
.w-praktisch-kop h2{font-size:clamp(30px,3.6vw,48px);margin-bottom:16px}
.w-praktisch-kop p:not(.label){color:var(--text-secondary);max-width:32ch;margin-bottom:8px}
.w-feiten{
  grid-column:1;grid-row:1;margin:0;
  background:var(--vlak-ander,var(--panel));border:1px solid var(--lijn);border-radius:6px;
  padding:clamp(6px,1vw,12px) clamp(20px,3vw,40px);
}
.w-feit{
  display:grid;grid-template-columns:minmax(118px,.3fr) minmax(0,1fr);
  gap:4px clamp(16px,2.6vw,36px);align-items:baseline;
  padding:clamp(16px,1.8vw,22px) 0;border-bottom:1px dashed var(--lijn);
}
.w-feit:last-child{border-bottom:0}
.w-feit dt{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-secondary)}
.w-feit dd{margin:0;color:var(--text-primary);max-width:56ch}

/* =========================================================
   7 tot 10: agenda, vragen, formulier en tegels zijn die van de homepage
   ========================================================= */
.w-vragen .vragen{max-width:880px}

/* Ander aanbod heeft meestal drie tegels. Op tabletbreedte past het raster er
   twee naast elkaar, en dan stond de derde alleen met een leeg vak ernaast.
   Daar dus vast twee kolommen, en een oneven laatste tegel over de hele breedte
   met beeld en tekst naast elkaar. Daarboven passen er drie (auto-fit). */
@media (min-width:560px) and (max-width:899px){
  .w-ander .kaarten{grid-template-columns:repeat(2,minmax(0,1fr))}
  .w-ander .kaart:last-child:nth-child(odd){grid-column:1/-1;flex-direction:row}
  .w-ander .kaart:last-child:nth-child(odd) .kaart-beeld{
    width:calc(50% - 9px);flex:none;align-self:stretch;aspect-ratio:auto;min-height:100%;
    border-bottom:0;border-right:1px solid var(--lijn);
  }
}

/* =========================================================
   SMALLERE SCHERMEN
   ========================================================= */
@media (max-width:1100px){
  .w-kop-grid{grid-template-columns:minmax(0,1fr) minmax(0,.9fr)}
}

@media (max-width:860px){
  /* hier wordt de agenda een los vel (stijl.css); op een panel-sectie neemt
     dat vel het andere vlak, net als kaarten en het formulier */
  .workshop .w-panel .agenda-lijst{background:var(--canvas)}
  .w-doen-grid,.w-praktisch-grid{grid-template-columns:minmax(0,1fr)}
  /* tablet: foto en tekst blijven naast elkaar, anders vult de foto het hele scherm */
  .w-kop-grid{grid-template-columns:minmax(0,1fr) minmax(0,.86fr);gap:32px}
  .w-kop h1{max-width:none}
  .w-praktisch-kop,.w-voorwie .voorwie-kop{position:static}
  .w-praktisch-kop{grid-column:1;grid-row:auto}
  .w-feiten{grid-column:1;grid-row:auto}
  .w-praktisch-kop p:not(.label){max-width:48ch}

  .w-galerij{grid-template-columns:repeat(2,minmax(0,1fr))}
  .w-foto-derde,.w-foto-half{grid-column:span 1}
  .w-galerij-item:last-child:nth-child(odd){grid-column:1/-1}
  .w-galerij-link::after{opacity:1;transform:none;width:32px;height:32px;right:8px;bottom:8px;background-size:16px}
}

@media (max-width:720px){
  /* telefoon: eerst de foto, dan de tekst */
  .w-kop-grid{grid-template-columns:minmax(0,1fr);gap:clamp(28px,6vw,40px)}
  .w-kop-grid .w-foto{order:-1;margin-right:12px}
  .w-kop h1{max-width:16ch}
}

@media (max-width:560px){
  .w-onderdelen{grid-template-columns:minmax(0,1fr)}
  .w-onderdeel:last-child:nth-child(odd){grid-column:auto}
  .w-feit{grid-template-columns:minmax(0,1fr);gap:2px}
  .w-acties .btn{flex:1 1 100%}
  .w-proza{font-size:17px}
  .w-proza > p:first-child{font-size:18.5px}
}

@media (pointer:coarse){
  .kruimel a{display:inline-flex;align-items:center;min-height:44px}
  .kruimel{margin-bottom:clamp(14px,3vw,40px);margin-top:-8px}
}

/* =========================================================
   BEPERKTE BEWEGING: alles meteen in de eindstand
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  /* zelfde specificiteit als de binnenkomst, en later: dus deze wint */
  .w-doen-grid.op .w-onderdeel,
  .w-stappen.op .w-stap,
  .w-stappen.op .w-stap::before,
  .workshop .w-stappen-rij.op .w-stap::before,
  .w-stappen.op .w-stap-vlieg,
  .w-galerij.op .w-galerij-item{opacity:1;transform:none}
  .lichtbak[open],.lichtbak[open]::backdrop{animation:none}
  .w-galerij-link:hover img,.lichtbak-knop:hover{transform:none}
}