/* =========================================================
   ALGEMEEN — nodig voor alle blokken, 1x globaal laden
   ========================================================= */
@font-face{font-family:"Gilroy";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/gilroy/gilroy-regular.woff2") format("woff2")}
@font-face{font-family:"Gilroy";font-style:normal;font-weight:300;font-display:swap;src:url("../fonts/gilroy/gilroy-light.woff2") format("woff2")}
@font-face{font-family:"Gilroy";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/gilroy/gilroy-medium.woff2") format("woff2")}
@font-face{font-family:"Gilroy";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/gilroy/gilroy-bold.woff2") format("woff2")}
@font-face{font-family:"Gilroy";font-style:normal;font-weight:900;font-display:swap;src:url("../fonts/gilroy/gilroy-heavy.woff2") format("woff2")}

body{margin:0}
body:not(.wp-admin){font-family:"Gilroy","Open Sans","Arial"}
@media(min-width: 920px){body{overflow-x:hidden}}

@media(max-width: 1150px){main .hidden__mobile{display:none !important}}
@media(min-width: 1150px){main .hidden__desktop{display:none !important}}

/* Gedeelde content-container (fase 2) — max-breedte 1280px, gecentreerd.
   Gebruikt door header, hero_intro-tekst, image_and_text en footer. */
.container{width:100%;max-width:80rem;margin:0 auto;padding:0 2rem;box-sizing:border-box}
@media(max-width: 640px){.container{padding:0 1.25rem}}

/* =========================================================
   BLOK: hero_picture_only
   ========================================================= */
.hero__fullwidth--wrapper{position:relative;margin-bottom:.975rem}
.hero__fullwidth--wrapper h1{line-height:1}
@media(max-width: 1150px){
	.hero__fullwidth--wrapper .hero__content{position:absolute;top:38%;left:50%;transform:translate(-50%, -50%)}
	.hero__fullwidth--wrapper .desktop{display:none}
	.hero__fullwidth--wrapper h1{font-size:88px;margin-bottom:0;line-height:1}
	.hero__fullwidth--wrapper h2{font-weight:400;font-style:normal;font-size:24px;line-height:29px;margin-top:0;color:#fff;text-shadow:0 4px 4px rgba(0,0,0,.25)}
	.hero__fullwidth--wrapper h2 em{font-style:normal;color:#ffe500}
}
@media screen and (min-width: 2000px){.hero__fullwidth--wrapper h1{font-size:160px !important}}
@media(min-width: 1150px){
	.hero__fullwidth--wrapper h1{font-size:145px;margin-bottom:0}
	.hero__fullwidth--wrapper .mobile{display:none}
	.hero__fullwidth--wrapper h2{font-size:48px;margin-top:0;color:#fff;font-weight:400}
	.hero__fullwidth--wrapper em{color:#ffe500;font-style:normal}
}
.hero__fullwidth--wrapper h1{font-weight:700;font-family:"Gilroy","Open Sans","Arial";color:#fff}
.hero__fullwidth--wrapper h1 s{text-decoration:none}
.hero__fullwidth--wrapper h1 s em{color:#ffe500}
.hero__fullwidth--wrapper h1 em{font-style:normal}
.hero__fullwidth--wrapper h1 strong{font-weight:700}
@media(max-width: 1150px){.hero__fullwidth--wrapper h1 strong{color:#ffe500}}
.hero__fullwidth--wrapper .hero__content{position:absolute}
@media(min-width: 1150px){.hero__fullwidth--wrapper .hero__content{top:-50px;left:20px}}
.hero__fullwidth--wrapper img{width:100%;object-fit:cover;max-height:90vh}
@media(max-width: 780px){.hero__fullwidth--wrapper img{height:85vh !important}}
@media screen and (max-width: 600px){.hero__fullwidth--wrapper img{max-height:80vh}}
.hero__fullwidth--wrapper #arrow__down--hero{content:"";position:absolute;bottom:1.5625rem;left:50%;transform:translateX(-50%);background-image:url(../images/arrow-down.svg);background-size:4.8125rem;background-repeat:no-repeat;width:4.8125rem;height:4.8125rem;z-index:5;animation:bounce 1.5s ease-in-out infinite}
@media(max-width: 780px){.hero__fullwidth--wrapper #arrow__down--hero{bottom:2.5rem !important}}
@keyframes bounce{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-0.625rem)}}

/* =========================================================
   BLOK: hero_intro (fase 2)
   ========================================================= */
.hero-intro{
	position:relative;
	min-height:44rem;
	display:flex;
	align-items:flex-end;
	background-size:cover;
	background-position:center;
	background-color:#121212;
	overflow:hidden;
}
.hero-intro__overlay{
	position:absolute;
	inset:0;
	background:linear-gradient(to top, rgba(18,18,18,.95) 0%, rgba(18,18,18,.55) 45%, rgba(18,18,18,.15) 100%);
}
.hero-intro__content{
	position:relative;
	z-index:1;
	width:100%;
	max-width:80rem;
	margin:0 auto;
	padding-bottom: 50px;
	box-sizing:border-box;
}
.hero-intro__title{
	font-family:"Gilroy","Open Sans","Arial";
	font-weight:700;
	font-size:3.5rem;
	line-height:1.05;
	text-transform:uppercase;
	color:#fff;
	max-width:56rem;
	margin:0 0 1.25rem;
}
.hero-intro__title .yellow{color:#ffe600}
.hero-intro__subtitle{
	font-family:"Gilroy","Open Sans","Arial";
	font-weight:400;
	font-size:1.125rem;
	line-height:1.5;
	color:#e6e6e6;
	max-width:34rem;
	margin:0 0 2rem;
}
.hero-intro__button{
	display:inline-flex;
	align-items:center;
	gap:.5rem;
	background:#ffe600;
	color:#1a1a1a;
	font-family:"Gilroy","Open Sans","Arial";
	font-weight:700;
	font-size:.9375rem;
	letter-spacing:.02em;
	text-decoration:none;
	padding:1rem 1.75rem;
}
.hero-intro__secondary-link{
	display:block;
	margin-top:1.25rem;
	font-family:"Gilroy","Open Sans","Arial";
	font-weight:700;
	font-size:.875rem;
	letter-spacing:.02em;
	color:#fff;
	text-decoration:none;
}
.hero-intro__secondary-link:hover{color:#ffe600}

@media(max-width: 640px){
	.hero-intro{min-height:38rem}
	.hero-intro__content{padding:2rem 1.25rem}
	.hero-intro__title{font-size:2.5rem}
	.hero-intro__subtitle{font-size:1rem}
}

/* =========================================================
   BLOK: image_and_text
   ========================================================= */
.image__text-block-eyebrow{
	font-family:"Gilroy","Open Sans","Arial";
	font-weight:700;
	font-size:.75rem;
	letter-spacing:.06em;
	text-transform:uppercase;
	/* padding-left:2.125rem; */
	margin:0 0 .75rem;
}
.image__text-block .image__text-block-content-text{padding: 60px; padding-top:3rem; }
.image__text-block{
	width:100%;
	max-width:80rem;
	margin:0 auto;
	height:100%;
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
	box-sizing:border-box;
	margin-top: 20px;
}

@media(min-width: 1150px){.image__text-block .image__text-block-image{flex-basis:49.6%}}
@media(max-width: 1150px){.image__text-block .image__text-block-image{flex-basis:100%}}
.image__text-block .image__text-block-image img{width:100%;object-fit:cover;height:100%;max-height:38.9375rem}
/* Losse, compacte CTA-knop (fase 2) — vervangt de te grote fase 1-knop
   die hier per ongeluk werd hergebruikt (button__group--wrapper). */
.image__text-block-cta{
	display:inline-flex;
	align-items:center;
	align-self:flex-start;
	gap:.5rem;
	margin:1.5rem 0 0 2.125rem;
	margin-top:auto;
	background:#1a1a1a;
	color:#fff;
	font-family:"Gilroy","Open Sans","Arial";
	font-weight:700;
	font-size:.9375rem;
	letter-spacing:.02em;
	text-transform:uppercase;
	text-decoration:none;
	padding:1rem 1.75rem;
	transition:.3s background;
	margin-bottom: 30px;
}
.image__text-block-cta:hover{background:#333}
.image__text-block .image__text-block-content{background:#ffe500;flex-basis:49.7%;display:flex;flex-direction:column;flex-wrap:nowrap;max-height:38.9375rem}
@media(min-width: 780px){.image__text-block .image__text-block-content-text{flex-basis:100%}}
@media(min-width: 2200px){
	.image__text-block .image__text-block-content h2,.image__text-block .image__text-block-content p{flex-basis:100%}
}
@media(max-width: 1150px){.image__text-block .image__text-block-content{flex-basis:100%}}
.image__text-block .image__text-block-content h2{font-size:2.125rem;line-height:1.15;font-family:"Gilroy","Open Sans","Arial";font-weight:700;text-transform:uppercase;margin-top:0;margin-bottom:0}
.image__text-block .image__text-block-content p{font-size:1rem;line-height:1.5;font-family:"Gilroy","Open Sans","Arial";font-weight:400;padding-top:0;margin-top:1rem;max-width:37.125rem}

/* =========================================================
   BLOK: tegel_grid (fase 2 herontwerp uit Figma — 4x3 grid)
   ========================================================= */
/* Let op: bewust NIET .block__container hergebruikt — die naam
   bestond al in het thema (fase 1-markup) en iets daarin gaf 'm
   kennelijk net een andere breedte dan .image__text-block, vandaar
   dat de grid vorige keer net iets uitstak. Eigen, unieke klasse. */
.tegel-grid-wrapper{margin-top:.5rem}
.tegel-grid__inner{width:100%;max-width:80rem;margin:0 auto;box-sizing:border-box}
.tegel-grid{
	display:grid;
	grid-template-columns:repeat(4, 1fr);
	gap:.5rem;
}
.tegel{
	position:relative;
	aspect-ratio:1/1;
	overflow:hidden;
	display:block;
	text-decoration:none;
	box-sizing:border-box;
}
.tegel--image img{width:100%;height:100%;object-fit:cover;display:block}
.tegel--text{padding:1.5rem 1.75rem}
.tegel--zwart{background:#121212;color:#fff}
.tegel--grijs{background:#6b6b6b;color:#fff}
.tegel--geel{background:#ffe600;color:#1a1a1a}
.tegel__label{
	position:absolute;
	top:1.5rem;
	left:1.75rem;
	font-family:"Gilroy","Open Sans","Arial";
	font-weight:700;
	font-size:.6875rem;
	letter-spacing:.05em;
	text-transform:uppercase;
	opacity:.65;
	margin:0;
	transition:opacity .25s ease;
}
.tegel__heading{
	position:absolute;
	left:1.75rem;
	right:1.75rem;
	bottom:1.5rem;
	font-family:"Gilroy","Open Sans","Arial";
	font-weight:700;
	font-size:1.875rem;
	line-height:1.15;
	text-transform:uppercase;
	margin:0;
	transition:opacity .25s ease;
}
.tegel__accent{color:#ffe600}
.tegel--geel .tegel__accent{color:#1a1a1a;text-decoration:underline}

/* Hover-tegels: op hover verdwijnen label/titel en verschijnt de
   hover-tekst met knop (zelfde interactie als de oude tegel-grid). */
.tegel--has-hover .tegel__hover{
	position:absolute;
	inset:0;
	padding:1.5rem 1.75rem;
	box-sizing:border-box;
	display:flex;
	flex-direction:column;
	justify-content:space-between;
	opacity:0;
	transition:opacity .25s ease;
}
.tegel--has-hover:hover .tegel__label,
.tegel--has-hover:hover .tegel__heading{opacity:0}
.tegel--has-hover:hover .tegel__hover{opacity:1}
.tegel__hover-text{
	font-family:"Gilroy","Open Sans","Arial";
	font-weight:400;
	font-size:.9375rem;
	line-height:1.5;
	margin:0;
}
.tegel__hover-button{
	display:inline-flex;
	align-self:flex-start;
	align-items:center;
	gap:.5rem;
	font-family:"Gilroy","Open Sans","Arial";
	font-weight:700;
	font-size:.8125rem;
	letter-spacing:.02em;
	text-transform:uppercase;
	padding:.75rem 1.25rem;
	background:#1a1a1a;
	color:#fff;
}
.tegel--zwart .tegel__hover-button{background:#ffe600;color:#1a1a1a}
.tegel--grijs .tegel__hover-button,
.tegel--geel .tegel__hover-button{background:#1a1a1a;color:#fff}

@media(max-width: 920px){
	.tegel-grid{grid-template-columns:repeat(2, 1fr)}
	.tegel__heading{font-size:2.5rem}
}
@media(max-width: 480px){
	.tegel-grid{grid-template-columns:1fr}
}
/* Op touch-apparaten (geen echte hover) toont blocks.js de hover-content
   via een tap in plaats van via :hover — zie .tegel--revealed hieronder. */
@media(hover: none){
	.tegel--has-hover.tegel--revealed .tegel__label,
	.tegel--has-hover.tegel--revealed .tegel__heading{opacity:0}
	.tegel--has-hover.tegel--revealed .tegel__hover{opacity:1}
}

/* =========================================================
   BLOK: drie_redenen
   ========================================================= */
.drie-redenen{padding:4rem 0}
.drie-redenen__inner{width:100%;max-width:80rem;margin:0 auto;padding:0;box-sizing:border-box}
.drie-redenen__eyebrow{
	font-family:"Gilroy","Open Sans","Arial";
	font-weight:700;
	font-size:.75rem;
	letter-spacing:.06em;
	text-transform:uppercase;
	margin:0 0 .75rem;
}
.drie-redenen__title{
	font-family:"Gilroy","Open Sans","Arial";
	font-weight:700;
	font-size:2.125rem;
	line-height:1.15;
	text-transform:uppercase;
	margin:0 0 2.5rem;
}
.drie-redenen__accent{color:#ffe600}
.drie-redenen__grid{
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	gap:2rem;
}
.drie-reden{display:flex;flex-direction:column;
background-color: #F4F3F0;}
.drie-reden__media{position:relative;margin:0 0 1.5rem;overflow:visible}
.drie-reden__media img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.drie-reden__number{
	position:absolute;
	top:1rem;
	left:1rem;
	width:2.5rem;
	height:2.5rem;
	border-radius:50%;
	background:#ffe600;
	color:#1a1a1a;
	font-family:"Gilroy","Open Sans","Arial";
	font-weight:700;
	font-size:1.125rem;
	display:flex;
	align-items:center;
	justify-content:center;
	z-index:1;
}
.drie-reden__heading{
	font-family:"Gilroy","Open Sans","Arial";
	font-weight:700;
	font-size:1.0625rem;
	line-height:1.3;
	text-transform:uppercase;
	margin:0 0 .5rem;
	padding-left: 20px;
	padding-top: 10px;
}
.drie-reden__text{
	font-family:"Gilroy","Open Sans","Arial";
	font-weight:400;
	font-size:.9375rem;
	line-height:1.5;
	margin:0 0 1rem;
	flex-grow:1;
	padding-left: 20px;
	padding-top: 10px;
}
.drie-reden__link{
	display:inline-flex;
	align-items:center;
	gap:.375rem;
	font-family:"Gilroy","Open Sans","Arial";
	font-weight:700;
	font-size:.8125rem;
	letter-spacing:.02em;
	text-transform:uppercase;
	color:#1a1a1a;
	text-decoration:none;
	padding-left: 20px;
	padding-bottom: 15px;
}
.drie-reden__link:hover{color:#666}

@media(max-width: 920px){
	.drie-redenen{padding:3rem 0}
	.drie-redenen__title{font-size:1.75rem}
	.drie-redenen__grid{grid-template-columns:1fr;gap:2.5rem}
}

/* =========================================================
   BLOK: statement
   ========================================================= */
.statement{padding:5rem 0}
.statement__inner{width:100%;max-width:56rem;margin:0 auto;padding:0 2rem;box-sizing:border-box}
.statement__text{
	font-family:"Gilroy","Open Sans","Arial";
	font-weight:700;
	font-size:2.5rem;
	line-height:1.25;
	text-transform:uppercase;
	text-align:center;
	color:#1a1a1a;
	margin:0;
}
.statement__accent{color:#ffe600}

@media(max-width: 640px){
	.statement{padding:3rem 0}
	.statement__text{font-size:1.5rem}
}

/* =========================================================
   BLOK: vijf_plekken
   ========================================================= */
.vijf-plekken{background:#121212;color:#fff;padding:4rem 0}
.vijf-plekken__inner{width:100%;max-width:80rem;margin:0 auto;padding:0 2rem;box-sizing:border-box}
.vijf-plekken__title{
	font-family:"Gilroy","Open Sans","Arial";
	font-weight:700;
	font-size:2.125rem;
	line-height:1.15;
	text-transform:uppercase;
	color:#fff;
	margin:0 0 2.5rem;
}
.vijf-plekken__accent{color:#ffe600}
.vijf-plekken__list{display:flex;flex-direction:column}
.vijf-plek{
	display:flex;
	align-items:flex-start;
	gap:2rem;
	padding:1.5rem 0;
	border-top:1px solid rgba(255,255,255,.15);
}
.vijf-plek:last-child{border-bottom:1px solid rgba(255,255,255,.15)}
.vijf-plek__heading-col{
	flex:0 0 40%;
	display:flex;
	align-items:flex-start;
	gap:1rem;
}
.vijf-plek__number{
	font-family:"Gilroy","Open Sans","Arial";
	font-weight:700;
	font-size:1.25rem;
	line-height:1.3;
	color:#ffe600;
	flex-shrink:0;
}
.vijf-plek__label{
	font-family:"Gilroy","Open Sans","Arial";
	font-weight:700;
	font-size:.6875rem;
	letter-spacing:.05em;
	text-transform:uppercase;
	color:#fff;
	opacity:.6;
	margin:0 0 .25rem;
}
.vijf-plek__heading{
	font-family:"Gilroy","Open Sans","Arial";
	font-weight:700;
	font-size:1.0625rem;
	line-height:1.3;
	text-transform:uppercase;
	color:#fff;
	margin:0;
}
.vijf-plek__text{
	flex:1;
	font-family:"Gilroy","Open Sans","Arial";
	font-weight:400;
	font-size:.9375rem;
	line-height:1.5;
	color:#ccc;
	margin:0;
}

@media(max-width: 780px){
	.vijf-plekken{padding:3rem 0}
	.vijf-plekken__title{font-size:1.5rem;margin-bottom:1.5rem}
	.vijf-plek{flex-direction:column;gap:.5rem;padding:1.25rem 0;border-top:none}
	.vijf-plek:last-child{border-bottom:none}
	.vijf-plek__heading-col{flex-basis:auto}
}

/* =========================================================
   BLOK: route_planner
   ========================================================= */
.route-planner{padding:4rem 0}
.route-planner__inner{width:100%;max-width:80rem;margin:0 auto;padding:0 2rem;box-sizing:border-box}
.route-planner__title{
	font-family:"Gilroy","Open Sans","Arial";
	font-weight:700;
	font-size:2.75rem;
	line-height:1.15;
	text-transform:uppercase;
	color:#1a1a1a;
	max-width:44rem;
	margin:0 0 1rem;
}
.route-planner__accent{color:#ffe600}
.route-planner__text{
	font-family:"Gilroy","Open Sans","Arial";
	font-weight:400;
	font-size:.9375rem;
	line-height:1.5;
	color:#4a4a4a;
	max-width:34rem;
	margin:0 0 2rem;
}
.route-planner__widget{
	background:#dcdcdc;
	box-sizing:border-box;
}
.route-planner__map{position:relative;width:100%;aspect-ratio:21/9;background:#c7c7c7}
.route-planner__map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.route-planner__form-wrap{
	padding:2.5rem 2rem;
	box-sizing:border-box;
	display:flex;
	flex-direction:column;
	align-items:center;
	text-align:center;
}
.route-planner__label{
	font-family:"Gilroy","Open Sans","Arial";
	font-weight:700;
	font-size:.75rem;
	letter-spacing:.06em;
	text-transform:uppercase;
	color:#4a4a4a;
	margin:0 0 .75rem;
}
.route-planner__form{
	width:100%;
	max-width:30rem;
	display:flex;
	gap:.75rem;
}
.route-planner__input{
	flex:1;
	min-width:0;
	font-family:"Gilroy","Open Sans","Arial";
	font-size:.9375rem;
	color:#1a1a1a;
	background:#fff;
	border:none;
	padding:1rem 1.25rem;
	box-sizing:border-box;
}
.route-planner__input::placeholder{color:#999}
.route-planner__button{
	display:inline-flex;
	align-items:center;
	gap:.5rem;
	flex-shrink:0;
	background:#1a1a1a;
	color:#fff;
	font-family:"Gilroy","Open Sans","Arial";
	font-weight:700;
	font-size:.9375rem;
	letter-spacing:.02em;
	text-transform:uppercase;
	border:none;
	cursor:pointer;
	padding:1rem 1.75rem;
	transition:.3s background;
}
.route-planner__button:hover{background:#333}
.route-planner__hint{
	font-family:"Gilroy","Open Sans","Arial";
	font-weight:400;
	font-size:.8125rem;
	color:#6b6b6b;
	margin:1rem 0 0;
}

@media(max-width: 640px){
	.route-planner{padding:3rem 0}
	.route-planner__title{font-size:1.75rem}
	.route-planner__map{aspect-ratio:4/3}
	.route-planner__form-wrap{padding:2rem 1.25rem}
	.route-planner__form{flex-direction:column}
}

/* =========================================================
   BLOK: zeven_stappen
   ========================================================= */
.zeven-stappen{padding:4rem 0}
.zeven-stappen__inner{width:100%;max-width:80rem;margin:0 auto;padding:0 2rem;box-sizing:border-box}
.zeven-stappen__eyebrow{
	font-family:"Gilroy","Open Sans","Arial";
	font-weight:700;
	font-size:.6875rem;
	letter-spacing:.06em;
	text-transform:uppercase;
	color:#4a4a4a;
	margin:0 0 .5rem;
}
.zeven-stappen__title{
	font-family:"Gilroy","Open Sans","Arial";
	font-weight:700;
	font-size:2rem;
	line-height:1.15;
	text-transform:uppercase;
	color:#1a1a1a;
	margin:0 0 .5rem;
}
.zeven-stappen__accent{color:#ffe600}
.zeven-stappen__text{
	font-family:"Gilroy","Open Sans","Arial";
	font-weight:400;
	font-size:.875rem;
	line-height:1.5;
	color:#4a4a4a;
	max-width:40rem;
	margin:0 0 2rem;
}
.zeven-stappen__tabs{display:flex}
.zeven-stappen__tab{
	flex:1;
	font-family:"Gilroy","Open Sans","Arial";
	font-weight:700;
	font-size:.9375rem;
	text-align:left;
	background:#e5e5e5;
	color:#1a1a1a;
	border:none;
	border-right:1px solid #fff;
	cursor:pointer;
	padding:1rem 1.25rem;
	transition:.2s background,.2s color;
}
.zeven-stappen__tab:last-child{border-right:none}
.zeven-stappen__tab.is-active{background:#1a1a1a;color:#ffe600}
.zeven-stappen__panels{position:relative;background:#1a1a1a;padding:2.5rem;box-sizing:border-box}
.zeven-stappen__panel{display:none;align-items:flex-start;gap:2rem}
.zeven-stappen__panel.is-active{display:flex}
.zeven-stappen__panel-number{
	font-family:"Gilroy","Open Sans","Arial";
	font-weight:700;
	font-size:3.5rem;
	line-height:1;
	color:#ffe600;
	flex-shrink:0;
}
.zeven-stappen__panel-heading{
	font-family:"Gilroy","Open Sans","Arial";
	font-weight:700;
	font-size:1.375rem;
	text-transform:uppercase;
	color:#fff;
	margin:0 0 .75rem;
}
.zeven-stappen__panel-text{
	font-family:"Gilroy","Open Sans","Arial";
	font-weight:400;
	font-size:.9375rem;
	line-height:1.5;
	color:#ccc;
	margin:0;
	max-width:40rem;
}
.zeven-stappen__nav{display:flex;gap:.75rem;margin-top:2rem}
.zeven-stappen__prev,
.zeven-stappen__next{
	font-family:"Gilroy","Open Sans","Arial";
	font-weight:700;
	font-size:.8125rem;
	letter-spacing:.02em;
	text-transform:uppercase;
	background:#333;
	color:#fff;
	border:none;
	cursor:pointer;
	padding:.875rem 1.5rem;
	transition:.2s background,.2s color;
}
.zeven-stappen__prev:disabled,
.zeven-stappen__next:disabled{color:#777;cursor:default}
.zeven-stappen__prev:not(:disabled):hover,
.zeven-stappen__next:not(:disabled):hover{background:#444}
.zeven-stappen__cta{
	display:block;
	background:#ffe600;
	color:#1a1a1a;
	font-family:"Gilroy","Open Sans","Arial";
	font-weight:700;
	font-size:.875rem;
	letter-spacing:.02em;
	text-transform:uppercase;
	text-decoration:none;
	padding:1.25rem 2rem;
	margin-top:1.5rem;
	transition:.2s background;
}
.zeven-stappen__cta:hover{background:#f5d800}

@media(max-width: 780px){
	.zeven-stappen{padding:3rem 0}
	.zeven-stappen__title{font-size:1.5rem}
	.zeven-stappen__tabs{flex-wrap:wrap}
	.zeven-stappen__tab{flex:1 1 25%;text-align:center;padding:.75rem .5rem;font-size:.8125rem}
	.zeven-stappen__panels{padding:1.75rem}
	.zeven-stappen__panel{flex-direction:column;gap:1rem}
	.zeven-stappen__panel-number{font-size:2.5rem}
}

/* =========================================================
   BLOK: jaarlijkse_groei
   ========================================================= */
.jaarlijkse-groei{background:#121212;color:#fff;padding:4rem 0}
.jaarlijkse-groei__inner{width:100%;max-width:80rem;margin:0 auto;padding:0 2rem;box-sizing:border-box}
.jaarlijkse-groei__title{
	font-family:"Gilroy","Open Sans","Arial";
	font-weight:700;
	font-size:2rem;
	line-height:1.15;
	text-transform:uppercase;
	color:#fff;
	margin:0 0 .75rem;
}
.jaarlijkse-groei__accent{color:#ffe600}
.jaarlijkse-groei__text{
	font-family:"Gilroy","Open Sans","Arial";
	font-weight:400;
	font-size:.9375rem;
	line-height:1.5;
	color:#ccc;
	max-width:40rem;
	margin:0 0 3rem;
}
.jaarlijkse-groei__grid{
	display:grid;
	grid-template-columns:repeat(4, 1fr);
	gap:2rem;
}
.jaarlijkse-groei__number{
	display:block;
	font-family:"Gilroy","Open Sans","Arial";
	font-weight:700;
	font-size:1.75rem;
	color:#ffe600;
	margin:0 0 1rem;
}
.jaarlijkse-groei__heading{
	font-family:"Gilroy","Open Sans","Arial";
	font-weight:700;
	font-size:1rem;
	text-transform:uppercase;
	color:#fff;
	margin:0 0 1rem;
	padding-bottom:1rem;
	border-bottom:1px solid rgba(255,255,255,.2);
}
.jaarlijkse-groei__item-text{
	font-family:"Gilroy","Open Sans","Arial";
	font-weight:400;
	font-size:.875rem;
	line-height:1.5;
	color:#ccc;
	margin:0;
}

@media(max-width: 780px){
	.jaarlijkse-groei{padding:3rem 0}
	.jaarlijkse-groei__title{font-size:1.5rem}
	.jaarlijkse-groei__grid{grid-template-columns:repeat(2, 1fr);gap:2rem 1.5rem}
	.jaarlijkse-groei__heading{border-bottom:none;padding-bottom:0}
}

/* =========================================================
   BLOK: aanmeld_formulier
   Styling van CF7's eigen gegenereerde markup (.wpcf7-*) — geen
   losse veld-template, zie template-parts/blocks/aanmeld_formulier.php
   ========================================================= */
.aanmeld-formulier{background:#121212;color:#fff;padding:5rem 0}
.aanmeld-formulier__inner{
	width:100%;
	max-width:80rem;
	margin:0 auto;
	padding:0 2rem;
	box-sizing:border-box;
	display:grid;
	grid-template-columns:1fr 1.2fr;
	gap:3rem;
	align-items:start;
}
.aanmeld-formulier__title{
	font-family:"Gilroy","Open Sans","Arial";
	font-weight:700;
	font-size:2.25rem;
	line-height:1.15;
	text-transform:uppercase;
	color:#fff;
	margin:0 0 1rem;
}
.aanmeld-formulier__accent{color:#ffe600}
.aanmeld-formulier__text{
	font-family:"Gilroy","Open Sans","Arial";
	font-weight:400;
	font-size:.9375rem;
	line-height:1.5;
	color:#ccc;
	max-width:24rem;
	margin:0;
}

.aanmeld-formulier__grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.aanmeld-formulier__field{display:block}
.aanmeld-formulier__field--full{grid-column:1 / -1}
.aanmeld-formulier__field-label{
	display:block;
	font-family:"Gilroy","Open Sans","Arial";
	font-weight:700;
	font-size:.6875rem;
	letter-spacing:.06em;
	text-transform:uppercase;
	color:#999;
	margin:0 0 .5rem;
}

.aanmeld-formulier .wpcf7-form-control-wrap{display:block}
.aanmeld-formulier input.wpcf7-form-control{
	display:block;
	width:100%;
	font-family:"Gilroy","Open Sans","Arial";
	font-size:.9375rem;
	color:#fff;
	background:#2a2a2a;
	border:none;
	padding:1rem 1.25rem;
	box-sizing:border-box;
}
.aanmeld-formulier input.wpcf7-form-control::placeholder{color:#777}
.aanmeld-formulier input.wpcf7-form-control:focus{outline:2px solid #ffe600;outline-offset:-2px}

.aanmeld-formulier__advies .wpcf7-radio{display:flex;flex-wrap:wrap;gap:.75rem}
.aanmeld-formulier .wpcf7-list-item{margin:0}
.aanmeld-formulier .wpcf7-list-item label{display:inline-flex;align-items:center;cursor:pointer}
.aanmeld-formulier .wpcf7-list-item input[type="radio"]{position:absolute;opacity:0;width:1px;height:1px}
.aanmeld-formulier .wpcf7-list-item-label{
	display:inline-flex;
	font-family:"Gilroy","Open Sans","Arial";
	font-weight:700;
	font-size:.8125rem;
	letter-spacing:.02em;
	text-transform:uppercase;
	color:#fff;
	background:#2a2a2a;
	border-radius:999px;
	padding:.75rem 1.5rem;
	transition:.2s background,.2s color;
}
.aanmeld-formulier .wpcf7-list-item input[type="radio"]:checked + .wpcf7-list-item-label{background:#fff;color:#1a1a1a}
.aanmeld-formulier .wpcf7-list-item.last{flex-basis:100%}
.aanmeld-formulier .wpcf7-list-item.last .wpcf7-list-item-label{background:#ffe600;color:#1a1a1a}
.aanmeld-formulier .wpcf7-list-item.last input[type="radio"]:checked + .wpcf7-list-item-label{background:#f5d800}

.aanmeld-formulier input.wpcf7-submit{
	display:block;
	width:100%;
	background:#ffe600;
	color:#1a1a1a;
	font-family:"Gilroy","Open Sans","Arial";
	font-weight:700;
	font-size:.9375rem;
	letter-spacing:.02em;
	text-transform:uppercase;
	border:none;
	cursor:pointer;
	padding:1.25rem;
	transition:.2s background;
}
.aanmeld-formulier input.wpcf7-submit:hover{background:#f5d800}
.aanmeld-formulier .wpcf7-spinner{margin-left:.5rem}

.aanmeld-formulier__privacy{
	font-family:"Gilroy","Open Sans","Arial";
	font-weight:400;
	font-size:.75rem;
	line-height:1.5;
	color:#888;
	margin:1rem 0 0;
}
.aanmeld-formulier .wpcf7-response-output{
	font-family:"Gilroy","Open Sans","Arial";
	font-size:.8125rem;
	color:#fff;
	border-color:#555 !important;
	margin:1rem 0 0 !important;
}
.aanmeld-formulier .wpcf7-not-valid-tip{
	font-family:"Gilroy","Open Sans","Arial";
	font-size:.75rem;
	color:#ff8080;
	margin-top:.375rem;
	display:block;
}

@media(max-width: 920px){
	.aanmeld-formulier__inner{grid-template-columns:1fr;gap:2.5rem}
}
@media(max-width: 640px){
	.aanmeld-formulier{padding:3rem 0}
	.aanmeld-formulier__title{font-size:1.75rem}
	.aanmeld-formulier__grid{grid-template-columns:1fr}
	.aanmeld-formulier__field-label{font-size:.625rem}
	.aanmeld-formulier input.wpcf7-form-control{
		/* background:transparent; */
		border:none;
		border-bottom:1px solid rgba(255,255,255,.25);
		padding:.75rem 0;
	}
	.aanmeld-formulier .wpcf7-list-item-label{padding:.625rem 1.25rem;font-size:.75rem}
}

/* =========================================================
   BLOK: tekstblok — vrije tekst met automatische marges. Regels
   werken puur op de HTML-tags binnen .tekstblok__content, zodat
   een redacteur gewoon koppen/alinea's/lijsten kan typen in het
   WYSIWYG-veld zonder losse styling-keuzes te hoeven maken.
   ========================================================= */
.tekstblok{padding:4rem 0}
.tekstblok__inner{width:100%;max-width:80rem;margin:0 auto;padding:0 2rem;box-sizing:border-box}
.tekstblok__notice{
	background:#f2f2f2;
	color:#4a4a4a;
	max-width:40rem;
	padding:1.5rem 1.75rem;
	margin:0 0 2.5rem;
	box-sizing:border-box;
}
.tekstblok__notice p{
	font-family:"Gilroy","Open Sans","Arial";
	font-weight:400;
	font-size:.875rem;
	line-height:1.6;
	margin:0;
}
.tekstblok__content{max-width:40rem;color:#1a1a1a}
.tekstblok__content > *:first-child{margin-top:0}
.tekstblok__content > *:last-child{margin-bottom:0}
.tekstblok__content p{
	font-family:"Gilroy","Open Sans","Arial";
	font-weight:400;
	font-size:.9375rem;
	line-height:1.6;
	margin:0 0 1.25rem;
}
.tekstblok__content h2{
	font-family:"Gilroy","Open Sans","Arial";
	font-weight:700;
	font-size:1.375rem;
	line-height:1.25;
	text-transform:none;
	color:#1a1a1a;
	margin:2.5rem 0 .75rem;
}
.tekstblok__content h3{
	font-family:"Gilroy","Open Sans","Arial";
	font-weight:700;
	font-size:1.125rem;
	line-height:1.3;
	color:#1a1a1a;
	margin:2rem 0 .5rem;
}
.tekstblok__content ul,
.tekstblok__content ol{
	margin:0 0 1.25rem;
	padding:0 0 0 1.125rem;
}
.tekstblok__content li{
	font-family:"Gilroy","Open Sans","Arial";
	font-weight:400;
	font-size:.9375rem;
	line-height:1.6;
	margin:0 0 .375rem;
}
.tekstblok__content ul{list-style:none;padding-left:0}
.tekstblok__content ul li{padding-left:1.125rem;position:relative}
.tekstblok__content ul li::before{content:"\00B7";position:absolute;left:0;color:#4a4a4a}
.tekstblok__content a{color:#1a1a1a;text-decoration:underline}
.tekstblok__content a:hover{color:#666}
.tekstblok__content strong{font-weight:700}

@media(max-width: 640px){
	.tekstblok{padding:3rem 0}
	.tekstblok__content h2{font-size:1.1875rem}
}

/* --- Legacy fase 1-tegelgrid (.sector__wrapper / .picture__tile) ---
   Wordt niet meer gebruikt door tegel_grid.php, maar laat ik staan
   voor het geval iets anders er nog naar verwijst. Kan weg als je
   zeker weet dat dat niet zo is. */
@media(max-width: 780px){
	.flex-mobile-order-1{order:1}.flex-mobile-order-2{order:2}.flex-mobile-order-3{order:3}.flex-mobile-order-4{order:4}
	.flex-mobile-order-5{order:5}.flex-mobile-order-6{order:6}.flex-mobile-order-7{order:7}.flex-mobile-order-8{order:8}
	.flex-mobile-order-9{order:9}.flex-mobile-order-10{order:10}.flex-mobile-order-11{order:11}.flex-mobile-order-12{order:12}
}
.background__yellow{background-color:#ffe500;color:#000}
.background__yellow .hover__text{background-color:#ffe500}
.background__yellow .button__primary{background:#000;color:#fff;height:28px;width:147px;display:flex;justify-content:center;align-items:center;font-size:15px}
.background__yellow .button__primary:hover{background-color:#9c9b9b !important}
.background__gray{background-color:#9c9b9b;color:#fff}
.background__gray .hover__text{background-color:#9c9b9b}
.background__gray .button__primary{background:#000;color:#fff;height:28px;width:147px;display:flex;justify-content:center;align-items:center;font-size:15px}
.background__gray .button__primary:hover{background-color:#ffe500;transition:.3s all;color:#1e1e1e}
.background__black{background-color:#3c3c3b;color:#ffe500}
.background__black .hover__text{background-color:#3c3c3b}
.background__black .button__primary{background:#ffe500;color:#1e1e1e;height:28px;width:147px;display:flex;justify-content:center;align-items:center;font-size:15px;transition:.3s all}
.background__black .button__primary:hover{background-color:#9c9b9b;color:#fff}
.button__primary{text-decoration:none}
@media(max-width: 640px){
	.hover__text{background-color:#ffe500 !important;color:#000 !important}
	.hover__text .button__primary{background:#000 !important;color:#fff !important}
}
/* Fase 2: zelfde container-breedte als header/hero/gele blok/footer,
   zodat de (ongewijzigde) tegel-grid weer even breed is als de rest. */
.block__container{width:100%;max-width:80rem;margin:0 auto;box-sizing:border-box}
.sector__wrapper{display:flex;flex-wrap:wrap}
@media(min-width: 640px){.sector__wrapper{padding-left:1.375rem;padding-right:1.4375rem;justify-content:space-between}}
@media(max-width: 640px){.sector__wrapper{justify-content:center}}
@media(min-width: 920px){.sector__wrapper .block__wrapper{margin-bottom:1.3125rem}}
@media(min-width: 2000px){.sector__wrapper .block__wrapper{flex-basis:23.5%;justify-content:space-between}}
@media(max-width: 780px){.sector__wrapper{margin-top:.6875rem}}
@media screen and (max-width: 600px){.sector__wrapper{gap:.75rem !important}}
@media screen and (max-width: 1400px){.sector__wrapper{gap:.4rem;margin-bottom:1rem}}
.picture__tile{position:relative;min-width:21.75rem;height:100%;overflow:hidden;width:348px;height:348px}
@media(max-width: 920px){
	.picture__tile .show__arrow{position:relative;width:100%;height:100%}
	.picture__tile .show__arrow:after{content:"";background:url(../images/arrow-right.svg);background-repeat:no-repeat;background-size:3.125rem;bottom:4rem;right:1.4375rem;position:absolute;z-index:5;width:3.125rem;height:3.125rem;display:inline-flex}
	.picture__tile img{max-height:100%;max-width:100%;height:348px;object-fit:cover;aspect-ratio:4/4}
}
@media screen and (max-width: 920px)and (max-width: 600px){.picture__tile img{aspect-ratio:5/4}}
/* Fase 2: nu de container smaller is dan voorheen, klopt de vaste
   height:348px niet meer met de procentuele breedte hieronder — daardoor
   werden de tegels rechthoekig. aspect-ratio dwingt ze weer vierkant af. */
@media(min-width: 1600px){.picture__tile{flex-basis:23.5%;height:auto;aspect-ratio:1/1}}
@media screen and (min-width: 1100px)and (max-width: 1400px){.picture__tile{flex-basis:32%;height:auto;aspect-ratio:1/1}}
@media screen and (max-width: 600px){.picture__tile{width:95%}}
@media(min-width: 2200px){.picture__tile{min-width:unset;max-height:unset}}
.picture__tile:hover .show__arrow:after{content:unset}
@media(min-width: 920px){.picture__tile img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/4;display:block;max-height:348px}}
.picture__tile .picture__hover-content{flex-basis:100%;margin-top:0}
@media(max-width: 920px){.picture__tile{margin-top:0}}
.picture__tile .picture__tile-text{display:none}
.picture__tile h2{padding:45px 53px 45px 34px;padding-top:0;font-family:"Gilroy","Open Sans","Arial";font-style:normal;font-weight:700;font-size:65px;line-height:35px;color:#fff}
.picture__tile h2 em{color:#ffe500;font-style:normal}
.hover__text{position:absolute;top:-54px;right:-400px;width:348px;height:348px;display:flex;flex-wrap:wrap;transition:right .3s ease,opacity .3s ease;-webkit-transition:right .3s ease,opacity .3s ease;box-sizing:border-box;padding:2.25rem 1.4375rem 0 2.125rem}
@media screen and (max-width: 600px){.hover__text{width:100%}}
.wp-block-slr-text-with-hover:hover .hover__text{right:0;opacity:1}
@media(min-width: 780px){.hover__text{display:none}}
@media(max-width: 780px){
	.hover__text{font-size:1.25rem;font-family:"Gilroy","Open Sans","Arial";position:absolute;display:flex;flex-wrap:wrap;top:0;width:348px;height:348px;z-index:10}
	.hover__text .button__group--wrapper{align-self:flex-end;position:relative;top:-2rem}
	.hover__text:after{display:none}
	.hover__text .button{width:9.1875rem;height:1.75rem;flex-basis:100%;text-decoration:none;display:flex;align-items:center;justify-content:center;position:relative;z-index:1;cursor:pointer}
}
@media screen and (min-width: 640px){
	.picture__tile:hover h2{display:none}
	.picture__tile:hover .hover__text{font-size:1.25rem;font-family:"Gilroy","Open Sans","Arial";position:relative;inset:0;display:block;padding:2.25rem 1.4375rem 1.6875rem 2.125rem;flex-wrap:wrap}
	.picture__tile:hover .hover__text p{max-width:300px}
	.picture__tile:hover .hover__text .button{width:9.1875rem;height:1.75rem;flex-basis:100%;text-decoration:none;display:flex;align-items:center;justify-content:center;position:relative;z-index:1;cursor:pointer}
	.picture__tile:hover .hover__text .button.button__black{background:#000;color:#fff}
	.picture__tile:hover .hover__text .button.button__yellow{background:#ffe500;color:#1e1e1e}
}