/*
 * TFTA hoofdstylesheet: premium, cinematisch, zakelijk.
 *
 * Merkkleuren (uit logo.svg): donkergroen #004225, lime #DADB00.
 * Typografie: Archivo (display-grotesk) + Hanken Grotesk (UI/body), lokaal gehost.
 * Beelden: assets/img/*.webp, gegenereerd via Higgsfield (webp, licht).
 */

/* --- Fonts (lokaal gehost, geen externe requests; AVG-vriendelijk) --- */

/* Body, menu, knoppen en UI: Hanken Grotesk. Eén variabel latin-bestand
   dekt de gebruikte gewichten 400 en 500. */
@font-face {
	font-family: "Hanken Grotesk";
	src: url("../fonts/hanken-grotesk.woff2") format("woff2");
	font-weight: 400 500;
	font-style: normal;
	font-display: swap;
}

/* Koppen en titels: Archivo (stoere moderne grotesk). Eén variabel latin-bestand
   dekt de gebruikte gewichten 700 en 800. */
@font-face {
	font-family: "Archivo";
	src: url("../fonts/archivo.woff2") format("woff2");
	font-weight: 700 800;
	font-style: normal;
	font-display: swap;
}

:root {
	--tfta-groen: #004225;
	--tfta-groen-donker: #00301b;
	--tfta-groen-nacht: #011f12;
	--tfta-lime: #dadb00;
	--tfta-lime-donker: #b8b900;
	--tfta-ivoor: #f5f4ec;
	--tfta-wit: #ffffff;
	--tfta-inkt: #101b14;
	--tfta-grijs: #5c675f;
	--tfta-lijn: #e4e3d7;
	--tfta-goud: #c9a86a;

	/* Typografie-tokens: wissel hier in een keer van lettertype. */
	--font-heading: "Archivo", "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	/* Bestaande aliassen (overal in gebruik) wijzen naar de tokens. */
	--font-kop: var(--font-heading);
	--font-basis: var(--font-body);

	--wrap-breedte: 74rem;
	--radius: 0.25rem;
	--schaduw: 0 1.25rem 3rem rgba(1, 31, 18, 0.12);
	--schaduw-zacht: 0 0.5rem 1.5rem rgba(1, 31, 18, 0.08);
}

/* --- Basis --- */

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

html {
	scroll-behavior: smooth;
	font-family: var(--font-body);
}

/* Formuliercontrols en knoppen erven altijd de themafonts (nooit Arial). */
button,
input,
select,
textarea,
optgroup {
	font-family: inherit;
}

body {
	margin: 0;
	font-family: var(--font-basis);
	font-size: 1.0625rem;
	font-weight: 400;
	line-height: 1.7;
	color: var(--tfta-inkt);
	background: var(--tfta-wit);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	font-family: var(--font-kop);
	line-height: 1.1;
	color: var(--tfta-groen);
	margin: 0 0 0.6em;
	letter-spacing: -0.015em;
}
h1 { font-weight: 800; line-height: 1.04; letter-spacing: -0.025em; } /* grote koppen */
h2 { font-weight: 800; line-height: 1.08; letter-spacing: -0.02em; }
h3, h4 { font-weight: 700; line-height: 1.18; letter-spacing: -0.01em; } /* rustiger koppen */

h1 { font-size: clamp(2.5rem, 5.5vw, 4rem); }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.6rem); }
h3 { font-size: 1.35rem; }

p { margin: 0 0 1.25em; }

a { color: var(--tfta-groen); }

img { max-width: 100%; height: auto; }

.wrap {
	max-width: var(--wrap-breedte);
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 4vw, 2rem);
}

.sectie { padding-block: clamp(3.5rem, 9vw, 6.5rem); }
.sectie--compact { padding-block: 2.5rem; }

/* Eyebrow: klein kapitaal-label boven koppen, terugkerend premium detail. */
.eyebrow {
	display: inline-block;
	text-transform: uppercase;
	letter-spacing: 0.11em;
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--tfta-grijs);
	margin: 0 0 1rem;
}
.eyebrow--lime { color: var(--tfta-lime); }
.eyebrow::after {
	content: "";
	display: inline-block;
	width: 2.25rem;
	height: 1px;
	background: currentColor;
	vertical-align: middle;
	margin-inline-start: 0.9rem;
	opacity: 0.55;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.skip-link {
	position: absolute;
	inset-inline-start: -999rem;
	top: 0;
	background: var(--tfta-lime);
	color: var(--tfta-inkt);
	padding: 0.75rem 1.25rem;
	z-index: 100;
}
.skip-link:focus { inset-inline-start: 0; }

/* --- Knoppen --- */

.knop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	text-align: center;
	padding: 1rem 2rem;
	border-radius: var(--radius);
	font-family: var(--font-basis);
	font-weight: 500;
	font-size: 0.82rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.knop:hover { transform: translateY(-1px); }

.knop--lime {
	background: var(--tfta-lime);
	color: var(--tfta-groen-nacht);
}
.knop--lime:hover { background: var(--tfta-lime-donker); box-shadow: 0 0.6rem 1.5rem rgba(218, 219, 0, 0.32); }

.knop--groen {
	background: var(--tfta-groen);
	color: var(--tfta-wit);
}
.knop--groen:hover { background: var(--tfta-groen-donker); }

.knop--ghost {
	border-color: rgba(255, 255, 255, 0.5);
	color: var(--tfta-wit);
}
.knop--ghost:hover { border-color: var(--tfta-wit); background: rgba(255, 255, 255, 0.08); }

.knop--ghost-donker {
	border-color: var(--tfta-groen);
	color: var(--tfta-groen);
}
.knop--ghost-donker:hover { background: var(--tfta-groen); color: var(--tfta-wit); }

.knop--breed { display: flex; width: 100%; }

.link-pijl {
	font-weight: 500;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	text-decoration: none;
}
.link-pijl::after { content: " \2192"; }
.link-pijl:hover { text-decoration: underline; text-underline-offset: 4px; }

/* --- Header --- */

.site-header {
	background: var(--tfta-groen-nacht);
	position: sticky;
	top: 0;
	z-index: 50;
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
	transition: background-color 0.25s ease;
}

/* Op de homepage ligt de header transparant over de hero (JS zet .is-doorzichtig). */
.site-header.is-doorzichtig {
	position: fixed;
	left: 0;
	right: 0;
	background: linear-gradient(to bottom, rgba(1, 31, 18, 0.75), rgba(1, 31, 18, 0));
	border-bottom-color: transparent;
}

.site-header .wrap { max-width: 84rem; }

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: 5.25rem;
}

/* Het logo mag nooit krimpen. In het Spaans zijn de menu-items veel langer
   ("Entradas de hospitality", "Viajes de fútbol a medida") en dan duwde de
   navigatie het logo weg tot er niets meer van over was. Een flexitem krimpt
   namelijk standaard mee; het menu mag dat, het merk niet. */
.site-header__brand { display: flex; align-items: center; flex-shrink: 0; }
.site-logo { width: auto; height: 2.15rem; display: block; }

.site-nav__list {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-nav__list a {
	color: rgba(255, 255, 255, 0.88);
	text-decoration: none;
	font-size: 0.86rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
	padding-block: 0.5rem;
	border-bottom: 1px solid transparent;
	transition: color 0.15s ease, border-color 0.15s ease;
}
.site-nav__list a:hover,
.site-nav__list .current-menu-item a {
	color: var(--tfta-lime);
	border-bottom-color: var(--tfta-lime);
}

/* Het eerste menu-item valt op met de lime-accentkleur die we elders ook
   gebruiken. Een pill met een lime rand: opvallender dan de gewone items, maar
   lichter dan de solide knop "Plan uw reis", zodat de rangorde klopt.
 *
 * Stond eerst op `a[href*="tickets"]`, met in het commentaar de opmerking dat
 * dat in alle talen werkt. Dat is niet zo: de Duitse pagina heet
 * /de/hospitality-karten/ en de Spaanse /es/entradas/, dus daar zat geen randje
 * omheen. Alleen Nederlands en Engels hadden het woord "tickets" in het adres.
 *
 * Nu op de plek in plaats van op het adres. Tickets staat in elke taal vooraan,
 * dus dit klopt overal, ook als een slug ooit verandert. */
.site-nav__list > li:first-child > a {
	color: var(--tfta-lime);
	border: 1px solid var(--tfta-lime);
	border-radius: 999px;
	padding: 0.35rem 0.95rem;
}
.site-nav__list > li:first-child > a:hover,
.site-nav__list > li:first-child.current-menu-item > a {
	background: var(--tfta-lime);
	color: var(--tfta-groen-nacht);
	border-color: var(--tfta-lime);
}

/* Submenu, bijvoorbeeld onder Over ons. Op desktop een uitklapper die
   opent bij hover en bij toetsenbordfocus; op mobiel gewoon ingesprongen. */
.site-nav__list .menu-item-has-children { position: relative; }
.site-nav__list .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0.5rem 0;
	position: absolute;
	inset-inline-start: 0;
	top: 100%;
	min-width: 14rem;
	background: var(--tfta-groen-nacht);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--radius);
	box-shadow: var(--schaduw);
	opacity: 0;
	visibility: hidden;
	transform: translateY(0.35rem);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
	z-index: 60;
}
.site-nav__list .menu-item-has-children:hover > .sub-menu,
.site-nav__list .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.site-nav__list .sub-menu a {
	display: block;
	padding: 0.5rem 1rem;
	text-transform: none;
	letter-spacing: 0.02em;
	font-size: 0.85rem;
	border-bottom: 0;
	white-space: normal;
}
.site-nav__list .sub-menu a:hover,
.site-nav__list .sub-menu .current-menu-item a {
	color: var(--tfta-lime);
	background: rgba(255, 255, 255, 0.06);
}

.site-header__acties {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	flex-shrink: 0;
}

.site-header__cta { padding: 0.7rem 1.4rem; font-size: 0.76rem; }

/* Mijn account in de kop. Bewust een link en geen knop: naast de gele knop
   zouden twee knoppen om aandacht vechten en dan verliest de belangrijkste. */
.site-header__account {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	color: rgba(255, 255, 255, 0.82);
	text-decoration: none;
	font-size: 0.78rem;
	letter-spacing: 0.04em;
	white-space: nowrap;
	transition: color 0.15s ease;
}

.site-header__account:hover,
.site-header__account:focus-visible {
	color: var(--tfta-lime);
}

.site-header__account-icoon { flex-shrink: 0; }

.lang-switch {
	display: flex;
	gap: 0.4rem;
	font-size: 0.8rem;
	letter-spacing: 0.04em;
}
.lang-switch a {
	color: rgba(255, 255, 255, 0.78);
	text-decoration: none;
	padding: 0.15rem 0.3rem;
}
.lang-switch a:hover { color: var(--tfta-wit); }
.lang-switch a.is-current {
	color: var(--tfta-lime);
	font-weight: 500;
}

.nav-toggle {
	display: none;
	background: none;
	border: 0;
	padding: 0.5rem;
	cursor: pointer;
}
.nav-toggle__balk,
.nav-toggle__balk::before,
.nav-toggle__balk::after {
	display: block;
	width: 1.5rem;
	height: 2px;
	background: var(--tfta-wit);
	position: relative;
	transition: transform 0.2s ease;
}
.nav-toggle__balk::before,
.nav-toggle__balk::after {
	content: "";
	position: absolute;
	left: 0;
}
.nav-toggle__balk::before { top: -7px; }
.nav-toggle__balk::after { top: 7px; }

/* --- Hero (homepage) --- */

.hero {
	position: relative;
	min-height: min(92vh, 60rem);
	display: flex;
	align-items: flex-end;
	color: var(--tfta-wit);
	background: var(--tfta-groen-nacht);
	isolation: isolate;
	overflow: hidden;
}

.hero__beeld {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 65%;
	z-index: 0;
}

.hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(to top, rgba(1, 31, 18, 0.92) 0%, rgba(1, 31, 18, 0.35) 45%, rgba(1, 31, 18, 0.15) 100%),
		linear-gradient(105deg, rgba(1, 31, 18, 0.55) 0%, rgba(1, 31, 18, 0) 55%);
}

.hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	padding-block: clamp(7rem, 16vh, 10rem) clamp(3.5rem, 8vh, 5.5rem);
}

.hero__eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.78rem;
	font-weight: 500;
	color: var(--tfta-lime);
	margin-bottom: 1.5rem;
}

.hero__titel {
	color: var(--tfta-wit);
	font-size: clamp(2.75rem, 7vw, 5.25rem);
	font-weight: 800;
	line-height: 1.04;
	letter-spacing: -0.03em;
	max-width: 16ch;
	margin-bottom: 0.35em;
	text-wrap: balance;
}
.hero__titel em {
	font-style: normal;
	color: var(--tfta-lime);
}

.hero__sub {
	max-width: 40rem;
	font-size: clamp(1.05rem, 1.6vw, 1.2rem);
	font-weight: 400;
	color: rgba(255, 255, 255, 0.86);
	margin-bottom: 2.5rem;
}

.hero__acties {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: clamp(2.5rem, 6vh, 4rem);
}

/* Vertrouwensstrook onderin de hero. */
.hero__trust {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2.75rem;
	padding-top: 1.75rem;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	list-style: none;
	margin: 0;
	padding-inline-start: 0;
	font-size: 0.86rem;
	letter-spacing: 0.04em;
	color: rgba(255, 255, 255, 0.75);
}
.hero__trust li::before {
	content: "\2713";
	color: var(--tfta-lime);
	margin-inline-end: 0.6rem;
	font-weight: 500;
}

/* --- Herozoekbalk: brede zoekbalk met knop, goed leesbaar op het beeld --- */

.herozoek {
	display: flex;
	gap: 0.5rem;
	align-items: stretch;
	max-width: 44rem;
	background: var(--tfta-wit);
	border-radius: var(--radius);
	padding: 0.5rem;
	box-shadow: 0 1rem 2.5rem rgba(1, 31, 18, 0.35);
	margin-bottom: 1.25rem;
}

.herozoek__veld {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: transparent;
	color: var(--tfta-inkt);
	font-family: var(--font-basis);
	font-size: 1.05rem;
	padding: 0.85rem 1rem;
	border-radius: var(--radius);
}
.herozoek__veld::placeholder { color: var(--tfta-grijs); opacity: 1; }
.herozoek__veld:focus { outline: none; }
.herozoek:focus-within {
	outline: 3px solid var(--tfta-lime);
	outline-offset: 2px;
}

.herozoek__knop {
	flex: 0 0 auto;
	padding-inline: 1.75rem;
}

/* Populaire zoekopdrachten: pill-links naar de topcompetities. */
.herozoek__populair {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.6rem;
	margin-bottom: clamp(2rem, 5vh, 3rem);
}

.herozoek__populair-label {
	flex-basis: auto;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.72rem;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.7);
	margin-inline-end: 0.5rem;
}

.zoek-pill {
	display: inline-flex;
	align-items: center;
	padding: 0.45rem 1.05rem;
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 999px;
	color: var(--tfta-wit);
	background: rgba(1, 31, 18, 0.35);
	font-size: 0.82rem;
	font-weight: 500;
	letter-spacing: 0.03em;
	text-decoration: none;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.zoek-pill:hover {
	background: var(--tfta-lime);
	border-color: var(--tfta-lime);
	color: var(--tfta-groen-nacht);
}
.zoek-pill:focus-visible {
	outline: 3px solid var(--tfta-lime);
	outline-offset: 2px;
}

@media (max-width: 40rem) {
	/* Op een telefoon staan het veld en de knop onder elkaar. Zonder scheiding
	   oogt dat als één grote witte bak op de foto. Een lijntje tussen de twee
	   maakt zichtbaar dat het een invoerveld met een knop is, en een kleinere
	   schaduw laat het beeld erachter beter tot zijn recht komen. */
	.herozoek {
		flex-direction: column;
		gap: 0;
		padding: 0.35rem;
		box-shadow: 0 0.5rem 1.5rem rgba(1, 31, 18, 0.3);
	}
	.herozoek__veld {
		padding: 0.85rem 0.9rem;
		border-bottom: 1px solid var(--tfta-lijn);
	}
	.herozoek__knop {
		width: 100%;
		margin-top: 0.3rem;
		padding-block: 0.8rem;
	}
	/* Het label stond hier op flex-basis 100%, maar de rij eronder staat op
	   nowrap en dan kan niets meer afbreken. Gevolg: "Populaire zoekopdrachten"
	   bleef links staan, brak over twee regels en at een derde van de breedte
	   op, waardoor de eerste knop al half buiten beeld begon. Op een telefoon
	   spreken die knoppen voor zich, dus daar laten we het label alleen nog
	   horen door een schermlezer. */
	.herozoek__populair-label {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip-path: inset( 50% );
		white-space: nowrap;
		border: 0;
	}

	/* De competitieknopjes wikkelden over drie regels en duwden de tegels van
	   het scherm. Nu schuiven ze horizontaal, dus ze kosten één regel hoogte
	   en je kunt er langs vegen. De vervaging rechts laat zien dat er meer
	   staat; zonder die hint lijkt de laatste knop gewoon afgesneden. */
	.herozoek__populair {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		padding-bottom: 0.25rem;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
		mask-image: linear-gradient( to right, #000 calc( 100% - 2.5rem ), transparent );
		-webkit-mask-image: linear-gradient( to right, #000 calc( 100% - 2.5rem ), transparent );
	}
	.herozoek__populair::-webkit-scrollbar { display: none; }
	.herozoek__populair .zoek-pill {
		flex: 0 0 auto;
		scroll-snap-align: start;
	}

	/* Rechts ruimte laten voor de vervaging, anders valt de laatste knop er
	   deels in weg als je helemaal doorschuift. */
	.herozoek__populair::after {
		content: "";
		flex: 0 0 1.5rem;
	}
}

/* --- Homepage-hero: één scherm met de titel, de zoekbalk en de twee tegels ---

   De hero is precies één scherm hoog en verdeelt die hoogte zelf: bovenin het
   tekstblok, onderin de twee keuzetegels. Doordat de tegels onderdeel van de
   hero zijn, staan ze bij het openen van de pagina altijd volledig in beeld.
   Er zijn geen negatieve marges of losse secties meer voor nodig.

   De maten zijn uitgedrukt in dvh (schermhoogte), zodat de opbouw meekrimpt op
   een laag scherm. Getest op schermhoogtes van 620 tot 1200 pixels. Pas je hier
   iets aan, controleer dan opnieuw op 700 en op 900 pixels hoog. */

.hero--home {
	/* Precies één scherm, met een bovengrens zodat de hero op een hoge monitor
	   niet onnodig lang wordt, de tegels niet te ver van de zoekbalk komen te
	   staan en de volgende sectie alvast zichtbaar is. */
	min-height: min(100svh, 52rem);
	align-items: stretch;
}
.hero__kolom {
	position: relative;
	z-index: 2;
	width: 100%;
	display: flex;
	flex-direction: column;
	/* Tekstblok bovenin, tegels onderin; de vrije ruimte valt ertussen. */
	justify-content: space-between;
	gap: clamp(1.5rem, 4dvh, 3rem);
	/* Bovenin ruimte voor het menu, onderin een smalle rand onder de tegels. */
	padding-block: clamp(6rem, 12dvh, 9rem) clamp(1.75rem, 4dvh, 3rem);
}
.hero--home .hero__inner { padding-block: 0; }
.hero--home .hero__titel {
	/* Ook begrensd op schermhoogte, zodat de titel op een laag scherm meekrimpt
	   in plaats van de tegels uit beeld te duwen. */
	font-size: clamp(1.9rem, min(6vw, 8.5dvh), 4.5rem);
	margin-bottom: 0.4em;
	/* Breed genoeg zodat de titel op twee gebalanceerde regels valt
	   ("Waar voetbal en" / "hospitality samenkomen") in plaats van drie of
	   vier. In em, zodat het meeschaalt met de titelgrootte; min(,100%)
	   voorkomt dat hij op smallere schermen uit de kolom loopt. */
	max-width: min(14em, 100%);
}
.hero--home .herozoek__populair { margin-bottom: 0; }

/* De twee keuzetegels: breed en laag, met het beeld links en de tekst rechts.
   Ze liggen als glasplaat op het herobeeld, zodat hero en aanbod één geheel
   vormen. */
.hero__keuze {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(0.9rem, 1.8vw, 1.5rem);
}
.keuzekaart {
	display: grid;
	grid-template-columns: clamp(6.5rem, 15%, 10rem) minmax(0, 1fr);
	background: rgba(1, 25, 15, 0.66);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: 0 1.25rem 2.75rem rgba(1, 20, 12, 0.42);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	transition: border-color 0.18s ease, transform 0.18s ease;
}
.keuzekaart:hover {
	border-color: rgba(218, 219, 0, 0.5);
	transform: translateY(-2px);
}
.keuzekaart__beeld {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.keuzekaart__inhoud {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: clamp(0.35rem, 1dvh, 0.6rem);
	padding: clamp(1rem, 2.4dvh, 1.6rem) clamp(1.1rem, 1.8vw, 1.75rem);
}
.keuzekaart__titel {
	margin: 0;
	color: var(--tfta-wit);
	font-size: clamp(1.1rem, 2.5dvh, 1.45rem);
	line-height: 1.15;
	letter-spacing: -0.01em;
}
.keuzekaart__tekst {
	margin: 0;
	color: rgba(255, 255, 255, 0.82);
	font-size: clamp(0.88rem, 1.9dvh, 1rem);
	line-height: 1.45;
}
.keuzekaart__acties {
	margin: clamp(0.2rem, 0.8dvh, 0.5rem) 0 0;
	display: flex;
	align-items: center;
	gap: 1.1rem;
	flex-wrap: wrap;
}
.knop--compact {
	padding: 0.72rem 1.35rem;
	font-size: 0.76rem;
}
.keuzekaart__uitleg {
	color: rgba(255, 255, 255, 0.78);
	font-size: 0.82rem;
	text-decoration: underline;
	text-underline-offset: 0.22em;
}
.keuzekaart__uitleg:hover { color: var(--tfta-lime); }

/* Korte schermen: een slag compacter, zodat de tegels heel blijven. */
@media (min-width: 48rem) and (max-height: 900px) {
	.site-header__inner { min-height: 4.25rem; }
	.hero__eyebrow { margin-bottom: 0.7rem; }
	.hero--home .hero__titel { margin-bottom: 0.28em; }
	.hero--home .herozoek { margin-bottom: 0.85rem; }
}
/* Heel korte schermen: het beeld in de tegel wordt smaller en de extra
   uitleglink valt weg. Die uitleg blijft bereikbaar via de tickets-pagina. */
@media (min-width: 48rem) and (max-height: 700px) {
	.keuzekaart { grid-template-columns: clamp(4.5rem, 11%, 7rem) minmax(0, 1fr); }
	.keuzekaart__uitleg { display: none; }
}

/* Mobiel: de hero groeit gewoon mee met de inhoud en de tegels staan onder
   elkaar, met het beeld boven de tekst. */
@media (max-width: 48rem) {
	.hero--home { min-height: 0; }
	.hero__kolom {
		padding-block: clamp(5.5rem, 12vh, 7rem) 2.5rem;
		gap: 2.25rem;
	}
	.hero__keuze,
	.keuzekaart { grid-template-columns: minmax(0, 1fr); }
	.keuzekaart__beeld { height: 9rem; }
}

/* --- Splitsectie (beeld + tekst), o.a. zakelijke hospitality --- */

.split {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: clamp(2rem, 6vw, 5rem);
	align-items: center;
}
.split--omgekeerd { grid-template-columns: 1fr 1.05fr; }
.split--omgekeerd .split__beeld { order: 2; }

.split__beeld {
	position: relative;
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--schaduw);
}
.split__beeld img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}
.split__beeld:hover img { transform: scale(1.025); }

.split__tekst .vinklijst { margin-bottom: 2.25rem; }

/* --- Donkere secties --- */

.sectie--donker {
	background: var(--tfta-groen-nacht);
	color: rgba(255, 255, 255, 0.85);
}
.sectie--donker h2,
.sectie--donker h3 { color: var(--tfta-wit); }
.sectie--donker .eyebrow { color: var(--tfta-lime); }
.sectie--donker .vinklijst li::before { color: var(--tfta-lime); }

.sectie--ivoor { background: var(--tfta-ivoor); }

/* --- Aanbodkaarten met beeld --- */

.aanbod__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
	gap: 2rem;
}

.beeldkaart {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 30rem;
	border-radius: var(--radius);
	overflow: hidden;
	color: var(--tfta-wit);
	isolation: isolate;
	box-shadow: var(--schaduw-zacht);
}

.beeldkaart__beeld {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
	transition: transform 0.6s ease;
}
.beeldkaart:hover .beeldkaart__beeld { transform: scale(1.04); }

.beeldkaart::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to top, rgba(1, 31, 18, 0.93) 0%, rgba(1, 31, 18, 0.45) 45%, rgba(1, 31, 18, 0.05) 75%);
}

.beeldkaart__inhoud {
	position: relative;
	z-index: 2;
	padding: clamp(1.5rem, 3.5vw, 2.5rem);
}
.beeldkaart__inhoud h2,
.beeldkaart__inhoud h3 {
	color: var(--tfta-wit);
	font-size: clamp(1.5rem, 2.6vw, 2rem);
}
.beeldkaart__inhoud p {
	color: rgba(255, 255, 255, 0.84);
	max-width: 34rem;
	margin-bottom: 1.75rem;
}

/* --- Waarom TFTA --- */

.waarom__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: clamp(1.5rem, 3.5vw, 3rem);
	margin-top: 2.5rem;
}

.waarom__item {
	border-top: 2px solid var(--tfta-lime);
	padding-top: 1.5rem;
}
.waarom__item h3 {
	font-size: 1.15rem;
	margin-bottom: 0.5em;
}
.waarom__item p {
	margin: 0;
	font-size: 0.98rem;
	color: rgba(255, 255, 255, 0.82);
}
.waarom__nummer {
	display: block;
	font-family: var(--font-kop);
	font-style: normal;
	font-size: 1rem;
	color: var(--tfta-lime);
	margin-bottom: 1.25rem;
	letter-spacing: 0.06em;
}

/* --- Secties algemeen --- */

.sectie__kop {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
	margin-bottom: 2.75rem;
}
.sectie__kop h2 { margin: 0; }
.sectie__kop .eyebrow { margin-bottom: 0.75rem; }

.sectie__cta {
	margin-top: 3rem;
	text-align: center;
}
.sectie__cta p {
	color: var(--tfta-grijs);
	max-width: 38rem;
	margin-inline: auto;
}

/* --- CTA-band met beeld --- */

.cta-band {
	position: relative;
	color: var(--tfta-wit);
	isolation: isolate;
	overflow: hidden;
	background: var(--tfta-groen-nacht);
	text-align: center;
	padding-block: clamp(4.5rem, 11vw, 8rem);
}
.cta-band__beeld {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
	opacity: 0.55;
}
.cta-band::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: radial-gradient(ellipse at center, rgba(1, 31, 18, 0.25) 0%, rgba(1, 31, 18, 0.85) 100%);
}
.cta-band .wrap {
	position: relative;
	z-index: 2;
}
.cta-band h2 {
	color: var(--tfta-wit);
	font-size: clamp(2rem, 4.5vw, 3.25rem);
	max-width: 22ch;
	margin-inline: auto;
}
.cta-band p {
	max-width: 36rem;
	margin: 0 auto 2.5rem;
	color: rgba(255, 255, 255, 0.82);
}

/* --- Wedstrijdkaarten --- */

.wedstrijden__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
	gap: 1.75rem;
}

.wedstrijd-kaart {
	border-radius: var(--radius);
	background: var(--tfta-wit);
	overflow: hidden;
	border: 1px solid var(--tfta-lijn);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.wedstrijd-kaart:hover {
	box-shadow: var(--schaduw);
	transform: translateY(-3px);
}

.wedstrijd-kaart__link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.wedstrijd-kaart__media {
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--tfta-groen-nacht);
}
.wedstrijd-kaart__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
}
.wedstrijd-kaart:hover .wedstrijd-kaart__media img { transform: scale(1.05); }

.wedstrijd-kaart__competitie {
	position: absolute;
	inset-inline-start: 1rem;
	bottom: 1rem;
	margin: 0;
	background: rgba(1, 31, 18, 0.82);
	color: var(--tfta-lime);
	backdrop-filter: blur(4px);
	text-transform: uppercase;
	letter-spacing: 0.09em;
	font-size: 0.68rem;
	font-weight: 500;
	padding: 0.35rem 0.7rem;
	border-radius: 2px;
}

.wedstrijd-kaart__body { padding: 1.4rem 1.5rem 1.5rem; }

.wedstrijd-kaart__titel {
	font-size: 1.22rem;
	margin-bottom: 0.4rem;
}
.wedstrijd-kaart__titel .vs { color: var(--tfta-grijs); }

.wedstrijd-kaart__meta {
	font-size: 0.88rem;
	color: var(--tfta-grijs);
	margin-bottom: 1rem;
}

.wedstrijd-kaart__prijs {
	font-weight: 500;
	font-size: 0.92rem;
	color: var(--tfta-groen);
	margin: 0;
	padding-top: 0.9rem;
	border-top: 1px solid var(--tfta-lijn);
}

/* --- Clubchips (speelschema) --- */

.club-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 0 0 2.5rem;
	padding: 0;
	list-style: none;
}
.club-chips a {
	display: inline-block;
	padding: 0.5rem 1.1rem;
	border: 1px solid var(--tfta-lijn);
	border-radius: 999px;
	font-size: 0.85rem;
	font-weight: 500;
	text-decoration: none;
	color: var(--tfta-inkt);
	background: var(--tfta-wit);
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.club-chips a:hover,
.club-chips .is-actief a {
	background: var(--tfta-groen);
	border-color: var(--tfta-groen);
	color: var(--tfta-wit);
}

/* --- Vinklijst --- */

.vinklijst {
	list-style: none;
	padding: 0;
	margin: 0 0 2rem;
}
.vinklijst li {
	padding-inline-start: 1.9rem;
	position: relative;
	margin-bottom: 0.7rem;
}
.vinklijst li::before {
	content: "\2713";
	position: absolute;
	inset-inline-start: 0;
	color: var(--tfta-groen);
	font-weight: 500;
}

/* --- Paginakoppen (subpagina's) --- */

.pagina-kop {
	position: relative;
	background: var(--tfta-groen-nacht);
	color: var(--tfta-wit);
	padding-block: clamp(3.5rem, 8vw, 6rem);
	isolation: isolate;
	overflow: hidden;
}
.pagina-kop__beeld {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
	opacity: 0.45;
}
.pagina-kop::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to top, rgba(1, 31, 18, 0.9), rgba(1, 31, 18, 0.35));
}
.pagina-kop .wrap {
	position: relative;
	z-index: 2;
}
/* Kleine, onopvallende fotocredit rechtsonder in de kop. */
.pagina-kop__fotocredit {
	position: absolute;
	right: 0.6rem;
	bottom: 0.4rem;
	z-index: 2;
	margin: 0;
	font-size: 0.68rem;
	line-height: 1.3;
	color: rgba(255, 255, 255, 0.6);
	text-align: right;
	max-width: 60%;
}
.pagina-kop__fotocredit a {
	color: rgba(255, 255, 255, 0.75);
	text-decoration: underline;
}
.pagina-kop h1 { color: var(--tfta-wit); margin: 0; max-width: 24ch; }
.pagina-kop__intro {
	max-width: 44rem;
	color: rgba(255, 255, 255, 0.84);
	margin: 1.25rem 0 0;
	font-size: 1.08rem;
}
.pagina-kop__eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.78rem;
	font-weight: 500;
	color: var(--tfta-lime);
	margin: 0 0 1rem;
}

/* --- Inhoud --- */

.inhoud-kolom { max-width: 46rem; }
.inhoud-kolom h2 { font-size: 1.7rem; margin-top: 1.75em; }
.inhoud-kolom h2:first-child { margin-top: 0; }
.inhoud-kolom h3 { font-size: 1.2rem; margin-top: 1.5em; }

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

/* Navigatie tussen de pagina's binnen Over ons. */
.sectienav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem 1rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--tfta-lijn);
	margin-bottom: 2rem;
}
.sectienav__terug {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--tfta-groen);
	text-decoration: none;
}
.sectienav__terug:hover { text-decoration: underline; }
.sectienav__lijst {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-inline-start: auto;
}
.sectienav__link {
	display: inline-flex;
	align-items: center;
	padding: 0.4rem 1rem;
	border: 1px solid var(--tfta-lijn);
	border-radius: 999px;
	background: var(--tfta-wit);
	font-size: 0.82rem;
	font-weight: 500;
	color: var(--tfta-groen);
	text-decoration: none;
}
.sectienav__link:hover {
	background: var(--tfta-groen);
	border-color: var(--tfta-groen);
	color: var(--tfta-wit);
}
.sectienav__link:focus-visible { outline: 2px solid var(--tfta-groen); outline-offset: 2px; }

/* Kernwaarden als kaartenraster: drie kolommen op desktop, één op mobiel. */
.waarden {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}
.waarde {
	background: var(--tfta-wit);
	border: 1px solid var(--tfta-lijn);
	border-radius: var(--radius);
	padding: 1.5rem;
	border-top: 3px solid var(--tfta-lime);
}
.waarde__titel {
	font-size: 1.05rem;
	margin: 0 0 0.4rem;
	color: var(--tfta-groen);
}
.waarde__tekst {
	margin: 0;
	font-size: 0.92rem;
	color: var(--tfta-grijs);
}

/* Werkwijze als genummerde tijdlijn. */
.stappen {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
	display: grid;
	gap: 1.25rem;
}
.stap {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1rem;
	align-items: start;
	position: relative;
}
.stap__nummer {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--tfta-groen);
	color: var(--tfta-wit);
	font-family: var(--font-kop);
	font-weight: 700;
	position: relative;
	z-index: 1;
}
/* Verbindingslijn tussen de stappen. */
.stap:not(:last-child)::before {
	content: "";
	position: absolute;
	inset-inline-start: 1.25rem;
	top: 2.5rem;
	bottom: -1.25rem;
	width: 2px;
	background: var(--tfta-lijn);
}
.stap__titel { font-size: 1.05rem; margin: 0.35rem 0 0.3rem; }
.stap__tekst { margin: 0; color: var(--tfta-grijs); font-size: 0.95rem; }

/* Duurzaamheidsdoelen als nette opsomming. */
.sdg-intro { max-width: 46rem; color: var(--tfta-grijs); margin-bottom: 1.5rem; }
.sdgs {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.6rem;
}
.sdg {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	background: var(--tfta-wit);
	border: 1px solid var(--tfta-lijn);
	border-radius: var(--radius);
	padding: 0.75rem 1rem;
}
.sdg__nummer {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.1rem;
	height: 2.1rem;
	flex: 0 0 auto;
	border-radius: var(--radius);
	background: var(--tfta-lime);
	color: var(--tfta-groen-nacht);
	font-family: var(--font-kop);
	font-weight: 700;
	font-size: 0.9rem;
}
.sdg__titel { font-weight: 500; }

/* Vacatureblok. */
.vacature {
	background: var(--tfta-wit);
	border: 1px solid var(--tfta-lijn);
	border-radius: var(--radius);
	border-top: 4px solid var(--tfta-lime);
	padding: clamp(1.5rem, 4vw, 2.5rem);
	box-shadow: var(--schaduw-zacht);
}
.vacature__label {
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--tfta-grijs);
	margin: 0 0 0.4rem;
}
.vacature__titel { font-size: clamp(1.4rem, 3vw, 1.9rem); margin: 0 0 1rem; }
.vacature__intro { font-weight: 500; }
.vacature__kolommen {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	margin-top: 1.75rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--tfta-lijn);
}
.vacature__blok h3 { font-size: 1.05rem; margin: 0 0 0.6rem; }
.vacature__blok .vinklijst { font-size: 0.92rem; }
.vacature__voet {
	margin-top: 1.75rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--tfta-lijn);
}
.vacature__voet h3 { font-size: 1.15rem; margin: 0 0 0.5rem; }

/* Tagline en notities. */
.tagline { font-size: 1.05rem; margin-top: 1.5rem; }
.tagline strong { color: var(--tfta-groen); }
.notitie {
	margin-top: 1rem;
	font-size: 0.85rem;
	color: var(--tfta-grijs);
	border-inline-start: 3px solid var(--tfta-lijn);
	padding-inline-start: 0.9rem;
}
.sectie__cta--links { text-align: start; display: flex; flex-wrap: wrap; gap: 0.75rem; }

@media (min-width: 40rem) {
	.waarden { grid-template-columns: repeat(2, 1fr); }
	.sdgs { grid-template-columns: repeat(2, 1fr); }
	.vacature__kolommen { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 60rem) {
	.waarden { grid-template-columns: repeat(3, 1fr); }
	.vacature__kolommen { grid-template-columns: repeat(3, 1fr); }
}

.artikel-teaser {
	border-bottom: 1px solid var(--tfta-lijn);
	padding-block: 1.75rem;
}
.artikel-teaser h2 { font-size: 1.45rem; margin-bottom: 0.25em; }
.artikel-teaser__meta { font-size: 0.85rem; color: var(--tfta-grijs); }

.paginering { margin-top: 3rem; }
.paginering .nav-links { display: flex; gap: 0.75rem; }

/* --- Wedstrijddetail --- */

.wedstrijd-detail__grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: 3.5rem;
	align-items: start;
}

.wedstrijd-detail__boeken {
	background: var(--tfta-groen-nacht);
	color: rgba(255, 255, 255, 0.85);
	border-radius: var(--radius);
	padding: 2rem;
	box-shadow: var(--schaduw);
	position: sticky;
	top: 7rem;
}
.wedstrijd-detail__boeken h2 {
	font-size: 1.35rem;
	color: var(--tfta-wit);
}
.wedstrijd-detail__boeken .vinklijst li::before { color: var(--tfta-lime); }
.wedstrijd-detail__prijs {
	font-family: var(--font-kop);
	font-style: normal;
	font-size: 1.35rem;
	color: var(--tfta-lime);
}
.wedstrijd-detail__noot {
	font-size: 0.84rem;
	color: rgba(255, 255, 255, 0.75);
	margin: 0.9rem 0 0;
	text-align: center;
}

/* --- Aanvraagpagina --- */

.aanvraag__grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: 3.5rem;
	align-items: start;
}

.aanvraag__zijkant {
	background: var(--tfta-groen-nacht);
	color: rgba(255, 255, 255, 0.85);
	border-radius: var(--radius);
	padding: 2rem;
	position: sticky;
	top: 7rem;
}
.aanvraag__zijkant h2 { font-size: 1.35rem; color: var(--tfta-wit); }

/* Links op de donkere zijkant.
 *
 * De standaardkleur voor een link is donkergroen, en dat verdwijnt volledig in
 * de donkergroene achtergrond van dit blok. Op het contactformulier viel het
 * mailadres daardoor weg. Hier dus lime, de accentkleur die we overal voor
 * acties gebruiken, met een onderstreping zodat het ook zonder kleur te zien
 * is dat het een link is. */
.aanvraag__zijkant a {
	color: var(--tfta-lime);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}
.aanvraag__zijkant a:hover,
.aanvraag__zijkant a:focus-visible {
	color: var(--tfta-wit);
}
.aanvraag__zijkant a:focus-visible {
	outline: 2px solid var(--tfta-lime);
	outline-offset: 2px;
}

.stappenlijst {
	margin: 0;
	padding-inline-start: 1.25rem;
}
.stappenlijst li { margin-bottom: 1rem; }
.stappenlijst li::marker {
	font-family: var(--font-kop);
	font-style: normal;
	color: var(--tfta-lime);
}
.stappenlijst strong { color: var(--tfta-wit); }

/* --- Formulieren --- */

.formulier fieldset {
	border: 0;
	padding: 0;
	margin: 0 0 1.5rem;
}
.formulier legend {
	font-weight: 500;
	margin-bottom: 0.5rem;
}

.formulier__keuzes {
	display: flex;
	gap: 1.5rem;
	flex-wrap: wrap;
}

.formulier__rij {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
}

.veld { margin-bottom: 1.25rem; }
.veld label {
	display: block;
	font-weight: 500;
	font-size: 0.9rem;
	margin-bottom: 0.4rem;
}

.veld input,
.veld textarea {
	width: 100%;
	padding: 0.85rem 1rem;
	border: 1px solid #c6c5b8;
	border-radius: var(--radius);
	font: inherit;
	background: var(--tfta-wit);
}
.veld input:focus,
.veld textarea:focus {
	outline: 2px solid var(--tfta-groen);
	outline-offset: 1px;
	border-color: var(--tfta-groen);
}

.verborgen-veld { position: absolute; left: -999rem; }

.formulier__verzenden { margin-top: 1.5rem; }
.formulier__privacy {
	font-size: 0.85rem;
	color: var(--tfta-grijs);
}

.melding {
	border-radius: var(--radius);
	padding: 1.5rem 1.75rem;
	margin-bottom: 2rem;
}
.melding--succes {
	background: #eef7ee;
	border: 1px solid #bfe0bf;
}
.melding--succes h2 { margin-bottom: 0.25em; }
.melding--fout {
	background: #fdf0ef;
	border: 1px solid #f0c4c0;
}
.melding p:last-child { margin: 0; }

/* --- Footer --- */

.site-footer {
	background: var(--tfta-groen-nacht);
	color: rgba(255, 255, 255, 0.75);
}

.site-footer__boven {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 2.5rem;
	flex-wrap: wrap;
	padding-block: 4rem 2.5rem;
}

.site-footer__belofte {
	max-width: 24rem;
	margin-top: 1.25rem;
	font-family: var(--font-kop);
	font-size: 1.05rem;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.85);
}

.site-footer__lijst {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 1.75rem;
	flex-wrap: wrap;
}
.site-footer__lijst a {
	color: rgba(255, 255, 255, 0.8);
	text-decoration: none;
	font-size: 0.88rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.site-footer__lijst a:hover { color: var(--tfta-lime); }

.site-footer__onder {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	padding-block: 1.5rem;
	font-size: 0.84rem;
	color: rgba(255, 255, 255, 0.72);
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
	justify-content: space-between;
}
.site-footer__onder p { margin: 0; }

/* Knop in het uitklapmenu: alleen op smalle schermen, waar de knop uit
   de kop verdwijnt. */
.site-nav__cta,
.site-nav__account { display: none; }

/* --- Responsief --- */

@media (max-width: 72rem) {
	.site-nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--tfta-groen-nacht);
		padding: 1.25rem 1.5rem 1.75rem;
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	}
	.site-header.is-doorzichtig .site-nav { background: var(--tfta-groen-nacht); }
	.site-nav.is-open { display: block; }
	.site-nav__list { flex-direction: column; gap: 1.1rem; }
	.nav-toggle { display: block; }

	/* Op mobiel geen uitklapper: het submenu staat gewoon ingesprongen
	   onder het hoofditem, zodat alles met een tik bereikbaar is. */
	.site-nav__list .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		background: transparent;
		border: 0;
		box-shadow: none;
		padding: 0.6rem 0 0;
		margin-inline-start: 1rem;
		display: grid;
		gap: 0.75rem;
		min-width: 0;
	}
	.site-nav__list .sub-menu a { padding: 0; }

	/* Grotere raakvlakken. Een menu-item van tekstformaat is op een telefoon
	   lastig te raken; 44 pixels hoog is de gangbare ondergrens. */
	.site-nav__list > li > a {
		display: block;
		padding-block: 0.35rem;
		min-height: 2.75rem;
		line-height: 2;
	}

	/* De actieknop binnen het menu. Hij staat onderaan, over de volle breedte,
	   met een scheiding erboven zodat hij niet als menu-item wordt gelezen. */
	.site-nav__cta {
		display: block;
		width: 100%;
		margin-top: 1.25rem;
		padding-top: 0.9rem;
		text-align: center;
	}

	/* Het account eronder, als gewone link. Op een telefoon staat hij niet in
	   de kop, want daar is naast het logo geen ruimte voor drie dingen. */
	.site-nav__account {
		display: block;
		width: 100%;
		margin-top: 0.9rem;
		padding: 0.6rem 0;
		text-align: center;
		color: rgba(255, 255, 255, 0.82);
		text-decoration: none;
		font-size: 0.9rem;
	}

	.site-nav__account:hover,
	.site-nav__account:focus-visible { color: var(--tfta-lime); }

	/* En dan niet ook nog in de kop: één keer per scherm is genoeg. */
	.site-header__account { display: none; }

	.split,
	.split--omgekeerd { grid-template-columns: 1fr; }
	.split--omgekeerd .split__beeld { order: 0; }

	.wedstrijd-detail__grid,
	.aanvraag__grid { grid-template-columns: 1fr; }
	.wedstrijd-detail__boeken,
	.aanvraag__zijkant { position: static; }
}

@media (max-width: 48rem) {
	.site-header__cta { display: none; }
	.formulier__rij { grid-template-columns: 1fr; gap: 0; }
	.hero { min-height: 88vh; }
	.beeldkaart { min-height: 24rem; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.knop,
	.split__beeld img,
	.beeldkaart__beeld,
	.wedstrijd-kaart__media img { transition: none; }
	.hero__beeld { animation: none; }
}

/* --- Filters (speelschema en club-/competitiepagina's) --- */

.filters { margin-bottom: 2.75rem; }

.filters__groep { margin-bottom: 1.25rem; }

.filters__label {
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.72rem;
	font-weight: 500;
	color: var(--tfta-grijs);
	margin: 0 0 0.5rem;
}

.filters__maand select {
	font: inherit;
	padding: 0.6rem 2.25rem 0.6rem 0.9rem;
	border: 1px solid var(--tfta-lijn);
	border-radius: var(--radius);
	background: var(--tfta-wit);
	color: var(--tfta-inkt);
	max-width: 100%;
}

/* --- Ticketaanbod op wedstrijdpagina's --- */

.aanbod-blok { margin-top: 3rem; }
.aanbod-blok:first-child { margin-top: 0; }
.aanbod-blok__intro {
	color: var(--tfta-grijs);
	max-width: 40rem;
}

.ticket-rij {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1.5rem;
	flex-wrap: wrap;
	border: 1px solid var(--tfta-lijn);
	border-radius: var(--radius);
	padding: 1.4rem 1.6rem;
	margin-bottom: 1rem;
	background: var(--tfta-wit);
	transition: box-shadow 0.15s ease;
}
.ticket-rij:hover { box-shadow: var(--schaduw-zacht); }

.ticket-rij--hospitality {
	border-top: 3px solid var(--tfta-lime);
	background: linear-gradient(to bottom, #fbfbf4, var(--tfta-wit));
}

.ticket-rij__info { flex: 1 1 22rem; min-width: 0; }
.ticket-rij__info h3 {
	font-size: 1.15rem;
	margin-bottom: 0.35rem;
}

.ticket-rij__kenmerken {
	list-style: none;
	margin: 0 0 0.6rem;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1.25rem;
	font-size: 0.88rem;
	color: var(--tfta-grijs);
}
.ticket-rij__kenmerken li::before {
	content: "\2713";
	color: var(--tfta-groen);
	margin-inline-end: 0.4rem;
	font-weight: 500;
}

.ticket-rij__meta {
	margin: 0;
	font-size: 0.85rem;
	color: var(--tfta-grijs);
}

.beschikbaarheid {
	font-weight: 500;
}
.beschikbaarheid--beschikbaar { color: #1c7a3d; }
.beschikbaarheid--beperkt { color: #a86400; }
.beschikbaarheid--uitverkocht { color: #a83232; }

.ticket-rij__actie {
	text-align: end;
	flex: 0 0 auto;
}
.ticket-rij__prijs {
	font-family: var(--font-kop);
	font-size: 1.2rem;
	color: var(--tfta-groen);
	margin: 0 0 0.75rem;
}
.ticket-rij__pp {
	font-family: var(--font-basis);
	font-size: 0.8rem;
	color: var(--tfta-grijs);
}

.melding--info {
	background: var(--tfta-ivoor);
	border: 1px solid var(--tfta-lijn);
}

.mini-trust {
	list-style: none;
	margin: 1.75rem 0 0;
	padding: 1.25rem 0 0;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	font-size: 0.84rem;
	color: rgba(255, 255, 255, 0.78);
}
.mini-trust li {
	padding-inline-start: 1.4rem;
	position: relative;
	margin-bottom: 0.5rem;
}
.mini-trust li::before {
	content: "\2713";
	position: absolute;
	inset-inline-start: 0;
	color: var(--tfta-lime);
}

/* --- FAQ --- */

.faq { margin-top: 1rem; }

.faq__item {
	border-bottom: 1px solid var(--tfta-lijn);
}
.faq__vraag {
	cursor: pointer;
	list-style: none;
	font-family: var(--font-kop);
	font-size: 1.2rem;
	color: var(--tfta-groen);
	padding-block: 1.25rem;
	padding-inline: 0 2.5rem;
	position: relative;
}
.faq__vraag::-webkit-details-marker { display: none; }
.faq__vraag::after {
	content: "+";
	position: absolute;
	inset-inline-end: 0.25rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.5rem;
	color: var(--tfta-lime-donker);
	transition: transform 0.2s ease;
}
.faq__item[open] .faq__vraag::after {
	content: "\2212";
}
.faq__antwoord {
	padding: 0 0 1.5rem;
	color: var(--tfta-grijs);
	max-width: 42rem;
}
.faq__antwoord p:last-child { margin: 0; }

/* --- Vertrouwensstrook --- */

.vertrouwen {
	background: var(--tfta-ivoor);
	border-top: 1px solid var(--tfta-lijn);
	padding-block: 3rem;
}

.vertrouwen__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: 2.5rem;
}

.vertrouwen__kop {
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.72rem;
	font-weight: 500;
	color: var(--tfta-grijs);
	margin: 0 0 0.75rem;
}

.vertrouwen__score {
	color: var(--tfta-goud);
	font-size: 1.3rem;
	letter-spacing: 0.14em;
	margin: 0 0 0.5rem;
}

.vertrouwen__tekst {
	font-size: 0.88rem;
	color: var(--tfta-grijs);
	margin: 0;
	max-width: 26rem;
}

.vertrouwen__partners,
.vertrouwen__betalen {
	list-style: none;
	margin: 0 0 0.6rem;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.vertrouwen__partners li,
.vertrouwen__betalen li {
	border: 1px solid var(--tfta-lijn);
	border-radius: var(--radius);
	background: var(--tfta-wit);
	padding: 0.35rem 0.9rem;
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--tfta-groen);
}
/* Een betaalmerk met een echt logo: strakker vakje, want het beeld doet het
   werk. De hoogte staat vast op 24 pixels; Visa eist minimaal vijf millimeter
   op een scherm en daar zit dit ruim boven. */
.vertrouwen__betalen-merk {
	display: inline-flex;
	align-items: center;
	padding: 0.4rem 0.7rem;
}
.vertrouwen__betalen-merk img {
	display: block;
	height: 24px;
	width: auto;
}

/* Officiële partners als logo's: nette witte kaart met het clublogo. */
.vertrouwen__partners--logos {
	gap: 0.75rem;
	align-items: center;
}
.vertrouwen__partners--logos li {
	padding: 0.6rem 0.9rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.partner-logo {
	height: 3.25rem;
	width: auto;
	max-width: 100%;
	display: block;
}

@media (max-width: 48rem) {
	.ticket-rij__actie { text-align: left; width: 100%; }
}

/* --- Speelschema: competitiekeuze, wedstrijden en stand --- */

.competitie-keuze {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.6rem;
	margin-bottom: 1.75rem;
}
.competitie-keuze__label {
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.72rem;
	font-weight: 500;
	color: var(--tfta-grijs);
	margin-inline-end: 0.4rem;
}
/* De pills hergebruiken de hero-pill-stijl, maar op lichte achtergrond. */
.competitie-keuze .zoek-pill {
	color: var(--tfta-groen);
	background: var(--tfta-wit);
	border-color: var(--tfta-lijn);
}
.competitie-keuze .zoek-pill:hover {
	background: var(--tfta-groen);
	border-color: var(--tfta-groen);
	color: var(--tfta-wit);
}
.competitie-keuze .zoek-pill.is-actief {
	background: var(--tfta-groen);
	border-color: var(--tfta-groen);
	color: var(--tfta-wit);
}

.speelschema-intro {
	color: var(--tfta-grijs);
	max-width: 46rem;
	margin-bottom: 2rem;
}

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

/* Speelronde: uitklapbaar, eerstvolgende ronde staat open. */
.ronde {
	border: 1px solid var(--tfta-lijn);
	border-radius: var(--radius);
	background: var(--tfta-wit);
	margin-bottom: 0.75rem;
}
.ronde__kop {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.85rem 1rem;
	cursor: pointer;
	list-style: none;
	font-family: var(--font-kop);
	font-weight: 600;
	color: var(--tfta-groen);
}
.ronde__kop::-webkit-details-marker { display: none; }
.ronde__kop::after {
	content: "";
	width: 0.55rem;
	height: 0.55rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.18s ease;
	flex: 0 0 auto;
}
.ronde[open] > .ronde__kop::after { transform: rotate(-135deg); }
.ronde__kop:hover { background: var(--tfta-ivoor); }
.ronde__kop:focus-visible { outline: 2px solid var(--tfta-groen); outline-offset: -2px; }
.ronde__aantal {
	margin-inline-start: auto;
	font-family: var(--font-basis);
	font-weight: 400;
	font-size: 0.82rem;
	color: var(--tfta-grijs);
}
.ronde > .fixtures { border-top: 1px solid var(--tfta-lijn); }

/* Wedstrijdregels. */
.fixtures { list-style: none; margin: 0; padding: 0; }
.fixture {
	display: grid;
	grid-template-columns: 5.5rem 1fr auto auto;
	align-items: center;
	gap: 0.5rem 0.75rem;
	padding: 0.65rem 1rem;
}
.fixture + .fixture { border-top: 1px solid var(--tfta-lijn); }
.fixture:hover { background: var(--tfta-ivoor); }

.fixture__tijd {
	font-size: 0.82rem;
	color: var(--tfta-grijs);
	font-variant-numeric: tabular-nums;
}
.fixture__live {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--tfta-groen);
	font-weight: 600;
}
/* Pulserend bolletje bij een lopende wedstrijd. */
.fixture__stip {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: #c0392b;
	flex: 0 0 auto;
	animation: tfta-pulse 1.6s ease-in-out infinite;
}
@keyframes tfta-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.45; transform: scale(0.8); }
}
@media (prefers-reduced-motion: reduce) {
	.fixture__stip { animation: none; }
}
.fixture--bezig { background: rgba(218, 219, 0, 0.07); }
.fixture__afgelast { color: var(--tfta-grijs); font-style: italic; }

.fixture__teams { display: grid; gap: 0.2rem; min-width: 0; }
.fixture__team { min-width: 0; }

.fixture__uitslag {
	text-align: end;
	min-width: 3rem;
	font-variant-numeric: tabular-nums;
}
.fixture__score { font-weight: 700; color: var(--tfta-inkt); }
.fixture__score--bezig { color: var(--tfta-groen); }
.fixture__vs { color: var(--tfta-lijn); }

.fixture__tickets {
	display: inline-block;
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 600;
	color: var(--tfta-groen-nacht);
	background: var(--tfta-lime);
	border-radius: 999px;
	padding: 0.3rem 0.8rem;
	text-decoration: none;
	white-space: nowrap;
}
.fixture__tickets:hover { background: var(--tfta-lime-donker); }
.fixture__tickets:focus-visible { outline: 2px solid var(--tfta-groen); outline-offset: 2px; }

/* Clubcel: logo plus naam, klikbaar naar de clubpagina. */
.clubcel {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-width: 0;
	text-decoration: none;
	color: var(--tfta-inkt);
}
a.clubcel:hover .clubcel__naam { text-decoration: underline; }
.clubcel__logohouder {
	display: inline-flex;
	width: 1.4rem;
	height: 1.4rem;
	flex: 0 0 auto;
}
.clubcel__logohouder img { width: 100%; height: 100%; object-fit: contain; }
.clubcel__naam {
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Wedstrijden van een dag, per competitie. */
.dagcompetitie {
	border: 1px solid var(--tfta-lijn);
	border-radius: var(--radius);
	background: var(--tfta-wit);
	margin-bottom: 1.25rem;
	overflow: hidden;
}
.dagcompetitie__kop {
	font-size: 0.95rem;
	margin: 0;
	padding: 0.75rem 1rem;
	background: var(--tfta-ivoor);
	border-bottom: 1px solid var(--tfta-lijn);
}
.dagcompetitie__kop a { color: var(--tfta-groen); text-decoration: none; }
.dagcompetitie__kop a:hover { text-decoration: underline; }

/* Datumnavigatie op de hub. */
.dagnav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 1rem;
	border: 1px solid var(--tfta-lijn);
	border-radius: var(--radius);
	background: var(--tfta-wit);
	margin-bottom: 1.5rem;
}
.dagnav__stap {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--tfta-groen);
	text-decoration: none;
	font-size: 0.85rem;
	font-weight: 500;
	white-space: nowrap;
}
.dagnav__stap:hover { text-decoration: underline; }
.dagnav__huidig {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	margin-inline: auto;
	text-align: center;
}
.dagnav__vandaag { font-size: 0.78rem; color: var(--tfta-grijs); }
.dagnav__kiezer {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	flex-wrap: wrap;
}
.dagnav__kiezer label {
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--tfta-grijs);
}
.dagnav__kiezer input[type="date"] {
	font: inherit;
	font-size: 0.85rem;
	padding: 0.4rem 0.6rem;
	border: 1px solid var(--tfta-lijn);
	border-radius: var(--radius);
	background: var(--tfta-wit);
	color: var(--tfta-inkt);
}
.dagnav__knop { padding: 0.5rem 1rem; font-size: 0.72rem; }
.dagnav__telling {
	font-size: 0.85rem;
	color: var(--tfta-grijs);
	margin-bottom: 1rem;
}

/* Tabbladen (werken zonder JavaScript via ?tab=). */
.tabs__lijst {
	display: inline-flex;
	gap: 0.35rem;
	background: var(--tfta-ivoor);
	border: 1px solid var(--tfta-lijn);
	border-radius: 999px;
	padding: 0.3rem;
	margin-bottom: 1.5rem;
}
.tabs__tab {
	display: inline-flex;
	align-items: center;
	padding: 0.55rem 1.35rem;
	border-radius: 999px;
	font-family: var(--font-basis);
	font-weight: 500;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	text-decoration: none;
	color: var(--tfta-groen);
}
.tabs__tab:hover { background: rgba(0, 66, 37, 0.08); }
.tabs__tab.is-actief { background: var(--tfta-groen); color: var(--tfta-wit); }
.tabs__tab:focus-visible { outline: 2px solid var(--tfta-groen); outline-offset: 2px; }

/* Clubpagina. */
.clubkop { display: flex; align-items: center; gap: 1.25rem; }
.clubkop__logohouder {
	display: inline-flex;
	width: 4.5rem;
	height: 4.5rem;
	flex: 0 0 auto;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 50%;
	padding: 0.6rem;
}
.clubkop__logohouder img { width: 100%; height: 100%; object-fit: contain; }
.clubkop__meta { color: rgba(255, 255, 255, 0.85); font-size: 0.9rem; margin-top: 0.35rem; }
.clubkop__meta a { color: var(--tfta-lime); }

.clubblok { margin-bottom: 2rem; }
.clubblok__kop {
	font-size: clamp(1.2rem, 2.2vw, 1.5rem);
	padding-bottom: 0.5rem;
	border-bottom: 2px solid var(--tfta-lime);
	margin-bottom: 1rem;
}
.kruimel-terug { font-size: 0.85rem; margin-bottom: 1.25rem; }

/* Zones in de stand: subtiele markering met een gekleurde rand. */
.stand__rij--cl { box-shadow: inset 3px 0 0 var(--tfta-groen); }
.stand__rij--el { box-shadow: inset 3px 0 0 var(--tfta-goud); }
.stand__rij--promotie { box-shadow: inset 3px 0 0 var(--tfta-groen); }
.stand__rij--playoff { box-shadow: inset 3px 0 0 var(--tfta-lime-donker); }
.stand__rij--degradatie { box-shadow: inset 3px 0 0 #b23b3b; }

.stand-legenda {
	list-style: none;
	margin: 0.9rem 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	font-size: 0.8rem;
	color: var(--tfta-grijs);
}
.stand-legenda__item { display: inline-flex; align-items: center; gap: 0.45rem; }
.stand-legenda__kleur {
	width: 0.75rem;
	height: 0.75rem;
	border-radius: 2px;
	display: inline-block;
}
.stand-legenda__kleur--cl { background: var(--tfta-groen); }
.stand-legenda__kleur--el { background: var(--tfta-goud); }
.stand-legenda__kleur--promotie { background: var(--tfta-groen); }
.stand-legenda__kleur--playoff { background: var(--tfta-lime-donker); }
.stand-legenda__kleur--degradatie { background: #b23b3b; }

/* Mobiel: compacter, minder kolommen in de stand. */
@media (max-width: 48rem) {
	.fixture {
		grid-template-columns: 4.5rem 1fr auto;
		padding: 0.6rem 0.75rem;
	}
	.fixture__actie { grid-column: 2 / -1; }
	.fixture__tickets { font-size: 0.68rem; padding: 0.25rem 0.7rem; }
	.stand__breed { display: none; }
	.dagnav { gap: 0.5rem; }
	.dagnav__huidig { order: -1; flex-basis: 100%; }
	.dagnav__kiezer { flex-basis: 100%; }
	.clubkop { gap: 0.9rem; }
	.clubkop__logohouder { width: 3.25rem; height: 3.25rem; padding: 0.4rem; }
}

/* Stand-tabel. */
.stand-wrap { overflow-x: auto; }
.stand {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
}
.stand th,
.stand td {
	padding: 0.5rem 0.4rem;
	text-align: center;
	border-bottom: 1px solid var(--tfta-lijn);
	white-space: nowrap;
}
.stand thead th {
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--tfta-grijs);
	font-weight: 600;
}
.stand__pos { width: 2rem; color: var(--tfta-grijs); }
/* Hogere specificiteit dan ".stand th, .stand td", anders wint center. */
.stand th.stand__clubkop,
.stand td.stand__clubkop {
	text-align: start;
	width: 40%;
}
.stand th.stand__pos,
.stand td.stand__pos {
	text-align: end;
	font-weight: 400;
}
.stand__punten { color: var(--tfta-groen); }
.stand__club { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; color: var(--tfta-inkt); }
.stand__club:hover .stand__clubnaam { text-decoration: underline; }
.stand__logohouder {
	display: inline-flex;
	width: 1.5rem;
	height: 1.5rem;
	flex: 0 0 auto;
}
.stand__logohouder img { width: 100%; height: 100%; object-fit: contain; }
.stand__clubnaam { font-weight: 500; }
.stand__bijgewerkt {
	margin-top: 0.9rem;
	font-size: 0.82rem;
	color: var(--tfta-grijs);
}

@media (max-width: 60rem) {
	.speelschema-grid { grid-template-columns: 1fr; }
}
@media (max-width: 40rem) {
	.fixture__inner {
		grid-template-columns: 1fr auto 1fr;
		row-gap: 0.35rem;
	}
	.fixture__datum { grid-column: 1 / -1; min-width: 0; }
	.fixture__tickets { grid-column: 1 / -1; }
}

/* --- Zoekbalk (homepage) --- */

.zoekbalk {
	position: relative;
	z-index: 5;
	margin-top: -3.25rem;
}

.zoekbalk__form {
	background: var(--tfta-wit);
	border-radius: var(--radius);
	box-shadow: var(--schaduw);
	border: 1px solid var(--tfta-lijn);
	padding: 1.5rem clamp(1.5rem, 3vw, 2.25rem) 1.75rem;
}

.zoekbalk__titel {
	font-family: var(--font-kop);
	font-size: 1.25rem;
	color: var(--tfta-groen);
	margin: 0 0 1rem;
}

.zoekbalk__velden {
	display: grid;
	grid-template-columns: 1.3fr 1.3fr 1fr auto;
	gap: 1rem;
	align-items: end;
}

.zoekbalk__veld span {
	display: block;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.7rem;
	font-weight: 500;
	color: var(--tfta-grijs);
	margin-bottom: 0.4rem;
}

.zoekbalk__veld select {
	width: 100%;
	font: inherit;
	padding: 0.75rem 2rem 0.75rem 0.9rem;
	border: 1px solid var(--tfta-lijn);
	border-radius: var(--radius);
	background: var(--tfta-wit);
	color: var(--tfta-inkt);
}

.zoekbalk__knop { padding-block: 0.85rem; }

.sectie--compact-boven { padding-top: clamp(2.5rem, 5vw, 4rem); }

/* --- Clubtegels --- */

.club-tegels {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
	gap: 1.25rem;
}

.club-tegel {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 9.5rem;
	padding: 1.4rem 1.5rem;
	border-radius: var(--radius);
	background:
		radial-gradient(ellipse at 15% 115%, rgba(218, 219, 0, 0.12), transparent 55%),
		linear-gradient(150deg, var(--tfta-groen) 0%, var(--tfta-groen-nacht) 90%);
	color: var(--tfta-wit);
	text-decoration: none;
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.club-tegel:hover {
	transform: translateY(-3px);
	box-shadow: var(--schaduw);
}

.club-tegel__stad {
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.68rem;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.78);
	margin-bottom: 0.4rem;
}

.club-tegel__naam {
	font-family: var(--font-kop);
	font-size: 1.35rem;
	line-height: 1.15;
}

.club-tegel__pijl {
	position: absolute;
	top: 1.1rem;
	inset-inline-end: 1.25rem;
	color: var(--tfta-lime);
	font-size: 1.1rem;
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity 0.2s ease, transform 0.2s ease;
}
.club-tegel:hover .club-tegel__pijl {
	opacity: 1;
	transform: translateX(0);
}

/* --- Competitietegels --- */

.competitie-tegels {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 2rem;
}

.competitie-tegel {
	display: inline-block;
	padding: 0.85rem 1.6rem;
	border: 1px solid var(--tfta-lijn);
	border-radius: var(--radius);
	background: var(--tfta-ivoor);
	color: var(--tfta-groen);
	font-family: var(--font-kop);
	font-size: 1.05rem;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.competitie-tegel:hover {
	background: var(--tfta-groen);
	border-color: var(--tfta-groen);
	color: var(--tfta-wit);
}

/* --- Hospitality-kaarten (wedstrijdpagina) --- */

.hospitality-kaarten {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
	gap: 1.5rem;
}

.hospitality-kaart {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--tfta-lijn);
	border-top: 3px solid var(--tfta-lime);
	border-radius: var(--radius);
	background: linear-gradient(to bottom, #fbfbf4, var(--tfta-wit) 30%);
	padding: 1.6rem 1.6rem 1.75rem;
	box-shadow: var(--schaduw-zacht);
}

.hospitality-kaart__kop h3 {
	font-size: 1.25rem;
	margin-bottom: 0.3rem;
}

.hospitality-kaart__status {
	font-size: 0.84rem;
	color: var(--tfta-grijs);
	margin: 0 0 1.1rem;
}

.hospitality-kaart__label {
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.7rem;
	font-weight: 500;
	color: var(--tfta-grijs);
	margin: 0 0 0.6rem;
}

.hospitality-kaart__inclusies {
	margin-bottom: 1.5rem;
	font-size: 0.94rem;
}
.hospitality-kaart__inclusies li { margin-bottom: 0.45rem; }

.hospitality-kaart__voet { margin-top: auto; }

.hospitality-kaart__prijs {
	font-family: var(--font-kop);
	font-size: 1.1rem;
	color: var(--tfta-groen);
	margin: 0 0 0.9rem;
}

/* --- Taalkiezer (8 talen: compacte dropdown) --- */

.lang-switch--dropdown { position: relative; }

.lang-switch__knop {
	list-style: none;
	cursor: pointer;
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.05em;
	padding: 0.35rem 0.6rem;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: var(--radius);
}
.lang-switch__knop::-webkit-details-marker { display: none; }
.lang-switch__knop::after { content: " \25BE"; font-size: 0.7em; }

.lang-switch__lijst {
	position: absolute;
	top: calc(100% + 0.5rem);
	inset-inline-end: 0;
	min-width: 11rem;
	background: var(--tfta-groen-nacht);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: var(--radius);
	box-shadow: var(--schaduw);
	list-style: none;
	margin: 0;
	padding: 0.4rem;
	z-index: 60;
}
.lang-switch__lijst a {
	display: block;
	padding: 0.45rem 0.75rem;
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
	font-size: 0.85rem;
	border-radius: 2px;
}
.lang-switch__lijst a:hover { background: rgba(255, 255, 255, 0.08); color: var(--tfta-lime); }
.lang-switch__lijst .is-current a { color: var(--tfta-lime); font-weight: 500; }

/* --- RTL-verfijning (Arabisch) --- */

[dir="rtl"] .link-pijl::after { content: " \2190"; }
[dir="rtl"] .club-tegel__pijl { transform: translateX(4px) scaleX(-1); }
[dir="rtl"] .club-tegel:hover .club-tegel__pijl { transform: translateX(0) scaleX(-1); }

@media (max-width: 60rem) {
	.zoekbalk { margin-top: -2rem; }
	.zoekbalk__velden { grid-template-columns: 1fr 1fr; }
	.zoekbalk__knop { grid-column: 1 / -1; }
}

@media (max-width: 40rem) {
	.zoekbalk__velden { grid-template-columns: 1fr; }
}

/* Filterbalk op speelschema en club-/competitiepagina's: zelfde
   selectievakken als de homepage-zoekbalk, zonder hero-overlap. */
.zoekbalk--vlak {
	margin-top: 0;
	margin-bottom: 2.75rem;
}
.zoekbalk--vlak .zoekbalk__form {
	background: var(--tfta-ivoor);
	box-shadow: none;
	padding-top: 1.25rem;
}

/* --- Ticketpagina: soortkeuze en getrapte filter --- */

.ticket-tabs {
	display: inline-flex;
	gap: 0.35rem;
	background: var(--tfta-ivoor);
	border: 1px solid var(--tfta-lijn);
	border-radius: 999px;
	padding: 0.3rem;
	margin-bottom: 1.75rem;
}

.ticket-tab {
	display: inline-flex;
	align-items: center;
	padding: 0.6rem 1.5rem;
	border-radius: 999px;
	font-family: var(--font-basis);
	font-weight: 500;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	text-decoration: none;
	color: var(--tfta-groen);
	transition: background-color 0.18s ease, color 0.18s ease;
}
.ticket-tab:hover { background: rgba(0, 66, 37, 0.08); }
.ticket-tab.is-actief {
	background: var(--tfta-groen);
	color: var(--tfta-wit);
}
.ticket-tab:focus-visible {
	outline: 2px solid var(--tfta-groen);
	outline-offset: 2px;
}

.ticket-tabs__uitleg {
	color: var(--tfta-grijs);
	font-size: 0.95rem;
	max-width: 46rem;
	margin: -0.75rem 0 1.5rem;
}

/* Wedstrijdpagina: de twee ticketsoorten uit het bestand naast elkaar. */
.aanbod-soorten {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1.25rem;
	margin-top: 1.25rem;
}
.aanbod-soort {
	border: 1px solid var(--tfta-lijn);
	border-radius: var(--radius);
	padding: 1.5rem;
	background: var(--tfta-wit);
	display: flex;
	flex-direction: column;
}
.aanbod-soort h3 { margin: 0 0 0.35rem; }
.aanbod-soort__intro {
	color: var(--tfta-grijs);
	font-size: 0.95rem;
	margin: 0 0 1rem;
}
.aanbod-soort__prijs {
	font-weight: 600;
	margin: 0 0 1rem;
}
.aanbod-soort .knop { margin-top: auto; align-self: flex-start; }

/* Neutrale laag op de ticketpagina: komende wedstrijden zonder geladen
   soortsplitsing, onder de tab-resultaten. */
.sectie__kop--algemeen { margin-top: 3rem; }
.algemeen-kop { font-size: clamp(1.35rem, 2.4vw, 1.75rem); }
.algemeen-noot {
	color: var(--tfta-grijs);
	font-size: 0.95rem;
	max-width: 46rem;
	margin-top: 0.35rem;
}

/* Vier filtervelden plus knop op de ticketpagina. */
.zoekbalk__velden--vier { grid-template-columns: 1.2fr 1.2fr 1fr 1fr auto; }

.zoekbalk__veld input[type="date"] {
	width: 100%;
	font: inherit;
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--tfta-lijn);
	border-radius: var(--radius);
	background: var(--tfta-wit);
	color: var(--tfta-inkt);
}
.zoekbalk__veld input[type="date"]:focus-visible {
	outline: 2px solid var(--tfta-groen);
	outline-offset: 1px;
}

@media (max-width: 64rem) {
	.zoekbalk__velden--vier { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 40rem) {
	.zoekbalk__velden--vier { grid-template-columns: 1fr; }
	.ticket-tabs {
		display: flex;
		width: 100%;
	}
	.ticket-tab {
		flex: 1 1 0;
		justify-content: center;
		text-align: center;
	}
}

/* --- Toegankelijkheid: zichtbare focus voor toetsenbordgebruikers --- */

:focus-visible {
	outline: 2px solid var(--tfta-lime);
	outline-offset: 3px;
	border-radius: 2px;
}
.sectie :focus-visible,
.zoekbalk :focus-visible,
.wedstrijd-detail__inhoud :focus-visible {
	outline-color: var(--tfta-groen);
}
.veld input:focus-visible,
.veld textarea:focus-visible,
.zoekbalk__veld select:focus-visible,
.filters__maand select:focus-visible {
	outline: 2px solid var(--tfta-groen);
	outline-offset: 1px;
}

/* --- Selects: consistent premium uiterlijk in alle browsers --- */

.zoekbalk__veld select,
.filters__maand select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23004225' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.9rem center;
	cursor: pointer;
}
[dir="rtl"] .zoekbalk__veld select,
[dir="rtl"] .filters__maand select {
	background-position: left 0.9rem center;
	padding: 0.75rem 0.9rem 0.75rem 2rem;
}

/* --- Micro-interacties: subtiele, snelle reveal bij scrollen --- */
/* Content is standaard zichtbaar. Alleen elementen die bij het laden buiten
   beeld staan, krijgen via JavaScript de klasse .reveal en faden kort in.
   Zonder JS, zonder observer of bij prefers-reduced-motion blijft alles
   gewoon zichtbaar; een element hangt nooit op opacity 0. */

.reveal {
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.4s ease, transform 0.4s ease;
}
.reveal.is-zichtbaar {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* --- Contactformulier --- */

.veld select {
	width: 100%;
	padding: 0.85rem 2.25rem 0.85rem 1rem;
	border: 1px solid #c6c5b8;
	border-radius: var(--radius);
	font: inherit;
	background-color: var(--tfta-wit);
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23004225' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.9rem center;
	cursor: pointer;
}
.veld select:focus-visible {
	outline: 2px solid var(--tfta-groen);
	outline-offset: 1px;
	border-color: var(--tfta-groen);
}
[dir="rtl"] .veld select {
	background-position: left 0.9rem center;
	padding: 0.85rem 1rem 0.85rem 2.25rem;
}

.veld--checkbox { margin-top: 0.5rem; }
.veld--checkbox .keuze {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	font-weight: 400;
	font-size: 0.95rem;
	cursor: pointer;
}
.veld--checkbox input[type="checkbox"] {
	width: 1.15rem;
	height: 1.15rem;
	margin-top: 0.2rem;
	accent-color: var(--tfta-groen);
	flex: 0 0 auto;
}

.contact-info p { margin-bottom: 0.75rem; }
.contact-offerte {
	margin: 1.75rem 0 0;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	font-size: 0.92rem;
}
.contact-offerte .link-pijl {
	display: inline-block;
	margin-top: 0.5rem;
	color: var(--tfta-lime);
}

/* --- Clubtegels met sfeerbeeld --- */

.club-tegel__beeld {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
	transition: transform 0.5s ease;
}
.club-tegel::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to top, rgba(1, 31, 18, 0.92) 0%, rgba(1, 31, 18, 0.45) 55%, rgba(1, 31, 18, 0.15) 100%);
}
.club-tegel__stad,
.club-tegel__naam,
.club-tegel__pijl {
	position: relative;
	z-index: 2;
}
.club-tegel__pijl { position: absolute; }
.club-tegel:hover .club-tegel__beeld { transform: scale(1.05); }

/* --- Taalwisselaar: prominente premium dropdown --- */

.lang-switch__knop {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.5rem 0.8rem;
}

.lang-switch__globe {
	flex: 0 0 auto;
	opacity: 0.85;
}

.lang-switch__huidig { white-space: nowrap; }

.lang-switch__lijst {
	min-width: 12.5rem;
	max-height: min(60vh, 22rem);
	overflow-y: auto;
}

.lang-switch__lijst a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.55rem 0.8rem;
}

.lang-switch__vink { color: var(--tfta-lime); }

/* De knop toont standaard de taalcode, niet de volle naam.
 *
 * "Nederlands" naast Mijn account, zes menu-items en een gele knop maakte de
 * balk te vol. NL, DE, EN en ES scheelt ruimte en is even duidelijk, zeker met
 * de wereldbol ernaast. De volledige naam staat nog wel in de lijst die
 * uitklapt, en in het aria-label van de knop, dus voor een schermlezer en voor
 * iemand die twijfelt verandert er niets.
 *
 * Bewust geen vlaggen. Een vlag is een land en geen taal: Spaans is niet alleen
 * Spanje, Engels wordt hier vooral gekozen door mensen die geen Brit zijn, en
 * Duits wordt ook in Oostenrijk en Zwitserland gesproken. Wie zijn eigen vlag
 * niet ziet, denkt dan dat zijn taal er niet is.
 */
.lang-switch__huidig { display: none; }
.lang-switch__code { display: inline; }

/* --- Kruimelpad --- */

.kruimelpad {
	margin-bottom: 2rem;
	font-size: 0.85rem;
}
.kruimelpad ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	color: var(--tfta-grijs);
}
.kruimelpad li { display: flex; align-items: center; gap: 0.35rem; }
.kruimelpad li + li::before {
	content: "/";
	color: var(--tfta-lijn);
}
.kruimelpad a {
	color: var(--tfta-grijs);
	text-decoration: none;
}
.kruimelpad a:hover { color: var(--tfta-groen); text-decoration: underline; }
.kruimelpad [aria-current] { color: var(--tfta-inkt); font-weight: 500; }

/* --- Nieuws- en blogkaarten --- */

.artikelen__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
	gap: 1.75rem;
}

.artikel-kaart {
	border-radius: var(--radius);
	background: var(--tfta-wit);
	overflow: hidden;
	border: 1px solid var(--tfta-lijn);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.artikel-kaart:hover {
	box-shadow: var(--schaduw);
	transform: translateY(-3px);
}

.artikel-kaart__link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.artikel-kaart__media {
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--tfta-groen-nacht);
}
.artikel-kaart__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
}
.artikel-kaart:hover .artikel-kaart__media img { transform: scale(1.05); }

.artikel-kaart__categorie {
	position: absolute;
	inset-inline-start: 1rem;
	bottom: 1rem;
	margin: 0;
	background: rgba(1, 31, 18, 0.82);
	color: var(--tfta-lime);
	backdrop-filter: blur(4px);
	text-transform: uppercase;
	letter-spacing: 0.09em;
	font-size: 0.68rem;
	font-weight: 500;
	padding: 0.35rem 0.7rem;
	border-radius: 2px;
}

.artikel-kaart__body { padding: 1.4rem 1.5rem 1.5rem; }
.artikel-kaart__datum {
	font-size: 0.8rem;
	color: var(--tfta-grijs);
	margin: 0 0 0.4rem;
	text-transform: uppercase;
	letter-spacing: 0.07em;
}
.artikel-kaart__titel {
	font-size: 1.3rem;
	margin-bottom: 0.5rem;
}
.artikel-kaart__samenvatting {
	font-size: 0.95rem;
	color: var(--tfta-grijs);
	margin-bottom: 1rem;
}

/* --- Verwante links (hub-en-spoke) --- */

.verwant {
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid var(--tfta-lijn);
}

/* Artikelinhoud: nette leesafstand rond beelden en citaten. */
.inhoud-kolom img { border-radius: var(--radius); }
.inhoud-kolom blockquote {
	margin: 2rem 0;
	padding: 0.5rem 0 0.5rem 1.5rem;
	border-inline-start: 3px solid var(--tfta-lime);
	font-family: var(--font-kop);
	font-weight: 700;
	font-size: 1.2rem;
	color: var(--tfta-groen);
}

/* --- Hero: trage, subtiele inzoom (Ken Burns) --- */

@keyframes tfta-kenburns {
	from { transform: scale(1); }
	to   { transform: scale(1.08); }
}
.hero__beeld {
	transform-origin: center 58%;
	animation: tfta-kenburns 26s ease-in-out infinite alternate;
	will-change: transform;
}

/* --- Cijferbalk: kerncijfers met teleffect over een sfeerbeeld --- */

.cijferbalk {
	position: relative;
	background: var(--tfta-groen-nacht);
	color: var(--tfta-wit);
	overflow: hidden;
	isolation: isolate;
}
.cijferbalk__beeld {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 42%;
	z-index: 0;
	opacity: 0.3;
}
.cijferbalk::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(105deg, rgba(1, 31, 18, 0.94) 0%, rgba(1, 31, 18, 0.7) 100%);
}
.cijferbalk__inner {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(1.5rem, 4vw, 3rem);
	padding-block: clamp(2.75rem, 6vw, 4.25rem);
	text-align: center;
}
.cijfer__waarde {
	display: block;
	font-family: var(--font-kop);
	font-weight: 800;
	font-size: clamp(2.5rem, 5.5vw, 3.75rem);
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--tfta-lime);
	font-variant-numeric: tabular-nums;
}
.cijfer__label {
	display: block;
	margin-top: 0.65rem;
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.8);
}
@media (max-width: 640px) {
	.cijferbalk__inner { grid-template-columns: repeat(2, 1fr); row-gap: 2.25rem; }
}

/* --- Verfijnde hover-details: zachte inzoom en oplichtend accent --- */

.wedstrijd-kaart:hover .wedstrijd-kaart__prijs { color: var(--tfta-lime-donker); }
.beeldkaart:hover .beeldkaart__beeld,
.wedstrijd-kaart:hover .wedstrijd-kaart__media img { filter: brightness(1.04); }
.link-pijl { transition: color 0.18s ease, gap 0.18s ease; }
.link-pijl:hover { color: var(--tfta-lime-donker); }
.club-tegel:hover .club-tegel__pijl { color: var(--tfta-lime); }
.site-nav__list a { transition: color 0.18s ease; }

@media (prefers-reduced-motion: reduce) {
	.beeldkaart:hover .beeldkaart__beeld,
	.wedstrijd-kaart:hover .wedstrijd-kaart__media img { filter: none; }
}

/* --- Clubidentiteit: kleuren (colors_svg) en logo's uit de teams-sync --- */

/* Kleuraccent op de clubtegel: slim tweekleurig streepje boven de naam. */
.club-tegel__kleur {
	display: block;
	position: relative;
	z-index: 2;
	width: 2.5rem;
	height: 0.28rem;
	margin-bottom: 0.7rem;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--club-1) 0 50%, var(--club-2) 50% 100%);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14);
}

/* Logo op de clubtegel (pas zichtbaar zodra logo's lokaal staan). */
.club-tegel__logohouder {
	position: absolute;
	z-index: 2;
	top: 1rem;
	inset-inline-start: 1.25rem;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0.35rem;
	border-radius: 0.5rem;
	background: rgba(255, 255, 255, 0.94);
	box-shadow: var(--schaduw-zacht);
}
.club-tegel__logohouder img,
.club-tegel__logo {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* Kleuraccent en logo op de clubpaginakop. */
.pagina-kop__clubkleur {
	display: block;
	position: relative;
	z-index: 2;
	width: 3.5rem;
	height: 0.35rem;
	margin-bottom: 1.25rem;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--club-1) 0 50%, var(--club-2) 50% 100%);
}
.pagina-kop__clublogo {
	display: inline-grid;
	place-items: center;
	width: 4.5rem;
	height: 4.5rem;
	padding: 0.6rem;
	margin-bottom: 1.5rem;
	border-radius: 0.75rem;
	background: rgba(255, 255, 255, 0.95);
	box-shadow: var(--schaduw-zacht);
}
.pagina-kop__clublogo img,
.pagina-kop__logo {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* Clublogo's op de wedstrijdkaart (thuis en uit): linksboven, apart van de
   competitie-badge (linksonder) zodat ze elkaar nooit overlappen. */
.wedstrijd-kaart__logos {
	position: absolute;
	z-index: 2;
	inset-block-start: 0.75rem;
	inset-inline-start: 0.75rem;
	display: flex;
	gap: 0.4rem;
}
.wedstrijd-kaart__logos img,
.wedstrijd-kaart__logo {
	width: 2rem;
	height: 2rem;
	padding: 0.2rem;
	border-radius: 0.4rem;
	background: rgba(255, 255, 255, 0.94);
	object-fit: contain;
	box-shadow: var(--schaduw-zacht);
}
.wedstrijd-kaart:hover .wedstrijd-kaart__logos img { transform: none; }

/* --- Verrijkte clubpagina: direct antwoord, tekstblokken, feiten en vragen --- */

.club-antwoord {
	background: var(--tfta-ivoor);
	border-left: 4px solid var(--tfta-lime);
	border-radius: var(--radius);
	padding: 1.25rem 1.4rem;
	margin-bottom: 2rem;
}
.club-antwoord p { margin: 0 0 0.7rem; font-size: 1.05rem; line-height: 1.6; }
.club-antwoord p:last-child { margin-bottom: 0; }

.club-tekst { margin: 2.5rem 0; max-width: 46rem; }
.club-tekst p { line-height: 1.7; margin: 0 0 1rem; }
.club-tekst p:last-child { margin-bottom: 0; }

.club-feiten {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 0 0 1.2rem;
	padding: 0;
}
.club-feiten__rij {
	background: var(--tfta-ivoor);
	border-radius: var(--radius);
	padding: 0.55rem 0.9rem;
	min-width: 8rem;
}
.club-feiten dt {
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--tfta-grijs);
	margin: 0;
}
.club-feiten dd {
	margin: 0.15rem 0 0;
	font-family: var(--font-kop);
	font-size: 1.05rem;
	color: var(--tfta-inkt);
}

.club-prijzen { list-style: none; margin: 1.2rem 0 0.6rem; padding: 0; }
.club-prijzen li {
	padding: 0.55rem 0 0.55rem 1.6rem;
	border-bottom: 1px solid var(--tfta-lijn);
	position: relative;
	font-family: var(--font-kop);
}
.club-prijzen li::before {
	content: "";
	position: absolute;
	left: 0.25rem;
	top: 1.1rem;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--tfta-lime);
}
.club-prijzen__noot { font-size: 0.85rem; color: var(--tfta-grijs); }

.club-faq__item {
	border-bottom: 1px solid var(--tfta-lijn);
	padding: 0.85rem 0;
}
.club-faq__item summary {
	cursor: pointer;
	font-family: var(--font-kop);
	font-size: 1.02rem;
	list-style: none;
	padding-right: 1.8rem;
	position: relative;
}
.club-faq__item summary::-webkit-details-marker { display: none; }
.club-faq__item summary::after {
	content: "+";
	position: absolute;
	right: 0.2rem;
	top: -0.1rem;
	font-size: 1.4rem;
	line-height: 1;
	color: var(--tfta-groen);
}
.club-faq__item[open] summary::after { content: "\2212"; }
.club-faq__item p { margin: 0.7rem 0 0; line-height: 1.7; }

/* --- Hospitality-uitlegpagina --- */

/* Alleen voor schermlezers: labels bij tabellen en dergelijke. */
.visueel-verborgen {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Het korte antwoord: los en herkenbaar, direct onder de H1. */
.kort-antwoord {
	background: var(--tfta-groen);
	color: var(--tfta-wit);
	border-radius: var(--radius);
	padding: 1.5rem 1.6rem;
	margin: 0 0 2.5rem;
	box-shadow: var(--schaduw-zacht);
}
.kort-antwoord p {
	margin: 0;
	font-size: 1.1rem;
	line-height: 1.65;
}

/* Vergelijkingstabel. Op brede schermen een gewone tabel, op mobiel per rij
   gestapeld met de kolomnaam ervoor, want drie kolommen passen daar niet. */
.tabel-schuif { overflow-x: auto; margin: 0 0 2rem; }

.vergelijk {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95rem;
}
.vergelijk th,
.vergelijk td {
	padding: 0.75rem 0.9rem;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--tfta-lijn);
}
.vergelijk thead th {
	font-family: var(--font-kop);
	background: var(--tfta-ivoor);
	border-bottom: 2px solid var(--tfta-lime);
	white-space: nowrap;
}
.vergelijk tbody th {
	font-family: var(--font-kop);
	font-weight: 600;
	width: 11rem;
	color: var(--tfta-inkt);
}
.vergelijk tbody tr:last-child th,
.vergelijk tbody tr:last-child td { border-bottom: 0; }
/* De hospitality-kolom is waar het om draait: subtiel benadrukt. */
.vergelijk td:last-child {
	background: rgba(218, 219, 0, 0.09);
	font-weight: 500;
}

@media (max-width: 40rem) {
	.vergelijk thead { display: none; }
	.vergelijk,
	.vergelijk tbody,
	.vergelijk tr,
	.vergelijk th,
	.vergelijk td { display: block; width: auto; }
	.vergelijk tr {
		border: 1px solid var(--tfta-lijn);
		border-radius: var(--radius);
		margin-bottom: 0.9rem;
		overflow: hidden;
	}
	.vergelijk tbody th {
		background: var(--tfta-ivoor);
		border-bottom: 1px solid var(--tfta-lijn);
		width: auto;
	}
	.vergelijk td {
		border-bottom: 1px solid var(--tfta-lijn);
		padding-top: 1.9rem;
		position: relative;
	}
	.vergelijk td::before {
		content: attr(data-label);
		position: absolute;
		top: 0.55rem;
		left: 0.9rem;
		font-size: 0.72rem;
		text-transform: uppercase;
		letter-spacing: 0.06em;
		color: var(--tfta-grijs);
	}
	.vergelijk tr td:last-child { border-bottom: 0; }
}

/* De vier soorten hospitality als kaarten. */
.soort-kaarten {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	margin: 1.25rem 0 2rem;
}
@media (min-width: 40rem) {
	.soort-kaarten { grid-template-columns: repeat(2, 1fr); }
}
.soort-kaart {
	background: var(--tfta-wit);
	border: 1px solid var(--tfta-lijn);
	border-radius: var(--radius);
	padding: 1.2rem 1.3rem;
	box-shadow: var(--schaduw-zacht);
}
.soort-kaart h3 {
	margin: 0 0 0.5rem;
	font-size: 1.05rem;
	padding-bottom: 0.45rem;
	border-bottom: 2px solid var(--tfta-lime);
}
.soort-kaart p { margin: 0; line-height: 1.6; font-size: 0.95rem; }

.uitleg-lijst { list-style: none; margin: 1rem 0 2rem; padding: 0; }
.uitleg-lijst li {
	padding: 0.6rem 0 0.6rem 1.5rem;
	border-bottom: 1px solid var(--tfta-lijn);
	position: relative;
	line-height: 1.6;
}
.uitleg-lijst li::before {
	content: "";
	position: absolute;
	left: 0.2rem;
	top: 1.15rem;
	width: 0.45rem;
	height: 0.45rem;
	border-radius: 50%;
	background: var(--tfta-lime);
}
.uitleg-lijst li:last-child { border-bottom: 0; }

.afsluiting {
	background: var(--tfta-ivoor);
	border-radius: var(--radius);
	padding: 1.6rem;
	margin: 2.5rem 0 0;
}
.afsluiting h2 { margin-top: 0; }
.afsluiting__knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-bottom: 0;
}

/* Vertrouwensstrook: bedrijfsgegevens in plaats van de vervallen reviewscore. */
.vertrouwen__gegevens {
	list-style: none;
	margin: 0.6rem 0 0;
	padding: 0;
	font-size: 0.9rem;
	line-height: 1.7;
}
.vertrouwen__gegevens a { text-decoration: underline; }

/* Het korte antwoord in een vlakke variant, voor gebruik binnen een sectie
   die zelf al een achtergrond heeft. */
.kort-antwoord--vlak { margin-bottom: 1.75rem; }

/* Contextlinks naar de hospitality-uitleg: lopende tekst, ingetogen zodat
   ze de knop ernaast niet beconcurreren. */
.beeldkaart__noot,
.waarom__noot {
	font-size: 0.88rem;
	line-height: 1.6;
	margin: 0 0 1rem;
	opacity: 0.85;
}
.beeldkaart__noot a,
.waarom__noot a {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}
.veld__hulp {
	display: block;
	font-size: 0.85rem;
	color: var(--tfta-grijs);
	margin-top: 0.4rem;
	line-height: 1.55;
}
.veld__hulp a { text-decoration: underline; }

/* --- Reiservaringen --- */

/* Citaat en feitenblok naast elkaar op breed, gestapeld op mobiel. Het citaat
   krijgt de meeste ruimte: dat is waar de pagina om draait. */
.ervaring__kop {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	margin-bottom: 2.5rem;
}
@media (min-width: 52rem) {
	.ervaring__kop { grid-template-columns: 1.5fr 1fr; align-items: start; }
}

.ervaring__citaat {
	background: var(--tfta-groen);
	color: var(--tfta-wit);
	border-radius: var(--radius);
	padding: 1.75rem 1.9rem;
	margin: 0;
	box-shadow: var(--schaduw-zacht);
	position: relative;
}
.ervaring__citaat p {
	margin: 0;
	font-family: var(--font-kop);
	font-size: clamp(1.05rem, 1.6vw, 1.25rem);
	line-height: 1.55;
}
.ervaring__citaat p::before { content: "\201C"; }
.ervaring__citaat p::after { content: "\201D"; }

.ervaring__feiten {
	background: var(--tfta-ivoor);
	border-radius: var(--radius);
	padding: 1.4rem 1.5rem;
}
.ervaring__feiten-kop {
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--tfta-grijs);
	margin: 0 0 0.9rem;
	padding: 0;
	border: 0;
}
.ervaring__feiten dl { margin: 0; }
.ervaring__feit {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--tfta-lijn);
}
.ervaring__feit:last-child { border-bottom: 0; }
.ervaring__feit dt {
	margin: 0;
	color: var(--tfta-grijs);
	font-size: 0.9rem;
	flex-shrink: 0;
}
.ervaring__feit dd {
	margin: 0;
	font-family: var(--font-kop);
	font-size: 0.95rem;
	text-align: right;
	color: var(--tfta-inkt);
}

/* Het verslag zelf. */
.ervaring__tekst h2 {
	font-size: clamp(1.25rem, 2.4vw, 1.6rem);
	margin: 2.5rem 0 0.9rem;
	padding-bottom: 0.45rem;
	border-bottom: 2px solid var(--tfta-lime);
}
.ervaring__tekst p { line-height: 1.75; margin: 0 0 1.1rem; }
.ervaring__tekst figure {
	margin: 2rem 0;
}
/* Beeld nooit hoger dan een halve schermhoogte. Staande foto's worden daardoor
   smaller en komen gecentreerd te staan; liggende foto's blijven vol breed. */
.ervaring__tekst figure img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 34rem;
	border-radius: var(--radius);
	display: block;
	margin-inline: auto;
}
/* Staande telefoonfoto's (9:16) zijn te hoog voor een tekstkolom: naast zo'n
   foto houdt de tekst eerder op dan de foto, en op volle breedte wordt het een
   smalle strook met wit ernaast. Met is-vierkant tonen we zo'n foto als
   vierkant kader, met het zwaartepunt boven het midden waar bij deze
   reisfoto's het onderwerp zit. Het bestand zelf blijft ongewijzigd; alleen de
   weergave is uitgesneden. */
.ervaring__tekst figure.is-vierkant img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: 50% 20%;
	max-height: none;
}
.ervaring__tekst figcaption {
	font-size: 0.85rem;
	color: var(--tfta-grijs);
	margin-top: 0.5rem;
	line-height: 1.5;
	text-align: center;
}
/* Foto's die in de tekst staan, met de tekst eromheen. Alleen op wat bredere
   schermen; op mobiel blijft alles onder elkaar staan. Zet in de editor de
   uitlijning van de afbeelding op links of rechts om dit te gebruiken. */
@media (min-width: 48rem) {
	.ervaring__tekst .alignleft,
	.ervaring__tekst .alignright {
		width: 17rem;
		max-width: 40%;
		margin-block: 0.4rem 1.25rem;
	}
	.ervaring__tekst .alignleft {
		float: left;
		margin-right: 2rem;
	}
	.ervaring__tekst .alignright {
		float: right;
		margin-left: 2rem;
	}
	.ervaring__tekst .alignleft img,
	.ervaring__tekst .alignright img {
		width: 100%;
		max-height: none;
	}
	.ervaring__tekst .alignleft figcaption,
	.ervaring__tekst .alignright figcaption {
		text-align: left;
	}
	/* Een kop en een volle-breedte foto beginnen altijd op een schone regel,
	   dus nooit naast een zwevende foto. */
	.ervaring__tekst h2,
	.ervaring__tekst figure:not(.alignleft):not(.alignright) { clear: both; }
}
.ervaring__afsluiting { margin-top: 3rem; }

/* Overzicht met kaarten. */
.ervaring-kaarten {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	margin: 2rem 0;
}
@media (min-width: 46rem) {
	.ervaring-kaarten { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 68rem) {
	.ervaring-kaarten { grid-template-columns: repeat(3, 1fr); }
}
.ervaring-kaart {
	background: var(--tfta-wit);
	border: 1px solid var(--tfta-lijn);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--schaduw-zacht);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ervaring-kaart:hover { transform: translateY(-3px); box-shadow: var(--schaduw); }
.ervaring-kaart__link { display: block; color: inherit; text-decoration: none; }
.ervaring-kaart__media { aspect-ratio: 3 / 2; overflow: hidden; }
.ervaring-kaart__beeld { width: 100%; height: 100%; object-fit: cover; display: block; }
.ervaring-kaart__body { padding: 1.1rem 1.2rem 1.3rem; }
.ervaring-kaart__bovenkop {
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--tfta-grijs);
	margin: 0 0 0.35rem;
}
.ervaring-kaart__titel { font-size: 1.1rem; margin: 0 0 0.6rem; }
.ervaring-kaart__citaat {
	font-size: 0.93rem;
	line-height: 1.6;
	color: var(--tfta-grijs);
	margin: 0 0 0.9rem;
}
.ervaring-kaart__meer {
	font-family: var(--font-kop);
	font-size: 0.9rem;
	color: var(--tfta-groen);
	border-bottom: 2px solid var(--tfta-lime);
	padding-bottom: 0.1rem;
}

@media (prefers-reduced-motion: reduce) {
	.ervaring-kaart { transition: none; }
	.ervaring-kaart:hover { transform: none; }
}

/* Uitgelichte reiservaring op de homepage: sociaal bewijs, compact gehouden
   zodat het de aanbodblokken erboven niet beconcurreert. */
.ervaring-uitgelicht {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	background: var(--tfta-ivoor);
	border-radius: var(--radius);
	overflow: hidden;
	color: inherit;
	text-decoration: none;
	box-shadow: var(--schaduw-zacht);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
@media (min-width: 46rem) {
	.ervaring-uitgelicht { grid-template-columns: 22rem 1fr; align-items: stretch; }
	/* Een verslag zonder foto vult de hele breedte, anders staat de tekst in
	   de smalle beeldkolom met een leeg vlak ernaast. */
	.ervaring-uitgelicht--zonder-beeld { grid-template-columns: 1fr; }
}
.ervaring-uitgelicht:hover { transform: translateY(-2px); box-shadow: var(--schaduw); }
.ervaring-uitgelicht__media { aspect-ratio: 3 / 2; overflow: hidden; }
@media (min-width: 46rem) {
	.ervaring-uitgelicht__media { aspect-ratio: auto; height: 100%; }
}
.ervaring-uitgelicht__beeld { width: 100%; height: 100%; object-fit: cover; display: block; }
.ervaring-uitgelicht__tekst { padding: 1.5rem 1.7rem; }
.ervaring-uitgelicht__tekst h2 {
	font-size: clamp(1.15rem, 2vw, 1.45rem);
	margin: 0.2rem 0 0.4rem;
}
.ervaring-uitgelicht__meta {
	font-size: 0.85rem;
	color: var(--tfta-grijs);
	margin: 0 0 0.7rem;
}
.ervaring-uitgelicht__tekst p { line-height: 1.6; margin: 0 0 0.9rem; }
.ervaring-uitgelicht__meer {
	font-family: var(--font-kop);
	font-size: 0.92rem;
	color: var(--tfta-groen);
	border-bottom: 2px solid var(--tfta-lime);
	padding-bottom: 0.1rem;
}

.formulier__verslag {
	font-size: 0.88rem;
	color: var(--tfta-grijs);
	margin: 0.9rem 0 0;
	line-height: 1.55;
}
.formulier__verslag a { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
	.ervaring-uitgelicht { transition: none; }
	.ervaring-uitgelicht:hover { transform: none; }
}

/* --- Sitevoet in kolommen --- */

/* Het merkblok houdt links een vaste breedte, de kolommen krijgen de rest. */
.site-footer__merk { flex: 0 1 20rem; }

.site-footer__sociaal {
	list-style: none;
	display: flex;
	gap: 0.75rem;
	margin: 1.25rem 0 0;
	padding: 0;
}
.site-footer__sociaal a,
.site-footer__sociaal-leeg {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 50%;
	color: rgba(255, 255, 255, 0.85);
	transition: color 0.2s ease, border-color 0.2s ease;
}

/* Een kanaal waarvan het adres nog niet bekend is. Zichtbaar in de rij, zodat
   je ziet hoe het eruit komt te zien, maar bewust niet aanklikbaar. */
.site-footer__sociaal-leeg {
	color: rgba(255, 255, 255, 0.35);
	border-color: rgba(255, 255, 255, 0.12);
	cursor: default;
}
.site-footer__sociaal a:hover,
.site-footer__sociaal a:focus-visible {
	color: var(--tfta-lime);
	border-color: var(--tfta-lime);
}
.site-footer__icoon { display: block; }

/* Het aantal kolommen volgt het menu, niet een vast getal. Voegt iemand in
   WordPress een vijfde kolom toe of haalt hij er een weg, dan klopt de voet
   zonder dat er een regel CSS aan te pas komt. */
.site-footer__kolommen {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	gap: 2rem 2.5rem;
	flex: 1 1 34rem;
}

.site-footer__kop {
	font-family: var(--font-kop);
	font-size: 0.8rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--tfta-wit);
	margin-bottom: 0.9rem;
	list-style: none;
	cursor: default;
}
.site-footer__kop::-webkit-details-marker { display: none; }

/* Binnen een kolom staan de links onder elkaar, niet naast elkaar zoals in de
   oude platte lijst. */
.site-footer__kolom .site-footer__lijst {
	flex-direction: column;
	gap: 0.6rem;
}
.site-footer__kolom .site-footer__lijst a {
	text-transform: none;
	letter-spacing: 0;
	font-size: 0.92rem;
	line-height: 1.45;
}

.site-footer__extra {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	padding-block: 1.25rem;
}
.site-footer__lijst--plat { flex-direction: row; gap: 1.5rem; }

/* Smal: kolommen onder elkaar en inklapbaar. Het driehoekje verschijnt pas
   hier, want alleen dan valt er iets te openen of te sluiten. */
@media (max-width: 60rem) {
	.site-footer__kolommen { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
}
@media (max-width: 40rem) {
	.site-footer__boven { padding-block: 3rem 1.5rem; }
	.site-footer__merk { flex-basis: 100%; }
	.site-footer__kolommen {
		grid-template-columns: 1fr;
		gap: 0;
		flex-basis: 100%;
	}
	.site-footer__kolom {
		border-top: 1px solid rgba(255, 255, 255, 0.12);
	}
	.site-footer__kop {
		display: flex;
		justify-content: space-between;
		align-items: center;
		cursor: pointer;
		margin: 0;
		padding: 1rem 0;
	}
	.site-footer__kop::after {
		content: "";
		width: 0.55rem;
		height: 0.55rem;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg);
		transform-origin: center;
		transition: transform 0.2s ease;
		margin-right: 0.25rem;
	}
	.site-footer__kolom[open] .site-footer__kop::after { transform: rotate(-135deg); }
	.site-footer__kolom .site-footer__lijst { padding: 0 0 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
	.site-footer__sociaal a,
	.site-footer__kop::after { transition: none; }
}

/* --- Reisplanner op /plan-uw-reis/ ---------------------------------------
 *
 * Mobiel eerst: alles onder elkaar en kaarten op volle breedte. Vanaf 62rem
 * staat de zijkant met vertrouwen en contact naast de stap.
 */

.planner-kop {
	background: var(--tfta-ivoor);
	padding-block: clamp(2.5rem, 6vw, 4rem) 1.5rem;
}
.planner-kop h1 { margin: 0.2rem 0 0.6rem; }
.planner-kop__intro {
	max-width: 46rem;
	color: var(--tfta-grijs);
	margin: 0;
}

.planner { padding-block: 2.5rem clamp(3rem, 8vw, 5rem); }
.planner__binnen { display: grid; gap: 2.5rem; }

/* Voortgang: vier stappen, de huidige gemarkeerd. Geen aria-live, want de
   pagina laadt gewoon opnieuw; de kop van de stap krijgt de focus. */
.planner__voortgang { margin: 0; }
.planner__stappen {
	list-style: none;
	margin: 0 0 0.75rem;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.25rem;
}
.planner__stap {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--tfta-grijs);
	font-size: 0.9rem;
}
.planner__stapnummer {
	display: grid;
	place-items: center;
	width: 1.65rem;
	height: 1.65rem;
	border-radius: 50%;
	border: 1px solid var(--tfta-lijn);
	font-variant-numeric: tabular-nums;
	flex: 0 0 auto;
}
.planner__stap.is-actief { color: var(--tfta-inkt); font-weight: 500; }
.planner__stap.is-actief .planner__stapnummer {
	background: var(--tfta-lime);
	border-color: var(--tfta-lime);
	color: var(--tfta-groen-nacht);
}
.planner__stap.is-gedaan .planner__stapnummer {
	background: var(--tfta-groen);
	border-color: var(--tfta-groen);
	color: var(--tfta-wit);
}
.planner__teller {
	margin: 0;
	font-size: 0.85rem;
	color: var(--tfta-grijs);
}

.planner__kop { margin: 0 0 0.5rem; }
.planner__kop:focus-visible { outline: 2px solid var(--tfta-groen); outline-offset: 4px; }
.planner__intro { color: var(--tfta-grijs); max-width: 44rem; }
.planner__subkop { margin: 2.25rem 0 0.9rem; font-size: 1.15rem; }

/* Zoeken op clubnaam */
.planner__zoek { margin: 1.5rem 0 0; }
.planner__zoeklabel {
	display: block;
	font-size: 0.85rem;
	font-weight: 500;
	margin-bottom: 0.35rem;
}
.planner__zoekrij { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.planner__zoekrij input {
	flex: 1 1 14rem;
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--tfta-lijn);
	border-radius: var(--radius);
	font: inherit;
	background: var(--tfta-wit);
}
.planner__zoekrij input:focus { outline: 2px solid var(--tfta-groen); outline-offset: 1px; }
.planner__zoekuitslag { margin-top: 1.25rem; }
.planner__zoekkop { margin: 0 0 0.6rem; font-size: 0.9rem; color: var(--tfta-grijs); }
.planner__pillen { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* Competitietegels */
.planner__tegels {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
	gap: 0.85rem;
}
.planner__tegellink {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	height: 100%;
	padding: 1rem;
	border: 1px solid var(--tfta-lijn);
	border-radius: var(--radius);
	background: var(--tfta-wit);
	text-decoration: none;
	color: inherit;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.planner__tegellink:hover {
	border-color: var(--tfta-groen);
	box-shadow: var(--schaduw-zacht);
}
.planner__logos { display: flex; gap: 0.3rem; margin-bottom: 0.2rem; }
.planner__logo { width: 1.6rem; height: 1.6rem; object-fit: contain; }
.planner__tegelnaam { font-family: var(--font-kop); font-weight: 700; }
.planner__tegelmeta { font-size: 0.82rem; color: var(--tfta-grijs); }

/* Etalage en wedstrijdlijst */
.planner__etalage,
.planner__wedstrijden {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.6rem;
}
.planner__etalagelink,
.planner__wedstrijdlink {
	display: grid;
	gap: 0.15rem;
	padding: 0.9rem 1rem;
	border: 1px solid var(--tfta-lijn);
	border-radius: var(--radius);
	background: var(--tfta-wit);
	text-decoration: none;
	color: inherit;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.planner__etalagelink:hover,
.planner__wedstrijdlink:hover {
	border-color: var(--tfta-groen);
	box-shadow: var(--schaduw-zacht);
}
.planner__etalagetitel,
.planner__wedstrijdtitel { font-family: var(--font-kop); font-weight: 700; }
.planner__etalagemeta,
.planner__wedstrijddatum,
.planner__wedstrijdplek { font-size: 0.85rem; color: var(--tfta-grijs); }
.planner__etalageprijs { font-weight: 500; }
.planner__wedstrijdprijzen {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
	margin-top: 0.2rem;
	font-size: 0.9rem;
	font-weight: 500;
}
.planner__meer { margin-top: 1.25rem; }
.planner__uitweg { margin-top: 1.75rem; }
.planner__terug { margin-top: 2rem; font-size: 0.9rem; }

/* Stap 3: het formulier */
.planner__form { margin-top: 1.5rem; }
.planner__vak {
	border: 0;
	border-top: 1px solid var(--tfta-lijn);
	padding: 1.5rem 0 0;
	margin: 0 0 1.75rem;
}
.planner__vak legend {
	font-family: var(--font-kop);
	font-weight: 700;
	font-size: 1.05rem;
	padding: 0;
	margin-bottom: 0.9rem;
}
.formulier__keuzes--kolom { flex-direction: column; align-items: flex-start; }
.veld--smal input { max-width: 8rem; }
.planner__snelknoppen { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.4rem; }
.planner__snelknoppen .zoek-pill { font-variant-numeric: tabular-nums; cursor: pointer; }

.planner__kaarten {
	display: grid;
	gap: 0.85rem;
	grid-template-columns: 1fr;
}
.planner__kaart {
	display: grid;
	gap: 0.35rem;
	padding: 1.1rem;
	border: 1px solid var(--tfta-lijn);
	border-radius: var(--radius);
	background: var(--tfta-wit);
	cursor: pointer;
}
.planner__kaart:hover { border-color: var(--tfta-groen); }
.planner__kaart.is-gekozen,
.planner__kaart:has(input:checked) {
	border-color: var(--tfta-groen);
	box-shadow: inset 0 0 0 1px var(--tfta-groen);
}
.planner__kaart input { justify-self: start; }
.planner__kaartkop { font-family: var(--font-kop); font-weight: 700; font-size: 1.05rem; }
.planner__kaartprijs { font-weight: 500; }
.planner__kaarttekst { font-size: 0.9rem; color: var(--tfta-grijs); }
.planner__kaartlink { display: inline-block; margin-top: 0.2rem; }
.planner__noot { font-size: 0.82rem; color: var(--tfta-grijs); margin: 0.9rem 0 0; }

.planner__indicatie {
	background: var(--tfta-groen-nacht);
	color: rgba(255, 255, 255, 0.9);
	border-radius: var(--radius);
	padding: 1.25rem 1.35rem;
	margin-bottom: 1.75rem;
}
.planner__indicatiekop {
	margin: 0;
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tfta-lime);
}
.planner__indicatiebedrag {
	margin: 0.2rem 0 0.4rem;
	font-family: var(--font-kop);
	font-weight: 800;
	font-size: clamp(1.6rem, 4vw, 2.1rem);
	color: var(--tfta-wit);
}
.planner__indicatieuitleg { margin: 0; font-size: 0.85rem; }
.planner__indicatie--geen {
	background: var(--tfta-ivoor);
	color: var(--tfta-inkt);
}
.planner__indicatie--geen p { margin: 0; font-size: 0.9rem; }

.planner__acties { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Stap 4: samenvatting */
.planner__samenvatting { margin: 1.5rem 0 2rem; }
.planner__lijst { margin: 0; display: grid; gap: 0.5rem; }
.planner__rij {
	display: grid;
	grid-template-columns: 9rem 1fr;
	gap: 0.5rem 1rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--tfta-lijn);
}
.planner__rij dt { color: var(--tfta-grijs); font-size: 0.9rem; }
.planner__rij dd { margin: 0; }
.planner__wijzig { margin-inline-start: 0.5rem; font-size: 0.82rem; }

/* Zijkant: vertrouwen en de tweede route */
.planner__zijkant { display: grid; gap: 1.25rem; align-content: start; }
.planner__blok {
	border: 1px solid var(--tfta-lijn);
	border-radius: var(--radius);
	padding: 1.35rem;
	background: var(--tfta-wit);
}
.planner__blokkop { margin: 0 0 0.8rem; font-size: 1rem; }
.planner__blok .vinklijst { margin-bottom: 0.9rem; }
.planner__blok .vinklijst li { font-size: 0.9rem; }
.planner__blokregel { margin: 0; font-size: 0.9rem; color: var(--tfta-grijs); }
.planner__routes {
	list-style: none;
	margin: 0.8rem 0 0;
	padding: 0;
	display: grid;
	gap: 0.4rem;
	font-weight: 500;
}

@media (min-width: 48rem) {
	.planner__kaarten { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 62rem) {
	.planner__binnen {
		grid-template-columns: 1.65fr 1fr;
		column-gap: 3.5rem;
		align-items: start;
	}
	.planner__voortgang { grid-column: 1 / -1; }
	.planner__zijkant { position: sticky; top: 6.5rem; }
}

@media (max-width: 40rem) {
	.planner__staplabel { display: none; }
	.planner__stappen { gap: 0.5rem; }
	.planner__rij { grid-template-columns: 1fr; gap: 0.15rem; }
	.planner__acties .knop { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
	.planner__tegellink,
	.planner__etalagelink,
	.planner__wedstrijdlink { transition: none; }
}

/* De pillen in de planner staan op een lichte achtergrond; de basisvariant van
   .zoek-pill is voor donkere secties gemaakt en werd daar grijs. */
.planner__pillen .zoek-pill,
.planner__snelknoppen .zoek-pill {
	border-color: var(--tfta-lijn);
	background: var(--tfta-wit);
	color: var(--tfta-inkt);
	font-family: inherit;
	font-size: 0.9rem;
	cursor: pointer;
}
.planner__pillen .zoek-pill:hover,
.planner__snelknoppen .zoek-pill:hover,
.planner__snelknoppen .zoek-pill.is-actief {
	background: var(--tfta-lime);
	border-color: var(--tfta-lime);
	color: var(--tfta-groen-nacht);
}
/* Een toelichting direct onder de kop van een vak heeft geen extra lucht nodig. */
.planner__vak legend + .planner__noot { margin-top: 0; }

/* Afsluitband met twee knoppen en een verwijzing eronder (voetbalreizen). */
.cta-band__knoppen {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
	margin-bottom: 1.25rem;
}
.cta-band__noot {
	font-size: 0.9rem;
	margin-bottom: 0;
}
.cta-band__noot a { color: var(--tfta-lime); }

/* --- Hospitalitypakketten op de wedstrijdpagina ---------------------------

   Een pakket verkoopt zichzelf met wat erin zit, niet met de prijs alleen.
   Daarom staat de inhoud volledig uitgeschreven en zit de prijs onderaan,
   na het verhaal. Dat is ook wat de partijen doen die dit direct verkopen. */

.pakketten { margin-top: 3rem; }
.pakketten:first-child { margin-top: 0; }

.pakketten__intro {
	color: var(--tfta-grijs);
	font-size: 0.95rem;
	max-width: 62ch;
	margin-bottom: 1.5rem;
}

/* Eerlijk zijn over een nog niet vastgestelde speeldatum. Opvallend genoeg
   om gelezen te worden, rustig genoeg om niet af te schrikken. */
.pakketten__waarschuwing {
	background: #fdf6e3;
	border-left: 3px solid var(--tfta-goud);
	padding: 0.9rem 1.1rem;
	font-size: 0.92rem;
	margin: 0 0 1.25rem;
	border-radius: 0 var(--radius) var(--radius) 0;
}

.pakketten__lijst {
	display: grid;
	gap: 1.25rem;
}

.pakket {
	border: 1px solid var(--tfta-lijn);
	border-radius: var(--radius);
	background: var(--tfta-wit);
	padding: 1.6rem 1.75rem;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.pakket:hover {
	border-color: var(--tfta-groen);
	box-shadow: var(--schaduw-zacht);
}

.pakket__kop {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem 1rem;
	margin-bottom: 0.5rem;
}
.pakket__naam { margin: 0; font-size: 1.3rem; }

/* Schaarste alleen tonen als het waar is; zie tfta_schaarste_drempel(). */
.pakket__schaars {
	margin: 0;
	font-size: 0.82rem;
	font-weight: 600;
	color: #9a5b00;
	background: #fdf1dd;
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
	white-space: nowrap;
}

/* Belafspraak via Microsoft Bookings. Bewust rustig vormgegeven: dit is de
   tweede keuze onder het aanvraagformulier, niet de hoofdknop. */
.bookings {
	margin: 2rem 0 0;
	padding: 1.5rem;
	border: 1px solid #e3e6e4;
	border-radius: 12px;
	background: #fafbfa;
}
.bookings__titel { margin: 0 0 0.4rem; font-size: 1.15rem; }
.bookings__tekst { margin: 0 0 1rem; color: var(--tfta-grijs); }
.bookings__terugval { margin: 0.75rem 0 0; font-size: 0.85rem; }
.bookings__terugval a { color: var(--tfta-grijs); }

/* De agenda van Microsoft. Vaste hoogte, want een iframe kan zichzelf niet
   meten en zakt anders in tot niets. */
.bookings__frame {
	display: block;
	width: 100%;
	height: 760px;
	margin-top: 1.25rem;
	border: 0;
	border-radius: 8px;
	background: #fff;
}
.bookings[data-open] { background: #fff; }

@media (max-width: 640px) {
	.bookings { padding: 1.1rem; }
	.bookings__frame { height: 620px; }
}

/* Uitverkocht volgens de actuele stand bij de leverancier. Wordt door
   main.js gezet nadat de echte voorraad is opgehaald; de pagina zelf toont
   deze staat nooit uit zichzelf. */
.pakket[data-uitverkocht] { opacity: 0.55; }
.pakket[data-uitverkocht] .knop {
	pointer-events: none;
	background: #e3e3e3;
	border-color: #e3e3e3;
	color: #6b6b6b;
}
.pakket[data-uitverkocht] .pakket__voet::after {
	content: attr(data-uitverkocht-tekst);
	font-size: 0.82rem;
	font-weight: 600;
	color: #8a2b2b;
}

.pakket__omschrijving {
	color: var(--tfta-grijs);
	margin: 0 0 1rem;
	max-width: 62ch;
}

.pakket__label {
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: 600;
	color: var(--tfta-groen);
	margin: 0 0 0.5rem;
}

.pakket__inbegrepen {
	list-style: none;
	padding: 0;
	margin: 0 0 1.25rem;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 0.35rem 1.5rem;
}
.pakket__inbegrepen li {
	position: relative;
	padding-left: 1.4rem;
	font-size: 0.95rem;
}
.pakket__inbegrepen li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 0.45rem;
	height: 0.45rem;
	border-radius: 50%;
	background: var(--tfta-lime);
}

.pakket__feiten {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	gap: 0.75rem 1.5rem;
	margin: 0 0 1.4rem;
	padding-top: 1.1rem;
	border-top: 1px solid var(--tfta-lijn);
}
.pakket__feiten dt {
	font-size: 0.76rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--tfta-grijs);
	margin-bottom: 0.15rem;
}
.pakket__feiten dd { margin: 0; font-size: 0.95rem; font-weight: 500; }

.pakket__voet {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-top: 1.2rem;
	border-top: 1px solid var(--tfta-lijn);
}
.pakket__prijs { margin: 0; line-height: 1.3; }
.pakket__bedrag {
	font-family: var(--font-kop);
	font-size: 1.6rem;
	font-weight: 700;
	display: inline-block;
}
.pakket__pp { color: var(--tfta-grijs); font-size: 0.92rem; }
/* Servicekosten apart vermelden, zoals de markt dat doet. Verrassingen bij
   het afrekenen kosten conversie en vertrouwen. */
.pakket__service {
	display: block;
	color: var(--tfta-grijs);
	font-size: 0.82rem;
}

.pakketten__voetnoot {
	margin-top: 1.25rem;
	font-size: 0.92rem;
	color: var(--tfta-grijs);
}

@media (max-width: 40rem) {
	.pakket { padding: 1.25rem; }
	.pakket__voet { flex-direction: column; align-items: stretch; }
	.pakket__voet .knop { justify-content: center; }
}

/* --- Checkout en de eigen pagina van een bestelling ----------------------

   Smalle kolom, weinig afleiding. Elk extra element op een bestelpagina
   kost bestellingen, dus hier staat alleen wat nodig is. */

.wrap--smal { max-width: 44rem; }

/* Honeypot tegen spam: onzichtbaar voor mensen, wel invulbaar voor bots.
   Niet display:none, want sommige bots slaan verborgen velden over. */
.tfta-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --- Bestelpagina --- */

/* Twee kolommen: links de velden, rechts een kaart die meescrolt. Op een
   telefoon komt de kaart juist bovenaan, want dan wil je eerst zien wat je
   boekt en wat het kost voordat je gaat typen. */
.checkout__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 22rem;
	gap: 2.5rem;
	align-items: start;
}

.checkout__zij { position: sticky; top: 6.5rem; }

.checkout__kaart {
	border: 1px solid var(--tfta-lijn);
	border-radius: var(--radius);
	background: var(--tfta-wit);
	padding: 1.5rem;
}
.checkout__kaart-kop {
	font-family: var(--font-kop);
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tfta-grijs);
	margin: 0 0 0.9rem;
}
.checkout__kaart-pakket {
	font-family: var(--font-kop);
	font-size: 1.2rem;
	line-height: 1.25;
	color: var(--tfta-groen);
	margin: 0 0 0.3rem;
}
.checkout__kaart-wedstrijd {
	margin: 0 0 0.75rem;
	font-size: 0.95rem;
	line-height: 1.5;
}
.checkout__kaart-wedstrijd span { color: var(--tfta-grijs); font-size: 0.88rem; }
.checkout__kaart-tekst {
	margin: 0 0 1rem;
	font-size: 0.88rem;
	line-height: 1.6;
	color: var(--tfta-grijs);
}

/* Genummerde stappen. Een lange lijst velden voelt korter als je ziet hoeveel
   er nog komt en waar je bent. */
.checkout__stap { margin-bottom: 2.25rem; }
.checkout__stap:last-child { margin-bottom: 0; }
.checkout__stap-kop {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	font-size: 1.05rem;
	margin: 0 0 1.1rem;
	padding-bottom: 0.6rem;
	border-bottom: 1px solid var(--tfta-lijn);
}
.checkout__stap-kop span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--tfta-lime);
	color: var(--tfta-groen);
	font-size: 0.85rem;
}

/* De betaalmerken in de kaart, vlak bij het bedrag. Ze stonden alleen
   onderaan de pagina in de vertrouwensstrook, en daar kijkt op dit scherm
   niemand meer. */
.checkout__merken {
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.7rem;
}
.checkout__merken img {
	display: block;
	height: 20px;
	width: auto;
}

.checkout__zeker {
	list-style: none;
	margin: 1.25rem 0 0;
	padding: 1.1rem 0 0;
	border-top: 1px solid var(--tfta-lijn);
	font-size: 0.85rem;
	line-height: 1.55;
	color: var(--tfta-grijs);
}
.checkout__zeker li {
	position: relative;
	padding-left: 1.4rem;
	margin-bottom: 0.6rem;
}
.checkout__zeker li:last-child { margin-bottom: 0; }
.checkout__zeker li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.45em;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--tfta-lime);
}

@media (max-width: 60rem) {
	.checkout__grid { grid-template-columns: 1fr; gap: 2rem; }
	.checkout__zij { position: static; order: -1; }
}

.checkout__wedstrijd {
	font-size: 1.05rem;
	margin-bottom: 1.5rem;
}
.checkout__wedstrijd span { color: var(--tfta-grijs); }

.formulier__hint {
	display: block;
	font-size: 0.85rem;
	color: var(--tfta-grijs);
	margin-top: 0.3rem;
}

.checkout__totaal {
	background: var(--tfta-ivoor);
	border-radius: var(--radius);
	padding: 1.25rem 1.5rem;
	margin: 1.75rem 0;
}
.checkout__totaal p {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin: 0 0 0.5rem;
	font-size: 0.95rem;
}
.checkout__totaal-regel {
	border-top: 1px solid var(--tfta-lijn);
	padding-top: 0.75rem;
	margin-top: 0.75rem !important;
	margin-bottom: 0 !important;
	font-size: 1.1rem !important;
}
.checkout__totaal-regel strong { font-family: var(--font-kop); font-size: 1.35rem; }

.checkout__akkoord {
	font-size: 0.92rem;
	line-height: 1.5;
	margin-bottom: 1rem;
}
.checkout__akkoord label {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.6rem;
	align-items: start;
	font-weight: 400;
}
.checkout__akkoord input { margin-top: 0.25rem; }

.checkout__noot {
	font-size: 0.88rem;
	color: var(--tfta-grijs);
	margin-top: 1.25rem;
}

/* Statusblok op de bestelpagina. De kleur komt uit de status zelf. */
.bestelling__status {
	border-left: 3px solid var(--tfta-grijs);
	background: var(--tfta-ivoor);
	padding: 0.9rem 1.1rem;
	border-radius: 0 var(--radius) var(--radius) 0;
	margin: 0 0 1.75rem;
}
.bestelling__status strong { display: block; }
.bestelling__status span { font-size: 0.92rem; color: var(--tfta-grijs); }

.bestelling__tabel {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 1.5rem;
}
.bestelling__tabel th,
.bestelling__tabel td {
	text-align: left;
	vertical-align: top;
	padding: 0.85rem 0;
	border-bottom: 1px solid var(--tfta-lijn);
}
.bestelling__tabel th {
	width: 12rem;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--tfta-grijs);
	font-weight: 600;
}
.bestelling__klein { font-size: 0.88rem; color: var(--tfta-grijs); }

@media (max-width: 40rem) {
	.bestelling__tabel th,
	.bestelling__tabel td { display: block; width: auto; border-bottom: 0; padding: 0.2rem 0; }
	.bestelling__tabel td { padding-bottom: 0.9rem; border-bottom: 1px solid var(--tfta-lijn); }
}

/* --- Mijn boekingen ---------------------------------------------------- */

.boekingen { display: grid; gap: 1.1rem; margin-bottom: 2rem; }

.boeking {
	border: 1px solid var(--tfta-lijn);
	border-radius: var(--radius);
	background: var(--tfta-wit);
	padding: 1.4rem 1.5rem;
}
.boeking__kop {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: .5rem 1rem;
	margin-bottom: .9rem;
}
.boeking__titel { margin: 0; font-size: 1.15rem; }
.boeking__status {
	font-size: .78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	border: 1px solid;
	border-radius: 999px;
	padding: .15rem .65rem;
	white-space: nowrap;
}

.boeking__feiten {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
	gap: .8rem 1.5rem;
	margin: 0 0 1.1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--tfta-lijn);
}
.boeking__feiten dt {
	font-size: .74rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--tfta-grijs);
	margin-bottom: .1rem;
}
.boeking__feiten dd { margin: 0; font-size: .95rem; font-weight: 500; }

.boeking__acties {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	flex-wrap: wrap;
	margin: 0;
}
.boeking__factuur { font-size: .9rem; }

@media (max-width: 40rem) {
	.boeking { padding: 1.1rem 1.15rem; }
}

/* --- Toestemming voor cookies -------------------------------------------- */

/* Onderaan het scherm, niet als overlay over de hele pagina. Wie niets wil
   kiezen kan gewoon verder lezen; dat is precies wat een cookiemuur niet doet.
   De banner staat op hidden tot JavaScript hem aanzet, want zonder script kan
   er ook geen keuze worden bewaard. */
.toestemming {
	display: none;
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 60;
	background: var(--tfta-groen-nacht);
	color: rgba(255, 255, 255, 0.85);
	border-top: 2px solid var(--tfta-lime);
	box-shadow: 0 -0.5rem 2rem rgba(1, 31, 18, 0.35);
	padding: 1.25rem 0;
}
.toestemming.is-zichtbaar { display: block; }

.toestemming__inhoud {
	max-width: var(--wrap-breedte);
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 2rem);
	display: flex;
	gap: 1.5rem;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
}

.toestemming__tekst { flex: 1 1 22rem; }
.toestemming__tekst p { margin: 0; font-size: 0.9rem; line-height: 1.6; }
.toestemming__kop {
	font-family: var(--font-kop);
	font-size: 1rem;
	color: var(--tfta-wit);
	margin-bottom: 0.35rem !important;
}
.toestemming__tekst a {
	color: var(--tfta-lime);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* Beide knoppen even groot en even opvallend. Dat is de eis: weigeren mag niet
   moeilijker zijn dan accepteren. */
.toestemming__knoppen {
	display: flex;
	gap: 0.75rem;
	flex: 0 0 auto;
}
.toestemming__knop {
	min-width: 9rem;
	justify-content: center;
}

@media (max-width: 40rem) {
	.toestemming__inhoud { gap: 1rem; }
	.toestemming__knoppen { width: 100%; }
	.toestemming__knop { flex: 1 1 0; min-width: 0; }
}

/* Knopje in de footer om de keuze te herzien. Ziet eruit als een link, want
   dat is het qua gewicht ook. */
.site-footer__cookies { margin: 0; }
.site-footer__cookieknop {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	font-size: 0.84rem;
	color: rgba(255, 255, 255, 0.72);
	text-decoration: underline;
	text-underline-offset: 0.15em;
	cursor: pointer;
}
.site-footer__cookieknop:hover,
.site-footer__cookieknop:focus-visible { color: var(--tfta-lime); }

/* --- Adres- en factuurvelden --------------------------------------------- */

.adresvelden p { margin-bottom: 1.25rem; }
.adresvelden label {
	display: block;
	font-weight: 500;
	font-size: 0.9rem;
	margin-bottom: 0.4rem;
}
.adresvelden input,
.adresvelden select {
	width: 100%;
	padding: 0.85rem 1rem;
	border: 1px solid #c6c5b8;
	border-radius: var(--radius);
	font: inherit;
	background: var(--tfta-wit);
}
.adresvelden select {
	padding-right: 2.25rem;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23004225' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.9rem center;
	cursor: pointer;
}
.adresvelden input:focus-visible,
.adresvelden select:focus-visible {
	outline: 2px solid var(--tfta-groen);
	outline-offset: 1px;
	border-color: var(--tfta-groen);
}

/* Het tweede adres. De regel hangt bewust aan .heeft-js: zonder JavaScript
   klapt er niets open of dicht, en dan moet het blok gewoon zichtbaar blijven.
   Anders zou iemand zonder script zijn factuuradres nooit kunnen invullen. */
.heeft-js .adresvelden__factuur[data-dicht] { display: none; }

.adresvelden__factuur {
	margin-top: 0.5rem;
	padding: 1.25rem 1.25rem 0.25rem;
	border: 1px solid var(--tfta-lijn);
	border-radius: var(--radius);
	background: var(--tfta-ivoor);
}

@media (max-width: 40rem) {
	.adresvelden .formulier__rij { grid-template-columns: 1fr; gap: 0; }
	.adresvelden__factuur { padding-inline: 0.9rem; }
}

/* --- Voorkeuren in het account ------------------------------------------ */

.account__kop {
	margin-top: 3rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--tfta-lijn);
	font-size: 1.35rem;
}
.account__kop:first-of-type {
	margin-top: 2rem;
}

.voorkeuren select {
	width: 100%;
	padding: 0.85rem 2.25rem 0.85rem 1rem;
	border: 1px solid #c6c5b8;
	border-radius: var(--radius);
	font: inherit;
	background-color: var(--tfta-wit);
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23004225' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.9rem center;
	cursor: pointer;
}
.voorkeuren select:focus-visible {
	outline: 2px solid var(--tfta-groen);
	outline-offset: 1px;
	border-color: var(--tfta-groen);
}
[dir="rtl"] .voorkeuren select {
	background-position: left 0.9rem center;
	padding: 0.85rem 1rem 0.85rem 2.25rem;
}

.voorkeuren__hint {
	font-weight: 400;
	font-size: 0.85rem;
	color: var(--tfta-grijs);
}
.voorkeuren__hint::before { content: "("; }
.voorkeuren__hint::after { content: ")"; }

/* Vijfenzestig clubs passen niet in een lijst die je moet doorscrollen zonder
   overzicht. Kolommen die meebewegen met de schermbreedte, met een eigen
   scrollgebied zodat de knop onderaan bereikbaar blijft. */
.voorkeuren__raster {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
	gap: 0.15rem 1rem;
	max-height: 22rem;
	overflow-y: auto;
	padding: 0.75rem;
	border: 1px solid var(--tfta-lijn);
	border-radius: var(--radius);
	background: var(--tfta-wit);
}

/* Zoekveld boven de clublijst. Staat in de HTML op hidden en wordt door
   JavaScript aangezet, dus zonder script is er geen knop die niets doet. */
.voorkeuren__zoekveld {
	margin: 0 0 0.75rem;
}
.voorkeuren__zoekveld label {
	display: block;
	font-weight: 500;
	font-size: 0.9rem;
	margin-bottom: 0.4rem;
}
.voorkeuren__zoekveld input {
	width: 100%;
	padding: 0.75rem 1rem;
	border: 1px solid #c6c5b8;
	border-radius: var(--radius);
	font: inherit;
	background: var(--tfta-wit);
}
.voorkeuren__zoekveld input:focus-visible {
	outline: 2px solid var(--tfta-groen);
	outline-offset: 1px;
	border-color: var(--tfta-groen);
}

.voorkeuren__leeg,
.voorkeuren__bewaard {
	grid-column: 1 / -1;
	margin: 0.5rem 0 0;
	font-size: 0.85rem;
	color: var(--tfta-grijs);
}
.voorkeuren__bewaard { grid-column: auto; }

/* Let op: de regel hieronder zet display op flex, en dat wint van het
   hidden-attribuut. Zonder deze uitzondering blijft een weggefilterde club
   gewoon staan. */
.voorkeuren__optie[hidden] { display: none; }

.voorkeuren__optie {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.45rem 0.25rem;
	font-size: 0.93rem;
	cursor: pointer;
	border-radius: var(--radius);
}
.voorkeuren__optie:hover { background: var(--tfta-ivoor); }
.voorkeuren__optie input {
	width: 1.1rem;
	height: 1.1rem;
	accent-color: var(--tfta-groen);
	flex: none;
}
.voorkeuren__optie:focus-within {
	outline: 2px solid var(--tfta-groen);
	outline-offset: 1px;
}

.voorkeuren__mail {
	margin-top: 1.25rem;
	padding: 1rem 1.1rem;
	background: var(--tfta-ivoor);
	border-radius: var(--radius);
}
.voorkeuren__mail .voorkeuren__optie:hover { background: none; }

/* Knop naar het klantaccount, rechts naast de copyrightregel.
   Was een gewone link en kreeg daardoor de donkergroene standaardkleur van de
   site: donkergroen op donkergroen, dus onzichtbaar. Nu een omlijnde knop in
   lime, zodat meteen te zien is dat je hier ergens naartoe kunt. */
.site-footer__account { margin: 0; }
.site-footer__account a {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .55rem 1.1rem;
	border: 1px solid var(--tfta-lime);
	border-radius: 999px;
	color: var(--tfta-lime);
	font-size: .85rem;
	font-weight: 600;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease;
}
.site-footer__account a:hover,
.site-footer__account a:focus-visible {
	background: var(--tfta-lime);
	color: var(--tfta-groen-nacht);
}

/* --- Nieuwsbriefblok ---------------------------------------------------- */

.nieuwsbrief {
	background: var(--tfta-groen-nacht);
	color: var(--tfta-wit);
	border-radius: var(--radius);
	padding: clamp(1.75rem, 4vw, 2.75rem);
}
.nieuwsbrief h2 { color: var(--tfta-wit); margin: 0 0 .6rem; font-size: clamp(1.3rem, 2.6vw, 1.75rem); }
.nieuwsbrief__tekst p { color: rgba(255,255,255,.82); margin: 0 0 1.5rem; max-width: 58ch; }

.nieuwsbrief__formulier {
	display: flex;
	gap: .75rem;
	flex-wrap: wrap;
	margin: 0 0 .9rem;
}
.nieuwsbrief__formulier input[type="email"] {
	flex: 1 1 18rem;
	padding: .95rem 1.1rem;
	border: 1px solid rgba(255,255,255,.25);
	border-radius: var(--radius);
	background: rgba(255,255,255,.06);
	color: var(--tfta-wit);
	font-family: var(--font-basis);
	font-size: 1rem;
}
.nieuwsbrief__formulier input[type="email"]::placeholder { color: rgba(255,255,255,.55); }
.nieuwsbrief__formulier input[type="email"]:focus {
	outline: 2px solid var(--tfta-lime);
	outline-offset: 1px;
}
.nieuwsbrief__klein { font-size: .82rem; color: rgba(255,255,255,.65); margin: 0; }

@media (max-width: 34rem) {
	.nieuwsbrief__formulier .knop { width: 100%; justify-content: center; }
}

/* --- Clubpagina: redactionele inhoud --------------------------------------
   Het directe antwoord staat boven het programma, want dat is waar iemand
   voor komt: waar speelt de club, hoe kom ik aan kaarten, wat kost het. De
   uitgebreide teksten staan eronder, na de wedstrijden. */

.club-antwoord {
	max-width: 46rem;
	margin: 0 0 2.5rem;
	padding: 1.25rem 1.5rem;
	background: var(--tfta-ivoor);
	border-inline-start: 3px solid var(--tfta-lime);
	border-radius: var(--radius);
}

.club-antwoord p { margin: 0 0 .75rem; }
.club-antwoord p:last-child { margin: 0; }

.club-antwoord__prijs {
	font-family: var(--font-kop);
	font-weight: 700;
	color: var(--tfta-groen);
}

.club-inhoud {
	max-width: 46rem;
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid var(--tfta-lijn);
}

.club-inhoud__blok { margin-top: 2.5rem; }
.club-inhoud__blok:first-child { margin-top: 0; }

.club-inhoud__blok h2 {
	font-size: 1.7rem;
	margin: 0 0 .75rem;
}

.club-inhoud__blok p { margin: 0 0 1rem; }
.club-inhoud__blok p:last-child { margin: 0; }

.club-inhoud__meer { margin-top: 1rem; font-size: .95rem; }

/* Stadionfeiten: korte, scanbare kaart met de harde gegevens. Juist dit soort
   blokjes worden door AI-systemen letterlijk overgenomen. */
.club-feiten {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	gap: 1rem 1.5rem;
	margin: 0 0 2.5rem;
	padding: 1.25rem 1.5rem;
	border: 1px solid var(--tfta-lijn);
	border-radius: var(--radius);
}

.club-feiten__item { min-width: 0; }

.club-feiten dt {
	font-size: .78rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--tfta-grijs);
	margin-bottom: .2rem;
}

.club-feiten dd {
	margin: 0;
	font-family: var(--font-kop);
	font-weight: 700;
	color: var(--tfta-groen);
	overflow-wrap: anywhere;
}

@media (max-width: 34rem) {
	.club-antwoord { padding: 1rem 1.15rem; }
	.club-feiten { padding: 1rem 1.15rem; }
}

/* --- Stadionplattegrond op de wedstrijdpagina ----------------------------- */

.plattegrond {
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid var(--tfta-lijn);
}

.plattegrond h2 {
	font-size: 1.7rem;
	margin: 0 0 .75rem;
}

.plattegrond__intro {
	max-width: 46rem;
	margin: 0 0 1.25rem;
}

.plattegrond__figuur {
	margin: 0;
	padding: 1rem;
	background: var(--tfta-ivoor);
	border-radius: var(--radius);
}

.plattegrond__figuur img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 44rem;
	margin: 0 auto;
}

.plattegrond__figuur figcaption {
	margin-top: .75rem;
	font-size: .85rem;
	color: var(--tfta-grijs);
	text-align: center;
}

/* --- Stadspagina's (voetbalreis per stad) --------------------------------- */

.steden__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
	gap: 1.5rem;
	margin-top: 1rem;
}

.stadkaart {
	display: flex;
	flex-direction: column;
	background: var(--tfta-wit);
	border: 1px solid var(--tfta-lijn);
	border-radius: var(--radius);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: transform .18s ease, box-shadow .18s ease;
}

.stadkaart:hover,
.stadkaart:focus-visible {
	transform: translateY(-2px);
	box-shadow: var(--schaduw-zacht);
}

.stadkaart__beeld {
	display: block;
	width: 100%;
	height: 10rem;
	object-fit: cover;
}

.stadkaart__body {
	display: flex;
	flex-direction: column;
	gap: .35rem;
	padding: 1.15rem 1.25rem 1.35rem;
}

.stadkaart__naam {
	font-size: 1.35rem;
	margin: 0;
	color: var(--tfta-groen);
}

.stadkaart__land {
	margin: 0;
	font-size: .78rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--tfta-grijs);
}

.stadkaart__tekst {
	margin: .35rem 0 0;
	font-size: .95rem;
}

.stadkaart__meta {
	margin: .5rem 0 0;
	font-size: .88rem;
	color: var(--tfta-grijs);
}

/* De stadshero moet je de stad laten zien. De standaardkop zet het beeld op
   45 procent met een donkere laag eroverheen; bij een avondfoto blijft er dan
   niets van over. Hier laten we het beeld bijna vol staan en verplaatsen we de
   verdonkering naar links, waar de tekst staat. Rechts blijft de foto zichtbaar
   en links houdt de witte tekst zijn contrast. */
.pagina-kop--stad .pagina-kop__beeld { opacity: .92; }

.pagina-kop--stad::after {
	background:
		linear-gradient(to right, rgba(1, 31, 18, .94) 0%, rgba(1, 31, 18, .82) 38%, rgba(1, 31, 18, .3) 100%),
		linear-gradient(to top, rgba(1, 31, 18, .6), rgba(1, 31, 18, 0) 55%);
}

/* Op smalle schermen staat de tekst over de volle breedte, dus dan wel een
   gelijkmatige verdonkering. */
@media (max-width: 48rem) {
	.pagina-kop--stad::after {
		background: linear-gradient(to top, rgba(1, 31, 18, .92), rgba(1, 31, 18, .7));
	}
}

/* Toelichting bij een korte wedstrijdenlijst op een stadspagina. */
.stad-weinig {
	max-width: 46rem;
	margin: 1.25rem 0 0;
	padding: 1rem 1.25rem;
	background: var(--tfta-ivoor);
	border-inline-start: 3px solid var(--tfta-lijn);
	border-radius: var(--radius);
	font-size: .95rem;
	color: var(--tfta-grijs);
}

/* Landen krijgen op het overzicht iets meer ruimte dan de steden: het zijn er
   minder en ze staan een niveau hoger in de structuur. */
.steden__grid--landen {
	grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
	margin-bottom: 3rem;
}

.steden__grid--landen .stadkaart__beeld { height: 11rem; }