/*
 * Feniks Uitvaartzorg — childtheme van digimotions-parent.
 * Design v2, nagebouwd uit de hifi-handoff (design_handoff_feniks_uitvaartzorg).
 * Waarden komen één op één uit de inline stijlen van de .dc.html-referenties.
 */

:root {
	--paars: #3F2E4A;
	--paars-donker: #33243D;
	--goud: #C9A961;
	--goud-licht: #E8CE9A;
	/* Nooit --goud als tekst op licht (1,84:1). Hier altijd --goud-tekst (5,06:1). */
	--goud-tekst: #7a5c28;
	--creme: #F2E7D2;
	--creme-licht: #FBF6EC;
	--tekst: #2e2a35;
	--tekst-zacht: #5d5266;
	--tekst-op-paars: #CFC2D8;
	--tekst-op-paars-zacht: #B0A2BB;
	--lijn-creme: #EADDC4;
	--rand-goud-zacht: #DCC9A4;
	--tekst-op-goud: #2C1F35;

	--serif: "Cormorant Garamond", Georgia, serif;
	/* Huisstijl Feniks: Lato als tekstletter. La Orleans (de displayletter uit
	   de huisstijl) staat niet op Google Fonts en vraagt een weblicentie; tot
	   die er is, houdt --serif de klassieke koptekst aan. Zodra we de
	   webfontbestanden hebben, volstaat het om ze hier voor te zetten. */
	--sans: Lato, "Helvetica Neue", Arial, sans-serif;

	--shell: 1280px;
	--shell-breed: 1440px;
	--sectie-y: clamp(56px, 7vw, 90px);
	--sectie-x: clamp(24px, 5vw, 64px);
	--soepel: cubic-bezier(.22, .61, .36, 1);
	/* Trager uitlopende curve: het effect komt op gang en bedaart, in plaats
	   van in één ruk op zijn eindpositie te springen. */
	--zacht: cubic-bezier(.33, .8, .35, 1);
	/* Inkomen mag rustig duren, weggaan hoort korter: dat voelt reactief
	   zonder druk. */
	--hover-in: 420ms;
	--hover-uit: 240ms;

	/* Hoogte van de sticky kop; ankers stoppen hieronder. */
	--kop-hoogte: 150px;
}

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

html {
	scroll-behavior: smooth;
	scroll-padding-top: var(--kop-hoogte);
}

body.feniks-site {
	margin: 0;
	/* clip en niet hidden: hidden maakt van de body een scrollcontainer en
	   daarmee werkt position:sticky nergens meer binnen de pagina. */
	overflow-x: clip;
	background: #fff;
	color: var(--tekst);
	font-family: var(--sans);
	font-size: 16px;
	line-height: 1.75;
	-webkit-font-smoothing: antialiased;
}

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

.feniks-site a {
	color: inherit;
	text-decoration: none;
}

/*
 * Kleurverloop alleen op echte tekstlinks. Dit stond eerder op `.feniks-site a`,
 * maar die selector (0,1,1) overschreef de transition van elke kaart en knop die
 * een <a> is (0,1,0), waardoor die zonder animatie versprongen.
 */
.feniks-topbalk a,
.feniks-menu a,
.feniks-footer a,
.feniks-kruimels a,
.feniks-hero__hint,
.feniks-thema__vraag,
.feniks-vraag__antwoord a {
	transition: color var(--hover-uit) ease;
}

.feniks-site h1,
.feniks-site h2,
.feniks-site h3,
.feniks-site h4 {
	font-family: var(--serif);
	text-wrap: pretty;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}

.skip-link:focus {
	z-index: 100000;
	top: 8px;
	left: 8px;
	width: auto;
	height: auto;
	margin: 0;
	padding: 10px 16px;
	overflow: visible;
	clip: auto;
	clip-path: none;
	background: #fff;
	color: var(--paars);
	white-space: normal;
}

/* ─── Bouwstenen ──────────────────────────────────────────────────────────── */

.feniks-shell {
	max-width: var(--shell);
	margin-inline: auto;
}

.feniks-sectie {
	padding: var(--sectie-y) var(--sectie-x);
}

.feniks-kicker {
	font: 800 11.5px var(--sans);
	letter-spacing: .22em;
	text-transform: uppercase;
}

/*
 * De kleur staat bewust achter .feniks-site en niet op de klasse alleen. Bijna
 * elke kicker is een span, maar die boven een dienstpagina is een link terug
 * naar het dienstenoverzicht. Voor een link geldt .feniks-site a { color:
 * inherit }, en dat is specifieker dan een losse klasse. Gevolg: de kicker erfde
 * de donkere bodykleur en stond in bijna-zwart op het paarse vlak, op een
 * contrast van 1,13 op 1. Zolang deze twee regels even specifiek zijn als die
 * van de link, kan dat niet meer gebeuren.
 */
.feniks-site .feniks-kicker {
	color: var(--goud-tekst);
}

.feniks-site .feniks-kicker--op-paars {
	color: var(--goud-licht);
}

/* Knoppen: geen radius, vaste hoogte, zware Lato. */
.feniks-knop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 56px;
	padding: 0 30px;
	border: 0;
	font: 800 15.5px/1 var(--sans);
	cursor: pointer;
	transition: background-color var(--hover-uit) ease, color var(--hover-uit) ease, border-color var(--hover-uit) ease, box-shadow var(--hover-uit) ease, transform var(--hover-uit) var(--soepel);
}

.feniks-knop:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 22px rgba(63, 46, 74, .18);
	transition-duration: var(--hover-in);
	transition-timing-function: var(--zacht);
}

.feniks-knop:active {
	transform: translateY(0);
	box-shadow: none;
	transition-duration: 90ms;
}

.feniks-site .feniks-knop--goud {
	background: var(--goud);
	color: var(--tekst-op-goud);
}

.feniks-site .feniks-knop--goud:hover {
	background: var(--goud-licht);
	color: var(--tekst-op-goud);
}

.feniks-site .feniks-knop--paars {
	background: var(--paars);
	color: #fff;
}

.feniks-site .feniks-knop--paars:hover {
	background: var(--goud);
	color: var(--tekst-op-goud);
}

.feniks-site .feniks-knop--omlijnd {
	border: 1px solid rgba(232, 206, 154, .5);
	background: transparent;
	color: #F0E6D2;
}

.feniks-site .feniks-knop--omlijnd:hover {
	border-color: var(--goud-licht);
	color: var(--goud-licht);
}

/* Tekstlink met pijl die meeschuift op hover. */
.feniks-pijllink {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font: 800 12.5px/1 var(--sans);
	letter-spacing: .13em;
	text-transform: uppercase;
}

.feniks-pijllink b {
	transition: transform var(--hover-uit) var(--soepel);
}

.feniks-pijllink:hover b {
	transform: translateX(5px);
	transition-duration: var(--hover-in);
	transition-timing-function: var(--zacht);
}

/* Schuin pijltje naar een andere site (feniks_pijl_extern). */
.feniks-pijl-extern {
	display: block;
	width: 11px;
	height: 11px;
}

b:has(> .feniks-pijl-extern) {
	display: inline-flex;
}

/* ─── Sticky kop ──────────────────────────────────────────────────────────── */

/*
 * Topbalk en nav zitten in één sticky wrapper. Apart stickyen geeft een gat
 * zodra de topbalk naar twee regels wrapt.
 */
.feniks-kop {
	position: sticky;
	z-index: 60;
	top: 0;
	box-shadow: 0 2px 14px rgba(63, 46, 74, .08);
}

.admin-bar .feniks-kop {
	top: 32px;
}

/*
 * De topbalk deelt de shell en de zijpadding van de nav eronder, zodat het
 * telefoonnummer op dezelfde lijn staat als het logo en de openingsuren op
 * dezelfde lijn als de contactknop. Eerder stond de balk gecentreerd los van
 * het raster eronder; dat las als een losse strook.
 */
.feniks-topbalk {
	background: var(--paars);
	color: #F0E6D2;
	font: 400 14px/21px var(--sans);
	letter-spacing: .012em;
}

.feniks-topbalk__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 6px 32px;
	max-width: var(--shell-breed);
	margin-inline: auto;
	padding: 11px clamp(24px, 4vw, 48px);
}

.feniks-topbalk p {
	margin: 0;
}

.feniks-topbalk__uren {
	display: flex;
	align-items: center;
	gap: 15px;
	color: rgba(240, 230, 210, .68);
}

/* Gouden ruitje als scheiding in plaats van een middenpunt: hetzelfde accent
   als op de raakpunten elders in het ontwerp, en het geeft de woorden lucht. */
.feniks-topbalk__ruit {
	width: 4px;
	height: 4px;
	flex: none;
	rotate: 45deg;
	background: var(--goud);
	opacity: .75;
}

/* Het ruitje tussen nummer en uren bestaat enkel op gsm (zie onderaan). */
.feniks-topbalk__ruit--gsm {
	display: none;
}

.feniks-site .feniks-topbalk a {
	color: var(--goud-licht);
	font-weight: 700;
	text-decoration: none;
}

.feniks-site .feniks-topbalk a:hover {
	color: #fff;
}

.feniks-nav {
	border-bottom: 1px solid var(--lijn-creme);
	background: var(--creme-licht);
}

.feniks-nav__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 24px;
	max-width: var(--shell-breed);
	margin-inline: auto;
	padding: 15px clamp(24px, 4vw, 48px);
}

.feniks-merk {
	justify-self: start;
	line-height: 0;
}

.feniks-merk img {
	display: block;
	width: auto;
	height: 56px;
}

.feniks-menu,
.feniks-menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.feniks-menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(12px, 1.7vw, 24px);
	font: 700 14.5px var(--sans);
	color: var(--paars);
}

.feniks-menu a:hover,
.feniks-menu .current-menu-item > a,
.feniks-menu .current_page_item > a,
.feniks-menu .is-actief > a {
	color: var(--goud-tekst);
}

/* Staat de bezoeker ter hoogte van een sectie waar een menu-item naar wijst,
   dan dooft de markering van de huidige pagina. Anders lichten Home en
   Diensten samen op zodra je op de homepagina naar beneden scrolt. */
.feniks-menu--anker .current-menu-item > a,
.feniks-menu--anker .current_page_item > a {
	color: var(--paars);
}

.feniks-menu--anker .current-menu-item > a:hover,
.feniks-menu--anker .current_page_item > a:hover {
	color: var(--goud-tekst);
}

.feniks-nav__cta {
	justify-self: end;
	height: auto;
	padding: 14px 24px;
	font-size: 14.5px;
	white-space: nowrap;
}

.feniks-menu-toggle {
	display: none;
	width: 44px;
	height: 40px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.feniks-menu-toggle span:not(.screen-reader-text) {
	display: block;
	width: 22px;
	height: 1.5px;
	margin: 5px auto;
	background: var(--paars);
}

/* ─── Hero drieluik ───────────────────────────────────────────────────────── */

.feniks-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 78vh;
	padding: clamp(30px, 3.6vw, 46px) clamp(20px, 4vw, 44px) clamp(72px, 7vw, 96px);
	background: var(--creme);
}

.feniks-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.45fr) minmax(210px, 300px) minmax(0, 1fr);
	gap: clamp(14px, 1.8vw, 26px);
	align-items: stretch;
	max-width: var(--shell-breed);
	margin-inline: auto;
	width: 100%;
}

/* Links: het paarse blok moet het meest opvallen (klanteis). */
.feniks-hero__melden {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: clamp(400px, 34vw, 470px);
	padding: clamp(34px, 3.4vw, 46px) clamp(28px, 3vw, 42px);
	background: var(--paars);
	box-shadow: 0 20px 46px rgba(63, 46, 74, .3);
	transition: transform var(--hover-uit) var(--soepel), box-shadow var(--hover-uit) var(--soepel);
}

.feniks-hero__melden:hover {
	transform: translateY(-4px);
	box-shadow: 0 28px 56px rgba(63, 46, 74, .36);
	transition-duration: var(--hover-in);
	transition-timing-function: var(--zacht);
}

.feniks-hero__streep {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 5px;
	background: var(--goud);
	transition: width var(--hover-uit) var(--soepel);
}

.feniks-hero__melden:hover .feniks-hero__streep,
.feniks-paginakop__blok:hover .feniks-hero__streep {
	width: 8px;
	transition-duration: var(--hover-in);
	transition-timing-function: var(--zacht);
}

.feniks-hero__melden .feniks-kicker {
	margin-bottom: 16px;
}

.feniks-hero__melden h1 {
	margin: 0 0 16px;
	font-weight: 600;
	font-size: clamp(34px, 3.9vw, 54px);
	line-height: 1.02;
	color: #fff;
}

.feniks-hero__melden p {
	margin: 0;
	max-width: 430px;
	font: 400 16px/1.75 var(--sans);
	color: var(--tekst-op-paars);
	text-wrap: pretty;
}

.feniks-hero__knop {
	align-self: flex-start;
	margin-top: 34px;
	gap: 10px;
	background: var(--creme);
	color: var(--paars);
}

.feniks-hero__knop:hover {
	background: #fff;
	color: var(--paars);
}

.feniks-hero__knop b {
	font-size: 18px;
	font-weight: 400;
	transition: transform .35s var(--soepel);
}

.feniks-hero__melden:hover .feniks-hero__knop b {
	transform: translateY(3px);
}

/* Midden: Sophie, strak, geen kader. */
.feniks-hero__sophie {
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
}

.feniks-hero__sophie img {
	display: block;
	width: 100%;
	height: clamp(300px, 25vw, 352px);
	object-fit: cover;
	object-position: center 16%;
}

.feniks-hero__naam {
	margin-top: 18px;
	font-family: var(--serif);
	font-weight: 700;
	font-size: 25px;
	line-height: 1.1;
	color: var(--paars);
}

.feniks-hero__rol {
	margin-top: 6px;
	font: 700 11.5px var(--sans);
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--goud-tekst);
}

.feniks-hero__sophie p {
	margin: 14px auto 0;
	max-width: 250px;
	font: 400 14.5px/1.7 var(--sans);
	color: var(--tekst-zacht);
	text-wrap: pretty;
}

/* Rechts: doorverwijzing naar Funeral Events. */
.feniks-hero__events {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: clamp(30px, 2.8vw, 38px) clamp(26px, 2.4vw, 32px);
	border: 1px solid var(--rand-goud-zacht);
	background: var(--creme-licht);
	transition: transform var(--hover-uit) var(--soepel), box-shadow var(--hover-uit) var(--soepel), border-color var(--hover-uit) ease;
}

.feniks-hero__events:hover {
	transform: translateY(-4px);
	border-color: var(--goud);
	box-shadow: 0 22px 44px rgba(63, 46, 74, .16);
	transition-duration: var(--hover-in);
	transition-timing-function: var(--zacht);
}

.feniks-hero__events .feniks-kicker {
	margin-bottom: 14px;
}

.feniks-hero__events h2 {
	margin: 0 0 13px;
	font-weight: 600;
	font-size: clamp(26px, 2.3vw, 30px);
	line-height: 1.08;
	color: var(--paars);
}

.feniks-hero__events p {
	margin: 0;
	font: 400 15px/1.7 var(--sans);
	color: var(--tekst-zacht);
	text-wrap: pretty;
}

.feniks-hero__events-link {
	align-self: flex-start;
	margin-top: 28px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--goud);
	color: var(--paars);
	font: 800 13px/1 var(--sans);
	letter-spacing: .05em;
}

.feniks-hero__events-link b {
	font-size: 15px;
	font-weight: 400;
	transition: transform .35s var(--soepel);
}

.feniks-hero__events:hover .feniks-hero__events-link b {
	transform: translate(3px, -3px);
}

/* Scrollhint onderaan de hero. */
.feniks-site .feniks-hero__hint {
	position: absolute;
	left: 50%;
	bottom: clamp(22px, 2.6vw, 34px);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 9px;
	transform: translateX(-50%);
	color: var(--goud-tekst);
}

.feniks-site .feniks-hero__hint:hover {
	color: var(--paars);
}

.feniks-hero__hint span {
	font: 800 10px var(--sans);
	letter-spacing: .2em;
	text-transform: uppercase;
}

.feniks-hero__hint svg {
	display: block;
	animation: feniks-scroll 1.9s ease-in-out infinite;
}

@keyframes feniks-scroll {
	0%,
	100% {
		transform: translateY(0);
		opacity: .55;
	}

	50% {
		transform: translateY(7px);
		opacity: 1;
	}
}

/* ─── Statement ───────────────────────────────────────────────────────────── */

.feniks-statement {
	padding: clamp(60px, 7.5vw, 100px) var(--sectie-x);
	background: var(--paars-donker);
}

.feniks-statement__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: clamp(30px, 5vw, 72px);
	align-items: start;
	max-width: 1180px;
	margin-inline: auto;
}

.feniks-statement h2 {
	margin: 24px 0 0;
	font-weight: 500;
	font-size: clamp(34px, 4.4vw, 54px);
	line-height: 1.04;
	color: #fff;
}

.feniks-statement h3 {
	margin: 0 0 18px;
	font-weight: 600;
	font-size: clamp(21px, 2.2vw, 26px);
	line-height: 1.25;
	color: var(--goud-licht);
}

.feniks-statement__lead {
	margin: 0 0 20px;
	font: 400 18px/1.85 var(--sans);
	color: #DCD3E2;
	text-wrap: pretty;
}

.feniks-statement__tekst {
	margin: 0 0 32px;
	font: 400 16px/1.85 var(--sans);
	color: var(--tekst-op-paars-zacht);
	text-wrap: pretty;
}

/* ─── Diensten ────────────────────────────────────────────────────────────── */

.feniks-diensten {
	padding: var(--sectie-y) var(--sectie-x);
	background: var(--creme);
}

.feniks-sectiekop {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: clamp(30px, 3.6vw, 42px);
}

.feniks-sectiekop h2 {
	margin: 0;
	font-weight: 500;
	font-size: clamp(32px, 4vw, 48px);
	line-height: 1.04;
	color: var(--paars);
}

.feniks-sectiekop p {
	margin: 0;
	max-width: 420px;
	font: 400 16px/1.8 var(--sans);
	color: var(--tekst-zacht);
	text-wrap: pretty;
}

.feniks-kaarten {
	display: grid;
	/* 340px houdt het op drie kolommen binnen de shell: zes kaarten vallen dan
	   in twee volle rijen. Bij 300px werd het op brede schermen 4 + 2. */
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
	grid-auto-rows: 1fr;
	gap: 16px;
	margin-bottom: clamp(34px, 4vw, 52px);
}

/*
 * Het paars zit in de kaart verwerkt als een plaat waar de kaart op ligt: het
 * kaartvlak laat rechts en onderaan een strook vrij. Zo staat de kleur op elke
 * kaart zonder dat het hele vlak paars wordt, en ontstaat er diepte uit twee
 * lagen. Een volledig paarse kaart werd te zwaar; een band achter het rooster
 * las als rij na rij.
 */
.feniks-kaart {
	display: flex;
	flex-direction: column;
	/* Eén paarse rug langs de linkerrand in plaats van een vlak of een plaat:
	   de kleur staat op elke kaart, het rooster blijft licht, en zes verticale
	   accenten naast elkaar lezen niet als rij na rij. */
	border-left: 5px solid var(--paars);
	background: var(--creme-licht);
	box-shadow: 0 10px 22px rgba(63, 46, 74, .09);
	transition: transform var(--hover-uit) var(--soepel), box-shadow var(--hover-uit) ease, border-left-color var(--hover-uit) ease;
}

.feniks-kaart:hover {
	transform: translateY(-3px);
	border-left-color: var(--goud);
	box-shadow: 0 20px 38px rgba(63, 46, 74, .16);
	transition-duration: var(--hover-in);
	transition-timing-function: var(--zacht);
}

/*
 * Geen foto's op de dienstkaarten: een lijnicoon in een crème vlak houdt het
 * rustig en blijft inhoudelijk kloppen, wat bij onderwerpen als een kist of een
 * begraafplaats met fotografie niet lukte.
 */
.feniks-kaart__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: clamp(30px, 3vw, 38px) clamp(26px, 2.8vw, 34px) clamp(26px, 2.6vw, 30px);
}

/* Geen vlak achter het icoon: dat maakte de sectie onrustig. Het icoon erft
   zijn kleur via currentColor, zodat het op het paars goud oplicht. */
.feniks-kaart__icoon {
	display: block;
	margin-bottom: 18px;
	line-height: 0;
	color: var(--goud-tekst);
}

.feniks-kaart__icoon::after {
	content: "";
	display: block;
	width: 34px;
	height: 1px;
	margin-top: 18px;
	background: var(--goud);
	transition: width var(--hover-uit) var(--soepel);
}

.feniks-kaart:hover .feniks-kaart__icoon::after {
	width: 54px;
	transition-duration: var(--hover-in);
	transition-timing-function: var(--zacht);
}

.feniks-kaart__icoon svg {
	transition: transform var(--hover-uit) var(--soepel);
}

.feniks-kaart:hover .feniks-kaart__icoon svg {
	transform: translateY(-3px);
	transition-duration: var(--hover-in);
	transition-timing-function: var(--zacht);
}

.feniks-kaart h3 {
	margin: 0 0 10px;
	font-weight: 600;
	font-size: 24px;
	line-height: 1.15;
	color: var(--paars);
}

.feniks-kaart p {
	margin: 0 0 22px;
	font: 400 15px/1.75 var(--sans);
	color: var(--tekst-zacht);
	text-wrap: pretty;
}

.feniks-kaart__meer {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font: 800 11.5px var(--sans);
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--paars);
}

.feniks-kaart__meer b {
	color: var(--goud-tekst);
	font-weight: 400;
	transition: transform var(--hover-uit) var(--soepel);
}

.feniks-kaart:hover .feniks-kaart__meer b {
	transform: translateX(5px);
	transition-duration: var(--hover-in);
	transition-timing-function: var(--zacht);
}

.feniks-diensten__meer-kop {
	margin: 0 0 clamp(16px, 2vw, 22px);
	font: 800 11.5px var(--sans);
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--goud-tekst);
}

.feniks-vraag__alle {
	display: inline-flex;
	margin-top: 18px;
}

.feniks-kleine-kaarten {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
	grid-auto-rows: 1fr;
	gap: 12px;
}

/*
 * Zeven kleine tegels op de homepagina passen niet in rijen van drie. In plaats
 * van een eenzame tegel op een derde rij leggen ze in verband, zoals
 * metselwerk: bovenaan drie brede tegels, onderaan vier smallere. De naden van
 * de twee rijen vallen nergens op elkaar (4 en 8 boven, 3, 6 en 9 onder), zodat
 * het als één vlak leest en niet als een tabel. De drie langste namen staan
 * boven; een eerste versie met wisselende breedtes duwde "Administratie en
 * nazorg" in een smalle tegel op twee regels. Op tabletbreedte wisselen de
 * rijen van twee tussen breed-smal en smal-breed, en de laatste tegel loopt
 * over de volle breedte.
 */
@media (min-width: 760px) {
	.feniks-diensten .feniks-kleine-kaarten {
		grid-template-columns: repeat(12, minmax(0, 1fr));
	}

	.feniks-diensten .feniks-kleine-kaart {
		grid-column: span 5;
	}

	.feniks-diensten .feniks-kleine-kaart:nth-child(4n + 1),
	.feniks-diensten .feniks-kleine-kaart:nth-child(4n + 4) {
		grid-column: span 7;
	}

	.feniks-diensten .feniks-kleine-kaart:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}
}

@media (min-width: 1128px) {
	.feniks-diensten .feniks-kleine-kaart,
	.feniks-diensten .feniks-kleine-kaart:nth-child(4n + 1),
	.feniks-diensten .feniks-kleine-kaart:nth-child(4n + 4),
	.feniks-diensten .feniks-kleine-kaart:last-child:nth-child(odd) {
		grid-column: span 3;
	}

	.feniks-diensten .feniks-kleine-kaart:nth-child(-n + 3) {
		grid-column: span 4;
	}
}

.feniks-kleine-kaart {
	display: flex;
	align-items: center;
	gap: 15px;
	padding: 20px 22px;
	border: 1px solid var(--lijn-creme);
	background: #fff;
	box-shadow: 0 6px 18px rgba(63, 46, 74, .05);
	transition: transform var(--hover-uit) var(--soepel), box-shadow var(--hover-uit) ease, border-color var(--hover-uit) ease;
}

.feniks-kleine-kaart:hover {
	transform: translateY(-2px);
	border-color: var(--rand-goud-zacht);
	box-shadow: 0 12px 26px rgba(63, 46, 74, .11);
	transition-duration: var(--hover-in);
	transition-timing-function: var(--zacht);
}

.feniks-kleine-kaart svg {
	flex: none;
}

.feniks-kleine-kaart span {
	flex: 1;
	font-family: var(--serif);
	font-weight: 600;
	font-size: 18.5px;
	line-height: 1.22;
	color: var(--paars);
	text-wrap: pretty;
}

.feniks-kleine-kaart b {
	flex: none;
	color: var(--goud-tekst);
	font-size: 16px;
	font-weight: 400;
	transition: transform var(--hover-uit) var(--soepel);
}

.feniks-kleine-kaart:hover b {
	transform: translateX(4px);
	transition-duration: var(--hover-in);
	transition-timing-function: var(--zacht);
}

/* ─── Over Sophie ─────────────────────────────────────────────────────────── */

.feniks-over {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	align-items: stretch;
	background: var(--paars);
}

.feniks-over__beeld {
	position: relative;
	min-height: clamp(360px, 40vw, 560px);
}

/* Nooit een verloop of blur over Sophie haar gezicht (klanteis). */
.feniks-over__beeld img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 22%;
}

.feniks-over__tekst {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(48px, 6vw, 84px) clamp(30px, 5vw, 72px);
}

.feniks-over__citaat {
	margin: 0 0 30px;
	max-width: 540px;
	font-family: var(--serif);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(25px, 3vw, 36px);
	line-height: 1.32;
	color: #fff;
	text-wrap: pretty;
}

.feniks-over__tekst .feniks-kicker {
	margin-bottom: 26px;
}

.feniks-over__tekst p {
	margin: 0 0 16px;
	max-width: 520px;
	font: 400 16.5px/1.85 var(--sans);
	color: #DCD3E2;
	text-wrap: pretty;
}

.feniks-over__tekst p + p {
	margin-bottom: 34px;
	color: var(--tekst-op-paars-zacht);
}

.feniks-site .feniks-over__link {
	align-self: flex-start;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--goud);
	color: #fff;
}

.feniks-over__link b {
	color: var(--goud-licht);
	font-weight: 400;
}

/* ─── Tijdlijn "wat te doen" ──────────────────────────────────────────────── */

.feniks-tijdlijn-sectie {
	padding: var(--sectie-y) var(--sectie-x);
	background: var(--creme);
}

.feniks-tijdlijn-sectie .feniks-sectiekop {
	margin-bottom: clamp(34px, 4vw, 50px);
}

.feniks-tijdlijn-sectie .feniks-kicker {
	display: block;
	margin-bottom: 14px;
}

.feniks-tijdlijn-sectie h2 {
	margin: 0;
	font-weight: 500;
	font-size: clamp(32px, 4vw, 46px);
	line-height: 1.06;
	color: var(--paars);
}

.feniks-tijdlijn-sectie .feniks-sectiekop p {
	max-width: 340px;
	font-size: 15.5px;
	line-height: 1.75;
}

.feniks-tijdlijn {
	display: grid;
	grid-template-columns: repeat(5, minmax(136px, 1fr));
	min-width: 100%;
}

.feniks-tijdlijn__scroll {
	overflow-x: auto;
}

.feniks-tijdlijn article {
	position: relative;
	padding: 0 clamp(6px, 1vw, 14px);
	text-align: center;
}

/* Geen cijfers: de lijn en de knooppunten dragen de volgorde (klanteis). */
.feniks-tijdlijn__spoor {
	position: relative;
	height: 33px;
	margin-bottom: 22px;
}

.feniks-tijdlijn__spoor::before {
	content: "";
	position: absolute;
	top: 16px;
	right: 0;
	left: 0;
	height: 1px;
	background: var(--goud);
}

.feniks-tijdlijn article:first-child .feniks-tijdlijn__spoor::before {
	left: 50%;
}

.feniks-tijdlijn article:last-child .feniks-tijdlijn__spoor::before {
	right: 50%;
}

.feniks-tijdlijn__knoop {
	position: absolute;
	left: 50%;
	top: 16px;
	display: block;
	width: 11px;
	height: 11px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: var(--goud-tekst);
	box-shadow: 0 0 0 5px var(--creme), 0 0 0 6px var(--goud);
}

.feniks-tijdlijn h3 {
	margin: 0 0 9px;
	font: 800 16px var(--sans);
	color: var(--paars);
}

.feniks-tijdlijn p {
	margin: 0 auto;
	max-width: 200px;
	font: 400 14px/1.65 var(--sans);
	color: var(--tekst-zacht);
	text-wrap: pretty;
}

/* ─── Citaatband ──────────────────────────────────────────────────────────── */

.feniks-citaat {
	position: relative;
}

.feniks-citaat > img {
	display: block;
	width: 100%;
	height: clamp(260px, 28vw, 380px);
	object-fit: cover;
}

.feniks-citaat__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 22px;
	padding: 40px var(--sectie-x);
	background: rgba(51, 36, 61, .7);
	text-align: center;
}

.feniks-citaat blockquote {
	margin: 0;
	max-width: 820px;
	font-family: var(--serif);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(23px, 3vw, 36px);
	line-height: 1.35;
	color: #fff;
	text-wrap: pretty;
}

/* ─── Reviews ─────────────────────────────────────────────────────────────── */

.feniks-reviews {
	padding: clamp(52px, 7vw, 84px) 0;
	background: var(--creme);
}

.feniks-reviews__kop {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 18px;
	max-width: 1320px;
	margin: 0 auto clamp(28px, 3.5vw, 40px);
	padding: 0 var(--sectie-x);
}

.feniks-reviews__kop h2 {
	margin: 0;
	font-weight: 500;
	font-size: clamp(30px, 3.7vw, 42px);
	line-height: 1.08;
	color: var(--paars);
}

.feniks-reviews__google {
	display: flex;
	align-items: center;
	gap: 11px;
	font: 700 14.5px var(--sans);
	color: var(--tekst-zacht);
}

.feniks-sterren {
	color: var(--goud-tekst);
	font-size: 20px;
	letter-spacing: .08em;
}

.feniks-reviews__body {
	max-width: 1320px;
	margin-inline: auto;
	padding: 0 var(--sectie-x);
}

.feniks-reviews__venster {
	overflow: hidden;
}

.feniks-reviews__spoor {
	display: flex;
	gap: 16px;
	will-change: transform;
	transition: transform .7s cubic-bezier(.4, 0, .2, 1);
}

.feniks-review {
	display: flex;
	flex: none;
	flex-direction: column;
	width: calc((100% - 32px) / 3);
	min-width: 250px;
	padding: 34px 32px;
	background: #fff;
}

.feniks-review__sterren {
	margin-bottom: 16px;
	color: var(--goud-tekst);
	font-size: 12.5px;
	letter-spacing: .16em;
}

/* Een persoonlijk bericht dat niet via Google kwam: geen sterren, die zou het
   niet gegeven hebben, maar een klein label op dezelfde plek en in dezelfde
   kleur, zodat de kaarten gelijk blijven ogen. */
.feniks-review__bericht {
	font: 700 10.5px/1.6 var(--sans);
	letter-spacing: .18em;
	text-transform: uppercase;
}

.feniks-review p {
	margin: 0 0 22px;
	font: 400 16px/1.8 var(--sans);
	color: var(--tekst-zacht);
	text-wrap: pretty;
}

.feniks-review strong {
	margin-top: auto;
	font: 800 13px var(--sans);
	letter-spacing: .03em;
	color: var(--paars);
}

.feniks-reviews__bediening {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-top: 30px;
}

.feniks-reviews__stippen {
	position: relative;
}

.feniks-reviews__stippen-rij {
	display: flex;
	gap: 9px;
}

.feniks-reviews__stip {
	width: 26px;
	height: 3px;
	margin: 0;
	padding: 0;
	border: 0;
	background: #E3D6BC;
	cursor: pointer;
}

.feniks-reviews__duim {
	position: absolute;
	top: 0;
	left: 0;
	width: 26px;
	height: 3px;
	background: var(--goud);
	pointer-events: none;
	transition: transform .45s cubic-bezier(.4, 0, .2, 1);
}

.feniks-reviews__pijlen {
	display: flex;
	gap: 10px;
}

.feniks-reviews__pijl {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border: 1px solid var(--rand-goud-zacht);
	background: transparent;
	color: var(--paars);
	cursor: pointer;
	transition: background-color var(--hover-uit) ease, border-color var(--hover-uit) ease, color var(--hover-uit) ease;
}

.feniks-reviews__pijl:hover {
	border-color: var(--paars);
	background: var(--paars);
	color: #fff;
	transition-duration: var(--hover-in);
	transition-timing-function: var(--zacht);
}

/* ─── FAQ ─────────────────────────────────────────────────────────────────── */

.feniks-faq-sectie {
	padding: var(--sectie-y) var(--sectie-x);
	background: var(--paars-donker);
}

.feniks-faq-sectie__kop {
	max-width: 960px;
	margin: 0 auto clamp(28px, 3.5vw, 42px);
}

.feniks-faq-sectie__kop .feniks-kicker {
	display: block;
	margin-bottom: 14px;
}

.feniks-faq-sectie h2 {
	margin: 0;
	font-weight: 500;
	font-size: clamp(32px, 4vw, 46px);
	line-height: 1.06;
	color: #fff;
}

.feniks-faq {
	max-width: 960px;
	margin-inline: auto;
	border-top: 1px solid rgba(232, 206, 154, .28);
}

.feniks-faq details {
	border-bottom: 1px solid rgba(232, 206, 154, .28);
}

.feniks-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	padding: 26px 2px;
	font-family: var(--serif);
	font-weight: 600;
	font-size: clamp(21px, 2.2vw, 26px);
	line-height: 1.3;
	color: #fff;
	list-style: none;
	cursor: pointer;
}

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

.feniks-faq summary svg {
	flex: none;
	transition: transform .3s ease;
}

.feniks-faq details[open] summary svg {
	transform: rotate(180deg);
}

/* Een rand bij klikken met de muis stond wit en hoekig rond de vraag; enkel
   bij navigeren met het toetsenbord, en dan in goud. */
.feniks-faq summary:focus:not(:focus-visible) {
	outline: none;
}

.feniks-faq summary:focus-visible {
	outline: 2px solid var(--goud);
	outline-offset: 4px;
}

/* Het antwoord over de volle breedte van de vraag (stond op 760px van 960px
   en werd daardoor onnodig lang); rechts blijft ruimte voor het pijltje. */
.feniks-faq details > div {
	margin: 0;
	padding: 0 56px 28px 2px;
	font: 400 16px/1.75 var(--sans);
	color: var(--tekst-op-paars);
	text-wrap: pretty;
}

.feniks-faq details > div p {
	margin: 0 0 14px;
}

.feniks-faq details > div p:last-child {
	margin-bottom: 0;
}

/* ─── Contactband ─────────────────────────────────────────────────────────── */

.feniks-contactband {
	position: relative;
	background: var(--paars-donker);
	overflow: hidden;
}

.feniks-contactband > img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 38% 42%;
	transform: scaleX(-1);
}

/* Verloop van rechts naar links, zodat Sophie rechts zichtbaar blijft. */
.feniks-contactband__waas {
	position: absolute;
	inset: 0;
	background: linear-gradient(270deg, rgba(51, 36, 61, .97) 0%, rgba(51, 36, 61, .93) 38%, rgba(51, 36, 61, .6) 62%, rgba(51, 36, 61, .2) 100%);
}

.feniks-contactband__inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	min-height: clamp(460px, 44vw, 600px);
	max-width: var(--shell-breed);
	margin-inline: auto;
	padding: clamp(52px, 6vw, 84px) var(--sectie-x);
}

.feniks-contactband__tekst {
	max-width: 520px;
}

.feniks-contactband .feniks-kicker {
	display: block;
	margin-bottom: 18px;
}

.feniks-contactband h2 {
	margin: 0 0 18px;
	font-weight: 500;
	font-size: clamp(32px, 4.2vw, 50px);
	line-height: 1.03;
	color: #fff;
}

.feniks-contactband p {
	margin: 0 0 34px;
	max-width: 440px;
	font: 400 16.5px/1.85 var(--sans);
	color: #D3C7DB;
	text-wrap: pretty;
}

.feniks-knoppen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
}

.feniks-contactband .feniks-knop {
	height: 60px;
	font-size: 16px;
}

.feniks-contactband .feniks-knop--goud {
	padding: 0 34px;
}

/* ─── Footer ──────────────────────────────────────────────────────────────── */

.feniks-footer {
	padding: clamp(46px, 6vw, 64px) var(--sectie-x) 26px;
	border-top: 1px solid rgba(232, 206, 154, .2);
	background: var(--paars-donker);
	color: #e8e0d3;
}

.feniks-footer__inner {
	max-width: 1320px;
	margin-inline: auto;
}

.feniks-footer__kolommen {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 40px;
	padding-bottom: 34px;
}

.feniks-footer__merk {
	display: block;
	font-family: var(--serif);
	font-weight: 600;
	font-size: 33px;
	line-height: 1;
	color: #fff;
}

.feniks-footer__merk-sub {
	font: 700 11.5px var(--sans);
	letter-spacing: .34em;
	text-transform: uppercase;
	color: var(--goud-licht);
}

.feniks-footer__tagline {
	margin: 18px 0 0;
	max-width: 320px;
	font: 400 14.5px/1.75 var(--sans);
	color: #C4B7CD;
}

.feniks-footer__tagline a {
	color: var(--goud-licht);
}

.feniks-footer__tagline a:hover {
	color: #fff;
}

/*
 * De sociale profielen, onder de verwijzing naar het zusterbedrijf. De iconen
 * zijn lijntekeningen in dezelfde stijl als de rest van de site; de kleur komt
 * van hier en gaat via currentColor de svg in.
 */
.feniks-footer__sociaal {
	display: flex;
	gap: 8px;
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
}

.feniks-footer__sociaal a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	border: 1px solid rgba(214, 196, 150, .28);
	color: var(--goud-licht);
	transition: color var(--hover-uit) ease, border-color var(--hover-uit) ease, background-color var(--hover-uit) ease;
}

.feniks-footer__sociaal a:hover,
.feniks-footer__sociaal a:focus-visible {
	border-color: var(--goud-licht);
	background: rgba(214, 196, 150, .12);
	color: #fff;
	transition-duration: var(--hover-in);
	transition-timing-function: var(--zacht);
}

.feniks-footer h4 {
	margin: 0 0 14px;
	font: 800 12px var(--sans);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--goud-licht);
}

.feniks-footer__tel {
	margin: 0 0 8px;
	font: 700 19px var(--sans);
}

.feniks-footer__tel a {
	color: #fff;
}

.feniks-footer__tel a:hover {
	color: var(--goud-licht);
}

.feniks-footer__bereik {
	margin: 0;
	font: 400 14px/1.75 var(--sans);
	color: #C4B7CD;
}

.feniks-footer__bereik a {
	color: #C4B7CD;
}

.feniks-footer__bereik a:hover {
	color: var(--goud-licht);
}

.feniks-footer__menu {
	display: flex;
	flex-direction: column;
	gap: 9px;
	margin: 0;
	padding: 0;
	list-style: none;
	font: 400 14.5px var(--sans);
	color: #C4B7CD;
}

.feniks-footer__menu li {
	list-style: none;
}

.feniks-footer__menu a:hover {
	color: var(--goud-licht);
}

.feniks-footer__balk {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-top: 22px;
	border-top: 1px solid rgba(255, 255, 255, .13);
	font: 400 13px var(--sans);
	color: #B0A4BA;
}

.feniks-footer__balk-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 26px;
}

/* Knop die het voorkeurenvenster van de cookiebanner heropent. Leest als de
   links ernaast, want het hoort bij dezelfde rij. */
.feniks-site .feniks-footer__voorkeuren {
	padding: 0;
	border: 0;
	border-bottom: 1px solid rgba(255, 255, 255, .25);
	background: none;
	font: 400 13px var(--sans);
	color: #B0A4BA;
	cursor: pointer;
	transition: color var(--hover-uit) ease, border-color var(--hover-uit) ease;
}

.feniks-site .feniks-footer__voorkeuren:hover {
	color: var(--goud-licht);
	border-color: var(--goud-licht);
}

/*
 * Op gsm liep de onderste balk door elkaar: copyright, btw-nummer en de twee
 * links wrapten waar ze toevallig pasten. Nu vaste regels onder elkaar:
 * copyright, btw, de twee links naast elkaar, en apart de credit.
 */
@media (max-width: 600px) {
	.feniks-footer__balk {
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
	}

	.feniks-footer__balk-links {
		display: grid;
		grid-template-columns: auto auto;
		justify-content: start;
		gap: 6px 26px;
		line-height: 1.6;
	}

	.feniks-footer__balk-links > span {
		grid-column: 1 / -1;
	}

	/* De ene is een link, de andere een knop: zelfde regelhoogte, anders staan
	   hun onderlijnen niet op één hoogte. .feniks-site ervoor, zodat dit het
	   haalt van de algemene regel voor de voorkeurenknop. */
	.feniks-site .feniks-footer__balk-links > a,
	.feniks-site .feniks-footer__balk-links > button {
		justify-self: start;
		align-self: end;
		margin-top: 12px;
		padding: 4px 0;
		font-size: 13px;
		line-height: 1.5;
	}

	.feniks-footer__balk > span:last-child {
		width: 100%;
		margin-top: 18px;
		padding-top: 16px;
		border-top: 1px solid rgba(255, 255, 255, .08);
		font-size: 12px;
	}
}

/* ─── Responsive ──────────────────────────────────────────────────────────── */
/*
 * De handoff bevat geen mobiele schermen (nul media queries). Onderstaande
 * keuzes zijn ingevuld door Digi-Motions en moeten nog nagekeken worden.
 */

@media (max-width: 1100px) {
	:root {
		--kop-hoogte: 132px;
	}

	.feniks-nav__inner {
		grid-template-columns: auto 1fr;
	}

	.feniks-menu-toggle {
		display: block;
		justify-self: end;
	}

	.feniks-nav {
		position: relative;
	}

	.feniks-nav__lijst {
		position: absolute;
		top: 100%;
		right: 0;
		left: 0;
		display: none;
		padding: 12px var(--sectie-x) 24px;
		border-top: 1px solid var(--lijn-creme);
		background: var(--creme-licht);
		box-shadow: 0 18px 40px rgba(63, 46, 74, .12);
	}

	.feniks-nav__lijst.is-open {
		display: block;
	}

	.feniks-menu {
		display: block;
	}

	.feniks-menu li {
		border-bottom: 1px solid var(--lijn-creme);
	}

	.feniks-menu a {
		display: block;
		padding: 12px 0;
	}

	.feniks-nav__cta {
		display: none;
	}

	/* Hero: Sophie onder de twee blokken in plaats van ertussen. */
	.feniks-hero__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.feniks-hero__sophie {
		order: 3;
		grid-column: 1 / -1;
	}

	.feniks-hero__sophie img {
		height: clamp(260px, 38vw, 340px);
	}
}

@media (max-width: 820px) {
	.feniks-hero {
		min-height: 0;
	}

	.feniks-hero__grid {
		grid-template-columns: 1fr;
	}

	.feniks-hero__melden {
		min-height: 0;
	}

	.feniks-hero__hint {
		display: none;
	}

	/* Tijdlijn verticaal: horizontaal scrollen is hier slechte UX. */
	.feniks-tijdlijn__scroll {
		overflow-x: visible;
	}

	.feniks-tijdlijn {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.feniks-tijdlijn article {
		display: grid;
		grid-template-columns: 33px 1fr;
		gap: 0 18px;
		padding: 0 0 26px;
		text-align: left;
	}

	.feniks-tijdlijn__spoor {
		height: 100%;
		margin: 0;
		grid-row: 1 / span 2;
	}

	.feniks-tijdlijn__spoor::before {
		top: 0;
		right: auto;
		bottom: 0;
		left: 16px;
		width: 1px;
		height: auto;
	}

	.feniks-tijdlijn article:first-child .feniks-tijdlijn__spoor::before {
		top: 10px;
		left: 16px;
	}

	.feniks-tijdlijn article:last-child .feniks-tijdlijn__spoor::before {
		bottom: auto;
		height: 10px;
	}

	.feniks-tijdlijn__knoop {
		top: 10px;
		left: 16px;
	}

	.feniks-tijdlijn p {
		margin: 0;
		max-width: none;
	}

	/* Contactband: verloop van onder, tekst onderaan, gezicht vrij bovenaan. */
	.feniks-contactband__waas {
		background: linear-gradient(0deg, rgba(51, 36, 61, .97) 0%, rgba(51, 36, 61, .92) 45%, rgba(51, 36, 61, .55) 75%, rgba(51, 36, 61, .25) 100%);
	}

	.feniks-contactband__inner {
		align-items: flex-end;
		justify-content: flex-start;
		min-height: clamp(520px, 90vw, 620px);
	}

	.feniks-reviews__bediening {
		flex-direction: column-reverse;
		align-items: stretch;
		gap: 18px;
	}

	.feniks-reviews__pijlen {
		justify-content: flex-end;
	}
}

@media (max-width: 600px) {
	:root {
		--kop-hoogte: 124px;
	}

	.feniks-topbalk {
		font-size: 13px;
		text-align: center;
	}

	/*
	 * Eén regel in plaats van twee: twee regels kostten op gsm te veel hoogte
	 * van een kop die altijd in beeld blijft. Daarvoor valt "Sophie op" weg en
	 * de zondagsvermelding; nummer en uren staan naast elkaar met het gouden
	 * ruitje ertussen. Wordt het scherm smaller dan een gsm doorgaans is, dan
	 * krimpt de letter mee in plaats van te wrappen.
	 */
	.feniks-topbalk__inner {
		flex-wrap: nowrap;
		justify-content: center;
		gap: 9px;
		padding: 9px 12px;
		font-size: clamp(11.5px, 3.45vw, 13px);
		white-space: nowrap;
	}

	.feniks-topbalk__uren {
		gap: 9px;
	}

	.feniks-topbalk__sophie,
	.feniks-topbalk__uren span:last-child,
	.feniks-topbalk__ruit {
		display: none;
	}

	.feniks-topbalk__ruit--gsm {
		display: block;
	}

	.feniks-merk img {
		height: 46px;
	}

	.feniks-knop {
		width: 100%;
	}

	/*
	 * Reviews op gsm: één kaart over de volle breedte, vegen voor de volgende
	 * (site.js). De bediening eronder op één rij: pijl, stippen, pijl. Twaalf
	 * stippen van 26px pasten niet in de breedte, dus hier smaller.
	 */
	.feniks-review {
		width: 100%;
		min-width: 0;
		padding: 30px 24px;
	}

	.feniks-reviews__venster {
		touch-action: pan-y;
	}

	.feniks-reviews__bediening {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto;
		align-items: center;
		gap: 10px;
	}

	.feniks-reviews__pijlen {
		display: contents;
	}

	.feniks-reviews__pijl[data-vorige] {
		grid-column: 1;
		grid-row: 1;
	}

	.feniks-reviews__stippen {
		grid-column: 2;
		grid-row: 1;
		justify-self: center;
	}

	.feniks-reviews__pijl[data-volgende] {
		grid-column: 3;
		grid-row: 1;
	}

	.feniks-reviews__pijl {
		width: 42px;
		height: 42px;
	}

	.feniks-reviews__stippen-rij {
		gap: 5px;
	}

	.feniks-reviews__stip,
	.feniks-reviews__duim {
		width: 14px;
	}

	/*
	 * Gelijke rijhoogte (grid-auto-rows: 1fr) dient om kaarten naast elkaar
	 * even hoog te maken. In één kolom gaf dat elke kaart de hoogte van de
	 * langste, met een lege strook onder elke korte omschrijving.
	 */
	.feniks-kaarten,
	.feniks-kleine-kaarten,
	.feniks-waarden__grid {
		grid-auto-rows: auto;
	}

	/*
	 * Grotere aanraakvlakken zonder de opmaak te verschuiven: een onzichtbare
	 * rand rond de pijllinks (13px hoog) en een groter vinkje in het formulier.
	 */
	.feniks-pijllink {
		position: relative;
	}

	/* Niet groter: op dienstpagina's staan twee pijllinks vlak onder elkaar,
	   en hun vlakken mogen elkaar niet overlappen. */
	.feniks-pijllink::before {
		content: "";
		position: absolute;
		inset: -9px -6px;
	}

	.feniks-formulier .ginput_container_consent input[type="checkbox"] {
		width: 20px;
		height: 20px;
		margin-top: 2px;
		accent-color: var(--paars);
	}
}

/* De streepjes van de reviewcarrousel zijn 3px hoog; het aanraakvlak niet. */
.feniks-reviews__stip {
	position: relative;
}

.feniks-reviews__stip::before {
	content: "";
	position: absolute;
	inset: -12px -2px;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.feniks-hero__hint svg,
	.feniks-reviews__spoor,
	.feniks-vtijdlijn__voortgang {
		animation: none;
		transition: none;
	}

	/* Het icoon blijft zichtbaar, alleen zonder beweging. */
	.feniks-vstap__icoon,
	.feniks-vstap.is-bereikt .feniks-vstap__icoon {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.feniks-kaart:hover .feniks-kaart__icoon svg {
		transform: none;
	}



	/* Geen verplaatsing of inzoomen voor wie beweging liever vermijdt; de
	   kleur- en schaduwwissels blijven wel, die dragen de terugkoppeling. */
	.feniks-hero__melden:hover,
	.feniks-hero__events:hover,
	.feniks-kaart:hover,
	.feniks-kleine-kaart:hover,
	.feniks-waarde:hover,
	.feniks-thema:hover,
	.feniks-knop:hover,
	.feniks-pijllink:hover b,
	.feniks-kaart:hover .feniks-kaart__meer b,
	.feniks-kleine-kaart:hover b {
		transform: none;
	}
}

/* ─── Pagina-kop (subpagina's) ────────────────────────────────────────────── */
/*
 * Geen opgelegde hoogte op het paarse blok: de inhoud bepaalt de hoogte, want
 * de klant vond lege vlakken onaanvaardbaar. De foto is absoluut gepositioneerd
 * zodat de tekstkolom leidend is.
 */
.feniks-paginakop {
	padding: clamp(56px, 5.5vw, 76px) clamp(20px, 4vw, 44px);
	background: var(--creme);
}

.feniks-paginakop__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	gap: clamp(14px, 1.8vw, 26px);
	align-items: stretch;
	/* Gelijk aan .feniks-hero__grid op de home, zodat elke paginakop even breed
	   uitlijnt. De inhoud eronder houdt zijn eigen, smallere maat. */
	max-width: var(--shell-breed);
	margin-inline: auto;
}

.feniks-paginakop__blok {
	position: relative;
	padding: clamp(36px, 3.4vw, 48px) clamp(30px, 3vw, 44px);
	background: var(--paars);
	box-shadow: 0 20px 46px rgba(63, 46, 74, .3);
}

.feniks-paginakop__blok .feniks-kicker {
	display: block;
	margin-bottom: 14px;
}

.feniks-paginakop h1 {
	margin: 0 0 14px;
	font-weight: 600;
	font-size: clamp(32px, 3.4vw, 46px);
	line-height: 1.04;
	color: #fff;
}

.feniks-paginakop__blok p {
	margin: 0 0 26px;
	max-width: 460px;
	font: 400 16px/1.75 var(--sans);
	color: var(--tekst-op-paars);
	text-wrap: pretty;
}

.feniks-site .feniks-paginakop__knop {
	height: 50px;
	padding: 0 26px;
	background: var(--creme);
	color: var(--paars);
	font-size: 15px;
}

.feniks-site .feniks-paginakop__knop:hover {
	background: #fff;
	color: var(--paars);
}

/* Beeld strak: geen radius, geen kader. */
.feniks-paginakop__beeld {
	position: relative;
	min-height: 240px;
}

.feniks-paginakop__beeld img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Hogere kop met een staande foto, voor een pagina met weinig tekst (404):
   anders blijft er maar een smalle strook foto over. De tekst staat dan
   verticaal in het midden van het paarse blok. */
.feniks-paginakop--hoog .feniks-paginakop__blok {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
}

.feniks-paginakop--hoog .feniks-paginakop__beeld {
	min-height: clamp(380px, 34vw, 480px);
}

@media (max-width: 900px) {
	.feniks-site .feniks-paginakop--hoog .feniks-paginakop__beeld {
		height: 380px;
		min-height: 380px;
	}
}

/* Variant zonder paars blok: enkel kicker + titel + intro op crème. */
.feniks-paginakop--plat {
	padding: clamp(44px, 5.5vw, 72px) var(--sectie-x) clamp(8px, 1.5vw, 16px);
}

/*
 * Een tekstkop lijnt uit met de sectie eronder, niet met de brede hero. Elke
 * pagina zet daarvoor --kop-breedte; de standaard past bij het FAQ-overzicht.
 */
.feniks-paginakop--plat .feniks-shell {
	max-width: var(--kop-breedte, var(--shell));
}

.feniks-paginakop--contact {
	--kop-breedte: 1200px;
}

.feniks-paginakop--thema {
	--kop-breedte: 960px;
}

.feniks-paginakop--tekst {
	--kop-breedte: 1120px;
}

/* Dienstpagina: kop even breed als de tekstkolom eronder, zodat titel,
   intro en broodtekst op dezelfde linkerlijn staan. */
.feniks-paginakop--dienst {
	--kop-breedte: 820px;
}

.feniks-paginakop--plat .feniks-kicker {
	display: block;
	margin-bottom: 14px;
	letter-spacing: .19em;
}

.feniks-paginakop--plat h1 {
	margin: 0 0 14px;
	font-size: clamp(34px, 3.8vw, 50px);
	color: var(--paars);
}

.feniks-paginakop--plat p {
	margin: 0;
	max-width: 640px;
	font: 400 16.5px/1.75 var(--sans);
	color: var(--tekst-zacht);
	text-wrap: pretty;
}

/* ─── Inhoudsfoto met gouden kader ────────────────────────────────────────── */

/*
 * Gouden kader dat schuin achter de foto uitsteekt. Bewust ::before en niet
 * ::after: een pseudo-element na de <img> zou er bovenop liggen, terwijl enkel
 * het uitstekende deel zichtbaar hoort te zijn.
 */
.feniks-kaderfoto {
	position: relative;
}

.feniks-kaderfoto::before {
	content: "";
	position: absolute;
	inset: 0;
	transform: translate(16px, 16px);
	border: 2px solid var(--goud);
	border-radius: 14px;
	pointer-events: none;
}

.feniks-kaderfoto img {
	position: relative;
	display: block;
	width: 100%;
	height: clamp(380px, 40vw, 540px);
	border-radius: 14px;
	object-fit: cover;
	box-shadow: 0 26px 56px rgba(63, 46, 74, .18);
}

/* ─── Over ons ────────────────────────────────────────────────────────────── */

.feniks-tekstblok {
	padding: clamp(48px, 6vw, 86px) var(--sectie-x);
}

.feniks-tekstblok__grid {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(32px, 5vw, 72px);
	/* Centreren, niet rekken: bij stretch vulde de tekstkolom de hoogte van de
	   foto terwijl de inhoud bovenaan bleef staan, wat op brede schermen een
	   verschil van zo'n 30px gaf. */
	align-items: center;
	max-width: 1120px;
	margin-inline: auto;
}

.feniks-tekstblok__beeld {
	flex: 1 1 320px;
	min-width: 0;
	max-width: 480px;
}

.feniks-tekstblok__tekst {
	flex: 1 1 420px;
	min-width: 0;
	max-width: 620px;
	font: 400 17px/1.9 var(--sans);
	color: var(--tekst-zacht);
}

.feniks-tekstblok__tekst p {
	margin: 0 0 18px;
}

/* Over Sophie op gsm: eerst haar verhaal, dan de foto, dan de filmpjes. Met de
   foto bovenaan stonden twee foto's van Sophie vlak na elkaar (ook in de kop). */
@media (max-width: 820px) {
	.feniks-tekstblok--verhaal .feniks-tekstblok__beeld {
		order: 2;
	}
}

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

/*
 * Tekstpagina zonder beeld: de tekstkolom is de hele module. Zonder deze
 * variant bleef de kolom op 620px staan en hing hij links in een vlak van
 * 1120px. Kop en tekst delen nu dezelfde breedte en staan samen gecentreerd.
 */
.feniks-paginakop--smal {
	--kop-breedte: 760px;
}

.feniks-tekstblok--smal {
	max-width: 760px;
}

.feniks-tekstblok--smal .feniks-tekstblok__tekst {
	flex: 1 1 100%;
	max-width: none;
}

/* Privacybeleid: lange lopende tekst met tussentitels. */
.feniks-privacy h2 {
	margin: 38px 0 12px;
	font-weight: 600;
	font-size: 25px;
	line-height: 1.2;
	color: var(--paars);
}

.feniks-privacy h2:first-child {
	margin-top: 0;
}

.feniks-privacy h3 {
	margin: 28px 0 10px;
	font-family: var(--sans);
	font-weight: 700;
	font-size: 16px;
	letter-spacing: .01em;
	color: var(--paars);
}

.feniks-privacy ul {
	margin: 0 0 18px;
	padding-left: 20px;
}

.feniks-privacy li {
	margin-bottom: 10px;
	font: 400 16px/1.8 var(--sans);
	color: var(--tekst-zacht);
}

.feniks-privacy li::marker {
	color: var(--goud-tekst);
}

.feniks-site .feniks-privacy a {
	color: var(--goud-tekst);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color var(--hover-uit) ease;
}

.feniks-site .feniks-privacy a:hover {
	color: var(--paars);
}

.feniks-tekstblok__datum {
	margin-top: 34px;
	padding-top: 18px;
	border-top: 1px solid var(--lijn-creme);
	font-size: 14px;
	color: var(--tekst-zacht);
}

.feniks-manifest {
	padding: clamp(44px, 5.5vw, 72px) var(--sectie-x);
	background: var(--paars);
}

.feniks-manifest p {
	max-width: 900px;
	margin-inline: auto;
	font-family: var(--serif);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(23px, 2.9vw, 34px);
	line-height: 1.35;
	color: #fff;
	text-align: center;
	text-wrap: pretty;
}

.feniks-waarden {
	padding: clamp(48px, 6vw, 86px) var(--sectie-x);
	background: var(--creme-licht);
}

.feniks-waarden__inner {
	max-width: 1120px;
	margin-inline: auto;
}

.feniks-waarden h2 {
	margin: 0 0 clamp(28px, 3.5vw, 42px);
	font-weight: 500;
	font-size: clamp(30px, 3.8vw, 44px);
	line-height: 1.06;
	color: var(--paars);
}

.feniks-waarden__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	grid-auto-rows: 1fr;
	gap: 16px;
}

.feniks-waarde {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 30px 28px 26px;
	background: #fff;
	transition: transform var(--hover-uit) var(--soepel), box-shadow var(--hover-uit) ease;
}

.feniks-waarde:hover {
	transform: translateY(-3px);
	box-shadow: 0 20px 42px rgba(63, 46, 74, .16);
	transition-duration: var(--hover-in);
	transition-timing-function: var(--zacht);
}

.feniks-waarde__icoon {
	margin-bottom: 20px;
	line-height: 0;
}

.feniks-waarde h3 {
	margin: 0 0 12px;
	font-weight: 600;
	font-size: 23px;
	line-height: 1.2;
	color: var(--paars);
}

.feniks-waarde p {
	margin: 0;
	font: 400 15.5px/1.8 var(--sans);
	color: var(--tekst-zacht);
	text-wrap: pretty;
}

/* ─── Verticale tijdlijn (Wat te doen) ────────────────────────────────────── */

.feniks-vtijdlijn-sectie {
	padding: clamp(48px, 6vw, 84px) var(--sectie-x) clamp(30px, 4vw, 50px);
	background: var(--creme-licht);
}

.feniks-vtijdlijn {
	position: relative;
	max-width: 1180px;
	margin-inline: auto;
}

.feniks-vtijdlijn__lijn {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 2px;
	margin-left: -1px;
	background: #E3D2B4;
}

/* Groeit mee met de scrollpositie. */
.feniks-vtijdlijn__voortgang {
	width: 100%;
	height: 0;
	background: var(--goud);
	transition: height .12s linear;
}

.feniks-vtijdlijn__stappen {
	position: relative;
}

.feniks-vstap {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) clamp(40px, 5vw, 64px) minmax(0, 1fr);
	align-items: center;
	margin-bottom: clamp(36px, 4.5vw, 64px);
}

.feniks-vstap__beeld {
	grid-column: 1;
	grid-row: 1;
	padding-right: clamp(6px, 1vw, 14px);
}

.feniks-vstap__bol {
	grid-column: 2;
	grid-row: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.feniks-vstap__bol span {
	width: 22px;
	height: 22px;
	border: 2px solid #E3D2B4;
	border-radius: 50%;
	background: var(--creme-licht);
	box-shadow: 0 0 0 6px var(--creme-licht);
	transition: border-color .35s ease, background-color .35s ease;
}

.feniks-vstap.is-bereikt .feniks-vstap__bol span {
	border-color: var(--goud);
	background: var(--goud);
}

.feniks-vstap__tekst {
	grid-column: 3;
	grid-row: 1;
	padding-left: clamp(8px, 3vw, 40px);
}

/* Even stappen spiegelen: tekst links, beeld rechts. */
.feniks-vstap:nth-child(even) .feniks-vstap__beeld {
	grid-column: 3;
	padding-right: 0;
	padding-left: clamp(6px, 1vw, 14px);
}

.feniks-vstap:nth-child(even) .feniks-vstap__tekst {
	grid-column: 1;
	padding-left: 0;
	padding-right: clamp(8px, 3vw, 40px);
}

.feniks-vstap__kop {
	display: flex;
	align-items: baseline;
	gap: 14px;
	margin-bottom: 14px;
}

.feniks-vstap__nummer {
	font-family: var(--serif);
	font-weight: 600;
	font-size: clamp(46px, 5vw, 64px);
	line-height: .85;
	color: var(--goud);
}

.feniks-vstap h2 {
	margin: 0;
	font-weight: 600;
	font-size: clamp(23px, 2.7vw, 30px);
	line-height: 1.14;
	color: var(--paars);
}

.feniks-vstap__body {
	font: 400 16px/1.85 var(--sans);
	color: var(--tekst-zacht);
}

.feniks-vstap__body p {
	margin: 0 0 14px;
}

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

/*
 * Iconen in plaats van foto's: bij deze stappen werkte fotografie grimmig.
 * Het vlak komt rustig op wanneer de stap bereikt wordt tijdens het scrollen.
 */
/*
 * Het icoon staat los tegen de knooppunt aan, zonder vlak eromheen, en komt
 * rustig op zodra de stap tijdens het scrollen bereikt wordt.
 */
.feniks-vstap__icoon {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	line-height: 0;
	opacity: .3;
	transform: translateY(6px);
	transition: opacity 700ms var(--zacht), transform 700ms var(--zacht);
}

.feniks-vstap:nth-child(even) .feniks-vstap__icoon {
	justify-content: flex-start;
}

.feniks-vstap.is-bereikt .feniks-vstap__icoon {
	opacity: 1;
	transform: none;
}

.feniks-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	margin-bottom: 18px;
}

.feniks-chips span,
.feniks-chips a {
	display: inline-block;
	padding: 9px 16px;
	border-radius: 999px;
	background: var(--creme);
	font: 600 14px var(--sans);
	color: var(--paars);
}

/* Een chip die naar een dienst linkt: dezelfde vorm, met een fijne goudrand en
   een pijltje, zodat te zien is dat er meer achter zit. */
.feniks-site .feniks-chips a {
	box-shadow: inset 0 0 0 1px var(--rand-goud-zacht);
	color: var(--paars);
	transition: background-color var(--hover-uit) ease, box-shadow var(--hover-uit) ease;
}

.feniks-chips a::after {
	content: " \2192";
	color: var(--goud-tekst);
}

.feniks-site .feniks-chips a:hover,
.feniks-site .feniks-chips a:focus-visible {
	background: #fff;
	box-shadow: inset 0 0 0 1px var(--goud);
	transition-duration: var(--hover-in);
}

/* ─── Contactpagina ───────────────────────────────────────────────────────── */

.feniks-contact {
	padding: clamp(24px, 3vw, 40px) var(--sectie-x) clamp(52px, 7vw, 90px);
	background: var(--creme);
}

/*
 * Formulier eerst in de broncode, zodat het op mobiel meteen in beeld komt.
 * Op desktop staat het links en schuift de gegevenskolom mee.
 */
.feniks-contact__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.85fr);
	gap: clamp(28px, 3.5vw, 56px);
	align-items: start;
	max-width: 1200px;
	margin-inline: auto;
}

.feniks-contact__zijbalk {
	position: sticky;
	top: calc(var(--kop-hoogte) + 16px);
}

.feniks-contact__kaart {
	overflow: hidden;
	border: 1px solid var(--lijn-creme);
	background: #fff;
}

/*
 * Gebruikt een apart bijgesneden bestand in plaats van het brede bronbeeld: zo
 * blijft het kader compact genoeg dat de sticky kaart in beeld past, zonder dat
 * de halve vaas meekomt.
 */
.feniks-site .feniks-contact__portret {
	display: block;
	width: 100%;
	height: clamp(210px, 21vw, 280px);
	object-fit: cover;
	object-position: center 16%;
}

.feniks-contact__blokken {
	padding: clamp(24px, 2.4vw, 32px) clamp(22px, 2.2vw, 28px);
}

.feniks-contact__blok + .feniks-contact__blok {
	margin-top: 19px;
	padding-top: 19px;
	border-top: 1px solid var(--lijn-creme);
}

.feniks-contact__blok .feniks-kicker {
	display: block;
	margin-bottom: 9px;
	font-size: 10.5px;
	letter-spacing: .18em;
}

.feniks-site .feniks-contact__tel {
	display: block;
	font-family: var(--serif);
	font-weight: 500;
	font-size: clamp(28px, 2.6vw, 33px);
	line-height: 1.1;
	color: var(--paars);
}

.feniks-site .feniks-contact__tel:hover {
	color: var(--goud-tekst);
}

.feniks-site .feniks-contact__mail {
	display: block;
	font: 600 16px var(--sans);
	color: var(--paars);
	overflow-wrap: anywhere;
}

.feniks-site .feniks-contact__mail:hover {
	color: var(--goud-tekst);
}

.feniks-contact__blok p {
	margin: 7px 0 0;
	font: 400 14.5px/1.7 var(--sans);
	color: var(--tekst-zacht);
	text-wrap: pretty;
}

/* Facebook en Instagram als twee gelijke, omlijnde knoppen: zelfde lijnicoon
   als in de footer, met de naam erbij zodat niemand moet raden. */
.feniks-contact__sociaal {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	margin: 13px 0 0;
	padding: 0;
	list-style: none;
}

.feniks-site .feniks-contact__sociaal a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 44px;
	border: 1px solid var(--lijn-creme);
	border-radius: 999px;
	font: 700 13.5px var(--sans);
	color: var(--paars);
	transition: border-color var(--hover-uit) ease, background-color var(--hover-uit) ease, color var(--hover-uit) ease;
}

.feniks-contact__sociaal svg {
	flex: none;
	color: var(--goud-tekst);
}

.feniks-site .feniks-contact__sociaal a:hover,
.feniks-site .feniks-contact__sociaal a:focus-visible {
	border-color: var(--goud);
	background: var(--creme-licht);
	color: var(--paars);
	transition-duration: var(--hover-in);
	transition-timing-function: var(--zacht);
}

/* ─── Formulier ───────────────────────────────────────────────────────────── */

.feniks-formulier {
	padding: clamp(30px, 3.2vw, 46px);
	border: 1px solid var(--lijn-creme);
	background: #fff;
}

.feniks-formulier h2 {
	margin: 0 0 10px;
	font-weight: 500;
	font-size: clamp(26px, 3vw, 34px);
	line-height: 1.15;
	color: var(--paars);
}

.feniks-formulier__intro {
	margin: 0 0 clamp(24px, 2.6vw, 32px);
	max-width: 520px;
	font: 400 15.5px/1.75 var(--sans);
	color: var(--tekst-zacht);
	text-wrap: pretty;
}

/*
 * Gravity Forms in de huisstijl. De eigen themastijl van de plugin staat uit
 * (zie functions.php), dus hier wordt alles opnieuw opgebouwd.
 */
.feniks-formulier .gform_fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px 18px;
}

.feniks-formulier .gfield {
	grid-column: 1 / -1;
	min-width: 0;
}

.feniks-formulier .gfield--width-half {
	grid-column: span 1;
}

/*
 * Een veld met deelvakken, zoals het naamveld, komt bij Gravity Forms uit een
 * fieldset met een legend in plaats van een div met een label. Dat is correct
 * voor schermlezers, maar de browser hangt er zijn eigen rand en binnenmarge
 * omheen. De eigen stijl van de plugin staat uit, dus die moet hier weg,
 * anders staat er een kadertje rond enkel de naam.
 */
.feniks-formulier fieldset.gfield {
	margin: 0;
	padding: 0;
	border: 0;
}

.feniks-formulier legend.gfield_label {
	padding: 0;
}

/*
 * Het naamveld is één veld met twee invoervakken, Voornaam en Naam. De eigen
 * stijl van de plugin staat uit, dus het raster daarbinnen komt van hier. De
 * tussenruimte is dezelfde als tussen twee gewone halve velden, zodat de naam
 * op één lijn ligt met de rij e-mailadres en telefoon eronder.
 */
.feniks-formulier .ginput_complex {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px 18px;
}

.feniks-formulier .ginput_complex > span {
	display: block;
	min-width: 0;
}

/*
 * De deellabels staan onder hun vakje. Ze herhalen wat er in het vak hoort en
 * zijn dus een aanwijzing, geen titel: kleiner en zachter dan een veldlabel,
 * anders krijgt het naamveld visueel meer gewicht dan alle andere.
 */
.feniks-formulier .gform-field-label--type-sub {
	display: block;
	margin: 6px 0 0;
	font: 400 13px/1.4 var(--sans);
	letter-spacing: 0;
	text-transform: none;
	color: var(--tekst-zacht);
}

/* Labels rustig houden: geen kapitalen of letterspatiëring, dat is de kickerstijl. */
.feniks-formulier .gfield_label {
	display: block;
	margin: 0 0 7px;
	font: 600 14.5px/1.4 var(--sans);
	letter-spacing: 0;
	text-transform: none;
	color: var(--paars);
}

.feniks-formulier .gfield_required {
	margin-left: 5px;
	font: italic 400 12px var(--sans);
	color: var(--tekst-zacht);
}

.feniks-formulier input[type="text"],
.feniks-formulier input[type="email"],
.feniks-formulier input[type="tel"],
.feniks-formulier textarea {
	width: 100%;
	padding: 13px 15px;
	border: 1px solid var(--lijn-creme);
	border-radius: 0;
	background: var(--creme-licht);
	font: 400 16px/1.5 var(--sans);
	color: var(--tekst);
	transition: border-color var(--hover-uit) ease, background-color var(--hover-uit) ease;
}

.feniks-formulier textarea {
	min-height: 170px;
	resize: vertical;
}

.feniks-formulier input::placeholder,
.feniks-formulier textarea::placeholder {
	color: #9b93a3;
}

.feniks-formulier input:hover,
.feniks-formulier textarea:hover {
	border-color: var(--rand-goud-zacht);
}

.feniks-formulier input:focus,
.feniks-formulier textarea:focus {
	border-color: var(--goud);
	background: #fff;
	outline: 2px solid rgba(201, 169, 97, .35);
	outline-offset: 1px;
}

/* Telefoonveld met landkeuze (Gravity Forms, opmaak "formatted"). De knop met
   vlag en landcode kreeg de grijze standaardlook van de plugin; hier wordt hij
   een deel van hetzelfde vak als het nummer. De plugin schrijft zijn regel met
   vier klassen, vandaar de lange selector. */
.feniks-formulier .gform_wrapper.gravity-theme .gfield--type-phone .ginput_country-selector_container {
	justify-content: stretch;
}

.feniks-formulier .gform_wrapper.gravity-theme .gfield--type-phone .gform-phone__country-selector {
	flex: 1 1 auto;
	padding: 0 12px 0 15px;
	border: 1px solid var(--lijn-creme);
	border-radius: 0;
	background-color: var(--creme-licht);
	color: var(--tekst);
	font: 400 16px/1.5 var(--sans);
	box-shadow: none;
	transition: border-color var(--hover-uit) ease, background-color var(--hover-uit) ease;
}

.feniks-formulier .gform_wrapper.gravity-theme .gfield--type-phone .gform-phone__country-selector:hover,
.feniks-formulier .gform_wrapper.gravity-theme .gfield--type-phone .gform-phone__country-selector:focus {
	border-color: var(--rand-goud-zacht);
	background-color: var(--creme-licht);
	color: var(--tekst);
}

.feniks-formulier .gform_wrapper.gravity-theme .gfield--type-phone .gform-phone__country-selector:focus-visible {
	border-color: var(--goud);
	background-color: #fff;
	outline: 2px solid rgba(201, 169, 97, .35);
	outline-offset: 1px;
}

.feniks-formulier .gform_footer {
	margin-top: clamp(22px, 2.4vw, 30px);
	padding: 0;
}

.feniks-formulier .gform_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 56px;
	padding: 0 34px;
	border: 0;
	border-radius: 0;
	background: var(--paars);
	color: #fff;
	font: 800 15.5px/1 var(--sans);
	cursor: pointer;
	transition: background-color var(--hover-uit) ease, color var(--hover-uit) ease, box-shadow var(--hover-uit) ease, transform var(--hover-uit) var(--soepel);
}

.feniks-formulier .gform_button:hover {
	transform: translateY(-1px);
	background: var(--goud);
	color: var(--tekst-op-goud);
	box-shadow: 0 10px 22px rgba(63, 46, 74, .18);
	transition-duration: var(--hover-in);
	transition-timing-function: var(--zacht);
}

.feniks-formulier .gform_button:active {
	transform: translateY(0);
	box-shadow: none;
}

/* Validatie en meldingen in dezelfde taal als de rest. */
.feniks-formulier .gfield_description,
.feniks-formulier .gfield_validation_message {
	margin-top: 7px;
	font: 400 14px/1.6 var(--sans);
	color: var(--tekst-zacht);
}

.feniks-formulier .gfield_validation_message {
	color: #9d3b3b;
}

.feniks-formulier .gfield_error input,
.feniks-formulier .gfield_error textarea {
	border-color: #c07070;
}

.feniks-formulier .gform_validation_errors {
	margin: 0 0 22px;
	padding: 16px 18px;
	border: 1px solid #e0bcbc;
	background: #fbf1f1;
	font: 400 15px/1.6 var(--sans);
	color: #8c3434;
}

.feniks-formulier .gform_validation_errors h2 {
	margin: 0;
	font-family: var(--sans);
	font-size: 15px;
	font-weight: 700;
	color: #8c3434;
}

.feniks-formulier .gform_confirmation_message {
	padding: 22px 24px;
	border: 1px solid var(--rand-goud-zacht);
	background: var(--creme);
	font: 400 16px/1.8 var(--sans);
	color: var(--tekst);
}

/* Honeypot hoort niet zichtbaar te zijn. */
.feniks-formulier .gform_validation_container {
	position: absolute !important;
	left: -9999px;
}

/* ─── FAQ-overzicht ───────────────────────────────────────────────────────── */

.feniks-themas {
	padding: clamp(24px, 3vw, 40px) var(--sectie-x) clamp(52px, 7vw, 90px);
	background: var(--creme);
}

.feniks-themas__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
	align-items: start;
	gap: 18px;
	max-width: var(--shell);
	margin-inline: auto;
}

.feniks-thema {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 32px 30px 22px;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 14px 36px rgba(63, 46, 74, .08);
	transition: transform var(--hover-uit) var(--soepel), box-shadow var(--hover-uit) ease;
}

.feniks-thema:hover {
	transform: translateY(-3px);
	box-shadow: 0 20px 44px rgba(63, 46, 74, .13);
	transition-duration: var(--hover-in);
	transition-timing-function: var(--zacht);
}

.feniks-thema__kop {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 20px;
}

.feniks-thema h2 {
	margin: 0;
	font-weight: 600;
	font-size: 23px;
	line-height: 1.2;
	color: var(--paars);
}

.feniks-thema__aantal {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--paars);
	font: 800 12.5px var(--sans);
	color: var(--goud-licht);
}

.feniks-thema__vragen {
	display: flex;
	flex-direction: column;
}

.feniks-site .feniks-thema__vraag {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	padding: 13px 0;
	border-bottom: 1px solid #F1E8D8;
	font: 400 15.5px/1.5 var(--sans);
	color: var(--tekst-zacht);
	transition: color .25s ease;
}

.feniks-site .feniks-thema__vraag:hover {
	color: var(--paars);
}

.feniks-thema__vraag svg {
	flex: none;
	margin-top: 3px;
}

/* ─── Vraagdetail ─────────────────────────────────────────────────────────── */

.feniks-vraag {
	padding: clamp(40px, 5vw, 68px) var(--sectie-x) clamp(52px, 7vw, 88px);
	background: var(--creme-licht);
}

.feniks-vraag__grid {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(32px, 4vw, 64px);
	align-items: flex-start;
	max-width: 1240px;
	margin-inline: auto;
}

.feniks-vraag__hoofd {
	flex: 1 1 520px;
	min-width: 0;
}

.feniks-kruimels {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 9px;
	margin-bottom: 26px;
	font: 600 13px var(--sans);
	color: var(--tekst-zacht);
}

.feniks-kruimels__scheiding {
	color: #C4B090;
}

.feniks-kruimels__huidig {
	color: var(--goud-tekst);
}

.feniks-site .feniks-kruimels a:hover {
	color: var(--goud-tekst);
}

.feniks-vraag h1 {
	margin: 0 0 22px;
	font-weight: 500;
	font-size: clamp(32px, 4.2vw, 52px);
	line-height: 1.05;
	color: var(--paars);
}

.feniks-vraag__streep {
	width: 56px;
	height: 2px;
	margin-bottom: 30px;
	background: var(--goud);
}

.feniks-vraag__antwoord {
	font: 400 17.5px/1.9 var(--sans);
	color: var(--tekst-zacht);
}

.feniks-vraag__antwoord p {
	margin: 0 0 18px;
}

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

.feniks-vraag__antwoord ul,
.feniks-vraag__antwoord ol {
	margin: 0 0 18px;
	padding-left: 20px;
}

.feniks-vraag__hulp {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-top: clamp(30px, 4vw, 44px);
	padding: 26px 30px;
	border-radius: 14px;
	background: var(--creme);
}

.feniks-vraag__hulp h2 {
	margin: 0 0 6px;
	font-weight: 600;
	font-size: 22px;
	line-height: 1.2;
	color: var(--paars);
}

.feniks-vraag__hulp p {
	margin: 0;
	font: 400 15px/1.6 var(--sans);
	color: var(--tekst-zacht);
}

.feniks-site .feniks-vraag__hulp .feniks-knop {
	height: 54px;
	padding: 0 28px;
	font-size: 15px;
	white-space: nowrap;
}

/* Vorige en volgende als pillen. */
.feniks-vraag__navigatie {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 22px;
}

.feniks-site .feniks-vraagpil {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 50px;
	padding: 0 22px;
	border-radius: 999px;
	font: 700 14.5px/1 var(--sans);
	transition: background-color var(--hover-uit) ease, color var(--hover-uit) ease, border-color var(--hover-uit) ease;
}

.feniks-site .feniks-vraagpil--vorige {
	background: var(--paars);
	color: #fff;
}

.feniks-site .feniks-vraagpil--vorige:hover {
	background: var(--goud);
	color: var(--tekst-op-goud);
	transition-duration: var(--hover-in);
	transition-timing-function: var(--zacht);
}

.feniks-site .feniks-vraagpil--volgende {
	border: 1px solid #D8C7A6;
	color: var(--paars);
}

.feniks-site .feniks-vraagpil--volgende:hover {
	border-color: var(--goud);
	color: var(--goud-tekst);
	transition-duration: var(--hover-in);
	transition-timing-function: var(--zacht);
}

/* Zijbalk met de andere vragen van hetzelfde thema. */
.feniks-vraag__zijbalk {
	/* Groeit bewust niet mee: de leeskolom krijgt de overblijvende ruimte. */
	flex: 0 1 380px;
	/* Loopt mee tijdens het scrollen, zodat het telefoonnummer in beeld blijft.
	   De offset houdt rekening met de sticky kop erboven. */
	position: sticky;
	top: calc(var(--kop-hoogte) + 22px);
	min-width: 0;
	padding: 30px 28px 24px;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 14px 36px rgba(63, 46, 74, .08);
}

.feniks-vraag__zijbalk-label {
	margin-bottom: 4px;
	font: italic 400 14px var(--sans);
	color: var(--goud-tekst);
}

.feniks-vraag__zijbalk h2 {
	margin: 0 0 18px;
	font-weight: 600;
	font-size: 22px;
	line-height: 1.2;
	color: var(--paars);
}

.feniks-site .feniks-thema__vraag--huidig {
	color: var(--goud-tekst);
}

.feniks-vraag__alle {
	display: inline-block;
	margin-top: 18px;
	font: 700 14px var(--sans);
	color: var(--paars);
}

.feniks-site .feniks-vraag__alle:hover {
	color: var(--goud-tekst);
}

/* ─── Responsive voor de nieuwe onderdelen ────────────────────────────────── */

@media (max-width: 900px) {
	.feniks-paginakop__grid {
		grid-template-columns: 1fr;
	}

	.feniks-paginakop__beeld {
		min-height: 260px;
		height: 260px;
	}

	/* Verticale tijdlijn: lijn naar links, alles in één kolom. */
	.feniks-vtijdlijn__lijn {
		left: 11px;
		margin-left: 0;
	}

	.feniks-vstap,
	.feniks-vstap:nth-child(even) {
		grid-template-columns: 40px minmax(0, 1fr);
	}

	.feniks-vstap__bol,
	.feniks-vstap:nth-child(even) .feniks-vstap__bol {
		grid-column: 1;
		grid-row: 1;
		align-self: start;
		justify-content: flex-start;
	}

	.feniks-vstap__tekst,
	.feniks-vstap:nth-child(even) .feniks-vstap__tekst {
		grid-column: 2;
		grid-row: 1;
		padding: 0;
	}

	/*
	 * Het icoon niet onder de tekst laten zakken. In één kolom kwam het los
	 * onder elke stap te staan, om de beurt links en rechts (het zigzag van
	 * desktop), en voegde het per stap een lege strook toe. Nummer, bol en
	 * titel dragen de stap hier al.
	 */
	.feniks-vstap__beeld,
	.feniks-vstap:nth-child(even) .feniks-vstap__beeld {
		display: none;
	}
}

/* Tijdlijn op gsm: compacter, zodat de vijf stappen niet vijf schermen lang
   worden, en meer breedte voor de tekst. */
@media (max-width: 600px) {
	.feniks-vtijdlijn__lijn {
		left: 10px;
	}

	.feniks-vstap,
	.feniks-vstap:nth-child(even) {
		grid-template-columns: 34px minmax(0, 1fr);
		margin-bottom: 40px;
	}

	.feniks-vstap__bol span {
		width: 20px;
		height: 20px;
	}

	.feniks-vstap__kop {
		align-items: baseline;
		gap: 10px;
		margin-bottom: 12px;
	}

	.feniks-vstap__nummer {
		font-size: 34px;
	}

	.feniks-vstap h2 {
		font-size: 22px;
	}

	.feniks-vstap__body {
		line-height: 1.7;
	}

	.feniks-vstap__body p {
		margin-bottom: 12px;
	}

	.feniks-chips {
		gap: 8px;
		margin-bottom: 14px;
	}

	.feniks-chips span,
	.feniks-chips a {
		padding: 8px 14px;
		font-size: 13.5px;
	}
}

@media (max-width: 600px) {
	.feniks-kaderfoto::before {
		transform: translate(10px, 10px);
	}

	.feniks-vraag__hulp {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media (max-width: 980px) {
	/* Onder deze breedte staat de zijbalk onder het antwoord; dan mag hij wel
	   de volle breedte nemen in plaats van als smalle kolom te blijven staan. */
	.feniks-vraag__zijbalk {
		flex: 1 1 100%;
	}
}

@media (max-width: 900px) {
	/* Eén kolom: het formulier staat eerst in de broncode en komt dus bovenaan.
	   Sticky heeft hier geen zin meer. */
	.feniks-contact__grid {
		grid-template-columns: 1fr;
	}

	.feniks-contact__zijbalk {
		position: static;
	}

	.feniks-site .feniks-contact__portret {
		height: clamp(200px, 32vw, 260px);
	}
}

@media (max-width: 560px) {
	.feniks-formulier .gfield--width-half {
		grid-column: 1 / -1;
	}

	/* Voornaam en Naam gaan mee onder elkaar, anders blijven er twee vakjes
	   van nog geen halve schermbreedte over. */
	.feniks-formulier .ginput_complex {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ─── Dienstpagina ────────────────────────────────────────────────────────── */

.feniks-dienst {
	padding: clamp(40px, 5vw, 64px) var(--sectie-x) clamp(52px, 7vw, 88px);
	background: var(--creme-licht);
}

/* Terug naar het overzicht: de kicker in het paarse blok doet dienst als
   kruimelpad, zodat er geen tweede navigatieregel bij komt. */
.feniks-site .feniks-dienstkop__terug {
	text-decoration: none;
	transition: color var(--hover-uit) ease;
}

.feniks-site .feniks-dienstkop__terug:hover {
	color: #fff;
}

/*
 * Beeldkolom zonder foto. Voor de meeste diensten is er nog geen bruikbaar
 * fotomateriaal; dan vult het icoon van de dienst de kolom. Dezelfde maat en
 * plaats als een foto, zodat de kop overal dezelfde opbouw houdt en er niets
 * ontbreekt wanneer er geen beeld is.
 */
.feniks-dienstkop__merkvlak {
	display: grid;
	place-items: center;
	background:
		radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, .55), transparent 70%),
		var(--creme);
	border: 1px solid var(--rand-goud-zacht);
	color: var(--goud-tekst);
}

/* Het icoon staat tussen twee gouden haarlijnen, zoals een boekmerk: dat geeft
   het vlak een opbouw in plaats van één zwevend icoontje in het midden. */
.feniks-dienstkop__icoon {
	position: relative;
	display: block;
	padding: 34px 0;
	line-height: 0;
	opacity: .85;
}

.feniks-dienstkop__icoon::before,
.feniks-dienstkop__icoon::after {
	content: "";
	position: absolute;
	left: 50%;
	width: 56px;
	height: 1px;
	background: var(--goud);
	translate: -50% 0;
}

.feniks-dienstkop__icoon::before {
	top: 0;
}

.feniks-dienstkop__icoon::after {
	bottom: 0;
}

/* Lead: de eerste alinea zwaarder zetten geeft de tekstkolom een aanloop in
   plaats van meteen een blok lopende tekst. */
.feniks-dienst__tekst > p:first-of-type:first-child {
	font-size: 18px;
	line-height: 1.7;
	color: var(--tekst);
}

/* Tussentitels in de dienstteksten: kleiner dan de paginatitel, maar duidelijk
   genoeg om de tekst in leesbare stukken te breken. */
.feniks-dienst__tekst h2 {
	margin: 34px 0 12px;
	font-weight: 600;
	font-size: 26px;
	line-height: 1.2;
	color: var(--paars);
}

.feniks-dienst__tekst > h2:first-child {
	margin-top: 0;
}

.feniks-dienst__tekst li {
	margin-bottom: 8px;
}

.feniks-dienst__tekst li::marker {
	color: var(--goud-tekst);
}

.feniks-site .feniks-dienst__tekst a {
	color: var(--goud-tekst);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.feniks-site .feniks-dienst__tekst a:hover {
	color: var(--paars);
}

/* Gedicht en slotzin op de pagina kinderuitvaarten: in de schreefletter van het
   citaat op de homepagina, met enkel een goudlijn als accent. */
.feniks-dienst__tekst .feniks-dienst__gedicht {
	margin: 0 0 38px;
	padding: 4px 0 4px 24px;
	border-left: 2px solid var(--goud);
}

.feniks-dienst__tekst .feniks-dienst__gedicht p {
	margin: 0;
	font-family: var(--serif);
	font-style: italic;
	font-size: clamp(20px, 2.2vw, 24px);
	line-height: 1.55;
	color: var(--paars);
}

.feniks-dienst__tekst .feniks-dienst__slotzin {
	margin-top: 30px;
	font-family: var(--serif);
	font-style: italic;
	font-size: clamp(20px, 2.2vw, 23px);
	line-height: 1.45;
	color: var(--paars);
	text-wrap: balance;
}

/*
 * Veelgestelde vragen als eigen rij onder tekst en zijbalk. Licht en rustig, in
 * dezelfde crème als de dienstsectie erboven, zodat het leest als een vervolg van
 * de pagina en niet als een blok dat de aandacht opeist. Een fijne lijn scheidt
 * de rij van de tekst; het gouden streepje boven de titel is hetzelfde als boven
 * de tekstkolom. De vragen zijn witte kaarten met de schaduw van de zijbalk.
 */
.feniks-dienstfaq {
	padding: 0 var(--sectie-x) clamp(56px, 7vw, 92px);
	background: var(--creme-licht);
}

.feniks-dienstfaq__grid {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
	gap: clamp(32px, 5vw, 80px);
	align-items: start;
	max-width: 1240px;
	margin-inline: auto;
	padding-top: clamp(44px, 5vw, 64px);
	border-top: 1px solid #EADFCB;
}

/* De titelkolom loopt mee zolang de vragen ernaast scrollen. */
.feniks-dienstfaq__kop {
	position: sticky;
	top: calc(var(--kop-hoogte) + 32px);
}

.feniks-dienstfaq__kop .feniks-vraag__streep {
	margin-bottom: 22px;
}

.feniks-dienstfaq h2 {
	margin: 0 0 16px;
	font-weight: 600;
	font-size: clamp(28px, 2.8vw, 36px);
	line-height: 1.12;
	color: var(--paars);
	text-wrap: balance;
}

.feniks-dienstfaq__kop p {
	margin: 0 0 24px;
	max-width: 360px;
	font: 400 16px/1.8 var(--sans);
	color: var(--tekst-zacht);
}

.feniks-dienstfaq__links {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
}

.feniks-site .feniks-dienstfaq .feniks-pijllink {
	color: var(--paars);
}

.feniks-site .feniks-dienstfaq .feniks-pijllink:hover {
	color: var(--goud-tekst);
}

.feniks-dienstfaq__lijst {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.feniks-dienstfaq__item {
	/* Bovenop de scroll-padding van html (de hoogte van de sticky kop): wie via
	   een anker naar een vraag springt, ziet wat lucht boven de kaart in plaats
	   van een kaart die tegen de navigatie plakt. */
	scroll-margin-top: 28px;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 10px 28px rgba(63, 46, 74, .06);
	transition: box-shadow var(--hover-uit) ease;
}

/* Het enige accent: een goudlijntje links bij de vraag die open staat. */
.feniks-dienstfaq__item[open] {
	box-shadow: inset 3px 0 0 var(--goud), 0 14px 34px rgba(63, 46, 74, .09);
}

.feniks-dienstfaq__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 20px 22px 20px 26px;
	font: 600 20px/1.3 var(--serif);
	color: var(--paars);
	list-style: none;
	cursor: pointer;
	border-radius: 12px;
	transition: color .25s ease;
}

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

.feniks-dienstfaq__item summary:hover {
	color: var(--goud-tekst);
}

.feniks-dienstfaq__item summary:focus-visible {
	outline: 2px solid var(--goud);
	outline-offset: 2px;
}

/* Pijltje in een klein crèmekleurig rondje, dat bij openen omdraait. */
.feniks-dienstfaq__pijl {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--creme-licht);
	color: var(--goud-tekst);
	transition: transform .3s ease, background-color .25s ease;
}

.feniks-dienstfaq__item[open] .feniks-dienstfaq__pijl {
	transform: rotate(180deg);
	background: var(--creme);
}

.feniks-dienstfaq__antwoord {
	padding: 0 26px 24px;
	font: 400 16.5px/1.8 var(--sans);
	color: var(--tekst-zacht);
	text-wrap: pretty;
}

.feniks-dienstfaq__antwoord p {
	margin: 0 0 12px;
}

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

.feniks-site .feniks-dienstfaq__antwoord a {
	color: var(--goud-tekst);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.feniks-site .feniks-dienstfaq__antwoord a:hover {
	color: var(--paars);
}

@media (max-width: 980px) {
	.feniks-dienstfaq__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.feniks-dienstfaq__kop {
		position: static;
	}

	.feniks-dienstfaq__item summary {
		padding: 17px 16px 17px 20px;
		font-size: 18.5px;
	}

	.feniks-dienstfaq__antwoord {
		padding: 0 20px 20px;
	}

	/* De zijbalk staat hier vlak boven de vragenrij. Zijn vragenlijst zou
	   dezelfde vragen nog eens tonen; het telefoonnummer blijft wel staan. */
	.feniks-dienst .feniks-dienst__faq {
		display: none;
	}
}

/* Oproep onder de tekst: de bezoeker heeft net gelezen wat er kan, dit is het
   moment om te bellen. De contactband onderaan blijft de brede afsluiter. */
.feniks-dienst__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 22px;
	margin-top: clamp(32px, 4vw, 44px);
	padding: clamp(26px, 3vw, 34px) clamp(24px, 3vw, 34px);
	border-left: 5px solid var(--paars);
	background: var(--creme);
}

.feniks-dienst__cta h2 {
	margin: 0 0 6px;
	font-weight: 600;
	font-size: 24px;
	line-height: 1.2;
	color: var(--paars);
}

.feniks-dienst__cta p {
	margin: 0;
	max-width: 420px;
	font: 400 15px/1.7 var(--sans);
	color: var(--tekst-zacht);
}

/*
 * De omlijnde knop is gemaakt voor de donkere contactband: crèmekleurige tekst
 * op een crème vlak levert hier een contrast van 1,02 op. Binnen deze oproep
 * dus paars op crème. Het .feniks-site-voorvoegsel is nodig omdat de algemene
 * a-regel anders wint.
 */
.feniks-site .feniks-dienst__cta .feniks-knop--omlijnd {
	border-color: var(--rand-goud-zacht);
	color: var(--paars);
}

.feniks-site .feniks-dienst__cta .feniks-knop--omlijnd:hover {
	border-color: var(--paars);
	background: var(--paars);
	color: var(--creme-licht);
}

/* Andere diensten als eigen sectie, met dezelfde tegels als op de home. */
.feniks-andere {
	padding: clamp(48px, 6vw, 76px) var(--sectie-x);
	background: var(--creme);
}

.feniks-andere .feniks-kaarten {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	margin-bottom: 0;
}

.feniks-andere .feniks-sectiekop h2 {
	font-size: clamp(28px, 3.2vw, 38px);
}

.feniks-dienst__alle {
	display: inline-flex;
	margin-top: clamp(26px, 3vw, 34px);
}

.feniks-dienst .feniks-vraag__meer .feniks-kleine-kaarten {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

/* Belkaart in de zijbalk: dezelfde toon als de contactband, maar compact. */
.feniks-dienst__bel {
	padding: 26px 24px 24px;
	background: var(--paars);
	box-shadow: 0 16px 34px rgba(63, 46, 74, .2);
}

.feniks-dienst__bel-label {
	display: block;
	margin-bottom: 10px;
	font: 800 11.5px var(--sans);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--goud-licht);
}

.feniks-site .feniks-dienst__bel-nummer {
	display: block;
	font-family: var(--serif);
	font-weight: 500;
	font-size: 27px;
	line-height: 1.1;
	color: #fff;
	text-decoration: none;
	transition: color var(--hover-uit) ease;
}

.feniks-site .feniks-dienst__bel-nummer:hover {
	color: var(--goud-licht);
}

.feniks-dienst__bel p {
	margin: 12px 0 0;
	font: 400 14px/1.7 var(--sans);
	color: var(--tekst-op-paars);
}

.feniks-dienst__faq {
	margin-top: 22px;
}

.feniks-dienst__faq h2 {
	margin: 0 0 14px;
	font-weight: 600;
	font-size: 23px;
	line-height: 1.15;
	color: var(--paars);
}

@media (max-width: 1000px) {
	/* Onder elkaar heeft meelopen geen zin meer. */
	.feniks-vraag__zijbalk {
		position: static;
	}
}

@media (max-width: 860px) {
	.feniks-dienstkop__merkvlak {
		min-height: 200px;
	}

	.feniks-dienstkop__icoon {
		padding: 24px 0;
	}

	.feniks-dienstkop__icoon svg {
		width: 76px;
		height: 76px;
	}
}

/* ─── Cookiebanner (WPConsent) ────────────────────────────────────────────── */
/*
 * De plugin rendert banner en voorkeuren in een shadow DOM. Van buitenaf kunnen
 * we daar enkel bij via de host (#wpconsent-container) en via de onderdelen die
 * de plugin met part= naar buiten brengt. Vandaar ::part() in plaats van gewone
 * klassen: dat is de enige haak die er is.
 *
 * Twee dingen om te onthouden bij het aanpassen hiervan:
 *   - de plugin zet :host { all: initial }, dus box-sizing staat binnen op
 *     content-box. Elk onderdeel met padding krijgt hier border-box mee, anders
 *     telt de padding bij de breedte op en loopt de kaart op smalle schermen uit
 *     haar oevers;
 *   - flex-wrap over de shadowgrens pakt niet betrouwbaar, vandaar dat de
 *     knoppenrij een grid is en geen flexbox.
 *
 * De plugin kent zelf geen centrale dialoog, alleen een balk of een hoekkaartje.
 * De klasse op <html> komt uit site.js en verschijnt zodra de banner opent; de
 * host wordt dan een schermvullende laag en de kaart komt in het midden.
 */
html.feniks-consent-open #wpconsent-container {
	position: fixed;
	inset: 0;
	z-index: 900000;
	background: rgba(30, 20, 38, .6);
}

#wpconsent-container::part(wpconsent-banner) {
	box-sizing: border-box;
	inset: auto;
	top: 50%;
	left: 50%;
	translate: -50% -50%;
	width: min(540px, calc(100vw - 28px));
	min-width: 0;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	grid-template-columns: minmax(0, 1fr);
	grid-gap: 0;
	box-shadow: 0 34px 90px rgba(18, 11, 24, .5);
	font-family: var(--sans);
}

/* Gouden lijn op de bovenrand, hetzelfde accent als elders op de site. */
#wpconsent-container::part(wpconsent-banner-body) {
	box-sizing: border-box;
	min-width: 0;
	padding: 34px 36px 26px;
	border-top: 3px solid var(--goud);
	text-align: left;
	font-size: 15px;
	line-height: 1.75;
}

/*
 * Aanvaarden over de volle breedte, de twee andere keuzes eronder naast
 * elkaar: de aangeraden keuze is meteen duidelijk zonder de rest te verstoppen.
 */
#wpconsent-container::part(wpconsent-banner-footer) {
	box-sizing: border-box;
	min-width: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	padding: 0 36px 28px;
}

#wpconsent-container::part(wpconsent-button-accept) {
	grid-column: 1 / -1;
}

#wpconsent-container::part(wpconsent-button-accept),
#wpconsent-container::part(wpconsent-button-cancel),
#wpconsent-container::part(wpconsent-button-preferences),
#wpconsent-container::part(wpconsent-preferences-accept-button),
#wpconsent-container::part(wpconsent-preferences-cancel-button),
#wpconsent-container::part(wpconsent-preferences-save-button) {
	box-sizing: border-box;
	min-width: 0;
	height: 46px;
	padding: 0 18px;
	border: 0;
	border-radius: 0;
	font-family: var(--sans);
	font-weight: 800;
	font-size: 11px;
	letter-spacing: .15em;
	text-transform: uppercase;
	cursor: pointer;
}

/* ── Voorkeurenvenster ── */

#wpconsent-container::part(wpconsent-preferences-content) {
	box-sizing: border-box;
	border-radius: 0;
	border-top: 3px solid var(--goud);
	font-family: var(--sans);
	box-shadow: 0 34px 90px rgba(18, 11, 24, .5);
}

#wpconsent-container::part(wpconsent-preferences-title) {
	font-family: var(--serif);
	font-weight: 600;
	font-size: 25px;
	line-height: 1.15;
}

#wpconsent-container::part(wpconsent-preferences-description) {
	font-size: 14.5px;
	line-height: 1.7;
}

#wpconsent-container::part(wpconsent-accordion-toggle) {
	font-family: var(--sans);
	font-weight: 700;
	font-size: 14.5px;
}

#wpconsent-container::part(wpconsent-preferences-actions) {
	gap: 10px;
}

@media (max-width: 600px) {
	#wpconsent-container::part(wpconsent-banner-body) {
		padding: 26px 22px 20px;
	}

	#wpconsent-container::part(wpconsent-banner-footer) {
		grid-template-columns: 1fr;
		padding: 0 22px 22px;
	}

	/* Op een laag scherm (kleine gsm, adresbalk erbij) mag de kaart niet
	   onder de rand verdwijnen: dan scrolt ze zelf. */
	#wpconsent-container::part(wpconsent-banner) {
		max-height: calc(100dvh - 24px);
		overflow-y: auto;
	}

	#wpconsent-container::part(wpconsent-preferences-content) {
		width: calc(100vw - 24px);
		max-height: calc(100dvh - 24px);
	}

	/*
	 * De drie knoppen van de voorkeuren stonden naast elkaar en "Voorkeuren
	 * bewaren" viel rechts van het scherm. Nu onder elkaar over de volle
	 * breedte, zoals in de banner. De linkerhelft (aanvaarden, sluiten) is een
	 * eigen blok in de plugin; met display: contents worden die knoppen gewone
	 * cellen van hetzelfde raster als bewaren.
	 */
	#wpconsent-container::part(wpconsent-preferences-buttons) {
		display: grid;
		grid-template-columns: 1fr;
		gap: 10px;
		width: 100%;
	}

	#wpconsent-container::part(wpconsent-preferences-buttons-left) {
		display: contents;
	}

	#wpconsent-container::part(wpconsent-preferences-accept-button),
	#wpconsent-container::part(wpconsent-preferences-cancel-button),
	#wpconsent-container::part(wpconsent-preferences-save-button) {
		width: 100%;
		margin: 0;
		padding: 0 10px;
	}
}

/* ─── Aanbevelingen ───────────────────────────────────────────────────────── */

/* Voet van een reviewkaart: initiaal, naam en maand. Gedeeld door de carrousel
   op de home en het raster op de aanbevelingenpagina. */
.feniks-review__voet {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: auto;
	padding-top: 20px;
	border-top: 1px solid var(--lijn-creme);
}

.feniks-review__rondje {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--creme);
	color: var(--paars);
	font: 700 15px/1 var(--sans);
}

.feniks-review__voet strong {
	display: block;
	margin: 0;
	font: 800 13px var(--sans);
	letter-spacing: .03em;
	color: var(--paars);
}

.feniks-review__datum {
	display: block;
	margin-top: 3px;
	font: 400 12.5px var(--sans);
	color: var(--tekst-zacht);
}

/* De kop van de carrousel linkt naar Google, dus de hele regel is klikbaar. */
a.feniks-reviews__google {
	text-decoration: none;
	transition: color var(--hover-uit) ease;
}

a.feniks-reviews__google:hover {
	color: var(--paars);
}

.feniks-reviews__alle {
	margin-top: 26px;
	color: var(--paars);
}

/* ── Kop met score ────────────────────────────────────────────────────────── */

.feniks-aanbevelingenkop {
	padding: clamp(44px, 5.5vw, 72px) var(--sectie-x) clamp(26px, 3vw, 36px);
	background: var(--creme-licht);
}

.feniks-aanbevelingenkop h1 {
	margin: 0 0 14px;
	font-size: clamp(34px, 3.8vw, 50px);
	color: var(--paars);
}

.feniks-aanbevelingenkop > .feniks-shell > p {
	margin: 0;
	max-width: 640px;
	font: 400 16.5px/1.75 var(--sans);
	color: var(--tekst-zacht);
	text-wrap: pretty;
}

/* Score als eigen regel onder de intro: cijfer, sterren en toelichting links,
   de link naar Google helemaal rechts. */
.feniks-score__blok {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 22px;
	margin-top: clamp(24px, 3vw, 34px);
	padding-top: 26px;
	border-top: 1px solid var(--lijn-creme);
}

.feniks-score__cijfer {
	font: 500 clamp(38px, 4.4vw, 52px)/1 var(--serif);
	color: var(--paars);
}

.feniks-score__sterren {
	color: var(--goud-tekst);
	font-size: 21px;
	letter-spacing: .09em;
}

.feniks-score__tekst {
	font: 400 15px var(--sans);
	color: var(--tekst-zacht);
}

.feniks-score__blok .feniks-pijllink {
	margin-left: auto;
	color: var(--paars);
}

/* ── Het raster ────────────────────────────────────────────────────────────── */

.feniks-aanbevelingen {
	padding: 0 var(--sectie-x) var(--sectie-y);
	background: var(--creme-licht);
}

.feniks-aanbevelingen__inleiding {
	max-width: 62ch;
	margin-bottom: clamp(26px, 3vw, 38px);
	font: 400 17px/1.8 var(--sans);
	color: var(--tekst-zacht);
}

/* Metselverband in plaats van een grid: reviews lopen sterk uiteen in lengte
   en een grid zou elke rij op de langste kaart uitlijnen, met gaten tot gevolg.
   Kolommen vullen van boven naar beneden en laten geen wit achter. */
.feniks-aanbevelingen__raster {
	columns: 3 320px;
	column-gap: 18px;
}

/* Met script: eigen kolommen, gevuld in leesvolgorde (zie site.js). */
.feniks-aanbevelingen__raster.is-rijen {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	columns: auto;
}

.feniks-aanbevelingen__kolom {
	flex: 1 1 0;
	min-width: 0;
}

.feniks-aanbeveling {
	/* break-inside houdt een kaart heel; zonder dit knipt de browser een review
	   halverwege af en loopt hij door in de volgende kolom. */
	break-inside: avoid;
	display: flex;
	flex-direction: column;
	margin: 0 0 18px;
	padding: 30px 28px;
	background: #fff;
	/* Dezelfde gouden haarlijn als op de dienstkaarten, zodat het raster bij de
	   rest van de site hoort en niet als een losse widget leest. */
	border-top: 3px solid var(--goud);
}

.feniks-aanbeveling__sterren {
	margin-bottom: 14px;
	color: var(--goud-tekst);
	font-size: 12.5px;
	letter-spacing: .16em;
}

.feniks-aanbeveling p {
	margin: 0 0 4px;
	font: 400 15.5px/1.8 var(--sans);
	color: var(--tekst-zacht);
	text-wrap: pretty;
}

.feniks-aanbevelingen__leeg {
	max-width: 54ch;
	font: 400 17px/1.8 var(--sans);
	color: var(--tekst-zacht);
}

/* ── Oproep onderaan ──────────────────────────────────────────────────────── */

.feniks-aanbevelingen__oproep {
	margin-top: clamp(34px, 4vw, 52px);
	padding: clamp(28px, 3.4vw, 40px);
	background: var(--creme);
	text-align: center;
}

.feniks-aanbevelingen__oproep h2 {
	margin: 0 0 10px;
	font-weight: 500;
	font-size: clamp(24px, 2.6vw, 30px);
	color: var(--paars);
}

.feniks-aanbevelingen__oproep p {
	max-width: 48ch;
	margin: 0 auto 22px;
	font: 400 16px/1.75 var(--sans);
	color: var(--tekst-zacht);
}

@media (max-width: 760px) {
	.feniks-aanbevelingen__raster {
		columns: 1;
	}

	.feniks-score__blok .feniks-pijllink {
		margin-left: 0;
	}
}

/* Profielfoto van de reviewer, zelfde maat als het initiaalrondje zodat de
   voet van een kaart niet verspringt wanneer de ene foto heeft en de andere
   niet. De foto's staan op onze eigen server, nooit op googleusercontent.com. */
.feniks-review__foto {
	flex: none;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--creme);
}

/* ─── Aanvraagformulier voor de bundel ────────────────────────────────────── */

/* Staat in de tekstkolom van een dienstpagina en niet in een eigen kolom, dus
   hij krijgt hier de omkadering die het contactformulier van de pagina zelf
   krijgt: een crème vlak met een gouden haarlijn erboven. */
.feniks-bundel {
	margin-top: clamp(28px, 3.4vw, 40px);
	padding: clamp(26px, 3vw, 36px);
	background: var(--creme-licht);
	border-top: 3px solid var(--goud);
}

.feniks-bundel h2 {
	margin: 0 0 8px;
	font-weight: 500;
	font-size: clamp(22px, 2.4vw, 28px);
	color: var(--paars);
}

.feniks-bundel .feniks-formulier__intro {
	margin-bottom: 22px;
}

/* De bevestiging na het versturen: de downloadknop mag opvallen. */
.feniks-bundel .gform_confirmation_message {
	font: 400 16px/1.8 var(--sans);
	color: var(--tekst-zacht);
}

.feniks-bundel .gform_confirmation_message p {
	margin: 0 0 16px;
}

.feniks-bundel .gform_confirmation_message .feniks-knop {
	margin: 4px 0 8px;
}

/* Het vraagveld is optioneel; een vak van tien regels zet de bezoeker onnodig
   onder druk om iets te schrijven. Hoogte en niet min-height: de hoogte komt
   uit het rows-attribuut van Gravity Forms en die moet overschreven worden. */
.feniks-bundel textarea {
	height: 120px;
	min-height: 0;
}

/* ─── Onderste footerbalk: links onderlijnd ───────────────────────────────── */

/*
 * De knop Privacyvoorkeuren kreeg een fijne onderlijn zodat ze als link leest.
 * Daardoor stond ze er wél onderlijnd bij en de echte links ernaast niet. Deze
 * regel trekt dat gelijk, maar alleen in de copyrightbalk: het menu daarboven
 * blijft zonder onderlijning. Zelfde soortelijk gewicht als ".feniks-site a",
 * dus dit moet later in het bestand staan om te winnen.
 */
.feniks-footer__balk a {
	border-bottom: 1px solid rgba(255, 255, 255, .25);
	transition: color var(--hover-uit) ease, border-color var(--hover-uit) ease;
}

.feniks-footer__balk a:hover {
	color: var(--goud-licht);
	border-color: var(--goud-licht);
}

/*
 * Op het privacybeleid zelf mag de banner de tekst niet afdekken: daar moet een
 * bezoeker net kunnen lezen waar hij toestemming voor geeft. De schermvullende
 * laag vervalt en de kaart gaat onderaan staan. Zelfde soortelijk gewicht als
 * de regel die de laag aanzet, dus deze moet er later in het bestand op volgen.
 */
html.feniks-privacypagina.feniks-consent-open #wpconsent-container {
	inset: auto 0 0 0;
	background: none;
}

/*
 * En hij wordt daar ook kleiner en gaat naar de rechteronderhoek. De tekstkolom
 * van het beleid staat links van het midden, dus daar blijft hij vrij van. Het
 * venster in het midden is juist voor een eerste bezoek op een gewone pagina;
 * op het beleid zelf is het vooral iets dat in de weg zit.
 */
/*
 * De plugin rekent intern met --wpconsent-min-width, standaard 526px. Enkel de
 * breedte van de kaart verkleinen liet de tekst dus buiten de kaart lopen: de
 * inhoud bleef op 526 gedimensioneerd. Die variabele erft door in de shadow
 * DOM, dus die zetten we mee om; dat is de hendel die de plugin zelf gebruikt.
 */
html.feniks-privacypagina #wpconsent-container {
	--wpconsent-min-width: 340px;
}

html.feniks-privacypagina #wpconsent-container::part(wpconsent-banner) {
	top: auto;
	left: auto;
	right: 18px;
	bottom: 18px;
	translate: none;
	width: min(360px, calc(100vw - 28px));
	box-shadow: 0 16px 44px rgba(18, 11, 24, .38);
}

html.feniks-privacypagina #wpconsent-container::part(wpconsent-banner-body) {
	padding: 20px 22px 14px;
	font-size: 13px;
	line-height: 1.65;
}

html.feniks-privacypagina #wpconsent-container::part(wpconsent-banner-footer) {
	gap: 7px;
	padding: 0 22px 18px;
}

html.feniks-privacypagina #wpconsent-container::part(wpconsent-button-accept),
html.feniks-privacypagina #wpconsent-container::part(wpconsent-button-cancel),
html.feniks-privacypagina #wpconsent-container::part(wpconsent-button-preferences) {
	height: 38px;
	padding: 0 10px;
	font-size: 10px;
	letter-spacing: .1em;
}

/* ─── Videorubriek ────────────────────────────────────────────────────────── */

.feniks-videokop {
	padding: clamp(44px, 5.5vw, 72px) var(--sectie-x) clamp(26px, 3vw, 36px);
	background: var(--creme-licht);
}

.feniks-videokop h1 {
	margin: 0 0 14px;
	font-size: clamp(34px, 3.8vw, 50px);
	color: var(--paars);
}

.feniks-videokop__intro {
	max-width: 640px;
	font: 400 16.5px/1.75 var(--sans);
	color: var(--tekst-zacht);
	text-wrap: pretty;
}

.feniks-videokop__intro p {
	margin: 0 0 12px;
}

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

.feniks-videos {
	padding: 0 var(--sectie-x) var(--sectie-y);
	background: var(--creme-licht);
}

/*
 * Wel een echt raster hier en geen metselverband zoals bij de aanbevelingen:
 * elke kaart heeft dezelfde beeldverhouding, dus de rijen lijnen vanzelf uit en
 * er blijft geen wit onderaan een kolom staan.
 */
.feniks-videos__raster {
	display: grid;
	/* 340 en niet 290: op een breed scherm geeft 290 vier kolommen, en dan staan
	   de stills zo klein dat je niet meer ziet waar een filmpje over gaat. */
	grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
	gap: clamp(20px, 2.4vw, 30px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.feniks-video__knop {
	display: flex;
	flex-direction: column;
	gap: 14px;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	text-align: left;
	cursor: pointer;
	color: inherit;
	font: inherit;
}

.feniks-video__beeld {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: var(--paars);
}

.feniks-video__beeld img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--hover-uit) ease, opacity var(--hover-uit) ease;
}

.feniks-video__geenbeeld {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(140deg, var(--paars), #2b1f35);
}

/* Het afspeelteken staat op een rondje met een doorschijnende laag eronder, zodat
   het leesbaar blijft op zowel een donkere als een lichte still. */
.feniks-video__afspelen {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--paars);
	transition: background-color var(--hover-uit) ease;
}

.feniks-video__afspelen::before {
	content: "";
	position: absolute;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background: rgba(245, 238, 225, .92);
	transition: transform var(--hover-uit) ease, background-color var(--hover-uit) ease;
}

.feniks-video__afspelen svg {
	position: relative;
	/* Een driehoek oogt optisch links van het midden in een rondje. */
	margin-left: 3px;
}

.feniks-video__knop:hover .feniks-video__afspelen::before,
.feniks-video__knop:focus-visible .feniks-video__afspelen::before {
	transform: scale(1.08);
	background: var(--goud);
	transition-duration: var(--hover-in);
	transition-timing-function: var(--zacht);
}

.feniks-video__knop:hover .feniks-video__beeld img {
	transform: scale(1.03);
	opacity: .9;
	transition-duration: var(--hover-in);
	transition-timing-function: var(--zacht);
}

.feniks-video__knop:focus-visible {
	outline: 2px solid var(--goud);
	outline-offset: 4px;
}

.feniks-video__titel {
	font: 600 19px/1.45 var(--serif);
	color: var(--paars);
	text-wrap: pretty;
}

.feniks-video__knop:hover .feniks-video__titel {
	color: var(--goud-tekst);
}

.feniks-videos__leeg {
	margin: 0;
	font: 400 17px/1.8 var(--sans);
	color: var(--tekst-zacht);
}

/* ─── Het venster met de speler ───────────────────────────────────────────── */

.feniks-videovenster {
	width: min(960px, calc(100vw - 32px));
	max-width: none;
	padding: 0;
	border: 0;
	background: none;
	overflow: visible;
}

.feniks-videovenster::backdrop {
	background: rgba(35, 25, 44, .82);
}

.feniks-videovenster__kader {
	background: var(--paars);
	box-shadow: 0 24px 60px rgba(20, 12, 28, .45);
}

.feniks-videovenster__balk {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 16px 18px;
}

.feniks-videovenster__titel {
	margin: 0;
	font: 600 18px/1.4 var(--serif);
	color: #fff;
}

.feniks-videovenster__sluiten {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid rgba(214, 196, 150, .3);
	background: none;
	color: var(--goud-licht);
	cursor: pointer;
	transition: color var(--hover-uit) ease, border-color var(--hover-uit) ease, background-color var(--hover-uit) ease;
}

.feniks-videovenster__sluiten:hover,
.feniks-videovenster__sluiten:focus-visible {
	border-color: var(--goud-licht);
	background: rgba(214, 196, 150, .14);
	color: #fff;
}

.feniks-videovenster__inhoud {
	aspect-ratio: 16 / 9;
	background: #000;
}

.feniks-videovenster__inhoud iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/*
 * Geen toestemming voor marketingcookies: dan geen speler maar dit blok. De
 * beeldverhouding van 16 op 9 gaat er dan af, want die hoort bij een video en
 * laat onder drie regels tekst een half scherm crème over.
 */
.feniks-videovenster__inhoud--tekst {
	aspect-ratio: auto;
	background: var(--creme-licht);
}

.feniks-videovenster__toestemming {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	padding: clamp(24px, 4vw, 40px);
	background: var(--creme-licht);
}

.feniks-videovenster__toestemming p {
	margin: 0;
	max-width: 46ch;
	font: 400 16px/1.75 var(--sans);
	color: var(--tekst);
}

/* De omlijnde knop is getekend voor een paarse ondergrond. Hier staat hij op
   crème, dus krijgt hij dezelfde behandeling als op de dienstpagina's. */
.feniks-site .feniks-videovenster__toestemming .feniks-knop--omlijnd {
	border-color: var(--rand-goud-zacht);
	color: var(--paars);
}

.feniks-site .feniks-videovenster__toestemming .feniks-knop--omlijnd:hover {
	border-color: var(--paars);
	background: var(--paars);
	color: var(--creme-licht);
}

@media (max-width: 560px) {
	.feniks-videos__raster {
		grid-template-columns: minmax(0, 1fr);
	}

	.feniks-video__afspelen::before {
		width: 48px;
		height: 48px;
	}
}

/* Verwijzing naar de videorubriek onderaan het FAQ-overzicht. */
.feniks-videoverwijzing {
	padding: 0 var(--sectie-x) clamp(44px, 5vw, 68px);
}

.feniks-videoverwijzing__blok {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px 32px;
	padding: clamp(26px, 3.2vw, 40px);
	border: 1px solid var(--rand-goud-zacht);
	background: var(--creme);
}

.feniks-videoverwijzing__blok h2 {
	margin: 0 0 8px;
	font-size: clamp(23px, 2.2vw, 29px);
	color: var(--paars);
}

.feniks-videoverwijzing__blok p {
	margin: 0;
	max-width: 52ch;
	font: 400 16px/1.7 var(--sans);
	color: var(--tekst-zacht);
}

/* ─── Reviewstrook ────────────────────────────────────────────────────────── */

/*
 * Eén regel boven de contactband op de belangrijke pagina's: score, één korte
 * review en een link naar het zijpaneel. Licht en laag, zodat het bevestigt
 * zonder de pagina over te nemen; de homepagina heeft de volledige carrousel.
 */
.feniks-reviewstrook {
	padding: 22px var(--sectie-x);
	border-top: 1px solid var(--lijn-creme);
	background: var(--creme-licht);
}

.feniks-reviewstrook__inner {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: clamp(20px, 3vw, 44px);
	max-width: 1320px;
	margin-inline: auto;
}

.feniks-reviewstrook__score {
	display: flex;
	align-items: center;
	gap: 13px;
}

.feniks-reviewstrook__cijfer {
	font: 600 40px/1 var(--serif);
	color: var(--paars);
}

.feniks-reviewstrook .feniks-sterren {
	display: block;
	font-size: 15px;
	line-height: 1.2;
}

.feniks-reviewstrook__aantal {
	display: block;
	margin-top: 2px;
	font: 400 12.5px/1.4 var(--sans);
	color: var(--tekst-zacht);
}

.feniks-reviewstrook__citaat {
	margin: 0;
	padding-left: clamp(20px, 3vw, 44px);
	border-left: 1px solid var(--rand-goud-zacht);
}

.feniks-reviewstrook__citaat blockquote {
	margin: 0;
}

.feniks-reviewstrook__citaat p {
	margin: 0;
	font: italic 400 19px/1.4 var(--serif);
	color: var(--paars);
	text-wrap: pretty;
}

.feniks-reviewstrook__citaat figcaption {
	margin-top: 4px;
	font: 700 11px var(--sans);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--goud-tekst);
}

.feniks-reviewstrook__link {
	color: var(--paars);
	white-space: nowrap;
}

@media (max-width: 860px) {
	.feniks-reviewstrook__inner {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.feniks-reviewstrook__citaat {
		padding: 14px 0 0;
		border-top: 1px solid var(--lijn-creme);
		border-left: 0;
	}

	.feniks-reviewstrook__citaat p {
		font-size: 17.5px;
	}
}

/* ─── Reviewbadge in de footer ────────────────────────────────────────────── */

/* Onder de contactgegevens: de score groot in de schreefletter, ernaast de
   sterren, het aantal en een leeslink. Geen kader, alleen een goudlijn links
   en een zweem licht, zodat het aanwezig is zonder als knop te roepen. */
.feniks-footer .feniks-footer__reviews {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	margin-top: 22px;
	padding: 12px 20px 12px 16px;
	border-left: 2px solid var(--goud);
	background: rgba(255, 255, 255, .04);
	color: #C4B7CD;
	transition: background-color var(--hover-uit) ease, border-left-color var(--hover-uit) ease;
}

.feniks-footer .feniks-footer__reviews:hover,
.feniks-footer .feniks-footer__reviews:focus-visible {
	border-left-color: var(--goud-licht);
	background: rgba(255, 255, 255, .08);
	transition-duration: var(--hover-in);
	transition-timing-function: var(--zacht);
}

.feniks-footer__reviews-cijfer {
	font: 600 38px/1 var(--serif);
	color: #fff;
}

.feniks-footer__reviews-sterren {
	display: block;
	font-size: 13px;
	line-height: 1.3;
	letter-spacing: .14em;
	color: var(--goud-licht);
}

.feniks-footer__reviews-tekst {
	display: block;
	font: 400 13px/1.45 var(--sans);
}

.feniks-footer__reviews-lees {
	display: block;
	margin-top: 3px;
	font: 800 11px/1.4 var(--sans);
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--goud-licht);
}

.feniks-footer__reviews-lees b {
	display: inline-block;
	margin-left: 4px;
	transition: transform var(--hover-uit) var(--soepel);
}

.feniks-footer .feniks-footer__reviews:hover .feniks-footer__reviews-lees b {
	transform: translateX(3px);
	transition-duration: var(--hover-in);
	transition-timing-function: var(--zacht);
}

/* ─── Zijpaneel met reviews ───────────────────────────────────────────────── */

html:has(.feniks-reviewlade[open]) {
	overflow: hidden;
}

.feniks-reviewlade {
	position: fixed;
	inset: 0 0 0 auto;
	width: min(480px, 100vw);
	max-width: none;
	height: 100dvh;
	max-height: none;
	margin: 0 0 0 auto;
	padding: 0;
	border: 0;
	background: #fff;
	color: var(--tekst);
	box-shadow: -24px 0 60px rgba(20, 12, 28, .28);
	overflow: hidden;
}

.feniks-reviewlade[open] {
	animation: feniks-lade-in .5s var(--zacht);
}

.feniks-reviewlade.is-sluitend {
	animation: feniks-lade-uit .28s ease-in forwards;
}

.feniks-reviewlade::backdrop {
	background: rgba(35, 25, 44, .6);
	animation: feniks-waas-in .5s ease;
}

.feniks-reviewlade.is-sluitend::backdrop {
	animation: feniks-waas-uit .28s ease-in forwards;
}

@keyframes feniks-lade-in {
	from { transform: translateX(100%); }
	to { transform: none; }
}

@keyframes feniks-lade-uit {
	from { transform: none; }
	to { transform: translateX(100%); }
}

@keyframes feniks-waas-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes feniks-waas-uit {
	from { opacity: 1; }
	to { opacity: 0; }
}

.feniks-reviewlade__paneel {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.feniks-reviewlade__kop {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 18px;
	padding: 28px 28px 24px;
	background: var(--paars);
}

.feniks-reviewlade__label {
	font: 800 11px var(--sans);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--goud-licht);
}

.feniks-reviewlade__kop h2 {
	margin: 8px 0 0;
	font: 500 28px/1.12 var(--serif);
	color: #fff;
}

.feniks-reviewlade__sluit {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid rgba(214, 196, 150, .3);
	background: none;
	color: var(--goud-licht);
	cursor: pointer;
	transition: color var(--hover-uit) ease, border-color var(--hover-uit) ease, background-color var(--hover-uit) ease;
}

.feniks-reviewlade__sluit:hover,
.feniks-reviewlade__sluit:focus-visible {
	border-color: var(--goud-licht);
	background: rgba(214, 196, 150, .14);
	color: #fff;
}

.feniks-reviewlade__score {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 28px;
	background: var(--creme);
}

.feniks-reviewlade__cijfer {
	font: 600 44px/1 var(--serif);
	color: var(--paars);
}

.feniks-reviewlade__score .feniks-sterren {
	display: block;
	font-size: 17px;
	line-height: 1.3;
}

.feniks-reviewlade__aantal {
	display: block;
	font: 400 13px/1.4 var(--sans);
	color: var(--tekst-zacht);
}

.feniks-reviewlade__lijst {
	flex: 1;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 4px 28px 8px;
}

.feniks-reviewlade__review {
	padding: 24px 0;
	border-bottom: 1px solid var(--lijn-creme);
}

.feniks-reviewlade__review:last-child {
	border-bottom: 0;
}

/* De review waar "Lees meer" naartoe sprong, licht even op. */
.feniks-reviewlade__review.is-gekozen {
	animation: feniks-gekozen 2.4s var(--zacht);
}

@keyframes feniks-gekozen {
	0%,
	35% {
		box-shadow: -14px 0 0 var(--creme), 14px 0 0 var(--creme);
		background: var(--creme);
	}

	100% {
		box-shadow: -14px 0 0 transparent, 14px 0 0 transparent;
		background: transparent;
	}
}

/* "Lees meer" onder een ingekorte review in de carrousel. Dezelfde vorm als
   "Meer hierover" op de dienstkaarten. */
.feniks-review__meer {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: -8px 0 22px;
	font: 800 11.5px var(--sans);
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--paars);
}

.feniks-review__meer b {
	color: var(--goud-tekst);
	font-weight: 400;
	transition: transform var(--hover-uit) var(--soepel);
}

.feniks-review__meer:hover b {
	transform: translateX(5px);
	transition-duration: var(--hover-in);
	transition-timing-function: var(--zacht);
}

.feniks-reviewlade__review .feniks-review__sterren {
	margin-bottom: 10px;
}

.feniks-reviewlade__review p {
	margin: 0 0 16px;
	font: 400 15.5px/1.75 var(--sans);
	color: var(--tekst-zacht);
	text-wrap: pretty;
}

.feniks-reviewlade__review .feniks-review__voet {
	padding-top: 0;
	border-top: 0;
}

.feniks-reviewlade__voet {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 22px;
	padding: 18px 28px calc(18px + env(safe-area-inset-bottom));
	border-top: 1px solid var(--lijn-creme);
}

.feniks-reviewlade__voet .feniks-pijllink {
	color: var(--paars);
}

@media (prefers-reduced-motion: reduce) {
	.feniks-reviewlade[open],
	.feniks-reviewlade::backdrop {
		animation: none;
	}
}

/* ─── Pagina niet gevonden ────────────────────────────────────────────────── */

.feniks-nietgevonden {
	padding: var(--sectie-y) var(--sectie-x);
	background: var(--creme);
}


/* ─── Zoeken in de veelgestelde vragen ────────────────────────────────────── */

/*
 * Eén veld in de kop van het FAQ-overzicht, in dezelfde witte kaart met ronde
 * hoeken als de themakaarten eronder. De suggesties schuiven eronder open als
 * een losse kaart, zodat het overzicht zelf niet verspringt.
 */
.feniks-faqzoek {
	position: relative;
	max-width: 760px;
	margin-top: 30px;
}

.feniks-faqzoek__veld {
	display: flex;
	align-items: center;
	gap: 12px;
	height: 62px;
	padding: 0 10px 0 20px;
	border: 1px solid var(--lijn-creme);
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 14px 36px rgba(63, 46, 74, .08);
	color: var(--goud-tekst);
	transition: border-color var(--hover-uit) ease, box-shadow var(--hover-uit) ease;
}

.feniks-faqzoek__veld:focus-within {
	border-color: var(--rand-goud-zacht);
	box-shadow: 0 0 0 4px rgba(201, 169, 97, .18), 0 18px 40px rgba(63, 46, 74, .1);
	transition-duration: var(--hover-in);
}

.feniks-faqzoek__veld svg {
	flex: none;
}

.feniks-faqzoek__veld input[type="search"] {
	flex: 1;
	min-width: 0;
	height: 100%;
	padding: 0;
	border: 0;
	outline: 0;
	background: none;
	font: 400 17px var(--sans);
	color: var(--tekst);
	-webkit-appearance: none;
	appearance: none;
}

.feniks-faqzoek__veld input::placeholder {
	color: var(--tekst-zacht);
	opacity: .75;
}

.feniks-faqzoek__veld input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

.feniks-faqzoek__wis {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--creme-licht);
	color: var(--paars);
	cursor: pointer;
}

.feniks-faqzoek__wis[hidden] {
	display: none;
}

/* Het paneel hangt onder het veld (62px), niet onder de knopjes "vaak gezocht". */
.feniks-faqzoek__paneel {
	position: absolute;
	top: 62px;
	left: 0;
	right: 0;
	z-index: 30;
	max-height: min(70vh, 540px);
	margin-top: 8px;
	padding: 8px;
	overflow-y: auto;
	overscroll-behavior: contain;
	border: 1px solid var(--lijn-creme);
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 26px 54px rgba(63, 46, 74, .16);
}

.feniks-faqzoek__paneel[hidden],
.feniks-faqzoek__status[hidden],
.feniks-faqzoek__lijst[hidden],
.feniks-faqzoek__leeg[hidden],
.feniks-faqzoek__correctie[hidden] {
	display: none;
}

/* Dubbele klasse: de algemene regel voor alinea's in de paginakop maakte dit
   kopje anders even groot als de inleiding. */
.feniks-faqzoek .feniks-faqzoek__status {
	margin: 4px 14px 8px;
	font: 800 10.5px/1.4 var(--sans);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--tekst-zacht);
}

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

/* Een haarlijn tussen de resultaten, zodat elke vraag een eigen vak is. */
.feniks-faqzoek__lijst li + li {
	border-top: 1px solid var(--lijn-creme);
}

.feniks-faqzoek__lijst a {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 18px;
	padding: 14px 16px 15px;
	border-radius: 8px;
	transition: background-color 120ms ease, box-shadow 120ms ease;
}

/* Het gekozen resultaat: crème vlak met een goudlijn links, zoals de vraag die
   openstaat in de vragenrij op de dienstpagina's. */
.feniks-faqzoek__lijst [aria-selected="true"] a {
	background: var(--creme-licht);
	box-shadow: inset 3px 0 0 var(--goud);
}

.feniks-faqzoek__lijst [aria-selected="true"] + li {
	border-top-color: transparent;
}

.feniks-faqzoek__pijl {
	font: 400 18px/1 var(--sans);
	color: var(--rand-goud-zacht);
	transition: color 120ms ease, transform 160ms var(--soepel);
}

.feniks-faqzoek__lijst [aria-selected="true"] .feniks-faqzoek__pijl {
	color: var(--goud-tekst);
	transform: translateX(3px);
}

.feniks-faqzoek__thema {
	display: block;
	font: 700 10.5px var(--sans);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--goud-tekst);
}

.feniks-faqzoek__vraag {
	display: block;
	margin: 3px 0 4px;
	font: 600 19px/1.3 var(--serif);
	color: var(--paars);
}

.feniks-faqzoek__vraag mark {
	background: none;
	color: inherit;
	box-shadow: inset 0 -.36em 0 rgba(201, 169, 97, .4);
}

.feniks-faqzoek__fragment {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	font: 400 14px/1.55 var(--sans);
	color: var(--tekst-zacht);
}

.feniks-faqzoek__leeg {
	padding: 12px 14px 14px;
}

.feniks-faqzoek .feniks-faqzoek__leeg p {
	margin: 0 0 12px;
	font: 400 15px/1.65 var(--sans);
	color: var(--tekst-zacht);
}

.feniks-faqzoek__correctie button {
	padding: 0;
	border: 0;
	background: none;
	font: 600 17px var(--serif);
	color: var(--paars);
	text-decoration: underline;
	text-decoration-color: var(--rand-goud-zacht);
	text-underline-offset: 3px;
	cursor: pointer;
}

.feniks-faqzoek__acties {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 26px;
}

.feniks-faqzoek__acties .feniks-pijllink {
	color: var(--paars);
}


/* ─── Mobiel menu ─────────────────────────────────────────────────────────── */

/* Op desktop staat de contactknop in de balk; dit blok is enkel voor mobiel. */
.feniks-nav__mobiel {
	display: none;
}

@media (max-width: 1100px) {
	html.feniks-menu-open {
		overflow: hidden;
	}

	/* De drie streepjes worden een kruisje zodra het menu open is. */
	.feniks-menu-toggle {
		position: relative;
		width: 44px;
		height: 44px;
	}

	.feniks-menu-toggle span:not(.screen-reader-text) {
		transition: transform .32s var(--zacht), opacity .2s ease;
	}

	.feniks-menu-toggle[aria-expanded="true"] span:nth-of-type(2) {
		transform: translateY(6.5px) rotate(45deg);
	}

	.feniks-menu-toggle[aria-expanded="true"] span:nth-of-type(3) {
		opacity: 0;
	}

	.feniks-menu-toggle[aria-expanded="true"] span:nth-of-type(4) {
		transform: translateY(-6.5px) rotate(-45deg);
	}

	/*
	 * Een rustig paneel over de volle hoogte onder de kop, in plaats van een
	 * lijstje dat over de pagina hangt. Grote schreefletters zoals de titels op
	 * de site, en onderaan meteen bellen of contact.
	 */
	.feniks-nav__lijst {
		position: fixed;
		inset: var(--menu-top, 132px) 0 0 0;
		display: flex;
		flex-direction: column;
		padding: 10px var(--sectie-x) calc(28px + env(safe-area-inset-bottom));
		overflow-y: auto;
		overscroll-behavior: contain;
		border-top: 1px solid var(--lijn-creme);
		background: var(--creme-licht);
		box-shadow: none;
		visibility: hidden;
		opacity: 0;
		transform: translateY(-8px);
		transition: opacity .28s ease, transform .36s var(--zacht), visibility 0s linear .36s;
	}

	.feniks-nav__lijst.is-open {
		display: flex;
		visibility: visible;
		opacity: 1;
		transform: none;
		transition: opacity .28s ease, transform .36s var(--zacht), visibility 0s;
	}

	.feniks-menu li {
		border-bottom: 1px solid var(--lijn-creme);
	}

	.feniks-menu a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		padding: 15px 0;
		font: 500 26px/1.2 var(--serif);
		color: var(--paars);
	}

	.feniks-menu a::after {
		content: "\2192";
		font: 400 17px/1 var(--sans);
		color: var(--rand-goud-zacht);
		transition: transform var(--hover-uit) var(--soepel), color var(--hover-uit) ease;
	}

	.feniks-menu a:hover::after,
	.feniks-menu .current-menu-item > a::after,
	.feniks-menu .current_page_item > a::after {
		color: var(--goud-tekst);
		transform: translateX(3px);
	}

	/*
	 * Bellen en contact plakken onderaan het paneel: op een gsm met adresbalk
	 * (zo'n 650px hoog) vielen ze anders onder de rand. Is de lijst langer dan
	 * het scherm, dan schuiven de links eronder door.
	 */
	.feniks-nav__mobiel {
		position: sticky;
		bottom: 0;
		display: grid;
		gap: 10px;
		margin-top: auto;
		padding-top: 22px;
		background: var(--creme-licht);
	}

	.feniks-nav__mobiel .feniks-knop {
		width: 100%;
	}

	.feniks-nav__mobiel p {
		margin: 4px 0 0;
		font: 400 13.5px/1.5 var(--sans);
		text-align: center;
		color: var(--tekst-zacht);
	}

	/* De zwevende knop hoort niet boven een open menu te zweven. */
	html.feniks-menu-open .feniks-mobielbalk {
		opacity: 0;
		visibility: hidden;
	}
}

/* Op gsm iets compacter, zodat "Wat te doen bij een overlijden" op één regel
   past en het hele menu met de knoppen in één scherm staat. */
@media (max-width: 600px) {
	.feniks-nav__lijst {
		padding-top: 4px;
		padding-bottom: calc(18px + env(safe-area-inset-bottom));
	}

	.feniks-menu a {
		padding: 13px 0;
		font-size: 22px;
	}

	.feniks-nav__mobiel {
		padding-top: 18px;
	}
}

@media (max-width: 1100px) and (prefers-reduced-motion: reduce) {
	.feniks-nav__lijst,
	.feniks-nav__lijst.is-open,
	.feniks-menu-toggle span:not(.screen-reader-text) {
		transform: none;
		transition: none;
	}
}

/* ─── Contactbalk onderaan op mobiel ──────────────────────────────────────── */

/*
 * Over de volle breedte, in het donkerpaars van de footer met een goudlijn
 * erboven. Links de belknop in goud, want bellen is wat iemand op dit moment
 * het vaakst wil; rechts een kleinere knop voor een bericht. De balk schuift
 * van onderen in en is op desktop helemaal afwezig: daar staat de contactknop
 * altijd zichtbaar in de kop.
 */
.feniks-mobielbalk {
	display: none;
}

@media (max-width: 820px) {
	.feniks-mobielbalk {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 55;
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 8px;
		padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
		border-top: 2px solid var(--goud);
		background: var(--paars-donker);
		box-shadow: 0 -12px 30px rgba(20, 12, 28, .22);
		visibility: hidden;
		transform: translateY(110%);
		transition: transform .42s var(--zacht), visibility 0s linear .42s;
	}

	.feniks-mobielbalk.is-zichtbaar {
		visibility: visible;
		transform: none;
		transition: transform .42s var(--zacht), visibility 0s;
	}

	.feniks-site .feniks-mobielbalk a {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 11px;
		height: 54px;
		padding: 0 18px;
		text-decoration: none;
	}

	.feniks-site .feniks-mobielbalk__bel {
		background: var(--goud);
		color: var(--tekst-op-goud);
	}

	.feniks-mobielbalk__bel span {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		line-height: 1.15;
	}

	.feniks-mobielbalk__bel strong {
		font: 800 16px/1.15 var(--sans);
	}

	.feniks-mobielbalk__bel small {
		font: 600 11.5px/1.3 var(--sans);
		letter-spacing: .02em;
		opacity: .78;
	}

	.feniks-site .feniks-mobielbalk__contact {
		border: 1px solid rgba(232, 206, 154, .42);
		color: #F0E6D2;
		font: 800 14.5px/1 var(--sans);
	}

	.feniks-mobielbalk__contact svg {
		color: var(--goud-licht);
	}

	.feniks-site .feniks-mobielbalk__bel:active {
		background: var(--goud-licht);
	}

	.feniks-site .feniks-mobielbalk__contact:active {
		background: rgba(232, 206, 154, .12);
	}
}

@media (max-width: 820px) and (prefers-reduced-motion: reduce) {
	.feniks-mobielbalk,
	.feniks-mobielbalk.is-zichtbaar {
		transition: none;
	}
}

/* De drie stappen naar de toestemming, met de knopnamen in het vet zoals ze in
   het cookievenster staan. Genummerd in goud, in de stijl van de tijdlijn op
   "Wat te doen bij een overlijden". */
.feniks-videovenster__stappen {
	margin: -4px 0 0;
	padding: 0;
	list-style: none;
	counter-reset: stap;
}

.feniks-videovenster__stappen li {
	position: relative;
	margin: 0 0 8px;
	padding-left: 34px;
	font: 400 15.5px/1.6 var(--sans);
	color: var(--tekst);
	counter-increment: stap;
}

.feniks-videovenster__stappen li::before {
	content: counter(stap);
	position: absolute;
	top: 1px;
	left: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 23px;
	height: 23px;
	border-radius: 50%;
	background: var(--creme);
	font: 700 12px/1 var(--sans);
	color: var(--goud-tekst);
}

.feniks-videovenster__stappen strong {
	color: var(--paars);
}

/* ─── Over ons: de filmpjes van Sophie ────────────────────────────────────── */

/* Eén uitklapblok in de stijl van de vragen op een dienstpagina, onder foto en
   verhaal samen, met een rond paars afspeelteken als herkenning. Zelfde
   breedte als het raster erboven. */
.feniks-sophievideo__rij {
	max-width: 1120px;
	margin: clamp(40px, 5vw, 64px) auto 0;
}

.feniks-sophievideo__kop {
	display: flex;
	align-items: center;
	gap: 16px;
	min-width: 0;
}

.feniks-sophievideo__icoon {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--paars);
	color: var(--goud-licht);
	transition: background-color var(--hover-uit) ease, color var(--hover-uit) ease;
}

.feniks-sophievideo__icoon svg {
	/* Een driehoek oogt optisch links van het midden in een rondje. */
	margin-left: 2px;
}

.feniks-sophievideo summary:hover .feniks-sophievideo__icoon {
	background: var(--goud);
	color: var(--paars);
	transition-duration: var(--hover-in);
}

.feniks-sophievideo__kop small {
	display: block;
	margin-top: 4px;
	font: 600 11px/1.3 var(--sans);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--goud-tekst);
}

/* Opengeklapt: uitleg links, onder de titel uitgelijnd (26 + 46 + 16), de
   twee reels rechts. */
.feniks-sophievideo__inhoud {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 500px);
	gap: clamp(28px, 4vw, 60px);
	align-items: start;
	padding: 2px 26px 28px 88px;
}

.feniks-sophievideo__tekst > p {
	max-width: 440px;
	margin: 0;
	font: 400 16.5px/1.8 var(--sans);
	color: var(--tekst-zacht);
	text-wrap: pretty;
}

/* Twee reels naast elkaar, ook op mobiel. */
.feniks-sophievideo .feniks-videos__raster--staand {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(14px, 1.6vw, 22px);
}

.feniks-sophievideo .feniks-video__knop {
	gap: 10px;
}

/* Rechte cijfers: de oude stijl van Cormorant maakt van "Deel 1" een "Deel I". */
.feniks-sophievideo .feniks-videos__raster--staand .feniks-video__titel {
	font-size: 16.5px;
	font-variant-numeric: lining-nums;
}

/* Het verzoek om toestemming, vooraf en rustig: geen waarschuwing, maar een
   crèmekleurig kadertje met een tekstlink. */
.feniks-sophievideo__toestemming {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	max-width: 440px;
	margin-top: 22px;
	padding: 15px 18px;
	border-radius: 10px;
	background: var(--creme-licht);
	color: var(--goud-tekst);
}

.feniks-sophievideo__toestemming[hidden] {
	display: none;
}

.feniks-sophievideo__toestemming svg {
	flex: none;
	margin-top: 2px;
}

.feniks-sophievideo__toestemming p {
	margin: 0 0 6px;
	font: 400 14.5px/1.65 var(--sans);
	color: var(--tekst-zacht);
}

.feniks-sophievideo__cookies {
	padding: 0;
	border: 0;
	background: none;
	font: 700 14px/1.5 var(--sans);
	color: var(--paars);
	cursor: pointer;
}

.feniks-sophievideo__cookies b {
	display: inline-block;
	margin-left: 3px;
	color: var(--goud-tekst);
	transition: transform var(--hover-uit) ease;
}

.feniks-sophievideo__cookies:hover {
	color: var(--goud-tekst);
}

.feniks-sophievideo__cookies:hover b {
	transform: translateX(3px);
	transition-duration: var(--hover-in);
}

.feniks-sophievideo__cookies:focus-visible {
	outline: 2px solid var(--goud);
	outline-offset: 3px;
}

@media (max-width: 860px) {
	.feniks-sophievideo__inhoud {
		grid-template-columns: minmax(0, 1fr);
		gap: 22px;
		padding: 0 20px 20px;
	}

	.feniks-sophievideo__icoon {
		width: 40px;
		height: 40px;
	}
}

/* ─── Pagina Social media ─────────────────────────────────────────────────── */

/* De kanalen in het paarse kopblok, als omlijnde knoppen in de kleuren van de
   tekst op paars: dezelfde aanpak als de omlijnde knop in de contactband. */
.feniks-sociaalrij {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
}

.feniks-site .feniks-sociaalrij a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 46px;
	padding: 0 18px 0 14px;
	border: 1px solid rgba(232, 206, 154, .4);
	font: 700 14px var(--sans);
	color: #F0E6D2;
	transition: border-color var(--hover-uit) ease, background-color var(--hover-uit) ease, color var(--hover-uit) ease;
}

.feniks-sociaalrij svg {
	color: var(--goud-licht);
}

.feniks-site .feniks-sociaalrij a:hover,
.feniks-site .feniks-sociaalrij a:focus-visible {
	border-color: var(--goud-licht);
	background: rgba(232, 206, 154, .1);
	color: #fff;
	transition-duration: var(--hover-in);
	transition-timing-function: var(--zacht);
}

@media (max-width: 640px) {
	/* Twee gelijke kolommen, anders staan er vier knoppen van ongelijke
	   breedte over twee rijen. */
	.feniks-sociaalrij {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.feniks-site .feniks-sociaalrij a {
		width: 100%;
	}
}

/* De reeksen lijnen uit met het paarse kopblok erboven: zelfde brede maat en
   zelfde zijmarge. */
.feniks-videos--uitgelijnd {
	padding-right: clamp(20px, 4vw, 44px);
	padding-left: clamp(20px, 4vw, 44px);
}

.feniks-videos--uitgelijnd > .feniks-shell {
	max-width: var(--shell-breed);
}

/* Elke reeks een eigen kop, met de link naar Instagram of YouTube rechts. */
.feniks-videos__kop {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 14px 30px;
	margin-bottom: clamp(20px, 2.6vw, 30px);
	padding-top: clamp(28px, 3.6vw, 44px);
	border-top: 1px solid var(--lijn-creme);
}

.feniks-videos__kop h2 {
	margin: 0 0 8px;
	font: 500 clamp(28px, 3vw, 38px)/1.1 var(--serif);
	color: var(--paars);
}

.feniks-videos__kop p {
	margin: 0;
	max-width: 560px;
	font: 400 16px/1.7 var(--sans);
	color: var(--tekst-zacht);
}

.feniks-videos__kop .feniks-pijllink {
	color: var(--paars);
}

.feniks-videos + .feniks-videos {
	padding-top: clamp(8px, 1vw, 12px);
}

/* ─── Reels van Instagram: staand ─────────────────────────────────────────── */

/*
 * Reels zijn 9 op 16. In het gewone raster van 16 op 9 zou er van elk beeld
 * maar een strook overblijven, dus een reeks reels krijgt smallere, rechte
 * kaarten. Vaste breedte per kaart in plaats van uitrekken: twee reels hoeven
 * niet de halve pagina te vullen.
 */
/* Vier per rij (eerst vijf smalle): groot genoeg om te zien waarover een reel
   gaat. Op tablet drie, op mobiel twee. */
.feniks-videos__raster--staand {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(18px, 2vw, 26px);
}

@media (max-width: 1000px) {
	.feniks-videos__raster--staand {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.feniks-videos__raster--staand .feniks-video__beeld {
	aspect-ratio: 9 / 16;
	border-radius: 10px;
}

/* De afspeelknop linksonder: in het midden lag hij op de titel die Sophie zelf
   in haar reels zet. */
.feniks-videos__raster--staand .feniks-video__afspelen {
	align-items: flex-end;
	justify-content: flex-start;
	padding: 14px;
}

.feniks-videos__raster--staand .feniks-video__afspelen::before {
	width: 46px;
	height: 46px;
	left: 14px;
	bottom: 14px;
}

.feniks-videos__raster--staand .feniks-video__afspelen svg {
	width: 46px;
	height: 18px;
	margin-left: 2px;
	margin-bottom: 14px;
}

.feniks-videos__raster--staand .feniks-video__titel {
	font-size: 17.5px;
	line-height: 1.35;
}

@media (max-width: 520px) {
	.feniks-videos__raster--staand {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px;
	}
}

/* Het venster voor een reel: smal en hoog, met de insluiting van Instagram
   zoals die is (kop, reel en voet), op een witte achtergrond. */
.feniks-videovenster--staand {
	width: min(420px, calc(100vw - 32px));
}

.feniks-videovenster--staand .feniks-videovenster__inhoud {
	aspect-ratio: auto;
	height: min(calc(100dvh - 130px), 800px);
	background: #fff;
}

.feniks-videovenster--staand .feniks-videovenster__inhoud--tekst {
	height: auto;
	background: var(--creme-licht);
}