/* ==========================================================================
   Vindsalesvacatures.nl
   Zakelijk en rustig: navy als basis, oranje alleen als accent. Knoppen zijn
   wit op donkeroranje (contrast 4,8:1). Geen draaiende of zwevende elementen.
   ========================================================================== */

:root {
	--inkt: #0f1430;
	--inkt-2: #1d2550;
	--tekst: #2b3150;
	--zacht: #555b74;
	--grijs: #6b7088;
	--lijn: #e3e1dc;
	--lijn-donker: #cbc8c1;
	--licht: #f6f5f2;
	--wit: #ffffff;
	--oranje: #ff5a1f;
	--knop: #c9460f;
	--knop-hover: #a63a0c;
	--oranje-licht: #fdeee6;
	--goud-licht: #fbf0d4;
	--groen: #1e8a52;
	--groen-licht: #e2f3ea;
	--blauw: #2747b8;
	--blauw-licht: #e6ebfa;
	--schaduw: 0 6px 20px rgba(15, 20, 48, .08);
	--rond: 10px;
	--kop: "Poppins", "Segoe UI", system-ui, sans-serif;
	--letter: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
}

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

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-padding-top: 90px;
}

body {
	margin: 0;
	background: var(--wit);
	color: var(--tekst);
	font-family: var(--letter);
	font-size: 1rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

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

h1,
h2,
h3 {
	margin: 0 0 .6em;
	color: var(--inkt);
	font-family: var(--kop);
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -.01em;
}

h1 {
	font-size: clamp(1.9rem, 3.6vw, 2.6rem);
}

h2 {
	font-size: clamp(1.35rem, 2.2vw, 1.7rem);
}

h3 {
	font-size: 1.08rem;
}

p {
	margin: 0 0 1em;
}

a {
	color: var(--blauw);
	text-underline-offset: .18em;
}

a:hover {
	color: var(--inkt);
}

strong {
	font-weight: 600;
}

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

.container {
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 24px;
}

.smal {
	max-width: 820px;
}

.midden {
	text-align: center;
}

.sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.sla-over {
	position: absolute;
	left: 16px;
	top: -60px;
	z-index: 100;
	padding: 10px 16px;
	background: var(--inkt);
	color: var(--wit);
	font-weight: 600;
}

.sla-over:focus {
	top: 12px;
}

.icoon {
	flex-shrink: 0;
}

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

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	min-height: 44px;
	padding: .6em 1.25em;
	border: 1.5px solid transparent;
	border-radius: 6px;
	font-family: var(--letter);
	font-size: .98rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.btn-primair {
	background: var(--knop);
	color: var(--wit);
}

.btn-primair:hover {
	background: var(--knop-hover);
	color: var(--wit);
}

.btn-donker {
	background: var(--inkt);
	color: var(--wit);
}

.btn-donker:hover {
	background: var(--inkt-2);
	color: var(--wit);
}

.btn-licht {
	background: var(--wit);
	color: var(--inkt);
}

.btn-licht:hover {
	background: var(--licht);
	color: var(--inkt);
}

.btn-omlijnd {
	border-color: var(--lijn-donker);
	background: var(--wit);
	color: var(--inkt);
}

.btn-omlijnd:hover {
	border-color: var(--inkt);
	color: var(--inkt);
}

.btn-omlijnd-licht {
	border-color: rgba(255, 255, 255, .6);
	color: var(--wit);
}

.btn-omlijnd-licht:hover {
	background: var(--wit);
	color: var(--inkt);
}

.btn-klein {
	min-height: 38px;
	padding: .45em 1em;
	font-size: .9rem;
}

.btn-groot {
	min-height: 50px;
	padding: .75em 1.5em;
	font-size: 1.02rem;
}

.btn-breed {
	width: 100%;
}

.link-pijl {
	display: inline-flex;
	align-items: center;
	gap: .35em;
	color: var(--blauw);
	font-weight: 600;
	text-decoration: none;
}

.link-pijl:hover {
	color: var(--inkt);
	text-decoration: underline;
}

/* --- Labels en chips ----------------------------------------------------- */

.label {
	display: inline-flex;
	align-items: center;
	padding: .15em .55em;
	border-radius: 4px;
	font-size: .8rem;
	font-weight: 600;
	line-height: 1.5;
}

.label-licht {
	background: rgba(255, 255, 255, .14);
	color: var(--wit);
}

.label-grijs {
	background: var(--licht);
	color: var(--zacht);
}

.label-salaris {
	background: var(--goud-licht);
	color: var(--inkt);
}

.profiel-acquisitie.label-profiel {
	background: var(--oranje-licht);
	color: #9a340a;
}

.profiel-relatiebeheer.label-profiel {
	background: var(--groen-licht);
	color: #16683d;
}

.profiel-allround.label-profiel {
	background: var(--blauw-licht);
	color: var(--blauw);
}

.chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.chip {
	display: inline-flex;
	align-items: center;
	gap: .45em;
	padding: .35em .8em;
	border: 1px solid var(--lijn-donker);
	border-radius: 6px;
	background: var(--wit);
	color: var(--inkt);
	font-size: .9rem;
	text-decoration: none;
}

.chip:hover {
	border-color: var(--inkt);
	color: var(--inkt);
}

.chip-teller {
	color: var(--grijs);
	font-size: .82rem;
}

/* --- Topbalk en kop ------------------------------------------------------ */

.topbalk {
	background: var(--inkt);
	color: rgba(255, 255, 255, .8);
	font-size: .82rem;
}

.topbalk-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 34px;
}

.topbalk p {
	margin: 0;
}

.topbalk-moeder {
	color: rgba(255, 255, 255, .8);
	text-decoration: none;
}

.topbalk-moeder:hover {
	color: var(--wit);
	text-decoration: underline;
}

.site-kop {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--wit);
	border-bottom: 1px solid var(--lijn);
}

.kop-inner {
	display: flex;
	align-items: center;
	gap: 24px;
	min-height: 70px;
}

.logo img {
	width: 180px;
	height: auto;
}

.hoofdnav {
	margin-left: auto;
}

.hoofdnav ul {
	display: flex;
	align-items: center;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hoofdnav a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 12px;
	border-bottom: 2px solid transparent;
	color: var(--inkt);
	font-size: .96rem;
	font-weight: 600;
	text-decoration: none;
}

.hoofdnav a:hover,
.hoofdnav a[aria-current="page"] {
	border-bottom-color: var(--oranje);
}

.nav-teller {
	padding: 0 6px;
	border-radius: 4px;
	background: var(--licht);
	color: var(--zacht);
	font-size: .78rem;
}

.nav-mobiel-knop {
	display: none;
}

.nav-knop {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	margin-left: auto;
	padding: 11px;
	border: 1px solid var(--lijn);
	border-radius: 6px;
	background: var(--wit);
	cursor: pointer;
}

.nav-streep {
	display: block;
	height: 2px;
	background: var(--inkt);
	transition: transform .2s ease, opacity .2s ease;
}

.nav-knop[aria-expanded="true"] .nav-streep:nth-child(2) {
	transform: translateY(7px) rotate(45deg);
}

.nav-knop[aria-expanded="true"] .nav-streep:nth-child(3) {
	opacity: 0;
}

.nav-knop[aria-expanded="true"] .nav-streep:nth-child(4) {
	transform: translateY(-7px) rotate(-45deg);
}

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

/* Banner met foto, opgebouwd zoals op de andere jobboards: witte tekst op een
   donkere ondergrond en een witte zoekkaart met de zoekbalk als pil.

   De foto (assets/img/hero-sales-*.webp) heeft de mensen links en lege vloer
   rechts. Vanaf 1100px loopt de foto van de linkerrand tot net achter de
   tekstkolom en wordt hij naar rechts donker; tekst en zoekkaart staan rechts,
   op de lege vloer. Smaller staat de foto bovenaan en loopt hij onderaan over
   in de donkere ondergrond. De tekst staat zo nooit direct op de foto. */

.hero {
	position: relative;
	overflow: hidden;
	padding: 15rem 0 40px;
	background: var(--inkt);
	color: rgba(255, 255, 255, .85);
}

.hero-beeld {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 18rem;
}

.hero-beeld picture,
.hero-beeld img {
	display: block;
	width: 100%;
	height: 100%;
}

.hero-beeld img {
	object-fit: cover;
	object-position: 28% 50%;
}

.hero-beeld::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(15, 20, 48, 0) 45%, rgba(15, 20, 48, .75) 78%, var(--inkt) 100%);
}

.hero .container {
	position: relative;
	z-index: 1;
}

.hero-inhoud {
	max-width: 620px;
}

.bovenkop {
	margin: 0 0 6px;
	color: var(--knop);
	font-size: .8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .08em;
}

.hero .bovenkop {
	color: var(--oranje);
}

.hero h1 {
	margin-bottom: .3em;
	color: var(--wit);
	font-size: clamp(2.4rem, 4.2vw, 3.5rem);
	letter-spacing: -.02em;
}

.hero-punt {
	color: var(--oranje);
}

.hero-sub {
	max-width: 34em;
	margin: 0;
	color: rgba(255, 255, 255, .82);
	font-size: 1.06rem;
}

/* De zoekkaart: titel met het aantal vacatures, de zoekbalk en de chips. */

.zoekkaart {
	margin-top: 26px;
	padding: 22px 20px 18px;
	border-radius: 14px;
	background: var(--wit);
	color: var(--tekst);
	box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
}

.zoekkaart-titel {
	margin: 0 0 14px;
	color: var(--inkt);
	font-family: var(--kop);
	font-size: clamp(1.15rem, 2vw, 1.4rem);
	font-weight: 600;
	line-height: 1.25;
}

.zoekkaart-aantal {
	padding: 0 .05em;
	background: linear-gradient(to top, rgba(255, 90, 31, .3) .34em, transparent .34em);
}

/* Zoekbalk in de kaart: wat en waar met korte labels, geen iconen. De afstand
   is hier verborgen; met een plaats zoekt de site binnen 25 km (main.js en
   vsv_zoekinvoer), en op de resultatenpagina kun je de afstand aanpassen. */

.zoekkaart .zoekvelden {
	grid-template-columns: 1fr;
	gap: 0;
	padding: 4px;
	border: 1px solid var(--lijn-donker);
	border-radius: 12px;
}

.zoekkaart .zoekvelden:focus-within {
	border-color: var(--blauw);
	box-shadow: 0 0 0 3px var(--blauw-licht);
}

.zoekkaart .veld {
	padding: 8px 12px;
}

.zoekkaart .veld + .veld {
	border-top: 1px solid var(--lijn);
}

.zoekkaart .veld-afstand {
	display: none;
}

.zoekkaart .veld label {
	margin-bottom: 0;
	color: var(--inkt);
	font-size: .8rem;
	font-weight: 700;
}

.zoekkaart .veld-invoer .icoon {
	display: none;
}

.zoekkaart .veld input {
	min-height: 30px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
}

.zoekkaart .veld input:focus {
	box-shadow: none;
}

.zoekkaart .btn-zoek {
	width: 100%;
	min-height: 50px;
	margin-top: 4px;
	border-radius: 9px;
}

.zoekkaart .zoek-chips {
	gap: 5px;
	margin-top: 12px;
}

.zoekkaart .chips-label {
	font-size: .8rem;
}

.zoekkaart .zoek-chips .chip {
	padding: .15em .55em;
	font-size: .8rem;
}

.hero-vertrouwen {
	margin-top: 18px;
}

.hero-vinkjes {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 20px;
	margin: 0;
	padding: 0;
	list-style: none;
	color: rgba(255, 255, 255, .85);
	font-size: .92rem;
}

.hero-vinkjes li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.hero-vinkjes .icoon {
	color: #5fd39b;
}

.hero-werkgever {
	margin: 10px 0 0;
	color: rgba(255, 255, 255, .7);
	font-size: .92rem;
}

.hero-werkgever a {
	color: var(--wit);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var(--oranje);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.hero-werkgever a:hover {
	color: var(--oranje);
}

@media (min-width: 600px) {
	/* De zoekbalk als pil met een ronde zoekknop. */
	.zoekkaart .zoekvelden {
		grid-template-columns: 1.15fr 1fr auto;
		align-items: center;
		padding: 5px 5px 5px 10px;
		border-radius: 999px;
	}

	.zoekkaart .veld {
		padding: 4px 16px;
	}

	.zoekkaart .veld + .veld {
		border-top: 0;
		border-left: 1px solid var(--lijn);
	}

	.zoekkaart .veld-wat,
	.zoekkaart .btn-zoek {
		grid-column: auto;
	}

	.zoekkaart .btn-zoek {
		width: 54px;
		height: 54px;
		min-height: 54px;
		margin: 0 0 0 6px;
		padding: 0;
		border-radius: 50%;
	}

	.zoekkaart .btn-zoek span {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.zoekkaart {
		padding: 20px 22px 18px;
	}
}

@media (min-width: 720px) {
	/* Tablet: de hele groep in beeld, zonder hoofden af te snijden. */
	.hero {
		padding-top: calc(min(56vw, 30rem) - 4rem);
	}

	.hero-beeld {
		height: min(56vw, 30rem);
	}

	.hero-beeld img {
		object-position: 30% 8%;
	}
}

@media (min-width: 1100px) {
	/* Breed: foto links tot net achter de tekstkolom, tekst en zoekkaart rechts.
	   --rand is de afstand van de rechterrand tot de inhoud van .container,
	   --kolom de breedte van de tekstkolom. */
	.hero {
		--kolom: min(560px, 50vw);
		--rand: max(24px, (100% - 1180px) / 2 + 24px);
		display: flex;
		align-items: center;
		min-height: 580px;
		padding: 52px 0 56px;
	}

	.hero > .container {
		width: 100%;
	}

	.hero-beeld {
		bottom: 0;
		right: calc(var(--rand) + var(--kolom) - 72px);
		height: auto;
	}

	.hero-beeld img {
		object-position: 12% 40%;
	}

	.hero-beeld::after {
		background:
			linear-gradient(90deg, rgba(15, 20, 48, 0) 64%, rgba(15, 20, 48, .82) 88%, var(--inkt) 100%),
			linear-gradient(0deg, rgba(15, 20, 48, .3), rgba(15, 20, 48, 0) 30%);
	}

	.hero-inhoud {
		width: var(--kolom);
		max-width: none;
		margin-left: auto;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.hero-inhoud {
		animation: hero-in .6s ease both;
	}

	@keyframes hero-in {
		from {
			opacity: 0;
			transform: translateY(14px);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
}

/* --- Acquisitie per functie (homepage) ----------------------------------- */

.aanbod-raster {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 40px;
	align-items: center;
}

.aanbod-tekst p {
	max-width: 36em;
	color: var(--zacht);
}

.aanbod-cijfers {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 22px 0 0;
}

.aanbod-cijfers div {
	min-width: 130px;
	padding: 10px 14px;
	border: 1px solid var(--lijn);
	border-radius: 8px;
	background: var(--wit);
}

.aanbod-cijfers dt {
	color: var(--grijs);
	font-size: .74rem;
	text-transform: uppercase;
	letter-spacing: .05em;
}

.aanbod-cijfers dd {
	margin: 2px 0 0;
	color: var(--inkt);
	font-family: var(--kop);
	font-size: 1.3rem;
	font-weight: 600;
	line-height: 1.3;
}

.aanbod-cijfers small {
	color: var(--grijs);
	font-family: var(--letter);
	font-size: .76rem;
	font-weight: 400;
}

.acquisitiekaart {
	padding: 20px 22px 18px;
	border: 1px solid var(--lijn);
	border-radius: var(--rond);
	background: var(--wit);
	box-shadow: var(--schaduw);
}

.acquisitiekaart h3 {
	margin: 0 0 10px;
	font-size: 1.05rem;
}

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

.functiebalken a {
	display: grid;
	grid-template-columns: 9.5em 1fr 2.6em;
	align-items: center;
	gap: 10px;
	padding: 5px 0;
	color: var(--tekst);
	font-size: .88rem;
	text-decoration: none;
}

.functiebalken a:hover .fb-naam {
	color: var(--blauw);
	text-decoration: underline;
}

.fb-balk {
	height: 8px;
	border-radius: 4px;
	background: var(--licht);
	overflow: hidden;
}

.fb-balk i {
	display: block;
	height: 100%;
	background: var(--oranje);
}

.fb-procent {
	color: var(--inkt);
	font-weight: 600;
	text-align: right;
}

.acquisitiekaart-noot {
	margin: 12px 0 0;
	color: var(--grijs);
	font-size: .8rem;
}

/* --- Zoekpaneel ---------------------------------------------------------- */

.zoekpaneel {
	display: grid;
	gap: 14px;
}

.zoekvelden {
	display: grid;
	grid-template-columns: 1.3fr 1fr .8fr auto;
	gap: 10px;
	align-items: end;
}

.veld label {
	display: block;
	margin-bottom: 4px;
	color: var(--zacht);
	font-size: .82rem;
	font-weight: 600;
}

.veld-invoer {
	position: relative;
	display: flex;
	align-items: center;
}

.veld-invoer .icoon {
	position: absolute;
	left: 12px;
	color: var(--grijs);
	pointer-events: none;
}

.veld input,
.veld select,
.filterveld select {
	width: 100%;
	min-height: 46px;
	padding: 0 12px 0 40px;
	border: 1px solid var(--lijn-donker);
	border-radius: 6px;
	background: var(--wit);
	color: var(--inkt);
	font: inherit;
	font-size: .98rem;
}

.veld select {
	padding-left: 12px;
}

.veld input:focus,
.veld select:focus,
.filterveld select:focus {
	outline: none;
	border-color: var(--blauw);
	box-shadow: 0 0 0 3px var(--blauw-licht);
}

.btn-zoek {
	min-height: 46px;
}

.zoek-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

.chips-label {
	margin-right: 4px;
	color: var(--zacht);
	font-size: .86rem;
}

.zoek-chips .chip {
	padding: .2em .65em;
	font-size: .84rem;
}

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

.sectie {
	padding: 52px 0;
}

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

.sectie-kop {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 24px;
	margin-bottom: 22px;
}

.sectie-kop h2 {
	margin: 0;
}

.twee-kolommen {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
}

/* --- Vacaturekaarten ----------------------------------------------------- */

.kaarten {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr));
	gap: 18px;
}

.kaart {
	display: flex;
	flex-direction: column;
	padding: 18px 18px 0;
	border: 1px solid var(--lijn);
	border-radius: var(--rond);
	background: var(--wit);
	transition: border-color .15s ease, box-shadow .15s ease;
}

.kaart:hover {
	border-color: var(--lijn-donker);
	box-shadow: var(--schaduw);
}

.kaart-kop {
	display: flex;
	gap: 14px;
	margin-bottom: 12px;
}

.kaart-beeld {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 64px;
	height: 64px;
	border-radius: 8px;
	background: var(--licht);
	color: var(--grijs);
	overflow: hidden;
}

.kaart-beeld img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.kaart-titel {
	margin: 0 0 2px;
	font-size: 1.08rem;
	line-height: 1.3;
}

.kaart-titel a {
	color: var(--inkt);
	text-decoration: none;
}

.kaart-titel a:hover {
	color: var(--blauw);
	text-decoration: underline;
}

.kaart-plaats {
	display: flex;
	align-items: center;
	gap: 5px;
	margin: 0;
	color: var(--zacht);
	font-size: .9rem;
}

.kaart-plaats .icoon {
	color: var(--grijs);
}

.afstand {
	padding: 0 .4em;
	border-radius: 4px;
	background: var(--licht);
	font-size: .78rem;
}

.kaart-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 10px;
	padding: 0;
	list-style: none;
}

.kaart-meta li {
	padding: .1em .5em;
	border-radius: 4px;
	background: var(--licht);
	color: var(--zacht);
	font-size: .82rem;
}

.kaart-meta .kaart-salaris {
	background: var(--goud-licht);
	color: var(--inkt);
	font-weight: 600;
}

.kaart-tekst {
	display: -webkit-box;
	margin-bottom: 12px;
	overflow: hidden;
	color: var(--zacht);
	font-size: .92rem;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.kaart-profiel {
	margin-bottom: 14px;
}

.kaart-profiel .label-profiel {
	margin-bottom: 6px;
}

.kaart-voet {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: auto -18px 0;
	padding: 12px 18px;
	border-top: 1px solid var(--lijn);
}

/* Meter: acquisitie tegenover relatiebeheer */

.jachtmeter-balk {
	display: flex;
	height: 7px;
	border-radius: 4px;
	background: var(--licht);
	overflow: hidden;
}

.jachtmeter-jacht {
	background: var(--oranje);
}

.jachtmeter-relatie {
	background: var(--groen);
}

.jachtmeter-legenda {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 14px;
	margin: 6px 0 0;
	color: var(--zacht);
	font-size: .8rem;
}

.jachtmeter-legenda span {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.stip {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
}

.stip-jacht {
	background: var(--oranje);
}

.stip-relatie {
	background: var(--groen);
}

.jachtmeter-groot {
	margin-top: 20px;
}

.jachtmeter-groot .jachtmeter-balk {
	height: 10px;
}

.jachtmeter-groot .jachtmeter-legenda {
	font-size: .9rem;
}

/* --- Profieltest --------------------------------------------------------- */

.profielband {
	padding: 40px 0;
	background: var(--inkt);
	color: rgba(255, 255, 255, .85);
}

.profielband-raster {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: center;
}

.profielband h2 {
	color: var(--wit);
}

.profiel-direct {
	margin: 0;
	font-size: .92rem;
}

.profiel-direct a {
	margin-left: 10px;
	color: var(--wit);
	font-weight: 600;
}

.test-stap {
	margin: 0 0 2px;
	color: rgba(255, 255, 255, .6);
	font-size: .78rem;
	text-transform: uppercase;
	letter-spacing: .06em;
}

.test-v {
	margin-bottom: 10px;
	color: var(--wit);
	font-size: 1.05rem;
	font-weight: 600;
}

.test-keuzes {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.test-keuzes button {
	padding: 12px 14px;
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: 6px;
	background: rgba(255, 255, 255, .06);
	color: var(--wit);
	font: inherit;
	font-size: .95rem;
	text-align: left;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease;
}

.test-keuzes button:hover {
	border-color: var(--wit);
	background: rgba(255, 255, 255, .14);
}

.test-uitslag {
	padding: 16px 18px;
	border-radius: 8px;
	background: rgba(255, 255, 255, .08);
}

.test-uitslag p {
	margin-bottom: .5em;
}

.test-uitslag strong {
	color: var(--wit);
	font-family: var(--kop);
	font-size: 1.3rem;
}

.test-opnieuw {
	margin-left: 12px;
	padding: 0;
	border: 0;
	background: none;
	color: rgba(255, 255, 255, .85);
	font: inherit;
	font-size: .9rem;
	text-decoration: underline;
	cursor: pointer;
}

.profiel-meer {
	margin: 12px 0 0;
}

.profielband .profiel-meer .link-pijl {
	color: var(--wit);
}

/* --- Pagina Verkoopprofiel ----------------------------------------------- */

.testpagina-raster {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: 32px;
	align-items: start;
}

.testblok {
	padding: 28px 30px;
	border-radius: var(--rond);
	background: var(--inkt);
	color: rgba(255, 255, 255, .85);
}

.testblok h2 {
	color: var(--wit);
}

.stappen {
	margin: 0 0 20px;
	padding-left: 1.2em;
	font-size: .94rem;
}

.stappen li {
	margin-bottom: 4px;
}

.zijblok .tellijst span {
	background: var(--wit);
}

.uitslag-vacatures {
	margin-top: 36px;
}

.sectie-tekst {
	max-width: 46em;
	margin-bottom: 22px;
	color: var(--zacht);
}

.profielkaarten {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}

.profielkaart {
	display: flex;
	flex-direction: column;
	padding: 22px;
	border: 1px solid var(--lijn);
	border-top: 4px solid var(--oranje);
	border-radius: var(--rond);
	background: var(--wit);
}

.profielkaart.profiel-relatiebeheer {
	border-top-color: var(--groen);
}

.profielkaart.profiel-allround {
	border-top-color: var(--blauw);
}

.profielkaart h3 {
	margin-bottom: 2px;
	font-size: 1.2rem;
}

.profielkaart-kort {
	margin-bottom: 10px;
	color: var(--knop);
	font-weight: 600;
}

.profielkaart.profiel-relatiebeheer .profielkaart-kort {
	color: var(--groen);
}

.profielkaart.profiel-allround .profielkaart-kort {
	color: var(--blauw);
}

.profielkaart > p {
	color: var(--zacht);
	font-size: .94rem;
}

.profielkaart-functies {
	flex: 1;
	font-size: .9rem !important;
}

.tabel-balk {
	display: inline-block;
	width: 90px;
	height: 8px;
	margin-right: 8px;
	border-radius: 4px;
	background: var(--licht);
	overflow: hidden;
	vertical-align: middle;
}

.tabel-balk i {
	display: block;
	height: 100%;
}

.tabel-balk-jacht {
	background: var(--oranje);
}

.tabel-balk-relatie {
	background: var(--groen);
}

.tekst .werkweekblok {
	margin: 24px 0 36px;
}

.verder-lezen {
	margin-top: 28px;
}

/* --- Zoeken op, kennisbank, FAQ ------------------------------------------ */

.zoekop {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px 40px;
}

.zoekop h3 {
	margin-bottom: 4px;
	font-size: 1rem;
}

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

.tellijst li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 7px 0;
	border-bottom: 1px solid var(--lijn);
	font-size: .92rem;
}

.tellijst a {
	color: var(--tekst);
	text-decoration: none;
}

.tellijst a:hover {
	color: var(--blauw);
	text-decoration: underline;
}

.tellijst span {
	min-width: 26px;
	padding: 0 6px;
	border-radius: 4px;
	background: var(--wit);
	color: var(--zacht);
	font-size: .78rem;
	text-align: center;
}

.artikelkaarten {
	display: grid;
	gap: 10px;
}

.artikelkaart {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 14px 16px;
	border: 1px solid var(--lijn);
	border-radius: 8px;
}

.artikelkaart-icoon {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 8px;
	background: var(--oranje-licht);
	color: var(--knop);
}

.artikelkaart-meta {
	margin: 0;
	color: var(--grijs);
	font-size: .8rem;
}

.artikelkaart h3 {
	margin: 0;
	font-size: 1rem;
}

.artikelkaart h3 a {
	color: var(--inkt);
	text-decoration: none;
}

.artikelkaart h3 a:hover {
	color: var(--blauw);
	text-decoration: underline;
}

/* Kennisbank: artikelen per categorie */

.artikelkaarten-raster {
	grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
	gap: 12px;
}

.kennisbank-groep {
	margin-bottom: 44px;
	scroll-margin-top: 100px;
}

.kennisbank-groep:last-child {
	margin-bottom: 0;
}

.kennisbank-groep h2 {
	margin: 0 0 6px;
}

.kennisbank-groep-intro {
	max-width: 46em;
	margin: 0 0 16px;
	color: var(--zacht);
}

.kennisbank-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}

.kennisbank-nav a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 999px;
	color: var(--wit);
	font-size: .88rem;
	text-decoration: none;
}

.kennisbank-nav a:hover {
	background: rgba(255, 255, 255, .1);
}

.kennisbank-nav span {
	color: rgba(255, 255, 255, .6);
	font-size: .8rem;
}

/* Artikel: cijfers uit de feed en voorbeeldteksten */

.artikel-cijfers {
	margin-top: 22px;
}

.artikel-cijfers-bron {
	margin: 8px 0 0;
	color: rgba(255, 255, 255, .65);
	font-size: .8rem;
}

.voorbeeldtekst {
	margin: 0 0 1.4em;
	padding: 18px 22px;
	border: 1px solid var(--lijn);
	border-left: 4px solid var(--blauw);
	border-radius: 0 8px 8px 0;
	background: var(--licht);
}

.voorbeeldtekst p {
	margin: 0 0 .7em;
	font-size: .95rem;
}

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

.faq details {
	border-bottom: 1px solid var(--lijn);
}

.faq summary {
	position: relative;
	padding: 13px 32px 13px 0;
	color: var(--inkt);
	font-weight: 600;
	list-style: none;
	cursor: pointer;
}

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

.faq summary::after {
	content: "";
	position: absolute;
	right: 6px;
	top: 50%;
	width: 9px;
	height: 9px;
	margin-top: -7px;
	border-right: 2px solid var(--grijs);
	border-bottom: 2px solid var(--grijs);
	transform: rotate(45deg);
	transition: transform .2s ease;
}

.faq details[open] summary::after {
	transform: rotate(-135deg);
	margin-top: -2px;
}

.faq details p {
	margin: 0 0 14px;
	color: var(--zacht);
	font-size: .95rem;
}

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

.site-voet {
	padding: 48px 0 24px;
	background: var(--licht);
	border-top: 1px solid var(--lijn);
	color: var(--zacht);
	font-size: .9rem;
}

.voet-raster {
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr 1fr;
	gap: 36px;
}

.voet-merk p {
	margin: 14px 0 8px;
}

.site-voet h2 {
	margin-bottom: 10px;
	font-family: var(--letter);
	font-size: .92rem;
	font-weight: 600;
}

.site-voet ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-voet li {
	margin-bottom: 6px;
}

.site-voet a {
	color: var(--zacht);
	text-decoration: none;
}

.site-voet a:hover {
	color: var(--inkt);
	text-decoration: underline;
}

.voet-onder {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 24px;
	margin-top: 36px;
	padding-top: 18px;
	border-top: 1px solid var(--lijn-donker);
	font-size: .82rem;
}

.voet-onder p {
	margin: 0;
}

.voet-onder {
	align-items: center;
}

.voet-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 20px;
}

.site-voet .voet-links .btn,
.site-voet .voet-links .btn:hover {
	color: var(--wit);
	text-decoration: none;
}

/* Cookie-instellingen: een knop die eruitziet als de links ernaast. */
.voet-knop {
	padding: 0;
	font: inherit;
	color: var(--zacht);
	background: none;
	border: 0;
	cursor: pointer;
}

.voet-knop:hover {
	color: var(--inkt);
	text-decoration: underline;
}

/* --- Cookiebanner (inc/cookies.php, assets/js/cookies.js) ---------------- */

/* Zwevende kaart linksonder, geen muur over de pagina: de site blijft
   bruikbaar, ook zonder keuze. Weigeren is net zo groot als accepteren. */
.cookiebanner {
	position: fixed;
	left: 20px;
	bottom: 20px;
	z-index: 200;
	width: min(460px, calc(100% - 40px));
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	padding: 24px;
	color: var(--tekst);
	background: var(--wit);
	border: 1px solid var(--lijn);
	border-radius: 14px;
	box-shadow: 0 24px 60px rgba(15, 20, 48, .22);
}

.cookiebanner:focus {
	outline: none;
}

.cookiebanner h2 {
	margin: 0 0 8px;
	font-size: 1.2rem;
	color: var(--inkt);
}

.cookiebanner p {
	margin: 0 0 18px;
	font-size: .93rem;
	line-height: 1.55;
}

.cookie-knoppen {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.cookie-knoppen .btn {
	width: 100%;
}

.cookie-meer {
	margin-top: 14px;
	padding: 0;
	font: inherit;
	font-size: .93rem;
	font-weight: 600;
	color: var(--inkt);
	background: none;
	border: 0;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.cookie-meer:hover {
	color: var(--knop);
}

.cookie-opties {
	display: grid;
	gap: 14px;
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--lijn);
}

.cookie-opties[hidden] {
	display: none;
}

.cookie-optie {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.cookie-optie label {
	display: grid;
	gap: 2px;
	font-size: .9rem;
	line-height: 1.5;
	cursor: pointer;
}

.cookie-optie strong {
	color: var(--inkt);
}

.cookie-optie strong span {
	margin-left: 6px;
	font-size: .78rem;
	font-weight: 600;
	color: var(--groen);
}

/* Schakelaar in plaats van een los vinkje. */
.cookie-optie input {
	position: relative;
	flex: none;
	width: 42px;
	height: 24px;
	margin: 2px 0 0;
	appearance: none;
	background: var(--lijn-donker);
	border-radius: 999px;
	cursor: pointer;
	transition: background-color .2s ease;
}

.cookie-optie input::before {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	background: var(--wit);
	border-radius: 50%;
	box-shadow: 0 1px 3px rgba(15, 20, 48, .3);
	transition: transform .2s ease;
}

.cookie-optie input:checked {
	background: var(--knop);
}

.cookie-optie input:checked::before {
	transform: translateX(18px);
}

.cookie-optie input:disabled {
	cursor: not-allowed;
	opacity: .6;
}

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

.cookie-opslaan {
	width: 100%;
}

@media (max-width: 559px) {
	.cookiebanner {
		left: 12px;
		right: 12px;
		bottom: 12px;
		width: auto;
		max-height: calc(100vh - 24px);
		padding: 20px;
	}

	.cookie-knoppen {
		grid-template-columns: 1fr;
	}
}

/* --- Paginakop (binnenpagina's) ------------------------------------------ */

.paginakop {
	padding: 24px 0 36px;
	background: var(--inkt);
	color: rgba(255, 255, 255, .85);
	border-bottom: 4px solid var(--oranje);
}

.paginakop h1 {
	max-width: 24em;
	margin-top: 10px;
	color: var(--wit);
}

.paginakop-intro {
	max-width: 46em;
	font-size: 1.02rem;
}

.paginakop .zoekpaneel {
	margin-top: 22px;
	padding: 16px;
	border-radius: var(--rond);
	background: var(--wit);
	color: var(--tekst);
}

.paginakop-raster {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 32px;
	align-items: end;
}

.paginakop-artikel h1 {
	font-size: clamp(1.7rem, 3.2vw, 2.3rem);
}

.artikel-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 10px 0 0;
	font-size: .88rem;
}

.kruimels ol {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: .84rem;
}

.kruimels li:not(:last-child)::after {
	content: "/";
	margin-left: 6px;
	opacity: .5;
}

.kruimels a {
	color: inherit;
}

.kruimels a:hover {
	color: var(--wit);
}

.kruimels [aria-current] {
	opacity: .7;
}

.cijferstrook {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
}

.cijferstrook div {
	min-width: 140px;
	padding: 10px 14px;
	border-radius: 8px;
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .14);
}

.cijferstrook dt {
	color: rgba(255, 255, 255, .65);
	font-size: .74rem;
	text-transform: uppercase;
	letter-spacing: .05em;
}

.cijferstrook dd {
	margin: 2px 0 0;
	color: var(--wit);
	font-family: var(--kop);
	font-size: 1.2rem;
	font-weight: 600;
	line-height: 1.3;
}

.cijferstrook small {
	color: rgba(255, 255, 255, .65);
	font-family: var(--letter);
	font-size: .76rem;
}

/* --- Overzicht en filters ------------------------------------------------ */

.sectie-overzicht {
	padding-top: 32px;
}

.filterbalk {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 14px 24px;
	margin-bottom: 22px;
	padding: 16px 18px;
	border: 1px solid var(--lijn);
	border-radius: var(--rond);
	background: var(--licht);
}

.profielkeuze {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	border: 0;
}

.profielkeuze legend {
	width: 100%;
	margin-bottom: 4px;
	padding: 0;
	color: var(--zacht);
	font-size: .82rem;
	font-weight: 600;
}

.pil {
	position: relative;
	cursor: pointer;
}

.pil input {
	position: absolute;
	opacity: 0;
}

.pil span {
	display: inline-block;
	padding: .4em .9em;
	border: 1px solid var(--lijn-donker);
	border-radius: 6px;
	background: var(--wit);
	font-size: .9rem;
}

.pil:hover span {
	border-color: var(--inkt);
}

.pil input:checked + span {
	border-color: var(--inkt);
	background: var(--inkt);
	color: var(--wit);
}

.pil input:focus-visible + span {
	outline: 3px solid var(--blauw);
	outline-offset: 2px;
}

.filtervelden {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 10px;
}

.filterveld span {
	display: block;
	margin-bottom: 4px;
	color: var(--zacht);
	font-size: .82rem;
	font-weight: 600;
}

.filterveld select {
	min-height: 40px;
	padding: 0 10px;
	font-size: .92rem;
}

.js .filter-knop {
	display: none;
}

.resultaatkop {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 24px;
	margin-bottom: 16px;
}

.telling,
.telling-kop {
	margin: 0;
	font-size: 1rem;
}

.telling-kop {
	font-size: 1.2rem;
}

.link-wis {
	font-size: .9rem;
}

.paginering {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin-top: 32px;
}

.paginering a,
.paginering span {
	display: inline-grid;
	place-items: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--lijn-donker);
	border-radius: 6px;
	color: var(--inkt);
	text-decoration: none;
}

.paginering [aria-current] {
	border-color: var(--inkt);
	background: var(--inkt);
	color: var(--wit);
}

.paginering .punten {
	border: 0;
}

.leeg {
	max-width: 540px;
	margin: 16px auto;
	padding: 32px 24px;
	border: 1px dashed var(--lijn-donker);
	border-radius: var(--rond);
	text-align: center;
}

.leeg-icoon {
	display: inline-grid;
	place-items: center;
	width: 56px;
	height: 56px;
	margin-bottom: 10px;
	border-radius: 50%;
	background: var(--licht);
	color: var(--grijs);
}

/* --- Vacaturedetail ------------------------------------------------------ */

.vacaturekop {
	padding: 24px 0 40px;
	background: var(--inkt);
	color: rgba(255, 255, 255, .88);
	border-bottom: 4px solid var(--oranje);
}

.vacaturekop-raster {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: 40px;
	align-items: center;
	margin-top: 18px;
}

.vacaturekop h1 {
	margin-top: 8px;
	color: var(--wit);
	font-size: clamp(1.8rem, 3.4vw, 2.5rem);
}

.vacaturekop .kaart-labels {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.feitjes {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 26px;
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}

.feitjes li {
	display: flex;
	align-items: center;
	gap: 8px;
}

.feitjes .icoon {
	color: var(--oranje);
}

.feitje-salaris {
	flex-basis: 100%;
	color: var(--wit);
	font-family: var(--kop);
	font-size: 1.2rem;
	font-weight: 600;
}

.knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.vacaturekop-beeld img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--rond);
}

.detail-raster {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: 48px;
	align-items: start;
}

.detailblok {
	margin-bottom: 40px;
}

.tekst p,
.lange-tekst p {
	color: var(--tekst);
}

.usps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}

.usp {
	padding: 16px 18px;
	border: 1px solid var(--lijn);
	border-radius: var(--rond);
}

.usp-emoji {
	display: block;
	margin-bottom: 6px;
	font-size: 1.4rem;
	line-height: 1;
}

.usp h3 {
	margin-bottom: 4px;
	font-size: 1rem;
}

.usp p {
	margin: 0;
	color: var(--zacht);
	font-size: .92rem;
}

.werkweekblok {
	padding: 24px 26px;
	border: 1px solid var(--lijn);
	border-radius: var(--rond);
	background: var(--licht);
}

.werkweek-balk {
	display: flex;
	gap: 2px;
	height: 34px;
	margin: 16px 0;
	border-radius: 6px;
	overflow: hidden;
}

.werkweek-deel {
	display: grid;
	place-items: center;
	background: var(--kleur);
	color: var(--wit);
	font-size: .82rem;
	font-weight: 600;
}

.deel-jacht {
	--kleur: var(--oranje);
}

.deel-relatie {
	--kleur: var(--groen);
}

.deel-overig {
	--kleur: #5b6fb8;
}

.deel-overig.deel-2,
.deel-overig.deel-4 {
	--kleur: #8494cc;
}

.deel-overig.deel-5 {
	--kleur: #3f4f8f;
}

.deel-jacht.werkweek-deel {
	color: var(--inkt);
}

.werkweek-lijst {
	display: grid;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.werkweek-lijst li {
	display: flex;
	align-items: center;
	gap: 12px;
}

.werkweek-procent {
	flex-shrink: 0;
	min-width: 48px;
	padding: 1px 0;
	border-left: 4px solid var(--kleur);
	color: var(--inkt);
	font-weight: 600;
	text-align: center;
}

.vinklijst {
	display: grid;
	gap: 9px;
	margin: 0 0 1.2em;
	padding: 0;
	list-style: none;
}

.vinklijst li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.vinklijst .icoon {
	margin-top: 4px;
	color: var(--groen);
}

.vinklijst-klein {
	gap: 6px;
	font-size: .92rem;
}

.kortlijsten {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}

.kortlijsten h3 {
	font-size: .98rem;
}

.pillen {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pillen li {
	padding: .25em .7em;
	border-radius: 4px;
	font-size: .88rem;
}

.pillen-geel li {
	background: var(--goud-licht);
}

.pillen-blauw li {
	background: var(--blauw-licht);
	color: #1e3890;
}

/* Sollicitatieformulier onderaan de vacature (inc/sollicitatie.php) */
.sollicitatieblok {
	padding: 28px 28px 30px;
	border: 1px solid var(--lijn);
	border-top: 4px solid var(--oranje);
	border-radius: var(--rond);
	background: var(--licht);
}

.sollicitatieblok h2 {
	margin-bottom: .25em;
	font-size: 1.4rem;
}

.sollicitatie-intro {
	max-width: 36em;
	margin: 0 0 22px;
	color: var(--zacht);
}

.formulier-raster {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px 18px;
}

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

.formveld label {
	display: block;
	margin-bottom: 5px;
	color: var(--inkt);
	font-size: .9rem;
	font-weight: 600;
}

.optioneel {
	color: var(--zacht);
	font-weight: 400;
}

.formveld input[type="text"],
.formveld input[type="email"],
.formveld input[type="tel"],
.formveld textarea {
	width: 100%;
	min-height: 46px;
	padding: 10px 12px;
	border: 1px solid var(--lijn-donker);
	border-radius: 6px;
	background: var(--wit);
	color: var(--inkt);
	font: inherit;
	font-size: 1rem;
}

.formveld textarea {
	min-height: 120px;
	line-height: 1.5;
	resize: vertical;
}

.formveld input[type="file"] {
	width: 100%;
	padding: 10px;
	border: 1px dashed var(--lijn-donker);
	border-radius: 6px;
	background: var(--wit);
	color: var(--tekst);
	font: inherit;
	font-size: .92rem;
}

.formveld input[type="file"]::file-selector-button {
	margin-right: 12px;
	padding: 7px 14px;
	border: 1px solid var(--inkt);
	border-radius: 6px;
	background: var(--wit);
	color: var(--inkt);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.formveld input:not([type="checkbox"]):focus,
.formveld textarea:focus {
	outline: none;
	border-color: var(--blauw);
	box-shadow: 0 0 0 3px var(--blauw-licht);
}

.formveld [aria-invalid="true"] {
	border-color: #b42318;
}

.veldhint {
	margin: 5px 0 0;
	color: var(--zacht);
	font-size: .84rem;
}

.veldfout {
	margin: 5px 0 0;
	color: #b42318;
	font-size: .86rem;
	font-weight: 600;
}

.formveld-vink {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: 20px;
}

.formveld-vink input {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin: 3px 0 0;
	accent-color: var(--knop);
}

.formveld-vink label {
	margin: 0;
	color: var(--tekst);
	font-size: .92rem;
	font-weight: 400;
}

.formveld-val {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.formulier-voet {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
	margin-top: 22px;
}

.formulier-voet p {
	margin: 0;
	color: var(--zacht);
	font-size: .86rem;
}

.formulier-voet .btn:disabled {
	opacity: .7;
	cursor: progress;
}

.formulier-melding {
	margin: 0 0 22px;
	padding: 14px 16px;
	border: 1px solid #f1c0ba;
	border-left: 4px solid #b42318;
	border-radius: 6px;
	background: #fdf1f0;
	color: var(--inkt);
}

.formulier-melding p {
	margin: 0 0 .4em;
	font-weight: 600;
}

.formulier-melding p:last-child {
	margin-bottom: 0;
}

.formulier-melding .melding-extra {
	font-weight: 400;
}

.formulier-melding ul {
	margin: 0;
	padding-left: 1.2em;
}

.sollicitatieblok.is-verstuurd {
	border-top-color: var(--groen);
}

.sollicitatie-bedankt p {
	max-width: 38em;
}

.sollicitatie-bedankt p:last-child {
	margin-bottom: 0;
}

.bedankt-icoon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-bottom: 12px;
	border-radius: 50%;
	background: var(--groen-licht);
	color: var(--groen);
}

.detail-zij {
	position: sticky;
	top: 90px;
	display: grid;
	gap: 16px;
}

.dealkaart {
	padding: 22px;
	border: 1px solid var(--lijn);
	border-top: 4px solid var(--inkt);
	border-radius: var(--rond);
	background: var(--wit);
	box-shadow: var(--schaduw);
}

.dealkaart h2,
.zijblok h2 {
	font-size: 1.05rem;
}

.dealkaart dl {
	margin: 0 0 16px;
	font-size: .94rem;
}

.dealkaart dl div {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 7px 0;
	border-bottom: 1px solid var(--lijn);
}

.dealkaart dt {
	color: var(--zacht);
}

.dealkaart dd {
	margin: 0;
	color: var(--inkt);
	font-weight: 600;
	text-align: right;
}

.dealkaart dd small {
	display: block;
	color: var(--grijs);
	font-weight: 400;
}

.dealkaart .btn {
	margin-top: 18px;
}

.dealkaart-noot {
	margin: 10px 0 0;
	color: var(--grijs);
	font-size: .82rem;
	text-align: center;
}

.zijblok {
	padding: 20px;
	border: 1px solid var(--lijn);
	border-radius: var(--rond);
	background: var(--licht);
}

.zijblok p {
	font-size: .92rem;
}

.zijblok-accent {
	border-left: 4px solid var(--oranje);
}

.recruiter {
	display: flex;
	gap: 14px;
}

.recruiter-avatar {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--inkt);
	color: var(--wit);
	font-weight: 600;
}

.recruiter p {
	margin-bottom: 6px;
}

.link-bel {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--inkt);
	font-weight: 600;
	text-decoration: none;
}

.link-bel:hover {
	text-decoration: underline;
}

.deelknoppen {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.deelknoppen a,
.deelknoppen button {
	padding: .35em .85em;
	border: 1px solid var(--lijn-donker);
	border-radius: 6px;
	background: var(--wit);
	color: var(--inkt);
	font: inherit;
	font-size: .88rem;
	text-decoration: none;
	cursor: pointer;
}

.deelknoppen a:hover,
.deelknoppen button:hover {
	border-color: var(--inkt);
}

.plakbalk {
	display: none;
}

/* --- Tekstpagina's ------------------------------------------------------- */

.inhoud-raster {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 48px;
	align-items: start;
}

.lange-tekst {
	max-width: 740px;
}

.lange-tekst h2 {
	margin-top: 1.5em;
	font-size: clamp(1.25rem, 2.2vw, 1.5rem);
}

.lange-tekst h2:first-child {
	margin-top: 0;
}

.inhoud-zij {
	position: sticky;
	top: 90px;
	display: grid;
	gap: 16px;
}

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

.linklijst li {
	padding: 7px 0;
	border-bottom: 1px solid var(--lijn);
}

.linklijst li:last-child {
	border-bottom: 0;
}

.linklijst a {
	color: var(--inkt);
	text-decoration: none;
}

.linklijst a:hover {
	color: var(--blauw);
	text-decoration: underline;
}

.inhoudsopgave {
	margin-bottom: 32px;
	padding: 18px 22px;
	border-left: 4px solid var(--oranje);
	background: var(--licht);
}

.inhoudsopgave h2 {
	margin: 0 0 8px !important;
	font-size: 1rem !important;
}

.inhoudsopgave ol {
	margin: 0;
	padding-left: 1.2em;
}

.functiekaarten {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr));
	gap: 18px;
}

.functiekaart {
	display: flex;
	flex-direction: column;
	padding: 22px;
	border: 1px solid var(--lijn);
	border-radius: var(--rond);
	background: var(--wit);
	scroll-margin-top: 100px;
}

.functiekaart:target {
	border-color: var(--oranje);
	box-shadow: var(--schaduw);
}

.functiekaart-kop {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.functiekaart h2 {
	font-size: 1.25rem;
}

.functiekaart > p {
	color: var(--zacht);
}

.functiekaart-feiten {
	flex: 1;
	margin: 0 0 16px;
	font-size: .9rem;
}

.functiekaart-feiten div {
	display: grid;
	grid-template-columns: 9.5em 1fr;
	gap: 8px;
	padding: 5px 0;
	border-top: 1px solid var(--lijn);
}

.functiekaart-feiten dt {
	color: var(--grijs);
}

.functiekaart-feiten dd {
	margin: 0;
	font-weight: 600;
	overflow-wrap: anywhere;
}

.functiekaart-leeg {
	color: var(--grijs);
}

.tabel-wrap {
	overflow-x: auto;
	border: 1px solid var(--lijn);
	border-radius: var(--rond);
	background: var(--wit);
}

.tabel {
	width: 100%;
	min-width: 600px;
	border-collapse: collapse;
	font-size: .92rem;
}

.tabel th,
.tabel td {
	padding: 11px 16px;
	border-bottom: 1px solid var(--lijn);
	text-align: left;
	vertical-align: top;
}

.tabel thead th {
	background: var(--inkt);
	color: var(--wit);
	font-weight: 600;
}

.tabel tbody tr:last-child th,
.tabel tbody tr:last-child td {
	border-bottom: 0;
}

.tabel tbody th a {
	color: var(--inkt);
}

/* --- Responsief ---------------------------------------------------------- */

@media (max-width: 1080px) {
	.kop-knop {
		display: none;
	}

	.detail-raster,
	.inhoud-raster {
		grid-template-columns: 1fr;
	}

	.detail-zij,
	.inhoud-zij {
		position: static;
	}

	.voet-raster,
	.zoekop {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 900px) {
	.nav-knop {
		display: flex;
	}

	.hoofdnav {
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		display: none;
		padding: 8px 16px 16px;
		background: var(--wit);
		border-bottom: 1px solid var(--lijn);
		box-shadow: var(--schaduw);
	}

	.hoofdnav.is-open {
		display: block;
	}

	.hoofdnav ul {
		flex-direction: column;
		align-items: stretch;
	}

	.hoofdnav a {
		padding: 12px 4px;
		border-bottom: 1px solid var(--lijn);
	}

	.nav-mobiel-knop {
		display: block;
		margin-top: 10px;
	}

	.nav-mobiel-knop .btn {
		width: 100%;
		border-bottom: 0;
	}

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

	.veld-wat,
	.btn-zoek {
		grid-column: 1 / -1;
	}

	.twee-kolommen,
	.profielband-raster,
	.aanbod-raster,
	.vacaturekop-raster,
	.paginakop-raster,
	.kortlijsten,
	.testpagina-raster,
	.profielkaarten {
		grid-template-columns: 1fr;
		gap: 28px;
	}

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

	.vacaturekop-beeld {
		max-width: 420px;
	}

	.vacaturekop-beeld img {
		aspect-ratio: 16 / 9;
	}

	/* Vaste sollicitatiebalk onderin op mobiel */
	.plakbalk {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 40;
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
		background: var(--wit);
		border-top: 1px solid var(--lijn);
		box-shadow: 0 -6px 18px rgba(15, 20, 48, .12);
		transform: translateY(110%);
		transition: transform .25s ease;
	}

	.plakbalk.zichtbaar {
		transform: translateY(0);
	}

	.plakbalk-tekst {
		display: grid;
		min-width: 0;
		flex: 1;
		line-height: 1.3;
	}

	.plakbalk-tekst strong {
		overflow: hidden;
		color: var(--inkt);
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: .92rem;
	}

	.plakbalk-tekst span {
		color: var(--zacht);
		font-size: .82rem;
	}

	.pagina-vacature .site-voet {
		padding-bottom: 96px;
	}
}

@media (max-width: 640px) {
	.container {
		padding: 0 16px;
	}

	.logo img {
		width: 156px;
	}

	.kop-inner {
		min-height: 62px;
	}

	.topbalk-inner {
		justify-content: center;
	}

	.topbalk-moeder {
		display: none;
	}

	.zoekvelden,
	.test-keuzes {
		grid-template-columns: 1fr;
	}

	.functiebalken a {
		grid-template-columns: minmax(0, 1.3fr) 1fr 2.6em;
		padding: 3px 0;
	}

	.fb-naam {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.sectie {
		padding: 40px 0;
	}

	.zoekop,
	.voet-raster {
		grid-template-columns: 1fr;
	}

	.werkweekblok,
	.sollicitatieblok,
	.testblok {
		padding: 20px 18px;
	}

	.formulier-raster {
		grid-template-columns: 1fr;
	}

	.formulier-voet .btn {
		width: 100%;
	}

	.werkweek-deel {
		font-size: .72rem;
	}

	.filtervelden {
		display: grid;
		grid-template-columns: 1fr 1fr;
		width: 100%;
	}

	.functiekaart {
		padding: 20px 18px;
	}

	.functiekaart-feiten div {
		grid-template-columns: 1fr;
		gap: 0;
	}
}

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