:root{
--paper:#FBFBF9; --sheet:#FFFFFF; --sunk:#F3F4F0;
--rule:#DEDFD8; --rule-strong:#C4C6BC;
--ink:#191C18; --ink-2:#4A4F46; --ink-3:#6A6F64;
--bota:#2F5D3A; --bota-bg:#E8F0E7; --bota-ink:#1D3F26;
--warn:#8A6410; --warn-bg:#F7EFD9;
--flag:#8C3A2B;
--ad:#EFEFEA; --ad-ink:#6B7065;
--tap:44px;
--kol:[full-start] max(16px,env(safe-area-inset-left)) [main-start] minmax(0,1fr) [main-end] max(16px,env(safe-area-inset-right)) [full-end];
--fan:1; --fan-org:clamp(266px, 170vw - 346px, 1200px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
font-family:Archivo,system-ui,sans-serif;font-size:16px;line-height:1.6;
font-variant-numeric:tabular-nums;overflow-x:hidden}
h1,h2,h3{font-family:Newsreader,Georgia,serif;font-weight:400;letter-spacing:-.01em;margin:0}
h1{font-size:clamp(30px,8.5vw,42px);line-height:1.06;letter-spacing:-.018em}
h2,.h2look{font-size:23px;line-height:1.2}
h3{font-size:18px}
a{color:var(--bota);text-underline-offset:3px;text-decoration-thickness:1px}
img{max-width:100%;display:block}
button{font:inherit;color:inherit}
.lat{font-family:Newsreader,serif;font-style:italic;color:var(--ink-3)}
.eyebrow{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--bota);font-weight:600;
display:inline-flex;align-items:center;gap:9px}
.eyebrow::after{content:"";width:34px;height:1px;background:var(--rule-strong)}
.sterren{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin:9px 0 4px;font-size:13.5px}
.st{position:relative;display:inline-block;font-size:16px;letter-spacing:2px;
color:var(--rule-strong);line-height:1;white-space:nowrap}
.st > b{position:absolute;left:0;top:0;overflow:hidden;width:var(--vul);color:#C98A1E;font-weight:400}
.sc{font-family:Newsreader,serif;font-size:19px;color:var(--ink)}
.sn,.sv{color:var(--ink-3)}
.sn a,.sv a{color:var(--ink-3)}
.sv{margin-left:auto;white-space:nowrap}
.sv a{color:var(--bota)}
.matchbox{margin:20px 0 0;max-width:34em}
@media(min-width:900px){.matchbox{margin:0}}
.match{display:flex;align-items:center;gap:13px;width:100%;padding:12px 14px;
border:1px solid var(--rule);border-radius:12px;background:var(--sheet);cursor:pointer;text-align:left}
.match:hover{border-color:var(--bota)}
.match[aria-expanded=true]{border-radius:12px 12px 0 0;border-bottom-color:transparent}
.mring{position:relative;width:42px;height:42px;flex:none;border-radius:50%;
background:conic-gradient(var(--bota) calc(var(--pct)*1%),var(--rule) 0)}
.mring::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--sheet)}
.mp{position:absolute;inset:0;display:grid;place-items:center;z-index:1;
font-size:13px;font-weight:600;color:var(--bota-ink)}
.mt2{display:flex;flex-direction:column;gap:2px;min-width:0}
.mt2 b{font-weight:600;font-size:14.5px}
.msub{font-size:12.5px;color:var(--ink-3)}
.mch{margin-left:auto;flex:none;width:9px;height:9px;
border-right:1.6px solid var(--ink-3);border-bottom:1.6px solid var(--ink-3);
transform:rotate(45deg) translateY(-3px);transition:transform .18s}
.match[aria-expanded=true] .mch{transform:rotate(-135deg) translateY(-1px)}
.matchuit[hidden]{display:none}
.matchuit{border:1px solid var(--rule);border-top:0;border-radius:0 0 12px 12px;
padding:4px 14px 13px;background:var(--sheet)}
.mgrond{list-style:none;margin:0;padding:0}
.mgrond li{display:grid;grid-template-columns:98px minmax(0,1fr) 104px;
gap:12px;align-items:center;padding:6px 0;font-size:13px}
.mgrond .mval{text-align:right}
.mlab{color:var(--ink-2)}
.mbar{height:5px;background:var(--rule);border-radius:99px;overflow:hidden}
.mbar i{display:block;height:100%;background:var(--bota);border-radius:99px}
.mbar.laag i{background:var(--flag)}
.mval{color:var(--ink-3);font-size:12px;white-space:nowrap}
.mvoet{font-size:12.5px;color:var(--ink-3);margin:11px 0 0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.page{display:grid;grid-template-columns:var(--kol)}
.page>*{grid-column:main}
.page>.full{grid-column:full}
.hoofd{grid-column:full;display:grid;grid-template-columns:var(--kol)}
.hoofd>*{grid-column:main;min-width:0}
.hoofd>.full{grid-column:full}
.cols,.rail,.body{display:block;min-width:0}
.aside,.asidebox{display:none}
.railbox{background:var(--sunk);border-radius:12px;padding:16px;margin:0 0 26px}
.railbox h3{font-size:15px;margin-bottom:9px}
.railbox ul{list-style:none;margin:0;padding:0;font-size:14.5px}
.railbox li{padding:8px 0;border-top:1px solid var(--rule)}
.railbox li:first-child{border-top:0}
.railbox a{text-decoration:none}
.railbox a:hover{text-decoration:underline}

.topbar{grid-column:full;display:grid;grid-template-columns:var(--kol);
background:var(--sheet);border-bottom:1px solid var(--rule);
position:sticky;top:0;z-index:40}
.topbar-in{grid-column:main;display:flex;align-items:center;gap:10px;padding:8px 0;min-height:59px}
.mark{font-family:Newsreader,serif;font-size:20px;white-space:nowrap;text-decoration:none;color:var(--ink)}
.mark b{font-weight:500;color:var(--bota)}
.topnav{margin-left:auto;display:flex;align-items:center;gap:3px}
.iconbtn{position:relative;min-width:var(--tap);min-height:var(--tap);display:grid;place-items:center;
background:none;border:0;border-radius:8px;cursor:pointer}
.iconbtn:hover{background:var(--sunk)}
.iconbtn[hidden]{display:none}
.iconbtn svg{width:21px;height:21px;stroke:var(--ink-2);stroke-width:1.6;fill:none;
stroke-linecap:round;stroke-linejoin:round}
.telb{position:absolute;top:6px;right:5px;min-width:17px;height:17px;padding:0 4px;border-radius:99px;
background:var(--flag);color:#fff;font-size:10px;font-weight:600;display:grid;place-items:center;line-height:1}
.telb[hidden]{display:none}
.zoekveld{display:none}
.inlogknop{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 16px;margin-left:5px;
border-radius:99px;border:1px solid var(--bota);background:var(--bota);color:#fff;
font-size:14px;cursor:pointer;white-space:nowrap}
.inlogknop:hover{background:var(--bota-ink)}
.inlogknop svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.avaknop{display:inline-flex;align-items:center;gap:9px;min-height:42px;padding:4px 13px 4px 4px;margin-left:5px;
border-radius:99px;border:1px solid var(--rule);background:var(--sheet);cursor:pointer;font-size:14px}
.avaknop:hover{border-color:var(--bota)}
.avaknop .ava{width:32px;height:32px;font-size:12px}
.avaknop .nm{display:none}
@media(min-width:620px){.avaknop .nm{display:inline}}
@media(max-width:419px){.topbar-in{gap:6px;min-width:0}.mark{font-size:18px;min-width:0;overflow:hidden}.topnav{gap:0}.topnav .iconbtn{min-width:40px}.avaknop{padding:4px;margin-left:3px}.inlogknop{padding:0 12px;margin-left:3px}}
@media(min-width:900px){
.zoekveld{display:flex;align-items:center;gap:9px;flex:1;max-width:430px;margin-left:20px;
min-height:40px;padding:0 13px;border:1px solid var(--rule);border-radius:99px;
background:var(--paper);color:var(--ink-3);font-size:14px;cursor:pointer;text-align:left;font-family:inherit}
.zoekveld:hover{border-color:var(--rule-strong);background:var(--sheet)}
.zoekveld svg{width:17px;height:17px;stroke:var(--ink-3);stroke-width:1.7;fill:none;stroke-linecap:round;flex:none}
.zoekveld span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zoekveld kbd{font-family:inherit;font-size:11px;padding:2px 7px;border:1px solid var(--rule);
border-radius:5px;background:var(--sheet);color:var(--ink-3);line-height:1}
.topbar-in nav .iconbtn.zoekicoon{display:none}
}

.crumbs{font-size:12px;color:var(--ink-3);padding:14px 0 0;display:flex;gap:6px;flex-wrap:wrap}
.crumbs a{color:var(--ink-3);text-decoration:none}
.crumbs a:hover{color:var(--bota)}

.hero,.page>.hero{grid-column:full}
.hero{display:grid;grid-template-columns:var(--kol);isolation:isolate}
.heroin{position:relative;display:grid;grid-column:full;min-width:0}
.heroin>*{grid-area:1/1;min-width:0}
.heroimg{margin:0;position:relative;height:clamp(300px,50vh,470px);
background:var(--sunk);overflow:hidden}
.heroimg .img{position:absolute;inset:0;display:grid;place-items:center;color:var(--ink-3);font-size:13px}
.heroimg img{position:absolute;inset:0;width:100%;height:100%;display:block;
object-fit:cover;object-position:var(--focus,50% 50%)}
.beeldbron{display:inline-flex;align-items:center;gap:5px}
.beeldbron::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.6}
.hero .scrim{z-index:1;pointer-events:none;
background:linear-gradient(to top,rgb(12 15 11 / .93) 0%,rgb(12 15 11 / .70) 26%,rgb(12 15 11 / .07) 62%),
linear-gradient(to right,rgb(12 15 11 / .52) 0%,rgb(12 15 11 / .12) 42%,rgb(12 15 11 / 0) 66%),
linear-gradient(to bottom,rgb(12 15 11 / .42) 0%,rgb(12 15 11 / 0) 30%)}
.herotekst{z-index:2;display:grid;grid-template-columns:var(--kol);
align-content:end;padding-bottom:clamp(20px,3.2vw,34px);pointer-events:none}
.herobinnen{grid-column:main;color:#fff;pointer-events:auto}
.hero h1{color:#fff;text-shadow:0 2px 22px rgb(0 0 0 / .38)}
.hero .eyebrow{display:inline-flex;color:#CFE6D2;margin-bottom:11px}
.hero .eyebrow::after{background:rgb(255 255 255 / .45)}
.hero .sterren{margin:13px 0 0}
.hero .sc{color:#fff}
.hero .st{color:rgb(255 255 255 / .34)}
.hero .sn,.hero .sv{color:rgb(255 255 255 / .78)}
.hero .sn a,.hero .sv a{color:#fff}
.hero .sv{margin-left:0}
.herocredit{z-index:2;align-self:start;justify-self:end;margin:0;
padding:14px max(16px,env(safe-area-inset-right)) 0 16px;
font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:rgb(255 255 255 / .80)}
.creditin{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.herocredit a{color:#fff}

/* 2026-09-02 (Rehmat/Jeroen): hero met een eigen foto. De hele foto staat boven, zonder
   donkere laag, en de titel zit op een witte kaart die over de onderrand van de foto valt.
   De klasse fotohero komt uit recept.php en staat er alleen als fotos/<slug>.jpg bestaat;
   pagina's zonder eigen foto houden de oude hero hierboven. */
/* z-index:1 (ronde 5): tijdens de trage fase zakt de kaart tot excess px na op de pagina en komt
   hij even over de tekst eronder te liggen; zonder dit zou hij eronder verdwijnen. */
.hero.fotohero{z-index:1}
.hero.fotohero .heroin{display:block}
/* fix 2026-09-02 (ronde 2): width:100% is hier nodig. Een grid-item met alleen aspect-ratio en
   een max-height krimpt in de breedte mee om de verhouding te houden, dus bleef de foto op brede
   schermen steken op 720 x 43/24 = 1290px. De max-height is er nu uit: de foto loopt altijd van
   rand tot rand en mag op grote schermen hoog zijn, de titelkaart vult het eerste scherm. */
.hero.fotohero .heroimg{width:100%;height:auto;aspect-ratio:43/24;max-height:clamp(420px,60vh,620px)}
/* fix 2026-09-02 (ronde 8, Rehmat): de kaart sprong op en neer rond het omslagpunt. Oorzaak: terwijl
   de kaart krimpt werd zijn plek in de opmaak ook kleiner, dus alles eronder schoof mee, en bij het
   vastzetten kwam de spacer met de grote hoogte terug: een sprong. Nu houdt .herotekst zelf de
   grote hoogte vast als sleuf (--kaartslot, recept.js meet die bij p = 0) en krimpt de kaart daar
   bovenaan in. De spacer neemt dezelfde sleufhoogte over, dus de pagina verschuift nergens. */
.hero.fotohero .herotekst{position:relative;z-index:2;align-content:start;
padding-bottom:0;margin-top:-64px;height:var(--kaartslot,auto)}
/* 2026-09-02 (ronde 7, Rehmat/Jeroen): het krimpen en groeien volgt nu de scroll. recept.js zet
   --krimp (0 tot 1) op de hero en alle maten en kleuren hieronder rekenen daar rechtstreeks mee.
   Er staat daarom geen transition meer op die eigenschappen: de scroll is de tijdlijn.
   p = 0 is de grote kaart, p = 1 de vaste balk. Zonder JS blijft var(--krimp,0) op 0 staan, dus dan
   ziet de pagina er precies zo uit als voorheen. De transition die hier nog staat is alleen
   voor het intro (opacity en transform), dat blijft gewoon op tijd lopen. */
.hero.fotohero .herobinnen{max-width:none;border-radius:12px;
display:grid;grid-template-columns:minmax(0,1fr);align-items:center;
padding:calc(20px - 12px * var(--krimp,0)) calc(20px - 6px * var(--krimp,0)) calc(22px - 14px * var(--krimp,0));
min-height:calc(48px * var(--krimp,0));
background:var(--sheet);
background:color-mix(in srgb,var(--sheet) calc((1 - var(--krimp,0)) * 100%),rgb(16 20 15 / .55));
color:var(--ink);
color:color-mix(in srgb,var(--ink),#fff calc(var(--krimp,0) * 100%));
box-shadow:inset 0 1px 0 rgb(255 255 255 / calc(.28 * var(--krimp,0))),
0 0 0 1px rgb(255 255 255 / calc(.18 * var(--krimp,0))),
0 12px 33px rgb(0 0 0 / calc(.10 + .14 * var(--krimp,0)));
transition:opacity .6s ease .15s,transform .6s ease .15s}
/* de blur staat pas aan zodra er iets te morphen valt: op de telefoon is de grote kaart wit en
   dan is een backdrop-filter over de hele paginaduur zonde van het werk */
.hero.fotohero.morf .herobinnen{
-webkit-backdrop-filter:blur(calc(18px * var(--krimp,0))) saturate(calc(1 + .2 * var(--krimp,0)));
backdrop-filter:blur(calc(18px * var(--krimp,0))) saturate(calc(1 + .2 * var(--krimp,0)))}
/* kinderen liggen normaal onder elkaar (grid van een kolom); .rij legt titel en cijfers op een regel
   (twee kolommen, wisselt op p >= .6). Grid en niet flex: bij width:fit-content telt een flex-container
   die omloopt de breedte van alle kinderen bij elkaar op, een grid neemt het breedste kind (ronde 15). */
.hero.fotohero .herobinnen>*{min-width:0}
.hero.fotohero.rij .herobinnen{gap:0 12px;grid-template-columns:minmax(0,1fr) auto}
.hero.fotohero.rij h1{animation:none;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero.fotohero.rij .sterren{flex:0 0 auto;margin:0 0 0 auto;white-space:nowrap;font-size:13px}
.hero.fotohero.rij .eyebrow,.hero.fotohero.rij .st,.hero.fotohero.rij .sv{display:none}
/* de titel blijft heel rustig bewegen: 5px van boven naar onder in 6s. De uitslag krimpt mee
   met p, dus bij de vaste balk staat hij stil. */
@keyframes titelzweef{from{transform:translateY(calc(-2.5px * (1 - var(--krimp,0))))}
to{transform:translateY(calc(2.5px * (1 - var(--krimp,0))))}}
.hero.fotohero h1{--h1groot:clamp(30px,8.5vw,42px);--h1klein:20px;
color:var(--ink);text-shadow:none;
color:color-mix(in srgb,var(--ink),#fff calc(var(--krimp,0) * 100%));
font-size:calc(var(--h1groot) * (1 - var(--krimp,0)) + var(--h1klein) * var(--krimp,0));
line-height:calc(1.06 + .04 * var(--krimp,0));
animation:titelzweef 6s ease-in-out infinite alternate}
.hero.fotohero .eyebrow{color:var(--bota);overflow:hidden;
opacity:clamp(0,calc(1 - var(--krimp,0) * 1.8),1);
max-height:calc(3em * (1 - var(--krimp,0)));margin-bottom:calc(8px * (1 - var(--krimp,0)))}
.hero.fotohero .eyebrow::after{background:var(--rule-strong)}
.hero.fotohero .sterren{margin:calc(9px * (1 - var(--krimp,0))) 0 0}
.hero.fotohero .sc{color:var(--ink);
color:color-mix(in srgb,var(--ink),#fff calc(var(--krimp,0) * 100%))}
.hero.fotohero .st{color:var(--rule-strong)}
.hero.fotohero .sn,.hero.fotohero .sv{color:var(--ink-3);
color:color-mix(in srgb,var(--ink-3),#fff calc(var(--krimp,0) * 100%))}
.hero.fotohero .sn a,.hero.fotohero .sv a{color:var(--bota);
color:color-mix(in srgb,var(--bota),#fff calc(var(--krimp,0) * 100%))}
.hero.fotohero .herocredit{position:absolute;top:0;right:0;z-index:3;
padding:12px max(12px,env(safe-area-inset-right)) 0 12px;
font-size:11px;letter-spacing:.03em;text-transform:none;color:var(--ink-2)}
.hero.fotohero .creditin{background:rgb(255 255 255 / .85);backdrop-filter:blur(8px);
border-radius:99px;padding:6px 12px;gap:9px}
.hero.fotohero .herocredit a{color:var(--ink-2)}
/* beweging: recept.js zet .anim bij het plaatsen van de <img> en .scherp zodra hij geladen is */
.hero.fotohero.anim .heroimg img{filter:blur(14px);transform:scale(1.04);
transition:filter .8s ease,transform .8s ease}
.hero.fotohero.anim.scherp .heroimg img{filter:none;transform:none}
.hero.fotohero.anim .herobinnen{opacity:0;transform:translateY(16px)}
.hero.fotohero.anim .herocredit{opacity:0;transition:opacity .6s ease .15s}
.hero.fotohero.anim.scherp .herobinnen{opacity:1;transform:none}
.hero.fotohero.anim.scherp .herocredit{opacity:1}
/* 2026-09-02 (ronde 3, Rehmat/Jeroen): parallax, alleen als de foto hoger is dan het venster.
   recept.js zet dan .parallax en schuift de laag met de foto langzamer mee dan de pagina, zodat
   de kaart en de tekst eroverheen glijden. De parallax loopt door zolang er iets van de foto in
   beeld staat (ronde 4). recept.js rekent daarvoor --parschuif uit: de hoogte van de foto maal
   de factor, precies zoveel extra hoogte als de laag maximaal opschuift, dus er komt nooit een
   lege band in beeld; .heroimg houdt overflow:hidden. De <img> houdt zijn eigen intro-transform
   (blur/scale), de parallax staat op de laag eromheen: twee elementen, ze zitten elkaar dus niet
   in de weg. Kaart en fotocredit hangen aan .heroin en blijven staan waar ze staan. */
.hero.fotohero.parallax .heroimg .img{top:calc(-1 * var(--parschuif,0px));bottom:auto;
height:calc(100% + var(--parschuif,0px));will-change:transform}
/* 2026-09-02 (ronde 5, Rehmat/Jeroen): de kaart zelf blijft bovenaan hangen, op elk apparaat.
   Zodra zijn bovenkant de lijn onder de vaste balk raakt, zet recept.js .vast op de hero: dan
   gaat .herotekst op position:fixed en krimpt .herobinnen tot een balk van een regel. De hoogte
   die de kaart in de opmaak innam wordt overgenomen door .herospacer (recept.js zet de hoogte),
   dus er verspringt niets. Vanaf 1100px staat .herotekst toch al absoluut en is de spacer niet
   nodig. Ronde 7: .vast doet alleen nog het echte vastzetten. Hoe de kaart eruitziet komt
   volledig uit --krimp, en die staat op dat moment op 1, dus het overnemen kost geen sprong. */
.herospacer{display:none}
.hero.fotohero.vast .herospacer{display:block;margin-top:-64px;height:var(--kaartslot,0px)}
.hero.fotohero.vast{z-index:35}
/* ronde 6: 12px lucht tussen de zoekbalk en de titelbalk, dus 60 + 12 = 72px. recept.js gebruikt
   dezelfde 72 als omslagpunt, zodat de balk precies overneemt waar de kaart zou komen. */
.hero.fotohero.vast .herotekst{position:fixed;top:72px;left:0;right:0;bottom:auto;height:auto;
z-index:35;margin-top:0;padding-bottom:0}
.hero.fotohero.vast h1{animation:none}
.onthullen .onthul{opacity:0;transform:translateY(12px);
transition:opacity .5s ease,transform .5s ease}
.onthullen .onthul.in{opacity:1;transform:none}

.onderhero{padding-top:22px}
.meta{padding-top:2px}
.acts .rechts{margin-left:0}
.lede{color:var(--ink-2);margin:0;font-size:17.5px}

.facts{display:flex;flex-wrap:wrap;gap:0;margin:18px 0 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.fact{flex:1 1 33%;min-width:96px;padding:11px 0;border-right:1px solid var(--rule);text-align:center}
.fact:last-child{border-right:0}
.pnote{font-size:13px;color:var(--ink-3);margin:10px 0 0;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pnote[hidden]{display:none}
.pnote button{background:none;border:0;padding:0;font-size:13px;color:var(--bota);
text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.fact dt{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.fact dd{margin:2px 0 0;font-size:15px;min-height:24px}
.fact.anker dt{color:var(--bota)}
.fact.anker dd{font-family:Newsreader,serif;font-size:23px;line-height:1.05;color:var(--bota-ink);
min-height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.fact.anker dd small{font-family:Archivo,sans-serif;font-size:11px;color:var(--ink-3);
margin-top:3px;font-variant-numeric:tabular-nums}
@media(min-width:900px){
.fact.anker dd{align-items:flex-start}
.fact.anker:last-child dd{align-items:flex-end}
}

.byline{display:flex;align-items:center;gap:11px;padding:14px 0;border-bottom:1px solid var(--rule);
min-height:80px}
.ava{width:38px;height:38px;border-radius:50%;background:var(--bota-bg);color:var(--bota-ink);
display:grid;place-items:center;font-size:13px;font-weight:600;flex:none}
.byline .who{font-size:14px}
.byline .sub{font-size:12.5px;color:var(--ink-3)}
.cooked{margin-left:auto;background:var(--bota-bg);color:var(--bota-ink);font-size:12px;
padding:5px 10px;border-radius:999px;white-space:nowrap;font-weight:500}

.bijgewerkt{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:0;
padding:11px 0;border-bottom:1px solid var(--rule);font-size:13px;color:var(--ink-2);
min-height:106px}
@media(min-width:560px){.bijgewerkt{min-height:76px}}
@media(min-width:900px){.bijgewerkt{min-height:47px}}
.bijgewerkt svg{width:15px;height:15px;flex:none;stroke:var(--bota);stroke-width:1.8;fill:none;
stroke-linecap:round;stroke-linejoin:round}
.bijgewerkt time{font-weight:600;color:var(--ink)}
.bijgewerkt .door{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;
padding:3px 9px;border-radius:99px;background:var(--sunk);color:var(--ink-3);white-space:nowrap}
.bijgewerkt .door.assistent{background:var(--warn-bg);color:var(--warn)}
.bijgewerkt .door.lezers{background:var(--bota-bg);color:var(--bota-ink)}
.bijgewerkt a{margin-left:auto;white-space:nowrap;font-size:12.5px}

.acts{display:flex;gap:6px;padding:10px 0;border-bottom:1px solid var(--rule);overflow-x:auto;scrollbar-width:none}
.acts::-webkit-scrollbar{display:none}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:var(--tap);padding:0 13px;
background:var(--sheet);border:1px solid var(--rule);border-radius:999px;font-size:13.5px;
white-space:nowrap;cursor:pointer}
.chip:hover{border-color:var(--rule-strong)}
.chip[aria-pressed=true]{background:var(--bota-bg);border-color:var(--bota);color:var(--bota-ink)}
.chip.hoofd{background:var(--bota);border-color:var(--bota);color:#fff;font-weight:500}
.chip.hoofd:hover{background:var(--bota-ink);border-color:var(--bota-ink)}
.chip.hoofd[aria-pressed=true]{background:var(--bota-bg);border-color:var(--bota);color:var(--bota-ink)}
.chip svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}

section{padding:26px 0;border-bottom:1px solid var(--rule)}
.sechead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:16px}

.portie{display:flex;align-items:center;gap:10px}
.step{width:34px;height:34px;border:1px solid var(--rule-strong);background:var(--sheet);
border-radius:8px;font-size:19px;line-height:1;cursor:pointer}
.step:hover{background:var(--sunk)}
.portie output{font-size:14.5px;min-width:64px;text-align:center}

.spec{list-style:none;margin:0;padding:0}
.spec li{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:0 10px;
align-items:baseline;padding:11px 0;border-top:1px solid var(--rule)}
.spec li:first-child{border-top:0}
.spec input[type=checkbox]{width:19px;height:19px;accent-color:var(--flag);margin:0;grid-row:1/3;align-self:center;cursor:pointer}
.spec .nm{font-size:16px}
.spec .qt{font-size:14px;color:var(--ink-2);white-space:nowrap}
.spec .mt{grid-column:2/4;font-size:12.5px;color:var(--ink-3);display:flex;gap:8px;flex-wrap:wrap}
.spec li.groep{grid-template-columns:minmax(0,1fr) auto;padding:16px 0 6px;
border-top:1px solid var(--rule);align-items:center}
.spec li.groep:first-child{border-top:0;padding-top:0}
.spec li.groep .gn{grid-column:1;font-size:13px;font-weight:600;letter-spacing:.05em;
text-transform:uppercase;color:var(--ink-2)}
.spec li.groep.uit .gn{text-decoration:line-through;color:var(--flag)}
.spec li.groep .uitknop{grid-column:2;grid-row:1;width:28px;height:28px}
.spec li.groep{cursor:default}
.spec li.lid .nm{padding-left:2px}
.spec li.lid + li.lid{border-top:1px solid var(--rule)}
.spec li.uit .nm{color:var(--flag);text-decoration:line-through;text-decoration-thickness:1.5px}
.spec li.uit .nm a{color:var(--flag);text-decoration:line-through}
.spec li.uit .qt{color:var(--flag);text-decoration:line-through}
.spec li.uit .mt,.spec li.uit .mt .lat,.spec li.uit .mt span{color:var(--flag);opacity:.6}
.spec li.uit .alt-t{opacity:.4}
.spec li:not(.groep) .nm{cursor:pointer}
.uitknop{grid-column:2;grid-row:1/3;align-self:center;width:30px;height:30px;padding:0;
border:1px solid var(--rule);background:var(--paper);border-radius:50%;cursor:pointer;
display:grid;place-items:center;color:var(--ink-3);font-size:15px;line-height:1}
.uitknop:hover{border-color:var(--flag);color:var(--flag)}
.spec li.uit .uitknop{border-color:var(--flag);color:var(--flag);background:#fff}
.new{color:var(--bota);font-weight:500;text-decoration:none;
border-bottom:1px dotted var(--rule-strong)}
.new:hover{border-bottom-color:var(--bota)}
body.uitgelogd .new{display:none}
.alrt{display:inline-grid;place-items:center;width:17px;height:17px;margin-left:6px;
border-radius:50%;background:var(--flag);color:#fff;font-size:11px;font-weight:700;
text-decoration:none;border:0;vertical-align:1px}

.alt-t{grid-column:4;grid-row:1/3;align-self:center;width:30px;height:30px;padding:0;
border:1px solid var(--bota);background:var(--bota-bg);border-radius:50%;cursor:pointer;
display:grid;place-items:center}
.alt-t svg{width:15px;height:15px;stroke:var(--bota);stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}
.alt-t.warn{border-color:var(--warn);background:var(--warn-bg)}
.alt-t.warn svg{stroke:var(--warn)}
.alt-t[aria-expanded=true]{background:var(--bota);border-color:var(--bota)}
.alt-t[aria-expanded=true] svg{stroke:#fff}
.alt-t.warn[aria-expanded=true]{background:var(--warn);border-color:var(--warn)}

.alt[hidden]{display:none}
.alt{grid-column:1/-1;margin:11px 0 2px;padding:12px 14px;border-radius:10px;
background:var(--bota-bg);font-size:14px;color:var(--bota-ink);line-height:1.55}
.alt.warn{background:var(--warn-bg);color:var(--warn)}
.alt .why{display:block;font-weight:600;margin-bottom:4px}
.alt .src{display:block;font-size:12.5px;margin-top:7px;opacity:.85}
.alt .src a{color:inherit}
.alt .swapbtn{margin-top:11px;min-height:36px;padding:0 14px;border-radius:99px;border:0;
background:var(--bota);color:#fff;font-size:13.5px;cursor:pointer}
.alt.warn .swapbtn{background:var(--warn)}
.spec li.swapped{background:var(--bota-bg);border-radius:10px;padding-inline:10px}
.swaptag{font-size:12px;color:var(--bota);font-weight:500}
.flash{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(14px);
z-index:90;background:var(--ink);color:var(--paper);border-radius:99px;
padding:10px 18px;font-size:14px;display:flex;gap:14px;align-items:center;
opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;
box-shadow:0 8px 26px rgb(0 0 0 / .25);white-space:nowrap;max-width:92vw}
.flash.aan{opacity:1;transform:translateX(-50%) translateY(0)}
.flash b{font-weight:600}
.flash .op{color:#8FD39F}
.flash .neer{color:#F0A9A0}
@media(prefers-reduced-motion:reduce){.flash{transition:none}}

.note{background:var(--bota-bg);border-left:3px solid var(--bota);padding:13px 15px;margin-top:16px;font-size:14.5px;color:var(--bota-ink)}
.note strong{font-weight:600}

.btnrow{display:flex;gap:9px;margin-top:18px}
.btn{flex:1;min-height:var(--tap);border-radius:9px;border:1px solid var(--rule-strong);
background:var(--sheet);font-size:15px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:7px;
text-decoration:none;color:var(--ink);padding:0 14px;font-family:inherit}
.btn:hover{background:var(--sunk)}
.btn-fill{background:var(--bota);border-color:var(--bota);color:#fff}
.btn-fill:hover{background:var(--bota-ink)}
.btn svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}

ol.method{list-style:none;counter-reset:s;margin:0;padding:0}
ol.method li{counter-increment:s;display:grid;grid-template-columns:30px minmax(0,1fr);gap:14px;padding:14px 0;border-top:1px solid var(--rule)}
ol.method li:first-child{border-top:0}
ol.method li::before{content:counter(s,decimal-leading-zero);font-family:Newsreader,serif;
font-size:18px;color:var(--bota);padding-top:1px}
.amt{color:var(--ink-3);font-size:14px}
.ingref{font:inherit;color:var(--bota);background:none;border:0;padding:0;cursor:pointer;
text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px;
text-decoration-color:var(--rule-strong)}
.ingref:hover{text-decoration-style:solid;text-decoration-color:var(--bota)}
.ingref.uit{color:var(--flag);text-decoration:line-through;text-decoration-color:currentColor;
text-decoration-thickness:1.5px}
.ingref.uit + .amt{text-decoration:line-through;color:var(--flag);opacity:.75}
.tecref{color:inherit;text-decoration:underline;text-decoration-thickness:1px;
text-underline-offset:3px;text-decoration-color:var(--rule-strong)}
.tecref:hover{text-decoration-color:var(--ink);text-decoration-thickness:2px}
ol.method li.overslaan .tecref{opacity:.9}

.spec li.knip{animation:knipper 1.1s ease-out}
@keyframes knipper{0%,100%{background:transparent}22%{background:var(--bota-bg)}}
@media(prefers-reduced-motion:reduce){.spec li.knip{animation:none}}
body.hide-amt .amt{display:none}
.stapfoto{grid-column:2;margin:13px 0 3px;max-width:340px}
.stapfoto img{width:100%;height:auto;border-radius:12px;border:1px solid var(--rule);background:var(--sunk)}
.stapfoto figcaption{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
margin-top:6px;font-size:12px;color:var(--ink-3)}
.illtag{font-size:10px;letter-spacing:.08em;text-transform:uppercase;background:var(--sunk);
color:var(--ink-3);padding:3px 8px;border-radius:99px}
ol.method.flow .stapfoto{display:none}
@media(min-width:900px){
ol.method li:has(.stapfoto){grid-template-columns:30px minmax(0,1fr) auto}
ol.method .stapfoto{grid-column:3;grid-row:1;width:236px;margin:2px 0 0 24px;max-width:none}
}
ol.method.flow{display:block;font-size:16.5px;line-height:1.75}
ol.method.flow li{display:inline;padding:0;border-top:0}
ol.method.flow li::before{content:"";padding:0}
ol.method.flow li+li::before{content:" "}
ol.method.flow br{display:none}
ol.method.flow .timer{margin:0 0 0 6px;vertical-align:baseline}
.seg{display:inline-flex;border:1px solid var(--rule-strong);border-radius:999px;overflow:hidden;background:var(--sheet)}
.seg button{min-height:42px;padding:0 16px;border:0;background:none;font-size:13.5px;cursor:pointer;color:var(--ink-2)}
.seg button+button{border-left:1px solid var(--rule)}
.seg button[aria-pressed=true]{background:var(--bota-bg);color:var(--bota-ink);font-weight:500}
.toolrow{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:16px}
.toolrow .seg,.toolrow .chip{height:var(--tap);min-height:var(--tap)}
.toolrow .chip{padding:0 15px}

.watch{display:block;margin-top:9px;font-size:14px;color:var(--warn);
background:var(--warn-bg);border-left:3px solid var(--warn);padding:9px 12px}
.watch b{font-weight:600}
.watch a{color:var(--warn);font-weight:500}
ol.method.flow .watch{display:inline-block;margin:8px 0}
.gewijzigd{display:inline-block;font-size:11px;letter-spacing:.04em;color:var(--bota);
background:var(--bota-bg);padding:1px 7px;border-radius:99px;margin-left:6px;
text-decoration:none;vertical-align:1px;white-space:nowrap}
.gewijzigd:hover{background:var(--bota);color:#fff}
.wijzig{list-style:none;margin:0;padding:0;font-size:14px}
.wijzig li{padding:10px 0;border-top:1px solid var(--rule)}
.wijzig li:first-child{border-top:0}
.wijzig .w-kop{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.wijzig .w-lab{font-size:11px;letter-spacing:.04em;color:var(--bota);background:var(--bota-bg);
padding:1px 7px;border-radius:99px}
.wijzig .w-d{color:var(--ink-2);font-size:13.5px;margin-top:4px}
.wijzig .w-d a{color:var(--bota)}

.mist{list-style:none;margin:0;padding:0}
.mist li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:12px;padding:13px 0;border-top:1px solid var(--rule)}
.mist li:first-child{border-top:0}
.mist .n{font-family:Newsreader,serif;font-size:19px;color:var(--warn)}
.mist .h{font-weight:500}
.mist .d{color:var(--ink-2);font-size:15px}
.mist .src{font-size:12.5px;color:var(--ink-3);margin-top:4px}

.reacties{list-style:none;margin:0;padding:0}
.rc{border-top:1px solid var(--rule);padding:15px 0}
.rc:first-child{border-top:0}
.rc:target{background:var(--bota-bg);margin-inline:-12px;padding-inline:12px;border-radius:10px}
.rc .hd{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:8px}
.rc .who{font-size:14.5px;font-weight:500}
.rc .when{font-size:12.5px;color:var(--ink-3)}
.rc p{margin:0;color:var(--ink-2)}
.tag{font-size:12px;padding:3px 9px;border-radius:99px;white-space:nowrap}
.tag-fix{background:var(--bota-bg);color:var(--bota-ink);font-weight:500}
.tag-ver{background:var(--sunk);color:var(--ink-3)}
.tag-made{background:var(--sunk);color:var(--ink-2)}
.rc .link{display:inline-block;margin-top:8px;font-size:13px}
.stale{font-size:12.5px;color:var(--ink-3);font-style:italic;margin-top:7px}
.rst{position:relative;display:inline-block;font-size:13.5px;letter-spacing:1.5px;
color:var(--rule-strong);line-height:1;white-space:nowrap}
.rst > b{position:absolute;left:0;top:0;overflow:hidden;width:var(--vul);color:#C98A1E;font-weight:400}
.rc .cijf{font-size:12.5px;color:var(--ink-3)}
.schrijf{margin-top:18px;border:1px solid var(--rule);border-radius:12px;background:var(--sheet)}
.schrijf > summary{padding:12px 15px;font-size:14.5px;min-height:0;font-weight:500}
.schrijf .fbody{padding:4px 15px 16px}
.sterkies{display:flex;gap:5px;align-items:center;margin:0 0 13px}
.sterkies button{width:34px;height:34px;padding:0;border:0;background:none;cursor:pointer;
font-size:23px;line-height:1;color:var(--rule-strong)}
.sterkies button.aan{color:#C98A1E}
.sterkies .uitleg{font-size:13px;color:var(--ink-3);margin-left:6px}
.schrijf textarea{width:100%;min-height:96px;padding:11px 13px;font:inherit;font-size:14.5px;
border:1px solid var(--rule-strong);border-radius:9px;background:var(--paper);
color:var(--ink);resize:vertical}
.schrijf .keuzes{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0 0}
.schrijf .keuzes button{font:inherit;font-size:13px;padding:7px 12px;border-radius:99px;
border:1px solid var(--rule);background:var(--paper);cursor:pointer;color:var(--ink-2)}
.schrijf .keuzes button[aria-pressed=true]{background:var(--warn-bg);border-color:var(--warn);color:var(--warn)}
.schrijf .fvoet{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px}
.schrijf .fvoet p{font-size:12.5px;color:var(--ink-3);margin:0;flex:1;min-width:180px}
.timer{display:inline-flex;align-items:center;gap:6px;margin-top:7px;font-size:13px;
color:var(--bota);background:var(--bota-bg);border:0;padding:6px 12px;border-radius:999px;cursor:pointer}
.timer:hover{background:var(--bota);color:#fff}
.timer svg{width:14px;height:14px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.timer[data-loopt]{background:var(--bota);color:#fff}

.klokken{position:fixed;right:14px;bottom:calc(136px + env(safe-area-inset-bottom));z-index:95;
display:flex;flex-direction:column-reverse;gap:9px;max-width:min(272px,88vw)}
.klok{background:var(--ink);color:var(--paper);border-radius:17px;padding:12px 14px;
box-shadow:0 12px 34px rgb(0 0 0 / .30);display:grid;
grid-template-columns:auto minmax(0,1fr) auto auto;gap:0 11px;align-items:center}
.wijzer{position:relative;width:46px;height:46px;border-radius:50%;
background:conic-gradient(#8FD39F calc(var(--p,100)*1%), rgb(255 255 255 / .16) 0)}
.wijzer::before{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--ink)}
.wijzer::after{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;
margin:-2.5px 0 0 -2.5px;border-radius:50%;background:var(--paper);z-index:2}
.wijzer i{position:absolute;left:calc(50% - 1px);top:10px;width:2px;height:13px;border-radius:2px;
background:var(--paper);transform-origin:50% 100%;z-index:1;
transform:rotate(calc((100 - var(--p,100))*3.6deg));transition:transform 1s linear}
.wijzer b{position:absolute;inset:8px;border-radius:50%;
background:repeating-conic-gradient(rgb(255 255 255 / .30) 0 1.4deg, transparent 1.4deg 30deg);
-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 0);
mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 0)}
.klokt{min-width:0}
.klok .nm{display:block;font-size:12.5px;opacity:.72;line-height:1.3;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.klok .tijd{display:block;font-family:Newsreader,serif;font-size:29px;line-height:1.12;
font-variant-numeric:tabular-nums}
.klok button{width:32px;height:32px;padding:0;border:0;border-radius:50%;cursor:pointer;
background:rgb(255 255 255 / .14);color:var(--paper);display:grid;place-items:center}
.klok button:hover{background:rgb(255 255 255 / .26)}
.klok button svg{width:15px;height:15px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round}
.klok.af{background:var(--flag)}
.klok.af .wijzer{background:rgb(255 255 255 / .28)}
.klok.af .wijzer::before{background:var(--flag)}
.klok.af .tijd{animation:klopje 1s ease-in-out infinite}
@keyframes klopje{0%,100%{opacity:1}50%{opacity:.45}}
@media(prefers-reduced-motion:reduce){.klok.af .tijd{animation:none}.wijzer i{transition:none}}
.naarboven{position:fixed;right:14px;bottom:calc(84px + env(safe-area-inset-bottom));z-index:94;
width:46px;height:46px;border-radius:50%;border:1px solid var(--rule);background:var(--sheet);
display:grid;place-items:center;cursor:pointer;color:var(--ink-2);
box-shadow:0 4px 16px rgb(0 0 0 / .12);
opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .2s,transform .2s}
.naarboven.zicht{opacity:1;pointer-events:auto;transform:none}
.naarboven:hover{border-color:var(--bota);color:var(--bota)}
.naarboven svg{width:19px;height:19px;stroke:currentColor;stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}
.naarboven .ring{position:absolute;inset:-1px;border-radius:50%;
background:conic-gradient(var(--bota) calc(var(--lees)*1%),transparent 0);
-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 0);
mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 0)}
body.cooking .naarboven{bottom:calc(18px + env(safe-area-inset-bottom))}
@media(prefers-reduced-motion:reduce){.naarboven{transition:none}}

.ad{background:var(--ad);border-radius:10px;padding:14px;text-align:center;min-height:180px;
display:flex;flex-direction:column;justify-content:center;gap:8px}
.ad .lbl{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ad-ink)}
.ad .box{color:var(--ad-ink);font-size:13px}
.advertorial{display:flex;gap:13px;align-items:center;background:var(--ad);border-radius:10px;padding:13px;min-height:96px}
.advertorial .th{width:60px;height:60px;border-radius:8px;background:var(--rule);flex:none}
.advertorial .tt{font-size:15px}
.advertorial .sb{font-size:12px;color:var(--ad-ink)}

.varwrap{position:relative;margin-top:2px}
.varwrap::before,.varwrap::after{content:"";position:absolute;top:0;bottom:0;width:44px;
pointer-events:none;z-index:2;opacity:0;transition:opacity .2s}
.varwrap::before{left:0;background:linear-gradient(to right,var(--paper),transparent)}
.varwrap::after{right:0;background:linear-gradient(to left,var(--paper),transparent)}
.varwrap.links::before{opacity:1}
.varwrap.rechts::after{opacity:1}
.vars{display:flex;flex-wrap:nowrap;gap:14px;margin:0;
padding:4px 0 8px;list-style:none;align-items:stretch;
overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;
scrollbar-width:none;-webkit-overflow-scrolling:touch}
.vars::-webkit-scrollbar{display:none}
.vars .rand{flex:0 0 1px;width:1px;min-width:1px;align-self:stretch;list-style:none;pointer-events:none}
.var{flex:0 0 272px;width:272px;max-width:272px;display:flex;flex-direction:column;
border:1px solid var(--rule);border-radius:14px;padding:15px 16px 13px;
background:var(--sheet);scroll-snap-align:start;
box-shadow:0 1px 2px rgb(25 28 24 / .05);transition:border-color .18s,box-shadow .18s}
.var:hover{border-color:var(--rule-strong);box-shadow:0 4px 16px rgb(25 28 24 / .09)}
.var .vvoet{margin-top:auto;padding-top:11px;font-size:13px;color:var(--ink-3)}
@media(min-width:900px){.var{flex:0 0 320px;width:320px;max-width:320px;padding:17px 18px 15px}}
.varnav{position:absolute;top:50%;margin-top:-17px;z-index:3;width:34px;height:34px;
border-radius:50%;border:1px solid var(--rule);background:var(--sheet);cursor:pointer;
display:none;place-items:center;box-shadow:0 2px 8px rgb(0 0 0 / .10);color:var(--ink-2)}
.varnav.l{left:-4px}
.varnav.r{right:-4px}
.varwrap.links .varnav.l,.varwrap.rechts .varnav.r{display:grid}
.varnav:hover{border-color:var(--bota);color:var(--bota)}
.varnav svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round}
.var .fh{display:flex;align-items:center;gap:9px;margin-bottom:10px;
text-decoration:none;color:inherit}
.var .fh:hover .who{color:var(--bota);text-decoration:underline;text-underline-offset:3px}
.fpijl{margin-left:auto;color:var(--ink-3);font-size:15px}
.var .fh:hover .fpijl{color:var(--bota)}
.var .fh .who{font-size:14px}
.var .why{font-size:14px;color:var(--ink-2);margin:0 0 11px}
.diff{margin:0;padding:0;list-style:none;font-size:14px}
.diff li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:9px;padding:6px 0;border-top:1px dashed var(--rule)}
.diff li:first-child{border-top:0}
.diff .s{font-weight:600;text-align:center;line-height:1.5}
.diff .plus{color:var(--bota)} .diff .minus{color:var(--flag)} .diff .swap{color:var(--warn)}
.diff .to{display:block;color:var(--ink-3);font-size:13px}

details{border-top:1px solid var(--rule);--pijl:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A4F46' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
details:last-of-type{border-bottom:1px solid var(--rule)}
summary{position:relative;min-height:var(--tap);display:flex;align-items:center;
justify-content:space-between;gap:12px;cursor:pointer;list-style:none;padding:13px 0;font-size:16px;
transition:color .18s}
summary::-webkit-details-marker{display:none}
summary > h2,summary > h3{font-family:Archivo,system-ui,sans-serif;font-size:16px;
font-weight:500;letter-spacing:0;margin:0;line-height:1.3;transition:color .18s}
.sugg > summary > h3,.schrijf > summary > h3{font-size:14.5px}
summary::before{content:"";position:absolute;left:-14px;top:11px;bottom:11px;width:2px;
border-radius:2px;background:var(--bota);transform:scaleY(0);transform-origin:50% 50%;
transition:transform .26s cubic-bezier(.2,.7,.3,1)}
details[open] > summary::before{transform:scaleY(1)}
summary:hover > h2,summary:hover > h3{color:var(--bota)}
summary .hint{font-size:12.5px;color:var(--ink-3);margin-left:auto;text-align:right;
background:var(--sunk);padding:4px 11px;border-radius:99px;white-space:nowrap;
transition:background .18s,color .18s}
summary:hover .hint{background:var(--bota-bg);color:var(--bota-ink)}
summary .hint.raak{background:#F7E7E3}
summary .hint.opgelost{background:var(--bota-bg)}
summary::after{content:"";flex:none;width:30px;height:30px;border-radius:50%;
background:var(--pijl) center/15px no-repeat,var(--sunk);
transition:transform .26s cubic-bezier(.2,.7,.3,1),background-color .18s}
summary:hover::after{background-color:var(--bota-bg)}
details[open] > summary::after{transform:rotate(180deg);background-color:var(--bota-bg)}
.sugg > summary::after,.schrijf > summary::after,.alg-rest > summary::after{width:26px;height:26px;background-size:13px}
.dbody{padding:2px 0 18px}

@supports (interpolate-size: allow-keywords){
:root{interpolate-size:allow-keywords}
details::details-content{block-size:0;overflow:hidden;opacity:0;
transition:block-size .3s cubic-bezier(.2,.7,.3,1),opacity .22s ease,content-visibility .3s allow-discrete}
details[open]::details-content{block-size:auto;opacity:1}
}

table{width:100%;border-collapse:collapse;font-size:14px;table-layout:fixed}
th,td{text-align:right;padding:8px 0;border-top:1px solid var(--rule)}
th:first-child,td:first-child{text-align:left;width:44%}
thead th{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);border-top:0}

.alg{display:flex;flex-wrap:wrap;gap:7px}
.alg span,.alg button{font-size:13px;padding:7px 12px;border-radius:999px;background:var(--sunk);
color:var(--ink-2);border:0;font-family:inherit}
.alg button{cursor:pointer}
.alg .hit{background:var(--warn-bg);color:var(--warn);font-weight:500}
.alg button:hover{outline:1px solid var(--warn)}

.allerg{list-style:none;margin:0;padding:0}
.allerg li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:0 11px;
padding:11px 0;border-top:1px solid var(--rule);align-items:start}
.allerg li:first-child{border-top:0}
.allerg input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--warn)}
.allerg .an{font-size:15px;font-weight:500}
.allerg .ar{grid-column:2;font-size:13.5px;color:var(--ink-2);margin-top:2px}
.allerg .ar a{color:var(--warn)}
.allerg li.leeg .an{color:var(--ink-3);font-weight:400}
.allerg li.leeg .ar{color:var(--ink-3)}
.allerg li.raak{background:#F7E7E3;padding-inline:11px;border-top-color:transparent}
.allerg li.raak .an,.allerg li.raak .ar{color:var(--flag)}
.allerg li.raak .ar a{color:var(--flag);font-weight:500}
.allerg li.raak input{accent-color:var(--flag)}
.hint.raak{color:var(--flag);font-weight:500}
.hint.opgelost{color:var(--bota);font-weight:500}
.allerg li.opgelost{background:var(--bota-bg);padding-inline:11px;border-top-color:transparent}
.allerg li.raak:first-child,.allerg li.opgelost:first-child{border-radius:11px 11px 0 0}
.allerg li.raak:last-child,.allerg li.opgelost:last-child{border-radius:0 0 11px 11px}
.allerg li.raak:only-child,.allerg li.opgelost:only-child{border-radius:11px}
.allerg li.opgelost + li{border-top-color:transparent}
.allerg li.opgelost .an,.allerg li.opgelost .an label{color:var(--bota-ink)}
.allerg li.opgelost .ar{color:var(--bota-ink)}
.allerg li.opgelost .ar a{color:var(--bota-ink)}
.allerg li.opgelost input{accent-color:var(--bota)}
.opl{grid-column:2;margin-top:3px;font-size:12.5px;font-weight:500;color:var(--bota)}
.oude{text-decoration:line-through;opacity:.55}
.allerg li.leeg{grid-template-columns:20px auto minmax(0,1fr);align-items:baseline;padding:8px 0}
.allerg li.leeg .vink{font-size:12.5px;color:var(--ink-3);grid-column:3;margin:0}
.allerg li.leeg .an{white-space:nowrap}
.alg-uitleg{font-size:13.5px;color:var(--ink-2);margin:0 0 15px}
.alg-vw{font-size:12.5px;color:var(--ink-3);margin:15px 0 0}
.vwgraf{margin:0;padding:18px 20px 20px;background:var(--sunk);border-radius:14px}
.vwgraf figcaption{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
flex-wrap:wrap;font-size:12.5px;color:var(--ink-2);margin-bottom:11px}
.vwkcal{font-family:Newsreader,serif;font-size:22px;color:var(--ink)}
.vwkcal small{font-family:Archivo,sans-serif;font-size:12.5px;color:var(--ink-3)}

.ebalk{display:flex;height:30px;border-radius:8px;overflow:hidden;background:var(--rule)}
.ebalk i{display:block;height:100%;width:var(--p);transition:width .35s cubic-bezier(.2,.7,.3,1)}
.ebalk i+i{box-shadow:inset 1px 0 0 rgb(255 255 255 / .55)}
.k-vet{background:#C98A1E}.k-kh{background:#2F5D3A}.k-eiw{background:#8A7F70}
.elegend{display:flex;flex-wrap:wrap;gap:6px 20px;list-style:none;margin:12px 0 0;padding:0;font-size:13px}
.elegend li{display:flex;align-items:center;gap:7px;color:var(--ink-2)}
.elegend i{width:10px;height:10px;border-radius:3px;flex:none}
.elegend b{font-weight:600;color:var(--ink)}
.elegend span{color:var(--ink-3);font-size:12.5px}

.vwbars{list-style:none;margin:0;padding:0}
.vwbars li{display:grid;grid-template-columns:minmax(88px,auto) minmax(0,1fr) minmax(58px,auto);
gap:12px;align-items:center;padding:7px 0;font-size:13.5px}
.vwbars .n{color:var(--ink-2)}
.vwbars .t{position:relative;height:9px;border-radius:99px;background:var(--rule);overflow:hidden}
.vwbars .t i{display:block;height:100%;width:var(--p);border-radius:99px;background:var(--bota);
transition:width .35s cubic-bezier(.2,.7,.3,1)}
.vwbars li.hoog .t i{background:var(--warn)}
.vwbars li.vol .t i{background:var(--flag)}
.vwbars .v{text-align:right;color:var(--ink);font-variant-numeric:tabular-nums}
.vwbars .t::after{content:"";position:absolute;inset-block:-3px;left:100%;width:1px;background:var(--rule-strong)}
.vwmerk{display:flex;justify-content:flex-end;font-size:11px;color:var(--ink-3);
letter-spacing:.06em;text-transform:uppercase;margin:2px 0 0}
.vwvoet{font-size:12px;color:var(--ink-3);margin:8px 0 0}

.cluster{display:flex;align-items:center;gap:9px;background:var(--sunk);border-radius:10px;
padding:11px 14px;margin-top:14px;font-size:14.5px;text-decoration:none;color:var(--ink)}
.cluster:hover{background:var(--bota-bg)}
.cluster b{font-weight:600}
.cluster .pijl{margin-left:auto;color:var(--ink-3)}

.toc{display:block;background:var(--sunk);border-radius:10px;padding:14px 16px;margin-top:20px}
.toc h3{font-size:14px;margin-bottom:8px}
.toc ol{margin:0;padding-left:18px;font-size:14px;line-height:1.9}
.toc ol ol{padding-left:16px;font-size:13.5px}
.toc a{text-decoration:none}
.toc a:hover{text-decoration:underline}

.sugg{margin-top:14px;border:1px solid var(--rule);border-radius:10px;background:var(--sheet)}
.sugg > summary{padding:11px 14px;font-size:14px;min-height:0}
.sugg .sbody{padding:2px 14px 14px}
.sugg p.uitleg{font-size:13.5px;color:var(--ink-2);margin:0 0 11px}
.addlijst{display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0;list-style:none}
.addlijst button{display:inline-flex;align-items:baseline;gap:7px;font-family:inherit;
font-size:13.5px;padding:7px 12px;border-radius:99px;border:1px solid var(--rule);
background:var(--paper);cursor:pointer;color:var(--ink)}
.addlijst button:hover{border-color:var(--bota);background:var(--bota-bg)}
.addlijst .pl{color:var(--bota);font-weight:600}
.addlijst .vk{font-size:11.5px;color:var(--ink-3)}
.addlijst button:hover .vk{color:var(--bota-ink)}
.eigenin{display:flex;gap:8px;margin-top:13px}
.eigenin input{flex:1;min-width:0;min-height:40px;padding:0 13px;font:inherit;font-size:14px;
border:1px solid var(--rule-strong);border-radius:9px;background:var(--paper);color:var(--ink)}
.eigenin button{min-height:40px;padding:0 16px;border:0;border-radius:9px;
background:var(--bota);color:#fff;font-size:14px;cursor:pointer}
.aivoet{font-size:12.5px;color:var(--ink-3);margin:9px 0 0}

.scorekop{display:grid;gap:20px;margin-bottom:22px;align-items:center}
.scorelinks{text-align:center}
.scorecijfer{display:block;font-family:Newsreader,serif;font-size:54px;line-height:1;color:var(--ink)}
.scorecijfer small{font-size:19px;color:var(--ink-3);font-family:Archivo,sans-serif}
.scoresub{display:block;font-size:12.5px;color:var(--ink-3);margin-top:8px;line-height:1.45}
.grootst{position:relative;display:inline-block;margin-top:9px;font-size:31px;line-height:1;
letter-spacing:3px;color:var(--rule-strong);white-space:nowrap}
.grootst > b{position:absolute;left:0;top:0;overflow:hidden;width:var(--vul);color:#C98A1E;font-weight:400}
.verdeling{list-style:none;margin:0;padding:0;font-size:12.5px}
.verdeling li{display:grid;grid-template-columns:36px minmax(0,1fr) 30px;gap:10px;align-items:center;padding:3px 0}
.verdeling .vl{color:var(--ink-3);white-space:nowrap}
.verdeling .vl i{color:#C98A1E;font-style:normal}
.verdeling .vb{height:7px;border-radius:99px;background:var(--sunk);overflow:hidden}
.verdeling .vb i{display:block;height:100%;background:#C98A1E;border-radius:99px}
.verdeling .vn{text-align:right;color:var(--ink-3)}
@media(min-width:620px){
.scorekop{grid-template-columns:auto minmax(0,1fr);gap:28px}
.scorelinks{text-align:left;border-right:1px solid var(--rule);padding-right:28px}
.scoresub{max-width:22em}
}

.faqlijst > div{padding:15px 0;border-top:1px solid var(--rule)}
.faqlijst > div:first-child{border-top:0;padding-top:2px}
.faqlijst h3{font-family:Archivo,system-ui,sans-serif;font-size:16px;font-weight:600;
letter-spacing:0;line-height:1.4;margin:0 0 5px}
.faqlijst p{margin:0;color:var(--ink-2)}

.alg-rest,.alg-rest:last-of-type{border:0}
.alg-rest > summary{font-size:14px;color:var(--ink-2);min-height:42px;padding:11px 0;
border-top:1px solid var(--rule);margin-top:4px}
.alg-rest .restlijst{display:flex;flex-wrap:wrap;gap:7px;padding:4px 0 12px;margin:0;list-style:none}
.alg-rest .restlijst label{display:inline-flex;align-items:center;gap:7px;font-size:13px;
padding:7px 13px;border-radius:99px;background:var(--sunk);color:var(--ink-2);cursor:pointer;
border:1px solid transparent}
.alg-rest .restlijst label:hover{border-color:var(--rule-strong)}
.alg-rest .restlijst input{width:15px;height:15px;margin:0;accent-color:var(--warn)}
.alg-rest .restlijst li:has(input:checked) label{background:var(--warn-bg);border-color:var(--warn);
color:var(--warn);font-weight:500}
.alg-rest .restvoet b{font-weight:600;color:var(--warn)}
.alg-rest.onzeker > summary{color:var(--warn)}
.alg-rest.onzeker .restvoet{color:var(--warn)}
.alg-rest .restvoet{font-size:12.5px;color:var(--ink-3);margin:0 0 4px}

.dieet{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:13px 0;
border-bottom:1px solid var(--rule);font-size:13.5px;min-height:138px}
@media(min-width:560px){.dieet{min-height:87px}}
@media(min-width:900px){.dieet{min-height:59px}}
.dieet .dlab{color:var(--ink-3);font-size:11px;letter-spacing:.1em;text-transform:uppercase;margin-right:2px}
.dchip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:99px;
background:var(--bota-bg);color:var(--bota-ink);font-weight:500}
.dchip svg{width:13px;height:13px;stroke:currentColor;stroke-width:2.3;fill:none;stroke-linecap:round;stroke-linejoin:round}
.dchip.let{background:var(--warn-bg);color:var(--warn)}
.dchip.nee{background:var(--sunk);color:var(--ink-3);font-weight:400}
.dieet .dwaarom{color:var(--ink-3);font-size:12.5px}
.facts.praktisch{border-top:0;margin-top:0}
.facts.praktisch .fact{flex:1 1 25%;min-width:88px}
.facts.praktisch dd{font-size:14.5px}
.serveertip{margin:12px 0 0;font-size:15px;color:var(--ink-2);display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.serveertip .dlab{color:var(--ink-3);font-size:11px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.wijn{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start;margin:12px 0 0}
.wijn .dlab{color:var(--ink-3);font-size:11px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;padding-top:7px}
.wchip{display:flex;flex-direction:column;gap:2px;padding:7px 12px;border-radius:10px;background:var(--sunk);font-size:14px;max-width:320px}
.wchip i{font-style:normal;color:var(--ink-3);font-size:12.5px}
.wchip .wreden{color:var(--ink-2);font-size:13px}

.relact{display:flex;gap:4px;margin-bottom:6px}
.relact button{width:28px;height:28px;padding:0;border:0;background:var(--sunk);border-radius:50%;
display:grid;place-items:center;cursor:pointer}
.relact button:hover{background:var(--bota-bg)}
.relact svg{width:14px;height:14px;stroke:var(--ink-3);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.relact button:hover svg{stroke:var(--bota)}
.alert{background:var(--warn-bg);border-left:3px solid var(--warn);color:var(--warn);padding:13px 15px;margin-bottom:15px;font-size:14.5px}

.ooklekker{padding-bottom:34px}
.waaier{position:relative;height:clamp(286px, 4.05vw + 271px, 308px);margin:10px 0 0;list-style:none;padding:0}
.waaier > li{position:absolute;left:50%;top:0;width:166px;margin:0;
transform:translateX(-50%) rotate(calc(var(--r)*var(--fan))) translateY(calc(var(--y)*var(--fan)));
transform-origin:50% var(--fan-org);z-index:var(--z)}
.waaier a{display:block;text-decoration:none;color:inherit;
border-radius:15px;overflow:hidden;background:#fff;border:4px solid #fff;
box-shadow:0 0 0 1px var(--rule), 0 1px 2px rgb(25 28 24 / .10), 0 10px 26px rgb(25 28 24 / .14);
transition:transform .24s cubic-bezier(.2,.7,.3,1), box-shadow .24s ease}
.waaier > li:hover{z-index:20}
.waaier a:hover{transform:translateY(-16px) scale(1.045);
box-shadow:0 0 0 1px var(--rule), 0 2px 5px rgb(25 28 24 / .12), 0 22px 44px rgb(25 28 24 / .24)}
.waaier .kop{border-radius:11px 11px 0 0}
.kwaar{display:block;margin-top:8px;font-size:11px;letter-spacing:.03em;
background:#F7E7E3;color:var(--flag);padding:4px 9px;border-radius:99px;
text-align:center;font-weight:600}
.kwaar.sporen{background:var(--warn-bg);color:var(--warn);font-weight:500}
.waaier .kop{height:106px;background:var(--kaart);
display:grid;place-items:end start;padding:10px;position:relative;overflow:hidden}
.waaier .kop img{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;display:block}
.waaier .kop::before{content:"";position:absolute;inset:0;z-index:1;
background:linear-gradient(to top,rgb(15 18 14 / .64),rgb(15 18 14 / .04) 60%)}
.waaier .band{position:relative;z-index:2;font-size:10px;letter-spacing:.11em;text-transform:uppercase;
color:#fff;background:rgb(15 18 14 / .40);padding:4px 9px;border-radius:99px;line-height:1.4}
.waaier .kscore{position:absolute;z-index:2;top:9px;right:9px;display:inline-flex;align-items:center;gap:4px;
font-size:11.5px;font-weight:600;color:var(--ink);background:rgb(255 255 255 / .94);
padding:3px 8px;border-radius:99px;line-height:1.4}
.waaier .kscore i{color:#C98A1E;font-style:normal}
.waaier .lijf{padding:11px 13px 13px}
.waaier .nm{font-family:Newsreader,serif;font-size:16px;line-height:1.2;display:block;min-height:2.4em}
.waaier .mt{font-size:11.5px;color:var(--ink-3);margin-top:8px;display:flex;align-items:center;gap:6px;
border-top:1px solid var(--rule);padding-top:8px}
.waaier .mt svg{width:13px;height:13px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;flex:none}
.waaiervoet{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:20px;font-size:14.5px}

@supports (animation-timeline: view()){
  .waaier > li{animation:waaier-uit linear both;animation-timeline:view();
    animation-range:entry 5% cover 40%}
}
@keyframes waaier-uit{
  from{transform:translateX(-50%) rotate(0deg) translateY(28px)}
  to{transform:translateX(-50%) rotate(calc(var(--r)*var(--fan))) translateY(calc(var(--y)*var(--fan)))}
}
@media(prefers-reduced-motion:reduce){
  .waaier > li{animation:none;
    transform:translateX(-50%) rotate(calc(var(--r)*var(--fan))) translateY(calc(var(--y)*var(--fan)))}
  .waaier a:hover{transform:none}
}
@media(min-width:900px){
  .ooklekker{padding-bottom:44px}
  .waaier{height:clamp(408px, 11vw + 309px, 446px);margin-top:22px}
  .waaier > li{width:214px}
  .waaier .kop{height:144px}
  .waaier .nm{font-size:18.5px}
  .waaier .lijf{padding:13px 16px 15px}
  .waaier .mt{font-size:12.5px;margin-top:10px;padding-top:10px}
  .waaier .band{font-size:10.5px;padding:5px 11px}
}
@media(min-width:1320px){
  .waaier{height:clamp(501px, 12.5vw + 336px, 522px)}
  .waaier > li{width:246px}
  .waaier .kop{height:168px}
  .waaier .nm{font-size:20px}
}

.wijzigbalk{grid-column:full;position:sticky;bottom:0;z-index:31;
display:grid;grid-template-columns:var(--kol);
background:var(--bota-bg);border-top:1px solid var(--bota);
animation:balkop .28s cubic-bezier(.2,.7,.3,1) both}
.wijzigbalk-in{grid-column:main;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
padding:11px 0 calc(11px + env(safe-area-inset-bottom))}
.wijzigbalk .wt{display:flex;flex-direction:column;min-width:0;flex:1;
font-size:13.5px;color:var(--bota-ink);line-height:1.35}
.wijzigbalk .wt b{font-weight:600;font-size:14.5px}
.wijzigbalk .btn{flex:0 0 auto;padding:0 18px;min-height:40px}
.wijzig-x{flex:none;width:36px;height:36px;padding:0;border:0;border-radius:50%;
background:none;cursor:pointer;display:grid;place-items:center}
.wijzig-x:hover{background:rgb(47 93 58 / .12)}
.wijzig-x svg{width:15px;height:15px;stroke:var(--bota-ink);stroke-width:2;fill:none;stroke-linecap:round}
@keyframes balkop{from{transform:translateY(100%)}to{transform:none}}
@media(prefers-reduced-motion:reduce){.wijzigbalk{animation:none}}

.anchor{display:none;position:sticky;bottom:0;z-index:30;background:var(--ad);border-top:1px solid var(--rule);
padding:9px max(16px,env(safe-area-inset-left)) calc(9px + env(safe-area-inset-bottom));text-align:center}
.anchor .lbl{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ad-ink)}
.anchor .box{font-size:13px;color:var(--ad-ink);min-height:50px;display:grid;place-items:center}

footer,.page>footer{grid-column:full}
footer{display:grid;grid-template-columns:var(--kol);
margin-top:44px;background:var(--sunk);border-top:1px solid var(--rule);font-size:14px}
footer > *{grid-column:main}
footer a{color:var(--ink-2);text-decoration:none}
footer a:hover{color:var(--bota);text-decoration:underline;text-underline-offset:3px}

.fbovenin{display:grid;gap:22px;padding:32px 0 26px}
.fbovenin .mark{font-size:25px}
.fclaim{max-width:34em;color:var(--ink-3);font-size:14.5px;margin:9px 0 0;line-height:1.55}
.fbrief{background:var(--sheet);border:1px solid var(--rule);border-radius:15px;padding:17px 18px}
.fbrief h3{font-family:Newsreader,serif;font-size:19px;font-weight:400;margin:0 0 4px}
.fbrief p{margin:0 0 12px;font-size:13.5px;color:var(--ink-3);line-height:1.5}
.fbriefrij{display:flex;gap:8px;flex-wrap:wrap}
.fbriefrij input{flex:1 1 180px;min-width:0;min-height:44px;padding:0 14px;font:inherit;font-size:14.5px;
border:1px solid var(--rule-strong);border-radius:11px;background:var(--paper);color:var(--ink)}
.fbriefrij input:focus{border-color:var(--bota);outline:0;box-shadow:0 0 0 3px var(--bota-bg)}
.fbriefrij button{min-height:44px;padding:0 20px;border:0;border-radius:11px;
background:var(--bota);color:#fff;font:inherit;font-size:14.5px;cursor:pointer;white-space:nowrap}
.fbriefrij button:hover{background:var(--bota-ink)}

.fcijfers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
background:var(--rule);border-block:1px solid var(--rule)}
.fcijfers div{background:var(--sunk);padding:15px 4px;text-align:center}
.fcijfers dt{font-family:Newsreader,serif;font-size:27px;line-height:1.1;color:var(--ink)}
.fcijfers dd{margin:3px 0 0;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}

.fkolommen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 20px;padding:28px 0 4px}
.fkolommen nav h3{font-size:11px;letter-spacing:.13em;text-transform:uppercase;
color:var(--ink-3);font-weight:600;font-family:Archivo,sans-serif;margin-bottom:9px}
.fkolommen ul{list-style:none;margin:0;padding:0;line-height:2}
.fkolommen button{border:0;background:none;padding:0;font:inherit;font-size:14px;
color:var(--ink-2);cursor:pointer;text-align:left;line-height:2}
.fkolommen button:hover{color:var(--bota);text-decoration:underline;text-underline-offset:3px}

.fseizoen{margin-top:26px;padding-top:22px;border-top:1px solid var(--rule)}
.fchips{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
.fchips a{font-size:13px;padding:7px 13px;border-radius:999px;background:var(--sheet);
border:1px solid var(--rule);color:var(--ink-2)}
.fchips a:hover{background:var(--bota-bg);border-color:var(--bota);color:var(--bota-ink);text-decoration:none}

.fonderin{display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap;
margin-top:28px;padding:18px 0 calc(30px + env(safe-area-inset-bottom));border-top:1px solid var(--rule);
font-size:13px;color:var(--ink-3)}
.fonderin p{margin:0}
.fonderin .flegal{display:flex;gap:14px;flex-wrap:wrap}
.fonderin .flegal a{font-size:13px}
.fsoc{display:flex;gap:8px;margin-left:auto}
.fsoc a{width:36px;height:36px;border-radius:50%;background:var(--sheet);border:1px solid var(--rule);display:grid;place-items:center}
.fsoc a:hover{background:var(--bota-bg);border-color:var(--bota)}
.fsoc svg{width:17px;height:17px;stroke:var(--ink-2);stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.fsoc a:hover svg{stroke:var(--bota)}
@media(min-width:700px){.fcijfers{grid-template-columns:repeat(4,minmax(0,1fr))}}

body.cooking .topbar,body.cooking .ad,body.cooking .advertorial,body.cooking .anchor,
body.cooking .heroimg,body.cooking .hero .scrim,body.cooking .herocredit,
body.cooking .crumbs,body.cooking footer,body.cooking .no-cook{display:none}
body.cooking section{border-bottom:0}
body.cooking .hero{display:block}
body.cooking .herotekst{padding:18px 0 0}
body.cooking .hero h1{color:var(--ink);text-shadow:none}
body.cooking .hero .eyebrow{color:var(--bota)}
body.cooking .hero .sc{color:var(--ink)}
body.cooking .hero .st{color:var(--rule-strong)}
body.cooking .hero .sn,body.cooking .hero .sv{color:var(--ink-3)}
body.cooking .hero .sn a,body.cooking .hero .sv a{color:var(--bota)}
body.cooking .onderhero{display:block;padding:0}
body.cooking .hero.fotohero .herotekst{position:static;top:auto;bottom:auto;
transform:none!important;margin-top:0;padding:18px 0 0}
body.cooking .hero.fotohero .herobinnen{display:block;background:none;box-shadow:none;border:0;
-webkit-backdrop-filter:none;backdrop-filter:none;color:var(--ink);min-height:0;
padding:0;border-radius:0;opacity:1;transform:none}
body.cooking .hero.fotohero h1{animation:none;font-size:var(--h1groot);line-height:1.06;
white-space:normal;overflow:visible}
body.cooking .hero.fotohero .herospacer{display:none}
body.cooking .hero.fotohero{--krimp:0}
body.cooking .hero.fotohero .eyebrow{display:inline-flex;max-height:none;opacity:1}
body.cooking .hero.fotohero .st,body.cooking .hero.fotohero .sv{display:inline}
body.cooking .hero.fotohero .heroimg .img{transform:none!important;top:0;bottom:0;height:auto}
.cookbar{display:none;grid-column:full;position:sticky;top:0;z-index:50;
grid-template-columns:var(--kol);background:var(--sheet);border-bottom:1px solid var(--rule)}
.cookbar-in{grid-column:main;display:flex;align-items:center;gap:12px;padding:9px 0}
body.cooking .cookbar{display:grid}
.cb-t{display:flex;align-items:center;gap:8px;font-weight:500}
.cb-t svg{width:19px;height:19px;stroke:var(--bota);stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.cb-s{font-size:13px;color:var(--ink-3)}
.cb-x{margin-left:auto;min-height:40px;padding:0 16px;border:0;border-radius:99px;
background:var(--bota);color:#fff;font-size:14.5px;cursor:pointer;
display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.cb-x:hover{background:var(--bota-ink)}
.cb-x svg{width:17px;height:17px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round}
.cookend{display:none;padding:34px 0 48px;text-align:center}
body.cooking .cookend{display:block}
.cookend h2{font-size:30px;margin:0 0 6px}
.klaarvink{display:grid;place-items:center;width:52px;height:52px;margin:0 auto 14px;
border-radius:50%;background:var(--bota-bg)}
.klaarvink svg{width:26px;height:26px;stroke:var(--bota);stroke-width:2.4;fill:none;
stroke-linecap:round;stroke-linejoin:round}
.cookvoor{color:var(--ink-2);margin:0 auto 20px;max-width:34em}
.cooksterren{justify-content:center;flex-wrap:wrap;margin:0 0 20px}
.cooksterren button{width:46px;height:46px;font-size:31px}
.cooksterren .uitleg{flex:1 1 100%;margin:6px 0 0;text-align:center}
.cookhoofd{flex:none;padding:0 26px;min-height:50px;font-size:16px}
.cookdiff{max-width:34em;margin:22px auto 0;padding:13px 15px;border-radius:12px;
background:var(--bota-bg);color:var(--bota-ink);font-size:13.5px;line-height:1.5}
.cookdiff b{font-weight:600}
.cookdiff button{display:block;margin:9px auto 0;min-height:38px;padding:0 15px;
border:1px solid var(--bota);border-radius:99px;background:var(--sheet);
color:var(--bota-ink);font:inherit;font-size:13.5px;cursor:pointer}
.cookdiff button:hover{background:var(--bota);color:#fff}

@media(min-width:900px){
:root{--kol:[full-start] minmax(24px,1fr) [main-start] minmax(0,1180px) [main-end] minmax(24px,1fr) [full-end];
--fan:1.5; --fan-org:clamp(726px, 113vw - 290px, 1097px)}
body{font-size:17px}
h1{font-size:clamp(46px,5vw,70px);letter-spacing:-.022em}
h2{font-size:28px}
.crumbs{padding-top:20px;font-size:13px}
.lede{font-size:22px;max-width:34em;font-family:Newsreader,serif;line-height:1.42;color:var(--ink-2)}
.facts{max-width:none}
.heroimg{height:clamp(420px,60vh,620px)}
.herobinnen{max-width:19em}
.onderhero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);
gap:0 52px;align-items:center;padding:30px 0 26px}
.herocredit{padding-top:18px;font-size:11.5px}
.hero.fotohero .herotekst{margin-top:-104px}
.hero.fotohero.vast .herospacer{margin-top:-104px}
.hero.fotohero .herobinnen{padding:calc(21px - 13px * var(--krimp,0)) calc(24px - 10px * var(--krimp,0)) calc(22px - 14px * var(--krimp,0));border-radius:12px;width:fit-content;max-width:100%}
.hero.fotohero .herocredit{padding:16px max(16px,env(safe-area-inset-right)) 0 16px;font-size:11.5px}
.facts{flex-wrap:nowrap}
.fact{flex:1 1 0;min-width:0;padding-inline:20px;white-space:nowrap;text-align:center}
.fact:first-child{padding-left:0;text-align:left}
.fact:last-child{padding-right:0;text-align:right}
.acts .rechts{margin-left:auto}
.cluster{margin-top:16px}

.cols{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);
gap:0 44px;align-items:start}
.rail{grid-column:1;position:sticky;top:78px;padding:26px 0 26px}
.railbox{margin:22px 0 0}
.body{grid-column:2}
.rail>section{border-bottom:0;padding:0 0 22px}
.body{border-left:1px solid var(--rule);padding-left:44px}
.body>section:first-child{padding-top:26px}
.body p,.body ol.method,.body .mist .d,.body .rc p{max-width:66ch}
.body p.disclaimer,.body p.alg-uitleg,.body p.klein,.body p.alg-vw{max-width:none}
.acts{overflow:visible}

.anchor{display:none}
.naarboven{bottom:calc(20px + env(safe-area-inset-bottom));width:50px;height:50px}
.klokken{bottom:calc(80px + env(safe-area-inset-bottom));right:20px}
.fkolommen{grid-template-columns:repeat(4,minmax(0,1fr));gap:0 30px;padding:34px 0 4px}
.fbovenin{grid-template-columns:minmax(0,1fr) minmax(0,400px);align-items:start;gap:44px;padding:42px 0 32px}
.fclaim{margin:9px 0 0}
.ad{min-height:104px}
}

/* 2026-09-02 (ronde 2, Rehmat/Jeroen): vanaf 1100px staat de kaart op de foto zelf.
   De onderrand van de kaart hangt op min(onderkant foto - 32px, vensterhoogte - 144px),
   gerekend vanaf de bovenkant van de hero. Die 144px is de balk plus het kruimelpad boven de
   hero (104px) en 40px lucht, zodat de kaart bij elke vensterhoogte binnen het eerste scherm
   valt. De max(320px,...) houdt de kaart op een heel laag venster nog binnen de foto.
   De kaart staat absoluut, dus onder de hero blijft de ruimte exact de hoogte van de foto:
   geen leeg gat. Onder 1100px blijft alles zoals het was: half over, half onder de foto.
   Ronde 5: dezelfde plaatsing, maar via bottom in plaats van top met translateY(-100%), want
   de transform is nu nodig voor de trage fase. 100% - max(a,min(b,c)) = min(100%-a,max(...)),
   dus de kaart komt op exact dezelfde px terecht als hiervoor. */
/* ronde 12 (Rehmat): op fotopagina's zet recept.php het kruimelpad in de hero, direct na de foto.
   Vanaf 900px is het een glazen pil links over de foto, tegenover de fotocredit rechts, en de foto
   begint direct onder de balk. Onder 900px ligt er niets over de foto: kruimelpad en credit staan
   op een rij eronder en de kaart komt daar weer onder. Zonder eigen foto blijft het kruimelpad
   boven de hero staan zoals altijd. */
.hero.fotohero .crumbs{display:inline-flex;gap:6px;flex-wrap:wrap;align-items:center;
padding:6px 12px;border-radius:99px;font-size:11px;letter-spacing:.03em;color:var(--ink-2);
background:rgb(255 255 255 / .85);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hero.fotohero .crumbs a{color:var(--ink-2)}
@media(max-width:899px){
/* ronde 13: beide pillen links onder elkaar, 10px onder de foto en 6px tussen elkaar */
.hero.fotohero .heroin{display:flex;flex-wrap:wrap;align-items:start;gap:6px 0}
.hero.fotohero .heroimg{flex:0 0 100%}
.hero.fotohero .crumbs{margin:4px 0 0 max(12px,env(safe-area-inset-left))}
.hero.fotohero .herocredit{position:static;flex:0 0 100%;
padding:0 max(12px,env(safe-area-inset-right)) 0 max(12px,env(safe-area-inset-left));text-align:left}
.hero.fotohero .creditin{display:inline-flex;justify-content:flex-start}
.hero.fotohero .herotekst,.hero.fotohero.vast .herospacer{flex:0 0 100%;margin-top:0}
}
@media(min-width:900px){
.hero.fotohero .crumbs{position:absolute;top:16px;left:max(16px,env(safe-area-inset-left));z-index:3;font-size:11.5px}
}
@media(min-width:1100px){
/* ronde 8: de kaart hangt hier aan zijn onderrand, dus bij het krimpen zakte zijn bovenkant terwijl
   recept.js met een vaste bovenkant rekende: bij het vastzetten schoot hij ~200px omhoog. recept.js
   meet nu bij p = 0 waar de bovenkant staat en zet die als --kaarttop; vanaf dan is de kaart aan
   zijn bovenkant verankerd en krimpt hij naar boven toe in. Zonder JS blijft de bottom-formule. */
.hero.fotohero .herotekst{position:absolute;left:0;right:0;margin-top:0;height:auto;
top:var(--kaarttop,auto);
bottom:var(--kaartbottom,min(100% - 320px,max(32px,100% - 100vh + 144px)))}
/* de kaart staat absoluut, dus de spacer hoort hier nooit in de opmaak te komen */
.hero.fotohero.vast .herospacer{display:none}
/* ronde 7: hier is de tekst in beide standen al wit, dus alleen de maten, de dekking van het
   glas en de schaduw hoeven met --krimp mee te rekenen. Van 26/30/28 naar 10/18/10 padding. */
.hero.fotohero .herobinnen{color:#fff;border:1px solid rgb(255 255 255 / .20);
border-radius:calc(16px - 4px * var(--krimp,0));
padding:calc(26px - 16px * var(--krimp,0)) calc(30px - 12px * var(--krimp,0)) calc(28px - 18px * var(--krimp,0));
min-height:calc(52px * var(--krimp,0));
background:rgb(16 20 15 / calc(.32 + .23 * var(--krimp,0)));
box-shadow:inset 0 1px 0 rgb(255 255 255 / calc(.28 * var(--krimp,0))),
0 calc(20px - 8px * var(--krimp,0)) calc(54px - 22px * var(--krimp,0)) rgb(0 0 0 / calc(.30 - .06 * var(--krimp,0)))}
.hero.fotohero .herobinnen,.hero.fotohero.morf .herobinnen{
-webkit-backdrop-filter:blur(calc(16px + 2px * var(--krimp,0))) saturate(calc(1.25 - .05 * var(--krimp,0)));
backdrop-filter:blur(calc(16px + 2px * var(--krimp,0))) saturate(calc(1.25 - .05 * var(--krimp,0)))}
.hero.fotohero h1{--h1groot:clamp(34px,3.6vw,50px);--h1klein:22px;
color:#fff;text-shadow:0 1px 20px rgb(0 0 0 / calc(.45 * (1 - var(--krimp,0))))}
.hero.fotohero .eyebrow{color:#DCEBDD;text-shadow:0 1px 10px rgb(0 0 0 / .40)}
.hero.fotohero .eyebrow::after{background:rgb(255 255 255 / .45)}
.hero.fotohero .sterren{text-shadow:0 1px 10px rgb(0 0 0 / calc(.40 * (1 - var(--krimp,0))))}
.hero.fotohero .sc{color:#fff}
.hero.fotohero .st{color:rgb(255 255 255 / .38)}
.hero.fotohero .sn,.hero.fotohero .sv{color:rgb(255 255 255 / .82)}
.hero.fotohero .sn a,.hero.fotohero .sv a{color:#fff}
/* de vaste balk is op de brede weergave iets ruimer dan op de telefoon */
.hero.fotohero.rij .herobinnen{gap:0 14px}
.hero.fotohero.rij .sterren{font-size:13.5px}
}

@media(min-width:1320px){
:root{--kol:[full-start] minmax(24px,1fr) [main-start] minmax(0,1440px) [main-end] minmax(24px,1fr) [full-end];
--fan:1.72; --fan-org:clamp(1032px, 100vw - 288px, 1199px)}
.cols{grid-template-columns:minmax(0,320px) minmax(0,1fr) minmax(0,300px)}
.aside{grid-column:3}
.aside{display:block;position:sticky;top:78px;padding:26px 0}
.asidebox{display:block;margin-bottom:20px}
.asidebox .ad{min-height:600px}
}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--bota);color:#fff;
padding:11px 20px;border-radius:0 0 10px 0;text-decoration:none;font-size:14.5px}
.skip:focus{left:0}

dialog.dlg{display:none}
dialog.dlg[open]{display:block}
dialog.dlg{border:0;padding:0;background:transparent;color:var(--ink);
width:min(560px,calc(100% - 28px));max-width:none;max-height:none;overflow:visible;
font-family:Archivo,system-ui,sans-serif;font-size:16px;line-height:1.6}
dialog.dlg:not([open]){pointer-events:none}
dialog.dlg::backdrop{background:rgb(15 18 14 / .52)}
dialog.dlg.breed{width:min(760px,calc(100% - 28px))}
.dlgin{display:flex;flex-direction:column;max-height:min(86vh,760px);background:var(--sheet);
border-radius:18px;overflow:hidden;box-shadow:0 26px 70px rgb(0 0 0 / .3)}
.dlgkop{flex:none;display:flex;align-items:center;gap:12px;padding:17px 19px 14px;border-bottom:1px solid var(--rule)}
.dlgkop h2,.dlgkop h3{font-size:21px;line-height:1.2}
.dlgkop .sub{font-size:13px;color:var(--ink-3);display:block;margin-top:2px;font-family:Archivo,sans-serif}
.dlgx{margin-left:auto;flex:none;width:38px;height:38px;border:0;border-radius:50%;
background:var(--sunk);cursor:pointer;display:grid;place-items:center;align-self:start}
.dlgx:hover{background:var(--rule)}
.dlgx svg{width:16px;height:16px;stroke:var(--ink-2);stroke-width:2;fill:none;stroke-linecap:round}
.dlglijf{flex:1;min-height:0;overflow-y:auto;padding:17px 19px;overscroll-behavior:contain}
.dlglijf h3{font-size:14px;font-family:Archivo,sans-serif;font-weight:600;letter-spacing:.02em;
color:var(--ink-2);margin:22px 0 9px}
.dlglijf h3:first-child{margin-top:0}
.dlgvoet{flex:none;display:flex;align-items:center;gap:9px;flex-wrap:wrap;
padding:13px 19px calc(13px + env(safe-area-inset-bottom));border-top:1px solid var(--rule);background:var(--paper)}
.dlgvoet .btn{flex:1 1 140px}
.dlgvoet .voetnoot{flex:1 1 100%;order:-1;font-size:12.5px;color:var(--ink-3);margin:0}
.dlgtabs{display:flex;gap:0;padding:0 19px;border-bottom:1px solid var(--rule);flex:none}
.dlgtabs button{flex:1;min-height:46px;border:0;background:none;font:inherit;font-size:14.5px;
color:var(--ink-3);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.dlgtabs button[aria-pressed=true]{color:var(--bota-ink);font-weight:600;border-bottom-color:var(--bota)}

.veld{display:block;margin-bottom:14px}
.veld > span{display:block;font-size:13px;color:var(--ink-2);margin-bottom:5px;font-weight:500}
.veld input,.veld textarea{width:100%;min-height:46px;padding:11px 13px;font:inherit;font-size:15px;
border:1px solid var(--rule-strong);border-radius:11px;background:var(--paper);color:var(--ink)}
.veld textarea{min-height:84px;resize:vertical}
.veld input:focus,.veld textarea:focus{border-color:var(--bota);outline:0;box-shadow:0 0 0 3px var(--bota-bg)}
.veldhulp{font-size:12.5px;color:var(--ink-3);margin:6px 0 0}
.veldrij{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:-6px 0 14px;font-size:13.5px}

.kiesrij{display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0;list-style:none}
.kiesrij button{font:inherit;font-size:13.5px;min-height:38px;padding:0 14px;border-radius:99px;
border:1px solid var(--rule);background:var(--paper);cursor:pointer;color:var(--ink-2)}
.kiesrij button:hover{border-color:var(--rule-strong)}
.kiesrij button[aria-pressed=true]{background:var(--bota-bg);border-color:var(--bota);color:var(--bota-ink);font-weight:500}

.keuzelijst{display:grid;gap:9px;margin:0;padding:0;list-style:none}
.keuzekaart{display:grid;grid-template-columns:20px minmax(0,1fr);gap:3px 12px;align-items:start;
padding:13px 15px;border:1px solid var(--rule);border-radius:13px;cursor:pointer;background:var(--paper)}
.keuzekaart:hover{border-color:var(--rule-strong)}
.keuzekaart input{margin:2px 0 0;width:18px;height:18px;accent-color:var(--bota)}
.keuzekaart b{font-weight:600;font-size:14.5px}
.keuzekaart .u{grid-column:2;font-size:13px;color:var(--ink-3);line-height:1.45}
.keuzekaart:has(input:checked){border-color:var(--bota);background:var(--bota-bg)}
.keuzekaart:has(input:checked) .u{color:var(--bota-ink)}

.dlgnote{background:var(--bota-bg);color:var(--bota-ink);border-radius:12px;padding:12px 14px;
font-size:13.5px;line-height:1.5;margin:0 0 15px}
.dlgnote.warn{background:var(--warn-bg);color:var(--warn)}
.dlgnote.stop{background:#F7E7E3;color:var(--flag)}
.dlgnote b{font-weight:600}

.sociaal{display:grid;gap:9px;margin-bottom:15px}
.sociaal button{display:flex;align-items:center;justify-content:center;gap:10px;min-height:46px;
border:1px solid var(--rule-strong);border-radius:11px;background:var(--sheet);font:inherit;font-size:14.5px;cursor:pointer}
.sociaal button:hover{background:var(--sunk)}
.sociaal .merk{flex:none;width:25px;height:25px;border-radius:7px;background:var(--sunk);
display:grid;place-items:center;font-size:13px;font-weight:600;color:var(--ink-2)}

.disclaimer{background:var(--sunk);border:1px solid var(--rule);border-radius:12px;
padding:13px 15px;margin:0 0 16px;font-size:13.5px;line-height:1.55;color:var(--ink-2);
max-width:none;width:100%}
.disclaimer b{font-weight:600;color:var(--ink)}
.disclaimer.zwaar{background:#F7E7E3;border-color:#E3C7C0;color:#6E2C20}
.disclaimer.zwaar b{color:var(--flag)}
.klein{font-size:12.5px;color:var(--ink-3);margin:14px 0 0;line-height:1.5}


.spec li[hidden]{display:none}
.spec li.groepnote{grid-template-columns:minmax(0,1fr);border-top:0;padding:0 0 12px}
.spec li.groepnote > div{background:var(--warn-bg);border-radius:10px;padding:11px 13px;
font-size:13.5px;color:var(--warn);line-height:1.5}
.spec li.groepnote b{font-weight:600}
.spec li.groepnote .knopjes{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.spec li.groepnote button{font:inherit;font-size:13px;min-height:34px;padding:0 12px;border-radius:99px;
border:1px solid var(--warn);background:var(--sheet);color:var(--warn);cursor:pointer}
.spec li.groepnote button:hover{background:var(--warn);color:#fff}

ol.method li.overslaan{opacity:.55}
ol.method li.overslaan .ingref,ol.method li.overslaan .amt{opacity:.9}
.overslaanlabel{display:inline-flex;align-items:center;gap:5px;margin-left:6px;font-size:11px;
letter-spacing:.04em;color:var(--flag);background:#F7E7E3;padding:1px 8px;border-radius:99px;
vertical-align:1px;white-space:nowrap}
ol.method li.overslaan .watch{opacity:.7}

.meldknop{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 15px;margin-top:4px;
border:1px solid var(--rule-strong);border-radius:99px;background:var(--sheet);
font:inherit;font-size:13.5px;color:var(--ink-2);cursor:pointer}
.meldknop:hover{border-color:var(--flag);color:var(--flag)}
.meldknop svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}

.overlap{list-style:none;margin:0;padding:0;font-size:14px}
.overlap li{display:grid;grid-template-columns:minmax(0,1fr) 120px auto;gap:11px;align-items:center;
padding:9px 0;border-top:1px solid var(--rule)}
.overlap li:first-child{border-top:0}
.overlap .ob{height:7px;border-radius:99px;background:var(--sunk);overflow:hidden}
.overlap .ob i{display:block;height:100%;background:var(--flag);border-radius:99px}
.overlap .on{font-size:12.5px;color:var(--ink-3);white-space:nowrap}
.overlap .sterk{font-weight:600}
.meldlijst{list-style:none;margin:0 0 4px;padding:0;font-size:13.5px;color:var(--ink-2)}
.meldlijst li{padding:7px 0;border-top:1px solid var(--rule);display:flex;gap:10px;justify-content:space-between}
.meldlijst li:first-child{border-top:0}
.meldlijst .w{color:var(--ink-3);white-space:nowrap}
.ingkeuze{list-style:none;margin:0;padding:0}
.ingkeuze li{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:11px;align-items:center;
padding:9px 0;border-top:1px solid var(--rule);font-size:14.5px}
.ingkeuze li:first-child{border-top:0}
.ingkeuze input{width:18px;height:18px;margin:0;accent-color:var(--bota)}
.ingkeuze .a{font-size:12.5px;color:var(--warn);white-space:nowrap}
.ingkeuze .a.geen{color:var(--ink-3)}
.ingkeuze li:has(input:not(:checked)) .n{color:var(--ink-3);text-decoration:line-through}
.ingkeuze li:has(input:not(:checked)) .a{opacity:.4}
.ofrij{display:flex;align-items:center;gap:12px;margin:0 0 15px;font-size:12.5px;color:var(--ink-3)}
.ofrij::before,.ofrij::after{content:"";flex:1;height:1px;background:var(--rule)}

.zoekbalk{flex:none;display:flex;align-items:center;gap:10px;padding:14px 19px;border-bottom:1px solid var(--rule)}
.zoekbalk svg{width:19px;height:19px;stroke:var(--ink-3);stroke-width:1.8;fill:none;stroke-linecap:round;flex:none}
.zoekbalk input{flex:1;min-width:0;min-height:34px;border:0;background:none;font:inherit;font-size:17px;color:var(--ink)}
.zoekbalk input:focus{outline:0}
.zoekuit{list-style:none;margin:0;padding:0}
.zoekuit li a{display:flex;align-items:center;gap:11px;padding:11px 0;border-top:1px solid var(--rule);
text-decoration:none;color:inherit}
.zoekuit li:first-child a{border-top:0}
.zoekuit a:hover .zt{color:var(--bota);text-decoration:underline;text-underline-offset:3px}
.zoekuit .zi{flex:none;width:34px;height:34px;border-radius:9px;background:var(--sunk);display:grid;place-items:center;
font-size:12px;color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase}
.zoekuit .zt{font-size:15px}
.zoekuit .zm{display:block;font-size:12.5px;color:var(--ink-3)}
.zoekuit .zp{margin-left:auto;color:var(--ink-3)}
.zoekleeg{font-size:14px;color:var(--ink-3);padding:14px 0}

.lijstgroep{margin:0 0 18px}
.lijstgroep h3{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);
font-family:Archivo,sans-serif;font-weight:600;margin:0 0 6px}
.lijstlijst{list-style:none;margin:0;padding:0}
.lijstlijst li{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:11px;align-items:center;
padding:10px 0;border-top:1px solid var(--rule);font-size:15px}
.lijstlijst li:first-child{border-top:0}
.lijstlijst input{width:18px;height:18px;margin:0;accent-color:var(--bota)}
.lijstlijst .q{color:var(--ink-3);font-size:13.5px;white-space:nowrap}
.lijstlijst li:has(input:checked) .n,.lijstlijst li:has(input:checked) .q{text-decoration:line-through;color:var(--ink-3)}

.diffnu{list-style:none;margin:0 0 4px;padding:0;font-size:14px}
.diffnu li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;padding:7px 0;border-top:1px dashed var(--rule)}
.diffnu li:first-child{border-top:0}
.diffnu .s{font-weight:600;text-align:center;line-height:1.5}
.diffnu .plus{color:var(--bota)} .diffnu .minus{color:var(--flag)} .diffnu .swap{color:var(--warn)}
.diffnu .to{display:block;color:var(--ink-3);font-size:13px}

.appvoor{list-style:none;margin:0 0 15px;padding:0}
.appvoor li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:11px;padding:9px 0;
border-top:1px solid var(--rule);font-size:14.5px}
.appvoor li:first-child{border-top:0}
.appvoor svg{width:20px;height:20px;stroke:var(--bota);stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.appvoor b{font-weight:600}
.appvoor span span{display:block;font-size:13px;color:var(--ink-3)}

.menugroep{list-style:none;margin:0 0 18px;padding:0}
.menugroep li a,.menugroep li button{display:flex;align-items:center;gap:11px;width:100%;
min-height:var(--tap);padding:0;border:0;background:none;font:inherit;font-size:15.5px;
text-decoration:none;color:inherit;cursor:pointer;text-align:left;border-top:1px solid var(--rule)}
.menugroep li:first-child a,.menugroep li:first-child button{border-top:0}
.menugroep a:hover,.menugroep button:hover{color:var(--bota)}
.menugroep .pijl{margin-left:auto;color:var(--ink-3)}

@media(max-width:639px){
dialog.dlg,dialog.dlg.breed{position:fixed;inset:auto 0 0 0;width:100%;margin:0;max-width:none}
.dlgin{border-radius:20px 20px 0 0;max-height:88vh}
.dlgvoet .btn{flex:1 1 100%}
}

:where(a,button,summary,input):focus-visible{outline:2.5px solid var(--bota);outline-offset:2px;border-radius:4px}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}
.hero.fotohero.anim .heroimg img{filter:none;transform:none}
.hero.fotohero.anim .herobinnen{opacity:1;transform:none}
.hero.fotohero.anim .herocredit{opacity:1}
.hero.fotohero.parallax .heroimg .img{transform:none!important;top:0;bottom:0;height:auto}
.onthullen .onthul{opacity:1;transform:none}}
@media print{.topbar,.acts,.ad,.advertorial,.anchor,.rel,.vars,.varwrap,.waaier,.ooklekker,footer,.btnrow,.skip,
.hero .scrim,.herocredit,.matchbox{display:none}
body{background:#fff}details{display:block}details>.dbody{display:block!important}
.hero{display:block}
.heroimg{height:200px}
.herotekst{padding:14px 0 0}
.hero h1{color:#000;text-shadow:none}
.hero .eyebrow{color:#000}
.hero .sc,.hero .sn,.hero .sv,.hero .st{color:#000}
.hero.fotohero .heroimg{width:100%;height:200px;aspect-ratio:auto}
.hero.fotohero .herotekst{position:static;top:auto;transform:none;margin-top:0;padding:14px 0 0}
.hero.fotohero .herobinnen{background:none;box-shadow:none;border:0;
-webkit-backdrop-filter:none;backdrop-filter:none;padding:0;border-radius:0}
.hero.fotohero h1,.hero.fotohero .eyebrow,.hero.fotohero .sterren{text-shadow:none;animation:none}
.hero.fotohero h1,.hero.fotohero .sc,.hero.fotohero .sn,.hero.fotohero .sv{color:#000}
.hero.fotohero .eyebrow,.hero.fotohero .st{color:#000}
.hero.fotohero .sn a,.hero.fotohero .sv a{color:#000}
.hero.fotohero.anim .heroimg img{filter:none;transform:none}
.hero.fotohero.parallax .heroimg .img{transform:none!important;top:0;bottom:0;height:auto}
.hero.fotohero.anim .herobinnen,.hero.fotohero.anim .herocredit{opacity:1;transform:none}
.hero.fotohero{--krimp:0}
.hero.fotohero.vast .herotekst{position:static;top:auto;bottom:auto;margin-top:0}
.hero.fotohero .herotekst{transform:none!important}
.hero.fotohero .herospacer{display:none!important}
.hero.fotohero .herobinnen{display:block;background:none;border:0;min-height:0;
padding:0;border-radius:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.hero.fotohero h1{font-size:clamp(30px,8.5vw,42px);white-space:normal;overflow:visible}
.hero.fotohero .eyebrow,.hero.fotohero.rij .eyebrow{display:inline-flex;max-height:none;opacity:1}
.hero.fotohero .st,.hero.fotohero.rij .st,
.hero.fotohero .sv,.hero.fotohero.rij .sv{display:inline}
.hero.fotohero .sterren{margin:13px 0 0}
.onthullen .onthul{opacity:1;transform:none}
.onderhero{display:block;padding:0}
dialog.dlg,dialog.dlg[open]{display:none}}

.cols > .body > section,.ooklekker,footer{content-visibility:auto;contain-intrinsic-size:auto 600px}
.cols > .body > section:first-of-type{content-visibility:visible}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;
background:rgb(25 28 24 / .06);padding:1px 5px;border-radius:4px}
[hidden]{display:none}
/* 2026-08-27: wine moved below the allergen info; top link + clickable sponsored block */
.wijnlink{display:inline-block;margin:10px 0 0;font-size:14px;color:var(--bota);text-decoration:none;border-bottom:1px dotted currentColor}
a.advertorial{text-decoration:none;color:inherit}

.leesook{margin:0 0 12px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.leesook .dlab{color:var(--ink-3);font-size:11px;letter-spacing:.1em;text-transform:uppercase}