/**
 * Techni Team – merkelementen uit het brandbook.
 * Kleuren, lettertypes en maten komen uit theme.json (--wp--preset--* en --wp--custom--*).
 */

:root {
	--tt-lijn: var(--wp--custom--lijn--dikte, 12px);
	--tt-lijn-radius: var(--wp--custom--lijn--radius, 6rem);
	--tt-lijn-kleur: var(--wp--preset--color--oranje);
	--tt-r-klein: var(--wp--custom--radius--klein, 0.5rem);
	--tt-r-middel: var(--wp--custom--radius--middel, 1rem);
	--tt-r-hoek: var(--wp--custom--radius--hoek, 6rem);
	--tt-r-pill: var(--wp--custom--radius--pill, 999px);
}

/* ---------- Ruimte en afronding ----------
 * Volgens design_system/02 Verbeterd/Ruimte en afronding.pdf (vastgesteld 2026-10-09).
 * Ruimteschaal op het 8px-grid, in rem: 8 · 16 · 24 · 32 · 48 · 64 · 96 (spacing 10 t/m 70 in theme.json). Geen tussenwaarden.
 * Vaste stappen per schermformaat: desktop vanaf 1280px, tablet 600–1279px, mobiel tot 600px.
 *   Ruimte rond secties (spacing 70)  96 · 64 · 48     Zijkant van de pagina   48 · 32 · 24
 *   Paginakop onder de kop (spacing 60) 64 · 48 · 32  Binnenruimte card       32 · 32 · 24
 *   Grote hoek (foto's)                96 · 64 · 48     Tussen kolommen en cards 24 (overal)
 * Afronding: volledig rond (buttons, velden, tags, navigatiebalk) · 24 (tekstvak, open lijst) · 16 (cards, tegels, foto's)
 * · 8 (kleine beelden, iconen) · 4 (checkbox) · grote hoek. */
:root {
	--tt-ruimte-sectie: 3rem;
	--tt-ruimte-2xl: 2rem;
	--tt-zijkant: 1.5rem;
	--tt-ruimte-card: 1.5rem;
	--tt-hoek: 3rem;
}

@media (min-width: 600px) {
	:root {
		--tt-ruimte-sectie: 4rem;
		--tt-ruimte-2xl: 3rem;
		--tt-zijkant: 2rem;
		--tt-ruimte-card: 2rem;
		--tt-hoek: 4rem;
	}
}

@media (min-width: 1280px) {
	:root {
		--tt-ruimte-sectie: 6rem;
		--tt-ruimte-2xl: 4rem;
		--tt-zijkant: 3rem;
		--tt-hoek: 6rem;
	}
}

/* Tussen kolommen en cards altijd 24px, ook als in de editor een andere ruimte is gekozen. */
.wp-block-group.is-layout-grid,
.wp-block-columns.wp-block-columns {
	gap: var(--wp--custom--ruimte--kolom, 1.5rem);
}

/* ---------- Basis en toegankelijkheid ---------- */

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--tt-focus, #0062FF);
	outline-offset: 2px;
}

a {
	text-underline-offset: 0.15em;
	text-decoration-thickness: 1px;
}

a:hover {
	text-decoration-thickness: 2px;
}

::selection {
	background: var(--wp--preset--color--blauw);
	color: var(--wp--preset--color--donkerblauw);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition: none !important;
		animation: none !important;
		scroll-behavior: auto !important;
	}
}

/* ---------- Kop en hoofdmenu ----------
 * Volgens design_system/02 Verbeterd/Navigatie en footer.pdf (vastgesteld 2026-10-12). Opbouw in inc/navigatie.php,
 * gedrag in assets/js/navigatie.js.
 * Desktop (vanaf 1280px): logo links (40px), rechts de lichtblauwe balk (64px, rondom 8px) met menu-items van 48px
 * (Body M, 24px opzij, volledig rond) en Contact als primary, 8px na het laatste item. Kop 112px, na scrollen 96px.
 * States: hover, open en huidige pagina een vlak in blauw nuance 4; huidige pagina Bold; onderdeel van de huidige
 * pagina Bold zonder vlak. Uitklapmenu als de open lijst van een dropdown: wit, rand 1px nuance 4, afronding 24,
 * binnenruimte 8, items 48px; 8px onder de balk, kader en tekst gelijk met het onderdeel.
 * Tablet (600–1279px): logo, Contact en de button "Menu"; het menu opent als paneel van 400px vanaf rechts, met een
 * donkere laag over de pagina. Kop 96px, na scrollen 80px.
 * Mobiel (tot 600px): logo (32px) en "Menu"; het menu vult het scherm onder de kop, Contact onderaan. Kop 80px.
 * De kop blijft bovenaan (niet op een laag scherm) en krijgt na scrollen een lijn. */

.wp-site-blocks > main,
.wp-site-blocks > footer {
	margin-block-start: 0;
}

.wp-site-blocks > header:has(.tt-kop) {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
}

@media (max-height: 499px) {
	.wp-site-blocks > header:has(.tt-kop) {
		position: static;
	}
}

/* Ankers en focus niet onder de vaste kop (WCAG 2.4.11). */
/* Ankers: na het scrollen is de kop altijd compact (vanaf 1280px 97px, daaronder 81px). Een sectie over de volle breedte
 * (bijv. #formulier, #vacatures) komt direct onder de kop; een kop of blok binnen een sectie 16px eronder (21-10). */
:root {
	--tt-kop-compact: 5.0625rem;
}

@media (min-width: 1280px) {
	:root {
		--tt-kop-compact: 6.0625rem;
	}
}

/* Een link naar een sectie scrolt 32px verder dan de rand van de sectie: de bovenste 32px van de sectie valt onder
 * de kopbalk (2.36.2, besluit 21-10; was precies op de rand). */
.wp-block-post-content > .alignfull[id] {
	scroll-margin-top: -3rem;
}

html {
	scroll-padding-top: calc(var(--tt-kop-compact) + 1rem);
	scroll-behavior: smooth; /* een link naar een plek op dezelfde pagina scrolt soepel (Werken bij, 20-10); uit bij reduced motion */
}

.tt-naar-inhoud {
	position: absolute;
	top: 1rem;
	left: 1rem;
	z-index: 1000;
	transform: translateY(calc(-100% - 2rem));
}

.tt-naar-inhoud:focus-visible {
	transform: none;
}

.tt-kop {
	background: var(--wp--preset--color--off-white);
	border-bottom: 1px solid transparent;
	transition: border-color 0.15s ease;
}

.tt-kop.is-gescrold {
	border-bottom-color: var(--wp--preset--color--rand);
}

.tt-kop__binnen {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 1.5rem;
	max-width: calc(var(--wp--style--global--wide-size, 80rem) + 2 * var(--tt-zijkant));
	margin-inline: auto;
	padding: 1rem var(--tt-zijkant);
	transition: padding 0.15s ease;
}

@media (min-width: 600px) {
	.tt-kop__binnen {
		padding-block: 1.5rem;
	}

	.tt-kop.is-gescrold .tt-kop__binnen {
		padding-block: 1rem;
	}
}

.tt-kop__logo {
	flex: 0 0 auto;
	display: block;
	margin-right: auto;
}

.tt-kop__logo img {
	display: block;
	width: auto;
	height: 2rem; /* mobiel 32px */
}

@media (min-width: 600px) {
	.tt-kop__logo img {
		height: 2.5rem; /* desktop en tablet 40px */
	}
}

.tt-menu__lijst,
.tt-menu__sub {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tt-menu__link,
.tt-menu__sublink {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 3rem;
	margin: 0;
	border: 0;
	border-radius: var(--tt-r-pill);
	background: none;
	color: var(--wp--preset--color--donkerblauw);
	font-family: var(--wp--preset--font-family--plus-jakarta-sans);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
	line-height: var(--wp--custom--line-height--body-m);
	text-align: left;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

.tt-menu__link {
	padding: 0 1.5rem;
}

.tt-menu__link .tt-icoon {
	flex: 0 0 auto;
	width: 1rem;
	height: 1rem;
	transition: transform 0.15s ease;
}

.tt-menu__link[aria-expanded="true"] .tt-icoon {
	transform: rotate(180deg);
}

.tt-menu__item.is-actief > .tt-menu__link,
.tt-menu__item.is-huidig > .tt-menu__link,
.tt-menu__sublink.is-huidig {
	font-weight: 700;
}

.tt-menu__link:focus-visible,
.tt-menu__sublink:focus-visible {
	outline: 2px solid var(--tt-focus);
	outline-offset: 2px;
}

.tt-menu__sub {
	display: none;
}

.tt-menu__link[aria-expanded="true"] + .tt-menu__sub {
	display: block;
}

.tt-menuknop,
.tt-kop__contact {
	flex: 0 0 auto;
}

/* Menu-button: lichtblauw, 48px, tekst Button 16px Bold met icoon 20px rechts (24px links, 20px rechts). */
.tt-menuknop {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 3rem;
	padding: 0.75rem 1.25rem 0.75rem 1.5rem;
	border: 0;
	border-radius: var(--tt-r-pill);
	background: var(--wp--preset--color--lichtblauw);
	color: var(--wp--preset--color--donkerblauw);
	font-family: var(--wp--preset--font-family--plus-jakarta-sans);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.5;
	cursor: pointer;
}

.tt-menuknop:hover,
.tt-menuknop:active {
	background: var(--wp--preset--color--blauw);
}

.tt-menuknop:focus-visible {
	outline: 2px solid var(--tt-focus);
	outline-offset: 2px;
}

.tt-menuknop .tt-icoon {
	width: 1.25rem;
	height: 1.25rem;
}

.tt-menuknop .tt-icoon--kruis,
.tt-kop.is-menu-open .tt-menuknop .tt-icoon--menu {
	display: none;
}

.tt-kop.is-menu-open .tt-menuknop .tt-icoon--kruis {
	display: block;
}

.tt-kop__laag {
	position: fixed;
	inset: var(--tt-kop-h, 6rem) 0 0;
	z-index: 98;
	background: rgba(43, 19, 67, 0.4); /* donkerblauw 40% */
}

html.tt-menu-open {
	overflow: hidden;
}

/* Desktop: de balk. */
@media (min-width: 1280px) {
	.tt-kop .tt-menuknop,
	.tt-kop .tt-kop__contact,
	.tt-kop__laag {
		display: none;
	}

	.tt-menu__lijst {
		display: flex;
		align-items: center;
		padding: 0.5rem;
		border-radius: var(--tt-r-pill);
		background: var(--wp--preset--color--lichtblauw);
	}

	.tt-menu__item {
		position: relative;
	}

	.tt-menu__link:hover,
	.tt-menu__link[aria-expanded="true"],
	.tt-menu__item.is-huidig > .tt-menu__link {
		background: var(--wp--preset--color--blauw-4);
	}

	.tt-menu__contact {
		margin-left: 0.5rem;
	}

	/* Uitklapmenu: 8px onder de balk; kader gelijk met het vlak van het onderdeel, tekst met de tekst (24px in). */
	.tt-menu__sub {
		position: absolute;
		top: calc(100% + 1rem);
		left: 0;
		z-index: 10;
		box-sizing: border-box;
		width: max-content;
		min-width: 17.5rem;
		padding: 0.5rem;
		border: 1px solid var(--wp--preset--color--donkerblauw-4);
		border-radius: var(--wp--custom--radius--groot);
		background: var(--wp--preset--color--wit);
	}

	.tt-menu__sublink {
		padding: 0 calc(1rem - 1px); /* tekst op 24px van de rand: 8 + 1 + 15 */
	}

	.tt-menu__sublink:hover,
	.tt-menu__sublink:focus-visible {
		background: var(--wp--preset--color--blauw-4);
	}

	.tt-menu__sublink:focus-visible {
		outline-offset: -2px;
	}
}

/* Tablet en mobiel: menu-button; het menu als paneel of over het hele scherm. */
@media (max-width: 1279px) {
	.tt-menu {
		display: none;
	}

	.tt-kop.is-menu-open .tt-menu {
		position: fixed;
		top: var(--tt-kop-h, 6rem);
		right: 0;
		bottom: 0;
		z-index: 99;
		display: block;
		box-sizing: border-box;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 1.5rem var(--tt-zijkant) var(--tt-zijkant);
		background: var(--wp--preset--color--off-white);
	}

	.tt-menu__lijst {
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
	}

	/* Items: tekst op de kolom, het vlak valt 16px links (en rechts) erbuiten. Geen hover (touch). */
	.tt-menu__link,
	.tt-menu__sublink {
		width: calc(100% + 2rem);
		margin-inline: -1rem;
		padding: 0 1rem;
		white-space: normal;
	}

	.tt-menu__link {
		justify-content: space-between;
	}

	/* Alleen de huidige pagina krijgt een vlak; een open onderdeel niet. */
	.tt-menu__item.is-huidig > .tt-menu__link,
	.tt-menu__sublink.is-huidig {
		background: var(--wp--preset--color--blauw-4);
	}

	.tt-menu__link[aria-expanded="true"] + .tt-menu__sub {
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
		margin-top: 0.5rem;
	}

	.tt-menu__sublink {
		padding-left: 2rem; /* subitems 16px ingesprongen */
	}
}

@media (min-width: 600px) and (max-width: 1279px) {
	.tt-kop.is-menu-open .tt-menu {
		width: min(25rem, 100%); /* paneel van 400px vanaf rechts */
		padding-inline: 2rem;
	}

	.tt-menu__contact {
		display: none; /* Contact staat op tablet in de kop */
	}
}

@media (max-width: 599px) {
	.tt-kop__contact,
	.tt-kop__laag {
		display: none !important;
	}

	.tt-kop.is-menu-open .tt-menu {
		left: 0;
	}

	.tt-menu__contact {
		margin-top: 1rem;
	}

	.tt-menu__contact .wp-element-button {
		width: 100%;
	}
}

/* ---------- Voet ----------
 * Drie lagen op lichtblauw, gescheiden door een lijn (donkerblauw nuance 4, 1px), op een raster van 4 kolommen:
 * 1. contact (kolom 1) en nieuwsbrief (kolom 3, max. 480px), elk kop (Heading 4) · tekst (Body S) · label (Body M
 *    Bold) · actie (48px), op één lijn; ruimte 8 / 16 / 8.
 * 2. navigatie: maximaal vier kolommen met een kop in Heading 5, links in Body S met 8px ertussen.
 * 3. juridisch (Caption) op één regel: gegevens links, beleidslinks rechts. Certificaten staan in laag 1, naast contact.
 * Alle tekst en links donkerblauw (bodytekst en kobalt halen op lichtblauw geen 4,5:1).
 * Ruimte: boven 64 / 48 / 32, rond de eerste lijn 48 (mobiel 32), rond de laatste 24. */

.tt-voet {
	position: relative;
	overflow: hidden;
	padding: 4rem var(--tt-zijkant) 1.5rem;
	background: var(--wp--preset--color--lichtblauw);
	color: var(--wp--preset--color--donkerblauw);
	--tt-tertiary: var(--wp--preset--color--donkerblauw);
	--tt-tertiary-hover: var(--wp--preset--color--donkerblauw);
	--tt-veld-hulp: var(--wp--preset--color--donkerblauw);
}

@media (max-width: 1279px) {
	.tt-voet {
		padding-top: 3rem;
	}
}

@media (max-width: 599px) {
	.tt-voet {
		padding-top: 2rem;
	}
}

.tt-voet__binnen {
	max-width: var(--wp--style--global--wide-size, 80rem);
	margin-inline: auto;
}

.tt-voet a {
	color: var(--wp--preset--color--donkerblauw);
	text-decoration: none;
}

.tt-voet a:hover {
	text-decoration: underline;
}

.tt-voet p {
	margin: 0;
}

.tt-voet__laag--1 {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-template-rows: auto auto auto;
	column-gap: 1.5rem;
	padding-bottom: 3rem;
}

.tt-voet__contact,
.tt-voet__nieuwsbrief {
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 3;
	align-content: start;
}

.tt-voet__contact {
	grid-column: 1 / 3;
}

.tt-voet__nieuwsbrief {
	grid-column: 3 / 5;
	max-width: 30rem;
}

/* Certificaten in de bovenste laag, naast contact (kolom 3–4), verticaal gecentreerd op het contactblok en rechts uitgelijnd. */
.tt-voet__laag--1 > .tt-voet__certificaten {
	grid-column: 3 / 5;
	grid-row: 1 / span 3;
	align-self: center;
	flex-wrap: wrap;
	justify-content: flex-end;
}

.tt-voet .tt-voet__h4 {
	margin: 0;
	font-family: var(--wp--preset--font-family--plus-jakarta-sans);
	font-size: var(--wp--preset--font-size--kop-4);
	font-weight: 700;
	line-height: var(--wp--custom--line-height--kop-4);
	letter-spacing: 0;
	color: var(--wp--preset--color--donkerblauw);
}

.tt-voet .tt-voet__tekst {
	margin-top: 0.5rem;
	font-size: var(--wp--preset--font-size--body-s);
	line-height: var(--wp--custom--line-height--body-s);
}

.tt-voet .tt-voet__label,
.tt-voet .tt-nieuwsbrief > label {
	margin-top: 1rem;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	line-height: var(--wp--custom--line-height--body-m);
}

.tt-voet .tt-nieuwsbrief {
	align-self: start;
}

.tt-social {
	display: flex;
	gap: 0.5rem;
	margin: 0.5rem 0 0 -0.25rem; /* het icoon (40px) staat op de lijn, het klikvlak (48px) valt erbuiten */
	padding: 0;
	list-style: none;
}

.tt-social__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: var(--tt-r-klein);
	color: var(--wp--preset--color--donkerblauw);
}

.tt-social__icoon {
	width: 2.5rem;
	height: 2.5rem;
	background-color: currentColor;
	-webkit-mask: var(--m) center / contain no-repeat;
	mask: var(--m) center / contain no-repeat;
}

.tt-social__icoon.is-linkedin { --m: url("../images/iconen/set/18.svg"); }
.tt-social__icoon.is-facebook { --m: url("../images/iconen/set/19.svg"); }
.tt-social__icoon.is-instagram { --m: url("../images/iconen/set/20.svg"); }

/* Iconen in de kop (chevron, menu, sluiten) uit de set, als masker in de tekstkleur. */
.tt-icoon {
	display: inline-block;
	flex: 0 0 auto;
	background-color: currentColor;
	-webkit-mask: var(--m) center / contain no-repeat;
	mask: var(--m) center / contain no-repeat;
}

.tt-icoon--chevron { --m: url("../images/iconen/set/03.svg"); }
.tt-icoon--menu { --m: url("../images/iconen/set/05.svg"); }
.tt-icoon--kruis { --m: url("../images/iconen/set/06.svg"); }

.tt-social__link:is(:hover, :active) {
	color: var(--wp--preset--color--oranje-1); /* Iconografie: social hover en active oranje nuance 1, geen vlak */
}

.tt-social__link:focus-visible {
	outline: 2px solid var(--tt-focus);
	outline-offset: 0;
}

.tt-voet__laag--2 {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 3rem 1.5rem;
	padding-block: 3rem;
	border-top: 1px solid var(--wp--preset--color--donkerblauw-4);
}

.tt-voet__kop {
	margin: 0 0 1rem;
	font-family: var(--wp--preset--font-family--plus-jakarta-sans);
	font-size: var(--wp--preset--font-size--kop-5) !important;
	font-weight: 700;
	line-height: var(--wp--custom--line-height--kop-5);
	letter-spacing: 0;
	color: var(--wp--preset--color--donkerblauw);
}

.tt-voet__links {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--body-s);
	line-height: var(--wp--custom--line-height--body-s);
}

.tt-voet__laag--3 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
	padding-top: 1.5rem;
	border-top: 1px solid var(--wp--preset--color--donkerblauw-4);
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--wp--custom--line-height--caption);
}

/* Gegevens links, beleidslinks rechts, op één regel; op smallere schermen breken ze onder elkaar af. */
.tt-voet__juridisch {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.25rem 1.5rem;
}

/* Copyrightregel breekt alleen tussen de onderdelen af, nooit midden in een onderdeel. */
.tt-voet__juridisch p span {
	white-space: nowrap;
}

.tt-voet__juridisch-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tt-voet__certificaten {
	display: flex;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Keurmerken en certificaten (voet en homepage): 96px hoog, het brede VZVZ-logo 48px. */
.tt-cert-logo {
	display: block;
	width: auto;
	max-width: 100%;
	height: 6rem;
}

.tt-cert-logo--breed {
	height: 3rem;
}

.tt-voet__certificaten {
	align-items: center;
}

/* In de voet (desktop, vanaf 1280px): 112px, het brede VZVZ-logo 56px; de rij (ca. 530px) past in de twee rechterkolommen (580px).
 * Op tablet en mobiel schalen ze mee (zie onder). */
.tt-voet__certificaten .tt-cert-logo {
	height: 7rem;
}

.tt-voet__certificaten .tt-cert-logo--breed {
	height: 3.5rem;
}

/* Reeks op de homepage, onder de kaarten van Veiligheid & vertrouwen: gecentreerd, gelijke tussenruimte. */
.tt-certificaten {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 2rem 4rem;
	margin: 3rem 0 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 599px) {
	.tt-certificaten {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		justify-items: center;
		gap: 2rem 1.5rem;
	}
}

/* Keurmerk naast de sectiekop (De huisartsenpraktijk, Veiligheid & vertrouwen). */
.tt-keurmerk-rij {
	align-items: center;
	margin-bottom: 0;
}

.tt-keurmerk-rij__foto img {
	display: block;
	width: auto;
	height: 8rem;
	margin-inline: 0 0;
}

@media (min-width: 782px) {
	.tt-keurmerk-rij__foto img {
		margin-left: auto;
	}
}

/* Tablet: contact boven de nieuwsbrief, navigatie 2 × 2. */
@media (max-width: 1279px) {
	.tt-voet__laag--1 {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
		row-gap: 2rem;
	}

	.tt-voet__contact,
	.tt-voet__nieuwsbrief {
		display: block;
		grid-column: 1;
		grid-row: auto;
	}

	.tt-voet__nieuwsbrief {
		max-width: 30rem;
	}

	.tt-voet__social-label,
	.tt-voet__label {
		display: block;
	}

	.tt-voet__laag--2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Onderste gedeelte gecentreerd (tablet en mobiel). */
	.tt-voet__laag--3 {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.tt-voet__juridisch,
	.tt-voet__juridisch-links {
		justify-content: center;
	}

	/* Meer ruimte tussen de gegevensregel en de beleidslinks (16px). */
	.tt-voet__juridisch {
		row-gap: 1rem;
	}

	.tt-voet__laag--1 > .tt-voet__certificaten {
		grid-column: 1;
		grid-row: auto;
		align-self: start;
		justify-content: flex-start;
	}
}

/* Mobiel: alles onder elkaar; tijden en e-mail op twee regels; navigatie 2 kolommen; certificaten op één rij. */
@media (max-width: 599px) {
	.tt-voet__laag--1 {
		padding-bottom: 2rem;
	}

	.tt-voet__scheiding {
		display: none;
	}

	.tt-voet__tekst a {
		display: block;
	}

	.tt-voet__laag--2 {
		gap: 2rem 1.5rem;
		padding-block: 2rem;
	}

	/* Certificaten op één rij: de hoogte schaalt mee met de breedte (4,3 hoogtes aan logo's + 3 × 12px ertussen), maximaal 80px. */
	.tt-voet__certificaten {
		flex-wrap: nowrap;
		gap: 0.75rem;
	}

	.tt-voet__certificaten .tt-cert-logo {
		height: min(5rem, calc((100vw - 3rem - 2.25rem) / 4.3));
	}

	.tt-voet__certificaten .tt-cert-logo--breed {
		height: min(2.5rem, calc((100vw - 3rem - 2.25rem) / 8.6));
	}
}

/* Tablet (600–1279px): certificaten op één rij naast het contactblok, rechts uitgelijnd. Het contactblok krijgt zijn
 * natuurlijke breedte (tijden en e-mail op twee regels, zoals op mobiel); de logo's schalen mee met de rest van de breedte
 * (4,3 hoogtes aan logo's + 3 × 12px ertussen), maximaal 96px (VZVZ de helft). */
@media (min-width: 600px) and (max-width: 1279px) {
	.tt-voet__laag--1 {
		grid-template-columns: max-content minmax(0, 1fr);
		column-gap: 2rem;
	}

	.tt-voet__scheiding {
		display: none;
	}

	.tt-voet__tekst a {
		display: block;
	}

	.tt-voet__laag--1 > .tt-voet__certificaten {
		grid-column: 2;
		grid-row: 1;
		align-self: center;
		justify-content: flex-end;
		flex-wrap: nowrap;
		gap: 0.75rem;
	}

	.tt-voet__certificaten .tt-cert-logo {
		height: min(6rem, calc((100vw - 3rem - 12.5rem - 2rem - 2.25rem) / 4.3));
	}

	.tt-voet__certificaten .tt-cert-logo--breed {
		height: min(3rem, calc((100vw - 3rem - 12.5rem - 2rem - 2.25rem) / 8.6));
	}
}

/* ---------- Buttons ----------
 * Volgens design_system/02 Verbeterd/Buttons.pdf (vastgesteld 2026-10-06, aangevuld 2026-10-14).
 * Varianten (blokstijl op de button): primary (standaard), secondary (Outline) en tertiary. Contrast- en inversevarianten
 * zijn geen keuze: die volgen automatisch uit de achtergrond (zie Achtergronden). In formulieren altijd de kobalt primary.
 * Opbouw op elk schermformaat: 48px hoog (10px padding + 2px rand boven en onder, regelafstand 24px), 24px links en
 * rechts, volledig rond, Plus Jakarta Sans Bold 16px, sentence case. De hoogte volgt uit de padding (WCAG 1.4.12).
 * Breedte groeit mee met de tekst (geen vaste formaten); tekst altijd op één regel en nooit afgekapt. Langer dan
 * 312px: andere buttontekst kiezen. Tussen buttons 16px; op mobiel onder elkaar, primary bovenaan.
 * Icoon (Iconografie: 16px, 8px van de tekst, in de tekstkleur), automatisch op basis van de link:
 * pijl → naar een andere pagina, download bij een bestand, geen icoon bij bellen, e-mail, een anker of versturen. */

:root {
	--tt-button-max: 19.5rem; /* 312px: langere teksten passen niet, dan een andere buttontekst */
	/* inactive: voor primary en secondary gelijk (bodytekst op vlak 4,75:1); tertiary heeft geen inactive-state */
	--tt-button-uit: var(--wp--preset--color--vlak);
	--tt-button-uit-tekst: var(--wp--preset--color--bodytekst);
	/* primary / secondary */
	--tt-button: var(--wp--preset--color--kobalt);
	--tt-button-tekst: var(--wp--preset--color--wit);
	--tt-button-vlak: var(--wp--preset--color--wit);
	--tt-button-hover: var(--wp--custom--kleur--kobalt-hover);
	--tt-button-actief: var(--wp--custom--kleur--kobalt-actief);
	--tt-button-vlak-hover: var(--wp--preset--color--blauw-4);
	--tt-button-vlak-actief: var(--wp--preset--color--lichtblauw);
	/* tertiary en links in lopende tekst */
	--tt-tertiary: var(--wp--preset--color--kobalt);
	--tt-tertiary-hover: var(--wp--custom--kleur--kobalt-hover);
	--tt-tertiary-actief: var(--wp--custom--kleur--kobalt-actief);
	/* focusring: 2px op 2px afstand; kleur per achtergrond (WCAG 1.4.11, minimaal 3:1) */
	--tt-focus: var(--wp--preset--color--geselecteerd);
	--tt-icoon-download: url("../images/iconen/set/08.svg");
}

/* Basis: primary. */
.wp-element-button,
.wp-block-button .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	vertical-align: middle;
	box-sizing: border-box;
	max-width: 100%;
	white-space: nowrap;
	padding: calc(0.75rem - 2px) calc(1.5rem - 2px);
	border: 2px solid var(--tt-button);
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--tt-button);
	color: var(--tt-button-tekst);
	font-family: var(--wp--preset--font-family--plus-jakarta-sans);
	font-size: 1rem; /* buttontekst altijd 16px, los van Body M: de buttonhoogte verandert nooit */
	font-weight: 700;
	line-height: 1.5; /* 24px */
	letter-spacing: 0;
	text-align: center;
	text-transform: none;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.wp-element-button:hover,
.wp-block-button .wp-block-button__link:hover {
	border-color: var(--tt-button-hover);
	background-color: var(--tt-button-hover);
	color: var(--tt-button-tekst);
}

.wp-element-button:active,
.wp-block-button .wp-block-button__link:active {
	border-color: var(--tt-button-actief);
	background-color: var(--tt-button-actief);
	color: var(--tt-button-tekst);
}

/* Focus: alleen bij bediening met het toetsenbord (niet bij klikken). */
.wp-element-button:focus-visible,
.wp-block-button .wp-block-button__link:focus-visible {
	outline: 2px solid var(--tt-focus);
	outline-offset: 2px;
}

/* Secondary: wit vlak met rand. */
.wp-block-button.is-style-outline > .wp-block-button__link {
	border-color: var(--tt-button);
	background-color: var(--tt-button-vlak);
	color: var(--tt-button);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	border-color: var(--tt-button-hover);
	background-color: var(--tt-button-vlak-hover);
	color: var(--tt-button-hover);
}

.wp-block-button.is-style-outline > .wp-block-button__link:active {
	border-color: var(--tt-button-actief);
	background-color: var(--tt-button-vlak-actief);
	color: var(--tt-button-actief);
}

/* Tertiary: dezelfde vorm (48px, 24px opzij, volledig rond), maar zonder vlak en rand; onderstreept bij hover.
 * De tekst staat op de lijn van de tekstkolom: de onzichtbare vorm valt 24px links buiten de kolom (optische
 * uitlijning) en wordt alleen zichtbaar als focusring. */
.wp-block-button.is-style-tertiary > .wp-block-button__link {
	border-color: transparent;
	background: none;
	color: var(--tt-tertiary);
}

.wp-block-buttons:not(.is-content-justification-center):not(.is-content-justification-right) > .wp-block-button.is-style-tertiary:first-child {
	margin-inline-start: -1.5rem;
}

/* Lege foutregel in een fieldset van de planner (Gebruik je Vcare al?) blijft verborgen. */
.tt-planner .tt-formulier fieldset > .tt-veld__fout:empty {
	display: none;
}

/* Kop: lidwoord en woord bij elkaar (Vcare, 23-10); op mobiel mag het breken, daar past het niet. */
@media (min-width: 768px) {
	.tt-nb {
		white-space: nowrap;
	}
}

/* Excellent partner (Vcare, 23-10): kop, daaronder de drie rollen als uitklappers en één card met wat het betekent. */
.tt-partner-kop {
	margin-bottom: 2.5rem;
}

.tt-partner-indeling {
	align-items: flex-start;
}

@media (min-width: 782px) {
	.wp-block-columns.tt-partner-indeling {
		column-gap: 5rem !important;
	}
}

.tt-partner-indeling__rollen > .wp-block-details:first-child {
	margin-top: 0;
}

.wp-block-button.is-style-tertiary > .wp-block-button__link:hover {
	border-color: transparent;
	background: none;
	color: var(--tt-tertiary-hover);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.25em;
}

.wp-block-button.is-style-tertiary > .wp-block-button__link:active {
	border-color: transparent;
	background: none;
	color: var(--tt-tertiary-actief);
}

/* Inactive (primary en secondary): niet klikbaar. Voor links met aria-disabled="true" of de klasse is-disabled,
 * en uitgeschakelde formulierbuttons. */
:is(.wp-element-button, .wp-block-button__link):is(:disabled, [aria-disabled="true"]),
.wp-block-button.is-disabled > .wp-block-button__link,
.wp-block-button.is-style-outline:is(.is-disabled, :has(> [aria-disabled="true"])) > .wp-block-button__link {
	pointer-events: none;
	cursor: default;
	border-color: var(--tt-button-uit);
	background-color: var(--tt-button-uit);
	color: var(--tt-button-uit-tekst);
}

/* Icoon in een button: pijl → naar een andere pagina, download bij een bestand. Rechts van de tekst. */
.wp-block-button__link[href]::after {
	content: "";
	flex: 0 0 auto;
	width: 1rem;
	height: 1rem;
	background-color: currentColor;
	-webkit-mask: var(--tt-icoon-pijl) center / contain no-repeat;
	mask: var(--tt-icoon-pijl) center / contain no-repeat;
}

.wp-block-button__link:is([href^="tel:"], [href^="mailto:"], [href^="#"], [href=""])::after {
	content: none;
}

.wp-block-button__link:is([download], [href$=".pdf" i], [href$=".zip" i], [href$=".exe" i], [href$=".msi" i], [href$=".dmg" i], [href$=".docx" i], [href$=".xlsx" i])::after {
	-webkit-mask-image: var(--tt-icoon-download);
	mask-image: var(--tt-icoon-download);
}

/* Pijl beweegt mee (2.44.0): bij hover en toetsenbordfocus schuift alleen de pijl 4px in zijn richting (→ naar rechts,
 * ← bij "Terug" naar links), ease-out, en weer terug (sinds 2.47.0 in 1 s, gelijk met de onderstreping; was 0,2 s). Alleen transform: de button verandert niet van maat en de
 * tekst blijft staan. Hover alleen met een muis (op touch blijft hover anders "hangen"); toetsenbord krijgt hetzelfde
 * via focus. Niet bij download, inactive of "minder beweging". In een klikbare card beweegt de pijl bij hover op de card. */
:root {
	--tt-pijl-stap: 0.25rem;
	--tt-pijl-duur: 1s;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--tt-pijl-stap: 0px;
	}
}

.wp-block-button__link[href] {
	--tt-pijl-x: var(--tt-pijl-stap);
}

/* 2.45.0: ook de pijl in icoon-buttons (Vorige/Volgende, niet Zoeken), in de paginering en naast de titel van een card
 * (tegels, Oplossingen); naar links bij Vorige. */
.tt-icoonbutton:not(.is-zoeken),
.wp-block-query-pagination-next,
:is(.is-style-kaart, .is-style-kaart-hoek) > .wp-block-image:first-child + .wp-block-heading:last-child a,
.tt-titelpijl {
	--tt-pijl-x: var(--tt-pijl-stap);
}

.tt-terug a,
.tt-icoonbutton.is-vorige,
.wp-block-query-pagination-previous {
	--tt-pijl-x: calc(-1 * var(--tt-pijl-stap));
}

.tt-icoonbutton::before,
.wp-block-query-pagination :is(.wp-block-query-pagination-previous, .wp-block-query-pagination-next)::before,
:is(.is-style-kaart, .is-style-kaart-hoek) > .wp-block-image:first-child + .wp-block-heading:last-child a::before,
.tt-titelpijl::before {
	transition: transform var(--tt-pijl-duur) cubic-bezier(0.2, 0, 0, 1);
}

@media (hover: hover) and (pointer: fine) {
	.tt-icoonbutton:not(.is-zoeken):hover::before,
	.wp-block-query-pagination :is(.wp-block-query-pagination-previous, .wp-block-query-pagination-next):hover::before,
	:is(.is-style-kaart, .is-style-kaart-hoek):hover > .wp-block-image:first-child + .wp-block-heading:last-child a::before,
	:is(.is-style-kaart, .is-style-kaart-hoek):hover > .wp-block-heading .tt-titelpijl::before {
		transform: translateX(var(--tt-pijl-x));
	}
}

.tt-icoonbutton:not(.is-zoeken):focus-visible::before,
.wp-block-query-pagination :is(.wp-block-query-pagination-previous, .wp-block-query-pagination-next):focus-visible::before,
:is(.is-style-kaart, .is-style-kaart-hoek) > .wp-block-image:first-child + .wp-block-heading:last-child a:focus-visible::before,
.tt-titelpijl:focus-visible::before {
	transform: translateX(var(--tt-pijl-x));
}

.wp-block-button__link:is([download], [href$=".pdf" i], [href$=".zip" i], [href$=".exe" i], [href$=".msi" i], [href$=".dmg" i], [href$=".docx" i], [href$=".xlsx" i], [aria-disabled="true"]),
.wp-block-button.is-disabled > .wp-block-button__link {
	--tt-pijl-x: 0px;
}

.wp-block-button__link[href]::after,
.tt-terug a::before {
	transition: transform var(--tt-pijl-duur) cubic-bezier(0.2, 0, 0, 1);
}

@media (hover: hover) and (pointer: fine) {
	.wp-block-button__link[href]:hover::after,
	:is(.is-style-kaart, .is-style-kaart-hoek):has(> .wp-block-image:first-child:not(.tt-icoon)):hover .wp-block-button__link[href]::after,
	.tt-terug a:hover::before {
		transform: translateX(var(--tt-pijl-x));
	}
}

.wp-block-button__link[href]:focus-visible::after,
:is(.is-style-kaart, .is-style-kaart-hoek):has(> .wp-block-heading a:focus-visible) .wp-block-button__link[href]::after,
.tt-terug a:focus-visible::before {
	transform: translateX(var(--tt-pijl-x));
}

/* Groep buttons: 16px ertussen. Op mobiel onder elkaar, primary bovenaan; volle breedte is een keuze op de groep. */
.wp-block-buttons.wp-block-buttons {
	gap: 1rem;
}

@media (max-width: 599px) {
	.wp-block-buttons.wp-block-buttons {
		flex-direction: column;
		align-items: flex-start;
	}

	.wp-block-buttons.is-content-justification-center {
		align-items: center;
	}

	.wp-block-buttons.is-style-volle-breedte-mobiel {
		align-items: stretch;
	}

	.wp-block-buttons.is-style-volle-breedte-mobiel > .wp-block-button:not(.is-style-tertiary) > .wp-block-button__link {
		width: 100%;
	}
}

/* Icoon-button: rond, 48 × 48px, kleuren en states van primary (standaard) of secondary (is-secondary).
 * Alleen met de iconen Zoeken, Vorige en Volgende (20px, Iconografie) en altijd met een verborgen tekstlabel. */
.tt-icoonbutton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	box-sizing: border-box;
	width: 3rem;
	height: 3rem;
	padding: 0;
	border: 2px solid var(--tt-button);
	border-radius: 50%;
	background: var(--tt-button);
	color: var(--tt-button-tekst);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.tt-icoonbutton::before {
	content: "";
	width: 1.25rem;
	height: 1.25rem;
	background-color: currentColor;
	-webkit-mask: var(--tt-icoon, var(--tt-icoon-pijl)) center / contain no-repeat;
	mask: var(--tt-icoon, var(--tt-icoon-pijl)) center / contain no-repeat;
}

.tt-icoonbutton.is-vorige {
	--tt-icoon: var(--tt-icoon-pijl-links);
}

.tt-icoonbutton.is-zoeken {
	--tt-icoon: var(--tt-icoon-zoeken);
}

.tt-icoonbutton:hover {
	border-color: var(--tt-button-hover);
	background: var(--tt-button-hover);
}

.tt-icoonbutton:active {
	border-color: var(--tt-button-actief);
	background: var(--tt-button-actief);
}

.tt-icoonbutton.is-secondary {
	background: var(--tt-button-vlak);
	color: var(--tt-button);
}

.tt-icoonbutton.is-secondary:hover {
	background: var(--tt-button-vlak-hover);
	color: var(--tt-button-hover);
}

.tt-icoonbutton.is-secondary:active {
	background: var(--tt-button-vlak-actief);
	color: var(--tt-button-actief);
}

.tt-icoonbutton:focus-visible {
	outline: 2px solid var(--tt-focus);
	outline-offset: 2px;
}

/* Inactief (bijv. Vorige aan het begin van een schuifrij): vlak met bodytekst, zoals inactive buttons. */
.tt-icoonbutton:disabled {
	border-color: var(--tt-button-uit);
	background: var(--tt-button-uit);
	color: var(--tt-button-uit-tekst);
	cursor: default;
	pointer-events: none;
}

:root {
	--tt-icoon-zoeken: url("../images/iconen/set/04.svg");
}

/* Link in lopende tekst: altijd onderstreept (kobalt verschilt te weinig van bodytekst, WCAG 1.4.1), kleur volgens
 * dezelfde regel als tertiary; hover dikkere onderstreping; focus een ring om de tekst in de focuskleur. */
:where(p, li, td, dd, figcaption, .wp-block-quote) a:where(:not(.wp-element-button):not(.wp-block-button__link)) {
	color: var(--tt-tertiary);
	text-decoration: underline;
}

:where(p, li, td, dd, figcaption, .wp-block-quote) a:where(:not(.wp-element-button):not(.wp-block-button__link)):hover {
	color: var(--tt-tertiary-hover);
	text-decoration-thickness: 2px;
}

a:focus-visible {
	outline: 2px solid var(--tt-focus);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Achtergronden (WCAG). De contrastvarianten zijn geen keuze in de editor: ze worden automatisch gebruikt waar
 * de standaardkleur te weinig contrast heeft met de achtergrond.
 * - Primary en secondary: de vorm (vlak of rand) minimaal 3:1 met de achtergrond (1.4.11). Kobalt haalt dat niet
 *   op blauw-1/2/3 en oranje-1/2 → contrastvariant (donkerblauw). Ook op oranje: daar haalt de focusring #0062FF geen
 *   3:1 (2,79:1) en kobalt als tekst geen 4,5:1 (actieblok, Overige componenten).
 * - Tertiary is alleen tekst (16px bold is geen grote tekst): minimaal 4,5:1 (1.4.3). Kobalt haalt dat niet op
 *   blauw, lichtblauw (ook kaarten), oranje, oranje-3, rand, vlak en de donkere blauw/oranje-nuances → donkerblauw.
 * - Donkere vlakken (donkerblauw en nuances, kobalt, bodytekst): daar haalt geen van beide 3:1 → inverse buttons
 *   (primary wit met donkerblauwe tekst, secondary transparant met witte rand en tekst, tertiary wit).
 * - Focusring #0062FF minimaal 3:1: anders donkerblauw (blauw, oranje en nuances) of wit (donkerblauwe nuances,
 *   kobalt, bodytekst).
 * Elke achtergrond zet alle drie zelf, zodat een kaart binnen een sectie weer de juiste kleuren krijgt. */

/* Primary en secondary: standaard. */
:is(.has-wit-background-color, .has-off-white-background-color, .has-blauw-background-color, .has-lichtblauw-background-color,
	.has-blauw-4-background-color, .has-oranje-3-background-color, .has-oranje-4-background-color,
	.has-rand-background-color, .has-vlak-background-color, [class*="is-style-sectie-"], .is-style-kaart, .is-style-kaart-hoek) {
	--tt-button: var(--wp--preset--color--kobalt);
	--tt-button-tekst: var(--wp--preset--color--wit);
	--tt-button-vlak: var(--wp--preset--color--wit);
	--tt-button-hover: var(--wp--custom--kleur--kobalt-hover);
	--tt-button-actief: var(--wp--custom--kleur--kobalt-actief);
	--tt-button-vlak-hover: var(--wp--preset--color--blauw-4);
	--tt-button-vlak-actief: var(--wp--preset--color--lichtblauw);
}

/* Primary en secondary: contrastvariant. */
:is(.has-blauw-1-background-color, .has-blauw-2-background-color, .has-blauw-3-background-color,
	.has-oranje-background-color, .has-oranje-1-background-color, .has-oranje-2-background-color, [class*="is-style-sectie-oranje"]) {
	--tt-button: var(--wp--preset--color--donkerblauw);
	--tt-button-tekst: var(--wp--preset--color--wit);
	--tt-button-vlak: var(--wp--preset--color--wit);
	--tt-button-hover: var(--wp--preset--color--donkerblauw-3);
	--tt-button-actief: var(--wp--preset--color--donkerblauw-4);
	--tt-button-vlak-hover: var(--wp--preset--color--vlak);
	--tt-button-vlak-actief: var(--wp--preset--color--rand);
}

/* Tertiary: standaard. */
:is(.has-wit-background-color, .has-off-white-background-color, .has-blauw-4-background-color, .has-oranje-4-background-color,
	[class*="is-style-sectie-blauw-licht"], [class*="is-style-sectie-off-white"]) {
	--tt-tertiary: var(--wp--preset--color--kobalt);
	--tt-tertiary-hover: var(--wp--custom--kleur--kobalt-hover);
	--tt-tertiary-actief: var(--wp--custom--kleur--kobalt-actief);
}

/* Tertiary: contrastvariant. */
:is(.has-blauw-background-color, .has-lichtblauw-background-color, .has-blauw-1-background-color, .has-blauw-2-background-color,
	.has-blauw-3-background-color, .has-oranje-background-color, .has-oranje-1-background-color, .has-oranje-2-background-color,
	.has-oranje-3-background-color, .has-rand-background-color, .has-vlak-background-color,
	[class*="is-style-sectie-blauw"]:not([class*="is-style-sectie-blauw-licht"]), [class*="is-style-sectie-lichtblauw"],
	[class*="is-style-sectie-oranje"], .is-style-kaart:not(.has-background), .is-style-kaart-hoek:not(.has-background)) {
	--tt-tertiary: var(--wp--preset--color--donkerblauw);
	--tt-tertiary-hover: var(--wp--preset--color--donkerblauw-3);
	--tt-tertiary-actief: var(--wp--preset--color--donkerblauw-4);
}

/* Focusring: standaard (#0062FF). */
:is(.has-wit-background-color, .has-off-white-background-color, .has-lichtblauw-background-color, .has-blauw-4-background-color,
	.has-oranje-3-background-color, .has-oranje-4-background-color, .has-donkerblauw-background-color, .has-rand-background-color,
	.has-vlak-background-color, [class*="is-style-sectie-blauw-licht"], [class*="is-style-sectie-lichtblauw"],
	[class*="is-style-sectie-off-white"], [class*="is-style-sectie-donkerblauw"], .is-style-kaart:not(.has-background),
	.is-style-kaart-hoek:not(.has-background)) {
	--tt-focus: var(--wp--preset--color--geselecteerd);
}

/* Focusring: donkerblauw. */
:is(.has-blauw-background-color, .has-blauw-1-background-color, .has-blauw-2-background-color, .has-blauw-3-background-color,
	.has-oranje-background-color, .has-oranje-1-background-color, .has-oranje-2-background-color,
	[class*="is-style-sectie-blauw"]:not([class*="is-style-sectie-blauw-licht"]), [class*="is-style-sectie-oranje"]) {
	--tt-focus: var(--wp--preset--color--donkerblauw);
}

/* Focusring: wit. */
:is(.has-donkerblauw-1-background-color, .has-donkerblauw-2-background-color, .has-donkerblauw-3-background-color,
	.has-donkerblauw-4-background-color, .has-kobalt-background-color, .has-bodytekst-background-color) {
	--tt-focus: var(--wp--preset--color--wit);
}

/* Inverse buttons op donkere vlakken (contrast met donkerblauw: wit 16,5:1, blauw-4 14,4:1, lichtblauw 11,8:1). */
:is(.has-donkerblauw-background-color, .has-donkerblauw-1-background-color, .has-donkerblauw-2-background-color,
	.has-donkerblauw-3-background-color, .has-donkerblauw-4-background-color, .has-kobalt-background-color,
	.has-bodytekst-background-color, [class*="is-style-sectie-donkerblauw"]) {
	--tt-button: var(--wp--preset--color--wit);
	--tt-button-tekst: var(--wp--preset--color--donkerblauw);
	--tt-button-vlak: transparent;
	--tt-button-hover: var(--wp--preset--color--blauw-4);
	--tt-button-actief: var(--wp--preset--color--lichtblauw);
	--tt-button-vlak-hover: var(--wp--preset--color--donkerblauw-2); /* tinten uit het brandbook, geen transparantie */
	--tt-button-vlak-actief: var(--wp--preset--color--donkerblauw-3);
	--tt-tertiary: var(--wp--preset--color--wit);
	--tt-tertiary-hover: var(--wp--preset--color--blauw-4);
	--tt-tertiary-actief: var(--wp--preset--color--lichtblauw);
}

/* Secondary contrast, active: tekst en rand donkerblauw op rand (11,43:1; nuance 4 haalt daar geen 4,5:1). */
:is(.has-blauw-1-background-color, .has-blauw-2-background-color, .has-blauw-3-background-color,
	.has-oranje-background-color, .has-oranje-1-background-color, .has-oranje-2-background-color, [class*="is-style-sectie-oranje"])
	.wp-block-button.is-style-outline > .wp-block-button__link:active {
	border-color: var(--wp--preset--color--donkerblauw);
	color: var(--wp--preset--color--donkerblauw);
}

/* Secondary inverse: rand en tekst blijven wit bij hover (donkerblauw nuance 2, 11,90:1) en active (nuance 3, 10,41:1). */
:is(.has-donkerblauw-background-color, .has-donkerblauw-1-background-color, .has-donkerblauw-2-background-color,
	.has-donkerblauw-3-background-color, .has-donkerblauw-4-background-color, .has-kobalt-background-color,
	.has-bodytekst-background-color, [class*="is-style-sectie-donkerblauw"])
	.wp-block-button.is-style-outline > .wp-block-button__link:is(:hover, :active) {
	border-color: var(--wp--preset--color--wit);
	color: var(--wp--preset--color--wit);
}

/* ---------- Formulieren ----------
 * Volgens design_system/02 Verbeterd/Formulieren.pdf (vastgesteld 2026-10-09). Geldt voor elk formulier op de site.
 * Opbouw van een veld (.tt-veld): label → hulptekst → veld → foutmelding, 8px ertussen; 24px tussen velden,
 * 32px tussen groepen en tot de button. Formulierkolom maximaal 40rem.
 * Veld: 48px hoog, wit, rand 1px donkerblauw nuance 4 (min. 4,57:1 op lichte achtergronden), volledig rond, 24px opzij,
 * tekst Body M donkerblauw. Hover: rand donkerblauw. Focus: ring 2px op 2px afstand (zoals buttons). Fout: rode rand
 * van 2px, rood icoon en donkerblauwe tekst eronder (Caption). Disabled: vlak met bodytekst.
 * Tekstvak: afronding 24px, minimaal 4 regels, teller rechtsonder. Dropdown: chevron rechts, open lijst in de huisstijl
 * (waar de browser dat ondersteunt). Checkbox (4px) en radio button: 24px, checked kobalt.
 * Geen placeholders (behalve bij zoeken). De button is in elk formulier de kobalt primary, op elke achtergrond.
 * Formulieren alleen op lichte achtergronden (off-white, wit, vlak, nuance 4, lichtblauw) en donkerblauw. */

:root {
	--tt-veld-rand: var(--wp--preset--color--donkerblauw-4);
	--tt-veld-rand-hover: var(--wp--preset--color--donkerblauw);
	--tt-veld-label: var(--wp--preset--color--donkerblauw);
	--tt-veld-hulp: var(--wp--preset--color--bodytekst);
	--tt-veld-fouttekst: var(--wp--preset--color--donkerblauw);
	--tt-icoon-fout: url("../images/iconen/set/09.svg");
	--tt-icoon-succes: url("../images/iconen/set/10.svg");
	--tt-icoon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%232B1343' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 6 8 10.5 12.5 6'/%3E%3C/svg%3E");
	--tt-icoon-vink: url("../images/iconen/set/07.svg");
	--tt-icoon-chevron-m: url("../images/iconen/set/03.svg");
	--tt-icoon-pijl-links: url("../images/iconen/set/02.svg");
}

/* Lichtblauw: hulptekst donkerblauw (bodytekst haalt 4,46:1). Donkerblauw: label, hulptekst en foutmelding wit. */
:is(.has-lichtblauw-background-color, [class*="is-style-sectie-lichtblauw"]) {
	--tt-veld-hulp: var(--wp--preset--color--donkerblauw);
}

:is(.has-donkerblauw-background-color, [class*="is-style-sectie-donkerblauw"]) {
	--tt-veld-label: var(--wp--preset--color--wit);
	--tt-veld-hulp: var(--wp--preset--color--wit);
	--tt-veld-fouttekst: var(--wp--preset--color--wit);
}

/* In een formulier altijd de kobalt primary, ook op donkerblauw (witte tekst op kobalt 5,56:1). */
:is(form, .tt-formulier) :is(.wp-element-button, button[type="submit"], input[type="submit"]) {
	--tt-button: var(--wp--preset--color--kobalt);
	--tt-button-tekst: var(--wp--preset--color--wit);
	--tt-button-hover: var(--wp--custom--kleur--kobalt-hover);
	--tt-button-actief: var(--wp--custom--kleur--kobalt-actief);
}

.tt-formulier {
	max-width: 40rem;
}

.tt-veld + .tt-veld {
	margin-top: 1.5rem;
}

.tt-formulier :is(.tt-veld, fieldset) + :is(fieldset, .tt-formulier__acties),
.tt-formulier fieldset + .tt-veld {
	margin-top: 2rem;
}

.tt-veld {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
}

/* Label en vraag boven een groep: Body M Bold. "(niet verplicht)" in Body M Regular, bodytekst. */
.tt-veld > label,
.tt-veld__label,
.tt-formulier legend {
	color: var(--tt-veld-label);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	line-height: var(--wp--custom--line-height--body-m);
}

.tt-veld__optioneel {
	color: var(--tt-veld-hulp);
	font-weight: 400;
}

.tt-veld__hulp {
	margin: 0;
	color: var(--tt-veld-hulp);
	font-size: var(--wp--preset--font-size--body-s);
	line-height: var(--wp--custom--line-height--body-s);
}

/* Veld, tekstvak en dropdown. */
.tt-invoer,
.tt-veld :where(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="hidden"]):not([type="file"]), textarea, select),
.wp-block-search__input {
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	margin: 0;
	padding: calc(0.625rem - 1px) calc(1.5rem - 1px); /* 48px hoog met regelafstand 28px (mobiel 24px) */
	border: 1px solid var(--tt-veld-rand);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--wit);
	color: var(--wp--preset--color--donkerblauw);
	font-family: var(--wp--preset--font-family--plus-jakarta-sans);
	font-size: max(1rem, var(--wp--preset--font-size--medium)); /* Body M; nooit kleiner dan 16px (iOS zoomt anders in) */
	line-height: var(--wp--custom--line-height--body-m);
	transition: border-color 0.15s ease;
}

@media (max-width: 599px) {
	.tt-invoer,
	.tt-veld :where(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="hidden"]):not([type="file"]), textarea, select),
	.wp-block-search__input {
		padding-block: calc(0.75rem - 1px);
	}
}

.tt-invoer:hover,
.tt-veld :is(input, textarea, select):hover,
.wp-block-search__input:hover {
	border-color: var(--tt-veld-rand-hover);
}

.tt-invoer:focus-visible,
.tt-veld :is(input, textarea, select):focus-visible,
.wp-block-search__input:focus-visible {
	outline: 2px solid var(--tt-focus);
	outline-offset: 2px;
}

/* Fout: rode rand van 2px (1px rand + 1px schaduw binnen, zodat het veld niet verspringt). */
.tt-veld :is(input, textarea, select)[aria-invalid="true"],
.tt-invoer[aria-invalid="true"] {
	border-color: var(--wp--preset--color--fout);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--fout);
}

.tt-veld :is(input, textarea, select):disabled,
.tt-invoer:disabled {
	background: var(--wp--preset--color--vlak);
	color: var(--wp--preset--color--bodytekst);
	cursor: not-allowed;
}

/* Breedtes: volledig (standaard), half en kort. Op mobiel wordt half volledig; kort blijft kort. */
.tt-veld--half :is(input, select) {
	width: 50%;
}

.tt-veld--kort :is(input, select) {
	width: 10rem;
	max-width: 100%;
}

@media (max-width: 599px) {
	.tt-veld--half :is(input, select) {
		width: 100%;
	}
}

/* Tekstvak: afronding 24px (zelfde boog als een veld van 48px), minimaal 4 regels, groeit mee tot ongeveer 10 regels. */
.tt-veld textarea {
	min-height: calc(4lh + 1.25rem);
	max-height: calc(10lh + 1.25rem);
	field-sizing: content;
	border-radius: var(--wp--custom--radius--groot);
	resize: vertical;
}

.tt-veld__onder {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
}

.tt-teller {
	margin: 0 0 0 auto;
	color: var(--tt-veld-hulp);
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--wp--custom--line-height--caption);
	white-space: nowrap;
}

/* Dropdown: chevron rechts (16px, 24px van de rand), eerste optie is een opdracht ("Kies een onderwerp"). */
.tt-veld select {
	appearance: none;
	padding-right: 3.5rem;
	background: var(--wp--preset--color--wit) var(--tt-icoon-chevron) right 1.5rem center / 1rem no-repeat;
	cursor: pointer;
}

/* Open lijst in de huisstijl waar de browser dat kan (customizable select); anders de lijst van het systeem. */
@supports (appearance: base-select) {
	.tt-veld select,
	.tt-veld select::picker(select) {
		appearance: base-select;
	}

	.tt-veld select::picker-icon {
		display: none;
	}

	.tt-veld select::picker(select) {
		box-sizing: border-box;
		margin-top: 0.5rem;
		padding: 0.5rem;
		border: 1px solid var(--tt-veld-rand);
		border-radius: var(--wp--custom--radius--groot);
		background: var(--wp--preset--color--wit);
		max-height: calc(6 * 3rem + 1rem);
	}

	.tt-veld select option {
		display: flex;
		align-items: center;
		justify-content: space-between;
		min-height: 3rem;
		padding: 0 1rem;
		border-radius: var(--wp--custom--radius--pill);
		color: var(--wp--preset--color--donkerblauw);
		font-size: var(--wp--preset--font-size--medium);
	}

	.tt-veld select option:is(:hover, :focus-visible) {
		background: var(--wp--preset--color--blauw-4);
	}

	.tt-veld select option:focus-visible {
		outline: 2px solid var(--wp--preset--color--geselecteerd);
		outline-offset: -2px;
	}

	.tt-veld select option:checked {
		font-weight: 700;
	}

	.tt-veld select option::checkmark {
		order: 1;
		margin-left: auto;
		content: "";
		width: 1rem;
		height: 1rem;
		background-color: var(--wp--preset--color--kobalt);
		-webkit-mask: var(--tt-icoon-vink) center / contain no-repeat;
		mask: var(--tt-icoon-vink) center / contain no-repeat;
	}
}

/* Groep (checkboxes of radio buttons): vraag als legend, 16px tot de eerste optie, 16px tussen opties. */
.tt-formulier fieldset {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.tt-formulier legend {
	padding: 0;
	margin-bottom: 1rem;
}

.tt-optie {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	color: var(--tt-veld-label);
	font-size: var(--wp--preset--font-size--medium);
	line-height: var(--wp--custom--line-height--body-m);
	cursor: pointer;
}

.tt-optie + .tt-optie {
	margin-top: 1rem;
}

.tt-optie input[type="checkbox"],
.tt-optie input[type="radio"] {
	appearance: none;
	flex: 0 0 auto;
	box-sizing: border-box;
	width: 1.5rem;
	height: 1.5rem;
	margin: calc((1lh - 1.5rem) / 2) 0 0; /* uitgelijnd met de eerste regel */
	border: 1px solid var(--tt-veld-rand);
	border-radius: var(--wp--custom--radius--checkbox);
	background: var(--wp--preset--color--wit);
	cursor: pointer;
	display: grid;
	place-content: center;
}

.tt-optie input[type="radio"] {
	border-radius: 50%;
}

.tt-optie:hover input:not(:checked):not(:disabled) {
	border-color: var(--tt-veld-rand-hover);
}

.tt-optie input:focus-visible {
	outline: 2px solid var(--tt-focus);
	outline-offset: 2px;
}

.tt-optie input[type="checkbox"]:checked {
	border-color: var(--wp--preset--color--kobalt);
	background: var(--wp--preset--color--kobalt);
}

.tt-optie input[type="checkbox"]:checked::before {
	content: "";
	width: 1rem;
	height: 1rem;
	background-color: var(--wp--preset--color--wit);
	-webkit-mask: var(--tt-icoon-vink) center / contain no-repeat;
	mask: var(--tt-icoon-vink) center / contain no-repeat;
}

.tt-optie input[type="radio"]:checked {
	border-color: var(--wp--preset--color--kobalt);
}

.tt-optie input[type="radio"]:checked::before {
	content: "";
	width: 0.75rem;
	height: 0.75rem;
	border-radius: 50%;
	background: var(--wp--preset--color--kobalt);
}

.tt-optie:hover input[type="checkbox"]:checked {
	border-color: var(--wp--custom--kleur--kobalt-hover);
	background: var(--wp--custom--kleur--kobalt-hover);
}

.tt-optie:hover input[type="radio"]:checked {
	border-color: var(--wp--custom--kleur--kobalt-hover);
}

.tt-optie:hover input[type="radio"]:checked::before {
	background: var(--wp--custom--kleur--kobalt-hover);
}

.tt-optie input[aria-invalid="true"],
fieldset[aria-invalid="true"] .tt-optie input {
	border-color: var(--wp--preset--color--fout);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--fout);
}

.tt-optie:has(input:disabled) {
	color: var(--wp--preset--color--bodytekst);
	cursor: not-allowed;
}

.tt-optie input:disabled {
	background: var(--wp--preset--color--vlak);
	cursor: not-allowed;
}

/* Foutmelding bij een veld of groep: Caption, donkerblauw, rood icoon (16px, 8px van de tekst), één regel. */
.tt-veld__fout,
.tt-formulier fieldset > .tt-veld__fout {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	color: var(--tt-veld-fouttekst);
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--wp--custom--line-height--caption);
}

.tt-formulier fieldset > .tt-veld__fout {
	margin-top: 0.5rem;
}

.tt-veld__fout::before {
	content: "";
	flex: 0 0 auto;
	width: 1rem;
	height: 1rem;
	background-color: var(--wp--preset--color--fout);
	-webkit-mask: var(--tt-icoon-fout) center / contain no-repeat;
	mask: var(--tt-icoon-fout) center / contain no-repeat;
}

.tt-veld__fout:empty,
.tt-veld__fout[hidden] {
	display: none;
}

/* Foutoverzicht en verzendfout: bovenaan het formulier, wit vlak, rode rand 2px, afronding 16px, 24px binnenruimte.
 * Kop Heading 5 met rood icoon; tekst en links Body S. 32px tot het eerste veld. */
.tt-foutoverzicht,
.tt-verzendfout {
	box-sizing: border-box;
	margin-bottom: 2rem;
	padding: 1.5rem;
	border: 2px solid var(--wp--preset--color--fout);
	border-radius: var(--tt-r-middel);
	background: var(--wp--preset--color--wit);
	color: var(--wp--preset--color--bodytekst);
	font-size: var(--wp--preset--font-size--body-s);
	line-height: var(--wp--custom--line-height--body-s);
}

.tt-foutoverzicht__kop {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.5rem;
	color: var(--wp--preset--color--donkerblauw);
	font-family: var(--wp--preset--font-family--plus-jakarta-sans);
	font-size: var(--wp--preset--font-size--kop-5);
	font-weight: 700;
	line-height: var(--wp--custom--line-height--kop-5);
}

.tt-foutoverzicht__kop::before {
	content: "";
	flex: 0 0 auto;
	width: 1.5rem;
	height: 1.5rem;
	background-color: var(--wp--preset--color--fout);
	-webkit-mask: var(--tt-icoon-fout) center / contain no-repeat;
	mask: var(--tt-icoon-fout) center / contain no-repeat;
}

.tt-foutoverzicht ul {
	margin: 0;
	padding-left: 2rem;
}

.tt-foutoverzicht a,
.tt-verzendfout a {
	color: var(--wp--preset--color--kobalt);
	text-decoration: underline;
}

/* Bevestiging na versturen: vervangt het formulier. Succesicoon (groen alleen als icoon) bij de kop. */
.tt-bevestiging__kop {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.tt-bevestiging__kop::before {
	content: "";
	flex: 0 0 auto;
	width: 1.5rem;
	height: 1.5rem;
	background-color: var(--wp--preset--color--succes);
	-webkit-mask: var(--tt-icoon-succes) center / contain no-repeat;
	mask: var(--tt-icoon-succes) center / contain no-repeat;
}

/* Knop en privacyzin onder het formulier. */
.tt-formulier__acties {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
}

.tt-formulier__privacy {
	margin: 0;
	font-size: var(--wp--preset--font-size--body-s);
	line-height: var(--wp--custom--line-height--body-s);
}

/* Alleen voor schermlezers (bijv. het label van een zoekveld). */
.tt-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Veld en button naast elkaar (nieuwsbrief): zelfde hoogte, 16px ertussen; op mobiel onder elkaar, button volle breedte.
 * Een fout staat onder het veld; veld en button blijven op één lijn. */
.tt-nieuwsbrief {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: 1rem;
	row-gap: 0.5rem;
	align-items: center;
}

.tt-nieuwsbrief > label {
	grid-column: 1 / -1;
	color: var(--tt-veld-label);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	line-height: var(--wp--custom--line-height--body-m);
}

.tt-nieuwsbrief .tt-veld__fout,
.tt-nieuwsbrief__melding {
	grid-column: 1 / -1;
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--wp--custom--line-height--caption);
}

.tt-nieuwsbrief__melding:empty {
	display: none;
}

@media (max-width: 599px) {
	.tt-nieuwsbrief {
		grid-template-columns: minmax(0, 1fr);
	}

	.tt-nieuwsbrief .wp-element-button {
		width: 100%;
	}
}

/* Zoeken: veld met de icoon-button Zoeken (48px rond, kobalt primary, verborgen label). Placeholder mag hier
 * als extra hint, in bodytekst (6,20:1 op wit). */
.wp-block-search__inside-wrapper {
	gap: 0.5rem;
	padding: 0;
	border: 0;
	background: none;
}

.wp-block-search__input {
	flex: 1 1 auto;
}

.wp-block-search__input::placeholder {
	color: var(--wp--preset--color--bodytekst);
	opacity: 1;
}

.wp-block-search .wp-block-search__button {
	--tt-button: var(--wp--preset--color--kobalt);
	--tt-button-tekst: var(--wp--preset--color--wit);
	--tt-button-hover: var(--wp--custom--kleur--kobalt-hover);
	--tt-button-actief: var(--wp--custom--kleur--kobalt-actief);
	flex: 0 0 auto;
	position: relative;
	width: 3rem;
	height: 3rem;
	margin: 0;
	padding: 0;
	border-radius: 50%;
	overflow: hidden;
	color: transparent;
	font-size: 0;
}

.wp-block-search .wp-block-search__button svg {
	display: none;
}

.wp-block-search .wp-block-search__button::before {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 1.25rem;
	height: 1.25rem;
	background-color: var(--wp--preset--color--wit);
	-webkit-mask: var(--tt-icoon-zoeken) center / contain no-repeat;
	mask: var(--tt-icoon-zoeken) center / contain no-repeat;
}

/* ---------- Tags (pills) ---------- */

/* Tag: Label (14/20 SemiBold, +2%), 4px boven en onder en 12px opzij (vaste uitzondering, Cards), volledig rond. */
.is-style-tag,
.is-style-tag-licht {
	display: block;
	width: fit-content;
	padding: 0.25rem 0.75rem;
	border-radius: var(--tt-r-pill);
	font-size: var(--wp--preset--font-size--small) !important;
	font-weight: 600;
	line-height: var(--wp--custom--line-height--label);
	letter-spacing: 0.02em;
	text-decoration: none;
}

.is-style-tag:not(.has-background) {
	background: var(--wp--preset--color--donkerblauw);
}

.is-style-tag:not(.has-text-color) {
	color: var(--wp--preset--color--wit);
}

.is-style-tag-licht:not(.has-background) {
	background: var(--wp--preset--color--blauw);
}

.is-style-tag-licht:not(.has-text-color) {
	color: var(--wp--preset--color--donkerblauw);
}

.is-style-tag a,
.is-style-tag-licht a {
	color: inherit;
	text-decoration: none;
}

/* In een gecentreerde kolom links uitlijnen met de tekst eronder, niet centreren. */
.is-layout-constrained:not(.is-content-justification-left):not(.is-content-justification-right) > :is(.is-style-tag, .is-style-tag-licht):not(.has-text-align-center) {
	margin-left: max(0px, calc((100% - var(--wp--style--global--content-size, 48rem)) / 2)) !important;
	margin-right: auto !important;
}

.has-text-align-center.is-style-tag,
.has-text-align-center.is-style-tag-licht {
	margin-inline: auto;
}

/* ---------- Cards ----------
 * Volgens design_system/02 Verbeterd/Cards.pdf (vastgesteld 2026-10-12). Het type volgt uit de opbouw van de groep met
 * blokstijl Kaart of Kaart met grote hoek, zodat bestaande pagina's vanzelf meedoen:
 * - Tekstcard (geen foto): vlak (standaard), afronding 16, binnenruimte 32/32/24; icoon 48px; titel Heading 3, tekst Body S.
 *   Kaart met grote hoek: rechtsboven, naast het icoon.
 * - Contentcard (foto, titel, tekst, actie) en tegel (foto en titel): géén vlak, de foto is de vorm. Foto 3:2 (tegel 1:1)
 *   met één grote hoek boven, wisselend linksboven en rechtsboven, nooit groter dan een kwart van de kortste zijde en
 *   onder 192px alleen kleine hoeken. Het bijschrift van de foto staat als witte tag linksonder op de foto; bij nieuws
 *   staat het label linksboven en de grote hoek altijd rechtsboven (zie Berichten).
 *   De hele card is één link (de titel); hover: titel en actie onderstreept, foto zoomt 4% in; focus: ring om de card.
 * - Uitgelichte card (blokstijl Uitgelicht / Uitgelicht portret), statementcard (blokstijl Statement) en de schuifrij
 *   voor het team (klasse tt-schuifrij) hieronder.
 * Kaartkleuren: vlak (standaard), lichtblauw, blauw nuance 4, oranje nuance 4, wit; tekstkleur volgt Tekstkleur per
 * achtergrond. Cards in een rij zijn even hoog, de acties staan onderaan op één lijn. */

:is(.is-style-kaart, .is-style-kaart-hoek) {
	position: relative;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	border-radius: var(--tt-r-middel);
	padding: var(--wp--custom--ruimte--card, 2rem); /* 32 · 32 · 24 */
}

/* Tekstcard: standaard vlak met bodytekst (4,75:1); titels donkerblauw. */
:is(.is-style-kaart, .is-style-kaart-hoek):not(.has-background) {
	background: var(--wp--preset--color--vlak);
}

:is(.is-style-kaart, .is-style-kaart-hoek):not(.has-background):not(.has-text-color) {
	color: var(--wp--preset--color--bodytekst);
}

.is-style-kaart-hoek {
	border-top-right-radius: var(--tt-r-hoek);
}

/* Cards (20-10): staat de card met de grote hoek als laatste in de rij en passen de cards niet meer naast elkaar
 * (tablet en mobiel), dan schuift de grote hoek van rechtsboven naar rechtsonder. Niet in een schuifrij: daar staan
 * de cards wel naast elkaar (tt-schuifrij--tablet op tablet, tt-schuifrij op mobiel). */
@media (min-width: 600px) and (max-width: 1279px) {
	.is-layout-grid:not(.tt-schuifrij--tablet) > .is-style-kaart-hoek:last-child {
		border-top-right-radius: var(--tt-r-middel);
		border-bottom-right-radius: var(--tt-r-hoek);
	}
}

@media (max-width: 599px) {
	.is-layout-grid:not(.tt-schuifrij) > .is-style-kaart-hoek:last-child {
		border-top-right-radius: var(--tt-r-middel);
		border-bottom-right-radius: var(--tt-r-hoek);
	}
}

:is(.is-style-kaart, .is-style-kaart-hoek) > .wp-block-buttons:last-child {
	margin-top: auto !important; /* Cards: acties in een rij op één lijn; de algemene ruimte boven buttons ging hiervoor */
	padding-top: var(--tt-ruimte-button);
}

:is(.is-style-kaart, .is-style-kaart-hoek) :is(h2, h3, h4) a {
	color: var(--wp--preset--color--donkerblauw);
	text-decoration: none;
}

/* Content-icoon uit de set (Iconografie): klasse is-icoon-NN op een afbeeldingsblok met klasse tt-icoon. 48px, oranje
 * nuance 1, decoratief (alt leeg). Het beeld zelf is onzichtbaar; het icoon is een masker in de icoonkleur. */
.wp-block-image.tt-icoon[class*="is-icoon-"] {
	width: 3rem;
	height: 3rem;
	background-color: var(--wp--preset--color--oranje-1);
	-webkit-mask: var(--tt-icoon-m) center / contain no-repeat;
	mask: var(--tt-icoon-m) center / contain no-repeat;
}

.wp-block-image.tt-icoon[class*="is-icoon-"] img {
	opacity: 0;
}

.is-icoon-01 { --tt-icoon-m: url("../images/iconen/set/01.svg"); }
.is-icoon-02 { --tt-icoon-m: url("../images/iconen/set/02.svg"); }
.is-icoon-03 { --tt-icoon-m: url("../images/iconen/set/03.svg"); }
.is-icoon-04 { --tt-icoon-m: url("../images/iconen/set/04.svg"); }
.is-icoon-05 { --tt-icoon-m: url("../images/iconen/set/05.svg"); }
.is-icoon-06 { --tt-icoon-m: url("../images/iconen/set/06.svg"); }
.is-icoon-07 { --tt-icoon-m: url("../images/iconen/set/07.svg"); }
.is-icoon-08 { --tt-icoon-m: url("../images/iconen/set/08.svg"); }
.is-icoon-09 { --tt-icoon-m: url("../images/iconen/set/09.svg"); }
.is-icoon-10 { --tt-icoon-m: url("../images/iconen/set/10.svg"); }
.is-icoon-11 { --tt-icoon-m: url("../images/iconen/set/11.svg"); }
.is-icoon-12 { --tt-icoon-m: url("../images/iconen/set/12.svg"); }
.is-icoon-13 { --tt-icoon-m: url("../images/iconen/set/13.svg"); }
.is-icoon-14 { --tt-icoon-m: url("../images/iconen/set/14.svg"); }
.is-icoon-15 { --tt-icoon-m: url("../images/iconen/set/15.svg"); }
.is-icoon-16 { --tt-icoon-m: url("../images/iconen/set/16.svg"); }
.is-icoon-17 { --tt-icoon-m: url("../images/iconen/set/17.svg"); }
.is-icoon-18 { --tt-icoon-m: url("../images/iconen/set/18.svg"); }
.is-icoon-19 { --tt-icoon-m: url("../images/iconen/set/19.svg"); }
.is-icoon-20 { --tt-icoon-m: url("../images/iconen/set/20.svg"); }
.is-icoon-21 { --tt-icoon-m: url("../images/iconen/set/21.svg"); }
.is-icoon-22 { --tt-icoon-m: url("../images/iconen/set/22.svg"); }
.is-icoon-23 { --tt-icoon-m: url("../images/iconen/set/23.svg"); }
.is-icoon-24 { --tt-icoon-m: url("../images/iconen/set/24.svg"); }
.is-icoon-25 { --tt-icoon-m: url("../images/iconen/set/25.svg"); }
.is-icoon-26 { --tt-icoon-m: url("../images/iconen/set/26.svg"); }
.is-icoon-27 { --tt-icoon-m: url("../images/iconen/set/27.svg"); }
.is-icoon-28 { --tt-icoon-m: url("../images/iconen/set/28.svg"); }
.is-icoon-29 { --tt-icoon-m: url("../images/iconen/set/29.svg"); }
.is-icoon-30 { --tt-icoon-m: url("../images/iconen/set/30.svg"); }
.is-icoon-31 { --tt-icoon-m: url("../images/iconen/set/31.svg"); }
.is-icoon-32 { --tt-icoon-m: url("../images/iconen/set/32.svg"); }
.is-icoon-33 { --tt-icoon-m: url("../images/iconen/set/33.svg"); }
.is-icoon-34 { --tt-icoon-m: url("../images/iconen/set/34.svg"); }
.is-icoon-35 { --tt-icoon-m: url("../images/iconen/set/35.svg"); }
.is-icoon-36 { --tt-icoon-m: url("../images/iconen/set/36.svg"); }
.is-icoon-37 { --tt-icoon-m: url("../images/iconen/set/37.svg"); }
.is-icoon-38 { --tt-icoon-m: url("../images/iconen/set/38.svg"); }
.is-icoon-39 { --tt-icoon-m: url("../images/iconen/set/39.svg"); }
.is-icoon-40 { --tt-icoon-m: url("../images/iconen/set/40.svg"); }
.is-icoon-41 { --tt-icoon-m: url("../images/iconen/set/41.svg"); }
.is-icoon-42 { --tt-icoon-m: url("../images/iconen/set/42.svg"); }
.is-icoon-43 { --tt-icoon-m: url("../images/iconen/set/43.svg"); }
.is-icoon-44 { --tt-icoon-m: url("../images/iconen/set/44.svg"); }
.is-icoon-45 { --tt-icoon-m: url("../images/iconen/set/45.svg"); }
.is-icoon-46 { --tt-icoon-m: url("../images/iconen/set/46.svg"); }
.is-icoon-47 { --tt-icoon-m: url("../images/iconen/set/47.svg"); }
.is-icoon-48 { --tt-icoon-m: url("../images/iconen/set/48.svg"); }
.is-icoon-49 { --tt-icoon-m: url("../images/iconen/set/49.svg"); }
.is-icoon-50 { --tt-icoon-m: url("../images/iconen/set/50.svg"); }
.is-icoon-51 { --tt-icoon-m: url("../images/iconen/set/51.svg"); }
.is-icoon-52 { --tt-icoon-m: url("../images/iconen/set/52.svg"); }
.is-icoon-53 { --tt-icoon-m: url("../images/iconen/set/53.svg"); }
.is-icoon-54 { --tt-icoon-m: url("../images/iconen/set/54.svg"); }
.is-icoon-55 { --tt-icoon-m: url("../images/iconen/set/55.svg"); }
.is-icoon-56 { --tt-icoon-m: url("../images/iconen/set/56.svg"); }
.is-icoon-57 { --tt-icoon-m: url("../images/iconen/set/57.svg"); }
.is-icoon-58 { --tt-icoon-m: url("../images/iconen/set/58.svg"); }
.is-icoon-59 { --tt-icoon-m: url("../images/iconen/set/59.svg"); }
.is-icoon-60 { --tt-icoon-m: url("../images/iconen/set/60.svg"); }
.is-icoon-61 { --tt-icoon-m: url("../images/iconen/set/61.svg"); }
.is-icoon-62 { --tt-icoon-m: url("../images/iconen/set/62.svg"); }
.is-icoon-63 { --tt-icoon-m: url("../images/iconen/set/63.svg"); }
.is-icoon-64 { --tt-icoon-m: url("../images/iconen/set/64.svg"); }
.is-icoon-65 { --tt-icoon-m: url("../images/iconen/set/65.svg"); }

/* Content-icoon in een tekstcard: 48px, 24px boven de titel. */
.wp-block-image.tt-icoon {
	width: 3rem;
	margin-bottom: 0;
}

.wp-block-image.tt-icoon img {
	width: 3rem;
	height: 3rem;
	object-fit: contain;
	border-radius: 0;
}

/* Contentcard en tegel: geen vlak en geen binnenruimte; de foto is de vorm. Tekst, actie en focus volgen de sectie. */
:is(.is-style-kaart, .is-style-kaart-hoek):has(> .wp-block-image:first-child:not(.tt-icoon)) {
	container: tt-kaart / inline-size;
	--tt-foto-hoek: var(--tt-r-middel); /* grote hoek: zie de container queries hieronder */
	padding: 0;
	border-radius: 0;
	background: none !important;
	color: inherit;
	--tt-button: inherit;
	--tt-button-tekst: inherit;
	--tt-button-vlak: inherit;
	--tt-button-hover: inherit;
	--tt-button-actief: inherit;
	--tt-button-vlak-hover: inherit;
	--tt-button-vlak-actief: inherit;
	--tt-tertiary: inherit;
	--tt-tertiary-hover: inherit;
	--tt-tertiary-actief: inherit;
	--tt-focus: inherit;
}

:is(.is-style-kaart, .is-style-kaart-hoek) > .wp-block-image:first-child:not(.tt-icoon) {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: var(--tt-r-middel);
	border-top-left-radius: min(var(--tt-foto-hoek), var(--tt-hoek));
}

/* Grote hoek wisselt per card: linksboven, rechtsboven, linksboven … */
:nth-child(even of :is(.is-style-kaart, .is-style-kaart-hoek)) > .wp-block-image:first-child:not(.tt-icoon) {
	border-top-left-radius: var(--tt-r-middel);
	border-top-right-radius: min(var(--tt-foto-hoek), var(--tt-hoek));
}

:is(.is-style-kaart, .is-style-kaart-hoek) > .wp-block-image:first-child:not(.tt-icoon) img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 0;
	transition: transform 0.2s ease;
}

/* Grote hoek: één stap kleiner zolang hij groter is dan een kwart van de kortste zijde (3:2: hoogte = 2/3 breedte). */
@container tt-kaart (min-width: 288px) {
	.wp-block-image:first-child:not(.tt-icoon) { --tt-foto-hoek: 3rem; }
}

@container tt-kaart (min-width: 384px) {
	.wp-block-image:first-child:not(.tt-icoon) { --tt-foto-hoek: 4rem; }
}

@container tt-kaart (min-width: 576px) {
	.wp-block-image:first-child:not(.tt-icoon) { --tt-foto-hoek: 6rem; }
}

/* Tegel: foto 1:1 en de titel met een pijl (24px) naar de pagina, gelijk met de rechterrand van de foto. */
:is(.is-style-kaart, .is-style-kaart-hoek):has(> .wp-block-image:first-child + .wp-block-heading:last-child) > .wp-block-image img {
	aspect-ratio: 1 / 1;
}

@container tt-kaart (min-width: 192px) {
	.wp-block-image:first-child:not(.tt-icoon):has(+ .wp-block-heading:last-child) { --tt-foto-hoek: 3rem; }
}

@container tt-kaart (min-width: 256px) {
	.wp-block-image:first-child:not(.tt-icoon):has(+ .wp-block-heading:last-child) { --tt-foto-hoek: 4rem; }
}

@container tt-kaart (min-width: 384px) {
	.wp-block-image:first-child:not(.tt-icoon):has(+ .wp-block-heading:last-child) { --tt-foto-hoek: 6rem; }
}

@container tt-kaart (max-width: 191px) {
	.wp-block-image:first-child:not(.tt-icoon):has(+ .wp-block-heading:last-child) { --tt-foto-hoek: var(--tt-r-middel); }
}

/* Persoon (Cards): ook zonder e-mailadres geen tegel. Grote hoek 48px, geen pijl. */
.tt-persoon > .wp-block-image:first-child:not(.tt-icoon):has(+ .wp-block-heading) { --tt-foto-hoek: 3rem; }

.tt-persoon > .wp-block-image:first-child + .wp-block-heading:last-child a::before { content: none; }

.tt-persoon > .wp-block-image img { aspect-ratio: 1 / 1; }

/* Persoon is niet klikbaar: de foto zoomt niet in bij hover (21-10). */
.tt-persoon > .wp-block-image img { transform: none !important; transition: none; }

/* Ons team (21-10): afdeling Heading 2, naam Heading 5 (H3 in de card, op één regel op desktop), functie Body S in
 * bodytekst 8px onder de naam, e-mailadres Body S 16px daaronder, als tekst (niet klikbaar); sales: telefoon als link. Geen tag op de foto. Ruimte tussen rijen en afdelingen: zie verderop. */
.tt-persoon > h3.wp-block-heading {
	font-family: var(--wp--preset--font-family--plus-jakarta-sans);
	font-size: var(--wp--preset--font-size--kop-5) !important;
	font-weight: 700;
	line-height: var(--wp--custom--line-height--kop-5);
	letter-spacing: 0;
}

.tt-persoon > .tt-persoon__functie {
	margin-top: 0.5rem !important;
	font-size: var(--wp--preset--font-size--body-s);
	color: var(--wp--preset--color--bodytekst);
}

.tt-persoon > :is(.tt-persoon__mail, .tt-persoon__tel) {
	margin-top: 1rem !important;
	font-size: var(--wp--preset--font-size--body-s);
}

/* E-mailadres en telefoon als tekst, niet klikbaar (besluit 21-10); e-mail breekt af na de @. */
.tt-persoon > :is(.tt-persoon__mail, .tt-persoon__tel) {
	color: var(--wp--preset--color--bodytekst);
	overflow-wrap: anywhere;
}

/* Icoon vóór e-mailadres (14 Mail) en telefoon (13 Telefoon): 16px, 8px tot de tekst, verticaal gecentreerd, in de
 * tekstkleur (Iconografie; zoals de duur in de planner). Decoratief: alleen CSS, schermlezers lezen het niet voor. */
.tt-persoon > :is(.tt-persoon__mail, .tt-persoon__tel) {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.tt-persoon > :is(.tt-persoon__mail, .tt-persoon__tel)::before {
	content: "";
	flex: 0 0 auto;
	width: 1rem;
	height: 1rem;
	background-color: currentColor;
	-webkit-mask: var(--m) center / contain no-repeat;
	mask: var(--m) center / contain no-repeat;
}

.tt-persoon > .tt-persoon__mail::before { --m: url("../images/iconen/set/14.svg"); }

.tt-persoon > .tt-persoon__tel::before { --m: url("../images/iconen/set/13.svg"); }

/* Ruimte (21-10): tussen rijen foto's 48px, tussen afdelingen de sectieruimte (96 · 64 · 48px). ~ i.p.v. +: de schuifrij-buttons
 * staan in de code tussen de rij en de volgende afdeling. */
.wp-block-group.is-layout-grid.tt-personen {
	row-gap: var(--wp--preset--spacing--50);
}

.tt-personen ~ .tt-sectiekop {
	margin-top: var(--wp--preset--spacing--70) !important;
}

:is(.is-style-kaart, .is-style-kaart-hoek) > .wp-block-image:first-child + .wp-block-heading:last-child a {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.5rem; /* icoon → tekst 8px (Iconografie) */
}

:is(.is-style-kaart, .is-style-kaart-hoek) > .wp-block-image:first-child + .wp-block-heading:last-child a::before {
	content: "";
	order: 1;
	flex: 0 0 auto;
	width: 1.5rem;
	height: 1.5rem;
	margin-top: calc((1lh - 1.5rem) / 2); /* op de eerste regel */
	background-color: currentColor;
	-webkit-mask: var(--tt-icoon-pijl) center / contain no-repeat;
	mask: var(--tt-icoon-pijl) center / contain no-repeat;
}

/* Tag op de foto: het bijschrift als wit vlak met donkerblauwe tekst (Label), linksonder, 16px van de randen. */
:is(.is-style-kaart, .is-style-kaart-hoek) > .wp-block-image:first-child figcaption {
	position: absolute;
	left: 1rem;
	bottom: 1rem;
	margin: 0;
	padding: 0.25rem 0.75rem;
	border-radius: var(--tt-r-pill);
	background: var(--wp--preset--color--wit);
	color: var(--wp--preset--color--donkerblauw);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: var(--wp--custom--line-height--label);
	letter-spacing: 0.02em;
}

/* Klikbare card: de titel is de link, het klikvlak loopt over de hele card. */
:is(.is-style-kaart, .is-style-kaart-hoek):has(> .wp-block-image:first-child:not(.tt-icoon)) > .wp-block-heading a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

:is(.is-style-kaart, .is-style-kaart-hoek):has(> .wp-block-image:first-child:not(.tt-icoon)) > .wp-block-heading a:focus-visible {
	outline: none;
}

:is(.is-style-kaart, .is-style-kaart-hoek):has(> .wp-block-image:first-child:not(.tt-icoon)):has(> .wp-block-heading a:focus-visible) {
	outline: 2px solid var(--tt-focus);
	outline-offset: 0.5rem;
	border-radius: var(--tt-r-middel);
}

:is(.is-style-kaart, .is-style-kaart-hoek):has(> .wp-block-image:first-child:not(.tt-icoon)):hover > .wp-block-heading a,
:is(.is-style-kaart, .is-style-kaart-hoek):has(> .wp-block-image:first-child:not(.tt-icoon)):hover .wp-block-button__link {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.25em;
}

:is(.is-style-kaart, .is-style-kaart-hoek):has(> .wp-block-image:first-child:not(.tt-icoon)):hover > .wp-block-image img {
	transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
	:is(.is-style-kaart, .is-style-kaart-hoek):hover > .wp-block-image img {
		transform: none;
	}
}

/* Actie in een klikbare card: geen button maar tekst met pijl (tertiary), want de hele card is al de link. */
:is(.is-style-kaart, .is-style-kaart-hoek):has(> .wp-block-image:first-child:not(.tt-icoon)) .wp-block-button:first-child {
	margin-inline-start: -1.5rem; /* tekst op de lijn, de onzichtbare vorm valt erbuiten (zoals tertiary) */
}

:is(.is-style-kaart, .is-style-kaart-hoek):has(> .wp-block-image:first-child:not(.tt-icoon)) .wp-block-button .wp-block-button__link {
	border-color: transparent;
	background: none;
	color: var(--tt-tertiary);
}

/* Raster: contentcard en tekstcard 3 / 2 / 1, tegel 4 / 2 / 2; bij 2 content- of tekstcards 2 naast elkaar, bij 4 2 × 2 (contentcards sinds
 * 20-10, niet voor personen). Een onvolledige rij staat links. */
.wp-block-group.is-layout-grid:has(> :is(.is-style-kaart, .is-style-kaart-hoek)) {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wp-block-group.is-layout-grid:not(.tt-personen):not(:has(.tt-persoon__mail)):has(> :is(.is-style-kaart, .is-style-kaart-hoek):nth-child(4):last-child) { /* geen :has() in :has() */
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Precies 2 content- of tekstcards: samen de volle breedte, 2 naast elkaar (2.34.0, Over ons: visie en missie) */
.wp-block-group.is-layout-grid:not(.tt-personen):has(> :is(.is-style-kaart, .is-style-kaart-hoek):nth-child(2):last-child) {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wp-block-group.is-layout-grid:has(> :is(.is-style-kaart, .is-style-kaart-hoek) > .wp-block-image:first-child + .wp-block-heading:last-child) {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Desktop: 5 tegels op één rij (niet 4 + 1); personen 4 per rij (Cards: raster, 20-10). */
@media (min-width: 1280px) {
	.wp-block-group.is-layout-grid:not(.tt-personen):has(> :is(.is-style-kaart, .is-style-kaart-hoek):nth-child(5):last-child > .wp-block-image:first-child + .wp-block-heading:last-child) {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	.wp-block-group.is-layout-grid:is(.tt-personen, :has(.tt-persoon__mail)) {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (max-width: 1279px) {
	.wp-block-group.is-layout-grid:has(> :is(.is-style-kaart, .is-style-kaart-hoek)) {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

/* Content- en tekstcards: één per rij op mobiel en op een smalle tablet (tot 720px), zodat titels niet te krap staan. */
@media (max-width: 719px) {
	.wp-block-group.is-layout-grid:has(> :is(.is-style-kaart, .is-style-kaart-hoek)):not(:has(> :is(.is-style-kaart, .is-style-kaart-hoek) > .wp-block-image:first-child + .wp-block-heading:last-child)) {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

/* Tegels: op mobiel één per rij (Cards: raster), zodat de titel met pijl altijd past. */
@media (max-width: 599px) {
	.wp-block-group.is-layout-grid:has(> :is(.is-style-kaart, .is-style-kaart-hoek) > .wp-block-image:first-child + .wp-block-heading:last-child) {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

/* Uitgelichte card, foto tot de rand: vlak, foto en tekst naast elkaar; de grote hoek zit op de hoek van de card aan de
 * kant van de foto. Tekst 32px boven en onder, 48px opzij. Op mobiel de foto boven de tekst. */
.is-style-uitgelicht {
	overflow: hidden;
	border-radius: var(--tt-r-middel);
	border-top-left-radius: var(--tt-r-hoek);
	padding: 0 !important;
}

.is-style-uitgelicht:not(.has-background) {
	background: var(--wp--preset--color--vlak);
}

.is-style-uitgelicht > .wp-block-columns {
	gap: 0;
	margin: 0;
}

.is-style-uitgelicht .wp-block-column:has(> .wp-block-image:only-child) .wp-block-image,
.is-style-uitgelicht .wp-block-column:has(> .wp-block-image:only-child) img {
	height: 100%;
	margin: 0;
	border-radius: 0;
	object-fit: cover;
}

.is-style-uitgelicht .wp-block-column:not(:has(> .wp-block-image:only-child)) {
	align-self: center;
	padding: 2rem 3rem;
}

/* Uitgelichte card, portret: card 16px rondom; de foto (4:5) in D-vorm binnen de binnenruimte, tekst 48px ernaast. */
.is-style-uitgelicht-portret {
	border-radius: var(--tt-r-middel);
	padding: var(--wp--custom--ruimte--card, 2rem);
}

.is-style-uitgelicht-portret:not(.has-background) {
	background: var(--wp--preset--color--vlak);
}

.is-style-uitgelicht-portret > .wp-block-columns {
	gap: 3rem;
	align-items: center;
	margin: 0;
}

.is-style-uitgelicht-portret .wp-block-image img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--tt-r-middel) min(var(--tt-hoek), 4rem) var(--tt-r-middel) min(var(--tt-hoek), 4rem);
}

/* Uitgelichte card met de andere verhalen eronder (Werken bij, 20-10): één geheel, dus 24px ertussen zoals tussen cards. */
.wp-block-group:has(> .is-style-uitgelicht-portret) + .is-layout-grid {
	margin-block-start: 1.5rem !important;
}

/* Desktop (Cards, besluit 20-10): de foto is 304px breed (4:5, 304 × 380), zodat de kaart niet hoger wordt dan nodig.
 * De tekstkolom is hooguit 780px, zoals lopende tekst, zodat het citaat niet langer wordt dan ongeveer 75 tekens per
 * regel. Klantverhalen en werknemersverhalen (home, De huisartsenpraktijk, Klantverhalen, oplossingen, Werken bij). */
@media (min-width: 1280px) {
	.is-style-uitgelicht-portret > .wp-block-columns > .wp-block-column:first-child {
		flex: 0 0 19rem !important;
	}

	.is-style-uitgelicht-portret > .wp-block-columns > .wp-block-column:last-child {
		flex: 1 1 0 !important;
		max-width: 48.75rem;
	}
}

/* Cards: de uitgelichte card heeft op tablet (600–1279px) foto en tekst naast elkaar. WordPress zet kolommen al onder
 * 782px onder elkaar; tussen 600 en 781px houden we ze daarom naast elkaar (foto 40%, tekst 60%). */
@media (min-width: 600px) and (max-width: 781px) {
	:is(.is-style-uitgelicht, .is-style-uitgelicht-portret) > .wp-block-columns.wp-block-columns {
		flex-wrap: nowrap !important;
	}

	:is(.is-style-uitgelicht, .is-style-uitgelicht-portret) > .wp-block-columns > .wp-block-column.wp-block-column:first-child {
		flex-basis: 40% !important;
	}

	:is(.is-style-uitgelicht, .is-style-uitgelicht-portret) > .wp-block-columns > .wp-block-column.wp-block-column:last-child {
		flex-basis: 60% !important;
	}
}

@media (max-width: 781px) {
	.is-style-uitgelicht .wp-block-column:not(:has(> .wp-block-image:only-child)) {
		padding: 1.5rem;
	}

	.is-style-uitgelicht-portret > .wp-block-columns {
		gap: 1.5rem;
	}
}

/* Statementcard: korte uitspraak (Statement, donkerblauw) met één lijn onderin, vanaf de rand, één bocht van 90°.
 * Combinaties uit het brandbook: blauw met lichtblauwe lijn, oranje met off-white, lichtblauw met blauw, off-white met
 * oranje. Lijn 12px, minstens 24px vrij onder de tekst. Niet klikbaar. */
.is-style-statementcard {
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
	border-radius: var(--tt-r-middel);
	padding: var(--wp--custom--ruimte--card, 2rem) var(--wp--custom--ruimte--card, 2rem) calc(var(--wp--custom--ruimte--card, 2rem) + 5.5rem);
	color: var(--wp--preset--color--donkerblauw);
	--tt-statement-lijn: var(--wp--preset--color--lichtblauw);
}

.is-style-statementcard:not(.has-background) {
	background: var(--wp--preset--color--blauw);
}

.is-style-statementcard.has-oranje-background-color { --tt-statement-lijn: var(--wp--preset--color--off-white); }
.is-style-statementcard.has-lichtblauw-background-color { --tt-statement-lijn: var(--wp--preset--color--blauw); }
.is-style-statementcard.has-off-white-background-color { --tt-statement-lijn: var(--wp--preset--color--oranje); }

.is-style-statementcard > * {
	color: var(--wp--preset--color--donkerblauw);
	font-family: var(--wp--preset--font-family--alcyone);
	font-size: var(--wp--preset--font-size--statement) !important;
	font-weight: 500;
	line-height: var(--wp--custom--line-height--statement);
}

.is-style-statementcard::after {
	content: "";
	position: absolute;
	left: -12px;
	bottom: -12px;
	width: min(70%, 16rem);
	height: 5rem;
	border: 0 solid var(--tt-statement-lijn);
	border-top-width: 12px;
	border-right-width: 12px;
	border-top-right-radius: 4rem;
	pointer-events: none;
}

/* Schuifrij op mobiel (Cards: team, voordelen met icoon, nieuws op de home, reviews): kaarten van 218px, de volgende half
 * in beeld, vorige/volgende eronder. Werkt op een raster van cards en op de berichtenlijst. */
@media (max-width: 599px) {
	.tt-schuifrij.is-layout-grid {
		display: flex !important;
		max-width: none; /* de berichtenlijst heeft max-width 100%: de rij moet tot de rand van het scherm */
		gap: 1.5rem;
		margin-right: calc(-1 * var(--tt-zijkant));
		padding-right: var(--tt-zijkant);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.tt-schuifrij.is-layout-grid > * {
		flex: 0 0 13.625rem;
		scroll-snap-align: start;
	}
}

.tt-schuifrij__knoppen {
	display: none;
	gap: 1rem;
	margin-top: 1.5rem;
}

.tt-schuifrij__knoppen.is-tijdlijn {
	display: flex;
}

.tt-schuifrij__knoppen[hidden] {
	display: none;
}

@media (max-width: 599px) {
	.tt-schuifrij__knoppen {
		display: flex;
	}
}

/* Berichten (nieuws en inzichten): contentcards zonder vlak, foto 3:2 met de grote hoek altijd rechtsboven, zodat de
 * tag linksboven altijd in een kleine hoek staat (20-10). */
.tt-berichten > .wp-block-post {
	container: tt-kaart / inline-size;
	--tt-foto-hoek: var(--tt-r-middel);
	position: relative;
	display: flex;
	flex-direction: column;
}

.tt-berichten .wp-block-post-featured-image {
	position: relative;
	margin: 0 0 1.5rem;
	overflow: hidden;
	border-radius: var(--tt-r-middel);
	border-top-right-radius: min(var(--tt-foto-hoek), var(--tt-hoek));
}

/* Tag op de foto: het label van het artikel, blauw vlak met donkerblauwe tekst (Label), zoals de tag boven een
 * Heading 1 (Typografie); linksboven, 16px van de randen. */
.tt-fototag {
	position: absolute;
	top: 1rem;
	left: 1rem;
	z-index: 1;
	padding: 0.25rem 0.75rem;
	border-radius: var(--tt-r-pill);
	background: var(--wp--preset--color--blauw);
	color: var(--wp--preset--color--donkerblauw);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: var(--wp--custom--line-height--label);
	letter-spacing: 0.02em;
	pointer-events: none;
}

@container tt-kaart (min-width: 288px) { .wp-block-post-featured-image { --tt-foto-hoek: 3rem; } }
@container tt-kaart (min-width: 384px) { .wp-block-post-featured-image { --tt-foto-hoek: 4rem; } }
@container tt-kaart (min-width: 576px) { .wp-block-post-featured-image { --tt-foto-hoek: 6rem; } }

.tt-berichten .wp-block-post-featured-image img {
	border-radius: 0;
	transition: transform 0.2s ease;
}

.tt-berichten .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.tt-berichten > .wp-block-post:hover .wp-block-post-title a {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.25em;
}

.tt-berichten > .wp-block-post:hover .wp-block-post-featured-image img {
	transform: scale(1.04);
}

.tt-berichten > .wp-block-post:has(.wp-block-post-title a:focus-visible) {
	outline: 2px solid var(--tt-focus);
	outline-offset: 0.5rem;
	border-radius: var(--tt-r-middel);
}

.tt-berichten .wp-block-post-title a:focus-visible {
	outline: none;
}

.tt-berichten .wp-block-post-date {
	color: var(--wp--preset--color--donkerblauw-4);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.02em;
}

/* ---------- Iconen bij tekst ----------
 * Regel voor de hele site: een icoon naast tekst staat altijd verticaal gecentreerd ten opzichte van de tekst,
 * ook als die over meerdere regels loopt. Pijlen daarom als icoon (niet als teken in de tekst), in de tekstkleur. */

:root {
	--tt-icoon-pijl: url("../images/iconen/set/01.svg");
}

/* Terug naar overzicht: tertiary met de pijl links (Iconografie: pijl links alleen bij "Terug"), 16px Bold. */
.tt-terug a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 3rem;
	color: var(--tt-tertiary) !important;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.5;
	text-decoration: none;
}

.tt-terug a:hover {
	color: var(--tt-tertiary-hover) !important;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.25em;
}

.tt-terug a::before {
	content: "";
	flex: 0 0 auto;
	width: 1rem;
	height: 1rem;
	background-color: currentColor;
	-webkit-mask: var(--tt-icoon-pijl-links) center / contain no-repeat;
	mask: var(--tt-icoon-pijl-links) center / contain no-repeat;
}

/* ---------- Lijnenspel ----------
 * Dikke lijnen met één afgeronde hoek van 90°, afgesneden door de rand.
 * Lijndikte schaalt mee met het scherm (brandbook: 19 pt bij 1920 px).
 */

.is-style-lijnen-rechtsboven,
.is-style-lijnen-linksonder {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.is-style-lijnen-rechtsboven::before,
.is-style-lijnen-rechtsboven::after,
.is-style-lijnen-linksonder::before,
.is-style-lijnen-linksonder::after {
	content: "";
	position: absolute;
	z-index: -1;
	pointer-events: none;
	border: 0 solid var(--tt-lijn-kleur);
}

.is-style-lijnen-rechtsboven::before {
	top: calc(var(--tt-lijn) * -1);
	right: calc(var(--tt-lijn) * -1);
	left: 58%;
	height: 48%;
	border-left-width: var(--tt-lijn);
	border-bottom-width: var(--tt-lijn);
	border-bottom-left-radius: var(--tt-lijn-radius);
}

.is-style-lijnen-rechtsboven::after {
	top: 74%;
	right: calc(var(--tt-lijn) * -1);
	bottom: calc(var(--tt-lijn) * -1);
	left: 72%;
	border-left-width: var(--tt-lijn);
	border-top-width: var(--tt-lijn);
	border-top-left-radius: var(--tt-lijn-radius);
}

.is-style-lijnen-linksonder::before {
	bottom: calc(var(--tt-lijn) * -1);
	left: calc(var(--tt-lijn) * -1);
	right: 78%;
	height: 42%;
	border-right-width: var(--tt-lijn);
	border-top-width: var(--tt-lijn);
	border-top-right-radius: var(--tt-lijn-radius);
}

.is-style-lijnen-linksonder::after {
	top: calc(var(--tt-lijn) * -1);
	left: calc(var(--tt-lijn) * -1);
	right: 76%;
	height: 22%;
	border-right-width: var(--tt-lijn);
	border-bottom-width: var(--tt-lijn);
	border-bottom-right-radius: var(--tt-lijn-radius);
}

/* Lijnkleur volgt de achtergrond (combinaties uit het brandbook). */
.has-oranje-background-color {
	--tt-lijn-kleur: var(--wp--preset--color--off-white);
}

.has-blauw-background-color,
.has-lichtblauw-background-color {
	--tt-lijn-kleur: var(--wp--preset--color--blauw-4);
}

.has-blauw-4-background-color {
	--tt-lijn-kleur: var(--wp--preset--color--lichtblauw);
}

.has-donkerblauw-background-color {
	--tt-lijn-kleur: var(--wp--preset--color--donkerblauw-2);
}

@media (max-width: 781px) {
	.is-style-lijnen-rechtsboven::after,
	.is-style-lijnen-linksonder::after {
		display: none;
	}

	.is-style-lijnen-rechtsboven::before {
		left: 82%;
		height: 4.5rem;
	}

	.is-style-lijnen-linksonder::before {
		right: 82%;
		height: 4.5rem;
	}
}

/* Lijnenspel in een kaart (bijv. de contactkaart): de lijnen krijgen een eigen strook rechts, de inhoud blijft
 * links daarvan. Zo lopen de lijnen nooit door tekst of buttons (leesbaarheid en contrast). */
.is-style-kaart-hoek.is-style-lijnen-rechtsboven::before {
	left: 84%;
	height: 55%;
}

.is-style-kaart-hoek.is-style-lijnen-rechtsboven::after {
	top: 68%;
	left: 91%;
}

.is-style-kaart-hoek.is-style-lijnen-rechtsboven > * {
	max-width: 80%;
}

@media (max-width: 781px) {
	.is-style-kaart-hoek.is-style-lijnen-rechtsboven::before {
		left: 84%;
		height: 4.5rem;
	}
}

/* ---------- Lijsten ---------- */

.is-style-vinkjes,
.is-style-kruisjes,
.is-style-checklist {
	list-style: none;
	padding-left: 0;
}

.is-style-vinkjes > li,
.is-style-kruisjes > li {
	position: relative;
	padding-left: 1.75em;
}

.is-style-vinkjes > li + li,
.is-style-kruisjes > li + li {
	margin-top: 0.5em;
}

.is-style-vinkjes > li::before,
.is-style-kruisjes > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%; /* verticaal gecentreerd, ook bij meerdere regels */
	transform: translateY(-50%);
	width: 1.1em;
	height: 1.1em;
	background-repeat: no-repeat;
	background-size: contain;
}

.is-style-vinkjes > li::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E8A5E' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E");
}

.is-style-kruisjes > li::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D93838' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
}

.is-style-checklist > li {
	display: flex;
	align-items: center;
	gap: 0.9em;
	padding: 0.85em 1.1em;
	border-radius: var(--tt-r-klein);
	background: var(--wp--preset--color--lichtblauw);
	color: var(--wp--preset--color--donkerblauw);
	font-weight: 600;
}

.is-style-checklist > li + li {
	margin-top: 0.6em;
}

.is-style-checklist > li::before {
	content: "";
	flex: 0 0 auto;
	width: 1.75em;
	height: 1.75em;
	border-radius: 50%;
	background: var(--wp--preset--color--wit) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B1343' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 60% no-repeat;
}

/* ---------- Beeld ---------- */

.wp-block-image.is-style-grote-hoek img,
.tt-grote-hoek img,
.wp-block-media-text.is-style-grote-hoek .wp-block-media-text__media img {
	border-radius: var(--tt-r-middel);
	border-top-right-radius: var(--tt-r-hoek);
}

/* D-vorm volgens het brandbook (slide 40–41): staand kader, grote hoek rechtsboven en linksonder,
 * kleine hoeken (16px) linksboven en rechtsonder (Ruimte en afronding: vormfamilie). */
.wp-block-image.is-style-d-vorm img {
	border-radius: var(--tt-r-middel) var(--tt-r-hoek) var(--tt-r-middel) var(--tt-r-hoek);
}

/* ---------- Paginakop: home ----------
 * Overige componenten: Heading 1, subtitle en primary + secondary links (6 kolommen), rechts een foto 1:1 met de grote
 * hoek rechtsboven (6 kolommen), verticaal gecentreerd. 64px onder de kop, 96px tot de eerste sectie (tablet 48/64,
 * mobiel 32/48). Mobiel: eerst de tekst, dan de foto (3:2, grote hoek 48). */

.tt-held {
	padding: var(--wp--preset--spacing--60) var(--tt-zijkant) var(--wp--preset--spacing--70) !important;
}

.tt-held > .wp-block-columns {
	box-sizing: border-box;
	max-width: var(--wp--style--global--wide-size, 74rem);
	margin: 0 auto;
	align-items: center;
}

.tt-held .tt-held__tekst,
.tt-held .tt-held__beeld {
	min-width: 0; /* een woord langer dan de kolom breekt af in plaats van de kolom te verbreden */
	flex: 1 1 0 !important;
	align-self: center;
	padding: 0;
}

.tt-held .tt-held__tekst > .wp-block-buttons {
	margin-top: 2rem; /* subtitle → buttons 32px */
}

/* Home, desktop (2.41.0, besluit 21-10, variant A): 48px tussen tekst en foto in plaats van 24px; tekst en foto blijven
 * elk de helft. Alleen de home; andere paginakoppen met foto houden 24px. */
@media (min-width: 1280px) {
	.home .tt-held > .wp-block-columns {
		gap: var(--wp--preset--spacing--50) !important;
	}
}

.tt-held .tt-held__afbeelding {
	margin: 0;
}

.tt-held .tt-held__afbeelding img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--tt-r-middel) var(--tt-r-hoek) var(--tt-r-middel) var(--tt-r-middel);
}

@media (max-width: 781px) {
	.tt-held > .wp-block-columns {
		flex-direction: column;
		flex-wrap: nowrap !important; /* bij wrap wordt de regel zo breed als het langste woord */
		align-items: stretch;
	}

	.tt-held .tt-held__tekst,
	.tt-held .tt-held__beeld {
		align-self: stretch; /* volle breedte, ook bij een heel lang woord in de titel */
	}

	.tt-held .tt-held__afbeelding img {
		aspect-ratio: 3 / 2;
	}
}

/* ---------- Tabellen ---------- */

.wp-block-table table {
	border-collapse: collapse;
}

.wp-block-table th,
.wp-block-table td {
	padding: 0.6em 0.8em;
	border: 1px solid var(--wp--preset--color--rand);
	text-align: left;
	vertical-align: top;
}

.wp-block-table thead th {
	background: var(--wp--preset--color--blauw-4);
	color: var(--wp--preset--color--donkerblauw);
}

@media print {
	.is-style-lijnen-rechtsboven::before,
	.is-style-lijnen-rechtsboven::after,
	.is-style-lijnen-linksonder::before,
	.is-style-lijnen-linksonder::after {
		display: none;
	}
}

/* Plek voor een formulier dat nog gekoppeld moet worden. */
.tt-formulier-plek {
	padding: var(--wp--preset--spacing--40);
	border: 2px dashed currentColor;
	border-radius: var(--tt-r-klein);
	font-size: var(--wp--preset--font-size--small);
}

/* ---------- Componenten voor de pagina's (wireframes 2026-09) ---------- */

/* Tijdlijn (2.36.0, variant B uit Voorstel tijdlijn Over ons.html): content-icoon (48px, oranje nuance 1) boven elk jaartal,
 * 24px eronder de lijn (3px oranje) met een rondje van 16px. De lijn loopt door de 48px tussen de jaartallen heen; icoon,
 * rondje en tekst links uitgelijnd. */
.tt-tijdlijn__item {
	position: relative;
	padding-top: calc(3rem + 1.5rem + 3px + var(--wp--preset--spacing--40));
}

.tt-tijdlijn__item > .wp-block-image.tt-icoon {
	position: absolute;
	top: 0;
	left: 0;
	margin: 0 !important;
}

.tt-tijdlijn__item > .tt-tijdlijn__jaar {
	margin-top: 0 !important;
}

.tt-tijdlijn__item::after {
	content: "";
	position: absolute;
	top: calc(3rem + 1.5rem);
	left: 0;
	right: calc(-1 * var(--wp--preset--spacing--50));
	border-top: 3px solid var(--wp--preset--color--oranje);
}

.tt-tijdlijn__item:last-child::after {
	right: 0;
}

.tt-tijdlijn__item::before {
	content: "";
	position: absolute;
	top: calc(3rem + 1.5rem + 1.5px - 0.5rem);
	left: 0;
	width: 1rem;
	height: 1rem;
	border-radius: 50%;
	background: var(--wp--preset--color--oranje);
}

/* Tijdlijn loopt horizontaal door (scrollen), zoals in het ontwerp */
.tt-tijdlijn .wp-block-group.is-layout-grid {
	display: flex;
	gap: var(--wp--preset--spacing--50);
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	padding-top: 0.75rem;
	padding-bottom: var(--wp--preset--spacing--30);
}

.tt-tijdlijn .tt-tijdlijn__item {
	flex: 0 0 min(17rem, 80%);
	scroll-snap-align: start;
}

/* Gespreksoproep in een vlak (Over ons, onder het verhaal van Edwin, 2.35.0): vraag in Body L vet en een primary op één regel,
 * in de kleur van de portretcard; past het niet (tablet, mobiel), dan onder elkaar met 16px ertussen. */
.is-style-kaart.tt-oproep {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	margin-top: var(--wp--preset--spacing--50);
}

.is-style-kaart.tt-oproep > * {
	margin: 0 !important;
	padding-top: 0 !important; /* geen extra ruimte boven de button zoals bij een card met button: de rij-gap (16px) is de ruimte */
}

/* Titel per jaartal (Over ons, 2.33.0): H3 in de stijl van Heading 5, onder het jaartal (Body L vet) */
.tt-tijdlijn__item > h3.wp-block-heading {
	font-family: var(--wp--preset--font-family--plus-jakarta-sans);
	font-size: var(--wp--preset--font-size--kop-5) !important;
	font-weight: 700;
	line-height: var(--wp--custom--line-height--kop-5);
	letter-spacing: 0;
	margin-top: var(--wp--preset--spacing--20);
}

.tt-tijdlijn__item > h3.wp-block-heading + p {
	margin-top: var(--wp--preset--spacing--20);
}

/* ---------- Overige componenten ----------
 * Volgens design_system/02 Verbeterd/Overige componenten.pdf (vastgesteld 2026-10-14). */

/* Uitklaplijst (veelgestelde vragen): lijnen tussen de vragen, geen vlak. Vraag Heading 5 met chevron (16px) rechts,
 * 16px boven en onder; antwoord Body M, 16px onder de vraag, 24px tot de lijn, rechts 40px vrij. Hover: onderstreept. */
.wp-block-details {
	padding: 0 !important;
	border-bottom: 1px solid var(--wp--preset--color--rand);
}

:not(.wp-block-details) + .wp-block-details,
.wp-block-details:first-child {
	border-top: 1px solid var(--wp--preset--color--rand);
}

.wp-block-details + .wp-block-details {
	margin-block-start: 0 !important;
}

.wp-block-details summary {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 1rem 0;
	color: var(--wp--preset--color--donkerblauw);
	font-family: var(--wp--preset--font-family--plus-jakarta-sans);
	font-size: var(--wp--preset--font-size--kop-5);
	font-weight: 700;
	line-height: var(--wp--custom--line-height--kop-5);
	list-style: none;
	cursor: pointer;
}

.wp-block-details summary::-webkit-details-marker {
	display: none;
}

.wp-block-details summary::after {
	content: "";
	flex: 0 0 auto;
	width: 1rem;
	height: 1rem;
	margin-top: calc((1lh - 1rem) / 2); /* op de eerste regel */
	background-color: currentColor;
	-webkit-mask: var(--tt-icoon-chevron-m) center / contain no-repeat;
	mask: var(--tt-icoon-chevron-m) center / contain no-repeat;
	transition: transform 0.15s ease;
}

.wp-block-details[open] > summary::after {
	transform: rotate(180deg);
}

.wp-block-details summary:hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.25em;
}

.wp-block-details summary:focus-visible {
	margin-inline: -1rem;
	padding-inline: 1rem;
	border-radius: var(--tt-r-middel);
	outline: 2px solid var(--tt-focus);
	outline-offset: -2px;
}

.wp-block-details > :not(summary) {
	margin: 0 2.5rem 0 0;
	color: var(--wp--preset--color--bodytekst);
}

.wp-block-details > summary + * {
	margin-top: 0;
}

.wp-block-details > :last-child:not(summary) {
	margin-bottom: 1.5rem;
}

@media (max-width: 599px) {
	.wp-block-details > :not(summary) {
		margin-right: 0;
	}
}

/* Onderwerpenlijst naast de veelgestelde vragen: kop "Onderwerpen" (Heading 5) en een lijst in de vorm van de open
 * lijst (wit, rand 1px nuance 4, afronding 24, binnenruimte 8, items 48px). Onderwerp in beeld: blauw nuance 4 + Bold.
 * Blijft staan tijdens het scrollen (desktop). */
:is(.is-style-kaart, .is-style-kaart-hoek):has(> .tt-onderwerpen) {
	padding: 0;
	border-radius: 0;
	background: none !important;
}

@media (min-width: 1280px) {
	:is(.is-style-kaart, .is-style-kaart-hoek):has(> .tt-onderwerpen) {
		position: sticky;
		top: calc(var(--tt-kop-h, 6rem) + 1.5rem);
	}
}

:is(.is-style-kaart, .is-style-kaart-hoek):has(> .tt-onderwerpen) > h2 {
	margin-bottom: 1rem;
	font-family: var(--wp--preset--font-family--plus-jakarta-sans);
	font-size: var(--wp--preset--font-size--kop-5) !important;
	font-weight: 700;
	line-height: var(--wp--custom--line-height--kop-5);
	letter-spacing: 0;
}

.tt-onderwerpen {
	display: flex;
	flex-direction: column;
	margin: 0 !important;
	padding: 0.5rem;
	border: 1px solid var(--wp--preset--color--donkerblauw-4);
	border-radius: var(--wp--custom--radius--groot);
	background: var(--wp--preset--color--wit);
	list-style: none;
}

.tt-onderwerpen li {
	margin: 0 !important;
}

.tt-onderwerpen a {
	display: flex;
	align-items: center;
	min-height: 3rem;
	padding: 0 1rem;
	border-radius: var(--tt-r-pill);
	color: var(--wp--preset--color--donkerblauw);
	font-size: var(--wp--preset--font-size--medium) !important;
	line-height: var(--wp--custom--line-height--body-m) !important;
	text-decoration: none;
}

.tt-onderwerpen a:hover,
.tt-onderwerpen a[aria-current] {
	background: var(--wp--preset--color--blauw-4);
}

.tt-onderwerpen a[aria-current] {
	font-weight: 700;
}

.tt-onderwerpen a:focus-visible {
	outline: 2px solid var(--tt-focus);
	outline-offset: -2px;
}

/* Filters: 48px, volledig rond, rand 1px nuance 4, Body M; meerdere tegelijk. Gekozen: vlak in Geselecteerd (#0062FF),
 * witte tekst Bold met een vink (16px). "Wis filters" als tertiary zodra er iets gekozen is. */
.tt-filters {
	margin: 0;
	padding: 0;
	border: 0;
}

.tt-filters legend {
	margin-bottom: 0.5rem;
	padding: 0;
	color: var(--wp--preset--color--donkerblauw);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	line-height: var(--wp--custom--line-height--body-m);
}

.tt-filters__lijst {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.tt-filter {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	box-sizing: border-box;
	min-height: 3rem;
	padding: 0 calc(1.5rem - 1px);
	border: 1px solid var(--wp--preset--color--donkerblauw-4);
	border-radius: var(--tt-r-pill);
	background: none;
	color: var(--wp--preset--color--donkerblauw);
	font-family: var(--wp--preset--font-family--plus-jakarta-sans);
	font-size: var(--wp--preset--font-size--medium);
	line-height: var(--wp--custom--line-height--body-m);
	white-space: nowrap;
	cursor: pointer;
}

.tt-filter:hover {
	background: var(--wp--preset--color--blauw-4);
}

.tt-filter:focus-visible {
	outline: 2px solid var(--tt-focus);
	outline-offset: 2px;
}

.tt-filter:is(a) {
	text-decoration: none;
}

.tt-filter[aria-pressed="true"],
.tt-filter[aria-current] {
	border-color: var(--wp--preset--color--geselecteerd);
	background: var(--wp--preset--color--geselecteerd);
	color: var(--wp--preset--color--wit);
	font-weight: 700;
}

.tt-filter[aria-pressed="true"]::before,
.tt-filter[aria-current]::before {
	content: "";
	width: 1rem;
	height: 1rem;
	margin-left: -0.25rem;
	background-color: currentColor;
	-webkit-mask: var(--tt-icoon-vink) center / contain no-repeat;
	mask: var(--tt-icoon-vink) center / contain no-repeat;
}

/* Labels (Nieuws & inzichten, 20-10): één keuze, als links met "Alle artikelen" voorop; in de paginakop gecentreerd.
 * Mobiel: één rij die opzij schuift, van rand tot rand, zoals de schuifrij met cards. */
.tt-filters--labels {
	max-width: var(--wp--style--global--wide-size) !important;
	margin-top: var(--tt-ruimte-button) !important;
}

.tt-filters--labels .tt-filters__lijst {
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 599px) {
	.tt-filters--labels .tt-filters__lijst {
		flex-wrap: nowrap;
		justify-content: flex-start;
		margin-inline: calc(-1 * var(--wp--style--root--padding-left, 1rem));
		padding: 0.25rem var(--wp--style--root--padding-left, 1rem);
		overflow-x: auto;
		scroll-padding-inline: var(--wp--style--root--padding-left, 1rem);
		scrollbar-width: none;
	}

	.tt-filters--labels .tt-filters__lijst::-webkit-scrollbar {
		display: none;
	}

	.tt-filters--labels li {
		flex: none;
	}
}

/* "Wis filters": tertiary (tekst op de lijn, onderstreept bij hover). */
.tt-filters__wis {
	min-height: 3rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--tt-tertiary);
	font-family: var(--wp--preset--font-family--plus-jakarta-sans);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.5;
	cursor: pointer;
}

.tt-filters__wis:hover {
	color: var(--tt-tertiary-hover);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.25em;
}

.tt-filters__wis:focus-visible {
	outline: 2px solid var(--tt-focus);
	outline-offset: 2px;
	border-radius: var(--tt-r-pill);
}

.tt-filters__onder {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	margin-top: 1rem;
	font-size: var(--wp--preset--font-size--body-s);
	line-height: var(--wp--custom--line-height--body-s);
}

/* Paginering (querylus): cijfers in een rondje van 48px, 8px ertussen; huidige pagina in Geselecteerd met witte tekst
 * Bold; vorige en volgende als icoon-button secondary, 16px van de cijfers. Gecentreerd, 48px onder de cards (20-10).
 * Desktop en tablet: eerste, laatste en de pagina's naast de huidige (max. 7). Mobiel: eerste, huidige en laatste. */
.wp-block-query-pagination {
	justify-content: center !important;
	gap: 0.5rem;
	margin-top: 3rem;
}

.wp-block-query-pagination-numbers {
	display: flex;
	gap: 0.5rem;
	margin: 0 0.5rem;
}

.wp-block-query-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 3rem;
	height: 3rem;
	border-radius: var(--tt-r-pill);
	color: var(--wp--preset--color--donkerblauw);
	font-size: var(--wp--preset--font-size--medium);
	text-decoration: none;
}

.wp-block-query-pagination a.page-numbers:hover {
	background: var(--wp--preset--color--blauw-4);
}

.wp-block-query-pagination .page-numbers.current {
	background: var(--wp--preset--color--geselecteerd);
	color: var(--wp--preset--color--wit);
	font-weight: 700;
}

.wp-block-query-pagination .page-numbers.dots {
	min-width: 1.5rem;
	color: var(--wp--preset--color--bodytekst);
}

.wp-block-query-pagination :is(.wp-block-query-pagination-previous, .wp-block-query-pagination-next) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 3rem;
	height: 3rem;
	overflow: hidden;
	border: 2px solid var(--tt-button);
	border-radius: 50%;
	background: var(--tt-button-vlak);
	color: transparent;
	font-size: 0;
	text-decoration: none;
}

.wp-block-query-pagination :is(.wp-block-query-pagination-previous, .wp-block-query-pagination-next)::before {
	content: "";
	width: 1.25rem;
	height: 1.25rem;
	background-color: var(--tt-button);
	-webkit-mask: var(--tt-icoon-pijl) center / contain no-repeat;
	mask: var(--tt-icoon-pijl) center / contain no-repeat;
}

.wp-block-query-pagination .wp-block-query-pagination-previous::before {
	-webkit-mask-image: var(--tt-icoon-pijl-links);
	mask-image: var(--tt-icoon-pijl-links);
}

.wp-block-query-pagination :is(.wp-block-query-pagination-previous, .wp-block-query-pagination-next):hover {
	background: var(--tt-button-vlak-hover);
}

.wp-block-query-pagination :is(.wp-block-query-pagination-previous-arrow, .wp-block-query-pagination-next-arrow) {
	display: none;
}

.wp-block-query-pagination :is(a, span):focus-visible {
	outline: 2px solid var(--tt-focus);
	outline-offset: 2px;
}

.wp-block-query-pagination-numbers.tt-paginering--klein {
	display: none;
}

@media (max-width: 599px) {
	.wp-block-query-pagination {
		gap: 0.25rem;
	}

	.wp-block-query-pagination-numbers.tt-paginering--groot {
		display: none;
	}

	.wp-block-query-pagination-numbers.tt-paginering--klein {
		display: flex;
		gap: 0.25rem;
		margin: 0;
	}

	.wp-block-query-pagination .page-numbers.dots {
		min-width: 1rem;
	}
}

/* Zoeken in een paginakop (gecentreerd kort blok): het zoekveld maximaal 6 kolommen, in het midden, 32px onder de tekst. */
.has-text-align-center ~ .wp-block-search {
	max-width: 36rem;
	margin-inline: auto;
	margin-top: 2rem;
}

/* Actieblok: sectie in oranje die vraagt om één actie; kort blok, dus gecentreerd. Heading 2, Body L, maximaal twee
 * buttons (contrastvarianten op oranje). Lijnenspel in off-white vanaf de rechterrand, één bocht, nooit door tekst. */
.is-style-actieblok {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	text-align: center;
}

.is-style-actieblok:not(.has-background) {
	background: var(--wp--preset--color--oranje);
}

.is-style-actieblok > .wp-block-buttons {
	justify-content: center;
}

@media (max-width: 599px) {
	.is-style-actieblok > .wp-block-buttons {
		align-items: center;
	}
}

.is-style-actieblok::after {
	content: "";
	position: absolute;
	right: calc(-1 * var(--tt-lijn));
	bottom: calc(-1 * var(--tt-lijn));
	z-index: -1;
	width: min(14%, 12rem);
	height: 70%;
	border: 0 solid var(--wp--preset--color--off-white);
	border-top-width: var(--tt-lijn);
	border-left-width: var(--tt-lijn);
	border-top-left-radius: var(--tt-r-hoek);
	pointer-events: none;
}

@media (max-width: 781px) {
	.is-style-actieblok::after {
		width: 3rem;
		height: 40%;
	}
}

/* ---------- Opbouw van pagina's ----------
 * Onderdelen die de paginabouwer (tools/lofi-paginas/build_pages.py) gebruikt, volgens Overige componenten, Cards en
 * Formulieren. */

/* Paginakop type 2: overzicht met zoeken. Off-white, gecentreerd kort blok (Heading 1, Body L, zoekveld max. 6
 * kolommen), oranje lijnenspel vanaf de rechterrand onder de kop; nooit door de tekst. */
.tt-paginakop--zoeken {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	text-align: center;
}

.tt-paginakop--zoeken::after {
	content: "";
	position: absolute;
	top: 1.5rem;
	right: calc(-1 * var(--tt-lijn));
	bottom: calc(-1 * var(--tt-lijn));
	z-index: -1;
	width: 10%;
	border: 0 solid var(--wp--preset--color--oranje);
	border-top-width: var(--tt-lijn);
	border-left-width: var(--tt-lijn);
	border-top-left-radius: var(--tt-r-hoek);
	pointer-events: none;
}

@media (max-width: 781px) {
	.tt-paginakop--zoeken::after {
		width: 2.5rem;
		height: 5rem;
		bottom: auto;
	}
}

/* Paginakop type 4: artikel. Label (datum of categorie), Heading 1 en subtitle; de foto (16:9, grote hoek rechtsboven)
 * staat eronder, 8 kolommen breed. */
/* Juridische pagina's (Privacy- en cookieverklaring, Algemene voorwaarden, Klachtenservice): de kop staat links, op dezelfde lijn als de tekst eronder (brede inhoudsbreedte), in plaats van gecentreerd in de smalle tekstkolom. */
.tt-paginakop--links > * {
	margin-left: max(0px, calc((100% - var(--wp--style--global--wide-size, 74rem)) / 2)) !important;
	margin-right: auto !important;
}

.tt-paginakop--artikel .tt-paginakop__foto img {
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--tt-r-middel) var(--tt-r-hoek) var(--tt-r-middel) var(--tt-r-middel);
}

/* Paginakop type 3 (pagina met foto): opbouw als de home, foto 3:2. */
.tt-held--3-2 .tt-held__afbeelding img {
	aspect-ratio: 3 / 2;
}

/* Tekst met foto: foto 6 kolommen, tekst 5 kolommen met 1 kolom lucht; verticaal gecentreerd; de grote hoek aan de
 * buitenkant (weg van de tekst). Tablet 4 + 4; mobiel foto boven de tekst. */
.tt-tekst-foto.wp-block-columns {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	align-items: center;
}

.tt-tekst-foto > .wp-block-column {
	flex-basis: auto !important;
	min-width: 0;
}

.tt-tekst-foto > .tt-tekst-foto__foto { grid-column: 1 / 7; }
.tt-tekst-foto > .tt-tekst-foto__tekst { grid-column: 8 / 13; }
.tt-tekst-foto--rechts > .tt-tekst-foto__tekst { grid-column: 1 / 6; grid-row: 1; }
.tt-tekst-foto--rechts > .tt-tekst-foto__foto { grid-column: 7 / 13; grid-row: 1; }

.tt-tekst-foto__foto .wp-block-image,
.tt-tekst-foto__foto .wp-block-image img {
	margin: 0;
}

.tt-tekst-foto__foto img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--tt-r-hoek) var(--tt-r-middel) var(--tt-r-middel) var(--tt-r-middel);
}

.tt-tekst-foto--rechts .tt-tekst-foto__foto img {
	border-radius: var(--tt-r-middel) var(--tt-r-hoek) var(--tt-r-middel) var(--tt-r-middel);
}

/* Bovenaan uitgelijnd (20-10): staat er in de tekst iets dat uitklapt (uitklaplijst), dan staan foto en tekst bovenaan,
 * zodat de foto niet verspringt bij openen. De bovenkant van de Heading 2 staat gelijk met de bovenkant van de foto. */
.tt-tekst-foto--boven.wp-block-columns {
	align-items: start;
}

.tt-tekst-foto--boven > .tt-tekst-foto__tekst > .wp-block-heading:first-child {
	margin-top: -0.25em; /* oudere browsers */
	margin-top: calc((1cap - 1lh) / 2); /* de ruimte boven de hoofdletters in de regel: letters gelijk met de foto (gemeten) */
}

/* Foto bovenaan bij hogere tekst (22-10): de tekst blijft gecentreerd en bepaalt de rijhoogte als hij hoger is dan de foto;
 * de foto staat dan bovenaan, de bovenkant van de hoofdletters van de Heading 2 gelijk met de foto. Is de tekst lager, dan
 * is de tekst gecentreerd naast de foto (de foto bepaalt de rij). Voor tekst met een button of lijst naast de foto. */
.tt-tekst-foto--foto-boven > .tt-tekst-foto__foto {
	align-self: start;
}

.tt-tekst-foto--foto-boven > .tt-tekst-foto__tekst > .wp-block-heading:first-child {
	margin-top: calc((1cap - 1lh) / 2);
}

@media (max-width: 1279px) {
	.tt-tekst-foto > .tt-tekst-foto__foto { grid-column: 1 / 7; }
	.tt-tekst-foto > .tt-tekst-foto__tekst { grid-column: 7 / 13; }
	.tt-tekst-foto--rechts > .tt-tekst-foto__tekst { grid-column: 1 / 7; }
	.tt-tekst-foto--rechts > .tt-tekst-foto__foto { grid-column: 7 / 13; }
}

@media (max-width: 599px) {
	.tt-tekst-foto.wp-block-columns {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 1.5rem;
	}

	.tt-tekst-foto > .wp-block-column,
	.tt-tekst-foto--rechts > .wp-block-column {
		grid-column: 1 !important;
	}

	.tt-tekst-foto > .tt-tekst-foto__foto { grid-row: 1 !important; }
	.tt-tekst-foto > .tt-tekst-foto__tekst { grid-row: 2 !important; }

	.tt-tekst-foto__foto img,
	.tt-tekst-foto--rechts .tt-tekst-foto__foto img {
		border-radius: var(--tt-r-hoek) var(--tt-r-middel) var(--tt-r-middel) var(--tt-r-middel);
	}
}

/* Sectiekop: Heading 2 met Body L, maximaal 8 kolommen; 32px tot de inhoud. Gecentreerd mag alleen boven een rij cards
 * of tegels (Uitlijning). */
.tt-sectiekop {
	max-width: var(--wp--style--global--content-size, 48.75rem);
	margin-bottom: 2rem !important;
}

.tt-sectiekop.has-text-align-center,
.tt-sectiekop.is-gecentreerd {
	margin-inline: auto !important;
	text-align: center;
}

.tt-onder-rij {
	margin-top: 2rem !important;
}

/* Reeks foto's (bijv. het team op Over ons): foto's 1:1 met één grote hoek op wisselende plek (slide 59). */
.tt-reeks .wp-block-image img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--tt-r-middel);
}

.tt-reeks .wp-block-image:nth-child(4n+1) img { border-top-left-radius: min(var(--tt-hoek), 4rem); }
.tt-reeks .wp-block-image:nth-child(4n+2) img { border-bottom-right-radius: min(var(--tt-hoek), 4rem); }
.tt-reeks .wp-block-image:nth-child(4n+3) img { border-bottom-left-radius: min(var(--tt-hoek), 4rem); }
.tt-reeks .wp-block-image:nth-child(4n) img { border-top-right-radius: min(var(--tt-hoek), 4rem); }

/* Persoon (Ons team): foto 1:1 met de functie als tag (bijschrift), naam Heading 3, e-mailadres als link. Niet klikbaar
 * als geheel: geen hover op de card. */
:is(.is-style-kaart, .is-style-kaart-hoek):not(:has(> .wp-block-heading a)):hover > .wp-block-image img {
	transform: none;
}

:is(.is-style-kaart, .is-style-kaart-hoek):has(> .wp-block-image:first-child + .wp-block-heading + p:last-child) > .wp-block-image img {
	aspect-ratio: 1 / 1;
}

/* Reviews: sterren (gevuld oranje nuance 1, leeg lijn donkerblauw nuance 4) met de waarde ook als tekst. */
/* Iconografie, gevuld en leeg: sterren 16px met 4px ertussen, de waarde eronder als tekst (Body S, bodytekst), 8px ertussen. */
.tt-sterren {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.25rem;
	margin: 0;
	font-size: var(--wp--preset--font-size--body-s);
	color: var(--wp--preset--color--bodytekst);
}

.tt-sterren__waarde {
	flex-basis: 100%;
}

/* Op lichtblauw haalt bodytekst geen 4,5:1 (4,46): "5 van 5" wordt donkerblauw (Cards, tekst per kaartkleur; 2.40.1). */
.has-lichtblauw-background-color .tt-sterren {
	color: var(--wp--preset--color--donkerblauw);
}

.tt-sterren__ster {
	width: 1rem;
	height: 1rem;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.8l2.8 5.8 6.3.9-4.6 4.4 1.1 6.3L12 17.2l-5.6 3 1.1-6.3-4.6-4.4 6.3-.9z' fill='%23ED8121' stroke='%23ED8121' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.tt-sterren__ster.is-leeg {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.8l2.8 5.8 6.3.9-4.6 4.4 1.1 6.3L12 17.2l-5.6 3 1.1-6.3-4.6-4.4 6.3-.9z' fill='none' stroke='%2366578B' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Onderwerpen naast de veelgestelde vragen: lijst 3 kolommen, vragen 8 kolommen (kolom 5–12). */
.tt-faq-indeling.wp-block-columns {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	align-items: start;
}

.tt-faq-indeling > .wp-block-column { flex-basis: auto !important; min-width: 0; }
.tt-faq-indeling > .wp-block-column:first-child { grid-column: 1 / 4; }
.tt-faq-indeling > .wp-block-column:last-child { grid-column: 5 / 13; }

.tt-faq-indeling .tt-faq-onderwerp + .tt-faq-onderwerp {
	margin-top: 4rem;
}

@media (max-width: 1279px) {
	.tt-faq-indeling.wp-block-columns { grid-template-columns: minmax(0, 1fr); row-gap: 3rem; }
	.tt-faq-indeling > .wp-block-column { grid-column: 1 !important; }
}

/* Formulier met foto: formulierkolom (max. 40rem) links, staande foto (4:5, grote hoek rechtsboven) rechts.
 * Op mobiel geen foto en het formulier niet in een card. */
.tt-formulier-indeling.wp-block-columns {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	align-items: start;
}

.tt-formulier-indeling > .wp-block-column { flex-basis: auto !important; min-width: 0; }
.tt-formulier-indeling > .wp-block-column:first-child { grid-column: 1 / 8; }
.tt-formulier-indeling > .wp-block-column:last-child { grid-column: 8 / 13; }

.tt-formulier-indeling .wp-block-image img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--tt-r-middel) var(--tt-r-hoek) var(--tt-r-middel) var(--tt-r-middel);
}

/* Formulieren: een foto naast het formulier alleen op desktop; op tablet en mobiel één kolom. Een kolom zonder foto
 * met het contactvlak verdwijnt: het kleine contactvlak staat dan boven het formulier. */
@media (max-width: 1279px) {
	.tt-formulier-indeling.wp-block-columns { grid-template-columns: minmax(0, 1fr); row-gap: var(--wp--preset--spacing--50); }
	.tt-formulier-indeling > .wp-block-column:first-child,
	.tt-formulier-indeling > .wp-block-column:last-child { grid-column: 1; }
	.tt-formulier-indeling > .wp-block-column:last-child:has(> .wp-block-image) { display: none; }
	.tt-formulier-indeling > .tt-formulier__zij { display: none; } /* contactvlak staat dan al boven het formulier (2.48.0) */
}

.tt-formulier fieldset .tt-opties {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.tt-formulier .tt-optie + .tt-optie {
	margin-top: 0;
}

/* Statement op donkerblauw (accent, max. één per pagina): gecentreerd kort blok, tekst wit, inverse buttons. */
.tt-statement {
	text-align: center;
}

.tt-statement > .wp-block-buttons {
	justify-content: center;
}

/* Uitgelichte card (portret): label, titel, citaat (Body L), naam en de actie. */
.is-style-uitgelicht-portret .wp-block-quote {
	margin: 1rem 0 0;
	padding: 0;
	border: 0;
}

.is-style-uitgelicht-portret .wp-block-quote cite {
	display: block;
	margin-top: 1rem;
	color: var(--wp--preset--color--bodytekst);
	font-size: var(--wp--preset--font-size--body-s);
	font-style: normal;
}

/* Kaarten met een button (card met button): oranje nuance 4 op wit, zodat de secondary zijn gewone states houdt. */
.tt-kaart-met-button:not(.has-background) {
	background: var(--wp--preset--color--oranje-4) !important;
}

/* ---------- Typografie (sitebreed) ----------
 * Design system typografie (vastgesteld 2026-10-06, design_system/02 Verbeterd/Typografie.pdf).
 * Stijlen heten naar hun functie. Maat / regelafstand in px, desktop (vanaf 1280px) · tablet (600–1279px) · mobiel:
 *   Heading 1   huge       56/64 · 44/52 · 30/36  Alcyone Medium     paginatitel
 *   Heading 2   xx-large   40/48 · 32/40 · 24/32  Alcyone Medium     sectietitel
 *   Heading 3   x-large    28/36 · 26/32 · 20/28  Alcyone SemiBold   tussenkop, titels van kaarten en tegels
 *   Heading 4   kop-4      24/32 · 22/28 · 18/24  Plus Jakarta Bold  tussenkop in lopende tekst
 *   Heading 5   kop-5      20/28 · 20/28 · 16/24  Plus Jakarta Bold  kleinste kop (H5–H6), kolomtitels voet
 *   Subtitle    large      22/32 · 22/32 · 20/28  Medium             alleen direct onder de H1
 *   Body L      intro      20/28 · 20/28 · 18/28  Regular            intro onder een H2, citaten
 *   Body M      medium     18/28 · 18/28 · 16/24  Regular            standaard lopende tekst
 *   Body S      body-s     16/24 · 16/24 · 14/20  Regular            tekst in kaarten en de voet, hulptekst
 *   Caption     small      14/20                  Regular            datums, bijschriften, copyright, foutmeldingen
 *   Label       tt-label   14/20                  SemiBold           boven een titel, bijv. categorie op een kaart
 *   Statement   statement  32/40 · 28/36 · 24/32  Alcyone Medium     grote uitspraak
 *   Buttons en invoervelden altijd 16px.
 * Lettergroottes zijn even; regelafstanden vallen op een 4px-grid en staan als verhouding, zodat ze meeschalen.
 * Koppen krijgen altijd hun vaste maat, ook als in de editor een andere maat is gekozen. Woorden worden nooit afgebroken.
 * Uitzondering: de kolomtitels in de voet (tt-voet__kop).
 * Desktopmaten pas vanaf 1280px (2026-10-06): daaronder zijn de hero, de zijbalken en de tegels (4 per rij) te smal voor H1 56, H2 40 en H3 28.
 * De navigatie wisselt wel al bij 1024px. */
@media (min-width: 600px) and (max-width: 1279px) {
	:root:root {
		--wp--preset--font-size--huge: 2.75rem;
		--wp--preset--font-size--xx-large: 2rem;
		--wp--preset--font-size--x-large: 1.625rem;
		--wp--preset--font-size--kop-4: 1.375rem;
		--wp--preset--font-size--statement: 1.75rem;
		--wp--custom--line-height--kop-1: calc(52 / 44);
		--wp--custom--line-height--kop-2: calc(40 / 32);
		--wp--custom--line-height--kop-3: calc(32 / 26);
		--wp--custom--line-height--kop-4: calc(28 / 22);
		--wp--custom--line-height--statement: calc(36 / 28);
	}
}

@media (max-width: 599px) {
	:root:root {
		--wp--preset--font-size--huge: 1.875rem;
		--wp--preset--font-size--xx-large: 1.5rem;
		--wp--preset--font-size--x-large: 1.25rem;
		--wp--preset--font-size--kop-4: 1.125rem;
		--wp--preset--font-size--kop-5: 1rem;
		--wp--preset--font-size--large: 1.25rem;
		--wp--preset--font-size--intro: 1.125rem;
		--wp--preset--font-size--medium: 1rem;
		--wp--preset--font-size--body-s: 0.875rem;
		--wp--preset--font-size--statement: 1.5rem;
		--wp--custom--line-height--kop-1: calc(36 / 30);
		--wp--custom--line-height--kop-2: calc(32 / 24);
		--wp--custom--line-height--kop-3: calc(28 / 20);
		--wp--custom--line-height--kop-4: calc(24 / 18);
		--wp--custom--line-height--kop-5: calc(24 / 16);
		--wp--custom--line-height--subtitle: calc(28 / 20);
		--wp--custom--line-height--body-l: calc(28 / 18);
		--wp--custom--line-height--body-m: calc(24 / 16);
		--wp--custom--line-height--body-s: calc(20 / 14);
		--wp--custom--line-height--statement: calc(32 / 24);
	}
}

h1[class*="-font-size"] { font-size: var(--wp--preset--font-size--huge) !important; }
h2[class*="-font-size"]:not(.tt-voet__kop) { font-size: var(--wp--preset--font-size--xx-large) !important; }
h3[class*="-font-size"] { font-size: var(--wp--preset--font-size--x-large) !important; }
h4[class*="-font-size"] { font-size: var(--wp--preset--font-size--kop-4) !important; }
:is(h5, h6)[class*="-font-size"] { font-size: var(--wp--preset--font-size--kop-5) !important; }

/* Koppen breken tussen woorden. Alleen een woord dat langer is dan de hele regel (bijv. "cyberbeveiligingsoplossing" op mobiel)
 * mag afbreken, anders loopt het buiten het scherm. */
:is(h1, h2, h3, h4, h5, h6) {
	hyphens: manual;
	overflow-wrap: break-word;
	word-break: normal;
}

/* Tekstrollen in de editor: Subtitle (large, alleen direct onder de H1), Body L (intro: de korte intro onder een H2 in een
 * sectie en citaten), Body M (zonder maat), Body S, Caption (small). Kopmaten op een alinea worden Body L. */
p.has-large-font-size {
	font-weight: 500;
	line-height: var(--wp--custom--line-height--subtitle);
}

p:is(.has-intro-font-size, .has-kop-5-font-size, .has-kop-4-font-size, .has-x-large-font-size, .has-xx-large-font-size, .has-huge-font-size),
.wp-block-quote p {
	font-size: var(--wp--preset--font-size--intro) !important;
	line-height: var(--wp--custom--line-height--body-l);
}

.has-body-s-font-size {
	line-height: var(--wp--custom--line-height--body-s);
}

.has-small-font-size {
	line-height: var(--wp--custom--line-height--caption);
}

/* Body S: tekst in kaarten (tenzij in de editor een maat is gekozen). De voet regelt zijn eigen maten. */
:is(.is-style-kaart, .is-style-kaart-hoek) :is(p, li):not([class*="-font-size"]) {
	font-size: var(--wp--preset--font-size--body-s);
	line-height: var(--wp--custom--line-height--body-s);
}

/* Label: boven een titel, bijv. de categorie op een kaart. Sentence case, geen hoofdletters. */
.is-style-label,
.tt-label {
	font-size: var(--wp--preset--font-size--small) !important;
	font-weight: 600;
	line-height: var(--wp--custom--line-height--label);
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--donkerblauw-4); /* min. 4,5:1 op off-white, wit, vlak, lichtblauw, blauw-4, oranje-3/4 */
}

/* Waar donkerblauw-4 geen 4,5:1 haalt (blauw 3,7 · oranje 3,5 · rand 4,4): donkerblauw. Op donkere vlakken: wit. */
:is(.has-blauw-background-color, .has-oranje-background-color, .has-rand-background-color,
	[class*="is-style-sectie-blauw"]:not([class*="is-style-sectie-blauw-licht"]), [class*="is-style-sectie-oranje"]) :is(.is-style-label, .tt-label) {
	color: var(--wp--preset--color--donkerblauw);
}

:is(.has-donkerblauw-background-color, .has-donkerblauw-1-background-color, .has-donkerblauw-2-background-color,
	.has-donkerblauw-3-background-color, .has-donkerblauw-4-background-color, .has-kobalt-background-color,
	.has-bodytekst-background-color, [class*="is-style-sectie-donkerblauw"]) :is(.is-style-label, .tt-label) {
	color: var(--wp--preset--color--wit);
}

/* ---------- Tekstkleur per achtergrond (brandbook, WCAG gaat voor) ----------
 * Koppen #2B1343 (donkerblauw), bodytekst #645D7A, inverterende tekst #FFFFFF.
 * Bodytekst waar die minimaal 4,5:1 haalt: off-white 5,7 · wit 6,2 · blauw-4 5,4 · oranje-4 5,4 · vlak 4,8.
 * Donkerblauw waar bodytekst te licht is: lichtblauw 4,5 · blauw 3,6 · oranje 3,5 · oranje-3 4,4 · rand 4,3.
 * Wit op donkerblauw en nuances, kobalt en bodytekst. Een expliciet gekozen tekstkleur blijft staan. */
:is(.has-wit-background-color, .has-off-white-background-color, .has-blauw-4-background-color,
	.has-oranje-4-background-color, .has-vlak-background-color):not(.has-text-color) {
	color: var(--wp--preset--color--bodytekst);
}

:is(.has-lichtblauw-background-color, .has-blauw-background-color, .has-oranje-background-color,
	.has-oranje-3-background-color, .has-rand-background-color):not(.has-text-color) {
	color: var(--wp--preset--color--donkerblauw);
}

:is(.has-donkerblauw-background-color, .has-donkerblauw-1-background-color, .has-donkerblauw-2-background-color,
	.has-donkerblauw-3-background-color, .has-donkerblauw-4-background-color, .has-kobalt-background-color,
	.has-bodytekst-background-color):not(.has-text-color),
:is(.has-donkerblauw-background-color, .has-donkerblauw-1-background-color, .has-donkerblauw-2-background-color,
	.has-donkerblauw-3-background-color, .has-donkerblauw-4-background-color, .has-kobalt-background-color,
	.has-bodytekst-background-color, [class*="is-style-sectie-donkerblauw"]) :is(h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--wit);
}

/* ---------- Ritme: afstand tussen tekst, beeld en buttons ----------
 * Overal dezelfde afstanden (theme.json custom.ruimte), ook binnen kaarten:
 * label (tag, datum) → volgende 8px · kop → tekst 16px · tekst → tekst 16px · beeld → inhoud 24px ·
 * tekst → buttons 24px · tussen blokken binnen een sectie 32px (Ruimte en afronding). */
:root {
	--tt-ruimte-label: var(--wp--custom--ruimte--label, 0.5rem);
	--tt-ruimte-kop: var(--wp--custom--ruimte--kop, 1rem);
	--tt-ruimte-tekst: var(--wp--custom--ruimte--tekst, 1rem);
	--tt-ruimte-beeld: var(--wp--custom--ruimte--beeld, 1.5rem);
	--tt-ruimte-button: var(--wp--custom--ruimte--button, 1.5rem);
	--tt-ruimte-blok: var(--wp--custom--ruimte--blok, 2rem);
}

:is(.is-layout-flow, .is-layout-constrained) > * + * {
	margin-block-start: var(--tt-ruimte-blok);
}

:is(.is-layout-flow, .is-layout-constrained) > :is(p, ul, ol, .wp-block-quote, .wp-block-post-excerpt, .wp-block-read-more) + :is(p, ul, ol, .wp-block-quote, .wp-block-post-excerpt, .wp-block-read-more, cite) {
	margin-block-start: var(--tt-ruimte-tekst);
}

:is(.is-layout-flow, .is-layout-constrained) > :is(.wp-block-heading, .wp-block-post-title) + :is(p, ul, ol, .wp-block-quote, .wp-block-post-excerpt, .wp-block-read-more, .tt-formulier-plek) {
	margin-block-start: var(--tt-ruimte-kop);
}

:is(.is-layout-flow, .is-layout-constrained) > :is(.is-style-tag, .is-style-tag-licht, .wp-block-post-terms, .wp-block-post-date) + * {
	margin-block-start: var(--tt-ruimte-label);
}

:is(.is-layout-flow, .is-layout-constrained) > :is(.wp-block-image, .wp-block-post-featured-image) + * {
	margin-block-start: var(--tt-ruimte-beeld);
}

:is(.is-layout-flow, .is-layout-constrained) > :is(p, ul, ol, .wp-block-quote, .wp-block-heading, .wp-block-post-excerpt) + .wp-block-buttons {
	margin-block-start: var(--tt-ruimte-button);
}

/* ---------- Bestandsveld ----------
 * Formulieren (bijgewerkt 19-10): het gewone bestandsveld van de browser, de button "Kies bestand" als secondary (48px),
 * daarnaast de naam van het gekozen bestand in Body M. Toegestane typen en maximale grootte staan in de hulptekst.
 * Fout: rode rand 2px om de button, melding eronder (formulieren.js controleert type en grootte bij het kiezen). */
.tt-veld input[type="file"] {
	width: 100%;
	max-width: 100%;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--wp--preset--font-family--plus-jakarta-sans);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.5;
	color: var(--wp--preset--color--bodytekst);
	border-radius: var(--wp--custom--radius--pill);
	cursor: pointer;
}

.tt-veld input[type="file"]::file-selector-button {
	height: 3rem;
	margin-right: 1rem;
	padding: 0 calc(1.5rem - 2px);
	border: 2px solid var(--tt-button);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--tt-button-vlak);
	color: var(--tt-button);
	font-family: var(--wp--preset--font-family--plus-jakarta-sans);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.5;
	cursor: pointer;
}

.tt-veld input[type="file"]:hover::file-selector-button {
	background: var(--tt-button-vlak-hover);
	border-color: var(--tt-button-hover);
	color: var(--tt-button-hover);
}

.tt-veld input[type="file"]:active::file-selector-button {
	background: var(--tt-button-vlak-actief);
}

.tt-veld input[type="file"]:focus-visible {
	outline: 2px solid var(--tt-focus);
	outline-offset: 2px;
}

.tt-veld input[type="file"][aria-invalid="true"] {
	border: 0;
}

.tt-veld input[type="file"][aria-invalid="true"]::file-selector-button {
	border-color: var(--wp--preset--color--fout);
}

/* ---------- Lijst ----------
 * Lijsten (design_system/02 Verbeterd/Lijsten.pdf): vacatures, downloads, actuele meldingen en Meer verhalen.
 * Regels met een lijn ertussen, geen vlak (zoals de uitklaplijst). Per regel: icoon 24px (niet verplicht), status of
 * datum als label, titel in Heading 5, tekst in Body S, gegevens in Body S, actie als tertiary rechts (mobiel eronder).
 * De hele regel is één link (de titel); hover onderstreept titel en actie, focus een ring om de regel. */
.tt-lijst {
	border-top: 1px solid var(--wp--preset--color--rand);
}

/* Lijn boven de eerste regel alleen als er in hetzelfde blok iets boven de lijst staat (kop, tekst, filters);
 * direct onder een paginakop of vlak geen lijn (Lijsten, 21-10). */
.tt-lijst:first-child {
	border-top: 0;
}

.tt-lijst > * {
	margin-block: 0 !important;
}

.tt-lijst__regel {
	position: relative;
	display: flex !important;
	align-items: center;
	gap: 1rem 1.5rem;
	padding: 1.5rem 0;
	border-bottom: 1px solid var(--wp--preset--color--rand);
}

.tt-lijst__regel > * {
	margin: 0 !important;
}

/* Compacte lijst (Vacatures op Werken bij, 20-10): alleen titel, gegevens en actie; 16px boven en onder. */
.tt-lijst--compact .tt-lijst__regel {
	padding-block: 1rem;
}

@media (max-width: 599px) {
	.tt-lijst--compact .tt-lijst__regel {
		row-gap: 0.25rem; /* actie onder de tekst: 16px zichtbare ruimte (klikvlak tertiary 48px) */
	}
}

.tt-lijst__regel > .wp-block-image.tt-icoon[class*="is-icoon-"] {
	flex: 0 0 auto;
	align-self: flex-start;
	width: 1.5rem;
	height: 1.5rem;
	margin-top: 0.125rem !important;
}

.tt-lijst__tekst {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.tt-lijst__tekst > * {
	margin: 0 !important;
}

.tt-lijst__regel :is(h2, h3, h4) {
	font-family: var(--wp--preset--font-family--plus-jakarta-sans);
	font-size: var(--wp--preset--font-size--kop-5);
	font-weight: 700;
	line-height: var(--wp--custom--line-height--kop-5);
	letter-spacing: 0;
}

.tt-lijst__regel :is(h2, h3, h4) a {
	color: inherit;
	text-decoration: none;
}

.tt-lijst__regel :is(h2, h3, h4) a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.tt-lijst__tekst > p:not(.is-style-label):not(.tt-status) {
	font-size: var(--wp--preset--font-size--body-s);
}

.tt-lijst__gegevens {
	color: var(--wp--preset--color--bodytekst);
}

.tt-lijst__regel > .wp-block-buttons {
	flex: 0 0 auto;
}

.tt-lijst__regel:hover :is(h2, h3, h4) a,
.tt-lijst__regel:hover .wp-block-button.is-style-tertiary .wp-block-button__link {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.3em;
}

.tt-lijst__regel:has(:is(h2, h3, h4) a:focus-visible) {
	outline: 2px solid var(--tt-focus);
	outline-offset: 0;
	border-radius: var(--wp--custom--radius--middel, 1rem);
}

.tt-lijst__regel :is(h2, h3, h4) a:focus-visible {
	outline: 0;
}

@media (max-width: 599px) {
	.tt-lijst__regel {
		flex-wrap: wrap;
		align-items: flex-start;
	}

	.tt-lijst__regel > .wp-block-buttons {
		flex-basis: 100%;
		padding-left: 2.5rem; /* gelijk met de tekst naast het icoon */
	}

	.tt-lijst__regel:not(:has(> .tt-icoon)) > .wp-block-buttons {
		padding-left: 0;
	}
}

/* Status bij een melding: icoon 16px en tekst, nooit alleen kleur (Kleuren, WCAG 1.4.1). */
.tt-status {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.43;
	color: var(--wp--preset--color--donkerblauw);
}

.tt-status::before {
	content: "";
	flex: 0 0 auto;
	width: 1rem;
	height: 1rem;
	background-color: var(--wp--preset--color--donkerblauw);
	-webkit-mask: var(--tt-status-icoon, url("../images/iconen/set/11.svg")) center / contain no-repeat;
	mask: var(--tt-status-icoon, url("../images/iconen/set/11.svg")) center / contain no-repeat;
}

.tt-status.is-storing::before { --tt-status-icoon: url("../images/iconen/set/09.svg"); background-color: var(--wp--preset--color--fout); }
.tt-status.is-opgelost::before { --tt-status-icoon: url("../images/iconen/set/10.svg"); background-color: var(--wp--preset--color--succes); }
.tt-status.is-onderhoud::before { --tt-status-icoon: url("../images/iconen/set/16.svg"); }

/* Meer verhalen: compacte lijst naast een verhaal. Kop Heading 5, per regel een foto 1:1 van 80px (kleine hoeken),
 * datum als label en de titel; geen tekst en geen actie. Op mobiel onder het verhaal. */
.tt-meer-verhalen > h2 {
	font-family: var(--wp--preset--font-family--plus-jakarta-sans);
	font-size: var(--wp--preset--font-size--kop-5);
	font-weight: 700;
	line-height: var(--wp--custom--line-height--kop-5);
	margin: 0 0 1rem !important;
}

.tt-meer-verhalen .tt-lijst__regel {
	padding: 1rem 0;
}

.tt-meer-verhalen .tt-lijst__regel > .wp-block-image:not(.tt-icoon) {
	flex: 0 0 5rem;
	width: 5rem;
	align-self: flex-start;
}

.tt-meer-verhalen .tt-lijst__regel > .wp-block-image:not(.tt-icoon) img {
	aspect-ratio: 1;
	width: 100%;
	height: auto;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--middel);
}

.tt-meer-verhalen .tt-lijst__regel :is(h2, h3, h4) {
	font-size: var(--wp--preset--font-size--body-s);
	line-height: 1.5;
}

.tt-lijst__regel[hidden] {
	display: none !important; /* filter (Downloads) */
}

/* Notitie bij de button van een formulier, bijv. de afhandeltijd van een ticket: Body S, bodytekst, direct onder de button. */
.tt-formulier__notitie {
	margin: 0 !important;
	font-size: var(--wp--preset--font-size--body-s);
	color: var(--wp--preset--color--bodytekst);
}

/* Hulpcentrum (Beheer & support): formulier en bellen/mailen samen in één vlak, afronding 16px, binnenruimte als een card.
 * Rechts de twee contactcards onder elkaar op wit; op tablet en mobiel onder het formulier. */
.tt-hulpcentrum {
	border-radius: var(--wp--custom--radius--middel);
	padding: var(--tt-ruimte-card, 2rem) !important;
}

.tt-hulpcentrum__contact {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.tt-hulpcentrum__contact > * {
	margin: 0 !important;
}

/* ---------- Contactvlak ----------
 * Overige componenten (19-10): klein oranje vlak bij een formulier met bellen en mailen. Afronding 16px met de grote hoek
 * rechtsonder, binnenruimte rondom 32px (mobiel 24px). Kop Heading 5, tekst Body S, buttons in de contrastvariant
 * (volgt uit de oranje achtergrond). Lijnenspel off-white rechtsonder: lijn 8px, bocht 48px; mag achter de buttons
 * langs, nooit door tekst. Desktop onder de foto naast het formulier, tablet en mobiel boven het formulier. */
.tt-contactvlak {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	border-radius: var(--tt-r-middel) var(--tt-r-middel) var(--tt-r-hoek) var(--tt-r-middel);
	padding: 2rem !important;
}

.tt-contactvlak > * {
	position: relative;
	z-index: 1;
	margin-block: 0 !important;
}

.tt-contactvlak::after {
	content: "";
	position: absolute;
	z-index: 0;
	right: -8px;
	bottom: -8px;
	width: 7rem;
	height: 9rem;
	border: 8px solid var(--wp--preset--color--off-white);
	border-right: 0;
	border-bottom: 0;
	border-top-left-radius: 48px;
	pointer-events: none;
}

.tt-contactvlak__kop {
	font-family: var(--wp--preset--font-family--plus-jakarta-sans);
	font-size: var(--wp--preset--font-size--kop-5) !important;
	font-weight: 700;
	line-height: var(--wp--custom--line-height--kop-5);
	margin-bottom: 0.5rem !important;
}

.tt-contactvlak__tekst {
	font-size: var(--wp--preset--font-size--body-s);
	margin-bottom: 1.5rem !important;
}

.tt-contactvlak .wp-block-buttons {
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
}

.tt-contactvlak--klein {
	display: none !important;
}

/* Desktop: het kleine contactvlak (boven het formulier) is verborgen; de kop eronder krijgt dan geen ruimte erboven,
 * zodat de kolom rechts (foto of contactvlak) gelijk begint. Die begint 8px lager: op de bovenkant van de letters van
 * de kop (Heading 2: 48px regel, letters vanaf ca. 9px), niet op de regelbox (2.48.0, 22-10). */
@media (min-width: 1280px) {
	.tt-contactvlak--klein + * {
		margin-block-start: 0 !important;
	}

	.tt-formulier__zij > :first-child {
		margin-block-start: var(--wp--preset--spacing--10) !important;
	}

	/* Zonder foto (Beheer & support) scrolt het contactvlak mee naast het formulier: 24px onder de compacte kop (2.49.0, 22-10). */
	.tt-formulier__zij > .tt-contactvlak:first-child {
		position: sticky;
		top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--tt-kop-compact) + var(--wp--preset--spacing--30));
	}
}

@media (max-width: 1279px) {
	.tt-contactvlak--klein {
		display: block !important;
		margin-bottom: var(--wp--preset--spacing--50) !important;
	}

	/* Contact (2.52.6): de kleine vlakken staan ná het formulier, met ruimte erboven in plaats van eronder. */
	.tt-contactvlak--klein.tt-contactvlak--onder {
		margin-top: var(--wp--preset--spacing--50) !important;
		margin-bottom: 0 !important;
	}
}

/* Contact en Melding maken (2.53.11): de kop staat nu bovenaan de linkerkolom, dus zonder ruimte erboven (zoals na het verborgen vlak). */
@media (min-width: 1280px) {
	.tt-formulier-indeling--contact > .wp-block-column:first-child > :first-child {
		margin-block-start: 0 !important;
	}
}

@media (min-width: 600px) and (max-width: 1279px) {
	.tt-contactvlak .wp-block-buttons {
		flex-direction: row;
	}

	.tt-contactvlak::after {
		height: 6rem;
	}
}

@media (max-width: 599px) {
	.tt-contactvlak {
		padding: 1.5rem !important;
	}

	.tt-contactvlak .wp-block-buttons {
		align-items: stretch;
	}

	.tt-contactvlak::after {
		width: 6rem;
	}
}

/* Reviews: ook op tablet een schuifrij (Cards, 19-10). */
@media (min-width: 600px) and (max-width: 1279px) {
	.tt-schuifrij--tablet.is-layout-grid {
		display: flex !important;
		max-width: none;
		gap: 1.5rem;
		margin-right: calc(-1 * var(--tt-zijkant));
		padding-right: var(--tt-zijkant);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.tt-schuifrij--tablet.is-layout-grid > * {
		flex: 0 0 18rem;
		scroll-snap-align: start;
	}

	.tt-schuifrij__knoppen.is-tablet {
		display: flex;
	}
}

/* ---------- Home: label boven Heading 1 ----------
 * Overige componenten, paginakop home (20-10): label → Heading 1 8px. */
.tt-held .is-style-label + .wp-block-heading {
	margin-block-start: var(--tt-ruimte-label);
}

/* ---------- Bewijsbalk ----------
 * Overige componenten (20-10): één paneel in blauw nuance 4 met de grote hoek rechtsboven, half over de rand tussen
 * paginakop (off-white) en de eerste sectie (wit). Per feit een content-icoon 48px (oranje nuance 1) en Heading 5.
 * Desktop 4 naast elkaar, tablet 2 × 2, mobiel onder elkaar met het icoon links. */
.tt-bewijsbalk.alignfull {
	margin-block: calc(-1 * var(--wp--preset--spacing--50)) 0 !important;
	padding: 0 var(--wp--style--root--padding-right) 0 var(--wp--style--root--padding-left);
	background: linear-gradient(var(--wp--preset--color--off-white) 50%, var(--wp--preset--color--wit) 50%);
}

.tt-bewijs {
	list-style: none;
	box-sizing: border-box;
	max-width: var(--wp--style--global--wide-size);
	margin: 0 auto;
	padding: 3rem;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	background: var(--wp--preset--color--blauw-4);
	border-radius: var(--tt-r-middel, 1rem) 6rem var(--tt-r-middel, 1rem) var(--tt-r-middel, 1rem);
}

.tt-bewijs > li {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin: 0;
	padding: 0 2rem;
	border-left: 1px solid var(--wp--preset--color--lichtblauw);
}

.tt-bewijs > li:first-child {
	padding-left: 0;
	border-left: 0;
}

.tt-bewijs__icoon {
	width: 3rem;
	height: 3rem;
	color: var(--wp--preset--color--oranje-1);
}

.tt-bewijs__icoon.is-56 { --m: url("../images/iconen/set/56.svg"); }
.tt-bewijs__icoon.is-51 { --m: url("../images/iconen/set/51.svg"); }
.tt-bewijs__icoon.is-34 { --m: url("../images/iconen/set/34.svg"); }
.tt-bewijs__icoon.is-54 { --m: url("../images/iconen/set/54.svg"); }

.tt-bewijs__tekst {
	font-size: var(--wp--preset--font-size--kop-5);
	font-weight: 600;
	line-height: var(--wp--custom--line-height--kop-5, 1.4);
	color: var(--wp--preset--color--donkerblauw);
}

@media (max-width: 1279px) {
	.tt-bewijsbalk.alignfull {
		margin-top: 0 !important; /* tablet en mobiel: de foto staat onder de tekst, het paneel komt er los onder */
	}

	.tt-bewijs {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 2rem;
		border-top-right-radius: 4rem;
	}

	.tt-bewijs > li:nth-child(3) {
		padding-left: 0;
		border-left: 0;
	}
}

@media (max-width: 599px) {
	.tt-bewijs {
		grid-template-columns: 1fr;
		row-gap: 0;
		padding: 2rem 1.5rem;
		border-top-right-radius: 3rem;
	}

	.tt-bewijs > li,
	.tt-bewijs > li:nth-child(3) {
		flex-direction: row;
		align-items: center;
		padding: 1rem 0;
		border-left: 0;
		border-top: 1px solid var(--wp--preset--color--lichtblauw);
	}

	.tt-bewijs > li:first-child {
		padding-top: 0;
		border-top: 0;
	}

	.tt-bewijs > li:last-child {
		padding-bottom: 0;
	}
}

/* ---------- Oplossingen op de home: pijl naast de titel ----------
 * Cards (20-10): in het vaste blok Oplossingen geen actie onderaan, maar een pijl (24px) direct naast de titel. */
.tt-titelpijl {
	display: inline-flex !important;
	align-items: flex-start;
	gap: 0.5rem; /* icoon → tekst 8px (Iconografie) */
}

.tt-titelpijl::before {
	content: "";
	order: 1;
	flex: 0 0 auto;
	width: 1.5rem;
	height: 1.5rem;
	margin-top: calc((1lh - 1.5rem) / 2); /* op de eerste regel */
	background-color: currentColor;
	-webkit-mask: var(--tt-icoon-pijl) center / contain no-repeat;
	mask: var(--tt-icoon-pijl) center / contain no-repeat;
}

/* ---------- Venster ----------
 * Overige componenten (20-10): het formulier voor een vrijblijvend gesprek in een <dialog>. Wit vlak, 16px, max. 720px
 * (8 van 12 kolommen), binnenruimte 48px, achtergrond donkerblauw op 60%. Mobiel schermvullend. */
.tt-venster {
	box-sizing: border-box;
	width: calc(100% - 3rem);
	max-width: 45rem;
	max-height: calc(100% - 3rem);
	overflow: auto;
	padding: 3rem;
	border: 0;
	border-radius: var(--tt-r-middel, 1rem);
	background: var(--wp--preset--color--wit);
	color: var(--wp--preset--color--donkerblauw);
}

.tt-venster::backdrop {
	background: rgb(43 19 67 / 0.6);
}

.tt-venster__kop {
	margin-top: 0;
	padding-right: 3rem;
}

.tt-venster__tekst {
	margin-block: var(--tt-ruimte-kop, 1rem) var(--tt-ruimte-blok, 2rem);
}

.tt-venster__sluit {
	position: absolute;
	top: 1rem;
	right: 1rem;
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.tt-venster__sluit .tt-icoon {
	width: 1.25rem;
	height: 1.25rem;
}

.tt-venster__sluit:hover {
	background: var(--wp--preset--color--blauw-4);
}

.tt-venster__sluit:focus-visible {
	outline: 2px solid var(--tt-focus);
	outline-offset: 0;
}

html.tt-venster-open {
	overflow: hidden;
}

@media (max-width: 599px) {
	.tt-venster {
		width: 100%;
		max-width: none;
		height: 100%;
		max-height: none;
		margin: 0;
		padding: 2rem 1.5rem;
		border-radius: 0;
	}
}

/* ---------- Vacature ----------
 * 21-10: het paarse vlak met de highlights blijft in beeld naast de vacaturetekst; één lege kolom ertussen, zoals bij
 * het nieuwsartikel. Vanaf 1280px vlak 4 kolommen, tekst 7; tablet vlak 5, tekst 6; mobiel onder elkaar. */
@media (min-width: 782px) {
	.wp-block-columns.tt-vacature {
		display: grid;
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: 1.5rem;
		align-items: start;
	}

	.tt-vacature > .wp-block-column {
		flex-basis: auto !important;
		min-width: 0;
	}

	.tt-vacature > .tt-vacature__zij {
		grid-column: 1 / 6;
		align-self: start; /* WordPress zet align-items op de kolommen terug naar normal; zonder dit is het vlak zo hoog als de tekst */
	}

	.tt-vacature > .tt-vacature__tekst {
		grid-column: 7 / 13;
	}
}

@media (min-width: 1280px) {
	.tt-vacature > .tt-vacature__zij {
		grid-column: 1 / 5;
	}

	.tt-vacature > .tt-vacature__tekst {
		grid-column: 6 / 13;
	}
}

@media (min-width: 782px) and (min-height: 640px) {
	.tt-vacature > .tt-vacature__zij {
		position: sticky;
		top: calc(var(--tt-kop-compact) + 1.5rem);
	}
}

/* Wie is Techni Team? (vacature, 21-10): foto's vanaf tablet 2 × 2. */
@media (max-width: 1279px) {
	.tt-reeks--2x2.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

/* ---------- Afsprakenplanner ----------
 * design_system/02 Verbeterd/Afsprakenplanner (20-10): in het venster drie stappen (collega, moment, gegevens) en de
 * bevestiging. Gebouwd uit radio buttons en velden (Formulieren), keuzechips (filters), icoon-buttons en buttons. */
/* Vast op de pagina onder een klantverhaal en op Plan een vrijblijvend gesprek ([tt_planner], 20-10): gelijk aan de planner in het
 * venster (28-10): even breed als de inhoud van het venster (45rem min 2 x 3rem) en dezelfde tekstkleur, ook de bevestiging. */
.tt-planner--vast {
	max-width: 39rem;
	color: var(--wp--preset--color--donkerblauw);
}

.tt-planner .tt-formulier > .tt-planner__stap {
	margin-top: 0;
}

.tt-planner .tt-planner__vraag {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 1.5rem 0 0;
	outline: none;
}

.tt-planner__nr {
	color: var(--wp--preset--color--donkerblauw-4);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: var(--wp--custom--line-height--caption);
}

.tt-planner__titel {
	color: var(--wp--preset--color--donkerblauw);
	font-size: var(--wp--preset--font-size--kop-5);
	font-weight: 700;
	line-height: var(--wp--custom--line-height--kop-5);
}

.tt-planner__uitleg {
	margin: 0.5rem 0 0;
	color: var(--wp--preset--color--bodytekst);
	font-size: var(--wp--preset--font-size--medium);
	line-height: var(--wp--custom--line-height--body-m);
	text-wrap: balance; /* geen losse eindregel van één woord op smalle schermen */
}

/* Meer ruimte tussen de inhoud en de buttons, bij elke stap en de bevestiging (23-10). */
.tt-planner__acties.wp-block-buttons {
	margin-top: 3rem;
}

/* Vorige staat links van Volgende (besluit 20-10). Op mobiel onder elkaar met de primary bovenaan (Buttons). */
@media (max-width: 599px) {
	.tt-planner .tt-planner__acties.wp-block-buttons {
		flex-direction: column-reverse;
	}
}

/* Stap 1: een keuze is een radio button met een groot label (foto 80px, naam, functie) in een vlak met rand. */
.tt-planner__keuzes {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-top: 1.5rem;
}

.tt-optie.tt-keuze {
	align-items: center;
	gap: 1rem;
	margin: 0;
	padding: 1rem;
	border-radius: var(--tt-r-middel);
	background: var(--wp--preset--color--wit);
	box-shadow: inset 0 0 0 1px var(--tt-veld-rand);
}

.tt-optie.tt-keuze input {
	margin: 0;
}

.tt-optie.tt-keuze:hover {
	box-shadow: inset 0 0 0 1px var(--tt-veld-rand-hover);
}

.tt-optie.tt-keuze:has(input:checked) {
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--kobalt);
}

.tt-planner__stap[aria-invalid="true"] .tt-keuze {
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--fout);
}

.tt-keuze__foto {
	flex: 0 0 auto;
	width: 5rem;
	height: 5rem;
	border-radius: var(--tt-r-middel);
	object-fit: cover;
}

.tt-keuze__foto--icoon {
	display: grid;
	place-items: center;
	background: var(--wp--preset--color--blauw-4);
}

.tt-keuze__foto--icoon .tt-icoon {
	--m: url("../images/iconen/set/53.svg");
	width: 3rem;
	height: 3rem;
	color: var(--wp--preset--color--oranje-1);
}

.tt-keuze__foto--telefoon .tt-icoon {
	--m: url("../images/iconen/set/13.svg");
}

.tt-planner [hidden] {
	display: none !important;
}

.tt-keuze__tekst {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	min-width: 0;
}

.tt-keuze__naam {
	color: var(--wp--preset--color--donkerblauw);
	font-weight: 700;
}

.tt-keuze__functie {
	color: var(--wp--preset--color--bodytekst);
	font-size: var(--wp--preset--font-size--body-s);
	line-height: var(--wp--custom--line-height--body-s);
}

/* Stap 2: met wie, duur, week met icoon-buttons, dag- en tijdchips (radio buttons in de vorm van een filter). */
.tt-planner__met,
.tt-planner__duur {
	display: flex;
	align-items: center;
	color: var(--wp--preset--color--bodytekst);
	font-size: var(--wp--preset--font-size--body-s);
	line-height: var(--wp--custom--line-height--body-s);
}

.tt-planner__met {
	gap: 1rem;
	margin: 1.5rem 0 0;
}

.tt-planner__met strong {
	color: var(--wp--preset--color--donkerblauw);
}

.tt-planner__metfoto {
	flex: 0 0 auto;
	width: 3rem;
	height: 3rem;
	border-radius: var(--tt-r-middel);
	object-fit: cover;
}

.tt-planner__duur {
	gap: 0.5rem;
	margin: 1rem 0 0;
}

.tt-planner__duur .tt-icoon {
	--m: url("../images/iconen/set/13.svg");
	width: 1rem;
	height: 1rem;
}

/* Demo van Vcare (28-10): een Teams-meeting, geen telefoongesprek; icoon 32 Beeldbellen in plaats van 13 Telefoon. */
.tt-planner__duur--teams .tt-icoon {
	--m: url("../images/iconen/set/32.svg");
}

/* Stap 5 (28-10): de boekingspagina van Microsoft Bookings in het venster. Het scherm scrolt zelf; hoog genoeg voor de kalender
 * met tijden op desktop, op mobiel iets hoger omdat de onderdelen onder elkaar staan. */
.tt-planner__boeking {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 44rem;
	margin: 1.5rem 0 0;
	border: 0.0625rem solid var(--wp--preset--color--blauw-4);
	border-radius: var(--tt-r-middel);
	background: var(--wp--preset--color--wit);
}

@media (max-width: 599px) {
	.tt-planner__boeking {
		height: 48rem;
	}
}

.tt-planner__wijzig {
	padding: 0;
	border: 0;
	background: none;
	color: var(--tt-tertiary);
	font: inherit;
	text-decoration: underline;
	cursor: pointer;
}

.tt-planner__wijzig:hover {
	color: var(--tt-tertiary-hover);
}

.tt-planner__wijzig:focus-visible {
	outline: 2px solid var(--tt-focus);
	outline-offset: 2px;
}

.tt-planner__week {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--wp--preset--color--rand);
}

.tt-planner__weektitel {
	margin: 0;
	color: var(--wp--preset--color--donkerblauw);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	line-height: var(--wp--custom--line-height--body-m);
}

.tt-planner__pijlen {
	display: flex;
	gap: 0.5rem;
}

.tt-planner .tt-planner__groep {
	margin-top: 1.5rem;
}

.tt-planner .tt-planner__groep legend {
	margin-bottom: 0.5rem;
	color: var(--wp--preset--color--donkerblauw-4);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: var(--wp--custom--line-height--caption);
}

.tt-planner__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.tt-planner__chip:has(input:checked) {
	border-color: var(--wp--preset--color--geselecteerd);
	background: var(--wp--preset--color--geselecteerd);
	color: var(--wp--preset--color--wit);
	font-weight: 700;
}

.tt-planner__chip:has(input:checked)::before {
	content: "";
	width: 1rem;
	height: 1rem;
	margin-left: -0.25rem;
	background-color: currentColor;
	-webkit-mask: var(--tt-icoon-vink) center / contain no-repeat;
	mask: var(--tt-icoon-vink) center / contain no-repeat;
}

.tt-planner__chip:has(input:focus-visible) {
	outline: 2px solid var(--tt-focus);
	outline-offset: 2px;
}

.tt-planner__stap > .tt-veld__fout {
	margin-top: 0.5rem;
}

.tt-planner .tt-planner__stap > .tt-veld__fout:empty {
	display: none; /* de regel voor fouten in een fieldset is specifieker dan .tt-veld__fout:empty */
}

/* Stap 3: samenvatting op blauw nuance 4, dan de velden (Formulieren). */
.tt-planner__samen {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	margin-top: 1.5rem;
	padding: 1.5rem;
	border-radius: var(--tt-r-middel);
	background: var(--wp--preset--color--blauw-4);
}

.tt-planner__samen > .tt-icoon {
	--m: url("../images/iconen/set/53.svg");
	width: 1.5rem;
	height: 1.5rem;
	margin-top: 0.125rem;
	color: var(--wp--preset--color--donkerblauw);
}

.tt-planner__samenkop {
	margin: 0;
	color: var(--wp--preset--color--donkerblauw);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	line-height: var(--wp--custom--line-height--body-m);
}

.tt-planner__samentekst {
	margin: 0;
	font-size: var(--wp--preset--font-size--body-s);
	line-height: var(--wp--custom--line-height--body-s);
}

.tt-planner__velden {
	margin-top: 2rem;
}

.tt-planner__privacy {
	margin-top: 1.5rem;
}

/* Bevestiging: succesmelding (Formulieren), rand 2px succes, afronding 16px, 24px binnenruimte. */
.tt-planner__bevestiging {
	margin-top: 1.5rem;
}

.tt-planner__melding {
	padding: 1.5rem;
	border: 2px solid var(--wp--preset--color--succes);
	border-radius: var(--tt-r-middel);
	color: var(--wp--preset--color--bodytekst);
	font-size: var(--wp--preset--font-size--body-s);
	line-height: var(--wp--custom--line-height--body-s);
	outline: none;
}

.tt-planner__melding p {
	margin: 0.5rem 0 0 2rem;
}

.tt-planner__melding .tt-planner__meldingkop {
	margin: 0;
	color: var(--wp--preset--color--donkerblauw);
	font-size: var(--wp--preset--font-size--kop-5);
	font-weight: 700;
	line-height: var(--wp--custom--line-height--kop-5);
}

.tt-planner__melding a {
	color: var(--wp--preset--color--kobalt);
	text-decoration: underline;
}

.tt-planner__test {
	font-style: italic;
}

@media (max-width: 599px) {
	.tt-keuze__foto {
		width: 4rem;
		height: 4rem;
	}

	.tt-planner__met {
		align-items: flex-start;
	}

	.tt-planner__samen {
		padding: 1rem;
	}
}

/* ---------- Berichten (nieuws): raster en titels ----------
 * Cards (raster): contentcards op tablet 2 per rij; het WordPress-blok berichten stond op 3.
 * Koppen breken nooit midden in een woord (Typografie); WordPress zet bij berichttitels word-break: break-word. */
@media (min-width: 600px) and (max-width: 1279px) {
	.tt-berichten.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

.wp-block-post-title {
	word-break: normal;
}

/* ---------- Nieuwsartikel ----------
 * Overige componenten (20-10): paginakop type 3 met terug-link en datum, tekst 7 kolommen links op het raster, kolom 8
 * leeg, rechts (9–12) Meer nieuws (Lijsten) en Delen; blijft in beeld als het scherm hoog genoeg is. Tablet en mobiel:
 * alles onder elkaar. Een klantverhaal gebruikt dezelfde verdeling, met Meer verhalen rechts (.tt-artikel__zij). */
.tt-held .is-style-label + .wp-block-post-title {
	margin-block-start: var(--tt-ruimte-label);
}

.tt-held--artikel .tt-terug + .is-style-label {
	margin-block-start: var(--tt-ruimte-blok);
}

.tt-artikel {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: 1.5rem;
	align-items: start;
}

.tt-artikel > .tt-artikel__tekst {
	grid-column: 1 / 8;
	margin: 0;
}

.tt-artikel > :is(.tt-delen, .tt-artikel__zij) {
	grid-column: 9 / 13;
	margin: 0;
}

@media (min-width: 1280px) and (min-height: 800px) {
	.tt-artikel > :is(.tt-delen, .tt-artikel__zij) {
		position: sticky;
		top: 7rem;
	}
}

.tt-delen > .tt-meer-verhalen {
	margin-bottom: 3rem;
}

.tt-artikel__zij > .tt-meer-verhalen + .tt-delen {
	margin-top: 3rem !important; /* klantverhaal: Meer verhalen → Delen 48px, zoals bij het artikel */
}

.tt-delen__kop {
	margin: 0;
	font-size: var(--wp--preset--font-size--kop-5);
	font-weight: 600;
	line-height: var(--wp--custom--line-height--kop-5, 1.4);
	color: var(--wp--preset--color--donkerblauw);
}

.tt-social__icoon.is-mail { --m: url("../images/iconen/set/14.svg"); }

@media (max-width: 1279px) {
	.tt-artikel > .tt-artikel__tekst,
	.tt-artikel > :is(.tt-delen, .tt-artikel__zij) {
		grid-column: 1 / -1;
	}

	.tt-artikel > :is(.tt-delen, .tt-artikel__zij) {
		margin-top: 3rem;
		padding-top: 2rem;
		border-top: 1px solid var(--wp--preset--color--rand);
	}
}

/* Artikel zonder uitgelichte foto: de titel krijgt de ruimte (Overige componenten: tekst 8 kolommen zonder foto). */
.tt-held--artikel .tt-held__beeld:not(:has(img)) {
	display: none;
}

.tt-held--artikel .tt-held__tekst:only-child,
.tt-held--artikel .wp-block-columns:not(:has(.tt-held__beeld img)) > .tt-held__tekst {
	max-width: 48.75rem;
}

/* Beeldband (Werken bij, 20-10): foto tot de rand met een vaste hoogte, verhouding vrij (Ruimte en afronding:
 * "Vrij · volgt de ruimte"). 16:9 over de volle breedte was op 1440px 810px hoog; nu 240–400px. */
.wp-block-image.tt-beeldband {
	margin-block: 0;
}

.wp-block-image.tt-beeldband img {
	display: block;
	width: 100%;
	height: clamp(15rem, 28vw, 25rem);
	object-fit: cover;
	border-radius: 0;
}

/* ---------- Reviews als doorlopende band (2.38.0, in stappen sinds 2.39.0, Contact, besluit 21-10) ----------
 * Cards: uitzondering op "niets beweegt vanzelf", alleen voor reviews. Elke 5 seconden schuift de band één card naar links
 * (0,6 s), zonder einde en zonder buttons; hij staat stil zolang de muis erop staat of na een tik (touch).
 * navigatie.js zet de cards er een tweede keer achter (verborgen voor schermlezers) en wikkelt de rij in .tt-marquee.
 * Bij "minder beweging" blijft het de gewone schuifrij met Vorige en Volgende. */
.tt-marquee {
	overflow: hidden;
	touch-action: pan-y; /* horizontaal vegen is voor de band (2.40.0), verticaal scrollt de pagina gewoon */
}

@media (max-width: 1279px) {
	.tt-marquee {
		margin-right: calc(-1 * var(--tt-zijkant)); /* tot de rand van het scherm, zoals de schuifrij */
	}
}

.tt-schuifrij--auto.is-loopt.is-layout-grid {
	display: flex !important;
	flex-wrap: nowrap;
	width: max-content;
	max-width: none;
	gap: 1.5rem;
	margin: 0 !important;
	padding: 0 !important;
	overflow: visible;
}

.tt-schuifrij--auto.is-loopt.is-stap {
	transition: transform 0.6s ease-in-out;
}

.tt-schuifrij--auto.is-loopt.is-layout-grid > * {
	flex: 0 0 22rem;
}

/* Desktop (2.43.0, variant B uit Voorstel reviewband.html, besluit 21-10): precies drie hele cards in de tekstkolom,
 * dus geen afgesneden vierde card rechts. De breedte volgt de band zelf (container), niet het scherm. */
@media (min-width: 1280px) {
	.tt-marquee {
		container-type: inline-size;
	}

	.tt-schuifrij--auto.is-loopt.is-layout-grid > * {
		flex-basis: calc((100cqi - 3rem) / 3);
	}
}

@media (max-width: 1279px) {
	.tt-schuifrij--auto.is-loopt.is-layout-grid > * {
		flex-basis: 18rem;
	}
}

@media (max-width: 599px) {
	.tt-schuifrij--auto.is-loopt.is-layout-grid > * {
		flex-basis: 13.625rem;
	}
}

/* Bron onder de naam: de Google-G (16px, eigen kleuren, ongewijzigd: richtlijn van Google) met 8px tot "Review op Google". */
.tt-review-bron {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.tt-review-bron::before {
	content: "";
	flex: 0 0 auto;
	width: 1rem;
	height: 1rem;
	background: url("../images/google-g.svg") center / contain no-repeat;
}

/* ---------- Onderstreping bij hover vervaagt in (2.46.0) ----------
 * Variant A uit Voorstel onderstreping hover.html, besluit 21-10 (vertraagd: 1 s). Waar de onderstreping pas bij hover
 * verschijnt, staat de lijn er al, onzichtbaar, op dezelfde plek en in dezelfde dikte; bij hover krijgt hij de tekstkleur.
 * Alleen de kleur verandert, de lijn beweegt niet. Bij "minder beweging" direct (zie de algemene regel bovenaan).
 * Links in lopende tekst zijn altijd onderstreept en vallen hierbuiten. */
:root {
	--tt-onderstreep-duur: 1s;
}

.wp-block-button.is-style-tertiary > .wp-block-button__link,
:is(.is-style-kaart, .is-style-kaart-hoek):has(> .wp-block-image:first-child:not(.tt-icoon)) > .wp-block-heading a,
:is(.is-style-kaart, .is-style-kaart-hoek):has(> .wp-block-image:first-child:not(.tt-icoon)) .wp-block-button__link,
.tt-terug a,
.wp-block-details summary,
.tt-filters__wis,
.tt-lijst__regel :is(h2, h3, h4) a,
.tt-lijst__regel .wp-block-button.is-style-tertiary .wp-block-button__link,
.tt-voet a {
	text-decoration-line: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.25em;
	text-decoration-color: transparent;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, text-decoration-color var(--tt-onderstreep-duur) cubic-bezier(0.2, 0, 0, 1);
}

.tt-lijst__regel :is(h2, h3, h4) a,
.tt-lijst__regel .wp-block-button.is-style-tertiary .wp-block-button__link {
	text-underline-offset: 0.3em;
}

/* Voet: de lijn zoals hij bij hover al was (dikte volgens het lettertype, 0,15em onder de tekst). */
.tt-voet a {
	text-decoration-thickness: auto;
	text-underline-offset: 0.15em;
}

/* ---------- Donkere sectie (22-10) ----------
 * Eén donkerblauw accent per pagina (klasse tt-donker op de sectie, met donkerblauw als achtergrond), op pagina's met een
 * kernboodschap, in het midden of onderste deel, niet direct onder de paginakop en niet naast het oranje actieblok.
 * Cards in de sectie: lichtblauw met donkerblauwe koppen en tekst (wit haalt daar geen contrast).
 * Uitklaplijst: witte vraag en tekst, lijnen in donkerblauw nuance 3. */
.tt-donker :is(.is-style-kaart, .is-style-kaart-hoek):not(.has-background) {
	background: var(--wp--preset--color--lichtblauw);
}

.tt-donker :is(.is-style-kaart, .is-style-kaart-hoek):not(.has-background):not(.has-text-color) {
	color: var(--wp--preset--color--donkerblauw);
}

.tt-donker :is(.is-style-kaart, .is-style-kaart-hoek) :is(h2, h3, h4) {
	color: var(--wp--preset--color--donkerblauw);
}

.tt-donker .wp-block-details {
	border-color: var(--wp--preset--color--donkerblauw-3);
}

.tt-donker .wp-block-details summary,
.tt-donker .wp-block-details > :not(summary) {
	color: var(--wp--preset--color--wit);
}

/* 404-pagina: tekst in de linkerhelft, zodat het lijnenspel rechtsboven niet door de tekst loopt. Op mobiel volle breedte
 * (de lijnen staan dan in de hoek boven de tekst). */
.tt-404-tekst {
	max-width: 55%;
}

.tt-404-actie::after {
	display: none;
}

.tt-404-kop {
	text-align: left;
}

.tt-404-tekst h1 {
	text-wrap: balance;
}

@media (max-width: 781px) {
	.tt-404-tekst {
		max-width: none;
	}
}

/* Eigen pagina Plan een vrijblijvend gesprek (23-10): het planner-blok staat gecentreerd, de tekst erin links (de kop is de gecentreerde paginakop). */
.tt-planner-blok--midden .tt-planner--vast {
	margin-inline: auto;
}

/* Card zonder link in de titel (Connectivity, Cybersecurity: pagina's nog verborgen): geen hover, ook niet de zoom van de foto.
 * Specificiteit hoger dan de zoom van klikbare cards. */
:is(.is-style-kaart, .is-style-kaart-hoek):not(:has(> .wp-block-heading a)):has(> .wp-block-image:first-child:not(.tt-icoon)):hover > .wp-block-image img {
	transform: none;
}

/* Ons team (27-10): Edwin zonder afdelingskop; foto-card en tekstcard naast elkaar, de tekstcard even hoog als de foto
 * (kolombreedte uit de rij zelf: 4 / 2 kolommen, op mobiel onder elkaar). Link in kobalt en onderstreept. */
.tt-edwin-rij { container-type: inline-size; align-items: start; }

.tt-edwin-rij .tt-edwin-tekst.is-style-kaart-hoek {
	--tt-tertiary: var(--wp--preset--color--kobalt);
	--tt-tertiary-hover: var(--wp--custom--kleur--kobalt-hover);
	--tt-tertiary-actief: var(--wp--custom--kleur--kobalt-actief);
	height: calc((100cqw - 3 * 1.5rem) / 4);
}

.tt-edwin-tekst .wp-block-button__link {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.tt-edwin-tekst .wp-block-button__link:hover {
	text-decoration-thickness: 2px;
}

@media (min-width: 1280px) {
	.tt-edwin-tekst { grid-column: span 3; }
}

@media (min-width: 600px) and (max-width: 1279px) {
	.tt-edwin-rij .tt-edwin-tekst.is-style-kaart-hoek { height: calc((100cqw - 1.5rem) / 2); }
}

@media (max-width: 599px) {
	.wp-block-group.is-layout-grid.tt-edwin-rij { grid-template-columns: minmax(0, 1fr) !important; }
	.tt-edwin-rij .tt-edwin-tekst.is-style-kaart-hoek { height: auto; }
}