@font-face{font-family:'Kiwi Maru';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/kiwi-maru-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Kiwi Maru';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/kiwi-maru-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Kiwi Maru';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/kiwi-maru-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Kiwi Maru';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/kiwi-maru-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Zen Maru Gothic';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/zen-maru-gothic-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Zen Maru Gothic';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/zen-maru-gothic-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Zen Maru Gothic';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/zen-maru-gothic-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Zen Maru Gothic';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/zen-maru-gothic-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{
  --kop:'Kiwi Maru',serif; --kop-w:500; --kop-s:1; --kop-lh:1.14; --kop-ls:-.01em; --held-lh:1.08; --ws:0; --knop-s:1;
  --klein:'Kiwi Maru',serif; --klein-w:500;
  --groot:'Kiwi Maru',serif; --groot-w:500; --groot-s:1;
  --cijfer:'Kiwi Maru',serif; --cijfer-w:500;
  --tekst:'Zen Maru Gothic',sans-serif; --tekst-w:500; --tekst-ws:0; --tekst-lh:1.6;
}
:root{
  --ink:#43291C; --zacht:#7A6355; --wit:#fff;
  --munt:#1FAF8F; --roze:#FF7FA6; --lila:#A98BEE; --geel:#FFBE0B;
  --munt-l:#E3F6F1; --roze-l:#FFECF2; --lila-l:#F0EBFD; --geel-l:#FFF4CC;
  --zij:clamp(16px,5.6vw,72px);
  --rand:calc(max(0px,50vw - 720px) + var(--zij));
  --papier:#FFF5E6;--muur:#FFC98F;--muur-d:#F2B273;--tegel:#E8895A;--tegel-l:#F09C6C;--plint:#FFF0DC;
  --vu:calc(min(100vw,1440px)/1280);--wand:calc(var(--vu)*270);
}
@media (max-width:760px){:root{--vu:calc(100vw/640)}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papier);color:var(--ink);font:var(--tekst-w) 17px/var(--tekst-lh) var(--tekst);word-spacing:var(--tekst-ws);overflow-x:hidden;overflow-x:clip}
a{color:inherit}
h1,h2,h3{font-family:var(--kop);font-weight:var(--kop-w);line-height:var(--kop-lh);margin:0;letter-spacing:var(--kop-ls);text-wrap:balance}
p,li,small,figcaption,label,td,legend,.stappen span,.wijze span{text-wrap:pretty}
img{max-width:100%}
.fig{position:absolute;display:block;height:auto;pointer-events:none;max-width:none}
.fig.los{position:relative}
.stip{height:11px;background:url(tape.svg) repeat-x center/auto 100%}

h1,h2,h3,.logo,.knop,.nav,.onder b,.alle,.leeg p,.maten legend{word-spacing:var(--ws)}

/* kop */
.kop{display:flex;align-items:center;justify-content:space-between;padding:20px var(--rand) 14px;gap:20px}
.logo{display:block;font-family:var(--kop);font-weight:var(--kop-w);font-size:calc(30px*var(--knop-s));line-height:1.2;letter-spacing:var(--kop-ls);text-decoration:none;white-space:nowrap}
.nav{display:flex;gap:34px;align-items:center;font-family:var(--klein);font-weight:var(--klein-w)}
.nav a{text-decoration:none}
.nav a:hover{text-decoration:underline wavy var(--roze) 2px;text-underline-offset:6px}
.mandje{position:relative;display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.mandje img{width:34px;height:auto;display:block}
.mandje b{font-family:var(--cijfer);font-weight:var(--cijfer-w);background:var(--geel);min-width:24px;height:24px;line-height:24px;border-radius:12px;text-align:center;font-size:14px;padding:0 6px}

/* magneet */
.mag{position:relative;display:block;width:var(--w,100%);aspect-ratio:var(--r,1.5);border-radius:clamp(4px,3.2%,12px);
  box-shadow:0 .5px 0 rgba(67,41,28,.55),0 1.5px 1px rgba(67,41,28,.32),0 3px 3px rgba(67,41,28,.13),0 16px 26px -10px rgba(67,41,28,.34)}
.mag img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.mag::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(120deg,rgba(255,255,255,.16) 0,rgba(255,255,255,.05) 9%,rgba(255,255,255,0) 16%);
  box-shadow:inset 0 0 0 .5px rgba(67,41,28,.16),inset 0 1px 0 rgba(255,255,255,.55)}

/* knop */
.knop{display:inline-block;position:relative;border:0;cursor:pointer;background:var(--roze);color:var(--ink);font:var(--kop-w) calc(20px*var(--knop-s))/1 var(--kop);letter-spacing:var(--kop-ls);
  padding:18px 30px 19px;border-radius:16px 16px 16px 16px/18px 18px 14px 14px;text-decoration:none;transition:transform .15s}
.knop:hover{transform:translateY(-2px) rotate(-1deg)}

/* held */
.kop:has(+main>.held),.kop:has(+main>.ct),.kop:has(+main>.nfw),.held{background:var(--muur)}
.held{position:relative;--u:calc(min(100vw,1440px)/1280);--vloer:calc(var(--u)*92);--tg:calc(var(--u)*82);height:calc(var(--u)*750);overflow:hidden;overflow:clip visible}
.held::after{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--vloer);border-top:calc(var(--u)*12) solid var(--plint);border-bottom:calc(var(--u)*7) solid #D87448;
  background:repeating-conic-gradient(var(--tegel) 0 25%,var(--tegel-l) 0 50%) 0 0/var(--tg) var(--tg)}
.held-tekst{position:relative;z-index:5;padding:calc(var(--u)*38) 0 0 var(--rand);max-width:calc(var(--u)*690 + var(--rand))}
.held h1{font-size:calc(var(--u)*80*var(--kop-s));line-height:var(--held-lh)}
.held p{font-size:clamp(17px,calc(var(--u)*21),24px);line-height:1.5;margin:calc(var(--u)*22) 0 calc(var(--u)*28);max-width:calc(var(--u)*480)}
.toneel{position:absolute;z-index:2;left:max(0px,50vw - 720px);bottom:calc(var(--u)*26);width:calc(var(--u)*1280);height:calc(var(--u)*690)}
.sch{height:calc(var(--u)*13);bottom:calc(var(--u)*31);border-radius:50%;background:rgba(120,50,20,.34)}
.toneel>*{position:absolute}
.toneel.m{display:none}
.grond{display:none}
.kast{left:calc(var(--u)*1042);bottom:calc(var(--u)*39);width:calc(var(--u)*1000);height:calc(var(--u)*610);background:#BDEADF;border-radius:calc(var(--u)*46) 0 0 calc(var(--u)*14);box-shadow:calc(var(--u)*-10) 0 0 var(--muur-d),calc(var(--u)*-6) calc(var(--u)*7) 0 rgba(120,50,20,.28)}
.kast i{position:absolute;left:0;right:0;top:32%;height:calc(var(--u)*5);background:#fff}
.kast u{position:absolute;left:calc(var(--u)*24);width:calc(var(--u)*13);border-radius:9px;background:var(--ink)}
.kast u:nth-of-type(1){top:calc(32% - var(--u)*96);height:calc(var(--u)*72)}
.kast u:nth-of-type(2){top:calc(32% + var(--u)*30);height:calc(var(--u)*110)}

/* secties */
.sectie{padding:clamp(48px,7vw,92px) var(--zij) 0;max-width:1440px;margin:0 auto}
.titel{position:relative;margin-bottom:clamp(40px,5vw,64px)}
.titel h2{font-size:calc(clamp(32px,4.2vw,50px)*var(--kop-s));display:inline-block;position:relative}
.titel p{margin:8px 0 0;color:var(--zacht);max-width:34em}
.vel{display:grid;align-items:end;grid-template-columns:repeat(4,1fr);gap:clamp(44px,5.2vw,70px) clamp(28px,4.8vw,64px)}
.vel.klein{grid-template-columns:repeat(6,1fr);gap:clamp(36px,4vw,52px) clamp(20px,3vw,40px)}
.stuk{position:relative;text-decoration:none;display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:0}
.stuk .houder{align-self:end}
.stuk .onder{align-self:start}
.houder{position:relative;display:block;isolation:isolate;transform:rotate(var(--t,0deg));transition:transform .18s}
.stuk:hover .houder{transform:rotate(calc(var(--t,0deg)*-1)) translateY(-4px)}
.onder{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:16px}
.onder b{font:var(--klein-w) 19px/1.2 var(--klein)}
.onder span{color:var(--zacht);font-size:15px;white-space:nowrap}
.vel.klein .onder{display:block;margin-top:12px}
.vel.klein .onder b{font-size:16px;display:block}
.vel.klein .onder span{display:none}
.alle{display:inline-block;margin-top:clamp(36px,4vw,52px);font:var(--klein-w) 19px/1.3 var(--klein);text-underline-offset:5px;text-decoration-color:var(--roze);text-decoration-thickness:2px}

/* provincies: de kaart van c-1 op de deur van a-2 */
#provincies.sectie{--in:clamp(8px,1.8vw,24px);position:relative;padding:0;max-width:calc(1440px - var(--in)*2);margin:clamp(40px,5vw,64px) auto 0;width:calc(100% - var(--in)*2);background:#BDEADF;border-radius:clamp(26px,3.6vw,46px) clamp(26px,3.6vw,46px) 14px 14px;box-shadow:inset 0 -9px 0 #A6DDCF}
#provincies.sectie::before,#provincies.sectie::after{content:"";position:absolute;left:clamp(9px,1.5vw,20px);width:clamp(7px,1.05vw,13px);border-radius:9px;background:var(--ink)}
#provincies.sectie::before{top:clamp(24px,3.2vw,44px);height:clamp(40px,6vw,76px)}
#provincies.sectie::after{top:clamp(118px,13vw,178px);height:clamp(70px,12vw,170px)}
#provincies.sectie .titel{margin:0;padding:clamp(28px,3.6vw,46px) calc(var(--zij) - var(--in)) clamp(22px,3vw,38px);border-bottom:5px solid #fff}
#provincies.sectie .titel h2{font-size:calc(clamp(32px,4.2vw,50px)*var(--kop-s));text-wrap:balance}
.deurkaart{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.9fr);gap:clamp(24px,4vw,60px);align-items:start;padding:clamp(30px,3.6vw,48px) calc(var(--zij) - var(--in)) clamp(30px,3.6vw,48px)}
.deur-tekst{position:sticky;top:30px}
.deur-tekst p{margin:0;max-width:19em;font-size:18px}
.deur-fig{display:block;margin-top:clamp(40px,7vw,96px)}
.kaart{position:relative;--kb:calc(100%*.235);aspect-ratio:1/1.08;--mschaduw:0 .5px 0 rgba(20,80,66,.6),0 1.5px 1px rgba(20,80,66,.34),0 3px 3px rgba(20,80,66,.16),0 14px 20px -10px rgba(20,80,66,.5)}
.kaart .mag{box-shadow:var(--mschaduw)}
.kp{position:absolute;display:block;width:var(--kb);text-decoration:none}
.kp b{display:block;margin-top:9px;font:var(--klein-w) clamp(14px,1.25vw,16px)/1.2 var(--klein);white-space:nowrap}
.kp:hover .houder{transform:rotate(calc(var(--t,0deg)*-1)) translateY(-4px)}

/* landen: alle 42 op planken tegen een lila muur */
#landen.sectie{--pl:clamp(11px,1.3vw,16px);--gat:clamp(20px,3vw,40px);max-width:none;margin-top:clamp(64px,8vw,110px);padding:clamp(56px,6.4vw,84px) var(--rand) clamp(48px,5.4vw,72px);background:#DCD2F8;overflow:hidden;overflow:clip}
#landen .titel p{color:var(--ink)}
#landen .vel.klein{row-gap:clamp(36px,4.4vw,58px)}
#landen .vel.klein .onder{position:relative;z-index:1;margin-top:calc(var(--pl) + 12px)}
#landen .onder::before{content:"";position:absolute;left:calc(var(--gat)/-2 - 1px);right:calc(var(--gat)/-2 - 1px);top:calc(var(--pl)*-1 - 12px);height:var(--pl);background:linear-gradient(#EDB98A 0 34%,#C98657 34%);box-shadow:0 7px 0 #C6B8EE}
#landen .stuk:nth-child(6n+1) .onder::before{left:-100vw}
#landen .stuk:nth-child(6n) .onder::before,#landen .stuk:last-child .onder::before{right:-100vw}
#landen .houder{z-index:0}
#landen .mag{box-shadow:0 .5px 0 rgba(67,41,28,.5),0 1.5px 1px rgba(67,41,28,.28),5px 2px 7px -2px rgba(70,44,120,.4)}

/* overzicht: elke groep een eigen koelkastdeur */
.kast-deel{position:relative;background:var(--kl);margin:clamp(70px,8vw,100px) 0 0 max(12px,calc(var(--rand) - 44px));padding:clamp(34px,4.4vw,56px) var(--zij) clamp(44px,5vw,68px) clamp(40px,6vw,88px);border-radius:clamp(26px,3.6vw,46px) 0 0 clamp(10px,1.2vw,14px)}
.kast-deel:first-of-type{margin-top:44px}
.kast-deel::before{content:"";position:absolute;left:clamp(12px,2vw,26px);top:clamp(64px,8vw,110px);width:clamp(7px,1vw,13px);height:clamp(100px,14vw,200px);border-radius:9px;background:var(--ink)}
.kast-bin{max-width:1200px}
.kast-deel .titel{margin-bottom:clamp(28px,3.4vw,44px)}

/* zoeken */
.zoek{position:relative;flex:0 1 430px;min-width:min(100%,300px);scroll-margin-top:60px}
.zoek label{display:block;font:var(--klein-w) 16px/1.3 var(--klein);margin-bottom:4px}
.zoek input{width:100%;appearance:none;border:0;border-bottom:3px solid var(--ink);border-radius:0;background:none;padding:8px 0 10px;font:var(--klein-w) 24px/1.3 var(--klein);color:var(--ink);outline:0}
.zoek input::placeholder{color:#B5A196}
.zoek input:focus{border-bottom-color:var(--roze)}
.zoek-tal{margin:0;padding:0 var(--zij);max-width:1440px;margin-inline:auto;color:var(--zacht)}
.stuk[hidden],.kast-deel[hidden]{display:none}
#niets{max-width:min(640px,calc(100% - 2*var(--zij)));margin:48px auto 0}
#niets[hidden]{display:none}

/* vlaggen op gelijke hoogte: het vakje is 2:1, de breedste vlag vult het en de rest staat er links in */
.rij{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(30px,3.4vw,44px) clamp(14px,1.8vw,24px)}
.rij .houder{aspect-ratio:2/1}
.rij .mag{width:auto;height:100%;aspect-ratio:var(--r)}
.rij .onder{display:block;margin-top:12px}
.rij .onder b{display:block;font-size:clamp(15.5px,1.4vw,17px);white-space:normal}

/* korting */
.korting{--vl:clamp(56px,6.4vw,84px);--tg:clamp(40px,4.4vw,56px);margin-top:clamp(64px,8vw,110px);background:#FFD66B;padding:clamp(52px,6vw,80px) var(--zij) calc(var(--vl) - clamp(12px,1.5vw,20px));position:relative;overflow:hidden;overflow:clip}
.korting::after{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--vl);border-top:clamp(7px,.8vw,10px) solid var(--plint);border-bottom:clamp(4px,.5vw,6px) solid #D87448;
  background:repeating-conic-gradient(var(--tegel) 0 25%,var(--tegel-l) 0 50%) 0 0/var(--tg) var(--tg)}
.korting-bin{position:relative;z-index:1}
.korting-tekst p{text-wrap:balance}
.sch-k{position:absolute;left:50%;bottom:-5px;width:clamp(48px,6vw,82px);height:clamp(7px,.9vw,12px);margin-left:calc(clamp(48px,6vw,82px)/-2);border-radius:50%;background:rgba(120,50,20,.34);z-index:-1}
.toren,.nakomer{isolation:isolate}
.nakomer{position:relative;grid-column:1;grid-row:1;align-self:end;justify-self:start;width:clamp(100px,11vw,150px)}
.nakomer .sch-k{left:44%}
.korting-tekst{grid-column:1;grid-row:1}
.torens{grid-column:2;grid-row:1}
.korting-bin{max-width:1296px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,2fr);gap:40px;align-items:end}
.korting h2{font-size:calc(clamp(32px,4.2vw,50px)*var(--kop-s));margin-bottom:12px}
.korting-tekst{align-self:start}
.korting-tekst p{margin:0;max-width:22em}
.torens{display:grid;grid-template-columns:.8fr 1fr 1.2fr;gap:24px;align-items:end}
.toren{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}
.stapel{position:relative;width:100%}
.stapel .mag{position:absolute;left:50%}
.pct{font:var(--groot-w) calc(clamp(44px,5.4vw,68px)*var(--groot-s))/1 var(--groot);margin:0 0 2px}
.toren small{display:block;font-size:16px;margin-bottom:16px}
.pct-rij{text-align:center;order:-1;margin-bottom:18px}

/* drie maten: breedtes in echte verhouding, 5 : 8 : 10 */
#maten.sectie{--cm:calc((min(100vw,1440px) - var(--zij)*2)/25);--lat:clamp(78px,8.4vw,108px);max-width:none;margin-top:0;padding:clamp(56px,6.4vw,84px) var(--rand) 0;background:#FFC7D6;overflow:hidden;overflow:clip}
#maten .titel p{color:var(--ink);text-wrap:balance}
.drie{display:grid;grid-template-columns:calc(var(--cm)*5) calc(var(--cm)*8) calc(var(--cm)*10);gap:0 var(--cm);align-items:end}
.drie-b{position:relative;display:flex;flex-direction:column;align-items:center}
.drie-lijn{grid-column:1/-1;position:relative;height:var(--lat)}
.drie-lijn::after{content:"";position:absolute;top:0;bottom:0;left:calc(var(--rand)*-1);width:100vw;background:var(--geel);box-shadow:inset 0 3px 0 rgba(67,41,28,.14),inset 0 -7px 0 #EBA900;
  background-image:linear-gradient(to right,var(--ink) 0 2px,transparent 2px),linear-gradient(to right,rgba(67,41,28,.6) 0 1px,transparent 1px);
  background-size:var(--cm) 34%,calc(var(--cm)/2) 20%;background-repeat:repeat-x;background-position:var(--rand) 0,var(--rand) 0}
.drie-l{position:relative;margin:calc(var(--lat)*-1 + var(--lat)*.34 + 6px) 0 0;height:calc(var(--lat)*.66 - 6px);line-height:1.3}
.drie-l b{display:block;font:var(--cijfer-w) clamp(19px,2.2vw,24px)/1.25 var(--cijfer)}
.drie-l span{color:var(--ink);font-size:16px}

/* sets */
.sets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(36px,4vw,56px) clamp(22px,3vw,40px);align-items:start}
.setstuk{display:block;text-decoration:none}
.setstuk.breed{grid-column:1/-1}
.setstuk .onder{display:block;margin-top:14px}
.setstuk .onder b{display:block}
.setnamen{margin:16px 0 0;color:var(--zacht);font-size:15.5px;text-wrap:pretty}
.setdeur{position:relative;display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:clamp(10px,1.4vw,18px) clamp(8px,1.2vw,16px);aspect-ratio:4/3;background:var(--kl);padding:7% 6% 7% 10%;border-radius:clamp(20px,2.4vw,32px) clamp(8px,1vw,12px) clamp(8px,1vw,12px) clamp(8px,1vw,12px)}
.setstuk.breed .setdeur{aspect-ratio:auto;padding:clamp(30px,4vw,52px) clamp(22px,3vw,44px) clamp(30px,4vw,52px) clamp(46px,6vw,84px)}
.setdeur::before{content:"";position:absolute;left:3.4%;top:16%;width:clamp(6px,.8vw,10px);height:38%;border-radius:9px;background:var(--ink)}
.setdeur>a{display:block;flex:0 0 auto;width:calc((100% - (var(--kol) - 1)*clamp(8px,1.2vw,16px))/var(--kol) - 2px)}
.setdeur>.mag{--w:calc((100% - (var(--kol) - 1)*clamp(8px,1.2vw,16px))/var(--kol) - 2px);flex:0 0 auto;transform:rotate(var(--t,0deg))}
.setdeur>a .mag{transform:rotate(var(--t,0deg))}
.setsec{padding-top:clamp(10px,2vw,24px)}
.setprod{align-items:start}
.setprod .uitleg,.setprod .feitjes{text-wrap:pretty}
.ookset{margin:18px 0 0;font-size:15.5px;color:var(--zacht)}
.ookset a{color:var(--ink);text-decoration-color:var(--roze);text-decoration-thickness:2px;text-underline-offset:4px}

/* briefje */
.briefje-rij{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(32px,6vw,90px);align-items:center}
.briefje{position:relative;background:#fff;padding:44px clamp(24px,3.4vw,46px) 34px;transform:rotate(-.7deg);
  background-image:repeating-linear-gradient(to bottom,transparent 0 33px,#D9EFEA 33px 34px);background-position:0 41px;
  box-shadow:0 1px 1px rgba(67,41,28,.22),0 12px 24px -12px rgba(67,41,28,.26);border-radius:3px}
.briefje::before{content:"";position:absolute;top:-13px;left:50%;width:150px;height:28px;margin-left:-75px;transform:rotate(1.6deg);background:url(tape.svg) repeat-x center/auto 100%;opacity:.96}
.briefje p{margin:0;font-size:18px;line-height:34px}
.briefje h2{font-size:calc(27px*var(--kop-s));line-height:34px;margin-bottom:0}
.leeg{text-align:center}
.leeg img{width:min(240px,70%);height:auto}
.leeg p{margin:10px 0 0;font-family:var(--klein);font-weight:var(--klein-w)}
.leeg small{display:block;color:var(--zacht);font:var(--tekst-w) 15px var(--tekst)}

/* voet */
#weten.sectie{max-width:none;margin-top:0;padding:clamp(64px,7vw,92px) var(--rand) 0;background:var(--muur)}
#weten .briefje-rij{align-items:end;min-height:clamp(420px,38vw,500px)}
#weten .briefje{align-self:start}
#weten .leeg{position:relative;z-index:2;display:flex;flex-direction:column-reverse;align-items:center;margin-bottom:clamp(-30px,-2vw,-16px)}
#weten .leeg::after{content:"";order:-1;width:min(230px,70%);height:14px;margin-top:-9px;border-radius:50%;background:rgba(120,50,20,.34)}
#weten .leeg img{width:min(250px,76%);display:block}
#weten .leeg p{margin:0 0 16px}
#weten .leeg small{color:var(--ink);text-wrap:balance}
#weten .leeg[hidden]{display:none}
main:has(>#weten)+.voet{margin-top:0}
.voet{position:relative;--u:var(--vu);--eind:calc(var(--u)*216);background:var(--ink);color:#fff;margin-top:calc(var(--wand) + clamp(40px,5vw,72px));padding:clamp(100px,9vw,122px) var(--zij) 44px}
.voet::before{content:"";position:absolute;left:0;right:0;top:0;height:clamp(58px,6vw,78px);border-top:clamp(7px,.8vw,10px) solid var(--plint);
  background:repeating-conic-gradient(var(--tegel) 0 25%,var(--tegel-l) 0 50%) 0 0/clamp(40px,4.4vw,56px) clamp(40px,4.4vw,56px)}
.voet-loop{position:absolute;left:0;right:0;bottom:calc(100% - 26px);height:calc(var(--wand) + 26px);pointer-events:none;overflow:hidden;z-index:1;background:linear-gradient(var(--muur),var(--muur)) 0 0/100% var(--wand) no-repeat}
main:has(>#weten)+.voet .voet-loop{height:280px;background:none}
main:has(>#weten)+.voet .voet-loop::before,main:has(>#weten)+.voet .voet-loop::after{content:"";position:absolute;bottom:1px;height:13px;border-radius:50%;background:rgba(120,50,20,.34)}
main:has(>#weten)+.voet .voet-loop::before{left:calc(clamp(28px,8.4%,112px) + 8px);width:clamp(68px,7.4vw,96px)}
main:has(>#weten)+.voet .voet-loop::after{left:calc(var(--pl,25%) + 2px);width:clamp(40px,4.4vw,56px)}
.vp{left:var(--pl,25%)}
@media (max-width:760px){main:has(>#weten)+.voet{--pl:36%}}
.stoet{position:absolute;--til:calc(var(--u)*58);bottom:calc(var(--til) + 7px)}
.stoet .mag{z-index:2}
.stoet .fig{bottom:calc(var(--til)*-1)}
.sch-s{position:absolute;bottom:calc(var(--til)*-1 - 5px);height:calc(var(--u)*12);border-radius:50%;background:rgba(120,50,20,.34)}
.voet-loop .kast{left:auto;right:0;bottom:12px;position:absolute;width:calc(var(--u)*168);height:calc(var(--u)*248);border-radius:calc(var(--u)*30) 0 0 calc(var(--u)*6);box-shadow:calc(var(--u)*-6) 0 0 var(--muur-d)}
.voet-loop .kast i{top:30%;height:calc(var(--u)*4)}
.voet-loop .kast u{left:calc(var(--u)*14);width:calc(var(--u)*9)}
.voet-loop .kast u:nth-of-type(1){top:calc(30% - var(--u)*54);height:calc(var(--u)*40)}
.voet-loop .kast u:nth-of-type(2){top:calc(30% + var(--u)*18);height:calc(var(--u)*62)}
.voet-bin{max-width:1296px;margin:0 auto;display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:32px}
.voet a.lg{font-size:calc(32px*var(--knop-s));padding:0;margin-bottom:12px}
.voet p{margin:0;color:#E6D9D0;font-size:15.5px;max-width:30em}
.voet h2{font:var(--klein-w) 18px/1.2 var(--klein);letter-spacing:0;margin-bottom:8px;color:var(--geel)}
.voet a{display:block;text-decoration:none;color:#fff;padding:2px 0}
.voet a:hover{text-decoration:underline wavy var(--roze) 1.5px;text-underline-offset:4px}
.onderkant{max-width:1296px;margin:36px auto 0;color:#CDBBAF;font-size:14px}

/* product */
.pad{padding:8px var(--rand) 0;font-size:15px;color:var(--zacht)}
.pad a{text-decoration:none}
.prod{display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,1fr);gap:clamp(32px,5vw,76px);padding:20px var(--zij) 0;max-width:1440px;margin:0 auto;align-items:start}
.beeld{position:relative;--cm:calc(min(100vw,1440px)*.0445);height:calc(var(--cm)*10.2)}
.liniaal{position:absolute;left:0;bottom:0;width:calc(var(--cm)*10.6);height:calc(var(--cm)*1.04);background:var(--geel);border-radius:6px;
  background-image:repeating-linear-gradient(to right,var(--ink) 0 2px,transparent 2px var(--cm)),repeating-linear-gradient(to right,rgba(67,41,28,.6) 0 1px,transparent 1px calc(var(--cm)/2));
  background-size:100% 42%,100% 24%;background-repeat:no-repeat;background-position:calc(var(--cm)*.3) 0,calc(var(--cm)*.3) 0}
.liniaal span{position:absolute;bottom:5px;font:var(--cijfer-w) clamp(10px,1.1vw,14px)/1 var(--cijfer);transform:translateX(-50%)}
.drager{position:absolute;left:calc(var(--cm)*.3);transition:width .28s cubic-bezier(.3,1.3,.5,1),bottom .2s;width:calc(var(--cm)*var(--m,8));bottom:calc(var(--cm)*(1.04 + var(--til,2)));z-index:2}
.drager .mag{width:100%}
.dg{opacity:0;transition:opacity .15s;bottom:calc(var(--cm)*1.04)}
/* niet gevonden */
.nfw{--nk:clamp(150px,26vw,340px);position:relative;overflow:hidden;background:var(--muur);padding:clamp(20px,3vw,44px) var(--rand) calc(var(--wand) + 8px)}
.nf-tekst{position:relative;z-index:2;max-width:640px}
.nf-tekst .big{font:var(--groot-w) calc(clamp(96px,12vw,150px)*var(--groot-s))/1 var(--groot);display:flex;align-items:center;gap:6px}
.nf-tekst .big img{width:clamp(92px,11vw,140px);height:auto}
.nf-tekst h1{font-size:calc(clamp(34px,4.4vw,56px)*var(--kop-s));margin:10px 0 12px;text-wrap:balance}
.nf-tekst p{margin:0 0 24px;font-size:clamp(17px,1.6vw,20px);text-wrap:pretty}
.nf-kast{position:absolute;right:0;bottom:0;width:var(--nk);height:clamp(300px,calc(100% - 40px),640px);background:#BDEADF;border-radius:36px 0 0 0;box-shadow:calc(var(--vu)*-8) 0 0 var(--muur-d)}
.nf-kast i{position:absolute;left:0;right:0;top:30%;height:5px;background:#fff}
.nf-kast u{position:absolute;left:clamp(12px,1.8vw,24px);width:clamp(7px,.9vw,11px);border-radius:9px;background:var(--ink)}
.nf-kast u:nth-of-type(1){top:8%;height:16%}
.nf-kast u:nth-of-type(2){top:36%;height:22%}
.nf-gat{position:absolute;left:clamp(40px,5.6vw,74px);top:38%;width:clamp(66px,9.8vw,130px);aspect-ratio:1.5;border:3px dashed var(--ink);border-radius:8px;transform:rotate(2deg);opacity:.7}
main:has(>.nfw)+.voet{margin-top:0;--eind:calc(clamp(150px,26vw,340px) + 36px)}
main:has(>.nfw)+.voet .voet-loop{background:none}
main:has(>.nfw)+.voet .kast{display:none}
@media (max-width:760px){.nfw{padding:12px 16px calc(var(--wand) + 190px)}.nf-kast{height:calc(var(--wand) + 180px);--nk:150px}main:has(>.nfw)+.voet{--eind:164px}}
.beeld[data-m="5"] .d5,.beeld[data-m="8"] .d8,.beeld[data-m="10"] .d10{opacity:1}
.info h1{font-size:calc(clamp(36px,4.4vw,56px)*var(--kop-s));margin-bottom:12px}
.info h1 span,.m-kop h1 span{display:block;font-size:max(20px,.44em);color:var(--zacht);margin-top:4px;letter-spacing:0}
.info .uitleg{margin:0 0 22px}
.prijs{font:var(--groot-w) calc(clamp(44px,4.8vw,60px)*var(--groot-s))/1 var(--groot);margin:0 0 4px}
.prijs-ond{color:var(--zacht);font-size:15px;margin:0 0 24px}
.maten{border:0;padding:0;margin:0 0 22px;display:grid;grid-template-columns:repeat(3,1fr);gap:0;align-items:end;border-bottom:3px solid var(--ink)}
.maten legend{font:var(--klein-w) 18px var(--klein);padding:0;margin-bottom:12px}
.maat{appearance:none;background:none;border:0;padding:0 0 12px;font:var(--tekst-w) 16px/1.25 var(--tekst);color:var(--ink);cursor:pointer;text-align:left;position:relative}
.maat .mini{display:block;margin-bottom:10px}
.maat b{display:block;font:var(--cijfer-w) 20px var(--cijfer)}
.maat[aria-pressed="true"]::after{content:"";position:absolute;left:0;right:12px;bottom:-3px;height:7px;background:var(--roze);border-radius:4px 4px 0 0}
.aantal{display:flex;align-items:center;gap:14px;margin-bottom:26px;flex-wrap:wrap}
.tel{display:flex;align-items:center;gap:0}
.tel button{width:44px;height:44px;border:0;border-radius:50%;background:var(--geel-l);font:var(--cijfer-w) 22px var(--cijfer);color:var(--ink);cursor:pointer}
.tel output{width:44px;text-align:center;font:var(--cijfer-w) 22px var(--cijfer)}
.totaal{margin-left:auto;font:var(--cijfer-w) 20px var(--cijfer)}
.koop{position:relative;margin-top:44px}
.koop .knop{width:100%;text-align:center;font-size:calc(22px*var(--knop-s));padding:21px 20px 22px}
.staffel{list-style:none;margin:22px 0 0;padding:0;display:flex;justify-content:space-between;font-size:15.5px;color:var(--zacht)}
.feitjes{margin:20px 0 0;padding:16px 0 0;border-top:2px dotted #D8CBC3;font-size:15.5px;line-height:1.7;color:var(--zacht)}
.over{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);gap:clamp(32px,5vw,76px);align-items:center}
.over-fig{position:relative;height:150px}
@media (max-width:1360px){.vel .onder{display:block}.onder span{display:block}}
.onder b{white-space:nowrap}
.vel.klein .onder b{white-space:normal}
.m-bij{padding:0 var(--rand)}
.m-bij p{margin:0;color:var(--zacht)}
.spring{display:flex;gap:22px;margin-top:6px;font:var(--klein-w) 18px/1.3 var(--klein)}
.spring a{text-underline-offset:5px;text-decoration-color:var(--roze);text-decoration-thickness:2px}

@media (max-width:760px){
  body{font-size:16.5px}
  .kop{padding:14px 16px 8px}
  .logo{font-size:calc(25px*var(--knop-s))}
  .kop{flex-wrap:wrap;gap:6px 14px}
  .kop .logo{flex:1 1 60%}
  .nav{display:contents}
  .kop::after{content:"";order:2;flex-basis:100%;height:0}
  .kop{row-gap:2px;column-gap:12px}
  .nav a.t{order:3;font-size:15.5px;text-decoration:underline wavy var(--roze) 2px;text-underline-offset:6px;padding-block:6px}
  .nav a.t.z{display:none}
  .held{--u:calc(100vw/390);--vloer:calc(var(--u)*46);--tg:calc(var(--u)*48);height:auto;overflow:hidden}
  .stoet.s3{display:none}
  .voet{--eind:calc(var(--u)*190)}
  .held::after{border-top-width:calc(var(--u)*7);border-bottom-width:calc(var(--u)*4)}
  .held-tekst{padding:14px 16px 0;max-width:none}
  .held h1{font-size:calc(43px*var(--kop-s))}
  .held p{font-size:17px;margin:12px 0 18px}
  .toneel.g{display:none}
  .toneel.m{display:block;position:relative;left:auto;bottom:auto;width:100%;height:calc(var(--u)*312);margin-top:calc(var(--u)*-14)}
  .toneel.m .sch{height:calc(var(--u)*8);bottom:calc(var(--u)*25)}
  .titel h2{display:block}
  .mandje span{display:none}
  .toneel.m .kast{left:calc(var(--u)*290);bottom:calc(var(--u)*28.5);width:calc(var(--u)*130);height:calc(var(--u)*276);border-radius:calc(var(--u)*22) 0 0 calc(var(--u)*6);box-shadow:calc(var(--u)*-5) 0 0 var(--muur-d)}
  .toneel.m .kast u:nth-of-type(1){left:calc(var(--u)*10);width:calc(var(--u)*6);top:calc(32% - var(--u)*46);height:calc(var(--u)*34)}
  .toneel.m .kast u:nth-of-type(2){left:calc(var(--u)*10);width:calc(var(--u)*6);top:calc(32% + var(--u)*14);height:calc(var(--u)*50)}
  .toneel.m .kast i{height:3px}
  .vel{grid-template-columns:repeat(2,1fr);gap:40px 22px}
  .drie-l span{font-size:14px}
  .vel.klein{grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 16px}
  .rij{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 14px}
  .kast-deel>.fig{width:62px!important}
  .onder{display:block;margin-top:12px}
  .onder b{display:block;font-size:17px}
  #landen.sectie{--gat:16px}
  #landen .vel.klein{row-gap:30px}
  #landen .stuk:nth-child(n+22){display:none}
  #landen .stuk:nth-child(n) .onder::before{left:calc(var(--gat)/-2 - 1px);right:calc(var(--gat)/-2 - 1px)}
  #landen .stuk:nth-child(3n+1) .onder::before{left:-100vw}
  #landen .stuk:nth-child(3n) .onder::before,#landen .stuk:last-child .onder::before{right:-100vw}
  .kast-deel{margin-left:0;padding-left:30px;padding-right:14px}
  .kast-deel::before{left:10px}
  .sets{grid-template-columns:minmax(0,1fr)}
  .setdeur.veel{--kol:6!important}
  .setdeur.veel:is(*){padding:30px 12px 30px 26px}
  #provincies.sectie .titel,.deurkaart{padding-left:26px;padding-right:14px}
  .deurkaart{grid-template-columns:minmax(0,1fr);gap:22px;padding-bottom:30px}
  .deur-fig{display:none}
  .deur-tekst{position:static}
  .kaart{aspect-ratio:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 22px}
  .kp{position:static;width:auto}
  .kp b{font-size:17px;margin-top:10px}
  .korting-bin{grid-template-columns:1fr;gap:28px}
  .nakomer{display:none}
  .korting-tekst,.torens{grid-column:auto;grid-row:auto}
  .torens{gap:10px}
  .toren small{font-size:14.5px}
  .briefje-rij{grid-template-columns:1fr}
  #weten .briefje-rij{min-height:0;gap:30px}
  #weten .leeg{width:56%;margin:0 0 -12px auto}
  #weten .leeg p{font-size:15.5px}
  #weten .leeg small{font-size:13.5px}
  .voet-bin{grid-template-columns:1fr 1fr}
  .voet-bin>div:first-child{grid-column:1/-1}
  .prod,.over{grid-template-columns:minmax(0,1fr)}
  .beeld{--cm:calc((100vw - 32px)/10.6)}
  .info h1{font-size:calc(38px*var(--kop-s))}
  .wereld .info h1.lang{--h:calc(30px*var(--kop-s))}
  .titel{margin-bottom:26px}
  .m-kop{padding-bottom:6px}
  .m-bij+.sectie,.m-kop+.sectie{padding-top:30px}
  .leeg img{width:min(150px,44%)}
}
/* maatkeuze als drie echte knoppen, staffel als klikbare prijzen per stuk */
.maten{border-bottom:0;gap:10px;margin-bottom:18px}
.maat{display:flex;flex-direction:column;justify-content:flex-end;background:var(--geel-l);border-radius:14px;padding:12px 10px 10px 12px;min-height:100%;transition:transform .15s}
.maat:hover{transform:translateY(-2px)}
.maat .mini{margin-bottom:8px}
.maat[aria-pressed="true"]{background:var(--geel);box-shadow:0 0 0 3px var(--ink)}
.maat[aria-pressed="true"]::after{display:none}
.maten{align-items:stretch}
.info .uitleg{text-wrap:balance}
.feitjes{text-wrap:pretty}
.koop{margin-top:40px}
.staffel{display:grid;grid-template-columns:repeat(4,1fr);gap:0 8px;margin-top:18px;color:var(--ink);font-size:15.5px}
.staffel p{grid-column:1/-1;margin:0 0 6px;font:var(--klein-w) 16px var(--klein)}
.staffel button{appearance:none;border:0;background:none;padding:6px 2px 5px;cursor:pointer;color:var(--ink);text-align:left;font:inherit;line-height:1.25;border-bottom:3px solid #E6DBD3}
.staffel button b{display:block;font:var(--cijfer-w) 18px var(--cijfer)}
.staffel button span{color:var(--zacht);white-space:nowrap}
.staffel button[aria-pressed="true"]{border-bottom-color:var(--roze)}
.staffel button[aria-pressed="true"] span{color:var(--ink)}
@media (prefers-reduced-motion:no-preference){
  .wiebel{animation:wiebel 2.6s ease-in-out infinite;transform-origin:50% 100%}
  .stap{animation:stap .7s ease-in-out infinite alternate;transform-origin:50% 100%}
  .ademt{animation:ademt 3.6s ease-in-out infinite;transform-origin:50% 100%}
  @keyframes wiebel{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}
  @keyframes stap{from{transform:translateY(0) rotate(-1.5deg)}to{transform:translateY(-3px) rotate(1.5deg)}}
  @keyframes ademt{0%,100%{transform:scale(1,1)}50%{transform:scale(1.03,.96)}}
}

/* productwereld: de bovenkant van de pagina is de keuken waar de vlag naartoe gesjouwd wordt */
.wereld{--wm:#A9E5D6;--vloer:#62C8B0;--zacht:#55402F;position:relative;background:var(--wm);padding-bottom:46px}
.wereld.w-europa{--wm:#D6C8FB;--vloer:#AE93EE}
.wereld.w-wereld{--wm:#FFC9A6;--vloer:#F79A6B}
.wereld.w-set{--wm:var(--muur);padding-bottom:0}
.wereld.w-set::after{display:none}
main:has(>.wereld.w-set)+.voet{margin-top:0}
main:has(>.wereld.w-set)+.voet .voet-loop{background:none}
.wereld .setprod{align-items:start;padding-bottom:calc(var(--wand) + 8px)}
.wereld .setnamen{color:var(--ink)}
.wereld .setprod .info h1{font-size:calc(clamp(29px,3vw,38px)*var(--kop-s))}
.wereld::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46px;background:var(--vloer);border-top:3px solid var(--ink)}
.wereld .prod{align-items:end;padding-top:6px}
.wereld .beeld{align-self:end}
.wereld .tel button{background:#fff}
.wereld .mandje b{background:#fff}
.wereld .feitjes{border-top-color:rgba(67,41,28,.3);margin-top:12px;padding:10px 0 18px;font-size:15px;line-height:1.55;text-wrap:pretty}
.wereld .info{container-type:inline-size}
.wereld .info h1{--h:calc(clamp(36px,3.7vw,48px)*var(--kop-s));font-size:min(var(--h),calc(100cqi/(var(--n,1)*.68)));margin-bottom:6px;text-wrap:balance}
.wereld .info .uitleg{margin-bottom:12px;font-size:16px;line-height:1.5;text-wrap:balance}
.wereld .prijs{font-size:calc(clamp(40px,3.8vw,48px)*var(--groot-s));display:inline-block;margin:0 10px 0 0}
.wereld .prijs-ond{display:inline;margin:0}
.wereld .maten{margin:14px 0 12px}
.wereld .maten legend{margin-bottom:4px}
.wereld .aantal{margin-bottom:0}
.wereld .koop{margin-top:36px}
.wereld .koop .knop{padding:17px 20px 18px}
.wereld .staffel{margin-top:14px}
@media (max-width:760px){
  .wereld{padding-bottom:0}.wereld::after{display:none}
  .wereld .prod{gap:22px;padding-top:0}
  .wereld .beeld::after{content:"";position:absolute;left:-16px;right:-16px;bottom:-3px;height:3px;background:var(--ink)}
  .wereld .info h1{--h:calc(38px*var(--kop-s))}
  .wereld .prijs{display:block}.wereld .prijs-ond{display:block;margin-top:2px}
  .wereld .feitjes{padding-bottom:24px}
}
/* stickervel */
.vellen{display:grid;gap:18px;padding:0 var(--zij)}
.vel-rij{border-radius:18px;padding:22px clamp(14px,2.4vw,30px) 18px}
.vel-rij h2{font-size:calc(26px*var(--kop-s));margin-bottom:14px}
.stickers{display:grid;grid-template-columns:repeat(8,1fr);gap:8px 10px}
/* na In mandje */
.gelukt{position:fixed;right:clamp(16px,4vw,48px);bottom:24px;z-index:40;width:min(460px,calc(100vw - 32px));display:grid;grid-template-columns:96px minmax(0,1fr);gap:18px;align-items:center;background:#fff;padding:24px 20px 18px 18px;border-radius:4px;transform:translateY(calc(100% + 40px)) rotate(1.5deg);visibility:hidden;transition:transform .34s cubic-bezier(.3,1.25,.5,1),visibility 0s .34s;box-shadow:0 1px 1px rgba(67,41,28,.22),0 22px 40px -14px rgba(67,41,28,.45)}
.gelukt.open{transform:rotate(-.8deg);visibility:visible;transition:transform .34s cubic-bezier(.3,1.25,.5,1)}
.gelukt::before{content:"";position:absolute;top:-13px;left:50%;width:130px;height:26px;margin-left:-65px;transform:rotate(1.6deg);background:url(tape.svg) repeat-x center/auto 100%}
.gl-fig{width:100%;display:flex;flex-direction:column;align-items:center}
.gl-mag{display:block;width:100%;position:relative;z-index:2}
.gl-mag .mag{width:100%;transform:rotate(-3deg)!important}
.gl-fig>img{width:58px;height:auto;margin-top:-12px;display:block}
.gl-kop{margin:0;font:var(--klein-w) 19px/1.3 var(--klein);text-wrap:balance}
.gl-d{margin:6px 0 0;font-size:15.5px;line-height:1.4;color:var(--zacht);text-wrap:balance}
.gl-k{display:flex;align-items:center;gap:14px;margin-top:14px}
.gl-k .knop{font-size:calc(17px*var(--knop-s));padding:12px 14px 13px;white-space:nowrap}
.gl-v{appearance:none;border:0;background:none;padding:6px 0;font:var(--klein-w) 15px var(--klein);white-space:nowrap;color:var(--ink);cursor:pointer;text-decoration:underline;text-decoration-color:var(--roze);text-decoration-thickness:2px;text-underline-offset:4px}
.mandje.tikt b{animation:tikt .5s cubic-bezier(.3,1.6,.5,1)}
.mandje.tikt img{animation:mandwip .5s ease-out}
@keyframes tikt{0%{transform:scale(1)}40%{transform:scale(1.5)}100%{transform:scale(1)}}
@keyframes mandwip{0%,100%{transform:rotate(0)}30%{transform:rotate(-9deg)}65%{transform:rotate(6deg)}}
@media (max-width:760px){.gelukt{right:16px;bottom:16px;grid-template-columns:70px minmax(0,1fr);gap:12px;padding:22px 12px 14px 12px}.gl-fig>img{width:44px;margin-top:-9px}.gl-kop{font-size:18px}.gl-k{gap:9px}.gl-k .knop{font-size:calc(15px*var(--knop-s));padding:11px 10px 12px}.gl-v{font-size:14px}}
.st{position:relative;text-align:center;font-size:13.5px;color:var(--ink);line-height:1.2;display:flex;flex-direction:column;justify-content:flex-end;min-height:clamp(96px,11.5vw,146px)}
.st .sc{position:relative;display:block}
.st img.fig,.st img.m{position:relative;display:block;width:100%;height:auto;margin:0 auto}
.dc{filter:drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(0 1px 1px rgba(67,41,28,.22))}
/* het toneel groeit mee met de vorm van de vlag, en blijft op de computer binnen beeld */
.beeld{--cm:min(calc(min(100vw,1440px)*.0445),max(38px,calc((100vh - 170px)/var(--hoog))));height:calc(var(--cm)*var(--hoog))}
@media (max-width:760px){.beeld{--cm:calc((100vw - 32px)/10.6)}}
.proefrij{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:0 var(--zij)}
.proef{border-radius:14px;padding:22px 16px;display:flex;align-items:flex-end;gap:10px;justify-content:center;flex-wrap:wrap;min-height:96px}
.proef img{width:auto;height:40px;display:block}
.proef img.k{height:24px}
.vier{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,50px);padding:0 var(--zij);align-items:center}
/* over deze vlag: de vlag wordt erbij gesjouwd */
.over-fig.sjouw{height:auto;display:flex;flex-direction:column;align-items:center;border-bottom:3px solid var(--ink)}
.over-mag{position:relative;z-index:2;width:min(100%,clamp(150px,19vw,250px))}
.over-fig.sjouw .fig{margin-top:-10px;margin-bottom:-1px}
.over .briefje p{text-wrap:pretty}
@media (max-width:760px){.over{display:flex;flex-direction:column-reverse;gap:0}.over-fig.sjouw{width:46%;margin:0 10px -8px auto;border-bottom:0;z-index:2}}
.nf{position:relative;text-align:center;padding:30px 20px;border:2px dotted #D8CBC3;border-radius:18px}
.nf .big{font:var(--groot-w) calc(clamp(70px,10vw,120px)*var(--groot-s))/1 var(--groot);display:flex;align-items:center;justify-content:center;gap:4px}
.nf .big img{width:clamp(70px,9vw,110px);height:auto}
.nf p{margin:8px 0 0}
/* mandpagina: jouw vlaggen hangen al op de koelkast */
.keuken{--deur:min(44vw,620px);position:relative;background:var(--muur);overflow:clip}
.keuken .mandje b{background:#fff}
.keuken-bin{display:grid;grid-template-columns:minmax(0,1fr) var(--deur);gap:clamp(28px,4vw,56px);padding:clamp(14px,2vw,24px) 0 0 var(--rand);min-height:calc(100vh - 150px);align-items:stretch}
.keuken h1{font-size:calc(clamp(38px,4.6vw,56px)*var(--kop-s));margin-bottom:18px}
.mandkant{padding-bottom:calc(var(--wand) + 10px)}
.keuken .mandpagina{max-width:none;margin:0}
.keuken #mandregels:not(:empty){background:#fff;padding:12px clamp(16px,2.4vw,28px) 24px;border-radius:4px;transform:rotate(-.3deg);box-shadow:0 1px 1px rgba(67,41,28,.22),0 14px 26px -14px rgba(67,41,28,.4)}
.keuken .leeg{text-align:left;padding-top:10px}
.keuken .leeg img{width:200px}
.keuken .leeg small{color:#55402F;margin-bottom:18px}
.keuken .mandregel:last-of-type{border-bottom-style:dotted}
.keuken .mandtel{max-width:none;margin-left:auto}
.keuken+.voet{margin-top:0;--eind:calc(min(44vw,620px) + 30px)}
.keuken+.voet .voet-loop{background:none}
.keuken+.voet .kast{display:none}
.mdeur{position:relative;background:#BDEADF;--kcm:clamp(11px,1.32vw,17px);border-radius:clamp(26px,3vw,46px) 0 0 0;margin-top:clamp(20px,5vw,70px);padding:clamp(30px,3vw,44px) clamp(20px,3vw,44px) 150px clamp(46px,5vw,76px);box-shadow:inset 0 3px 0 rgba(255,255,255,.55),calc(var(--vu)*-8) 0 0 var(--muur-d)}
.mdeur>i{position:absolute;left:0;right:0;top:210px;height:5px;background:#fff}
.mdeur>u{position:absolute;left:clamp(14px,1.6vw,24px);width:13px;border-radius:9px;background:var(--ink)}
.mdeur>u:nth-of-type(1){top:96px;height:88px}
.mdeur>u:nth-of-type(2){top:244px;height:120px}
.deurvak{position:relative;display:flex;flex-wrap:wrap;gap:clamp(12px,1.5vw,20px) clamp(14px,1.7vw,24px);align-items:center}
.deurvak.vol{--kcm:clamp(8px,1vw,12px)}
.deurvak.heelvol{--kcm:clamp(6px,.72vw,9px);gap:8px 10px}
.deurpip{transition:opacity .2s}
.mdeur.vol .deurpip{display:none}
.mdeur:not(.vol) .deurfien{display:none}
@media (max-width:760px){
  .keuken{padding-bottom:calc(var(--wand) + 6px)}
  .keuken-bin{grid-template-columns:minmax(0,1fr);padding:6px 0 0;min-height:0;gap:0}
  .mandkant{display:contents}
  .keuken h1{padding:0 16px;order:1;margin-bottom:10px}
  .mdeur{order:2;margin:34px 0 0 16px;padding:22px 16px 76px 36px;--kcm:11.5px;border-radius:24px 0 0 0;min-height:210px}
  .mdeur>u{left:10px;width:8px}.mdeur>u:nth-of-type(1){top:40px;height:44px}.mdeur>u:nth-of-type(2){top:112px;height:70px}.mdeur>i{top:96px;height:3px}
  .keuken .mandpagina{order:3;padding:20px 16px 24px;position:relative;z-index:4}
  .keuken+.voet{--eind:calc(var(--u)*190)}
  .keuken+.voet .kast{display:block}
}
.m-kop{padding:clamp(24px,4vw,40px) var(--zij) 22px;display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap}
.m-kop h1{font-size:calc(clamp(36px,5.2vw,62px)*var(--kop-s));margin-bottom:8px}
.m-kop p{margin:0;color:var(--zacht);max-width:38em}
.m-t{font:var(--kop-w) calc(24px*var(--kop-s)) var(--kop);padding:42px var(--zij) 14px;margin:0}
/* koopbalk: op de telefoon altijd binnen duimbereik zolang de grote knop uit beeld is */
.koopbalk{display:none}
@media (max-width:760px){
  .koopbalk:not([hidden]){display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:12px;align-items:center;position:fixed;left:0;right:0;bottom:0;z-index:30;background:#fff;padding:10px 16px calc(10px + env(safe-area-inset-bottom));border-top:3px solid var(--ink)}
  .kb-t{min-width:0;line-height:1.25;font-size:15px;color:var(--zacht)}
  .kb-t b{display:block;font:var(--klein-w) 17px/1.2 var(--klein);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .koopbalk .knop{font-size:calc(18px*var(--knop-s));padding:14px 18px 15px;white-space:nowrap}
  body:has(.koopbalk) .voet{padding-bottom:110px}
}
@media (max-width:760px){
  .stickers{grid-template-columns:repeat(4,1fr)}
  .st{min-height:92px}
  .proefrij{grid-template-columns:1fr 1fr}
  .vier{grid-template-columns:1fr}
}
.logo img{display:block;height:46px;width:auto;max-width:100%}
.logo.lg img{height:52px}
@media (max-width:640px){.logo img{height:42px}}
@media (max-width:380px){.nav a.t{font-size:14px}.kop{column-gap:10px}}
@media (min-width:761px) and (max-width:1100px){.nav{gap:20px}.nav a.t{font-size:16px}}
@media (min-width:761px) and (max-width:920px){.nav{gap:14px}.nav a.t.z{display:none}.mandje span{display:none}.kop{gap:12px}}
/* afwerking */
[id]{scroll-margin-top:18px}
a:focus-visible,button:focus-visible{outline:3px solid var(--lila);outline-offset:3px;border-radius:8px}
.voet a:focus-visible{outline-color:var(--geel)}
.knop{box-shadow:0 4px 0 #E25F8B}
.knop:hover{box-shadow:0 6px 0 #E25F8B}
.knop:active{transform:translateY(3px);box-shadow:0 1px 0 #E25F8B}
.knop:disabled{box-shadow:none;transform:none}
.stuk:hover .onder b{text-decoration:underline wavy var(--roze) 2px;text-underline-offset:5px}
.stuk:focus-visible{outline-offset:8px}
.alle:hover,.pad a:hover{text-decoration:underline wavy var(--roze) 2px;text-underline-offset:5px}
.mini .mag,.maat .mini{transition:transform .16s}
.maat:hover .mini{transform:translateY(-3px) rotate(-2deg)}
.tel button{transition:background .12s,transform .1s}
.tel button:hover:not(:disabled){background:var(--geel)}
.tel button:active:not(:disabled){transform:scale(.92)}
.tel button:disabled{opacity:.45;cursor:default}
.koop.erin .knop{background:var(--munt);box-shadow:0 4px 0 #178C72;color:#fff}
.naar{display:block;text-align:center;margin-top:16px;font:var(--klein-w) 18px/1.3 var(--klein);text-underline-offset:5px;text-decoration-color:var(--roze);text-decoration-thickness:2px}
.naar[hidden]{display:none}
.m-kop{padding-inline:var(--rand)}
.leeg .knop{margin-top:20px}
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  .koop.erin .fig{animation:hup .5s ease-out}
  @keyframes hup{40%{transform:translateY(-12px) rotate(6deg)}}
}

/* overslaglink, hoofdinhoud */
.overslaan{position:absolute;left:12px;top:-60px;z-index:50;background:var(--ink);color:#fff;padding:10px 16px;border-radius:0 0 10px 10px;font:var(--klein-w) 16px/1.2 var(--klein);text-decoration:none}
.overslaan:focus{top:0}
main:focus{outline:none}
.wereld.wereld-kop{padding-bottom:0}
.wereld.wereld-kop::after{display:none}
/* vlagpagina: het beeld staat bovenaan naast de tekst en loopt mee tot op de vloer */
@media (min-width:761px){.wereld .prod{align-items:start}.wereld .prod>.beeld{align-self:start;position:sticky;top:14px}}
/* kop: mandje en zoekicoon met een tikvlak van 44 px, zoeken blijft te vinden als het woord wegvalt */
.mandje{min-height:44px;min-width:44px;justify-content:center;flex:none}
.zoekicoon{display:none;align-items:center;justify-content:center;width:44px;height:44px;color:var(--ink)}
.zoekicoon:hover{color:var(--roze)}
@media (max-width:920px){.zoekicoon{display:inline-flex}}

/* achtergrondpatroon: een keuze, drie regels. Tegels komen uit patroon/maak.py */
/* patroon-tegels: begin */
:root{
--p-slinger-l:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='288' height='216' viewBox='0 0 288 216'%3E%3Cpath d='M0 16Q144.0 76 288 16' fill='none' stroke='%23fff' stroke-opacity='0.216' stroke-width='1.8'/%3E%3Cpath d='M5.8 18.4L24.0 55.2L42.2 31.0ZM53.8 34.2L72.0 68.5L90.2 41.8ZM101.8 43.4L120.0 75.2L138.2 46.0ZM149.8 46.0L168.0 75.2L186.2 43.4ZM197.8 41.8L216.0 68.5L234.2 34.2ZM245.8 31.0L264.0 55.2L282.2 18.4Z' fill='%23fff' fill-opacity='0.155'/%3E%3Cpath d='M-144 124Q0.0 184 144 124' fill='none' stroke='%23fff' stroke-opacity='0.216' stroke-width='1.8'/%3E%3Cpath d='M-138.2 126.4L-120.0 163.2L-101.8 139.0ZM-90.2 142.2L-72.0 176.5L-53.8 149.8ZM-42.2 151.4L-24.0 183.2L-5.8 154.0ZM5.8 154.0L24.0 183.2L42.2 151.4ZM53.8 149.8L72.0 176.5L90.2 142.2ZM101.8 139.0L120.0 163.2L138.2 126.4Z' fill='%23fff' fill-opacity='0.155'/%3E%3Cpath d='M144 124Q288.0 184 432 124' fill='none' stroke='%23fff' stroke-opacity='0.216' stroke-width='1.8'/%3E%3Cpath d='M149.8 126.4L168.0 163.2L186.2 139.0ZM197.8 142.2L216.0 176.5L234.2 149.8ZM245.8 151.4L264.0 183.2L282.2 154.0ZM293.8 154.0L312.0 183.2L330.2 151.4ZM341.8 149.8L360.0 176.5L378.2 142.2ZM389.8 139.0L408.0 163.2L426.2 126.4Z' fill='%23fff' fill-opacity='0.155'/%3E%3C/svg%3E");--p-slinger-d:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='288' height='216' viewBox='0 0 288 216'%3E%3Cpath d='M0 16Q144.0 76 288 16' fill='none' stroke='%2343291C' stroke-opacity='0.047' stroke-width='1.8'/%3E%3Cpath d='M5.8 18.4L24.0 55.2L42.2 31.0ZM53.8 34.2L72.0 68.5L90.2 41.8ZM101.8 43.4L120.0 75.2L138.2 46.0ZM149.8 46.0L168.0 75.2L186.2 43.4ZM197.8 41.8L216.0 68.5L234.2 34.2ZM245.8 31.0L264.0 55.2L282.2 18.4Z' fill='%2343291C' fill-opacity='0.034'/%3E%3Cpath d='M-144 124Q0.0 184 144 124' fill='none' stroke='%2343291C' stroke-opacity='0.047' stroke-width='1.8'/%3E%3Cpath d='M-138.2 126.4L-120.0 163.2L-101.8 139.0ZM-90.2 142.2L-72.0 176.5L-53.8 149.8ZM-42.2 151.4L-24.0 183.2L-5.8 154.0ZM5.8 154.0L24.0 183.2L42.2 151.4ZM53.8 149.8L72.0 176.5L90.2 142.2ZM101.8 139.0L120.0 163.2L138.2 126.4Z' fill='%2343291C' fill-opacity='0.034'/%3E%3Cpath d='M144 124Q288.0 184 432 124' fill='none' stroke='%2343291C' stroke-opacity='0.047' stroke-width='1.8'/%3E%3Cpath d='M149.8 126.4L168.0 163.2L186.2 139.0ZM197.8 142.2L216.0 176.5L234.2 149.8ZM245.8 151.4L264.0 183.2L282.2 154.0ZM293.8 154.0L312.0 183.2L330.2 151.4ZM341.8 149.8L360.0 176.5L378.2 142.2ZM389.8 139.0L408.0 163.2L426.2 126.4Z' fill='%2343291C' fill-opacity='0.034'/%3E%3C/svg%3E");--p-slinger-s:288px 216px;
}
/* patroon-tegels: eind */
:root{--patroon:var(--p-slinger-l);--patroon-d:var(--p-slinger-d);--patroon-s:var(--p-slinger-s)}
body{background-image:var(--patroon-d);background-size:var(--patroon-s);background-position:center top}
body:has(.ka .blad){background-image:none}
.kop:has(+main>.held),.kop:has(+main>.ct),.kop:has(+main>.nfw),.held,.ct,.nfw,.keuken,.wereld,.kast-deel,.korting,#provincies.sectie,#landen.sectie,#maten.sectie,#weten.sectie{background-image:var(--patroon);background-size:var(--patroon-s);background-position:center top}
.kop:has(+main>.held),.kop:has(+main>.ct),.kop:has(+main>.nfw),.wereld.wereld-kop{background-position:center bottom}
.voet-loop{padding-bottom:26px;background-image:var(--patroon),linear-gradient(var(--muur),var(--muur));background-size:var(--patroon-s),100% var(--wand);background-repeat:repeat,no-repeat;background-position:center top,0 0;background-clip:content-box,border-box}

/* minder loze ruimte tussen de blokken */
.sectie{padding-top:clamp(36px,5.2vw,68px)}
.titel{margin-bottom:clamp(26px,3.4vw,44px)}
#provincies.sectie{margin-top:clamp(28px,3.6vw,44px)}
#landen.sectie{margin-top:clamp(40px,4.6vw,60px);padding-top:clamp(40px,4.8vw,64px);padding-bottom:clamp(36px,4.2vw,56px)}
.korting{margin-top:clamp(40px,4.6vw,60px);padding-top:clamp(40px,4.4vw,60px)}
#maten.sectie{padding-top:clamp(40px,4.6vw,60px)}
#weten.sectie{padding-top:clamp(44px,5vw,68px)}
@media (min-width:761px){#weten .briefje-rij{min-height:0;align-items:start}#weten .briefje{margin-bottom:clamp(190px,18vw,240px)}#weten .leeg{align-self:end}}
.kast-deel{margin-top:clamp(44px,5vw,64px)}
.voet{margin-top:calc(var(--wand) + clamp(28px,3.4vw,48px))}

/* de lege linkerkant van de provinciekaart: de hele set */
.deur-fig{margin-top:clamp(20px,2.6vw,34px)}
.deur-set{display:block;margin-top:clamp(18px,2.4vw,30px);max-width:320px;text-decoration:none;transform:rotate(-.8deg);transition:transform .18s}
.deur-set:hover{transform:rotate(.4deg) translateY(-3px)}
.deur-set .setdeur{aspect-ratio:auto;padding:14px 14px 14px 26px;border-radius:14px;box-shadow:0 1px 1px rgba(20,80,66,.25),0 12px 20px -12px rgba(20,80,66,.5)}
.deur-set .onder{display:block;margin-top:10px}
.deur-set .onder b{display:block;font:var(--klein-w) 18px/1.25 var(--klein)}
.deur-set .onder span{color:var(--ink);font-size:15px}
@media (max-width:760px){.deur-set{display:none}}

/* maatknoppen: past het echte formaat niet naast elkaar, dan onder elkaar */
.maten{grid-template-columns:repeat(3,minmax(0,1fr))}
.maat b{white-space:nowrap}
.wereld .prod:not(.setprod) .maat b{font-size:min(20px,calc(((100cqi - 20px)/3 - 22px)/5.9))}
@container (max-width:429px){
  .prod:not(.setprod) .maten{grid-template-columns:minmax(0,1fr);gap:8px}
  .prod:not(.setprod) .maat{flex-direction:row;align-items:center;justify-content:flex-start;gap:12px;padding:8px 14px 8px 10px;min-height:56px}
  .prod:not(.setprod) .maat .mini{flex:none;width:58px;margin:0;display:flex;align-items:center;justify-content:center}
  .prod:not(.setprod) .maat .mini .mag{width:calc(var(--w)*.58)}
  .wereld .prod:not(.setprod) .maat b{flex:1;font-size:19px}
}
/* heel smalle telefoon */
@media (max-width:340px){
  .titel h2,#provincies.sectie .titel h2{font-size:calc(28px*var(--kop-s))}
  .vel.klein .onder b{font-size:14px}
  .koopbalk:not([hidden]){grid-template-columns:44px minmax(0,1fr) auto;gap:8px;padding-inline:12px}
  .koopbalk .knop{font-size:calc(16px*var(--knop-s));padding:12px 12px 13px}
  .kb-t{font-size:13.5px}
  .gl-k{flex-wrap:wrap;gap:4px 14px}
  .briefje h2,.ka h2,.ka .blad h2{font-size:calc(23px*var(--kop-s))}
  .kast-deel{padding-left:24px;padding-right:10px}
  .vel.klein{column-gap:10px}
  .rij{column-gap:8px}
  .rij .onder b{font-size:14px}
  .ka .hr .knop{font-size:calc(17px*var(--knop-s));padding-inline:14px;white-space:nowrap}
  .ka .ovregel{grid-template-columns:46px minmax(0,1fr);gap:2px 10px}
  .ka .ovregel b{font-size:15px}
  .keuken .mandregel{grid-template-columns:62px minmax(0,1fr) auto;gap:6px 10px}
  .keuken .mandregel b{font-size:15.5px}
}

/* tikvlakken op de telefoon */
@media (max-width:760px){
  .logo{min-height:44px;display:inline-flex;align-items:center}
  .nav a.t{padding:11px 5px;margin:-5px -5px}
  .alle{padding-block:10px;translate:0 -10px}
  .voet a{padding:8px 0}
  .keuken .mandregel .tel button{width:44px;height:44px;min-width:44px}
  .ovaanpas{padding-block:12px}
}
.overslaan{padding-block:13px}
@media (max-width:340px){.keuken .mandregel .tel button{width:38px;height:38px;min-width:38px}.keuken .mandregel .tel output{width:30px}}

.feitjes{list-style:none}
ul.feitjes li{margin:0}
ul.feitjes a{color:inherit;text-decoration-color:var(--roze);text-decoration-thickness:2px;text-underline-offset:4px}
.sethint{margin:14px 0 0;font:var(--klein-w) 16px/1.35 var(--klein);color:var(--ink);text-wrap:pretty}
.setprod .ookset{margin-top:16px}
.staffel button span{display:block}
@media (max-width:420px){.staffel{gap:0 4px}.staffel button b{font-size:clamp(14px,4.4vw,17px)}.staffel button span{font-size:14px}}
.staffel button small{display:block;color:var(--zacht);font-size:13px;line-height:1.2}
.alleen-klein{display:none}
.held-tekst .held-korting{margin:14px 0 0;font:var(--klein-w) 16px/1.35 var(--klein);color:var(--ink);text-wrap:pretty}
@media (max-width:760px){.alleen-groot{display:none}.alleen-klein{display:inline}}
/* contact: de koelkast staat op de vloer en de stoet loopt ernaartoe */
.ct{--ck:min(52vw,640px);position:relative;overflow:hidden;background:var(--muur);padding:clamp(20px,3vw,36px) 0 0}
.ct-kast{position:relative;width:var(--ck);margin-left:auto;background:#BDEADF;border-radius:40px 0 0 0;box-shadow:calc(var(--vu)*-8) 0 0 var(--muur-d);padding:clamp(18px,2.4vw,26px) clamp(16px,3.4vw,44px) clamp(52px,6vw,76px) clamp(30px,5vw,70px)}
.ct-kast i{position:absolute;left:0;right:0;top:clamp(116px,12vw,136px);height:5px;background:#fff}
.ct-kast u{position:absolute;left:clamp(10px,1.6vw,22px);width:9px;border-radius:9px;background:var(--ink)}
.ct-kast u:nth-of-type(1){top:clamp(50px,5vw,60px);height:52px}
.ct-kast u:nth-of-type(2){top:clamp(136px,14vw,158px);height:96px}
.ct-boven{display:flex;align-items:center;gap:clamp(8px,1.6vw,20px);height:clamp(86px,8.6vw,100px);margin-bottom:clamp(44px,5vw,58px)}
.ct .briefje{transform:rotate(1deg);padding:52px clamp(22px,3vw,36px) 34px}
.ct .briefje::before{display:none}
.ct-vast{position:absolute;top:-26px;left:50%;width:72px;margin-left:-36px;transform:rotate(-3deg)}
.ct .briefje h1{font-size:calc(clamp(30px,3vw,36px)*var(--kop-s));line-height:34px;margin-bottom:0;padding-top:7px;min-height:68px}
.ct .briefje p{padding-bottom:17px;text-wrap:pretty}
.ct .briefje .ct-bedrijf{margin-top:18px;padding-bottom:0;font-size:15px;color:var(--zacht)}
.voet .bedrijf{margin-top:8px;font-size:14px;opacity:.82}
.ct h1{text-wrap:balance}
.ct .knop{font-size:calc(19px*var(--knop-s));padding-inline:22px}
main:has(>.ct)+.voet{margin-top:0;--eind:calc(min(52vw,640px) + 36px)}
main:has(>.ct)+.voet .voet-loop{background:none}
main:has(>.ct)+.voet .kast{display:none}
@media (max-width:760px){.ct{--ck:calc(100% - 32px);padding-inline:0}.ct-kast{margin-inline:auto;border-radius:40px 40px 0 0;padding-bottom:calc(var(--wand) + 16px)}.ct .briefje h1{font-size:calc(29px*var(--kop-s))}main:has(>.ct)+.voet{--eind:calc(var(--u)*50)}}

/* mandje */
.mandpagina{max-width:860px;margin-inline:auto}
.mandregel{display:grid;grid-template-columns:110px minmax(0,1fr) auto minmax(78px,auto);gap:14px 20px;align-items:center;padding:16px 0;border-bottom:2px dotted #D8CBC3}
.mandregel b{font:var(--klein-w) 19px/1.25 var(--klein);display:block}
.mandregel small{color:var(--zacht);font-size:15px}
.mandregel .tel button{min-width:36px}
.mandtel{margin:22px 0 0 auto;max-width:340px;display:grid;gap:6px;font-variant-numeric:tabular-nums}
.mandtel p{display:flex;justify-content:space-between;gap:20px;margin:0}
.mandtel .som{font:var(--klein-w) 24px/1.3 var(--klein);padding-top:8px}
.mandtel .knop{margin-top:14px;text-align:center;border:0;font:inherit;cursor:not-allowed;opacity:.72}
.mandtel small{color:var(--zacht);text-align:right}
.mandje b:empty{display:none}
.mandregel>.mag{justify-self:center}
.regelprijs{text-align:right;font-variant-numeric:tabular-nums}
.mandtel .duw{display:block;order:9;margin:10px 0 0;padding:10px 0 0;border-top:2px dotted #D8CBC3;font-size:15.5px;line-height:1.45;text-wrap:balance}
.mandtel .duw a{white-space:nowrap;text-decoration-color:var(--roze);text-decoration-thickness:2px;text-underline-offset:3px}
.keuken .mandpagina{container-type:inline-size}
@container (max-width:680px){
  .mandregel b{font-size:17px}
  .mandregel{grid-template-columns:84px minmax(0,1fr) auto;gap:6px 12px;padding:14px 0}
  .mandregel>.mag{grid-row:1/3}
  .mandregel>a{grid-column:2/4}
  .mandregel>a small{white-space:nowrap}
  .mandregel .tel{grid-column:2;grid-row:2}
  .mandregel .regelprijs{grid-column:3;grid-row:2}
  .mandregel .tel button{width:38px;height:38px;min-width:0}
  .mandregel .tel output{width:34px;font-size:19px}
}
/* een set staat als een blok in het mandje, los aanpassen klapt de vlaggen uit */
.mandset{display:grid;grid-template-columns:110px minmax(0,1fr) minmax(78px,auto);gap:10px 20px;align-items:center;padding:16px 0;border-bottom:2px dotted #D8CBC3}
.mandset b{font:var(--klein-w) 19px/1.25 var(--klein);display:block}
.mandset small{color:var(--zacht);font-size:15px}
.ms-rij{display:flex;justify-content:center}
.ms-rij img{flex:none;height:34px;width:auto;max-width:56px;margin-left:-26px;border-radius:3px;box-shadow:0 1px 4px rgba(67,41,28,.28);background:#fff}
.ms-rij img:first-child{margin-left:0}
.ms-knop{grid-column:2/4;display:flex;flex-wrap:wrap;gap:0 18px}
.ms-knop button{appearance:none;background:none;border:0;padding:8px 0;min-height:44px;font:inherit;font-size:15.5px;white-space:nowrap;color:var(--ink);cursor:pointer;text-decoration:underline;text-decoration-color:var(--roze);text-decoration-thickness:2px;text-underline-offset:3px}
.ms-regels{grid-column:1/-1;border-top:2px dotted #D8CBC3}
.ms-regels .mandregel:last-child{border-bottom:0;padding-bottom:0}
.mandbalk:not([hidden]){grid-template-columns:minmax(0,1fr) auto}
.setprod .prijs{display:block}
.setprod .prijs-ond{display:block;margin:2px 0 18px}
@container (max-width:680px){.mandset{grid-template-columns:84px minmax(0,1fr) auto;gap:2px 12px}.mandset b{font-size:17px}.mandset>a{grid-column:2/4}.ms-rij{grid-row:1/3}.ms-knop{grid-column:2;grid-row:2;gap:14px}.mandset .regelprijs{grid-column:3;grid-row:2}.ms-rij img{height:26px;max-width:44px;margin-left:-21px}}

/* kassa */
.ka{--fout:#B3261E;--goed:#14806A;--lijn:#D8CBC3;padding:clamp(12px,2vw,26px) var(--rand) 0}
.ka [hidden]{display:none !important}
.ka{container-type:inline-size}
.dank>div:first-child{container-type:inline-size}
.ka h1{font-size:min(calc(clamp(36px,5.2vw,62px)*var(--kop-s)),calc(100cqi/(var(--n,1)*.68)));overflow-wrap:anywhere;margin-bottom:clamp(20px,3vw,34px)}
.ka-form{display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start}
.ka-links{display:grid;gap:clamp(30px,4vw,44px);min-width:0}
.ka h2{font-size:calc(27px*var(--kop-s));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:16px}
.veld input,.veld select,.veld textarea{font:inherit;font-size:17px;min-height:50px;padding:10px 14px;border:2px solid var(--lijn);border-radius:13px;background:#fff;color:var(--ink);width:100%}
.veld textarea{min-height:96px;resize:vertical}
.veld input:focus-visible,.veld select:focus-visible,.veld textarea:focus-visible{outline:3px solid var(--munt);outline-offset:1px;border-color:var(--munt)}
.veld input.aangevuld{border-color:var(--munt)}
.veldfout{display:none;margin:0;color:var(--fout);font-size:14.5px;font-weight:700;line-height:1.3}
.fout>.veldfout{display:block}
.veld.fout input,.veld.fout textarea{border-color:var(--fout)}
.adresmelding{grid-column:1/-1;margin:0;color:var(--goed);font-size:15px;font-weight:700}
.wijzen{display:grid;grid-template-columns:repeat(auto-fit,minmax(176px,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 14px 12px 44px;border:2px solid var(--lijn);border-radius:14px;background:#fff;cursor:pointer}
.wijze input{position:absolute;left:14px;top:15px;width:20px;height:20px;margin:0;accent-color:var(--munt)}
.wijze b{font:var(--klein-w) 18px/1.3 var(--klein)}
.wijze span{color:var(--zacht);font-size:14px;line-height:1.3}
.wijze:has(input:checked){border-color:var(--roze);background:var(--roze-l)}
.wijze:has(input:focus-visible){outline:3px solid var(--munt);outline-offset:2px}
.wijzen.fout .wijze{border-color:var(--fout)}
.wijze[hidden]{display:none}
.wijze-logo{position:absolute;right:12px;bottom:10px;width:32px;height:24px}
.wijzen .veldfout{grid-column:1/-1}
.ka-bon{position:relative;background:var(--geel-l);border-radius:20px 20px 12px 12px;padding:22px clamp(16px,2.2vw,26px) 24px;display:grid;gap:10px;font-variant-numeric:tabular-nums}
@media (max-width:420px){.ovregel{grid-template-columns:58px minmax(0,1fr);gap:2px 12px}.ovregel .mag{grid-row:1/3}.ovprijs{grid-column:2}}
.ka-bon>.fig{right:26px;bottom:calc(100% - 5px);width:84px}
.ka-bonkop{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.ka-bonkop h2{margin:0}
.ka-bonkop span{color:var(--zacht);font-size:15px;white-space:nowrap}
.ovregels{list-style:none;margin:6px 0 0;padding:6px 2px 6px 0;display:grid;gap:12px}
.ovregel{display:grid;grid-template-columns:58px minmax(0,1fr) auto;gap:12px;align-items:center;line-height:1.3}
.ovregel .mag{justify-self:center;--w:54px}
.ovregel b{display:block;font:var(--klein-w) 16.5px/1.25 var(--klein);overflow-wrap:anywhere}
.ovregel small{display:block;color:var(--zacht);font-size:14px}
.ovprijs{white-space:nowrap}
.ovrij{display:flex;justify-content:center;width:100%;max-width:58px}
.ovrij img{width:34px;height:24px;object-fit:cover;border-radius:4px;margin-left:-22px;box-shadow:0 1px 3px rgba(67,41,28,.35);background:#fff}
.ovrij img:first-child{margin-left:0}
.ovlos{appearance:none;display:inline-flex;align-items:center;min-height:36px;margin:0;padding:0;border:0;background:none;cursor:pointer;color:inherit;font:inherit;font-size:15px;text-decoration:underline;text-decoration-color:var(--roze);text-decoration-thickness:2px;text-underline-offset:3px}
.ovsub{padding-left:22px}
.ovregel.ovset{grid-template-columns:50px minmax(0,1fr) auto;gap:12px 10px}
.ovset b{font-size:15.5px;overflow-wrap:normal;text-wrap:balance}
@media (max-width:420px){.ovregel.ovset{grid-template-columns:58px minmax(0,1fr)}.ovset .ovrij{grid-row:1/3}.ovset .ovprijs{grid-column:2}}
.ovaanpas{justify-self:start;display:inline-flex;align-items:center;min-height:36px;font-size:15px;text-underline-offset:3px;text-decoration-color:var(--roze);text-decoration-thickness:2px}
.ka-rij{display:flex;justify-content:space-between;gap:20px;margin:0}
.ka-rij small{display:block;color:var(--zacht);font-size:14px;font-weight:500}
.ka-rij.som{font:var(--klein-w) 24px/1.3 var(--klein);padding-top:10px;border-top:2px dotted var(--lijn);margin-top:2px}
.ka-rij.som small{font-family:var(--tekst)}
.akkoord{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;align-items:start;font-size:15.5px;line-height:1.45;cursor:pointer;margin-top:8px}
.akkoord input{width:22px;height:22px;margin:1px 0 0;accent-color:var(--munt)}
.akkoord.fout{color:var(--fout)}
.akkoord.fout input{outline:2px solid var(--fout);outline-offset:2px}
.kfout{margin:0;padding:10px 14px;border-radius:12px;background:#FFE3DF;color:#7A1510;font-weight:700;font-size:15px}
.kcode{display:flex;flex-direction:column;gap:6px}
.kcodelink{align-self:flex-start;background:none;border:0;padding:6px 0;min-height:44px;font:inherit;font-size:15px;color:inherit;text-decoration:underline;text-decoration-color:var(--roze);text-underline-offset:3px;cursor:pointer}
.kcodevak[hidden]{display:none}
.kcoderij{display:flex;gap:8px;min-width:0}
.kcoderij input{flex:1;min-width:0;text-transform:uppercase}
.kcoderij button{flex:none;min-height:48px;padding:0 14px;border:2px solid var(--ink);border-radius:12px;background:none;color:inherit;font:inherit;font-weight:700;cursor:pointer}
.kcodemeld{margin:0;color:var(--fout);font-size:15px;font-weight:700;line-height:1.3}
.kcodemeld.goed{color:#1F7A5C}
.kcodemeld[hidden]{display:none}
.ka-bon .knop{width:100%;text-align:center;font-size:calc(22px*var(--knop-s));padding:20px 20px 21px;margin-top:4px}
.ka-bon .knop[disabled]{cursor:progress;opacity:.7}
.ka-uitleg{margin:0;color:var(--zacht);font-size:14.5px;line-height:1.5}
.geenjs{margin-top:18px;padding:14px 18px;background:var(--geel-l);border-radius:14px}
@media (max-width:980px){.ka-form{grid-template-columns:minmax(0,1fr)}.ka-bon{margin-top:26px}}
@media (max-width:640px){.wijzen{grid-template-columns:minmax(0,1fr)}.wijze{min-height:58px;padding-right:56px}.wijze-logo{bottom:auto;top:50%;transform:translateY(-50%)}}
@media (max-width:420px){.velden{grid-template-columns:minmax(0,1fr)}}

/* bedankt */
.dank{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(170px,.8fr);gap:clamp(20px,5vw,72px);align-items:end}
.dank[data-b] .sjouw{display:none}
.dank[data-b="juicht"] .sj-juicht,.dank[data-b="wacht"] .sj-wacht,.dank[data-b="oei"] .sj-oei{display:block}
.sjouw{position:relative;width:min(100%,250px);justify-self:center}
.sjouw .mag{width:100%;transform:rotate(-1.5deg);z-index:2}
.sjouw .fig{margin:-16% auto 0;width:58%}
.sj-los .fig{margin:0 auto;width:66%}
.ka-testbalk{margin:0 0 14px;padding:8px 14px;border-radius:12px;background:var(--geel);font-weight:700;font-size:15px}
.bnummer{display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;padding:6px 16px;border-radius:999px;background:var(--munt-l);font-size:15.5px;color:var(--zacht)}
.bnummer b{color:var(--ink);letter-spacing:.04em;font-variant-numeric:tabular-nums}
.ka .inleiding{margin:0;font-size:18px;max-width:34em}
.stappen{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));counter-reset:stap}
.stappen li{position:relative;padding:44px 10px 0 0;font-size:15.5px;line-height:1.35}
.stappen li::before{counter-increment:stap;content:counter(stap);position:absolute;top:0;left:0;z-index:1;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font:var(--cijfer-w) 15px var(--cijfer);background:#fff;border:2px solid var(--lijn);color:var(--zacht)}
.stappen li::after{content:"";position:absolute;top:15px;left:32px;right:0;height:2px;background:var(--lijn)}
.stappen li:last-child::after{display:none}
.stappen li b{display:block;font:var(--klein-w) 17px/1.3 var(--klein)}
.stappen li span{display:block;color:var(--zacht);font-size:14px;margin-top:2px}
.stappen li.klaar::before{content:"";background:var(--munt) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat;border-color:var(--munt)}
.stappen li.klaar::after{background:var(--munt)}
.stappen li.nu::before{border-color:var(--roze);color:var(--ink);box-shadow:0 0 0 5px var(--roze-l)}
.dankduo{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(18px,3vw,34px);margin-top:clamp(26px,4vw,40px);align-items:start}
.dankregels,.dankadres{background:var(--geel-l);border-radius:18px;padding:20px clamp(16px,2.2vw,24px);display:grid;gap:10px;font-variant-numeric:tabular-nums}
.dankregels[hidden],.dankadres[hidden]{display:none}
.dankadres{background:var(--munt-l);line-height:1.5}
.dankadres h2,.dankregels h2{margin:0;font-size:calc(23px*var(--kop-s))}
.dankadres p{margin:0}
.dankadres small{color:var(--zacht);font-size:14px}
.dankbij{margin:16px 0 0;color:var(--zacht);font-size:15px}
.dankbij a{text-underline-offset:3px;text-decoration-color:var(--roze);text-decoration-thickness:2px}
.ka-knoppen{margin-top:22px}
@media (max-width:820px){.dankduo{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){
  .dank{grid-template-columns:minmax(0,1fr)}.sjouw{width:170px;order:-1}
}
@container (max-width:520px){
  .stappen{grid-template-columns:minmax(0,1fr);gap:14px}
  .stappen li{padding:3px 0 0 46px;min-height:32px}
  .stappen li::after{top:34px;bottom:-14px;left:15px;right:auto;width:2px;height:auto}
}
.confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:30}
.confetti i{position:absolute;top:-16px;width:9px;height:14px;border-radius:2px;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}}

/* herroepen */
.hr{display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start}
.hr form{display:grid;gap:14px;min-width:0}
.hr-keus{border:0;margin:0;padding:0;display:grid;gap:8px}
.hr-keus legend{font-weight:700;font-size:16px;padding:0;margin-bottom:6px}
.hr-keus label{display:flex;gap:10px;align-items:center;min-height:32px;cursor:pointer}
.hr-keus input{width:20px;height:20px;margin:0;accent-color:var(--munt)}
.hr .knop{justify-self:start}
.hr .knop[disabled]{cursor:progress;opacity:.7}
.hr-weg{position:absolute;left:-9999px}
.hr-wit .briefje p{font-size:17px}
.hr-klaar{background:var(--munt-l);border-radius:18px;padding:22px 24px}
.hr-klaar h2{margin-bottom:6px}
.hr-klaar p{margin:0}
@media (max-width:760px){.hr{grid-template-columns:minmax(0,1fr)}}

/* voorwaarden en privacy */
.blad{max-width:46em}
.blad h2{font-size:calc(26px*var(--kop-s));margin:34px 0 8px}
.blad h3{font-size:calc(20px*var(--kop-s));margin:22px 0 6px}
.blad p,.blad ul,.blad ol{margin:0 0 12px}
.blad .versie{color:var(--zacht);font-size:15px;margin-bottom:18px}
.blad .inleiding{font-size:18px;max-width:none}
.blad .modelformulier{background:var(--geel-l);border-radius:14px;padding:18px 20px;margin-top:12px}
.blad .modelformulier p:last-child{margin-bottom:0}
.hr+.blad{margin-top:clamp(30px,5vw,56px)}
.blad a{text-underline-offset:3px;text-decoration-color:var(--roze);text-decoration-thickness:2px}

/* mandje: de knop naar de kassa */
.mandtel a.knop{cursor:pointer;opacity:1;font:var(--kop-w) calc(20px*var(--knop-s))/1 var(--kop);padding:18px 22px 19px}