/*
 * 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);
	/* Ueber die volle Fensterbreite ausbrechen. Der alte negative Rand
	   rechnete mit der Polsterung der Vorlage und liess links und rechts
	   weisse Streifen stehen, seit das Band selbst der Seitenkopf ist.
	   Die Innenspalte bleibt zentriert, sie hat ihre eigene Hoechstbreite. */
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
	padding-inline: var(--wp--preset--spacing--inline);
}

/* Das Band liegt direkt unter der Kopfzeile an. Ohne das bliebe der
   Abstand von `is-style-band` als weisser Streifen darueber stehen -
   der Seitenkopf der Vorlage faellt hier ja weg. */
body.vda-mein main > .is-style-band {
	padding-block-start: 0;
}

.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 Listen, etwa beim Bearbeitungsstand */
.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);
}

/* Das Werbeband der Startseite, hier in der schmalen Spalte.
 *
 * Die Karte übernimmt das Muster `vda-online/membership-cta`, damit
 * beide Stellen gleich aussehen. Zwei Dinge passen in der Spalte
 * nicht und werden hier geradegezogen:
 *
 * Erstens die Aufteilung. Das Band stellt Text und Vorteilsliste
 * nebeneinander und schaltet erst unter 1024px Fensterbreite um. Hier
 * ist aber nicht das Fenster schmal, sondern die Spalte neben der
 * Bereichsnavigation - rund 800px bei 1120px Fenster. Die Medienabfrage
 * greift dort nie, und die Liste würde auf 300px gequetscht. Deshalb
 * immer untereinander.
 *
 * Zweitens das Zeichen. Im vollbreiten Band darf es weit über die
 * rechte Kante hinausragen; in der Karte wäre es dann nur noch ein
 * Balken. Kleiner und weniger weit hinaus.
 */
.vda-member-card--werben .vda-membership__grid {
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--40);
	align-items: start;
}

.vda-member-card--werben .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-member-card--werben .vda-membership__mark {
	inset-inline-end: -12%;
	width: clamp(200px, 38%, 340px);
}

/* Die Überschrift steht im Band eine Stufe grösser als in der alten
   Karte. In der Spalte ist das zu viel, deshalb eine Stufe zurück. */
.vda-member-card--werben h3 {
	max-width: 20ch;
	font-size: var(--wp--preset--font-size--display-4);
}

/* Auf dem Handy stehen die beiden Wege untereinander und nehmen die
   volle Breite - nebeneinander bricht der längere Text sonst um. */
@media (max-width: 599px) {
	.vda-member-card--werben .vda-membership__aktionen {
		display: grid;
		gap: var(--wp--preset--spacing--20);
	}

	.vda-member-card--werben .vda-membership__aktionen .wp-block-button,
	.vda-member-card--werben .vda-membership__aktionen .wp-element-button {
		width: 100%;
	}
}

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

/* Kante an einer Seite und dazu runde Ecken - das ist der Rand, den
   Jakob am 20.09.2026 den „KI-Rand" genannt hat, und er hat recht: die
   Kante läuft gerade und stößt dann auf eine Rundung, die sie
   abschneidet. Entweder das eine oder das andere. Wo eine Akzentkante
   sitzt, bleibt der Kasten eckig. */
.vda-meldung {
	margin-block-start: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--30);
	border-radius: 0;
	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;
}

/* Ohne eigene Ueberschrift steht der Block allein in seiner Spalte:
   dann faellt die zweite Spalte weg. */
.vda-newsletter--schmal {
	grid-template-columns: minmax(0, 1fr);
}

.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__kopf {
	margin-block: 0 var(--wp--preset--spacing--40);
	/* Eine Stufe unter der Ueberschrift links, damit die beiden sich
	   nicht die Waage halten. */
	font-size: var(--wp--preset--font-size--display-6);
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--vda-blue-deep);
}

/* Der Rechtstext gehoert zum Formular, steht aber eine Stufe leiser
   und durch eine feine Linie abgesetzt. */
.vda-newsletter__formular .vda-newsletter__recht {
	margin-block-start: var(--wp--preset--spacing--30);
	padding-block-start: var(--wp--preset--spacing--30);
	border-block-start: 1px solid var(--wp--preset--color--blue-soft);
}

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

.vda-newsletter__aktion .vda-submit {
	width: 100%;
	margin-block-start: 0;
	padding-block: 0.8em;
	font-size: var(--wp--preset--font-size--body);
}

.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 {
	color: var(--wp--preset--color--white);
}

/* Der Formularkasten steht weiß auf dem Band, sein Text bleibt dunkel. */
.has-vda-blue-deep-background-color .vda-newsletter__formular label,
.has-vda-blue-deep-background-color .vda-newsletter__recht {
	color: var(--wp--preset--color--muted);
}

/* Das Formular ist der Zweck der Seite. Auf weißem Grund verschwand
   ein weißer Kasten mit dünnem Rahmen, deshalb heller Blauton.

   Hier lag bis zum 20.09.2026 eine 4 Pixel hohe blaue Kante über der
   oberen Rundung. Sie hat nichts erklärt und nichts geordnet, sie war
   nur da - und über einer abgerundeten Ecke sieht so eine Kante immer
   nach Verlegenheit aus. Ersatzlos gestrichen. Der Kasten hebt sich
   über Fläche und Rahmen ab, das genügt. */
.vda-newsletter__formular,
.vda-newsletter__hinweis {
	position: relative;
	background: var(--wp--preset--color--paper-blue);
	border: 1px solid var(--wp--preset--color--blue-soft);
	border-radius: var(--wp--custom--radius);
	padding: var(--wp--preset--spacing--50);
	box-shadow: 0 1px 2px rgba(0, 78, 126, 0.06), 0 12px 28px -18px rgba(0, 78, 126, 0.5);
}

/* Die Eingabefelder bleiben weiß und heben sich damit vom Kasten ab. */
.vda-newsletter__formular input[type="text"],
.vda-newsletter__formular input[type="email"] {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--blue-soft);
	border-radius: var(--wp--custom--radius-small);
	padding: 0.7em 0.85em;
	transition: border-color var(--wp--custom--transition), box-shadow var(--wp--custom--transition);
}

.vda-newsletter__formular input[type="text"]:focus,
.vda-newsletter__formular input[type="email"]:focus {
	border-color: var(--wp--preset--color--vda-blue);
	box-shadow: 0 0 0 3px rgba(1, 110, 177, 0.16);
	outline: none;
}

.vda-newsletter__formular .vda-feld label {
	display: block;
	margin-block-end: var(--wp--preset--spacing--10);
	font-weight: 600;
}

/* "freiwillig" und "erforderlich" stehen leiser neben der Beschriftung,
   damit klar ist, was ausgefuellt werden muss. */
.vda-newsletter__formular .vda-feld__zusatz {
	margin-inline-start: var(--wp--preset--spacing--10);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 400;
	color: var(--wp--preset--color--muted);
}

.vda-newsletter__recht a {
	color: inherit;
	text-underline-offset: 0.2em;
}

.vda-newsletter__formular .vda-feld input {
	width: 100%;
}

.vda-newsletter__formular .vda-meldung {
	margin-block-start: 0;
}

.vda-newsletter .vda-trap {
	position: absolute;
	left: -9999px;
}

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

/* In der Mobilansicht frisst das grosse Polster zu viel von der
   ohnehin knappen Breite. */
@media (max-width: 600px) {
	.vda-newsletter__formular,
	.vda-newsletter__hinweis {
		padding: var(--wp--preset--spacing--40);
	}
}


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

/* "Deine Angaben" ist die Ueberschrift eines Formularabschnitts, kein
   Seitentitel - sie traegt dieselbe Stufe wie die Kacheltitel
   daneben. Vorher waren es 32 Bildpunkte. */
.vda-antrag__schritt legend {
	padding: 0;
	margin-block-end: var(--wp--preset--spacing--30);
	font-size: var(--vda-kacheltitel, clamp(19px, 1.5vw, 23px));
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

/* Sechs Spalten statt zwei: dann steht die Hausnummer neben der
   Strasse und die Postleitzahl neben dem Ort, so wie man eine
   Anschrift schreibt. Vorher brauchte der erste Schritt sieben Zeilen
   und ueber tausend Bildpunkte Hoehe. */
.vda-antrag__schritt .vda-feld {
	margin-block-end: var(--wp--preset--spacing--20);
}

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

/* Grundmass: ein Feld nimmt eine halbe Zeile ein. */
.vda-antrag__schritt .vda-feld {
	grid-column: span 3;
}

/* Die Anrede ist eine Auswahl aus drei Woertern und braucht wenig
   Platz; der Titel kann "Prof. Dr. med." heissen und bekommt die
   restliche Zeile. */
.vda-feld:has(#vda-antrag-anrede),
.vda-feld:has(#vda-antrag-plz),
.vda-feld:has(#vda-antrag-hausnummer) {
	grid-column: span 2;
}

.vda-feld:has(#vda-antrag-titel) {
	grid-column: span 4;
}

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

/* Die Strasse traegt vier von sechs Spalten, die Hausnummer die
   restlichen zwei daneben. Ort ebenso neben der Postleitzahl. */
.vda-feld:has(#vda-antrag-strasse),
.vda-feld:has(#vda-antrag-ort) {
	grid-column: span 4;
}

/* Telefon und E-Mail teilen sich eine Zeile - sonst stand das
   Telefonfeld allein und daneben blieb die halbe Zeile leer. */
.vda-feld:has(#vda-antrag-kontoinhaber),
.vda-feld:has(#vda-antrag-iban) {
	grid-column: 1 / -1;
}

/* Auf schmalen Geraeten steht alles untereinander. */
@media (max-width: 719px) {
	.vda-antrag__schritt {
		grid-template-columns: minmax(0, 1fr);
	}

	.vda-antrag__schritt .vda-feld,
	.vda-feld:has(#vda-antrag-anrede),
	.vda-feld:has(#vda-antrag-titel),
	.vda-feld:has(#vda-antrag-plz),
	.vda-feld:has(#vda-antrag-hausnummer),
	.vda-feld:has(#vda-antrag-strasse),
	.vda-feld:has(#vda-antrag-ort) {
		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;
}

/* Beide Knoepfe gleich hoch. Der eine traegt zwei Textzeilen, der
   andere je nach Ausgabe eine oder zwei - dadurch standen sie
   unterschiedlich hoch untereinander (80 und 62 Bildpunkte) und die
   Gruppe wirkte zusammengewuerfelt. */
.vda-ausgabe__lesen,
.vda-ausgabe__pdf {
	min-height: 72px;
	padding-block: 12px;
}

/* Die Druckfassung ist der dritte Weg und der seltenste: dieselbe
   Ausgabe in voller Aufloesung zum Ausdrucken. Sie hatte bisher gar
   keine eigene Regel und lief deshalb als Fliesstext weiter, mitten
   im Satz umgebrochen. Als eigener Absatz mit klarer Zeilenteilung
   ist zu erkennen, dass es eine dritte Moeglichkeit ist und keine
   Fussnote zum Knopf darueber. */
.vda-ausgabe__druckfassung {
	display: grid;
	gap: 2px;
	margin-block: 14px 0;
	padding-block-start: 12px;
	border-block-start: 1px solid var(--wp--preset--color--line);
	line-height: 1.35;
}

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

.vda-ausgabe__druckfassung a:hover,
.vda-ausgabe__druckfassung a:focus-visible {
	text-decoration: underline;
}

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

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


/* ---------------------------------------------------------------
   10. Bild hinter der Anmeldung

   Die Anmeldung stand auf weißer Fläche, mitten in einer Seite, die
   sonst nichts zeigt. Jetzt liegt ein Aquarienfoto dahinter, über die
   ganze Fläche zwischen Kopfzeile und Fußbereich.

   Das Bild kommt als Variable aus dem Plugin (siehe VDA_Formulare),
   damit sich das Motiv ohne CSS-Änderung tauschen lässt.
   --------------------------------------------------------------- */

body.vda-anmeldebild .vda-page-hero {
	display: none;
}

/* Das Bild geht bis an beide Fensterkanten, wie das Band im Fußbereich.
   Der Inhaltsbereich bringt sonst links und rechts einen Rand mit -
   auf dieser Seite steht nichts anderes darin, deshalb fällt er weg. */
body.vda-anmeldebild main {
	padding-inline: 0;
}

body.vda-anmeldebild main > .is-style-band {
	position: relative;
	max-width: none;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: calc(100vh - 96px);
	padding-block: var(--wp--preset--spacing--70);
	padding-inline: var(--wp--preset--spacing--40);
	background-image: var(--vda-anmeldebild-klein);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

/* Das Bild bleibt beim Blättern stehen.
   Ohne das wächst der Ausschnitt mit der Höhe des Kastens davor: auf
   der Registrierung ist die Karte höher als bei der Anmeldung, und das
   Motiv sah dort aus, als wäre es herangezoomt. An das Fenster
   gebunden bleibt es auf beiden Seiten gleich.

   Auf schmalen Geräten bleibt es beim mitlaufenden Bild: dort ist der
   feste Hintergrund in mehreren Browsern unzuverlässig. */
@media (min-width: 782px) {
	body.vda-anmeldebild main > .is-style-band {
		background-attachment: fixed;
	}
}

@media (min-width: 1024px) {
	body.vda-anmeldebild main > .is-style-band {
		background-image: var(--vda-anmeldebild);
	}
}

/* Ein Schleier über dem Foto. Ohne ihn steht die weiße Karte auf
   einem unruhigen Motiv, und der Rand der Karte verschwindet in den
   hellen Stellen des Bildes. */
body.vda-anmeldebild main > .is-style-band::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(2, 30, 51, 0.62) 0%, rgba(2, 30, 51, 0.42) 45%, rgba(2, 30, 51, 0.58) 100%);
	pointer-events: none;
}

body.vda-anmeldebild main > .is-style-band > * {
	position: relative;
	z-index: 1;
}

/* Die Karte trägt jetzt einen kräftigeren Schatten: auf dem Foto
   verliert sich der weiche Schatten sonst. */
body.vda-anmeldebild .vda-login-karte {
	margin-inline: auto;
	box-shadow: 0 24px 60px rgba(1, 20, 35, 0.45);
}

@media (max-width: 781px) {
	body.vda-anmeldebild main > .is-style-band {
		min-height: 0;
	}

	/* Auf schmalen Geräten zählt jeder Punkt Breite: die Karte nutzt
	   den Rand der Bahn und bringt keinen zweiten mit. */
	body.vda-anmeldebild .vda-login-karte {
		padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	}
}


/* ---------------------------------------------------------------
   11. Rückmeldung zur Mitgliedsnummer

   Die Nummer wird schon während der Eingabe beim Verband nachgesehen.
   Drei Zustände: gefunden, nicht gefunden, und der Fall, dass die
   Vereinsverwaltung gerade nicht antwortet - der darf nicht wie ein
   Fehler des Eingebenden aussehen.
   --------------------------------------------------------------- */

.vda-nummerstand {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-block: 8px 0;
	padding: 8px 12px;
	border-radius: var(--wp--custom--radius-small);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.4;
}

.vda-nummerstand::before {
	font-weight: 700;
}

.vda-nummerstand--laeuft {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--muted);
	font-weight: 500;
}

.vda-nummerstand--gueltig {
	background: #e7f6ec;
	color: #14622f;
}

.vda-nummerstand--gueltig::before {
	content: "✓";
}

.vda-nummerstand--ungueltig {
	background: #fdecec;
	color: #8f1d1d;
}

.vda-nummerstand--ungueltig::before {
	content: "✕";
}

/* Kein Urteil über die Eingabe, sondern über die Erreichbarkeit. */
.vda-nummerstand--unklar {
	background: #fdf4e3;
	color: #7a5410;
}

.vda-nummerstand--unklar::before {
	content: "!";
}


/* ---------------------------------------------------------------
   12. Die Anmeldekarte breiter und flacher

   Mit 520 Bildpunkten Breite stand alles in einer schmalen Säule: bei
   der Registrierung acht Felder untereinander, und die Karte war höher
   als der Bildschirm. Breiter gesetzt passen Vor- und Nachname sowie
   die beiden Passwortfelder nebeneinander, und die Karte bleibt in der
   Höhe überschaubar.
   --------------------------------------------------------------- */

body.vda-anmeldebild .vda-login-karte {
	width: 100%;
	max-width: 760px;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
}

/* Der Kopf der Karte darf ruhiger sein: die Überschrift trug die Größe
   einer Seitenüberschrift und nahm allein drei Zeilen ein. */
body.vda-anmeldebild .vda-login-karte h1 {
	font-size: var(--wp--preset--font-size--display-5);
	margin-block-end: 6px;
}

body.vda-anmeldebild .vda-login-karte > p:not(.vda-login-fuss) {
	margin-block: 0 var(--wp--preset--spacing--20);
}

body.vda-anmeldebild .vda-feld {
	margin-block-start: var(--wp--preset--spacing--20);
}

/* Zwei Felder je Zeile, sobald die Karte breit genug ist. */
@media (min-width: 700px) {
	body.vda-anmeldebild .vda-feld-paar {
		grid-template-columns: 1fr 1fr;
		gap: var(--wp--preset--spacing--30);
	}

}

/* Der Inhaltsbereich steht sonst in der Lesespalte von 578 Punkten und
   zieht die Karte mit hinein - eine max-width allein half nicht, weil
   der Bereich seine Breite fest zugewiesen bekommt. */
body.vda-anmeldebild .entry-content {
	width: 100%;
	max-width: 760px;
	margin-inline: auto;
}

/* Die beiden Fußzeilen der Anmeldekarte standen als zwei getrennte
   Absätze mit je einer Trennlinie darüber. Eine reicht. */
body.vda-anmeldebild .vda-login-fuss + .vda-login-fuss {
	margin-block-start: 4px;
	padding-block-start: 0;
	border-block-start: 0;
}


/* ---------------------------------------------------------------
   13. Sinnbilder, Auge und Passwortstärke

   Ein Formular aus lauter gleich aussehenden Kästen ist mühsam zu
   überfliegen. Jedes Feld trägt jetzt ein Strichzeichen, das sagt,
   worum es geht: Umschlag für die Adresse, Ausweis für die
   Mitgliedsnummer, Schlüssel für das Passwort.

   Die Zeichen stehen als Pfad im Stilblatt. Es wird keine Schrift und
   keine Datei nachgeladen, und sie färben sich mit dem Zustand des
   Feldes mit.
   --------------------------------------------------------------- */

.vda-feld__eingabe {
	position: relative;
	display: flex;
	align-items: center;
}

.vda-feld__eingabe > input {
	width: 100%;
}

.vda-feld--zeichen .vda-feld__eingabe::before {
	content: "";
	position: absolute;
	inset-inline-start: 14px;
	width: 20px;
	height: 20px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	opacity: 0.85;
	pointer-events: none;
}

/* Die Bestandsregel für Felder setzt `padding: 12px ...` mit fünf
   :not()-Bedingungen und gewinnt gegen zwei Klassen. Deshalb tragen
   diese beiden Regeln dieselben Bedingungen - sonst klebt der Text am
   Sinnbild. */
.vda-feld--zeichen .vda-feld__eingabe > input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="hidden"]) {
	padding-inline-start: 46px;
}

.vda-feld--post .vda-feld__eingabe::before {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23486b87%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%2218%22%20height%3D%2214%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22m3%207%209%206%209-6%22%2F%3E%3C%2Fsvg%3E");
}

.vda-feld--schluessel .vda-feld__eingabe::before {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23486b87%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%228%22%20cy%3D%2215%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22m11%2012%208-8m-2%202%202%202m-4%200%202%202%22%2F%3E%3C%2Fsvg%3E");
}

.vda-feld--ausweis .vda-feld__eingabe::before {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23486b87%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222.5%22%20y%3D%225%22%20width%3D%2219%22%20height%3D%2214%22%20rx%3D%222%22%2F%3E%3Ccircle%20cx%3D%228.5%22%20cy%3D%2211%22%20r%3D%222%22%2F%3E%3Cpath%20d%3D%22M5%2016.2c.7-1.4%202-2.2%203.5-2.2s2.8.8%203.5%202.2M15%2010h4M15%2014h4%22%2F%3E%3C%2Fsvg%3E");
}

.vda-feld--person .vda-feld__eingabe::before {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23486b87%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228%22%20r%3D%223.6%22%2F%3E%3Cpath%20d%3D%22M4.5%2020c.8-3.6%203.9-5.6%207.5-5.6s6.7%202%207.5%205.6%22%2F%3E%3C%2Fsvg%3E");
}

/* Vier weitere Sinnbilder: Telefon, Verein, Netzadresse und Ort.
   Die Reihenfolge der Zuordnung steht in VDA_Formulare::zeichen_raten();
   dort wird Telefon vor Nummer geprueft, sonst bekaeme
   „_telefon-nummer" den Ausweis. */

.vda-feld--telefon .vda-feld__eingabe::before {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23486b87%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6.6%203.5a1.6%201.6%200%200%201%202.2.4l1.5%202.2a1.6%201.6%200%200%201-.3%202.1L8.7%209.4a11%2011%200%200%200%205.9%205.9l1.2-1.3a1.6%201.6%200%200%201%202.1-.3l2.2%201.5a1.6%201.6%200%200%201%20.4%202.2l-1%201.4a2.4%202.4%200%200%201-2.6.9C11.7%2018.2%205.8%2012.3%204.3%206.1a2.4%202.4%200%200%201%20.9-2.6z%22%2F%3E%3C%2Fsvg%3E");
}

.vda-feld--verein .vda-feld__eingabe::before {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23486b87%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2010.5%2012%204l9%206.5%22%2F%3E%3Cpath%20d%3D%22M5%2010v10h14V10%22%2F%3E%3Cpath%20d%3D%22M10%2020v-5h4v5%22%2F%3E%3C%2Fsvg%3E");
}

.vda-feld--netz .vda-feld__eingabe::before {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23486b87%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%228.5%22%2F%3E%3Cpath%20d%3D%22M3.5%2012h17%22%2F%3E%3Cpath%20d%3D%22M12%203.5c2.2%202.4%203.3%205.3%203.3%208.5s-1.1%206.1-3.3%208.5c-2.2-2.4-3.3-5.3-3.3-8.5S9.8%205.9%2012%203.5z%22%2F%3E%3C%2Fsvg%3E");
}

.vda-feld--nadel .vda-feld__eingabe::before {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23486b87%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2021s6.5-6.2%206.5-11a6.5%206.5%200%201%200-13%200C5.5%2014.8%2012%2021%2012%2021z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2210%22%20r%3D%222.4%22%2F%3E%3C%2Fsvg%3E");
}

/* Ein Stift für Zeilen, die etwas benennen: Betreff, Titel, Stichwort. */
.vda-feld--stift .vda-feld__eingabe::before {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23486b87%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2020h4l10-10a2.1%202.1%200%200%200-3-3L5%2017v3z%22%2F%3E%3Cpath%20d%3D%22m14.5%206.5%203%203%22%2F%3E%3C%2Fsvg%3E");
}

/* Der Schalter zum Aufdecken sitzt am rechten Rand des Feldes. */
.vda-feld__auge {
	position: absolute;
	inset-inline-end: 8px;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: var(--wp--custom--radius-small);
	background: transparent no-repeat center / 20px 20px;
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23486b87%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2.5%2012S6%205.5%2012%205.5%2021.5%2012%2021.5%2012%2018%2018.5%2012%2018.5%202.5%2012%202.5%2012Z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E");
	cursor: pointer;
	opacity: 0.7;
}

.vda-feld__auge:hover,
.vda-feld__auge:focus-visible {
	opacity: 1;
	background-color: var(--wp--preset--color--surface);
}

.vda-feld__auge.is-offen {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23486b87%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%204.5%2020%2019.5M9.6%209.7A3%203%200%200%200%2012%2015a3%203%200%200%200%202.4-1.2%22%2F%3E%3Cpath%20d%3D%22M6.6%206.9C4.2%208.5%202.5%2012%202.5%2012S6%2018.5%2012%2018.5c1.6%200%203-.4%204.2-1M17.8%2015.3C20%2013.7%2021.5%2012%2021.5%2012S18%205.5%2012%205.5c-.7%200-1.4.1-2%20.3%22%2F%3E%3C%2Fsvg%3E");
	opacity: 1;
}

.vda-feld--passwort .vda-feld__eingabe > input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="hidden"]) {
	padding-inline-end: 48px;
}

/* ---------------------------------------------------------------
   Wie sicher ist das Passwort?

   Der Balken wächst mit der Bewertung, die Farbe geht von Rot nach
   Grün. Der Satz darunter sagt, was fehlt - eine Farbe allein wäre
   für Menschen mit Farbsehschwäche keine Auskunft.
   --------------------------------------------------------------- */

.vda-staerke {
	margin-block-start: 8px;
}

.vda-staerke__balken {
	height: 6px;
	border-radius: 999px;
	background: var(--wp--preset--color--line);
	overflow: hidden;
}

.vda-staerke__balken > span {
	display: block;
	width: 0;
	height: 100%;
	border-radius: 999px;
	background: currentColor;
	transition: width 160ms ease-out;
}

.vda-staerke__text {
	margin-block: 6px 0;
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 600;
	line-height: 1.4;
	color: inherit;
}

.vda-staerke--sehr-schwach { color: #b3261e; }
.vda-staerke--schwach { color: #b3261e; }
.vda-staerke--mittel { color: #8a6100; }
.vda-staerke--gut { color: #1d6b3a; }
.vda-staerke--sehr-gut { color: #14622f; }


/* Ankreuzfelder und Auswahlpunkte in der Hausfarbe statt im Blau des
   Betriebssystems - unter Windows war der Punkt violett. */
.vda-feld input[type="checkbox"],
.vda-feld input[type="radio"],
.vda-auswahl input[type="radio"],
.vda-schalter input[type="checkbox"] {
	accent-color: var(--wp--preset--color--vda-blue);
	width: 18px;
	height: 18px;
}


/* Der Stand der Mitgliedsnummer im Begrüßungsband.

   Das Band ist dunkel, deshalb tragen die drei Zustände helle Farben
   statt der Ampeltöne aus dem Formular. */
.vda-nummernstand {
	/* Kein Flex: Text und Mailadresse sind zwei Kinder und standen
	   dadurch als zwei schmale Spalten nebeneinander. Als Fliesstext
	   laeuft der Satz durch und die Adresse haengt hinten dran. Das
	   Zeichen sitzt absolut, damit die zweite Zeile mit einrueckt. */
	display: block;
	position: relative;
	/* Nicht in ch: die Hausschrift ist schmal, 78ch ergaben nur
	   496 Pixel und der Satz stand in einer duennen Saeule. */
	max-width: 900px;
	margin-block: var(--wp--preset--spacing--20) 0;
	padding: 12px 18px 12px 42px;
	border-radius: var(--wp--custom--radius-small);
	background: rgba(255, 255, 255, 0.12);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.55;
}

.vda-nummernstand::before {
	position: absolute;
	inset-inline-start: 18px;
	font-weight: 700;
}

.vda-nummernstand--gut::before {
	content: "✓";
	color: #9ff0bd;
}

.vda-nummernstand--schlecht::before {
	content: "✕";
	color: #ffc2c2;
}

.vda-nummernstand--offen::before {
	content: "…";
}

/* Hoehere Spezifitaet noetig: eine andere Regel deckelt den Absatz
   im Band auf 31rem. Mit dem Elternselektor gewinnt diese hier,
   ein !important braucht es nicht. */
.vda-member-band .vda-nummernstand {
	max-width: 900px;
}

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


/* ---------------------------------------------------------------
   14. Einladung statt Sperre

   Wer ein Konto hat, aber kein Mitglied ist, sah die Bereiche für
   Mitglieder gar nicht - sie verschwanden aus der Navigation, und wer
   die Adresse kannte, landete wortlos auf der Übersicht. Beim Heft-PDF
   kam ein nacktes 403.

   Jetzt stehen die Punkte mit einem Schloss in der Navigation, und der
   Bereich zeigt, was es dort gibt.
   --------------------------------------------------------------- */

.vda-einladung {
	padding: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--paper-blue);
	border-radius: var(--wp--custom--radius);
}

.vda-einladung h2 {
	margin-block: 4px 0;
	font-size: var(--wp--preset--font-size--display-5);
}

.vda-einladung .is-style-lead {
	max-width: 60ch;
	margin-block: var(--wp--preset--spacing--20) 0;
}

.vda-einladung__punkte {
	margin-block: var(--wp--preset--spacing--30) 0;
	padding: 0;
	list-style: none;
}

.vda-einladung__punkte li {
	position: relative;
	margin-block: 0 10px;
	padding-inline-start: 28px;
	line-height: 1.5;
}

.vda-einladung__punkte li::before {
	content: "✓";
	position: absolute;
	inset-inline-start: 0;
	color: var(--wp--preset--color--vda-blue);
	font-weight: 700;
}

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

.vda-einladung__zweit {
	font-weight: 600;
	text-decoration: underline;
}

.vda-einladung__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);
}

/* Ein gesperrter Punkt in der Navigation bleibt lesbar, trägt aber ein
   Schloss und weniger Gewicht - er ist ein Ausblick, kein Ziel. */
.vda-member-nav__zu {
	opacity: 0.72;
}

.vda-member-nav__zu span::after {
	content: "🔒";
	margin-inline-start: 6px;
	font-size: 0.85em;
}


/* ---------------------------------------------------------------
   15. Passwortregeln zum Abhaken

   Die vier Bedingungen stehen unter dem Feld und haken sich beim Tippen
   ab. Vorher stand dort nur „Mindestens zehn Zeichen", und alles
   Weitere erfuhr man erst nach dem Absenden.

   Farbe allein sagt es nicht: jede Zeile trägt ein Zeichen, damit auch
   ohne Farbsehen erkennbar bleibt, was noch fehlt.
   --------------------------------------------------------------- */

.vda-regeln {
	margin-block: 10px 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--micro);
	line-height: 1.6;
}

.vda-regeln li {
	position: relative;
	margin-block: 0 2px;
	padding-inline-start: 22px;
	color: var(--wp--preset--color--muted);
}

.vda-regeln li::before {
	content: "○";
	position: absolute;
	inset-inline-start: 0;
	font-weight: 700;
}

.vda-regeln li.is-offen {
	color: #8a6100;
}

.vda-regeln li.is-offen::before {
	content: "○";
}

.vda-regeln li.is-gut {
	color: #14622f;
}

.vda-regeln li.is-gut::before {
	content: "✓";
}

/* Sind alle vier erfüllt, tritt die Liste zurück - sie hat ihre Arbeit
   getan und soll nicht weiter um Aufmerksamkeit bitten. */
.vda-regeln.is-fertig {
	opacity: 0.6;
}

/* Stimmen die beiden Passwörter überein? */
.vda-abgleich {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-block: 8px 0;
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 600;
	line-height: 1.4;
}

.vda-abgleich::before {
	font-weight: 700;
}

.vda-abgleich--gut {
	color: #14622f;
}

.vda-abgleich--gut::before {
	content: "✓";
}

.vda-abgleich--offen {
	color: #8a6100;
}

.vda-abgleich--offen::before {
	content: "!";
}


/* Bankangaben: Kontoinhaber, IBAN und BIC.

   Das neunte Sinnbild der Reihe. Gebraucht wird es vom Aufnahmeantrag,
   der im zweiten Schritt nach der Bankverbindung fragt. */
.vda-feld--bank .vda-feld__eingabe::before {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23486b87%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%275%27%20width%3D%2718%27%20height%3D%2714%27%20rx%3D%272.5%27%2F%3E%3Cpath%20d%3D%27M3%2010h18%27%2F%3E%3Cpath%20d%3D%27M7%2015h4%27%2F%3E%3C%2Fsvg%3E");
}

/* Auswahlfelder tragen dasselbe Sinnbild wie Eingabefelder.

   Ohne diese Regel bliebe die Anrede als einziges Feld einer Spalte
   ohne Zeichen, und die Reihe wirkte zufällig. Der Pfeil des
   Auswahlfeldes sitzt rechts und kommt dem nicht ins Gehege. */
.vda-feld--zeichen .vda-feld__eingabe > select {
	width: 100%;
	padding-inline-start: 46px;
}

/* ---------------------------------------------------------------
   PetData und Referentenliste
   Zwei Bereiche aus dem alten Profilmenue. Beide zeigen ein Bild
   ueber dem Text: das Logo von PetData und die Titelseite der
   Referentenliste. Sie bleiben klein, damit sie nicht die Seite
   uebernehmen.
   --------------------------------------------------------------- */

.vda-petdata__logo {
	margin-block-end: 18px;
}

.vda-petdata__logo img {
	width: 180px;
	max-width: 60%;
	height: auto;
}

.vda-referentenliste__bild {
	margin: 22px 0;
}

.vda-referentenliste__bild img {
	width: 320px;
	max-width: 100%;
	height: auto;
	border: 1px solid var(--wp--preset--color--line, #e2e5e9);
	border-radius: 6px;
}

/* Der Brotkruemel sitzt seit 0.90.3 im Band, nicht mehr im hellen
   Seitenkopf darueber. Auf Dunkelblau braucht er helle Farben:
   das gedaempfte Blau der Vorgabe waere dort nicht lesbar. */
.vda-member-band .vda-brotkrumen {
	color: var(--wp--preset--color--blue-soft);
	margin-block: 0 var(--wp--preset--spacing--30);
}

.vda-member-band .vda-brotkrumen a {
	color: var(--wp--preset--color--white);
}

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

.vda-member-band .vda-brotkrumen a:focus-visible {
	outline: 2px solid var(--wp--preset--color--white);
	outline-offset: 3px;
}

/* Der Trennstrich zwischen den Stufen ebenfalls hell, sonst
   verschwindet er im Hintergrund. */
.vda-member-band .vda-brotkrumen__pfeil {
	color: var(--wp--preset--color--periwinkle);
}

/* ANMELDEKARTE MOBIL */
/* ------------------------------------------------------------------
   Anmeldekarte auf schmalen Bildschirmen

   Gemessen bei 375 Punkten: die Karte war 311 breit, mit 32 Punkten
   Abstand zum Rand auf jeder Seite und 40 Punkten Polsterung innen.
   Fuer das Eingabefeld blieben 231 von 375 Punkten uebrig.

   Die 32 Punkte aussen kommen nicht von der Karte, sondern vom
   Bandcontainer der Seite (.is-style-band mit has-global-padding).
   Dort wird angesetzt, sonst bleibt die Karte stehen, wo sie war.

   Jetzt 16 aussen und 20 innen: die Karte wird 343 breit, das Feld
   303 Punkte statt 231.
   ------------------------------------------------------------------ */

@media (max-width: 600px) {

	body.vda-anmeldebild main .wp-block-group.is-style-band {
		padding-inline: 16px;
	}

	body.vda-anmeldebild .entry-content {
		width: auto;
		max-width: none;
	}

	body.vda-anmeldebild .vda-login-karte {
		padding-inline: 20px;
		padding-block: 24px;
	}
}

/* MEIN VDA MOBIL */
/* ------------------------------------------------------------------
   Mein VDA auf dem Handy

   Gemessen bei 375 Punkten, vorher: das Begrüßungsband allein war 394
   Punkte hoch, darunter kamen 64 Punkte Leerraum, erst dann die
   Navigation. Vom ersten Bildschirm blieb also fast nichts für den
   Inhalt.

   Die Navigation lief als umbrechende Reihe. Jeder Eintrag war so
   breit wie sein Text, von 122 Punkten bei „PetData" bis 205 bei
   „Feedback und Hilfe". Nebeneinander ergab das eine ausgefranste
   Treppe ohne gemeinsame Kante.

   Jetzt: zwei gleich breite Spalten mit je einer Kachel, alle 160
   Punkte, Sinnbild und Text auf einer Linie. Das Band ist auf 262
   Punkte geschrumpft. Zusammen 172 Punkte weniger bis zum ersten
   Bereich, gut ein Drittel.
   ------------------------------------------------------------------ */

@media (max-width: 781px) {

	/* 80 und 64 Punkte Polsterung sind für den grossen Bildschirm
	   gedacht. Auf dem Handy ist das eine leere blaue Fläche. */
	.vda-member-band {
		padding-block: 26px 22px;
	}

	.vda-member-band h1 {
		font-size: var(--wp--preset--font-size--display-4);
		margin-block-end: 10px;
	}

	.vda-member-band__meta {
		gap: 2px 18px;
	}

	.vda-member-band .vda-nummernstand {
		margin-block: 12px 0;
	}
}

@media (max-width: 1023px) {

	.vda-member-layout {
		padding-block-start: 24px;
	}

	.vda-member-nav ul {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
	}

	.vda-member-nav li {
		margin: 0;
	}

	/* Jede Kachel füllt ihre Spalte und ist mindestens 48 Punkte hoch,
	   damit sie sich mit dem Daumen treffen lässt. */
	.vda-member-nav a {
		display: flex;
		align-items: center;
		gap: 10px;
		box-sizing: border-box;
		width: 100%;
		min-height: 48px;
		padding: 8px 12px;
		border: 1px solid var(--wp--preset--color--line);
		border-block-end: 1px solid var(--wp--preset--color--line);
		border-radius: 0;
		background: var(--wp--preset--color--white);
		font-size: var(--wp--preset--font-size--micro);
		line-height: 1.25;
	}

	.vda-member-nav a[aria-current="page"] {
		border-color: var(--wp--preset--color--vda-blue);
		background: var(--wp--preset--color--paper-blue);
		color: var(--wp--preset--color--vda-blue);
		font-weight: 600;
	}

	.vda-member-nav svg {
		flex: 0 0 auto;
		width: 20px;
		height: 20px;
	}

	/* Abmelden gehört nicht in die Reihe der Bereiche, es steht allein
	   auf der letzten Zeile. */
	.vda-member-nav__logout {
		grid-column: 1 / -1;
	}
}

/* ---------------------------------------------------------------
   NEWSLETTER-LEISTE ÜBER DEM FUSSBEREICH

   Die Anmeldung stand bis zum 19.09.2026 auf genau einer Seite.
   Wer sie nicht suchte, fand sie nicht. Diese Leiste steht auf jeder
   Seite direkt über dem Fußbereich - und hält sich zurück, wo im
   Inhalt schon ein Anmeldeformular steht.

   Sie sitzt zwischen hellem Seiteninhalt und dunklem Fußbereich,
   deshalb ein mittlerer Ton: dunkel genug, um sich vom Inhalt
   abzusetzen, hell genug, damit der weiße Formularkasten darauf
   wirkt. Der Text darin wird ausdrücklich weiß gesetzt, nicht
   geerbt.
   --------------------------------------------------------------- */
.vda-nl-leiste {
	background: var(--wp--preset--color--vda-blue-deep);
	color: var(--wp--preset--color--white);
	padding-block: var(--wp--preset--spacing--section-sub);
	padding-inline: var(--wp--preset--spacing--inline);
}

.vda-nl-leiste__innen {
	display: grid;
	/* Links steht nur ein Satz, rechts ein Formular mit zwei Feldern
	   und einem Knopf. Halbe/halbe gab dem Text mehr Platz, als er
	   braucht, und nahm ihn dem Kasten weg. */
	grid-template-columns: minmax(0, 32fr) minmax(0, 68fr);
	gap: var(--wp--preset--spacing--column);
	align-items: center;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

/* Das Motiv: ein Briefumschlag über Wellen, hinter der Überschrift.
   Strichzeichnung in Weiß mit wenig Deckkraft - es soll den Blick
   anziehen, nicht mit dem Text konkurrieren. Deshalb hier die
   Deckkraft und nicht in der Datei. */
.vda-nl-leiste__text {
	position: relative;
}

.vda-nl-leiste__text::before {
	content: "";
	position: absolute;
	/* Rechts oben und ueber den Rand hinaus. Mittig gesetzt lag der
	   Umschlag genau auf dem Wort „verpassen" und wirkte wie ein
	   Fleck; angeschnitten am Rand liest er sich als Grafik. */
	inset-block-start: -14%;
	inset-inline-end: -22%;
	width: clamp(160px, 17vw, 230px);
	aspect-ratio: 240 / 200;
	transform: rotate(-8deg);
	background: currentColor;
	opacity: 0.12;
	pointer-events: none;
	/* Als Maske statt als Bild: so nimmt die Zeichnung die Textfarbe
	   an und bleibt auch dann sichtbar, wenn die Leiste einmal eine
	   andere Grundfarbe bekommt. */
	-webkit-mask: url("../img/newsletter-motiv.svg") center / contain no-repeat;
	mask: url("../img/newsletter-motiv.svg") center / contain no-repeat;
}

.vda-nl-leiste__text > * {
	position: relative;
}

.vda-nl-leiste__oben {
	margin: 0 0 var(--wp--preset--spacing--10);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--periwinkle-light);
}

.vda-nl-leiste__titel {
	margin: 0 0 var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--white);
}

.vda-nl-leiste__satz {
	margin: 0;
	max-width: 46ch;
	color: var(--wp--preset--color--white);
}

/* Der Kasten trägt seine eigene Farbe schon mit. Auf dunklem Grund
   braucht er keinen zweiten Schatten, der dort ohnehin nichts tut.

   Die Textfarbe muss hier ausdrücklich zurückgesetzt werden. Die
   Leiste setzt Weiß, und das erbt bis in den weißen Kasten hinein:
   gemessen am 19.09.2026 stand „Vorname" und „E-Mail" dort weiß auf
   Weiß, Kontrast 1. Farben auf farbigen Flächen werden gesetzt, nicht
   geerbt. */
.vda-nl-leiste .vda-newsletter__formular {
	margin: 0;
	background: var(--wp--preset--color--white);
	box-shadow: none;
	color: var(--wp--preset--color--ink);
}

.vda-nl-leiste .vda-newsletter__formular :is(h2, p, label, li, strong, a) {
	color: var(--wp--preset--color--ink);
}

.vda-nl-leiste .vda-newsletter__formular :is(.vda-feld__zusatz, .vda-newsletter__recht) {
	color: var(--wp--preset--color--muted);
}

.vda-nl-leiste .vda-newsletter__formular .vda-newsletter__recht a {
	color: var(--wp--preset--color--muted);
}

/* Die Überschrift im Formular wiederholte den Titel der Leiste.
   Einmal reicht, sie bleibt aber für Vorlesewerkzeuge stehen. */
.vda-nl-leiste .vda-newsletter__kopf {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

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

	.vda-nl-leiste__satz {
		max-width: none;
	}

	/* In der Mobilansicht liegt der Text über die ganze Breite. Das
	   Motiv säße dann mitten darin. */
	.vda-nl-leiste__text::before {
		display: none;
	}
}


/* ---------------------------------------------------------------
   PFLICHTHINWEIS: KURZ SICHTBAR, REST AUFKLAPPBAR

   Der Hinweis nach Artikel 13 war fünf Zeilen lang und damit länger
   als das Formular darüber. Er bleibt vollständig erhalten, aber der
   Leser sieht zuerst den einen Satz, der ihn betrifft.
   --------------------------------------------------------------- */
.vda-newsletter__recht {
	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--blue-soft);
}

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

.vda-newsletter__recht-mehr {
	margin-block-start: var(--wp--preset--spacing--05);
}

.vda-newsletter__recht-mehr > summary {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	cursor: pointer;
	list-style: none;
	font-size: var(--wp--preset--font-size--micro);
	color: var(--wp--preset--color--vda-blue);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

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

.vda-newsletter__recht-mehr > summary::after {
	content: "";
	width: 6px;
	height: 6px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform var(--wp--custom--transition);
}

.vda-newsletter__recht-mehr[open] > summary::after {
	transform: translateY(1px) rotate(-135deg);
}

.vda-newsletter__recht-mehr p {
	margin-block: var(--wp--preset--spacing--10) 0;
	font-size: var(--wp--preset--font-size--micro);
	line-height: 1.55;
	color: var(--wp--preset--color--muted);
}

/* ---------------------------------------------------------------
   NEWSLETTER-LEISTE: SCHMALER

   Die Leiste war 792 Pixel hoch und damit höher als mancher
   Seiteninhalt. Gemessen am 20.09.2026: 84 Pixel Polster oben und
   unten, dazu ein Formular mit 48 Pixel Innenabstand und großen
   Feldabständen. Alles eine Stufe kleiner.
   --------------------------------------------------------------- */
.vda-nl-leiste {
	padding-block: clamp(40px, 4vw, 56px);
}

.vda-nl-leiste__innen {
	gap: clamp(32px, 5vw, 64px);
}

.vda-nl-leiste__titel {
	font-size: clamp(1.75rem, 3vw, 2.25rem);
	line-height: 1.15;
}

.vda-nl-leiste__satz {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.55;
}

.vda-nl-leiste .vda-newsletter__formular {
	padding: var(--wp--preset--spacing--40);
}

/* Die Überschrift im Kasten ist für Vorlesewerkzeuge da und optisch
   ausgeblendet - sie schob trotzdem 32 Pixel Abstand vor sich her. */
.vda-nl-leiste .vda-newsletter__kopf {
	margin: 0;
}

/* Die Felder trugen oben 24 und unten 16 Pixel. Zwischen zwei Feldern
   summierte sich das auf 40 Pixel Luft, bei zwei Feldern und einem
   Knopf war das ein Drittel der Kastenhöhe. */
.vda-nl-leiste .vda-newsletter__formular .vda-feld {
	margin-block: var(--wp--preset--spacing--20) 0;
}

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

/* Vorname und E-Mail nebeneinander. Untereinander kostete jedes Feld
   85 Pixel, zusammen mit den Abständen ein Drittel des Kastens - für
   zwei kurze Eingaben. Erst ab genug Breite, darunter bleibt es
   untereinander. */
@media (min-width: 1000px) {
	.vda-nl-leiste .vda-newsletter__formular {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
		column-gap: var(--wp--preset--spacing--20);
	}

	.vda-nl-leiste .vda-newsletter__formular > :not(.vda-feld) {
		grid-column: 1 / -1;
	}

	.vda-nl-leiste .vda-newsletter__formular .vda-feld {
		margin-block: var(--wp--preset--spacing--20) 0;
	}
}

/* Etwas flacher: die Eingaben trugen 12 Pixel Polster oben und unten
   und kamen damit auf 51 Pixel, der Knopf auf 56. */
.vda-nl-leiste .vda-newsletter__formular input[type="text"],
.vda-nl-leiste .vda-newsletter__formular input[type="email"] {
	padding-block: 0.55em;
}

.vda-nl-leiste .vda-newsletter__aktion .vda-submit {
	padding-block: 0.7em;
}

.vda-nl-leiste .vda-newsletter__recht {
	margin-block-start: var(--wp--preset--spacing--20);
}

@media (max-width: 900px) {
	.vda-nl-leiste {
		padding-block: clamp(32px, 7vw, 44px);
	}
}