/* ==========================================================================
   Landingspagina 72uurblackout.nl: de secties (hero, gevel, speelkaarten, campagne, waaier,
   hoe het werkt, bestellen met Gravity Forms, vragen). Afgeleid van ontwerp/landingsblad-r2.html
   op 30-09-2026 met bouw-wp.py; wijzig het blad en draai het script opnieuw.
   Geladen op de template "Ontworpen pagina" (functions.php). De basis staat in style.css.
   ========================================================================== */
/* ---- hero ---- */
.hero{padding:4rem 0 9rem;position:relative;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:minmax(0,6.5fr) minmax(0,5.5fr);gap:3rem;align-items:center}
.hero h1{margin-bottom:1.375rem}
.hero h1 .slot{display:block}
.hero .sub{font-size:clamp(1.0625rem,1.35vw,1.25rem);font-weight:700;line-height:1.35;margin:0 0 1.125rem;max-width:30em}
.hero-beeld{position:relative;min-height:23.75rem;display:flex;align-items:center;justify-content:center}
.hero-beeld .doos{position:relative;z-index:2;width:100%;max-width:38.75rem}
.hero-beeld .los{position:absolute;z-index:1;--u:0.1938rem;transform:rotate(var(--rot));box-shadow:0 0.875rem 2.125rem rgba(0,0,0,.35)}
/* de losse kaarten liggen achter de doos en steken aan de randen uit (keuze 29-09: doos + kaarten) */
.hero-beeld .los.a{left:-10%;bottom:4%;--rot:-12deg}
.hero-beeld .los.b{right:-7%;top:-14%;--rot:9deg}
.hero-beeld .los.c{right:-3%;bottom:-8%;--rot:-5deg}

/* ---- gevel: de gevelrij van de doos, met een fade vanuit de hero ---- */
.gevel{position:relative;background:var(--lucht);height:clamp(15rem,43vw,38.75rem);overflow:hidden}
.gevel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center bottom;display:block}
/* de fade: de grond van de hero zakt over de nachtlucht weg; de daken beginnen op 42% (1440) en 56% (390) en blijven vrij */
.gevel::before{content:"";position:absolute;left:0;right:0;top:0;height:var(--fade);z-index:1;
  background:linear-gradient(to bottom,rgb(var(--fv)) 0%,rgba(var(--fv),.92) 14%,rgba(var(--fv),.74) 32%,rgba(var(--fv),.48) 52%,rgba(var(--fv),.22) 74%,rgba(var(--fv),.06) 90%,rgba(var(--fv),0) 100%)}

/* ---- speelkaart, webversie van kaartenblad.html ---- */
.spk{position:relative;flex:none;width:calc(66*var(--u));height:calc(100*var(--u));border-radius:calc(3.5*var(--u));background:#fff;overflow:hidden;color:var(--inkt);font-weight:430;font-stretch:100%;text-align:left;box-shadow:0 1px 0 rgba(0,0,0,.06),0 0.625rem 1.75rem rgba(0,0,0,.16);line-height:1.2}
.spk .net{position:absolute;inset:calc(4*var(--u));border-radius:calc(1.5*var(--u));overflow:hidden;background:var(--papier);color:var(--inkt);border:calc(.4*var(--u)) solid var(--inkt);display:flex;flex-direction:column;--tekst2:#4A4F55;--lijn:rgba(22,24,26,.4)}
.spk .band{flex:none;display:flex;justify-content:space-between;align-items:center;gap:calc(1.5*var(--u));height:calc(9.5*var(--u));padding:0 calc(2.5*var(--u));background:var(--fase,var(--inkt));color:var(--op,var(--wit))}
.spk .body{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:calc(1.6*var(--u));padding:calc(1.8*var(--u)) calc(2.5*var(--u)) calc(2.5*var(--u));overflow:hidden}
.spk .index{display:flex;align-items:center;gap:calc(1.6*var(--u));min-width:0}
.spk svg.soort{width:calc(5.2*var(--u));height:calc(5.2*var(--u));stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;display:block;flex:none}
.spk .thema{font-size:calc(2.82*var(--u));line-height:1;font-weight:700;letter-spacing:.07em;text-transform:uppercase;font-stretch:88%;white-space:nowrap}
.spk .rechts{display:flex;align-items:center;gap:calc(1.8*var(--u));flex:none}
.spk .sterren{display:flex;gap:calc(.6*var(--u))}
.spk .sterren svg{width:calc(3.8*var(--u));height:calc(3.8*var(--u));stroke:currentColor;fill:none;stroke-width:1.4;stroke-linejoin:round;display:block}
.spk .klok{display:inline-flex;align-items:center;gap:calc(.7*var(--u));font-size:calc(2.82*var(--u));font-weight:700;line-height:1;white-space:nowrap}
.spk .klok svg{width:calc(3.4*var(--u));height:calc(3.4*var(--u));stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;display:block}
.spk .vraag{margin:0;font-size:calc(3.53*var(--u));line-height:1.2;font-weight:640;letter-spacing:-.005em}
.spk .opties{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:calc(1.1*var(--u));font-size:calc(3*var(--u));line-height:1.2}
.spk .opties li{display:flex;gap:calc(1.4*var(--u));align-items:flex-start}
.spk .let{flex:none;width:calc(4*var(--u));height:calc(4*var(--u));border-radius:50%;border:calc(.28*var(--u)) solid currentColor;display:flex;align-items:center;justify-content:center;font-size:calc(2.82*var(--u));font-weight:750;line-height:1;margin-top:calc(-.15*var(--u))}
.spk .score{flex:none;width:calc(7.2*var(--u));display:flex;gap:calc(.4*var(--u));align-items:center;height:calc(3.6*var(--u))}
.spk .score svg{width:calc(3*var(--u));height:calc(3*var(--u));fill:currentColor;stroke:currentColor;stroke-width:1.2;stroke-linejoin:round;display:block}
.spk .score .nul{width:calc(2.4*var(--u));height:calc(.3*var(--u));background:currentColor;opacity:.6}
.spk .voet{margin-top:auto;display:flex;justify-content:space-between;align-items:flex-end;gap:calc(2*var(--u));font-size:calc(2.82*var(--u));line-height:1;color:var(--tekst2)}
.spk .voet .nr{font-weight:600;letter-spacing:.02em;white-space:nowrap}
/* achterkant */
.spk.rug .band{height:calc(6.5*var(--u))}
.spk .kopregel{display:flex;justify-content:space-between;align-items:baseline;gap:calc(2*var(--u));width:100%;font-size:calc(2.82*var(--u));line-height:1;font-weight:700;letter-spacing:.02em;padding-top:.14em}
.spk .kopregel .thema{opacity:.85}
.spk.rug .body{font-size:calc(3*var(--u));line-height:1.32}
.spk .antwoord{display:flex;gap:calc(1.2*var(--u));align-items:flex-start;font-weight:700;line-height:1.2}
.spk .antwoord .vink{flex:none;width:calc(4*var(--u));height:calc(4*var(--u));border-radius:50%;background:var(--fase);color:var(--op);display:flex;align-items:center;justify-content:center;font-size:calc(2.82*var(--u));font-weight:750;line-height:1;margin-top:calc(-.1*var(--u))}
.spk .uitleg p{margin:0 0 calc(.9*var(--u))}
.spk .kopje{display:flex;align-items:center;gap:calc(1.5*var(--u));font-size:calc(2.82*var(--u));font-weight:750;letter-spacing:.07em;text-transform:uppercase;font-stretch:88%;line-height:1;margin-bottom:calc(1*var(--u))}
.spk .kopje::after{content:"";flex:1;height:calc(.3*var(--u));background:currentColor}
.spk .bullets{list-style:none;margin:0;padding:0}
.spk .bullets li{display:flex;gap:calc(1.2*var(--u));margin-bottom:calc(.6*var(--u))}
.spk .bullets li::before{content:"";flex:none;width:calc(1.6*var(--u));height:calc(1.6*var(--u));margin-top:calc(1.2*var(--u));background:currentColor;clip-path:polygon(0 0,55% 0,100% 50%,55% 100%,0 100%,45% 50%)}
/* inhoudskaart (alleen nog bij "hoe het werkt"): dezelfde schil, grotere letter */
.spk.inhoud .band{font-size:0.8125rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.spk.inhoud .band .nr{font-size:calc(5.6*var(--u));font-weight:800;letter-spacing:-.02em;line-height:1}
.spk.inhoud .body{padding:calc(3.2*var(--u)) calc(3*var(--u)) calc(3*var(--u));gap:0.75rem;font-size:0.9375rem;line-height:1.45}
.spk.inhoud h3{font-size:clamp(1.25rem,calc(5.6*var(--u)),1.625rem);line-height:1.12}
.spk.inhoud p{margin:0;color:var(--tekst2)}
/* draaien */
.flip{position:relative;flex:none;width:calc(66*var(--u));height:calc(100*var(--u));perspective:87.5rem;cursor:pointer}
.flip .k3{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.flip.om .k3{transform:rotateY(180deg)}
.flip .spk{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.flip .spk.rug{transform:rotateY(180deg)}
.flip .draai{position:absolute;left:0;right:0;bottom:-1.625rem;text-align:center;font-size:0.75rem;font-weight:600;letter-spacing:.04em;color:var(--dof)}

/* ---- campagnesectie: de cyclus. Kop + lead links, links uitgelijnd; schema als rij (compositie B, keuze 30-09) ---- */
.camp .vak{border:1px solid currentColor;border-radius:0.5rem;padding:1rem 1.125rem;display:flex;flex-direction:column;gap:0.375rem;background:var(--licht)}
.camp .vak .n{font-size:0.7812rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--dof)}
.camp .vak b{font-size:1.125rem;line-height:1.15;letter-spacing:-.01em}
.camp .vak small{font-size:0.8125rem;color:var(--dof);line-height:1.3}
.camp .vak small::before{content:"";display:inline-block;width:0.5rem;height:0.5rem;border-radius:2px;background:var(--geel);margin-right:0.5rem;vertical-align:0}
.camp .balk{background:var(--geel);color:var(--inkt);border-radius:0.5rem;padding:1rem 1.125rem;display:flex;flex-direction:column;gap:0.5rem;position:relative}
.camp .balk .n{font-size:0.7812rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(22,24,26,.7)}
.camp .balk b{font-size:1.125rem;line-height:1.15;letter-spacing:-.01em}
.camp .labels{display:flex;flex-wrap:wrap;gap:0.5rem;margin-top:0.25rem}
.camp .labels i{font-style:normal;font-size:0.7188rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border:1.5px solid rgba(22,24,26,.55);border-radius:0.25rem;padding:0.25rem 0.5rem;line-height:1}
.camp .bron{margin-top:1.75rem}
/* rij: drie stappen naast elkaar, het gele vak onder alle drie, een retourpijl van het einde terug naar stap 1.
   Grid met een lege eerste rij (--pijlruimte) waarin de bovenlijn van de pijl loopt. De pijl is vast, zonder script:
   .retour spant de pijlruimte en de stappenrij (bovenlijn, korte poot met pijlpunt, lange poot rechts omlaag);
   .balk::after maakt het laatste stuk: uit het midden van het gele vak naar buiten en omhoog, tot aan de lange poot. */
.camp .schema-rij{--kol:3;--gap:0.75rem;--pijlruimte:2rem;--uit:1.625rem;--r:0.875rem;--bm:0.5rem;
  position:relative;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:var(--pijlruimte) auto auto;gap:var(--gap);margin-top:3.5rem;padding:0 2.5rem 0 0}
.camp .schema-rij .stap{grid-row:2}
.camp .schema-rij .s1{grid-column:1}.camp .schema-rij .s2{grid-column:2}.camp .schema-rij .s3{grid-column:3}   /* expliciet, want .retour ligt over dezelfde rij */
.camp .schema-rij .balk{grid-row:3;grid-column:1 / 4;margin-top:var(--bm);flex-direction:row;align-items:center;gap:0.75rem 1.75rem;flex-wrap:wrap;padding:1.125rem 1.375rem}
.camp .schema-rij .balk .n{flex:none}
.camp .schema-rij .balk b{flex:1 1 20em}
.camp .schema-rij .balk .labels{margin:0;flex:none}
.camp .schema-rij .balk .pijltjes{position:absolute;left:0;right:0;top:-1.125rem;height:1.125rem;display:grid;grid-template-columns:repeat(3,1fr);gap:0.75rem;pointer-events:none}
.camp .schema-rij .balk .pijltjes i{position:relative}
.camp .schema-rij .balk .pijltjes i::before{content:"";position:absolute;left:1.5rem;top:0;border:0.5625rem solid transparent;border-bottom:0.75rem solid var(--geel)}
/* het laatste stuk van de retourpijl: uit het gele vak naar rechts, dan omhoog tot de onderkant van de stappenrij */
.camp .schema-rij .balk::after{content:"";box-sizing:border-box;position:absolute;left:100%;width:var(--uit);top:calc(-1 * (var(--gap) + var(--bm)));bottom:50%;
  border-right:2px solid var(--inkt);border-bottom:2px solid var(--inkt);border-radius:0 0 var(--r) 0;pointer-events:none}
.camp .schema-rij .retour{grid-row:1 / 3;grid-column:1 / 4;position:relative;pointer-events:none;--x1:calc((100% - 2 * var(--gap)) / 6)}  /* --x1: het midden van stap 1 */
.camp .schema-rij .retour .boog{position:absolute;top:0.625rem;left:var(--x1);right:calc(-1 * var(--uit));height:1.375rem;border:2px solid currentColor;border-bottom:0;border-radius:var(--r) var(--r) 0 0}
.camp .schema-rij .retour .poot{position:absolute;top:2rem;bottom:0;right:calc(-1 * var(--uit));width:var(--uit);border-right:2px solid currentColor}
.camp .schema-rij .retour .punt{position:absolute;top:2rem;left:calc(var(--x1) - 0.3125rem);width:0.75rem;height:0.5rem;fill:currentColor;display:block}
.camp .schema-rij .retour .tekst{position:absolute;top:1rem;left:calc(var(--x1) + 1rem);font-size:0.7812rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;line-height:1;color:var(--dof);white-space:nowrap}

/* ---- waaier met echte kaarten. Het citaat van Denk Vooruit opent de sectie, op de plek van de kop: groot corps, gele balk
   links, bron eronder (keuze 30-09). Daaronder de brugzin als lead, met op smal de pijlknoppen ernaast, boven de kaarten. ---- */
.waaier .citaat{margin:0;font-weight:700;line-height:1.1;letter-spacing:-.025em;font-size:clamp(1.75rem,3.4vw,3.125rem);max-width:19em;border-left:0.3125rem solid var(--geel);padding-left:1.75rem}
.waaier .citaat p{margin:0}
.waaier .cite{display:block;margin-top:1.375rem;padding-left:2.0625rem;font-size:0.9375rem;font-weight:600;color:var(--dof)}
.waaier .kopregel-s{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;margin:2.5rem 0}
.waaier .kopregel-s .lead{margin:0}
.waaier .intro{max-width:38em;margin:0.875rem 0 0;font-size:1rem;line-height:1.55;color:var(--dof)}
.waaier .pijlen{display:none;gap:0.625rem;flex:none}
.waaier .pijlen button{width:3rem;height:3rem;border-radius:50%;border:2px solid currentColor;background:transparent;color:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center}
.waaier .pijlen button svg{width:1.125rem;height:1.125rem;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover){.waaier .pijlen button:hover{background:var(--wit);border-color:var(--wit);color:var(--nacht)}}   /* alleen bij een muis: op een telefoon bleef de hover na een tik hangen, en currentColor op achtergrond én tekst maakte de knop onzichtbaar (03-10) */
.waaier{--u:0.2562rem}
.waaier .track{display:block;position:relative;height:calc(100*var(--u) + 6.875rem)}
.waaier .plek{position:absolute;left:50%;top:2.75rem;width:calc(66*var(--u));height:calc(100*var(--u));margin-left:calc(-33*var(--u));transform:translateX(var(--tx)) rotate(var(--rot));transform-origin:50% 150%;transition:transform .25s ease}
.waaier .plek:hover{z-index:20;transform:translateX(var(--tx)) rotate(var(--rot)) translateY(-1.625rem)}
.waaier .plek .flip{width:100%;height:100%}
.waaier .draai{display:none}
.waaier .onder-noot{font-size:0.875rem;color:var(--dof);max-width:40em;margin-top:1.75rem}
.waaier .teller{display:none;font-size:0.8125rem;font-weight:600;color:var(--dof);margin:0 0 0.75rem}

/* ---- hoe het werkt (kaartvorm) ---- */
.werkt .feiten{display:flex;flex-wrap:wrap;gap:0.5rem 1.625rem;margin:0 0 0.5rem;font-size:0.875rem;font-weight:600;color:var(--dof)}
.werkt .feiten span{display:inline-flex;align-items:center;gap:0.5rem}
.werkt .feiten i{width:0.5rem;height:0.5rem;border-radius:2px;background:var(--geel);display:inline-block}
/* de vier stappen als rij met pijltjes ertussen (30-09, variant A). Grid: kaart, pijlkolom, kaart, pijlkolom, kaart, pijlkolom, kaart;
   de kaartmaat volgt de breedte (--u), zodat de pijlkolommen ruimte houden. Pijltje: CSS-lijn plus een inline-SVG pijlpunt, geen script. */
.werkt .kaarten4{--u:clamp(0.1875rem,calc((100vw - 10.5rem) / 264),0.2375rem);--band:calc(9.15*var(--u));   /* --band: midden van de band (inzet 4u + rand .4u + halve band 4.75u) */
  display:grid;grid-template-columns:auto 1fr auto 1fr auto 1fr auto;align-items:start;margin:2.75rem 0 3rem}
.werkt .kaarten4 .spk{grid-row:1}
.werkt .kaarten4 .k1{grid-column:1}.werkt .kaarten4 .k2{grid-column:3}.werkt .kaarten4 .k3{grid-column:5}.werkt .kaarten4 .k4{grid-column:7}
/* pijltje tussen twee kaarten, op de hoogte van de band met het stapnummer: lijn plus pijlpunt */
.werkt .kaarten4 .pijl{grid-row:1;display:flex;align-items:center;justify-content:center;height:0.75rem;margin-top:calc(var(--band) - 0.375rem);pointer-events:none}
.werkt .kaarten4 .p1{grid-column:2}.werkt .kaarten4 .p2{grid-column:4}.werkt .kaarten4 .p3{grid-column:6}
.werkt .kaarten4 .pijl::before{content:"";width:1.375rem;height:2px;background:currentColor}
.werkt .kaarten4 .pijl .punt{width:0.5rem;height:0.75rem;fill:currentColor;display:block;margin-left:-1px}
/* tijdlijn: dunne balken zonder nummer (30-09; de nummers botsten met de stapnummers op de kaarten), tijden eronder;
   de bonus loopt uit in een punt, zoals de tl-lijn-variant op de binnenzijde */
.werkt .fases{display:grid;grid-template-columns:repeat(5,1fr);gap:0.5rem;max-width:47.5rem;margin:0 0 0.875rem}
.werkt .fase{min-width:0}
.werkt .fase .balk{height:0.75rem;border-radius:0.1875rem}
.werkt .fase:nth-child(1) .balk{background:var(--f1)}
.werkt .fase:nth-child(2) .balk{background:var(--f2)}
.werkt .fase:nth-child(3) .balk{background:var(--f3)}
.werkt .fase:nth-child(4) .balk{background:var(--f4)}
.werkt .fase:nth-child(5) .balk{background:var(--f5);border-radius:0.1875rem 0 0 0.1875rem;clip-path:polygon(0 0,calc(100% - 0.5rem) 0,100% 50%,calc(100% - 0.5rem) 100%,0 100%)}
.werkt .fase .tijd{font-size:0.875rem;font-weight:700;margin-top:0.625rem}
.werkt .fase .sub{font-size:0.8125rem;color:var(--dof)}
.werkt .klein{max-width:44em}
/* wat inwoners meenemen: de slotboodschap van het spel, aangehaald met de gele balk (zelfde teken als het citaat in de waaier) */
.werkt .meenemen{margin-top:2.75rem;max-width:36em;border-left:0.25rem solid var(--geel);padding-left:1.375rem}
.werkt .meenemen .n{display:block;font-size:0.7812rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--dof);margin-bottom:0.5rem}
.werkt .meenemen p{margin:0;font-size:clamp(1.125rem,1.4vw,1.3125rem);font-weight:600;line-height:1.35;letter-spacing:-.01em}

/* ---- bestellen: prijzen links, formulier rechts ---- */
.bestel .kolommen{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:3rem 4.5rem;align-items:start;margin-top:0.5rem}
.bestel .kolommen h2{font-size:clamp(2.125rem,3.4vw,3rem)}   /* kop in de linkerkolom, formulier begint op dezelfde hoogte (Remco 01-10) */
.bestel .prijzen{list-style:none;margin:2.25rem 0 0;padding:0}
.bestel .prijzen li{display:grid;grid-template-columns:1fr auto;gap:0.375rem 1.5rem;padding:1rem 0;border-top:1px solid var(--lijn);align-items:baseline;transition:padding .2s ease}
.bestel .prijzen li:last-child{border-bottom:1px solid var(--lijn)}
.bestel .prijzen b{font-size:1.0625rem;font-weight:700}
.bestel .prijzen small{grid-column:1 / 3;font-size:0.875rem;color:var(--dof)}
.bestel .prijzen .bedrag{font-size:1.375rem;font-weight:800;letter-spacing:-.02em;white-space:nowrap;text-align:right}
.bestel .prijzen .bedrag.woord{font-size:1rem;font-weight:700;letter-spacing:0;line-height:1.3;white-space:normal;max-width:12em}   /* een bedrag in woorden (op offerte) concurreert niet met de eurobedragen */
.bestel .prijzen li.nu{border-top-color:currentColor}
.bestel .prijzen li.nu b::before{content:"";display:inline-block;width:0.625rem;height:0.625rem;border-radius:2px;background:var(--geel);margin-right:0.625rem;vertical-align:1px}
.bestel .levertijd{margin-top:1.625rem;font-size:0.9375rem;font-weight:600;display:flex;gap:0.75rem;align-items:flex-start;max-width:30em}
.bestel .levertijd i{flex:none;width:0.625rem;height:0.625rem;border-radius:50%;background:var(--geel);margin-top:0.4375rem}
.bestel .voorwaarden{margin-top:0.875rem;font-size:0.875rem;color:var(--dof);max-width:30em}
.bestel .form{border:1px solid var(--lijn);border-radius:0.75rem;padding:2rem;background:rgba(240,238,232,.03)}

/* ---- Gravity Forms in de bestelsectie (formulier met cssClass "bestelformulier"; GF zet daar "_wrapper" achter op de omhulling).
   Volle GF-selectors voor beide markups (gravity-theme met divs en de legacy markup met ul/li), met de eigen wrapperklasse ervoor:
   zo wint deze stijl op specificiteit van de standaard-GF-CSS, zonder !important. Vaste stand: het formulier staat op nacht. ---- */
.bestel .bestelformulier_wrapper.gform_wrapper{margin:0;max-width:none}
.bestel .bestelformulier_wrapper.gform_wrapper .gform_heading,
.bestel .bestelformulier_wrapper.gform_wrapper .gform_required_legend{display:none}
.bestel .bestelformulier_wrapper.gform_wrapper .gform_validation_container{position:absolute;left:-9999px;display:none}
/* velden: één kolom; verborgen velden (voorwaardelijke logica) nemen geen ruimte in het grid */
.bestelformulier_wrapper.gform_wrapper.gravity-theme .gform_fields,
.bestelformulier_wrapper.gform_legacy_markup_wrapper .gform_fields{display:grid;grid-template-columns:1fr;gap:1.25rem 0;margin:0;padding:0;list-style:none}
.bestelformulier_wrapper.gform_wrapper.gravity-theme .gform_fields .gfield,
.bestelformulier_wrapper.gform_legacy_markup_wrapper .gform_fields .gfield{grid-column:1 / -1;margin:0;padding:0;border:0;min-width:0;background:transparent;list-style:none}
.bestelformulier_wrapper.gform_wrapper.gravity-theme .gform_fields .gfield.gfield_visibility_hidden{display:none}
/* labels */
.bestelformulier_wrapper.gform_wrapper.gravity-theme .gform_fields .gfield .gfield_label,
.bestelformulier_wrapper.gform_legacy_markup_wrapper .gform_fields .gfield .gfield_label{display:block;float:none;width:auto;font-size:0.875rem;font-weight:700;line-height:1.3;color:inherit;margin:0 0 0.5rem;padding:0}
.bestelformulier_wrapper.gform_wrapper.gravity-theme .gform_fields .gfield .gfield_required,
.bestelformulier_wrapper.gform_legacy_markup_wrapper .gform_fields .gfield .gfield_required{color:var(--geel);margin-left:0.1875rem;font-weight:700}
/* het eerste veld (de drie keuzes) draagt de kop van het formulier */
.bestelformulier_wrapper.gform_wrapper.gravity-theme .gform_fields > #field_1_1 .gfield_label,
.bestelformulier_wrapper.gform_legacy_markup_wrapper .gform_fields > #field_1_1 .gfield_label{font-size:0.875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dof);margin-bottom:0.875rem}
.bestelformulier_wrapper.gform_wrapper.gravity-theme .gform_fields > #field_1_1 .gfield_required,
.bestelformulier_wrapper.gform_legacy_markup_wrapper .gform_fields > #field_1_1 .gfield_required{display:none}
/* invoervelden */
.bestelformulier_wrapper.gform_wrapper.gravity-theme .gform_fields .gfield input[type=text],
.bestelformulier_wrapper.gform_wrapper.gravity-theme .gform_fields .gfield input[type=email],
.bestelformulier_wrapper.gform_wrapper.gravity-theme .gform_fields .gfield input[type=number],
.bestelformulier_wrapper.gform_wrapper.gravity-theme .gform_fields .gfield input[type=tel],
.bestelformulier_wrapper.gform_wrapper.gravity-theme .gform_fields .gfield input[type=url],
.bestelformulier_wrapper.gform_wrapper.gravity-theme .gform_fields .gfield textarea,
.bestelformulier_wrapper.gform_wrapper.gravity-theme .gform_fields .gfield select,
.bestelformulier_wrapper.gform_legacy_markup_wrapper .gform_fields .gfield input[type=text],
.bestelformulier_wrapper.gform_legacy_markup_wrapper .gform_fields .gfield input[type=email],
.bestelformulier_wrapper.gform_legacy_markup_wrapper .gform_fields .gfield input[type=number],
.bestelformulier_wrapper.gform_legacy_markup_wrapper .gform_fields .gfield textarea,
.bestelformulier_wrapper.gform_legacy_markup_wrapper .gform_fields .gfield select{width:100%;min-height:0;height:auto;padding:0.8125rem 0.875rem;border:1px solid currentColor;border-radius:0.5rem;background:transparent;color:inherit;font:inherit;font-size:1.0625rem;line-height:1.3;margin:0;box-shadow:none}
.bestelformulier_wrapper.gform_wrapper.gravity-theme .gform_fields .gfield input:focus,
.bestelformulier_wrapper.gform_wrapper.gravity-theme .gform_fields .gfield textarea:focus,
.bestelformulier_wrapper.gform_legacy_markup_wrapper .gform_fields .gfield input:focus,
.bestelformulier_wrapper.gform_legacy_markup_wrapper .gform_fields .gfield textarea:focus{outline:2px solid var(--geel);outline-offset:2px;border-color:var(--geel)}
.bestelformulier_wrapper.gform_wrapper .gform_fields .gfield ::placeholder{color:var(--dof);opacity:1}
.bestelformulier_wrapper.gform_wrapper.gravity-theme .gform_fields .gfield textarea,
.bestelformulier_wrapper.gform_legacy_markup_wrapper .gform_fields .gfield textarea{height:7.5rem;min-height:6rem;resize:vertical}
/* bestand kiezen (logo) */
.bestelformulier_wrapper.gform_wrapper.gravity-theme .gform_fields .gfield input[type=file],
.bestelformulier_wrapper.gform_legacy_markup_wrapper .gform_fields .gfield input[type=file]{width:100%;padding:0.625rem 0.875rem;border:1px dashed currentColor;border-radius:0.5rem;background:transparent;color:var(--dof);font:inherit;font-size:0.9375rem;line-height:1.3;margin:0}
.bestelformulier_wrapper.gform_wrapper .gform_fields .gfield input[type=file]::file-selector-button{font:inherit;font-weight:700;font-size:0.875rem;line-height:1;color:var(--inkt);background:var(--wit);border:0;border-radius:0.375rem;padding:0.5rem 0.75rem;margin-right:0.75rem;cursor:pointer}
.bestelformulier_wrapper.gform_wrapper.gravity-theme .gform_fields .gfield .gform_fileupload_rules,
.bestelformulier_wrapper.gform_legacy_markup_wrapper .gform_fields .gfield .gform_fileupload_rules{display:block;font-size:0.8125rem;color:var(--dof);margin:0.375rem 0 0;padding:0;line-height:1.4}
/* keuzes: radio en checkbox */
.bestelformulier_wrapper.gform_wrapper.gravity-theme .gform_fields .gfield .gfield_radio,
.bestelformulier_wrapper.gform_wrapper.gravity-theme .gform_fields .gfield .gfield_checkbox,
.bestelformulier_wrapper.gform_legacy_markup_wrapper .gform_fields .gfield .gfield_radio,
.bestelformulier_wrapper.gform_legacy_markup_wrapper .gform_fields .gfield .gfield_checkbox{display:flex;flex-wrap:wrap;gap:0.625rem 1.375rem;margin:0;padding:0;list-style:none}
.bestelformulier_wrapper.gform_wrapper.gravity-theme .gform_fields .gfield .gfield_checkbox{flex-direction:column;gap:0.625rem}
.bestelformulier_wrapper.gform_wrapper.gravity-theme .gform_fields .gfield .gchoice,
.bestelformulier_wrapper.gform_legacy_markup_wrapper .gform_fields .gfield .gchoice{display:flex;gap:0.75rem;align-items:flex-start;margin:0;padding:0;position:relative;list-style:none}
.bestelformulier_wrapper.gform_wrapper.gravity-theme .gform_fields .gfield .gchoice input[type=radio],
.bestelformulier_wrapper.gform_wrapper.gravity-theme .gform_fields .gfield .gchoice input[type=checkbox],
.bestelformulier_wrapper.gform_legacy_markup_wrapper .gform_fields .gfield .gchoice input[type=radio],
.bestelformulier_wrapper.gform_legacy_markup_wrapper .gform_fields .gfield .gchoice input[type=checkbox]{appearance:none;-webkit-appearance:none;color:inherit;flex:none;width:1.25rem;height:1.25rem;border:2px solid currentColor;border-radius:50%;background:transparent;margin:2px 0 0;padding:0;cursor:pointer;position:relative;vertical-align:top}
.bestelformulier_wrapper.gform_wrapper.gravity-theme .gform_fields .gfield .gchoice input[type=checkbox],
.bestelformulier_wrapper.gform_legacy_markup_wrapper .gform_fields .gfield .gchoice input[type=checkbox]{border-radius:0.25rem}
.bestelformulier_wrapper.gform_wrapper.gravity-theme .gform_fields .gfield .gchoice input:checked,
.bestelformulier_wrapper.gform_legacy_markup_wrapper .gform_fields .gfield .gchoice input:checked{border-color:var(--geel);background:var(--geel)}
.bestelformulier_wrapper.gform_wrapper.gravity-theme .gform_fields .gfield .gchoice input[type=radio]:checked::after,
.bestelformulier_wrapper.gform_legacy_markup_wrapper .gform_fields .gfield .gchoice input[type=radio]:checked::after{content:"";position:absolute;inset:0.25rem;border-radius:50%;background:var(--inkt)}
.bestelformulier_wrapper.gform_wrapper.gravity-theme .gform_fields .gfield .gchoice input[type=checkbox]:checked::after,
.bestelformulier_wrapper.gform_legacy_markup_wrapper .gform_fields .gfield .gchoice input[type=checkbox]:checked::after{content:"";position:absolute;left:0.3125rem;top:1px;width:0.3125rem;height:0.625rem;border:solid var(--inkt);border-width:0 0.1562rem 0.1562rem 0;transform:rotate(45deg)}
.bestelformulier_wrapper.gform_wrapper.gravity-theme .gform_fields .gfield .gchoice input:focus-visible,
.bestelformulier_wrapper.gform_legacy_markup_wrapper .gform_fields .gfield .gchoice input:focus-visible{outline:2px solid var(--geel);outline-offset:2px}
.bestelformulier_wrapper.gform_wrapper.gravity-theme .gform_fields .gfield .gchoice label,
.bestelformulier_wrapper.gform_legacy_markup_wrapper .gform_fields .gfield .gchoice label{font-size:0.9375rem;font-weight:500;line-height:1.4;color:inherit;margin:0;padding:0;max-width:none;width:auto;cursor:pointer}
/* de drie keuzes van het eerste veld als kaarten, de hele kaart klikbaar */
.bestelformulier_wrapper.gform_wrapper.gravity-theme .gform_fields > #field_1_1 .gfield_radio,
.bestelformulier_wrapper.gform_legacy_markup_wrapper .gform_fields > #field_1_1 .gfield_radio{display:grid;gap:0.625rem}
.bestelformulier_wrapper.gform_wrapper.gravity-theme .gform_fields > #field_1_1 .gchoice,
.bestelformulier_wrapper.gform_legacy_markup_wrapper .gform_fields > #field_1_1 .gchoice{gap:0.875rem;padding:1rem 1.125rem;border:2px solid var(--lijn);border-radius:0.625rem;transition:border-color .2s ease}
.bestelformulier_wrapper.gform_wrapper.gravity-theme .gform_fields > #field_1_1 .gchoice:hover,
.bestelformulier_wrapper.gform_legacy_markup_wrapper .gform_fields > #field_1_1 .gchoice:hover{border-color:currentColor}
.bestelformulier_wrapper.gform_wrapper.gravity-theme .gform_fields > #field_1_1 .gchoice:has(input:checked),
.bestelformulier_wrapper.gform_legacy_markup_wrapper .gform_fields > #field_1_1 .gchoice:has(input:checked){border-color:var(--geel)}
.bestelformulier_wrapper.gform_wrapper.gravity-theme .gform_fields > #field_1_1 .gchoice label,
.bestelformulier_wrapper.gform_legacy_markup_wrapper .gform_fields > #field_1_1 .gchoice label{font-size:1.0625rem;font-weight:700;line-height:1.2}
.bestelformulier_wrapper.gform_wrapper.gravity-theme .gform_fields > #field_1_1 .gchoice label::after,
.bestelformulier_wrapper.gform_legacy_markup_wrapper .gform_fields > #field_1_1 .gchoice label::after{content:"";position:absolute;inset:0}
/* de toelichting per keuze (html-velden direct na de keuzes) en het privacyblok */
.bestelformulier_wrapper.gform_wrapper.gravity-theme .gform_fields .gfield.gfield_html,
.bestelformulier_wrapper.gform_legacy_markup_wrapper .gform_fields .gfield.gfield_html{font-size:0.9375rem;line-height:1.5;color:var(--dof)}
.bestelformulier_wrapper.gform_wrapper.gravity-theme .gform_fields > #field_1_1 + .gfield.gfield_html,
.bestelformulier_wrapper.gform_wrapper.gravity-theme .gform_fields > #field_1_1 + .gfield.gfield_html + .gfield.gfield_html,
.bestelformulier_wrapper.gform_wrapper.gravity-theme .gform_fields > #field_1_1 + .gfield.gfield_html + .gfield.gfield_html + .gfield.gfield_html{margin-top:-0.5rem;padding-left:2.125rem}
.bestelformulier_wrapper.gform_wrapper .gform_fields .gfield.gfield_html p{margin:0 0 .6em}
.bestelformulier_wrapper.gform_wrapper .gform_fields .gfield.gfield_html p:last-child{margin:0}
.bestelformulier_wrapper.gform_wrapper .gform_fields .gfield.gfield_html a{color:inherit;text-decoration:underline}
/* omschrijving onder een veld, sublabels van het adres, sectiekop */
.bestelformulier_wrapper.gform_wrapper.gravity-theme .gform_fields .gfield .gfield_description,
.bestelformulier_wrapper.gform_legacy_markup_wrapper .gform_fields .gfield .gfield_description{font-size:0.875rem;color:var(--dof);line-height:1.5;margin:0.375rem 0 0;padding:0}
.bestelformulier_wrapper.gform_wrapper.gravity-theme .gform_fields .gfield .ginput_complex,
.bestelformulier_wrapper.gform_legacy_markup_wrapper .gform_fields .gfield .ginput_complex{display:grid;grid-template-columns:1fr 1fr;gap:0.875rem 1rem;margin:0;padding:0}
.bestelformulier_wrapper.gform_wrapper.gravity-theme .gform_fields .gfield .ginput_complex > span,
.bestelformulier_wrapper.gform_legacy_markup_wrapper .gform_fields .gfield .ginput_complex > span{display:block;float:none;width:auto;margin:0;padding:0;min-width:0}
.bestelformulier_wrapper.gform_wrapper.gravity-theme .gform_fields .gfield .ginput_complex .ginput_full,
.bestelformulier_wrapper.gform_legacy_markup_wrapper .gform_fields .gfield .ginput_complex .ginput_full{grid-column:1 / -1}
.bestelformulier_wrapper.gform_wrapper.gravity-theme .gform_fields .gfield .ginput_complex label,
.bestelformulier_wrapper.gform_legacy_markup_wrapper .gform_fields .gfield .ginput_complex label{display:block;font-size:0.8125rem;font-weight:500;color:var(--dof);margin:0.375rem 0 0;padding:0;line-height:1.3}
.bestelformulier_wrapper.gform_wrapper.gravity-theme .gform_fields .gfield.gsection,
.bestelformulier_wrapper.gform_legacy_markup_wrapper .gform_fields .gfield.gsection{border:0;border-top:1px solid var(--lijn);padding:1.375rem 0 0;margin-top:0.375rem}
.bestelformulier_wrapper.gform_wrapper.gravity-theme .gform_fields .gfield.gsection .gsection_title,
.bestelformulier_wrapper.gform_legacy_markup_wrapper .gform_fields .gfield.gsection .gsection_title{font-size:0.875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--dof);line-height:1.3;margin:0 0 0.5rem;padding:0}
.bestelformulier_wrapper.gform_wrapper.gravity-theme .gform_fields .gfield.gsection .gsection_description,
.bestelformulier_wrapper.gform_legacy_markup_wrapper .gform_fields .gfield.gsection .gsection_description{font-size:0.875rem;color:var(--dof);line-height:1.5;margin:0;padding:0}
/* knop */
.bestelformulier_wrapper.gform_wrapper .gform_footer,
.bestelformulier_wrapper.gform_wrapper .gform-footer{display:flex;flex-wrap:wrap;gap:0.75rem 1.5rem;align-items:center;margin:1.625rem 0 0;padding:0}
.bestelformulier_wrapper.gform_wrapper .gform_footer .gform_button,
.bestelformulier_wrapper.gform_wrapper .gform-footer .gform_button,
.bestelformulier_wrapper.gform_wrapper .gform_footer input[type=submit]{display:inline-flex;align-items:center;justify-content:center;gap:0.625rem;width:auto;height:auto;min-height:0;font:inherit;font-weight:700;font-size:1rem;line-height:1;padding:1.0625rem 1.5rem;border-radius:0.5rem;border:2px solid var(--geel);background:var(--geel);color:var(--inkt);cursor:pointer;margin:0;white-space:nowrap;transition:transform .2s ease;text-decoration:none}
.bestelformulier_wrapper.gform_wrapper .gform_footer .gform_button:hover,
.bestelformulier_wrapper.gform_wrapper .gform-footer .gform_button:hover{transform:translateY(-1px)}
.bestelformulier_wrapper.gform_wrapper .gform_ajax_spinner{width:1.25rem;height:1.25rem;margin-left:0.75rem}
/* foutmeldingen en bevestiging */
.bestel .bestelformulier_wrapper.gform_wrapper.gravity-theme .gform_validation_errors{color:var(--wit);border:2px solid var(--f4);border-radius:0.625rem;background:transparent;box-shadow:none;padding:0.875rem 1.125rem;padding-inline-start:1.125rem;margin:0 0 1.375rem;width:auto;max-width:none}
.bestel .bestelformulier_wrapper.gform_wrapper.gravity-theme .gform_validation_errors .gform_submission_error{font:inherit;font-size:1rem;font-weight:700;line-height:1.3;color:inherit;margin:0;padding:0;max-width:none}
.bestel .bestelformulier_wrapper.gform_wrapper.gravity-theme .gform_validation_errors .gform-icon{display:none}
.bestel .bestelformulier_wrapper.gform_wrapper.gravity-theme .gform_validation_errors>ol{margin:0.5rem 0 0;padding-left:1.25rem}
.bestel .bestelformulier_wrapper.gform_wrapper.gravity-theme .gform_validation_errors>ol a{color:inherit;font-size:0.875rem}
.bestelformulier_wrapper.gform_wrapper.gravity-theme .gform_fields .gfield.gfield_error,
.bestelformulier_wrapper.gform_legacy_markup_wrapper .gform_fields .gfield.gfield_error{background:transparent;border:0;padding:0;margin:0;width:auto}
.bestelformulier_wrapper.gform_wrapper.gravity-theme .gform_fields .gfield.gfield_error input,
.bestelformulier_wrapper.gform_wrapper.gravity-theme .gform_fields .gfield.gfield_error textarea,
.bestelformulier_wrapper.gform_legacy_markup_wrapper .gform_fields .gfield.gfield_error input,
.bestelformulier_wrapper.gform_legacy_markup_wrapper .gform_fields .gfield.gfield_error textarea{border-color:var(--f4);border-width:2px}
.bestelformulier_wrapper.gform_wrapper.gravity-theme .gform_fields .gfield.gfield_error .gfield_label,
.bestelformulier_wrapper.gform_legacy_markup_wrapper .gform_fields .gfield.gfield_error .gfield_label{color:inherit}
.bestelformulier_wrapper.gform_wrapper.gravity-theme .gform_fields .gfield .gfield_validation_message,
.bestelformulier_wrapper.gform_wrapper.gravity-theme .gform_fields .gfield .validation_message,
.bestelformulier_wrapper.gform_legacy_markup_wrapper .gform_fields .gfield .validation_message{font-size:0.875rem;font-weight:600;line-height:1.4;color:inherit;background:transparent;border:0;border-left:0.1875rem solid var(--f4);border-radius:0;padding:2px 0 2px 0.75rem;margin:0.5rem 0 0;min-height:0}
.bestelformulier_wrapper .gform_confirmation_message,
.bestel .form .gform_confirmation_message{font-size:1.1875rem;font-weight:600;line-height:1.4;display:flex;gap:0.875rem;align-items:flex-start}
.bestelformulier_wrapper .gform_confirmation_message::before,
.bestel .form .gform_confirmation_message::before{content:"";flex:none;width:0.75rem;height:0.75rem;border-radius:2px;background:var(--geel);margin-top:0.5rem}

/* ---- vragenlijst ---- */
.vragen details{border-top:1px solid currentColor}
.vragen details:last-of-type{border-bottom:1px solid currentColor}
.vragen summary{list-style:none;cursor:pointer;padding:1.375rem 3.5rem 1.375rem 0;font-weight:700;font-size:clamp(1.1875rem,1.7vw,1.5rem);line-height:1.2;position:relative;letter-spacing:-.01em}
.vragen summary::-webkit-details-marker{display:none}
.vragen summary::after{content:"+";position:absolute;right:0.25rem;top:0.875rem;font-size:2.125rem;font-weight:300;line-height:1}
.vragen details[open] summary::after{content:"−"}
.vragen details p{font-size:1.0312rem;color:var(--dof);margin:0 0 1.5rem;max-width:38em}
.vragen .lijst{margin-top:0.5rem}


/* ---- mobiel ---- */
@media (max-width:860px){
  .hero{padding:2rem 0 3.5rem}
  .hero .wrap{grid-template-columns:1fr;gap:2.25rem}
  .hero h1{font-size:2.875rem}
  /* op smal: twee kleinere kaarten dicht bij de doos, binnen het venster; de derde blijft weg */
  .hero-beeld{min-height:0;margin:2rem 0.75rem}   /* lucht boven en onder: de losse kaart stond 9 px onder de knop (03-10) */
  .hero-beeld .los{--u:2px}
  .hero-beeld .los.a{left:2%;bottom:10%;--rot:-10deg}
  .hero-beeld .los.b{right:2%;top:-4%;--rot:8deg}
  .hero-beeld .los.c{display:none}
  /* schema op smal: een stapel, de retourpijl loopt links langs de stapel en komt bovenaan stap 1 binnen */
  .camp .schema-rij{--uit:1.375rem;--pijlruimte:2.125rem;grid-template-columns:1fr;grid-template-rows:var(--pijlruimte) auto auto auto auto;gap:0.625rem;--gap:0.625rem;margin-top:2.5rem;padding:0 0 0 2.125rem}
  .camp .schema-rij .stap{grid-column:1}.camp .schema-rij .s1{grid-row:2}.camp .schema-rij .s2{grid-row:3}.camp .schema-rij .s3{grid-row:4}
  .camp .schema-rij .balk{grid-row:5;grid-column:1;flex-direction:column;align-items:flex-start;padding:1rem 1.125rem}
  .camp .schema-rij .balk b{flex:0 0 auto}
  .camp .schema-rij .balk .pijltjes{grid-template-columns:1fr}
  .camp .schema-rij .balk .pijltjes i:not(:first-child){display:none}
  .camp .schema-rij .balk::after{left:auto;right:100%;border-right:0;border-left:2px solid var(--inkt);border-radius:0 0 0 var(--r)}
  .camp .schema-rij .retour{grid-row:1 / 5;grid-column:1;--x1:1.5rem}
  .camp .schema-rij .retour .boog{left:calc(-1 * var(--uit));right:auto;width:calc(var(--uit) + var(--x1) + 2px)}
  .camp .schema-rij .retour .poot{right:auto;left:calc(-1 * var(--uit));border-right:0;border-left:2px solid currentColor}
  .camp .schema-rij .retour .punt{left:calc(var(--x1) - 0.3125rem)}
  .camp .schema-rij .retour .tekst{left:calc(var(--x1) + 1rem)}
  .werkt .fases{gap:0.3125rem}
  .werkt .fase .balk{height:0.625rem}
  .werkt .fase .tijd{font-size:0.7188rem}
  .werkt .fase .sub{display:none}
  /* waaier op smal: een stapel. De actieve kaart staat leesbaar in het midden, de andere steken er schuin achter uit */
  .waaier{--u:0.2625rem}
  .waaier .citaat{padding-left:1.25rem;border-left-width:0.25rem}
  .waaier .cite{padding-left:1.5rem}
  .waaier .kopregel-s{flex-direction:column;align-items:flex-start;gap:1rem;margin:1.75rem 0 1.5rem}
  .waaier .pijlen{display:flex}
  .waaier .teller{display:block}
  .waaier .track{height:calc(100*var(--u) + 3.5rem);overflow:hidden}   /* de stapel steekt anders buiten het venster: geen horizontale paginascroll */
  .waaier .plek{top:1.25rem;transform:translateX(var(--mtx)) rotate(var(--mrot));transform-origin:50% 120%;z-index:var(--mz);opacity:var(--mop);pointer-events:none;transition:transform .35s ease,opacity .35s ease}
  .waaier .plek:hover{transform:translateX(var(--mtx)) rotate(var(--mrot))}
  .waaier .plek.act{pointer-events:auto}
  .waaier .plek.act .draai{display:block}
  .bestel .kolommen{grid-template-columns:1fr;gap:2.5rem}
  .bestel .form{padding:1.25rem 1rem}
  .bestelformulier_wrapper.gform_wrapper.gravity-theme .gform_fields .gfield .ginput_complex,
  .bestelformulier_wrapper.gform_legacy_markup_wrapper .gform_fields .gfield .ginput_complex{grid-template-columns:1fr}
  .bestelformulier_wrapper.gform_wrapper.gravity-theme .gform_fields .gfield .ginput_complex .ginput_full,
  .bestelformulier_wrapper.gform_legacy_markup_wrapper .gform_fields .gfield .ginput_complex .ginput_full{grid-column:auto}
  .bestelformulier_wrapper.gform_wrapper.gravity-theme .gform_fields > #field_1_1 + .gfield.gfield_html,
  .bestelformulier_wrapper.gform_wrapper.gravity-theme .gform_fields > #field_1_1 + .gfield.gfield_html + .gfield.gfield_html,
  .bestelformulier_wrapper.gform_wrapper.gravity-theme .gform_fields > #field_1_1 + .gfield.gfield_html + .gfield.gfield_html + .gfield.gfield_html{padding-left:0}
  .bestelformulier_wrapper.gform_wrapper .gform_footer .gform_button,
  .bestelformulier_wrapper.gform_wrapper .gform-footer .gform_button{width:100%}
  .vragen summary{padding-right:2.75rem}
}

/* ---- hoe het werkt op smal (onder 960, want vier kaarten met pijltjes passen niet meer naast elkaar): een stapel, de
   kaarten onder elkaar met een pijltje ertussen, in de lijn van het stapnummer. ---- */
@media (max-width:960px){
  .werkt .kaarten4{--u:0.2188rem;--x1:calc(8.5*var(--u));grid-template-columns:auto;grid-template-rows:repeat(7,auto);justify-content:start;margin:2.25rem 0 2.5rem}   /* --x1: de lijn van het stapnummer in de band */
  .werkt .kaarten4 .spk,.werkt .kaarten4 .pijl{grid-column:1}
  .werkt .kaarten4 .k1{grid-row:1}.werkt .kaarten4 .p1{grid-row:2}.werkt .kaarten4 .k2{grid-row:3}.werkt .kaarten4 .p2{grid-row:4}
  .werkt .kaarten4 .k3{grid-row:5}.werkt .kaarten4 .p3{grid-row:6}.werkt .kaarten4 .k4{grid-row:7}
  .werkt .kaarten4 .pijl{flex-direction:column;height:2.5rem;width:0.75rem;margin:0 0 0 calc(var(--x1) - 0.3125rem)}   /* -5: het pijltje is 12 px breed, de lijn van 2 px zit in het midden en komt zo op --x1 + 1 */
  .werkt .kaarten4 .pijl::before{width:2px;height:1.375rem}
  .werkt .kaarten4 .pijl .punt{transform:rotate(90deg);margin:-2px 0 0}
}