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

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

.wp-block-columns.is-style-column-rule > .wp-block-column + .wp-block-column {
	border-inline-start: 1px solid var(--wp--preset--color--line);
	padding-inline-start: var(--wp--preset--spacing--60);
}

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

.vda-download a {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 18px;
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius-small);
	text-decoration: none;
	color: var(--wp--preset--color--ink);
	transition: border-color var(--wp--custom--transition), background-color var(--wp--custom--transition);
}

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

.vda-download__symbol {
	flex: none;
	color: var(--wp--preset--color--vda-blue);
}

.vda-download__symbol svg {
	display: block;
	width: 30px;
	height: 30px;
}

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

.vda-download__text strong {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 650;
	line-height: 1.35;
	overflow-wrap: anywhere;
}

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

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

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

.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;
		background-position: right bottom;
		background-size: auto 260px;
		padding-block-end: 260px !important;
	}

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

	/* Auf schmalen Schirmen rutscht das Bild nach unten, der Text
	   steht dann auf heller Fläche und braucht dunkle Schrift. */
	.vda-hero::before {
		display: none;
	}

	.vda-hero h1 {
		color: var(--wp--preset--color--ink);
		text-shadow: none;
	}

	.vda-hero h1 .vda-hero__kicker {
		color: #003d65;
	}

	.vda-hero__copy {
		color: #26384a;
	}

	.vda-hero .wp-block-button.is-style-text-link.vda-hero__link .wp-element-button {
		color: #00456f;
	}

	.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;
	grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
	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;
}

/* Auf schmalen Schirmen liegt der zweite Verweis auf heller Fläche. */
@media (max-width: 782px) {
	.vda-hero .wp-block-button.is-style-text-link.vda-hero__link .wp-element-button {
		color: #00456f !important;
	}
}

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

.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;
}