/*
 * VDA Online - Mitgliederbereich
 *
 * Eigene Stilschicht auf denselben Tokens, entspricht mein-vda.css aus
 * dem Übergabepaket: dunkles Begrüßungsband, klebende Bereichsnavigation,
 * App-Leiste unter 1024px.
 */

/* ---------------------------------------------------------------
   1. Begrüßungsband
   --------------------------------------------------------------- */

.vda-member-band {
	background-color: var(--wp--preset--color--vda-blue-dark);
	background-image: linear-gradient(var(--wp--custom--member-overlay), var(--wp--custom--member-overlay));
	background-size: cover;
	background-position: center;
	color: var(--wp--preset--color--white);
	padding-block: var(--wp--preset--spacing--90) var(--wp--preset--spacing--80);
	margin-inline: calc(-1 * var(--wp--preset--spacing--inline));
	padding-inline: var(--wp--preset--spacing--inline);
}

.vda-member-band__inner {
	max-width: 1220px;
	margin-inline: auto;
}

.vda-member-band h1 {
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--display-2);
	margin-block: 0 var(--wp--preset--spacing--30);
}

.vda-member-band__meta {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--50);
	font-size: var(--wp--preset--font-size--small);
	color: #cfe6f4;
}

.vda-member-band__meta strong {
	color: var(--wp--preset--color--white);
}

/* ---------------------------------------------------------------
   2. Aufteilung: Navigation links, Inhalt rechts
   --------------------------------------------------------------- */

.vda-member-layout {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: var(--wp--preset--spacing--90);
	max-width: 1220px;
	margin-inline: auto;
	padding-block: var(--wp--preset--spacing--80);
}

.vda-member-nav {
	position: sticky;
	top: calc(var(--wp--custom--header-height) + var(--wp--preset--spacing--30));
	align-self: start;
}

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

/* Ein Punkt der Seitennavigation.

   Die Schrift stand auf `lead`, also 21 Pixel. In einer 260 Pixel
   breiten Spalte bleiben nach Rand, Symbol und Abstand rund 180 für
   den Text - „Mitgliedschaft und Ausweis" brauchte darin drei Zeilen,
   und weil Symbol und Text mittig ausgerichtet stehen, rutschte das
   Symbol in die Mitte des Absatzes.

   Jetzt 18 Pixel und kurze Beschriftungen. Nachgerechnet: der längste
   Punkt ist „Mein Jobprofil" mit 14 Zeichen, das sind bei dieser Größe
   rund 120 Pixel - es bleibt Luft. Symbol und Schrift sitzen auf einer
   Linie.

   Sollte doch einmal etwas umbrechen - eine längere Beschriftung,
   eine größere Schrift im Browser -, sitzt das Symbol dank
   `align-self: flex-start` weiter oben statt in der Mitte. */
.vda-member-nav a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px var(--wp--preset--spacing--30);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	border-inline-start: 3px solid transparent;
	transition: color var(--wp--custom--transition), background-color var(--wp--custom--transition), border-color var(--wp--custom--transition);
}

.vda-member-nav a > span {
	min-width: 0;
}

.vda-member-nav a:hover {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--vda-blue);
}

/* Der aktive Punkt trägt eine blaue Innenkante. */
.vda-member-nav a[aria-current="page"] {
	border-inline-start-color: var(--wp--preset--color--vda-blue);
	background: var(--wp--preset--color--blue-wash);
	color: var(--wp--preset--color--vda-blue-dark);
}

.vda-member-nav svg {
	width: 21px;
	height: 21px;
	flex: 0 0 21px;
	/* Bei einer Zeile ist das dasselbe wie zentriert. Bricht der Text
	   doch um, bleibt das Symbol oben und rutscht nicht in die Mitte. */
	align-self: flex-start;
	margin-block-start: 1px;
}

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

.vda-member-nav__logout a {
	color: var(--wp--preset--color--muted);
	font-weight: 400;
}

/* ---------------------------------------------------------------
   3. Inhaltsbereich
   --------------------------------------------------------------- */

.vda-member-content {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--80);
}

.vda-member-section > *:first-child {
	margin-block-start: 0;
}

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

.vda-subheading h2 {
	margin: 0;
	font-size: var(--wp--preset--font-size--display-5);
}

/* ---------------------------------------------------------------
   4. Kachel-Grid
   --------------------------------------------------------------- */

.vda-member-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--wp--preset--spacing--30);
}

.vda-member-tiles a {
	display: block;
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--paper-blue);
	border-radius: var(--wp--custom--radius);
	text-decoration: none;
	color: var(--wp--preset--color--ink);
	transition: background-color var(--wp--custom--transition), transform var(--wp--custom--transition);
}

.vda-member-tiles a:hover {
	background: var(--wp--preset--color--blue-soft);
	transform: translateY(-2px);
}

.vda-member-tiles svg {
	width: 32px;
	height: 32px;
	color: var(--wp--preset--color--vda-blue-dark);
	margin-block-end: var(--wp--preset--spacing--20);
}

.vda-member-tiles strong {
	display: block;
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 650;
	line-height: 1.2;
}

.vda-member-tiles span {
	display: block;
	margin-block-start: var(--wp--preset--spacing--05);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

/* ---------------------------------------------------------------
   5. Datenzeilen
   --------------------------------------------------------------- */

.vda-data-row {
	display: grid;
	grid-template-columns: minmax(0, 0.5fr) minmax(0, 1fr) auto;
	gap: var(--wp--preset--spacing--20);
	align-items: baseline;
	padding-block: var(--wp--preset--spacing--30);
	border-block-start: 1px solid var(--wp--preset--color--line);
}

.vda-data-row > span:first-child {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.vda-data-row strong {
	font-weight: 650;
}

/* Zustandsmarken in der Sachkundeliste */
.vda-badge {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 999px;
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 650;
}

.vda-badge--offen {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--muted);
}

.vda-badge--erledigt {
	background: var(--wp--preset--color--success);
	color: var(--wp--preset--color--white);
}

/* ---------------------------------------------------------------
   6. Mitgliedsausweis
   Die Regeln stehen in Abschnitt 19, wortgetreu aus der Vorlage.
   Der frühere Eigenbau stand hier und überschrieb sie teilweise,
   weil die Kaskade je Eigenschaft entscheidet: display kam aus der
   Vorlage, grid-template-columns und aspect-ratio aus dem Eigenbau.
   --------------------------------------------------------------- */

/* ---------------------------------------------------------------
   7. Magazin und Verein
   --------------------------------------------------------------- */

.vda-member-magazine {
	display: grid;
	grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
	gap: var(--wp--preset--spacing--50);
	align-items: start;
}

.vda-member-magazine__cover {
	width: 100%;
	height: auto;
	border-radius: var(--wp--custom--radius-small);
	box-shadow: var(--wp--preset--shadow--soft);
}

.vda-member-magazine h3 {
	margin-block: 0 var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--display-5);
}

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

.vda-member-club h3 {
	margin-block: 0 var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--display-5);
}

/* Werbekarte für Konten ohne Mitgliedschaft */
.vda-member-card {
	padding: var(--wp--preset--spacing--60);
	background: var(--wp--preset--color--vda-blue-dark);
	color: var(--wp--preset--color--white);
	border-radius: var(--wp--custom--radius);
}

.vda-member-card h3 {
	color: var(--wp--preset--color--white);
	margin-block: 0 var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--display-5);
}

.vda-member-card .vda-submit {
	margin-block-start: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--vda-blue-dark);
}

/* ---------------------------------------------------------------
   8. App-Leiste unter 1024px
   --------------------------------------------------------------- */

.vda-member-dock {
	display: none;
}

@media (max-width: 1023px) {
	.vda-member-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--50);
		padding-block-end: 96px;
	}

	.vda-member-nav {
		position: static;
	}

	.vda-member-nav ul {
		display: flex;
		flex-wrap: wrap;
		gap: var(--wp--preset--spacing--10);
	}

	.vda-member-nav a {
		border-inline-start: 0;
		border-block-end: 3px solid transparent;
		padding-inline: var(--wp--preset--spacing--20);
		font-size: var(--wp--preset--font-size--small);
	}

	.vda-member-nav a[aria-current="page"] {
		border-block-end-color: var(--wp--preset--color--vda-blue);
	}

	.vda-member-dock {
		position: fixed;
		inset-inline: 0;
		inset-block-end: 0;
		z-index: 60;
		display: flex;
		justify-content: space-around;
		background: var(--wp--preset--color--white);
		border-block-start: 1px solid var(--wp--preset--color--line);
		box-shadow: 0 -8px 24px rgba(16, 36, 54, 0.08);
		padding-block: var(--wp--preset--spacing--10);
	}

	.vda-member-dock a {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 2px;
		min-width: 48px;
		min-height: 48px;
		justify-content: center;
		padding-inline: var(--wp--preset--spacing--10);
		font-size: var(--wp--preset--font-size--micro);
		color: var(--wp--preset--color--muted);
		text-decoration: none;
	}

	.vda-member-dock a[aria-current="page"] {
		color: var(--wp--preset--color--vda-blue);
	}

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

	.vda-card-block,
	.vda-member-magazine {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------------------------------------------------------------
   9. Anmeldung, Registrierung, Passwort
   --------------------------------------------------------------- */

.vda-login-karte {
	max-width: 520px;
	padding: var(--wp--preset--spacing--60);
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius);
	box-shadow: var(--wp--preset--shadow--soft);
}

.vda-login-karte h1 {
	font-size: var(--wp--preset--font-size--display-4);
	margin-block: 0 var(--wp--preset--spacing--20);
}

.vda-feld {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--05);
	margin-block-start: var(--wp--preset--spacing--30);
}

.vda-feld label,
.vda-auswahl legend {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 650;
}

.vda-feld input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="hidden"]) {
	min-height: 48px;
	padding-inline: var(--wp--preset--spacing--30);
	font: inherit;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--white);
	border: 1px solid #aeb9c4;
	border-radius: var(--wp--custom--radius);
}

.vda-feld input:focus-visible {
	border-color: var(--wp--preset--color--vda-blue);
}

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

.vda-feld-paar {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--wp--preset--spacing--30);
}

.vda-auswahl {
	border: 0;
	padding: 0;
	margin-block-start: var(--wp--preset--spacing--40);
}

.vda-auswahl label {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--10);
	font-weight: 400;
	margin-block-start: var(--wp--preset--spacing--10);
}

.vda-login-zeile {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	align-items: center;
	margin-block-start: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--small);
}

.vda-schalter {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--10);
	font-weight: 400;
}

.vda-submit {
	min-height: 56px;
	width: 100%;
	margin-block-start: var(--wp--preset--spacing--40);
	padding-inline: var(--wp--preset--spacing--30);
	font-size: 17px;
	font-weight: 700;
	color: var(--wp--preset--color--white);
	background: var(--wp--preset--color--vda-blue);
	border: 0;
	border-radius: var(--wp--custom--radius);
	cursor: pointer;
	transition: background-color var(--wp--custom--transition);
}

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

.vda-login-fuss {
	margin-block-start: var(--wp--preset--spacing--40);
	padding-block-start: var(--wp--preset--spacing--30);
	border-block-start: 1px solid var(--wp--preset--color--line);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

/* Der Honigtopf darf für Menschen nicht sichtbar sein, für Lesegeräte
   aber auch nicht als Pflichtfeld erscheinen. */
.vda-trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.vda-meldung {
	margin-block-start: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--30);
	border-radius: var(--wp--custom--radius);
	font-size: var(--wp--preset--font-size--small);
}

.vda-meldung p {
	margin: 0;
}

.vda-meldung p + p {
	margin-block-start: var(--wp--preset--spacing--10);
}

.vda-meldung--fehler {
	background: #faeae8;
	color: var(--wp--preset--color--error);
	border-inline-start: 3px solid var(--wp--preset--color--error);
}

.vda-meldung--hinweis {
	background: var(--wp--preset--color--blue-wash);
	color: var(--wp--preset--color--vda-blue-dark);
	border-inline-start: 3px solid var(--wp--preset--color--vda-blue);
}

.vda-textlink {
	font-weight: 700;
	color: var(--wp--preset--color--vda-blue-dark);
	text-decoration: none;
}

.vda-textlink::after {
	content: "\2192";
	display: inline-block;
	margin-inline-start: var(--wp--preset--spacing--10);
	transition: transform var(--wp--custom--transition);
}

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

/* ---------------------------------------------------------------
   11. Überschriften in den eigenen Blöcken
   Serverseitig gerenderte Blöcke geben rohes Markup aus. Ohne diese
   Regeln erben die Überschriften dort die Displaygrößen aus
   theme.json, in der Vereinsliste waren das 56px je Kartentitel.
   --------------------------------------------------------------- */

.vda-club-card h2,
.vda-menu-event h3,
.vda-member-club h3,
.vda-member-magazine h3,
.vda-member-card h3,
.vda-finder__liste h2 {
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 650;
	line-height: 1.25;
	letter-spacing: 0;
	margin-block: 0;
}

/* Vereinsnamen sind lang und zusammengesetzt. Sie dürfen notfalls
   innerhalb des Wortes brechen, sonst laufen sie aus der Karte. */
.vda-club-card h2,
.vda-club-card h2 a,
.vda-finder__liste h2 {
	overflow-wrap: anywhere;
	text-wrap: pretty;
	hyphens: auto;
}

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

.vda-club-card h2 a:hover {
	color: var(--wp--preset--color--vda-blue);
}

/* Die Karte bekommt wieder Struktur: Oberlinie, Innenabstand, Metazeilen. */
.vda-finder__liste .vda-club-card {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10);
	padding-block: var(--wp--preset--spacing--30);
	border-block-start: 2px solid var(--wp--preset--color--ink);
	border-inline-start: 0;
}

.vda-club-card .is-style-meta {
	margin: 0;
	font-size: var(--wp--preset--font-size--micro);
	color: var(--wp--preset--color--muted);
}

/* Auch die Abschnittstitel im Mitgliederbereich brauchen eine Grenze. */
.vda-subheading h2 {
	font-size: var(--wp--preset--font-size--display-6);
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.vda-member-band h1,
.vda-login-karte h1 {
	overflow-wrap: anywhere;
	text-wrap: balance;
}


/* ---------------------------------------------------------------
   13. Nachbesserungen aus der Sichtprüfung
   --------------------------------------------------------------- */

/* Das Bild des Newsaufmachers hatte keine Breite und blieb unsichtbar. */


/* Silbentrennung sah bei Vereinsnamen unruhig aus. Der Notumbruch im
   Wort bleibt, die automatische Trennung entfällt. */
.vda-club-result__main h2,
.vda-club-card h2,
.vda-finder__liste h2 {
	hyphens: manual;
}

/* Das Magazin zeigt jetzt ein echtes Cover statt der Zahlenfläche. */
.vda-magazine__cover {
	aspect-ratio: auto;
	background: transparent;
	box-shadow: none;
	padding: 0;
	transform: none;
}

.vda-magazine__cover img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--wp--custom--radius-small);
	transform: rotate(-3deg);
	box-shadow: var(--wp--preset--shadow--layer);
}

/* Klickziele: Textlinks in Listen und Zeilen bekommen mehr Fläche. */
.vda-club-result__aktion .vda-textlink,
.vda-menu-event h3 a,
.vda-data-row a,
.vda-member-archive a,
.vda-mega-panel__group .wp-block-list a,
.vda-footer a {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
}

.vda-finder__blaettern a,
.vda-finder__blaettern span {
	min-height: 44px;
	min-width: 44px;
}

@media (max-width: 782px) {
	/* Die Regeln zum Einstiegsband stehen in theme.css, Abschnitt 24. */
	.vda-hero .vda-hero__kicker {
		font-size: var(--wp--preset--font-size--micro);
		letter-spacing: 0.09em;
	}

	/* Abschnittstitel im Vergleichsband ebenso. */
	.vda-choice h2,
	.is-style-subheading-row {
		font-size: clamp(24px, 7vw, 32px);
	}

	/* Terminzeilen liefen im Archiv aus dem Kasten. */
	.vda-event-row--wide {
		grid-template-columns: minmax(0, 1fr);
	}

	.vda-event-row--wide .vda-event-row__date {
		border-inline-end: 0;
		padding-inline-end: 0;
		text-align: start;
	}

	.vda-menu-event h3,
	.vda-event-row__body h3 {
		overflow-wrap: anywhere;
	}
}

/* ---------------------------------------------------------------
   14. Schriftgrößen auf schmalen Schirmen
   WordPress setzt die Preset-Klassen mit !important. Nur damit
   lassen sich die Displaystufen mobil zurücknehmen.
   --------------------------------------------------------------- */

@media (max-width: 782px) {
	.vda-choice h2.has-display-3-font-size,
	.vda-current h2.has-display-3-font-size {
		font-size: clamp(24px, 6.5vw, 32px) !important;
	}

	.has-display-2-font-size {
		font-size: clamp(28px, 7.5vw, 36px) !important;
	}

	.has-display-4-font-size {
		font-size: clamp(24px, 6.5vw, 32px) !important;
	}
}


/* ---------------------------------------------------------------
   15. Klickziele
   Eigenständige Ziele brauchen mindestens 24px Höhe, damit sie sich
   auch mit dem Finger sicher treffen lassen.
   --------------------------------------------------------------- */

.wp-block-button.is-style-text-link .wp-element-button {
	min-height: 32px;
	display: inline-flex;
	align-items: center;
}


.vda-partner-card .wp-block-post-terms a,
.vda-post-card .wp-block-post-terms a,
.vda-news-row .wp-block-post-terms a,

/* Das Partnerlogo ist ein eigenes Ziel und darf nicht flach sein. */
.vda-partner-card__logo a,
.vda-partner-card__logo {
	display: block;
	min-height: 24px;
}

/* Beitragstitel sind überall eigenständige Ziele. */
.wp-block-post-title a {
	display: inline-block;
	min-height: 24px;
	padding-block: 2px;
}

/* ---------------------------------------------------------------
   16. Termin-Einzelansicht
   --------------------------------------------------------------- */

.vda-termin-daten {
	display: grid;
	gap: 0;
	margin: 0 0 var(--wp--preset--spacing--70);
	border-block-start: 1px solid var(--wp--preset--color--line);
}

.vda-termin-daten__zeile {
	display: grid;
	grid-template-columns: 120px minmax(0, 1fr);
	gap: var(--wp--preset--spacing--40);
	padding-block: 14px;
	border-block-end: 1px solid var(--wp--preset--color--line);
}

.vda-termin-daten dt {
	margin: 0;
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.vda-termin-daten dd {
	margin: 0;
	font-size: var(--wp--preset--font-size--body);
	overflow-wrap: anywhere;
}

.vda-termin-daten dd a {
	color: var(--wp--preset--color--vda-blue);
	text-decoration: underline;
	text-underline-offset: 3px;
	display: inline-block;
	min-height: 24px;
}

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

/* Das Datum im Terminkopf steht ohne Absatzabstand. */
.vda-termin-datum {
	margin: 0;
}

.vda-event-row__date .vda-termin-datum {
	line-height: 1.1;
}

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

/* ---------------------------------------------------------------
   17. Redaktionsformulare
   Die Grundregeln für Felder und Knöpfe stehen in Abschnitt 9, hier
   nur, was für die längeren Formulare dazukommt.
   --------------------------------------------------------------- */

.vda-formular {
	max-width: 720px;
	margin-block-start: var(--wp--preset--spacing--60);
}

/* Abschnitt 9 deckt Text-, Mail- und Passwortfelder ab, dieser Block
   alles Übrige.

   Bewusst als Ausschluss und nicht als Aufzählung: die Aufzählung hat
   genau das getan, was Aufzählungen tun - sie war unvollständig. Als
   die Telefonfelder auf type="tel" umgestellt wurden, standen sie
   plötzlich ohne Rahmen zwischen ihren Nachbarn. Was kein Ankreuz-,
   Auswahl- oder Dateifeld ist, sieht jetzt gleich aus, auch wenn
   morgen ein weiterer Typ dazukommt. */
.vda-feld input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="hidden"]),
.vda-feld select,
.vda-feld textarea {
	min-height: 48px;
	padding: 12px var(--wp--preset--spacing--30);
	font: inherit;
	color: var(--wp--preset--color--ink);
	background-color: var(--wp--preset--color--white);
	border: 1px solid #aeb9c4;
	border-radius: var(--wp--custom--radius);
}

.vda-feld textarea {
	line-height: 1.6;
	resize: vertical;
	min-height: 150px;
}

.vda-feld textarea:focus-visible,
.vda-feld select:focus-visible {
	border-color: var(--wp--preset--color--vda-blue);
}

.vda-feld input[type="file"] {
	font-size: var(--wp--preset--font-size--small);
	padding-block: 8px;
}

.vda-feld label {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.vda-feld__vorschau img {
	display: block;
	max-width: 160px;
	height: auto;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius-small);
	background: var(--wp--preset--color--white);
}

.vda-feldgruppe {
	margin: var(--wp--preset--spacing--50) 0;
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius-small);
	background: var(--wp--preset--color--paper);
}

.vda-feldgruppe legend {
	padding-inline: 6px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.vda-kaestchen {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 10px 20px;
	margin-block-start: 12px;
}

.vda-kaestchen label {
	display: flex;
	align-items: center;
	gap: 9px;
	min-height: 32px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	cursor: pointer;
}

.vda-kaestchen input[type="checkbox"] {
	width: 18px;
	height: 18px;
	accent-color: var(--wp--preset--color--vda-blue);
	flex: none;
}

.vda-formular__aktion {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	margin-block-start: var(--wp--preset--spacing--60);
	padding-block-start: var(--wp--preset--spacing--50);
	border-block-start: 1px solid var(--wp--preset--color--line);
}

/* In der Reihe soll der Knopf nicht die ganze Breite nehmen. */
.vda-formular__aktion .vda-submit {
	width: auto;
	min-width: 220px;
	margin-block-start: 0;
}

/* Der zweite Weg neben dem Hauptknopf: als Entwurf zurücklegen statt
   veröffentlichen. Zwei gleich starke Knöpfe nebeneinander lassen
   niemanden erkennen, welcher der gewöhnliche Weg ist - deshalb hier
   nur die Umrisse. Anfassbar bleibt er genauso gross. */
.vda-submit--zweit {
	color: var(--wp--preset--color--vda-blue);
	background: transparent;
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--vda-blue);
}

.vda-submit--zweit:hover {
	color: var(--wp--preset--color--white);
	background: var(--wp--preset--color--vda-blue-dark);
}

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

.vda-meldung--gut {
	color: #2c6e3f;
	background: #eef7f0;
}

/* Zeilen mit Aktionsspalte brauchen feste Spalten.
   Gemessen am 06.09.2026: die Titel standen 39 Bildpunkte
   auseinander, je nachdem ob eine Zeile den Verweis „Ansehen“
   hatte. Ein Entwurf hat ihn nicht, ein veröffentlichter Termin
   schon - also sprang der Titel in jeder zweiten Zeile. Der Grund
   war die dritte Spalte auf `auto`: jede Zeile rechnete ihre
   Breite fuer sich. Eine feste Breite bringt alles in eine
   Flucht; die Aktionen sitzen darin rechtsbuendig. Andere
   Verwendungen der Zeile - etwa die Mitgliedsdaten auf der
   Ausweisseite - haben keine Aktionsspalte und bleiben, wie sie
   sind. */
@media (min-width: 900px) {
	.vda-data-row:has(.vda-data-row__aktionen) {
		grid-template-columns: minmax(0, 0.5fr) minmax(0, 1fr) 21rem;
	}

	.vda-data-row:has(.vda-data-row__aktionen) > .vda-data-row__aktionen {
		justify-content: flex-end;
	}
}

/* Auf schmalem Schirm reicht die Breite für drei Spalten nicht.
   Nebeneinander gequetscht sprang der Titel dort um bis zu 34
   Bildpunkte hin und her, je nachdem ob die Zeile den Verweis
   „Ansehen“ hat. Untereinander gibt es nichts mehr zu springen,
   und jede Zeile hat die volle Breite. Die Bildzeile der
   Neuigkeiten hat ihre eigene Anordnung, die bleibt. */
@media (max-width: 899px) {
	.vda-data-row:has(.vda-data-row__aktionen):not(.vda-data-row--mit-bild) {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--10);
	}
}

.vda-data-row__aktionen {
	display: flex;
	align-items: center;
	/* Umbrechen dürfen, aber nicht innerhalb eines Verweises: mit drei
	   Aktionen lief die Zeile auf Geräten unter 390 Pixeln über den
	   Rand. Der Abstand schrumpft auf schmalem Schirm mit. */
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20) clamp(12px, 4vw, var(--wp--preset--spacing--40));
	min-width: 0;
	white-space: nowrap;
}

.vda-inline-formular {
	display: inline;
	margin: 0;
}

button.vda-textlink {
	padding: 0;
	background: none;
	border: 0;
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	cursor: pointer;
	min-height: 32px;
}

.vda-textlink--warnung {
	color: var(--wp--preset--color--error);
}

.vda-textlink--warnung:hover {
	text-decoration: underline;
}

@media (max-width: 720px) {
	.vda-data-row__aktionen {
		white-space: normal;
	}

	.vda-formular__aktion .vda-submit {
		width: 100%;
	}
}

/* ---------------------------------------------------------------
   18. Newsletter
   --------------------------------------------------------------- */

.vda-newsletter {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
	gap: var(--wp--preset--spacing--80);
	align-items: start;
}

.vda-newsletter__text h2 {
	margin-block: 0 var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--display-4);
	line-height: 1.15;
	letter-spacing: -0.01em;
}

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

.vda-newsletter__formular .vda-feld {
	margin-block-end: var(--wp--preset--spacing--40);
}

.vda-newsletter__aktion .vda-submit {
	width: auto;
	min-width: 200px;
	margin-block-start: 0;
}

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

.vda-newsletter__recht,
.vda-newsletter__hinweis {
	margin: 0;
	font-size: var(--wp--preset--font-size--micro);
	line-height: 1.55;
	color: var(--wp--preset--color--muted);
}

/* Auf farbigen Bändern muss der Text hell bleiben. */
.has-vda-blue-deep-background-color .vda-newsletter__text h2,
.has-vda-blue-deep-background-color .vda-newsletter__text p,
.has-vda-blue-deep-background-color .vda-newsletter__recht,
.has-vda-blue-deep-background-color .vda-newsletter label {
	color: var(--wp--preset--color--white);
}

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


/* ---------------------------------------------------------------
   19. Mitgliedsausweis
   Wortgetreu aus mein-vda.css der Vorlage, die Variablennamen auf
   die Token des Themes umgeschrieben.
   --------------------------------------------------------------- */
.vda-card-block {
  display: grid;
  gap: 16px;
}
.vda-card-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--wp--custom--radius-small);
}
.vda-card-tabs button {
  min-height: 48px;
  border: 0;
  background: var(--wp--preset--color--paper);
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 700;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}
.vda-card-tabs button[aria-selected="true"] {
  background: var(--wp--preset--color--vda-blue);
  color: var(--wp--preset--color--white);
}
.vda-card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 12px;
  background: var(--wp--preset--color--white);
  box-shadow: var(--wp--preset--shadow--soft);
}
.vda-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
}
.vda-card__head img {
  width: 32px;
  height: 32px;
}
.vda-card__wordmark {
  padding-right: 12px;
  border-right: 2px solid var(--wp--preset--color--vda-blue);
  color: var(--wp--preset--color--vda-blue);
  font-size: 24px;
  font-weight: 750;
  line-height: 1;
  letter-spacing: -0.02em;
}
.vda-card__head-text {
  max-width: 24ch;
  color: var(--wp--preset--color--vda-blue-deep);
  font-size: var(--wp--preset--font-size--micro);
  font-weight: 700;
  line-height: 1.25;
}
.vda-card__body {
  position: relative;
  display: grid;
  gap: 4px;
  align-content: start;
  min-height: 136px;
  padding: 16px 16px 32px;
  background: #d9e6f7;
}
.vda-card__body p {
  margin: 0;
}
.vda-card__name {
  color: var(--wp--preset--color--ink);
  font-size: var(--wp--preset--font-size--display-6);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.05;
}
.vda-card__number {
  color: var(--wp--preset--color--ink);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 650;
}
.vda-card__org {
  max-width: 34ch;
  margin-top: 4px !important;
  color: var(--wp--preset--color--vda-blue-deep);
  font-size: var(--wp--preset--font-size--micro);
  line-height: 1.3;
}
.vda-card__validity {
  position: absolute;
  right: 16px;
  bottom: 8px;
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--micro);
}
.vda-card__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  align-items: center;
  padding: 10px 16px;
  color: var(--wp--preset--color--white);
  background: var(--wp--preset--color--vda-blue);
}
.vda-card__foot strong {
  font-size: var(--wp--preset--font-size--small);
}
.vda-card__foot span {
  font-size: var(--wp--preset--font-size--micro);
  line-height: 1.3;
}
.vda-card--back {
  min-height: 280px;
}
.vda-card--back .vda-card__back-inner {
  display: grid;
  gap: 8px;
  align-content: center;
  justify-items: center;
  grid-row: 1 / -1;
  padding: 24px;
  text-align: center;
}
.vda-card--back img {
  width: 56px;
  height: 56px;
  margin-bottom: 8px;
}
.vda-card--back p {
  max-width: 38ch;
  margin: 0;
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--small);
}
.vda-card-name {
  display: grid;
  gap: 8px;
}
.vda-card-name label {
  font-weight: 700;
}
.vda-card-name select {
  min-height: 48px;
  border: 1px solid #aeb9c4;
  border-radius: var(--wp--custom--radius-small);
  padding: 8px 16px;
  color: var(--wp--preset--color--ink);
  background-color: var(--wp--preset--color--white);
  font: inherit;
}
.vda-card-name select:focus {
  border-color: var(--wp--preset--color--vda-blue);
  box-shadow: 0 0 0 3px rgba(1, 110, 177, 0.18);
  outline: 0;
}
.vda-card-name small {
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--micro);
}
.vda-card-download {
  width: 100%;
}
.vda-card-download svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}
.vda-card-wallets {
  border-top: 1px solid var(--wp--preset--color--line);
  padding-top: 16px;
}
.vda-card-wallets > p {
  margin: 0 0 8px;
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--small);
}
.vda-card-wallets__row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.vda-wallet-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  border-radius: 8px;
  padding: 6px 16px 6px 10px;
  color: #f6f7f8;
  background: #101c25;
  text-decoration: none;
}
.vda-wallet-badge:hover {
  background: #24465e;
}
.vda-wallet-badge svg {
  width: 34px;
  height: 28px;
}
.vda-wallet-badge span {
  display: grid;
  font-size: var(--wp--preset--font-size--small);
  font-weight: 700;
  line-height: 1.15;
}
.vda-wallet-badge small {
  font-size: var(--wp--preset--font-size--micro);
  font-weight: 400;
}

/* Ergänzungen, die die Vorlage über ihr Grundgerüst mitbringt. */

.vda-card-name {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.vda-card-name label {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.vda-card-name select {
	padding: 9px 12px;
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius-small);
	background-color: var(--wp--preset--color--white);
	min-height: 42px;
}

.vda-card-name small {
	flex-basis: 100%;
	font-size: var(--wp--preset--font-size--micro);
	color: var(--wp--preset--color--muted);
}

.vda-card-download {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	text-decoration: none;
}

.vda-card-download svg {
	width: 20px;
	height: 20px;
	flex: none;
}

/* Solange ein Dienst nicht bereitsteht, bleibt sein Abzeichen stumm.
   Das lief bis zum 06.09.2026 über opacity - auf dem schwarzen Grund
   des Google-Abzeichens war davon fast nichts zu sehen, es wirkte
   weiter klickbar. Jetzt bekommt der Knopf einen eigenen, sichtbar
   anderen Zustand: heller Grund, gedämpfte Schrift, gestrichelte
   Kontur. */
.vda-wallet-badge--aus {
	background: var(--wp--preset--color--surface);
	border: 1px dashed var(--wp--preset--color--line);
	color: var(--wp--preset--color--muted);
	cursor: default;
	pointer-events: none;
}

.vda-wallet-badge--aus svg {
	opacity: 0.5;
	filter: grayscale(1);
}

.vda-card-wallets__hinweis {
	margin-block: 14px 0;
	font-size: var(--wp--preset--font-size--micro);
	color: var(--wp--preset--color--muted);
}

/* Der erste Hinweis klebte an der Knopfreihe. */
.vda-card-wallets__row + .vda-card-wallets__hinweis {
	margin-block-start: 18px;
}

/* Das Attribut hidden verliert gegen die Klassenregel display: grid.
   Ohne diese Zeile stehen beide Kartenseiten untereinander. */
.vda-card[hidden] {
	display: none;
}

/* Die Vorlage hat einen schmaleren Inhaltsbereich. Damit die Karte
   nicht die volle Spaltenbreite einnimmt, hier eine Grenze. */
.vda-card {
	max-width: 460px;
}

.vda-card-block {
	max-width: 460px;
}

.vda-card-wallets__row {
	flex-wrap: wrap;
}

/* ---------------------------------------------------------------
   20. Mitgliedsantrag
   --------------------------------------------------------------- */

.vda-antrag {
	max-width: 720px;
}

.vda-antrag__schritt {
	margin: 0 0 var(--wp--preset--spacing--60);
	padding: 0;
	border: 0;
}

.vda-antrag__schritt legend {
	padding: 0;
	margin-block-end: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--display-6);
	font-weight: 700;
	letter-spacing: -0.01em;
}

/* Die kurzen Felder stehen paarweise nebeneinander. */
.vda-antrag__schritt .vda-feld {
	margin-block-end: var(--wp--preset--spacing--40);
}

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

.vda-antrag__schritt legend,
.vda-antrag__schritt .vda-hinweis,
.vda-antrag__schritt .vda-kaestchen,
.vda-antrag__schritt .vda-formular__aktion,
.vda-antrag__weiter,
.vda-antrag__schritt .vda-trap {
	grid-column: 1 / -1;
}

/* Diese Felder brauchen die ganze Breite. */
.vda-feld:has(#vda-antrag-strasse),
.vda-feld:has(#vda-antrag-email),
.vda-feld:has(#vda-antrag-kontoinhaber),
.vda-feld:has(#vda-antrag-iban) {
	grid-column: 1 / -1;
}

.vda-feld__frei {
	font-weight: 400;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--micro);
}

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

.vda-antrag__weiter .vda-submit,
.vda-antrag .vda-formular__aktion .vda-submit {
	width: auto;
	min-width: 240px;
	margin-block-start: 0;
}

.vda-antrag #vda-antrag-iban {
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.04em;
}

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

/* Der Text im Kästchen bleibt ein Block, sonst wird jeder Verweis
   zu einem eigenen Flex-Element und die Zeile bricht mittendrin. */
.vda-kaestchen label > span {
	display: block;
	line-height: 1.5;
}

.vda-kaestchen label {
	align-items: start;
}

.vda-kaestchen input[type="checkbox"] {
	margin-block-start: 3px;
}

/* Die allgemeine Regel für hidden steht in theme.css. */

/* ---------------------------------------------------------------
   Vereinswahl
   Erscheint nur, wenn ein Konto mehrere Vereine pflegt, also bei
   Bezirksleitungen und in der Geschäftsstelle.
   --------------------------------------------------------------- */

.vda-vereinswahl {
	margin-block-end: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--blue-wash);
	border: 1px solid var(--wp--preset--color--blue-soft);
	border-radius: var(--wp--custom--radius);
}

.vda-vereinswahl__kopf {
	display: flex;
	flex-wrap: wrap;
	gap: 4px var(--wp--preset--spacing--20);
	align-items: baseline;
	margin-block-end: var(--wp--preset--spacing--20);
}

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

.vda-vereinswahl__aktiv {
	color: var(--wp--preset--color--vda-blue-dark);
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.2;
}

.vda-vereinswahl__suche {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin-block-end: var(--wp--preset--spacing--20);
}

.vda-vereinswahl__suche input[type="search"] {
	min-width: 0;
	flex: 1 1 220px;
	height: 48px;
	padding-inline: 14px;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius-small);
}

.vda-vereinswahl__suche button {
	height: 48px;
	padding-inline: var(--wp--preset--spacing--30);
}

.vda-vereinswahl__liste {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vda-vereinswahl__eintrag {
	display: block;
	min-height: 44px;
	padding: 10px 14px;
	color: var(--wp--preset--color--vda-blue-dark);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 700;
	line-height: 1.5;
	text-decoration: none;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius-small);
	transition: background-color var(--wp--custom--transition), border-color var(--wp--custom--transition);
}

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

.vda-vereinswahl__eintrag.ist-aktiv {
	color: var(--wp--preset--color--white);
	background: var(--wp--preset--color--vda-blue-dark);
	border-color: var(--wp--preset--color--vda-blue-dark);
}

.vda-vereinswahl__hinweis,
.vda-vereinswahl__leer {
	margin: var(--wp--preset--spacing--20) 0 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--micro);
}

/* ==========================================================================
   Anhänge in der Vereinsredaktion
   Vereine laden Bilder und PDFs hoch. Die Liste zeigt, was schon da ist,
   mit einem Haken zum Entfernen. Entfernt wird erst beim Speichern,
   damit ein Fehlklick nicht sofort etwas löscht.
   ========================================================================== */

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

.vda-feld__titel {
	display: block;
	font-weight: 600;
	margin-block-end: 0.5rem;
}

.vda-anhang-liste {
	list-style: none;
	margin: 0 0 0.75rem;
	padding: 0;
	display: grid;
	gap: 0.5rem;
}

.vda-anhang-liste--bild {
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

.vda-anhang {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.5rem 0.65rem;
	background: var(--wp--preset--color--paper-blue);
	border-radius: var(--wp--custom--radius);
	font-size: 0.875rem;
}

.vda-anhang-liste--bild .vda-anhang {
	flex-direction: column;
	align-items: stretch;
	text-align: center;
}

.vda-anhang__bild {
	width: 100%;
	height: 110px;
	object-fit: cover;
	border-radius: 4px;
	display: block;
}

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

.vda-anhang__name {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: anywhere;
}

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

.vda-anhang__weg {
	flex: none;
	display: flex;
	align-items: center;
	gap: 0.3rem;
	color: var(--wp--preset--color--muted);
	cursor: pointer;
	white-space: nowrap;
}

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

/* Ein Anhang, der zum Entfernen angehakt ist, blasst ab. */
.vda-anhang:has(.vda-anhang__weg input:checked) {
	opacity: 0.45;
	text-decoration: line-through;
}

.vda-feld__datei {
	display: inline-block;
	margin-block-end: 0.35rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--wp--preset--color--vda-blue);
}

.vda-feld__vorschau img {
	max-width: 120px;
	height: auto;
	display: block;
	margin-block-end: 0.4rem;
	border-radius: 4px;
}

/* Nur die Breite. Rahmen, Rundung und Höhe kommen aus der
   gemeinsamen Feldgestalt weiter oben - diese Regel hatte sie mit
   einer eigenen Farbe und einem Token überschrieben, das es im
   theme.json nie gab (`--vda-radius`). Die Klapplisten sahen dadurch
   anders aus als die Felder daneben. */
.vda-feld select {
	width: 100%;
}

/* ==========================================================================
   Mein Bezirk
   Die Bezirksleitung sieht die Vereine ihres Bezirks und kommt von hier
   in deren Profil. Eine Zeile je Verein, damit auch 30 Einträge noch
   überschaubar bleiben.
   ========================================================================== */

.vda-bezirk-liste {
	list-style: none;
	margin: var(--wp--preset--spacing--40) 0 0;
	padding: 0;
	display: grid;
	gap: 0;
}

.vda-bezirk-verein {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 0.25rem 1rem;
	align-items: baseline;
	padding-block: 0.85rem;
	border-block-end: 1px solid rgba(18, 105, 176, 0.14);
}

.vda-bezirk-verein__name {
	font-weight: 600;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.vda-bezirk-verein__name:hover {
	text-decoration: underline;
}

.vda-bezirk-verein__ort {
	grid-column: 1;
	font-size: 0.875rem;
	color: var(--wp--preset--color--muted);
}

.vda-bezirk-verein__status {
	grid-column: 1;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--vda-blue);
}

.vda-bezirk-verein .vda-textlink {
	grid-row: 1 / span 2;
	grid-column: 2;
	white-space: nowrap;
	align-self: center;
}

.vda-zahl {
	font-size: 0.875rem;
	color: var(--wp--preset--color--muted);
}

@media (max-width: 600px) {
	.vda-bezirk-verein {
		grid-template-columns: minmax(0, 1fr);
	}
	.vda-bezirk-verein .vda-textlink {
		grid-row: auto;
		grid-column: 1;
		justify-self: start;
	}
}

/* ==========================================================================
   Redaktionsformulare, Aufbau
   Zwanzig Felder untereinander sind eine Wand, und schmale Felder in
   einer breiten Spalte verschenken die halbe Fläche. Deshalb: Abschnitte
   mit Überschrift, kurze Felder paarweise, lange über die volle Breite.
   ========================================================================== */

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

.vda-formular__gruppe {
	border: 0;
	padding: 0;
	margin: 0 0 var(--wp--preset--spacing--70);
}

.vda-formular__gruppe > legend {
	padding: 0;
	margin-block-end: 0.25rem;
	font-size: clamp(1.125rem, 1.6vw, 1.375rem);
	font-weight: 700;
	line-height: 1.25;
}

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

/* Zwei Spalten ab 640px. Ein Feld mit vda-feld--breit nimmt beide. */
.vda-formular__raster {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
}

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

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

/* Im Raster sitzt der Abstand schon im gap. */
.vda-formular__raster > .vda-feld {
	margin-block-start: 0;
}

.vda-formular__raster > .vda-feld > input,
.vda-formular__raster > .vda-feld > select,
.vda-formular__raster > .vda-feld > textarea {
	width: 100%;
}

.vda-formular__gruppe-anhang {
	margin-block-start: calc( var(--wp--preset--spacing--50) * -1 );
	margin-block-end: var(--wp--preset--spacing--70);
}

/* Der Editor soll aussehen wie die übrigen Felder, nicht wie ein
   Fremdkörper aus dem Backend. */
.vda-feld .wp-editor-wrap {
	border: 1px solid #aeb9c4;
	border-radius: var(--wp--custom--radius);
	overflow: hidden;
	background: var(--wp--preset--color--white);
}

.vda-feld .wp-editor-container {
	border: 0;
}

.vda-feld .mce-toolbar-grp,
.vda-feld .quicktags-toolbar {
	border-block-end: 1px solid #dbe3ea;
	background: #f6f9fc;
}

.vda-feld .mce-panel {
	border-color: #dbe3ea;
	background: transparent;
}

.vda-feld .wp-editor-area {
	border: 0;
	padding: var(--wp--preset--spacing--30);
	font: inherit;
	min-height: 220px;
}

.vda-feld .mce-edit-area iframe {
	min-height: 220px;
}

/* Ein Editor darf nicht schmaler werden als seine Spalte. */
.vda-feld .wp-editor-wrap,
.vda-feld .mce-container,
.vda-feld .mce-container-body {
	max-width: 100%;
}

/* ==========================================================================
   Dateifelder
   Der rohe Knopf des Browsers passt nicht zum Rest und sagt je nach
   Sprache etwas anderes. Deshalb steckt das Feld unsichtbar hinter
   einem eigenen Knopf, der wie die übrigen Bedienelemente aussieht.
   ========================================================================== */

.vda-datei {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
	margin-block-start: 0.35rem;
}

.vda-datei input[type="file"] {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.vda-datei__knopf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 16px;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--vda-blue);
	border-radius: var(--wp--custom--radius);
	color: var(--wp--preset--color--vda-blue);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 650;
	line-height: 1;
	cursor: pointer;
}

/* Das Pluszeichen war ein Schriftzeichen: `content: "+"`. Rechnerisch
   sass es mittig, optisch nicht - das Glyph steht im Schriftschnitt auf
   der mathematischen Mittellinie, und die liegt über der optischen
   Mitte von Kleinbuchstaben. Es wirkte dadurch zu hoch.

   Jetzt ein Symbol mit festen Maßen, das sich nicht an der Schrift
   orientiert. Es sitzt auf derselben Linie wie der Text, unabhängig
   von Schriftschnitt und Zeilenhöhe. */
.vda-datei__knopf::before {
	content: "";
	width: 14px;
	height: 14px;
	flex: 0 0 14px;
	background-color: currentColor;
	mask: var(--vda-symbol-plus) center / 14px 14px no-repeat;
	-webkit-mask: var(--vda-symbol-plus) center / 14px 14px no-repeat;
}

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

/* Der Fokus liegt auf dem versteckten Feld, sichtbar wird der Knopf. */
.vda-datei input[type="file"]:focus-visible + .vda-datei__knopf {
	outline: 2px solid var(--wp--preset--color--white);
	outline-offset: 0;
	box-shadow: 0 0 0 4px var(--wp--preset--color--vda-blue-dark);
}

.vda-datei__gewaehlt {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	overflow-wrap: anywhere;
}

.vda-datei__gewaehlt--voll {
	color: var(--wp--preset--color--ink);
	font-weight: 600;
}

/* ==========================================================================
   Berufserfahrung
   Eine Zeile je Station. Auf breiten Fenstern nebeneinander, auf dem
   Telefon untereinander.
   ========================================================================== */

.vda-stationen {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	margin-block-end: var(--wp--preset--spacing--40);
}

.vda-station {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--paper-blue);
	border-radius: var(--wp--custom--radius);
}

@media (min-width: 720px) {
	.vda-station {
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.4fr) minmax(0, 0.8fr) minmax(0, 0.8fr);
		align-items: end;
	}
}

.vda-station .vda-feld {
	margin-block-start: 0;
}

.vda-station input {
	width: 100%;
}

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

/* ==========================================================================
   Die VDA-Card
   Zwei Seiten: das gedruckte Motiv und die Seite mit den eigenen Daten.
   Beide im Scheckkartenformat, damit klar ist, was man in der Hand
   halten wird.
   ========================================================================== */

.vda-card--motiv,
.vda-card--daten {
	width: 100%;
	max-width: 420px;
	aspect-ratio: 85.6 / 54;
	overflow: hidden;
	border-radius: var(--wp--custom--radius);
}

.vda-card--motiv {
	padding: 0;
	background: var(--wp--preset--color--vda-blue-dark);
	display: block;
}

.vda-card--motiv img,
.vda-card__motiv {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.vda-card__fehlt {
	padding: var(--wp--preset--spacing--40);
	color: #fff;
}

/* Die Datenseite bekommt ihren Inhalt in drei Bändern, wie die
   gedruckte Karte: Kopf weiss, Mitte hell, Fuss blau. */
.vda-card--daten {
	display: grid;
	grid-template-rows: auto 1fr auto;
	padding: 0;
	background: #fff;
	border: 1px solid rgba(18, 105, 176, 0.25);
}

.vda-card--daten .vda-card__head {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6rem 0.9rem;
	background: #fff;
}

.vda-card--daten .vda-card__head img {
	width: 26px;
	height: auto;
	flex: none;
}

.vda-card--daten .vda-card__head-text {
	font-size: 0.5625rem;
	line-height: 1.25;
	font-weight: 700;
}

.vda-card--daten .vda-card__wordmark {
	font-size: 1.1rem;
	font-weight: 800;
	color: var(--wp--preset--color--vda-blue);
	letter-spacing: 0.02em;
}

.vda-card--daten .vda-card__body {
	padding: 0.5rem 0.9rem;
	background: var(--wp--preset--color--paper-blue);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.15rem;
}

.vda-card--daten .vda-card__name {
	margin: 0;
	font-size: clamp(1rem, 3.4vw, 1.375rem);
	font-weight: 700;
	line-height: 1.1;
}

.vda-card--daten .vda-card__number {
	margin: 0;
	font-weight: 700;
	color: var(--wp--preset--color--vda-blue);
}

.vda-card--daten .vda-card__verein,
.vda-card--daten .vda-card__validity {
	margin: 0;
	font-size: 0.6875rem;
	line-height: 1.3;
}

.vda-card--daten .vda-card__foot {
	padding: 0.5rem 0.9rem;
	background: var(--wp--preset--color--vda-blue);
	color: #fff;
	font-size: 0.625rem;
	line-height: 1.35;
}

.vda-card--daten .vda-card__foot strong {
	display: block;
	font-size: 0.75rem;
}

/* Ohne feste Maße bläst ein SVG sich auf die volle Breite des
   Elternelements auf - beim Druckverweis stand deshalb ein Pfeil von
   einem halben Bildschirm mitten auf der Seite. Ein `viewBox` allein
   sagt dem Browser nur das Seitenverhältnis, nicht die Größe. */
.vda-card-drucken {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-block-start: var(--wp--preset--spacing--30);
}

.vda-card-drucken svg {
	width: 20px;
	height: 20px;
	flex: 0 0 20px;
}

/* Dieselbe Absicherung für jedes Symbol in einem Textverweis: was
   keine Maße hat, bekommt sie hier. */
.vda-textlink > svg {
	width: 20px;
	height: 20px;
	flex: 0 0 20px;
}

/* ------------------------------------------------------------------
   Formulare: Pflicht, Fehler, Dateien
   Ein Formular, das nur meldet „etwas stimmt nicht", ist keine Hilfe.
   Die Stellen hier zeigen, welches Feld gemeint ist und was mit einer
   Datei nicht geht - an Ort und Stelle, nicht ganz oben.
   ------------------------------------------------------------------ */

.vda-feld__pflicht {
	color: var(--wp--preset--color--error);
	margin-inline-start: 2px;
	font-weight: 700;
}

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

.vda-feld--fehler input,
.vda-feld--fehler select,
.vda-feld--fehler textarea {
	border-color: var(--wp--preset--color--error);
	box-shadow: 0 0 0 3px rgba(190, 30, 45, 0.14);
}

.vda-feld--fehler > label {
	color: var(--wp--preset--color--error);
}

.vda-feld__zaehler {
	margin-block-start: 4px;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--micro);
}

.vda-feld__zaehler--eng {
	color: var(--wp--preset--color--error);
}

/* Dateifelder */

.vda-datei__fehler {
	flex-basis: 100%;
	margin-block: var(--wp--preset--spacing--20) 0;
	padding: 10px 12px;
	border-inline-start: 3px solid var(--wp--preset--color--error);
	background: rgba(190, 30, 45, 0.06);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
}

.vda-datei__fehler:empty {
	display: none;
}

.vda-datei--fehler .vda-datei__knopf {
	border-color: var(--wp--preset--color--error);
	color: var(--wp--preset--color--error);
}

.vda-datei__proben {
	display: flex;
	flex-basis: 100%;
	flex-wrap: wrap;
	gap: 8px;
	margin-block-start: var(--wp--preset--spacing--20);
}

.vda-datei__proben:empty {
	display: none;
}

.vda-datei__probe {
	width: 64px;
	height: 64px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius-small);
	object-fit: cover;
}

.vda-datei__gewaehlt--voll {
	color: var(--wp--preset--color--ink);
	font-weight: 600;
}

/* Der Knopf, solange gespeichert wird */

.vda-formular button[type="submit"]:disabled {
	opacity: 0.65;
	cursor: progress;
}

/* Gespeichert, aber nicht alles. Weder Erfolgsgrün noch Fehlerrot -
   der Beitrag steht ja, nur eine Datei kam nicht mit. Die Farbe hält
   sich an den Rest: heller Grund, dunkler Text, Kante links. */
.vda-meldung--warnung {
	background: #fdf4e3;
	color: #7a5310;
	border-inline-start: 3px solid var(--wp--preset--color--warning);
}

/* Die Meldung direkt am Feld. Steht vor dem Hinweistext, weil sie das
   ist, was jetzt zählt. */
.vda-feld__fehler {
	display: block;
	margin-block-start: 6px;
	color: var(--wp--preset--color--error);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.4;
}

.vda-feld__fehler:empty {
	display: none;
}

/* ------------------------------------------------------------------
   Listen im Mitgliederbereich: Bild und Status
   Eine Liste aus zwanzig Zeilen Text lässt sich schwer überfliegen.
   Mit dem Bild daneben findet man den gesuchten Beitrag sofort, und
   das Fähnchen sagt, ob er überhaupt öffentlich steht.
   ------------------------------------------------------------------ */

.vda-data-row--mit-bild {
	grid-template-columns: 56px minmax(0, 0.5fr) minmax(0, 1fr) auto;
	align-items: center;
}

.vda-data-row__bild {
	display: block;
	width: 56px;
	height: 56px;
	overflow: hidden;
	border-radius: var(--wp--custom--radius-small);
	background: var(--wp--preset--color--surface);
}

.vda-data-row__bild img {
	width: 100%;
	height: 100%;
	/* Nicht beschneiden: die Bilder sind oft Plakate im Hochformat,
	   und ein Ausschnitt daraus hilft beim Wiedererkennen nicht. */
	object-fit: contain;
	display: block;
}

.vda-data-row__bild--leer {
	border: 1px dashed var(--wp--preset--color--line);
	background: transparent;
}

.vda-data-row__zeit {
	display: block;
	color: var(--wp--preset--color--muted);
}

.vda-fahne {
	display: inline-block;
	margin-inline-start: 8px;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	vertical-align: 2px;
}

.vda-fahne--draft {
	background: #fdf4e3;
	color: #7a5310;
}

.vda-fahne--pending {
	background: var(--wp--preset--color--blue-wash);
	color: var(--wp--preset--color--vda-blue-dark);
}

.vda-fahne--private {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--muted);
}

@media (max-width: 640px) {
	/* Auf schmalem Schirm bleibt das Bild links stehen, alles andere
	   stapelt sich rechts daneben. Die Aktionen brauchen die volle
	   Restbreite - mit `minmax(0, 1fr)` allein lief die Zeile 6 Pixel
	   über den Rand hinaus. */
	.vda-data-row--mit-bild {
		grid-template-columns: 44px minmax(0, 1fr);
		align-items: start;
	}

	.vda-data-row--mit-bild > .vda-data-row__bild {
		grid-row: span 3;
	}

	.vda-data-row--mit-bild > .vda-data-row__aktionen {
		flex-wrap: wrap;
		min-width: 0;
	}

	.vda-data-row__bild {
		width: 44px;
		height: 44px;
	}
}

/* ==========================================================================
   Formulare: die Stufen sortieren

   Gemessen am Vereinsprofil sah es so aus: die Feldbeschriftung war
   mit 14px kleiner als der eingegebene Text mit 17px, Beschriftung und
   Hinweis waren gleich groß, und die Zeile neben einem Dateiknopf war
   größer als der Knopf selbst. Sieben Textrollen, aber keine klare
   Reihenfolge - das wirkt unruhig, obwohl nichts kaputt ist.

   Die Reihenfolge von oben nach unten:

     Abschnittstitel   20px  700  dunkel
     Feldbeschriftung  15px  600  dunkel
     Eingabe           16px  400  dunkel
     Abschnittstext    15px  400  gedämpft
     Hinweis           13px  400  gedämpft

   Beschriftung und Eingabe liegen dicht beieinander, denn beide
   gehören zusammen. Was erklärt, tritt zurück.
   ========================================================================== */

.vda-formular__gruppe > legend {
	/* Eine `legend` wird vom Browser aus dem Fluss genommen und oben
	   im `fieldset` platziert - ein Polster am fieldset schiebt nur
	   den übrigen Inhalt weg, die Überschrift bleibt liegen. Die
	   Trennlinie landete dadurch zwischen Überschrift und Text.

	   `display: block` allein genügt nicht - der Browser behandelt eine
	   `legend` als direktes Kind eines `fieldset` weiterhin gesondert,
	   sie saß gemessen weiter bei null. Mit `float` verliert sie diese
	   Sonderrolle und ordnet sich in den Fluss ein, das Polster gilt
	   dann auch für sie. */
	float: left;
	display: block;
	width: 100%;
	font-size: 20px;
	line-height: 1.25;
}

.vda-formular__gruppentext {
	font-size: var(--wp--preset--font-size--micro);
	line-height: 1.5;
	margin-block-end: var(--wp--preset--spacing--30);
}

/* Diese Regel steht später als die weiter oben und gewinnt deshalb.
   Sie hielt die Beschriftungen bei 15 Bildpunkten fest, obwohl sie
   oben längst auf dem Token standen - gemessen am 06.09.2026. Feste
   Werte an zwei Stellen zu pflegen geht schief; hier steht jetzt
   dasselbe Token wie oben. */
.vda-feld label,
.vda-feld__titel {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.35;
}

/* Nicht kleiner als der kleinste Token: im VDA sitzen viele ältere
   Menschen am Rechner, und ein Hinweis, den man nicht lesen kann, ist
   keiner. */
.vda-feld__hinweis {
	font-size: var(--wp--preset--font-size--micro);
	line-height: 1.5;
	margin-block-start: 5px;
}

.vda-feld input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="hidden"]),
.vda-feld select,
.vda-feld textarea {
	font-size: 16px;
	min-height: 44px;
}

.vda-datei__gewaehlt {
	font-size: var(--wp--preset--font-size--micro);
}

.vda-feld__zaehler {
	font-size: var(--wp--preset--font-size--micro);
}

/* Die sechs Abschnitte des Vereinsprofils liefen ineinander: kein
   Rahmen, kein Abstand, nur Text. Eine feine Linie dazwischen trennt
   sie, ohne dass es nach Kästen aussieht.

   Nicht als `border-block-start` am fieldset: eine `legend` sitzt im
   Rahmen ihres fieldsets, die Linie lief dadurch mitten durch die
   Überschrift. Ein Pseudoelement mitten im Abstand hat dieses Problem
   nicht.

   Die Anhangblöcke - Bild des Ansprechpartners, Logo, Fotoalbum -
   bekommen keine Linie: sie gehören zu dem Abschnitt darüber und
   wirkten abgeschnitten. */
.vda-formular__gruppe + .vda-formular__gruppe,
.vda-formular__gruppe-anhang + .vda-formular__gruppe {
	position: relative;
	/* Bewusst Polster statt Rand: angrenzende Ränder fallen zusammen,
	   der tatsächliche Abstand war dadurch kleiner als gedacht und die
	   Linie schnitt den Hinweistext darüber. Ein Polster fällt nie
	   zusammen, der Abstand stimmt immer. */
	margin-block-start: 0;
	padding-block-start: 88px;
}

/* Die Linie sitzt genau in der Mitte des Polsters: 44 Pixel Luft nach
   oben zum vorigen Abschnitt, 44 nach unten zur Überschrift. Sie klebt
   dadurch an nichts. */
.vda-formular__gruppe + .vda-formular__gruppe::before,
.vda-formular__gruppe-anhang + .vda-formular__gruppe::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-start: 44px;
	height: 1px;
	background: var(--wp--preset--color--line);
}

/* Ein Anhangblock schliesst direkt an seinen Abschnitt an. */
.vda-formular__gruppe-anhang {
	margin-block-start: var(--wp--preset--spacing--30);
}

/* Etwas enger als vorher: 24px zwischen den Zeilen reichen, wenn die
   Beschriftung dicht am Feld steht. */
.vda-formular__raster {
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
}

.vda-feld {
	gap: 5px;
}
/* Die Vorschau eines schon hinterlegten Bildes. Klein und mit Rahmen,
   damit sie als Vorschau erkennbar ist und nicht als Inhalt. */
.vda-feld__vorschau img {
	width: 72px;
	height: 72px;
	object-fit: cover;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius-small);
}

/* ==========================================================================
   Der Standort auf der Karte

   Zwei Zahlen abtippen wollte niemand: 142 von 280 Vereinen haben
   keinen Kartenpunkt. Jetzt sucht ein Knopf ihn aus der Anschrift,
   und wer genauer sein will, klickt ihn an. Das Zahlenfeld ist
   zugeklappt - es ist der Ausnahmeweg, nicht der Hauptweg.
   ========================================================================== */

.vda-standort__einleitung {
	max-width: 62ch;
}

.vda-standort__aktionen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	margin-block: var(--wp--preset--spacing--30) 0;
}

.vda-standort__suchen {
	min-height: 44px;
}

.vda-standort__meldung {
	margin-block: var(--wp--preset--spacing--20) 0;
	font-size: 15px;
	line-height: 1.45;
}

.vda-standort__meldung:empty {
	display: none;
}

.vda-standort__meldung--gut {
	color: #2c6e3f;
}

.vda-standort__meldung--fehler {
	color: var(--wp--preset--color--error);
}

.vda-standort__karte {
	height: 380px;
	margin-block-start: var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius);
	overflow: hidden;
}

.vda-standort__karte[hidden] {
	display: none;
}

.vda-standort__hinweis {
	margin-block: var(--wp--preset--spacing--20) 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--micro);
}

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

.vda-standort__zahlen summary {
	color: var(--wp--preset--color--muted);
	font-size: 15px;
	cursor: pointer;
}

.vda-standort__zahlen label {
	display: block;
	margin-block: var(--wp--preset--spacing--20) 5px;
	font-size: 15px;
	font-weight: 600;
}

.vda-standort__zahlen input {
	max-width: 320px;
}

/* Leaflet setzt seine Bedienelemente mit sehr hohem z-index. Unter
   der klebenden Kopfzeile hat das nichts zu suchen. */
.vda-standort__karte .leaflet-pane,
.vda-standort__karte .leaflet-control {
	z-index: 1;
}

/* ==========================================================================
   Ansprechpartner: eine Liste statt zwei fester Plätze
   ========================================================================== */

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

.vda-personen__mehr[hidden] {
	display: none;
}

.vda-ansprechpartner[hidden] {
	display: none;
}

/* ==========================================================================
   Auswahlgruppen kompakter

   Die Terminarten standen als großer grauer Kasten mit viel Polster
   im Formular und dominierten es. Es sind elf Ankreuzfelder - das
   braucht keinen eigenen Rahmen und keine eigene Grundfarbe, eine
   Beschriftung und etwas Luft reichen.
   ========================================================================== */

.vda-feldgruppe {
	margin: var(--wp--preset--spacing--40) 0 0;
	padding: 0;
	border: 0;
	background: none;
}

.vda-feldgruppe legend {
	padding-inline: 0;
	font-size: var(--wp--preset--font-size--body);
	font-weight: 600;
	line-height: 1.35;
}

/* Die Ankreuzfelder als Kacheln.

   Vorher standen sie als nackte Zeilen im Raster, und weil die
   Beschriftungen verschieden lang sind, sprangen die Höhen zwischen
   30, 43 und 65 Pixeln - gemessen. Das sah zerrissen aus, und bei
   drei Zeilen Text stand das Kästchen weit oben ohne erkennbaren
   Bezug.

   Als Kacheln sind alle gleich hoch, die Klickfläche ist die ganze
   Kachel, und die Auswahl ist auf einen Blick zu sehen. Die Spalten
   sind breit genug für „§ 11 Aquaristik/Terraristik/Gefahrtiere",
   den längsten Eintrag. */
.vda-kaestchen {
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 10px;
	margin-block-start: 10px;
}

.vda-kaestchen label {
	align-items: flex-start;
	gap: 11px;
	min-height: 56px;
	padding: 12px 14px;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius);
	font-size: 16px;
	line-height: 1.35;
	transition: border-color var(--wp--custom--transition), background-color var(--wp--custom--transition);
}

.vda-kaestchen label:hover {
	border-color: var(--wp--preset--color--periwinkle);
	background: var(--wp--preset--color--blue-wash);
}

/* Angekreuzt: der Rahmen sagt es, nicht nur das Häkchen. */
.vda-kaestchen label:has(input:checked) {
	border-color: var(--wp--preset--color--vda-blue);
	background: var(--wp--preset--color--blue-wash);
	font-weight: 600;
}

.vda-kaestchen label:has(input:focus-visible) {
	outline: 2px solid var(--wp--preset--color--vda-blue);
	outline-offset: 2px;
}

.vda-kaestchen input[type="checkbox"] {
	/* Etwas größer als die Vorgabe des Browsers: das Häkchen ist bei
	   16 Pixeln kaum zu treffen und schlecht zu sehen. */
	width: 20px;
	height: 20px;
	margin: 0;
	flex: 0 0 20px;
	accent-color: var(--wp--preset--color--vda-blue);
	cursor: pointer;
}

/* Die Frage nach den Uhrzeiten steht nur bei mehrtägigen Terminen da.
   Sie gehört eng zu den Zeitfeldern darüber. */
.vda-zeitmodus {
	margin-block-start: var(--wp--preset--spacing--20);
	padding-block-start: var(--wp--preset--spacing--20);
	border-block-start: 1px solid var(--wp--preset--color--line);
}

.vda-zeitmodus legend {
	font-size: 16px;
	font-weight: 600;
}

.vda-zeitmodus label {
	font-size: 16px;
	min-height: 40px;
}

.vda-zeitmodus input[type="radio"] {
	width: 20px;
	height: 20px;
	accent-color: var(--wp--preset--color--vda-blue);
	cursor: pointer;
}

.vda-zeitmodus[hidden] {
	display: none;
}

/* ==========================================================================
   Links: Art und Adresse in einer Zeile
   ========================================================================== */

.vda-link-zeile {
	display: grid;
	grid-template-columns: 200px minmax(0, 1fr);
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	margin-block-start: var(--wp--preset--spacing--20);
}

.vda-link-zeile[hidden] {
	display: none;
}

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

.vda-links__mehr[hidden] {
	display: none;
}

@media (max-width: 640px) {
	.vda-link-zeile {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ==========================================================================
   Aufgabenkacheln

   Die Vereinsverwaltung war eine Liste aus fünf Zeilen mit je einem
   Wort am rechten Rand als Klickziel. Das liest sich wie eine Tabelle
   und sagt nicht, was hinter einem Punkt steckt.

   Als Kacheln hat jede Aufgabe ein Symbol, einen Titel und einen Satz
   dazu, was sie bewirkt. Die ganze Kachel ist anklickbar - für ältere
   Hände ein Unterschied gegenüber einem Wort von vier Zentimetern.
   ========================================================================== */

.vda-aufgaben {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: var(--wp--preset--spacing--30);
	margin-block-start: var(--wp--preset--spacing--40);
}

.vda-aufgabe {
	display: flex;
	flex-direction: column;
	gap: 6px;
	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);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	transition: border-color var(--wp--custom--transition), box-shadow var(--wp--custom--transition), transform var(--wp--custom--transition);
}

.vda-aufgabe:hover,
.vda-aufgabe:focus-visible {
	border-color: var(--wp--preset--color--vda-blue);
	box-shadow: var(--wp--preset--shadow--soft);
	transform: translateY(-1px);
}

.vda-aufgabe__symbol {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-block-end: 6px;
	border-radius: var(--wp--custom--radius);
	background: var(--wp--preset--color--blue-wash);
	color: var(--wp--preset--color--vda-blue);
}

.vda-aufgabe__symbol svg {
	width: 24px;
	height: 24px;
}

.vda-aufgabe__titel {
	font-size: 18px;
	font-weight: 650;
	line-height: 1.3;
}

.vda-aufgabe__text {
	color: var(--wp--preset--color--muted);
	font-size: 15px;
	line-height: 1.5;
}

.vda-aufgabe__zusatz {
	margin-block-start: auto;
	padding-block-start: 10px;
	color: var(--wp--preset--color--vda-blue);
	font-size: 15px;
	font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
	.vda-aufgabe {
		transition: none;
	}

	.vda-aufgabe:hover {
		transform: none;
	}
}

/* ==========================================================================
   Archive: Suche, Filter, Blättern

   Sie erscheinen erst ab acht Einträgen. Bei dreien wären sie nur
   Beiwerk, bei 60 Terminen sind sie das, was die Liste überhaupt
   bedienbar macht.
   ========================================================================== */

.vda-archivsuche {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto;
	gap: var(--wp--preset--spacing--30);
	align-items: end;
	margin-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	padding-block-end: var(--wp--preset--spacing--30);
	border-block-end: 1px solid var(--wp--preset--color--line);
}

.vda-archivsuche__feld {
	margin: 0;
}

.vda-archivsuche__aktion {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	margin: 0;
}

.vda-archivsuche__aktion .vda-submit {
	min-height: 48px;
}

.vda-archiv__befund {
	margin-block: 0 var(--wp--preset--spacing--20);
}

.vda-blaettern {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	margin-block-start: var(--wp--preset--spacing--40);
	padding-block-start: var(--wp--preset--spacing--30);
	border-block-start: 1px solid var(--wp--preset--color--line);
}

.vda-blaettern__schritt {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	padding-inline: 18px;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--vda-blue);
	border-radius: var(--wp--custom--radius);
	color: var(--wp--preset--color--vda-blue);
	font-size: 16px;
	font-weight: 650;
	text-decoration: none;
}

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

/* Steht allein, wenn es kein Zurück gibt: dann rückt „Weiter" nach
   rechts, und der Stand bleibt links. */
.vda-blaettern__stand {
	order: -1;
	margin-inline-end: auto;
	color: var(--wp--preset--color--muted);
	font-size: 15px;
}

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

/* ---------------------------------------------------------------
   Magazin: aktuelle Ausgabe und Heftarchiv
   --------------------------------------------------------------- */

/* Die aktuelle Ausgabe: Titelbild links, Inhalt rechts.
   Vorher stand das Inhaltsverzeichnis als eine lange Spalte neben
   einem kleinen Cover, mit viel Leerraum daneben - bei 20 Beiträgen
   wurde die Seite dadurch sehr lang. */
.vda-ausgabe {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	gap: var(--wp--preset--spacing--50);
	align-items: start;
}

.vda-ausgabe__cover {
	position: sticky;
	top: 96px;
}

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

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

/* Der Knopf trägt zwei Zeilen: was passiert, und wie schwer es wird.
   Die Hefte wiegen 28 bis 68 MB - wer das auf dem Handy antippt, ohne
   es zu wissen, hat sein Datenvolumen halb verbraucht. */
.vda-ausgabe__pdf {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	min-width: 0;
	text-align: left;
	text-decoration: none;
}

.vda-ausgabe__pdf svg {
	width: 22px;
	height: 22px;
	flex: none;
}

.vda-ausgabe__pdf span {
	display: grid;
	line-height: 1.2;
}

.vda-ausgabe__pdf small {
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 400;
	opacity: 0.85;
}

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

.vda-ausgabe__titel {
	margin-block: 0 var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--display-6);
}

/* Das Inhaltsverzeichnis in Spalten. Ein Heft hat bis zu 20 Beiträge;
   untereinander ergäbe das eine sehr lange Spalte neben einem kurzen
   Titelbild. */
.vda-inhaltsverzeichnis {
	columns: 2;
	column-gap: var(--wp--preset--spacing--50);
}

.vda-inhaltsverzeichnis__block {
	break-inside: avoid;
	margin-block-end: var(--wp--preset--spacing--30);
}

.vda-inhaltsverzeichnis__rubrik {
	margin-block: 0 8px;
	padding-block-end: 4px;
	border-block-end: 1px solid var(--wp--preset--color--line);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--vda-blue);
}

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

.vda-inhaltsverzeichnis__liste li {
	display: grid;
	grid-template-columns: 2.6em minmax(0, 1fr);
	gap: 6px;
	padding-block: 3px;
	line-height: 1.4;
}

.vda-inhaltsverzeichnis__seite {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	color: var(--wp--preset--color--muted);
	text-align: right;
}

.vda-inhaltsverzeichnis__titel {
	min-width: 0;
}

/* Das Heftregal: Kacheln mit Titelbild. Das Cover ist das
   Erkennungsmerkmal eines Hefts - eine Textzeile ist es nicht. */
/* Suche, Jahrgang und Knopf in einer Zeile. Der Knopf stand vorher
   darunter, weil er über beide Spalten spannte - zwischen ihm und den
   Feldern klaffte dadurch der Hinweistext des Suchfelds. */
/* Suche, Jahrgang und Knopf auf einer Linie.
   
   Der Knopf stand zuerst darunter, weil er über beide Spalten spannte.
   Danach sass er 25 Bildpunkte zu hoch, gemessen am 06.09.2026: der
   Hinweistext unter dem Suchfeld machte die erste Spalte höher als die
   anderen, und ein geratener Abstand von oben traf die Grundlinie
   nicht. Jetzt steht der Hinweis unter der ganzen Zeile, alle drei
   Spalten sind gleich hoch, und `align-items: end` setzt den Knopf auf
   dieselbe Linie wie die Felder - ohne eine einzige geratene Zahl. */
.vda-heftsuche {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto;
	gap: var(--wp--preset--spacing--30);
	align-items: end;
	margin-block-end: var(--wp--preset--spacing--40);
}

.vda-heftsuche__feld {
	margin: 0;
}

.vda-heftsuche__aktion {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	margin: 0;
}

.vda-heftsuche__hinweis {
	grid-column: 1 / -1;
	margin: 0;
	font-size: var(--wp--preset--font-size--micro);
	color: var(--wp--preset--color--muted);
}

.vda-heftsuche .vda-submit {
	width: auto;
	min-width: 180px;
	margin-block-start: 0;
}

.vda-heftregal {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
	gap: var(--wp--preset--spacing--40);
	margin-block-start: var(--wp--preset--spacing--30);
}

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

/* Ein Zeitschriftentitel darf nicht angeschnitten werden: cover hat
   bei hochformatigen Titeln oben und unten etwas abgeschnitten, und
   die Ausgaben liegen in ganz verschiedenen Seitenverhaeltnissen vor
   (flache Titel, quadratische Fotos, iPad-Bilder). contain zeigt
   jedes Heft ganz und stellt sie auf eine gemeinsame Grundlinie. */
.vda-heft__cover {
	display: grid;
	place-items: end center;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border-radius: 4px;
	background: var(--wp--preset--color--surface);
}

.vda-heft__cover img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain;
	object-position: bottom center;
	/* Damit die Hefte im Regal stehen und nicht schweben. */
	filter: drop-shadow( 0 2px 5px rgba( 0, 0, 0, 0.22 ) );
}

/* Ein Titel im Hochformat fuellt die Kachel ganz aus. PHP misst das
   Seitenverhaeltnis und setzt die Klasse. */
.vda-heft__cover img.ist-hochformat {
	object-fit: cover;
	object-position: center;
}

.vda-heft__cover--leer {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	font-size: var(--wp--preset--font-size--display-6);
	font-weight: 700;
	color: var(--wp--preset--color--periwinkle);
}

.vda-heft__text {
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1;
}

.vda-heft__titel {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
}

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

/* Was die Suche im Heft gefunden hat, mit Seitenzahl. Das ist der
   Grund, warum die Suche über die Inhaltsverzeichnisse geht und nicht
   nur über die Heftnamen. */
.vda-heft__treffer {
	margin: 4px 0 0;
	padding: 8px 10px;
	list-style: none;
	border-radius: 4px;
	background: var(--wp--preset--color--blue-wash);
	font-size: var(--wp--preset--font-size--micro);
	line-height: 1.4;
}

.vda-heft__treffer li {
	padding-block: 2px;
}

/* Ein Treffer führt in das Heft hinein, auf die Seite mit dem Beitrag.
   Als Verweis muss er anfassbar sein - 44 Bildpunkte, auch wenn der
   Titel nur eine Zeile hat. */
.vda-heft__treffer a {
	display: block;
	min-height: 40px;
	padding: 8px 6px;
	margin-inline: -6px;
	border-radius: 4px;
	color: inherit;
	text-decoration: none;
}

.vda-heft__treffer a:hover {
	background: var(--wp--preset--color--paper-blue);
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--vda-blue);
}

.vda-heft__seite {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	color: var(--wp--preset--color--vda-blue);
}

.vda-heft__treffer--mehr {
	color: var(--wp--preset--color--muted);
	font-style: italic;
}

.vda-heft__aktion {
	margin: auto 0 0;
	padding-block-start: 8px;
}

/* Ein richtiger Knopf, kein Textverweis. Als Verweis war er auf dem
   Handy 17 Bildpunkte hoch - zu wenig zum Treffen, das Prüfwerkzeug
   hat es gemeldet. Und die Handlung verdient einen Knopf: hier werden
   50 Megabyte geladen. */
.vda-heft__pdf {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-height: 44px;
	padding: 6px 12px;
	border: 1px solid var(--wp--preset--color--vda-blue);
	border-radius: var(--wp--custom--radius-small);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--micro);
	color: var(--wp--preset--color--vda-blue);
	text-decoration: none;
}

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

.vda-heft__pdf:hover small {
	color: inherit;
}

.vda-heft__pdf small {
	font-weight: 400;
	color: var(--wp--preset--color--muted);
}

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

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

	.vda-ausgabe__cover {
		position: static;
		max-width: 240px;
	}

	.vda-inhaltsverzeichnis {
		columns: 1;
	}

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

	.vda-heftsuche__aktion {
		margin-block-start: 0;
	}
}

/* Lesen steht vor Laden.
   Der eine Weg kostet nichts und geht sofort, der andere legt 68
   Megabyte auf die Festplatte. Deshalb trägt „Jetzt lesen" die volle
   Farbe und das PDF nur die Umrisse. */
.vda-ausgabe__lesen,
.vda-ausgabe__pdf {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	min-width: 0;
	text-align: left;
	text-decoration: none;
}

.vda-ausgabe__lesen svg {
	width: 22px;
	height: 22px;
	flex: none;
}

.vda-ausgabe__lesen span {
	display: grid;
	line-height: 1.2;
}

.vda-ausgabe__lesen small {
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 400;
	opacity: 0.85;
}

.vda-ausgabe__aktion + .vda-ausgabe__aktion {
	margin-block-start: 10px;
}

/* In der Kachel: zwei Knöpfe untereinander, beide weit genug zum
   Antippen. */
.vda-heft__aktion {
	display: grid;
	gap: 6px;
}

.vda-heft__lesen {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-height: 44px;
	padding: 6px 12px;
	border-radius: var(--wp--custom--radius-small);
	background: var(--wp--preset--color--vda-blue);
	color: var(--wp--preset--color--white);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--micro);
	text-decoration: none;
}

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

.vda-heft__lesen svg {
	width: 17px;
	height: 17px;
	flex: none;
}


/* ------------------------------------------------------------------
   Der Rahmen um das Heftarchiv

   Suche, Kacheln und Blättern standen schon bereit, aber der Block,
   der sie zusammensetzt, kam erst später dazu.
   ------------------------------------------------------------------ */

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


/* ------------------------------------------------------------------
   Das Schaufenster für alle, die noch nicht hineinsehen dürfen

   vda-aktuell gehört zur Mitgliedschaft. Wer kein Mitglied ist, sieht
   trotzdem, was ihn erwartet - eine leere Seite wäre keine Werbung für
   den Verband.
   ------------------------------------------------------------------ */

.vda-heftschaufenster {
	display: grid;
	grid-template-columns: 180px minmax(0, 1fr);
	gap: var(--wp--preset--spacing--50);
	align-items: center;
	margin-block-start: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--paper-blue);
	border-radius: var(--wp--custom--radius);
}

.vda-heftschaufenster__cover img {
	width: 100%;
	height: auto;
	border-radius: 4px;
	box-shadow: 0 6px 20px rgba(16, 28, 37, 0.18);
}

.vda-heftschaufenster__text h2 {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--display-5);
	line-height: 1.15;
}

.vda-heftschaufenster__text p {
	margin: 0;
}

.vda-heftschaufenster__aktion {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	margin-block-start: var(--wp--preset--spacing--30) !important;
}

.vda-heftschaufenster__aktion .vda-submit {
	width: auto;
	padding-inline: var(--wp--preset--spacing--40);
}

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

	.vda-heftschaufenster__cover {
		max-width: 160px;
	}
}