/* ==========================================================================
   Sterel Notarissen
   1. Lettertypen      2. Ontwerptokens    3. Basis
   4. Bouwstenen       5. Header           6. Hero
   ========================================================================== */

/* 1. Lettertypen ---------------------------------------------------------- */

@font-face {
	font-family: 'Source Serif 4';
	src: url('../fonts/sourceserif4-latin-normal.woff2') format('woff2');
	font-weight: 200 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
		U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Source Serif 4';
	src: url('../fonts/sourceserif4-latin-italic.woff2') format('woff2');
	font-weight: 200 900;
	font-style: italic;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
		U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Source Serif 4';
	src: url('../fonts/sourceserif4-latin-ext-normal.woff2') format('woff2');
	font-weight: 200 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
		U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
		U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Source Serif 4';
	src: url('../fonts/sourceserif4-latin-ext-italic.woff2') format('woff2');
	font-weight: 200 900;
	font-style: italic;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
		U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
		U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* 2. Ontwerptokens -------------------------------------------------------- */

:root {
	/* Huisstijl — gemeten uit het logo (#159AD7 / #7F8486) en de PMS-opgave */
	--blauw:        #009CDE;   /* PMS 2925 — iconen, vlakken, accenten */
	--blauw-tekst:  #0077C4;   /* zelfde tint, dieper — 4,7:1 op wit, dus tekstveilig */
	--blauw-diep:   #0E2A4E;   /* navy uit het ontwerp — koppen */
	--blauw-waas:   #EDF7FC;   /* zachte achtergrond, icoonvlakken */
	--grijs:        #898D8D;   /* PMS 423 */
	--grijs-voet:   #767C7E;   /* footervlak uit het ontwerp */

	/* Neutralen */
	--inkt:         #0E2A4E;
	--tekst:        #5B6166;
	--gedempt:      #7C8386;
	--lijn:         #E4E7E7;
	--lijn-zacht:   #EDEFEF;
	--vlak:         #F7F8F8;
	--wit:          #FFFFFF;

	/* Letters */
	--serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
	--sans:  -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

	/* Ruimteschaal — stappen van 4 */
	--r1: 4px;   --r2: 8px;   --r3: 12px;  --r4: 16px;  --r5: 24px;
	--r6: 32px;  --r7: 48px;  --r8: 64px;  --r9: 96px;  --r10: 128px;

	/* Maten — gemeten uit het ontwerp */
	--breed: 1320px;
	--goot: 32px;
	--kop-hoogte: 74px;
	--hero-hoogte: 486px;
	--foto-start: 38%;        /* waar de kantoorfoto begint */
	--kaart-breed: 312px;

	/* Van de rechterrand van de container tot de rand van het scherm. */
	--tot-rand: calc((100vw - min(100vw, calc(var(--breed) + var(--goot) * 2))) / -2 - var(--goot));

	--schaduw: 0 18px 44px rgba(14, 42, 78, .13);
	--soepel: 220ms cubic-bezier(.2, .6, .3, 1);
}

/* 3. Basis ---------------------------------------------------------------- */

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

/* Componenten met een eigen display-waarde overschrijven anders het
   hidden-attribuut. Dit houdt [hidden] betrouwbaar door de hele site. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--wit);
	color: var(--tekst);
	font-family: var(--sans);
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
	margin: 0;
	font-family: var(--serif);
	font-weight: 600;
	color: var(--inkt);
	line-height: 1.14;
	letter-spacing: -.015em;
}

p { margin: 0 0 var(--r5); }
p:last-child { margin-bottom: 0; }

a { color: var(--blauw-tekst); text-decoration: none; }
a:hover { text-decoration: underline; }

img, svg, video { max-width: 100%; height: auto; display: block; }
/* Inline-iconen krijgen altijd een maat mee; dit vangt af waar dat vergeten is. */
a > svg:not([width]), p > svg:not([width]) { width: 1em; height: 1em; display: inline-block; }

button { font: inherit; color: inherit; }

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

/* 4. Bouwstenen ----------------------------------------------------------- */

.st-omhulsel {
	width: 100%;
	max-width: calc(var(--breed) + var(--goot) * 2);
	margin-inline: auto;
	padding-inline: var(--goot);
}

/* Klein kapitaal label boven een kop */
.st-label {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--blauw-tekst);
}

/* Knoppen */
.st-knop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--r2);
	padding: 15px 26px;
	border: 1px solid transparent;
	border-radius: 2px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--soepel), color var(--soepel), border-color var(--soepel);
}
.st-knop:hover { text-decoration: none; }

.st-knop svg { width: 15px; height: 15px; flex-shrink: 0; }

.st-knop--vol {
	background: var(--blauw-tekst);
	border-color: var(--blauw-tekst);
	color: var(--wit);
}
.st-knop--vol:hover { background: #005E9E; border-color: #005E9E; }

/* Tweede knop in het ontwerp: witte vulling, blauwe rand, blauwe tekst */
.st-knop--lijn {
	background: var(--wit);
	border-color: #B8DCF2;
	color: var(--blauw-tekst);
}
.st-knop--lijn:hover { border-color: var(--blauw-tekst); background: var(--blauw-waas); }

/* Alleen zichtbaar voor schermlezers */
.st-verborgen {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.st-overslaan {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	background: var(--blauw-diep);
	color: var(--wit);
	padding: var(--r3) var(--r5);
}
.st-overslaan:focus { left: 0; }

/* 5. Header -------------------------------------------------------------- */

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

.st-kop__rij {
	display: flex;
	align-items: center;
	gap: var(--r6);
	min-height: var(--kop-hoogte);
}

.st-logo { display: block; flex-shrink: 0; margin-right: auto; }
.st-logo img { width: 192px; height: auto; }

.st-nav { display: flex; align-items: center; gap: 30px; }
.st-nav a {
	position: relative;
	padding: 5px 0;
	font-size: 14.5px;
	font-weight: 500;
	color: var(--blauw-diep);
	text-decoration: none;
	white-space: nowrap;
}
.st-nav a::after {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: -1px;
	height: 2px;
	background: var(--blauw);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--soepel);
}
.st-nav a:hover { text-decoration: none; }
.st-nav a:hover::after,
.st-nav a[aria-current='page']::after { transform: scaleX(1); }

.st-kop__acties { display: flex; align-items: center; gap: var(--r5); flex-shrink: 0; }

.st-kop__tel {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 14.5px;
	font-weight: 500;
	color: var(--blauw-diep);
	text-decoration: none;
	white-space: nowrap;
}
.st-kop__tel:hover { color: var(--blauw-tekst); text-decoration: none; }
.st-kop__tel svg { width: 16px; height: 16px; color: var(--blauw-tekst); flex-shrink: 0; }

.st-kop__cta { padding: 12px 20px; font-size: 11px; }

/* Hamburger */
.st-burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px; height: 44px;
	padding: 0; background: none; border: 0; cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.st-burger span {
	display: block; width: 24px; height: 2px;
	margin-inline: auto;
	background: var(--blauw-diep);
	transition: transform var(--soepel), opacity var(--soepel);
}
.st-burger[aria-expanded='true'] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.st-burger[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.st-burger[aria-expanded='true'] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobiel menu — [hidden] blijft leidend, vandaar :not([hidden]) */
.st-mobiel { display: none; }
.st-mobiel:not([hidden]) {
	display: block;
	border-top: 1px solid var(--lijn-zacht);
	background: var(--wit);
	padding: var(--r3) var(--goot) var(--r6);
}
/* Alleen echte menulinks; de knop en het telefoonnummer houden hun eigen
   opmaak, anders wint deze regel het van .st-knop. */
.st-mobiel a:not(.st-knop):not(.st-kop__tel) {
	display: block;
	padding: 14px 0;
	border-bottom: 1px solid var(--lijn-zacht);
	font-size: 17px;
	color: var(--blauw-diep);
	text-decoration: none;
}
.st-mobiel .st-kop__tel {
	display: flex;
	padding: 18px 0 6px;
	font-size: 18px;
	font-weight: 600;
}
.st-mobiel .st-knop {
	display: flex;
	width: 100%;
	margin-top: var(--r4);
	padding: 16px 20px;
	font-size: 12.5px;
}

@media (max-width: 1180px) { .st-nav { gap: 22px; } .st-kop__rij { gap: var(--r5); } }
@media (max-width: 1020px) {
	:root { --kop-hoogte: 68px; }
	.st-nav, .st-kop__tel { display: none; }
	.st-burger { display: flex; }
	.st-logo img { width: 152px; }
}
@media (max-width: 520px) { .st-kop__cta { display: none; } }

/* 6. Hero ----------------------------------------------------------------- */

.st-hero { position: relative; background: var(--wit); overflow: hidden; }

/* Tekst en beeld zijn kolommen van hetzelfde raster. Daardoor kan het beeld
   nooit onder de tekst schuiven, hoe breed het scherm ook is — dat gebeurde wel
   toen het beeld op een percentage van het vénster stond. */
.st-hero__raster {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
	gap: 56px;
	align-items: center;
	min-height: var(--hero-hoogte);
}

.st-hero__tekst { max-width: 505px; padding: var(--r7) 0; }
.st-hero__label { margin-bottom: 18px; }

.st-hero h1 {
	font-size: clamp(32px, 3.9vw, 56px);
	line-height: 1.06;
	letter-spacing: -.018em;
	color: var(--blauw-diep);
	margin-bottom: 22px;
}
.st-hero h1 em {
	display: block;
	font-style: italic;
	font-weight: 400;
	color: var(--blauw-tekst);
}

.st-hero__lead {
	font-size: 17px;
	line-height: 1.72;
	color: var(--tekst);
	margin-bottom: 32px;
	max-width: 412px;
}

.st-hero__knoppen { display: flex; flex-wrap: wrap; gap: 14px; }

/* Het beeld loopt door tot de schermrand en lost links zacht op in het wit. */
.st-hero__beeld {
	position: relative;
	align-self: stretch;
	min-height: var(--hero-hoogte);
	margin-right: var(--tot-rand);
}
.st-hero__beeld img {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 9%);
	mask-image: linear-gradient(to right, transparent 0%, #000 9%);
}

/* Zwevende kaart rechtsonder over het beeld */
.st-hero__kaart {
	position: absolute;
	right: 0; bottom: 34px;
	z-index: 3;
	width: var(--kaart-breed);
	background: var(--wit);
	border-radius: 3px;
	box-shadow: var(--schaduw);
	padding: 24px 26px 26px;
}
.st-hero__kaart-kop { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.st-hero__kaart-ico {
	display: grid; place-items: center;
	width: 36px; height: 36px; flex-shrink: 0;
	background: var(--blauw-waas);
	border-radius: 3px;
	color: var(--blauw-tekst);
}
.st-hero__kaart-ico svg { width: 19px; height: 19px; }
.st-hero__kaart b {
	font-family: var(--serif);
	font-size: 19px;
	font-weight: 600;
	color: var(--blauw-tekst);
}
.st-hero__kaart p { font-size: 14px; line-height: 1.6; color: var(--tekst); margin-bottom: 16px; }
.st-hero__kaart > a {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 13.5px; font-weight: 600; color: var(--blauw-tekst);
}
.st-hero__kaart > a svg { width: 15px; height: 15px; }

.st-hero__wacht {
	position: absolute; inset: 0;
	display: grid; place-content: center; gap: var(--r2);
	text-align: center; padding: var(--r6);
	background: linear-gradient(150deg, var(--blauw-waas), #D6EDF8);
	color: var(--blauw-tekst); font-size: 14px;
}

@media (max-width: 1180px) {
	:root { --kaart-breed: 288px; }
	.st-hero__raster { gap: 40px; }
	.st-hero__tekst { max-width: 440px; }
}
@media (max-width: 900px) {
	.st-hero { overflow: visible; }
	.st-hero__raster {
		grid-template-columns: 1fr;
		gap: 0;
		min-height: 0;
	}
	.st-hero__tekst { order: 1; max-width: none; padding: var(--r7) 0 var(--r6); }
	.st-hero__lead { max-width: none; }
	.st-hero__knoppen .st-knop { flex: 1 1 auto; }
	.st-hero__beeld {
		order: 2;
		min-height: 0;
		height: 280px;
		margin-inline: calc(var(--goot) * -1);
	}
	.st-hero__beeld img { -webkit-mask-image: none; mask-image: none; }
	.st-hero__kaart {
		order: 3;
		position: relative;
		right: auto; bottom: auto;
		width: auto;
		margin: -44px 0 var(--r7);
	}
}
@media (max-width: 520px) {
	.st-hero h1 { font-size: 32px; }
	.st-hero__beeld { height: 226px; }
}

/* 7. USP-balk ------------------------------------------------------------- */

.st-usp { background: var(--wit); border-bottom: 1px solid var(--lijn-zacht); }

.st-usp__rij {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	min-height: 101px;
	align-items: center;
}

.st-usp__item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 20px 30px 20px 0;
}
.st-usp__item + .st-usp__item { padding-left: 30px; }
.st-usp__item + .st-usp__item::before {
	content: '';
	position: absolute;
	left: 0; top: 50%;
	transform: translateY(-50%);
	width: 1px; height: 42px;
	background: var(--lijn);
}
.st-usp__item svg { width: 27px; height: 27px; flex-shrink: 0; color: var(--blauw-tekst); }
.st-usp__item span {
	font-size: 14px;
	line-height: 1.45;
	color: var(--blauw-diep);
}

@media (max-width: 1020px) {
	.st-usp__rij { grid-template-columns: repeat(2, 1fr); min-height: 0; }
	.st-usp__item { padding: 20px 20px 20px 0; }
	.st-usp__item:nth-child(odd) + .st-usp__item { padding-left: 24px; }
	.st-usp__item:nth-child(3)::before,
	.st-usp__item:nth-child(3)::after { display: none; }
	.st-usp__item:nth-child(3) { padding-left: 0; }
	.st-usp__item:nth-child(n+3) { border-top: 1px solid var(--lijn-zacht); }
}
@media (max-width: 560px) {
	.st-usp__rij { grid-template-columns: 1fr; }
	.st-usp__item { padding: 16px 0 !important; }
	.st-usp__item::before { display: none !important; }
	.st-usp__item + .st-usp__item { border-top: 1px solid var(--lijn-zacht); }
}

/* 8. Sectiebasis --------------------------------------------------------- */

.st-sectie { padding: 88px 0; }
.st-sectie--vlak { background: var(--vlak); }
.st-sectie--smal { padding: 64px 0; }

/* Kopblok: label, titel en eventueel een link rechts op dezelfde regel */
.st-kopblok {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--r6);
	margin-bottom: 44px;
}
.st-kopblok h2 {
	font-size: clamp(26px, 2.4vw, 34px);
	line-height: 1.22;
	color: var(--blauw-diep);
	margin-top: 14px;
	max-width: 27ch;
}
.st-meer {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	flex-shrink: 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--blauw-tekst);
	padding-bottom: 6px;
}
.st-meer svg { width: 16px; height: 16px; transition: transform var(--soepel); }
.st-meer:hover { text-decoration: none; }
.st-meer:hover svg { transform: translateX(4px); }

@media (max-width: 760px) {
	.st-sectie { padding: 60px 0; }
	.st-kopblok { display: block; margin-bottom: 32px; }
	.st-meer { margin-top: 18px; }
}

/* 9. Diensten ------------------------------------------------------------ */

.st-diensten {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.st-dienst {
	display: flex;
	gap: 18px;
	padding: 28px 26px;
	background: var(--wit);
	border: 1px solid var(--lijn);
	border-radius: 3px;
	transition: border-color var(--soepel), box-shadow var(--soepel);
}
.st-dienst:hover { border-color: #BFDFF2; box-shadow: 0 10px 28px rgba(14, 42, 78, .07); }
.st-dienst__ico { flex-shrink: 0; color: var(--blauw-tekst); }
.st-dienst__ico svg { width: 34px; height: 34px; }
.st-dienst h3 {
	font-size: 17px;
	line-height: 1.3;
	color: var(--blauw-diep);
	margin-bottom: 7px;
}
.st-dienst p {
	font-size: 14px;
	line-height: 1.6;
	color: var(--tekst);
	margin-bottom: 14px;
}
.st-dienst a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--blauw-tekst);
}
.st-dienst a svg { width: 14px; height: 14px; transition: transform var(--soepel); }
.st-dienst a:hover { text-decoration: none; }
.st-dienst a:hover svg { transform: translateX(3px); }

@media (max-width: 1020px) { .st-diensten { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .st-diensten { grid-template-columns: 1fr; } }

/* 10. Team --------------------------------------------------------------- */

.st-team__raster {
	display: grid;
	grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
	gap: 56px;
	align-items: start;
}
.st-team__intro h2 {
	font-size: clamp(26px, 2.4vw, 34px);
	line-height: 1.22;
	color: var(--blauw-diep);
	margin: 14px 0 16px;
}
.st-team__intro p { font-size: 15px; line-height: 1.7; margin-bottom: 20px; }

.st-team__lijst {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}
.st-lid {
	background: var(--wit);
	border: 1px solid var(--lijn);
	border-radius: 3px;
	overflow: hidden;
	text-align: center;
}
/* Monogram in plaats van een foto: eerlijker dan een willekeurige stockfoto */
.st-lid__beeld {
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 5;
	background: linear-gradient(155deg, #17517A, var(--blauw-diep));
	overflow: hidden;
}
.st-lid__beeld picture { display: contents; }
.st-lid__beeld img {
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: center top;
	/* De bronbeelden zijn deels kleur, deels grijs; dit trekt de set gelijk. */
	filter: grayscale(100%) contrast(1.03);
	transition: transform var(--soepel);
}
.st-lid:hover .st-lid__beeld img { transform: scale(1.03); }
.st-lid__mono {
	font-family: var(--serif);
	font-size: 36px;
	font-weight: 600;
	letter-spacing: .08em;
	color: var(--wit);
}
.st-lid__naam { padding: 16px 12px 18px; }
.st-lid__naam b {
	display: block;
	font-family: var(--serif);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--blauw-diep);
	margin-bottom: 5px;
}
.st-lid__naam span { display: block; font-size: 12.5px; line-height: 1.4; color: var(--gedempt); }

@media (max-width: 1020px) {
	.st-team__raster { grid-template-columns: 1fr; gap: 32px; }
	.st-team__intro h2 { max-width: 20ch; }
}
@media (max-width: 640px) { .st-team__lijst { grid-template-columns: repeat(2, 1fr); } }

/* 11. Proces ------------------------------------------------------------- */

.st-proces__raster {
	display: grid;
	grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
	gap: 56px;
	align-items: start;
}
.st-proces__intro h2 {
	font-size: clamp(26px, 2.4vw, 34px);
	line-height: 1.22;
	color: var(--blauw-diep);
	margin-top: 14px;
}
.st-stappen {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 26px;
}
.st-stap { position: relative; }
.st-stap__nr {
	display: grid;
	place-items: center;
	width: 34px; height: 34px;
	border-radius: 50%;
	background: var(--blauw-tekst);
	color: var(--wit);
	font-size: 14px;
	font-weight: 700;
	margin-bottom: 18px;
}
/* Verbindingslijn met pijl tussen de stappen */
.st-stap:not(:last-child)::after {
	content: '';
	position: absolute;
	top: 17px;
	left: 46px; right: -26px;
	height: 1px;
	background: var(--lijn);
}
.st-stap__ico { display: block; color: var(--blauw-tekst); margin-bottom: 13px; }
.st-stap__ico svg { width: 24px; height: 24px; }
.st-stap h3 { font-size: 16px; color: var(--blauw-diep); margin-bottom: 8px; }
.st-stap p { font-size: 13.5px; line-height: 1.6; color: var(--tekst); }

@media (max-width: 1020px) {
	.st-proces__raster { grid-template-columns: 1fr; gap: 32px; }
	.st-stappen { grid-template-columns: repeat(2, 1fr); gap: 30px; }
	.st-stap:not(:last-child)::after { display: none; }
}
@media (max-width: 520px) { .st-stappen { grid-template-columns: 1fr; } }

/* 12. Waarom ------------------------------------------------------------ */

.st-waarom__raster {
	display: grid;
	grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
	gap: 64px;
	align-items: start;
}
.st-waarom__intro h2 {
	font-size: clamp(26px, 2.4vw, 34px);
	line-height: 1.22;
	color: var(--blauw-diep);
	margin: 14px 0 16px;
}
.st-waarom__intro p { font-size: 15px; line-height: 1.7; }

.st-waarom__lijst {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 26px 40px;
}
.st-waarom__item { display: flex; gap: 18px; }
/* Zacht gevuld rondje leest rustiger dan een wit vlakje met een randje. */
.st-waarom__ico {
	display: grid;
	place-items: center;
	width: 52px; height: 52px;
	flex-shrink: 0;
	background: var(--blauw-waas);
	border-radius: 50%;
	color: var(--blauw-tekst);
	transition: background var(--soepel);
}
.st-waarom__ico svg { width: 24px; height: 24px; stroke-width: 1.5; }
.st-waarom__item:hover .st-waarom__ico { background: #DCEDF9; }
.st-waarom__item b {
	display: block;
	font-family: var(--serif);
	font-size: 17px;
	font-weight: 600;
	color: var(--blauw-diep);
	margin-bottom: 5px;
}
.st-waarom__item p { font-size: 14px; line-height: 1.6; color: var(--tekst); margin: 0; }

@media (max-width: 1020px) {
	.st-waarom__raster { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 640px) {
	.st-waarom__lijst { grid-template-columns: 1fr; gap: 22px; }
}

/* 13. Kennisbank --------------------------------------------------------- */

.st-kennis {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.st-artikel {
	display: flex;
	flex-direction: column;
	background: var(--wit);
	border: 1px solid var(--lijn);
	border-radius: 3px;
	overflow: hidden;
	transition: border-color var(--soepel), box-shadow var(--soepel);
}
.st-artikel:hover { border-color: #BFDFF2; box-shadow: 0 10px 28px rgba(14, 42, 78, .07); }
.st-artikel__beeld {
	aspect-ratio: 16 / 10;
	background: linear-gradient(160deg, #EFF5F9, #DFEAF1);
	display: grid;
	place-items: center;
	color: var(--blauw-diep);
}
.st-artikel__beeld img { width: 100%; height: 100%; object-fit: cover; }
.st-artikel__beeld svg { width: 36px; height: 36px; opacity: .22; }
.st-artikel__body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.st-artikel time { font-size: 12.5px; color: var(--gedempt); margin-bottom: 9px; }
.st-artikel h3 {
	font-size: 17px;
	line-height: 1.35;
	color: var(--blauw-diep);
	margin-bottom: 16px;
}
.st-artikel a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: auto;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--blauw-tekst);
}
.st-artikel a svg { width: 14px; height: 14px; transition: transform var(--soepel); }
.st-artikel a:hover { text-decoration: none; }
.st-artikel a:hover svg { transform: translateX(3px); }

@media (max-width: 1020px) { .st-kennis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .st-kennis { grid-template-columns: 1fr; } }

/* 14. Afsluitende oproep ------------------------------------------------- */

.st-oproep { border-top: 1px solid var(--lijn-zacht); background: var(--wit); }
.st-oproep__rij {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--r6);
	padding-block: 34px;
}
.st-oproep h2 {
	font-size: clamp(21px, 1.9vw, 26px);
	line-height: 1.3;
	color: var(--blauw-diep);
	margin-bottom: 5px;
}
.st-oproep p { font-size: 14.5px; margin: 0; }
.st-oproep__acties { display: flex; align-items: center; gap: 26px; flex-shrink: 0; }
.st-oproep__tel {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 19px;
	font-weight: 600;
	color: var(--blauw-tekst);
	white-space: nowrap;
}
.st-oproep__tel svg { width: 19px; height: 19px; }

@media (max-width: 900px) {
	.st-oproep__rij { display: block; padding-block: 40px; }
	.st-oproep__acties { margin-top: 22px; flex-wrap: wrap; gap: 18px; }
}

/* 15. Footer ------------------------------------------------------------- */

.st-voet { background: var(--grijs-voet); color: rgba(255, 255, 255, .82); }
.st-voet a { color: rgba(255, 255, 255, .82); }
.st-voet a:hover { color: var(--wit); text-decoration: none; }

.st-voet__boven {
	display: grid;
	grid-template-columns: minmax(0, 250px) repeat(4, minmax(0, 1fr));
	gap: 40px;
	padding: 58px 0 46px;
}
.st-voet__merk img { width: 168px; height: auto; margin-bottom: 18px; }
.st-voet__merk p { font-size: 14px; line-height: 1.65; margin: 0; }

.st-voet__kolom b {
	display: block;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--wit);
	margin-bottom: 15px;
}
.st-voet__kolom ul { list-style: none; margin: 0; padding: 0; }
.st-voet__kolom li { margin-bottom: 9px; font-size: 14px; }

.st-voet__contact li {
	display: flex;
	gap: 11px;
	margin-bottom: 13px;
	font-size: 14px;
	line-height: 1.55;
}
.st-voet__contact svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 3px; opacity: .85; }

.st-voet__onder {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--r4);
	padding: 20px 0 26px;
	border-top: 1px solid rgba(255, 255, 255, .17);
	font-size: 13px;
}
.st-voet__onder nav { display: flex; flex-wrap: wrap; gap: 22px; }

@media (max-width: 1020px) {
	.st-voet__boven { grid-template-columns: repeat(2, 1fr); gap: 32px; padding: 46px 0 36px; }
	.st-voet__merk { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
	.st-voet__boven { grid-template-columns: 1fr; }
	.st-voet__onder { display: block; }
	.st-voet__onder nav { margin-top: 12px; gap: 16px; }
}

/* 16. Uitklapmenu -------------------------------------------------------- */

.st-nav__groep { position: relative; display: flex; align-items: center; }
.st-nav__groep > a { display: inline-flex; align-items: center; gap: 6px; }
.st-nav__groep > a svg { width: 13px; height: 13px; opacity: .55; transition: transform var(--soepel); }

.st-nav__paneel {
	position: absolute;
	top: calc(100% + 14px);
	left: -20px;
	min-width: 268px;
	padding: 9px 0;
	background: var(--wit);
	border: 1px solid var(--lijn);
	border-radius: 3px;
	box-shadow: 0 18px 40px rgba(14, 42, 78, .13);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-7px);
	transition: opacity var(--soepel), transform var(--soepel), visibility var(--soepel);
}
/* Het paneel opent ook zodra de hoofdlink zelf toetsenbordfocus krijgt,
   waarna tabben verder gaat in de lijst. Daarom is er geen script nodig. */
.st-nav__groep:hover .st-nav__paneel,
.st-nav__groep:focus-within .st-nav__paneel {
	opacity: 1;
	visibility: visible;
	transform: none;
}
.st-nav__groep:hover > a svg,
.st-nav__groep:focus-within > a svg { transform: rotate(180deg); }

.st-nav__paneel a {
	display: block;
	padding: 9px 20px;
	font-size: 14.5px;
	font-weight: 400;
	color: var(--blauw-diep);
	white-space: nowrap;
}
.st-nav__paneel a::after { display: none; }
.st-nav__paneel a:hover { background: var(--blauw-waas); color: var(--blauw-tekst); }

/* Groepskoppen in het mobiele menu */
.st-mobiel b {
	display: block;
	margin: 22px 0 4px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--blauw-tekst);
}
.st-mobiel b:first-child { margin-top: 4px; }
.st-mobiel .st-mobiel__sub { padding-left: 14px; font-size: 15.5px; color: var(--tekst); }

/* 17. Paginakop (onderliggende pagina's) --------------------------------- */

.st-paginakop {
	position: relative;
	background: var(--vlak);
	border-bottom: 1px solid var(--lijn-zacht);
	overflow: hidden;
}
.st-paginakop__raster {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr);
	gap: 56px;
	align-items: center;
	min-height: 316px;
}
.st-paginakop__tekst { padding: 40px 0 44px; }

.st-kruimels {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 9px;
	margin-bottom: 22px;
	font-size: 13px;
	color: var(--gedempt);
}
.st-kruimels a { color: var(--gedempt); }
.st-kruimels a:hover { color: var(--blauw-tekst); }
.st-kruimels svg { width: 13px; height: 13px; opacity: .5; }
.st-kruimels [aria-current] { color: var(--blauw-diep); }

.st-paginakop h1 {
	font-size: clamp(30px, 3vw, 42px);
	line-height: 1.1;
	color: var(--blauw-diep);
	margin: 12px 0 16px;
}
.st-paginakop__lead {
	max-width: 54ch;
	font-size: 17px;
	line-height: 1.65;
	color: var(--tekst);
	margin: 0;
}

/* Beeldvlak: loopt door tot de schermrand, met dezelfde zachte vervaging
   als de hero op de homepage zodat de pagina's één familie vormen. */
.st-paginakop__beeld {
	position: relative;
	align-self: stretch;
	min-height: 316px;
	margin-right: var(--tot-rand);
}
.st-paginakop__beeld--kantoor img { object-position: 46% 68%; }

.st-paginakop__beeld img {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	/* Paginabeelden zijn al op de bandverhouding bijgesneden, dus midden is goed.
	   Alleen de kantoorfoto valt terug op een eigen uitsnede. */
	object-position: center;
	-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 11%);
	mask-image: linear-gradient(to right, transparent 0%, #000 11%);
}
/* Zonder eigen paginafoto: een rustig merkvlak met het beeldmerk. */
.st-paginakop__vlak {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background: linear-gradient(135deg, #E7F3FB 0%, #D3E8F6 55%, #C6E1F3 100%);
	-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 11%);
	mask-image: linear-gradient(to right, transparent 0%, #000 11%);
}
.st-paginakop__vlak img { position: static; width: 168px; height: auto; opacity: .5; mask-image: none; -webkit-mask-image: none; }

@media (max-width: 900px) {
	.st-paginakop { overflow: visible; }
	.st-paginakop__raster {
		grid-template-columns: 1fr;
		gap: 0;
		min-height: 0;
	}
	.st-paginakop__tekst { padding: 28px 0 32px; order: 1; }
	.st-paginakop__beeld {
		order: 2;
		min-height: 0;
		height: 190px;
		margin-inline: calc(var(--goot) * -1);
	}
	.st-paginakop__beeld img,
	.st-paginakop__vlak { -webkit-mask-image: none; mask-image: none; }
	.st-paginakop__lead { max-width: none; font-size: 16.5px; }
}

/* 18. Inhoudskolom met zijkaart ------------------------------------------ */

.st-inhoud__raster {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 344px);
	gap: 64px;
	align-items: start;
}

.st-prose { max-width: 68ch; }
.st-prose h2 {
	font-size: clamp(23px, 2vw, 28px);
	line-height: 1.28;
	color: var(--blauw-diep);
	margin: 44px 0 16px;
}
.st-prose h2:first-child { margin-top: 0; }
.st-prose h3 {
	font-size: 19px;
	color: var(--blauw-diep);
	margin: 32px 0 10px;
}
.st-prose p { font-size: 16.5px; line-height: 1.75; margin-bottom: 20px; }
.st-prose > *:last-child { margin-bottom: 0; }

/* Uitgelicht kader voor een waarschuwing of voorwaarde */
.st-kader {
	display: flex;
	gap: 18px;
	margin: 32px 0;
	padding: 24px 26px;
	background: var(--blauw-waas);
	border-left: 3px solid var(--blauw);
	border-radius: 0 3px 3px 0;
}
.st-kader svg { width: 24px; height: 24px; flex-shrink: 0; color: var(--blauw-tekst); margin-top: 2px; }
.st-kader b {
	display: block;
	font-family: var(--serif);
	font-size: 17px;
	font-weight: 600;
	color: var(--blauw-diep);
	margin-bottom: 6px;
}
.st-kader p { font-size: 15px; line-height: 1.65; margin: 0; }

/* Opsomming als kaartjes, in plaats van een lange lap tekst */
.st-punten {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
	margin: 26px 0 8px;
	padding: 0;
	list-style: none;
}
.st-punten li {
	display: flex;
	gap: 13px;
	padding: 18px 20px;
	background: var(--wit);
	border: 1px solid var(--lijn);
	border-radius: 3px;
}
.st-punten svg { width: 19px; height: 19px; flex-shrink: 0; color: var(--blauw-tekst); margin-top: 3px; }
.st-punten b {
	display: block;
	font-size: 15.5px;
	font-weight: 600;
	color: var(--blauw-diep);
	margin-bottom: 3px;
}
.st-punten span { font-size: 14px; line-height: 1.55; color: var(--tekst); }

/* Zijkaart die meeloopt tijdens het scrollen */
.st-zijkaart {
	position: sticky;
	top: calc(var(--kop-hoogte) + 28px);
	background: var(--wit);
	border: 1px solid var(--lijn);
	border-radius: 3px;
	box-shadow: 0 12px 34px rgba(14, 42, 78, .07);
	padding: 28px 28px 30px;
}
.st-zijkaart h2 {
	font-size: 20px;
	line-height: 1.3;
	color: var(--blauw-diep);
	margin-bottom: 10px;
}
.st-zijkaart p { font-size: 14.5px; line-height: 1.6; margin-bottom: 20px; }
.st-zijkaart .st-knop { width: 100%; }
.st-zijkaart__scheiding {
	margin: 24px 0 20px;
	border: 0;
	border-top: 1px solid var(--lijn-zacht);
}
.st-zijkaart__tel {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 18px;
	font-weight: 600;
	color: var(--blauw-tekst);
}
.st-zijkaart__tel svg { width: 18px; height: 18px; }
.st-zijkaart__tijden { font-size: 13.5px; color: var(--gedempt); margin: 8px 0 0; }
.st-zijkaart__offerte {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 18px;
	font-size: 14px;
	font-weight: 600;
}
.st-zijkaart__offerte svg { width: 14px; height: 14px; flex-shrink: 0; transition: transform var(--soepel); }
.st-zijkaart__offerte:hover { text-decoration: none; }
.st-zijkaart__offerte:hover svg { transform: translateX(3px); }

@media (max-width: 1020px) {
	.st-inhoud__raster { grid-template-columns: 1fr; gap: 40px; }
	.st-zijkaart { position: static; }
	.st-prose { max-width: none; }
}
@media (max-width: 640px) {
	.st-punten { grid-template-columns: 1fr; }
}

/* 19. Brede tekstpagina's en opsommingen --------------------------------- */

.st-prose--breed { max-width: 78ch; }

.st-lijst {
	margin: 0 0 22px;
	padding-left: 22px;
	list-style: none;
}
.st-lijst li {
	position: relative;
	margin-bottom: 9px;
	font-size: 16.5px;
	line-height: 1.7;
}
.st-lijst li::before {
	content: '';
	position: absolute;
	left: -20px; top: .68em;
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--blauw);
}
.st-prose--breed .st-lijst li { font-size: 16px; }

/* 20. Teamoverzicht ------------------------------------------------------ */

.st-teamlijst {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}
.st-teamlijst .st-lid__naam { padding: 18px 16px 20px; }
.st-teamlijst .st-lid__naam b { font-size: 16px; }
.st-teamlijst .st-lid__mail {
	display: inline-block;
	margin-top: 9px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--blauw-tekst);
	word-break: break-all;
}
@media (max-width: 1020px) { .st-teamlijst { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .st-teamlijst { grid-template-columns: repeat(2, 1fr); gap: 16px; } }

/* 21. Vestigingen -------------------------------------------------------- */

.st-vestigingen {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}
.st-vestiging {
	background: var(--wit);
	border: 1px solid var(--lijn);
	border-radius: 3px;
	padding: 30px 32px 32px;
}
.st-vestiging h3 {
	font-size: 20px;
	color: var(--blauw-diep);
	margin-bottom: 16px;
}
.st-vestiging ul { list-style: none; margin: 0; padding: 0; }
.st-vestiging li {
	display: flex;
	gap: 13px;
	margin-bottom: 13px;
	font-size: 15px;
	line-height: 1.6;
}
.st-vestiging li:last-child { margin-bottom: 0; }
.st-vestiging svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 3px; color: var(--blauw-tekst); }

@media (max-width: 760px) { .st-vestigingen { grid-template-columns: 1fr; } }

/* 22. Nieuwsoverzicht ---------------------------------------------------- */

.st-nieuwslijst {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
@media (max-width: 1020px) { .st-nieuwslijst { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .st-nieuwslijst { grid-template-columns: 1fr; } }

/* 23. Twee contactroutes naast elkaar ------------------------------------ */

.st-routes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 4px; }
.st-route {
	display: flex;
	gap: 18px;
	padding: 28px 30px;
	background: var(--wit);
	border: 1px solid var(--lijn);
	border-radius: 3px;
}
.st-route__ico {
	display: grid; place-items: center;
	width: 52px; height: 52px; flex-shrink: 0;
	background: var(--blauw-waas);
	border-radius: 50%;
	color: var(--blauw-tekst);
}
.st-route__ico svg { width: 23px; height: 23px; }
.st-route b {
	display: block;
	font-family: var(--serif);
	font-size: 18px;
	font-weight: 600;
	color: var(--blauw-diep);
	margin-bottom: 6px;
}
.st-route p { font-size: 14.5px; line-height: 1.6; margin-bottom: 12px; }
.st-route__actie { font-size: 17px; font-weight: 600; color: var(--blauw-tekst); }

@media (max-width: 760px) { .st-routes { grid-template-columns: 1fr; } }

/* 24. Berichten: kernblokken in de eigen opmaak trekken ------------------ */

/* De blokeditor zet om alles een .wp-block-group. Die mag geen eigen
   verticale ruimte toevoegen, maar de horizontale marges moeten met rust
   worden gelaten: .st-omhulsel centreert daarmee. */
.st-paginakop > .wp-block-group,
.st-sectie > .wp-block-group { margin-block: 0; }

.st-paginakop .wp-block-post-title {
	font-family: var(--serif);
	font-size: clamp(28px, 2.8vw, 40px);
	font-weight: 600;
	line-height: 1.14;
	letter-spacing: -.015em;
	color: var(--blauw-diep);
	margin: 12px 0 14px;
	/* 22ch was te krap voor lange samenstellingen als
	   "Aandeelhoudersovereenkomst": dat woord past er per definitie niet in.
	   WordPress breekt zulke woorden dan middenin af, wat in een kop
	   onleesbaar oogt. Ruimer, en alleen afbreken als het echt niet anders kan. */
	max-width: 27ch;
	word-break: normal;
	overflow-wrap: break-word;
	text-wrap: balance;
}
.st-bericht__datum,
.st-paginakop .wp-block-post-date {
	font-size: 13.5px;
	color: var(--gedempt);
	margin: 0;
}

/* Uitgelichte afbeelding in de kop */
.st-paginakop__beeld .wp-block-post-featured-image {
	position: absolute;
	inset: 0;
	margin: 0;
	height: 100%;
}
.st-paginakop__beeld .wp-block-post-featured-image img {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: center;
	-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 11%);
	mask-image: linear-gradient(to right, transparent 0%, #000 11%);
}

/* Inhoud van het bericht */
.st-prose .wp-block-post-content > *:first-child { margin-top: 0; }

/* 25. Nieuwsarchief met paginering --------------------------------------- */

.st-archief .st-nieuwslijst {
	list-style: none;
	margin: 0 0 56px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.st-archief .wp-block-post {
	display: flex;
	flex-direction: column;
	background: var(--wit);
	border: 1px solid var(--lijn);
	border-radius: 3px;
	overflow: hidden;
	transition: border-color var(--soepel), box-shadow var(--soepel);
}
.st-archief .wp-block-post:hover { border-color: #BFDFF2; box-shadow: 0 10px 28px rgba(14, 42, 78, .07); }

.st-archief .wp-block-post-featured-image { margin: 0; }
.st-archief .wp-block-post-featured-image img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	display: block;
}
.st-archief__body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.st-archief .wp-block-post-date { font-size: 12.5px; color: var(--gedempt); margin: 0 0 9px; }
.st-archief .wp-block-post-title {
	font-family: var(--serif);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.35;
	margin: 0 0 16px;
}
.st-archief .wp-block-post-title a { color: var(--blauw-diep); text-decoration: none; }
.st-archief .wp-block-post-title a:hover { color: var(--blauw-tekst); }
.st-archief .wp-block-read-more {
	margin-top: auto;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--blauw-tekst);
	text-decoration: none;
}
.st-archief .wp-block-read-more::after { content: ' \2192'; }
.st-archief .wp-block-read-more:hover { text-decoration: none; }

/* Paginering */
.st-paginering {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding-top: 8px;
	border-top: 1px solid var(--lijn-zacht);
}
.st-paginering .wp-block-query-pagination-numbers,
.st-paginering > a,
.st-paginering > div { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.st-paginering a,
.st-paginering .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 13px;
	border: 1px solid var(--lijn);
	border-radius: 3px;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--blauw-diep);
	text-decoration: none;
	transition: border-color var(--soepel), background var(--soepel), color var(--soepel);
}
.st-paginering a:hover { border-color: var(--blauw-tekst); color: var(--blauw-tekst); background: var(--blauw-waas); text-decoration: none; }
.st-paginering .page-numbers.current {
	background: var(--blauw-tekst);
	border-color: var(--blauw-tekst);
	color: var(--wit);
}
.st-paginering .page-numbers.dots { border-color: transparent; min-width: 24px; padding: 0; }

@media (max-width: 1020px) { .st-archief .st-nieuwslijst { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  {
	.st-archief .st-nieuwslijst { grid-template-columns: 1fr; margin-bottom: 40px; }
	.st-paginering a, .st-paginering .page-numbers { min-width: 38px; height: 38px; padding: 0 10px; font-size: 14px; }
}

/* 26. Kernklassen die WordPress zelf verwacht ---------------------------- */

/* De blokbibliotheek is niet ingeladen, dus deze standaardklasse moet hier
   staan; anders wordt de verborgen schermlezertekst zichtbaar. */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
.screen-reader-text:focus {
	position: static !important;
	width: auto; height: auto;
	margin: 0; padding: var(--r2) var(--r4);
	overflow: visible;
	clip: auto; clip-path: none;
	background: var(--blauw-diep);
	color: var(--wit);
}
.wp-block-post-featured-image a { display: block; }
.alignwide, .alignfull { max-width: none; }

/* 27. Mobiele afwerking -------------------------------------------------- */

@media (max-width: 900px) {
	/* De afsluitende oproep: telefoon en knop onder elkaar, knop op volle breedte. */
	.st-oproep__acties {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 14px;
		margin-top: 24px;
	}
	.st-oproep__tel { justify-content: flex-start; }
	.st-oproep__acties .st-knop { width: 100%; padding: 16px 20px; }
}

@media (max-width: 560px) {
	/* Processtappen: nummer naast de titel in plaats van erboven, scheelt
	   een halve schermhoogte aan lege ruimte. */
	.st-stappen { gap: 26px; }
	.st-stap {
		display: grid;
		grid-template-columns: 34px minmax(0, 1fr);
		column-gap: 14px;
		align-items: center;
	}
	.st-stap__nr { grid-column: 1; grid-row: 1; margin-bottom: 0; }
	.st-stap__ico { display: none; }
	.st-stap h3 { grid-column: 2; grid-row: 1; margin-bottom: 0; }
	.st-stap p  { grid-column: 2; grid-row: 2; margin-top: 7px; }

	/* Footerlinks ruimer aantikbaar. */
	.st-voet__kolom li { margin-bottom: 2px; }
	.st-voet__kolom li a { display: block; padding: 9px 0; }
	.st-voet__onder nav a { display: inline-block; padding: 7px 0; }

	/* Kruimelpad mag niet over twee regels breken op een smal scherm. */
	.st-kruimels { font-size: 12.5px; gap: 7px; }
}

/* 28. Taalkiezer --------------------------------------------------------- */

.st-taal { position: relative; flex-shrink: 0; }

.st-taal__knop {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 8px;
	background: none;
	border: 1px solid transparent;
	border-radius: 3px;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--blauw-diep);
	cursor: pointer;
	transition: border-color var(--soepel), background var(--soepel);
}
.st-taal__knop:hover { border-color: var(--lijn); background: var(--vlak); }
.st-taal__knop > svg:last-child { width: 12px; height: 12px; opacity: .5; transition: transform var(--soepel); }
.st-taal:hover .st-taal__knop > svg:last-child,
.st-taal:focus-within .st-taal__knop > svg:last-child { transform: rotate(180deg); }

.st-taal__paneel {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	min-width: 158px;
	padding: 7px 0;
	background: var(--wit);
	border: 1px solid var(--lijn);
	border-radius: 3px;
	box-shadow: 0 16px 36px rgba(14, 42, 78, .13);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity var(--soepel), transform var(--soepel), visibility var(--soepel);
	z-index: 70;
}
.st-taal:hover .st-taal__paneel,
.st-taal:focus-within .st-taal__paneel { opacity: 1; visibility: visible; transform: none; }

.st-taal__paneel a {
	display: flex;
	align-items: center;
	padding: 9px 18px;
	font-size: 14.5px;
	color: var(--blauw-diep);
	text-decoration: none;
	white-space: nowrap;
}
.st-taal__paneel a:hover { background: var(--blauw-waas); color: var(--blauw-tekst); text-decoration: none; }
.st-taal__paneel a[aria-current] { font-weight: 600; }

/* In het mobiele menu staan beide talen gewoon onder elkaar. */
.st-mobiel .st-taal { margin-top: var(--r5); }
.st-mobiel .st-taal__knop { display: none; }
.st-mobiel .st-taal__paneel {
	position: static;
	opacity: 1;
	visibility: visible;
	transform: none;
	min-width: 0;
	padding: 0;
	border: 0;
	border-top: 1px solid var(--lijn-zacht);
	border-radius: 0;
	box-shadow: none;
	padding-top: var(--r3);
}
.st-mobiel .st-taal__paneel a { padding: 12px 0; font-size: 16px; }

@media (max-width: 1020px) { .st-kop__acties > .st-taal { display: none; } }

/* 29. Offerteformulier --------------------------------------------------- */

.st-offerte { max-width: 760px; }

/* Meldingen */
.st-melding {
	display: flex;
	gap: 16px;
	padding: 22px 24px;
	margin-bottom: 32px;
	border-radius: 3px;
	border-left: 3px solid;
}
.st-melding svg { width: 24px; height: 24px; flex-shrink: 0; margin-top: 2px; }
.st-melding b { display: block; font-family: var(--serif); font-size: 18px; font-weight: 600; margin-bottom: 5px; }
.st-melding p { font-size: 15px; line-height: 1.6; margin: 0; }
.st-melding--goed { background: #EDF7F1; border-color: #2E8B57; color: #1E5B39; }
.st-melding--goed b { color: #1E5B39; }
.st-melding--fout { background: #FDF2F2; border-color: #C0392B; color: #8E2B21; }
.st-melding--fout b { color: #8E2B21; }

/* Spamval blijft onzichtbaar maar bestaat wel */
.st-honing { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Stappenbalk */
.st-voortgang {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
	list-style: none;
	margin: 0 0 40px;
	padding: 0;
	counter-reset: stap;
}
.st-voortgang li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-top: 14px;
	border-top: 3px solid var(--lijn);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--gedempt);
	transition: color var(--soepel), border-color var(--soepel);
}
.st-voortgang li span {
	display: grid;
	place-items: center;
	width: 26px; height: 26px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--lijn-zacht);
	font-size: 12.5px;
	color: var(--gedempt);
	transition: background var(--soepel), color var(--soepel);
}
.st-voortgang li.is-klaar { border-color: var(--blauw); color: var(--blauw-diep); }
.st-voortgang li.is-klaar span { background: var(--blauw-waas); color: var(--blauw-tekst); }
.st-voortgang li.is-nu { border-color: var(--blauw-tekst); color: var(--blauw-diep); }
.st-voortgang li.is-nu span { background: var(--blauw-tekst); color: var(--wit); }

/* Stapblokken */
.st-stapblok h2 {
	font-size: clamp(22px, 2vw, 27px);
	line-height: 1.25;
	color: var(--blauw-diep);
	margin-bottom: 10px;
}
.st-form__uitleg { font-size: 15.5px; line-height: 1.65; color: var(--tekst); margin-bottom: 28px; }
.st-form:not(.st-form--stappen) .st-stapblok + .st-stapblok { margin-top: 52px; padding-top: 44px; border-top: 1px solid var(--lijn-zacht); }

.st-stapfout {
	padding: 12px 16px;
	margin-bottom: 20px;
	background: #FDF2F2;
	border-left: 3px solid #C0392B;
	border-radius: 0 3px 3px 0;
	font-size: 14.5px;
	color: #8E2B21;
}

/* Groepen en keuzes */
.st-groep { border: 0; padding: 0; margin: 0 0 28px; }
.st-groep legend {
	padding: 0 0 12px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--blauw-tekst);
}
.st-keuzes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.st-keuzes--twee { grid-template-columns: repeat(2, 1fr); }

.st-keuze {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 13px;
	padding: 16px 18px;
	background: var(--wit);
	border: 1px solid var(--lijn);
	border-radius: 3px;
	cursor: pointer;
	transition: border-color var(--soepel), background var(--soepel), box-shadow var(--soepel);
}
.st-keuze:hover { border-color: #BFDFF2; background: #FBFDFE; }
.st-keuze input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.st-keuze__vink {
	position: relative;
	width: 21px; height: 21px;
	flex-shrink: 0;
	margin-top: 1px;
	border: 1.5px solid var(--lijn);
	border-radius: 50%;
	background: var(--wit);
	transition: border-color var(--soepel), background var(--soepel);
}
.st-keuze__vink::after {
	content: '';
	position: absolute;
	inset: 4px;
	border-radius: 50%;
	background: var(--wit);
	transform: scale(0);
	transition: transform var(--soepel);
}
.st-keuze input:checked ~ .st-keuze__vink { border-color: var(--blauw-tekst); background: var(--blauw-tekst); }
.st-keuze input:checked ~ .st-keuze__vink::after { transform: scale(1); }
.st-keuze:has(input:checked) { border-color: var(--blauw-tekst); background: var(--blauw-waas); box-shadow: inset 0 0 0 1px var(--blauw-tekst); }
.st-keuze input:focus-visible ~ .st-keuze__vink { outline: 2px solid var(--blauw); outline-offset: 3px; }

.st-keuze__tekst b { display: block; font-size: 15.5px; font-weight: 600; color: var(--blauw-diep); }
.st-keuze__tekst span { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.5; color: var(--gedempt); }

/* Invoervelden */
.st-veld { margin-bottom: 22px; }
.st-veld label {
	display: block;
	margin-bottom: 8px;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--blauw-diep);
}
.st-veld label span { font-weight: 400; color: var(--gedempt); font-size: 13px; }
.st-veld label .st-nodig { color: var(--blauw-tekst); font-size: 12px; font-weight: 600; }

.st-veld input,
.st-veld textarea {
	width: 100%;
	padding: 14px 16px;
	background: var(--wit);
	border: 1px solid var(--lijn);
	border-radius: 3px;
	/* 16px voorkomt dat iOS bij het aantikken inzoomt */
	font: inherit;
	font-size: 16px;
	color: var(--inkt);
	transition: border-color var(--soepel), box-shadow var(--soepel);
	-webkit-appearance: none;
}
.st-veld textarea { resize: vertical; min-height: 108px; line-height: 1.6; }
.st-veld input:focus,
.st-veld textarea:focus {
	outline: 0;
	border-color: var(--blauw-tekst);
	box-shadow: 0 0 0 3px rgba(0, 119, 196, .14);
}
.st-veld input::placeholder,
.st-veld textarea::placeholder { color: #9AA1A4; }
.st-veld--paar { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.st-veld--paar > div { margin: 0; }

/* Samenvatting */
.st-samenvatting {
	display: grid;
	grid-template-columns: minmax(0, 150px) minmax(0, 1fr);
	gap: 0;
	margin: 0 0 28px;
	border: 1px solid var(--lijn);
	border-radius: 3px;
	overflow: hidden;
}
.st-samenvatting dt,
.st-samenvatting dd {
	margin: 0;
	padding: 13px 18px;
	font-size: 14.5px;
	border-top: 1px solid var(--lijn-zacht);
}
.st-samenvatting dt:first-of-type,
.st-samenvatting dt:first-of-type + dd { border-top: 0; }
.st-samenvatting dt { background: var(--vlak); font-weight: 600; color: var(--blauw-diep); }
.st-samenvatting dd { color: var(--tekst); word-break: break-word; }

/* Toestemming */
.st-akkoord {
	display: flex;
	align-items: flex-start;
	gap: 13px;
	padding: 18px 20px;
	background: var(--vlak);
	border-radius: 3px;
	cursor: pointer;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--tekst);
}
.st-akkoord input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.st-akkoord .st-keuze__vink { border-radius: 3px; }
.st-akkoord input:checked ~ .st-keuze__vink { border-color: var(--blauw-tekst); background: var(--blauw-tekst); }
.st-akkoord input:checked ~ .st-keuze__vink::after {
	inset: 0;
	background: none;
	border-radius: 0;
	border-left: 2px solid #fff;
	border-bottom: 2px solid #fff;
	width: 11px; height: 6px;
	margin: 5px 0 0 4px;
	transform: rotate(-45deg) scale(1);
}
.st-akkoord input:focus-visible ~ .st-keuze__vink { outline: 2px solid var(--blauw); outline-offset: 3px; }

/* Voetregel met knoppen */
.st-form__voet {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin-top: 36px;
	padding-top: 28px;
	border-top: 1px solid var(--lijn-zacht);
}
.st-form__voet .st-knop { padding: 16px 28px; }
.st-form__gerust { flex: 1 1 100%; margin: 0; font-size: 13.5px; color: var(--gedempt); }
.st-vorige { margin-right: auto; order: -1; }

@media (max-width: 700px) {
	.st-keuzes, .st-keuzes--twee, .st-veld--paar { grid-template-columns: 1fr; }
	.st-voortgang { gap: 6px; }
	.st-voortgang li { flex-direction: column; align-items: flex-start; gap: 6px; font-size: 11.5px; padding-top: 11px; }
	.st-voortgang li span { width: 24px; height: 24px; font-size: 12px; }
	.st-samenvatting { grid-template-columns: 1fr; }
	.st-samenvatting dt { padding-bottom: 0; border-top: 1px solid var(--lijn-zacht); background: none; }
	.st-samenvatting dt + dd { border-top: 0; padding-top: 4px; }
	.st-form__voet .st-knop { flex: 1 1 auto; justify-content: center; }
	.st-vorige { order: 0; margin-right: 0; }
}
.st-waarom__lijst--drie { grid-template-columns: repeat(3, 1fr); gap: 28px; }
@media (max-width: 900px) { .st-waarom__lijst--drie { grid-template-columns: 1fr; gap: 20px; } }

/* 30. Brochures ---------------------------------------------------------- */

.st-brochures + .st-brochures { margin-top: 52px; }
.st-brochures__kop {
	display: flex;
	align-items: baseline;
	gap: 14px;
	margin-bottom: 20px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--lijn);
}
.st-brochures__kop h2 {
	font-size: clamp(20px, 1.8vw, 24px);
	line-height: 1.25;
	color: var(--blauw-diep);
	margin: 0;
}
.st-brochures__kop span { font-size: 13.5px; color: var(--gedempt); }

.st-brochures__lijst {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
}

.st-brochure {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 20px;
	background: var(--wit);
	border: 1px solid var(--lijn);
	border-radius: 3px;
	text-decoration: none;
	transition: border-color var(--soepel), box-shadow var(--soepel), background var(--soepel);
}
.st-brochure:hover {
	border-color: #BFDFF2;
	background: #FBFDFE;
	box-shadow: 0 8px 22px rgba(14, 42, 78, .06);
	text-decoration: none;
}
.st-brochure__ico {
	display: grid;
	place-items: center;
	width: 44px; height: 44px;
	flex-shrink: 0;
	background: var(--blauw-waas);
	border-radius: 3px;
	color: var(--blauw-tekst);
}
.st-brochure__ico svg { width: 21px; height: 21px; }
.st-brochure__tekst { flex: 1; min-width: 0; }
.st-brochure__tekst b {
	display: block;
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--blauw-diep);
}
.st-brochure__tekst span {
	display: block;
	margin-top: 3px;
	font-size: 12.5px;
	color: var(--gedempt);
	text-transform: uppercase;
	letter-spacing: .06em;
}
.st-brochure__pijl {
	flex-shrink: 0;
	width: 20px; height: 20px;
	color: var(--blauw-tekst);
	transition: transform var(--soepel);
}
.st-brochure:hover .st-brochure__pijl { transform: translateY(2px); }

@media (max-width: 760px) {
	.st-brochures__lijst { grid-template-columns: 1fr; }
	.st-brochures__kop { display: block; }
	.st-brochures__kop span { display: block; margin-top: 4px; }
}

/* Een groepskop zonder eigen pagina is een knop, geen link. Hij moet er wel
   precies zo uitzien als de andere menu-items. */
.st-nav__hoofd {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	position: relative;
	padding: 5px 0;
	background: none;
	border: 0;
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 500;
	color: var(--blauw-diep);
	cursor: pointer;
}
.st-nav__hoofd svg { width: 13px; height: 13px; opacity: .55; transition: transform var(--soepel); }
.st-nav__hoofd::after {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: -1px;
	height: 2px;
	background: var(--blauw);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--soepel);
}
.st-nav__groep:hover .st-nav__hoofd::after,
.st-nav__groep:focus-within .st-nav__hoofd::after { transform: scaleX(1); }
.st-nav__groep:hover .st-nav__hoofd svg,
.st-nav__groep:focus-within .st-nav__hoofd svg { transform: rotate(180deg); }

/* ==========================================================================
   Ondertekening en bronvermelding onder een blogbericht
   De nieuwe blogs worden ondertekend door de notaris die ze schreef en
   verwijzen naar de uitspraak waarop ze zijn gebaseerd. Beide horen zichtbaar
   los te staan van de lopende tekst, zonder ermee te concurreren.
   ========================================================================== */
.st-prose .st-auteur {
	margin-top: 34px;
	padding-top: 20px;
	border-top: 1px solid var(--lijn);
	font-weight: 600;
	color: var(--inkt);
	line-height: 1.5;
}
.st-prose .st-auteur span {
	display: block;
	font-weight: 400;
	font-size: 15px;
	color: var(--gedempt);
}
.st-prose .st-bron {
	margin-top: 18px;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--gedempt);
}

/* ==========================================================================
   Paginakop zonder beeld
   Op de juridische pagina's voegt een foto niets toe; daar loopt de band door
   als een enkel vlak en krijgt de tekst een normale leesbreedte in plaats van
   de smalle kolom die het tweekolomsraster overlaat.
   ========================================================================== */
.st-paginakop--kaal .st-paginakop__raster {
	grid-template-columns: 1fr;
	gap: 0;
	min-height: 0;
}
.st-paginakop--kaal .st-paginakop__tekst {
	padding: 52px 0 56px;
	max-width: 68ch;
}
@media (max-width: 860px) {
	.st-paginakop--kaal .st-paginakop__tekst { padding: 34px 0 38px; }
}

/* ==========================================================================
   Cookiekeuze
   Weigeren moet even makkelijk zijn als toestaan: beide knoppen staan naast
   elkaar, even groot, even zichtbaar. Geen overlay over de pagina — dat zou
   een cookiemuur zijn, en die mag niet.
   ========================================================================== */
.st-cc {
	position: fixed;
	left: 16px; right: 16px; bottom: 16px;
	z-index: 60;
	display: flex;
	justify-content: center;
	pointer-events: none;
}
.st-cc__vak {
	pointer-events: auto;
	width: min(680px, 100%);
	background: #fff;
	border: 1px solid var(--lijn);
	border-radius: 14px;
	box-shadow: 0 18px 50px -12px rgba(14, 42, 78, .28);
	padding: 22px 24px;
}
.st-cc__titel { font-size: 1.05rem; margin: 0 0 6px; }
.st-cc__tekst { margin: 0 0 16px; font-size: .95rem; line-height: 1.55; color: var(--tekst-zacht); }
.st-cc__tekst a { color: var(--blauw-tekst); text-decoration: underline; text-underline-offset: 2px; }

.st-cc__opties { display: grid; gap: 10px; margin: 0 0 16px; }
.st-cc__optie {
	display: flex; gap: 10px; align-items: flex-start;
	font-size: .9rem; line-height: 1.5; color: var(--tekst-zacht);
}
.st-cc__optie input { margin-top: 3px; flex: none; width: 17px; height: 17px; accent-color: var(--blauw-tekst); }
.st-cc__optie b { color: var(--navy); font-weight: 650; }

.st-cc__knoppen { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.st-cc__knoppen .st-knop { flex: 1 1 auto; justify-content: center; min-width: 170px; }
.st-cc__meer {
	background: none; border: 0; padding: 8px 4px; cursor: pointer;
	font: inherit; font-size: .9rem; color: var(--tekst-zacht);
	text-decoration: underline; text-underline-offset: 3px;
}
.st-cc__meer:hover { color: var(--navy); }

@media (max-width: 560px) {
	.st-cc { left: 10px; right: 10px; bottom: 10px; }
	.st-cc__vak { padding: 18px; }
	.st-cc__knoppen .st-knop { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: no-preference) {
	.st-cc__vak { animation: st-cc-in .32s cubic-bezier(.22,.61,.36,1); }
	@keyframes st-cc-in { from { opacity: 0; transform: translateY(12px); } }
}

/* ==========================================================================
   Sociale kanalen in de voettekst
   Wit op het donkere vlak, met een rustige omranding zodat ze niet zwaarder
   wegen dan de kolomkoppen ernaast.
   ========================================================================== */
.st-voet__social {
	display: flex;
	gap: 6px;
	margin-top: 20px;
}
.st-voet__social a {
	display: grid;
	place-items: center;
	/* Geen vlak eromheen, maar wel een ruim aanraakgebied: het icoon is 22px,
	   de knop blijft 40px. Onder de 24px wordt aantikken op een telefoon lastig. */
	width: 40px;
	height: 40px;
	margin-left: -9px;          /* icoon 22px in een knop van 40px: (40-22)/2 */
	border-radius: 8px;
	color: #fff;
	opacity: .88;
	transition: opacity .22s ease, transform .22s cubic-bezier(.22,.61,.36,1);
}
.st-voet__social a + a { margin-left: 0; }
.st-voet__social a:hover {
	opacity: 1;
	transform: translateY(-2px);
}
.st-voet__social a:focus-visible {
	opacity: 1;
	outline: 2px solid #fff;
	outline-offset: 2px;
}
.st-voet__social a > svg { width: 22px; height: 22px; }

/* ==========================================================================
   Beeld in een artikel
   De leeskolom is 68ch; een schema is vaak breder dan dat en mag daarom iets
   buiten de tekst uitlopen, zolang het binnen de container blijft. Op smalle
   schermen valt het terug op de volle breedte.
   ========================================================================== */
.st-prose .st-beeld {
	margin: 32px 0 34px;
	max-width: none;
}
.st-prose .st-beeld img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--lijn);
	border-radius: 10px;
	background: #fff;
}
.st-prose .st-beeld figcaption {
	margin-top: 12px;
	font-size: .88rem;
	line-height: 1.55;
	color: var(--tekst-zacht);
}
@media (min-width: 900px) {
	/* Iets breder dan de leesregel, gelijk verdeeld naar beide kanten. */
	.st-prose .st-beeld { width: calc(100% + 120px); margin-left: -60px; }
}