/* ------------------------------------------------------------------
   De bovenkant van de site
   Eén compacte desktopregel voor merk, navigatie en acties. Op kleinere
   schermen verhuist de navigatie naar de lade.
   ------------------------------------------------------------------ */

.nlpa-omhullend {
	max-width: var(--nlpa-breed);
	margin-inline: auto;
	padding-inline: var(--nlpa-marge);
}

.nlpa-bovenkant {
	position: sticky;
	top: 0;
	z-index: 60;
	background: var(--wp--preset--color--wit);
	border-bottom: 1px solid var(--wp--preset--color--rand);
}

/* ----------------------------------------------------------- hoofdregel */

.nlpa-bovenkant__binnen {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: clamp(14px, 1.8vw, 24px);
	max-width: 1360px;
	min-height: 76px;
	transition: min-height 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.nlpa-merk {
	display: block;
	flex: none;
	line-height: 0;
}

.nlpa-merk img {
	width: clamp(118px, 9.5vw, 128px);
	height: auto;
	transition: width 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.nlpa-bovenkant__acties {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
}

.nlpa-bovenkant__tel {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 700;
	font-size: 15px;
	color: var(--wp--preset--color--paars);
	text-decoration: none;
	white-space: nowrap;
	min-height: 44px;
	padding: 10px 6px;
}

.nlpa-bovenkant__tel:hover {
	color: var(--wp--preset--color--paars-diep);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.nlpa-bovenkant__acties .nlpa-knop--accent {
	min-height: 44px;
	padding: 11px 14px;
	font-size: 13px;
}

/* --------------------------------------------------------------- zoeken */

.nlpa-zoeken__knop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 44px;
	min-height: 44px;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 50%;
	background: transparent;
	color: var(--wp--preset--color--paars);
	cursor: pointer;
	transition: background-color 0.15s ease-out, border-color 0.15s ease-out;
}

.nlpa-zoeken__knop svg {
	width: 22px;
	height: 22px;
}

.nlpa-zoeken__knop:hover,
.nlpa-zoeken__knop:focus-visible,
.nlpa-zoeken__knop[aria-expanded="true"] {
	background: var(--wp--preset--color--paneel);
	border-color: var(--wp--preset--color--rand);
}

.nlpa-zoeken {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 1;
	background: var(--wp--preset--color--wit);
	border-top: 1px solid var(--wp--preset--color--rand);
	border-bottom: 1px solid var(--wp--preset--color--rand);
	box-shadow: 0 18px 34px -28px rgba(64, 31, 78, 0.55);
}

.nlpa-zoeken[hidden] {
	display: none;
}

.nlpa-zoeken.is-open {
	animation: nlpa-zoeken-in 0.18s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes nlpa-zoeken-in {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.nlpa-zoeken__binnen {
	padding-block: 22px 24px;
}

.nlpa-zoeken__formulier {
	max-width: 920px;
	margin-inline: auto;
}

.nlpa-zoeken__label {
	display: block;
	margin-bottom: 8px;
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 700;
	color: var(--wp--preset--color--paars-diep);
}

.nlpa-zoeken__regel {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 10px;
}

.nlpa-zoeken__veld {
	width: 100%;
	min-height: 48px;
	padding: 11px 16px;
	border: 1px solid var(--wp--preset--color--rand);
	border-radius: var(--nlpa-radius-knop);
	font: inherit;
	color: var(--wp--preset--color--tekst);
	background: var(--wp--preset--color--wit);
}

.nlpa-zoeken__veld:focus {
	outline: 3px solid rgba(119, 40, 124, 0.18);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--paars);
}

.nlpa-zoeken__verzenden {
	min-width: 116px;
}

/* ------------------------------------------------------------- knoppen */

.nlpa-knop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 12px 26px;
	border: 0;
	border-radius: var(--nlpa-radius-knop);
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 700;
	font-size: 15px;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	background: var(--wp--preset--color--paars);
	color: var(--wp--preset--color--wit);
	transition: background-color 0.15s cubic-bezier(0.22, 1, 0.36, 1);
}

.nlpa-knop:hover {
	background: var(--wp--preset--color--paars-diep);
	color: var(--wp--preset--color--wit);
}

/* Accentknoppen gebruiken dezelfde witte tekstkleur als alle andere CTA's. */
.nlpa-knop--accent {
	background: var(--nlpa-olijf-knop);
	color: var(--wp--preset--color--wit);
	white-space: nowrap;
}

.nlpa-knop--accent:hover {
	background: var(--nlpa-olijf-knop-hover);
	color: var(--wp--preset--color--wit);
}

/* ---------------------------------------------------------- hoofdnavigatie */

.nlpa-bovenkant .nlpa-menu {
	justify-self: stretch;
	align-self: stretch;
	display: flex;
	align-items: stretch;
	width: 100%;
	min-width: 0;
}

.nlpa-menu__lijst {
	display: flex;
	justify-content: space-between;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 0;
	width: 100%;
	height: 100%;
}

.nlpa-menu__item {
	position: static;
}

.nlpa-menu__item--n0 {
	display: flex;
	align-items: stretch;
	/* De gewone panelen hangen onder hun eigen ingang. Alleen het brede paneel
	   ontleent zijn positie aan de balk, dat staat hieronder. */
	position: relative;
}

.nlpa-menu__item--mega {
	position: static;
}

.nlpa-menu__link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 9px 6px;
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 600;
	font-size: 14.5px;
	color: var(--wp--preset--color--tekst);
	text-decoration: none;
	position: relative;
}

/* De zes ingangen vormen samen het rustige midden van de header. */
.nlpa-menu__item--n0 > .nlpa-menu__link {
	white-space: nowrap;
	font-size: clamp(11.5px, 0.95vw, 13.5px);
	padding-inline: 2px;
}

/* De zwierboog uit het logo als markering onder het actieve item.
   Dat is het merksignaal, geen streepje. */
.nlpa-menu__item--n0 > .nlpa-menu__link > span::after {
	content: "";
	position: absolute;
	left: 6px;
	right: 6px;
	bottom: 8px;
	height: 4px;
	background: no-repeat center / 100% 100%
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 6' preserveAspectRatio='none'%3E%3Cpath d='M0 5.2C22 1.2 62 0.4 100 0.8' fill='none' stroke='%23B8B233' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
	opacity: 0;
	transform: translateY(3px);
	transition: opacity 0.18s ease-out, transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}

.nlpa-menu__item--n0:hover > .nlpa-menu__link > span::after,
.nlpa-menu__item--n0:focus-within > .nlpa-menu__link > span::after,
.nlpa-menu__item--n0.is-open > .nlpa-menu__link > span::after,
.nlpa-menu__item--n0.is-actief > .nlpa-menu__link > span::after {
	opacity: 1;
	transform: translateY(0);
}

.nlpa-menu__item--n0:hover > .nlpa-menu__link,
.nlpa-menu__item--n0.is-actief > .nlpa-menu__link {
	color: var(--wp--preset--color--paars);
}

.nlpa-menu__opener {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	min-height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--tekst-grijs);
	cursor: pointer;
}

.nlpa-menu__opener svg {
	width: 11px;
	transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.nlpa-menu__item--paneel.is-open > .nlpa-menu__opener svg {
	transform: rotate(180deg);
}

.nlpa-menu__item--paneel.is-open > .nlpa-menu__opener,
.nlpa-menu__item--paneel.is-open > .nlpa-menu__link {
	color: var(--wp--preset--color--paars);
}

/* --------------------------------------------------------------- paneel

   Het gewone paneel hangt als een compacte lijst onder zijn eigen ingang.
   Over de volle breedte uitrekken voor vier of zeven regels gaf een leeg vlak
   met losse woorden erin. Alleen NLP Opleidingen krijgt de volle breedte,
   want daar staan zes groepen naast elkaar.
   ------------------------------------------------------------------------ */

.nlpa-paneel {
	position: absolute;
	left: -10px;
	top: 100%;
	z-index: 2;
	display: none;
	width: max-content;
	min-width: 264px;
	max-width: 340px;
	padding: 8px;
	background: var(--wp--preset--color--wit);
	border: 1px solid var(--wp--preset--color--rand);
	border-top: 0;
	border-radius: 0 0 var(--nlpa-radius-kaart) var(--nlpa-radius-kaart);
	box-shadow: 0 20px 36px -22px rgba(64, 31, 78, 0.5);
}

/* De laatste ingangen staan dicht bij de rechterrand, daar klapt het paneel
   naar binnen open in plaats van naar buiten. */
.nlpa-menu__lijst > .nlpa-menu__item--n0:nth-last-child(-n + 2) > .nlpa-paneel {
	left: auto;
	right: -10px;
}

.nlpa-menu__item--paneel.is-open > .nlpa-paneel {
	display: block;
	animation: nlpa-paneel-in 0.18s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes nlpa-paneel-in {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.nlpa-paneel__lijst {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1px;
}

.nlpa-paneel__lijst > li {
	min-width: 0;
}

/* Een item dat niet bij de rij hoort, zoals de blog onder de kennisbank of de
   praktische ingangen onder NLP Uitgelegd, staat onder een haarlijn. */
.nlpa-paneel__lijst > .nlpa-los {
	margin-top: 7px;
	padding-top: 7px;
	border-top: 1px solid var(--wp--preset--color--rand);
}

.nlpa-paneel__lijst > .nlpa-menu__item--paneel {
	display: block;
}

.nlpa-paneel__kolomkop {
	display: block;
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	/* De merk-olijf haalt op wit maar 2,2:1 en is als kleine tekst onleesbaar.
	   Voor tekst gebruiken we een donkerder variant van dezelfde kleur. */
	color: var(--wp--preset--color--olijf-tekst);
	padding: 10px 12px 6px;
}

/* Elke regel is een vlak dat oplicht, zo zie je waar je bent zonder dat er
   randen of doosjes bij hoeven. */
.nlpa-paneel__lijst .nlpa-menu__link {
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 44px;
	padding: 9px 12px;
	border-radius: 4px;
	font-weight: 600;
	font-size: 15px;
	line-height: 1.3;
	color: var(--wp--preset--color--tekst);
	transition: background-color 0.12s ease-out, color 0.12s ease-out;
}

.nlpa-paneel__lijst .nlpa-menu__link:hover,
.nlpa-paneel__lijst .nlpa-menu__link:focus-visible {
	background: rgba(119, 40, 124, 0.08);
	color: var(--wp--preset--color--paars);
}

.nlpa-paneel__lijst .nlpa-menu__link[aria-current] {
	color: var(--wp--preset--color--paars);
}

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

.nlpa-paneel__sublijst .nlpa-menu__link {
	font-weight: 500;
	font-size: 14.5px;
	color: var(--wp--preset--color--tekst-grijs);
}

/* -------------------------------------------------- hamburger en lade */

.nlpa-hamburger {
	display: none;
	align-items: center;
	gap: 9px;
	min-height: 44px;
	padding: 10px 14px;
	border: 1px solid var(--wp--preset--color--rand);
	border-radius: var(--nlpa-radius-knop);
	background: none;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 700;
	font-size: 14px;
	color: var(--wp--preset--color--paars);
}

.nlpa-hamburger__streepjes {
	display: grid;
	gap: 4px;
	width: 18px;
}

.nlpa-hamburger__streepjes span {
	display: block;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.15s;
}

.nlpa-hamburger[aria-expanded="true"] .nlpa-hamburger__streepjes span:nth-child(1) {
	transform: translateY(6px) rotate(45deg);
}

.nlpa-hamburger[aria-expanded="true"] .nlpa-hamburger__streepjes span:nth-child(2) {
	opacity: 0;
}

.nlpa-hamburger[aria-expanded="true"] .nlpa-hamburger__streepjes span:nth-child(3) {
	transform: translateY(-6px) rotate(-45deg);
}

.nlpa-lade {
	position: fixed;
	inset: 0;
	z-index: 70;
	background: var(--wp--preset--color--wit);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 96px var(--nlpa-marge) 40px;
}

.nlpa-lade[hidden] {
	display: none;
}

.nlpa-lade__binnen {
	max-width: 560px;
	margin-inline: auto;
}

.nlpa-lade__lijst,
.nlpa-lade .nlpa-paneel__lijst,
.nlpa-lade .nlpa-paneel__sublijst {
	list-style: none;
	margin: 0;
	padding: 0;
	display: block;
}

.nlpa-lade .nlpa-menu__item--n0 {
	display: block;
	border-bottom: 1px solid var(--wp--preset--color--rand);
}

.nlpa-lade .nlpa-menu__item--n0 > .nlpa-menu__link {
	font-size: 19px;
	font-weight: 700;
	padding: 16px 0;
	min-height: 56px;
}

.nlpa-lade .nlpa-menu__item--n0 > .nlpa-menu__link > span::after {
	display: none;
}

/* In de lade staat de opener rechts naast de link. */
.nlpa-lade .nlpa-menu__item--n0 {
	position: relative;
}

.nlpa-lade .nlpa-menu__opener {
	position: absolute;
	top: 0;
	right: 0;
	width: 56px;
	min-height: 56px;
}

.nlpa-lade .nlpa-paneel {
	position: static;
	display: none;
	width: auto;
	min-width: 0;
	max-width: none;
	box-shadow: none;
	border: 0;
	border-radius: 0;
	padding: 0 0 14px;
	background: none;
}

.nlpa-lade .nlpa-menu__item--paneel.is-open > .nlpa-paneel {
	display: block;
}

.nlpa-lade .nlpa-paneel__lijst {
	padding-inline: 0;
	gap: 0;
}

.nlpa-lade .nlpa-paneel__lijst .nlpa-menu__link {
	padding: 12px 10px 12px 16px;
	min-height: 48px;
	font-size: 16px;
}

.nlpa-lade .nlpa-paneel__kolomkop {
	margin-top: 10px;
	padding-left: 16px;
	border-bottom: 0;
}

.nlpa-lade .nlpa-paneel__sublijst .nlpa-menu__link {
	padding-left: 30px;
}

.nlpa-lade__voet {
	display: grid;
	gap: 14px;
	justify-items: center;
	margin-top: 30px;
}

.nlpa-lade__belofte {
	max-width: 34ch;
	margin: 0 0 2px;
	text-align: center;
	font-size: 14px;
	line-height: 1.55;
	color: var(--wp--preset--color--tekst-grijs);
}

.nlpa-lade__tel {
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 700;
	font-size: 17px;
	color: var(--wp--preset--color--paars);
	text-decoration: none;
	padding: 10px;
}

/* -------------------------------------------- ingeklapt bij het scrollen */

.nlpa-bovenkant.is-gekrompen .nlpa-bovenkant__binnen {
	min-height: 64px;
}

.nlpa-bovenkant.is-gekrompen .nlpa-merk img {
	width: clamp(108px, 9vw, 118px);
}

/* ------------------------------------------------------------ formaten */

/* Tussen 1180 en 1300 pixels blijft de volledige desktopheader compact. */
@media (max-width: 1300px) {
	.nlpa-bovenkant__binnen {
		gap: 12px;
	}
	.nlpa-bovenkant .nlpa-merk img {
		width: 112px;
	}
	.nlpa-bovenkant__acties {
		gap: 6px;
	}
	.nlpa-bovenkant__tel {
		gap: 5px;
		padding-inline: 2px;
		font-size: 13px;
	}
	.nlpa-bovenkant__acties .nlpa-knop--accent {
		padding-inline: 10px;
		font-size: 12px;
	}
	.nlpa-menu__item--n0 > .nlpa-menu__link {
		padding-inline: 0;
		font-size: 11.5px;
	}
}

@media (max-width: 1180px) {
	.nlpa-bovenkant__tel {
		display: none;
	}
}

@media (max-width: 1060px) {
	.nlpa-bovenkant__binnen {
		display: flex;
		gap: 16px;
		min-height: 64px;
	}
	.nlpa-bovenkant .nlpa-menu {
		display: none;
	}
	.nlpa-hamburger {
		display: inline-flex;
	}
	.nlpa-bovenkant .nlpa-merk img {
		width: 120px;
	}
}

@media (max-width: 720px) {
	/* Alleen in de bovenbalk, waar de knop naast het logo niet meer past. In de
	   lade moet hij juist blijven staan, daar is hij de enige actie. */
	.nlpa-bovenkant__acties .nlpa-knop--accent {
		display: none;
	}
}

@media (max-width: 480px) {
	.nlpa-bovenkant__tel {
		font-size: 0;
		gap: 0;
		padding: 10px;
	}
	.nlpa-bovenkant__tel svg {
		width: 20px;
		height: 20px;
	}
	.nlpa-zoeken__binnen {
		padding-block: 18px 20px;
	}
	.nlpa-zoeken__regel {
		grid-template-columns: 1fr;
	}
	.nlpa-zoeken__verzenden {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nlpa-menu__link > span::after,
	.nlpa-menu__opener svg,
	.nlpa-merk img,
	.nlpa-bovenkant__binnen,
	.nlpa-hamburger__streepjes span,
	.nlpa-zoeken__knop {
		transition: none;
	}
	.nlpa-menu__item--paneel.is-open > .nlpa-paneel,
	.nlpa-zoeken.is-open {
		animation: none;
	}
}

/* ------------------------------------------------------- kop van de lade */

.nlpa-lade {
	padding-top: 0;
}

.nlpa-lade__kop {
	position: sticky;
	top: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 0 16px;
	margin-bottom: 8px;
	background: var(--wp--preset--color--wit);
	border-bottom: 1px solid var(--wp--preset--color--rand);
}

.nlpa-lade__kop .nlpa-merk img {
	width: 120px;
}

.nlpa-lade__sluiten {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 10px 16px;
	border: 1px solid var(--wp--preset--color--rand);
	border-radius: var(--nlpa-radius-knop);
	background: none;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 700;
	font-size: 14px;
	color: var(--wp--preset--color--paars);
}

.nlpa-lade__sluiten:hover {
	background: var(--wp--preset--color--paneel);
}


/* Op de smalste schermen liep de bovenkant twee pixels over de rand. */
@media (max-width: 400px) {
	.nlpa-merk img {
		width: 108px;
	}
	.nlpa-bovenkant__acties {
		gap: 8px;
	}
	.nlpa-hamburger {
		padding-inline: 11px;
	}
	.nlpa-hamburger__woord {
		display: none;
	}
}

/* ------------------------------------------------------------------
   Het paneel onder NLP Opleidingen
   Drie lagen met aflopend gewicht: de route, de varianten eronder, en
   rechts de eerstvolgende start als donker vlak tot aan de rand.
   ------------------------------------------------------------------ */

/* Het brede paneel loopt van rand tot rand en staat op een zachte ondergrond,
   zodat de zes vakken erop lichten. */
.nlpa-paneel--rijk {
	left: 0;
	right: 0;
	width: auto;
	min-width: 0;
	max-width: none;
	overflow-x: clip;
	padding: 0;
	background: var(--wp--preset--color--paneel);
	border: 0;
	border-top: 1px solid var(--wp--preset--color--rand);
	border-radius: 0;
	box-shadow: 0 22px 40px -24px rgba(64, 31, 78, 0.45);
}

.nlpa-paneel__binnen {
	max-width: var(--nlpa-breed);
	margin-inline: auto;
	padding-left: var(--nlpa-marge);
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(280px, 0.44fr);
	align-items: stretch;
}

.nlpa-paneel__hoofd {
	padding: 28px 40px 30px 0;
}

.nlpa-paneel__label {
	margin: 0 0 16px;
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--olijf-tekst);
}

/* --------------------------------------------------------- de zes groepen */

/* Zes vaste vakken in plaats van doorlopende kolommen. Bij doorlopende kolommen
   begint een groep halverwege een kolom en verliest het oog de structuur.
   De vakken staan wit op de zachte ondergrond, met een haarlijn ertussen. Dat
   verschil in kleur doet het werk dat een streepje alleen niet doet. */
.nlpa-mgroepen {
	display: grid;
	/* De introductie- en coachkolom hebben korte labels. De extra ruimte gaat
	   naar Master Practitioner, zodat de acht-daagse variant op één regel past. */
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1.2fr);
	gap: 1px;
	background: var(--wp--preset--color--rand);
	border: 1px solid var(--wp--preset--color--rand);
	border-radius: var(--nlpa-radius-kaart);
	overflow: hidden;
}

.nlpa-mgroep {
	background: var(--wp--preset--color--wit);
	padding: 17px 20px 15px;
}

/* De kop moet duidelijk zwaarder wegen dan de regels eronder. Andersom leest
   het als één lap tekst. */
.nlpa-mgroep__kop {
	margin: 0 0 10px;
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 800;
	font-size: 15.5px;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--paars-diep);
	position: relative;
	padding-bottom: 9px;
}

/* De zwierboog uit het logo onder de kop van de groep. */
.nlpa-mgroep__kop::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 30px;
	height: 4px;
	background: no-repeat center / 100% 100%
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 4' preserveAspectRatio='none'%3E%3Cpath d='M0 3.2C7 1 19 .6 30 1' fill='none' stroke='%23B8B233' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

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

.nlpa-mgroep__lijst a {
	display: flex;
	align-items: center;
	min-height: 34px;
	margin-inline: -8px;
	padding: 5px 8px;
	border-radius: 4px;
	font-family: var(--wp--preset--font-family--tekst);
	font-weight: 500;
	font-size: 15px;
	line-height: 1.35;
	color: var(--wp--preset--color--tekst);
	text-decoration: none;
	transition: background-color 0.12s ease-out, color 0.12s ease-out;
}

.nlpa-mgroep__lijst a:hover,
.nlpa-mgroep__lijst a:focus-visible {
	background: rgba(119, 40, 124, 0.08);
	color: var(--wp--preset--color--paars);
}

.nlpa-paneel__hulplinks {
	display: flex;
	justify-content: flex-end;
	margin-top: 12px;
}

.nlpa-paneel__hulplinks a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 8px 14px;
	border: 1px solid var(--wp--preset--color--rand);
	border-radius: var(--nlpa-radius-knop);
	background: var(--wp--preset--color--wit);
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 700;
	font-size: 13.5px;
	color: var(--wp--preset--color--paars);
	text-decoration: none;
}

.nlpa-paneel__hulplinks a:hover,
.nlpa-paneel__hulplinks a:focus-visible {
	background: rgba(119, 40, 124, 0.08);
	border-color: rgba(119, 40, 124, 0.28);
}

/* ------------------------------------------------ de eerstvolgende start */

.nlpa-mstart {
	position: relative;
	background: var(--wp--preset--color--paars-diep) no-repeat center / cover;
	display: flex;
	align-items: center;
	/* Loopt door tot de rechterrand van het scherm, ook al is het paneel
	   binnen de kolombreedte uitgelijnd. */
	margin-right: calc((100vw - min(100vw, var(--nlpa-breed))) / -2 - var(--nlpa-marge));
	padding-right: calc((100vw - min(100vw, var(--nlpa-breed))) / 2 + var(--nlpa-marge));
}

/* Dezelfde paarse laag als de hero, zodat de foto leesbaar blijft. */
.nlpa-mstart__laag {
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, rgba(64, 31, 78, 0.82) 0%, rgba(64, 31, 78, 0.97) 62%);
}

.nlpa-mstart__inhoud {
	position: relative;
	z-index: 2;
	padding: 26px 0 28px 30px;
	color: var(--wp--preset--color--wit);
}

.nlpa-mstart__label {
	margin: 0 0 6px;
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--olijf);
}

.nlpa-mstart__titel {
	margin: 0 0 4px;
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 800;
	font-size: 21px;
	line-height: 1.2;
	color: var(--wp--preset--color--wit);
}

.nlpa-mstart__wanneer {
	margin: 0;
	font-size: 14.5px;
	color: var(--nlpa-tekst-op-donker-zacht);
}

.nlpa-mstart__melding {
	display: inline-block;
	margin-top: 10px;
	padding: 4px 12px;
	border: 1px solid rgba(184, 178, 51, 0.6);
	border-radius: 50px;
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 600;
	font-size: 11.5px;
	color: var(--wp--preset--color--olijf);
}

.nlpa-mstart__knop {
	margin-top: 18px;
	font-size: 14px;
	padding: 11px 22px;
}

.nlpa-mstart--leeg {
	background-image: none;
}

@media (max-width: 1060px) {
	.nlpa-paneel__binnen {
		grid-template-columns: 1fr;
		padding-inline: 0;
	}
	.nlpa-paneel__hoofd {
		padding: 4px 0 20px;
	}
	.nlpa-mgroepen {
		grid-template-columns: 1fr;
		gap: 1px;
		border-radius: 0;
		border-inline: 0;
	}
	.nlpa-mgroep {
		padding: 14px 4px 12px;
	}
	/* Eén kolom, dus niets om op uit te lijnen. */
	.nlpa-mgroep__kop {
		min-height: 0;
	}
	.nlpa-paneel__hulplinks {
		justify-content: stretch;
		margin: 12px 4px 0;
	}
	.nlpa-paneel__hulplinks a {
		width: 100%;
		justify-content: center;
	}
	.nlpa-mstart {
		margin-right: 0;
		padding-right: 0;
		border-radius: var(--nlpa-radius-kaart);
		overflow: hidden;
	}
	.nlpa-mstart__inhoud {
		padding: 22px;
	}
}