/*
Theme Name: VIB Jager / SDS Hunter 3.22.0
Theme URI: https://sdshunter.com/
Author: KISSIT B.V.
Author URI: https://sdshunter.com/
Description: Tweetalig (NL/EN) promotietheme voor het zelfstandige kaartspel VIB Jager / SDS Hunter. Licht, redactioneel ontwerp met serif-koppen op warm papier, aparte URL's per taal voor optimale indexering, GHS-pictogrampagina, korte spelregels, kaartengalerij, juridische pagina's, B2B-personalisatieaanvraag en spelersfeedback. Bij activatie worden alle pagina's, menu's en instellingen automatisch aangemaakt.
Version: 3.22.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vibjager
Tags: two-columns, custom-menu, translation-ready, block-styles, wide-blocks
*/

/* =========================================================
   1. Design tokens
   Kleuren en typografie komen uit de goedgekeurde ontwerprichting
   (GOEDGEKEURD-richting-3-lichte-menubar-beige-doos-v1.png). De waarden zijn
   uit dat beeld gemeten, niet geschat: warm papier, houtskoolzwarte tekst,
   terracotta als enige accent, en salie, lila en zand als bijkleuren uit de
   papiercollage van de fotografie.
   ========================================================= */
:root{
	/* papier */
	--cream:#F6EFE7;      /* de pagina zelf */
	--bar:#F7F2EE;        /* menubalk en voettekst, een tint lichter */
	--paper:#FDFAF6;      /* kaarten en blokken op de pagina */
	--paper-2:#F1E8DC;    /* rustige vlakken, ring achter de pictogrammen */
	--line:#E4DACC;

	/* inkt */
	--ink:#262523;        /* koppen en het logo */
	--body:#4A4A46;       /* lopende tekst */
	--muted:#8A8479;      /* bijschriften */

	/* accenten */
	--terracotta:#C0483A;
	--terracotta-dark:#9B3729;
	--sage:#5C6448;
	--lilac:#9C92AE;
	--sand:#DCAA64;

	/* kaarttype-kleuren, 1-op-1 uit het gedrukte deck */
	--c-situation:#E0912B;
	--c-symbol:#2F6FB0;
	--c-rescue:#1F7A4D;
	--c-action:#B3352C;
	--c-vib:#6B3FA0;

	--radius:18px;
	--radius-sm:12px;
	--shadow-sm:0 2px 12px rgba(38,37,35,.06);
	--shadow-md:0 8px 26px rgba(38,37,35,.09);
	--shadow-lg:0 18px 44px rgba(38,37,35,.13);

	--wrap:1140px;
	--wrap-narrow:780px;

	/* Serif voor de koppen, systeem-sans voor de tekst: precies de verhouding
	   uit de ontwerprichting. Zie inc/setup.php voor het laden van Lora. */
	--font-display:"Lora",Georgia,"Times New Roman",serif;
	--font-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

	--step:clamp(3rem,6vw,5rem);
}

/* =========================================================
   2. Reset / basis
   ========================================================= */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
	margin:0;
	background:var(--cream);
	color:var(--body);
	font-family:var(--font-body);
	font-size:17px;
	line-height:1.7;
	-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--terracotta-dark);text-underline-offset:3px}
a:hover{color:var(--ink)}
h1,h2,h3,h4{
	color:var(--ink);line-height:1.16;margin:0 0 .5em;font-weight:600;
	font-family:var(--font-display);letter-spacing:-.005em;
	/* Nederlandse samenstellingen als "gevarenpictogrammen" zijn langer dan een
	   telefoonscherm breed is; laat ze afbreken in plaats van uitsteken. */
	overflow-wrap:break-word;hyphens:auto
}
h1{font-size:clamp(2rem,4.6vw,3.4rem)}
h2{font-size:clamp(1.5rem,3vw,2.3rem)}
h3{font-size:1.1rem;font-family:var(--font-body);font-weight:700;letter-spacing:0}
p{margin:0 0 1.1em}
ul,ol{margin:0 0 1.1em;padding-left:1.3em}
li{margin-bottom:.45em}
hr{border:0;border-top:1px solid var(--line);margin:2.5rem 0}
:focus-visible{outline:2px solid var(--terracotta);outline-offset:3px;border-radius:4px}

.wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}
.wrap-narrow{width:min(100% - 2.5rem,var(--wrap-narrow));margin-inline:auto}
.section{padding:var(--step) 0}
.section--alt{background:var(--paper)}
.section--navy{background:var(--ink);color:#DCD6CC}
.section--navy h2,.section--navy h3{color:#fff}
.lead{font-size:1.12rem}
.center{text-align:center}
.eyebrow{
	text-transform:uppercase;letter-spacing:.16em;
	font-size:.75rem;font-weight:700;color:var(--terracotta);margin:0 0 .8rem
}
.screen-reader-text{
	position:absolute!important;width:1px;height:1px;overflow:hidden;
	clip:rect(1px,1px,1px,1px);white-space:nowrap
}
.skip-link:focus{
	position:fixed;left:1rem;top:1rem;z-index:999;background:#fff;
	padding:.7rem 1.1rem;border-radius:100px;width:auto;height:auto;clip:auto
}
/* Zonder min-width:0 rekt een grid-kolom op tot de langste ondeelbare kop
   ("gevarenpictogrammen") en steekt de tekst buiten het scherm. */
.cards>*,.picto-grid>*,.card-gallery>*,.footer-grid>*,.cta-band>*,.peek-grid>*{min-width:0}

/* =========================================================
   3. Knoppen
   Rustiger dan in de vorige versie: de fotografie draagt nu het speelse, dus
   de knoppen hoeven dat niet ook te doen. Wel een dunne onderrand op de
   primaire knop, zodat hij aanraakbaar oogt.
   ========================================================= */
.btn{
	display:inline-flex;align-items:center;gap:.5em;
	font-family:var(--font-body);font-weight:600;font-size:.98rem;
	padding:.85em 1.7em;border-radius:100px;border:0;
	text-decoration:none;cursor:pointer;
	transition:transform .12s ease,box-shadow .12s ease,background .15s ease
}
.btn:active{transform:translateY(2px)}
.btn--primary{background:var(--terracotta);color:#fff;box-shadow:0 3px 0 var(--terracotta-dark)}
.btn--primary:hover{background:#CB5445;color:#fff}
.btn--primary:active{box-shadow:0 1px 0 var(--terracotta-dark)}
.btn--dark{background:var(--ink);color:#fff;box-shadow:0 3px 0 #131211}
.btn--dark:hover{background:#3A3835;color:#fff}
.btn--dark:active{box-shadow:0 1px 0 #131211}
.btn--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn--ghost:hover{background:var(--ink);color:#fff}
.btn--block{width:100%;justify-content:center}
.section--navy .btn--ghost,.cta-band .btn--ghost{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5)}
.section--navy .btn--ghost:hover,.cta-band .btn--ghost:hover{background:#fff;color:var(--ink)}

/* =========================================================
   4. Header — lichte balk, tekstmenu, terracotta streep onder de actieve pagina
   ========================================================= */
.site-header{
	position:sticky;top:0;z-index:60;
	background:rgba(247,242,238,.96);
	backdrop-filter:saturate(140%) blur(8px);
	border-bottom:1px solid var(--line)
}
.site-header__inner{display:flex;align-items:center;gap:1.4rem;min-height:76px}
/* flex:0 0 auto op zowel het merk als de afbeelding: zonder dat rekent de
   flexbox de breedte van een vervangen element (de logo-afbeelding) terug naar
   nul, omdat max-width:100% en de flexibele basis elkaar in de wielen rijden. */
.brand{display:flex;align-items:center;text-decoration:none;margin-right:auto;flex:0 0 auto}
.brand__logo,.brand--custom img{
	height:44px;width:auto;max-width:none;display:block;flex:0 0 auto
}


.nav-toggle{
	display:none;background:transparent;border:1.5px solid var(--ink);color:var(--ink);
	border-radius:100px;padding:.45rem .8rem;cursor:pointer;font-size:1rem
}
.main-nav ul{display:flex;gap:0;list-style:none;margin:0;padding:0}
.main-nav li{margin:0}
.main-nav a{
	display:block;padding:.45rem .05rem;margin:0 .55rem;text-decoration:none;
	color:var(--body);font-size:.95rem;font-weight:500;white-space:nowrap;
	border-bottom:2px solid transparent;transition:color .15s,border-color .15s
}
.main-nav a:hover,.main-nav a:focus-visible{color:var(--terracotta);border-bottom-color:var(--terracotta)}
.main-nav .current-menu-item>a,.main-nav .current_page_item>a{
	color:var(--ink);border-bottom-color:var(--terracotta)
}

.lang-switch{display:flex;gap:.3rem;align-items:center;margin-left:.7rem;font-size:.85rem}
/* Dezelfde markering als in het menu: een terracotta streepje onder de actieve
   taal, en een grijs streepje bij hover op de andere. */
.lang-switch__item{
	display:block;padding:.45rem .1rem;text-decoration:none;color:var(--muted);
	font-weight:600;border-bottom:2px solid transparent;
	transition:color .15s,border-color .15s
}
.lang-switch a.lang-switch__item:hover,
.lang-switch a.lang-switch__item:focus-visible{color:var(--terracotta);border-bottom-color:var(--terracotta)}
.lang-switch .is-active{color:var(--ink);border-bottom-color:var(--terracotta)}
.lang-switch__sep{color:var(--muted);font-weight:400}

@media (max-width:1100px){
	.nav-toggle{display:block;order:3}
	.main-nav{order:4;flex-basis:100%;display:none;border-top:1px solid var(--line);padding:.6rem 0 1rem}
	.site-header__inner{flex-wrap:wrap;padding-block:.6rem}
	.main-nav.is-open{display:block}
	.main-nav ul{flex-direction:column;gap:0}
	.main-nav a{padding:.7rem .2rem;margin:0;font-size:1rem;border-bottom:1px solid var(--line)}
	.main-nav li:last-child a{border-bottom:0}
}

/* =========================================================
   5. Hero — tekst links óp de foto
   De foto wordt niet bijgesneden: hij staat op volle breedte en bepaalt zelf
   zijn hoogte. De tekst ligt eroverheen in de linkerhelft, waar het beeld
   rustig papier is. Onder 1000px past dat niet meer naast de doos, dus daar
   valt de tekst terug naar boven het beeld.
   ========================================================= */
.hero{position:relative;overflow:hidden}
.hero__intro{
	width:min(100% - 2.5rem,var(--wrap));margin-inline:auto;
	text-align:left;padding:clamp(2rem,5vw,3rem) 0 clamp(1.5rem,3vw,2rem)
}
.hero h1{margin-bottom:.4em;max-width:12em}
.hero__accent{color:var(--terracotta)}
.hero__lead{font-size:1.1rem;max-width:32em}
.hero__actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.8rem}
.hero__facts{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem 1.6rem;margin-top:2.2rem;max-width:34em}
@media (min-width:520px){.hero__facts{grid-template-columns:repeat(4,auto);justify-content:start;column-gap:2.4rem}}
.hero__fact strong{display:block;font-family:var(--font-display);font-size:1.7rem;color:var(--ink);font-weight:600;line-height:1}
.hero__fact span{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--terracotta);font-weight:700}

/* De foto staat over de volle breedte en wordt NIET bijgesneden: de hele
   afbeelding is te zien. Daarom een gewone <img> op width:100% en geen
   achtergrondafbeelding met cover. */
.hero__image{margin:0}
.hero__image img{width:100%;height:auto;display:block}

@media (min-width:1000px){
	/* Lichtsluier onder de tekst. De foto wordt links bijna dichtgetrokken met
	   papierkleur en loopt naar rechts uit naar volledig doorzichtig, zodat de
	   kop leesbaar blijft zonder dat de doos en de kaarten vertroebelen.
	   Verhouding overgenomen van de referentie: dicht tot ±35%, weg op ±56%. */
	.hero::before{
		content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
		background:linear-gradient(90deg,
			rgba(253,250,246,.94) 0%,
			rgba(253,250,246,.88) 36%,
			rgba(253,250,246,.42) 50%,
			rgba(253,250,246,0)   63%)
	}
	/* De tekst ligt over de foto heen. De foto is de laag eronder en houdt zijn
	   eigen hoogte, dus er wordt niets afgesneden.

	   Niet verticaal gecentreerd maar bovenin uitgelijnd met een marge in
	   procenten. Procentuele padding rekent met de bréédte, en de hoogte van de
	   foto doet dat ook (vaste beeldverhouding), dus de tekst houdt dezelfde
	   plek in het beeld op elk scherm. Gecentreerd zakte de knoppenrij op een
	   breed scherm (1440p met bladwijzerbalk) onder de vouw. */
	.hero__intro{
		position:absolute;inset:0;z-index:2;pointer-events:none;
		display:flex;flex-direction:column;justify-content:flex-start;
		padding-block:11% 0
	}
	/* De tekst zelf blijft aanklikbaar; alleen het lege deel van de overlay
	   laat kliks door naar de foto eronder. */
	.hero__intro>*{pointer-events:auto;max-width:min(46%,34rem)}
	.hero__intro h1{max-width:min(46%,34rem)}
}
@media (min-width:1000px) and (max-width:1200px){
	/* Iets krapper: bij deze breedtes is de foto nog geen 800px hoog, en staan
	   de kentallen op twee rijen. Met dezelfde marge als hierboven zou het blok
	   onder de foto uitsteken. */
	.hero__intro{padding-block:3.5% 0}
	.hero h1{font-size:2.4rem}
	.hero__lead{font-size:1rem}
	/* De kentallen op twee kolommen: op één rij liepen ze bij deze breedtes tot
	   over de eerste kaart heen. */
	.hero__facts{margin-top:1.4rem;grid-template-columns:repeat(2,auto);
		justify-content:start;column-gap:2.2rem;row-gap:.9rem;max-width:22rem}
	/* De sluier loopt hier iets verder door, want de kaarten liggen dichter
	   naar links. */
	.hero::before{
		background:linear-gradient(90deg,
			rgba(253,250,246,.95) 0%,
			rgba(253,250,246,.88) 38%,
			rgba(253,250,246,.4)  52%,
			rgba(253,250,246,0)   64%)
	}
}

@media (max-width:420px){
	/* Iets kleiner, zodat een lange samenstelling niet midden in een woord breekt. */
	.hero h1{font-size:1.75rem}
}

/* =========================================================
   6. Pictogrammen
   ========================================================= */
.picto-strip{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;margin:2rem 0 0}
.picto-strip img{width:58px}

/* 9 pictogrammen: 3x3 op desktop, 2 kolommen op tablet, 1 op telefoon —
   zo blijft er nooit een enkele kaart als wees op de laatste rij staan. */
.picto-grid{display:grid;grid-template-columns:1fr;gap:1.3rem;margin-top:2.6rem;padding:0;list-style:none}
@media (min-width:560px){.picto-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){.picto-grid{grid-template-columns:repeat(3,1fr)}}
.picto-card{
	background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
	padding:1.7rem 1.4rem;text-align:center;margin:0;
	transition:transform .18s ease,box-shadow .18s ease
}
.picto-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
/* Eén rustige tint achter alle negen ruiten. Negen verschillende pasteltinten
   trokken de aandacht weg van de pictogrammen zelf, en die zijn hier de inhoud. */
.picto-card__ring{
	width:104px;height:104px;border-radius:50%;display:grid;place-items:center;
	margin:0 auto 1rem;background:var(--paper-2)
}
.picto-card__ring img{width:66px}
.picto-card__code{
	font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
	color:var(--muted);display:block;margin-bottom:.25rem;font-weight:700
}
.picto-card h3{margin-bottom:.1rem;font-size:1.06rem}
.picto-card__alt{font-size:.85rem;color:var(--muted);font-style:italic;margin:0 0 .6rem}
.picto-card p{margin:0;font-size:.95rem}

/* --- Pictogramkaart met H-zinnen (pagina "Ontdek de 9 pictogrammen") ------
   Op de detailpagina klapt elke kaart zijn eigen H-zinnen uit. Laat de kaarten
   daarom NIET even hoog worden: anders rekt één opengeklapte kaart de hele rij
   mee en staat de knop van de buren ineens onderaan een leeg vlak. */
.picto-grid--detail{align-items:start}
.picto-card__official{font-size:.85rem;color:var(--muted);margin:.2rem 0 1rem}
.picto-card__official em{color:var(--body);font-style:normal}

.hcodes{margin-top:.4rem;text-align:left}
.hcodes summary{
	list-style:none;cursor:pointer;display:flex;align-items:center;gap:.55rem;
	justify-content:center;padding:.55rem .9rem;border-radius:100px;
	background:var(--paper-2);color:var(--ink);font-size:.86rem;font-weight:600;
	transition:background .15s
}
.hcodes summary::-webkit-details-marker{display:none}
.hcodes summary:hover{background:var(--line)}
.hcodes__count{
	display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 .35rem;
	border-radius:100px;background:var(--ink);color:#fff;font-size:.75rem
}
.hcodes[open] summary{background:var(--line);margin-bottom:.9rem}
.hcodes__label{
	font-size:.74rem;text-transform:uppercase;letter-spacing:.12em;font-weight:700;
	color:var(--muted);margin:0 0 .6rem
}
.hcodes__list{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.45rem .8rem;font-size:.9rem}
.hcodes__list dt{font-weight:700;color:var(--ink);white-space:nowrap}
.hcodes__list dd{margin:0}

.source-note{font-size:.85rem;color:var(--muted);margin-top:2rem;max-width:60em;margin-inline:auto}

/* Bronverwijzingen. Een GEO-scanner zoekt naar links naar gezaghebbende
   bronnen; een lezer wil kunnen nakijken waar de H-zinnen vandaan komen. Zelfde
   blok, beide doelen. */
.sources{margin-top:2rem;padding:1.25rem 1.5rem;border-left:3px solid var(--terracotta);background:var(--paper)}
.sources h3{margin:0 0 .5rem;font-size:1.05rem}
.sources p{margin:0 0 .75rem;font-size:.95rem}
.sources__list{margin:0;padding-left:1.1rem;font-size:.95rem}
.sources__list li+li{margin-top:.35rem}

/* =========================================================
   7. Tegels, stappen, meldingen
   ========================================================= */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.4rem;margin-top:2.6rem}
/* Vijf kaarttypes: 3+2 leest rustiger dan 4+1. */
@media (min-width:900px){.cards--3{grid-template-columns:repeat(3,1fr)}}

/* --- Flyer: de QR-landingspagina ---------------------------------------
   Twee knoppen bovenaan die naar de twee formulieren springen, en onderaan
   drie doorklikkaarten. Verder leunt de pagina op de bestaande onderdelen. */
.section--tight{padding-block:clamp(1.6rem,3vw,2.4rem)}

/* De vier edities uit de flyer, met dezelfde nummering als het drukwerk. */
.flyer-options{
	list-style:none;margin:2.4rem 0 2.6rem;padding:0;
	display:grid;gap:1rem;grid-template-columns:1fr;
	width:min(100%,46rem);margin-inline:auto
}
@media (min-width:760px){.flyer-options{grid-template-columns:repeat(2,1fr);width:100%}}
.flyer-options>li{
	position:relative;margin:0;padding:1.2rem 1.3rem 1.2rem 3.6rem;
	background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-sm);
	font-size:.97rem;min-width:0
}
.flyer-options strong{display:block;color:var(--ink);font-size:1.02rem;margin-bottom:.15em}
.flyer-options__n{
	position:absolute;left:1.1rem;top:1.15rem;
	display:grid;place-items:center;width:1.7rem;height:1.7rem;border-radius:50%;
	background:var(--terracotta);color:#fff;font-weight:700;font-size:.85rem
}
.flyer-footnote{margin-top:2.4rem;font-size:.82rem;color:var(--muted)}

/* Notitieblok op volle wrap-breedte (kaartengalerij, onder de twaalf kaarten). */
.notice--wide{width:min(100%,46rem);margin-inline:auto;margin-top:2.8rem}

/* Twee knoppen naast elkaar in een slotblok, gecentreerd en op een telefoon
   onder elkaar. */
.cta-buttons{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center;margin-top:1.8rem}

/* --- Toolboxpagina -------------------------------------------------------- */
/* Het tijdsbestek als label boven de kop: "15 min", "½ dag", "dag 1". */
.use-badge{
	display:inline-block;margin-bottom:.7rem;padding:.2rem .7rem;border-radius:100px;
	background:var(--paper-2);color:var(--ink);
	font-size:.76rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase
}
.check-list{list-style:none;padding:0;margin:1.6rem 0 0}
.check-list li{position:relative;padding-left:1.8rem;margin-bottom:.9rem}
.check-list li::before{
	content:"";position:absolute;left:0;top:.55em;width:.6rem;height:.6rem;
	border-radius:50%;background:var(--terracotta)
}

/* --- FAQ ------------------------------------------------------------------ */
/* De vragen zijn echte h3-koppen, geen vetgedrukte alinea's: alleen dan telt
   een scanner ze als vraag, en alleen dan springt een schermlezer er doorheen. */
.faq{margin-top:2rem}
.faq__item{padding:1.3rem 0;border-top:1px solid var(--line)}
.faq__item:last-child{border-bottom:1px solid var(--line)}
.faq__item h3{margin:0 0 .5em;font-size:1.05rem;color:var(--ink)}
.faq__item p{margin:0}

/* Doos en kaartrug naast elkaar: twee staande beelden, samen niet breder dan
   een leesregel, anders worden ze onnodig groot op een breed scherm. */
.card-gallery--pair{width:min(100%,44rem);margin-inline:auto}
@media (min-width:640px){.card-gallery--pair{grid-template-columns:repeat(2,1fr)}}

/* LinkedIn-beeldmerk in de voettekst. */
.social-link{
	display:inline-flex;align-items:center;justify-content:center;
	width:2.4rem;height:2.4rem;margin-top:1.1rem;border-radius:8px;
	color:var(--body);background:transparent;
	border:1px solid var(--line);
	transition:color .15s,border-color .15s,background .15s
}
.social-link:hover,.social-link:focus-visible{
	color:var(--terracotta);border-color:var(--terracotta);background:var(--paper)
}
.card--link{
	display:block;text-decoration:none;color:inherit;
	transition:transform .12s ease,box-shadow .12s ease
}
.card--link:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);color:inherit}
.card--link h3{color:var(--terracotta-dark)}
.card--link p{margin-bottom:0;font-size:.95rem}
.card{
	background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
	padding:2rem 1.7rem
}
.card h3{margin-top:0;font-size:1.12rem}
.card p:last-child{margin-bottom:0}
.card__num{
	display:inline-grid;place-items:center;width:50px;height:50px;border-radius:50%;
	background:var(--paper-2);color:var(--ink);
	font-family:var(--font-display);font-weight:600;font-size:1.2rem;margin-bottom:1rem
}
.card--accent{border-top:3px solid var(--terracotta)}

.steps{counter-reset:step;list-style:none;padding:0;margin:2.4rem 0 0;display:grid;gap:1.1rem}
.steps li{
	counter-increment:step;position:relative;padding:1.5rem 1.6rem 1.5rem 5rem;
	background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);margin:0
}
.steps li::before{
	content:counter(step);position:absolute;left:1.4rem;top:1.35rem;
	width:44px;height:44px;border-radius:50%;background:var(--sage);color:#fff;
	display:grid;place-items:center;font-family:var(--font-display);font-weight:600;font-size:1.1rem
}
.steps li:nth-child(2)::before{background:var(--terracotta)}
.steps li:nth-child(3)::before{background:var(--lilac)}
.steps li:nth-child(4)::before{background:var(--sand);color:var(--ink)}
.steps strong{display:block;color:var(--ink);margin-bottom:.1rem;font-size:1.05rem}

.notice{
	background:var(--paper);border:1px solid var(--line);border-left:5px solid var(--terracotta);
	border-radius:var(--radius-sm);padding:1.4rem 1.6rem;margin:2rem 0
}
.notice p:last-child{margin-bottom:0}
.notice strong{color:var(--ink)}

/* =========================================================
   8. Kaartengalerij
   ========================================================= */
.card-gallery{
	display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
	gap:clamp(1.5rem,4vw,3rem);margin-top:2.8rem;align-items:start
}
.card-figure{margin:0;text-align:center}
.card-figure img{
	width:100%;max-width:420px;margin:0 auto;border-radius:14px;
	box-shadow:var(--shadow-lg);transition:transform .25s ease
}
.card-figure img:hover{transform:translateY(-5px)}
.card-figure figcaption{margin-top:1.1rem;font-size:.95rem;color:var(--body)}
.card-figure figcaption strong{display:block;color:var(--ink);font-size:1.05rem;margin-bottom:.2rem}

/* --- Kijkje in het deck: vijf kaarten naast elkaar --------------------------
   Vijf items: op desktop 5 kolommen, daaronder 3 en 2. Nooit een enkele wees
   op de laatste rij. */
/* Zeven kaarten passen niet gelijkmatig in een raster: met flexbox loopt de
   laatste rij netjes gecentreerd uit in plaats van links te blijven hangen. */
.peek-grid{
	display:flex;flex-wrap:wrap;justify-content:center;
	gap:1.4rem;margin-top:2.6rem;padding:0;list-style:none
}
.peek-card{margin:0;text-align:center;flex:0 1 calc((100% - 1.4rem) / 2)}
@media (min-width:700px){.peek-card{flex-basis:calc((100% - 2.8rem) / 3)}}
@media (min-width:1050px){.peek-card{flex-basis:calc((100% - 4.2rem) / 4)}}
.peek-card img{width:100%;border-radius:10px;box-shadow:var(--shadow-md);transition:transform .25s ease}
.peek-card:hover img{transform:translateY(-4px)}
.peek-card__label{display:block;margin:.9rem 0 .2rem;font-weight:700;color:var(--ink);font-size:.95rem}
.peek-card p{margin:0;font-size:.88rem;color:var(--muted)}

.type-legend{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:2rem;justify-content:center;padding:0;list-style:none}
.type-legend li{
	margin:0;font-size:.85rem;padding:.4rem .9rem;border-radius:100px;
	background:var(--paper);border:1px solid var(--line);display:flex;align-items:center;gap:.5rem
}
.type-legend .dot{width:11px;height:11px;border-radius:100px;flex:0 0 11px}

/* =========================================================
   9. Formulieren
   ========================================================= */
.form{
	background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
	padding:clamp(1.5rem,3vw,2.4rem);margin-top:2rem
}
.form-row{display:grid;gap:1.1rem;margin-bottom:1.1rem}
@media (min-width:640px){.form-row--2{grid-template-columns:1fr 1fr}}
.field label{display:block;font-weight:600;color:var(--ink);font-size:.92rem;margin-bottom:.4rem}
.field .req{color:var(--terracotta)}
.field input[type=text],.field input[type=email],.field input[type=tel],
.field input[type=number],.field select,.field textarea{
	width:100%;padding:.8rem 1rem;border:1px solid var(--line);border-radius:var(--radius-sm);
	font:inherit;font-size:.98rem;color:var(--ink);background:var(--cream);
	transition:border-color .15s,box-shadow .15s,background .15s
}
.field textarea{min-height:150px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
	border-color:var(--terracotta);background:#fff;box-shadow:0 0 0 3px rgba(192,72,58,.13);outline:none
}
.field fieldset{border:1px solid var(--line);border-radius:var(--radius-sm);padding:1rem 1.2rem;margin:0;background:var(--cream)}
.field legend{font-weight:600;color:var(--ink);font-size:.92rem;padding:0 .4rem}
.field fieldset .field--check{margin-bottom:.4rem}
.field__hint{font-size:.84rem;color:var(--muted);margin:.35rem 0 0}
.field--check{display:flex;gap:.65rem;align-items:flex-start}
.field--check input{margin-top:.35rem;width:18px;height:18px;accent-color:var(--terracotta)}
.field--check label{font-weight:400;font-size:.92rem;color:var(--body)}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__footer{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;margin-top:1.5rem}

.form-message{border-radius:var(--radius-sm);padding:1rem 1.2rem;margin-bottom:1.5rem;font-size:.98rem}
.form-message--ok{background:#E7EDE0;color:#3D4A2C}
.form-message--error{background:#F6E2DE;color:#8D2318}

/* =========================================================
   10. Juridische pagina's
   ========================================================= */
.legal h2{font-size:clamp(1.25rem,2.2vw,1.65rem);margin-top:2.8rem}
/* "Deel A" / "Deel B" in de algemene voorwaarden: een scheiding tussen twee
   blokken artikelen, geen gewone paragraafkop. */
.legal h2.legal-part{
	margin-top:3.4rem;padding-top:1.6rem;border-top:2px solid var(--terracotta);
	font-size:clamp(1.35rem,2.4vw,1.8rem)
}
.legal h2.legal-part:first-child{margin-top:0;padding-top:0;border-top:0}
.legal h3{font-size:1.05rem;margin-top:1.8rem}
.legal ul,.legal ol{padding-left:1.4rem}
.legal li{margin-bottom:.55em}
.legal li>p{margin-bottom:.5em}
.legal strong{color:var(--ink)}
.legal code{background:var(--paper-2);border-radius:5px;padding:.1em .4em;font-size:.9em;color:var(--ink)}
/* Een tabel mag nooit de pagina breder maken dan het scherm; hij schuift zelf. */
.legal table{
	width:100%;border-collapse:collapse;margin:1.5rem 0;font-size:.92rem;
	background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden
}
.legal thead th{
	background:var(--ink);color:#fff;text-align:left;font-weight:600;
	padding:.7rem .9rem;font-size:.88rem
}
.legal td{padding:.7rem .9rem;border-top:1px solid var(--line);vertical-align:top}
.legal tbody tr:nth-child(even){background:var(--cream)}
@media (max-width:700px){
	.legal table{display:block;overflow-x:auto;white-space:normal}
	.legal thead th,.legal td{min-width:9rem}
}

.legal-nav{margin-top:3rem;padding-top:1.6rem;border-top:1px solid var(--line)}
.legal-nav__label{
	display:block;font-size:.74rem;text-transform:uppercase;letter-spacing:.14em;
	font-weight:700;color:var(--muted);margin-bottom:.6rem
}
.legal-nav ul{display:flex;flex-wrap:wrap;gap:.5rem .9rem;list-style:none;margin:0;padding:0}
.legal-nav li{margin:0}
.legal-nav a{font-size:.92rem}

/* =========================================================
   11. CTA-band, footer
   ========================================================= */
.cta-band{
	background:var(--ink);color:#DCD6CC;border-radius:var(--radius);
	padding:clamp(2rem,4vw,3rem);
	display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:center
}
.cta-band h2{color:#fff;margin-bottom:.35rem}
.cta-band p{margin:0;max-width:46em}
@media (max-width:760px){.cta-band{grid-template-columns:1fr}}
/* De CTA-band volgt altijd op een sectie die zelf al ruimte onderaan heeft. */
.section + .section:has(.cta-band){padding-top:0}

.site-footer{background:var(--bar);color:var(--body);padding:3.5rem 0 2rem;border-top:1px solid var(--line)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.5rem}
@media (max-width:820px){.footer-grid{grid-template-columns:1fr;gap:2rem}}
.site-footer h3{
	color:var(--ink);text-transform:uppercase;letter-spacing:.14em;
	font-size:.76rem;font-weight:700;margin-bottom:1rem;font-family:var(--font-body)
}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin-bottom:.5rem}
.site-footer a{color:var(--body);text-decoration:none}
.site-footer a:hover{color:var(--ink);text-decoration:underline}
.footer-tagline{
	font-family:var(--font-display);font-weight:600;color:var(--terracotta);
	font-size:1rem;margin:-.4rem 0 .8rem
}
.footer-logo{max-width:150px;margin-top:1rem;margin-bottom:.8rem}
.footer-legal{
	display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;
	margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--line);font-size:.85rem
}
.footer-legal a{color:var(--body);text-decoration:none}
.footer-legal a:hover{color:var(--ink);text-decoration:underline}
.footer-bottom{
	margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--line);
	display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;font-size:.85rem;color:var(--muted)
}
.footer-disclaimer{font-size:.82rem;color:var(--muted);max-width:60em;margin-top:1rem}

/* =========================================================
   12. Paginakop en lopende tekst
   ========================================================= */
.page-hero{padding:clamp(2.2rem,5vw,3.6rem) 0 clamp(1.5rem,3vw,2.4rem);position:relative;overflow:hidden}
.page-hero h1{margin-bottom:.3em}
.page-hero p{margin:0;max-width:46em;font-size:1.1rem}
.breadcrumb{font-size:.85rem;color:var(--muted);margin-bottom:.9rem}
.breadcrumb a{color:var(--terracotta-dark);text-decoration:none}

/* --- Zakelijk: kop óp de foto, zelfde principe als de home ---------------
   De foto van de gepersonaliseerde editie draagt het verhaal van de pagina.
   Hij wordt niet bijgesneden: volle breedte, eigen hoogte. Vanaf 1000px ligt
   de tekst in het lege papiervlak linksboven, met dezelfde lichtsluier eronder
   als op de home. Daaronder staat de tekst gewoon bóven de foto. */
.biz-hero{position:relative;overflow:hidden}
.biz-hero__intro{
	width:min(100% - 2.5rem,var(--wrap));margin-inline:auto;
	text-align:left;padding:clamp(2rem,5vw,3rem) 0 clamp(1.5rem,3vw,2rem)
}
.biz-hero h1{margin-bottom:.35em}
.biz-hero__lead{margin:0;font-size:1.1rem}
.biz-hero__image{margin:0}
.biz-hero__image img{width:100%;height:auto;display:block}

@media (min-width:1000px){
	.biz-hero::before{
		content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
		background:linear-gradient(90deg,
			rgba(253,250,246,.94) 0%,
			rgba(253,250,246,.86) 32%,
			rgba(253,250,246,.35) 44%,
			rgba(253,250,246,0)   56%)
	}
	/* Bovenaan uitgelijnd, op dezelfde hoogte als de kop van de andere
	   binnenpagina's — gecentreerd zakte hij een stuk lager weg. */
	.biz-hero__intro{
		position:absolute;inset:0;z-index:2;pointer-events:none;
		display:flex;flex-direction:column;justify-content:flex-start;
		padding-block:clamp(2.2rem,5vw,3.6rem) 0
	}
	.biz-hero__intro>*{pointer-events:auto;max-width:min(40%,28rem)}
}
@media (min-width:1000px) and (max-width:1200px){
	.biz-hero h1{font-size:2.4rem}
	.biz-hero__lead{font-size:1rem}
}
/* Vier blokken: twee bij twee. Met auto-fit werd het 3 + 1 en bleef er een
   losse kaart onderaan hangen. */
.cards--four{grid-template-columns:1fr}
@media (min-width:760px){.cards--four{grid-template-columns:repeat(2,1fr)}}

.prose h2{margin-top:2.6rem}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:1.8rem}
.prose blockquote{
	margin:2rem 0;padding:1.4rem 1.6rem;border-left:4px solid var(--sage);
	background:var(--paper);border-radius:0 var(--radius-sm) var(--radius-sm) 0;color:var(--ink)
}
.prose blockquote p:last-child{margin-bottom:0}

.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;margin:2.4rem 0}
.stat{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem 1rem;text-align:center}
.stat strong{display:block;font-family:var(--font-display);font-weight:600;font-size:1.8rem;color:var(--ink);line-height:1.1}
.stat span{font-size:.76rem;text-transform:uppercase;letter-spacing:.1em;color:var(--terracotta);font-weight:700}

/* 13. Print */
@media print{
	.site-header,.site-footer,.cta-band,.form,.hero__actions,.hero__sun{display:none!important}
	body{background:#fff;font-size:11pt}
	.card,.picto-card,.steps li,.notice{box-shadow:none;border:1px solid #ccc}
}

/* 14. Minder beweging */
@media (prefers-reduced-motion:reduce){
	*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}