@font-face {

	font-family: "Poppins";

	src: url("../fonts/Poppins-Regular-400.woff2") format("woff2");

	font-style: normal;

	font-weight: 400;

	font-display: swap;

}



@font-face {

	font-family: "Poppins";

	src: url("../fonts/Poppins-Bold-700.woff2") format("woff2");

	font-style: normal;

	font-weight: 700;

	font-display: swap;

}



:root {

	--osm-content-width: 1320px;

	--osm-wide-width: 1600px;

	--osm-page-gutter: clamp(20px, 4vw, 60px);

	--hero-video-strip: 40px;

	--subpage-hero-height: 150px;

	--frontpage-banner-height: 520px;

	--bs-font-sans-serif:

		"Poppins",

		system-ui,

		-apple-system,

		"Segoe UI",

		Arial,

		sans-serif;

	--bs-body-font-family: var(--bs-font-sans-serif);

}

a{

	text-decoration: none!important;

}

mark{

	padding:0px!important;

}

p,li{

	font-size:15px;

}

.navbar-toggler{
	border:0px solid black!important;
}
.navbar-toggler:focus{
	box-shadow:none!important;
}
@media (max-width: 1000px) {
.navbar-collapse{
	margin-top:50px;
}
}
/* Article mag zelf altijd schermbreed zijn */

.site-main > article {

	width: 100%;

	max-width: none;

	margin-right: 0;

	margin-left: 0;

	padding-right: 0;

	padding-left: 0;

}

.navbar-toggler{
	height:61px!important;
}

/* Standaard paginatitel en Gutenberg-blokken */

.site-main > article > * {

	width: calc(100% - (2 * var(--osm-page-gutter)));

	max-width: var(--osm-content-width);

	margin-right: auto;

	margin-left: auto;

	margin-bottom: 0;

}



/* Gutenberg: brede uitlijning */

.site-main > article > .alignwide {

	max-width: var(--osm-wide-width);

}



/* Gutenberg: volledige schermbreedte */

.site-main > article > .alignfull {

	width: 100%;

	max-width: none;

	margin-right: 0;

	margin-left: 0;

	padding:0;

	margin:0;

}

.wp-block-columns.are-vertically-aligned-center{

	margin:0;

}

/* Normale contentbreedte binnen een full-width Gutenberg Group */

.site-main > article > .wp-block-group.alignfull > :not(.alignwide):not(.alignfull) {

	width: calc(100% - (2 * var(--osm-page-gutter)));

	max-width: var(--osm-content-width);

	margin-right: auto;

	margin-left: auto;

}

html {

	scroll-behavior: smooth;

}



body {

	display: flex;

	min-height: 100vh;

	flex-direction: column;

	font-family: var(--bs-body-font-family);

}



h1,

h2,

h3 {

	font-weight: 700;

}



.page:not(.home) .site-main h1 {

	font-size: calc(1.325rem + 0.9vw);

}



@media (min-width: 1200px) {

	.page:not(.home) .site-main h1 {

		font-size: 2rem;

	}

}



img {

	max-width: 100%;

	height: auto;

}



/* ==================================================

   ALGEMENE CONTENT

   ================================================== */



.site-main {

	flex: 1;

	padding-top: 3rem;

	padding-bottom: 3rem;

}



/*.site-main article:not(:last-child) {

	margin-bottom: 3rem;

}*/



.front-page-main {

	padding-top: 0;

	padding-bottom: 0;

}



/* ==================================================

   HEADER

   ================================================== */



.site-header {

	position: relative;

	z-index: auto;

	overflow: visible;

	margin: 0 1vw;

	background: #fff;

}



/* ==================================================

   HEADER VIDEOVENSTER

   ================================================== */



/*

 * Alleen dit element snijdt de header-video en overlay af.

 * De header zelf blijft overflow: visible houden voor dropdowns.

 */

.header_video_window {

	position: absolute;

	z-index: 0;

	right: 0;

	bottom: 0;

	left: 0;

	height: var(--hero-video-strip);

	overflow: hidden;

	border-radius: 0 30px 0 0;

}



/* Dezelfde overlay als op de homepagehero */

.header_video_window::after {

	content: "";

	position: absolute;

	z-index: 1;

	inset: 0;

	background: linear-gradient(

		90deg,

		rgba(0, 0, 0, 0.35) 0%,

		rgba(0, 0, 0, 0.20) 42%,

		rgba(0, 0, 0, 0.10) 100%

	);

	pointer-events: none;

}



/*

 * De video is hoger dan het zichtbare venster.

 * De header toont de eerste 40 pixels.

 */

.header_bg_video {

	position: absolute;

	z-index: 0;

	top: 0;

	left: 0;

	display: block;

	width: 100%;

	height: calc(

		var(--frontpage-banner-height) +

		var(--hero-video-strip)

	);

	object-fit: cover;

	object-position: center;

	pointer-events: none;

}



.header_video_window--subpage {

	border-radius: 0 20px 0 0;

}



.header_bg_video--subpage {

	height: calc(

		var(--subpage-hero-height) +

		var(--hero-video-strip)

	);

}



.header_bg_video_desktop {

	display: block;

}



.header_bg_video_mobile {

	display: none;

}



/* ==================================================

   HEADER NAVIGATIE

   ================================================== */



.site-header .navbar {

	position: relative;

	z-index: 100;

	padding: 0;

	overflow: visible;

}

.site-header .navbar-nav {

	--bs-nav-link-font-size: 15px;

}

.site-header .navbar > .container {

	align-items: stretch;

	overflow: visible;

}



.site-header .navbar-collapse,

.site-header .navbar-nav,

.site-header .nav-item {

	overflow: visible;

	gap:15px;

}

.nav-link{

	color:#333!important;

}

.site-header .dropdown-menu {

	z-index: 1100;

}



.navbar-nav {

	margin-left: auto;

}



.navbar-expand-lg .navbar-nav {

	margin-top: -28px;

}

.site-header .current-menu-item > .nav-link,

.site-header .current-menu-parent > .nav-link,

.site-header .current-menu-ancestor > .nav-link {

	color: #e30613!important;

	font-weight: 700;

}

.button_header_01{

	font-weight:bold;

}

.navbar .container{

	max-width: 98vw!important;

}

/* ==================================================

   LOGO EN WITTE ACHTERGROND

   ================================================== */



.site-header .navbar-brand {

	position: relative;

	display: flex;

	align-self: stretch;

	align-items: center;

	justify-content: center;

	flex: 0 0 175px;

	width: 220px;

	min-height: 100px;

	margin: 0;

	padding: 0;

	background: #fff;

	border-radius: 0 0 48px 0;

}



/* Witte vlak doortrekken tot de linker schermrand */

.site-header .navbar-brand::before {

	content: "";

	position: absolute;

	top: 0;

	right: calc(100% - 1px);

	width: 100vw;

	height: 100%;

	background: #fff;

}



/* Logo boven de witte achtergrond */

.site-header .navbar-brand img {

	position: relative;

	z-index: 1;

	display: block;

	width: 85px;

	height: auto;

	max-height: 110px;

	margin-left: -20px;

}



/* ==================================================

   DESKTOP DROPDOWNS

   ================================================== */



@media (min-width: 992px) {

	.navbar .dropdown:hover > .dropdown-menu,

	.navbar .dropdown:focus-within > .dropdown-menu {

		display: block;

	}

}



/* ==================================================

   HOMEPAGE HERO

   ================================================== */



.frontpage_banner {

	position: relative;

	z-index: 1;

	overflow: hidden;

	isolation: isolate;

	margin: 0 1vw;

	padding: 103px 0 128px;

	color: #fff;

	background-color: #333;

	background-image: url("/wp-content/uploads/2026/09/frontpage-banner-v1.webp");

	background-repeat: no-repeat;

	background-position: center;

	background-size: cover;

	border-radius: 30px 0 30px 30px;

	box-shadow: -1px 7px 6px rgba(0, 0, 0, 0.10);

}



.subpage_banner {

	position: relative;

	z-index: 1;

	height: var(--subpage-hero-height);

	overflow: hidden;

	isolation: isolate;

	margin: 0 1vw;

	border-radius: 20px 0 20px 20px;

}



/* Achtergrondvideo homepagehero */

.hero_bg_video {

	position: absolute;

	z-index: -2;

	top: calc(var(--hero-video-strip) * -1);

	left: 0;

	display: block;

	width: 100%;

	height: calc(100% + var(--hero-video-strip));

	object-fit: cover;

	object-position: center;

	pointer-events: none;

}



.hero_bg_video_desktop {

	display: block;

}



.hero_bg_video_mobile {

	display: none;

}



/* Donkere overlay */

.frontpage_banner::before,

.subpage_banner::before {

	content: "";

	position: absolute;

	z-index: -1;

	inset: 0;

	background: linear-gradient(

		90deg,

		rgba(0, 0, 0, 0.35) 0%,

		rgba(0, 0, 0, 0.20) 42%,

		rgba(0, 0, 0, 0.10) 100%

	);

	pointer-events: none;

}



/* Tekst en te-koopbord boven video en overlay */

.frontpage_banner_inner,

.hero_tekoop_wrap {

	position: relative;

	z-index: 2;

}



.frontpage_banner_inner {

	margin-right: 5vw;

	margin-left: 5vw;

}

.homepage-intro {

	margin-top: 2rem;

	margin-bottom: 2rem;

	text-align: center;

}



.homepage-intro h2 {

	margin: 0 0 12px;

	font-size: clamp(35px, 0vw, 42px);

	font-weight: 700;

	line-height: 1.15;

}



.homepage-intro h2 span {

	color: #e30613;

}



.homepage-intro p {

	max-width: 1400px;

	margin: 0 auto;

	font-size: 18px;

	line-height: 1.55;

}



@media (max-width: 767.98px) {

	.homepage-intro {

		margin-top: 2rem;

		margin-bottom: 2rem;

	}



	.homepage-intro h2 {

		font-size: 28px;

	}



	.homepage-intro p {

		font-size: 16px;

	}



	.homepage-intro p br {

		display: none;

	}

}

/* ==================================================

   HERO TEKST

   ================================================== */



.frontpage_banner h1 {

	margin-top: 0;

	letter-spacing: -1.95px;

	font-size: 60px;

	font-weight: 700;

	line-height: 1.1;

}



.frontpage_banner p {

	max-width: 600px;

	font-size: 20px;

	line-height: 1.6;

}



.frontpage_banner p a {

	color: #fff;

	text-decoration: underline;

}



.frontpage_banner p a:hover,

.frontpage_banner p a:focus {

	color: #fff;

	text-decoration: none;

}



/* ==================================================

   HERO BUTTON

   ================================================== */



.frontpage_buttons a {

	text-decoration: none;

}



.frontpage_button_01 {

	display: inline-block;

	padding: 10px 40px;

	color: #fff;

	background: #e30613;

	border-radius: 41px;

	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);

	font-size: 16px;

	font-weight: 700;

	line-height: 1.5;

	transition:

		background-color 0.2s ease,

		transform 0.2s ease;

}



.frontpage_button_01:hover,

.frontpage_button_01:focus {

	color: #fff;

	background: #c9000b;

	transform: translateY(-1px);

}



/* ==================================================

   TE-KOOPBORD

   ================================================== */



.hero_tekoop_wrap {

	position: absolute;

	z-index: 3;

	right: 2vw;

	bottom: -150px;

	width: clamp(140px, 12vw, 175px);

	pointer-events: none;

	perspective: 500px;

	transform-style: preserve-3d;

}



.hero_tekoop_paal,

.hero_tekoop_bord {

	display: block;

	width: 100%;

	height: auto;

}



.hero_tekoop_paal {

	position: relative;

	z-index: 1;

}



.hero_tekoop_bord {

	position: absolute;

	z-index: 2;

	inset: 0;

	transform-origin: 46% 11%;

	transform-style: preserve-3d;

	backface-visibility: hidden;

	will-change: transform;

	animation: tekoop-bord-wind 12s

		cubic-bezier(0.45, 0.05, 0.25, 1)

		infinite;

}



@keyframes tekoop-bord-wind {

	0% {

		transform:

			rotateX(-6deg)

			scaleY(1.01)

			translateY(-0.5px);

	}



	10% {

		transform:

			rotateX(2.5deg)

			scaleY(0.998)

			translateY(0.25px);

	}



	18% {

		transform:

			rotateX(-5deg)

			scaleY(1.008)

			translateY(-0.4px);

	}



	26% {

		transform:

			rotateX(-2deg)

			scaleY(1.002)

			translateY(0);

	}



	34% {

		transform:

			rotateX(5deg)

			scaleY(0.99)

			translateY(0.6px);

	}



	42% {

		transform:

			rotateX(-16deg)

			scaleY(1.03)

			translateY(-1.8px);

	}



	49% {

		transform:

			rotateX(3deg)

			scaleY(0.996)

			translateY(0.3px);

	}



	58% {

		transform:

			rotateX(-8deg)

			scaleY(1.014)

			translateY(-0.8px);

	}



	68% {

		transform:

			rotateX(1.5deg)

			scaleY(0.999)

			translateY(0.15px);

	}



	76% {

		transform:

			rotateX(4deg)

			scaleY(0.993)

			translateY(0.45px);

	}



	84% {

		transform:

			rotateX(-13deg)

			scaleY(1.024)

			translateY(-1.4px);

	}



	92% {

		transform:

			rotateX(0.5deg)

			scaleY(1)

			translateY(0.05px);

	}



	100% {

		transform:

			rotateX(-6deg)

			scaleY(1.01)

			translateY(-0.5px);

	}

}



/* Animatie uitschakelen wanneer de bezoeker dit heeft ingesteld */

@media (prefers-reduced-motion: reduce) {

	.hero_tekoop_bord {

		animation: none;

	}

}



/* ==================================================

   FOOTER

   ================================================== */



.site-footer {

	border-top: 1px solid var(--bs-border-color);

}



.site-footer-inner {

	padding-top: 1.5rem;

	padding-bottom: 1.5rem;

}



/* ==================================================

   GROTE SCHERMEN

   ================================================== */



@media (min-width: 1670px) {

	.frontpage_banner {

		padding-top: 120px;

		padding-bottom: 150px;

	}

}



/* ==================================================

   TABLET

   ================================================== */



@media (max-width: 960px) {

	.frontpage_banner h1 {

		font-size: 45px;

	}



	.frontpage_banner p {

		font-size: 18px;

	}



	.frontpage_button_01 {

		padding: 10px 20px;

		font-size: 14px;

	}

}



/* ==================================================

   MOBIEL

   ================================================== */



@media (max-width: 767.98px) {

	.header_bg_video_desktop,

	.hero_bg_video_desktop {

		display: none;

	}



	.header_bg_video_mobile,

	.hero_bg_video_mobile {

		display: block;

	}



	.header_video_window {

		border-radius: 0 20px 0 0;

	}



	.subpage_banner {

		border-radius: 20px 0 20px 20px;

	}



	.frontpage_banner {

		padding-top: 90px;

		padding-bottom: 110px;

		background-position: center;

		border-radius: 20px 0 20px 20px;

	}



	.frontpage_banner_inner {

		margin-right: 25px;

		margin-left: 25px;

	}



	.frontpage_banner h1 {

		font-size: 40px;

	}



	.frontpage_banner p {

		font-size: 17px;

		line-height: 1.5;

	}



	.hero_tekoop_wrap {

		right: 15px;

		bottom: -115px;

		width: 135px;

	}

}



/* ==================================================

   KLEINE MOBIELE SCHERMEN

   ================================================== */



@media (max-width: 575.98px) {

	.site-header {

		margin-right: 10px;

		margin-left: 10px;

	}

	.frontpage_banner {

		margin-right: 10px;

		margin-left: 10px;

		padding-top: 70px;

		padding-bottom: 90px;

	}



	.frontpage_banner h1 {

		font-size: 34px;

		letter-spacing: -1px;

	}



	.frontpage_banner p {

		font-size: 16px;

	}



	.hero_tekoop_wrap {

		display: none;

	}

}

/* ==================================================

   TEL BUTTON MENU

   ================================================== */

.button_header_01 {

  overflow: visible;

}



.button_header_01 > a {

  --pulse-bg-static: rgba(227, 6, 19, 0.14);

  --pulse-bg-animated: rgba(227, 6, 19, 0.18);



  position: relative;

  overflow: visible;

  isolation: isolate;

  margin-top: -8px;

}



/* Groen tijdens openingstijden */

.button_header_01.is-open > a {

  --pulse-bg-static: rgba(0, 160, 80, 0.16);

  --pulse-bg-animated: rgba(0, 160, 80, 0.24);

}



/* Icoon niet meer kleiner forceren */

.button_header_01 > a img {

  position: relative;

  z-index: 2;

  width: 41px;

  height: auto;

  display: inline-block;

  vertical-align: middle;

  margin-right: 10px;

}



/* Pulse achter het icoon */

.button_header_01 > a::before,

.button_header_01 > a::after {

 	content: "";

    position: absolute;

    top: 44%;

    left: 27.5px;

    width: 40px;

    height: 40px;

    border-radius: 50%;

    transform: translate(-50%, -50%);

    pointer-events: none;

    z-index: -1;

}



.button_header_01 > a::before {

  background: var(--pulse-bg-static);

}



.button_header_01 > a::after {

  background: var(--pulse-bg-animated);

  animation: phonePulse 1.8s infinite ease-out;

}



@keyframes phonePulse {

  0% {

    transform: translate(-50%, -50%) scale(0.9);

    opacity: 0.7;

  }



  70% {

    transform: translate(-50%, -50%) scale(1.7);

    opacity: 0;

  }



  100% {

    transform: translate(-50%, -50%) scale(1.7);

    opacity: 0;

  }

}

/* ==================================================

   USP / DIENSTENBALK ONDER HERO

   ================================================== */



.hero_usps {

	position: relative;

	z-index: 0;

	min-height: 150px;

	margin-top: -25px;

	padding: 50px 10vw 25px;

	background: #fcfaf7;

}



.hero_usps .row {

	row-gap: 20px;

}



/* ==================================================

   SERVICE CARD

   ================================================== */



.service-card {

	display: flex;

	align-items: center;

	gap: 18px;

	width: 100%;

	max-width: 520px;

	height: 100%;

	padding: 16px 18px 16px 25px;

	color: inherit;

	border: 1px solid #eee;

	border-radius: 14px;

	text-decoration: none;

	transition:

		transform 0.25s ease,

		box-shadow 0.25s ease,

		border-color 0.25s ease;

}



.service-card:hover,

.service-card:focus {

	color: inherit;

	border-color: #e5e5e5;

	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);

	transform: translateY(-2px);

}



/* ==================================================

   TEKST

   ================================================== */



.service-card-content {

	flex: 1;

	min-width: 0;

}



.service-card-content h3 {

	margin: 0 0 4px;

	color: #e30613;

	font-size: 18px;

	font-weight: 800;

	line-height: 1.2;

}



.service-card-content p {

	margin: 0;

	color: #111;

	font-size: 15px;

	line-height: 1.35;

}



/* ==================================================

   PIJL

   ================================================== */



.service-card-arrow {

	display: flex;

	flex: 0 0 34px;

	align-items: center;

	justify-content: center;

	width: 34px;

	height: 34px;

	color: #e30613;

	border: 1px solid #eee;

	border-radius: 50%;

	font-size: 18px;

	line-height: 1;

	transition:

		color 0.25s ease,

		background-color 0.25s ease,

		border-color 0.25s ease,

		transform 0.25s ease;

}



/*

 * Font Awesome-element verbergen.

 * De pijl wordt met CSS gemaakt, zodat er geen iconenbibliotheek nodig is.

 */

.service-card-arrow i {

	display: none;

}



.service-card-arrow::before {

	content: "→";

	display: block;

	line-height: 1;

}



.service-card:hover .service-card-arrow,

.service-card:focus .service-card-arrow {

	color: #fff;

	background: #e30613;

	border-color: #e30613;

	transform: translateX(2px);

}



/* ==================================================

   GROTE SCHERMEN

   ================================================== */



@media (min-width: 1670px) {

	.hero_usps {

		padding-right: 15vw;

		padding-left: 15vw;

	}

}



/* ==================================================

   TABLET EN MOBIEL

   ================================================== */



@media (max-width: 991.98px) {

	.hero_usps {

		margin-top: -20px;

		padding: 45px 25px 25px;

	}



	.service-card {

		max-width: none;

	}

}



/* ==================================================

   KLEINE MOBIELE SCHERMEN

   ================================================== */



@media (max-width: 575.98px) {

	.hero_usps {

		margin-top: -15px;

		padding: 35px 15px 20px;

	}



	.service-card {

		gap: 14px;

		padding: 15px 14px 15px 18px;

		border-radius: 12px;

	}



	.service-card-content h3 {

		font-size: 17px;

	}



	.service-card-content p {

		font-size: 14px;

	}



	.service-card-arrow {

		flex-basis: 32px;

		width: 32px;

		height: 32px;

	}

}

/* ============================== EINDE ALGEMENE BLOKKEN HEADER + HEROS ============================== */















/* ==================================================

   DIENSTENKAARTEN

   Gutenberg Kolommen: service-cards

   ================================================== */



.service-cards {

	align-items: stretch !important;

	gap: clamp(24px, 2vw, 48px);

	margin-top: 3rem;

	margin-bottom: 3rem;

}



/* Kaart */

.service-cards > .wp-block-column {

	display: flex;

	flex-direction: column;

	overflow: hidden;

	background: #fff;

	border-radius: 16px;

	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14);

}



/* ==================================================

   AFBEELDING

   ================================================== */



.service-cards .wp-block-image {

	width: 100%;

	margin: 0;

}



.service-cards .wp-block-image img {

	display: block;

	width: 100%;

	height: 210px;

	object-fit: cover;

}



/* ==================================================

   TEKSTGROEP

   ================================================== */



/*

 * De Group binnen iedere kolom bevat:

 * kleine titel, rode titel en omschrijving.

 */

.service-cards > .wp-block-column > .wp-block-group {

	display: flex;

	flex-direction: column;

	gap: 10px;

	margin: 22px 25px 0;

}



/* Standaard Gutenberg-marges en block-gap resetten */

.service-cards > .wp-block-column > .wp-block-group > * {

	margin: 0;

}



/* Kleine titel */

.service-cards > .wp-block-column > .wp-block-group > p:first-child {

	font-size: 18px;

	font-weight: 700;

	line-height: 1.3;

}



/* Rode hoofdtitel */

.service-cards .wp-block-group h2,

.service-cards .wp-block-group h3 {

	color: #e30613;

	font-size: 24px;

	font-weight: 700;

	line-height: 1.15;

}



/* Omschrijving */

.service-cards .wp-block-group h2 + p,

.service-cards .wp-block-group h3 + p {

	font-size: 16px;

	line-height: 1.5;

}



/* ==================================================

   BUTTON

   ================================================== */



/* Knop naar de onderkant van iedere kaart duwen */

.service-cards > .wp-block-column > .wp-block-buttons {

	width: auto;

	margin: auto 25px 25px;

	padding-top: 20px;

}



/* Gutenberg button */

.service-card-button {

	width: 100%;

}



/* Volledige knop */

.service-card-button .wp-block-button__link {

	position: relative;

	display: flex;

	align-items: center;

	justify-content: space-between;

	gap: 15px;

	width: 100%;

	min-height: 50px;

	padding: 7px 18px 7px 20px;

	color: #fff;

	background: #e30613;

	border: 0;

	border-radius: 14px;

	font-size: 14px;

	font-weight: 700;

	line-height: 1.2;

	text-align: left;

	text-decoration: none;

	transition:

		background-color 0.2s ease,

		transform 0.2s ease;

}



/* Volledige knop */

.service-card-button .wp-block-button__link {

	position: relative;

	display: flex;

	align-items: center;

	justify-content: space-between;

	gap: 15px;

	width: 100%;

	min-height: 50px;

	padding: 7px 18px 7px 20px;

	color: #fff;

	background: #e30613;

	border: 0;

	border-radius: 14px;

	font-size: 14px;

	font-weight: 700;

	line-height: 1.2;

	text-align: left;

	text-decoration: none;

	transition:

		color 0.2s ease,

		background-color 0.2s ease,

		transform 0.2s ease;

}



/* Rondje volgt automatisch de tekstkleur */

.service-card-button .wp-block-button__link::before {

	content: "";

	order: 2;

	flex: 0 0 34px;

	width: 34px;

	height: 34px;

	border: 2px solid currentColor;

	border-radius: 50%;

}



/* Pijltje volgt automatisch de tekstkleur */

.service-card-button .wp-block-button__link::after {

	content: "";

	position: absolute;

	top: 50%;

	right: 33px;

	width: 8px;

	height: 8px;

	border-top: 2px solid currentColor;

	border-right: 2px solid currentColor;

	transform: translateY(-50%) rotate(45deg);

}



/* Hover */

.service-card-button .wp-block-button__link:hover,

.service-card-button .wp-block-button__link:focus-visible {

	background: #c9000b;

	transform: translateY(-2px);

}



/* Toetsenbordfocus */

.service-card-button .wp-block-button__link:focus-visible {

	outline: 3px solid rgba(227, 6, 19, 0.25);

	outline-offset: 3px;

}



/* ==================================================

   TABLET

   ================================================== */



@media (max-width: 991.98px) {

	.service-cards {

		gap: 24px;

	}



	.service-cards > .wp-block-column > .wp-block-group {

		margin: 20px 20px 0;

	}



	.service-cards .wp-block-group h2,

	.service-cards .wp-block-group h3 {

		font-size: 23px;

	}



	.service-cards > .wp-block-column > .wp-block-buttons {

		margin-right: 20px;

		margin-bottom: 20px;

		margin-left: 20px;

		padding-top: 18px;

	}

}



/* ==================================================

   MOBIEL

   ================================================== */



@media (max-width: 781px) {

	.service-cards {

		gap: 25px;

	}



	.service-cards .wp-block-image img {

		height: auto;

		aspect-ratio: 16 / 9;

	}



	.service-cards > .wp-block-column > .wp-block-group {

		gap: 9px;

		margin: 20px 20px 0;

	}



	.service-cards > .wp-block-column > .wp-block-group > p:first-child {

		font-size: 17px;

	}



	.service-cards .wp-block-group h2,

	.service-cards .wp-block-group h3 {

		font-size: 24px;

	}



	.service-cards .wp-block-group h2 + p,

	.service-cards .wp-block-group h3 + p {

		font-size: 16px;

		line-height: 1.5;

	}



	.service-cards > .wp-block-column > .wp-block-buttons {

		margin: auto 20px 20px;

		padding-top: 18px;

	}

}











/* Tekst + afbeelding over volledige breedte */

.content-image-row {

	gap: 0;

}



/* Afbeelding rechts: tekst volgt links de normale container */

.content-image-row--right .content-image-row__text {

	padding-left: max(

		var(--osm-page-gutter),

		calc((100vw - var(--osm-content-width)) / 2)

	);

	padding-right: var(--osm-page-gutter);

}



/* Afbeelding links: tekst volgt rechts de normale container */

.content-image-row--left .content-image-row__text {

	padding-right: max(

		var(--osm-page-gutter),

		calc((100vw - var(--osm-content-width)) / 2)

	);

	padding-left: var(--osm-page-gutter);

}



/* Mobiel */

@media (max-width: 781px) {

	.content-image-row .content-image-row__text {

		padding: 35px var(--osm-page-gutter);

	}

}

.content-image-row--right img{

	box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px;

    border-radius: 5px 0px 0px 5px;

}

.content-image-row--left img{

	box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px;

    border-radius: 0px 5px 5px 0px;

}

.site-main a{

	font-weight:bold;

	color:red;

}

/* Alle ongeordende lijsten binnen de pagina-inhoud */

.site-main ul {

	display: grid;

	gap: 14px;

	margin: 25px 0;

	padding: 0;

	list-style: none;

}



.site-main ul > li {

	position: relative;

	margin: 0;

	padding: 0 0 0 34px;

	background: none;

	list-style: none;

	line-height: 1.5;

}



/* Rood rondje */

.site-main ul > li::before {

	content: "";

	position: absolute;

	top: 0.15em;

	left: 0;

	width: 24px;

	height: 24px;

	background: #e30613;

	border-radius: 50%;

}



/* Wit vinkje */

.site-main ul > li::after {

	content: "";

	position: absolute;

	top: calc(0.15em + 8px);

	left: 7px;

	width: 10px;

	height: 6px;

	border-bottom: 3px solid #fff;

	border-left: 3px solid #fff;

	transform: rotate(-45deg);

}



/* ==================================================

   YOAST FAQ

   ================================================== */



.schema-faq-section {

	margin: 0 0 10px;

	padding: 0 20px;

	color: #060606;

	background: #f6f0e7;

	border-radius: 7px;

	box-shadow:

		inset 3px 0 transparent,

		0 2px 5px rgba(0, 0, 0, 0);

	font-size: 15px;

	transition:

		transform 0.2s ease,

		box-shadow 0.2s ease,

		background-color 0.2s ease;

}



/* Kaart subtiel omhoog bewegen */

.schema-faq-section:hover {

	background: #f8f3eb;

	box-shadow:

		inset 2px 0 #e30613,

		0 7px 16px rgba(0, 0, 0, 0.08);

	transform: translateY(-2px);

}



/* ==================================================

   VRAAG

   ================================================== */



.schema-faq-question {

	position: relative;

	display: block;

	padding: 20px 45px 20px 0;

	font-size: 15px;

	font-weight: 700;

	line-height: 1.4;

	cursor: pointer;

}



/* Ronde plusknop */

.schema-faq-question::after {

	content: "+";

	position: absolute;

	top: 50%;

	right: 0;

	display: flex;

	align-items: center;

	justify-content: center;

	width: 28px;

	height: 28px;

	color: #fff;

	background: #e30613;

	border-radius: 50%;

	font-size: 21px;

	font-weight: 400;

	line-height: 1;

	transform: translateY(-50%);

	transition:

		background-color 0.2s ease,

		transform 0.3s ease;

}



/* ==================================================

   GEOPENDE VRAAG

   ================================================== */



.schema-faq-section.is-open {

	background: #f8f3eb;

	box-shadow:

		inset 3px 0 #e30613,

		0 7px 16px rgba(0, 0, 0, 0.08);

}



/* Plus verandert in min */

.schema-faq-section.is-open .schema-faq-question::after {

	content: "−";

	background: #c9000b;

	transform: translateY(-50%) rotate(180deg);

}



/* ==================================================

   GEANIMEERD ANTWOORD

   ================================================== */



/*

 * De antwoorden worden alleen ingeklapt wanneer het

 * JavaScript succesvol actief is.

 */

.faq-accordion-ready .schema-faq-answer {

	overflow: hidden;

	max-height: 0;

	margin: 0;

	padding: 0;

	opacity: 0;

	font-size: 14px;

	line-height: 1.6;

	transform: translateY(-6px);

	transition:

		max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1),

		opacity 0.3s ease,

		transform 0.3s ease,

		padding-bottom 0.45s ease;

}



/* Geopend antwoord */

.faq-accordion-ready .schema-faq-section.is-open .schema-faq-answer {

	padding-bottom: 20px;

	opacity: 1;

	transform: translateY(0);

}



/* Links in antwoorden */

.schema-faq-answer a {

	color: #e30613;

	text-decoration: underline;

	text-underline-offset: 2px;

}



.schema-faq-answer a:hover,

.schema-faq-answer a:focus {

	text-decoration: none;

}



/* ==================================================

   TOETSENBORD

   ================================================== */



.schema-faq-question:focus-visible {

	outline: 3px solid rgba(227, 6, 19, 0.25);

	outline-offset: 3px;

	border-radius: 3px;

}



/* ==================================================

   MOBIEL

   ================================================== */



@media (max-width: 767.98px) {

	.schema-faq-section {

		padding-right: 16px;

		padding-left: 16px;

	}



	.schema-faq-question {

		padding-top: 17px;

		padding-right: 40px;

		padding-bottom: 17px;

		font-size: 15px;

	}



	.schema-faq-question::after {

		width: 26px;

		height: 26px;

		font-size: 19px;

	}



	.faq-accordion-ready .schema-faq-section.is-open .schema-faq-answer {

		padding-bottom: 17px;

	}

}



/* ==================================================

   MINDER BEWEGING

   ================================================== */



@media (prefers-reduced-motion: reduce) {

	.schema-faq-section,

	.schema-faq-question::after,

	.faq-accordion-ready .schema-faq-answer {

		transition: none;

	}



	.schema-faq-section:hover {

		transform: none;

	}

}















/* Subtiele verbinding met de voorgaande rij */

.topic-continuation {

	position: relative;

}



/* Verticale lijn door de overgang */

.topic-continuation::before {

	content: "";

	position: absolute;

	z-index: 2;

	top: -35px;

	left: 50%;

	width: 2px;

	height: 70px;

	background: linear-gradient(

		to bottom,

		transparent,

		#e30613 30%,

		#e30613 70%,

		transparent

	);

	transform: translateX(-50%);

	pointer-events: none;

	left:55px;

}



/* Klein verbindingspunt */

.topic-continuation::after {

	content: "";

	position: absolute;

	z-index: 3;

	top: -8px;

	left: 50%;

	width: 10px;

	height: 10px;

	background: #e30613;

	border: 3px solid #fff;

	border-radius: 50%;

	box-sizing: content-box;

	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);

	transform: translateX(-50%);

	pointer-events: none;

	left:55px;

}

/* Subtiele verbinding met de voorgaande rij */

.topic-continuation-right {

	position: relative;

}



/* Verticale lijn door de overgang */

.topic-continuation-right::before {

	content: "";

	position: absolute;

	z-index: 2;

	top: -35px;

	width: 2px;

	height: 70px;

	background: linear-gradient(

		to bottom,

		transparent,

		#e30613 30%,

		#e30613 70%,

		transparent

	);

	transform: translateX(-50%);

	pointer-events: none;

	right:55px;

}



/* Klein verbindingspunt */

.topic-continuation-right::after {

	content: "";

	position: absolute;

	z-index: 3;

	top: -8px;

	width: 10px;

	height: 10px;

	background: #e30613;

	border: 3px solid #fff;

	border-radius: 50%;

	box-sizing: content-box;

	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);

	transform: translateX(-50%);

	pointer-events: none;

	right:41.5px;

}

/* Subtiele verbinding met de voorgaande rij */

.topic-continuation-social {

	position: relative;

	--connector-left: calc(

		(100% - 100vw) / 2 + clamp(20px, 4vw, 55px)

	);

}



/* Verticale lijn */

.topic-continuation-social::before {

	content: "";

	position: absolute;

	z-index: 2;

	top: -35px;

	left: var(--connector-left);

	width: 2px;

	height: 70px;

	background: linear-gradient(

		to bottom,

		transparent,

		#e30613 30%,

		#e30613 70%,

		transparent

	);

	transform: translateX(-50%);

	pointer-events: none;

}



/* Verbindingspunt */

.topic-continuation-social::after {

	content: "";

	position: absolute;

	z-index: 3;

	top: -8px;

	left: var(--connector-left);

	width: 10px;

	height: 10px;

	background: #e30613;

	border: 3px solid #fff;

	border-radius: 50%;

	box-sizing: content-box;

	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);

	transform: translateX(-50%);

	pointer-events: none;

}





























/* ==================================================

   VERKOOPPROCES

   ================================================== */



.sales-process {

	align-items: stretch !important;

	gap: clamp(20px, 2vw, 32px);

}



/* Voortgang per stap */

.sales-process > .wp-block-column:nth-child(1) {

	--step-progress: 25%;

}



.sales-process > .wp-block-column:nth-child(2) {

	--step-progress: 50%;

}



.sales-process > .wp-block-column:nth-child(3) {

	--step-progress: 75%;

}



.sales-process > .wp-block-column:nth-child(4) {

	--step-progress: 100%;

}



/* Titel met compacte voortgangscirkel */

.sales-process h3 {

	position: relative;

	display: flex;

	align-items: center;

	min-height: 46px;

	margin: 0;

	padding-left: 58px;

	font-size: 16px;

	font-weight: 700;

	line-height: 1.3;

}



/* Voortgangscirkel met transparant midden en witte buitenrand */

.sales-process h3::before {

	content: "";

	position: absolute;

	top: 50%;

	left: 0;

	width: 44px;

	height: 44px;

	background: conic-gradient(

		#e30613 var(--step-progress),

		rgba(227, 6, 19, 0.16) 0

	);

	border-radius: 50%;

	transform: translateY(-50%);

	-webkit-mask: radial-gradient(

		farthest-side,

		transparent calc(100% - 5px),

		#000 calc(100% - 4px)

	);

	mask: radial-gradient(

		farthest-side,

		transparent calc(100% - 5px),

		#000 calc(100% - 4px)

	);

	filter:

		drop-shadow(2px 0 0 #fff)

		drop-shadow(-2px 0 0 #fff)

		drop-shadow(0 2px 0 #fff)

		drop-shadow(0 -2px 0 #fff)

		drop-shadow(0 3px 4px rgba(0, 0, 0, 0.14));

}



/* Vinkje */

.sales-process h3::after {

	content: "";

	position: absolute;

	top: 50%;

	left: 15px;

	width: 15px;

	height: 8px;

	border-bottom: 3px solid #e30613;

	border-left: 3px solid #e30613;

	transform: translateY(-65%) rotate(-45deg);

}



/* Omschrijving */

.sales-process p {

	margin: 12px 0 0;

	font-size: 13px;

	line-height: 1.55;

}



/* ==================================================

   TABLET

   ================================================== */



@media (max-width: 991.98px) and (min-width: 782px) {

	.sales-process {

		display: grid !important;

		grid-template-columns: repeat(2, minmax(0, 1fr));

		gap: 30px 25px;

	}



	.sales-process > .wp-block-column {

		margin: 0;

	}

}



/* ==================================================

   MOBIEL

   ================================================== */



@media (max-width: 781px) {

	.sales-process {

		gap: 25px;

	}



	.sales-process h3 {

		min-height: 44px;

		padding-left: 56px;

		font-size: 16px;

	}



	.sales-process h3::before {

		width: 42px;

		height: 42px;

	}



	.sales-process h3::after {

		left: 14px;

		width: 15px;

		height: 8px;

	}



	.sales-process p {

		margin-top: 10px;

		font-size: 13px;

	}

}

































/* Videoraster */

.social-video-grid h2{

	font-size:50px;

	font-weight:900;

	letter-spacing: -3px;

    line-height: 55px;

}

.social-video-grid {

	display: grid;

	grid-template-columns: repeat(3, minmax(0, 1fr));

	align-items: start;

	gap: 18px;

}



/* Video */

.social-reel {

	display: block;

	width: 100%;

	aspect-ratio: 9 / 16;

	object-fit: cover;

	background: #eee;

	border-radius: 18px;

	opacity: 0.72;

	cursor: pointer;

	transform: scale(0.97);

	transition:

		opacity 0.3s ease,

		transform 0.3s ease,

		box-shadow 0.3s ease;

}



/* Actief afgespeelde video */

.social-reel.is-playing {

	z-index: 2;

	opacity: 1;

	box-shadow:

		0 0 0 3px #fff,

		0 10px 25px rgba(0, 0, 0, 0.16);

	transform: scale(1);

}



/* Speelse positionering */

.social-reel:nth-child(2),

.social-reel:nth-child(5) {

	margin-top: 45px;

}



/* De extra sliderlaag verandert de bestaande desktopkolommen niet. */

.social-video-slider {

	display: contents;

}

.social-video-row > .social-video-slider > .wp-block-column {

	display: flex;

	flex-direction: column;

	justify-content: center;

}

.social-video-pagination {

	display: none;

}

/* Mobiel: native swipe-slider met een doorkijk naar de volgende video. */

@media (max-width: 767.98px) {

	.social-video-grid {

		display: block !important;

	}



	.social-video-grid > .wp-block-column:first-child {

		width: 100%;

		margin-bottom: 28px;

	}



	.social-video-slider {

		--social-slide-width: min(78vw, 320px);

		display: flex;

		gap: 12px;

		width: calc(100% + (2 * var(--osm-page-gutter)));

		max-width: none;

		margin-left: 0;

		transform: translateX(calc(var(--osm-page-gutter) * -1));

		padding-inline: calc((100% - var(--social-slide-width)) / 2);

		overflow-x: auto;

		overflow-y: hidden;

		scroll-snap-type: x mandatory;

		scroll-padding-inline: calc((100% - var(--social-slide-width)) / 2);

		scroll-behavior: smooth;

		overscroll-behavior-x: contain;

		-webkit-overflow-scrolling: touch;

		scrollbar-width: none;

		box-sizing: border-box;

	}



	.social-video-slider::-webkit-scrollbar {

		display: none;

	}



	.social-video-slider > .wp-block-column {

		flex: 0 0 var(--social-slide-width) !important;

		min-width: 0;

		margin: 0 !important;

		scroll-snap-align: center;

		scroll-snap-stop: always;

	}



	.social-video-pagination {

		display: flex;

		align-items: center;

		justify-content: center;

		gap: 7px;

		width: max-content;

		margin: 14px auto 16px!important;

		padding: 7px 10px;

		background: #f1f1f1;

		border-radius: 999px;

		margin-left: auto !important;
        margin-right: auto !important;

	}



	.social-video-pagination button {

		width: 7px;

		height: 7px;

		padding: 0;

		background: #b8b8b8;

		border: 0;

		border-radius: 50%;

		transition: width 0.2s ease, background-color 0.2s ease;

	}



	.social-video-pagination button.is-active {

		width: 22px;

		background: #eb1c24;

		border-radius: 999px;

	}



	.social-video-pagination button:focus-visible {

		outline: 2px solid #24272b;

		outline-offset: 2px;

	}



	.social-video-grid .social-reel-wrap {

		width: 100%;

		aspect-ratio: 9 / 16;

		border-radius: 14px;

	}



	.social-video-grid .social-reel {

		margin-top: 0;

		border-radius: 14px;

	}

}

.social-video-row > .wp-block-column {

	display: flex;

	flex-direction: column;

	justify-content: center;

}

/* ==================================================

   SOCIAL VIDEO – LINKS

   ================================================== */



.social-reel-wrap {

	position: relative;

	width: 100%;

	aspect-ratio: 9 / 16;

	overflow: hidden;

	border-radius: inherit;

	isolation: isolate;

}



.social-reel-wrap .social-reel {

	display: block;

	width: 100%;

	height: 100%;

}



/* Zwevende socialbalk */

.social-reel-links {

	position: absolute;

	z-index: 5;

	right: 10px;

	bottom: 10px;

	display: flex;

	align-items: center;

	gap: 4px;

	padding: 5px;

	background: rgba(255, 255, 255, 0.9);

	border: 1px solid rgba(255, 255, 255, 0.75);

	border-radius: 20px;

	box-shadow: 0 3px 12px rgba(0, 0, 0, 0.14);

	opacity: 0;

	transform: translateY(7px);

	pointer-events: none;

	transition:

		opacity 0.2s ease,

		transform 0.2s ease;

	backdrop-filter: blur(5px);

}



/* Tonen bij hover of toetsenbordfocus */

.social-reel-wrap:hover .social-reel-links,

.social-reel-wrap:focus-within .social-reel-links {

	opacity: 1;

	transform: translateY(0);

	pointer-events: auto;

}



/* Icoonknoppen */

.social-reel-links a {

	display: flex;

	align-items: center;

	justify-content: center;

	width: 27px;

	height: 27px;

	padding: 6px;

	color: #24272b;

	background: transparent;

	border-radius: 50%;

	text-decoration: none;

	transition:

		color 0.15s ease,

		background-color 0.15s ease,

		transform 0.15s ease;

}



.social-reel-links a:hover,

.social-reel-links a:focus-visible {

	color: #fff;

	background: #e30613;

	transform: translateY(-1px);

}



/* Algemene SVG-instellingen */

.social-reel-links svg {

	display: block;

	width: 15px;

	height: 15px;

	overflow: visible;

	fill: currentColor;

}



/* Instagram bestaat uit lijnen */

.social-reel-links a:nth-child(2) svg {

	fill: none;

	stroke: currentColor;

	stroke-width: 1.8;

}



.social-reel-links a:nth-child(2) .social-icon-dot {

	fill: currentColor;

	stroke: none;

}



/* Witte playknop binnen YouTube */

.social-reel-links .social-icon-play {

	fill: #fff;

}



/* Toetsenbordfocus */

.social-reel-links a:focus-visible {

	outline: 2px solid #fff;

	outline-offset: 1px;

}



/* Op touchscreens altijd zichtbaar */

@media (hover: none) {

	.social-reel-links {

		opacity: 1;

		transform: none;

		pointer-events: auto;

	}

}



/* Animaties respecteren */

@media (prefers-reduced-motion: reduce) {

	.social-reel-links,

	.social-reel-links a {

		transition: none;

	}

}



body .is-layout-flex{

	margin-bottom:0px!important;

}

/* ==================================================

   VERKOOPSTATISTIEKEN – SUBTIELE HORIZONTALE VERSIE

   ================================================== */



.sales-stats {

	display: grid;

	grid-template-columns: repeat(4, minmax(0, 1fr));

	margin-top: 20px;

	padding: 20px 0;

	background: transparent;

	border-top: 1px solid rgba(36, 39, 43, 0.12);

}



.sales-stat {

	position: relative;

	display: grid;

	grid-template-columns: 27px minmax(0, 1fr);

	grid-template-rows: auto auto auto;

	align-content: start;

	column-gap: 10px;

	min-width: 0;

	padding: 0 22px;

	transition: transform 0.2s ease;

}



/* Eerste statistiek gelijk laten lopen met de tekst */

.sales-stat:first-child {

	padding-left: 0;

}



/* Laatste statistiek gelijk laten eindigen */

.sales-stat:last-child {

	padding-right: 0;

}



/* Subtiele scheidingslijnen */

.sales-stat:not(:last-child) {

	border-right: 1px solid rgba(36, 39, 43, 0.1);

}



/* Kort rood accentlijntje bij hover */

.sales-stat::after {

	content: "";

	position: absolute;

	right: 22px;

	bottom: -8px;

	left: 22px;

	height: 2px;

	background: #e30613;

	border-radius: 2px;

	opacity: 0;

	transform: scaleX(0);

	transform-origin: center;

	pointer-events: none;

	transition:

		opacity 0.2s ease,

		transform 0.25s ease;

}



.sales-stat:first-child::after {

	left: 0;

}



.sales-stat:last-child::after {

	right: 0;

}



/* ==================================================

   ICONEN

   ================================================== */



.sales-stat svg {

	grid-column: 1;

	grid-row: 1;

	align-self: center;

	width: 23px;

	height: 23px;

	margin: 0;

	color: #e30613;

	fill: currentColor;

	transition: transform 0.2s ease;

}



/* Lijniconen */

.sales-stat svg circle,

.sales-stat .sales-stat-line {

	fill: none;

	stroke: currentColor;

	stroke-width: 1.8;

	stroke-linecap: round;

	stroke-linejoin: round;

}



/* Wit vinkje */

.sales-stat .sales-stat-check {

	fill: none;

	stroke: #fff;

	stroke-width: 2;

	stroke-linecap: round;

	stroke-linejoin: round;

}



/* ==================================================

   TEKST

   ================================================== */



/* Waarde naast het icoon */

.sales-stat strong {

	grid-column: 2;

	grid-row: 1;

	align-self: center;

	min-width: 0;

	color: #e30613;

	font-size: clamp(22px, 1.6vw, 28px);

	font-weight: 700;

	line-height: 1.1;

	letter-spacing: -0.5px;

	transition:

		color 0.2s ease,

		transform 0.2s ease;

}



/* Omschrijving */

.sales-stat span {

	grid-column: 1 / -1;

	grid-row: 2;

	margin-top: 10px;

	color: #24272b;

	font-size: 12px;

	font-weight: 700;

	line-height: 1.35;

}



/* Kleine toelichting */

.sales-stat small {

	display: block;

	grid-column: 1 / -1;

	grid-row: 3;

	margin-top: 4px;

	color: #777;

	font-size: 10px;

	font-weight: 400;

	line-height: 1.4;

}



/* ==================================================

   HOVER

   ================================================== */



@media (hover: hover) {

	.sales-stat:hover {

		transform: translateY(-2px);

	}



	.sales-stat:hover::after {

		opacity: 1;

		transform: scaleX(1);

	}



	.sales-stat:hover svg {

		transform: scale(1.12);

	}



	.sales-stat:hover strong {

		color: #c9000b;

		transform: translateX(2px);

	}

}



/* ==================================================

   TABLET

   ================================================== */



@media (max-width: 991.98px) {

	.sales-stats {

		grid-template-columns: repeat(2, minmax(0, 1fr));

		padding: 0;

	}



	.sales-stat {

		padding: 20px;

	}



	.sales-stat:first-child {

		padding-left: 20px;

	}



	.sales-stat:last-child {

		padding-right: 20px;

	}



	/* Tweede en vierde item hebben geen rechterlijn */

	.sales-stat:nth-child(2) {

		border-right: 0;

	}



	/* Scheidingslijn tussen de twee rijen */

	.sales-stat:nth-child(-n + 2) {

		border-bottom: 1px solid rgba(36, 39, 43, 0.1);

	}



	.sales-stat::after,

	.sales-stat:first-child::after,

	.sales-stat:last-child::after {

		right: 20px;

		left: 20px;

		bottom: 7px;

	}

}



/* ==================================================

   MOBIEL

   ================================================== */



@media (max-width: 575.98px) {

	.sales-stats {

		grid-template-columns: repeat(2, minmax(0, 1fr));

		margin-top: 30px;

	}



	.sales-stat {

		grid-template-columns: 24px minmax(0, 1fr);

		column-gap: 8px;

		padding: 18px 14px;

	}



	.sales-stat:first-child,

	.sales-stat:nth-child(3) {

		padding-left: 0;

	}



	.sales-stat:nth-child(2),

	.sales-stat:last-child {

		padding-right: 0;

	}



	.sales-stat svg {

		width: 20px;

		height: 20px;

	}



	.sales-stat strong {

		font-size: 23px;

	}



	.sales-stat span {

		margin-top: 8px;

		font-size: 12px;

	}



	.sales-stat small {

		font-size: 10px;

	}



	.sales-stat:nth-child(odd)::after {

		left: 0;

	}



	.sales-stat:nth-child(even)::after {

		right: 0;

	}

}



/* ==================================================

   MINDER BEWEGING

   ================================================== */



@media (prefers-reduced-motion: reduce) {

	.sales-stat,

	.sales-stat::after,

	.sales-stat svg,

	.sales-stat strong {

		transition: none;

	}



	.sales-stat:hover,

	.sales-stat:hover svg,

	.sales-stat:hover strong {

		transform: none;

	}

}

/* ==================================================

   WONINGZOEKER – GUTENBERG-INDELING

   ================================================== */



.buyer-profile-layout {

	align-items: center !important;

	gap: clamp(45px, 6vw, 100px);

}



/* ==================================================

   VISUELE ZOEKPROFIELKAART

   ================================================== */



.buyer-profile-visual {

	position: relative;

	width: 100%;

	min-height: 500px;

}



.buyer-profile-card {

	position: absolute;

	z-index: 2;

	top: 50%;

	left: 50%;

	width: min(72%, 500px);

	padding: 30px;

	background: #fff;

	border: 1px solid rgba(36, 39, 43, 0.1);

	border-radius: 20px;

	box-shadow: 0 18px 45px rgba(0, 0, 0, 0.1);

	transform: translate(-50%, -50%);

}



/* ==================================================

   BOVENKANT KAART

   ================================================== */



.buyer-profile-header {

	display: flex;

	align-items: flex-start;

	justify-content: space-between;

	gap: 20px;

	padding-bottom: 22px;

	border-bottom: 1px solid rgba(36, 39, 43, 0.1);

}



.buyer-profile-header small {

	display: block;

	margin: 0 0 3px;

	color: #777;

	font-size: 11px;

	line-height: 1.3;

}



.buyer-profile-header h3 {

	margin: 0;

	color: #24272b;

	font-size: 24px;

	font-weight: 700;

	line-height: 1.2;

}



.buyer-profile-status {

	display: inline-flex;

	align-items: center;

	gap: 6px;

	padding: 6px 10px;

	color: #24272b;

	background: #f6f0e7;

	border-radius: 20px;

	font-size: 11px;

	font-weight: 700;

}



.buyer-profile-status span {

	width: 7px;

	height: 7px;

	background: #e30613;

	border-radius: 50%;

}



/* ==================================================

   ZOEKOPTIES

   ================================================== */



.buyer-profile-options {

	display: grid;

	grid-template-columns: repeat(2, minmax(0, 1fr));

	gap: 12px;

	padding: 22px 0;

}



.buyer-profile-option {

	display: flex;

	align-items: center;

	gap: 11px;

	min-width: 0;

	padding: 13px;

	background: #f6f0e7;

	border-radius: 11px;

}



.buyer-profile-option > svg {

	flex: 0 0 22px;

	width: 22px;

	height: 22px;

	color: #e30613;

	fill: none;

	stroke: currentColor;

	stroke-width: 1.7;

	stroke-linecap: round;

	stroke-linejoin: round;

}



.buyer-profile-option div {

	min-width: 0;

}



.buyer-profile-option small,

.buyer-profile-confirmation small {

	display: block;

	margin: 0;

	color: #777;

	font-size: 9px;

	line-height: 1.3;

}



.buyer-profile-option strong {

	display: block;

	margin-top: 2px;

	color: #24272b;

	font-size: 11px;

	font-weight: 700;

	line-height: 1.3;

}



/* ==================================================

   BEVESTIGING

   ================================================== */



.buyer-profile-confirmation {

	display: flex;

	align-items: center;

	gap: 11px;

	padding-top: 20px;

	border-top: 1px solid rgba(36, 39, 43, 0.1);

}



.buyer-profile-confirmation > span {

	display: flex;

	align-items: center;

	justify-content: center;

	flex: 0 0 29px;

	width: 29px;

	height: 29px;

	color: #fff;

	background: #e30613;

	border-radius: 50%;

}



.buyer-profile-confirmation > span svg {

	width: 17px;

	height: 17px;

	fill: none;

	stroke: currentColor;

	stroke-width: 2.3;

	stroke-linecap: round;

	stroke-linejoin: round;

}



.buyer-profile-confirmation strong {

	display: block;

	color: #24272b;

	font-size: 12px;

	font-weight: 700;

	line-height: 1.3;

}



/* ==================================================

   ZWEVENDE KAARTEN

   ================================================== */



.buyer-match-card {

	position: absolute;

	z-index: 3;

	display: flex;

	align-items: center;

	gap: 11px;

	padding: 14px 17px;

	background: #fff;

	border: 1px solid rgba(36, 39, 43, 0.08);

	border-radius: 13px;

	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);

}



.buyer-match-card-left {

	top: 10%;

	left: 1%;

}



.buyer-match-card-right {

	right: 0;

	bottom: 11%;

}



.buyer-match-icon {

	display: flex;

	align-items: center;

	justify-content: center;

	flex: 0 0 28px;

	width: 28px;

	height: 28px;

	color: #fff;

	background: #e30613;

	border-radius: 50%;

}



.buyer-match-icon svg {

    width: 16px;

    height: 16px;

    fill: none;

    stroke: #fff;

    stroke-width: 4.4px;

    stroke-linecap: round;

    stroke-linejoin: round;

    margin-left: 6px;

    margin-top: 6px;

}



.buyer-match-card strong {

	display: block;

	color: #e30613;

	font-size: 17px;

	font-weight: 700;

	line-height: 1.2;

}



.buyer-match-card div strong {

	color: #24272b;

	font-size: 11px;

}



.buyer-match-card span {

	display: block;

	color: #24272b;

	font-size: 10px;

	font-weight: 700;

	line-height: 1.3;

}



.buyer-match-card small {

	display: block;

	margin-top: 2px;

	color: #777;

	font-size: 9px;

	line-height: 1.3;

}



/* ==================================================

   TABLET

   ================================================== */



@media (max-width: 991.98px) {

	.buyer-profile-layout {

		gap: 40px;

	}



	.buyer-profile-visual {

		min-height: 470px;

	}



	.buyer-profile-card {

		width: min(82%, 500px);

	}

}



/* ==================================================

   ZOEKPROFIEL – MOBIEL

   ================================================== */



@media (max-width: 781px) {

	/* Gutenberg-kolommen daadwerkelijk stapelen */

	.buyer-profile-layout {

		display: flex !important;

		flex-direction: column !important;

		align-items: stretch !important;

		gap: 35px !important;

		width: 100%;

	}



	.buyer-profile-layout > .wp-block-column {

		flex: 0 0 100% !important;

		width: 100% !important;

		max-width: none !important;

		min-width: 0 !important;

		margin: 0 !important;

	}



	/* Gutenberg-tekst eerst, visual daarna */

	.buyer-profile-layout > .wp-block-column:first-child {

		order: 2;

	}



	.buyer-profile-layout > .wp-block-column:last-child {

		order: 1;

	}



	/* Visual krijgt weer een normale, zelfstandige ruimte */

	.buyer-profile-visual {

		position: relative;

		width: 100%;

		min-width: 0;

		min-height: 540px;

		margin: 0;

		overflow: visible;

	}



	/* Hoofdkaart */

	.buyer-profile-card {

		position: relative;

		top: auto;

		left: auto;

		width: calc(100% - 30px);

		max-width: none;

		margin: 35px auto;

		padding: 28px 20px;

		transform: none;

	}



	/* Zwevende melding linksboven */

	.buyer-match-card-left {

		top: -45px;

		left: 0;

		width: min(270px, 78%);

	}



	/* Zwevende matchkaart rechtsonder */

	.buyer-match-card-right {

		right: 0;

		bottom: 82px;

		width: min(230px, 72%);

	}



	/* Kop van de kaart */

	.buyer-profile-header {

		flex-wrap: wrap;

		gap: 15px;

	}



	.buyer-profile-header h3 {

		width: 100%;

		font-size: 30px;

	}



	/* Zoekgegevens blijven netjes in twee kolommen */

	.buyer-profile-options {

		grid-template-columns: repeat(2, minmax(0, 1fr));

		gap: 12px;

	}



	.buyer-profile-option {

		min-width: 0;

		padding: 16px 12px;

	}



	.buyer-profile-option strong,

	.buyer-profile-option span {

		overflow-wrap: anywhere;

	}

}



@media (max-width: 400px) {

	.buyer-profile-visual {

		min-height: 700px;

	}



	.buyer-profile-card {

		width: calc(100% - 20px);

		padding: 25px 16px;

	}



	.buyer-profile-options {

		grid-template-columns: 1fr;

	}



	.buyer-profile-header h3 {

		font-size: 27px;

	}

}

.buyer-profile-note {

	display: block;

	margin-top: 10px;

	color: #777;

	font-size: 10px;

	line-height: 1.4;

	margin-top:25px;

}

/* ==================================================

   ZOEKPROFIEL – SUBTIELE BEWEGING

   Alleen transform en opacity: licht voor de browser

   ================================================== */



/* Zwevende woningmatchmelding */

.buyer-match-card-left {

	animation: buyer-match-float 5s ease-in-out infinite;

}



/* Pulserende ring rond het rode icoon */

.buyer-match-card-left::after {

	content: "";

	position: absolute;

	top: 50%;

	left: 14px;

	width: 34px;

	height: 34px;

	border: 2px solid rgba(227, 6, 19, 0.45);

	border-radius: 50%;

	transform: translateY(-50%) scale(0.8);

	pointer-events: none;

	animation: buyer-match-pulse 2.5s ease-out infinite;

}



/* Matchpercentage beweegt iets later mee */

.buyer-match-card-right {

	animation: buyer-percentage-float 5s ease-in-out 0.8s infinite;

}



/* Zoekcriteria */

.buyer-profile-option {

	transition:

		background-color 0.2s ease,

		box-shadow 0.2s ease,

		transform 0.2s ease;

}



.buyer-profile-option:hover {

	background: #f8f3eb;

	box-shadow: 0 7px 18px rgba(36, 39, 43, 0.08);

	transform: translateY(-3px);

}



/* Hoofdkaart iets meer diepte bij interactie */

.buyer-profile-card {

	transition: box-shadow 0.3s ease;

}



.buyer-profile-visual:hover .buyer-profile-card {

	box-shadow: 0 22px 55px rgba(36, 39, 43, 0.13);

}



/* ==================================================

   ANIMATIES

   ================================================== */



@keyframes buyer-match-float {

	0%,

	100% {

		transform: translateY(0);

	}



	50% {

		transform: translateY(-5px);

	}

}



@keyframes buyer-percentage-float {

	0%,

	100% {

		transform: translateY(0);

	}



	50% {

		transform: translateY(4px);

	}

}



@keyframes buyer-match-pulse {

	0% {

		opacity: 0;

		transform: translateY(-50%) scale(0.75);

	}



	25% {

		opacity: 0.65;

	}



	75%,

	100% {

		opacity: 0;

		transform: translateY(-50%) scale(1.45);

	}

}



/* Op touchscreens geen hoververplaatsingen */

@media (hover: none) {

	.buyer-profile-visual:hover .buyer-profile-card,

	.buyer-profile-option:hover {

		transform: none;

	}

}



/* Bewegingsvoorkeur respecteren */

@media (prefers-reduced-motion: reduce) {

	.buyer-match-card-left,

	.buyer-match-card-right,

	.buyer-match-card-left::after {

		animation: none;

	}



	.buyer-profile-card,

	.buyer-profile-option {

		transition: none;

	}

}

h2.zoekopdracht-titel {

	font-size: 50px;

    font-weight: 900;

    letter-spacing: -3px;

    line-height: 55px;

    max-width: 390px;

}

/* Reviewslider daadwerkelijk volledige breedte */

.site-main > article > .wp-block-group.alignfull.review-slider-full {

	width: 100%;

	max-width: none;

	margin: 0;

	padding: 0;

	overflow: hidden;

}



/* Door Gutenberg automatisch toegevoegde tussenwrapper */

.site-main > article

> .wp-block-group.alignfull.review-slider-full

> .wp-block-group__inner-container {

	width: 100%;

	max-width: none;

	margin: 0;

	padding: 0;

}



/* Shortcode en slidersectie */

.review-slider-full .osm-review-slider-section {

	width: 100%;

	max-width: none;

	margin: 0;

}

/* Reviewslider links uitlijnen met de normale contentcontainer */

.review-slider-full .osm-rs-inner {

	padding-left: max(

		var(--osm-page-gutter),

		calc((100vw - var(--osm-content-width)) / 2)

	);

}

.osm-rs-text{

	font-size:15px!important;

}

.osm-rs-card{

	min-height:380px!important;

}

.osm-rs-title{

	max-width:800px!important;

}

.osm-rs-header{

	margin-bottom: 30px!important;

}

.woning-slider-full {

	padding-left: max(

		20px,

		calc((100vw - var(--wp--style--global--content-size, 1340px)) / 2)

	)!important;

}



.aanbod-button{

	font-size:22px;

	color:#e30613;

	float:right;

	border-bottom:2px solid #e30613;

}

.aanbod-button {

	display: inline-flex;

	align-items: center;

	gap: 12px;

	text-decoration: none;

}



.aanbod-button span {

	transition: transform .2s ease;

}



.aanbod-button:hover span {

	transform: translateX(4px);

}

.osl-card--offer-cta{

	background:#f8f3eb!important;

}







/* ==================================================

   SUB - PAGINA's

================================================== */











/* ==================================================

   WONINGPRESENTATIE

   ================================================== */



.property-presentation {

	padding: clamp(55px, 6vw, 85px) 0;

	color: #24272b;

}



.property-presentation *,

.property-presentation *::before,

.property-presentation *::after {

	box-sizing: border-box;

}



.property-presentation figure {

	margin: 0;

}



/* Intro

   ================================================== */



.property-presentation__intro {

	display: grid;

	grid-template-columns: minmax(0, 0.9fr) minmax(320px, 0.75fr);

	gap: clamp(35px, 6vw, 90px);

	align-items: end;

	margin-bottom: clamp(30px, 3.5vw, 45px);

}



.property-presentation__eyebrow {

	display: block;

	margin-bottom: 12px;

	color: #e30613;

	font-size: 13px;

	font-weight: 700;

	letter-spacing: 0.11em;

	line-height: 1.4;

	text-transform: uppercase;

}



.property-presentation__heading h2 {

	max-width: 670px;

	margin: 0;

	font-size: clamp(38px, 4.4vw, 58px);

	font-weight: 700;

	letter-spacing: -0.055em;

	line-height: 1.05;

}



.property-presentation__heading h2 strong {

	color: #e30613;

	font-weight: inherit;

}



.property-presentation__text p {

	max-width: 570px;

	margin: 0;

	font-size: 16px;

	line-height: 1.8;

}



/* Fotocollage

   ================================================== */

/* Woningtabs

   ================================================== */



.property-presentation__tabs {

	display: flex;

	gap: 30px;

	width: min(100%, 1500px);

	margin: 0 auto 20px;

	border-bottom: 1px solid rgba(36, 39, 43, 0.14);

}



.page .property-presentation__tab {

	position: relative;

	display: inline-flex;

	gap: 8px;

	align-items: center;

	margin: 0;

	padding: 0 0 13px;

	color: #777;

	background: transparent;

	border: 0;

	border-radius: 0;

	font-size: 13px;

	font-weight: 700;

	line-height: 1.4;

	text-transform: none;

	transition: color 0.2s ease;

}



.page .property-presentation__tab::after {

	content: "";

	position: absolute;

	right: 0;

	bottom: -1px;

	left: 0;

	height: 2px;

	background: #e30613;

	transform: scaleX(0);

	transform-origin: left;

	transition: transform 0.2s ease;

}



.page .property-presentation__tab span {

	color: #e30613;

	font-size: 10px;

}



.page .property-presentation__tab:hover,

.page .property-presentation__tab:focus-visible,

.page .property-presentation__tab.is-active {

	color: #24272b;

	background: transparent;

}



.page .property-presentation__tab.is-active::after {

	transform: scaleX(1);

}



.property-presentation__case[hidden] {

	display: none;

}

.property-presentation__showcase {

	position: relative;

	display: grid;

	grid-template-columns: minmax(0, 1.55fr) minmax(260px, 0.72fr);

	gap: 18px;

	width: min(100%, 1500px);

	height: clamp(360px, 29vw, 420px);

	margin: 0 auto 28px;

}



.property-presentation__main-image {

	position: relative;

	min-width: 0;

	min-height: 0;

	height: 100%;

	overflow: hidden;

	background: #eee;

	border-radius: 25px 0px 0 25px;

}



.property-presentation__main-image > img {

	position: absolute;

	inset: 0;

	display: block;

	width: 100%;

	height: 100%;

	max-width: none;

	object-fit: cover;

	object-position: center 45%;

	transition: transform 0.4s ease;

}

/* Voor- en naslider

   ================================================== */



.property-comparison {

	cursor: ew-resize;

	user-select: none;

}



.property-comparison__before,

.property-comparison__after,

.property-comparison__after img {

	position: absolute;

	inset: 0;

	display: block;

	width: 100%;

	height: 100%;

	max-width: none;

	object-fit: cover;

	object-position: center;

}



.property-comparison__after {

	z-index: 1;

	overflow: hidden;

	pointer-events: none;

	clip-path: inset(

		0

		calc(100% - var(--comparison-position))

		0

		0

	);

}



.property-comparison__label {

	position: absolute;

	z-index: 4;

	top: 14px;

	padding: 7px 11px;

	color: #24272b;

	background: rgba(255, 255, 255, 0.92);

	font-size: 10px;

	font-weight: 700;

	line-height: 1.3;

	pointer-events: none;

}



.property-comparison__label--before {

	left: 14px;

}



.property-comparison__label--after {

	right: 14px;

}



.property-comparison__divider {

	position: absolute;

	z-index: 4;

	top: 0;

	bottom: 0;

	left: var(--comparison-position);

	width: 2px;

	pointer-events: none;

	background: #fff;

	transform: translateX(-50%);

	box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);

}



.property-comparison__divider span {

	position: absolute;

	top: 50%;

	left: 50%;

	display: flex;

	width: 42px;

	height: 42px;

	align-items: center;

	justify-content: center;

	color: #e30613;

	background: #fff;

	border-radius: 50%;

	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);

	transform: translate(-50%, -50%);

}



.property-comparison__divider svg {

	width: 23px;

	height: 23px;

	fill: none;

	stroke: currentColor;

	stroke-width: 1.8;

	stroke-linecap: round;

	stroke-linejoin: round;

}



.property-comparison__range {

	position: absolute;

	z-index: 5;

	inset: 0;

	width: 100%;

	height: 100%;

	margin: 0;

	cursor: ew-resize;

	opacity: 0;

}



.property-comparison .property-presentation__address {

	z-index: 6;

	pointer-events: none;

}



/* Bij de vergelijking geen hoverzoom toepassen */

.property-comparison:hover > img,

.property-comparison:hover .property-comparison__after img {

	transform: none;

}

/* Woningadres

   ================================================== */



.property-presentation__address {

	position: absolute;

	right: auto;

	bottom: 20px;

	left: 20px;

	padding: 14px 18px;

	color: #24272b;

	background: rgba(255, 255, 255, 0.94);

	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);

	backdrop-filter: blur(6px);

}



.property-presentation__address strong,

.property-presentation__address span {

	display: block;

}



.property-presentation__address strong {

	font-size: 17px;

	line-height: 1.4;

}



.property-presentation__address span {

	margin-top: 2px;

	color: #6c6c6c;

	font-size: 12px;

	line-height: 1.4;

}



/* Afbeeldingen rechterzijde

   ================================================== */



.property-presentation__side-images {

	display: grid;

	grid-template-rows: repeat(2, minmax(0, 1fr));

	gap: 18px;

	min-width: 0;

	min-height: 0;

	height: 100%;

}



.property-presentation__side-images figure {

	position: relative;

	min-width: 0;

	min-height: 0;

	overflow: hidden;

	background: #eee;

	border-radius: 0px 15px 0px 10px;

}



.property-presentation__side-images figure:last-child {

	border-radius: 15px 0px 15px 28px;

}



.property-presentation__side-images img {

	position: absolute;

	inset: 0;

	display: block;

	width: 100%;

	height: 100%;

	max-width: none;

	object-fit: cover;

	object-position: center;

	transition: transform 0.4s ease;

}



.property-presentation__image-label {

	position: absolute;

	right: 12px;

	bottom: 12px;

	padding: 7px 11px;

	color: #24272b;

	background: rgba(255, 255, 255, 0.92);

	font-size: 11px;

	font-weight: 700;

	line-height: 1.3;

}



/* Verticale woningvideo

   ================================================== */



.property-presentation__video {

	position: absolute;

	z-index: 3;

    top: 68%;

    right: clamp(225px, 22vw, 325px);

	width: clamp(150px, 14vw, 175px);

	padding: 8px;

	overflow: hidden;

	color: #fff;

	background: #171717;

	border: 0px solid #171717;

	border-radius: 29px;

	box-shadow: 0 20px 45px rgb(0 0 0 / 5%);

	transform: translateY(-50%) rotate(-2deg);

	transition:

		transform 0.25s ease,

		box-shadow 0.25s ease;

}



/* Bovenste uitsparing van het telefoonframe */

.property-presentation__video::before {

	content: "";

	position: absolute;

	z-index: 4;

	top: 14px;

	left: 50%;

	width: 54px;

	height: 14px;

	pointer-events: none;

	background: #171717;

	border-radius: 10px;

	transform: translateX(-50%);

}



/* Video */

.property-presentation__video-player {

	display: block;

	width: 100%;

	aspect-ratio: 9 / 16;

	object-fit: cover;

	background: #171717;

	border-radius: 17px;

}



/* Klikbaar vlak */

.page .property-presentation__video-trigger {

	position: absolute;

	z-index: 2;

	inset: 8px;

	display: block;

	width: calc(100% - 16px);

	height: calc(100% - 16px);

	margin: 0;

	padding: 0;

	color: #fff;

	background: transparent;

	border: 0;

	border-radius: 17px;

	cursor: pointer;

	text-align: left;

	text-transform: none;

}



/* Playknop */

.property-presentation__play {

	position: absolute;

	z-index: 2;

	top: 50%;

	left: 50%;

	display: flex;

	width: 50px;

	height: 50px;

	align-items: center;

	justify-content: center;

	color: #fff;

	background: rgba(255, 255, 255, 0.22);

	border: 1px solid rgba(255, 255, 255, 0.9);

	border-radius: 50%;

	transform: translate(-50%, -50%);

	backdrop-filter: blur(4px);

}



.property-presentation__play svg {

	display: block;

	width: 22px;

	height: 22px;

	margin-left: 3px;

	fill: currentColor;

}



/* Tekst over de video */

.property-presentation__video-text {

	position: absolute;

	z-index: 2;

	right: 14px;

	bottom: 16px;

	left: 14px;

	color: #fff;

	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);

}



.property-presentation__video-text strong,

.property-presentation__video-text small {

	display: block;

	color: inherit;

}



.property-presentation__video-text strong {

	font-size: 13px;

	line-height: 1.3;

}



.property-presentation__video-text small {

	margin-top: 3px;

	font-size: 9px;

	line-height: 1.4;

}



/* Video afspelen */

.property-presentation__video.is-playing {

	transform: translateY(-50%) rotate(0);

}



.property-presentation__video.is-playing

.property-presentation__video-trigger {

	display: none;

}



.property-presentation__video.is-playing

.property-presentation__video-player {

	position: relative;

	z-index: 3;

}



.property-presentation__video-trigger:focus-visible {

	outline: 3px solid #fff;

	outline-offset: -5px;

}



/* Presentatieonderdelen

   ================================================== */



.property-presentation__features {

	position: relative;

	z-index: 4;

	display: grid;

	grid-template-columns: repeat(4, minmax(0, 1fr));

	margin-top: 0;

	background: #fff;

	border-top: 1px solid rgba(36, 39, 43, 0.13);

	border-bottom: 1px solid rgba(36, 39, 43, 0.13);

}

.property-presentation__feature p{

	font-size:12px;

	margin-top:5px;

}

.property-presentation__feature {

	min-width: 0;

	padding: 21px 18px;

	border-right: 1px solid rgba(36, 39, 43, 0.13);

}



.property-presentation__feature:first-child {

	padding-left: 0;

}



.property-presentation__feature:last-child {

	padding-right: 0;

	border-right: 0;

}



.property-presentation__feature span,

.property-presentation__feature strong {

	display: block;

}



.property-presentation__feature span {

	color: #e30613;

	font-size: 11px;

	font-weight: 700;

	line-height: 1.3;

}



.property-presentation__feature strong {

	margin-top: 6px;

	font-size: 13px;

	line-height: 1.45;

}



/* Onderste CTA

   ================================================== */



.property-presentation__footer {

	display: flex;

	gap: 35px;

	align-items: center;

	justify-content: space-between;

	margin-top: 25px;

	padding: 24px 27px;

	background: #f8f3eb;

}



.property-presentation__footer > div {

	max-width: 650px;

}



.property-presentation__footer span,

.property-presentation__footer strong {

	display: block;

}



.property-presentation__footer span {

	margin-bottom: 4px;

	color: #777;

	font-size: 11px;

	line-height: 1.4;

}



.property-presentation__footer strong {

	font-size: 15px;

	line-height: 1.5;

}



.page .property-presentation__button {

	display: inline-flex;

	flex: 0 0 auto;

	gap: 12px;

	align-items: center;

	justify-content: center;

	margin: 0;

	padding: 13px 18px;

	color: #fff;

	background: #e30613;

	border: 1px solid #e30613;

	font-size: 12px;

	font-weight: 700;

	line-height: 1.4;

	text-decoration: none;

	transition:

		background-color 0.2s ease,

		border-color 0.2s ease;

}



.property-presentation__button svg {

	display: block;

	width: 18px;

	height: 18px;

	fill: none;

	stroke: currentColor;

	stroke-width: 1.8;

	stroke-linecap: round;

	stroke-linejoin: round;

}



.page .property-presentation__button:hover,

.page .property-presentation__button:focus-visible {

	color: #fff;

	background: #c9000b;

	border-color: #c9000b;

}



/* Hover

   ================================================== */



@media (hover: hover) {



	.property-presentation__main-image:hover > img,

	.property-presentation__side-images figure:hover img {

		transform: scale(1.035);

	}



	.property-presentation__video:not(.is-playing):hover {

		box-shadow: 0 24px 50px rgb(0 0 0 / 20%);

		transform: translateY(calc(-50% - 4px)) rotate(0);

	}

}



/* Tablet

   ================================================== */



@media (max-width: 991.98px) {



	.property-presentation__intro {

		grid-template-columns: minmax(0, 1fr) minmax(280px, 0.8fr);

		gap: 35px;

	}



	.property-presentation__showcase {

		grid-template-columns: minmax(0, 1.5fr) minmax(230px, 0.7fr);

		height: 400px;

	}



	.property-presentation__video {

	top: 56%;

	right: 155px;

	width: 155px;

}

}



/* Mobiel

   ================================================== */



@media (max-width: 767.98px) {



	.property-presentation {

		padding: 50px 0;

	}



	.property-presentation__intro {

		grid-template-columns: 1fr;

		gap: 18px;

		margin-bottom: 30px;

	}



	.property-presentation__heading h2 {

		font-size: clamp(36px, 11vw, 48px);

	}



	.property-presentation__showcase {

	grid-template-columns: 1fr;

	gap: 12px;

	height: auto;

	margin-bottom: 0;

}



	.property-presentation__main-image {

		height: 330px;

	}



	.property-presentation__side-images {

		grid-template-columns: repeat(2, minmax(0, 1fr));

		grid-template-rows: 150px;

		gap: 12px;

		height: 150px;

	}



	.property-presentation__side-images figure {

		height: 150px;

	}



	.property-presentation__video {

		top: auto;

		right: 16px;

		bottom: 92px;

		width: 130px;

		padding: 6px;

		border-width: 4px;

		border-radius: 24px;

		transform: rotate(-2deg);

	}



	.property-presentation__video::before {

		top: 11px;

		width: 45px;

		height: 12px;

	}



	.property-presentation__video-player,

	.page .property-presentation__video-trigger {

		border-radius: 14px;

	}



	.page .property-presentation__video-trigger {

		inset: 6px;

		width: calc(100% - 12px);

		height: calc(100% - 12px);

	}



	.property-presentation__video.is-playing {

		transform: rotate(0);

	}



	.property-presentation__features {

		grid-template-columns: repeat(2, minmax(0, 1fr));

		margin-top: 30px;

	}



	.property-presentation__feature {

		padding: 18px 14px;

	}



	.property-presentation__feature:first-child {

		padding-left: 14px;

	}



	.property-presentation__feature:nth-child(2) {

		border-right: 0;

	}



	.property-presentation__feature:nth-child(-n + 2) {

		border-bottom: 1px solid rgba(36, 39, 43, 0.13);

	}



	.property-presentation__footer {

		align-items: flex-start;

		flex-direction: column;

		gap: 20px;

		margin-top: 20px;

		padding: 23px;

	}



	.page .property-presentation__button {

		width: 100%;

	}



	.property-presentation__video:not(.is-playing):hover {

		transform: rotate(0);

	}

	.property-presentation__tabs {

	gap: 22px;

	overflow-x: auto;

	margin-bottom: 16px;

	padding-bottom: 1px;

	scrollbar-width: none;

}



.property-presentation__tabs::-webkit-scrollbar {

	display: none;

}



.page .property-presentation__tab {

	flex: 0 0 auto;

	white-space: nowrap;

}



.property-comparison__label {

	top: 10px;

	padding: 6px 8px;

	font-size: 9px;

}



.property-comparison__label--before {

	left: 10px;

}



.property-comparison__label--after {

	right: 10px;

}



.property-comparison__divider span {

	width: 38px;

	height: 38px;

}

}



/* Kleine telefoons

   ================================================== */



@media (max-width: 420px) {



	.property-presentation__main-image {

		height: 290px;

	}



	.property-presentation__address {

		right: 14px;

		bottom: 14px;

		left: 14px;

		padding: 12px 14px;

	}



	.property-presentation__side-images {

		grid-template-rows: 135px;

		height: 135px;

	}



	.property-presentation__side-images figure {

		height: 135px;

	}



	.property-presentation__video {

		right: 10px;

		bottom: 82px;

		width: 118px;

	}



	.property-presentation__play {

		width: 42px;

		height: 42px;

	}



	.property-presentation__play svg {

		width: 19px;

		height: 19px;

	}



	.property-presentation__video-text {

		right: 11px;

		bottom: 13px;

		left: 11px;

	}



	.property-presentation__video-text strong {

		font-size: 11px;

	}



	.property-presentation__video-text small {

		font-size: 8px;

	}

}



/* Minder beweging

   ================================================== */



@media (prefers-reduced-motion: reduce) {



	.property-presentation__video,

	.property-presentation__side-images img,

	.property-presentation__button {

		transition: none;

	}



	.property-presentation__video:hover,

	.property-presentation__side-images figure:hover img {

		transform: none;

	}

}



/* =========================================================

   CONTACTBLOK

   Gutenberg + OneStep Light Forms

   ========================================================= */



.contact-conversion {

	--contact-red: #e30613;

	--contact-dark: #212529;

	--contact-muted: #6d6d6d;

	--contact-beige: #f8f3eb;

	--contact-border: #d9d4cc;



	width: 100%;

	margin: clamp(55px, 7vw, 100px) 0;

}



.contact-conversion__inner,

.contact-conversion__inner.wp-block-columns {

	display: grid;

	grid-template-columns: minmax(0, 58fr) minmax(360px, 42fr);

	align-items: stretch;

	width: 100%;

	margin: 0;

	gap: 0;

}



.contact-conversion__inner > * {

	align-self: stretch;

	min-width: 0;

	margin-top: 0;

	margin-bottom: 0;

}





/* =========================================================

   LINKERKOLOM

   ========================================================= */



.contact-conversion__form {

	position: relative;

	z-index: 2;

	box-sizing: border-box;

	height: auto;

	padding: 42px 54px;

	background: var(--contact-beige);

}



.contact-conversion__eyebrow {

	display: block;

	margin: 0 0 14px;

	color: var(--contact-red);

	font-size: 13px;

	font-weight: 700;

	line-height: 1.3;

	letter-spacing: 0.11em;

	text-transform: uppercase;

}



.contact-conversion__form h2 {

	max-width: 720px;

	margin: 0 0 16px;

	color: var(--contact-dark);

	font-size: clamp(38px, 3vw, 50px);

	font-weight: 700;

	line-height: 1.06;

	letter-spacing: -0.045em;

}



.contact-conversion__form h2 strong {

	display: block;

	color: var(--contact-red);

	font-weight: inherit;

	white-space: nowrap;

}



.contact-conversion__intro {

	max-width: 720px;

	margin: 0 0 24px;

	color: var(--contact-dark);

	font-size: clamp(15px, 1vw, 18px);

	line-height: 1.55;

}



.contact-conversion__intro p {

	margin: 0;

}





/* =========================================================

   ONESTEP LIGHT FORMS

   ========================================================= */



.contact-conversion .osm-light-form {

	display: grid;

	grid-template-columns: repeat(2, minmax(0, 1fr));

	gap: 12px;

	width: 100%;

	max-width: none;

	margin: 0;

}



.contact-conversion .osm-lf-field {

	min-width: 0;

	margin: 0;

}



.contact-conversion .osm-lf-field--email,

.contact-conversion .osm-lf-field--textarea,

.contact-conversion .osm-lf-field--select,

.contact-conversion .osm-lf-field--checkbox {

	grid-column: 1 / -1;

}



.contact-conversion .osm-light-form input:not([type="checkbox"]),

.contact-conversion .osm-light-form select,

.contact-conversion .osm-light-form textarea {

	display: block;

	box-sizing: border-box;

	width: 100%;

	margin: 0;

	padding: 13px 16px;

	border: 1px solid var(--contact-border);

	border-radius: 0;

	background: #fff;

	box-shadow: none;

	color: var(--contact-dark);

	font: inherit;

	font-size: 15px;

	line-height: 1.4;

	transition:

		border-color 0.2s ease,

		box-shadow 0.2s ease;

}



.contact-conversion .osm-light-form input:not([type="checkbox"]),

.contact-conversion .osm-light-form select {

	min-height: 50px;

}



.contact-conversion .osm-light-form textarea {

	height: 105px;

	min-height: 105px;

	max-height: 200px;

	resize: vertical;

}



.contact-conversion .osm-light-form input::placeholder,

.contact-conversion .osm-light-form textarea::placeholder {

	color: #858585;

	opacity: 1;

}



.contact-conversion .osm-light-form input:focus,

.contact-conversion .osm-light-form select:focus,

.contact-conversion .osm-light-form textarea:focus {

	border-color: var(--contact-red);

	outline: 0;

	box-shadow: 0 0 0 2px rgba(227, 6, 19, 0.1);

}



.contact-conversion .osm-lf-checkbox {

	display: flex;

	align-items: flex-start;

	gap: 10px;

	padding: 2px 0;

	color: var(--contact-muted);

	font-size: 14px;

	font-weight: 400;

	line-height: 1.5;

	cursor: pointer;

}



.contact-conversion .osm-lf-checkbox input {

	flex: 0 0 auto;

	width: 17px;

	height: 17px;

	margin: 2px 0 0;

	accent-color: var(--contact-red);

}



.contact-conversion .osm-light-form button {

	position: relative;

	grid-column: 1 / -1;

	justify-self: start;

	min-width: 0;

	margin: 2px 0 0;

	padding: 14px 54px 14px 24px;

	border: 0;

	border-radius: 0;

	background: var(--contact-red);

	color: #fff;

	font: inherit;

	font-size: 14px;

	font-weight: 700;

	line-height: 1.2;

	cursor: pointer;

	transition: background-color 0.2s ease;

}



.contact-conversion .osm-light-form button::after {

	position: absolute;

	top: 50%;

	right: 23px;

	content: "→";

	font-size: 18px;

	font-weight: 400;

	line-height: 1;

	transform: translateY(-52%);

	transition: transform 0.2s ease;

}



.contact-conversion .osm-light-form button:hover {

	background: #c9000b;

}



.contact-conversion .osm-light-form button:hover::after {

	transform: translate(4px, -52%);

}



.contact-conversion .osm-light-form button:focus-visible {

	outline: 3px solid rgba(227, 6, 19, 0.25);

	outline-offset: 3px;

}



.contact-conversion .osm-lf-ok,

.contact-conversion .osm-lf-error {

	grid-column: 1 / -1;

	max-width: none;

	margin: 0 0 14px;

	padding: 12px 15px;

	font-size: 14px;

	line-height: 1.5;

}



.contact-conversion .osm-lf-ok {

	background: #edf8f0;

	color: #176b31;

}



.contact-conversion .osm-lf-error {

	background: #fff0f1;

	color: #8b1118;

}





/* =========================================================

   RECHTERKOLOM

   ========================================================= */



.contact-conversion__person {

	position: relative;

	align-self: stretch;

	min-width: 0;

	height: auto;

	margin: 0;

	overflow: hidden;

	border-radius: 0 42px 0 0;

}



.contact-conversion__person .wp-block-image {

	position: absolute;

	inset: 0;

	display: block;

	width: 100%;

	height: 100%;

	margin: 0;

	overflow: hidden;

}



.contact-conversion__person .wp-block-image img {

	display: block;

	width: 100%;

	height: 100%;

	max-width: none;

	margin: 0;

	object-fit: cover;

	object-position: center 28%;

	opacity: 1;

	transition:

		opacity 0.42s ease-in-out,

		transform 0.7s ease;

}



.contact-conversion__person:hover .wp-block-image img {

	transform: scale(1.025);

}



.contact-conversion__person.is-changing .wp-block-image img {

	opacity: 0.08;

}





/* =========================================================

   MAKELAARWISSELAAR

   ========================================================= */



.contact-conversion__person-switcher {

	position: absolute;

	top: 22px;

	left: 22px;

	z-index: 3;

	display: grid;

	grid-template-columns: repeat(2, auto);

	padding: 0;

	border: 0;

	border-bottom: 1px solid rgba(33, 37, 41, 0.16);

	box-shadow: none;

}



.contact-conversion .contact-conversion__person-switcher button {

	position: relative;

	min-width: 110px;

	margin: 0;

	padding: 13px 18px 14px;

	border: 0;

	border-radius: 0;

	background: transparent;

	color: #fff;

	font: inherit;

	font-size: 13px;

	font-weight: 700;

	line-height: 1.2;

	text-align: left;

	cursor: pointer;

	transition: color 0.2s ease;

}



.contact-conversion .contact-conversion__person-switcher button::before {

	margin-right: 8px;

	color: var(--contact-red);

	font-size: 12px;

	font-weight: 700;

}



.contact-conversion .contact-conversion__person-switcher button:first-child::before {

	content: "01";

}



.contact-conversion .contact-conversion__person-switcher button:nth-child(2)::before {

	content: "02";

}



.contact-conversion .contact-conversion__person-switcher button::after {

	position: absolute;

	right: 0;

	bottom: -1px;

	left: 0;

	display: block;

	width: 100%;

	height: 2px;

	content: "";

	background: var(--contact-red);

	opacity: 0;

	transform: scaleX(0);

	transform-origin: left center;

	transition:

		opacity 0.2s ease,

		transform 0.25s ease;

}



.contact-conversion .contact-conversion__person-switcher button:hover {

	background: transparent;

}



.contact-conversion .contact-conversion__person-switcher button.is-active {

	background: transparent;

	color: #fff;

}



.contact-conversion .contact-conversion__person-switcher button.is-active::after {

	opacity: 1;

	transform: scaleX(1);

}



.contact-conversion .contact-conversion__person-switcher button:focus-visible {

	outline: 2px solid var(--contact-red);

	outline-offset: -3px;

}





/* =========================================================

   CONTACTKAART

   ========================================================= */



.contact-conversion__person-card {

	position: absolute;

	right: 24px;

	bottom: 24px;

	left: 24px;

	z-index: 2;

	box-sizing: border-box;

	padding: 22px 26px;

	background: rgba(255, 255, 255, 0.97);

	box-shadow: 0 16px 40px rgba(20, 20, 20, 0.12);

	width:60%;

}



.contact-conversion__person-label {

	display: block;

	margin: 0 0 5px;

	color: var(--contact-muted);

	font-size: 13px;

	font-weight: 400;

	line-height: 1.4;

}



.contact-conversion__person-card h3 {

	margin: 0 0 16px;

	color: var(--contact-dark);

	font-size: clamp(24px, 1.7vw, 30px);

	font-weight: 700;

	line-height: 1.1;

	letter-spacing: -0.025em;

}



.contact-conversion__contact-links {

	display: grid;

	gap: 8px;

	margin: 0 0 14px;

}



.contact-conversion__person-card a {

	display: flex;

	align-items: center;

	gap: 10px;

	width: fit-content;

	max-width: 100%;

	margin: 0 0 8px;

	color: var(--contact-dark);

	font-size: 14px;

	font-weight: 700;

	line-height: 1.4;

	text-decoration: none;

	transition: color 0.2s ease;

}



.contact-conversion__contact-links a {

	margin: 0;

}



.contact-conversion__person-card a:hover {

	color: var(--contact-red);

}





/* Voorkomt dat algemene thema-CSS de SVG-iconen uitrekt */



.contact-conversion .contact-conversion__person-card svg {

	display: block;

	flex: 0 0 19px;

	width: 19px;

	height: 19px;

	min-width: 19px;

	max-width: 19px;

	min-height: 19px;

	max-height: 19px;

	margin: 0;

	overflow: visible;

	fill: none;

	stroke: var(--contact-red);

	stroke-width: 1.8;

	stroke-linecap: round;

	stroke-linejoin: round;

}



.contact-conversion .contact-conversion__person-card svg path,

.contact-conversion .contact-conversion__person-card svg rect,

.contact-conversion .contact-conversion__person-card svg polyline,

.contact-conversion .contact-conversion__person-card svg line {

	fill: none;

	stroke: inherit;

	stroke-width: inherit;

	stroke-linecap: inherit;

	stroke-linejoin: inherit;

}



.contact-conversion__person-text {

	margin: 13px 0 0;

	color: var(--contact-muted);

	font-size: 13px;

	line-height: 1.5;

}





/* =========================================================

   TABLET

   ========================================================= */



@media (max-width: 1100px) {

	.contact-conversion__inner,

	.contact-conversion__inner.wp-block-columns {

		grid-template-columns: minmax(0, 56fr) minmax(330px, 44fr);

	}



	.contact-conversion__form {

		padding: 40px;

	}



	.contact-conversion__form h2 {

		font-size: clamp(36px, 4vw, 46px);

	}



	.contact-conversion__person-switcher {

		top: 18px;

		left: 18px;

	}



	.contact-conversion__person-card {

		right: 20px;

		bottom: 20px;

		left: 20px;

		padding: 20px;

	}

}





/* =========================================================

   MOBIEL

   ========================================================= */



@media (max-width: 850px) {

	.contact-conversion {

		margin: 50px 0;

	}



	.contact-conversion__inner,

	.contact-conversion__inner.wp-block-columns {

		display: grid;

		grid-template-columns: 1fr;

		align-items: initial;

	}



	.contact-conversion__form {

		height: auto;

		padding: 40px 28px;

	}



	.contact-conversion__form h2 {

		max-width: 680px;

		font-size: clamp(36px, 7vw, 48px);

	}



	.contact-conversion__form h2 strong {

		white-space: normal;

	}



	.contact-conversion__intro {

		margin-bottom: 24px;

		font-size: 16px;

	}



	.contact-conversion__person {

		height: auto;

		min-height: 0;

		overflow: visible;

		border-radius: 0;

	}



	.contact-conversion__person .wp-block-image {

		position: relative;

		inset: auto;

		height: clamp(420px, 70vw, 520px);

		margin: 0;

		border-radius: 0;

	}



	.contact-conversion__person-card {

		right: 24px;

		bottom: 24px;

		left: 24px;

	}

}



@media (max-width: 600px) {

	.contact-conversion {

		margin: 40px 0;

	}



	.contact-conversion__form {

		padding: 36px 20px;

	}



	.contact-conversion__eyebrow {

		margin-bottom: 12px;

		font-size: 12px;

	}



	.contact-conversion__form h2 {

		margin-bottom: 16px;

		font-size: clamp(32px, 10vw, 43px);

	}



	.contact-conversion__form h2 strong {

		white-space: normal;

	}



	.contact-conversion__intro {

		margin-bottom: 22px;

		font-size: 15px;

		line-height: 1.55;

	}



	.contact-conversion .osm-light-form {

		grid-template-columns: 1fr;

		gap: 10px;

	}



	.contact-conversion .osm-lf-field {

		grid-column: 1;

	}



	.contact-conversion .osm-light-form input:not([type="checkbox"]),

	.contact-conversion .osm-light-form select {

		min-height: 50px;

	}



	.contact-conversion .osm-light-form textarea {

		height: 110px;

		min-height: 110px;

	}



	.contact-conversion .osm-light-form button {

		width: 100%;

		justify-self: stretch;

		text-align: left;

	}



	.contact-conversion__person .wp-block-image {

		height: 410px;

	}



	.contact-conversion__person-switcher {

		top: 16px;

		left: 16px;

	}



	.contact-conversion .contact-conversion__person-switcher button {

		min-width: 92px;

		padding: 11px 13px 12px;

		font-size: 12px;

	}



	.contact-conversion__person-card {

		position: relative;

		right: auto;

		bottom: auto;

		left: auto;

		margin: -48px 16px 0;

		padding: 21px 20px;

	}



	.contact-conversion__person-card h3 {

		margin-bottom: 15px;

		font-size: 26px;

	}



	.contact-conversion__person-card a {

		width: 100%;

		font-size: 14px;

		word-break: break-word;

	}

}





/* =========================================================

   TOEGANKELIJKHEID

   ========================================================= */



@media (prefers-reduced-motion: reduce) {

	.contact-conversion__person .wp-block-image img,

	.contact-conversion .osm-light-form button,

	.contact-conversion .osm-light-form button::after,

	.contact-conversion__person-image {

		transition: none;

	}

}





/* =========================================================

   INTERACTIEVE VERKOOPROUTE

   ========================================================= */



.sale-journey {

	--sale-red: #e30613;

	--sale-red-dark: #c9000b;

	--sale-dark: #212529;

	--sale-muted: #707070;

	--sale-beige: #f8f3eb;

	--sale-light: #fcfaf7;

	--sale-border: #dedbd5;

	--sale-white: #fff;



	display: grid;

	grid-template-rows: auto 1fr;

	width: 100%;

	height: 100%;

	min-height: 500px;

	background: var(--sale-beige);

}





/* =========================================================

   STAPPENBALK

   ========================================================= */



.sale-journey__steps {

	position: relative;

	display: grid;

	grid-template-columns: repeat(5, minmax(0, 1fr));

	padding: 24px 18px 20px;

	background: var(--sale-light);

}



.sale-journey__track,

.sale-journey__progress {

	position: absolute;

	top: 45px;

	left: 10%;

	height: 2px;

	pointer-events: none;

}



.sale-journey__track {

	right: 10%;

	background: var(--sale-border);

}



.sale-journey__progress {

	z-index: 1;

	width: 0;

	background: var(--sale-red);

	transition: width 0.45s ease;

}



.sale-journey__step {

	position: relative;

	z-index: 2;

	display: grid;

	justify-items: center;

	gap: 9px;

	min-width: 0;

	margin: 0;

	padding: 0 4px;

	border: 0;

	border-radius: 0;

	appearance: none;

	background: transparent;

	box-shadow: none;

	color: var(--sale-muted);

	font: inherit;

	font-size: 12px;

	font-weight: 600;

	line-height: 1.3;

	text-align: center;

	cursor: pointer;

	transition: color 0.25s ease;

}



.sale-journey__number {

	display: grid;

	place-items: center;

	width: 43px;

	height: 43px;

	border-radius: 50%;

	background: var(--sale-light);

	box-shadow: 0 0 0 2px var(--sale-border);

	color: var(--sale-muted);

	font-size: 13px;

	font-weight: 700;

	line-height: 1;

	transition:

		color 0.25s ease,

		background-color 0.25s ease,

		box-shadow 0.25s ease,

		transform 0.25s ease;

}



.sale-journey__step:hover {

	color: var(--sale-dark);

}



.sale-journey__step:hover .sale-journey__number {

	box-shadow: 0 0 0 2px var(--sale-red);

	color: var(--sale-red);

}



.sale-journey__step.is-complete .sale-journey__number,

.sale-journey__step.is-active .sale-journey__number {

	background: var(--sale-red);

	box-shadow: none;

	color: var(--sale-white);

}



.sale-journey__step.is-active {

	color: var(--sale-dark);

}



.sale-journey__step.is-active .sale-journey__number {

	transform: translateY(-3px);

}



.sale-journey__step:focus-visible {

	outline: 2px solid var(--sale-red);

	outline-offset: 4px;

}





/* =========================================================

   ACTIEVE STAP

   ========================================================= */



.sale-journey__panel {

	display: grid;

	grid-template-columns: minmax(150px, 0.72fr) minmax(0, 1.28fr);

	min-height: 360px;

	background: var(--sale-beige);

}



.sale-journey__visual {

	position: relative;

	display: grid;

	place-items: center;

	min-width: 0;

	overflow: hidden;

	background: var(--sale-red);

	border-radius: 10px 0px 0px 10px;

}



.sale-journey__visual::before,

.sale-journey__visual::after {

	position: absolute;

	content: "";

	border: 1px solid rgba(255, 255, 255, 0.2);

	border-radius: 50%;

}



.sale-journey__visual::before {

	width: 260px;

	height: 260px;

}



.sale-journey__visual::after {

	width: 180px;

	height: 180px;

}



.sale-journey__content {

	align-self: center;

	min-width: 0;

	padding: 34px;

	background: var(--sale-beige);

	opacity: 1;

	transform: translateY(0);

	transition:

		opacity 0.24s ease,

		transform 0.24s ease;

}



.sale-journey__panel.is-changing .sale-journey__content {

	opacity: 0.2;

	transform: translateY(6px);

}



.sale-journey__meta {

	display: block;

	margin: 0 0 8px;

	color: var(--sale-red);

	font-size: 12px;

	font-weight: 700;

	line-height: 1.3;

	letter-spacing: 0.1em;

	text-transform: uppercase;

}



.sale-journey__title {

	margin: 0 0 13px;

	color: var(--sale-dark);

	font-size: clamp(23px, 1.8vw, 31px);

	font-weight: 700;

	line-height: 1.15;

	letter-spacing: -0.025em;

}



.sale-journey__text {

	margin: 0 0 22px;

	color: var(--sale-muted);

	font-size: 15px;

	line-height: 1.65;

}



.sale-journey__next {

	display: inline-flex;

	align-items: center;

	justify-content: space-between;

	gap: 20px;

	min-width: 165px;

	min-height: 44px;

	margin: 0;

	padding: 13px 18px;

	border: 0;

	border-radius: 0;

	appearance: none;

	background: var(--sale-red);

	box-shadow: none;

	color: var(--sale-white);

	font: inherit;

	font-size: 13px;

	font-weight: 700;

	line-height: 1.2;

	cursor: pointer;

	transition: background-color 0.2s ease;

}



.sale-journey__next:hover {

	background: var(--sale-red-dark);

}



.sale-journey__next span:last-child {

	font-size: 18px;

	font-weight: 400;

	transition: transform 0.2s ease;

}



.sale-journey__next:hover span:last-child {

	transform: translateX(4px);

}



.sale-journey__next:focus-visible {

	outline: 2px solid var(--sale-red);

	outline-offset: 3px;

}





/* =========================================================

   WISSELENDE STAPICONEN

   ========================================================= */



.sale-journey__icon {

	position: absolute;

	z-index: 2;

	display: grid;

	place-items: center;

	width: 110px;

	height: 110px;

	color: var(--sale-white);

	opacity: 0;

	transform: translateY(12px) scale(0.9);

	pointer-events: none;

	transition:

		opacity 0.4s ease,

		transform 0.5s ease;

}



.sale-journey__icon.is-active {

	opacity: 1;

	transform: translateY(0) scale(1);

}



.sale-journey__icon svg {

	display: block;

	width: 100%;

	height: 100%;

	max-width: 110px;

	max-height: 110px;

	margin: 0;

	overflow: visible;

	fill: none;

	stroke: currentColor;

	stroke-width: 2;

	stroke-linecap: round;

	stroke-linejoin: round;

}



.sale-journey__icon svg path,

.sale-journey__icon svg rect,

.sale-journey__icon svg circle,

.sale-journey__icon svg line,

.sale-journey__icon svg polyline {

	fill: none;

	stroke: inherit;

	stroke-width: inherit;

	stroke-linecap: inherit;

	stroke-linejoin: inherit;

}



.sale-journey__visual-step {

	position: absolute;

	right: 20px;

	bottom: 14px;

	color: rgba(255, 255, 255, 0.18);

	font-size: clamp(60px, 7vw, 105px);

	font-weight: 700;

	line-height: 1;

	letter-spacing: -0.08em;

	transition:

		opacity 0.3s ease,

		transform 0.4s ease;

}



.sale-journey__panel.is-changing .sale-journey__visual-step {

	opacity: 0;

	transform: translateY(8px);

}





/* =========================================================

   TABLET

   ========================================================= */



@media (max-width: 1150px) {

	.sale-journey__steps {

		padding-inline: 12px;

	}



	.sale-journey__step-name {

		display: none;

	}



	.sale-journey__panel {

		grid-template-columns: minmax(140px, 0.65fr) minmax(0, 1.35fr);

	}



	.sale-journey__content {

		padding: 28px;

	}



	.sale-journey__icon {

		width: 96px;

		height: 96px;

	}



	.sale-journey__icon svg {

		max-width: 96px;

		max-height: 96px;

	}

}





/* =========================================================

   MOBIEL

   ========================================================= */



@media (max-width: 850px) {

	.sale-journey {

		height: auto;

		min-height: 0;

	}



	.sale-journey__step-name {

		display: block;

	}



	.sale-journey__panel {

		min-height: 340px;

	}

}



@media (max-width: 600px) {

	.sale-journey__steps {

		padding: 20px 5px 18px;

	}



	.sale-journey__track,

	.sale-journey__progress {

		top: 41px;

	}



	.sale-journey__step {

		padding-inline: 2px;

	}



	.sale-journey__number {

		width: 41px;

		height: 41px;

	}



	.sale-journey__step-name {

		display: none;

	}



	.sale-journey__panel {

		grid-template-columns: 1fr;

	}



	.sale-journey__visual {

		min-height: 210px;

	}



	.sale-journey__content {

		padding: 27px 23px;

	}



	.sale-journey__title {

		font-size: 25px;

	}



	.sale-journey__text {

		font-size: 14px;

	}



	.sale-journey__icon {

		width: 90px;

		height: 90px;

	}



	.sale-journey__icon svg {

		max-width: 90px;

		max-height: 90px;

	}



	.sale-journey__visual-step {

		right: 16px;

		bottom: 10px;

		font-size: 72px;

	}

}





/* =========================================================

   TOEGANKELIJKHEID

   ========================================================= */



@media (prefers-reduced-motion: reduce) {

	.sale-journey__progress,

	.sale-journey__number,

	.sale-journey__content,

	.sale-journey__next,

	.sale-journey__next span,

	.sale-journey__icon,

	.sale-journey__visual-step {

		transition: none;

	}

}

.sale-journey__controls {

	display: flex;

	align-items: stretch;

	gap: 8px;

}



.sale-journey__previous {

	display: grid;

	flex: 0 0 44px;

	place-items: center;

	width: 44px;

	min-width: 44px;

	height: 48px;

	margin: 0;

	padding: 0;

	border: 0;

	border-radius: 0;

	appearance: none;

	background: #e9e7e3;

	box-shadow: none;

	color: var(--sale-dark);

	font: inherit;

	font-size: 18px;

	font-weight: 400;

	line-height: 1;

	cursor: pointer;

	transition:

		background-color 0.2s ease,

		color 0.2s ease;

}



.sale-journey__previous:hover:not(:disabled) {

	background: #dcd9d4;

	color: var(--sale-red);

}



.sale-journey__previous:disabled {

	opacity: 0.45;

	cursor: default;

}



.sale-journey__previous:focus-visible {

	outline: 2px solid var(--sale-red);

	outline-offset: 3px;

}

/* =========================================================

   TEAM SHOWCASE

   ========================================================= */



.team-showcase {

	--team-red: #e30613;

	--team-dark: #212529;

	--team-muted: #686868;

	--team-border: #e2ddd6;

	--team-white: #fff;

	--team-beige: #f8f3eb;

	--team-light: #fcfaf7;



	width: calc(100% - 40px);

	max-width: 1450px;

	margin: 0 auto;

	padding: clamp(40px, 5vw, 70px) 0;

}





/* =========================================================

   INTRO

   ========================================================= */



.team-showcase__intro {

	display: grid;

	grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr);

	align-items: end;

	gap: clamp(30px, 5vw, 75px);

	margin: 0 0 30px;

}



.team-showcase__eyebrow,

.team-partners__eyebrow {

	display: block;

	margin: 0 0 10px;

	color: var(--team-red);

	font-size: 12px;

	font-weight: 700;

	line-height: 1.3;

	letter-spacing: 0.11em;

	text-transform: uppercase;

}



.team-showcase__intro h2 {

	max-width: 620px;

	margin: 0;

	color: var(--team-dark);

	font-size: clamp(35px, 3.2vw, 49px);

	font-weight: 700;

	line-height: 1.06;

	letter-spacing: -0.045em;

}



.team-showcase__intro h2 strong {

	display: block;

	color: var(--team-red);

	font-weight: inherit;

}



.team-showcase__intro > p {

	max-width: 510px;

	margin: 0;

	color: var(--team-muted);

	font-size: clamp(15px, 1vw, 17px);

	line-height: 1.6;

}





/* =========================================================

   TEAMGRID

   ========================================================= */



.team-showcase__grid {

	display: grid;

	grid-template-columns:

		minmax(0, 1fr)

		minmax(0, 1fr)

		minmax(250px, 0.58fr);

	align-items: start;

	gap: clamp(22px, 2.5vw, 38px);

	width: 100%;

	margin: 0;

}



.team-member {

	position: relative;

	min-width: 0;

	margin: 0;

}



.team-member:nth-child(2) {

	margin-top: 24px;

}





/* =========================================================

   FOTO

   ========================================================= */



.team-member__photo {

	position: relative;

	width: 100%;

	height: clamp(280px, 24vw, 350px);

	margin: 0;

	overflow: hidden;

	background: var(--team-beige);

}



.team-member:first-child .team-member__photo {

	border-radius: 0 34px 0 0;

}



.team-member:nth-child(2) .team-member__photo {

	border-radius: 34px 0 0 0;

}



.team-member__photo img {

	display: block;

	width: 100%;

	height: 100%;

	margin: 0;

	object-fit: cover;

	object-position: center 25%;

	transition: transform 0.65s ease;

}



.team-member:hover .team-member__photo img {

	transform: scale(1.025);

}



.team-member__number {

	position: absolute;

	top: 16px;

	left: 18px;

	z-index: 2;

	color: var(--team-red);

	font-size: 12px;

	font-weight: 700;

	line-height: 1;

}



.team-member__tag {

	position: absolute;

	right: 14px;

	bottom: 14px;

	z-index: 2;

	padding: 7px 10px;

	background: rgba(255, 255, 255, 0.94);

	color: var(--team-dark);

	font-size: 11px;

	font-weight: 700;

	line-height: 1.2;

}





/* =========================================================

   INFORMATIEKAART

   ========================================================= */



.team-member__card {

	position: relative;

	z-index: 3;

	box-sizing: border-box;

	width: calc(100% - 40px);

	margin: -26px auto 0;

	padding: 19px 22px 20px;

	background: var(--team-white);

	box-shadow: 0 12px 28px rgba(30, 25, 20, 0.09);

	transition: transform 0.25s ease;

}



.team-member:hover .team-member__card {

	transform: translateY(-4px);

}



.team-member__role {

	display: block;

	margin: 0 0 5px;

	color: var(--team-red);

	font-size: 10px;

	font-weight: 700;

	line-height: 1.3;

	letter-spacing: 0.08em;

	text-transform: uppercase;

}



.team-member__name {

	margin: 0 0 5px;

	color: var(--team-dark);

	font-size: clamp(23px, 1.8vw, 30px);

	font-weight: 700;

	line-height: 1.1;

	letter-spacing: -0.03em;

}



.team-member__description {

	margin: 0;

	color: var(--team-muted);

	font-size: 13px;

	line-height: 1.5;

}





/* =========================================================

   CONTACTGEGEVENS

   ========================================================= */



.team-member__contact {

	display: flex;

	flex-wrap: wrap;

	gap: 8px 18px;

	margin: 14px 0 0;

	padding: 13px 0 0;

	border-top: 1px solid var(--team-border);

}



.team-member__contact a {

	display: inline-flex;

	align-items: center;

	gap: 7px;

	color: var(--team-dark);

	font-size: 12px;

	font-weight: 700;

	line-height: 1.4;

	text-decoration: none;

	transition: color 0.2s ease;

}



.team-member__contact a:hover {

	color: var(--team-red);

}



.team-member__contact svg {

	display: block;

	flex: 0 0 16px;

	width: 16px;

	height: 16px;

	min-width: 16px;

	max-width: 16px;

	min-height: 16px;

	max-height: 16px;

	margin: 0;

	overflow: visible;

	fill: none;

	stroke: var(--team-red);

	stroke-width: 1.8;

	stroke-linecap: round;

	stroke-linejoin: round;

}



.team-member__contact svg path,

.team-member__contact svg rect {

	fill: none;

	stroke: inherit;

	stroke-width: inherit;

	stroke-linecap: inherit;

	stroke-linejoin: inherit;

}





/* =========================================================

   PARTNERS

   ========================================================= */



.team-partners {

	box-sizing: border-box;

	margin: 48px 0 0;

	padding: 26px 24px;

	background: var(--team-beige);

}



.team-partners h3 {

	margin: 0 0 9px;

	color: var(--team-dark);

	font-size: clamp(23px, 1.7vw, 28px);

	font-weight: 700;

	line-height: 1.15;

	letter-spacing: -0.025em;

}



.team-partners__intro {

	margin: 0 0 21px;

	color: var(--team-muted);

	font-size: 13px;

	line-height: 1.55;

}



.team-partners__list {

	display: grid;

	gap: 0;

}



.team-partner {

	display: grid;

	grid-template-columns: 42px minmax(0, 1fr);

	align-items: center;

	gap: 12px;

	padding: 15px 0;

	border-top: 1px solid var(--team-border);

}



.team-partner:last-child {

	border-bottom: 1px solid var(--team-border);

}



.team-partner__icon {

	display: grid;

	place-items: center;

	width: 42px;

	height: 42px;

	border-radius: 50%;

	background: var(--team-white);

	color: var(--team-red);

}



.team-partner__icon svg {

	display: block;

	width: 21px;

	height: 21px;

	max-width: 21px;

	max-height: 21px;

	margin: 0;

	overflow: visible;

	fill: none;

	stroke: currentColor;

	stroke-width: 1.7;

	stroke-linecap: round;

	stroke-linejoin: round;

}



.team-partner__icon svg path,

.team-partner__icon svg circle,

.team-partner__icon svg rect {

	fill: none;

	stroke: inherit;

	stroke-width: inherit;

	stroke-linecap: inherit;

	stroke-linejoin: inherit;

}



.team-partner__content {

	display: block;

	min-width: 0;

}



.team-partner__content strong {

	display: block;

	margin: 0 0 3px;

	color: var(--team-dark);

	font-size: 13px;

	font-weight: 700;

	line-height: 1.35;

}



.team-partner__content small {

	display: block;

	color: var(--team-muted);

	font-size: 11px;

	line-height: 1.45;

}



.team-partners__note {

	margin: 20px 0 0;

	color: var(--team-dark);

	font-size: 12px;

	font-weight: 600;

	line-height: 1.5;

}





/* =========================================================

   KLEINERE DESKTOPS EN TABLETS

   ========================================================= */



@media (max-width: 1150px) {

	.team-showcase {

		width: calc(100% - 32px);

	}



	.team-showcase__grid {

		grid-template-columns: repeat(2, minmax(0, 1fr));

	}



	.team-partners {

		grid-column: 1 / -1;

		margin-top: 5px;

	}



	.team-partners__list {

		grid-template-columns: repeat(3, minmax(0, 1fr));

		gap: 20px;

	}



	.team-partner {

		border-top: 1px solid var(--team-border);

		border-bottom: 1px solid var(--team-border);

	}



	.team-partner:last-child {

		border-bottom: 1px solid var(--team-border);

	}

}



@media (max-width: 900px) {

	.team-showcase__intro {

		grid-template-columns: 1fr;

		gap: 14px;

	}



	.team-showcase__intro > p {

		max-width: 700px;

	}



	.team-showcase__grid {

		gap: 20px;

	}



	.team-member:nth-child(2) {

		margin-top: 18px;

	}



	.team-member__photo {

		height: clamp(270px, 40vw, 340px);

	}



	.team-member__card {

		width: calc(100% - 24px);

		padding: 18px 19px;

	}



	.team-member__name {

		font-size: 25px;

	}

}





/* =========================================================

   MOBIEL

   ========================================================= */



@media (max-width: 650px) {

	.team-showcase {

		width: calc(100% - 30px);

		padding: 40px 0;

	}



	.team-showcase__intro {

		margin-bottom: 25px;

	}



	.team-showcase__intro h2 {

		font-size: clamp(33px, 9vw, 42px);

	}



	.team-showcase__intro > p {

		font-size: 15px;

	}



	.team-showcase__grid {

		grid-template-columns: 1fr;

		gap: 30px;

	}



	.team-member:nth-child(2) {

		margin-top: 0;

	}



	.team-member__photo {

		height: clamp(270px, 85vw, 340px);

	}



	.team-member:first-child .team-member__photo,

	.team-member:nth-child(2) .team-member__photo {

		border-radius: 0 28px 0 0;

	}



	.team-member__card {

		width: calc(100% - 20px);

		margin-top: -24px;

		padding: 18px;

	}



	.team-member__name {

		font-size: 24px;

	}



	.team-member__description {

		font-size: 13px;

	}



	.team-partners {

		grid-column: auto;

		margin-top: 0;

		padding: 23px 20px;

	}



	.team-partners__list {

		grid-template-columns: 1fr;

		gap: 0;

	}



	.team-partner {

		border-bottom: 0;

	}



	.team-partner:last-child {

		border-bottom: 1px solid var(--team-border);

	}

}





/* =========================================================

   TOEGANKELIJKHEID

   ========================================================= */



@media (prefers-reduced-motion: reduce) {

	.team-member__photo img,

	.team-member__card {

		transition: none;

	}

}

/* =========================================================

   CONTACTPAGINA

   ========================================================= */



.contact-showcase {

	--contact-red: #e30613;

	--contact-red-dark: #c9000b;

	--contact-dark: #202428;

	--contact-text: #6f6f6f;

	--contact-panel-bg: #f8f3eb;

	--contact-form-bg: #fcfaf7;

	--contact-line: rgba(32, 36, 40, 0.12);

	--contact-field-border: #ddd8d1;



	display: grid;

	grid-template-columns: minmax(0, 1fr) 360px;

	align-items: start;

	column-gap: clamp(22px, 2.4vw, 36px);

	width: 100%;

	max-width: 1280px;

	margin-inline: auto;

}





/* =========================================================

   LINKERKOLOM

   ========================================================= */



.contact-showcase__main {

	width: 100%;

	min-width: 0;

}



.contact-showcase__intro {

	width: 100%;

	max-width: 700px;

	margin-bottom: 26px;

}



.contact-showcase__eyebrow,

.contact-panel__eyebrow {

	display: block;

	margin-bottom: 10px;

	color: var(--contact-red);

	font-size: 12px;

	font-weight: 700;

	line-height: 1.2;

	letter-spacing: 0.13em;

	text-transform: uppercase;

}



.contact-showcase__intro h2 {

	max-width: 650px;

	margin: 0;

	color: var(--contact-dark);

	font-size: clamp(38px, 3.7vw, 54px);

	font-weight: 700;

	line-height: 1;

	letter-spacing: -0.04em;

}



.contact-showcase__intro h2 strong {

	color: var(--contact-red);

	font-weight: inherit;

}



.contact-showcase__intro p {

	max-width: 650px;

	margin: 18px 0 0;

	color: var(--contact-text);

	font-size: clamp(16px, 1.2vw, 18px);

	line-height: 1.55;

}





/* =========================================================

   FORMULIERCONTAINER

   ========================================================= */



.contact-showcase__form {

	width: 100%;

	max-width: none;

	min-width: 0;

	margin: 0;

	padding: clamp(22px, 2.5vw, 30px);

	background: var(--contact-form-bg);

	box-sizing: border-box;

}



.contact-showcase__form > * {

	width: 100%;

	max-width: none;

}





/* =========================================================

   ONESTEP LIGHT FORM

   ========================================================= */



.contact-showcase__form .osm-light-form {

	display: grid;

	grid-template-columns: repeat(2, minmax(0, 1fr));

	gap: 14px;

	width: 100%;

	max-width: none;

	margin: 0;

}





/* Standaard velden over de volledige breedte */



.contact-showcase__form .osm-lf-field {

	grid-column: 1 / -1;

	min-width: 0;

	margin: 0;

}





/* Naam en telefoon naast elkaar */



.contact-showcase__form .osm-lf-field:nth-child(1),

.contact-showcase__form .osm-lf-field:nth-child(2) {

	grid-column: auto;

}





/* Invoervelden */



.contact-showcase__form .osm-light-form input:not([type="checkbox"]),

.contact-showcase__form .osm-light-form select,

.contact-showcase__form .osm-light-form textarea {

	display: block;

	width: 100%;

	max-width: none;

	margin: 0;

	padding: 14px 17px;

	border: 1px solid var(--contact-field-border);

	border-radius: 0;

	background: #ffffff;

	color: var(--contact-dark);

	font: inherit;

	font-size: 15px;

	font-weight: 400;

	line-height: 1.4;

	box-shadow: none;

	box-sizing: border-box;

	appearance: none;

	transition:

		border-color 180ms ease,

		box-shadow 180ms ease;

}



.contact-showcase__form .osm-light-form input:not([type="checkbox"]),

.contact-showcase__form .osm-light-form select {

	min-height: 52px;

}





/* Compact tekstveld */



.contact-showcase__form .osm-light-form textarea {

	width: 100%;

	min-height: 125px;

	height: 125px;

	resize: vertical;

}





/* Placeholdertekst */



.contact-showcase__form .osm-light-form input::placeholder,

.contact-showcase__form .osm-light-form textarea::placeholder {

	color: #858585;

	opacity: 1;

}





/* Focus */



.contact-showcase__form .osm-light-form input:focus,

.contact-showcase__form .osm-light-form select:focus,

.contact-showcase__form .osm-light-form textarea:focus {

	border-color: var(--contact-red);

	outline: 0;

	box-shadow: 0 0 0 2px rgba(227, 6, 19, 0.1);

}





/* Screenreader-labels */



.contact-showcase__form .osm-lf-sr {

	position: absolute !important;

	width: 1px;

	height: 1px;

	padding: 0;

	margin: -1px;

	overflow: hidden;

	clip: rect(0, 0, 0, 0);

	white-space: nowrap;

	border: 0;

}





/* Checkbox */



.contact-showcase__form .osm-lf-checkbox {

	display: flex;

	align-items: flex-start;

	gap: 9px;

	padding: 3px 0;

	color: #60646b;

	font-size: 14px;

	font-weight: 400;

	line-height: 1.5;

}



.contact-showcase__form .osm-lf-checkbox input {

	flex: 0 0 auto;

	width: 17px;

	height: 17px;

	margin: 2px 0 0;

	accent-color: var(--contact-red);

}





/* Verzendknop */



.contact-showcase__form .osm-light-form button[type="submit"] {

	display: inline-flex;

	grid-column: 1 / -1;

	align-items: center;

	justify-content: center;

	justify-self: start;

	width: auto;

	min-width: 190px;

	min-height: 52px;

	margin: 2px 0 0;

	padding: 13px 28px;

	border: 0;

	border-radius: 0;

	background: var(--contact-red);

	color: #ffffff;

	font: inherit;

	font-size: 15px;

	font-weight: 700;

	line-height: 1;

	cursor: pointer;

	box-shadow: none;

	transition:

		background-color 180ms ease,

		transform 180ms ease;

}



.contact-showcase__form .osm-light-form button[type="submit"]::after {

	content: "→";

	margin-left: 22px;

	font-size: 18px;

	font-weight: 400;

	line-height: 1;

}



.contact-showcase__form .osm-light-form button[type="submit"]:hover {

	background: var(--contact-red-dark);

	color: #ffffff;

	transform: translateY(-1px);

}



.contact-showcase__form .osm-light-form button[type="submit"]:focus-visible {

	outline: 2px solid var(--contact-dark);

	outline-offset: 3px;

}





/* Succes- en foutmeldingen */



.contact-showcase__form .osm-lf-ok,

.contact-showcase__form .osm-lf-error {

	width: 100%;

	max-width: none;

	margin: 0 0 14px;

	padding: 12px 15px;

	border-radius: 0;

	font-size: 14px;

	line-height: 1.5;

	box-sizing: border-box;

}



.contact-showcase__form .osm-lf-ok {

	border-left: 3px solid #278443;

	background: #effaf2;

	color: #176b31;

}



.contact-showcase__form .osm-lf-error {

	border-left: 3px solid var(--contact-red);

	background: #fff1f1;

	color: #8b1118;

}





/* Honeypot verborgen houden */



.contact-showcase__form .osm-lf-hp {

	position: absolute;

	left: -10000px;

	width: 1px;

	height: 1px;

	overflow: hidden;

}





/* =========================================================

   RECHTER CONTACTBALK

   ========================================================= */



.contact-panel {

	align-self: start;

	width: 360px;

	min-width: 0;

	margin: 0;

	padding: 30px;

	background: var(--contact-panel-bg);

	color: var(--contact-dark);

	box-sizing: border-box;

}



.contact-panel__intro {

	margin-bottom: 20px;

}



.contact-panel__intro h2 {

	max-width: 310px;

	margin: 0;

	color: var(--contact-dark);

	font-size: clamp(28px, 2.2vw, 36px);

	font-weight: 700;

	line-height: 1.03;

	letter-spacing: -0.035em;

}



.contact-panel__intro p {

	margin: 13px 0 0;

	color: var(--contact-text);

	font-size: 14px;

	line-height: 1.5;

}





/* =========================================================

   CONTACTREGELS

   ========================================================= */



.contact-panel__items {

	border-top: 1px solid var(--contact-line);

}



.contact-panel__item {

	display: grid;

	grid-template-columns: 44px minmax(0, 1fr) 16px;

	align-items: center;

	gap: 13px;

	padding: 16px 0;

	border-bottom: 1px solid var(--contact-line);

	color: var(--contact-dark);

	text-decoration: none;

	transition:

		color 220ms ease,

		transform 220ms ease;

}



.contact-panel__item:hover,

.contact-panel__item:focus-visible {

	color: var(--contact-red);

	transform: translateX(3px);

}



.contact-panel__item:focus-visible {

	outline: 2px solid var(--contact-red);

	outline-offset: 4px;

}



.contact-panel__icon {

	display: grid;

	place-items: center;

	width: 44px;

	height: 44px;

	border-radius: 50%;

	background: #ffffff;

	color: var(--contact-red);

}



.contact-panel__icon svg {

	display: block;

	width: 20px;

	height: 20px;

	overflow: visible;

	fill: none;

	stroke: currentColor;

	stroke-width: 1.8;

	stroke-linecap: round;

	stroke-linejoin: round;

}



.contact-panel__icon--whatsapp svg {

	width: 21px;

	height: 21px;

}



.contact-panel__content {

	display: block;

	min-width: 0;

}



.contact-panel__content strong {

	display: block;

	margin-bottom: 2px;

	color: var(--contact-dark);

	font-size: 15px;

	font-weight: 700;

	line-height: 1.3;

}



.contact-panel__content > span {

	display: block;

	color: var(--contact-text);

	font-size: 13px;

	line-height: 1.4;

	overflow-wrap: anywhere;

}



.contact-panel__arrow {

	color: var(--contact-red);

	font-size: 17px;

	line-height: 1;

	transition: transform 220ms ease;

}



.contact-panel__item:hover .contact-panel__arrow,

.contact-panel__item:focus-visible .contact-panel__arrow {

	transform: translateX(3px);

}





/* =========================================================

   ONDERSTE CONTACTTEKST

   ========================================================= */



.contact-panel__footer {

	margin-top: 20px;

	padding-top: 0;

}



.contact-panel__footer strong {

	display: block;

	color: var(--contact-dark);

	font-size: 15px;

	font-weight: 700;

	line-height: 1.4;

}



.contact-panel__footer p {

	margin: 5px 0 0;

	color: var(--contact-text);

	font-size: 13px;

	line-height: 1.5;

}





/* =========================================================

   TABLET

   ========================================================= */



@media (max-width: 980px) {



	.contact-showcase {

		grid-template-columns: minmax(0, 1fr) 320px;

		column-gap: 24px;

	}



	.contact-panel {

		width: 320px;

		padding: 25px;

	}



	.contact-panel__item {

		grid-template-columns: 40px minmax(0, 1fr) 14px;

		gap: 11px;

		padding: 14px 0;

	}



	.contact-panel__icon {

		width: 40px;

		height: 40px;

	}



	.contact-panel__icon svg {

		width: 18px;

		height: 18px;

	}



}





/* =========================================================

   MOBIEL

   ========================================================= */



@media (max-width: 760px) {



	.contact-showcase {

		grid-template-columns: minmax(0, 1fr);

		row-gap: 30px;

	}



	.contact-showcase__intro {

		margin-bottom: 22px;

	}



	.contact-showcase__intro h2 {

		font-size: clamp(34px, 10vw, 46px);

	}



	.contact-showcase__intro p {

		margin-top: 15px;

	}



	.contact-showcase__form {

		padding: 22px;

	}



	.contact-panel {

		width: 100%;

		padding: 25px;

	}



	.contact-panel__intro h2 {

		font-size: 30px;

	}



}





/* =========================================================

   FORMULIER MOBIEL

   ========================================================= */



@media (max-width: 640px) {



	.contact-showcase__form {

		padding: 20px;

	}



	.contact-showcase__form .osm-light-form {

		grid-template-columns: minmax(0, 1fr);

		gap: 11px;

	}



	.contact-showcase__form .osm-lf-field:nth-child(1),

	.contact-showcase__form .osm-lf-field:nth-child(2) {

		grid-column: 1 / -1;

	}



	.contact-showcase__form .osm-light-form input:not([type="checkbox"]),

	.contact-showcase__form .osm-light-form select {

		min-height: 50px;

	}



	.contact-showcase__form .osm-light-form textarea {

		min-height: 115px;

		height: 115px;

	}



	.contact-showcase__form .osm-light-form button[type="submit"] {

		width: 100%;

		min-width: 0;

	}



}





/* =========================================================

   KLEINE TELEFOONS

   ========================================================= */



@media (max-width: 430px) {



	.contact-panel {

		padding: 23px 20px;

	}



	.contact-panel__item {

		grid-template-columns: 40px minmax(0, 1fr);

		gap: 12px;

	}



	.contact-panel__arrow {

		display: none;

	}



	.contact-panel__content strong {

		font-size: 14px;

	}



	.contact-panel__content > span {

		font-size: 12px;

	}



}





/* =========================================================

   MINDER BEWEGING

   ========================================================= */



@media (prefers-reduced-motion: reduce) {



	.contact-panel__item,

	.contact-panel__arrow,

	.contact-showcase__form .osm-light-form input,

	.contact-showcase__form .osm-light-form select,

	.contact-showcase__form .osm-light-form textarea,

	.contact-showcase__form .osm-light-form button {

		transition: none;

	}



}















/* ==================================================

   FOOTER

================================================== */



.footer {

	padding-top: 20px;

	background: #fff;

}



/* Bovenste CTA-rij */

.footer > div > .row:first-child {

	align-items: center;

}



.footer h2 {

	margin: 0;

	padding: 30px 0;

	color: #e30613;

	font-size: clamp(34px, 4vw, 55px);

	font-weight: 700;

	line-height: 1;

	letter-spacing: -2px;

}



/* Contactknop */

.footer .button_01_footer {

	display: inline-flex;

	align-items: center;

	justify-content: center;

	margin-left: auto;

	padding: 11px 32px;

	color: #fff;

	background: #e30613;

	border-radius: 41px;

	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);

	font-size: 15px;

	font-weight: 700;

	line-height: 1.4;

	transition:

		background-color 0.2s ease,

		transform 0.2s ease;

}



.footer a:hover .button_01_footer,

.footer a:focus-visible .button_01_footer {

	background: #c9000b;

	transform: translateY(-2px);

}



.footer hr {

	margin: 0;

	color: inherit;

	border: 0;

	border-top: 1px solid rgba(0, 0, 0, 0.12);

	opacity: 1;

}



/* ==================================================

   FOOTERLINKS

   ================================================== */



.footer_links {

	padding: 50px 0 65px;

}



.footer_links p {

	margin: 0;

	padding: 0;

	font-size: 19px;

	font-weight: 700;

	line-height: 1.4;

}



.footer_links a {

	position: relative;

	display: inline-block;

	padding-left: 16px;

	color: #24272b;

	font-size: 15px;

	line-height: 1.5;

	text-decoration: none;

	transition:

		color 0.18s ease,

		transform 0.18s ease;

}



/* Oude Font Awesome-iconen niet nodig */

.footer_links a i {

	display: none;

}



/* Lichtgewicht CSS-pijltje */

.footer_links a::before {

	content: "";

	position: absolute;

	top: 0.48em;

	left: 1px;

	width: 7px;

	height: 7px;

	border-top: 2px solid #e30613;

	border-right: 2px solid #e30613;

	transform: rotate(45deg);

}



.footer_links a:hover,

.footer_links a:focus-visible {

	color: #e30613;

	transform: translateX(3px);

}



.footer_links a:focus-visible {

	outline: 2px solid rgba(227, 6, 19, 0.25);

	outline-offset: 3px;

	border-radius: 2px;

}



/* ==================================================

   COPYRIGHT

   ================================================== */



.copyright {

	padding: 18px 0;

	background: #fff;

}



.copyright .row {

	align-items: center;

}



.copyright p {

	margin: 0;

	font-size: 12px!important;

}



.copyright a {

	color: #24272b;

	text-decoration: none;

}



.copyright a:hover,

.copyright a:focus-visible {

	color: #e30613;

	text-decoration: underline;

}



.img-copyright {

	display: block;

	width: auto;

	max-width: 250px;

	max-height: 42px;

	margin-left: auto;

}



/* ==================================================

   TABLET EN MOBIEL

   ================================================== */



@media (max-width: 767.98px) {

	.footer {

		padding-top: 10px;

	}



	.footer h2 {

		padding: 25px 0;

		font-size: clamp(28px, 8vw, 36px);

		letter-spacing: -1px;

	}



	.footer .button_01_footer {

		padding: 10px 16px;

		font-size: 13px;

		text-align: center;

	}



	.footer_links {

		padding: 35px 0 40px;

	}



	.footer_links .col-12:not(:last-child) {

		margin-bottom: 35px;

	}



	.footer_links p {

		font-size: 18px;

	}



	.copyright {

		padding: 20px 0;

		text-align: center;

	}



	.copyright p {

		line-height: 1.8;

	}



	.img-copyright {

		max-width: 220px;

		max-height: 32px;

		margin: 18px auto 0;

	}

}



@media (prefers-reduced-motion: reduce) {

	.footer .button_01_footer,

	.footer_links a {

		transition: none;

	}

}
@media (max-width: 767.98px) {
.social-video-grid h2{
	font-size:45px!important;
}
.aanbod-button{
	display:none!important;
}
}

/* ==================================================
   MOBIELE NAVIGATIE
   ================================================== */

@media (max-width: 991.98px) {
	.site-header .navbar-collapse {
		position: fixed;
		inset: 0;
		z-index: 1200;
		width: 100%;
		height: 100dvh;
		max-height: none;
		margin-top: 0;
		padding: 150px 24px 28px;
		overflow-x: hidden;
		overflow-y: auto;
		background: #fff;
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}

	.site-header .navbar-nav {
		gap: 0;
		width: 100%;
		max-width: 520px;
		margin: 0 auto;
	}

	.site-header .navbar-brand,
	.site-header .navbar-toggler {
		z-index: 1300;
	}

	.site-header .nav-item {
		width: 100%;
	}

	.site-header .nav-link {
		display: flex;
		align-items: center;
		justify-content: space-between;
		min-height: 50px;
		padding: 13px 2px !important;
		border-bottom: 1px solid #ededed;
		border-radius: 0;
		font-size: 16px;
		font-weight: 500;
		line-height: 1.25;
	}

	.site-header .nav-link:hover,
	.site-header .nav-link:focus-visible {
		color: #e30613 !important;
		background: transparent;
	}

	.site-header .current-menu-item > .nav-link,
	.site-header .current-menu-parent > .nav-link,
	.site-header .current-menu-ancestor > .nav-link {
		color: #e30613 !important;
		background: transparent;
	}

	.site-header .dropdown-toggle::after {
		margin-left: auto;
		transition: transform 0.2s ease;
	}

	.site-header .dropdown-toggle.show::after {
		transform: rotate(180deg);
	}

	.site-header .dropdown-menu {
		position: static !important;
		width: 100%;
		margin: 0;
		padding: 5px 0 9px 16px;
		background: #fafafa;
		border: 0;
		border-left: 2px solid #e30613;
		border-radius: 0;
		box-shadow: none;
	}

	.site-header .dropdown-item {
		padding: 10px 12px;
		border-radius: 0;
		font-size: 15px;
		white-space: normal;
	}

	.site-header .dropdown-item:hover,
	.site-header .dropdown-item:focus,
	.site-header .dropdown-item.active {
		color: #e30613;
		background: transparent;
	}

	.site-header .button_header_01 > a {
		justify-content: flex-start;
		gap: 10px;
		margin-top: 16px;
		padding: 10px 16px !important;
		color: #fff !important;
		background: #e30613;
		border: 0;
		border-radius: 4px;
	}

	.site-header .button_header_01 > a img {
		width: 34px;
		margin-right: 0;
		filter: brightness(0) invert(1);
	}

	.site-header .button_header_01 > a::before,
	.site-header .button_header_01 > a::after {
		display: none;
	}

	body:has(#primary-menu.show) {
		overflow: hidden;
	}

	.site-header .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
		position: relative;
		background-image: none;
	}

	.site-header .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before,
	.site-header .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 26px;
		height: 2px;
		background: #333;
	}

	.site-header .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
		transform: translate(-50%, -50%) rotate(45deg);
	}

	.site-header .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
		transform: translate(-50%, -50%) rotate(-45deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.site-header .dropdown-toggle::after {
		transition: none;
	}
}