/* ===============================================================
   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
   --------------------------------------------------------------- */

/* Die Leiste ist ein Werkzeug, kein Vorspann. Wer auf die Seite kommt,
   will die Beitraege sehen; der Filter belegte vorher den ganzen ersten
   Bildschirm. Deshalb flach, ohne eigenen Kasten, und alles ausser den
   drei wichtigsten Feldern zugeklappt. */
.vda-beitragsfilter {
	margin-block-end: var(--wp--preset--spacing--40);
	padding-block-end: var(--wp--preset--spacing--20);
	border-block-end: 1px solid var(--wp--preset--color--line);
}

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

/* Der Ausklapper: eine Zeile, die nach sich selbst aussieht und nicht
   nach einem weiteren Kasten. */
.vda-beitragsfilter__mehr {
	margin-block-start: var(--wp--preset--spacing--20);
}

.vda-beitragsfilter__schalter {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding-inline-end: 4px;
	color: var(--wp--preset--color--vda-blue-dark);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 650;
	cursor: pointer;
	list-style: none;
}

.vda-beitragsfilter__schalter::-webkit-details-marker {
	display: none;
}

/* Ein eigener Pfeil, damit er sich beim Aufklappen dreht. */
.vda-beitragsfilter__schalter::before {
	content: "";
	width: 9px;
	height: 9px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform var(--wp--custom--transition);
}

.vda-beitragsfilter__mehr[open] .vda-beitragsfilter__schalter::before {
	transform: rotate(-135deg) translate(-2px, -2px);
}

.vda-beitragsfilter__schalter:hover {
	color: var(--wp--preset--color--vda-blue);
}

/* Zeigt an, dass hinter dem zugeklappten Bereich etwas gesetzt ist. */
.vda-beitragsfilter__anzahl {
	display: inline-grid;
	place-items: center;
	min-width: 20px;
	height: 20px;
	padding-inline: 5px;
	border-radius: 999px;
	background: var(--wp--preset--color--vda-blue);
	color: var(--wp--preset--color--white);
	font-size: 12px;
	font-weight: 700;
}

.vda-beitragsfilter__ausklapp {
	display: grid;
	gap: var(--wp--preset--spacing--20);
	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 .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.
   --------------------------------------------------------------- */

/* Die Spaltenbreite als fester Wert, nicht als ch.

   `ch` misst an der Schriftgroesse des Elements, in dem es steht. Fuer
   einen Absatz sind 70ch rund 595 Bildpunkte, fuer eine Ueberschrift
   in 34 Pixeln aber fast 1.200 - die Begrenzung lief dort ins Leere.
   Alles, was sich die Spalte teilt, rechnet deshalb mit demselben
   Wert. Er entspricht 70 Zeichen der Grundschrift. */
:where(.entry-content) {
	/* Eine Stufe fuer alle Titel in Kacheln: Vorteile, Schritte,
	   Merkspalte, Kontaktfelder. Vorher trug jede Kachelart ihre
	   eigene Groesse (32, 22, 17, 15) fuer dieselbe Ebene. */
	--vda-kacheltitel: clamp(19px, 1.5vw, 23px);

	/* 680 statt 595: die Seiten liegen in einem Band von 1.220
	   Bildpunkten, eine schmalere Spalte liesse links und rechts je
	   300 leer. 680 sind rund 78 Zeichen und damit noch gut zu lesen. */
	--vda-lesespalte: 680px;

	/* Die Lesespalte stand mittig im Inhaltsrahmen: der Text fing 270
	   Bildpunkte weiter rechts an als Logo, Seitentitel und
	   Brotkrumen, die alle an derselben Kante sitzen. Auf einer Seite
	   von 1.220 Bildpunkten Breite sah das aus wie ein verrutschter
	   Block. Jetzt faengt der Text dort an wie alles andere.

	   Wer die Spalte wieder mittig will, setzt hier
	   max( 0px, calc( ( 100% - var(--vda-lesespalte) ) / 2 ) ). */
	--vda-versatz: 0px;
}

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

/* 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"]),
/* Ein Knopf gehoert unter den Text, auf den er sich bezieht, nicht an
   den Rand daneben. Er traegt keine Breitenbegrenzung, deshalb reicht
   der Versatz. */
:where(.entry-content) > .wp-block-buttons:not([class*="align"]),
/* Aufzaehlungen mit einem eigenen Stil ("is-style-list-ring") trugen
   die Ausnahme fuer has-Klassen nicht und blieben deshalb links
   liegen, waehrend der Text daneben in der Mitte stand. */
:where(.entry-content) > ul[class*="is-style-"]:not([class*="align"]),
:where(.entry-content) > ol[class*="is-style-"]:not([class*="align"]) {
	margin-inline-start: var(--vda-versatz);
}

/* Eine Ueberschrift ueber etwas, das die ganze Breite nutzt, darf nicht
   in der Lesespalte haengen bleiben: sie gehoert zu dem, was darunter
   steht, und wirkt sonst wie ein abgebrochener Absatz daneben. */
:where(.entry-content) > h2:not([class*="has-"]):has(+ .vda-bezirksraster),
:where(.entry-content) > h2:not([class*="has-"]):has(+ .vda-referate),
:where(.entry-content) > h2:not([class*="has-"]):has(+ .wp-block-columns) {
	max-width: none;
}

:where(.entry-content) > ul[class*="is-style-"]:not([class*="align"]),
:where(.entry-content) > ol[class*="is-style-"]:not([class*="align"]) {
	max-width: var(--vda-lesespalte);
}

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

: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: var(--vda-lesespalte);
	margin-inline-start: var(--vda-versatz);
}

/* 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: var(--vda-lesespalte);
	margin-inline: var(--vda-versatz) 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;
}

/* Eine Kachel je Datei: links die Art, daneben Titel, Beschreibung und
   Umfang. Ein blosser Dateiname sagt nicht, ob das die gueltige Satzung
   ist oder ein Entwurf - deshalb steht der Satz des Vereins mit da. */
.vda-anlagen__liste {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
	gap: 0.6rem;
}

.vda-anlage {
	display: grid;
	grid-template-columns: 46px minmax(0, 1fr) 16px;
	align-items: start;
	gap: 0.75rem;
	padding: 0.85rem 0.9rem;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius);
	text-decoration: none;
	transition: border-color var(--wp--custom--transition), box-shadow var(--wp--custom--transition);
}

.vda-anlage:hover,
.vda-anlage:focus-visible {
	border-color: var(--wp--preset--color--vda-blue);
	box-shadow: var(--wp--preset--shadow--soft);
}

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

/* Das Kuerzel der Dateiart, gross genug zum Erkennen. */
.vda-anlage__art {
	display: grid;
	place-items: center;
	min-height: 46px;
	padding: 0.35rem 0.2rem;
	background: var(--wp--preset--color--paper-blue);
	border-radius: var(--wp--custom--radius-small);
	color: var(--wp--preset--color--vda-blue-dark);
	font-size: 0.6875rem;
	font-weight: 750;
	letter-spacing: 0.05em;
}

.vda-anlage__text {
	display: grid;
	gap: 0.15rem;
	min-width: 0;
}

.vda-anlage__name {
	font-weight: 650;
	line-height: 1.35;
	color: var(--wp--preset--color--ink);
	overflow-wrap: anywhere;
}

/* Die Gewichtung ausdruecklich setzen: im Vereinsprofil erben Spannen
   in Abschnitten sonst 700 und ueberstrahlen den Titel. */
.vda-anlage__beschreibung {
	color: var(--wp--preset--color--muted);
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.45;
}

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

/* Ein Pfeil nach unten sagt „das laedt herunter", nicht „das oeffnet
   eine Seite". */
.vda-anlage__pfeil {
	align-self: center;
	width: 16px;
	height: 16px;
	background: currentColor;
	color: var(--wp--preset--color--vda-blue);
	mask: var(--vda-pfeil-runter) center / 16px 16px no-repeat;
	-webkit-mask: var(--vda-pfeil-runter) center / 16px 16px no-repeat;
}

.vda-anlagen {
	--vda-pfeil-runter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M11 3h2v10.2l3.6-3.6 1.4 1.4-6 6-6-6 1.4-1.4L11 13.2z'/%3E%3Cpath d='M4 19h16v2H4z'/%3E%3C/svg%3E");
}

/* ==========================================================================
   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);
}


/* ------------------------------------------------------------------
   Die Magazinseite

   Vorher lief die ganze Seite als eine Spalte von 595 Bildpunkten
   durch die Mitte eines 1.220 Bildpunkte breiten Bandes: links und
   rechts je 300 Bildpunkte leer, und Einleitung, Anschrift und
   Rechtshinweise sahen alle gleich aus. Dazu ein Band um die
   Ueberschrift, das 395 Bildpunkte hoch war und fast nur Luft enthielt.

   Jetzt tragen drei Satzbilder die Seite: Titel neben Anriss,
   Titelbild neben Datei, Heftbild neben Redaktion. Die Spalten sitzen
   an der Bandkante, nicht in der Mitte.
   ------------------------------------------------------------------ */

.vda-magazin-kopf,
.vda-magazin-mediadaten,
.vda-magazin-redaktion__satz {
	align-items: start;
	gap: clamp( 1.5rem, 4vw, 4rem );
}

.vda-magazin-kopf {
	margin-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
}

/* Der Titel traegt die Seite, deshalb enger gesetzt und ohne den
   Ausgleich, der ihn sonst in drei kurze Zeilen bricht. */
.vda-magazin-kopf h2 {
	max-width: none;
	margin-block: 0;
	font-size: clamp( 30px, 4.2vw, 52px );
	line-height: 1.05;
	letter-spacing: -0.02em;
	text-wrap: pretty;
}

.vda-magazin-kopf p {
	max-width: 60ch;
	margin-block-start: 0;
}

.vda-magazin-kopf p + p {
	margin-block-start: 1em;
}

/* Der Weg ins Archiv steht unter dem Titel, wo die linke Spalte
   ohnehin frei laeuft. Er traegt die Hauptabsicht der Seite und darf
   dafuer groesser ausfallen als ein gewoehnlicher Knopf. */
.vda-magazin-kopf .wp-block-buttons {
	margin-block-start: clamp( 1.75rem, 4vw, 3rem );
}

.vda-magazin-kopf .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	min-height: 60px;
	padding: 0.9em 1.6em;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.25;
}

/* Mediadaten: das Titelbild klein daneben, nicht als Blickfang.

   Davor eine Linie, sonst laeuft der Kopfbereich ohne Schnitt in die
   Anzeigenunterlagen ueber - zwei Sachen, die nichts miteinander zu
   tun haben. */
.vda-magazin-mediadaten {
	margin-block-start: var(--wp--preset--spacing--50);
	padding-block-start: var(--wp--preset--spacing--40);
	border-block-start: 1px solid var(--wp--preset--color--line);
}

.vda-magazin-mediadaten figure {
	margin: 0;
}

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

.vda-magazin-mediadaten p {
	max-width: none;
}

/* Die Redaktionsangaben stehen fuer sich, abgesetzt durch Flaeche
   statt durch einen weiteren Rahmen. */
.vda-magazin-redaktion {
	margin-block-start: var(--wp--preset--spacing--50);
	padding-block: var(--wp--preset--spacing--40);
	border-block-start: 1px solid var(--wp--preset--color--line);
}

.vda-magazin-redaktion__satz figure {
	margin: 0;
}

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

.vda-magazin-redaktion p {
	/* Die Spalte begrenzt die Zeile schon, eine zweite Grenze liesse
	   rechts nur unnoetig Platz stehen. */
	max-width: none;
	font-size: var(--wp--preset--font-size--small);
}

/* Anschrift und Redaktionsschluss zuerst, danach die Hinweise
   leiser. Die beiden ersten Absaetze tragen ein <strong>. */
.vda-magazin-redaktion p:nth-of-type(n+4) {
	color: var(--wp--preset--color--muted);
}

@media (max-width: 781px) {
	.vda-magazin-kopf,
	.vda-magazin-mediadaten,
	.vda-magazin-redaktion__satz {
		gap: 1.25rem;
	}

	.vda-magazin-redaktion__satz figure {
		max-width: 260px;
	}
}


/* ------------------------------------------------------------------
   Verzeichnis der Referate

   Die Seite war ein Fliesstext, in dem die Wege zu fuenfzehn Referaten
   als "hier" und "mehr" mitten in den Absaetzen standen.

   Der erste Versuch zog dazu einen Satz aus jeder Seite. Das las sich
   wie zufaellig herausgegriffen ("SEWOBE Idealer Weise pflegt jeder
   Verein seine Mitgliederdaten"), weil es genau das war. Ein
   Verzeichnis braucht keine halben Saetze: Name, wer es fuehrt, wie
   man hinschreibt. Der Rest steht auf der Seite dahinter.
   ------------------------------------------------------------------ */

:where(.entry-content) > ul.vda-referate {
	max-width: none;
	margin-inline-start: 0;
	/* Der Einzug der Aufzaehlungszeichen kommt von einer allgemeinen
	   Listenregel weiter unten. Hier traegt die Liste keine Zeichen,
	   und der Einzug liesse links einen grauen Streifen der
	   Gitterfarbe stehen. */
	padding-inline: 0;
}

.vda-referate {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 1px;
	margin-block: var(--wp--preset--spacing--40);
	padding: 0;
	list-style: none;
	/* Die Fugen zwischen den Eintraegen sind die Linien selbst: ein
	   Gitter aus einem Pixel, gefuellt von der Flaechenfarbe. */
	background: var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius-small);
	overflow: hidden;
	/* Ist die letzte Reihe nicht voll, bliebe die Flaeche dahinter als
	   grauer Rest stehen. Ein Aussenrahmen in derselben Farbe faengt
	   das nicht ab, er macht es sichtbarer. */
	outline: 1px solid var(--wp--preset--color--line);
	outline-offset: -1px;
}

/* Steht ein Verzeichnis auf der Seite, faengt auch der Text davor an
   der linken Kante an. Sonst steht die Einleitung in der Mitte und
   das Verzeichnis darunter am Rand - zwei Anfaenge auf einer Seite. */
:where(.entry-content):has( > .vda-referate ) > p,
:where(.entry-content):has( > .vda-referate ) > h2,
:where(.entry-content):has( > .vda-referate ) > h3 {
	margin-inline-start: 0;
}

.vda-referat {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--white);
	transition: background-color var(--wp--custom--transition);
}

.vda-referat:hover {
	background: var(--wp--preset--color--paper-blue);
}

/* Der ganze Kopf ist der Weg zur Seite, nicht nur das Wort. */
.vda-referat__weg {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	color: var(--wp--preset--color--vda-blue-dark);
	text-decoration: none;
}

.vda-referat__titel {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.vda-referat__weg:hover .vda-referat__titel,
.vda-referat__weg:focus-visible .vda-referat__titel {
	text-decoration: underline;
}

.vda-referat__pfeil {
	flex: none;
	color: var(--wp--preset--color--vda-blue);
	transition: transform var(--wp--custom--transition);
}

.vda-referat:hover .vda-referat__pfeil {
	transform: translateX(3px);
}

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

/* Die Beschreibungen sind unterschiedlich lang, von einem Satz bis zu
   einer halben Seite. Im Verzeichnis stehen davon vier Zeilen; wer
   mehr wissen will, geht auf die Seite des Referates. */
.vda-referat__text {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	overflow: hidden;
	margin: 4px 0 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
}

/* Die Anschrift steht unten, damit die Eintraege trotz fehlender
   Namen auf einer Linie enden. */
.vda-referat__mail {
	margin: auto 0 0;
	padding-block-start: 8px;
	font-size: var(--wp--preset--font-size--micro);
	overflow-wrap: anywhere;
}

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

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


/* ------------------------------------------------------------------
   Die Anschrift auf einer Referatsseite

   Sie stand als gewoehnlicher Absatz zwischen den uebrigen, nur mit
   Zeilenumbruechen darin: Name, Strasse, Ort, Telefon, Anschrift
   hintereinander weg. Wer den Ansprechpartner suchte, musste ihn im
   Fliesstext finden.
   ------------------------------------------------------------------ */

/* Ein Hinweis neben dem Text, ohne zweiten Kasten daneben: nur eine
   Linie oben und Luft, damit er sich von der Karte darueber loest. */
.vda-hinweiskasten {
	margin-block-start: var(--wp--preset--spacing--50);
	padding-block-start: var(--wp--preset--spacing--40);
	border-block-start: 1px solid var(--wp--preset--color--line);
}

.vda-hinweiskasten :is(h2, h3) {
	margin-block: 0 var(--wp--preset--spacing--20);
}

.vda-kontaktkarte {
	margin-block: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--surface);
	border-inline-start: 3px solid var(--wp--preset--color--vda-blue);
	border-radius: 0 var(--wp--custom--radius-small) var(--wp--custom--radius-small) 0;
}

/* Die Beschriftung ist keine Ueberschrift der Seite, sondern die
   Aufschrift der Karte. */
.vda-kontaktkarte :is(h2, h3, h4) {
	max-width: none;
	margin: 0 0 8px;
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 750;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.vda-kontaktkarte p {
	max-width: none;
	margin: 0;
	line-height: 1.7;
}

/* Der Name steht in der ersten Zeile und traegt ein strong. */
.vda-kontaktkarte p strong:first-child {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
}


/* ------------------------------------------------------------------
   Inhaltsseiten mit Spalte am Rand

   Die Seiten liegen in einem Band von 1.220 Bildpunkten, der Lesetext
   braucht aber nur rund 680. Bisher stand er mittig, und links wie
   rechts blieben je 270 leer - ein Blog-Satz auf einer Seite, die
   dafuer zu breit ist.

   Was daneben stehen kann - die Anschrift des Referats, Dateien zum
   Herunterladen - steht in einem Kasten am rechten Rand, und der Text
   laeuft daran vorbei.

   Ein Raster ginge nicht: dort bekommt jedes Element seine eigene
   Zeile, und eine hohe Karte in Zeile eins riss eine Luecke in den
   Text daneben. Und zwei getrennte Floats stapelten sich in einer
   Reihenfolge, die sich nicht steuern liess - deshalb ein Kasten.
   ------------------------------------------------------------------ */

:is(.vda-randspalte, .is-style-side-column) {
	margin-block-end: var(--wp--preset--spacing--30);
}

@media (min-width: 1000px) {

	.entry-content:has( > :is(.vda-randspalte, .is-style-side-column) ) > :is(.vda-randspalte, .is-style-side-column) {
		float: right;
		width: 330px;
		max-width: none;
		margin-inline: clamp( 2rem, 4vw, 4rem ) 0;
		margin-block-start: 0;
	}

	.entry-content:has( > :is(.vda-randspalte, .is-style-side-column) ) > * {
		margin-inline-start: 0;
		max-width: none;
	}

	.entry-content:has( > :is(.vda-randspalte, .is-style-side-column) ) > :is(p, ul, ol, h2, h3, h4) {
		max-width: 74ch;
	}

	/* Ein Bild faengt an derselben Kante an wie der Text daneben.
	   Zentriert stand es mitten in der Hauptspalte und schob sich
	   optisch nach rechts, waehrend jede Zeile links begann. */
	.entry-content:has( > :is(.vda-randspalte, .is-style-side-column) ) > figure.wp-block-image:not([class*="align"]) {
		max-width: 74ch;
		margin-inline: 0;
	}

	.entry-content:has( > :is(.vda-randspalte, .is-style-side-column) ) > figure.wp-block-image:not([class*="align"]) img {
		width: auto;
		max-width: 100%;
		height: auto;
	}
}

/* ------------------------------------------------------------------
   Die Anschrift auf einer Referatsseite

   Sie stand als gewoehnlicher Absatz zwischen den uebrigen, nur mit
   Zeilenumbruechen darin: Name, Strasse, Ort, Telefon, Anschrift
   hintereinander weg. Wer den Ansprechpartner suchte, musste ihn im
   Fliesstext finden.
   ------------------------------------------------------------------ */

/* Die Karte steht in derselben Spalte wie der Text darunter. Ueber
   die volle Breite gezogen waere sie ein zweiter Anfang auf der
   Seite. */
:where(.entry-content) > .vda-kontaktkarte {
	max-width: var(--vda-lesespalte);
	margin-inline-start: var(--vda-versatz);
}

.vda-kontaktkarte {
	margin-block: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--surface);
	border-inline-start: 3px solid var(--wp--preset--color--vda-blue);
	border-radius: 0 var(--wp--custom--radius-small) var(--wp--custom--radius-small) 0;
}

/* Die Beschriftung ist keine Ueberschrift der Seite, sondern die
   Aufschrift der Karte. */
.vda-kontaktkarte :is(h2, h3, h4) {
	max-width: none;
	margin: 0 0 8px;
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 750;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.vda-kontaktkarte p {
	max-width: none;
	margin: 0;
	line-height: 1.7;
}

/* Der Name steht in der ersten Zeile und traegt ein strong. */
.vda-kontaktkarte p strong:first-child {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
}


/* ------------------------------------------------------------------
   Inhaltsseiten mit Seitenspalte

   Die Seiten liegen in einem Band von 1.220 Bildpunkten, der Lesetext
   braucht aber nur rund 600. Bisher stand er mittig, und links wie
   rechts blieben 300 Bildpunkte leer - ein Blog-Satz auf einer Seite,
   die dafuer zu breit ist.

   Wo es etwas gibt, das daneben stehen kann - die Anschrift des
   Referats, Dateien zum Herunterladen - stellt es sich an den rechten
   Rand, und der Text laeuft daran vorbei.

   Mit einem Raster ginge das nicht: dort bekommt jedes Element seine
   eigene Zeile, und eine hohe Karte in Zeile eins reisst eine Luecke
   in den Text daneben. Ein umflossenes Element kennt dieses Problem
   nicht.
   ------------------------------------------------------------------ */

@media (min-width: 1000px) {

	/* Das Raster unter dem Text ist ausgenommen: es traegt die ganze
	   Breite und darf nicht in die schmale Spalte gezogen werden. */
	.entry-content:has( > .vda-kontaktkarte ) > .vda-kontaktkarte,
	.entry-content:has( > .vda-downloadliste ) > .vda-downloadliste:not(.vda-downloadliste--raster) {
		float: right;
		clear: right;
		width: 330px;
		max-width: none;
		margin-inline: clamp( 2rem, 4vw, 4rem ) 0;
	}

	/* Der Text nimmt die ganze Breite ein und laeuft an der Spalte
	   vorbei. Die Zeilenlaenge begrenzt er selbst. */
	.entry-content:has( > .vda-kontaktkarte ) > *,
	.entry-content:has( > .vda-downloadliste ) > * {
		margin-inline-start: 0;
		max-width: none;
	}

	.entry-content:has( > .vda-kontaktkarte ) > :is(p, ul, ol, h2, h3, h4),
	.entry-content:has( > .vda-downloadliste ) > :is(p, ul, ol, h2, h3, h4) {
		max-width: 74ch;
	}

	/* Die Anschrift steht oben, ohne Abstand darueber. */
	:where(.entry-content) > .vda-kontaktkarte {
		margin-block-start: 0;
	}
}


/* ------------------------------------------------------------------
   Die Dateien einer Seite

   Sie standen einzeln im Text, jede an der Stelle, an der die
   Redaktion sie eingefuegt hat. Auf dem Telefon lagen dazwischen
   Luecken von 444 und 327 Bildpunkten. Jetzt stehen sie beieinander,
   unter einer Ueberschrift, die sagt, worum es geht.
   ------------------------------------------------------------------ */

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

.vda-downloadliste__titel {
	max-width: none;
	margin: 0 0 12px;
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 750;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.vda-downloadliste .vda-download {
	margin-block: 0 8px;
}

.vda-downloadliste .vda-download:last-child {
	margin-block-end: 0;
}



/* ------------------------------------------------------------------
   Arbeitskreise und ueberregionale Vereine

   Zwoelf Kreise standen als durchgehender Fliesstext untereinander:
   Name, Beschreibung, Kontakt, Logo - und dann wieder von vorn, ohne
   dass etwas den einen vom naechsten trennt. Die Seite war fast
   10.000 Bildpunkte hoch, und wer einen bestimmten Kreis suchte, las
   sich durch alle.

   Jeder Kreis ist jetzt eine Gruppe. Gebaut aus gewoehnlichen
   Bloecken, damit die Redaktion sie im Editor bearbeiten kann.
   ------------------------------------------------------------------ */

/* Steht ein gegliederter Abschnitt auf der Seite, faengt auch der
   Text davor an der linken Kante an - sonst hat die Seite zwei
   Anfaenge. */
.entry-content:has( > .vda-arbeitskreis ) > :is(p, h2, h3, ul, ol) {
	margin-inline-start: 0;
	max-width: 74ch;
}

.entry-content:has( > .vda-arbeitskreis ) > ul.vda-sprungliste {
	max-width: none;
}

:where(.entry-content) > .vda-arbeitskreis {
	max-width: none;
	margin-inline-start: 0;
	margin-block: var(--wp--preset--spacing--30);
	padding-block-start: var(--wp--preset--spacing--30);
	border-block-start: 1px solid var(--wp--preset--color--line);
}

.vda-arbeitskreis > h3 {
	max-width: none;
	margin-block: 0 10px;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--vda-blue-dark);
}

.vda-arbeitskreis > p {
	max-width: 64ch;
	margin-block: 0 0.8em;
}

/* Drei Teile nebeneinander: Logo, Text, Anschrift.

   Vorher standen Text und Anschrift untereinander in einer schmalen
   Spalte, und rechts blieben rund 400 Bildpunkte ungenutzt. Jetzt
   bekommt jeder Teil eine eigene Spalte, das Logo an fester Stelle
   ganz links - so steht bei jedem Kreis dasselbe an derselben Stelle.

   Die Spalten sind benannt, damit dieselben Zuweisungen auch dann
   noch stimmen, wenn ein Kreis kein Logo oder keine Anschrift hat:
   dann faellt die Spalte weg, und der Rest rueckt nach. */
@media (min-width: 800px) {
	.vda-arbeitskreis {
		display: grid;
		grid-template-columns: [logo] 150px [text] minmax(0, 1fr) [ende];
		column-gap: var(--wp--preset--spacing--40);
		row-gap: 0;
		align-items: start;
	}

	.vda-arbeitskreis > * {
		grid-column: text;
	}

	.vda-arbeitskreis > h3 {
		grid-column: text / ende;
	}

	.vda-arbeitskreis > figure.wp-block-image {
		grid-column: logo;
		grid-row: 1 / span 30;
		margin: 0;
	}

	/* Drei der zwoelf Kreise haben kein Logo. Die Spalte bleibt bei
	   ihnen trotzdem stehen: stuenden sie weiter links, saehe die
	   Seite aus, als sei sie verrutscht. Alle Ueberschriften fangen
	   an derselben Kante an. */
}

/* Erst ab dieser Breite bleibt neben dem Text genug Platz, dass die
   Anschrift daneben noch lesbar ist statt in Einzelwoerter zu
   brechen. Darunter steht sie weiter unter dem Text. */
@media (min-width: 1100px) {
	.vda-arbeitskreis:has( > .vda-kontaktkarte) {
		grid-template-columns: [logo] 150px [text] minmax(0, 1fr) [kontakt] minmax(260px, 0.5fr) [ende];
	}

	.vda-arbeitskreis:has( > .vda-kontaktkarte) > p {
		max-width: none;
	}

	/* Ein Kreis hat keine Beschreibung, nur eine Anschrift. Stuende
	   die dann rechts, bliebe daneben eine leere Spalte stehen und der
	   Eintrag saehe aus, als fehle etwas. Sie rueckt nach links. */
	.vda-arbeitskreis:not(:has( > p)) {
		grid-template-columns: [logo] 150px [text] minmax(0, 1fr) [ende];
	}

	.vda-arbeitskreis:not(:has( > p)) > .vda-kontaktkarte {
		grid-column: text;
		grid-row: auto;
		max-width: 420px;
	}

	.vda-arbeitskreis > .vda-kontaktkarte {
		grid-column: kontakt;
		grid-row: 2 / span 30;
		max-width: none;
		margin-block: 0;
	}
}

.vda-arbeitskreis > figure.wp-block-image {
	max-width: 150px;
	margin-block: 0 var(--wp--preset--spacing--20);
}

.vda-arbeitskreis > figure.wp-block-image img {
	width: 100%;
	height: auto;
}

/* Die Sprungliste: zwoelf Abschnitte auf einer Seite finden sich
   sonst nur durch Blaettern. */
:where(.entry-content) > ul.vda-sprungliste {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	max-width: none;
	margin-block: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	margin-inline-start: 0;
	padding-inline: 0;
	list-style: none;
}

.vda-sprungliste li {
	margin: 0;
}

.vda-sprungliste a {
	display: inline-flex;
	align-items: center;
	min-height: 38px;
	padding: 4px 14px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--vda-blue-dark);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 650;
	text-decoration: none;
	transition: background-color var(--wp--custom--transition), border-color var(--wp--custom--transition);
}

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

/* Beim Sprung nicht unter dem Kopf verschwinden. */
.vda-arbeitskreis h3[id] {
	scroll-margin-top: 100px;
}

/* Die Anschrift des Kreises: kompakter als die des Referats, es sind
   zwoelf davon auf einer Seite. */
.vda-arbeitskreis .vda-kontaktkarte {
	max-width: 68ch;
	margin-block: var(--wp--preset--spacing--20) 0;
	padding: var(--wp--preset--spacing--20);
}

.vda-arbeitskreis .vda-kontaktkarte h4 {
	max-width: none;
	margin: 0 0 6px;
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 750;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.vda-arbeitskreis .vda-kontaktkarte p {
	max-width: none;
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
	overflow-wrap: anywhere;
}

@media (min-width: 1000px) {
	.vda-arbeitskreis::after {
		content: "";
		display: block;
		clear: both;
	}
}


/* ------------------------------------------------------------------
   Seitenkopf: Ueberschrift links, Einleitung rechts

   Ein einzelner Absatz unter einer Ueberschrift laesst die halbe
   Seitenbreite leer stehen - die Seite fing zweimal an derselben
   Kante an und hoerte in der Mitte auf. Nebeneinander tragen beide
   die Zeile: links steht, worum es geht, rechts der Text dazu.

   Gebaut als Gruppe, damit die Redaktion sie im Editor anfassen kann.
   Die Klasse laesst sich auf jede Unterseite setzen.
   ------------------------------------------------------------------ */

:where(.entry-content) > :is(.vda-seitenkopf, .is-style-page-head),
.entry-content:has( > .vda-arbeitskreis ) > :is(.vda-seitenkopf, .is-style-page-head) {
	max-width: none;
	margin-inline-start: 0;
	margin-block: 0 var(--wp--preset--spacing--30);
}

/* Steht ein zweiter Kopf mitten auf der Seite, ist er der Anfang
   eines neuen Abschnitts. Der Abstand davor trennt die Abschnitte
   voneinander - er ist deutlich groesser als der Abstand innerhalb
   eines Abschnitts, sonst laufen sie ineinander. */
:where(.entry-content) > :is(.vda-seitenkopf, .is-style-page-head):not(:first-child) {
	margin-block-start: var(--wp--preset--spacing--70);
}

/* Steht ein Bild im Kopf, dreht sich die Aufteilung: das Bild nimmt
   die linke Spalte ganz ein, Ueberschrift und Text ruecken zusammen
   nach rechts. Vorher sass die Ueberschrift allein links ueber dem
   Bild, waehrend der Text rechts ohne Ueberschrift begann - der Kopf
   hatte damit zwei Anfaenge auf verschiedenen Hoehen. So steht der
   Abschnitt wie der Aufmacher weiter oben: Bild und Text beginnen auf
   einer Linie. Koepfe ohne Bild bleiben unveraendert. */
@media (min-width: 900px) {
	:is(.vda-seitenkopf, .is-style-page-head):has( > figure.wp-block-image ) > figure.wp-block-image {
		grid-column: 1;
		grid-row: 1 / span 20;
		align-self: stretch;
		max-width: none;
		margin-block: 0;
	}

	/* Das Bild traegt die Hoehe der Textspalte mit, damit unten keine
	   Stufe entsteht. */
	:is(.vda-seitenkopf, .is-style-page-head):has( > figure.wp-block-image ) > figure.wp-block-image img {
		height: 100%;
		min-height: 280px;
		/* Ohne Obergrenze bestimmt ein hochformatiges Foto die Hoehe des
		   ganzen Abschnitts: neben 180 Punkten Text stand ein 430 Punkte
		   hohes Bild und rechts daneben eine leere Flaeche. */
		max-height: 480px;
		aspect-ratio: auto;
	}

	:is(.vda-seitenkopf, .is-style-page-head):has( > figure.wp-block-image ) > :is(h1, h2, h3) {
		grid-column: 2;
		grid-row: 1;
	}

	:is(.vda-seitenkopf, .is-style-page-head):has( > figure.wp-block-image ) > .vda-kopf__text {
		grid-column: 2;
		grid-row: 2 / span 20;
	}
}

:is(.vda-seitenkopf, .is-style-page-head) > figure.wp-block-image img {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

@media (min-width: 900px) {
	:is(.vda-seitenkopf, .is-style-page-head) {
		display: grid;
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
		column-gap: clamp(2.5rem, 5vw, 5rem);
		row-gap: 0.9em;
		align-items: start;
	}

	/* Alle Absaetze in die rechte Spalte. Sonst rutscht der zweite
	   unter die Ueberschrift nach links und der Kopf hat zwei
	   Textanfaenge. */
	:is(.vda-seitenkopf, .is-style-page-head) > p {
		grid-column: 2;
	}

	/* Stehen die Absaetze in einem eigenen Kasten, traegt der die
	   ganze rechte Spalte. Das ist noetig, sobald links ein Bild
	   steht: sonst wartet das Bild auf die Zeile, die der zweite
	   Absatz aufspannt, und darueber klafft eine Luecke. */
	:is(.vda-seitenkopf, .is-style-page-head) > .vda-kopf__text {
		grid-column: 2;
		max-width: 56ch;
	}


	:is(.vda-seitenkopf, .is-style-page-head) > .vda-kopf__text > p {
		max-width: none;
	}

	:is(.vda-seitenkopf, .is-style-page-head) > :is(h1, h2, h3) {
		grid-column: 1;
		grid-row: 1;
	}
}

/* Eine Stufe unter dem Seitentitel. Vorher waren beide 56 Bildpunkte
   gross und standen direkt uebereinander - dann sagt die Groesse
   nichts mehr darueber, was wichtiger ist. */
:is(.vda-seitenkopf, .is-style-page-head) > :is(h1, h2, h3) {
	max-width: none;
	margin-block: 0;
	font-size: var(--wp--preset--font-size--display-5);
	line-height: 1.1;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

/* Der Einleitungstext ist keine Fussnote zur Ueberschrift, sondern
   der zweite Teil des Kopfes: etwas groesser als der Fliesstext
   darunter, damit die Rangfolge stimmt. */
:is(.vda-seitenkopf, .is-style-page-head) > p {
	max-width: 56ch;
	margin-block: 0 0.8em;
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.55;
}

:is(.vda-seitenkopf, .is-style-page-head) > p:last-child {
	margin-block-end: 0;
}

/* Unter 900 Bildpunkten stehen sie untereinander. Dann braucht die
   Ueberschrift wieder Luft nach unten. */
@media (max-width: 899px) {
	:is(.vda-seitenkopf, .is-style-page-head) > :is(h1, h2, h3) {
		margin-block-end: var(--wp--preset--spacing--20);
	}
}


/* ==================================================================
   Breite Seiten statt schmaler Blogspalte

   Die Unterseiten hatten alle dieselbe Schwaeche: der Inhalt lief als
   schmale Saeule durch die Mitte, rechts und links blieben je 300
   Bildpunkte leer, und unten stand ein einzelner Knopf. Die Regeln
   hier greifen ohne Aenderung am Inhalt - sie erkennen am Aufbau,
   wann etwas die Breite tragen kann.
   ================================================================== */

/* --- Lange Aufzaehlungen zweispaltig ------------------------------
   Neun kurze Punkte untereinander in einer 680 Bildpunkte breiten
   Spalte sind eine lange Rolle mit halbleerer Seite daneben. Ab sechs
   Punkten stehen sie in zwei Spalten. Die Redaktion kann das im
   Editor je Liste umstellen ("Zwei Spalten" / "Eine Spalte"). */

@media (min-width: 900px) {
	/* Nur schlichte Aufzaehlungen. Listen mit eigener Gestaltung
	   ("vda-referate" ist ein Raster aus Kacheln, "vda-sprungliste"
	   eine Reihe Pillen) bringen ihr eigenes Layout mit - columns
	   zerlegte das Referate-Raster in zwei Saeulen mit grauen Fugen
	   dazwischen. */
	:where(.entry-content) > :is(ul, ol):has( > li:nth-child(6) ):not(.is-style-single-column):not([class*="vda-"]),
	:where(.entry-content) :is(ul, ol).is-style-two-columns {
		max-width: none;
		columns: 2;
		column-gap: clamp(2rem, 4vw, 4rem);
	}

	/* Ein Punkt darf nicht ueber den Spaltenwechsel zerrissen werden. */
	:where(.entry-content) > :is(ul, ol):has( > li:nth-child(6) ):not([class*="vda-"]) > li,
	:where(.entry-content) :is(ul, ol).is-style-two-columns > li {
		break-inside: avoid;
		page-break-inside: avoid;
	}

	/* Der erste Punkt sitzt sonst tiefer als der Spaltenkopf daneben. */
	:where(.entry-content) > :is(ul, ol):has( > li:nth-child(6) ):not([class*="vda-"]) > li:first-child,
	:where(.entry-content) :is(ul, ol).is-style-two-columns > li:first-child {
		margin-block-start: 0;
	}
}

/* Verschachtelte Listen bleiben einspaltig - sie gehoeren zu ihrem
   Punkt und wuerden sonst von ihm abreissen. */
:where(.entry-content) :is(ul, ol) :is(ul, ol) {
	columns: auto;
}

/* --- Knopf am Seitenende ------------------------------------------
   Er stand allein und mittig unter dem Text, wie ein Nachtrag. Jetzt
   sitzt er an der Textkante, abgesetzt durch eine Linie, damit er als
   Abschluss lesbar ist. */

:where(.entry-content) > .wp-block-buttons:last-child {
	justify-content: flex-start;
	max-width: none;
	margin-inline-start: 0;
	margin-block-start: var(--wp--preset--spacing--40);
	padding-block-start: var(--wp--preset--spacing--30);
	border-block-start: 1px solid var(--wp--preset--color--line);
}

/* --- Viele Dateien nebeneinander ----------------------------------
   Einundzwanzig Knoepfe untereinander sind eine Kolonne. Ab vier
   stehen sie in einem Raster. */

.vda-downloadliste--raster {
	clear: both;
	max-width: none;
	margin-inline-start: 0;
	margin-block-start: var(--wp--preset--spacing--40);
}

@media (min-width: 700px) {
	.vda-downloadliste--raster {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
		/* Gleich hohe Zeilen: sonst ist die eine Zeile hoeher, in der
		   eine Datei ihre Groesse kennt und die anderen nicht. */
		grid-auto-rows: 1fr;
		gap: 10px;
	}

	.vda-downloadliste--raster .vda-downloadliste__titel {
		grid-column: 1 / -1;
	}

	.vda-downloadliste--raster .vda-download {
		margin-block: 0;
	}
}


/* ==================================================================
   Bausteine fuer Seiten, die etwas verkaufen

   Die Einzelmitgliedschaft ist der wichtigste Einstieg der Seite und
   stand als Kette aus Bild, Ueberschrift und Absatz untereinander -
   acht Vorteile, jeder mit eigenem Icon, alle in einer Spalte, dazu
   4.000 Bildpunkte Hoehe. Die Bausteine hier machen daraus eine
   Seite, die man ueberfliegen kann.

   Sie folgen DESIGN.md: offene Spalten mit Trennlinien statt
   geschlossener Karten, keine Verlaeufe, feste Seitenverhaeltnisse
   bei Bildern.
   ================================================================== */

/* --- Nutzenraster mit Icons ---------------------------------------
   Kein Kartengitter: jede Spalte traegt oben eine Linie und steht
   sonst offen. So bleibt die Flaeche ruhig, und die Icons sind das
   einzige Farbige. */

.vda-nutzen {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 0 clamp(2rem, 4vw, 3.5rem);
	max-width: none;
	margin-inline-start: 0;
	margin-block: var(--wp--preset--spacing--40) 0;
}

/* WordPress gibt jedem Block ausser dem ersten einen Abstand nach
   oben. Im Raster wirkt der weiter - das erste Feld stand dadurch 16
   Bildpunkte hoeher als seine Nachbarn. */
.vda-nutzen > * {
	margin-block: 0;
}

.vda-nutzen__feld {
	padding-block: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border-block-start: 2px solid var(--wp--preset--color--vda-blue);
}

/* Icon, Titel und Text jeder Reihe liegen auf einer Linie. Ohne das
   faengt der Text neben einer zweizeiligen Ueberschrift tiefer an als
   nebenan, und die Reihe franst aus. subgrid uebernimmt dafuer die
   Zeilen des Rasters. */
@supports (grid-template-rows: subgrid) {
	@media (min-width: 700px) {
		.vda-nutzen {
			grid-auto-rows: auto;
		}

		.vda-nutzen__feld {
			display: grid;
			grid-row: span 3;
			grid-template-rows: subgrid;
			row-gap: 0;
			align-content: start;
		}

		/* Die feste Mindesthoehe der Ueberschrift ist dann nicht mehr
		   noetig - subgrid richtet genauer aus. */
		.vda-nutzen__feld > :is(h2, h3, h4) {
			min-height: 0;
		}

		/* Das Icon oben in seiner Zeile, nicht mittig darin. Der
		   Abstand nach oben muss ausdruecklich weg: beim ersten Feld
		   fiel er sonst anders aus als bei den uebrigen, und das Icon
		   stand 16 Bildpunkte hoeher. */
		.vda-nutzen__feld > figure.wp-block-image {
			align-self: start;
			margin-block-start: 0;
		}
	}
}

/* Die Icons sind weiss gezeichnet (fill="white") - sie stammen von
   der alten Seite, wo sie auf blauem Grund standen. Auf weiss waren
   sie unsichtbar. Sie bekommen ihre Flaeche zurueck, statt dass acht
   Dateien neu eingefaerbt werden muessten. */
.vda-nutzen__feld figure.wp-block-image {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	max-width: none;
	margin: 0 0 var(--wp--preset--spacing--20);
	border-radius: 4px;
	background: var(--wp--preset--color--vda-blue);
}

.vda-nutzen__feld figure.wp-block-image .wp-lightbox-container,
.vda-nutzen__feld figure.wp-block-image .wp-lightbox-container img {
	display: block;
	width: 34px;
	height: 34px;
}

.vda-nutzen__feld figure.wp-block-image img {
	width: 34px;
	height: 34px;
	object-fit: contain;
}

.vda-nutzen__feld > :is(h2, h3, h4) {
	max-width: none;
	/* Zwei Zeilen Platz, auch wenn der Titel nur eine braucht: sonst
	   faengt der Text in jeder Spalte auf einer anderen Hoehe an und
	   die Reihe franst aus. */
	min-height: 2.4em;
	margin: 0 0 0.4em;
	font-size: var(--vda-kacheltitel);
	line-height: 1.25;
	letter-spacing: -0.01em;
	/* Notausgang fuer die langen Zusammensetzungen. */
	overflow-wrap: break-word;
	hyphens: auto;
	color: var(--wp--preset--color--vda-blue-dark);
}

.vda-nutzen__feld > p {
	max-width: none;
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
	color: var(--wp--preset--color--muted);
}

/* --- Der Beitrag ---------------------------------------------------
   Eine Zahl, die man nicht suchen muss. */

.vda-beitrag {
	display: grid;
	grid-template-columns: minmax(0, auto) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
	max-width: none;
	margin-inline-start: 0;
}

.vda-beitrag__zahl {
	max-width: none;
	margin: 0;
	font-size: clamp(52px, 7vw, 92px);
	font-weight: 750;
	line-height: 1;
	letter-spacing: -0.03em;
	white-space: nowrap;
}

.vda-beitrag__zusatz {
	max-width: 46ch;
	margin: 0;
}

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

/* --- Der Weg in drei Schritten -------------------------------------
   Nummeriert, weil die Reihenfolge hier die Aussage ist. */

.vda-schritte {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: clamp(1.5rem, 4vw, 3rem);
	max-width: none;
	margin-inline-start: 0;
	margin-block: var(--wp--preset--spacing--40) 0;
	counter-reset: vda-schritt;
}

/* Wie beim Nutzenraster: der Abstand, den WordPress jedem Block
   ausser dem ersten gibt, wirkt im Raster weiter und stellt den
   ersten Schritt hoeher als seine Nachbarn. */
.vda-schritte > * {
	margin-block: 0;
}

.vda-schritt {
	padding-block-start: var(--wp--preset--spacing--20);
	border-block-start: 2px solid currentColor;
	counter-increment: vda-schritt;
}

/* Nummer, Titel und Text der drei Schritte auf einer Linie. */
@supports (grid-template-rows: subgrid) {
	@media (min-width: 700px) {
		.vda-schritte {
			grid-auto-rows: auto;
		}

		.vda-schritt {
			display: grid;
			grid-row: span 2;
			grid-template-rows: subgrid;
			row-gap: 0;
			align-content: start;
		}
	}
}

.vda-schritt > :is(h2, h3, h4) {
	max-width: none;
	margin: 0 0 0.4em;
	font-size: var(--vda-kacheltitel);
	line-height: 1.25;
}

.vda-schritt > :is(h2, h3, h4)::before {
	content: counter(vda-schritt);
	display: block;
	margin-block-end: 0.35em;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 750;
	letter-spacing: 0.08em;
	opacity: 0.65;
}

.vda-schritt > p {
	max-width: none;
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
}

/* --- Bild neben Text -----------------------------------------------
   Fuer Abschnitte, die ein Foto tragen: das Bild bekommt eine feste
   Spalte, der Text laeuft daneben. Auf schmalen Geraeten stehen sie
   untereinander, das Bild zuerst. */

@media (min-width: 800px) {
	.vda-bildtext {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		/* Nur seitlich ein Abstand. Das Bild spannt ueber alle Zeilen,
		   und ein Zeilenabstand wuerde zwischen den leeren Zeilen
		   dahinter mitzaehlen - beim ersten Versuch schob er das Bild
		   tausend Bildpunkte unter den Text. */
		column-gap: clamp(2rem, 5vw, 4.5rem);
		row-gap: 0;
		align-items: center;
		max-width: none;
		margin-inline-start: 0;
	}

	.vda-bildtext > figure.wp-block-image {
		grid-column: 1;
		grid-row: 1 / span 20;
		/* min-width: auto ist die Voreinstellung im Raster: ein Bild
		   sprengt damit seine Spalte, sobald es breiter ist als sie.
		   Auf vda2 wuchs die Seite dadurch von 6.800 auf 17.900
		   Bildpunkte, sobald das Bild wirklich geladen wurde. */
		/* width: 100% statt min-width: 0 - die Spalte gibt die Breite
		   vor, nicht das Bild. Sonst sprengt ein 1024 Bildpunkte
		   breites Bild seine Spalte, und die Seite wuchs auf vda2 von
		   6.800 auf 17.900 Bildpunkte, sobald es geladen war. */
		width: 100%;
		min-width: 0;
		max-width: 100%;
		margin: 0;
	}

	.vda-bildtext--rechts > figure.wp-block-image {
		grid-column: 2;
	}

	.vda-bildtext > :not(figure) {
		grid-column: 2;
		max-width: 52ch;
	}

	.vda-bildtext--rechts > :not(figure) {
		grid-column: 1;
	}
}

/* Ein quadratisches Bild wird in einer 574 Bildpunkte breiten Spalte
   ebenso hoch - neben einem Text von 158 Bildpunkten blieben dann
   mehr als 400 leer. Die Hoehe ist begrenzt, das Bild passt sich
   ein statt beschnitten zu werden: das Willkommenspaket steht auf
   weissem Grund, ein Zuschnitt wuerde es anschneiden. */
.vda-bildtext figure.wp-block-image img {
	width: 100%;
	height: auto;
	max-height: 420px;
	object-fit: contain;
}

.vda-bildtext > :is(h2, h3) {
	margin-block-start: 0;
}


/* --- Die Landingpage der Einzelmitgliedschaft ----------------------
   Zwei Flaechen geben der Seite Rhythmus: der Einstieg oben und der
   Abschnitt mit Beitrag und Antrag. Dazwischen bleibt es weiss.
   ------------------------------------------------------------------ */

/* Die Flaeche laeuft ueber die ganze Fensterbreite, der Text darin
   faengt an derselben Kante an wie Logo, Brotkrumen und Seitentitel.

   Vorher trug das Band 48 Bildpunkte Innenabstand: die Ueberschrift
   stand dadurch weiter rechts als alles andere, und je breiter das
   Fenster, desto deutlicher der Versatz.

   610px ist die halbe Inhaltsbreite (1.220). Der Abzug von 8px gleicht
   aus, dass das Logo in seinem Rahmen mittig sitzt und optisch dort
   beginnt, nicht an der Rahmenkante. */
:where(.entry-content) > :is(.vda-lp-hero, .vda-lp-beitrag) {
	width: auto;
	max-width: none;
	margin-inline: calc( 50% - 50vw );
	/* Spiegelbild des Ausbruchs: was der Rand nach aussen schiebt,
	   holt der Innenabstand wieder herein. Der Text landet damit
	   genau auf der Kante des Inhaltsrahmens - bei jeder Breite, ohne
	   feste Werte.

	   Die erste Fassung rechnete mit "50vw - 610px" und einem
	   Mindestwert von 24 Bildpunkten. Das stimmte nur oberhalb von
	   1.320 Bildpunkten: darunter waechst der Rand des Inhalts
	   fliessend (40, 44, 48), und der Bandtext stand bis zu 24
	   Bildpunkte weiter links als Brotkrumen und Seitentitel. */
	padding-inline: calc( 50vw - 50% );
}

.vda-lp-hero {
	background: var(--wp--preset--color--paper-blue, #eaf2f9);
	padding-block: clamp(2.5rem, 6vw, 5rem);
}

.vda-lp-hero .vda-bildtext figure.wp-block-image img {
	aspect-ratio: 3 / 2;
	border-radius: 2px;
}

.vda-lp-hero__aktionen {
	margin-block-start: var(--wp--preset--spacing--30);
}

/* Der Abschnitt mit Beitrag und Antrag ist das Ziel der Seite und
   traegt deshalb die kraeftige Flaeche. */
/* Der Fuss ist kuerzer als der Kopf: oben trennt der Abstand vom
   vorigen Abschnitt, unten schliesst er nur ab. Gleich gross wirkte
   die Flaeche unten leer. */
.vda-lp-beitrag {
	background: var(--wp--preset--color--vda-blue-dark, #00558a);
	padding-block: clamp(2.5rem, 6vw, 5rem) clamp(1.75rem, 3vw, 2.75rem);
	color: var(--wp--preset--color--white);
}

.vda-lp-beitrag :is(h2, h3, h4, p, li, strong) {
	color: var(--wp--preset--color--white);
}

.vda-lp-beitrag .vda-schritt {
	border-block-start-color: rgba(255, 255, 255, 0.45);
}

.vda-lp-beitrag .vda-schritt > :is(h2, h3, h4)::before {
	opacity: 0.75;
}

.vda-lp-beitrag > .vda-schritte {
	margin-block-start: var(--wp--preset--spacing--50);
}

/* Zwischen dem Weg und dem Formular braucht es einen deutlichen
   Schnitt: die drei Schritte erklaeren den Ablauf, danach faengt das
   Ausfuellen an. Eine Linie ueber die ganze Breite trennt beides,
   ohne dass ein weiteres Band noetig waere. */
/* Eine Stufe unter dem Einstieg: die Aufforderung eroeffnet einen
   Abschnitt, sie ist nicht die Ueberschrift der Seite. Vorher war sie
   mit 56 Bildpunkten genauso gross wie der Titel oben. */
.vda-lp-beitrag > h2:not(.vda-beitrag__zahl) {
	font-size: var(--wp--preset--font-size--display-5);
}

.vda-lp-beitrag > h2 {
	margin-block-start: var(--wp--preset--spacing--70);
	padding-block-start: var(--wp--preset--spacing--50);
	border-block-start: 1px solid rgba(255, 255, 255, 0.35);
}

/* Alles im Band faengt an der Textkante an. WordPress zentriert
   Kinder eines Bereichs mit begrenzter Breite von sich aus - hier ist
   das falsch, die Kante ist die Ordnung der Seite. */
/* Zwei Klassen im Selektor, damit die Regel gegen WordPress' eigene
   Zentrierung ankommt - die traegt dieselbe Staerke und stuende sonst
   als spaetere Regel vorn. */
/* WordPress erzeugt die Zentrierung als eigene Regel im Kopf der
   Seite und gewinnt trotz gleicher Staerke, weil sie spaeter steht.
   Hier ist die Kante die Ordnung der Seite, deshalb ausnahmsweise
   erzwungen. */
.entry-content .vda-lp-beitrag > * {
	margin-inline-start: 0 !important;
	margin-inline-end: auto !important;
}

/* Der Antrag steht an der Textkante, nicht eingerueckt. Die Breite
   bleibt bei 760: ein Formular liest sich nicht besser, weil es
   breiter ist. */
.vda-lp-beitrag > .wp-block-vda-mitgliedsantrag,
.vda-lp-beitrag > .vda-download {
	max-width: none;
	margin-inline-start: 0;
}

.vda-lp-beitrag .vda-antrag,
.vda-lp-beitrag .vda-formular {
	max-width: 760px;
	margin-inline: 0;
	margin-block-start: var(--wp--preset--spacing--30);
}

/* Der Dateiknopf steht auf blauem Grund: heller Rahmen, weisse
   Schrift. Vorher trug er weisse Schrift auf weissem Kasten und war
   leer. */
.vda-lp-beitrag .vda-download a {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.55);
}

/* Die Marke ist ausgenommen: sie traegt ihr eigenes Blau auf weisser
   Flaeche. Ohne die Ausnahme faerbte diese Regel auch das Symbol
   weiss - weisses Zeichen auf weissem Grund, der Knopf sah leer aus. */
.vda-lp-beitrag .vda-download :is(strong, span, small):not(.vda-download__marke) {
	color: var(--wp--preset--color--white);
}

.vda-lp-beitrag .vda-download__typ,
.vda-lp-beitrag .vda-download__ziehen {
	color: rgba(255, 255, 255, 0.85);
}

.vda-lp-beitrag .vda-download a:hover,
.vda-lp-beitrag .vda-download a:focus-visible {
	background: rgba(255, 255, 255, 0.12);
	border-color: var(--wp--preset--color--white);
}

/* Auf blauem Grund: Rahmen und Beschriftungen hell. */
.vda-lp-beitrag .vda-formular :is(input, select, textarea) {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
}

.vda-lp-beitrag .vda-formular :is(label, legend) {
	color: var(--wp--preset--color--white);
}

/* Die Erklaerungen unter den Feldern tragen die gedaempfte Textfarbe
   des Themes - auf blauem Grund waren sie kaum zu lesen. */
.vda-lp-beitrag .vda-formular :is(.vda-feld__frei, .vda-feld__hinweis, .vda-feld__zaehler, .vda-hinweis) {
	color: rgba(255, 255, 255, 0.82);
}

.vda-lp-beitrag > .vda-download {
	float: none;
	width: auto;
	max-width: 460px;
	margin-block-start: var(--wp--preset--spacing--40);
}

/* Der Abschluss: Ueberschrift und Erklaerung oben, darunter drei
   Wege zur Geschaeftsstelle nebeneinander. Vorher war das eine
   schmale Karte unten links in der Ecke. */
:where(.entry-content) > .vda-lp-kontakt {
	width: auto;
	max-width: none;
	margin-inline: calc( 50% - 50vw );
	margin-block-start: var(--wp--preset--spacing--60);
	padding-inline: calc( 50vw - 50% );
	padding-block: clamp(2.5rem, 5vw, 4rem);
	background: var(--wp--preset--color--surface, #f7f8fa);
	border-block-start: 1px solid var(--wp--preset--color--line);
}

.entry-content .vda-lp-kontakt > * {
	margin-inline-start: 0 !important;
	margin-inline-end: auto !important;
}

.vda-lp-kontakt__raster {
	max-width: none;
}

.vda-lp-kontakt__raster > :is(h2, p) {
	max-width: 62ch;
	margin-inline-start: 0;
}

.vda-lp-kontakt__raster > h2 {
	margin-block: 0 0.4em;
}

.vda-lp-kontakt__feld > h3 {
	max-width: none;
	margin: 0 0 0.5em;
	font-size: var(--vda-kacheltitel);
	font-weight: 700;
	line-height: 1.25;
	color: var(--wp--preset--color--vda-blue-dark);
}

.vda-lp-kontakt__feld > p {
	max-width: none;
	margin: 0;
	line-height: 1.7;
}

@media (min-width: 760px) {
	.vda-lp-kontakt__raster {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: clamp(2rem, 4vw, 3.5rem);
		row-gap: var(--wp--preset--spacing--40);
	}

	.vda-lp-kontakt__raster > :is(h2, p) {
		grid-column: 1 / -1;
	}

	.vda-lp-kontakt__feld {
		padding-block-start: var(--wp--preset--spacing--20);
		border-block-start: 2px solid var(--wp--preset--color--vda-blue);
	}
}


/* --- Der Antrag mit seiner Merkspalte -----------------------------
   Das Formular nahm die linke Haelfte ein, rechts blieb die Flaeche
   leer. Daneben stehen jetzt die vier Angaben, die man beim Ausfuellen
   wissen will: ab wann, was kommt, wie man wieder herauskommt, und
   der Weg auf Papier.
   ------------------------------------------------------------------ */

.vda-lp-antrag {
	max-width: none;
	margin-block-start: var(--wp--preset--spacing--30);
}

@media (min-width: 1000px) {
	.vda-lp-antrag {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(280px, 0.52fr);
		column-gap: clamp(2.5rem, 5vw, 4.5rem);
		align-items: start;
	}
}

.entry-content .vda-lp-antrag > * {
	margin-block: 0;
}

.vda-lp-antrag__spalte {
	max-width: none;
}

.entry-content .vda-lp-antrag .vda-antrag,
.entry-content .vda-lp-antrag .vda-formular {
	max-width: none;
	margin-block-start: 0;
}

.vda-lp-antrag__info {
	max-width: none;
}

.vda-lp-antrag__punkt + .vda-lp-antrag__punkt {
	margin-block-start: var(--wp--preset--spacing--30);
}

.vda-lp-antrag__punkt {
	padding-block-start: var(--wp--preset--spacing--20);
	border-block-start: 1px solid rgba(255, 255, 255, 0.35);
}

.vda-lp-antrag__punkt > h3 {
	max-width: none;
	margin: 0 0 0.4em;
	font-size: var(--vda-kacheltitel);
	font-weight: 700;
	line-height: 1.25;
}

.vda-lp-antrag__punkt > p {
	max-width: none;
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.88);
}

.vda-lp-antrag__punkt .vda-download {
	float: none;
	width: auto;
	max-width: none;
	margin-block: var(--wp--preset--spacing--20) 0;
	margin-inline: 0;
}

/* Auf schmalen Geraeten steht die Merkspalte unter dem Formular. */
@media (max-width: 999px) {
	.vda-lp-antrag__info {
		margin-block-start: var(--wp--preset--spacing--40);
	}
}


/* --- Knoepfe auf der blauen Flaeche --------------------------------
   Der Absendeknopf trug das Blau der Marke - auf dunkelblauem Grund
   hebt sich das kaum ab, obwohl es die wichtigste Schaltflaeche der
   ganzen Seite ist. Auf farbigem Grund kehrt sich das Verhaeltnis um:
   weisse Flaeche, blaue Schrift.
   ------------------------------------------------------------------ */

.vda-lp-beitrag .vda-submit,
.vda-lp-beitrag .vda-antrag__weiter .vda-submit,
.vda-lp-beitrag .vda-formular__aktion .vda-submit {
	background: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--vda-blue-dark);
	font-weight: 700;
}

.vda-lp-beitrag .vda-submit:hover,
.vda-lp-beitrag .vda-submit:focus-visible {
	background: var(--wp--preset--color--paper-blue, #eaf2f9);
	border-color: var(--wp--preset--color--paper-blue, #eaf2f9);
	color: var(--wp--preset--color--vda-blue-dark);
}

.vda-lp-beitrag .vda-submit:focus-visible {
	outline: 3px solid var(--wp--preset--color--white);
	outline-offset: 3px;
}

/* Der Dateiknopf steht als Alternative daneben, nicht als Hauptweg:
   heller Rahmen auf der Flaeche, aber mit weisser Marke, damit man
   ihn als Knopf erkennt und nicht als Textkasten. */
.vda-lp-beitrag .vda-download a {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.5);
}

/* Das Zeichen ist als Umriss gezeichnet (fill="none",
   stroke="currentColor"). Es braucht nur eine Farbe, kein fill -
   ein erzwungenes fill wuerde das Blatt zuschmieren. */
.vda-lp-beitrag .vda-download__marke {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--vda-blue-dark);
	border-radius: 3px;
}

.vda-lp-beitrag .vda-download a:hover,
.vda-lp-beitrag .vda-download a:focus-visible {
	background: rgba(255, 255, 255, 0.18);
	border-color: var(--wp--preset--color--white);
}


/* --- Abstand zwischen den Abschnitten der Landingpage --------------
   Zwischen Band, Bild-Text-Paaren und Fragen standen 16 Bildpunkte -
   der gewoehnliche Abstand zwischen zwei Bloecken. Fuer Abschnitte,
   die je ein eigenes Thema tragen, ist das zu wenig: sie liefen
   ineinander. Ein Abschnitt braucht mehr Luft um sich herum als die
   Bloecke in seinem Inneren.
   ------------------------------------------------------------------ */

:where(.entry-content) > .vda-bildtext {
	margin-block: var(--wp--preset--spacing--60) 0;
}

/* Nach einer farbigen Flaeche faengt immer etwas Neues an. */
:where(.entry-content) > :is(.vda-lp-hero, .vda-lp-beitrag) + * {
	margin-block-start: var(--wp--preset--spacing--60);
}

/* Und davor ebenso. */
:where(.entry-content) > :is(.vda-lp-hero, .vda-lp-beitrag):not(:first-child) {
	margin-block-start: var(--wp--preset--spacing--60);
}


/* --- Dateien, die Mitgliedern gehoeren -----------------------------
   Ohne Berechtigung entfernt VDA_Dateischutz die Knoepfe aus dem
   Text. Es bleibt der Hinweis - er erklaert, warum hier nichts steht
   und wo die Anmeldung ist. Eine leere Flaeche taete das nicht.
   ------------------------------------------------------------------ */

:is(.vda-nurmitglieder, .vda-dateiliste) {
	max-width: none;
	margin-inline-start: 0;
	margin-block: var(--wp--preset--spacing--50) 0;
}

:is(.vda-nurmitglieder, .vda-dateiliste) > h2 {
	margin-block: 0 var(--wp--preset--spacing--20);
}

:is(.vda-nurmitglieder__hinweis, .vda-dateiliste__hinweis) {
	max-width: 68ch;
	margin-block: 0 var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--muted);
}

/* Ist der Bereich gesperrt, steht der Hinweis fuer sich - dann traegt
   er eine eigene Flaeche, damit er nicht wie ein vergessener Absatz
   wirkt. */
.vda-nurmitglieder--gesperrt .vda-nurmitglieder__hinweis {
	max-width: 74ch;
	margin-block-end: 0;
	padding: var(--wp--preset--spacing--30);
	border-inline-start: 4px solid var(--wp--preset--color--vda-blue);
	background: var(--wp--preset--color--surface, #f7f8fa);
	color: var(--wp--preset--color--ink);
}

/* Die freigegebenen Dateien stehen im Raster wie sonst auch. */
@media (min-width: 700px) {
	.vda-dateiliste,
	.vda-nurmitglieder:not(.vda-nurmitglieder--gesperrt) {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
		grid-auto-rows: 1fr;
		gap: 10px;
	}

	/* Nur Ueberschrift und Hinweis spannen ueber die ganze Zeile. Ein
	   Dateiknopf ist technisch auch ein Absatz - "p" allein zog ihn
	   ebenfalls auf die volle Breite, und das Raster hatte wieder nur
	   eine Spalte. */
	.vda-dateiliste > :is(h2, h3, .vda-dateiliste__hinweis),
	.vda-nurmitglieder:not(.vda-nurmitglieder--gesperrt) > :is(h2, h3, .vda-nurmitglieder__hinweis) {
		grid-column: 1 / -1;
	}

	.vda-dateiliste > .vda-download,
	.vda-nurmitglieder:not(.vda-nurmitglieder--gesperrt) > .vda-download {
		float: none;
		width: auto;
		max-width: none;
		margin: 0;
	}
}

/* ---------------------------------------------------------------
   Meldungen und Ankreuzfelder in der dunklen Mitgliedschaftsseite

   Der Abschnitt färbt alle Absätze weiß, damit sie auf dem
   blauen Grund lesbar sind. Meldungskästen und das Ankreuzfeld
   bringen aber ihre eigene helle Fläche mit - dort war weißer
   Text auf weißem Grund das Ergebnis. Am 09.09.2026 am lebenden
   Objekt gemessen: rgb(255,255,255) auf rgb(238,247,240).

   Die breite Regel zählt eine Klasse und ein Element. Eine
   Ausnahme mit nur einer Klasse verliert, deshalb steht der
   Abschnitt hier mit davor.
   --------------------------------------------------------------- */

.vda-lp-beitrag .vda-meldung--gut,
.vda-lp-beitrag .vda-meldung--gut p {
	color: #2c6e3f;
}

.vda-lp-beitrag .vda-meldung--fehler,
.vda-lp-beitrag .vda-meldung--fehler p {
	color: var(--wp--preset--color--error);
}

.vda-lp-beitrag .vda-meldung--hinweis,
.vda-lp-beitrag .vda-meldung--hinweis p {
	color: var(--wp--preset--color--vda-blue-dark);
}

/* Das Ankreuzfeld sitzt auf einer weißen Kachel. */
.vda-lp-beitrag .vda-kaestchen label,
.vda-lp-beitrag .vda-kaestchen label > span,
.vda-lp-beitrag .vda-kaestchen label a {
	color: var(--wp--preset--color--ink);
}

.vda-lp-beitrag .vda-kaestchen label a {
	text-decoration: underline;
}


/* ------------------------------------------------------------------
   Chronik mit Jahresmarken

   Die Geschichte des Arbeitskreises Fischkrankheiten stand als
   achtundzwanzig gleich aussehende Absätze untereinander, mit einer
   Bandbreite von 1.220 Punkten und nichts daneben. Wer wissen wollte,
   wann etwas geschah, musste alles lesen.

   Die Einträge tragen ihre Marke jetzt in der ersten Zeile - eine
   Jahreszahl oder ein kurzer Titel - und hängen an einer Linie, die
   von oben nach unten durchläuft. Daneben bleibt Platz für Bild und
   Eckdaten.
   ------------------------------------------------------------------ */

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

ul.vda-chronik > li {
	position: relative;
	margin: 0;
	padding-block: 0 var(--wp--preset--spacing--40);
	padding-inline-start: var(--wp--preset--spacing--40);
	border-inline-start: 2px solid var(--wp--preset--color--line);
	line-height: 1.65;
}

/* Der Punkt sitzt auf der Linie, deshalb die halbe Breite nach links.
   Der Versatz nach unten bringt ihn auf die Höhe der ersten Zeile. */
ul.vda-chronik > li::before {
	content: "";
	position: absolute;
	inset-inline-start: -7px;
	inset-block-start: 7px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--wp--preset--color--vda-blue);
}

/* Der letzte Eintrag lässt die Linie enden, sonst läuft sie ins
   Leere unter den letzten Satz. */
ul.vda-chronik > li:last-child {
	padding-block-end: 0;
	border-inline-start-color: transparent;
}

ul.vda-chronik > li > strong:first-child {
	display: block;
	margin-block-end: 4px;
	color: var(--wp--preset--color--vda-blue-dark);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 750;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Das Bild in der Randspalte steht bündig zur ersten Zeile daneben. */
.vda-historie__bild {
	margin-block: 0 var(--wp--preset--spacing--30);
}

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

/* Der Satz nach der Chronik gehört zu ihr: er steht auf derselben
   Kante wie die Einträge, sonst springt die linke Kante am Ende
   zurück. Die allgemeine Absatzbreite von 62 Zeichen macht ihn
   ausserdem schmaler als die Spalte - hier zählt die Spalte. */
p.vda-chronik__nachsatz {
	max-width: none;
	padding-inline-start: var(--wp--preset--spacing--40);
}

/* Die Randspalte ist kürzer als die Chronik daneben. Damit rechts
   nicht die halbe Höhe leer bleibt, läuft der Kasten beim Blättern
   mit. Der Abstand nach oben hält ihn unter der Kopfzeile. */
@media (min-width: 782px) {
	/* Die Spalte trägt "oben ausgerichtet" und ist damit nur so hoch
	   wie ihr Inhalt - darin hat sticky keinen Weg. Erst über die
	   volle Zeilenhöhe gestreckt kann der Kasten mitlaufen. */
	.vda-historie .wp-block-column:last-child {
		align-self: stretch;
	}

	.vda-historie .wp-block-column:last-child .vda-hinweiskasten {
		position: sticky;
		top: 104px;
	}
}

@media (max-width: 781px) {
	ul.vda-chronik > li,
	p.vda-chronik__nachsatz {
		padding-inline-start: var(--wp--preset--spacing--30);
	}
}


/* ------------------------------------------------------------------
   Zwei Ansprechpartner nebeneinander

   Auf der Referatsseite standen beide Karten gestapelt in der rechten
   Spalte, während links nur vier Zeilen Text standen: rechts 473, links
   200 Bildpunkte hoch, dazwischen ein Loch über die halbe Seite.

   Nebeneinander unter dem Text sind sie gleich hoch und der Text
   darüber nutzt die ganze Lesespalte.
   ------------------------------------------------------------------ */

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

.vda-kontakt-paar .wp-block-column {
	display: flex;
}

/* Die Karte füllt ihre Spalte, damit beide unten auf einer Linie
   enden - sonst hängt die kürzere in der Luft. */
.vda-kontakt-paar .vda-kontaktkarte {
	flex: 1;
	margin-block: 0;
}


/* ------------------------------------------------------------------
   Erklärvideos als Raster

   Vorher standen fünf Videos untereinander, jedes mit Überschrift und
   Absatz: eine Seite von mehreren Bildschirmhöhen, auf der man scrollen
   musste, um überhaupt zu sehen, welche Videos es gibt.

   Jetzt liegen sie zu zweit nebeneinander. Das erste läuft über beide
   Spalten - fünf ist ungerade, und die Anmeldung ist der Einstieg, mit
   dem alles andere beginnt.
   ------------------------------------------------------------------ */

.vda-videoraster {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
}

.vda-videokarte {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	margin-block: 0;
}

/* Der Aufmacher nimmt die ganze Breite und stellt Bild und Text
   nebeneinander, sonst wäre das erste Video doppelt so hoch wie die
   vier darunter. */
.vda-videokarte--gross {
	grid-column: 1 / -1;
}

@media (min-width: 782px) {
	.vda-videokarte--gross {
		flex-direction: row;
		align-items: center;
		gap: var(--wp--preset--spacing--50);
	}

	.vda-videokarte--gross > figure.wp-block-embed {
		flex: 1 1 58%;
		min-width: 0;
	}

	.vda-videokarte--gross > .vda-videokarte__text {
		flex: 1 1 42%;
	}
}

/* Die eingebettete Wiedergabe kommt mit fester Breite und Höhe aus dem
   oEmbed. In einer Rasterzelle läuft sie damit über den Rand hinaus,
   deshalb das feste Seitenverhältnis. */
.vda-videokarte figure.wp-block-embed {
	margin: 0;
}

.vda-videokarte .wp-block-embed__wrapper {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--wp--custom--radius-small);
	background: var(--wp--preset--color--surface);
}

.vda-videokarte .wp-block-embed__wrapper iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

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

.vda-videokarte__text h3 {
	max-width: none;
	margin-block-end: 6px;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.25;
}

/* Die Nummer steht über dem Titel und ordnet die Reihenfolge, ohne
   dass sie im Titel selbst mitgelesen werden muss. */
.vda-videokarte__nr {
	display: block;
	margin-block-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;
}

.vda-videokarte__text p {
	max-width: none;
	margin-block: 0;
	color: var(--wp--preset--color--muted);
	line-height: 1.6;
}

@media (max-width: 781px) {
	.vda-videoraster {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--50);
	}
}


/* ------------------------------------------------------------------
   Zitate als Karte

   Auf der Seite „Aquarium und Gesundheit" standen fünf Zitate als
   blockquote über die volle Bandbreite von 1.184 Punkten, während
   Überschrift und Text daneben in der Lesespalte lagen. Der Leser sah
   abwechselnd schmale und breite Blöcke ohne erkennbare Ordnung.

   Als Karte neben dem Text ist ein Zitat das, was es sein soll: die
   Stimme von aussen zu dem, was daneben steht.
   ------------------------------------------------------------------ */

.vda-zitat {
	position: relative;
	margin-block: 0;
	/* Oben mehr Luft: dort sitzt das Anführungszeichen, und ohne den
	   Abstand stand es mitten in der ersten Zeile. */
	padding: calc(var(--wp--preset--spacing--40) + 22px) var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--paper-blue);
	border-radius: var(--wp--custom--radius);
}

/* Das Anführungszeichen sitzt als Marke oben links und wird nicht
   vorgelesen - der Text steht ja da. */
.vda-zitat::before {
	content: "\201E";
	position: absolute;
	inset-block-start: 10px;
	inset-inline-start: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--vda-blue);
	font-size: 52px;
	line-height: 1;
	opacity: 0.35;
	pointer-events: none;
}

.vda-zitat > p {
	position: relative;
	max-width: none;
	margin-block: 0 var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
}

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

.vda-zitat__quelle {
	font-size: var(--wp--preset--font-size--small) !important;
	font-weight: 600;
	color: var(--wp--preset--color--muted);
}

.vda-zitat__quelle a {
	color: inherit;
	text-decoration: underline;
}

/* Ein Bild in einer Abschnittsspalte sitzt bündig zur ersten Zeile
   daneben und trägt dieselbe Rundung wie die Karten. */
.vda-abschnitt__bild {
	margin-block: 0;
}

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

/* Der Schlussabsatz einer Seite steht in einem ruhigen Kasten, damit
   er nicht als weiterer Fließtext untergeht. */
.vda-fazit {
	padding: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius);
	border-inline-start: 3px solid var(--wp--preset--color--vda-blue);
}

.vda-fazit > :is(h2, h3) {
	margin-block: 0 var(--wp--preset--spacing--20);
}

.vda-fazit p {
	max-width: 74ch;
	margin-block: 0;
}


/* Ein Merksatz neben dem Absatz.

   Das Leitbild besteht aus langen, beschlossenen Sätzen, an denen sich
   nichts ändern lässt. Der Satz daneben hebt den Kern hervor und gibt
   der rechten Spalte etwas zu tun - vorher lief der Text über 1.800
   Punkte an einer leeren Fläche entlang. */
.vda-merksatz {
	padding-inline-start: var(--wp--preset--spacing--30);
	border-inline-start: 3px solid var(--wp--preset--color--vda-blue);
}

.vda-merksatz p {
	max-width: none;
	margin-block: 0;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	line-height: 1.45;
	color: var(--wp--preset--color--ink);
}

.vda-leitbild > h3 {
	margin-block-end: var(--wp--preset--spacing--20);
}


/* Die Schranke am Ende des Anrisses.

   Der Verlauf liegt über dem letzten sichtbaren Absatz und nicht unter
   dem Kasten. So endet der Text wie bei den Nachrichtenseiten weich,
   ohne dass ein Absatz mitten im Wort abbricht. Er liegt absolut, damit
   der Text selbst unangetastet bleibt - ein Wrapper um den letzten
   Absatz wäre beim Blockschnitt nicht sicher zu setzen. */
.vda-schranke {
	position: relative;
	margin-block-start: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--paper-blue);
	border-radius: var(--wp--custom--radius);
}

.vda-schranke::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-start: -6rem;
	height: 6rem;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--wp--preset--color--white) 88%);
	pointer-events: none;
}

.vda-schranke__marke {
	margin-block: 0 var(--wp--preset--spacing--10);
	color: var(--wp--preset--color--vda-blue-dark);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 750;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.vda-schranke__marke::before {
	content: "";
	display: inline-block;
	width: 0.85em;
	height: 0.85em;
	margin-inline-end: 0.45em;
	vertical-align: -0.08em;
	background-color: currentColor;
	-webkit-mask: var(--vda-schloss) center / contain no-repeat;
	mask: var(--vda-schloss) center / contain no-repeat;
}

.vda-schranke__titel {
	margin-block: 0 var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--display-6);
	line-height: 1.25;
}

.vda-schranke__text {
	max-width: 60ch;
	margin-block: 0 var(--wp--preset--spacing--30);
}

.vda-schranke__aktion {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	margin-block: 0;
}

/* Das Schloss als Zeichnung, einmal definiert und dreimal benutzt. */
:root {
	--vda-schloss: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2a5 5 0 0 0-5 5v3H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2h-1V7a5 5 0 0 0-5-5zm0 2a3 3 0 0 1 3 3v3H9V7a3 3 0 0 1 3-3z"/></svg>');
}

/* Das Merkmal auf den Karten der Übersicht. */
.vda-marke--schloss {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	padding: 0;
	color: var(--wp--preset--color--vda-blue);
	font-weight: 750;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	background: none;
	border-radius: 0;
}

.vda-marke--schloss::before {
	content: "";
	width: 0.85em;
	height: 0.85em;
	background-color: currentColor;
	-webkit-mask: var(--vda-schloss) center / contain no-repeat;
	mask: var(--vda-schloss) center / contain no-repeat;
}

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

	.vda-schranke__aktion > a {
		flex: 1 1 100%;
		text-align: center;
	}
}

/* Die Knöpfe im Kasten sind Knöpfe, keine Textlinks.

   Im Artikel gilt `.vda-artikel__haupt a:not(.wp-element-button)` mit
   dunkelblauer Schrift und Unterstrich. Diese Regel ist spezifischer als
   `.vda-knopf-voll` und färbte die Schrift auf dem blauen Knopf
   dunkelblau: gemessen 1,6 zu 1, also unlesbar. */
.vda-artikel__haupt .vda-schranke__aktion a.vda-knopf-voll {
	color: var(--wp--preset--color--white);
	text-decoration: none;
}

.vda-artikel__haupt .vda-schranke__aktion a.vda-knopf-rand {
	color: var(--wp--preset--color--vda-blue);
	text-decoration: none;
}

.vda-artikel__haupt .vda-schranke__aktion a.vda-knopf-rand:hover,
.vda-artikel__haupt .vda-schranke__aktion a.vda-knopf-rand:focus-visible {
	color: var(--wp--preset--color--white);
}

.vda-schranke__fuss {
	margin-block: var(--wp--preset--spacing--30) 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

/* ------------------------------------------------------------------
   Lesezaehler
   Die Zahl liefert das alte Snippet 20 als nackten Text. Das Auge
   und der Stil stehen hier, damit die Zeile zum uebrigen Kleingedruckten
   passt und nicht wie ein Fremdkoerper im Text sitzt.
   ------------------------------------------------------------------ */

/* Der Lesezaehler sitzt in der Kopfzeile des Beitrags, zwischen
   Lesezeit und Autor. Er erbt Farbe und Groesse von dort, nur das
   Auge braucht eigene Masse. */
.vda-gelesen {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
}

.vda-auge {
	width: 1.1em;
	height: 1.1em;
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}