/* =========================================================
   Nida ul Islam - app.css
   Opbouw: basis, typografie, transitie, knoppen, header, menu,
   hero, gebedstijden, blokken, formulieren, footer, overig, print.
   Alle kleuren en maten komen uit de tokens in style.css.
   ========================================================= */

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	-webkit-tap-highlight-color: transparent;
	scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
	margin: 0;
	background: var(--c-bg-deep);
	color: var(--c-creme);
	font-family: var(--f-text);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}

img,
svg,
video,
iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
figure { margin: 0; }
address { font-style: normal; }
:where(ul, ol)[class] { list-style: none; margin: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--c-goud); outline-offset: 3px; border-radius: 4px; }

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

.skip-link {
	position: fixed;
	top: var(--rand); left: var(--rand);
	z-index: 100;
	padding: 0.75rem 1.25rem;
	border-radius: var(--radius-pill);
	background: var(--c-goud);
	color: var(--c-ink);
	font-weight: 600;
	text-decoration: none;
	transform: translateY(-200%);
	transition: transform 0.3s var(--ease-out);
}
.skip-link:focus { transform: none; }

.wrap {
	width: 100%;
	max-width: calc(var(--wrap) + 2 * var(--gutter));
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.wrap--smal { max-width: calc(var(--wrap-smal) + 2 * var(--gutter)); }

/* De pagina als kaart boven het menu (menu.js). */
.site {
	position: relative;
	z-index: 2;
	min-height: 100vh;
	background: var(--c-bg);
	transform-origin: 0 50%;
}
.site__vangnet { display: none; }

/* Secties: volle banden. Donker of zee met lichte tekst, licht met donkere tekst. */
.section { position: relative; padding-block: var(--sp-7); }
.section--marge-klein { padding-block: var(--sp-5); }
.section--marge-geen { padding-block: 0; }
.section--vlak {
	margin: var(--rand);
	border-radius: var(--radius-lg);
	color: var(--c-ink);
	padding-block: var(--sp-6);
}
.section--vlak.section--marge-klein { padding-block: var(--sp-5); }
.section--vlak.section--marge-geen { padding-block: var(--sp-4); }
.section--creme { background: var(--c-creme); }
.section--zand { background: var(--c-zand); }
.section--vlak + .section--vlak { margin-top: 0; }

/* Het sterpatroon uit het houtwerk van de moskee, als zachte achtergrond. */
.hero__patroon,
.paginakop__patroon {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88' viewBox='0 0 88 88'%3E%3Cg fill='none' stroke='%23d8b46a' stroke-width='1'%3E%3Cpath d='M28.6 28.6h30.8v30.8H28.6z'/%3E%3Cpath d='M44 22.2 65.8 44 44 65.8 22.2 44z'/%3E%3Cpath d='M0 44h22.2M65.8 44H88M44 0v22.2M44 65.8V88'/%3E%3C/g%3E%3C/svg%3E");
	background-size: 88px 88px;
	opacity: 0.07;
	-webkit-mask-image: radial-gradient(120% 90% at 85% 10%, #000 0%, transparent 70%);
	mask-image: radial-gradient(120% 90% at 85% 10%, #000 0%, transparent 70%);
}

/* ---------- Typografie ---------- */
h1, h2, h3, h4 {
	margin: 0;
	font-family: var(--f-display);
	font-weight: 400;
	line-height: var(--lh-head);
	letter-spacing: -0.015em;
	font-variation-settings: "opsz" 96, "SOFT" 50;
	text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: -0.025em; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.title-line { display: block; }

.kicker {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0 0 1.1rem;
	font-size: var(--fs-kicker);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-goud);
}
.kicker::before {
	content: "";
	width: 0.55rem; height: 0.55rem;
	background: currentColor;
	transform: rotate(45deg);
	flex: none;
}
.section--vlak .kicker { color: var(--c-groen); }
.kicker--licht { color: var(--c-goud-licht); }

.arabisch {
	font-family: var(--f-arab);
	color: var(--c-goud);
	line-height: 1.5;
}

.richtext { max-width: 62ch; }
.richtext p { text-wrap: pretty; }
.richtext a { color: var(--c-goud); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.section--vlak .richtext a { color: var(--c-groen); }
.richtext strong { font-weight: 650; }
.richtext ul,
.richtext ol { margin: 0 0 1em; padding-left: 1.25em; }
.richtext li { margin-bottom: 0.35em; }
.richtext ul li::marker { color: var(--c-goud); }
.richtext--groot { font-size: var(--fs-lead); line-height: 1.55; }

.prose { font-size: var(--fs-lead); line-height: 1.65; }
.prose > * + * { margin-top: 1em; }
.prose h2 { font-size: var(--fs-h3); margin-top: 1.8em; }
.prose h3 { font-size: var(--fs-h4); margin-top: 1.5em; font-family: var(--f-text); font-weight: 650; letter-spacing: 0; }
.prose a { color: var(--c-goud); }
.prose img { border-radius: var(--radius); }

.lijnlink {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-weight: 600;
	text-decoration: none;
	background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
	padding-bottom: 0.15rem;
	transition: background-size 0.5s var(--ease);
}
.lijnlink .icoon { width: 1.05em; height: 1.05em; transition: transform 0.4s var(--ease); }
.lijnlink:hover { background-size: 0 1px; background-position: 100% 100%; }
.lijnlink:hover .icoon { transform: translateX(3px); }
.lijnlink--licht { color: var(--c-goud-licht); }

/* ---------- Transitie (de tekenlijn van innovatiemedia.nl, in goud) ---------- */
.transition {
	position: fixed;
	inset: 0;
	z-index: 60;
	pointer-events: none;
	overflow: clip;
}
.transition__shape { position: absolute; inset: 0; color: var(--c-goud); }
.transition__svg {
	position: absolute;
	top: -15%; left: -15%;
	width: 130%; height: 130%;
	max-width: none;
}
.transition__ster {
	position: absolute;
	top: 50%; left: 50%;
	width: clamp(4rem, 3rem + 4vw, 6.5rem);
	color: var(--c-bg);
	transform: translate(-50%, -50%);
	opacity: 0;
}
.js.is-loading:not(.is-reduced) .transition__svg path { stroke-width: 36%; }
.js.is-loading:not(.is-reduced) .transition__ster { opacity: 1; }
.js.is-loading .transition { animation: nida-cover-uit 0.5s ease 5s forwards; }
@keyframes nida-cover-uit { to { opacity: 0; visibility: hidden; } }
.is-transitioning .transition { pointer-events: auto; }

/* ---------- Knoppen en pillen ---------- */
.btns { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: var(--sp-4); }

.pill,
.btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	height: var(--btn-h);
	padding: 0 var(--btn-px);
	border: 1px solid transparent;
	border-radius: var(--radius-pill);
	font-family: var(--f-text);
	font-weight: 600;
	font-size: var(--fs-btn);
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	overflow: hidden;
	isolation: isolate;
	background: none;
	transition: color 0.45s var(--ease), border-color 0.45s var(--ease), background-color 0.45s var(--ease);
}
.btn .icoon,
.pill .icoon { width: 1.1rem; height: 1.1rem; position: relative; }

/* De krabbel: één golvende lijn die zich tekent en de knop vult (buttons.js).
   Toetsenbordfocus vult direct. */
.scribble {
	position: absolute;
	inset: -1px;
	z-index: -1;
	border-radius: inherit;
	overflow: hidden;
	color: var(--scribble, var(--c-creme));
	pointer-events: none;
}
.scribble svg { width: 100%; height: 100%; }
.pill:focus-visible .scribble path,
.btn:focus-visible .scribble path { stroke-width: 62; }
.pill__label,
.btn__label { position: relative; line-height: 1.25; }

.btn--primair { background: var(--c-goud); color: var(--c-ink); --scribble: var(--c-goud-licht); }
.btn--groen { background: var(--c-creme); color: var(--c-ink); --scribble: var(--c-white); }
.btn--omlijnd { border-color: rgba(245, 239, 227, 0.55); color: var(--c-creme); --scribble: var(--c-creme); }
.btn--omlijnd .btn__label { mix-blend-mode: difference; }

.btn--op-licht.btn--groen { background: var(--c-ink); color: var(--c-creme); --scribble: var(--c-groen); }
.btn--op-licht.btn--omlijnd { border-color: var(--c-ink); color: var(--c-ink); --scribble: var(--c-ink); }
.btn--op-licht.btn--omlijnd .btn__label { mix-blend-mode: normal; transition: color 0.3s ease 0.3s; }
.btn--op-licht.btn--omlijnd.is-hover,
.btn--op-licht.btn--omlijnd:focus-visible { color: var(--c-creme); }
.btn--op-licht.btn--primair { --scribble: var(--c-goud-donker); }

.pill {
	height: 2.875rem;
	padding: 0 1.15rem;
	border-color: var(--c-line);
	background: rgba(8, 21, 15, 0.55);
	-webkit-backdrop-filter: blur(16px) saturate(1.3);
	backdrop-filter: blur(16px) saturate(1.3);
	color: var(--c-creme);
	--scribble: var(--c-creme);
	font-size: 0.9375rem;
}
.pill .pill__label { mix-blend-mode: difference; }
.pill--klein { height: 2.5rem; padding: 0 1rem; font-size: 0.875rem; }
.section--vlak .pill { background: var(--c-white); border-color: var(--c-line-ink); color: var(--c-ink); --scribble: var(--c-ink); }
.section--vlak .pill .pill__label { mix-blend-mode: normal; transition: color 0.3s ease 0.25s; }
.section--vlak .pill.is-hover { color: var(--c-creme); }

.rondknop {
	display: inline-grid;
	place-items: center;
	width: 2.5rem; height: 2.5rem;
	border-radius: 50%;
	border: 1px solid currentColor;
	background: none;
	cursor: pointer;
	transition: background-color 0.3s, color 0.3s;
}
.rondknop .icoon { width: 1.1rem; height: 1.1rem; }
.rondknop:hover { background: var(--c-ink); color: var(--c-creme); }
.rondknop:disabled { opacity: 0.35; cursor: default; background: none; color: inherit; }

/* ---------- Menu (onder de pagina; de pagina schuift opzij als kaart) ---------- */
:root { --menu-w: min(40rem, 46vw); }
@media (max-width: 63.99em) { :root { --menu-w: calc(100vw - 4rem); } }

.menu {
	position: fixed;
	inset: 0;
	z-index: 1;
	visibility: hidden;
	background: var(--c-bg-deep);
	color: var(--c-creme);
	overflow: hidden;
}
.menu-open .menu,
.menu-sluit .menu { visibility: visible; }
.menu__binnen {
	position: absolute;
	top: 0; bottom: 0; left: 0;
	width: var(--menu-w);
	padding: calc(var(--header-h) + var(--wp-admin--admin-bar--height, 0px) + 2.5rem) clamp(1.5rem, 1rem + 2vw, 3rem) 2rem;
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
	overflow-y: auto;
	overscroll-behavior: contain;
}
.menu__ster {
	position: absolute;
	width: min(70vh, 40rem);
	left: calc(var(--menu-w) * -0.25);
	bottom: -14vh;
	color: var(--c-goud);
	opacity: 0.12;
	pointer-events: none;
}
.menu__lijst { display: grid; gap: 0.35rem; }
.menu__item { position: relative; }
.menu__link {
	display: flex;
	align-items: baseline;
	gap: 1rem;
	text-decoration: none;
	font-family: var(--f-display);
	font-size: clamp(2rem, 1.3rem + 2.2vw, 3.25rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	padding-block: 0.1em;
}
.menu__nummer {
	font-family: var(--f-text);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	color: var(--c-goud);
	transform: translateY(-0.9em);
	min-width: 1.6rem;
}
.menu__masker { display: block; overflow: hidden; padding-bottom: 0.08em; }
.menu__tekst {
	display: inline-block;
	background: linear-gradient(var(--c-goud), var(--c-goud)) 0 92% / 0 1px no-repeat;
	transition: background-size 0.6s var(--ease), color 0.4s;
}
.menu__link:hover .menu__tekst,
.menu__link[aria-current] .menu__tekst { background-size: 100% 1px; }
.menu__link[aria-current] .menu__tekst { color: var(--c-goud-licht); }
.menu__lijst:hover .menu__link:not(:hover) .menu__tekst { color: var(--c-mute); }
.menu__sub {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1.25rem;
	margin: 0.2rem 0 0.6rem 2.6rem;
}
.menu__sublink {
	font-size: 1rem;
	color: var(--c-mute);
	text-decoration: none;
	transition: color 0.3s;
}
.menu__sublink:hover,
.menu__sublink[aria-current] { color: var(--c-goud-licht); }

.menu__zij {
	margin-top: auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--c-line);
	font-size: 0.9375rem;
}
.menu__label {
	margin: 0 0 0.6rem;
	font-size: var(--fs-kicker);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--c-goud);
}
.menu__adres { color: var(--c-mute); }
.menu__contact {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.4rem;
	text-decoration: none;
	color: var(--c-creme);
}
.menu__contact .icoon { width: 1rem; height: 1rem; color: var(--c-goud); }
.menu__contact:hover span { text-decoration: underline; text-underline-offset: 0.2em; }
@media (max-width: 30em) {
	.menu__zij { grid-template-columns: 1fr; }
}

.menu-open .site__vangnet {
	display: block;
	position: absolute;
	inset: 0;
	z-index: 45;
	cursor: pointer;
}
.menu-open body { overflow: hidden; }

/* ---------- Gebedstijden: gedeelde onderdelen ---------- */
.gebed-datum {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.85rem;
	margin: 0.9rem 0 0;
	font-size: 1rem;
	color: var(--c-mute);
}
.gebed-datum span:first-child::first-letter { text-transform: uppercase; }
.gebed-datum__hijri { color: var(--c-goud); }
.section--vlak .gebed-datum { color: var(--c-mute-ink); }
.section--vlak .gebed-datum__hijri { color: var(--c-groen); }
.gebed-datum--klein { margin: 0 0 0.75rem; font-size: 0.875rem; }

.gebed-lijst { display: grid; gap: 0.1rem; font-size: 0.9375rem; }
.gebed-lijst__item {
	display: grid;
	grid-template-columns: 1fr auto auto;
	align-items: baseline;
	gap: 0.75rem;
	padding: 0.42rem 0.6rem;
	border-radius: 0.5rem;
	transition: background-color 0.4s, color 0.4s;
}
.gebed-lijst__naam { font-weight: 600; }
.gebed-lijst__ar { font-family: var(--f-arab); color: var(--c-goud); font-size: 1.05em; line-height: 1; }
.gebed-lijst__tijd { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 3.1rem; text-align: right; }
.gebed-lijst__iqama { grid-column: 1 / -1; font-size: 0.8125rem; color: var(--c-mute); margin-top: -0.2rem; }
.gebed-lijst__item--info { color: var(--c-mute); }
.gebed-lijst__item--info .gebed-lijst__naam { font-weight: 400; }
.gebed-lijst__item.is-voorbij { color: var(--c-mute); }
.gebed-lijst__item.is-volgend { background: rgba(216, 180, 106, 0.16); color: var(--c-goud-licht); }
.gebed-lijst__item.is-volgend .gebed-lijst__naam::after {
	content: "";
	display: inline-block;
	width: 0.4rem; height: 0.4rem;
	margin-left: 0.5rem;
	border-radius: 50%;
	background: var(--c-goud);
	vertical-align: middle;
	animation: nida-puls 2s ease-in-out infinite;
}
@keyframes nida-puls { 50% { opacity: 0.25; transform: scale(0.7); } }
.gebed-lijst--menu .gebed-lijst__item,
.gebed-lijst--footer .gebed-lijst__item { grid-template-columns: 1fr auto; padding-inline: 0.5rem; }

/* ---------- Blokken: gedeeld ---------- */
.blok__kopregel {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--sp-3) var(--sp-5);
	align-items: end;
	margin-bottom: var(--sp-5);
}
.blok__intro { color: var(--c-mute); justify-self: end; max-width: 46ch; }
.section--vlak .blok__intro { color: var(--c-mute-ink); }
.blok__btns { margin-top: var(--sp-5); }
.blok__voet { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-top: var(--sp-4); }
.blok__voet .btns { margin-top: 0; }
@media (max-width: 47.99em) {
	.blok__kopregel { grid-template-columns: 1fr; }
	.blok__intro { justify-self: start; }
}

/* Maandrooster */
.rooster { margin-top: var(--sp-5); }
.rooster__balk { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.rooster__titel { font-size: var(--fs-h3); }
.rooster__titel::first-letter { text-transform: uppercase; }
.rooster__knoppen { display: flex; align-items: center; gap: 0.5rem; }
.rooster__scroll { overflow-x: auto; border-radius: var(--radius); background: var(--c-bg-licht); }
.section--vlak .rooster__scroll { background: var(--c-white); }
.rooster__tabel { width: 100%; min-width: 40rem; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 0.9375rem; }
.rooster__tabel th,
.rooster__tabel td { padding: 0.6rem 0.9rem; text-align: right; white-space: nowrap; }
.rooster__tabel thead th { position: sticky; top: 0; font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-goud); background: inherit; border-bottom: 1px solid var(--c-line); }
.section--vlak .rooster__tabel thead th { color: var(--c-groen); border-color: var(--c-line-ink); }
.rooster__tabel tbody th,
.rooster__tabel thead th:first-child { text-align: left; font-weight: 600; }
.rooster__tabel tbody tr + tr { border-top: 1px solid var(--c-line); }
.section--vlak .rooster__tabel tbody tr + tr { border-color: var(--c-line-ink); }
.rooster__dag { display: inline-block; min-width: 3.5rem; }
.rooster__dag::first-letter { text-transform: uppercase; }
.rooster__hijri { margin-left: 0.6rem; font-weight: 400; font-size: 0.8125rem; color: var(--c-mute); }
.section--vlak .rooster__hijri { color: var(--c-mute-ink); }
.rooster__tabel tr.is-vandaag { background: rgba(216, 180, 106, 0.18); }
.rooster__tabel tr.is-vandaag th { color: var(--c-goud-licht); }
.section--vlak .rooster__tabel tr.is-vandaag th { color: var(--c-groen); }
.rooster__tabel tbody td:nth-child(3) { color: var(--c-mute); }
.section--vlak .rooster__tabel tbody td:nth-child(3) { color: var(--c-mute-ink); }

/* ---------- Tekst met afbeelding ---------- */
.tekst-media {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--sp-6);
	align-items: center;
}
.tekst-media--beeld-links .tekst-media__beeld { order: -1; }
.tekst-media__beeld { width: 100%; max-width: 34rem; justify-self: center; }
.tekst-media__beeld.vorm--liggend { max-width: none; }
.tekst-media__tekst .richtext { margin-top: var(--sp-3); }
@media (max-width: 55.99em) {
	.tekst-media { grid-template-columns: 1fr; gap: var(--sp-5); }
	.tekst-media__beeld { order: -1; max-width: 28rem; justify-self: start; }
	.tekst-media__beeld.vorm--liggend { max-width: 100%; }
}

/* ---------- Tekst ---------- */
.tekstblok { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--sp-3) var(--sp-6); }
.tekst--midden .tekstblok { grid-template-columns: 1fr; text-align: center; justify-items: center; }
.tekst--midden .tekstblok__kop { max-width: 48rem; }
.tekst--midden .richtext { margin-inline: auto; }
.tekst--midden .btns { justify-content: center; }
.tekst--midden .richtext ul,
.tekst--midden .richtext ol { text-align: left; display: inline-block; }
@media (max-width: 55.99em) { .tekstblok { grid-template-columns: 1fr; } }

/* ---------- Kaarten ---------- */
.kaarten { display: grid; gap: var(--rand); grid-template-columns: repeat(var(--kol, 3), minmax(0, 1fr)); }
.kaarten--2 { --kol: 2; }
.kaarten--4 { --kol: 4; }
.kaart {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: clamp(1.4rem, 1rem + 1.4vw, 2.1rem);
	border-radius: var(--radius-lg);
	background: var(--c-bg-licht);
	transition: background-color 0.5s var(--ease), transform 0.6s var(--ease);
}
.section--vlak .kaart { background: var(--c-white); }
.kaart__icoon {
	display: grid;
	place-items: center;
	width: 3.25rem; height: 3.25rem;
	margin-bottom: 1.6rem;
	border-radius: 50%;
	border: 1px solid rgba(216, 180, 106, 0.45);
	color: var(--c-goud);
	transition: background-color 0.5s var(--ease), color 0.5s var(--ease);
}
.section--vlak .kaart__icoon { border-color: rgba(44, 122, 75, 0.35); color: var(--c-groen); }
.kaart__icoon .icoon { width: 1.4rem; height: 1.4rem; }
.kaart__titel { font-size: clamp(1.3rem, 1.15rem + 0.5vw, 1.6rem); margin-bottom: 0.6rem; }
.kaart__a { text-decoration: none; }
.kaart__a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.kaart__tekst { color: var(--c-mute); font-size: 0.98rem; }
.section--vlak .kaart__tekst { color: var(--c-mute-ink); }
.kaart__meer { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: auto; padding-top: 1.25rem; font-weight: 600; color: var(--c-goud); }
.section--vlak .kaart__meer { color: var(--c-groen); }
.kaart__meer .icoon { width: 1rem; height: 1rem; transition: transform 0.4s var(--ease); }
.kaart--link:hover { background: var(--c-bg-tegel); }
.section--vlak .kaart--link:hover { background: var(--c-white); transform: translateY(-4px); }
.kaart--link:hover .kaart__icoon { background: var(--c-goud); color: var(--c-ink); }
.section--vlak .kaart--link:hover .kaart__icoon { background: var(--c-groen); color: var(--c-white); }
.kaart--link:hover .kaart__meer .icoon { transform: translateX(4px); }
.kaart:focus-within { outline: 2px solid var(--c-goud); outline-offset: 2px; }
.kaart__a:focus-visible { outline: none; }
@media (max-width: 63.99em) { .kaarten--4 { --kol: 2; } .kaarten--3 { --kol: 2; } }
@media (max-width: 40em) { .kaarten { --kol: 1 !important; } }

/* ---------- Stappen ---------- */
.stappenblok { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--sp-6); align-items: start; }
.stappenblok__kop { position: sticky; top: calc(var(--header-h) + 2rem); }
.stappenblok__kop .richtext { margin-top: var(--sp-3); color: var(--c-mute); }
.section--vlak .stappenblok__kop .richtext { color: var(--c-mute-ink); }
.stappen { position: relative; display: grid; gap: var(--sp-5); }
.stappen__lijn {
	position: absolute;
	top: 1.5rem; bottom: 1.5rem;
	left: 1.5rem;
	width: 1px;
	background: var(--c-line);
	transform: translateX(-50%);
}
.section--vlak .stappen__lijn { background: var(--c-line-ink); }
.stappen__lijn span { position: absolute; inset: 0; background: var(--c-goud); transform-origin: 50% 0; transform: scaleY(0); }
.section--vlak .stappen__lijn span { background: var(--c-groen); }
.stap { position: relative; display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 1.5rem; }
.stap__nummer {
	display: grid;
	place-items: center;
	width: 3rem; height: 3rem;
	border-radius: 50%;
	background: var(--c-bg);
	border: 1px solid var(--c-goud);
	color: var(--c-goud);
	font-family: var(--f-display);
	font-size: 1.25rem;
	transition: background-color 0.5s, color 0.5s;
}
.section--creme .stap__nummer { background: var(--c-creme); border-color: var(--c-groen); color: var(--c-groen); }
.section--zand .stap__nummer { background: var(--c-zand); border-color: var(--c-groen); color: var(--c-groen); }
.stap.is-actief .stap__nummer { background: var(--c-goud); color: var(--c-ink); }
.section--vlak .stap.is-actief .stap__nummer { background: var(--c-groen); color: var(--c-white); }
.stap__titel { font-size: clamp(1.35rem, 1.2rem + 0.6vw, 1.75rem); margin: 0.45rem 0 0.6rem; }
.stap .richtext { color: var(--c-mute); }
.section--vlak .stap .richtext { color: var(--c-mute-ink); }
@media (max-width: 55.99em) {
	.stappenblok { grid-template-columns: 1fr; }
	.stappenblok__kop { position: static; }
}

/* ---------- Citaat ---------- */
.citaat { position: relative; text-align: center; padding-block: var(--sp-3); }
.citaat__ster { position: absolute; left: 50%; top: 50%; width: min(34rem, 90vw); color: var(--c-goud); opacity: 0.12; transform: translate(-50%, -50%); pointer-events: none; }
.section--vlak .citaat__ster { color: var(--c-groen); }
.citaat__ar { position: relative; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.3rem); margin-bottom: var(--sp-3); }
.section--vlak .citaat__ar { color: var(--c-groen); }
.citaat__ar p { margin: 0; }
.citaat__tekst {
	position: relative;
	margin: 0;
	font-family: var(--f-display);
	font-size: clamp(1.6rem, 1.15rem + 1.9vw, 2.9rem);
	line-height: 1.22;
	letter-spacing: -0.015em;
	font-variation-settings: "opsz" 96, "SOFT" 80;
}
.citaat__tekst p { margin: 0; }
.citaat__tekst .vul-woord { color: rgba(245, 239, 227, 0.22); transition: color 0.25s; }
.section--vlak .citaat__tekst .vul-woord { color: rgba(14, 34, 25, 0.2); }
.citaat__tekst .vul-woord.is-vol { color: inherit; }
.citaat__bron { position: relative; margin-top: var(--sp-4); font-size: 0.9375rem; color: var(--c-mute); }
.section--vlak .citaat__bron { color: var(--c-mute-ink); }
.citaat__bron::before { content: ""; display: block; width: 2.5rem; height: 1px; margin: 0 auto 1rem; background: var(--c-goud); }

/* ---------- Oproep ---------- */
.section--cta { padding-block: var(--sp-5); }
.cta {
	position: relative;
	margin-inline: var(--rand);
	padding: clamp(3rem, 2rem + 5vw, 7rem) var(--gutter);
	border-radius: var(--radius-lg);
	overflow: hidden;
	text-align: center;
	isolation: isolate;
}
.cta--goud { background: var(--c-goud); color: var(--c-ink); }
.cta--groen { background: var(--c-groen); color: var(--c-creme); }
.cta--foto { color: var(--c-creme); background: var(--c-bg-licht); }
.cta__foto { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.cta__foto img { width: 100%; height: 120%; object-fit: cover; }
.cta__foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(8, 21, 15, 0.55), rgba(8, 21, 15, 0.8)); }
.cta__sterren { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.cta__ster { position: absolute; width: clamp(16rem, 10rem + 22vw, 34rem); opacity: 0.22; }
.cta--groen .cta__ster { color: var(--c-goud); opacity: 0.25; }
.cta__ster--1 { left: -8%; top: -30%; }
.cta__ster--2 { right: -10%; bottom: -40%; }
.cta__binnen { position: relative; max-width: 46rem; margin-inline: auto; }
.cta .kicker { color: inherit; justify-content: center; }
.cta__kop { font-size: var(--fs-h2); }
.cta__tekst { margin: var(--sp-3) auto 0; font-size: var(--fs-lead); }
.cta .btns { justify-content: center; }
.cta--goud .btn--primair { background: var(--c-ink); color: var(--c-goud); --scribble: var(--c-groen); }
.cta--goud .btn--omlijnd { border-color: var(--c-ink); color: var(--c-ink); --scribble: var(--c-ink); }
.cta--goud .btn--omlijnd .btn__label { mix-blend-mode: normal; transition: color 0.3s ease 0.3s; }
.cta--goud .btn--omlijnd.is-hover { color: var(--c-goud); }
.cta--goud .richtext a { color: var(--c-ink); }

/* ---------- Formulier (Gravity Forms, gravity-theme) ---------- */
.formulierblok { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--sp-6); align-items: start; }
.formulierblok__tekst .richtext { margin-top: var(--sp-3); }
.formulierblok__zij { margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--c-line-ink); font-size: 0.9375rem; color: var(--c-mute-ink); }
.section:not(.section--vlak) .formulierblok__zij { border-color: var(--c-line); color: var(--c-mute); }
.formulierblok__form {
	padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
	border-radius: var(--radius-lg);
	background: var(--c-white);
	color: var(--c-ink);
	box-shadow: 0 30px 60px -40px rgba(14, 34, 25, 0.45);
}
@media (max-width: 55.99em) { .formulierblok { grid-template-columns: 1fr; gap: var(--sp-4); } }

.gform_wrapper.gravity-theme { --gf-radius: 0.75rem; }
.gform_wrapper.gravity-theme .gform_fields {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	row-gap: 1.25rem;
	column-gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.gform_wrapper.gravity-theme .gfield { grid-column: 1 / -1; min-width: 0; margin: 0; }
.gform_wrapper.gravity-theme .gfield--width-half { grid-column: span 6; }
.gform_wrapper.gravity-theme .gfield--width-third { grid-column: span 4; }
@media (max-width: 40em) {
	.gform_wrapper.gravity-theme .gfield--width-half,
	.gform_wrapper.gravity-theme .gfield--width-third { grid-column: 1 / -1; }
}
.gform_wrapper.gravity-theme .gfield_checkbox,
.gform_wrapper.gravity-theme .gfield_radio { display: grid; gap: 0.15rem; }
.gform_wrapper.gravity-theme .gform_heading { display: none; }
.gform_wrapper.gravity-theme .hidden_label .gfield_label,
.gform_wrapper.gravity-theme .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.gform_wrapper.gravity-theme .gform_validation_container { display: none !important; }
.gform_wrapper.gravity-theme .gfield_label,
.gform_wrapper.gravity-theme legend.gfield_label {
	display: inline-block;
	margin-bottom: 0.45rem;
	padding: 0;
	font-size: 0.9375rem;
	font-weight: 650;
	color: var(--c-ink);
}
.formulierblok__form .gform_wrapper.gravity-theme .gfield_required,
.formulierblok__form .gform_wrapper.gravity-theme .gfield_required_custom { color: var(--c-mute-ink); font-style: normal; font-weight: 400; font-size: 0.8125rem; margin-left: 0.35rem; }
.gform_wrapper.gravity-theme .gfield_description { padding-top: 0.35rem; font-size: 0.875rem; color: var(--c-mute-ink); }
.gform_wrapper.gravity-theme input[type="text"],
.gform_wrapper.gravity-theme input[type="email"],
.gform_wrapper.gravity-theme input[type="tel"],
.gform_wrapper.gravity-theme input[type="number"],
.gform_wrapper.gravity-theme input[type="date"],
.gform_wrapper.gravity-theme input[type="url"],
.gform_wrapper.gravity-theme select,
.gform_wrapper.gravity-theme textarea {
	width: 100%;
	padding: 0.85rem 1rem;
	border: 1px solid rgba(14, 34, 25, 0.2);
	border-radius: var(--gf-radius);
	background: var(--c-creme);
	color: var(--c-ink);
	font: inherit;
	font-size: 1rem;
	line-height: 1.4;
	transition: border-color 0.3s, background-color 0.3s, box-shadow 0.3s;
}
.gform_wrapper.gravity-theme textarea,
.gform_wrapper.gravity-theme textarea.large,
.gform_wrapper.gravity-theme textarea.medium { height: 8.5rem; min-height: 6rem; resize: vertical; }
.gform_wrapper.gravity-theme input:hover,
.gform_wrapper.gravity-theme select:hover,
.gform_wrapper.gravity-theme textarea:hover { border-color: rgba(14, 34, 25, 0.4); }
.gform_wrapper.gravity-theme input:focus,
.gform_wrapper.gravity-theme select:focus,
.gform_wrapper.gravity-theme textarea:focus {
	outline: none;
	background: var(--c-white);
	border-color: var(--c-groen);
	box-shadow: 0 0 0 3px rgba(44, 122, 75, 0.18);
}
.gform_wrapper.gravity-theme .ginput_complex label,
.gform_wrapper.gravity-theme .gform-field-label--type-sub { font-size: 0.8125rem; color: var(--c-mute-ink); padding-top: 0.3rem; }
.gform_wrapper.gravity-theme .gfield_checkbox .gchoice,
.gform_wrapper.gravity-theme .gfield_radio .gchoice { display: flex; align-items: flex-start; gap: 0.6rem; margin-bottom: 0.5rem; }
.formulierblok__form .gform_wrapper.gravity-theme input[type="checkbox"],
.formulierblok__form .gform_wrapper.gravity-theme input[type="radio"] {
	-webkit-appearance: none;
	appearance: none;
	position: relative;
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
	margin: 0.15rem 0 0;
	border: 1.5px solid rgba(14, 34, 25, 0.35);
	border-radius: 0.35rem;
	background: var(--c-creme);
	cursor: pointer;
	transition: background-color 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.formulierblok__form .gform_wrapper.gravity-theme input[type="radio"] { border-radius: 50%; }
.formulierblok__form .gform_wrapper.gravity-theme input[type="checkbox"]::before,
.formulierblok__form .gform_wrapper.gravity-theme input[type="radio"]::before { content: none; }
.formulierblok__form .gform_wrapper.gravity-theme input[type="checkbox"]:checked {
	border-color: var(--c-groen);
	background: var(--c-groen) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 0.85rem no-repeat;
}
.formulierblok__form .gform_wrapper.gravity-theme input[type="radio"]:checked { border-color: var(--c-groen); background: var(--c-creme); box-shadow: inset 0 0 0 0.28rem var(--c-groen); }
.formulierblok__form .gform_wrapper.gravity-theme input[type="checkbox"]:focus-visible,
.formulierblok__form .gform_wrapper.gravity-theme input[type="radio"]:focus-visible { outline: 2px solid var(--c-goud); outline-offset: 2px; }
.gform_wrapper.gravity-theme .gchoice label { font-size: 0.98rem; }
.gform_wrapper.gravity-theme .gfield_consent_label { font-size: 0.9375rem; }
.gform_wrapper.gravity-theme .gfield_error input,
.gform_wrapper.gravity-theme .gfield_error select,
.gform_wrapper.gravity-theme .gfield_error textarea { border-color: var(--c-error); background: #fdf3f1; }
.gform_wrapper.gravity-theme .gfield_validation_message,
.gform_wrapper.gravity-theme .validation_message {
	margin-top: 0.4rem;
	padding: 0;
	border: 0;
	background: none;
	color: #b4382c;
	font-size: 0.875rem;
}
.gform_wrapper.gravity-theme .gform_validation_errors {
	margin-bottom: 1.5rem;
	padding: 1rem 1.2rem;
	border: 0;
	border-radius: var(--gf-radius);
	background: #fdf3f1;
	box-shadow: none;
}
.gform_wrapper.gravity-theme .gform_validation_errors > h2,
.gform_wrapper.gravity-theme .gform_submission_error {
	margin: 0;
	font-family: var(--f-text);
	font-size: 0.98rem;
	font-weight: 600;
	color: #b4382c;
	letter-spacing: 0;
}
.gform_wrapper.gravity-theme .gform_validation_errors > h2 .gform-icon { display: none; }
.gform_wrapper.gravity-theme .gfield--type-fieldset > legend,
.gform_wrapper.gravity-theme fieldset { border: 0; padding: 0; margin: 0; }
.gform_wrapper.gravity-theme .gform_footer { margin-top: 1.75rem; padding: 0; }
.gform_wrapper.gravity-theme .gform_ajax_spinner { margin-left: 0.75rem; }
.gform_confirmation_message {
	padding: 1.5rem;
	border-radius: var(--radius);
	background: var(--c-creme);
	color: var(--c-ink);
	font-size: var(--fs-lead);
}
.gform_wrapper .gfield--type-honeypot,
.gform_wrapper .gform_validation_container { display: none !important; }
.melding { padding: 1rem 1.25rem; border-radius: var(--radius-sm); background: #fff7d6; color: #5c4700; }

/* ---------- Veelgestelde vragen ---------- */
.faqblok { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--sp-6); align-items: start; }
.faqblok__kop { position: sticky; top: calc(var(--header-h) + 2rem); }
.faqblok__kop .richtext { margin-top: var(--sp-3); color: var(--c-mute); }
.section--vlak .faqblok__kop .richtext { color: var(--c-mute-ink); }
.faq { display: grid; gap: var(--rand); }
.faq__item { border-radius: var(--radius); background: var(--c-bg-licht); overflow: hidden; }
.section--vlak .faq__item { background: var(--c-white); }
.faq__vraag {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.25rem 1.4rem;
	cursor: pointer;
	list-style: none;
}
.faq__vraag::-webkit-details-marker { display: none; }
.faq__titel { font-family: var(--f-text); font-size: 1.0625rem; font-weight: 650; letter-spacing: 0; line-height: 1.4; }
.faq__plus { position: relative; flex: none; width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid currentColor; opacity: 0.8; transition: transform 0.5s var(--ease), background-color 0.4s, color 0.4s; }
.faq__plus i { position: absolute; left: 50%; top: 50%; width: 0.75rem; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); transition: transform 0.5s var(--ease); }
.faq__plus i:last-child { transform: translate(-50%, -50%) rotate(90deg); }
.faq__item[open] .faq__plus { transform: rotate(180deg); background: var(--c-goud); color: var(--c-ink); border-color: var(--c-goud); }
.section--vlak .faq__item[open] .faq__plus { background: var(--c-groen); border-color: var(--c-groen); color: var(--c-white); }
.faq__item[open] .faq__plus i:last-child { transform: translate(-50%, -50%) rotate(0deg); }
.faq__antwoord { overflow: hidden; }
.faq__binnen { padding: 0 1.4rem 1.4rem; color: var(--c-mute); max-width: none; }
.section--vlak .faq__binnen { color: var(--c-mute-ink); }
@media (max-width: 55.99em) {
	.faqblok { grid-template-columns: 1fr; gap: var(--sp-4); }
	.faqblok__kop { position: static; }
}

/* ---------- Nieuws ---------- */
.nieuws-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rand); }
.nieuwskaart { border-radius: var(--radius-lg); background: var(--c-bg-licht); overflow: hidden; }
.section--vlak .nieuwskaart { background: var(--c-white); }
.nieuwskaart__link { display: flex; flex-direction: column; height: 100%; text-decoration: none; }
.nieuwskaart__beeld { aspect-ratio: 4 / 3; overflow: hidden; background: var(--c-bg-tegel); }
.nieuwskaart__beeld img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.nieuwskaart__leeg { display: grid; place-items: center; height: 100%; color: var(--c-goud); opacity: 0.4; }
.nieuwskaart__leeg .ster { width: 40%; }
.nieuwskaart__link:hover .nieuwskaart__beeld img { transform: scale(1.06); }
.nieuwskaart__tekst { display: flex; flex-direction: column; flex: 1; padding: 1.4rem 1.5rem 1.6rem; }
.nieuwskaart__meta { display: flex; gap: 0.75rem; margin: 0 0 0.6rem; font-size: 0.8125rem; color: var(--c-goud); font-weight: 600; letter-spacing: 0.04em; }
.section--vlak .nieuwskaart__meta { color: var(--c-groen); }
.nieuwskaart__titel { font-size: 1.45rem; margin-bottom: 0.6rem; }
.nieuwskaart__intro { color: var(--c-mute); font-size: 0.95rem; }
.section--vlak .nieuwskaart__intro { color: var(--c-mute-ink); }
.nieuwskaart__lees { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: auto; padding-top: 1rem; font-weight: 600; font-size: 0.9375rem; }
.nieuwskaart__lees .icoon { width: 1rem; height: 1rem; transition: transform 0.4s var(--ease); }
.nieuwskaart__link:hover .nieuwskaart__lees .icoon { transform: translateX(4px); }
@media (max-width: 63.99em) { .nieuws-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40em) { .nieuws-raster { grid-template-columns: 1fr; } }

.nav-links { display: flex; justify-content: center; align-items: center; gap: 0.4rem; margin-top: var(--sp-5); }
.nav-links .page-numbers { display: inline-grid; place-items: center; min-width: 2.75rem; height: 2.75rem; padding: 0 0.6rem; border-radius: var(--radius-pill); border: 1px solid var(--c-line); text-decoration: none; }
.nav-links .page-numbers.current { background: var(--c-goud); color: var(--c-ink); border-color: var(--c-goud); }
.nav-links .icoon { width: 1.1rem; height: 1.1rem; }

.leeg { display: grid; justify-items: center; gap: 1.25rem; padding: var(--sp-6) 0; text-align: center; color: var(--c-mute); }
.leeg__ster { width: 5rem; color: var(--c-goud); }
.leeg p { max-width: 44ch; }

.section--artikel { padding-top: var(--sp-5); }
.artikel__terug { margin-top: var(--sp-5); }

/* ---------- Contact ---------- */
.contactblok { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--sp-6); align-items: stretch; }
.contactblok__tekst .richtext { margin-top: var(--sp-3); }
.contactlijst { display: grid; gap: 1.4rem; margin-top: var(--sp-4) !important; }
.contactlijst li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 1rem; align-items: start; }
.contactlijst__icoon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--c-bg-licht); color: var(--c-goud); }
.section--vlak .contactlijst__icoon { background: var(--c-white); color: var(--c-groen); }
.contactlijst__icoon .icoon { width: 1.25rem; height: 1.25rem; }
.contactlijst__label { margin: 0 0 0.15rem; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-mute); }
.section--vlak .contactlijst__label { color: var(--c-mute-ink); }
.contactlijst a:not(.lijnlink) { font-size: 1.125rem; font-weight: 600; text-decoration: none; }
.contactlijst a:not(.lijnlink):hover { text-decoration: underline; text-underline-offset: 0.2em; }
.contactlijst address { font-size: 1.125rem; margin-bottom: 0.4rem; }
.contactblok__kaart { min-height: 26rem; border-radius: var(--radius-lg); overflow: hidden; background: var(--c-bg-licht); }
.contactblok__kaart iframe { width: 100%; height: 100%; min-height: 26rem; border: 0; filter: saturate(0.75) contrast(1.02); }
@media (max-width: 55.99em) { .contactblok { grid-template-columns: 1fr; } }

/* ---------- Galerij ---------- */
.section--galerij { overflow: hidden; }
.galerij { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-inline: var(--gutter); }
.galerij::-webkit-scrollbar { display: none; }
.galerij__strook { display: flex; gap: var(--rand); width: max-content; }
.galerij__item { scroll-snap-align: start; width: clamp(16rem, 12rem + 26vw, 34rem); }
.galerij__beeld { aspect-ratio: 4 / 3; border-radius: var(--radius-lg); overflow: hidden; background: var(--c-bg-licht); }
.galerij__item--boog .galerij__beeld { aspect-ratio: 4 / 5; border-radius: 50% 50% var(--radius) var(--radius) / 40% 40% var(--radius) var(--radius); }
.galerij__item--boog { width: clamp(13rem, 10rem + 18vw, 26rem); }
.galerij__beeld img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); }
.galerij figcaption { margin-top: 0.75rem; font-size: 0.875rem; color: var(--c-mute); }
.section--vlak .galerij figcaption { color: var(--c-mute-ink); }
.js .galerij.is-gepind { overflow: visible; scroll-snap-type: none; }

/* ---------- Doneren ---------- */
.donerenblok { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: var(--sp-6); align-items: center; }
.donerenblok__tekst .richtext { margin-top: var(--sp-3); }
.bankkaart {
	position: relative;
	padding: clamp(1.6rem, 1.2rem + 1.8vw, 2.6rem);
	border-radius: var(--radius-lg);
	background: linear-gradient(140deg, #173a28 0%, #0e2219 55%, #0a1a12 100%);
	color: var(--c-creme);
	overflow: hidden;
	box-shadow: 0 40px 80px -40px rgba(8, 21, 15, 0.8), inset 0 1px 0 rgba(245, 239, 227, 0.08);
	transform-style: preserve-3d;
	will-change: transform;
}
.bankkaart__glans {
	position: absolute;
	inset: -40%;
	background: radial-gradient(circle at var(--gx, 30%) var(--gy, 20%), rgba(236, 215, 166, 0.22), transparent 40%);
	pointer-events: none;
	transition: opacity 0.4s;
}
.bankkaart__ster { position: absolute; right: -14%; top: -22%; width: 70%; color: var(--c-goud); opacity: 0.2; }
.bankkaart__label { position: relative; margin: 0; font-size: var(--fs-kicker); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-goud); }
.bankkaart__iban { position: relative; margin: 0.9rem 0 1.25rem; font-family: var(--f-display); font-size: clamp(1.3rem, 0.9rem + 1.5vw, 2rem); letter-spacing: 0.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bankkaart__kopieer { position: relative; }
.bankkaart__kopieer.is-gekopieerd { border-color: var(--c-ok); }
.bankkaart__gegevens { position: relative; display: grid; gap: 0.9rem; margin: 1.75rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--c-line); }
.bankkaart__gegevens dt { font-size: 0.8125rem; color: var(--c-mute); }
.bankkaart__gegevens dd { margin: 0.1rem 0 0; font-weight: 600; }
.bankkaart__status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 55.99em) { .donerenblok { grid-template-columns: 1fr; } }

/* ---------- Financieel ---------- */
.financieelblok { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--sp-6); align-items: start; }
.financieelblok__tekst .richtext { margin-top: var(--sp-3); }
.financieel { padding: clamp(1.4rem, 1rem + 1.6vw, 2.4rem); border-radius: var(--radius-lg); background: var(--c-white); color: var(--c-ink); }
.section:not(.section--vlak) .financieel { background: var(--c-bg-licht); color: var(--c-creme); }
.financieel__periode { margin: 0 0 1rem; font-family: var(--f-display); font-size: var(--fs-h4); }
.financieel__tabel { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.financieel__tabel th,
.financieel__tabel td { padding: 0.65rem 0; text-align: left; font-weight: 400; border-bottom: 1px solid var(--c-line-ink); }
.section:not(.section--vlak) .financieel__tabel th,
.section:not(.section--vlak) .financieel__tabel td { border-color: var(--c-line); }
.financieel__tabel td { text-align: right; }
.financieel__groep th { padding-top: 1.4rem; font-size: 0.8125rem; font-weight: 650; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-groen); }
.section:not(.section--vlak) .financieel__groep th { color: var(--c-goud); }
.financieel__totaal th,
.financieel__totaal td { font-weight: 650; }
.financieel__resultaat th,
.financieel__resultaat td { padding-top: 1.1rem; border-bottom: 0; font-family: var(--f-display); font-size: var(--fs-h4); }
.financieel__resultaat.is-negatief td { color: #b4382c; }
.financieel__toelichting { margin-top: 1.25rem; font-size: 0.9375rem; color: var(--c-mute-ink); }
@media (max-width: 55.99em) { .financieelblok { grid-template-columns: 1fr; } }

/* ---------- Voorzieningen ---------- */
.voorzieningen { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--rand); }
.voorziening { display: flex; align-items: center; gap: 0.9rem; padding: 1rem 1.15rem; border-radius: var(--radius); background: var(--c-bg-licht); }
.section--vlak .voorziening { background: var(--c-white); }
.voorziening__icoon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid rgba(216, 180, 106, 0.4); color: var(--c-goud); flex: none; }
.section--vlak .voorziening__icoon { border-color: rgba(44, 122, 75, 0.35); color: var(--c-groen); }
.voorziening__icoon .icoon { width: 1.2rem; height: 1.2rem; }
.voorziening__label { font-weight: 600; line-height: 1.3; }
.voorziening__check { margin-left: auto; color: var(--c-ok); }
.section--vlak .voorziening__check { color: var(--c-groen); }
.voorziening__check .icoon { width: 1.1rem; height: 1.1rem; }

/* ---------- Video ---------- */
.video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; background: #000; }
.video__beeld { width: 100%; height: 100%; object-fit: cover; opacity: 0.8; transition: transform 1.2s var(--ease), opacity 0.5s; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video__play { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 1rem; border: 0; background: none; cursor: pointer; color: var(--c-creme); }
.video__knop { display: grid; place-items: center; width: 5.5rem; height: 5.5rem; border-radius: 50%; background: var(--c-goud); color: var(--c-ink); transition: transform 0.6s var(--ease); }
.video__knop .icoon { width: 1.75rem; height: 1.75rem; fill: currentColor; margin-left: 0.2rem; }
.video__hint { font-size: 0.8125rem; color: rgba(245, 239, 227, 0.8); }
.video:hover .video__beeld { transform: scale(1.03); opacity: 0.65; }
.video:hover .video__knop { transform: scale(1.08); }

/* ---------- 404 ---------- */
.niet-gevonden { position: relative; min-height: 100svh; display: grid; align-items: center; padding: calc(var(--header-h) + var(--sp-5)) 0 var(--sp-6); overflow: hidden; }
.niet-gevonden__ster { position: absolute; right: -10vw; top: 50%; width: min(60rem, 90vw); color: var(--c-goud); opacity: 0.18; transform: translateY(-50%); }
.niet-gevonden__binnen { position: relative; }
.niet-gevonden__tekst { margin-top: var(--sp-3); font-size: var(--fs-lead); color: var(--c-mute); }

/* ---------- Verborgen blok (alleen voor ingelogde redacteuren) ---------- */
.nida-hidden-block { position: relative; outline: 2px dashed #e0a800; outline-offset: -2px; }
.nida-hidden-block__notice {
	position: relative;
	z-index: 5;
	margin: 0;
	padding: 0.6rem var(--gutter);
	background: #ffd23f;
	color: #1d1d1d;
	font-size: 0.875rem;
	font-weight: 600;
	text-align: center;
}

/* ---------- Minder beweging ---------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
	.transition { display: none; }
	.hero__media { position: absolute; inset: 0; height: auto; translate: none; }
}

/* ---------- Print: alleen het maandrooster ---------- */
@media print {
	html.print-rooster body * { visibility: hidden; }
	html.print-rooster [data-rooster],
	html.print-rooster [data-rooster] * { visibility: visible; }
	html.print-rooster [data-rooster] { position: absolute; left: 0; top: 0; width: 100%; margin: 0; color: #000; }
	html.print-rooster .rooster__knoppen { display: none; }
	html.print-rooster .rooster__scroll { overflow: visible; background: none; }
	html.print-rooster .rooster__tabel { min-width: 0; font-size: 10pt; }
	html.print-rooster .rooster__tabel th,
	html.print-rooster .rooster__tabel td { padding: 3pt 6pt; color: #000 !important; border-color: #ccc !important; }
	html.print-rooster .rooster__tabel tr.is-vandaag { background: #eee; }
	html.print-rooster .rooster__titel { color: #000; font-size: 16pt; }
	.site-header,
	.menu,
	.transition { display: none !important; }
}

/* ---------- Wachten op de volgende pagina (app.js) ---------- */
html.is-wachten::after {
	content: "";
	position: fixed;
	left: 1.25rem;
	bottom: 1.25rem;
	z-index: 70;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	border: 2px solid rgba(216, 180, 106, 0.25);
	border-top-color: var(--c-goud);
	animation: nida-draai 0.8s linear infinite;
}


/* ---------- Zwevende donateursknop (ui.js) ---------- */
.zweefknop {
	position: fixed;
	right: calc(var(--rand) + 0.75rem);
	bottom: calc(var(--rand) + 0.75rem + env(safe-area-inset-bottom, 0px));
	z-index: 45;
	box-shadow: 0 18px 40px -16px rgba(8, 21, 15, 0.7), 0 0 0 1px rgba(14, 34, 25, 0.08);
	opacity: 0;
	transform: translateY(170%) scale(0.92);
	pointer-events: none;
	transition: transform 0.75s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.35s ease;
}
html.is-zweef .zweefknop { opacity: 1; transform: none; pointer-events: auto; }
html.menu-open .zweefknop { opacity: 0; pointer-events: none; }
.zweefknop__hart { color: #a3162b; animation: nida-hart 2.4s ease-in-out infinite; }
@keyframes nida-hart { 0%, 60%, 100% { transform: scale(1); } 70% { transform: scale(1.18); } 80% { transform: scale(1); } 88% { transform: scale(1.12); } }
@media (max-width: 47.99em) {
	.zweefknop { left: calc(var(--rand) + 0.5rem); right: calc(var(--rand) + 0.5rem); }
}

/* ---------- Filters op het overzicht ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: var(--sp-4); }
.filters__pil {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	height: 2.5rem;
	padding: 0 1rem;
	border: 1px solid var(--c-line);
	border-radius: var(--radius-pill);
	text-decoration: none;
	font-size: 0.9375rem;
	font-weight: 600;
	transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
.filters__pil span { font-weight: 400; color: var(--c-mute); font-size: 0.8125rem; }
.filters__pil:hover { border-color: var(--c-goud); }
.filters__pil.is-actief { background: var(--c-goud); border-color: var(--c-goud); color: var(--c-ink); }
.filters__pil.is-actief span { color: rgba(14, 34, 25, 0.65); }

/* ---------- Video op kaarten en in berichten ---------- */
.nieuwskaart__beeld { position: relative; }
.nieuwskaart__play {
	position: absolute;
	left: 1rem; bottom: 1rem;
	display: grid;
	place-items: center;
	width: 3.25rem; height: 3.25rem;
	border-radius: 50%;
	background: var(--c-goud);
	color: var(--c-ink);
	transition: transform 0.5s var(--ease);
}
.nieuwskaart__play .icoon { width: 1.15rem; height: 1.15rem; fill: currentColor; margin-left: 0.15rem; }
.nieuwskaart__link:hover .nieuwskaart__play { transform: scale(1.1); }
.artikel__video { margin-bottom: var(--sp-5); }

/* ---------- Inzameldoelen ---------- */
.doelen { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--rand); }
.doel { display: flex; flex-direction: column; padding: clamp(1.4rem, 1rem + 1.4vw, 2.1rem); border-radius: var(--radius-lg); background: var(--c-bg-licht); }
.section--vlak .doel { background: var(--c-white); }
.doel__icoon { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; margin-bottom: 1.4rem; border-radius: 50%; background: var(--c-goud); color: var(--c-ink); }
.section--vlak .doel__icoon { background: var(--c-groen); color: var(--c-white); }
.doel__icoon .icoon { width: 1.4rem; height: 1.4rem; }
.doel__titel { font-size: clamp(1.3rem, 1.15rem + 0.5vw, 1.6rem); margin-bottom: 0.6rem; }
.doel__tekst { color: var(--c-mute); font-size: 0.98rem; }
.section--vlak .doel__tekst { color: var(--c-mute-ink); }
.doel__voortgang { margin-top: auto; padding-top: 1.4rem; }
.doel__balk { height: 8px; border-radius: 8px; background: var(--c-line); overflow: hidden; }
.section--vlak .doel__balk { background: var(--c-line-ink); }
.doel__balk span { display: block; height: 100%; border-radius: inherit; background: var(--c-goud); }
.section--vlak .doel__balk span { background: var(--c-groen); }
.doel__bedragen { display: flex; gap: 0.4rem; margin: 0.6rem 0 0; font-size: 0.875rem; color: var(--c-mute); font-variant-numeric: tabular-nums; }
.doel__bedragen strong { color: var(--c-creme); }
.section--vlak .doel__bedragen { color: var(--c-mute-ink); }
.section--vlak .doel__bedragen strong { color: var(--c-ink); }
.doel__bedragen span { margin-left: auto; font-weight: 600; }

/* ---------- Vacatures ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 1rem 0 0 !important; }
.chips li {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.3rem 0.7rem;
	border-radius: var(--radius-pill);
	background: rgba(216, 180, 106, 0.12);
	color: var(--c-goud-licht);
	font-size: 0.8125rem;
	font-weight: 600;
}
.section--vlak .chips li { background: rgba(44, 122, 75, 0.1); color: var(--c-groen); }
.chips .icoon { width: 0.95rem; height: 0.95rem; }
.chips--groot { margin: 0 0 var(--sp-4) !important; }
.chips--groot li { font-size: 0.9375rem; padding: 0.45rem 0.9rem; }
.kaart--vacature .kaart__meer { padding-top: 1.4rem; }
.leeg-regel { color: var(--c-mute); max-width: 52ch; }
.section--vlak .leeg-regel { color: var(--c-mute-ink); }

.vacatureblok { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-6); align-items: start; }
.vacatureblok__form { position: sticky; top: calc(var(--header-h) + 1.5rem); }
.vacatureblok__kop { font-size: var(--fs-h3); margin-bottom: 1.25rem; }
@media (max-width: 55.99em) {
	.vacatureblok { grid-template-columns: 1fr; }
	.vacatureblok__form { position: static; }
}
.andere-vacatures__kop { font-size: var(--fs-h3); margin-bottom: var(--sp-3); }
.andere-vacatures { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: var(--rand); }
.andere-vacatures a {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding: 1rem 1.2rem;
	border-radius: var(--radius);
	background: var(--c-bg-licht);
	text-decoration: none;
	font-weight: 600;
	transition: background-color 0.3s;
}
.andere-vacatures a:hover { background: var(--c-bg-tegel); }
.andere-vacatures a > .icoon { margin-left: auto; width: 1.1rem; height: 1.1rem; color: var(--c-goud); transition: transform 0.4s var(--ease); }
.andere-vacatures a:hover > .icoon { transform: translateX(4px); }
.andere-vacatures__icoon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid rgba(216, 180, 106, 0.4); color: var(--c-goud); flex: none; }
.andere-vacatures__icoon .icoon { width: 1.1rem; height: 1.1rem; }

/* ---------- Afspraak maken (agenda) ---------- */
.afspraakblok { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--sp-6); align-items: center; }
.afspraakblok__tekst .richtext { margin-top: var(--sp-3); }
.agenda {
	display: grid;
	justify-items: start;
	gap: 1rem;
	padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
	border-radius: var(--radius-lg);
	background: var(--c-white);
	color: var(--c-ink);
}
.section:not(.section--vlak) .agenda { background: var(--c-bg-licht); color: var(--c-creme); }
.agenda__icoon { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--c-goud); color: var(--c-ink); }
.agenda__icoon .icoon { width: 1.5rem; height: 1.5rem; }
.agenda__uitleg { margin: 0; font-size: var(--fs-lead); max-width: 34ch; }
.agenda__hint { margin: 0; font-size: 0.8125rem; color: var(--c-mute-ink); }
.section:not(.section--vlak) .agenda__hint { color: var(--c-mute); }
.agenda.is-open { padding: 0; overflow: hidden; display: block; }
.agenda.is-open iframe { width: 100%; height: 44rem; border: 0; display: block; background: var(--c-white); }
.agenda__nood { display: block; padding: 0.8rem 1.25rem; font-size: 0.875rem; }
@media (max-width: 55.99em) { .afspraakblok { grid-template-columns: 1fr; } }


/* =========================================================
   Vormgeving 2.0: de band-opbouw, met de kleuren en het beeldmerk
   van Den Helder. Staat na de onderdelen hierboven en stuurt ze bij.
   ========================================================= */

/* ---------- Pagina en banden ---------- */
html { scroll-padding-top: calc(var(--header-h) + 1.25rem); }
.site { padding-top: calc(var(--topbar-h) + var(--header-h)); background: var(--c-paper); }
.section {
	--c-accent: var(--c-goud-licht);
	background: var(--c-bg);
	color: var(--c-creme);
	overflow: clip;
}
.section > * { position: relative; }
.section--zee {
	background: var(--c-zee);
	background-image: var(--patroon-golf);
	background-size: 96px 36px;
	background-blend-mode: soft-light;
}
.section--zee::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(11, 58, 63, 0.28), rgba(11, 58, 63, 0));
	pointer-events: none;
}
.section:not(.section--vlak):not(.section--zee):not(.fotoband)::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--patroon-ster);
	background-size: 88px 88px;
	opacity: 0.06;
	pointer-events: none;
}
.section--vlak {
	--c-accent: var(--c-zee-licht);
	color: var(--c-ink);
	margin: 0;
	border-radius: 0;
	padding-block: var(--sp-7);
}
.section--vlak.section--marge-klein { padding-block: var(--sp-5); }
.section--vlak.section--marge-geen { padding-block: var(--sp-4); }
.section--creme { background: var(--c-paper); }
.section--zand { background: var(--c-zand); }

/* ---------- Typografie ---------- */
h1, h2, h3, h4 {
	font-family: var(--f-display);
	font-weight: 400;
	letter-spacing: -0.035em;
	font-variation-settings: normal;
}
h1 em, h2 em, h3 em {
	font-family: var(--f-serif);
	font-style: italic;
	font-weight: 400;
	letter-spacing: -0.02em;
	color: var(--c-accent, var(--c-goud-licht));
	font-variation-settings: "opsz" 72, "SOFT" 100;
}
.kicker {
	gap: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	color: var(--c-goud-licht);
}
.kicker::before { width: 1.75rem; height: 1px; transform: none; background: var(--c-goud); }
.section--vlak .kicker { color: var(--c-zee-licht); }
.kicker--licht { color: var(--c-goud-licht); }
.richtext a { color: var(--c-goud-licht); }
.section--vlak .richtext a { color: var(--c-zee); }
.live-stip {
	flex: none;
	display: inline-block;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--c-groen-fel);
	box-shadow: 0 0 0 0 rgba(46, 203, 120, 0.5);
	animation: nida-stip 2.4s ease-out infinite;
}
@keyframes nida-stip { 70%, 100% { box-shadow: 0 0 0 0.55rem rgba(46, 203, 120, 0); } }

.tekstlinks { display: flex; flex-wrap: wrap; gap: 1rem 2rem; }
.tekstlink {
	display: inline-flex;
	align-items: center;
	gap: 0.8rem;
	padding-bottom: 0.45rem;
	border-bottom: 1px solid var(--c-hairline);
	font-size: var(--fs-btn);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	transition: gap 0.3s var(--ease-out), border-color 0.3s;
}
.tekstlink .icoon { width: 1rem; height: 1rem; color: var(--c-goud); transition: transform 0.3s var(--ease-out); }
.section--vlak .tekstlink .icoon { color: var(--c-goud-donker); }
.tekstlink:hover { gap: 1.2rem; border-color: var(--c-goud); }

/* ---------- Knoppen ---------- */
.btn {
	gap: 1.1rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border-radius: var(--radius-sm);
}
.btn__pijl { width: 1rem !important; height: 1rem !important; color: var(--c-goud); transition: transform 0.35s var(--ease-out); }
.btn:hover .btn__pijl { transform: translateX(3px); }
.btn--primair { background: var(--c-paper); color: var(--c-ink); --scribble: var(--c-goud-licht); }
.btn--primair .btn__pijl { color: var(--c-goud-donker); }
.btn--groen { background: var(--c-goud); color: var(--c-ink); --scribble: var(--c-goud-licht); }
.btn--groen .btn__pijl { color: var(--c-ink); }
.btn--omlijnd { border-color: rgba(247, 243, 234, 0.4); color: var(--c-creme); --scribble: var(--c-creme); }
.btn--op-licht.btn--primair,
.btn--op-licht.btn--groen { background: var(--c-bg); color: var(--c-creme); --scribble: var(--c-zee); }
.btn--op-licht.btn--primair .btn__pijl,
.btn--op-licht.btn--groen .btn__pijl { color: var(--c-goud-licht); }
.btn--op-licht.btn--omlijnd { border-color: var(--c-line-ink); }
.btn--op-licht.btn--omlijnd .btn__pijl { color: var(--c-goud-donker); }
.btn--op-licht.btn--omlijnd.is-hover .btn__pijl { color: var(--c-goud-licht); }
.rondknop { color: inherit; }
.rondknop:hover { background: var(--c-bg); color: var(--c-creme); border-color: var(--c-bg); }
.rondknop--licht { color: var(--c-creme); border-color: rgba(247, 243, 234, 0.45); }
.rondknop--licht:hover { background: var(--c-creme); color: var(--c-ink); border-color: var(--c-creme); }
.rondknop span { display: grid; place-items: center; }
.rondknop span[hidden] { display: none; }
.zweefknop.btn--primair { background: var(--c-bg); color: var(--c-creme); }

/* ---------- Bovenbalk en hoofdbalk ---------- */
.site-header {
	position: fixed;
	top: var(--wp-admin--admin-bar--height, 0px);
	left: 0;
	right: 0;
	z-index: 50;
	--binnen: max(var(--gutter), calc((100vw - var(--wrap)) / 2));
	transition: transform 0.5s var(--ease-out);
}
html:not(.is-top) .site-header { transform: translateY(calc(-1 * var(--topbar-h))); }
.menu-open .site-header { transform: none; }

.topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	height: var(--topbar-h);
	padding-inline: var(--binnen);
	background: var(--c-bg-deep);
	color: rgba(247, 243, 234, 0.82);
	font-size: 0.8125rem;
	white-space: nowrap;
}
.topbar a { color: inherit; text-decoration: none; transition: color 0.2s; }
.topbar a:hover { color: var(--c-white); }
.topbar__gebed { display: inline-flex; align-items: center; gap: 0.65rem; min-width: 0; }
.topbar__label { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(247, 243, 234, 0.6); }
.topbar__gebed strong { color: var(--c-white); font-weight: 600; }
.topbar__tijd { color: var(--c-goud-licht); font-weight: 600; font-variant-numeric: tabular-nums; }
.topbar__aftellen { color: rgba(247, 243, 234, 0.58); }
.topbar__aftellen:not(:empty)::before { content: "·"; margin-right: 0.65rem; }
.topbar__datum { display: flex; gap: 0.65rem; margin: 0; }
.topbar__datum span:first-child::first-letter { text-transform: uppercase; }
.topbar__datum .gebed-datum__hijri { color: var(--c-goud-licht); font-family: var(--f-serif); font-style: italic; }
.topbar__datum .gebed-datum__hijri::before { content: "·"; margin-right: 0.65rem; color: rgba(247, 243, 234, 0.35); font-style: normal; }
.topbar__links { display: flex; align-items: center; gap: 1.1rem; margin: 0; padding: 0; list-style: none; }
.topbar__links a { display: inline-flex; align-items: center; gap: 0.4rem; }
.topbar__links .icoon { width: 0.95rem; height: 0.95rem; color: var(--c-goud-licht); }

.hoofdbalk {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	height: var(--header-h);
	padding-inline: var(--binnen);
	background: var(--c-paper);
	color: var(--c-ink);
	border-bottom: 1px solid transparent;
	transition: border-color 0.3s, box-shadow 0.3s;
}
html:not(.is-top) .hoofdbalk { border-bottom-color: var(--c-hairline); box-shadow: 0 0.75rem 2rem rgba(7, 42, 46, 0.08); }
.site-header__logo { display: flex; align-items: center; flex: none; height: 100%; padding-block: 0.5rem; }
.site-header__logo .logo__img { width: auto; height: 100%; max-height: 3.875rem; }
.logo__tekst { font-size: 1.25rem; font-weight: 600; color: var(--c-ink); }
.hoofdnav { flex: 1; display: flex; justify-content: flex-end; }
.hoofdnav__lijst { display: flex; align-items: center; gap: clamp(0.9rem, 1.65vw, 1.75rem); margin: 0; padding: 0; list-style: none; }
.hoofdnav__item { position: relative; }
.hoofdnav__link {
	position: relative;
	display: block;
	padding: 0.5rem 0;
	font-size: 0.875rem;
	font-weight: 500;
	white-space: nowrap;
	text-decoration: none;
	transition: color 0.2s;
}
.hoofdnav__link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: var(--c-goud-donker);
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: transform 0.35s var(--ease-out);
}
.hoofdnav__link:hover { color: var(--c-zee); }
.hoofdnav__link:hover::after,
.hoofdnav__item.is-actief > .hoofdnav__link::after { transform: scaleX(1); }
.hoofdnav__item.is-actief > .hoofdnav__link { color: var(--c-zee); font-weight: 600; }
.hoofdnav__sub {
	position: absolute;
	top: 100%;
	left: -1rem;
	z-index: 2;
	min-width: 14rem;
	margin: 0.4rem 0 0;
	padding: 0.5rem;
	list-style: none;
	border-radius: var(--radius);
	background: var(--c-white);
	box-shadow: 0 1.25rem 2.5rem rgba(7, 42, 46, 0.16), 0 0 0 1px var(--c-line-ink);
	opacity: 0;
	visibility: hidden;
	transform: translateY(0.3rem);
	transition: opacity 0.2s, transform 0.25s var(--ease-out), visibility 0.2s;
}
.hoofdnav__sub::before { content: ""; position: absolute; left: 0; right: 0; top: -0.5rem; height: 0.5rem; }
.hoofdnav__item:hover .hoofdnav__sub,
.hoofdnav__item:focus-within .hoofdnav__sub { opacity: 1; visibility: visible; transform: none; }
.hoofdnav__sub a { display: block; padding: 0.55rem 0.75rem; border-radius: var(--radius-sm); font-size: 0.875rem; text-decoration: none; }
.hoofdnav__sub a:hover { background: var(--c-zand); }

.site-header__acties { position: relative; display: flex; flex: none; align-items: center; gap: 0.6rem; }
.site-header__acties::before { content: ""; width: 1px; height: 1.6rem; margin-right: 0.6rem; background: var(--c-line-ink); }
.site-header__knop { height: 2.75rem; padding: 0 1.15rem; font-size: 0.75rem; gap: 0.7rem; }
.site-header__menu {
	display: none;
	align-items: center;
	gap: 0.65rem;
	height: 2.75rem;
	padding: 0 0.85rem;
	border: 1px solid var(--c-line-ink);
	border-radius: var(--radius-sm);
	background: var(--c-white);
	color: var(--c-ink);
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
}
.menu-label { display: grid; overflow: hidden; }
.menu-label > span { grid-area: 1 / 1; transition: transform 0.45s var(--ease), opacity 0.35s; }
.menu-label__dicht { transform: translateY(110%); opacity: 0; }
.menu-open .menu-label__open { transform: translateY(-110%); opacity: 0; }
.menu-open .menu-label__dicht { transform: none; opacity: 1; }
.burger { position: relative; width: 1.1rem; height: 0.7rem; }
.burger i { position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; border-radius: 2px; transition: transform 0.45s var(--ease), top 0.45s var(--ease); }
.burger i:first-child { top: 0; }
.burger i:last-child { top: calc(100% - 1.5px); }
.menu-open .burger i:first-child { top: calc(50% - 0.75px); transform: rotate(45deg); }
.menu-open .burger i:last-child { top: calc(50% - 0.75px); transform: rotate(-45deg); }
@media (max-width: 71.99em) {
	.hoofdnav { display: none; }
	.site-header__acties::before { display: none; }
	.site-header__menu { display: inline-flex; }
}
@media (max-width: 59.99em) {
	.topbar__datum { display: none; }
	.topbar__links li:first-child span { display: none; }
}
@media (max-width: 34em) {
	.topbar { gap: 0.75rem; font-size: 0.75rem; }
	.topbar__label { display: none; }
	.topbar__aftellen:not(:empty)::before { margin-right: 0.4rem; }
	.topbar__gebed { gap: 0.45rem; }
	.topbar__links { gap: 0.75rem; }
	.site-header__knop { padding: 0 0.8rem; }
	.site-header__knop .btn__pijl { display: none; }
	.menu-label { position: absolute; width: 1px; height: 1px; clip: rect(0 0 0 0); }
	.site-header__logo .logo__img { max-height: 3.25rem; }
}
.menu__binnen { padding-top: calc(var(--topbar-h) + var(--header-h) + var(--wp-admin--admin-bar--height, 0px) + 2rem); }
.menu__link { font-family: var(--f-display); font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); letter-spacing: -0.035em; }

/* ---------- Hero, groot: het beeldmerk ---------- */
.hero { position: relative; color: var(--c-creme); --c-accent: var(--c-goud-licht); }
.hero--groot {
	min-height: calc(100svh - var(--topbar-h) - var(--header-h) - 3.5rem);
	display: flex;
	align-items: center;
	overflow: hidden;
	background:
		radial-gradient(70% 90% at 76% 62%, rgba(35, 128, 138, 0.55), transparent 70%),
		linear-gradient(170deg, #0b3a3f 0%, #072a2e 100%);
}
.hero__patroon {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: var(--patroon-ster);
	background-size: 88px 88px;
	opacity: 0.08;
	-webkit-mask-image: radial-gradient(100% 90% at 80% 20%, #000, transparent 72%);
	mask-image: radial-gradient(100% 90% at 80% 20%, #000, transparent 72%);
}
.hero__gloed { position: absolute; left: 40%; right: -6%; bottom: -34%; height: 66%; background: radial-gradient(50% 50% at 50% 50%, rgba(216, 180, 106, 0.1), transparent 70%); pointer-events: none; }
.hero__raster {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
	align-items: center;
	gap: clamp(1.5rem, 3vw, 3.5rem);
	padding-block: clamp(2.75rem, 2rem + 3vw, 4.5rem);
}
.hero__titel {
	font-size: var(--fs-hero);
	font-weight: 400;
	line-height: 1.02;
	letter-spacing: -0.045em;
	color: var(--c-creme);
}
.hero__titel em { display: inline-block; padding: 0 0.08em 0.2em 0; margin-bottom: -0.2em; }
.hero--groot .hero__titel em { background: linear-gradient(100deg, var(--c-goud-licht), var(--c-goud)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .title-line { padding-bottom: 0.14em; margin-bottom: -0.14em; }
.hero__intro { margin-top: var(--sp-3); max-width: 30rem; font-size: var(--fs-lead); color: rgba(247, 243, 234, 0.84); }
.hero__btns { margin-top: var(--sp-4); }
.hero__merk { position: relative; }
.hero__embleem { position: relative; width: 100%; max-width: 36rem; margin-inline: auto; }
.speelt-intro .hero__embleem { visibility: hidden; }
.hero__ar { margin: -0.4rem 0 0; text-align: center; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.35rem); color: var(--c-goud-licht); }
.hero__scroll {
	position: absolute;
	left: max(var(--gutter), calc((100vw - var(--wrap)) / 2));
	bottom: 1rem;
	width: 1.25rem;
	height: 2rem;
	border: 1px solid rgba(247, 243, 234, 0.35);
	border-radius: 1rem;
}
.hero__scroll span { position: absolute; left: 50%; top: 0.35rem; width: 2px; height: 0.4rem; margin-left: -1px; border-radius: 2px; background: var(--c-goud-licht); animation: nida-muis 2s var(--ease) infinite; }
@keyframes nida-muis { 0% { transform: translateY(0); opacity: 1; } 70%, 100% { transform: translateY(0.75rem); opacity: 0; } }
@media (max-width: 55.99em) {
	.hero--groot { min-height: 0; }
	.hero__raster { grid-template-columns: 1fr; padding-block: 2.5rem 3rem; }
	.hero__merk { order: 2; }
	.hero__scroll { display: none; }
}

/* Het beeldmerk */
.embleem { display: block; width: 100%; height: auto; overflow: visible; }
.em-bundel { transform-origin: 510px 150px; animation: nida-bundel 11s ease-in-out infinite alternate; }
@keyframes nida-bundel { from { transform: rotate(-3deg); opacity: 0.75; } to { transform: rotate(6deg); opacity: 1; } }
.em-lamp { animation: nida-lamp 4s ease-in-out infinite; }
@keyframes nida-lamp { 50% { opacity: 0.65; } }
.em-sterren circle { animation: nida-twinkel 5s ease-in-out infinite; }
.em-sterren circle:nth-child(2n) { animation-delay: 1.4s; }
.em-sterren circle:nth-child(3n) { animation-delay: 2.7s; }
@keyframes nida-twinkel { 50% { opacity: 0.25; } }
.em-golf { animation: nida-golf 7s ease-in-out infinite alternate; }
.em-golf--2 { animation-duration: 9s; animation-direction: alternate-reverse; }
.em-golf--3 { animation-duration: 8s; }
.em-golf--4 { animation-duration: 10s; animation-direction: alternate-reverse; }
@keyframes nida-golf { from { transform: translateX(-10px); } to { transform: translateX(10px); } }

/* De kaart met het eerstvolgende gebed */
.gebedkaart {
	width: min(16.5rem, 100%);
	border: 1px solid rgba(216, 180, 106, 0.32);
	border-radius: var(--radius);
	background: rgba(7, 42, 46, 0.72);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	color: var(--c-creme);
	box-shadow: 0 1.5rem 3rem -1.25rem rgba(4, 22, 25, 0.75);
}
.gebedkaart__a { display: block; padding: 1rem 1.15rem; text-decoration: none; }
.gebedkaart__label { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 0.55rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(247, 243, 234, 0.72); }
.gebedkaart__rij { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 0; font-size: 1.625rem; line-height: 1.1; letter-spacing: -0.03em; }
.gebedkaart__tijd { font-family: var(--f-serif); color: var(--c-goud-licht); font-variant-numeric: tabular-nums; }
.gebedkaart__aftellen { margin: 0.4rem 0 0; font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.gebedkaart__iqama { margin: 0.1rem 0 0; font-size: 0.8125rem; color: rgba(247, 243, 234, 0.6); }
.gebedkaart--hero { position: absolute; left: -0.5rem; top: -1.75rem; z-index: 2; }
@media (max-width: 55.99em) {
	.gebedkaart--hero { position: relative; top: 0; width: 100%; margin-bottom: 1rem; }
}

/* De intro */
.intro { display: none; }
.speelt-intro .intro {
	position: fixed;
	inset: 0;
	z-index: 70;
	display: grid;
	place-items: center;
	background: #0b3a3f;
	animation: nida-intro-weg 0.4s ease 9s forwards;
}
@keyframes nida-intro-weg { to { opacity: 0; visibility: hidden; } }
.intro__stage { width: min(78vmin, 40rem); transform-origin: center; will-change: transform; }
.intro__onder { position: absolute; left: 0; right: 0; bottom: max(7vh, 3rem); display: grid; justify-items: center; gap: 0.3rem; margin: 0; }
.intro__naam { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); letter-spacing: -0.03em; color: var(--c-creme); }
.intro__plaats { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--c-goud-licht); }
.intro__sla { position: absolute; right: var(--gutter); bottom: 1.75rem; padding: 0.75rem 0; border: 0; background: none; color: rgba(247, 243, 234, 0.75); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; }
.intro__sla:hover { color: var(--c-white); }
.js.is-loading.speelt-intro .transition__svg path { stroke-width: 0; }
.js.is-loading.speelt-intro .transition__ster { opacity: 0; }

/* ---------- Lopende band ---------- */
.lopend {
	overflow: hidden;
	padding-block: 1rem;
	background: var(--c-bg-deep);
	color: rgba(247, 243, 234, 0.82);
	border-block: 1px solid rgba(216, 180, 106, 0.18);
}
.lopend__baan { display: flex; width: max-content; animation: nida-lopend 60s linear infinite; }
.lopend:hover .lopend__baan { animation-play-state: paused; }
@keyframes nida-lopend { to { transform: translateX(-25%); } }
.lopend__rij { display: flex; flex: none; margin: 0; padding: 0; list-style: none; }
.lopend__rij li { display: flex; align-items: center; gap: 0.9rem; padding-inline: 1.5rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; white-space: nowrap; }
.lopend__rij li::after { content: ""; width: 0.3rem; height: 0.3rem; margin-left: 1.5rem; background: var(--c-goud); transform: rotate(45deg); }
.lopend__ar { font-family: var(--f-arab); font-size: 1.125rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--c-goud-licht); }

/* ---------- Hero, compact: paginakop over een donkere foto ---------- */
.hero--compact,
.paginakop {
	padding: 0;
	background: linear-gradient(165deg, #0b3a3f, #072a2e);
	overflow: hidden;
}
.hero--compact .hero__media { position: absolute; inset: 0; overflow: hidden; }
.hero--compact .hero__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.hero--compact .hero__waas {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(7, 42, 46, 0.94) 0%, rgba(7, 42, 46, 0.78) 48%, rgba(7, 42, 46, 0.5) 100%), linear-gradient(0deg, rgba(7, 42, 46, 0.6), transparent 50%);
}
.hero--compact .hero__patroon { opacity: 0.07; }
.hero__watermerk {
	position: absolute;
	right: max(var(--gutter), calc((100vw - var(--wrap)) / 2));
	bottom: -0.1em;
	font-family: var(--f-arab);
	font-size: clamp(5rem, 3rem + 11vw, 13rem);
	line-height: 1;
	white-space: nowrap;
	color: var(--c-goud-licht);
	opacity: 0.12;
	pointer-events: none;
}
.hero__binnen,
.paginakop__binnen {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--sp-4);
	padding-block: clamp(2.5rem, 2rem + 2.6vw, 4.25rem);
	grid-template-columns: none;
}
.hero--compact .hero__tekst { flex: 1 1 30rem; max-width: 46rem; min-width: 0; }
.hero--compact .hero__titel { font-size: var(--fs-h1); line-height: 1.04; }
.hero--compact .hero__intro { max-width: 38rem; color: rgba(247, 243, 234, 0.84); }
.kruimelpad { margin-bottom: 1.1rem; font-size: 0.8125rem; color: rgba(247, 243, 234, 0.7); }
.kruimelpad a { color: var(--c-creme); text-decoration: none; }
.kruimelpad a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.kruimelpad .separator { margin-inline: 0.4rem; color: var(--c-goud); }
.kruimelpad p { margin: 0; }

/* Vormen voor beelden */
.vorm { position: relative; overflow: hidden; background: var(--c-zand); }
.vorm img { width: 100%; height: 100%; object-fit: cover; }
.vorm--boog { aspect-ratio: 4 / 4.3; border-radius: 50% 50% var(--radius) var(--radius) / 42% 42% var(--radius) var(--radius); }
.vorm--boog img,
.vorm--liggend img,
.vorm--staand img { height: 116%; margin-top: -8%; }
.vorm--liggend { aspect-ratio: 4 / 3; border-radius: var(--radius-lg); }
.vorm--staand { aspect-ratio: 3 / 4; border-radius: var(--radius-lg); }

/* ---------- Blokken: kop ---------- */
.blok__kopregel { margin-bottom: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem); }
.blok__kopregel--split { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.25rem 2rem; }
.blok__kopregel--datum { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; }
.blok__intro { font-size: 1rem; }
.blok__voet { margin-top: 1.75rem; }

/* ---------- Gebedstijden ---------- */
.gebed-vandaag { display: grid; justify-items: end; gap: 0.1rem; margin: 0; font-size: 0.9375rem; text-align: right; }
.gebed-vandaag strong { font-weight: 600; }
.gebed-vandaag strong::first-letter { text-transform: uppercase; }
.gebed-vandaag em { font-family: var(--f-serif); color: var(--c-goud-licht); }
.gebed-tegels {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 0.625rem;
	align-items: stretch;
}
.gebed-tegel {
	position: relative;
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas: "naam ar" "tijd tijd" "iqama iqama";
	align-content: start;
	gap: 0.2rem 0.4rem;
	padding: 0.95rem 0.95rem 1rem;
	border: 1px solid rgba(247, 243, 234, 0.14);
	border-radius: var(--radius);
	background: rgba(247, 243, 234, 0.08);
	color: var(--c-creme);
	transition: background-color 0.4s, transform 0.5s var(--ease-out), box-shadow 0.4s, color 0.4s, opacity 0.4s;
}
.gebed-tegel__naam { grid-area: naam; font-family: var(--f-text); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.gebed-tegel__ar { grid-area: ar; font-family: var(--f-arab); font-size: 1rem; line-height: 1.1; color: var(--c-goud-licht); }
.gebed-tegel__tijd { grid-area: tijd; margin-top: 0.7rem; font-size: clamp(1.7rem, 1.2rem + 1.1vw, 2.35rem); line-height: 1.05; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.gebed-tegel__iqama { grid-area: iqama; margin-top: 0.3rem; font-size: 0.75rem; color: rgba(247, 243, 234, 0.72); }
.gebed-tegel__iqama strong { font-weight: 600; color: var(--c-creme); }
.gebed-tegel.is-voorbij { opacity: 0.55; }
.gebed-tegel.is-volgend {
	background: var(--c-paper);
	border-color: var(--c-goud);
	border-top-width: 3px;
	color: var(--c-ink);
	transform: translateY(-0.4rem) scale(1.02);
	box-shadow: 0 1.25rem 2.5rem -1rem rgba(4, 22, 25, 0.6);
	opacity: 1;
}
.gebed-tegel.is-volgend .gebed-tegel__ar { color: var(--c-zee); }
.gebed-tegel.is-volgend .gebed-tegel__naam { color: var(--c-zee); }
.gebed-tegel.is-volgend .gebed-tegel__iqama { color: var(--c-mute-ink); }
.gebed-tegel.is-volgend .gebed-tegel__iqama strong { color: var(--c-ink); }
.gebed-tegel.is-volgend .gebed-tegel__ar { visibility: hidden; }
.gebed-tegel.is-volgend::before {
	content: attr(data-label-volgend);
	position: absolute;
	top: 0.6rem;
	right: 0.6rem;
	padding: 0.1rem 0.45rem;
	border-radius: var(--radius-sm);
	background: var(--c-zand);
	color: var(--c-zee);
	font-size: 0.6875rem;
	font-weight: 700;
}
.section--vlak .gebed-tegel { background: var(--c-white); color: var(--c-ink); border-color: var(--c-line-ink); }
.section--vlak .gebed-tegel__iqama { color: var(--c-mute-ink); }
.section--vlak .gebed-tegel__iqama strong { color: var(--c-ink); }
.section--vlak .gebed-tegel__ar { color: var(--c-zee); }
.section--vlak .gebed-tegel.is-volgend { background: var(--c-bg); color: var(--c-creme); }
.section--vlak .gebed-tegel.is-volgend .gebed-tegel__naam { color: var(--c-goud-licht); }
.section--vlak .gebed-tegel.is-volgend .gebed-tegel__iqama,
.section--vlak .gebed-tegel.is-volgend .gebed-tegel__iqama strong { color: var(--c-creme); }

.tijdlijn { position: relative; height: 4.25rem; margin-top: 1.75rem; }
.tijdlijn__lijn { position: absolute; left: 0; right: 0; top: 2.1rem; height: 2px; background: rgba(247, 243, 234, 0.2); border-radius: 2px; }
.tijdlijn__vol { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--c-goud-licht); border-radius: 2px; }
.tijdlijn__nu {
	position: absolute;
	top: 0.35rem;
	z-index: 2;
	transform: translateX(-50%);
	padding: 0.1rem 0.45rem;
	border-radius: var(--radius-sm);
	background: var(--c-paper);
	color: var(--c-ink);
	font-size: 0.6875rem;
	font-weight: 600;
	white-space: nowrap;
}
.tijdlijn__nu b { font-weight: 700; font-variant-numeric: tabular-nums; }
.tijdlijn__nu::after { content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 0.45rem; margin-left: -1px; background: var(--c-paper); }
.tijdlijn__punten { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.tijdlijn__punt { position: absolute; top: 2.1rem; transform: translateX(-50%); display: grid; justify-items: center; }
.tijdlijn__punt i { display: block; width: 0.625rem; height: 0.625rem; margin-top: -0.25rem; border: 1px solid var(--c-goud-licht); border-radius: 50%; background: var(--c-zee); transition: background-color 0.4s; }
.tijdlijn__punt.is-voorbij i { background: var(--c-goud-licht); }
.tijdlijn__punt span { margin-top: 0.3rem; font-size: 0.6875rem; color: rgba(247, 243, 234, 0.75); white-space: nowrap; }
.gebed-bron { margin: 0; font-size: 0.8125rem; color: rgba(247, 243, 234, 0.75); }
.gebed-bron p { margin: 0; }
@media (max-width: 63.99em) {
	.gebed-tegels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 34em) {
	.gebed-tegels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.gebed-vandaag { justify-items: start; text-align: left; }
	.tijdlijn__punt span { font-size: 0.625rem; }
}

/* Maandrooster */
.rooster { margin-top: 0; }
.rooster__balk { margin-bottom: 1.25rem; }
.rooster__titel { font-size: var(--fs-h2); }
.rooster__knoppen { flex-wrap: wrap; }
.rooster__knop {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	height: 2.5rem;
	padding: 0 0.9rem;
	border: 1px solid var(--c-line-ink);
	border-radius: var(--radius-sm);
	background: var(--c-white);
	color: var(--c-ink);
	font-size: 0.875rem;
	font-weight: 500;
	cursor: pointer;
	transition: border-color 0.2s;
}
.rooster__knop .icoon { width: 1rem; height: 1rem; }
.rooster__knop:hover { border-color: var(--c-goud-donker); }
.rooster .rondknop { border-color: var(--c-line-ink); background: var(--c-white); border-radius: var(--radius-sm); }
.rooster__scroll { border: 1px solid var(--c-line-ink); border-radius: var(--radius); background: var(--c-white); }
.rooster__tabel { font-size: 0.875rem; }
.rooster__tabel thead th { color: var(--c-mute-ink); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; }
.section--vlak .rooster__tabel thead th { color: var(--c-mute-ink); }
.rooster__tabel th, .rooster__tabel td { text-align: left; padding: 0.55rem 0.9rem; }
.rooster__tabel tr.is-vandaag { background: rgba(35, 128, 138, 0.12); box-shadow: inset 3px 0 0 var(--c-zee); }
.section--vlak .rooster__tabel tr.is-vandaag th { color: var(--c-zee); }
.rooster__voet { margin-top: 1rem; font-size: 0.875rem; max-width: none; color: var(--c-mute-ink); }
.rooster__tabel--lessen { min-width: 34rem; }

/* ---------- Introductie met cijfers ---------- */
.introductie { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--sp-3) clamp(2rem, 5vw, 4.5rem); }
.introductie__kop h2 { font-size: clamp(2.05rem, 1.6rem + 1.9vw, 3.25rem); }
.introductie__richtext { max-width: none; color: var(--c-mute-ink); font-size: 0.9375rem; }
.introductie__richtext > p:first-child { color: var(--c-ink); font-size: var(--fs-lead); line-height: 1.55; }
.introductie__tekst .tekstlinks { margin-top: 1.5rem; }
.cijfers {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.5rem 0;
	margin: var(--sp-6) 0 0;
	padding: var(--sp-3) 0 0;
	list-style: none;
	border-top: 1px solid var(--c-line-ink);
}
.cijfer { display: grid; align-content: start; gap: 0.45rem; padding-inline: 1.5rem; border-left: 1px solid var(--c-line-ink); }
.cijfer:first-child { padding-left: 0; border-left: 0; }
.cijfer__waarde { font-family: var(--f-serif); font-size: clamp(1.9rem, 1.5rem + 1.4vw, 2.75rem); line-height: 1.05; letter-spacing: -0.02em; color: var(--c-bg); font-variation-settings: "opsz" 72, "SOFT" 100; }
.cijfer__waarde--ar { font-family: var(--f-arab); color: var(--c-goud-donker); letter-spacing: 0; text-align: left; line-height: 1; }
.cijfer__label { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; line-height: 1.4; text-transform: uppercase; color: var(--c-mute-ink); }
@media (max-width: 55.99em) {
	.introductie { grid-template-columns: 1fr; }
	.cijfers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cijfer:nth-child(odd) { padding-left: 0; border-left: 0; }
}

/* ---------- Ontdek-tegels ---------- */
.ontdek {
	display: grid;
	grid-template-columns: minmax(0, 1.45fr) repeat(2, minmax(0, 1fr));
	grid-auto-rows: minmax(12rem, 1fr);
	gap: 0.625rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.tegel {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 12rem;
	padding: 1.25rem;
	border-radius: var(--radius);
	overflow: hidden;
	isolation: isolate;
	transition: transform 0.5s var(--ease-out), box-shadow 0.5s;
}
.tegel:hover { transform: translateY(-3px); box-shadow: 0 1.5rem 2.5rem -1.5rem rgba(7, 42, 46, 0.55); }
.tegel:focus-within { outline: 2px solid var(--c-goud); outline-offset: 2px; }
.tegel--gebed { grid-row: span 2; background: var(--c-bg); color: var(--c-creme); padding: 1.5rem; }
.tegel--zee { background: var(--c-zee); background-image: var(--patroon-golf); background-size: 96px 36px; background-blend-mode: soft-light; color: var(--c-creme); }
.tegel--donker { background: var(--c-bg); color: var(--c-creme); }
.tegel--wit { background: var(--c-white); color: var(--c-ink); box-shadow: inset 0 0 0 1px var(--c-line-ink); }
.tegel--zand { background: #dcc391; color: var(--c-ink); }
.tegel__foto { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-out); }
.tegel--gebed::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(7, 42, 46, 0.92) 12%, rgba(7, 42, 46, 0.35) 60%, rgba(7, 42, 46, 0.55)); }
.tegel:hover .tegel__foto { transform: scale(1.04); }
.tegel__ar { position: absolute; top: 0.6rem; right: 1rem; z-index: -1; font-family: var(--f-arab); font-size: clamp(3rem, 2.4rem + 2.2vw, 4.75rem); line-height: 1.1; color: var(--c-goud-licht); opacity: 0.35; }
.tegel--zand .tegel__ar,
.tegel--wit .tegel__ar { color: var(--c-goud-donker); opacity: 0.22; }
.tegel__gebed { margin-bottom: auto; }
.tegel__label { display: flex; align-items: center; gap: 0.6rem; margin: 0; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.tegel__rij { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: clamp(4rem, 2rem + 9vw, 10rem) 0 0; font-size: clamp(2.4rem, 1.8rem + 2.4vw, 3.75rem); line-height: 1; letter-spacing: -0.045em; }
.tegel__rij time { font-family: var(--f-serif); font-size: 0.86em; color: var(--c-goud-licht); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.tegel__aftellen { margin: 0.6rem 0 0; font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.tegel__voet { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.tegel--gebed .tegel__voet { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--c-line); }
.tegel__titel { font-size: 1.1875rem; font-weight: 500; letter-spacing: -0.02em; }
.tegel__a { text-decoration: none; }
.tegel__a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.tegel__a:focus-visible { outline: none; }
.tegel__tekst { margin: 0.25rem 0 0; font-size: 0.8125rem; line-height: 1.45; opacity: 0.84; }
.tegel__pijl { flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border: 1px solid currentColor; border-radius: 50%; opacity: 0.8; transition: background-color 0.3s, color 0.3s, transform 0.4s var(--ease-out); }
.tegel__pijl .icoon { width: 1rem; height: 1rem; }
.tegel:hover .tegel__pijl { transform: translateX(3px); background: var(--c-goud-licht); color: var(--c-ink); border-color: var(--c-goud-licht); opacity: 1; }
@media (max-width: 55.99em) {
	.ontdek { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tegel--gebed { grid-column: 1 / -1; grid-row: auto; }
	.tegel__rij { margin-top: 3rem; }
}
@media (max-width: 30em) {
	.ontdek { grid-template-columns: 1fr; }
	.tegel { min-height: 10rem; }
}

/* ---------- Tekst met afbeelding: boog met dubbele lijn en rondje ---------- */
.tekst-media { gap: clamp(2rem, 5vw, 5rem); }
.tekst-media__kader { position: relative; width: 100%; max-width: 30rem; justify-self: center; }
.tekst-media__kader--liggend { max-width: none; }
.tekst-media--beeld-links .tekst-media__kader { order: -1; }
.tekst-media__kader--boog::before {
	content: "";
	position: absolute;
	inset: -0.75rem;
	border: 1px solid var(--c-hairline);
	border-radius: 50% 50% var(--radius) var(--radius) / 42% 42% var(--radius) var(--radius);
	pointer-events: none;
}
.tekst-media__beeld { max-width: none; }
.tekst-media__badge {
	position: absolute;
	right: -0.5rem;
	bottom: 2rem;
	display: grid;
	place-items: center;
	align-content: center;
	width: 6.25rem;
	height: 6.25rem;
	margin: 0;
	border: 2px solid var(--c-paper);
	border-radius: 50%;
	background: var(--c-zee);
	color: var(--c-creme);
	text-align: center;
	line-height: 1.15;
}
.tekst-media__badge strong { font-size: 0.875rem; font-weight: 600; }
.tekst-media__badge em { font-family: var(--f-serif); font-size: 0.75rem; color: var(--c-goud-licht); }
.vinklijst { display: grid; gap: 0.6rem; margin: 1.25rem 0 0; padding: 0; list-style: none; font-size: 0.9375rem; }
.vinklijst li { display: flex; align-items: flex-start; gap: 0.65rem; }
.vinklijst .icoon { flex: none; width: 1.25rem; height: 1.25rem; padding: 0.2rem; border-radius: 50%; background: var(--c-goud); color: var(--c-ink); stroke-width: 3; }
@media (max-width: 55.99em) {
	.tekst-media__kader { order: -1; max-width: 26rem; justify-self: start; margin-left: 0.75rem; }
	.tekst-media__kader--liggend { max-width: 100%; margin-left: 0; }
}

/* ---------- Kaarten ---------- */
.kaarten { gap: 0.625rem; margin: 0; padding: 0; list-style: none; }
.kaart { overflow: hidden; border-radius: var(--radius); border: 1px solid var(--c-line); background: rgba(247, 243, 234, 0.05); }
.section--vlak .kaart { border-color: var(--c-line-ink); box-shadow: 0 1rem 2rem -1.75rem rgba(7, 42, 46, 0.5); }
.kaart--link:hover { background: rgba(247, 243, 234, 0.1); }
.kaart__titel { font-size: clamp(1.2rem, 1.1rem + 0.4vw, 1.45rem); letter-spacing: -0.025em; }
.kaart__icoon { border-radius: 50%; }
.section--vlak .kaart__icoon { border-color: var(--c-hairline); color: var(--c-zee); }
.section--vlak .kaart--link:hover .kaart__icoon { background: var(--c-zee); color: var(--c-white); }
.kaart__meer { font-size: var(--fs-btn); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-goud-licht); }
.section--vlak .kaart__meer { color: var(--c-zee); }
.kaart__nummer { margin-bottom: 1.5rem; font-family: var(--f-serif); font-size: 1rem; color: var(--c-goud); }
.section--vlak .kaart__nummer { color: var(--c-goud-donker); }
.kaart__watermerk { position: absolute; top: 0.4rem; right: 1rem; font-family: var(--f-arab); font-size: clamp(2.75rem, 2.2rem + 2vw, 4.5rem); line-height: 1.15; color: var(--c-goud-donker); opacity: 0.2; pointer-events: none; }
.section:not(.section--vlak) .kaart__watermerk { color: var(--c-goud-licht); opacity: 0.25; }
.chips li { border-radius: var(--radius-sm); background: rgba(236, 215, 166, 0.14); }
.section--vlak .chips li { background: rgba(17, 100, 107, 0.1); color: var(--c-zee); }

/* ---------- Stappen, FAQ, citaat ---------- */
.stap__nummer { font-family: var(--f-serif); background: var(--c-bg); }
.section--zee .stap__nummer { background: var(--c-zee); }
.section--creme .stap__nummer,
.section--zand .stap__nummer { border-color: var(--c-zee); color: var(--c-zee); }
.section--vlak .stap.is-actief .stap__nummer { background: var(--c-zee); }
.stap__titel { letter-spacing: -0.025em; }
.stappen__lijn span, .section--vlak .stappen__lijn span { background: var(--c-goud); }
.faq { gap: 0.5rem; }
.faq__item { border-radius: var(--radius); border: 1px solid var(--c-line); background: rgba(247, 243, 234, 0.05); }
.section--vlak .faq__item { border-color: var(--c-line-ink); }
.section--vlak .faq__item[open] .faq__plus { background: var(--c-zee); border-color: var(--c-zee); }
.citaat__tekst { font-family: var(--f-serif); font-style: italic; font-variation-settings: "opsz" 72, "SOFT" 100; }
.section--vlak .citaat__ster { color: var(--c-goud-donker); }

/* ---------- Oproep ---------- */
.cta { margin-inline: 0; border-radius: var(--radius-lg); }
.cta--goud { background: var(--c-goud); }

/* ---------- Fotoband: rondleiding en doneren ---------- */
.fotoband { padding-block: var(--sp-7); background: var(--c-bg-deep); isolation: isolate; }
.fotoband__foto { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.fotoband__foto img { position: absolute; left: 0; top: -8%; width: 100%; height: 116%; object-fit: cover; }
.fotoband__foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7, 42, 46, 0.94) 0%, rgba(7, 42, 46, 0.78) 50%, rgba(7, 42, 46, 0.55) 100%); }
.fotoband__binnen { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center; gap: var(--sp-5) clamp(2rem, 6vw, 6rem); }
.fotoband__tekst .richtext { margin-top: var(--sp-3); color: rgba(247, 243, 234, 0.84); }
.plekkenlijst { display: grid; margin: 0; padding: 0; list-style: none; }
.plekkenlijst li { display: flex; align-items: baseline; gap: 1.25rem; padding-block: 0.8rem; border-top: 1px solid var(--c-line); font-size: 1.0625rem; }
.plekkenlijst li:last-child { border-bottom: 1px solid var(--c-line); }
.plekkenlijst span { font-family: var(--f-serif); font-size: 0.875rem; color: var(--c-goud-licht); }
.doneerpaneel { padding: 1.5rem; border: 1px solid rgba(216, 180, 106, 0.3); border-radius: var(--radius); background: rgba(7, 42, 46, 0.8); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.doneerpaneel__label { margin: 0 0 0.9rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-goud-licht); }
.doneerpaneel__knop { width: 100%; margin-top: 1rem; }
.doneerpaneel__regel { margin: 0.9rem 0 0; font-size: 0.8125rem; color: rgba(247, 243, 234, 0.72); }
.bedragen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.bedrag {
	display: grid;
	place-items: center;
	width: 100%;
	height: 3.5rem;
	padding: 0;
	border: 1px solid var(--c-line);
	border-radius: var(--radius-sm);
	background: rgba(247, 243, 234, 0.07);
	color: var(--c-creme);
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.25s, color 0.25s, border-color 0.25s, transform 0.3s var(--ease-out);
}
.bedrag:hover { border-color: var(--c-goud); transform: translateY(-2px); }
.bedrag.is-gekozen { background: var(--c-paper); color: var(--c-ink); border-color: var(--c-paper); }
.overmaken { margin-top: 1rem; padding: 0.9rem 1rem; border-radius: var(--radius-sm); background: rgba(247, 243, 234, 0.08); }
.overmaken.is-gekozen { animation: nida-opvallen 0.7s var(--ease-out); }
@keyframes nida-opvallen { 0% { box-shadow: 0 0 0 0 rgba(236, 215, 166, 0.6); } 100% { box-shadow: 0 0 0 0.7rem rgba(236, 215, 166, 0); } }
.overmaken__regel { margin: 0 0 0.25rem; font-size: 0.8125rem; color: rgba(247, 243, 234, 0.76); }
.overmaken__rij { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem 0.75rem; }
.overmaken__iban { font-size: 1.0625rem; font-weight: 600; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.overmaken__knop { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.55rem; border: 1px solid var(--c-line); border-radius: var(--radius-sm); background: none; color: inherit; font-size: 0.75rem; font-weight: 600; cursor: pointer; }
.overmaken__knop .icoon { width: 0.875rem; height: 0.875rem; }
.overmaken__knop:hover { border-color: var(--c-goud-licht); }
.overmaken__knop.is-gekopieerd { border-color: var(--c-ok); color: var(--c-ok); }
.overmaken__tnv { margin: 0.25rem 0 0; font-size: 0.8125rem; color: rgba(247, 243, 234, 0.72); }
@media (max-width: 55.99em) {
	.fotoband__binnen { grid-template-columns: 1fr; }
	.fotoband__foto::after { background: rgba(7, 42, 46, 0.84); }
}

/* De pagina Doneren: grote bedragen */
.donerenblok { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; gap: var(--sp-4) clamp(2rem, 6vw, 5rem); }
.donerenblok .bedragen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bedragen--groot .bedrag { justify-items: start; align-content: space-between; height: 5.75rem; padding: 0.9rem 1rem; border-color: var(--c-line-ink); background: var(--c-white); color: var(--c-zee); }
.bedragen--groot .bedrag__waarde { font-size: 1.375rem; letter-spacing: -0.03em; }
.bedragen--groot .bedrag__actie { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.75rem; font-weight: 500; color: var(--c-mute-ink); }
.bedrag__actie .icoon { width: 0.8rem; height: 0.8rem; }
.bedragen--groot .bedrag.is-gekozen { background: var(--c-zee); border-color: var(--c-zee); color: var(--c-creme); }
.bedragen--groot .bedrag.is-gekozen .bedrag__actie { color: var(--c-goud-licht); }
.bedrag--vrij { background: var(--c-zee) !important; color: var(--c-creme) !important; }
.bedrag--vrij .bedrag__actie { color: var(--c-goud-licht) !important; }
.bankkaart { grid-column: 2; border-radius: var(--radius); background: linear-gradient(140deg, #114a50 0%, #0b3a3f 55%, #072a2e 100%); }
.donerenblok__tekst { grid-row: span 2; }
.bankkaart__iban { font-family: var(--f-display); font-weight: 500; letter-spacing: -0.015em; }
.bankkaart__gegevens { margin-top: 1.25rem; padding-top: 1rem; }
.bankkaart__label { color: var(--c-goud-licht); }
@media (max-width: 55.99em) {
	.donerenblok { grid-template-columns: 1fr; }
	.bankkaart { grid-column: auto; }
	.donerenblok__tekst { grid-row: auto; }
}
@media (max-width: 30em) {
	.donerenblok .bedragen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bankkaart__iban { white-space: normal; }
}

/* ---------- Verzoeken ---------- */
.verzoeken { display: grid; grid-template-columns: repeat(var(--kol, 5), minmax(0, 1fr)); gap: 0.625rem; margin: 0; padding: 0; list-style: none; }
.verzoeken--6 { --kol: 3; }
.verzoeken--3 { --kol: 3; }
.verzoeken--4 { --kol: 4; }
.verzoek {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 10.5rem;
	padding: 1.15rem;
	border: 1px solid var(--c-line-ink);
	border-radius: var(--radius);
	background: var(--c-white);
	box-shadow: 0 1rem 2rem -1.75rem rgba(7, 42, 46, 0.5);
	transition: transform 0.45s var(--ease-out), border-color 0.3s, box-shadow 0.45s;
}
.verzoek:hover { transform: translateY(-4px); border-color: var(--c-goud); box-shadow: 0 1.5rem 2.5rem -1.75rem rgba(7, 42, 46, 0.6); }
.verzoek:focus-within { outline: 2px solid var(--c-goud); outline-offset: 2px; }
.verzoek__nummer { font-family: var(--f-serif); font-size: 0.875rem; color: var(--c-goud-donker); }
.verzoek__pijl { position: absolute; top: 1.1rem; right: 1.1rem; color: var(--c-goud-donker); transition: transform 0.35s var(--ease-out); }
.verzoek__pijl .icoon { width: 1.1rem; height: 1.1rem; }
.verzoek:hover .verzoek__pijl { transform: translateX(4px); }
.verzoek__titel { margin-top: auto; padding-top: 1.75rem; font-size: 1.0625rem; font-weight: 500; line-height: 1.25; letter-spacing: -0.02em; }
.verzoek__a { text-decoration: none; }
.verzoek__a::after { content: ""; position: absolute; inset: 0; }
.verzoek__a:focus-visible { outline: none; }
.verzoek__tekst { margin: 0.35rem 0 0; font-size: 0.8125rem; line-height: 1.45; color: var(--c-mute-ink); }
@media (max-width: 63.99em) { .verzoeken { --kol: 3; } }
@media (max-width: 40em) { .verzoeken { --kol: 2; } .verzoek { min-height: 9rem; } }

/* ---------- Begrippen en infoband ---------- */
.begrippen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem clamp(1.5rem, 3vw, 3rem); margin: 0; }
.begrip { padding-top: 0.9rem; border-top: 1px solid var(--c-line-ink); }
.begrip__term { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.4rem; font-size: 1.1875rem; letter-spacing: -0.02em; }
.begrip__ar { font-family: var(--f-arab); font-size: 1.25rem; color: var(--c-goud-donker); letter-spacing: 0; }
.begrip__uitleg { margin: 0; font-size: 0.9375rem; color: var(--c-mute-ink); }
.begrip__uitleg a { color: var(--c-zee); }
@media (max-width: 55.99em) { .begrippen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 34em) { .begrippen { grid-template-columns: 1fr; } }
.infoband { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.5rem clamp(1.5rem, 4vw, 3.5rem); margin: 0; padding: 0; list-style: none; }
.infovak { padding-left: 1.25rem; border-left: 1px solid var(--c-hairline); }
.infovak__label { margin: 0 0 0.4rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-zee-licht); }
.infovak__titel { font-size: var(--fs-h3); }
.infovak__tekst { margin-top: 0.5rem; font-size: 0.9375rem; color: var(--c-mute-ink); }
.infovak .tekstlinks { margin-top: 0.9rem; }

/* ---------- Virtuele rondleiding ---------- */
.tour { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: calc(100svh - var(--topbar-h) - var(--header-h)); overflow: hidden; background: var(--c-bg-deep); color: var(--c-creme); --c-accent: var(--c-goud-licht); }
.tour__beelden { position: absolute; inset: 0; }
.tour__beeld { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.1s ease; }
.tour__beeld.is-actief { opacity: 1; }
.tour__beeld img { width: 100%; height: 100%; object-fit: cover; }
.tour.is-gestart .tour__beeld.is-actief img { animation: nida-kenburns 12s ease-out both; }
@keyframes nida-kenburns { from { transform: scale(1.07); } to { transform: scale(1); } }
.tour__waas { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7, 42, 46, 0.88) 0%, rgba(7, 42, 46, 0.55) 50%, rgba(7, 42, 46, 0.2) 100%), linear-gradient(0deg, rgba(7, 42, 46, 0.65), transparent 40%); }
.tour.is-gestart .tour__waas { background: linear-gradient(90deg, rgba(7, 42, 46, 0.72) 0%, rgba(7, 42, 46, 0.3) 45%, transparent 75%), linear-gradient(0deg, rgba(7, 42, 46, 0.7), transparent 38%); }
.tour__laag { position: relative; flex: 1; display: flex; align-items: flex-end; padding-block: 2.25rem; }
.tour__start { align-self: center; }
.tour__start[hidden] { display: none; }
.tour__start { max-width: 36rem; }
.tour__ar { margin: 0 0 0.25rem; font-size: clamp(1.5rem, 1.25rem + 0.9vw, 2.1rem); text-align: left; color: var(--c-goud-licht); }
.tour__titel { font-size: var(--fs-hero); line-height: 1.02; letter-spacing: -0.045em; }
.tour__tekst { margin-top: 1rem; color: rgba(247, 243, 234, 0.88); max-width: 34rem; }
.tour__acties { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: 2rem; }
.tour__play { display: inline-flex; align-items: center; gap: 1rem; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; }
.tour__rond { display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 50%; background: var(--c-goud-licht); color: var(--c-ink); transition: transform 0.4s var(--ease-out); }
.tour__rond .icoon { width: 1.25rem; height: 1.25rem; margin-left: 0.15rem; fill: currentColor; }
.tour__play:hover .tour__rond { transform: scale(1.07); }
.tour__play strong { display: block; font-size: 1.125rem; font-weight: 600; }
.tour__play small { display: block; font-size: 0.8125rem; color: rgba(247, 243, 234, 0.75); }
.tour__zelf { padding: 0; border: 0; background: none; color: rgba(247, 243, 234, 0.9); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; }
.tour__zelf:hover { color: var(--c-white); }
.tour__info {
	max-width: 30rem;
	padding: 1.5rem;
	border: 1px solid rgba(216, 180, 106, 0.28);
	border-radius: var(--radius);
	background: rgba(7, 42, 46, 0.82);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}
.tour__info[hidden] { display: none; }
.tour__teller { margin: 0 0 0.75rem; font-family: var(--f-serif); font-size: 0.9375rem; color: var(--c-goud-licht); }
.tour__plektitel { font-size: var(--fs-h2); letter-spacing: -0.04em; }
.tour__bediening { display: flex; gap: 0.5rem; margin-top: 1.5rem; }
.tour__balk { position: relative; padding-block: 0.9rem; background: rgba(7, 42, 46, 0.88); }
.tour__stappen { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0.75rem; margin: 0 auto; list-style: none; }
.tour__stap { display: block; width: 100%; padding: 0; border: 0; background: none; color: rgba(247, 243, 234, 0.7); text-align: left; cursor: pointer; }
.tour__stap.is-actief, .tour__stap:hover { color: var(--c-white); }
.tour__voortgang { display: block; height: 2px; margin-bottom: 0.5rem; background: rgba(247, 243, 234, 0.22); overflow: hidden; }
.tour__voortgang i { display: block; height: 100%; background: var(--c-goud-licht); transform: scaleX(0); transform-origin: 0 50%; }
.tour__stapnaam { display: block; font-size: 0.75rem; font-weight: 500; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tour__stapnaam span { font-family: var(--f-serif); color: var(--c-goud-licht); }
@media (max-width: 40em) {
	.tour__stapnaam { font-size: 0; }
	.tour__stapnaam span { font-size: 0.75rem; }
	.tour__waas, .tour.is-gestart .tour__waas { background: linear-gradient(0deg, rgba(7, 42, 46, 0.92) 25%, rgba(7, 42, 46, 0.45)); }
	.tour__laag { align-items: flex-end; }
}

/* ---------- Formulier ---------- */
.formulierblok__form { border-radius: var(--radius); border: 1px solid var(--c-line-ink); box-shadow: 0 1.5rem 3rem -2.25rem rgba(7, 42, 46, 0.5); }
.gform_wrapper.gravity-theme { --gf-radius: 0.25rem; }
.gform_wrapper.gravity-theme input:focus,
.gform_wrapper.gravity-theme select:focus,
.gform_wrapper.gravity-theme textarea:focus { box-shadow: 0 0 0 3px rgba(17, 100, 107, 0.18); }

/* ---------- Nieuws ---------- */
.nieuwskaart { border-radius: var(--radius); }
.section--vlak .nieuwskaart { border: 1px solid var(--c-line-ink); }
.nieuwskaart__titel { font-size: 1.3125rem; letter-spacing: -0.025em; }
.section--vlak .nieuwskaart__leeg { color: var(--c-goud-donker); }
.nieuwskaart__beeld { background: var(--c-zand); }
.nieuwskaart__meta { color: var(--c-goud-licht); }
.nav-links .page-numbers { border-radius: var(--radius-sm); border-color: var(--c-line-ink); }

/* ---------- Contact ---------- */
.contactblok { align-items: center; gap: clamp(2rem, 5vw, 5rem); }
.contactlijst__icoon { border-radius: 50%; }
.contactblok__kaart { border-radius: var(--radius); min-height: 24rem; }
.contactblok__kaart iframe { min-height: 24rem; }

/* ---------- Bankkaart, financieel, voorzieningen, doelen, agenda ---------- */
.financieel, .agenda, .doel, .voorziening, .andere-vacatures a { border-radius: var(--radius); }
.section--vlak .voorziening, .section--vlak .doel { border: 1px solid var(--c-line-ink); }
.section:not(.section--vlak) .financieel,
.section:not(.section--vlak) .agenda,
.section:not(.section--vlak) .doel,
.section:not(.section--vlak) .voorziening { background: rgba(247, 243, 234, 0.07); }
.section--vlak .voorziening__icoon { border-color: var(--c-hairline); color: var(--c-zee); }
.section--vlak .voorziening__check { color: var(--c-zee); }
.section--vlak .doel__icoon { background: var(--c-zee); }
.section--vlak .doel__balk span { background: var(--c-zee); }
.section--vlak .andere-vacatures a { background: var(--c-white); border: 1px solid var(--c-line-ink); }
.section--vlak .andere-vacatures a:hover { border-color: var(--c-goud); background: var(--c-white); }
.section--vlak .andere-vacatures__icoon { border-color: var(--c-hairline); color: var(--c-zee); }
.section--vlak .andere-vacatures a > .icoon { color: var(--c-goud-donker); }
.section--vlak .filters__pil { border-color: var(--c-line-ink); }
.filters__pil { border-radius: var(--radius-sm); }
.section--vlak .filters__pil.is-actief { background: var(--c-bg); border-color: var(--c-bg); color: var(--c-creme); }
.section--vlak .filters__pil.is-actief span { color: var(--c-goud-licht); }
.prose a { color: var(--c-zee); }
.galerij__beeld { border-radius: var(--radius); background: var(--c-zand); }
.galerij__strook { margin: 0; padding: 0; list-style: none; }

/* ---------- Footer ---------- */
.site-footer {
	position: relative;
	margin-top: 2.9rem;
	padding-bottom: 1.5rem;
	background: var(--c-bg-deep);
	color: var(--c-creme);
}
.site-footer__golf { position: absolute; left: 0; right: 0; bottom: 100%; display: block; width: 100%; height: 3rem; margin-bottom: -1px; color: var(--c-bg-deep); }
.site-footer__patroon { position: absolute; inset: 0; background-image: var(--patroon-ster); background-size: 88px 88px; opacity: 0.05; pointer-events: none; }
.site-footer__grid {
	position: relative;
	display: grid;
	grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr));
	gap: var(--sp-4) var(--sp-3);
	padding-block: var(--sp-5);
	font-size: 0.9375rem;
}
.site-footer__logo { display: inline-block; height: 4.75rem; }
.site-footer__logo .logo__img { width: auto; height: 100%; }
.site-footer__tekst { margin-top: 1rem; max-width: 22rem; font-size: 0.9375rem; color: var(--c-mute); }
.site-footer__label { margin: 0 0 0.75rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-goud-licht); }
.site-footer__adres { margin-bottom: 0.6rem; color: var(--c-mute); }
.site-footer__links { display: grid; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.site-footer__links a { color: var(--c-creme); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.4s var(--ease); }
.site-footer__links a:hover,
.site-footer__links a[aria-current] { background-size: 100% 1px; }
.site-footer__onder { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; padding-top: var(--sp-3); border-top: 1px solid var(--c-line); font-size: 0.8125rem; color: var(--c-mute); }
.site-footer__onder p { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin: 0; }
.site-footer__onder ul { display: flex; gap: 1.25rem; margin: 0 auto 0 0; padding: 0; list-style: none; }
.site-footer__onder a { text-decoration: none; }
.site-footer__onder a:hover { color: var(--c-creme); text-decoration: underline; text-underline-offset: 0.2em; }
.site-footer__boven { font-weight: 600; }
@media (max-width: 63.99em) {
	.site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.site-footer__merk { grid-column: 1 / -1; }
}
@media (max-width: 30em) { .site-footer__grid { grid-template-columns: 1fr; } }

/* ---------- 404 ---------- */
.niet-gevonden { background: var(--c-bg); color: var(--c-creme); min-height: 70svh; padding-block: var(--sp-6); }

/* ---------- Minder beweging en print ---------- */
@media (prefers-reduced-motion: reduce) {
	.lopend__baan { animation: none; }
	.em-bundel, .em-golf, .em-lamp, .em-sterren circle, .live-stip { animation: none; }
}
@media print {
	.topbar, .hoofdbalk, .site-footer, .zweefknop { display: none !important; }
	html.print-rooster .rooster__tabel th, html.print-rooster .rooster__tabel td { text-align: left; }
}

/* ---------- Nieuws: met één bericht een brede kaart ---------- */
@media (min-width: 40em) {
	.nieuws-raster:has(> .nieuwskaart:only-child) { grid-template-columns: 1fr; }
	.nieuwskaart:only-child .nieuwskaart__link { flex-direction: row; }
	.nieuwskaart:only-child .nieuwskaart__beeld { flex: 0 0 42%; aspect-ratio: auto; min-height: 15rem; }
	.nieuwskaart:only-child .nieuwskaart__tekst { justify-content: center; padding: 2rem clamp(1.5rem, 4vw, 3.5rem); }
	.nieuwskaart:only-child .nieuwskaart__titel { font-size: var(--fs-h3); }
	.nieuwskaart:only-child .nieuwskaart__lees { margin-top: 0; }
}
.section--vlak .kicker::before { background: var(--c-goud-donker); }
@media (max-width: 55.99em) {
	.fotoband__binnen,
	.tekst-media,
	.hero__raster { grid-template-columns: minmax(0, 1fr); }
	.tekst-media__kader { width: calc(100% - 1.5rem); margin-inline: 0.75rem; }
	.tekst-media__kader--liggend { width: 100%; margin-inline: 0; }
}
.doneerpaneel__knop { height: auto; min-height: var(--btn-h); padding-block: 0.65rem; padding-inline: 1rem; white-space: normal; text-align: center; }
.hero--groot .hero__titel { font-size: min(var(--fs-hero), 10.5vh + 1rem); }
@media (max-width: 55.99em) { .hero--groot .hero__titel { font-size: var(--fs-hero); } }