/*
Theme Name: Winstplein
Theme URI: https://winstplein.org/
Author: PingVinni
Author URI: https://winstplein.org/
Description: Guia não oficial em português europeu para Subnautica, com profundidades, ar, veículos, bases e calculadoras interativas.
Version: 2.2.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: winstplein
*/

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

@font-face {
	font-family: 'Syne';
	src: url('fonts/syne-700-latin.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	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: 'Syne';
	src: url('fonts/syne-700-latin-ext.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	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: 'Public Sans';
	src: url('fonts/public-sans-400-latin.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	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: 'Public Sans';
	src: url('fonts/public-sans-400-latin-ext.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	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: 'Public Sans';
	src: url('fonts/public-sans-600-latin.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
	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: 'Public Sans';
	src: url('fonts/public-sans-600-latin-ext.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
	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. Palet
   -------------------------------------------------------------------------
   De verhoudingen zijn met de rekenmachine bepaald voordat er een regel opmaak
   stond, in beide richtingen en ook op de paneelkleur:

     zout     op diepte 15,13:1  · op rif 13,48:1
     mist     op diepte  8,60:1  · op rif  7,66:1
     biolicht op diepte 11,63:1  · op rif 10,36:1  · diepte erop 11,63:1
     ijs      op diepte 10,19:1  · op rif  9,07:1  · diepte erop 10,19:1
     alarm    op diepte  7,32:1  · op rif  6,52:1  · diepte erop  7,32:1
     reling   op diepte  4,26:1  · op rif  3,80:1  — alleen grote koppen
     naad     op diepte  1,51:1  — nooit als kleur van letters, alleen als lijn

   naad staat met opzet onder 3:1 en mag daarom nergens in een color-regel
   voorkomen. De grote cijfers van de dieptes staan in ijs en niet in naad,
   want een decoratief cijfer in randkleur haalt geen 3:1 en is dan onleesbaar.
   ========================================================================= */

:root {
	--diepte: #0a1826;
	--rif: #122334;
	--goot: #1a2c3e;
	--naad: #25394c;
	--reling: #5f7f9b;
	--zout: #e4edf5;
	--mist: #a3b6c7;
	--biolicht: #aee05f;
	--ijs: #86cdea;
	--alarm: #f2887a;

	--kop: 'Syne', 'Trebuchet MS', sans-serif;
	--tekst: 'Public Sans', 'Segoe UI', system-ui, sans-serif;

	--breed: 1180px;
	--kier: clamp(1rem, 3vw, 2rem);
	--rond: 4px;
	--raakvlak: 44px;
}

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

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

/* Het attribuut hidden verliest van elke klasse die display zet, en dan staat
   een element dat als verborgen bedoeld is gewoon in beeld. Een keer voor het
   hele thema rechtzetten. */
[hidden] {
	display: none !important;
}

html {
	scroll-behavior: smooth;
	/* Ankers moeten onder de plakkende kop uitkomen en niet erachter. */
	scroll-padding-top: 6.5rem;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--diepte);
	color: var(--zout);
	font: 400 1rem/1.7 var(--tekst);
	overflow-x: hidden;
}

h1,
h2,
h3 {
	font-family: var(--kop);
	font-weight: 700;
	line-height: 1.18;
	letter-spacing: -0.01em;
	margin: 0 0 0.6em;
	text-wrap: balance;
}

h1 {
	font-size: clamp(2rem, 5.2vw, 3.3rem);
}

h2 {
	font-size: clamp(1.5rem, 3.4vw, 2.2rem);
}

h3 {
	font-size: clamp(1.1rem, 2vw, 1.35rem);
}

p {
	margin: 0 0 1.1em;
}

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

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

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

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

figure {
	margin: 0;
}

figcaption {
	color: var(--mist);
	font-size: 0.86rem;
	line-height: 1.55;
	margin-top: 0.6rem;
}

code {
	font-family: ui-monospace, 'Cascadia Mono', 'Consolas', monospace;
	font-size: 0.9em;
	color: var(--ijs);
	background: var(--goot);
	border: 1px solid var(--naad);
	border-radius: var(--rond);
	padding: 0.1em 0.4em;
}

em {
	font-style: normal;
	color: var(--ijs);
}

/* Alleen voor schermlezers. */
.doofstil {
	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;
}

.sprongluik {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 90;
	background: var(--biolicht);
	color: var(--diepte);
	font-weight: 600;
	padding: 0.85rem 1.3rem;
	border-radius: 0 0 var(--rond) 0;
}

.sprongluik:focus {
	left: 0;
	color: var(--diepte);
}

/* =========================================================================
   4. Omhulsel en secties
   ========================================================================= */

.rifgrond {
	width: 100%;
	max-width: var(--breed);
	margin: 0 auto;
	padding: 0 var(--kier);
}

.dek {
	padding: clamp(2.6rem, 6vw, 4.6rem) 0;
	position: relative;
}

.dek--kort {
	padding: clamp(1.8rem, 4vw, 3rem) 0;
}

.dek--paneel {
	background: var(--rif);
	border-top: 1px solid var(--naad);
	border-bottom: 1px solid var(--naad);
}

.dek--diep {
	background: var(--diepte);
}

.dek__boven {
	font-family: var(--kop);
	font-size: 0.78rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ijs);
	margin-bottom: 0.7rem;
}

.dek__leid {
	font-size: clamp(1.02rem, 1.6vw, 1.15rem);
	color: var(--mist);
	max-width: 62ch;
}

.dek__stil {
	max-width: 74ch;
}

.dek__stil h2 {
	margin-top: 2rem;
}

.dek__stil h3 {
	margin-top: 1.5rem;
	color: var(--ijs);
}

.dek__stil ul {
	padding-left: 1.2rem;
	margin: 0 0 1.2rem;
}

.dek__stil li {
	margin-bottom: 0.55rem;
}

.dek__voetlink {
	margin: 1.4rem 0 0;
}

.dek__voetlink a {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	min-height: var(--raakvlak);
	font-weight: 600;
}

/* De pijl is een css-driehoek en geen teken uit het lettertype: Syne heeft de
   pijlen U+2191 en U+2193 niet, en dan valt de browser terug op een ander
   lettertype midden in de regel. */
.dek__voetlink a::after {
	content: '';
	width: 0;
	height: 0;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-left: 7px solid currentColor;
	flex: none;
}

.dek__duo {
	display: grid;
	gap: clamp(1.6rem, 4vw, 3rem);
	align-items: center;
	grid-template-columns: 1fr;
}

.dek__duotekst > :last-child {
	margin-bottom: 0;
}

.dek__duotekst--hulp {
	background: var(--goot);
	border: 1px solid var(--naad);
	border-radius: var(--rond);
	padding: clamp(1.2rem, 3vw, 1.8rem);
	align-self: start;
}

.dek__duotekst--hulp h3 {
	color: var(--ijs);
	margin-top: 1.4rem;
}

.dek__duobeeld img {
	border-radius: var(--rond);
	border: 1px solid var(--naad);
	width: 100%;
}

.dek__gegevens {
	margin: 1.6rem 0 0;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.4rem 1.2rem;
	font-size: 0.95rem;
}

.dek__gegevens dt {
	color: var(--mist);
}

.dek__gegevens dd {
	margin: 0;
}

.dek__gegevens dd a {
	display: inline-flex;
	align-items: center;
	min-height: var(--raakvlak);
}

/* =========================================================================
   5. Brugdek
   ========================================================================= */

.brugdek {
	position: sticky;
	top: 0;
	z-index: 40;
	background: rgba(10, 24, 38, 0.97);
	border-bottom: 1px solid var(--naad);
	backdrop-filter: blur(6px);
}

.brugdek__binnen {
	width: 100%;
	max-width: var(--breed);
	margin: 0 auto;
	padding: 0.7rem var(--kier);
	display: flex;
	align-items: center;
	gap: 0.9rem;
	flex-wrap: wrap;
}

.brugdek__merk {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	text-decoration: none;
	color: var(--zout);
	min-height: var(--raakvlak);
	flex: none;
}

.brugdek__naam {
	font-family: var(--kop);
	font-weight: 700;
	font-size: 1.16rem;
	line-height: 1.1;
	letter-spacing: -0.01em;
}

.brugdek__naam span {
	color: var(--ijs);
}

.brugdek__onder {
	display: block;
	font-family: var(--tekst);
	font-weight: 400;
	font-size: 0.68rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--mist);
	margin-top: 0.2rem;
}

.luikknop {
	display: none;
	align-items: center;
	gap: 0.55rem;
	background: var(--rif);
	color: var(--zout);
	border: 1px solid var(--reling);
	border-radius: var(--rond);
	font: 600 0.9rem/1 var(--tekst);
	min-height: var(--raakvlak);
	padding: 0 0.9rem;
	cursor: pointer;
}

.luikknop__streepjes {
	display: inline-grid;
	gap: 3px;
}

.luikknop__streepjes i {
	display: block;
	width: 17px;
	height: 2px;
	background: var(--biolicht);
}

.brugdek__navigatie {
	flex: 1 1 auto;
}

.luiklijst {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.15rem 1rem;
}

.luiklijst a {
	display: inline-flex;
	align-items: center;
	min-height: var(--raakvlak);
	color: var(--zout);
	text-decoration: none;
	font-size: 0.92rem;
	border-bottom: 2px solid transparent;
}

.luiklijst a:hover {
	color: var(--biolicht);
	border-bottom-color: var(--biolicht);
}

/* De marge naar links hoort op de knop en niet op de hamburger: op 390 px duwt
   hij anders het menu naar de volgende regel en valt de kop in twee stukken. */
.brugdek__hoofdknop {
	margin-left: auto;
	flex: none;
}

/* =========================================================================
   6. Ventielen — de knoppen
   ========================================================================= */

.ventiel {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: var(--raakvlak);
	padding: 0.6rem 1.35rem;
	border-radius: var(--rond);
	border: 1px solid transparent;
	font: 600 0.95rem/1.25 var(--tekst);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.ventiel--duik {
	background: var(--biolicht);
	color: var(--diepte);
}

.ventiel--duik:hover {
	background: var(--ijs);
	color: var(--diepte);
}

.ventiel--stil {
	background: transparent;
	color: var(--zout);
	border-color: var(--reling);
}

.ventiel--stil:hover {
	color: var(--biolicht);
	border-color: var(--biolicht);
}

.ventiel--kort {
	padding: 0.45rem 0.95rem;
	font-size: 0.88rem;
}

/* =========================================================================
   7. Drukband — de scheiding: bellen die opstijgen boven een haarlijn
   ========================================================================= */

.drukband {
	height: 26px;
	border-top: 1px solid var(--naad);
	background-repeat: repeat-x;
	background-position: center top;
	background-size: 240px 26px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='26'%3E%3Cg fill='none' stroke='%2325394c' stroke-width='1.4'%3E%3Ccircle cx='12' cy='17' r='3'/%3E%3Ccircle cx='40' cy='14' r='2.2'/%3E%3Ccircle cx='66' cy='18' r='2.6'/%3E%3Ccircle cx='92' cy='13' r='2'/%3E%3Ccircle cx='120' cy='12' r='5.4' stroke='%2386cdea'/%3E%3Ccircle cx='150' cy='17' r='2.4'/%3E%3Ccircle cx='176' cy='14' r='3'/%3E%3Ccircle cx='202' cy='18' r='2.2'/%3E%3Ccircle cx='226' cy='15' r='2.6'/%3E%3C/g%3E%3Cpath d='M118.4 9.2a5.4 5.4 0 0 1 3.4-1.6' stroke='%23e4edf5' stroke-width='1' fill='none'/%3E%3C/svg%3E");
}

/* =========================================================================
   8. Wateroppervlak — de kop van de voorpagina
   ========================================================================= */

.wateroppervlak {
	padding: clamp(3.4rem, 9vw, 7rem) 0;
	overflow: hidden;
}

/* Deze laag krijgt met opzet geen absoluut geplaatste ::before op het element
   met de tekst: een ::before tekent boven de eigen inhoud van zijn element, en
   dan ligt er een sluier over de letters in plaats van eronder. Het beeld en de
   sluier staan daarom in een eigen element achter de tekst. */
.wateroppervlak__beeld {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	z-index: 0;
}

.wateroppervlak__beeld::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg, rgba(10, 24, 38, 0.95) 0%, rgba(10, 24, 38, 0.88) 46%, rgba(10, 24, 38, 0.6) 100%);
}

.wateroppervlak__binnen {
	position: relative;
	z-index: 1;
}

.wateroppervlak__boven {
	font-family: var(--kop);
	font-size: 0.78rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ijs);
	margin-bottom: 0.9rem;
}

.wateroppervlak h1 {
	max-width: 22ch;
}

.wateroppervlak__leid {
	max-width: 58ch;
	font-size: clamp(1.02rem, 1.7vw, 1.18rem);
	color: var(--zout);
}

.wateroppervlak__knoppen,
.opduikoproep__knoppen,
.overboord__knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem;
	margin: 1.8rem 0 0;
}

/* =========================================================================
   9. Dieptelint — de vier dieptes
   ========================================================================= */

.dieptelint {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr;
	counter-reset: stap;
}

.dieptelint__stap {
	background: var(--rif);
	border: 1px solid var(--naad);
	border-left: 3px solid var(--ijs);
	border-radius: var(--rond);
	padding: 1.2rem 1.3rem;
}

/* Een groot decoratief cijfer in randkleur haalt geen 3:1 en is dan geen cijfer
   maar een vlek. Deze staat daarom in ijs: 10,19:1 op de paginakleur. */
.dieptelint__cijfer,
.meterbord__cijfer,
.logregel__diepte {
	display: block;
	font-family: var(--kop);
	font-weight: 700;
	font-size: clamp(1.9rem, 4vw, 2.5rem);
	line-height: 1;
	color: var(--ijs);
	margin-bottom: 0.5rem;
}

.dieptelint__cijfer small,
.meterbord__cijfer small,
.logregel__diepte small {
	font-size: 0.42em;
	font-family: var(--tekst);
	font-weight: 600;
	color: var(--mist);
	margin-left: 0.2em;
}

.dieptelint__stap h3 {
	margin-bottom: 0.4rem;
}

.dieptelint__stap p {
	color: var(--mist);
	font-size: 0.94rem;
	margin: 0;
}

/* =========================================================================
   10. Goten en balken
   -------------------------------------------------------------------------
   Een balk zonder goot erachter leest als een vlek: je ziet niet hoeveel er nog
   bij kon. De goot heeft daarom altijd een vaste maat en de balk staat erin,
   nooit als deel van een flex-regel met percentages.
   ========================================================================= */

.laaggoot {
	display: block;
	position: relative;
	background: var(--goot);
	border: 1px solid var(--naad);
	border-radius: var(--rond);
	height: 18px;
	overflow: hidden;
}

/* Een span met een hoogte tekent niets zolang hij inline is. */
.laagbalk {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	border-radius: 2px;
}

.laagbalk--lucht {
	background: var(--biolicht);
}

.laagbalk--lucht[data-vol='ja'] {
	background: var(--alarm);
}

.laagbalk--romp {
	background: var(--ijs);
}

.laaggoot--ladder {
	height: 34px;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0 0.6rem;
	overflow: visible;
	border-radius: var(--rond);
}

.laaggoot--ladder .laagbalk {
	opacity: 0.32;
	border-radius: var(--rond);
}

.laaggoot__naam,
.laaggoot__cijfer {
	position: relative;
	z-index: 1;
	font-size: 0.84rem;
	line-height: 1.2;
}

.laaggoot__naam {
	color: var(--zout);
}

.laaggoot__cijfer {
	margin-left: auto;
	font-weight: 600;
	color: var(--ijs);
	font-variant-numeric: tabular-nums;
}

/* De zandtextuur ligt achter de schaal van het Duikschema. Er staat op deze goot
   geen letter: de nummers zitten in de balken zelf, op een dekkende kleur. Een
   textuur onder tekst zou hier een pikselmeting nodig hebben; onder een lege goot
   niet. Het pad is relatief aan style.css in de wortel van het thema. */
.laaggoot--schaal {
	height: 46px;
	overflow: visible;
	background-color: var(--goot);
	background-image: url('images/zandtextuur.jpg');
	background-size: cover;
	background-position: center;
	background-blend-mode: multiply;
}

.laagbalk--handeling {
	background: var(--ijs);
	border: 1px solid var(--diepte);
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 12px;
}

.laagbalk--handeling i {
	font-style: normal;
	font-weight: 600;
	font-size: 0.75rem;
	color: var(--diepte);
}

.laagbalk--handeling[data-botst='ja'] {
	background: var(--alarm);
}

.laaggoot__drempel {
	position: absolute;
	top: -4px;
	bottom: -4px;
	width: 2px;
	background: var(--alarm);
	z-index: 2;
}

/* =========================================================================
   11. Rekenblad een: Dieptegrens
   ========================================================================= */

.dieptegrens__blad,
.duikschema__blad,
.drukbegroting__blad {
	display: grid;
	gap: clamp(1.4rem, 3.5vw, 2.4rem);
	grid-template-columns: 1fr;
	margin-top: 1.8rem;
}

.dieptegrens__stuur,
.dieptegrens__uitslag,
.duikschema__schaal,
.drukbegroting__uitslag,
.dieptelagen__uitslag {
	background: var(--diepte);
	border: 1px solid var(--naad);
	border-radius: var(--rond);
	padding: clamp(1.1rem, 3vw, 1.7rem);
}

.veldbuis {
	display: block;
	margin: 0 0 1.2rem;
	border: 0;
	padding: 0;
}

/* De :not is hier geen sieraad. .veldbuis > label is (0,1,1) en verslaat .peilchip
   met (0,1,0): zonder die uitzondering wordt elk keuzeplaatje een blok over de
   volle breedte met het rondje boven de tekst in plaats van ernaast. Dat kwam
   door geen enkele autotoets naar boven en werd met het oog gevonden. */
.veldbuis > label:not(.peilchip),
.veldbuis legend {
	display: block;
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--mist);
	margin-bottom: 0.5rem;
	padding: 0;
}

/* Een rij korte keuzeplaatjes naast elkaar. */
.veldbuis--chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

.veldbuis--chips legend {
	flex: 1 0 100%;
	margin-bottom: 0;
}

.veldbuis--chips .peilchip {
	margin: 0;
}

.veldbuis input[type='text'],
.veldbuis input[type='email'],
.veldbuis input[type='number'],
.veldbuis select,
.veldbuis textarea {
	display: block;
	width: 100%;
	min-height: var(--raakvlak);
	background: var(--goot);
	color: var(--zout);
	border: 1px solid var(--reling);
	border-radius: var(--rond);
	padding: 0.55rem 0.75rem;
	font: 400 1rem/1.5 var(--tekst);
}

.veldbuis textarea {
	resize: vertical;
}

/* Het raakvlak van een schuif is niet de knop maar het hele element: op een
   telefoon moet dat 44 px hoog zijn, ook al is de baan zelf dun. */
input[type='range'] {
	-webkit-appearance: none;
	appearance: none;
	display: block;
	width: 100%;
	height: var(--raakvlak);
	background: transparent;
	margin: 0;
	cursor: pointer;
}

input[type='range']::-webkit-slider-runnable-track {
	height: 8px;
	background: var(--goot);
	border: 1px solid var(--naad);
	border-radius: var(--rond);
}

input[type='range']::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 24px;
	height: 24px;
	margin-top: -9px;
	background: var(--biolicht);
	border: 2px solid var(--diepte);
	border-radius: 50%;
}

input[type='range']::-moz-range-track {
	height: 8px;
	background: var(--goot);
	border: 1px solid var(--naad);
	border-radius: var(--rond);
}

input[type='range']::-moz-range-thumb {
	width: 22px;
	height: 22px;
	background: var(--biolicht);
	border: 2px solid var(--diepte);
	border-radius: 50%;
}

.dieptegrens__streepjes,
.duikschema__streepjes {
	display: flex;
	justify-content: space-between;
	color: var(--mist);
	font-size: 0.76rem;
	font-variant-numeric: tabular-nums;
	margin: 0 0 0.5rem;
}

.dieptegrens__streepjes i,
.duikschema__streepjes i {
	font-style: normal;
}

.dieptegrens__meter {
	display: block;
	font-family: var(--kop);
	font-weight: 700;
	font-size: clamp(1.7rem, 4vw, 2.3rem);
	color: var(--ijs);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.peilchip {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	min-height: var(--raakvlak);
	margin: 0 0.5rem 0.5rem 0;
	padding: 0.35rem 0.85rem;
	background: var(--goot);
	border: 1px solid var(--naad);
	border-radius: var(--rond);
	cursor: pointer;
	font-size: 0.92rem;
}

.peilchip input {
	width: 20px;
	height: 20px;
	accent-color: var(--biolicht);
	flex: none;
	margin: 0;
}

.peilchip span {
	display: block;
}

.peilchip small {
	display: block;
	color: var(--mist);
	font-size: 0.8rem;
	line-height: 1.4;
	margin-top: 0.15rem;
}

.peilchip:has(input:checked) {
	border-color: var(--reling);
	background: var(--rif);
}

.peilchip--breed {
	display: flex;
	width: 100%;
	margin-right: 0;
	align-items: flex-start;
	padding: 0.7rem 0.9rem;
}

.peilchip--breed input {
	margin-top: 0.15rem;
}

.peilchip--klein {
	font-size: 0.85rem;
	padding: 0.3rem 0.7rem;
}

.uitslag {
	display: inline-block;
	font-family: var(--kop);
	font-weight: 700;
	font-size: 0.82rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border-radius: var(--rond);
	padding: 0.4rem 0.8rem;
	margin: 0 0 1rem;
}

.uitslag--houdt {
	background: var(--biolicht);
	color: var(--diepte);
}

.uitslag--knapt {
	background: var(--alarm);
	color: var(--diepte);
}

.dieptegrens__tuig {
	margin-bottom: 0.4rem;
}

.dieptegrens__kort {
	color: var(--mist);
}

.dieptegrens__lucht {
	margin: 1.3rem 0 1rem;
}

.dieptegrens__cijfers {
	display: block;
	margin-top: 0.5rem;
	color: var(--mist);
	font-size: 0.9rem;
}

.dieptegrens__cijfers b {
	color: var(--zout);
	font-variant-numeric: tabular-nums;
}

.dieptegrens__waarom {
	background: var(--goot);
	border-left: 3px solid var(--alarm);
	border-radius: var(--rond);
	padding: 0.8rem 1rem;
	margin: 0 0 1rem;
	font-size: 0.92rem;
	color: var(--zout);
}

.dieptegrens__versie,
.duikschema__versie,
.drukbegroting__versie,
.dieptelagen__versie,
.tuigkaart__versie {
	color: var(--mist);
	font-size: 0.8rem;
	margin: 0;
}

/* =========================================================================
   12. Rekenblad twee: Duikschema
   ========================================================================= */

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

.duikschema__regel {
	background: var(--diepte);
	border: 1px solid var(--naad);
	border-radius: var(--rond);
	padding: 0.8rem 1rem;
}

.duikschema__regel[data-uit='ja'] {
	opacity: 1;
	border-style: dashed;
}

.duikschema__naam {
	display: block;
	font-weight: 600;
}

.duikschema__feiten {
	display: block;
	color: var(--mist);
	font-size: 0.85rem;
	margin-bottom: 0.35rem;
}

.duikschema__vanaf {
	display: block;
	color: var(--ijs);
	font-size: 0.85rem;
	font-variant-numeric: tabular-nums;
}

.duikschema__cijfers,
.drukbegroting__cijfers,
.dieptelagen__cijfers {
	margin: 1.2rem 0;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0.5rem 1rem;
	font-size: 0.94rem;
}

.duikschema__cijfers dt,
.drukbegroting__cijfers dt,
.dieptelagen__cijfers dt {
	color: var(--mist);
}

.duikschema__cijfers dd,
.drukbegroting__cijfers dd,
.dieptelagen__cijfers dd {
	margin: 0;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* Dit paneel is het smalste van de drie, en daar breekt een lange waarde als
   "geen enkele meter" midden in de regel af. Hier dus onder elkaar. */
.dieptelagen__cijfers {
	grid-template-columns: 1fr;
	gap: 0.15rem;
}

.dieptelagen__cijfers dd {
	text-align: left;
	margin-bottom: 0.5rem;
}

.duikschema__cijfers b,
.drukbegroting__cijfers b,
.dieptelagen__cijfers b {
	color: var(--ijs);
	font-size: 1.08rem;
}

.duikschema__gebrek {
	background: var(--goot);
	border-left: 3px solid var(--alarm);
	border-radius: var(--rond);
	padding: 0.8rem 1rem;
	font-size: 0.92rem;
}

/* =========================================================================
   13. Rekenblad drie: Drukbegroting
   ========================================================================= */

.drukbegroting__diepte {
	font-family: var(--kop);
	font-weight: 700;
	line-height: 1;
	margin: 0 0 1rem;
	color: var(--ijs);
}

.drukbegroting__diepte b {
	font-size: clamp(2.2rem, 6vw, 3.2rem);
	font-variant-numeric: tabular-nums;
}

.drukbegroting__diepte small {
	display: block;
	font-family: var(--tekst);
	font-weight: 400;
	font-size: 0.85rem;
	color: var(--mist);
	margin-top: 0.4rem;
}

.drukbegroting__uitleg {
	font-size: 0.92rem;
	color: var(--mist);
}

/* =========================================================================
   14. Rekenblad vier: Dieptelagen
   ========================================================================= */

.dieptelagen__blad {
	display: grid;
	gap: clamp(1.4rem, 3.5vw, 2.2rem);
	grid-template-columns: 1fr;
	margin-top: 1.8rem;
}

.dieptelagen__beeld {
	display: flex;
	gap: 0.8rem;
	background: var(--diepte);
	border: 1px solid var(--naad);
	border-radius: var(--rond);
	padding: 1.2rem 1rem;
}

.peilas {
	position: relative;
	width: 3.6rem;
	height: 320px;
	flex: none;
	border-right: 1px solid var(--naad);
}

.peilstreep {
	position: absolute;
	right: 0;
	width: 100%;
	height: 1px;
	background: var(--naad);
}

.peilstreep i {
	position: absolute;
	right: 0.4rem;
	top: -0.7rem;
	font-style: normal;
	font-size: 0.72rem;
	color: var(--mist);
	font-variant-numeric: tabular-nums;
}

.dieptelagen__balken {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 0.5rem;
	flex: 1 1 auto;
	min-width: 0;
}

.laaggoot--staand {
	height: 320px;
	flex: 1 1 0;
	min-width: 0;
	overflow: visible;
}

/* De koraaltextuur zit in de balken van de lagen, getint met de accentkleur. Ook
   hier staat geen tekst op: de naam van de laag ligt in de goot eronder. */
.laaggoot--staand .laagbalk {
	left: 0;
	width: 100%;
	height: auto;
	background-color: var(--ijs);
	background-image: url('images/koraaltextuur.jpg');
	background-size: cover;
	background-position: center;
	background-blend-mode: multiply;
	border-radius: var(--rond);
}

.laaggoot--staand[data-uit='ja'] .laagbalk {
	background: var(--naad);
}

.laaggoot--staand .laaggoot__naam {
	position: absolute;
	bottom: 0.4rem;
	left: 50%;
	transform: translateX(-50%) rotate(-90deg);
	transform-origin: center;
	white-space: nowrap;
	font-size: 0.7rem;
	color: var(--mist);
	pointer-events: none;
}

/* =========================================================================
   15. Patrijspoorten — het logboek
   ========================================================================= */

.patrijspoort {
	display: grid;
	gap: clamp(1.6rem, 4vw, 2.6rem);
	grid-template-columns: 1fr;
	margin-top: 1.6rem;
}

.poortkaart h3 {
	margin: 0.9rem 0 0.3rem;
}

.poortkaart h3 a {
	color: var(--zout);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	min-height: var(--raakvlak);
}

.poortkaart h3 a:hover {
	color: var(--biolicht);
}

.poortkaart__ring {
	display: block;
	width: min(220px, 60vw);
	aspect-ratio: 1;
	border-radius: 50%;
	overflow: hidden;
	border: 6px solid var(--naad);
	outline: 1px solid var(--reling);
}

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

.poortkaart__ring:hover {
	border-color: var(--reling);
}

.poortkaart__datum {
	color: var(--mist);
	font-size: 0.82rem;
	margin-bottom: 0.5rem;
}

.poortkaart p {
	color: var(--mist);
	font-size: 0.94rem;
}

/* =========================================================================
   16. Logregels — de duiken van lezers
   ========================================================================= */

.logregels {
	list-style: none;
	margin: 1.6rem 0 0;
	padding: 0 0 0 1.2rem;
	border-left: 1px solid var(--naad);
	display: grid;
	gap: 1rem;
}

.logregel {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.4rem 1.2rem;
	align-items: start;
	background: var(--rif);
	border: 1px solid var(--naad);
	border-radius: var(--rond);
	padding: 1.1rem 1.2rem;
}

.logregel:nth-child(even) {
	background: var(--goot);
}

.logregel__diepte {
	margin: 0;
	grid-row: span 2;
	min-width: 4.4rem;
}

.logregel__woord {
	margin: 0;
}

.logregel__woord p {
	margin: 0;
	font-size: 1.02rem;
}

.logregel__onder {
	grid-column: 2;
	margin: 0;
	color: var(--mist);
	font-size: 0.84rem;
}

/* =========================================================================
   17. Meterbord — de zes cijfers
   ========================================================================= */

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

.meterbord li {
	background: var(--rif);
	border: 1px solid var(--naad);
	border-radius: var(--rond);
	padding: 1.1rem;
}

.meterbord__wat {
	display: block;
	color: var(--mist);
	font-size: 0.86rem;
	line-height: 1.45;
}

/* =========================================================================
   18. Vragen
   ========================================================================= */

.peilvraag {
	margin: 1.6rem 0 0;
}

.peilvraag dt {
	font-family: var(--kop);
	font-weight: 700;
	font-size: 1.08rem;
	color: var(--zout);
	margin-top: 1.5rem;
}

.peilvraag dd {
	margin: 0.5rem 0 0;
	color: var(--mist);
	max-width: 70ch;
}

.peilvragen {
	list-style: none;
	margin: 1.6rem 0 0;
	padding: 0;
	counter-reset: vraag;
	display: grid;
	gap: 1rem;
}

.peilvragen__rij {
	background: var(--rif);
	border: 1px solid var(--naad);
	border-radius: var(--rond);
	padding: 1.2rem 1.3rem;
	counter-increment: vraag;
}

.peilvragen__rij h3 {
	margin-bottom: 0.5rem;
}

.peilvragen__rij h3::before {
	content: counter(vraag) '. ';
	color: var(--ijs);
}

.peilvragen__rij p {
	margin: 0;
	color: var(--mist);
}

/* =========================================================================
   19. Oproep
   ========================================================================= */

.opduikoproep {
	overflow: hidden;
	padding: clamp(2.8rem, 7vw, 5rem) 0;
}

.opduikoproep__beeld {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	z-index: 0;
}

.opduikoproep__beeld::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(10, 24, 38, 0.96) 0%, rgba(10, 24, 38, 0.9) 55%, rgba(10, 24, 38, 0.7) 100%);
}

.opduikoproep__binnen {
	position: relative;
	z-index: 1;
	max-width: 68ch;
}

.opduikoproep p {
	color: var(--zout);
}

/* =========================================================================
   20. Peilbord — de kop van een binnenbladzijde
   ========================================================================= */

.peilbord {
	border-bottom: 1px solid var(--naad);
	background: var(--rif);
}

.peilbord__beeld {
	margin-bottom: 1.6rem;
}

.peilbord__beeld img {
	width: 100%;
	border-radius: var(--rond);
	border: 1px solid var(--naad);
	max-height: 320px;
	object-fit: cover;
}

.peilbord--band {
	overflow: hidden;
	padding: clamp(2.6rem, 6vw, 4.4rem) 0;
	background: var(--diepte);
}

.peilbord__band {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	z-index: 0;
}

.peilbord__band::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(120deg, rgba(10, 24, 38, 0.96) 0%, rgba(10, 24, 38, 0.9) 50%, rgba(10, 24, 38, 0.72) 100%);
}

.peilbord__binnen {
	position: relative;
	z-index: 1;
}

/* =========================================================================
   21. Stappen, kaarten en tabellen
   ========================================================================= */

.stappenrij {
	list-style: none;
	margin: 1.6rem 0 0;
	padding: 0;
	counter-reset: trap;
	display: grid;
	gap: 1rem;
}

.stappenrij__stap {
	counter-increment: trap;
	background: var(--rif);
	border: 1px solid var(--naad);
	border-radius: var(--rond);
	padding: 1.2rem 1.3rem 1.2rem 4rem;
	position: relative;
}

.stappenrij__stap::before {
	content: counter(trap);
	position: absolute;
	left: 1.2rem;
	top: 1.15rem;
	font-family: var(--kop);
	font-weight: 700;
	font-size: 1.6rem;
	line-height: 1;
	color: var(--ijs);
}

.stappenrij__stap p {
	margin: 0;
	color: var(--mist);
}

.biomkaarten,
.tuigkaarten {
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr;
	margin-top: 1.6rem;
}

.biomkaart,
.tuigkaart {
	background: var(--diepte);
	border: 1px solid var(--naad);
	border-radius: var(--rond);
	padding: 1.2rem 1.3rem;
	display: flex;
	flex-direction: column;
}

.biomkaart p,
.tuigkaart > p {
	color: var(--mist);
}

.tuigkaart__meta {
	font-size: 0.8rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ijs);
	margin-bottom: 0.5rem;
}

.tuigkaart__ladder {
	list-style: none;
	margin: 0.6rem 0 1rem;
	padding: 0;
	display: grid;
	gap: 0.4rem;
}

/* De laatste regel van een kaart naar onderen duwen, zodat de kaarten in een
   raster onderaan gelijk uitkomen. */
.tuigkaart__versie {
	margin-top: auto;
}

.tabelomhulsel {
	margin: 1.6rem 0 1rem;
	overflow-x: auto;
	border: 1px solid var(--naad);
	border-radius: var(--rond);
}

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

.dieptetabel caption {
	text-align: left;
	color: var(--mist);
	font-size: 0.85rem;
	padding: 0.8rem 1rem;
	border-bottom: 1px solid var(--naad);
}

.dieptetabel th,
.dieptetabel td {
	text-align: left;
	padding: 0.65rem 1rem;
	border-bottom: 1px solid var(--naad);
	vertical-align: top;
}

.dieptetabel thead th {
	background: var(--goot);
	color: var(--ijs);
	font-size: 0.82rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
}

.dieptetabel tbody th {
	font-weight: 600;
	color: var(--zout);
}

.dieptetabel tbody td {
	color: var(--mist);
	font-variant-numeric: tabular-nums;
}

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

.tabelnoot {
	color: var(--mist);
	font-size: 0.88rem;
	max-width: 74ch;
}

.portretpaar {
	display: grid;
	gap: 1.2rem;
	grid-template-columns: 1fr;
	margin-top: 1.6rem;
}

.portretpaar img {
	width: 100%;
	border-radius: var(--rond);
	border: 1px solid var(--naad);
}

/* =========================================================================
   22. Formulieren en meldingen
   ========================================================================= */

.baakformulier {
	margin-top: 1.4rem;
}

.baakformulier__klein {
	color: var(--mist);
	font-size: 0.86rem;
}

/* De honingpot: onzichtbaar voor mensen, wel in de boom voor wie hem vult. */
.aasbuis {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.echolood {
	background: var(--goot);
	border: 1px solid var(--biolicht);
	border-left-width: 4px;
	border-radius: var(--rond);
	padding: 0.9rem 1.1rem;
	margin: 0 0 1.4rem;
}

.echolood p {
	margin: 0;
}

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

/* =========================================================================
   23. Duikstuk — een los stuk
   ========================================================================= */

.duikstuk__binnen {
	max-width: 74ch;
}

.duikstuk__poort {
	width: min(200px, 52vw);
	aspect-ratio: 1;
	border-radius: 50%;
	overflow: hidden;
	border: 6px solid var(--naad);
	margin-bottom: 1.4rem;
}

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

.duikstuk__leid {
	color: var(--mist);
	font-size: 1.08rem;
}

.duikstuk__tekst p {
	max-width: 70ch;
}

.duikstuk__voet {
	margin-top: 2rem;
	padding-top: 1.2rem;
	border-top: 1px solid var(--naad);
	color: var(--mist);
	font-size: 0.88rem;
}

/* =========================================================================
   24. Overboord — 404
   ========================================================================= */

.overboord__binnen {
	max-width: 62ch;
	padding-top: 2rem;
	padding-bottom: 2rem;
}

/* .dek p is (0,1,1) en verslaat .overboord__cijfer met (0,1,0). Zonder deze
   :not zou het grote cijfer op de maat van gewone tekst uitkomen. */
.overboord__cijfer {
	font-family: var(--kop);
	font-weight: 700;
	font-size: clamp(4rem, 16vw, 9rem);
	line-height: 0.9;
	color: var(--ijs);
	margin: 0 0 0.4rem;
}

.overboord__leid {
	color: var(--mist);
	font-size: 1.05rem;
}

/* =========================================================================
   25. Ballastruim — de voet
   ========================================================================= */

.ballastruim {
	background: var(--rif);
	border-top: 1px solid var(--naad);
	padding: clamp(2.4rem, 5vw, 3.6rem) 0 8rem;
}

.ballastruim__raster {
	display: grid;
	gap: 1.8rem;
	grid-template-columns: 1fr;
}

.ballastruim h2 {
	font-size: 0.82rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ijs);
	margin-bottom: 0.7rem;
}

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

.ballastruim li a {
	display: inline-flex;
	align-items: center;
	min-height: var(--raakvlak);
	color: var(--zout);
	text-decoration: none;
	font-size: 0.92rem;
}

.ballastruim li a:hover {
	color: var(--biolicht);
	text-decoration: underline;
}

.ballastruim__merk {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	text-decoration: none;
	color: var(--zout);
	min-height: var(--raakvlak);
}

.ballastruim__over {
	color: var(--mist);
	font-size: 0.9rem;
	max-width: 42ch;
	margin-top: 0.8rem;
}

.ballastruim__gegevens {
	margin: 2rem 0 1.4rem;
	padding-top: 1.4rem;
	border-top: 1px solid var(--naad);
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.4rem 1.2rem;
	font-size: 0.9rem;
}

.ballastruim__gegevens dt {
	color: var(--mist);
}

.ballastruim__gegevens dd {
	margin: 0;
}

.ballastruim__gegevens dd a {
	display: inline-flex;
	align-items: center;
	min-height: var(--raakvlak);
	color: var(--zout);
}

.geenuitgever {
	background: var(--goot);
	border: 1px solid var(--naad);
	border-left: 3px solid var(--alarm);
	border-radius: var(--rond);
	padding: 1rem 1.2rem;
	font-size: 0.88rem;
	color: var(--zout);
	max-width: 92ch;
}

.geenuitgever b {
	color: var(--alarm);
}

.ballastruim__slot {
	color: var(--mist);
	font-size: 0.84rem;
	margin-top: 1.4rem;
}

.ballastruim__slot p {
	margin: 0 0 0.3rem;
}

/* =========================================================================
   26. Koekluik — de balk over opslag, over de volle breedte onderaan
   ========================================================================= */

.koekluik {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 50;
	background: var(--rif);
	border-top: 1px solid var(--reling);
}

.koekluik__binnen {
	width: 100%;
	max-width: var(--breed);
	margin: 0 auto;
	padding: 0.9rem var(--kier);
	display: grid;
	gap: 0.8rem;
	align-items: center;
}

.koekluik p {
	margin: 0;
	font-size: 0.88rem;
	color: var(--zout);
}

.koekluik__knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

/* =========================================================================
   27. Opkomen bij het scrollen
   -------------------------------------------------------------------------
   Alleen doorzichtig als de klasse js op html staat, en alleen voor de klassen
   die het script ook echt weer aanzet. Zonder javascript is er niets verborgen.
   ========================================================================= */

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

.js .opstijgt.opstijgt--boven {
	opacity: 1;
	transform: none;
}

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

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

/* =========================================================================
   28. Breder dan een telefoon
   ========================================================================= */

@media (max-width: 660px) {
	/* Een brede tabel duwt op een telefoon de hele bladzijde uit elkaar. Zijwaarts
	   schuiven helpt, maar een stapel met de kolomnaam ervoor leest beter. */
	.dieptetabel thead {
		display: none;
	}

	/* De caption hoort hier ook op block. Blijft hij table-caption in een tabel die
	   zelf block is, dan krimpt zijn doos tot de breedte van het langste woord en
	   valt de hele regel uit elkaar tot een kolom van losse woorden. */
	.dieptetabel,
	.dieptetabel caption,
	.dieptetabel tbody,
	.dieptetabel tr,
	.dieptetabel th,
	.dieptetabel td {
		display: block;
		width: auto;
		white-space: normal;
	}

	.dieptetabel tr {
		border-bottom: 1px solid var(--naad);
		padding: 0.6rem 0;
	}

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

	.dieptetabel th,
	.dieptetabel td {
		border-bottom: 0;
		padding: 0.25rem 1rem;
	}

	.dieptetabel td[data-kolom]::before {
		content: attr(data-kolom) ': ';
		color: var(--ijs);
		font-size: 0.78rem;
		letter-spacing: 0.04em;
		text-transform: uppercase;
	}

	.dieptelagen__beeld {
		overflow-x: auto;
	}

	.dieptelagen__balken {
		min-width: 22rem;
	}
}

@media (min-width: 700px) {
	.dieptelint {
		grid-template-columns: repeat(2, 1fr);
	}

	.meterbord {
		grid-template-columns: repeat(3, 1fr);
	}

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

	/* De rechterkolom van de patrijspoorten een halve kaart laten zakken. */
	.patrijspoort > :nth-child(even) {
		transform: translateY(2.6rem);
	}

	.biomkaarten,
	.tuigkaarten {
		grid-template-columns: repeat(3, 1fr);
	}

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

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

	.ballastruim__raster {
		grid-template-columns: 1.4fr 1fr 1fr 1fr;
	}

	.ballastruim {
		padding-bottom: 6rem;
	}
}

@media (min-width: 900px) {
	.dieptelint {
		grid-template-columns: repeat(4, 1fr);
	}

	.dek__duo {
		grid-template-columns: 1.05fr 0.95fr;
	}

	.dek__duo--omgekeerd .dek__duobeeld {
		order: -1;
	}

	.dek__duo--formulier {
		grid-template-columns: 1fr 0.85fr;
		align-items: start;
	}

	.dieptegrens__blad,
	.duikschema__blad,
	.drukbegroting__blad {
		grid-template-columns: 1fr 1fr;
	}

	.dieptelagen__blad {
		grid-template-columns: 0.9fr 1.2fr 0.9fr;
	}
}

/* Onder deze breedte gaat het menu achter een knop. */
@media (max-width: 899px) {
	.luikknop {
		display: inline-flex;
		order: 3;
	}

	.brugdek__navigatie {
		order: 4;
		flex: 1 0 100%;
	}

	.luiklijst {
		display: none;
		flex-direction: column;
		gap: 0;
		border-top: 1px solid var(--naad);
		margin-top: 0.6rem;
		padding-top: 0.4rem;
	}

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

	.luiklijst a {
		width: 100%;
		border-bottom: 1px solid var(--naad);
	}

	.brugdek__hoofdknop {
		order: 2;
	}

	.brugdek__onder {
		display: none;
	}
}

@media (max-width: 420px) {
	.brugdek__naam {
		font-size: 1.05rem;
	}

	.ventiel {
		width: 100%;
	}

	.ventiel--kort {
		width: auto;
	}

	.wateroppervlak__knoppen .ventiel,
	.opduikoproep__knoppen .ventiel,
	.overboord__knoppen .ventiel {
		width: 100%;
	}

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

	.logregel__diepte {
		grid-row: auto;
	}

	.logregel__onder {
		grid-column: 1;
	}
}