/*
Theme Name: Frostpunnkk
Theme URI: https://frostpunnkk.org/
Author: Frostpunnkk Gids
Author URI: https://frostpunnkk.org/
Description: Nederlandstalige gids voor het spel Frostpunk, met nadruk op spelen op PlayStation 5. Onofficiele fansite, 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: frostpunnkk
Tags: gaming, guide, dark, one-column, custom-menu
*/

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

@font-face {
	font-family: 'Fraunces';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('fonts/fraunces-700-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: 'Fraunces';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('fonts/fraunces-700-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: 'IBM Plex Sans';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/ibm-plex-sans-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: 'IBM Plex Sans';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/ibm-plex-sans-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: 'IBM Plex Sans';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('fonts/ibm-plex-sans-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: 'IBM Plex Sans';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('fonts/ibm-plex-sans-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 {
	--nacht: #121729;
	--nacht-diep: #0c1020;
	--paneel: #1b2138;
	--paneel-hoog: #222a45;
	--rand: #2b3350;
	--rand-scherp: #3d4770;
	--vorst: #9fb0ef;
	--vorst-diep: #6f7fd0;
	--lamp: #ffc978;
	--lamp-diep: #d9a558;
	--alarm: #e2635a;
	--ijs: #eef3fb;
	--ijs-stil: #a3adc4;

	--titel: 'Fraunces', Georgia, 'Times New Roman', serif;
	--tekst: 'IBM Plex Sans', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

	--wijd: 1220px;
	--nauw: 800px;
	--rand-hoog: 76px;
	--luchtig: clamp(3.5rem, 7vw, 6.5rem);
}

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

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

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

body {
	margin: 0;
	background-color: var(--nacht);
	color: var(--ijs);
	font-family: var(--tekst);
	font-size: 1.0625rem;
	line-height: 1.74;
	overflow-x: hidden;
}

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

/* Een klasse die display zet, verslaat de regel van de browser voor hidden. */
[hidden] {
	display: none !important;
}

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

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

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

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

h1 {
	font-size: clamp(2.2rem, 5vw, 3.9rem);
}

h2 {
	font-size: clamp(1.75rem, 3.4vw, 2.6rem);
}

h3 {
	font-size: clamp(1.25rem, 2vw, 1.6rem);
}

h4 {
	font-size: 1.1rem;
}

p {
	margin: 0 0 1.15em;
}

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

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. */
.stilte {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.sprong {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	background: var(--lamp);
	color: var(--nacht-diep);
	padding: 0.85rem 1.4rem;
	font-family: var(--titel);
	font-weight: 700;
	text-decoration: none;
}

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

/* ==========================================================================
   4. Raamwerk: stadsring (breedte) en ring (sectie)
   ========================================================================== */

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

.stadsring--nauw {
	max-width: var(--nauw);
}

.ring {
	padding: var(--luchtig) 0;
	position: relative;
}

.ring--diep {
	background: var(--nacht-diep);
}

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

.ring--kort {
	padding: calc(var(--luchtig) * 0.6) 0;
}

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

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

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

/* Bovenkopje; per sectie staat het boven of onder de titel. */
.aanzegging {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	font-family: var(--tekst);
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--vorst);
	margin-bottom: 0.9rem;
}

.aanzegging::before {
	content: '';
	width: 10px;
	height: 10px;
	background: var(--vorst);
	transform: rotate(45deg);
	flex: none;
}

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

.aanzegging--onder::before {
	background: var(--lamp);
}

.aanhef {
	font-size: 1.22rem;
	line-height: 1.66;
	color: var(--ijs);
}

.merkteken {
	display: inline-block;
	font-family: var(--tekst);
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.24rem 0.66rem;
	border-radius: 999px;
	border: 1px solid var(--rand-scherp);
	color: var(--ijs-stil);
	background: rgba(0, 0, 0, 0.2);
}

.merkteken--vorst {
	border-color: var(--vorst-diep);
	color: var(--vorst);
}

.merkteken--lamp {
	border-color: var(--lamp-diep);
	color: var(--lamp);
}

.merkteken--alarm {
	border-color: var(--alarm);
	color: var(--alarm);
}

/* ==========================================================================
   5. Vorstnaad — de scheiding: driehoekige tanden als een scheur in het ijs
   ========================================================================== */

.vorstnaad {
	height: 22px;
	position: relative;
	background-color: var(--nacht-diep);
	background-image:
		linear-gradient(135deg, var(--vorst-diep) 25%, transparent 25%),
		linear-gradient(225deg, var(--vorst-diep) 25%, transparent 25%);
	background-size: 22px 22px;
	background-position: 0 0;
	background-repeat: repeat-x;
	border-bottom: 1px solid var(--rand);
}

.vorstnaad::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 1px;
	background: var(--vorst);
	opacity: 0.55;
}

.vorstnaad--stil {
	background-image:
		linear-gradient(135deg, var(--rand-scherp) 25%, transparent 25%),
		linear-gradient(225deg, var(--rand-scherp) 25%, transparent 25%);
}

.vorstnaad--stil::after {
	background: var(--rand-scherp);
	opacity: 1;
}

/* ==========================================================================
   6. Hendel — knoppen
   ========================================================================== */

.hendel {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-family: var(--tekst);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-decoration: none;
	padding: 0.8rem 1.6rem;
	min-height: 48px;
	border: 2px solid transparent;
	border-radius: 4px;
	background: none;
	cursor: pointer;
	transition: background-color 0.16s, color 0.16s, border-color 0.16s, transform 0.16s;
	line-height: 1.2;
	text-align: center;
}

.hendel--stoken {
	background: var(--lamp);
	color: var(--nacht-diep);
	border-color: var(--lamp);
}

.hendel--stoken:hover,
.hendel--stoken:focus-visible {
	background: var(--lamp-diep);
	border-color: var(--lamp-diep);
	color: var(--nacht-diep);
	transform: translateY(-2px);
}

.hendel--koud {
	border-color: var(--rand-scherp);
	color: var(--ijs);
}

.hendel--koud:hover,
.hendel--koud:focus-visible {
	border-color: var(--vorst);
	color: var(--vorst);
	background: rgba(159, 176, 239, 0.1);
}

/* Alleen de maat; de kleur komt van --stoken of --koud ernaast. */
.hendel--klein {
	font-size: 0.94rem;
	padding: 0.55rem 1rem;
	min-height: 40px;
}

.hendel[disabled] {
	opacity: 0.42;
	cursor: not-allowed;
	transform: none;
}

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

.doorwijzer {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-weight: 600;
	font-size: 0.98rem;
	color: var(--lamp);
	text-decoration: none;
	min-height: 40px;
	padding: 0.5rem 0;
}

.doorwijzer::after {
	content: '\2192';
	transition: transform 0.16s;
}

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

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

.stookrand {
	position: sticky;
	top: 0;
	z-index: 90;
	background: rgba(12, 16, 32, 0.96);
	border-bottom: 1px solid var(--rand);
	backdrop-filter: blur(8px);
}

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

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

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

.stookrand__naam {
	font-family: var(--titel);
	font-weight: 700;
	font-size: 1.42rem;
	color: var(--ijs);
	line-height: 1.05;
}

.stookrand__naam span {
	color: var(--lamp);
}

.stookrand__onder {
	display: block;
	font-family: var(--tekst);
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	color: var(--ijs-stil);
	text-transform: uppercase;
	margin-top: 0.26rem;
}

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

.ringlijst a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0.42rem 0.6rem;
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--ijs);
	text-decoration: none;
	border-radius: 3px;
}

.ringlijst a:hover,
.ringlijst a:focus-visible {
	color: var(--lamp);
	background: rgba(255, 201, 120, 0.1);
}

.ringlijst .current-menu-item > a,
.ringlijst .current_page_item > a {
	color: var(--lamp);
	background: rgba(255, 201, 120, 0.14);
}

.ringlijst ul {
	display: none;
}

.klepel {
	display: none;
	align-items: center;
	gap: 0.5rem;
	background: none;
	border: 1px solid var(--rand-scherp);
	border-radius: 4px;
	color: var(--ijs);
	font-family: var(--tekst);
	font-size: 0.95rem;
	font-weight: 600;
	padding: 0.5rem 0.85rem;
	min-height: 44px;
	cursor: pointer;
}

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

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

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

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

.krater {
	position: relative;
	padding: clamp(4rem, 9vw, 8rem) 0 clamp(3.5rem, 7vw, 6rem);
	background-color: var(--nacht-diep);
	background-image: linear-gradient(180deg, rgba(12, 16, 32, 0.45) 0%, rgba(12, 16, 32, 0.86) 58%, var(--nacht) 100%),
		url('images/kop-krater.jpg');
	background-size: cover;
	background-position: center 45%;
	overflow: hidden;
}

.krater__raster {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}

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

.krater h1 em {
	font-style: italic;
	color: var(--lamp);
}

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

.krater__kaart {
	border: 1px solid var(--rand-scherp);
	border-radius: 6px;
	background: rgba(12, 16, 32, 0.9);
	padding: 1.5rem;
}

.krater__kaart h2 {
	font-size: 1.3rem;
	margin-bottom: 1rem;
}

.krater__kaart dl {
	margin: 0;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.55rem 1rem;
	align-items: baseline;
}

.krater__kaart dt {
	font-family: var(--titel);
	font-weight: 700;
	font-size: 1.15rem;
	color: var(--vorst);
}

.krater__kaart dd {
	margin: 0;
	font-size: 0.96rem;
	color: var(--ijs-stil);
}

/* ==========================================================================
   9. Stappenpad — begin hier, drie stappen
   ========================================================================== */

.stappenpad {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.4rem;
	counter-reset: stapteller;
}

.stap {
	position: relative;
	border: 1px solid var(--rand);
	border-radius: 6px;
	background: var(--paneel);
	padding: 1.5rem 1.4rem 1.4rem;
	display: flex;
	flex-direction: column;
}

.stap::before {
	counter-increment: stapteller;
	content: counter(stapteller);
	position: absolute;
	top: -18px;
	left: 1.3rem;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--lamp);
	color: var(--nacht-diep);
	font-family: var(--titel);
	font-weight: 700;
	font-size: 1.15rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.stap h3 {
	margin-top: 0.7rem;
	font-size: 1.28rem;
}

.stap p {
	color: var(--ijs-stil);
	font-size: 0.99rem;
}

.stap .doorwijzer {
	margin-top: auto;
}

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

.werkbank {
	border: 1px solid var(--rand-scherp);
	border-radius: 8px;
	background: var(--paneel);
	overflow: hidden;
}

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

.werkbank__kop h3 {
	margin: 0;
}

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

.werkbank__miniatuur {
	width: 54px;
	height: 54px;
	object-fit: cover;
	border-radius: 4px;
	border: 1px solid var(--rand-scherp);
	flex: none;
}

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

.werkbank__lijf {
	padding: 1.6rem 1.5rem;
}

/* --- Voorraadmeter: rekenmachine voor de voorraad --------------------- */

.voorraadmeter {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: 1.8rem;
}

.voorraadmeter__regelaars {
	display: flex;
	flex-direction: column;
	gap: 1.4rem;
}

.regelaar__kop {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 0.45rem;
	gap: 1rem;
}

.regelaar__kop span {
	font-size: 0.9rem;
	color: var(--ijs-stil);
}

.regelaar__kop b {
	font-family: var(--titel);
	font-weight: 700;
	font-size: 1.3rem;
	color: var(--lamp);
}

.regelaar input[type='range'] {
	width: 100%;
	min-height: 40px;
	accent-color: var(--vorst);
	background: transparent;
	cursor: pointer;
}

.voorraadmeter__keuze {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
}

.vorstknop {
	background: var(--nacht-diep);
	border: 1px solid var(--rand);
	border-radius: 4px;
	color: var(--ijs);
	font-family: var(--tekst);
	font-size: 0.9rem;
	font-weight: 600;
	padding: 0.5rem 0.85rem;
	min-height: 40px;
	cursor: pointer;
}

.vorstknop:hover,
.vorstknop:focus-visible {
	border-color: var(--vorst);
}

.vorstknop[aria-pressed='true'] {
	border-color: var(--lamp);
	color: var(--lamp);
	background: rgba(255, 201, 120, 0.12);
}

.voorraadmeter__uitkomst {
	border: 1px solid var(--rand-scherp);
	border-radius: 6px;
	background: var(--nacht-diep);
	padding: 1.3rem;
}

.voorraadmeter__uitkomst h4 {
	color: var(--lamp);
	margin-bottom: 1rem;
}

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

.post {
	display: grid;
	grid-template-columns: 1fr auto auto;
	gap: 0.5rem 1rem;
	align-items: baseline;
	padding: 0.6rem 0;
	border-bottom: 1px dashed var(--rand);
	margin: 0;
}

.post:last-child {
	border-bottom: 0;
}

.post__naam {
	font-size: 0.97rem;
	color: var(--ijs-stil);
}

.post__nodig {
	font-family: var(--titel);
	font-weight: 700;
	font-size: 1.16rem;
	color: var(--ijs);
	white-space: nowrap;
}

.post__tekort {
	font-size: 0.88rem;
	font-weight: 600;
	white-space: nowrap;
	min-width: 6.5rem;
	text-align: right;
}

.post__tekort--genoeg {
	color: var(--vorst);
}

.post__tekort--kort {
	color: var(--alarm);
}

.voorraadmeter__raad {
	margin: 0;
	font-size: 0.97rem;
	border-left: 3px solid var(--lamp);
	padding-left: 0.85rem;
	color: var(--ijs);
}

/* --- Warmtekaart: matrix gebouw x vorst ------------------------------- */

.warmtekaart__legenda {
	display: flex;
	flex-wrap: wrap;
	gap: 1.1rem;
	margin-bottom: 1.2rem;
	font-size: 0.88rem;
	color: var(--ijs-stil);
}

.warmtekaart__legenda span {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
}

.warmtekaart__stip {
	width: 14px;
	height: 14px;
	border-radius: 3px;
	display: inline-block;
}

.warmtekaart__stip--goed {
	background: var(--vorst);
}

.warmtekaart__stip--matig {
	background: var(--lamp);
}

.warmtekaart__stip--slecht {
	background: var(--alarm);
}

.warmtenet {
	display: grid;
	gap: 4px;
}

/* Twee schrijfwijzen per cel: de volledige op een breed scherm, de korte als er
   vijf kolommen naast elkaar op een telefoon moeten passen. */
.warmtenet__kort {
	display: none;
}

.warmtenet__rij {
	display: grid;
	grid-template-columns: 190px repeat(5, minmax(0, 1fr));
	gap: 4px;
}

.warmtenet__hoek,
.warmtenet__kolomkop {
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--ijs-stil);
	padding: 0.5rem 0.4rem;
	text-align: center;
}

.warmtenet__kolomkop {
	background: none;
	border: 1px solid var(--rand);
	border-radius: 4px;
	cursor: pointer;
	min-height: 44px;
	font-family: var(--tekst);
	line-height: 1.25;
}

.warmtenet__kolomkop:hover,
.warmtenet__kolomkop:focus-visible {
	border-color: var(--vorst);
	color: var(--vorst);
}

.warmtenet__kolomkop[aria-pressed='true'] {
	border-color: var(--lamp);
	color: var(--lamp);
	background: rgba(255, 201, 120, 0.12);
}

.warmtenet__rijkop {
	font-size: 0.93rem;
	font-weight: 600;
	color: var(--ijs);
	padding: 0.55rem 0.7rem;
	background: var(--nacht-diep);
	border-radius: 4px;
	display: flex;
	align-items: center;
}

.warmtenet__vak {
	border-radius: 4px;
	min-height: 46px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--nacht-diep);
	border: 2px solid transparent;
}

.warmtenet__vak--goed {
	background: var(--vorst);
}

.warmtenet__vak--matig {
	background: var(--lamp);
}

.warmtenet__vak--slecht {
	background: var(--alarm);
}

.warmtenet__vak--beste {
	border-color: #fff;
}

.warmtenet__vak--flauw {
	opacity: 0.3;
}

.warmtekaart__oordeel {
	margin: 1.3rem 0 0;
	font-size: 0.99rem;
	border-left: 3px solid var(--vorst);
	padding-left: 0.85rem;
}

/* --- Wettenboom: twee takken, beperkt aantal ondertekeningen ---------- */

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

.wettak h4 {
	color: var(--vorst);
	margin-bottom: 1rem;
	font-size: 1.16rem;
}

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

.wettak__lijst li {
	margin: 0;
}

.wet {
	display: block;
	width: 100%;
	text-align: left;
	background: var(--nacht-diep);
	border: 1px solid var(--rand);
	border-radius: 4px;
	color: var(--ijs);
	font-family: var(--tekst);
	font-size: 0.94rem;
	padding: 0.65rem 0.8rem;
	min-height: 44px;
	cursor: pointer;
	position: relative;
}

.wet small {
	display: block;
	font-size: 0.8rem;
	color: var(--ijs-stil);
	margin-top: 0.15rem;
}

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

.wet[aria-pressed='true'] {
	border-color: var(--lamp);
	background: rgba(255, 201, 120, 0.13);
	color: var(--lamp);
}

.wet[disabled] {
	opacity: 0.4;
	cursor: not-allowed;
}

.wettenboom__saldo {
	border: 1px solid var(--rand-scherp);
	border-radius: 6px;
	background: var(--nacht-diep);
	padding: 1.25rem;
	align-self: start;
}

.wettenboom__saldo h4 {
	color: var(--lamp);
	margin-bottom: 0.7rem;
}

.wettenboom__getal {
	display: flex;
	align-items: baseline;
	gap: 0.4rem;
	font-family: var(--titel);
	font-weight: 700;
	font-size: 2.4rem;
	color: var(--ijs);
	line-height: 1;
	margin-bottom: 1rem;
}

.wettenboom__getal span {
	font-family: var(--tekst);
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--ijs-stil);
}

.wettenboom__oordeel {
	font-size: 0.96rem;
	border-top: 1px dashed var(--rand);
	padding-top: 0.9rem;
	margin: 0 0 1.1rem;
}

/* --- Moeilijkheidsschuif: een slee die alle cijfers herschrijft ------- */

.schuifblok {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: 1.8rem;
	align-items: start;
}

.slee__standen {
	display: flex;
	justify-content: space-between;
	margin-top: 0.5rem;
	font-size: 0.85rem;
	color: var(--ijs-stil);
}

.slee__standen span {
	flex: 1 1 0;
	text-align: center;
}

.slee__standen span:first-child {
	text-align: left;
}

.slee__standen span:last-child {
	text-align: right;
}

.slee__standen b {
	color: var(--lamp);
	font-weight: 600;
}

.schuifblok__naam {
	font-family: var(--titel);
	font-weight: 700;
	font-size: 1.7rem;
	color: var(--lamp);
	margin: 0 0 0.4rem;
}

.schuifblok__uitleg {
	color: var(--ijs-stil);
	font-size: 0.98rem;
}

.cijferlijst {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.7rem 1.2rem;
}

.cijferlijst li {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.8rem;
	padding: 0.55rem 0;
	border-bottom: 1px dashed var(--rand);
	margin: 0;
	font-size: 0.95rem;
	color: var(--ijs-stil);
}

.cijferlijst b {
	font-family: var(--titel);
	font-weight: 700;
	font-size: 1.16rem;
	color: var(--ijs);
	white-space: nowrap;
}

/* ==========================================================================
   11. Kaarten: barak, wetkaart, gidskaart, scenariokaart
   ========================================================================== */

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

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

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

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

.barak {
	border: 1px solid var(--rand);
	border-radius: 6px;
	background: var(--paneel);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

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

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

.barak:hover .barak__beeld img {
	transform: scale(1.04);
}

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

.barak__lijf h3 {
	font-size: 1.22rem;
	margin-bottom: 0.5rem;
}

.barak__lijf p {
	color: var(--ijs-stil);
	font-size: 0.96rem;
}

.barak__lijf .merkteken {
	align-self: flex-start;
	margin-bottom: 0.8rem;
}

.barak__lijf .doorwijzer {
	margin-top: auto;
}

/* Scenariokaart: beeld links, tekst rechts, om en om gespiegeld. */
.scenariokaart {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: 1.6rem;
	align-items: center;
	border: 1px solid var(--rand);
	border-radius: 6px;
	background: var(--nacht-diep);
	padding: 1.3rem;
	margin-bottom: 1.2rem;
}

.scenariokaart--gespiegeld .scenariokaart__beeld {
	order: 2;
}

.scenariokaart__beeld img {
	width: 100%;
	border-radius: 4px;
}

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

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

.scenariokaart__cijfers {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-bottom: 0.9rem;
}

/* Gidskaart: rij in de mechaniekenlijst zonder beeld. */
.gidskaart {
	border: 1px solid var(--rand);
	border-radius: 6px;
	background: var(--paneel);
	padding: 1.4rem;
	display: flex;
	flex-direction: column;
}

.gidskaart__nummer {
	font-family: var(--titel);
	font-weight: 700;
	font-size: 2.1rem;
	line-height: 1;
	color: var(--vorst);
	margin-bottom: 0.6rem;
}

.gidskaart h3 {
	font-size: 1.22rem;
}

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

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

/* ==========================================================================
   12. Kladje — notities van lezers, als briefjes met een omgeslagen hoek
   ========================================================================== */

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

.kladje {
	position: relative;
	background: var(--paneel-hoog);
	border: 1px solid var(--rand-scherp);
	border-radius: 3px;
	padding: 1.2rem 1.3rem 1.1rem;
	transform: rotate(-0.7deg);
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.34);
}

.kladje:nth-child(even) {
	transform: rotate(0.9deg);
}

.kladje:nth-child(3n) {
	transform: rotate(-0.3deg);
}

/* De omgeslagen hoek rechtsonder. */
.kladje::after {
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	width: 22px;
	height: 22px;
	background: linear-gradient(315deg, var(--nacht) 50%, transparent 50%);
	border-left: 1px solid var(--rand-scherp);
	border-top: 1px solid var(--rand-scherp);
}

.kladje__label {
	display: inline-block;
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 0.2rem 0.55rem;
	border-radius: 2px;
	margin-bottom: 0.7rem;
}

.kladje__label--correctie {
	background: var(--alarm);
	color: var(--nacht-diep);
}

.kladje__label--aanvulling {
	background: var(--vorst);
	color: var(--nacht-diep);
}

.kladje__tekst {
	margin: 0 0 0.9rem;
	font-size: 0.97rem;
}

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

.kladje__voet b {
	color: var(--ijs);
	font-weight: 600;
}

/* Zeef boven de notities. */
.zeefrand {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 2.2rem;
	align-items: center;
}

.zeefrand__woord {
	font-size: 0.84rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ijs-stil);
	margin-right: 0.4rem;
}

/* ==========================================================================
   13. Dagenlijst — het dagboek als genummerde dagen
   ========================================================================== */

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

.dag {
	display: grid;
	grid-template-columns: 128px minmax(0, 1fr);
	gap: 1.6rem;
	padding: 1.7rem 0;
	border-top: 1px solid var(--rand);
	margin: 0;
}

.dag:last-child {
	border-bottom: 1px solid var(--rand);
}

.dag__nummer {
	font-family: var(--titel);
	font-weight: 700;
	line-height: 0.95;
	color: var(--vorst);
	text-align: right;
}

.dag__nummer span {
	display: block;
	font-family: var(--tekst);
	font-size: 0.76rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ijs-stil);
	margin-bottom: 0.2rem;
}

.dag__nummer b {
	font-size: 2.6rem;
	font-weight: 700;
}

.dag h3 {
	font-size: 1.45rem;
	margin-bottom: 0.5rem;
}

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

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

.dag p {
	color: var(--ijs-stil);
	margin-bottom: 0.6rem;
}

.dag__voet {
	font-size: 0.86rem;
	color: var(--ijs-stil);
	margin: 0;
}

/* ==========================================================================
   14. Formulieren: stookbrief (contact) en kladbrief (notitie)
   ========================================================================== */

.stookbrief,
.kladbrief {
	border: 1px solid var(--rand-scherp);
	border-radius: 8px;
	background: var(--paneel);
	padding: 1.6rem;
}

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

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

.invulling > span,
.invulling > label {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--ijs-stil);
}

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

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

.invulling input:focus,
.invulling select:focus,
.invulling textarea:focus {
	border-color: var(--lamp);
	outline: 2px solid rgba(255, 201, 120, 0.3);
	outline-offset: 0;
}

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

/* Soortkeuze: correctie of aanvulling. */
.soortkeuze {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.soortkeuze 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;
}

.soortkeuze label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.5rem 1rem;
	border: 1px solid var(--rand-scherp);
	border-radius: 4px;
	background: var(--nacht-diep);
	color: var(--ijs-stil);
	font-size: 0.93rem;
	font-weight: 600;
	cursor: pointer;
}

.soortkeuze input[type='radio']:checked + label {
	border-color: var(--lamp);
	color: var(--lamp);
	background: rgba(255, 201, 120, 0.12);
}

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

/* Vangput: onzichtbaar voor mensen, niet op display:none want dan slaat een
   robot het veld over en vangt de val niets. */
.vangput {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

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

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

.mededeling--fout {
	border-left-color: var(--alarm);
	color: var(--alarm);
}

.mededeling p {
	margin: 0;
}

.kleinschrift {
	font-size: 0.86rem;
	color: var(--ijs-stil);
	margin: 1rem 0 0;
}

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

.ringkop {
	position: relative;
	padding: clamp(3rem, 6vw, 5rem) 0 clamp(2.2rem, 4vw, 3.4rem);
	background-color: var(--nacht-diep);
	background-image: linear-gradient(180deg, rgba(12, 16, 32, 0.76), rgba(18, 23, 41, 0.95)),
		url('images/ijstextuur.jpg');
	background-size: cover;
	background-position: center;
	border-bottom: 1px solid var(--rand);
}

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

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

.ringkop--lantaarn {
	background-image: linear-gradient(180deg, rgba(12, 16, 32, 0.6), rgba(18, 23, 41, 0.93)),
		url('images/lantaarn.jpg');
}

.ringkop--wetboek {
	background-image: linear-gradient(180deg, rgba(12, 16, 32, 0.7), rgba(18, 23, 41, 0.94)),
		url('images/wetboek.jpg');
}

.ringkop--bord {
	background-image: linear-gradient(180deg, rgba(12, 16, 32, 0.7), rgba(18, 23, 41, 0.94)),
		url('images/notitiebord.jpg');
}

.ringkop--dagboek {
	background-image: linear-gradient(180deg, rgba(12, 16, 32, 0.7), rgba(18, 23, 41, 0.94)),
		url('images/dagboek.jpg');
}

.ringkop--kelder {
	background-image: linear-gradient(180deg, rgba(12, 16, 32, 0.72), rgba(18, 23, 41, 0.95)),
		url('images/voorraadkelder.jpg');
}

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

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

.tweeluik--omgekeerd .tweeluik__beeld {
	order: 2;
}

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

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

/* Toetsenlijst voor de uitleg over de bediening. */
.toetsenlijst {
	list-style: none;
	padding: 0;
	margin: 0;
}

.toetsenlijst li {
	display: grid;
	grid-template-columns: 92px minmax(0, 1fr);
	gap: 1rem;
	padding: 0.7rem 0;
	border-bottom: 1px solid var(--rand);
	margin: 0;
	font-size: 0.96rem;
}

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

.toets {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 30px;
	padding: 0.2rem 0.5rem;
	border: 1px solid var(--rand-scherp);
	border-radius: 4px;
	background: var(--nacht-diep);
	color: var(--vorst);
	font-size: 0.84rem;
	font-weight: 600;
	text-align: center;
}

/* Volle band met een korte oproep. */
.aansporing {
	position: relative;
	padding: clamp(3rem, 6vw, 5rem) 0;
	background-color: var(--nacht-diep);
	background-image: linear-gradient(90deg, rgba(12, 16, 32, 0.9) 0%, rgba(12, 16, 32, 0.42) 100%),
		url('images/dageraad.jpg');
	background-size: cover;
	background-position: center 62%;
	border-top: 1px solid var(--rand);
	border-bottom: 1px solid var(--rand);
}

.aansporing__binnen {
	max-width: 58ch;
}

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

.aansporing p {
	font-size: 1.14rem;
	margin-bottom: 1.6rem;
}

/* Vragen en antwoorden. */
.vraagrij {
	border-top: 1px solid var(--rand);
}

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

.vraagrij__paar h3 {
	font-size: 1.16rem;
	margin: 0;
	color: var(--ijs);
}

.vraagrij__paar p {
	margin: 0;
	color: var(--ijs-stil);
}

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

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

.gegevensrij span {
	font-size: 0.84rem;
	font-weight: 600;
	color: var(--ijs-stil);
	padding-top: 0.15rem;
}

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

/* Losse tekstpagina's. */
.regeltekst h2 {
	margin-top: 2.6rem;
	font-size: 1.65rem;
}

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

.regeltekst h3 {
	margin-top: 1.8rem;
	font-size: 1.2rem;
}

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

.regeltekst th {
	background: var(--paneel);
	font-family: var(--titel);
	font-weight: 700;
	font-size: 1rem;
	color: var(--ijs);
}

.regeltekst td {
	color: var(--ijs-stil);
	font-size: 0.95rem;
}

/* Een tabel met veel kolommen past niet op een telefoon: die schuift binnen
   zijn eigen kader in plaats van de pagina breder te maken. */
.tabelslee {
	margin: 1.4rem 0 2rem;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--rand);
	border-radius: 6px;
}

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

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

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

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

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

.kolenkelder__merk .stookrand__naam {
	font-size: 1.3rem;
}

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

.kolenkelder h2 {
	font-size: 1.06rem;
	color: var(--ijs);
	margin-bottom: 1rem;
}

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

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

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

.kolenkelder li a:hover,
.kolenkelder li a:focus-visible,
.kolenkelder__gegevens a:hover,
.kolenkelder__gegevens a:focus-visible {
	color: var(--lamp);
}

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

.kolenkelder__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(--ijs-stil);
}

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

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

.losvanuitgever b {
	color: var(--ijs);
	font-weight: 600;
}

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

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

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

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

.koekrand p {
	margin: 0;
	font-size: 0.92rem;
	color: var(--ijs-stil);
	max-width: 74ch;
}

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

/* ==========================================================================
   18. Verdwaald — 404
   ========================================================================== */

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

.verdwaald__cijfer {
	font-family: var(--titel);
	font-weight: 700;
	font-size: clamp(5rem, 18vw, 11rem);
	line-height: 0.92;
	color: var(--vorst);
	margin: 0 0 0.6rem;
}

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

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

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

.verdwaald__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(--ijs);
	font-weight: 600;
}

.verdwaald__wegen a:hover,
.verdwaald__wegen a:focus-visible {
	color: var(--lamp);
}

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

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

html.js .ontdooi--warm {
	opacity: 1;
	transform: none;
}

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

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

	.hendel,
	.barak__beeld img,
	.doorwijzer::after {
		transition: none;
	}
}

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

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

	.voorraadmeter,
	.schuifblok {
		grid-template-columns: 1fr;
	}

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

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

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

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

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

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

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

	/* Op smalle schermen is de knop naar de gids overbodig: die staat in het
	   uitklapmenu en op het eerste scherm. */
	.stookrand__binnen > .hendel {
		display: none;
	}

	.ringlijst {
		display: none;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		background: var(--nacht-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(--rand-hoog));
		overflow-y: auto;
	}

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

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

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

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

	.klepel {
		display: inline-flex;
	}

	.stookrand__binnen {
		position: relative;
	}

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

	.stap:nth-child(3) {
		grid-column: 1 / -1;
	}

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

	.tweeluik--omgekeerd .tweeluik__beeld {
		order: 0;
	}

	.scenariokaart,
	.scenariokaart--gespiegeld {
		grid-template-columns: 1fr;
	}

	.scenariokaart--gespiegeld .scenariokaart__beeld {
		order: 0;
	}

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

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

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

	.stadsring {
		padding: 0 1.1rem;
	}

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

	/* De ondertitel is breed door zijn letterafstand en duwt de kop uiteen. */
	.stookrand__onder {
		display: none;
	}

	.ringlijst,
	.koekrand__binnen {
		padding-left: 1.1rem;
		padding-right: 1.1rem;
	}

	.stappenpad,
	.barakkenraster--twee,
	.barakkenraster--drie,
	.barakkenraster--vier,
	.kladjes {
		grid-template-columns: 1fr;
	}

	.stap:nth-child(3) {
		grid-column: auto;
	}

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

	.stookbrief__rij,
	.kladbrief__rij {
		grid-template-columns: 1fr;
	}

	.dag {
		grid-template-columns: 1fr;
		gap: 0.7rem;
	}

	.dag__nummer {
		text-align: left;
		display: flex;
		align-items: baseline;
		gap: 0.6rem;
	}

	.dag__nummer span {
		margin-bottom: 0;
	}

	.dag__nummer b {
		font-size: 2rem;
	}

	.gegevensrij li,
	.toetsenlijst li {
		grid-template-columns: 1fr;
		gap: 0.25rem;
	}

	.toets {
		justify-self: start;
	}

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

	.werkbank__lijf {
		padding: 1.2rem 1.1rem;
	}

	.werkbank__kop {
		padding: 1rem 1.1rem;
	}

	.post {
		grid-template-columns: 1fr auto;
	}

	.post__tekort {
		grid-column: 2;
		text-align: right;
	}

	/* De matrix schuift niet zijwaarts maar wordt gestapeld: de naam van het
	   gebouw op een eigen regel, de vijf standen eronder. Een matrix die je
	   binnen een kader moet slepen leest op een telefoon slecht. */
	.warmtenet__hoek {
		display: none;
	}

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

	.warmtenet__rijkop {
		grid-column: 1 / -1;
		margin-top: 0.5rem;
	}

	.warmtenet__lang {
		display: none;
	}

	.warmtenet__kort {
		display: inline;
	}

	.warmtenet__kolomkop {
		font-size: 0.78rem;
		padding: 0.45rem 0.15rem;
	}

	.warmtenet__vak {
		min-height: 42px;
		font-size: 0.8rem;
	}

	/* Grote raakvlakken voor een vinger. */
	.doorwijzer,
	.ringlijst a,
	.kolenkelder li a,
	.kolenkelder__gegevens a,
	.gegevensrij a,
	.dag h3 a {
		min-height: 44px;
	}

	.kleinschrift a,
	.regeltekst p a {
		display: inline-block;
		min-height: 40px;
		padding: 0.45rem 0;
	}

	.hendel {
		width: 100%;
	}

	.hendel--klein,
	.hendelrij--los .hendel {
		width: auto;
	}

	.koekrand__knoppen {
		width: 100%;
	}

	.koekrand__knoppen .hendel {
		flex: 1 1 auto;
	}
}

@media (max-width: 420px) {
	.kladje,
	.kladje:nth-child(even),
	.kladje:nth-child(3n) {
		transform: none;
	}
}

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

@media print {
	.stookrand,
	.koekrand,
	.klepel,
	.aansporing,
	.werkbank {
		display: none !important;
	}

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