/* Sellgrip — ontwerpsysteem van de marketingsite.
 *
 * Kaufland-verwant: rood als accent (± 5–10 % van een pagina: hoofdknop, één
 * accent per sectie), grafiet voor de rest. #D40F1A ligt vlak bij Kauflands
 * #E10915 maar is geen kopie en haalt beter contrast (5,4:1 op wit).
 * Lettertype Albert Sans (OFL), zelf gehost. Licht thema, expliciet.
 * Geen verlopen, geen glas, geen gloed, geen icoontjes-in-vierkantjes.
 */
/* Lettertype: assets/fonts/fonts.css, apart geladen (functions.php). */

:root {
	--red: #d40f1a;
	--red-press: #a30d16;
	--red-tint: #fdf2f2;
	--ink: #171717;
	--graphite: #3f3f3f;
	--muted: #6b6b6b;
	--line: #e4e4e4;
	--paper: #ffffff;
	--paper-2: #f7f7f5;

	/* Rollen bovenop het palet, zodat de donkere modus (onder) per rol kan
	 * wisselen. In licht zijn ze gelijk aan wat er eerst hard in stond. */
	--card: #ffffff;          /* kaarten, panelen, velden */
	--hover: #f7f7f5;         /* hover, actieve rij, chip */
	--on-ink: #ffffff;        /* tekst op een zwart vlak (var(--ink)) */
	--red-text: #d40f1a;      /* rode tekst en links */
	--red-text-strong: #a30d16;
	--field: #8f8f8f;         /* rand van een invoerveld (3,3:1) */
	--placeholder: #a8a8a8;
	--overlay: rgba(23, 23, 23, 0.32);
	--flag-edge: rgba(17, 17, 15, 0.16);
	--promo-text: #cfcfcc;
	--promo-bg: #171717;
	--promo-line: transparent;

	/* Semantiek: tekst en vlak. */
	--ok: #0e7a45;
	--ok-solid: #0e7a45;
	--ok-wash: #e7f6ee;
	--ok-line: #bfe7d2;
	--grow: #1a6b3c;
	--grow-wash: #eef6f0;
	--late: #b30d16;
	--late-2: #a3121b;
	--red-wash: #fbeeee;
	--warn: #92610e;
	--warn-wash: #fdf3e1;

	/* De nagebootste dashboardschermen (hero-demo, home-flow, home-start,
	 * features): de grijzen van het dashboard zelf. */
	--mk-line: #e2e2de;
	--mk-line-2: #eaeae6;
	--mk-grid: #efefec;
	--mk-edge: #d9d9d4;
	--mk-edge-2: #dcdcd6;
	--mk-muted: #6b6b66;
	--mk-text-2: #474743;
	--mk-faint: #a3a3a0;
	--mk-faint-2: #8a8a85;
	--mk-stroke: #b9b9b3;
	--mk-bar: #a9a9a3;
	--mk-bar-2: #cfcfca;
	--mk-chip: #f3f3f1;
	--mk-chip-2: #f1f1ee;
	--mk-area: #f2f2ef;
	--mk-soft: #fafaf8;
	--mk-soft-2: #f6f6f4;
	--mk-btn: #262624;
	--mk-btn-hover: #000000;
	--mk-btn-text: #ffffff;

	--font: "Albert Sans", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
	--radius: 4px;
	--radius-card: 12px;
	/* De sitebreedte. Alles wat een rand raakt hangt hieraan: de kop, elke
	 * sectie, de hero en het brede menupaneel. Eén getal, dus de linkerrand van
	 * het logo en die van elke kop eronder blijven op dezelfde lijn. */
	--wrap: 1280px;
	/* 68px rij + 1px onderrand; de hero rekent ermee. */
	--header-h: 69px;
	--gutter: clamp(16px, calc(4vw / var(--vz, 1)), 32px);
	--section: clamp(56px, calc(9vw / var(--vz, 1)), 112px);
	/* Waar een anker landt. De vaste kop is 69px hoog op elke schermbreedte;
	 * de rest is lucht, zodat een kop niet tegen de balk plakt. Eén getal,
	 * want hiervoor stonden er vier verschillende in de bestanden (72, 84, 88
	 * en 96) voor dezelfde balk — bij een directe sprong valt dat nauwelijks
	 * op, bij een glijdende beweging des te meer. */
	--anchor-offset: 88px;

	color-scheme: light;
}

/* DONKERE MODUS (inc/darkmode.php zet data-theme vóór de eerste weergave).
 * Het palet van de donkere Instagram-posts: pagina #171717, kaarten #222,
 * lijnen #333, koppen wit, lopende tekst #d4d4d4. Het merkrood blijft voor
 * vlakken (knop, logo, streepjes); rode tekst wordt #f2525c, anders zakt hij
 * onder 4,5:1. Zwart (ink) wordt wit: een zwarte knop wordt een witte met
 * donkere tekst. Alleen op het scherm: afdrukken blijft licht. */
@media screen {
	html[data-theme="dark"] {
		--red-tint: rgba(212, 15, 26, 0.14);
		--ink: #ffffff;
		--graphite: #d4d4d4;
		--muted: #9a9a9a;
		--line: #3a3a3a; /* was #333: haarlijnen vielen bijna weg (slop-check 1 okt) */
		--paper: #171717;
		--paper-2: #1d1d1d;

		--card: #222222;
		--hover: #262626;
		--on-ink: #171717;
		--red-text: #f2525c;
		/* Labels op het rode tintvlak ("Aanbevolen", "3 maanden gratis",
		 * "Melding"): #f2525c haalde daar 4,37:1, dit 4,97:1 (slop-check 1 okt). */
		--red-text-strong: #f4666f;
		--field: #707070;
		--placeholder: #7d7d7d;
		--overlay: rgba(0, 0, 0, 0.55);
		--flag-edge: rgba(255, 255, 255, 0.22);
		--promo-text: #bdbdbd;
		--promo-bg: #222222;
		--promo-line: #333333;

		--ok: #4cc38a;
		--ok-solid: #0e7a45;
		--ok-wash: rgba(22, 160, 93, 0.14);
		--ok-line: rgba(76, 195, 138, 0.32);
		--grow: #4cc38a;
		--grow-wash: rgba(22, 160, 93, 0.14);
		--late: #f2777d;
		--late-2: #f2777d;
		--red-wash: rgba(217, 54, 62, 0.16);
		--warn: #e8b25a;
		--warn-wash: rgba(232, 162, 35, 0.14);

		--mk-line: #333333;
		--mk-line-2: #2c2c2c;
		--mk-grid: #2a2a2a;
		--mk-edge: #3d3d3d;
		--mk-edge-2: #3d3d3d;
		--mk-muted: #9a9a9a;
		--mk-text-2: #c4c4c4;
		--mk-faint: #7a7a7a;
		--mk-faint-2: #8a8a8a;
		--mk-stroke: #4d4d4d;
		--mk-bar: #5c5c5c;
		--mk-bar-2: #444444;
		--mk-chip: #262626;
		--mk-chip-2: #262626;
		--mk-area: #262626;
		--mk-soft: #1d1d1d;
		--mk-soft-2: #1d1d1d;
		--mk-btn: #f2f2f2;
		--mk-btn-hover: #ffffff;
		--mk-btn-text: #171717;

		color-scheme: dark;
	}
}

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

html {
	background: var(--paper);
	color: var(--ink);
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	font-family: var(--font);
	font-size: 1.0625rem;
	line-height: 1.55;
	font-weight: 400;
	background: var(--paper);
	color: var(--ink);
	text-rendering: optimizeLegibility;
	font-feature-settings: "tnum" 0;
	/* De voet staat altijd onderaan, ook op een korte pagina (404): anders
	 * bleef er een witte strook onder hangen. */
	display: flex;
	flex-direction: column;
	min-height: calc(100vh / var(--vz, 1));
	min-height: calc(100svh / var(--vz, 1));
}

body > main {
	flex: 1 0 auto;
}

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

a {
	color: inherit;
	text-underline-offset: 0.18em;
}

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

.wrap {
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.skip-link {
	position: absolute;
	left: 16px;
	top: -48px;
	background: var(--ink);
	color: var(--on-ink);
	padding: 8px 12px;
	border-radius: var(--radius);
	z-index: 20;
}

.skip-link:focus {
	top: 12px;
}

/* ------------------------------------------------------------ typografie */
h1,
h2,
h3 {
	margin: 0;
	font-weight: 750;
	color: var(--ink);
	text-wrap: balance;
	/* Een woord breder dan het scherm ("Auftragsverarbeitungsvertrag", 449px
	 * op 360px) breekt, in plaats van de pagina zijwaarts te laten scrollen. */
	overflow-wrap: break-word;
}

/* Op een telefoon met afbreekstreepje, naar de taal van <html lang>, maar
 * alleen voor woorden die niet op een regel passen. Met "10 5 4" brak de
 * browser ook woorden die gewoon op de volgende regel pasten: "terugko-men"
 * in de H1 van Retouren, "marge-vinder" en "retouren-pagina" in een H2
 * (slop-check 1 okt). Nu: een H1 breekt pas vanaf 16 letters (op 360px passen
 * er ongeveer zoveel op een regel), een H2 vanaf 20; minstens zes letters
 * vóór en vijf na het streepje, dus ook niet "Kauf-land" (final eval 1 okt).
 * Lange Duitse samenstellingen ("Auftragsverarbeitungsvertrag") breken nog
 * steeds met een streepje. Safari kent hyphenate-limit-chars niet; daar
 * houden de -webkit-regels de breuk in elk geval uit korte woorden. */
@media (max-width: 600px) {
	h1,
	h2 {
		-webkit-hyphens: auto;
		hyphens: auto;
		-webkit-hyphenate-limit-before: 6;
		-webkit-hyphenate-limit-after: 5;
	}

	h1 {
		hyphenate-limit-chars: 16 6 5;
	}

	h2 {
		hyphenate-limit-chars: 20 6 5;
	}
}

h1 {
	font-size: clamp(2.4rem, 1.4rem + calc(3.8vw / var(--vz, 1)), 4.25rem);
	line-height: 1.02;
	letter-spacing: -0.04em;
	font-weight: 800;
}

h2 {
	font-size: clamp(1.8rem, 1.25rem + calc(1.9vw / var(--vz, 1)), 2.75rem);
	line-height: 1.08;
	letter-spacing: -0.03em;
}

h3 {
	font-size: 1.2rem;
	line-height: 1.3;
	letter-spacing: -0.012em;
	font-weight: 700;
}

p {
	margin: 0;
	text-wrap: pretty;
}

.lead {
	font-size: clamp(1.1rem, 1rem + calc(0.45vw / var(--vz, 1)), 1.3rem);
	line-height: 1.5;
	color: var(--graphite);
	max-width: 36em;
}

.eyebrow {
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--red-text);
	margin-bottom: 14px;
}

.muted {
	color: var(--muted);
}

.small {
	font-size: 0.9rem;
}

/* ---------------------------------------------------------------- knoppen */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	font: inherit;
	font-weight: 650;
	font-size: 1rem;
	line-height: 1.2;
	padding: 0.8em 1.25em;
	border-radius: var(--radius);
	border: 1.5px solid transparent;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn-primary {
	background: var(--red);
	color: #fff;
}

.btn-primary:hover {
	background: var(--red-press);
}

.btn-secondary {
	border-color: var(--ink);
	color: var(--ink);
	background: transparent;
}

.btn-secondary:hover {
	background: var(--ink);
	color: var(--on-ink);
}

.btn-block {
	width: 100%;
}

.link-quiet {
	font-weight: 600;
	text-decoration: none;
	color: var(--ink);
}

.link-quiet:hover {
	text-decoration: underline;
}

.link-arrow {
	font-weight: 650;
	color: var(--red-text-strong);
	text-decoration: none;
	/* Tikvlak 24px in plaats van 20px; bij een inline element verschuift de
	 * regel er niet door. */
	padding-block: 2px;
}

.link-arrow::after {
	content: " →";
}

.link-arrow:hover {
	text-decoration: underline;
}

/* ------------------------------------------------------------------ kop */
/* overflow-x: clip, zodat een dicht (verborgen) paneel dat breder uitvalt dan
 * het scherm de pagina niet zijwaarts laat scrollen. Clip, geen hidden: de
 * panelen hangen onder de kop en moeten verticaal zichtbaar blijven. */
.site-header {
	position: sticky;
	top: 0;
	z-index: 10;
	overflow-x: clip;
	background: var(--paper);
	border-bottom: 1px solid var(--line);
}

.header-row {
	display: flex;
	align-items: center;
	gap: 28px;
	min-height: calc(var(--header-h) - 1px);
}

.brand {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	color: var(--ink);
	flex: none;
	/* Het woordmerk is 22px hoog; zo is het tikvlak 44px zonder dat de kop verschuift. */
	padding-block: 11px;
	margin-block: -11px;
}

.logo {
	display: inline-flex;
	align-items: center;
	gap: 9px;
}

.logo svg {
	width: 22px;
	height: 22px;
	/* Merkrood, ook in donker (een vlak, geen tekst), zoals op Instagram. */
	color: var(--red);
}

.logo-word {
	font-size: 1.35rem;
	font-weight: 750;
	letter-spacing: -0.03em;
	line-height: 1;
}

.main-nav ul,
.lang-switch ul,
.site-footer ul,
.mobile-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Menu met uitklappanelen (header.php, assets/js/nav.js). Een hoofdwoord
 * opent een paneel met alle pagina's eronder, elk met een zwart lijnicoon.
 * Hover opent via CSS; .is-open (klik) en .is-closed (Escape, tweede klik)
 * komen uit het script. */
/* De menuwoorden staan los van het logo, niet er tegenaan. De kopregel heeft
 * 28px tussenruimte; hier komt er evenveel bij, zodat het merk links op zichzelf
 * staat en de navigatie als eigen groep leest. De knoppen rechts hangen aan
 * margin-left:auto en verschuiven dus niet mee. */
.main-nav {
	align-self: stretch;
	display: flex;
	margin-left: 28px;
}

.nav-list {
	display: flex;
	align-items: stretch;
	gap: 2px;
}

.nav-item {
	display: flex;
	align-items: center;
}

.nav-item > a,
.nav-trigger {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 8px 10px;
	border: 0;
	background: none;
	font: inherit;
	font-size: 1rem;
	font-weight: 600;
	color: var(--graphite);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: color 0.15s ease;
}

/* Open of huidig woord: een dunne rode streep eronder die van links inschuift. */
.nav-item > a::after,
.nav-trigger::after {
	content: "";
	position: absolute;
	left: 10px;
	right: 10px;
	bottom: 2px;
	height: 2px;
	border-radius: 1px;
	background: var(--red);
	scale: 0 1;
	transform-origin: left center;
	transition: scale 0.2s ease;
}

.nav-item > a:hover,
.nav-trigger:hover,
.nav-trigger[aria-expanded="true"],
.nav-item > a[aria-current="page"],
.nav-trigger[data-current] {
	color: var(--ink);
}

.nav-item > a:hover::after,
.nav-trigger:hover::after,
.nav-trigger[aria-expanded="true"]::after,
.nav-item > a[aria-current="page"]::after,
.nav-trigger[data-current]::after {
	scale: 1 1;
}

.nav-chevron {
	width: 14px;
	height: 14px;
	flex: none;
	transition: rotate 0.2s ease;
}

.nav-trigger[aria-expanded="true"] .nav-chevron,
.m-group[open] > summary .nav-chevron {
	rotate: 180deg;
}

.has-drop {
	position: relative;
}

/* Het brede paneel hangt aan de kop (sticky, dus positioned) en staat in het
 * midden; de kleine panelen hangen onder hun eigen woord. */
.mega {
	--mx: -50%;
	position: absolute;
	top: 100%;
	left: 50%;
	z-index: 30;
	/* Even breed als de site zelf: het paneel stond op een vaste 1320px en
	 * stak daarmee buiten de kolom uit waar de kop en de pagina op staan.
	 * Met de scheidingslijnen tussen de pijlers (3 okt) mag het brede paneel
	 * 24px per kant buiten de kolom (founder: "mag iets groeien"); de kleine
	 * panelen (.has-drop) houden hun eigen breedte. */
	width: min(calc(var(--wrap) + 48px), calc(calc(100vw / var(--vz, 1)) - 32px));
	padding-top: 10px; /* brug tussen woord en paneel: hover valt niet weg */
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	translate: var(--mx) -6px;
	transition: opacity 0.16s ease, translate 0.16s ease, visibility 0s linear 0.16s;
}

.has-drop > .mega {
	--mx: 0;
	left: -12px;
	width: 38rem;
}

.has-drop > .mega-company {
	width: 24rem;
}

/* Negen gratis tools: drie kolommen, anders wordt het paneel vijf rijen hoog. */
.has-drop > .mega-tools {
	width: 56rem;
}

.has-mega.is-open > .mega {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	translate: var(--mx) 0;
	transition-delay: 0s;
}

/* Zonder script (of met .is-morph uit) opent hover via CSS. */
@media (hover: hover) {
	.main-nav:not(.is-morph) .has-mega:not(.is-closed):hover > .mega {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		translate: var(--mx) 0;
		transition-delay: 0.04s, 0.04s, 0s;
	}

	/* Van woord naar woord: het vorige paneel verdwijnt meteen. */
	.main-nav:not(.is-morph) .nav-list:hover .has-mega:not(:hover) > .mega {
		transition: none;
	}
}

/* Schuivend paneel (nav.js zet .is-morph, niet bij reduced motion). Eén
 * achtergrond, .nav-morph, schuift van paneel naar paneel en neemt zijn maat
 * aan; de inhoud glijdt in vanaf de kant van het nieuwe woord. De panelen
 * tekenen dan zelf geen kader. --sx/--sy zet het script per woord: waar de
 * inhoud staat zolang het paneel dicht is. */
.is-morph .mega {
	translate: var(--mx) 0;
	transition: opacity 0.22s ease, visibility 0s linear 0.22s;
}

.is-morph .has-mega.is-open > .mega {
	transition-delay: 0s;
}

.is-morph .mega-box {
	background: transparent;
	border-color: transparent;
	box-shadow: none;
}

.is-morph .mega-box > * {
	translate: var(--sx, 0) var(--sy, -6px);
	transition: translate 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.is-morph .has-mega.is-open > .mega .mega-box > * {
	translate: 0 0;
}

.is-morph .is-instant .mega-box > * {
	transition: none;
}

.nav-morph {
	position: absolute;
	top: -6px;
	left: 0;
	z-index: 29;
	box-sizing: border-box;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 16px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04), 0 28px 56px -24px rgba(0, 0, 0, 0.24);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.16s ease, top 0.16s ease, visibility 0s linear 0.16s;
}

.nav-morph.is-on {
	top: 0;
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
}

.nav-morph.is-moving {
	transition: opacity 0.16s ease, top 0.16s ease,
		translate 0.32s cubic-bezier(0.22, 1, 0.36, 1),
		width 0.32s cubic-bezier(0.22, 1, 0.36, 1),
		height 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.mega-box {
	overflow: hidden;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 16px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04), 0 28px 56px -24px rgba(0, 0, 0, 0.24);
}

.mega-grid {
	--mega-gap: 40px;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr)) 16rem;
	gap: 24px var(--mega-gap);
	padding: 20px 26px 10px;
}

/* SCHEIDINGSLIJN TUSSEN DE PIJLERS (founder, 3 okt): verticaal, in dezelfde
 * kleur en dikte als de lijn onder de pijlernaam, precies midden in de
 * kolomruimte. Een pseudo-element, geen rand: zo verschuift er niets aan de
 * kolommen zelf, en de promo's rechts (eigen vlak) krijgen er geen. */
.mega-col {
	position: relative;
}

.mega-col + .mega-col::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(var(--mega-gap) / -2);
	width: 1px;
	background: var(--line);
}

/* Pijlernaam als gewone kop met een dunne lijn eronder. */
.mega-h {
	margin: 0 0 4px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--line);
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--ink);
}

/* ÉÉN DOORLOPENDE LIJN ONDER DE VIER PIJLERNAMEN (founder, 8 okt): de lijn
 * onder elke naam loopt door de kolomruimte naar de vorige kolom, zodat er
 * één lijn staat van het begin van Groeien tot het eind van Beschermen, door
 * de verticale scheidingslijnen heen. Zelfde kleur, dikte en hoogte als de
 * lijn onder de naam; een pseudo-element, dus er verschuift niets. */
.mega-col + .mega-col .mega-h {
	position: relative;
}

.mega-col + .mega-col .mega-h::before {
	content: "";
	position: absolute;
	right: 100%;
	bottom: -1px;
	width: var(--mega-gap);
	height: 1px;
	background: var(--line);
}

/* De pijlernaam leidt naar zijn deel van /funktionen (founder, 23 sep). Rustig:
 * een pijltje verschijnt pas bij aanwijzen. */
.mega-h a {
	color: inherit;
	text-decoration: none;
}

.mega-h a::after {
	content: "\00a0→";
	opacity: 0;
	transition: opacity 0.12s ease;
}

.mega-h a:hover,
.mega-h a:focus-visible {
	color: var(--red-text);
}

.mega-h a:hover::after,
.mega-h a:focus-visible::after {
	opacity: 1;
}

.mega ul,
.m-group ul {
	display: grid;
	gap: 1px;
}

.mega-item {
	display: grid;
	grid-template-columns: 18px minmax(0, 1fr);
	gap: 12px;
	align-items: start;
	margin-inline: -10px;
	padding: 6px 10px;
	border-radius: 8px;
	color: var(--ink);
	text-decoration: none;
	transition: background-color 0.12s ease;
}

.mega-item:hover,
.mega-item[aria-current="page"] {
	background: var(--hover);
}

/* Losse zwarte lijniconen, zoals in de zijbalk van het dashboard. */
.mega-ico {
	display: block;
	width: 18px;
	height: 18px;
	margin-top: 1px;
	color: var(--ink);
}

.mega-ico svg {
	display: block;
	width: 18px;
	height: 18px;
}

.mega-txt {
	align-self: center;
	min-width: 0;
}

.mega-txt strong {
	display: block;
	font-size: 0.95rem;
	font-weight: 650;
	line-height: 1.3;
}

.mega-txt span {
	display: block;
	margin-top: 1px;
	font-size: 0.82rem;
	line-height: 1.3;
	color: var(--muted);
}

/* Eén zwart blok rechts in het Functies-paneel: wat alleen Sellgrip heeft, per
 * pijler één promo. De rode stempel staat er één keer linksboven en geldt
 * voor alle drie; een dunne witte lijn scheidt ze. Het blok is zo hoog als
 * zijn inhoud, met vaste tussenruimte: opgerekt tot de hoogste kolom duwde
 * space-between de promo's uit elkaar (founder, 23 sep). */
.mega-promos {
	align-self: start;
	display: grid;
	align-content: start;
	gap: 14px;
	padding: 18px;
	border-radius: 12px;
	background: var(--promo-bg);
	box-shadow: inset 0 0 0 1px var(--promo-line);
	color: #fff;
}

.mega-promo {
	display: flex;
	flex-direction: column;
	gap: 8px;
	color: inherit;
	text-decoration: none;
}

.mega-promo + .mega-promo {
	padding-top: 14px;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.mega-promo-tag {
	justify-self: start;
	padding: 5px 8px;
	border-radius: var(--radius);
	background: var(--red);
	font-size: 0.72rem;
	font-weight: 650;
	line-height: 1;
}

.mega-promo strong {
	font-size: 1.1rem;
	font-weight: 750;
	line-height: 1.2;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

.mega-promo-text {
	font-size: 0.86rem;
	line-height: 1.4;
	color: var(--promo-text);
}

.mega-promo-link {
	padding-top: 2px;
	font-weight: 650;
}

.mega-promo-link::after {
	content: "\00a0→";
}

.mega-promo:hover .mega-promo-link {
	text-decoration: underline;
}

.mega-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	padding: 11px 26px;
	border-top: 1px solid var(--line);
	background: var(--paper-2);
	font-size: 0.9rem;
}

/* Op dezelfde zijlijn als de rijen erboven (.mega-list, 28px). */
.mega-foot-end {
	justify-content: flex-end;
	padding-inline: 28px;
}

.mega-foot ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 20px;
}

.mega-foot-label {
	font-weight: 650;
}

.mega-foot ul a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--graphite);
	text-decoration: none;
}

.mega-foot ul a:hover {
	color: var(--ink);
	text-decoration: underline;
}

.mega-foot ul svg {
	width: 16px;
	height: 16px;
	color: var(--ink);
}

/* HETZELFDE RITME ALS HET BREDE PANEEL. Dit stond op 16px rondom met rijen op
 * 4px, terwijl .mega-grid 28px rondom en 24px kolomruimte heeft — en de
 * voetlink hieronder stond op weer een derde maat (20px). Drie ritmes in één
 * kop, en de twee kleine panelen kwamen er als de krappe van af.
 *
 * `.mega` ERVOOR IS NIET DECORATIEF. Deze lijsten staan in .main-nav, en de
 * lijstreset daar (`.main-nav ul { padding: 0 }`, hierboven) telt als
 * klasse+element en weegt dus zwaarder dan een losse `.mega-list`. Met alleen
 * de klasse werd de padding stilletjes genegeerd: het icoon stond op 1px van
 * de rand, precies de krapte die dit moest verhelpen. */
.mega .mega-list {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px 20px;
	/* Zelfde zijmaat als .mega-grid, zodat rij, icoon en tekst in alle drie de
	 * panelen op dezelfde lijnen beginnen. Verticaal iets krapper: deze
	 * panelen zijn kort en hebben geen kolomkoppen. */
	padding: 24px 28px;
}

.mega-company .mega-list {
	grid-template-columns: minmax(0, 1fr);
}

.mega-tools .mega-list {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	/* Dezelfde kolomruimte als bij Functies (--mega-gap), met de lijn erin. */
	column-gap: 40px;
}

/* SCHEIDINGSLIJN TUSSEN DE KOLOMMEN (founder, 5 okt): zoals bij Functies,
 * midden in de kolomruimte. De tools staan in één raster, dus de lijn hoort bij
 * elk item dat niet in de eerste kolom staat, en loopt over de rijruimte (6px)
 * door, zodat het één lijn wordt. */
.mega-tools .mega-list > li {
	position: relative;
}

.mega-tools .mega-list > li:not(:nth-child(3n + 1))::before {
	content: "";
	position: absolute;
	top: -3px;
	bottom: -3px;
	left: -20px;
	width: 1px;
	background: var(--line);
}

/* Smaller dan dit past het brede paneel niet naast "Ressourcen": terug naar twee kolommen. */
@media (max-width: 1180px) {
	.has-drop > .mega-tools {
		width: 38rem;
	}

	.mega-tools .mega-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Twee kolommen: de lijn hoort dan bij elk tweede item. */
	.mega-tools .mega-list > li:not(:nth-child(3n + 1))::before {
		content: none;
	}

	.mega-tools .mega-list > li:nth-child(2n)::before {
		content: "";
		position: absolute;
		top: -3px;
		bottom: -3px;
		left: -20px;
		width: 1px;
		background: var(--line);
	}
}

/* Net als in het brede paneel loopt het hover-vlak iets buiten de tekst: de
 * tekst begint op de padding, het vlak 10px daarvoor. Met margin: 0 begon het
 * vlak juist ín de padding, waardoor de rijen smaller oogden dan het paneel. */
.mega-list .mega-item {
	margin-inline: -10px;
}

@media (max-width: 1180px) {
	.mega-promo {
		display: none;
	}

	.mega-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Functies-paneel: elke tool met een korte uitleg van één of twee regels.
 * De teksten zijn zo geschreven dat ze op 1280px breed nooit meer dan twee
 * regels nemen; de clamp is alleen een vangnet, er hoort nooit "…" te staan
 * (founder, 23 sep: "het moet gewoon ademen"). */
@media (min-width: 1181px) {
	.mega-grid .mega-txt span {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
}

/* Laptops tot 860px hoogte (1280×720, 1366×768, 1440×800): iets dichter op
 * elkaar, niets weg. Het paneel mag nooit onder de rand vallen: past het toch
 * niet, dan scrolt het paneel zelf. */
/* Vanaf 861px hoog schaalt de lucht mee met de vensterhoogte in plaats van in
 * vaste stappen: het paneel vult het scherm tot net boven de rand, zodat
 * eronder niets van de hero doorschemert (founder, 23 sep). Het paneel is in
 * elke taal even hoog (de langste kolom bepaalt het); gemeten in nl/de/es. */
@media (min-width: 1181px) and (min-height: 861px) {
	.mega-grid ul {
		gap: clamp(3px, calc(3px + (calc(100vh / var(--vz, 1)) - var(--bar-h, 0px) - 870px) * 0.055), 19px);
	}

	.mega-grid .mega-item {
		padding-block: clamp(6px, calc(6px + (calc(100vh / var(--vz, 1)) - var(--bar-h, 0px) - 870px) * 0.0145), 10px);
	}

	.mega-grid .mega-txt span {
		margin-top: clamp(2px, calc(2px + (calc(100vh / var(--vz, 1)) - var(--bar-h, 0px) - 870px) * 0.0095), 5px);
		line-height: clamp(1.38em, calc(1.38em + (calc(100vh / var(--vz, 1)) - var(--bar-h, 0px) - 870px) * 0.008), 1.55em);
	}
}

/* DE GELE BALK TELT MEE (slop-check 1 okt). De balk (inc/launch-bar.php) staat
 * boven de kop en schuift hem omlaag; alle hoogtes hieronder rekenden met het
 * hele venster, waardoor het paneel 20px onder de rand viel zolang de balk er
 * stond. --bar-h is de hoogte van de balk: hier de vaste maat van één regel,
 * zodat het ook zonder script klopt; nav.js zet de gemeten hoogte op de kop
 * (0 zodra de balk is weggeklikt) en perst het paneel zo nodig verder in.
 * Laatste vangnet, op elke hoogte: het paneel scrolt zelf. */
.launch-bar ~ .site-header {
	--bar-h: 41px;
}

@media (min-width: 1181px) {
	.mega-box {
		max-height: calc(calc(100dvh / var(--vz, 1)) - var(--header-h) - var(--bar-h, 0px) - 10px - 12px);
		overflow-y: auto;
		overscroll-behavior: contain;
	}
}

@media (min-width: 1181px) and (max-height: 860px) {
	.mega-grid {
		--mega-gap: 32px;
		grid-template-columns: repeat(4, minmax(0, 1fr)) 15rem;
		padding-top: 16px;
	}

	.mega-grid .mega-item {
		padding-block: 3px;
	}

	.mega-foot {
		padding-block: 8px;
	}

	.mega-promos {
		gap: 10px;
		padding: 16px;
	}

	.mega-promo {
		gap: 6px;
	}

	.mega-promo + .mega-promo {
		padding-top: 10px;
	}

	.mega-promo strong {
		font-size: 1rem;
	}

	.mega-promo-text {
		font-size: 0.8rem;
		line-height: 1.35;
	}
}

/* Nog lager (1280×720): de rijen nog iets dichter, zodat het paneel ook daar
 * zonder intern scrollen past. */
/* Laptops van 761–860px hoog: de lucht schaalt mee met de vensterhoogte, in
 * plaats van harde stappen (founder, 23 sep: een MacBook-venster van ±810px
 * viel net in de krapste stand). Gemeten tot de langste taal (es): het paneel
 * komt op geen enkele hoogte onder de rand. */
@media (min-width: 1181px) and (min-height: 761px) and (max-height: 860px) {
	.mega-grid ul {
		gap: clamp(1px, calc((calc(100vh / var(--vz, 1)) - var(--bar-h, 0px) - 760px) * 0.04), 4px);
	}

	.mega-grid .mega-item {
		padding-block: clamp(2px, calc((calc(100vh / var(--vz, 1)) - var(--bar-h, 0px) - 700px) * 0.035), 5px);
	}

	.mega-grid .mega-txt span {
		margin-top: 2px;
		line-height: 1.38;
	}
}

@media (min-width: 1181px) and (max-height: 760px) {
	.mega-grid {
		padding-top: 12px;
	}

	.mega-h {
		margin-bottom: 2px;
		padding-bottom: 6px;
	}

	.mega-grid .mega-item {
		padding-block: 2px;
	}

	.mega-foot {
		padding-block: 6px;
	}
}

.header-actions {
	display: flex;
	align-items: center;
	gap: 20px;
}

/* Zoeken in de kop (header.php, assets/js/search.js, inc/search.php).
 * Dicht: een vergrootglas links naast de taalkiezer, even stil als de
 * menuwoorden. Open: de balk schuift naar links uit tot vlak na het logo, over
 * de menuwoorden heen (die vervagen), met eronder de treffers terwijl u typt.
 * Het formulier zelf blijft 40px breed in de rij staan, zodat niets rechts
 * ervan verspringt; de balk hangt er absoluut aan en groeit alleen in
 * breedte. Het script zet de maten (--hs-w, --hs-pl, --hs-pw, --hs-pt). */
.hsearch {
	--hs-w: 40px;
	position: relative;
	flex: none;
	width: 40px;
	height: 40px;
	margin-left: auto;
	margin-right: -20px; /* 8px tot de licht/donker-knop ernaast */
}

.hsearch-bar {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 31;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: var(--paper);
	box-shadow: inset 0 0 0 1px transparent;
	transition: box-shadow 0.2s ease;
}

.hsearch.is-open .hsearch-bar {
	width: var(--hs-w);
	box-shadow: inset 0 0 0 1px var(--line), 0 8px 24px -16px rgba(0, 0, 0, 0.18);
}

.hsearch.is-open .hsearch-bar:focus-within {
	box-shadow: inset 0 0 0 1.5px var(--ink), 0 8px 24px -16px rgba(0, 0, 0, 0.18);
}

.hsearch-btn {
	position: absolute;
	top: 0;
	right: 0;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: none;
	color: var(--graphite);
	cursor: pointer;
	transition: color 0.15s ease, background-color 0.15s ease;
}

.hsearch-btn:hover {
	color: var(--ink);
	background: var(--hover);
}

.hsearch.is-open .hsearch-btn:hover {
	background: none;
}

/* Vergrootglas en kruis liggen op elkaar; open wordt de knop de sluitknop. */
.hsearch-ico {
	grid-area: 1 / 1;
	width: 19px;
	height: 19px;
	transition: opacity 0.15s ease, rotate 0.2s ease;
}

.hsearch-ico-close,
.hsearch.is-open .hsearch-ico-open {
	opacity: 0;
	rotate: -45deg;
}

.hsearch.is-open .hsearch-ico-close {
	opacity: 1;
	rotate: 0deg;
}

.hsearch-lead {
	position: absolute;
	top: 11px;
	left: 13px;
	width: 18px;
	height: 18px;
	color: var(--muted);
	opacity: 0;
	transition: opacity 0.15s ease;
}

.hsearch-input {
	position: absolute;
	top: 0;
	left: 40px;
	right: 44px;
	height: 40px;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: 1rem; /* 16px: geen inzoomen op de iPhone */
	color: var(--ink);
	outline: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s ease, visibility 0s linear 0.15s;
	-webkit-appearance: none;
	appearance: none;
}

.hsearch-input::placeholder {
	color: var(--placeholder);
	opacity: 1;
}

.hsearch-input::-webkit-search-cancel-button,
.hsearch-input::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
}

.hsearch.is-open .hsearch-lead,
.hsearch.is-open .hsearch-input {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.18s ease 0.1s, visibility 0s;
}

/* Schuift uit: breedte, 280ms, ease-out. Alleen breedte verandert, dus de
 * knop rechts staat stil en de linkerrand beweegt naar het logo. */
@media (prefers-reduced-motion: no-preference) {
	.hsearch-bar {
		transition: width 0.28s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.2s ease;
	}
}

/* Licht of donker (inc/darkmode.php, assets/js/nav.js). Zelfde knop als het
 * vergrootglas (.hsearch-btn): geen rondje, alleen het icoon (founder, 29 sep).
 * Rechts naast het vergrootglas: 8px ertussen (de 28px rijruimte min 20), en
 * 20px tot de taalkiezer. De zoekbalk groeit vanaf het vergrootglas naar links
 * en raakt de knop dus niet. Licht toont de zon, donker de maan. */
.theme-toggle {
	flex: none;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	margin-right: -8px;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: none;
	color: var(--graphite);
	cursor: pointer;
	transition: color 0.15s ease, background-color 0.15s ease;
}

.theme-toggle:hover {
	color: var(--ink);
	background: var(--hover);
}

.theme-toggle svg {
	grid-area: 1 / 1;
	width: 19px;
	height: 19px;
}

.theme-ico-moon,
html[data-theme="dark"] .theme-ico-sun {
	display: none;
}

html[data-theme="dark"] .theme-ico-moon {
	display: block;
}

/* De menuwoorden vervagen zolang de balk open is. */
.main-nav {
	transition: opacity 0.18s ease, visibility 0s linear 0s;
}

.site-header.is-searching .main-nav {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.14s ease, visibility 0s linear 0.14s;
}

/* Treffers onder de balk: dezelfde kaart als de menupanelen. */
.hsearch-panel {
	position: absolute;
	top: var(--hs-pt, 52px);
	left: var(--hs-pl, 0);
	z-index: 30;
	width: var(--hs-pw, 100%);
	max-height: calc(calc(100dvh / var(--vz, 1)) - var(--header-h) - var(--bar-h, 0px) - 24px);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 8px;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 16px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04), 0 28px 56px -24px rgba(0, 0, 0, 0.24);
}

.hsearch-panel[hidden] {
	display: none;
}

.hsearch-group + .hsearch-group {
	margin-top: 4px;
	padding-top: 4px;
	border-top: 1px solid var(--line);
}

.hsearch-h {
	margin: 0;
	padding: 8px 10px 4px;
	font-size: 0.78rem;
	font-weight: 650;
	color: var(--muted);
}

.hsearch-panel .mega-item {
	margin-inline: 0;
	padding: 8px 10px;
	scroll-margin: 8px;
}

.hsearch-panel .mega-txt span {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.hsearch-panel .mega-item.is-active {
	background: var(--hover);
}

.hsearch-empty {
	margin: 0;
	padding: 12px 10px;
	color: var(--muted);
}

.hsearch-all {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 4px;
	padding: 10px;
	border-top: 1px solid var(--line);
	border-radius: 0 0 8px 8px;
	font-size: 0.9rem;
	font-weight: 650;
	color: var(--ink);
	text-decoration: none;
}

.hsearch-all::after {
	content: "→";
	transition: translate 0.15s ease;
}

.hsearch-all:hover::after,
.hsearch-all.is-active::after {
	translate: 3px 0;
}

.hsearch-all.is-active,
.hsearch-all:hover {
	background: var(--hover);
}

/* Vlaggetjes in de taalkiezer (inc/flags.php). De ronde hoek en het randje
 * staan hier en niet in elke SVG: het randje moet het verschil maken tussen
 * papier en een witte baan (Polen boven, Nederland en Frankrijk in het
 * midden), anders zweeft er rood in het niets. */
.flag {
	flex: none;
	display: block;
	width: 18px;
	height: 12.6px;
	clip-path: inset(0 round 2px);
	box-shadow: inset 0 0 0 1px var(--flag-edge);
}

.lang-switch ul {
	display: flex;
	gap: 2px;
}

.lang-switch a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 6px;
	font-size: 0.85rem;
	font-weight: 650;
	letter-spacing: 0.02em;
	text-decoration: none;
	color: var(--muted);
	border-radius: var(--radius);
}

.lang-switch a:hover {
	color: var(--ink);
}

.lang-switch a[aria-current="true"] {
	color: var(--ink);
	background: var(--hover);
}

.mobile-menu {
	display: none;
	margin-left: auto;
}

.mobile-menu > summary {
	list-style: none;
	cursor: pointer;
	/* Zelfde knop als het vergrootglas (.hsearch-btn): 40 x 40, geen rand. */
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	color: var(--graphite);
}

/* Alleen met een muis: op een telefoon blijft :hover na een tik hangen. */
@media (hover: hover) {
	.mobile-menu > summary:hover {
		color: var(--ink);
		background: var(--hover);
	}
}

.mm-ico {
	grid-area: 1 / 1;
	width: 21px;
	height: 21px;
	transition: opacity 0.15s ease, rotate 0.2s ease;
}

.mm-ico-close,
.mobile-menu[open] .mm-ico-open {
	opacity: 0;
	rotate: -45deg;
}

.mobile-menu[open] .mm-ico-close {
	opacity: 1;
	rotate: 0deg;
}

.mobile-menu > summary::-webkit-details-marker {
	display: none;
}

/* Scherm achter het open menu: licht grijs, geen vervaging. Het is een
 * stukje van de knop zelf, dus een tik erop sluit het menu (geen script). */
.mobile-menu[open] > summary::before {
	content: "";
	position: fixed;
	inset: var(--header-h) 0 0;
	background: var(--overlay);
	cursor: default;
}

.mobile-menu-panel {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	max-height: calc(calc(100dvh / var(--vz, 1)) - 69px);
	overflow-y: auto;
	background: var(--paper);
	border-bottom: 1px solid var(--line);
	padding: 4px var(--gutter) 24px;
	display: grid;
	align-content: start;
}

/* Dicht: het paneel echt weg. Chrome legt de inhoud van een dichte <details>
 * toch op, met de knop als kader; op 320px stak het Nederlandse menu dan
 * 90px buiten beeld en scrolde de hele pagina opzij. */
.mobile-menu:not([open]) > .mobile-menu-panel {
	display: none;
}

.mobile-menu-panel > .btn {
	margin-top: 20px;
}

.mobile-menu-panel > .lang-switch {
	margin-top: 16px;
}

.m-group {
	border-bottom: 1px solid var(--line);
}

.m-group > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 0;
	font-size: 1.1rem;
	font-weight: 600;
	list-style: none;
	cursor: pointer;
}

.m-group > summary::-webkit-details-marker {
	display: none;
}

.m-group .mega-h {
	margin: 10px 0 2px;
}

.m-group ul {
	padding-bottom: 6px;
}

.m-group .mega-item {
	grid-template-columns: 18px minmax(0, 1fr);
	margin-inline: 0;
	padding: 8px 0;
}

.m-group .mega-item:hover {
	background: none;
}

.m-group .link-arrow {
	display: inline-block;
	margin: 6px 0 16px;
}

.m-links li a {
	display: block;
	padding: 12px 0;
	font-size: 1.1rem;
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid var(--line);
}

/* Onder 1180px het mobiele menu. Op 920px stonden tot 1140px (Frans, Duits)
 * de knoppen rechts buiten beeld: de volle kop is in elke taal breder dan dat.
 * Vanaf 1160px past hij in alle negen, uitgelogd (de breedste stand). */
@media (max-width: 1180px) {
	.main-nav,
	.header-actions {
		display: none;
	}

	.mobile-menu {
		display: block;
		margin-left: 0;
	}

	/* ONZICHTBAAR OPEN OP DE IPHONE (founder, 28 sep): "Menu" ging open, maar
	 * Safari tekende het paneel pas na een tweede tik. Een absoluut paneel in
	 * een sticky kop met overflow-x: clip wordt daar niet opnieuw geschilderd.
	 * De clip is er voor de brede panelen van de desktopkop; die zijn hier
	 * verborgen, en het dichte paneel neemt geen ruimte (display: none). Het
	 * open paneel krijgt bovendien een eigen laag, zodat het meteen verschijnt. */
	.site-header {
		overflow-x: visible;
	}

	.mobile-menu[open] > .mobile-menu-panel {
		transform: translateZ(0);
		-webkit-transform: translateZ(0);
	}

	/* Mobiel: het vergrootglas staat naast de knop Menü. Open loopt de balk
	 * over het logo tot de linkerrand; het logo vervaagt zolang. */
	/* Vergrootglas, licht/donker en Menü: 8px en 12px ertussen. */
	.hsearch {
		margin-right: -20px;
	}

	.theme-toggle {
		margin-right: -16px;
	}

	.brand {
		transition: opacity 0.14s ease;
	}

	.site-header.is-searching .brand {
		opacity: 0;
		pointer-events: none;
	}
}

/* Net boven het breekpunt (1181–1300px) is de volle kop met het vergrootglas
 * in het Frans en Duits 30–50px te breed. Iets minder lucht tussen logo,
 * menu en knoppen, en tussen de menuwoorden; niets valt weg. */
@media (min-width: 1181px) and (max-width: 1300px) {
	.header-row {
		gap: 20px;
	}

	.main-nav {
		margin-left: 8px;
	}

	/* 8px tussen vergrootglas en licht/donker, ook bij de krappere rij. */
	.hsearch {
		margin-right: -12px;
	}

	.nav-item > a,
	.nav-trigger {
		padding-inline: 8px;
	}

	.nav-item > a::after,
	.nav-trigger::after {
		left: 8px;
		right: 8px;
	}
}

/* Tablet (768–1180px): het menu was één kolom van ruim dertig regels. De
 * pijlers van Funktionen staan naast elkaar (twee, vanaf 1000px vier), de
 * lijsten van Ressourcen en Ratgeber in twee kolommen. */
@media (min-width: 768px) {
	.m-cols {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 32px;
	}

	.m-group > ul {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 32px;
	}
}

@media (min-width: 1000px) {
	.m-cols {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		column-gap: 24px;
	}

	.m-group > ul {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ------------------------------------------------------------- secties */
.section {
	padding-block: var(--section);
}

.section-alt {
	background: var(--paper-2);
}

/* Twee grijze secties achter elkaar zijn één vlak: de tweede hoeft de ruimte
 * boven zich niet nog eens te nemen (slop-check 1 okt: 224px leeg grijs). */
.section-alt + .section-alt {
	padding-top: 0;
}

.section-head {
	max-width: 44rem;
	margin-bottom: clamp(32px, calc(5vw / var(--vz, 1)), 56px);
}

.section-head .lead {
	margin-top: 16px;
}

/* ------------------------------------------------------ schermafbeeldingen */
.shot {
	border: 1px solid var(--line);
	border-radius: var(--radius-card);
	overflow: hidden;
	background: var(--card);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 18px 40px -20px rgba(0, 0, 0, 0.18);
}

/* Licht en donker staan als twee <img>'s in .shot (sellgrip_shot in
 * inc/tools.php). De donkere is standaard weg; zo laadt de browser hem niet
 * (loading="lazy" + display:none). Donker: zie "donkere modus" onderaan. */
.shot .shot-dark {
	display: none;
}

/* SCHERMAFBEELDINGEN OP EEN TELEFOON (slop-check 1 okt). Een dashboardopname
 * van 1440px breed werd in een kader van 356px gezet: tekst van 3 à 4px, een
 * grijs postzegeltje. Nu staat het beeld daar op 66% (tekst rond 9px) in een
 * kader dat zijwaarts schuift, zonder script. De zijbalk van het dashboard
 * (232px, alleen navigatie) valt links weg, zodat het kader begint bij de
 * inhoud van de pagina. De maten komen uit sellgrip_shot() (inc/tools.php):
 * --shot-w en .shot-app, voor elk beeld vanzelf. De hoogte volgt uit
 * width/height op de <img>: er verspringt niets, en lazy laden blijft.
 *
 * De aanwijzing dat er meer is: het beeld loopt rechts zichtbaar door, en in
 * de hoek staat een klein rond teken met twee pijlen. Waar de browser het
 * kan, vervaagt dat teken zodra je schuift (scroll-timeline); anders blijft
 * het staan. */
@media (max-width: 760px) {
	.shot-figure {
		position: relative;
		timeline-scope: --shot-pan;
	}

	.shot[style*="--shot-w"] {
		--shot-scale: 0.66;
		overflow-x: auto;
		overflow-y: hidden;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
		scroll-timeline: --shot-pan x;
	}

	.shot[style*="--shot-w"]::-webkit-scrollbar {
		display: none;
	}

	/* .shot-figure ervoor: toolpage.css zet later `.tp-shot .shot img` op 100%. */
	.shot-figure .shot[style*="--shot-w"] img {
		width: calc(var(--shot-w) * var(--shot-scale) * 1px);
		max-width: none;
		height: auto;
	}

	.shot-figure .shot.shot-app img {
		margin-left: calc(-232px * var(--shot-scale));
	}

	.shot-figure:has(.shot[style*="--shot-w"])::before,
	.shot-figure:has(.shot[style*="--shot-w"])::after {
		content: "";
		position: absolute;
		right: 10px;
		bottom: 10px;
		width: 36px;
		height: 36px;
		border-radius: 50%;
		pointer-events: none;
	}

	.shot-figure:has(.shot[style*="--shot-w"])::before {
		background: var(--card);
		border: 1px solid var(--line);
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
	}

	.shot-figure:has(.shot[style*="--shot-w"])::after {
		background: var(--ink);
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 8h11M5.25 5.25 2.5 8l2.75 2.75M10.75 5.25 13.5 8l-2.75 2.75'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 8h11M5.25 5.25 2.5 8l2.75 2.75M10.75 5.25 13.5 8l-2.75 2.75'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
	}

	@supports (animation-timeline: --shot-pan) {
		@keyframes sellgrip-shot-hint {
			from { opacity: 1; }
			to { opacity: 0; }
		}

		.shot-figure:has(.shot[style*="--shot-w"])::before,
		.shot-figure:has(.shot[style*="--shot-w"])::after {
			animation: sellgrip-shot-hint linear both;
			animation-timeline: --shot-pan;
			animation-range: 0 48px;
		}
	}
}

.shot figcaption,
.caption {
	font-size: 0.85rem;
	color: var(--muted);
	margin-top: 10px;
}

/* ------------------------------------------------------------ labels */
.tag {
	display: inline-block;
	font-size: 0.78rem;
	font-weight: 650;
	line-height: 1;
	padding: 5px 8px;
	border-radius: var(--radius);
	border: 1px solid var(--line);
	color: var(--graphite);
	white-space: nowrap;
}

.tag-red {
	border-color: transparent;
	background: var(--red-tint);
	color: var(--red-text-strong);
}

.tag-plan {
	border-style: dashed;
	color: var(--muted);
}

/* ---------------------------------------------------------------- voet */
.site-footer {
	background: var(--paper-2);
	border-top: 1px solid var(--line);
	padding-top: 56px;
	font-size: 0.95rem;
}

.footer-grid {
	display: grid;
	grid-template-columns: 1.6fr repeat(4, 1fr);
	gap: 32px;
}

.site-footer h2 a {
	text-decoration: none;
	color: inherit;
}

.footer-brand p {
	margin-top: 12px;
	color: var(--graphite);
	max-width: 22em;
}

.footer-note {
	color: var(--muted) !important;
	font-size: 0.88rem;
}

.site-footer h2 {
	font-size: 0.95rem;
	letter-spacing: 0;
	margin-bottom: 12px;
}

/* 4px boven en onder in plaats van 8px tussen de rijen: zelfde ritme, maar
 * een tikvlak van 26px in plaats van 18px. Alleen de links in de lijst: de
 * kop "Gratis tools" is ook een link en stond daardoor 4px lager. */
.site-footer nav li a,
.site-footer .consent-open {
	display: inline-block;
	padding-block: 4px;
	text-decoration: none;
	color: var(--graphite);
}

/* Aanraken: rijen van 44px, en de kop-link krijgt hetzelfde tikvlak zonder
 * te verschuiven (negatieve marge). */
@media (pointer: coarse) {
	.site-footer nav li a,
	.site-footer .consent-open {
		padding-block: 10px;
	}

	.site-footer h2 a {
		display: inline-block;
		padding-block: 14px;
		margin-block: -14px;
	}
}

.site-footer nav a:hover {
	color: var(--ink);
	text-decoration: underline;
}

.site-footer nav a.footer-more {
	font-weight: 650;
	color: var(--ink);
}

.site-footer nav a.footer-more::after {
	content: "\00A0\2192"; /* de pijl breekt niet los naar een eigen regel */
}

.footer-base {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 48px;
	padding-block: 20px 28px;
	color: var(--muted);
	font-size: 0.85rem;
	position: relative;
}

/* De lijn boven de voetregel loopt van inhoud tot inhoud, net als de zwarte
 * lijn van de afsluiter erboven. Als rand op .wrap liep hij door de goot en
 * was hij 64px breder (slop-check 1 okt). */
.footer-base::before {
	content: "";
	position: absolute;
	top: 0;
	left: var(--gutter);
	right: var(--gutter);
	border-top: 1px solid var(--line);
}

.footer-base p {
	max-width: 52em;
}

/* Bedrijfsregel (ProductTickler B.V.) en de onafhankelijkheidsverklaring. */
.footer-legal-lines {
	display: grid;
	gap: 6px;
}

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

	.footer-brand {
		grid-column: 1 / -1;
	}
}

/* ------------------------------------------------------------- tekstpagina */
.prose {
	max-width: 42rem;
	padding-block: var(--section);
}

.prose h1 {
	margin-bottom: 24px;
}

.prose p + p {
	margin-top: 1em;
}

figure {
	margin: 0;
}

.section-tight {
	padding-block: clamp(24px, calc(4vw / var(--vz, 1)), 48px) var(--section);
}

/* ---------------------------------------------------------------- hero
 * Twee kolommen: links de tekst, rechts de dashboarddemo
 * (parts/hero-demo.php, eigen CSS in hero-demo.css). Onder 960px onder
 * elkaar. */
/* Boven krapper dan onder, en met opzet. De demo is een staand scherm van
 * ruim 600px; met 88px erboven eindigde hij op een 800px-hoog laptopscherm
 * vrijwel op de vouw, waardoor de hele hero op slot zat. Kop en demo schuiven
 * samen omhoog (align-items: center houdt ze op elkaar), de ruimte eronder
 * blijft staan. */
.hero {
	display: flex;
	align-items: center;
	min-height: calc(calc(100vh / var(--vz, 1)) - var(--header-h));
	min-height: calc(calc(100svh / var(--vz, 1)) - var(--header-h));
	padding-block: clamp(24px, calc(2.6vw / var(--vz, 1)), 40px) clamp(40px, calc(5vw / var(--vz, 1)), 72px);
	overflow-x: clip;
}

.hero > .wrap {
	width: 100%;
}

/* DE HERO DEELT DE CONTAINER VAN DE REST VAN DE SITE (--wrap, 1160px).
 * Hier stond `.hero .wrap { max-width: 1280px }` om de demo ruimte te geven.
 * Die container is echter gecentreerd, dus de extra 120px werd over beide
 * kanten verdeeld: kop en knoppen begonnen 60px links van het logo, en de
 * demo eindigde 60px rechts van de CTA in de kop. Op elke andere pagina lijnt
 * de eerste kolom wél op het logo uit, dus viel juist de landing uit de toon.
 * De ruimte voor de demo komt nu uit de tussenruimte hieronder. */
.hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
	/* Krapper dan elders (was 80px). Binnen de smallere container houdt de
	 * demo daarmee vrijwel zijn oude breedte; de tekstkolom merkt er niets
	 * van, want .hero-copy is toch al op 36rem gekapt. */
	gap: clamp(40px, calc(4vw / var(--vz, 1)), 56px);
	align-items: center;
}

.hero-copy {
	max-width: 36rem;
}

.hero h1 {
	font-size: clamp(2.4rem, 1.3rem + calc(2.6vw / var(--vz, 1)), 3.6rem);
}

.hero .lead {
	margin-top: 22px;
}

/* DE ROUTEKEUZE IN DE HERO (templates/home.php, assets/js/hero-route.js):
 * "Verkoop je al op Kaufland?" met "Ja" en "Nog niet". Beide standen staan in
 * de HTML en delen één vak van het raster (.hero-swap), dus het vak is zo hoog
 * als de hoogste van de twee: bij het wisselen verspringt er niets, ook de kop
 * niet (de hero centreert verticaal). De niet-gekozen stand is onzichtbaar en
 * daarmee ook weg voor toetsenbord en schermlezer. data-route="new" op
 * .hero-copy = "Nog niet"; zonder attribuut "Ja". */
.hero-swap {
	display: grid;
}

.hero-swap > * {
	grid-area: 1 / 1;
	min-width: 0;
}

.hero-swap > [data-route-panel="new"],
.hero-copy[data-route="new"] .hero-swap > [data-route-panel="yes"] {
	visibility: hidden;
}

.hero-copy[data-route="new"] .hero-swap > [data-route-panel="new"] {
	visibility: visible;
}

/* De vraag staat in elke taal boven de keuze (founder, 1 okt avond). Naast
 * elkaar paste alleen in de korte talen, waardoor de hero per taal een andere
 * opbouw had. De knop en de tekstlink eronder staan op één regel; de tekst van
 * de link (home.cta_free, home.route.guide) is daar per taal op gemeten: knop
 * + 24px + link moet binnen de kolom van 547px passen. */
.hero-route {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	margin-top: 26px;
}

.hero-route-q {
	font-size: 0.95rem;
	font-weight: 650;
	color: var(--ink);
}

/* Zelfde vorm als de keuze maand/jaar op de prijzenpagina (.interval). */
.hero-route-seg {
	display: inline-flex;
	max-width: 100%;
	padding: 3px;
	border: 1px solid var(--line);
	border-radius: 6px;
	background: var(--card);
}

/* 44px hoog: een vol tikvlak, ook op een telefoon. */
.hero-route-opt {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 4px 10px;
	min-width: 64px;
	min-height: 44px;
	padding: 6px 16px;
	border-radius: var(--radius);
	font-size: 0.95rem;
	font-weight: 650;
	line-height: 1.2;
	color: var(--graphite);
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.hero-route-opt:hover {
	background: var(--hover);
}

.hero-copy:not([data-route="new"]) .hero-route-opt[data-route-opt="yes"],
.hero-copy[data-route="new"] .hero-route-opt[data-route-opt="new"] {
	background: var(--ink);
	color: var(--on-ink);
}

.hero-route-opt:focus-visible {
	outline-offset: 2px;
}

/* Het ene dat de blik naar "Nog niet" trekt: wat de actie oplevert, klein en
 * rood aan de keuze vast. Alleen zolang SELLGRIP26 loopt. */
.hero-route-tag {
	padding: 5px 8px;
	border-radius: var(--radius);
	background: var(--red-tint);
	color: var(--red-text-strong);
	font-size: 0.78rem;
	line-height: 1;
	white-space: nowrap;
}

/* Gekozen: het vlak is zwart (in donker wit). Vaste kleuren, want op beide
 * leest alleen donkerrood op lichtroze. */
.hero-copy[data-route="new"] .hero-route-tag {
	background: #fdf2f2;
	color: #a30d16;
}

/* De vraag staat al tussen inleiding en knoppen; de knoppen sluiten daarom
 * dichter aan dan elders (.actions: 32px). */
.hero-swap .hero-actions {
	margin-top: 20px;
}

/* De knop van "Nog niet" is in sommige talen te lang voor 390px: hij mag over
 * twee regels. */
.hero-swap > [data-route-panel="new"] .btn {
	white-space: normal;
	text-align: center;
}

@media (prefers-reduced-motion: no-preference) {
	/* De uitdijende ring om het label is weg (slop-check 1 okt): het roze
	 * label trekt de blik al, een gekleurde gloed erbij is te veel. */

	/* Na een eigen keuze (.is-switched, niet bij het laden) komt de nieuwe
	 * stand kort in beeld. */
	@keyframes sellgrip-route-in {
		from { opacity: 0; }
		to { opacity: 1; }
	}

	.hero-copy.is-switched:not([data-route="new"]) [data-route-panel="yes"],
	.hero-copy.is-switched[data-route="new"] [data-route-panel="new"] {
		animation: sellgrip-route-in 0.18s ease-out both;
	}
}

@media (max-width: 959px) {
	.hero-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}
}

/* TEKST EN DEMOVENSTER EVEN HOOG (founder, 1 okt): naast elkaar begint de kop
 * op de bovenrand van het venster en eindigt de onderste regel op de
 * onderrand. De tekst blijft één dicht blok en bepaalt de hoogte; de demo
 * neemt die over en schaalt als geheel mee (letters in verhouding tot de
 * hoogte in plaats van de breedte), zodat de kaartjes op hun plek over de
 * grafiek blijven. Is de tekst hoger dan de demo op volle breedte, dan groeit
 * de grafiek een stukje mee; is het verschil te groot (smalle kolom), dan
 * staat de demo ernaast in het midden, zoals voorheen.
 * De twee kleine afstanden leggen de rand op de letters zelf in plaats van op
 * hun regelvak: boven het wit boven de hoofdletters van de kop, in verhouding
 * tot zijn lettergrootte (.hero h1), onder het wit onder de laatste regel. */
@media (min-width: 960px) {
	.hero-grid {
		align-items: stretch;
	}

	/* .hero ervoor: hero-demo.css laadt later en zet zelf inline-size. */
	.hero .hero-demo {
		container-type: size;
		display: flex;
		align-items: center;
	}

	.hero-demo-box {
		width: 100%;
		height: 100%;
		max-height: 106cqw;
	}

	.hero-demo .demo-frame {
		position: absolute;
		inset: calc(clamp(2.4rem, 1.3rem + calc(2.6vw / var(--vz, 1)), 3.6rem) * 0.122) 0 4.5px;
	}

	/* 35,3em is de hoogte van het venster in zijn eigen letters; 13px zijn de
	 * twee afstanden hierboven samen. */
	.hero-demo .demo-frame,
	.hero-demo .dm-pop {
		font-size: min(100cqw / 37.5, (100cqh - 13px) / 35.3);
	}

	.hero-demo .dm-app {
		height: 100%;
	}

	.hero-demo .dm-main {
		display: flex;
		flex-direction: column;
	}

	.hero-demo .dm-main > * {
		flex: none;
	}

	.hero-demo .dm-main > .dm-chart {
		flex: 1 0 auto;
	}

	/* Het bewijs staat op vaste afstand onder de kleine tekst, in beide
	 * standen. Het stond op de onderrand van het vak, maar het vak is zo hoog
	 * als de langste stand: had de andere stand een regel meer kleine tekst,
	 * dan kwam die regel als gat boven het bewijs (5 okt, NL "Ja"). Nu valt
	 * het verschil onder het bewijs. */
	.hero-copy > .hero-swap:last-child > * {
		display: flex;
		flex-direction: column;
	}

	.hero-copy > .hero-swap:last-child .hero-proof {
		margin-top: 0;
		padding-top: 16px;
	}

	/* Eén blok: dichter op elkaar dan elders. */
	.hero-copy .lead {
		margin-top: 16px;
	}

	.hero-copy .hero-route {
		margin-top: 18px;
	}

	.hero-copy .hero-swap .hero-actions {
		margin-top: 16px;
	}

	.hero-copy .hero-fine {
		margin-top: 12px;
	}
}

/* NAAR EEN ANKER OP DEZELFDE PAGINA GLIJDEN, niet springen. Een sprong leest
 * als een nieuwe pagina; de beweging laat zien dat je binnen dezelfde pagina
 * blijft en waar je vandaan komt.
 *
 * Alleen wie niet om minder beweging heeft gevraagd. En alleen voor klikken:
 * een pagina die mét een anker in de URL wordt geopend, springt er gewoon
 * heen — browsers animeren die eerste sprong niet, en dat is maar goed ook
 * (het contactformulier keert na verzenden terug op #contact-notice). */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* Ankers landen onder de vaste kop. Alles met een id, want de doelen staan
 * verspreid: pijlersecties, tools, de uitkomst van een rekenhulp, de melding
 * onder het contactformulier en elke kop op de juridische pagina's. De regel
 * kost niets waar niet naartoe gesprongen wordt. */
[id] {
	scroll-margin-top: var(--anchor-offset);
}

.tool,
.tool-section {
	scroll-margin-top: var(--anchor-offset);
}

.actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 32px;
}

.fine {
	margin-top: 16px;
	font-size: 0.92rem;
	color: var(--muted);
}

.hero-actions {
	align-items: center;
	gap: 12px 24px;
}

/* De tekstlinks in de hero zijn grafiet, niet rood: naast de rode knop is één
 * keer rood genoeg. */
.hero-actions .link-arrow {
	color: var(--ink);
}

/* "Bekijk eerst de functies" aan het eind van de kleine regel in de hero. */
.fine-link {
	white-space: nowrap;
	color: var(--ink);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.fine-link:hover {
	text-decoration-thickness: 2px;
}

/* Bewijs onder de proefregel (templates/home.php): de officiële API en, zodra
 * die aan staat, de partnervermelding (parts/partner.php) en "Data in de EU".
 * Klein en grijs: dit is bewijs, geen reclame. */
.hero-proof {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 20px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.92rem;
	color: var(--graphite);
}

.hero-proof li {
	display: flex;
	align-items: flex-start;
	gap: 6px;
}

.hero-proof .icon {
	flex: none;
	width: 16px;
	height: 16px;
	margin-top: 0.2em;
	color: var(--ink);
}

.hero-proof a {
	color: var(--ink);
}

@media (max-width: 600px) {
	.hero-proof {
		flex-direction: column;
	}
}

/* Kaufland-logo als tweede punt in het bewijs (5 okt; was een eigen regel
 * eronder, die de hero en daarmee de demo rechts langer maakte). Kaufland's
 * eigen bestand, rood op transparant, alleen geschaald: zo hoog als de tekst.
 * Ook in donker transparant, zonder wit vlak (founder, 5 okt); de kleuren
 * blijven Kauflands eigen. */
.hero-proof .hero-kl {
	align-items: center;
}

.hero-proof .hero-kl .icon {
	margin-top: 0;
}

.hero-proof .hero-kl .hero-kl-logo {
	margin-left: 4px;
}

.hero-kl-logo {
	flex: none;
	line-height: 0;
	border-radius: var(--radius);
}

.hero-kl-logo img {
	width: auto;
	height: 22px;
}


/* DE DEMO OPENEN VANUIT DE HERO (7 okt). Het venster rechts blijft een
 * nagebouwd beeld; de echte demo (dashboard/demo, voorbeelddata, zonder
 * account) zit erachter. Twee vormen, één link-adres per pagina:
 * - Muis (hover, fijne aanwijzer) en naast elkaar (≥ 960px): het hele venster
 *   is de link (.hero-demo-open, over het venster heen). Wijs je het aan of
 *   kom je er met Tab op, dan vervaagt het venster iets en staat midden erop
 *   een kaart met de uitnodiging en de rode knop. De hero verandert niet van
 *   maat: de link ligt over het venster, niet eronder.
 * - Aanraken of smal: geen laag over het venster (een tik op het beeld moet
 *   niet ineens wegleiden), maar een rustige knop eronder, even breed als het
 *   venster (.hero-demo-try). */
.hero-demo-open {
	display: none;
}

.hero-demo-try {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.35em;
	min-height: 48px;
	/* Onder de kaartjes die over de onderrand van het venster hangen
	 * (hero-demo.css: bottom -5% van de hoogte, ≈ 4,7% van de breedte). */
	margin-top: calc(5cqw + 20px);
	padding: 10px 16px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--card);
	color: var(--ink);
	font-weight: 650;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.hero-demo-try:hover {
	border-color: var(--ink);
}

/* Naast elkaar zonder muis (tablet dwars): het venster deelt de hoogte van
 * de tekst met de knop eronder. Het venster wordt dus iets kleiner, de
 * onderrand van de knop ligt op de onderste regel van de tekst. 88px = 40px
 * lucht voor de hangende kaartjes + 48px knop. */
@media (min-width: 960px) and (hover: none), (min-width: 960px) and (pointer: coarse) {
	.hero .hero-demo {
		flex-direction: column;
		justify-content: center;
		align-items: stretch;
	}

	.hero .hero-demo-box {
		flex: 1 1 auto;
		height: auto;
		min-height: 0;
	}

	.hero-demo-try {
		flex: none;
		margin-top: 40px;
	}

	.hero-demo .demo-frame,
	.hero-demo .dm-pop {
		font-size: min(100cqw / 37.5, (100cqh - 13px - 88px) / 35.3);
	}
}

@media (min-width: 960px) and (hover: hover) and (pointer: fine) {
	.hero-demo-try {
		display: none;
	}

	/* Boven de kaartjes (z-index 2 in hero-demo.css). */
	.hero-demo-open {
		position: absolute;
		inset: 0;
		z-index: 3;
		display: grid;
		place-items: center;
		padding: 24px;
		color: var(--ink);
		text-decoration: none;
	}

	.hero-demo-open:focus-visible {
		outline: none;
	}

	.hero-demo-call {
		display: flex;
		flex-direction: column;
		align-items: center;
		max-width: 25rem;
		padding: 28px 32px 32px;
		border: 1px solid var(--line);
		border-radius: var(--radius-card);
		background: var(--card);
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 24px 60px -28px rgba(0, 0, 0, 0.28);
		text-align: center;
		text-wrap: balance;
		opacity: 0;
		transition: opacity 0.2s ease;
	}

	.hero-demo-call-h {
		font-size: 1.6rem;
		font-weight: 750;
		line-height: 1.15;
		letter-spacing: -0.02em;
		color: var(--ink);
	}

	.hero-demo-call-p {
		margin-top: 10px;
		font-size: 1rem;
		line-height: 1.45;
		color: var(--graphite);
	}

	.hero-demo-call .btn {
		margin-top: 20px;
	}

	/* Geen vervaging meer bij aanwijzen (founder, 8 okt): het venster blijft
	 * scherp; de pijl en de knop komen na de animatie (hero-demo.css). */

	.hero-demo-open:is(:hover, :focus-visible) .hero-demo-call {
		opacity: 1;
	}

	.hero-demo-open:hover .btn-primary {
		background: var(--red-press);
	}

	.hero-demo-open:focus-visible .btn {
		outline: 2px solid var(--red-text);
		outline-offset: 3px;
	}
}

/* Minder beweging: de laag staat er meteen, zonder overgang. */
@media (prefers-reduced-motion: reduce) {
	.hero-demo-box,
	.hero-demo-call {
		transition: none;
	}
}

/* Prijzen: onder de pakketten, voor wie eerst wil rondkijken. */
.plans-demo {
	margin-top: 24px;
	font-size: 0.97rem;
	color: var(--graphite);
}

/* Functies: in de kop, tussen de inleiding en de knoppen naar de gebieden. */
.page-hero .page-demo {
	margin-top: 14px;
}

.hero .shot-figure {
	margin-top: clamp(40px, calc(6vw / var(--vz, 1)), 64px);
}

.page-hero {
	padding-block: clamp(48px, calc(7vw / var(--vz, 1)), 96px) clamp(24px, calc(4vw / var(--vz, 1)), 48px);
}

/* Het icoon van de pagina, dezelfde tekening als in het menupaneel. Een rustig
 * tegeltje boven de kop: de lijnstijl blijft die van de zijbalk in het
 * dashboard, de tegel geeft hem alleen ruimte. Geen kleur — het rood in deze
 * kop is al voor de bovenregel. */
.page-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-bottom: 18px;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: var(--paper-2);
	color: var(--ink);
}

.page-icon svg {
	display: block;
	width: 22px;
	height: 22px;
}

/* OP ÉÉN REGEL MET DE BOVENREGEL. Los boven elkaar werd het een vierde element
 * in de stapel boven de kop, met een lege strook rechts van de tegel. Naast
 * elkaar scheelt dat een regel en staat het icoon in dezelfde lijn als het
 * woord waar het bij hoort. Pagina's zonder bovenregel (over ons, contact)
 * houden de tegel boven de kop staan. */
.page-hero .page-icon:has(+ .eyebrow) {
	margin-right: 14px;
	margin-bottom: 0;
	vertical-align: middle;
}

.page-hero .page-icon + .eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 0;
	vertical-align: middle;
}

.page-hero .page-icon + .eyebrow + h1 {
	margin-top: 20px;
}

.page-hero .lead {
	margin-top: 18px;
}

/* ----------------------------------------------------- tweekoloms blokken */
.split {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: clamp(32px, calc(5vw / var(--vz, 1)), 72px);
	align-items: center;
}

.split-top {
	align-items: start;
}

.split .lead {
	margin-top: 16px;
}

.split p + p {
	margin-top: 12px;
}

@media (max-width: 900px) {
	.split {
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------------------ de Heute-lijst (HTML) */
.today {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius-card);
	overflow: hidden;
	box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.2);
}

.today-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	padding: 16px 20px;
	border-bottom: 1px solid var(--line);
}

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

.today li {
	display: grid;
	grid-template-columns: 7.5rem minmax(0, 1fr) auto auto;
	gap: 14px;
	align-items: center;
	padding: 14px 20px;
	border-bottom: 1px solid var(--line);
}

.today li:last-child {
	border-bottom: 0;
}

.today-when {
	font-size: 0.86rem;
	font-weight: 650;
	color: var(--red-text-strong);
}

.today-when.calm {
	color: var(--muted);
}

.today-title {
	font-weight: 550;
}

.today-amount {
	font-variant-numeric: tabular-nums;
	font-weight: 650;
	white-space: nowrap;
}

.today-action {
	font-size: 0.82rem;
	font-weight: 650;
	padding: 6px 10px;
	border-radius: var(--radius);
	background: var(--graphite);
	color: var(--on-ink);
	white-space: nowrap;
}

@media (max-width: 560px) {
	.today li {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 4px 12px;
	}

	.today-when {
		grid-column: 1 / -1;
	}

	.today-action {
		display: none;
	}
}

/* --------------------------------------------------------------- pijlers */
.pillar-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px;
}

.pillar {
	border-top: 2px solid var(--ink);
	padding-top: 18px;
}

.pillar > p {
	color: var(--graphite);
	margin-top: 8px;
	min-height: 3.1em;
}

.pillar ul {
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
}

.pillar li {
	padding: 9px 0;
	border-bottom: 1px solid var(--line);
	font-weight: 550;
}

/* Elke tool in een pijlerkaart linkt naar zijn eigen uitlegpagina. */
.pillar li a {
	color: inherit;
	text-decoration: none;
}

.pillar li a:hover {
	color: var(--red-text-strong);
	text-decoration: underline;
}

.pillar .link-arrow {
	display: inline-block;
	margin-top: 16px;
}

@media (max-width: 1000px) {
	.pillar-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.pillar-grid {
		grid-template-columns: 1fr;
	}

	.pillar > p {
		min-height: 0;
	}
}

/* ------------------------------------------------------- uitgelichte tool */
.check-list {
	list-style: none;
	padding: 0;
	margin: 24px 0 20px;
}

.check-list li {
	position: relative;
	padding: 10px 0 10px 28px;
	border-top: 1px solid var(--line);
	font-weight: 550;
}

.check-list li::before {
	content: "";
	position: absolute;
	left: 3px;
	top: 1.05em;
	width: 12px;
	height: 6px;
	border-left: 2px solid var(--red);
	border-bottom: 2px solid var(--red);
	transform: rotate(-45deg);
}

/* ------------------------------------------------------ feiten (dl-lijst) */
.facts {
	margin: 0;
}

.facts > div {
	padding: 18px 0;
	border-top: 1px solid var(--line);
}

.facts > div:last-child {
	border-bottom: 1px solid var(--line);
}

.facts dt {
	font-weight: 700;
	font-size: 1.15rem;
	letter-spacing: -0.01em;
}

.facts dd {
	margin: 6px 0 0;
	color: var(--graphite);
}

/* Kaufland.nl-pagina: alle negen marktplaatsen, twee kolommen vanaf tablet. */
@media (min-width: 601px) {
	.facts.nl-markets {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 32px;
	}

	.facts.nl-markets > div:nth-last-child(-n+2) {
		border-bottom: 1px solid var(--line);
	}
}

/* ---------------------------------------------------------------- tarieven
 * parts/plans.php. De keuze maandelijks/jaarlijks is een radiogroep; :has()
 * wisselt bedragen en knoppen zonder script. Zonder :has() blijft jaarlijks
 * (de standaard) staan. De kaarten delen hun rijen (subgrid), zodat prijs,
 * knop en grenzen naast elkaar op één lijn staan. */
.vh {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.interval {
	position: relative;
	display: inline-flex;
	margin: 0 0 24px;
	padding: 3px;
	border: 1px solid var(--line);
	border-radius: 6px;
	background: var(--card);
}

.interval input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
}

.interval label {
	padding: 8px 18px;
	border-radius: var(--radius);
	font-size: 0.95rem;
	font-weight: 650;
	color: var(--graphite);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.interval input:checked + label {
	background: var(--ink);
	color: var(--on-ink);
}

.interval input:focus-visible + label {
	outline: 2px solid var(--red);
	outline-offset: 2px;
}

.pricing .is-monthly {
	display: none;
}

.pricing:has(input[value="monthly"]:checked) .is-yearly {
	display: none;
}

.pricing:has(input[value="monthly"]:checked) span.is-monthly {
	display: inline-block;
}

.pricing:has(input[value="monthly"]:checked) div.is-monthly {
	display: block;
}

.plans {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0 20px;
}

.plan {
	display: grid;
	grid-row: span 8;
	grid-template-rows: subgrid;
	row-gap: 0;
	align-content: start;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius-card);
	padding: 28px;
}

.plan-rec {
	border: 2px solid var(--ink);
	padding: 27px;
}

@supports not (grid-template-rows: subgrid) {
	.plan {
		display: flex;
		flex-direction: column;
	}
}

.plan-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 12px;
}

.plan-name {
	font-size: 1.3rem;
	font-weight: 750;
	letter-spacing: -0.015em;
}

.plan-desc {
	margin-top: 8px;
	color: var(--graphite);
}

.plan-price {
	margin-top: 22px;
	line-height: 1;
}

.iv {
	display: inline-block;
}

.plan-amount {
	font-size: 2.75rem;
	font-weight: 800;
	letter-spacing: -0.03em;
}

.plan-per,
.plan-was {
	margin-left: 6px;
	font-size: 0.95rem;
	font-weight: 500;
	letter-spacing: 0;
	color: var(--muted);
}

.plan-billed {
	margin-top: 10px;
	font-size: 0.9rem;
	color: var(--muted);
}

.plan-save {
	margin-top: 10px;
	min-height: 1.7em;
	font-size: 0.9rem;
	color: var(--graphite);
}

.plan-cta {
	margin-top: 18px;
}

.plan-limits {
	margin-top: 22px;
	padding-top: 16px;
	border-top: 1px solid var(--line);
	font-size: 0.95rem;
	font-weight: 650;
}

.plan-features {
	margin-top: 10px;
}

.plan-plus {
	margin-bottom: 4px;
	font-size: 0.9rem;
	color: var(--muted);
}

.plan-features ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.plan-features li {
	display: flex;
	gap: 10px;
	padding: 5px 0;
	font-size: 0.97rem;
}

.plan-features li svg {
	flex: none;
	width: 16px;
	height: 16px;
	margin-top: 0.22em;
	color: var(--ink);
}

.plans-notes {
	margin-top: 20px;
	color: var(--muted);
	font-size: 0.92rem;
}

.plans-notes p + p {
	margin-top: 4px;
}

.plans-notes .plans-vat {
	color: var(--graphite);
	font-weight: 650;
}

/* Maandelijks/jaarlijks: het nieuwe bedrag schuift kort in beeld. Pas na de
 * eerste klik (.is-touched, parts/plans.php), dus niet bij het laden. */
@media (prefers-reduced-motion: no-preference) {
	@keyframes sellgrip-swap {
		from { opacity: 0; transform: translateY(6px); }
		to { opacity: 1; transform: none; }
	}

	.pricing.is-touched .plan-price .iv,
	.pricing.is-touched .plan-billed .iv,
	.pricing.is-touched .plan-save .iv {
		animation: sellgrip-swap 0.28s cubic-bezier(0.2, 0.7, 0.2, 1);
	}
}

@media (max-width: 900px) {
	.plans {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	.plan {
		display: flex;
		flex-direction: column;
		grid-row: auto;
	}
}

/* Tablet (641–900px): drie kolommen zijn te smal voor de knoppen, één smalle
 * kolom liet de rechterhelft leeg. Elke kaart over de volle breedte, binnenin
 * twee kolommen: links prijs en knop, rechts wat erin zit. */
@media (min-width: 641px) and (max-width: 900px) {
	.plan {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-rows: none;
		column-gap: 28px;
		align-content: start;
	}

	.plan > * {
		grid-column: 1;
	}

	.plan > .plan-limits {
		grid-column: 2;
		grid-row: 1;
		margin-top: 0;
		padding-top: 0;
		border-top: 0;
	}

	.plan > .plan-features {
		grid-column: 2;
		grid-row: 2 / span 6;
		margin-top: 0;
		padding-top: 10px;
	}

	.plan > .plan-limits,
	.plan > .plan-features {
		padding-left: 28px;
		border-left: 1px solid var(--line);
	}
}

@media (max-width: 640px) {
	.plans {
		max-width: 34rem;
	}
}

/* Vergelijkingstabel op de prijspagina. Op smalle schermen scrolt alleen de
 * tabel, in zijn eigen vak; de eerste kolom blijft staan. */
/* position: relative houdt ook de verborgen .vh-teksten in de cellen binnen
 * het scrollvak; anders maken ze de hele pagina breder. */
.compare-scroll {
	position: relative;
	overflow-x: auto;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius-card);
}

.compare {
	width: 100%;
	min-width: 580px;
	border-collapse: collapse;
	font-size: 0.97rem;
}

.compare th,
.compare td {
	padding: 11px 16px;
	border-top: 1px solid var(--line);
	text-align: left;
	vertical-align: middle;
}

.compare td,
.compare thead th:not(:first-child) {
	width: 17%;
	text-align: center;
}

.compare thead th {
	border-top: 0;
	padding-block: 16px;
	font-size: 1.05rem;
	font-weight: 750;
}

.compare tbody th {
	font-weight: 500;
}

.compare th[scope="row"],
.compare thead th:first-child,
.compare-group th {
	position: sticky;
	left: 0;
	z-index: 1;
	background: var(--card);
}

.compare-group th {
	padding-block: 9px;
	background: var(--paper-2);
	font-size: 0.9rem;
	font-weight: 750;
}

.compare th .tag {
	margin-left: 6px;
	vertical-align: 1px;
}

.compare-yes {
	width: 18px;
	height: 18px;
	vertical-align: middle;
	color: var(--ink);
}

.compare-no {
	display: inline-block;
	width: 12px;
	height: 1.5px;
	vertical-align: middle;
	background: var(--line);
}

@media (max-width: 640px) {
	.compare th,
	.compare td {
		padding: 10px 12px;
	}

	.compare th[scope="row"] {
		box-shadow: 1px 0 0 var(--line);
	}
}

/* Tariefkeuze boven de tabel (templates/pricing.php). Onder 640px staat er
 * één tarief naast de functiekolom; de knoppen zijn radio's, :has() wisselt
 * de kolom. Zonder :has() blijft de schakelaar weg en scrolt de tabel. */
.compare-pick {
	display: none;
}

@supports selector(:has(a)) {
	@media (max-width: 640px) {
		/* Blijft onder de kop staan terwijl je door de lange tabel scrolt. */
		.compare-pick {
			position: sticky;
			top: calc(var(--header-h) + 8px);
			z-index: 2;
			/* Dekt de strook tussen kop en schakelaar af (sectie is paper-2). */
			box-shadow: 0 -9px 0 var(--paper-2);
			display: flex;
			width: 100%;
			margin-bottom: 12px;
		}

		.compare-pick label {
			flex: 1 1 0;
			min-width: 0;
			padding: 10px 8px;
			text-align: center;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.compare {
			min-width: 0;
		}

		.compare-wrap .compare :is(td, thead th:not(:first-child)) {
			display: none;
			width: 34%;
		}

		.compare-wrap:has([data-col="2"]:checked) .compare :is(td, thead th):nth-child(2),
		.compare-wrap:has([data-col="3"]:checked) .compare :is(td, thead th):nth-child(3),
		.compare-wrap:has([data-col="4"]:checked) .compare :is(td, thead th):nth-child(4),
		.compare-wrap:has([data-col="5"]:checked) .compare :is(td, thead th):nth-child(5) {
			display: table-cell;
		}

		.compare th[scope="row"] {
			box-shadow: none;
		}
	}
}

/* -------------------------------------------------------------------- FAQ */
.faq {
	max-width: 46rem;
	border-top: 1px solid var(--line);
}

.faq details {
	border-bottom: 1px solid var(--line);
}

.faq summary {
	position: relative;
	cursor: pointer;
	list-style: none;
	padding: 18px 36px 18px 0;
	font-weight: 650;
	font-size: 1.08rem;
}

.faq summary::-webkit-details-marker {
	display: none;
}

.faq summary::after {
	content: "+";
	position: absolute;
	right: 6px;
	top: 13px;
	font-size: 1.4rem;
	font-weight: 400;
	color: var(--muted);
}

.faq details[open] summary::after {
	content: "\2013";
}

.faq details p {
	padding: 0 0 20px;
	color: var(--graphite);
	max-width: 40em;
}

/* ------------------------------------------------------------ Demnächst
 * Geplande functies samen, ingeklapt (parts/planned.php): onder de
 * vergelijkingstabel en onderaan de functiepagina. Zelfde vorm als de FAQ. */
.planned {
	max-width: 46rem;
	margin-top: 32px;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}

.planned summary {
	position: relative;
	cursor: pointer;
	list-style: none;
	padding: 16px 36px 16px 0;
	font-weight: 650;
}

.planned summary::-webkit-details-marker {
	display: none;
}

.planned summary::after {
	content: "+";
	position: absolute;
	right: 6px;
	top: 11px;
	font-size: 1.4rem;
	font-weight: 400;
	color: var(--muted);
}

.planned[open] summary::after {
	content: "\2013";
}

.planned-note {
	color: var(--graphite);
	max-width: 40em;
}

.planned-list {
	list-style: none;
	margin: 12px 0 20px;
	padding: 0;
	columns: 2;
	column-gap: 48px;
}

.planned-list li {
	break-inside: avoid;
	padding: 6px 0;
	color: var(--graphite);
}

.planned-plan {
	color: var(--muted);
	font-size: 0.9rem;
}

.planned-plan::before {
	content: "\00B7\00A0";
}

@media (max-width: 640px) {
	.planned-list {
		columns: 1;
	}
}

/* --------------------------------------------------------- functiepagina */
.pillar-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 28px;
}

.pillar-nav a {
	text-decoration: none;
	font-weight: 650;
	padding: 8px 14px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.pillar-nav a:hover {
	border-color: var(--ink);
}

.legend {
	margin-top: 14px;
	font-size: 0.9rem;
	color: var(--muted);
}

/* Stond op 72px en overschreef daarmee de regel hierboven: .tool-section kreeg
 * dus nooit de bedoelde maat. Nu dezelfde variabele, zodat ze niet meer
 * tegen elkaar in kunnen werken. */
.tool-section {
	scroll-margin-top: var(--anchor-offset);
}

.tool-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 48px;
}

.tool {
	padding: 18px 0;
	border-top: 1px solid var(--line);
}

.tool h3 {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
}

.tool p {
	margin-top: 6px;
	color: var(--graphite);
}

.tool-planned h3 {
	color: var(--graphite);
}

/* Een tool met een eigen pagina (inc/toolpages.php): de naam is de link. */
.tool h3 a {
	text-decoration: none;
}

.tool h3 a::after {
	content: " \2192";
	color: var(--graphite);
}

.tool h3 a:hover {
	text-decoration: underline;
}

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

/* ------------------------------------------------------------- afsluiter */
.final-box {
	border-top: 2px solid var(--ink);
	padding-top: 32px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 24px;
}

.final-box .lead {
	margin-top: 12px;
}

/* ---------------------------------------------------------------- contact */
.contact-mail {
	display: inline-block;
	margin-top: 4px;
	font-size: clamp(1.5rem, 1rem + calc(1.6vw / var(--vz, 1)), 2.1rem);
	font-weight: 750;
	letter-spacing: -0.02em;
	color: var(--red-text-strong);
	text-decoration: none;
}

.contact-mail:hover {
	text-decoration: underline;
}

.contact-tip {
	margin-top: 12px;
}

/* --------------------------------------------------- taalkiezer (menu) */
.lang-menu {
	position: relative;
}

.lang-menu summary {
	list-style: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 9px;
	font-size: 0.85rem;
	font-weight: 650;
	letter-spacing: 0.02em;
	color: var(--ink);
	background: var(--hover);
	border-radius: var(--radius);
}

.lang-menu summary::-webkit-details-marker {
	display: none;
}

.lang-menu summary::after {
	content: "";
	width: 6px;
	height: 6px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
}

.lang-menu ul {
	position: absolute;
	right: 0;
	top: calc(100% + 6px);
	z-index: 20;
	min-width: 11rem;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 8px;
	box-shadow: 0 16px 36px -16px rgba(0, 0, 0, 0.2);
}

.lang-menu a {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 7px 10px;
	border-radius: var(--radius);
	font-size: 0.95rem;
	text-decoration: none;
	color: var(--graphite);
}

.lang-menu a:hover {
	background: var(--hover);
	color: var(--ink);
}

.lang-menu a[aria-current="true"] {
	font-weight: 650;
	color: var(--ink);
}

.lang-switch ul {
	flex-wrap: wrap;
}

/* ------------------------------------------------------------- beweging
 * Alleen als de bezoeker geen "minder beweging" vraagt.
 *
 * Bij scrollen komt elk blok onder de vouw in beeld zodra het zichtbaar
 *    wordt: scherp, van doorzichtig naar zichtbaar en een stukje omhoog, rijen kort na
 *    elkaar. assets/js/reveal.js zet .rv/.rv-media en daarna .is-in. Wat bij
 *    het laden al in beeld staat blijft staan; zonder script is alles zichtbaar.
 *
 * De dashboarddemo in de hero staat zelf stil (keuze van de founders, 11 sep);
 * alleen erbinnen beweegt iets (hero-demo.css, assets/js/hero.js). */
@media (prefers-reduced-motion: no-preference) {
	/* Bij het laden komt de tekst van de hero's rustig in beeld. Nooit wazig:
	 * alles is meteen scherp (founders, 11 sep). */
	@keyframes sellgrip-in {
		from { opacity: 0; translate: 0 16px; }
		to { opacity: 1; translate: 0 0; }
	}

	.hero-copy > *,
	.page-hero .wrap > * {
		animation: sellgrip-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
	}
	.hero-copy > :nth-child(2),
	.page-hero .wrap > :nth-child(2) { animation-delay: 0.06s; }
	.hero-copy > :nth-child(3),
	.page-hero .wrap > :nth-child(3) { animation-delay: 0.12s; }
	.hero-copy > :nth-child(4),
	.page-hero .wrap > :nth-child(4) { animation-delay: 0.18s; }
	.hero-copy > :nth-child(5),
	.page-hero .wrap > :nth-child(5) { animation-delay: 0.24s; }
	.hero-copy > :nth-child(n+6) { animation-delay: 0.3s; }


	.rv {
		opacity: 0;
		translate: 0 28px;
	}

	/* Beelden en tabellen: van iets kleiner naar ware grootte. */
	.rv-media {
		opacity: 0;
		translate: 0 40px;
		scale: 0.97;
	}

	.rv.is-in,
	.rv-media.is-in {
		opacity: 1;
		translate: 0 0;
		scale: 1;
		transition:
			opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1) var(--rv-d, 0s),
			translate 1s cubic-bezier(0.16, 1, 0.3, 1) var(--rv-d, 0s),
			scale 1s cubic-bezier(0.16, 1, 0.3, 1) var(--rv-d, 0s);
	}
}

@media (prefers-reduced-motion: reduce) {
	* {
		transition: none !important;
	}
}

/* UITKLAPPEN MET EEN BEWEGING, niet met een sprong. Een <details> klapt van
 * zichzelf abrupt open; het antwoord staat er ineens, alsof de pagina iets
 * anders werd. Dezelfde truc als elders in dit thema: de hoogte loopt van 0fr
 * naar 1fr, wat wél te animeren is, terwijl `height: auto` dat niet is.
 *
 * Niet voor wie om minder beweging vraagt, en niet zonder JavaScript nodig te
 * hebben: zonder deze regels blijft het gewoon een werkende uitklapper.
 *
 * STAAT HIER, NIET IN toolpage.css: dat bestand laadt alleen op toolpagina's,
 * terwijl er ook een vragenlijst op /prijzen staat. Eén .faq, één plek. */
@media (prefers-reduced-motion: no-preference) {
	/* HET ANTWOORD ZELF VALT NIET TE ANIMEREN. Een dichte <details> geeft zijn
	 * inhoud geen enkele weergavedoos, dus een overgang op die <p> doet niets —
	 * gemeten: de hoogte bleef 'none', voor en na het openen. ::details-content
	 * is wél de doos eromheen, en `interpolate-size` maakt de sprong van 0 naar
	 * auto een beweging in plaats van een schok. Browsers die dit nog niet
	 * kennen, klappen gewoon open zoals eerst. */
	:root {
		interpolate-size: allow-keywords;
	}

	.faq details::details-content {
		block-size: 0;
		overflow: hidden;
		opacity: 0;
		transition:
			block-size 0.3s cubic-bezier(0.2, 0.7, 0.2, 1),
			opacity 0.24s ease,
			content-visibility 0.3s allow-discrete;
	}

	.faq details[open]::details-content {
		block-size: auto;
		opacity: 1;
	}
}

/* ------------------------------------------------------------ kenniscentrum
 * Overzicht, onderwerprij en artikel (templates/knowledge.php,
 * parts/article*.php). Dezelfde bouwstenen als de rest van de site: witte
 * kaart op een dunne rand, rode ogenkop, leeskolom van ±68 tekens. */

/* Onderwerpen als rij links. Geen knoppen: het zijn navigatiekeuzes, en de
 * pagina heeft maar één hoofdactie, onderaan. */
.topic-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	margin-bottom: clamp(28px, calc(4vw / var(--vz, 1)), 44px);
	padding-bottom: 14px;
	border-bottom: 1px solid var(--line);
	font-size: 0.98rem;
}

.topic-row a {
	color: var(--muted);
	text-decoration: none;
}

.topic-row a:hover {
	color: var(--ink);
}

.topic-row a[aria-current="page"] {
	color: var(--ink);
	font-weight: 650;
}

.article-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
	gap: clamp(24px, calc(3vw / var(--vz, 1)), 36px);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Precies drie kaarten ("Verder lezen"): drie kolommen, geen lege vierde. */
@media (min-width: 1100px) {
	.article-grid:has(> li:nth-child(3):last-child) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* De hele kaart is één link: een tweede aanklikbaar gebied erin zou het
 * eerste in de weg zitten. */
.article-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.article-card-img {
	display: block;
	overflow: hidden;
	margin-bottom: 16px;
	border: 1px solid var(--line);
	border-radius: var(--radius-card);
	background: var(--paper-2);
	aspect-ratio: 16 / 9;
}

.article-card-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: scale 0.4s ease;
}

.article-card:hover .article-card-img img {
	scale: 1.03;
}

.article-card-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 8px;
}

.article-topic {
	font-size: 0.85rem;
	font-weight: 650;
	color: var(--red-text);
}

.article-card strong {
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.article-card:hover strong {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.article-card-text {
	color: var(--muted);
	line-height: 1.5;
}

/* Wie het schreef en wanneer. Onderaan de kaart, zodat de rij uitlijnt ook
 * als de ene samenvatting een regel langer is. */
.article-meta {
	margin-top: auto;
	padding-top: 12px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	font-size: 0.88rem;
	color: var(--muted);
}

.article-empty {
	max-width: 36rem;
	padding: clamp(32px, calc(5vw / var(--vz, 1)), 56px) 0;
}

.article-empty h2 {
	font-size: 1.4rem;
}

.article-empty p {
	margin-top: 8px;
	color: var(--muted);
}

/* ------------------------------------------------------------------ artikel */
.article {
	padding-top: clamp(32px, calc(5vw / var(--vz, 1)), 56px);
}

.article h1 {
	max-width: 22ch;
	font-size: clamp(2rem, 1.2rem + calc(2vw / var(--vz, 1)), 3rem);
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.article .article-meta {
	margin-top: 18px;
	padding-top: 0;
	font-size: 0.95rem;
}

/* Op de artikelpagina: wie, wanneer, hoe lang, als losse onderdelen met
 * ruimte ertussen (geen scheidingsteken). */
.article .article-meta {
	gap: 2px 20px;
}

/* Kruimelpad boven de titel: twee links met een pijltje ertussen. */
.crumb-sep {
	margin-inline: 8px;
	color: var(--muted);
}

/* De omslag staat in .wrap (zelfde breedte als de kop); alleen de ruimte
 * erboven, de zijmarges komen van .wrap. Vaste verhouding: een foto zonder
 * eigen maat krijgt zo geen andere uitsnede per scherm dan de kaart. */
.article-cover {
	margin-top: clamp(28px, calc(4vw / var(--vz, 1)), 44px);
	margin-bottom: 0;
}

.article-cover img {
	display: block;
	width: 100%;
	/* Even breed als de leeskolom eronder (.article-body, 42rem). Op de volle
	 * 1216px stond er het hele artikel lang 540px leeg naast de tekst
	 * (slop-check 1 okt). */
	max-width: 42rem;
	height: auto;
	aspect-ratio: 16 / 9;
	max-height: 30rem;
	object-fit: cover;
	border-radius: var(--radius-card);
}

/* Leeskolom. Alles wat langer is dan ±68 tekens leest slechter, ongeacht hoe
 * breed het scherm is. De marge staat hier en niet onder de omslag, zodat de
 * afstand gelijk is met en zonder beeld. */
.article-body {
	margin-top: clamp(28px, calc(4vw / var(--vz, 1)), 44px);
	max-width: 42rem;
	font-size: 1.08rem;
	line-height: 1.65;
}

.article-body > * + * {
	margin-top: 1.1em;
}

.article-body h2 {
	margin-top: 1.8em;
	font-size: 1.6rem;
	letter-spacing: -0.015em;
}

.article-body h3 {
	margin-top: 1.5em;
	font-size: 1.25rem;
}

.article-body ul,
.article-body ol {
	padding-left: 1.3em;
}

.article-body li + li {
	margin-top: 0.4em;
}

.article-body img {
	max-width: 100%;
	height: auto;
	border-radius: var(--radius-card);
}

/* Tabellen in artikelen (sellgrip_article_tables(), inc/articles.php): in de
 * stijl van de kostentabellen; op een smal scherm schuift alleen de tabel. */
.article-body .table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.article-body table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95rem;
	line-height: 1.5;
}

.article-body th,
.article-body td {
	min-width: 7em;
	padding: 11px 16px 11px 0;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--line);
}

.article-body th:last-child,
.article-body td:last-child {
	padding-right: 0;
}

/* Telefoon: smallere kolommen en een kop die mag omlopen, zodat een tabel
 * van drie kolommen past en de kop niet afgekapt in beeld staat. */
@media (max-width: 600px) {
	.article-body table {
		font-size: 0.9rem;
	}

	.article-body th,
	.article-body td {
		min-width: 5.5em;
		padding-right: 12px;
		overflow-wrap: break-word;
		hyphens: auto;
	}
}

.article-body thead th {
	font-size: 0.88rem;
	font-weight: 650;
	color: var(--muted);
	border-bottom-color: var(--ink);
}

.article-body blockquote {
	padding-left: 1.1em;
	border-left: 2px solid var(--line);
	color: var(--muted);
}

.article-body a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.article-author {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	max-width: 42rem;
	margin-top: clamp(36px, calc(5vw / var(--vz, 1)), 56px);
	/* Lucht onder de auteur voor het grijze blok "Verder lezen" begint
	 * (founder, 30 sep): evenveel als erboven. */
	margin-bottom: clamp(36px, calc(5vw / var(--vz, 1)), 56px);
	padding-top: 24px;
	border-top: 1px solid var(--line);
}

.article-avatar {
	flex: none;
	width: 48px;
	height: 48px;
	border-radius: 50%;
}

.article-author strong {
	display: block;
	font-weight: 700;
}

.article-author p {
	margin-top: 4px;
	color: var(--muted);
	line-height: 1.5;
}

/* Krappere kop op de hub: de artikelen horen boven de vouw, dat is waar de
 * bezoeker voor kwam. Ook de kop een maat kleiner — dit is een overzicht,
 * geen landingspagina die iets moet verkopen. */
.page-hero-tight {
	padding-block: clamp(28px, calc(4vw / var(--vz, 1)), 48px) clamp(16px, calc(2.5vw / var(--vz, 1)), 26px);
}

.page-hero-tight h1 {
	font-size: clamp(2rem, 1.4rem + calc(1.8vw / var(--vz, 1)), 2.9rem);
}

.page-hero-tight .lead {
	max-width: 44rem;
}

.topic-intro {
	max-width: 46rem;
	margin-bottom: clamp(28px, calc(4vw / var(--vz, 1)), 44px);
	color: var(--muted);
	line-height: 1.6;
}

/* Zonder uitgelicht beeld: een typografische tegel. Icoon van het onderwerp
 * linksboven, linksonder een rood streepje en de naam. Wit met de rand van
 * de kaart: het grijze vlak met gecentreerde tekst las als een plaatje dat
 * niet laadde (sweep 29 sep). */
.article-card-img:has(.article-tile) {
	background: var(--card);
}

.article-tile {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
	width: 100%;
	height: 100%;
	padding: clamp(18px, calc(2.4vw / var(--vz, 1)), 28px);
}

.article-tile-ico {
	width: 28px;
	height: 28px;
	stroke-width: 1.1;
	color: var(--ink);
}

.article-tile span {
	max-width: 14em;
	font-size: 1.3rem;
	font-weight: 750;
	line-height: 1.15;
	letter-spacing: -0.015em;
	color: var(--ink);
}

.article-tile span::before {
	content: "";
	display: block;
	width: 24px;
	height: 3px;
	margin-bottom: 12px;
	background: var(--red);
}

.article-card-lead .article-tile-ico {
	width: 40px;
	height: 40px;
}

.article-card-lead .article-tile span {
	font-size: clamp(1.6rem, 1.2rem + calc(1.4vw / var(--vz, 1)), 2.4rem);
}

/* Het uitgelichte stuk: beeld naast de tekst, en alles een maat groter. */
.article-card-lead {
	display: grid;
	gap: clamp(20px, calc(3vw / var(--vz, 1)), 40px);
	margin-bottom: clamp(36px, calc(5vw / var(--vz, 1)), 56px);
	padding-bottom: clamp(36px, calc(5vw / var(--vz, 1)), 56px);
	border-bottom: 1px solid var(--line);
}

@media (min-width: 720px) {
	.article-card-lead {
		grid-template-columns: 1.15fr 1fr;
		align-items: center;
	}
}

.article-card-lead .article-card-img {
	margin-bottom: 0;
	aspect-ratio: 3 / 2;
}

.article-card-lead strong {
	font-size: clamp(1.5rem, 1.1rem + calc(1.4vw / var(--vz, 1)), 2.1rem);
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.article-card-lead .article-card-text {
	font-size: 1.05rem;
}

/* "Uitgelicht" naast het onderwerp: rood, want het is de enige plek op deze
 * pagina die om voorrang vraagt. */
.article-flag {
	margin-right: 10px;
	padding: 3px 7px;
	border-radius: var(--radius);
	background: var(--red);
	color: #fff;
	font-size: 0.78rem;
}

/* De brug van artikel naar product: welke tool hierbij hoort. */
.article-tools {
	max-width: 42rem;
	margin-top: clamp(36px, calc(5vw / var(--vz, 1)), 56px);
	padding: 22px 24px 18px;
	border: 1px solid var(--line);
	border-radius: var(--radius-card);
	background: var(--paper-2);
}

.article-tools h2 {
	margin-bottom: 8px;
	font-size: 1.05rem;
	font-weight: 700;
}

.article-tools ul {
	display: grid;
	gap: 2px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.author-head {
	display: flex;
	gap: clamp(16px, calc(3vw / var(--vz, 1)), 28px);
	align-items: center;
}

.author-avatar {
	flex: none;
	width: 84px;
	height: 84px;
	border-radius: 50%;
}

.author-head h1 {
	font-size: clamp(1.8rem, 1.3rem + calc(1.4vw / var(--vz, 1)), 2.5rem);
}

.author-head .lead {
	margin-top: 6px;
	max-width: 44rem;
}

/* ------------------------------------------------------ zoekresultaten
 * templates/search.php. Smal en rustig: een veld, dan per groep een lijst in
 * dezelfde regels als de menupanelen (icoon, naam, korte uitleg). */
.search-hero h1 {
	max-width: 40rem;
	overflow-wrap: anywhere;
}

.search-form {
	display: flex;
	gap: 10px;
	max-width: 40rem;
	margin-top: 24px;
}

.search-field {
	position: relative;
	flex: 1;
	min-width: 0;
}

.search-field-ico {
	position: absolute;
	top: 50%;
	left: 14px;
	width: 18px;
	height: 18px;
	translate: 0 -50%;
	color: var(--muted);
	pointer-events: none;
}

.search-field input {
	width: 100%;
	height: 48px;
	padding: 0 14px 0 42px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: var(--card);
	font: inherit;
	font-size: 1rem;
	color: var(--ink);
	-webkit-appearance: none;
	appearance: none;
}

.search-field input::placeholder {
	color: var(--placeholder);
	opacity: 1;
}

.search-field input:focus {
	outline: none;
	border-color: var(--ink);
	box-shadow: inset 0 0 0 0.5px var(--ink);
}

.search-form .btn {
	height: 48px;
	border-radius: 10px;
}

.search-results .wrap > * {
	max-width: 40rem;
}

.search-group + .search-group {
	margin-top: 32px;
}

.search-group-h {
	margin: 0 0 6px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--line);
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--ink);
}

.search-list {
	display: grid;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.search-list .mega-item {
	padding-block: 10px;
}

.search-empty {
	margin: 0 0 32px;
	color: var(--graphite);
}

.search-empty strong {
	color: var(--ink);
}

@media (max-width: 480px) {
	.search-form .btn {
		padding-inline: 16px;
	}
}

/* ------------------------------------------------ Kaufland.nl op de NL-home */
.nl-teaser {
	margin-top: clamp(32px, calc(4vw / var(--vz, 1)), 48px);
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 16px;
	padding: 18px 22px;
	border: 1px solid var(--line);
	border-radius: var(--radius-card);
	background: var(--card);
	color: var(--ink);
	text-decoration: none;
}

.nl-teaser span:not(.link-arrow) {
	color: var(--graphite);
}

.nl-teaser .link-arrow {
	margin-left: auto;
}

.nl-teaser:hover {
	border-color: var(--ink);
}

/* Kaufland Global Marketplace op elke home; onder de NL-teasers dichter erop. */
.nl-teaser + .nl-teaser {
	margin-top: 12px;
}

/* ------------------------------------------------ tarieven: proef en besparing */
.plan-after {
	margin-top: 8px;
	font-size: 0.85rem;
	color: var(--muted);
}

.interval-save {
	font-weight: 500;
	font-size: 0.85em;
	opacity: 0.8;
}

@media (max-width: 767px) {
	.plans-rec-first .plan-rec {
		order: -1;
	}
}

/* ------------------------------------------------ afsluiter met twee wegen */
.final-box > div:first-child {
	max-width: 44rem;
}

.final-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* ------------------------------------------------ rekenhulpen: gratis koppelen */
.calc-connect {
	margin-top: 18px;
	padding: 16px;
	border-radius: var(--radius);
	background: var(--paper-2);
}

.calc-connect p {
	font-weight: 650;
	color: var(--ink);
}

.calc-connect .btn {
	margin-top: 10px;
	white-space: normal;
}

.calc-connect .btn::after {
	content: "\00A0\2192";
}

/* Nieuwsbrief over tariefwijzigingen (parts/newsletter.php), alleen met SELLGRIP_NEWSLETTER_ACTION. */
.newsletter {
	max-width: 40rem;
	padding: 24px;
	border: 1px solid var(--line);
	border-radius: var(--radius-card);
}

.newsletter-h {
	font-size: 1.2rem;
}

.newsletter-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 14px;
}

.newsletter-row input[type="email"] {
	flex: 1 1 16rem;
	min-width: 0;
	font: inherit;
	padding: 0.7em 0.9em;
	border: 1.5px solid var(--line);
	border-radius: var(--radius);
}

.newsletter-note {
	margin-top: 10px;
	font-size: 0.85rem;
	color: var(--muted);
}

/* ------------------------------------------------ Kaufland.nl-pagina */
.nl-compare th[scope="col"] {
	min-width: 12rem;
}

.nl-compare td,
.nl-compare tbody th {
	vertical-align: top;
	white-space: normal;
}

/* Smal: elke rij als blok, met het platform als label boven de tekst. */
@media (max-width: 700px) {
	.nl-compare thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}

	.nl-compare,
	.nl-compare tbody,
	.nl-compare tr,
	.nl-compare th,
	.nl-compare td {
		display: block;
		width: 100%;
	}

	.nl-compare tr {
		padding-block: 12px;
		border-bottom: 1px solid var(--line);
	}

	/* .fee-table ervoor: tools.css laadt later en zette de celrand terug,
	 * waardoor er tussen twee onderwerpen twee lijnen stonden. */
	.fee-table.nl-compare tbody th,
	.fee-table.nl-compare td {
		padding: 4px 0;
		border: 0;
	}

	.nl-compare td::before {
		content: attr(data-label);
		display: block;
		font-size: 0.8rem;
		font-weight: 650;
		color: var(--muted);
	}
}

.nl-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	margin-top: 18px;
}

/* ------------------------------------------------ mobiele balk onderaan
 * parts/sticky-cta.php. Alleen onder 768px; het script zet .is-on. */
.sticky-cta {
	display: none;
}

@media (max-width: 767px) {
	.sticky-cta {
		position: fixed;
		inset: auto 0 0;
		z-index: 40;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 8px;
		padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
		background: var(--paper);
		border-top: 1px solid var(--line);
		box-shadow: 0 -6px 16px -12px rgba(0, 0, 0, 0.25);
		transform: translateY(110%);
		visibility: hidden;
		transition: transform 0.2s ease, visibility 0s linear 0.2s;
	}

	.sticky-cta.is-on {
		transform: none;
		visibility: visible;
		transition: transform 0.2s ease;
	}

	.sticky-cta .btn {
		min-width: 0;
		padding: 0.65em 0.5em;
		font-size: 0.95rem;
	}

	/* De ellips hoort op het label, niet op de knop: .btn is flex en
	 * centreert, dus een te lang label liep aan beide kanten weg. */
	.sticky-cta .btn > span {
		min-width: 0;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
	.sticky-cta,
	.sticky-cta.is-on {
		transition: none;
	}
}

/* ------------------------------------------------------------ donkere modus
 * Wat niet met een kleurtoken te vangen is. De tokens zelf staan bovenaan. */
@media screen {
	html[data-theme="dark"] ::selection {
		background: rgba(242, 82, 92, 0.38);
		color: #ffffff;
	}

	/* Schermafbeeldingen: in donker de donkere opname ({naam}-dark.webp),
	 * als die er is; anders blijft de lichte staan. De rand (--line) houdt
	 * beide op hun plek: de donkere is bijna zo donker als de pagina, de
	 * lichte zou anders als wit vlak zweven. */
	html[data-theme="dark"] .shot.has-dark .shot-light {
		display: none;
	}

	html[data-theme="dark"] .shot.has-dark .shot-dark {
		display: block;
	}

	html[data-theme="dark"] .shot,
	html[data-theme="dark"] img[src*="/screens/"] {
		border-color: var(--line);
		box-shadow: none;
	}

	/* Het streepje "zit er niet in" in de vergelijkingstabel: op #222 viel
	 * de lijnkleur weg. Even zacht als in licht, niet onzichtbaar. */
	html[data-theme="dark"] .compare-no {
		background: #4d4d4d;
	}
}

/* Gele balk boven de kop tot de livegang (inc/launch-bar.php). Scrolt mee
 * weg; de kop blijft plakken. Open menu op mobiel: balk weg, zodat het
 * paneel en het grijze scherm op --header-h blijven kloppen. */
.launch-bar {
	/* Vaste kleuren: de balk is geel in licht én donker, dus altijd donkere
	 * tekst (--ink wordt wit in donker). */
	background: #ffd400;
	color: #171717;
	font-size: 15px;
	line-height: 1.4;
}

.launch-bar .wrap {
	position: relative;
}

.launch-bar p {
	margin: 0;
	padding-block: 10px;
	/* Room for the close button on both sides keeps the text centred. The
	 * button sits at the edge of the wrap's padding, so the gutter already
	 * gives part of that room. */
	padding-inline: max(12px, calc(44px - var(--gutter)));
	text-align: center;
}

/* Twee teksten in de HTML (inc/launch-bar.php): de volle zin met link, en
 * een korte voor de telefoon. Op 390px was de volle zin vijf regels en 125px
 * hoog; met de cookiemelding erbij een derde van het eerste scherm (slop-check
 * 1 okt). De korte zin is zelf de link, met de pijl van .link-arrow: zin plus
 * linktekst past in geen enkele taal op twee regels. */
.launch-bar .launch-bar__short {
	display: none;
}

@media (max-width: 600px) {
	.launch-bar {
		font-size: 14px;
		line-height: 1.35;
	}

	.launch-bar .launch-bar__long {
		display: none;
	}

	/* Links uitgelijnd, op de lijn van het logo: gecentreerd kost de knop aan
	 * beide kanten ruimte, en die is hier nodig om op twee regels te blijven.
	 * De link vult de balk: het hele vlak links van het kruisje is tikbaar. */
	.launch-bar p {
		display: flex;
		align-items: center;
		min-height: 44px;
		padding: 0 32px 0 0;
		text-align: left;
	}

	.launch-bar .launch-bar__short {
		display: block;
		flex: 1;
		padding-block: 8px;
		font-weight: 600;
		text-decoration: none;
		white-space: normal;
		text-wrap: pretty;
	}

	.launch-bar .launch-bar__short::after {
		content: "\00a0→";
	}
}

/* Smalle telefoons (360): een maat kleiner, zodat ook de langste talen
 * (pl, sk) op twee regels blijven. */
@media (max-width: 374px) {
	.launch-bar {
		font-size: 13px;
	}
}

/* 44 x 44: a comfortable tap target on a phone; the icon itself stays 16 px. */
.launch-bar__close {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.launch-bar__close:hover {
	background: rgba(0, 0, 0, 0.08);
}

.launch-bar__close:focus-visible {
	outline: 2px solid #171717;
	outline-offset: 2px;
}

.launch-bar a {
	font-weight: 700;
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
	white-space: nowrap;
}

body:has(.mobile-menu[open]) .launch-bar {
	display: none;
}

/* ------------------------------------------ actie SELLGRIP26: één rustige regel
 * Op de Global Marketplace-pagina, de prijzenpagina en de NL-overstap
 * (sellgrip_promo_note(), inc/sellgrip26.php); verdwijnt vanzelf na afloop.
 * promo-ended: de melding boven een actie-artikel na afloop. */
.promo-note,
.promo-ended {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 16px;
	max-width: 50rem;
	margin: 24px 0 0;
	padding: 12px 16px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--card);
	font-size: 0.95rem;
	color: var(--graphite);
}

.promo-note strong {
	color: var(--ink);
	letter-spacing: 0.02em;
}

.promo-ended {
	margin: 16px 0 8px;
}

/* ------------------------------------------ wat Sellgrip voor je doet (usp)
 * parts/sellgrip-usps.php: vier groepen in de volgorde van het dashboard,
 * drie punten per groep. Eén rood accent: de korte streep boven elke groep.
 * Vier kolommen vanaf 1100px, twee vanaf 640px, daaronder één. */
.usp {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 40px 32px;
}

.usp-group-h {
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--graphite);
	padding-top: 14px;
	border-top: 2px solid var(--red);
}

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

.usp-item {
	padding: 18px 0;
	border-bottom: 1px solid var(--line);
}

.usp-item:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.usp-t {
	display: inline;
	font-weight: 700;
	font-size: 1.08rem;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--ink);
	text-decoration: none;
}

/* Harde spatie voor de pijl: hij breekt nooit alleen naar de volgende regel. */
.usp-t::after {
	content: "\00a0\2192";
	color: var(--red-text);
}

.usp-t:hover {
	text-decoration: underline;
}

.usp-d {
	margin-top: 6px;
	color: var(--graphite);
	font-size: 0.97rem;
}

.usp-plan {
	margin-top: 8px;
	font-size: 0.8rem;
	font-weight: 650;
	color: var(--muted);
}

.usp-more {
	margin-top: 40px;
	padding-top: 20px;
	border-top: 1px solid var(--line);
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 18px;
	font-size: 0.95rem;
}

.usp-more-h {
	font-weight: 700;
	color: var(--ink);
}

.usp-more a {
	color: var(--graphite);
	text-decoration: underline;
	text-decoration-color: var(--line);
	text-underline-offset: 3px;
	padding-block: 2px;
}

.usp-more a:hover {
	color: var(--red-text-strong);
	text-decoration-color: currentColor;
}

.usp-foot > p {
	max-width: 46em;
}

.usp-foot {
	margin-top: 24px;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px 32px;
	color: var(--graphite);
}

.usp-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
}

@media (max-width: 1099px) {
	.usp {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 639px) {
	.usp {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.usp-more {
		display: block;
	}

	.usp-more-h {
		display: block;
		margin-bottom: 6px;
	}

	.usp-more a {
		display: inline-block;
		margin: 0 14px 6px 0;
	}
}

/* De bannerweek (inc/banner-week.php): het label in het geel van de balk
 * bovenaan en het SELLGRIP26-codevak, zwarte tekst, plat. */
.tag.tag-week {
	border-color: #ffd400;
	background: #ffd400;
	color: #111;
}

/* In de hero: één regel boven de knoppen, in hetzelfde geel. */
.hero-week {
	margin: 18px 0 0;
}

.hero-week .tag {
	font-size: 0.9rem;
	padding: 7px 10px;
	white-space: normal;
	line-height: 1.3;
}

/* Welkom voor bezoekers uit het Seller Portal (templates/home.php), op de
 * plek van de vraag "Verkoopt u al op Kaufland?". */
.hero-welcome {
	margin: 18px 0 0;
	font-size: 1rem;
	font-weight: 600;
	color: var(--ink);
	max-width: 34rem;
}

/* GROTE SCHERMEN (founder, 5 okt 2026: "op een groot scherm moet het hele
 * scherm gevuld zijn, net zoals op mijn MacBook"). Een inline script in de
 * <head> van elke pagina zet de hele pagina op schaal vanaf ongeveer MacBook-
 * formaat (html zoom, --vz). vh/vw zijn hierboven door --vz gedeeld, anders
 * zouden "schermhoog" en "schermbreed" dubbel meeschalen. Afdrukken: op ware
 * grootte. */
@media print {
	html {
		zoom: 1 !important;
	}
}