/* =========================================================================
   Groenservice Hendriks — opmaak
   Volgorde: lettertypen → variabelen → basis → onderdelen → responsive
   ====================================================================== */

/* --- Lettertypen (lokaal, dus geen Google-verzoeken) -------------------- */

@font-face {
	font-family: 'Fraunces';
	src: url('../fonts/fraunces-var.woff2') format('woff2-variations');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Karla';
	src: url('../fonts/karla-400.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Karla';
	src: url('../fonts/karla-500.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Karla';
	src: url('../fonts/karla-600.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

/* --- Variabelen -------------------------------------------------------- */

:root {
	--bos: #10281b;
	--bos-diep: #091a11;
	--bos-licht: #1e4230;
	--salie: #92aa97;
	--papier: #f3f2ec;
	--mergel: #e5e1d5;
	--inkt: #14201a;
	--inkt-zacht: #57615a;
	--licht: #edf0ea;
	--hi: #d95c1c;
	--hi-donker: #b84a13;
	--lijn: rgba(20, 32, 26, 0.15);
	--lijn-licht: rgba(255, 255, 255, 0.18);

	--rand-media: 16px;
	--rand-vlak: 18px;
	--rand-knop: 10px;

	--kopfont: 'Fraunces', Georgia, 'Times New Roman', serif;
	--leesfont: 'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

	--breed: 1280px;
	--goot: clamp(1.25rem, 4vw, 3.5rem);
	--sectiepad: clamp(4rem, 8vw, 8rem);
	--kop-hoogte: 5.5rem;
}

/* --- Basis ------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 6rem;
}

body {
	margin: 0;
	background: var(--papier);
	color: var(--inkt);
	font-family: var(--leesfont);
	font-size: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img,
video,
svg {
	max-width: 100%;
}

a {
	color: inherit;
}

h1,
h2,
h3,
h4 {
	font-family: var(--kopfont);
	font-weight: 600;
	font-optical-sizing: auto;
	line-height: 1.1;
	letter-spacing: -0.015em;
	margin: 0;
}

p {
	margin: 0 0 1.1em;
}

p:last-child {
	margin-bottom: 0;
}

.verborgen {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.overslaan {
	position: absolute;
	top: -100px;
	left: 1rem;
	z-index: 300;
	background: var(--hi);
	color: #fff;
	padding: 0.8rem 1.2rem;
	border-radius: var(--rand-knop);
	text-decoration: none;
	font-weight: 600;
}

.overslaan:focus {
	top: 1rem;
}

:focus-visible {
	outline: 3px solid var(--hi);
	outline-offset: 3px;
}

.omhulsel {
	width: min(var(--breed), 100% - (var(--goot) * 2));
	margin-inline: auto;
}

.sectie {
	padding-block: var(--sectiepad);
}

.sectie--papier {
	background: var(--papier);
}

.sectie--mergel {
	background: var(--mergel);
}

.sectie--donker {
	background: var(--bos);
	color: var(--licht);
}

.titel {
	font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.5rem);
}

.titel--groot {
	font-size: clamp(2rem, 1.3rem + 2.4vw, 3.3rem);
	line-height: 1.05;
	max-width: 18ch;
}

.sectie__kop {
	max-width: 46rem;
}

.sectie__intro {
	margin-top: 1.2rem;
	font-size: 1.075rem;
	color: var(--inkt-zacht);
	max-width: 60ch;
}

.sectie--donker .sectie__intro {
	color: rgba(237, 240, 234, 0.78);
}

.gh-icoon {
	width: 1.35rem;
	height: 1.35rem;
	flex: none;
}

.gh-icoon--klein {
	width: 1.05rem;
	height: 1.05rem;
}

.gh-img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--rand-media);
	object-fit: cover;
}

.gh-img--leeg {
	aspect-ratio: 4 / 3;
	background-color: var(--mergel);
	background-image: repeating-linear-gradient(135deg, rgba(16, 40, 27, 0.06) 0 10px, rgba(16, 40, 27, 0.02) 10px 20px);
	border: 1px dashed rgba(16, 40, 27, 0.18);
}

/* --- Knoppen en links -------------------------------------------------- */

.knop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	font-family: var(--leesfont);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1;
	padding: 1rem 1.6rem;
	border: 1px solid transparent;
	border-radius: var(--rand-knop);
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.knop--primair {
	background: var(--hi);
	color: #fff;
}

.knop--primair:hover,
.knop--primair:focus-visible {
	background: var(--hi-donker);
	color: #fff;
}

.knop--lijn {
	background: transparent;
	color: var(--bos);
	border-color: rgba(16, 40, 27, 0.3);
}

.knop--lijn:hover,
.knop--lijn:focus-visible {
	background: var(--bos);
	border-color: var(--bos);
	color: var(--papier);
}

.knop--licht {
	background: transparent;
	color: #fff;
	border-color: rgba(255, 255, 255, 0.4);
}

.knop--licht:hover,
.knop--licht:focus-visible {
	background: #fff;
	color: var(--bos);
}

.tekstlink {
	display: inline-block;
	font-weight: 600;
	text-decoration: none;
	color: var(--bos);
	border-bottom: 1px solid rgba(16, 40, 27, 0.35);
	padding-bottom: 2px;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.tekstlink:hover,
.tekstlink:focus-visible {
	color: var(--hi);
	border-color: var(--hi);
}

.tekstlink--licht,
.sectie--donker .tekstlink {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.4);
}

.tekstlink--licht:hover,
.sectie--donker .tekstlink:hover {
	color: var(--salie);
	border-color: var(--salie);
}

/* --- Kop van de site --------------------------------------------------- */

.kop {
	position: fixed;
	inset: 0 0 auto;
	z-index: 100;
	color: #fff;
	transition: background-color 0.3s ease, padding 0.3s ease;
}

.kop::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(6, 18, 12, 0.55), rgba(6, 18, 12, 0));
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.kop--vast {
	background: var(--bos);
	box-shadow: 0 10px 30px rgba(6, 18, 12, 0.25);
}

.kop--vast::before {
	opacity: 0;
}

.kop__balk {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: clamp(1rem, 3vw, 2.5rem);
	padding-block: 1.4rem;
	transition: padding 0.3s ease;
}

.kop--vast .kop__balk {
	padding-block: 0.9rem;
}

.kop__merk {
	margin-right: auto;
	display: flex;
	align-items: center;
}

.kop__merk .custom-logo-link {
	display: block;
	line-height: 0;
}

.kop__merk .custom-logo {
	width: auto;
	height: clamp(2.4rem, 4vw, 3.1rem);
	transition: height 0.3s ease;
}

.kop--vast .kop__merk .custom-logo {
	height: 2.3rem;
}

.woordmerk {
	display: block;
	text-decoration: none;
	color: #fff;
	line-height: 1;
}

.woordmerk__naam {
	display: block;
	font-family: var(--kopfont);
	font-weight: 500;
	font-size: clamp(1.25rem, 2.2vw, 1.6rem);
	letter-spacing: 0.005em;
}

.woordmerk__achter {
	display: block;
	margin-top: 0.32rem;
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--salie);
}

.kop__nav .menu {
	display: flex;
	align-items: center;
	gap: clamp(0.9rem, 1.8vw, 1.8rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

.kop__nav .menu li {
	position: relative;
}

.kop__nav .menu a {
	display: block;
	padding-block: 0.5rem;
	font-size: 0.95rem;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.86);
	text-decoration: none;
	transition: color 0.2s ease;
}

.kop__nav .menu a::after {
	content: '';
	display: block;
	height: 1px;
	margin-top: 0.25rem;
	background: var(--salie);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.25s ease;
}

.kop__nav .menu a:hover,
.kop__nav .menu a:focus-visible,
.kop__nav .menu .current-menu-item > a,
.kop__nav .menu .current-menu-ancestor > a {
	color: #fff;
}

.kop__nav .menu a:hover::after,
.kop__nav .menu a:focus-visible::after,
.kop__nav .menu .current-menu-item > a::after,
.kop__nav .menu .current-menu-ancestor > a::after {
	transform: scaleX(1);
}

.kop__nav .sub-menu {
	position: absolute;
	top: 100%;
	left: -1rem;
	min-width: 14rem;
	margin: 0;
	padding: 0.6rem 0;
	list-style: none;
	background: var(--bos-licht);
	border-radius: 12px;
	box-shadow: 0 20px 40px rgba(6, 18, 12, 0.3);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.kop__nav .menu li:hover > .sub-menu,
.kop__nav .menu li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.kop__nav .sub-menu a {
	padding: 0.5rem 1rem;
}

.kop__nav .sub-menu a::after {
	display: none;
}

.kop__acties {
	display: flex;
	align-items: center;
	gap: 1.25rem;
}

.kop__tel {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-size: 0.92rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.9);
	text-decoration: none;
}

.kop__tel:hover {
	color: #fff;
}

.kop__knop {
	padding: 0.8rem 1.25rem;
}

.kop__schakelaar {
	display: none;
	align-items: center;
	gap: 0.6rem;
	background: none;
	border: 0;
	padding: 0.4rem 0;
	color: #fff;
	font-family: var(--leesfont);
	font-size: 0.95rem;
	font-weight: 600;
	cursor: pointer;
}

.kop__schakelaar-lijnen {
	display: grid;
	gap: 5px;
	width: 22px;
}

.kop__schakelaar-lijnen span {
	display: block;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform 0.25s ease, opacity 0.2s ease;
}

.menu-open .kop__schakelaar-lijnen span:first-child {
	transform: translateY(3.5px) rotate(45deg);
}

.menu-open .kop__schakelaar-lijnen span:last-child {
	transform: translateY(-3.5px) rotate(-45deg);
}

/* --- Mobiel menu ------------------------------------------------------- */

.mobielmenu {
	position: fixed;
	inset: 0;
	z-index: 90;
	background: var(--bos);
	color: #fff;
	overflow-y: auto;
	padding-block: 7rem 3rem;
}

.mobielmenu[hidden] {
	display: none;
}

.mobielmenu__lijst {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mobielmenu__lijst > li > a {
	display: block;
	padding: 0.6rem 0;
	font-family: var(--kopfont);
	font-size: clamp(1.7rem, 7vw, 2.4rem);
	color: #fff;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.mobielmenu__lijst .sub-menu {
	list-style: none;
	margin: 0.4rem 0 0.8rem;
	padding: 0 0 0 1rem;
}

.mobielmenu__lijst .sub-menu a {
	display: block;
	padding: 0.35rem 0;
	color: rgba(255, 255, 255, 0.75);
	text-decoration: none;
	font-size: 1.05rem;
}

.mobielmenu__contact {
	display: grid;
	justify-items: start;
	gap: 0.6rem;
	margin-top: 2.5rem;
	color: rgba(255, 255, 255, 0.8);
}

.mobielmenu__contact a {
	text-decoration: none;
}

.mobielmenu__contact .knop {
	margin-top: 0.8rem;
}

body.menu-open {
	overflow: hidden;
}

/* --- Hero -------------------------------------------------------------- */

.held {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 44rem;
	min-height: 100svh;
	padding-block: calc(var(--kop-hoogte) + 4rem) clamp(3.5rem, 8vh, 6rem);
	background: var(--bos-diep);
	color: #fff;
	overflow: hidden;
}

.held__media {
	position: absolute;
	inset: 0;
}

.held__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.held__waas {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to top, rgba(6, 18, 12, 0.9) 0%, rgba(6, 18, 12, 0.35) 55%, rgba(6, 18, 12, 0.55) 100%);
}

.held__inhoud {
	position: relative;
	z-index: 2;
	width: min(var(--breed), 100% - (var(--goot) * 2));
}

.held__kicker {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	margin: 0 0 1.2rem;
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--salie);
}

.held__kicker::before {
	content: '';
	width: 2.4rem;
	height: 1px;
	background: var(--salie);
	flex: none;
}

.held__titel {
	font-size: clamp(2.6rem, 1.1rem + 6vw, 5.4rem);
	line-height: 0.98;
	letter-spacing: -0.025em;
	max-width: 16ch;
	text-wrap: balance;
}

.held__tekst {
	margin: 1.5rem 0 0;
	max-width: 46ch;
	font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
	color: rgba(255, 255, 255, 0.86);
}

.held__acties {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem 2rem;
	margin-top: 2.4rem;
}

.filmknop {
	display: inline-flex;
	align-items: center;
	gap: 0.9rem;
	background: none;
	border: 0;
	padding: 0.4rem 0;
	color: #fff;
	font-family: var(--leesfont);
	font-size: 0.95rem;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
}

.filmknop__cirkel {
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 50%;
	flex: none;
	transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.filmknop__cirkel svg {
	fill: currentColor;
	stroke: none;
	margin-left: 2px;
}

.filmknop:hover .filmknop__cirkel,
.filmknop:focus-visible .filmknop__cirkel {
	background: var(--hi);
	border-color: var(--hi);
	color: #fff;
}

.filmknop__tekst {
	display: block;
	line-height: 1.3;
}

.filmknop__klein {
	display: block;
	font-weight: 400;
	font-size: 0.82rem;
	color: rgba(255, 255, 255, 0.7);
}

.held__verder {
	position: absolute;
	right: var(--goot);
	bottom: clamp(3.5rem, 8vh, 6rem);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.75);
	text-decoration: none;
}

.held__pijl {
	display: block;
	width: 1px;
	height: 2.6rem;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
}

/* --- Filmvenster ------------------------------------------------------- */

.filmvenster {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: grid;
	place-items: center;
	padding: clamp(1rem, 4vw, 3rem);
}

.filmvenster[hidden] {
	display: none;
}

.filmvenster__achter {
	position: absolute;
	inset: 0;
	background: rgba(6, 18, 12, 0.94);
	border: 0;
}

.filmvenster__doos {
	position: relative;
	width: min(1200px, 100%);
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55);
}

.filmvenster__doos video {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.filmvenster__sluit {
	position: absolute;
	top: clamp(0.75rem, 3vw, 2rem);
	right: clamp(0.75rem, 3vw, 2rem);
	width: 3rem;
	height: 3rem;
	display: grid;
	place-items: center;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.filmvenster__sluit:hover {
	background: rgba(255, 255, 255, 0.25);
}

/* --- Paginakop --------------------------------------------------------- */

.paginakop {
	position: relative;
	background: var(--bos);
	color: #fff;
	padding-block: calc(var(--kop-hoogte) + clamp(3.5rem, 7vw, 6rem)) clamp(3.5rem, 6vw, 5.5rem);
	overflow: hidden;
}

.paginakop::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: var(--kop-foto, none);
	background-size: cover;
	background-position: center;
	opacity: 0;
}

.paginakop--foto::before {
	opacity: 0.45;
}

.paginakop--foto::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(9, 26, 17, 0.9), rgba(9, 26, 17, 0.45));
}

.paginakop--groot {
	padding-block: calc(var(--kop-hoogte) + clamp(5rem, 10vw, 9rem)) clamp(5rem, 9vw, 8rem);
}

.paginakop__inhoud {
	position: relative;
	z-index: 2;
}

.kruimelpad {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 1.6rem;
	font-size: 0.85rem;
	color: rgba(237, 240, 234, 0.6);
}

.kruimelpad a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.kruimelpad a:hover {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.5);
}

.paginakop__kicker {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	margin: 0 0 0.9rem;
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--salie);
}

.paginakop__kicker::before {
	content: '';
	width: 2.4rem;
	height: 1px;
	background: var(--salie);
	flex: none;
}

.paginakop__titel {
	font-size: clamp(2.2rem, 1.3rem + 3.6vw, 4.2rem);
	line-height: 1.02;
	letter-spacing: -0.022em;
	max-width: 20ch;
	text-wrap: balance;
}

.paginakop__tekst {
	margin: 1.4rem 0 0;
	max-width: 54ch;
	font-size: 1.075rem;
	color: rgba(237, 240, 234, 0.82);
}

/* --- Introductie ------------------------------------------------------- */

.intro__raster {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: clamp(1.5rem, 3vw, 3rem);
	align-items: start;
}

.intro__tekst {
	grid-column: 1 / 5;
}

.intro__foto {
	margin: 0;
}

.intro__foto--groot {
	grid-column: 6 / 10;
}

.intro__foto--klein {
	grid-column: 10 / 13;
	margin-top: clamp(2rem, 6vw, 5rem);
}

.intro__foto--groot .gh-img {
	aspect-ratio: 3 / 4;
}

.intro__foto--klein .gh-img {
	aspect-ratio: 3 / 4;
}

.lopende-tekst {
	max-width: 68ch;
	margin-top: 1.6rem;
	color: var(--inkt-zacht);
}

.intro__tekst .tekstlink,
.intro__tekst .knop {
	margin-top: 1.8rem;
}

/* --- Diensten ---------------------------------------------------------- */

.diensten__lijst {
	list-style: none;
	margin: clamp(3rem, 6vw, 5rem) 0 0;
	padding: 0;
	display: grid;
	gap: clamp(3rem, 6vw, 5.5rem);
}

.dienst {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: clamp(1.5rem, 3vw, 3rem);
	align-items: center;
}

.dienst__foto {
	grid-column: 1 / 7;
	grid-row: 1;
	display: block;
	border-radius: var(--rand-media);
	overflow: hidden;
}

.dienst__foto .gh-img {
	aspect-ratio: 4 / 3;
	transition: transform 0.6s ease;
}

.dienst:hover .dienst__foto .gh-img {
	transform: scale(1.04);
}

.dienst__tekst {
	grid-column: 8 / 13;
	grid-row: 1;
}

.dienst:nth-child(even) .dienst__foto {
	grid-column: 7 / 13;
}

.dienst:nth-child(even) .dienst__tekst {
	grid-column: 1 / 6;
}

.dienst__seizoen {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin: 0 0 0.6rem;
	font-size: 0.82rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: #6d7a70;
}

.dienst__seizoen::before {
	content: '';
	width: 1.8rem;
	height: 1px;
	background: var(--salie);
	flex: none;
}

.dienst__titel {
	font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem);
	margin: 0 0 0.7rem;
}

.dienst__titel a {
	text-decoration: none;
	transition: color 0.2s ease;
}

.dienst__titel a:hover {
	color: var(--hi);
}

.dienst__omschrijving {
	color: var(--inkt-zacht);
	max-width: 46ch;
}

.dienst__punten {
	list-style: none;
	margin: 1.2rem 0 1.5rem;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.35rem 1.5rem;
	font-size: 0.92rem;
	color: var(--inkt-zacht);
}

.dienst__punten li {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.dienst__punten li::before {
	content: '';
	width: 0.85rem;
	height: 1px;
	background: var(--salie);
	flex: none;
}

/* --- Werkwijze --------------------------------------------------------- */

.werkwijze__raster {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: clamp(2rem, 4vw, 4rem);
	align-items: start;
}

.werkwijze__kop {
	grid-column: 1 / 5;
}

.stappen {
	grid-column: 6 / 13;
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 2rem;
	counter-reset: stap;
}

.stap {
	display: grid;
	grid-template-columns: 2.8rem 1fr;
	gap: 1.2rem;
	padding-bottom: 2rem;
	border-bottom: 1px solid rgba(20, 32, 26, 0.14);
}

.stap:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.stap__nummer {
	grid-column: 1;
	grid-row: 1 / span 2;
	font-family: var(--kopfont);
	font-size: 1.5rem;
	line-height: 1.25;
	color: rgba(16, 40, 27, 0.4);
}

.stap__titel {
	grid-column: 2;
	grid-row: 1;
	font-size: 1.3rem;
	margin: 0 0 0.5rem;
}

.stap__tekst {
	grid-column: 2;
	grid-row: 2;
	margin: 0;
	color: var(--inkt-zacht);
	max-width: 52ch;
}

/* --- Galerij ----------------------------------------------------------- */

.galerij__kop {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem 3rem;
}

.galerij__acties {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	flex-wrap: wrap;
}

.galerij__raster {
	list-style: none;
	margin: clamp(2.5rem, 5vw, 4rem) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
}

.galerij__tegel a {
	display: block;
	border-radius: 14px;
	overflow: hidden;
}

.galerij__tegel .gh-img {
	aspect-ratio: 1 / 1;
	border-radius: 0;
	transition: transform 0.6s ease;
}

.galerij__tegel a:hover .gh-img {
	transform: scale(1.05);
}

.galerij__leeg {
	margin-top: 2rem;
	color: rgba(237, 240, 234, 0.7);
}

/* Eenvoudige fotoviewer */
.fotovenster {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: grid;
	place-items: center;
	padding: clamp(1rem, 4vw, 3rem);
	background: rgba(6, 18, 12, 0.94);
}

.fotovenster[hidden] {
	display: none;
}

.fotovenster img {
	max-width: 100%;
	max-height: 85vh;
	border-radius: 12px;
	display: block;
}

.fotovenster__sluit {
	position: absolute;
	top: clamp(0.75rem, 3vw, 2rem);
	right: clamp(0.75rem, 3vw, 2rem);
	width: 3rem;
	height: 3rem;
	display: grid;
	place-items: center;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
}

/* --- Over ons ---------------------------------------------------------- */

.over__raster {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: clamp(2rem, 4vw, 4rem);
	align-items: start;
}

.over__foto {
	grid-column: 1 / 6;
	margin: 0;
}

.over__foto .gh-img {
	aspect-ratio: 4 / 5;
}

.over__tekst {
	grid-column: 7 / 13;
}

.citaat {
	margin: 2.5rem 0 0;
	padding-left: 1.5rem;
	border-left: 2px solid var(--salie);
}

.citaat blockquote {
	margin: 0;
}

.citaat blockquote p {
	font-family: var(--kopfont);
	font-size: clamp(1.2rem, 1rem + 0.9vw, 1.6rem);
	line-height: 1.32;
	color: var(--inkt);
	margin: 0;
}

.citaat figcaption {
	margin-top: 0.9rem;
	font-size: 0.9rem;
	color: var(--inkt-zacht);
}

.citaat__naam {
	font-weight: 600;
	color: var(--inkt);
}

.citaat__rol::before {
	content: '·';
	margin: 0 0.4rem;
}

.over__acties {
	margin-top: 2rem;
}

/* --- Oproepblok -------------------------------------------------------- */

.oproep {
	position: relative;
	background: var(--bos);
	color: var(--licht);
	padding-block: clamp(3.5rem, 7vw, 6rem);
	overflow: hidden;
}

.oproep--foto::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: var(--oproep-foto, none);
	background-size: cover;
	background-position: center;
	opacity: 0.3;
}

.oproep--foto::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, rgba(9, 26, 17, 0.92), rgba(9, 26, 17, 0.6));
}

.oproep__raster {
	position: relative;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 2rem 3rem;
}

.oproep__tekst p {
	margin: 1rem 0 0;
	max-width: 48ch;
	color: rgba(237, 240, 234, 0.8);
}

.oproep__acties {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	flex-wrap: wrap;
}

.oproep__tel {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 600;
	color: #fff;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.4);
	padding-bottom: 2px;
}

/* --- Contactpagina ----------------------------------------------------- */

.contact__raster {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: clamp(2rem, 4vw, 4rem);
	align-items: start;
}

.kaartje {
	background: #fff;
	border: 1px solid var(--lijn);
	border-radius: var(--rand-vlak);
	padding: clamp(1.5rem, 3vw, 2.2rem);
}

.kaartje__titel {
	font-size: 1.4rem;
}

.gegevenslijst {
	list-style: none;
	margin: 1.5rem 0 0;
	padding: 0;
	display: grid;
	gap: 1.1rem;
}

.gegevenslijst li {
	display: grid;
	grid-template-columns: 1.5rem 1fr;
	gap: 0.9rem;
	align-items: start;
}

.gegevenslijst svg {
	color: var(--bos-licht);
	margin-top: 0.15rem;
}

.gegevenslijst a {
	color: var(--inkt);
	text-decoration: none;
	border-bottom: 1px solid var(--lijn);
}

.gegevenslijst a:hover {
	border-color: var(--hi);
	color: var(--hi);
}

.gegevenslijst__bij {
	display: block;
	font-size: 0.82rem;
	color: var(--inkt-zacht);
}

.kaartje__gebied {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 1.5rem 0 0;
	padding-top: 1.2rem;
	border-top: 1px solid var(--lijn);
	font-size: 0.9rem;
	color: var(--inkt-zacht);
}

.kaart {
	margin-top: 1.25rem;
	border-radius: var(--rand-vlak);
	overflow: hidden;
	background: var(--mergel);
	min-height: 16rem;
	display: grid;
	place-items: center;
	text-align: center;
	padding: 1.5rem;
}

.kaart__uitleg p {
	margin: 0 0 1rem;
	font-size: 0.92rem;
	color: var(--inkt-zacht);
	max-width: 32ch;
}

.kaart__uitleg .tekstlink {
	display: block;
	margin-top: 1rem;
	font-size: 0.9rem;
}

.kaart--geladen {
	padding: 0;
	display: block;
}

.kaart iframe {
	display: block;
	width: 100%;
	height: 22rem;
	border: 0;
}

/* --- Formulier --------------------------------------------------------- */

.formulier {
	background: #fff;
	border: 1px solid var(--lijn);
	border-radius: var(--rand-vlak);
	padding: clamp(1.5rem, 3vw, 2.4rem);
}

.formulier__raster {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.1rem 1.25rem;
}

.veld {
	margin: 0;
}

.veld--breed {
	grid-column: 1 / -1;
}

.formulier__groep {
	grid-column: 1 / -1;
	margin-top: 0.4rem;
	padding-top: 1.4rem;
	border-top: 1px solid var(--lijn);
}

.formulier__groepkop {
	margin: 0 0 1rem;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--inkt-zacht);
}

.formulier__subraster {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	gap: 1.1rem 1.25rem;
}

.formulier label {
	display: block;
	margin-bottom: 0.4rem;
	font-size: 0.88rem;
	font-weight: 500;
}

.formulier input,
.formulier textarea {
	width: 100%;
	font: inherit;
	font-size: 1rem;
	padding: 0.85rem 1rem;
	color: var(--inkt);
	background: #fff;
	border: 1px solid rgba(20, 32, 26, 0.22);
	border-radius: var(--rand-knop);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.formulier textarea {
	resize: vertical;
	min-height: 8rem;
}

.formulier input:focus,
.formulier textarea:focus {
	outline: none;
	border-color: var(--bos);
	box-shadow: 0 0 0 3px rgba(16, 40, 27, 0.12);
}

.veld__ster {
	color: var(--hi);
	margin-left: 0.15rem;
}

.veld--fout input,
.veld--fout textarea {
	border-color: #b3401c;
}

.veld__fout {
	display: block;
	margin-top: 0.35rem;
	font-size: 0.85rem;
	color: #a3391a;
}

.formulier__val {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.formulier__voet {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem 1.5rem;
	margin-top: 1.8rem;
}

.formulier__klein {
	margin: 0;
	max-width: 38ch;
	font-size: 0.82rem;
	color: var(--inkt-zacht);
}

.melding {
	padding: 1.4rem 1.6rem;
	border-radius: var(--rand-vlak);
	margin-bottom: 1.5rem;
}

.melding__titel {
	font-size: 1.3rem;
	margin-bottom: 0.5rem;
}

.melding--goed {
	background: #e8efe6;
	border: 1px solid #c2d5bd;
}

.melding--fout {
	background: #fbeae2;
	border: 1px solid #eec5b1;
	color: #7d3113;
}

.zoekform {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
	margin-top: 1.5rem;
}

.zoekform input {
	flex: 1 1 14rem;
	font: inherit;
	padding: 0.85rem 1rem;
	border: 1px solid rgba(20, 32, 26, 0.22);
	border-radius: var(--rand-knop);
	background: #fff;
}

/* --- Lopende tekst (inhoud uit de editor) ------------------------------ */

.lopende-tekst--pagina {
	color: var(--inkt);
	margin-top: 0;
}

.lopende-tekst--pagina h2 {
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
	margin: 2.2rem 0 0.8rem;
}

.lopende-tekst--pagina h3 {
	font-size: 1.25rem;
	margin: 1.8rem 0 0.6rem;
}

.lopende-tekst--pagina ul,
.lopende-tekst--pagina ol {
	padding-left: 1.2rem;
	margin: 0 0 1.2rem;
}

.lopende-tekst--pagina li {
	margin-bottom: 0.4rem;
}

.lopende-tekst--pagina a {
	color: var(--bos);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.lopende-tekst--pagina img {
	border-radius: var(--rand-media);
	height: auto;
}

.linklijst {
	list-style: none;
	margin: 0 0 2rem;
	padding: 0;
	display: grid;
	gap: 0.6rem;
}

.linklijst a {
	font-weight: 600;
	color: var(--bos);
}

/* --- Berichten --------------------------------------------------------- */

.berichtenlijst {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 2.5rem;
}

.bericht {
	display: grid;
	grid-template-columns: 18rem 1fr;
	gap: 2rem;
	align-items: center;
}

.bericht__foto .gh-img {
	aspect-ratio: 4 / 3;
}

.bericht__datum {
	margin: 0 0 0.4rem;
	font-size: 0.85rem;
	color: var(--inkt-zacht);
}

.bericht__titel {
	font-size: 1.5rem;
	margin-bottom: 0.6rem;
}

.bericht__titel a {
	text-decoration: none;
}

.pagination {
	margin-top: 3rem;
}

.pagination .page-numbers {
	display: inline-block;
	padding: 0.5rem 0.85rem;
	margin-right: 0.3rem;
	border: 1px solid var(--lijn);
	border-radius: 8px;
	text-decoration: none;
}

.pagination .current {
	background: var(--bos);
	color: #fff;
	border-color: var(--bos);
}

/* --- Voet -------------------------------------------------------------- */

.voet {
	background: var(--bos-diep);
	color: rgba(237, 240, 234, 0.78);
	padding-block: clamp(3.5rem, 6vw, 5.5rem) 2rem;
	font-size: 0.95rem;
}

.voet__boven {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1.2fr 1fr;
	gap: 2.5rem;
}

.voet__gebied {
	margin: 1.2rem 0 0;
	max-width: 26ch;
	color: rgba(237, 240, 234, 0.6);
}

.voet__socials {
	list-style: none;
	display: flex;
	gap: 0.6rem;
	margin: 1.5rem 0 0;
	padding: 0;
}

.voet__socials a {
	display: grid;
	place-items: center;
	width: 2.6rem;
	height: 2.6rem;
	border: 1px solid var(--lijn-licht);
	border-radius: 50%;
	color: inherit;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.voet__socials a:hover {
	background: var(--salie);
	border-color: var(--salie);
	color: var(--bos-diep);
}

.voet__kop {
	font-family: var(--leesfont);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--salie);
	margin-bottom: 0.9rem;
}

.voet__kop--tweede {
	margin-top: 1.8rem;
}

.voet address {
	font-style: normal;
	margin-bottom: 0.8rem;
}

.voet__lijst {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.45rem;
}

.voet__lijst a {
	text-decoration: none;
	color: inherit;
	transition: color 0.2s ease;
}

.voet__lijst a:hover {
	color: #fff;
}

.voet__tijden {
	color: rgba(237, 240, 234, 0.7);
}

.voet .tekstlink {
	color: rgba(237, 240, 234, 0.85);
	border-color: var(--lijn-licht);
	font-weight: 500;
}

.voet .tekstlink:hover {
	color: #fff;
	border-color: var(--salie);
}

.voet__onder {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.75rem 2rem;
	margin-top: clamp(2.5rem, 5vw, 4rem);
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	font-size: 0.85rem;
	color: rgba(237, 240, 234, 0.55);
}

.voet__onder p {
	margin: 0;
}

.voet__scheiding::before {
	content: '·';
	margin: 0 0.5rem;
}

.voet__juridisch a {
	color: inherit;
	text-decoration: none;
	margin-left: 1.2rem;
}

.voet__juridisch a:first-child {
	margin-left: 0;
}

.voet__juridisch a:hover {
	color: #fff;
	text-decoration: underline;
}

/* --- Terug naar boven -------------------------------------------------- */

.naarboven {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 60;
	width: 2.9rem;
	height: 2.9rem;
	display: grid;
	place-items: center;
	background: var(--bos);
	color: #fff;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 10px 25px rgba(6, 18, 12, 0.25);
}

.naarboven[hidden] {
	display: none;
}

.naarboven svg {
	transform: rotate(-90deg);
}

/* =========================================================================
   Responsive
   ====================================================================== */

@media (max-width: 1100px) {

	.kop__nav,
	.kop__acties {
		display: none;
	}

	.kop__schakelaar {
		display: inline-flex;
	}

	.voet__boven {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 2.5rem 2rem;
	}
}

@media (max-width: 980px) {

	.intro__raster,
	.dienst,
	.werkwijze__raster,
	.over__raster {
		grid-template-columns: 1fr;
	}

	.intro__tekst,
	.intro__foto--groot,
	.intro__foto--klein,
	.werkwijze__kop,
	.stappen,
	.over__foto,
	.over__tekst,
	.dienst__foto,
	.dienst__tekst,
	.dienst:nth-child(even) .dienst__foto,
	.dienst:nth-child(even) .dienst__tekst {
		grid-column: 1 / -1;
	}

	.dienst__foto,
	.dienst__tekst,
	.dienst:nth-child(even) .dienst__foto,
	.dienst:nth-child(even) .dienst__tekst {
		grid-row: auto;
	}

	.intro__foto--klein {
		margin-top: 0;
		max-width: 22rem;
	}

	.intro__foto--groot .gh-img,
	.over__foto .gh-img {
		aspect-ratio: 4 / 3;
	}

	.contact__raster {
		grid-template-columns: 1fr;
	}

	.galerij__raster {
		grid-template-columns: repeat(3, 1fr);
	}

	.bericht {
		grid-template-columns: 1fr;
	}

	.held__verder {
		display: none;
	}
}

@media (max-width: 640px) {

	:root {
		--kop-hoogte: 4.5rem;
	}

	.held {
		min-height: 36rem;
	}

	.held__acties {
		gap: 1.2rem;
	}

	.held__acties .knop {
		width: 100%;
	}

	.dienst__punten {
		grid-template-columns: 1fr;
	}

	.formulier__raster,
	.formulier__subraster {
		grid-template-columns: 1fr;
	}

	.galerij__raster {
		grid-template-columns: repeat(2, 1fr);
		gap: 0.6rem;
	}

	.voet__boven {
		grid-template-columns: 1fr;
	}

	.oproep__acties {
		width: 100%;
	}

	.oproep__acties .knop {
		flex: 1 1 100%;
	}
}

/* --- Minder beweging --------------------------------------------------- */

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

	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}

	.dienst:hover .dienst__foto .gh-img,
	.galerij__tegel a:hover .gh-img {
		transform: none;
	}
}

/* --- Kleine restjes ---------------------------------------------------- */

.paginering {
	margin-top: 2rem;
	font-size: 0.9rem;
}

.paginering a {
	margin-right: 0.5rem;
}

.voet__merk .woordmerk {
	display: inline-block;
}

@media (min-width: 981px) {

	.contact__gegevens {
		position: sticky;
		top: 7.5rem;
	}
}

@media (max-width: 420px) {

	.kop__schakelaar-tekst {
		display: none;
	}
}

/* --- Toegangspagina (afgeschermde site) -------------------------------- */

.poort-body {
	background: var(--bos-diep);
}

.poort {
	position: relative;
	min-height: 100vh;
	min-height: 100svh;
	display: grid;
	place-items: center;
	padding: clamp(1.5rem, 5vw, 4rem);
	background: var(--bos-diep);
	overflow: hidden;
}

.poort::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: var(--poort-foto, none);
	background-size: cover;
	background-position: center;
	opacity: 0.35;
}

.poort::after {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(120% 90% at 50% 40%, rgba(9, 26, 17, 0.55), rgba(9, 26, 17, 0.94));
}

.poort__kaart {
	position: relative;
	z-index: 2;
	width: min(34rem, 100%);
	background: var(--papier);
	border-radius: 22px;
	padding: clamp(2rem, 5vw, 3.2rem);
	box-shadow: 0 40px 90px rgba(0, 0, 0, 0.45);
	text-align: left;
}

.poort__logo {
	margin-bottom: 1.8rem;
}

.poort__logo img {
	height: 3rem;
	width: auto;
}

.woordmerk--poort {
	display: block;
	margin-bottom: 1.8rem;
	color: var(--bos);
}

.woordmerk--poort .woordmerk__achter {
	color: #6d7a70;
}

.poort__titel {
	font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem);
	line-height: 1.1;
	margin-bottom: 0.9rem;
	max-width: 18ch;
}

.poort__tekst {
	color: var(--inkt-zacht);
	max-width: 42ch;
}

.poort__fout {
	margin: 1.2rem 0 0;
	padding: 0.8rem 1rem;
	border-radius: var(--rand-knop);
	background: #fbeae2;
	border: 1px solid #eec5b1;
	color: #7d3113;
	font-size: 0.9rem;
}

.poort__form {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.8rem;
}

.poort__form input {
	flex: 1 1 12rem;
	font: inherit;
	font-size: 1rem;
	padding: 0.9rem 1rem;
	background: #fff;
	border: 1px solid rgba(20, 32, 26, 0.22);
	border-radius: var(--rand-knop);
	color: var(--inkt);
}

.poort__form input:focus {
	outline: none;
	border-color: var(--bos);
	box-shadow: 0 0 0 3px rgba(16, 40, 27, 0.12);
}

.poort__voet {
	margin-top: 2.2rem;
	padding-top: 1.4rem;
	border-top: 1px solid var(--lijn);
	font-size: 0.9rem;
	color: var(--inkt-zacht);
}

.poort__voet p {
	margin: 0;
}

.poort__contact {
	margin-top: 0.5rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.5rem;
}

.poort__contact a {
	font-weight: 600;
	color: var(--bos);
	text-decoration: none;
	border-bottom: 1px solid rgba(16, 40, 27, 0.35);
	padding-bottom: 2px;
}

.poort__contact a:hover {
	color: var(--hi);
	border-color: var(--hi);
}

.poort__plaats {
	position: absolute;
	z-index: 2;
	bottom: clamp(1rem, 3vw, 2rem);
	left: 0;
	right: 0;
	margin: 0;
	text-align: center;
	font-size: 0.85rem;
	color: rgba(237, 240, 234, 0.55);
}

@media (max-width: 480px) {

	.poort__form .knop {
		width: 100%;
	}

	.poort__plaats {
		display: none;
	}
}

/* --- Dienstenpagina ---------------------------------------------------- */

.dienstpagina__raster {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: clamp(2rem, 4vw, 4rem);
	align-items: start;
}

.dienstpagina__zij {
	grid-column: 1 / 5;
}

.dienstpagina__tekst {
	grid-column: 6 / 13;
	max-width: 68ch;
	color: var(--inkt-zacht);
}

.dienstpagina__tekst > p {
	margin-bottom: 1.2em;
}

.kaartje__kort {
	font-family: var(--kopfont);
	font-size: 1.2rem;
	line-height: 1.35;
	color: var(--inkt);
	margin: 0 0 1.4rem;
	padding-bottom: 1.2rem;
	border-bottom: 1px solid var(--lijn);
}

.kaartje__punten {
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
	display: grid;
	gap: 0.45rem;
	font-size: 0.95rem;
	color: var(--inkt-zacht);
}

.kaartje__punten li {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.kaartje__punten li::before {
	content: '';
	width: 0.85rem;
	height: 1px;
	background: var(--salie);
	flex: none;
}

.kaartje__acties {
	display: grid;
	justify-items: start;
	gap: 1rem;
	margin-top: 1.8rem;
	padding-top: 1.4rem;
	border-top: 1px solid var(--lijn);
}

/* --- Fotoreeks --------------------------------------------------------- */

.fotoreeks__kop {
	max-width: 46rem;
	margin-bottom: clamp(1.8rem, 4vw, 3rem);
}

.fotoreeks__raster {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
}

.fotoreeks__tegel a {
	display: block;
	border-radius: 14px;
	overflow: hidden;
}

.fotoreeks__tegel .gh-img {
	aspect-ratio: 4 / 3;
	border-radius: 0;
	transition: transform 0.6s ease;
}

.fotoreeks__tegel a:hover .gh-img {
	transform: scale(1.05);
}

.fotoreeks__link {
	margin-top: 2rem;
}

/* --- Andere diensten --------------------------------------------------- */

.andere {
	background: var(--bos);
	color: var(--licht);
	padding-block: clamp(3rem, 6vw, 5rem);
}

.andere__titel {
	color: #fff;
	margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.andere__raster {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
}

.andere__tegel a {
	position: relative;
	display: block;
	border-radius: 14px;
	overflow: hidden;
}

.andere__tegel .gh-img {
	aspect-ratio: 3 / 4;
	border-radius: 0;
	filter: brightness(0.72);
	transition: transform 0.6s ease, filter 0.3s ease;
}

.andere__tegel a:hover .gh-img,
.andere__tegel a:focus-visible .gh-img {
	transform: scale(1.05);
	filter: brightness(0.85);
}

.andere__naam {
	position: absolute;
	left: 1.1rem;
	right: 1.1rem;
	bottom: 1rem;
	font-family: var(--kopfont);
	font-size: 1.15rem;
	color: #fff;
	text-shadow: 0 2px 12px rgba(6, 18, 12, 0.5);
}

/* --- Team -------------------------------------------------------------- */

.team {
	list-style: none;
	margin: clamp(2rem, 4vw, 3rem) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1.5rem, 3vw, 2.5rem);
}

.team__foto .gh-img {
	aspect-ratio: 3 / 4;
}

.team__naam {
	font-size: 1.3rem;
	margin: 1rem 0 0.2rem;
}

.team__functie {
	margin: 0;
	color: var(--inkt-zacht);
	font-size: 0.95rem;
}

@media (min-width: 981px) {

	.dienstpagina__zij {
		position: sticky;
		top: 7.5rem;
	}
}

@media (max-width: 980px) {

	.dienstpagina__raster {
		grid-template-columns: 1fr;
	}

	.dienstpagina__zij,
	.dienstpagina__tekst {
		grid-column: 1 / -1;
	}

	.fotoreeks__raster,
	.team {
		grid-template-columns: repeat(2, 1fr);
	}

	.andere__raster {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {

	.fotoreeks__raster,
	.team {
		grid-template-columns: 1fr;
	}

	.andere__raster {
		grid-template-columns: repeat(2, 1fr);
		gap: 0.6rem;
	}
}

/* --- Telefoonnummers in de kop en het oproepblok ----------------------- */

.kop__telnaam {
	display: none;
}

.kop__tel--mobiel {
	display: none;
}

@media (min-width: 1280px) {

	.kop__tel--mobiel {
		display: inline-flex;
	}

	.kop__telnaam {
		display: inline;
		margin-right: 0.35rem;
		font-weight: 500;
		color: rgba(255, 255, 255, 0.65);
	}
}

.oproep__nummers {
	display: grid;
	gap: 0.5rem;
	justify-items: start;
}

.oproep__nummers .oproep__tel {
	border-bottom: 0;
	padding-bottom: 0;
	font-weight: 500;
	color: rgba(237, 240, 234, 0.85);
}

.oproep__nummers .oproep__tel:hover {
	color: #fff;
}