/*
Theme Name: Velnary
Theme URI: https://velnary.org/
Author: Velnary
Author URI: https://velnary.org/
Description: Licht thema voor een bloemenwinkel die op het seizoen werkt. Eigen seizoenswijzer over twaalf maanden en een boeketbouwer, alle lettertypen in het thema zelf, geen verzoeken naar buiten.
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: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: velnary
Tags: bloemen, seizoen, licht, winkel, nederlands
*/

/* =========================================================================
   1. Lettertypen uit het thema zelf
   ========================================================================= */

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

@font-face {
	font-family: 'Marcellus';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/marcellus-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: 'Karla';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/karla-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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

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

@font-face {
	font-family: 'Karla';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('fonts/karla-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;
}

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

:root {
	--papier: #faf6f0;
	--paneel: #f2ece3;
	--rand: #e2d8c9;
	--inkt: #2b1f26;
	--pruim: #6d2a4c;
	--pruim-diep: #561f3c;
	--steel: #42603c;
	--klei: #a8442f;
	--zacht: #6a5a60;

	--kop: 'Marcellus', 'Iowan Old Style', Palatino, Georgia, serif;
	--tekst: 'Karla', 'Segoe UI', system-ui, sans-serif;

	--breed: 1180px;
	--dakhoogte: 72px;
}

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

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

/* Een klasse die display zet is sterker dan de browserregel voor [hidden];
   zonder deze regel blijft een verborgen knop zichtbaar. */
[hidden] {
	display: none !important;
}

html {
	scroll-behavior: smooth;
	/* Anders komt een anker onder de vaste kop terecht. */
	scroll-padding-top: calc(var(--dakhoogte) + 16px);
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--papier);
	color: var(--inkt);
	font-family: var(--tekst);
	font-size: 17px;
	line-height: 1.68;
	font-weight: 400;
}

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

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

a:hover {
	text-decoration-thickness: 2px;
}

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

h1,
h2,
h3,
h4 {
	font-family: var(--kop);
	font-weight: 400;
	line-height: 1.16;
	margin: 0 0 0.5em;
	letter-spacing: 0.005em;
}

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

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

h3 {
	font-size: 1.28rem;
}

h4 {
	font-size: 1.08rem;
}

p {
	margin: 0 0 1.1em;
}

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

li {
	margin-bottom: 0.4em;
}

strong,
b {
	font-weight: 600;
}

blockquote {
	margin: 0 0 1.2em;
	padding-left: 1.1em;
	border-left: 3px solid var(--rand);
	font-family: var(--kop);
	font-size: 1.15rem;
}

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

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

.overslaan {
	position: absolute;
	top: -60px;
	left: 12px;
	z-index: 60;
	background: var(--pruim);
	color: var(--papier);
	padding: 10px 18px;
	border-radius: 0 0 6px 6px;
	text-decoration: none;
	font-weight: 600;
	transition: top 0.15s;
}

.overslaan:focus {
	top: 0;
}

/* =========================================================================
   4. Bak en vakken
   ========================================================================= */

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

.kweekbed--nauw {
	max-width: 800px;
}

.vak {
	padding: 74px 0;
}

.vak--kort {
	padding: 46px 0;
}

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

.vak--diep {
	background: var(--pruim);
	color: var(--papier);
}

.vak--diep h2,
.vak--diep h3 {
	color: var(--papier);
}

.vak--diep a {
	color: var(--papier);
}

/* Een lichte kaart in een donker vak erft de lichte tekstkleur en wordt dan
   crème op crème. De kaart zet de inktkleur daarom zelf terug. */
.vak--diep .groet,
.vak--diep .bloemkaart,
.vak--diep .raadkaart,
.vak--diep .formulier {
	color: var(--inkt);
}

.vak--diep .groet a,
.vak--diep .bloemkaart a,
.vak--diep .raadkaart a,
.vak--diep .formulier a {
	color: var(--pruim);
}

.vak__kop {
	max-width: 720px;
	margin-bottom: 38px;
}

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

.vak__kop p {
	color: var(--zacht);
	font-size: 1.06rem;
	margin-bottom: 0;
}

.vak--diep .vak__kop p {
	color: #e7d5dd;
}

.opschrift {
	display: block;
	font-family: var(--tekst);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--steel);
	margin-bottom: 14px;
}

.vak--diep .opschrift {
	color: #d9b6c5;
}

/* =========================================================================
   5. De bloemsnoer: het scheidingsteken van deze site
   -------------------------------------------------------------------------
   Een dunne slinger van droge bloemsilhouetten. Het is een span, dus die moet
   display: block krijgen, anders doet de hoogte niets.
   ========================================================================= */

.bloemsnoer {
	display: block;
	height: 26px;
	width: 100%;
	border: 0;
	margin: 0;
	background-repeat: repeat-x;
	background-position: center;
	background-size: 96px 26px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='26' viewBox='0 0 96 26'%3E%3Cpath d='M0 13h96' stroke='%23e2d8c9' stroke-width='1'/%3E%3Cg fill='none' stroke='%23e2d8c9' stroke-width='1.4'%3E%3Cpath d='M12 13c0-4 2-6 4-6M12 13c0 4 2 6 4 6M28 13c0-3 2-5 4-5M28 13c0 3 2 5 4 5'/%3E%3C/g%3E%3Cg fill='%236d2a4c' opacity='.55'%3E%3Ccircle cx='48' cy='13' r='2.6'/%3E%3C/g%3E%3Cg fill='%23e2d8c9'%3E%3Ccircle cx='62' cy='9' r='1.8'/%3E%3Ccircle cx='68' cy='16' r='1.8'/%3E%3Ccircle cx='80' cy='11' r='1.5'/%3E%3Ccircle cx='86' cy='15' r='1.5'/%3E%3C/g%3E%3C/svg%3E");
}

.bloemsnoer--breed {
	height: 34px;
	background-size: 128px 34px;
}

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

.steel {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: 48px;
	padding: 12px 26px;
	border: 1px solid transparent;
	border-radius: 2px;
	font-family: var(--tekst);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.steel--bloei {
	background: var(--pruim);
	color: var(--papier);
}

.steel--bloei:hover {
	background: var(--pruim-diep);
	color: var(--papier);
}

.steel--blad {
	background: transparent;
	color: var(--pruim);
	border-color: var(--pruim);
}

.steel--blad:hover {
	background: var(--pruim);
	color: var(--papier);
}

.vak--diep .steel--blad {
	color: var(--papier);
	border-color: #d9b6c5;
}

.vak--diep .steel--blad:hover {
	background: var(--papier);
	color: var(--pruim);
}

.steel--kort {
	min-height: 40px;
	padding: 8px 16px;
	font-size: 0.92rem;
}

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

.steelrij--na {
	margin-top: 22px;
}

.steelrij--ver {
	margin-top: 34px;
}

/* Een losse verwijzing onder een blok. */
.naschrift {
	margin: 26px 0 0;
}

/* De pijlverwijzing in een kaart: hoog genoeg voor een vinger. */
.pijl {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	font-weight: 600;
	font-size: 0.96rem;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	align-self: flex-start;
}

.pijl:hover {
	gap: 13px;
}

.pijl::after {
	content: '\2192';
	transition: transform 0.15s;
}

/* =========================================================================
   7. Toonbank: de kop van de site
   ========================================================================= */

.toonbank {
	position: sticky;
	top: 0;
	z-index: 40;
	background: rgba(250, 246, 240, 0.96);
	backdrop-filter: blur(7px);
	border-bottom: 1px solid var(--rand);
}

.toonbank__binnen {
	max-width: var(--breed);
	margin: 0 auto;
	padding: 0 22px;
	min-height: var(--dakhoogte);
	display: flex;
	align-items: center;
	gap: 20px;
}

/* Het merk is een verwijzing, dus hij hoort onder een vinger te passen ook als
   de ondertitel op smalle schermen wegvalt. */
.toonbank__merk {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	min-height: 46px;
	text-decoration: none;
	color: var(--inkt);
	flex-shrink: 0;
}

.toonbank__naam {
	display: block;
	font-family: var(--kop);
	font-size: 1.42rem;
	line-height: 1.05;
	letter-spacing: 0.01em;
}

.toonbank__naam span {
	color: var(--pruim);
}

.toonbank__onder {
	display: block;
	font-family: var(--tekst);
	font-size: 0.66rem;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--zacht);
	margin-top: 3px;
}

.toonbank__navigatie {
	margin-left: auto;
}

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

.padlijst li {
	margin: 0;
}

.padlijst a {
	display: block;
	padding: 9px 12px;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--inkt);
	text-decoration: none;
	border-bottom: 2px solid transparent;
}

.padlijst a:hover {
	color: var(--pruim);
	border-bottom-color: var(--pruim);
}

.padlijst .current-menu-item > a,
.padlijst .current_page_item > a {
	color: var(--pruim);
	border-bottom-color: var(--pruim);
}

.hekje {
	display: none;
	align-items: center;
	gap: 9px;
	margin-left: auto;
	background: transparent;
	border: 1px solid var(--rand);
	border-radius: 2px;
	min-height: 44px;
	padding: 8px 14px;
	font-family: var(--tekst);
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--inkt);
	cursor: pointer;
}

.hekje__balken {
	display: block;
	width: 17px;
}

.hekje__balken i {
	display: block;
	height: 2px;
	background: var(--pruim);
	margin: 3px 0;
}

/* =========================================================================
   8. Wortelgrond: de voet van de site
   ========================================================================= */

/* De onderste ruimte is er voor de vaste balk over de browseropslag: zonder
   javascript is die balk niet weg te klikken, en dan mag hij ook niets
   bedekken. */
.wortelgrond {
	background: var(--paneel);
	border-top: 1px solid var(--rand);
	padding: 62px 0 110px;
	margin-top: 0;
}

.wortelgrond__raster {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1fr;
	gap: 38px;
	margin-bottom: 40px;
}

.wortelgrond__merk {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 42px;
	text-decoration: none;
	color: var(--inkt);
	margin-bottom: 14px;
}

.wortelgrond__over {
	color: var(--zacht);
	font-size: 0.95rem;
	max-width: 34ch;
	margin-bottom: 0;
}

.wortelgrond h2 {
	font-family: var(--tekst);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--steel);
	margin-bottom: 14px;
}

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

.wortelgrond ul li {
	margin-bottom: 2px;
}

.wortelgrond ul a {
	display: block;
	min-height: 38px;
	padding: 8px 0;
	font-size: 0.95rem;
	color: var(--inkt);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.wortelgrond ul a:hover {
	color: var(--pruim);
	border-bottom-color: var(--rand);
}

.wortelgrond__gegevens {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 28px;
	margin: 0 0 22px;
	padding: 22px 0 0;
	border-top: 1px solid var(--rand);
	font-size: 0.92rem;
	color: var(--zacht);
}

.wortelgrond__gegevens li {
	margin: 0;
}

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

.wortelgrond__slot {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 26px;
	padding-top: 18px;
	border-top: 1px solid var(--rand);
	font-size: 0.86rem;
	color: var(--zacht);
}

.wortelgrond__slot p {
	margin: 0;
}

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

.bloemkaart {
	display: flex;
	flex-direction: column;
	background: var(--papier);
	border: 1px solid var(--rand);
	border-radius: 3px;
	overflow: hidden;
	height: 100%;
}

.vak--paneel .bloemkaart {
	background: var(--papier);
}

.bloemkaart__beeld {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	background: var(--paneel);
}

.bloemkaart__binnen {
	padding: 24px 24px 26px;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: 4px;
}

.bloemkaart__prijs {
	font-family: var(--kop);
	font-size: 1.05rem;
	color: var(--pruim);
}

.bloemkaart h3 {
	margin-bottom: 8px;
}

.bloemkaart p {
	color: var(--zacht);
	font-size: 0.97rem;
}

.bloemkaart .pijl {
	margin-top: auto;
	color: var(--pruim);
}

/* De boeketkaart: de uitkomst van de bouwer. */
.boeketkaart {
	background: var(--papier);
	border: 1px solid var(--rand);
	border-left: 4px solid var(--pruim);
	border-radius: 3px;
	padding: 26px 28px;
}

.boeketkaart__naam {
	font-family: var(--tekst);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--steel);
	margin-bottom: 12px;
}

.boeketkaart__vork {
	font-family: var(--kop);
	font-size: 2rem;
	color: var(--pruim);
	margin-bottom: 6px;
	line-height: 1.1;
}

.boeketkaart__regels {
	margin: 14px 0 0;
}

.boeketkaart__regel {
	display: flex;
	gap: 14px;
	padding: 11px 0;
	border-top: 1px solid var(--rand);
	font-size: 0.96rem;
}

.boeketkaart__regel dt {
	flex: 0 0 108px;
	font-weight: 600;
	color: var(--steel);
}

.boeketkaart__regel dd {
	margin: 0;
	color: var(--inkt);
}

/* De raadkaart: een kleine tip of waarschuwing. */
.raadkaart {
	background: var(--paneel);
	border: 1px solid var(--rand);
	border-radius: 3px;
	padding: 20px 22px;
	font-size: 0.96rem;
}

.raadkaart--let {
	background: #f7ece8;
	border-color: #e3c3ba;
}

.raadkaart h4 {
	margin-bottom: 6px;
	color: var(--klei);
}

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

/* =========================================================================
   10. Rasters
   ========================================================================= */

.raster {
	display: grid;
	gap: 26px;
}

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

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

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

.duo {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 52px;
	align-items: center;
}

.duo--omgekeerd .duo__beeld {
	order: 2;
}

.duo__beeld img {
	width: 100%;
	border-radius: 3px;
	border: 1px solid var(--rand);
}

/* =========================================================================
   11. Hero op de startpagina
   ========================================================================= */

/* De tekst staat naast de foto en niet erover.
   Een sluier die genoeg dekt om crème-op-crème te voorkomen, dekt op deze
   lichte winkelfoto ook de winkel af; dan houd je een grijze vlek over. Met de
   tekst in een eigen kolom is het contrast een gegeven en blijft de foto heel. */
.hoofdbeeld {
	position: relative;
	min-height: 600px;
	display: grid;
	grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
	background: var(--paneel);
	overflow: hidden;
	border-bottom: 1px solid var(--rand);
}

.hoofdbeeld__foto {
	grid-column: 2;
	grid-row: 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 45%;
}

.hoofdbeeld__binnen {
	grid-column: 1;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* Links uitlijnen met de bak van de site, ook op een breed venster. */
	padding: 74px 54px 74px max(22px, calc((100vw - var(--breed)) / 2));
	background: var(--papier);
	color: var(--inkt);
}

.hoofdbeeld h1 {
	color: var(--inkt);
	max-width: 20ch;
	margin-bottom: 18px;
}

.hoofdbeeld__onder {
	max-width: 54ch;
	font-size: 1.1rem;
	color: var(--inkt);
	margin-bottom: 28px;
}

/* Bovenaan de tekst is de sluier nog open en komen er donkere raamstijlen uit
   de foto door; groen op groen haalde daar 3.33. Een eigen vlak maakt het
   contrast onafhankelijk van wat er achter zit. */
.hoofdbeeld .opschrift {
	display: inline-block;
	/* In een flexkolom rekt een inline-block anders tot de volle breedte uit. */
	align-self: flex-start;
	background: var(--pruim);
	color: var(--papier);
	padding: 6px 13px;
	border-radius: 2px;
	margin-bottom: 18px;
}

.hoofdbeeld__wijzers {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 30px;
	margin: 30px 0 0;
	padding: 22px 0 0;
	border-top: 1px solid var(--rand);
	list-style: none;
	font-size: 0.94rem;
	color: var(--inkt);
}

.hoofdbeeld__wijzers li {
	margin: 0;
}

.hoofdbeeld__wijzers b {
	color: var(--pruim);
}

/* Een foto over de volle breedte, los tussen twee vakken. */
.volleband {
	margin: 0;
}

/* Kop van de binnenbladzijden, met de blaadjestextuur erachter. */
.bladkop {
	position: relative;
	padding: 66px 0 56px;
	background-color: var(--paneel);
	background-image: linear-gradient(rgba(242, 236, 227, 0.86), rgba(242, 236, 227, 0.93)), url('images/blaadjestextuur.jpg');
	background-size: cover;
	background-position: center;
	border-bottom: 1px solid var(--rand);
}

.bladkop h1 {
	max-width: 26ch;
	margin-bottom: 14px;
}

.bladkop__onder {
	max-width: 60ch;
	font-size: 1.08rem;
	color: var(--zacht);
	margin-bottom: 0;
}

/* =========================================================================
   12. Seizoenswijzer
   ========================================================================= */

.wijzer {
	background: var(--papier);
	border: 1px solid var(--rand);
	border-radius: 3px;
	overflow: hidden;
}

.wijzer__staven {
	display: flex;
	align-items: flex-end;
	gap: 3px;
	padding: 18px 22px 14px;
	background: var(--paneel);
	border-bottom: 1px solid var(--rand);
}

.wijzer__staaf {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
	max-width: 56px;
}

/* De kolom heeft een vaste hoogte, zodat een balk van honderd procent altijd
   precies die hoogte is. Zonder deze laag zou de balk met het maandlabel om de
   ruimte in de flexrij vechten en niet meer in verhouding staan. */
.wijzer__kolom {
	position: relative;
	height: 54px;
	/* Een goot achter elke staaf: de goedkoopste maand heeft de kortste staaf,
	   en zonder goot leest die als een afgebroken streepje in plaats van als de
	   gekozen maand. */
	background: rgba(226, 216, 201, 0.42);
	border-radius: 2px 2px 0 0;
}

.wijzer__staaf--nu .wijzer__kolom {
	background: rgba(109, 42, 76, 0.12);
}

/* De balk is een span; die moet expliciet block zijn, anders doet de hoogte
   niets en leest de wijzer als een rijtje afkortingen. */
.wijzer__balk {
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0 auto;
	background: #d3c3ae;
	border-radius: 2px 2px 0 0;
	transition: background 0.15s;
}

.wijzer__staaf--nu .wijzer__balk {
	background: var(--pruim);
}

.wijzer__kort {
	display: block;
	font-size: 0.7rem;
	letter-spacing: 0.04em;
	color: var(--zacht);
	text-transform: uppercase;
}

.wijzer__staaf--nu .wijzer__kort {
	color: var(--pruim);
	font-weight: 600;
}

.wijzer__schuifrij {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 20px 22px;
	border-bottom: 1px solid var(--rand);
}

.wijzer__maand {
	font-family: var(--kop);
	font-size: 1.5rem;
	min-width: 5.6em;
	color: var(--pruim);
}

/* Een schuif van 20px is op een telefoon niet te pakken; 40px wel. */
.wijzer__schuif {
	flex: 1 1 auto;
	height: 40px;
	margin: 0;
	accent-color: var(--pruim);
	cursor: pointer;
}

.wijzer__uitslag {
	display: grid;
	grid-template-columns: 1.35fr 1fr;
	gap: 0;
}

.wijzer__vak {
	padding: 24px 22px 26px;
}

.wijzer__vak + .wijzer__vak {
	border-left: 1px solid var(--rand);
	background: var(--paneel);
}

.wijzer__label {
	display: block;
	font-size: 0.76rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--steel);
	margin-bottom: 12px;
}

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

.wijzer__lijst li {
	margin: 0;
	padding: 5px 12px;
	background: var(--paneel);
	border: 1px solid var(--rand);
	border-radius: 20px;
	font-size: 0.9rem;
}

.wijzer__vak + .wijzer__vak .wijzer__lijst li {
	background: var(--papier);
}

.wijzer__mijden li {
	color: var(--klei);
	border-color: #e3c3ba;
	text-decoration: line-through;
	text-decoration-color: rgba(168, 68, 47, 0.5);
}

.wijzer__prijs {
	font-family: var(--kop);
	font-size: 1.75rem;
	color: var(--pruim);
	margin-bottom: 4px;
}

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

.wijzer__voet {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
	justify-content: space-between;
	padding: 18px 22px;
	border-top: 1px solid var(--rand);
}

.wijzer__voet p {
	margin: 0;
	font-size: 0.92rem;
	color: var(--zacht);
}

/* =========================================================================
   13. Boeketbouwer
   ========================================================================= */

.bouwer {
	position: relative;
	border: 1px solid var(--rand);
	border-radius: 3px;
	overflow: hidden;
	background-color: var(--paneel);
}

.bouwer__achter {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.18;
}

.bouwer__binnen {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: 0;
}

.bouwer__keuzes {
	padding: 32px 30px 34px;
	background: rgba(250, 246, 240, 0.92);
}

.bouwer__uitslag {
	padding: 32px 30px 34px;
	border-left: 1px solid var(--rand);
	background: rgba(242, 236, 227, 0.88);
}

.bouwer__veld {
	margin-bottom: 20px;
}

.bouwer__veld label {
	display: block;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--steel);
	margin-bottom: 7px;
}

.bouwer__veld select {
	width: 100%;
	min-height: 46px;
	padding: 10px 12px;
	font-family: var(--tekst);
	font-size: 1rem;
	color: var(--inkt);
	background: var(--papier);
	border: 1px solid var(--rand);
	border-radius: 2px;
}

.bouwer__veld select:focus-visible {
	outline: 3px solid var(--pruim);
	outline-offset: 1px;
}

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

/* =========================================================================
   14. Cijfers
   ========================================================================= */

.cijferrij {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	border: 1px solid var(--rand);
	border-radius: 3px;
	background: var(--papier);
	overflow: hidden;
}

.cijferrij__vak {
	padding: 30px 26px 32px;
}

.cijferrij__vak + .cijferrij__vak {
	border-left: 1px solid var(--rand);
}

/* De uitleg staat hier bewust boven het getal. */
.cijferrij__uitleg {
	font-size: 0.93rem;
	color: var(--zacht);
	margin-bottom: 14px;
	min-height: 4.2em;
}

/* Op Over ons staat dezelfde uitleg onder het getal in plaats van erboven. */
.cijferrij__uitleg--onder {
	margin: 12px 0 0;
	min-height: 0;
}

.cijferrij__getal {
	display: block;
	font-family: var(--kop);
	font-size: 3rem;
	line-height: 1;
	color: var(--pruim);
}

.cijferrij__naam {
	display: block;
	font-size: 0.95rem;
	font-weight: 600;
	margin-top: 6px;
}

/* =========================================================================
   15. Kaartjes van klanten
   ========================================================================= */

.groetenrij {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
}

/* Het kaartje: licht papier, één graad gedraaid, met een gerafelde onderrand. */
.groet {
	position: relative;
	background: var(--papier);
	border: 1px solid var(--rand);
	border-bottom: 0;
	padding: 26px 26px 30px;
	transform: rotate(-1deg);
	box-shadow: 0 2px 0 rgba(43, 31, 38, 0.04);
}

.groet:nth-child(even) {
	transform: rotate(0.8deg);
}

.groet::after {
	content: '';
	position: absolute;
	left: -1px;
	right: -1px;
	bottom: -9px;
	height: 10px;
	background-repeat: repeat-x;
	background-size: 18px 10px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='10' viewBox='0 0 18 10'%3E%3Cpath d='M0 0h18v3l-3 3 -3-2 -3 4 -3-3 -3 2 -3-3z' fill='%23faf6f0' stroke='%23e2d8c9' stroke-width='1'/%3E%3C/svg%3E");
}

.groet__aanleiding {
	display: block;
	font-size: 0.76rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--steel);
	margin-bottom: 12px;
}

/* Het is een blockquote, dus de streep en de inspringing van de grondslag
   moeten hier uit: op een kaartje staat geen citaatbalk. */
.groet__tekst {
	font-family: var(--kop);
	font-size: 1.06rem;
	line-height: 1.55;
	border-left: 0;
	padding-left: 0;
	margin: 0 0 16px;
}

.groet__onder {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	align-items: baseline;
	padding-top: 12px;
	border-top: 1px solid var(--rand);
	font-size: 0.9rem;
}

.groet__naam {
	font-weight: 600;
}

.groet__maand {
	color: var(--zacht);
}

/* =========================================================================
   16. Mensen
   ========================================================================= */

.mensenrij {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 44px;
}

.mens {
	display: grid;
	grid-template-columns: 168px 1fr;
	gap: 26px;
	align-items: start;
}

.mens__beeld {
	width: 168px;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 3px;
	border: 1px solid var(--rand);
}

.mens__rol {
	display: block;
	font-size: 0.76rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--steel);
	margin-bottom: 6px;
}

.mens h3 {
	margin-bottom: 10px;
}

.mens p {
	font-size: 0.97rem;
	color: var(--zacht);
}

.mens__zin {
	font-family: var(--kop);
	font-size: 1.04rem;
	color: var(--inkt);
	padding-left: 14px;
	border-left: 2px solid var(--pruim);
	margin-bottom: 0;
}

/* =========================================================================
   17. Journaal
   ========================================================================= */

.journaalraster {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
}

/* Het uitgelichte stuk loopt over de volle breedte, zodat de drie andere er
   daaronder precies met drie op een rij onder passen. */
.stukkaart--groot {
	grid-column: 1 / -1;
}

.stukkaart {
	display: flex;
	flex-direction: column;
	background: var(--papier);
	border: 1px solid var(--rand);
	border-radius: 3px;
	overflow: hidden;
	height: 100%;
}

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

.stukkaart--groot {
	display: grid;
	grid-template-columns: 1.25fr 1fr;
	align-items: stretch;
}

.stukkaart--groot .stukkaart__beeld {
	height: 100%;
	aspect-ratio: auto;
	min-height: 300px;
}

.stukkaart--groot .stukkaart__binnen {
	justify-content: center;
	padding: 34px 38px 36px;
}

.stukkaart__merk {
	display: block;
	font-size: 0.76rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--steel);
	margin-bottom: 12px;
}

.stukkaart__binnen {
	padding: 24px 26px 28px;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.stukkaart__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	font-size: 0.82rem;
	color: var(--zacht);
	margin-bottom: 12px;
}

/* Op de startpagina is de kop een h3, in het journaal een h2 onder de h1 van
   de bladzijde. Beide krijgen dezelfde opmaak. */
.stukkaart h3,
.stukkaart__kop {
	font-family: var(--kop);
	font-size: 1.28rem;
	font-weight: 400;
	line-height: 1.16;
	margin: 0 0 10px;
}

.stukkaart--groot h3,
.stukkaart--groot .stukkaart__kop {
	font-size: 1.7rem;
}

.stukkaart h3 a,
.stukkaart__kop a {
	display: inline-block;
	min-height: 38px;
	color: var(--inkt);
	text-decoration: none;
	border-bottom: 1px solid var(--rand);
}

.stukkaart h3 a:hover,
.stukkaart__kop a:hover {
	color: var(--pruim);
	border-bottom-color: var(--pruim);
}

.stukkaart p {
	font-size: 0.97rem;
	color: var(--zacht);
	margin-bottom: 0;
}

/* Een stuk zonder foto: een gekleurd paneel in plaats van een lege plek. */
.stukkaart--kaal .stukkaart__binnen {
	background: var(--paneel);
}

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

.vraaglijst {
	border-top: 1px solid var(--rand);
}

.vraag {
	border-bottom: 1px solid var(--rand);
}

.vraag summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	min-height: 56px;
	padding: 14px 0;
	font-family: var(--kop);
	font-size: 1.14rem;
	cursor: pointer;
	list-style: none;
}

.vraag summary::-webkit-details-marker {
	display: none;
}

.vraag summary::after {
	content: '+';
	flex: 0 0 auto;
	font-family: var(--tekst);
	font-size: 1.5rem;
	color: var(--pruim);
	line-height: 1;
}

.vraag[open] summary::after {
	content: '\2212';
}

.vraag__antwoord {
	padding-bottom: 18px;
	color: var(--zacht);
	max-width: 76ch;
}

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

/* =========================================================================
   19. Kalender: de tabel met twaalf maanden
   ========================================================================= */

/* De tafel schuift binnen zijn eigen doos in plaats van de hele bladzijde breder
   te maken. Zonder deze doos liep de kalender op 390px 74px uit en het
   cookiebeleid 160px. */
.tafelrol {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.kalendertafel {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.96rem;
}

.kalendertafel caption {
	text-align: left;
	color: var(--zacht);
	font-size: 0.94rem;
	padding-bottom: 12px;
}

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

.kalendertafel thead th {
	font-family: var(--tekst);
	font-size: 0.76rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--steel);
	border-bottom: 2px solid var(--rand);
	white-space: nowrap;
}

.kalendertafel tbody th {
	font-family: var(--kop);
	font-size: 1.1rem;
	font-weight: 400;
	color: var(--pruim);
	white-space: nowrap;
}

.kalendertafel tr:nth-child(even) td,
.kalendertafel tr:nth-child(even) th {
	background: var(--paneel);
}

.kalendertafel .mijd {
	color: var(--klei);
}

.kalendertafel__vork {
	white-space: nowrap;
	font-weight: 600;
}

/* =========================================================================
   20. Formulieren
   ========================================================================= */

.formulier {
	background: var(--papier);
	border: 1px solid var(--rand);
	border-radius: 3px;
	padding: 30px 30px 34px;
}

.vak--paneel .formulier {
	background: var(--papier);
}

.formulier__veld {
	margin-bottom: 18px;
}

.formulier__veld label {
	display: block;
	font-size: 0.86rem;
	font-weight: 600;
	margin-bottom: 6px;
}

.formulier__veld input,
.formulier__veld select,
.formulier__veld textarea {
	width: 100%;
	min-height: 46px;
	padding: 11px 13px;
	font-family: var(--tekst);
	font-size: 1rem;
	color: var(--inkt);
	background: var(--papier);
	border: 1px solid var(--rand);
	border-radius: 2px;
}

.formulier__veld textarea {
	min-height: 150px;
	resize: vertical;
}

.formulier__veld input:focus-visible,
.formulier__veld select:focus-visible,
.formulier__veld textarea:focus-visible {
	outline: 3px solid var(--pruim);
	outline-offset: 1px;
	border-color: var(--pruim);
}

.formulier__hulp {
	font-size: 0.86rem;
	color: var(--zacht);
	margin: 5px 0 0;
}

.formulier__paar {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

.valkuil {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.omroeping {
	border: 1px solid #a9c0a3;
	border-left: 4px solid var(--steel);
	background: #eef3ec;
	padding: 16px 20px;
	border-radius: 3px;
	margin-bottom: 26px;
}

.omroeping p {
	margin: 0;
}

.omroeping--fout {
	border-color: #e3c3ba;
	border-left-color: var(--klei);
	background: #f7ece8;
}

/* =========================================================================
   21. Losse tekstbladzijden en het journaalstuk
   ========================================================================= */

.tekstblok {
	max-width: 74ch;
}

.tekstblok h2 {
	margin-top: 1.9em;
}

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

.tekstblok h3 {
	margin-top: 1.6em;
}

.tekstblok dl {
	margin: 0 0 1.4em;
}

.tekstblok dt {
	font-weight: 600;
	margin-top: 1em;
}

.tekstblok dd {
	margin: 0 0 0.5em;
	color: var(--zacht);
}

/* Mail- en telefoonverwijzingen in een definitielijst zijn anders 19px hoog. */
.tekstblok dd a {
	display: inline-flex;
	align-items: center;
	min-height: 38px;
}

.stukkop {
	max-width: 74ch;
}

.stukmeta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	list-style: none;
	margin: 0 0 26px;
	padding: 0 0 18px;
	border-bottom: 1px solid var(--rand);
	font-size: 0.9rem;
	color: var(--zacht);
}

.stukmeta li {
	margin: 0;
}

.stukbeeld {
	width: 100%;
	border-radius: 3px;
	border: 1px solid var(--rand);
	margin-bottom: 32px;
}

.stukinhoud {
	max-width: 70ch;
	font-size: 1.06rem;
}

.stukinhoud p:first-of-type {
	font-size: 1.16rem;
	color: var(--inkt);
}

/* De grote 404: p in een blok is (0,1,1) en verslaat een klasse van (0,1,0),
   dus die regel moet het eigen element overslaan. */
/* De tekstkolom van het slotblok over een foto. */
.slotblok {
	max-width: 52ch;
}

.verdwaald {
	text-align: center;
	padding: 96px 0 104px;
}

/* Het getal is decoratief, maar het is ook het grootste op de bladzijde. In de
   randkleur haalde het 1.31:1 en was het praktisch onzichtbaar; dit gedempte
   pruim haalt 3.6:1 en blijft zacht. */
.verdwaald__getal {
	display: block;
	font-family: var(--kop);
	font-size: clamp(5rem, 16vw, 9rem);
	line-height: 0.9;
	color: #9a7787;
	margin-bottom: 10px;
}

.verdwaald p:not(.verdwaald__uitleg) {
	margin-left: auto;
	margin-right: auto;
}

.verdwaald__uitleg {
	max-width: 52ch;
	margin: 0 auto 30px;
	color: var(--zacht);
}

.verdwaald .steelrij {
	justify-content: center;
}

/* =========================================================================
   22. Balk over de browseropslag
   ========================================================================= */

/* Over de volle breedte onderaan, geen zwevende kaart. */
.opslagbalk {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 50;
	background: var(--pruim);
	color: var(--papier);
	border-top: 3px solid var(--pruim-diep);
}

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

.opslagbalk__binnen {
	max-width: var(--breed);
	margin: 0 auto;
	padding: 16px 22px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 26px;
}

.opslagbalk p {
	margin: 0;
	flex: 1 1 460px;
	font-size: 0.94rem;
	color: #f5e7ee;
}

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

.opslagbalk .steel--blad {
	color: var(--papier);
	border-color: #d9b6c5;
}

.opslagbalk .steel--blad:hover {
	background: var(--papier);
	color: var(--pruim);
}

.opslagbalk .steel--bloei {
	background: var(--papier);
	color: var(--pruim);
}

.opslagbalk .steel--bloei:hover {
	background: var(--paneel);
	color: var(--pruim-diep);
}

/* =========================================================================
   23. Opdoemen bij het scrollen
   -------------------------------------------------------------------------
   Alleen doorzichtig als javascript de klasse js heeft gezet, anders is de
   bladzijde zonder script leeg.
   ========================================================================= */

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

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

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

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

	.steel,
	.pijl,
	.wijzer__balk {
		transition: none;
	}
}

/* =========================================================================
   24. Kleinere schermen
   ========================================================================= */

@media (max-width: 1040px) {
	.wortelgrond__raster {
		grid-template-columns: 1fr 1fr;
		gap: 32px;
	}

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

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

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

	.cijferrij__vak:nth-child(n + 3) {
		border-top: 1px solid var(--rand);
	}

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

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

@media (max-width: 900px) {
	.toonbank__navigatie {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--papier);
		border-bottom: 1px solid var(--rand);
		box-shadow: 0 12px 24px rgba(43, 31, 38, 0.08);
		margin-left: 0;
	}

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

	.toonbank {
		position: sticky;
	}

	.toonbank__binnen {
		position: relative;
		flex-wrap: wrap;
	}

	/* Merk links, besteltoets rechts ervan, streepjes helemaal rechts. Het
	   automatische marge hoort op de besteltoets en niet op de streepjes,
	   anders duwt die alles naar een tweede regel. */
	.hekje {
		display: inline-flex;
		margin-left: 0;
		order: 3;
	}

	.toonbank .steel--bloei {
		margin-left: auto;
		order: 2;
	}

	.padlijst {
		flex-direction: column;
		gap: 0;
		padding: 10px 22px 18px;
	}

	.padlijst a {
		padding: 12px 0;
		border-bottom: 1px solid var(--rand);
	}

	/* De besteltoets blijft staan, maar wordt compact. */
	.toonbank .steel--bloei {
		min-height: 42px;
		padding: 9px 15px;
		font-size: 0.9rem;
	}

	.duo,
	.bouwer__binnen,
	.wijzer__uitslag {
		grid-template-columns: 1fr;
	}

	.duo {
		gap: 32px;
	}

	.duo--omgekeerd .duo__beeld {
		order: 0;
	}

	.bouwer__uitslag,
	.wijzer__vak + .wijzer__vak {
		border-left: 0;
		border-top: 1px solid var(--rand);
	}

	.mensenrij {
		grid-template-columns: 1fr;
		gap: 34px;
	}

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

	/* Op een smal scherm de foto boven de tekst in plaats van ernaast. */
	.hoofdbeeld {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.hoofdbeeld__foto {
		grid-column: 1;
		grid-row: 1;
		height: 300px;
	}

	.hoofdbeeld__binnen {
		grid-column: 1;
		grid-row: 2;
		padding: 44px 22px 48px;
	}
}

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

	.vak {
		padding: 52px 0;
	}

	.vak--kort {
		padding: 36px 0;
	}

	.kweekbed {
		padding: 0 18px;
	}

	.raster--twee,
	.raster--drie,
	.raster--vier,
	.groetenrij,
	.journaalraster,
	.formulier__paar {
		grid-template-columns: 1fr;
	}

	.stukkaart--groot {
		grid-template-columns: 1fr;
	}

	.stukkaart--groot .stukkaart__beeld {
		aspect-ratio: 3 / 2;
		min-height: 0;
	}

	.stukkaart--groot .stukkaart__binnen {
		padding: 24px 20px 26px;
	}

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

	.cijferrij__vak {
		border-left: 0 !important;
	}

	.cijferrij__vak + .cijferrij__vak {
		border-top: 1px solid var(--rand);
	}

	.cijferrij__uitleg {
		min-height: 0;
	}

	.wortelgrond__raster {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	/* Op de smalste schermen alleen de streepjes; de naam blijft in aria-label. */
	.hekje__woord {
		display: none;
	}

	.hekje {
		padding: 8px 11px;
		min-width: 44px;
		justify-content: center;
	}

	.toonbank__onder {
		display: none;
	}

	/* Drie dingen op 390px naast elkaar: dat lukt alleen als de tussenruimte en
	   het merk krimpen. Wordt het krapper, dan valt de besteltoets naar een
	   tweede regel en is de kop plotseling twee keer zo hoog. */
	.toonbank__binnen {
		gap: 10px;
		padding: 0 16px;
	}

	.toonbank__naam {
		font-size: 1.24rem;
	}

	.toonbank__merk {
		gap: 9px;
	}

	.toonbank .steel--bloei {
		padding: 9px 12px;
		font-size: 0.86rem;
	}

	.mens {
		grid-template-columns: 116px 1fr;
		gap: 18px;
	}

	.mens__beeld {
		width: 116px;
	}

	.wijzer__staven {
		padding: 14px 12px 12px;
		gap: 2px;
	}

	.wijzer__kolom {
		height: 40px;
	}

	.wijzer__kort {
		font-size: 0.58rem;
	}

	.wijzer__schuifrij {
		flex-wrap: wrap;
		padding: 16px 16px;
		gap: 10px;
	}

	.wijzer__maand {
		font-size: 1.3rem;
		min-width: 0;
	}

	.wijzer__schuif {
		flex: 1 1 100%;
	}

	.wijzer__vak,
	.bouwer__keuzes,
	.bouwer__uitslag {
		padding: 22px 18px 24px;
	}

	.formulier {
		padding: 22px 20px 26px;
	}

	.hoofdbeeld__foto {
		height: 230px;
	}

	.hoofdbeeld__binnen {
		padding: 34px 18px 40px;
	}

	.groet {
		transform: none;
	}

	.groet:nth-child(even) {
		transform: none;
	}

	.opslagbalk__binnen {
		padding: 14px 18px;
	}

	.opslagbalk__knoppen {
		width: 100%;
	}

	.kalendertafel {
		font-size: 0.9rem;
	}

	.kalendertafel th,
	.kalendertafel td {
		padding: 11px 10px;
	}

	/* Op een telefoon mogen de koppen afbreken; nowrap dwong hier de breedte. */
	.kalendertafel thead th,
	.kalendertafel tbody th {
		white-space: normal;
	}

	.kalendertafel code {
		word-break: break-all;
	}
}