/* BarOH · Zoet Water, Oud-Heverlee. Palet van hun Instagram: crème, cobaltblauw en rood, gemeten op de posts van september 2026. */
@font-face{font-family:'Bricolage Grotesque';src:url(letters/bricolage-latin.woff2)format('woff2');font-weight:200 800;font-stretch:75% 100%;font-display:swap;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:'Bricolage Grotesque';src:url(letters/bricolage-latin-ext.woff2)format('woff2');font-weight:200 800;font-stretch:75% 100%;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Nunito';src:url(letters/nunito-latin.woff2)format('woff2');font-weight:400 800;font-display:swap;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:'Nunito';src:url(letters/nunito-latin-ext.woff2)format('woff2');font-weight:400 800;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --kalk:#F7E6C6; --kalk2:#EFD9AE; --luik:#0F1FA8; --luik2:#0B1889; --nacht:#B8281A; --limoen:#F7E6C6; --rood:#B8281A; --inkt:#0F1FA8; --inkt2:#2A379B;
  --stap:8px;
  --r1:4px;--r2:8px;--r3:12px;--r4:16px;--r5:24px;--r6:32px;--r7:40px;--r8:56px;--r9:80px;--r10:96px;--r11:120px;--r12:160px;
  --marge:round(clamp(20px,4vw,64px),var(--stap));
  --goot:round(clamp(16px,1.6vw,32px),var(--stap));
  --sec:round(clamp(56px,6vw,120px),var(--stap));
  --kop:'Bricolage Grotesque','Arial',sans-serif;
  --tekst:'Nunito',system-ui,sans-serif;
  --balk:64px;
  --hoek:20px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:calc(var(--balk) + 8px);scrollbar-gutter:stable;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--kalk);color:var(--inkt);font-family:var(--tekst);font-size:17px;line-height:1.5;overflow-x:clip}
img,video,svg{max-width:100%;display:block}
img{height:auto}
[hidden]{display:none!important}
a{color:inherit}
h1,h2,h3{font-family:var(--kop);font-weight:700;line-height:1;letter-spacing:-.03em;margin:0;font-variation-settings:'opsz' 96}
p{margin:0}
.vlak{width:min(100% - 2*var(--marge),1760px);margin-inline:auto}
.visueel-verborgen{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.spring{position:absolute;left:-999px;top:8px;background:var(--rood);color:var(--kalk);padding:12px 16px;z-index:50;border-radius:999px}
.spring:focus{left:8px}
.label{font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:var(--r4)}
.inleiding{font-size:19px;max-width:46ch}

/* merkteken: hun logo en hun krabbel, nagetrokken uit hun posts */
.logo-klein{width:auto;height:40px;display:block}
.punt{width:18px;height:30px;flex:0 0 auto;background:url(beeld/krabbel.svg) center/contain no-repeat;margin-top:-2px}
.hier .punt,.feed .punt{background-image:url(beeld/krabbel-fel.svg)}
.sticker{letter-spacing:0;display:inline-block;background:var(--kalk);color:var(--luik);border:2px solid var(--rood);font-family:var(--kop);font-weight:600;font-size:14px;padding:6px 12px;border-radius:999px;box-shadow:0 0 0 3px var(--kalk);margin-bottom:var(--r2)}
.doodle{display:inline-block;background:center/contain no-repeat;flex:0 0 auto}

/* knoppen */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:12px 24px;border-radius:999px;background:var(--rood);color:var(--kalk);font-family:var(--kop);font-weight:600;font-size:19px;text-decoration:none;border:0;cursor:pointer;box-shadow:0 0 0 3px var(--kalk);transition:transform .18s cubic-bezier(.22,.61,.36,1),background .18s}
.knop:active{transform:scale(.97)}
.knop:focus-visible,.link-ig:focus-visible,.balk-nav a:focus-visible,input:focus-visible,button:focus-visible{outline:3px solid var(--luik);outline-offset:3px}
.knop-klein{min-height:44px;padding:8px 18px;font-size:17px}
.knop-groot{min-height:64px;font-size:22px;padding:16px 32px;width:100%}
.knop-licht{background:var(--kalk);color:var(--luik);box-shadow:0 0 0 3px var(--luik)}
.hier .knop,.teller .knop,.feed .knop{background:var(--kalk);color:var(--luik)}
.link-ig{font-weight:700;text-decoration:underline;text-underline-offset:4px;min-height:44px;display:inline-flex;align-items:center}
.link-knop{background:none;border:0;padding:12px 0;font:inherit;font-weight:700;text-decoration:underline;text-underline-offset:4px;cursor:pointer;color:inherit;min-height:44px}

/* balk */
.balk{position:fixed;inset:0 0 auto 0;height:var(--balk);display:flex;align-items:center;justify-content:space-between;padding-inline:var(--marge);z-index:40;background:var(--kalk);transition:box-shadow .25s}
.balk.vast{background:var(--kalk);box-shadow:0 1px 0 rgba(15,31,168,.18)}
.balk-merk{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--kop);font-weight:600;font-size:22px;min-height:44px}
.balk-nav{display:flex;align-items:center;gap:var(--r5)}
.balk-nav a{text-decoration:none;font-weight:700;min-height:44px;display:inline-flex;align-items:center}
.balk-menu{display:none;width:48px;height:48px;border:0;background:none;padding:12px;cursor:pointer}
.balk-menu span{display:block;height:3px;background:var(--inkt);border-radius:2px;margin:6px 0;transition:transform .2s}
.balk-menu[aria-expanded=true] span:first-child{transform:translateY(4.5px) rotate(45deg)}
.balk-menu[aria-expanded=true] span:last-child{transform:translateY(-4.5px) rotate(-45deg)}
.menu{position:fixed;inset:var(--balk) 0 auto 0;background:var(--kalk);z-index:39;padding:var(--r4) var(--marge) var(--r6);display:grid;gap:var(--r1);box-shadow:0 12px 24px rgba(15,31,168,.18)}
.menu a{font-family:var(--kop);font-weight:600;font-size:28px;text-decoration:none;min-height:52px;display:flex;align-items:center;border-bottom:1px solid rgba(15,31,168,.18)}

/* 1. hero: hun logo links, hun openingsalbum als post rechts */
.hero{padding-top:calc(var(--balk) + var(--r7));padding-bottom:var(--r9);min-height:100svh;display:flex;align-items:center;position:relative;overflow:clip}
.hero-raster{display:grid;grid-template-columns:6fr 5fr;gap:calc(var(--goot)*2);align-items:center}
.hero-logo{margin:0 0 var(--r5);width:min(40vw,580px)}
.hero-logo img{width:100%;height:auto}
.js .hero-logo img{animation:landen .7s cubic-bezier(.16,1,.3,1) both}
@keyframes landen{from{transform:scale(.9) rotate(-3deg);opacity:0}to{transform:none;opacity:1}}
.hero-zin{font-family:var(--kop);font-weight:600;font-size:40px;line-height:1.08;max-width:18ch;letter-spacing:-.01em}
.hero-plek{margin-top:var(--r4);font-size:19px;max-width:40ch}
.ballon{margin-top:var(--r6);display:inline-flex;align-items:center;min-height:76px;padding:16px 40px 30px 44px;background:url(beeld/ballon.svg) center/100% 100% no-repeat;color:var(--rood);font-family:var(--kop);font-weight:600;font-size:19px;line-height:1.2;white-space:pre-line;transform:rotate(-2deg);transform-origin:left center}
.hero-acties{display:flex;flex-wrap:wrap;gap:var(--r5);align-items:center;margin-top:var(--r6)}

.post-plek{position:relative;justify-self:end;width:min(100%,600px)}
.post{position:relative;z-index:1;background:#FFF8EA;border-radius:24px;box-shadow:0 0 0 3px var(--luik),0 30px 60px rgba(15,31,168,.22);overflow:hidden;transform:rotate(1.5deg)}
.post-kop{display:flex;align-items:center;gap:10px;padding:12px 16px;font-size:16px}
.post-avatar{width:36px;height:36px;border-radius:50%;background:var(--kalk) url(beeld/logo.svg) center/82% no-repeat;box-shadow:0 0 0 2px var(--kalk),0 0 0 4px var(--rood)}
.post-beeld{position:relative;aspect-ratio:1/1;background:var(--luik2);cursor:pointer;touch-action:pan-y;-webkit-tap-highlight-color:transparent;overflow:hidden}
.dia{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;visibility:hidden}
.dia.aan,.dia.was{visibility:visible}
.dia.was{z-index:0}
.dia.aan{z-index:1}
.js .dia.aan.nieuw{animation:dia-in .7s ease both}
@keyframes dia-in{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}}
.dia-pijl{position:absolute;top:50%;width:44px;height:44px;margin-top:-22px;border-radius:50%;border:0;background:rgba(247,230,198,.88);cursor:pointer;z-index:2;opacity:0;transition:opacity .2s}
.dia-pijl::before{content:"";position:absolute;inset:0;margin:auto;width:10px;height:10px;border:solid var(--luik);border-width:0 3px 3px 0;transform:translateX(-2px) rotate(-45deg)}
.dia-terug{left:10px}.dia-terug::before{transform:translateX(2px) rotate(135deg)}
.dia-verder{right:10px}
.dia-pijl:focus-visible{opacity:1}
.post-acties{display:flex;align-items:center;gap:var(--r3);padding:8px 10px 0}
.hart{width:48px;height:48px;border:0;background:none;padding:10px;cursor:pointer;color:var(--luik)}
.hart svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;transition:transform .2s}
.hart[aria-pressed=true]{color:var(--rood)}
.hart[aria-pressed=true] svg{fill:currentColor;transform:scale(1.12)}
.stipjes{display:flex;gap:6px;margin-left:calc(50% - 90px)}
.stip{width:24px;height:44px;border:0;background:none;padding:0;cursor:pointer;position:relative}
.stip::before{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:rgba(15,31,168,.3);transition:background .2s,transform .2s}
.stip[aria-selected=true]::before{background:var(--luik);transform:scale(1.25)}
.post-tekst{padding:4px 16px 16px;font-size:16px}

/* 2. Hier */
.hier{background:var(--luik);color:var(--kalk);padding-block:var(--sec)}
.hier-raster{display:grid;grid-template-columns:7fr 5fr;gap:calc(var(--goot)*2);align-items:center}
.kaart{margin:0;border-radius:var(--hoek);overflow:hidden;box-shadow:0 30px 60px rgba(11,24,137,.3);background:var(--luik2)}
.kaart img{width:100%;aspect-ratio:1600/1100}
.kaart figcaption{font-size:13px;padding:8px 16px;background:var(--luik2);opacity:.85}
.hier h2{font-size:56px;max-width:16ch}
.hier-tekst p:not(.label){margin-top:var(--r5);max-width:52ch}
.lijst{list-style:none;padding:0;margin:var(--r6) 0 0;display:grid;gap:var(--r3);max-width:52ch}
.lijst li,.vijvers-lijst li{display:flex;gap:var(--r3);align-items:flex-start}
.hier .knop-licht{margin-top:var(--r6);box-shadow:0 0 0 3px var(--kalk)}

/* 3. OH ja */
.ohja{padding-block:var(--sec) var(--sec)}
.ohja-kop-rij{display:grid;grid-template-columns:auto 1fr;gap:var(--r6);align-items:end;margin-bottom:var(--r7)}
.ohja h2{font-size:128px;display:flex;align-items:center;gap:.12em;white-space:nowrap}
.doodle-koffie{width:.9em;height:.6em;background-image:url(beeld/koffie.svg);transform:rotate(-8deg)}
.doodle-wijn{width:.56em;height:.66em;background-image:url(beeld/wijn.svg);transform:rotate(8deg)}
.strook{display:flex;gap:var(--goot);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline:var(--marge);padding:var(--r2) var(--marge) var(--r6);margin-inline:0;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.strook::after{content:"";flex:0 0 var(--marge)}
.tegel{margin:0;flex:0 0 clamp(240px,24vw,380px);scroll-snap-align:start;position:relative}
.tegel img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--hoek)}
.tegel figcaption{margin-top:var(--r3);max-width:30ch;font-size:14px}
.tegel .sticker,.vijvers-raster .sticker{display:table;margin-bottom:var(--r2)}
.tik{cursor:pointer;-webkit-tap-highlight-color:transparent;position:relative}
.oh-burst{position:absolute;width:150px;height:150px;margin:-75px 0 0 -75px;pointer-events:none;z-index:5;display:grid;place-items:center}
.oh-burst::before{content:"";position:absolute;inset:-10% 22%;background:url(beeld/krabbel.svg) center/contain no-repeat}
.oh-burst span{position:relative;font-family:var(--kop);font-weight:600;font-size:56px;color:var(--luik);text-shadow:0 0 0 var(--kalk),2px 2px 0 var(--kalk),-2px -2px 0 var(--kalk),2px -2px 0 var(--kalk),-2px 2px 0 var(--kalk)}
.oh-burst.groot{width:260px;height:260px;margin:-130px 0 0 -130px}
.oh-burst.groot span{font-size:96px}
.js .oh-burst{animation:burst .9s cubic-bezier(.16,1,.3,1) forwards}
@keyframes burst{0%{opacity:0;transform:scale(.3) rotate(-12deg)}25%{opacity:1;transform:scale(1.12) rotate(4deg)}70%{opacity:1;transform:scale(1) rotate(-3deg) translateY(-8px)}100%{opacity:0;transform:scale(.92) translateY(-36px)}}

/* 4. de feed */
.feed{background:var(--luik);color:var(--kalk);padding-block:var(--sec)}
.feed-raster{display:grid;grid-template-columns:4fr 7fr;gap:calc(var(--goot)*2);align-items:center}
.feed h2{font-size:128px;line-height:.95}
.feed h2 .nw{white-space:nowrap}
.oh-krabbel{position:relative;display:inline-block}
.oh-krabbel::before{content:"";position:absolute;left:-6%;top:-38%;width:62%;height:176%;background:url(beeld/krabbel-fel.svg) center/contain no-repeat;z-index:-1}
.feed h2{position:relative;z-index:0}
.feed-tekst p{margin-top:var(--r6);font-size:19px;max-width:40ch}
.feed .knop-licht{margin-top:var(--r6);box-shadow:0 0 0 3px var(--kalk)}
.feed-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.feed-tegel{display:block;aspect-ratio:1/1;overflow:hidden;border-radius:8px;background:var(--luik2)}
.feed-tegel img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.22,.61,.36,1),filter .3s}
.feed-tegel:focus-visible img{transform:scale(1.05)}
.feed-tegel:focus-visible{outline:3px solid var(--kalk);outline-offset:3px}

/* 5. Zeg OH */
.zegoh{padding-block:var(--sec);background:var(--kalk2)}
.zegoh-raster{display:grid;grid-template-columns:5fr 7fr;gap:calc(var(--goot)*2);align-items:start}
.zegoh h2{font-size:128px;line-height:.9}
.oh-woord{color:var(--rood)}
.zegoh .inleiding{margin-top:var(--r5)}
.mail-direct{margin-top:var(--r5);font-family:var(--kop);font-weight:600;font-size:22px}
.mail-direct a{color:var(--rood);text-underline-offset:5px;display:inline-block;padding-block:10px;margin-block:-10px}
.bevestiging a{color:inherit}
.stickervel{display:grid;grid-template-columns:1fr 1fr;gap:var(--r5) var(--goot);background:var(--kalk);border-radius:28px;padding:var(--r6);box-shadow:0 0 0 4px var(--luik) inset;position:relative}
.stickervel::before{content:"";position:absolute;inset:0;border-radius:28px;background:repeating-linear-gradient(90deg,transparent 0 14px,var(--kalk2) 14px 16px);opacity:0;pointer-events:none}
.veld{display:grid;gap:var(--r2);margin:0;padding:0;border:0;min-width:0}
.veld label,.veld legend{font-family:var(--kop);font-weight:600;font-size:19px;padding:0}
.veld input{width:100%;min-height:52px;border:3px solid var(--luik);border-radius:14px;padding:10px 14px;font:inherit;font-size:17px;background:#fff;color:var(--inkt)}
.lokval{position:absolute!important;width:0!important;height:0!important;padding:0!important;border:0!important;opacity:0;pointer-events:none;overflow:hidden}
.veld input::placeholder{color:#8a8f98}
input[type=date]{-webkit-appearance:none;appearance:none;display:block;text-align:left}
input[type=date]::-webkit-date-and-time-value{text-align:left}
.momenten,.aantal{grid-column:span 1}
.momenten-rij{display:flex;flex-wrap:wrap;gap:var(--r2)}
.sticker-knop{min-height:48px;padding:8px 18px;border-radius:999px;border:3px solid var(--luik);background:#fff;font-family:var(--kop);font-weight:600;font-size:17px;cursor:pointer;color:var(--inkt);transition:transform .15s,background .15s}
.sticker-knop[aria-checked=true]{background:var(--luik);color:var(--kalk);border-color:var(--luik);transform:rotate(-3deg)}
.stepper{display:grid;grid-template-columns:52px 1fr 52px;gap:var(--r2);align-items:center}
.stap-knop{font-family:var(--kop);min-height:52px;border-radius:14px;border:3px solid var(--luik);background:#fff;font-size:28px;font-weight:700;cursor:pointer;color:var(--inkt)}
.stepper input{text-align:center;-moz-appearance:textfield}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.fout{grid-column:1/-1;color:#A8321E;font-weight:700}
.stickervel .knop-groot{grid-column:1/-1;box-shadow:none}
.kleine-letters{grid-column:1/-1;font-size:14px;color:var(--inkt2)}
.bevestiging{grid-column:2;background:var(--luik);color:var(--kalk);border-radius:28px;padding:var(--r7) var(--r6);text-align:center;display:grid;justify-items:center;gap:var(--r3)}
.bevestiging h3{font-size:56px}
.oh-bevestig{width:220px;height:auto;transform:rotate(-4deg)}
.bevestiging p{max-width:40ch;font-size:19px}

/* 6. 1782 */
.molen{background:var(--luik2);color:var(--kalk);padding-block:var(--sec)}
.molen{overflow:clip}
.molen-raster{display:grid;grid-template-columns:4fr 7fr;gap:calc(var(--goot)*2);align-items:center}
.jaartal{font-family:var(--kop);font-weight:600;font-size:202px;line-height:.85;color:var(--kalk);-webkit-text-stroke:0;text-shadow:6px 6px 0 var(--rood);letter-spacing:-.04em;margin-left:-.04em}
.molen h2{font-size:40px;margin-top:var(--r5)}
.molen-tekst p:not(.jaartal){margin-top:var(--r4);max-width:56ch;font-size:19px}
.bron{font-size:14px;opacity:.7}
.sticker-nacht{margin-bottom:var(--r4)}
.molen-beeld{margin:0 calc(-1*var(--marge)) 0 0;max-width:1060px;justify-self:end;width:calc(100% + var(--marge));border-radius:var(--hoek) 0 0 var(--hoek);overflow:hidden;box-shadow:0 30px 60px rgba(5,10,60,.45)}
.molen-beeld img{aspect-ratio:4/5;object-fit:cover;object-position:50% 50%;width:100%}
.molen-beeld figcaption{font-size:14px;padding:10px 16px;background:var(--rood);color:var(--kalk)}

/* 7. Rond de vijvers */
.vijvers{padding-block:var(--sec)}
.vijvers-kop{display:grid;grid-template-columns:auto 1fr;gap:var(--r6);align-items:end;margin-bottom:var(--r7)}
.vijvers h2{font-size:88px}
.vijvers-raster{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--goot);align-items:start}
.vijvers-raster figure{margin:0}
.vijvers-raster img{width:100%;border-radius:var(--hoek);object-fit:cover}
.vv-breed{grid-column:1/9}
.vv-breed img{aspect-ratio:3/2}
.vv-staand{grid-column:9/13}
.vv-staand img{aspect-ratio:3/4}
.vv-staand:nth-child(3){grid-column:1/5}
.vv-breed2{grid-column:5/13}
.vv-breed2 img{aspect-ratio:3/2}
.vijvers-raster figcaption{margin-top:var(--r3);max-width:34ch;font-size:14px}
.vijvers-lijst{list-style:none;padding:0;margin:var(--r8) 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--r5) var(--goot)}

/* 8. U zei OH */
.teller{background:var(--luik);color:var(--kalk);padding-block:var(--sec)}
.teller-raster{display:grid;grid-template-columns:7fr 5fr;gap:calc(var(--goot)*2);align-items:center}
.teller h2{font-size:88px}
.teller-cijfer{display:inline-block;background:var(--kalk);color:var(--rood);padding:0 .25em;border-radius:.3em;transform:rotate(-4deg);min-width:1.2em;text-align:center}
.teller-tekst p{margin-top:var(--r5);max-width:46ch;font-size:19px}
.teller .knop{margin-top:var(--r6);box-shadow:0 0 0 3px var(--kalk)}
.teller-beeld{margin:0;border-radius:var(--hoek);overflow:hidden;justify-self:end;width:min(100%,420px);transform:rotate(-2deg);box-shadow:0 30px 60px rgba(11,24,137,.3)}
.teller-beeld img{aspect-ratio:1/1;object-fit:cover;width:100%}

/* OH ja: drie blokken, hun eigen woorden */
.drie{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(var(--goot)*2);align-items:start}
.blok figure{margin:0 0 var(--r5)}
.blok img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--hoek)}
.blok .blok-titel{letter-spacing:0;font-size:18px;padding:8px 16px;margin-bottom:var(--r4)}
.blok h4{font-family:var(--kop);font-weight:600;font-size:22px;color:var(--luik);margin:var(--r5) 0 var(--r2)}
.blok h4:first-of-type{margin-top:0}
.blok p{margin:0 0 var(--r3);font-size:17px;line-height:1.55;max-width:46ch}
.blok .blok-slot{font-family:var(--kop);font-weight:600;font-size:21px;color:var(--rood);margin-top:var(--r4)}
.feed-knoppen{display:flex;flex-wrap:wrap;gap:var(--r4);margin-top:var(--r6)}
.feed .feed-knoppen .knop-licht{margin-top:0}
.uren td.doorlopend{text-align:right}

/* voet: links hun urenbord als kaart, rechts drie rijen, onderaan één regel */
.voet{border-top:2px solid var(--luik);padding:var(--sec) 0 var(--r7)}
.voet-boven{display:grid;grid-template-columns:minmax(0,600px) minmax(0,1fr);gap:calc(var(--goot)*3);align-items:start}
.uren-kaart{background:#FFF8EA;border-radius:24px;box-shadow:0 0 0 3px var(--luik);padding:var(--r6) var(--r7) var(--r5);max-width:600px}
.uren-kaart .welcome{width:min(100%,280px);height:auto;margin:0 0 var(--r2) -8px}
.uren{margin:0;width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;font-family:var(--kop);font-weight:500;font-size:22px}
.ico{display:inline-block;height:44px;background:center/contain no-repeat;vertical-align:bottom}
.ico-koffie{width:66px;background-image:url(beeld/koffie.svg)}
.ico-wijn{width:38px;background-image:url(beeld/wijn.svg)}
.uren th,.uren td{padding:6px 0;text-align:right;vertical-align:middle}
.uren tbody th{text-align:left;font-weight:600}
.uren td{padding-left:var(--r5);white-space:nowrap}
.dicht-rij th,.dicht-rij td{padding-top:var(--r3)}
.uren .dicht{color:var(--rood);font-weight:600}
.voet-info{display:grid}
.info-rij{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--r5);row-gap:var(--r2);align-items:center;padding:var(--r6) 0;border-bottom:1px solid rgba(15,31,168,.18)}
.info-rij:first-child{padding-top:0}
.info-rij:last-child{border-bottom:0}
.info-rij h3{grid-column:1/-1;font-size:22px}
.info-rij p{max-width:34ch}
.info-links{display:flex;gap:var(--r2);flex-wrap:wrap;justify-content:flex-end}
.info-link{display:inline-flex;align-items:center;min-height:44px;padding:8px 18px;border-radius:999px;box-shadow:inset 0 0 0 2px var(--luik);font-family:var(--kop);font-weight:600;text-decoration:none;white-space:nowrap}
.info-link:active{background:var(--luik);color:var(--kalk)}
.info-rij .knop{box-shadow:none}
.voet-onder{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--r3) var(--r6);margin-top:var(--r9);padding-top:var(--r5);border-top:1px solid rgba(15,31,168,.18)}
.voet-merk{display:flex;align-items:center;gap:var(--r3);font-size:14px;font-weight:700}
.voet-credits{font-size:14px;color:var(--inkt2);max-width:72ch}
.teller-beeld figcaption{font-size:14px;margin-top:var(--r3);opacity:.9}

/* muis: hover-effecten alleen waar een echte muis is */
@media (hover:hover) and (pointer:fine){
  .knop:hover{transform:translateY(-2px)}
  .post-beeld:hover .dia-pijl{opacity:1}
  .feed-tegel:hover img{transform:scale(1.05)}
  .info-link:hover{background:var(--luik);color:var(--kalk)}
}
/* aanraken: geen grijze flits, geen dubbeltik-zoom op knoppen en de stepper */
a,button,input,.tik,.post-beeld,.stip{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.post-beeld{touch-action:pan-y}

/* plakbalk op de telefoon */
.plakbalk{display:none}

/* onthulling (uit wow/onthul.js) */
@media (min-width:761px){.rv-aan .rv{opacity:0;transform:translateY(12px)}}
.rv-aan .rv.in{opacity:1;transform:none;transition:opacity .52s cubic-bezier(.22,.61,.36,1),transform .52s cubic-bezier(.22,.61,.36,1)}

@media (max-width:1100px){
  .hero-raster,.hier-raster,.molen-raster,.teller-raster{grid-template-columns:1fr 1fr}
  .feed-raster{grid-template-columns:1fr}
  .zegoh-raster{grid-template-columns:1fr}
  .voet-boven{grid-template-columns:1fr;gap:var(--r8)}
  .bevestiging{grid-column:auto}
}
@media (max-width:760px){
  :root{--balk:56px;--hoek:16px}
  body{font-size:16px}
  .balk-nav{display:none}
  .balk-menu{display:block}
  .hero{min-height:auto;padding-bottom:var(--r8)}
  .hero-raster,.hier-raster,.molen-raster,.teller-raster{grid-template-columns:1fr}
  .hero{padding-top:calc(var(--balk) + var(--r4))}
  .hero-raster{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .hero-tekst{display:contents}
  .hero-logo{order:1;width:min(64vw,300px);margin-bottom:var(--r3)}
  .hero-zin{order:2}
  .post-plek{order:3}
  .hero-plek{order:4;margin-top:var(--r6)}
  .ballon{order:5;align-self:flex-start}
  .hero-acties{order:6}
  .hero-zin{font-size:24px;max-width:none}
  .hero-plek{font-size:17px}
  .ballon{font-size:16px;min-height:64px;padding:14px 30px 28px 36px;max-width:100%}
  .post-plek{justify-self:stretch;width:100%;margin-top:var(--r5)}
  .post{transform:none}
  .dia-pijl{opacity:1;width:44px;height:44px}
  .feed h2{font-size:72px}
  .feed-grid{grid-template-columns:repeat(2,1fr)}
  .ohja h2{white-space:normal;flex-wrap:wrap}
  .uren{font-size:18px}
  .uren-kaart{padding:var(--r6) var(--r5) var(--r5)}
  .voet{padding-bottom:calc(var(--r8) + 80px)}
  .info-rij{grid-template-columns:1fr}
  .info-links{justify-content:flex-start}
  .info-rij .knop,.info-rij>.info-link{justify-self:start}
  .voet-onder{margin-top:var(--r8)}
  .uren td{padding-left:var(--r3)}
  .ohja-kop-rij,.vijvers-kop{grid-template-columns:1fr;gap:var(--r3)}
  .ohja h2{font-size:56px}
  .hier h2{font-size:40px}
  .molen h2{font-size:28px}
  .tegel{flex-basis:72vw}
  .drie{grid-template-columns:1fr;gap:var(--r8)}
  .zegoh h2{font-size:56px}
  .stickervel{grid-template-columns:1fr;padding:var(--r5);border-radius:20px}
  .stickervel::before{border-radius:20px}
  .bevestiging h3{font-size:44px}
  .jaartal{font-size:88px}
  .molen-beeld{margin-right:calc(-1*var(--marge));border-radius:var(--hoek) 0 0 var(--hoek)}
  .molen-beeld img{aspect-ratio:1/1}
  .vijvers h2{font-size:56px}
  .vijvers-raster{grid-template-columns:1fr 1fr}
  .vv-breed,.vv-breed2{grid-column:1/-1}
  .vv-staand{grid-column:auto}
  .vv-staand:nth-child(3){grid-column:auto;margin-top:0}
  .vijvers-lijst{grid-template-columns:1fr}
  .teller h2{font-size:40px;line-height:1.05}
  .teller-beeld{justify-self:start;width:min(100%,420px);transform:none}
  .plakbalk{display:grid;grid-template-columns:1fr 1fr;gap:var(--r2);position:fixed;left:0;right:0;bottom:0;padding:var(--r2) var(--r4) calc(var(--r2) + env(safe-area-inset-bottom));background:var(--kalk);box-shadow:0 -1px 0 rgba(15,31,168,.18);z-index:38}
  .plakbalk .knop{min-height:52px;font-size:18px;box-shadow:none;border:3px solid var(--luik)}
  .plakbalk .knop-licht{box-shadow:none}
  .plakbalk{transition:transform .2s}
  html.typen .plakbalk,html.menu-open .plakbalk{transform:translateY(110%)}
  html.menu-open{overflow:hidden}
}
@media (max-width:430px){
  h1{font-size:40px}
  .ohja h2,.zegoh h2{font-size:52px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .hero-logo img,.js .oh-burst{animation:none}
  .js .dia.aan.nieuw{animation:none}
  .js .oh-burst{opacity:1;transition:opacity .3s}
  .rv-aan .rv{opacity:1;transform:none;transition:none}
  .knop,.sticker-knop{transition:none}
  .knop:hover{transform:none}
}