/*
Theme Name: Spelhaven
Theme URI: https://spelhaven.org/
Author: Spelhaven
Author URI: https://spelhaven.org/
Description: Thema voor Spelhaven, een onofficiele gemeenschap van spelers die op Grand Theft Auto VI wachten. Donker warm grafiet, Epilogue en Figtree in het thema zelf, vier eigen gereedschappen en dertien bladzijden in het Nederlands.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: spelhaven
Tags: onofficieel, gemeenschap, nederlands, donker, toegankelijk
*/

/* =========================================================================
   1. Lettertypen uit het thema zelf
   -------------------------------------------------------------------------
   Niets van een vreemde server: anders vertrekt het ip-adres van elke
   bezoeker naar buiten en hoort dat in het cookiebeleid te staan.
   ========================================================================= */

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

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

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

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

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

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

/* =========================================================================
   2. De kleuren
   -------------------------------------------------------------------------
   De verhoudingen zijn uitgerekend voordat er een regel opmaak stond:
   --voeg 1.40:1 en --stoeprand 3.75:1 op de achtergrond. Die twee dragen
   daarom nergens tekst en staan in geen enkele color-opgave; ze zijn er voor
   randen en vullingen. Sierlijke cijfers krijgen --zand (9.41:1), nooit de
   randkleur: dat is op zeven sites achter elkaar misgegaan.
   ========================================================================= */

:root {
	--asfalt: #21191c;
	--pleister: #2b2226;
	--geul: #332a2e;
	--voeg: #3d3237;
	--stoeprand: #847079;
	--kalk: #efe8ea;
	--damp: #b3a5aa;
	--fuchsia: #e6a2c0;
	--zand: #cdbf95;
	--verbod: #e8846b;

	--breed: 1180px;
	--smal: 780px;
	--kophoogte: 74px;
	--traag: 260ms;
}

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

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

/* Een klasse die display zet is sterker dan de browserregel voor [hidden].
   Zonder deze regel staat een als verborgen gemerkte knop gewoon in beeld. */
[hidden] {
	display: none !important;
}

html {
	scroll-behavior: smooth;
	/* Zonder deze regel komt een ankerverwijzing onder de plakkende kop uit. */
	scroll-padding-top: calc(var(--kophoogte) + 18px);
	-webkit-text-size-adjust: 100%;
}

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

body {
	margin: 0;
	background-color: var(--asfalt);
	color: var(--kalk);
	font-family: 'Figtree', 'Segoe UI', system-ui, sans-serif;
	font-size: 17px;
	line-height: 1.68;
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
	font-family: 'Epilogue', 'Segoe UI', system-ui, sans-serif;
	font-weight: 700;
	line-height: 1.14;
	letter-spacing: -0.012em;
	margin: 0 0 0.5em;
	color: var(--kalk);
}

h1 {
	font-size: clamp(2.05rem, 4.6vw, 3.3rem);
}

h2 {
	font-size: clamp(1.55rem, 3vw, 2.2rem);
}

h3 {
	font-size: 1.24rem;
}

h4 {
	font-size: 1.05rem;
}

p {
	margin: 0 0 1.05em;
}

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

a:hover {
	color: var(--kalk);
}

a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible {
	outline: 3px solid var(--fuchsia);
	outline-offset: 2px;
}

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

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

li {
	margin-bottom: 0.42em;
}

strong,
b {
	font-weight: 600;
}

code {
	font-family: 'Cascadia Mono', Consolas, 'Courier New', monospace;
	font-size: 0.92em;
	background-color: var(--geul);
	border: 1px solid var(--voeg);
	border-radius: 4px;
	padding: 1px 6px;
	color: var(--zand);
}

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

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

.overslaan {
	position: absolute;
	left: -9999px;
	top: 0;
	background-color: var(--fuchsia);
	color: var(--asfalt);
	padding: 12px 20px;
	font-weight: 600;
	border-radius: 0 0 8px 0;
}

.overslaan:focus {
	left: 0;
	color: var(--asfalt);
}

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

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

/* =========================================================================
   4. Secties
   ========================================================================= */

.stoep {
	padding: 68px 0;
}

.stoep--kort {
	padding: 44px 0;
}

.stoep--diep {
	background-color: var(--geul);
	border-top: 1px solid var(--voeg);
	border-bottom: 1px solid var(--voeg);
}

.stoep--paneel {
	background-color: var(--pleister);
	border-top: 1px solid var(--voeg);
	border-bottom: 1px solid var(--voeg);
}

.stoep--stuc {
	background-color: var(--pleister);
	background-image: linear-gradient(rgba(33, 25, 28, 0.9), rgba(33, 25, 28, 0.9)), url('images/stucvlak.jpg');
	background-size: cover;
	background-position: center;
	border-top: 1px solid var(--voeg);
	border-bottom: 1px solid var(--voeg);
}

/* De palmtextuur staat alleen achter de strook met de stemschijf: daar geeft
   het blad de smalle balken van de rondes iets om tegen af te steken. */
.stoep--palm {
	background-color: var(--geul);
	background-image: linear-gradient(rgba(33, 25, 28, 0.94), rgba(33, 25, 28, 0.94)), url('images/palmvlak.jpg');
	background-size: cover;
	background-position: center;
	border-top: 1px solid var(--voeg);
	border-bottom: 1px solid var(--voeg);
}

.stoep__aanhef {
	font-family: 'Figtree', system-ui, sans-serif;
	font-size: 0.79rem;
	font-weight: 600;
	letter-spacing: 0.19em;
	text-transform: uppercase;
	color: var(--zand);
	margin: 0 0 0.7rem;
}

.stoep__leidraad {
	max-width: 66ch;
	color: var(--damp);
	font-size: 1.06rem;
}

.stoep__kopgroep {
	margin-bottom: 2.3rem;
}

.stoep__kopgroep--rechts {
	max-width: 62ch;
	margin-left: auto;
	text-align: right;
}

.stoep__kopgroep--rechts .stoep__leidraad {
	margin-left: auto;
}

/* =========================================================================
   5. De palmrand: de scheidingslijn van deze site
   -------------------------------------------------------------------------
   Smalle spitse palmblaadjes die om en om naar links en naar rechts hellen,
   op een haarlijn. Als data-URI, dus nul verzoeken naar buiten.
   ========================================================================= */

.palmrand {
	height: 22px;
	background-repeat: repeat-x;
	background-position: center bottom;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='22' viewBox='0 0 120 22'%3E%3Cpath d='M0 21.5h120' stroke='%233d3237' stroke-width='1' fill='none'/%3E%3Cpath d='M14 21C6 17 3 9 7 2c7 3 11 12 7 19z' fill='%23cdbf95'/%3E%3Cpath d='M38 21c8-4 11-12 7-19-7 3-11 12-7 19z' fill='%23cdbf95'/%3E%3Cpath d='M62 21c-8-4-11-12-7-19 7 3 11 12 7 19z' fill='%23cdbf95'/%3E%3Cpath d='M86 21c8-4 11-12 7-19-7 3-11 12-7 19z' fill='%23cdbf95'/%3E%3Cpath d='M110 21c-8-4-11-12-7-19 7 3 11 12 7 19z' fill='%23cdbf95'/%3E%3C/svg%3E");
	margin: 0;
}

.palmrand--in {
	margin: 2.6rem 0;
}

/* =========================================================================
   6. Knoppen: de claxon
   ========================================================================= */

.claxon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: 46px;
	padding: 11px 24px;
	border-radius: 6px;
	border: 1px solid transparent;
	font-family: 'Figtree', system-ui, sans-serif;
	font-size: 0.99rem;
	font-weight: 600;
	line-height: 1.25;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--traag), color var(--traag), border-color var(--traag);
}

.claxon--doe {
	background-color: var(--fuchsia);
	color: var(--asfalt);
}

.claxon--doe:hover {
	background-color: var(--zand);
	color: var(--asfalt);
}

.claxon--stil {
	background-color: transparent;
	border-color: var(--stoeprand);
	color: var(--kalk);
}

.claxon--stil:hover {
	background-color: var(--geul);
	color: var(--kalk);
}

/* Boven een foto is een knop met een doorzichtige vulling niet te lezen: de
   pixelproef mat 2,95:1 op de lichtste plek van het beeld. Daarom krijgt de
   stille knop daar een eigen ondergrond; op --asfalt haalt --kalk 14,26:1. */
[data-foto-achter] .claxon--stil {
	background-color: var(--asfalt);
}

.claxon--kort {
	min-height: 38px;
	padding: 7px 15px;
	font-size: 0.9rem;
}

.claxon[aria-pressed='true'] {
	background-color: var(--zand);
	color: var(--asfalt);
	border-color: var(--zand);
}

.claxonrij {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
}

/* =========================================================================
   7. De veranda: de kop van de site
   ========================================================================= */

/* De twee lagen die met opzet over de bladzijde heen liggen, zijn de enige
   plekken in dit bestand met een z-index. Zonder die opgave schuift de inhoud
   van de bladzijde bij het scrollen over de kop heen: alles is dan positioned
   met z-index auto en dan wint wat later in het document staat. Een z-index op
   een voorouder van een gereedschap zou juist fout zijn, want die sluit de
   kinderen op in een eigen stapel; kop en koekstoep zijn geen voorouder van
   enig gereedschap. */
.veranda {
	position: sticky;
	top: 0;
	z-index: 20;
	background-color: rgba(33, 25, 28, 0.97);
	border-bottom: 1px solid var(--voeg);
	backdrop-filter: blur(6px);
}

.veranda__binnen {
	display: flex;
	align-items: center;
	gap: 18px;
	min-height: var(--kophoogte);
	width: 100%;
	max-width: var(--breed);
	margin: 0 auto;
	padding: 8px 24px;
}

.veranda__merk {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	font-family: 'Epilogue', system-ui, sans-serif;
	font-weight: 700;
	font-size: 1.34rem;
	letter-spacing: -0.015em;
	text-decoration: none;
	color: var(--kalk);
	flex: 0 0 auto;
}

.veranda__merk:hover {
	color: var(--kalk);
}

.veranda__merkkop {
	color: var(--fuchsia);
}

.veranda__merkstaart {
	color: var(--kalk);
}

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

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

.straatlijst a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 6px 11px;
	border-radius: 5px;
	font-size: 0.93rem;
	font-weight: 600;
	text-decoration: none;
	color: var(--damp);
}

.straatlijst a:hover {
	background-color: var(--geul);
	color: var(--kalk);
}

.straatlijst .current-menu-item > a {
	color: var(--kalk);
	background-color: var(--geul);
}

/* De automatische marge hoort op de knop, niet op de menuknop: staat hij op
   de menuknop, dan breekt de kop op 390 px in twee regels. */
.veranda__claxon {
	margin-left: auto;
	flex: 0 0 auto;
}

.deurbel {
	display: none;
	/* Kolom, niet rij: als flexrichting op de standaard blijft staan, gaan de
	   drie streepjes naast elkaar staan en wordt de knop een rechthoek. */
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	background-color: transparent;
	border: 1px solid var(--stoeprand);
	border-radius: 6px;
	cursor: pointer;
	flex: 0 0 auto;
}

.deurbel__streep {
	display: block;
	width: 21px;
	height: 2px;
	background-color: var(--kalk);
	margin: 3px auto;
}

/* =========================================================================
   8. De skyline: het eerste scherm
   ========================================================================= */

.skyline {
	background-color: var(--asfalt);
	background-image: linear-gradient(90deg, rgba(24, 18, 20, 0.95) 0%, rgba(24, 18, 20, 0.88) 46%, rgba(24, 18, 20, 0.58) 100%), url('images/kop-skyline.jpg');
	background-size: cover;
	background-position: center 62%;
	border-bottom: 1px solid var(--voeg);
}

.skyline__binnen {
	width: 100%;
	max-width: var(--breed);
	margin: 0 auto;
	padding: 92px 24px 78px;
}

.skyline__inhoud {
	max-width: 41rem;
}

.skyline__merkregel {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 0.79rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--zand);
	margin-bottom: 1.15rem;
}

.skyline h1 {
	margin-bottom: 0.62em;
}

.skyline__uitleg {
	font-size: 1.14rem;
	color: var(--kalk);
	max-width: 38rem;
}

.skyline__claxons {
	margin-top: 2rem;
}

.skyline__peil {
	margin-top: 2.4rem;
}

/* =========================================================================
   9. De peilregel: wanneer de stand voor het laatst is nagelopen
   ========================================================================= */

.peilregel {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 15px;
	border: 1px solid var(--voeg);
	border-left: 3px solid var(--zand);
	border-radius: 4px;
	background-color: var(--pleister);
	font-size: 0.88rem;
	color: var(--damp);
}

.peilregel__waarde {
	color: var(--zand);
	font-weight: 600;
}

/* =========================================================================
   10. De gevelkop: de kop van een binnenbladzijde
   ========================================================================= */

.gevelkop {
	background-color: var(--pleister);
	border-bottom: 1px solid var(--voeg);
	padding: 56px 0 44px;
}

.gevelkop__aanhef {
	font-size: 0.79rem;
	font-weight: 600;
	letter-spacing: 0.19em;
	text-transform: uppercase;
	color: var(--zand);
	margin: 0 0 0.7rem;
}

.gevelkop__uitleg {
	max-width: 62ch;
	color: var(--damp);
	font-size: 1.06rem;
	margin-bottom: 0;
}

.gevelkop__peil {
	margin-top: 1.6rem;
}

/* =========================================================================
   11. Kaarten
   ========================================================================= */

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

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

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

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

.bronkaart {
	display: flex;
	flex-direction: column;
	background-color: var(--pleister);
	border: 1px solid var(--voeg);
	border-radius: 9px;
	overflow: hidden;
}

.bronkaart__beeld {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.bronkaart__binnen {
	padding: 22px 22px 20px;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.bronkaart__nummer {
	font-family: 'Epilogue', system-ui, sans-serif;
	font-size: 1.55rem;
	font-weight: 700;
	color: var(--zand);
	line-height: 1;
	margin-bottom: 0.5rem;
}

.bronkaart__tekst {
	color: var(--damp);
	font-size: 0.98rem;
	margin-bottom: 1.1rem;
}

/* De verwijzing hangt aan de onderkant, zodat de kaarten in de rij even
   diep worden ondanks tekst van verschillende lengte. */
.bronkaart__pijl {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	min-height: 38px;
	gap: 8px;
	font-weight: 600;
	font-size: 0.95rem;
	text-decoration: none;
}

.bronkaart__pijl::after {
	content: '';
	width: 0;
	height: 0;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-left: 7px solid currentColor;
}

.avondkaart {
	background-color: var(--pleister);
	border: 1px solid var(--voeg);
	border-top: 3px solid var(--fuchsia);
	border-radius: 0 0 9px 9px;
	padding: 22px;
}

.avondkaart__dag {
	font-family: 'Epilogue', system-ui, sans-serif;
	font-size: 1.16rem;
	font-weight: 700;
	margin-bottom: 0.25rem;
}

.avondkaart__uur {
	font-size: 0.87rem;
	font-weight: 600;
	color: var(--zand);
	letter-spacing: 0.08em;
	margin-bottom: 0.85rem;
}

.avondkaart__tekst {
	color: var(--damp);
	font-size: 0.97rem;
	margin-bottom: 0;
}

.ledenkaart {
	background-color: var(--pleister);
	border: 1px solid var(--voeg);
	border-radius: 9px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.ledenkaart__beeld {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.ledenkaart__binnen {
	padding: 20px;
}

.ledenkaart__naam {
	font-family: 'Epilogue', system-ui, sans-serif;
	font-size: 1.1rem;
	font-weight: 700;
	margin-bottom: 0.2rem;
}

.ledenkaart__rol {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--zand);
	margin-bottom: 0.7rem;
}

.ledenkaart__tekst {
	color: var(--damp);
	font-size: 0.95rem;
	margin-bottom: 0;
}

/* =========================================================================
   12. De stempelchip: de status van een uitspraak
   ========================================================================= */

.stempelchip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 36px;
	padding: 6px 14px;
	border-radius: 4px;
	font-size: 0.83rem;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--asfalt);
	background-color: var(--damp);
}

.stempelchip--bevestigd {
	background-color: var(--fuchsia);
}

.stempelchip--aangekondigd {
	background-color: var(--zand);
}

.stempelchip--gerucht {
	background-color: var(--verbod);
}

.stempelchip--onbepaald {
	background-color: var(--damp);
}

.stempelchip--klein {
	min-height: 30px;
	padding: 4px 10px;
	font-size: 0.76rem;
}

/* =========================================================================
   13. Gereedschap: de gemeenschappelijke schaal
   ========================================================================= */

.gereedschap {
	background-color: var(--pleister);
	border: 1px solid var(--voeg);
	border-radius: 11px;
	padding: 28px;
}

.gereedschap__kop {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 12px;
	margin-bottom: 0.4rem;
}

.gereedschap__naam {
	margin-bottom: 0;
}

.gereedschap__merk {
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--zand);
}

.gereedschap__uitleg {
	color: var(--damp);
	max-width: 68ch;
}

.gereedschap__vak {
	background-color: var(--geul);
	border: 1px solid var(--voeg);
	border-radius: 8px;
	padding: 20px;
}

.gereedschap__vaktitel {
	font-family: 'Figtree', system-ui, sans-serif;
	font-size: 0.79rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--zand);
	margin: 0 0 0.9rem;
}

.gereedschap__raster {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: start;
	gap: 20px;
	margin-top: 1.6rem;
}

.gereedschap__uitslag {
	margin-top: 1.1rem;
}

.gereedschap__zin {
	color: var(--kalk);
	margin-bottom: 0.6rem;
}

.gereedschap__bijzin {
	color: var(--damp);
	font-size: 0.96rem;
	margin-bottom: 0;
}

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

.keuzeregel {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	min-height: 40px;
	padding: 8px 12px;
	background-color: var(--pleister);
	border: 1px solid var(--voeg);
	border-radius: 6px;
	cursor: pointer;
	margin-bottom: 0;
}

.keuzeregel:hover {
	border-color: var(--stoeprand);
}

.keuzeregel input {
	width: 20px;
	height: 20px;
	margin: 4px 0 0;
	accent-color: var(--fuchsia);
	flex: 0 0 auto;
}

.keuzeregel__tekst {
	font-size: 0.95rem;
}

.keuzeregel__bij {
	display: block;
	font-size: 0.85rem;
	color: var(--damp);
}

/* =========================================================================
   14. Bronweger
   ========================================================================= */

.bronweger__soorten {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin-bottom: 1.3rem;
}

.bronweger__soortknop {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	min-height: 62px;
	padding: 10px 14px;
	text-align: left;
	background-color: var(--pleister);
	border: 1px solid var(--voeg);
	border-radius: 6px;
	color: var(--kalk);
	font-family: 'Figtree', system-ui, sans-serif;
	font-size: 0.96rem;
	font-weight: 600;
	cursor: pointer;
}

.bronweger__soortknop:hover {
	border-color: var(--stoeprand);
}

.bronweger__soortknop[aria-pressed='true'] {
	background-color: var(--geul);
	border-color: var(--fuchsia);
}

.bronweger__soortbij {
	font-weight: 400;
	font-size: 0.85rem;
	color: var(--damp);
}

.bronweger__oordeel {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	padding: 16px 18px;
	background-color: var(--geul);
	border: 1px solid var(--voeg);
	border-left: 4px solid var(--fuchsia);
	border-radius: 6px;
	margin-bottom: 1rem;
}

.bronweger__oordeelnaam {
	font-family: 'Epilogue', system-ui, sans-serif;
	font-size: 1.28rem;
	font-weight: 700;
}

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

.bronweger__trede {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 40px;
	padding: 8px 14px;
	border: 1px solid var(--voeg);
	border-radius: 6px;
	background-color: var(--pleister);
	font-size: 0.94rem;
	margin-bottom: 0;
}

.bronweger__trede--nu {
	border-color: var(--fuchsia);
	background-color: var(--geul);
}

.bronweger__tredemerk {
	font-family: 'Epilogue', system-ui, sans-serif;
	font-weight: 700;
	font-size: 1.02rem;
	color: var(--zand);
	min-width: 2ch;
}

.bronweger__punten {
	font-family: 'Epilogue', system-ui, sans-serif;
	font-size: 2.5rem;
	font-weight: 700;
	color: var(--zand);
	line-height: 1;
}

.bronweger__puntbij {
	display: block;
	font-family: 'Figtree', system-ui, sans-serif;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--damp);
	margin-top: 0.4rem;
}

/* =========================================================================
   15. Verwachtingsbord
   ========================================================================= */

.verwachtingsbord__telling {
	display: flex;
	flex-wrap: wrap;
	gap: 26px;
	padding: 16px 18px;
	background-color: var(--geul);
	border: 1px solid var(--voeg);
	border-radius: 6px;
	margin-bottom: 1.2rem;
}

.verwachtingsbord__cijfer {
	font-family: 'Epilogue', system-ui, sans-serif;
	font-size: 2rem;
	font-weight: 700;
	color: var(--zand);
	line-height: 1;
	display: block;
}

.verwachtingsbord__cijfermerk {
	display: block;
	font-size: 0.79rem;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--damp);
	margin-top: 0.35rem;
}

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

.wringpaar {
	padding: 15px 17px;
	background-color: var(--pleister);
	border: 1px solid var(--voeg);
	border-left: 4px solid var(--verbod);
	border-radius: 6px;
	margin-bottom: 0;
}

.wringpaar__kop {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	font-weight: 600;
	margin-bottom: 0.45rem;
}

.wringpaar__tegen {
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--verbod);
}

.wringpaar__uitleg {
	color: var(--damp);
	font-size: 0.95rem;
	margin-bottom: 0;
}

/* =========================================================================
   16. Stemschijf
   ========================================================================= */

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

.stemschijf__regel {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 46px;
	padding: 7px 12px;
	background-color: var(--pleister);
	border: 1px solid var(--voeg);
	border-radius: 6px;
	margin-bottom: 0;
}

.stemschijf__plek {
	font-family: 'Epilogue', system-ui, sans-serif;
	font-weight: 700;
	font-size: 1rem;
	color: var(--asfalt);
	background-color: var(--zand);
	width: 30px;
	height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	flex: 0 0 auto;
}

.stemschijf__naam {
	flex: 1 1 auto;
	font-size: 0.96rem;
}

.stemschijf__kiezer {
	min-height: 40px;
	background-color: var(--geul);
	border: 1px solid var(--stoeprand);
	border-radius: 5px;
	color: var(--kalk);
	font-family: 'Figtree', system-ui, sans-serif;
	font-size: 0.92rem;
	padding: 7px 10px;
	flex: 0 0 auto;
}

.ronde {
	padding: 15px 17px;
	background-color: var(--pleister);
	border: 1px solid var(--voeg);
	border-radius: 6px;
	margin-bottom: 12px;
}

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

.ronde__kop {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 0.75rem;
}

.ronde__merk {
	font-family: 'Epilogue', system-ui, sans-serif;
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--zand);
}

.ronde__weg {
	font-size: 0.86rem;
	color: var(--damp);
}

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

.ronde__staaf {
	display: grid;
	grid-template-columns: minmax(0, 12rem) minmax(0, 1fr) 3.4rem;
	align-items: center;
	gap: 12px;
	margin-bottom: 0;
	font-size: 0.92rem;
}

/* Een span met een hoogte tekent niets: de goot en de balk zijn blokken en
   krijgen een vaste hoogte, geen percentage in een flexregel. */
.rondegoot {
	display: block;
	height: 14px;
	background-color: var(--geul);
	border: 1px solid var(--voeg);
	border-radius: 3px;
	overflow: hidden;
}

.rondebalk {
	display: block;
	height: 12px;
	background-color: var(--fuchsia);
	border-radius: 2px;
}

.rondebalk--weg {
	background-color: var(--verbod);
}

.ronde__getal {
	font-family: 'Epilogue', system-ui, sans-serif;
	font-weight: 700;
	color: var(--zand);
	text-align: right;
}

.stemschijf__slot {
	padding: 16px 18px;
	background-color: var(--geul);
	border: 1px solid var(--voeg);
	border-left: 4px solid var(--zand);
	border-radius: 6px;
	margin-top: 1.2rem;
}

/* =========================================================================
   17. Avondteller
   ========================================================================= */

.avondteller__staven {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 14px;
	margin-bottom: 1.3rem;
}

.avondteller__kolom {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

/* De goot is een blok met een vaste hoogte; de staaf erin groeit van
   onderaf. Percentages in een flexrij gaven eerder staven van nul pixels. */
.avondgoot {
	display: block;
	width: 100%;
	height: 148px;
	position: relative;
	background-color: var(--geul);
	border: 1px solid var(--voeg);
	border-radius: 5px;
	overflow: hidden;
}

.avondstaaf {
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 0;
	background-color: var(--fuchsia);
}

.avondstaaf--top {
	background-color: var(--zand);
}

.avondteller__dag {
	font-size: 0.86rem;
	font-weight: 600;
	text-align: center;
}

.avondteller__hoofden {
	font-family: 'Epilogue', system-ui, sans-serif;
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--zand);
	line-height: 1;
}

.avondteller__slot {
	padding: 16px 18px;
	background-color: var(--geul);
	border: 1px solid var(--voeg);
	border-left: 4px solid var(--fuchsia);
	border-radius: 6px;
}

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

.avondteller__uitval li {
	margin-bottom: 0;
	padding: 5px 11px;
	background-color: var(--pleister);
	border: 1px solid var(--voeg);
	border-radius: 4px;
	font-size: 0.88rem;
	color: var(--damp);
}

/* =========================================================================
   18. Het aanplakbiljet: hoe leden zich voorstellen
   ========================================================================= */

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

.aanplakbiljet {
	display: flex;
	flex-direction: column;
	background-color: var(--pleister);
	border: 1px solid var(--voeg);
	border-radius: 4px 4px 0 0;
}

.aanplakbiljet__binnen {
	padding: 22px 22px 16px;
	flex: 1 1 auto;
}

.aanplakbiljet__naam {
	font-family: 'Epilogue', system-ui, sans-serif;
	font-size: 1.12rem;
	font-weight: 700;
	margin-bottom: 0.15rem;
}

.aanplakbiljet__sinds {
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--zand);
	margin-bottom: 0.85rem;
}

.aanplakbiljet__tekst {
	color: var(--kalk);
	font-size: 0.97rem;
	margin-bottom: 0;
}

.franjerij {
	display: flex;
	gap: 4px;
	padding: 0 12px 0;
	list-style: none;
	margin: 0;
}

/* Een vaste hoogte en niet min-height: bij verticale tekst is de hoogte de
   regellengte, en zonder harde grens loopt de tekst gewoon de kaart uit in
   plaats van naar een tweede kolom te breken. */
.franje {
	flex: 1 1 0;
	height: 182px;
	overflow: hidden;
	padding: 9px 4px;
	background-color: var(--geul);
	border: 1px solid var(--voeg);
	border-top: 0;
	border-radius: 0 0 4px 4px;
	margin-bottom: 0;
	writing-mode: vertical-rl;
	text-orientation: mixed;
	font-size: 0.78rem;
	color: var(--damp);
	text-align: center;
	letter-spacing: 0.04em;
}

.franje--af {
	background-color: transparent;
	border-color: transparent;
	color: transparent;
	border-top: 0;
}

/* =========================================================================
   19. De bordlijst: het prikbord
   ========================================================================= */

.bordlijst {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--voeg);
}

.bordregel {
	border-bottom: 1px solid var(--voeg);
	padding: 22px 0;
	margin-bottom: 0;
}

.bordregel__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-bottom: 0.7rem;
}

.bordregel__bron {
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--zand);
}

.bordregel__datum {
	font-size: 0.86rem;
	color: var(--damp);
}

.bordregel__titel {
	font-size: 1.4rem;
	margin-bottom: 0.45rem;
}

.bordregel__titel a {
	text-decoration: none;
	color: var(--kalk);
	display: inline-flex;
	align-items: center;
	min-height: 38px;
}

.bordregel__titel a:hover {
	color: var(--fuchsia);
}

.bordregel__kort {
	color: var(--damp);
	max-width: 72ch;
	margin-bottom: 0.8rem;
}

.bordregel__duur {
	font-size: 0.85rem;
	color: var(--damp);
}

/* =========================================================================
   20. Het buurtstuk: een bericht van het prikbord
   ========================================================================= */

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

.buurtstuk__zeker {
	padding: 20px 22px;
	background-color: var(--geul);
	border: 1px solid var(--voeg);
	border-left: 4px solid var(--fuchsia);
	border-radius: 6px;
	margin-bottom: 2rem;
}

.buurtstuk__zekerkop {
	font-family: 'Figtree', system-ui, sans-serif;
	font-size: 0.79rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--zand);
	margin: 0 0 0.6rem;
}

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

.buurtstuk__inhoud p {
	font-size: 1.04rem;
}

/* =========================================================================
   21. Cijfers van de buurt
   -------------------------------------------------------------------------
   Nadrukkelijk drie bij twee. Zes kaarten in een auto-fit vallen op een
   tussenbreedte uit elkaar als vijf plus een, en die ene leest als vergeten.
   ========================================================================= */

.tellerrij {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-template-rows: repeat(2, auto);
	gap: 18px;
}

.tellerrij__vak {
	padding: 22px;
	background-color: var(--pleister);
	border: 1px solid var(--voeg);
	border-bottom: 3px solid var(--zand);
	border-radius: 8px;
}

.tellerrij__getal {
	font-family: 'Epilogue', system-ui, sans-serif;
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 1;
	color: var(--zand);
	display: block;
	margin-bottom: 0.5rem;
}

.tellerrij__merk {
	font-weight: 600;
	font-size: 0.98rem;
	display: block;
	margin-bottom: 0.35rem;
}

.tellerrij__bij {
	color: var(--damp);
	font-size: 0.9rem;
	margin-bottom: 0;
}

/* =========================================================================
   22. Vragen
   ========================================================================= */

.buurtvraag {
	border: 1px solid var(--voeg);
	border-radius: 8px;
	background-color: var(--pleister);
	margin-bottom: 12px;
}

.buurtvraag__vraag {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 52px;
	padding: 13px 18px;
	cursor: pointer;
	font-weight: 600;
	font-size: 1.02rem;
	list-style: none;
}

.buurtvraag__vraag::-webkit-details-marker {
	display: none;
}

.buurtvraag__teken {
	width: 0;
	height: 0;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 8px solid var(--zand);
	flex: 0 0 auto;
}

.buurtvraag[open] .buurtvraag__teken {
	border-top: 0;
	border-bottom: 8px solid var(--zand);
}

.buurtvraag__antwoord {
	padding: 0 18px 16px;
	color: var(--damp);
}

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

/* =========================================================================
   23. Het aanhaakblok: de oproep om mee te doen
   ========================================================================= */

.aanhaakblok {
	background-color: var(--pleister);
	background-image: linear-gradient(rgba(24, 18, 20, 0.9), rgba(24, 18, 20, 0.9)), url('images/band-aanhaak.jpg');
	background-size: cover;
	background-position: center;
	border-top: 1px solid var(--voeg);
	border-bottom: 1px solid var(--voeg);
	padding: 64px 0;
}

.aanhaakblok__binnen {
	max-width: 44rem;
}

.aanhaakblok__tekst {
	color: var(--kalk);
	font-size: 1.06rem;
}

/* =========================================================================
   24. Formulieren
   ========================================================================= */

.aanmeldbriefje {
	background-color: var(--pleister);
	border: 1px solid var(--voeg);
	border-radius: 9px;
	padding: 26px;
}

.invulregel {
	margin-bottom: 16px;
}

.invulregel__merk {
	display: block;
	font-weight: 600;
	font-size: 0.93rem;
	margin-bottom: 6px;
}

.invulregel__bij {
	display: block;
	font-weight: 400;
	font-size: 0.85rem;
	color: var(--damp);
}

.invulregel input[type='text'],
.invulregel input[type='email'],
.invulregel select,
.invulregel textarea {
	width: 100%;
	min-height: 44px;
	padding: 10px 13px;
	background-color: var(--geul);
	border: 1px solid var(--stoeprand);
	border-radius: 5px;
	color: var(--kalk);
	font-family: 'Figtree', system-ui, sans-serif;
	font-size: 0.98rem;
}

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

.invulregel input::placeholder,
.invulregel textarea::placeholder {
	color: var(--damp);
}

/* De lokdeur staat buiten beeld en wordt toch getekend: display none zou
   hem voor een robot herkenbaar maken. */
.lokdeur {
	position: absolute;
	left: -10000px;
	top: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.naklank {
	padding: 15px 18px;
	background-color: var(--geul);
	border: 1px solid var(--voeg);
	border-left: 4px solid var(--fuchsia);
	border-radius: 6px;
	margin-bottom: 1.5rem;
}

.naklank--fout {
	border-left-color: var(--verbod);
}

.naklank p {
	margin-bottom: 0;
}

.brievenbus {
	display: grid;
	gap: 14px;
	margin: 0;
}

.brievenbus div {
	padding: 16px 18px;
	background-color: var(--pleister);
	border: 1px solid var(--voeg);
	border-radius: 8px;
}

.brievenbus dt {
	font-size: 0.79rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--zand);
	margin-bottom: 0.3rem;
}

.brievenbus dd {
	margin: 0;
}

.brievenbus dd a {
	display: inline-flex;
	align-items: center;
	min-height: 38px;
	font-weight: 600;
}

/* =========================================================================
   25. Tabellen
   ========================================================================= */

.tafelrand {
	overflow-x: auto;
	border: 1px solid var(--voeg);
	border-radius: 8px;
}

.buurttafel {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95rem;
	min-width: 560px;
}

.buurttafel caption {
	text-align: left;
	padding: 14px 16px;
	color: var(--damp);
	font-size: 0.9rem;
	border-bottom: 1px solid var(--voeg);
}

.buurttafel th,
.buurttafel td {
	padding: 12px 16px;
	text-align: left;
	border-bottom: 1px solid var(--voeg);
	vertical-align: top;
}

.buurttafel thead th {
	background-color: var(--geul);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--zand);
	white-space: nowrap;
}

.buurttafel tbody tr:last-child th,
.buurttafel tbody tr:last-child td {
	border-bottom: 0;
}

/* =========================================================================
   26. Juridische bladzijden
   ========================================================================= */

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

.wetblad h2 {
	margin-top: 2.4rem;
	font-size: 1.4rem;
}

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

.wetblad h3 {
	margin-top: 1.7rem;
	font-size: 1.08rem;
}

.wetblad p,
.wetblad li {
	color: var(--damp);
}

.wetblad strong {
	color: var(--kalk);
}

/* =========================================================================
   27. De koekstoep
   ========================================================================= */

.koekstoep {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 30;
	width: 100%;
	background-color: var(--pleister);
	border-top: 1px solid var(--stoeprand);
	padding: 16px 0;
}

.koekstoep__binnen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	width: 100%;
	max-width: var(--breed);
	margin: 0 auto;
	padding: 0 24px;
}

.koekstoep__tekst {
	flex: 1 1 22rem;
	margin-bottom: 0;
	font-size: 0.93rem;
	color: var(--kalk);
}

.koekstoep__knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.koekwis {
	padding: 18px 20px;
	background-color: var(--geul);
	border: 1px solid var(--voeg);
	border-radius: 8px;
}

.koekwis__melding {
	margin: 12px 0 0;
	color: var(--zand);
	font-weight: 600;
}

/* =========================================================================
   28. De achtererf: de voet van de site
   ========================================================================= */

.achtererf {
	background-color: var(--pleister);
	border-top: 1px solid var(--voeg);
	padding: 52px 0 30px;
	margin-top: 0;
}

.achtererf__raster {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1fr;
	gap: 34px;
	margin-bottom: 2.4rem;
}

.achtererf__merk {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	font-family: 'Epilogue', system-ui, sans-serif;
	font-size: 1.3rem;
	font-weight: 700;
	text-decoration: none;
	margin-bottom: 0.7rem;
}

.achtererf__zin {
	color: var(--damp);
	font-size: 0.95rem;
	max-width: 34ch;
}

.achtererf__kop {
	font-size: 0.79rem;
	font-weight: 600;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--zand);
	margin: 0 0 0.9rem;
}

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

.achtererf__lijst li {
	margin-bottom: 0;
}

.achtererf__lijst a {
	display: inline-flex;
	align-items: center;
	min-height: 38px;
	font-size: 0.94rem;
	color: var(--damp);
	text-decoration: none;
}

.achtererf__lijst a:hover {
	color: var(--kalk);
	text-decoration: underline;
}

.achtererf__adres {
	font-style: normal;
	color: var(--damp);
	font-size: 0.94rem;
}

.achtererf__adres a {
	display: inline-flex;
	align-items: center;
	min-height: 38px;
	color: var(--fuchsia);
}

.losvanuitgever {
	border-top: 1px solid var(--voeg);
	padding-top: 22px;
	color: var(--damp);
	font-size: 0.88rem;
	max-width: 92ch;
}

.losvanuitgever p {
	margin-bottom: 0.6rem;
}

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

.achtererf__slotregel {
	border-top: 1px solid var(--voeg);
	margin-top: 22px;
	padding-top: 18px;
	color: var(--damp);
	font-size: 0.86rem;
}

/* De losse verklaring op de startpagina: een eigen stil blok, geen voetnoot. */
.verklaringsblok {
	padding: 24px 26px;
	background-color: var(--pleister);
	border: 1px solid var(--voeg);
	border-left: 4px solid var(--zand);
	border-radius: 8px;
}

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

/* =========================================================================
   29. Vierhonderdvier
   ========================================================================= */

.verkeerdestraat {
	padding: 92px 0;
	text-align: center;
}

.verkeerdestraat__getal {
	font-family: 'Epilogue', system-ui, sans-serif;
	font-size: clamp(4.5rem, 14vw, 9rem);
	font-weight: 700;
	line-height: 1;
	color: var(--zand);
	margin: 0 0 1rem;
	display: block;
}

.verkeerdestraat__uitleg {
	max-width: 46ch;
	margin: 0 auto 2rem;
	color: var(--damp);
}

.verkeerdestraat .claxonrij {
	justify-content: center;
}

/* =========================================================================
   30. Verschijnen bij het scrollen
   -------------------------------------------------------------------------
   Alleen onder de klasse js, die een klein script in de kop zet. Zonder
   javascript staat er dus niets doorzichtig op de bladzijde.
   ========================================================================= */

.js .opdaagt {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 520ms ease, transform 520ms ease;
}

.js .opdaagt.opdaagt--op {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.js .opdaagt {
		transition: none;
	}
}

/* =========================================================================
   31. Smallere schermen
   ========================================================================= */

@media (max-width: 1000px) {
	.kaartrij--vier {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

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

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

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

@media (max-width: 860px) {
	.veranda__navigatie {
		display: none;
		order: 3;
		width: 100%;
		margin-left: 0;
		padding-bottom: 10px;
	}

	.veranda__navigatie.veranda__navigatie--open {
		display: block;
	}

	.veranda__binnen {
		flex-wrap: wrap;
	}

	.deurbel {
		display: flex;
		order: 2;
	}

	.veranda__claxon {
		order: 1;
		margin-left: auto;
	}

	.straatlijst {
		flex-direction: column;
		align-items: stretch;
		gap: 2px;
	}

	.straatlijst a {
		min-height: 44px;
	}

	.kaartrij--drie,
	.kaartrij--twee,
	.kaartrij--vier {
		grid-template-columns: minmax(0, 1fr);
	}

	.tellerrij {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: repeat(3, auto);
	}

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

	.skyline__binnen {
		padding: 62px 24px 54px;
	}
}

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

	.stoep {
		padding: 48px 0;
	}

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

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

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

	.gereedschap {
		padding: 20px;
	}

	.gereedschap__vak {
		padding: 15px;
	}

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

	/* De goot krijgt de hele breedte onder de naam in plaats van een derde
	   kolom die op deze breedte tot een streepje krimpt. */
	.rondegoot {
		grid-column: 1 / -1;
	}

	.avondteller__staven {
		gap: 8px;
	}

	.avondgoot {
		height: 112px;
	}

	.avondteller__dag {
		font-size: 0.76rem;
	}

	/* De brede tabel wordt een stapel met de kop uit het data-attribuut. */
	.buurttafel {
		min-width: 0;
	}

	/* Een kop die tot een pixel wordt samengevouwen laat zijn cellen op volle
	   grootte achter: onzichtbare rechthoeken die precies over de eerste rij
	   met gegevens vallen en daar de kliks opvangen. De cellen krijgen daarom
	   zelf de behandeling, niet alleen de kop eromheen. Ze blijven wel in de
	   toegankelijkheidsboom staan, dus scope="col" doet nog zijn werk. */
	.buurttafel thead {
		display: block;
		height: 0;
		overflow: hidden;
	}

	.buurttafel thead th {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		border: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.buurttafel tr {
		display: block;
		border-bottom: 1px solid var(--voeg);
		padding: 6px 0;
	}

	.buurttafel tbody tr:last-child {
		border-bottom: 0;
	}

	.buurttafel td,
	.buurttafel th {
		display: block;
		border-bottom: 0;
		padding: 6px 16px;
		white-space: normal;
	}

	.buurttafel td::before,
	.buurttafel tbody th::before {
		content: attr(data-kop);
		display: block;
		font-size: 0.74rem;
		font-weight: 600;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: var(--zand);
		margin-bottom: 2px;
	}

	.franjerij {
		padding: 0 8px;
	}

	.franje {
		height: 160px;
		font-size: 0.72rem;
	}

	.skyline__binnen {
		padding: 48px 20px 44px;
	}

	.buurtblok {
		padding: 0 20px;
	}

	.koekstoep__binnen {
		padding: 0 20px;
	}
}

@media (max-width: 430px) {
	.avondteller__staven {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 5px;
	}

	.avondteller__hoofden {
		font-size: 1.05rem;
	}

	.avondteller__dag {
		font-size: 0.68rem;
		letter-spacing: -0.01em;
	}

	.stemschijf__regel {
		flex-wrap: wrap;
	}

	.stemschijf__kiezer {
		width: 100%;
	}
}

/* =========================================================================
   32. Afdrukken
   ========================================================================= */

@media print {
	.veranda,
	.koekstoep,
	.deurbel,
	.gereedschap__vak {
		display: none;
	}

	body {
		background-color: #ffffff;
		color: #1a1a1a;
	}
}