/* ==========================================================================
   VDB refresh 2026
   Laag bovenop style.css + custom.css (ontwerp "VDB Website v2").
   Alleen styling, hover-effecten en animaties; markup blijft van het CMS.

   1.  Fonts & tokens
   2.  Basis & typografie
   3.  Knoppen
   4.  Header (topbar, menu, dropdown)
   5.  Mobiel menu
   6.  Home hero + slider
   7.  Tellers
   8.  Kaarten (producten, referenties, machines)
   9.  Carousel navigatie
   10. Over ons / USP / video
   11. Reviews
   12. Woningstijlen + locatiekaarten
   13. CTA banner
   14. Projecten
   15. Formulier
   16. Footer + copyright
   17. Contact popup (Gerben)
   18. Vervolgpagina's (hero, tijdlijn)
   19. Scroll-reveal
   20. Responsive
   ========================================================================== */


/* 1. Fonts & tokens
   ========================================================================== */

/* Pragmatica (CFF-outlines; de oude TrueType-woff's gaven rare spaties rond de "t") */
@font-face{font-family:'PragmaticaVDB';src:url('/Forms/fonts/Pragmatica_Light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'PragmaticaVDB';src:url('/Forms/fonts/Pragmatica_Book.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'PragmaticaVDB';src:url('/Forms/fonts/Pragmatica_Medium.woff2') format('woff2');font-weight:500 700;font-style:normal;font-display:swap}
@font-face{font-family:'PragmaticaVDB';src:url('/Forms/fonts/Pragmatica_Black.woff2') format('woff2');font-weight:800 900;font-style:normal;font-display:swap}

/* Archivo Black (SIL OFL, lokaal gehost i.p.v. Google Fonts) */
@font-face{font-family:'Archivo Black';src:url('/Forms/fonts/ArchivoBlack-latinext.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Archivo Black';src:url('/Forms/fonts/ArchivoBlack-latin.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
	--vdb-green:#22ad74;
	--vdb-green-dark:#1c9463;
	--vdb-ink:#0f0f0f;
	--vdb-nav:#1b1b1b;
	--vdb-grey:#f7f7f7;
	--vdb-line:#e2e2e2;
	--vdb-wrap:1300px;
	--vdb-gutter:clamp(16px,3vw,48px);
	--vdb-ease:cubic-bezier(.2,.8,.2,1);
	--vdb-spring:cubic-bezier(.3,1.6,.5,1);
	--vdb-shine:linear-gradient(110deg,#1c9463 0%,#22ad74 35%,#5fe0aa 50%,#22ad74 65%,#22ad74 100%);
	--vdb-arrow-l:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 18l-6-6 6-6'/%3E%3C/svg%3E");
	--vdb-arrow-r:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}


/* 2. Basis & typografie
   ========================================================================== */

html{
	scroll-behavior:smooth;
	scroll-padding-top:90px;
}

html, body{
	font-family:'PragmaticaVDB','Pragmatica Book',system-ui,sans-serif;
	color:var(--vdb-ink);
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.titel{
	font-family:'Archivo Black','Arial Black',sans-serif;
	font-weight:400;
	font-synthesis:none;
	letter-spacing:.2px;
}

p{line-height:1.95;}

a{color:var(--vdb-green);}
a:hover{color:var(--vdb-green-dark);}

::selection{background:var(--vdb-green);color:#fff;}

.container{
	max-width:var(--vdb-wrap);
	padding-left:var(--vdb-gutter);
	padding-right:var(--vdb-gutter);
}

.titel{
	font-size:clamp(42px,5.4vw,72px);
	line-height:1.05;
	margin-bottom:30px;
}

#about .titel,
#woningstijlen .titel,
#projecten .titel{margin-bottom:40px;}

#youtube .titel,
#reviews .titel{
	font-size:clamp(34px,4.6vw,62px);
	line-height:1.08;
}

#youtube .titel{margin-bottom:40px;}

.paginainhoud .ModuleOverzichtsTekst h2{
	font-size:clamp(32px,3.6vw,48px);
	line-height:1.1;
	padding-top:0;
	margin-bottom:28px;
}


/* 3. Knoppen
   ========================================================================== */

.btn{
	border-radius:3px;
	font-size:16px;
	font-weight:600;
	letter-spacing:-.4px;
	line-height:1.35;
	padding:17px 22px;
	transition:background-position .7s ease,background-size .45s var(--vdb-ease),color .3s,border-color .3s,transform .25s,box-shadow .25s,gap .3s;
}

.btn:focus{box-shadow:none;}
.btn:focus-visible{box-shadow:0 0 0 .2rem rgba(34,173,116,.35);}

/* Groene knop: glans die over de knop schuift */
.btn-primary,
.btn-primary:focus,
.btn-primary:active{
	color:#fff;
	border:1px solid transparent;
	background-color:var(--vdb-green);
	background-image:var(--vdb-shine);
	background-size:260% 100%;
	background-position:100% 0;
}

.btn-primary:hover{
	color:#fff;
	border:1px solid transparent;
	background-color:var(--vdb-green);
	background-position:0 0;
	transform:translateY(-2px);
	box-shadow:0 10px 24px rgba(34,173,116,.35);
}

.btn-primary i,
.btn-primary:hover i{color:#fff;}

/* Outline knop: vult zich van links */
.btn-primary-flip,
.btn-primary-flip:focus{
	color:var(--vdb-green);
	border:1px solid var(--vdb-green);
	background:linear-gradient(var(--vdb-green),var(--vdb-green)) no-repeat left / 0% 100%;
}

.btn-primary-flip:hover{
	color:#fff;
	border:1px solid var(--vdb-green);
	background-color:transparent;
	background-size:100% 100%;
}

#footer a.btn-primary:hover{color:#fff !important;}


/* 4. Header
   ========================================================================== */

.top-header{
	padding:0 0 46px;
	background:var(--vdb-ink);
	color:#fff;
}

.top-info-bar.d-flex{
	display:grid !important;
	grid-template-columns:1fr auto 1fr;
	gap:12px;
	height:70px;
	font-size:14px;
}

.top-info-bar.px-5{
	padding-left:0 !important;
	padding-right:0 !important;
}

.top-reviews #google-reviews-widget{
	min-width:0;
	font-size:13px;
	color:#fff;
}

.top-reviews #google-reviews-widget a{transition:color .25s;}
.top-reviews #google-reviews-widget a:hover{color:var(--vdb-green);}

.top-reviews .reviews-count{
	text-decoration:underline;
	text-underline-offset:3px;
	white-space:nowrap;
}

.top-reviews .rate-select-layer{color:#f5b800;}

.top-social{
	display:flex;
	justify-content:center;
	gap:6px;
}

.socials-icon{
	display:inline-block;
	text-decoration:none;
}

.socials-icon i{
	display:inline-grid;
	place-items:center;
	width:24px;
	height:24px;
	padding:0 !important;
	border-radius:3px;
	background:#fff;
	color:var(--vdb-ink);
	font-size:14px;
	transition:transform .25s,background .25s,color .25s;
}

.socials-icon:hover i{
	background:var(--vdb-green);
	color:#fff;
	transform:translateY(-2px);
}

.socials-icon .fa-facebook-official:before{content:"\f09a";}
.socials-icon .fa-youtube:before{content:"\f16a";}

.top-tel{
	justify-self:end;
	font-size:15px;
	white-space:nowrap;
}

.top-tel a{color:#fff;text-decoration:none;}
.top-tel a:hover{color:var(--vdb-green);}
.top-tel .fa-phone{color:#fff;}
.top-tel a:hover .fa-phone{color:var(--vdb-green);}

/* Menubalk: zweeft half over de hero, wordt bij scrollen een volle balk */
.menu-header{
	height:72px;
	background:var(--vdb-nav);
	transition:transform .35s var(--vdb-ease),max-width .45s var(--vdb-ease),height .35s ease,box-shadow .35s,padding .35s;
}

.menu-header.is-stuck{
	max-width:100%;
	height:64px;
	box-shadow:0 10px 30px rgba(0,0,0,.3);
}

.menu-header.is-stuck.px-5{
	padding-left:max(var(--vdb-gutter),calc((100% - var(--vdb-wrap)) / 2 + var(--vdb-gutter))) !important;
	padding-right:max(var(--vdb-gutter),calc((100% - var(--vdb-wrap)) / 2 + var(--vdb-gutter))) !important;
}

.menu-header .logo{display:flex;}

.menu-header .logo-img{
	width:auto;
	height:46px;
	transition:height .35s;
}

.menu-header.is-stuck .logo-img{height:36px;}

.menu-header .btn-primary{
	display:inline-flex;
	align-items:center;
	gap:10px;
	height:56px;
	padding:0 clamp(16px,2vw,48px) !important;
	white-space:nowrap;
}

.menu-header .btn-primary::before{
	content:"\f133";
	font-family:FontAwesome;
	font-size:17px;
	font-weight:normal;
	line-height:1;
}

.menu-header.is-stuck .btn-primary{height:48px;}

.menu-header .navbar-toggler{
	place-items:center;
	width:48px;
	height:48px;
	padding:0;
	border:1px solid rgba(255,255,255,.25);
	border-radius:3px;
	transition:border-color .25s,background .25s;
}

.menu-header .navbar-toggler:hover{border-color:var(--vdb-green);}

.menu-header .navbar-toggler-icon{width:22px;height:22px;}

@media (min-width:1200px){
	.navbar-nav-main .nav-item{position:relative;}

	.navbar-nav-main .nav-link{
		position:relative;
		padding:24px clamp(10px,1.2vw,20px) !important;
		color:#bdbdbd;
		font-size:16px;
		font-weight:500;
		letter-spacing:-.2px;
		transition:color .25s,padding .35s;
	}

	.menu-header.is-stuck .navbar-nav-main .nav-link{
		padding-top:20px !important;
		padding-bottom:20px !important;
	}

	/* Groen streepje onder actief / hover item */
	.navbar-nav-main .nav-link::before{
		content:"";
		position:absolute;
		left:clamp(10px,1.2vw,20px);
		right:clamp(10px,1.2vw,20px);
		bottom:16px;
		height:2px;
		background:var(--vdb-green);
		transform:scaleX(0);
		transform-origin:left;
		transition:transform .35s var(--vdb-ease);
	}

	.menu-header.is-stuck .navbar-nav-main .nav-link::before{bottom:13px;}

	.navbar-nav-main .nav-link:hover,
	.navbar-nav-main .nav-link:focus,
	.navbar-nav-main .active > .nav-link,
	.navbar-nav-main .dropdown:hover > .nav-link{color:#fff;}

	.navbar-nav-main .nav-link:hover::before,
	.navbar-nav-main .active > .nav-link::before,
	.navbar-nav-main .dropdown:hover > .nav-link::before{transform:scaleX(1);}

	.navbar-nav-main li::before{
		top:50%;
		height:18px;
		margin-top:-9px;
		border-right-color:rgba(255,255,255,.35);
	}

	.navbar-nav-main .dropdown-toggle::after{transition:transform .3s;}
	.navbar-nav-main .dropdown:hover > .dropdown-toggle::after{transform:rotate(180deg);}

	/* Dropdown opent op hover */
	.navbar-nav-main .dropdown:hover > .dropdown-menu{display:block;}

	.navbar-nav-main .dropdown-menu{
		top:100%;
		left:0;
		min-width:260px;
		margin:0;
		padding:8px 0;
		background:var(--vdb-nav);
		border:0;
		border-top:3px solid var(--vdb-green);
		border-radius:0;
		box-shadow:0 20px 40px rgba(0,0,0,.35);
		animation:vdbDrop .28s var(--vdb-ease);
	}

	.navbar-nav-main .dropdown-item{
		display:flex;
		align-items:center;
		gap:10px;
		width:auto;
		padding:12px 22px;
		color:#ddd;
		font-size:15px;
		transition:color .25s,background-color .25s,padding .25s;
	}

	.navbar-nav-main .dropdown-item::before{
		content:"";
		flex:none;
		width:6px;
		height:6px;
		background:var(--vdb-green);
	}

	.navbar-nav-main .dropdown-item:hover,
	.navbar-nav-main .dropdown-item:focus,
	.navbar-nav-main .dropdown-item.active{
		color:#fff;
		background-color:#262626 !important;
		padding-left:30px;
	}
}

@keyframes vdbDrop{
	from{opacity:0;transform:translateY(8px);}
	to{opacity:1;transform:none;}
}


/* 5. Mobiel menu (fullscreen, opgebouwd door refresh.js)
   ========================================================================== */

.vdb-mnav{
	position:fixed;
	inset:0;
	z-index:10050;
	display:flex;
	flex-direction:column;
	padding:16px var(--vdb-gutter) 28px;
	overflow:auto;
	background:var(--vdb-ink);
	color:#fff;
	opacity:0;
	visibility:hidden;
	transform:translateY(-12px);
	transition:opacity .3s ease,transform .4s var(--vdb-ease),visibility 0s .4s;
}

.vdb-mnav.is-open{
	opacity:1;
	visibility:visible;
	transform:none;
	transition:opacity .3s ease,transform .4s var(--vdb-ease),visibility 0s;
}

body.vdb-menu-open{overflow:hidden;}

.vdb-mnav-head{
	display:flex;
	justify-content:space-between;
	align-items:center;
	min-height:60px;
}

.vdb-mnav-logo img{height:36px;width:auto;}

.vdb-mnav-close{
	display:grid;
	place-items:center;
	width:48px;
	height:48px;
	border:1px solid rgba(255,255,255,.25);
	border-radius:3px;
	background:transparent;
	color:#fff;
	cursor:pointer;
}

.vdb-mnav-list{
	display:flex;
	flex-direction:column;
	margin-top:24px;
}

.vdb-mnav-item{
	display:flex;
	justify-content:space-between;
	align-items:center;
	width:100%;
	padding:16px 0;
	border:0;
	border-bottom:1px solid rgba(255,255,255,.1);
	background:none;
	color:#fff;
	font-family:'Archivo Black','Arial Black',sans-serif;
	font-size:24px;
	text-align:left;
	text-decoration:none;
	cursor:pointer;
	opacity:0;
	transform:translateY(10px);
	transition:color .25s,opacity .4s ease,transform .5s var(--vdb-ease);
}

.vdb-mnav.is-open .vdb-mnav-item{opacity:1;transform:none;}

.vdb-mnav-item:hover,
.vdb-mnav-item.is-active{color:var(--vdb-green);}

.vdb-mnav-item svg{
	flex:none;
	transition:transform .3s;
}

.vdb-mnav-group.is-open > .vdb-mnav-item svg{transform:rotate(90deg);}

.vdb-mnav-sub{
	display:grid;
	grid-template-rows:0fr;
	transition:grid-template-rows .35s var(--vdb-ease);
}

.vdb-mnav-sub > div{overflow:hidden;}

.vdb-mnav-group.is-open .vdb-mnav-sub{grid-template-rows:1fr;}

.vdb-mnav-sub a{
	display:flex;
	align-items:center;
	gap:12px;
	padding:12px 0 12px 4px;
	color:#ddd;
	font-size:17px;
	text-decoration:none;
}

.vdb-mnav-sub a::before{
	content:"";
	flex:none;
	width:6px;
	height:6px;
	background:var(--vdb-green);
}

.vdb-mnav-sub a:hover{color:#fff;}

.vdb-mnav-foot{
	display:flex;
	flex-direction:column;
	gap:12px;
	margin-top:auto;
	padding-top:28px;
}

.vdb-mnav-foot a{
	display:flex;
	justify-content:center;
	align-items:center;
	gap:10px;
	padding:16px;
	border:1px solid var(--vdb-green);
	border-radius:3px;
	color:var(--vdb-green);
	font-weight:600;
	text-decoration:none;
}

.vdb-mnav-foot a.is-solid{
	background:var(--vdb-green);
	color:#fff;
}

.vdb-mnav-foot i.fa-whatsapp{
	position:static;
	font-size:1.3em;
}


/* 6. Home hero + slider
   ========================================================================== */

#home_slider{
	height:clamp(420px,62vw,760px);
	background-color:var(--vdb-nav);
	background-position:center;
}

#home_slider .hero-media{
	position:absolute;
	inset:0;
	z-index:0;
	overflow:hidden;
	background:var(--vdb-nav);
}

.hero-slide{
	position:absolute;
	inset:0;
	background-size:cover;
	background-position:center;
	opacity:0;
	transform:scale(1);
	transition:opacity 1.4s ease,transform 9s ease-out;
}

.hero-slide.is-active{
	opacity:1;
	transform:scale(1.06);
}

.hero-dots{
	position:absolute;
	left:var(--vdb-gutter);
	bottom:24px;
	z-index:2;
	display:flex;
	gap:8px;
}

.hero-dots button{
	width:24px;
	height:6px;
	padding:0;
	border:0;
	border-radius:3px;
	background:rgba(255,255,255,.55);
	overflow:hidden;
	cursor:pointer;
	transition:width .4s;
}

.hero-dots button span{
	display:block;
	width:0;
	height:100%;
	background:var(--vdb-green);
}

.hero-dots button.is-active{width:64px;}

.hero-dots button.is-active span{
	width:100%;
	transition:width var(--vdb-slide-ms,6000ms) linear;
}

#home_slider .slider_box{
	position:absolute;
	z-index:3;
	top:calc(100% - clamp(300px,30vw,418px));
	right:max(var(--vdb-gutter),calc((100% - var(--vdb-wrap)) / 2 + var(--vdb-gutter)));
	bottom:auto;
	display:grid;
	grid-template-columns:repeat(2,minmax(0,320px));
	gap:clamp(12px,2.6vw,40px);
}

.slider-blok{
	display:flex;
	flex-direction:column;
	float:none;
	max-width:none;
	margin:0;
	padding:clamp(24px,2.6vw,36px);
	border-radius:12px;
	background:var(--vdb-ink);
	transition:transform .4s var(--vdb-ease),box-shadow .4s,opacity .7s ease,translate .9s var(--vdb-ease);
}

.slider-blok:hover{
	transform:translateY(-8px);
	box-shadow:0 26px 50px rgba(0,0,0,.35);
}

.vdb-js #home_slider .slider-blok{opacity:0;translate:0 40px;}
.vdb-js #home_slider.is-in .slider-blok{opacity:1;translate:0 0;}
.vdb-js #home_slider.is-in .slider-blok:nth-child(1){transition-delay:0s,0s,.15s,.15s;}
.vdb-js #home_slider.is-in .slider-blok:nth-child(2){transition-delay:0s,0s,.3s,.3s;}

.slider-blok h3{
	margin:0 !important;
	font-size:22px;
	letter-spacing:.3px;
}

.slider-blok p{
	margin:18px 0 0 !important;
	font-size:16px;
	line-height:1.9;
}

.slider-blok ul{
	display:flex;
	flex-direction:column;
	gap:12px;
	margin:30px 0 36px !important;
}

.slider-blok li{
	margin:0;
	line-height:20px;
	font-weight:600;
	letter-spacing:-.3px;
}

.slider-blok li::before{top:0;}

.slider-blok .btn{
	align-self:flex-start;
	display:inline-flex;
	align-items:center;
	gap:10px;
	margin-top:auto;
	padding:18px 22px;
	white-space:nowrap;
}

.slider-blok .btn::after{
	content:"\f061";
	font-family:FontAwesome;
	font-size:13px;
	font-weight:normal;
	transition:transform .3s var(--vdb-ease);
}

.slider-blok .btn:hover{transform:none;}
.slider-blok .btn:hover::after{transform:translateX(6px);}


/* 7. Tellers
   ========================================================================== */

#tellers{
	padding:clamp(56px,7vw,90px) 0 clamp(60px,7vw,100px);
	background:var(--vdb-grey);
}

#tellers .content_box{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:20px;
}

#tellers .content_box p{
	font-size:clamp(40px,5.4vw,72px);
	font-weight:500;
	line-height:1;
	letter-spacing:-2px;
	font-variant-numeric:tabular-nums;
	white-space:nowrap;
}

#tellers .content_box p span.small{
	position:relative;
	top:-.8em;
	margin-left:2px;
	font-size:.5em;
	letter-spacing:0;
}

#tellers .content_box > span{
	font-size:clamp(18px,1.6vw,24px);
	font-weight:500;
	letter-spacing:-.4px;
}

#tellers .content_box::after{
	content:"";
	width:60px;
	height:3px;
	background:var(--vdb-green);
	transition:width 1.2s var(--vdb-ease);
}

.vdb-js #tellers .content_box::after{width:0;}
.vdb-js #tellers.is-on .content_box::after{width:60px;}


/* 8. Kaarten (producten, referenties, machines)
   ========================================================================== */

/* Afbeelding zoomt binnen de kaart in plaats van de hele kaart te schalen */
.producten .card,
.producten-detail .card,
#projecten .card,
#referenties_list .card,
.machinesoverzicht .card,
.locatie-kaart{isolation:isolate;}

.producten .card::after,
.producten-detail .card::after,
#projecten .card::after,
#referenties_list .card::after,
.machinesoverzicht .card::after,
.locatie-kaart::after{
	content:"";
	position:absolute;
	inset:0;
	z-index:-1;
	background:inherit;
	background-size:cover;
	background-position:center;
	transition:transform .9s var(--vdb-ease);
}

.producten .card:hover,
.producten-detail .card:hover,
#projecten .card:hover,
#referenties_list .card:hover,
.machinesoverzicht .card:hover{transform:none;}

.producten a:hover .card::after,
.producten-detail a:hover .card::after,
#projecten a:hover .card::after,
#referenties_list a:hover .card::after,
.machinesoverzicht .item:hover .card::after{transform:scale(1.08);}

.producten a:hover,
.producten-detail a:hover,
#projecten a:hover,
#referenties_list a:hover{padding-right:1rem !important;}

/* custom.css schaalde deze blokken in z'n geheel (liep over de tekst eronder):
   nu zoomt alleen de foto, binnen de eigen rand */
.timeline-item .timeline-img-header:hover,
.thumb-carousel .card:hover,
.extrafotos .card:hover,
.vacature-item img:hover{transform:none;}

body .timeline-img-header,
.thumb-carousel .card,
.extrafotos .card{
	overflow:hidden;
	isolation:isolate;
}

body .timeline-img-header::after,
.thumb-carousel .card::after,
.extrafotos .card::after{
	content:"";
	position:absolute;
	inset:0;
	z-index:-1;
	background:inherit;
	background-size:cover;
	background-position:center;
	transition:transform .9s var(--vdb-ease);
}

body .timeline-content:hover .timeline-img-header::after,
.thumb-carousel .card:hover::after,
.extrafotos .card:hover::after{transform:scale(1.06);}

/* Fotoalbums: grote foto altijd volledig tonen (niet bijsnijden), net als de thumbnail */
.main-carousel .card{
	height:clamp(260px,48vw,570px);
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center;
	background-color:var(--vdb-grey);
}

.main-carousel .card::before{display:none;}

.producten .card{
	height:auto;
	aspect-ratio:373/280;
}

.producten .card::before{
	background:linear-gradient(180deg,transparent 45%,rgba(15,15,15,.55));
	opacity:.6;
	transition:opacity .5s;
}

.producten a:hover .card::before{opacity:1;}

/* Labels linksonder */
.producten .card-titel,
.producten-detail .card-titel,
#projecten .card-titel,
#referenties_list .card-titel{
	margin:0 0 8px;
	padding:6px 16px !important;
	border-radius:0 !important;
	background:#fff !important;
	color:var(--vdb-ink);
	font-size:clamp(18px,1.4vw,22px);
	letter-spacing:.3px;
	transition:background-color .35s,color .35s,padding .35s;
}

#projecten .card-titel,
#referenties_list .card-titel{
	color:var(--vdb-green);
	font-size:21px;
	letter-spacing:0;
}

.producten a:hover .card-titel,
.producten-detail a:hover .card-titel,
#projecten a:hover .card-titel,
#referenties_list a:hover .card-titel{
	padding-right:28px !important;
	background:var(--vdb-green) !important;
	color:#fff;
}

.producten .card .bottom-0 img,
.producten-detail .card .bottom-0 img,
#projecten .card .bottom-0 img,
#referenties_list .card .bottom-0 img,
.machinesoverzicht .card .bottom-0 img{transition:transform .35s var(--vdb-ease);}

.producten a:hover .card .bottom-0 img,
.producten-detail a:hover .card .bottom-0 img,
#projecten a:hover .card .bottom-0 img,
#referenties_list a:hover .card .bottom-0 img,
.machinesoverzicht .item:hover .card .bottom-0 img{transform:translateX(4px);}

/* Machines + referentie-overzicht: zachte grijze kaart die omhoog komt */
.machinesoverzicht .item,
#referenties_list .content_item{
	overflow:hidden;
	border:0;
	border-radius:12px;
	background:var(--vdb-grey);
	transition:transform .35s var(--vdb-ease),box-shadow .35s;
}

.machinesoverzicht .item{height:calc(100% - 30px);}

.machinesoverzicht .item:hover,
#referenties_list .content_item:hover{
	transform:translateY(-6px);
	box-shadow:0 18px 36px rgba(0,0,0,.1);
}

.machinesoverzicht a{
	display:block;
	height:100%;
	padding:0 !important;
}

.machinesoverzicht a:hover{padding-right:0 !important;}

.machinesoverzicht .card{
	height:auto !important;
	aspect-ratio:16/10;
}

#referenties_list .card{
	height:auto !important;
	aspect-ratio:306/240;
}

.machinesoverzicht h3{font-size:21px;}

.machinesoverzicht .px-3.py-4{padding:26px 28px 30px !important;line-height:1.8;}


/* 9. Carousel navigatie
   ========================================================================== */

.carousel-nav button{
	width:34px;
	height:64px;
	border-radius:3px 0 0 3px;
	background-color:var(--vdb-green) !important;
	background-image:var(--vdb-arrow-l) !important;
	background-size:20px 20px !important;
	transition:width .25s,background-color .25s,transform .25s;
}

.carousel-nav .owl-next{
	border-radius:0 3px 3px 0;
	background-image:var(--vdb-arrow-r) !important;
}

.carousel-nav button:hover{
	width:44px;
	background-color:var(--vdb-green-dark) !important;
}

.carousel-nav button.disabled{opacity:.4;}

/* Producten: pijlen op ~18vw van de rand, net boven het midden */
.producten ~ .container .carousel-nav{
	top:38%;
	transform:none;
}

.producten ~ .container .carousel-nav button{top:0;}
.producten ~ .container .carousel-nav .owl-prev{left:clamp(8px,18vw,340px);}
.producten ~ .container .carousel-nav .owl-next{right:clamp(8px,18vw,340px);}

/* Owl bolletjes (mobiel) als streepjes */
.owl-theme .owl-dots{margin-top:16px;}

.owl-theme .owl-dots .owl-dot span{
	width:8px;
	height:4px;
	margin:3px;
	border-radius:2px;
	background:#d4d4d4;
	transition:width .3s,background .3s;
}

.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span{
	width:22px;
	background:var(--vdb-green);
}


/* 10. Over ons / USP / video
   ========================================================================== */

#about p.pb-5{padding-bottom:64px !important;}

#about .btn{padding:18px 48px;}

#usp .container.d-flex{
	display:grid !important;
	grid-template-columns:repeat(5,minmax(0,1fr));
}

#usp .container .content_box{
	display:flex;
	flex-direction:column;
	align-items:center;
	float:none;
	width:auto;
	padding:28px clamp(14px,2vw,32px) 36px;
	border-right:0;
	border-left:1px solid var(--vdb-line);
	text-align:center;
}

#usp .content_box:first-child{border-left-color:transparent;}

#usp .content_box img{
	width:75px;
	height:75px;
	padding:0 !important;
	object-fit:contain;
	transition:transform .5s var(--vdb-spring);
}

#usp .content_box:hover img{transform:translateY(-10px) scale(1.06);}

#usp .content_box h4{
	max-width:200px;
	margin:44px 0 0 !important;
	font-size:16px;
	line-height:1.25;
	letter-spacing:.3px;
}

#usp .content_box h4::after{
	content:"";
	display:block;
	width:0;
	height:2px;
	margin:14px auto;
	background:var(--vdb-green);
	transition:width .4s var(--vdb-ease);
}

#usp .content_box:hover h4::after{width:60px;}

#usp .content_box p{
	max-width:200px;
	margin:0;
	font-size:15.5px;
	line-height:1.4;
}

#youtube hr{
	margin-bottom:56px !important;
	background-color:var(--vdb-line);
}

.video-wrapper{
	display:block;
	border-radius:12px;
	object-fit:cover;
	background:#f2eee4;
}


/* 11. Reviews
   ========================================================================== */

#reviews .reviews-header{margin-bottom:40px;}

.reviews-carousel .owl-stage-outer{padding:8px 0 34px;}
.reviews-carousel .item{padding:0;}

.review-card{
	padding:30px;
	border-radius:12px;
	background:var(--vdb-grey);
	box-shadow:0 8px 24px rgba(0,0,0,.06);
	transition:transform .35s var(--vdb-ease),box-shadow .35s;
}

.review-card:hover{
	transform:translateY(-6px);
	box-shadow:0 18px 36px rgba(0,0,0,.1);
}

.review-card-titel{
	margin:0;
	font-size:20px;
	letter-spacing:.2px;
}

.review-card-tekst{
	margin:18px 0 0;
	color:#333;
	line-height:1.9;
	opacity:1;
}

.review-lees-meer{
	margin:22px 0 0;
	color:var(--vdb-green);
	font-weight:600;
	letter-spacing:-.3px;
	text-underline-offset:3px;
	transition:color .25s;
}

.review-lees-meer:hover{color:var(--vdb-green-dark);}

.review-card-footer{
	margin-top:26px;
	padding-top:26px;
	border-top:1px solid #ddd;
}

.review-avatar-letter{font-weight:600;}
.review-card-naam{font-weight:500;letter-spacing:-.3px;}
.review-card-meta .rate-select-layer{color:#f5b800;}

.review-card-datum{
	font-size:14px;
	color:#555;
	opacity:1;
}

#reviews .carousel-nav{
	top:40%;
	transform:none;
}

#reviews .carousel-nav button{
	top:0;
	width:32px;
	border-radius:3px;
	transition:transform .25s,background-color .25s;
}

#reviews .carousel-nav button:hover{width:32px;}
#reviews .carousel-nav .owl-prev:hover{transform:translateX(-4px);}
#reviews .carousel-nav .owl-next:hover{transform:translateX(4px);}


/* 12. Woningstijlen + locatiekaarten
   ========================================================================== */

.woningstijlen-tekst{max-width:880px;}

.woningstijlen-row{margin-top:48px;}

.woningstijlen-kaart{
	display:flex;
	flex-direction:column;
	border-radius:12px;
	box-shadow:0 10px 40px rgba(0,0,0,.07);
	transition:box-shadow .35s;
}

.woningstijlen-kaart:hover{box-shadow:0 20px 50px rgba(0,0,0,.12);}

.woningstijlen-kaart-afbeeldingen{
	display:grid;
	grid-template-columns:1fr 1fr;
	height:auto;
	aspect-ratio:636/220;
}

.woningstijlen-kaart-afbeelding-wrap{
	display:block;
	min-width:0;
	overflow:hidden;
	background:var(--vdb-nav);
}

.woningstijlen-kaart .woningstijlen-kaart-afbeelding{
	display:block;
	width:100%;
	height:100%;
	transform:none;
	transition:transform .9s var(--vdb-ease);
}

.woningstijlen-kaart:hover .woningstijlen-kaart-afbeelding{transform:scale(1.08);}
.woningstijlen-kaart .woningstijlen-kaart-afbeelding-wrap + .woningstijlen-kaart-afbeelding-wrap .woningstijlen-kaart-afbeelding{transition-delay:.08s;}

.woningstijlen-kaart-badge{
	padding:12px 20px;
	border-radius:0;
	font-weight:600;
	letter-spacing:-.4px;
}

.woningstijlen-kaart-inhoud{
	display:flex;
	flex-direction:column;
	flex:1;
	padding:30px;
}

.woningstijlen-kaart-kop{
	margin:0 0 22px;
	font-size:19px;
	letter-spacing:.3px;
}

.woningstijlen-kaart-lijst{
	display:flex;
	flex-direction:column;
	gap:14px;
	margin:0;
}

.woningstijlen-kaart-lijst li{
	margin:0;
	font-weight:500;
	letter-spacing:-.3px;
	transition:transform .4s var(--vdb-ease);
}

.woningstijlen-kaart:hover .woningstijlen-kaart-lijst li{transform:translateX(6px);}
.woningstijlen-kaart-lijst li:nth-child(2){transition-delay:.05s;}
.woningstijlen-kaart-lijst li:nth-child(3){transition-delay:.1s;}
.woningstijlen-kaart-lijst li:nth-child(4){transition-delay:.15s;}
.woningstijlen-kaart-lijst li:nth-child(5){transition-delay:.2s;}

.woningstijlen-kaart-scheiding{
	margin:24px 0 20px;
	background-color:var(--vdb-line);
}

.woningstijlen-kaart-voetnoot{
	flex:1;
	color:#777;
	line-height:1.9;
}

.woningstijlen-kaart .btn-primary-flip{
	align-self:flex-start;
	margin-top:20px !important;
	padding:16px 24px !important;
}

.woningstijlen-knop-rij{margin-top:10px;}
.woningstijlen-knop-rij .btn{padding:18px 48px;}

.locatie-kaart{
	height:auto;
	aspect-ratio:636/320;
	border-radius:12px;
	background-color:#f2f2f2;
	color:#fff;
}

.locatie-kaart:hover{color:#fff;}
.locatie-kaart:hover::after{transform:scale(1.05);}

.locatie-kaart-badge{
	padding:12px 20px;
	border-radius:0;
	font-weight:600;
	letter-spacing:-.4px;
	transition:padding .35s;
}

.locatie-kaart:hover .locatie-kaart-badge{padding-right:32px;}

.locatie-kaart-pijl{transition:background .35s,color .35s,transform .35s;}
.locatie-kaart:hover .locatie-kaart-pijl{transform:rotate(-45deg) scale(1.1);}


/* 13. CTA banner (met parallax)
   ========================================================================== */

#CTA:not(.transparent){
	overflow:hidden;
	background-color:var(--vdb-ink);
}

#CTA:not(.transparent)::after{
	content:"";
	position:absolute;
	left:0;
	right:0;
	top:-15%;
	z-index:0;
	height:130%;
	background:inherit;
	background-size:cover;
	background-position:center;
	transform:translate3d(0,var(--vdb-py,0px),0);
	will-change:transform;
}

#CTA::before{background:rgba(15,15,15,.58);}
#CTA.transparent::before{background:transparent;}

#CTA .titel.w-50{
	width:auto !important;
	max-width:640px;
	font-size:clamp(38px,5vw,66px);
	line-height:1.15;
	margin-bottom:0;
}

#CTA hr.w-25{
	width:min(324px,60%) !important;
	height:1px;
	margin:36px 0 26px;
	border:0;
	background:rgba(255,255,255,.7);
	opacity:1;
}

#CTA p{line-height:1.9;}


/* 14. Projecten
   ========================================================================== */

#projecten .card{
	height:auto;
	aspect-ratio:306/240;
}

#projecten .card::before{opacity:.5;}

#projecten .row > .col-3{justify-content:center;}

#projecten .btn-transparent{
	display:inline-flex;
	align-items:center;
	gap:22px;
	padding:0 !important;
	color:var(--vdb-ink);
	font-weight:600;
	letter-spacing:-.3px;
	transition:gap .3s,color .3s;
}

#projecten .btn-transparent:hover{
	gap:32px;
	color:var(--vdb-green);
}

#projecten .btn-transparent i,
#projecten .btn-transparent:hover i{
	margin:0 !important;
	padding:0 !important;
}

.vdb-track{display:contents;}

/* .row > * geldt niet meer binnen de track: gutter zelf zetten */
.vdb-track > .referenties{
	padding-left:calc(var(--bs-gutter-x,1.5rem) * .5);
	padding-right:calc(var(--bs-gutter-x,1.5rem) * .5);
}


/* 15. Formulier
   ========================================================================== */

#offerte .form_box{
	padding:clamp(28px,4.4vw,56px);
	border-radius:0;
	box-shadow:0 10px 60px rgba(0,0,0,.07);
}

#offerte .form_box > hr.w-50{
	width:min(592px,50%) !important;
	height:1px;
	margin:0 0 22px;
	border:0;
	background:var(--vdb-line);
	opacity:1;
}

#offerte .titel{
	width:auto !important;
	max-width:300px;
	margin-bottom:36px;
	font-size:clamp(26px,2.4vw,32px);
	line-height:1.2;
}

.form-control{
	padding-top:13px;
	padding-bottom:13px;
	border:0;
	border-bottom:2px solid transparent;
	border-radius:0;
	background-color:var(--vdb-grey);
	color:var(--vdb-ink);
	transition:border-color .25s,background-color .25s;
}

.form-control:focus{
	border-bottom-color:var(--vdb-green);
	background-color:#f1f1f1;
	box-shadow:none;
	color:var(--vdb-ink);
}

.form-group label{
	margin-bottom:18px;
	font-weight:600;
	letter-spacing:-.3px;
}

.form-group .form-check label{letter-spacing:0;}

.input-icon::before{transition:color .25s;}
.input-icon:focus-within::before{color:var(--vdb-green);}

@media (min-width:992px){
	#offerte form.row > .form-group.col-md-6:nth-child(-n+8){
		flex:0 0 33.3333%;
		max-width:33.3333%;
	}
}

#offerte input[type="file"].form-control{
	display:block !important;
	width:100% !important;
	max-width:420px;
	height:52px;
	margin-bottom:20px;
	padding:8px 12px 8px 38px;
	font-size:15px;
	cursor:pointer;
}

#offerte input[type="file"].form-control:hover{background-color:#eef8f3;}

#offerte input[type="file"]::file-selector-button{
	margin:0 12px 0 0;
	padding:8px 12px;
	border:0;
	border-right:1px solid #999;
	border-radius:0;
	background:#e9e9e9;
	color:inherit;
	font:inherit;
}

#offerte input[type="file"]::-webkit-file-upload-button{
	margin:0 12px 0 0;
	padding:8px 12px;
	border:0;
	border-right:1px solid #999;
	background:#e9e9e9;
	color:inherit;
	font:inherit;
}

/* Radio: groene ring met stip die inveert */
.form-check-input[type="radio"]{
	width:17px;
	height:17px;
	margin-top:.3em;
	border:1.5px solid #999;
	background-image:none !important;
	background-color:#fff;
	box-shadow:inset 0 0 0 9px #fff;
	cursor:pointer;
	transition:border-color .25s,box-shadow .3s var(--vdb-spring),background-color 0s;
}

.form-check-input[type="radio"]:checked{
	border-color:var(--vdb-green);
	background-color:var(--vdb-green);
	box-shadow:inset 0 0 0 3px #fff;
}

.form-check-input[type="radio"]:focus{box-shadow:inset 0 0 0 9px #fff,0 0 0 .2rem rgba(34,173,116,.2);}
.form-check-input[type="radio"]:checked:focus{box-shadow:inset 0 0 0 3px #fff,0 0 0 .2rem rgba(34,173,116,.2);}

#offerte input[type="submit"].btn{padding:18px 48px !important;}


/* 16. Footer + copyright
   ========================================================================== */

#footer{padding:clamp(60px,7vw,110px) 0 clamp(50px,6vw,90px);}

#footer h3{
	font-size:21px;
	letter-spacing:.3px;
}

#footer h3:empty{display:none;}

#footer .pb-100{padding-bottom:60px !important;}
#footer .pb-100 > .mb-4 > h3{margin-bottom:50px !important;}

#footer .pb-100 > .mb-4 > p{
	position:relative;
	margin:0;
	padding-left:30px;
	line-height:1.9;
}

#footer .pb-100 > .mb-4 > h3 + p::before{
	content:"\f041";
	position:absolute;
	left:2px;
	top:0;
	color:var(--vdb-green);
	font-family:FontAwesome;
	font-size:17px;
}

#footer a[href^="tel"],
#footer a[href^="mailto"]{
	position:relative;
	display:inline-block;
	padding-left:30px;
	transition:color .25s,padding .3s;
}

#footer a[href^="tel"]::before,
#footer a[href^="mailto"]::before{
	position:absolute;
	left:0;
	top:0;
	color:var(--vdb-green);
	font-family:FontAwesome;
	font-size:15px;
}

#footer a[href^="tel"]::before{content:"\f095";}
#footer a[href^="mailto"]::before{content:"\f0e0";}

#footer a[href^="tel"]:hover,
#footer a[href^="mailto"]:hover{padding-left:34px;}

#footer .socials-icon i{
	width:28px;
	height:28px;
	background:#fff;
	color:#000;
}

#footer .socials-icon:hover i{
	background:var(--vdb-green);
	color:#fff;
	transform:translateY(-3px);
}

#footer .col-sm-6 > p.mb-2{
	margin-bottom:28px !important;
	font-weight:500;
	letter-spacing:-.2px;
}

#footer .table-responsive{margin-bottom:62px !important;}

#footer .table{
	margin:0;
	color:#fff;
}

#footer .openingstijden_item{
	height:auto;
	line-height:1.5;
	transition:background-color .25s;
}

#footer .openingstijden_item td{
	padding:22px 8px;
	border-top:1px solid rgba(255,255,255,.25) !important;
	border-bottom:0;
	background:transparent;
	transition:padding .3s;
}

#footer .openingstijden_item:hover{background-color:rgba(255,255,255,.04);}
#footer .openingstijden_item:hover td:nth-child(2){padding-left:14px;}
#footer .openingstijden_item td:nth-child(3){text-align:right;}
#footer .openingstijden_item td:nth-child(4){display:none;}

#footer .alert-warning{
	margin-top:18px !important;
	padding:18px 28px;
	border:0;
	border-radius:4px;
	background:#fff3cd;
	color:#7a5a00;
	font-size:15.5px;
	line-height:1.55;
}

#copyright{border-top:1px solid #222;}

#copyright.py-5{
	padding-top:54px !important;
	padding-bottom:40px !important;
}

#return-to-top{
	display:grid;
	place-items:center;
	width:46px;
	height:54px;
	padding:0;
	left:50%;
	margin-left:-23px;
	border-radius:0;
	background:var(--vdb-nav);
	color:#fff;
	transition:background .25s,height .3s;
}

#return-to-top:hover{
	height:62px;
	background:var(--vdb-green);
	color:#fff;
}


/* 17. Contact popup (Gerben)
   ========================================================================== */

#contactpopupbox{
	right:clamp(10px,1.4vw,20px);
	bottom:clamp(10px,1.4vw,20px);
	font-size:14px;
	transition:transform .4s var(--vdb-ease),opacity .35s;
}

#contactpopup1{
	position:relative;
	align-items:center;
	height:110px;
	padding:0 30px 0 20px;
	border-radius:22px;
	background:var(--vdb-ink);
	box-shadow:0 14px 40px rgba(0,0,0,.3);
	cursor:pointer;
	transition:transform .4s var(--vdb-ease),box-shadow .35s,padding .4s var(--vdb-ease);
}

#contactpopup1:hover{
	transform:translateY(-6px);
	box-shadow:0 22px 50px rgba(0,0,0,.4);
}

#contactpopup1 .content_1,
#contactpopupbox:hover #contactpopup1 .content_1{
	position:relative;
	flex:none;
	align-self:flex-end;
	width:100px;
	height:110px;
	padding:0;
	border-radius:0;
	background:none;
}

#contactpopup1 .content_1 img{
	left:0;
	bottom:0;
	width:100px;
	transform-origin:bottom center;
	transition:transform .45s cubic-bezier(.3,1.5,.5,1);
}

#contactpopup1:hover .content_1 img{transform:scale(1.08) rotate(-3deg);}

#contactpopup1 .content_2,
#contactpopupbox:hover #contactpopup1 .content_2{
	width:280px;
	max-width:none;
	padding:0 0 0 24px;
	overflow:hidden;
	border-radius:0;
	background:none;
	transition:width .4s var(--vdb-ease),padding .4s var(--vdb-ease),opacity .3s;
}

#contactpopup1 .content_2 > *{width:256px;}

#contactpopup1 .content_2 h4{
	margin:0;
	padding:0 !important;
	font-size:16px;
	line-height:1.2;
	letter-spacing:.3px;
}

#contactpopup1 .content_2 p{
	margin:14px 0 0;
	font-size:14px;
	line-height:1.1;
}

#contactpopup1 .content_2 span{color:var(--vdb-green);}

/* Klapt in tot alleen de foto vlak boven de footer */
#contactpopupbox.is-min #contactpopup1{padding-right:20px;}

#contactpopupbox.is-min #contactpopup1 .content_2{
	width:0;
	padding-left:0;
	opacity:0;
}

#contactpopup2{
	max-width:min(420px,calc(100vw - 20px));
	max-height:calc(100vh - 40px);
	overflow:auto;
	border-radius:22px;
	box-shadow:0 22px 50px rgba(0,0,0,.4);
}

#contactpopup2 h3{font-size:20px;}
#contactpopup2 h4{font-size:17px;}
#contactpopup2 .content_2,
#contactpopup2 .content_3{border-radius:12px;}
#closepopup{cursor:pointer;transition:transform .3s;}
#closepopup:hover{transform:rotate(90deg);}


/* 18. Vervolgpagina's
   ========================================================================== */

#slider{
	min-height:clamp(340px,40vw,560px);
	overflow:hidden;
	background-color:var(--vdb-ink);
}

#slider::before{
	content:"";
	position:absolute;
	inset:0;
	background:inherit;
	background-size:cover;
	background-position:center;
	animation:vdbKenburns 14s ease-out both;
}

.slider-gradient{background:linear-gradient(180deg,rgba(15,15,15,.45) 0%,rgba(15,15,15,.15) 45%,rgba(15,15,15,.75) 100%);}

.slider-overlay{
	display:flex;
	align-items:flex-end;
	pointer-events:none;
}

.slider-overlay .container{pointer-events:auto;}

.slidervervolg_box{
	position:static;
	margin:0;
	padding-bottom:clamp(50px,6vw,80px);
}

.slider-overlay .slidervervolg_box h1{
	margin:0 !important;
	font-size:clamp(42px,6vw,80px) !important;
	line-height:1.05;
	animation:vdbUp .9s .1s var(--vdb-ease) both;
}

.slider-overlay .slidervervolg_box h1::after{
	content:"";
	display:block;
	width:120px;
	height:3px;
	margin-top:26px;
	background:var(--vdb-green);
	transform-origin:left;
	animation:vdbBar 1s .45s var(--vdb-ease) both;
}

@keyframes vdbKenburns{
	from{transform:scale(1.12);}
	to{transform:scale(1);}
}

@keyframes vdbUp{
	from{opacity:0;transform:translateY(30px);}
	to{opacity:1;transform:none;}
}

@keyframes vdbBar{
	from{transform:scaleX(0);}
	to{transform:scaleX(1);}
}

/* Tijdlijn (over ons) — "body" erbij: de plugin zet zijn eigen <style> ná deze file */
body .timeline::before{
	width:2px;
	background:var(--vdb-line);
}

body .timeline::after{
	content:"";
	position:absolute;
	top:0;
	left:50%;
	width:2px;
	height:var(--vdb-tl,0%);
	background:var(--vdb-green);
	transform:translateX(-50%);
}

body .timeline-img{
	z-index:1;
	width:16px;
	height:16px;
	margin-left:-8px;
	margin-top:14px;
	box-shadow:0 0 0 6px #fff;
}

body .timeline-content{
	border:0;
	border-radius:12px;
	background:var(--vdb-grey);
	transition:box-shadow .35s;
}

body .timeline-content:hover{box-shadow:0 18px 36px rgba(0,0,0,.1);}

body .timeline-img-header{
	border-radius:12px 12px 0 0;
	background-size:cover;
}

body .timeline-content .date{
	width:auto;
	padding:8px 14px;
	border-radius:3px;
	background:var(--vdb-ink);
	color:#fff;
	font-size:15px;
	font-weight:600;
	white-space:nowrap;
}

body .timeline-tekst h3{font-size:20px;}

body .timeline-card .timeline-tekst{padding-top:28px;}

body .timeline-tekst img{border-radius:8px;}

@media (max-width:768px){
	body .timeline::after{left:20px;}
}


/* 19. Scroll-reveal (klassen gezet door refresh.js)
   ========================================================================== */

.vdb-reveal{
	opacity:0;
	translate:0 36px;
}

.vdb-reveal.is-in{
	opacity:1;
	translate:0 0;
	transition:opacity .8s ease var(--vdb-d,0s),translate .9s var(--vdb-ease) var(--vdb-d,0s);
}


/* 20. Responsive
   ========================================================================== */

/* Tot XL: hamburger, menubalk over de volle breedte */
@media (max-width:1199.98px){
	.top-header{padding:0 0 68px;}

	.menu-header{
		max-width:100%;
		height:68px;
		padding-top:0;
		flex-wrap:nowrap !important;
		gap:10px;
		transform:translateX(-50%) translateY(70px) !important;
	}

	.menu-header.is-stuck{transform:translateX(-50%) translateY(0) !important;}

	.menu-header.px-5{
		padding-left:var(--vdb-gutter) !important;
		padding-right:var(--vdb-gutter) !important;
	}

	.menu-header > div:nth-child(1){order:1;}

	.menu-header > div:nth-child(3){
		order:2;
		display:block;
		width:auto;
		margin-left:auto;
		padding:0;
	}

	.menu-header > div:nth-child(2){
		order:3;
		margin:0 !important;
	}

	.menu-header > div:nth-child(3) .btn{width:auto;}

	.menu-header .logo-img{height:38px;}
	.menu-header .btn-primary{height:48px;}
	.menu-header .navbar-toggler{display:grid;}

	#navbarMain{display:none !important;}
}

/* Tot 1000px: hero-kaarten onder de foto als swipe-rij */
@media (max-width:999.98px){
	#home_slider{
		height:auto;
		background-color:var(--vdb-grey);
	}

	#home_slider.has-media{background-image:none !important;}

	#home_slider .hero-media{
		position:relative;
		inset:auto;
		height:460px;
	}

	.hero-dots{bottom:16px;}

	#home_slider .slider_box{
		position:static;
		display:flex !important;
		gap:12px;
		margin-top:20px;
		padding:0 var(--vdb-gutter) 6px;
		overflow-x:auto;
		scroll-snap-type:x mandatory;
		scroll-padding-left:var(--vdb-gutter);
		scrollbar-width:none;
	}

	#home_slider .slider_box::-webkit-scrollbar{display:none;}

	.slider-blok,
	.slider-blok:first-child{
		display:flex !important;
		flex:0 0 46%;
		scroll-snap-align:start;
	}

	.slider-blok:hover{transform:none;box-shadow:none;}

	.slider-blok ul{margin:22px 0 26px !important;}

	#usp .container.d-flex{grid-template-columns:repeat(2,minmax(0,1fr));}
	#usp .content_box:nth-child(odd){border-left-color:transparent;}
	#usp .content_box:nth-child(n+3){border-top:1px solid var(--vdb-line);}

	.producten ~ .container .carousel-nav{display:none;}
}

@media (max-width:991.98px){
	#reviews .carousel-nav{display:none;}
}

@media (max-width:767.98px){
	.top-header{padding-top:0;}

	.top-info-bar{gap:12px;}

	.top-reviews{
		width:auto;
		padding-bottom:0;
		border-bottom:0;
		text-align:left;
	}

	.top-social{flex:none;}

	#slider{margin-top:0;}

	#tellers .row > [class*="col-"]{
		flex:0 0 33.3333%;
		max-width:33.3333%;
		padding-left:4px;
		padding-right:4px;
	}

	/* Projecten: horizontale swipe-rij tot aan de schermrand */
	#projecten .vdb-track{
		display:flex;
		flex:1 0 100%;
		gap:10px;
		max-width:none;
		margin:0 calc(12px - var(--vdb-gutter));
		padding:0 var(--vdb-gutter);
		overflow-x:auto;
		scroll-snap-type:x mandatory;
		scroll-padding-left:var(--vdb-gutter);
		scrollbar-width:none;
	}

	#projecten .vdb-track::-webkit-scrollbar{display:none;}

	#projecten .vdb-track > .referenties{
		flex:0 0 78%;
		max-width:78%;
		padding:0;
		scroll-snap-align:start;
	}

	#projecten .row > .col-3{
		flex:0 0 100%;
		max-width:100%;
		margin-top:20px;
	}

	#projecten .btn-transparent{
		justify-content:center;
		gap:14px;
		width:100%;
		padding:16px !important;
		border:1px solid var(--vdb-green);
		border-radius:3px;
		color:var(--vdb-green);
	}

	#projecten .btn-transparent:hover{gap:20px;}

	/* Gerben als rond bolletje */
	#contactpopupbox.d-none{display:block !important;}

	#contactpopup1{
		justify-content:center;
		width:64px;
		height:64px;
		padding:0;
		overflow:hidden;
		border:3px solid var(--vdb-green);
		border-radius:50%;
	}

	#contactpopup1 .content_1,
	#contactpopupbox:hover #contactpopup1 .content_1{
		width:58px;
		height:64px;
	}

	#contactpopup1 .content_1 img{width:58px;}

	#contactpopup1 .content_2,
	#contactpopupbox:hover #contactpopup1 .content_2{display:none;}

	#contactpopupbox.is-min #contactpopup1{padding-right:0;}

	body.vdb-home:not(.is-scrolled) #contactpopupbox{
		opacity:0;
		transform:translateY(90px);
		pointer-events:none;
	}

	#footer .pb-100{padding-bottom:28px !important;}
	#footer .pb-100 > .mb-4 > h3{margin-bottom:24px !important;}
	#footer .container > .row > div:first-child{margin-bottom:44px;}

	/* Knoppenparen ("bericht ons" + outline-knop) op gelijke hoogte.
	   custom.css gaf alleen de outline-knop margin-top:15px; nu krijgen beide dezelfde marge,
	   zodat ze naast elkaar gelijk staan en onder elkaar ruimte houden. */
	.btn-primary-flip{margin-top:0;}

	.btn-primary.me-3,
	.btn-primary + .btn-primary-flip{
		margin-top:12px;
		vertical-align:top;
	}
	#footer .table-responsive{margin-bottom:28px !important;}
	#footer .openingstijden_item td{padding:16px 4px;}
}

/* Smal: compacte topbar, knop alleen icoon, kaarten 1 per rij */
@media (max-width:639.98px){
	.top-info-bar.d-flex{
		grid-template-columns:auto 1fr;
		height:46px;
	}

	.top-social{display:none !important;}
	.gr-label{display:none;}
	.top-tel{font-size:14px;}

	.menu-header{transform:translateX(-50%) translateY(46px) !important;}

	.menu-header > div:nth-child(3) .btn-primary{
		justify-content:center;
		width:48px;
		padding:0 !important;
		gap:0;
		font-size:0;
	}

	.menu-header .btn-primary::before{font-size:18px;}

	#home_slider .hero-media{height:340px;}

	.slider-blok,
	.slider-blok:first-child{flex-basis:82%;}

	#tellers{padding:44px 0 52px;}
	#tellers .content_box{gap:10px;}

	#tellers .content_box p{
		font-size:27px;
		letter-spacing:-.8px;
	}

	#tellers .content_box > span{font-size:15px;}

	#usp .container.d-flex{grid-template-columns:minmax(0,1fr);}

	#usp .container .content_box{
		display:grid;
		grid-template-columns:64px 1fr;
		column-gap:18px;
		align-items:center;
		justify-items:start;
		padding:20px 0;
		border-left:0;
		border-top:1px solid var(--vdb-line);
		text-align:left;
	}

	#usp .content_box:first-child{border-top-color:transparent;}

	#usp .content_box img{
		grid-row:span 2;
		width:60px;
		height:60px;
	}

	#usp .content_box h4,
	#usp .content_box p{max-width:none;}

	#usp .content_box h4{margin:0 !important;}
	#usp .content_box h4::after{margin:8px 0;}

	#about p.pb-5{padding-bottom:32px !important;}

	#offerte .form_box{
		padding:0;
		box-shadow:none;
	}

	#offerte input[type="file"].form-control{padding-left:12px;}

	#footer .pb-100 > .mb-4 > h3{margin-bottom:24px !important;}
}

@media (prefers-reduced-motion:reduce){
	*,
	*::before,
	*::after{
		animation-duration:.01ms !important;
		animation-iteration-count:1 !important;
		transition-duration:.01ms !important;
		scroll-behavior:auto !important;
	}
}