@font-face {
  font-family: "armataregular";
  src: url("../fonts/cocotte-regular-webfont.eot");
  src: url("../fonts/cocotte-regular-webfont.eot?#iefix") format("embedded-opentype"),
       url("../fonts/cocotte-regular-webfont.woff2") format("woff2"),
       url("../fonts/cocotte-regular-webfont.woff") format("woff"),
       url("../fonts/cocotte-regular-webfont.ttf") format("truetype"),
       url("../fonts/cocotte-regular-webfont.svg") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "MyriadProRegular";
  src: url("../fonts/MyriadProRegular.eot");
  src: url("../fonts/MyriadProRegular.eot?#iefix") format("embedded-opentype"),
       url("../fonts/MyriadProRegular.woff2") format("woff2"),
       url("../fonts/MyriadProRegular.woff") format("woff"),
       url("../fonts/MyriadProRegular.ttf") format("truetype"),
       url("../fonts/MyriadProRegular.svg#MyriadProRegular") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Dax-Regular";
  src: url("../fonts/DaxRegular.eot");
  src: url("../fonts/DaxRegular.eot?#iefix") format("embedded-opentype"),
       url("../fonts/DaxRegular.woff2") format("woff2"),
       url("../fonts/DaxRegular.woff") format("woff"),
       url("../fonts/DaxRegular.ttf") format("truetype"),
       url("../fonts/DaxRegular.svg") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-sans: "MyriadProRegular", Arial, sans-serif;
  --font-head: "Dax-Regular", "MyriadProRegular", Arial, sans-serif;
  --font-hand: "armataregular", "Dax-Regular", Arial, sans-serif;

  --fs-xs: clamp(.72rem, .69rem + .12vw, .8rem);
  --fs-sm: clamp(.8rem, .76rem + .16vw, .9rem);
  --fs-base: clamp(.95rem, .91rem + .18vw, 1.05rem);
  --fs-md: clamp(1.05rem, .98rem + .3vw, 1.22rem);
  --fs-lg: clamp(1.2rem, 1.08rem + .5vw, 1.5rem);
  --fs-xl: clamp(2rem, 1.55rem + 2vw, 3.7rem);

  --space-xs: clamp(.35rem, .3rem + .2vw, .5rem);
  --space-sm: clamp(.65rem, .55rem + .35vw, .9rem);
  --space-md: clamp(1rem, .85rem + .6vw, 1.35rem);
  --space-lg: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
  --space-xl: clamp(2rem, 1.5rem + 2vw, 3.5rem);

  --text: #24384a;
  --text-soft: #657586;
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-soft: #f5f8fb;
  --border: #dbe5ec;
  --shadow: 0 14px 30px -18px rgba(26, 53, 78, .25);

  --green: #69b148;
  --green-dark: #4c9632;
  --green-soft: #dfeacc;

  --blue: #1f78b4;
  --blue-dark: #17679a;
  --blue-soft: #dcecf7;
  --lightblue: #9ebee3;

  --orange: #d8821f;
  --orange-soft: #f4dfc3;

  --rose: #b9517d;
  --rose-soft: #f1d7e1;

  --purple: #7555b3;
  --purple-soft: #e4daf4;

  --footer: #2d2f33;
  --footer-bottom: #98b6da;

  --radius-sm: clamp(10px, 1vw, 12px);
  --radius-md: clamp(14px, 1.4vw, 18px);
  --radius-lg: clamp(18px, 1.8vw, 22px);

  --wrap: min(1280px, calc(100% - clamp(24px, 4vw, 48px)));
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input { font: inherit; }
h1, h2, h3, h4, p {     margin: 10px 0px; }
 h3, h4 { font-family: var(--font-head); }
h1, h2{ font-family: var(--font-hand); }
.wrap { width: var(--wrap); margin-inline: auto; }
.skip-link {
  position: fixed;
  left: 1rem;
  top: -4rem;
  z-index: 999;
  padding: clamp(.65rem, 1vw, .75rem) clamp(.85rem, 1.5vw, 1rem);
  border-radius: var(--radius-sm);
  background: var(--green);
  color: #fff;
  text-decoration: none;
}
.skip-link:focus { top: 1rem; }


#eprov-gzzwij6ne0 .image {
    text-align: left !important;
    max-width: 175px !important;
}

/* =========================================================
   BREDE NIEUWSBRIEF
   ========================================================= */

.newsletter-breed {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	margin: clamp(40px, 6vw, 80px) 0 0;
	padding-block: clamp(32px, 5vw, 64px);
	overflow: hidden;
	background: linear-gradient(
		135deg,
		#edf5f9 0%,
		#dcecf5 100%
	);
	border-top: 1px solid #d2e2eb;
	border-bottom: 1px solid #d2e2eb;
}

.newsletter-breed::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 5px;
	background: linear-gradient(
		90deg,
		#64b446 0%,
		#54a5d3 25%,
		#f07f17 50%,
		#c74d7d 75%,
		#7656bd 100%
	);
}

.newsletter-breed__container {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	width: min(calc(100% - 32px), 1400px);
	margin-inline: auto;
	padding: clamp(22px, 4vw, 46px);
	background: #fff;
	border: 1px solid #d7e3ea;
	border-radius: clamp(15px, 2vw, 22px);
	box-shadow: 0 20px 45px -34px rgba(23, 61, 91, 0.55);
}

.newsletter-breed__container,
.newsletter-breed__container * {
	box-sizing: border-box;
}

.newsletter-breed__container > :first-child {
	margin-top: 0;
}

.newsletter-breed__container > :last-child {
	margin-bottom: 0;
}

.newsletter-breed__container h2,
.newsletter-breed__container h3 {
	color: #173d5b;
}

.newsletter-breed__container p {
	color: #425a70;
}

.newsletter-breed__container img,
.newsletter-breed__container iframe,
.newsletter-breed__container form {
	max-width: 100%;
}


/* =========================================================
   MOBIEL
   ========================================================= */

@media (max-width: 639.98px) {
	.newsletter-breed {
		margin-top: 36px;
		padding-block: 24px;
	}

	.newsletter-breed__container {
		width: calc(100% - 24px);
		padding: 20px 16px;
		border-radius: 15px;
	}
}
/* =========================================================
   BUTTONS
   ========================================================= */

.btn {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: clamp(0.4rem, 0.7vw, 0.5rem);
	min-height: clamp(40px, 4vw, 44px);
	padding:
		clamp(0.7rem, 1.2vw, 0.8rem)
		clamp(1rem, 2vw, 1.25rem);
	font-family: var(--font-head);
	font-size: var(--fs-sm);
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
	border: 0;
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition:
		transform 0.18s ease,
		filter 0.18s ease,
		background-color 0.18s ease;

}

.btn:hover {
	text-decoration: none;
	filter: brightness(0.98);
	transform: translateY(-1px);
}

.btn i {
	font-size: var(--fs-md);
}

.btn--primary {
	color: #fff;
	background: var(--green);
}

.btn--white {
	color: var(--green-dark);
	background: rgba(255, 255, 255, 0.92);
}

.btn--orange {
	color: #fff;
	background: #f07f17;
		margin: 10px 0;
}


/* =========================================================
   OUDE MAXICMS-BUTTON
   ========================================================= */

a.mx_custom_button3 {
	box-sizing: border-box;
	display: inline-block;
	width: auto;
	max-width: 100%;
	min-height: clamp(40px, 4vw, 44px);
	padding:
		clamp(0.7rem, 1.2vw, 0.8rem)
		clamp(1rem, 2vw, 1.25rem);
	color: #fff !important;
	font-family: var(--font-head);
	font-size: var(--fs-sm);
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
	text-decoration: none !important;
	vertical-align: middle;
	background: #f07f17;
	border: 0;
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition:
		transform 0.18s ease,
		filter 0.18s ease,
		background-color 0.18s ease;
	margin: 10px 0;
}

a.mx_custom_button3:hover {
	color: #fff !important;
	text-decoration: none !important;
	filter: brightness(0.98);
	transform: translateY(-1px);
}

a.mx_custom_button3:focus-visible {
	outline: 3px solid rgba(240, 127, 23, 0.3);
	outline-offset: 3px;
}


/* =========================================================
   KLEINE BUTTON
   ========================================================= */

.btn--small {
	justify-content: flex-start;
	min-height: clamp(38px, 4vw, 42px);
	padding:
		clamp(0.68rem, 1vw, 0.8rem)
		clamp(0.8rem, 1.5vw, 0.95rem);
	font-size: var(--fs-xs);
	line-height: 1.35;
	text-align: left;
	border-radius: var(--radius-sm);
}

/* =========================================================
   ARCHIEFMENU
   Alleen actief als pricing-table-content direct een ul bevat
   ========================================================= */

.pricing-table-content.content {
	--archive-navy: #173d5b;
	--archive-green: #64b446;
	--archive-blue: #54a5d3;
	--archive-orange: #f07f17;
	--archive-rose: #c74d7d;
	--archive-purple: #7656bd;
	--archive-border: #d8e3ea;
}


/* Alleen het blok waarin MaxiCMS direct een menu-ul plaatst */

.pricing-table-content.content:has(> ul) {
	box-sizing: border-box;
	width: 100%;
	margin: 0 0 clamp(20px, 3vw, 32px);
	padding: clamp(16px, 2.5vw, 28px);
	background: #f2f6f8;
	border: 1px solid var(--archive-border);
	border-radius: clamp(14px, 2vw, 20px);
}


/* Alleen de bovenste menulijst */

.pricing-table-content.content > ul {
	display: grid;
	grid-template-columns: repeat(
		auto-fit,
		minmax(210px, 1fr)
	);
	gap: clamp(10px, 1.5vw, 16px);
	width: 100%;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}


/* Alleen de directe archiefitems */

.pricing-table-content.content > ul > li {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}


/* Archieflinks */

.pricing-table-content.content > ul > li > a {
	position: relative;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	width: 100%;
	min-height: clamp(58px, 6vw, 68px);
	padding:
		clamp(13px, 1.5vw, 17px)
		clamp(48px, 4vw, 56px)
		clamp(13px, 1.5vw, 17px)
		clamp(16px, 2vw, 20px);
	overflow: hidden;
	color: var(--archive-navy);
	font-family: var(--font-head);
	font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
	background: #fff;
	border: 1px solid var(--archive-border);
	border-top: 4px solid var(--archive-green);
	border-radius: 13px;
	box-shadow: 0 12px 28px -24px rgba(23, 61, 91, 0.55);
	transition:
		color 0.2s ease,
		background-color 0.2s ease,
		border-color 0.2s ease,
		box-shadow 0.2s ease,
		transform 0.2s ease;
}


/* Accentkleuren */

.pricing-table-content.content > ul > li:nth-child(5n + 1) > a {
	border-top-color: var(--archive-green);
}

.pricing-table-content.content > ul > li:nth-child(5n + 2) > a {
	border-top-color: var(--archive-blue);
}

.pricing-table-content.content > ul > li:nth-child(5n + 3) > a {
	border-top-color: var(--archive-orange);
}

.pricing-table-content.content > ul > li:nth-child(5n + 4) > a {
	border-top-color: var(--archive-rose);
}

.pricing-table-content.content > ul > li:nth-child(5n + 5) > a {
	border-top-color: var(--archive-purple);
}


/* Pijl */

.pricing-table-content.content > ul > li > a::after {
	content: "→";
	position: absolute;
	top: 50%;
	right: clamp(14px, 2vw, 20px);
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	color: #fff;
	font-family: Arial, sans-serif;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1;
	background: var(--archive-green);
	border-radius: 50%;
	transform: translateY(-50%);
	transition:
		background-color 0.2s ease,
		transform 0.2s ease;
}

.pricing-table-content.content > ul > li:nth-child(5n + 2) > a::after {
	background: var(--archive-blue);
}

.pricing-table-content.content > ul > li:nth-child(5n + 3) > a::after {
	background: var(--archive-orange);
}

.pricing-table-content.content > ul > li:nth-child(5n + 4) > a::after {
	background: var(--archive-rose);
}

.pricing-table-content.content > ul > li:nth-child(5n + 5) > a::after {
	background: var(--archive-purple);
}


/* Hover */

.pricing-table-content.content > ul > li > a:hover {
	color: var(--archive-navy);
	text-decoration: none;
	background: #fff;
	border-color: #c5d6e1;
	box-shadow: 0 16px 30px -22px rgba(23, 61, 91, 0.55);
	transform: translateY(-3px);
}

.pricing-table-content.content > ul > li > a:hover::after {
	background: var(--archive-navy);
	transform: translate(3px, -50%);
}


/* Actieve archiefpagina */

.pricing-table-content.content > ul > li.mx_current > a,
.pricing-table-content.content > ul > li.current > a {
	color: #fff;
	background: var(--archive-navy);
	border-color: var(--archive-navy);
	border-top-color: var(--archive-orange);
	box-shadow: 0 14px 28px -20px rgba(23, 61, 91, 0.8);
}

.pricing-table-content.content > ul > li.mx_current > a::after,
.pricing-table-content.content > ul > li.current > a::after {
	color: var(--archive-navy);
	background: #fff;
}

.pricing-table-content.content > ul > li.mx_current > a:hover,
.pricing-table-content.content > ul > li.current > a:hover {
	color: #fff;
	background: #204d70;
}


/* Eventuele onderliggende menuniveaus */

.pricing-table-content.content > ul > li > ul {
	margin: 10px 0 0;
	padding: 0 0 0 18px;
	list-style: none;
}

.pricing-table-content.content > ul > li > ul li {
	margin: 5px 0;
}

.pricing-table-content.content > ul > li > ul a {
	color: var(--archive-navy);
	text-decoration: none;
}

.pricing-table-content.content > ul > li > ul a:hover {
	color: var(--archive-orange);
	text-decoration: underline;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 899.98px) {
	.pricing-table-content.content > ul {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}


/* =========================================================
   MOBIEL
   ========================================================= */

@media (max-width: 599.98px) {
	.pricing-table-content.content:has(> ul) {
		padding: 12px;
		border-radius: 14px;
	}

	.pricing-table-content.content > ul {
		grid-template-columns: 1fr;
		gap: 9px;
	}

	.pricing-table-content.content > ul > li > a {
		min-height: 56px;
		padding: 12px 52px 12px 15px;
		font-size: 0.95rem;
		border-radius: 11px;
	}

	.pricing-table-content.content > ul > li > a::after {
		right: 14px;
		width: 29px;
		height: 29px;
	}
}


/* =========================================================
   MINDER BEWEGING
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
	.pricing-table-content.content > ul > li > a,
	.pricing-table-content.content > ul > li > a::after {
		transition: none;
	}

	.pricing-table-content.content > ul > li > a:hover,
	.pricing-table-content.content > ul > li > a:hover::after {
		transform: none;
	}
}





/* =========================================================
   MINDER BEWEGING
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
	.btn,
	a.mx_custom_button3 {
		transition: none;
	}

	.btn:hover,
	a.mx_custom_button3:hover {
		transform: none;
	}
}

.hero {
  position: relative;
  min-height: clamp(300px, 38vw, 430px);
  overflow: hidden;
  background: #d6e4f1;
}
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(20, 45, 33, .72) 0%, rgba(20, 45, 33, .38) 40%, rgba(20, 45, 33, .08) 68%, rgba(20, 45, 33, 0) 100%);
}
.hero__content {
  position: relative;
  z-index: 1;
  min-height: clamp(300px, 38vw, 430px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-xl) 0;
}
.hero h1 {
  max-width: 10ch;
  font: 800 var(--fs-xl) / .95 var(--font-head);
  color: #fff;
  letter-spacing: -.03em;
}
.hero__lead {
  max-width: 34rem;
  margin-top: var(--space-sm);
  font-size: var(--fs-md);
  color: rgba(255,255,255,.95);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-md);
}
.hero__quote-wrap {
  position: absolute;
  inset-inline: 0;
  bottom: var(--space-md);
  z-index: 1;
  pointer-events: none;
}
.hero__quote {
  margin-left: auto;
  max-width: 12ch;
  color: #fff;
  font: 700 var(--fs-lg) / 1.1 var(--font-hand);
  text-align: right;
}
/* Hero met MaxiCMS-slider */

.hero {
	position: relative;
	min-height: clamp(380px, 42vw, 520px);
	overflow: hidden;
	isolation: isolate;
	background: #24384a;
}


/* Slidercontainer */

.hero__bg.hero__slider {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.hero-bg-slides {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}


/* Slides */

.hero-bg-slide {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition:
		opacity 1s ease,
		visibility 1s ease;
}

.hero-bg-slide.active {
	z-index: 1;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}


/* Afbeelding */

.hero-bg-link {
	display: block;
	width: 100%;
	height: 100%;
}

.hero-bg-slide > img,
.hero-bg-link > img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
}


/* Verloop over iedere slide */

.hero-bg-slide::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(
			90deg,
			rgba(20, 45, 33, 0.76) 0%,
			rgba(20, 45, 33, 0.5) 42%,
			rgba(20, 45, 33, 0.12) 72%,
			rgba(20, 45, 33, 0) 100%
		);
}


/* De bestaande scrim mag in de HTML blijven */

.hero > .hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}


/* CMS-titel en description */

.hero-slide-content-wrap {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
}

.hero-slide-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: var(--wrap);
	height: 100%;
	margin-inline: auto;
	padding-top: clamp(24px, 4vw, 50px);
	padding-bottom: clamp(105px, 12vw, 140px);
}

.hero-slide-content h1,
.hero-slide-content h2 {
	max-width: 10ch;
	margin: 0;
	padding: 0;
	color: #fff;
	font: 800 clamp(2.4rem, 1.65rem + 3vw, 4.8rem) / .94 var(--font-head);
	letter-spacing: -.035em;
	text-shadow: 0 3px 18px rgba(0, 0, 0, 0.25);
}

.hero-slide-description {
	max-width: 38rem;
	margin-top: clamp(10px, 1.5vw, 18px);
	color: rgba(255, 255, 255, 0.96);
	font-size: clamp(1rem, .9rem + .4vw, 1.3rem);
	line-height: 1.5;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

.hero-slide-description p {
	margin: 0;
	padding: 0;
	color: inherit;
	font-size: inherit;
	line-height: inherit;
}


/* Vaste buttons */

.hero > .hero__content {
	position: relative;
	z-index: 3;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: clamp(380px, 42vw, 520px);
	padding-top: 0;
	padding-bottom: clamp(24px, 4vw, 42px);
	pointer-events: none;
}

.hero > .hero__content .hero__actions {
	margin-top: 0;
	pointer-events: auto;
}


/* Vaste quote */

.hero > .hero__quote-wrap {
	z-index: 3;
}


/* CMS-beheerknoppen */

.hero__slider > .mx_slider_buttons {
	position: absolute;
	top: clamp(10px, 2vw, 20px);
	left: clamp(10px, 2vw, 20px);
	z-index: 10;
	display: flex;
	gap: 5px;
	margin: 0;
}


/* Mobiel */

@media (max-width: 700px) {
	.hero {
		min-height: clamp(500px, 135vw, 620px);
	}

	.hero-bg-slide::after {
		background:
			linear-gradient(
				0deg,
				rgba(20, 45, 33, 0.9) 0%,
				rgba(20, 45, 33, 0.52) 65%,
				rgba(20, 45, 33, 0.12) 100%
			);
	}

	.hero-slide-content {
		justify-content: flex-end;
		padding-top: 40px;
		padding-bottom: clamp(190px, 48vw, 230px);
	}

	.hero-slide-content h1,
	.hero-slide-content h2 {
		max-width: 11ch;
		font-size: clamp(2.2rem, 11vw, 3.6rem);
	}

	.hero-slide-description {
		font-size: clamp(1rem, 4.5vw, 1.15rem);
	}

	.hero > .hero__content {
		min-height: clamp(500px, 135vw, 620px);
		padding-bottom: 24px;
	}
}


/* Minder beweging */

@media (prefers-reduced-motion: reduce) {
	.hero-bg-slide {
		transition: none;
	}
}
/* =========================================================
   QUICKLINKS
   ========================================================= */

.quicklinks {
	padding: var(--space-md) 0 var(--space-lg);
}

.quicklinks__grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	grid-auto-rows: 1fr;
	align-items: stretch;
	gap: var(--space-md);
}

.qcard {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	height: 100%;
	min-height: clamp(150px, 16vw, 176px);
	padding: var(--space-md);
	color: var(--text);
	text-align: center;
	text-decoration: none;
	border-radius: var(--radius-md);
	box-shadow: 0 2px 10px rgba(31, 61, 92, 0.08);
	transition:
		transform 0.18s ease,
		box-shadow 0.18s ease;
}

.qcard:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow);
}

.qcard__icon {
	flex: 0 0 auto;
	margin-bottom: var(--space-sm);
	font-size: clamp(1.75rem, 2.5rem + 1vw, 3.25rem);
	line-height: 1;
}

.qcard h2 {
	width: 100%;
	margin: 0;
	color: var(--text);
	font: 800 var(--fs-md) / 1.1 var(--font-head);
}

.qcard p {
	width: 100%;
	margin: var(--space-xs) 0 var(--space-sm);
	color: #556878;
	font-size: var(--fs-sm);
	line-height: 1.35;
}

/* Staat altijd onderaan de kaart */
.qcard__arrow {
	display: inline-grid;
	flex: 0 0 auto;
	place-items: center;
	width: clamp(1.9rem, 3vw, 2.2rem);
	height: clamp(1.9rem, 3vw, 2.2rem);
	margin-top: auto;
	color: #fff;
	font-size: var(--fs-md);
	border-radius: 999px;
}

.qcard--green {
	background: var(--green-soft);
}

.qcard--blue {
	background: var(--blue-soft);
}

.qcard--orange {
	background: var(--orange-soft);
}

.qcard--rose {
	background: var(--rose-soft);
}

.qcard--purple {
	background: var(--purple-soft);
}

.qcard--green .qcard__icon {
	color: var(--green-dark);
}

.qcard--blue .qcard__icon {
	color: var(--blue);
}

.qcard--orange .qcard__icon {
	color: var(--orange);
}

.qcard--rose .qcard__icon {
	color: var(--rose);
}

.qcard--purple .qcard__icon {
	color: var(--purple);
}

.qcard--green .qcard__arrow {
	color: #fff;
	background: var(--green-dark);
}

.qcard--blue .qcard__arrow {
	color: #fff;
	background: var(--blue);
}

.qcard--orange .qcard__arrow {
	color: #fff;
	background: var(--orange);
}

.qcard--rose .qcard__arrow {
	color: #fff;
	background: var(--rose);
}

.qcard--purple .qcard__arrow {
	color: #fff;
	background: var(--purple);
}

@media (max-width: 1060px) {
	.quicklinks__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 700px) {
	.quicklinks__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 390px) {
	.quicklinks__grid {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.qcard {
		transition: none;
	}

	.qcard:hover {
		transform: none;
	}
}

.content-section {
  padding: var(--space-xs) 0 var(--space-xl);
}
.content-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
  gap: var(--space-xl);
}
.section-title {
  /*display: flex;*/
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}
.section-title h2 {
  font: 800 var(--fs-md) / 1.1 var(--font-head);
  color: #1f3142;
}
.section-title a {
  color: var(--blue-dark);
  font-size: var(--fs-sm);
  font-weight: 700;
  text-decoration: none;
}
.section-title a:hover { text-decoration: underline; }
.section-title--small { margin-bottom: var(--space-xs); }

.news-grid {

  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
  align-items: stretch;
}
.news-card {
  display: flex;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(28, 60, 92, .05);
}
.news-card > a {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 100%;
  text-decoration: none;
}
.news-card__image {
  height: clamp(160px, 18vw, 190px);
  overflow: hidden;
  background: #edf3f7;
  line-height: 0;
}
.news-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.news-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
  min-height: clamp(210px, 24vw, 240px);
  padding: var(--space-sm) var(--space-md) var(--space-md);
}
.news-date {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: clamp(.4rem, .8vw, .5rem) clamp(.65rem, 1.2vw, .8rem);
  border-radius: clamp(12px, 1.2vw, 14px);
  background: #f7ede3;
  color: #c55c23;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}
.news-date strong { font-size: var(--fs-md); }
.news-date span { font-size: var(--fs-xs); letter-spacing: .03em; }
.news-card h3 {
  font: 800 var(--fs-md) / 1.12 var(--font-head);
  color: #31485b;
}
.news-card .meta {
  color: #798797;
  font-size: var(--fs-xs);
}
.news-card__body > p:not(.meta) {
  color: #526474;
  font-size: var(--fs-base);
  line-height: 1.45;
}
.read-more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  margin-top: auto;
  padding: clamp(.65rem, 1vw, .75rem) clamp(.85rem, 1.5vw, 1rem);
  border-radius: var(--radius-sm);
  background: #e5f0f9;
  color: var(--blue-dark);
  font-family: var(--font-head);
  font-size: var(--fs-sm);
  font-weight: 800;
}
.read-more i { font-size: var(--fs-md); }

.sidebar {
  display: grid;
  align-content: start;
  gap: var(--space-lg);
}
.side-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding: 0;
}
.side-block h3 {
  margin-bottom: var(--space-xs);
  font: 800 var(--fs-md) / 1.15 var(--font-head);
  color: #1f3142;
}
.side-intro,
.side-block p {
  color: #6d7b88;
  font-size: var(--fs-sm);
  line-height: 1.55;
}
.side-block p + .btn--small,
.side-intro + .btn--small {
  margin-top: var(--space-sm);
}
.events {
  display: grid;
  width: 100%;
  margin-top: var(--space-md);
}
.event {
  display: grid;
  width: 100%;
  grid-template-columns: clamp(54px, 6vw, 58px) 1fr;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
  border-top: 1px solid #e5ebef;
  text-decoration: none;
}
.event-date {
  display: grid;
  place-items: center;
  align-content: center;
  width: clamp(54px, 6vw, 58px);
  min-height: clamp(58px, 6vw, 64px);
  border-radius: clamp(14px, 1.4vw, 16px);
  background: #f7ede3;
  color: #c55c23;
  line-height: 1;
  text-transform: uppercase;
}
.event-date strong { font-size: var(--fs-md); font-weight: 800; }
.event-date small { margin-top: .2rem; font-size: var(--fs-xs); font-weight: 800; }
.event span:last-child > strong {
  display: block;
  font-family: var(--font-head);
  font-size: var(--fs-sm);
  color: #2d4051;
  text-transform: uppercase;
}
.event span:last-child > small {
  display: block;
  margin-top: var(--space-xs);
  color: #72808c;
  font-size: var(--fs-xs);
  line-height: 1.45;
}

.newsletter-card {
  margin-top: var(--space-xs);
  position: relative;
  overflow: hidden;
  padding: var(--space-md);
  border-radius: var(--radius-md);
  background: var(--blue);
  color: #fff;
	width: 100%;
}
.newsletter-card h3 {
  max-width: 100%;
  font: 800 var(--fs-sm) / 1.25 var(--font-head);
  text-transform: uppercase;
}
.newsletter-card p {
  max-width: 100%;
  margin-top: var(--space-xs);
  color: rgba(255,255,255,.85);
  font-size: var(--fs-xs);
  line-height: 1.5;
}
.newsletter-card form {
  width: min(100%, 220px);
  display: grid;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
}
.newsletter-card input,
.newsletter-card button {
  min-height: clamp(35px, 4vw, 40px);
  border-radius: clamp(9px, 1vw, 11px);
  border: 0;
}
.newsletter-card input {
  padding: 0 var(--space-sm);
  color: var(--text);
}
.newsletter-card button {
  background: #f07f17;
  color: #fff;
  font-family: var(--font-head);
  font-size: var(--fs-xs);
  font-weight: 800;
}
.newsletter-card img {
  position: absolute;
  right: var(--space-sm);
  bottom: var(--space-md);
  width: clamp(96px, 11vw, 122px);
  padding: var(--space-xs);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.92);
}

.platform-band {
  padding: var(--space-md) 0 var(--space-lg);
  background: var(--lightblue);
}
.platform-band h2 {
  margin-bottom: var(--space-md);
  color: #fff;
  text-align: center;
  font: 800 var(--fs-lg) / 1.1 var(--font-head);
}
/* Wijkplatform-logo’s */

.platform-logos {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: clamp(16px, 2.5vw, 52px);
	align-items: stretch;
	width: 100%;
}


/* Logokaart */

.platform-logo-card {
	position: relative;
	display: grid;
	place-items: center;
	min-width: 0;
	aspect-ratio: 1.28 / 1;
	overflow: hidden;
	background: #fff;
	border: 1px solid #30a9d2;
	border-radius: clamp(14px, 1.5vw, 18px);
	box-shadow: 0 4px 12px rgba(22, 45, 65, 0.08);
	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease;
}

.platform-logo-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 24px -16px rgba(22, 45, 65, 0.5);
}


/* Logoafbeelding */

.platform-logo-card > img {
	display: block;
	width: 100%;
	height: 100%;
	max-height: none;
	padding: clamp(4px, 0.7vw, 8px);
	object-fit: contain;
	transition: transform 0.25s ease;
}

.platform-logo-card:hover > img {
	transform: scale(1.025);
}


/* Klikbare laag over de kaart */

.platform-logo-card > .platform-logo-link {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: block;
	width: 100%;
	height: 100%;
	min-height: 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: inherit;
}


/* MaxiCMS-beheerknoppen */

.platform-logo-card .mx_buttons,
.platform-logo-card .mx_buttons.mx_block_image_buttons {
	position: absolute;
	top: clamp(5px, 0.7vw, 8px);
	left: clamp(5px, 0.7vw, 8px);
	z-index: 5;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	width: auto;
	max-width: calc(100% - 16px);
	margin: 0;
	padding: 0;
}

.platform-logo-card .mx_buttons a {
	position: relative;
	z-index: 6;
	display: inline-flex;
	align-items: center;
	width: auto;
	min-height: 28px;
	padding: 5px 10px;
	color: #fff;
	font-family: var(--font-sans);
	font-size: clamp(.68rem, .64rem + .15vw, .78rem);
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	background: #2d2d2d;
	border: 0;
	border-radius: 999px;
	box-shadow: none;
}

.platform-logo-card .mx_buttons a:hover {
	color: #fff;
	background: #f07f17;
	text-decoration: none;
}


/* Tablet */

@media (max-width: 1060px) {
	.platform-logos {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}


/* Mobiel */

@media (max-width: 700px) {
	.platform-logos {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: clamp(12px, 4vw, 20px);
	}
}

@media (max-width: 390px) {
	.platform-logos {
		grid-template-columns: 1fr;
	}
}


/* Minder beweging */

@media (prefers-reduced-motion: reduce) {
	.platform-logo-card,
	.platform-logo-card > img {
		transition: none;
	}

	.platform-logo-card:hover,
	.platform-logo-card:hover > img {
		transform: none;
	}
}
.site-footer {
  background: var(--footer);
  color: #fff;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1.15fr .9fr;
  gap: var(--space-xl);
  padding: var(--space-xl) 0;
}
.footer-grid h2 {
  margin-bottom: var(--space-sm);
  font: 800 var(--fs-md) / 1.1 var(--font-head);
}
.footer-grid ul {
  margin: 0;
  padding-left: var(--space-md);
}
.footer-grid li,
.footer-grid p {
  font-size: var(--fs-sm);
  line-height: 1.6;
}
.footer-grid p + p { margin-top: var(--space-md); }
.footer-grid a {
  color: #d6ecff;
  text-decoration: none;
}
.footer-grid a:hover { text-decoration: underline; }
.footer-social {
  display: flex;
  gap: var(--space-sm);
}
.footer-social a {
  display: grid;
  place-items: center;
  width: clamp(42px, 4vw, 48px);
  height: clamp(42px, 4vw, 48px);
  border-radius: 50%;
  background: #fff;
  color: #2c2f33;
  font-size: var(--fs-lg);
}

.footer-cta {
  position: relative;
  overflow: hidden;
  min-height: clamp(88px, 10vw, 110px);
  background: #325f52 url("../images/hero-banner.svg") center 47% / cover no-repeat;
}
.footer-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(16, 61, 43, .46);
}
.footer-cta__inner {
  position: relative;
  z-index: 1;
  min-height: clamp(88px, 10vw, 110px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}
.footer-cta p {
  color: #fff;
  font: 700 var(--fs-lg) / 1.15 var(--font-hand);
  font-style: italic;
}
.footer-cta a {
  display: block;
  min-width: clamp(220px, 25vw, 275px);
  padding: clamp(.68rem, 1vw, .8rem) clamp(1.1rem, 2vw, 1.5rem);
  background: #70bb54;
  color: #fff;
  text-decoration: none;
  text-align: center;
  font: 800 var(--fs-md) / 1.1 var(--font-hand);
  transform: rotate(-3deg);
  clip-path: polygon(8% 0, 100% 0, 95% 100%, 0 92%);
}

.footer-bottom {
  padding: var(--space-md) 0 var(--space-lg);
  background: var(--footer-bottom);
  text-align: center;
}
.footer-bottom p,
.footer-bottom small {
  color: #fff;
  font-size: var(--fs-sm);
}
.footer-bottom p + p { margin-top: var(--space-xs); }
.footer-bottom a { color: #fff; }
.ovk {
  margin: var(--space-md) auto var(--space-xs);
  width: clamp(160px, 18vw, 190px);
}
.ovk img {
  width: 100%;
  height: auto;
}

@media (max-width: 1060px) {
  .quicklinks__grid { grid-template-columns: repeat(3, 1fr); }
  .platform-logos { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .content-grid { grid-template-columns: 1fr; }
  .sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .newsletter-card { grid-column: 1 / -1; }
  .newsletter-card img { width: clamp(108px, 14vw, 122px); }
}

@media (max-width: 700px) {
  .hero__quote-wrap { display: none; }
  .hero__content { padding-bottom: var(--space-lg); }
  .hero__actions { flex-direction: column; align-items: flex-start; }
  .hero__actions .btn { width: 100%; }
  .quicklinks__grid,
  .news-grid,
  .sidebar,
  .platform-logos,
  .footer-grid { grid-template-columns: 1fr; }
  .newsletter-card form { width: min(100%, 240px); }
  .newsletter-card img { position: static; margin-top: var(--space-md); width: clamp(100px, 30vw, 120px); }
  .footer-cta { padding: var(--space-md) 0; }
  .footer-cta__inner {
    min-height: 0;
    flex-direction: column;
    align-items: flex-start;
  }
  .footer-cta a { min-width: 0; }
}

/* =========================================================
   MOBIELE HERO / BANNER
   ========================================================= */

@media (max-width: 639.98px) {

	.hero {
		position: relative;
		width: 100%;
		height: clamp(410px, 112vw, 440px);
		min-height: 0;
		overflow: hidden;
	}

	.hero__bg.hero__slider,
	.hero-bg-slides,
	.hero-bg-slide,
	.hero-bg-link {
		width: 100%;
		height: 100%;
		min-height: 0;
	}

	.hero-bg-slide > img,
	.hero-bg-link > img {
		width: 100%;
		height: 100%;
		max-width: none;
		object-fit: cover;
		object-position: center center;
	}

	.hero-bg-slide::after {
		background:
			linear-gradient(
				0deg,
				rgba(20, 45, 33, 0.9) 0%,
				rgba(20, 45, 33, 0.58) 62%,
				rgba(20, 45, 33, 0.2) 100%
			);
	}

	/* CMS-titel en omschrijving */

	.hero-slide-content-wrap {
		position: absolute;
		inset: 0;
		z-index: 2;
		width: 100%;
		height: 100%;
		pointer-events: none;
	}

	.hero-slide-content {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		width: 100%;
		height: 100%;
		margin: 0;
		padding:
			clamp(48px, 14vw, 62px)
			70px
			112px
			16px;
	}

	/*
	 * Rechts blijft 70px vrij voor de socials
	 * en de winkelwagen.
	 */
	.hero-slide-content h1,
	.hero-slide-content h2 {
		width: 100%;
		max-width: none;
		margin: 0;
		padding: 0;
		color: #fff;
		font-family: var(--font-head);
		font-size: clamp(2rem, 9vw, 2.35rem);
		font-weight: 800;
		line-height: 0.98;
		letter-spacing: -0.035em;
		overflow-wrap: normal;
		word-break: normal;
		text-shadow: 0 3px 18px rgba(0, 0, 0, 0.35);
	}

	.hero-slide-description {
		width: 100%;
		max-width: none;
		margin-top: 10px;
		color: #fff;
		font-size: clamp(0.9rem, 4vw, 1rem);
		line-height: 1.35;
		text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
	}

	.hero-slide-description p {
		margin: 0;
		padding: 0;
		color: inherit;
		font-size: inherit;
		line-height: inherit;
	}

	/* Beide vaste knoppen onderaan */

	.hero > .hero__content {
		position: relative;
		z-index: 3;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		width: calc(100% - 32px);
		height: 100%;
		min-height: 0;
		margin-inline: auto;
		padding: 0 0 16px;
		pointer-events: none;
	}

	.hero > .hero__content .hero__actions {
		display: grid;
		grid-template-columns: 1fr;
		width: 100%;
		gap: 8px;
		margin: 0;
		pointer-events: auto;
	}

	.hero > .hero__content .hero__actions .btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		min-height: 40px;
		padding: 8px 14px;
		font-size: 0.8rem;
		line-height: 1.2;
		text-align: center;
		border-radius: 11px;
	}

	/* Socials rechts in de banner */

	.header-mobile-tools {
		top: calc(100% + 6px);
		right: 10px;
		gap: 6px;
	}

	.header-mobile-tools .social-link,
	.header-mobile-tools #cart-mobile,
	.header-mobile-tools #cart-mobile a {
		flex: 0 0 40px;
		width: 40px;
		height: 40px;
	}

	.header-mobile-tools .social-link {
		font-size: 1.2rem;
	}

	.header-mobile-tools #cart-mobile img {
		width: 22px;
		height: 22px;
	}

	.hero__quote-wrap {
		display: none;
	}
}


@media (max-width: 520px) {
  .quicklinks__grid { grid-template-columns: repeat(2, 1fr); }
  .news-grid { grid-template-columns: 1fr; }
}

@media (max-width: 390px) {
  .quicklinks__grid { grid-template-columns: 1fr; }
}