/* Polices auto-hébergées (P-086) */
@font-face {
  font-family: 'Proza Libre';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/proza-libre-400i.woff2) format('woff2');
  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: 'Proza Libre';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/proza-libre-400.woff2) format('woff2');
  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: 'Proza Libre';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/proza-libre-500.woff2) format('woff2');
  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: 'Proza Libre';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/proza-libre-600.woff2) format('woff2');
  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: 'Solway';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/solway-700.woff2) format('woff2');
  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: 'Solway';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/solway-800.woff2) format('woff2');
  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: 'Stardos Stencil';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/stardos-stencil-700.woff2) format('woff2');
  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;
}
/* ==========================================================================
   Hardhoutgids : opmaak. Een feuille voor het hele thema (style.css draagt alleen de kop).
   Palet : papier, vergrijsd, bankirai (donker), groen (accent), lariks (tweede kleur voor knoppen/rondellen).
   Alleen licht : de ontwerpkeuze van dit magazine is een lichte, warme pagina (color-scheme: only light).
   ========================================================================== */

@property --o0 { syntax: '<length>'; inherits: false; initial-value: 44px; }
@property --o1 { syntax: '<length>'; inherits: false; initial-value: 70px; }
@property --o2 { syntax: '<length>'; inherits: false; initial-value: 26px; }
@property --o3 { syntax: '<length>'; inherits: false; initial-value: 84px; }
@property --o4 { syntax: '<length>'; inherits: false; initial-value: 52px; }
@property --o5 { syntax: '<length>'; inherits: false; initial-value: 90px; }
@property --o6 { syntax: '<length>'; inherits: false; initial-value: 36px; }
@property --o7 { syntax: '<length>'; inherits: false; initial-value: 76px; }
@property --o8 { syntax: '<length>'; inherits: false; initial-value: 58px; }

:root {
	--papier: #F8F7F2;
	--vergrijsd: #E6E7E0;
	--bankirai: #2B1D14;
	--encre: #1F1712;
	--encre-2: #5E5449;
	--groen: #3E6A2C;
	--groen-diep: #2F5121;
	--lariks: #E8B44A;
	--lariks-licht: #EDBF5A;
	--roest: #9A3B1B;
	--roest-licht: #F5E7DE;
	--mos: #E3EBD9;
	--wit: #FFFFFF;
	--joint: rgba(43, 29, 20, .7);
	--schaduw: 0 1px 0 rgba(43, 29, 20, .06), 0 10px 26px rgba(43, 29, 20, .08);
	--schaduw-groot: 0 18px 40px rgba(43, 29, 20, .22);
	--f-kop: 'Solway', Georgia, 'Times New Roman', serif;
	--f-tekst: 'Proza Libre', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--f-stempel: 'Stardos Stencil', Impact, 'Arial Narrow', sans-serif;
	--breed: 1200px;
	--rand: clamp(20px, 4vw, 32px);
	color-scheme: only light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body.hvl {
	margin: 0; background: var(--papier); color: var(--encre);
	font: 400 18px/1.65 var(--f-tekst);
	display: flex; flex-direction: column; min-height: 100vh;
	-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
.hvl-pagina { flex: 1 0 auto; overflow-x: clip; }
img, svg { max-width: 100%; display: block; }
img { height: auto; }
a { color: var(--groen); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--groen-diep); text-decoration-thickness: 2px; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible {
	outline: 3px solid var(--lariks); outline-offset: 2px; border-radius: 4px;
}
h1, h2, h3, h4 { font-family: var(--f-kop); color: var(--encre); margin: 0; line-height: 1.12; }
p { margin: 0 0 1.1em; }
ul, ol { margin: 0 0 1.1em; padding-left: 1.3em; }

.hvl-skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--bankirai); color: #fff; padding: 10px 16px; border-radius: 8px; }
.hvl-skip:focus { left: 12px; }
.hvl-wrap { width: 100%; max-width: calc(var(--breed) + 2 * var(--rand)); margin: 0 auto; padding-inline: var(--rand); }
.hvl-wrap--smal { max-width: calc(820px + 2 * var(--rand)); }

/* ---------- Beeldvlakken en kleine onderdelen ---------- */
.hvl-leeg {
	display: block; width: 100%; height: 100%; min-height: 100%;
	background:
		repeating-linear-gradient(180deg, transparent 0 68px, rgba(43, 29, 20, .5) 68px 72px),
		linear-gradient(100deg, #8C5C35 0%, #AB7648 36%, #7C4E2D 68%, #9C6B43 100%);
}
.hvl-icoon { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; display: inline-block; vertical-align: -.2em; }
.hvl-ringen { width: 34px; height: 34px; flex: none; }
.hvl-ringen__basis { fill: var(--lariks); }
.hvl-ringen__ring { fill: none; stroke: #9A6A22; stroke-width: 1.6; opacity: .8; }
.hvl-ringen__hart { fill: #6B4423; }
.hvl-draad { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--bankirai); stroke-width: 1.3; opacity: .12; pointer-events: none; }
.hvl-draad path { vector-effect: non-scaling-stroke; }

.hvl-pastille {
	display: inline-block; padding: 4px 11px; border-radius: 999px; background: var(--mos); color: var(--groen-diep);
	font: 600 13px/1.3 var(--f-tekst); text-decoration: none;
}
.hvl-pastille:hover { background: #D5E2C7; color: var(--groen-diep); }
.hvl-gesponsord { display: inline-block; padding: 4px 11px; border-radius: 999px; border: 1.5px solid var(--roest); color: var(--roest); font: 600 13px/1.3 var(--f-tekst); }
.hvl-credit {
	position: absolute; right: 12px; bottom: 12px; margin: 0; padding: 4px 10px; border-radius: 999px;
	background: rgba(43, 29, 20, .78); color: #fff; font: 500 12px/1.3 var(--f-tekst);
}

.hvl-knop {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 24px;
	border: 0; border-radius: 10px; font: 600 16px/1.2 var(--f-tekst); text-decoration: none; cursor: pointer;
	transition: background-color .15s, transform .15s;
}
.hvl-knop--groen { background: var(--groen); color: #fff; }
.hvl-knop--groen:hover { background: var(--groen-diep); color: #fff; }
.hvl-knop--lariks { background: var(--lariks); color: var(--encre); }
.hvl-knop--lariks:hover { background: var(--lariks-licht); color: var(--encre); }
.hvl-knop[disabled] { background: var(--vergrijsd); color: var(--encre-2); cursor: not-allowed; }
.hvl-tekstknop { background: none; border: 0; padding: 10px 6px; font: 600 15px/1.2 var(--f-tekst); color: var(--groen-diep); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.hvl-pijl { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; }
.hvl-pijl:hover .hvl-icoon { transform: translateX(3px); }
.hvl-pijl .hvl-icoon { transition: transform .15s; }

.hvl-kruim { font: 500 14px/1.4 var(--f-tekst); color: var(--encre-2); margin: 0 0 14px; }
.hvl-kruim a { color: var(--encre-2); }
.hvl-kruim span[aria-hidden] { margin: 0 4px; }

/* ---------- Kop ---------- */
.hvl-kop { position: sticky; top: 0; z-index: 60; padding: 12px var(--rand) 0; transition: padding .25s; }
.hvl-kop__binnen {
	position: relative; display: flex; align-items: center; gap: 20px; max-width: calc(var(--breed) + 72px); margin: 0 auto; height: 64px;
	padding: 0 14px 0 12px; border-radius: 14px;
	background: rgba(248, 247, 242, .82); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
	box-shadow: 0 1px 0 rgba(43, 29, 20, .06), 0 8px 24px rgba(43, 29, 20, .10);
	transition: max-width .3s, border-radius .3s, background-color .3s;
}
.hvl-kop.is-scrolled { padding-top: 0; padding-inline: 0; }
.hvl-kop.is-scrolled .hvl-kop__binnen { max-width: 100%; border-radius: 0; background: var(--papier); padding-inline: max(var(--rand), calc(50% - 600px)); }
.hvl--home .hvl-kop { position: fixed; left: 0; right: 0; top: 0; }
.hvl-merk { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--encre); }
.hvl-merk:hover { color: var(--encre); }
.hvl-merk__beeld { width: 44px; height: 44px; flex: none; }
.hvl-merk__naam { font: 800 22px/1 var(--f-kop); letter-spacing: -.01em; }
.hvl-nav { margin-left: auto; }
.hvl-nav ul { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.hvl-nav li { margin: 0; }
.hvl-nav a { display: block; padding: 9px 12px; border-radius: 8px; font: 500 15px/1.2 var(--f-tekst); color: var(--encre); text-decoration: none; }
.hvl-nav a:hover { background: var(--vergrijsd); color: var(--encre); }
.hvl-nav .current-menu-item > a, .hvl-nav .current-cat > a, .hvl-nav .current-post-ancestor > a, .hvl-nav .current-menu-ancestor > a { background: var(--mos); color: var(--groen-diep); }
.hvl-kop__zoek { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; color: var(--encre); }
.hvl-kop__zoek:hover { background: var(--vergrijsd); color: var(--encre); }
.hvl-kop__zoek .hvl-icoon { width: 22px; height: 22px; }
.hvl-menuknop { display: none; width: 44px; height: 44px; border: 0; border-radius: 10px; background: transparent; color: var(--encre); cursor: pointer; place-items: center; }
.hvl-menuknop .hvl-icoon { width: 26px; height: 26px; }

@media (max-width: 1100px) {
	.hvl-kop__binnen { gap: 8px; }
	.hvl-kop__zoek { margin-left: auto; }
	.hvl-nav { margin-left: 0; }
	.js .hvl-menuknop { display: grid; }
	.js .hvl-nav { display: none; position: absolute; top: calc(100% + 8px); left: 0; right: 0; padding: 10px; background: var(--papier); border-radius: 12px; box-shadow: var(--schaduw-groot); }
	.js .hvl-kop.is-open .hvl-nav { display: block; }
	.js .hvl-nav ul { flex-direction: column; }
	.js .hvl-nav a { padding: 14px 14px; font-size: 17px; }
	.hvl-kop.is-scrolled .hvl-nav { left: 12px; right: 12px; }
	html:not(.js) .hvl-kop__binnen { height: auto; flex-wrap: wrap; padding-block: 8px; }
	html:not(.js) .hvl-nav { order: 5; width: 100%; }
	html:not(.js) .hvl-nav ul { flex-wrap: wrap; }
}

/* ---------- Secties en kaarten ---------- */
.hvl-sec { padding: 72px 0; }
.hvl-sec__kop { max-width: 720px; margin-bottom: 36px; }
.hvl-sec__kop h2, .hvl-sec h2 { font-weight: 700; font-size: 34px; line-height: 1.15; }
.hvl-sec__kop p { margin: 12px 0 0; color: var(--encre-2); font-size: 18px; }
.hvl-sec__voet { margin: 36px 0 0; text-align: center; }

.hvl-raster { display: grid; gap: 28px; }
.hvl-raster--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hvl-raster--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hvl-kaart { position: relative; display: flex; flex-direction: column; background: var(--wit); border-radius: 12px; overflow: hidden; box-shadow: var(--schaduw); transition: box-shadow .2s, transform .2s; }
.hvl-kaart:hover { box-shadow: 0 1px 0 rgba(43, 29, 20, .06), 0 16px 34px rgba(43, 29, 20, .14); }
.hvl-kaart__foto { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--vergrijsd); }
.hvl-kaart__foto img, .hvl-kaart__foto .hvl-leeg { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.hvl-kaart:hover .hvl-kaart__foto img { transform: scale(1.03); }
.hvl-kaart__tekst { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 20px 22px 22px; flex: 1; }
.hvl-kaart__titel { font: 700 21px/1.25 var(--f-kop); }
.hvl-kaart__titel a { color: var(--encre); text-decoration: none; }
.hvl-kaart__titel a::after { content: ""; position: absolute; inset: 0; }
.hvl-kaart__titel a:hover { color: var(--groen-diep); }
.hvl-pastille { position: relative; z-index: 2; }
.hvl-kaart__meta { margin: auto 0 0; font: 500 14px/1.4 var(--f-tekst); color: var(--encre-2); }
.hvl-kaart.is-verborgen { display: none; }
.hvl-meer { text-align: center; margin: 40px 0 0; }
.hvl-leegstand { padding: 56px 32px; background: var(--wit); border-radius: 12px; text-align: center; box-shadow: var(--schaduw); }
.hvl-leegstand p { max-width: 560px; margin: 0 auto 18px; }

/* ==========================================================================
   VOORPAGINA
   ========================================================================== */

/* 1. Hero : een vlonder in aanleg */
.hvl-hero { position: relative; height: 600px; margin-bottom: 100px; background: var(--papier); }
.hvl-hero__tekst { position: relative; z-index: 2; width: 46%; height: 100%; padding: 132px 90px 0 max(var(--rand), calc(50vw - 600px)); }
.hvl-h1 { font-weight: 800; font-size: clamp(2.5rem, 4.5vw, 5.6rem); line-height: 1.04; letter-spacing: -.012em; margin-bottom: 22px; }
.hvl-h1__a { display: block; color: var(--encre); }
.hvl-h1__b { display: block; color: var(--groen); }
.hvl-hero__lead { font-size: 20px; line-height: 1.55; color: var(--encre); max-width: 30em; margin-bottom: 20px; }
.hvl-hero__punten { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.hvl-hero__punten li { margin: 0; padding: 6px 13px; border-radius: 999px; background: var(--vergrijsd); color: var(--encre); font: 500 14px/1.3 var(--f-tekst); }

.hvl-hero__foto {
	/* Negen lames van gelijke dikte, om en om kort en lang (30 en 78 px) : een regelmatig verband zoals bij een echte vlonder.
	   Tussen twee lames zit een naad van 4 px (de papierkleur van de pagina) die tot --d (112 px) diep doorloopt. */
	--o0: 30px; --o1: 78px; --o2: 30px; --o3: 78px; --o4: 30px; --o5: 78px; --o6: 30px; --o7: 78px; --o8: 30px;
	--o-start: 112px; --d: 112px;
	position: absolute; top: 0; bottom: 0; right: 0; left: calc(46% - 90px); background: var(--vergrijsd);
	clip-path: polygon(
		100% 0, 100% 100%,
		var(--o8) 100%, var(--o8) calc(88.888% + 2px), var(--d) calc(88.888% + 2px), var(--d) calc(88.888% - 2px), var(--o7) calc(88.888% - 2px),
		var(--o7) calc(77.777% + 2px), var(--d) calc(77.777% + 2px), var(--d) calc(77.777% - 2px), var(--o6) calc(77.777% - 2px),
		var(--o6) calc(66.666% + 2px), var(--d) calc(66.666% + 2px), var(--d) calc(66.666% - 2px), var(--o5) calc(66.666% - 2px),
		var(--o5) calc(55.555% + 2px), var(--d) calc(55.555% + 2px), var(--d) calc(55.555% - 2px), var(--o4) calc(55.555% - 2px),
		var(--o4) calc(44.444% + 2px), var(--d) calc(44.444% + 2px), var(--d) calc(44.444% - 2px), var(--o3) calc(44.444% - 2px),
		var(--o3) calc(33.333% + 2px), var(--d) calc(33.333% + 2px), var(--d) calc(33.333% - 2px), var(--o2) calc(33.333% - 2px),
		var(--o2) calc(22.222% + 2px), var(--d) calc(22.222% + 2px), var(--d) calc(22.222% - 2px), var(--o1) calc(22.222% - 2px),
		var(--o1) calc(11.111% + 2px), var(--d) calc(11.111% + 2px), var(--d) calc(11.111% - 2px), var(--o0) calc(11.111% - 2px),
		var(--o0) 0);
	animation:
		hvl-l0 .26s cubic-bezier(.2, .7, .2, 1) 0s backwards, hvl-l1 .26s cubic-bezier(.2, .7, .2, 1) .04s backwards,
		hvl-l2 .26s cubic-bezier(.2, .7, .2, 1) .08s backwards, hvl-l3 .26s cubic-bezier(.2, .7, .2, 1) .12s backwards,
		hvl-l4 .26s cubic-bezier(.2, .7, .2, 1) .16s backwards, hvl-l5 .26s cubic-bezier(.2, .7, .2, 1) .20s backwards,
		hvl-l6 .26s cubic-bezier(.2, .7, .2, 1) .24s backwards, hvl-l7 .26s cubic-bezier(.2, .7, .2, 1) .28s backwards,
		hvl-l8 .26s cubic-bezier(.2, .7, .2, 1) .32s backwards;
}
@keyframes hvl-l0 { from { --o0: var(--o-start); } }
@keyframes hvl-l1 { from { --o1: var(--o-start); } }
@keyframes hvl-l2 { from { --o2: var(--o-start); } }
@keyframes hvl-l3 { from { --o3: var(--o-start); } }
@keyframes hvl-l4 { from { --o4: var(--o-start); } }
@keyframes hvl-l5 { from { --o5: var(--o-start); } }
@keyframes hvl-l6 { from { --o6: var(--o-start); } }
@keyframes hvl-l7 { from { --o7: var(--o-start); } }
@keyframes hvl-l8 { from { --o8: var(--o-start); } }
.hvl-hero__beeld { width: 100%; height: 100%; object-fit: cover; object-position: 30% 70%; }
.hvl-rondel {
	position: absolute; left: 132px; top: 112px; z-index: 3; width: 132px; height: 132px; border-radius: 50%;
	display: grid; place-items: center; text-align: center; background: var(--papier); box-shadow: 0 8px 22px rgba(43, 29, 20, .28);
}
.hvl-rondel__ringen { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); opacity: .35; }
.hvl-rondel .hvl-ringen__basis { fill: var(--vergrijsd); }
.hvl-rondel p { position: relative; margin: 0; display: flex; flex-direction: column; gap: 2px; font: 500 12px/1.2 var(--f-tekst); color: var(--encre-2); padding: 0 14px; }
.hvl-rondel strong { font: 800 15px/1.15 var(--f-kop); color: var(--encre); }
.hvl-hero__kaart {
	position: absolute; z-index: 4; left: calc(46% - 60px); bottom: -90px; width: min(540px, 48%);
	background: var(--wit); border-radius: 12px; box-shadow: var(--schaduw-groot);
	animation: hvl-zet .35s ease .6s backwards;
}
@keyframes hvl-zet { from { opacity: 0; transform: translateY(14px); } }

/* Houtkeuzehulp */
.hvl-hulp { padding: 22px 26px 24px; min-height: 236px; }
.hvl-hulp__label { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 6px; font: 600 14px/1.3 var(--f-tekst); color: var(--groen-diep); }
.hvl-hulp__teller { font-weight: 500; color: var(--encre-2); }
.hvl-hulp__vraag { margin: 0 0 14px; font: 700 24px/1.2 var(--f-kop); color: var(--encre); }
.hvl-hulp__keuzes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.hvl-keuze {
	display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 10px 14px; border-radius: 10px;
	border: 2px solid var(--vergrijsd); background: var(--papier); color: var(--encre); text-align: center; text-decoration: none;
	font: 600 16px/1.25 var(--f-tekst); cursor: pointer; transition: border-color .15s, background-color .15s;
}
.hvl-keuze:hover { border-color: var(--groen); color: var(--encre); }
.hvl-keuze[aria-pressed="true"], .hvl-keuze.is-gekozen { border-color: var(--groen); background: var(--mos); color: var(--groen-diep); }
.hvl-hulp__acties { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.hvl-hulp__uitslag h3 { font: 700 22px/1.2 var(--f-kop); margin: 0 0 12px; }
.hvl-uitslag { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 8px; }
.hvl-uitslag li { margin: 0; }
.hvl-uitslag a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 10px; background: var(--papier); color: var(--encre); font: 600 16px/1.3 var(--f-tekst); text-decoration: none; border: 2px solid transparent; }
.hvl-uitslag a:hover { border-color: var(--groen); }
.hvl-uitslag small { display: block; font: 500 13px/1.3 var(--f-tekst); color: var(--groen-diep); }

/* 2. Staalkaart */
.hvl-sec--staal { background: var(--vergrijsd); padding-top: 120px; }
.hvl-staal { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.hvl-plank { display: flex; flex-direction: column; background: var(--wit); border-radius: 8px; overflow: hidden; text-decoration: none; color: var(--encre); box-shadow: var(--schaduw); transition: transform .25s, box-shadow .25s; }
.hvl-plank:hover { transform: translateY(-4px); color: var(--encre); box-shadow: 0 1px 0 rgba(43, 29, 20, .06), 0 16px 30px rgba(43, 29, 20, .16); }
.hvl-plank__foto { display: block; aspect-ratio: 3 / 4; overflow: hidden; border-bottom: 5px solid var(--joint); }
.hvl-plank__foto img, .hvl-plank__foto .hvl-leeg { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.hvl-plank:hover .hvl-plank__foto img { transform: scale(1.03); }
.hvl-plank__tekst { display: flex; flex-direction: column; gap: 4px; padding: 14px 14px 18px; }
.hvl-plank__naam { font: 800 20px/1.15 var(--f-kop); }
.hvl-plank__getal { font: 800 22px/1.1 var(--f-kop); color: var(--groen); margin-top: 4px; }
.hvl-plank__label { font: 500 14px/1.35 var(--f-tekst); color: var(--encre-2); }

/* 3. Vers van de zaag */
.hvl-vers { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px; align-items: stretch; }
.hvl-vers__groot { position: relative; display: flex; flex-direction: column; background: var(--wit); border-radius: 12px; overflow: hidden; box-shadow: var(--schaduw); }
.hvl-vers__foto { display: block; height: 270px; overflow: hidden; }
.hvl-vers__foto img, .hvl-vers__foto .hvl-leeg { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.hvl-vers__groot:hover .hvl-vers__foto img { transform: scale(1.03); }
.hvl-vers__tekst { padding: 22px 28px 26px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.hvl-vers__tekst h3 { font: 800 28px/1.2 var(--f-kop); }
.hvl-vers__tekst h3 a { color: var(--encre); text-decoration: none; }
.hvl-vers__tekst h3 a::after { content: ""; position: absolute; inset: 0; }
.hvl-vers__tekst p { margin: 0; color: var(--encre-2); }
.hvl-vers__klein { display: grid; gap: 16px; }
.hvl-mini { position: relative; display: grid; grid-template-columns: 150px minmax(0, 1fr); background: var(--wit); border-radius: 12px; overflow: hidden; box-shadow: var(--schaduw); transition: box-shadow .2s; }
.hvl-mini:hover { box-shadow: 0 1px 0 rgba(43, 29, 20, .06), 0 16px 34px rgba(43, 29, 20, .14); }
.hvl-mini__foto { display: block; min-height: 120px; overflow: hidden; }
.hvl-mini__foto img, .hvl-mini__foto .hvl-leeg { width: 100%; height: 100%; object-fit: cover; }
.hvl-mini__tekst { padding: 14px 18px 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.hvl-mini__tekst h3 { font: 700 18px/1.25 var(--f-kop); }
.hvl-mini__tekst h3 a { color: var(--encre); text-decoration: none; }
.hvl-mini__tekst h3 a::after { content: ""; position: absolute; inset: 0; }
.hvl-mini .hvl-kaart__meta { margin: 0; }

/* 4. Meetlat */
.hvl-sec--lat { background: var(--bankirai); color: var(--papier); }
.hvl-lat { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.hvl-sec--lat h2 { color: #fff; }
.hvl-lat__tekst p { color: #E4DCCB; }
.hvl-sec--lat a { color: var(--lariks-licht); }
/* De klassen 1 tot 5 en de pennen liggen in eigen vakken die ruimer zijn dan hun inhoud : niets steekt buiten zijn kader.
   De klasse k (0 tot 1 over de lat) ligt op dezelfde plek in de balk (marge 20 px) en in de pennenlijst (marge 48 px). */
.hvl-lat__meet { position: relative; height: 240px; --ins: 56px; }
.hvl-lat__balk { position: absolute; left: calc(var(--ins) - 20px); right: calc(var(--ins) - 20px); top: 94px; height: 52px; background: var(--lariks); border-radius: 6px; box-shadow: 0 6px 0 rgba(0, 0, 0, .25); }
.hvl-lat__klasse { --k: 0; position: absolute; top: 0; bottom: 0; left: calc(20px + (100% - 40px) * var(--k)); width: 28px; margin-left: -14px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px; }
.hvl-lat__klasse:nth-child(2) { --k: .25; }
.hvl-lat__klasse:nth-child(3) { --k: .5; }
.hvl-lat__klasse:nth-child(4) { --k: .75; }
.hvl-lat__klasse:nth-child(5) { --k: 1; }
.hvl-lat__klasse::before { content: ""; position: absolute; left: 50%; margin-left: -1px; top: 0; width: 2px; height: 22px; background: var(--bankirai); }
.hvl-lat__klasse b { display: block; font: 800 20px/1 var(--f-kop); color: var(--bankirai); }
.hvl-lat__pennen { position: absolute; left: calc(var(--ins) - 48px); right: calc(var(--ins) - 48px); top: 0; bottom: 0; list-style: none; margin: 0; padding: 0; }
.hvl-pen { --k: 0; position: absolute; left: calc(48px + (100% - 96px) * var(--k)); transform: translateX(-50%); margin: 0; text-align: center; }
.hvl-pen a { display: flex; flex-direction: column; align-items: center; gap: 2px; text-decoration: none; color: #fff; white-space: nowrap; }
.hvl-pen__naam { font: 800 19px/1.15 var(--f-kop); }
.hvl-pen__klasse { font: 500 14px/1.2 var(--f-tekst); color: var(--lariks-licht); }
.hvl-pen a::after { content: ""; display: block; width: 6px; height: 22px; background: #fff; border-radius: 3px; }
.hvl-pen--boven { bottom: 146px; }
.hvl-pen--onder { top: 148px; }
.hvl-lat__noot { font-size: 15px; line-height: 1.5; color: #E4DCCB; margin-top: 14px; }
.hvl-pen--onder a { flex-direction: column-reverse; }
.hvl-pen a:hover .hvl-pen__naam { text-decoration: underline; }

/* 5. Houtstapel */
.hvl-stapel { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.hvl-stam { display: flex; flex-direction: column; background: var(--wit); border-radius: 12px; overflow: hidden; text-decoration: none; color: var(--encre); box-shadow: var(--schaduw); transition: transform .25s, box-shadow .25s; }
.hvl-stam:hover { transform: translateY(-4px); color: var(--encre); box-shadow: 0 1px 0 rgba(43, 29, 20, .06), 0 16px 30px rgba(43, 29, 20, .16); }
.hvl-stam__foto { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.hvl-stam__foto img, .hvl-stam__foto .hvl-leeg { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.hvl-stam:hover .hvl-stam__foto img { transform: scale(1.03); }
.hvl-stam__kop { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 12px; padding: 16px 16px 18px; align-items: center; }
.hvl-stam__ringen { grid-row: 1 / 3; width: 40px; height: 40px; }
.hvl-stam__naam { font: 800 18px/1.2 var(--f-kop); }
.hvl-stam__aantal { font: 500 14px/1.3 var(--f-tekst); color: var(--encre-2); }
.hvl-stam__kop { grid-template-columns: 40px minmax(0, 1fr); }

/* 6. Stappenplan */
.hvl-sec--stappen { background: var(--vergrijsd); }
.hvl-lopen { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 16px; list-style: none; margin: 0; padding: 0; counter-reset: geen; }
.hvl-loop { position: relative; display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0 0 8px; background: var(--wit); border-radius: 8px; overflow: hidden; box-shadow: var(--schaduw); border-bottom: 5px solid var(--joint); }
.hvl-loop__foto { display: block; aspect-ratio: 3 / 2; overflow: hidden; }
.hvl-loop__foto img, .hvl-loop__foto .hvl-leeg { width: 100%; height: 100%; object-fit: cover; }
.hvl-loop__nr { position: absolute; left: 12px; top: 12px; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: 0; background: var(--lariks); color: var(--encre); font: 800 18px/1 var(--f-kop); box-shadow: inset 0 0 0 3px rgba(43, 29, 20, .18), 0 3px 8px rgba(43, 29, 20, .3); }
.hvl-loop__naam { padding: 12px 14px 0; font: 800 18px/1.25 var(--f-kop); }
.hvl-loop__tekst { padding: 0 14px 10px; font: 400 15px/1.5 var(--f-tekst); color: var(--encre-2); }

/* 8. Werkbank */
.hvl-sec--werkbank { position: relative; background: var(--bankirai); color: var(--papier); overflow: hidden; padding: 64px 0; }
.hvl-werkbank__foto { position: absolute; inset: 0 0 0 58%; opacity: .55; }
.hvl-werkbank__foto img, .hvl-werkbank__foto .hvl-leeg { width: 100%; height: 100%; object-fit: cover; }
.hvl-werkbank__foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--bankirai) 0%, rgba(43, 29, 20, 0) 55%); }
.hvl-werkbank { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: start; }
.hvl-sec--werkbank h2 { color: #fff; }
.hvl-werkbank__tekst p { color: #E4DCCB; font-size: 19px; }
.hvl-werkbank__noten { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.hvl-werkbank__noten li { display: flex; align-items: center; gap: 10px; margin: 0; padding: 0; color: #E4DCCB; font-size: 16px; line-height: 1.4; }
.hvl-werkbank__noten svg { flex: none; width: 20px; height: 20px; color: var(--lariks-licht); }

/* 9. Redactie */
.hvl-redactie { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: center; }
.hvl-methode { list-style: none; margin: 22px 0; padding: 0; display: grid; gap: 14px; }
.hvl-methode li { margin: 0; padding: 0 0 0 20px; border-left: 5px solid var(--groen); font-size: 17px; line-height: 1.5; }
.hvl-methode strong { display: block; font: 700 18px/1.3 var(--f-kop); }
.hvl-redactie__links { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0; }
.hvl-redactie__mensen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.hvl-persoonkaart { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--encre); }
.hvl-persoonkaart:hover { color: var(--encre); }
.hvl-persoonkaart__naam { font: 800 20px/1.2 var(--f-kop); margin-top: 10px; }
.hvl-persoonkaart__rol { font: 500 14px/1.35 var(--f-tekst); color: var(--encre-2); }
.hvl-persoonkaart:hover .hvl-persoonkaart__naam { color: var(--groen-diep); text-decoration: underline; }

/* Portretten : rechthoekig met afgeschuinde hoek, nooit rond. Enige uitzondering : het kleine ronde vignet in de kop van een artikel. */
.hvl-portret { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--vergrijsd);
	clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%); }
.hvl-portret--klein { width: 56px; height: 56px; min-height: 0; aspect-ratio: 1; border-radius: 50%; clip-path: none; object-fit: cover; object-position: 50% 22%; flex: none; }
.hvl-portret--groot { max-width: 300px; }

/* ==========================================================================
   ARTIKEL
   ========================================================================== */
/* Leesbalk : op telefoon en tablet een dunne vaste lijn bovenaan het scherm, op een groot scherm zit de voortgang in het kleverige blok (.hvl-leesstand). */
.hvl-voortgang { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 80; pointer-events: none; }
.hvl-voortgang__balk { height: 100%; width: 100%; background: var(--groen); transform: scaleX(0); transform-origin: 0 50%; }
/* De kop van het artikel begint direct onder het menu (24 px lucht, geen leeg vlak). */
.hvl-akop { position: relative; background: var(--vergrijsd); padding: 24px 0 56px; overflow: hidden; }
.hvl-akop__raster { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 46%); gap: 56px; align-items: start; }
.hvl-akop__labels { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.hvl-atitel { font-weight: 800; font-size: 52px; line-height: 1.08; letter-spacing: -.01em; margin-bottom: 18px; }
.hvl-alead { font-size: 20px; line-height: 1.55; color: var(--encre-2); max-width: 34em; }
.hvl-ameta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 22px; }
.hvl-ameta__wie { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--encre); }
.hvl-ameta__wie span { display: flex; flex-direction: column; line-height: 1.3; }
.hvl-ameta__wie strong { font: 700 17px/1.3 var(--f-tekst); }
.hvl-ameta__wie small { font: 500 14px/1.3 var(--f-tekst); color: var(--encre-2); }
.hvl-ameta__wie:hover strong { text-decoration: underline; }
.hvl-ameta__data { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; font: 500 14px/1.5 var(--f-tekst); color: var(--encre-2); }
.hvl-akop__beeldkolom { width: 100%; max-width: 520px; justify-self: end; }
.hvl-akop__foto { position: relative; margin: 0; aspect-ratio: 4 / 3; max-height: 390px; box-shadow: var(--schaduw-groot); border-radius: 10px; }
.hvl-akop__beeld { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; display: block; }
.hvl-brandmerk { position: absolute; right: 12px; top: 12px; padding: 5px 10px; border-radius: 6px; background: rgba(43, 29, 20, .78); color: var(--lariks-licht); font: 700 14px/1 var(--f-stempel); }
.hvl-akop__foto .hvl-credit { right: auto; left: 12px; }
.hvl-tenon { position: absolute; left: 44px; bottom: -26px; width: 28px; height: 34px; background: var(--lariks); border-radius: 3px 3px 0 0; box-shadow: inset 0 0 0 2px rgba(43, 29, 20, .22); z-index: 2; }
.hvl-fiche { position: relative; margin-top: 18px; background: var(--wit); border-radius: 10px; box-shadow: var(--schaduw); padding: 18px 22px 8px; }
.hvl-fiche::before { content: ""; position: absolute; left: 41px; top: 0; width: 34px; height: 10px; background: rgba(43, 29, 20, .16); border-radius: 0 0 4px 4px; }
.hvl-fiche__kop { margin: 0 0 6px; font: 800 18px/1.2 var(--f-kop); }
.hvl-fiche dl { margin: 0; }
.hvl-fiche dl > div { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-top: 1px solid var(--vergrijsd); }
.hvl-fiche dt { font: 500 14px/1.45 var(--f-tekst); color: var(--encre-2); }
.hvl-fiche dd { margin: 0; font: 600 16px/1.45 var(--f-tekst); }
.hvl-fiche dd strong { font: 800 18px/1.3 var(--f-kop); color: var(--groen-diep); }
.hvl-fiche dd small { font: 500 14px/1.4 var(--f-tekst); color: var(--encre-2); }

/* Rij 1 : tekst + kleverige kolom (de kolom is even hoog als de tekst, zo kan het blok meeschuiven).
   Rij 2 : de signatuur van de auteur over de volle breedte, buiten de kolom, dus nooit overlap. */
.hvl-abody { display: grid; grid-template-columns: minmax(0, 1fr) 330px; column-gap: 40px; row-gap: 0; align-items: start; max-width: calc(1128px + 2 * var(--rand)); padding-block: 40px 72px; }
.hvl-acol { min-width: 0; grid-column: 1; grid-row: 1; }
.hvl-aauteur { grid-column: 1 / -1; grid-row: 2; min-width: 0; }
.hvl-tekst { background: var(--wit); border-radius: 12px; padding: 44px 48px; box-shadow: var(--schaduw); max-width: 100%; overflow-wrap: break-word; }
.hvl-tekst > *:first-child { margin-top: 0; }
.hvl-tekst > *:last-child { margin-bottom: 0; }
.hvl-tekst p { margin: 0 0 1.15em; }
.hvl-tekst h2 { font-weight: 700; font-size: 34px; line-height: 1.15; margin: 1.9em 0 .6em; }
.hvl-tekst h3 { font: 600 22px/1.3 var(--f-tekst); margin: 1.6em 0 .5em; }
.hvl-tekst > h2:first-child { margin-top: 0; }
.hvl-tekst ul, .hvl-tekst ol { margin: 0 0 1.2em; }
.hvl-tekst li { margin: 0 0 .4em; }
.hvl-tekst img { border-radius: 10px; }
.hvl-tekst blockquote { margin: 1.6em 0; padding: 4px 0 4px 22px; border-left: 5px solid var(--lariks); font-size: 20px; color: var(--encre); }
.hvl-tekst table { width: 100%; border-collapse: collapse; font-size: 16px; min-width: 480px; }
.hvl-tekst th, .hvl-tekst td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--vergrijsd); vertical-align: top; }
.hvl-tekst th { font: 600 15px/1.3 var(--f-tekst); background: var(--vergrijsd); }
.sbs_tableau { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 1.4em; border-radius: 8px; }
.hvl-tekst--pagina { max-width: 820px; }

.hvl-intro { font-size: 21px; line-height: 1.55; color: var(--encre); }

/* Blokken in de tekst */
.hvl-kader, .hvl-letop { position: relative; margin: 1.8em 0; padding: 22px 26px 8px 32px; border-radius: 4px 10px 10px 4px; }
.hvl-kader { background: var(--mos); border-left: 6px solid var(--groen);
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.hvl-kader::before { content: ""; position: absolute; left: -6px; top: 0; border-top: 14px solid var(--papier); border-right: 14px solid transparent; }
.hvl-kader__titel, .hvl-letop__titel { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font: 800 19px/1.3 var(--f-kop); }
.hvl-kader__titel { color: var(--groen-diep); }
.hvl-kader__titel::before { content: ""; width: 22px; height: 22px; flex: none; background: var(--groen-diep);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19c0-8 5-13 14-14 0 9-5 14-13 14M5 19c3-4 6-7 10-9'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19c0-8 5-13 14-14 0 9-5 14-13 14M5 19c3-4 6-7 10-9'/%3E%3C/svg%3E") center / contain no-repeat; }
.hvl-letop { background: var(--roest-licht); border-left: 6px solid var(--roest); }
.hvl-letop__titel { color: var(--roest); }
.hvl-letop__titel::before { content: ""; width: 0; height: 0; flex: none; border-left: 11px solid transparent; border-right: 11px solid transparent; border-bottom: 19px solid var(--roest); }
.hvl-kader p:not([class]), .hvl-letop p:not([class]) { margin: 0 0 1em; font-size: 17px; line-height: 1.6; }

.hvl-tekst ol.hvl-stappen { list-style: none; margin: 1.8em 0; padding: 0; counter-reset: stap; display: grid; gap: 0; }
.hvl-stappen li { position: relative; counter-increment: stap; margin: 0; padding: 18px 20px 18px 74px; background: var(--vergrijsd); border-bottom: 5px solid var(--joint); border-radius: 6px; line-height: 1.55; }
.hvl-stappen li + li { margin-top: 0; }
.hvl-stappen li::before { content: counter(stap); position: absolute; left: 18px; top: 16px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--lariks); color: var(--encre); font: 800 20px/1 var(--f-kop); box-shadow: inset 0 0 0 3px rgba(43, 29, 20, .2); }
.hvl-stappen strong { display: block; font: 800 19px/1.3 var(--f-kop); margin-bottom: 2px; }

.hvl-feiten { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 10px; margin: 1.8em 0; container-type: inline-size; }
.hvl-feit { display: flex; flex-direction: column; gap: 6px; padding: 18px 14px 16px; background: var(--bankirai); border-radius: 8px; min-width: 0; }
.hvl-feit__getal { font: 800 26px/1.1 var(--f-kop); color: var(--lariks-licht); overflow-wrap: normal; word-break: normal; hyphens: none; }
@supports (font-size: 1cqw) { .hvl-feit__getal { font-size: clamp(22px, 3.8cqw, 32px); } }
.hvl-feit__label { font: 400 15px/1.4 var(--f-tekst); color: rgba(255, 255, 255, .85); }

.hvl-vergelijk { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 1.8em 0; }
.hvl-optie { padding: 22px 24px 8px; border-radius: 8px; color: #fff; }
.hvl-optie:nth-child(1) { background: var(--groen); }
.hvl-optie:nth-child(2) { background: var(--encre); }
.hvl-optie h3 { margin: 0 0 8px; font: 800 21px/1.25 var(--f-kop); color: #fff; }
.hvl-optie p { color: rgba(255, 255, 255, .94); font-size: 17px; }
.hvl-optie a { color: #fff; font-weight: 700; text-decoration: underline; text-decoration-color: var(--lariks); text-underline-offset: 3px; }
.hvl-vergelijk::after { content: "vs"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--lariks); color: var(--encre); font: 800 16px/1 var(--f-kop); box-shadow: 0 0 0 5px var(--wit); }
/* De « vs »-ronde hoort bij een vergelijking in een artikel, niet op een gewone pagina. */
.hvl-tekst--pagina .hvl-vergelijk::after, .hvl-pbody .hvl-vergelijk::after { display: none; }

.hvl-faq { margin: 2.4em 0 1em; }
.hvl-faq h2 { margin: 0 0 .5em; }
.hvl-faq details { border-bottom: 2px solid var(--vergrijsd); }
.hvl-faq details[open] { background: var(--vergrijsd); border-radius: 6px; border-bottom-color: transparent; }
.hvl-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 12px; font: 600 19px/1.35 var(--f-tekst); cursor: pointer; list-style: none; }
.hvl-faq summary::-webkit-details-marker { display: none; }
.hvl-faq summary::after { content: ""; width: 22px; height: 22px; flex: none; background: currentColor; transition: transform .2s;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; }
.hvl-faq details[open] summary::after { transform: rotate(180deg); }
.hvl-faq details > :not(summary) { padding: 0 12px; }
.hvl-faq details > p:last-child { padding-bottom: 14px; margin-bottom: 0; }

.hvl-bronnen { position: relative; margin: 2.4em 0 0; padding: 22px 26px 12px; background: var(--vergrijsd); border-radius: 6px; clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%); }
.hvl-bronnen h2 { font: 800 21px/1.3 var(--f-kop); margin: 0 0 10px; }
.hvl-bronnen ul { margin: 0; padding-left: 1.1em; font-size: 15px; line-height: 1.55; }
.hvl-bronnen li { margin: 0 0 .55em; }

/* Auteursblok en zijbalk */
.hvl-auteurblok { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 24px; align-items: start; margin-top: 28px; padding: 26px; background: var(--wit); border-radius: 12px; box-shadow: var(--schaduw); }
.hvl-auteurblok .hvl-portret { max-width: 110px; clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%); }
.hvl-auteurblok__naam { margin: 0; font: 800 22px/1.2 var(--f-kop); }
.hvl-auteurblok__naam a { color: var(--encre); text-decoration: none; }
.hvl-auteurblok__naam a:hover { text-decoration: underline; }
.hvl-auteurblok__rol { margin: 2px 0 10px; font: 500 14px/1.4 var(--f-tekst); color: var(--encre-2); }
.hvl-auteurblok p { font-size: 16px; line-height: 1.55; }
.hvl-auteurblok__meer { margin: 0; }
.hvl-auteurblok__meer a { font-weight: 600; text-decoration: none; }
.hvl-sponsornoot { margin: 22px 0 0; padding: 14px 18px; border-left: 5px solid var(--roest); background: var(--roest-licht); border-radius: 4px; font-size: 15px; }

.hvl-zij { min-width: 0; }
.hvl-zij__vast { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 16px; }
.hvl-inhoud { padding: 20px 22px; background: var(--wit); border-radius: 12px; box-shadow: var(--schaduw); }
.hvl-inhoud__titel { margin: 0 0 10px; font: 800 18px/1.2 var(--f-kop); }
.hvl-inhoud__lijst, .hvl-minhoud__lijst { list-style: none; margin: 0; padding: 0; position: relative; }
.hvl-inhoud__lijst li, .hvl-minhoud__lijst li { margin: 0; }
.hvl-inhoud__lijst a, .hvl-minhoud__lijst a { display: block; padding: 6px 0 6px 14px; border-left: 3px solid var(--vergrijsd); font: 500 15px/1.4 var(--f-tekst); color: var(--encre); text-decoration: none; }
.hvl-inhoud__lijst a:hover, .hvl-minhoud__lijst a:hover { color: var(--groen-diep); }
.hvl-inhoud__lijst a.is-actief, .hvl-minhoud__lijst a.is-actief { border-left-color: var(--groen); color: var(--groen-diep); font-weight: 600; }
.hvl-inhoud-mob { display: none; margin-bottom: 18px; background: var(--wit); border-radius: 12px; box-shadow: var(--schaduw); }
.hvl-inhoud-mob summary { display: flex; align-items: center; gap: 12px; padding: 14px 20px; font: 800 18px/1.2 var(--f-kop); cursor: pointer; list-style: none; }
.hvl-inhoud-mob summary::-webkit-details-marker { display: none; }
.hvl-inhoud-mob__rest { margin-left: auto; font: 500 14px/1.2 var(--f-tekst); color: var(--encre-2); }
.hvl-inhoud-mob summary .hvl-icoon { transition: transform .2s; }
.hvl-inhoud-mob[open] summary .hvl-icoon { transform: rotate(180deg); }
.hvl-inhoud-mob .hvl-inhoud { box-shadow: none; padding-top: 0; }
.hvl-inhoud-mob .hvl-inhoud__titel { display: none; }

/* Artikel, grote schermen : één kleverig blok (inhoud + leesvoortgang), korter dan het scherm, met scrollbare lijst. */
.hvl-zij--artikel { align-self: stretch; grid-column: 2; grid-row: 1; }
.hvl-zij--artikel .hvl-zij__vast { top: 84px; gap: 0; max-height: calc(100vh - 104px); padding: 20px 22px 18px; background: var(--wit); border-radius: 12px; box-shadow: var(--schaduw); }
.hvl-zij--artikel .hvl-inhoud { display: flex; flex-direction: column; flex: 0 1 auto; min-height: 0; padding: 0; background: none; box-shadow: none; border-radius: 0; }
.hvl-zij--artikel .hvl-inhoud__lijst { flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.hvl-leesstand { flex: none; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--vergrijsd); }
.hvl-zij--artikel .hvl-zij__vast > .hvl-leesstand:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.hvl-leesstand__tijd { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font: 600 15px/1.3 var(--f-tekst); color: var(--encre); }
.hvl-leesstand__tijd .hvl-icoon { color: var(--groen-diep); }
.hvl-leesstand__voortgang { height: 6px; border-radius: 999px; background: var(--vergrijsd); overflow: hidden; }
.hvl-leesstand__vulling { display: block; height: 100%; width: 100%; border-radius: 999px; background: var(--groen); transform: scaleX(0); transform-origin: 0 50%; }
.hvl-zijform { flex: none; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--vergrijsd); }
.hvl-zijform__kop { margin: 0 0 8px; font: 800 17px/1.25 var(--f-kop); color: var(--encre); }
@media (min-width: 1024px) {
	.hvl-voortgang { display: none; }
}
@media (max-width: 1023px) {
	.hvl-abody { grid-template-columns: minmax(0, 1fr); gap: 0; padding-block: 32px 56px; }
	.hvl-acol, .hvl-aauteur { grid-column: 1; }
	.hvl-zij--artikel { display: none; }
	.hvl-inhoud-mob { display: block; }
}

.hvl-lire-aussi { background: var(--vergrijsd); padding: 64px 0 72px; }
.hvl-lire-aussi h2 { font-weight: 700; font-size: 34px; margin-bottom: 28px; }

/* ==========================================================================
   RUBRIEK, AUTEUR, PAGINA'S
   ========================================================================== */
.hvl-rkop, .hvl-fkop, .hvl-pkop { position: relative; background: var(--vergrijsd); padding: 48px 0 56px; overflow: hidden; }
.hvl-rkop__raster { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 52%); gap: 56px; align-items: center; }
.hvl-rtitel { font-weight: 800; font-size: 52px; line-height: 1.08; letter-spacing: -.01em; margin-bottom: 14px; }
.hvl-rlead { font-size: 20px; line-height: 1.55; color: var(--encre-2); max-width: 34em; }
.hvl-rtelling { margin: 0; font: 500 15px/1.4 var(--f-tekst); color: var(--encre-2); }
.hvl-rtelling strong { font: 800 20px/1 var(--f-kop); color: var(--encre); }
.hvl-byline { margin: 10px 0 0; font: 500 15px/1.4 var(--f-tekst); color: var(--encre-2); }
.hvl-byline a { color: var(--encre); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.hvl-rkop__stapel { position: relative; }
.hvl-rkop__foto { aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; box-shadow: var(--schaduw-groot); }
.hvl-rkop__foto img, .hvl-rkop__foto .hvl-leeg { width: 100%; height: 100%; object-fit: cover; }
.hvl-balken { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: -26px 14px 0; padding: 0; position: relative; z-index: 2; }
.hvl-balk { margin: 0; }
.hvl-balk a { display: flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; border-radius: 8px 6px 6px 8px; background: var(--wit); color: var(--encre); font: 600 14px/1.2 var(--f-tekst); text-decoration: none; box-shadow: 0 6px 14px rgba(43, 29, 20, .16); }
.hvl-balk a:hover { background: var(--mos); color: var(--encre); }
.hvl-balk .hvl-ringen { width: 30px; height: 30px; }
.hvl-balk.is-actief a { background: var(--bankirai); color: #fff; }
.hvl-sec--rraster { padding: 56px 0 72px; }
.hvl-sec--top { background: var(--vergrijsd); padding: 56px 0; }
.hvl-sec--top h2 { margin-bottom: 22px; }
.hvl-toplijst { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.hvl-toplijst li { display: flex; align-items: center; gap: 14px; margin: 0; padding: 16px 18px; background: var(--wit); border-radius: 10px; box-shadow: var(--schaduw); font: 700 18px/1.3 var(--f-kop); }
.hvl-toplijst a { color: var(--encre); text-decoration: none; }
.hvl-toplijst a:hover { color: var(--groen-diep); text-decoration: underline; }
.hvl-toplijst__nr { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--lariks); color: var(--encre); font: 800 18px/1 var(--f-kop); }
.hvl-sec--rtekst { padding: 56px 0 80px; }
.hvl-uitleg { background: var(--wit); border-radius: 12px; box-shadow: var(--schaduw); }
.hvl-uitleg summary { display: flex; align-items: center; justify-content: space-between; padding: 20px 26px; font: 800 22px/1.2 var(--f-kop); cursor: pointer; list-style: none; }
.hvl-uitleg summary::-webkit-details-marker { display: none; }
.hvl-uitleg[open] summary .hvl-icoon { transform: rotate(180deg); }
.hvl-uitleg__tekst { padding: 0 26px 12px; }

.hvl-fkop__raster { position: relative; display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 48px; align-items: center; }
.hvl-fkop__rol { margin: 0 0 12px; font: 600 16px/1.4 var(--f-tekst); color: var(--groen-diep); }

.hvl-pkop__raster { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; }
.hvl-pagina--over-ons .hvl-pkop__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 42%); }
.hvl-pkop__foto { aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; box-shadow: var(--schaduw-groot); }
.hvl-pkop__foto img, .hvl-pkop__foto .hvl-leeg { width: 100%; height: 100%; object-fit: cover; }
.hvl-pbody { padding-block: 56px 80px; display: block; }
.hvl-pbody--toc { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; align-items: start; }
.hvl-pbody .hvl-tekst { margin: 0 auto; }
.hvl-pbody--toc .hvl-tekst { margin: 0; }

/* Ons team */
.hvl-team { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 2em 0; }
.hvl-persoon { display: flex; flex-direction: column; gap: 14px; }
.hvl-persoon__portret { width: 100%; max-width: 300px; aspect-ratio: 4 / 5; object-fit: cover; background: var(--vergrijsd);
	clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%); }
.hvl-persoon__tekst h3 { margin: 0 0 2px; font: 800 24px/1.2 var(--f-kop); }
.hvl-persoon__rol { margin: 0 0 8px; font: 600 15px/1.4 var(--f-tekst); color: var(--groen-diep); }
.hvl-persoon__tekst p { font-size: 17px; }
.hvl-tekst .hvl-persoon h3 { margin-top: 0; }

/* Contact */
.hvl-contact { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: start; padding-block: 36px 16px; }
.hvl-contact__form { padding: 26px 32px 28px; background: var(--wit); border-radius: 12px; box-shadow: var(--schaduw); }
/* Contactpagina : korte kop en compact formulier, zodat de verzendknop zonder scrollen in beeld staat. */
.hvl-pagina--contact .hvl-pkop { padding: 34px 0 34px; }
.hvl-pagina--contact .hvl-kruim { margin-bottom: 12px; }
.hvl-pagina--contact .hvl-rtitel { font-size: 44px; margin-bottom: 8px; }
.hvl-pagina--contact .hvl-rlead { margin: 0; font-size: 18px; line-height: 1.45; }
.hvl-form.hvl-form--groot { gap: 12px; }
.hvl-form--groot .hvl-veld input[type="text"], .hvl-form--groot .hvl-veld input[type="email"], .hvl-form--groot .hvl-veld textarea { padding: 10px 14px; }
.hvl-form--groot .hvl-veld textarea { min-height: 0; }
.hvl-form--groot .hvl-form__status:empty { display: none; }
.hvl-contact__foto { aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; box-shadow: var(--schaduw-groot); }
.hvl-contact__foto img, .hvl-contact__foto .hvl-leeg { width: 100%; height: 100%; object-fit: cover; }
.hvl-contact__gegevens { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; }
.hvl-contact__gegevens li { display: flex; align-items: flex-start; gap: 12px; margin: 0; font-size: 17px; }
.hvl-contact__gegevens .hvl-icoon { margin-top: .25em; color: var(--groen-diep); }

/* 404 en zoeken */
.hvl-fout { padding: 64px 0 88px; }
.hvl-fout__raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 46%); gap: 56px; align-items: center; }
.hvl-fout__code { margin: 0 0 6px; font: 700 28px/1 var(--f-stempel); color: var(--roest); }
.hvl-fout__foto { aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; box-shadow: var(--schaduw-groot); }
.hvl-fout__foto img, .hvl-fout__foto .hvl-leeg { width: 100%; height: 100%; object-fit: cover; }
.hvl-fout__rubrieken { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.hvl-fout__rubrieken li { margin: 0; }
.hvl-fout__rubrieken a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 10px; background: var(--vergrijsd); color: var(--encre); font: 600 15px/1.2 var(--f-tekst); text-decoration: none; }
.hvl-fout__rubrieken a:hover { background: var(--mos); }
.hvl-zoekform { margin: 20px 0 0; max-width: 640px; }
.hvl-zoekform__label { display: block; margin-bottom: 8px; font: 600 15px/1.3 var(--f-tekst); }
.hvl-zoekform__rij { display: flex; gap: 10px; }
.hvl-zoekform input[type="search"] { flex: 1; min-width: 0; height: 52px; padding: 0 16px; border: 2px solid #B9B19D; border-radius: 10px; background: #fff; color: var(--encre); font: 400 17px var(--f-tekst); }
.hvl-zoekform input[type="search"]:focus { border-color: var(--groen); outline: none; box-shadow: 0 0 0 3px var(--mos); }

/* ---------- Formulieren ---------- */
.hvl-form { display: grid; gap: 14px; }
.hvl-form__rij { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.hvl-veld { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.hvl-veld label { font: 600 15px/1.3 var(--f-tekst); }
.hvl-veld input[type="text"], .hvl-veld input[type="email"], .hvl-veld textarea {
	width: 100%; padding: 13px 14px; border: 2px solid #B9B19D; border-radius: 10px; background: #fff; color: var(--encre); font: 400 17px/1.4 var(--f-tekst);
}
.hvl-veld textarea { resize: vertical; min-height: 110px; }
.hvl-veld input:focus, .hvl-veld textarea:focus { border-color: var(--groen); outline: none; box-shadow: 0 0 0 3px var(--mos); }
.hvl-veld--akkoord label { display: flex; align-items: flex-start; gap: 10px; font: 400 14px/1.45 var(--f-tekst); }
.hvl-veld--akkoord input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--groen); }
.hvl-val { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.hvl-form__status { margin: 0; min-height: 1.5em; font: 600 15px/1.4 var(--f-tekst); color: var(--groen-diep); }
.hvl-form__status.is-fout { color: var(--roest); }
.hvl-form .hvl-knop { justify-self: start; }
.hvl-form--compact { gap: 10px; }
.hvl-form--compact .hvl-form__rij { grid-template-columns: 1fr; gap: 10px; }
.hvl-form--compact .hvl-veld label { font-size: 14px; }
.hvl-form--compact .hvl-veld input[type="text"], .hvl-form--compact .hvl-veld input[type="email"], .hvl-form--compact .hvl-veld textarea { padding: 9px 12px; font-size: 16px; }
.hvl-form--compact .hvl-veld textarea { min-height: 70px; }
.hvl-form--compact .hvl-veld--akkoord label { font-size: 13px; }
.hvl-form--compact .hvl-knop { min-height: 44px; padding: 10px 20px; }
.hvl-form--donker .hvl-veld label, .hvl-form--donker .hvl-veld--akkoord label { color: #fff; }
.hvl-form--donker .hvl-veld--akkoord a { color: var(--lariks-licht); }
.hvl-form--donker .hvl-knop { background: var(--lariks); color: var(--encre); }
.hvl-form--donker .hvl-knop:hover { background: var(--lariks-licht); }
.hvl-form--donker .hvl-form__status { color: var(--lariks-licht); }

/* ---------- Voet ---------- */
.hvl-voet { background: var(--bankirai); color: #E4DCCB; margin-top: 0; }
.hvl-voet__latten { display: flex; height: 14px; }
.hvl-voet__latten i { display: block; flex: 1 1 0; }
.hvl-voet__latten i:nth-child(12n+1) { background: #8C5C35; flex-grow: 3; }
.hvl-voet__latten i:nth-child(12n+2) { background: #C79A64; flex-grow: 2; }
.hvl-voet__latten i:nth-child(12n+3) { background: var(--lariks); flex-grow: 4; }
.hvl-voet__latten i:nth-child(12n+4) { background: #6B4423; flex-grow: 2; }
.hvl-voet__latten i:nth-child(12n+5) { background: #AB7648; flex-grow: 3; }
.hvl-voet__latten i:nth-child(12n+6) { background: #D9B887; flex-grow: 1; }
.hvl-voet__latten i:nth-child(12n+7) { background: #7C4E2D; flex-grow: 4; }
.hvl-voet__latten i:nth-child(12n+8) { background: var(--groen); flex-grow: 2; }
.hvl-voet__latten i:nth-child(12n+9) { background: #9C6B43; flex-grow: 3; }
.hvl-voet__latten i:nth-child(12n+10) { background: #C79A64; flex-grow: 1; }
.hvl-voet__latten i:nth-child(12n+11) { background: #8C5C35; flex-grow: 3; }
.hvl-voet__latten i:nth-child(12n+12) { background: var(--lariks); flex-grow: 2; }
.hvl-voet__raster { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 40px; padding-block: 56px 48px; align-items: start; }
.hvl-voet a { color: #F1E8D6; text-decoration: none; }
.hvl-voet a:hover { color: var(--lariks-licht); text-decoration: underline; }
.hvl-voet .hvl-merk { color: #fff; margin-bottom: 14px; }
.hvl-voet .hvl-merk__beeld { width: 52px; height: 52px; }
.hvl-voet .hvl-merk__naam { font-size: 26px; }
.hvl-voet__kol p { font-size: 16px; line-height: 1.6; margin-bottom: .8em; }
.hvl-voet__domein { font: 700 15px/1.2 var(--f-stempel); color: var(--lariks-licht); }
.hvl-voet__kop { margin: 0 0 14px; font: 800 18px/1.2 var(--f-kop); color: #fff; }
.hvl-voet ul { list-style: none; margin: 0; padding: 0; }
.hvl-voet li { margin: 0 0 9px; font-size: 16px; }
.hvl-voet__contact li { display: flex; align-items: center; gap: 10px; }
.hvl-voet__contact .hvl-icoon { color: var(--lariks-licht); }
.hvl-voet__klein { font-size: 14px !important; color: #CDBFA6; }
.hvl-voet__onder { border-top: 1px solid rgba(255, 255, 255, .14); }
.hvl-voet__onderbalk { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; padding-block: 18px; font-size: 14px; color: #CDBFA6; }
.hvl-voet__onderbalk p { margin: 0; }

/* ==========================================================================
   RESPONSIEF
   ========================================================================== */
@media (min-width: 1700px) {
	.hvl-hero { height: 640px; }
	.hvl-hero__tekst { padding-top: 144px; }
}

@media (max-width: 1100px) {
	.hvl-staal { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	/* Vijf kaarten op zes kolommen : drie boven, twee onder over de volle breedte, zonder gat. */
	.hvl-stapel, .hvl-lopen { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.hvl-stam, .hvl-loop { grid-column: span 2; }
	.hvl-stam:nth-child(4), .hvl-stam:nth-child(5), .hvl-loop:nth-child(4), .hvl-loop:nth-child(5) { grid-column: span 3; }
	.hvl-lopen[style*="--n:3"] .hvl-loop, .hvl-lopen[style*="--n: 3"] .hvl-loop { grid-column: span 2; }
	.hvl-lopen[style*="--n:4"] .hvl-loop, .hvl-lopen[style*="--n: 4"] .hvl-loop { grid-column: span 3; }
	.hvl-lopen[style*="--n:6"] .hvl-loop { grid-column: span 2; }
	.hvl-raster--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hvl-voet__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
	.hvl-raster--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hvl-zij__vast { position: static; }
	.hvl-akop__raster, .hvl-rkop__raster, .hvl-fout__raster, .hvl-contact, .hvl-redactie, .hvl-werkbank, .hvl-lat, .hvl-vers { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.hvl-akop__beeldkolom { justify-self: stretch; max-width: none; }
	.hvl-akop__foto { max-height: none; }
	.hvl-atitel, .hvl-rtitel { font-size: 40px; }
	.hvl-pbody--toc { grid-template-columns: minmax(0, 1fr); }
	.hvl-pbody--toc .hvl-zij { display: none; }
	.hvl-pagina--over-ons .hvl-pkop__raster { grid-template-columns: minmax(0, 1fr); }
	.hvl-werkbank__foto { inset: 0; opacity: .22; }
	.hvl-werkbank__foto::after { background: none; }
	.hvl-toplijst { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
	.hvl-hero { height: auto; margin-bottom: 0; display: flex; flex-direction: column; padding-top: 0; }
	.hvl-hero__foto {
		/* Op een telefoon staan de lames rechtop : de tanden zitten onderaan, om en om kort en lang, met dezelfde naad van 4 px. */
		--o0: 6px; --o1: 18px; --o2: 6px; --o3: 18px; --o4: 6px; --o5: 18px; --o6: 6px; --o7: 18px; --o8: 6px; --o-start: 26px; --d: 26px;
		position: relative; order: 1; left: 0; height: clamp(200px, 32vw, 300px); margin-top: 76px;
		clip-path: polygon(0 0, 100% 0,
			100% calc(100% - var(--o8)),
			calc(88.888% + 2px) calc(100% - var(--o8)), calc(88.888% + 2px) calc(100% - var(--d)), calc(88.888% - 2px) calc(100% - var(--d)), calc(88.888% - 2px) calc(100% - var(--o7)),
			calc(77.777% + 2px) calc(100% - var(--o7)), calc(77.777% + 2px) calc(100% - var(--d)), calc(77.777% - 2px) calc(100% - var(--d)), calc(77.777% - 2px) calc(100% - var(--o6)),
			calc(66.666% + 2px) calc(100% - var(--o6)), calc(66.666% + 2px) calc(100% - var(--d)), calc(66.666% - 2px) calc(100% - var(--d)), calc(66.666% - 2px) calc(100% - var(--o5)),
			calc(55.555% + 2px) calc(100% - var(--o5)), calc(55.555% + 2px) calc(100% - var(--d)), calc(55.555% - 2px) calc(100% - var(--d)), calc(55.555% - 2px) calc(100% - var(--o4)),
			calc(44.444% + 2px) calc(100% - var(--o4)), calc(44.444% + 2px) calc(100% - var(--d)), calc(44.444% - 2px) calc(100% - var(--d)), calc(44.444% - 2px) calc(100% - var(--o3)),
			calc(33.333% + 2px) calc(100% - var(--o3)), calc(33.333% + 2px) calc(100% - var(--d)), calc(33.333% - 2px) calc(100% - var(--d)), calc(33.333% - 2px) calc(100% - var(--o2)),
			calc(22.222% + 2px) calc(100% - var(--o2)), calc(22.222% + 2px) calc(100% - var(--d)), calc(22.222% - 2px) calc(100% - var(--d)), calc(22.222% - 2px) calc(100% - var(--o1)),
			calc(11.111% + 2px) calc(100% - var(--o1)), calc(11.111% + 2px) calc(100% - var(--d)), calc(11.111% - 2px) calc(100% - var(--d)), calc(11.111% - 2px) calc(100% - var(--o0)),
			0 calc(100% - var(--o0)));
	}
	/* Het crédit staat linksboven op de foto : onderaan zouden de tanden het wegsnijden. */
	.hvl-hero__foto .hvl-credit { right: auto; bottom: auto; left: 12px; top: 12px; }
	.hvl-rondel { left: auto; right: 14px; top: 14px; width: 104px; height: 104px; }
	.hvl-rondel p { font-size: 11px; padding: 0 10px; }
	.hvl-rondel strong { font-size: 13px; }
	.hvl-hero__tekst { order: 2; width: 100%; height: auto; padding: 16px var(--rand) 0; }
	.hvl-h1 { font-size: 36px; margin-bottom: 10px; }
	.hvl-hero__lead { font-size: 16px; line-height: 1.5; margin-bottom: 0; }
	.hvl-hero__punten { display: none; }
	.hvl-hero__kaart { order: 3; position: relative; left: auto; bottom: auto; width: auto; margin: 14px var(--rand) 0; }
	.hvl-sec--staal { padding-top: 56px; }
	.hvl-sec { padding: 56px 0; }
	.hvl-lat__meet { height: 236px; }
}

@media (max-width: 760px) {
	.hvl-sec__kop h2, .hvl-sec h2, .hvl-tekst h2, .hvl-lire-aussi h2 { font-size: 28px; }
	.hvl-staal { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px var(--rand) 16px; margin-inline: calc(-1 * var(--rand)); -webkit-overflow-scrolling: touch; }
	.hvl-staal .hvl-plank { flex: 0 0 62%; scroll-snap-align: start; }
	.hvl-stapel { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.hvl-stam, .hvl-stam:nth-child(4), .hvl-stam:nth-child(5) { grid-column: auto; }
	/* Een oneven laatste kaart staat niet alleen : volle breedte, foto links, tekst rechts. */
	.hvl-stam:last-child:nth-child(odd) { grid-column: 1 / -1; display: grid; grid-template-columns: 42% minmax(0, 1fr); align-items: stretch; }
	.hvl-stam:last-child:nth-child(odd) .hvl-stam__foto { aspect-ratio: auto; min-height: 120px; height: 100%; }
	.hvl-stam:last-child:nth-child(odd) .hvl-stam__kop { align-content: center; padding: 14px 16px; }
	.hvl-stam__kop { grid-template-columns: 1fr; padding: 12px; row-gap: 2px; }
	.hvl-stam__ringen { display: none; }
	.hvl-lopen, .hvl-lopen[style] { grid-template-columns: minmax(0, 1fr); }
	.hvl-loop, .hvl-loop:nth-child(4), .hvl-loop:nth-child(5), .hvl-lopen[style] .hvl-loop { grid-column: auto; }
	.hvl-loop { display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 14px; align-items: start; padding: 0 12px 0 0; }
	.hvl-loop__foto { grid-row: 1 / 3; aspect-ratio: auto; height: 100%; min-height: 110px; }
	.hvl-loop__naam { padding: 12px 0 0; }
	.hvl-loop__tekst { padding: 0 0 12px; }
	.hvl-mini { grid-template-columns: 110px minmax(0, 1fr); }
	.hvl-raster--3, .hvl-raster--4 { grid-template-columns: minmax(0, 1fr); }
	.hvl-vers__foto { height: 210px; }
	.hvl-vers__tekst h3 { font-size: 24px; }
	.hvl-tekst { padding: 28px 22px; }
	.hvl-vergelijk { grid-template-columns: minmax(0, 1fr); }
	.hvl-vergelijk::after { top: calc(50% + 0px); }
	.hvl-feiten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hvl-feit__getal, .hvl-feit:last-child .hvl-feit__getal { font-size: 24px; }
	.hvl-feit:last-child:nth-child(odd) { grid-column: 1 / -1; }
	.hvl-form__rij { grid-template-columns: minmax(0, 1fr); }
	.hvl-fkop__raster { grid-template-columns: minmax(0, 1fr); gap: 24px; }
	.hvl-portret--groot { max-width: 200px; }
	.hvl-team { grid-template-columns: minmax(0, 1fr); }
	.hvl-auteurblok { grid-template-columns: 84px minmax(0, 1fr); gap: 16px; padding: 18px; }
	.hvl-contact { padding-block: 16px 8px; gap: 24px; }
	.hvl-contact__form { padding: 16px 16px 18px; }
	.hvl-pagina--contact .hvl-pkop { padding: 16px 0 20px; }
	.hvl-pagina--contact .hvl-kruim, .hvl-pagina--contact .hvl-rlead { display: none; }
	.hvl-pagina--contact .hvl-rtitel { font-size: 30px; margin: 0; }
	.hvl-form.hvl-form--groot { gap: 10px; }
	.hvl-form--groot .hvl-veld textarea { height: 92px; }
	.hvl-form--groot .hvl-veld--akkoord label { font-size: 13px; line-height: 1.4; }
	.hvl-form--groot .hvl-knop { width: 100%; }
	.hvl-voet__raster { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-block: 40px 32px; }
	.hvl-pen__naam { font-size: 16px; }
	.hvl-pen__klasse { font-size: 12px; }
	.hvl-akop { padding: 20px 0 40px; }
	.hvl-akop__beeldkolom { margin-top: 4px; }
	.hvl-redactie__mensen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hvl-zoekform__rij { flex-direction: column; }
}

@media (max-width: 420px) {
	.hvl-hulp { padding: 18px 16px 20px; }
	.hvl-hulp__vraag { font-size: 21px; }
	.hvl-keuze { font-size: 15px; padding: 8px 8px; }
	.hvl-staal .hvl-plank { flex-basis: 74%; }
	.hvl-merk__naam { font-size: 20px; }
}

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

/* Formulier in de kleverige artikelkolom : compact, zodat de inhoudsopgave leesbaar blijft (na de basisregels van .hvl-veld). */
.hvl-zij--artikel .hvl-form--zij { gap: 8px; }
.hvl-zij--artikel .hvl-form--zij .hvl-form__rij { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.hvl-zij--artikel .hvl-form--zij .hvl-veld { gap: 3px; }
.hvl-zij--artikel .hvl-form--zij .hvl-veld label { font-size: 13px; }
.hvl-zij--artikel .hvl-form--zij .hvl-veld input[type="text"], .hvl-zij--artikel .hvl-form--zij .hvl-veld input[type="email"], .hvl-zij--artikel .hvl-form--zij .hvl-veld textarea { padding: 6px 10px; font-size: 15px; }
.hvl-zij--artikel .hvl-form--zij .hvl-veld textarea { min-height: 0; height: 56px; }
.hvl-zij--artikel .hvl-form--zij .hvl-veld--akkoord label { font-size: 12px; line-height: 1.35; gap: 8px; }
.hvl-zij--artikel .hvl-form--zij .hvl-veld--akkoord input { width: 16px; height: 16px; }
.hvl-zij--artikel .hvl-form--zij .hvl-knop { justify-self: stretch; justify-content: center; padding-block: 9px; }
.hvl-zij--artikel .hvl-form--zij .hvl-form__status:empty { display: none; }
.hvl-zij--artikel .hvl-inhoud__lijst { min-height: 140px; }