:root {
	--ntr-color-blue: #46b4e7;
	--ntr-color-red: #a3443b;
	--ntr-color-navy: #002955;
	--ntr-color-dark-grey: #303030;
	--ntr-color-beige: #f7f1ee;
	--ntr-font-family: "Poppins";
	--ntr-font-family-bold: "Poppins";
	--ntr-border-radius: clamp(0.5rem, 1.2vw, 1.25rem);

	/*
    Liquid fonts: set --min (px at 480vw) and --max (px at 2560vw), then use:
    --liquid: calc(var(--min) * 1rem / var(--base-font-size) + (1vw - var(--min-font-viewport-width) / 100 * 1px) * 100 * ((var(--max) - var(--min)) / (var(--max-font-viewport-width) - var(--min-font-viewport-width))));
    font-size: clamp(calc(var(--min) * 1rem / var(--base-font-size)), var(--liquid), calc(var(--max) * 1rem / var(--base-font-size)));
  */
	--min-font-viewport-width: 480;
	--max-font-viewport-width: 2560;
	--base-font-size: 16;
}

* {
	margin: 0;
	padding: 0;
}

/* -- Utilities ------------------------------------------------------- */

.font-normal {
	font-family: "Poppins", sans-serif;
	font-weight: 400;
	font-style: normal;
}

.font-bold {
	font-family: "Poppins", sans-serif;
	font-weight: 600;
	font-style: normal;
}

.mb0 {
	margin-bottom: 0 !important;
}

.mt0 {
	margin-top: 0 !important;
}

.light {
	color: white !important;
}

.dark {
	color: var(--ntr-color-dark-grey) !important;
}

.uppercase {
	text-transform: uppercase;
}

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

.skip-navigation {
	position: absolute;
	top: 50px;
	left: -1000px;
	width: auto;
	height: auto;
	overflow: hidden;
	background-color: #fff;
	z-index: 999;
	color: black;
	margin: 20px;
	padding: 20px;
	opacity: 0;
	&:focus {
		opacity: 1;
		left: 0;
	}
}

/* -- Global ---------------------------------------------------------- */

body {
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	background-color: var(--ntr-color-beige);
	color: white;
}

body :focus-visible {
	outline-style: solid;
	outline-width: 0.25rem;
	outline-offset: 1px;
	outline-color: #ff2471;
	--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
		var(--tw-ring-offset-width) var(--tw-ring-offset-color);
	--tw-ring-shadow: var(--tw-ring-inset) 0 0 0
		calc(0.25rem + var(--tw-ring-offset-width)) var(--tw-ring-color);
	box-shadow:
		var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
		var(--tw-shadow, 0 0 #0000);
	--tw-ring-opacity: 1;
	--tw-ring-color: rgb(124 77 255 / var(--tw-ring-opacity));
	--tw-ring-offset-width: 0.5rem;
}

h1,
h2,
h3,
h4 {
	font-family: var(--ntr-font-family-bold);
}

td,
th {
	vertical-align: top;
}

/* -- NTR red theme --------------------------------------------------- */

.ntr-red {
	color: var(--ntr-color-red);
	.topmenu {
		.ntr-logo {
			margin-left: 4.39vw;
			svg {
				fill: var(--ntr-color-red);
			}
		}
	}
	.topmenu.active {
		background-color: var(--ntr-color-red);
	}
	.footer-logo {
		background-color: var(--ntr-color-red);
		.footer-ntr-logo {
			fill: #ffffff;
		}
	}
}

/* -- Footer ---------------------------------------------------------- */

footer {
	min-height: 0 !important;
	font-family: var(--ntr-font-family) !important;
	ul {
		min-height: 0 !important;
		margin-top: 4vw !important;
		margin-bottom: 4vw !important;
		li {
			font-family: var(--ntr-font-family) !important;
			a:hover {
				color: white !important;
				text-decoration: underline;
			}
		}
	}
}

/* -- Articles -------------------------------------------------------- */

.article {
	margin: 0 !important;
	display: flow-root;
	color: white;
	.content {
		font-size: 1.2rem;
		margin: 1em 11vw;
		padding-top: 3rem;
		padding-bottom: 3rem;
		.slim {
			padding-top: 0;
		}
		p {
			--min: 16;
			--max: 48;
			--liquid: calc(
				var(--min) * 1rem / var(--base-font-size) +
					(1vw - var(--min-font-viewport-width) / 100 * 1px) * 100 *
					(
						(var(--max) - var(--min)) /
							(var(--max-font-viewport-width) - var(--min-font-viewport-width))
					)
			);
			font-size: clamp(
				calc(var(--min) * 1rem / var(--base-font-size)),
				var(--liquid),
				calc(var(--max) * 1rem / var(--base-font-size))
			);
			line-height: calc(25 / 19);
		}
		img {
			width: 100%;
		}
		h2 {
			&.title {
				--min: 32;
				--max: 76;
				--liquid: calc(
					var(--min) * 1rem / var(--base-font-size) +
						(1vw - var(--min-font-viewport-width) / 100 * 1px) * 100 *
						(
							(var(--max) - var(--min)) /
								(
									var(--max-font-viewport-width) -
										var(--min-font-viewport-width)
								)
						)
				);
				font-size: clamp(
					calc(var(--min) * 1rem / var(--base-font-size)),
					var(--liquid),
					calc(var(--max) * 1rem / var(--base-font-size))
				);
				font-weight: bold;
				text-align: left;
			}
		}
		hr {
			margin: 1vw 0;
			border: 0;
			height: 2px;
			background-color: white;
			&.large {
				margin: 3vw 0;
			}
			&.mb2 {
				margin-bottom: 2vw;
			}
			@media (max-width: 640px) {
				height: 1px;
			}
		}
	}

	/* -- Header -- */
	&.header {
		.header-image-wrapper {
			position: relative;
			line-height: 0;
			img {
				width: 100%;
				height: auto;
				display: block;
				margin: 0;
			}
			.header-overlay {
				position: absolute;
				inset: 0;
				display: flex;
				align-items: flex-end;
				justify-content: space-between;
				padding: 4% 11vw;
				.header-logo {
					align-self: center;
					svg {
						width: clamp(60px, 10vw, 160px);
						height: auto;
						fill: #f7f0ed;
						display: block;
					}
				}
				.header-badge-wrapper {
					display: flex;
					flex-direction: column;
					align-items: flex-end;
					.badge-year {
						font-family: "Poppins", sans-serif;
						color: #f7f0ed;
						font-size: clamp(0.8rem, 1.8vw, 2rem);
						font-weight: 500;
						margin-top: 0.8em;
						padding-right: clamp(0.6rem, 1.8vw, 1.875rem);
					}
				}
				.header-badge {
					background-color: #f7f0ed;
					border-radius: var(--ntr-border-radius);
					padding: clamp(0.4rem, 1.2vw, 1.25rem) clamp(0.6rem, 1.8vw, 1.875rem)
						clamp(0.4rem, 1.2vw, 1.25rem) clamp(1.5rem, 5vw, 5.5rem);
					font-family: "Poppins", sans-serif;
					.badge-text {
						display: block;
						font-size: clamp(1.4rem, 5.5vw, 5.5rem);
						font-weight: 800;
						line-height: 1;
						letter-spacing: -0.02em;
						text-align: right;
						padding-bottom: 0.2em;
						background-image: url("../img/header-2025.jpg");
						background-size: cover;
						background-position: right 60%;
						color: transparent;
						-webkit-background-clip: text;
						background-clip: text;
					}
				}
			}
		}
	}

	/* -- Intro (PDF links) -- */
	&.intro {
		background-color: var(--ntr-color-beige);
		color: var(--ntr-color-red);
		text-align: left;
		padding-bottom: 0;
		width: 100%;
		.intro-verslagen {
			margin: 0 0 4.8vw 0;
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			grid-column-gap: 4vw;
			grid-row-gap: 4vw;
			@media (min-width: 1280px) {
				grid-template-columns: repeat(4, minmax(0, 1fr));
			}
			a {
				display: grid;
				text-decoration: none;
			}
			li {
				list-style-type: none;
				background-color: transparent;
				display: flex;
				flex-direction: column;
				img {
					margin: 0;
					padding: 0;
					border-radius: var(--ntr-border-radius);
				}
				.title {
					width: 100%;
					color: var(--ntr-color-red);
					background-color: transparent;
					font-family: var(--ntr-font-family-bold);
					--min: 16;
					--max: 28;
					--liquid: calc(
						var(--min) * 1rem / var(--base-font-size) +
							(1vw - var(--min-font-viewport-width) / 100 * 1px) * 100 *
							(
								(var(--max) - var(--min)) /
									(
										var(--max-font-viewport-width) -
											var(--min-font-viewport-width)
									)
							)
					);
					font-size: clamp(
						calc(var(--min) * 1rem / var(--base-font-size)),
						var(--liquid),
						calc(var(--max) * 1rem / var(--base-font-size))
					);
					line-height: 1.25;
				}
				.title-wrapper {
					flex-grow: 1;
					padding: 7px 10px;
					display: flex;
					justify-content: space-between;
					gap: 1rem;
					align-items: baseline;
				}
			}
		}
	}

	&.onzewaarden, &.impact {
		background-color: var(--ntr-color-beige);
		color: var(--ntr-color-red);
		.content {
			padding-top: 0;
			margin-top: 0;
			margin-bottom: 6vw;
			.promo {
				margin: 0 0 3.5vw 0;
				@media (min-width: 768px) {
					display: flex;
					align-items: flex-end;
				}
				.promo-video {
					font-size: 0;
					margin: 0;
					padding: 0;
					width: 100%;
					@media (min-width: 768px) {
						flex-shrink: 0;
						width: 50vw;
					}
				}
				.promo-text {
					--min: 32;
					--max: 80;
					--liquid: calc(
						var(--min) * 1rem / var(--base-font-size) +
							(1vw - var(--min-font-viewport-width) / 100 * 1px) * 100 *
							(
								(var(--max) - var(--min)) /
									(
										var(--max-font-viewport-width) -
											var(--min-font-viewport-width)
									)
							)
					);
					font-size: clamp(
						calc(var(--min) * 1rem / var(--base-font-size)),
						var(--liquid),
						calc(var(--max) * 1rem / var(--base-font-size))
					);
					line-height: 1.1;
					font-family: var(--ntr-font-family-bold);
					margin: 1rem auto 0 0;
					padding: 0;
					width: 100%;
					@media (min-width: 768px) {
						margin: 0 0 0 3vw;
						width: 22vw;
					}
				}
			}
			.impact {
				display: grid;
				grid-template-columns: 1fr 1fr;
				grid-column-gap: 3vw;
				grid-row-gap: 3vw;
				align-items: start;
				margin: 3vw 0;
				.impact-column {
					display: flex;
					flex-direction: column;
					gap: 3vw;
				}
				[id^="block-"] {
					display: flex;
					flex-direction: column;
					gap: 0.75em;
				}
				@media (max-width: 767px) {
					grid-template-columns: 1fr;
				}
				.i-item {
					font-family: var(--ntr-font-family);
					color: var(--ntr-color-red);
					img {
						width: 100%;
						height: auto;
						border-radius: var(--ntr-border-radius);
						display: block;
					}
				}
				h3 {
					font-weight: 700;
					color: var(--ntr-color-red);
					--min: 18;
					--max: 36;
					--liquid: calc(
						var(--min) * 1rem / var(--base-font-size) +
							(1vw - var(--min-font-viewport-width) / 100 * 1px) * 100 *
							(
								(var(--max) - var(--min)) /
									(
										var(--max-font-viewport-width) -
											var(--min-font-viewport-width)
									)
							)
					);
					font-size: clamp(
						calc(var(--min) * 1rem / var(--base-font-size)),
						var(--liquid),
						calc(var(--max) * 1rem / var(--base-font-size))
					);
					margin: 0;
				}
				p {
					--min: 13;
					--max: 28;
					--liquid: calc(
						var(--min) * 1rem / var(--base-font-size) +
							(1vw - var(--min-font-viewport-width) / 100 * 1px) * 100 *
							(
								(var(--max) - var(--min)) /
									(
										var(--max-font-viewport-width) -
											var(--min-font-viewport-width)
									)
							)
					);
					font-size: clamp(
						calc(var(--min) * 1rem / var(--base-font-size)),
						var(--liquid),
						calc(var(--max) * 1rem / var(--base-font-size))
					);
					line-height: 1.5;
					margin: 0;
					a {
						font-family: var(--ntr-font-family-bold);
						font-size: inherit;
						line-height: inherit;
					}
				}
			}
		}
	}
  &.impact {
    padding-top: 3rem;
  }

	/* -- Media-aanbod intro (stat cards) -- */
	&.media-aanbod-intro {
		background-color: var(--ntr-color-red);
		.content {
			padding-bottom: clamp(3rem, 6vw, 7rem);
		}
		.section-title {
			color: #f7f0ed;
			font-weight: 700;
			--min: 32;
			--max: 76;
			--liquid: calc(
				var(--min) * 1rem / var(--base-font-size) +
					(1vw - var(--min-font-viewport-width) / 100 * 1px) * 100 *
					(
						(var(--max) - var(--min)) /
							(var(--max-font-viewport-width) - var(--min-font-viewport-width))
					)
			);
			font-size: clamp(
				calc(var(--min) * 1rem / var(--base-font-size)),
				var(--liquid),
				calc(var(--max) * 1rem / var(--base-font-size))
			);
			margin-bottom: clamp(1.5rem, 3vw, 3rem);
		}
		.aanbod-cards {
			display: grid;
			grid-template-columns: 5fr 7fr;
			column-gap: 2vw;
			row-gap: 0;
			align-items: start;
			@media (max-width: 767px) {
				grid-template-columns: 1fr;
				gap: 1rem;
			}
		}
		.aanbod-card {
			background-color: white;
			border-radius: var(--ntr-border-radius);
			padding: clamp(1.5rem, 3vw, 3rem);
			position: relative;
			&.card-web,
			&.card-streamstarts {
				background-color: #f7f1ee;
			}
			&.card-televisie {
				z-index: 1;
			}
			&.card-web {
				z-index: 3;
				@media (min-width: 768px) {
					transform: translateX(-6vw);
					margin-top: -3vw;
					margin-right: 0;
				}
			}
			&.card-streamstarts {
				z-index: 2;
				@media (min-width: 768px) {
					transform: translateX(4vw);
					margin-top: -1vw;
					margin-left: 4vw;
				}
			}
			&.card-audio {
				z-index: 4;
				@media (min-width: 768px) {
					transform: translateX(-10vw);
					margin-top: -5vw;
					margin-left: 15vw;
					margin-right: -8vw;
				}
			}
		}
		.card-heading {
			color: var(--ntr-color-red);
			font-weight: 700;
			--min: 28;
			--max: 56;
			--liquid: calc(
				var(--min) * 1rem / var(--base-font-size) +
					(1vw - var(--min-font-viewport-width) / 100 * 1px) * 100 *
					(
						(var(--max) - var(--min)) /
							(var(--max-font-viewport-width) - var(--min-font-viewport-width))
					)
			);
			font-size: clamp(
				calc(var(--min) * 1rem / var(--base-font-size)),
				var(--liquid),
				calc(var(--max) * 1rem / var(--base-font-size))
			);
			margin: 0 0 0.4em;
			line-height: 1.1;
		}
		.card-label {
			color: var(--ntr-color-navy);
			font-weight: 700;
			--min: 28;
			--max: 52;
			--liquid: calc(
				var(--min) * 1rem / var(--base-font-size) +
					(1vw - var(--min-font-viewport-width) / 100 * 1px) * 100 *
					(
						(var(--max) - var(--min)) /
							(var(--max-font-viewport-width) - var(--min-font-viewport-width))
					)
			);
			font-size: clamp(
				calc(var(--min) * 1rem / var(--base-font-size)),
				var(--liquid),
				calc(var(--max) * 1rem / var(--base-font-size))
			);
			margin: 0.5em 0 0;
			line-height: 1.2;
		}
		.card-stat {
			color: var(--ntr-color-navy);
			font-weight: 700;
			--min: 28;
			--max: 52;
			--liquid: calc(
				var(--min) * 1rem / var(--base-font-size) +
					(1vw - var(--min-font-viewport-width) / 100 * 1px) * 100 *
					(
						(var(--max) - var(--min)) /
							(var(--max-font-viewport-width) - var(--min-font-viewport-width))
					)
			);
			font-size: clamp(
				calc(var(--min) * 1rem / var(--base-font-size)),
				var(--liquid),
				calc(var(--max) * 1rem / var(--base-font-size))
			);
			margin: 0 0 0.5em;
			line-height: 1.2;
		}
		.card-reach {
			color: var(--ntr-color-navy);
			font-weight: 700;
			--min: 28;
			--max: 52;
			--liquid: calc(
				var(--min) * 1rem / var(--base-font-size) +
					(1vw - var(--min-font-viewport-width) / 100 * 1px) * 100 *
					(
						(var(--max) - var(--min)) /
							(var(--max-font-viewport-width) - var(--min-font-viewport-width))
					)
			);
			font-size: clamp(
				calc(var(--min) * 1rem / var(--base-font-size)),
				var(--liquid),
				calc(var(--max) * 1rem / var(--base-font-size))
			);
			margin: 0 0 0.3em;
			line-height: 1.3;
		}
		.card-sub-heading {
			color: var(--ntr-color-red);
			font-weight: 700;
			--min: 28;
			--max: 56;
			--liquid: calc(
				var(--min) * 1rem / var(--base-font-size) +
					(1vw - var(--min-font-viewport-width) / 100 * 1px) * 100 *
					(
						(var(--max) - var(--min)) /
							(var(--max-font-viewport-width) - var(--min-font-viewport-width))
					)
			);
			font-size: clamp(
				calc(var(--min) * 1rem / var(--base-font-size)),
				var(--liquid),
				calc(var(--max) * 1rem / var(--base-font-size))
			);
			margin: 0.5em 0 0.3em;
		}
		.card-detail {
			color: var(--ntr-color-navy);
			font-weight: 700;
			--min: 14;
			--max: 20;
			--liquid: calc(
				var(--min) * 1rem / var(--base-font-size) +
					(1vw - var(--min-font-viewport-width) / 100 * 1px) * 100 *
					(
						(var(--max) - var(--min)) /
							(var(--max-font-viewport-width) - var(--min-font-viewport-width))
					)
			);
			font-size: clamp(
				calc(var(--min) * 1rem / var(--base-font-size)),
				var(--liquid),
				calc(var(--max) * 1rem / var(--base-font-size))
			);
			margin: 0;
			line-height: 1.5;
		}
		.card-programs {
			color: var(--ntr-color-navy);
			font-weight: 700;
			--min: 22;
			--max: 34;
			--liquid: calc(
				var(--min) * 1rem / var(--base-font-size) +
					(1vw - var(--min-font-viewport-width) / 100 * 1px) * 100 *
					(
						(var(--max) - var(--min)) /
							(var(--max-font-viewport-width) - var(--min-font-viewport-width))
					)
			);
			font-size: clamp(
				calc(var(--min) * 1rem / var(--base-font-size)),
				var(--liquid),
				calc(var(--max) * 1rem / var(--base-font-size))
			);
			margin: 0;
			line-height: 1.5;
			.card-programs-minutes,
			.minutes {
				--min: 16;
				--max: 24;
				--liquid: calc(
					var(--min) * 1rem / var(--base-font-size) +
						(1vw - var(--min-font-viewport-width) / 100 * 1px) * 100 *
						(
							(var(--max) - var(--min)) /
								(
									var(--max-font-viewport-width) -
										var(--min-font-viewport-width)
								)
						)
				);
				font-size: clamp(
					calc(var(--min) * 1rem / var(--base-font-size)),
					var(--liquid),
					calc(var(--max) * 1rem / var(--base-font-size))
				);
				display: block;
				line-height: 1.3;
			}
		}
		.card-big-number {
			color: var(--ntr-color-navy);
			font-weight: 700;
			font-family: var(--ntr-font-family-bold);
			--min: 28;
			--max: 52;
			--liquid: calc(
				var(--min) * 1rem / var(--base-font-size) +
					(1vw - var(--min-font-viewport-width) / 100 * 1px) * 100 *
					(
						(var(--max) - var(--min)) /
							(var(--max-font-viewport-width) - var(--min-font-viewport-width))
					)
			);
			font-size: clamp(
				calc(var(--min) * 1rem / var(--base-font-size)),
				var(--liquid),
				calc(var(--max) * 1rem / var(--base-font-size))
			);
			margin: 0.5rem 0 0;
			line-height: 1;
		}
	}

	/* -- Media aanbod (kijkcijfers, waardering, streams, audio) -- */
	&.media-aanbod {
		text-align: left;
		background-color: white;
		color: var(--ntr-color-navy);
		display: flow-root;
		width: 100%;
		&.waardering .content {
			padding-bottom: 0;
		}
		&.streams .content {
			padding-top: 0;
		}
		&.waardering,
		&.streams {
			background-color: var(--ntr-color-red);
			color: white;
			.content h3.title {
				color: white;
			}
		}
		&.audio {
			background-color: var(--ntr-color-navy);
			color: white;
			.content {
				padding-bottom: 3rem;
				h3 {
					--min: 20;
				}
			}
			.luistercijfers {
				margin-top: 2rem;
				margin-bottom: 2rem;
				display: grid;
				grid-template-columns: repeat(1, minmax(0, 1fr));
				grid-column-gap: 0vw;
				grid-row-gap: 1.5vw;
				justify-items: stretch;
				align-items: baseline;
				@media (min-width: 768px) {
					grid-template-columns: repeat(3, minmax(0, 1fr));
				}
				h4 {
					--min: 16;
					--max: 46;
					--liquid: calc(
						var(--min) * 1rem / var(--base-font-size) +
							(1vw - var(--min-font-viewport-width) / 100 * 1px) * 100 *
							(
								(var(--max) - var(--min)) /
									(
										var(--max-font-viewport-width) -
											var(--min-font-viewport-width)
									)
							)
					);
					font-size: clamp(
						calc(var(--min) * 1rem / var(--base-font-size)),
						var(--liquid),
						calc(var(--max) * 1rem / var(--base-font-size))
					);
					font-weight: bold;
					line-height: calc(20 / 18);
					text-transform: uppercase;
					p {
						--min: 16;
						--max: 46;
						--liquid: calc(
							var(--min) * 1rem / var(--base-font-size) +
								(1vw - var(--min-font-viewport-width) / 100 * 1px) * 100 *
								(
									(var(--max) - var(--min)) /
										(
											var(--max-font-viewport-width) -
												var(--min-font-viewport-width)
										)
								)
						);
						font-size: clamp(
							calc(var(--min) * 1rem / var(--base-font-size)),
							var(--liquid),
							calc(var(--max) * 1rem / var(--base-font-size))
						);
						font-weight: bold;
						line-height: calc(20 / 18);
						text-transform: uppercase;
					}
				}
				p {
					margin: 0 0 0.5vw 0 !important;
				}
				p.small {
					--min: 16;
					--max: 20;
					--liquid: calc(
						var(--min) * 1rem / var(--base-font-size) +
							(1vw - var(--min-font-viewport-width) / 100 * 1px) * 100 *
							(
								(var(--max) - var(--min)) /
									(
										var(--max-font-viewport-width) -
											var(--min-font-viewport-width)
									)
							)
					);
					font-size: clamp(
						calc(var(--min) * 1rem / var(--base-font-size)),
						var(--liquid),
						calc(var(--max) * 1rem / var(--base-font-size))
					);
					line-height: calc(13 / 11);
					font-weight: normal;
				}
				img {
					width: 11.8vw;
					margin: 0 1rem 0 0;
					float: left;
				}
				.text {
					display: grid;
				}
			}
			.podcast {
				display: grid;
				grid-template-columns: repeat(2, minmax(0, 1fr));
				gap: 3rem;
				justify-items: center;
				align-items: stretch;
				overflow: visible;
				padding: 14px;
				margin: 2rem -14px 0;
				.item:last-child:nth-child(odd) {
					grid-column: 1 / -1;
					width: calc((100% - 3rem) / 2);
				}
				@media (min-width: 768px) {
					grid-template-columns: repeat(3, minmax(0, 17%));
					gap: 3vw;
					.item:last-child:nth-child(odd) {
						grid-column: unset;
						width: 100%;
					}
				}
				@media (min-width: 1024px) {
					grid-template-columns: repeat(5, minmax(0, 17%));
					gap: 3vw;
				}
				img {
					margin: 0;
					padding: 0;
					border: none;
					width: 100%;
					display: block;
					border-radius: var(--ntr-border-radius);
				}
				.item {
					background-color: white;
					border-radius: var(--ntr-border-radius);
					display: flex;
					flex-direction: column;
					box-shadow: 0 0 0 14px white;
					min-width: 0;
					width: 100%;
				}
				.description {
					width: 100%;
					flex: 1;
					font-family: var(--ntr-font-family);
					--min: 14;
					--max: 18;
					--liquid: calc(
						var(--min) * 1rem / var(--base-font-size) +
							(1vw - var(--min-font-viewport-width) / 100 * 1px) * 100 *
							(
								(var(--max) - var(--min)) /
									(
										var(--max-font-viewport-width) -
											var(--min-font-viewport-width)
									)
							)
					);
					font-size: clamp(
						calc(var(--min) * 1rem / var(--base-font-size)),
						var(--liquid),
						calc(var(--max) * 1rem / var(--base-font-size))
					);
					line-height: 1.3;
					padding: 0.6em 0.7em 0.7em;
					color: var(--ntr-color-navy);
					background-color: white;
					.title {
						font-weight: 700;
						margin: 0 0 0.25em;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						@media (max-width: 767px) {
							white-space: normal;
							overflow: visible;
							text-overflow: unset;
						}
					}
					.subtitle {
						font-weight: 400;
						margin: 0;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
					.ntr-red,
					.ntr-color {
						color: var(--ntr-color-red);
						font-weight: 700;
						@media (max-width: 767px) {
							display: block;
						}
					}
				}
			}
		}
		.content {
			position: relative;
			h2 {
				margin-bottom: 0;
			}
			h3 {
				--min: 32;
				--max: 77;
				--liquid: calc(
					var(--min) * 1rem / var(--base-font-size) +
						(1vw - var(--min-font-viewport-width) / 100 * 1px) * 100 *
						(
							(var(--max) - var(--min)) /
								(
									var(--max-font-viewport-width) -
										var(--min-font-viewport-width)
								)
						)
				);
				font-size: clamp(
					calc(var(--min) * 1rem / var(--base-font-size)),
					var(--liquid),
					calc(var(--max) * 1rem / var(--base-font-size))
				);
				.small {
					--min: 16;
					--max: 46;
					--liquid: calc(
						var(--min) * 1rem / var(--base-font-size) +
							(1vw - var(--min-font-viewport-width) / 100 * 1px) * 100 *
							(
								(var(--max) - var(--min)) /
									(
										var(--max-font-viewport-width) -
											var(--min-font-viewport-width)
									)
							)
					);
					font-size: clamp(
						calc(var(--min) * 1rem / var(--base-font-size)),
						var(--liquid),
						calc(var(--max) * 1rem / var(--base-font-size))
					);
				}
			}
			h3.title {
				color: var(--ntr-color-navy);
			}
			.gallery {
				display: grid;
				grid-template-columns: 1fr 1fr;
				grid-column-gap: 2.5vw;
				grid-row-gap: 2.5vw;
				justify-items: stretch;
				align-items: stretch;
				margin: 2vw 0 5vw 0;
				h4 {
					font-family: var(--ntr-font-family);
					--min: 16;
					--max: 46;
					--liquid: calc(
						var(--min) * 1rem / var(--base-font-size) +
							(1vw - var(--min-font-viewport-width) / 100 * 1px) * 100 *
							(
								(var(--max) - var(--min)) /
									(
										var(--max-font-viewport-width) -
											var(--min-font-viewport-width)
									)
							)
					);
					font-size: clamp(
						calc(var(--min) * 1rem / var(--base-font-size)),
						var(--liquid),
						calc(var(--max) * 1rem / var(--base-font-size))
					);
				}
				p {
					--min: 16;
					--max: 36;
					--liquid: calc(
						var(--min) * 1rem / var(--base-font-size) +
							(1vw - var(--min-font-viewport-width) / 100 * 1px) * 100 *
							(
								(var(--max) - var(--min)) /
									(
										var(--max-font-viewport-width) -
											var(--min-font-viewport-width)
									)
							)
					);
					font-size: clamp(
						calc(var(--min) * 1rem / var(--base-font-size)),
						var(--liquid),
						calc(var(--max) * 1rem / var(--base-font-size))
					);
					line-height: calc(17 / 14);
					margin: 0;
					padding: 0;
				}
				a {
					--min: 16;
					--max: 36;
					--liquid: calc(
						var(--min) * 1rem / var(--base-font-size) +
							(1vw - var(--min-font-viewport-width) / 100 * 1px) * 100 *
							(
								(var(--max) - var(--min)) /
									(
										var(--max-font-viewport-width) -
											var(--min-font-viewport-width)
									)
							)
					);
					font-size: clamp(
						calc(var(--min) * 1rem / var(--base-font-size)),
						var(--liquid),
						calc(var(--max) * 1rem / var(--base-font-size))
					);
					line-height: calc(17 / 14);
					margin: 0;
					padding: 0;
					color: var(--ntr-color-blue);
					text-decoration: underline;
				}
				img {
					margin: 0 0 5px 0;
				}
			}
			.table {
				display: grid;
				grid-template-columns: 1fr 1fr;
				grid-column-gap: 5vw;
				grid-row-gap: 2.5vw;
				justify-items: stretch;
				align-items: stretch;
				margin: 0;
				.small {
					--min: 16;
					--max: 36;
					--liquid: calc(
						var(--min) * 1rem / var(--base-font-size) +
							(1vw - var(--min-font-viewport-width) / 100 * 1px) * 100 *
							(
								(var(--max) - var(--min)) /
									(
										var(--max-font-viewport-width) -
											var(--min-font-viewport-width)
									)
							)
					);
					font-size: clamp(
						calc(var(--min) * 1rem / var(--base-font-size)),
						var(--liquid),
						calc(var(--max) * 1rem / var(--base-font-size))
					);
				}
				td {
					font-family: var(--ntr-font-family);
					--min: 16;
					--max: 40;
					--liquid: calc(
						var(--min) * 1rem / var(--base-font-size) +
							(1vw - var(--min-font-viewport-width) / 100 * 1px) * 100 *
							(
								(var(--max) - var(--min)) /
									(
										var(--max-font-viewport-width) -
											var(--min-font-viewport-width)
									)
							)
					);
					font-size: clamp(
						calc(var(--min) * 1rem / var(--base-font-size)),
						var(--liquid),
						calc(var(--max) * 1rem / var(--base-font-size))
					);
					line-height: calc(20 / 18);
					padding: 0 0.5vw 0.5vw 0;
					&:first-child {
						padding-right: 1vw;
					}
					&:last-child {
						text-align: right;
						padding-right: 0.1vw;
					}
				}
				td.small {
					--min: 16;
					--max: 36;
					--liquid: calc(
						var(--min) * 1rem / var(--base-font-size) +
							(1vw - var(--min-font-viewport-width) / 100 * 1px) * 100 *
							(
								(var(--max) - var(--min)) /
									(
										var(--max-font-viewport-width) -
											var(--min-font-viewport-width)
									)
							)
					);
					font-size: clamp(
						calc(var(--min) * 1rem / var(--base-font-size)),
						var(--liquid),
						calc(var(--max) * 1rem / var(--base-font-size))
					);
					font-family: var(--ntr-font-family);
				}
				td.meer {
					font-family: var(--ntr-font-family);
					a {
						font-size: inherit;
						line-height: inherit;
						color: var(--ntr-color-blue);
						text-decoration: underline;
					}
				}
				.kdh {
					td {
						margin: 0;
						padding: 0;
						text-align: left;
					}
				}
			}
			.streamstarts {
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				gap: 2vw;
				margin-top: 1rem;
				@media (max-width: 767px) {
					grid-template-columns: 1fr;
				}
				.stream-card {
					img {
						width: 100%;
						aspect-ratio: 16 / 10;
						object-fit: cover;
						border-radius: var(--ntr-border-radius);
						display: block;
						margin-bottom: 0.5em;
					}
					h4 {
						color: white;
						font-weight: 700;
						font-family: var(--ntr-font-family-bold);
						--min: 18;
						--max: 32;
						--liquid: calc(
							var(--min) * 1rem / var(--base-font-size) +
								(1vw - var(--min-font-viewport-width) / 100 * 1px) * 100 *
								(
									(var(--max) - var(--min)) /
										(
											var(--max-font-viewport-width) -
												var(--min-font-viewport-width)
										)
								)
						);
						font-size: clamp(
							calc(var(--min) * 1rem / var(--base-font-size)),
							var(--liquid),
							calc(var(--max) * 1rem / var(--base-font-size))
						);
						margin: 0 0 0.2em;
					}
					p {
						color: white;
						font-weight: 400;
						--min: 14;
						--max: 22;
						--liquid: calc(
							var(--min) * 1rem / var(--base-font-size) +
								(1vw - var(--min-font-viewport-width) / 100 * 1px) * 100 *
								(
									(var(--max) - var(--min)) /
										(
											var(--max-font-viewport-width) -
												var(--min-font-viewport-width)
										)
								)
						);
						font-size: clamp(
							calc(var(--min) * 1rem / var(--base-font-size)),
							var(--liquid),
							calc(var(--max) * 1rem / var(--base-font-size))
						);
						margin: 0;
					}
				}
			}
		}
		.kijkcijfers {
			color: var(--ntr-color-navy);
			display: grid;
			grid-template-columns: 0.75fr 4fr 1fr;
			grid-column-gap: 1vw;
			grid-row-gap: 1vw;
			@media (max-width: 767px) {
				grid-template-columns: 40px 1fr;
				.images {
					display: none;
				}
				.logos img {
					width: 100%;
				}
			}
			img {
				margin: 0;
				padding: 0;
			}
			.images img {
				border-radius: var(--ntr-border-radius);
			}
			.data {
				table {
					width: 100%;
					font-family: var(--ntr-font-family-bold);
					--min: 16;
					--max: 46;
					--liquid: calc(
						var(--min) * 1rem / var(--base-font-size) +
							(1vw - var(--min-font-viewport-width) / 100 * 1px) * 100 *
							(
								(var(--max) - var(--min)) /
									(
										var(--max-font-viewport-width) -
											var(--min-font-viewport-width)
									)
							)
					);
					font-size: clamp(
						calc(var(--min) * 1rem / var(--base-font-size)),
						var(--liquid),
						calc(var(--max) * 1rem / var(--base-font-size))
					);
					line-height: calc(21 / 18);
					padding: 0 0.5vw 0.5vw 0;
				}
			}
		}
		.waardering {
			display: grid;
			grid-template-columns: 2fr 1fr;
			gap: 2vw;
			align-items: start;
			@media (max-width: 767px) {
				grid-template-columns: 1fr;
				.waardering-right {
					display: none;
				}
			}
			.waardering-left {
				table {
					width: 100%;
					font-family: var(--ntr-font-family-bold);
					--min: 16;
					--max: 46;
					--liquid: calc(
						var(--min) * 1rem / var(--base-font-size) +
							(1vw - var(--min-font-viewport-width) / 100 * 1px) * 100 *
							(
								(var(--max) - var(--min)) /
									(
										var(--max-font-viewport-width) -
											var(--min-font-viewport-width)
									)
							)
					);
					font-size: clamp(
						calc(var(--min) * 1rem / var(--base-font-size)),
						var(--liquid),
						calc(var(--max) * 1rem / var(--base-font-size))
					);
					line-height: calc(21 / 18);
				}
			}
			.waardering-right {
				img {
					width: 100%;
					border-radius: var(--ntr-border-radius);
					display: block;
				}
			}
		}
		.data {
			table.small {
				--min: 16;
				--max: 30;
				--liquid: calc(
					var(--min) * 1rem / var(--base-font-size) +
						(1vw - var(--min-font-viewport-width) / 100 * 1px) * 100 *
						(
							(var(--max) - var(--min)) /
								(
									var(--max-font-viewport-width) -
										var(--min-font-viewport-width)
								)
						)
				);
				font-size: clamp(
					calc(var(--min) * 1rem / var(--base-font-size)),
					var(--liquid),
					calc(var(--max) * 1rem / var(--base-font-size))
				);
				text-transform: uppercase;
			}
			table {
				td {
					&:nth-child(1) {
						width: 2vw;
					}
					&:nth-child(3) {
						text-align: right;
					}
				}
			}
		}
	}

	/* -- Socials -- */
	&.socials {
		color: var(--ntr-color-red);
		background-color: white;
		.content {
			color: var(--ntr-color-red);
			background-color: white;
			margin-top: 1vh;
			padding-bottom: 2vh;
			h2 {
				color: var(--ntr-color-red);
				margin-bottom: 0;
			}
			h3 {
				--min: 32;
				--max: 80;
				--liquid: calc(
					var(--min) * 1rem / var(--base-font-size) +
						(1vw - var(--min-font-viewport-width) / 100 * 1px) * 100 *
						(
							(var(--max) - var(--min)) /
								(
									var(--max-font-viewport-width) -
										var(--min-font-viewport-width)
								)
						)
				);
				font-size: clamp(
					calc(var(--min) * 1rem / var(--base-font-size)),
					var(--liquid),
					calc(var(--max) * 1rem / var(--base-font-size))
				);
			}
			h3.title {
				color: var(--ntr-color-red);
			}
			hr.dark {
				background-color: var(--ntr-color-red);
			}
			.data {
				margin-top: 2rem;
				margin-bottom: 1rem;
				display: grid;
				grid-template-columns: 4fr 2fr;
				grid-column-gap: 0.5vw;
				grid-row-gap: 1.5vw;
				justify-items: stretch;
				align-items: baseline;
				color: var(--ntr-color-red);
				h4 {
					--min: 16;
					--max: 56;
					--liquid: calc(
						var(--min) * 1rem / var(--base-font-size) +
							(1vw - var(--min-font-viewport-width) / 100 * 1px) * 100 *
							(
								(var(--max) - var(--min)) /
									(
										var(--max-font-viewport-width) -
											var(--min-font-viewport-width)
									)
							)
					);
					font-size: clamp(
						calc(var(--min) * 1rem / var(--base-font-size)),
						var(--liquid),
						calc(var(--max) * 1rem / var(--base-font-size))
					);
					font-weight: 700;
				}
				p {
					--min: 13;
					--max: 28;
					--liquid: calc(
						var(--min) * 1rem / var(--base-font-size) +
							(1vw - var(--min-font-viewport-width) / 100 * 1px) * 100 *
							(
								(var(--max) - var(--min)) /
									(
										var(--max-font-viewport-width) -
											var(--min-font-viewport-width)
									)
							)
					);
					font-size: clamp(
						calc(var(--min) * 1rem / var(--base-font-size)),
						var(--liquid),
						calc(var(--max) * 1rem / var(--base-font-size))
					);
				}
				.numbers {
					font-weight: 700;
					--min: 16;
					--max: 56;
					--liquid: calc(
						var(--min) * 1rem / var(--base-font-size) +
							(1vw - var(--min-font-viewport-width) / 100 * 1px) * 100 *
							(
								(var(--max) - var(--min)) /
									(
										var(--max-font-viewport-width) -
											var(--min-font-viewport-width)
									)
							)
					);
					font-size: clamp(
						calc(var(--min) * 1rem / var(--base-font-size)),
						var(--liquid),
						calc(var(--max) * 1rem / var(--base-font-size))
					);
					text-align: right;
				}
			}
		}
	}

	/* -- Personeel -- */
	&.personeel {
		.personeel-grid {
			display: grid;
			grid-template-columns: minmax(0, 74.255fr) minmax(0, 25.745fr);
			gap: 0;
			width: 100%;
			img {
				width: 100%;
				min-width: 0;
				max-width: 100%;
				height: auto;
				display: block;
				margin: 0;
			}
			img:nth-child(1) {
				grid-column: 1 / -1;
			}
			img:nth-child(2),
			img:nth-child(3) {
				height: 100%;
				object-fit: cover;
				align-self: stretch;
			}
			img:nth-child(4) {
				grid-column: 1 / -1;
			}
		}
	}

	/* -- Shared: Personeel + Jaarrekening -- */
	&.personeel,
	&.jaarrekening,
	&.download {
		background-color: var(--ntr-color-red);
		color: white;
		img {
			width: 100%;
			height: auto;
			margin: 0 auto;
		}
		a {
			color: white;
			text-decoration: underline;
		}
		p.meer {
			font-family: var(--ntr-font-family);
			--min: 16;
			--max: 48;
			--liquid: calc(
				var(--min) * 1rem / var(--base-font-size) +
					(1vw - var(--min-font-viewport-width) / 100 * 1px) * 100 *
					(
						(var(--max) - var(--min)) /
							(var(--max-font-viewport-width) - var(--min-font-viewport-width))
					)
			);
			font-size: clamp(
				calc(var(--min) * 1rem / var(--base-font-size)),
				var(--liquid),
				calc(var(--max) * 1rem / var(--base-font-size))
			);
			color: white !important;
			a {
				display: inline-flex;
				align-items: baseline;
				gap: 4px;
			}
			svg {
				width: 22px;
				fill: currentColor;
			}
		}
	}

	/* -- Jaarrekening -- */
	&.jaarrekening {
		padding-bottom: 7vw;
		h3 {
			padding-bottom: 7vw;
		}
		p {
			color: white;
			--min: 16;
			--max: 56;
			--liquid: calc(
				var(--min) * 1rem / var(--base-font-size) +
					(1vw - var(--min-font-viewport-width) / 100 * 1px) * 100 *
					(
						(var(--max) - var(--min)) /
							(var(--max-font-viewport-width) - var(--min-font-viewport-width))
					)
			);
			font-size: clamp(
				calc(var(--min) * 1rem / var(--base-font-size)),
				var(--liquid),
				calc(var(--max) * 1rem / var(--base-font-size))
			);
			line-height: calc(22 / 19);
		}
		table {
			color: white;
			--min: 16;
			--max: 52;
			--liquid: calc(
				var(--min) * 1rem / var(--base-font-size) +
					(1vw - var(--min-font-viewport-width) / 100 * 1px) * 100 *
					(
						(var(--max) - var(--min)) /
							(var(--max-font-viewport-width) - var(--min-font-viewport-width))
					)
			);
			font-size: clamp(
				calc(var(--min) * 1rem / var(--base-font-size)),
				var(--liquid),
				calc(var(--max) * 1rem / var(--base-font-size))
			);
			line-height: calc(22 / 19);
			width: 74vw;
			border-spacing: 0;
			margin-top: 3vw;
			tr.bt {
				td {
					padding-bottom: 1vw;
				}
			}
			td {
				&:last-child {
					text-align: right;
				}
			}
			th {
				text-align: left;
				padding-bottom: 1vw;
				font-family: var(--ntr-font-family-bold);
				--min: 16;
				--max: 52;
				--liquid: calc(
					var(--min) * 1rem / var(--base-font-size) +
						(1vw - var(--min-font-viewport-width) / 100 * 1px) * 100 *
						(
							(var(--max) - var(--min)) /
								(
									var(--max-font-viewport-width) -
										var(--min-font-viewport-width)
								)
						)
				);
				font-size: clamp(
					calc(var(--min) * 1rem / var(--base-font-size)),
					var(--liquid),
					calc(var(--max) * 1rem / var(--base-font-size))
				);
				margin: 1vw 0;
				padding-top: 1vw;
				.small {
					--min: 16;
					--max: 38;
					font-size: clamp(
						calc(var(--min) * 1px),
						var(--liquid),
						calc(var(--max) * 1px)
					) !important;
				}
			}
			tr.total {
				td {
					font-weight: 700;
					padding-top: 1vw;
				}
			}
			td.border {
				border-top: 2px solid #303030;
			}
		}
		.bestedingen {
			display: grid;
			grid-template-columns: 1fr;
			grid-column-gap: 2.5vw;
			grid-row-gap: 2.5vw;
			align-items: flex-start;
			justify-items: stretch;
			margin: 0 0 5vw 0;
			@media (min-width: 767px) {
				grid-template-columns: 4fr 3fr;
			}
			table {
				width: auto;
				margin-top: 0;
				--min: 16;
				--max: 52;
				--liquid: calc(
					var(--min) * 1rem / var(--base-font-size) +
						(1vw - var(--min-font-viewport-width) / 100 * 1px) * 100 *
						(
							(var(--max) - var(--min)) /
								(
									var(--max-font-viewport-width) -
										var(--min-font-viewport-width)
								)
						)
				);
				font-size: clamp(
					calc(var(--min) * 1rem / var(--base-font-size)),
					var(--liquid),
					calc(var(--max) * 1rem / var(--base-font-size))
				);
			}
		}
		.grafiek {
			position: relative;
			#chart {
				position: relative;
				width: 80vw;
				height: auto;
				margin: 0 auto;
				z-index: 2;
				@media (min-width: 767px) {
					width: 24vw;
					height: 24vw;
				}
				svg {
					width: 100%;
					height: 100%;
					position: relative;
					z-index: 1;
				}
			}
			.legenda {
				position: absolute;
				top: -3.2vw;
				left: -3.2vw;
				width: 86vw;
				height: 86vw;
				background-image: url("../img/jaarrekening-grafiek-legenda.png");
				background-repeat: no-repeat;
				background-size: contain;
				z-index: 5;
				@media (min-width: 767px) {
					top: -0.8vw;
					left: -0.8vw;
					width: 26vw;
					height: 26vw;
				}
			}
		}
	}

	/* -- Speciaal -- */
	&.speciaal {
		width: 100%;
		text-align: center;
		margin: 0;
		padding: 3vw 0;
		color: var(--ntr-color-blue);
		background-color: white;
		font-family: var(--ntr-font-family);
		font-weight: 700;
		--min: 32;
		--max: 76;
		--liquid: calc(
			var(--min) * 1rem / var(--base-font-size) +
				(1vw - var(--min-font-viewport-width) / 100 * 1px) * 100 *
				(
					(var(--max) - var(--min)) /
						(var(--max-font-viewport-width) - var(--min-font-viewport-width))
				)
		);
		font-size: clamp(
			calc(var(--min) * 1rem / var(--base-font-size)),
			var(--liquid),
			calc(var(--max) * 1rem / var(--base-font-size))
		);
		.highlight {
			color: black;
		}
		h2 {
			margin: 0;
		}
	}
}