/*
Theme Name: Schelle
Theme URI: https://schelledoet.nl/
Author: schelledoet.nl
Author URI: https://schelledoet.nl/
Description: Blokthema voor schelledoet.nl, de site met buurtinitiatieven in de wijk Schelle in Zwolle. Licht en zelfverzekerd: warm papierwit, bijna-zwarte koppen in Familjen Grotesk, lopende tekst van 19 pixels in Instrument Sans en monospace hoofdletterlabels als textuur. Eén accentkleur, gloedoranje, en verder rust. De menubalk zweeft als een pil boven de pagina, de kaarten zijn even hoog en op een telefoon staat alles onder elkaar. De hoofd- en accentkleur stel je in via het scherm Vormgeving; alle andere kleuren, de letters en de regelbreedte liggen vast, zodat de site leesbaar blijft. De letters staan op de eigen server en er zijn geen ingesloten filmpjes of kaartjes, dus ook geen cookiemelding.
Version: 2.3
Requires at least: 7.1
Tested up to: 7.1
Requires PHP: 8.1
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Tags: block-templates, full-site-editing, one-column, custom-colors, accessibility-ready
*/

/* ==================================================================
   Eigen CSS: alleen wat theme.json niet kan.

   Kleuren komen uitsluitend uit de presets van theme.json; hier staat
   nergens een kleurcode, zodat de kleurenkiezer bij Vormgeving alles
   in één keer meeneemt. Heeft een plek een kleur nodig die niet in het
   palet staat, dan wordt hij met color-mix() uit een preset gemengd,
   met een regel erbij waarom.

   De namen die dit bestand gebruikt:
     kleuren  papier, papier-diep, wit, inkt, inkt-zacht, lijn,
              gloed, gloed-diep, gloed-waas, open, dicht
     letters  kop (Familjen Grotesk), tekst (Instrument Sans),
              mono (Martian Mono)
     maten    klein, normaal, groot, xgroot, reuze
     eigen    --wp--custom--straal, --straal-klein, --pil, --lucht,
              --tekst-op-gloed
     schaduw  balk, zweef, diep

   Een klassenaam die twee keer in dezelfde selector staat is nergens
   een typefout. De blokindeling van WordPress zet marges op de kinderen
   van elk blok, met een selector die twee klassen weegt, en die stijl
   wordt in de voettekst gedrukt — dus ná dit bestand. Alleen met een
   zwaardere selector houden onze eigen marges stand.
   ================================================================== */

/* --- Eigen hulpwaarden ---------------------------------------------

   Geen nieuwe kleuren, alleen mengsels van bestaande presets en een
   paar maten die nergens anders thuishoren. */

:root {
	/* Het monospace hoofdletterlabel: de textuur van dit ontwerp. */
	--schelle-label-maat: 0.75rem;
	--schelle-label-spatie: 0.15em;

	/* De verhouding van een kaartfoto. Staat hier omdat het vlak dat een
	   ontbrekende foto vervangt dezelfde maat moet aanhouden. */
	--schelle-beeld: 4 / 3;

	/* Tekst en vlakken op het donkere vlak van de kennisbank: papier dat
	   een beetje inkt heeft opgenomen. Haalt ruim 8:1 op inkt. */
	--schelle-op-donker: color-mix(in srgb, var(--wp--preset--color--papier) 74%, transparent);
	--schelle-vlak-donker: color-mix(in srgb, var(--wp--preset--color--papier) 6%, transparent);
	--schelle-lijn-donker: color-mix(in srgb, var(--wp--preset--color--papier) 18%, transparent);

	/* De veerkrachtige overgang van het hele ontwerp: alles beweegt met
	   dezelfde curve, anders oogt het rommelig. */
	--schelle-veer: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* --- Basis ---------------------------------------------------------- */

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

/* De achtergrond: warm papier met een gloed rechtsboven en een korrel
   eroverheen. Dat geeft diepte zonder versiering — het is precies wat
   het verschil maakt met een vlakke witte pagina.

   De korrel is ruis en geen kleur: in het plaatje hieronder staat geen
   enkele kleurcode, alleen een ruisfilter dat naar grijs wordt gehaald.
   Met multiply wordt hij een schaduwtje op het papier.

   Bewust geen background-attachment: fixed — dat schokt op een telefoon.
   De gloed is daarom één schermhoogte hoog en staat bovenaan. */
body {
	background-color: var(--wp--preset--color--papier);
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.14'/%3E%3C/svg%3E"),
		radial-gradient(60rem 40rem at 88% -12%, color-mix(in srgb, var(--wp--preset--color--gloed) 13%, transparent), transparent 62%),
		radial-gradient(48rem 34rem at 4% 4%, color-mix(in srgb, var(--wp--preset--color--gloed) 5%, transparent), transparent 60%);
	background-repeat: repeat, no-repeat, no-repeat;
	background-size: 180px 180px, 100% 100vh, 100% 100vh;
	background-blend-mode: multiply, normal, normal;
}

img {
	max-width: 100%;
}

::selection {
	background: var(--wp--preset--color--gloed);
	color: var(--wp--custom--tekst-op-gloed);
}

/* Familjen Grotesk staat strak op elkaar; de negatieve letterafstand
   hoort bij de letter. Zonder die correctie ogen grote koppen los. */
h1,
h2,
h3 {
	text-wrap: balance;
}

/* Regels van 60 tot 75 tekens, ook als een blok breed is uitgelijnd.
   Bewust alleen binnen de getypte tekst: buiten die zone zou een vaste
   maximumbreedte de kaarten en de balken in de weg zitten. */
.wp-block-post-content :is(p, li, dd, blockquote) {
	max-width: 42rem;
}

/* Tekst die er wel is maar niet te zien: voor wie de pagina laat
   voorlezen. Niet display:none — dan slaat het voorleesprogramma hem
   over, en juist daar is hij voor bedoeld. */
.schelle-verborgen {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* --- Focus ---------------------------------------------------------- */

/* Zichtbare focusrand op alles wat je met het toetsenbord bereikt.
   In gloed-diep: dat is de donkere variant van het accent en die haalt
   op het papier ruim genoeg contrast. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--gloed-diep);
	outline-offset: 3px;
	border-radius: 6px;
}

/* Op de donkere vlakken is gloed-diep te donker; daar pakt de rand het
   volle accent. */
.schelle-kennis :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.schelle-tegel--inkt:focus-visible,
.schelle-tegel--foto:focus-visible {
	outline-color: var(--wp--preset--color--gloed);
}

/* Raakdoel van 44 px: een duim raakt een menulink zonder mikken. */
.wp-block-navigation .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* --- Het monospace label --------------------------------------------

   Overal waar een klein bijschrift staat, staat het in dezelfde vorm:
   monospace, hoofdletters, wijd uit elkaar. Dat is de textuur van dit
   ontwerp; de sjablonen zetten er .schelle-label op. */

.schelle-label,
.schelle-kaart__laatste,
.schelle-agenda__maand,
.schelle-agenda__tijd,
.schelle-tijdlijn__datum,
.schelle-cijfers__cijfer dt,
.schelle-gegevens__naam,
.schelle-gegevens__nagelopen,
.schelle-kruimel,
.schelle-trefwoorden {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--schelle-label-maat);
	font-weight: 500;
	letter-spacing: var(--schelle-label-spatie);
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--wp--preset--color--inkt-zacht);
}

.schelle-label.schelle-label {
	margin-block: 0;
}

.schelle-label--gloed {
	color: var(--wp--preset--color--gloed-diep);
}

/* Op een donker vlak of op een foto: papier in plaats van grijs. */
.schelle-label--licht {
	color: color-mix(in srgb, var(--wp--preset--color--papier) 88%, transparent);
}

/* --- Foto's ---------------------------------------------------------

   Alle beelden krijgen dezelfde lichte correctie en dezelfde sluier,
   zodat een scherpe foto en een matige foto naast elkaar toch één
   geheel vormen. Dat is nodig: de foto's komen van bewoners en zijn
   van wisselende kwaliteit. */

.schelle-beeld,
.wp-block-post-featured-image,
.schelle-hero__foto,
.schelle-tijdlijn__foto {
	position: relative;
	overflow: hidden;
	margin: 0;
	border-radius: var(--wp--custom--straal-klein);
	background: var(--wp--preset--color--papier-diep);
}

.schelle-beeld img,
.wp-block-post-featured-image img,
.schelle-hero__afbeelding,
.schelle-tegel__foto,
.schelle-tijdlijn__foto img {
	display: block;
	width: 100%;
	filter: saturate(0.88) contrast(1.05) brightness(1.02);
	transition: transform 700ms var(--schelle-veer);
}

/* De sluier: een heel dunne warme laag boven, een donkere onder. Hij
   trekt de beelden naar elkaar toe. */
.schelle-beeld::after,
.wp-block-post-featured-image::after,
.schelle-hero__foto::after,
.schelle-tijdlijn__foto::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(
		180deg,
		color-mix(in srgb, var(--wp--preset--color--gloed) 7%, transparent),
		color-mix(in srgb, var(--wp--preset--color--inkt) 10%, transparent)
	);
}

/* De foto van een fototegel draagt zelf al een sluier met tekst erop;
   daar zou een tweede laag het beeld dichtsmeren. */
.schelle-tegel .wp-block-post-featured-image::after {
	background: none;
}

/* --- Knoppen ---------------------------------------------------------

   Elke knop op deze site is een pil. Er is één familie: .schelle-knop,
   altijd om een knopblok van WordPress heen — zowel in de sjablonen als
   in de eigen blokken, die precies dezelfde opbouw afdrukken. Kleur en
   pilvorm staan al in theme.json; hier staan de drie soorten en het
   duwtje bij aanwijzen.

   De dubbele klasse in de selectors is nodig omdat de knopstijl uit
   theme.json op .wp-element-button staat en die anders wint. */

.wp-block-button__link.wp-element-button {
	transition:
		transform 250ms var(--schelle-veer),
		background-color 250ms,
		color 250ms,
		border-color 250ms;
}

.wp-block-button__link.wp-element-button:hover {
	transform: translateY(-2px);
}

/* De volle accentknop. Dit is wat theme.json al doet, maar de sjablonen
   zetten er ook presetklassen op; die regels staan hier zodat de knop
   ook klopt als iemand die klassen in de editor kwijtraakt. */
.schelle-knop--gloed .wp-block-button__link.wp-element-button {
	background: var(--wp--preset--color--gloed);
	border-color: var(--wp--preset--color--gloed);
	color: var(--wp--custom--tekst-op-gloed);
}

/* De donkere knop: de eerste knop van de hero. In het ontwerp is dat de
   enige zwarte pil van de pagina — hij trekt het oog naar "bekijk de
   initiatieven" zonder een tweede oranje vlak toe te voegen. Zonder deze
   regels zou hij oranje worden, want dat is de standaardknop. */
.schelle-knop--inkt .wp-block-button__link.wp-element-button {
	background: var(--wp--preset--color--inkt);
	border-color: var(--wp--preset--color--inkt);
	color: var(--wp--preset--color--papier);
}

/* Bij aanwijzen een warmere zwart, geen andere kleur: het accent wordt
   er een klein beetje doorheen geroerd. Zo volgt ook deze knop de
   kleurenkiezer, en blijft papier erop ruim leesbaar. */
.schelle-knop--inkt .wp-block-button__link.wp-element-button:hover {
	background: color-mix(in srgb, var(--wp--preset--color--inkt) 88%, var(--wp--preset--color--gloed));
	border-color: color-mix(in srgb, var(--wp--preset--color--inkt) 88%, var(--wp--preset--color--gloed));
	color: var(--wp--preset--color--papier);
}

/* De omrande knop is rustig: een lijntje, geen vlak. */
.schelle-knop--rand .wp-block-button__link.wp-element-button {
	background: transparent;
	border-color: var(--wp--preset--color--lijn);
	border-width: 1px;
	color: var(--wp--preset--color--inkt);
}

.schelle-knop--rand .wp-block-button__link.wp-element-button:hover {
	background: transparent;
	border-color: var(--wp--preset--color--inkt);
	color: var(--wp--preset--color--inkt);
}

/* Het pijltje schuift mee. Het staat op aria-hidden in de blokken. */
.schelle-knop__pijl,
.schelle-kioskstrook__pijl {
	display: inline-block;
	transition: transform 250ms var(--schelle-veer);
}

.schelle-knop .wp-block-button__link.wp-element-button:hover .schelle-knop__pijl,
.schelle-kioskstrook__link:hover .schelle-kioskstrook__pijl {
	transform: translateX(3px);
}

/* De korte adressen in de voettekst en de wegwijzers op de 404: kleine
   monospace pillen, zoals de adresstroken in het ontwerp. */
.schelle-adressen {
	gap: 8px;
}

.schelle-adres .wp-block-button__link.wp-element-button {
	padding: 0.5em 0.95em;
	background: var(--wp--preset--color--wit);
	border: 1px solid var(--wp--preset--color--lijn);
	border-width: 1px;
	color: var(--wp--preset--color--inkt);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	text-transform: none;
}

.schelle-adres .wp-block-button__link.wp-element-button:hover {
	background: var(--wp--preset--color--wit);
	border-color: var(--wp--preset--color--gloed);
	color: var(--wp--preset--color--gloed-diep);
}

/* --- De zwevende menubalk -------------------------------------------

   De balk plakt bovenaan en zweeft als een pil boven de pagina. De
   houder eromheen is doorzichtig, dus de tekst schuift er zichtbaar
   onderdoor; de doorkijk (backdrop-filter) houdt de balk leesbaar.

   Waarom de eerste regel hieronder nodig is: WordPress zet om elk
   sjabloononderdeel een omhulsel heen, hier een <header>. Dat omhulsel
   is precies zo hoog als de balk zelf, en een plakkend blok kan nooit
   verder reizen dan het blok waar het in zit. Daarom scrolde de balk
   op de live site meteen mee weg, ondanks position: sticky.

   display: contents haalt alleen dat omhulsel als vlak weg; het
   element blijft een <header> voor voorleesprogramma's. De balk hangt
   daardoor aan de hele pagina en blijft staan. In het beheerscherm
   blijft het omhulsel wel een vlak — daar is het het blok dat je
   aanklikt, en dat moet je kunnen zien. */

.wp-site-blocks:not(.block-editor-block-list__layout) > header.wp-block-template-part {
	display: contents;
}

/* De houder houdt zijn plek in de tekststroom maar zweeft erboven.
   14px in plaats van 0, zodat de balk de bovenrand van het scherm niet
   raakt. Hij staat vanaf de eerste pixel al op die hoogte, dus hij
   springt niet zodra je begint te scrollen.

   De negatieve ondermarge dicht het gat onder de balk. Zonder die
   marge staat de balk gewoon in de stroom en duwt hij alles omlaag:
   zijn eigen ruimte, de afstand tussen de blokken en de bovenmarge van
   de eerste band tellen dan bij elkaar op tot bijna honderd pixels
   wit. Hiermee schuift de eerste band er vlak achter, net als in het
   ontwerp: ongeveer 32px lucht onder de balk op een breed scherm en
   18px op een telefoon. */
.schelle-balkhouder.schelle-balkhouder {
	position: sticky;
	top: 14px;
	z-index: 60;
	margin-block: 0 calc(-1 * clamp(10px, 2.75vw, 36px));
	padding-block: 0;
	background: transparent;
	/* De houder is een doorzichtig vlak over de volle breedte. Zonder
	   deze regel vangt hij de tikken op van alles wat eronder langs
	   schuift; de balk zelf zet ze weer aan. */
	pointer-events: none;
}

/* De balk zelf. De achtergrond staat hier vol wit: dat is de veilige
   bodem voor een browser die geen doorkijk kan. De doorkijk komt er
   hieronder pas bij, in een @supports. */
.schelle-balk.schelle-balk {
	pointer-events: auto;
	gap: 12px;
	padding: 9px 9px 9px 20px;
	border: 1px solid var(--wp--preset--color--lijn);
	border-radius: var(--wp--custom--pil);
	background: var(--wp--preset--color--wit);
	box-shadow: var(--wp--preset--shadow--balk);
}

/* De doorkijk: het wit staat op 90% en wat eronder langs schuift wordt
   vervaagd. Waarom 90% en niet 78% zoals in het ontwerp:

   De donkerste kleur van de site is de hoofdkleur, en die mag de
   beheerder zelf kiezen. De contrastcontrole laat alles door dat 4,5:1
   haalt op het papier — dus in het uiterste geval is de hoofdkleur een
   middengrijs. Schuift er dan een donker vlak onder de balk door, dan
   wordt de balk zelf donkerder en zakt de tekst erop onder die 4,5:1.
   Bij 90% blijft het mengsel van wit en het donkerste vlak altijd
   minstens zo licht als het papier, en haalt de tekst dus overal wat
   hij op de rest van de pagina ook haalt. Met de standaardkleuren is
   het ruim 14:1. De vervaging maakt bovendien van een donkere foto een
   egale waas in plaats van scherpe zwarte plekken achter de letters.

   Onder de 90% zakken: alleen samen met een strengere contrasteis in
   het scherm Vormgeving. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.schelle-balk.schelle-balk {
		background: color-mix(in srgb, var(--wp--preset--color--wit) 90%, transparent);
		-webkit-backdrop-filter: blur(16px) saturate(1.35);
		backdrop-filter: blur(16px) saturate(1.35);
	}
}

/* De sitenaam met het oranje stipje ervoor — het kleinste stukje
   huisstijl dat er is. */
.schelle-merk.schelle-merk {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	margin: 0;
	white-space: nowrap;
}

.schelle-merk::before {
	content: "";
	flex: none;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--wp--preset--color--gloed);
}

/* De vier menulinks staan dicht op elkaar. Zonder deze regel pakken ze
   de blokafstand van de site (14 tot 26px) en duwen ze de balk uit
   elkaar. In het opengeklapte menu op een telefoon blijft de ruimere
   afstand van WordPress zelf staan: daar is elke regel een raakdoel. */
.schelle-menu > .wp-block-navigation__container,
.schelle-menu .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container {
	gap: 4px;
}

/* Menulinks zien er niet uit als links maar als knopjes: geen streep,
   wel een vlakje bij aanwijzen. Het raakdoel van 44px staat hierboven
   bij "Focus" en geldt voor elke menulink, ook in het uitklapmenu. */
.schelle-menu a:where(:not(.wp-element-button)) {
	padding-inline: 0.85em;
	border-radius: var(--wp--custom--pil);
	color: var(--wp--preset--color--inkt);
	text-decoration: none;
	transition: background-color 200ms, color 200ms;
}

.schelle-menu a:where(:not(.wp-element-button)):hover {
	background: var(--wp--preset--color--papier-diep);
	text-decoration: none;
}

/* De knop die het menu op een smal scherm openklapt is ook een pil, en
   met het woord "Menu" erin in plaats van drie streepjes: dat is voor
   de doelgroep van deze site het duidelijkst. Het sjabloon zet daarom
   hasIcon op false. 44px hoog, zodat een duim hem raakt.

   Hier bewust geen display: die zet WordPress zelf, en zet je er een
   eigen waarde neer, dan blijft de knop ook op een breed scherm staan
   waar hij juist weg hoort. */
.schelle-menu .wp-block-navigation__responsive-container-open {
	align-items: center;
	min-height: 44px;
	padding: 0.5em 1em;
	border: 1px solid var(--wp--preset--color--lijn);
	border-radius: var(--wp--custom--pil);
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 600;
	color: var(--wp--preset--color--inkt);
}

/* De sluitknop van het opengeklapte menu: even groot raakdoel, en in
   de inktkleur, want het menu staat op papier. */
.schelle-menu .wp-block-navigation__responsive-container-close {
	min-height: 44px;
	min-width: 44px;
	color: var(--wp--preset--color--inkt);
}

/* Het opengeklapte menu: papier, geen kaal wit, en ruime regels. */
.schelle-menu .wp-block-navigation__responsive-container.is-menu-open {
	padding-top: clamp(3rem, 10vw, 5rem);
	background: var(--wp--preset--color--papier);
	color: var(--wp--preset--color--inkt);
}

.schelle-menu .wp-block-navigation__responsive-container.is-menu-open a {
	font-size: var(--wp--preset--font-size--groot);
}

/* De knop rechts in de balk mag krimpen maar nooit afbreken. */
.schelle-balk__actie .wp-block-button__link.wp-element-button {
	white-space: nowrap;
}

/* Tussen de telefoon en het brede scherm zit een lastige strook: het
   uitklapmenu is er nog niet, maar de naam, de menulinks en de knop
   passen samen niet meer op één regel. Daar mag de balk afbreken en
   wordt hij een afgerond blokje in plaats van een pil. Zonder deze
   regel schuiven de menulinks de balk uit. */
@media (max-width: 61.9375em) {
	.schelle-balk.schelle-balk {
		flex-wrap: wrap;
		row-gap: 8px;
		border-radius: var(--wp--custom--straal);
	}

	.schelle-menu.schelle-menu,
	.schelle-menu .wp-block-navigation__container {
		flex-wrap: wrap;
		justify-content: flex-start;
	}
}

/* Op een telefoon krimpt alles in de balk een maatje, precies zoals in
   het ontwerp. Dat scheelt zo'n 40px breedte, en dat is genoeg om de
   naam, de menuknop en de knop rechts op de ruimere telefoons (vanaf
   ongeveer 410px) op één regel te houden. Past het niet, dan breekt de
   balk af volgens de regel hierboven; dat is beter dan tekst die de
   balk uit loopt. De lopende tekst van de site blijft ongemoeid — dit
   geldt alleen voor deze drie knopjes. */
@media (max-width: 47.9375em) {
	.schelle-balk.schelle-balk {
		padding: 7px 7px 7px 16px;
		column-gap: 8px;
	}

	.schelle-merk.schelle-merk {
		font-size: 1rem;
	}

	.schelle-balk__actie .wp-block-button__link.wp-element-button {
		padding-inline: 0.95em;
		font-size: 0.9375rem;
	}

	.schelle-menu .wp-block-navigation__responsive-container-open {
		padding-inline: 0.85em;
		font-size: 0.9375rem;
	}
}

/* --- De aankondigingsbalk -------------------------------------------

   Het enige volvlakke accent op de site, en dat mag: hij staat er
   tijdelijk. De dubbele klasse maakt deze regels de baas over de
   regels die de plug-in zelf meestuurt. */

.schelle-aankondiging.schelle-aankondiging {
	padding: 0.8rem 1.25rem;
	background: var(--wp--preset--color--gloed);
	color: var(--wp--custom--tekst-op-gloed);
	text-align: center;
}

.schelle-aankondiging.schelle-aankondiging p {
	margin: 0 auto;
	max-width: 62ch;
	font-family: var(--wp--preset--font-family--kop);
	font-size: var(--wp--preset--font-size--klein);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: -0.01em;
}

/* --- De hero ---------------------------------------------------------

   .schelle-hero is de band bovenaan de voorpagina: het sjabloon zet er
   het herobklok, de kioskbalk en het bord in. De <section> van het blok
   zelf heet .schelle-hero__kern. */

.schelle-hero {
	padding-top: clamp(28px, 4vw, 56px);
	padding-bottom: var(--wp--custom--lucht);
}

/* De bovenregel: plaatsnaam links, bijgewerkt-datum rechts, met een
   streep ertussen en een lijn eronder. */
.schelle-hero__bovenregel.schelle-hero__bovenregel {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0 0 clamp(20px, 3vw, 34px);
	padding-bottom: 22px;
	border-bottom: 1px solid var(--wp--preset--color--lijn);
}

.schelle-hero__streep {
	flex: 1;
	height: 1px;
	background: var(--wp--preset--color--lijn);
}

.schelle-hero__opzet {
	display: grid;
	gap: clamp(24px, 3vw, 40px);
}

/* De maat "reuze" is de displaymaat uit het ontwerp: 2,4rem op een
   telefoon, 7,1rem op een breed scherm. */
.schelle-hero__titel.schelle-hero__titel {
	margin: 0;
	font-family: var(--wp--preset--font-family--kop);
	font-size: var(--wp--preset--font-size--reuze);
	font-weight: 700;
	line-height: 0.94;
	letter-spacing: -0.045em;
	text-wrap: balance;
}

/* De tweede helft van de kop staat in grijs: dat maakt van één zin
   twee zinnen, zonder een tweede regel tekst. */
.schelle-hero__dof {
	color: var(--wp--preset--color--inkt-zacht);
}

.schelle-hero__zij {
	display: flex;
	flex-direction: column;
	gap: 26px;
	align-items: flex-start;
}

.schelle-hero__tekst {
	max-width: 38ch;
	color: color-mix(in srgb, var(--wp--preset--color--inkt) 82%, var(--wp--preset--color--inkt-zacht));
}

.schelle-hero__tekst p {
	margin: 0 0 0.75em;
}

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

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

.schelle-hero__foto {
	margin-top: clamp(28px, 4vw, 54px);
	border-radius: var(--wp--custom--straal);
}

.schelle-hero__afbeelding {
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* Vanaf een tablet: de kop naast de uitleg, allebei onderaan
   uitgelijnd. Dat is de verhouding uit het ontwerp. */
@media (min-width: 56em) {
	.schelle-hero__opzet {
		grid-template-columns: minmax(0, 7.2fr) minmax(0, 4fr);
		column-gap: clamp(32px, 4vw, 72px);
		align-items: end;
	}
}

/* Op een telefoon past de bovenregel niet op één regel. Dan gaan de
   twee labels onder elkaar en vervalt het streepje ertussen — anders
   breekt "Schelle · Zwolle" middenin af. */
@media (max-width: 47.9375em) {
	.schelle-hero__bovenregel.schelle-hero__bovenregel {
		flex-wrap: wrap;
		gap: 6px 16px;
	}

	.schelle-hero__streep {
		display: none;
	}

	.schelle-hero__bovenregel > .schelle-label {
		flex-basis: 100%;
	}
}

/* --- De kioskstrook in de hero ---------------------------------------

   Een dienstmededeling, meer niet: één regel met de stand van de
   koffiekiosk. De stand staat er altijd in letters bij, nooit alleen
   als kleur — het stipje herhaalt alleen wat er al staat. */

.schelle-kioskstrook.schelle-kioskstrook {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	margin: clamp(28px, 4vw, 54px) 0 0;
	padding: 12px 20px 12px 18px;
	background: var(--wp--preset--color--wit);
	border: 1px solid var(--wp--preset--color--lijn);
	border-radius: var(--wp--custom--pil);
}

/* Het kloppende stipje. Het is versiering en verdwijnt vanzelf zodra
   iemand "minder beweging" heeft ingesteld. */
.schelle-kioskstrook__stip {
	position: relative;
	flex: none;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--wp--preset--color--gloed);
}

.schelle-kioskstrook__stip::after {
	content: "";
	position: absolute;
	inset: -6px;
	border: 1.5px solid var(--wp--preset--color--gloed);
	border-radius: 50%;
	animation: schelle-klop 2.6s ease-out infinite;
}

/* Dicht: dan is het stipje de vaste statuskleur en klopt er niets. */
.schelle-kioskstrook--dicht .schelle-kioskstrook__stip {
	background: var(--wp--preset--color--dicht);
}

.schelle-kioskstrook--dicht .schelle-kioskstrook__stip::after,
.schelle-kioskstrook--onbevestigd .schelle-kioskstrook__stip::after {
	animation: none;
	border-color: transparent;
}

.schelle-kioskstrook--open .schelle-kioskstrook__stip {
	background: var(--wp--preset--color--open);
}

.schelle-kioskstrook--open .schelle-kioskstrook__stip::after {
	border-color: var(--wp--preset--color--open);
}

.schelle-kioskstrook--onbevestigd .schelle-kioskstrook__stip {
	background: var(--wp--preset--color--inkt-zacht);
}

@keyframes schelle-klop {
	0% {
		transform: scale(0.55);
		opacity: 0.85;
	}
	70% {
		transform: scale(1.15);
		opacity: 0;
	}
	100% {
		transform: scale(1.15);
		opacity: 0;
	}
}

.schelle-kioskstrook__wat {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--schelle-label-maat);
	font-weight: 500;
	letter-spacing: var(--schelle-label-spatie);
	text-transform: uppercase;
	color: var(--wp--preset--color--inkt-zacht);
}

.schelle-kioskstrook__scheiding {
	width: 1px;
	height: 20px;
	background: var(--wp--preset--color--lijn);
}

.schelle-kioskstrook__stand {
	font-family: var(--wp--preset--font-family--kop);
	font-size: var(--wp--preset--font-size--normaal);
	font-weight: 700;
	letter-spacing: -0.02em;
}

/* Het tijdstip is wél een label: twee woorden en een klok, net als in
   het ontwerp. */
.schelle-kioskstrook__tijd {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--schelle-label-maat);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--inkt-zacht);
}

/* De twee zinnen onder de stand: de toelichting die de beheerder zelf
   typt ("vanaf 10 uur", "te nat vandaag") en de eerstvolgende geplande
   ochtend als er vandaag nog niet op de knop is gedrukt (hoofdstuk 4).

   Allebei gewone leesletters, niet de monospace kapitalen van een label:
   een zin in hoofdletters leest traag, en juist deze twee moet een
   bezoeker in één keer hebben. Ze krijgen een eigen regel onder de
   stand — dat is ook wat het invulveld belooft ("verschijnt onder de
   status") en wat de balk op de kioskpagina doet. De link blijft
   daardoor rechts op de eerste regel staan, zoals in het ontwerp.

   De twee komen nooit samen voor: de toelichting hoort bij een stand
   die iemand heeft gezet, de agendazin juist bij het ontbreken daarvan. */
.schelle-kioskstrook__toelichting,
.schelle-kioskstrook__extra {
	order: 2;
	flex-basis: 100%;
	font-size: var(--wp--preset--font-size--klein);
	line-height: 1.45;
	color: var(--wp--preset--color--inkt-zacht);
}

.schelle-kioskstrook__link {
	order: 1;
	margin-left: auto;
	padding-bottom: 2px;
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--gloed-diep) 35%, transparent);
	color: var(--wp--preset--color--gloed-diep);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--schelle-label-maat);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}

.schelle-kioskstrook__link:hover {
	border-bottom-color: var(--wp--preset--color--gloed-diep);
	color: var(--wp--preset--color--gloed-diep);
	text-decoration: none;
}

/* Op een telefoon wordt de strook een blokje: de link eronder, geen
   streepjes ertussen. */
@media (max-width: 47.9375em) {
	.schelle-kioskstrook.schelle-kioskstrook {
		padding: 14px 18px;
		border-radius: var(--wp--custom--straal);
	}

	.schelle-kioskstrook__scheiding {
		display: none;
	}

	/* Op een telefoon staat de link onderaan het blokje: eerst de stand
	   en de eerstvolgende ochtend, dan pas waar je verder kunt kijken. */
	.schelle-kioskstrook__link {
		order: 3;
		margin-left: 0;
		width: 100%;
	}
}

/* --- De kioskbalk op de kioskpagina (hoofdstuk 4) --------------------

   Groen en rood zijn statuskleuren en geen huisstijlkleuren: ze staan
   als twee vaste presets in theme.json en lopen buiten de kleurenkiezer
   om. Hier worden ze doorgegeven aan de balk. De plug-in draagt dezelfde
   twee waarden nog een keer als terugval in assets/status.css, want het
   knopscherm op /beheer/status/ rendert kaal en kent geen presets; de
   dubbele klasse maakt deze regels daar de baas over, ongeacht de
   volgorde waarin de twee stylesheets binnenkomen.

   De vulling blijft van de plug-in: open is groen, dicht is rood, en
   dat is betekenis. Het thema doet alleen de vorm. */

.schelle-status.schelle-status {
	--schelle-open: var(--wp--preset--color--open);
	--schelle-dicht: var(--wp--preset--color--dicht);

	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.4rem 1rem;
	margin: 0 0 var(--wp--preset--spacing--40);
	padding: 0.9rem 1.5rem;
	border-radius: var(--wp--custom--pil);
}

.schelle-status__kop {
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 700;
	letter-spacing: -0.025em;
}

/* Het tijdstip blijft er groot bij staan — het is de enige menselijke
   controle als de stand ooit ergens blijft hangen — maar in monospace
   hoofdletters, zodat het de stand zelf niet meer beconcurreert. */
.schelle-status__tijd.schelle-status__tijd {
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: clamp(1.05rem, 3.4vw, 1.35rem);
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	opacity: 0.88;
}

/* De toelichting krijgt een eigen regel; de pil groeit dan mee. */
.schelle-status__toelichting,
.schelle-status__extra {
	flex-basis: 100%;
	margin: 0;
}

/* Onbevestigd is geen kleur maar een rand: dan hoort de balk bij het
   papier en niet bij de statuskleuren. */
.schelle-status--onbevestigd.schelle-status--onbevestigd {
	background: var(--wp--preset--color--wit);
	border: 1px solid var(--wp--preset--color--lijn);
	color: var(--wp--preset--color--inkt);
}

/* Dezelfde balk op een kaart in een overzicht: kleiner, en zonder de
   toelichting — op een kaart telt alleen de stand. */
.schelle-kaartstatus.schelle-kaartstatus {
	margin: 0;
	padding: 0.4rem 0.9rem;
	gap: 0.3rem 0.7rem;
}

.schelle-kaartstatus .schelle-status__kop {
	font-size: var(--wp--preset--font-size--klein);
}

.schelle-kaartstatus .schelle-status__tijd.schelle-status__tijd {
	font-size: var(--schelle-label-maat);
	letter-spacing: var(--schelle-label-spatie);
}

.schelle-kaartstatus .schelle-status__toelichting,
.schelle-kaartstatus .schelle-status__extra {
	display: none;
}

/* --- Het bord: wat er nu speelt --------------------------------------

   Een mozaïek van tegels boven aan de voorpagina. Het aantal kolommen
   komt als getal mee uit het blok, in --schelle-kolommen, en de tegels
   weten zelf of ze groot of breed zijn. */

.schelle-nuspeelt {
	margin-top: clamp(40px, 5vw, 72px);
}

.schelle-bordkop {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 14px;
}

.schelle-bordkop__titel.schelle-bordkop__titel,
.schelle-bordkop__telling.schelle-bordkop__telling {
	margin: 0;
}

/* De rijhoogte is een ondergrens en geen plafond: minmax(174px, auto).
   De beheerder typt de regeltjes op de tegels zelf, en bij een lange
   regel op een halfbreed scherm moet de rij meegroeien in plaats van de
   tekst af te knippen. Alle tegels in een rij groeien samen, dus het
   mozaïek blijft recht. */
.schelle-bord {
	display: grid;
	grid-template-columns: repeat(var(--schelle-kolommen, 4), minmax(0, 1fr));
	grid-auto-rows: minmax(174px, auto);
	gap: 12px;
}

.schelle-tegel {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 20px;
	background: var(--wp--preset--color--wit);
	border: 1px solid var(--wp--preset--color--lijn);
	border-radius: var(--wp--custom--straal);
	color: var(--wp--preset--color--inkt);
	text-decoration: none;
	text-wrap: pretty;
	transition: transform 350ms var(--schelle-veer), box-shadow 350ms;
}

a.schelle-tegel:hover {
	transform: translateY(-4px);
	box-shadow: var(--wp--preset--shadow--zweef);
	text-decoration: none;
}

a.schelle-tegel:hover .schelle-tegel__foto {
	transform: scale(1.045);
}

.schelle-tegel__titel {
	margin: 0.35em 0 0;
	font-family: var(--wp--preset--font-family--kop);
	font-size: 1.3125rem;
	font-weight: 700;
	line-height: 1.06;
	letter-spacing: -0.03em;
}

.schelle-tegel__meta {
	margin: 0.5em 0 0;
	font-size: var(--wp--preset--font-size--klein);
	line-height: 1.4;
	color: var(--wp--preset--color--inkt-zacht);
}

/* Het onderste blokje van een cijfer- of datumtegel. Het blok geeft een
   <span> mee; die moet zich als blok gedragen, anders komt het cijfer
   naast het bijschrift te staan in plaats van erboven. */
.schelle-tegel__onder {
	display: block;
}

/* De fototegel: het beeld ligt achter de tekst. De sluier maakt élke
   foto donker genoeg voor witte letters — ook een lichte of een matige
   foto. Zo blijft de tekst leesbaar bij wisselende beeldkwaliteit. */
/* Inkt als ondergrond en niet wit: laadt een foto ooit niet, dan staat
   de lichte tekst nog steeds op een donker vlak in plaats van te
   verdwijnen op wit. */
.schelle-tegel--foto {
	padding: 0;
	border: none;
	background: var(--wp--preset--color--inkt);
}

.schelle-tegel__foto {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.schelle-tegel__sluier {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		178deg,
		color-mix(in srgb, var(--wp--preset--color--inkt) 10%, transparent) 18%,
		color-mix(in srgb, var(--wp--preset--color--inkt) 52%, transparent) 58%,
		color-mix(in srgb, var(--wp--preset--color--inkt) 80%, transparent) 82%,
		color-mix(in srgb, var(--wp--preset--color--inkt) 92%, transparent) 100%
	);
}

.schelle-tegel__inhoud {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin-top: auto;
	padding: 20px;
	color: var(--wp--preset--color--papier);
}

.schelle-tegel--foto .schelle-tegel__titel {
	color: var(--wp--preset--color--papier);
}

.schelle-tegel--foto .schelle-tegel__meta {
	color: color-mix(in srgb, var(--wp--preset--color--papier) 82%, transparent);
}

/* De accenttegel: het enige felle vlak in de hero. De tekst erop komt
   uit --tekst-op-gloed, zodat hij leesbaar blijft als iemand bij
   Vormgeving een andere accentkleur kiest. */
.schelle-tegel--gloed {
	justify-content: space-between;
	background: var(--wp--preset--color--gloed);
	border: none;
	color: var(--wp--custom--tekst-op-gloed);
}

/* Alles op deze tegel neemt de tekstkleur over die bij het accent hoort;
   het grijs van een gewoon bijschrift haalt op oranje geen AA. */
.schelle-tegel--gloed .schelle-label,
.schelle-tegel--gloed .schelle-tegel__meta,
.schelle-tegel--gloed .schelle-tegel__titel {
	color: var(--wp--custom--tekst-op-gloed);
}

.schelle-tegel--gloed .schelle-tegel__meta {
	margin-top: 0.35em;
	line-height: 1.3;
	font-weight: 500;
}

.schelle-tegel__cijfer {
	display: block;
	font-family: var(--wp--preset--font-family--kop);
	font-size: 4.4rem;
	font-weight: 700;
	line-height: 0.8;
	letter-spacing: -0.055em;
}

/* De inkttegel: de eerstvolgende afspraak. */
.schelle-tegel--inkt {
	justify-content: space-between;
	background: var(--wp--preset--color--inkt);
	border: none;
	color: var(--wp--preset--color--papier);
}

.schelle-tegel__datum {
	display: block;
	font-family: var(--wp--preset--font-family--kop);
	font-size: clamp(1.8rem, 3vw, 2.6rem);
	font-weight: 700;
	line-height: 0.95;
	letter-spacing: -0.04em;
}

.schelle-tegel--inkt .schelle-tegel__meta {
	color: var(--schelle-op-donker);
}

/* De berichttegel: één zin uit het laatste bericht. */
.schelle-tegel__citaat {
	display: block;
	margin: 0.4em 0 0;
	font-family: var(--wp--preset--font-family--kop);
	font-size: var(--wp--preset--font-size--klein);
	font-weight: 500;
	line-height: 1.28;
	letter-spacing: -0.02em;
}

.schelle-tegel--kop-boven {
	justify-content: flex-start;
}

/* De grote en de brede tegel. */
.schelle-tegel--groot {
	grid-column: span 2;
	grid-row: span 2;
}

.schelle-tegel--groot .schelle-tegel__titel {
	font-size: clamp(1.5rem, 2.5vw, 2.15rem);
	letter-spacing: -0.038em;
}

.schelle-tegel--breed {
	grid-column: span 2;
}

@media (max-width: 67.5em) {
	.schelle-bord {
		grid-template-columns: repeat(min(var(--schelle-kolommen, 4), 4), minmax(0, 1fr));
		grid-auto-rows: minmax(162px, auto);
	}
}

@media (max-width: 47.5em) {
	.schelle-bord {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: minmax(148px, auto);
		grid-auto-flow: dense;
	}

	.schelle-tegel--breed,
	.schelle-tegel--groot {
		grid-column: span 2;
	}

	.schelle-tegel__cijfer {
		font-size: 3.4rem;
	}
}

/* --- Sectiekop en paginakop ------------------------------------------

   Een klein monospace labeltje, daaronder de kop, en rechts een
   tekstlink naar het hele overzicht. */

.schelle-voorpagina.schelle-voorpagina > .schelle-sectie,
.schelle-404.schelle-404 > .schelle-sectie,
.schelle-archief.schelle-archief > .schelle-sectie {
	margin-block-start: var(--wp--custom--lucht);
}

.schelle-sectiekop.schelle-sectiekop {
	gap: 24px;
	margin-bottom: clamp(24px, 3vw, 40px);
}

.schelle-sectiekop__titel.schelle-sectiekop__titel {
	margin: 0.35em 0 0;
	max-width: 16ch;
}

.schelle-tekstlink.schelle-tekstlink {
	margin: 0;
	font-family: var(--wp--preset--font-family--kop);
	font-size: var(--wp--preset--font-size--klein);
	font-weight: 600;
}

.schelle-tekstlink a {
	padding-bottom: 2px;
	border-bottom: 2px solid var(--wp--preset--color--gloed);
	text-decoration: none;
	transition: color 200ms;
}

.schelle-tekstlink a:hover {
	color: var(--wp--preset--color--gloed-diep);
	text-decoration: none;
}

/* De kop van een archief-, artikel- of zoekpagina. */
.schelle-paginakop {
	padding-top: clamp(28px, 4vw, 56px);
	padding-bottom: clamp(24px, 3vw, 40px);
}

/* De titel van een archief-, artikel- of zoekpagina. De maat staat hier
   en niet in theme.json, omdat de sjablonen op de ene pagina een h1 en
   op de andere een berichttitel gebruiken: alleen zo zijn ze even groot.
   Kleiner dan de kop van de voorpagina, groter dan een sectiekop — die
   rangorde is wat een bezoeker vertelt waar hij is.

   De reusachtige maat uit het ontwerp is bewust voorbehouden aan de
   hero. Een woord als "Privacyverklaring" op 114 pixels leest niet als
   zelfverzekerd maar als een ongeluk. */
.schelle-paginakop__titel.schelle-paginakop__titel {
	margin: 0.25em 0 0;
	max-width: 18ch;
	font-family: var(--wp--preset--font-family--kop);
	font-size: clamp(2.4rem, 5vw, 4.4rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.042em;
}

.schelle-inleiding.schelle-inleiding {
	margin-top: var(--wp--preset--spacing--40);
	max-width: 46ch;
	font-size: var(--wp--preset--font-size--groot);
	line-height: 1.45;
	color: var(--wp--preset--color--inkt-zacht);
}

/* De hoofdfoto boven een artikel: breed, met dezelfde behandeling als
   alle andere beelden. */
.schelle-hoofdfoto.schelle-hoofdfoto {
	margin-block: 0 var(--wp--preset--spacing--60);
	border-radius: var(--wp--custom--straal);
}

/* De hoofdfoto is een band, geen muur. Zonder hoogtegrens is een 16:9-beeld op
   een breed scherm ruim 740 pixels hoog: dan staat er onder de vouw niets meer
   en heeft een bezoeker niet door dat er tekst volgt. De verhouding blijft 16:9
   op smalle schermen; op een breed scherm knipt de hoogtegrens hem bij. */
.schelle-hoofdfoto img {
	aspect-ratio: 16 / 9;
	max-height: min(52vh, 460px);
	width: 100%;
	object-fit: cover;
}

/* De knop naar het contactformulier, direct onder de gegevens. De velden
   Meedoen en Contact verwijzen ernaar met "de knop hieronder". Hij wordt door het
   blok zelf uitgestuurd en niet door een knopblok, want hij moet het nummer van dit
   initiatief meekrijgen — vandaar een losse link met de knopopmaak van het thema. */
.schelle-gegevens__knop {
	margin-block: var(--wp--preset--spacing--30) 0;
}

.schelle-knop-los {
	display: inline-block;
	text-decoration: none;
}

.schelle-kruimel.schelle-kruimel {
	margin-block: 0 var(--wp--preset--spacing--30);
}

/* Onderaan een pagina: wanneer hij voor het laatst is bijgewerkt. */
.schelle-meta.schelle-meta {
	gap: 0.5rem 0.75rem;
	margin-block-start: var(--wp--custom--lucht);
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--lijn);
}

.schelle-terug {
	margin-block-start: var(--wp--custom--lucht);
}

/* --- Kaartenrasters (hoofdstuk 6) ------------------------------------

   Eén kolom op een telefoon, meer zodra er plaats voor is. auto-fit met
   een minimum van 20rem komt bij de paginabreedte van dit ontwerp
   vanzelf op drie kolommen uit, zonder een reeks breekpunten.

   Alle overzichten doen mee, anders worden de kaarten in de kennisbank,
   de fondsenlijst en de spullenlijst ongelijk hoog. */

.schelle-kaarten,
.schelle-draaiboeken,
.schelle-fondsen,
.schelle-materialen,
.schelle-resultaten,
.schelle-algemeenlijst {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
	gap: clamp(14px, 1.6vw, 26px);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* De kern zet elke kaart in een <li>; zo vult de kaart de hele cel en
   worden de kaarten in een rij even hoog. */
.schelle-kaarten.schelle-kaarten > li,
.schelle-draaiboeken.schelle-draaiboeken > li,
.schelle-fondsen.schelle-fondsen > li,
.schelle-materialen.schelle-materialen > li,
.schelle-resultaten.schelle-resultaten > li,
.schelle-algemeenlijst.schelle-algemeenlijst > li {
	display: grid;
	margin-block: 0;
}

/* --- De kaart --------------------------------------------------------- */

.schelle-kaart {
	position: relative; /* draagt de kaartbrede link */
	display: flex;
	flex-direction: column;
	padding: 14px 14px 20px;
	background: var(--wp--preset--color--wit);
	border: 1px solid var(--wp--preset--color--lijn);
	border-radius: var(--wp--custom--straal);
	transition:
		transform 350ms var(--schelle-veer),
		box-shadow 350ms,
		border-color 350ms;
}

.schelle-kaart:hover {
	transform: translateY(-5px);
	box-shadow: var(--wp--preset--shadow--zweef);
	border-color: color-mix(in srgb, var(--wp--preset--color--lijn) 70%, var(--wp--preset--color--inkt));
}

.schelle-kaart:hover .schelle-kaart__beeld img {
	transform: scale(1.05);
}

/* De onderdelen van een kaart staan in de volgorde waarin de sjablonen
   en de plug-in ze afdrukken, en dat is niet de volgorde waarin je ze
   wilt zien: het regeltje "laatste bericht" komt vlak achter de titel,
   terwijl het onderaan de kaart hoort. Met order zetten we ze op hun
   plek zonder dat er iets aan de sjablonen hoeft te veranderen. */
.schelle-kaart.schelle-kaart > * {
	order: 3;
	margin-block: 0;
}

.schelle-kaart.schelle-kaart > :is(.schelle-kaart__beeld, .schelle-kaart__vlak) {
	order: 1;
	margin-bottom: var(--wp--preset--spacing--30);
}

.schelle-kaart.schelle-kaart > :is(.schelle-status, .schelle-kaart__status, .schelle-label) {
	order: 2;
	margin-bottom: 0.5rem;
}

.schelle-kaart.schelle-kaart > .wp-block-post-title {
	order: 3;
}

.schelle-kaart.schelle-kaart > .schelle-verouderd {
	order: 4;
	margin-top: 0.5rem;
}

.schelle-kaart.schelle-kaart > .schelle-kaart__samenvatting {
	order: 5;
	margin-top: 0.7rem;
}

.schelle-kaart.schelle-kaart > :is(.schelle-kaart__laatste, .schelle-trefwoorden) {
	order: 6;
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--50);
}

/* Vaste verhouding 4:3 voor de kaartfoto — dezelfde die de sjablonen
   aanvragen en dezelfde die in het goedgekeurde ontwerp staat. Zonder
   dit worden de kaarten ongelijk hoog en oogt de pagina slordig; het
   vlak dat een ontbrekende foto vervangt houdt precies dezelfde maat
   aan, zodat een kaart mét foto even hoog is als een kaart zonder. */
.schelle-kaart__beeld.schelle-kaart__beeld img {
	aspect-ratio: var(--schelle-beeld);
	object-fit: cover;
}

/* Kaarttitels overal even groot, ook waar het sjabloon een h2 gebruikt
   en elders een h3. */
.schelle-kaart.schelle-kaart > .wp-block-post-title {
	font-family: var(--wp--preset--font-family--kop);
	font-size: var(--wp--preset--font-size--groot);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.035em;
	text-wrap: pretty;
	/* Een lange titel wordt afgekapt in plaats van de kaart op te rekken.
	   Drie regels: genoeg om een initiatief te herkennen, niet genoeg om
	   de rij scheef te trekken. */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
	overflow-wrap: anywhere;
}

/* Een kaarttitel is technisch een link, maar hoort er niet als link uit
   te zien: de hele kaart is al klikbaar, dus een gekleurde onderstreepte
   kop is dubbelop en maakt een overzicht onrustig. De streep komt terug
   bij aanwijzen — in gloed, zodat het nog steeds voelt als iets waar je
   op kunt klikken. */
.schelle-kaart .wp-block-post-title a {
	color: var(--wp--preset--color--inkt);
	text-decoration: none;
	/* WordPress zet zelf `display:inline-block` op deze link. Daardoor werkt het
	   afkappen op drie regels hierboven niet: de kop groeit gewoon door en een
	   kaart met een lange titel wordt hoger dan de rest van de rij. Terugzetten
	   op inline herstelt dat. De klikbare laag over de kaart (a::after) blijft
	   werken, want die hangt aan .schelle-kaart en niet aan de link zelf. */
	display: inline;
}

.schelle-kaart:hover .wp-block-post-title a,
.schelle-kaart:focus-within .wp-block-post-title a {
	color: var(--wp--preset--color--inkt);
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--gloed);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.16em;
}

/* De hele kaart is aanklikbaar: de titellink rekt zich over de kaart
   uit en ligt boven de foto, zodat een tik overal op de kaart naar
   dezelfde pagina gaat. */
.schelle-kaart .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* De focusrand hoort dan om de hele kaart, niet om de titel alleen. */
.schelle-kaart:focus-within {
	outline: 3px solid var(--wp--preset--color--gloed-diep);
	outline-offset: 3px;
}

.schelle-kaart .wp-block-post-title a:focus-visible {
	outline: none;
}

/* Staat er in het sjabloon een link om de foto, dan blijft die een
   eigen tabstop. Hij krijgt daarom een eigen zichtbare rand: wie met
   het toetsenbord werkt moet zien waar hij staat. */
.schelle-kaart__beeld a:focus-visible {
	outline: 3px solid var(--wp--preset--color--gloed-diep);
	outline-offset: -3px;
	border-radius: var(--wp--custom--straal-klein);
}

/* Twee regels samenvatting, daarna afgekapt. */
.schelle-kaart__samenvatting,
.schelle-kaart__samenvatting .wp-block-post-excerpt__excerpt {
	margin: 0;
	color: color-mix(in srgb, var(--wp--preset--color--inkt) 78%, var(--wp--preset--color--inkt-zacht));
	font-size: var(--wp--preset--font-size--klein);
	line-height: 1.5;
}

.schelle-kaart__samenvatting .wp-block-post-excerpt__excerpt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}

/* De onderregel van de kaart: het labeltje links, een pijltje rechts.
   Het pijltje is versiering — met de lege alt-tekst achter de schuine
   streep slaat een voorleesprogramma het over. */
.schelle-kaart__laatste,
.schelle-kaart > .schelle-trefwoorden {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
}

.schelle-kaart__laatste::after,
.schelle-kaart > .schelle-trefwoorden::after {
	content: "→";
	content: "→" / "";
	flex: none;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border: 1px solid var(--wp--preset--color--lijn);
	border-radius: 50%;
	font-family: var(--wp--preset--font-family--tekst);
	font-size: 1rem;
	letter-spacing: 0;
	color: var(--wp--preset--color--inkt);
	transition: background-color 250ms, border-color 250ms, color 250ms, transform 250ms;
}

.schelle-kaart:hover .schelle-kaart__laatste::after,
.schelle-kaart:focus-within .schelle-kaart__laatste::after,
.schelle-kaart:hover > .schelle-trefwoorden::after,
.schelle-kaart:focus-within > .schelle-trefwoorden::after {
	background: var(--wp--preset--color--gloed);
	border-color: var(--wp--preset--color--gloed);
	color: var(--wp--custom--tekst-op-gloed);
	transform: translateX(2px);
}

/* --- Een kaart zonder foto: een getekend buurtkaartje -----------------

   De hoofdfoto is aanbevolen en niet verplicht: een initiatief moet ook
   te publiceren zijn als er nog geen goede foto is. Staat er geen, dan
   zet inc/weergave.php hier een leeg vlak neer in precies dezelfde
   verhouding 4:3, zodat de kaarten in een rij even hoog blijven.

   Wat erin komt is géén grijs vlak maar een schematisch kaartje van de
   buurt: twee stelsels straten, een plantsoen en een speld op de plek.
   Het is met verlopen getekend en niet met een plaatje, want in een
   plaatje zou een kleurcode staan; nu komt elke lijn uit het accent en
   verandert het kaartje mee met de kleurenkiezer. Zuiver versiering —
   het vlak staat op aria-hidden. */

.schelle-kaart__vlak {
	position: relative;
	overflow: hidden;
	width: 100%;
	aspect-ratio: var(--schelle-beeld);
	border-radius: var(--wp--custom--straal-klein);
	background-color: var(--wp--preset--color--gloed-waas);
	background-image:
		/* het plantsoen en een tweede groenstrook */
		radial-gradient(
			52% 46% at 62% 58%,
			color-mix(in srgb, var(--wp--preset--color--gloed) 17%, transparent) 0 60%,
			transparent 62%
		),
		radial-gradient(
			30% 34% at 12% 18%,
			color-mix(in srgb, var(--wp--preset--color--gloed) 11%, transparent) 0 62%,
			transparent 64%
		),
		/* de straten: twee stelsels dunne lijnen die elkaar schuin kruisen.
		   Schuin en niet haaks, anders leest het als ruitjespapier in
		   plaats van als een stratenplan. */
		repeating-linear-gradient(
			104deg,
			transparent 0 44px,
			color-mix(in srgb, var(--wp--preset--color--gloed) 30%, transparent) 44px 46px
		),
		repeating-linear-gradient(
			27deg,
			transparent 0 68px,
			color-mix(in srgb, var(--wp--preset--color--gloed) 22%, transparent) 68px 70px
		);
}

/* De speld: een stip met een ring eromheen, zoals op een plattegrond. */
.schelle-kaart__vlak::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(circle at 68% 46%, var(--wp--preset--color--gloed-diep) 0 5px, transparent 6px),
		radial-gradient(
			circle at 68% 46%,
			transparent 0 12px,
			color-mix(in srgb, var(--wp--preset--color--gloed) 55%, transparent) 12px 13.5px,
			transparent 14px
		);
}

/* --- Statuslabel op de kaart (hoofdstuk 6) ---------------------------

   Idee, In voorbereiding, Proeffase, Actief of Afgerond, boven de titel.
   Nooit alleen kleur: er staat het woord zelf in, en het stipje ervoor
   herhaalt alleen wat er al staat. */

.schelle-kaart__status {
	margin: 0;
}

.schelle-kaart__status span {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.42em 0.85em 0.42em 0.7em;
	background: var(--wp--preset--color--papier-diep);
	border: 1px solid var(--wp--preset--color--lijn);
	border-radius: var(--wp--custom--pil);
	color: var(--wp--preset--color--inkt);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--schelle-label-maat);
	font-weight: 500;
	letter-spacing: 0.08em;
	line-height: 1.4;
	text-transform: uppercase;
	white-space: nowrap;
}

.schelle-kaart__status span::before {
	content: "";
	flex: none;
	width: 0.5em;
	height: 0.5em;
	border-radius: 50%;
	background: var(--wp--preset--color--gloed);
}

/* --- "Geen recente updates" ------------------------------------------

   Het seintje dat inc/onderhoud.php achter de titel van een initiatief
   zet zodra het langer dan een half jaar niet is nagelopen. Nooit alleen
   kleur: er staat een woord in, en de rand is gestippeld. */

.schelle-verouderd {
	margin: 0;
}

.schelle-verouderd span {
	display: inline-block;
	padding: 0.3rem 0.8rem;
	background: var(--wp--preset--color--papier-diep);
	border: 2px dashed var(--wp--preset--color--lijn);
	border-radius: var(--wp--custom--pil);
	color: var(--wp--preset--color--inkt-zacht);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--schelle-label-maat);
	font-weight: 500;
	letter-spacing: 0.08em;
	line-height: 1.4;
	text-transform: uppercase;
}

/* --- De draaiboekkaart -----------------------------------------------

   Een draaiboek heeft een langere titel en een langere samenvatting dan
   een initiatief. Daarom staat het beeld ernaast in plaats van erboven,
   in een staand kadertje — precies zoals in het ontwerp.

   Alleen als er een foto ís: op de kennisbankpagina staan de kaarten
   zonder beeld, en dan zou een lege kolom overblijven. */

.schelle-kaart--draaiboek:has(> .schelle-kaart__beeld) {
	display: grid;
	grid-template-columns: 118px minmax(0, 1fr);
	column-gap: 20px;
	align-items: start;
	padding: 18px;
}

.schelle-kaart--draaiboek > .schelle-kaart__beeld {
	grid-column: 1;
	grid-row: 1 / -1;
	margin-bottom: 0;
}

.schelle-kaart--draaiboek.schelle-kaart--draaiboek > .schelle-kaart__beeld img {
	aspect-ratio: 3 / 4;
}

.schelle-kaart--draaiboek:has(> .schelle-kaart__beeld) > :not(.schelle-kaart__beeld) {
	grid-column: 2;
}

@media (max-width: 47.5em) {
	.schelle-kaart--draaiboek:has(> .schelle-kaart__beeld) {
		grid-template-columns: minmax(0, 1fr);
	}

	.schelle-kaart--draaiboek > .schelle-kaart__beeld {
		grid-row: auto;
		margin-bottom: var(--wp--preset--spacing--30);
	}

	/* Het blok schrijft de verhouding als inline-stijl op de afbeelding zelf.
	   Inline wint altijd van een stijlblad, dus hier is !important de enige
	   manier om de staande duim op een telefoon liggend te maken. */
	.schelle-kaart--draaiboek > .schelle-kaart__beeld img {
		aspect-ratio: 16 / 9 !important;
		width: 100%;
		object-fit: cover;
	}

	.schelle-kaart--draaiboek.schelle-kaart--draaiboek > .schelle-kaart__beeld img {
		aspect-ratio: 16 / 9;
	}

	.schelle-kaart--draaiboek:has(> .schelle-kaart__beeld) > :not(.schelle-kaart__beeld) {
		grid-column: 1;
	}
}

/* Een zoekresultaat heeft geen beeld: dan mag de kaart wat rustiger. */
.schelle-resultaat {
	padding: 20px 22px 24px;
}

/* --- Agenda -----------------------------------------------------------

   Op de voorpagina zijn het drie momenten naast elkaar in één wit vlak,
   zoals de agendastrook in het ontwerp. Op de agendapagina zelf is het
   een lijst onder elkaar; twintig items in drie kolommen leest niet. */

.schelle-agenda,
.schelle-archief--agenda .schelle-agendablok {
	background: var(--wp--preset--color--wit);
	border: 1px solid var(--wp--preset--color--lijn);
	border-radius: var(--wp--custom--straal);
	overflow: hidden;
}

.schelle-agendalijst {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

.schelle-agendalijst.schelle-agendalijst > li {
	margin-block: 0;
}

.schelle-agenda-item {
	position: relative;
	height: 100%;
	padding: 22px 26px;
	border-top: 1px solid var(--wp--preset--color--lijn);
	transition: background-color 250ms;
}

.schelle-agendalijst > li:first-child .schelle-agenda-item {
	border-top: 0;
}

.schelle-agenda-item:hover {
	background: var(--wp--preset--color--papier);
}

/* De datum staat in een eigen veld en komt uit inc/weergave.php: het
   getal groot, de dag en de maand er klein onder in het accent. Dat is
   het datumblokje uit het ontwerp — waar het oog in een lijst als
   eerste landt.

   Het blokje staat links naast de titel en de plaats. Een vaste breedte
   van 66px, zodat de titels van drie items op één lijn beginnen; onder
   die maat gaat "31" bij grote letters niet meer op één regel. */
.schelle-agenda-item {
	display: grid;
	grid-template-columns: 66px minmax(0, 1fr);
	column-gap: 16px;
	align-items: start;
}

.schelle-agenda__datum {
	grid-column: 1;
	grid-row: 1 / span 3;
	margin: 0;
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 700;
	letter-spacing: -0.04em;
	line-height: 0.92;
}

.schelle-agenda__dag {
	display: block;
	font-size: 2rem;
}

.schelle-agenda__maand.schelle-agenda__maand {
	display: block;
	margin-top: 6px;
	letter-spacing: 0.13em;
	color: var(--wp--preset--color--gloed-diep);
}

/* Alles behalve het datumblokje staat in de tweede kolom. */
.schelle-agenda-item > :not(.schelle-agenda__datum) {
	grid-column: 2;
}

/* De begintijd en de plaats vormen samen één regel onder de titel. */
.schelle-agenda__tijd.schelle-agenda__tijd {
	margin: 0.4rem 0 0;
	letter-spacing: 0.1em;
}

/* Staat de plaats er ook, dan schuift die tegen de tijd aan in plaats
   van een eigen regel te nemen — twee halve regels leest slechter dan
   één hele. */
.schelle-agenda__tijd + .schelle-agenda-item__waar.schelle-agenda-item__waar {
	margin-top: 0.15rem;
}

.schelle-agenda-item.schelle-agenda-item > .wp-block-post-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--kop);
	font-size: var(--wp--preset--font-size--normaal);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.02em;
}

.schelle-agenda-item .wp-block-post-title a {
	color: var(--wp--preset--color--inkt);
	text-decoration: none;
}

.schelle-agenda-item .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.schelle-agenda-item:hover .wp-block-post-title a,
.schelle-agenda-item:focus-within .wp-block-post-title a {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--gloed);
	text-underline-offset: 0.16em;
}

.schelle-agenda-item:focus-within {
	outline: 3px solid var(--wp--preset--color--gloed-diep);
	outline-offset: -3px;
}

.schelle-agenda-item__waar.schelle-agenda-item__waar {
	margin: 0.4rem 0 0;
	color: var(--wp--preset--color--inkt-zacht);
	font-size: var(--wp--preset--font-size--klein);
	line-height: 1.45;
}

/* Afgelast blijft staan in plaats van te verdwijnen (3.7). Nooit alleen
   kleur: er staat een woord in en de rand is gestippeld. */
.schelle-agenda__afgelast {
	margin: 0.5rem 0 0;
}

.schelle-agenda__afgelast span {
	display: inline-block;
	padding: 0.3rem 0.8rem;
	border: 2px dashed var(--wp--preset--color--dicht);
	border-radius: var(--wp--custom--pil);
	color: var(--wp--preset--color--dicht);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--schelle-label-maat);
	font-weight: 500;
	letter-spacing: 0.08em;
	line-height: 1.4;
	text-transform: uppercase;
}

/* De knop rechtsonder in de strook hoort erbij, niet eronder. */
.schelle-agenda__slot.schelle-agenda__slot {
	margin: 0;
	padding: 18px 26px;
	border-top: 1px solid var(--wp--preset--color--lijn);
}

/* Op de voorpagina staan er precies drie: dan naast elkaar, met een
   lijntje ertussen in plaats van eronder. */
@media (min-width: 52em) {
	.schelle-agenda .schelle-agendalijst {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.schelle-agenda .schelle-agenda-item {
		border-top: 0;
		border-left: 1px solid var(--wp--preset--color--lijn);
	}

	.schelle-agenda .schelle-agendalijst > li:first-child .schelle-agenda-item {
		border-left: 0;
	}
}

/* --- Links op een donker vlak -----------------------------------------

   theme.json geeft élke link op de site de inktkleur. Dat klopt op het
   papier, maar op een donker vlak is inkt precies de achtergrond: zwarte
   letters op zwart, contrast 1 : 1. De link staat er wel, maar niemand
   ziet hem. Dat gebeurde in het kennisbankblok met "Vertel het ons".
   De zweefkleur uit theme.json is nog een val: die is gloed gemengd met
   inkt en haalt op zo'n vlak maar 3,1 : 1 — te weinig.

   Daarom hier één regel voor alles wat donker is, en niet één pleister
   voor die ene zin: de link schrijft in papier (16,4 : 1 op inkt, ruim
   boven de AA-grens van 4,5 : 1) en het streepje eronder krijgt het
   accent. Kleur is dus niet het enige verschil met de tekst eromheen;
   het streepje blijft staan voor wie kleur niet ziet.

   Knoppen doen niet mee: die hebben hun eigen vlak en eigen kleuren, en
   die staan al in theme.json. Vandaar :not(.wp-element-button).

   .has-inkt-background-color staat erbij zonder eigen klasse: zet
   iemand later in de beheeromgeving een blok op de inktkleur, dan
   werken de links daar meteen goed. */

.schelle-kennis a:not(.wp-element-button),
.has-inkt-background-color a:not(.wp-element-button) {
	color: var(--wp--preset--color--papier);
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--gloed);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.18em;
}

.schelle-kennis a:not(.wp-element-button):hover,
.schelle-kennis a:not(.wp-element-button):focus,
.has-inkt-background-color a:not(.wp-element-button):hover,
.has-inkt-background-color a:not(.wp-element-button):focus {
	color: var(--wp--preset--color--papier);
	text-decoration-color: var(--wp--preset--color--papier);
}

/* De tegels op de voorpagina zijn zelf de link: daar is het hele vlak
   aanklikbaar, dus geen streepje, alleen de goede kleur. Zonder deze
   regel hangt het van de volgorde van de stylesheets af of de tegel of
   theme.json wint — en verliest de tegel, dan staat de datum in inkt op
   inkt. Twee klassen wegen zwaarder dan de regel uit theme.json, dus
   hier ligt het vast. */
a.schelle-tegel--inkt,
a.schelle-tegel--foto {
	color: var(--wp--preset--color--papier);
	text-decoration: none;
}

/* --- De kennisbank: het enige donkere vlak van de pagina --------------

   De kleuren komen uit het sjabloon (inkt als vlak, papier als tekst);
   hier staat alleen de vorm. */

.schelle-kennis {
	border-radius: clamp(24px, 3vw, 38px);
}

.schelle-kennis__kop {
	display: grid;
	gap: 18px;
	margin-bottom: clamp(28px, 3.4vw, 48px);
}

.schelle-kennis__intro.schelle-kennis__intro {
	max-width: 44ch;
	font-size: var(--wp--preset--font-size--klein);
	/* Papier op vol vermogen zou schreeuwen naast de kop; hier iets
	   gedempt, en nog altijd ruim boven de AA-grens. */
	color: var(--schelle-op-donker);
}

@media (min-width: 56em) {
	.schelle-kennis__kop {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 32px;
		align-items: end;
	}

	/* Label en kop links onder elkaar, de inleiding rechts ernaast en
	   met de onderkant gelijk. "span 2" en niet "1 / -1": de rijen zijn
	   hier niet vooraf vastgelegd, en dan telt -1 als rij één. */
	.schelle-kennis__kop > :not(.schelle-kennis__intro) {
		grid-column: 1;
	}

	.schelle-kennis__intro.schelle-kennis__intro {
		grid-column: 2;
		grid-row: 1 / span 2;
		align-self: end;
	}
}

/* De draaiboeken staan hier met z'n tweeën naast elkaar. */
.schelle-kennis .schelle-draaiboeken {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
}

.schelle-kennis .schelle-kaart {
	background: var(--schelle-vlak-donker);
	border-color: var(--schelle-lijn-donker);
}

.schelle-kennis .schelle-kaart:hover {
	background: color-mix(in srgb, var(--wp--preset--color--papier) 10%, transparent);
	border-color: color-mix(in srgb, var(--wp--preset--color--papier) 28%, transparent);
	box-shadow: none;
}

.schelle-kennis .schelle-kaart:focus-within {
	outline-color: var(--wp--preset--color--gloed);
}

.schelle-kennis .schelle-kaart__samenvatting,
.schelle-kennis .schelle-kaart__samenvatting .wp-block-post-excerpt__excerpt {
	color: var(--schelle-op-donker);
}

/* Op het donkere vlak schrijft alles in papier. Het sjabloon zet die
   kleur er zelf ook op, maar dat mag niet de enige plek zijn: raakt hij
   daar ooit weg bij het bewerken, dan staat er zwarte tekst op zwart. */
.schelle-kennis :is(h2, h3, .wp-block-post-title),
.schelle-kennis .wp-block-post-title a {
	color: var(--wp--preset--color--papier);
}

.schelle-kennis .schelle-kaart .wp-block-post-title a {
	text-decoration: none;
}

.schelle-kennis .schelle-label {
	color: var(--schelle-op-donker);
}

.schelle-kennis__label.schelle-kennis__label {
	color: var(--wp--preset--color--gloed);
}

.schelle-kennis .schelle-kaart .schelle-kennis__label.schelle-kennis__label {
	color: var(--schelle-op-donker);
}

.schelle-kennis .schelle-kaart .schelle-trefwoorden::after,
.schelle-kennis .schelle-kaart__laatste::after {
	border-color: var(--schelle-lijn-donker);
	color: var(--wp--preset--color--papier);
}

.schelle-kennis__knop.schelle-kennis__knop {
	margin-top: clamp(26px, 3vw, 38px);
}

/* --- Trefwoorden ------------------------------------------------------ */

.schelle-trefwoorden a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid var(--wp--preset--color--lijn);
}

.schelle-trefwoorden a:hover {
	color: var(--wp--preset--color--gloed-diep);
	border-bottom-color: var(--wp--preset--color--gloed);
	text-decoration: none;
}

/* Buiten een kaart, op een artikelpagina, staat de rij trefwoorden los
   met wat lucht eromheen. */
.schelle-initiatief > .schelle-trefwoorden,
.schelle-draaiboek > .schelle-trefwoorden,
.schelle-pagina > .schelle-trefwoorden,
.schelle-artikel > .schelle-trefwoorden {
	margin-block: var(--wp--preset--spacing--50);
}

.schelle-samenvatting {
	max-width: 46ch;
}

.schelle-klein {
	font-size: var(--wp--preset--font-size--klein);
	color: var(--wp--preset--color--inkt-zacht);
}

/* --- Tijdlijn van updates en proefdagen ------------------------------

   Het blok geeft een <section> met daarin een kop en een <ol>. De lijn
   hoort om de reeks en niet om de kop, en de <ol> moet zijn eigen
   nummering en inspringing kwijt — anders staan er "1. 2. 3." naast de
   berichten en landen de stippen midden in de standaardinspringing. */

.schelle-tijdlijn {
	margin: 0;
}

.schelle-tijdlijn__kop {
	margin-top: 0;
}

.schelle-tijdlijn__reeks {
	margin: 0;
	padding: 0 0 0 1.5rem;
	border-left: 2px solid var(--wp--preset--color--lijn);
	list-style: none;
}

.schelle-tijdlijn__item {
	position: relative;
	padding-bottom: var(--wp--preset--spacing--50);
}

.schelle-tijdlijn__item:last-child {
	padding-bottom: 0;
}

/* De stip staat precies midden op de lijn: 1,5rem padding plus 2px rand,
   min de helft van de stip. De ring eromheen maakt hem los van de lijn. */
.schelle-tijdlijn__item::before {
	content: "";
	position: absolute;
	left: calc(-1.875rem - 1px);
	top: 0.55em;
	width: 0.75rem;
	height: 0.75rem;
	border-radius: 50%;
	background: var(--wp--preset--color--gloed);
	box-shadow: 0 0 0 4px var(--wp--preset--color--papier);
}

.schelle-tijdlijn__datum {
	display: block;
	margin: 0 0 0.35rem;
	color: var(--wp--preset--color--gloed-diep);
}

.schelle-tijdlijn__soort {
	color: var(--wp--preset--color--inkt-zacht);
}

.schelle-tijdlijn__titel {
	margin: 0 0 0.35rem;
	font-family: var(--wp--preset--font-family--kop);
	font-size: var(--wp--preset--font-size--groot);
	line-height: 1.15;
}

.schelle-tijdlijn__feiten {
	margin: 0 0 0.5rem;
	color: var(--wp--preset--color--inkt-zacht);
	font-size: var(--wp--preset--font-size--klein);
}

.schelle-tijdlijn__fotos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
	gap: var(--wp--preset--spacing--20);
	margin-block: var(--wp--preset--spacing--30);
}

.schelle-tijdlijn__foto img {
	aspect-ratio: var(--schelle-beeld);
	object-fit: cover;
}

/* Wat ging goed en wat kan beter: twee rustige vlakken. */
.schelle-tijdlijn__goed,
.schelle-tijdlijn__beter {
	margin: 0.5rem 0 0;
	padding: 0.7rem 1rem;
	border-radius: var(--wp--custom--straal-klein);
	background: var(--wp--preset--color--papier-diep);
	font-size: var(--wp--preset--font-size--klein);
	line-height: 1.5;
}

.schelle-tijdlijn__goed {
	background: var(--wp--preset--color--gloed-waas);
}

/* --- Cijfers van de proefochtenden -----------------------------------

   Losse getallen op tegels: dat leest sneller dan een lijst, en de
   uitkomst krijgt het accent — dat is waar iedereen naar zoekt. */

.schelle-cijfers__lijst {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
	gap: var(--wp--preset--spacing--20);
	margin-block: var(--wp--preset--spacing--40);
}

.schelle-cijfers__cijfer {
	padding: 1rem 1.15rem 1.15rem;
	background: var(--wp--preset--color--wit);
	border: 1px solid var(--wp--preset--color--lijn);
	border-radius: var(--wp--custom--straal-klein);
}

.schelle-cijfers__cijfer dt {
	margin: 0 0 0.5rem;
}

.schelle-cijfers__cijfer dd {
	margin: 0;
	font-family: var(--wp--preset--font-family--kop);
	font-size: var(--wp--preset--font-size--xgroot);
	font-weight: 700;
	line-height: 0.95;
	letter-spacing: -0.04em;
	font-variant-numeric: tabular-nums;
}

.schelle-cijfers__cijfer--saldo {
	background: var(--wp--preset--color--gloed);
	border-color: var(--wp--preset--color--gloed);
	color: var(--wp--custom--tekst-op-gloed);
}

.schelle-cijfers__cijfer--saldo dt {
	color: var(--wp--custom--tekst-op-gloed);
}

.schelle-cijfers__inleiding,
.schelle-cijfers__uitleg {
	color: var(--wp--preset--color--inkt-zacht);
	font-size: var(--wp--preset--font-size--klein);
}

.schelle-cijfers__subkop {
	font-size: var(--wp--preset--font-size--groot);
}

/* "Later aangepast": een correctie op een eerder gepubliceerd cijfer.
   Klein, maar hij blijft staan — dat is de afspraak over openheid. */
.schelle-cijfers__correcties {
	margin-top: var(--wp--preset--spacing--40);
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--lijn);
	font-size: var(--wp--preset--font-size--klein);
	color: var(--wp--preset--color--inkt-zacht);
}

.schelle-formulier__uitleg {
	max-width: 46ch;
	color: var(--wp--preset--color--inkt-zacht);
	font-size: var(--wp--preset--font-size--klein);
}

/* --- Tabellen mogen schuiven op een smal scherm ----------------------

   Zonder deze regels schuift de tabel met de proefdagcijfers op een
   telefoon de hele pagina opzij, en dat is precies wat "mobiel eerst"
   verbiedt. */

.wp-block-table,
.schelle-cijfers__tabelwikkel {
	overflow-x: auto;
	max-width: 100%;
	background: var(--wp--preset--color--wit);
	border: 1px solid var(--wp--preset--color--lijn);
	border-radius: var(--wp--custom--straal-klein);
}

/* Onder deze breedte schuift de tabel in plaats van de hele pagina. */
.wp-block-table table,
.schelle-tabel,
.schelle-cijfers__tabel {
	width: 100%;
	min-width: 28rem;
	border-collapse: collapse;
}

.wp-block-table :is(th, td),
.schelle-tabel :is(th, td),
.schelle-cijfers__tabel :is(th, td) {
	padding: 0.7rem 0.95rem;
	border-bottom: 1px solid var(--wp--preset--color--lijn);
	text-align: left;
	vertical-align: top;
}

.wp-block-table th,
.schelle-tabel th,
.schelle-cijfers__tabel th {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--schelle-label-maat);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--inkt-zacht);
}

.wp-block-table tr:last-child :is(th, td),
.schelle-tabel tr:last-child :is(th, td),
.schelle-cijfers__tabel tr:last-child :is(th, td) {
	border-bottom: 0;
}

/* Getallen op vaste breedte: de proefdagcijfers lezen sneller. */
.schelle-tabel td,
.schelle-cijfers__tabel td {
	font-variant-numeric: tabular-nums;
}

/* --- Gegevens van een initiatief of een draaiboek ---------------------

   Op een telefoon onder elkaar, op een breder scherm twee kolommen: de
   naam van het gegeven links, het gegeven zelf rechts. */

.schelle-gegevens {
	margin-block: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--wit);
	border: 1px solid var(--wp--preset--color--lijn);
	border-radius: var(--wp--custom--straal);
}

.schelle-gegevens__lijst {
	display: grid;
	gap: 0.35rem 1.5rem;
	margin: 0;
}

@media (min-width: 40em) {
	.schelle-gegevens__lijst {
		grid-template-columns: minmax(8em, 14em) 1fr;
		align-items: baseline;
	}
}

.schelle-gegevens__naam {
	margin: 0;
	padding-top: 0.35em;
}

.schelle-gegevens__waarde {
	margin: 0 0 0.6rem;
}

@media (min-width: 40em) {
	.schelle-gegevens__waarde {
		margin-bottom: 0.35rem;
	}
}

.schelle-gegevens__waarde p {
	margin: 0 0 0.5em;
}

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

.schelle-gegevens__bijlagen {
	margin: 0;
	padding-left: 1.2em;
}

.schelle-gegevens__bijlagen li {
	margin-bottom: 0.3em;
}

.schelle-gegevens__bijlagen span {
	color: var(--wp--preset--color--inkt-zacht);
	font-size: var(--wp--preset--font-size--klein);
}

/* Voor het laatst nagelopen: klein, maar wel zichtbaar. Dit is hoe een
   bezoeker ziet of de informatie nog klopt (3.1). */
.schelle-gegevens__nagelopen {
	margin: 1rem 0 0;
	padding-top: 0.7rem;
	border-top: 1px solid var(--wp--preset--color--lijn);
}

/* --- Contactformulier -------------------------------------------------

   De klassen komen uit inc/formulier.php. Zonder deze regels staan label
   en invoerveld achter elkaar op één regel, en dat loopt op een telefoon
   mis. */

.schelle-formulier__veld {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin-bottom: 1.2rem;
}

.schelle-formulier__veld label {
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 600;
	letter-spacing: -0.015em;
}

.schelle-formulier__veld :is(input, select, textarea) {
	width: 100%;
	padding: 0.7rem 0.85rem;
	font: inherit;
	background: var(--wp--preset--color--wit);
	border: 1px solid var(--wp--preset--color--lijn);
	border-radius: var(--wp--custom--straal-klein);
	color: var(--wp--preset--color--inkt);
}

.schelle-formulier__veld :is(input, select, textarea):focus-visible {
	outline: 3px solid var(--wp--preset--color--gloed-diep);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--gloed-diep);
}

.schelle-formulier__veld textarea {
	min-height: 9em;
}

.schelle-formulier__hint {
	color: var(--wp--preset--color--inkt-zacht);
	font-size: var(--wp--preset--font-size--klein);
	font-weight: 400;
}

.schelle-formulier__akkoord label {
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
	font-family: var(--wp--preset--font-family--tekst);
	font-weight: 400;
}

.schelle-formulier__akkoord input {
	width: auto;
	flex: 0 0 auto;
	margin-top: 0.25rem;
}

/* Een fout is nooit alleen kleur: er staat wat er mis is, in vette
   letters, in een kader dat opvalt. */
.schelle-formulier__fout {
	margin-bottom: 1.2rem;
	padding: 0.9rem 1.1rem;
	background: var(--wp--preset--color--wit);
	border: 2px solid var(--wp--preset--color--dicht);
	border-radius: var(--wp--custom--straal-klein);
	color: var(--wp--preset--color--inkt);
	font-weight: 700;
}

.schelle-formulier__knop {
	margin-top: 0.6rem;
}

/* --- Zoeken en bladeren ----------------------------------------------- */

.schelle-zoek {
	margin-top: var(--wp--preset--spacing--50);
	max-width: 32rem;
}

.wp-block-search__input {
	padding: 0.7rem 1rem;
	background: var(--wp--preset--color--wit);
	border: 1px solid var(--wp--preset--color--lijn);
	border-radius: var(--wp--custom--pil);
	color: var(--wp--preset--color--inkt);
	font: inherit;
}

.wp-block-search__button {
	border-radius: var(--wp--custom--pil);
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 600;
}

.schelle-bladeren.schelle-bladeren {
	margin-block-start: var(--wp--preset--spacing--60);
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--lijn);
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 600;
}

.schelle-bladeren a {
	text-decoration: none;
}

.schelle-bladeren .page-numbers.current {
	color: var(--wp--preset--color--gloed-diep);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* --- Voettekst --------------------------------------------------------

   Eerst de sitenaam als groot woordmerk met een lijn eronder, dan de
   kolommen, en onderaan twee labeltjes. */

.schelle-voet {
	padding-block: var(--wp--custom--lucht) var(--wp--preset--spacing--60);
}

.schelle-voet__merk.schelle-voet__merk {
	margin: 0 0 44px;
	padding-bottom: 0.12em;
	border-bottom: 1px solid var(--wp--preset--color--lijn);
	font-family: var(--wp--preset--font-family--kop);
	font-size: clamp(3rem, 13vw, 10.5rem);
	font-weight: 700;
	line-height: 0.82;
	letter-spacing: -0.055em;
}

.schelle-voet__merk a {
	color: var(--wp--preset--color--inkt);
	text-decoration: none;
}

.schelle-voet__merk a:hover {
	color: var(--wp--preset--color--inkt);
	text-decoration: none;
}

.schelle-voet__rij.schelle-voet__rij {
	gap: 40px;
	margin-bottom: 0;
}

.schelle-voet__kop.schelle-voet__kop {
	margin: 0 0 16px;
	/* De maat komt van .schelle-label die er in het sjabloon bij staat;
	   hier alleen de marges, want een kop krijgt er standaard veel. */
}

.schelle-voet__mail.schelle-voet__mail {
	margin: 0;
	font-family: var(--wp--preset--font-family--kop);
	font-size: var(--wp--preset--font-size--normaal);
	font-weight: 600;
	letter-spacing: -0.02em;
}

.schelle-voet__mail a {
	padding-bottom: 2px;
	border-bottom: 2px solid var(--wp--preset--color--gloed);
	text-decoration: none;
}

.schelle-voet__mail a:hover {
	text-decoration: none;
}

.schelle-voet__klein.schelle-voet__klein {
	margin: 16px 0 0;
	max-width: 34ch;
	font-size: var(--wp--preset--font-size--klein);
	line-height: 1.5;
	color: var(--wp--preset--color--inkt-zacht);
}

.schelle-voet__links.schelle-voet__links {
	margin-top: 16px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--schelle-label-maat);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.6;
}

.schelle-voet__links a {
	color: var(--wp--preset--color--gloed-diep);
	text-decoration: none;
	border-bottom: 1px solid var(--wp--preset--color--lijn);
}

.schelle-voet__links a:hover {
	border-bottom-color: var(--wp--preset--color--gloed);
	text-decoration: none;
}

.schelle-voet__slot.schelle-voet__slot {
	gap: 16px;
	margin-top: 52px;
	padding-top: 22px;
	border-top: 1px solid var(--wp--preset--color--lijn);
}

.schelle-voet__eigen {
	margin-top: var(--wp--preset--spacing--50);
	max-width: 46ch;
	font-size: var(--wp--preset--font-size--klein);
	color: var(--wp--preset--color--inkt-zacht);
}

/* --- Rustig binnenkomen -----------------------------------------------

   De onderdelen van de hero en het bord komen zachtjes omhoog, kort na
   elkaar. Het blok geeft elk onderdeel een nummer mee in --schelle-i;
   dat nummer is de vertraging. Geen JavaScript. */

.schelle-komt {
	opacity: 0;
	transform: translateY(16px);
	animation: schelle-opkomen 0.8s cubic-bezier(0.2, 0.75, 0.2, 1) forwards;
	animation-delay: calc(var(--schelle-i, 0) * 70ms);
}

@keyframes schelle-opkomen {
	to {
		opacity: 1;
		transform: none;
	}
}

/* --- Bewegingsvoorkeur ------------------------------------------------

   Wie in zijn systeem "minder beweging" heeft ingesteld, krijgt geen
   beweging. Let op de eerste regel hieronder: zonder die regel zou het
   opkomen worden uitgezet terwijl de onderdelen nog onzichtbaar zijn,
   en dan is de halve voorpagina weg. */

@media (prefers-reduced-motion: reduce) {
	.schelle-komt {
		opacity: 1;
		transform: none;
		animation: none;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.schelle-kaart:hover,
	a.schelle-tegel:hover,
	.wp-block-button__link.wp-element-button:hover {
		transform: none;
	}

	.schelle-kaart:hover .schelle-kaart__beeld img,
	a.schelle-tegel:hover .schelle-tegel__foto {
		transform: none;
	}
}