/*
Theme Name: Klarfelde
Theme URI: https://klarfelde.org/
Author: Klarfelde
Author URI: https://klarfelde.org/
Description: Klarfelde ist eine inoffizielle Diablo-IV-Fanseite mit verständlichen Guides, Lore, Saison-Einordnungen und ehrlichen Spieleindrücken.
Version: 1.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: klarfelde
Tags: blog, entertainment, one-column, custom-colors, translation-ready
*/

@import url('fonts/fonts.css');

/* Палітра приходить уже доведеною до WCAG AA (logic/uniq/color.py ДО рендеру).
   Accent і primary — і заливка кнопок, і 14px-посилання (футер на vlak,
   `a {}` на grond), тому їх доводять до 4.5:1 проти обох підкладок.
   accent_alt лишається заливкою / великими цифрами (3:1). */
:root {
	--kleur-grond: #fbfbfb;
	--kleur-vlak: #f2f1f0;
	--kleur-rand: #919191;
	--kleur-schrift: #24211f;
	--kleur-schrift-zacht: #645c54;
	--kleur-hoofd: #666666;
	--kleur-hoofd-op: #f9fafa;
	--kleur-nadruk: #a51d94;
	--kleur-nadruk-op: #faf9fa;
	--kleur-nadruk-tweede: #d35ac4;

	--schrift-titel: 'Alegreya', Georgia, 'Times New Roman', serif;
	--schrift-tekst: 'Barlow', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

	--maat-rand: 1px;
	--maat-ronding: 12px;
	--kaart-vlak: var(--kleur-vlak);
	--band-even: transparent;
	--maat-kolom: 1160px;
	--maat-lucht: clamp(2.5rem, 6vw, 5rem);
	--maat-raak: 44px;
	--maat-kop-hoogte: 76px;
}

/* Атрибут hidden слабший за будь-який клас, що задає display: правило
   браузера для [hidden] перебиває навіть один клас кнопки з display:
   inline-flex. Через це кнопка, помічена як схована, лишалась видимою.
   Лікується один раз на весь проєкт, і саме тут. */
[hidden] {
	display: none !important;
}

/* Липка шапка перехоплює анкерні переходи: без цього посилання-анкер приводить
   до блока, схованого під шапкою — і в тесті, і в живого користувача. */
html {
	scroll-padding-top: calc(var(--maat-kop-hoogte) + 1rem);
}

/* Поява блоків при скролі вішається ТІЛЬКИ під класом js, який дописує
   інлайновий скрипт у head. Інакше при вимкненому JavaScript сайт порожній. */
html.js [data-verschijn] {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 420ms ease, transform 420ms ease;
}

html.js [data-verschijn].is-in-zicht {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	html.js [data-verschijn] {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

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

body {
	margin: 0;
	padding-bottom: var(--koek-ruimte, 0px);
	scroll-padding-bottom: var(--koek-ruimte, 0px);
	background: var(--kleur-grond);
	color: var(--kleur-schrift);
	font-family: var(--schrift-tekst);
	font-size: 1.0625rem;
	line-height: 1.7;
	overflow-wrap: break-word;
	-webkit-text-size-adjust: 100%;
}

h1,
h2,
h3,
h4 {
	font-family: var(--schrift-titel);
	line-height: 1.18;
	margin: 0 0 0.6em;
	font-weight: 700;
}

h1 {
	font-size: clamp(2rem, 5vw, 3.1rem);
}

h2 {
	font-size: clamp(1.55rem, 3.4vw, 2.25rem);
}

h3 {
	font-size: clamp(1.2rem, 2.2vw, 1.5rem);
}

p {
	margin: 0 0 1.1em;
}

ul,
ol {
	margin: 0 0 1.2em;
	padding-left: 1.2em;
}

li {
	margin-bottom: 0.4em;
}

a {
	/* Accent доведений до 4.5:1 проти grond і vlak: це 14–16px текст, не заливка. */
	color: var(--kleur-nadruk);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

/* min-height на display:inline ігнорується — тому кожне видиме посилання
   стає inline-flex. Інакше рядок на кшталт cookie-«lees meer» лишається
   16px і брама tap_targets блокує ZIP на кожній сторінці зі смугою. */
a[href]:not(.fluistercode) {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	min-height: var(--maat-raak);
	max-width: 100%;
}

a:hover,
a:focus {
	color: var(--kleur-hoofd);
}

/* Фокус лишається видимим завжди: outline: none заради вигляду прибирає
   клавіатурну навігацію разом із ним. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--kleur-nadruk);
	outline-offset: 2px;
}

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

img {
	display: block;
}

figure {
	margin: 0;
}

table {
	width: 100%;
	max-width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

th,
td {
	padding: 0.7rem 0.8rem;
	border-bottom: var(--maat-rand) solid var(--kleur-rand);
	text-align: left;
	vertical-align: top;
	overflow-wrap: anywhere;
}

th {
	font-family: var(--schrift-titel);
	font-size: 0.95rem;
	letter-spacing: 0.02em;
}

code,
kbd {
	font-family: ui-monospace, Consolas, monospace;
	font-size: 0.95em;
	overflow-wrap: anywhere;
	word-break: break-word;
}

blockquote {
	margin: 0;
	padding: 1.2rem 1.4rem;
	border-left: 4px solid var(--kleur-nadruk);
	background: var(--kleur-vlak);
}

/* Тільки для скрінрідерів. Не display:none — інакше вміст зникає і для них. */
.fluistercode {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.fluistercode:focus {
	position: fixed;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 60;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0.75rem 1rem;
	clip: auto;
	clip-path: none;
	background: var(--kleur-hoofd);
	color: var(--kleur-hoofd-op);
}

.fort {
	width: 100%;
	max-width: var(--maat-kolom);
	margin: 0 auto;
	padding: 0 clamp(1rem, 4vw, 2rem);
}

.sector {
	padding: var(--maat-lucht) 0;
}

.sector:nth-of-type(even) {
	background: var(--band-even);
}

.sector__kop {
	max-width: 46rem;
	margin-bottom: 2rem;
}

/* Колір дрібного тексту в надзаголовку — з ролей text/text_muted.

   Accent і primary доведені реєстром до 4.5:1, бо CSS ставить їх на 14px
   посилання (футер, `a {}`). accent_alt лишається 3:1: заливка й великі цифри,
   не букви 14px. Надзаголовок навмисно не бере акцент. */
.sector__voorkop {
	display: block;
	margin-bottom: 0.5rem;
	font-family: var(--schrift-titel);
	font-size: 0.9rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--kleur-schrift-zacht);
}

.sector__lijf {
	display: grid;
	gap: clamp(1.2rem, 3vw, 2.2rem);
	align-items: start;
}

/* --- Ось 4, компоновка: позиція медіа ------------------------------------ */

.sector--media-left .sector__lijf,
.sector--media-right .sector__lijf {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.sector--media-left .lens {
	order: -1;
}

.sector--media-right .lens {
	order: 1;
}

.sector--media-full .sector__lijf {
	grid-template-columns: minmax(0, 1fr);
}

.sector--media-full .lens {
	margin-bottom: 1.4rem;
}

/* --- Ось 4, компоновка: надзаголовок ------------------------------------- */

.sector--eyebrow-after .sector__voorkop {
	margin-top: 0.6rem;
	margin-bottom: 0;
	order: 2;
}

.sector--eyebrow-after .sector__kop {
	display: flex;
	flex-direction: column;
}

/* --- Ось 4, компоновка: мета-дані ---------------------------------------- */

.sector__meta {
	margin: 0;
	font-size: 0.92rem;
	color: var(--kleur-schrift-zacht);
}

.sector--meta-above .sector__meta {
	order: -1;
	margin-bottom: 0.6rem;
}

.sector--meta-below .sector__meta {
	margin-top: 1rem;
}

.sector--meta-aside .sector__meta {
	padding-left: 1rem;
	border-left: 3px solid var(--kleur-rand);
}

/* --- Ось 4, компоновка: форма сітки карток ------------------------------- */

.sector__reeks {
	display: grid;
	gap: clamp(1rem, 2.4vw, 1.8rem);
	margin: 0;
	padding: 0;
	list-style: none;
	grid-template-columns: repeat(auto-fit, minmax(min(16.5rem, 100%), 1fr));
}

.sector--grid-row4 .sector__reeks {
	grid-template-columns: repeat(auto-fit, minmax(min(16.5rem, 100%), 1fr));
}

.sector--grid-pair2x2 .sector__reeks {
	grid-template-columns: repeat(2, minmax(min(16.5rem, 100%), 1fr));
}

.sector--grid-feature3plus1 .sector__reeks {
	grid-template-columns: repeat(auto-fit, minmax(min(16.5rem, 100%), 1fr));
}

.sector--grid-feature3plus1 .sector__reeks > li:first-child {
	grid-column: 1 / -1;
}

.sector--grid-stack .sector__reeks {
	grid-template-columns: minmax(0, 1fr);
}

/* Картки поруч із фото: ніколи не три колонки по 80px — інакше імена
   ламаються всередині слова (Mar co / Elena Ferr aro). */
.sector--media-left .sector__reeks,
.sector--media-right .sector__reeks {
	grid-template-columns: minmax(0, 1fr);
}

/* --- Ось 4, компоновка: подача даних ------------------------------------- */

.sector--data-shape-chips .sector__gegevens {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding: 0;
	list-style: none;
}

.sector--data-shape-chips .sector__gegevens > li {
	margin: 0;
	padding: 0.35rem 0.75rem;
	border: var(--maat-rand) solid var(--kleur-rand);
	border-radius: 999px;
	background: var(--kleur-grond);
	font-size: 0.92rem;
}

.sector--data-shape-list .sector__gegevens {
	padding-left: 1.1rem;
}

.sector--data-shape-table .sector__gegevens {
	display: table;
	width: 100%;
	padding: 0;
	list-style: none;
}

.sector--data-shape-table .sector__gegevens > li {
	display: table-row;
}

.sector--data-shape-table .sector__gegevens > li > span {
	display: table-cell;
	padding: 0.45rem 0.7rem 0.45rem 0;
	border-bottom: var(--maat-rand) solid var(--kleur-rand);
}

.spleet {
	height: 14px;
	margin: 0;
	border: 0;
	background-image: repeating-linear-gradient(
		90deg,
		var(--kleur-rand) 0,
		var(--kleur-rand) 10px,
		transparent 10px,
		transparent 22px
	);
	background-position: center;
	background-repeat: repeat-x;
	background-size: auto 2px;
}

html[data-scheid='chevron'] .spleet {
	height: 10px;
	background-image: repeating-linear-gradient(
		135deg,
		var(--kleur-rand) 0 6px,
		transparent 6px 12px
	);
	background-size: 16px 10px;
}

html[data-scheid='dots'] .spleet {
	height: 10px;
	background-image: radial-gradient(circle, var(--kleur-rand) 1.6px, transparent 1.8px);
	background-size: 14px 10px;
	background-repeat: repeat-x;
}

html[data-scheid='bar'] .spleet {
	height: 4px;
	background-image: none;
	background-color: var(--kleur-rand);
}

html[data-scheid='double'] .spleet {
	height: 10px;
	background-image: linear-gradient(
		var(--kleur-rand),
		var(--kleur-rand) 2px,
		transparent 2px,
		transparent 8px,
		var(--kleur-rand) 8px,
		var(--kleur-rand) 10px
	);
	background-size: 100% 10px;
}

/* --- Шапка й меню -------------------------------------------------------- */

.banier {
	position: sticky;
	top: 0;
	z-index: 40;
	min-height: var(--maat-kop-hoogte);
	background: var(--kleur-grond);
	border-bottom: var(--maat-rand) solid var(--kleur-rand);
}

.banier__lijn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: var(--maat-kop-hoogte);
}

.banier__merk {
	display: inline-flex;
	align-items: baseline;
	gap: 0.1em;
	font-family: var(--schrift-titel);
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--kleur-schrift);
	text-decoration: none;
	letter-spacing: -0.01em;
}

.banier__merk-staart {
	color: var(--kleur-nadruk);
}

.routelijst {
	display: flex;
	align-items: center;
	gap: clamp(0.6rem, 1.6vw, 1.4rem);
}

.routelijst ul {
	display: flex;
	align-items: center;
	gap: clamp(0.6rem, 1.6vw, 1.4rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.routelijst li {
	margin: 0;
}

.routelijst a {
	display: inline-flex;
	align-items: center;
	min-height: var(--maat-raak);
	padding: 0 0.2rem;
	color: var(--kleur-schrift);
	text-decoration: none;
	font-size: 1rem;
}

.routelijst a:hover,
.routelijst a:focus,
.routelijst .current-menu-item > a {
	color: var(--kleur-nadruk);
	text-decoration: underline;
}

.routelijst__schakelaar {
	display: none;
	align-items: center;
	justify-content: center;
	min-width: var(--maat-raak);
	min-height: var(--maat-raak);
	padding: 0 0.7rem;
	border: var(--maat-rand) solid var(--kleur-rand);
	border-radius: var(--maat-ronding);
	background: var(--kleur-vlak);
	color: var(--kleur-schrift);
	font-family: var(--schrift-titel);
	font-size: 0.95rem;
	cursor: pointer;
}

/* --- Кнопки ------------------------------------------------------------- */

.trekker {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: var(--maat-raak);
	padding: 0.7rem 1.3rem;
	border: 2px solid transparent;
	border-radius: var(--maat-ronding);
	background: var(--kleur-hoofd);
	color: var(--kleur-hoofd-op);
	font-family: var(--schrift-titel);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.trekker:hover,
.trekker:focus {
	background: var(--kleur-nadruk);
	color: var(--kleur-nadruk-op);
}

/* Підпис контурної кнопки — роллю text, а не primary.
 *
 * Раніше primary був лише 3:1 (великий текст) і на 15px давав ~4.4:1.
 * Тепер primary теж 4.5:1, але контурна кнопка лишає букви в ролі text:
 * рамка несе колір бренду, літери — гарантований відтінок. */
.trekker--los {
	background: transparent;
	border-color: var(--kleur-hoofd);
	color: var(--kleur-schrift);
}

.trekker--los:hover,
.trekker--los:focus {
	background: var(--kleur-hoofd);
	color: var(--kleur-hoofd-op);
}

.trekker--kort {
	padding: 0.5rem 0.9rem;
	font-size: 0.95rem;
}

/* --- Картка ------------------------------------------------------------- */

.diabloca {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	height: 100%;
	min-width: 0;
	padding: clamp(1.1rem, 2.2vw, 1.6rem);
	border: var(--maat-rand) solid var(--kleur-rand);
	border-radius: var(--maat-ronding);
	background: var(--kaart-vlak);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

html[data-kaart='inset'] .diabloca {
	box-shadow: inset 0 0 0 1px var(--kleur-rand);
}

.diabloca h3 {
	margin: 0;
	font-size: 1.08rem;
	line-height: 1.28;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.diabloca p {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.55;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.diabloca__cijfer {
	font-family: var(--schrift-titel);
	font-size: clamp(1.6rem, 3.4vw, 2.4rem);
	font-weight: 700;
	line-height: 1;
	color: var(--kleur-nadruk-tweede);
}

.diabloca__pijl {
	display: inline-flex;
	align-items: center;
	min-height: var(--maat-raak);
	font-family: var(--schrift-titel);
	font-size: 0.98rem;
}

/* Ось 4: стрілка зверху блока або притиснута до низу. margin-top:auto
   працює тільки у flex-контейнері — тому картка і є flex. */
.diabloca--arrow-bottom .diabloca__pijl {
	margin-top: auto;
}

.diabloca--arrow-top .diabloca__pijl {
	order: -1;
}

.diabloca--figure-footer .diabloca__cijfer {
	order: 5;
}

.diabloca--figure-before .diabloca__cijfer {
	order: -2;
}

.diabloca__lijst {
	margin: 0;
	padding-left: 1.1rem;
	font-size: 0.97rem;
}

.diabloba {
	display: inline-block;
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
	background: var(--kleur-nadruk-tweede);
	color: var(--kleur-grond);
	font-family: var(--schrift-titel);
	font-size: 0.8rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* --- Медіа -------------------------------------------------------------- */

.lens {
	margin: 0;
	overflow: hidden;
	border-radius: var(--maat-ronding);
	border: var(--maat-rand) solid var(--kleur-rand);
}

.lens img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

.lens__onderschrift {
	padding: 0.5rem 0.8rem;
	background: var(--kleur-vlak);
	font-size: 0.88rem;
	color: var(--kleur-schrift-zacht);
}

/* --- Форма -------------------------------------------------------------- */

.aanmonster {
	display: grid;
	gap: 1rem;
	max-width: 34rem;
	padding: clamp(1.1rem, 2.2vw, 1.6rem);
	border: var(--maat-rand) solid var(--kleur-rand);
	border-radius: var(--maat-ronding);
	background: var(--kleur-vlak);
}

.aanmonster__rij {
	display: grid;
	gap: 0.35rem;
}

.aanmonster label {
	font-family: var(--schrift-titel);
	font-size: 0.96rem;
}

.aanmonster input,
.aanmonster select,
.aanmonster textarea {
	min-height: var(--maat-raak);
	padding: 0.6rem 0.7rem;
	border: var(--maat-rand) solid var(--kleur-rand);
	border-radius: 8px;
	background: var(--kleur-grond);
	color: var(--kleur-schrift);
	font-family: inherit;
	font-size: 1rem;
}

.aanmonster textarea {
	min-height: 8rem;
	resize: vertical;
}

.aanmonster__akkoord {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	min-height: var(--maat-raak);
	padding-block: 0.35rem;
	font-size: 0.95rem;
}

.aanmonster__akkoord input {
	width: 1.25rem;
	height: 1.25rem;
	min-width: 1.25rem;
	min-height: 1.25rem;
	margin-top: 0.2rem;
	flex-shrink: 0;
}

.aanmonster__akkoord span {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: anywhere;
}

/* Приманка для ботів: поле схоже на справжнє, але сховане від людей.
 *
 * Одного виносу за екран замало. Елемент за межами вьюпорта усе одно має
 * непорожню геометрію, і Playwright вважає його видимим — тобто проба
 * червоніє на техніці, яка працює. Тому додається нульовий розмір: людина
 * поля не бачить, бот у розмітці його знаходить, а проба бачить нульовий
 * бокс і не сперечається. display:none не годиться: частина ботів свідомо
 * пропускає такі поля. */
.aanmonster__lokval {
	position: absolute;
	left: -9999px;
	width: 0;
	height: 0;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
}

.aanmonster__lokval input,
.aanmonster__lokval label {
	width: 0;
	height: 0;
	min-height: 0;
	padding: 0;
	border: 0;
}

.aanmonster__toelichting {
	margin: 0;
	font-size: 0.88rem;
	color: var(--kleur-schrift-zacht);
}

/* --- Відгуки, питання, журнал ------------------------------------------- */

.diabloca--ervaring blockquote {
	padding: 0;
	border: 0;
	background: none;
	font-size: 1.02rem;
}

.diabloca--ervaring footer {
	font-size: 0.9rem;
	color: var(--kleur-schrift-zacht);
}

.diabloca--vraag {
	padding: 0;
	overflow: hidden;
}

.diabloca--vraag summary {
	display: flex;
	align-items: center;
	min-height: var(--maat-raak);
	padding: 0.8rem 1.1rem;
	background: var(--kleur-vlak);
	font-family: var(--schrift-titel);
	font-size: 1.02rem;
	cursor: pointer;
}

.diabloca--vraag > div {
	padding: 0.2rem 1.1rem 1rem;
}

/* Зірки оцінки — це текст 15px, тому колір із ролі text, не з акцентної. */
.diabloca--sterren {
	color: var(--kleur-schrift);
	font-size: 0.95rem;
	letter-spacing: 0.15em;
}

/* --- Cookie-смуга ------------------------------------------------------- */

/* Full-width смуга внизу екрана, а не плавна карточка в кутку і не модальне
   вікно: так вимагає скіл, і так її видно, не перекриваючи вміст. */
.ankerput__koekbalk {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 50;
	max-height: 40vh;
	overflow: hidden;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.8rem 1.2rem;
	padding: 0.9rem clamp(1rem, 4vw, 2rem);
	border-top: 2px solid var(--kleur-nadruk);
	background: var(--kleur-vlak);
	box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.16);
}

.ankerput__koektekst {
	flex: 1 1 22rem;
	min-width: 0;
	max-height: 20vh;
	overflow: auto;
	margin: 0;
	font-size: 0.95rem;
}

.ankerput__koektekst a {
	display: inline-flex;
	align-items: center;
	min-height: var(--maat-raak);
	padding-inline: 0.15rem;
}

.ankerput__koekknoppen {
	display: flex;
	flex-wrap: wrap;
	flex: 0 0 auto;
	align-items: stretch;
	gap: 0.6rem;
}

/* --- Підвал ------------------------------------------------------------- */

.ankerput {
	margin-top: var(--maat-lucht);
	padding: var(--maat-lucht) 0 1.6rem;
	border-top: var(--maat-rand) solid var(--kleur-rand);
	background: var(--kleur-vlak);
}

.ankerput__raster {
	display: grid;
	grid-template-columns: 1.4fr repeat(3, 1fr);
	gap: clamp(1.2rem, 3vw, 2.4rem);
}

.ankerput__rubriek h2 {
	margin-bottom: 0.7rem;
	font-size: 1.05rem;
}

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

.ankerput__rubriek li {
	margin-bottom: 0.15rem;
}

.ankerput__rubriek a {
	display: inline-flex;
	align-items: center;
	min-height: var(--maat-raak);
	font-size: 0.97rem;
}

.ankerput__slot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.8rem;
	margin-top: 2rem;
	padding-top: 1.2rem;
	border-top: var(--maat-rand) solid var(--kleur-rand);
	font-size: 0.9rem;
	color: var(--kleur-schrift-zacht);
}

.ankerput__boven {
	display: inline-flex;
	align-items: center;
	min-height: var(--maat-raak);
}

/* --- Спільна оболонка віджетів -----------------------------------------
 *
 * Тут лежить те, що не залежить від родини: оболонка, органи керування,
 * таблиця результатів і дві візуалізації, які вживають усі чотири родини
 * (смуги й теплова сітка). Специфічне для родини — у widgets/<family>/.
 *
 * Тримати спільне в CSS однієї родини було б помилкою: рендерер підклеює
 * стилі лише задіяних родин, і сайт без цієї родини лишився б без оболонки.
 */

.diabloca--hulpmiddel {
	gap: 1rem;
	border-width: 2px;
	background: var(--kleur-grond);
}

.diabloca__besturing {
	display: grid;
	gap: 0.9rem;
}

.diabloca__regelaar {
	display: grid;
	gap: 0.35rem;
}

/* Слайдер сам по собі нижчий за палець: висота задається явно, інакше проба
   розміру раковини на 390px червоніє. */
.diabloca__regelaar input[type='range'] {
	width: 100%;
	min-height: var(--maat-raak);
	accent-color: var(--kleur-nadruk);
}

.diabloca__regelaar input[type='number'] {
	width: 6rem;
	min-height: var(--maat-raak);
	padding: 0.4rem 0.5rem;
	border: var(--maat-rand) solid var(--kleur-rand);
	border-radius: 8px;
	background: var(--kleur-grond);
	color: var(--kleur-schrift);
	font: inherit;
	text-align: center;
}

.diabloca__regelaar select {
	min-height: var(--maat-raak);
	padding: 0.4rem 0.5rem;
	border: var(--maat-rand) solid var(--kleur-rand);
	border-radius: 8px;
	background: var(--kleur-grond);
	color: var(--kleur-schrift);
	font: inherit;
}

.diabloca__stapper {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.diabloca__keuzereeks {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.diabloca__keuzematrix {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
	gap: 0.5rem;
}

.diabloca__keuzereeks [aria-pressed='true'],
.diabloca__keuzematrix [aria-pressed='true'] {
	background: var(--kleur-nadruk);
	border-color: var(--kleur-nadruk);
	color: var(--kleur-nadruk-op);
}

.diabloca__waarde {
	font-family: var(--schrift-titel);
	font-weight: 700;
}

.diabloca__hint {
	font-size: 0.86rem;
	color: var(--kleur-schrift-zacht);
}

.diabloca__uitslag caption {
	margin-bottom: 0.5rem;
	font-family: var(--schrift-titel);
	font-size: 1rem;
	text-align: left;
}

/* Жодного transition на елементах, за якими перевіряється контраст: знімок
   інакше ловить проміжний кадр, і проба флейкить. */
.diabloca__viz,
.diabloca__uitslag,
.diabloca__samenvatting {
	transition: none;
	animation: none;
}

.diabloca__viz {
	min-height: 8rem;
	min-width: 0;
	max-width: 100%;
}

.diabloca__viz svg {
	width: 100%;
	max-width: 24rem;
	height: auto;
}

/* --- Смуги (вживають усі родини) --------------------------------------- */

.diabloca__balkrij {
	display: grid;
	grid-template-columns: minmax(0, 10rem) minmax(0, 1fr) auto;
	gap: 0.6rem;
	align-items: center;
	margin-bottom: 0.5rem;
	font-size: 0.95rem;
}

.diabloca__balkspoor {
	display: block;
	height: 14px;
	overflow: hidden;
	border: var(--maat-rand) solid var(--kleur-rand);
	border-radius: 999px;
	background: var(--kleur-vlak);
}

/* span із заданою висотою нічого не малює без display:block — висота й фон
   просто не застосовуються, і смуга виглядає як список чисел. */
.diabloca__balkvulling {
	display: block;
	height: 100%;
	background: var(--kleur-nadruk);
}

.diabloca__balkcijfer {
	font-family: var(--schrift-titel);
	font-weight: 700;
}

/* --- Теплова сітка (matrix і map) --------------------------------------- */

.diabloca__hitte {
	display: grid;
	gap: 3px;
}

.diabloca__hittecel {
	display: block;
	padding: 0.55rem 0.4rem;
	border-radius: 6px;
	background: var(--kleur-nadruk);
	color: var(--kleur-nadruk-op);
	font-family: var(--schrift-titel);
	font-size: 0.9rem;
	text-align: center;
}

@media (max-width: 640px) {
	.diabloca__balkrij {
		grid-template-columns: 1fr auto;
	}

	.diabloca__balkspoor {
		grid-column: 1 / -1;
	}
}

/* --- Титульний блок сторінки -------------------------------------------- */

.sector--titel {
	padding-bottom: 0;
}

.sector--titel p {
	max-width: 46rem;
	font-size: 1.12rem;
	color: var(--kleur-schrift-zacht);
}

/* --- Юридичні сторінки --------------------------------------------------- */

.sector__akte {
	max-width: 48rem;
}

.sector__akte h2 {
	margin-top: 2.2rem;
	padding-top: 1.2rem;
	border-top: var(--maat-rand) solid var(--kleur-rand);
	font-size: 1.35rem;
}

.sector__akte h2:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.sector__datum {
	margin: 0 0 1.6rem;
	font-size: 0.9rem;
	color: var(--kleur-schrift-zacht);
}

/* Таблиця з опису cookie на телефоні перевертається у стопку. Обгортка з
   overflow-x працює не завжди: усередині блока з overflow:hidden і
   трансформацією Blink усе одно розтягує сторінку. */
.sector__koektabel caption {
	margin-bottom: 0.6rem;
	font-family: var(--schrift-titel);
	font-size: 1.05rem;
	text-align: left;
}

/* --- Контакти ------------------------------------------------------------ */

.sector--contact .sector__lijf {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.diabloca--gegevens dl {
	display: grid;
	grid-template-columns: minmax(0, auto) minmax(0, 1fr);
	gap: 0.4rem 1rem;
	margin: 0;
}

.diabloca--gegevens dt {
	font-family: var(--schrift-titel);
	font-size: 0.95rem;
	color: var(--kleur-schrift-zacht);
}

.diabloca--gegevens dd {
	margin: 0;
	min-width: 0;
	overflow-wrap: anywhere;
}

.diabloca--gegevens a {
	display: inline-flex;
	align-items: center;
	min-height: var(--maat-raak);
}

/* --- Журнал і окремий запис --------------------------------------------- */

.diabloca--stuk h3 {
	font-size: 1.22rem;
}

/* Заголовок-посилання в списку журналу — типовий порушник розміру під палець:
   висота йде від line-height і виходить близько 28px. */
.diabloca--stuk h2 a,
.diabloca--stuk h3 a,
.sector__navigatie a {
	display: inline-flex;
	align-items: center;
	min-height: var(--maat-raak);
}

/* Специфічність: селектор «клас плюс тег» це (0,1,1) і перебиває селектор
   «клас елемента» (0,1,0). Класичний симптом — мета-рядок картки, який
   отримує розмір абзацу. Лікується :not(), а не переносом правил нижче. */
.diabloca--stuk p:not(.diabloca__meta) {
	margin: 0;
}

.diabloca__meta {
	margin: 0;
	font-size: 0.88rem;
	color: var(--kleur-schrift-zacht);
}

.sector__blad {
	max-width: 44rem;
	font-size: 1.06rem;
}

.sector__navigatie {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.8rem;
	margin-top: 2rem;
}

/* --- Хронологія (мілестони) --------------------------------------------- */

.sector__tijdlijn {
	margin: 0;
	padding: 0;
	list-style: none;
	border-left: 3px solid var(--kleur-rand);
}

.sector__tijdlijn > li {
	position: relative;
	margin: 0 0 1.3rem;
	padding-left: 1.4rem;
}

.sector__tijdlijn > li::before {
	content: '';
	position: absolute;
	top: 0.55rem;
	left: -8px;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: var(--kleur-nadruk);
}

/* Рік у хронології — 17px, тобто дрібний текст: колір із ролі text. */
.sector__jaar {
	display: block;
	font-family: var(--schrift-titel);
	font-weight: 700;
	color: var(--kleur-schrift);
}

/* --- Тарифи ------------------------------------------------------------- */

.diabloca--tarief {
	border-width: 2px;
}

.diabloca--tarief .diabloca__cijfer {
	color: var(--kleur-hoofd);
}

.diabloca__periode {
	font-family: var(--schrift-tekst);
	font-size: 0.92rem;
	color: var(--kleur-schrift-zacht);
}

/* --- 404 ---------------------------------------------------------------- */

/* Велика цифра 404: селектор «клас секції плюс тег p» має специфічність
   (0,1,1) і перебив би розмір цифри, намалювавши її як звичайний текст.
   Тому цифра описана власним класом елемента, а не тегом. */
.sector--fout .sector__code {
	display: block;
	margin: 0 0 0.4rem;
	font-family: var(--schrift-titel);
	font-size: clamp(4rem, 16vw, 9rem);
	font-weight: 700;
	line-height: 0.9;
	color: var(--kleur-nadruk-tweede);
}

.sector--fout .sector__acties {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem;
	margin-top: 1.4rem;
}

@media (max-width: 1080px) {
	.sector--grid-row4 .sector__reeks,
	.sector--grid-feature3plus1 .sector__reeks {
		grid-template-columns: repeat(2, minmax(min(16.5rem, 100%), 1fr));
	}

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

@media (max-width: 900px) {
	.routelijst__schakelaar {
		display: inline-flex;
	}

	/* Меню на телефоні — панель під шапкою. Кнопка керує атрибутом hidden,
	   а не класом: перевірка бачить is_visible(), а не наявність атрибута. */
	.routelijst__paneel {
		position: absolute;
		top: var(--maat-kop-hoogte);
		right: 0;
		left: 0;
		padding: 0.6rem clamp(1rem, 4vw, 2rem) 1.2rem;
		border-bottom: var(--maat-rand) solid var(--kleur-rand);
		background: var(--kleur-grond);
		box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
	}

	.routelijst__paneel ul {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.routelijst__paneel a {
		width: 100%;
		padding: 0.3rem 0;
		border-bottom: var(--maat-rand) solid var(--kleur-rand);
	}

	.sector--media-left .sector__lijf,
	.sector--media-right .sector__lijf,
	.sector--contact .sector__lijf {
		grid-template-columns: minmax(0, 1fr);
	}

	.sector--media-left .lens,
	.sector--media-right .lens {
		order: 0;
	}
}

@media (max-width: 640px) {
	.sector__reeks,
	.sector--grid-row4 .sector__reeks,
	.sector--grid-pair2x2 .sector__reeks,
	.sector--grid-feature3plus1 .sector__reeks {
		grid-template-columns: minmax(0, 1fr);
	}

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

	/* Якщо таблиця лишається display:table, мін-ширина колонок (ім'я cookie
	   в <code>) розпирає 390px навіть після tr { display:block }. Тому сама
	   таблиця стає блоком, комірки — сіткою з minmax(0, …). */
	.sector__koektabel,
	.sector__stapel,
	.diabloca__uitslag,
	.diabloca__matrix {
		display: block;
		width: 100%;
		max-width: 100%;
	}

	.sector__koektabel thead,
	.sector__stapel thead {
		display: none;
	}

	.sector__koektabel tbody,
	.sector__stapel tbody,
	.diabloca__uitslag tbody,
	.diabloca__matrix tbody {
		display: block;
		width: 100%;
		max-width: 100%;
	}

	.sector__koektabel tr,
	.sector__stapel tr {
		display: block;
		width: 100%;
		max-width: 100%;
		margin-bottom: 1rem;
		border: var(--maat-rand) solid var(--kleur-rand);
		border-radius: var(--maat-ronding);
		background: var(--kleur-grond);
	}

	.diabloca__uitslag tr,
	.diabloca__matrix tr {
		display: block;
		width: 100%;
		max-width: 100%;
	}

	.sector__koektabel td,
	.sector__stapel td {
		display: grid;
		grid-template-columns: minmax(0, 8rem) minmax(0, 1fr);
		gap: 0.6rem;
		min-width: 0;
		max-width: 100%;
		overflow-wrap: anywhere;
		border-bottom: 0;
	}

	.sector__koektabel td::before,
	.sector__stapel td::before {
		content: attr(data-kop);
		font-family: var(--schrift-titel);
		font-size: 0.88rem;
		color: var(--kleur-schrift-zacht);
	}

	.ankerput__koekbalk {
		flex-direction: column;
		align-items: stretch;
		gap: 0.6rem;
		padding: 0.8rem 1rem;
		overflow: hidden;
	}

	.ankerput__koektekst {
		flex: 1 1 auto;
		flex-basis: auto;
		min-height: 0;
		max-height: calc(40vh - 6rem);
		overflow: auto;
		font-size: 0.9rem;
	}

	.ankerput__koekknoppen {
		width: 100%;
		flex: 0 0 auto;
	}

	.ankerput__koekknoppen .trekker {
		flex: 1 1 auto;
	}

	.ankerput__koekknoppen a.trekker {
		flex: 1 1 100%;
	}

	.sector--data-shape-table .sector__gegevens,
	.sector--data-shape-table .sector__gegevens > li,
	.sector--data-shape-table .sector__gegevens > li > span {
		display: block;
	}
}

html.js [data-verschijn],
html.js [data-verschijn].is-in-zicht {
	opacity: 1;
	transform: none;
}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="number"],
input[type="password"],
input:not([type]),
select,
textarea {
	min-height: 36px;
	padding: 0.55rem 0.7rem;
	font-size: 1rem;
	line-height: 1.25;
	box-sizing: border-box;
}
textarea {
	min-height: 8rem;
}
.fort {
	width: 100%;
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 2rem);
}
.aanmonster input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]),
.aanmonster select,
.aanmonster textarea {
	display: block;
	width: 100%;
	max-width: 100%;
	min-height: 36px;
	padding: 0.6rem 0.7rem;
	font-size: 1rem;
	line-height: 1.3;
	box-sizing: border-box;
}
.sector__reeks {
	display: grid;
	gap: clamp(1rem, 2.4vw, 1.8rem);
	margin: 0;
	padding: 0;
	list-style: none;
}
.sector__acties {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1rem;
	align-items: center;
	margin: 1.1rem 0 0;
}
.sector--media-left .sector__lijf,
.sector--media-right .sector__lijf {
	grid-template-columns: minmax(0, 1fr);
}
.sector--media-left .sector__lijf:has(.lens),
.sector--media-right .sector__lijf:has(.lens) {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.sector:first-of-type .lens img {
	width: 100%;
	min-height: min(22rem, 56vh);
	object-fit: cover;
	aspect-ratio: 16 / 10;
}
.banier__merk {
	color: var(--kleur-schrift);
	text-decoration: none;
}
.routelijst a {
	color: var(--kleur-schrift);
	text-decoration: none;
}
.diabloca__pijl {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 36px;
	padding: 0.55rem 1.1rem;
	border-radius: var(--maat-ronding);
	background: var(--kleur-hoofd);
	color: var(--kleur-hoofd-op);
	text-decoration: none;
	font-weight: 700;
	cursor: pointer;
}
.sector__meta {
	cursor: default;
}
.routelijst__schakelaar {
	display: none;
}
a[href]:not([href="#"]):not([href=""]),
button,
[data-mechanic-act] {
	pointer-events: auto;
	cursor: pointer;
}
.fort-hoofd {
	display: block;
}
[data-flow="fold_edge"] .sector {
	border-block-end: var(--maat-rand) solid var(--kleur-rand);
}
@media (min-width: 901px) {
	.routelijst__paneel[hidden] {
		display: block !important;
		position: static;
		padding: 0;
		border: 0;
		box-shadow: none;
		background: transparent;
	}
}
@media (max-width: 900px) {
	.routelijst__schakelaar {
		display: inline-flex;
	}
	.routelijst__paneel {
		position: absolute;
		top: var(--maat-kop-hoogte);
		right: 0;
		left: 0;
		z-index: 45;
		padding: 0.6rem clamp(1rem, 4vw, 2rem) 1.2rem;
		border-bottom: var(--maat-rand) solid var(--kleur-rand);
		background: var(--kleur-grond);
	}
	.routelijst__paneel ul {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}
	.routelijst__paneel a {
		width: 100%;
		min-height: 36px;
	}
	.ankerput__raster--rail,
	.ankerput__navstapel {
		grid-template-columns: minmax(0, 1fr);
	}
}

.sector__werktuig {
	min-width: 0;
	max-width: 100%;
	padding: clamp(1.1rem, 2.2vw, 1.8rem);
	border: var(--maat-rand) solid var(--kleur-rand);
	border-radius: var(--maat-ronding);
	background: var(--kleur-vlak);
}
.sector__werktuig input[type="range"] {
	display: block;
	width: 100%;
	min-height: 36px;
	margin: 0.4rem 0 0;
	accent-color: var(--kleur-nadruk);
}
.sector__werktuig table {
	width: 100%;
	border-collapse: collapse;
}
.sector__werktuig th,
.sector__werktuig td {
	padding: 0.65rem 0.8rem;
	border-bottom: var(--maat-rand) solid var(--kleur-rand);
	text-align: start;
}
.sector__werktuig details summary {
	min-height: 36px;
	display: flex;
	align-items: center;
	cursor: pointer;
}
.sector__werktuig--cassette_flip .cassette_flip__deck {
	border-block-end: var(--maat-rand) solid var(--kleur-rand);
	padding-bottom: var(--maat-rand);
}
.sector__werktuig--track_grid .track_grid__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--maat-rand);
	list-style: none;
	padding: 0;
	margin: 0;
}
.sector__werktuig--salvo_sectors .salvo_sectors__ring {
	display: flex;
	flex-direction: column;
	gap: var(--maat-rand);
	margin: 0;
	padding: 0;
	list-style: none;
}
.sector__werktuig--salvo_sectors .salvo_sectors__ring li {
	display: flex;
	align-items: center;
	gap: var(--maat-rand);
	min-height: 36px;
	border-inline-start: 0.45rem solid var(--kleur-nadruk);
	padding-inline-start: 0.6rem;
}
.sector__werktuig--bpm_fader .bpm_fader__bar {
	display: block;
	height: 0.75rem;
	background: var(--kleur-rand);
	margin: 0;
}
.sector__werktuig--bpm_fader .bpm_fader__bar span {
	display: block;
	height: 100%;
	width: calc((var(--mechanic-state, 0) + 1) * 22%);
	background: var(--kleur-hoofd);
}
.sector__werktuig--night_ticks .night_ticks__ticks {
	display: flex;
	gap: 0.4rem;
	list-style: none;
	padding: 0;
	margin: 0;
}
.sector__werktuig--night_ticks .night_ticks__ticks li {
	flex: 1;
	min-width: 0;
	border-block-end: 0.35rem solid var(--kleur-rand);
	text-align: center;
}
.sector__werktuig--night_ticks[data-mechanic-state="1"] .night_ticks__ticks li:nth-child(1),
.sector__werktuig--night_ticks[data-mechanic-state="2"] .night_ticks__ticks li:nth-child(2),
.sector__werktuig--night_ticks[data-mechanic-state="3"] .night_ticks__ticks li:nth-child(3) {
	border-block-end-color: var(--kleur-nadruk);
}
.sector__werktuig--lane_compare .lane_compare__lanes {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--maat-lucht);
}
.sector__werktuig--orbit_picks .orbit_picks__orbit {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	list-style: none;
	padding: 0;
	margin: 0;
}
.sector__werktuig--stack_draw .stack_draw__stack article {
	margin: 0 0 0.4rem;
	padding: 0.6rem;
	border: var(--maat-rand) solid var(--kleur-rand);
	background: var(--kleur-vlak);
}
.sector__werktuig--stack_draw[data-mechanic-state="1"] .stack_draw__stack article:first-child {
	margin-inline-start: 0.8rem;
}
.sector__werktuig--pulse_meter .pulse_meter__meter {
	display: block;
	height: 0.7rem;
	background: var(--kleur-rand);
}
.sector__werktuig--pulse_meter .pulse_meter__meter span {
	display: block;
	height: 100%;
	width: calc((var(--mechanic-state, 0) + 1) * 22%);
	background: var(--kleur-nadruk);
}
.sector__werktuig--route_beads .route_beads__beads {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	list-style: none;
	padding: 0;
	margin: 0;
}
.sector__werktuig--route_beads .route_beads__beads li {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 36px;
}
.sector__werktuig--chamber_dial .chamber_dial__dial {
	width: 6.5rem;
	height: 6.5rem;
	margin: 0;
	border: 0.35rem solid var(--kleur-hoofd);
	border-radius: 50%;
	display: grid;
	place-items: center;
}
.sector__werktuig--chamber_dial .chamber_dial__dial span {
	display: block;
	width: 0.35rem;
	height: 2.2rem;
	background: var(--kleur-nadruk);
	transform: rotate(calc(var(--mechanic-state, 0) * 45deg));
	transform-origin: bottom center;
}
.sector__werktuig--tide_table .tide_table__tide {
	width: 100%;
	border-collapse: collapse;
}
.sector__werktuig--folio_tabs .folio_tabs__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--maat-rand);
}
.sector__werktuig--knot_map .knot_map__knots {
	padding-inline-start: 1.2rem;
}
.sector__werktuig--reel_strip .reel_strip__reel {
	display: flex;
	gap: var(--maat-lucht);
	overflow: hidden;
	margin: 0;
	padding-block: 0.6rem;
	border-block: var(--maat-rand) dashed var(--kleur-rand);
}
.sector__werktuig--guide_abacus .guide_abacus__abacus {
	display: flex;
	gap: 0.75rem;
	align-items: flex-end;
	height: 5rem;
}
.sector__werktuig--guide_abacus .guide_abacus__abacus span {
	display: block;
	width: 0.7rem;
	background: var(--kleur-hoofd);
	height: 40%;
}
.sector__werktuig--guide_abacus[data-mechanic-state="1"] .guide_abacus__abacus span:nth-child(1),
.sector__werktuig--guide_abacus[data-mechanic-state="2"] .guide_abacus__abacus span:nth-child(2),
.sector__werktuig--guide_abacus[data-mechanic-state="3"] .guide_abacus__abacus span:nth-child(3) {
	height: 90%;
	background: var(--kleur-nadruk);
}
.sector__werktuig--shutter_wipe .shutter_wipe__stage {
	position: relative;
	min-height: 14rem;
	overflow: hidden;
	border-radius: calc(var(--maat-ronding) - 2px);
	background: var(--kleur-grond);
}
.sector__werktuig--shutter_wipe .shutter_wipe__pane {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.2rem 1.4rem 3.2rem;
	font-family: var(--font-display, inherit);
	font-size: clamp(1.5rem, 3.2vw, 2.4rem);
	line-height: 1.1;
	letter-spacing: 0.02em;
}
.sector__werktuig--shutter_wipe .shutter_wipe__pane--after {
	background: color-mix(in srgb, var(--kleur-nadruk) 28%, var(--kleur-vlak));
	color: var(--kleur-schrift);
}
.sector__werktuig--shutter_wipe .shutter_wipe__pane--before {
	background: var(--kleur-grond);
	color: var(--kleur-schrift);
	clip-path: inset(0 calc(100% - (var(--mechanic-state, 58) * 1%)) 0 0);
}
.sector__werktuig--shutter_wipe .shutter_wipe__rail {
	position: absolute;
	left: 1rem;
	right: 1rem;
	bottom: 0.7rem;
	z-index: 2;
	margin: 0;
	font-size: 0.85rem;
}
.sector__werktuig--pin_board .pin_board__pins {
	display: flex;
	flex-wrap: wrap;
	gap: var(--maat-rand);
	list-style: none;
	margin: 0;
	padding: 0;
}
.sector__werktuig--step_ladder .step_ladder__ladder {
	border-inline-start: var(--maat-rand) solid var(--kleur-rand);
	padding-inline-start: 1rem;
}
.sector__werktuig--vault_lock .vault_lock__vault code {
	display: inline-flex;
	min-height: 36px;
	align-items: center;
	letter-spacing: 0.4em;
}
.sector__werktuig--wind_rose .wind_rose__rose {
	display: grid;
	grid-template-columns: repeat(3, minmax(2rem, 1fr));
	place-items: center;
	width: min(12rem, 100%);
	aspect-ratio: 1;
	border: var(--maat-rand) solid var(--kleur-rand);
	border-radius: 50%;
}
.sector__werktuig--scrap_deck .scrap_deck__scrap blockquote {
	margin: 0;
	padding: var(--maat-rand);
	border: var(--maat-rand) dashed var(--kleur-rand);
}
.sector__werktuig--echo_well .echo_well__echo p {
	margin: 0 0 0.4rem;
	opacity: 0.55;
}
.sector__werktuig--prism_split .prism_split__prism {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.sector__werktuig--tally_sticks .tally_sticks__tally {
	display: flex;
	gap: 0.35rem;
	align-items: flex-end;
	height: 3.5rem;
}
.sector__werktuig--tally_sticks .tally_sticks__tally span {
	display: block;
	width: 0.35rem;
	height: 40%;
	background: var(--kleur-hoofd);
}
.sector__werktuig--hour_glass .hour_glass__glass {
	width: 3rem;
	height: 5rem;
	margin: 0 auto;
	border: var(--maat-rand) solid var(--kleur-rand);
	clip-path: polygon(0 0, 100% 0, 55% 50%, 100% 100%, 0 100%, 45% 50%);
}
.sector__werktuig--hour_glass .hour_glass__glass [data-sand] {
	display: block;
	height: calc(20% + var(--mechanic-state, 0) * 20%);
	background: var(--kleur-nadruk);
}
.sector__werktuig [hidden] { display: none !important; }
.sector__werktuig [data-fader] span,
.sector__werktuig [data-meter] span,
.sector__werktuig [data-sand],
.sector__werktuig [data-viz],
.sector__werktuig [data-tide],
.sector__werktuig--night_ticks span,
.sector__werktuig--tally_sticks span,
.sector__werktuig--guide_abacus span {
	display: block;
}
.sector__werktuig .is-actief {
	outline: 2px solid var(--kleur-nadruk);
	outline-offset: 2px;
	background: color-mix(in srgb, var(--kleur-nadruk) 22%, var(--kleur-vlak));
}
.sector__werktuig [data-mechanic-act] {
	cursor: pointer;
}
.sector__werktuig--hour_glass .hour_glass__glass [data-sand] {
	width: 100%;
	transition: height 0.2s ease;
}
.sector__werktuig--tally_sticks .tally_sticks__tally span {
	transition: height 0.2s ease;
}

html, body {
	max-width: 100%;
	overflow-x: hidden;
}
html[data-chrome="row-split"] {
	--maat-kolom: 78rem;
}
.fort {
	display: block;
	min-width: 0;
	max-width: min(100%, var(--maat-kolom));
	margin-inline: auto;
}
.sector, .sector__lijf, .sector__reeks, .sector__kop, .sector__copy, .lens {
	min-width: 0;
	max-width: 100%;
}
.sector__lijf {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(1.2rem, 3vw, 2.2rem);
}
.sector--media-left .sector__lijf:has(.lens),
.sector--media-right .sector__lijf:has(.lens),
.sector--contact .sector__lijf {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.sector__reeks {
	display: grid;
	gap: clamp(1rem, 2.4vw, 1.8rem);
	margin: 0;
	padding: 0;
	list-style: none;
}
.sector--grid-pair2x2 .sector__reeks {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sector--grid-row4 .sector__reeks {
	grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
}
.sector--grid-feature3plus1 .sector__reeks {
	grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
}
.sector--grid-stack .sector__reeks {
	grid-template-columns: minmax(0, 1fr);
}
.banier__vaandel {
	padding: 0.85rem 0;
	background: var(--kleur-vlak);
	border-bottom: var(--maat-rand) solid var(--kleur-rand);
}
.banier__strook {
	padding: 0.55rem 0;
	background: var(--kleur-vlak);
	border-bottom: var(--maat-rand) solid var(--kleur-rand);
}
.banier__strook .trekker {
	min-height: 36px;
}
.banier__navrij {
	padding-bottom: 0.7rem;
}
.banier[data-chrome="stack-brand"] .banier__merk {
	font-size: 1.7rem;
}
.banier[data-chrome="row-split"] .banier__lijn--split {
	justify-content: space-between;
}
.sector--form-start .sector__lijf > :first-child {
	order: 0;
}
.sector--form-end .sector__lijf > :last-child {
	order: 0;
}
.ankerput__raster--stack { display: flex; flex-direction: column; gap: var(--maat-lucht); }
.ankerput__raster--rail { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--maat-lucht); }
.ankerput__raster--invert { display: flex; flex-direction: column-reverse; gap: var(--maat-lucht); }
.ankerput__stapel,
.ankerput__omgekeerd {
	display: flex;
	flex-direction: column;
	gap: var(--maat-lucht);
}
.ankerput__navstapel {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: var(--maat-lucht);
}
.ankerput__adres {
	font-style: normal;
}
.aanmonster {
	position: relative;
	max-width: 100%;
}
.aanmonster input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]),
.aanmonster select,
.aanmonster textarea {
	display: block;
	width: 100%;
	max-width: 100%;
	min-height: 36px;
	padding: 0.6rem 0.7rem;
	font-size: 1rem;
	line-height: 1.3;
	box-sizing: border-box;
}
.aanmonster textarea {
	min-height: 8rem;
}
.aanmonster input[type="checkbox"],
.aanmonster input[type="radio"] {
	min-width: 36px;
	min-height: 36px;
}
.aanmonster label:has(input[type="checkbox"]),
.aanmonster label:has(input[type="radio"]) {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	min-height: 36px;
}
.aanmonster__lokval,
.aanmonster__lokval input,
.aanmonster__lokval label {
	position: absolute;
	width: 0;
	height: 0;
	min-height: 0;
	overflow: hidden;
	opacity: 0;
}
.trekker,
[data-mechanic-act] {
	min-height: 36px;
	min-width: 36px;
}
.sector--data-shape-table .sector__scroll {
	max-width: 100%;
	overflow-x: auto;
}
@media (max-width: 700px) {
	.sector--media-left .sector__lijf,
	.sector--media-right .sector__lijf,
	.sector--contact .sector__lijf,
	.sector--grid-pair2x2 .sector__reeks,
	.sector--grid-row4 .sector__reeks,
	.sector--grid-feature3plus1 .sector__reeks {
		grid-template-columns: minmax(0, 1fr);
	}
}