@font-face{font-family:"DIN Condensed";src:local("DIN Condensed Bold"),local("DINCondensed-Bold"),url("fonts/DINCondensed-Bold.woff2") format("woff2"),url("fonts/DINCondensed-Bold.woff") format("woff");font-weight:700;font-display:swap}
:root{--titel:clamp(2.2rem,5vw,3.2rem);--kop:"DIN Condensed","Barlow Condensed","Arial Narrow",sans-serif;--or:#f06931;--gr:#045e44;--cr:#f4f3ee;--pk:#db81b4;--tx:#fff}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:130px}
body{font-family:"Abel",system-ui,sans-serif;font-weight:400;color:var(--gr);background:var(--cr);font-size:1.15rem;line-height:1.5}
h1,h2,h3,.logo{font-family:var(--kop);font-weight:700;text-transform:uppercase;line-height:1.05}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
:focus-visible{outline:3px solid var(--gr);outline-offset:3px}
header{position:sticky;top:0;z-index:5;background:var(--or);color:var(--cr);display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;align-items:center;padding:2rem 5vw;justify-content:center;align-items:center}
.logo{font-size:var(--titel);text-decoration:none}
nav{display:flex;flex-wrap:wrap;gap:.3rem 1.2rem;font-size:1rem}
nav a{text-decoration:none;padding:.2rem 0}nav a:hover{text-decoration:underline}
section{padding:3.5rem 5vw}
.wrap{max-width:1100px;margin:0 auto;display:grid;gap:2rem 4rem;align-items:center}
.hero .wrap{grid-template-columns:1.1fr 1fr}
h1{font-size:var(--titel);margin-bottom:1rem}
.pijl{position:relative;padding-left:1.8rem;margin:1rem 0}.pijl::before{content:"";position:absolute;left:0;top:0;bottom:0;width:14px;background:linear-gradient(to top right,transparent calc(50% - 1.5px),var(--or) calc(50% - 1.5px) calc(50% + 1.5px),transparent calc(50% + 1.5px)) top/100% 50% no-repeat,linear-gradient(to bottom right,transparent calc(50% - 1.5px),var(--or) calc(50% - 1.5px) calc(50% + 1.5px),transparent calc(50% + 1.5px)) bottom/100% 50% no-repeat}
.pijl li{list-style:none;margin:.2rem 0}
.slot{font-size:1.6rem;margin-top:1rem;color:var(--gr)}
.roze{color:var(--pk)}
.team{background:var(--gr);color:var(--cr)}
.team .wrap{grid-template-columns:1fr 1fr}
.team h2{color:var(--pk);font-size:var(--titel);margin-bottom:1rem}

.team .slot{color:var(--cr)}
.team a{display:inline-block;margin-top:1.5rem}
.kracht{background:var(--or);color:var(--cr);padding-bottom:0}
.kracht .wrap{text-align:left}
.kracht h2{font-size:var(--titel);color:#fff}
.kracht a{color:var(--gr);font-size:1.3rem}
.hands{margin:2rem -5vw 0;width:calc(100% + 10vw);max-width:none}
.contact{background:var(--pk);text-align:center;padding:2rem 5vw}
.contact b{display:block;font-family:var(--kop);font-weight:700;font-size:clamp(1.4rem,4vw,2rem)}
.contact a,.foot a{text-decoration:none}
.foot{background:var(--or);text-align:center;padding:1.6rem 5vw;font-size:1.3rem}
.foot b{font-family:var(--kop);font-weight:700}
@media(max-width:760px){.hero .wrap,.team .wrap{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

section{position:relative;overflow:hidden}
.wrap,.hands{position:relative;z-index:1}
.kr{position:absolute;z-index:0;pointer-events:none}
.k1{left:0;top:0;width:100%;height:100%;opacity:.9}
.k2{right:0;top:0;width:32%;height:75%}
.k3{left:0;top:0;width:100%;height:100%}
.pijlk{width:90px;height:20px;vertical-align:middle;margin-right:.8rem;color:var(--or);flex:none}
.team .pijlk{color:var(--or)}
.slot{display:flex;align-items:center}
.elleboog{position:absolute;left:5vw;top:.5rem;width:140px;color:var(--gr);z-index:1}
.kracht .wrap{padding-top:3.5rem}
.kracht a::after{content:"";display:inline-block;width:70px;height:18px;margin-left:.7rem;vertical-align:middle;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 18'%3E%3Cpath d='M2 9H64M54 2l10 7-10 7' fill='none' stroke='%23045e44' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat}
@media(max-width:760px){.pijlk{width:50px}.elleboog{width:90px}.k2{width:45%}}

:root{--L:max(5%,calc((100% - 1100px)/2));--B:min(90%,1100px)}
@media(max-width:760px){:root{--L:5%;--B:90%}}
section{padding-left:0;padding-right:0}
.wrap{width:var(--B);max-width:none;margin-left:var(--L);margin-right:0}
.hands{width:var(--B);max-width:none;margin:2rem 0 0 var(--L)}
.contact,.foot{padding-left:var(--L);padding-right:max(0px,calc(100% - var(--L) - var(--B)))}
.elleboog{left:var(--L)}

.contact{text-align:right}
.foot{text-align:left}

.k1{left:var(--L);width:var(--B)}
.k2{right:auto;left:calc(var(--L) + var(--B)*.68);width:calc(var(--B)*.32)}
.werk{padding:0;background:linear-gradient(var(--pk) 4.02%,var(--cr) 4.02% 13.56%,var(--gr) 13.56%)}
.canvas{position:relative;width:var(--B);margin-left:var(--L);aspect-ratio:902/1195;container-type:inline-size;overflow:hidden}
.kop,.stap{display:contents}
.canvas .k3{left:0;top:13.56%;width:100%;height:86.44%}
.canvas h2,.canvas h3,.canvas p,.canvas .deur,.stap img{position:absolute;z-index:1;margin:0;left:calc(var(--x)*100%/902);top:calc(var(--y)*100%/1195)}
.canvas h2{color:var(--or);font-size:5.6cqw;white-space:nowrap;top:calc(var(--y)*100%/1195 - .17em)}
.canvas h3{color:var(--cr);font-size:4.4cqw;text-transform:none;white-space:nowrap;top:calc(var(--y)*100%/1195 - .17em)}
.canvas h3 span{color:var(--or)}
.canvas p{color:var(--cr);font-size:2cqw;line-height:1.15;white-space:nowrap;top:calc(var(--y)*100%/1195 - .1em)}
.canvas .deur,.stap img{width:calc(var(--w)*100%/902);max-width:none;height:auto}
.deur{background:linear-gradient(var(--pk) 14.3%,var(--cr) 14.3%)}
@media(max-width:760px){
.werk{background:var(--gr)}
.canvas{width:100%;margin:0;aspect-ratio:auto;container-type:normal;overflow:visible}
.canvas .k3{display:none}
.kop{display:block;background:var(--cr);padding:0 5% 1.5rem;text-align:center}
.stap{display:block;padding:1.5rem 5% 0;position:relative}
.stap:last-child{padding-bottom:2rem}
.canvas h2,.canvas h3,.canvas p,.canvas .deur,.stap img{position:static}
.canvas .deur{width:260px;margin:0 auto 1rem}
.canvas h2{font-size:var(--titel);white-space:normal}
.canvas h3{font-size:2.2rem;white-space:normal}
.canvas p{font-size:1.2rem;white-space:normal}
.stap img{width:100%;max-width:340px;margin:1rem auto 0}
}
@media(max-width:760px){header{padding:1rem 5vw;text-align:center}nav{justify-content:center}html{scroll-padding-top:150px}}

/* Collages (transparante afbeeldingen) op de plek uit het ontwerp – coördinaten in ontwerp-pixels van 902 breed */
html,body{overflow-x:clip}
.canvas .deur{background:none}
.canvas h2,.canvas h3,.canvas p{z-index:2}
@media(min-width:761px){
.hero,.team{overflow:visible}
.hero{min-height:calc(var(--B)*325/902)}
.team{min-height:calc(var(--B)*393/902)}
.kracht{min-height:calc(var(--B)*397/902)}
.hero-img,.team-img{position:absolute;max-width:none;height:auto;z-index:3}
.hero-img{left:calc(var(--L) + var(--B)*578/902);top:calc(var(--B)*22/902);width:calc(var(--B)*357/902)}
.team-img{left:calc(var(--L) - var(--B)*68/902);top:calc(var(--B)*-51/902);width:calc(var(--B)*415/902)}
.hero .wrap,.team .wrap{position:static}
.hero .wrap>div,.team .wrap>div{position:relative;z-index:4}
.hero .wrap>div{grid-column:1}
.team .wrap>div{grid-column:2}
.hands{width:calc(var(--B)*888/902)}
}
@media(max-width:760px){.hero-img,.team-img{width:100%;max-width:380px;margin:0 auto}}
@media(max-width:760px){.stap img[src*="vraagteken"]{max-width:160px}}

/* Aanpassingen ronde 2 */
.kracht a::after{content:none}
.kracht{padding-top:2rem;min-height:0;--hh:calc(var(--B)*888/902*119/2167);background:linear-gradient(to top,#f8f9fa var(--hh),var(--or) var(--hh))}
.kracht .wrap{padding-top:0}
.hands{margin-top:1rem}
@media(min-width:761px){
.team .wrap{grid-template-columns:36% 1fr;column-gap:2.5rem}
.team h2{white-space:nowrap}
}
@media(max-width:760px){.kracht{background:var(--or)}}
.kracht .wrap{row-gap:.4rem}.kracht h2{margin-bottom:.4rem}

/* Aanpassingen ronde 3 */
.pijl{padding-left:0}.pijl::before{content:none}
.kracht{background:var(--or)}
.kracht .wrap{row-gap:.9rem}
.kracht .wrap>*{margin:0}
.werk{background:linear-gradient(var(--cr) 13.56%,var(--gr) 13.56%)}
.team .slot{display:block}
.team .slot .pijlk{display:inline-block;vertical-align:middle;margin-top:-.15em}

/* Aanpassingen ronde 4 */
.werk{background:linear-gradient(var(--pk) 2.34%,var(--cr) 2.34% 13.56%,var(--gr) 13.56%)}
.team .slot{display:flex;align-items:flex-start}
.team .slot .pijlk{margin-top:.38em}
.kracht .wrap>p:first-child{margin-bottom:.9rem}
@media(min-width:761px){
.hero .wrap{grid-template-columns:62% 1fr}
.hero .pijl li:first-child{white-space:nowrap}
.hands{margin-left:calc(var(--L) + var(--B)*14/902)}
}

/* Aanpassingen ronde 5 */
.team a{font-size:1.3rem}
.foot{font-size:1.15rem;text-align:right}
.foot b{font-size:clamp(1.4rem,4vw,2rem)}
@media(min-width:761px){
.contact{--pb:calc(var(--B)*28/902);padding-top:max(2rem,var(--pb));padding-bottom:max(0px,calc(2rem - var(--pb)))}
}
@media(min-width:761px){.hero-img{top:calc(3.5rem + .1em)}}
@media(min-width:761px){.hero{min-height:calc(3.5rem + .1em + var(--B)*357/902*854/871 - 2.5rem)}}

/* Aanpassingen ronde 6 */
.contact .fit{display:inline-block}
@media(min-width:761px){
.contact .fit p,.contact .fit b{white-space:nowrap}
.contact .fit b{text-align:left}
.team-img{left:calc(var(--L) - var(--B)*116.1/902);width:calc(var(--B)*463.1/902)}
.team{min-height:calc(var(--B)*450/902)}
}
@media(min-width:761px){.contact .fit b{display:inline-block}}

/* Mobiele versie – aanpassingen */
br.mob{display:none}
.slot{align-items:flex-start}.slot .pijlk{margin-top:.38em}
@media(max-width:760px){
br.mob{display:inline}
header{justify-content:flex-start;text-align:left}
nav{justify-content:flex-start}
.hero{overflow:visible}
.team{overflow:visible;padding-top:0}
.team-img{position:relative;z-index:3;margin-top:-4.5rem}
.contact{text-align:left;padding-top:2rem;padding-bottom:2rem}
.contact .fit p{white-space:nowrap;font-size:min(1.15rem,4vw)}.kracht h2{font-size:min(var(--titel),8.5vw)}
.canvas{display:flex;flex-direction:column}
.kop{display:contents}
.canvas h2{order:0;background:var(--cr);text-align:left;padding:1.5rem 5%;margin:0}
.stap{order:3}
.stap:nth-child(3){order:1}
.canvas .deur{order:2;margin:1.5rem auto 0}
}
@media(max-width:760px){.wrap{grid-template-columns:minmax(0,1fr)}}
@media(max-width:760px){.werk{background:var(--gr)}}
picture{display:contents}
@media(max-width:760px){.team{padding-top:2.5rem}.team-img{margin-top:0}}
@media(max-width:760px){.team{padding-top:0}.team-img{margin-top:-2.5rem}.hero{padding-bottom:3.5rem}}
@media(max-width:760px){.team-img{margin-top:0;top:-2.5rem;margin-bottom:-2.5rem}}
@media(max-width:760px){.team-img{align-self:start}}
picture source{display:none}