/* YNGbelieve: Fun Firm Faith */
/* Lettertypen staan op de eigen server (geen Google Fonts: beter voor privacy en snelheid). Licentie: SIL Open Font License. */
@font-face{font-family:'Unbounded';src:url(fonts/unbounded.woff2) format('woff2');font-weight:200 900;font-style:normal;font-display:swap}
@font-face{font-family:'DM Sans';src:url(fonts/dm-sans.woff2) format('woff2');font-weight:100 1000;font-style:normal;font-display:swap}
@font-face{font-family:'DM Sans';src:url(fonts/dm-sans-italic.woff2) format('woff2');font-weight:100 1000;font-style:italic;font-display:swap}
@font-face{font-family:'Permanent Marker';src:url(fonts/permanent-marker.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
:root{
  --inkt:#0E0D12;--inkt-2:#1B1A22;--inkt-3:#2A2833;--papier:#F7F4EE;--wit:#fff;--grijs:#5E5B66;--lijn:#E4DFD5;
  --geel:#FFD23F;--roze:#FF5C8A;--blauw:#6F8BFF;--groen:#2BD49A;
  --accent:var(--geel);
  --display:'Unbounded','Arial Black',system-ui,sans-serif;
  --body:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --hand:'Permanent Marker','Comic Sans MS',cursive;
  --r:24px;--ease:cubic-bezier(.2,.8,.2,1);
  --kop-h:84px;
}
.k-geel{--accent:var(--geel)}.k-roze{--accent:var(--roze)}.k-blauw{--accent:var(--blauw)}.k-groen{--accent:var(--groen)}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:var(--papier);color:var(--inkt);font-family:var(--body);font-size:18px;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,video,iframe{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display);line-height:1.05;margin:0;letter-spacing:-.02em;font-weight:700}
p{margin:0 0 1em}
button{font:inherit;color:inherit}
.wrap{width:min(1240px,100% - 32px);margin-inline:auto}
:focus-visible{outline:3px solid var(--roze);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--geel);padding:.6em 1em;border-radius:99px;font-weight:700}
.skip:focus{left:16px}
.hand{font-family:var(--hand);font-size:1.35rem;line-height:1.1;margin:0 0 .4rem;color:var(--roze);transform:rotate(-3deg);display:inline-block}
.chip{display:inline-block;background:var(--inkt);color:var(--wit);font-weight:700;font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;padding:.45em 1em;border-radius:99px;margin:0 0 1rem}
.label{display:inline-flex;align-items:center;gap:.6rem;font-weight:700;font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;margin:0 0 1.2rem}
.label .punt{width:10px;height:10px;border-radius:50%;background:var(--geel);box-shadow:0 0 0 4px rgba(255,210,63,.25);animation:puls 2s infinite}
@keyframes puls{50%{box-shadow:0 0 0 8px rgba(255,210,63,0)}}
.klein{font-size:.85rem;color:var(--grijs);margin:.8rem 0 0}
.formulier [hidden]{display:none!important}
.honing{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}

/* knoppen */
.knop{display:inline-flex;align-items:center;gap:.55em;font-family:var(--display);font-weight:700;font-size:.92rem;letter-spacing:-.01em;line-height:1.1;text-decoration:none;padding:1em 1.5em;border-radius:99px;border:2.5px solid var(--inkt);background:var(--inkt);color:var(--wit);cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .2s,color .2s;text-align:left}
.knop .pijl{transition:transform .25s var(--ease)}
.knop:hover{transform:translateY(-3px);box-shadow:0 6px 0 var(--inkt)}
.knop:hover .pijl{transform:translateX(4px)}
.knop:active{transform:translateY(0);box-shadow:none}
.knop.geel{background:var(--geel);color:var(--inkt);border-color:var(--geel)}
.knop.geel:hover{box-shadow:0 6px 0 var(--roze)}
.knop.roze{background:var(--roze);color:var(--inkt);border-color:var(--roze)}
.knop.donker{background:var(--inkt);color:var(--wit)}
.knop.donker:hover{box-shadow:0 6px 0 rgba(0,0,0,.25)}
.knop.rand{background:transparent;color:var(--inkt)}
.knop.rand:hover{background:var(--inkt);color:var(--wit)}
.knop.rand-licht{background:transparent;color:var(--wit);border-color:rgba(255,255,255,.5)}
.knop.rand-licht:hover{border-color:var(--wit);box-shadow:0 6px 0 var(--geel)}
.knop.klein{padding:.7em 1.15em;font-size:.82rem}

/* kopbalk */
.kopbalk{position:fixed;inset:12px 0 auto 0;z-index:50;pointer-events:none}
.kopbalk .wrap{pointer-events:auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;background:rgba(14,13,18,.82);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);color:var(--wit);border-radius:99px;padding:8px 8px 8px 22px;min-height:60px;box-shadow:0 10px 30px -12px rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.08)}
.logo{display:inline-flex;align-items:baseline;gap:.05em;font-family:var(--display);font-weight:900;font-size:1.25rem;letter-spacing:-.04em;text-decoration:none;white-space:nowrap;line-height:1}
.logo .y{color:var(--geel)}
.logo .b{font-weight:500;letter-spacing:-.02em}
.logo img{height:40px;width:auto}
#nav>ul{list-style:none;display:flex;align-items:center;gap:.15rem;margin:0;padding:0}
#nav li{position:relative}
#nav a{display:block;text-decoration:none;font-weight:700;font-size:.92rem;padding:.6em .8em;border-radius:99px;white-space:nowrap;transition:background .2s,color .2s}
#nav>ul>li>a:hover,#nav>ul>li.actief>a{background:rgba(255,255,255,.1)}
#nav>ul>li.actief>a{color:var(--geel)}
#nav a[aria-current=page]{color:var(--geel)}
#nav .heeft-sub{display:flex;align-items:center}
#nav .heeft-sub>a{padding-right:.2em}
.subknop{background:none;border:0;padding:.5em .55em .5em .2em;cursor:pointer;color:inherit;display:flex}
.subknop svg{width:11px;height:8px;transition:transform .2s}
#nav .sub{list-style:none;margin:0;padding:.5rem;position:absolute;top:calc(100% + 8px);left:-.5rem;min-width:250px;background:var(--inkt);border:1px solid rgba(255,255,255,.1);border-radius:20px;box-shadow:0 24px 40px -16px rgba(0,0,0,.6);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .2s,transform .2s,visibility .2s}
#nav .sub::before{content:"";position:absolute;inset:-12px 0 auto 0;height:12px}
#nav .heeft-sub:hover .sub,#nav .heeft-sub:focus-within .sub,#nav .heeft-sub.open .sub{opacity:1;visibility:visible;transform:none}
#nav .heeft-sub:hover .subknop svg,#nav .heeft-sub.open .subknop svg{transform:rotate(180deg)}
#nav .sub a{font-weight:500;border-radius:12px;padding:.65em .9em}
#nav .sub a:hover{background:rgba(255,255,255,.08);color:var(--geel)}
#nav .cta{margin-left:.4rem}
#nav .cta a.knop{color:var(--inkt);padding:.75em 1.2em}
#nav .cta a.knop:hover{box-shadow:0 5px 0 var(--geel)}
.menuknop{display:none;align-items:center;gap:.5rem;background:var(--geel);color:var(--inkt);border:0;border-radius:99px;padding:.7em 1.1em;font-weight:700;cursor:pointer;position:relative}
.menuknop span:not(.tekst){display:block;width:18px;height:2.5px;background:currentColor;border-radius:2px;transition:transform .25s}
.menuknop span:nth-child(2){position:absolute;left:1.1em;top:calc(50% + 3px)}
.menuknop span:first-child{transform:translateY(-3px)}
.menuknop .tekst{margin-left:4px}
body.menu-open .menuknop span:first-child{transform:translateY(0) rotate(45deg)}
body.menu-open .menuknop span:nth-child(2){transform:translateY(-3px) rotate(-45deg)}

/* home hero */
.hero{background:var(--inkt);color:var(--wit);position:relative;overflow:hidden;padding:calc(var(--kop-h) + 3.5rem) 0 4.5rem;isolation:isolate}
.hero::before,.hero::after{content:"";position:absolute;border-radius:50%;filter:blur(80px);z-index:-1;opacity:.55}
.hero::before{width:520px;height:520px;background:var(--roze);right:-160px;top:-140px;opacity:.35}
.hero::after{width:460px;height:460px;background:var(--blauw);left:-200px;bottom:-220px;opacity:.35}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:3rem;align-items:center}
.hero h1{font-size:clamp(2.4rem,5.6vw,5.2rem);font-weight:900;text-transform:uppercase;letter-spacing:-.045em;line-height:.92;margin-bottom:1.6rem}
.hero h1 span{display:block}
.hero h1 .r1{animation:op .8s var(--ease) both}
.hero h1 .r2{color:var(--geel);position:relative;display:inline-block!important;animation:op .8s var(--ease) .12s both}
.hero .krul{position:absolute;left:0;right:0;bottom:-.18em;width:100%;height:.28em;color:var(--roze);stroke-dasharray:420;stroke-dashoffset:420;animation:teken 1s var(--ease) .7s forwards}
@keyframes teken{to{stroke-dashoffset:0}}
@keyframes op{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
.hero .lead{font-size:clamp(1.1rem,1.6vw,1.3rem);max-width:40ch;color:#E9E6EF;margin-bottom:.8rem}
.hero .lead2{max-width:46ch;color:#A9A5B3}
.hero .acties{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}
.collage{position:relative;aspect-ratio:1/1.05;max-width:540px;width:100%;margin-left:auto}
.collage figure{margin:0;position:absolute;border-radius:var(--r);overflow:hidden;border:5px solid var(--wit);box-shadow:0 30px 50px -20px rgba(0,0,0,.6);transition:transform .5s var(--ease)}
.collage img{width:100%;height:100%;object-fit:cover}
.collage .f1{width:62%;aspect-ratio:3/4;left:0;top:4%;transform:rotate(-6deg);z-index:2;animation:val .9s var(--ease) .2s both}
.collage .f2{width:52%;aspect-ratio:4/5;right:0;top:0;transform:rotate(5deg);animation:val .9s var(--ease) .35s both}
.collage .f3{width:55%;aspect-ratio:4/3;right:6%;bottom:0;transform:rotate(-2deg);z-index:3;animation:val .9s var(--ease) .5s both}
.collage:hover .f1{transform:rotate(-9deg) translateY(-6px)}
.collage:hover .f2{transform:rotate(8deg) translateY(-4px)}
@keyframes val{from{opacity:0;translate:0 40px;scale:.92}to{opacity:1;translate:0 0;scale:1}}
.sticker{position:absolute;left:-4%;bottom:6%;width:150px;height:150px;border-radius:50%;background:var(--geel);color:var(--inkt);display:grid;place-items:center;z-index:4;box-shadow:0 12px 0 rgba(0,0,0,.25);transform:rotate(-10deg)}
.sticker svg{position:absolute;inset:0;width:100%;height:100%;animation:draai 18s linear infinite}
.sticker text{font-family:var(--display);font-weight:700;font-size:15.5px;letter-spacing:.06em;fill:var(--inkt)}
.sticker span{font-family:var(--display);font-weight:900;font-size:1.05rem;text-align:center;line-height:1.1;max-width:84px;text-transform:uppercase}
@keyframes draai{to{transform:rotate(360deg)}}

/* band */
.bandrol{overflow:hidden;padding:1.4rem 0;margin:-2.6rem 0 -1.4rem;position:relative;z-index:3}
.band{background:var(--geel);color:var(--inkt);overflow:hidden;padding:1.1rem 0;transform:rotate(-1.5deg) scaleX(1.03);border-block:3px solid var(--inkt)}
.band .loop{display:flex;width:max-content;animation:loop 38s linear infinite;font-family:var(--display);font-weight:900;font-size:clamp(1.2rem,2.6vw,2rem);text-transform:uppercase;letter-spacing:-.02em;white-space:nowrap}
.band span{padding:0 1.4rem}
.band i{font-style:normal;color:var(--roze)}
@keyframes loop{to{transform:translateX(-50%)}}

/* secties */
.sectiekop{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:2.2rem}
.sectiekop h2{font-size:clamp(2rem,4.6vw,3.6rem);font-weight:900;text-transform:uppercase;letter-spacing:-.04em}
.sectiekop .hand{margin:0}
.ontdek{padding:6rem 0 5rem}

/* kaarten */
.kaarten{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.kaarten.drie{grid-template-columns:repeat(3,1fr)}
.kaart{--accent:var(--geel);background:var(--accent);color:var(--inkt);text-decoration:none;border-radius:calc(var(--r) + 6px);padding:12px;display:flex;flex-direction:column;border:2.5px solid var(--inkt);box-shadow:6px 6px 0 var(--inkt);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.kaart.k-roze{--accent:var(--roze)}.kaart.k-blauw{--accent:var(--blauw)}.kaart.k-groen{--accent:var(--groen)}
.kaart:nth-child(odd):hover{transform:translate(-3px,-5px) rotate(-1.2deg)}
.kaart:nth-child(even):hover{transform:translate(-3px,-5px) rotate(1.2deg)}
.kaart:hover{box-shadow:10px 11px 0 var(--inkt)}
.kaart .beeld{display:block;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;background:var(--inkt-3);border:2px solid var(--inkt)}
.kaart .beeld img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.kaart:hover .beeld img{transform:scale(1.06)}
.kaart .leegbeeld{display:grid;place-items:center;height:100%;font-family:var(--display);font-weight:900;font-size:5rem;color:var(--accent)}
.kaart .tekst{display:flex;flex-direction:column;gap:.35rem;padding:1.1rem .6rem .5rem;flex:1}
.kaart .chip{align-self:flex-start;margin:0 0 .3rem;font-size:.7rem}
.kaart .titel{font-family:var(--display);font-weight:900;font-size:1.55rem;line-height:1;letter-spacing:-.03em;text-transform:uppercase}
.kaart .wanneer{font-weight:700;font-size:.95rem}
.kaart .kort{font-size:.98rem;line-height:1.45}
.kaart .meer{margin-top:auto;padding-top:.8rem;font-family:var(--display);font-weight:700;font-size:.85rem}
.kaart .meer span{display:inline-block;transition:transform .25s var(--ease)}
.kaart:hover .meer span{transform:translateX(5px)}

/* herken */
.herken{background:var(--wit);padding:6rem 0;border-block:2.5px solid var(--inkt)}
.herken .wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:4rem;align-items:center}
.herken .label{color:var(--roze);font-family:var(--hand);text-transform:none;letter-spacing:0;font-size:1.5rem;font-weight:400}
.herken h2{font-size:clamp(1.8rem,4vw,3.3rem);font-weight:900;letter-spacing:-.035em;margin-bottom:1.8rem;max-width:18ch}
.herken .tekst{font-size:1.15rem;max-width:52ch}
.herken .tekst strong{font-family:var(--display);font-weight:700;font-size:1.15rem;display:inline;background:linear-gradient(transparent 58%,var(--geel) 58%,var(--geel) 92%,transparent 92%);line-height:1.5;letter-spacing:-.02em}
.telefoon{justify-self:center;width:min(320px,100%);border-radius:44px;border:10px solid var(--inkt);background:var(--inkt);box-shadow:14px 14px 0 var(--roze);overflow:hidden;transform:rotate(3deg)}
.telefoon .video{margin:0;border-radius:34px;aspect-ratio:9/16}
.telefoon .video video{width:100%;height:100%;object-fit:cover;background:var(--inkt)}

/* nu aanmelden */
.nu{background:var(--accent);padding:5.5rem 0;overflow:hidden}
.nu .wrap{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:center}
.nu-beeld{border-radius:var(--r);overflow:hidden;border:3px solid var(--inkt);transform:rotate(-3deg);box-shadow:12px 12px 0 var(--inkt);aspect-ratio:4/3}
.nu-beeld img{width:100%;height:100%;object-fit:cover}
.nu .hand{color:var(--inkt)}
.nu h2{font-size:clamp(2.2rem,5.5vw,4.5rem);font-weight:900;text-transform:uppercase;letter-spacing:-.045em;line-height:.92;margin-bottom:1rem}
.nu .wanneer{font-family:var(--display);font-weight:700;font-size:1.2rem}
.nu p{max-width:44ch;font-size:1.1rem}

/* foto's */
.fotostrook{background:var(--inkt);color:var(--wit);padding:6rem 0}
.fotostrook .knop.rand{color:var(--wit);border-color:rgba(255,255,255,.5)}
.fotostrook .knop.rand:hover{background:var(--wit);color:var(--inkt);border-color:var(--wit)}
.metselwerk{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));grid-auto-rows:220px;grid-auto-flow:dense;gap:12px}
.metselwerk.groot{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));grid-auto-rows:260px}
.foto{display:block;width:100%;height:100%;padding:0;border:0;margin:0;background:var(--inkt-3);border-radius:18px;overflow:hidden;cursor:zoom-in;position:relative}
.foto:nth-child(9n+1){grid-row:span 2}
.foto:nth-child(9n+5){grid-column:span 2}
.foto img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease),filter .3s}
.galerij-meer{text-align:center;margin:1.6rem 0 0}
.foto:hover img{transform:scale(1.04)}
.foto[hidden]{display:none}

/* doneerband */
.doneerband{background:var(--roze);padding:5rem 0;text-align:center;border-top:2.5px solid var(--inkt)}
.doneerband h2{font-size:clamp(2.2rem,6vw,4.6rem);font-weight:900;text-transform:uppercase;letter-spacing:-.045em;margin-bottom:1rem}
.doneerband p{max-width:52ch;margin:0 auto 2rem;font-size:1.15rem}

/* paginakop */
.paginakop{background:var(--accent);padding:calc(var(--kop-h) + 3.5rem) 0 4rem;border-bottom:2.5px solid var(--inkt);position:relative;overflow:hidden}
.paginakop::after{content:"";position:absolute;width:340px;height:340px;right:-120px;bottom:-160px;border-radius:50%;border:40px solid rgba(14,13,18,.07)}
.paginakop .wrap{display:grid;grid-template-columns:1fr;gap:3rem;align-items:center;position:relative;z-index:1}
.paginakop.met-beeld .wrap{grid-template-columns:1.15fr .85fr}
.paginakop h1{font-size:clamp(2.1rem,6vw,4.8rem);font-weight:900;text-transform:uppercase;letter-spacing:-.045em;line-height:.93;margin-bottom:1.3rem;overflow-wrap:break-word;hyphens:auto}
.paginakop .intro{font-size:clamp(1.1rem,1.7vw,1.35rem);max-width:46ch;font-weight:500}
.paginakop .wanneer{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--display);font-weight:700;font-size:1.05rem;background:rgba(255,255,255,.55);border:2px solid var(--inkt);padding:.5em 1em;border-radius:99px;margin-bottom:1.2rem}
.paginakop .wanneer svg{width:20px;height:20px}
.kruimel{margin:0 0 .8rem;font-weight:700;font-size:.9rem}
.kruimel a{text-decoration:none;border-bottom:2px solid currentColor}
.kruimel a::after{content:" /";border:0}
.pk-beeld{margin:0;border-radius:var(--r);overflow:hidden;border:3px solid var(--inkt);box-shadow:12px 12px 0 var(--inkt);transform:rotate(2.5deg);aspect-ratio:4/3.4;animation:val .9s var(--ease) both}
.pk-beeld img{width:100%;height:100%;object-fit:cover}
.bedanktkop{min-height:70vh}
.bon{background:var(--wit);border:2.5px solid var(--inkt);border-radius:var(--r);padding:1rem 1.4rem;max-width:460px;margin:1.5rem 0;box-shadow:8px 8px 0 var(--inkt)}
.bon p{display:flex;justify-content:space-between;gap:1rem;margin:0;padding:.55rem 0;border-bottom:1.5px dashed var(--lijn)}
.bon p:last-child{border:0}
.bon span{color:var(--grijs)}

/* subnav */
.subnav{background:var(--papier);border-bottom:1.5px solid var(--lijn)}
.subnav ul{list-style:none;margin:0;padding:1rem 0;display:flex;gap:.5rem;overflow-x:auto;scrollbar-width:none}
.subnav ul::-webkit-scrollbar{display:none}
.subnav a{display:block;white-space:nowrap;text-decoration:none;font-weight:700;font-size:.92rem;padding:.6em 1.1em;border-radius:99px;border:2px solid var(--inkt);transition:background .2s}
.subnav a:hover{background:var(--wit)}
.subnav a[aria-current=page]{background:var(--inkt);color:var(--wit)}

/* inhoud */
.inhoud{padding:4.5rem 0 5rem}
.inhoud .wrap.met-zij{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:4rem;align-items:start}
.tekst{max-width:72ch;font-size:1.1rem}
.tekst>*:first-child{margin-top:0}
.tekst h2{font-size:clamp(1.6rem,3vw,2.3rem);font-weight:900;margin:2.6rem 0 1rem;letter-spacing:-.035em}
.tekst h2::after{content:"";display:block;width:64px;height:7px;border-radius:7px;background:var(--accent);margin-top:.6rem;border:2px solid var(--inkt)}
.tekst h3{font-size:clamp(1.2rem,2vw,1.5rem);margin:2rem 0 .7rem}
.tekst h4{font-family:var(--body);font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;margin:1.8rem 0 .5rem;color:var(--grijs)}
.tekst p{margin:0 0 1.1em}
.tekst strong{font-weight:700}
.tekst a:not(.knop){text-decoration-color:var(--accent);text-decoration-thickness:3px;text-underline-offset:3px;font-weight:600}
.tekst a:not(.knop):hover{background:var(--accent);text-decoration:none}
.tekst ul{list-style:none;padding:0;margin:0 0 1.3em}
.tekst li{position:relative;padding-left:1.8em;margin:.4em 0}
.tekst li::before{content:"✦";position:absolute;left:0;top:.05em;color:var(--inkt);font-size:.95em;background:var(--accent);width:1.3em;height:1.3em;display:grid;place-items:center;border-radius:50%;font-size:.75em;top:.35em}
.tekst blockquote{margin:1.8rem 0;padding:1.4rem 1.6rem;background:var(--wit);border:2.5px solid var(--inkt);border-radius:var(--r);box-shadow:6px 6px 0 var(--accent);font-size:1.15rem}
.tekst blockquote p:last-child{margin:0}
.tekst hr{border:0;height:2.5px;background:var(--inkt);margin:2.5rem 0;border-radius:2px}
.tekst .knoppen{display:flex;flex-wrap:wrap;gap:.7rem;margin:1.6rem 0}
.fotorij{display:grid;gap:12px;margin:1.6rem 0}
.fotorij.n2{grid-template-columns:1fr 1fr}.fotorij.n3{grid-template-columns:repeat(3,1fr)}.fotorij.n4{grid-template-columns:repeat(4,1fr)}
.fotorij figure{margin:0}
.fotorij img{width:100%;border-radius:18px;border:2px solid var(--inkt)}
.fotorij.n1 img{max-height:560px;width:auto;max-width:100%}
.fotorij.n2 img,.fotorij.n3 img,.fotorij.n4 img{aspect-ratio:1;object-fit:cover}
.fotorij figcaption{font-size:.85rem;color:var(--grijs);margin-top:.4rem}
.video{position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;border:2.5px solid var(--inkt);margin:1.6rem 0;background:var(--inkt)}
.video iframe,.video video{position:absolute;inset:0;width:100%;height:100%;border:0}
.video.staand{aspect-ratio:9/16;max-width:340px}
.zij{position:sticky;top:calc(var(--kop-h) + 20px)}
.tickets-mini{background:var(--accent);border:2.5px solid var(--inkt);border-radius:var(--r);padding:1.4rem;box-shadow:8px 8px 0 var(--inkt)}
.tickets-mini .hand{color:var(--inkt)}
.tickets-mini ul{list-style:none;margin:.6rem 0 1.2rem;padding:0}
.tickets-mini li{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;border-bottom:1.5px dashed rgba(14,13,18,.3);font-size:.95rem}
.tickets-mini b{font-family:var(--display);white-space:nowrap}
.tickets-mini .knop{width:100%;justify-content:center}

/* team */
.team{padding:2rem 0 6rem}
.teamgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1.4rem}
.lid{background:var(--wit);border:2.5px solid var(--inkt);border-radius:var(--r);padding:1.4rem;box-shadow:6px 6px 0 var(--inkt);transition:transform .3s var(--ease)}
.lid:nth-child(4n+1){--accent:var(--geel)}.lid:nth-child(4n+2){--accent:var(--roze)}.lid:nth-child(4n+3){--accent:var(--blauw)}.lid:nth-child(4n+4){--accent:var(--groen)}
.lid:hover{transform:rotate(-1.5deg) translateY(-4px)}
.lid .pf{width:120px;height:120px;border-radius:42% 58% 52% 48%/48% 44% 56% 52%;overflow:hidden;background:var(--accent);border:2.5px solid var(--inkt);margin-bottom:1rem;display:grid;place-items:center}
.lid .pf img{width:100%;height:100%;object-fit:cover}
.lid .pf span{font-family:var(--display);font-weight:900;font-size:2.6rem}
.lid h3{font-size:1.25rem;margin-bottom:.3rem}
.lid .rol{font-weight:700;color:var(--grijs);font-size:.95rem;margin:0 0 .6rem}
.lid .bio{font-size:.97rem;line-height:1.5;margin:0}

/* galerij */
.galerij{padding:3rem 0 6rem}
.albums{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:2rem}
.albums button{border:2px solid var(--inkt);background:transparent;border-radius:99px;padding:.55em 1.1em;font-weight:700;cursor:pointer}
.albums button.actief{background:var(--inkt);color:var(--wit)}

/* formulieren */
.formsectie{background:var(--accent);padding:5.5rem 0;border-top:2.5px solid var(--inkt)}
.twee-kol{display:grid;grid-template-columns:.8fr 1.2fr;gap:4rem;align-items:start}
.formsectie h2{font-size:clamp(2rem,4.5vw,3.6rem);font-weight:900;text-transform:uppercase;letter-spacing:-.045em;line-height:.95;margin-bottom:1.2rem}
.formsectie .hand{color:var(--inkt)}
.formsectie .iban{background:rgba(255,255,255,.5);border:2px solid var(--inkt);border-radius:18px;padding:1rem 1.2rem;display:inline-block}
.formsectie .iban b{font-family:var(--display);letter-spacing:.02em}
.formulier{background:var(--wit);border:2.5px solid var(--inkt);border-radius:calc(var(--r) + 4px);padding:clamp(1.3rem,3vw,2.2rem);box-shadow:10px 10px 0 var(--inkt);display:grid;gap:1rem}
.formulier label{display:grid;gap:.35rem;font-weight:700;font-size:.92rem}
.formulier input[type=text],.formulier input[type=email],.formulier input[type=tel],.formulier input[type=date],.formulier select,.formulier textarea{width:100%;font:inherit;font-weight:400;font-size:1rem;padding:.8em 1em;border:2px solid var(--inkt);border-radius:14px;background:var(--papier);color:var(--inkt);transition:background .2s,box-shadow .2s;min-height:50px}
.formulier input:focus,.formulier select:focus,.formulier textarea:focus{outline:none;background:var(--wit);box-shadow:0 0 0 4px var(--accent)}
.formulier textarea{resize:vertical;min-height:90px}
.formulier .rij{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.formulier fieldset{border:0;padding:0;margin:0;display:grid;gap:.6rem}
.formulier legend{font-weight:700;font-size:.92rem;margin-bottom:.5rem;padding:0}
.formulier .knop{justify-content:center;width:100%;font-size:1rem;padding:1.15em 1.5em}
.formulier .fout{background:#FFE4EA;border:2px solid #C8164A;color:#8A0C31;padding:.8rem 1rem;border-radius:14px;font-weight:600}
.formulier.bedankt h3{font-size:1.8rem;margin-bottom:.5rem}
.formulier .captcha{font-weight:600}
.formulier .captcha input{max-width:140px}
.ticket{display:grid!important;grid-template-columns:auto 1fr auto;gap:.8rem!important;align-items:center;border:2px solid var(--inkt);border-radius:16px;padding:.9rem 1rem;cursor:pointer;font-weight:400!important;transition:background .2s,box-shadow .2s;background:var(--papier)}
.ticket:hover{background:var(--wit)}
.ticket:has(input:checked){background:var(--accent);box-shadow:4px 4px 0 var(--inkt)}
.ticket input{width:22px;height:22px;accent-color:var(--inkt);margin:0}
.ticket .t-naam{font-weight:700;font-size:1rem;display:grid;gap:.15rem}
.ticket small{font-weight:400;font-size:.84rem;color:var(--inkt);opacity:.75;line-height:1.35}
.ticket .t-prijs{font-family:var(--display);font-weight:700;text-align:right;display:grid;gap:.1rem;white-space:nowrap}
.ticket .t-prijs small{font-family:var(--body);white-space:normal;max-width:150px;margin-left:auto}
.ticket.uitverkocht{opacity:.5;cursor:not-allowed}
.vink{display:flex!important;gap:.7rem!important;align-items:flex-start;font-weight:400!important}
.vink input{width:22px;height:22px;flex:none;accent-color:var(--inkt);margin-top:.1rem}
.totaal{display:flex;justify-content:space-between;align-items:baseline;border-top:2px dashed var(--inkt);padding-top:1rem;font-weight:700}
.totaal b{font-family:var(--display);font-size:1.5rem}
.bedragen{grid-template-columns:repeat(4,1fr)!important}
.bedragen legend{grid-column:1/-1}
.bedragen label{display:block!important;cursor:pointer}
.bedragen input{position:absolute;opacity:0;pointer-events:none}
.bedragen span{display:block;text-align:center;border:2px solid var(--inkt);border-radius:14px;padding:.85em .3em;font-family:var(--display);font-weight:700;background:var(--papier);transition:background .2s,box-shadow .2s}
.bedragen input:checked+span{background:var(--accent);box-shadow:3px 3px 0 var(--inkt)}
.bedragen input:focus-visible+span{outline:3px solid var(--roze);outline-offset:2px}

/* meer ontdekken */
.meerontdekken{padding:5rem 0;background:var(--wit);border-top:2.5px solid var(--inkt)}
.meerontdekken .sectiekop h2{font-size:clamp(1.6rem,3.5vw,2.6rem)}

/* voet */
.voet{background:var(--inkt);color:#CFCBD8;padding:5rem 0 2rem;overflow:hidden}
.voet .groot{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(2.6rem,7.6vw,8.4rem);letter-spacing:-.05em;line-height:.9;margin:0 0 3.5rem;color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.25);white-space:nowrap}
.voet .groot span:nth-child(1){-webkit-text-stroke-color:var(--geel)}
.voet .groot span:nth-child(3){color:var(--geel);-webkit-text-stroke:0}
.voet .kolommen{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.2fr;gap:2.5rem;padding-bottom:3rem;border-bottom:1px solid rgba(255,255,255,.12)}
.voet .logo{color:var(--wit);font-size:1.5rem;margin-bottom:1rem}
.voet h2{font-family:var(--display);font-size:.85rem;text-transform:uppercase;letter-spacing:.1em;color:var(--wit);margin-bottom:1rem}
.voet ul{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.voet a{text-decoration:none}
.voet a:hover{color:var(--geel)}
.voet p{margin:0 0 .35rem;font-size:.95rem}
.anbi{display:inline-flex!important;align-items:center;gap:.6rem;margin-top:.8rem!important;font-size:.85rem!important}
.anbi span{background:var(--wit);color:var(--inkt);font-family:var(--display);font-weight:900;font-size:.75rem;padding:.4em .7em;border-radius:8px;letter-spacing:.06em}
.socials{display:flex;gap:.6rem;margin-top:1.2rem}
.socials a{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--inkt-3);color:var(--wit);transition:background .2s,transform .2s}
.socials a:hover{background:var(--geel);color:var(--inkt);transform:rotate(-8deg)}
.socials svg{width:20px;height:20px;fill:currentColor}
.formsectie .socials a{background:var(--inkt)}
.voet .klein{color:#8C8896;margin-top:1.5rem}

/* lichtbak */
.lichtbak{position:fixed;inset:0;z-index:100;background:rgba(14,13,18,.94);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1rem;padding:1rem}
.lichtbak[hidden]{display:none}
.lichtbak figure{margin:0;display:grid;justify-items:center;gap:.8rem;min-width:0}
.lichtbak img{max-height:84vh;max-width:100%;border-radius:14px;object-fit:contain}
.lichtbak figcaption{color:var(--wit)}
.lichtbak button{background:var(--wit);border:0;width:52px;height:52px;border-radius:50%;font-size:1.4rem;cursor:pointer;color:var(--inkt)}
.lichtbak .sluit{position:absolute;top:1rem;right:1rem;background:var(--geel)}

/* menu naar hamburger */
@media (max-width:1280px){
  .menuknop{display:inline-flex}
  #nav{position:fixed;inset:0;background:var(--inkt);padding:calc(var(--kop-h) + 2rem) 24px 3rem;overflow-y:auto;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s;z-index:-1}
  body.menu-open #nav{opacity:1;visibility:visible}
  body.menu-open{overflow:hidden}
  #nav>ul{flex-direction:column;align-items:stretch;gap:.2rem}
  #nav>ul>li>a{font-family:var(--display);font-weight:700;font-size:1.6rem;padding:.4em 0;letter-spacing:-.03em}
  #nav>ul>li>a:hover{background:none;color:var(--geel)}
  #nav .heeft-sub{flex-wrap:wrap}
  #nav .heeft-sub>a{flex:1}
  .subknop{padding:.8em}
  .subknop svg{width:16px;height:11px}
  #nav .sub{position:static;opacity:1;visibility:visible;transform:none;display:none;width:100%;min-width:0;background:var(--inkt-2);box-shadow:none;margin:.2rem 0 .6rem}
  #nav .heeft-sub.open .sub{display:block}
  #nav .heeft-sub:hover .subknop svg{transform:none}
  #nav .heeft-sub.open .subknop svg{transform:rotate(180deg)}
  #nav .cta{margin:1.2rem 0 0}
  #nav .cta a.knop{font-size:1.1rem;justify-content:center}
  .kopbalk .wrap{position:relative;backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(14,13,18,.95)}
}
/* tablet */
@media (max-width:1100px){
  .hero .wrap{grid-template-columns:1fr;gap:2.5rem}
  .collage{margin-inline:auto;max-width:460px}
  .kaarten{grid-template-columns:repeat(2,1fr)}
  .herken .wrap,.nu .wrap,.twee-kol{grid-template-columns:1fr;gap:2.5rem}
  .inhoud .wrap.met-zij{grid-template-columns:1fr;gap:2.5rem}
  .zij{position:static}
  .voet .kolommen{grid-template-columns:1fr 1fr}
}
/* telefoon */
@media (max-width:700px){
  :root{--kop-h:72px;--r:20px}
  body{font-size:17px}
  .kopbalk{inset:8px 0 auto 0}
  .kopbalk .wrap{min-height:54px;padding:6px 6px 6px 18px}
  .logo{font-size:1.1rem}
  .hero{padding:calc(var(--kop-h) + 2.2rem) 0 3.5rem}
  .hero .acties .knop{width:100%;justify-content:space-between}
  .collage{aspect-ratio:1/1}
  .sticker{width:118px;height:118px;left:-2%}
  .sticker text{font-size:16px}
  .sticker span{font-size:.85rem;max-width:70px}
  .ontdek,.herken,.fotostrook,.nu{padding:4rem 0}
  .kaarten,.kaarten.drie{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:1rem;margin-inline:-16px;padding:0 16px 14px;scrollbar-width:none}
  .kaarten::-webkit-scrollbar{display:none}
  .kaart{flex:0 0 82%;scroll-snap-align:start}
  .paginakop{padding:calc(var(--kop-h) + 2rem) 0 3rem}
  .paginakop.met-beeld .wrap{grid-template-columns:1fr}
  .pk-beeld{order:-1;transform:rotate(-1.5deg);box-shadow:8px 8px 0 var(--inkt);aspect-ratio:16/10}
  .inhoud{padding:3rem 0 4rem}
  .tekst{font-size:1.05rem}
  .fotorij.n3,.fotorij.n4{grid-template-columns:1fr 1fr}
  .formulier .rij{grid-template-columns:1fr}
  .bedragen{grid-template-columns:repeat(2,1fr)!important}
  .formsectie{padding:4rem 0}
  .formulier{box-shadow:6px 6px 0 var(--inkt)}
  .ticket{grid-template-columns:auto 1fr;}
  .ticket .t-prijs{grid-column:2;text-align:left}
  .ticket .t-prijs small{margin-left:0;max-width:none}
  .voet .kolommen{grid-template-columns:1fr;gap:2rem}
  .voet .groot{white-space:normal;font-size:clamp(2.6rem,15vw,5rem)}
  .metselwerk,.metselwerk.groot{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:150px;gap:8px}
  .foto{border-radius:12px}
  .lichtbak{grid-template-columns:1fr;padding:4.5rem .6rem 1rem}
  .lichtbak .pijl{position:absolute;bottom:1rem}
  .lichtbak .pijl.links{left:1rem}.lichtbak .pijl.rechts{right:1rem}
  .lichtbak img{max-height:75vh}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .hero .krul{stroke-dashoffset:0}
}

/* chat */
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.chat{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:70;font-family:var(--body)}
.chat-knop{display:flex;align-items:center;gap:.55rem;background:var(--geel);color:var(--inkt);border:2.5px solid var(--inkt);border-radius:99px;padding:.8em 1.2em .8em 1em;font-family:var(--display);font-weight:700;font-size:.92rem;cursor:pointer;box-shadow:5px 5px 0 var(--inkt);transition:transform .2s var(--ease),box-shadow .2s var(--ease);position:relative;margin-left:auto}
.chat-knop:hover{transform:translate(-2px,-3px);box-shadow:7px 8px 0 var(--inkt)}
.chat-knop svg{width:22px;height:22px}
.chat-knop .bol{position:absolute;top:-8px;right:-6px;background:var(--roze);color:var(--inkt);border:2px solid var(--inkt);border-radius:99px;font-size:.75rem;min-width:24px;height:24px;display:grid;place-items:center}
.chat.open .chat-knop{display:none}
.chat-paneel{width:min(390px,calc(100vw - 32px));height:min(620px,calc(100vh - 110px));height:min(620px,calc(100dvh - 110px));background:var(--papier);border:2.5px solid var(--inkt);border-radius:26px;box-shadow:10px 10px 0 var(--inkt);display:flex;flex-direction:column;overflow:hidden;animation:val .35s var(--ease) both}
.chat-paneel[hidden]{display:none}
.chat-paneel header{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 1rem .9rem 1.2rem;background:var(--inkt);color:var(--wit)}
.chat-paneel header b{display:block;font-family:var(--display);font-size:1rem}
.chat-status{font-size:.8rem;color:#BDB8C8;display:flex;align-items:center;gap:.4rem}
.chat-status::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--groen)}
.chat.bij-mens .chat-status::before{background:var(--geel)}
.chat-sluit{background:var(--geel);color:var(--inkt);border:0;width:36px;height:36px;border-radius:50%;font-size:1.4rem;line-height:1;cursor:pointer}
.chat-berichten{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.6rem;overscroll-behavior:contain}
.chat-b{max-width:86%;display:grid;gap:.15rem}
.chat-b p{margin:0;padding:.65rem .9rem;border-radius:18px;font-size:.95rem;line-height:1.45;border:2px solid var(--inkt);overflow-wrap:anywhere}
.chat-b a{font-weight:700}
.chat-b.ai p{background:var(--wit);border-bottom-left-radius:6px}
.chat-b.bezoeker{align-self:flex-end}
.chat-b.bezoeker p{background:var(--geel);border-bottom-right-radius:6px}
.chat-b.medewerker p{background:var(--groen);border-bottom-left-radius:6px}
.chat-b .wie{font-size:.75rem;font-weight:700;padding-left:.4rem}
.chat-b.systeem,.chat-b.fout{max-width:100%;align-self:stretch}
.chat-b.systeem p{background:transparent;border:2px dashed var(--inkt);font-size:.88rem}
.chat-b.fout p{background:#FFE4EA;border-color:#C8164A;color:#8A0C31;font-size:.88rem}
.typt p{display:flex;gap:4px;padding:.85rem 1rem}
.typt i{width:7px;height:7px;border-radius:50%;background:var(--inkt);opacity:.35;animation:stip 1s infinite}
.typt i:nth-child(2){animation-delay:.15s}.typt i:nth-child(3){animation-delay:.3s}
@keyframes stip{50%{opacity:1;transform:translateY(-3px)}}
.chat-sugg{display:flex;flex-wrap:wrap;gap:.4rem;padding:0 1rem .6rem}
.chat-sugg[hidden]{display:none}
.chat-sugg button{border:2px solid var(--inkt);background:var(--wit);border-radius:99px;padding:.45em .85em;font-size:.84rem;font-weight:600;cursor:pointer}
.chat-sugg button:hover{background:var(--geel)}
.chat-mail{padding:.6rem 1rem;border-top:1.5px solid var(--lijn);display:grid;gap:.35rem;font-size:.85rem;font-weight:700}
.chat-mail[hidden]{display:none}
.chat-mail div{display:flex;gap:.4rem}
.chat-mail input{flex:1;min-width:0;font:inherit;font-weight:400;padding:.5em .7em;border:2px solid var(--inkt);border-radius:12px}
.chat-mail button{border:0;background:var(--inkt);color:var(--wit);border-radius:12px;padding:0 .9em;font-weight:700;cursor:pointer}
.chat-invoer{display:flex;align-items:flex-end;gap:.5rem;padding:.7rem .8rem;border-top:2px solid var(--inkt);background:var(--wit)}
.chat-invoer textarea{flex:1;min-width:0;resize:none;border:2px solid var(--inkt);border-radius:16px;padding:.65em .85em;font:inherit;font-size:16px;line-height:1.35;max-height:120px;background:var(--papier)}
.chat-invoer textarea:focus{outline:none;box-shadow:0 0 0 3px var(--geel)}
.chat-invoer button{flex:none;width:46px;height:46px;border-radius:50%;border:0;background:var(--inkt);color:var(--geel);display:grid;place-items:center;cursor:pointer}
.chat-invoer button svg{width:20px;height:20px}
.chat-uitleg{margin:0;padding:.5rem 1rem .7rem;background:var(--wit);font-size:.75rem;color:var(--grijs);line-height:1.4}
.chat-mens{background:none;border:0;padding:0;font:inherit;font-weight:700;color:var(--inkt);text-decoration:underline;cursor:pointer}
.chat-mens[hidden]{display:none}
@media (max-width:700px){
  .chat-knop .tekst{display:none}
  .chat-knop{padding:.9em}
  .chat.open{inset:0;right:0;bottom:0}
  .chat-paneel{width:100%;height:100%;border-radius:0;border:0;box-shadow:none;padding-top:env(safe-area-inset-top,0px)}
}

/* keuzehulp */
.keuzehulp{background:var(--inkt);color:var(--wit);padding:5.5rem 0;border-top:2.5px solid var(--inkt)}
.keuzehulp .wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:3.5rem;align-items:start}
.keuzehulp h2{font-size:clamp(2rem,4.5vw,3.6rem);font-weight:900;text-transform:uppercase;letter-spacing:-.045em;line-height:.95;margin-bottom:1.6rem}
.kh-groep{border:0;padding:0;margin:0 0 1.4rem;display:flex;flex-wrap:wrap;gap:.5rem}
.kh-groep legend{font-weight:700;margin-bottom:.7rem;padding:0;width:100%}
.kh-groep legend small{font-weight:400;color:#A9A5B3}
.kh-groep button{border:2px solid rgba(255,255,255,.35);background:transparent;color:var(--wit);border-radius:99px;padding:.6em 1.05em;font-weight:700;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.kh-groep button:hover{border-color:var(--wit)}
.kh-groep button[aria-pressed=true]{background:var(--geel);border-color:var(--geel);color:var(--inkt)}
.kh-uitkomst{display:grid;gap:1rem}
.kh-leeg,.kh-niets{border:2px dashed rgba(255,255,255,.3);border-radius:var(--r);padding:2rem;color:#CFCBD8;margin:0}
.kh-kaarten{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.kh-item[hidden]{display:none}
.kh-item .kaart{height:100%;box-shadow:6px 6px 0 var(--geel)}
.kh-item .kaart .beeld{aspect-ratio:16/10}
.kh-praten{background:var(--groen);color:var(--inkt);border:2.5px solid var(--inkt);border-radius:var(--r);padding:1.3rem 1.4rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem}
.kh-praten[hidden]{display:none}
.kh-praten p{margin:0;max-width:40ch}
@media (max-width:1100px){.keuzehulp .wrap{grid-template-columns:1fr;gap:2rem}}
@media (max-width:700px){.keuzehulp{padding:4rem 0}.kh-item .kaart{flex:none}}

/* vragenmuur */
.vragen{display:grid;gap:.8rem;max-width:860px}
.vraag{background:var(--wit);border:2.5px solid var(--inkt);border-radius:var(--r);overflow:hidden}
.vraag summary{cursor:pointer;padding:1.1rem 1.3rem;font-weight:700;list-style:none;display:flex;gap:.8rem;align-items:baseline}
.vraag summary::-webkit-details-marker{display:none}
.vraag summary::after{content:"+";margin-left:auto;font-family:var(--display);font-size:1.4rem;line-height:1}
.vraag[open] summary::after{content:"–"}
.vraag .cat{flex:none;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;background:var(--accent);border:2px solid var(--inkt);border-radius:99px;padding:.25em .7em}
.vraag .tekst{padding:0 1.3rem 1.2rem;max-width:none}

/* draaikaarten */
.flashcards{margin:1.6rem 0 2.4rem;max-width:620px}
.fc{position:relative;cursor:pointer;outline:none;margin-bottom:1rem;-webkit-tap-highlight-color:transparent}
.fc-binnen{display:grid}
.fc-voor,.fc-achter{grid-area:1/1;border:2.5px solid var(--inkt);border-radius:calc(var(--r) + 4px);padding:1.6rem 1.6rem 1.4rem;display:flex;flex-direction:column;gap:.8rem;min-height:250px}
.fc-voor{background:var(--accent);box-shadow:8px 8px 0 var(--inkt)}
.fc-achter{background:var(--wit);box-shadow:8px 8px 0 var(--accent),8px 8px 0 2.5px var(--inkt)}
.fc-nr{font-family:var(--display);font-weight:700;font-size:.78rem;letter-spacing:.06em}
.fc-vraag{font-family:var(--display);font-weight:900;font-size:clamp(1.45rem,3.6vw,2.1rem);line-height:1.05;letter-spacing:-.03em;margin:auto 0;text-wrap:balance}
.fc-tik{font-weight:700;font-size:.85rem;display:flex;align-items:center;gap:.4rem}
.fc-tik::before{content:"↻";font-size:1.2rem}
.fc-tekst{font-size:1.15rem;line-height:1.5;margin:auto 0}
.fc-tekst p:last-child{margin-bottom:0}
.fc:focus-visible .fc-voor,.fc:focus-visible .fc-achter{outline:3px solid var(--roze);outline-offset:4px}
/* met JavaScript: echt draaien */
.js .flashcards .fc-binnen{transition:transform .6s var(--ease);transform-style:preserve-3d}
.js .flashcards .fc{perspective:1400px}
.js .flashcards .fc-voor,.js .flashcards .fc-achter{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.js .flashcards .fc-achter{transform:rotateY(180deg)}
.js .flashcards .fc.om .fc-binnen{transform:rotateY(180deg)}
.js .flashcards .fc:hover:not(.om) .fc-binnen{transform:rotateY(-6deg) rotateZ(-.6deg)}
/* zonder JavaScript: voor- en achterkant onder elkaar */
html:not(.js) .fc-achter{grid-area:auto;margin-top:.6rem}
/* stapel: één kaart tegelijk, de rest erachter */
.flashcards.stapel{position:relative;padding-bottom:.2rem}
.flashcards.stapel .fc{display:none;margin-bottom:0}
.flashcards.stapel .fc.actief{display:block;z-index:2;animation:kaartin .45s var(--ease)}
.flashcards.stapel::before,.flashcards.stapel::after{content:"";position:absolute;left:14px;right:-14px;top:14px;height:230px;border:2.5px solid var(--inkt);border-radius:calc(var(--r) + 4px);background:var(--papier);z-index:0;transform:rotate(2.5deg)}
.flashcards.stapel::after{left:6px;right:-6px;top:6px;transform:rotate(-1.5deg);background:var(--wit)}
@keyframes kaartin{from{opacity:0;transform:translateX(40px) rotate(4deg)}to{opacity:1;transform:none}}
.flashcards.alles{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.4rem;max-width:none}
.flashcards.alles .fc{margin:0}
.flashcards.alles .fc-voor,.flashcards.alles .fc-achter{min-height:220px}
.flashcards.alles .fc-vraag{font-size:1.35rem}
.flashcards.alles .fc-tekst{font-size:1rem}
.fc-bediening{display:flex;align-items:center;gap:.6rem;margin-top:1.6rem;position:relative;z-index:3;flex-wrap:wrap;grid-column:1/-1}
.fc-bediening button{border:2.5px solid var(--inkt);background:var(--wit);border-radius:99px;min-width:48px;height:48px;font-size:1.2rem;font-weight:700;cursor:pointer;padding:0 .9rem;color:var(--inkt)}
.fc-bediening button:hover:not(:disabled){background:var(--geel)}
.fc-bediening button:disabled{opacity:.35;cursor:default}
.fc-bediening .fc-alles{font-size:.88rem;margin-left:auto}
.fc-voortgang{display:flex;gap:6px;flex:1;min-width:80px;max-width:220px}
.fc-voortgang i{flex:1;height:8px;border-radius:8px;background:var(--lijn);border:1.5px solid var(--inkt)}
.fc-voortgang i.gezien{background:var(--groen)}
.fc-voortgang i.fc-hier{background:var(--geel)}
.flashcards.alles .fc-vorige,.flashcards.alles .fc-volgende,.flashcards.alles .fc-voortgang{display:none}
@media (max-width:700px){
  .fc-voor,.fc-achter{min-height:220px;padding:1.3rem}
  .fc-tekst{font-size:1.05rem}
  .flashcards.stapel::before,.flashcards.stapel::after{height:200px}
}
@media (prefers-reduced-motion:reduce){.js .flashcards .fc-binnen{transition:none}.flashcards.stapel .fc.actief{animation:none}}

/* ===== Bouwstenen voor pagina's (app/blokken.php) ===== */
.feiten{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin:1.6em 0}
.feit{background:var(--accent);color:var(--inkt);border-radius:var(--r);padding:1.3em 1.2em;display:flex;flex-direction:column;gap:.35em;transition:transform .3s var(--ease)}
.feit:nth-child(odd){transform:rotate(-1deg)}.feit:nth-child(even){transform:rotate(1deg)}
.feit:hover{transform:rotate(0) translateY(-4px)}
.feit b{font-family:var(--display);font-size:clamp(1.6rem,4vw,2.4rem);line-height:1;letter-spacing:-.03em}
.feit span{font-weight:600;line-height:1.3}

.inbegrepen{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin:1.6em 0}
.inbegrepen>div{border-radius:var(--r);padding:1.4em 1.5em}
.inbegrepen .wel{background:var(--inkt);color:var(--wit)}
.inbegrepen .niet{background:transparent;border:2.5px dashed var(--inkt)}
.inbegrepen h3{font-size:1.05rem;margin-bottom:.8em}
.inbegrepen ul{list-style:none;margin:0;padding:0}
.inbegrepen li{display:flex;gap:.7em;padding:.35em 0;line-height:1.35}
.inbegrepen .teken{flex:none;width:1.5em;height:1.5em;border-radius:50%;display:grid;place-items:center;font-size:.8rem;font-weight:800}
.inbegrepen .wel .teken{background:var(--groen);color:var(--inkt)}
.inbegrepen .niet .teken{background:var(--roze);color:var(--inkt)}

.zelftest{background:var(--wit);border:2.5px solid var(--inkt);border-radius:var(--r);padding:1.2em 1.4em;margin:1.6em 0}
.zelftest ul{list-style:none;margin:0 0 1em;padding:0}
.zelftest li{border-bottom:1px solid var(--lijn)}
.zelftest li:last-child{border:0}
.zelftest label{display:flex;gap:.8em;align-items:center;padding:.6em 0;cursor:pointer;font-weight:600}
.zelftest input{appearance:none;flex:none;width:1.6em;height:1.6em;border:2.5px solid var(--inkt);border-radius:8px;background:var(--wit);display:grid;place-items:center;cursor:pointer;transition:background .2s,transform .2s var(--ease)}
.zelftest input:checked{background:var(--groen);transform:scale(1.1)}
.zelftest input:checked::after{content:"✓";font-weight:800;font-size:.95rem}
.zelftest input:checked+span{text-decoration:line-through;opacity:.55}
.zt-meter{height:10px;border-radius:99px;background:var(--lijn);overflow:hidden}
.zt-meter i{display:block;height:100%;width:0;background:var(--groen);transition:width .4s var(--ease)}
.zt-stand{font-size:.85rem;color:var(--grijs);margin:.5em 0 0}
.zt-klaar{margin-top:.8em;background:var(--geel);border-radius:16px;padding:.9em 1.1em;font-family:var(--display);font-weight:700}
.zt-klaar p{margin:0}

.stappen,.tijdlijn{list-style:none;margin:1.8em 0;padding:0;position:relative}
.stappen::before,.tijdlijn::before{content:"";position:absolute;left:1.7em;top:1em;bottom:1em;border-left:3px dashed var(--inkt);opacity:.3}
.stappen li,.tijdlijn li{position:relative;display:flex;gap:1.1em;align-items:flex-start;padding:.7em 0}
.st-nr{flex:none;width:3.4em;height:3.4em;border-radius:50%;background:var(--accent);border:2.5px solid var(--inkt);display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:1.1rem;position:relative}
.stappen h3,.tijdlijn h3{font-size:1.1rem;margin:.5em 0 .2em}
.stappen p,.tijdlijn p{margin:0;color:var(--grijs)}
.tl-tijd{flex:none;min-width:5.2em;text-align:center;background:var(--accent);border:2.5px solid var(--inkt);border-radius:99px;padding:.45em .7em;font-family:var(--display);font-weight:700;font-size:.9rem;position:relative}

.vragenblok{margin:1.6em 0;display:grid;gap:10px}
.qa{background:var(--wit);border:2.5px solid var(--inkt);border-radius:20px;overflow:hidden}
.qa summary{cursor:pointer;list-style:none;padding:1em 1.3em;font-family:var(--display);font-weight:700;font-size:1rem;display:flex;justify-content:space-between;gap:1em;align-items:center}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";flex:none;width:1.8em;height:1.8em;border-radius:50%;background:var(--geel);display:grid;place-items:center;transition:transform .3s var(--ease)}
.qa[open] summary::after{transform:rotate(45deg);background:var(--roze)}
.qa .tekst{padding:0 1.3em 1.1em}.qa .tekst>:last-child{margin-bottom:0}

.citaatgroot{margin:2.2em 0;padding:1.6em 1.6em 1.4em;background:var(--inkt);color:var(--wit);border-radius:var(--r);position:relative;overflow:hidden}
.citaatgroot::before{content:"“";position:absolute;right:.15em;top:-.25em;font-family:var(--display);font-size:9rem;color:var(--geel);opacity:.9;line-height:1}
.citaatgroot blockquote{margin:0;border:0;padding:0;font-family:var(--display);font-weight:700;font-size:clamp(1.3rem,3.4vw,2rem);line-height:1.2;position:relative;max-width:30ch}
.citaatgroot blockquote p{margin:0}
.citaatgroot figcaption{margin-top:1em;display:flex;flex-direction:column;color:var(--geel)}
.citaatgroot figcaption span{color:rgba(255,255,255,.7);font-size:.9rem}

.tegelrij{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:1.6em 0}
.tegel{background:var(--accent);color:var(--inkt);border-radius:var(--r);padding:1.4em;text-decoration:none;position:relative;display:flex;flex-direction:column;gap:.5em;min-height:150px;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.tegel h3{font-size:1.15rem}.tegel p{margin:0;font-weight:500;line-height:1.35}
.tegel .pijl{margin-top:auto;font-size:1.6rem;font-weight:800;transition:transform .25s var(--ease)}
.tegel.link:hover{transform:translateY(-5px) rotate(-.6deg);box-shadow:0 8px 0 var(--inkt)}
.tegel.link:hover .pijl{transform:translateX(6px)}

.grootblok{margin:2em 0;display:grid;gap:8px}
.grootblok p{margin:0;font-family:var(--display);font-weight:800;font-size:clamp(1.8rem,6vw,3.6rem);line-height:1;letter-spacing:-.03em;text-transform:uppercase}
.grootblok p span{background:var(--accent);padding:.04em .22em;border-radius:.18em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.grootblok p:nth-child(even){text-align:right}

.downloads{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin:1.6em 0}
.dl{display:flex;gap:1em;align-items:stretch;background:var(--wit);border:2.5px solid var(--inkt);border-radius:20px;overflow:hidden;text-decoration:none;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.dl:hover{transform:translateY(-4px);box-shadow:0 6px 0 var(--accent)}
.dl-cover{flex:none;width:96px;background:var(--accent);display:grid;place-items:center;overflow:hidden}
.dl-cover img{width:100%;height:100%;object-fit:cover}
.dl-type{font-family:var(--display);font-weight:800;font-size:1.1rem;transform:rotate(-8deg)}
.dl-tekst{padding:.9em .9em .9em 0;display:flex;flex-direction:column;gap:.3em}
.dl-tekst b{font-family:var(--display);font-size:.95rem;line-height:1.15}
.dl-tekst>span:not(.dl-knop){font-size:.88rem;color:var(--grijs);line-height:1.3}
.dl-knop{margin-top:auto;font-weight:700;font-size:.85rem}

.gegevens{margin:1.6em 0;display:grid;gap:8px}
.gegevens>div{display:flex;flex-wrap:wrap;gap:.3em 1.2em;align-items:center;background:var(--wit);border:2.5px solid var(--inkt);border-radius:16px;padding:.7em 1em}
.gegevens dt{flex:0 0 7em;font-weight:700;color:var(--grijs);font-size:.85rem;text-transform:uppercase;letter-spacing:.05em}
.gegevens dd{margin:0;display:flex;gap:.8em;align-items:center;flex:1;font-weight:700;word-break:break-word}
.kopieer{border:2px solid var(--inkt);background:var(--geel);border-radius:99px;padding:.25em .9em;font-weight:700;font-size:.8rem;cursor:pointer}
.kopieer.gedaan{background:var(--groen)}

.aftellen{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:1.8em 0;background:var(--inkt);color:var(--wit);border-radius:var(--r);padding:1.2em}
.af-getal{text-align:center;background:var(--inkt-3);border-radius:16px;padding:.8em .2em}
.af-getal b{display:block;font-family:var(--display);font-size:clamp(1.6rem,6vw,3.2rem);line-height:1;color:var(--geel);font-variant-numeric:tabular-nums}
.af-getal span{font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;opacity:.7}
.af-tekst{grid-column:1/-1;margin:.3em 0 0;text-align:center;font-family:var(--hand);font-size:1.3rem}

.fotostrook-blok{display:flex;gap:14px;overflow-x:auto;padding:.8em 4px 1.2em;margin:1.6em 0;scroll-snap-type:x proximity}
.fotostrook-blok figure{flex:none;margin:0;width:min(280px,70vw);aspect-ratio:4/5;border-radius:18px;overflow:hidden;border:4px solid var(--wit);box-shadow:0 8px 20px rgba(0,0,0,.18);transform:rotate(var(--r));scroll-snap-align:center;transition:transform .3s var(--ease)}
.fotostrook-blok figure:hover{transform:rotate(0) scale(1.03)}
.fotostrook-blok img{width:100%;height:100%;object-fit:cover}
.fs-meer{margin:-.4em 0 1.6em;font-weight:700}

.locatie{display:flex;flex-wrap:wrap;gap:1em;align-items:center;background:var(--wit);border:2.5px solid var(--inkt);border-radius:var(--r);padding:1.1em 1.3em;margin:1.6em 0}
.locatie .pin{flex:none;width:3em;height:3em;border-radius:50%;background:var(--roze);display:grid;place-items:center}
.locatie .pin svg{width:1.5em;height:1.5em}
.locatie>div{flex:1;min-width:200px}.locatie h3{font-size:1.1rem}.locatie p{margin:.2em 0 0}.locatie .extra{color:var(--grijs);font-size:.9rem}

.hulplijnen{background:var(--groen);color:var(--inkt);border-radius:var(--r);padding:1.4em 1.5em;margin:1.8em 0}
.hulplijnen h3{font-size:1.15rem;margin-bottom:.4em}.hulplijnen ul{margin:0;padding-left:1.1em}.hulplijnen li{margin:.3em 0}
.chatknop svg{width:1.2em;height:1.2em}

@media (max-width:560px){
  .aftellen{padding:.8em;gap:6px}
  .gegevens dt{flex-basis:100%}
  .grootblok p:nth-child(even){text-align:left}
}

/* bouwstenen binnen lopende tekst: breed, en los van de standaard tekststijlen */
.inhoud .tekst{max-width:none}
.inhoud .tekst>:is(p,ul,ol:not(.stappen):not(.tijdlijn),h2,h3,h4,hr,.knoppen){max-width:72ch}
.tekst :is(.feiten,.inbegrepen,.zelftest,.stappen,.tijdlijn,.tegelrij,.downloads,.hulplijnen,.locatie,.gegevens) li{padding-left:0;margin:0}
.tekst :is(.feiten,.inbegrepen,.zelftest,.stappen,.tijdlijn,.tegelrij,.downloads,.hulplijnen,.locatie,.gegevens) li::before{content:none}
.tekst .zelftest li{padding:0}
.tekst .inbegrepen li{padding:.35em 0}
.tekst .stappen li,.tekst .tijdlijn li{padding:.7em 0}
.tekst .hulplijnen li{margin:.3em 0}
.tekst :is(.tegel,.dl):hover{background:var(--accent);text-decoration:none}
.tekst .dl:hover{background:var(--wit)}
.tekst :is(.tegel,.dl){text-decoration:none;font-weight:inherit}
.tekst .citaatgroot blockquote{background:none;border:0;box-shadow:none;padding:0;margin:0;font-size:clamp(1.3rem,3.4vw,2rem)}
.tekst :is(.stappen,.tijdlijn,.tegelrij,.feiten,.inbegrepen,.qa,.dl,.locatie,.hulplijnen) h3{margin:.3em 0 .2em;font-size:1.1rem}
.tekst .inbegrepen h3,.tekst .locatie h3,.tekst .hulplijnen h3{margin:0 0 .6em}
.tekst .tegel h3{margin:0}
.tekst .grootblok p,.tekst .aftellen p{max-width:none}

/* ===== OnTrack: kompas, routes en plekken ===== */
.ontrack{background:var(--inkt);color:var(--wit);padding:4rem 0 4.5rem;position:relative;overflow:hidden}
.ontrack::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 30%,rgba(255,210,63,.12),transparent 55%);pointer-events:none}
.ot-kaart{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,430px) minmax(0,1fr);grid-template-rows:repeat(3,auto);gap:1.2rem 4.5rem;align-items:center}
.ot-midden{grid-column:2;grid-row:1/4;text-align:center}
.ot-schijf{position:relative;width:min(100%,400px);margin:0 auto;aspect-ratio:1}
.ot-kompas{position:absolute;inset:0;width:100%;height:100%}
.ot-naald{transform-origin:150px 150px;transition:transform .9s cubic-bezier(.3,1.4,.4,1);transform:rotate(18deg)}
.ot-merk{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;line-height:1}
.ot-merk span{font-family:var(--display);font-weight:700;font-size:clamp(1rem,2.2vw,1.35rem)}
.ot-merk em{font-style:normal;color:var(--geel);font-weight:400}
.ot-merk strong{font-family:var(--display);font-weight:900;font-size:clamp(1.7rem,4vw,2.7rem);color:var(--geel);letter-spacing:-.03em;margin:.15em 0 .45em}
.ot-merk small{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--geel);line-height:1.5}
.ot-vraag{display:flex;gap:.4rem;margin:1.4rem auto .6rem;max-width:400px;background:var(--wit);border-radius:99px;padding:.3rem}
.ot-vraag input{flex:1;min-width:0;border:0;background:none;padding:.6em 1em;font:inherit;font-size:1rem;color:var(--inkt)}
.ot-vraag input:focus{outline:none}
.ot-vraag:focus-within{box-shadow:0 0 0 3px var(--geel)}
.ot-vraag button{border:0;border-radius:99px;background:var(--geel);color:var(--inkt);font-family:var(--display);font-weight:700;font-size:.85rem;padding:.6em 1.2em;cursor:pointer}
.ot-note{font-family:var(--hand);font-size:1.15rem;color:var(--geel);margin:.3rem 0 0}

.ot-node{grid-column:var(--kol);grid-row:var(--rij);position:relative;display:flex;gap:1rem;align-items:center;text-align:left;background:none;border:0;color:var(--wit);cursor:pointer;padding:.4rem;border-radius:20px;transition:transform .25s var(--ease),background .25s}
.ot-node.rechts{flex-direction:row}
.ot-node.links{flex-direction:row-reverse;text-align:right}
.ot-node:hover,.ot-node[aria-expanded=true]{background:rgba(255,255,255,.07);transform:translateY(-3px)}
.ot-icoon{flex:none;width:84px;height:84px;border-radius:50%;border:3px solid var(--accent);display:grid;place-items:center;color:var(--accent);background:var(--inkt);transition:background .25s,color .25s}
.ot-icoon svg{width:44px;height:44px}
.ot-node:hover .ot-icoon,.ot-node[aria-expanded=true] .ot-icoon{background:var(--accent);color:var(--inkt)}
.ot-tekst{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.ot-tekst b{font-family:var(--display);font-size:1.5rem;letter-spacing:-.02em;line-height:1}
.ot-tekst i{font-style:normal;font-weight:700;color:var(--accent);line-height:1.25}
.ot-tekst small{font-size:.86rem;color:rgba(255,255,255,.75);line-height:1.35}
.ot-node::after{content:"";position:absolute;top:50%;width:3.5rem;height:2px;background:var(--accent);opacity:.7}
.ot-node.links::after{right:-4.1rem}.ot-node.rechts::after{left:-4.1rem}

.ot-panelen{position:relative;margin-top:2rem}
.ot-paneel{background:var(--accent);color:var(--inkt);border-radius:var(--r);padding:1.6rem 1.8rem;max-width:760px;margin:0 auto;animation:ot-in .4s var(--ease)}
.ot-paneel[hidden]{display:none}
@keyframes ot-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.ot-paneel-kop{display:flex;gap:1rem;align-items:center;margin-bottom:.9rem}
.ot-paneel .ot-icoon{width:60px;height:60px;border-color:var(--inkt);color:var(--inkt);background:transparent}
.ot-paneel .ot-icoon svg{width:32px;height:32px}
.ot-paneel h3{font-size:1.7rem}.ot-vr{margin:0;font-weight:700}
.ot-paneel .ot-mensen{font-size:.95rem}
.ot-paneel .knoppen{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.1rem 0 0}
.ot-paneel .knop.rand{border-color:var(--inkt)}
.ot-paneel .knop.donker:hover{box-shadow:0 6px 0 rgba(0,0,0,.25)}

.ot-plekken{padding:4rem 0 4.5rem}
.ot-intro{max-width:60ch;font-size:1.1rem;margin:0 0 1.4rem}
.ot-filter{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.8rem;margin-bottom:1rem;max-width:820px}
.ot-filter label{display:flex;flex-direction:column;gap:.3rem;font-weight:700;font-size:.85rem}
.ot-filter select,.ot-filter input{font:inherit;font-weight:500;padding:.7em .9em;border:2.5px solid var(--inkt);border-radius:14px;background:var(--wit);color:var(--inkt)}
.ot-teller{color:var(--grijs);font-size:.9rem;margin:0 0 .8rem}
.ot-lijst{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px}
.ot-plek{background:var(--wit);border:2.5px solid var(--inkt);border-radius:20px;padding:1.1rem 1.2rem;display:flex;flex-direction:column;gap:.35rem}
.ot-plek[hidden]{display:none}
.ot-plek h4{font-size:1.1rem;line-height:1.15}
.ot-plek p{margin:0;font-size:.95rem;line-height:1.4}
.ot-soort{align-self:flex-start;background:var(--geel);border:2px solid var(--inkt);border-radius:99px;padding:.15em .7em;font-size:.72rem!important;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.ot-waar{display:flex;gap:.35rem;align-items:center;color:var(--grijs)}
.ot-waar svg{width:1em;height:1em;flex:none}
.ot-links{display:flex;flex-wrap:wrap;gap:.3rem 1rem;margin-top:.3rem!important;font-weight:700}
.ot-check{color:#0a7a55;font-weight:700;font-size:.85rem!important}
.ot-leeg{background:var(--wit);border:2.5px dashed var(--inkt);border-radius:var(--r);padding:1.6rem;max-width:640px}
.ot-leeg[hidden]{display:none}.ot-leeg h3{font-size:1.2rem;margin-bottom:.5rem}
.ot-leeg .knoppen{display:flex;flex-wrap:wrap;gap:.6rem;margin:1rem 0 0}

@media (max-width:980px){
  .ot-kaart{grid-template-columns:1fr;gap:.9rem}
  .ot-midden{grid-column:1;grid-row:auto;order:-1;margin-bottom:1.2rem}
  .ot-node,.ot-node.links{grid-column:1;grid-row:auto;order:var(--o);flex-direction:row;text-align:left;background:rgba(255,255,255,.05)}
  .ot-node::after{display:none}
  .ot-icoon{width:64px;height:64px}.ot-icoon svg{width:34px;height:34px}
  .ot-tekst b{font-size:1.25rem}
  .ontrack{padding:2.5rem 0 3rem}
}
@media (prefers-reduced-motion:reduce){.ot-naald{transition:none}.ot-paneel{animation:none}}

/* ===== Lichaam (Wie zijn we) ===== */
.lichaam{display:grid;grid-template-columns:minmax(220px,340px) 1fr;gap:clamp(1.5rem,4vw,4rem);align-items:center;margin:2.5rem 0;max-width:none}
.lh-figuur{position:relative;max-width:340px;margin:0 auto;width:100%}
.lh-svg{width:100%;height:auto;display:block;overflow:visible}
.lh-lijf line,.lh-lijf rect,.lh-lijf circle{fill:#eee6d6;stroke:#eee6d6;stroke-linecap:round}
.lh-lijf line{fill:none}
.lh-adem{transform-origin:160px 300px;animation:lhAdem 4.5s ease-in-out infinite}
@keyframes lhAdem{50%{transform:scale(1.025)}}
.lh-deel{cursor:pointer;outline:none}
.lh-hit{fill:transparent;stroke:none!important}
.lh-vorm,.lh-oog{fill:var(--kl,#ffd23f);stroke:#1a1a1a;stroke-width:4;transition:transform .25s,fill .25s;transform-box:fill-box;transform-origin:center}
.lh-oog{fill:#fff}.lh-pupil{fill:#1a1a1a}
.lh-lach{fill:none;stroke:#1a1a1a;stroke-width:6;stroke-linecap:round}
.lh-puls{fill:none;stroke:var(--kl,#ffd23f);stroke-width:4;opacity:0;transform-box:fill-box;transform-origin:center;animation:lhPuls 2.8s ease-out infinite}
@keyframes lhPuls{0%{opacity:.9;transform:scale(.7)}100%{opacity:0;transform:scale(1.35)}}
.lh-hart{animation:lhSlag 1.3s ease-in-out infinite}
@keyframes lhSlag{0%,100%{transform:scale(1)}15%{transform:scale(1.14)}30%{transform:scale(1)}45%{transform:scale(1.1)}}
.lh-deel:hover .lh-vorm,.lh-deel:focus-visible .lh-vorm,.lh-deel.actief .lh-vorm{transform:scale(1.16)}
.lh-deel.actief .lh-puls{opacity:1;animation-duration:1.4s}
.lh-deel:focus-visible .lh-puls{opacity:1}
.k-geel{--kl:#ffd23f}.k-roze{--kl:#ff7eb6}.k-blauw{--kl:#5bc0ff}.k-groen{--kl:#5fe3a1}
.lh-kant{min-width:0}
.lh-paneel{background:var(--kl,#fff);border:3px solid #1a1a1a;border-radius:28px;padding:clamp(1.2rem,3vw,2rem);box-shadow:8px 8px 0 #1a1a1a;color:#1a1a1a;animation:lhIn .35s cubic-bezier(.2,1.4,.4,1)}
.lh-paneel.lh-intro{background:#fff}
.lh-paneel[hidden]{display:none}
@keyframes lhIn{from{opacity:0;transform:translateY(14px) scale(.96)}}
.lh-paneel h3{font-size:clamp(1.5rem,3.4vw,2.4rem);line-height:1.05;margin:.6rem 0 .5rem}
.lh-paneel p{font-size:1.1rem;max-width:none;margin:0 0 .8rem}
.lh-chip{display:inline-block;background:#1a1a1a;color:#fff;border-radius:99px;padding:.2rem .8rem;font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.lh-bedien{display:flex;align-items:center;gap:.8rem;margin-top:1.4rem}
.lh-bedien button{font:inherit;font-weight:700;border:3px solid #1a1a1a;background:#fff;color:#1a1a1a;border-radius:99px;padding:.6rem 1.1rem;cursor:pointer;box-shadow:4px 4px 0 #1a1a1a}
.lh-bedien button:active{transform:translate(2px,2px);box-shadow:2px 2px 0 #1a1a1a}
.lh-bedien .lh-volgende{background:#1a1a1a;color:#fff;margin-left:auto}
.lh-vorige[hidden]{display:none}
.lh-voortgang{font-weight:700}
@media(max-width:760px){.lichaam{grid-template-columns:1fr}.lh-figuur{max-width:230px}}
@media(prefers-reduced-motion:reduce){.lh-adem,.lh-hart,.lh-puls,.lh-paneel{animation:none}}

/* ===== Team als cellen ===== */
.cellen{display:flex;flex-wrap:wrap;gap:1.2rem;justify-content:center;align-items:center;margin:2rem 0;max-width:none}
.cel{--s:140px;position:relative;width:var(--s);height:var(--s);border:3px solid #1a1a1a;border-radius:var(--v);background:var(--kl);padding:0;cursor:pointer;display:grid;place-items:center;overflow:hidden;animation:celDrijf var(--t) ease-in-out var(--d) infinite;transition:transform .2s;font:inherit}
@keyframes celDrijf{0%,100%{transform:translate(0,0) rotate(0)}33%{transform:translate(6px,-9px) rotate(2deg)}66%{transform:translate(-7px,5px) rotate(-2deg)}}
.cel:hover,.cel:focus-visible{animation-play-state:paused;transform:scale(1.12);z-index:2;box-shadow:6px 6px 0 #1a1a1a}
.cel-beeld{position:absolute;inset:0;display:grid;place-items:center}
.cel-beeld img{width:100%;height:100%;object-fit:cover}
.cel-beeld b{font-size:calc(var(--s)*.45);color:#1a1a1a}
.cel-naam{position:absolute;left:0;right:0;bottom:0;background:#1a1a1a;color:#fff;font-weight:700;font-size:.85rem;padding:.25rem 0;text-align:center}
.cel-kaart{border:3px solid #1a1a1a;border-radius:28px;padding:1.6rem;max-width:min(92vw,420px);box-shadow:10px 10px 0 #1a1a1a;color:#1a1a1a;background:#fff}
.cel-kaart::backdrop{background:rgba(20,20,20,.55)}
.cel-kaart[open]{animation:lhIn .3s cubic-bezier(.2,1.4,.4,1)}
.cel-foto img{width:100%;max-height:260px;object-fit:cover;border-radius:18px;margin-bottom:1rem}
.cel-kaart h3{margin:0}.cel-rol{font-weight:700;margin:.2rem 0 .8rem}
.cel-sluit{position:absolute;top:.6rem;right:.8rem;font-size:1.8rem;line-height:1;border:0;background:none;cursor:pointer}
@media(prefers-reduced-motion:reduce){.cel{animation:none}}

/* ===== Stories ===== */
.stories{position:relative;max-width:460px;margin:2rem auto;border:3px solid #1a1a1a;border-radius:32px;box-shadow:10px 10px 0 #1a1a1a;overflow:hidden;background:#fff;color:#1a1a1a;outline:none;touch-action:pan-y;user-select:none}
.stories:focus-visible{outline:4px solid #5bc0ff;outline-offset:4px}
.sto-balk{position:absolute;top:12px;left:14px;right:14px;display:flex;gap:6px;z-index:3}
.sto-balk i{flex:1;height:5px;border-radius:9px;background:rgba(26,26,26,.2);overflow:hidden;position:relative}
.sto-balk i::after{content:"";position:absolute;inset:0;background:#1a1a1a;transform:scaleX(0);transform-origin:left;transition:transform .35s}
.sto-balk i.klaar::after{transform:scaleX(1)}
.sto-scherm{min-height:440px;padding:3.2rem 1.8rem 4.2rem;display:flex;flex-direction:column;justify-content:center;background:var(--kl);animation:lhIn .4s cubic-bezier(.2,1.4,.4,1)}
.sto-scherm[hidden]{display:none}
.sto-em{font-size:5rem;line-height:1;margin-bottom:1rem;display:inline-block;animation:stoStuit 2.4s ease-in-out infinite}
@keyframes stoStuit{50%{transform:translateY(-8px) rotate(-6deg)}}
.sto-scherm h3{font-size:clamp(1.8rem,6vw,2.4rem);line-height:1.05;margin:0 0 .6rem}
.sto-scherm p{font-size:1.15rem;margin:0;max-width:none}
.stories>button{position:absolute;top:0;bottom:0;width:38%;border:0;background:transparent;color:transparent;cursor:pointer;z-index:2;font-size:0}
.sto-vorige{left:0}.sto-volgende{right:0;width:62%!important}
.stories>button:focus-visible{outline:3px solid #1a1a1a;outline-offset:-6px}
.sto-hint{position:absolute;bottom:.8rem;left:0;right:0;text-align:center;font-size:.8rem;font-weight:700;margin:0;opacity:.6;pointer-events:none}
.stories.eind .sto-hint{opacity:0}

/* ===== Een dag ===== */
.dag{position:relative;margin:2rem 0;border:3px solid #1a1a1a;border-radius:32px;overflow:hidden;box-shadow:10px 10px 0 #1a1a1a;color:#1a1a1a;--h1:#8fd3ff;--h2:#ffe9a8;transition:background .6s}
.dag[data-deel="ochtend"]{--h1:#ffd8a8;--h2:#fff3c4}
.dag[data-deel="middag"]{--h1:#7cc9ff;--h2:#d8f1ff}
.dag[data-deel="avond"]{--h1:#ff8a5c;--h2:#ffb6d0}
.dag[data-deel="nacht"]{--h1:#1b2150;--h2:#3a3f8a;color:#fff}
.dag{background:linear-gradient(180deg,var(--h1),var(--h2))}
.dag-lucht{position:absolute;inset:0;pointer-events:none}
.dag-zon{position:absolute;width:64px;height:64px;border-radius:50%;background:#ffe14d;border:3px solid #1a1a1a;left:calc(var(--p,0)*(100% - 120px) + 28px);top:calc(58px - (1 - (2*var(--p,0) - 1)*(2*var(--p,0) - 1))*44px);transition:left .6s,top .6s,background .6s}
.dag[data-deel="nacht"] .dag-zon{background:#f4f1de}
.dag-sterren{position:absolute;inset:0;opacity:0;transition:opacity .6s;background:radial-gradient(2px 2px at 12% 20%,#fff,transparent),radial-gradient(3px 3px at 40% 12%,#fff,transparent),radial-gradient(2px 2px at 78% 28%,#fff,transparent),radial-gradient(3px 3px at 90% 10%,#fff,transparent),radial-gradient(2px 2px at 60% 40%,#fff,transparent)}
.dag[data-deel="nacht"] .dag-sterren,.dag[data-deel="avond"] .dag-sterren{opacity:1}
.dag-schermen{position:relative;padding:8.6rem 1.4rem 1rem}
.dag-scherm{display:flex;gap:1.2rem;align-items:center;background:rgba(255,255,255,.92);color:#1a1a1a;border:3px solid #1a1a1a;border-radius:24px;padding:1.2rem 1.4rem;animation:lhIn .35s cubic-bezier(.2,1.4,.4,1)}
.dag-scherm[hidden]{display:none}
.dag-em{font-size:3.4rem;line-height:1}
.dag-scherm h3{font-size:clamp(1.3rem,3vw,1.9rem);margin:.4rem 0 .3rem;line-height:1.1}
.dag-scherm p{margin:0;max-width:none}
.dag-schuif{display:block;padding:.6rem 1.4rem 1.4rem;position:relative;font-weight:700}
.dag-schuif span{display:block;margin-bottom:.4rem}
.dag-schuif input{width:100%;height:44px;accent-color:#1a1a1a;cursor:pointer}
@media(max-width:560px){.dag-scherm{flex-direction:column;align-items:flex-start}}

/* ===== Inbegrepen als wissel ===== */
.inbegrepen.wissel{display:block}
.inb-knoppen{display:inline-flex;border:3px solid #1a1a1a;border-radius:99px;padding:4px;gap:4px;background:#fff;margin-bottom:1rem}
.inb-knoppen button{font:inherit;font-weight:700;border:0;background:transparent;border-radius:99px;padding:.6rem 1.2rem;cursor:pointer;color:#1a1a1a;transition:background .2s,color .2s}
.inb-knoppen button[aria-pressed="true"]{background:#1a1a1a;color:#fff}
.inbegrepen.wissel>div[hidden]{display:none}
.inbegrepen.wissel li{animation:lhIn .4s cubic-bezier(.2,1.4,.4,1) backwards;animation-delay:calc(var(--i)*45ms)}
.inbegrepen.wissel h3{display:none}

/* ===== Meetellen en onthullen ===== */
.onthul{opacity:0;transform:translateY(26px) scale(.97);transition:opacity .6s,transform .6s cubic-bezier(.2,1.2,.4,1)}
.onthul.zichtbaar{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.onthul{opacity:1;transform:none;transition:none}.sto-em{animation:none}.dag-zon{transition:none}}