/*
Theme Name: Vicheler Dorfkirche
Theme URI: https://github.com/fredofromvichel/wp-tpl_vereinsseite
Author: Förderverein Vicheler Dorfkirche e.V.
Description: Redaktionelles Block-Theme für Vereinsseiten im Stil „Classical“: Cormorant Garamond über Lora, Haarlinien statt Flächen, Fotos im Passepartout. Bringt zwei Startseiten-Fassungen mit — Programm zuerst und zweispaltig — sowie dynamische Bänder für Veranstaltungen, Sanierungsstand, Vereinsbeiträge und Anfahrt. Schriften werden selbst gehostet, es wird nichts von Google nachgeladen.
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vdk-classical
Tags: blog, one-column, custom-colors, custom-menu, editor-style, block-patterns, full-site-editing, translation-ready
*/

/* ══════════════════════════════════════════════════════════════════════════
   1 · Variablen

   Der Variablensatz steht in inc/tokens.php und wird als eingebettetes CSS
   ausgeliefert — sonst würde add_editor_style() den :root-Selektor im Editor
   unbrauchbar machen. Hier stehen nur Regeln, die Selektoren betreffen.
   ══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   2 · Grundlagen
   ══════════════════════════════════════════════════════════════════════════ */

body {
	text-wrap: pretty;
	-webkit-font-smoothing: antialiased;
}

/* Kein Bild darf breiter werden als seine Spalte. Das betrifft auch Bilder,
   die aus Plugins kommen und nicht in einem Bildblock stecken — ohne die
   Regel schiebt ein Foto in Originalgröße die ganze Seite zur Seite. */
img,
svg,
video,
iframe {
	max-width: 100%;
}

img,
video {
	height: auto;
}

/* Zahlen setzen tabellarisch, wo sie als Ziffern oder in Spalten stehen —
   laufender Text behält seine Mediävalziffern. */
.vdk-tnum,
.vdk-kicker,
.vdk-termin-tag,
.vdk-zahl,
.vdk-konto,
table {
	font-feature-settings: "tnum" 1;
}

:focus {
	outline: none;
}

:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

::selection {
	background: color-mix(in srgb, var(--color-accent) 30%, transparent);
}

/* Nur für die Sprachausgabe — sichtbar ausgeblendet, aber vorlesbar. */
.vdk-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	border: 0;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Sprungmarke für die Tastaturbedienung. */
.vdk-skip-link {
	position: absolute;
	left: -9999px;
	z-index: 999;
	padding: var(--space-2) var(--space-3);
	background: var(--color-surface);
	color: var(--color-accent-700);
	font-size: 14px;
}

.vdk-skip-link:focus {
	left: var(--rand);
	top: var(--space-2);
}

/* Fotografien sitzen im Passepartout wie eingeklebte Tafeln. */
.vdk-plate,
.is-style-vdk-plate,
.is-style-vdk-plate img {
	box-sizing: border-box;
}

.vdk-plate,
.is-style-vdk-plate {
	margin: 0;
	border: 6px solid var(--color-surface);
	outline: 1px solid var(--color-divider);
	filter: sepia(0.22) saturate(0.82) contrast(1.05);
}

.vdk-plate img,
.is-style-vdk-plate img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

/* Fehlt das Bild noch, bleibt ein ruhiges Feld statt eines gebrochenen Bildes. */
.vdk-plate--leer {
	display: grid;
	place-items: center;
	padding: var(--space-4);
	background: var(--color-surface);
	color: var(--text-65);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-align: center;
	text-transform: uppercase;
	filter: none;
}

.vdk-hr {
	height: 1px;
	margin: 0;
	border: 0;
	background: var(--color-divider);
}

/* ══════════════════════════════════════════════════════════════════════════
   3 · Wiederkehrende Bausteine

   Bewusst eigene Klassen statt der Kernblock-Klassen: die Blocks in blocks/
   rendern serverseitig, und so gerät ihr Aussehen nicht in einen
   Spezifitätsstreit mit den Angaben aus theme.json.
   ══════════════════════════════════════════════════════════════════════════ */

/* — Kicker: die kleine goldene Zeile über einem Titel — */
.vdk-kicker {
	display: block;
	margin: 0 0 var(--space-3);
	color: var(--color-accent-700);
	font-size: 13px;
	letter-spacing: 0.08em;
	line-height: 14px;
	text-transform: uppercase;
}

/* Dieselbe Anmutung für eine Zeile aus mehreren Kernblöcken (Datum ·
   Kategorie). Ohne display-Angabe, damit sie dem Flex-Layout des
   Gruppenblocks nicht in die Quere kommt. */
.vdk-kicker-reihe {
	color: var(--color-accent-700);
	font-feature-settings: "tnum" 1;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.vdk-kicker-reihe a {
	color: inherit;
	text-decoration: none;
}

.vdk-kicker-reihe a:hover,
.vdk-kicker-reihe a:focus-visible {
	color: var(--color-accent-600);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* — Abschnittskopf: Titel links, Weiterleitung rechts — */
.vdk-kopf {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 24px;
	margin: 0 0 26px;
}

.vdk-kopf h2,
.vdk-kopf .vdk-kopf-titel {
	margin: 0;
	font-family: var(--font-heading);
	font-size: clamp(26px, 3.4vw, 34px);
	font-weight: 400;
	line-height: 1.24;
}

.vdk-mehr {
	color: var(--color-accent-700);
	font-size: 13px;
	letter-spacing: 0.08em;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
}

.vdk-mehr:hover,
.vdk-mehr:focus-visible {
	color: var(--color-accent-600);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* — Weiterlesen: Link mit goldener Grundlinie — */
.vdk-weiter {
	display: inline-block;
	border-bottom: 1px solid var(--color-accent-300);
	color: var(--color-accent-700);
	font-size: 13px;
	text-decoration: none;
}

.vdk-weiter:hover,
.vdk-weiter:focus-visible {
	border-bottom-color: var(--color-accent);
	color: var(--color-accent-600);
}

/* — Marken — */
.vdk-tag {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: 3px;
	font-size: 11px;
	letter-spacing: 0.02em;
}

.vdk-tag--accent {
	background: var(--color-accent-100);
	color: var(--color-accent-800);
}

.vdk-tag--outline {
	border: 1px solid var(--color-accent);
	color: var(--color-accent-700);
}

/* — Schaltflächen: Kontur, niemals Fläche.
     Die Werte spiegeln elements.button in theme.json, damit Kernblock-Buttons
     und die Buttons in den eigenen Blocks gleich aussehen. — */
.vdk-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 36px;
	padding: var(--space-2) 16.5px;
	border: 1px solid transparent;
	border-radius: var(--radius-md);
	background: transparent;
	/* Die Beschriftung steht in 14 px und zählt damit nicht als „große
	   Schrift“ — das helle Gold käme nur auf 3,0:1. Die Lesefarbe erreicht
	   6,0:1. Die Kontur darf beim hellen Gold bleiben: für grafische
	   Elemente verlangt AA nur 3:1. */
	color: var(--color-accent-700);
	cursor: pointer;
	font-family: var(--font-heading);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
}

.vdk-btn--primary {
	border-color: var(--color-accent);
}

.vdk-btn--primary:hover {
	background: color-mix(in srgb, var(--color-accent) 12%, transparent);
	border-color: var(--color-accent-600);
	color: var(--color-accent-800);
}

.vdk-btn--primary:active {
	background: color-mix(in srgb, var(--color-accent) 22%, transparent);
}

.vdk-btn--ghost {
	padding-inline: var(--space-1);
}

.vdk-btn--ghost:hover {
	background: color-mix(in srgb, var(--color-accent) 10%, transparent);
	color: var(--color-accent-800);
}

.vdk-btn--ghost:active {
	background: color-mix(in srgb, var(--color-accent) 18%, transparent);
}

.vdk-btn[disabled] {
	cursor: not-allowed;
	opacity: 0.45;
}

.vdk-btn-reihe {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	align-items: center;
}

/* — Eingabefeld — */
.vdk-input {
	width: 100%;
	min-height: 36px;
	padding: 6px 10px;
	border: 1px solid var(--color-divider);
	border-radius: var(--radius-md);
	background: transparent;
	caret-color: var(--color-accent);
	color: var(--color-text);
	font: inherit;
	font-size: 14px;
}

.vdk-input:hover {
	border-color: color-mix(in srgb, var(--color-text) 45%, transparent);
}

.vdk-input:focus-visible {
	border-color: var(--color-accent);
	outline-offset: 0;
}

/* — Zweispaltiges Band mit Haarlinie in der Mitte — */
.vdk-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
	gap: 0 var(--split-gap);
}

.vdk-split-linie {
	background: var(--color-divider);
}

/* — Haarlinie zwischen zwei Kernspalten.
     Der Kernblock „Spalten“ bricht bei 781 Pixeln um; die Linie wandert an
     derselben Stelle von der Seite an die Oberkante. — */
@media (min-width: 782px) {
	/* Beide Spalten geben zur Linie hin denselben Abstand ab — so bleiben sie
	   gleich breit, wie im Entwurf, wo die Linie eine eigene 1-Pixel-Spalte war. */
	.vdk-spalten-linie > .wp-block-column:not(:last-child) {
		padding-right: var(--split-gap);
	}

	.vdk-spalten-linie > .wp-block-column + .wp-block-column {
		padding-left: var(--split-gap);
		border-left: 1px solid var(--color-divider);
	}
}

@media (max-width: 781px) {
	.vdk-spalten-linie > .wp-block-column + .wp-block-column {
		padding-top: 32px;
		border-top: 1px solid var(--color-divider);
	}
}

/* — Hinweis, wenn eine Abfrage nichts findet — */
.vdk-leer {
	margin: 0;
	padding: var(--space-4) 0;
	border-top: 1px solid var(--color-divider);
	color: var(--text-65);
	font-size: 14.5px;
	line-height: 26px;
}

/* Als Vorlauf über einer Liste — dort trennt schon die Liste selbst, eine
   zweite Linie wäre eine Linie zu viel. */
.vdk-leer--vorlauf {
	padding-top: var(--space-2);
	border-top: 0;
}

/* — Redaktionshinweis: nur für angemeldete Redakteure, deshalb bewusst als
     Notiz gezeichnet und nicht als Bestandteil der Seite. — */
.vdk-redaktionshinweis {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	align-items: baseline;
	margin: 0;
	padding: var(--space-3) var(--space-4);
	border-left: 3px solid var(--color-accent-600);
	background: var(--color-accent-100);
	color: var(--color-text);
	font-size: 14px;
	line-height: 24px;
}

.vdk-redaktionshinweis > span {
	color: var(--color-accent-800);
	font-family: var(--font-heading);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* — Fortschrittsbalken: Rinne mit goldener Füllung.
     Die Rinne zeigt, worauf sich der Anteil bezieht, ist also nicht Zierde,
     sondern Information — sie braucht 3:1. Das helle Gold der ersten Fassung
     kam auf 1,3:1 und war auf dem Grund praktisch nicht zu sehen. — */
.vdk-balken {
	height: 6px;
	margin: 16px 0 10px;
	border: 1px solid var(--color-accent-600);
	background: var(--color-accent-100);
}

.vdk-balken > span {
	display: block;
	height: 100%;
	background: var(--color-accent);
}

.vdk-zahl {
	display: flex;
	align-items: baseline;
	gap: 8px;
}

.vdk-zahl b {
	color: var(--color-accent);
	font-family: var(--font-heading);
	font-size: 44px;
	font-weight: 400;
	line-height: 50px;
}

.vdk-zahl span {
	color: var(--text-68);
	font-family: var(--font-heading);
	font-size: 24px;
	line-height: 1.2;
}

.vdk-zeile {
	margin: 0;
	color: var(--text-70);
	font-size: 13px;
	line-height: 20px;
}

/* ══════════════════════════════════════════════════════════════════════════
   4 · Block: Veranstaltungen  (vdk/termine)
   ══════════════════════════════════════════════════════════════════════════ */

.vdk-termine-raster {
	display: grid;
	grid-template-columns: repeat(var(--spalten, 3), minmax(0, 1fr));
	gap: 24px;
}

.vdk-termin-karte {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding: var(--space-3);
	border: 1px solid var(--color-divider);
	border-radius: var(--radius-md);
}

/* Das Vorschaubild nimmt ein Drittel der Karte — 1fr zu 2fr ist genau die
   Drittelung, die im Entwurf gefordert war. */
.vdk-termin-karte-innen {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	gap: 18px;
	align-items: start;
}

.vdk-termin-karte-innen--rechts {
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}

.vdk-termin-karte-innen--rechts .vdk-termin-bild {
	order: 2;
}

.vdk-termin-karte-innen--ohnebild {
	display: block;
}

.vdk-termin-bild {
	aspect-ratio: 3 / 4;
}

.vdk-termin-karte .vdk-kicker {
	margin: 0 0 var(--space-2);
	color: var(--color-accent-700);
	font-size: 10px;
	letter-spacing: 0.1em;
	line-height: 1.4;
}

.vdk-termin-titel {
	margin: 0;
	font-family: var(--font-heading);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.2;
}

.vdk-termin-titel a {
	color: inherit;
	text-decoration: none;
}

.vdk-termin-titel a:hover,
.vdk-termin-titel a:focus-visible {
	color: var(--color-accent-700);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.vdk-termin-text {
	flex: 1;
	margin: var(--space-2) 0 0;
	font-size: 13px;
	opacity: 0.8;
}

.vdk-termin-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: var(--space-2) 0 0;
	color: var(--text-65);
	font-size: 11px;
}

/* — Listenfassung (zweispaltige Startseite) — */
.vdk-termine-liste {
	border-top: 1px solid var(--color-divider);
}

.vdk-termin-reihe {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr);
	gap: 18px;
	padding: 18px 0;
	border-bottom: 1px solid var(--color-divider);
}

.vdk-termin-tag {
	text-align: right;
}

.vdk-termin-tag b {
	display: block;
	font-family: var(--font-heading);
	font-size: 30px;
	font-weight: 400;
	line-height: 32px;
}

.vdk-termin-tag span {
	display: block;
	margin-top: 2px;
	color: var(--text-65);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.vdk-termin-reihe .vdk-termin-titel {
	font-size: 22px;
	font-weight: 400;
	line-height: 28px;
}

.vdk-termin-reihe .vdk-termin-text {
	margin: 6px 0 0;
	color: var(--text-72);
	font-size: 14px;
	line-height: 24px;
	opacity: 1;
}

/* ══════════════════════════════════════════════════════════════════════════
   5 · Block: Sanierungsstand  (vdk/sanierungsstand)
   ══════════════════════════════════════════════════════════════════════════ */

/* — Bandfassung: Text links, Zahl und Balken rechts — */
.vdk-sanierung-band {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 48px;
	align-items: center;
	padding: 36px 40px;
	border: 1px solid var(--color-divider);
	border-radius: var(--radius-md);
}

.vdk-sanierung-text {
	max-width: 56ch;
	margin: 0;
	color: var(--text-78);
	font-size: 15.5px;
	hyphens: auto;
	line-height: 28px;
	text-align: justify;
}

/* — Spaltenfassung: große Zahl, Balken, Chronik-Auszug — */
.vdk-sanierung-spalte .vdk-zahl {
	margin-bottom: 16px;
	gap: 10px;
}

.vdk-sanierung-spalte .vdk-zahl b {
	font-size: 52px;
	line-height: 58px;
}

.vdk-sanierung-spalte .vdk-zahl span {
	color: var(--text-68);
	font-size: 22px;
}

.vdk-sanierung-spalte .vdk-balken {
	margin: 0 0 12px;
}

.vdk-sanierung-spalte .vdk-zeile {
	margin-bottom: 24px;
}

.vdk-updates {
	border-top: 1px solid var(--color-divider);
}

.vdk-update {
	padding: 16px 0;
	border-bottom: 1px solid var(--color-divider);
}

.vdk-update-titel {
	margin: 0;
	font-family: var(--font-heading);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.25;
}

.vdk-update-titel a {
	color: inherit;
	text-decoration: none;
}

.vdk-update-titel a:hover,
.vdk-update-titel a:focus-visible {
	color: var(--color-accent-700);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.vdk-update-text {
	margin: 6px 0 0;
	color: var(--text-72);
	font-size: 14px;
	line-height: 24px;
}

.vdk-chronik-link {
	display: inline-block;
	margin-top: 20px;
	color: var(--color-accent-700);
	font-size: 13px;
	letter-spacing: 0.08em;
	text-decoration: none;
	text-transform: uppercase;
}

.vdk-chronik-link:hover,
.vdk-chronik-link:focus-visible {
	color: var(--color-accent-600);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ══════════════════════════════════════════════════════════════════════════
   6 · Block: Aus dem Verein  (vdk/vereinsbeitraege)
   ══════════════════════════════════════════════════════════════════════════ */

.vdk-beitraege-raster {
	display: grid;
	grid-template-columns: repeat(var(--spalten, 3), minmax(0, 1fr));
	gap: 0 var(--split-gap);
	border-top: 1px solid var(--color-divider);
}

.vdk-beitrag {
	padding: 22px 0 4px;
}

.vdk-beitrag-meta {
	margin: 0 0 10px;
	color: var(--text-68);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.vdk-beitrag-titel {
	margin: 0;
	font-family: var(--font-heading);
	font-size: 24px;
	font-weight: 400;
	line-height: 30px;
}

.vdk-beitrag-titel a {
	color: inherit;
	text-decoration: none;
}

.vdk-beitrag-titel a:hover,
.vdk-beitrag-titel a:focus-visible {
	color: var(--color-accent-700);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.vdk-beitrag-text {
	margin: 10px 0 0;
	color: var(--text-76);
	font-size: 15px;
	hyphens: auto;
	line-height: 26px;
	text-align: justify;
}

/* Vorschaubild im Beitragsraster: höchstens ein Drittel, links oder rechts. */
.vdk-beitrag--mitbild {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	gap: 18px;
	align-items: start;
}

.vdk-beitrag--mitbild.vdk-beitrag--bildrechts {
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}

.vdk-beitrag--mitbild.vdk-beitrag--bildrechts .vdk-beitrag-bild {
	order: 2;
}

.vdk-beitrag-bild {
	aspect-ratio: 3 / 4;
}

/* — Listenfassung — */
.vdk-beitraege-liste {
	border-top: 1px solid var(--color-divider);
}

.vdk-beitrag-reihe {
	display: grid;
	grid-template-columns: 190px minmax(0, 1fr) 120px;
	gap: 28px;
	align-items: baseline;
	padding: 18px 0;
	border-bottom: 1px solid var(--color-divider);
}

.vdk-beitrag-reihe .vdk-beitrag-meta {
	margin: 0;
}

.vdk-beitrag-reihe .vdk-beitrag-titel {
	font-size: 22px;
	line-height: 28px;
}

.vdk-beitrag-reihe .vdk-beitrag-text {
	margin: 8px 0 0;
	color: var(--text-74);
	font-size: 14.5px;
	line-height: 26px;
}

.vdk-beitrag-reihe .vdk-weiter {
	justify-self: end;
}

.vdk-beitrag-reihe--mitbild {
	grid-template-columns: 190px minmax(0, 1fr) 120px;
}

.vdk-beitrag-reihe .vdk-beitrag-bild {
	aspect-ratio: 4 / 3;
	max-width: 170px;
}

/* ══════════════════════════════════════════════════════════════════════════
   7 · Block: Anfahrt und Spenden  (vdk/anfahrt-spenden)
   ══════════════════════════════════════════════════════════════════════════ */

.vdk-anfahrt h2,
.vdk-spenden h2 {
	margin: 0 0 10px;
	font-family: var(--font-heading);
	font-size: 28px;
	font-weight: 400;
	line-height: 34px;
}

.vdk-anfahrt .vdk-kicker,
.vdk-spenden .vdk-kicker {
	margin: 0 0 16px;
}

.vdk-anfahrt p,
.vdk-spenden p {
	max-width: 46ch;
	color: var(--text-76);
	font-size: 14.5px;
	line-height: 26px;
}

.vdk-anfahrt-hinweis {
	margin: 0 0 18px;
}

.vdk-spenden-hinweis {
	margin: 0 0 20px;
}

.vdk-route {
	display: flex;
	gap: var(--space-3);
	align-items: stretch;
	max-width: 440px;
	margin: 0 0 16px;
}

.vdk-route .vdk-input {
	flex: 1;
}

/* Kartenbild und Platzhalter halten dieselbe Höhe, damit sich das Band beim
   Nachtragen des Bildes nicht verschiebt. */
.vdk-karte {
	display: block;
	margin: 0;
	border: 1px solid var(--color-divider);
}

/* Ein Kartenausschnitt ist querformatig. Die Deckelung sorgt dafür, dass ein
   versehentlich hochformatiges Bild das Band nicht in die Länge zieht. */
.vdk-karte img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 260px;
	object-fit: cover;
	object-position: center;
}

.vdk-karte figcaption {
	padding: 6px 10px;
	border-top: 1px solid var(--color-divider);
	color: var(--text-65);
	font-size: 11px;
	line-height: 18px;
}

.vdk-karte-link {
	display: inline-block;
	margin-top: 10px;
	color: var(--color-accent-700);
	font-size: 13px;
}

.vdk-konto {
	border-top: 1px solid var(--color-divider);
}

.vdk-konto-reihe {
	display: grid;
	grid-template-columns: 130px minmax(0, 1fr);
	gap: 16px;
	padding: 12px 0;
	border-bottom: 1px solid var(--color-divider);
	font-size: 14px;
}

.vdk-konto-reihe dt {
	margin: 0;
	color: var(--text-68);
}

.vdk-konto-reihe dd {
	margin: 0;
	overflow-wrap: anywhere;
}

.vdk-spenden .vdk-btn-reihe {
	margin-top: 20px;
}

/* Bestätigung nach dem Kopieren der IBAN — ohne Layoutsprung. */
.vdk-kopiert {
	color: var(--color-accent-700);
	font-size: 13px;
}

/* ══════════════════════════════════════════════════════════════════════════
   8 · Kopf- und Fußbereich
   ══════════════════════════════════════════════════════════════════════════ */

/* Der Kopfbereich richtet sich am Satzspiegel aus, nicht am Rand des
   Browserfensters — der Markenname steht damit über dem Seitentitel. */
.vdk-header {
	border-bottom: 1px solid var(--color-divider);
}

.vdk-header .wp-block-site-title a {
	color: var(--color-text);
	text-decoration: none;
}

.vdk-header .wp-block-site-title a:hover {
	color: var(--color-accent-700);
}

.vdk-header .wp-block-navigation a {
	color: var(--color-text);
	text-decoration: none;
}

.vdk-header .wp-block-navigation a:hover,
.vdk-header .wp-block-navigation .current-menu-item > a {
	color: var(--color-accent-700);
}

.vdk-footer {
	border-top: 1px solid var(--color-divider);
	color: var(--text-70);
	font-size: 13px;
	line-height: 24px;
}

.vdk-footer .wp-block-navigation a,
.vdk-footer a {
	border-bottom: 1px solid var(--color-accent-300);
	color: var(--color-accent-700);
	font-size: 13px;
	text-decoration: none;
}

.vdk-footer .wp-block-navigation a:hover,
.vdk-footer a:hover {
	border-bottom-color: var(--color-accent);
	color: var(--color-accent-600);
}

.vdk-copyright {
	color: var(--text-65);
	font-size: 12px;
}

.vdk-copyright a {
	border: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   9 · Textkörper redaktioneller Seiten

   Justierter Satz an einem angenehmen Maß, Haarlinien tragen die Struktur.
   ══════════════════════════════════════════════════════════════════════════ */

.is-style-vdk-prosa > p,
.vdk-prosa > p {
	max-width: var(--wp--custom--measure--text, 64ch);
	hyphens: auto;
	text-align: justify;
}

.is-style-vdk-prosa > ul,
.vdk-prosa > ul,
.is-style-vdk-prosa > ol,
.vdk-prosa > ol {
	max-width: var(--wp--custom--measure--text, 64ch);
}

.is-style-vdk-prosa figure,
.vdk-prosa figure,
.is-style-vdk-prosa .wp-block-image,
.vdk-prosa .wp-block-image {
	margin-block: var(--space-6);
}

/* Ein Bild im Textfluss bleibt am Satzmaß. Breiter wird es nur, wenn die
   Redaktion es ausdrücklich weit oder vollbreit stellt — sonst füllte ein
   hochformatiges Foto den halben Bildschirm. */
.is-style-vdk-prosa > figure:not([class*="align"]),
.vdk-prosa > figure:not([class*="align"]),
.is-style-vdk-prosa > .wp-block-image:not([class*="align"]),
.vdk-prosa > .wp-block-image:not([class*="align"]) {
	max-width: var(--wp--custom--measure--text, 64ch);
}

.is-style-vdk-prosa blockquote,
.vdk-prosa blockquote {
	max-width: 34ch;
	margin: var(--space-8) 0;
	padding: 0;
	border: 0;
	font-family: var(--font-heading);
	font-size: clamp(24px, 3.4vw, 34px);
	line-height: 1.24;
	text-indent: -0.34em;
}

.is-style-vdk-prosa table,
.vdk-prosa table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.is-style-vdk-prosa th,
.vdk-prosa th {
	padding: var(--space-2);
	border-bottom: 1px solid var(--color-divider);
	color: var(--text-68);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-align: left;
	text-transform: uppercase;
}

.is-style-vdk-prosa td,
.vdk-prosa td {
	padding: var(--space-2);
	border-bottom: 1px solid var(--color-divider);
}

/* Der Zitatblock des Entwurfs: hängende Anführung, hängender Gedankenstrich.
   Die Blockvariante trägt ihre Klasse am blockquote selbst, nicht an einem
   Elternelement — daher der zusammengesetzte Selektor. */
blockquote.is-style-vdk-zitat,
.vdk-zitat blockquote {
	max-width: 34ch;
	margin: 0;
	padding: 0;
	border: 0;
	font-family: var(--font-heading);
	font-size: clamp(24px, 3.4vw, 34px);
	font-weight: 400;
	line-height: 1.24;
	text-indent: -0.34em;
}

blockquote.is-style-vdk-zitat > p {
	margin: 0;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
}

/* Die Quellenangabe steht im Grundschriftgrad und ohne Kursive — im Entwurf
   ist sie eine Bildunterschrift, kein Zitat. */
blockquote.is-style-vdk-zitat cite,
.vdk-zitat figcaption {
	display: block;
	margin: 28px 0 0;
	color: var(--text-70);
	font-family: var(--font-body);
	font-size: 15.5px;
	font-style: normal;
	line-height: 28px;
	text-indent: -1.104em;
}

/* Archivlisten der Fallback-Templates. */
.vdk-liste .wp-block-post {
	padding: 22px 0;
	border-bottom: 1px solid var(--color-divider);
}

.vdk-liste .wp-block-post-title {
	margin: 0 0 8px;
}

.vdk-liste .wp-block-post-excerpt__excerpt {
	max-width: 64ch;
	color: var(--text-76);
}

/* ══════════════════════════════════════════════════════════════════════════
   10 · Große Aufmacher

   Der Entwurf setzt die Versalhöhe an den Satzspiegel: der optische Überhang
   der Majuskel wird durch einen negativen Einzug ausgeglichen.
   ══════════════════════════════════════════════════════════════════════════ */

.vdk-hero-titel,
.vdk-titel-optisch {
	margin-left: -0.042em;
}

/* Der Aufmacher der Startseite „Programm zuerst“. */
.vdk-hero-titel {
	font-size: var(--wp--preset--font-size--hero, clamp(40px, 6.6vw, 76px));
	line-height: 1.08;
	letter-spacing: -0.01em;
}

/* Der Vorlauftext kommt aus dem Inhalt der Seite. */
.vdk-hero-intro p {
	max-width: 52ch;
	color: var(--text-82);
	font-size: 17px;
	hyphens: auto;
	line-height: 28px;
	text-align: justify;
}

.vdk-hero-intro p:last-child {
	margin-bottom: 0;
}

/* Der Aufmacher der zweispaltigen Startseite: Titel schmal, Text breit.

   Das „constrained“-Layout der Kernblöcke zentriert jedes Kind, dem eine
   Breite fehlt — und zwar mit !important. Ein Titel auf 24 Zeichen Maß würde
   dadurch mitten im Satzspiegel landen; der Entwurf setzt ihn flush links.
   Deshalb wird das Zentrieren hier mit derselben Gewichtung zurückgenommen. */
.vdk-intro-titel,
.vdk-seitentitel,
.vdk-vorlauf,
.vdk-beitrag-titel-gross,
blockquote.is-style-vdk-zitat {
	margin-left: 0 !important;
	margin-right: auto !important;
}

.vdk-intro-titel {
	max-width: 24ch;
	font-size: var(--wp--preset--font-size--display, clamp(34px, 5.4vw, 58px));
	line-height: 1.1;
	letter-spacing: -0.01em;
}

.vdk-intro-text p {
	max-width: 64ch;
	color: var(--text-82);
	font-size: 17px;
	hyphens: auto;
	line-height: 28px;
	text-align: justify;
}

/* Vollbreites Bild über dem Aufmacher der zweispaltigen Fassung. */
.vdk-bleed {
	margin: 0;
	border: 0;
	outline: 0;
}

.vdk-bleed img {
	width: 100%;
	height: clamp(200px, 31vw, 400px);
	object-fit: cover;
}

@media (max-width: 719px) {
	.vdk-hero-intro p,
	.vdk-intro-text p {
		font-size: 16px;
		line-height: 26px;
		text-align: left;
	}
}

@media (max-width: 599px) {
	/* Auf schmalen Schirmen ist jeder Pixel Rand wertvoller als der
	   optische Ausgleich. */
	.vdk-hero-titel,
	.vdk-titel-optisch {
		margin-left: 0;
	}
}

/* ══════════════════════════════════════════════════════════════════════════
   11 · Anpassung an kleinere Schirme

   Der Entwurf lag nur als 1280-Pixel-Fassung vor. Die Umbrüche halten die
   Leserichtung: erst werden die Spalten aufgelöst, dann die Raster.
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1023px) {
	/* Aus der Haarlinie in der Mitte wird eine Haarlinie zwischen den Zeilen. */
	.vdk-split {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.vdk-split-linie {
		height: 1px;
		margin: 32px 0;
	}

	.vdk-sanierung-band {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
		padding: 28px 24px;
	}

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

	.vdk-beitraege-raster {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0 32px;
	}

	.vdk-beitrag-reihe {
		grid-template-columns: 150px minmax(0, 1fr);
		gap: 20px;
	}

	.vdk-beitrag-reihe .vdk-weiter {
		grid-column: 2;
		justify-self: start;
	}
}

@media (max-width: 719px) {
	.vdk-termine-raster,
	.vdk-beitraege-raster {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Ohne Spaltenrand trägt die Haarlinie die Trennung zwischen den Beiträgen. */
	.vdk-beitraege-raster .vdk-beitrag + .vdk-beitrag,
	.vdk-beitraege-raster .vdk-beitrag--mitbild + .vdk-beitrag--mitbild {
		border-top: 1px solid var(--color-divider);
	}

	.vdk-beitrag-reihe {
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
	}

	.vdk-beitrag-reihe .vdk-weiter {
		grid-column: auto;
	}

	.vdk-kopf {
		flex-wrap: wrap;
		gap: 10px;
	}

	.vdk-route {
		flex-wrap: wrap;
	}

	.vdk-route .vdk-input {
		flex: 1 1 100%;
	}

	.vdk-konto-reihe {
		grid-template-columns: minmax(0, 1fr);
		gap: 2px;
	}

	.vdk-zahl b {
		font-size: 38px;
		line-height: 44px;
	}

	.vdk-zahl span {
		font-size: 20px;
	}

	.vdk-sanierung-spalte .vdk-zahl b {
		font-size: 42px;
		line-height: 48px;
	}

	.vdk-anfahrt h2,
	.vdk-spenden h2 {
		font-size: 24px;
		line-height: 30px;
	}

	/* Justierter Satz bricht in schmalen Spalten unschön auf — hier lieber
	   linksbündig als mit Löchern zwischen den Wörtern. */
	.vdk-sanierung-text,
	.vdk-beitrag-text,
	.is-style-vdk-prosa > p,
	.vdk-prosa > p {
		text-align: left;
	}
}

@media (max-width: 479px) {
	/* Bei dieser Breite bleibt neben einem Drittel-Bild kein lesbares Maß
	   übrig — das Bild setzt sich über den Text. */
	.vdk-termin-karte-innen,
	.vdk-beitrag--mitbild,
	.vdk-beitrag--mitbild.vdk-beitrag--bildrechts {
		grid-template-columns: minmax(0, 1fr);
	}

	.vdk-termin-karte-innen--rechts .vdk-termin-bild,
	.vdk-beitrag--mitbild.vdk-beitrag--bildrechts .vdk-beitrag-bild {
		order: 0;
	}

	.vdk-termin-bild,
	.vdk-beitrag-bild {
		aspect-ratio: 4 / 3;
		max-width: none;
	}

	.vdk-termin-reihe {
		grid-template-columns: 48px minmax(0, 1fr);
		gap: 14px;
	}

	.vdk-termin-tag b {
		font-size: 24px;
		line-height: 26px;
	}
}

/* ══════════════════════════════════════════════════════════════════════════
   12 · Bewegung und Druck
   ══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

@media print {
	.vdk-header .wp-block-navigation,
	.vdk-route,
	.vdk-btn,
	.vdk-redaktionshinweis {
		display: none !important;
	}

	.vdk-plate,
	.is-style-vdk-plate {
		filter: none;
	}
}

/* ══════════════════════════════════════════════════════════════════════════
   13 · Unterseiten (Entwürfe 3a bis 3d)
   ══════════════════════════════════════════════════════════════════════════ */

/* — Brotkrumen — */
.vdk-brotkrumen {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	color: var(--text-65);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.vdk-brotkrumen a {
	color: inherit;
	text-decoration: none;
}

.vdk-brotkrumen a:hover,
.vdk-brotkrumen a:focus-visible {
	color: var(--color-accent-700);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.vdk-brotkrumen-hier {
	color: var(--color-accent-700);
}

/* — Beitragsbild im Passepartout, mit Bildunterschrift — */
.vdk-beitragsbild {
	margin: 0;
}

.vdk-beitragsbild > .vdk-plate {
	display: block;
}

.vdk-beitragsbild figcaption {
	margin: 12px 0 0;
	padding: 0;
	border: 0;
	color: var(--text-65);
	font-size: 13px;
	line-height: 22px;
}

/* — Seitenkopf mit Vorlauftext (3a, 3c) — */
.vdk-seitenkopf {
	padding-bottom: var(--space-8);
	border-bottom: 1px solid var(--color-divider);
}

.vdk-seitentitel {
	max-width: 22ch;
	margin: 0 !important;
	font-size: clamp(36px, 5.6vw, 62px);
	line-height: 1.1;
	letter-spacing: -0.01em;
}

.vdk-vorlauf p,
p.vdk-vorlauf {
	max-width: 60ch;
	margin: 24px 0 0;
	color: color-mix(in srgb, var(--color-text) 80%, transparent);
	font-size: 18px;
	line-height: 30px;
}

/* Der Vorlauf in Fließtextgröße — für Stellen, an denen über ihm schon eine
   große Zeile steht. */
.vdk-vorlauf-schlicht p {
	max-width: var(--wp--custom--measure--text, 64ch);
	margin: 0 0 var(--space-4);
	color: var(--text-82);
	font-size: 17px;
	line-height: 28px;
}

/* — Zweispaltiger redaktioneller Satz (3a).
     Die Klasse sitzt am Inhaltsblock selbst, damit Absätze, Bilder und Zitate
     seine direkten Kinder sind: nur so lässt sich einzeln bestimmen, was in
     den Spalten läuft und was über die volle Breite ausbricht. Über einen
     Spaltenumbruch gerissene Bilder wären unbrauchbar. — */
.vdk-spalten-satz {
	columns: 2;
	column-gap: var(--split-gap);
	column-rule: 1px solid var(--color-divider);
	color: color-mix(in srgb, var(--color-text) 84%, transparent);
	font-size: 15.5px;
	hyphens: auto;
	line-height: 28px;
	text-align: justify;
}

.vdk-spalten-satz > p {
	max-width: none;
	margin: 0 0 20px;
}

.vdk-spalten-satz > figure,
.vdk-spalten-satz > .wp-block-image,
.vdk-spalten-satz > .wp-block-gallery,
.vdk-spalten-satz > .wp-block-quote,
.vdk-spalten-satz > blockquote,
.vdk-spalten-satz > .wp-block-pullquote,
.vdk-spalten-satz > .wp-block-table,
.vdk-spalten-satz > table,
.vdk-spalten-satz > .wp-block-embed,
.vdk-spalten-satz > .wp-block-columns,
.vdk-spalten-satz > .wp-block-buttons,
.vdk-spalten-satz > h2,
.vdk-spalten-satz > h3 {
	column-span: all;
	max-width: none;
	margin-block: var(--space-6);
	text-align: left;
}

/* Eine Überschrift direkt nach dem Ausbruch soll nicht doppelt Luft haben. */
.vdk-spalten-satz > h2 + p,
.vdk-spalten-satz > h3 + p {
	margin-top: 0;
}

/* — Seitenleiste (3a) — */
.vdk-seitenleiste {
	padding-left: 32px;
	border-left: 1px solid var(--color-divider);
}

/* — Inhaltsverzeichnis „Auf dieser Seite“ — */
.vdk-toc-liste {
	display: grid;
	border-top: 1px solid var(--color-divider);
}

.vdk-toc-link {
	padding: 10px 0;
	border-bottom: 1px solid var(--color-divider);
	color: var(--color-text);
	font-size: 14px;
	text-decoration: none;
}

.vdk-toc-link:hover,
.vdk-toc-link:focus-visible {
	color: var(--color-accent-700);
}

.vdk-toc-link--tief {
	padding-left: var(--space-3);
	font-size: 13px;
}

/* Angesprungene Überschriften nicht unter den Seitenkopf schieben. */
:where(h2, h3)[id] {
	scroll-margin-top: var(--space-6);
}

/* — „Kurz gefasst“ — */
.vdk-fakten-liste {
	margin: 0;
	border-top: 1px solid var(--color-divider);
}

.vdk-fakten-zeile {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--color-divider);
	font-size: 14px;
}

.vdk-fakten-zeile dt {
	margin: 0;
	color: var(--text-68);
}

.vdk-fakten-zeile dd {
	margin: 0;
	text-align: right;
}

/* — Beitrag (3b) — */
.vdk-beitrag-spalte {
	max-width: 760px;
	margin-inline: auto !important;
}

.vdk-beitrag-kopf {
	padding-bottom: 30px;
	border-bottom: 1px solid var(--color-divider);
}

.vdk-beitrag-kicker {
	margin: 0 0 16px;
	font-size: 12px;
	line-height: 1.5;
}

.vdk-beitrag-titel-gross {
	margin: 0 !important;
	font-size: clamp(32px, 4.6vw, 52px);
	line-height: 1.12;
	letter-spacing: -0.01em;
}

.vdk-autor p,
p.vdk-autor {
	margin: 20px 0 0;
	color: var(--text-65);
	font-size: 15px;
	line-height: 26px;
}

/* Der Textkörper eines Beitrags: etwas größer als der Seitensatz. */
.vdk-beitrag-satz > p {
	max-width: none;
	margin: 0 0 22px;
	color: color-mix(in srgb, var(--color-text) 86%, transparent);
	font-size: 17px;
	hyphens: auto;
	line-height: 30px;
	text-align: justify;
}

.vdk-beitrag-satz blockquote,
.vdk-beitrag-satz .wp-block-quote {
	max-width: none;
	margin: 32px 0;
	padding: 0 0 0 28px;
	border: 0;
	border-left: 1px solid var(--color-accent);
	color: var(--color-text);
	font-family: var(--font-heading);
	font-size: clamp(22px, 2.6vw, 28px);
	font-weight: 400;
	line-height: 1.36;
	text-align: left;
	text-indent: -0.34em;
}

.vdk-beitrag-satz blockquote p {
	margin: 0;
	font: inherit;
	text-align: left;
}

.vdk-beitrag-satz blockquote cite {
	display: block;
	margin-top: var(--space-4);
	color: var(--text-70);
	font-family: var(--font-body);
	font-size: 15px;
	font-style: normal;
	text-indent: 0;
}

.vdk-marken {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 34px 0 0;
}

.vdk-marken a {
	text-decoration: none;
}

/* — Aufruf: ein Satz, eine Schaltfläche (3b) — */
.vdk-sanierung-aufruf {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3);
	padding: 24px 0;
	border-top: 1px solid var(--color-divider);
	border-bottom: 1px solid var(--color-divider);
}

.vdk-sanierung-aufruf-satz {
	flex: 1;
	min-width: 280px;
	margin: 0;
	font-family: var(--font-heading);
	font-size: 22px;
	line-height: 30px;
}

/* ══════════════════════════════════════════════════════════════════════════
   14 · Veranstaltungsübersicht (3c)
   ══════════════════════════════════════════════════════════════════════════ */

.vdk-varchiv-kopf {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px;
	padding: 20px 0 26px;
	border-bottom: 1px solid var(--color-divider);
}

/* Segmentierte Auswahl — hier bewusst Links, nicht Formularfelder: so bleibt
   der Filter mit Lesezeichen und ohne JavaScript benutzbar. */
.vdk-seg {
	display: inline-flex;
	flex-wrap: wrap;
	overflow: hidden;
	border: 1px solid var(--color-divider);
	border-radius: var(--radius-md);
}

.vdk-seg-opt {
	padding: 7px 12px;
	color: var(--color-text);
	font-size: 13px;
	text-decoration: none;
}

.vdk-seg-opt + .vdk-seg-opt {
	border-left: 1px solid var(--color-divider);
}

.vdk-seg-opt:hover {
	background: color-mix(in srgb, var(--color-text) 7%, transparent);
}

.vdk-seg-opt--aktiv {
	box-shadow: inset 0 0 0 1px var(--color-accent);
	color: var(--color-accent-700);
}

.vdk-varchiv-zaehler {
	margin-left: auto;
	color: var(--text-68);
	font-size: 14px;
}

.vdk-varchiv-zeile {
	display: grid;
	grid-template-columns: 78px minmax(0, 1fr) minmax(0, 2fr) 150px;
	gap: 32px;
	align-items: start;
	padding: 26px 0;
	border-bottom: 1px solid var(--color-divider);
}

/* Ohne Vorschaubild fällt die Bildspalte weg, statt leer zu bleiben. */
.vdk-varchiv-zeile--ohnebild {
	grid-template-columns: 78px minmax(0, 1fr) 150px;
}

.vdk-varchiv-tag {
	text-align: right;
}

.vdk-varchiv-tag b {
	display: block;
	color: var(--color-accent);
	font-family: var(--font-heading);
	font-size: 38px;
	font-weight: 400;
	line-height: 40px;
}

.vdk-varchiv-tag span {
	display: block;
	margin-top: 4px;
	color: var(--text-68);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.vdk-varchiv-bild {
	aspect-ratio: 4 / 3;
}

.vdk-varchiv-marken {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 8px;
}

.vdk-varchiv-titel {
	margin: 0;
	font-family: var(--font-heading);
	font-size: clamp(22px, 2.6vw, 28px);
	font-weight: 400;
	line-height: 1.22;
}

.vdk-varchiv-titel a {
	color: var(--color-text);
	text-decoration: none;
}

.vdk-varchiv-titel a:hover,
.vdk-varchiv-titel a:focus-visible {
	color: var(--color-accent-700);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.vdk-varchiv-anriss {
	margin: 10px 0 0;
	color: var(--text-76);
	font-size: 15px;
	hyphens: auto;
	line-height: 26px;
	text-align: justify;
}

.vdk-varchiv-rechts {
	text-align: right;
}

.vdk-varchiv-zeit {
	margin: 0;
	font-size: 15px;
}

.vdk-varchiv-eintritt {
	margin: 6px 0 16px;
	color: var(--text-65);
	font-size: 13px;
	line-height: 20px;
}

/* — Blättern — */
.vdk-blaettern {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 28px 0 0;
	font-size: 14px;
}

.vdk-blaettern a,
.vdk-blaettern span {
	padding: 4px 10px;
	color: var(--color-accent-700);
	text-decoration: none;
}

/* Welche Seite man gerade liest, ist Information — der Rahmen muss also
   sichtbar sein und nicht nur geahnt. */
.vdk-blaettern .current {
	box-shadow: inset 0 0 0 1px var(--color-accent-600);
	border-radius: var(--radius-md);
	color: var(--color-text);
}

.vdk-blaettern .dots {
	color: var(--text-65);
}

/* ══════════════════════════════════════════════════════════════════════════
   15 · Einzelne Veranstaltung (3d)
   ══════════════════════════════════════════════════════════════════════════ */

.vdk-vkopf {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: 52px;
	align-items: center;
}

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

.vdk-vkopf-bild {
	aspect-ratio: var(--vkopf-format, 4 / 5);
}

.vdk-vkopf-marken {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 14px;
}

.vdk-vkopf-titel {
	margin: 0 0 0 -0.042em;
	font-family: var(--font-heading);
	font-size: clamp(34px, 5vw, 60px);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.01em;
}

.vdk-vkopf-vorlauf {
	max-width: 52ch;
	margin: 22px 0 26px;
	color: var(--text-82);
	font-size: 18px;
	hyphens: auto;
	line-height: 30px;
	text-align: justify;
}

/* — Textkörper der Veranstaltung — */
.vdk-vsatz > p {
	max-width: 66ch;
	margin: 0 0 20px;
	color: color-mix(in srgb, var(--color-text) 85%, transparent);
	font-size: 16.5px;
	hyphens: auto;
	line-height: 29px;
	text-align: justify;
}

/* — Reservierung — */
.vdk-reservierung {
	padding: 24px 28px;
	border: 1px solid var(--color-divider);
}

.vdk-reservierung .vdk-kicker {
	margin: 0 0 12px;
}

.vdk-reservierung-hinweis {
	margin: 0 0 18px;
	color: var(--text-76);
	font-size: 14.5px;
	line-height: 26px;
}

.vdk-reservierung-leer {
	margin: 0;
	color: var(--text-68);
	font-size: 13px;
	line-height: 22px;
}

/* Das Buchungswerkzeug bringt eigene Formularstile mit. Damit sie nicht aus
   dem Bild fallen, erben Schrift und Farbe hier vom Theme; alles Weitere
   lässt sich in diesem Block gezielt angleichen. */
.vdk-reservierung-widget {
	font-family: var(--font-body);
	font-size: 14px;
}

.vdk-reservierung-widget input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.vdk-reservierung-widget select,
.vdk-reservierung-widget textarea {
	max-width: 100%;
	padding: 6px 10px;
	border: 1px solid var(--color-divider);
	border-radius: var(--radius-md);
	background: transparent;
	color: var(--color-text);
	font: inherit;
}

.vdk-reservierung-widget button,
.vdk-reservierung-widget input[type="submit"] {
	min-height: 36px;
	padding: var(--space-2) 16.5px;
	border: 1px solid var(--color-accent);
	border-radius: var(--radius-md);
	background: transparent;
	color: var(--color-accent-700);
	cursor: pointer;
	font-family: var(--font-heading);
	font-size: 14px;
	font-weight: 600;
}

.vdk-reservierung-ohne {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 24px;
	padding: 20px 0;
	border-top: 1px solid var(--color-divider);
	border-bottom: 1px solid var(--color-divider);
}

.vdk-reservierung-ohne-text {
	flex: 1;
	min-width: 260px;
	margin: 0;
	font-family: var(--font-heading);
	font-size: 22px;
	line-height: 30px;
}

/* — Kompakte Fassung des Anfahrt-Bands für die Seitenleiste — */
.vdk-anfahrt-spenden--kompakt h2 {
	font-size: 20px;
	line-height: 28px;
}

.vdk-anfahrt-spenden--kompakt p {
	max-width: none;
	font-size: 13px;
	line-height: 22px;
}

.vdk-anfahrt-spenden--kompakt .vdk-route {
	max-width: none;
	margin-bottom: 12px;
}

.vdk-anfahrt-spenden--kompakt .vdk-karte img {
	max-height: 160px;
}

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

/* — „Nächste Termine“ als schmale Zeilen — */
.vdk-termine-zeilen {
	border-top: 1px solid var(--color-divider);
}

.vdk-termin-zeile {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr) 200px 110px;
	gap: 24px;
	align-items: baseline;
	padding: 14px 0;
	border-bottom: 1px solid var(--color-divider);
	font-size: 15px;
}

.vdk-termin-zeile-datum {
	color: var(--text-68);
}

.vdk-termin-zeile-titel {
	font-family: var(--font-heading);
	font-size: 19px;
}

.vdk-termin-zeile-ort {
	color: var(--text-68);
}

.vdk-termin-zeile .vdk-weiter {
	justify-self: end;
}

/* ══════════════════════════════════════════════════════════════════════════
   16 · Umbrüche der Unterseiten

   Reihenfolge der Auflösung: erst die Seitenleiste unter den Text, dann die
   Spalten des Fließtextes, zuletzt die Raster der Listen.
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1023px) {
	/* Der Fließtext wird einspaltig, bevor die Spalten zu schmal für ein
	   lesbares Maß werden. */
	.vdk-spalten-satz {
		columns: 1;
		column-rule: 0;
	}

	.vdk-varchiv-zeile {
		grid-template-columns: 78px minmax(0, 1fr) minmax(0, 1.6fr);
		gap: 24px;
	}

	/* Zeit und Eintritt rutschen unter den Text, links ausgerichtet. */
	.vdk-varchiv-zeile .vdk-varchiv-rechts {
		grid-column: 2 / -1;
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 12px;
		text-align: left;
	}

	.vdk-varchiv-eintritt {
		margin: 0;
	}

	.vdk-varchiv-zeile--ohnebild {
		grid-template-columns: 78px minmax(0, 1fr);
	}

	.vdk-vkopf {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.vdk-vkopf-bild {
		aspect-ratio: 3 / 2;
	}

	.vdk-termin-zeile {
		grid-template-columns: 96px minmax(0, 1fr) 110px;
		gap: 16px;
	}

	.vdk-termin-zeile-ort {
		grid-column: 2;
		font-size: 14px;
	}
}

@media (max-width: 781px) {
	/* Die Seitenleiste von 3a und 3d wandert unter den Text; die Trennlinie
	   von der Seite an die Oberkante. */
	.vdk-seitenleiste {
		padding-top: var(--space-6);
		padding-left: 0;
		border-top: 1px solid var(--color-divider);
		border-left: 0;
	}
}

@media (max-width: 719px) {
	.vdk-varchiv-kopf {
		gap: 14px;
	}

	.vdk-varchiv-zaehler {
		margin-left: 0;
	}

	.vdk-varchiv-zeile,
	.vdk-varchiv-zeile--ohnebild {
		grid-template-columns: 64px minmax(0, 1fr);
		gap: 18px;
	}

	.vdk-varchiv-bild {
		grid-column: 2;
		aspect-ratio: 16 / 9;
	}

	.vdk-varchiv-text {
		grid-column: 2;
	}

	.vdk-varchiv-tag b {
		font-size: 30px;
		line-height: 32px;
	}

	/* Justierter Satz reißt in schmalen Spalten Löcher. */
	.vdk-varchiv-anriss,
	.vdk-vkopf-vorlauf,
	.vdk-vsatz > p,
	.vdk-beitrag-satz > p,
	.vdk-spalten-satz {
		text-align: left;
	}

	.vdk-beitrag-satz > p {
		font-size: 16px;
		line-height: 28px;
	}

	.vdk-vorlauf p,
	p.vdk-vorlauf {
		font-size: 16.5px;
		line-height: 28px;
	}

	.vdk-reservierung {
		padding: var(--space-4);
	}

	.vdk-termin-zeile {
		grid-template-columns: minmax(0, 1fr);
		gap: 4px;
	}

	.vdk-termin-zeile-ort {
		grid-column: auto;
	}

	.vdk-termin-zeile .vdk-weiter {
		justify-self: start;
		margin-top: 4px;
	}

	.vdk-fakten-zeile {
		flex-direction: column;
		gap: 2px;
	}

	.vdk-fakten-zeile dd {
		text-align: left;
	}
}

@media (max-width: 479px) {
	.vdk-varchiv-zeile,
	.vdk-varchiv-zeile--ohnebild {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}

	.vdk-varchiv-bild,
	.vdk-varchiv-text,
	.vdk-varchiv-zeile .vdk-varchiv-rechts {
		grid-column: auto;
	}

	.vdk-varchiv-tag {
		display: flex;
		align-items: baseline;
		gap: 8px;
		text-align: left;
	}

	.vdk-varchiv-tag b,
	.vdk-varchiv-tag span {
		display: inline;
		margin: 0;
	}

	.vdk-seg {
		width: 100%;
	}

	.vdk-seg-opt {
		flex: 1;
		text-align: center;
	}
}

/* Der Autorenblock des Kerns setzt Zeile und Name untereinander; im Entwurf
   stehen sie in einer Zeile („von Andreas Schulz“). */
.vdk-autor {
	margin: 20px 0 0;
	color: var(--text-65);
	font-size: 15px;
	line-height: 26px;
}

.vdk-autor .wp-block-post-author__content {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35em;
	align-items: baseline;
}

.vdk-autor .wp-block-post-author__byline,
.vdk-autor .wp-block-post-author__name {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
}

/* ══════════════════════════════════════════════════════════════════════════
   17 · Abschnitte der Startseite

   Die Trennlinien gehören zu den Abschnitten, nicht zwischen sie. Als
   eigenständige <hr>-Blöcke blieben sie stehen, wenn ein Abschnitt nichts
   auszugeben hat — mit einer leeren Zone darunter. Als Linie am oberen Rand
   des jeweiligen Abschnitts verschwinden sie mit ihm.
   ══════════════════════════════════════════════════════════════════════════ */

.vdk-abschnitt--linie {
	position: relative;
}

/* Die Linie läuft auf der Textbreite des Abschnitts. Beim Entwurfsmaß von
   1280 px ist das genau die Breite der bisherigen weiten Trennlinie; auf
   breiteren Schirmen steht sie mit den Abschnitten auf Kante statt 144 px
   darüber hinauszuragen. */
.vdk-abschnitt--linie::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	border-top: 1px solid var(--color-divider);
}

/* Das Foto im Aufmacher hat eine Obergrenze. Im Entwurf stand daneben ein
   Vorlauftext, der ähnlich hoch war; fehlt der, wüchse das Hochformat sonst
   auf die doppelte Höhe der Textspalte. */
.vdk-hero-spalten .wp-block-post-featured-image img {
	max-height: clamp(260px, 27vw, 400px);
}

/* Ohne Beitragsbild bliebe die rechte Spalte des Aufmachers als leere Fläche
   stehen und presste den Text auf drei Fünftel. Dann trägt der Text die ganze
   Breite. Geprüft wird mit :empty — die Spalte enthält im Muster genau einen
   Block, und gibt der nichts aus, bleibt das <div> wirklich leer. */
.vdk-hero-spalten > .wp-block-column:empty {
	display: none;
}

.vdk-hero-spalten:has(> .wp-block-column:empty) > .wp-block-column {
	flex-basis: 100% !important;
}

/* Der Aufmacher ohne Bild darf nicht bis zum Anschlag laufen — sonst wird die
   Zeile zu lang zum Lesen. */
.vdk-hero-spalten:has(> .wp-block-column:empty) .vdk-hero-intro {
	max-width: 62ch;
}

/* Dasselbe für die beiden Spalten im zweispaltigen Entwurf: fehlt einer
   Spalte der Inhalt, verschwindet mit ihr auch die Haarlinie zwischen den
   Spalten und der Abstand, den sie freihielt. */
.vdk-spalten-linie > .wp-block-column:empty {
	display: none;
}

.vdk-spalten-linie:has(> .wp-block-column:empty) > .wp-block-column {
	padding-top: 0;
	padding-right: 0;
	padding-left: 0;
	border-top: 0;
	border-left: 0;
}