/*
Theme Name: Speelkompas
Theme URI: https://speelkompas.org/
Author: Fanpagina Speelkompas
Author URI: https://speelkompas.org/
Description: Onofficiele Nederlandstalige fanpagina over Baldu
’ Gate 3, gemaakt door een klein team uit Arnhem. Het thema draait om de prijs van een keuze: vier eigen werktuigen, spoilers achter een doekje, en overal beide kanten van een beslissing even breed. Deze site is niet verbonden aan de uitgever of de ontwikkelaar van dat spel.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: speelkompas
Tags: fanpagina, spel, licht, nederlands
*/

/* =========================================================================
   1. Lettertypen — in het thema zelf, niet van een vreemde server
   ========================================================================= */

@font-face {
	font-family: 'Grenze';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('fonts/grenze-600-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Grenze';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('fonts/grenze-600-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Mulish';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/mulish-400-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Mulish';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/mulish-400-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Mulish';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('fonts/mulish-600-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Mulish';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('fonts/mulish-600-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* =========================================================================
   2. Kleuren en maten
   -------------------------------------------------------------------------
   Dit is de enige lichte site van de reeks. De verhoudingen zijn vooraf
   uitgerekend, in beide richtingen en ook op het paneel:

     inkt op kalksteen      14.17:1   inkt op blad        12.67:1
     schaduw op kalksteen    6.52:1   schaduw op blad      5.83:1
     vioolinkt op kalksteen  7.83:1   vioolinkt op blad    7.00:1
     lakzegel op kalksteen   5.96:1   lakzegel op blad     5.33:1
     kalksteen op vioolinkt  7.83:1   blad op vioolinkt    7.00:1
     kalksteen op lakzegel   5.96:1   blad op lakzegel     5.33:1

   randlijn haalt 3.53:1 en draagt daarom alleen randen en focus, nooit tekst.
   haarlijn haalt 1.42:1 en komt uitsluitend voor in border en background.
   ========================================================================= */

:root {
	--kalksteen: #eceae4;
	--blad: #e1ded5;
	--diepblad: #e6e3db;
	--haarlijn: #cbc6ba;
	--randlijn: #807b68;
	--inkt: #1d1b22;
	--schaduw: #54505c;
	--vioolinkt: #54338c;
	--vioolinkt-diep: #3d2466;
	--lakzegel: #9c3048;
	--lakzegel-diep: #7c2439;

	--breed: 1180px;
	--smal: 760px;
	--dak: 76px;

	--rond: 4px;
	--rond-groot: 10px;

	--sprong: clamp(3.25rem, 7vw, 5.5rem);
}

/* =========================================================================
   3. Grondslag
   ========================================================================= */

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

/* Het attribuut hidden verliest het van iedere klasse die display zet. Deze
   ene regel zet dat recht voor het hele thema; zonder haar staan de doekjes
   over de spoilers gewoon open. */
[hidden] {
	display: none !important;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--dak) + 18px);
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background-color: var(--kalksteen);
	color: var(--inkt);
	font-family: 'Mulish', 'Segoe UI', system-ui, sans-serif;
	font-size: 1.0625rem;
	line-height: 1.72;
	font-weight: 400;
}

h1,
h2,
h3,
h4 {
	font-family: 'Grenze', 'Iowan Old Style', Palatino, Georgia, serif;
	font-weight: 600;
	line-height: 1.18;
	margin: 0 0 0.6em;
	letter-spacing: 0.005em;
}

h1 {
	font-size: clamp(2.1rem, 5vw, 3.35rem);
}

h2 {
	font-size: clamp(1.65rem, 3.4vw, 2.4rem);
}

h3 {
	font-size: clamp(1.2rem, 2.1vw, 1.45rem);
}

h4 {
	font-size: 1.08rem;
}

p {
	margin: 0 0 1.05em;
}

p:last-child {
	margin-bottom: 0;
}

a {
	color: var(--vioolinkt);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

a:hover,
a:focus {
	color: var(--vioolinkt-diep);
}

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

:focus-visible {
	outline: 3px solid var(--randlijn);
	outline-offset: 2px;
}

.zachtjes {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.wegwijs {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 120;
	background: var(--vioolinkt);
	color: var(--kalksteen);
	padding: 14px 20px;
	border-radius: 0 0 var(--rond) 0;
	font-weight: 600;
	text-decoration: none;
}

.wegwijs:focus {
	left: 0;
	color: var(--kalksteen);
}

.kampplaats {
	width: 100%;
	max-width: var(--breed);
	margin: 0 auto;
	padding: 0 22px;
}

/* =========================================================================
   4. Knoppen
   ========================================================================= */

.penning {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: 46px;
	padding: 11px 22px;
	border: 1px solid var(--vioolinkt);
	border-radius: var(--rond);
	background: var(--vioolinkt);
	color: var(--kalksteen);
	font-family: 'Mulish', system-ui, sans-serif;
	font-size: 0.97rem;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.penning:hover,
.penning:focus {
	background: var(--vioolinkt-diep);
	border-color: var(--vioolinkt-diep);
	color: var(--kalksteen);
}

.penning--voort {
	background: var(--lakzegel);
	border-color: var(--lakzegel);
}

.penning--voort:hover,
.penning--voort:focus {
	background: var(--lakzegel-diep);
	border-color: var(--lakzegel-diep);
}

.penning--stil {
	background: transparent;
	border-color: var(--randlijn);
	color: var(--inkt);
}

.penning--stil:hover,
.penning--stil:focus {
	background: var(--blad);
	border-color: var(--vioolinkt);
	color: var(--vioolinkt-diep);
}

.penning--kort {
	min-height: 40px;
	padding: 8px 15px;
	font-size: 0.9rem;
}

/* =========================================================================
   5. De reisbalk boven aan iedere bladzijde
   ========================================================================= */

.reisbalk {
	position: sticky;
	top: 0;
	z-index: 90;
	background: var(--kalksteen);
	border-bottom: 1px solid var(--haarlijn);
}

.reisbalk__binnen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	width: 100%;
	max-width: var(--breed);
	margin: 0 auto;
	padding: 10px 22px;
	min-height: var(--dak);
}

.reisbalk__merk {
	display: flex;
	align-items: center;
	gap: 11px;
	min-height: 44px;
	color: var(--inkt);
	text-decoration: none;
}

.reisbalk__naam {
	display: block;
	font-family: 'Grenze', Georgia, serif;
	font-size: 1.38rem;
	font-weight: 600;
	line-height: 1.1;
	color: var(--inkt);
}

.reisbalk__naam span {
	color: var(--vioolinkt);
}

.reisbalk__onder {
	display: block;
	font-family: 'Mulish', system-ui, sans-serif;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--schaduw);
	line-height: 1.5;
}

.reisbalk__navigatie {
	margin-left: auto;
}

.reispad {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.reispad a {
	display: flex;
	align-items: center;
	min-height: 40px;
	padding: 7px 11px;
	border-radius: var(--rond);
	color: var(--inkt);
	font-size: 0.92rem;
	font-weight: 600;
	text-decoration: none;
}

.reispad a:hover,
.reispad a:focus {
	background: var(--blad);
	color: var(--vioolinkt-diep);
}

.reispad .current-menu-item > a,
.reispad .current_page_item > a {
	color: var(--vioolinkt);
	box-shadow: inset 0 -2px 0 var(--vioolinkt);
}

.lantaarnknop {
	display: none;
	align-items: center;
	gap: 9px;
	min-height: 44px;
	padding: 9px 15px;
	border: 1px solid var(--randlijn);
	border-radius: var(--rond);
	background: transparent;
	color: var(--inkt);
	font-family: 'Mulish', system-ui, sans-serif;
	font-size: 0.92rem;
	font-weight: 600;
	cursor: pointer;
}

.lantaarnknop__strepen {
	display: inline-flex;
	flex-direction: column;
	gap: 3px;
	width: 17px;
}

.lantaarnknop__strepen i {
	display: block;
	height: 2px;
	background: var(--inkt);
}

/* De knop naar contact draagt de marge, niet de hamburger: staat die marge op
   de hamburger, dan valt de kop op 390 px in twee regels uiteen. */
.reisbalk__hoofd {
	margin-left: auto;
}

/* =========================================================================
   6. Secties en scheidingsband
   ========================================================================= */

main {
	display: block;
}

.tent {
	padding: var(--sprong) 0;
}

.tent--paneel {
	background: var(--blad);
}

.tent--diep {
	background-color: var(--diepblad);
	background-image: url('images/papiertextuur.jpg');
	background-size: 700px auto;
	background-repeat: repeat;
	background-blend-mode: luminosity;
}

.tent--kort {
	padding: calc(var(--sprong) * 0.55) 0;
}

.tent__kop {
	max-width: var(--smal);
	margin: 0 0 2.4rem;
}

.tent__boven {
	display: block;
	margin: 0 0 0.65rem;
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--lakzegel);
}

.tent__inleiding {
	color: var(--schaduw);
	font-size: 1.09rem;
}

.tent__raster {
	display: grid;
	gap: 22px;
}

.tent__raster--drie {
	grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
}

.tent__raster--twee {
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

/* Vier kaarten in een raster van drie laten er een alleen achter op de tweede
   rij. Deze twee rasters tellen daarom in vaste stappen: vier, twee, een.
   Nooit een enkele kaart op een lege rij. */
.tent__raster--vier,
.tent__raster--paar {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 1000px) {
	.tent__raster--vier {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.tent__na {
	margin-top: 2.2rem;
}

/* Een verwijzing in een lopende regel is twintig pixels hoog en dat is te
   weinig voor een duim. Deze drie soorten staan altijd alleen of midden in een
   zin, en krijgen daarom een eigen hoogte. */
.tent__na a,
p > a:only-child,
a[href^='mailto:'],
a[href^='tel:'] {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
}

.kompasroos {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	width: 100%;
	height: 26px;
	margin: 0;
	overflow: hidden;
}

.kompasroos__streep {
	display: block;
	flex: 0 1 96px;
	height: 1px;
	background: var(--haarlijn);
}

.kompasroos__ster {
	display: block;
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	margin: 0 8px;
}

/* =========================================================================
   7. De dagbreek: hero in twee helften
   -------------------------------------------------------------------------
   De tekst staat op een vol vlak en niet over de foto. Een sluier over een
   licht beeld maakt het beeld kapot en de tekst nog steeds niet leesbaar.
   ========================================================================= */

.dagbreek {
	border-bottom: 1px solid var(--haarlijn);
	background: var(--blad);
}

.dagbreek__binnen {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: stretch;
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
}

.dagbreek__tekst {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(2.6rem, 6vw, 5rem) clamp(1.4rem, 4vw, 3.4rem);
	background: var(--blad);
}

.dagbreek__boven {
	display: block;
	margin-bottom: 1rem;
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--lakzegel);
}

.dagbreek__zin {
	max-width: 40ch;
	color: var(--schaduw);
	font-size: 1.12rem;
}

.dagbreek__knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 1.8rem;
}

.dagbreek__merken {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 26px;
	margin: 2.2rem 0 0;
	padding: 1.4rem 0 0;
	border-top: 1px solid var(--haarlijn);
	list-style: none;
}

.dagbreek__merken li {
	font-size: 0.9rem;
	color: var(--schaduw);
}

.dagbreek__merken b {
	display: block;
	font-family: 'Grenze', Georgia, serif;
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--vioolinkt);
	line-height: 1.1;
}

.dagbreek__beeld {
	position: relative;
	min-height: 320px;
}

.dagbreek__beeld img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* =========================================================================
   8. De mijlpaal boven een binnenbladzijde
   ========================================================================= */

.mijlpaal {
	padding: clamp(2.6rem, 5vw, 4.2rem) 0 clamp(2rem, 4vw, 3rem);
	background: var(--blad);
	border-bottom: 1px solid var(--haarlijn);
}

.mijlpaal__boven {
	display: block;
	margin-bottom: 0.8rem;
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--lakzegel);
}

.mijlpaal__zin {
	max-width: 62ch;
	margin: 0;
	color: var(--schaduw);
	font-size: 1.09rem;
}

/* =========================================================================
   9. Kaarten
   ========================================================================= */

.gezelkaart,
.oordkaart,
.keuzekaart {
	display: flex;
	flex-direction: column;
	background: var(--kalksteen);
	border: 1px solid var(--haarlijn);
	border-radius: var(--rond-groot);
	overflow: hidden;
}

.tent--paneel .gezelkaart,
.tent--paneel .oordkaart,
.tent--paneel .keuzekaart,
.tent--diep .gezelkaart,
.tent--diep .oordkaart,
.tent--diep .keuzekaart {
	background: var(--kalksteen);
}

/* Reisgenoten: nummer in een cirkel voor de kop, tekst daaronder. */
.gezelkaart {
	padding: 24px 22px 22px;
}

.gezelkaart__nummer {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	margin-bottom: 14px;
	border: 1px solid var(--randlijn);
	border-radius: 50%;
	font-family: 'Grenze', Georgia, serif;
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--schaduw);
}

.gezelkaart__rol {
	display: block;
	margin: -0.35rem 0 0.8rem;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--schaduw);
}

.gezelkaart__prijs {
	margin-top: auto;
	padding-top: 1rem;
	border-top: 1px solid var(--haarlijn);
	color: var(--lakzegel);
	font-size: 0.97rem;
}

/* Oorden: beeld boven, tekst onder, verwijzing tegen de bodem. */
.oordkaart__beeld {
	aspect-ratio: 3 / 2;
	background: var(--blad);
}

.oordkaart__beeld img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.oordkaart__binnen {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 22px;
}

.oordkaart__kort {
	display: block;
	margin-bottom: 0.5rem;
	font-size: 0.76rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--lakzegel);
}

.oordkaart__kost {
	margin-top: auto;
	padding-top: 1rem;
	border-top: 1px solid var(--haarlijn);
	font-size: 0.95rem;
	color: var(--schaduw);
}

/* Uitrusting: twee helften met een haarlijn ertussen. */
.keuzekaart {
	padding: 22px;
}

.keuzekaart__paar {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 14px;
	margin-top: 0.6rem;
}

.keuzekaart__wint,
.keuzekaart__kost {
	padding-left: 14px;
	border-left: 3px solid var(--haarlijn);
	font-size: 0.97rem;
}

.keuzekaart__wint {
	border-left-color: var(--vioolinkt);
}

.keuzekaart__kost {
	border-left-color: var(--lakzegel);
	color: var(--schaduw);
}

.keuzekaart__merk {
	display: block;
	margin-bottom: 0.15rem;
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--schaduw);
}

/* =========================================================================
   10. Duoblok: beeld naast tekst
   ========================================================================= */

.tent__duo {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: clamp(1.8rem, 4vw, 3.2rem);
	align-items: center;
}

.tent__duo--gedraaid .tent__beeld {
	order: 2;
}

.tent__beeld img {
	width: 100%;
	border-radius: var(--rond-groot);
	border: 1px solid var(--haarlijn);
}

.tent__bijschrift {
	margin: 0.7rem 0 0;
	font-size: 0.86rem;
	color: var(--schaduw);
}

/* =========================================================================
   11. De doekjes over de spoilers
   -------------------------------------------------------------------------
   Zonder javascript staat de klasse js niet op html. Dan hoort het blok open
   te staan en de knop weg te vallen: het doekje is een verbetering en nooit
   een slot op de inhoud. De specificiteit hieronder is met opzet hoger dan
   die van de regel [hidden] bovenaan.
   ========================================================================= */

/* De kalksteentextuur ligt onder een sluier van bijna ondoorzichtig blad. Zonder
   die sluier tekent de steen dwars door het opschrift van de knop heen en wordt
   het onleesbaar; met sluier blijft het een weefsel en niet een muur. Het blok
   draagt data-foto-achter, zodat de pixelproef er wel naar kijkt. */
.doekje {
	margin: 1.4rem 0;
	border: 1px solid var(--haarlijn);
	border-radius: var(--rond-groot);
	background-color: var(--blad);
	background-image:
		linear-gradient(rgba(225, 222, 213, 0.88), rgba(225, 222, 213, 0.88)),
		url('images/kalksteentextuur.jpg');
	background-size: auto, 460px auto;
	overflow: hidden;
}

.doekjeknop {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 52px;
	padding: 13px 18px;
	border: 0;
	background: transparent;
	color: var(--inkt);
	font-family: 'Mulish', system-ui, sans-serif;
	font-size: 0.98rem;
	font-weight: 600;
	line-height: 1.4;
	text-align: left;
	cursor: pointer;
}

.doekjeknop:hover,
.doekjeknop:focus {
	color: var(--vioolinkt-diep);
}

.doekjeknop__oog {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	border: 2px solid var(--vioolinkt);
	border-radius: 50%;
	background: transparent;
	box-shadow: inset 0 0 0 3px var(--blad), inset 0 0 0 8px var(--vioolinkt);
}

.doekjeknop[aria-expanded='true'] .doekjeknop__oog {
	box-shadow: inset 0 0 0 8px var(--blad);
}

.doekje__inhoud {
	padding: 4px 18px 18px;
	background: var(--kalksteen);
	border-top: 1px solid var(--haarlijn);
}

.doekje__inhoud > :first-child {
	margin-top: 1rem;
}

html:not(.js) .doekje__inhoud[hidden] {
	display: block !important;
}

html:not(.js) .doekjeknop {
	display: none !important;
}

/* =========================================================================
   12. Werktuig: Gunstlijn
   ========================================================================= */

.gunstlijn,
.worpboog,
.gezelschapstafel,
.vertakking {
	display: grid;
	gap: 26px;
	padding: clamp(20px, 3vw, 32px);
	background: var(--kalksteen);
	border: 1px solid var(--haarlijn);
	border-radius: var(--rond-groot);
}

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

.gunstlijn__momenten {
	display: grid;
	gap: 16px;
	max-height: 520px;
	overflow-y: auto;
	padding-right: 6px;
}

.gunstlijn__moment {
	border: 1px solid var(--haarlijn);
	border-radius: var(--rond);
	padding: 14px 15px;
	background: var(--blad);
}

.gunstlijn__titel {
	display: block;
	font-family: 'Grenze', Georgia, serif;
	font-size: 1.12rem;
	font-weight: 600;
}

.gunstlijn__vraag {
	margin: 0.2rem 0 0.75rem;
	font-size: 0.9rem;
	color: var(--schaduw);
}

.gunstlijn__keuzes {
	display: grid;
	gap: 7px;
}

.gunstlijn__keuze {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 42px;
	padding: 8px 12px;
	border: 1px solid var(--haarlijn);
	border-radius: var(--rond);
	background: var(--kalksteen);
	color: var(--inkt);
	font-family: 'Mulish', system-ui, sans-serif;
	font-size: 0.93rem;
	line-height: 1.4;
	text-align: left;
	cursor: pointer;
}

.gunstlijn__keuze:hover {
	border-color: var(--randlijn);
}

.gunstlijn__keuze[aria-pressed='true'] {
	border-color: var(--vioolinkt);
	background: var(--vioolinkt);
	color: var(--kalksteen);
	font-weight: 600;
}

.gunstlijn__uitslag {
	display: grid;
	gap: 14px;
	align-content: start;
}

.gunstmeter {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 6px;
	padding: 14px 15px;
	border: 1px solid var(--haarlijn);
	border-radius: var(--rond);
	background: var(--blad);
}

.gunstmeter__kop {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
}

.gunstmeter__naam {
	font-family: 'Grenze', Georgia, serif;
	font-size: 1.15rem;
	font-weight: 600;
}

.gunstmeter__stand {
	font-family: 'Grenze', Georgia, serif;
	font-size: 1.3rem;
	font-weight: 600;
	color: var(--vioolinkt);
}

/* De goot heeft een vaste hoogte, zodat een korte balk als een korte balk
   leest en niet als een vlek. */
.gunstgoot {
	position: relative;
	display: block;
	width: 100%;
	height: 14px;
	border-radius: 7px;
	background: var(--haarlijn);
	overflow: hidden;
}

.gunstgoot__balk {
	position: absolute;
	top: 0;
	bottom: 0;
	display: block;
	background: var(--vioolinkt);
	transition: left 0.25s ease, width 0.25s ease;
}

.gunstgoot__nul {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 2px;
	background: var(--kalksteen);
}

.gunstmeter--weg .gunstgoot__balk {
	background: var(--lakzegel);
}

.gunstmeter--weg .gunstmeter__stand {
	color: var(--lakzegel);
}

.gunstmeter__zin {
	margin: 0;
	font-size: 0.9rem;
	color: var(--schaduw);
}

.gunstmeter__besliste {
	margin: 0;
	padding: 8px 11px;
	border-left: 3px solid var(--lakzegel);
	background: var(--kalksteen);
	font-size: 0.88rem;
	color: var(--lakzegel);
}

.uitspraak {
	display: inline-flex;
	align-items: center;
	min-height: 26px;
	padding: 3px 10px;
	border: 1px solid var(--randlijn);
	border-radius: 13px;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--inkt);
}

.uitspraak--weg {
	border-color: var(--lakzegel);
	background: var(--lakzegel);
	color: var(--kalksteen);
}

.uitspraak--trouw {
	border-color: var(--vioolinkt);
	background: var(--vioolinkt);
	color: var(--kalksteen);
}

/* =========================================================================
   13. Werktuig: Worpboog
   ========================================================================= */

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

.worpboog__knoppen {
	display: grid;
	gap: 18px;
	align-content: start;
}

.worpboog__regel label {
	display: block;
	margin-bottom: 0.4rem;
	font-size: 0.86rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--schaduw);
}

.worpboog__waarde {
	font-family: 'Grenze', Georgia, serif;
	font-size: 1.25rem;
	color: var(--vioolinkt);
	text-transform: none;
	letter-spacing: 0;
}

.worpboog__wijzen {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.worpboog__wijze {
	min-height: 42px;
	padding: 8px 15px;
	border: 1px solid var(--haarlijn);
	border-radius: var(--rond);
	background: var(--kalksteen);
	color: var(--inkt);
	font-family: 'Mulish', system-ui, sans-serif;
	font-size: 0.92rem;
	font-weight: 600;
	cursor: pointer;
}

.worpboog__wijze[aria-pressed='true'] {
	border-color: var(--vioolinkt);
	background: var(--vioolinkt);
	color: var(--kalksteen);
}

.worpboog__uitslag {
	display: grid;
	gap: 14px;
	align-content: start;
	padding: 18px;
	border: 1px solid var(--haarlijn);
	border-radius: var(--rond);
	background: var(--blad);
}

.worpboog__procent {
	font-family: 'Grenze', Georgia, serif;
	font-size: clamp(2.4rem, 6vw, 3.4rem);
	font-weight: 600;
	line-height: 1;
	color: var(--vioolinkt);
}

.worpboog__deel {
	margin: 0;
	font-size: 0.92rem;
	color: var(--schaduw);
}

.worpboog__oordeel {
	margin: 0;
	padding-top: 12px;
	border-top: 1px solid var(--haarlijn);
}

.worpboog__vlakken {
	display: grid;
	grid-template-columns: repeat(10, minmax(0, 1fr));
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.boogvak {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 34px;
	border: 1px solid var(--haarlijn);
	border-radius: 3px;
	background: var(--kalksteen);
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--schaduw);
}

.boogvak--raak {
	border-color: var(--vioolinkt);
	background: var(--vioolinkt);
	color: var(--kalksteen);
}

input[type='range'] {
	width: 100%;
	min-height: 38px;
	accent-color: var(--vioolinkt);
	background: transparent;
}

/* =========================================================================
   14. Werktuig: Gezelschapstafel
   ========================================================================= */

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

.gezelschapstafel__lijst {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gezelschapstafel__knop {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	width: 100%;
	min-height: 52px;
	padding: 9px 12px;
	border: 1px solid var(--haarlijn);
	border-radius: var(--rond);
	background: var(--kalksteen);
	color: var(--inkt);
	font-family: 'Mulish', system-ui, sans-serif;
	font-size: 0.93rem;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
}

.gezelschapstafel__knop small {
	font-size: 0.76rem;
	font-weight: 400;
	color: var(--schaduw);
}

.gezelschapstafel__knop[aria-pressed='true'] {
	border-color: var(--vioolinkt);
	background: var(--vioolinkt);
	color: var(--kalksteen);
}

.gezelschapstafel__knop[aria-pressed='true'] small {
	color: var(--blad);
}

/* Geen opacity om een knop weg te zetten: op 0.55 zakte de naam naar 3.9:1
   tegen het kalksteen, en doorzichtigheid is bovendien niet te meten met een
   gewone contrastproef. Een stippelrand met een eigen kleur zegt hetzelfde en
   blijft leesbaar. */
.gezelschapstafel__knop[disabled] {
	border-style: dashed;
	border-color: var(--randlijn);
	background: var(--blad);
	color: var(--schaduw);
	cursor: not-allowed;
}

.gezelschapstafel__knop[disabled] small {
	color: var(--schaduw);
}

.gezelschapstafel__uitslag {
	display: grid;
	gap: 14px;
	align-content: start;
	padding: 18px;
	border: 1px solid var(--haarlijn);
	border-radius: var(--rond);
	background: var(--blad);
}

.gezelschapstafel__gaten {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gemis {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 5px 12px;
	border: 1px solid var(--lakzegel);
	border-radius: 16px;
	background: var(--kalksteen);
	color: var(--lakzegel);
	font-size: 0.86rem;
	font-weight: 600;
}

.gemis--geen {
	border-color: var(--vioolinkt);
	color: var(--vioolinkt);
}

/* =========================================================================
   15. Werktuig: Vertakking
   ========================================================================= */

.vertakking {
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
}

.vertakking__vragen {
	display: grid;
	gap: 16px;
	align-content: start;
}

.vertakking__vraag {
	padding: 14px 15px;
	border: 1px solid var(--haarlijn);
	border-radius: var(--rond);
	background: var(--blad);
}

.vertakking__vraag p {
	margin: 0 0 0.7rem;
	font-weight: 600;
}

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

.vertakking__knop {
	min-height: 44px;
	padding: 9px 12px;
	border: 1px solid var(--haarlijn);
	border-radius: var(--rond);
	background: var(--kalksteen);
	color: var(--inkt);
	font-family: 'Mulish', system-ui, sans-serif;
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.35;
	cursor: pointer;
}

.vertakking__knop[aria-pressed='true'] {
	border-color: var(--vioolinkt);
	background: var(--vioolinkt);
	color: var(--kalksteen);
}

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

.vertakking__scene {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 44px;
	padding: 9px 14px;
	border: 1px solid var(--haarlijn);
	border-left-width: 4px;
	border-radius: var(--rond);
	background: var(--kalksteen);
	font-size: 0.95rem;
}

.vertakking__scene--open {
	border-left-color: var(--vioolinkt);
}

.vertakking__scene--dicht {
	border-left-color: var(--lakzegel);
	color: var(--schaduw);
	text-decoration: line-through;
	text-decoration-color: var(--lakzegel);
}

.vertakking__merk {
	flex: 0 0 auto;
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.vertakking__scene--open .vertakking__merk {
	color: var(--vioolinkt);
}

.vertakking__scene--dicht .vertakking__merk {
	color: var(--lakzegel);
}

.vertakking__duurste {
	margin: 0;
	padding: 12px 15px;
	border-left: 3px solid var(--lakzegel);
	background: var(--blad);
	font-size: 0.95rem;
}

.vertakking__uitslag {
	display: grid;
	gap: 14px;
	align-content: start;
}

.werktuig__voet {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	grid-column: 1 / -1;
	padding-top: 14px;
	border-top: 1px solid var(--haarlijn);
}

.werktuig__noot {
	margin: 0;
	max-width: 62ch;
	font-size: 0.86rem;
	color: var(--schaduw);
}

/* =========================================================================
   16. Keuzebladen
   ========================================================================= */

.keuzeblad {
	display: flex;
	flex-direction: column;
	padding: 22px;
	background: var(--kalksteen);
	border: 1px solid var(--haarlijn);
	border-radius: var(--rond-groot);
}

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

.keuzeblad__koos,
.keuzeblad__kostte {
	display: flex;
	flex-direction: column;
	padding: 0 18px;
}

.keuzeblad__koos {
	padding-left: 0;
	border-right: 1px solid var(--haarlijn);
	color: var(--inkt);
}

.keuzeblad__kostte {
	padding-right: 0;
	color: var(--lakzegel);
}

.keuzeblad__merk {
	display: block;
	margin-bottom: 0.5rem;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--schaduw);
}

.keuzeblad__woord {
	margin: 0;
	font-size: 0.99rem;
}

.keuzeblad__tekst {
	margin: 1.2rem 0 0;
	padding-top: 1.2rem;
	border-top: 1px solid var(--haarlijn);
	font-size: 0.97rem;
	color: var(--schaduw);
}

.keuzeblad__voet {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	margin: 1.1rem 0 0;
	padding: 0.9rem 0 0;
	border-top: 1px solid var(--haarlijn);
	list-style: none;
	font-size: 0.84rem;
	color: var(--schaduw);
}

.keuzeblad__voet b {
	color: var(--inkt);
	font-weight: 600;
}

/* =========================================================================
   17. Dagboek: takken met twee gevolgen
   ========================================================================= */

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

.takstuk {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	gap: 18px;
	padding: 20px 22px;
	background: var(--kalksteen);
	border: 1px solid var(--haarlijn);
	border-radius: var(--rond-groot);
}

.takstuk__merk {
	display: block;
	width: 44px;
	height: 54px;
}

.takstuk__kop {
	margin: 0 0 0.35rem;
	font-size: 1.28rem;
}

.takstuk__kop a {
	display: inline-block;
	min-height: 36px;
	color: var(--inkt);
	text-decoration: none;
}

.takstuk__kop a:hover,
.takstuk__kop a:focus {
	color: var(--vioolinkt);
	text-decoration: underline;
}

.takstuk__datum {
	display: block;
	margin-bottom: 0.7rem;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--schaduw);
}

.takstuk__gevolgen {
	display: grid;
	gap: 8px;
	margin: 0.9rem 0 0;
	padding: 0;
	list-style: none;
}

.takstuk__gevolg {
	padding-left: 14px;
	border-left: 3px solid var(--vioolinkt);
	font-size: 0.94rem;
	color: var(--schaduw);
}

.takstuk__gevolg + .takstuk__gevolg {
	border-left-color: var(--lakzegel);
}

/* =========================================================================
   18. Vertelling: een stuk uit het dagboek
   ========================================================================= */

.vertelling {
	max-width: var(--smal);
	margin: 0 auto;
}

.vertelling p {
	font-size: 1.09rem;
}

.vertelling h2 {
	margin-top: 2.2rem;
}

.vertelling__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	margin: 0 0 1.8rem;
	padding: 0 0 1.2rem;
	border-bottom: 1px solid var(--haarlijn);
	list-style: none;
	font-size: 0.86rem;
	color: var(--schaduw);
}

.vertelling__inzet {
	margin: 1.8rem 0;
	padding: 18px 20px;
	background: var(--blad);
	border-left: 4px solid var(--vioolinkt);
	border-radius: 0 var(--rond) var(--rond) 0;
}

.vertelling__voet {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 2.4rem;
	padding-top: 1.6rem;
	border-top: 1px solid var(--haarlijn);
}

/* =========================================================================
   19. Kerfstok met de getallen
   ========================================================================= */

.kerfstok {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.kerfstok li {
	padding: 18px 18px 18px 20px;
	border-left: 3px solid var(--haarlijn);
	background: var(--kalksteen);
}

.kerfstok__getal {
	display: block;
	font-family: 'Grenze', Georgia, serif;
	font-size: clamp(2rem, 4.5vw, 2.8rem);
	font-weight: 600;
	line-height: 1.05;
	color: var(--vioolinkt);
}

.kerfstok__woord {
	display: block;
	margin: 0.1rem 0 0.4rem;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--lakzegel);
}

.kerfstok__zin {
	margin: 0;
	font-size: 0.93rem;
	color: var(--schaduw);
}

/* =========================================================================
   20. Navraag: de vragenlijst
   ========================================================================= */

.navraag {
	display: grid;
	gap: 14px;
	max-width: 88ch;
}

.navraag__blok {
	padding: 18px 20px;
	background: var(--kalksteen);
	border: 1px solid var(--haarlijn);
	border-radius: var(--rond-groot);
}

.navraag__vraag {
	margin: 0 0 0.5rem;
	font-size: 1.1rem;
}

.navraag__antwoord {
	margin: 0;
	color: var(--schaduw);
}

/* =========================================================================
   21. Uitnodiging: de banier halverwege
   ========================================================================= */

.uitnodiging {
	position: relative;
	padding: clamp(2.6rem, 5vw, 4rem) 0;
	background-image: url('images/open-vlakte.jpg');
	background-size: cover;
	background-position: center;
}

/* De tekst staat op een vol paneel bovenop de foto, niet op een sluier: op een
   lichte site is een sluier altijd te weinig of te veel. */
.uitnodiging__paneel {
	max-width: 660px;
	padding: clamp(22px, 4vw, 34px);
	background: var(--kalksteen);
	border: 1px solid var(--haarlijn);
	border-radius: var(--rond-groot);
}

.uitnodiging__zin {
	color: var(--schaduw);
}

.uitnodiging__knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 1.5rem;
}

/* =========================================================================
   22. Formulieren
   ========================================================================= */

.brieftas {
	display: grid;
	gap: 18px;
	padding: clamp(20px, 3vw, 30px);
	background: var(--kalksteen);
	border: 1px solid var(--haarlijn);
	border-radius: var(--rond-groot);
}

.regelveld {
	display: grid;
	gap: 6px;
}

.regelveld label {
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--inkt);
}

.regelveld__hulp {
	font-size: 0.84rem;
	color: var(--schaduw);
}

.regelveld input[type='text'],
.regelveld input[type='email'],
.regelveld input[type='number'],
.regelveld select,
.regelveld textarea {
	width: 100%;
	min-height: 46px;
	padding: 11px 13px;
	border: 1px solid var(--randlijn);
	border-radius: var(--rond);
	background: var(--blad);
	color: var(--inkt);
	font-family: 'Mulish', system-ui, sans-serif;
	font-size: 1rem;
	line-height: 1.5;
}

.regelveld textarea {
	min-height: 140px;
	resize: vertical;
}

.regelveld input:focus,
.regelveld select:focus,
.regelveld textarea:focus {
	border-color: var(--vioolinkt);
	outline: 3px solid var(--randlijn);
	outline-offset: 1px;
}

.brieftas__paar {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 18px;
}

/* De val voor robots staat buiten beeld en niet op display none: een veld met
   display none wordt door sommige robots overgeslagen. */
.lokvink {
	position: absolute;
	left: -6000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.postbriefje {
	margin: 0 0 1.6rem;
	padding: 15px 18px;
	border-left: 4px solid var(--vioolinkt);
	background: var(--blad);
	border-radius: 0 var(--rond) var(--rond) 0;
}

.postbriefje--fout {
	border-left-color: var(--lakzegel);
}

.postbriefje p {
	margin: 0;
}

/* =========================================================================
   23. Gegevenslijsten en tabellen
   ========================================================================= */

.gegevenslijst {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 10px 20px;
	margin: 0;
}

.gegevenslijst dt {
	font-weight: 600;
	color: var(--schaduw);
}

.gegevenslijst dd {
	margin: 0;
}

.gegevenslijst dd a {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
}

/* Een brede tabel duwt een telefoon uit elkaar. De omhulling schuift, en onder
   660 px valt de tabel uiteen in blokjes met het opschrift uit data-kop. */
.tafelrol {
	width: 100%;
	overflow-x: auto;
}

.tafelrol table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.94rem;
}

.tafelrol th,
.tafelrol td {
	padding: 11px 14px;
	text-align: left;
	border-bottom: 1px solid var(--haarlijn);
	vertical-align: top;
}

.tafelrol th {
	font-family: 'Mulish', system-ui, sans-serif;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--schaduw);
	white-space: nowrap;
}

.tafelrol code {
	font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
	font-size: 0.9em;
	color: var(--vioolinkt);
}

/* =========================================================================
   24. Juridische bladzijden
   ========================================================================= */

.wetstuk {
	max-width: var(--smal);
}

.wetstuk h2 {
	margin-top: 2.4rem;
	font-size: 1.5rem;
}

.wetstuk h2:first-of-type {
	margin-top: 0;
}

.wetstuk ul,
.wetstuk ol {
	margin: 0 0 1.1em;
	padding-left: 1.3em;
}

.wetstuk li {
	margin-bottom: 0.45em;
}

/* =========================================================================
   25. De nachtkamp onderaan
   ========================================================================= */

.nachtkamp {
	margin-top: 0;
	padding: clamp(2.6rem, 5vw, 4rem) 0 2rem;
	background: var(--blad);
	border-top: 1px solid var(--haarlijn);
}

.nachtkamp__raster {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 30px;
}

.nachtkamp__merk {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	margin-bottom: 0.9rem;
	color: var(--inkt);
	text-decoration: none;
}

.nachtkamp__over {
	max-width: 34ch;
	font-size: 0.94rem;
	color: var(--schaduw);
}

.nachtkamp h2 {
	margin-bottom: 0.8rem;
	font-size: 1.05rem;
	letter-spacing: 0.03em;
}

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

.nachtkamp li {
	margin-bottom: 2px;
}

.nachtkamp li a {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	font-size: 0.94rem;
}

.nachtkamp__gegevens {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 26px;
	margin: 2.4rem 0 1.6rem;
	padding: 1.5rem 0 0;
	border-top: 1px solid var(--haarlijn);
	list-style: none;
	font-size: 0.92rem;
	color: var(--schaduw);
}

.nachtkamp__gegevens a {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
}

.geenband {
	margin: 0 0 1.6rem;
	padding: 16px 18px;
	border: 1px solid var(--haarlijn);
	border-left: 4px solid var(--lakzegel);
	border-radius: 0 var(--rond) var(--rond) 0;
	background: var(--kalksteen);
	font-size: 0.9rem;
	color: var(--schaduw);
}

.geenband b {
	color: var(--inkt);
}

.nachtkamp__slot {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 24px;
	padding-top: 1.4rem;
	border-top: 1px solid var(--haarlijn);
	font-size: 0.86rem;
	color: var(--schaduw);
}

.nachtkamp__slot p {
	margin: 0;
}

/* =========================================================================
   26. De strook over browseropslag
   ========================================================================= */

.koekbriefje {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 100;
	background: var(--kalksteen);
	border-top: 2px solid var(--vioolinkt);
	box-shadow: 0 -4px 18px rgba(29, 27, 34, 0.14);
}

.koekbriefje__binnen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	width: 100%;
	max-width: var(--breed);
	margin: 0 auto;
	padding: 15px 22px;
}

.koekbriefje p {
	max-width: 66ch;
	margin: 0;
	font-size: 0.9rem;
	color: var(--schaduw);
}

.koekbriefje__knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
}

/* =========================================================================
   27. Vierhonderdvier
   ========================================================================= */

.afgedwaald {
	padding: clamp(3rem, 8vw, 6rem) 0;
	text-align: center;
}

.afgedwaald__getal:not(.afgedwaald__zin) {
	display: block;
	font-family: 'Grenze', Georgia, serif;
	font-size: clamp(4.5rem, 16vw, 9rem);
	font-weight: 600;
	line-height: 1;
	color: var(--vioolinkt);
}

.afgedwaald__zin {
	max-width: 52ch;
	margin: 1rem auto 2rem;
	color: var(--schaduw);
}

.afgedwaald__knoppen {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

/* =========================================================================
   28. Opdoemen bij het scrollen
   -------------------------------------------------------------------------
   Alleen doorzichtig zolang de klasse js op html staat. Zonder javascript
   blijft alles gewoon staan. De klasse die het script erbij zet heet
   ontvouwt--open en nergens anders anders.
   ========================================================================= */

.js .ontvouwt {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.55s ease, transform 0.55s ease;
}

.js .ontvouwt.ontvouwt--open {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.js .ontvouwt {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* =========================================================================
   29. Smallere schermen
   ========================================================================= */

@media (max-width: 1080px) {
	.gunstlijn,
	.worpboog,
	.gezelschapstafel,
	.vertakking {
		grid-template-columns: minmax(0, 1fr);
	}

	.gunstlijn__momenten {
		max-height: none;
		overflow-y: visible;
		padding-right: 0;
	}
}

@media (max-width: 940px) {
	.reisbalk__navigatie {
		order: 4;
		flex-basis: 100%;
		margin-left: 0;
	}

	.reisbalk__navigatie[hidden] {
		display: none !important;
	}

	.lantaarnknop {
		display: inline-flex;
	}

	.reispad {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 6px 0 12px;
		border-top: 1px solid var(--haarlijn);
	}

	.reispad a {
		min-height: 46px;
		border-radius: 0;
		border-bottom: 1px solid var(--haarlijn);
	}

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

	.dagbreek__beeld {
		order: -1;
		min-height: 240px;
		max-height: 44vh;
	}

	.tent__duo--gedraaid .tent__beeld {
		order: 0;
	}
}

@media (max-width: 660px) {
	body {
		font-size: 1.0125rem;
	}

	.kampplaats {
		padding: 0 16px;
	}

	.reisbalk__binnen {
		gap: 10px;
		padding: 9px 16px;
	}

	.reisbalk__onder {
		display: none;
	}

	.reisbalk__naam {
		font-size: 1.15rem;
	}

	.reisbalk__merk {
		gap: 8px;
	}

	.lantaarnknop {
		padding: 9px 12px;
	}

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

	.keuzeblad__kolommen {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	.keuzeblad__koos {
		padding: 0 0 16px;
		border-right: 0;
		border-bottom: 1px solid var(--haarlijn);
	}

	.keuzeblad__kostte {
		padding: 0;
	}

	.takstuk {
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
	}

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

	.uitnodiging__paneel {
		max-width: none;
	}

	.gegevenslijst {
		grid-template-columns: minmax(0, 1fr);
		gap: 2px 0;
	}

	.gegevenslijst dd {
		margin-bottom: 12px;
	}

	/* De tabel wordt een stapel: iedere cel krijgt zijn opschrift uit data-kop
	   mee, en de vaste breedte van de kop verdwijnt. */
	.tafelrol--stapel table,
	.tafelrol--stapel tbody,
	.tafelrol--stapel tr,
	.tafelrol--stapel td {
		display: block;
		width: 100%;
	}

	.tafelrol--stapel thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
	}

	.tafelrol--stapel tr {
		margin-bottom: 16px;
		padding-bottom: 10px;
		border-bottom: 2px solid var(--haarlijn);
	}

	.tafelrol--stapel td {
		padding: 4px 0 8px;
		border-bottom: 0;
		white-space: normal;
	}

	.tafelrol--stapel td::before {
		content: attr(data-kop);
		display: block;
		margin-bottom: 2px;
		font-size: 0.72rem;
		font-weight: 600;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: var(--schaduw);
	}

	.tafelrol th {
		white-space: normal;
	}

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

	.nachtkamp__slot {
		flex-direction: column;
	}
}

@media (max-width: 470px) {
	/* Onder deze breedte passen merk, menuknop en de knop naar contact niet
	   meer naast elkaar en valt de kop in twee regels uiteen. Het woord Menu
	   gaat weg maar blijft de naam van de knop voor een schermlezer. */
	.lantaarnknop__woord {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
		border: 0;
	}

	.lantaarnknop {
		padding: 9px 11px;
	}

	.reisbalk__naam {
		font-size: 1.08rem;
	}
}

@media (max-width: 420px) {
	.dagbreek__merken {
		gap: 14px;
	}

	.koekbriefje__binnen {
		padding: 13px 16px;
	}

	.koekbriefje__knoppen .penning {
		flex: 1 1 auto;
	}
}