/* ==========================================================================
   Kokobet Casino — hoofdstijlblad
   Opbouw: fonts → tokens → basis → toegankelijkheid → onderdelen → media
   ========================================================================== */

/* --- lettertypen, lokaal gehost ------------------------------------------ */
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("/typeface/inter-latin-400-normal.woff2") format("woff2");
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("/typeface/inter-latin-500-normal.woff2") format("woff2");
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("/typeface/inter-latin-600-normal.woff2") format("woff2");
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("/typeface/inter-latin-700-normal.woff2") format("woff2");
}

/* --- ontwerptokens ------------------------------------------------------- */
:root {
	/* kleuren */
	--tint-prime: #fcbf1a;
	--tint-vivid: #3c4458;
	--tint-accent-strong: #2f3544;
	--tint-base-plane: #191d25;
	--tint-surface-2: #22262f;
	--tint-letters: #ffffff;
	--tint-soft-text: #bfbfbf;
	--tint-hairline: #333a49;
	--tint-stroke-heavy: #4a5468;
	--tint-grad-1: #75839f;
	--tint-gradient-mid: #505c77;
	--tint-notice: #dc2626;

	/* ritme (SPACE-05) */
	--rhythm-1: 3px;
	--rhythm-2: 10px;
	--rhythm-3: 18px;
	--rhythm-4: 28px;
	--rhythm-5: 44px;
	--rhythm-6: 60px;
	--rhythm-7: 88px;
	--rhythm-8: 128px;

	/* vormen (GEO-03) */
	--soften-1: 2px;
	--soften-2: 2px;
	--soften-3: 6px;
	--soften-4: 10px;
	--soften-5: 16px;
	--soften-6: 16px;
	--soften-7: 20px;
	--soften-8: 24px;
	--soften-capsule: 9999px;
	--soften-dot: 50%;
	--cast-1: none;
	--cast-2: none;
	--cast-3: 0 1px 3px rgba(0, 0, 0, 0.05);
	--cast-4: 0 4px 12px rgba(0, 0, 0, 0.09);
	--cast-5: 0 8px 24px rgba(0, 0, 0, 0.13);
	--cast-6: 0 14px 40px rgba(0, 0, 0, 0.2);
	--cast-7: 0 22px 60px rgba(0, 0, 0, 0.28);
	--cast-8: 0 30px 80px rgba(0, 0, 0, 0.34);
	--outline-light: 1px;
	--outline-medium: 2px;
	--outline-heavy: 3px;

	/* typografie (TYPO-01) */
	--type-banner: "Inter", "Segoe UI", system-ui, sans-serif;
	--type-reading: "Inter", "Segoe UI", system-ui, sans-serif;
	--scale-display-1: clamp(30px, 7.2vw, 64px);
	--scale-head: clamp(24px, 4.4vw, 40px);
	--scale-display-3: clamp(20px, 2.8vw, 28px);
	--scale-h4: clamp(18px, 2.1vw, 22px);
	--scale-sm-2: 16px;
	--scale-h6: 14px;
	--scale-base: 16px;
	--scale-petite: 13px;
	--scale-legal: 11px;
	--rhythm-close: 1.1;
	--rhythm-default: 1.5;
	--rhythm-airy: 1.75;
	--boldness-plain: 400;
	--boldness-mid: 500;
	--boldness-bold: 700;
	--letter-tight: -0.02em;
	--letter-regular: 0;
	--letter-open: 0.08em;

	/* beweging */
	--beat-short: 111ms;
	--beat-normal: 210ms;
	--beat-slow: 341ms;
	--ease-settle: cubic-bezier(0.27, 0.95, 0.4, 0.94);
	--ease-start: cubic-bezier(0.5, 0.05, 0.32, 0.93);
	--ease-in-out: cubic-bezier(0.5, 0.05, 0.32, 0.93);
	--ease-elastic: cubic-bezier(0.33, 1.7, 0.66, 1.15);

	/* maatvoering (CONT-07) */
	--shell-site: 1260px;
	--shell-inner: 1260px;
	--shell-pad-lg: 48px;
	--shell-pad-md: 24px;
	--shell-edge-narrow: 16px;
	--bar-size-desktop: 78px;
	--bar-h-sm: 62px;

	/* eigen hulpwaarden van deze bouw */
	--kb-narrow: 540px;
	--kb-sec-y: 46px;
	--kb-crown: 118px;
	--kb-edge: var(--shell-edge-narrow);
	--kb-logo-h: 44px;
}

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

html {
	overflow-x: clip;
	-webkit-text-size-adjust: 100%;
	scroll-padding-block-start: calc(var(--kb-crown) + var(--rhythm-3));
}

body {
	overflow-x: clip;
	margin: 0;
	margin-block-start: var(--kb-crown);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: var(--tint-base-plane);
	color: var(--tint-letters);
	font-family: var(--type-reading);
	font-size: var(--scale-base);
	font-weight: var(--boldness-plain);
	line-height: var(--rhythm-default);
	letter-spacing: var(--letter-regular);
	-webkit-font-smoothing: antialiased;
}

.page-main {
	flex: 1 0 auto;
	display: block;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: anywhere;
	margin: 0;
	font-family: var(--type-banner);
	font-weight: var(--boldness-bold);
	line-height: var(--rhythm-close);
	letter-spacing: var(--letter-tight);
	color: var(--tint-letters);
}

p {
	margin: 0 0 var(--rhythm-3);
}

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

svg {
	fill: currentColor;
}

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

table {
	border-collapse: collapse;
	inline-size: 100%;
}

button {
	font: inherit;
	color: inherit;
	cursor: pointer;
}

/* --- toegankelijkheid ---------------------------------------------------- */
.skip-hop {
	position: fixed;
	inset-inline-start: var(--rhythm-3);
	z-index: 400;
	padding: var(--rhythm-2) var(--rhythm-4);
	border-radius: var(--soften-3);
	background: var(--tint-prime);
	color: var(--tint-base-plane);
	font-weight: var(--boldness-bold);
	text-decoration: none;
}

.skip-hop:not(:focus) {
	top: -200px !important;
}

.skip-hop:focus {
	top: var(--rhythm-2);
}

.sr-only {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

:focus-visible {
	outline: var(--outline-medium) solid var(--tint-prime);
	outline-offset: 2px;
}

/* --- gedeelde breedte van alle secties ----------------------------------- */
.b02-body,
.i32-body,
.c69-body,
.t81-body,
.s25-body,
.b69-body,
.g21-body,
.s26-body,
.v79-body,
.m28-body,
.j91-body,
.r35-body,
.t16-body,
.y94-body {
	inline-size: 100%;
	max-width: calc(var(--shell-site) + 2 * var(--shell-pad-lg));
	margin-inline: auto;
	padding-inline: var(--kb-edge);
}

.i32,
.c69,
.t81,
.s25,
.b69,
.g21,
.s26,
.v79,
.m28,
.j91,
.t16,
.y94 {
	padding-block: var(--kb-sec-y);
	background: var(--tint-base-plane);
}

.r35 {
	padding-block: var(--rhythm-4);
	background: var(--tint-base-plane);
}

/* ==========================================================================
   Kopbalk — HEAD-RIGHT (logo links, menu naar rechts, knoppen erachter)
   ========================================================================== */
.h02 {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: 120;
	background: var(--tint-base-plane);
	box-shadow: var(--cast-4);
}

.rg-wrap {
	background: var(--tint-accent-strong);
	padding-block: var(--rhythm-2);
	padding-inline: var(--kb-edge);
}

.rg-say {
	display: block;
	margin: 0;
	text-align: center;
	background: var(--tint-accent-strong);
	color: var(--tint-letters);
	font-size: var(--scale-petite);
	line-height: 1.35;
}

.rg-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 34px;
	min-block-size: 24px;
	margin-inline-end: var(--rhythm-2);
	border-radius: var(--soften-capsule);
	background: var(--tint-notice);
	color: #ffffff;
	font-size: var(--scale-legal);
	font-weight: var(--boldness-bold);
	letter-spacing: var(--letter-open);
	vertical-align: middle;
}

.rg-hop {
	background: var(--tint-accent-strong);
	color: var(--tint-prime);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.rg-hop:hover,
.rg-hop:focus-visible {
	background: var(--tint-accent-strong);
	color: #ffe08a;
}

.h02-band {
	height: 78px;
	min-height: 78px;
	display: flex;
	align-items: center;
	gap: var(--rhythm-3);
	max-width: 1440px;
	margin-inline: auto;
	padding-inline: var(--kb-edge);
	background: var(--tint-base-plane);
}

.h02-mark {
	order: 1;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	padding: 5px 10px;
	border-radius: var(--soften-4);
	background: #f6f5f2;
	color: var(--tint-base-plane);
	text-decoration: none;
}

.h02-mark-pic {
	flex-shrink: 0;
	block-size: var(--kb-logo-h);
	inline-size: auto;
	max-width: none;
}

.h02-links {
	order: 2;
	display: none;
	flex: 0 0 auto;
	margin-inline-start: auto;
	background: var(--tint-base-plane);
}

.h02-roll {
	display: flex;
	align-items: center;
	gap: var(--rhythm-3);
	flex-wrap: nowrap;
}

.h02-cell {
	position: relative;
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.h02-cell[hidden] {
	display: none;
}

.h02-cell + .h02-cell::before {
	content: "/";
	margin-inline-end: var(--rhythm-3);
	color: var(--tint-soft-text);
	font-size: var(--scale-petite);
}

.h02-route {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
	padding-inline: var(--rhythm-2);
	border-radius: var(--soften-capsule);
	background: var(--tint-base-plane);
	color: var(--tint-letters);
	font-size: 14px;
	font-weight: 500;
	line-height: var(--rhythm-close);
	white-space: nowrap;
	text-decoration: none;
	transition: color var(--beat-short) var(--ease-settle), background-color var(--beat-short) var(--ease-settle);
}

.h02-route:hover,
.h02-route:focus-visible {
	background: var(--tint-base-plane);
	color: var(--tint-prime);
}

.h02-route.is-here {
	background: var(--tint-vivid);
	color: var(--tint-letters);
}

.h02-more-lever {
	display: inline-flex;
	align-items: center;
	gap: var(--rhythm-1);
	min-block-size: 44px;
	padding-inline: var(--rhythm-3);
	border: var(--outline-light) solid var(--tint-stroke-heavy);
	border-radius: var(--soften-capsule);
	background: var(--tint-base-plane);
	color: var(--tint-letters);
	font-size: 14px;
	font-weight: 500;
	white-space: nowrap;
}

.h02-more-lever:hover,
.h02-more-lever:focus-visible {
	background: var(--tint-vivid);
	color: var(--tint-letters);
}

.h02-more-pane {
	position: absolute;
	inset-block-start: calc(100% + var(--rhythm-2));
	inset-inline-end: 0;
	z-index: 30;
	display: none;
	min-inline-size: 240px;
	max-block-size: 62vh;
	overflow-y: auto;
	padding: var(--rhythm-2);
	border: var(--outline-light) solid var(--tint-hairline);
	border-radius: var(--soften-4);
	background: var(--tint-surface-2);
	box-shadow: var(--cast-6);
}

.h02-more-pane.is-open {
	display: block;
}

.h02-more-pane .h02-cell {
	display: block;
}

.h02-more-pane .h02-cell::before {
	content: none;
}

.h02-more-pane .h02-route {
	display: flex;
	inline-size: 100%;
	border-radius: var(--soften-3);
	background: var(--tint-surface-2);
	white-space: normal;
}

.h02-more-pane .h02-route:hover,
.h02-more-pane .h02-route:focus-visible {
	background: var(--tint-vivid);
	color: var(--tint-prime);
}

.h02-deck {
	order: 3;
	display: flex;
	align-items: center;
	gap: var(--rhythm-3);
	margin-inline-start: auto;
	background: var(--tint-base-plane);
}

.h02-key {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: 46px;
	padding-inline: var(--rhythm-4);
	border-radius: var(--soften-4);
	font-family: var(--type-banner);
	font-size: 14px;
	font-weight: var(--boldness-bold);
	line-height: var(--rhythm-close);
	white-space: nowrap;
	text-decoration: none;
	flex-shrink: 0;
}

.h02-key-quiet {
	border: var(--outline-light) solid var(--tint-stroke-heavy);
	background: var(--tint-base-plane);
	color: var(--tint-letters);
	transition: background-color var(--beat-normal) var(--ease-settle), color var(--beat-normal) var(--ease-settle);
}

.h02-key-quiet:hover,
.h02-key-quiet:focus-visible {
	background: var(--tint-letters);
	color: var(--tint-base-plane);
}

.h02-menu-lever {
	order: 4;
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
	margin-inline-start: auto;
	padding-inline: var(--rhythm-3);
	border: var(--outline-light) solid var(--tint-stroke-heavy);
	border-radius: var(--soften-capsule);
	background: var(--tint-base-plane);
	color: var(--tint-letters);
	font-size: 14px;
	font-weight: 500;
	white-space: nowrap;
}

.h02-menu-lever:hover,
.h02-menu-lever:focus-visible {
	background: var(--tint-vivid);
	color: var(--tint-prime);
}

.h02-sheet {
	display: none;
	max-block-size: calc(100vh - var(--kb-crown));
	overflow-y: auto;
	border-block-start: var(--outline-light) solid var(--tint-hairline);
	background: var(--tint-surface-2);
}

.h02-sheet.is-open {
	display: block;
}

.h02-stack {
	padding: var(--rhythm-3) var(--kb-edge) var(--rhythm-4);
	background: var(--tint-surface-2);
}

.h02-ladder {
	display: flex;
	flex-direction: column;
}

.h02-shelf {
	display: block;
}

.h02-hop {
	display: flex;
	align-items: center;
	min-block-size: 48px;
	padding-inline: var(--rhythm-2);
	background: var(--tint-surface-2);
	color: var(--tint-letters);
	font-size: var(--scale-base);
	font-weight: 500;
	text-decoration: none;
}

.h02-shelf + .h02-shelf .h02-hop {
	border-block-start: var(--outline-light) solid var(--tint-hairline);
}

.h02-hop:hover,
.h02-hop:focus-visible {
	background: var(--tint-vivid);
	color: var(--tint-prime);
}

/* ==========================================================================
   Hero — HERO-01 (full-bleed cinematic)
   ========================================================================== */
.b02 {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-block-size: clamp(460px, 72vh, 620px);
	overflow: hidden;
	background: var(--tint-base-plane);
}

.b02-scene {
	position: absolute;
	inset: 0;
	z-index: 1;
	background-color: var(--tint-accent-strong);
	background-image: url("/pictures/panorama-13.webp");
	background-size: cover;
	background-position: center center;
}

.b02-veil {
	position: absolute;
	inset: 0;
	z-index: 2;
	background-image: linear-gradient(to bottom, rgba(12, 14, 19, 0.35) 0%, rgba(12, 14, 19, 0.72) 52%, rgba(12, 14, 19, 0.94) 100%);
}

.b02-body {
	position: relative;
	z-index: 3;
	padding-block: var(--rhythm-6) var(--rhythm-5);
}

.b02-eyelet {
	display: inline-block;
	margin-block-end: var(--rhythm-3);
	padding: var(--rhythm-1) var(--rhythm-3);
	border-radius: var(--soften-capsule);
	background: var(--tint-prime);
	color: var(--tint-base-plane);
	font-size: var(--scale-petite);
	font-weight: var(--boldness-bold);
	letter-spacing: var(--letter-open);
	text-transform: uppercase;
}

.b02-hdr {
	max-width: 16ch;
	font-size: var(--scale-display-1);
	color: #ffffff;
}

.b02-tagline {
	max-width: var(--kb-narrow);
	margin-block-start: var(--rhythm-4);
	color: #f0f1f4;
	font-size: var(--scale-sm-2);
	font-weight: var(--boldness-plain);
	line-height: var(--rhythm-default);
}

.b02-deck {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rhythm-3);
	margin-block-start: var(--rhythm-5);
}

.b02-key {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: 52px;
	padding-inline: var(--rhythm-5);
	border-radius: var(--soften-4);
	font-family: var(--type-banner);
	font-size: 15px;
	font-weight: var(--boldness-bold);
	text-decoration: none;
}

.b02-key-quiet {
	border: var(--outline-medium) solid #ffffff;
	background: rgba(12, 14, 19, 0.72);
	color: #ffffff;
	transition: background-color var(--beat-normal) var(--ease-settle), color var(--beat-normal) var(--ease-settle);
}

.b02-key-quiet:hover,
.b02-key-quiet:focus-visible {
	background: #ffffff;
	color: var(--tint-base-plane);
}

.b02-fine {
	display: block;
	margin-block-start: var(--rhythm-4);
	color: #e2e4e9;
	font-size: var(--scale-petite);
	letter-spacing: var(--letter-open);
}

/* ==========================================================================
   Paginakop — PHEAD-01
   ========================================================================== */
.i32 {
	border-block-end: var(--outline-light) solid var(--tint-hairline);
}

.i32-eyelet {
	display: inline-block;
	margin-block-end: var(--rhythm-3);
	background: var(--tint-base-plane);
	color: var(--tint-prime);
	font-size: var(--scale-petite);
	font-weight: 500;
	letter-spacing: var(--letter-open);
	text-transform: uppercase;
}

.i32-hdr {
	max-width: 22ch;
	font-size: var(--scale-display-1);
}

.i32-rule {
	inline-size: 60px;
	block-size: 0;
	margin-block: var(--rhythm-4) var(--rhythm-3);
	border-block-end: var(--outline-medium) solid var(--tint-prime);
}

.i32-words {
	margin: 0;
	color: var(--tint-soft-text);
	font-size: var(--scale-sm-2);
	line-height: var(--rhythm-default);
}

/* ==========================================================================
   Lopende tekst — PROSE-15 (eerste alinea vet)
   ========================================================================== */
.c69-part {
	margin-block-end: var(--rhythm-5);
}

.c69-part:last-child {
	margin-block-end: 0;
}

.c69-lead {
	margin-block-start: var(--rhythm-4);
	margin-block-end: var(--rhythm-3);
	font-size: var(--scale-head);
}

.c69 p {
	color: var(--tint-soft-text);
	font-size: var(--scale-base);
	line-height: var(--rhythm-airy);
}

.c69 .c69-open {
	color: var(--tint-letters);
	font-weight: 600;
}

.c69 strong {
	color: var(--tint-letters);
	font-weight: var(--boldness-bold);
}

.c69-route {
	background: var(--tint-base-plane);
	color: var(--tint-prime);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: text-decoration-thickness var(--beat-short) var(--ease-settle);
}

.c69-route:hover,
.c69-route:focus-visible {
	background: var(--tint-base-plane);
	color: #ffe08a;
	text-decoration-thickness: 3px;
}

.c69-roll {
	margin-block: var(--rhythm-3);
}

.c69-cell {
	position: relative;
	margin-block-end: var(--rhythm-2);
	padding-inline-start: var(--rhythm-4);
	color: var(--tint-soft-text);
	line-height: var(--rhythm-airy);
}

.c69-cell::before {
	content: "\25B8";
	position: absolute;
	inset-inline-start: 0;
	color: var(--tint-prime);
}

.c69-steps {
	counter-reset: kbstep;
	margin-block: var(--rhythm-3);
}

.c69-step {
	position: relative;
	counter-increment: kbstep;
	margin-block-end: var(--rhythm-2);
	padding-inline-start: var(--rhythm-5);
	color: var(--tint-soft-text);
	line-height: var(--rhythm-airy);
}

.c69-step::before {
	content: counter(kbstep) ".";
	position: absolute;
	inset-inline-start: 0;
	color: var(--tint-prime);
	font-weight: var(--boldness-bold);
}

.c69-frame {
	margin: var(--rhythm-5) 0;
	padding: var(--rhythm-3);
	border: var(--outline-light) solid var(--tint-hairline);
	border-radius: var(--soften-5);
	background: var(--tint-surface-2);
}

.c69-frame-wide {
	max-width: 900px;
	margin-inline: auto;
}

.c69-frame-tall {
	max-width: 520px;
	margin-inline: auto;
}

.c69-pic {
	inline-size: 100%;
	height: auto;
	max-block-size: 420px;
	object-fit: contain;
	border-radius: var(--soften-4);
	background: var(--tint-accent-strong);
}

/* ==========================================================================
   Kaartenraster — GRID-01
   ========================================================================== */
.t81-lead,
.s25-lead,
.b69-lead,
.s26-lead,
.m28-lead {
	margin-block-end: var(--rhythm-5);
	font-size: var(--scale-head);
}

.t81-stack {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
	gap: var(--rhythm-5);
}

.t81-tile {
	display: flex;
	flex-direction: column;
	padding: var(--rhythm-5);
	border: var(--outline-light) solid var(--tint-hairline);
	border-radius: var(--soften-4);
	background: var(--tint-surface-2);
	transition: border-color var(--beat-normal) var(--ease-settle), background-color var(--beat-normal) var(--ease-settle);
}

.t81-tile:hover {
	border-color: var(--tint-prime);
	background: #272c37;
}

.t81-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 46px;
	block-size: 46px;
	margin-block-end: var(--rhythm-3);
	border: var(--outline-light) solid var(--tint-stroke-heavy);
	border-radius: var(--soften-4);
	background: var(--tint-accent-strong);
	color: var(--tint-prime);
}

.t81-glyph {
	inline-size: 24px;
	block-size: 24px;
}

.t81-hdr {
	margin-block-end: var(--rhythm-3);
	font-size: var(--scale-h4);
	color: var(--tint-letters);
}

.t81-words {
	color: var(--tint-soft-text);
	font-size: var(--scale-base);
	line-height: var(--rhythm-default);
}

.t81-slot {
	display: flex;
	flex-direction: column;
	gap: var(--rhythm-3);
	align-items: flex-start;
	justify-content: center;
	padding: var(--rhythm-5);
	border-radius: var(--soften-4);
	background: var(--tint-vivid);
}

.t81-slot-words {
	margin: 0;
	color: var(--tint-letters);
	font-size: var(--scale-h4);
	font-family: var(--type-banner);
	font-weight: var(--boldness-bold);
	line-height: var(--rhythm-close);
}

/* ==========================================================================
   Tabel — TABLE-04 (eerste kolom uitgelicht)
   ========================================================================== */
.s26-scroll {
	overflow-x: auto;
	border: var(--outline-light) solid var(--tint-hairline);
	border-radius: var(--soften-4);
	background: var(--tint-surface-2);
}

.s26-grid {
	min-inline-size: 560px;
	background: var(--tint-surface-2);
	color: var(--tint-soft-text);
	font-size: var(--scale-petite);
}

.s26-grid th,
.s26-grid td {
	padding: var(--rhythm-3);
	border-block-end: var(--outline-light) solid var(--tint-hairline);
	text-align: start;
	overflow-wrap: break-word;
	word-break: normal;
	hyphens: none;
	vertical-align: top;
}

.s26-grid thead th {
	background: var(--tint-prime);
	color: var(--tint-base-plane);
	font-weight: var(--boldness-bold);
	letter-spacing: var(--letter-open);
	text-transform: uppercase;
}

.s26-grid thead th:first-child {
	background: var(--tint-prime);
	color: var(--tint-base-plane);
}

.s26-key-lane {
	inline-size: 26%;
	border-inline-end: 4px solid var(--tint-vivid);
	background: #f5d264;
	color: #191d25;
	font-weight: var(--boldness-bold);
}

.s26-grid td {
	background: var(--tint-surface-2);
	color: var(--tint-soft-text);
}

/* ==========================================================================
   Ervaringen — REV-02 (redactionele citaten)
   ========================================================================== */
.b69-stack {
	display: flex;
	flex-direction: column;
}

.b69-cell {
	position: relative;
	max-width: 760px;
	margin-inline: auto;
	padding-block: var(--rhythm-5);
	border-block-end: var(--outline-light) solid var(--tint-hairline);
}

.b69-cell:last-child {
	border-block-end: 0;
}

.b69-cell::before {
	content: "\201C";
	position: absolute;
	inset-block-start: var(--rhythm-2);
	inset-inline-start: -8px;
	color: var(--tint-prime);
	font-family: var(--type-banner);
	font-size: 64px;
	line-height: 1;
	opacity: 0.35;
}

.b69-quote {
	margin: 0;
}

.b69-quote p {
	margin: 0;
	color: var(--tint-letters);
	font-family: var(--type-banner);
	font-size: var(--scale-h4);
	font-style: italic;
	line-height: var(--rhythm-default);
}

.b69-extra {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--rhythm-3);
	margin-block-start: var(--rhythm-3);
}

.b69-person {
	background: var(--tint-base-plane);
	color: var(--tint-letters);
	font-size: var(--scale-petite);
	font-style: normal;
	font-weight: 600;
	letter-spacing: var(--letter-open);
	text-transform: uppercase;
}

.b69-score {
	display: inline-flex;
	align-items: center;
	gap: var(--rhythm-1);
	background: var(--tint-base-plane);
	color: var(--tint-soft-text);
	font-size: var(--scale-petite);
}

.b69-stars {
	color: var(--tint-prime);
	letter-spacing: 1px;
}

.b69-slot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--rhythm-3);
	max-width: 760px;
	margin-inline: auto;
	margin-block: var(--rhythm-4);
	padding: var(--rhythm-4);
	border-radius: var(--soften-4);
	background: var(--tint-vivid);
}

.b69-slot-words {
	margin: 0;
	flex: 1 1 240px;
	color: var(--tint-letters);
	font-family: var(--type-banner);
	font-size: var(--scale-h4);
	font-weight: var(--boldness-bold);
	line-height: var(--rhythm-close);
}

/* ==========================================================================
   Vragen — FAQ-01 (klassieke accordeon)
   ========================================================================== */
.s25-stack {
	display: flex;
	flex-direction: column;
	gap: var(--rhythm-2);
}

.s25-cell {
	border: var(--outline-light) solid var(--tint-hairline);
	border-radius: var(--soften-4);
	background: var(--tint-surface-2);
	overflow: hidden;
}

.s25-ask {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rhythm-3);
	min-block-size: 56px;
	padding: var(--rhythm-3) var(--rhythm-4);
	background: var(--tint-surface-2);
	color: var(--tint-letters);
	cursor: pointer;
	list-style: none;
	transition: background-color var(--beat-normal) var(--ease-settle);
}

.s25-ask::-webkit-details-marker {
	display: none;
}

.s25-ask:hover {
	background: #272c37;
}

.s25-hdr {
	margin: 0;
	color: var(--tint-letters);
	font-size: var(--scale-sm-2);
	font-weight: 600;
	line-height: var(--rhythm-default);
}

.s25-sign {
	position: relative;
	flex-shrink: 0;
	inline-size: 22px;
	block-size: 22px;
	border-radius: var(--soften-dot);
	background: var(--tint-prime);
	transition: transform var(--beat-normal) var(--ease-settle);
}

.s25-sign::before,
.s25-sign::after {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	inline-size: 11px;
	block-size: 2px;
	margin-block-start: -1px;
	margin-inline-start: -5.5px;
	background: var(--tint-base-plane);
}

.s25-sign::after {
	transform: rotate(90deg);
	transition: opacity var(--beat-normal) var(--ease-settle);
}

.s25-cell[open] .s25-sign {
	transform: rotate(180deg);
}

.s25-cell[open] .s25-sign::after {
	opacity: 0;
}

.s25-reply {
	padding: 0 var(--rhythm-4) var(--rhythm-4);
	background: var(--tint-surface-2);
}

.s25-reply p {
	margin: 0;
	color: var(--tint-soft-text);
	line-height: var(--rhythm-airy);
}

/* ==========================================================================
   Oproepblok — CTA-02 (gecentreerde doos)
   ========================================================================== */
.g21-box {
	max-width: var(--kb-narrow);
	margin-inline: auto;
	padding: var(--rhythm-6) var(--rhythm-5);
	border: var(--outline-light) solid var(--tint-stroke-heavy);
	border-radius: var(--soften-5);
	background: var(--tint-surface-2);
	text-align: center;
}

.g21-hdr {
	font-size: var(--scale-head);
	color: var(--tint-letters);
}

.g21-words {
	margin-block: var(--rhythm-4);
	color: var(--tint-soft-text);
	line-height: var(--rhythm-airy);
}

.g21-fine {
	display: block;
	margin-block-start: var(--rhythm-3);
	color: var(--tint-soft-text);
	font-size: var(--scale-legal);
	letter-spacing: var(--letter-open);
}

/* ==========================================================================
   Tussenoproep — INLINE-CTA-01 (compacte band)
   ========================================================================== */
.t16 {
	padding-block: var(--rhythm-4);
	background: var(--tint-base-plane);
}

.t16-body {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--rhythm-3);
	padding-block: var(--rhythm-4);
	border-radius: var(--soften-5);
	background: var(--tint-vivid);
}

.t16-words {
	flex: 1 1 260px;
	margin: 0;
	color: var(--tint-letters);
	font-family: var(--type-banner);
	font-size: var(--scale-h4);
	font-weight: var(--boldness-bold);
	line-height: var(--rhythm-close);
}

/* ==========================================================================
   Juridische pagina — LEGAL-03 (zijbalk met inhoud)
   ========================================================================== */
.v79-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--rhythm-5);
}

.v79-index {
	align-self: start;
	padding: var(--rhythm-4);
	border: var(--outline-light) solid var(--tint-hairline);
	border-radius: var(--soften-4);
	background: var(--tint-surface-2);
}

.v79-index-hdr {
	margin-block-end: var(--rhythm-3);
	color: var(--tint-letters);
	font-size: var(--scale-h4);
}

.v79-roll {
	counter-reset: kbtoc;
}

.v79-index .v79-cell {
	counter-increment: kbtoc;
	margin-block-end: var(--rhythm-2);
}

.v79-index .v79-cell::before {
	content: counter(kbtoc) ". ";
	color: var(--tint-prime);
	font-weight: var(--boldness-bold);
}

.v79-route {
	background: var(--tint-surface-2);
	color: var(--tint-soft-text);
	font-size: var(--scale-petite);
	text-decoration: none;
}

.v79-route:hover,
.v79-route:focus-visible {
	background: var(--tint-surface-2);
	color: var(--tint-prime);
}

.v79-main {
	min-inline-size: 0;
}

.v79-open {
	color: var(--tint-letters);
	font-weight: 600;
	line-height: var(--rhythm-airy);
}

.v79-part {
	margin-block-start: var(--rhythm-5);
	scroll-margin-block-start: calc(var(--kb-crown) + var(--rhythm-4));
}

.v79-lead {
	margin-block-end: var(--rhythm-3);
	font-size: var(--scale-display-3);
}

.v79-main p {
	color: var(--tint-soft-text);
	line-height: var(--rhythm-airy);
}

.v79-roll-help {
	margin-block-start: var(--rhythm-3);
}

.v79-roll-help .v79-cell {
	position: relative;
	margin-block-end: var(--rhythm-2);
	padding-inline-start: var(--rhythm-4);
	color: var(--tint-soft-text);
	line-height: var(--rhythm-airy);
}

.v79-roll-help .v79-cell::before {
	content: "\25B8";
	position: absolute;
	inset-inline-start: 0;
	color: var(--tint-prime);
}

.v79-fine {
	margin-block-start: var(--rhythm-5);
	padding: var(--rhythm-4);
	border-inline-start: var(--outline-heavy) solid var(--tint-prime);
	border-radius: var(--soften-3);
	background: var(--tint-surface-2);
	color: var(--tint-soft-text);
	font-size: var(--scale-petite);
	line-height: var(--rhythm-default);
}

/* ==========================================================================
   Contactformulier — FORM-03
   ========================================================================== */
.m28-open {
	max-width: var(--kb-narrow);
	margin-inline: auto;
	margin-block-end: var(--rhythm-5);
	color: var(--tint-soft-text);
	text-align: center;
	line-height: var(--rhythm-airy);
}

.m28-sheet {
	max-width: 720px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: var(--rhythm-3);
}

.m28-entry {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	gap: var(--rhythm-2);
}

.m28-cue {
	color: var(--tint-letters);
	font-size: var(--scale-petite);
	font-weight: 600;
	letter-spacing: var(--letter-open);
	text-transform: uppercase;
}

.m28-box {
	inline-size: 100%;
	min-block-size: 48px;
	padding: var(--rhythm-2) var(--rhythm-3);
	border: var(--outline-light) solid var(--tint-stroke-heavy);
	border-radius: var(--soften-3);
	background: var(--tint-surface-2);
	color: var(--tint-letters);
	font-family: var(--type-reading);
	font-size: var(--scale-base);
}

.m28-box-tall {
	min-block-size: 140px;
	resize: vertical;
}

.m28-box:focus-visible {
	border-color: var(--tint-prime);
	background: var(--tint-surface-2);
	color: var(--tint-letters);
}

.m28-send {
	inline-size: 100%;
	min-block-size: 52px;
	border: 0;
	border-radius: var(--soften-4);
	background: var(--tint-prime);
	color: var(--tint-base-plane);
	font-family: var(--type-banner);
	font-size: 15px;
	font-weight: var(--boldness-bold);
	letter-spacing: var(--letter-open);
	text-transform: uppercase;
	transition: background-color var(--beat-normal) var(--ease-settle);
}

.m28-send:hover,
.m28-send:focus-visible {
	background: #ffd257;
	color: var(--tint-base-plane);
}

.m28-done {
	margin: 0;
	padding: var(--rhythm-3);
	border-radius: var(--soften-3);
	background: var(--tint-vivid);
	color: var(--tint-letters);
}

.m28-roll {
	max-width: 720px;
	margin-inline: auto;
	margin-block-start: var(--rhythm-5);
}

.m28-cell {
	margin-block-end: var(--rhythm-2);
	color: var(--tint-soft-text);
	font-size: var(--scale-petite);
}

.m28-route {
	background: var(--tint-base-plane);
	color: var(--tint-prime);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.m28-route:hover,
.m28-route:focus-visible {
	background: var(--tint-base-plane);
	color: #ffe08a;
}

/* ==========================================================================
   Auteurskaart — AUTH-07 (citaatstijl met portret)
   ========================================================================== */
.j91-tile {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--rhythm-5);
	padding: var(--rhythm-5);
	border-inline-start: 4px solid var(--tint-prime);
	border-radius: var(--soften-4);
	background: var(--tint-surface-2);
}

.j91-photo {
	position: relative;
	display: block;
	inline-size: 110px;
	block-size: 110px;
	overflow: hidden;
	border-radius: var(--soften-dot);
	background: var(--tint-accent-strong);
}

.j91-pic {
	position: absolute;
	inset-block-start: -4%;
	inset-inline-start: -76%;
	inline-size: 280%;
	max-width: none;
	height: auto;
}

.j91-main {
	min-inline-size: 0;
}

.j91-quote {
	display: block;
	color: var(--tint-prime);
	font-family: var(--type-banner);
	font-size: 52px;
	line-height: 0.6;
}

.j91-words {
	margin-block: var(--rhythm-3);
	color: var(--tint-letters);
	font-size: var(--scale-sm-2);
	font-style: italic;
	line-height: var(--rhythm-default);
}

.j91-extra {
	margin: 0;
	color: var(--tint-soft-text);
	font-size: var(--scale-petite);
	letter-spacing: var(--letter-open);
}

.j91-roll {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rhythm-2);
	margin-block-start: var(--rhythm-4);
}

.j91-cell {
	padding: var(--rhythm-1) var(--rhythm-3);
	border-radius: var(--soften-capsule);
	background: var(--tint-vivid);
	color: var(--tint-letters);
	font-size: var(--scale-petite);
}

.j91-articles {
	margin-block-start: var(--rhythm-5);
	padding: var(--rhythm-5);
	border: var(--outline-light) solid var(--tint-hairline);
	border-radius: var(--soften-4);
	background: var(--tint-base-plane);
}

.j91-articles-hdr {
	margin-block-end: var(--rhythm-3);
	font-size: var(--scale-display-3);
}

.j91-shelf {
	margin-block-end: var(--rhythm-2);
	padding-block-end: var(--rhythm-2);
	border-block-end: var(--outline-light) solid var(--tint-hairline);
}

.j91-route {
	background: var(--tint-base-plane);
	color: var(--tint-soft-text);
	font-size: var(--scale-base);
	text-decoration: none;
}

.j91-route:hover,
.j91-route:focus-visible {
	background: var(--tint-base-plane);
	color: var(--tint-prime);
}

/* ==========================================================================
   Auteursregel — BYLINE-06
   ========================================================================== */
.r35-body {
	display: flex;
	align-items: center;
	gap: var(--rhythm-3);
	padding-block: var(--rhythm-3);
	border-block-start: var(--outline-light) solid var(--tint-hairline);
}

.r35-words {
	flex: 1 1 auto;
	margin: 0;
	color: var(--tint-soft-text);
	font-size: var(--scale-petite);
	font-style: italic;
}

.r35-cue {
	color: var(--tint-soft-text);
}

.r35-person {
	background: var(--tint-base-plane);
	color: var(--tint-prime);
	font-style: normal;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: text-decoration-thickness var(--beat-short) var(--ease-settle);
}

.r35-person:hover,
.r35-person:focus-visible {
	background: var(--tint-base-plane);
	color: #ffe08a;
	text-decoration-thickness: 2px;
}

.r35-dash {
	color: var(--tint-soft-text);
}

.r35-role {
	color: var(--tint-soft-text);
}

.r35-photo {
	position: relative;
	flex-shrink: 0;
	display: block;
	inline-size: 52px;
	block-size: 52px;
	overflow: hidden;
	border-radius: var(--soften-dot);
	background: var(--tint-accent-strong);
}

.r35-pic {
	position: absolute;
	inset-block-start: -4%;
	inset-inline-start: -76%;
	inline-size: 280%;
	max-width: none;
	height: auto;
}

/* ==========================================================================
   Foutpagina — ERR-03 (zonder drama)
   ========================================================================== */
.y94 {
	display: flex;
	flex-direction: column;
	flex: 1 0 auto;
	justify-content: center;
}

.y94-core {
	inline-size: 100%;
	max-width: var(--kb-narrow);
	margin-inline: auto;
	text-align: center;
}

.y94-hdr {
	font-size: var(--scale-head);
}

.y94-words {
	margin-block: var(--rhythm-4);
	color: var(--tint-soft-text);
	line-height: var(--rhythm-airy);
}

.y94-key {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: 46px;
	padding-inline: var(--rhythm-5);
	border-radius: var(--soften-4);
	background: var(--tint-prime);
	color: var(--tint-base-plane);
	font-family: var(--type-banner);
	font-weight: var(--boldness-bold);
	text-decoration: none;
	transition: background-color var(--beat-normal) var(--ease-settle);
}

.y94-key:hover,
.y94-key:focus-visible {
	background: #ffd257;
	color: var(--tint-base-plane);
}

/* ==========================================================================
   Voettekst — FOOT-07 (asymmetrisch, zijblok rechts)
   ========================================================================== */
.l29 {
	background: var(--tint-prime);
	color: var(--tint-base-plane);
}

.l29-frame {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	inline-size: 100%;
	max-width: calc(var(--shell-site) + 2 * var(--shell-pad-lg));
	margin-inline: auto;
	padding-inline: var(--kb-edge);
	padding-block: var(--rhythm-6);
	gap: var(--rhythm-5);
}

.l29-main {
	min-inline-size: 0;
}

.l29-mark {
	display: inline-flex;
	align-items: center;
	padding: 6px 12px;
	border-radius: var(--soften-4);
	background: #f6f5f2;
	color: var(--tint-base-plane);
	text-decoration: none;
}

.l29-mark-pic {
	block-size: 46px;
	inline-size: auto;
	max-width: none;
}

.l29-links {
	margin-block-start: var(--rhythm-5);
	background: var(--tint-prime);
}

.l29-hdr {
	margin-block-end: var(--rhythm-3);
	color: var(--tint-base-plane);
	font-size: var(--scale-h4);
}

.l29-roll {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rhythm-2) var(--rhythm-4);
}

.l29-cell {
	display: block;
}

.l29-route {
	display: inline-flex;
	align-items: center;
	min-block-size: 34px;
	background: var(--tint-prime);
	color: #23200e;
	font-size: var(--scale-petite);
	font-weight: 500;
	text-decoration: none;
	border-block-end: var(--outline-light) solid transparent;
	transition: border-color var(--beat-short) var(--ease-settle);
}

.l29-route:hover,
.l29-route:focus-visible {
	background: var(--tint-prime);
	color: #000000;
	border-block-end-color: #23200e;
}

.l29-fine {
	display: block;
	margin-block-start: var(--rhythm-5);
	color: #3a3410;
	font-size: var(--scale-legal);
	line-height: var(--rhythm-default);
}

.l29-flank {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--rhythm-5);
	border-radius: var(--soften-5);
	background: var(--tint-vivid);
}

.l29-flank-word {
	color: var(--tint-letters);
	font-family: var(--type-banner);
	font-size: var(--scale-head);
	font-weight: var(--boldness-bold);
	letter-spacing: var(--letter-tight);
	text-transform: uppercase;
}

/* ==========================================================================
   Cookiemelding — COOK-06 (met voorkeurenlink)
   ========================================================================== */
.m11 {
	position: fixed;
	inset-block-end: 0;
	inset-inline: 0;
	z-index: 200;
	background: var(--tint-surface-2);
	border-block-start: var(--outline-light) solid var(--tint-stroke-heavy);
	box-shadow: var(--cast-7);
	clip-path: inset(0 0 0 0);
	transition: opacity var(--beat-slow) var(--ease-settle), clip-path var(--beat-slow) var(--ease-settle);
}

.m11[hidden] {
	display: none;
}

.m11.is-gone {
	opacity: 0;
	clip-path: inset(100% 0 0 0);
	pointer-events: none;
}

.m11-wrap {
	inline-size: 100%;
	max-width: calc(var(--shell-site) + 2 * var(--shell-pad-lg));
	margin-inline: auto;
	padding: var(--rhythm-3) var(--kb-edge);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--rhythm-3);
	background: var(--tint-surface-2);
}

.m11-note {
	flex: 1 1 280px;
	margin: 0;
	color: var(--tint-soft-text);
	font-size: var(--scale-petite);
	line-height: 1.4;
}

.m11-deck {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--rhythm-2);
}

.m11-more {
	display: inline-flex;
	align-items: center;
	min-block-size: 38px;
	padding-inline: var(--rhythm-2);
	background: var(--tint-surface-2);
	color: var(--tint-prime);
	font-size: var(--scale-petite);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.m11-more:hover,
.m11-more:focus-visible {
	background: var(--tint-surface-2);
	color: #ffe08a;
}

.m11-refuse,
.m11-yes {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: 38px;
	padding-inline: var(--rhythm-3);
	border-radius: var(--soften-3);
	font-size: var(--scale-petite);
	font-weight: 600;
	white-space: nowrap;
}

.m11-refuse {
	border: var(--outline-light) solid var(--tint-stroke-heavy);
	background: var(--tint-surface-2);
	color: var(--tint-letters);
}

.m11-refuse:hover,
.m11-refuse:focus-visible {
	background: var(--tint-vivid);
	color: var(--tint-letters);
}

.m11-yes {
	border: 0;
	background: var(--tint-prime);
	color: var(--tint-base-plane);
}

.m11-yes:hover,
.m11-yes:focus-visible {
	background: #ffd257;
	color: var(--tint-base-plane);
}

/* ==========================================================================
   Beweging — reveal «rise»
   ========================================================================== */
[data-motion] {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity var(--beat-slow) var(--ease-settle), transform var(--beat-slow) var(--ease-settle);
}

[data-motion].in-view {
	opacity: 1;
	transform: translateY(0);
}

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

	[data-motion] {
		opacity: 1;
		transform: none;
	}
}

/* ==========================================================================
   Breedere schermen
   ========================================================================== */
@media (min-width: 580px) {
	:root {
		--kb-edge: var(--shell-pad-md);
	}

	.t16-body {
		flex-wrap: nowrap;
		padding-inline: var(--rhythm-5);
	}

	.m28-sheet {
		gap: var(--rhythm-4);
	}
}

@media (min-width: 700px) {
	.j91-tile {
		grid-template-columns: 110px minmax(0, 1fr);
	}

	.t81-slot {
		flex-direction: row;
		align-items: center;
		gap: var(--rhythm-5);
	}

	.t81-slot-words {
		flex: 1 1 auto;
	}
}

@media (min-width: 860px) {
	:root {
		--kb-sec-y: 54px;
		--kb-logo-h: 52px;
	}

	.t81-stack {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.t81-slot {
		grid-column: 1 / -1;
	}

	.l29-frame {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	}

	.v79-body {
		grid-template-columns: 240px minmax(0, 1fr);
		gap: var(--rhythm-6);
	}

	.v79-index {
		position: sticky;
		inset-block-start: calc(var(--kb-crown) + var(--rhythm-3));
	}
}

@media (min-width: 900px) {
	.h02-links {
		display: block;
	}

	.h02-menu-lever {
		display: none;
	}

	.h02-sheet {
		display: none;
	}

	.h02-deck {
		margin-inline-start: var(--rhythm-3);
	}
}

@media (min-width: 1160px) {
	:root {
		--kb-edge: var(--shell-pad-lg);
		--kb-sec-y: 48px;
		--kb-logo-h: 56px;
	}

	.t81-stack {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.b02-body {
		padding-block: var(--rhythm-7) var(--rhythm-6);
	}

	.b02-tagline {
		font-size: 18px;
	}

	.h02-band {
		padding-inline: var(--rhythm-4);
	}
}

@media (min-width: 1520px) {
	:root {
		--kb-logo-h: 60px;
	}
}

/* --- smalle telefoons ---------------------------------------------------- */
@media (max-width: 720px) {
	.m11,
	.m11-wrap {
		padding: 12px 14px !important;
		gap: 8px !important;
		font-size: 13px !important;
		line-height: 1.35 !important;
	}

	.m11-refuse,
	.m11-yes,
	.m11-more {
		padding-inline: 14px !important;
		font-size: 12px !important;
		min-block-size: 38px !important;
	}

	.rg-say {
		font-size: var(--scale-legal);
	}
}

@media (max-width: 640px) {
	.s26-grid {
		min-inline-size: 0;
	}

	.s26-grid th,
	.s26-grid td {
		padding: var(--rhythm-2);
	}

	.s26-key-lane {
		inline-size: 32%;
	}
}

@media (max-width: 430px) {
	.m11-deck {
		inline-size: 100%;
	}

	.m11-refuse,
	.m11-yes {
		flex: 1 1 auto;
	}

	.b02-key,
	.g21-key,
	.t16-key {
		inline-size: 100%;
	}

	.b69-cell::before {
		inset-inline-start: 0;
		font-size: 44px;
	}
}

/* ==========================================================================
   Aanbiedingsknop — basisvorm (kleur en animatie komen uit cta-style.mjs)
   ========================================================================== */
.t81-key,
.b69-key,
.g21-key,
.t16-key {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: 50px;
	padding: 14px 30px;
	border-radius: var(--soften-4);
	font-family: var(--type-banner);
	font-size: 15px;
	font-weight: var(--boldness-bold);
	line-height: var(--rhythm-close);
	text-decoration: none;
	flex-shrink: 0;
}

.koko-act {
	min-block-size: 50px;
	padding: 14px 30px;
	border-radius: var(--soften-4);
	background: var(--tint-prime);
	color: var(--tint-base-plane);
	text-decoration: none;
}

.h02-key.koko-act {
	min-block-size: 46px;
	padding: 11px 22px;
}

/* kopbalk krimpt licht bij scrollen (as «shrink») */
.h02.is-packed .h02-band {
	height: 66px;
	min-height: 66px;
	transition: height var(--beat-normal) var(--ease-settle);
}

.h02.is-packed .h02-mark-pic {
	block-size: calc(var(--kb-logo-h) - 8px);
	transition: block-size var(--beat-normal) var(--ease-settle);
}

/* ==========================================================================
   Aanbiedingsknop — kleur en «stamp»-animatie uit scripts/cta-style.mjs
   ========================================================================== */
.koko-act {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #16a34a;
	color: #191d25;
	font-size: 15px;
	font-weight: var(--boldness-bold);
	text-decoration: none;
	transition: background var(--beat-normal) var(--ease-settle), box-shadow var(--beat-normal) var(--ease-settle);
	animation: koko-pulse 1.52s var(--ease-in-out) infinite;
}

.koko-act.koko-act {
	color: #191d25;
	text-decoration: none;
}

.koko-act:hover {
	background: #15803d;
	color: #ffffff;
	animation: none;
}

.koko-act.koko-act:hover {
	color: #ffffff;
	text-decoration: none;
}

.koko-act:active {
	background: #166534;
	color: #ffffff;
}

.koko-act:focus-visible {
	outline: 3px solid #191d25;
	outline-offset: 3px;
}

@keyframes koko-pulse {
	0% {
		transform: translate(0, 0);
	}
	15.789% {
		transform: translate(4px, 4px);
	}
	34.211%,
	100% {
		transform: translate(0, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.koko-act,
	.koko-act::after {
		animation: none !important;
		transition: none !important;
	}
}

/* --- nagekomen onderdelen ------------------------------------------------ */
.h02-cell-more {
	position: relative;
}

.l29-links-legal {
	margin-block-start: var(--rhythm-4);
}

.j91-articles-roll {
	display: block;
}

.h02-shelf-lead .h02-hop {
	color: var(--tint-prime);
	font-weight: 600;
}

/* --- kopbalk op smalle schermen ------------------------------------------ */
@media (max-width: 899px) {
	.h02-key-quiet {
		display: none;
	}

	.h02-deck {
		margin-inline-start: 0;
	}
}

@media (max-width: 620px) {
	.h02-band {
		flex-wrap: wrap;
		height: auto;
		min-height: 62px;
		row-gap: var(--rhythm-2);
		padding-block: var(--rhythm-2);
	}

	.h02-menu-lever {
		order: 2;
		margin-inline-start: auto;
	}

	.h02-deck {
		order: 4;
		flex-basis: 100%;
		margin-inline-start: 0;
	}

	.h02-key.koko-act {
		inline-size: 100%;
	}
}

@media (max-width: 400px) {
	:root {
		--kb-logo-h: 32px;
	}

	.h02-band {
		gap: var(--rhythm-2);
		padding-inline: 12px;
	}

	.h02-mark {
		padding: 4px 7px;
	}

	.h02-menu-lever {
		padding-inline: var(--rhythm-2);
		font-size: 12px;
	}
}

/* --- menu dichter op elkaar zodra de rij zichtbaar is -------------------- */
@media (min-width: 900px) {
	.h02-roll {
		gap: var(--rhythm-2);
	}

	.h02-cell + .h02-cell::before {
		margin-inline-end: var(--rhythm-2);
	}
}

@media (max-width: 1199px) {
	.h02-key-quiet {
		display: none;
	}
}

/* --- knop en menuknop naast elkaar rechts op tablet ---------------------- */
@media (max-width: 899px) {
	.h02-deck {
		margin-inline-start: auto;
	}

	.h02-menu-lever {
		margin-inline-start: var(--rhythm-3);
	}
}

@media (max-width: 620px) {
	.h02-menu-lever {
		margin-inline-start: auto;
	}

	.h02-deck {
		margin-inline-start: 0;
	}
}

/* --- 18+-regel korter op smalle schermen -------------------------------- */
.rg-lite {
	display: none;
}

@media (max-width: 620px) {
	.rg-more {
		display: none;
	}

	.rg-lite {
		display: inline;
	}
}

/* --- zijblok van de voettekst als mini-poster (FOOT-07) ------------------ */
@media (min-width: 860px) {
	.l29-flank {
		padding: var(--rhythm-6) var(--rhythm-4);
	}

	.l29-flank-word {
		writing-mode: vertical-rl;
		transform: rotate(180deg);
		white-space: nowrap;
		font-size: var(--scale-display-3);
		letter-spacing: var(--letter-open);
	}
}

/* --- brede illustraties vullen hun kader, vierkante niet ----------------- */
.c69-frame-wide .c69-pic {
	aspect-ratio: 3 / 2;
	height: auto;
	max-block-size: 420px;
	object-fit: cover;
}

.c69-frame-tall .c69-pic {
	object-fit: contain;
	max-block-size: 480px;
}

/* --- tabel leesbaar houden op telefoons ---------------------------------- */
@media (max-width: 640px) {
	.s26-grid {
		font-size: 12px;
	}

	.s26-grid thead th {
		letter-spacing: var(--letter-regular);
		text-transform: none;
	}

	.s26-scroll {
		overflow-x: auto;
	}

	.s26-grid {
		min-inline-size: 460px;
	}
}

@media (max-width: 503px) {
  .h02-links,
  .h02-roll,
  .h02-route { display: none !important; }
  .h02-more-lever { display: inline-flex !important; }
}