/* Gegenereerd uit _bron/doremi.css door build.py; bewerk die bron, niet dit bestand. */
@font-face{
font-family:'Playfair Display';font-style:normal;font-weight:400 900;font-display:swap;
src:url("../fonts/playfairdisplay-normal-400_900-subset1.woff2") format("woff2");
}
@font-face{
font-family:'Playfair Display';font-style:italic;font-weight:400 900;font-display:swap;
src:url("../fonts/playfairdisplay-italic-400_900-subset1.woff2") format("woff2");
}
@font-face{
font-family:'PT Sans';font-style:normal;font-weight:400;font-display:swap;
src:url("../fonts/ptsans-normal-400-subset1.woff2") format("woff2");
}
@font-face{
font-family:'PT Sans';font-style:normal;font-weight:700;font-display:swap;
src:url("../fonts/ptsans-normal-700-subset1.woff2") format("woff2");
}
@font-face{
font-family:'PT Sans';font-style:italic;font-weight:400;font-display:swap;
src:url("../fonts/ptsans-italic-400-subset1.woff2") format("woff2");
}
:root{
--goud:#847240;
--antraciet:#3C3C3C;
--creme:#FAF9F5;
--goud-tekst:#786838;
--goud-licht:#9B8960;
--zand:#C9BEA6;
--grijs:#696969;
--grijs-licht:#B2B2B2;
--creme-diep:#F3F0E8;
--creme-warm:#EFEAE0;
--lijn:rgba(132,114,64,.22);
--lijn-zacht:rgba(60,60,60,.10);
--inkt:#2E2E2E;
--inkt-zacht:#5C5C5C;
--serif:'Playfair Display', Georgia, 'Times New Roman', serif;
--sans:'PT Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
--marge:clamp(1.25rem, 5vw, 5.5rem);
--max:1280px;
--max-tekst:68ch;
--sectie:clamp(4.5rem, 11vw, 10rem);
--boog:52% 52% 6px 6px / 34% 34% 6px 6px;
--radius:4px;
--schaduw:0 1px 2px rgba(60,60,60,.04), 0 12px 32px -12px rgba(60,60,60,.14);
--schaduw-op:0 2px 4px rgba(60,60,60,.05), 0 28px 60px -18px rgba(60,60,60,.22);
--soepel:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
margin:0;
background:var(--creme);
color:var(--inkt);
font-family:var(--sans);
font-size:clamp(1rem,.96rem + .22vw,1.125rem);
line-height:1.72;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
overflow-x:hidden;
}
img,svg,video{max-width:100%;display:block;}
a{color:inherit;}
button{font:inherit;color:inherit;}
body::after{
content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.035;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
mix-blend-mode:multiply;
}
h1,h2,h3,h4{
font-family:var(--serif);
font-weight:700;
color:var(--antraciet);
margin:0 0 .5em;
line-height:1.08;
letter-spacing:-.012em;
}
h1{font-size:clamp(2.6rem,1.4rem + 5.4vw,5.4rem);letter-spacing:-.022em;}
h2{font-size:clamp(2rem,1.25rem + 3.1vw,3.6rem);letter-spacing:-.018em;}
h3{font-size:clamp(1.3rem,1.08rem + .95vw,1.85rem);}
h4{font-size:clamp(1.05rem,1rem + .3vw,1.25rem);}
p{margin:0 0 1.15em;}
p:last-child{margin-bottom:0;}
strong{font-weight:700;}
em{font-style:italic;}
.lead{
font-size:clamp(1.15rem,1.02rem + .62vw,1.5rem);
line-height:1.62;
color:var(--inkt-zacht);
font-weight:400;
}
.serif-lead{
font-family:var(--serif);
font-size:clamp(1.35rem,1.1rem + 1.15vw,2.05rem);
line-height:1.42;
font-weight:400;
font-style:italic;
color:var(--antraciet);
letter-spacing:-.01em;
}
.label{
display:flex;align-items:center;gap:.9rem;
font-family:var(--sans);font-weight:700;
font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;
color:var(--goud-tekst);margin:0 0 1.6rem;
}
.label::before{
content:"";width:clamp(1.5rem,4vw,3.25rem);height:1px;background:var(--goud);opacity:.55;flex:none;
}
.label--midden{justify-content:center;}
.label--midden::after{
content:"";width:clamp(1.5rem,4vw,3.25rem);height:1px;background:var(--goud);opacity:.55;flex:none;
}
.streep{width:56px;height:2px;background:var(--goud);border:0;margin:2rem 0;}
.streep--midden{margin-inline:auto;}
.wrap{width:min(100% - 2*var(--marge),var(--max));margin-inline:auto;}
.wrap--smal{width:min(100% - 2*var(--marge),920px);margin-inline:auto;}
.sectie{padding-block:var(--sectie);position:relative;}
.sectie--kort{padding-block:clamp(3rem,7vw,5.5rem);}
.sectie--creme{background:var(--creme-diep);}
.sectie--warm{background:var(--creme-warm);}
.sectie--donker{background:var(--antraciet);color:var(--creme);}
.sectie--donker h2,.sectie--donker h3,.sectie--donker h4{color:var(--creme);}
.sectie--donker .lead{color:rgba(250,249,245,.72);}
.sectie--donker .serif-lead{color:var(--creme);}
.sectie--goud{background:var(--goud);color:var(--creme);}
.sectie--goud h2,.sectie--goud h3{color:var(--creme);}
.sectie--goud .label{color:rgba(250,249,245,.9);}
.sectie--goud .label::before,.sectie--goud .label--midden::after{background:rgba(250,249,245,.7);}
.midden{text-align:center;}
.midden .label{justify-content:center;}
.kop-blok{max-width:60ch;}
.kop-blok--midden{max-width:62ch;margin-inline:auto;text-align:center;}
.grid{display:grid;gap:clamp(1.5rem,3.5vw,3rem);}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,17.5rem),1fr));}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(min(100%,13.5rem),1fr));}
.split{
display:grid;gap:clamp(2rem,5vw,5rem);align-items:center;
grid-template-columns:repeat(auto-fit,minmax(min(100%,25rem),1fr));
}
.split--beeld-rechts .split__tekst{order:-1;}
@media (min-width:64em){
.split--breed-beeld{grid-template-columns:1.08fr .92fr;}
.split--plak{align-items:start;}
.split--plak .plak{position:sticky;top:7.5rem;}
}
.split--plak{align-items:start;}
.knop{
--kleur:var(--creme);
display:inline-flex;align-items:center;gap:.7rem;
padding:1.02em 2.1em;
font-family:var(--sans);font-weight:700;font-size:.82rem;
letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
background:var(--goud-tekst);color:var(--kleur);
border:1px solid var(--goud-tekst);border-radius:2px;
cursor:pointer;position:relative;overflow:hidden;
transition:background .45s var(--soepel),color .45s var(--soepel),
border-color .45s var(--soepel),transform .45s var(--soepel),box-shadow .45s var(--soepel);
}
.knop::after{
content:"";width:1.1em;height:1px;background:currentColor;flex:none;
transition:width .4s var(--soepel);opacity:.9;
}
.knop:hover{background:var(--antraciet);border-color:var(--antraciet);transform:translateY(-2px);box-shadow:var(--schaduw-op);}
.knop:hover::after{width:1.7em;}
.knop:focus-visible{outline:2px solid var(--goud);outline-offset:4px;}
.knop--lijn{background:transparent;color:var(--antraciet);border-color:rgba(60,60,60,.28);}
.knop--lijn:hover{background:var(--antraciet);color:var(--creme);border-color:var(--antraciet);}
.knop--licht{background:var(--creme);color:var(--antraciet);border-color:var(--creme);}
.knop--licht:hover{background:transparent;color:var(--creme);border-color:var(--creme);}
.knop--lijn-licht{background:transparent;color:var(--creme);border-color:rgba(250,249,245,.42);}
.knop--lijn-licht:hover{background:var(--creme);color:var(--antraciet);border-color:var(--creme);}
.knoppen{display:flex;flex-wrap:wrap;gap:.9rem;}
.knoppen--midden{justify-content:center;}
.link{
display:inline-block;text-decoration:none;color:var(--goud-tekst);
font-weight:700;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;
padding-bottom:.35em;position:relative;
}
.link::after{
content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
background:var(--goud);transform:scaleX(.32);transform-origin:left;
transition:transform .5s var(--soepel);
}
.link:hover::after{transform:scaleX(1);}
.site-kop{
position:fixed;inset:0 0 auto;z-index:100;
transition:background .5s var(--soepel),box-shadow .5s var(--soepel),padding .5s var(--soepel);
padding-block:clamp(.85rem,1.8vw,1.5rem);
}
.site-kop__binnen{
width:min(100% - 2*var(--marge),1440px);margin-inline:auto;
display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
}
.site-kop__logo{display:block;flex:none;}
.site-kop__logo img{height:clamp(36px,4vw,52px);width:auto;transition:height .5s var(--soepel);}
.site-kop__logo .logo-neg{display:block;}
.site-kop__logo .logo-pos{display:none;}
.site-kop.is-vast{
background:rgba(250,249,245,.94);
backdrop-filter:saturate(1.4) blur(14px);
-webkit-backdrop-filter:saturate(1.4) blur(14px);
box-shadow:0 1px 0 var(--lijn-zacht),0 10px 34px -22px rgba(60,60,60,.5);
padding-block:.7rem;
}
.site-kop.is-vast .logo-neg{display:none;}
.site-kop.is-vast .logo-pos{display:block;}
.site-kop.is-vast .site-kop__logo img{height:clamp(30px,3.2vw,40px);}
.site-kop--licht .logo-neg{display:none;}
.site-kop--licht .logo-pos{display:block;}
.nav{display:flex;align-items:center;gap:clamp(1.1rem,2.3vw,2.3rem);}
.nav a{
text-decoration:none;font-size:.775rem;font-weight:700;
letter-spacing:.15em;text-transform:uppercase;
color:var(--creme);position:relative;padding-block:.4rem;white-space:nowrap;
transition:color .35s var(--soepel);
}
.nav a::after{
content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;
transform:scaleX(0);transform-origin:right;transition:transform .45s var(--soepel);
}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left;}
.nav a[aria-current="page"]{color:var(--zand);}
.site-kop.is-vast .nav a,.site-kop--licht .nav a{color:var(--antraciet);}
.site-kop.is-vast .nav a[aria-current="page"],.site-kop--licht .nav a[aria-current="page"]{color:var(--goud-tekst);}
.nav .knop{padding:.78em 1.5em;font-size:.72rem;}
.nav .knop--lijn.nav__knop-tweede{
padding:.72em 1.2em;color:var(--goud-tekst);border-color:var(--goud-tekst);background:transparent;
}
.nav .knop--lijn.nav__knop-tweede:hover{background:var(--goud-tekst);color:var(--creme);}
.site-kop.is-vast .nav .knop--lijn.nav__knop-tweede,
.site-kop--licht .nav .knop--lijn.nav__knop-tweede{color:var(--goud-tekst);}
.site-kop.is-vast .nav .knop--lijn.nav__knop-tweede:hover,
.site-kop--licht .nav .knop--lijn.nav__knop-tweede:hover{color:var(--creme);}
@media (min-width:48em) and (max-width:81.25em){
.nav{gap:clamp(.7rem,1.5vw,1.4rem);}
.nav .knop{padding:.7em 1.05em;font-size:.66rem;}
.nav .knop--lijn.nav__knop-tweede{padding:.66em .9em;}
}
@media (min-width:48em) and (max-width:70em){
.nav{gap:.6rem;}
.nav a{font-size:.66rem;letter-spacing:.1em;}
.nav .knop{padding:.66em .8em;font-size:.62rem;letter-spacing:.08em;}
.nav .knop--lijn.nav__knop-tweede{padding:.62em .7em;}
}
.site-kop.is-vast .nav .knop,.site-kop--licht .nav .knop{color:var(--creme);}
.nav-knop{
display:none;background:none;border:0;padding:.5rem;cursor:pointer;
width:44px;height:44px;position:relative;z-index:120;
}
.nav-knop span{
display:block;width:24px;height:1.5px;background:var(--creme);margin:5px auto;
transition:transform .4s var(--soepel),opacity .3s var(--soepel),background .4s var(--soepel);
}
.site-kop.is-vast .nav-knop span,.site-kop--licht .nav-knop span,.site-kop.is-open .nav-knop span{background:var(--antraciet);}
.site-kop.is-open .nav-knop span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.site-kop.is-open .nav-knop span:nth-child(2){opacity:0;}
.site-kop.is-open .nav-knop span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}
.nav__voet{display:none;}
@media (max-width:63.99em){
.nav-knop{display:block;}
.nav{
position:fixed;inset:0;background:var(--creme);
flex-direction:column;justify-content:center;align-items:center;gap:0;
transform:translateY(-100%);transition:transform .6s var(--soepel);
padding:4.6rem var(--marge) 2.4rem;overflow-y:auto;
}
.site-kop.is-open .nav{transform:translateY(0);}
.nav > a:not([class]){
position:relative;
display:flex;align-items:center;justify-content:center;
width:min(20rem,100%);min-height:3.4rem;
color:var(--antraciet);font-size:.95rem;letter-spacing:.16em;
border-bottom:1px solid rgba(132,114,64,.18);
}
.nav__embleem-link + a{border-top:1px solid rgba(132,114,64,.18);}
.nav > a:not([class])::after{display:none;}
.nav > a:not([class])[aria-current="page"]{color:var(--goud-tekst);}
.nav > a:not([class])[aria-current="page"]::before{
content:"";position:absolute;left:1rem;top:50%;transform:translateY(-50%);
width:5px;height:5px;border-radius:50%;background:var(--goud);
}
.nav .knop{
width:min(20rem,100%);justify-content:center;text-align:center;
padding:1.05em 1.5em;font-size:.72rem;letter-spacing:.16em;
}
.nav .knop--lijn.nav__knop-tweede{padding:1.05em 1.5em;}
.nav .knop:nth-last-of-type(2){margin-top:1.8rem;}
.nav .knop:last-of-type{margin-top:.7rem;}
.nav__voet{
display:flex;align-items:center;justify-content:center;gap:.55rem;
margin-top:2.2rem;position:relative;z-index:1;
font-family:var(--sans);font-size:.78rem;letter-spacing:.06em;color:var(--goud-tekst);
}
.nav__voet a{color:inherit;font-size:inherit;letter-spacing:inherit;}
.nav__voet a::after{display:none;}
.nav__voet span{opacity:.5;}
.site-kop.is-open .nav > a,
.site-kop.is-open .nav__voet{animation:nav-in .5s var(--soepel) both;}
.site-kop.is-open .nav > *:nth-child(2){animation-delay:.06s;}
.site-kop.is-open .nav > *:nth-child(3){animation-delay:.10s;}
.site-kop.is-open .nav > *:nth-child(4){animation-delay:.14s;}
.site-kop.is-open .nav > *:nth-child(5){animation-delay:.18s;}
.site-kop.is-open .nav > *:nth-child(6){animation-delay:.22s;}
.site-kop.is-open .nav > *:nth-child(7){animation-delay:.26s;}
.site-kop.is-open .nav > *:nth-child(8){animation-delay:.30s;}
.site-kop.is-open .nav > *:nth-child(9){animation-delay:.36s;}
.site-kop.is-open .nav > *:nth-child(10){animation-delay:.42s;}
.site-kop.is-open .nav > *:nth-child(11){animation-delay:.48s;}
}
@keyframes nav-in{
from{opacity:0;transform:translateY(14px);}
to{opacity:1;transform:none;}
}
@media (prefers-reduced-motion:reduce){
.site-kop.is-open .nav > a,
.site-kop.is-open .nav__voet{animation:none;}
}
.hero{
position:relative;min-height:min(96svh,60rem);
display:flex;align-items:flex-end;
padding-block:clamp(8rem,16vh,11rem) clamp(3.5rem,7vw,6rem);
background:var(--antraciet);overflow:hidden;isolation:isolate;
}
.hero__beeld{position:absolute;inset:0;z-index:-2;overflow:hidden;}
.hero__beeld > *{width:100%;height:100%;object-fit:cover;animation:zoom 24s ease-out forwards;}
@keyframes zoom{from{transform:scale(1.1);}to{transform:scale(1);}}
.hero::before{
content:"";position:absolute;inset:0;z-index:-1;
background:
linear-gradient(to top,rgba(28,28,28,.86) 0%,rgba(34,32,28,.52) 42%,rgba(40,38,32,.30) 72%,rgba(40,38,32,.42) 100%);
}
.hero__binnen{width:min(100% - 2*var(--marge),var(--max));margin-inline:auto;position:relative;}
.hero h1{color:var(--creme);max-width:16ch;margin-bottom:.35em;}
.hero h1 em{font-style:italic;color:var(--zand);}
.hero__intro{
color:rgba(250,249,245,.86);max-width:46ch;
font-size:clamp(1.05rem,.98rem + .5vw,1.32rem);line-height:1.62;margin-bottom:2.2rem;
}
.hero__label{
display:inline-flex;align-items:center;gap:.85rem;margin-bottom:1.6rem;
font-weight:700;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;
color:var(--zand);
text-wrap:balance;
}
.hero__label::before{content:"";width:2.5rem;height:1px;background:currentColor;opacity:.7;}
.hero--pagina{min-height:min(72svh,44rem);}
.hero--pagina h1{max-width:20ch;}
.hero__balk{
border-top:1px solid rgba(250,249,245,.18);margin-top:clamp(2.5rem,5vw,4rem);padding-top:1.6rem;
display:flex;flex-wrap:wrap;gap:1.4rem 2.8rem;align-items:baseline;
}
.hero__balk span{
color:rgba(250,249,245,.74);font-size:.76rem;font-weight:700;
letter-spacing:.16em;text-transform:uppercase;display:flex;align-items:center;gap:.6rem;
}
.hero__balk span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--goud-licht);flex:none;}
.scroll-hint{
position:absolute;right:0;bottom:0;display:flex;align-items:center;gap:.8rem;
color:rgba(250,249,245,.6);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
}
.scroll-hint::after{content:"";width:44px;height:1px;background:currentColor;animation:sleep 2.4s var(--soepel) infinite;transform-origin:left;}
@keyframes sleep{0%,100%{transform:scaleX(.4);}50%{transform:scaleX(1);}}
@media (max-width:47.99em){.scroll-hint{display:none;}}
.beeld{
position:relative;overflow:hidden;border-radius:var(--radius);background:var(--creme-warm);
}
.beeld img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--soepel);}
.beeld--boog{border-radius:var(--boog);}
.beeld--zoom:hover img{transform:scale(1.045);}
.beeld--rand::after{
content:"";position:absolute;inset:0;border:1px solid rgba(250,249,245,.28);
border-radius:inherit;pointer-events:none;
}
.verhouding-4-5{aspect-ratio:4/5;}
.verhouding-3-4{aspect-ratio:3/4;}
.verhouding-1-1{aspect-ratio:1/1;}
.verhouding-3-2{aspect-ratio:3/2;}
.verhouding-16-9{aspect-ratio:16/9;}
.foto{
position:relative;overflow:hidden;background:
radial-gradient(120% 90% at 25% 15%, #FBF8F1 0%, #EFE9DC 46%, #E2D9C6 100%);
border-radius:var(--radius);
}
.foto::before{
content:"";position:absolute;inset:0;
background:url("../img/embleem-positief.png") center/clamp(90px,26%,300px) no-repeat;
opacity:.075;filter:grayscale(1);
}
.foto::after{
content:"";position:absolute;inset:0;
background:linear-gradient(135deg,rgba(132,114,64,.10),rgba(132,114,64,0) 55%);
}
.foto--boog{border-radius:var(--boog);}
.foto--donker{background:radial-gradient(120% 90% at 30% 10%, #4A4842 0%, #383630 55%, #2B2A26 100%);}
.foto--donker::before{background-image:url("../img/embleem-negatief.png");opacity:.085;}
.foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;transition:transform 1.2s var(--soepel);}
a:hover .foto img{transform:scale(1.045);}
.foto__tag{
position:absolute;left:.7rem;bottom:.7rem;z-index:3;
font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;font-weight:700;
color:rgba(60,60,60,.5);background:rgba(250,249,245,.82);
padding:.35em .7em;border-radius:2px;opacity:0;transition:opacity .35s var(--soepel);
pointer-events:none;
}
.foto:hover .foto__tag{opacity:1;}
.foto--donker .foto__tag{color:rgba(250,249,245,.72);background:rgba(40,40,40,.7);}
.beeld-stapel{position:relative;}
.beeld-stapel__klein{
position:absolute;right:-6%;bottom:-9%;width:44%;
border:8px solid var(--creme);border-radius:var(--radius);box-shadow:var(--schaduw-op);
}
@media (max-width:47.99em){.beeld-stapel__klein{display:none;}}
.kaart{
background:var(--creme);border:1px solid var(--lijn-zacht);border-radius:var(--radius);
padding:clamp(1.6rem,3vw,2.5rem);
transition:transform .55s var(--soepel),box-shadow .55s var(--soepel),border-color .55s var(--soepel);
height:100%;display:flex;flex-direction:column;
}
.kaart:hover{transform:translateY(-4px);box-shadow:var(--schaduw-op);border-color:var(--lijn);}
.kaart h3{margin-bottom:.55em;}
.kaart p{color:var(--inkt-zacht);}
.kaart__nr{
font-family:var(--serif);font-size:2.6rem;line-height:1;color:var(--goud-tekst);
opacity:.78;margin-bottom:1rem;display:block;
}
.sectie--creme .kaart{background:var(--creme);}
.sectie--donker .kaart{background:rgba(250,249,245,.05);border-color:rgba(250,249,245,.14);}
.sectie--donker .kaart p{color:rgba(250,249,245,.7);}
.troef{display:flex;gap:1.1rem;align-items:flex-start;}
.troef + .troef{margin-top:clamp(1.5rem,2.8vw,2.2rem);}
.troef__icoon{
flex:none;width:2.9rem;height:2.9rem;border-radius:50%;
border:1px solid var(--lijn);display:grid;place-items:center;color:var(--goud);
transition:background .5s var(--soepel),color .5s var(--soepel),border-color .5s var(--soepel);
}
.troef__icoon svg{width:1.3rem;height:1.3rem;}
.troef:hover .troef__icoon{background:var(--goud);color:var(--creme);border-color:var(--goud);}
.troef h3,.troef h4{margin-bottom:.28em;}
.troef p{font-size:.95rem;color:var(--inkt-zacht);margin:0;}
.sectie--donker .troef__icoon{border-color:rgba(250,249,245,.26);color:var(--zand);}
.sectie--donker .troef p{color:rgba(250,249,245,.68);}
.cijfers{display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr));}
.cijfer{padding:clamp(1.5rem,3vw,2.4rem) clamp(1rem,2.2vw,2rem);border-left:1px solid var(--lijn);}
.cijfer:first-child{border-left:0;}
.cijfer__waarde{
font-family:var(--serif);font-weight:700;line-height:1;color:var(--goud);
font-size:clamp(2.1rem,1.5rem + 2.2vw,3.4rem);display:block;margin-bottom:.35rem;
letter-spacing:-.02em;
}
.cijfer__tekst{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--inkt-zacht);line-height:1.5;}
.sectie--donker .cijfer{border-color:rgba(250,249,245,.16);}
.sectie--donker .cijfer__waarde{color:var(--zand);}
.sectie--donker .cijfer__tekst{color:rgba(250,249,245,.62);}
@media (max-width:47.99em){
.cijfer{border-left:0;border-top:1px solid var(--lijn);}
.cijfer:first-child{border-top:0;}
}
.dag{position:relative;padding-left:clamp(1.6rem,4vw,3rem);}
.dag::before{content:"";position:absolute;left:.32rem;top:.6rem;bottom:.6rem;width:1px;background:var(--lijn);}
.dag__item{position:relative;padding-bottom:clamp(1.8rem,3.5vw,2.8rem);}
.dag__item:last-child{padding-bottom:0;}
.dag__item::before{
content:"";position:absolute;left:calc(-1*clamp(1.6rem,4vw,3rem) + .04rem);top:.72rem;
width:9px;height:9px;border-radius:50%;background:var(--creme);border:1.5px solid var(--goud);
}
.dag__uur{
font-family:var(--serif);font-size:1.1rem;font-weight:700;color:var(--goud-tekst);
display:block;margin-bottom:.15rem;letter-spacing:.02em;
}
.dag__item h3{margin-bottom:.3em;}
.dag__item p{color:var(--inkt-zacht);font-size:.97rem;margin:0;}
.quote{
font-family:var(--serif);font-style:italic;font-weight:400;
font-size:clamp(1.2rem,1rem + .95vw,1.8rem);line-height:1.5;color:var(--antraciet);
letter-spacing:-.008em;margin:0 0 1.3rem;
}
.sectie--donker .quote,.sectie--goud .quote{color:var(--creme);}
.quote__bron{
font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--goud-tekst);
}
.sectie--donker .quote__bron{color:var(--zand);}
.sectie--goud .quote__bron{color:rgba(250,249,245,.82);}
.getuige{
border-top:1px solid var(--lijn);padding-top:1.7rem;height:100%;
}
.getuige .quote{font-size:clamp(1.05rem,.98rem + .42vw,1.3rem);}
.locatie{
position:relative;overflow:hidden;border-radius:var(--radius);
background:var(--antraciet);color:var(--creme);display:block;text-decoration:none;
min-height:clamp(24rem,40vw,34rem);display:flex;align-items:flex-end;
transition:transform .6s var(--soepel),box-shadow .6s var(--soepel);
}
.locatie:hover{transform:translateY(-5px);box-shadow:var(--schaduw-op);}
.locatie__beeld{position:absolute;inset:0;z-index:0;}
.locatie__beeld img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--soepel);}
.locatie:hover .locatie__beeld img{transform:scale(1.05);}
.locatie::after{
content:"";position:absolute;inset:0;z-index:1;
background:linear-gradient(to top,rgba(26,25,22,.9) 6%,rgba(30,29,25,.5) 46%,rgba(30,29,25,.18) 100%);
}
.locatie__inhoud{position:relative;z-index:2;padding:clamp(1.6rem,3.2vw,2.8rem);width:100%;}
.locatie__plaats{
font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;font-weight:700;
color:var(--zand);display:block;margin-bottom:.7rem;
}
.locatie h3{color:var(--creme);font-size:clamp(1.7rem,1.3rem + 1.6vw,2.6rem);margin-bottom:.35em;}
.locatie p{color:rgba(250,249,245,.78);font-size:.98rem;margin-bottom:1.3rem;max-width:38ch;}
.locatie__link{
display:inline-flex;align-items:center;gap:.7rem;color:var(--creme);
font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
}
.locatie__link::after{content:"";width:1.6em;height:1px;background:currentColor;transition:width .45s var(--soepel);}
.locatie:hover .locatie__link::after{width:2.6em;}
.locatie__badge{
position:absolute;top:clamp(1.2rem,2.5vw,2rem);right:clamp(1.2rem,2.5vw,2rem);z-index:2;
background:rgba(250,249,245,.94);color:var(--antraciet);
font-size:.63rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
padding:.5em .9em;border-radius:2px;
}
.lijst{list-style:none;margin:0;padding:0;display:grid;gap:.85rem;}
.lijst li{position:relative;padding-left:1.8rem;color:var(--inkt-zacht);}
.lijst li::before{
content:"";position:absolute;left:0;top:.72em;width:.7rem;height:1px;background:var(--goud);
}
.lijst--kolom-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:.85rem 2.2rem;}
.sectie--donker .lijst li{color:rgba(250,249,245,.72);}
.sectie--goud .lijst li{color:rgba(250,249,245,.9);}
.sectie--goud .lijst li::before{background:rgba(250,249,245,.8);}
.gegevens{display:grid;gap:0;margin:0;}
.gegevens > div{
display:grid;grid-template-columns:minmax(9rem,.42fr) 1fr;gap:1rem;
padding:1.05rem 0;border-top:1px solid var(--lijn-zacht);align-items:baseline;
}
.gegevens > div:last-child{border-bottom:1px solid var(--lijn-zacht);}
.gegevens dt{
font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;font-weight:700;color:var(--goud-tekst);
}
.gegevens dd{margin:0;color:var(--inkt);}
.gegevens dd small{display:block;color:var(--inkt-zacht);font-size:.86rem;line-height:1.5;margin-top:.2rem;}
@media (max-width:37.49em){
.gegevens > div{grid-template-columns:1fr;gap:.25rem;}
}
.sectie--donker .gegevens > div{border-color:rgba(250,249,245,.16);}
.sectie--donker .gegevens dt{color:var(--zand);}
.sectie--donker .gegevens dd{color:var(--creme);}
.sectie--donker .gegevens dd small{color:rgba(250,249,245,.62);}
.sectie--donker .gegevens dd a{color:var(--creme);text-decoration-color:rgba(250,249,245,.45);}
.sectie--donker .doc{background:rgba(250,249,245,.05);border-color:rgba(250,249,245,.16);color:var(--creme);}
.sectie--donker .doc:hover{border-color:var(--zand);}
.sectie--donker .doc__icoon,.sectie--donker .doc__pijl{color:var(--zand);}
.sectie--donker .doc__meta{color:rgba(250,249,245,.64);}
.sectie--donker .kaart-map{border-color:rgba(250,249,245,.16);}
.doc{
display:flex;align-items:center;gap:1.1rem;text-decoration:none;
padding:1.15rem 1.3rem;border:1px solid var(--lijn-zacht);border-radius:var(--radius);
background:var(--creme);
transition:border-color .45s var(--soepel),transform .45s var(--soepel),box-shadow .45s var(--soepel);
}
.doc:hover{border-color:var(--goud);transform:translateX(3px);box-shadow:var(--schaduw);}
.doc__icoon{flex:none;width:2.1rem;height:2.1rem;color:var(--goud);}
.doc__naam{font-weight:700;font-size:.98rem;display:block;line-height:1.35;}
.doc__meta{font-size:.78rem;color:var(--grijs);letter-spacing:.06em;}
.doc__pijl{margin-left:auto;color:var(--goud);flex:none;transition:transform .45s var(--soepel);}
.doc:hover .doc__pijl{transform:translateX(3px);}
.form{display:grid;gap:1.4rem;}
.veld{display:grid;gap:.5rem;}
.veld label{
font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;font-weight:700;color:var(--goud-tekst);
}
.veld input,.veld select,.veld textarea{
font:inherit;font-size:1rem;color:var(--inkt);
background:var(--creme);border:0;border-bottom:1px solid var(--lijn);
padding:.8rem .1rem;border-radius:0;
transition:border-color .4s var(--soepel);
}
.veld input:focus,.veld select:focus,.veld textarea:focus{outline:0;border-bottom-color:var(--goud);}
.veld textarea{min-height:8rem;resize:vertical;}
.veld--half{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));}
.form__note{font-size:.85rem;color:var(--grijs);line-height:1.6;}
.kader{
border:1px solid var(--lijn);border-radius:var(--radius);
padding:clamp(1.5rem,3vw,2.4rem);background:rgba(132,114,64,.045);
}
.kader h3{color:var(--goud-tekst);margin-bottom:.5em;}
.kader p{color:var(--inkt-zacht);margin-bottom:.7em;}
.kader p:last-child{margin-bottom:0;}
.sectie--donker .kader{border-color:rgba(250,249,245,.2);background:rgba(250,249,245,.045);}
.sectie--donker .kader h3{color:var(--zand);}
.sectie--donker .kader p{color:rgba(250,249,245,.7);}
.cta{
position:relative;overflow:hidden;background:var(--antraciet);color:var(--creme);
padding-block:clamp(4rem,9vw,7.5rem);text-align:center;isolation:isolate;
}
.cta__beeld{position:absolute;inset:0;z-index:-2;}
.cta__beeld img{width:100%;height:100%;object-fit:cover;}
.cta::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(30,29,26,.78);}
.cta h2{color:var(--creme);max-width:22ch;margin-inline:auto;}
.cta p{color:rgba(250,249,245,.78);max-width:52ch;margin-inline:auto;margin-bottom:2.2rem;}
.site-voet{background:var(--antraciet);color:rgba(250,249,245,.72);padding-block:clamp(3.5rem,7vw,5.5rem) 2rem;}
.site-voet a{color:inherit;text-decoration:none;transition:color .35s var(--soepel);}
.site-voet a:hover{color:var(--creme);}
.site-voet__top{
display:grid;gap:clamp(2rem,4vw,3.5rem);
grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));
padding-bottom:clamp(2.5rem,5vw,4rem);
}
.site-voet__merk img{height:38px;width:auto;margin-bottom:1.4rem;}
.site-voet__merk p{font-size:.95rem;max-width:34ch;line-height:1.65;}
.site-voet h2{
color:var(--creme);font-family:var(--sans);font-size:.72rem;font-weight:700;
letter-spacing:.2em;text-transform:uppercase;margin-bottom:1.2rem;
}
.site-voet ul{list-style:none;margin:0;padding:0;display:grid;gap:.7rem;}
.site-voet li{font-size:.95rem;}
.site-voet__financieel{
border-top:1px solid rgba(250,249,245,.14);
padding:clamp(1.8rem,3.5vw,2.6rem) 0 clamp(1.6rem,3vw,2.2rem);
text-align:center;
}
.site-voet__financieel h2{margin-bottom:1.3rem;color:var(--zand);}
.site-voet__entiteiten{
display:grid;gap:clamp(1.4rem,3vw,3rem);
grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));
}
.site-voet__entiteit{
display:grid;gap:.35rem;
font-size:.82rem;color:rgba(250,249,245,.62);
}
.site-voet__ent-naam{
font-family:var(--sans);font-weight:700;font-size:.7rem;letter-spacing:.16em;
text-transform:uppercase;color:rgba(250,249,245,.9);margin-bottom:.2rem;
}
.site-voet__onder{
border-top:1px solid rgba(250,249,245,.14);padding-top:1.8rem;
display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;align-items:center;
font-size:.78rem;color:rgba(250,249,245,.62);
}
.site-voet__onder p{margin:0;}
.site-voet__wettelijk{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;}
.site-voet__sociaal{display:flex;gap:.9rem;}
.site-voet__sociaal a{
width:2.4rem;height:2.4rem;border:1px solid rgba(250,249,245,.22);border-radius:50%;
display:grid;place-items:center;transition:background .4s var(--soepel),border-color .4s var(--soepel),color .4s var(--soepel);
}
.site-voet__sociaal a:hover{background:var(--goud);border-color:var(--goud);color:var(--creme);}
.site-voet__sociaal svg{width:1.05rem;height:1.05rem;}
.kruimels{
font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
color:rgba(250,249,245,.6);margin-bottom:1.4rem;display:flex;gap:.6rem;flex-wrap:wrap;
}
.kruimels a{text-decoration:none;color:inherit;transition:color .35s var(--soepel);}
.kruimels a:hover{color:var(--creme);}
.kruimels span{color:var(--zand);}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .95s var(--soepel),transform .95s var(--soepel);}
.reveal.zichtbaar{opacity:1;transform:none;}
.reveal-d1{transition-delay:.09s;}
.reveal-d2{transition-delay:.18s;}
.reveal-d3{transition-delay:.27s;}
.reveal-d4{transition-delay:.36s;}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
html{scroll-behavior:auto;}
.reveal{opacity:1;transform:none;}
}
.enkel-lezers{
position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.overslaan{
position:absolute;left:-9999px;top:0;background:var(--goud-tekst);color:var(--creme);
padding:.8rem 1.4rem;z-index:200;font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:.78rem;
}
.overslaan:focus{left:1rem;top:1rem;}
.mt-0{margin-top:0;}
.mt-1{margin-top:1rem;}
.mt-2{margin-top:2rem;}
.mt-3{margin-top:clamp(2rem,4vw,3.2rem);}
.mt-4{margin-top:clamp(3rem,6vw,4.5rem);}
.mb-2{margin-bottom:2rem;}
.goud{color:var(--goud-tekst);}
.zand{color:var(--zand);}
.klein{font-size:.86rem;line-height:1.6;color:var(--grijs);}
.sectie--donker .klein{color:rgba(250,249,245,.64);}
.site-voet .klein{color:inherit;}
.werkbanner{
background:var(--antraciet);color:var(--zand);text-align:center;
padding:.7rem var(--marge);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
border-bottom:1px solid rgba(250,249,245,.14);position:relative;z-index:150;
}
.invullen{font-style:italic;color:var(--goud-tekst);font-weight:400;}
.melding{background:rgba(132,114,64,.1);border:1px solid var(--lijn);border-radius:4px;padding:1.1rem 1.3rem;color:var(--antraciet);}
.kaart-map{border-radius:4px;overflow:hidden;border:1px solid var(--lijn-zacht);filter:grayscale(.35) contrast(.95);}
.kaart-map iframe{display:block;width:100%;height:clamp(18rem,40vw,26rem);border:0;}
.locatie__beeld .foto,.cta__beeld .foto,.hero__beeld .foto{position:absolute;inset:0;height:100%;}
.voortgang{position:fixed;top:0;left:0;right:0;height:3px;z-index:210;pointer-events:none;}
.voortgang span{display:block;height:100%;background:linear-gradient(90deg,var(--goud),var(--goud-licht));transform-origin:left;transform:scaleX(0);}
.hero h1 .wrd{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em;}
.hero h1 .wrd i{display:inline-block;font-style:inherit;transform:translateY(112%);animation:wrd .9s var(--soepel) forwards;animation-delay:var(--d,0s);}
@keyframes wrd{to{transform:none;}}
.hero__label{animation:instap .9s var(--soepel) .05s both;}
.hero__intro{animation:instap .9s var(--soepel) .55s both;}
.hero .knoppen{animation:instap .9s var(--soepel) .72s both;}
.hero__balk{animation:instap 1s var(--soepel) .9s both;}
.kruimels{animation:instap .8s var(--soepel) 0s both;}
@keyframes instap{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:none;}}
.hero__beeld{will-change:transform;}
.markeer{
background-image:linear-gradient(100deg,rgba(132,114,64,.06) 0%,rgba(132,114,64,.38) 5%,rgba(155,137,96,.46) 50%,rgba(132,114,64,.36) 95%,rgba(132,114,64,.10) 100%);
background-repeat:no-repeat;background-size:0% .72em;background-position:0 72%;
-webkit-box-decoration-break:clone;box-decoration-break:clone;
transition:background-size 1.05s cubic-bezier(.55,-.02,.16,1.24) .35s;
}
.sectie--donker .markeer,.hero .markeer,.cta .markeer{
background-image:linear-gradient(120deg,rgba(201,190,166,.38),rgba(201,190,166,.2));
}
.lint{overflow:hidden;border-block:1px solid var(--lijn);background:var(--creme);padding-block:clamp(1.1rem,2.2vw,1.8rem);position:relative;}
.lint--donker{background:var(--antraciet);border-color:rgba(250,249,245,.14);}
.lint__spoor{display:flex;gap:0;width:max-content;animation:lint 46s linear infinite;}
.lint span{
font-family:var(--serif);font-style:italic;font-weight:500;white-space:nowrap;
font-size:clamp(1.5rem,1.1rem + 1.8vw,2.6rem);color:var(--antraciet);
display:inline-flex;align-items:center;
}
.lint--donker span{color:var(--creme);}
.lint span::after{
content:"";width:7px;height:7px;border-radius:50%;background:var(--goud);
margin-inline:clamp(1.2rem,2.6vw,2.4rem);flex:none;opacity:.75;
}
.lint span:nth-child(even){
color:transparent;-webkit-text-stroke:1px var(--goud);
}
@keyframes lint{to{transform:translateX(-50%);}}
.lint:hover .lint__spoor{animation-play-state:paused;}
@media (prefers-reduced-motion:no-preference){
.reveal .foto{clip-path:inset(10% 7% 10% 7%);transition:clip-path 1.15s var(--soepel) .12s;}
.reveal.zichtbaar .foto{clip-path:inset(0 0 0 0);}
}
.kaart{position:relative;overflow:hidden;}
.kaart::before{
content:"";position:absolute;top:0;left:0;right:0;height:2px;
background:linear-gradient(90deg,var(--goud),transparent 80%);
transform:scaleX(0);transform-origin:left;transition:transform .65s var(--soepel);
}
.kaart:hover::before{transform:scaleX(1);}
.kaart:hover{transform:translateY(-4px) rotate(-.35deg);}
.troef:hover .troef__icoon svg{animation:tik .5s var(--soepel);}
@keyframes tik{35%{transform:rotate(-7deg) scale(1.1);}70%{transform:rotate(4deg);}}
.zichtbaar .dag__item::before{animation:stip .6s var(--soepel) both;}
.zichtbaar .dag__item:nth-child(2)::before{animation-delay:.12s;}
.zichtbaar .dag__item:nth-child(3)::before{animation-delay:.24s;}
.zichtbaar .dag__item:nth-child(4)::before{animation-delay:.36s;}
.zichtbaar .dag__item:nth-child(5)::before{animation-delay:.48s;}
.zichtbaar .dag__item:nth-child(6)::before{animation-delay:.6s;}
@keyframes stip{from{transform:scale(.2);background:var(--goud);}60%{transform:scale(1.5);}to{transform:scale(1);}}
.knop{will-change:transform;}
.knop::before{
content:"";position:absolute;inset:0;
background:linear-gradient(105deg,transparent 42%,rgba(250,249,245,.22) 50%,transparent 58%);
transform:translateX(-120%);transition:transform .7s var(--soepel);pointer-events:none;
}
.knop:hover::before{transform:translateX(120%);}
@media (prefers-reduced-motion:reduce){
.hero h1 .wrd i{animation:none;transform:none;}
.hero__label,.hero__intro,.hero .knoppen,.hero__balk,.kruimels{animation:none;}
.lint__spoor{animation:none;}
.markeer{background-size:100% .42em;transition:none;}
.voortgang{display:none;}
}
.hero__beeld video,.cta__beeld video{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
opacity:0;transition:opacity 1.2s var(--soepel);z-index:1;
}
.hero__beeld video.is-af,.cta__beeld video.is-af{opacity:1;}
.hero__beeld{overflow:hidden;}
.site-voet__merkblok{
text-align:center;padding-bottom:clamp(2.4rem,5vw,4rem);
border-bottom:1px solid rgba(250,249,245,.14);margin-bottom:clamp(2.2rem,4.5vw,3.6rem);
}
.site-voet__embleem{height:clamp(52px,6vw,74px);width:auto;margin:0 auto 1.2rem;opacity:.95;}
.site-voet__logo{height:clamp(64px,8.5vw,104px);width:auto;margin:0 auto 1.3rem;filter:drop-shadow(0 14px 32px rgba(0,0,0,.3));}
.site-voet__merkblok p{
font-family:var(--serif);font-style:italic;color:rgba(250,249,245,.66);
font-size:clamp(1rem,.95rem + .3vw,1.15rem);margin:0 0 1.6rem;
}
.site-voet__merkblok .site-voet__sociaal{justify-content:center;}
.site-voet__kolommen{
display:grid;gap:clamp(2rem,4vw,3.5rem);
grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));
padding-bottom:clamp(2.2rem,4.5vw,3.6rem);text-align:center;
}
.site-voet__kolommen h2{margin-bottom:1.1rem;color:var(--zand);}
.site-voet__kolommen ul{justify-items:center;}
.voet-nota{
display:inline-block;background:var(--goud-tekst);color:var(--creme);
font-size:.6rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
padding:.28em .7em;border-radius:999px;vertical-align:middle;margin-left:.35rem;
}
.site-voet__site{
font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:.74rem;color:var(--zand) !important;
}
.locatie__badge--goud{background:var(--goud-tekst);color:var(--creme);}
@media (max-width:47.99em){
.site-voet__onder{justify-content:center;text-align:center;}
.site-voet__wettelijk{justify-content:center;}
}
.volgende-band{padding-block:0;background:var(--creme);}
.volgende{
display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
border:1px solid var(--lijn);border-radius:var(--radius);
background:linear-gradient(120deg,rgba(132,114,64,.07),rgba(132,114,64,.02));
padding:clamp(1.4rem,3vw,2.2rem) clamp(1.4rem,3.2vw,2.6rem);
text-decoration:none;margin-block:clamp(2.5rem,5vw,4rem) 0;
transition:border-color .5s var(--soepel),transform .5s var(--soepel),box-shadow .5s var(--soepel);
}
.volgende:hover{border-color:var(--goud);transform:translateY(-3px);box-shadow:var(--schaduw-op);}
.volgende__label{
display:block;font-size:.68rem;font-weight:700;letter-spacing:.2em;
text-transform:uppercase;color:var(--goud-tekst);margin-bottom:.4rem;
}
.volgende__titel{
display:block;font-family:var(--serif);font-weight:700;color:var(--antraciet);
font-size:clamp(1.35rem,1.1rem + 1.1vw,2rem);line-height:1.15;margin-bottom:.35rem;
}
.volgende__tekst{display:block;color:var(--inkt-zacht);font-size:.97rem;max-width:52ch;}
.volgende__pijl{
flex:none;width:3.2rem;height:3.2rem;border-radius:50%;border:1px solid var(--lijn);
display:grid;place-items:center;color:var(--goud);transition:background .5s var(--soepel),color .5s var(--soepel),transform .5s var(--soepel);
}
.volgende__pijl svg{width:1.35rem;height:1.35rem;}
.volgende:hover .volgende__pijl{background:var(--goud-tekst);color:var(--creme);transform:translateX(4px);}
@media (max-width:47.99em){.volgende{flex-direction:column;align-items:flex-start;}.volgende__pijl{align-self:flex-end;margin-top:-1rem;}}
.sectie--goud .kaart--doorzichtig{background:rgba(250,249,245,.08);border-color:rgba(250,249,245,.22);}
.sectie--goud .kaart--doorzichtig h3{color:var(--creme);}
.sectie--goud .kaart--doorzichtig p{color:rgba(250,249,245,.85);}
.sectie--goud .kaart--doorzichtig .kaart__nr{color:var(--creme);opacity:.5;}
.sectie--goud .lead{color:rgba(250,249,245,.85);}
.sectie--goud .kaart--doorzichtig::before{background:linear-gradient(90deg,var(--creme),transparent 80%);}
.sectie--goud .dag__item::before{background:var(--goud);border-color:var(--creme);}
.verhaal{position:relative;background:var(--antraciet);}
.verhaal__plakker{
position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
display:grid;place-items:center;isolation:isolate;
}
.verhaal__plakker::before{
content:"";position:absolute;inset:-20%;z-index:0;
background:radial-gradient(46% 38% at 50% 58%,rgba(132,114,64,.34),transparent 70%);
filter:blur(10px);
transform:translate(calc((var(--v,0) - .5) * 16%), calc((var(--v,0) - .5) * -8%)) rotate(calc(var(--v,0) * 30deg));
}
.verhaal__stap{
position:absolute;inset:0;z-index:1;display:grid;place-items:center;text-align:center;
padding:0 var(--marge);opacity:0;visibility:hidden;
transform:translateY(46px) scale(.97);
transition:opacity .75s var(--soepel),transform .75s var(--soepel),visibility 0s .75s;
}
.verhaal__stap.actief{
opacity:1;visibility:visible;transform:none;
transition:opacity .75s var(--soepel),transform .75s var(--soepel),visibility 0s;
}
.verhaal__stap.actief > div{transform:translateY(calc(var(--sub,0) * -14px)) scale(calc(1 + var(--sub,0) * .045));}
.verhaal__stap.voorbij{transform:translateY(-46px) scale(1.02);}
.verhaal__echo{
position:absolute;left:50%;top:50%;
transform:translate(calc(-50% + (var(--v,0) - .5) * -22%),-52%) scale(calc(1 + var(--sub,0) * .06));
font-family:var(--serif);font-weight:700;white-space:nowrap;
font-size:clamp(5rem,22vw,19rem);line-height:1;color:transparent;
-webkit-text-stroke:1px rgba(201,190,166,.16);pointer-events:none;user-select:none;
}
.verhaal__woord{
display:block;font-family:var(--serif);font-weight:700;color:var(--creme);
font-size:clamp(2.8rem,2rem + 5vw,6.2rem);line-height:1.05;letter-spacing:-.02em;
margin-bottom:.45em;position:relative;
}
.verhaal__woord::after{
content:"";display:block;width:56px;height:2px;background:var(--goud-licht);
margin:.35em auto 0;
}
.verhaal__zin{
display:block;font-family:var(--serif);font-style:italic;color:var(--zand);
font-size:clamp(1.05rem,1rem + .7vw,1.5rem);max-width:36ch;margin-inline:auto;
}
.verhaal__stap--slot img{height:clamp(56px,8vw,84px);width:auto;margin:0 auto 1.4rem;}
.verhaal__stap--slot .knop{margin-top:1.8rem;}
.verhaal__stap--slot .verhaal__woord::after{display:none;}
.verhaal__voortgang{
position:absolute;left:var(--marge);right:var(--marge);bottom:clamp(1.4rem,3.5vh,2.6rem);
z-index:2;display:flex;align-items:center;gap:1.1rem;
color:var(--zand);font-size:.72rem;font-weight:700;letter-spacing:.2em;
}
.verhaal__balkje{flex:1;height:1px;background:rgba(250,249,245,.18);overflow:hidden;}
.verhaal__balkje span{display:block;height:100%;width:100%;background:var(--goud-licht);transform:scaleX(0);transform-origin:left;transition:transform .3s linear;}
@media (prefers-reduced-motion:reduce){
.verhaal{height:auto !important;}
.verhaal__plakker{position:static;height:auto;padding-block:clamp(3rem,7vw,5rem);display:block;}
.verhaal__stap{position:static;opacity:1;visibility:visible;transform:none;padding-block:2.2rem;}
.verhaal__echo,.verhaal__voortgang{display:none;}
}
.verhaal .ltr{display:inline-block;white-space:pre;}
.verhaal__stap .ltr{opacity:0;}
.verhaal__stap.actief .ltr{
animation:ltr-in .45s var(--soepel) both;
animation-delay:calc(var(--i) * .042s + .08s);
}
@keyframes ltr-in{
from{opacity:0;transform:translateY(.6em) rotate(7deg) scale(.85);filter:blur(7px);}
60%{filter:blur(0);}
to{opacity:1;transform:none;filter:blur(0);}
}
.verhaal__zin{opacity:0;transform:translateY(18px);transition:opacity .45s var(--soepel),transform .45s var(--soepel);}
.verhaal__stap.actief .verhaal__zin{opacity:1;transform:none;transition-delay:.3s;}
.verhaal__woord::after{transform:scaleX(0);transform-origin:center;transition:transform .6s var(--soepel) .45s;}
.verhaal__stap.actief .verhaal__woord::after{transform:scaleX(1);}
.verhaal__slotlogo{
height:clamp(84px,13vw,160px);width:auto;margin:0 auto 2rem;
filter:drop-shadow(0 18px 40px rgba(0,0,0,.35));
}
.verhaal__stap--slot .verhaal__woord{font-size:clamp(2.2rem,1.6rem + 3.4vw,4.4rem);}
.verhaal__stippen{display:flex;gap:.55rem;align-items:center;}
.verhaal__stippen i{
width:7px;height:7px;border-radius:50%;background:rgba(250,249,245,.22);
transition:background .4s var(--soepel),transform .4s var(--soepel);
}
.verhaal__stippen i.aan{background:var(--goud-licht);transform:scale(1.35);}
@media (prefers-reduced-motion:reduce){
.verhaal__stap .ltr{opacity:1;animation:none;}
.verhaal__zin{opacity:1;transform:none;}
.verhaal__woord::after{transform:scaleX(1);}
.verhaal__stap.actief > div{transform:none;}
}
.verhaal__hint{
position:absolute;left:50%;bottom:clamp(3.6rem,9vh,5.6rem);transform:translateX(-50%);
z-index:2;display:flex;flex-direction:column;align-items:center;gap:.7rem;
color:var(--zand);font-size:.68rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
opacity:1;transition:opacity .6s var(--soepel);pointer-events:none;text-align:center;
}
.verhaal--einde .verhaal__hint{opacity:0;}
.verhaal__muis{
display:block;width:26px;height:42px;border:1.5px solid rgba(201,190,166,.75);
border-radius:14px;position:relative;
}
.verhaal__muis i{
position:absolute;left:50%;top:7px;width:4px;height:8px;margin-left:-2px;
border-radius:2px;background:var(--goud-licht);
animation:muiswiel 1.9s var(--soepel) infinite;
}
@keyframes muiswiel{
0%{transform:translateY(0);opacity:0;}
25%{opacity:1;}
62%{transform:translateY(16px);opacity:1;}
100%{transform:translateY(20px);opacity:0;}
}
@media (hover:none) and (pointer:coarse){
.verhaal__muis{border:0;width:auto;height:auto;}
.verhaal__muis i{position:static;display:block;width:12px;height:12px;margin:0 auto;background:none;
border-right:2px solid var(--goud-licht);border-bottom:2px solid var(--goud-licht);
transform:rotate(45deg);animation:chevron 1.6s var(--soepel) infinite;}
@keyframes chevron{0%{transform:rotate(45deg) translate(-4px,-4px);opacity:0;}45%{opacity:1;}100%{transform:rotate(45deg) translate(5px,5px);opacity:0;}}
}
@media (prefers-reduced-motion:reduce){.verhaal__hint{display:none;}}
.verhaal__beelden{position:absolute;inset:0;z-index:0;}
.verhaal__beeld{position:absolute;inset:0;opacity:0;transition:opacity 1.1s var(--soepel);}
.verhaal__beeld img{
width:100%;height:100%;object-fit:cover;
transform:scale(1.22) translateX(1.5%);transition:transform 3.2s cubic-bezier(.2,.6,.3,1);
}
.verhaal__beeld.actief{opacity:1;}
.verhaal__beeld.actief img{transform:scale(1);}
.verhaal__beeld::after{
content:"";position:absolute;inset:0;
background:
radial-gradient(72% 62% at 50% 46%,rgba(30,29,25,.58) 0%,rgba(30,29,25,.78) 62%,rgba(30,29,25,.9) 100%);
}
.verhaal__plakker::before{z-index:1;}
.verhaal__stap{z-index:2;}
.verhaal__voortgang,.verhaal__hint{z-index:3;}
.verhaal__echo{-webkit-text-stroke:1px rgba(201,190,166,.22);}
@media (prefers-reduced-motion:reduce){
.verhaal__beelden{display:none;}
}
.verhaal--film{height:auto;}
.verhaal--film .verhaal__plakker{position:relative;height:auto;min-height:min(92svh,56rem);}
.verhaal--film .verhaal__hint{display:none;}
.verhaal--film .verhaal__echo{
transform:translate(-50%,-52%);
animation:echo-adem 12s ease-in-out infinite alternate;
}
@keyframes echo-adem{
from{transform:translate(-54%,-52%) scale(1);}
to{transform:translate(-46%,-52%) scale(1.05);}
}
.verhaal--film .verhaal__stap.actief > div{
transform:none;
animation:zweef 6.5s ease-in-out infinite alternate;
}
@keyframes zweef{from{transform:translateY(4px);}to{transform:translateY(-8px);}}
.verhaal__stippen i{cursor:pointer;}
.verhaal__stippen i:focus-visible{outline:2px solid var(--goud);outline-offset:3px;}
.verhaal--film .verhaal__balkje span{transition:none;}
@media (prefers-reduced-motion:reduce){
.verhaal--film .verhaal__plakker{min-height:0;}
.verhaal--film .verhaal__stap.actief > div,.verhaal--film .verhaal__echo{animation:none;}
}
.faq{border-bottom:1px solid var(--lijn-zacht);}
.faq:first-of-type{border-top:1px solid var(--lijn-zacht);}
.faq summary{
list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1.2rem;
font-family:var(--serif);font-weight:700;color:var(--antraciet);
font-size:clamp(1.08rem,1rem + .5vw,1.4rem);padding:1.25rem 0;
transition:color .35s var(--soepel);
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary:hover{color:var(--goud-tekst);}
.faq summary:focus-visible{outline:2px solid var(--goud);outline-offset:4px;}
.faq__plus{position:relative;flex:none;width:1.1rem;height:1.1rem;}
.faq__plus::before,.faq__plus::after{
content:"";position:absolute;inset:0;margin:auto;background:var(--goud);
transition:transform .4s var(--soepel);
}
.faq__plus::before{width:100%;height:2px;}
.faq__plus::after{width:2px;height:100%;}
.faq[open] .faq__plus::after{transform:rotate(90deg) scaleY(0);}
.faq p{color:var(--inkt-zacht);padding:0 2.4rem 1.4rem 0;margin:0;}
a:focus-visible,.nav a:focus-visible{outline:2px solid var(--goud);outline-offset:3px;border-radius:2px;}
.verhouding-4-3{aspect-ratio:4/3;}
.waarden{display:grid;grid-template-columns:repeat(5,1fr);gap:2.8rem 1.5rem;}
.waarde{display:flex;flex-direction:column;align-items:center;text-align:center;}
.waarde__icoon{
width:3.6rem;height:3.6rem;border-radius:50%;flex:none;
display:flex;align-items:center;justify-content:center;
color:var(--goud);background:var(--creme);
border:1px solid rgba(132,114,64,.45);
position:relative;z-index:2;margin-bottom:-1.8rem;
transition:background .3s var(--soepel),color .3s var(--soepel),border-color .3s var(--soepel);
}
.waarde__icoon svg{width:1.5rem;height:1.5rem;}
.waarde:hover .waarde__icoon{background:var(--goud);color:var(--creme);border-color:var(--goud);}
.waarde .foto{width:100%;border-radius:10px;}
.waarde h3{font-size:clamp(1.02rem,1.3vw,1.14rem);line-height:1.25;margin-top:1.05rem;}
.waarde p{font-size:.88rem;color:var(--inkt-zacht);margin:.55rem 0 0;text-align:left;line-height:1.7;}
.feiten{
display:grid;grid-template-columns:repeat(4,1fr);
background:var(--creme-diep);border-radius:12px;
padding:clamp(1.6rem,3.2vw,2.4rem) clamp(.6rem,2vw,1.4rem);
}
.feit{
display:flex;flex-direction:column;align-items:center;text-align:center;
gap:.6rem;padding:0 clamp(.8rem,2vw,1.6rem);
}
.feit:not(:first-child){border-left:1px solid rgba(60,60,60,.12);}
.feit__icoon{
width:2.7rem;height:2.7rem;border-radius:50%;flex:none;
border:1px solid rgba(132,114,64,.45);
display:flex;align-items:center;justify-content:center;color:var(--goud);
}
.feit__icoon svg{width:1.2rem;height:1.2rem;}
.feit__waarde{font-family:var(--serif);font-weight:700;line-height:1.2;font-size:clamp(1.15rem,1.8vw,1.5rem);color:var(--antraciet);}
.feit__tekst{font-size:.82rem;color:var(--inkt-zacht);line-height:1.55;max-width:16rem;}
@media (max-width:63.99em){
.waarden{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:47.99em){
.waarden{grid-template-columns:repeat(2,1fr);gap:2.2rem 1.1rem;}
.waarde p{font-size:.85rem;}
.feiten{grid-template-columns:repeat(2,1fr);row-gap:1.9rem;}
.feit:not(:first-child){border-left:0;}
.feit:nth-child(even){border-left:1px solid rgba(60,60,60,.12);}
}
.hartje{display:flex;justify-content:center;color:var(--goud);margin:0 0 .9rem;}
.hartje svg{width:1.7rem;height:1.7rem;}
.sectie--donker .hartje,.sectie--goud .hartje{color:var(--zand);}
.accent{color:var(--goud);position:relative;white-space:nowrap;}
.sectie--donker .accent,.sectie--goud .accent,.hero .accent{color:var(--zand);}
.zwier{
display:block;width:100%;height:.5em;color:var(--goud);opacity:.75;
position:absolute;left:0;bottom:-.48em;pointer-events:none;
}
.sectie--donker .zwier,.hero .zwier{color:var(--zand);opacity:.7;}
h2 .accent{display:inline-block;}
.sectiekop{max-width:64ch;margin-inline:auto;text-align:center;}
.sectiekop .lead{margin-left:auto;margin-right:auto;}
.kop-streep{
width:3.4rem;height:2px;border:0;background:var(--goud);
opacity:.75;margin:1.6rem auto 0;
}
.sectie--donker .kop-streep,.sectie--goud .kop-streep{background:var(--zand);opacity:.65;}
.citaat{
border-left:2px solid var(--goud);
padding-left:clamp(1rem,2vw,1.5rem);
margin:0 0 1.5rem;
}
.citaat:last-child{margin-bottom:0;}
.sectie--donker .citaat{border-left-color:var(--zand);}
.beeld-kader{
position:relative;border-radius:14px;overflow:hidden;
border:2px solid var(--goud);
box-shadow:var(--schaduw);
transition:transform .5s var(--soepel),box-shadow .5s var(--soepel);
}
.beeld-kader .foto{border-radius:12px;}
.beeld-kader--tilt-r{transform:rotate(1.6deg);}
.beeld-kader--tilt-l{transform:rotate(-1.6deg);}
.beeld-kader--tilt-r:hover,.beeld-kader--tilt-l:hover{transform:rotate(0) translateY(-3px);box-shadow:var(--schaduw-op);}
.beeld-duo{display:grid;gap:clamp(1.1rem,2.4vw,1.8rem);}
.beloften{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,2.6vw,2.2rem);}
.belofte{
display:flex;flex-direction:column;
border-radius:16px;overflow:hidden;
background:var(--creme);
box-shadow:var(--schaduw);
transition:transform .45s var(--soepel),box-shadow .45s var(--soepel);
}
.belofte:hover{transform:translateY(-5px);box-shadow:var(--schaduw-op);}
.belofte__beeld{position:relative;}
.belofte__beeld .foto{border-radius:0;}
.belofte__medaille{
position:absolute;left:50%;bottom:-1.85rem;transform:translateX(-50%);
width:3.7rem;height:3.7rem;border-radius:50%;z-index:2;
display:flex;align-items:center;justify-content:center;
background:var(--creme);color:var(--goud);
box-shadow:0 6px 18px -6px rgba(60,60,60,.3);
}
.belofte__medaille svg{width:1.6rem;height:1.6rem;}
.belofte__tekst{
padding:2.9rem clamp(1.3rem,2.4vw,2rem) clamp(1.7rem,3vw,2.3rem);
text-align:center;display:flex;flex-direction:column;flex:1;
}
.belofte__nr{
display:flex;align-items:center;justify-content:center;gap:.7rem;
font-family:var(--sans);font-weight:700;font-size:.78rem;
letter-spacing:.2em;color:var(--goud-tekst);margin-bottom:.7rem;
}
.belofte__nr::before,.belofte__nr::after{
content:"";width:1.5rem;height:1px;background:var(--goud);opacity:.5;
}
.belofte h3{margin:0 0 .6em;font-size:clamp(1.18rem,1.7vw,1.45rem);}
.belofte p{margin:0;color:var(--inkt-zacht);font-size:.94rem;}
.sectie--donker .belofte{background:rgba(250,249,245,.055);}
.sectie--donker .belofte h3{color:var(--creme);}
.sectie--donker .belofte p{color:rgba(250,249,245,.72);}
.sectie--donker .belofte__medaille{background:var(--antraciet);color:var(--zand);}
.sectie--donker .belofte__nr{color:var(--zand);}
.sectie--donker .belofte__nr::before,.sectie--donker .belofte__nr::after{background:var(--zand);}
@media (max-width:63.99em){
.beloften{grid-template-columns:1fr;max-width:34rem;margin-inline:auto;}
}
@media (prefers-reduced-motion:reduce){
.beeld-kader--tilt-r,.beeld-kader--tilt-l{transform:none;}
}
.hartje--links{justify-content:flex-start;}
.ovaal{position:relative;white-space:nowrap;}
.ovaal svg{
position:absolute;left:-.32em;top:-.22em;width:calc(100% + .64em);height:calc(100% + .44em);
color:var(--goud);opacity:.8;pointer-events:none;
}
.tijdlijn{position:relative;padding-left:.25rem;}
.tijdlijn::before{
content:"";position:absolute;left:5px;top:.6rem;bottom:.6rem;
width:1px;background:linear-gradient(180deg,transparent,var(--lijn) 8%,var(--lijn) 92%,transparent);
}
.tl{position:relative;display:grid;grid-template-columns:auto 1fr;gap:0 1.1rem;padding-left:2rem;}
.tl + .tl{margin-top:clamp(1.4rem,2.6vw,2rem);}
.tl::before{
content:"";position:absolute;left:0;top:.75rem;width:11px;height:11px;border-radius:50%;
background:var(--creme);border:2px solid var(--goud);
}
.tl__icoon{
width:2.5rem;height:2.5rem;flex:none;display:flex;align-items:center;justify-content:center;
color:var(--goud);grid-row:span 3;align-self:start;
}
.tl__icoon svg{width:1.75rem;height:1.75rem;}
.tl__tijd{
font-family:var(--sans);font-weight:700;font-size:.72rem;letter-spacing:.18em;
text-transform:uppercase;color:var(--goud-tekst);line-height:1.6;
}
.tl h3{margin:.1rem 0 .25rem;font-size:clamp(1.02rem,1.4vw,1.18rem);}
.tl p{margin:0;font-size:.92rem;color:var(--inkt-zacht);line-height:1.65;}
.collage{position:relative;}
.blob{
overflow:hidden;
border-radius:58% 42% 48% 52% / 46% 52% 48% 54%;
box-shadow:var(--schaduw);
}
.blob .foto{border-radius:0;}
.blob--twee{
border-radius:46% 54% 58% 42% / 52% 44% 56% 48%;
width:72%;margin-left:auto;margin-top:-9%;position:relative;z-index:1;
}
.polaroid{
position:absolute;left:-2%;bottom:8%;width:46%;z-index:3;
background:#fff;padding:.6rem .6rem 1.5rem;border-radius:3px;
box-shadow:0 10px 30px -10px rgba(60,60,60,.35);
transform:rotate(-2.6deg);
transition:transform .5s var(--soepel);
}
.polaroid:hover{transform:rotate(0) translateY(-4px);}
.polaroid .foto{border-radius:2px;}
.polaroid__tape{
position:absolute;top:-.7rem;left:50%;transform:translateX(-50%) rotate(-3deg);
width:38%;height:1.5rem;border-radius:2px;
background:linear-gradient(180deg,rgba(201,190,166,.75),rgba(201,190,166,.5));
}
.doodle{position:absolute;color:var(--goud);opacity:.85;pointer-events:none;z-index:2;}
.doodle--vliegtuig{top:2%;right:-1%;width:clamp(3.4rem,7vw,5.4rem);}
.doodle--hart{top:41%;left:-4%;width:clamp(2.2rem,4vw,3.2rem);}
.doodle--regenboog{bottom:2%;left:6%;width:clamp(3.6rem,7vw,5.6rem);}
.doodle--blad{bottom:24%;right:-2%;width:clamp(2.6rem,5vw,4rem);}
@media (max-width:47.99em){.doodle--vliegtuig,.doodle--blad{display:none;}}
.kenmerken{
display:grid;grid-template-columns:repeat(4,1fr);
background:var(--creme);border:1px solid var(--lijn-zacht);border-radius:12px;
padding:clamp(1.2rem,2.4vw,1.8rem) .5rem;
}
.kenmerk{
display:flex;flex-direction:column;align-items:center;text-align:center;gap:.55rem;
padding:0 clamp(.6rem,1.6vw,1.2rem);font-size:.88rem;line-height:1.5;color:var(--inkt-zacht);
}
.kenmerk:not(:first-child){border-left:1px solid var(--lijn-zacht);}
.kenmerk svg{width:1.6rem;height:1.6rem;color:var(--goud);}
.kenmerk b{display:block;color:var(--antraciet);font-weight:700;}
.sectie--creme .kenmerken{background:var(--creme);}
@media (max-width:47.99em){
.kenmerken{grid-template-columns:repeat(2,1fr);row-gap:1.4rem;}
.kenmerk:not(:first-child){border-left:0;}
.kenmerk:nth-child(even){border-left:1px solid var(--lijn-zacht);}
.polaroid{position:relative;left:0;bottom:auto;width:70%;margin:-8% auto 0;transform:rotate(-2deg);}
.blob--twee{width:100%;margin-top:1.2rem;}
}
.label--pijl{display:flex;align-items:center;gap:.7rem;}
.label--pijl::after{
content:"";flex:none;width:1.9rem;height:1px;background:var(--goud);opacity:.55;
position:relative;
}
.knop{display:inline-flex;align-items:center;gap:.6rem;}
.knop__pijl{width:1.05rem;height:1.05rem;flex:none;transition:transform .35s var(--soepel);}
.knop:hover .knop__pijl{transform:translateX(3px);}
.accent--cursief{font-style:italic;font-weight:500;}
.hero--split{
position:relative;background:var(--creme);color:var(--inkt);
min-height:0;display:block;padding:0;overflow:visible;
}
.hero--split .hero__raster{
display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);
align-items:center;gap:clamp(1.5rem,4vw,3.5rem);
width:min(100% - 2*var(--marge),var(--max));margin-inline:auto;
padding-block:clamp(3rem,7vw,6rem);
}
.hero--split h1{color:var(--antraciet);}
.hero--split .hero__intro{color:var(--inkt-zacht);max-width:34ch;}
.hero--split .hero__label{color:var(--goud-tekst);}
.hero__beeldkolom{position:relative;}
.hero__beeldkolom .foto{
border-radius:14px 0 0 14px;box-shadow:var(--schaduw);
}
.hero__beeldkolom .foto img{filter:none;}
@media (min-width:64em){
.hero__beeldkolom{margin-right:calc(-1 * var(--marge));}
}
.hero__golf{
display:block;width:100%;height:clamp(2rem,4vw,3.6rem);color:var(--goud);
opacity:.6;margin-top:-1.4rem;
}
.troefstrip{
display:grid;grid-template-columns:repeat(6,1fr);
}
.troefstrip__item{
display:flex;flex-direction:column;align-items:center;text-align:center;
gap:.75rem;padding:0 clamp(.5rem,1.4vw,1.2rem);
}
.troefstrip__item:not(:first-child){border-left:1px solid var(--lijn-zacht);}
.troefstrip__item svg{width:1.9rem;height:1.9rem;color:var(--goud);}
.troefstrip__item h3{
font-size:clamp(.98rem,1.25vw,1.12rem);line-height:1.25;margin:0;
}
.troefstrip__item p{margin:0;font-size:.85rem;color:var(--inkt-zacht);line-height:1.6;}
@media (max-width:63.99em){
.troefstrip{grid-template-columns:repeat(3,1fr);row-gap:2.4rem;}
.troefstrip__item:nth-child(3n+1){border-left:0;}
}
@media (max-width:37.49em){
.troefstrip{grid-template-columns:repeat(2,1fr);}
.troefstrip__item:nth-child(odd){border-left:0;}
.troefstrip__item:nth-child(3n+1){border-left:1px solid var(--lijn-zacht);}
.troefstrip__item:nth-child(1),.troefstrip__item:nth-child(3),.troefstrip__item:nth-child(5){border-left:0;}
}
.polaroid-duo{position:relative;padding:clamp(1rem,3vw,2.5rem) 0;}
.pola{
background:#fff;padding:.7rem .7rem 1.7rem;border-radius:3px;
box-shadow:0 14px 36px -14px rgba(60,60,60,.4);
transition:transform .5s var(--soepel);
}
.pola .foto{border-radius:2px;}
.pola--een{width:66%;transform:rotate(-2.4deg);}
.pola--twee{width:62%;margin-left:auto;margin-top:-22%;transform:rotate(2.6deg);position:relative;z-index:2;}
.pola:hover{transform:rotate(0) translateY(-4px);z-index:4;}
.pola__tape{
position:absolute;top:-.75rem;left:50%;transform:translateX(-50%) rotate(-2.5deg);
width:34%;height:1.6rem;border-radius:2px;
background:linear-gradient(180deg,rgba(201,190,166,.8),rgba(201,190,166,.55));
}
.kenmerken--zes{grid-template-columns:repeat(6,1fr);}
.kenmerken--zes .kenmerk{
font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;font-weight:700;
color:var(--inkt-zacht);line-height:1.65;
}
.kenmerken--zes .kenmerk b{font-weight:700;color:var(--inkt-zacht);display:inline;}
@media (max-width:63.99em){
.kenmerken--zes{grid-template-columns:repeat(3,1fr);row-gap:1.5rem;}
.kenmerken--zes .kenmerk:nth-child(3n+1){border-left:0;}
.kenmerken--zes .kenmerk:not(:first-child){border-left:1px solid var(--lijn-zacht);}
.kenmerken--zes .kenmerk:nth-child(3n+1){border-left:0;}
}
@media (max-width:37.49em){
.kenmerken--zes{grid-template-columns:repeat(2,1fr);}
.kenmerken--zes .kenmerk:nth-child(odd){border-left:0;}
}
.kop__merk{position:relative;}
.kop__merkhart{
position:absolute;right:-.55rem;top:-.5rem;width:.95rem;height:.95rem;color:var(--goud);
opacity:.9;pointer-events:none;
}
.hero--split{background:var(--creme);min-height:0;align-items:stretch;overflow:visible;}
.hero--split::before{display:none;}
.hero--split h1{color:var(--antraciet);max-width:none;}
.hero--split h1 em,.hero--split .accent{color:var(--goud);}
.hero--split .accent{white-space:normal;}
.hero--split .hero__intro{color:var(--inkt-zacht);}
.hero--split .hero__label{color:var(--goud-tekst);}
.hero--split .knop--lijn{color:var(--antraciet);border-color:rgba(60,60,60,.28);}
.hero--split .knop--lijn:hover{background:var(--antraciet);color:var(--creme);border-color:var(--antraciet);}
.knop:has(.knop__pijl)::after{display:none;}
.knop .knop__pijl + *{margin-left:0;}
.knop::after{
width:1.05em;height:1.05em;background:currentColor;opacity:1;
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
transition:transform .4s var(--soepel);
}
.knop:hover::after{width:1.05em;transform:translateX(3px);}
.knop:has(.knop__pijl)::after{display:none;}
.label--hart{position:relative;}
.label--hart::before{content:"";}
.label--hart .label__hart{
width:1.05rem;height:1.05rem;flex:none;color:var(--goud);opacity:.9;margin-left:.15rem;
}
.sectie--donker .label--hart .label__hart,.hero .label--hart .label__hart{color:var(--zand);}
.label--pijl::after{
width:.95rem;height:.95rem;background:var(--goud);opacity:.85;
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.5 4.8 13.6a4.6 4.6 0 0 1 0-6.6 4.8 4.8 0 0 1 6.7 0l.5.5.5-.5a4.8 4.8 0 0 1 6.7 0 4.6 4.6 0 0 1 0 6.6L12 20.5Z'/%3E%3C/svg%3E") center/contain no-repeat;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.5 4.8 13.6a4.6 4.6 0 0 1 0-6.6 4.8 4.8 0 0 1 6.7 0l.5.5.5-.5a4.8 4.8 0 0 1 6.7 0 4.6 4.6 0 0 1 0 6.6L12 20.5Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.sectie--donker .label--pijl::after,.sectie--goud .label--pijl::after{background:var(--zand);}
.hero .label--pijl::after{
width:1.9rem;height:1px;background:var(--goud);-webkit-mask:none;mask:none;opacity:.55;
}
.hero--split .hero__raster{
padding-block:clamp(6.5rem,13vw,8rem) clamp(2.5rem,6vw,5rem);
}
@media (max-width:63.99em){
.hero--split .hero__raster{grid-template-columns:1fr;gap:2rem;}
.hero--split .hero__intro{max-width:none;}
.hero__beeldkolom .foto{border-radius:14px;}
.hero--split h1{max-width:18ch;}
}
.foto img,.foto video,
.hero__beeld img,.hero__beeld video,
.cta__beeld img,.cta__beeld video,
.verhaal__beeld img{
filter:grayscale(.58) sepia(.12) saturate(1.05) brightness(1.04) contrast(.97);
}
.foto{
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%),
linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%);
-webkit-mask-composite:source-in;
mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%),
linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%);
mask-composite:intersect;
}
.hero__beeld .foto,.cta__beeld .foto,
.pola .foto,.polaroid .foto,
.locatie__beeld .foto,.belofte__beeld .foto{
-webkit-mask-image:none;mask-image:none;
}
.belofte__beeld .foto{
-webkit-mask-image:linear-gradient(180deg,#000 78%,transparent 100%);
mask-image:linear-gradient(180deg,#000 78%,transparent 100%);
}
.beeld-kader{border:0;box-shadow:none;overflow:visible;}
.blob{box-shadow:none;}
.sectie--warm .kaart{background:var(--creme);}
.hero--split .hero__beeldkolom .foto img{
filter:grayscale(.58) sepia(.12) saturate(1.05) brightness(1.04) contrast(.97);
}
.hero--split .hero__beeldkolom .foto{border-radius:0;box-shadow:none;}
.hero__beeldkolom .foto{box-shadow:none;}
.hero__beeldkolom{
position:relative;overflow:hidden;
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%),
linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%);
-webkit-mask-composite:source-in;
mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%),
linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%);
mask-composite:intersect;
}
.hero__beeldkolom .foto{-webkit-mask-image:none;mask-image:none;}
.hero__beeldkolom video{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
opacity:0;transition:opacity .9s var(--soepel);
}
.hero__beeldkolom video.is-af{opacity:1;}
.hero__beeldkolom img,.hero__beeldkolom video{
will-change:transform;transform-origin:50% 42%;
}
@media (prefers-reduced-motion:reduce){
.hero__beeldkolom img,.hero__beeldkolom video{transform:none!important;}
}
.hero:not(.hero--split)::before{
background:
linear-gradient(100deg,rgba(26,24,21,.72) 0%,rgba(26,24,21,.46) 40%,rgba(26,24,21,.16) 66%,rgba(26,24,21,.08) 100%),
linear-gradient(to top,rgba(22,21,18,.9) 0%,rgba(28,27,23,.5) 42%,rgba(32,30,26,.3) 72%,rgba(32,30,26,.44) 100%);
}
.hero:not(.hero--split) h1,
.hero:not(.hero--split) .hero__intro,
.hero:not(.hero--split) .hero__label,
.hero:not(.hero--split) .kruimels{
text-shadow:0 1px 2px rgba(18,17,14,.55),0 2px 18px rgba(18,17,14,.45);
}
.cta h2,.cta p{text-shadow:0 1px 2px rgba(18,17,14,.5),0 2px 16px rgba(18,17,14,.4);}
.verhaal--film .verhaal__woord,
.verhaal--film .verhaal__zin,
.verhaal--film .verhaal__teller{
text-shadow:0 1px 2px rgba(18,17,14,.55),0 2px 20px rgba(18,17,14,.45);
}
.locatie h3,.locatie p,.locatie__plaats{text-shadow:0 1px 2px rgba(18,17,14,.5),0 2px 14px rgba(18,17,14,.4);}
.slagzin{
font-family:var(--serif);font-style:italic;font-weight:500;
color:var(--goud-tekst);font-size:clamp(1.08rem,1.05rem + .5vw,1.4rem);
margin:.2rem 0 .9rem;letter-spacing:.01em;
}
.merk-lockup{display:inline-flex;flex-direction:column;width:max-content;max-width:100%;gap:.7rem;}
.merk-lockup .site-voet__logo{display:block;}
.merk-lockup__slagzin{display:block;width:100%;height:auto;overflow:visible;}
.merk-lockup__slagzin text{
fill:var(--zand);
font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:500;
font-size:44px;letter-spacing:.5px;
}
.vis-verborgen{
position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;white-space:nowrap;
}
.zwier path,.ovaal svg path{
stroke-dasharray:1 2;stroke-dashoffset:1.05;
transition:stroke-dashoffset 1s var(--soepel) .4s;
}
.teken .zwier path,.teken.ovaal svg path{stroke-dashoffset:0;}
.teken.ovaal svg path{transition-duration:1.25s;}
.markeer.teken{background-size:100% .72em;}
@media (prefers-reduced-motion:reduce){
.zwier path,.ovaal svg path{stroke-dashoffset:0;transition:none;}
.markeer{background-size:100% .72em;transition:none;}
}
.slagzin{
font-weight:430;transform-origin:left center;
transition:font-weight .9s var(--soepel) .25s,letter-spacing .9s var(--soepel) .25s,
transform .9s var(--soepel) .25s;
}
.slagzin.teken{font-weight:800;letter-spacing:.022em;transform:scale(1.035);}
@media (prefers-reduced-motion:reduce){.slagzin{font-weight:700;transform:none;transition:none;}}
.markeer{transition:background-size 1.05s cubic-bezier(.55,-.02,.16,1.24) .35s;}
.markeer:not(.teken){transition-delay:0s;transition-duration:.45s;}
.zwier path,.ovaal svg path{transition:stroke-dashoffset 1s var(--soepel) .4s;}
.accent:not(.teken) .zwier path,.ovaal:not(.teken) svg path{transition-delay:0s;transition-duration:.4s;}
.tl.reveal{transform:translateX(-18px);}
.tl.reveal.zichtbaar{transform:none;}
.feit.reveal,.kenmerk.reveal{transform:translateY(16px);}
.feit.reveal.zichtbaar,.kenmerk.reveal.zichtbaar{transform:none;}
.doodle{will-change:transform;transition:transform .25s linear;}
@media (prefers-reduced-motion:reduce){
.tl.reveal,.feit.reveal,.kenmerk.reveal{transform:none;}
.doodle{transition:none;}
}
.hero--split .hero__raster{
grid-template-columns:minmax(0,.88fr) minmax(0,1.28fr);
}
.hero__beeldkolom{
border-radius:57% 43% 46% 54% / 47% 55% 45% 53%;
overflow:hidden;
-webkit-mask-image:radial-gradient(115% 115% at 50% 50%, #000 62%, rgba(0,0,0,.9) 80%, transparent 99%);
mask-image:radial-gradient(115% 115% at 50% 50%, #000 62%, rgba(0,0,0,.9) 80%, transparent 99%);
animation:blobmorf 16s ease-in-out infinite alternate;
}
.hero__beeldkolom .foto{aspect-ratio:5/4;}
@keyframes blobmorf{
0%{border-radius:57% 43% 46% 54% / 47% 55% 45% 53%;}
50%{border-radius:47% 53% 56% 44% / 54% 45% 55% 46%;}
100%{border-radius:52% 48% 42% 58% / 44% 56% 47% 53%;}
}
@media (max-width:63.99em){
.hero__beeldkolom .foto{aspect-ratio:4/3;}
}
@media (prefers-reduced-motion:reduce){
.hero__beeldkolom{animation:none;}
}
.merk-lockup{margin-bottom:1.4rem;}
.merk-lockup__slagzin{margin-top:.35rem;}
.site-voet__merkblok .site-voet__sociaal{margin-top:.6rem;}
.dwarrel{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;}
.hero--split .dwarrel{z-index:1;}
.hero--split .hero__raster{position:relative;z-index:2;}
.site-voet{position:relative;}
.site-voet > .wrap{position:relative;z-index:2;}
.dwarrel i{
position:absolute;left:var(--x,4%);bottom:-28px;
width:var(--g,11px);height:var(--g,11px);color:var(--goud);opacity:0;
animation:dwarrel var(--t,18s) linear infinite;animation-delay:var(--d,0s);
will-change:transform,opacity;
}
.site-voet .dwarrel i{color:var(--zand);}
.dwarrel i svg{display:block;width:100%;height:100%;}
@keyframes dwarrel{
0%{transform:translate3d(0,0,0) rotate(-10deg) scale(.9);opacity:0;}
8%{opacity:var(--o,.35);}
45%{transform:translate3d(9px,-45vh,0) rotate(9deg) scale(1.05);}
85%{opacity:var(--o,.35);}
100%{transform:translate3d(-7px,-96vh,0) rotate(-12deg) scale(.85);opacity:0;}
}
@media (prefers-reduced-motion:reduce){.dwarrel{display:none;}}
.hero--split .hero__raster{grid-template-columns:minmax(0,1fr) minmax(0,1.22fr);}
.hero--split h1{font-size:clamp(2.5rem,1.5rem+3.1vw,4.4rem);}
.hero__beeldkolom{
border-radius:0;animation:none;overflow:hidden;
position:absolute;top:0;right:0;bottom:0;width:74%;
margin:0;z-index:0;
-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.55) 26%,#000 52%,#000 88%,transparent 100%),
linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%);
-webkit-mask-composite:source-in;
mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.55) 26%,#000 52%,#000 88%,transparent 100%),
linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%);
mask-composite:intersect;
}
.hero__beeldkolom .foto{
position:absolute;inset:0;height:100%;aspect-ratio:auto;
-webkit-mask-image:none;mask-image:none;border-radius:0;
}
.hero__beeldkolom .foto img{width:100%;height:100%;object-fit:cover;}
.hero__beeldkolom::after{
content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
background:
linear-gradient(90deg,var(--creme) 0%,rgba(250,249,245,.85) 14%,rgba(250,249,245,.35) 32%,rgba(250,249,245,.06) 52%,rgba(250,249,245,0) 70%),
linear-gradient(0deg,rgba(250,249,245,.16),rgba(250,249,245,.16));
}
.hero--split{position:relative;}
.hero--split .hero__raster{
display:block;position:relative;z-index:2;
padding-block:clamp(5.5rem,10vw,7rem) clamp(.8rem,1.6vw,1.4rem);
min-height:min(64svh,42rem);
}
.hero--split .hero__tekst{max-width:min(46ch,60%);}
.hero--split h1{font-size:clamp(2.6rem,1.6rem+3.4vw,4.8rem);}
.hero--split .hero__intro{max-width:38ch;}
@media (max-width:63.99em){
.hero__beeldkolom{width:100%;
-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 84%,transparent 100%);
-webkit-mask-composite:source-in;
mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 84%,transparent 100%);
mask-composite:intersect;
}
.hero__beeldkolom::after{
background:linear-gradient(0deg,rgba(250,249,245,.82),rgba(250,249,245,.66));
}
.hero--split .hero__tekst{max-width:none;}
.hero--split .hero__raster{min-height:0;}
}
.hero--split .hero__tekst{max-width:min(62ch,56%);}
.hero--split h1{font-size:clamp(2.5rem,1.5rem+3vw,4.35rem);}
@media (min-width:64em){.hero--split .hero__label{white-space:nowrap;}}
.hero__beeldkolom{width:71%;}
.hero__beeldkolom::after{
background:
linear-gradient(90deg,var(--creme) 0%,rgba(250,249,245,.92) 16%,rgba(250,249,245,.55) 34%,rgba(250,249,245,.14) 54%,rgba(250,249,245,0) 72%),
linear-gradient(0deg,rgba(250,249,245,.16),rgba(250,249,245,.16));
}
.hero--split .hero__tekst{position:relative;z-index:4;}
@media (max-width:63.99em){
.hero--split .hero__tekst{max-width:none;}
.hero--split h1{font-size:clamp(2.3rem,1.9rem+4.5vw,3.2rem);}
}
@media (max-width:63.99em){
.hero__beeldkolom::after{
background:linear-gradient(0deg,rgba(250,249,245,.86),rgba(250,249,245,.72));
}
}
.dwarrel--vast{position:fixed;inset:0;z-index:4;}
.dwarrel--vast i{color:var(--goud);}
.site-voet .dwarrel--vast i{color:var(--goud);}
.hero__beeldkolom{
width:80%;
-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.55) 20%,#000 44%,#000 74%,rgba(0,0,0,.5) 89%,transparent 99%),
linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%);
-webkit-mask-composite:source-in;
mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.55) 20%,#000 44%,#000 74%,rgba(0,0,0,.5) 89%,transparent 99%),
linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%);
mask-composite:intersect;
}
.waarde h3{transition:color .35s var(--soepel);}
.waarde:hover h3{color:var(--goud-tekst);}
.waarde .foto img{transition:transform .8s var(--soepel);}
.waarde:hover .foto img{transform:scale(1.05);}
.belofte:hover h3{color:var(--goud-tekst);}
.belofte h3{transition:color .35s var(--soepel);}
.verhaal__beeld{transition:opacity .65s var(--soepel);}
.verhaal__beeld img{
transform:scale(1.22) translateX(2.5%);
transition:transform 3.6s cubic-bezier(.25,.55,.35,1);
}
.verhaal__beeld.actief img{transform:scale(1.04) translateX(-1%);}
.verhaal__beeld:nth-child(even) img{transform:scale(1.22) translateX(-2.5%);}
.verhaal__beeld:nth-child(even).actief img{transform:scale(1.04) translateX(1%);}
@media (prefers-reduced-motion:reduce){
.verhaal__beeld img{transform:none;transition:none;}
}
.waarde h3,.belofte h3,.troefstrip__item h3{transition:color .35s var(--soepel);}
.waarde:hover h3,.belofte:hover h3,.troefstrip__item:hover h3{color:var(--goud-tekst);}
.verhaal{background:var(--creme);}
.verhaal--film .verhaal__beelden{
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 84%,transparent 100%),
linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%);
-webkit-mask-composite:source-in;
mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 84%,transparent 100%),
linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%);
mask-composite:intersect;
}
.verhaal__beeld::after{
background:
radial-gradient(64% 54% at 50% 50%,rgba(250,249,245,.9) 0%,rgba(250,249,245,.68) 55%,rgba(250,249,245,.42) 100%);
}
.verhaal__plakker::before{
background:radial-gradient(46% 38% at 50% 58%,rgba(132,114,64,.16),transparent 70%);
}
.verhaal__echo{-webkit-text-stroke:1px rgba(132,114,64,.14);}
.verhaal__woord{color:var(--antraciet);}
.verhaal__woord::after{background:var(--goud);}
.verhaal__zin{color:var(--inkt-zacht);}
.verhaal__voortgang{color:var(--goud);}
.verhaal__balkje{background:rgba(132,114,64,.18);}
.verhaal__balkje span{background:var(--goud);}
.verhaal__stippen i{background:rgba(132,114,64,.22);}
.verhaal__stippen i.aan{background:var(--goud);}
.verhaal__slotlogo{filter:drop-shadow(0 16px 36px rgba(132,114,64,.22));}
.verhaal--film .verhaal__woord,
.verhaal--film .verhaal__zin,
.verhaal--film .verhaal__teller{text-shadow:none;}
.intro{
position:fixed;inset:0;z-index:300;background:var(--creme);
display:grid;place-items:center;pointer-events:none;
animation:intro-weg .85s var(--soepel) 2.45s forwards;
}
.intro__binnen{position:relative;text-align:center;padding:0 8vw;}
.intro__gloed{
position:absolute;inset:-40% -30%;pointer-events:none;
background:radial-gradient(50% 46% at 50% 44%,rgba(132,114,64,.16),transparent 70%);
opacity:0;animation:intro-gloed 1.6s ease .25s forwards;
}
.intro__logo{
width:min(66vw,480px);height:auto;opacity:0;position:relative;
animation:intro-logo 1.15s var(--soepel) .15s forwards;
filter:drop-shadow(0 20px 48px rgba(132,114,64,.2));
}
.intro__slagzin{
font-family:var(--serif);font-style:italic;font-weight:500;color:var(--goud-tekst);
font-size:clamp(1.02rem,2.4vw,1.35rem);margin:1rem 0 0;opacity:0;
animation:intro-tekst .8s var(--soepel) 1.05s forwards;
}
.intro__hart{
position:absolute;color:var(--goud);opacity:0;width:16px;height:16px;
animation:intro-hart 1.5s ease var(--d,1s) forwards;
}
.intro__hart svg{display:block;width:100%;height:100%;}
.intro__hart--een{left:12%;top:18%;width:14px;}
.intro__hart--twee{right:10%;top:30%;width:19px;animation-duration:1.7s;}
.intro__hart--drie{left:22%;bottom:6%;width:12px;animation-duration:1.4s;}
@keyframes intro-logo{
0%{opacity:0;transform:translateY(16px) scale(.93);}
60%{opacity:1;}
100%{opacity:1;transform:none;}
}
@keyframes intro-tekst{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
@keyframes intro-gloed{to{opacity:1;}}
@keyframes intro-hart{
0%{opacity:0;transform:translateY(10px) scale(.55) rotate(-8deg);}
40%{opacity:.9;}
100%{opacity:0;transform:translateY(-30px) scale(1.05) rotate(9deg);}
}
@keyframes intro-weg{to{opacity:0;transform:translateY(-2.5%);visibility:hidden;}}
@media (prefers-reduced-motion:reduce){.intro{display:none;}}
.verhaal__zin--slagzin{color:var(--goud-tekst);font-weight:500;margin-top:.35em;}
.verhaal__stap.actief .verhaal__zin--slagzin{transition-delay:.45s;}
.verhaal__zin--slagzin{
font-size:clamp(1.3rem,1.1rem + 1.2vw,2rem);font-weight:600;
margin-top:.5em;letter-spacing:.01em;max-width:none;
}
.slagzin{font-size:clamp(1.22rem,1.1rem + .8vw,1.62rem);}
.foto--eigen img{filter:none;}
.verhaal--paneel{padding-block:var(--sectie);}
.verhaal--paneel .verhaal__kader{
display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
gap:clamp(1.6rem,4vw,3.5rem);align-items:center;
}
.verhaal--paneel .verhaal__lijst{display:flex;flex-direction:column;}
.verhaal--paneel .verhaal__stap{
position:static;inset:auto;opacity:1;visibility:visible;transform:none;
display:grid;grid-template-columns:auto 1fr;gap:0 1rem;align-items:start;
text-align:left;padding:.75rem .9rem;margin:0;border:0;background:none;
border-radius:10px;cursor:pointer;font:inherit;color:inherit;
border-left:2px solid transparent;
transition:background .35s var(--soepel),border-color .35s var(--soepel);
}
.verhaal--paneel .verhaal__stap:hover{background:rgba(132,114,64,.06);}
.verhaal--paneel .verhaal__stap.actief{background:rgba(132,114,64,.08);border-left-color:var(--goud);border-radius:0 10px 10px 0;}
.verhaal--paneel .verhaal__stap:focus-visible{outline:2px solid var(--goud);outline-offset:3px;}
.verhaal--paneel .verhaal__nr{
font-family:var(--sans);font-weight:700;font-size:.7rem;letter-spacing:.18em;
color:var(--inkt-zacht);padding-top:.55em;transition:color .35s var(--soepel);
}
.verhaal--paneel .verhaal__stap.actief .verhaal__nr{color:var(--goud-tekst);}
.verhaal--paneel .verhaal__woord{
display:block;font-family:var(--serif);font-weight:700;color:var(--antraciet);
font-size:clamp(1.35rem,1.1rem + 1.2vw,1.9rem);line-height:1.15;letter-spacing:-.01em;
margin:0;transition:color .35s var(--soepel);
white-space:nowrap;overflow-wrap:normal;
}
@media (max-width:47.99em){
.verhaal--paneel .verhaal__woord{font-size:clamp(1.02rem,4.4vw,1.5rem);}
}
.verhaal--paneel .verhaal__stap.actief .verhaal__woord{color:var(--goud-tekst);}
.verhaal--paneel .verhaal__woord::after{display:none;}
.verhaal--paneel .verhaal__zin{
display:grid;grid-template-rows:0fr;
font-family:var(--serif);font-style:italic;color:var(--inkt-zacht);
font-size:clamp(.95rem,.9rem + .3vw,1.1rem);max-width:44ch;margin:0;
opacity:0;transform:none;
transition:opacity .5s var(--soepel),grid-template-rows .5s var(--soepel);
}
.verhaal--paneel .verhaal__zin > span{overflow:hidden;min-height:0;}
.verhaal--paneel .verhaal__stap.actief .verhaal__zin{opacity:1;grid-template-rows:1fr;margin-top:.25rem;transition-delay:.1s;}
.verhaal--paneel .verhaal__kant{position:relative;}
.verhaal--paneel .verhaal__beelden{
position:relative;aspect-ratio:4/3;overflow:hidden;
}
.verhaal--paneel .verhaal__beeld::after{
background:linear-gradient(0deg,rgba(250,249,245,.24),rgba(250,249,245,.14));
}
.verhaal--paneel .verhaal__voortgang{
position:static;margin-top:1.1rem;display:flex;align-items:center;gap:1rem;
}
.verhaal--paneel .verhaal__slotblok{
text-align:center;margin-top:clamp(2.2rem,5vw,3.6rem);
}
.verhaal--paneel .verhaal__slotwoord{
display:block;font-family:var(--serif);font-weight:700;color:var(--antraciet);
font-size:clamp(1.7rem,1.3rem + 2vw,2.9rem);line-height:1.1;
}
.verhaal--paneel .verhaal__slotslagzin{
display:block;font-family:var(--serif);font-style:italic;font-weight:600;color:var(--goud-tekst);
font-size:clamp(1.15rem,1rem + .9vw,1.7rem);margin:.45em 0 1.1em;
}
@media (max-width:63.99em){
.verhaal--paneel .verhaal__kader{grid-template-columns:1fr;}
.verhaal--paneel .verhaal__kant{order:-1;}
}
@media (prefers-reduced-motion:reduce){
.verhaal--paneel .verhaal__zin{opacity:1;grid-template-rows:1fr;margin-top:.25rem;}
.verhaal--paneel .verhaal__voortgang{display:none;}
}
.verhaal--paneel .verhaal__stap .ltr{opacity:1;animation:none;}
.verhaal--paneel .verhaal__stap.actief .ltr{
animation:ltr-in .4s var(--soepel) both;
animation-delay:calc(var(--i) * .028s);
}
.verhaal--paneel .verhaal__stap{justify-items:start;align-items:start;}
.dagbeeld{
position:sticky;top:clamp(90px,16vh,150px);
aspect-ratio:4/3;
}
.dagbeeld__foto{
position:absolute;inset:0;opacity:0;transform:scale(1.03);
transition:opacity .7s var(--soepel),transform .9s var(--soepel);
}
.dagbeeld__foto .foto{position:absolute;inset:0;height:100%;}
.dagbeeld__foto .foto img{width:100%;height:100%;object-fit:cover;}
.dagbeeld__foto.actief{opacity:1;transform:none;}
.dagbeeld .doodle{z-index:3;}
.tl.tl-actief h3{color:var(--goud-tekst);}
.tl h3{transition:color .4s var(--soepel);}
.tl.tl-actief::before{background:var(--goud);}
.tl::before{transition:background .4s var(--soepel);}
@media (max-width:63.99em){
.dagbeeld{position:static;}
.dagbeeld__foto{position:absolute;}
}
@media (prefers-reduced-motion:reduce){
.dagbeeld__foto{transition:none;transform:none;}
}
.sectie--welkom{position:relative;overflow:hidden;}
.sectie--welkom .wrap{position:relative;z-index:2;}
.sectie--welkom .split__tekst{position:relative;z-index:3;}
.welkom__beeld{
position:absolute;top:0;right:0;bottom:0;width:54%;z-index:0;
-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.55) 18%,#000 44%,#000 80%,rgba(0,0,0,.5) 93%,transparent 100%),
linear-gradient(180deg,transparent 0,#000 15%,#000 85%,transparent 100%);
-webkit-mask-composite:source-in;
mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.55) 18%,#000 44%,#000 80%,rgba(0,0,0,.5) 93%,transparent 100%),
linear-gradient(180deg,transparent 0,#000 15%,#000 85%,transparent 100%);
mask-composite:intersect;
}
.welkom__beeld .foto{
position:absolute;inset:0;height:100%;aspect-ratio:auto;
-webkit-mask-image:none;mask-image:none;
}
.welkom__beeld .foto img{width:100%;height:100%;object-fit:cover;object-position:62% 40%;}
.welkom__beeld::after{
content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(90deg,rgba(250,249,245,.8) 0%,rgba(250,249,245,.3) 26%,rgba(250,249,245,0) 52%);
}
@media (max-width:63.99em){
.welkom__beeld{
position:relative;width:100%;inset:auto;aspect-ratio:3/2;margin-top:1.6rem;
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%),
linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%);
-webkit-mask-composite:source-in;
mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%),
linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%);
mask-composite:intersect;
}
.welkom__beeld::after{display:none;}
.sectie--welkom .welkom__beeld{order:2;}
}
.locatie[href="laakdal.html"] .locatie__beeld img{object-position:30% 24%;}
.dagbeeld-kolom{align-self:stretch;display:flex;}
.dagbeeld{position:relative;top:auto;aspect-ratio:auto;flex:1;min-height:30rem;}
@media (max-width:63.99em){
.dagbeeld-kolom{align-self:auto;display:block;}
.dagbeeld{aspect-ratio:4/3;min-height:0;}
}
.dagbeeld__foto[data-dag="0"] img{object-position:70% 38%;}
.dagbeeld__foto[data-dag="2"] img{object-position:50% 45%;}
.dagbeeld__foto[data-dag="5"] img{object-position:55% 30%;}
.dagbeeld__foto[data-dag="0"] img{object-position:86% 35%;}
.locatie[href="beringen.html"] .locatie__beeld img{object-position:50% 40%;}
.dagbeeld__foto .foto{aspect-ratio:auto;width:100%;}
.dagbeeld__foto[data-dag="0"] img{object-position:76% 35%;}
.sectie--dag{position:relative;overflow:hidden;}
.sectie--dag .wrap{position:relative;z-index:2;}
.sectie--dag .split__tekst{position:relative;z-index:3;}
.sectie--dag .kenmerken{position:relative;z-index:3;}
.sectie--dag .dagbeeld-kolom{
position:absolute;top:0;right:0;bottom:0;width:60%;z-index:0;
display:block;align-self:auto;
}
.sectie--dag .dagbeeld{
position:absolute;inset:0;min-height:0;aspect-ratio:auto;
-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.55) 16%,#000 42%,#000 82%,rgba(0,0,0,.5) 94%,transparent 100%),
linear-gradient(180deg,transparent 0,#000 13%,#000 87%,transparent 100%);
-webkit-mask-composite:source-in;
mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.55) 16%,#000 42%,#000 82%,rgba(0,0,0,.5) 94%,transparent 100%),
linear-gradient(180deg,transparent 0,#000 13%,#000 87%,transparent 100%);
mask-composite:intersect;
}
.sectie--dag .dagbeeld::after{
content:"";position:absolute;inset:0;pointer-events:none;z-index:5;
background:linear-gradient(90deg,rgba(243,240,232,.9) 0%,rgba(243,240,232,.45) 26%,rgba(243,240,232,.08) 50%,rgba(243,240,232,0) 66%);
}
.sectie--dag .tl{cursor:pointer;}
@media (max-width:63.99em){
.sectie--dag .dagbeeld-kolom{position:relative;inset:auto;width:100%;margin-top:1.6rem;}
.sectie--dag .dagbeeld{position:relative;aspect-ratio:4/3;
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%),
linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%);
-webkit-mask-composite:source-in;
mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%),
linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%);
mask-composite:intersect;
}
.sectie--dag .dagbeeld::after{display:none;}
}
.verhaal--paneel{position:relative;overflow:hidden;}
.verhaal--paneel > .verhaal__beelden{
position:absolute;inset:0;z-index:0;aspect-ratio:auto;
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%),
linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%);
-webkit-mask-composite:source-in;
mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%),
linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%);
mask-composite:intersect;
}
.verhaal--paneel .verhaal__beeld img{object-position:72% 30%;}
.verhaal--paneel .verhaal__beeld::after{
background:linear-gradient(90deg,rgba(250,249,245,.94) 0%,rgba(250,249,245,.8) 30%,rgba(250,249,245,.42) 52%,rgba(250,249,245,.12) 72%,rgba(250,249,245,.06) 100%);
}
.verhaal--paneel .wrap{position:relative;z-index:2;}
.verhaal--paneel .verhaal__lijst,
.verhaal--paneel .sectiekop,
.verhaal--paneel .verhaal__slotblok{position:relative;z-index:3;}
.verhaal--paneel .verhaal__kant{
display:flex;align-items:flex-end;
}
.verhaal--paneel .verhaal__voortgang{width:100%;}
@media (max-width:63.99em){
.verhaal--paneel .verhaal__kant{order:2;}
.verhaal--paneel .verhaal__beeld::after{
background:linear-gradient(0deg,rgba(250,249,245,.84),rgba(250,249,245,.72));
}
}
.verhaal--paneel .verhaal__beeld::after{
background:
linear-gradient(90deg,rgba(250,249,245,.94) 0%,rgba(250,249,245,.82) 30%,rgba(250,249,245,.5) 55%,rgba(250,249,245,.24) 76%,rgba(250,249,245,.14) 100%),
linear-gradient(0deg,rgba(250,249,245,.6) 0%,rgba(250,249,245,0) 36%),
linear-gradient(180deg,rgba(250,249,245,.5) 0%,rgba(250,249,245,0) 26%);
}
.sectie--dag .dagbeeld-kolom{width:100%;}
.sectie--dag .dagbeeld{
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%),
linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%);
-webkit-mask-composite:source-in;
mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%),
linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%);
mask-composite:intersect;
}
.sectie--dag .dagbeeld::after{
background:
linear-gradient(90deg,rgba(243,240,232,.94) 0%,rgba(243,240,232,.82) 32%,rgba(243,240,232,.5) 56%,rgba(243,240,232,.22) 76%,rgba(243,240,232,.12) 100%),
linear-gradient(180deg,rgba(243,240,232,.45) 0%,rgba(243,240,232,0) 22%),
linear-gradient(0deg,rgba(243,240,232,.5) 0%,rgba(243,240,232,0) 26%);
}
.dagbeeld__foto img{object-position:64% 38%;}
.dagbeeld__foto[data-dag="0"] img,
.dagbeeld__foto[data-dag="2"] img,
.dagbeeld__foto[data-dag="5"] img{object-position:64% 38%;}
@media (max-width:63.99em){
.sectie--dag .dagbeeld-kolom{position:absolute;inset:0;width:100%;margin:0;}
.sectie--dag .dagbeeld{
position:absolute;inset:0;aspect-ratio:auto;
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%),
linear-gradient(180deg,transparent 0,#000 7%,#000 93%,transparent 100%);
-webkit-mask-composite:source-in;
mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%),
linear-gradient(180deg,transparent 0,#000 7%,#000 93%,transparent 100%);
mask-composite:intersect;
}
.sectie--dag .dagbeeld::after{
background:linear-gradient(0deg,rgba(243,240,232,.88),rgba(243,240,232,.78));
}
}
.verhaal--paneel .verhaal__voortgang{display:none;}
.sectie--team{position:relative;overflow:hidden;}
.sectie--team .wrap{position:relative;z-index:2;}
.sectie--team .split__tekst{position:relative;z-index:3;}
.team__beeld{
position:absolute;inset:0;z-index:0;
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%),
linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%);
-webkit-mask-composite:source-in;
mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%),
linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%);
mask-composite:intersect;
}
.team__beeld .foto{position:absolute;inset:0;height:100%;aspect-ratio:auto;
-webkit-mask-image:none;mask-image:none;}
.team__beeld .foto img{width:100%;height:100%;object-fit:cover;object-position:64% 35%;}
.team__beeld::after{
content:"";position:absolute;inset:0;pointer-events:none;
background:
linear-gradient(90deg,rgba(250,249,245,.95) 0%,rgba(250,249,245,.84) 32%,rgba(250,249,245,.5) 56%,rgba(250,249,245,.2) 78%,rgba(250,249,245,.1) 100%),
linear-gradient(180deg,rgba(250,249,245,.4) 0%,rgba(250,249,245,0) 20%),
linear-gradient(0deg,rgba(250,249,245,.4) 0%,rgba(250,249,245,0) 22%);
}
@media (max-width:63.99em){
.team__beeld::after{
background:linear-gradient(0deg,rgba(250,249,245,.88),rgba(250,249,245,.78));
}
.sectie--dag .dagbeeld::after{display:block;}
}
.team__beeld .foto{z-index:1;}
.team__beeld::after{
z-index:2;
background:
linear-gradient(90deg,rgba(250,249,245,.97) 0%,rgba(250,249,245,.92) 34%,rgba(250,249,245,.66) 56%,rgba(250,249,245,.3) 78%,rgba(250,249,245,.14) 100%),
linear-gradient(0deg,rgba(250,249,245,.28),rgba(250,249,245,.28));
}
@media (max-width:63.99em){
.team__beeld::after{
background:linear-gradient(0deg,rgba(250,249,245,.9),rgba(250,249,245,.8));
}
}
.belofte{position:relative;}
.belofte__beeld{position:absolute;inset:0;z-index:1;pointer-events:none;}
.belofte__beeld .foto{
position:absolute;inset:0;height:100%;aspect-ratio:auto;
-webkit-mask-image:linear-gradient(180deg,#000 48%,rgba(0,0,0,.45) 70%,transparent 92%);
mask-image:linear-gradient(180deg,#000 48%,rgba(0,0,0,.45) 70%,transparent 92%);
}
.belofte__beeld .foto img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;}
.belofte__beeld::after{
content:"";position:absolute;inset:0;z-index:2;
background:linear-gradient(180deg,
rgba(250,249,245,0) 38%,
rgba(250,249,245,.45) 55%,
rgba(250,249,245,.85) 67%,
rgba(250,249,245,.98) 78%,
var(--creme) 88%);
}
.belofte__tekst{position:relative;z-index:3;margin-top:clamp(13rem,24vw,18.5rem);}
.belofte__tekst .belofte__medaille{
position:absolute;left:50%;top:0;bottom:auto;
transform:translate(-50%,-52%);
}
@media (max-width:63.99em){
.belofte__tekst{margin-top:clamp(15rem,64vw,21rem);}
}
.hero--pagina.hero--licht{background:var(--creme);}
.hero--pagina.hero--licht::before{
background:
linear-gradient(100deg,rgba(250,249,245,.94) 0%,rgba(250,249,245,.78) 36%,rgba(250,249,245,.4) 64%,rgba(250,249,245,.18) 100%),
linear-gradient(to top,rgba(250,249,245,.92) 0%,rgba(250,249,245,.32) 40%,rgba(250,249,245,.1) 72%,rgba(250,249,245,.36) 100%);
}
.hero--pagina.hero--licht h1{color:var(--antraciet);}
.hero--pagina.hero--licht h1 em,
.hero--pagina.hero--licht .accent{color:var(--goud);}
.hero--pagina.hero--licht .zwier{color:var(--goud);opacity:.8;}
.hero--pagina.hero--licht .hero__intro{color:var(--inkt-zacht);}
.hero--pagina.hero--licht .hero__label{color:var(--goud-tekst);}
.hero--pagina.hero--licht .kruimels{color:rgba(60,60,60,.75);}
.hero--pagina.hero--licht .kruimels a:hover{color:var(--antraciet);}
.hero--pagina.hero--licht .kruimels span{color:var(--goud-tekst);}
.hero--pagina.hero--licht .label--hart .label__hart{color:var(--goud);}
.hero--pagina.hero--licht h1,
.hero--pagina.hero--licht .hero__intro,
.hero--pagina.hero--licht .hero__label,
.hero--pagina.hero--licht .kruimels{
text-shadow:0 1px 0 rgba(250,249,245,.6),0 2px 16px rgba(250,249,245,.55);
}
@media (max-width:63.99em){
.hero--pagina.hero--licht::before{
background:linear-gradient(0deg,rgba(250,249,245,.9),rgba(250,249,245,.84));
}
}
.sectie--veiligheid{position:relative;overflow:hidden;}
.veiligheid__beeld{position:absolute;top:0;bottom:0;right:0;width:64%;z-index:1;pointer-events:none;}
.veiligheid__beeld .foto{
position:absolute;inset:0;height:100%;aspect-ratio:auto;
-webkit-mask-image:
linear-gradient(90deg,transparent 0,#000 22%,#000 88%,transparent 100%),
linear-gradient(180deg,transparent 0,#000 10%,#000 90%,transparent 100%);
-webkit-mask-composite:source-in;
mask-image:
linear-gradient(90deg,transparent 0,#000 22%,#000 88%,transparent 100%),
linear-gradient(180deg,transparent 0,#000 10%,#000 90%,transparent 100%);
mask-composite:intersect;
}
.veiligheid__beeld .foto img{width:100%;height:100%;object-fit:cover;object-position:42% 22%;}
.veiligheid__beeld::after{
content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
background:linear-gradient(90deg,rgba(250,249,245,.92) 0%,rgba(250,249,245,.45) 30%,rgba(250,249,245,.08) 58%,rgba(250,249,245,0) 100%);
}
.veiligheid__inhoud{position:relative;z-index:3;}
.veiligheid__troeven{max-width:36rem;}
@media (max-width:63.99em){
.veiligheid__beeld{width:100%;}
.veiligheid__beeld::after{
background:linear-gradient(0deg,rgba(250,249,245,.9),rgba(250,249,245,.82));
}
}
.prikbord{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.2rem,2.6vw,2.2rem);max-width:56rem;}
.prikkaart{
position:relative;display:block;
background:var(--creme);border:1px solid rgba(132,114,64,.22);border-radius:10px;
padding:2.3rem 1.7rem 1.7rem;box-shadow:0 16px 32px -20px rgba(60,60,60,.4);
transform:rotate(-1.4deg);
transition:transform .45s var(--soepel),box-shadow .45s var(--soepel);
text-decoration:none;color:inherit;
}
.prikkaart--b{transform:rotate(1.3deg);}
.prikkaart:hover{transform:rotate(0) translateY(-4px);box-shadow:0 22px 42px -20px rgba(60,60,60,.45);}
.prikkaart__punaise{
position:absolute;top:.85rem;left:50%;transform:translateX(-50%);
width:.85rem;height:.85rem;border-radius:50%;
background:radial-gradient(circle at 35% 30%,var(--goud-licht),var(--goud) 72%);
box-shadow:0 3px 6px -1px rgba(60,60,60,.45);
}
.prikkaart__van{
display:block;font-family:var(--sans);font-weight:700;font-size:.66rem;
letter-spacing:.18em;text-transform:uppercase;color:var(--goud-tekst);margin-bottom:.55rem;
}
.prikkaart h3{margin:0 0 .5em;font-size:1.14rem;}
.prikkaart p{margin:0;color:var(--inkt-zacht);font-size:.92rem;}
.prikkaart__meta{
display:block;margin-top:.85rem;font-size:.7rem;letter-spacing:.12em;
text-transform:uppercase;color:var(--inkt-zacht);
}
.prikkaart--open{border-style:dashed;border-color:rgba(132,114,64,.5);background:transparent;}
.prikkaart--open .knop{margin-top:1.1rem;}
@media (max-width:47.99em){.prikbord{grid-template-columns:1fr;}}
@media (prefers-reduced-motion:reduce){
.prikkaart,.prikkaart--b{transform:none;}
}
.sectie--inclusie{position:relative;overflow:hidden;}
.inclusie__beeld{position:absolute;inset:0;z-index:1;pointer-events:none;}
.inclusie__beeld .foto{
position:absolute;inset:0;height:100%;aspect-ratio:auto;
-webkit-mask-image:
linear-gradient(90deg,transparent 0,#000 14%,#000 90%,transparent 100%),
linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%);
-webkit-mask-composite:source-in;
mask-image:
linear-gradient(90deg,transparent 0,#000 14%,#000 90%,transparent 100%),
linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%);
mask-composite:intersect;
}
.inclusie__beeld .foto img{width:100%;height:100%;object-fit:cover;object-position:62% 38%;}
.inclusie__beeld::after{
content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
background:
linear-gradient(90deg,rgba(243,240,232,.96) 0%,rgba(243,240,232,.84) 30%,rgba(243,240,232,.4) 58%,rgba(243,240,232,.12) 100%),
linear-gradient(0deg,rgba(243,240,232,.3),rgba(243,240,232,.3));
}
.inclusie__inhoud{position:relative;z-index:3;}
.inclusie__tekst{max-width:34rem;}
@media (max-width:63.99em){
.inclusie__beeld::after{
background:linear-gradient(0deg,rgba(243,240,232,.9),rgba(243,240,232,.84));
}
.inclusie__tekst{max-width:none;}
}
@media (min-width:64em){
.prikbord{grid-template-columns:repeat(3,1fr);max-width:none;}
}
.sectie--openingsuren{position:relative;overflow:hidden;}
.openingsuren__beeld{position:absolute;inset:0;z-index:1;pointer-events:none;}
.openingsuren__beeld .foto{
position:absolute;inset:0;height:100%;aspect-ratio:auto;
-webkit-mask-image:
linear-gradient(90deg,transparent 0,#000 15%,#000 90%,transparent 100%),
linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%);
-webkit-mask-composite:source-in;
mask-image:
linear-gradient(90deg,transparent 0,#000 15%,#000 90%,transparent 100%),
linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%);
mask-composite:intersect;
}
.openingsuren__beeld .foto img{width:100%;height:100%;object-fit:cover;object-position:70% 42%;}
.openingsuren__beeld::after{
content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
background:
linear-gradient(90deg,rgba(250,249,245,.96) 0%,rgba(250,249,245,.88) 32%,rgba(250,249,245,.46) 60%,rgba(250,249,245,.12) 100%),
linear-gradient(0deg,rgba(250,249,245,.28),rgba(250,249,245,.28));
}
.openingsuren__inhoud{position:relative;z-index:3;}
.openingsuren__tekst{max-width:36rem;}
@media (max-width:63.99em){
.openingsuren__beeld::after{
background:linear-gradient(0deg,rgba(250,249,245,.91),rgba(250,249,245,.85));
}
.openingsuren__tekst{max-width:none;}
}
.foto--zacht img{
filter:grayscale(.52) sepia(.1) saturate(1) brightness(1.04) contrast(.97) !important;
}
.sectie--meebrengen{position:relative;overflow:hidden;}
.meebrengen__beeld{position:absolute;inset:0;z-index:1;pointer-events:none;}
.meebrengen__beeld .foto{
position:absolute;inset:0;height:100%;aspect-ratio:auto;
-webkit-mask-image:
linear-gradient(90deg,transparent 0,#000 14%,#000 90%,transparent 100%),
linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%);
-webkit-mask-composite:source-in;
mask-image:
linear-gradient(90deg,transparent 0,#000 14%,#000 90%,transparent 100%),
linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%);
mask-composite:intersect;
}
.meebrengen__beeld .foto img{width:100%;height:100%;object-fit:cover;object-position:72% 50%;}
.meebrengen__beeld::after{
content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
background:
linear-gradient(90deg,rgba(250,249,245,.96) 0%,rgba(250,249,245,.88) 34%,rgba(250,249,245,.48) 62%,rgba(250,249,245,.14) 100%),
linear-gradient(0deg,rgba(250,249,245,.26),rgba(250,249,245,.26));
}
.meebrengen__inhoud{position:relative;z-index:3;}
.meebrengen__tekst{max-width:36rem;}
@media (max-width:63.99em){
.meebrengen__beeld::after{
background:linear-gradient(0deg,rgba(250,249,245,.92),rgba(250,249,245,.86));
}
.meebrengen__tekst{max-width:none;}
}
.hero__overgang{
position:absolute;left:0;right:0;bottom:-1px;z-index:6;
height:clamp(3.2rem,6vw,5.6rem);pointer-events:none;line-height:0;
}
.hero__overgang svg{display:block;width:100%;height:100%;}
.hero__overgang-vlak{fill:var(--creme);}
.hero__overgang-lijn{
fill:none;stroke:var(--goud);stroke-width:2.5;
stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:.75;
}
.cta{background:var(--creme);color:var(--inkt);}
.cta::before{
background:
linear-gradient(180deg,rgba(250,249,245,.86) 0%,rgba(250,249,245,.7) 40%,rgba(250,249,245,.72) 70%,rgba(250,249,245,.88) 100%),
linear-gradient(0deg,rgba(250,249,245,.26),rgba(250,249,245,.26));
}
.cta__beeld video{
filter:grayscale(.52) sepia(.1) saturate(1) brightness(1.06) contrast(.96);
}
.cta h2{color:var(--antraciet);}
.cta p{color:var(--inkt-zacht);}
.cta .label{color:var(--goud-tekst);}
.cta .label--midden::before,.cta .label--midden::after{background:var(--goud);opacity:.55;}
.cta h2,.cta p{
text-shadow:0 1px 0 rgba(250,249,245,.65),0 2px 16px rgba(250,249,245,.6);
}
.cta .knop--licht{background:var(--goud-tekst);color:var(--creme);border-color:var(--goud-tekst);}
.cta .knop--licht:hover{background:transparent;color:var(--goud-tekst);border-color:var(--goud-tekst);}
.cta .knop--lijn-licht{background:transparent;color:var(--antraciet);border-color:rgba(60,60,60,.4);}
.cta .knop--lijn-licht:hover{background:var(--antraciet);color:var(--creme);border-color:var(--antraciet);}
.merk-lockup__slagzin text{
font-size:56px;
fill:url("#doremi-glans");
}
.merk-lockup__glans .glans-basis{stop-color:var(--zand);}
.merk-lockup__glans .glans-piek{stop-color:#FFF7E2;}
@media (prefers-reduced-motion:reduce){
.merk-lockup__slagzin text{fill:var(--zand);}
}
.merk-lockup .site-voet__logo{height:clamp(76px,10vw,124px);margin-bottom:.2rem;}
.merk-lockup__slagzin text{letter-spacing:0;}
.cta__beeld img,.cta__beeld video{
filter:grayscale(.6) sepia(.16) saturate(.9) brightness(1.06) contrast(.96);
}
.cta--vlak{
background:linear-gradient(180deg,var(--creme) 0%,var(--creme-diep) 38%,var(--creme-diep) 62%,var(--creme) 100%);
border-top:1px solid rgba(132,114,64,.22);
}
.cta--vlak::before{display:none;}
.cta--vlak h2,.cta--vlak p{text-shadow:none;}
.verhaal--zacht .verhaal__beeld img{
filter:grayscale(.5) sepia(.09) saturate(1) brightness(1.04) contrast(.97);
}
.sectie--project{position:relative;overflow:hidden;}
.project__beeld{position:absolute;inset:0;z-index:1;pointer-events:none;}
.project__beeld .foto{
position:absolute;inset:0;height:100%;aspect-ratio:auto;
-webkit-mask-image:
linear-gradient(90deg,transparent 0,#000 14%,#000 90%,transparent 100%),
linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%);
-webkit-mask-composite:source-in;
mask-image:
linear-gradient(90deg,transparent 0,#000 14%,#000 90%,transparent 100%),
linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%);
mask-composite:intersect;
}
.project__beeld .foto img{width:100%;height:100%;object-fit:cover;object-position:64% 55%;}
.project__beeld::after{
content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
background:
linear-gradient(90deg,rgba(250,249,245,.96) 0%,rgba(250,249,245,.88) 34%,rgba(250,249,245,.5) 62%,rgba(250,249,245,.16) 100%),
linear-gradient(0deg,rgba(250,249,245,.24),rgba(250,249,245,.24));
}
.project__inhoud{position:relative;z-index:3;}
.project__tekst{max-width:36rem;}
@media (max-width:63.99em){
.project__beeld::after{
background:linear-gradient(0deg,rgba(250,249,245,.92),rgba(250,249,245,.86));
}
.project__tekst{max-width:none;}
}
.volg-ons{
display:grid;grid-template-columns:repeat(2,1fr);
gap:clamp(1rem,2.2vw,1.6rem);max-width:52rem;margin-inline:auto;
}
.volg-kaart{
display:flex;align-items:center;gap:1.1rem;text-decoration:none;color:inherit;
background:var(--creme);border:1px solid rgba(132,114,64,.24);border-radius:14px;
padding:clamp(1.1rem,2vw,1.5rem) clamp(1.2rem,2.2vw,1.7rem);
box-shadow:var(--schaduw);
transition:transform .45s var(--soepel),box-shadow .45s var(--soepel),border-color .45s var(--soepel);
}
.volg-kaart:hover{transform:translateY(-4px);box-shadow:var(--schaduw-op);border-color:var(--goud);}
.volg-kaart__icoon{
flex:none;width:2.9rem;height:2.9rem;border-radius:50%;
display:grid;place-items:center;background:var(--creme-diep);color:var(--goud);
transition:background .45s var(--soepel),color .45s var(--soepel);
}
.volg-kaart:hover .volg-kaart__icoon{background:var(--goud);color:var(--creme);}
.volg-kaart__icoon svg{width:1.15rem;height:1.15rem;}
.volg-kaart__tekst{display:flex;flex-direction:column;gap:.15rem;flex:1;}
.volg-kaart__naam{font-family:var(--serif);font-weight:700;font-size:1.05rem;color:var(--antraciet);}
.volg-kaart__meta{font-size:.82rem;color:var(--inkt-zacht);}
.volg-kaart__pijl{flex:none;color:var(--goud);display:grid;place-items:center;transition:transform .45s var(--soepel);}
.volg-kaart__pijl svg{width:1.1rem;height:1.1rem;}
.volg-kaart:hover .volg-kaart__pijl{transform:translateX(4px);}
@media (max-width:47.99em){.volg-ons{grid-template-columns:1fr;}}
@media (prefers-reduced-motion:reduce){
.volg-kaart:hover{transform:none;}
.volg-kaart:hover .volg-kaart__pijl{transform:none;}
}
.sectie--gezin{position:relative;overflow:hidden;}
.gezin__beeld{position:absolute;inset:0;z-index:1;pointer-events:none;}
.gezin__beeld .foto{
position:absolute;inset:0;height:100%;aspect-ratio:auto;
-webkit-mask-image:
linear-gradient(90deg,transparent 0,#000 14%,#000 90%,transparent 100%),
linear-gradient(180deg,transparent 0,#000 8%,#000 92%,transparent 100%);
-webkit-mask-composite:source-in;
mask-image:
linear-gradient(90deg,transparent 0,#000 14%,#000 90%,transparent 100%),
linear-gradient(180deg,transparent 0,#000 8%,#000 92%,transparent 100%);
mask-composite:intersect;
}
.gezin__beeld .foto img{width:100%;height:100%;object-fit:cover;object-position:62% 42%;}
.gezin__beeld::after{
content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
background:
linear-gradient(90deg,rgba(250,249,245,.96) 0%,rgba(250,249,245,.9) 36%,rgba(250,249,245,.52) 64%,rgba(250,249,245,.16) 100%),
linear-gradient(0deg,rgba(250,249,245,.24),rgba(250,249,245,.24));
}
.gezin__inhoud{position:relative;z-index:3;}
.gezin__troeven{max-width:38rem;}
@media (max-width:63.99em){
.gezin__beeld::after{
background:linear-gradient(0deg,rgba(250,249,245,.93),rgba(250,249,245,.87));
}
.gezin__troeven{max-width:none;}
}
.merk-lockup .site-voet__logo{height:clamp(92px,12vw,150px);}
.merk-lockup__slagzin text{
font-size:60px;
filter:drop-shadow(0 0 7px rgba(255,247,226,.34));
}
.merk-lockup__glans .glans-piek{stop-color:#FFFDF5;}
@media (prefers-reduced-motion:reduce){
.merk-lockup__slagzin text{filter:none;}
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
.slagzin{
background-image:linear-gradient(100deg,
var(--goud-tekst) 0%, var(--goud-tekst) 30%,
#D8C68C 44%, #F0E4BE 50%, #D8C68C 56%,
var(--goud-tekst) 70%, var(--goud-tekst) 100%);
background-size:280% 100%;
background-repeat:no-repeat;
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;
animation:slagzin-glans 3.8s linear infinite;
}
.hero:not(.hero--split) .slagzin{text-shadow:none;}
}
@keyframes slagzin-glans{
from{background-position:100% 0;}
to{background-position:0% 0;}
}
@media (prefers-reduced-motion:reduce){
.slagzin{
animation:none;background-image:none;
-webkit-text-fill-color:var(--goud-tekst);color:var(--goud-tekst);
}
}
.volgende{
position:relative;overflow:hidden;
max-width:56rem;margin-inline:auto;
gap:clamp(1.5rem,3vw,2.6rem);
border-color:rgba(132,114,64,.26);
background:
linear-gradient(120deg,rgba(132,114,64,.09) 0%,rgba(132,114,64,.03) 46%,rgba(250,249,245,0) 100%),
var(--creme);
padding-left:clamp(1.8rem,3.6vw,3rem);
}
.volgende__rand{
position:absolute;left:0;top:0;bottom:0;width:4px;
background:linear-gradient(180deg,var(--goud-licht),var(--goud) 55%,var(--goud-licht));
opacity:.85;
}
.volgende__inhoud{display:block;}
.volgende__label{display:flex;align-items:center;gap:.5rem;}
.volgende__label .hartje{margin:0;}
.volgende__label .hartje svg{width:.85rem;height:.85rem;}
.volgende__tekst{max-width:44ch;}
.volgende__knop{
flex:none;display:inline-flex;align-items:center;gap:.7rem;
font-family:var(--sans);font-weight:700;font-size:.74rem;
letter-spacing:.18em;text-transform:uppercase;color:var(--goud-tekst);
border:1px solid rgba(132,114,64,.45);border-radius:999px;
padding:.85rem 1.1rem .85rem 1.5rem;background:transparent;
transition:background .5s var(--soepel),color .5s var(--soepel),border-color .5s var(--soepel);
}
.volgende__knop .volgende__pijl{
width:2rem;height:2rem;border:0;background:transparent;color:inherit;
}
.volgende__knop .volgende__pijl svg{width:1.1rem;height:1.1rem;}
.volgende:hover .volgende__knop{background:var(--goud-tekst);border-color:var(--goud-tekst);color:var(--creme);}
.volgende:hover .volgende__knop .volgende__pijl{background:transparent;color:var(--creme);transform:translateX(4px);}
@media (max-width:47.99em){
.volgende{flex-direction:column;align-items:flex-start;}
.volgende__knop{align-self:stretch;justify-content:center;margin-top:.4rem;padding-left:1.1rem;}
}
.filmvlak{position:relative;overflow:hidden;}
.filmvlak video{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;
opacity:0;transition:opacity .9s var(--soepel);
-webkit-mask-image:
linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%),
linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%);
-webkit-mask-composite:source-in;
mask-image:
linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%),
linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%);
mask-composite:intersect;
}
.filmvlak video.is-af{opacity:1;}
.sectie--solliciteren{position:relative;overflow:hidden;}
.solliciteer__film{position:absolute;inset:0;z-index:1;pointer-events:none;}
.solliciteer__film .foto,
.solliciteer__film video{
position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;
-webkit-mask-image:
linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%),
linear-gradient(180deg,transparent 0,#000 8%,#000 92%,transparent 100%);
-webkit-mask-composite:source-in;
mask-image:
linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%),
linear-gradient(180deg,transparent 0,#000 8%,#000 92%,transparent 100%);
mask-composite:intersect;
}
.solliciteer__film .foto img,
.solliciteer__film video{object-fit:cover;object-position:60% 45%;}
.solliciteer__film video{opacity:0;transition:opacity .9s var(--soepel);z-index:2;}
.solliciteer__film video.is-af{opacity:1;}
.solliciteer__film::after{
content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
background:
linear-gradient(90deg,rgba(250,249,245,.95) 0%,rgba(250,249,245,.9) 40%,rgba(250,249,245,.74) 70%,rgba(250,249,245,.6) 100%),
linear-gradient(0deg,rgba(250,249,245,.5),rgba(250,249,245,.5));
}
.solliciteer__inhoud{position:relative;z-index:4;}
@media (max-width:63.99em){
.solliciteer__film::after{
background:linear-gradient(0deg,rgba(250,249,245,.93),rgba(250,249,245,.9));
}
}
.sectie--solliciteren .kader{
background:linear-gradient(0deg,rgba(250,249,245,.94),rgba(250,249,245,.94)),
rgba(132,114,64,.045);
backdrop-filter:blur(2px);
}
.sectie--solliciteren .form__note,
.sectie--solliciteren .lead{text-shadow:0 1px 0 rgba(250,249,245,.8);}
.intro{animation-delay:4.1s;}
.intro__slagzin{
font-size:clamp(1.32rem,3.6vw,2.15rem);
margin-top:1.25rem;letter-spacing:.012em;
animation:intro-tekst .9s var(--soepel) 1.05s forwards;
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
.intro__slagzin{
background-image:linear-gradient(100deg,
var(--goud-tekst) 0%, var(--goud-tekst) 30%,
#D8C68C 44%, #F3E8C4 50%, #D8C68C 56%,
var(--goud-tekst) 70%, var(--goud-tekst) 100%);
background-size:280% 100%;
background-repeat:no-repeat;
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;
animation:intro-tekst .9s var(--soepel) 1.05s forwards,
slagzin-glans 3.2s linear 1.05s infinite;
}
}
.intro__binnen{
display:flex;flex-direction:column;align-items:center;justify-content:center;
text-align:center;padding:0 8vw;
}
.intro__logo{display:block;margin-inline:auto;align-self:center;}
.intro__slagzin{align-self:center;margin-top:2.1rem;}
.intro__harten{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
.intro__harten .intro__hart{
position:absolute;left:var(--l);top:var(--t);width:var(--w);height:auto;
color:var(--goud);opacity:0;
animation:intro-hart var(--dur,3.5s) ease var(--d,1s) forwards;
}
@media (max-width:47.99em){
.intro__harten .intro__hart{width:calc(var(--w) * .72);}
.intro__slagzin{margin-top:1.5rem;}
}
.kader--film{position:relative;overflow:hidden;isolation:isolate;}
.sectie--solliciteren .kader--film{background:var(--creme);backdrop-filter:none;}
.kader__film{position:absolute;inset:0;z-index:0;pointer-events:none;}
.kader__film .foto,
.kader__film video{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;}
.kader__film .foto img,
.kader__film video{object-fit:cover;object-position:50% 42%;}
.kader__film video{opacity:0;transition:opacity .9s var(--soepel);z-index:1;}
.kader__film video.is-af{opacity:1;}
.kader__film::after{
content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
background:
linear-gradient(180deg,rgba(250,249,245,.9) 0%,rgba(250,249,245,.82) 45%,rgba(250,249,245,.88) 100%),
linear-gradient(0deg,rgba(250,249,245,.35),rgba(250,249,245,.35));
}
.kader__inhoud{position:relative;z-index:3;}
.kader--film h3,.kader--film p{text-shadow:0 1px 0 rgba(250,249,245,.75);}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
.verhaal__slotslagzin,
.verhaal__zin--slagzin{
background-image:linear-gradient(100deg,
var(--goud-tekst) 0%, var(--goud-tekst) 30%,
#D8C68C 44%, #F0E4BE 50%, #D8C68C 56%,
var(--goud-tekst) 70%, var(--goud-tekst) 100%);
background-size:280% 100%;
background-repeat:no-repeat;
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;
animation:slagzin-glans 3.8s linear infinite;
text-shadow:none;
}
}
@media (prefers-reduced-motion:reduce){
.verhaal__slotslagzin,.verhaal__zin--slagzin{
animation:none;background-image:none;
-webkit-text-fill-color:var(--goud-tekst);color:var(--goud-tekst);
}
}
.solliciteer__raster{display:block;}
.solliciteer__form{max-width:min(100%,34rem);}
.solliciteer__kaders{
display:grid;grid-template-columns:repeat(2,1fr);
gap:clamp(1.2rem,2.6vw,2rem);align-items:start;
}
@media (max-width:47.99em){
.solliciteer__kaders{grid-template-columns:1fr;}
}
.sectie--creme{
background:linear-gradient(180deg,
var(--creme) 0,
var(--creme-diep) clamp(2.5rem,6vw,5rem),
var(--creme-diep) calc(100% - clamp(2.5rem,6vw,5rem)),
var(--creme) 100%);
}
.sectie--warm{
background:linear-gradient(180deg,
var(--creme) 0,
var(--creme-warm) clamp(2.5rem,6vw,5rem),
var(--creme-warm) calc(100% - clamp(2.5rem,6vw,5rem)),
var(--creme) 100%);
}
.sectie--inclusie{background:var(--creme-diep);}
.kaart-map{
position:relative;background:var(--creme-diep);
border-radius:var(--radius);
}
.kaart-map::before{
content:"Kaart wordt geladen \2026";
position:absolute;inset:0;display:grid;place-items:center;
font-family:var(--sans);font-weight:700;font-size:.68rem;
letter-spacing:.16em;text-transform:uppercase;color:var(--goud-tekst);
opacity:1;
}
.kaart-map iframe{position:relative;background:transparent;}
.gezin__beeld::after{
background:
linear-gradient(90deg,rgba(250,249,245,.96) 0%,rgba(250,249,245,.86) 34%,rgba(250,249,245,.4) 60%,rgba(250,249,245,.08) 100%),
linear-gradient(0deg,rgba(250,249,245,.14),rgba(250,249,245,.14));
}
.project__beeld::after{
background:
linear-gradient(90deg,rgba(250,249,245,.96) 0%,rgba(250,249,245,.86) 34%,rgba(250,249,245,.42) 60%,rgba(250,249,245,.1) 100%),
linear-gradient(0deg,rgba(250,249,245,.12),rgba(250,249,245,.12));
}
.beeld-stapel__klein{right:0;}
.split .plak,.beeld-stapel{overflow:visible;}
.volgende{margin-block:clamp(2.5rem,5vw,4rem);}
.sectie--dag{background:var(--creme-diep);}
.kader--smal{max-width:46rem;margin-inline:auto;}
.sectie--huis{position:relative;overflow:hidden;}
.huis__beeld{position:absolute;inset:0;z-index:1;pointer-events:none;}
.huis__beeld .foto,
.huis__beeld video{
position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;
-webkit-mask-image:
linear-gradient(90deg,transparent 0,#000 13%,#000 90%,transparent 100%),
linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%);
-webkit-mask-composite:source-in;
mask-image:
linear-gradient(90deg,transparent 0,#000 13%,#000 90%,transparent 100%),
linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%);
mask-composite:intersect;
}
.huis__beeld .foto img,
.huis__beeld video{object-fit:cover;object-position:56% 62%;}
.huis__beeld video{opacity:0;transition:opacity .9s var(--soepel);z-index:2;}
.huis__beeld video.is-af{opacity:1;}
.huis__beeld::after{
content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
background:
linear-gradient(90deg,rgba(250,249,245,.96) 0%,rgba(250,249,245,.88) 34%,rgba(250,249,245,.46) 62%,rgba(250,249,245,.1) 100%),
linear-gradient(0deg,rgba(250,249,245,.22),rgba(250,249,245,.22));
}
.huis__inhoud{position:relative;z-index:4;}
.huis__tekst{max-width:36rem;}
@media (max-width:63.99em){
.huis__beeld::after{
background:linear-gradient(0deg,rgba(250,249,245,.92),rgba(250,249,245,.86));
}
.huis__tekst{max-width:none;}
}
.sectie--gebouw{position:relative;overflow:hidden;}
.gebouw__beeld{position:absolute;inset:0;z-index:1;pointer-events:none;}
.gebouw__beeld .foto{
position:absolute;inset:0;height:100%;aspect-ratio:auto;
-webkit-mask-image:
linear-gradient(90deg,transparent 0,#000 15%,#000 90%,transparent 100%),
linear-gradient(180deg,transparent 0,#000 8%,#000 92%,transparent 100%);
-webkit-mask-composite:source-in;
mask-image:
linear-gradient(90deg,transparent 0,#000 15%,#000 90%,transparent 100%),
linear-gradient(180deg,transparent 0,#000 8%,#000 92%,transparent 100%);
mask-composite:intersect;
}
.gebouw__beeld .foto img{width:100%;height:100%;object-fit:cover;object-position:72% 40%;}
.gebouw__beeld::after{
content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
background:
linear-gradient(90deg,rgba(250,249,245,.96) 0%,rgba(250,249,245,.88) 36%,rgba(250,249,245,.44) 62%,rgba(250,249,245,.08) 100%),
linear-gradient(0deg,rgba(250,249,245,.2),rgba(250,249,245,.2));
}
.gebouw__inhoud{position:relative;z-index:3;}
.gebouw__troeven{max-width:36rem;}
@media (max-width:63.99em){
.gebouw__beeld::after{
background:linear-gradient(0deg,rgba(250,249,245,.92),rgba(250,249,245,.86));
}
.gebouw__troeven{max-width:none;}
}
.site-kop.is-open{
background:transparent;box-shadow:none;
backdrop-filter:none;-webkit-backdrop-filter:none;
}
.site-kop.is-open .logo-neg{display:none;}
.site-kop.is-open .logo-pos{display:block;}
.site-kop.is-open .site-kop__logo{position:relative;z-index:120;}
@media (max-width:63.99em){
.nav{padding-bottom:max(3rem,env(safe-area-inset-bottom));}
}
.merk-lockup__slagzin text{fill:var(--zand);}
.merk-lockup__veeg{
animation:voet-glans 3.8s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes voet-glans{
0%{transform:translateX(-360px);}
100%{transform:translateX(1280px);}
}
@media (prefers-reduced-motion:reduce){
.merk-lockup__veeg{display:none;}
}
@media (max-width:47.99em){
.hero--film.hero--pagina{
display:flex;flex-direction:column;align-items:stretch;
min-height:auto;padding-bottom:0;
}
.hero--film.hero--pagina::before{display:none;}
.hero--film .hero__binnen{order:1;}
.hero--film .hero__beeld{
order:2;position:relative;inset:auto;z-index:0;
width:100%;aspect-ratio:16/9;margin-top:1.6rem;
transform:none!important;
}
.hero--film .hero__beeld .foto{position:absolute;inset:0;}
.hero--filmachter.hero--pagina::before{
background:linear-gradient(180deg,
rgba(250,249,245,.9) 0%,rgba(250,249,245,.76) 36%,
rgba(250,249,245,.56) 64%,rgba(250,249,245,.36) 100%);
}
.hero--filmachter .hero__beeld{
-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 10%,#000 100%);
mask-image:linear-gradient(180deg,transparent 0,#000 10%,#000 100%);
}
.hero--filmachter .hero__beeld img,
.hero--filmachter .hero__beeld video{object-position:50% 40%;}
.hero--split .hero__raster{position:static;}
.hero__beeldkolom{
position:absolute;inset:0;width:auto;margin:0;
aspect-ratio:auto;
-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 100%),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0 28C140 6 260 6 400 22s260 16 400-2 260-18 400 4L1200 0 0 0Z'/%3E%3C/svg%3E");
-webkit-mask-size:100% calc(100% - 2rem),100% 2rem;
-webkit-mask-position:top,bottom;
-webkit-mask-repeat:no-repeat;
-webkit-mask-composite:source-over;
mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 100%),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0 28C140 6 260 6 400 22s260 16 400-2 260-18 400 4L1200 0 0 0Z'/%3E%3C/svg%3E");
mask-size:100% calc(100% - 2rem),100% 2rem;
mask-position:top,bottom;
mask-repeat:no-repeat;
mask-composite:add;
}
.hero__beeldkolom .foto{position:absolute;inset:0;}
.hero__beeldkolom img,.hero__beeldkolom video{object-position:55% 40%;}
.hero__beeldkolom::after{
background:linear-gradient(180deg,
rgba(250,249,245,.9) 0%,rgba(250,249,245,.74) 36%,
rgba(250,249,245,.52) 64%,rgba(250,249,245,.34) 100%);
}
.sectie--huis{overflow:visible;}
.huis__beeld{
position:absolute;left:0;right:0;bottom:0;width:auto;
top:calc(-1 * clamp(3.2rem,6vw,5.6rem) + 1px);
-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0 74C150 26 360 26 600 62s450 34 600-14L1200 120 0 120Z'/%3E%3C/svg%3E"),
linear-gradient(180deg,#000 0,#000 92%,transparent 100%);
-webkit-mask-size:100% clamp(3.2rem,6vw,5.6rem),100% calc(100% - clamp(3.2rem,6vw,5.6rem) + 1px);
-webkit-mask-position:top,bottom;
-webkit-mask-repeat:no-repeat;
-webkit-mask-composite:source-over;
mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0 74C150 26 360 26 600 62s450 34 600-14L1200 120 0 120Z'/%3E%3C/svg%3E"),
linear-gradient(180deg,#000 0,#000 92%,transparent 100%);
mask-size:100% clamp(3.2rem,6vw,5.6rem),100% calc(100% - clamp(3.2rem,6vw,5.6rem) + 1px);
mask-position:top,bottom;
mask-repeat:no-repeat;
mask-composite:add;
}
.huis__beeld::after{
display:block;
background:linear-gradient(180deg,
rgba(250,249,245,.86) 0%,rgba(250,249,245,.74) 42%,
rgba(250,249,245,.5) 100%);
}
.sectie--solliciteren{display:flex;flex-direction:column;}
.sectie--solliciteren .wrap{order:1;}
.solliciteer__film{
order:2;position:relative;inset:auto;width:100%;
aspect-ratio:16/9;margin-top:1rem;
}
.solliciteer__film::after{display:none;}
.huis__beeld .foto,.huis__beeld video{
-webkit-mask-image:none;mask-image:none;
}
.solliciteer__film .foto,.solliciteer__film video{
-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 8%,#000 92%,transparent 100%);
-webkit-mask-composite:source-in;
mask-image:linear-gradient(180deg,transparent 0,#000 8%,#000 92%,transparent 100%);
mask-composite:intersect;
}
.solliciteer__film .foto img,
.solliciteer__film video{object-position:50% 45%;}
.sectie--solliciteren .kader{backdrop-filter:none;}
.kader--film .kader__film{
position:relative;inset:auto;aspect-ratio:16/9;
margin:calc(-1 * clamp(1.5rem,3vw,2.4rem))
calc(-1 * clamp(1.5rem,3vw,2.4rem)) 1.2rem;
}
.kader--film .kader__film::after{display:none;}
.kader--film h3,.kader--film p{text-shadow:none;}
.sectie--welkom .welkom__beeld{
position:absolute;inset:0;width:100%;aspect-ratio:auto;
margin-top:0;order:0;
-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 7%,#000 93%,transparent 100%);
-webkit-mask-composite:source-in;
mask-image:linear-gradient(180deg,transparent 0,#000 7%,#000 93%,transparent 100%);
mask-composite:intersect;
}
.sectie--welkom .welkom__beeld::after{
content:"";display:block;position:absolute;inset:0;pointer-events:none;
z-index:3;
background:linear-gradient(0deg,rgba(250,249,245,.92),rgba(250,249,245,.87));
}
}
.nav__harten,.nav__embleem-link{display:none;}
@media (max-width:63.99em){
.nav__embleem-link{
display:block;position:relative;z-index:1;line-height:0;
margin-bottom:2rem;border-radius:50%;
}
.nav__embleem{
display:block;width:clamp(56px,15vw,76px);height:auto;
}
.nav__harten{
display:block;position:absolute;inset:0;
overflow:hidden;pointer-events:none;z-index:0;
}
.nav__hart{
position:absolute;left:var(--l);top:var(--t);width:var(--w);height:auto;
color:var(--goud);opacity:0;
}
.nav__hart svg{display:block;width:100%;height:auto;}
.site-kop.is-open .nav__hart{
animation:nav-hart var(--dur,8s) ease-in-out var(--d,0s) infinite;
}
.nav a,.nav .knop{position:relative;z-index:1;}
}
@keyframes nav-hart{
0%{opacity:0;transform:translate3d(0,30px,0) rotate(-7deg) scale(.9);}
18%{opacity:.34;}
60%{opacity:.24;}
100%{opacity:0;transform:translate3d(12px,-70px,0) rotate(8deg) scale(1.06);}
}
@media (prefers-reduced-motion:reduce){
.site-kop.is-open .nav__hart{animation:none;opacity:.16;}
}
[data-video].heeft-video .foto{opacity:0;transition:opacity .3s var(--soepel);}
.sectie--traject{position:relative;overflow:hidden;background:var(--creme-diep);}
.traject__beeld{
position:absolute;top:0;right:0;width:56%;height:min(74.6vw,68rem);z-index:0;
-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.55) 16%,#000 42%,#000 100%),
linear-gradient(180deg,transparent 0,#000 8%,#000 78%,transparent 100%);
-webkit-mask-composite:source-in;
mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.55) 16%,#000 42%,#000 100%),
linear-gradient(180deg,transparent 0,#000 8%,#000 78%,transparent 100%);
mask-composite:intersect;
}
.traject__beeld .foto{
position:absolute;inset:0;height:100%;aspect-ratio:auto;
-webkit-mask-image:none;mask-image:none;
}
.traject__beeld .foto img{width:100%;height:100%;object-fit:cover;object-position:44% 22%;}
.traject__beeld::after{
content:"";position:absolute;inset:0;pointer-events:none;
z-index:3;
background:linear-gradient(90deg,rgba(250,249,245,.85) 0%,rgba(250,249,245,.4) 30%,rgba(250,249,245,.08) 55%,rgba(250,249,245,0) 75%);
}
.traject__inhoud{position:relative;z-index:2;}
.sectie--traject .kader{
background:linear-gradient(0deg,rgba(250,249,245,.93),rgba(250,249,245,.93)),
rgba(132,114,64,.045);
backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
}
@media (max-width:47.99em){
.traject__beeld{
width:100%;bottom:auto;height:min(160vw,44rem);
-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 6%,#000 72%,transparent 100%);
-webkit-mask-composite:source-in;
mask-image:linear-gradient(180deg,transparent 0,#000 6%,#000 72%,transparent 100%);
mask-composite:intersect;
}
.traject__beeld .foto img{object-position:50% 16%;}
.traject__beeld::after{
background:linear-gradient(180deg,rgba(250,249,245,.9) 0%,rgba(250,249,245,.72) 55%,rgba(250,249,245,.55) 100%);
}
}
@media (min-width:48em){
.sectie--traject .plak{margin-top:min(63vw,57rem);}
}
.sectie--rondleid{position:relative;overflow:hidden;background:var(--creme-diep);}
.rondleid__beeld{
position:absolute;top:0;right:0;width:56%;height:min(42vw,40rem);z-index:0;
-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.55) 16%,#000 42%,#000 100%),
linear-gradient(180deg,transparent 0,#000 8%,#000 78%,transparent 100%);
-webkit-mask-composite:source-in;
mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.55) 16%,#000 42%,#000 100%),
linear-gradient(180deg,transparent 0,#000 8%,#000 78%,transparent 100%);
mask-composite:intersect;
}
.rondleid__beeld .foto{
position:absolute;inset:0;height:100%;aspect-ratio:auto;
-webkit-mask-image:none;mask-image:none;
}
.rondleid__beeld .foto img{width:100%;height:100%;object-fit:cover;object-position:60% 32%;}
.rondleid__beeld::after{
content:"";position:absolute;inset:0;pointer-events:none;
z-index:3;
background:linear-gradient(90deg,rgba(250,249,245,.85) 0%,rgba(250,249,245,.4) 30%,rgba(250,249,245,.08) 55%,rgba(250,249,245,0) 75%);
}
.rondleid__inhoud{position:relative;z-index:2;}
.sectie--rondleid .kader{
background:linear-gradient(0deg,rgba(250,249,245,.93),rgba(250,249,245,.93)),
rgba(132,114,64,.045);
backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
}
@media (min-width:48em){
.rondleid__zij{margin-top:min(36vw,34rem);}
}
@media (max-width:47.99em){
.rondleid__beeld{
width:100%;height:min(120vw,34rem);
-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 6%,#000 72%,transparent 100%);
-webkit-mask-composite:source-in;
mask-image:linear-gradient(180deg,transparent 0,#000 6%,#000 72%,transparent 100%);
mask-composite:intersect;
}
.rondleid__beeld .foto img{object-position:56% 30%;}
.rondleid__beeld::after{
background:linear-gradient(180deg,rgba(250,249,245,.9) 0%,rgba(250,249,245,.72) 55%,rgba(250,249,245,.55) 100%);
}
}
.hero__scrollhint{
position:relative;z-index:6;
width:max-content;max-width:100%;
margin:clamp(.5rem,1.4vw,.9rem) auto clamp(2.2rem,4vw,3rem);
display:flex;flex-direction:column;align-items:center;gap:.7rem;
color:var(--goud-tekst);text-decoration:none;padding:1rem 1.8rem 0;
transition:opacity .5s var(--soepel);
}
.hero__scrollhint::before{
content:"";position:absolute;left:50%;top:46%;
width:min(27rem,88vw);height:13.5rem;transform:translate(-50%,-50%);
background:radial-gradient(ellipse at center,
rgba(250,249,245,.92) 0%,rgba(250,249,245,.68) 40%,rgba(250,249,245,0) 74%);
pointer-events:none;
}
.hero__scrollhint > *{position:relative;}
.hero__scrollhint-tekst{
display:flex;align-items:center;gap:.85rem;
font-family:var(--sans);font-weight:700;font-size:.74rem;
letter-spacing:.26em;text-transform:uppercase;white-space:nowrap;
transition:letter-spacing .55s var(--soepel);
}
.hero__scrollhint-tekst::before,
.hero__scrollhint-tekst::after{
content:"";width:clamp(1.4rem,3vw,2.6rem);height:1px;background:var(--goud);opacity:.75;
}
.hero__scrollhint-knop{
display:grid;place-items:center;
width:3rem;height:3rem;border-radius:50%;
border:1px solid var(--goud);
background:var(--goud);color:var(--creme);
box-shadow:0 6px 20px rgba(132,114,64,.28);
transition:background .4s var(--soepel),color .4s var(--soepel),
border-color .4s var(--soepel),box-shadow .4s var(--soepel);
animation:hint-dans 2.8s ease-in-out infinite;
}
.hero__scrollhint-knop svg{width:1.3rem;height:1.3rem;}
.hero__scrollhint-draad{
width:2px;border-radius:2px;height:clamp(2rem,3.4vw,2.6rem);
background:linear-gradient(180deg,var(--goud) 0%,rgba(132,114,64,0) 100%);
transform-origin:top center;
animation:hint-draad 2.8s ease-in-out infinite;
}
.hero__scrollhint:hover .hero__scrollhint-tekst{letter-spacing:.34em;}
.hero__scrollhint:hover .hero__scrollhint-knop{
background:var(--creme);color:var(--goud-tekst);border-color:var(--goud-tekst);
box-shadow:0 10px 26px rgba(132,114,64,.34);
}
.hero__scrollhint:focus-visible{outline:2px solid var(--goud);outline-offset:6px;border-radius:1.6rem;}
@keyframes hint-dans{
0%,100%{transform:translateY(0);opacity:.92;}
50%{transform:translateY(8px);opacity:.55;}
}
@keyframes hint-draad{
0%{transform:scaleY(0);opacity:0;}
30%{opacity:.8;}
100%{transform:scaleY(1);opacity:0;}
}
#verhaalstart{scroll-margin-top:clamp(7rem,10vw,9rem);}
@media (prefers-reduced-motion:reduce){
.hero__scrollhint-knop,.hero__scrollhint-draad{animation:none;}
.hero__scrollhint-draad{opacity:.55;}
}
@media (max-width:47.99em){
.hero__beeldkolom::after{
background:linear-gradient(180deg,
rgba(250,249,245,.93) 0%,rgba(250,249,245,.82) 38%,
rgba(250,249,245,.74) 72%,rgba(250,249,245,.4) 100%);
}
.hero--split h1,
.hero--split .hero__intro,
.hero--split .hero__label{
text-shadow:0 1px 0 rgba(250,249,245,.65),0 2px 18px rgba(250,249,245,.6);
}
.hero--split .hero__raster{padding-bottom:2.4rem;}
.hero__scrollhint{margin-bottom:clamp(3rem,9vw,4.4rem);}
.hero__scrollhint::before{width:min(23rem,94vw);height:11rem;}
.hero__scrollhint-draad{display:none;}
.hero__scrollhint-knop{width:2.7rem;height:2.7rem;}
.hero__scrollhint-tekst{font-size:.68rem;letter-spacing:.22em;}
}
.solliciteer__raster{
display:grid;grid-template-columns:minmax(0,1fr) minmax(0,34rem);
gap:clamp(2rem,4vw,3.5rem);align-items:center;
}
.solliciteer__filmkader{
position:relative;overflow:hidden;border-radius:var(--radius);
aspect-ratio:16/9;
box-shadow:0 26px 54px -32px rgba(60,60,60,.5);
}
.solliciteer__filmkader .foto{
position:absolute;inset:0;height:100%;aspect-ratio:auto;
-webkit-mask-image:none;mask-image:none;
}
.solliciteer__filmkader .foto img{width:100%;height:100%;object-fit:cover;object-position:60% 45%;}
.solliciteer__filmkader video{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
object-position:60% 45%;opacity:0;transition:opacity .9s var(--soepel);z-index:1;
}
.solliciteer__filmkader video.is-af{opacity:1;}
@media (max-width:63.99em){
.solliciteer__raster{grid-template-columns:1fr;}
.solliciteer__filmkader{order:2;}
}
@media (min-width:48em){
.hero__beeldkolom::after{
background:
linear-gradient(90deg,var(--creme) 0%,rgba(250,249,245,.86) 16%,rgba(250,249,245,.42) 32%,rgba(250,249,245,.1) 50%,rgba(250,249,245,0) 68%),
linear-gradient(0deg,rgba(250,249,245,.08),rgba(250,249,245,.08));
}
.hero--pagina.hero--licht::before{
background:
linear-gradient(100deg,rgba(250,249,245,.9) 0%,rgba(250,249,245,.66) 34%,rgba(250,249,245,.26) 60%,rgba(250,249,245,.06) 100%),
linear-gradient(to top,rgba(250,249,245,.9) 0%,rgba(250,249,245,.22) 38%,rgba(250,249,245,.04) 72%,rgba(250,249,245,.24) 100%);
}
.huis__beeld::after{
background:
linear-gradient(90deg,rgba(250,249,245,.94) 0%,rgba(250,249,245,.8) 32%,rgba(250,249,245,.3) 60%,rgba(250,249,245,.04) 100%),
linear-gradient(0deg,rgba(250,249,245,.1),rgba(250,249,245,.1));
}
}
.solliciteer__intro{max-width:38rem;}
.filmblok{position:relative;}
.filmblok__film{
position:relative;overflow:hidden;border-radius:var(--radius);
aspect-ratio:16/9;max-height:min(72svh,46rem);width:100%;
box-shadow:0 30px 60px -36px rgba(60,60,60,.55);
}
.filmblok__film .foto{
position:absolute;inset:0;height:100%;aspect-ratio:auto;
-webkit-mask-image:none;mask-image:none;
}
.filmblok__film .foto img{width:100%;height:100%;object-fit:cover;object-position:55% 40%;}
.filmblok__film video{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
object-position:55% 40%;opacity:0;transition:opacity .9s var(--soepel);z-index:1;
}
.filmblok__film video.is-af{opacity:1;}
.filmblok__kader{
position:absolute;left:clamp(1.2rem,3vw,2.6rem);bottom:clamp(1.2rem,3vw,2.6rem);
max-width:min(30rem,55%);z-index:3;
background:linear-gradient(0deg,rgba(250,249,245,.2),rgba(250,249,245,.2)),
rgba(132,114,64,.02);
backdrop-filter:blur(8px) saturate(1.15);-webkit-backdrop-filter:blur(8px) saturate(1.15);
box-shadow:0 20px 44px -26px rgba(60,60,60,.5);
}
.filmblok__kader h3,.filmblok__kader p{text-shadow:0 1px 0 rgba(250,249,245,.45);}
@media (max-width:63.99em){
.filmblok__kader{
position:static;max-width:none;margin-top:1rem;
backdrop-filter:none;-webkit-backdrop-filter:none;
background:linear-gradient(0deg,rgba(250,249,245,.94),rgba(250,249,245,.94)),
rgba(132,114,64,.045);
}
.filmblok__film{max-height:none;}
}
.sectie--bieden{position:relative;overflow:hidden;background:var(--creme-diep);}
.bieden__beeld{
position:absolute;inset:0;z-index:0;
-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 7%,#000 93%,transparent 100%);
mask-image:linear-gradient(180deg,transparent 0,#000 7%,#000 93%,transparent 100%);
}
.bieden__beeld .foto{
position:absolute;inset:0;height:100%;aspect-ratio:auto;
-webkit-mask-image:none;mask-image:none;
}
.bieden__beeld .foto img{
width:100%;height:100%;object-fit:cover;object-position:62% 30%;
filter:grayscale(.52) sepia(.1) saturate(1) brightness(1.04) contrast(.97);
}
.bieden__beeld::after{
content:"";position:absolute;inset:0;pointer-events:none;
z-index:3;
background:
linear-gradient(90deg,rgba(250,249,245,.94) 0%,rgba(250,249,245,.86) 34%,rgba(250,249,245,.5) 62%,rgba(250,249,245,.16) 100%),
linear-gradient(0deg,rgba(250,249,245,.14),rgba(250,249,245,.14));
}
.bieden__inhoud{position:relative;z-index:2;}
.bieden__troeven{max-width:38rem;}
@media (max-width:63.99em){
.bieden__beeld::after{
background:linear-gradient(0deg,rgba(250,249,245,.92),rgba(250,249,245,.86));
}
.bieden__troeven{max-width:none;}
}
.sectie--werksfeer{position:relative;overflow:hidden;background:var(--creme);}
.werksfeer__beeld{
position:absolute;inset:0;z-index:0;
-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 7%,#000 93%,transparent 100%);
mask-image:linear-gradient(180deg,transparent 0,#000 7%,#000 93%,transparent 100%);
}
.werksfeer__beeld .foto{
position:absolute;inset:0;height:100%;aspect-ratio:auto;
-webkit-mask-image:none;mask-image:none;
}
.werksfeer__beeld .foto img{width:100%;height:100%;object-fit:cover;object-position:68% 32%;}
.werksfeer__beeld::after{
content:"";position:absolute;inset:0;pointer-events:none;
z-index:3;
background:
linear-gradient(90deg,rgba(250,249,245,.94) 0%,rgba(250,249,245,.86) 34%,rgba(250,249,245,.48) 62%,rgba(250,249,245,.14) 100%),
linear-gradient(0deg,rgba(250,249,245,.12),rgba(250,249,245,.12));
}
.werksfeer__inhoud{position:relative;z-index:2;}
@media (max-width:63.99em){
.werksfeer__beeld::after{
background:linear-gradient(0deg,rgba(250,249,245,.92),rgba(250,249,245,.86));
}
}
.kaart-map--wacht{
min-height:clamp(18rem,40vw,26rem);display:grid;place-items:center;
background:var(--creme-diep);filter:none;
}
.kaart-map__hoes{text-align:center;padding:clamp(1.5rem,4vw,2.5rem);max-width:28rem;}
.kaart-map__adres{
font-family:'Playfair Display',Georgia,serif;font-weight:700;
font-size:clamp(1.05rem,2vw,1.3rem);color:var(--antraciet);margin-bottom:1.1rem;
}
.kaart-map__nota{font-size:.76rem;color:var(--inkt-zacht);margin-top:1rem;line-height:1.55;}
.juridisch{max-width:46rem;}
.juridisch .juridisch__datum{
font-family:var(--sans);font-weight:700;font-size:.66rem;
letter-spacing:.18em;text-transform:uppercase;color:var(--goud-tekst);
}
.juridisch h2{font-size:clamp(1.3rem,2.3vw,1.65rem);margin:2.4em 0 .6em;}
.juridisch h2:first-of-type{margin-top:1.2em;}
.juridisch h3{color:var(--goud-tekst);font-size:1.02rem;margin:1.7em 0 .45em;}
.juridisch p,.juridisch li{color:var(--inkt-zacht);line-height:1.8;margin-bottom:.9em;}
.juridisch ul{padding-left:1.25rem;margin-bottom:1.1em;list-style:disc;}
.juridisch li{margin-bottom:.45em;}
.juridisch strong{color:var(--antraciet);font-weight:700;}
.juridisch .kader{margin-block:1.6rem;}
.partner{
display:flex;flex-direction:column;align-items:center;
gap:clamp(.85rem,1.6vw,1.15rem);
margin-top:clamp(1.9rem,3.4vw,2.8rem);
margin-bottom:clamp(2.4rem,4vw,2.7rem);
}
.partner__label{
display:flex;align-items:center;gap:.85rem;
font-family:var(--sans);font-weight:700;
font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
color:var(--grijs);
}
.partner__label::before,.partner__label::after{
content:"";flex:none;width:clamp(1.1rem,3vw,2.1rem);height:1px;
background:var(--goud);opacity:.4;
}
.partner__logo{
display:block;height:auto;
width:clamp(6.4rem,13vw,7.8rem);
}
.docs-raster{display:grid;gap:.8rem;grid-template-columns:1fr;}
@media (min-width:64em){
.docs-raster{grid-template-columns:repeat(3,1fr);}
}
.reg-opening{display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,3.5rem);}
@media (min-width:64em){
.reg-opening{grid-template-columns:minmax(0,1fr) minmax(0,20rem);align-items:start;}
}
.reg-toc{
display:grid;grid-template-columns:1fr;gap:0;
margin:clamp(2.2rem,4vw,3rem) 0 0;
border-top:1px solid var(--lijn);
}
@media (min-width:48em){ .reg-toc{grid-template-columns:1fr 1fr;} }
.reg-toc__kop{
grid-column:1/-1;
font-family:var(--sans);font-weight:700;
font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;
color:var(--goud-tekst);padding:1.4rem 0 .8rem;
}
.reg-toc__item{
display:flex;align-items:baseline;gap:.9rem;
padding:.72rem .4rem;border-bottom:1px solid var(--lijn-zacht);
color:var(--antraciet);text-decoration:none;
transition:color .25s var(--soepel),background .25s var(--soepel);
}
.reg-toc__item:hover,.reg-toc__item:focus-visible{color:var(--goud-tekst);background:rgba(132,114,64,.05);}
.reg-toc__nr{
font-family:var(--serif);font-size:.92rem;color:var(--goud-tekst);
min-width:1.6rem;flex:none;
}
.reg-toc__tekst{font-size:1rem;line-height:1.4;}
.reg-hoofdstuk{
padding-top:clamp(2.6rem,5vw,4rem);
margin-top:clamp(2.6rem,5vw,4rem);
border-top:1px solid var(--lijn);
scroll-margin-top:clamp(6rem,9vw,8rem);
}
.reg-tekst > .reg-hoofdstuk:first-child{border-top:0;}
.reg-nr{
display:inline-block;font-family:var(--serif);
font-size:clamp(1.5rem,1.2rem+1vw,2rem);color:var(--goud-tekst);
line-height:1;margin-bottom:.5rem;
}
.reg-kolom > h2:first-of-type{margin-top:.3em;}
.reg-beeld{margin:1.8rem 0 0;}
.reg-beeld .foto{
border-radius:var(--radius);box-shadow:var(--schaduw);
-webkit-mask-image:none;mask-image:none;
}
@media (min-width:64em){
.reg-hoofdstuk--beeld{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,20rem);
gap:clamp(2rem,4vw,4rem);
align-items:start;
}
.reg-beeld{
margin:0;
position:sticky;
top:clamp(7rem,10vw,9rem);
}
.reg-beeld .foto{aspect-ratio:2/3;max-height:calc(100vh - 13rem);}
.reg-beeld .foto img{width:100%;height:100%;object-fit:cover;}
}
@media (max-width:63.99em){
.reg-hoofdstuk--beeld{display:flex;flex-direction:column-reverse;}
.reg-hoofdstuk--beeld .reg-beeld{margin:0 0 1.8rem;}
.reg-beeld .foto{aspect-ratio:16/10;}
.reg-beeld .foto img{width:100%;height:100%;object-fit:cover;}
.reg-beeld--opening .foto{aspect-ratio:3/2;}
}
.juridisch .reg-lab{
font-family:var(--sans);font-weight:700;
font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
color:var(--goud-tekst);margin:1.9em 0 .5em;
}
.juridisch .kader .reg-lab{margin-top:0;}
.juridisch .kader > .reg-lab + p{margin-top:0;}
.juridisch .gegevens{margin:1.4rem 0 1.8rem;}
.juridisch .citaat{
font-family:var(--serif);font-size:clamp(1.1rem,1rem+.4vw,1.3rem);
font-style:italic;color:var(--antraciet);margin:1.8rem 0;
}
.doc-blok{display:contents;}
.doc--klap{
width:100%;text-align:left;font:inherit;
background:var(--creme);border:1px solid var(--lijn-zacht);
cursor:pointer;
}
.doc--klap .doc__chevron svg{
width:1.15rem;height:1.15rem;
transition:transform .3s var(--soepel);
}
.doc-blok.is-open .doc--klap{
border-color:var(--lijn);
background:var(--creme-warm);
}
.doc-blok.is-open .doc__chevron svg{transform:rotate(180deg);}
.doc-paneel{
order:1;
grid-column:1/-1;
border:1px solid var(--lijn);border-radius:var(--radius);
background:var(--creme);
padding:clamp(.9rem,2vw,1.2rem);
margin-top:clamp(.4rem,1vw,.8rem);
}
.doc-paneel__kop{
display:block;font-family:var(--sans);font-weight:700;
font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
color:var(--goud-tekst);margin-bottom:.8rem;
}
.doc-paneel[hidden]{display:none;}
.doc-paneel__viewer:empty{display:none;}
.doc-paneel__viewer iframe{
display:block;width:100%;height:min(78vh,44rem);
border:0;border-radius:var(--radius);background:var(--creme-diep);
}
.doc-paneel__voet{
display:flex;flex-wrap:wrap;align-items:center;
gap:clamp(.8rem,2vw,1.4rem);
margin-top:clamp(.8rem,2vw,1.1rem);
}
.doc-paneel__viewer:empty + .doc-paneel__voet{margin-top:0;}
#documenten{scroll-margin-top:clamp(6rem,9vw,8rem);}
#solliciteren{scroll-margin-top:clamp(3rem,6vw,5rem);}
@media (max-width:63.99em){
#sluitingsdagen{scroll-margin-top:3rem;}
}
@media (max-width:63.99em) and (max-height:46em){
.nav{padding-top:3.6rem;padding-bottom:1.5rem;}
.nav__embleem-link{margin-bottom:1rem;}
.nav__embleem{width:clamp(44px,11vw,58px);}
.nav > a:not([class]){min-height:2.9rem;}
.nav .knop{padding:.86em 1.5em;}
.nav .knop--lijn.nav__knop-tweede{padding:.86em 1.5em;}
.nav .knop:nth-last-of-type(2){margin-top:1.2rem;}
.nav .knop:last-of-type{margin-top:.55rem;}
.nav__voet{margin-top:1.2rem;}
}
.troef h3,.kader h3,.dag__item h3,.filmblok__kader h3{
font-size:clamp(1.05rem,1rem + .3vw,1.25rem);
}
@media (min-width:48em){
.hero__beeld img[src*="hero-praktisch"],
.hero__beeld img[src*="hero-inschrijven"]{object-position:50% 12%;}
.hero__beeld img[src*="hero-ouders"]{object-position:50% 18%;}
.hero__beeld img[src*="hero-visie"],
.hero__beeld video[src*="hero-visie"]{object-position:50% 24%;}
.hero__beeld img[src*="welkom-onthaal"]{object-position:50% 30%;}
}
@media print{
@page{size:A4;margin:16mm 14mm;}
:root{--marge:0;--sectie:1.6rem;--creme:#fff;--creme-diep:#fff;--creme-warm:#fff;}
html,body{overflow:visible;}
body{background:#fff;color:#000;font-size:10.5pt;line-height:1.55;}
body::after{display:none;}
h1,h2,h3,h4{color:#000;break-after:avoid;}
h1{font-size:24pt;}
h2{font-size:17pt;}
h3{font-size:12.5pt;}
p,li{orphans:3;widows:3;}
a{color:inherit;}
.site-kop,.nav,.nav-knop,.voortgang,.dwarrel,.intro,.werkbanner,
.hero__scrollhint,.hero__beeld,.hero__beeldkolom,.hero::before,
.cta,.volgende-band,.site-voet__merkblok,.site-voet__sociaal,
.kaart-map,.doc-paneel,.belofte__beeld,.reg-beeld,video,
main [aria-hidden="true"]:not(svg){display:none !important;}
.reveal,.verhaal--paneel,.kenmerken,.hero__tekst,
.hero__label,.hero__intro,.hero .knoppen,.hero__balk,.kruimels{
opacity:1 !important;transform:none !important;animation:none !important;
transition:none !important;
}
.reveal .foto{clip-path:none !important;}
.hero h1 .wrd{overflow:visible;}
.hero h1 .wrd i{transform:none !important;animation:none !important;}
.verhaal--paneel .verhaal__zin{opacity:1;grid-template-rows:1fr;margin-top:.25rem;}
.verhaal--paneel .verhaal__stap .ltr{opacity:1;animation:none;}
.markeer{background:none;}
.zwier path,.ovaal svg path{stroke-dashoffset:0;}
.slagzin,.verhaal__slotslagzin,.verhaal__zin--slagzin{
background:none;-webkit-text-fill-color:var(--goud-tekst);
color:var(--goud-tekst);animation:none;
}
.hero,.hero--pagina,.hero--split{
min-height:0;padding:0 0 1.2rem;background:none;color:#000;
display:block;overflow:visible;
}
.hero--split .hero__raster{min-height:0;padding:0;}
.hero--split .hero__tekst{max-width:none;}
.hero h1,.hero__intro,.hero--pagina.hero--licht .hero__intro,
.kruimels,.kruimels a,.kruimels span{
color:#000;text-shadow:none;
}
.hero__intro{margin-bottom:1rem;}
.hero__label{color:var(--goud-tekst);}
.sectie{padding-block:var(--sectie);}
.sectie--creme,.sectie--warm,.sectie--dag,.sectie--inclusie,
.sectie--traject,.sectie--rondleid,.sectie--bieden,.sectie--werksfeer,
.verhaal,.feiten,.kenmerken,.kaart,.prikkaart,.volgende,.kader,
.sectie--solliciteren .kader,.filmblok__kader{background:none;box-shadow:none;}
.kader,.kaart,.prikkaart,.doc,.doc--klap{border:1px solid #999;}
.prikkaart,.prikkaart--b{transform:none;}
.split--plak .plak,.dagbeeld,.reg-beeld,.filmblok__kader{position:static;}
.sectie--traject .plak{margin-top:0 !important;}
.rondleid__zij{margin-top:0 !important;}
.belofte__tekst{margin-top:0;}
.filmblok__kader{max-width:none;backdrop-filter:none;-webkit-backdrop-filter:none;}
.reg-hoofdstuk--beeld{display:block;}
.reg-hoofdstuk{break-inside:auto;}
.juridisch{max-width:none;}
.juridisch p,.juridisch li,.lead,.kaart p,.troef p,.tl p,.dag__item p,
.faq p,.belofte p,.waarde p,.feit__tekst,.kenmerk,.klein,.form__note{color:#000;}
.knop,.knop--lijn,.knop--licht,.knop--lijn-licht,.cta .knop--licht{
background:none !important;color:#000 !important;border:1px solid #000 !important;
box-shadow:none;transform:none !important;
}
.knop::before,.knop::after{display:none;}
.link{color:#000;}
main a[href^="http"]::after{
content:" (" attr(href) ")";font-size:.8em;font-weight:400;
letter-spacing:0;text-transform:none;word-break:break-all;
}
.troef,.kaart,.kader,.faq,.prikkaart,.tl,.dag__item,.gegevens > div,
.doc,.doc-blok,.belofte,.waarde,.feit,.kenmerk,.cijfer,.volg-kaart,
.reg-toc__item,.sectiekop,.kop-blok,img{break-inside:avoid;}
.site-voet{background:none;color:#000;padding:1rem 0 0;border-top:1px solid #999;}
.site-voet h2,.site-voet__kolommen h2,.site-voet__financieel h2,
.site-voet__ent-naam,.site-voet__entiteit,.site-voet__onder,.site-voet a{color:#000;}
.site-voet__kolommen{text-align:left;padding-bottom:1rem;}
.site-voet__kolommen ul{justify-items:start;}
.site-voet__kolommen > div:nth-child(n+3){display:none;}
.site-voet__onder{break-inside:avoid;}
.site-voet__financieel{text-align:left;border-color:#999;padding:1rem 0;}
.site-voet__onder{border-color:#999;}
.site-voet__site{color:#000 !important;}
.voet-nota{background:none;color:#000;border:1px solid #000;}
}
.hero--split .hero__beeldkolom .foto--eigen img{filter:none;}
.hero__beeldkolom.heeft-video .foto{opacity:1;}
.hero__beeldkolom video{z-index:3;}
.verhaal--paneel .verhaal__stap.actief{
background:rgba(250,249,245,.9);
-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
box-shadow:0 10px 28px -18px rgba(60,60,60,.45);
}
.verhaal--paneel .verhaal__zin{
color:var(--inkt);
font-size:clamp(1rem,.95rem + .3vw,1.16rem);line-height:1.55;
}
.verhaal--paneel .verhaal__slotblok{position:relative;}
.verhaal--paneel .verhaal__slotblok::before{
content:"";position:absolute;left:50%;top:50%;z-index:-1;pointer-events:none;
width:min(40rem,100%);height:150%;transform:translate(-50%,-50%);
background:radial-gradient(ellipse at center,rgba(250,249,245,.94) 0%,rgba(250,249,245,.7) 45%,rgba(250,249,245,0) 72%);
}
@media (max-width:63.99em){
.verhaal--paneel .verhaal__beeld::after{
background:linear-gradient(0deg,rgba(250,249,245,.9),rgba(250,249,245,.82));
}
}
@media print{
.verhaal--paneel .verhaal__stap.actief{background:none;box-shadow:none;backdrop-filter:none;}
}
@media (min-width:48em){
.hero__beeld video[src*="hero-visie"]{object-position:50% 6%;}
}
@media (min-width:140em){
.hero__beeld video[src*="hero-visie"]{object-position:50% 0%;}
}
.waarde .foto img[src*="laakdal-tuin-sfeer"]{object-position:100% 50%;}
@media (min-width:64em){
.verhaal--paneel .verhaal__beeld img[src*="woord-warmte"]{object-position:72% 8%;translate:3% 3%;}
.verhaal--paneel .verhaal__beeld img[src*="woord-veiligheid"]{object-position:72% 15%;translate:9% 0;}
.verhaal--paneel .verhaal__beeld img[src*="woord-ervaring"]{object-position:72% 25%;translate:10% 0;}
.verhaal--paneel .verhaal__beeld img[src*="woord-spelen"]{object-position:72% 15%;translate:10% 2%;}
.verhaal--paneel .verhaal__beeld img[src*="woord-ontdekken"]{object-position:72% 0%;translate:13% 3%;}
.verhaal--paneel .verhaal__beeld img[src*="woord-warmte"],
.verhaal--paneel .verhaal__beeld img[src*="woord-veiligheid"],
.verhaal--paneel .verhaal__beeld img[src*="woord-ervaring"],
.verhaal--paneel .verhaal__beeld img[src*="woord-spelen"],
.verhaal--paneel .verhaal__beeld img[src*="woord-ontdekken"]{
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%);
mask-image:linear-gradient(90deg,transparent 0,#000 14%);
}
}
@media (min-width:100em){
.verhaal--paneel .verhaal__beeld img[src*="woord-ervaring"]{object-position:72% 30%;}
.verhaal--paneel .verhaal__beeld img[src*="woord-spelen"]{object-position:72% 32%;}
}
@media (min-width:112em){
.verhaal--paneel .verhaal__beeld img[src*="woord-ontdekken"]{object-position:72% 30%;translate:13% 0;}
}
@media (min-width:140em){
.verhaal--paneel .verhaal__beeld img[src*="woord-warmte"]{object-position:72% 18%;}
.verhaal--paneel .verhaal__beeld img[src*="woord-veiligheid"]{object-position:72% 25%;}
.verhaal--paneel .verhaal__beeld img[src*="woord-ervaring"]{object-position:72% 36%;}
.verhaal--paneel .verhaal__beeld img[src*="woord-spelen"]{object-position:72% 38%;}
.verhaal--paneel .verhaal__beeld img[src*="woord-ontdekken"]{object-position:72% 22%;}
}
@media (max-width:63.99em){
.verhaal--paneel .verhaal__beeld img[src*="woord-warmte"]{object-position:88% 30%;}
.verhaal--paneel .verhaal__beeld img[src*="woord-ervaring"],
.verhaal--paneel .verhaal__beeld img[src*="woord-spelen"]{object-position:85% 30%;}
.verhaal--paneel .verhaal__beeld img[src*="woord-groeien"]{object-position:82% 30%;}
}
@media (min-width:64em){
.dagbeeld__foto img[src*="dag-onthaal"]{translate:3% 0;}
.dagbeeld__foto img[src*="dag-spelen"]{translate:2.5% 0;}
.dagbeeld__foto img[src*="dag-slapen"]{translate:3% 0;}
.dagbeeld__foto img[src*="dag-afhalen"]{translate:3.5% 0;}
}
@media (min-width:48em) and (max-width:63.99em){
.dagbeeld__foto img[src*="dag-spelen"]{object-position:95% 38%;}
.dagbeeld__foto img[src*="dag-eten"],
.dagbeeld__foto img[src*="dag-samen"]{object-position:90% 38%;}
}
@media (max-width:47.99em){
.dagbeeld__foto img[src*="dag-onthaal"]{object-position:83% 38%;}
.dagbeeld__foto img[src*="dag-spelen"]{object-position:57% 38%;}
.dagbeeld__foto img[src*="dag-slapen"]{object-position:61% 38%;}
.dagbeeld__foto img[src*="dag-samen"]{object-position:70% 38%;}
.dagbeeld__foto img[src*="dag-afhalen"]{object-position:62% 38%;}
}
.tijdbalk{
position:absolute;display:block;height:3px;overflow:hidden;pointer-events:none;
background:rgba(132,114,64,.26);border-radius:0 3px 3px 0;
opacity:0;transition:opacity .35s var(--soepel);
}
.tijdbalk i{
display:block;width:100%;height:100%;background:var(--goud);border-radius:0 3px 3px 0;
transform:scaleX(0);transform-origin:0 50%;
}
.loopt > .tijdbalk i{animation:tijdbalk var(--leestijd,5s) linear both;}
@keyframes tijdbalk{from{transform:scaleX(0);}to{transform:scaleX(1);}}
.verhaal--paneel .verhaal__stap{position:relative;}
.verhaal--paneel .verhaal__stap > .tijdbalk{left:-2px;right:10px;bottom:0;}
.verhaal--paneel .verhaal__stap.actief > .tijdbalk{opacity:1;}
.sectie--dag .tl > .tijdbalk{left:5.6rem;right:0;bottom:-.7rem;border-radius:3px;}
.sectie--dag .tl > .tijdbalk i{border-radius:3px;}
.sectie--dag.dag--vanzelf .tl.tl-actief > .tijdbalk{opacity:1;}
@media print{.tijdbalk{display:none;}}
@media (min-width:64em){
.verhaal--paneel .verhaal__beeld img[src*="uitgangspunt-"]{
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%);
mask-image:linear-gradient(90deg,transparent 0,#000 14%);
}
}
@media (min-width:64em) and (max-width:74.99em){
.verhaal--paneel .verhaal__beeld img[src*="uitgangspunt-zorg"]{translate:10% 8%;}
.verhaal--paneel .verhaal__beeld img[src*="uitgangspunt-tempo"]{translate:3% 0;}
.verhaal--paneel .verhaal__beeld img[src*="uitgangspunt-kleuterklas"]{translate:2% 0;}
.verhaal--paneel .verhaal__beeld img[src*="uitgangspunt-spelen"],
.verhaal--paneel .verhaal__beeld img[src*="uitgangspunt-ouders"]{translate:8% 0;}
}
@media (min-width:75em){
.verhaal--paneel .verhaal__beeld img[src*="uitgangspunt-"]{
position:absolute;top:0;left:auto;right:max(0px,calc((100% - 2000px) / 2));
width:auto;height:100%;aspect-ratio:1/1;
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 92%,transparent 100%);
mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 92%,transparent 100%);
}
}
@media (min-width:64em){
.verhaal--paneel .verhaal__beeld img[src*="uitgangspunt-zorg"]{
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 92%,transparent 100%),
linear-gradient(180deg,transparent 0,#000 13%);
-webkit-mask-composite:source-in;
mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 92%,transparent 100%),
linear-gradient(180deg,transparent 0,#000 13%);
mask-composite:intersect;
}
}
@media (min-width:75em){
.verhaal--paneel .verhaal__beeld img[src*="uitgangspunt-zorg"]{translate:4% 8%;}
}
@media (min-width:75em) and (max-width:89.99em){
.verhaal--paneel .verhaal__beeld img[src*="uitgangspunt-spelen"],
.verhaal--paneel .verhaal__beeld img[src*="uitgangspunt-ouders"]{translate:6% 0;}
}
@media (max-width:47.99em){
.verhaal--paneel .verhaal__beeld img[src*="uitgangspunt-zorg"]{object-position:78% 30%;}
.verhaal--paneel .verhaal__beeld img[src*="uitgangspunt-leefgroepen"]{object-position:65% 30%;}
.verhaal--paneel .verhaal__beeld img[src*="uitgangspunt-tempo"]{object-position:92% 30%;}
.verhaal--paneel .verhaal__beeld img[src*="uitgangspunt-kleuterklas"]{object-position:88% 30%;}
.verhaal--paneel .verhaal__beeld img[src*="uitgangspunt-ouders"]{object-position:74% 30%;}
}
.verhaal--paneel .verhaal__stap.actief{
background:
linear-gradient(125deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,.08) 42%,rgba(255,255,255,.03) 62%,rgba(255,255,255,.16) 100%),
rgba(252,251,248,.16);
-webkit-backdrop-filter:blur(5px) saturate(1.25);
backdrop-filter:blur(5px) saturate(1.25);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.95),
inset 0 0 0 1px rgba(255,255,255,.6),
inset 0 -14px 22px -18px rgba(132,114,64,.16),
0 0 0 1px rgba(132,114,64,.09),
0 18px 38px -22px rgba(60,60,60,.55),
0 2px 6px -3px rgba(60,60,60,.14);
}
.verhaal--paneel .verhaal__stap.actief .verhaal__woord,
.verhaal--paneel .verhaal__stap.actief .verhaal__nr{color:#6F6034;}
.verhaal--paneel .verhaal__stap.actief .verhaal__woord,
.verhaal--paneel .verhaal__stap.actief .verhaal__nr,
.verhaal--paneel .verhaal__stap.actief .verhaal__zin{
text-shadow:0 0 .14em rgba(250,249,245,.95),0 0 .4em rgba(250,249,245,.9),0 0 .9em rgba(250,249,245,.75);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
.verhaal--paneel .verhaal__stap.actief{background:rgba(250,249,245,.92);}
}
@media (prefers-reduced-transparency:reduce){
.verhaal--paneel .verhaal__stap.actief{
background:rgba(250,249,245,.96);-webkit-backdrop-filter:none;backdrop-filter:none;
}
}
@media print{
.verhaal--paneel .verhaal__stap.actief{background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;}
}
@media (min-width:64em) and (max-width:71.99em){
.verhaal--paneel .verhaal__woord{font-size:1.7rem;}
}
@media (min-width:75em){
.sectie--veiligheid{overflow:clip;}
.veiligheid__beeld{
top:var(--sectie);bottom:1.25rem;width:auto;
left:calc(max(var(--marge),(100% - var(--max)) / 2) + 38rem);
right:max(1rem,calc((100% - var(--max)) / 2 - 7rem));
}
.veiligheid__beeld::after{display:none;}
.veiligheid__beeld .foto{
position:sticky;top:6.25rem;inset-inline:auto;bottom:auto;
width:min(100%,calc((100vh - 8rem) * .8632));height:auto;aspect-ratio:3200/3707;
-webkit-mask-image:
linear-gradient(90deg,#000 0,#000 88%,transparent 100%),
radial-gradient(ellipse 8% 6% at 76.8% 4%,#000 0,#000 70%,transparent 100%),
linear-gradient(180deg,transparent 0,#000 6%,#000 90%,transparent 100%),
linear-gradient(90deg,transparent 0,#000 8%),
radial-gradient(ellipse 12% 13% at 11.4% 21.4%,#000 0,#000 72%,transparent 100%);
-webkit-mask-composite:source-in,source-over,source-in,source-over;
mask-image:
linear-gradient(90deg,#000 0,#000 88%,transparent 100%),
radial-gradient(ellipse 8% 6% at 76.8% 4%,#000 0,#000 70%,transparent 100%),
linear-gradient(180deg,transparent 0,#000 6%,#000 90%,transparent 100%),
linear-gradient(90deg,transparent 0,#000 8%),
radial-gradient(ellipse 12% 13% at 11.4% 21.4%,#000 0,#000 72%,transparent 100%);
mask-composite:intersect,add,intersect,add;
}
.veiligheid__beeld .foto img{object-position:50% 50%;}
}
@media screen and (min-width:48em) and (max-width:63.99em){
.sectie--traject .split,
.sectie--rondleid .split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
.sectie--traject h2,
.sectie--rondleid h2{font-size:4.6vw;}
.sectie--traject h2 br{display:none;}
}
.deel-band{background:var(--creme);padding-top:0;}
.deel{
display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1.2rem,3vw,2rem);
max-width:62rem;margin-inline:auto;
border:1px solid rgba(132,114,64,.22);border-radius:var(--radius);
background:linear-gradient(120deg,rgba(132,114,64,.06) 0%,rgba(132,114,64,.02) 50%,rgba(250,249,245,0) 100%),var(--creme);
padding:clamp(1.5rem,3.4vw,2.4rem) clamp(1.4rem,3.6vw,2.8rem);
}
@media (min-width:64em){
.deel{grid-template-columns:minmax(0,1fr) minmax(0,24rem);align-items:center;gap:2.6rem;}
}
.deel__label{
display:flex;align-items:center;gap:.5rem;margin-bottom:.45rem;
font-family:var(--sans);font-weight:700;font-size:.68rem;letter-spacing:.2em;
text-transform:uppercase;color:var(--goud-tekst);
}
.deel__label .hartje{margin:0;}
.deel__label .hartje svg{width:.85rem;height:.85rem;}
.deel__titel{font-size:clamp(1.35rem,1.1rem + 1.1vw,2rem);line-height:1.15;margin:0 0 .45em;}
.deel__tekst p{color:var(--inkt-zacht);font-size:.97rem;margin:0;max-width:46ch;}
.deel__knoppen{display:flex;flex-wrap:wrap;gap:.6rem;align-content:center;position:relative;}
.deel__knop{
display:inline-flex;align-items:center;gap:.55rem;min-height:2.75rem;
padding:.55rem 1.05rem .55rem .9rem;border-radius:999px;
border:1px solid rgba(132,114,64,.42);background:transparent;color:var(--goud-tekst);
font-family:var(--sans);font-weight:700;font-size:.8rem;letter-spacing:.04em;
text-decoration:none;cursor:pointer;
transition:background .4s var(--soepel),color .4s var(--soepel),border-color .4s var(--soepel);
}
.deel__knop svg{width:1.15rem;height:1.15rem;flex:none;}
.deel__knop:hover{background:var(--goud-tekst);border-color:var(--goud-tekst);color:var(--creme);}
.deel__knop:focus-visible{outline:2px solid var(--goud);outline-offset:3px;}
.deel__knop[hidden]{display:none;}
.deel__knop--eigen{background:var(--goud-tekst);border-color:var(--goud-tekst);color:var(--creme);}
.deel__knop--eigen:hover{background:var(--antraciet);border-color:var(--antraciet);}
.deel__melding{
flex-basis:100%;min-height:1.2em;font-size:.82rem;color:var(--goud-tekst);font-weight:700;
}
.deel__melding:empty{min-height:0;}
@media print{.deel-band{display:none;}}
h1,h2,h3,.deel__titel,.volgende__titel{text-wrap:balance;}
.cijfer__waarde,.feit__waarde,.kaart__nr,.reg-nr,.reg-toc__nr,.dag__uur{
font-variant-numeric:lining-nums;
}
.link--tekst{
display:inline;font-size:inherit;font-weight:inherit;letter-spacing:inherit;
text-transform:none;padding-bottom:0;
text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;
text-decoration-color:rgba(132,114,64,.5);
transition:text-decoration-color .3s var(--soepel),color .3s var(--soepel);
}
.link--tekst::after{display:none;}
.link--tekst:hover{color:var(--antraciet);text-decoration-color:var(--goud);}
@media print{
main a.link--tekst[href^="http"]::after{display:inline;}
}
@media (min-width:64em){
.nav .knop--lijn.nav__knop-tweede{background:rgba(250,249,245,.88);}
.nav .knop--lijn.nav__knop-tweede:hover{background:var(--goud-tekst);}
}
@media (max-width:63.99em){
.nav{visibility:hidden;transition:transform .6s var(--soepel),visibility 0s linear .6s;}
.site-kop.is-open .nav{visibility:visible;transition:transform .6s var(--soepel),visibility 0s;}
}
.kruimels a{display:inline-block;padding-block:.4rem;margin-block:-.4rem;}
@media (min-width:48em){
.grid-3:has(> :last-child:nth-child(3)){grid-template-columns:repeat(3,minmax(0,1fr));}
.grid-4:has(> :last-child:nth-child(4)),
.grid-4:has(> :last-child:nth-child(8)){grid-template-columns:repeat(2,minmax(0,1fr));}
.cijfers:has(> :last-child:nth-child(4)){grid-template-columns:repeat(4,minmax(0,1fr));}
}
@media (min-width:64em){
.grid-4:has(> :last-child:nth-child(4)),
.grid-4:has(> :last-child:nth-child(8)){grid-template-columns:repeat(4,minmax(0,1fr));}
}
.waarden{display:flex;flex-wrap:wrap;justify-content:center;}
.waarden > *{flex:0 0 calc((100% - 4 * 1.5rem) / 5);min-width:0;}
@media (max-width:63.99em){.waarden > *{flex-basis:calc((100% - 2 * 1.5rem) / 3);}}
@media (max-width:47.99em){.waarden > *{flex-basis:calc((100% - 1.1rem) / 2);}}
#sluitingsdagen .gegevens > div{grid-template-columns:1fr;gap:.2rem;padding:.85rem 0;}
.site-voet__logo{filter:none;}
.merk-lockup__slagzin text{filter:none;}
@media (min-width:48em){
.hero:has(img[src*="hero-laakdal"])::before{
background:
linear-gradient(100deg,rgba(250,249,245,.96) 0%,rgba(250,249,245,.9) 40%,rgba(250,249,245,.62) 66%,rgba(250,249,245,.22) 86%,rgba(250,249,245,.1) 100%),
linear-gradient(to top,rgba(250,249,245,.9) 0%,rgba(250,249,245,.2) 38%,rgba(250,249,245,0) 70%);
}
}
.doorgeef{justify-content:space-between;}
.doorgeef .troef{margin:0;}
.doorgeef__knop{margin-top:1.6rem;align-self:flex-start;}