/* =========================================================================
   Johannes — Joomla 5 template voor een persoonlijke blog

   Uitgangspunt: het standpunt is de held van de pagina, niet een bannerfoto.
   Elk standpunt draagt een thema en een status (vastgesteld / in gesprek /
   nog open). Die eerlijkheid over wat nog niet vaststaat is het signatuur
   van dit ontwerp — al het andere blijft rustig.

   Geen externe fonts, geen CDN's, geen tracking.
   ========================================================================= */

:root {
	/* Kleur — drie kleuren, elk met één taak. Alle drie worden inline
	   overschreven door de templateparameters.
	     navy    = constructie (footer, knoppen, vastgestelde standpunten)
	     magenta = accent      (thema-labels, links, standpunten in gesprek)
	     violet  = signaal     (focus, datums, nog open standpunten)        */
	--jh-deep: #1c2f5e;            /* navy */
	--jh-deep-soft: #33497f;       /* navy, lichter — hover */
	--jh-accent: #b01e6e;          /* magenta */
	--jh-accent-deep: #841652;     /* magenta, donkerder — hover en tekst op licht */
	--jh-support: #6b4fa8;         /* violet */
	--jh-support-deep: #563e8a;    /* violet, donkerder — tekst op getinte vlakken */

	--jh-ink: #1e2029;             /* koel bijna-zwart */
	--jh-ink-soft: #565b69;
	--jh-paper: #fbfcfe;
	--jh-surface: #eef1f8;         /* koel lichtblauw */
	--jh-line: #dbe1ed;
	--jh-focus: #6b4fa8;

	/* Vulling binnen de vlechtring om het portret. Losse variabele zodat je
	   hem kunt omzetten naar bijvoorbeeld var(--jh-deep) zonder de foto te
	   hoeven vervangen; die heeft een doorzichtige achtergrond. */
	--jh-ring-fill: #eef1f8;

	/* Vulling van de cirkel om de herofoto. */
	--jh-hero-fill: #fbfcfe;

	/* Status van een standpunt */
	--jh-status-vast: #1c2f5e;
	--jh-status-gesprek: #b01e6e;
	--jh-status-open: #6b4fa8;

	/* Maat */
	--jh-measure: 1180px;
	--jh-gutter: clamp(1rem, 4vw, 2.5rem);
	--jh-radius: 4px;
	--jh-radius-sm: 2px;

	/* Ritme */
	--jh-space-1: 0.25rem;
	--jh-space-2: 0.5rem;
	--jh-space-3: 1rem;
	--jh-space-4: 1.5rem;
	--jh-space-5: 2.5rem;
	--jh-space-6: 4rem;
	--jh-space-7: 6rem;

	/* Type — Georgia als stevige, warme displayletter; systeem-sans voor de
	   lopende tekst. Beide zitten op elk apparaat, dus geen externe request.
	   Wil je een eigen letter: vervang deze twee regels en zet je @font-face
	   erboven met bestanden uit de mediamap. */
	--jh-font-display: Georgia, "Iowan Old Style", "Times New Roman", serif;
	--jh-font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--jh-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	--jh-leading: 1.65;

	--jh-shadow: 0 1px 2px rgb(28 47 94 / 7%), 0 10px 30px rgb(28 47 94 / 9%);
}

/* ---------- Reset ---------- */

*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	background: var(--jh-paper);
	color: var(--jh-ink);
	font-family: var(--jh-font-body);
	font-size: clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
	line-height: var(--jh-leading);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	-webkit-font-smoothing: antialiased;
}

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

a { color: var(--jh-accent-deep); text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
a:hover { text-decoration-thickness: 2px; }

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

/* ---------- Typografie ---------- */

h1, h2, h3 {
	font-family: var(--jh-font-display);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.012em;
	margin-block: var(--jh-space-5) var(--jh-space-3);
	text-wrap: balance;
}

h4, h5, h6 { font-family: var(--jh-font-body); margin-block: var(--jh-space-4) var(--jh-space-2); }

h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.1rem); margin-block-start: 0; }
h2 { font-size: clamp(1.55rem, 1.2rem + 1.5vw, 2.2rem); }
h3 { font-size: 1.4rem; }
h4 { font-size: 1.1rem; font-weight: 650; }

h5, h6 {
	font-size: 0.78rem;
	font-weight: 650;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--jh-ink-soft);
}

p, ul, ol, dl, blockquote, table, pre, figure { margin-block: 0 var(--jh-space-3); }
p { max-width: 68ch; text-wrap: pretty; }

.lead { font-size: 1.2rem; color: var(--jh-ink-soft); max-width: 60ch; }

blockquote {
	border-inline-start: 3px solid var(--jh-accent);
	padding-inline-start: var(--jh-space-4);
	font-family: var(--jh-font-display);
	font-size: 1.2rem;
	color: var(--jh-ink);
}

code, kbd, pre { font-family: var(--jh-font-mono); font-size: 0.9em; }

pre {
	background: var(--jh-surface);
	border: 1px solid var(--jh-line);
	border-radius: var(--jh-radius);
	padding: var(--jh-space-3);
	overflow-x: auto;
}

hr { border: 0; border-block-start: 1px solid var(--jh-line); margin-block: var(--jh-space-5); }

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

/* ---------- Pill ----------
   Vorm voor losstaande links: lees-verder, footer en themachips. Bewust niet
   voor de hoofdnavigatie: daar kost de extra padding zoveel breedte dat het
   menu onder de naam valt.
   Bewust NIET voor links in lopende tekst; die blijven onderstreept, anders
   valt een alinea uiteen in losse knoppen. */

.pill,
.footer__links a,
.sidebar li a {
	display: inline-block;
	padding: 0.35rem 0.9rem;
	border: 1px solid var(--jh-line);
	border-radius: 100px;
	background: var(--jh-paper);
	color: var(--jh-ink);
	font-size: 0.9rem;
	font-weight: 550;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.pill:hover,
.footer__links a:hover,
.sidebar li a:hover {
	background: var(--jh-deep);
	border-color: var(--jh-deep);
	color: #fff;
	text-decoration: none;
}

/* Eyebrow — draagt het thema, geen decoratie */
.eyebrow {
	display: inline-block;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.13em;
	color: var(--jh-accent-deep);
	margin-block-end: var(--jh-space-2);
}

/* ---------- Shell ---------- */

.shell {
	width: 100%;
	max-width: var(--jh-measure);
	margin-inline: auto;
	padding-inline: var(--jh-gutter);
}

.shell--narrow { max-width: 46rem; }

.skip-link {
	position: absolute;
	inset-block-start: -100%;
	inset-inline-start: var(--jh-space-3);
	z-index: 100;
	background: var(--jh-deep);
	color: #fff;
	padding: var(--jh-space-2) var(--jh-space-3);
	border-radius: 0 0 var(--jh-radius) var(--jh-radius);
	text-decoration: none;
}

.skip-link:focus { inset-block-start: 0; }

/* ---------- Topbar ---------- */

.topbar {
	background: var(--jh-deep);
	color: #dce5f4;
	font-size: 0.85rem;
}

.topbar a { color: #fff; }
.topbar .shell { display: flex; flex-wrap: wrap; gap: var(--jh-space-3); align-items: center; min-height: 2.4rem; }

/* Mededeling — gecentreerd balkje boven de header, voor iets tijdelijks.
   Plaats als aangepaste module op positie `topbar`; met de publicatiedatums
   van de module kun je hem vanzelf laten verschijnen en verdwijnen. */
.mededeling {
	text-align: center;
	padding-block: 0.55rem;
	font-size: 0.9rem;
	line-height: 1.5;
}

.mededeling strong { color: #f0a2c9; font-weight: 650; }

.mededeling a {
	color: #fff;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

/* Dringender variant: zelfde balk, accentkleur als achtergrond. */
.topbar:has(.mededeling--urgent) { background: var(--jh-accent); }
.topbar:has(.mededeling--urgent) .mededeling strong { color: #fff; }

/* ---------- Header ---------- */

.header {
	background: var(--jh-paper);
	border-block-end: 1px solid var(--jh-line);
}

.is-sticky .header { position: sticky; inset-block-start: 0; z-index: 50; }
.is-sticky .header.is-pinned { box-shadow: var(--jh-shadow); }

.header__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--jh-space-3); min-height: 4.75rem; }

.brand {
	display: flex; flex-direction: column; justify-content: center; gap: 1px;
	color: inherit; text-decoration: none; margin-inline-end: auto;
}

.brand__logo { max-height: 3rem; width: auto; }

/* Portret — klein en naast de naam, niet als bannerfoto.
   Eromheen een vlecht van drie onregelmatige lussen in plaats van een
   strakke ring; de SVG staat in index.php en erft de paletkleuren. */
.brand--portrait { flex-direction: row; align-items: center; gap: 0.7rem; }

.brand__ring {
	position: relative;
	display: grid;
	place-items: center;
	width: 4.4rem;
	aspect-ratio: 1;
	flex: none;
}

.brand__vlecht-vulling { fill: var(--jh-ring-fill); }

/* Het portret zit in de SVG en wordt daar geplaatst en geclipt. */

.brand__vlecht {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
	transition: rotate 0.4s ease;
}

.brand:hover .brand__vlecht { rotate: 9deg; }

.brand__names { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

.brand__wordmark {
	font-family: var(--jh-font-display);
	font-size: 1.45rem;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.brand__tagline { font-size: 0.78rem; color: var(--jh-ink-soft); letter-spacing: 0.03em; }

/* ---------- Navigatie ---------- */

.nav-toggle {
	display: none; align-items: center; gap: var(--jh-space-2);
	background: none; border: 1px solid var(--jh-line); border-radius: var(--jh-radius);
	color: inherit; font: inherit; font-size: 0.9rem; padding: 0.5rem 0.75rem; cursor: pointer;
}

.nav-toggle:hover { background: var(--jh-surface); }

.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
	display: block; width: 18px; height: 2px; background: currentColor;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; inset-inline-start: 0; }
.nav-toggle__bars::before { inset-block-start: -6px; }
.nav-toggle__bars::after { inset-block-start: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }

.nav { display: flex; align-items: center; gap: var(--jh-space-4); }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--jh-space-1); }

/* Navigatie blijft compact: pills kosten hier te veel breedte, waardoor het
   menu onder de naam terechtkomt. Het actieve item krijgt een onderstreping. */
.nav a {
	display: block;
	padding: 0.5rem 0.7rem;
	border-radius: var(--jh-radius);
	color: var(--jh-ink);
	text-decoration: none;
	font-size: 0.95rem;
	font-weight: 550;
}

.nav a:hover { background: var(--jh-surface); }

.nav .current > a, .nav .active > a {
	color: var(--jh-accent-deep);
	box-shadow: inset 0 -2px 0 var(--jh-accent);
	border-radius: var(--jh-radius) var(--jh-radius) 0 0;
}

.nav li { position: relative; }

.nav li > ul {
	position: absolute; inset-block-start: 100%; inset-inline-start: 0;
	flex-direction: column; min-width: 13rem;
	background: var(--jh-paper); border: 1px solid var(--jh-line);
	border-radius: var(--jh-radius); box-shadow: var(--jh-shadow);
	padding: var(--jh-space-1);
	opacity: 0; visibility: hidden; transform: translateY(4px);
	transition: opacity 0.15s ease, transform 0.15s ease; z-index: 20;
}

.nav li:hover > ul, .nav li:focus-within > ul { opacity: 1; visibility: visible; transform: none; }

@media (max-width: 900px) {
	.nav-toggle { display: inline-flex; }
	.nav {
		display: none; flex-basis: 100%; flex-direction: column; align-items: stretch;
		gap: var(--jh-space-3); padding-block: var(--jh-space-3);
		border-block-start: 1px solid var(--jh-line);
	}
	.nav.is-open { display: flex; }
	.nav ul { flex-direction: column; }
	.nav li > ul {
		position: static; opacity: 1; visibility: visible; transform: none;
		box-shadow: none; border: 0; border-inline-start: 2px solid var(--jh-line);
		border-radius: 0; padding-inline-start: var(--jh-space-3); margin-inline-start: var(--jh-space-3);
	}
}

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

.hero {
	background: #f0ecfa;
	background: color-mix(in srgb, var(--jh-support) 11%, var(--jh-paper));
	border-block-end: 1px solid var(--jh-line);
	padding-block: clamp(2.5rem, 8vw, 6rem);
}

.hero__statement {
	font-family: var(--jh-font-display);
	font-size: clamp(2rem, 1.2rem + 3.4vw, 3.4rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	max-width: 20ch;
	margin-block: 0 var(--jh-space-4);
	text-wrap: balance;
}

.hero__statement em { font-style: normal; color: var(--jh-accent-deep); }

.hero__lead { font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem); color: var(--jh-ink-soft); max-width: 48ch; }

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--jh-space-3); margin-block-start: var(--jh-space-4); }

/* Hero met portret — tweeluik, geen tekst over een foto heen.
   Op mobiel komt het gezicht bovenaan; in de DOM staat de tekst eerst,
   zodat schermlezers en zoekmachines met de kop beginnen. */

.hero--portret .hero__inner {
	display: grid;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	grid-template-areas: "tekst beeld";
}

.hero--portret .hero__tekst { grid-area: tekst; }
.hero--portret .hero__statement { max-width: 16ch; }

.hero__beeld {
	grid-area: beeld;
	position: relative;
	width: 100%;
	max-width: 22rem;
	margin-inline: auto;
	aspect-ratio: 1;
}

/* Cirkel in de hoofdkleur, verschoven achter de foto. Door de verschuiving
   blijft er een sikkel zichtbaar; dat geeft diepte zonder tweede vlak. */
.hero__beeld::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	translate: 0.7rem 0.7rem;
	background: var(--jh-deep);
	border-radius: 50%;
}

.hero__portret {
	position: relative;
	z-index: 1;
	width: 100%;
	aspect-ratio: 1;
	border-radius: 50%;
	object-fit: cover;
	object-position: center 15%;
	/* Eigen vulkleur: het portret is een PNG met doorzichtige achtergrond, dus
	   zonder deze kleur zou de sikkel erachter er volledig doorheen schijnen.
	   Zet hem op var(--jh-deep) voor een portret op navy. */
	background: var(--jh-hero-fill);
	box-shadow: 0 0 0 1px var(--jh-line);
}

@media (max-width: 860px) {
	.hero--portret .hero__inner {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"beeld"
			"tekst";
		justify-items: start;
	}

	.hero--portret .hero__statement { max-width: none; }
	.hero__beeld { max-width: 15rem; margin-inline: 0; }
	.hero__beeld::before { translate: 0.5rem 0.5rem; }
}

/* ---------- Over mij ---------- */
/* Bouw dit als een aangepaste module op positie main-top of banner.
   De opmaak staat in OPZET.md. */

.overmij {
	display: grid;
	gap: var(--jh-space-5);
	grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
	align-items: start;
}

.overmij__foto {
	width: 100%;
	max-width: 14rem;
	border-radius: 50%;
	aspect-ratio: 1;
	object-fit: cover;
	box-shadow: 0 0 0 1px var(--jh-line);
}

.overmij__tekst > :last-child { margin-block-end: 0; }

.overmij__naam {
	font-family: var(--jh-font-display);
	font-size: 1.25rem;
	font-style: italic;
	color: var(--jh-ink-soft);
	margin-block-start: var(--jh-space-4);
}

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


/* ---------- Seizoensdecoratie ----------
   De motieven zijn maskers, geen plaatjes. Daardoor nemen ze de kleur van het
   palet over: verandert de hoofdkleur, dan verandert de decoratie mee.
   Instelbaar per templatestijl, dus elke seizoensstijl kan zijn eigen motief
   hebben. */

.hero { position: relative; overflow: hidden; }

.hero__inner, .hero > .shell { position: relative; z-index: 1; }

/* Twee reikwijdtes. `deco-hero-*` legt het motief alleen over de hero;
   `deco-site-*` legt het over de hele pagina, achter alles, en blijft staan
   bij het scrollen. */

[class*="deco-hero-"] .hero::after,
[class*="deco-site-"]::before {
	content: "";
	pointer-events: none;
	background-color: var(--jh-deep);
	-webkit-mask-repeat: repeat-x;
	mask-repeat: repeat-x;
	-webkit-mask-size: 280px 170px;
	mask-size: 280px 170px;
}

[class*="deco-hero-"] .hero::after {
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: 0.13;
}

/* Over de hele site: vast aan het venster, achter de inhoud. Het motief
   herhaalt zich in beide richtingen en staat lager in dekking, want het loopt
   nu ook achter lopende tekst door.

   Bewust met een negatieve z-index in plaats van de inhoud omhoog te tillen.
   Alle directe kinderen van de body op position: relative zetten breekt de
   skip-link, die juist met position: absolute buiten beeld wordt gehouden. */
[class*="deco-site-"]::before {
	position: fixed;
	inset: 0;
	z-index: -1;
	opacity: 0.06;
	-webkit-mask-repeat: repeat;
	mask-repeat: repeat;
}

/* De secties met een eigen achtergrond zouden het patroon afdekken. Ze krijgen
   daarom een doorschijnende variant van hun kleur, zodat het motief doorloopt
   over de hele pagina in plaats van alleen tussen de secties. */
[class*="deco-site-"] .hero,
[class*="deco-site-"] .section--tint,
[class*="deco-site-"] .section--roze,
[class*="deco-site-"] .bottom {
	background-color: transparent;
	background-image: linear-gradient(var(--jh-vlak-tint), var(--jh-vlak-tint));
}

[class*="deco-site-"] .hero { --jh-vlak-tint: color-mix(in srgb, var(--jh-support) 11%, transparent); }
[class*="deco-site-"] .section--tint { --jh-vlak-tint: color-mix(in srgb, var(--jh-deep) 6%, transparent); }
[class*="deco-site-"] .section--roze { --jh-vlak-tint: color-mix(in srgb, var(--jh-accent) 9%, transparent); }
[class*="deco-site-"] .bottom { --jh-vlak-tint: color-mix(in srgb, var(--jh-deep) 6%, transparent); }

@media (max-width: 700px) {
	[class*="deco-hero-"] .hero::after { opacity: 0.09; }
	[class*="deco-site-"]::before { opacity: 0.05; }
}

@media (prefers-reduced-motion: reduce) {
	[class*="deco-site-"]::before { position: absolute; }
}

.deco-hero-kerst .hero::after,
.deco-site-kerst::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20280%20170%22%20width%3D%22280%22%20height%3D%22170%22%3E%3Cline%20x1%3D%2238%22%20y1%3D%220%22%20x2%3D%2238%22%20y2%3D%2252%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%2F%3E%3Crect%20x%3D%2234%22%20y%3D%2252%22%20width%3D%228%22%20height%3D%226%22%20rx%3D%222%22%20fill%3D%22black%22%2F%3E%3Ccircle%20cx%3D%2238%22%20cy%3D%2271%22%20r%3D%2213%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%223%22%2F%3E%3Cpath%20d%3D%22M30.2%2C66.45%20q7.8%2C-6.5%2015.6%2C0%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%2F%3E%3Cline%20x1%3D%2296%22%20y1%3D%220%22%20x2%3D%2296%22%20y2%3D%2286%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%2F%3E%3Crect%20x%3D%2292%22%20y%3D%2286%22%20width%3D%228%22%20height%3D%226%22%20rx%3D%222%22%20fill%3D%22black%22%2F%3E%3Ccircle%20cx%3D%2296%22%20cy%3D%22102%22%20r%3D%2210%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%223%22%2F%3E%3Cpath%20d%3D%22M90.0%2C98.5%20q6.0%2C-5.0%2012.0%2C0%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%2F%3E%3Cline%20x1%3D%22150%22%20y1%3D%220%22%20x2%3D%22150%22%20y2%3D%2240%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%2F%3E%3Crect%20x%3D%22146%22%20y%3D%2240%22%20width%3D%228%22%20height%3D%226%22%20rx%3D%222%22%20fill%3D%22black%22%2F%3E%3Ccircle%20cx%3D%22150%22%20cy%3D%2261%22%20r%3D%2215%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%223%22%2F%3E%3Cpath%20d%3D%22M141.0%2C55.75%20q9.0%2C-7.5%2018.0%2C0%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%2F%3E%3Cline%20x1%3D%22206%22%20y1%3D%220%22%20x2%3D%22206%22%20y2%3D%2272%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%2F%3E%3Crect%20x%3D%22202%22%20y%3D%2272%22%20width%3D%228%22%20height%3D%226%22%20rx%3D%222%22%20fill%3D%22black%22%2F%3E%3Ccircle%20cx%3D%22206%22%20cy%3D%2289%22%20r%3D%2211%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%223%22%2F%3E%3Cpath%20d%3D%22M199.4%2C85.15%20q6.6%2C-5.5%2013.2%2C0%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%2F%3E%3Cline%20x1%3D%22258%22%20y1%3D%220%22%20x2%3D%22258%22%20y2%3D%2258%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%2F%3E%3Crect%20x%3D%22254%22%20y%3D%2258%22%20width%3D%228%22%20height%3D%226%22%20rx%3D%222%22%20fill%3D%22black%22%2F%3E%3Ccircle%20cx%3D%22258%22%20cy%3D%2273%22%20r%3D%229%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%223%22%2F%3E%3Cpath%20d%3D%22M252.6%2C69.85%20q5.3999999999999995%2C-4.5%2010.799999999999999%2C0%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%2F%3E%3Crect%20x%3D%22237%22%20y%3D%22122%22%20width%3D%2222%22%20height%3D%2246%22%20rx%3D%223%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%223%22%2F%3E%3Cline%20x1%3D%22248%22%20y1%3D%22122%22%20x2%3D%22248%22%20y2%3D%22114%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M248%2C92%20c8%2C10%206%2C18%200%2C22%20c-6%2C-4%20-8%2C-12%200%2C-22%20z%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%223%22%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20280%20170%22%20width%3D%22280%22%20height%3D%22170%22%3E%3Cline%20x1%3D%2238%22%20y1%3D%220%22%20x2%3D%2238%22%20y2%3D%2252%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%2F%3E%3Crect%20x%3D%2234%22%20y%3D%2252%22%20width%3D%228%22%20height%3D%226%22%20rx%3D%222%22%20fill%3D%22black%22%2F%3E%3Ccircle%20cx%3D%2238%22%20cy%3D%2271%22%20r%3D%2213%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%223%22%2F%3E%3Cpath%20d%3D%22M30.2%2C66.45%20q7.8%2C-6.5%2015.6%2C0%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%2F%3E%3Cline%20x1%3D%2296%22%20y1%3D%220%22%20x2%3D%2296%22%20y2%3D%2286%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%2F%3E%3Crect%20x%3D%2292%22%20y%3D%2286%22%20width%3D%228%22%20height%3D%226%22%20rx%3D%222%22%20fill%3D%22black%22%2F%3E%3Ccircle%20cx%3D%2296%22%20cy%3D%22102%22%20r%3D%2210%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%223%22%2F%3E%3Cpath%20d%3D%22M90.0%2C98.5%20q6.0%2C-5.0%2012.0%2C0%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%2F%3E%3Cline%20x1%3D%22150%22%20y1%3D%220%22%20x2%3D%22150%22%20y2%3D%2240%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%2F%3E%3Crect%20x%3D%22146%22%20y%3D%2240%22%20width%3D%228%22%20height%3D%226%22%20rx%3D%222%22%20fill%3D%22black%22%2F%3E%3Ccircle%20cx%3D%22150%22%20cy%3D%2261%22%20r%3D%2215%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%223%22%2F%3E%3Cpath%20d%3D%22M141.0%2C55.75%20q9.0%2C-7.5%2018.0%2C0%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%2F%3E%3Cline%20x1%3D%22206%22%20y1%3D%220%22%20x2%3D%22206%22%20y2%3D%2272%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%2F%3E%3Crect%20x%3D%22202%22%20y%3D%2272%22%20width%3D%228%22%20height%3D%226%22%20rx%3D%222%22%20fill%3D%22black%22%2F%3E%3Ccircle%20cx%3D%22206%22%20cy%3D%2289%22%20r%3D%2211%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%223%22%2F%3E%3Cpath%20d%3D%22M199.4%2C85.15%20q6.6%2C-5.5%2013.2%2C0%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%2F%3E%3Cline%20x1%3D%22258%22%20y1%3D%220%22%20x2%3D%22258%22%20y2%3D%2258%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%2F%3E%3Crect%20x%3D%22254%22%20y%3D%2258%22%20width%3D%228%22%20height%3D%226%22%20rx%3D%222%22%20fill%3D%22black%22%2F%3E%3Ccircle%20cx%3D%22258%22%20cy%3D%2273%22%20r%3D%229%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%223%22%2F%3E%3Cpath%20d%3D%22M252.6%2C69.85%20q5.3999999999999995%2C-4.5%2010.799999999999999%2C0%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%2F%3E%3Crect%20x%3D%22237%22%20y%3D%22122%22%20width%3D%2222%22%20height%3D%2246%22%20rx%3D%223%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%223%22%2F%3E%3Cline%20x1%3D%22248%22%20y1%3D%22122%22%20x2%3D%22248%22%20y2%3D%22114%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M248%2C92%20c8%2C10%206%2C18%200%2C22%20c-6%2C-4%20-8%2C-12%200%2C-22%20z%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%223%22%2F%3E%3C%2Fsvg%3E");
	-webkit-mask-position: top center;
	mask-position: top center;
}

.deco-hero-valentijn .hero::after,
.deco-site-valentijn::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20280%20170%22%20width%3D%22280%22%20height%3D%22170%22%3E%3Cpath%20d%3D%22M44%2C53.5%20C24.2%2C38.2%2035.9%2C22.900000000000002%2044%2C34.6%20C52.1%2C22.900000000000002%2063.8%2C38.2%2044%2C53.5%20z%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%223%22%2F%3E%3Cpath%20d%3D%22M120%2C95.75%20C105.7%2C84.7%20114.15%2C73.65%20120%2C82.1%20C125.85%2C73.65%20134.3%2C84.7%20120%2C95.75%20z%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%223%22%2F%3E%3Cpath%20d%3D%22M196%2C50.5%20C171.8%2C31.8%20186.1%2C13.100000000000001%20196%2C27.4%20C205.9%2C13.100000000000001%20220.2%2C31.8%20196%2C50.5%20z%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%223%22%2F%3E%3Cpath%20d%3D%22M258%2C115.25%20C241.5%2C102.5%20251.25%2C89.75%20258%2C99.5%20C264.75%2C89.75%20274.5%2C102.5%20258%2C115.25%20z%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%223%22%2F%3E%3Cpath%20d%3D%22M80%2C148.25%20C67.9%2C138.9%2075.05%2C129.55%2080%2C136.7%20C84.95%2C129.55%2092.1%2C138.9%2080%2C148.25%20z%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%223%22%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20280%20170%22%20width%3D%22280%22%20height%3D%22170%22%3E%3Cpath%20d%3D%22M44%2C53.5%20C24.2%2C38.2%2035.9%2C22.900000000000002%2044%2C34.6%20C52.1%2C22.900000000000002%2063.8%2C38.2%2044%2C53.5%20z%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%223%22%2F%3E%3Cpath%20d%3D%22M120%2C95.75%20C105.7%2C84.7%20114.15%2C73.65%20120%2C82.1%20C125.85%2C73.65%20134.3%2C84.7%20120%2C95.75%20z%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%223%22%2F%3E%3Cpath%20d%3D%22M196%2C50.5%20C171.8%2C31.8%20186.1%2C13.100000000000001%20196%2C27.4%20C205.9%2C13.100000000000001%20220.2%2C31.8%20196%2C50.5%20z%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%223%22%2F%3E%3Cpath%20d%3D%22M258%2C115.25%20C241.5%2C102.5%20251.25%2C89.75%20258%2C99.5%20C264.75%2C89.75%20274.5%2C102.5%20258%2C115.25%20z%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%223%22%2F%3E%3Cpath%20d%3D%22M80%2C148.25%20C67.9%2C138.9%2075.05%2C129.55%2080%2C136.7%20C84.95%2C129.55%2092.1%2C138.9%2080%2C148.25%20z%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%223%22%2F%3E%3C%2Fsvg%3E");
	-webkit-mask-position: top center;
	mask-position: top center;
}

.deco-hero-pasen .hero::after,
.deco-site-pasen::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20280%20170%22%20width%3D%22280%22%20height%3D%22170%22%3E%3Cellipse%20cx%3D%2246%22%20cy%3D%22120%22%20rx%3D%2219%22%20ry%3D%2225%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%223%22%2F%3E%3Cpath%20d%3D%22M29.85%2C111.25%20q16.15%2C8%2032.3%2C0%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M29.85%2C120%20q16.15%2C-8%2032.3%2C0%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M29.85%2C128.75%20q16.15%2C8%2032.3%2C0%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%2F%3E%3Cellipse%20cx%3D%22112%22%20cy%3D%22132%22%20rx%3D%2215%22%20ry%3D%2220%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%223%22%2F%3E%3Cpath%20d%3D%22M99.25%2C125.0%20q12.75%2C8%2025.5%2C0%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M99.25%2C132%20q12.75%2C-8%2025.5%2C0%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M99.25%2C139.0%20q12.75%2C8%2025.5%2C0%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%2F%3E%3Cellipse%20cx%3D%22180%22%20cy%3D%22116%22%20rx%3D%2222%22%20ry%3D%2229%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%223%22%2F%3E%3Cpath%20d%3D%22M161.3%2C105.85%20q18.7%2C8%2037.4%2C0%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M161.3%2C116%20q18.7%2C-8%2037.4%2C0%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M161.3%2C126.15%20q18.7%2C8%2037.4%2C0%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%2F%3E%3Cellipse%20cx%3D%22248%22%20cy%3D%22134%22%20rx%3D%2216%22%20ry%3D%2221%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%223%22%2F%3E%3Cpath%20d%3D%22M234.4%2C126.65%20q13.6%2C8%2027.2%2C0%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M234.4%2C134%20q13.6%2C-8%2027.2%2C0%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M234.4%2C141.35%20q13.6%2C8%2027.2%2C0%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20280%20170%22%20width%3D%22280%22%20height%3D%22170%22%3E%3Cellipse%20cx%3D%2246%22%20cy%3D%22120%22%20rx%3D%2219%22%20ry%3D%2225%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%223%22%2F%3E%3Cpath%20d%3D%22M29.85%2C111.25%20q16.15%2C8%2032.3%2C0%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M29.85%2C120%20q16.15%2C-8%2032.3%2C0%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M29.85%2C128.75%20q16.15%2C8%2032.3%2C0%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%2F%3E%3Cellipse%20cx%3D%22112%22%20cy%3D%22132%22%20rx%3D%2215%22%20ry%3D%2220%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%223%22%2F%3E%3Cpath%20d%3D%22M99.25%2C125.0%20q12.75%2C8%2025.5%2C0%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M99.25%2C132%20q12.75%2C-8%2025.5%2C0%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M99.25%2C139.0%20q12.75%2C8%2025.5%2C0%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%2F%3E%3Cellipse%20cx%3D%22180%22%20cy%3D%22116%22%20rx%3D%2222%22%20ry%3D%2229%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%223%22%2F%3E%3Cpath%20d%3D%22M161.3%2C105.85%20q18.7%2C8%2037.4%2C0%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M161.3%2C116%20q18.7%2C-8%2037.4%2C0%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M161.3%2C126.15%20q18.7%2C8%2037.4%2C0%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%2F%3E%3Cellipse%20cx%3D%22248%22%20cy%3D%22134%22%20rx%3D%2216%22%20ry%3D%2221%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%223%22%2F%3E%3Cpath%20d%3D%22M234.4%2C126.65%20q13.6%2C8%2027.2%2C0%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M234.4%2C134%20q13.6%2C-8%2027.2%2C0%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M234.4%2C141.35%20q13.6%2C8%2027.2%2C0%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E");
	-webkit-mask-position: bottom center;
	mask-position: bottom center;
}

.deco-hero-oudnieuw .hero::after,
.deco-site-oudnieuw::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20280%20170%22%20width%3D%22280%22%20height%3D%22170%22%3E%3Cline%20x1%3D%2271.9%22%20y1%3D%2252.0%22%20x2%3D%2294.0%22%20y2%3D%2252.0%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2294.0%22%20cy%3D%2252.0%22%20r%3D%222.2%22%20fill%3D%22black%22%2F%3E%3Cline%20x1%3D%2270.3%22%20y1%3D%2257.9%22%20x2%3D%2289.4%22%20y2%3D%2269.0%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2289.4%22%20cy%3D%2269.0%22%20r%3D%222.2%22%20fill%3D%22black%22%2F%3E%3Cline%20x1%3D%2266.0%22%20y1%3D%2262.3%22%20x2%3D%2277.0%22%20y2%3D%2281.4%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2277.0%22%20cy%3D%2281.4%22%20r%3D%222.2%22%20fill%3D%22black%22%2F%3E%3Cline%20x1%3D%2260.0%22%20y1%3D%2263.9%22%20x2%3D%2260.0%22%20y2%3D%2286.0%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2260.0%22%20cy%3D%2286.0%22%20r%3D%222.2%22%20fill%3D%22black%22%2F%3E%3Cline%20x1%3D%2254.1%22%20y1%3D%2262.3%22%20x2%3D%2243.0%22%20y2%3D%2281.4%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2243.0%22%20cy%3D%2281.4%22%20r%3D%222.2%22%20fill%3D%22black%22%2F%3E%3Cline%20x1%3D%2249.7%22%20y1%3D%2257.9%22%20x2%3D%2230.6%22%20y2%3D%2269.0%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2230.6%22%20cy%3D%2269.0%22%20r%3D%222.2%22%20fill%3D%22black%22%2F%3E%3Cline%20x1%3D%2248.1%22%20y1%3D%2252.0%22%20x2%3D%2226.0%22%20y2%3D%2252.0%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2226.0%22%20cy%3D%2252.0%22%20r%3D%222.2%22%20fill%3D%22black%22%2F%3E%3Cline%20x1%3D%2249.7%22%20y1%3D%2246.1%22%20x2%3D%2230.6%22%20y2%3D%2235.0%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2230.6%22%20cy%3D%2235.0%22%20r%3D%222.2%22%20fill%3D%22black%22%2F%3E%3Cline%20x1%3D%2254.0%22%20y1%3D%2241.7%22%20x2%3D%2243.0%22%20y2%3D%2222.6%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2243.0%22%20cy%3D%2222.6%22%20r%3D%222.2%22%20fill%3D%22black%22%2F%3E%3Cline%20x1%3D%2260.0%22%20y1%3D%2240.1%22%20x2%3D%2260.0%22%20y2%3D%2218.0%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2260.0%22%20cy%3D%2218.0%22%20r%3D%222.2%22%20fill%3D%22black%22%2F%3E%3Cline%20x1%3D%2266.0%22%20y1%3D%2241.7%22%20x2%3D%2277.0%22%20y2%3D%2222.6%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2277.0%22%20cy%3D%2222.6%22%20r%3D%222.2%22%20fill%3D%22black%22%2F%3E%3Cline%20x1%3D%2270.3%22%20y1%3D%2246.0%22%20x2%3D%2289.4%22%20y2%3D%2235.0%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2289.4%22%20cy%3D%2235.0%22%20r%3D%222.2%22%20fill%3D%22black%22%2F%3E%3Cline%20x1%3D%22187.1%22%20y1%3D%2296.0%22%20x2%3D%22204.0%22%20y2%3D%2296.0%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%22204.0%22%20cy%3D%2296.0%22%20r%3D%222.2%22%20fill%3D%22black%22%2F%3E%3Cline%20x1%3D%22185.4%22%20y1%3D%22101.3%22%20x2%3D%22199.0%22%20y2%3D%22111.3%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%22199.0%22%20cy%3D%22111.3%22%20r%3D%222.2%22%20fill%3D%22black%22%2F%3E%3Cline%20x1%3D%22180.8%22%20y1%3D%22104.7%22%20x2%3D%22186.0%22%20y2%3D%22120.7%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%22186.0%22%20cy%3D%22120.7%22%20r%3D%222.2%22%20fill%3D%22black%22%2F%3E%3Cline%20x1%3D%22175.2%22%20y1%3D%22104.7%22%20x2%3D%22170.0%22%20y2%3D%22120.7%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%22170.0%22%20cy%3D%22120.7%22%20r%3D%222.2%22%20fill%3D%22black%22%2F%3E%3Cline%20x1%3D%22170.6%22%20y1%3D%22101.3%22%20x2%3D%22157.0%22%20y2%3D%22111.3%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%22157.0%22%20cy%3D%22111.3%22%20r%3D%222.2%22%20fill%3D%22black%22%2F%3E%3Cline%20x1%3D%22168.9%22%20y1%3D%2296.0%22%20x2%3D%22152.0%22%20y2%3D%2296.0%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%22152.0%22%20cy%3D%2296.0%22%20r%3D%222.2%22%20fill%3D%22black%22%2F%3E%3Cline%20x1%3D%22170.6%22%20y1%3D%2290.7%22%20x2%3D%22157.0%22%20y2%3D%2280.7%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%22157.0%22%20cy%3D%2280.7%22%20r%3D%222.2%22%20fill%3D%22black%22%2F%3E%3Cline%20x1%3D%22175.2%22%20y1%3D%2287.3%22%20x2%3D%22170.0%22%20y2%3D%2271.3%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%22170.0%22%20cy%3D%2271.3%22%20r%3D%222.2%22%20fill%3D%22black%22%2F%3E%3Cline%20x1%3D%22180.8%22%20y1%3D%2287.3%22%20x2%3D%22186.0%22%20y2%3D%2271.3%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%22186.0%22%20cy%3D%2271.3%22%20r%3D%222.2%22%20fill%3D%22black%22%2F%3E%3Cline%20x1%3D%22185.4%22%20y1%3D%2290.7%22%20x2%3D%22199.0%22%20y2%3D%2280.7%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%22199.0%22%20cy%3D%2280.7%22%20r%3D%222.2%22%20fill%3D%22black%22%2F%3E%3Cline%20x1%3D%22259.0%22%20y1%3D%2240.0%22%20x2%3D%22272.0%22%20y2%3D%2240.0%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%22272.0%22%20cy%3D%2240.0%22%20r%3D%222.2%22%20fill%3D%22black%22%2F%3E%3Cline%20x1%3D%22256.9%22%20y1%3D%2244.9%22%20x2%3D%22266.1%22%20y2%3D%2254.1%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%22266.1%22%20cy%3D%2254.1%22%20r%3D%222.2%22%20fill%3D%22black%22%2F%3E%3Cline%20x1%3D%22252.0%22%20y1%3D%2247.0%22%20x2%3D%22252.0%22%20y2%3D%2260.0%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%22252.0%22%20cy%3D%2260.0%22%20r%3D%222.2%22%20fill%3D%22black%22%2F%3E%3Cline%20x1%3D%22247.1%22%20y1%3D%2244.9%22%20x2%3D%22237.9%22%20y2%3D%2254.1%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%22237.9%22%20cy%3D%2254.1%22%20r%3D%222.2%22%20fill%3D%22black%22%2F%3E%3Cline%20x1%3D%22245.0%22%20y1%3D%2240.0%22%20x2%3D%22232.0%22%20y2%3D%2240.0%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%22232.0%22%20cy%3D%2240.0%22%20r%3D%222.2%22%20fill%3D%22black%22%2F%3E%3Cline%20x1%3D%22247.1%22%20y1%3D%2235.1%22%20x2%3D%22237.9%22%20y2%3D%2225.9%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%22237.9%22%20cy%3D%2225.9%22%20r%3D%222.2%22%20fill%3D%22black%22%2F%3E%3Cline%20x1%3D%22252.0%22%20y1%3D%2233.0%22%20x2%3D%22252.0%22%20y2%3D%2220.0%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%22252.0%22%20cy%3D%2220.0%22%20r%3D%222.2%22%20fill%3D%22black%22%2F%3E%3Cline%20x1%3D%22256.9%22%20y1%3D%2235.1%22%20x2%3D%22266.1%22%20y2%3D%2225.9%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%22266.1%22%20cy%3D%2225.9%22%20r%3D%222.2%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20280%20170%22%20width%3D%22280%22%20height%3D%22170%22%3E%3Cline%20x1%3D%2271.9%22%20y1%3D%2252.0%22%20x2%3D%2294.0%22%20y2%3D%2252.0%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2294.0%22%20cy%3D%2252.0%22%20r%3D%222.2%22%20fill%3D%22black%22%2F%3E%3Cline%20x1%3D%2270.3%22%20y1%3D%2257.9%22%20x2%3D%2289.4%22%20y2%3D%2269.0%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2289.4%22%20cy%3D%2269.0%22%20r%3D%222.2%22%20fill%3D%22black%22%2F%3E%3Cline%20x1%3D%2266.0%22%20y1%3D%2262.3%22%20x2%3D%2277.0%22%20y2%3D%2281.4%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2277.0%22%20cy%3D%2281.4%22%20r%3D%222.2%22%20fill%3D%22black%22%2F%3E%3Cline%20x1%3D%2260.0%22%20y1%3D%2263.9%22%20x2%3D%2260.0%22%20y2%3D%2286.0%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2260.0%22%20cy%3D%2286.0%22%20r%3D%222.2%22%20fill%3D%22black%22%2F%3E%3Cline%20x1%3D%2254.1%22%20y1%3D%2262.3%22%20x2%3D%2243.0%22%20y2%3D%2281.4%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2243.0%22%20cy%3D%2281.4%22%20r%3D%222.2%22%20fill%3D%22black%22%2F%3E%3Cline%20x1%3D%2249.7%22%20y1%3D%2257.9%22%20x2%3D%2230.6%22%20y2%3D%2269.0%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2230.6%22%20cy%3D%2269.0%22%20r%3D%222.2%22%20fill%3D%22black%22%2F%3E%3Cline%20x1%3D%2248.1%22%20y1%3D%2252.0%22%20x2%3D%2226.0%22%20y2%3D%2252.0%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2226.0%22%20cy%3D%2252.0%22%20r%3D%222.2%22%20fill%3D%22black%22%2F%3E%3Cline%20x1%3D%2249.7%22%20y1%3D%2246.1%22%20x2%3D%2230.6%22%20y2%3D%2235.0%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2230.6%22%20cy%3D%2235.0%22%20r%3D%222.2%22%20fill%3D%22black%22%2F%3E%3Cline%20x1%3D%2254.0%22%20y1%3D%2241.7%22%20x2%3D%2243.0%22%20y2%3D%2222.6%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2243.0%22%20cy%3D%2222.6%22%20r%3D%222.2%22%20fill%3D%22black%22%2F%3E%3Cline%20x1%3D%2260.0%22%20y1%3D%2240.1%22%20x2%3D%2260.0%22%20y2%3D%2218.0%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2260.0%22%20cy%3D%2218.0%22%20r%3D%222.2%22%20fill%3D%22black%22%2F%3E%3Cline%20x1%3D%2266.0%22%20y1%3D%2241.7%22%20x2%3D%2277.0%22%20y2%3D%2222.6%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2277.0%22%20cy%3D%2222.6%22%20r%3D%222.2%22%20fill%3D%22black%22%2F%3E%3Cline%20x1%3D%2270.3%22%20y1%3D%2246.0%22%20x2%3D%2289.4%22%20y2%3D%2235.0%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2289.4%22%20cy%3D%2235.0%22%20r%3D%222.2%22%20fill%3D%22black%22%2F%3E%3Cline%20x1%3D%22187.1%22%20y1%3D%2296.0%22%20x2%3D%22204.0%22%20y2%3D%2296.0%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%22204.0%22%20cy%3D%2296.0%22%20r%3D%222.2%22%20fill%3D%22black%22%2F%3E%3Cline%20x1%3D%22185.4%22%20y1%3D%22101.3%22%20x2%3D%22199.0%22%20y2%3D%22111.3%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%22199.0%22%20cy%3D%22111.3%22%20r%3D%222.2%22%20fill%3D%22black%22%2F%3E%3Cline%20x1%3D%22180.8%22%20y1%3D%22104.7%22%20x2%3D%22186.0%22%20y2%3D%22120.7%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%22186.0%22%20cy%3D%22120.7%22%20r%3D%222.2%22%20fill%3D%22black%22%2F%3E%3Cline%20x1%3D%22175.2%22%20y1%3D%22104.7%22%20x2%3D%22170.0%22%20y2%3D%22120.7%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%22170.0%22%20cy%3D%22120.7%22%20r%3D%222.2%22%20fill%3D%22black%22%2F%3E%3Cline%20x1%3D%22170.6%22%20y1%3D%22101.3%22%20x2%3D%22157.0%22%20y2%3D%22111.3%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%22157.0%22%20cy%3D%22111.3%22%20r%3D%222.2%22%20fill%3D%22black%22%2F%3E%3Cline%20x1%3D%22168.9%22%20y1%3D%2296.0%22%20x2%3D%22152.0%22%20y2%3D%2296.0%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%22152.0%22%20cy%3D%2296.0%22%20r%3D%222.2%22%20fill%3D%22black%22%2F%3E%3Cline%20x1%3D%22170.6%22%20y1%3D%2290.7%22%20x2%3D%22157.0%22%20y2%3D%2280.7%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%22157.0%22%20cy%3D%2280.7%22%20r%3D%222.2%22%20fill%3D%22black%22%2F%3E%3Cline%20x1%3D%22175.2%22%20y1%3D%2287.3%22%20x2%3D%22170.0%22%20y2%3D%2271.3%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%22170.0%22%20cy%3D%2271.3%22%20r%3D%222.2%22%20fill%3D%22black%22%2F%3E%3Cline%20x1%3D%22180.8%22%20y1%3D%2287.3%22%20x2%3D%22186.0%22%20y2%3D%2271.3%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%22186.0%22%20cy%3D%2271.3%22%20r%3D%222.2%22%20fill%3D%22black%22%2F%3E%3Cline%20x1%3D%22185.4%22%20y1%3D%2290.7%22%20x2%3D%22199.0%22%20y2%3D%2280.7%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%22199.0%22%20cy%3D%2280.7%22%20r%3D%222.2%22%20fill%3D%22black%22%2F%3E%3Cline%20x1%3D%22259.0%22%20y1%3D%2240.0%22%20x2%3D%22272.0%22%20y2%3D%2240.0%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%22272.0%22%20cy%3D%2240.0%22%20r%3D%222.2%22%20fill%3D%22black%22%2F%3E%3Cline%20x1%3D%22256.9%22%20y1%3D%2244.9%22%20x2%3D%22266.1%22%20y2%3D%2254.1%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%22266.1%22%20cy%3D%2254.1%22%20r%3D%222.2%22%20fill%3D%22black%22%2F%3E%3Cline%20x1%3D%22252.0%22%20y1%3D%2247.0%22%20x2%3D%22252.0%22%20y2%3D%2260.0%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%22252.0%22%20cy%3D%2260.0%22%20r%3D%222.2%22%20fill%3D%22black%22%2F%3E%3Cline%20x1%3D%22247.1%22%20y1%3D%2244.9%22%20x2%3D%22237.9%22%20y2%3D%2254.1%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%22237.9%22%20cy%3D%2254.1%22%20r%3D%222.2%22%20fill%3D%22black%22%2F%3E%3Cline%20x1%3D%22245.0%22%20y1%3D%2240.0%22%20x2%3D%22232.0%22%20y2%3D%2240.0%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%22232.0%22%20cy%3D%2240.0%22%20r%3D%222.2%22%20fill%3D%22black%22%2F%3E%3Cline%20x1%3D%22247.1%22%20y1%3D%2235.1%22%20x2%3D%22237.9%22%20y2%3D%2225.9%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%22237.9%22%20cy%3D%2225.9%22%20r%3D%222.2%22%20fill%3D%22black%22%2F%3E%3Cline%20x1%3D%22252.0%22%20y1%3D%2233.0%22%20x2%3D%22252.0%22%20y2%3D%2220.0%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%22252.0%22%20cy%3D%2220.0%22%20r%3D%222.2%22%20fill%3D%22black%22%2F%3E%3Cline%20x1%3D%22256.9%22%20y1%3D%2235.1%22%20x2%3D%22266.1%22%20y2%3D%2225.9%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%22266.1%22%20cy%3D%2225.9%22%20r%3D%222.2%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E");
	-webkit-mask-position: top center;
	mask-position: top center;
}

.deco-hero-verjaardag .hero::after,
.deco-site-verjaardag::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20280%20170%22%20width%3D%22280%22%20height%3D%22170%22%3E%3Cellipse%20cx%3D%2246%22%20cy%3D%2244%22%20rx%3D%2217%22%20ry%3D%2220.74%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%223%22%2F%3E%3Cpath%20d%3D%22M43%2C64.74%20l3%2C5%20l3%2C-5%20z%22%20fill%3D%22black%22%2F%3E%3Cpath%20d%3D%22M46%2C69.74%20q6%2C18%20-2%2C34%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%2F%3E%3Cellipse%20cx%3D%22104%22%20cy%3D%2230%22%20rx%3D%2213%22%20ry%3D%2215.86%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%223%22%2F%3E%3Cpath%20d%3D%22M101%2C45.86%20l3%2C5%20l3%2C-5%20z%22%20fill%3D%22black%22%2F%3E%3Cpath%20d%3D%22M104%2C50.86%20q6%2C18%20-2%2C34%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%2F%3E%3Cellipse%20cx%3D%22236%22%20cy%3D%2252%22%20rx%3D%2220%22%20ry%3D%2224.4%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%223%22%2F%3E%3Cpath%20d%3D%22M233%2C76.4%20l3%2C5%20l3%2C-5%20z%22%20fill%3D%22black%22%2F%3E%3Cpath%20d%3D%22M236%2C81.4%20q6%2C18%20-2%2C34%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%2F%3E%3Crect%20x%3D%22150%22%20y%3D%22120%22%20width%3D%2212%22%20height%3D%224%22%20rx%3D%222%22%20fill%3D%22black%22%20transform%3D%22rotate(20%20156%20122)%22%2F%3E%3Crect%20x%3D%22168%22%20y%3D%2286%22%20width%3D%2212%22%20height%3D%224%22%20rx%3D%222%22%20fill%3D%22black%22%20transform%3D%22rotate(-35%20174%2088)%22%2F%3E%3Crect%20x%3D%22196%22%20y%3D%22140%22%20width%3D%2212%22%20height%3D%224%22%20rx%3D%222%22%20fill%3D%22black%22%20transform%3D%22rotate(60%20202%20142)%22%2F%3E%3Crect%20x%3D%2272%22%20y%3D%22132%22%20width%3D%2212%22%20height%3D%224%22%20rx%3D%222%22%20fill%3D%22black%22%20transform%3D%22rotate(-15%2078%20134)%22%2F%3E%3Crect%20x%3D%22268%22%20y%3D%22124%22%20width%3D%2212%22%20height%3D%224%22%20rx%3D%222%22%20fill%3D%22black%22%20transform%3D%22rotate(40%20274%20126)%22%2F%3E%3Crect%20x%3D%22126%22%20y%3D%2264%22%20width%3D%2212%22%20height%3D%224%22%20rx%3D%222%22%20fill%3D%22black%22%20transform%3D%22rotate(75%20132%2066)%22%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20280%20170%22%20width%3D%22280%22%20height%3D%22170%22%3E%3Cellipse%20cx%3D%2246%22%20cy%3D%2244%22%20rx%3D%2217%22%20ry%3D%2220.74%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%223%22%2F%3E%3Cpath%20d%3D%22M43%2C64.74%20l3%2C5%20l3%2C-5%20z%22%20fill%3D%22black%22%2F%3E%3Cpath%20d%3D%22M46%2C69.74%20q6%2C18%20-2%2C34%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%2F%3E%3Cellipse%20cx%3D%22104%22%20cy%3D%2230%22%20rx%3D%2213%22%20ry%3D%2215.86%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%223%22%2F%3E%3Cpath%20d%3D%22M101%2C45.86%20l3%2C5%20l3%2C-5%20z%22%20fill%3D%22black%22%2F%3E%3Cpath%20d%3D%22M104%2C50.86%20q6%2C18%20-2%2C34%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%2F%3E%3Cellipse%20cx%3D%22236%22%20cy%3D%2252%22%20rx%3D%2220%22%20ry%3D%2224.4%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%223%22%2F%3E%3Cpath%20d%3D%22M233%2C76.4%20l3%2C5%20l3%2C-5%20z%22%20fill%3D%22black%22%2F%3E%3Cpath%20d%3D%22M236%2C81.4%20q6%2C18%20-2%2C34%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%2F%3E%3Crect%20x%3D%22150%22%20y%3D%22120%22%20width%3D%2212%22%20height%3D%224%22%20rx%3D%222%22%20fill%3D%22black%22%20transform%3D%22rotate(20%20156%20122)%22%2F%3E%3Crect%20x%3D%22168%22%20y%3D%2286%22%20width%3D%2212%22%20height%3D%224%22%20rx%3D%222%22%20fill%3D%22black%22%20transform%3D%22rotate(-35%20174%2088)%22%2F%3E%3Crect%20x%3D%22196%22%20y%3D%22140%22%20width%3D%2212%22%20height%3D%224%22%20rx%3D%222%22%20fill%3D%22black%22%20transform%3D%22rotate(60%20202%20142)%22%2F%3E%3Crect%20x%3D%2272%22%20y%3D%22132%22%20width%3D%2212%22%20height%3D%224%22%20rx%3D%222%22%20fill%3D%22black%22%20transform%3D%22rotate(-15%2078%20134)%22%2F%3E%3Crect%20x%3D%22268%22%20y%3D%22124%22%20width%3D%2212%22%20height%3D%224%22%20rx%3D%222%22%20fill%3D%22black%22%20transform%3D%22rotate(40%20274%20126)%22%2F%3E%3Crect%20x%3D%22126%22%20y%3D%2264%22%20width%3D%2212%22%20height%3D%224%22%20rx%3D%222%22%20fill%3D%22black%22%20transform%3D%22rotate(75%20132%2066)%22%2F%3E%3C%2Fsvg%3E");
	-webkit-mask-position: top center;
	mask-position: top center;
}

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

.section { padding-block: var(--jh-space-6); }

/* Op de posities full-top en full-bottom staan secties direct tegen elkaar en
   tegen de contentkolom aan. Geen losse marges nodig; de sectie brengt zijn
   eigen ruimte mee. */
.section + .section { padding-block-start: 0; }

/* De contentkolom heeft onderaan eigen ruimte. Volgt er een sectie over de
   volle breedte, dan levert die ruimte een witte strook op; de sectie brengt
   zijn eigen padding al mee. */
.layout:has(+ .section) { padding-block-end: 0; }

/* Alinea's met alleen een harde spatie laat de editor geregeld achter aan het
   eind van een module. Ze zijn onzichtbaar maar houden wel hun marge. */
.section > p:last-child:empty,
.shell > p:last-child:empty { margin: 0; }

/* Lege alinea's die de editor tussen twee modules achterlaat, geven een witte
   strook. Ze hebben geen inhoud, dus ze mogen ook geen ruimte innemen. */
.section + p:empty,
p:empty + .section,
p:empty { margin: 0; }
.section--tint { background: var(--jh-surface); }

/* Zachte variant in de accentkleur. Wordt uit --jh-accent gemengd, dus hij
   volgt de templatestijl. De vaste kleur ervoor is de terugval voor browsers
   zonder color-mix. */
.section--roze {
	background: #fbeef4;
	background: color-mix(in srgb, var(--jh-accent) 9%, var(--jh-paper));
}

.section--roze .eyebrow { color: var(--jh-accent-deep); }
.section--deep { background: var(--jh-deep); color: #d8e2f3; }
.section--deep h1, .section--deep h2, .section--deep h3 { color: #fff; }
.section--deep a { color: #fff; }
.section--deep .eyebrow { color: #f0a2c9; }

.section__head { margin-block-end: var(--jh-space-5); }
.section__head h2 { margin-block-start: 0; }
.section__head p { color: var(--jh-ink-soft); }
.section--deep .section__head p { color: #ccd6ea; }

/* ---------- Standpunten ---------- */

.standpunten {
	display: grid;
	gap: var(--jh-space-4);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
	list-style: none;
	padding: 0;
	margin: 0;
}

.standpunt {
	display: flex;
	flex-direction: column;
	gap: var(--jh-space-2);
	background: var(--jh-paper);
	border: 1px solid var(--jh-line);
	border-radius: var(--jh-radius);
	padding: var(--jh-space-4);
	position: relative;
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.standpunt:hover { border-color: var(--jh-accent); transform: translateY(-2px); }

.standpunt__claim {
	font-family: var(--jh-font-display);
	font-size: 1.4rem;
	line-height: 1.22;
	letter-spacing: -0.015em;
	margin: 0;
	text-wrap: pretty;
}

.standpunt__claim a { color: inherit; text-decoration: none; }
.standpunt__claim a:hover { text-decoration: underline; text-decoration-color: var(--jh-accent); }

/* Hele kaart klikbaar, zonder de link uit de tabvolgorde te halen */
.standpunt__claim a::after { content: ""; position: absolute; inset: 0; }

.standpunt__why { color: var(--jh-ink-soft); margin: 0; font-size: 0.95rem; max-width: none; }

.standpunt__meta {
	margin-block-start: auto;
	padding-block-start: var(--jh-space-3);
	border-block-start: 1px solid var(--jh-line);
	font-size: 0.85rem;
	color: var(--jh-ink-soft);
	display: flex;
	flex-wrap: wrap;
	gap: var(--jh-space-3);
	align-items: center;
}

/* Statuschip — het signatuur van dit ontwerp */
.status {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.75rem;
	font-weight: 650;
	letter-spacing: 0.03em;
	color: var(--jh-status-open);
	white-space: nowrap;
}

.status::before {
	content: "";
	width: 0.55rem; height: 0.55rem;
	border-radius: 50%;
	background: var(--jh-status-open);
	flex: none;
}

.status--vastgesteld { color: var(--jh-status-vast); }
.status--vastgesteld::before { background: var(--jh-status-vast); }

.status--gesprek { color: var(--jh-accent-deep); }
.status--gesprek::before { background: var(--jh-status-gesprek); }

.status--open::before { background: transparent; box-shadow: inset 0 0 0 2px var(--jh-status-open); }

/* Themafilter */
.themas { display: flex; flex-wrap: wrap; gap: var(--jh-space-2); margin-block-end: var(--jh-space-4); padding: 0; list-style: none; }

.thema {
	display: inline-block;
	padding: 0.35rem 0.85rem;
	border: 1px solid var(--jh-line);
	border-radius: 100px;
	background: var(--jh-paper);
	font-size: 0.85rem;
	text-decoration: none;
	color: var(--jh-ink);
}

.thema:hover, .thema.is-active { background: var(--jh-deep); border-color: var(--jh-deep); color: #fff; }

/* Standpuntpagina */
.standpunt-page__header { border-block-end: 1px solid var(--jh-line); padding-block-end: var(--jh-space-4); margin-block-end: var(--jh-space-5); }
.standpunt-page__claim { font-size: clamp(1.8rem, 1.3rem + 2vw, 2.7rem); margin-block: var(--jh-space-2) var(--jh-space-3); }
.standpunt-page__meta { display: flex; flex-wrap: wrap; gap: var(--jh-space-4); align-items: center; font-size: 0.9rem; color: var(--jh-ink-soft); }

/* Blok "hier zijn we nog niet uit" */
.open-vragen {
	display: grid;
	gap: var(--jh-space-4);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
	list-style: none; padding: 0; margin: 0;
}

.open-vraag {
	border: 1px dashed rgb(255 255 255 / 35%);
	border-radius: var(--jh-radius);
	padding: var(--jh-space-4);
}

.open-vraag h3 { font-size: 1.15rem; margin-block: 0 var(--jh-space-2); }
.open-vraag p { color: #ccd6ea; font-size: 0.95rem; margin: 0; }

/* ---------- Blog ---------- */

.postkaarten {
	display: grid;
	gap: var(--jh-space-4);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
	list-style: none;
	padding: 0;
	margin: 0;
}

.postkaart {
	display: flex;
	flex-direction: column;
	gap: var(--jh-space-2);
	background: var(--jh-paper);
	border: 1px solid var(--jh-line);
	border-radius: var(--jh-radius);
	padding: var(--jh-space-4);
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.postkaart:hover { border-color: var(--jh-accent); transform: translateY(-2px); }

.postkaart__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--jh-space-2) var(--jh-space-3);
	margin: 0;
	font-size: 0.85rem;
	color: var(--jh-ink-soft);
}

.postkaart__meta .eyebrow { margin: 0; }
.postkaart__meta time { color: var(--jh-support); font-weight: 550; }

.postkaart__titel {
	font-family: var(--jh-font-display);
	font-size: 1.3rem;
	line-height: 1.22;
	letter-spacing: -0.015em;
	margin: 0;
	text-wrap: pretty;
}

.postkaart__intro {
	color: var(--jh-ink-soft);
	font-size: 0.95rem;
	margin: 0;
	max-width: none;
}

.postkaart__voet {
	margin-block: auto 0;
	padding-block-start: var(--jh-space-3);
	border-block-start: 1px solid var(--jh-line);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--jh-space-2);
}

.post__note-vlag {
	font-size: 0.72rem;
	font-weight: 650;
	letter-spacing: 0.04em;
	padding: 0.15rem 0.55rem;
	border: 1px solid var(--jh-line);
	border-radius: 100px;
	color: var(--jh-ink-soft);
}

/* Leespagina */
.post-page__header { margin-block-end: var(--jh-space-4); }
.post-page__titel { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.8rem); margin-block: var(--jh-space-2) 0; }
.post-page__body { font-size: 1.075rem; }
.post-page__body h2 { font-size: 1.6rem; }
.post-page__body h3 { font-size: 1.25rem; }
.post-page__bijgewerkt { font-size: 0.85rem; color: var(--jh-ink-soft); margin-block-start: var(--jh-space-5); }

/* ---------- Inhoudsmelding ---------- */
/* Rustig, geen waarschuwingsdriehoek. Het is informatie, geen alarm. */

.contentnote {
	border: 1px solid var(--jh-line);
	border-inline-start: 3px solid var(--jh-support);
	border-radius: var(--jh-radius);
	background: var(--jh-surface);
	padding: var(--jh-space-3) var(--jh-space-4);
	margin-block: var(--jh-space-4) var(--jh-space-5);
}

.contentnote__kop {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.11em;
	color: var(--jh-support-deep);
	margin: 0 0 var(--jh-space-1);
}

.contentnote__tekst { margin: 0; color: var(--jh-ink); }

/* ---------- Hulpblok ---------- */
/* Plaats als aangepaste module op main-bottom, toegewezen aan de secties
   waar je over psychische gezondheid schrijft. Opmaak staat in OPZET.md. */

.hulpblok {
	background: var(--jh-deep);
	color: #d8e2f3;
	border-radius: var(--jh-radius);
	padding: var(--jh-space-4) var(--jh-space-5);
	margin-block-start: var(--jh-space-6);
}

.hulpblok h2 {
	font-size: 1.15rem;
	color: #fff;
	margin-block: 0 var(--jh-space-2);
}

.hulpblok p { color: #ccd6ea; margin-block-end: var(--jh-space-3); }
.hulpblok p:last-child { margin-block-end: 0; }
.hulpblok a { color: #fff; }

.hulpblok ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--jh-space-2); }
.hulpblok li { display: flex; flex-wrap: wrap; gap: var(--jh-space-2); align-items: baseline; }
.hulpblok strong { color: #fff; }
.hulpblok small { color: #a8bcda; }

/* ---------- Banner, kruimelpad ---------- */

.banner > * { margin: 0; }
.breadcrumbs { border-block-end: 1px solid var(--jh-line); font-size: 0.85rem; background: var(--jh-paper); }
.breadcrumbs .shell { padding-block: var(--jh-space-2); }
.breadcrumb { list-style: none; display: flex; flex-wrap: wrap; gap: var(--jh-space-2); margin: 0; padding: 0; }
.breadcrumb-item + .breadcrumb-item::before { content: "/"; color: var(--jh-ink-soft); margin-inline-end: var(--jh-space-2); }
.breadcrumb-item.active { color: var(--jh-ink-soft); }

/* ---------- Layout ---------- */

.layout { flex: 1 0 auto; display: grid; gap: var(--jh-space-5); padding-block: var(--jh-space-5); align-items: start; }

.has-sidebar-left .layout { grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); }
.has-sidebar-right .layout { grid-template-columns: minmax(0, 1fr) minmax(0, 17rem); }
.has-both-sidebars .layout { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) minmax(0, 15rem); }

.sidebar--left { grid-column: 1; }
.has-sidebar-right .main { grid-column: 1; }
.has-both-sidebars .main { grid-column: 2; }

@media (max-width: 900px) {
	.layout,
	.has-sidebar-left .layout,
	.has-sidebar-right .layout,
	.has-both-sidebars .layout { grid-template-columns: minmax(0, 1fr); }
	.sidebar, .main { grid-column: 1 !important; }
	.sidebar--left { order: 2; }
	.sidebar--right { order: 3; }
	.main { order: 1; }
}

.main__top, .main__bottom { display: grid; gap: var(--jh-space-4); margin-block: var(--jh-space-4); }

/* ---------- Modulekaart ---------- */

.card {
	background: var(--jh-paper);
	border: 1px solid var(--jh-line);
	border-radius: var(--jh-radius);
	padding: var(--jh-space-4);
	margin-block-end: var(--jh-space-4);
}

.card > :last-child { margin-block-end: 0; }

.card__title {
	font-family: var(--jh-font-body);
	font-size: 0.78rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: 0.1em;
	color: var(--jh-ink-soft);
	margin-block: 0 var(--jh-space-3);
	padding-block-end: var(--jh-space-2);
	border-block-end: 1px solid var(--jh-line);
}

.sidebar ul { list-style: none; margin: 0; padding: 0; }
.sidebar ul { display: flex; flex-wrap: wrap; gap: var(--jh-space-2); }

/* ---------- Agenda ---------- */

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

.agenda li {
	display: grid;
	grid-template-columns: 4.5rem 1fr;
	gap: var(--jh-space-3);
	padding-block: var(--jh-space-3);
	border-block-end: 1px solid var(--jh-line);
	align-items: baseline;
}

.agenda time {
	font-family: var(--jh-font-display);
	font-size: 1.5rem;
	line-height: 1.05;
	color: var(--jh-support);
}

.agenda time small {
	display: block;
	font-family: var(--jh-font-body);
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--jh-ink-soft);
}

.agenda h3 { font-size: 1.1rem; margin: 0 0 var(--jh-space-1); }
.agenda p { margin: 0; font-size: 0.9rem; color: var(--jh-ink-soft); }

/* ---------- Onderbouw & footer ---------- */

.bottom { background: var(--jh-surface); border-block-start: 1px solid var(--jh-line); padding-block: var(--jh-space-5); }
.bottom__grid { display: grid; gap: var(--jh-space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }

.footer { background: var(--jh-deep); color: #ccd6ea; padding-block: var(--jh-space-5); font-size: 0.92rem; }
.footer a { color: #fff; }
.footer h2, .footer h3, .footer strong { color: #fff; }
.footer__inner { display: flex; flex-wrap: wrap; gap: var(--jh-space-4); align-items: center; justify-content: space-between; }
.footer__copy { margin: 0; }
.footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--jh-space-2); }

.footer__links a,
.footer ul a {
	display: inline-block;
	padding: 0.35rem 0.9rem;
	border: 1px solid rgb(255 255 255 / 30%);
	border-radius: 100px;
	background: transparent;
	color: #fff;
	font-size: 0.88rem;
	font-weight: 500;
	text-decoration: none;
}

.footer__links a:hover,
.footer ul a:hover { background: #fff; border-color: #fff; color: var(--jh-deep); }

/* ---------- Terug naar boven ---------- */

.to-top {
	position: fixed; inset-block-end: var(--jh-space-4); inset-inline-end: var(--jh-space-4); z-index: 40;
	display: grid; place-items: center; width: 2.75rem; height: 2.75rem;
	background: var(--jh-deep); color: #fff; border-radius: 50%;
	text-decoration: none; box-shadow: var(--jh-shadow);
}

.to-top[hidden] { display: none; }

/* ---------- Formulieren & knoppen ---------- */

input, select, textarea, button { font: inherit; }

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
select, textarea {
	width: 100%; max-width: 32rem; padding: 0.55rem 0.75rem;
	background: var(--jh-paper); color: var(--jh-ink);
	border: 1px solid var(--jh-line); border-radius: var(--jh-radius);
}

input:focus, select:focus, textarea:focus { border-color: var(--jh-accent); }
label { display: inline-block; margin-block-end: var(--jh-space-1); font-weight: 550; }

.btn, button, input[type="submit"], input[type="button"] {
	display: inline-flex; align-items: center; gap: var(--jh-space-2);
	padding: 0.65rem 1.25rem;
	background: var(--jh-deep); color: #fff;
	border: 1px solid transparent; border-radius: var(--jh-radius);
	text-decoration: none; font-weight: 600; cursor: pointer;
}

.btn:hover, button:hover, input[type="submit"]:hover { background: var(--jh-deep-soft); }

.btn--accent { background: var(--jh-accent); color: #fff; }
.btn--accent:hover { background: var(--jh-accent-deep); }

.btn--ghost, .btn-secondary, .btn-outline-primary {
	background: transparent; color: var(--jh-ink); border-color: var(--jh-ink);
}

.btn--ghost:hover, .btn-secondary:hover { background: var(--jh-ink); color: var(--jh-paper); }

.section--deep .btn--ghost { color: #fff; border-color: rgb(255 255 255 / 55%); }
.section--deep .btn--ghost:hover { background: #fff; color: var(--jh-deep); }

/* ---------- Tabellen ---------- */

table { width: 100%; border-collapse: collapse; }
th, td { padding: var(--jh-space-2) var(--jh-space-3); border-block-end: 1px solid var(--jh-line); text-align: start; }
thead th { background: var(--jh-surface); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.07em; }

/* ---------- Joomla systeemmeldingen ---------- */

joomla-alert {
	display: block;
	border: 1px solid var(--jh-line);
	border-inline-start: 3px solid var(--jh-accent);
	border-radius: var(--jh-radius);
	background: var(--jh-surface);
	padding: var(--jh-space-3);
	margin-block-end: var(--jh-space-4);
}

joomla-alert[type="danger"], joomla-alert[type="error"] { border-inline-start-color: #a33224; }
joomla-alert[type="warning"] { border-inline-start-color: var(--jh-accent); }
joomla-alert[type="success"] { border-inline-start-color: var(--jh-deep); }

/* ---------- Paginering ---------- */

.pagination { list-style: none; display: flex; flex-wrap: wrap; gap: var(--jh-space-1); padding: 0; margin-block: var(--jh-space-5) 0; }
.pagination .page-link { display: block; padding: 0.4rem 0.8rem; border: 1px solid var(--jh-line); border-radius: var(--jh-radius); text-decoration: none; }
.pagination .active .page-link { background: var(--jh-deep); color: #fff; border-color: var(--jh-deep); }

/* ---------- Kunena & Phoca — alleen het hoogstnodige ---------- */

.phocagallery-box-file { border: 1px solid var(--jh-line); border-radius: var(--jh-radius); background: var(--jh-paper); }
#kunena .btn, .pg-cv-view .btn { border-radius: var(--jh-radius); }

/* ---------- Foutpagina ---------- */

.error-page { display: grid; place-items: center; text-align: center; padding-block: var(--jh-space-7); flex: 1 0 auto; }
.error-page__code { font-family: var(--jh-font-display); font-size: clamp(4rem, 12vw, 8rem); line-height: 1; font-weight: 700; color: var(--jh-accent); letter-spacing: -0.04em; }
.error-page p { margin-inline: auto; }

/* ---------- Print ---------- */

@media print {
	.header, .topbar, .sidebar, .bottom, .footer, .to-top, .breadcrumbs, .skip-link, .hero__actions { display: none !important; }
	body { color: #000; background: #fff; }
	.standpunt { break-inside: avoid; border: 1px solid #999; }
	a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}