/*
Theme Name: Pubggamer
Theme URI: https://pubggamer.org/
Author: Stichting Pubggamer
Author URI: https://pubggamer.org/
Description: Nederlandstalige gemeenschap rond het spel PUBG. Onofficiele fansite met zones, squads, avonden en vier eigen hulpmiddelen. Niet verbonden aan de uitgever of de ontwikkelaar van het spel.
Version: 1.0.0
Requires at least: 6.2
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: pubggamer
Tags: gaming, community, dark, one-column, custom-menu
*/

/* ==========================================================================
   1. Lettertypen — uit de map fonts/ van het thema, niet van een cdn
   ========================================================================== */

@font-face {
	font-family: 'Staatliches';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/staatliches-400-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Staatliches';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/staatliches-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+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Archivo';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/archivo-400-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Archivo';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/archivo-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+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Archivo';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('fonts/archivo-600-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Archivo';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('fonts/archivo-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+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   2. Kleuren en maten
   ========================================================================== */

:root {
	--staal: #151a1f;
	--staal-diep: #0f1317;
	--paneel: #1d242b;
	--paneel-hoog: #232b34;
	--rand: #2c363f;
	--rand-scherp: #3d4a55;
	--sein: #f2b229;
	--sein-diep: #c88f14;
	--lucht: #7fa9c9;
	--lucht-diep: #4d7593;
	--roest: #b5563a;
	--roest-licht: #e08a6c;
	--krijt: #e6e9ec;
	--krijt-stil: #9aa3ab;

	--plaat: 'Staatliches', 'Haettenschweiler', 'Arial Narrow', sans-serif;
	--lijf: 'Archivo', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

	--breed: 1240px;
	--smal: 820px;
	--toren: 74px;
	--sprong: clamp(3.5rem, 7vw, 6.5rem);
}

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

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

html {
	/* Zonder deze regel verdwijnt het doel van een ankerlink onder de vaste kop. */
	scroll-padding-top: calc(var(--toren) + 18px);
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background-color: var(--staal);
	color: var(--krijt);
	font-family: var(--lijf);
	font-size: 1.0625rem;
	line-height: 1.72;
	overflow-x: hidden;
}

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

/* Klassen als .trekker zetten display en verslaan daarmee de regel die de
   browser aan het attribuut hidden hangt. Zonder deze regel staan de knoppen
   van de kaartproef er al voordat er iets geantwoord is. */
[hidden] {
	display: none !important;
}

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

a:hover,
a:focus-visible {
	color: var(--krijt);
}

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

h1,
h2,
h3,
h4 {
	font-family: var(--plaat);
	font-weight: 400;
	letter-spacing: 0.02em;
	line-height: 1.06;
	margin: 0 0 0.6em;
	text-transform: uppercase;
}

h1 {
	font-size: clamp(2.5rem, 6.2vw, 4.6rem);
}

h2 {
	font-size: clamp(1.95rem, 4vw, 3rem);
}

h3 {
	font-size: clamp(1.35rem, 2.2vw, 1.75rem);
}

h4 {
	font-size: 1.15rem;
	letter-spacing: 0.06em;
}

p {
	margin: 0 0 1.15em;
}

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

li {
	margin-bottom: 0.5em;
}

strong,
b {
	font-weight: 600;
	color: #fff;
}

hr {
	border: 0;
	border-top: 1px solid var(--rand);
	margin: 2.5rem 0;
}

table {
	border-collapse: collapse;
	width: 100%;
}

figure {
	margin: 0;
}

/* Alleen voor schermlezers. */
.fluister {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.doorsteek {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	background: var(--sein);
	color: var(--staal-diep);
	padding: 0.85rem 1.4rem;
	font-family: var(--plaat);
	font-size: 1.1rem;
	letter-spacing: 0.05em;
	text-decoration: none;
}

.doorsteek:focus {
	left: 0.75rem;
	top: 0.75rem;
	color: var(--staal-diep);
}

/* ==========================================================================
   4. Raamwerk: gebied (breedte) en zone (sectie)
   ========================================================================== */

.gebied {
	width: 100%;
	max-width: var(--breed);
	margin: 0 auto;
	padding: 0 1.5rem;
}

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

.zone {
	padding: var(--sprong) 0;
	position: relative;
}

.zone--diep {
	background: var(--staal-diep);
}

.zone--paneel {
	background: var(--paneel);
}

.zone--nauw {
	padding: calc(var(--sprong) * 0.62) 0;
}

.zone__kop {
	max-width: 62ch;
	margin-bottom: 2.6rem;
}

.zone__kop--midden {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.zone__kop p {
	color: var(--krijt-stil);
	font-size: 1.1rem;
	margin-bottom: 0;
}

/* Bovenkopje boven of onder de titel, afhankelijk van de sectie. */
.aanroep {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-family: var(--plaat);
	font-size: 0.95rem;
	letter-spacing: 0.22em;
	color: var(--sein);
	text-transform: uppercase;
	margin-bottom: 0.9rem;
}

.aanroep::before {
	content: '';
	width: 26px;
	height: 3px;
	background: var(--sein);
	flex: none;
}

.aanroep--onder {
	margin-bottom: 0;
	margin-top: 0.8rem;
	color: var(--lucht);
}

.aanroep--onder::before {
	background: var(--lucht);
}

.inzet {
	font-size: 1.22rem;
	line-height: 1.65;
	color: var(--krijt);
}

.merkje {
	display: inline-block;
	font-family: var(--plaat);
	font-size: 0.9rem;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	padding: 0.24rem 0.66rem;
	border: 1px solid var(--rand-scherp);
	color: var(--krijt-stil);
	background: rgba(0, 0, 0, 0.25);
}

.merkje--sein {
	border-color: var(--sein-diep);
	color: var(--sein);
}

.merkje--lucht {
	border-color: var(--lucht-diep);
	color: var(--lucht);
}

/* ==========================================================================
   5. Dropstreep — de scheiding van dit thema: stencilstreepjes op een kist
   ========================================================================== */

.dropstreep {
	height: 26px;
	position: relative;
	background-color: var(--staal-diep);
	background-image:
		repeating-linear-gradient(to right, var(--sein-diep) 0 3px, transparent 3px 26px),
		repeating-linear-gradient(to right, var(--rand-scherp) 0 3px, transparent 3px 13px);
	background-size: 26px 14px, 13px 8px;
	background-position: 0 3px, 6px 9px;
	background-repeat: repeat-x;
	border-top: 1px solid var(--rand);
	border-bottom: 1px solid var(--rand);
}

.dropstreep::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 1px;
	background: var(--rand-scherp);
}

.dropstreep--stil {
	background-image:
		repeating-linear-gradient(to right, var(--rand-scherp) 0 3px, transparent 3px 26px),
		repeating-linear-gradient(to right, var(--rand) 0 3px, transparent 3px 13px);
}

/* ==========================================================================
   6. Trekker — knoppen
   ========================================================================== */

.trekker {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	font-family: var(--plaat);
	font-size: 1.16rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 0.82rem 1.7rem;
	min-height: 48px;
	border: 2px solid transparent;
	background: none;
	cursor: pointer;
	transition: background-color 0.16s, color 0.16s, border-color 0.16s, transform 0.16s;
	line-height: 1.15;
	text-align: center;
}

.trekker--vuur {
	background: var(--sein);
	color: var(--staal-diep);
	border-color: var(--sein);
}

.trekker--vuur:hover,
.trekker--vuur:focus-visible {
	background: var(--sein-diep);
	border-color: var(--sein-diep);
	color: var(--staal-diep);
	transform: translateY(-2px);
}

.trekker--kalm {
	border-color: var(--rand-scherp);
	color: var(--krijt);
}

.trekker--kalm:hover,
.trekker--kalm:focus-visible {
	border-color: var(--sein);
	color: var(--sein);
	background: rgba(242, 178, 41, 0.08);
}

/* Alleen de maat; de kleur komt van --vuur of --kalm ernaast. */
.trekker--klein {
	font-size: 1rem;
	padding: 0.55rem 1.1rem;
	min-height: 40px;
}

.trekker[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
	transform: none;
}

.trekkerrij {
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem;
	align-items: center;
}

/* Pijlschakel in een kaart, met de tekst als anker. */
.wijsheen {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-family: var(--plaat);
	font-size: 1.02rem;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--sein);
	text-decoration: none;
	min-height: 40px;
	padding: 0.5rem 0;
}

.wijsheen::after {
	content: '→';
	transition: transform 0.16s;
}

.wijsheen:hover::after,
.wijsheen:focus-visible::after {
	transform: translateX(5px);
}

/* ==========================================================================
   7. Radiotoren — de kop van de site
   ========================================================================== */

.radiotoren {
	position: sticky;
	top: 0;
	z-index: 90;
	background: rgba(15, 19, 23, 0.96);
	border-bottom: 1px solid var(--rand);
	backdrop-filter: blur(8px);
}

.radiotoren__binnen {
	max-width: var(--breed);
	margin: 0 auto;
	padding: 0 1.5rem;
	min-height: var(--toren);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
}

.radiotoren__merk {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	text-decoration: none;
	flex: none;
	min-height: 44px;
}

.radiotoren__merk svg {
	flex: none;
	display: block;
}

.radiotoren__naam {
	font-family: var(--plaat);
	font-size: 1.62rem;
	letter-spacing: 0.06em;
	color: var(--krijt);
	line-height: 1;
	text-transform: uppercase;
}

.radiotoren__naam span {
	color: var(--sein);
}

.radiotoren__roep {
	display: block;
	font-family: var(--lijf);
	font-size: 0.66rem;
	letter-spacing: 0.2em;
	color: var(--krijt-stil);
	text-transform: uppercase;
	margin-top: 0.28rem;
}

.frequentielijst {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	list-style: none;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
	justify-content: flex-end;
}

.frequentielijst a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0.42rem 0.62rem;
	font-size: 0.93rem;
	font-weight: 600;
	color: var(--krijt);
	text-decoration: none;
	border-bottom: 2px solid transparent;
}

.frequentielijst a:hover,
.frequentielijst a:focus-visible {
	color: var(--sein);
	border-bottom-color: var(--sein);
}

.frequentielijst .current-menu-item > a,
.frequentielijst .current_page_item > a {
	color: var(--sein);
	border-bottom-color: var(--sein-diep);
}

.frequentielijst ul {
	display: none;
}

.zendknop {
	display: none;
	align-items: center;
	gap: 0.5rem;
	background: none;
	border: 1px solid var(--rand-scherp);
	color: var(--krijt);
	font-family: var(--plaat);
	font-size: 1rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 0.5rem 0.85rem;
	min-height: 44px;
	cursor: pointer;
}

.zendknop__balkjes {
	display: inline-flex;
	flex-direction: column;
	gap: 3px;
	width: 18px;
}

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

.zendknop[aria-expanded='true'] {
	border-color: var(--sein);
	color: var(--sein);
}

/* ==========================================================================
   8. Inslag — het eerste scherm
   ========================================================================== */

.inslag {
	position: relative;
	padding: clamp(4rem, 9vw, 8rem) 0 clamp(3.5rem, 7vw, 6rem);
	background-color: var(--staal-diep);
	background-image: linear-gradient(180deg, rgba(15, 19, 23, 0.5) 0%, rgba(15, 19, 23, 0.82) 55%, var(--staal) 100%),
		url('images/kop-dorp.jpg');
	background-size: cover;
	background-position: center 42%;
	overflow: hidden;
}

.inslag__raster {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: end;
}

.inslag h1 {
	margin-bottom: 0.5em;
	text-shadow: 0 4px 26px rgba(0, 0, 0, 0.65);
}

.inslag h1 em {
	font-style: normal;
	color: var(--sein);
	display: block;
}

.inslag__tekst {
	font-size: 1.2rem;
	color: var(--krijt);
	max-width: 46ch;
	margin-bottom: 2rem;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
}

.inslag__kaartje {
	border: 1px solid var(--rand-scherp);
	background: rgba(15, 19, 23, 0.9);
	padding: 1.5rem;
}

.inslag__kaartje h2 {
	font-size: 1.35rem;
	margin-bottom: 0.9rem;
}

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

.inslag__kaartje li {
	display: flex;
	gap: 0.75rem;
	padding: 0.6rem 0;
	border-bottom: 1px dashed var(--rand);
	font-size: 0.97rem;
	color: var(--krijt-stil);
	margin: 0;
}

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

.inslag__kaartje b {
	color: var(--sein);
	font-family: var(--plaat);
	font-size: 1.1rem;
	letter-spacing: 0.04em;
	flex: none;
	min-width: 3.6rem;
}

/* ==========================================================================
   9. Telstrook — de cijferband
   ========================================================================== */

.telstrook {
	position: relative;
	background-color: var(--paneel);
	background-image: linear-gradient(90deg, rgba(29, 36, 43, 0.97) 0%, rgba(29, 36, 43, 0.78) 60%, rgba(29, 36, 43, 0.95) 100%),
		url('images/vliegveld.jpg');
	background-size: cover;
	background-position: center;
	border-top: 1px solid var(--rand);
	border-bottom: 1px solid var(--rand);
	padding: 2.6rem 0;
}

.telstrook__raster {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.6rem;
}

.telstrook__vak {
	text-align: center;
	padding: 0 0.6rem;
	border-left: 1px solid var(--rand-scherp);
}

.telstrook__vak:first-child {
	border-left: 0;
}

.telstrook__getal {
	display: block;
	font-family: var(--plaat);
	font-size: clamp(2.3rem, 4.4vw, 3.4rem);
	line-height: 1;
	color: var(--sein);
}

.telstrook__woord {
	display: block;
	font-size: 0.86rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--krijt-stil);
	margin-top: 0.5rem;
}

/* ==========================================================================
   10. Werktuig — de omhulling van elk hulpmiddel
   ========================================================================== */

.werktuig {
	border: 1px solid var(--rand-scherp);
	background: var(--paneel);
}

.werktuig__kop {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.9rem;
	padding: 1.15rem 1.5rem;
	background: var(--staal-diep);
	border-bottom: 1px solid var(--rand-scherp);
}

.werktuig__kop h3 {
	margin: 0;
}

.werktuig__hint {
	font-size: 0.9rem;
	color: var(--krijt-stil);
	margin: 0;
}

.werktuig__lijf {
	padding: 1.6rem 1.5rem;
}

/* --- Zonekiezer: eiland met knopen ------------------------------------- */

.zonekiezer {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: 1.8rem;
}

.zonekiezer__kaart {
	position: relative;
	border: 1px solid var(--rand);
	background: var(--staal-diep);
	aspect-ratio: 4 / 3;
}

.zonekiezer__kaart svg {
	width: 100%;
	height: 100%;
	display: block;
}

.zonekiezer__knoop {
	cursor: pointer;
}

.zonekiezer__knoop circle {
	transition: r 0.15s, fill 0.15s, stroke 0.15s;
}

.zonekiezer__knoop text {
	font-family: var(--lijf);
	font-size: 11px;
	font-weight: 600;
	fill: var(--krijt);
	pointer-events: none;
}

.zonekiezer__knoop:hover circle,
.zonekiezer__knoop:focus-visible circle {
	fill: var(--lucht);
}

.zonekiezer__knoop[aria-pressed='true'] circle {
	fill: var(--sein);
	stroke: #fff;
}

.zonekiezer__knoop[aria-pressed='true'] text {
	fill: var(--sein);
}

.zonekiezer__blad {
	border: 1px solid var(--rand);
	background: var(--staal-diep);
	padding: 1.25rem;
	display: flex;
	flex-direction: column;
}

.zonekiezer__blad h4 {
	color: var(--sein);
	font-size: 1.45rem;
	margin-bottom: 0.35rem;
}

.zonekiezer__soort {
	font-size: 0.84rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--lucht);
	margin-bottom: 1rem;
}

.zonekiezer__meters {
	list-style: none;
	padding: 0;
	margin: 0 0 1.1rem;
}

.zonekiezer__meters li {
	margin-bottom: 0.75rem;
}

.zonekiezer__naamregel {
	display: flex;
	justify-content: space-between;
	font-size: 0.87rem;
	color: var(--krijt-stil);
	margin-bottom: 0.28rem;
}

.zonekiezer__naamregel b {
	color: var(--krijt);
	font-weight: 600;
}

/* Een span blijft zonder deze regel inline, en dan doet de hoogte niets: de
   balk is er dan wel in de opmaak maar je ziet hem niet. */
.zonekiezer__goot {
	display: block;
	height: 8px;
	background: var(--rand);
	overflow: hidden;
}

.zonekiezer__vulling {
	display: block;
	height: 100%;
	background: var(--sein);
	transition: width 0.4s;
}

.zonekiezer__vulling--lucht {
	background: var(--lucht);
}

.zonekiezer__vulling--roest {
	background: var(--roest);
}

.zonekiezer__vonnis {
	margin: 0 0 0.9rem;
	font-size: 0.98rem;
	color: var(--krijt);
	border-left: 3px solid var(--sein);
	padding-left: 0.85rem;
}

.zonekiezer__wegen {
	margin-top: auto;
	font-size: 0.88rem;
	color: var(--krijt-stil);
	border-top: 1px dashed var(--rand);
	padding-top: 0.8rem;
}

.zonekiezer__wegen b {
	color: var(--lucht);
	font-weight: 600;
}

/* --- Squadwever: drie lijsten naar een uitslag -------------------------- */

.wever__keuzes {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.2rem;
	margin-bottom: 1.6rem;
}

.wever__kolom h4 {
	color: var(--lucht);
	font-size: 1rem;
	letter-spacing: 0.1em;
	margin-bottom: 0.7rem;
}

.wever__lijst {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.wever__lijst li {
	margin: 0;
}

.wever__optie {
	display: block;
	width: 100%;
	text-align: left;
	background: var(--staal-diep);
	border: 1px solid var(--rand);
	color: var(--krijt);
	font-family: var(--lijf);
	font-size: 0.94rem;
	padding: 0.6rem 0.75rem;
	min-height: 40px;
	cursor: pointer;
	transition: border-color 0.14s, background-color 0.14s;
}

.wever__optie:hover,
.wever__optie:focus-visible {
	border-color: var(--lucht);
}

.wever__optie[aria-pressed='true'] {
	border-color: var(--sein);
	background: rgba(242, 178, 41, 0.12);
	color: var(--sein);
}

.wever__optie small {
	display: block;
	font-size: 0.79rem;
	color: var(--krijt-stil);
	margin-top: 0.15rem;
}

.wever__optie[aria-pressed='true'] small {
	color: var(--krijt-stil);
}

.wever__uitslag {
	border: 1px solid var(--rand-scherp);
	background: var(--staal-diep);
	padding: 1.25rem;
}

.wever__titel {
	font-family: var(--plaat);
	font-size: 1.6rem;
	text-transform: uppercase;
	color: var(--sein);
	margin: 0 0 0.5rem;
	line-height: 1.1;
}

.wever__cijfer {
	display: inline-flex;
	align-items: baseline;
	gap: 0.3rem;
	font-family: var(--plaat);
	font-size: 2.5rem;
	color: var(--krijt);
	line-height: 1;
	margin-bottom: 0.8rem;
}

.wever__cijfer span {
	font-family: var(--lijf);
	font-size: 0.85rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--krijt-stil);
}

.wever__punten {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 0.9rem;
	list-style: none;
	padding: 0;
	margin: 0.9rem 0 0;
}

.wever__punten li {
	margin: 0;
	font-size: 0.93rem;
	padding-left: 1.5rem;
	position: relative;
	color: var(--krijt);
}

.wever__punten li::before {
	content: '+';
	position: absolute;
	left: 0;
	top: -1px;
	font-family: var(--plaat);
	font-size: 1.25rem;
	color: var(--sein);
}

.wever__punten li.wever__zwak::before {
	content: '−';
	color: var(--roest-licht);
}

/* --- Ploegrooster: prioriteiten schuiven -------------------------------- */

.rooster {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
	gap: 1.8rem;
}

.rooster__lijst {
	list-style: none;
	padding: 0;
	margin: 0;
	counter-reset: staporde;
}

.rooster__regel {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	background: var(--staal-diep);
	border: 1px solid var(--rand);
	padding: 0.7rem 0.85rem;
	margin-bottom: 0.55rem;
}

.rooster__nummer {
	counter-increment: staporde;
	font-family: var(--plaat);
	font-size: 1.5rem;
	color: var(--sein);
	min-width: 1.6rem;
	text-align: center;
	line-height: 1;
	flex: none;
}

.rooster__nummer::before {
	content: counter(staporde);
}

.rooster__naam {
	flex: 1 1 auto;
	min-width: 0;
}

.rooster__naam b {
	display: block;
	font-weight: 600;
	color: var(--krijt);
	font-size: 0.98rem;
}

.rooster__naam small {
	display: block;
	font-size: 0.83rem;
	color: var(--krijt-stil);
	line-height: 1.45;
}

.rooster__schuif {
	display: flex;
	gap: 0.35rem;
	flex: none;
}

.rooster__pijl {
	width: 38px;
	height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--paneel);
	border: 1px solid var(--rand-scherp);
	color: var(--krijt);
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
	padding: 0;
}

.rooster__pijl:hover:not([disabled]),
.rooster__pijl:focus-visible:not([disabled]) {
	border-color: var(--sein);
	color: var(--sein);
}

.rooster__pijl[disabled] {
	opacity: 0.35;
	cursor: not-allowed;
}

.rooster__profiel {
	border: 1px solid var(--rand-scherp);
	background: var(--staal-diep);
	padding: 1.25rem;
	align-self: start;
}

.rooster__profiel h4 {
	color: var(--sein);
	margin-bottom: 1rem;
}

.rooster__schaal {
	margin-bottom: 1.1rem;
}

.rooster__schaal:last-of-type {
	margin-bottom: 1.4rem;
}

.rooster__schaalkop {
	display: flex;
	justify-content: space-between;
	font-size: 0.87rem;
	color: var(--krijt-stil);
	margin-bottom: 0.3rem;
}

.rooster__schaalkop b {
	color: var(--krijt);
	font-family: var(--plaat);
	font-size: 1.1rem;
	letter-spacing: 0.04em;
}

.rooster__goot {
	display: block;
	height: 10px;
	background: var(--rand);
	overflow: hidden;
}

.rooster__vulling {
	display: block;
	height: 100%;
	background: var(--lucht);
	transition: width 0.45s;
}

.rooster__vulling--sein {
	background: var(--sein);
}

.rooster__vulling--roest {
	background: var(--roest);
}

.rooster__oordeel {
	font-size: 0.95rem;
	color: var(--krijt);
	border-top: 1px dashed var(--rand);
	padding-top: 0.9rem;
	margin: 0;
}

/* --- Kaartproef: vijf vragen en een rang -------------------------------- */

.proef {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: 0;
	align-items: stretch;
}

.proef__beeld {
	position: relative;
	background-image: url('images/kaartproef.jpg');
	background-size: cover;
	background-position: center;
	min-height: 320px;
}

.proef__beeld::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(15, 19, 23, 0.25), rgba(29, 36, 43, 0.9));
}

.proef__vak {
	padding: 1.6rem 1.5rem;
	display: flex;
	flex-direction: column;
}

.proef__voortgang {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 1.1rem;
}

.proef__stip {
	width: 26px;
	height: 5px;
	background: var(--rand);
	display: block;
}

.proef__stip--nu {
	background: var(--sein);
}

.proef__stip--gehad {
	background: var(--lucht-diep);
}

.proef__teller {
	margin-left: auto;
	font-size: 0.85rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--krijt-stil);
}

.proef__vraag {
	font-family: var(--plaat);
	font-size: 1.5rem;
	line-height: 1.15;
	text-transform: uppercase;
	color: var(--krijt);
	margin: 0 0 1.1rem;
}

.proef__keuzes {
	list-style: none;
	padding: 0;
	margin: 0 0 1.1rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.proef__keuzes li {
	margin: 0;
}

.proef__keuze {
	display: block;
	width: 100%;
	text-align: left;
	background: var(--staal-diep);
	border: 1px solid var(--rand);
	color: var(--krijt);
	font-family: var(--lijf);
	font-size: 0.96rem;
	padding: 0.65rem 0.85rem;
	min-height: 42px;
	cursor: pointer;
}

.proef__keuze:hover:not([disabled]),
.proef__keuze:focus-visible:not([disabled]) {
	border-color: var(--lucht);
}

.proef__keuze--goed {
	border-color: var(--sein);
	background: rgba(242, 178, 41, 0.14);
	color: var(--sein);
}

.proef__keuze--mis {
	border-color: var(--roest);
	background: rgba(181, 86, 58, 0.16);
	color: var(--roest-licht);
}

.proef__keuze[disabled] {
	cursor: default;
}

.proef__uitleg {
	font-size: 0.95rem;
	color: var(--krijt-stil);
	border-left: 3px solid var(--lucht);
	padding-left: 0.85rem;
	margin: 0 0 1.1rem;
}

.proef__slot {
	margin-top: auto;
}

.proef__rang {
	font-family: var(--plaat);
	font-size: 2rem;
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--sein);
	margin: 0 0 0.4rem;
}

/* ==========================================================================
   11. Kaarten: kist, zonekaart, ledenkaart
   ========================================================================== */

.kistenraster {
	display: grid;
	gap: 1.4rem;
}

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

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

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

.kist {
	border: 1px solid var(--rand);
	background: var(--paneel);
	padding: 1.4rem;
	display: flex;
	flex-direction: column;
}

.kist--diep {
	background: var(--staal-diep);
}

.kist h3 {
	font-size: 1.4rem;
}

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

.kist__nummer {
	font-family: var(--plaat);
	font-size: 2.4rem;
	line-height: 1;
	color: var(--sein);
	display: block;
	margin-bottom: 0.7rem;
}

.kist__staart {
	margin-top: auto;
	padding-top: 1rem;
}

/* Zonekaart: beeld met een nummer in de hoek. */
.zonekaart {
	border: 1px solid var(--rand);
	background: var(--paneel);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.zonekaart__beeld {
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
}

.zonekaart__beeld img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s;
}

.zonekaart:hover .zonekaart__beeld img {
	transform: scale(1.04);
}

.zonekaart__hoek {
	position: absolute;
	left: 0;
	bottom: 0;
	background: var(--sein);
	color: var(--staal-diep);
	font-family: var(--plaat);
	font-size: 1.35rem;
	line-height: 1;
	padding: 0.4rem 0.7rem;
	letter-spacing: 0.04em;
}

.zonekaart__lijf {
	padding: 1.25rem;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.zonekaart__lijf h3 {
	font-size: 1.35rem;
	margin-bottom: 0.5rem;
}

.zonekaart__cijfers {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-bottom: 0.85rem;
}

.zonekaart__lijf p {
	color: var(--krijt-stil);
	font-size: 0.97rem;
}

.zonekaart__lijf .wijsheen {
	margin-top: auto;
}

/* Ledenkaart: portret naast de tekst, om en om gespiegeld. */
.ledenkaart {
	display: grid;
	grid-template-columns: 132px minmax(0, 1fr);
	gap: 1.2rem;
	border: 1px solid var(--rand);
	background: var(--staal-diep);
	padding: 1.2rem;
	align-items: start;
}

.ledenkaart--gespiegeld {
	grid-template-columns: minmax(0, 1fr) 132px;
}

.ledenkaart--gespiegeld .ledenkaart__portret {
	order: 2;
}

.ledenkaart__portret {
	border: 1px solid var(--rand-scherp);
	overflow: hidden;
	aspect-ratio: 4 / 5;
}

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

.ledenkaart__rol {
	font-size: 0.82rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--lucht);
	margin-bottom: 0.3rem;
}

.ledenkaart h3 {
	font-size: 1.3rem;
	margin-bottom: 0.55rem;
}

.ledenkaart p {
	font-size: 0.95rem;
	color: var(--krijt-stil);
	margin-bottom: 0.7rem;
}

.ledenkaart__sinds {
	font-size: 0.84rem;
	color: var(--krijt-stil);
	border-top: 1px dashed var(--rand);
	padding-top: 0.6rem;
	margin: 0;
}

.ledenkaart__sinds b {
	color: var(--sein);
	font-weight: 600;
}

/* ==========================================================================
   12. Gesprek — verslagen als bellen in een spraakkanaal
   ========================================================================== */

.gesprek {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	max-width: 900px;
	margin: 0 auto;
}

.bubbel {
	display: grid;
	grid-template-columns: 52px minmax(0, 1fr);
	gap: 1rem;
	align-items: start;
	max-width: 82%;
}

.bubbel--rechts {
	grid-template-columns: minmax(0, 1fr) 52px;
	margin-left: auto;
	text-align: right;
}

.bubbel--rechts .bubbel__teken {
	order: 2;
}

.bubbel__teken {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--paneel-hoog);
	border: 2px solid var(--sein-diep);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--plaat);
	font-size: 1.4rem;
	color: var(--sein);
	line-height: 1;
	flex: none;
}

.bubbel--rechts .bubbel__teken {
	border-color: var(--lucht-diep);
	color: var(--lucht);
}

.bubbel__lijf {
	position: relative;
	background: var(--paneel);
	border: 1px solid var(--rand);
	padding: 1rem 1.2rem;
}

.bubbel__mond {
	position: absolute;
	top: 16px;
	left: -7px;
	width: 12px;
	height: 12px;
	background: var(--paneel);
	border-left: 1px solid var(--rand);
	border-bottom: 1px solid var(--rand);
	transform: rotate(45deg);
}

.bubbel--rechts .bubbel__mond {
	left: auto;
	right: -7px;
	border-left: 0;
	border-bottom: 0;
	border-right: 1px solid var(--rand);
	border-top: 1px solid var(--rand);
}

.bubbel__naam {
	font-family: var(--plaat);
	font-size: 1.16rem;
	letter-spacing: 0.05em;
	color: var(--krijt);
	margin: 0 0 0.35rem;
	text-transform: uppercase;
}

.bubbel__tekst {
	margin: 0;
	font-size: 0.99rem;
	color: var(--krijt);
}

.bubbel__voet {
	margin: 0.6rem 0 0;
	font-size: 0.82rem;
	letter-spacing: 0.06em;
	color: var(--krijt-stil);
	text-transform: uppercase;
}

/* Verslagen op de eigen pagina: dezelfde bel, maar met een zeef erboven. */
.zeefrij {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 2.2rem;
	align-items: center;
}

.zeefrij__woord {
	font-size: 0.85rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--krijt-stil);
	margin-right: 0.4rem;
}

.zeef {
	background: var(--staal-diep);
	border: 1px solid var(--rand);
	color: var(--krijt);
	font-family: var(--lijf);
	font-size: 0.9rem;
	padding: 0.45rem 0.85rem;
	min-height: 38px;
	cursor: pointer;
}

.zeef[aria-pressed='true'] {
	border-color: var(--sein);
	color: var(--sein);
	background: rgba(242, 178, 41, 0.1);
}

/* ==========================================================================
   13. Tijdlijn — het journaal
   ========================================================================== */

.tijdlijn {
	position: relative;
	list-style: none;
	padding: 0 0 0 2.4rem;
	margin: 0;
}

.tijdlijn::before {
	content: '';
	position: absolute;
	left: 7px;
	top: 6px;
	bottom: 6px;
	width: 2px;
	background: var(--rand-scherp);
}

.tijdlijn__punt {
	position: relative;
	margin-bottom: 2.2rem;
}

.tijdlijn__punt:last-child {
	margin-bottom: 0;
}

.tijdlijn__knoop {
	position: absolute;
	left: -2.4rem;
	top: 4px;
	width: 16px;
	height: 16px;
	background: var(--staal);
	border: 3px solid var(--sein);
	border-radius: 50%;
}

.tijdlijn__datum {
	display: block;
	font-family: var(--plaat);
	font-size: 1.05rem;
	letter-spacing: 0.12em;
	color: var(--lucht);
	text-transform: uppercase;
	margin-bottom: 0.3rem;
}

/* Op de lijstpagina staat de datum onder de tekst in plaats van erboven. */
.tijdlijn__datum--onder {
	margin-bottom: 0;
	margin-top: 0.5rem;
	color: var(--krijt-stil);
	letter-spacing: 0.09em;
	font-size: 0.94rem;
}

.tijdlijn__punt h3 {
	font-size: 1.5rem;
	margin-bottom: 0.5rem;
}

.tijdlijn__punt h3 a {
	color: var(--krijt);
	text-decoration: none;
	display: inline-block;
	min-height: 38px;
}

.tijdlijn__punt h3 a:hover,
.tijdlijn__punt h3 a:focus-visible {
	color: var(--sein);
}

.tijdlijn__punt p {
	color: var(--krijt-stil);
	margin-bottom: 0.7rem;
}

/* ==========================================================================
   14. Formulieren: zender (contact) en inzending (verslag)
   ========================================================================== */

.zender,
.inzending {
	border: 1px solid var(--rand-scherp);
	background: var(--paneel);
	padding: 1.6rem;
}

.zender__rij,
.inzending__rij {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
	margin-bottom: 1rem;
}

.veld {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin-bottom: 1rem;
}

.veld > span,
.veld > label {
	font-size: 0.85rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--krijt-stil);
}

.veld input[type='text'],
.veld input[type='email'],
.veld select,
.veld textarea {
	width: 100%;
	background: var(--staal-diep);
	border: 1px solid var(--rand-scherp);
	color: var(--krijt);
	font-family: var(--lijf);
	font-size: 1rem;
	padding: 0.7rem 0.85rem;
	min-height: 46px;
}

.veld textarea {
	min-height: 140px;
	resize: vertical;
	line-height: 1.6;
}

.veld input:focus,
.veld select:focus,
.veld textarea:focus {
	border-color: var(--sein);
	outline: 2px solid rgba(242, 178, 41, 0.35);
	outline-offset: 0;
}

.veld--vol {
	grid-column: 1 / -1;
}

/* Sterren: de radiobuttons zelf blijven bereikbaar maar onzichtbaar. */
.sterrij {
	display: flex;
	gap: 0.35rem;
	align-items: center;
	flex-wrap: wrap;
}

.sterrij input[type='radio'] {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
	pointer-events: none;
}

.sterrij label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	min-height: 42px;
	border: 1px solid var(--rand-scherp);
	background: var(--staal-diep);
	color: var(--krijt-stil);
	font-family: var(--plaat);
	font-size: 1.2rem;
	cursor: pointer;
	letter-spacing: 0;
	text-transform: none;
}

.sterrij input[type='radio']:checked + label {
	border-color: var(--sein);
	color: var(--sein);
	background: rgba(242, 178, 41, 0.12);
}

.sterrij input[type='radio']:focus-visible + label {
	outline: 3px solid var(--sein);
	outline-offset: 2px;
}

/* Honingpot: onzichtbaar voor mensen, wel aanwezig voor robots. */
.honingpot {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

.honingpot input,
.honingpot label {
	width: 1px !important;
	height: 1px !important;
	min-height: 1px !important;
	padding: 0 !important;
	border: 0 !important;
	pointer-events: none !important;
}

.omroep {
	border: 1px solid var(--rand-scherp);
	border-left: 4px solid var(--sein);
	background: var(--staal-diep);
	padding: 1rem 1.2rem;
	margin-bottom: 1.6rem;
	font-size: 0.99rem;
}

.omroep--fout {
	border-left-color: var(--roest);
	color: var(--roest-licht);
}

.omroep p {
	margin: 0;
}

.kleinelettertjes {
	font-size: 0.85rem;
	color: var(--krijt-stil);
	margin: 1rem 0 0;
}

/* ==========================================================================
   15. Paginakop en losse blokken
   ========================================================================== */

.paginakop {
	position: relative;
	padding: clamp(3rem, 6vw, 5rem) 0 clamp(2.2rem, 4vw, 3.4rem);
	background-color: var(--staal-diep);
	background-image: linear-gradient(180deg, rgba(15, 19, 23, 0.72), rgba(21, 26, 31, 0.95)),
		url('images/beton.jpg');
	background-size: cover;
	background-position: center;
	border-bottom: 1px solid var(--rand);
}

.paginakop h1 {
	margin-bottom: 0.35em;
}

.paginakop p {
	max-width: 62ch;
	color: var(--krijt-stil);
	font-size: 1.1rem;
	margin-bottom: 0;
}

.paginakop--prikbord {
	background-image: linear-gradient(180deg, rgba(15, 19, 23, 0.66), rgba(21, 26, 31, 0.94)),
		url('images/prikbord.jpg');
}

.paginakop--radio {
	background-image: linear-gradient(180deg, rgba(15, 19, 23, 0.62), rgba(21, 26, 31, 0.93)),
		url('images/radiotafel.jpg');
}

.paginakop--avond {
	background-image: linear-gradient(180deg, rgba(15, 19, 23, 0.6), rgba(21, 26, 31, 0.93)),
		url('images/avondrooster.jpg');
}

.paginakop--journaal {
	background-image: linear-gradient(180deg, rgba(15, 19, 23, 0.66), rgba(21, 26, 31, 0.94)),
		url('images/journaal.jpg');
}

/* Beeld naast tekst; per sectie wisselt de kant. */
.duobank {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1.8rem, 4vw, 3.4rem);
	align-items: center;
}

.duobank__beeld img {
	width: 100%;
	border: 1px solid var(--rand-scherp);
}

.duobank--omgekeerd .duobank__beeld {
	order: 2;
}

.duobank__tekst h2 {
	margin-bottom: 0.7em;
}

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

/* Volle band met beeld en een korte oproep. */
.oproep {
	position: relative;
	padding: clamp(3rem, 6vw, 5rem) 0;
	background-color: var(--staal-diep);
	background-image: linear-gradient(90deg, rgba(15, 19, 23, 0.92) 0%, rgba(15, 19, 23, 0.55) 100%),
		url('images/bevoorrading.jpg');
	background-size: cover;
	background-position: center 60%;
	border-top: 1px solid var(--rand);
	border-bottom: 1px solid var(--rand);
}

.oproep__binnen {
	max-width: 60ch;
}

.oproep h2 {
	margin-bottom: 0.5em;
}

.oproep p {
	font-size: 1.14rem;
	color: var(--krijt);
	margin-bottom: 1.6rem;
}

/* Stille vraag-en-antwoordrijen. */
.vraagblok {
	border-top: 1px solid var(--rand);
}

.vraagblok__paar {
	border-bottom: 1px solid var(--rand);
	padding: 1.4rem 0;
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: 1.5rem;
}

.vraagblok__paar h3 {
	font-size: 1.2rem;
	margin: 0;
	color: var(--krijt);
}

.vraagblok__paar p {
	margin: 0;
	color: var(--krijt-stil);
}

/* Huisregels: genummerde regels met een strook ernaast. */
.regelrij {
	display: grid;
	grid-template-columns: 68px minmax(0, 1fr);
	gap: 1.3rem;
	padding: 1.4rem 0;
	border-bottom: 1px solid var(--rand);
	align-items: start;
}

.regelrij:first-child {
	border-top: 1px solid var(--rand);
}

.regelrij__cijfer {
	font-family: var(--plaat);
	font-size: 2.1rem;
	line-height: 1;
	color: var(--sein);
	text-align: right;
}

.regelrij h3 {
	font-size: 1.25rem;
	margin-bottom: 0.4rem;
}

.regelrij p {
	margin: 0;
	color: var(--krijt-stil);
}

/* Avonden: strook met datum links en een beschrijving rechts. */
.avondlijst {
	list-style: none;
	padding: 0;
	margin: 0;
}

.avond {
	display: grid;
	grid-template-columns: 128px minmax(0, 1fr) auto;
	gap: 1.4rem;
	align-items: center;
	border: 1px solid var(--rand);
	background: var(--paneel);
	padding: 1.1rem 1.3rem;
	margin-bottom: 0.9rem;
}

.avond__wanneer {
	text-align: center;
	border-right: 1px solid var(--rand-scherp);
	padding-right: 1.2rem;
}

.avond__dag {
	display: block;
	font-family: var(--plaat);
	font-size: 2.1rem;
	line-height: 1;
	color: var(--sein);
}

.avond__maand {
	display: block;
	font-size: 0.8rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--krijt-stil);
	margin-top: 0.25rem;
}

.avond__wat h3 {
	font-size: 1.28rem;
	margin-bottom: 0.35rem;
}

.avond__wat p {
	margin: 0;
	color: var(--krijt-stil);
	font-size: 0.95rem;
}

.avond__tijd {
	font-family: var(--plaat);
	font-size: 1.3rem;
	color: var(--lucht);
	letter-spacing: 0.04em;
	white-space: nowrap;
}

/* Gegevensrijen op de contactpagina. */
.gegevenlijst {
	list-style: none;
	padding: 0;
	margin: 0;
}

.gegevenlijst li {
	display: grid;
	grid-template-columns: 132px minmax(0, 1fr);
	gap: 1rem;
	padding: 0.8rem 0;
	border-bottom: 1px solid var(--rand);
	margin: 0;
}

.gegevenlijst span {
	font-size: 0.84rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--krijt-stil);
	padding-top: 0.15rem;
}

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

/* Losse tekstpagina's (recht, voorwaarden, cookies). */
.wetstekst h2 {
	margin-top: 2.6rem;
	font-size: 1.75rem;
}

.wetstekst h2:first-child {
	margin-top: 0;
}

.wetstekst h3 {
	margin-top: 1.8rem;
	font-size: 1.25rem;
}

/* Een tabel met vijf kolommen past niet op een telefoon. In plaats van de site
   breder te maken dan het scherm, schuift de tabel binnen zijn eigen kader. */
.tabelrol {
	margin: 1.4rem 0 2rem;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--rand);
}

.tabelrol table {
	margin: 0;
	min-width: 560px;
}

.tabelrol th:first-child,
.tabelrol td:first-child {
	border-left: 0;
}

.wetstekst table {
	margin: 1.4rem 0 2rem;
	font-size: 0.95rem;
}

.wetstekst th,
.wetstekst td {
	text-align: left;
	padding: 0.7rem 0.8rem;
	border: 1px solid var(--rand);
	vertical-align: top;
}

.wetstekst th {
	background: var(--paneel);
	font-family: var(--plaat);
	font-size: 1.02rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-weight: 400;
	color: var(--krijt);
}

.wetstekst td {
	color: var(--krijt-stil);
}

/* ==========================================================================
   16. Bevoorrading — de voet van de site
   ========================================================================== */

.bevoorrading {
	background: var(--staal-diep);
	border-top: 1px solid var(--rand);
	padding: clamp(2.8rem, 5vw, 4rem) 0 1.6rem;
}

.bevoorrading__raster {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
	gap: 2rem;
	margin-bottom: 2.4rem;
}

.bevoorrading__merk {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	text-decoration: none;
	margin-bottom: 1rem;
	min-height: 44px;
}

.bevoorrading__merk .radiotoren__naam {
	font-size: 1.45rem;
}

.bevoorrading__over {
	color: var(--krijt-stil);
	font-size: 0.95rem;
	max-width: 40ch;
}

.bevoorrading h2 {
	font-size: 1.12rem;
	letter-spacing: 0.1em;
	color: var(--krijt);
	margin-bottom: 1rem;
}

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

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

.bevoorrading li a,
.bevoorrading__gegevens a {
	display: inline-flex;
	align-items: center;
	min-height: 38px;
	color: var(--krijt-stil);
	text-decoration: none;
	font-size: 0.95rem;
}

.bevoorrading li a:hover,
.bevoorrading li a:focus-visible,
.bevoorrading__gegevens a:hover,
.bevoorrading__gegevens a:focus-visible {
	color: var(--sein);
}

.bevoorrading__gegevens {
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: 0.95rem;
	color: var(--krijt-stil);
}

.bevoorrading__slot {
	border-top: 1px solid var(--rand);
	padding-top: 1.4rem;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2rem;
	justify-content: space-between;
	align-items: flex-start;
	font-size: 0.87rem;
	color: var(--krijt-stil);
}

.bevoorrading__slot p {
	margin: 0;
	max-width: 78ch;
}

/* De verklaring dat dit geen officiele site is — staat op elke pagina. */
.geenverband {
	border: 1px dashed var(--rand-scherp);
	padding: 0.9rem 1.1rem;
	margin-bottom: 1.4rem;
	font-size: 0.86rem;
	color: var(--krijt-stil);
	line-height: 1.62;
}

.geenverband b {
	color: var(--krijt);
	font-weight: 600;
}

/* ==========================================================================
   17. Koekstrip — de mededeling onderaan het scherm
   ========================================================================== */

.koekstrip {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 95;
	background: var(--staal-diep);
	border-top: 2px solid var(--sein);
	padding: 1rem 0;
	display: none;
}

.koekstrip[data-open='ja'] {
	display: block;
}

.koekstrip__binnen {
	max-width: var(--breed);
	margin: 0 auto;
	padding: 0 1.5rem;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 1.6rem;
	align-items: center;
	justify-content: space-between;
}

.koekstrip p {
	margin: 0;
	font-size: 0.93rem;
	color: var(--krijt-stil);
	max-width: 74ch;
}

.koekstrip__knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem;
	flex: none;
}

/* ==========================================================================
   18. Zoekgeraakt — 404
   ========================================================================== */

.zoekgeraakt {
	padding: clamp(4rem, 9vw, 7rem) 0;
	text-align: center;
}

.zoekgeraakt__cijfer {
	font-family: var(--plaat);
	font-size: clamp(5.5rem, 20vw, 12rem);
	line-height: 0.9;
	color: var(--sein);
	margin: 0 0 0.6rem;
	letter-spacing: 0.04em;
}

/* De algemene alinearegel hierboven is sterker dan de klasse van het cijfer,
   dus die uitzondering staat er met opzet in. */
.zoekgeraakt p:not(.zoekgeraakt__cijfer) {
	color: var(--krijt-stil);
	max-width: 56ch;
	margin-left: auto;
	margin-right: auto;
	font-size: 1.1rem;
}

.zoekgeraakt__wegen {
	list-style: none;
	padding: 0;
	margin: 2.4rem auto 0;
	max-width: 520px;
	text-align: left;
	border-top: 1px solid var(--rand);
}

.zoekgeraakt__wegen li {
	border-bottom: 1px solid var(--rand);
	margin: 0;
}

.zoekgeraakt__wegen a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 52px;
	padding: 0.7rem 0.2rem;
	text-decoration: none;
	color: var(--krijt);
	font-weight: 600;
}

.zoekgeraakt__wegen a:hover,
.zoekgeraakt__wegen a:focus-visible {
	color: var(--sein);
}

/* ==========================================================================
   19. Duik — blokken die bij het scrollen opkomen
   ========================================================================== */

/* De klasse js komt van een klein script in de kop. Zonder javascript blijft
   alles dus gewoon staan in plaats van onzichtbaar te zijn. */
html.js .duik {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.55s ease-out, transform 0.55s ease-out;
}

html.js .duik--geland {
	opacity: 1;
	transform: none;
}

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

	html.js .duik {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.trekker,
	.zonekaart__beeld img,
	.wijsheen::after {
		transition: none;
	}
}

/* ==========================================================================
   20. Smallere schermen
   ========================================================================== */

@media (max-width: 1080px) {
	.inslag__raster {
		grid-template-columns: 1fr;
		gap: 2.4rem;
	}

	.zonekiezer,
	.rooster,
	.proef {
		grid-template-columns: 1fr;
	}

	.proef__beeld {
		min-height: 200px;
	}

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

	.bevoorrading__raster {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.8rem;
	}
}

@media (max-width: 900px) {
	:root {
		--toren: 66px;
	}

	/* De navigatie gaat uit de rij staan, anders duwt hij de kop breder dan
	   het scherm ook al is de lijst zelf dichtgeklapt. */
	.radiotoren__navigatie {
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
	}

	/* Op smalle schermen is de knop naar de contactpagina overbodig: die
	   pagina staat in het uitklapmenu en op het eerste scherm. */
	.radiotoren__binnen > .trekker {
		display: none;
	}

	.frequentielijst {
		display: none;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		background: var(--staal-diep);
		border-bottom: 1px solid var(--rand);
		border-top: 1px solid var(--rand);
		padding: 0.6rem 1.5rem 1.2rem;
		max-height: calc(100vh - var(--toren));
		overflow-y: auto;
	}

	.frequentielijst[data-open='ja'] {
		display: flex;
	}

	.frequentielijst li {
		margin: 0;
		border-bottom: 1px solid var(--rand);
	}

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

	.frequentielijst a {
		min-height: 48px;
		padding: 0.7rem 0;
		font-size: 1rem;
		border-bottom: 0;
		width: 100%;
	}

	.frequentielijst a:hover,
	.frequentielijst a:focus-visible {
		border-bottom-color: transparent;
	}

	.zendknop {
		display: inline-flex;
	}

	.radiotoren {
		position: sticky;
	}

	.radiotoren__binnen {
		position: relative;
	}

	.telstrook__raster {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.4rem 1rem;
	}

	.telstrook__vak:nth-child(3) {
		border-left: 0;
	}

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

	.wever__keuzes {
		grid-template-columns: 1fr;
		gap: 1.4rem;
	}

	.duobank,
	.duobank--omgekeerd {
		grid-template-columns: 1fr;
	}

	.duobank--omgekeerd .duobank__beeld {
		order: 0;
	}

	.vraagblok__paar {
		grid-template-columns: 1fr;
		gap: 0.5rem;
	}

	.avond {
		grid-template-columns: 96px minmax(0, 1fr);
		gap: 1rem;
	}

	.avond__tijd {
		grid-column: 2;
	}

	.bubbel {
		max-width: 100%;
	}
}

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

	.gebied {
		padding: 0 1.1rem;
	}

	.radiotoren__binnen {
		padding: 0 1.1rem;
		gap: 0.8rem;
	}

	.radiotoren__naam {
		font-size: 1.36rem;
	}

	/* De ondertitel is met zijn letterafstand breder dan de naam zelf en duwt
	   de kop op een telefoon uit elkaar. */
	.radiotoren__roep {
		display: none;
	}

	.frequentielijst {
		padding: 0.6rem 1.1rem 1.2rem;
	}

	/* Losse verwijzingen in kleine lettertjes zijn anders 15px hoog. */
	.kleinelettertjes a,
	.wetstekst p a {
		display: inline-block;
		min-height: 40px;
		padding: 0.45rem 0;
	}

	.koekstrip__binnen {
		padding: 0 1.1rem;
	}

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

	.kistenraster--drie,
	.kistenraster--twee,
	.kistenraster--vier {
		grid-template-columns: 1fr;
	}

	.zender__rij,
	.inzending__rij {
		grid-template-columns: 1fr;
	}

	.ledenkaart,
	.ledenkaart--gespiegeld {
		grid-template-columns: 104px minmax(0, 1fr);
	}

	.ledenkaart--gespiegeld .ledenkaart__portret {
		order: 0;
	}

	.regelrij {
		grid-template-columns: 46px minmax(0, 1fr);
		gap: 0.9rem;
	}

	.regelrij__cijfer {
		font-size: 1.7rem;
	}

	.avond {
		grid-template-columns: 1fr;
	}

	.avond__wanneer {
		display: flex;
		align-items: baseline;
		gap: 0.6rem;
		text-align: left;
		border-right: 0;
		border-bottom: 1px solid var(--rand-scherp);
		padding: 0 0 0.7rem;
	}

	.avond__maand {
		margin-top: 0;
	}

	.avond__tijd {
		grid-column: 1;
	}

	.gegevenlijst li {
		grid-template-columns: 1fr;
		gap: 0.2rem;
	}

	.bevoorrading__raster {
		grid-template-columns: 1fr;
	}

	.werktuig__lijf,
	.proef__vak {
		padding: 1.2rem 1.1rem;
	}

	.werktuig__kop {
		padding: 1rem 1.1rem;
	}

	.rooster__regel {
		flex-wrap: wrap;
	}

	.rooster__naam {
		flex-basis: calc(100% - 3.4rem);
	}

	.rooster__schuif {
		margin-left: auto;
	}

	.rooster__pijl {
		width: 44px;
		height: 44px;
	}

	.tijdlijn {
		padding-left: 1.9rem;
	}

	.tijdlijn__knoop {
		left: -1.9rem;
	}

	/* Grote raakvlakken voor een vinger. */
	.wijsheen,
	.frequentielijst a,
	.bevoorrading li a,
	.bevoorrading__gegevens a,
	.gegevenlijst a,
	.tijdlijn__punt h3 a {
		min-height: 44px;
	}

	.zeef {
		min-height: 42px;
		padding: 0.55rem 0.9rem;
	}

	.trekker {
		width: 100%;
	}

	.trekker--klein,
	.trekkerrij--los .trekker {
		width: auto;
	}

	.koekstrip__knoppen {
		width: 100%;
	}

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

@media (max-width: 420px) {
	.telstrook__vak {
		padding: 0 0.2rem;
	}

	.bubbel,
	.bubbel--rechts {
		grid-template-columns: 42px minmax(0, 1fr);
		gap: 0.7rem;
	}

	.bubbel--rechts {
		text-align: left;
	}

	.bubbel--rechts .bubbel__teken {
		order: 0;
	}

	.bubbel--rechts .bubbel__mond {
		left: -7px;
		right: auto;
		border-left: 1px solid var(--rand);
		border-bottom: 1px solid var(--rand);
		border-right: 0;
		border-top: 0;
	}

	.bubbel__teken {
		width: 42px;
		height: 42px;
		font-size: 1.15rem;
	}
}

/* ==========================================================================
   21. Afdrukken
   ========================================================================== */

@media print {
	.radiotoren,
	.koekstrip,
	.zendknop,
	.oproep,
	.werktuig {
		display: none !important;
	}

	body {
		background: #fff;
		color: #000;
	}
}