/* ===============================================================
   Beiträge
   Übersicht mit Filter, Karten, Artikelansicht.

   Lädt nach theme.css, header.css, mein-vda.css und vereine.css.
   Was hier steht, gewinnt gegen alles davor.
   =============================================================== */

:root {
	/* Der Artikel läuft über das ganze Band, damit seine Kanten mit dem
	   Seitenkopf und dem Rest der Seite fluchten. Die Lesespalte wird
	   nicht vom Raster begrenzt, sondern von ihrer eigenen Zeilenlänge
	   (68 Zeichen, siehe Abschnitt 8). */
	--vda-artikelspalte: clamp(2.5rem, 5vw, 5rem);
}

/* ---------------------------------------------------------------
   1. Filterleiste
   --------------------------------------------------------------- */

.vda-beitragsfilter {
	margin-block-end: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius);
}

.vda-beitragsfilter__zeile {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 0.8fr) minmax(0, 0.9fr) auto;
	gap: var(--wp--preset--spacing--20);
	align-items: end;
}

.vda-beitragsfilter .vda-feld {
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: 6px;
}

.vda-beitragsfilter .vda-feld label {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 750;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.vda-beitragsfilter input[type="search"],
.vda-beitragsfilter select {
	width: 100%;
	height: 48px;
	padding-inline: 14px;
	color: var(--wp--preset--color--ink);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius-small);
	appearance: none;
}

/* Der eigene Pfeil bleibt sichtbar, weil appearance den Systempfeil nimmt. */
.vda-beitragsfilter select {
	padding-inline-end: 38px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%2324465e' d='M8 11 3.5 6h9z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 14px;
}

/* Der Ring kommt aus theme.css, hier nur die Kante des Feldes. */
.vda-beitragsfilter input[type="search"]:focus-visible,
.vda-beitragsfilter select:focus-visible {
	border-color: var(--wp--preset--color--vda-blue);
}

.vda-beitragsfilter__knopf {
	height: 48px;
	padding-inline: var(--wp--preset--spacing--30);
	white-space: nowrap;
}

/* Die Marken darunter: die sieben häufigsten Themen als ein Klick. */
.vda-beitragsfilter__marken {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin-block-start: var(--wp--preset--spacing--20);
	padding-block-start: var(--wp--preset--spacing--20);
	border-block-start: 1px solid var(--wp--preset--color--line);
}

.vda-beitragsfilter__markenlabel {
	margin-inline-end: 4px;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 750;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* ---------------------------------------------------------------
   2. Marken
   --------------------------------------------------------------- */

.vda-marke {
	display: inline-block;
	padding: 5px 12px;
	color: var(--wp--preset--color--vda-blue-dark);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
	background: var(--wp--preset--color--paper-blue);
	border: 1px solid transparent;
	border-radius: 999px;
	transition: background-color var(--wp--custom--transition), color var(--wp--custom--transition);
}

a.vda-marke:hover,
a.vda-marke:focus-visible {
	color: var(--wp--preset--color--white);
	background: var(--wp--preset--color--vda-blue);
}

.vda-marke--an {
	color: var(--wp--preset--color--white);
	background: var(--wp--preset--color--vda-blue-dark);
}

.vda-marke--still {
	padding: 0;
	color: var(--wp--preset--color--vda-blue-dark);
	font-weight: 750;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	background: none;
	border-radius: 0;
}

a.vda-marke--still:hover,
a.vda-marke--still:focus-visible {
	color: var(--wp--preset--color--vda-blue);
	background: none;
	text-decoration: underline;
}

.vda-themen__marken a.vda-marke--still {
	padding: 5px 12px;
	letter-spacing: 0;
	text-transform: none;
	background: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--line);
	border-radius: 999px;
}

.vda-themen__marken a.vda-marke--still:hover {
	color: var(--wp--preset--color--white);
	background: var(--wp--preset--color--vda-blue);
	border-color: var(--wp--preset--color--vda-blue);
	text-decoration: none;
}

/* ---------------------------------------------------------------
   3. Statuszeile
   --------------------------------------------------------------- */

.vda-beitragsarchiv__status {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	align-items: baseline;
	justify-content: space-between;
	margin-block-end: var(--wp--preset--spacing--40);
	padding-block-end: var(--wp--preset--spacing--20);
	border-block-end: 2px solid var(--wp--preset--color--vda-blue);
}

.vda-beitragsarchiv__zahl {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.vda-beitragsarchiv__zahl strong {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 750;
}

.vda-beitragsarchiv__fest {
	margin-inline-start: 6px;
	color: var(--wp--preset--color--vda-blue-dark);
	font-weight: 700;
}

.vda-beitragsarchiv__zuruecksetzen {
	color: var(--wp--preset--color--vda-blue-dark);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
}

.vda-beitragsarchiv__leer {
	padding-block: var(--wp--preset--spacing--80);
	text-align: center;
}

.vda-beitragsarchiv__leer p {
	max-width: 46ch;
	margin-inline: auto;
}

/* ---------------------------------------------------------------
   4. Aufmacher
   Der erste Beitrag über die ganze Breite, Bild links.
   --------------------------------------------------------------- */

.vda-aufmacher {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 3vw, 3rem);
	align-items: center;
	margin-block-end: var(--wp--preset--spacing--70);
	padding-block-end: var(--wp--preset--spacing--70);
	border-block-end: 1px solid var(--wp--preset--color--line);
}

.vda-aufmacher__bild {
	display: block;
	overflow: hidden;
	line-height: 0;
	border-radius: var(--wp--custom--radius);
}

.vda-aufmacher__bild img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	transition: transform 400ms ease;
}

.vda-aufmacher:hover .vda-aufmacher__bild img {
	transform: scale(1.03);
}

.vda-aufmacher__titel {
	margin-block: 10px 0;
	font-size: clamp(26px, 3vw, 38px);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

.vda-aufmacher__titel a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

/* Die ganze Kachel ist anklickbar, ohne zweiten Tabstopp. */
.vda-aufmacher__titel a::after {
	position: absolute;
	inset: 0;
	content: "";
}

.vda-aufmacher:hover .vda-aufmacher__titel a,
.vda-aufmacher__titel a:focus-visible {
	color: var(--wp--preset--color--vda-blue-dark);
}

.vda-aufmacher__auszug {
	max-width: 52ch;
	margin-block: 14px 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
}

/* ---------------------------------------------------------------
   5. Metazeile und Autorzeile
   --------------------------------------------------------------- */

.vda-beitragsmeta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	align-items: center;
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--micro);
	line-height: 1.4;
}

/* Der Trennpunkt hängt am vorangehenden Element, nicht am folgenden.
   Sonst steht er nach einem Zeilenumbruch allein am Zeilenanfang. */
.vda-beitragsmeta > :not(:last-child)::after {
	margin-inline-start: 12px;
	color: var(--wp--preset--color--line);
	content: "·";
}

.vda-beitragsmeta--kopf {
	margin-block-start: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--small);
}

.vda-beitragsmeta--kopf a {
	color: var(--wp--preset--color--vda-blue-dark);
	font-weight: 700;
}


/* ---------------------------------------------------------------
   6. Kartenraster
   Alle Karten einer Reihe sind gleich hoch, das Bild oben bündig,
   die Autorzeile unten bündig.
   --------------------------------------------------------------- */

.vda-beitragsraster {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--50) clamp(1.5rem, 2.6vw, 2.5rem);
}

.vda-beitragskarte {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.vda-beitragskarte__bild {
	overflow: hidden;
	margin-block-end: 16px;
	line-height: 0;
	background: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius-small);
}

.vda-beitragskarte__bild img,
.vda-bildplatzhalter {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	transition: transform 400ms ease;
}

.vda-bildplatzhalter {
	background: linear-gradient(135deg, var(--wp--preset--color--paper-blue), var(--wp--preset--color--surface));
}

.vda-beitragskarte:hover .vda-beitragskarte__bild img {
	transform: scale(1.04);
}

.vda-beitragskarte__text {
	display: flex;
	flex: 1;
	flex-direction: column;
}

.vda-beitragskarte__titel {
	margin-block: 8px 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.005em;
	text-wrap: pretty;
}

.vda-beitragskarte__titel a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.vda-beitragskarte__titel a::after {
	position: absolute;
	inset: 0;
	content: "";
}

.vda-beitragskarte:hover .vda-beitragskarte__titel a,
.vda-beitragskarte__titel a:focus-visible {
	color: var(--wp--preset--color--vda-blue-dark);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.vda-beitragskarte__auszug {
	margin-block: 10px 0 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.55;
}


/* ---------------------------------------------------------------
   7. Blättern
   --------------------------------------------------------------- */

.vda-blaettern {
	margin-block-start: var(--wp--preset--spacing--70);
	padding-block-start: var(--wp--preset--spacing--30);
	border-block-start: 1px solid var(--wp--preset--color--line);
}

.vda-blaettern ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Nur die Liste, die WordPress baut. Ohne die Einschraenkung traf
   die Regel auch die Blaetterleiste des Heftarchivs: dort wurde der
   Statustext "Seite 2 von 5" zu einem Kasten, der aussah wie ein
   Knopf, und die eigenen Regeln aus mein-vda.css blieben wirkungslos. */
.vda-blaettern li > a,
.vda-blaettern li > span {
	display: flex;
	min-width: 48px;
	height: 48px;
	align-items: center;
	justify-content: center;
	padding-inline: 12px;
	color: var(--wp--preset--color--vda-blue-dark);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	text-decoration: none;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius-small);
	transition: background-color var(--wp--custom--transition), border-color var(--wp--custom--transition);
}

.vda-blaettern li > a:hover,
.vda-blaettern li > a:focus-visible {
	background: var(--wp--preset--color--paper-blue);
	border-color: var(--wp--preset--color--vda-blue);
}

.vda-blaettern li > .current {
	color: var(--wp--preset--color--white);
	background: var(--wp--preset--color--vda-blue-dark);
	border-color: var(--wp--preset--color--vda-blue-dark);
}

.vda-blaettern .dots {
	min-width: 24px;
	color: var(--wp--preset--color--muted);
	border: 0;
}

/* ---------------------------------------------------------------
   8. Artikelansicht
   Lesespalte plus Seitenspalte, beide zusammen mittig im Band.
   --------------------------------------------------------------- */

.vda-artikel-hero .vda-brotkrumen {
	margin-block-end: var(--wp--preset--spacing--20);
}

/* Der Kopf trägt nur noch Pfad, Thema, Titel und die Angaben zum
   Beitrag. Der Anriss stand hier und wiederholte den ersten Satz, der
   zwei Zentimeter tiefer noch einmal kommt. */
.vda-artikel-hero .wp-block-post-title {
	max-width: 30ch;
	margin-block: 4px 0;
	line-height: 1.06;
	text-wrap: balance;
}

.vda-artikel-hero .wp-block-post-terms {
	margin-block-start: var(--wp--preset--spacing--20);
}

.vda-artikel {
	--vda-rail: 300px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--vda-rail);
	gap: var(--vda-artikelspalte);
	align-items: start;
}

.vda-artikel__aufmacherbild {
	margin-block-end: var(--wp--preset--spacing--50);
}

.vda-artikel__aufmacherbild img {
	width: 100%;
	border-radius: var(--wp--custom--radius);
}

/* Der Fliesstext läuft grösser als im Rest der Seite: ein Artikel
   wird gelesen, nicht überflogen. Die Spalte begrenzt die Zeile,
   deshalb hier keine zusätzliche ch-Breite an den Absätzen. */
.vda-artikel__haupt {
	max-width: 68ch;
	font-size: 19px;
	line-height: 1.68;
}

.vda-artikel__haupt .entry-content > * {
	max-width: none;
}

.vda-artikel__haupt p {
	max-width: none;
	margin-block: 0 1.35em;
	color: var(--wp--preset--color--ink);
	text-wrap: pretty;
}

/* Der erste Block sitzt bündig auf der Oberkante der Lesespalte. Gekappt
   wird nur der Abstand nach oben. Stand hier margin-block-end, klebte
   der erste Absatz am zweiten. */
.vda-artikel__haupt > .wp-block-post-content > :first-child {
	margin-block-start: 0;
}

.vda-artikel__haupt p:last-child {
	margin-block-end: 0;
}

.vda-artikel__haupt h2 {
	margin-block: 2em 0.5em;
	font-size: clamp(24px, 2.4vw, 30px);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.vda-artikel__haupt h3 {
	margin-block: 1.6em 0.4em;
	font-size: clamp(20px, 2vw, 24px);
	font-weight: 650;
	line-height: 1.25;
}

.vda-artikel__haupt h4 {
	margin-block: 1.4em 0.35em;
	font-size: 19px;
	font-weight: 750;
	line-height: 1.35;
}

.vda-artikel__haupt h2:first-child,
.vda-artikel__haupt h3:first-child {
	margin-block-start: 0;
}

.vda-artikel__haupt a:not(.wp-element-button) {
	color: var(--wp--preset--color--vda-blue-dark);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.vda-artikel__haupt a:not(.wp-element-button):hover {
	color: var(--wp--preset--color--vda-blue);
	text-decoration-thickness: 2px;
}

.vda-artikel__haupt ul,
.vda-artikel__haupt ol {
	margin-block: 0 1.35em;
	padding-inline-start: 1.4em;
}

.vda-artikel__haupt li {
	margin-block-end: 0.5em;
}

.vda-artikel__haupt li::marker {
	color: var(--wp--preset--color--vda-blue);
}

.vda-artikel__haupt blockquote {
	margin-block: 2em;
	margin-inline: 0;
	padding-inline-start: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--vda-blue-dark);
	font-size: clamp(20px, 2vw, 24px);
	font-style: normal;
	line-height: 1.42;
	border-inline-start: 3px solid var(--wp--preset--color--vda-blue);
}

.vda-artikel__haupt blockquote p:last-child {
	margin-block-end: 0;
}

.vda-artikel__haupt blockquote cite {
	display: block;
	margin-block-start: 0.6em;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	font-style: normal;
}

.vda-artikel__haupt figure,
.vda-artikel__haupt .wp-block-image {
	margin-block: 2em;
}

.vda-artikel__haupt img {
	height: auto;
	max-width: 100%;
	border-radius: var(--wp--custom--radius-small);
}

.vda-artikel__haupt figcaption {
	margin-block-start: 10px;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--micro);
	line-height: 1.45;
}

/* Breite Bilder brechen aus der Lesespalte aus, aber nicht aus dem Band. */
.vda-artikel__haupt .alignwide,
.vda-artikel__haupt .alignfull {
	width: min(880px, 100%);
	max-width: none;
	margin-inline: calc((100% - min(880px, 100%)) / 2);
}

.vda-artikel__haupt hr,
.vda-artikel__haupt .wp-block-separator {
	margin-block: 2.5em;
	border: 0;
	border-block-start: 1px solid var(--wp--preset--color--line);
}

.vda-artikel__haupt table {
	width: 100%;
	font-size: var(--wp--preset--font-size--small);
	border-collapse: collapse;
}

.vda-artikel__haupt th,
.vda-artikel__haupt td {
	padding: 10px 12px;
	text-align: start;
	border-block-end: 1px solid var(--wp--preset--color--line);
}

/* ---------------------------------------------------------------
   9. Seitenspalte des Artikels
   --------------------------------------------------------------- */

.vda-artikel__rail {
	position: sticky;
	top: calc(var(--wp--custom--header-height) + 24px);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
}

/* Jede Karte trägt oben eine blaue Kante. Sie trennt die drei Kästen
   deutlicher voneinander als eine blosse Umrandung und bindet sie an
   die Farbe der Seite. */
.vda-rail-karte {
	position: relative;
	padding: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius);
}

.vda-rail-karte::before {
	position: absolute;
	top: -1px;
	inset-inline: -1px;
	height: 3px;
	background: var(--wp--preset--color--vda-blue);
	border-start-start-radius: var(--wp--custom--radius);
	border-start-end-radius: var(--wp--custom--radius);
	content: "";
}

.vda-rail-karte__titel {
	display: block;
	margin-block-end: 16px;
	padding-block-end: 12px;
	color: var(--wp--preset--color--vda-blue-dark);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 750;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-block-end: 1px solid var(--wp--preset--color--line);
}

.vda-autorkarte__kopf {
	display: flex;
	gap: 14px;
	align-items: center;
}

.vda-autorkarte__bild {
	width: 52px;
	height: 52px;
	flex: none;
	border-radius: 50%;
}

.vda-autorkarte__name {
	margin: 0;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	line-height: 1.3;
}

.vda-autorkarte__zahl {
	margin: 2px 0 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--micro);
}

.vda-autorkarte__text {
	margin-block: 14px 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.55;
}

.vda-autorkarte .vda-textlink {
	display: inline-block;
	margin-block-start: 14px;
}

.vda-themen__marken {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.vda-teilen__liste {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vda-teilen__knopf {
	display: flex;
	min-height: 48px;
	gap: 9px;
	align-items: center;
	padding: 8px 12px;
	color: var(--wp--preset--color--vda-blue-dark);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 700;
	text-decoration: none;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius-small);
	transition: color var(--wp--custom--transition), background-color var(--wp--custom--transition), border-color var(--wp--custom--transition);
}

.vda-teilen__zeichen {
	display: flex;
	width: 18px;
	height: 18px;
	flex: none;
	align-items: center;
	justify-content: center;
}

.vda-teilen__knopf:hover,
.vda-teilen__knopf:focus-visible {
	color: var(--wp--preset--color--white);
	background: var(--wp--preset--color--vda-blue);
	border-color: var(--wp--preset--color--vda-blue);
}

/* Jeder Dienst behält beim Überfahren seine eigene Farbe, sonst sind
   die vier Knöpfe nur an der Beschriftung zu unterscheiden. Die Töne
   sind gegenüber den Markenfarben abgedunkelt, damit die weisse
   Beschriftung darauf 4.5 zu 1 erreicht: Facebook von #1877f2 auf
   #1566d6, WhatsApp von #1da851 auf #147a3b. */
.vda-teilen__knopf--facebook:hover,
.vda-teilen__knopf--facebook:focus-visible {
	background: #1566d6;
	border-color: #1566d6;
}

.vda-teilen__knopf--linkedin:hover,
.vda-teilen__knopf--linkedin:focus-visible {
	background: #0a66c2;
	border-color: #0a66c2;
}

.vda-teilen__knopf--whatsapp:hover,
.vda-teilen__knopf--whatsapp:focus-visible {
	background: #147a3b;
	border-color: #147a3b;
}

.vda-teilen__hinweis {
	margin: 14px 0 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--micro);
	line-height: 1.45;
}

/* ---------------------------------------------------------------
   10. Nachbarbeiträge und verwandte Beiträge
   --------------------------------------------------------------- */

.vda-nachbarn {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30);
	margin-block-start: var(--wp--preset--spacing--90);
	padding-block-start: var(--wp--preset--spacing--50);
	border-block-start: 1px solid var(--wp--preset--color--line);
}

/* Beim neuesten und beim ältesten Beitrag gibt es nur einen Nachbarn.
   Der nimmt dann die ganze Breite, sonst steht eine halbe Zeile leer.
   Diese Regel muss nach der Grundregel stehen, sonst gewinnt deren
   zweispaltiges Raster. */
.vda-nachbarn--einzeln {
	grid-template-columns: minmax(0, 1fr);
}

.vda-nachbarn__seite {
	display: flex;
	min-height: 104px;
	flex-direction: column;
	justify-content: center;
	gap: 8px;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	text-decoration: none;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius);
	transition: border-color var(--wp--custom--transition), background-color var(--wp--custom--transition), box-shadow var(--wp--custom--transition);
}

.vda-nachbarn__seite:hover {
	box-shadow: 0 4px 16px rgba(2, 42, 68, 0.08);
}

.vda-nachbarn__seite:hover,
.vda-nachbarn__seite:focus-visible {
	background: var(--wp--preset--color--blue-wash);
	border-color: var(--wp--preset--color--vda-blue);
}

.vda-nachbarn__seite--nach {
	text-align: end;
}

.vda-nachbarn__label {
	display: block;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 750;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.vda-nachbarn__label::before {
	content: "← ";
}

.vda-nachbarn__seite--nach .vda-nachbarn__label::before {
	content: "";
}

.vda-nachbarn__seite--nach .vda-nachbarn__label::after {
	content: " →";
}

.vda-nachbarn__titel {
	display: block;
	margin-block-start: 0;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	line-height: 1.35;
}

.vda-verwandt .vda-subheading {
	margin-block-end: var(--wp--preset--spacing--50);
	padding-block-end: var(--wp--preset--spacing--20);
	border-block-end: 2px solid var(--wp--preset--color--vda-blue);
}

/* Zwei Bänder stossen hier aneinander, und jedes brachte seinen vollen
   Sektionsabstand mit: 115 Pixel unten am weissen, 96 oben am grauen,
   zusammen 212 Pixel Leerraum. Der Wechsel der Fläche zeigt den Schnitt
   schon von selbst, deshalb reicht die Hälfte. */
.vda-artikel-band {
	padding-block-end: var(--wp--preset--spacing--50);
}

.vda-verwandt-band {
	padding-block: var(--wp--preset--spacing--90);
}

/* Die Karten im hellgrauen Band bekommen einen weissen Grund, sonst
   verschwimmen Bild und Fläche ineinander. */
.vda-verwandt-band .vda-beitragskarte__bild {
	background: var(--wp--preset--color--white);
}

/* ---------------------------------------------------------------
   11. Schmalere Fenster
   --------------------------------------------------------------- */

@media (max-width: 1100px) {
	.vda-artikel {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--60);
	}

	.vda-artikel__rail {
		position: static;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
		align-content: start;
		gap: var(--wp--preset--spacing--30);
	}

}

@media (max-width: 900px) {
	.vda-beitragsfilter__zeile {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.vda-beitragsfilter .vda-feld--breit {
		grid-column: 1 / -1;
	}

	.vda-beitragsfilter__knopf {
		grid-column: 1 / -1;
	}

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

	.vda-aufmacher {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--30);
	}
}

@media (max-width: 600px) {
	.vda-beitragsfilter {
		padding: var(--wp--preset--spacing--20);
	}

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

	.vda-beitragsraster {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--50);
	}

	.vda-artikel__rail {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--20);
	}

	.vda-artikel__haupt {
		font-size: 18px;
	}

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

	.vda-nachbarn__seite--nach {
		text-align: start;
	}

	.vda-nachbarn__seite--nach .vda-nachbarn__label::before {
		content: "→ ";
	}

	.vda-nachbarn__seite--nach .vda-nachbarn__label::after {
		content: "";
	}

	.vda-beitragsarchiv__status {
		flex-direction: column;
		gap: 8px;
		align-items: flex-start;
	}
}

/* ---------------------------------------------------------------
   12. Nachträge
   Was aus dem Kernlayout kommt und hier anders gebraucht wird.
   --------------------------------------------------------------- */

/* Derselbe Stapelfehler wie unten am Artikel, nur oben: der farbige
   Seitenkopf endet mit seinem Innenabstand, und das Inhaltsband darunter
   legt seinen vollen Sektionsabstand von 115 Pixeln obendrauf. Der
   Farbwechsel zeigt den Schnitt schon, deshalb hier weniger. Gilt für
   jede Seite mit farbigem Kopf. */
.vda-page-hero + .is-style-band,
.vda-page-hero + .wp-block-group.is-style-band {
	padding-block-start: var(--wp--preset--spacing--60);
}

/* Der Kopf selbst braucht unten weniger Luft, seit der Anriss neben dem
   Titel steht statt darunter. */
.vda-hero-zeile {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 5vw, 5rem);
	align-items: end;
}

.vda-hero-zeile > * {
	margin-block: 0;
}

.vda-hero-zeile__text {
	max-width: 46ch;
	padding-block-end: 6px;
	color: var(--wp--preset--color--muted);
}

@media (max-width: 900px) {
	.vda-hero-zeile {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--20);
	}
}

/* Das eingespannte Layout von WordPress zentriert jedes Kind, das
   schmaler als das Band ist, mit !important. Im Seitenkopf soll aber
   alles an derselben linken Kante stehen. Deshalb liegt der Inhalt in
   einer Flussgruppe: sie allein wird zentriert, ihre Kinder nicht. */
.vda-page-hero__innen > * {
	margin-inline: 0;
}

/* Zwischenüberschrift mit Verweis rechts daneben. */
.vda-verwandt .vda-subheading {
	display: flex;
	flex-wrap: wrap;
	gap: 8px var(--wp--preset--spacing--30);
	align-items: baseline;
	justify-content: space-between;
}

.vda-verwandt .vda-subheading h2 {
	margin: 0;
}

.vda-verwandt .vda-subheading__link {
	margin: 0;
}

/* Das Aufmacherbild nimmt das ganze Band ein, der Text darunter
   bleibt in seiner Lesespalte. */
.vda-artikel__aufmacherbild {
	margin-block: 0 var(--wp--preset--spacing--70);
}

/* Das Aufmacherbild wird nie beschnitten. Welche Regel greift,
   entscheidet der Block anhand der tatsächlichen Bildbreite. */
.vda-aufmacherbild {
	margin: 0 0 var(--wp--preset--spacing--70);
}

.vda-aufmacherbild__motiv {
	display: block;
	width: 100%;
	height: auto;
	max-height: 686px;
	object-fit: contain;
	border-radius: var(--wp--custom--radius);
}

/* Zwei Fälle laufen nicht über die volle Bandbreite: kleine Motive,
   weil sie hochgerechnet unscharf werden, und Hochformate, weil sie in
   einer doppelt so breiten Fläche schwimmen würden. Beide stehen mittig
   auf einer ruhigen Fläche, die selbst am Satzspiegel fluchtet. */
.vda-aufmacherbild--gefasst {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius);
}

.vda-aufmacherbild--gefasst .vda-aufmacherbild__motiv {
	width: auto;
	max-width: 100%;
	max-height: 560px;
	object-fit: contain;
}

.vda-aufmacherbild figcaption {
	margin-block-start: 12px;
	max-width: 70ch;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--micro);
	line-height: 1.5;
}

.vda-artikel-band {
	padding-block-start: var(--wp--preset--spacing--70);
}

@media (max-width: 900px) {
	.vda-artikel__aufmacherbild {
		margin-block-end: var(--wp--preset--spacing--50);
	}
}

/* ---------------------------------------------------------------
   13. Schmale Schirme im Artikel
   --------------------------------------------------------------- */

@media (max-width: 600px) {
	/* Ein langer Titel bricht bei 32 Pixel in fünf Zeilen. Auf dem
	   Telefon eine Stufe kleiner, dann sind es drei. Die Größenklassen
	   von WordPress setzen !important, deshalb hier auch. */
	.vda-artikel-hero .wp-block-post-title {
		font-size: 27px !important;
		line-height: 1.16;
		overflow-wrap: anywhere;
	}
}

/* Knöpfe aus dem Beitragsinhalt liefen auf dem Telefon über den Rand,
   weil sie ihre Beschriftung nicht umbrechen. */
.vda-artikel__haupt .wp-block-button,
.vda-artikel__haupt .wp-block-buttons {
	max-width: 100%;
}

.vda-artikel__haupt .wp-block-button__link {
	max-width: 100%;
	white-space: normal;
	overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------
   14. Stellenangebote
   --------------------------------------------------------------- */

.vda-stellensuche__zeile {
	grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
}

.vda-stellenliste {
	display: flex;
	flex-direction: column;
}

.vda-stelle {
	position: relative;
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr) auto;
	gap: var(--wp--preset--spacing--30);
	align-items: center;
	padding-block: var(--wp--preset--spacing--30);
	border-block-end: 1px solid var(--wp--preset--color--line);
	transition: background-color var(--wp--custom--transition);
}

.vda-stelle:first-child {
	border-block-start: 1px solid var(--wp--preset--color--line);
}

.vda-stelle__logo img,
.vda-stelle__zeichen {
	display: block;
	width: 72px;
	height: 72px;
	object-fit: contain;
	background: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius-small);
}

.vda-stelle__titel {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.25;
}

.vda-stelle__titel a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.vda-stelle__titel a::after {
	position: absolute;
	inset: 0;
	content: "";
}

.vda-stelle:hover .vda-stelle__titel a,
.vda-stelle__titel a:focus-visible {
	color: var(--wp--preset--color--vda-blue-dark);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.vda-stelle__firma {
	margin: 4px 0 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.vda-stelle__marken {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 10px 0 0;
}

.vda-stelle__seite {
	text-align: end;
}

.vda-stelle__lohn {
	margin: 0 0 6px;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
}

.vda-stelle__pfeil {
	color: var(--wp--preset--color--vda-blue-dark);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	white-space: nowrap;
}

.vda-stelle__pfeil::after {
	content: " →";
}

.vda-stelle__daten {
	margin: 0;
}

.vda-stelle__daten dt {
	margin-block-start: 12px;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 750;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.vda-stelle__daten dt:first-child {
	margin-block-start: 0;
}

.vda-stelle__daten dd {
	margin: 3px 0 0;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--small);
}

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

.vda-stelle__kontakt li + li {
	margin-block-start: 8px;
}

.vda-stelle__kontakt a {
	color: var(--wp--preset--color--vda-blue-dark);
	font-size: var(--wp--preset--font-size--small);
	overflow-wrap: anywhere;
}

.vda-stelle__bewerben {
	margin-block-start: var(--wp--preset--spacing--40);
}

@media (max-width: 900px) {
	.vda-stellensuche__zeile {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.vda-stelle {
		grid-template-columns: 56px minmax(0, 1fr);
	}

	.vda-stelle__logo img,
	.vda-stelle__zeichen {
		width: 56px;
		height: 56px;
	}

	.vda-stelle__seite {
		grid-column: 2;
		text-align: start;
	}
}

/* ---------------------------------------------------------------
   15. Spendenknopf
   --------------------------------------------------------------- */

.vda-spende {
	max-width: 62ch;
	margin-block-start: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius);
}

.vda-spende__frage {
	margin: 0 0 14px;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
}

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

.vda-spende__betrag {
	min-width: 104px;
	padding-inline: var(--wp--preset--spacing--30);
	font-variant-numeric: tabular-nums;
}

.vda-spende__frei {
	min-height: 48px;
	padding-inline: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--vda-blue-dark);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--vda-blue);
	border-radius: var(--wp--custom--radius-small);
	cursor: pointer;
	transition: background-color var(--wp--custom--transition), color var(--wp--custom--transition);
}

.vda-spende__frei:hover,
.vda-spende__frei:focus-visible {
	color: var(--wp--preset--color--white);
	background: var(--wp--preset--color--vda-blue);
}

.vda-spende__hinweis {
	max-width: 54ch;
	margin: 16px 0 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--micro);
	line-height: 1.5;
}

/* ---------------------------------------------------------------
   16. Lesetext auf gewöhnlichen Seiten
   Die Seiten aus dem alten Baukasten sind reiner Fliesstext im
   1220 Pixel breiten Band. Ohne diese Regeln steht eine Überschrift
   über die volle Breite und darunter eine halb so breite Spalte.
   --------------------------------------------------------------- */

:where(.entry-content) > p:not([class*="has-"]),
:where(.entry-content) > ul:not([class*="has-"]),
:where(.entry-content) > ol:not([class*="has-"]) {
	max-width: 70ch;
}

/* Und die Spalte steht in der Mitte des Bandes.

   Die Breiten oben waren richtig, nur stand alles links: bei 1.280
   Bildpunkten Fensterbreite blieb rechts die halbe Seite leer, was
   nach einem Fehler aussah und nicht nach Absicht.

   Zentriert wird ueber einen gemeinsamen Versatz, nicht ueber
   `margin-inline: auto`. Mit auto wuerde sich jedes Element fuer sich
   mittig stellen - eine Ueberschrift ist auf 26 Zeichen begrenzt, ein
   Absatz auf 70, und die linke Kante saesse bei jedem woanders. Der
   Versatz rechnet dagegen mit derselben Spaltenbreite fuer alle, also
   bleiben die Kanten buendig.

   Bilder ohne ausdrueckliche Ausrichtung gehoeren in dieselbe Spalte,
   sonst steht ein kleines Bild allein am linken Rand, waehrend der
   Text daneben in der Mitte liegt. */
:where(.entry-content) > p:not([class*="has-"]),
:where(.entry-content) > ul:not([class*="has-"]),
:where(.entry-content) > ol:not([class*="has-"]),
:where(.entry-content) > h2:not([class*="has-"]),
:where(.entry-content) > h3:not([class*="has-"]),
:where(.entry-content) > h4:not([class*="has-"]),
:where(.entry-content) > figure.wp-block-image:not([class*="align"]),
:where(.entry-content) > .wp-block-quote:not([class*="align"]),
:where(.entry-content) > .wp-block-table:not([class*="align"]) {
	margin-inline-start: max( 0px, calc( ( 100% - 70ch ) / 2 ) );
}

:where(.entry-content) > figure.wp-block-image:not([class*="align"]) {
	max-width: 70ch;
}

:where(.entry-content) > figure.wp-block-image:not([class*="align"]) img {
	width: 100%;
	height: auto;
}

/* Auf schmalen Geraeten faellt der Versatz von selbst weg: dort ist
   die Spalte breiter als das Fenster, max() liefert dann 0. */

/* Auch Ueberschriften und Absaetze, die der Redaktion eine Farbe oder
   eine Groesse mitbekommen haben. Ohne sie stand die farbige
   Hauptueberschrift links, waehrend der Text darunter in der Mitte
   lag - der Bruch war deutlicher als der Gewinn. Die Breite muss
   dabei mitgesetzt werden, sonst schoebe der Versatz einen Kasten
   ohne Begrenzung ueber den rechten Rand hinaus. */
:where(.entry-content) > h2[class*="has-"]:not([class*="align"]),
:where(.entry-content) > h3[class*="has-"]:not([class*="align"]),
:where(.entry-content) > h4[class*="has-"]:not([class*="align"]),
:where(.entry-content) > p[class*="has-"]:not([class*="align"]) {
	max-width: 70ch;
	margin-inline-start: max( 0px, calc( ( 100% - 70ch ) / 2 ) );
}

/* Das erste Element bringt keinen Abstand nach oben mit. Zwischen dem
   Seitenkopf und der ersten Ueberschrift stand sonst eine leere
   Flaeche von fast zwei Fingerbreit. */
:where(.entry-content) > *:first-child {
	margin-block-start: 0;
}

/* Auf manchen Seiten steht die Ueberschrift allein in einem Band,
   waehrend der Text danach unmittelbar im Inhalt liegt. Dann stand
   die Ueberschrift links und der Text in der Mitte.

   Getroffen wird nur der Fall "Band mit genau einer Ueberschrift
   darin". Baender, die ein Raster oder mehrere Bloecke tragen,
   bleiben unberuehrt - dort gehoert die Ueberschrift ueber den Inhalt
   und nicht in die Lesespalte. */
:where(.entry-content) > .is-style-band:has( > h2:only-child ) > h2,
:where(.entry-content) > .is-style-band:has( > h3:only-child ) > h3 {
	max-width: 70ch;
	margin-inline: max( 0px, calc( ( 100% - 70ch ) / 2 ) ) 0;
}

:where(.entry-content) > h2:not([class*="has-"]) {
	max-width: 26ch;
	margin-block: 1.8em 0.5em;
	font-size: clamp(26px, 3vw, 34px);
	font-weight: 700;
	line-height: 1.14;
	letter-spacing: -0.012em;
	text-wrap: balance;
}

:where(.entry-content) > h3:not([class*="has-"]) {
	max-width: 34ch;
	margin-block: 1.6em 0.4em;
	font-size: clamp(21px, 2.2vw, 26px);
	font-weight: 650;
	line-height: 1.22;
}

:where(.entry-content) > h4:not([class*="has-"]) {
	max-width: 40ch;
	margin-block: 1.4em 0.35em;
	font-size: 19px;
	font-weight: 750;
	line-height: 1.35;
}

:where(.entry-content) > h2:first-child,
:where(.entry-content) > h3:first-child {
	margin-block-start: 0;
}

:where(.entry-content) > ul:not([class*="has-"]),
:where(.entry-content) > ol:not([class*="has-"]) {
	padding-inline-start: 1.4em;
}

:where(.entry-content) > ul li,
:where(.entry-content) > ol li {
	margin-block-end: 0.45em;
}

:where(.entry-content) > ul li::marker,
:where(.entry-content) > ol li::marker {
	color: var(--wp--preset--color--vda-blue);
}

/* Tabellen aus dem alten Baukasten laufen sonst über den Rand. */
.wp-block-table {
	overflow-x: auto;
}

.wp-block-table table {
	width: 100%;
	font-size: var(--wp--preset--font-size--small);
	border-collapse: collapse;
}

.wp-block-table th,
.wp-block-table td {
	padding: 10px 14px;
	text-align: start;
	border: 0;
	border-block-end: 1px solid var(--wp--preset--color--line);
}

.wp-block-table thead th {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 750;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border-block-end: 2px solid var(--wp--preset--color--vda-blue);
}

.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
	background: var(--wp--preset--color--surface);
}

.vda-programm td:first-child {
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}


/* ---------------------------------------------------------------
   17. Seite nicht gefunden
   --------------------------------------------------------------- */

.vda-404 {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: clamp(2rem, 6vw, 5rem);
	align-items: start;
}

.vda-404 h2 {
	margin-block: 0 var(--wp--preset--spacing--30);
	padding-block-end: var(--wp--preset--spacing--20);
	border-block-end: 2px solid var(--wp--preset--color--vda-blue);
}

.vda-404__suche .wp-block-search__inside-wrapper {
	max-width: 46ch;
}

/* Ohne das bleibt das Eingabefeld bei seiner Standardbreite von rund
   20 Zeichen und der Knopf klebt daneben. */
.vda-404__suche .wp-block-search__input {
	width: 100%;
	min-height: 48px;
	padding-inline: 14px;
}

.vda-404__suche .wp-block-search__button {
	min-height: 48px;
}

.vda-404__wege ul {
	margin: 0;
}

@media (max-width: 900px) {
	.vda-404 {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--60);
	}
}

/* ==========================================================================
   18 | Partner, Einzelansicht
   Nutzt das Zweispaltenraster der Beitragsansicht. Eigen ist nur das Logo,
   das mittig in seiner Karte sitzt und nicht wie ein Beitragsbild wirkt.
   ========================================================================== */

.vda-partner__logo {
	display: grid;
	place-items: center;
	padding-block: var(--wp--preset--spacing--40);
}

.vda-partner__logo img {
	max-width: 220px;
	height: auto;
	object-fit: contain;
}

.vda-partner__weg {
	margin-block-start: var(--wp--preset--spacing--50);
}

.vda-partner__text > :first-child {
	margin-block-start: 0;
}

/* ==========================================================================
   19 | Vereinsneuigkeit, Einzelansicht
   Die Bilder stehen als Galerie unter dem Text. Zwei Spalten ab 600px,
   darunter untereinander, damit auf dem Telefon nichts schrumpft.
   ========================================================================== */

.vda-nachricht__bilder {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	margin-block-start: var(--wp--preset--spacing--60);
}

@media (min-width: 600px) {
	.vda-nachricht__bilder {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.vda-nachricht__bild {
	margin: 0;
}

.vda-nachricht__bild img {
	width: 100%;
	height: auto;
	border-radius: var(--wp--custom--radius);
	display: block;
}

.vda-nachricht__bild figcaption {
	margin-block-start: 0.5rem;
	font-size: 0.875rem;
	color: var(--wp--preset--color--muted);
}

.vda-nachricht__verein {
	font-weight: 600;
	margin-block-end: 0.35rem;
}

/* ==========================================================================
   20 | Präsidium
   Personenkarten mit Bild links, Text rechts. Auf dem Telefon
   untereinander. Die Langtexte stecken in einem details-Element, damit
   die Seite nicht auf zehn Bildschirmlängen anwächst.
   ========================================================================== */

.vda-praesidium {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	margin-block-start: var(--wp--preset--spacing--60);
}

.vda-person {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--paper-blue);
	border-radius: var(--wp--custom--radius);
}

@media (min-width: 640px) {
	.vda-person {
		grid-template-columns: 180px minmax(0, 1fr);
		align-items: start;
	}
}

.vda-person__bild img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--wp--custom--radius);
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* Vier der zehn Posten sind unbesetzt und tragen alle dasselbe graue
   Verbandslogo als Platzhalter. In voller Grösse nähme das genauso viel
   Raum ein wie eine Person mit Foto und Biografie. */
@media (min-width: 640px) {
	.vda-person--offen {
		grid-template-columns: 96px minmax(0, 1fr);
		padding-block: var(--wp--preset--spacing--40);
	}
}

.vda-person--offen .vda-person__bild img {
	filter: grayscale(1);
	opacity: 0.5;
	aspect-ratio: 1 / 1;
}

.vda-person__posten {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--vda-blue);
	margin: 0 0 0.25rem;
}

.vda-person__name {
	margin: 0 0 0.75rem;
	font-size: clamp(1.25rem, 2.2vw, 1.5rem);
	line-height: 1.2;
}

.vda-person__frei {
	margin: 0 0 0.75rem;
	font-style: italic;
	color: var(--wp--preset--color--muted);
}

.vda-person__kontakt p {
	margin: 0 0 0.35rem;
	font-size: 0.9375rem;
	line-height: 1.55;
}

.vda-person__mehr {
	margin-block-start: var(--wp--preset--spacing--40);
	border-block-start: 1px solid rgba(18, 105, 176, 0.18);
	padding-block-start: 0.75rem;
}

.vda-person__mehr > summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--wp--preset--color--vda-blue);
	list-style: none;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.vda-person__mehr > summary::-webkit-details-marker {
	display: none;
}

.vda-person__mehr > summary::before {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	border-inline-end: 2px solid currentColor;
	border-block-end: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.15s ease;
	flex: none;
}

.vda-person__mehr[open] > summary::before {
	transform: rotate(-135deg);
}

.vda-person__mehr h4 {
	margin: var(--wp--preset--spacing--40) 0 0.35rem;
	font-size: 0.9375rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--muted);
}

.vda-person__mehr p {
	margin: 0 0 0.5rem;
	font-size: 0.9375rem;
	line-height: 1.6;
}

/* Zusätzliches Logo beim Termin: drei Termine tragen eines. */
.vda-termin-logo {
	margin-block: var(--wp--preset--spacing--50);
}

.vda-termin-logo img {
	max-width: 240px;
	height: auto;
	display: block;
}

/* ==========================================================================
   21 | Anlagen zum Herunterladen
   Vereine hängen PDFs an Neuigkeiten und Termine. Die Liste zeigt Name,
   Format und Umfang, damit klar ist, was ein Klick auslöst.
   ========================================================================== */

.vda-anlagen {
	margin-block-start: var(--wp--preset--spacing--60);
	padding-block-start: var(--wp--preset--spacing--40);
	border-block-start: 1px solid rgba(18, 105, 176, 0.18);
}

.vda-anlagen__titel {
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--muted);
	margin: 0 0 0.75rem;
}

.vda-anlagen__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.4rem;
}

.vda-anlage {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	padding: 0.6rem 0.75rem;
	background: var(--wp--preset--color--paper-blue);
	border-radius: var(--wp--custom--radius);
	text-decoration: none;
}

.vda-anlage:hover .vda-anlage__name {
	text-decoration: underline;
}

.vda-anlage__name {
	flex: 1 1 auto;
	min-width: 0;
	font-weight: 600;
	overflow-wrap: anywhere;
}

.vda-anlage__meta {
	flex: none;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--muted);
}

/* ==========================================================================
   22 | In den Kalender eintragen
   Zwei Wege: die ICS-Datei für jedes Kalenderprogramm, der Verweis zu
   Google für alle, die ihren Kalender im Browser führen.
   ========================================================================== */

.vda-kalender {
	margin-block-start: var(--wp--preset--spacing--60);
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--paper-blue);
	border-radius: var(--wp--custom--radius);
}

.vda-kalender__titel {
	display: block;
	font-weight: 700;
	margin-block-end: 0.75rem;
}

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

.vda-kalender__knopf {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 44px;
	padding: 0 var(--wp--preset--spacing--30);
	background: #fff;
	border: 1px solid var(--wp--preset--color--vda-blue);
	border-radius: var(--wp--custom--radius);
	color: var(--wp--preset--color--vda-blue);
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
}

.vda-kalender__knopf:hover {
	background: var(--wp--preset--color--vda-blue);
	color: #fff;
}

.vda-kalender__marke {
	flex: none;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	padding: 0.15rem 0.35rem;
	border-radius: 3px;
	background: var(--wp--preset--color--vda-blue);
	color: #fff;
}

.vda-kalender__knopf:hover .vda-kalender__marke {
	background: #fff;
	color: var(--wp--preset--color--vda-blue);
}

.vda-kalender__hinweis {
	display: block;
	margin-block-start: 0.6rem;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--muted);
}