@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/bricolage-grotesque-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/bricolage-grotesque-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(fonts/fraunces-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(fonts/fraunces-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Grieks en Cyrillisch (el, bg): Fraunces en Bricolage hebben die tekens niet. Literata en Manrope vallen in onder dezelfde familienaam. */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400 500;font-display:swap;src:url(fonts/literata-greek.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF,U+1F00-1FFF}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400 500;font-display:swap;src:url(fonts/literata-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/manrope-greek.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF,U+1F00-1FFF}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/manrope-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}

/* Coming soon · merkgids 1.0 richting A: papier draagt, één roos vlak met bloemvenster, framboos alleen voor de knop. */
:root{
  --papier:#FFF4F6; --vlak:#FCE6EB; --vlak2:#F7D9E0; --lijn:#F1D1D9; --lijn-sterk:#9B7880;
  --tekst:#33201C; --tekst2:#6B4A50; --knop:#B8325A; --op-knop:#FFFFFF; --roos:#F7A6C0; --op-roos:#33201C;
  --bloem:#B8325A; --woord:#33201C; --veld:#FFFFFF; --fout:#A3203F; --ok:#3F7A4E;
  --salie:#A9C3A0; --perzik:#F6B8A8; --boter:#EFCF6E;
  --kop:"Fraunces","Iowan Old Style",Georgia,serif;
  --tekstf:"Bricolage Grotesque",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --korrel:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .12 0 0 0 0 .1 0 0 0 .38 -.14'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --vezel:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='v'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .35' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .25 0 0 0 0 .15 0 0 0 0 .1 0 0 0 .22 -.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23v)'/%3E%3C/svg%3E");
  --vlek:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='120'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.035' numOctaves='3' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .12 0 0 0 0 .08 0 0 0 .35 -.12'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --papier:#1C1014; --vlak:#27181D; --vlak2:#33222A; --lijn:#402C33; --lijn-sterk:#8A6F77;
  --tekst:#FBEAF0; --tekst2:#D9BFC6; --knop:#F7A6C0; --op-knop:#33201C; --roos:#F7A6C0; --op-roos:#33201C;
  --bloem:#F7A6C0; --woord:#FBEAF0; --veld:#27181D; --fout:#FF9FB6; --ok:#9FD3A9; color-scheme:dark}}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papier);color:var(--tekst);font-family:var(--tekstf);font-size:1.0625rem;line-height:1.55}
h1,h2,h3,p{margin:0}
a{color:inherit}
img{display:block;max-width:100%}
.f{font-family:var(--kop);font-weight:400;font-variation-settings:"SOFT" 100,"WONK" 0}
:root{--r1:.75rem;--r2:1.5rem;--r3:clamp(2rem,1.2rem + 2.5vw,3rem);--r4:clamp(3.5rem,2rem + 5vw,6.5rem);--rand:clamp(1.25rem,.5rem + 3.5vw,4rem)}
.wrap{max-width:84rem;margin:0 auto;padding-left:max(var(--rand),env(safe-area-inset-left));padding-right:max(var(--rand),env(safe-area-inset-right))}
.logo{display:block;height:auto;aspect-ratio:963.6/227.9}
.zacht{color:var(--tekst2)}
.klein{font-size:.875rem}
.ey{font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--knop)}

/* kop */
.kop{padding-top:max(var(--r2),env(safe-area-inset-top));padding-bottom:var(--r1);display:flex;justify-content:space-between;align-items:center;gap:1rem}
.kop .logo{width:8.5rem}
.kop .kop-knop{font-weight:600;font-size:.9375rem;text-decoration:none;padding:.55rem 1rem;border-radius:99px;box-shadow:inset 0 0 0 1.5px var(--lijn);white-space:nowrap}
.kop .kop-knop:hover{box-shadow:inset 0 0 0 1.5px var(--lijn-sterk)}

/* hero */
.held{display:grid;grid-template-columns:1fr;gap:var(--r3);padding-block:var(--r2) var(--r3);align-items:center}
@media (min-width:60rem){.held{grid-template-columns:1fr 1fr;gap:clamp(3rem,6vw,7rem);padding-block:var(--r3) calc(var(--r3) * 1.6)}}
.held-tekst{display:grid;gap:var(--r2);min-width:0;max-width:34rem}
.held h1{font-size:clamp(2.5rem,1.4rem + 3.6vw,4.8rem);line-height:1.02;letter-spacing:-.015em;text-wrap:balance}
.lead{font-size:clamp(1.0625rem,1rem + .4vw,1.3rem);color:var(--tekst2);max-width:30rem;text-wrap:pretty}

/* wachtlijst */
.wl{display:grid;gap:.75rem;max-width:30rem}
.wl-rij{display:flex;gap:.5rem;flex-wrap:wrap}
.wl input[type=email]{flex:1 1 14rem;min-width:0;font:inherit;font-size:1rem;color:var(--tekst);background:var(--veld);border:1.5px solid var(--lijn-sterk);border-radius:99px;padding:.85rem 1.2rem;min-height:3.1rem}
.wl input[type=email]:focus-visible{outline:2px solid var(--knop);outline-offset:2px}
.wl input[aria-invalid=true]{border-color:var(--fout)}
.knop{font:inherit;font-weight:600;font-size:1rem;border:0;border-radius:99px;padding:.85rem 1.5rem;min-height:3.1rem;background:var(--knop);color:var(--op-knop);cursor:pointer;white-space:nowrap}
.knop:hover{filter:brightness(1.06)}
.knop:focus-visible{outline:2px solid var(--tekst);outline-offset:2px}
.knop:disabled{opacity:.7;cursor:default}
.fout{color:var(--fout);font-size:.9375rem}
.belofte{display:flex;flex-wrap:wrap;gap:.35rem 1.1rem;font-size:.875rem;color:var(--tekst2)}
.belofte span{display:inline-flex;align-items:center;gap:.4rem}
.belofte svg{width:1rem;height:1rem;flex:0 0 auto}
.gelukt{display:grid;gap:.5rem;max-width:30rem;padding:1.25rem 1.4rem;background:var(--vlak);border-radius:1rem}
.gelukt:focus{outline:none}
.gelukt .f{font-size:1.6rem;line-height:1.15}

/* beeld: één roos vlak met bloemvenster */
.beeld{position:relative;background:var(--korrel),var(--roos);border-radius:1.5rem;aspect-ratio:1/1;max-width:40rem;width:100%;justify-self:end;display:grid;place-items:center}
.beeld svg.bv{width:80%;height:auto;aspect-ratio:1046.4/1020;display:block}
.sticker-tekst{position:absolute;left:1.25rem;bottom:1.25rem;font-weight:700;font-size:.9375rem;background:var(--papier);color:var(--tekst);padding:.5em 1em;border-radius:99px;border:.3em solid #fff;box-shadow:0 .3em .6em -.25em rgba(51,32,28,.45);transform:rotate(-4deg)}

/* stappen */
.sectie{padding-block:var(--r4);border-top:1px solid var(--lijn)}
.sectie h2{font-size:clamp(1.9rem,1.4rem + 1.8vw,2.75rem);line-height:1.08;text-wrap:balance;max-width:24ch}
.stappen{display:grid;gap:var(--r2);margin-top:var(--r3);grid-template-columns:1fr}
@media (min-width:48rem){.stappen{grid-template-columns:repeat(3,1fr)}}
.stap{background:var(--veld);border-radius:1rem;padding:1.6rem;display:grid;gap:.6rem;align-content:start}
.stap .ic{width:2rem;height:2rem;color:var(--tekst)}
.stap h3{font-family:var(--kop);font-weight:400;font-variation-settings:"SOFT" 100;font-size:1.45rem;line-height:1.15}
.stap p{color:var(--tekst2)}
.ic{fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

/* founding scrappers */
.founding{display:grid;gap:2.5rem;align-items:center;grid-template-columns:1fr;background:var(--korrel),var(--roos);color:var(--op-roos);border-radius:1.5rem;padding:clamp(1.75rem,4vw,3.5rem);margin-block:0 var(--r4);border-top:0}
.founding .ey,.founding .zacht,.founding .mail{color:var(--op-roos)}
.founding .zacht{opacity:.85}
@media (min-width:52rem){.founding{grid-template-columns:1.3fr 1fr}}
.founding .tekst{display:grid;gap:1rem;max-width:34rem}
.ordner{position:relative;width:min(100%,32rem);aspect-ratio:32/31;justify-self:center;container-type:inline-size}
.ordner .vel{position:absolute;inset:0 30.63cqw 0 0;border-radius:1.094cqw;background:var(--korrel),var(--vezel),#F7F0E8}
.ordner .vel.o2{transform:translate(9px,9px) rotate(.8deg);background:var(--korrel),#EADFD4;box-shadow:0 14px 30px -18px rgba(30,15,15,.55)}
.ordner .vel.o1{transform:translate(4px,4px) rotate(.3deg);background:var(--korrel),#F1E8DE}
.ordner .blad{position:absolute;inset:0 30.63cqw 0 0;z-index:3;border-radius:1.094cqw;
  background:var(--korrel),var(--vezel),
    linear-gradient(90deg,transparent 9.531cqw,rgba(184,50,90,.32) 9.531cqw,rgba(184,50,90,.32) calc(9.531cqw + 1px),transparent calc(9.531cqw + 1px)),
    repeating-linear-gradient(180deg,transparent 0 5.781cqw,rgba(110,140,170,.28) 5.781cqw calc(5.781cqw + 1px)),#FFFBF5;
  background-position:0 0,0 0,0 0,0 14.37cqw,0 0;
  box-shadow:0 1px 1px rgba(51,32,28,.15),0 20px 40px -22px rgba(30,15,15,.6);padding:4.375cqw 3.75cqw 3.75cqw 11.56cqw;color:#33201C;overflow:hidden}
.ordner .gat{position:absolute;left:3.281cqw;width:3.281cqw;height:3.281cqw;border-radius:50%;background:var(--roos);box-shadow:inset 0 1.5px 2.5px rgba(0,0,0,.45),0 .5px 0 rgba(255,255,255,.6)}
.ordner .blad .f{font-size:5.156cqw;line-height:1.1}
.ordner .hand{font-family:var(--kop);font-variation-settings:"SOFT" 100,"WONK" 1;font-style:normal;font-size:3.281cqw;color:#4A3A52;line-height:5.781cqw;margin-top:1.719cqw}
.ordner .foto{position:absolute;right:4.062cqw;bottom:5cqw;width:46%;transform:rotate(-3deg);box-shadow:0 6px 12px -6px rgba(30,15,15,.5)}
.ordner .foto img{width:100%;aspect-ratio:4/3;object-fit:cover}
.ordner .foto i{position:absolute;width:15%;aspect-ratio:1;background:var(--korrel),#33201C}
.ordner .foto i:nth-of-type(1){left:-3%;top:-4%;clip-path:polygon(0 0,100% 0,0 100%)}
.ordner .foto i:nth-of-type(2){right:-3%;top:-4%;clip-path:polygon(0 0,100% 0,100% 100%)}
.ordner .foto i:nth-of-type(3){right:-3%;bottom:-4%;clip-path:polygon(100% 0,100% 100%,0 100%)}
.ordner .foto i:nth-of-type(4){left:-3%;bottom:-4%;clip-path:polygon(0 0,100% 100%,0 100%)}
.ordner .tabw{position:absolute;right:0;z-index:2;width:39.38cqw;height:11.2%;top:calc(5% + var(--i) * 14.8%);transform:rotate(var(--r,0deg));transform-origin:left center;filter:drop-shadow(1px 1.5px 0 rgba(30,15,15,.28))}
.ordner .tab{display:flex;align-items:center;justify-content:flex-end;height:100%;padding-right:3.906cqw;
  font-weight:600;font-size:2.812cqw;color:#3A2620;letter-spacing:.015em;
  clip-path:polygon(0 0,90% 0,100% 20%,100% 80%,90% 100%,0 100%);
  background:var(--korrel),var(--korrel),var(--vlek),var(--k);background-size:180px,90px,240px 120px,auto;background-position:0 0,37px 11px,var(--vp,0 0),0 0}
.ordner .tab{position:relative}
.ordner .stempel{position:absolute;right:3.125cqw;top:50%;transform:translateY(-50%);height:auto;width:auto;max-height:58%;max-width:66%;mix-blend-mode:multiply}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mail{font-weight:600;text-underline-offset:.2em}

/* voet */
.voet{padding-block:var(--r3) max(var(--r3),env(safe-area-inset-bottom));border-top:1px solid var(--lijn);display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;align-items:center;font-size:.875rem;color:var(--tekst2)}
.voet .logo{width:6.5rem}
.voet nav{display:flex;gap:1.25rem;flex-wrap:wrap}
.voet a{text-underline-offset:.2em}
@media (prefers-reduced-motion:no-preference){.beeld{animation:op .8s cubic-bezier(.2,.8,.2,1) both}@keyframes op{from{transform:translateY(8px);opacity:.0001}}}

.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wl{gap:var(--r1);margin-top:var(--r1)}
.wl .knop{padding-inline:1.75rem}

/* ---------- site: navigatie, paginakoppen, blog, artikel, veelgesteld, contact ---------- */
.naar-inhoud{position:absolute;left:-999px;top:0;background:var(--knop);color:var(--op-knop);padding:.6rem 1rem;border-radius:0 0 .6rem 0;z-index:9;font-weight:600}
.naar-inhoud:focus{left:0}
main:focus{outline:none}
a:focus-visible{outline:2px solid var(--knop);outline-offset:3px;border-radius:.3rem}
.logo-link{display:block;text-decoration:none}
.kop .hoofd{display:flex;gap:clamp(1rem,2vw,1.6rem);margin-left:clamp(1.25rem,3vw,2.5rem);font-weight:600;font-size:.9375rem;white-space:nowrap}
.kop .hoofd a{text-decoration:none;color:var(--tekst2);padding:.4rem 0;border-bottom:2px solid transparent}
.kop .hoofd a:hover{color:var(--tekst)}
.kop .hoofd a[aria-current=page]{color:var(--tekst);border-bottom-color:var(--knop)}
.sectie-kop{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap}
.meer{font-weight:600;text-underline-offset:.2em}

/* paginakop */
.pagina-kop{padding-block:var(--r3) var(--r4);display:grid;gap:var(--r2)}
.pagina-kop.smal{max-width:44rem}
.pagina-kop h1{font-size:clamp(2.4rem,1.6rem + 3.4vw,4rem);line-height:1.03;letter-spacing:-.015em;text-wrap:balance}
.over-kop{grid-template-columns:1fr;gap:2.5rem;align-items:center}
@media (min-width:56rem){.over-kop{grid-template-columns:1.2fr 1fr;gap:4rem}}
.pk-tekst{display:grid;gap:1.25rem}
.beeld.klein{max-width:26rem}

/* lopende tekst */
.twee{display:grid;grid-template-columns:1fr;gap:1.5rem}
@media (min-width:52rem){.twee{grid-template-columns:1fr 1.4fr;gap:4rem}}
.twee h2{margin-top:.75rem}
.lopend{display:grid;gap:1rem;max-width:40rem}
.lopend p,.lopend li{text-wrap:pretty}
.lopend h2{font-size:1.6rem;line-height:1.15;margin-top:1.25rem}
.lopend ul{margin:0;padding-left:1.25rem;display:grid;gap:.4rem}
.lopend li::marker{color:var(--knop)}
.lopend a{text-underline-offset:.2em}
.stappen.vier{grid-template-columns:1fr}
@media (min-width:40rem){.stappen.vier{grid-template-columns:repeat(2,1fr)}}
@media (min-width:64rem){.stappen.vier{grid-template-columns:repeat(4,1fr)}}

/* blog */
.cattab{display:inline-flex;align-items:center;height:2rem;padding:0 1rem;clip-path:polygon(7% 0,93% 0,100% 100%,0 100%);
  background:var(--korrel),var(--korrel),var(--vlek),var(--k);background-size:180px,90px,240px 120px,auto;background-position:0 0,37px 11px,0 0,0 0}
.cattab img{height:.82rem;width:auto;mix-blend-mode:multiply}
.cattab.klein{height:1.7rem;padding:0 .75rem;clip-path:none;border-radius:.35rem}

.uitgelicht{position:relative;display:grid;grid-template-columns:1fr;border-radius:1.5rem;overflow:hidden;margin-bottom:var(--r3);background:var(--korrel),var(--roos);color:var(--op-roos)}
@media (min-width:52rem){.uitgelicht{grid-template-columns:1.1fr 1fr}}
.ul-foto{display:block;min-height:16rem}
.ul-foto img{width:100%;height:100%;object-fit:cover}
.ul-vlak{display:grid;gap:1.1rem;align-content:center;padding:clamp(1.75rem,4vw,3.5rem)}
.ul-meta{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;font-size:.875rem}
.ul-vlak h2{font-size:clamp(1.9rem,1.3rem + 2vw,2.9rem);line-height:1.06;text-wrap:balance}
.ul-vlak h2 a{text-decoration:none;color:inherit}
.ul-vlak h2 a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.15em}
.ul-vlak p{font-size:1.0625rem;max-width:30rem;opacity:.9}
.knop.donker{justify-self:start;text-decoration:none;background:#33201C;color:#FFF4F6}
.ul-nieuwste{position:absolute;left:1.25rem;top:1.25rem;background:var(--papier);border-radius:99px;border:.3rem solid #fff;padding:.35rem .9rem;box-shadow:0 .3rem .6rem -.25rem rgba(51,32,28,.45);transform:rotate(-4deg);display:flex}
.ul-nieuwste img{height:.9rem;width:auto;mix-blend-mode:multiply}
@media (prefers-color-scheme:dark){.ul-nieuwste{background:#FFF4F6}}

.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:var(--r3)}
.chip{font:inherit;font-weight:600;font-size:.9375rem;color:var(--tekst);background:transparent;border:1.5px solid var(--lijn);border-radius:99px;padding:.5rem 1.1rem;cursor:pointer;min-height:2.6rem}
.chip:hover{border-color:var(--lijn-sterk)}
.chip[aria-pressed=true]{background:var(--knop);border-color:var(--knop);color:var(--op-knop)}
.chip:focus-visible{outline:2px solid var(--knop);outline-offset:2px}

.blograster{display:grid;gap:calc(var(--r3) + 1rem) var(--r2);grid-template-columns:1fr;margin-top:calc(var(--r3) + 1rem)}
@media (min-width:44rem){.blograster{grid-template-columns:repeat(2,1fr)}}
@media (min-width:64rem){.blograster:not(.twee-kol){grid-template-columns:repeat(3,1fr)}}
.blograster.groot{margin-top:2rem;padding-bottom:var(--r3)}
.blogkaart{position:relative;display:grid}
.blogkaart[hidden]{display:none}
.blogkaart > .cattab{position:absolute;left:1.25rem;top:-2rem;z-index:1}
.bk-link{display:grid;grid-template-rows:auto 1fr;height:100%;text-decoration:none;color:inherit;background:var(--veld);border-radius:1rem;overflow:hidden;box-shadow:0 1px 0 var(--lijn)}
.bk-foto{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--vlak)}
.bk-foto img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.bk-link:hover .bk-foto img{transform:scale(1.03)}
.bk-tekst{display:grid;gap:.6rem;align-content:start;padding:1.25rem 1.35rem 1.4rem}
.bk-meta{display:flex;justify-content:space-between;gap:1rem;font-size:.8125rem;color:var(--lijn-sterk)}
.bk-titel{font-family:var(--kop);font-variation-settings:"SOFT" 100,"WONK" 0;font-size:1.4rem;line-height:1.15;text-wrap:balance}
.bk-link:hover .bk-titel{text-decoration:underline;text-decoration-color:var(--knop);text-underline-offset:.18em}
.bk-intro{color:var(--tekst2);font-size:.95rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bk-verder{font-weight:600;font-size:.9375rem;color:var(--knop);margin-top:.2rem}
.geen-artikelen{padding-bottom:var(--r3)}

/* artikel */
.artikel{max-width:42rem;margin-inline:auto;padding-block:var(--r2) var(--r3);display:grid;gap:1.1rem}
.artikel h1{font-size:clamp(2.2rem,1.5rem + 2.8vw,3.5rem);line-height:1.05;letter-spacing:-.01em;text-wrap:balance}
.terug{display:inline-flex;align-items:center;gap:.35rem;font-weight:600;font-size:.9375rem;text-decoration:none;color:var(--tekst2);justify-self:start;margin-bottom:.5rem}
.terug:hover{color:var(--tekst)}
.terug .ic{width:1.1rem;height:1.1rem}
.art-meta{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;font-size:.875rem;color:var(--tekst2)}
.artikel > .lead{font-size:clamp(1.125rem,1.05rem + .4vw,1.3rem)}
.art-foto{margin:1rem 0 0;display:grid;gap:.5rem}
@media (min-width:56rem){.art-foto{margin-inline:-4rem}}
.art-foto img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:1.25rem;box-shadow:0 1.5rem 3rem -2rem rgba(0,0,0,.6)}
.art-foto figcaption{font-size:.8125rem;color:var(--lijn-sterk)}
.kort{position:relative;margin:1.75rem 0 .75rem;background:var(--korrel),var(--vlak);border-radius:0 1rem 1rem 1rem;padding:1.4rem 1.5rem 1.3rem}
.kort-tab{position:absolute;left:0;top:-1.9rem;height:1.9rem;display:flex;align-items:center;padding:0 .9rem;border-radius:.5rem .5rem 0 0;background:var(--korrel),var(--korrel),var(--vlek),#EFCF6E;background-size:180px,90px,240px 120px,auto}
.kort-tab img{height:.8rem;width:auto;mix-blend-mode:multiply}
.kort ul{margin:0;padding-left:1.15rem;display:grid;gap:.45rem}
.kort li::marker{color:var(--knop)}
.art-tekst{max-width:none;gap:1.15rem;font-size:1.0625rem;line-height:1.7}
.art-tekst > p:first-child{font-size:1.15rem;line-height:1.6;color:var(--tekst);font-weight:500}
.art-tekst h2{font-size:clamp(1.5rem,1.3rem + .8vw,1.9rem);margin-top:1.75rem}
.art-cta{margin-top:2rem;background:var(--korrel),var(--roos);color:var(--op-roos);border-radius:1.25rem;padding:1.75rem;display:flex;flex-wrap:wrap;gap:1rem 1.5rem;align-items:center;justify-content:space-between}
.art-cta .f{font-size:1.5rem;line-height:1.15;max-width:18ch}
.art-cta .knop{text-decoration:none;background:#33201C;color:#FFF4F6}
.verder{border-top:1px solid var(--lijn)}
.verder .blograster{margin-top:calc(var(--r2) + 2rem)}

/* veelgesteld */
.vg{display:grid;gap:3rem;max-width:46rem;padding-bottom:4rem}
.vg-groep{display:grid;gap:.25rem}
.vg-groep h2{font-size:1.6rem;margin-bottom:.75rem}
details{border-top:1px solid var(--lijn)}
.vg-groep details:last-child{border-bottom:1px solid var(--lijn)}
summary{list-style:none;cursor:pointer;padding:1.05rem 2.5rem 1.05rem 0;font-weight:600;font-size:1.0625rem;position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"";position:absolute;right:.4rem;top:50%;width:.6rem;height:.6rem;border-right:2px solid var(--knop);border-bottom:2px solid var(--knop);transform:translateY(-70%) rotate(45deg);transition:transform .2s}
details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
summary:focus-visible{outline:2px solid var(--knop);outline-offset:2px;border-radius:.3rem}
details > div{display:grid;gap:.75rem;padding:0 0 1.25rem;color:var(--tekst2);max-width:38rem}
details a{color:var(--tekst);text-underline-offset:.2em}

/* contact */
.ckaarten{display:grid;gap:1.25rem;grid-template-columns:1fr;padding-bottom:4rem}
@media (min-width:44rem){.ckaarten{grid-template-columns:repeat(2,1fr)}}
.ckaart{background:var(--veld);border-radius:1rem;padding:1.75rem;display:grid;gap:.6rem;align-content:start}
.ckaart .ic{width:2rem;height:2rem}
.ckaart h3{font-size:1.45rem;line-height:1.15}
.ckaart p{color:var(--tekst2)}
.ckaart a{font-weight:600;font-size:1.0625rem;text-underline-offset:.2em;margin-top:.4rem}
@media (prefers-reduced-motion:reduce){.bk-foto img,summary::after{transition:none}}
.art-cta.band{margin:0 0 4rem}
.vg{padding-bottom:3rem}
.ckaarten{padding-bottom:3rem}
.ckaart.roos{background:var(--korrel),var(--roos);color:var(--op-roos)}
.ckaart.roos p,.ckaart.roos .zacht{color:var(--op-roos);opacity:.85}

/* genummerde lijstjes in artikelen en antwoorden */
.lopend ol{margin:0;padding-left:1.5rem;display:grid;gap:.4rem}
.lopend ol li::marker{color:var(--knop);font-weight:700}
details ul{margin:0;padding-left:1.25rem;display:grid;gap:.3rem}
details li::marker{color:var(--knop)}
.vg-lees{font-size:.9375rem}
.vg-lees a{font-weight:600}

/* vraagbaak: onderwerpen als kaarten */
.vraagbaak{padding-bottom:1rem}
.vraagbaak .lead{max-width:40rem;margin-top:.75rem}
.vb-raster{display:grid;gap:1rem;grid-template-columns:1fr;margin-top:var(--r3)}
@media (min-width:36rem){.vb-raster{grid-template-columns:repeat(2,1fr)}}
@media (min-width:60rem){.vb-raster{grid-template-columns:repeat(3,1fr)}}
.vb-kaart{display:grid;gap:.4rem;align-content:start;background:var(--veld);border-radius:1rem;padding:1.4rem 1.5rem;text-decoration:none;color:var(--tekst);border:1.5px solid transparent;transition:border-color .2s}
.vb-kaart:hover{border-color:var(--roos)}
.vb-kaart:focus-visible{outline:2px solid var(--knop);outline-offset:2px}
.vb-titel{font-size:1.3rem;line-height:1.2}
.vb-omschr{color:var(--tekst2);font-size:.9375rem}
.vb-aantal{font-weight:600;font-size:.9375rem;color:var(--knop);margin-top:.3rem}
.pagina-kop .terug{margin-bottom:1rem}
.vg-andere{display:grid;gap:1rem;max-width:46rem;padding-bottom:3rem}
a.chip{text-decoration:none;display:inline-flex;align-items:center}
a.chip:hover{border-color:var(--roos)}
@media (prefers-reduced-motion:reduce){.vb-kaart{transition:none}}

/* artikel: inhoudsopgave en vragen */
.inhoudsopgave{border-left:2px solid var(--lijn);padding:.25rem 0 .25rem 1.25rem;margin:.5rem 0}
.inhoudsopgave ol{margin:.6rem 0 0;padding-left:1.2rem;display:grid;gap:.35rem;font-size:.975rem}
.inhoudsopgave li::marker{color:var(--tekst2);font-variant-numeric:tabular-nums}
.inhoudsopgave a{color:var(--tekst2);text-decoration:none}
.inhoudsopgave a:hover{color:var(--tekst);text-decoration:underline;text-underline-offset:.2em}
.art-tekst h2[id]{scroll-margin-top:6rem}
.art-faq{display:grid;gap:.75rem;margin-top:1.5rem}
.art-faq h2{font-size:clamp(1.5rem,1.3rem + .8vw,1.9rem)}
.art-faq details div p{margin:0}

/* ---------- kop: taalkiezer, menuknop en mobiel paneel ---------- */
/* De kop blijft bovenaan staan; de achtergrond loopt door tot de schermrand, met een lijntje zodra je scrolt. */
html{scroll-padding-top:6rem}
body{overflow-x:clip}
.kop-plak{position:sticky;top:0;z-index:50}
.kop-plak::before{content:"";position:absolute;inset:0 -100vmax;background:var(--papier);z-index:-1;border-bottom:1px solid transparent;transition:border-color .2s}
.kop-plak.geschoven::before{border-bottom-color:var(--lijn)}
.kop-plak.geschoven .kop{padding-top:max(var(--r1),env(safe-area-inset-top))}
.kop{transition:padding .2s}
.kop-plak .paneel{max-height:calc(100dvh - 5rem);overflow-y:auto;overscroll-behavior:contain;border-top:0}
.kop-rechts{display:flex;align-items:center;gap:.5rem;margin-left:auto}
.taal{position:relative;border:0}
.taal summary::after{content:none}
.taal ul{display:block;padding-left:0}
.taal summary{list-style:none;display:flex;align-items:center;gap:.35rem;cursor:pointer;font-weight:600;font-size:.875rem;letter-spacing:.04em;padding:.55rem .75rem;position:static;border-radius:99px;color:var(--tekst2);min-height:2.75rem}
.taal summary::-webkit-details-marker{display:none}
.taal summary .ic{width:1.15rem;height:1.15rem}
.taal summary:hover,.taal[open] summary{color:var(--tekst);background:var(--vlak)}
.taal summary:focus-visible{outline:2px solid var(--knop);outline-offset:2px}
.taal-lijst{list-style:none;margin:0;padding:0}
.taal-lijst a{display:block;padding:.5rem .75rem;border-radius:.6rem;text-decoration:none;font-size:.9375rem;color:var(--tekst)}
.taal-lijst a:hover{background:var(--vlak)}
.taal-lijst a[aria-current]{font-weight:700;color:var(--knop)}
.taal .taal-lijst{display:block;position:absolute;right:0;top:calc(100% + .5rem);z-index:20;width:min(31rem,calc(100vw - 2.5rem));columns:2;column-gap:.25rem;
  padding:.5rem;background:var(--papier);border:1px solid var(--lijn);border-radius:1rem;box-shadow:0 14px 40px rgb(51 32 28 / .14)}
.taal .taal-lijst li{break-inside:avoid}

.menu-knop{display:none;align-items:center;gap:.45rem;font:inherit;font-weight:600;font-size:.9375rem;color:var(--tekst);background:none;border:0;cursor:pointer;
  box-shadow:inset 0 0 0 1.5px var(--lijn);border-radius:99px;padding:.5rem 1rem .5rem .8rem;min-height:2.75rem;white-space:nowrap}
.menu-knop:hover{box-shadow:inset 0 0 0 1.5px var(--lijn-sterk)}
.menu-knop:focus-visible{outline:2px solid var(--knop);outline-offset:2px}
.mk-ic{display:inline-flex}
.mk-ic .ic{width:1.25rem;height:1.25rem}
.menu-knop .mk-dicht,.menu-knop[aria-expanded=true] .mk-open{display:none}
.menu-knop[aria-expanded=true] .mk-dicht{display:inline-flex}

.paneel{display:grid;gap:var(--r2);padding:var(--r1) 0 var(--r3);border-top:1px solid var(--lijn)}
.paneel-nav{display:grid}
.paneel-nav a{font-family:var(--kop);font-size:clamp(1.5rem,1.2rem + 1.5vw,2rem);line-height:1.2;padding:.7rem 0;text-decoration:none;border-bottom:1px solid var(--lijn);overflow-wrap:anywhere}
.paneel-nav a[aria-current=page]{color:var(--knop)}
.paneel-knop{text-align:center;text-decoration:none;white-space:normal}
.paneel-talen .ey{display:flex;align-items:center;gap:.4rem;margin-bottom:.5rem}
.paneel-talen .ey .ic{width:1rem;height:1rem}
.paneel-talen .taal-lijst{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.1rem .5rem;margin-inline:-.75rem}

@media (max-width:63.99rem){
  .js .kop .hoofd,.js .kop .kop-knop,.js .kop .taal{display:none}
  .js .menu-knop{display:inline-flex}
  /* zonder JavaScript: menu als tweede regel, gewoon afbreken in plaats van afkappen */
  html:not(.js) .kop{flex-wrap:wrap}
  html:not(.js) .kop .hoofd{order:3;width:100%;margin:0;flex-wrap:wrap;gap:.25rem 1.25rem;padding-top:.4rem;border-top:1px solid var(--lijn)}
  html:not(.js) .kop .kop-knop{display:none}
}
@media (min-width:64rem){.paneel{display:none!important}}

/* voet: alle talen */
.voet-talen ul{list-style:none;margin:0;padding:var(--r1) 0 max(var(--r3),env(safe-area-inset-bottom));display:flex;flex-wrap:wrap;gap:.2rem 1.1rem;font-size:.8125rem;border-top:1px solid var(--lijn)}
.voet-talen a{color:var(--tekst2);text-decoration:none}
.voet-talen a:hover{color:var(--tekst);text-decoration:underline}
.voet-talen a[aria-current]{color:var(--tekst);font-weight:600}
.voet{padding-bottom:var(--r2)}

/* lange woorden (Duits, Fins, Hongaars ...) netjes afbreken in plaats van buiten beeld */
body{overflow-wrap:break-word}
h1,h2,h3,.bk-titel,.vb-titel,summary{hyphens:auto;-webkit-hyphens:auto}
@media (max-width:40rem){.knop{white-space:normal}}

/* korte kopknop op mobiel, zodat de wachtlijst altijd één tik weg is */
.kop-knop .kk-kort{display:none}
@media (max-width:63.99rem){
  .js .kop .kop-knop{display:inline-flex;align-items:center;justify-content:center;padding:.4rem .85rem;font-size:.8125rem;white-space:normal;text-align:center;line-height:1.15;max-width:9.5rem;min-height:2.5rem}
  .kop .logo-link{flex-shrink:0}
  .kop-rechts{gap:.4rem}
  .js .kop .kop-knop .kk-lang{display:none}
  .js .kop .kop-knop .kk-kort{display:inline}
}
@media (max-width:26rem){
  .kop .logo-link > *{width:7rem!important}
  .menu-knop .mk-tekst{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .menu-knop{padding-inline:.6rem}
}

/* tweede aanmeldblok op de beginpagina */
.wl-blok{display:grid;gap:var(--r1);justify-items:start}
.wl-blok h2{font-size:clamp(1.6rem,1.2rem + 1.6vw,2.4rem);line-height:1.15;max-width:22ch}
.wl-blok .wl,.wl-blok .gelukt{width:100%;max-width:34rem;margin-top:0}

/* founding scrappers: knop op het roze vlak */
.fs-acties{margin:.25rem 0 0}
.founding .klein{font-size:.9375rem;opacity:.85}

/* aanmeldknop op smalle schermen even breed als het veld */
@media (max-width:40rem){.wl .knop{flex:1 1 100%}}