:root{
  --inkt:#2A0E22; --pruim:#3A1330; --wijn:#6E1A3C; --framboos:#B3264A; --vuur:#DE4B26;
  --mandarijn:#EC7C26; --saffraan:#F6B12E; --room:#FFF1D6; --zalm:#F9B795; --blauw:#1E58E6;
  --kop:'Rammetto One',serif; --tekst:'Alegreya Sans',system-ui,sans-serif;
  --korrel:url(/beeld/korrel.png);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--pruim);color:var(--room);font:500 20px/1.4 var(--tekst);font-feature-settings:'lnum' 1;overflow-x:clip}
img,svg{display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--kop);font-weight:400;margin:0;line-height:1.04}
p{margin:0}
.verborgen{position:absolute;width:0;height:0}

/* papier */
.vel{background-image:var(--korrel);background-color:var(--k)}
.laag{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;filter:drop-shadow(0 -3px 2px rgba(42,14,34,.22)) drop-shadow(0 -9px 14px rgba(42,14,34,.3))}
.sm{display:none}

/* toneel: alles op % van het vak, telefoon krijgt een eigen opstelling */
.toneel{position:relative;width:100%;overflow:clip}
.t{position:absolute;left:calc(var(--x)*1%);top:calc(var(--y)*1%);width:calc(var(--w)*1%);transform:translate(-50%,-50%) rotate(calc(var(--r)*1deg));z-index:var(--z,1)}
.t img,.t svg{width:100%;height:auto}
.mag{filter:drop-shadow(0 1px 0 rgba(42,14,34,.5)) drop-shadow(0 2px 2px rgba(42,14,34,.35)) drop-shadow(2px 9px 9px rgba(42,14,34,.32))}
.pop{filter:drop-shadow(0 2px 1px rgba(42,14,34,.3)) drop-shadow(0 7px 8px rgba(42,14,34,.22))}
.papier{filter:drop-shadow(0 1px 1px rgba(42,14,34,.4)) drop-shadow(1px 6px 7px rgba(42,14,34,.3))}

/* kop */
.kop{position:absolute;z-index:30;left:0;right:0;top:0;display:flex;align-items:center;justify-content:space-between;padding:22px clamp(16px,4.4vw,64px)}
.kop .logo img{height:58px;width:auto}
.kop nav{display:flex;align-items:center;gap:30px;font-weight:700;font-size:20px}
.kop nav a{text-decoration:none;padding:6px 2px}
.kop nav a:hover{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:5px}
.kop .mandje{white-space:nowrap;display:flex;align-items:center;gap:8px;background:var(--room);color:var(--inkt);padding:9px 16px 9px 14px;clip-path:polygon(1% 7%,98% 0,100% 90%,3% 100%)}
.kop .mandje:hover{text-decoration:none}

/* knop: stukje papier */
.knopvak{display:inline-block;filter:drop-shadow(0 2px 0 rgba(42,14,34,.5)) drop-shadow(1px 7px 7px rgba(42,14,34,.3));transition:transform .15s}
.knopvak:hover{transform:translateY(-2px) rotate(-1deg)}
.knop{display:inline-flex;align-items:center;gap:12px;border:0;cursor:pointer;background:var(--room);color:var(--inkt);font:400 22px/1 var(--kop);padding:19px 32px 21px;text-decoration:none;clip-path:polygon(0 8%,38% 2%,99% 0,100% 62%,98% 100%,44% 95%,2% 100%)}
.knop.blauw{background:var(--blauw);color:#fff}

/* held */
.held .toneel{aspect-ratio:1600/1010;min-height:660px;background-color:var(--vuur);background-image:var(--korrel)}
.heldtekst{position:absolute;z-index:12;left:clamp(16px,4.4vw,64px);top:12.5%;width:53%}
.heldtekst h1{font-size:min(clamp(50px,7.7vw,126px),calc(52vw / (var(--n) * .62)));line-height:1;color:var(--room);filter:drop-shadow(0 2px 0 rgba(42,14,34,.6)) drop-shadow(1px 7px 6px rgba(42,14,34,.3))}
.heldtekst h1 span{display:inline-block;transform:translateY(calc(var(--d)*1px)) rotate(calc(var(--r)*1deg))}
.heldtekst h1 .regel{display:block;white-space:nowrap;transform:none}
.heldtekst p{font-size:clamp(20px,1.85vw,26px);line-height:1.3;max-width:27em;margin:22px 0 24px;font-weight:700;color:var(--room)}

/* raster */
.aanbod{position:relative;z-index:3;margin-top:-1px}
.aanbodkop{position:relative;padding:34px clamp(16px,4.4vw,64px) 140px;background-color:var(--wijn);background-image:var(--korrel);display:flex;gap:28px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap}
h2{font-size:clamp(38px,5vw,72px)}
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.tabs button{border:0;cursor:pointer;font:700 20px/1 var(--tekst);padding:11px 18px 13px;color:var(--room);background:rgba(255,241,214,.14);clip-path:polygon(2% 10%,97% 0,100% 88%,0 100%)}
.tabs button[aria-pressed=true]{background:var(--room);color:var(--inkt)}
.tabs button:hover{background:var(--saffraan);color:var(--inkt)}
.rij{position:relative;background-color:var(--k);background-image:var(--korrel);color:var(--t);padding:0 clamp(12px,4vw,64px) var(--gat)}
.rijrand{position:absolute;left:0;right:0;bottom:calc(100% - 1px);width:100%;height:64px;pointer-events:none;filter:drop-shadow(0 -3px 2px rgba(42,14,34,.25)) drop-shadow(0 -8px 12px rgba(42,14,34,.28))}
.rijbin{position:relative}
.aanbod{--gat:150px;--uit:-128px}
.rijbin{display:grid;grid-template-columns:repeat(5,1fr);gap:0 14px;align-items:end}
.fig{display:block;text-decoration:none;text-align:center;margin-top:var(--uit);position:relative}
.fig img,.fig .wissel{width:calc(var(--s)*100%);max-width:232px;height:auto;margin:0 auto 12px;transform:rotate(calc(var(--r)*1deg));transition:transform .18s}
.fig:hover img,.fig:hover .wissel{transform:rotate(0deg) translateY(-7px) scale(1.05)}
.fig b{display:block;font:400 20px/1.1 var(--kop);text-wrap:balance}
.fig small{display:block;font-size:18px;font-weight:500;opacity:.92}
.rijgluur{position:absolute;right:25%;bottom:27px;width:140px;z-index:0}
.meer{position:relative;z-index:20;background-color:var(--k);background-image:var(--korrel);text-align:center;padding:0 16px 96px;margin-top:-90px}
.meer[hidden]{display:none}

/* maten */
.maten{position:relative;z-index:4;background-color:var(--saffraan);background-image:var(--korrel);color:var(--inkt)}
.matenbin{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:44px;padding:56px clamp(16px,4.4vw,64px) 0;align-items:end}
.matenbin h2{margin-bottom:16px}
.maatlijst{list-style:none;margin:28px 0 72px;padding:0}
.maatlijst li{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:11px 0;font:400 30px/1.1 var(--kop);border-bottom:3px dashed rgba(42,14,34,.55)}
.maatlijst li:last-child{border-bottom:0}
.kast{position:relative;aspect-ratio:760/660;margin-bottom:-1px}
.kast .t small{display:block;text-align:center;font:400 18px/1 var(--kop);margin-top:9px;color:var(--inkt)}

/* korting */
.korting{position:relative;z-index:5;background-color:var(--framboos);background-image:var(--korrel)}
.kortingkop{padding:26px clamp(16px,4.4vw,64px) 0;max-width:900px;position:relative;z-index:2}
.kortingkop p{margin-top:12px;font-size:22px}
.korting::after{content:'';display:block;height:clamp(44px,8.6vw,146px);background-color:var(--mandarijn);background-image:var(--korrel)}
.korting .toneel{aspect-ratio:1600/640;overflow:visible}
.spiegel img{transform:scaleX(-1)}
.voetvlok{position:absolute;inset:0;width:100%;height:100%}
.pct{font-family:var(--kop);color:var(--inkt);text-align:center;line-height:1}
.pct b{display:block;font-weight:400;font-size:clamp(40px,5vw,72px)}
.pct small{display:block;font:700 19px/1.1 var(--tekst);margin-top:6px}

/* voet */
.voet{position:relative;z-index:6;background-color:var(--pruim);background-image:var(--korrel)}
.voetbin{position:relative;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:32px;align-items:end;padding:24px clamp(16px,4.4vw,64px) 30px}
.voet h2{font-size:clamp(34px,4vw,56px);margin-bottom:14px}
.voet .logo img{height:62px;width:auto;margin-top:30px}
.voet nav{display:flex;flex-wrap:wrap;gap:6px 24px;margin-top:20px;font-weight:700}
.voet nav a{text-underline-offset:4px}
.voet small{display:block;margin-top:14px;font-size:17px;opacity:.75}

@media (max-width:760px){
  body{font-size:19px}
  .lg{display:none}.sm{display:block}
  .t{left:calc(var(--mx)*1%);top:calc(var(--my)*1%);width:calc(var(--mw)*1%);transform:translate(-50%,-50%) rotate(calc(var(--mr)*1deg))}
  .alleengroot{display:none}
  .kop{padding:12px 16px}
  .kop .logo img{height:26px}
  .kop .mandje{padding:7px 11px;font-size:17px}
  .kop nav a:not(.mandje){display:none}
  .kop nav{font-size:18px}
  .held .toneel{aspect-ratio:390/860;min-height:0}
  .heldtekst{left:16px;right:16px;width:auto;top:10.5%}
  .heldtekst h1{font-size:min(13.2vw,calc((100vw - 36px) / (var(--n) * .73)))}
  .heldtekst p{margin:12px 0 14px;font-size:19px}
  .knop{font-size:20px;padding:16px 24px 18px}
  .aanbodkop{padding:26px 16px 112px}
  .tabs button{font-size:18px;padding:9px 13px 11px}
  .aanbod{--gat:112px;--uit:-92px}
  .rij{padding-left:10px;padding-right:10px}
  .rijbin{grid-template-columns:repeat(2,1fr);gap:0 8px}
  .rijrand{height:40px}
  .fig img,.fig .wissel{max-width:170px}
  .fig b{font-size:18px}
  .rijgluur{width:104px;right:auto;left:14%;bottom:14px}
  .matenbin{grid-template-columns:1fr;gap:6px;padding-top:30px}
  .maatlijst{margin:16px 0 20px}
  .korting .toneel{aspect-ratio:780/1180;overflow:clip}
  .pct small{font-size:17px}
  .voetvlok{display:none}
  .voetbin{grid-template-columns:minmax(0,1fr)}
  .voet .logo img{height:auto;width:100%;max-width:300px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}


/* ontwerper voorop */
h1,h2,h3{text-wrap:balance}
p,li,small{text-wrap:pretty}
.aanbod{--gat:170px;--uit:-120px}
.rijbin{grid-template-columns:repeat(3,1fr);gap:0 clamp(16px,3vw,48px)}
.fig img,.fig .wissel{max-width:300px}
.fig b{font-size:24px;margin-top:4px}
.fig small{font-size:19px;line-height:1.25;max-width:22em;margin:6px auto 0}
.fig .doe{display:inline-block;margin-top:10px;font-weight:700;font-size:19px;text-decoration:underline;text-underline-offset:4px}
.matenbin.ontw{grid-template-columns:minmax(0,4fr) minmax(0,7fr);align-items:center;padding-bottom:150px}
.ontw .maatlijst{margin:22px 0 8px}
.ontw .maatlijst li{font-size:26px;padding:8px 0}
.ontw .groter{margin:0 0 24px;font-weight:700}
.scherm{margin:0;background:#FFF1D6;padding:clamp(8px,1.2vw,16px);transform:rotate(1deg);box-shadow:0 2px 0 rgba(42,14,34,.55),0 16px 26px rgba(42,14,34,.32)}
.scherm img{display:block;width:100%;height:auto}
@media (max-width:760px){.rijbin{grid-template-columns:repeat(2,1fr);gap:0 12px}.fig b{font-size:19px}.fig small{font-size:17px}.fig .doe{font-size:17px}.aanbod{--gat:130px;--uit:-96px}.matenbin.ontw{grid-template-columns:minmax(0,1fr);padding-bottom:110px}}

.ontw h2{font-size:clamp(32px,3.7vw,56px)}
.kortingkop h2{max-width:none}
@media (min-width:761px){.korting .kortingkop + .toneel{margin-top:-130px}}
@media (max-width:760px){.fig b{font-size:17px;overflow-wrap:anywhere;hyphens:manual}.rijbin{gap:0 10px}.rij{padding-left:12px;padding-right:12px}}

/* losse pagina's */
.pagkop{position:relative;background-color:var(--vuur);background-image:var(--korrel);padding-bottom:clamp(66px,10vw,150px)}
.pagkop .kop{position:relative}
.pagtitel{position:relative;padding:clamp(10px,3vw,40px) clamp(16px,4.4vw,64px) 0}
.pagtitel h1{font-size:min(clamp(38px,5vw,72px),calc((100vw - 34px)/(var(--w,12)*.78)));color:var(--room);filter:drop-shadow(0 2px 0 rgba(42,14,34,.6)) drop-shadow(1px 7px 6px rgba(42,14,34,.3))}
.pagtitel p{margin-top:12px;font-weight:700;font-size:clamp(20px,1.85vw,26px)}
.pag{word-spacing:.05em;position:relative;background-color:var(--wijn);background-image:var(--korrel);min-height:44vh;padding:clamp(36px,5vw,64px) clamp(16px,4.4vw,64px) clamp(130px,16vw,230px)}
.pagbin{max-width:1180px;margin:0 auto}
.knoprij{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px}
.paglink{font-weight:700;text-underline-offset:4px;color:inherit}
.vel{background-color:var(--room);background-image:var(--korrel);color:var(--inkt);padding:clamp(22px,4vw,44px);max-width:760px;filter:drop-shadow(0 2px 1px rgba(42,14,34,.4)) drop-shadow(1px 8px 9px rgba(42,14,34,.32));clip-path:polygon(0 1%,99.4% 0,100% 98.6%,.6% 100%)}
.vel h2{font-size:clamp(28px,3.2vw,44px);margin-bottom:12px}
.mailvlak{display:inline-block;margin-top:20px;font:400 clamp(18px,2.4vw,28px)/1.2 var(--kop);color:var(--wijn);text-underline-offset:5px}

/* winkelmand */
.mand{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(20px,3vw,40px);align-items:start}
.regels{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.mandregel{display:grid;grid-template-columns:108px minmax(0,1fr) auto;gap:16px;align-items:start;background-color:var(--room);background-image:var(--korrel);color:var(--inkt);padding:14px 16px;clip-path:polygon(0 1.5%,99.6% 0,100% 98%,.4% 100%)}
.rbeeld{position:relative;display:block;width:108px;height:108px}
.rbeeld img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 1px 1px rgba(42,14,34,.4)) drop-shadow(1px 4px 4px rgba(42,14,34,.25))}
.rgeen{position:absolute;inset:auto 0 4px;text-align:center;font-size:14px;line-height:1.1}
.rmidden{display:grid;gap:4px;min-width:0}
.rnaam{font:400 20px/1.15 var(--kop);overflow-wrap:anywhere}
.rmaat{font-size:18px;line-height:1.2;color:#6E4A5C}
.racties{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin-top:6px}
.tel{display:inline-flex;align-items:center;background:rgba(42,14,34,.1)}
.tel button{border:0;background:none;color:var(--inkt);font:400 22px/1 var(--kop);width:44px;height:44px;cursor:pointer}
.tel button:disabled{opacity:.3;cursor:default}
.tel output{min-width:30px;text-align:center;font:400 19px/1 var(--kop)}
.rlink{border:0;background:none;padding:10px 0;font:700 18px/1 var(--tekst);color:var(--wijn);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.rprijs{text-align:right;font:400 22px/1.1 var(--kop);white-space:nowrap}
.rprijs small{display:block;font:500 17px/1.2 var(--tekst);margin-top:4px;color:#6E4A5C}
.totaal{background-color:var(--saffraan);background-image:var(--korrel);color:var(--inkt);padding:22px 22px 20px;display:grid;gap:10px;clip-path:polygon(0 .8%,99.4% 0,100% 99%,.8% 100%)}
.trij{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.trij[hidden]{display:none}
.trij b{font-weight:700;white-space:nowrap}
.trij.eind{border-top:3px dashed rgba(42,14,34,.55);padding-top:10px;font:400 24px/1.1 var(--kop)}
.trij.eind b{font-weight:400}
.zacht{font-weight:500}
.knop.uit{justify-content:center;width:100%;margin-top:8px;font-size:19px;padding:16px 14px 18px;background:rgba(42,14,34,.16);color:rgba(42,14,34,.72);cursor:not-allowed}
.mandnoot{font-size:18px;line-height:1.25}
.leeg{display:flex;flex-wrap:wrap;align-items:center;gap:20px clamp(24px,5vw,60px)}
.leeg img{width:clamp(120px,20vw,200px);height:auto;transform:rotate(-7deg)}
.leeg h2{font-size:clamp(28px,3.2vw,44px);margin-bottom:20px}
.verborgentekst{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#smvol[hidden],#smleeg[hidden]{display:none}
@media (max-width:760px){
  .mand{grid-template-columns:minmax(0,1fr)}
  .mandregel{grid-template-columns:76px minmax(0,1fr);gap:12px;padding:12px}
  .rbeeld{width:76px;height:76px}
  .rprijs{grid-column:1 / -1;display:flex;justify-content:space-between;align-items:baseline;gap:10px;text-align:left}
  .rprijs small{margin:0}
  .racties{display:grid;grid-template-columns:auto auto 1fr;gap:2px 16px}
  .tel{grid-column:1 / -1;justify-self:start}
  .knop.uit{font-size:17px;padding-left:8px;padding-right:8px;white-space:nowrap}
}

/* afrekenen */
.knopvak.kbetaal{display:block;margin-top:6px}
.kbetaal .knop{width:100%;justify-content:center}
.kbetaal .knop[disabled]{cursor:progress;opacity:.8}
.knop:focus-visible{outline:3px solid var(--inkt);outline-offset:-6px}
.kassa .links{display:grid;gap:18px;min-width:0}
.kblok{background-color:var(--room);background-image:var(--korrel);color:var(--inkt);padding:22px clamp(16px,2.6vw,28px) 26px;min-width:0;clip-path:polygon(0 .8%,99.6% 0,100% 99.2%,.4% 100%)}
.kblok h2{font-size:clamp(24px,2.6vw,32px);margin-bottom:14px}
.velden{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.veld{display:flex;flex-direction:column;gap:5px;min-width:0}
.veld.heel{grid-column:1 / -1}
.veld label{font-weight:700;font-size:18px;line-height:1.2}
.veld input,.veld select{font:500 19px/1.2 var(--tekst);min-height:52px;padding:10px 12px;width:100%;min-width:0;color:var(--inkt);background:#FFFAF0;border:2px solid rgba(42,14,34,.5);border-radius:0}
.veld select{appearance:auto}
.veld input::placeholder{color:#7C5A6B;opacity:1}
.veld input:focus-visible,.veld select:focus-visible{outline:3px solid var(--blauw);outline-offset:1px;border-color:var(--blauw)}
.veld input.aangevuld{border-color:#1F6B4F}
.veldfout{display:none;color:#A3141B;font-size:17px;font-weight:700;line-height:1.25}
.fout > .veldfout{display:block}
.veld.fout input,.veld.fout select{border-color:#A3141B}
.adresmelding{grid-column:1 / -1;color:#1F6B4F;font-size:17px;font-weight:700;line-height:1.25}
.adresmelding[hidden]{display:none}
.wijzen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;border:0;margin:0;padding:0;min-width:0}
.wijze{position:relative;display:flex;flex-direction:column;gap:2px;min-height:76px;padding:12px 12px 12px 42px;background:#FFFAF0;border:2px solid rgba(42,14,34,.32);cursor:pointer}
.wijze[hidden]{display:none}
.wijze input{position:absolute;left:12px;top:14px;width:20px;height:20px;margin:0;accent-color:var(--blauw)}
.wijze b{font-size:19px;line-height:1.2}
.wijze span{font-size:17px;line-height:1.2;color:#6E4A5C}
.wijze:has(input:checked){border-color:var(--blauw);box-shadow:inset 0 0 0 1px var(--blauw)}
.wijze:has(input:focus-visible){outline:3px solid var(--blauw);outline-offset:2px}
.wijzen.fout .wijze{border-color:#A3141B}
.ovz summary{cursor:pointer;list-style:none;display:flex;align-items:baseline;gap:12px;min-height:32px}
.ovz summary::-webkit-details-marker{display:none}
.ovz summary b{font:400 22px/1.1 var(--kop);margin-right:auto}
.ovz summary::after{content:"";flex:none;width:10px;height:10px;border-right:3px solid currentColor;border-bottom:3px solid currentColor;transform:rotate(45deg) translate(-2px,-2px)}
.ovz[open] summary::after{transform:rotate(225deg) translate(-2px,-2px)}
.ovregels{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:10px}
.ovregel{display:grid;grid-template-columns:60px minmax(0,1fr) auto;gap:10px;align-items:center;font-size:18px;line-height:1.2}
.ovregel .rbeeld{width:60px;height:60px}
.ovtekst{min-width:0}
.ovregel b{display:block;overflow-wrap:anywhere}
.ovregel small{display:block;font-size:16px;line-height:1.2}
.ovprijs{font-weight:700;white-space:nowrap}
.ovaanpas{display:inline-flex;align-items:center;min-height:44px;font-size:18px}
.akkoord{display:grid;grid-template-columns:26px minmax(0,1fr);gap:10px;align-items:start;margin-top:4px;padding:12px 14px;background:var(--room);font-size:18px;line-height:1.3;cursor:pointer}
.akkoord b{display:block;font:400 19px/1.15 var(--kop);margin-bottom:4px;text-wrap:balance}
.akkoord input{width:24px;height:24px;margin:1px 0 0;accent-color:var(--blauw)}
.akkoord.fout{outline:3px solid #A3141B;outline-offset:-3px}
.kfout{padding:10px 14px;background:#FFFAF0;color:#A3141B;font-weight:700;font-size:18px;line-height:1.25}
.kfout[hidden]{display:none}
@media (max-width:640px){.wijzen{grid-template-columns:minmax(0,1fr)}.wijze{min-height:60px}}
@media (min-width:641px){.wijzen:has(.wijze-be:not([hidden])){grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.velden{grid-template-columns:minmax(0,1fr)}}

/* bedankt */
.dank{display:grid;gap:18px}
.dank [hidden]{display:none}
.testbalk{padding:10px 14px;background:var(--saffraan);color:var(--inkt);font-weight:700}
.bnummer{justify-self:start;padding:8px 16px;background:var(--room);color:var(--inkt);font-size:19px}
.bnummer b{letter-spacing:.03em}
.stappen{list-style:none;margin:0;padding:18px clamp(16px,2.6vw,28px) 20px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background-color:var(--room);background-image:var(--korrel);color:var(--inkt);clip-path:polygon(0 1.5%,99.6% 0,100% 98.5%,.4% 100%);counter-reset:stap}
.stappen li{position:relative;padding:44px 10px 0 0;font-size:18px;line-height:1.25}
.stappen li::before{counter-increment:stap;content:counter(stap);position:absolute;top:0;left:0;z-index:1;width:34px;height:34px;display:grid;place-items:center;font:400 16px/1 var(--kop);background:#FFFAF0;border:2px solid rgba(42,14,34,.4);border-radius:50%}
.stappen li::after{content:"";position:absolute;top:16px;left:34px;right:0;height:2px;background:rgba(42,14,34,.3)}
.stappen li:last-child::after{display:none}
.stappen li b{display:block}
.stappen li span{display:block;font-size:17px;color:#6E4A5C}
.stappen li.klaar::before{content:"\2713";background:var(--blauw);border-color:var(--blauw);color:#fff}
.stappen li.klaar::after{background:var(--blauw)}
.stappen li.nu::before{border-color:var(--blauw);color:var(--blauw);box-shadow:0 0 0 4px rgba(30,88,230,.18)}
.dankduo{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:18px;align-items:start}
.dankregels h2{font-size:clamp(24px,2.6vw,32px)}
.dankadres p{line-height:1.3}
.dankadres small{display:block;margin-top:10px;font-size:17px;line-height:1.25;color:#6E4A5C}
.confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:40}
.confetti i{position:absolute;top:-16px;width:10px;height:14px;opacity:0;animation:val 2.6s cubic-bezier(.25,.6,.5,1) forwards}
@keyframes val{0%{opacity:1;transform:translate3d(0,0,0) rotate(0)}100%{opacity:0;transform:translate3d(var(--dx),105vh,0) rotate(var(--rot))}}
@media (prefers-reduced-motion:reduce){.confetti{display:none}}
@media (max-width:760px){.dankduo{grid-template-columns:minmax(0,1fr)}
  .dank .knop{font-size:18px;padding-left:18px;padding-right:18px}
  .stappen{grid-template-columns:minmax(0,1fr);gap:14px}
  .stappen li{padding:3px 0 0 46px;min-height:34px}
  .stappen li::after{top:36px;bottom:-14px;left:16px;right:auto;width:2px;height:auto}}

/* voorwaarden en privacy */
.tekstvel{max-width:860px;margin:0 auto;clip-path:none;font-size:19px;line-height:1.45}
.tekstvel h2{font-size:clamp(24px,2.6vw,32px);margin:28px 0 8px}
.tekstvel h2:first-child{margin-top:0}
.tekstvel h3{font:700 21px/1.2 var(--tekst);margin:20px 0 6px}
.tekstvel p,.tekstvel ul,.tekstvel ol{margin:0 0 12px}
.tekstvel ul,.tekstvel ol{padding-left:1.3em}
.tekstvel a{color:var(--wijn);overflow-wrap:anywhere}
.tekstvel .versie{font-size:17px;color:#6E4A5C}
.tekstvel .inleiding{font-weight:700}
.tekstvel .modelformulier{margin:12px 0;padding:14px 16px;border:2px dashed rgba(42,14,34,.45)}
@media (max-width:760px){.tekstvel{padding:22px 16px}.tekstvel h2{font-size:20px}}

.postadres{margin:18px 0 0;font-size:17px}
.prodbeelden{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:26px}
.prodbeelden img{display:block;width:100%;height:auto;background:#fff}
.maattabel{list-style:none;margin:0 0 14px!important;padding:0!important;max-width:420px}
.maattabel li{display:flex;justify-content:space-between;gap:20px;padding:8px 12px;border-bottom:2px solid rgba(58,19,48,.14)}
.maattabel li.gekozen{background:var(--saffraan);border-bottom-color:transparent}
.productvel .knopvak{display:inline-block;margin-top:14px}
@media (max-width:560px){.prodbeelden{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.kortingkop h2{font-size:calc((100vw - 34px)/10.6)}}
@media (min-width:641px) and (max-width:1020px){.kop .logo img{height:38px}.kop nav{gap:16px;font-size:18px}}

/* kortingscode op de kassa */
.kcode{display:flex;flex-direction:column;gap:4px}
.kcodelink{align-self:flex-start;background:none;border:0;padding:6px 0;min-height:44px;font:inherit;font-size:18px;color:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.kcodevak[hidden]{display:none}
.kcoderij{display:flex;gap:8px;min-width:0}
.kcoderij input{flex:1;text-transform:uppercase}
.kcoderij button{flex:none;min-height:52px;padding:0 14px;border:2px solid var(--inkt);border-radius:0;background:none;color:inherit;font:700 18px var(--tekst);cursor:pointer}
.kcodemeld{color:#A3141B;font-size:17px;font-weight:700;line-height:1.25}
.kcodemeld.goed{color:#1F6B4F}
.kcodemeld[hidden]{display:none}

/* wisselende voorbeelden: de lege magneet staat vast, de lagen komen om de beurt op. Een ronde is 24 s, elke magneet start
   2 s later dan de vorige, dus er verandert steeds maar een ding. Tekst komt zacht scherp omhoog, foto's vloeien in elkaar over. */
.wissel{display:block;position:relative}
.wissel img{display:block;width:100%;height:auto}
.fig .wissel img{max-width:none;margin:0;transform:none;transition:none}
.wissel .laag{position:absolute;left:0;top:0;opacity:0;will-change:opacity,transform;animation:wissel 24s cubic-bezier(.22,.7,.25,1) infinite;animation-delay:calc(var(--i)*6s - 30s + var(--start,0s))}
.fotowissel .laag{animation-name:wisselfoto;animation-timing-function:ease-in-out}
@keyframes wissel{0%{opacity:0;transform:translateY(2.5%);filter:blur(3px)}4%{opacity:1;transform:none;filter:blur(0)}21%{opacity:1;transform:none;filter:blur(0)}25%{opacity:0;transform:translateY(-1.5%);filter:blur(3px)}100%{opacity:0}}
@keyframes wisselfoto{0%{opacity:0}6%{opacity:1}25%{opacity:1}31%{opacity:0}100%{opacity:0}}
/* bij binnenkomst klikken de magneten een voor een op de koelkast; op een muis komen ze even naar je toe */
.held .t.mag{animation:klik .52s cubic-bezier(.3,1.4,.5,1) backwards;animation-delay:calc(var(--z)*32ms + .1s);transition:scale .22s cubic-bezier(.3,1.4,.5,1)}
@keyframes klik{0%{opacity:0;scale:1.16;translate:0 -12px}60%{opacity:1}100%{scale:1;translate:0 0}}
@media (hover:hover){.held .t.mag:hover{scale:1.05}}
@media (prefers-reduced-motion:reduce){.wissel .laag{animation:none}.wissel .laag.eerst{opacity:1}.held .t.mag{animation:none;transition:none}}

/* geen losse woorden: knop op een regel, geboortemagneet op een regel op telefoon */
.knop{white-space:nowrap}
@media (max-width:360px){.knop{font-size:18px;padding-left:18px;padding-right:18px}}
@media (max-width:900px){.fig b{font-size:clamp(14px,4.35vw,19px);overflow-wrap:normal}}
@media (max-width:380px){.mailvlak{font-size:17px}}
@media (max-width:480px){.tekstvel h2{font-size:clamp(17px,5.2vw,22px);line-height:1.2}}