/*
 * VDA Online - Theme-Stile
 *
 * Ergänzt theme.json um das, was dort nicht ausdrückbar ist: Verhalten des
 * Kopfbereichs, die Blockstile und die Zeilenkomponenten aus dem Styleguide.
 * Farben und Abstände kommen ausschließlich aus den Presets.
 */

/* ---------------------------------------------------------------
   1. Grundlagen
   --------------------------------------------------------------- */

/* Nur auf html, nicht auf body. Auf body hebelt clip jedes
   position: sticky im Dokument aus, der Kopf scrollt dann weg. */
html {
	overflow-x: clip;
}

/* Innenabstand zählt zur Breite. Ohne das läuft jedes Element mit
   width: 100% und Polsterung über den Rand hinaus. WordPress setzt es
   für seine Blöcke selbst, für die eigenen Bausteine fehlte es. */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Der Kopf klebt oben. Sticky muss auf der Huelle des Template-Parts
   sitzen: das innere Element ist genauso hoch wie sie und haette
   keinen Raum zum Kleben. */
.wp-site-blocks > header {
	position: sticky;
	top: 0;
	z-index: 50;
}

/* Kopf, Inhalt und Fuss stossen ohne Zwischenraum aneinander.
   Der Blockabstand von 16px erzeugt sonst einen weissen Streifen
   zwischen Kopf und dem ersten Band. */
.wp-site-blocks > * {
	margin-block-start: 0;
}

/* Neutralisiert Browser-Vorgaben, ohne Blockstile zu überstimmen.
   :where() setzt die Spezifität auf null, damit jede Komponentenregel gewinnt. */
:where(figure) {
	margin: 0;
}

:where(button) {
	font: inherit;
	color: inherit;
}

/* Zweifarbiger Fokusrahmen, aber schmal. Innen ein weisser Trennring,
   aussen zwei Pixel Dunkelblau. Das reicht für WCAG 1.4.11 (7.9 zu 1 auf
   Weiss) und ist auch auf farbigen Knöpfen zu sehen, ohne dass ein
   dicker gelber Rahmen um jedes Feld liegt. */
:focus-visible {
	outline: 2px solid var(--wp--preset--color--white);
	outline-offset: 0;
	box-shadow: 0 0 0 4px var(--wp--preset--color--vda-blue-dark);
}

/* Auf dunklen Flächen kehrt sich die Reihenfolge um, sonst verschwindet
   das Dunkelblau im Grund. */
.has-ink-background-color :focus-visible,
.vda-footer :focus-visible,
.has-vda-blue-dark-background-color :focus-visible,
.has-vda-blue-deep-background-color :focus-visible {
	outline-color: var(--wp--preset--color--vda-blue-dark);
	box-shadow: 0 0 0 4px var(--wp--preset--color--white);
}

.skip-link {
	position: absolute;
	inset-inline-start: var(--wp--preset--spacing--30);
	top: calc(-1 * var(--wp--preset--spacing--90));
	z-index: 100;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--vda-blue-dark);
	font-weight: 700;
	border-radius: 0 0 var(--wp--custom--radius) var(--wp--custom--radius);
	transition: top var(--wp--custom--transition);
}

.skip-link:focus {
	top: 0;
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Lesezeilen begrenzen, wie im Styleguide festgehalten. */
:where(.entry-content) p:not([class*="has-"]) {
	max-width: 62ch;
}

/* Formularfelder sind als Absatz ausgezeichnet, aber kein Lesetext.
   Die Zeilenbegrenzung liess Eingabefelder 527 statt 685 Bildpunkte
   breit werden - rechts daneben blieb eine leere Spalte stehen. */
:is(.vda-formular, .vda-newsletter, .vda-kontakt) :is(.vda-feld, .vda-formular__aktion, .vda-newsletter__aktion, .vda-trap) {
	max-width: none;
}

/* ---------------------------------------------------------------
   2. Bänder
   Jedes Band bringt den Sektionsabstand mit, keinen eigenen.
   --------------------------------------------------------------- */

.is-style-band {
	padding-block: var(--wp--preset--spacing--section);
}

.is-style-band-flush {
	padding-block: 0 var(--wp--preset--spacing--section);
}

/* Auf farbigen Flächen steht die Schrift immer explizit weiß.
   Sonst gewinnt die Grundfarbe aus theme.json und der Kontrast bricht ein. */
.has-vda-blue-background-color,
.has-vda-blue-dark-background-color,
.has-vda-blue-deep-background-color,
.has-ink-background-color {
	--vda-on-dark: var(--wp--preset--color--white);
	color: var(--vda-on-dark);
}

.has-vda-blue-background-color :where(h1, h2, h3, h4, h5),
.has-vda-blue-dark-background-color :where(h1, h2, h3, h4, h5),
.has-vda-blue-deep-background-color :where(h1, h2, h3, h4, h5),
.has-ink-background-color :where(h1, h2, h3, h4, h5) {
	color: var(--vda-on-dark);
}

.has-vda-blue-background-color a:where(:not(.wp-element-button)),
.has-vda-blue-dark-background-color a:where(:not(.wp-element-button)),
.has-vda-blue-deep-background-color a:where(:not(.wp-element-button)),
.has-ink-background-color a:where(:not(.wp-element-button)) {
	color: var(--vda-on-dark);
}

/* ---------------------------------------------------------------
   3. Blockstile
   --------------------------------------------------------------- */

/* 3.1 Knöpfe */

.wp-block-button .wp-element-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--10);
	min-height: 48px;
	/* nowrap hielt kurze Knopftexte zuverlässig einzeilig, liess aber
	   lange Beschriftungen aus dem Satzspiegel laufen. Auf der
	   Magazinseite ragte der Knopf zum Heftarchiv auf dem Telefon
	   vierzehn Pixel heraus. balance bricht erst, wenn der Platz
	   wirklich nicht reicht, und verteilt die Zeilen dann gleichmässig. */
	max-width: 100%;
	text-wrap: balance;
	overflow-wrap: break-word;
	transition: background-color var(--wp--custom--transition), transform var(--wp--custom--transition);
}

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

.wp-block-button.is-style-white .wp-element-button {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--vda-blue-dark);
}

.wp-block-button.is-style-white .wp-element-button:hover {
	background-color: #eaf2f7;
}

.wp-block-button.is-style-outline-light .wp-element-button {
	background-color: transparent;
	color: var(--wp--preset--color--white);
	border: 2px solid rgba(255, 255, 255, 0.7);
}

.wp-block-button.is-style-outline-light .wp-element-button:hover {
	background-color: rgba(255, 255, 255, 0.14);
	border-color: var(--wp--preset--color--white);
}

.wp-block-button.is-style-large .wp-element-button {
	min-height: 56px;
	padding-inline: 24px;
}

/* Textlink mit nachlaufendem Pfeil. Der Pfeil wandert beim Zeigen um 3px. */
.wp-block-button.is-style-text-link .wp-element-button {
	min-height: 0;
	padding: 0;
	background: none;
	color: var(--wp--preset--color--vda-blue-dark);
	border-radius: 0;
}

.wp-block-button.is-style-text-link .wp-element-button::after {
	content: "\2192";
	display: inline-block;
	margin-inline-start: var(--wp--preset--spacing--10);
	transition: transform var(--wp--custom--transition);
}

.wp-block-button.is-style-text-link .wp-element-button:hover {
	background: none;
	transform: none;
}

.wp-block-button.is-style-text-link .wp-element-button:hover::after {
	transform: translateX(3px);
}

.has-ink-background-color .wp-block-button.is-style-text-link .wp-element-button,
.has-vda-blue-background-color .wp-block-button.is-style-text-link .wp-element-button,
.has-vda-blue-dark-background-color .wp-block-button.is-style-text-link .wp-element-button,
.has-vda-blue-deep-background-color .wp-block-button.is-style-text-link .wp-element-button {
	color: var(--wp--preset--color--white);
}

/* 3.2 Absatzvarianten */

.is-style-eyebrow {
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 750;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--wp--preset--color--vda-blue);
	margin-block-end: var(--wp--preset--spacing--20);
}

.is-style-eyebrow-light {
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 750;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: #bcd5e7;
	margin-block-end: var(--wp--preset--spacing--20);
}

.is-style-lead {
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.5;
	max-width: 56ch;
}

.is-style-meta {
	font-size: var(--wp--preset--font-size--micro);
	color: var(--wp--preset--color--muted);
	letter-spacing: 0.02em;
}

/* 3.3 Überschrift mit blauer Linie */

.is-style-subheading-row {
	position: relative;
	padding-block-start: var(--wp--preset--spacing--30);
}

.is-style-subheading-row::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	width: 64px;
	height: 3px;
	background: var(--wp--preset--color--vda-blue);
}

/* 3.4 Listen mit Marken statt Aufzählungszeichen */

.wp-block-list.is-style-list-dash,
.wp-block-list.is-style-list-ring,
.wp-block-list.is-style-list-check {
	list-style: none;
	padding-inline-start: 0;
	margin-inline-start: 0;
}

.wp-block-list.is-style-list-dash li,
.wp-block-list.is-style-list-ring li,
.wp-block-list.is-style-list-check li {
	position: relative;
	padding-block: var(--wp--preset--spacing--20);
	padding-inline-start: var(--wp--preset--spacing--40);
	border-block-start: 1px solid var(--wp--preset--color--line);
}

.wp-block-list.is-style-list-dash li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: calc(var(--wp--preset--spacing--20) + 0.7em);
	width: 8px;
	height: 2px;
	background: var(--wp--preset--color--vda-blue);
}

.wp-block-list.is-style-list-ring li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: calc(var(--wp--preset--spacing--20) + 0.45em);
	width: 10px;
	height: 10px;
	border: 2px solid currentColor;
	border-radius: 50%;
	opacity: 0.7;
}

.wp-block-list.is-style-list-check li::before {
	content: "\2713";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: var(--wp--preset--spacing--20);
	color: #9fd3ef;
	font-weight: 700;
}

.has-vda-blue-dark-background-color .wp-block-list li,
.has-vda-blue-deep-background-color .wp-block-list li,
.has-ink-background-color .wp-block-list li {
	border-block-start-color: var(--wp--custom--line-on-dark);
}

/* 3.5 FAQ-Zeile */

.wp-block-details.is-style-faq {
	border-block-end: 1px solid #c8d1da;
	padding-block: var(--wp--preset--spacing--30);
	min-height: 80px;
}

.wp-block-details.is-style-faq summary {
	position: relative;
	list-style: none;
	cursor: pointer;
	padding-inline-end: var(--wp--preset--spacing--50);
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 650;
}

.wp-block-details.is-style-faq summary::-webkit-details-marker {
	display: none;
}

/* Plus-Zeichen aus zwei Strichen. Der senkrechte dreht beim Öffnen weg. */
.wp-block-details.is-style-faq summary::before,
.wp-block-details.is-style-faq summary::after {
	content: "";
	position: absolute;
	inset-inline-end: 4px;
	inset-block-start: 0.6em;
	width: 16px;
	height: 2px;
	background: var(--wp--preset--color--vda-blue);
	transition: transform var(--wp--custom--transition);
}

.wp-block-details.is-style-faq summary::after {
	transform: rotate(90deg);
}

.wp-block-details.is-style-faq[open] summary::after {
	transform: rotate(0deg);
}

/* 3.6 Spaltentrennlinie */

/* Drei Spalten nebeneinander stehen ohne Trennung frei im Raum - man
   sieht Textbloecke, aber nicht, wo einer aufhoert. Eine Haarlinie
   dazwischen genuegt; ein Rahmen um jede Spalte waere lauter als der
   Inhalt.

   Die Linie sitzt mittig im Zwischenraum, deshalb wird der Abstand
   nicht ueber `gap` gesetzt, sondern je zur Haelfte als Innenabstand
   links und rechts. Mit `gap` sonst saesse die Linie an der Kante der
   rechten Spalte und der Abstand waere ungleich. Aussen bleiben die
   Spalten buendig zur Inhaltskante. */
.wp-block-columns.is-style-column-rule {
	--vda-spaltenabstand: var(--wp--preset--spacing--60);
	gap: 0;
}

.wp-block-columns.is-style-column-rule > .wp-block-column {
	padding-inline: calc(var(--vda-spaltenabstand) / 2);
}

.wp-block-columns.is-style-column-rule > .wp-block-column:first-child {
	padding-inline-start: 0;
}

.wp-block-columns.is-style-column-rule > .wp-block-column:last-child {
	padding-inline-end: 0;
}

/* Die Farbe kommt von der Flaeche, auf der die Spalten stehen: auf
   Weiss reicht der helle Ton, auf einer getoenten Flaeche verschwaende
   er. Deshalb ein Standardwert mit Ausweichfarbe statt einer festen
   Angabe. */
.wp-block-columns.is-style-column-rule > .wp-block-column + .wp-block-column {
	border-inline-start: 1px solid var(--vda-spaltenlinie, var(--wp--preset--color--line));
}

/* Getoente Flaechen: der helle Standardton laege darauf fast auf der
   Grundfarbe. */
.has-periwinkle-light-background-color,
.has-paper-blue-background-color,
.has-blue-wash-background-color,
.has-paper-background-color,
.has-surface-background-color {
	--vda-spaltenlinie: var(--wp--preset--color--periwinkle);
}

/* Dunkle Flaechen: dieselbe Idee mit umgekehrtem Vorzeichen. */
.has-vda-blue-background-color,
.has-vda-blue-dark-background-color,
.has-vda-blue-deep-background-color,
.has-ink-background-color {
	--vda-spaltenlinie: rgba(255, 255, 255, 0.28);
}

/* Gestapelt wird aus der senkrechten Linie eine waagerechte. Der
   Abstand liegt zur Haelfte ueber und zur Haelfte unter ihr, damit sie
   zwischen den Bloecken sitzt und nicht am oberen klebt. */
@media (max-width: 781px) {
	.wp-block-columns.is-style-column-rule > .wp-block-column {
		padding-inline: 0;
	}

	.wp-block-columns.is-style-column-rule > .wp-block-column + .wp-block-column {
		border-inline-start: 0;
		border-block-start: 1px solid var(--vda-spaltenlinie, var(--wp--preset--color--line));
		margin-block-start: calc(var(--vda-spaltenabstand) / 2);
		padding-block-start: calc(var(--vda-spaltenabstand) / 2);
	}
}

/* ---------------------------------------------------------------
   3.6b Seitenkopf
   --------------------------------------------------------------- */

/* Der blaue Kopf mit Brotkrumen und Titel steht in siebzehn Vorlagen.
   Bis hierher trug jede ihre eigenen Werte im Markup - sechs
   verschiedene Paare fuer dieselbe Sache, und jede Aenderung haette
   siebzehn Dateien gekostet. Die Werte stehen jetzt hier, einmal, und
   haengen am Bandabstand: wer den verschiebt, verschiebt den Kopf mit.

   Unten weniger als oben, weil der Titel zum Inhalt darunter gehoert
   und nicht in der Mitte einer Flaeche schweben soll. */
.vda-page-hero {
	--vda-kopf: var(--wp--preset--spacing--section);

	padding-block: calc(var(--vda-kopf) * 0.8) calc(var(--vda-kopf) * 0.6);
}

/* Einzelansichten und Listen tragen ueber dem Kopf schon eine
   Zuordnung ("Termine des Vereins X"), da genuegt weniger Anlauf. */
.vda-page-hero--schmal {
	padding-block: calc(var(--vda-kopf) * 0.5) calc(var(--vda-kopf) * 0.45);
}

/* ---------------------------------------------------------------
   3.7 Vertikaler Rhythmus
   --------------------------------------------------------------- */

/* WordPress gibt jedem Block denselben Abstand nach oben - 16 Pixel,
   ganz gleich ob ein Absatz auf einen Absatz folgt oder ein neues
   Kapitel beginnt. Auf der Startseite faellt das nicht auf, weil dort
   jeder Abschnitt in einem eigenen Band mit eigenem Abstand steht. Auf
   den Unterseiten steht alles im selben Fluss, und dort liest sich ein
   gleichmaessiger Abstand wie eine einzige lange Wand aus Text: man
   sieht nicht, wo ein Gedanke aufhoert und der naechste anfaengt.
   Deshalb bekommt jede Ueberschrift Luft nach ihrer Ordnung - eine H2
   mehr als eine H3 - und der Text darunter rueckt eng an sie heran.
   Eine Ueberschrift gehoert zu dem, was ihr folgt, nicht zu dem, was
   vor ihr steht.

   Die Werte stehen als Variablen, damit sich der ganze Rhythmus an
   einer Stelle verschieben laesst statt an dreissig.

   Warum das hier steht und nicht in der theme.json: WordPress liefert
   seine Abstandsregel als `:where(body .is-layout-flow) > *` aus. Die
   Spezifitaet von `:where()` ist null, jede Regel mit einer Klasse
   schlaegt sie. Die Elementstile aus der theme.json kaemen dagegen
   selbst als `:where()` und wuerden vom Layout wieder ueberschrieben. */
:root {
	/* Vor einem neuen Kapitel. */
	--vda-rhythmus-kapitel: var(--wp--preset--spacing--heading);
	/* Vor einem Unterpunkt. */
	--vda-rhythmus-unter: var(--wp--preset--spacing--50);
	/* Vor einer Zwischenstufe darunter. */
	--vda-rhythmus-klein: var(--wp--preset--spacing--40);
	/* Vor etwas, das keine Ueberschrift ist, aber Gewicht hat:
	   Bild, Zitat, Tabelle, Trenner. */
	--vda-rhythmus-block: var(--wp--preset--spacing--30);
	/* Nach einer Ueberschrift. Eng, damit die Zusammengehoerigkeit
	   sichtbar bleibt. */
	--vda-rhythmus-anschluss: var(--wp--preset--spacing--10);
}

/* Gilt fuer den Fliesstext von Seiten und Beitraegen. Bausteine mit
   eigenem Aufbau (alles mit `vda-` im Klassennamen) bleiben aussen vor:
   deren Abstaende gehoeren zu ihrem Aufbau, nicht zum Textfluss. */
.entry-content > :is(h2, h3, h4, h5) {
	margin-block-start: var(--vda-rhythmus-klein);
}

.entry-content > h2 {
	margin-block-start: var(--vda-rhythmus-kapitel);
}

.entry-content > h3 {
	margin-block-start: var(--vda-rhythmus-unter);
}

/* Was direkt auf eine Ueberschrift folgt, rueckt an sie heran. */
.entry-content > :is(h2, h3, h4, h5) + * {
	margin-block-start: var(--vda-rhythmus-anschluss);
}

/* Bilder, Zitate, Tabellen und Trenner brauchen mehr Luft als ein
   Absatz, aber weniger als ein Kapitelwechsel. */
.entry-content > :is(figure, table, blockquote, .wp-block-image, .wp-block-table, .wp-block-quote, .wp-block-embed, .wp-block-buttons) {
	margin-block-start: var(--vda-rhythmus-block);
}

/* Das erste Element steht buendig oben - sonst faengt jede Seite mit
   einer Luecke unter der Ueberschrift an. */
.entry-content > :first-child {
	margin-block-start: 0;
}

/* ---------------------------------------------------------------
   3.8 Bezirkskarten
   --------------------------------------------------------------- */

/* Die Bezirksseite bestand aus 51 Absaetzen hintereinander: Gebiet,
   Name, Anschrift und Kontakt eines Bezirks standen als vier gleich
   aussehende Zeilen untereinander, ohne dass etwas zeigte, wo ein
   Bezirk aufhoert und der naechste beginnt. Die Nummer stand nirgends
   im Text - sie steckte allein im Wort eines E-Mail-Verweises.

   Jeder Bezirk ist jetzt eine Gruppe mit einer Ueberschrift. Das Raster
   entsteht hier, damit im Editor gewoehnliche Gruppen stehen bleiben,
   die man anfassen, verschieben und aendern kann. Kein Block, den nur
   diese Seite kennt. */
.vda-bezirksraster {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
	gap: var(--wp--preset--spacing--40);
	margin-block-start: var(--wp--preset--spacing--50);
}

/* Der Block-Editor gibt jedem Kind ausser dem ersten einen Abstand nach
   oben. Im Raster sorgt der fuer eine verschobene erste Zeile. */
.vda-bezirksraster > * {
	margin-block-start: 0;
}

.vda-bezirkskarte {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius);
}

/* Die Anschrift steht unten buendig, damit die Karten trotz
   unterschiedlich langer Gebietsangaben eine gemeinsame Grundlinie
   haben. */
.vda-bezirkskarte__kontakt {
	margin-block-start: auto;
	padding-block-start: 10px;
	border-block-start: 1px solid var(--wp--preset--color--line);
}

.vda-bezirkskarte__titel {
	margin: 0;
	font-size: 19px;
	line-height: 1.25;
	color: var(--wp--preset--color--vda-blue);
}

/* Das Gebiet ist die Nebenangabe: es sagt, wer dazugehoert, und ist
   oft lang. Kleiner und ruhiger gesetzt bleibt der Name die
   Hauptsache. */
.vda-bezirkskarte__gebiet {
	margin: 0;
	font-size: 14px;
	line-height: 1.45;
	color: var(--wp--preset--color--muted);
}

.vda-bezirkskarte__person,
.vda-bezirkskarte__adresse,
.vda-bezirkskarte__kontakt {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
}

.vda-bezirkskarte__person {
	margin-block-start: 4px;
}

/* Ein unbesetzter Bezirk soll nicht wie ein Fehler aussehen, sondern
   wie eine Angabe. */
.vda-bezirkskarte__hinweis {
	margin: 0;
	padding: 8px 12px;
	font-size: 14px;
	color: var(--wp--preset--color--muted);
	background: var(--wp--preset--color--paper);
	border-radius: 6px;
}

/* Der Einstieg: Text und die Karte der Bezirke nebeneinander. Die
   Karte gehoert nach oben, weil sie die Frage beantwortet, mit der
   jemand auf diese Seite kommt - wo bin ich? Unten am Seitenende, wie
   sie vorher stand, sah sie niemand, der oben nach seinem Bezirk
   suchte. */
.vda-bezirks-einstieg {
	margin-block-end: var(--wp--preset--spacing--50);
}

.vda-bezirks-einstieg__karte img {
	width: 100%;
	max-width: 340px;
	height: auto;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius);
	background: var(--wp--preset--color--white);
}

.vda-bildunterschrift {
	margin-block-start: 8px;
	font-size: 14px;
	color: var(--wp--preset--color--muted);
}

/* Der Aufruf zur Mitgliedschaft.

   Er stand auf elf Seiten in elf Fassungen - mal als Knopf mit einem
   ganzen Satz darauf, mal als drei Zeilen unter einem Bild. Jetzt ist es
   ein Block, und diese Regeln gelten ueberall, wo er steht. */
.vda-beitritt {
	margin-block-start: var(--wp--preset--spacing--section);
	padding: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--paper-blue);
	border-radius: var(--wp--custom--radius);
}

.vda-beitritt__innen {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: var(--wp--preset--spacing--50);
	align-items: center;
}

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

.vda-beitritt__text > * + * {
	margin-block-start: 12px;
}

/* Die Ueberschrift eines Aufrufs ist keine Kapitelueberschrift. In
   voller H2-Groesse erschlaegt sie den Satz darunter, der die
   eigentliche Botschaft traegt. */
.vda-beitritt__titel {
	max-width: none;
	font-size: clamp(26px, 2.4vw, 34px);
	line-height: 1.2;
}

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

.vda-beitritt__karte {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--wp--custom--radius);
	box-shadow: 0 8px 24px rgba(16, 28, 37, 0.14);
}

@media (max-width: 781px) {
	.vda-bezirks-einstieg__karte {
		margin-block-start: var(--wp--preset--spacing--40);
	}

	.vda-beitritt {
		padding: var(--wp--preset--spacing--40);
	}

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

/* Die Karte der Bezirke.

   Die Farben kommen aus der Palette: helles Blau als Flaeche, das
   Verbandsblau beim Zeigen. Zwei Toene reichen - 19 verschiedene Farben
   waeren huebsch anzusehen und unbrauchbar zum Wiederfinden. Die
   Nummer steht ohnehin in jeder Flaeche. */
.vda-bezirksuebersicht {
	/* Eigener Name statt `vda-karte`: den gibt es schon in vereine.css
	   fuer die Standortkarte eines Vereins, und die wird als flex
	   gesetzt. Zwei Dinge unter einem Namen heisst, dass eines von
	   beiden kaputtgeht, sobald jemand am anderen arbeitet. */
	margin: 0;
}

.vda-bezirkskarte-svg {
	display: block;
	width: 100%;
	max-width: 360px;
	height: auto;
	margin-inline: auto;
}

.vda-bezirksuebersicht__flaeche path {
	fill: var(--wp--preset--color--blue-soft);
	stroke: var(--wp--preset--color--white);
	stroke-width: 1;
	stroke-linejoin: round;
	transition: fill var(--wp--custom--transition);
}

/* Die Groesse gilt im Koordinatensystem der Zeichnung (520 breit),
   nicht auf dem Bildschirm. Bei 340 Bildpunkten Anzeigebreite wird
   daraus gut ein Drittel weniger - 13 waeren dann acht, und acht liest
   niemand. */
.vda-bezirksuebersicht__nummer {
	font-size: 19px;
	font-weight: 700;
	text-anchor: middle;
	dominant-baseline: middle;
	fill: var(--wp--preset--color--vda-blue-deep);
	/* Die Nummer soll den Zeiger nicht abfangen: sonst zaehlt der Klick
	   auf die Ziffer nicht als Klick auf die Flaeche. */
	pointer-events: none;
	transition: fill var(--wp--custom--transition);
}

.vda-bezirksuebersicht__flaeche:hover path,
.vda-bezirksuebersicht__flaeche:focus-visible path {
	fill: var(--wp--preset--color--vda-blue);
}

.vda-bezirksuebersicht__flaeche:hover .vda-bezirksuebersicht__nummer,
.vda-bezirksuebersicht__flaeche:focus-visible .vda-bezirksuebersicht__nummer {
	fill: var(--wp--preset--color--white);
}

/* Der Fokusrahmen sitzt bei einem SVG-Verweis sonst um die ganze
   Zeichenflaeche statt um die Flaeche, die gerade dran ist. */
.vda-bezirksuebersicht__flaeche:focus {
	outline: none;
}

.vda-bezirksuebersicht__flaeche:focus-visible path {
	stroke: var(--wp--preset--color--ink);
	stroke-width: 2;
}

.vda-bezirksuebersicht__text {
	margin-block-start: 10px;
	font-size: 14px;
	line-height: 1.45;
	color: var(--wp--preset--color--muted);
	text-align: center;
}

/* Bezirke ohne eigene Flaeche stehen als Verweis darunter. */
.vda-bezirksuebersicht__ausserhalb {
	margin: 6px 0 0;
	padding: 0;
	list-style: none;
}

.vda-bezirksuebersicht__ausserhalb a {
	font-weight: 600;
}

/* Eine angesprungene Karte hebt sich kurz hervor, sonst weiss niemand,
   wo er nach dem Sprung gelandet ist. */
.vda-bezirkskarte:target {
	border-color: var(--wp--preset--color--vda-blue);
	box-shadow: 0 0 0 3px var(--wp--preset--color--blue-wash);
}

/* Ohne diesen Abstand verschwindet die angesprungene Karte unter der
   festen Kopfleiste. */
.vda-bezirkskarte {
	scroll-margin-top: 96px;
}

/* Kacheln fuer die Unterseiten einer Uebersichtsseite. */
.vda-unterseiten {
	margin-block-start: var(--wp--preset--spacing--50);
}

.vda-unterseiten__titel {
	margin-block: 0 var(--wp--preset--spacing--30);
	max-width: none;
	font-size: clamp(24px, 2.2vw, 30px);
}

.vda-unterseiten__liste {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Der ganze Kasten ist der Verweis, nicht nur die Ueberschrift darin -
   ein Ziel, das man trifft, statt drei Zeilen Text zum Zielen. */
.vda-unterseiten__kachel {
	display: flex;
	gap: 14px;
	height: 100%;
	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);
	text-decoration: none;
	color: inherit;
	transition: border-color var(--wp--custom--transition),
		box-shadow var(--wp--custom--transition);
}

.vda-unterseiten__kachel:hover,
.vda-unterseiten__kachel:focus-visible {
	border-color: var(--wp--preset--color--vda-blue);
	box-shadow: 0 6px 18px rgba(16, 28, 37, 0.08);
}

.vda-unterseiten__symbol {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	color: var(--wp--preset--color--vda-blue);
	background: var(--wp--preset--color--blue-wash);
	border-radius: 8px;
}

.vda-unterseiten__symbol svg {
	width: 22px;
	height: 22px;
}

.vda-unterseiten__text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.vda-unterseiten__name {
	font-weight: 700;
	font-size: 17px;
	line-height: 1.3;
	color: var(--wp--preset--color--vda-blue);
}

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

/* Wie viele Seiten dahinterliegen - das sagt, ob sich das Klicken
   lohnt. Bei den Referaten sind es sechzehn. */
.vda-unterseiten__anzahl {
	margin-block-start: 2px;
	font-size: 13px;
	color: var(--wp--preset--color--muted);
}

/* Der Hinweis auf die Spendenseite.

   Auf der laufenden Seite ist das ein Bild mit eingebranntem Text. Hier
   steht Text: lesbar in jeder Groesse, auffindbar, in einer Minute
   geaendert - dazu ein Motiv, das zeigt, wofuer gespendet wird.

   Auf dunklem Blau, waehrend der Beitrittsaufruf auf hellem Blau steht.
   Zwei Aufrufe auf einer Seite duerfen nicht gleich laut sein, aber
   einer, den niemand bemerkt, ist auch keine Loesung: als heller Kasten
   zwischen zwei hellen Abschnitten ging dieser hier unter. */
/* Der Kasten braucht Luft nach oben und unten. Ein Aussenabstand am
   Kasten selbst wirkt nicht: `main.wp-block-group > * { margin: 0 }`
   fuegt die Baender der Startseite bewusst bündig aneinander und
   gewinnt gegen eine einzelne Klasse. Deshalb bekommt der Hinweis eine
   eigene Bahn mit Polster - genau wie jeder andere Abschnitt. */
.vda-spendenband {
	display: block;
	padding-block: var(--wp--preset--spacing--section);
}

.vda-spendenhinweis {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--vda-blue-deep);
	border-radius: var(--wp--custom--radius);
	overflow: hidden;
}

/* Auf farbiger Flaeche steht die Schrift immer ausdruecklich weiss -
   sonst gewinnt die Grundfarbe aus der theme.json und der Kontrast
   bricht ein. */
.vda-spendenhinweis,
.vda-spendenhinweis .vda-spendenhinweis__titel,
.vda-spendenhinweis .vda-spendenhinweis__text {
	color: var(--wp--preset--color--white);
}

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

.vda-spendenhinweis__titel {
	max-width: none;
	font-size: clamp(26px, 2.4vw, 34px);
	line-height: 1.2;
}

.vda-spendenhinweis__text {
	margin-block-start: 12px;
	line-height: 1.55;
}

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

.vda-spendenhinweis__bild {
	display: block;
	width: 100%;
	height: 100%;
	max-height: 260px;
	object-fit: cover;
	border-radius: var(--wp--custom--radius-small);
}

/* Die Strichzeichnung ist kein Foto: sie darf nicht beschnitten werden
   und braucht weder Rundung noch Rahmen, sie steht frei auf dem Blau. */
.vda-spendenhinweis__bild--grafik {
	height: auto;
	max-height: 220px;
	object-fit: contain;
	border-radius: 0;
}

/* Der helle Knopf auf dunklem Grund. Das Gegenstueck zu
   .vda-knopf-voll, das auf hellen Flaechen steht. */
.vda-knopf-hell {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding-inline: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	color: var(--wp--preset--color--vda-blue-deep);
	background: var(--wp--preset--color--white);
	border: 1.5px solid var(--wp--preset--color--white);
	border-radius: var(--wp--custom--radius);
	text-decoration: none;
	transition: background-color var(--wp--custom--transition),
		color var(--wp--custom--transition);
}

.vda-knopf-hell:hover,
.vda-knopf-hell:focus-visible {
	background: var(--wp--preset--color--paper-blue);
	color: var(--wp--preset--color--vda-blue-deep);
}

@media (max-width: 781px) {
	.vda-spendenhinweis {
		grid-template-columns: minmax(0, 1fr);
		padding: var(--wp--preset--spacing--40);
	}

	/* Auf schmalen Geraeten zuerst das Bild, dann der Text - so
	   herum liest es sich wie eine Bildunterschrift. */
	.vda-spendenhinweis__motiv {
		order: -1;
	}

	.vda-spendenhinweis__bild {
		max-height: 180px;
	}
}

/* ---------------------------------------------------------------
   4. Bewegung
   --------------------------------------------------------------- */

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

/* ---------------------------------------------------------------
   21. Downloads und Brotkrumen
   --------------------------------------------------------------- */

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

/* Ein Download soll aussehen wie etwas, das man anfassen kann. Vorher
   war es eine helle Flaeche mit duennem Rand.

   Wichtiger noch: alle gleich hoch. Ein Titel mit drei Zeilen neben
   einem mit zweien liess die Liste zufaellig wirken, als waeren die
   Knoepfe verschieden wichtig. Jetzt steht das Kennzeichen an einer
   festen Stelle, der Titel bekommt zwei Zeilen Platz - laenger wird
   er abgeschnitten - und darunter steht die Groesse. Damit hat jeder
   Knopf dieselbe Hoehe, und das Auge findet die Angaben immer an
   derselben Stelle. */
.vda-download a {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr) 24px;
	gap: 14px;
	align-items: center;
	min-height: 84px;
	padding: 14px 16px;
	background: var(--wp--preset--color--white);
	border: 1.5px solid var(--wp--preset--color--vda-blue);
	border-radius: var(--wp--custom--radius-small);
	text-decoration: none;
	color: var(--wp--preset--color--vda-blue-dark);
	box-shadow: 0 1px 0 rgba( 0, 0, 0, 0.04 );
	transition:
		border-color var(--wp--custom--transition),
		background-color var(--wp--custom--transition),
		transform var(--wp--custom--transition);
}

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

.vda-download a:active {
	transform: translateY(1px);
}

/* Das Kennzeichen: Blatt mit der Dateiart darauf. So ist ohne Lesen
   zu sehen, was einen erwartet. */
.vda-download__marke {
	position: relative;
	display: grid;
	place-items: center;
	width: 48px;
	height: 56px;
	color: var(--wp--preset--color--vda-blue);
}

.vda-download__marke svg {
	width: 46px;
	height: 46px;
}

.vda-download__typ {
	position: absolute;
	bottom: 8px;
	left: 50%;
	transform: translateX(-50%);
	padding: 1px 5px;
	border-radius: 3px;
	background: var(--wp--preset--color--vda-blue);
	color: var(--wp--preset--color--white);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.4;
}

.vda-download__text {
	display: grid;
	gap: 3px;
	min-width: 0;
}

/* Zwei Zeilen fuer den Titel, damit alle Knoepfe gleich hoch bleiben.
   Der volle Name steht im title-Attribut und in der Datei selbst. */
.vda-download__text strong {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	line-height: 1.3;
	/* Zwei Zeilen Platz, auch wenn der Titel nur eine braucht: sonst
	   steht ein kurzer Name neben einem langen und die Knoepfe sind
	   verschieden hoch. */
	min-height: 2.6em;
	/* anywhere brach mitten im Wort und liess ein einzelnes "n" von
	   "Versicherungsinformationen" auf der zweiten Zeile stehen.
	   break-word bricht nur, wenn ein Wort sonst herausragt, und die
	   Silbentrennung fuehrt den Bruch an eine Stelle, an der er
	   aussieht wie gewollt. */
	overflow-wrap: break-word;
	hyphens: auto;
}

.vda-download__text small {
	font-size: var(--wp--preset--font-size--micro);
	color: var(--wp--preset--color--muted);
}

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

.vda-download__ziehen svg {
	display: block;
	width: 22px;
	height: 22px;
}

.vda-download a:hover .vda-download__ziehen {
	transform: translateY(2px);
}

/* Brotkrumen */
.vda-brotkrumen {
	margin-block: 0 var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	/* Ein langer Seitentitel als letzte Stufe ist ein einziges Wortband
	   ohne Umbruchstelle und schob die Seite bei 320 Pixel um acht Pixel
	   nach rechts. */
	overflow-wrap: anywhere;
	hyphens: auto;
}

.vda-brotkrumen a {
	color: var(--wp--preset--color--vda-blue);
	text-decoration: none;
	/* Bei 14 Pixel Schrift ist ein Verweis nur etwa 17 Pixel hoch. Die
	   WCAG verlangen 24. Die Polsterung schafft die fehlende Höhe, ohne
	   die Zeile auseinanderzuziehen: der negative Rand nimmt sie
	   optisch wieder zurück. */
	display: inline-block;
	padding-block: 4px;
	margin-block: -4px;
	min-height: 24px;
	line-height: 16px;
}

.vda-brotkrumen a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.vda-brotkrumen__pfeil {
	margin-inline: 7px;
	color: var(--wp--preset--color--periwinkle);
}

.vda-brotkrumen [aria-current="page"] {
	color: var(--wp--preset--color--ink);
	font-weight: 600;
}

/* Hinweis auf Widgets, die beim Umbau offen blieben */
.vda-umbau-offen {
	padding: 12px 16px;
	background: #fff8e6;
	border-inline-start: 4px solid #e0a800;
	border-radius: var(--wp--custom--radius-small);
	font-size: var(--wp--preset--font-size--small);
	color: #6b5200;
}


/* ---------------------------------------------------------------
   Das Attribut hidden gilt überall
   Die Browserregel [hidden] { display: none } hat die schwächste
   Spezifität. Jede Klassenregel mit display schlägt sie, und ein
   verstecktes Element wird trotzdem sichtbar. Diese Zeile stellt
   das für die eigenen Bausteine wieder her.
   --------------------------------------------------------------- */

[class^="vda-"][hidden],
[class*=" vda-"][hidden] {
	display: none !important;
}

/* ---------------------------------------------------------------
   22. Kontraste auf farbigen Flächen
   Gemessen mit kontrast.mjs. Auf jeder farbigen Fläche muss die
   Schrift die geforderten 4.5 zu 1 erreichen, sonst geht sie unter.
   --------------------------------------------------------------- */

/* Auf mittlerem Blau war die Vorzeile mit 4.21 knapp darunter. Das
   gilt auch für die Beschriftungen im Zahlenband, die als schlichte
   Textstellen ohne eigene Klasse dort stehen. */
.has-vda-blue-background-color .is-style-eyebrow,
.has-vda-blue-background-color .is-style-eyebrow-light,
.has-vda-blue-background-color .vda-eyebrow,
.vda-facts .vda-fact span,
.vda-facts .vda-fact p span {
	color: #e7f2fa;
}

/* Auf dunklem Blau war die Überschrift in Verbandsblau praktisch
   unsichtbar, gemessen 1.45 zu 1. Die Palette nennt den Ton
   vda-blue-dark, nicht deep. */
.has-vda-blue-dark-background-color h1,
.has-vda-blue-dark-background-color h2,
.has-vda-blue-dark-background-color h3,
.has-vda-blue-dark-background-color h4,
.has-vda-blue-dark-background-color h5,
.has-vda-blue-dark-background-color h6,
.has-vda-blue-deep-background-color h1,
.has-vda-blue-deep-background-color h2,
.has-vda-blue-deep-background-color h3,
.has-vda-blue-deep-background-color h4,
.has-vda-blue-deep-background-color h5,
.has-vda-blue-deep-background-color h6,
.has-vda-blue-background-color h5,
.has-vda-blue-background-color h6 {
	color: var(--wp--preset--color--white);
}

.has-vda-blue-deep-background-color .is-style-eyebrow,
.has-vda-blue-deep-background-color .is-style-eyebrow-light,
.has-vda-blue-dark-background-color .is-style-eyebrow,
.has-vda-blue-dark-background-color .is-style-eyebrow-light {
	color: #cfe6f4;
}

/* Auf hellem Blau braucht die Vorzeile den dunklen Ton. */
.has-paper-blue-background-color .is-style-eyebrow,
.has-paper-blue-background-color .vda-eyebrow,
.has-periwinkle-light-background-color .is-style-eyebrow,
.has-periwinkle-light-background-color .vda-eyebrow {
	color: var(--wp--preset--color--vda-blue-dark, #00558a);
}

/* Im Fuß stand die Spaltenüberschrift in Verbandsblau auf fast
   Schwarz, gemessen 3.18 zu 1. */
.vda-footer h1,
.vda-footer h2,
.vda-footer h3,
.vda-footer h4,
.vda-footer h5,
.vda-footer h6,
.has-ink-background-color h5,
.has-ink-background-color h6 {
	color: #7cc0ea;
}

/* Der Trenner in den Brotkrumen war zu blass zum Lesen. Seit der Pfad
   im blauen Seitenkopf steht, reichte auch #6b7885 nicht mehr: auf
   #e8f2fa ergab das 3.98 zu 1. */
.vda-brotkrumen__pfeil {
	color: #5a6774;
}

/* ---------------------------------------------------------------
   23. Fußbereich
   Nachgebaut aus dem Entwurf: Aussage, Verzeichnis in vier Spalten,
   soziale Netzwerke, Rechtszeile.
   --------------------------------------------------------------- */

.vda-footer {
	overflow: clip;
}

/* Die drei Sätze stehen groß und je auf einer eigenen Zeile. */
.vda-footer__statement {
	margin: 0;
	padding-block: clamp(28px, 2.8vw, 40px) clamp(24px, 2.4vw, 34px);
	border-block-end: 1px solid rgba(255, 255, 255, 0.16);
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--display-5);
	font-weight: 750;
	letter-spacing: -0.035em;
	line-height: 0.98;
}

.vda-footer__statement > span {
	display: block;
	white-space: nowrap;
}

.vda-footer__directory {
	display: grid;
	grid-template-columns: minmax(260px, 1.25fr) minmax(170px, 1fr) minmax(140px, 0.65fr) minmax(175px, 0.8fr);
	gap: clamp(24px, 3vw, 56px);
	align-items: start;
	padding-block: clamp(28px, 3vw, 44px);
	margin-block: 0;
}

/* Die Spalten sind hier ein Raster, die Blockbreiten stören dabei. */
.vda-footer__directory > .wp-block-column {
	flex-basis: auto !important;
	min-width: 0;
}

.vda-footer__brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	min-width: 0;
}

.vda-footer__brand .wp-block-site-logo img {
	width: 72px;
	height: 72px;
	object-fit: contain;
}

.vda-footer__name {
	max-width: 34ch;
	margin: 0;
	color: var(--wp--preset--color--white);
	font-weight: 700;
	line-height: 1.35;
}

.vda-footer__claim {
	max-width: 38ch;
	margin: -9px 0 0;
	color: var(--wp--preset--color--white);
}

.vda-footer__group h3 {
	margin: 0 0 18px;
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 750;
	letter-spacing: 0.14em;
	line-height: 1;
	text-transform: uppercase;
}

.vda-footer__group .wp-block-list {
	display: grid;
	gap: 7px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Die erste Gruppe hat acht Punkte und steht deshalb zweispaltig. */
.vda-footer__group--breit .wp-block-list {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 7px 20px;
}

.vda-footer__group .wp-block-list a {
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.25;
	text-decoration: none;
	white-space: nowrap;
}

.vda-footer__group .wp-block-list a:hover {
	color: var(--wp--preset--color--white);
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.vda-footer__social {
	min-height: 56px;
	gap: 32px;
	border-block-start: 1px solid rgba(255, 255, 255, 0.16);
	margin-block: 0;
}

.vda-footer__social-titel {
	margin: 0;
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 750;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.vda-footer__social-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 11px 24px;
	margin: 0;
}

.vda-footer__social-links a {
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 650;
	text-decoration: none;
	white-space: nowrap;
	min-height: 24px;
	display: inline-flex;
	align-items: center;
}

.vda-footer__social-links a:hover {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.vda-footer__legal {
	min-height: 56px;
	gap: 32px;
	border-block-start: 1px solid rgba(255, 255, 255, 0.16);
	color: var(--wp--preset--color--white);
	margin-block: 0;
}

.vda-footer__legal p {
	margin: 0;
}

.vda-footer__nachoben a {
	color: var(--wp--preset--color--white);
	text-decoration: none;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	min-height: 24px;
}

.vda-footer__nachoben a:hover {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

@media (max-width: 1023px) {
	.vda-footer__directory {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 44px 40px;
	}

	.vda-footer__brand,
	.vda-footer__group--breit {
		grid-column: 1 / -1;
	}
}

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

	.vda-footer__group--breit .wp-block-list {
		grid-template-columns: minmax(0, 1fr);
	}

	.vda-footer__statement > span {
		white-space: normal;
	}

	.vda-footer__social,
	.vda-footer__legal {
		min-height: 0;
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
		padding-block: 20px;
	}
}

/* Im dunklen Fuß steht das Logo als weißer Umriss. */
.vda-footer__logo {
	display: block;
	width: 72px;
	height: 72px;
	object-fit: contain;
}

/* Der Knopf zur Vereinssuche trägt im Entwurf ein Ortssymbol.
   Als Hintergrundbild bleibt es eine reine Stilfrage und muss nicht
   in jedem Muster als Auszeichnung stehen. */
.vda-knopf-ort {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.vda-knopf-ort::before {
	content: "";
	width: 20px;
	height: 20px;
	flex: none;
	background: currentColor;
	-webkit-mask: var(--vda-symbol-ort) center / contain no-repeat;
	mask: var(--vda-symbol-ort) center / contain no-repeat;
}

:root {
	--vda-symbol-ort: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 5-8 11-8 11S4 15 4 10a8 8 0 1 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E");
	--vda-symbol-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
}

/* Der Kopf klebt oben. Ohne diesen Abstand landet jeder Sprung zu
   einer Marke unter ihm und die ersten Zeilen sind verdeckt. */
html {
	scroll-padding-block-start: 96px;
}

@media (max-width: 1023px) {
	html {
		scroll-padding-block-start: 72px;
	}
}

/* ---------------------------------------------------------------
   24. Einstiegsband
   Nachgebaut aus dem Entwurf: Bild als Fläche, Claim in drei festen
   Zeilen, Text links davor.
   --------------------------------------------------------------- */

.vda-hero {
	position: relative;
	min-height: 590px;
	display: flex;
	align-items: center;
	overflow: hidden;
	background-color: #c4d4e8;
	background-position: 50% 50%;
	background-size: cover;
	background-repeat: no-repeat;
	padding-block: 0 !important;
}

/* Der Entwurf setzt weißen Text auf das Bild. Auf dem hellen Teil
   links kommt der auf 1.51 zu 1 und ist kaum zu lesen. Ein Verlauf
   darunter hebt ihn auf über 7 zu 1, ohne das Bild zu verdecken. */
.vda-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(2, 30, 51, 0.72) 0%, rgba(2, 30, 51, 0.55) 38%, rgba(2, 30, 51, 0.12) 62%, rgba(2, 30, 51, 0) 78%);
	pointer-events: none;
}

/* Der Seitenrand gehoert an die Bahn, nicht an den Kasten darin - so
   macht es auch das Zahlenband darunter. Stand er am Kasten, kam er zu
   der Zentrierung der 1220er-Box hinzu, und die Ueberschrift begann 48
   Punkte weiter rechts als das Logo und jeder andere Inhalt. */
.vda-hero {
	padding-inline: var(--wp--preset--spacing--inline);
}

.vda-hero__inner {
	width: 100%;
	max-width: var(--wp--style--global--wide-size, 1220px);
	margin-inline: auto;
}

.vda-hero__content {
	position: relative;
	z-index: 2;
	max-width: 640px;
	padding-block: clamp(64px, 8vw, 112px);
}

/* Die Vorzeile sitzt in der Überschrift, damit sie mit ihr umbricht. */
.vda-hero h1 .vda-hero__kicker {
	display: block;
	margin-block-end: 12px;
	/* Am Pixel gemessen lag #bfe0f5 über dem Herofoto bei 4,44 zu 1
	   und damit knapp unter der Stufe AA. #d6edfc erreicht 5,08 und
	   behält den bläulichen Ton. */
	color: #d6edfc;
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 750;
	letter-spacing: 0.11em;
	line-height: 1.2;
	text-transform: uppercase;
	text-shadow: none;
}

.vda-hero h1 {
	max-width: none;
	margin: 0;
	color: var(--wp--preset--color--white);
	font-weight: 700;
	letter-spacing: -0.045em;
	line-height: 0.92;
	text-shadow: 0 2px 20px rgba(0, 42, 70, 0.28);
}

/* Jede Zeile bleibt zusammen. Ohne das bricht der Claim an
   beliebiger Stelle und braucht vier oder fünf Zeilen. */
.vda-hero h1 > span:not(.vda-hero__kicker) {
	display: block;
	white-space: nowrap;
}

.vda-hero__copy {
	max-width: 590px;
	margin: 26px 0 0;
	color: #eaf3fa;
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.5;
}

.vda-hero__copy-fest {
	white-space: nowrap;
}

.vda-hero__aktionen {
	align-items: center;
	gap: var(--wp--preset--spacing--40);
}

@media (max-width: 1023px) {
	.vda-hero {
		min-height: 520px;
	}

	/* Die Vorlage begrenzt auf 13 Zeichen. Das passt zu ihrer
	   Schriftgröße, bei der kleineren hier bräche der Titel dadurch
	   mitten im Satzteil um. */
	.vda-hero h1 {
		max-width: none;
	}
}

@media (max-width: 782px) {
	.vda-hero {
		min-height: auto;
		/* Das Bild deckt jetzt die ganze Fläche, auch hinter dem Text.

		   Vorher hing es als Streifen unten dran (`100% auto`, unten
		   angeschlagen) und der obere Teil, in dem der Titel steht,
		   war eine leere blaue Fläche. Mit `cover` und dem Ausschnitt
		   bei 34 Prozent Höhe steht der Titel im Motiv, und der untere
		   Rand bleibt frei genug, dass nichts Wichtiges abschneidet. */
		background-position: center 34%;
		background-size: cover;
		padding-block-end: clamp(80px, 14vw, 140px) !important;
	}

	.vda-hero__content {
		padding-block: 60px 32px;
	}

	/* Der Schleier läuft hier von unten nach oben statt schräg.

	   Oben, wo der Text steht, dämpft er das Bild so weit, dass die
	   helle Schrift darauf steht wie auf dem breiten Schirm. Nur der
	   freie Streifen unten läuft aus, dort kommt das Motiv in voller
	   Kraft durch.

	   Die Stopps stehen bewusst in Pixeln und nicht in Prozent: mit
	   Prozentwerten wandert die Auslaufzone mit der Bandhöhe, und der
	   zweite Verweis rutschte bei 375 Pixeln auf 2,96 zu 1 ab. */
	.vda-hero::before {
		display: block;
		background: linear-gradient(
			0deg,
			rgba(2, 30, 51, 0.06) 0,
			rgba(2, 30, 51, 0.5) 62px,
			rgba(2, 30, 51, 0.74) 130px,
			rgba(2, 30, 51, 0.78) 100%
		);
	}

	.vda-hero__aktionen {
		max-width: none;
	}

	.vda-hero h1 > span:not(.vda-hero__kicker) {
		white-space: normal;
	}

	.vda-hero__copy {
		max-width: 38ch;
	}
}

/* Das Layout constrained zentriert jedes Kind. Der Textblock im
   Einstiegsband soll aber links stehen, sonst liegt er mitten auf
   dem Bild und wird unlesbar. */
.vda-hero .vda-hero__content {
	margin-inline: 0 auto !important;
}

/* Die Knopfzeile bleibt in der Breite des Textes, sonst läuft der
   zweite Verweis in den bunten Teil des Bildes und wird unlesbar. */
.vda-hero__aktionen {
	max-width: 560px;
}

/* Der Blockstil text-link bringt sein Blau mit und hat mehr Gewicht.
   Auf dem Bild braucht der Verweis aber die helle Farbe. */
.vda-hero .wp-block-button.is-style-text-link.vda-hero__link .wp-element-button {
	color: var(--wp--preset--color--white);
}

/* ---------------------------------------------------------------
   25. Aktuell beim VDA
   Zwei Spalten nach dem Entwurf: Termine links, Neuigkeiten rechts.
   --------------------------------------------------------------- */

.vda-current__kopf {
	gap: var(--wp--preset--spacing--60);
	margin-block-end: var(--wp--preset--spacing--70);
}

.vda-current__kopf h2 {
	margin-block: 6px 0;
}

.vda-current__intro {
	max-width: 46ch;
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.5;
}

/* Die Spaltenklasse von WordPress bringt display: flex mit. Ohne die
   zusaetzliche Klasse im Selektor bliebe das Raster wirkungslos und
   die linke Spalte waere nur ein paar Zeichen breit. */
.wp-block-columns.vda-current__grid {
	display: grid;
	/* Links die Neuigkeiten, rechts die Termine - und links breiter,
	   weil dort der Aufmacher mit Bild steht. Die Werte gehoeren zur
	   Reihenfolge im Muster: wer die Spalten dort tauscht, muss sie
	   hier mittauschen. */
	grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
	gap: clamp(40px, 6vw, 88px);
	margin-block: 0;
}

.wp-block-columns.vda-current__grid > .wp-block-column {
	flex-basis: auto !important;
	min-width: 0;
}

/* Die Zwischenüberschrift mit ihrem Verweis. */
.vda-subheading {
	gap: var(--wp--preset--spacing--40);
	padding-block-end: 12px;
	margin-block-end: 0;
	border-block-end: 2px solid var(--wp--preset--color--ink);
}

.vda-subheading h3 {
	margin: 0;
	font-size: 20px;
	line-height: 1.2;
}

.vda-subheading__link {
	margin: 0;
	white-space: nowrap;
}

.vda-subheading__link a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 24px;
	color: var(--wp--preset--color--vda-blue);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 650;
	text-decoration: none;
}

.vda-subheading__link a::after {
	content: "\2192";
	transition: transform var(--wp--custom--transition);
}

.vda-subheading__link a:hover::after {
	transform: translateX(3px);
}

/* --- Terminzeilen --- */

.vda-terminliste {
	border-block-end: 1px solid var(--wp--preset--color--line);
}

.vda-terminzeile {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) 40px;
	gap: 16px;
	align-items: center;
	padding-block: 20px;
	border-block-start: 1px solid var(--wp--preset--color--line);
}

.vda-terminzeile:first-child {
	border-block-start: 0;
}

.vda-terminzeile__datum {
	display: flex;
	min-height: 72px;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border-inline-end: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--micro);
	line-height: 1;
	text-transform: uppercase;
}

.vda-terminzeile__datum strong {
	margin-block: 5px;
	color: var(--wp--preset--color--vda-blue-dark, #00558a);
	font-size: 29px;
	font-weight: 750;
	letter-spacing: -0.02em;
}

.vda-terminzeile__inhalt > * {
	margin: 0;
}

.vda-terminzeile__art {
	margin-block-end: 5px;
	color: var(--wp--preset--color--vda-blue);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.vda-terminzeile h4 {
	font-size: 17px;
	font-weight: 650;
	line-height: 1.2;
	text-wrap: pretty;
}

.vda-terminzeile h4 a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	display: inline-block;
	min-height: 24px;
}

.vda-terminzeile h4 a:hover {
	color: var(--wp--preset--color--vda-blue);
}

.vda-terminzeile__ort {
	margin-block-start: 5px !important;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.vda-rundlink {
	display: grid;
	width: 38px;
	height: 38px;
	place-items: center;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 50%;
	color: var(--wp--preset--color--vda-blue-dark, #00558a);
	text-decoration: none;
	transition: color var(--wp--custom--transition), background-color var(--wp--custom--transition), border-color var(--wp--custom--transition);
}

.vda-rundlink:hover {
	border-color: var(--wp--preset--color--vda-blue);
	color: var(--wp--preset--color--white);
	background: var(--wp--preset--color--vda-blue);
}

/* --- Neuigkeiten --- */

.vda-meta {
	gap: 7px 13px;
	margin-block-end: 9px;
	color: var(--wp--preset--color--muted);
	font-weight: 600;
}

.vda-meta > * {
	margin: 0;
	font-size: var(--wp--preset--font-size--micro);
}

.vda-meta .wp-block-post-terms {
	display: inline;
}

.vda-meta .wp-block-post-terms a {
	color: var(--wp--preset--color--vda-blue);
	font-weight: 750;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
	display: inline-block;
	min-height: 24px;
}

.vda-news-feature {
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(230px, 0.92fr);
	gap: 24px;
	padding-block: 20px 24px;
	margin-block: 0;
}

.vda-news-feature__image {
	overflow: hidden;
	border-radius: var(--wp--custom--radius-small);
	margin: 0;
	/* Ohne das fuellt der Kasten die ganze Spaltenhoehe und unter dem
	   Bild bliebe eine graue Flaeche stehen. */
	align-self: start;
}

/* Der Block gibt das Verhaeltnis 16 zu 9 vor. Eine feste Hoehe von
   100 Prozent wuerde es aushebeln und das Bild quadratisch machen. */
.vda-news-feature__image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	transition: transform 320ms ease;
}

.vda-news-feature__image:hover img {
	transform: scale(1.025);
}

.vda-news-feature__inhalt {
	align-self: center;
}

.vda-news-feature h3 {
	margin: 0;
	line-height: 1.08;
	text-wrap: pretty;
}

.vda-news-feature h3 a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	display: inline-block;
	min-height: 24px;
}

.vda-news-feature h3 a:hover,
.vda-news-row h4 a:hover {
	color: var(--wp--preset--color--vda-blue);
}

.vda-news-feature .wp-block-post-excerpt {
	margin-block-start: 13px;
}

.vda-news-feature .wp-block-post-excerpt__excerpt {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.55;
}

.vda-newslist {
	border-block: 1px solid var(--wp--preset--color--line);
}

.vda-news-row {
	display: grid;
	grid-template-columns: 176px minmax(0, 1fr);
	gap: 24px;
	align-items: center;
	padding-block: 16px;
	margin-block: 0;
}

.vda-news-row__bild {
	margin: 0;
}

.vda-news-row__bild img {
	display: block;
	width: 176px;
	border-radius: 4px;
	object-fit: cover;
}

.vda-news-row h4 {
	margin: 0;
	font-weight: 650;
	line-height: 1.25;
	text-wrap: pretty;
}

.vda-news-row h4 a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	display: inline-block;
	min-height: 24px;
}

/* Ein Beitrag ohne Bild soll die Zeile nicht zerreißen. */
.vda-news-row:not(:has(img)) {
	grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 1023px) {
	.wp-block-columns.vda-current__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 48px;
	}

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

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

	.vda-terminzeile .vda-rundlink {
		display: none;
	}

	.vda-news-row {
		grid-template-columns: 104px minmax(0, 1fr);
		gap: 14px;
	}

	.vda-news-row__bild img {
		width: 104px;
	}
}

/* In der Zeile steht eine Kategorie, so wie im Entwurf. Beiträge mit
   drei Kategorien sprengen sonst die Zeile und schieben das Datum
   nach unten. Die weiteren bleiben im Markup, nur nicht im Blick. */
.vda-meta .wp-block-post-terms a:not(:first-of-type) {
	display: none;
}

.vda-meta .wp-block-post-terms .wp-block-post-terms__separator {
	display: none;
}

/* Der Claim im Einstiegsband braucht auf schmalen Schirmen eine
   deutlich kleinere Schrift. Mit 80 Pixeln steht dort jedes Wort auf
   einer eigenen Zeile, der Titel läuft über sechs Zeilen. */
@media (max-width: 1023px) {
	.vda-hero h1.has-display-1-font-size,
	.vda-hero h1 {
		font-size: clamp(34px, 7.4vw, 58px) !important;
	}
}

@media (max-width: 480px) {
	.vda-hero h1.has-display-1-font-size,
	.vda-hero h1 {
		font-size: clamp(30px, 8.2vw, 38px) !important;
	}
}

/* Der Aufmachertitel steht in einer schmalen Spalte. Mit 32 Pixeln
   braucht eine lange Überschrift dort fünf Zeilen. */
.vda-news-feature h3.has-display-6-font-size,
.vda-news-feature h3 {
	font-size: clamp(19px, 1.75vw, 25px) !important;
	line-height: 1.15;
}

/* ---------------------------------------------------------------
   26. Beitragszeilen ruhiger
   Vorher lagen drei Linien übereinander: der Aufmacher hatte eine
   unten, die Liste eine oben, und jede Zeile noch eine dazu. Jetzt
   trennt genau eine Linie zwei Einträge.
   --------------------------------------------------------------- */

.vda-current .vda-subheading {
	border-block-start: 0;
	padding-block-start: 0;
}

.vda-current .vda-news-feature {
	border-block-end: 0;
}

.vda-current .vda-newslist {
	border-block: 0;
}

/* Die erste Zeile grenzt an den Aufmacher, dort gehört die Linie hin.
   Danach trennt sie je zwei Zeilen. */
.vda-news-row {
	border-block-start: 1px solid var(--wp--preset--color--line);
}

/* Die Zeile ist so hoch wie ihr Bild und nicht höher. */
.vda-news-row {
	position: relative;
	grid-template-columns: 176px minmax(0, 1fr);
	gap: 20px;
	align-items: center;
	padding-block: 14px;
	border-radius: var(--wp--custom--radius-small);
	transition: background-color var(--wp--custom--transition);
}

.vda-news-row__bild {
	overflow: hidden;
	border-radius: 4px;
}

.vda-news-row__bild img {
	aspect-ratio: 16 / 10;
	height: auto;
	transition: transform 260ms ease;
}

.vda-news-row h4 {
	font-size: 16px;
	line-height: 1.28;
}

.vda-news-row .vda-meta {
	margin-block-end: 6px;
}

/* Die ganze Zeile ist ein Ziel. Der Verweis am Titel spannt sich
   darüber, damit auch das Bild und der freie Platz klickbar sind. */
.vda-news-row h4 a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

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

.vda-news-row:hover h4 a {
	color: var(--wp--preset--color--vda-blue);
}

.vda-news-row:hover .vda-news-row__bild img {
	transform: scale(1.03);
}

/* Die Meta-Zeile liegt darüber, sonst fängt sie den Klick ab. */
.vda-news-row .vda-meta a {
	position: relative;
	z-index: 2;
}

/* Dasselbe für den Aufmacher. */
.vda-news-feature {
	position: relative;
	padding-block: 20px 22px;
	border-radius: var(--wp--custom--radius-small);
	transition: background-color var(--wp--custom--transition);
}

.vda-news-feature h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

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

.vda-news-feature:hover h3 a {
	color: var(--wp--preset--color--vda-blue);
}

.vda-news-feature .vda-meta a,
.vda-news-feature .wp-block-post-excerpt {
	position: relative;
	z-index: 2;
}

/* Die Terminzeile bekommt dieselbe Behandlung. */
.vda-terminzeile {
	position: relative;

	border-radius: var(--wp--custom--radius-small);
	transition: background-color var(--wp--custom--transition);
}

.vda-terminzeile h4 a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

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

.vda-terminzeile:hover .vda-rundlink {
	border-color: var(--wp--preset--color--vda-blue);
	color: var(--wp--preset--color--white);
	background: var(--wp--preset--color--vda-blue);
}

/* Der runde Verweis liegt darüber, damit seine eigene Beschriftung
   für Screenreader erreichbar bleibt. */
.vda-rundlink {
	position: relative;
	z-index: 2;
}

/* Auf schmalen Schirmen wird das Bild in der Zeile kleiner. Diese
   Regeln stehen ganz zum Schluss, weil die Grundregeln in Abschnitt 26
   sonst gewinnen. */
@media (max-width: 600px) {
	.vda-news-row {
		grid-template-columns: 104px minmax(0, 1fr);
		gap: 14px;
	}

	.vda-news-row__bild img {
		width: 104px;
	}

	.vda-terminzeile {
		grid-template-columns: 56px minmax(0, 1fr);
		gap: 12px;
	}

	.vda-terminzeile .vda-rundlink {
		display: none;
	}
}

/* ---------------------------------------------------------------
   27. Zahlenband und Mitgliedschaftsband nach dem Entwurf
   Beide Bänder standen vorher auf dem Flex-Layout von WordPress.
   Damit rutschten die Kennzahlen zur Mitte und links blieb eine
   Lücke. Jetzt tragen beide ein festes Raster.
   --------------------------------------------------------------- */

.vda-facts {
	padding-block: 0;
}

.vda-facts__inner {
	display: grid;
	min-height: 112px;
	grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
	align-items: center;
}

.vda-fact {
	display: flex;
	min-height: 56px;
	flex-direction: column;
	justify-content: center;
	padding-inline: clamp(1rem, 3vw, 2.7rem);
	border-inline-end: 1px solid rgba(255, 255, 255, 0.28);
}

.vda-fact:first-child {
	padding-inline-start: 0;
}

.vda-fact p {
	display: flex;
	margin: 0;
	flex-direction: column;
}

.vda-fact strong {
	font-size: clamp(1.45rem, 2.5vw, 2.15rem);
	font-weight: 750;
	letter-spacing: -0.02em;
	line-height: 1;
}

.vda-facts .vda-fact span {
	margin-block-start: 0.3rem;
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 650;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.vda-facts__link {
	margin: 0;
	padding-inline-start: 2.2rem;
	white-space: nowrap;
}

.vda-facts__link a {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-height: 24px;
	color: var(--wp--preset--color--white);
	font-weight: 700;
	text-decoration: none;
}

.vda-facts__link a::after {
	content: "\2192";
	transition: transform var(--wp--custom--transition);
}

.vda-facts__link a:hover {
	text-decoration: underline;
}

.vda-facts__link a:hover::after {
	transform: translateX(3px);
}

@media (max-width: 781px) {
	.vda-facts__inner {
		padding-block: var(--wp--preset--spacing--40);
		grid-template-columns: repeat(3, minmax(0, 1fr));
		row-gap: var(--wp--preset--spacing--40);
	}

	.vda-fact:last-of-type {
		border-inline-end: 0;
	}

	.vda-facts__link {
		padding-inline-start: 0;
		grid-column: 1 / -1;
	}
}

@media (max-width: 540px) {
	.vda-facts__inner {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 0;
	}

	.vda-fact {
		padding-inline: 0;
		padding-block: 12px;
		border-inline-end: 0;
		border-block-start: 1px solid rgba(255, 255, 255, 0.22);
	}

	.vda-fact:first-child {
		border-block-start: 0;
	}

	.vda-facts__link {
		margin-block-start: 16px;
	}
}

/* --- Mitgliedschaftsband --- */

.vda-membership {
	position: relative;
	overflow: hidden;
}

/* Das Zeichen ragt bewusst über die rechte Kante hinaus. Der
   Kasten oben schneidet es ab, deshalb entsteht kein Querlauf. */
.vda-membership__mark {
	position: absolute;
	top: 50%;
	inset-inline-end: -8%;
	width: clamp(300px, 34vw, 520px);
	height: auto;
	opacity: 0.075;
	pointer-events: none;
	transform: translateY(-50%);
}

.vda-membership__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
	gap: clamp(3rem, 8vw, 7rem);
	align-items: end;
}

.vda-membership__content h2 {
	max-width: 18ch;
	margin: 0;
}

.vda-membership__content .is-style-lead {
	max-width: 54ch;
	margin-block: 1.5rem 0;
	color: #d9e9f3;
}

.vda-membership__aktionen {
	gap: 0.8rem;
	margin-block-start: 2rem;
}

.vda-membership__vorteile {
	padding-inline-start: clamp(1.5rem, 3vw, 2.5rem);
	border-inline-start: 1px solid rgba(255, 255, 255, 0.22);
}

.vda-membership__label {
	margin: 0;
	color: #bcd5e7;
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 750;
	letter-spacing: 0.11em;
	text-transform: uppercase;
}

.vda-membership__vorteile .wp-block-list {
	margin-block: 1rem 1.4rem;
}

.vda-membership__vorteile li {
	border-block-start: 1px solid rgba(255, 255, 255, 0.16);
	line-height: 1.35;
}

.vda-membership__vorteile li:last-child {
	border-block-end: 1px solid rgba(255, 255, 255, 0.16);
}

.vda-membership__vorteile li::before {
	border-color: var(--wp--preset--color--periwinkle);
}

.vda-membership__mehr {
	margin: 0;
}

.vda-membership__mehr a {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-height: 24px;
	color: var(--wp--preset--color--white);
	font-weight: 700;
	text-decoration: none;
}

.vda-membership__mehr a::after {
	content: "\2192";
	transition: transform var(--wp--custom--transition);
}

.vda-membership__mehr a:hover {
	text-decoration: underline;
}

.vda-membership__mehr a:hover::after {
	transform: translateX(3px);
}

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

	.vda-membership__vorteile {
		padding-inline-start: 0;
		padding-block-start: var(--wp--preset--spacing--40);
		border-inline-start: 0;
		border-block-start: 1px solid rgba(255, 255, 255, 0.22);
	}

	.vda-membership__mark {
		inset-inline-end: -18%;
		opacity: 0.06;
	}
}

/* ---------------------------------------------------------------
   28. Bannerplätze
   Ein Platz ohne laufenden Banner gibt gar nichts aus, deshalb
   entsteht dort auch kein Abstand. Die Abstände hängen am Platz
   selbst, nicht an den Nachbarn.
   --------------------------------------------------------------- */

.vda-banner-platz {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	padding-block: var(--wp--preset--spacing--60);
}

/* Der gemietete Werbeplatz über dem Fußbereich.
 *
 * Er steht als eigener Block vor dem Fußbereich und damit außerhalb
 * des Satzspiegels, den die Seitenvorlagen sonst setzen. Deshalb hier
 * die Begrenzung von Hand, sonst liefe er über die ganze Fensterbreite.
 *
 * Das Motiv selbst bleibt bei seinen 970 Pixeln und wird mittig
 * gestellt: hochgerechnet sähe ein gemietetes Motiv unscharf aus, und
 * dafür zahlt der Kunde nicht.
 */
.vda-banner-platz--global-unten {
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--inline);
}

.vda-banner-platz--global-unten .vda-banner {
	max-width: 970px;
	margin-inline: auto;
}

/* Der Werbeplatz braucht mehr Luft nach oben als nach unten: oben steht
   der Inhalt der Seite, unten folgt der dunkle Fussbereich, der ohnehin
   trennt. */
.vda-banner-platz--global-unten {
	margin-block-start: var(--wp--preset--spacing--xl, 3rem);
	margin-block-end: var(--wp--preset--spacing--md, 1.5rem);
}

/* Kennzeichnung bezahlter Werbung. Klein und grau, aber lesbar - sie
   soll den Banner nicht überschreien und trotzdem erkennbar sein. */
.vda-werbung {
	max-width: 970px;
	margin-inline: auto;
}

.vda-werbung__hinweis {
	margin: 0 0 0.35rem;
	font-size: var(--wp--preset--font-size--micro, 0.75rem);
	line-height: 1.2;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted, #6e7882);
}

.vda-banner {
	display: block;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius-small);
	line-height: 0;
}

.vda-banner img {
	display: block;
	width: 100%;
	height: auto;
}

/* Ein anklickbarer Banner zeigt beim Überfahren, dass er ein Ziel hat. */
a.vda-banner {
	transition: border-color var(--wp--custom--transition), box-shadow var(--wp--custom--transition);
}

a.vda-banner:hover {
	border-color: var(--wp--preset--color--vda-blue);
	box-shadow: 0 6px 20px rgba(2, 42, 68, 0.12);
}

a.vda-banner:focus-visible {
	outline: 2px solid var(--wp--preset--color--vda-blue);
	outline-offset: 3px;
}

/* ------------------------------------------------------------------
   Sehr schmale Geräte
   Die clamp()-Werte im theme.json haben feste Untergrenzen, und die
   greifen unterhalb von etwa 700 Pixeln überall. Auf einem 320 Pixel
   breiten Schirm bleiben davon 272 nutzbare - eine Überschrift mit
   36px läuft dort über drei Zeilen.

   Die Grenze liegt bei 380px, damit die verbreiteten 390er-Geräte
   unverändert bleiben. Es geht nur um die schmalsten.
   ------------------------------------------------------------------ */
@media (max-width: 380px) {
	:root {
		--wp--preset--font-size--display-1: 32px;
		--wp--preset--font-size--display-2: 28px;
		--wp--preset--font-size--display-3: 26px;
		--wp--preset--font-size--display-4: 24px;
		--wp--preset--font-size--display-5: 22px;
		--wp--preset--font-size--display-6: 19px;
	}
}


/* ------------------------------------------------------------------
   Auswahlfelder: der Pfeil bekommt Luft

   Der Browser zeichnet den Pfeil eines Auswahlfeldes selbst, und zwar
   dicht an die rechte Kante. Auf der ganzen Seite sah das gedrängt aus.
   Deshalb wird der eigene gezeichnet, mit Abstand zum Rand.

   Der Innenabstand rechts hält den Text vom Pfeil weg, sonst schiebt
   sich ein langer Eintrag darunter.
   ------------------------------------------------------------------ */

select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1.5 7 7.5 13 1.5' stroke='%2324465e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.85rem center;
	background-size: 14px 9px;
	padding-inline-end: 2.6rem;
}

/* Eine aufgeklappte Liste zeichnet keinen Pfeil - dort wäre er falsch. */
select[multiple],
select[size]:not([size="1"]) {
	background-image: none;
	padding-inline-end: 0.75rem;
}

/* Ohne Rand am Feld wirkt der Abstand doppelt so gross. Bei den
   Feldern, die selbst schon einen Innenabstand mitbringen, bleibt es
   beim ihren - nur der Platz für den Pfeil kommt dazu. */
.vda-feld select,
.vda-finder__rail select {
	background-position: right 1rem center;
}


/* ------------------------------------------------------------------
   Bilder, deren Datei fehlt

   Statt des zerbrochenen Symbols bleibt der Platz leer. Wo ein Rahmen
   den Platz ohnehin füllt - etwa der Logokasten in der Vereinsliste -
   sieht man gar nichts mehr davon.
   ------------------------------------------------------------------ */

/* Die Klasse steht doppelt, damit die Regel gewinnt. `img.klasse` und
   `.vda-heft__cover img` sind gleich spezifisch - und mein-vda.css lädt
   später, also blieb das Bild sichtbar. Doppelt genannt schlägt die
   Regel jede Zuweisung aus einer einzelnen Klasse, ohne dass irgendwo
   ein !important stehen muss. */
img.ist-ohne-datei.ist-ohne-datei {
	display: none;
}

figure.ist-ohne-datei.ist-ohne-datei,
.wp-block-image.ist-ohne-datei.ist-ohne-datei {
	display: none;
}


/* ------------------------------------------------------------------
   Bilder im Fliesstext

   Auf der Magazinseite stand ein quadratisches Titelbild in voller
   Grösse: 1.024 mal 1.024 Bildpunkte, mitten zwischen zwei Absätzen.
   Wer las, scrollte danach an einer Bildschirmhöhe Nichts vorbei.

   Die Begrenzung greift über die Höhe, nicht über die Breite: ein
   Querformat darf die Spalte weiterhin ausfüllen, nur soll kein Bild
   höher werden als der halbe Bildschirm. Das Seitenverhältnis bleibt.

   Ausgenommen sind Bilder, die ausdrücklich breit oder ganzseitig
   stehen sollen - dort ist die Grösse gewollt.
   ------------------------------------------------------------------ */

.is-layout-constrained > .wp-block-image:not(.alignwide):not(.alignfull) img,
.wp-block-post-content > .wp-block-image:not(.alignwide):not(.alignfull) img {
	max-height: 50vh;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* Das Bild richtet sich am Text aus, nicht an der Seitenmitte: die
   Lesespalte dieses Themes steht links, ein mittig gesetztes Bild
   stünde daneben und die Seite wirkte auseinandergerissen. */
.is-layout-constrained > .wp-block-image:not(.alignwide):not(.alignfull) img,
.wp-block-post-content > .wp-block-image:not(.alignwide):not(.alignfull) img {
	margin-inline: 0;
}


/* ------------------------------------------------------------------
   Anfragen zur Fischvermittlung
   ------------------------------------------------------------------
   Der Abschnitt nennt drei Wege, wie jemand seine Tiere unterbringt.
   Er stand als Fliesstext zwischen zwei Absätzen und ging unter,
   obwohl er die eigentliche Antwort auf die häufigste Anfrage ist.

   Jetzt ist er ein abgesetzter Block: heller Grund, die drei Wege als
   nummerierte Karten. Die Nummern sind keine Rangfolge, sondern eine
   Lesehilfe - man sieht auf einen Blick, dass es drei Wege sind.
   ------------------------------------------------------------------ */

.vda-vermittlung {
	margin-block: var(--wp--preset--spacing--section-sub);
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--paper-blue);
	border-radius: var(--wp--custom--radius);
}

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

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

/* Die Einleitung darf breiter atmen als die Karten darunter. */
.vda-vermittlung > p {
	max-width: 62ch;
}

.vda-vermittlung .wp-block-columns {
	gap: var(--wp--preset--spacing--30);
	margin-block: var(--wp--preset--spacing--40);
}

/* Jeder Weg eine eigene Karte, damit die drei nebeneinander stehen und
   nicht als ein Textblock gelesen werden. */
.vda-vermittlung .wp-block-column {
	position: relative;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30) 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-small);
}

/* Die Nummer sitzt angeschnitten auf der oberen Kante. */
.vda-vermittlung .wp-block-column::before {
	content: counter(vda-weg);
	counter-increment: vda-weg;
	position: absolute;
	inset-block-start: calc(var(--wp--preset--spacing--30) * -1);
	inset-inline-start: var(--wp--preset--spacing--30);
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	background: var(--wp--preset--color--vda-blue);
	color: var(--wp--preset--color--white);
	border-radius: 50%;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	line-height: 1;
}

.vda-vermittlung .wp-block-columns {
	counter-reset: vda-weg;
}

.vda-vermittlung .wp-block-column > :first-child {
	margin-block-start: 0;
}

.vda-vermittlung .wp-block-column > :last-child {
	margin-block-end: 0;
}

.vda-vermittlung .wp-block-column :is(h3, h4) {
	margin-block: 0 var(--wp--preset--spacing--10);
	font-size: var(--wp--preset--font-size--lead);
}

/* Der Schlusssatz ist kein vierter Weg, sondern ein Abbinder. */
.vda-vermittlung > p:last-child {
	padding-block-start: var(--wp--preset--spacing--30);
	border-block-start: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--muted);
}

/* Unter 782 Pixel bricht WordPress die Spalten ohnehin um. Dann sitzen
   die Karten untereinander und brauchen oben Platz für die Nummer. */
@media (max-width: 781px) {
	.vda-vermittlung .wp-block-columns {
		gap: var(--wp--preset--spacing--40);
	}
}

/* ANLEITUNGEN */
/* ------------------------------------------------------------------
   Seite „Anleitungen"

   Elf Kapitel untereinander. Damit das nicht erschlägt, gibt es nur
   drei Signale: die Nummer über der Überschrift, den Haken vor dem
   Ergebnis und den blauen Knopf in der Skizze. Getrennt wird mit
   Abstand, nicht mit Linien.
   ------------------------------------------------------------------ */

.wp-site-blocks {
	counter-reset: vda-anl;
}

/* Das Verzeichnis liegt als Zeile zwischen zwei feinen Linien, nicht
   als Kasten. Bei elf Einträgen reicht das völlig. */
.vda-anl-nav {
	margin-block: var(--wp--preset--spacing--60);
	padding-block: var(--wp--preset--spacing--40);
	border-block: 1px solid var(--wp--preset--color--line);
}

.vda-anl-nav .vda-anl-liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .5em 1.6em;
	font-size: var(--wp--preset--font-size--small);
}

.vda-anl-nav .vda-anl-liste li {
	margin: 0;
}

.vda-anl-block {
	counter-increment: vda-anl;
	margin-block-start: var(--wp--preset--spacing--90);
	/* Der Kopf der Seite klebt oben, sonst springt der Anker darunter. */
	scroll-margin-block-start: 96px;
}

.vda-anl-block > h2 {
	margin-block-end: .3em;
}

.vda-anl-block > h2::before {
	content: counter(vda-anl, decimal-leading-zero);
	display: block;
	margin-block-end: .5em;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	letter-spacing: .14em;
	color: var(--wp--preset--color--muted);
}

.vda-anl-wofuer {
	max-width: 62ch;
	color: var(--wp--preset--color--muted);
}

.vda-anl-wo {
	margin-block-end: .9em;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.vda-anl-spalten {
	align-items: flex-start;
	gap: var(--wp--preset--spacing--70);
}

.vda-anl-spalten ol {
	margin-block: 0;
}

.vda-anl-spalten ol li {
	margin-block-end: .55em;
}

.vda-anl-fertig {
	margin-block-start: 1.3em;
	font-size: var(--wp--preset--font-size--small);
}

.vda-anl-fertig::before {
	content: "\2713";
	margin-inline-end: .5em;
	font-weight: 700;
	color: var(--wp--preset--color--success);
}

.vda-anl-hinweis {
	margin-block-start: .45em;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.vda-anl-skizze {
	margin: 0;
	position: sticky;
	top: 96px;
}

.vda-anl-skizze svg {
	display: block;
	width: 100%;
	height: auto;
}

.vda-anl-schluss {
	margin-block-start: var(--wp--preset--spacing--80);
	padding-block-start: var(--wp--preset--spacing--40);
	border-block-start: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--muted);
}

@media (max-width: 781px) {

	/* Gestapelt steht die Skizze unter den Schritten, festkleben würde
	   sie über den Text schieben. */
	.vda-anl-skizze {
		position: static;
		margin-block-start: var(--wp--preset--spacing--40);
	}
}

/* BROTKRUMEN MOBIL */
/* ------------------------------------------------------------------
   Brotkrumen auf schmalen Bildschirmen

   Bei 375 Punkten Breite lief der Pfad eines Vereinstermins über vier
   Zeilen: „Startseite / Vereine / Verein für Aquarien- und
   Terrarienfreunde Bayreuth e.V. / Termine / Zierfisch und
   Wasserpflanzenbörse". Das war mehr blauer Text als Inhalt, und die
   letzte Stufe wiederholt wörtlich die Überschrift, die unmittelbar
   darunter steht.

   Drei Eingriffe, alle nur unter 600 Punkten:
   die Schrift eine Stufe kleiner, lange Zwischenstufen abgekürzt, und
   die letzte Stufe verschwindet aus dem Bild. Für Vorleseprogramme
   bleibt sie erhalten, sie wird nur aus dem Sichtfeld geschoben.
   ------------------------------------------------------------------ */

@media (max-width: 600px) {

	.vda-brotkrumen {
		font-size: var(--wp--preset--font-size--micro);
		line-height: 1.45;
	}

	/* Ein Vereinsname sprengt jede Zeile. Abgekürzt bleibt er als
	   Wegmarke erkennbar, vollständig steht er in der Überschrift. */
	.vda-brotkrumen a {
		max-width: 18ch;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		vertical-align: bottom;
	}

	/* Die Startseite ist kurz und soll nicht gekürzt werden. */
	.vda-brotkrumen a:first-child {
		max-width: none;
	}

	.vda-brotkrumen [aria-current="page"] {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	/* Ohne die letzte Stufe steht sonst ein Schrägstrich am Zeilenende.
	   :has deckt den Normalfall ab, nth-last-of-type die älteren
	   Browser: die letzte Stufe ist ein span, der Trenner davor der
	   vorletzte. */
	.vda-brotkrumen__pfeil:has(+ [aria-current="page"]) {
		display: none;
	}

	.vda-brotkrumen > div > span:nth-last-of-type(2).vda-brotkrumen__pfeil {
		display: none;
	}
}

/* FOKUS AUF TOUCH */
/* ------------------------------------------------------------------
   Der Fokusrahmen auf Geräten, die nur mit dem Finger bedient werden

   Der zweifarbige Rahmen weiter oben ist für die Tastatur gedacht: wer
   sich mit der Tabulatortaste durch die Seite bewegt, muss sehen, wo er
   steht. Auf dem Handy setzt der Browser denselben Zustand aber schon
   beim Antippen, und der Rahmen bleibt danach stehen. Um das Logo im
   Kopf legt sich dann ein dunkler Kasten, der dort nichts zu suchen
   hat, und um jeden angetippten Verweis ebenso.

   Deshalb: auf Zeigegeräten ohne Schwebezustand, also Finger statt
   Maus, verschwindet der Rahmen bei Verweisen und Schaltflächen.
   Eingabefelder behalten ihn, dort tippt man hinein und muss sehen,
   wohin die Zeichen gehen. Am Rechner bleibt alles wie es war.

   Dazu der blaue Blitz, den Android beim Antippen malt. Den braucht
   niemand, die Seite gibt selbst genug Rückmeldung.
   ------------------------------------------------------------------ */

a,
button,
summary,
label,
[role="button"],
[tabindex] {
	-webkit-tap-highlight-color: transparent;
}

@media (hover: none) and (pointer: coarse) {

	a:focus-visible,
	button:focus-visible,
	summary:focus-visible,
	[role="button"]:focus-visible,
	.wp-element-button:focus-visible {
		outline: none;
		box-shadow: none;
	}

	/* Wer ein Feld antippt, um zu schreiben, soll es weiterhin sehen. */
	input:focus-visible,
	textarea:focus-visible,
	select:focus-visible {
		outline: 2px solid var(--wp--preset--color--white);
		box-shadow: 0 0 0 4px var(--wp--preset--color--vda-blue-dark);
	}
}