/*
 * VDA Online - Kopf, Fuß und die Bänder der Startseite
 *
 * Zweite Stildatei, damit theme.css bei den Blockstilen bleibt.
 * Alle Werte stammen aus den Presets in theme.json.
 */

/* ---------------------------------------------------------------
   1. Kopfbereich
   --------------------------------------------------------------- */

.vda-header {
	position: sticky;
	top: 0;
	z-index: 50;
	border-block-end: 1px solid var(--wp--preset--color--line);
	/* Derselbe Seitenrand wie der Inhalt darunter. Ohne diese Angabe
	   erbt die Leiste einen festen Wert, waehrend der Rest der Seite
	   mit der Fensterbreite mitwaechst - das Logo stand dann auf
	   schmalen Geraeten 16 Punkte weiter rechts als die Ueberschrift. */
	padding-inline: var(--wp--preset--spacing--inline);
}

/* Die Zeile schiebt nichts mehr auseinander. Vorher stand hier das
   space-between des Blockeditors: Logo links, alles andere in einem
   Klumpen ganz rechts, mit 142 Pixeln Loch dazwischen. Jetzt folgt die
   Navigation direkt auf das Logo, und nur „Mein VDA" wandert nach
   rechts. */
/* Den Seitenrand traegt die Bahn `.vda-header`, wie ueberall sonst auf
   der Seite. Der Kasten darin bekam ihn ueber `has-global-padding` ein
   zweites Mal - bei breiten Fenstern verschwand das im Leerraum neben
   der 1220er-Box, bei mittleren nicht: dort begann das Logo 40 Punkte
   weiter rechts als jeder Inhalt darunter. */
.vda-header__inner {
	padding-inline: 0;
}

.vda-header__row {
	min-height: var(--wp--custom--header-height);
	gap: var(--wp--preset--spacing--30);
	justify-content: flex-start;
}

.vda-header .vda-nav {
	min-width: 0;
	flex: 1 1 auto;
}

.vda-header .vda-header__member {
	margin-inline-start: var(--wp--preset--spacing--20);
}

/* Das Markenfeld ist eine blaue Fläche, die unter den Kopf hinausragt.
   Beim Scrollen zieht sie sich bündig zurück. Der Überstand liegt bei
   16 Pixeln, vorher 32: die halbe Höhe reicht, damit die Fläche unter
   der Kopfzeile hervorschaut, ohne in den Seitenkopf zu ragen. */
.vda-header .vda-brand {
	position: relative;
	/* Über dem Mega-Panel, sonst legt sich das aufgeklappte Menü über
	   die blaue Fläche und der Überstand verschwindet.

	   46 statt 41: die aufgeklappte Navigation liegt auf Tablet und
	   Mobil bei 45. Mit 41 schnitt sie die unteren 28 Pixel des
	   Markenfeldes ab - das Logo sah aus wie abgeschnitten. */
	z-index: 46;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 var(--wp--custom--brand-width);
	width: var(--wp--custom--brand-width);
	/* Feste Höhe statt `align-self: stretch` plus unterem Polster.
	   Vorher zentrierte Flex das Zeichen nur im Bereich der Kopfzeile,
	   der Überstand darunter zählte nicht mit: gemessen 0 Pixel Luft
	   oben, 16 unten. Mit fester Höhe sitzt das Zeichen mittig in der
	   ganzen sichtbaren Fläche. */
	align-self: flex-start;
	height: calc(var(--wp--custom--header-height) + var(--wp--custom--brand-overhang));
	margin-block-end: calc(-1 * var(--wp--custom--brand-overhang));
	background: var(--wp--preset--color--vda-blue);
	transition: height var(--wp--custom--transition), margin-block-end var(--wp--custom--transition);
}

.vda-header.is-scrolled .vda-brand {
	height: var(--wp--custom--header-height);
	margin-block-end: 0;
}

.vda-header .vda-brand img {
	width: 68px;
	height: auto;
	display: block;
	transition: width var(--wp--custom--transition);
}

.vda-header.is-scrolled .vda-brand img {
	width: 56px;
}

.vda-header__tools {
	gap: var(--wp--preset--spacing--20);
}

.vda-header .vda-nav .wp-block-navigation-item__content {
	padding-block: var(--wp--preset--spacing--10);
	position: relative;
}

/* Aktive und angesteuerte Punkte bekommen einen Unterstrich, der aufzieht. */
.vda-header .vda-nav .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	height: 3px;
	background: var(--wp--preset--color--vda-blue);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--wp--custom--transition);
}

.vda-header .vda-nav .wp-block-navigation-item:hover .wp-block-navigation-item__content::after,
.vda-header .vda-nav .current-menu-item .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

/* ---------------------------------------------------------------
   Suche in der Kopfzeile

   Der Suchblock von WordPress liegt hier nicht mehr. Er liess sich in
   der Bauart „nur Knopf" nicht wieder schliessen: der zweite Klick auf
   die Lupe sendet das Formular ab, und ohne Eingabe blockiert der
   Browser mit „Fülle dieses Feld aus".

   Jetzt steht das Feld in der Zeile, nicht darüber. Beim Öffnen treten
   die Menüpunkte zurück und geben ihm ihren Platz. Aus der Lupe wird
   ein Kreuz.
   --------------------------------------------------------------- */

.vda-kopfsuche {
	display: flex;
	min-width: 0;
	flex: 0 1 auto;
	gap: 6px;
	align-items: center;
}

/* Die Suche schiebt sich selbst nach rechts, direkt vor den
   Mein-VDA-Knopf. Dadurch bleibt der Schalter beim Aufklappen an seiner
   Stelle und nur das Feld wächst nach links. Der Selektor braucht die
   drei Stufen, sonst gewinnt das Flex-Layout des Blockeditors. */
.vda-header .vda-nav .vda-kopfsuche {
	margin-inline-start: auto;
}

.vda-header.hat-suche-offen .vda-kopfsuche {
	flex: 1 1 auto;
	justify-content: flex-end;
}

.vda-kopfsuche__form {
	display: flex;
	min-width: 0;
	flex: 1 1 auto;
	gap: 6px;
	align-items: center;
	justify-content: flex-end;
}

.vda-kopfsuche__feld {
	width: 100%;
	max-width: 460px;
	min-width: 0;
	height: 40px;
	padding-inline: 12px;
	color: var(--wp--preset--color--ink);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius-small);
}

.vda-kopfsuche__los,
.vda-kopfsuche__schalter {
	display: flex;
	width: 40px;
	height: 40px;
	flex: none;
	align-items: center;
	justify-content: center;
	padding: 0;
	color: var(--wp--preset--color--ink);
	background: transparent;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius-small);
	cursor: pointer;
	transition: color var(--wp--custom--transition), background-color var(--wp--custom--transition), border-color var(--wp--custom--transition);
}

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

.vda-kopfsuche__zeichen {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Ohne Javascript bleibt alles sichtbar. Erst wenn das Skript den
   Schalter übernommen hat, klappt das Feld ein. */
.vda-kopfsuche.ist-bereit .vda-kopfsuche__form {
	overflow: hidden;
	max-width: 0;
	opacity: 0;
	visibility: hidden;
	transition: max-width 220ms ease, opacity 160ms ease;
}

.vda-kopfsuche.ist-bereit.ist-offen .vda-kopfsuche__form {
	max-width: 460px;
	opacity: 1;
	visibility: visible;
}

/* Vor dem ersten Klick wäre das Kreuz sonst neben der Lupe zu sehen. */
.vda-kopfsuche.ist-bereit .vda-kopfsuche__zeichen--zu,
.vda-kopfsuche.ist-bereit.ist-offen .vda-kopfsuche__zeichen--auf {
	display: none;
}

.vda-kopfsuche.ist-bereit.ist-offen .vda-kopfsuche__zeichen--zu {
	display: flex;
}

.vda-kopfsuche.ist-offen .vda-kopfsuche__schalter {
	color: var(--wp--preset--color--white);
	background: var(--wp--preset--color--vda-blue-dark);
	border-color: var(--wp--preset--color--vda-blue-dark);
}

/* Die Menüpunkte geben dem Feld ihren Platz. Nur auszublenden reicht
   nicht: unsichtbar belegen sie ihn weiter, und das Feld bliebe bei
   1250 Pixel Fensterbreite 26 Pixel schmal. */
.vda-nav__triggers {
	overflow: hidden;
	max-width: 100%;
	transition: max-width 240ms ease, opacity 140ms ease;
}

.vda-header.hat-suche-offen .vda-nav__triggers {
	max-width: 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

/* Im ausgeklappten Menü schmaler Schirme gibt es keinen Grund, die
   Suche hinter einer Lupe zu verstecken. Sie steht dort offen über die
   volle Breite, der Schalter fällt weg. */
@media (max-width: 1183px) {
	.vda-header .vda-nav .vda-kopfsuche {
		width: 100%;
		margin-inline-start: 0;
		margin-block: var(--wp--preset--spacing--20) 0;
	}

	.vda-kopfsuche.ist-bereit .vda-kopfsuche__form {
		max-width: none;
		opacity: 1;
		visibility: visible;
	}

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

	.vda-kopfsuche__schalter {
		display: none;
	}

	/* Die Menüpunkte bleiben, sie haben mobil ihre eigene Zeile. */
	.vda-header.hat-suche-offen .vda-nav__triggers {
		max-width: 100%;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}
}

.vda-header__member .wp-element-button {
	white-space: nowrap;
}

@media (max-width: 1183px) {
	.vda-header__row {
		min-height: var(--wp--custom--header-height-mobile);
		/* Das Logo aussen links, rechts der Knopf ins eigene Konto und
		   direkt daneben der Menueknopf.

		   Vorher stand hier space-between mit drei Elementen - dabei
		   landete „Mein VDA" genau in der Mitte, weit weg von beiden
		   Raendern und ohne Bezug zu irgendetwas. */
		justify-content: flex-start;
		gap: var(--wp--preset--spacing--20);
	}

	/* Alles ab hier rutscht nach rechts. */
	.vda-header__row .vda-header__member {
		margin-inline-start: auto;
	}

	/* Zwischen Konto und Menueknopf reicht ein knapper Abstand - sie
	   gehoeren zusammen und bilden rechts einen Block. */
	.vda-header__row .vda-header__member + .vda-menue-knopf,
	.vda-header__row .vda-header__member ~ .vda-menue-knopf {
		margin-inline-start: calc( var(--wp--preset--spacing--20) * -0.4 );
	}

	/* Das Logo steht buendig zur Inhaltskante - dieselbe Linie wie
	   Ueberschrift und Text darunter. Ein negativer Aussenabstand
	   waere zu viel: die Kopfleiste bringt ihren Rand selbst mit, und
	   bei mittleren Breiten klebte die blaue Flaeche sonst am
	   Fensterrand.

	   Nach unten ragt sie ueber die Leiste hinaus. Das ist der
	   Ueberstand, der die Marke traegt. */
	.vda-header .vda-brand {
		flex: 0 0 auto;
		width: 92px;
		height: calc(var(--wp--custom--header-height-mobile) + var(--wp--custom--brand-overhang-mobile));
		margin-block-end: calc(-1 * var(--wp--custom--brand-overhang-mobile));
		order: 1;
	}

	.vda-header .vda-brand img {
		width: 66px;
	}

	/* Im gescrollten Zustand faehrt die Flaeche mit ein, sonst ragte
	   sie ueber eine Leiste, die es so nicht mehr gibt. */
	.vda-header.is-scrolled .vda-brand {
		height: var(--wp--custom--header-height-mobile);
		margin-block-end: 0;
	}

	.vda-header__member {
		order: 2;
		margin-inline-start: auto;
	}

	.vda-header__member .wp-element-button {
		padding-inline: 14px;
	}

	.vda-header .vda-menue-knopf {
		order: 3;
	}
}

/* Auf ganz schmalen Geraeten wird aus dem Wort ein Zeichen: "Mein VDA"
   und der Menueknopf zusammen brauchen sonst mehr Platz, als neben dem
   Logo bleibt. */
@media (max-width: 419px) {
	.vda-header .vda-brand {
		width: 84px;
	}

	.vda-header .vda-brand img {
		width: 60px;
	}

	.vda-header__member .wp-element-button {
		padding-inline: 12px;
		font-size: 14px;
	}

	.vda-header .vda-menue-knopf__wort {
		display: none;
	}
}

/* ---------------------------------------------------------------
   2. Einstiegsband
   Die Regeln stehen in theme.css, Abschnitt 24.
   --------------------------------------------------------------- */

/* ---------------------------------------------------------------
   3. Zahlenband
   Die Regeln stehen in theme.css, Abschnitt 27. Hier lagen aeltere,
   die das Raster ueberschrieben haben, weil diese Datei spaeter laedt.
   --------------------------------------------------------------- */

/* ---------------------------------------------------------------
   4. Fußbereich
   --------------------------------------------------------------- */

/* Die Regeln zum Fuß stehen in theme.css, Abschnitt 23. */


.vda-footer__legal {
	border-block-start: 1px solid var(--wp--custom--line-on-dark);
	min-height: 56px;
	align-items: center;
}

.vda-footer a {
	color: var(--wp--preset--color--white);
}

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

/* ---------------------------------------------------------------
   5. Korrekturen nach dem ersten Durchgang
   --------------------------------------------------------------- */

/* Der Text im Markenfeld brach mitten im Wort um. Die Breite war zu eng
   und overflow-wrap zu scharf gestellt. */
.vda-hero__mark p {
	max-width: 12ch;
	overflow-wrap: normal;
	hyphens: none;
	text-wrap: balance;
}

/* Die Navigation steht rechts und darf nicht mit der Suche zusammenlaufen. */
.vda-header .vda-nav {
	gap: var(--wp--preset--spacing--30);
}

.vda-header .vda-nav .wp-block-navigation-item__content {
	white-space: nowrap;
}

/* ---------------------------------------------------------------
   6. Die uebrigen Baender
   --------------------------------------------------------------- */

/* Aktuell beim VDA: Terminzeilen und Newszeilen */
.vda-event-row {
	display: grid;
	grid-template-columns: 64px 1fr;
	gap: var(--wp--preset--spacing--20);
	align-items: baseline;
	padding-block: var(--wp--preset--spacing--20);
	border-block-start: 1px solid var(--wp--preset--color--line);
}

.vda-event-row__date {
	border-inline-end: 1px solid var(--wp--preset--color--line);
	padding-inline-end: var(--wp--preset--spacing--20);
	margin: 0;
}

.vda-event-row h3 {
	margin: 0;
	font-weight: 650;
	line-height: 1.3;
}

.vda-news-row {
	gap: var(--wp--preset--spacing--30);
	align-items: flex-start;
	padding-block: var(--wp--preset--spacing--30);
	border-block-start: 1px solid var(--wp--preset--color--line);
}

.vda-news-row__image {
	flex: 0 0 128px;
}

.vda-news-row__image img {
	border-radius: var(--wp--custom--radius-small);
	object-fit: cover;
}

.vda-news-row h3 {
	margin-block: var(--wp--preset--spacing--05) 0;
	font-weight: 650;
	line-height: 1.3;
}

.vda-eventlist,
.vda-newslist {
	margin-block-end: var(--wp--preset--spacing--30);
}

/* Fachwissen: Zeilen mit Titel und Unterzeile */
.vda-knowledge__links li a {
	display: block;
	text-decoration: none;
}

.vda-knowledge__links li strong {
	display: block;
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 650;
	color: var(--wp--preset--color--ink);
}

.vda-knowledge__links li span {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.vda-knowledge__links li a:hover strong {
	color: var(--wp--preset--color--vda-blue);
}

/* Magazin: das Band bleibt schmal, das Titelbild ragt oben und unten heraus */
.vda-magazine {
	min-height: 0;
	padding-block: var(--wp--preset--spacing--50);
	display: flex;
	align-items: center;
}

.vda-magazine .wp-block-columns {
	align-items: center;
}

.vda-magazine .vda-magazine__cover {
	margin-block: -5.5rem;
	position: relative;
	z-index: 1;
}

/* Was auf das Band folgt, braucht Luft, sonst klebt es am Titelbild.
   Die Regel muss main.wp-block-group > * schlagen, die alle Abstaende nullt. */
main.wp-block-group > .vda-magazine {
	margin-block-end: var(--wp--preset--spacing--110);
}

.vda-magazine__cover {
	aspect-ratio: 3 / 4;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--periwinkle);
	border-radius: var(--wp--custom--radius);
	transform: rotate(-3deg);
	box-shadow: var(--wp--preset--shadow--layer);
}

.vda-magazine__issue {
	margin: 0;
	font-size: clamp(56px, 8vw, 112px);
	font-weight: 700;
	line-height: 0.9;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--vda-blue-deep);
	text-align: center;
}

.vda-magazine__issue span {
	display: block;
	font-size: var(--wp--preset--font-size--display-6);
	font-weight: 650;
	letter-spacing: 0;
}

/* Beitrittszeile: das Verbandszeichen sitzt in einem Kreis */
.vda-join__mark {
	width: 128px;
	height: 128px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--periwinkle-light);
	border-radius: 50%;
}

.vda-join__mark img {
	width: 80px;
	height: auto;
	border-radius: 0;
}

.vda-join .is-style-meta {
	margin-block-start: var(--wp--preset--spacing--20);
}

@media (max-width: 800px) {
	.vda-magazine {
		min-height: 0;
		padding-block: var(--wp--preset--spacing--60);
	}

	.vda-magazine .vda-magazine__cover {
		margin-block: 0;
	}

	main.wp-block-group > .vda-magazine {
		margin-block-end: 0;
	}

	.vda-magazine__cover {
		transform: none;
		max-width: 280px;
	}

	.vda-news-row {
		flex-wrap: wrap;
	}
}


/* ---------------------------------------------------------------
   7. Mega-Menue
   Die Panels sind eigene Blockgruppen im Template-Part und damit im
   Site-Editor bearbeitbar. Hier steht nur, wo sie sitzen und wie sie
   erscheinen. Das Verknuepfen macht header.js.
   --------------------------------------------------------------- */

.vda-nav {
	gap: var(--wp--preset--spacing--30);
}

.vda-nav__triggers {
	gap: var(--wp--preset--spacing--30);
}

/* Der Menuepunkt bleibt ein Link, sieht aber wie Navigation aus. */
/* Die Trigger sind keine Knöpfe im Sinne des Blockstils. Ohne diese
   Regel greift der blaue Standardknopf aus theme.json. */
.vda-nav__trigger .wp-element-button {
	position: relative;
	display: flex;
	align-items: center;
	gap: 7px;
	min-height: 0;
	padding: 2px 6px;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--ui);
	font-weight: 650;
	line-height: 1.1;
	white-space: nowrap;
	text-decoration: none;
	transition: color var(--wp--custom--transition);
}

.vda-nav__trigger .wp-element-button:hover,
.vda-nav__trigger .wp-element-button:focus-visible {
	background: transparent;
	color: var(--wp--preset--color--vda-blue);
}

.vda-nav__trigger .wp-element-button::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	width: auto;
	height: 3px;
	margin: 0;
	background: var(--wp--preset--color--vda-blue);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--wp--custom--transition);
}

.vda-nav__trigger .wp-element-button:hover::after,
.vda-nav__trigger .wp-element-button[aria-expanded="true"]::after {
	transform: scaleX(1);
}

.vda-nav__trigger .wp-element-button[aria-expanded="true"] {
	color: var(--wp--preset--color--vda-blue);
}

/* Das Panel haengt unter dem Kopf und spannt ueber die volle Breite. */
.vda-mega-panel {
	position: absolute;
	inset-inline: 0;
	top: 100%;
	z-index: 40;
	/* Ein langes Menü darf den Bildschirm nicht sprengen. Es bekommt
	   eine eigene Bildlaufleiste, der Kopf bleibt so hoch wie er ist. */
	max-height: calc(100vh - var(--wp--custom--header-height, 80px) - 24px);
	overflow-y: auto;
	overscroll-behavior: contain;
	border-block-start: 1px solid var(--wp--preset--color--line);
	box-shadow: var(--wp--preset--shadow--layer);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity var(--wp--custom--transition), transform var(--wp--custom--transition), visibility var(--wp--custom--transition);
	/* Der Rand war mit 56 Bildpunkten so hoch wie drei Menuezeilen.
	   Ein Panel soll die Seite dahinter nicht verdecken, sondern nur
	   den Weg zeigen. */
	padding-block: var(--wp--preset--spacing--40);
}

.vda-mega-panel.is-open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.vda-mega-panel__inner {
	gap: var(--wp--preset--spacing--60);
}

/* Die Einleitungsspalte trennt eine Linie vom Rest. */
.vda-mega-panel__intro {
	border-inline-end: 1px solid var(--wp--preset--color--line);
	padding-inline-end: var(--wp--preset--spacing--60);
}

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

.vda-mega-panel__group h6 {
	margin-block-end: var(--wp--preset--spacing--20);
}

/* Ein Eintrag war 48 Bildpunkte hoch: 32 fuer den Link, dazu je acht
   Polster. Bei sechs Eintraegen macht das allein 288 - mehr als das
   ganze Panel "Vereine & Mitgliedschaft" innen hoch ist. Vier
   Bildpunkte reichen, die Klickflaeche bleibt 40 hoch. */
.vda-mega-panel__group .wp-block-list li {
	padding-block: 4px;
	font-size: var(--wp--preset--font-size--small);
}

.vda-mega-panel__group .wp-block-list li::before {
	inset-block-start: calc(var(--wp--preset--spacing--10) + 0.65em);
}

.vda-mega-panel__group .wp-block-list a {
	color: var(--wp--preset--color--ink);
	font-weight: 400;
	text-decoration: none;
}

.vda-mega-panel__group .wp-block-list a:hover {
	color: var(--wp--preset--color--vda-blue);
}

/* Die Feature-Kachel ist die einzige echte Karte im Menue. */
.vda-mega-feature {
	padding: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--periwinkle-light);
	border-radius: var(--wp--custom--radius);
}

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

.vda-mega-feature__title {
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 650;
	line-height: 1.2;
	margin-block: 0 var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--ink);
}

.vda-mega-feature__image img {
	width: 100%;
	height: auto;
	border-radius: var(--wp--custom--radius-small);
	margin-block-end: var(--wp--preset--spacing--20);
}

/* Im Termine-Panel stehen rechts die naechsten Veranstaltungen. */
/* Die naechsten Termine standen so gross wie eigene Beitragskarten.
   Im Menue sind sie ein Ausblick, kein Inhalt. */
.vda-mega-events .vda-event-row {
	padding-block: 6px;
}

.vda-mega-events h6 {
	margin-block-end: var(--wp--preset--spacing--10);
}

/* Unter 1184px klappen die Panels als Akkordeon unter dem Kopf auf.
   Der fruehere Punkt 1024 lag unter dem Platzbedarf der Navigation:
   Logo 199 plus Menue 953 plus zweimal 24 Rand sind 1199 Pixel. In der
   Luecke lief der Kopf um bis zu 130 Pixel ueber den Rand. */
@media (max-width: 1183px) {
	.vda-nav__triggers {
		flex-wrap: wrap;
		gap: var(--wp--preset--spacing--20);
	}

	.vda-mega-panel {
		position: static;
		box-shadow: none;
		transform: none;
		padding-block: var(--wp--preset--spacing--40);
	}

	.vda-mega-panel:not(.is-open) {
		display: none;
	}

	/* Das aufgeklappte Panel bringt eigenes Polster mit. Zusammen mit
	   dem Rand der Navigation ruecken die Unterpunkte damit 36 Punkte
	   nach innen - auf einem Handy ist das verschenkte Breite. Vier
	   Punkte reichen, um sie von den Hauptpunkten abzusetzen. */
	.vda-header .vda-mega-panel {
		padding: 12px 4px 16px;
	}

	/* Die Unterpunkte standen 46 Punkte auseinander bei 32 Punkten
	   Texthoehe. Enger gesetzt passt eine Gruppe mehr ins Bild. */
	.vda-header .vda-mega-panel__group li {
		margin-block: 0;
		padding-block: 0;
	}

	.vda-header .vda-mega-panel__group a {
		display: flex;
		align-items: center;
		min-height: 40px;
		padding-block: 0;
	}

	.vda-mega-panel__group + .vda-mega-panel__group {
		margin-block-start: 14px;
	}

	/* Im aufgeklappten Menue stehen nur noch die Links.

	   Die Werbeflaechen mit Bild, Ueberschrift und Flietext gehoeren
	   an den Schreibtisch, wo daneben Platz ist. Auf dem Handy schoben
	   sie die eigentliche Navigation weit nach unten: wer zu den
	   Unterpunkten wollte, scrollte an zwei Textbloecken vorbei.
	   Ausgeblendet, nicht entfernt - am Schreibtisch bleiben sie. */
	.vda-mega-panel .vda-mega-feature,
	.vda-mega-panel .vda-mega-feature__image,
	.vda-mega-panel .vda-mega-events,
	.vda-mega-panel .vda-mega-panel__intro {
		display: none;
	}

	/* Ohne die Spalten daneben laeuft die Linkliste ueber die volle
	   Breite. */
	.vda-mega-panel__inner {
		display: block;
	}

	.vda-mega-panel__group {
		width: 100%;
		max-width: none;
	}

	.vda-mega-panel__intro {
		border-inline-end: 0;
		padding-inline-end: 0;
		border-block-end: 1px solid var(--wp--preset--color--line);
		padding-block-end: var(--wp--preset--spacing--30);
	}
}

/* ---------------------------------------------------------------
   9. Listen und Karten in den Archiven
   --------------------------------------------------------------- */

.vda-postlist .wp-block-post-template,
.vda-partnerlist .wp-block-post-template {
	gap: var(--wp--preset--spacing--60);
}

.vda-post-card__image img {
	border-radius: var(--wp--custom--radius-small);
	object-fit: cover;
	object-position: center 35%;
	transition: transform 320ms ease;
}

.vda-post-card__image:hover img {
	transform: scale(1.025);
}

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

.vda-post-card h2 {
	margin-block: var(--wp--preset--spacing--05) 0;
	line-height: 1.15;
}

.vda-post-card .wp-block-post-excerpt {
	margin-block-start: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--muted);
}

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

.vda-partner-card__logo img {
	object-fit: contain;
	background: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius-small);
	padding: var(--wp--preset--spacing--20);
}

.vda-partner-card h2 {
	margin-block: var(--wp--preset--spacing--20) 0;
	font-weight: 650;
	line-height: 1.3;
}

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

.vda-search-row h2 {
	margin: 0;
	line-height: 1.2;
}

.vda-search-row .wp-block-post-excerpt {
	margin-block-start: var(--wp--preset--spacing--10);
	color: var(--wp--preset--color--muted);
}

/* Einzelbeitrag */
.vda-post-meta {
	gap: var(--wp--preset--spacing--30);
	margin-block-start: var(--wp--preset--spacing--20);
}

.vda-post-meta > * {
	margin: 0;
}

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

.vda-page-hero .wp-block-post-terms a {
	color: inherit;
	text-decoration: none;
}

/* Zwei Wege zur Mitgliedschaft */
.vda-choice__card {
	padding: var(--wp--preset--spacing--60);
	background: var(--wp--preset--color--paper-blue);
	border-radius: var(--wp--custom--radius);
}

.vda-choice__card--alt {
	background: var(--wp--preset--color--surface);
}

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

.vda-choice__card .wp-block-list li {
	border-block-start-color: rgba(21, 26, 32, 0.12);
}

/* ---------------------------------------------------------------
   10. Korrekturen: Abstaende und Suchfeld
   --------------------------------------------------------------- */

/* Der globale Blockabstand setzt zwischen jedes Band 16px. Die Baender
   bringen ihren Abstand aber selbst mit, sonst stehen sie doppelt.
   Gilt genauso fuer die Mega-Panels unter dem Kopf. */
main.wp-block-group > *,
.vda-header > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* Das Panel sitzt jetzt bündig auf der Unterkante des Kopfes. */
.vda-mega-panel {
	margin-block: 0;
}

/* Das Suchfeld im Kopf ist ein Symbol ohne Kasten. */
.vda-header .vda-search .wp-block-search__button {
	min-height: 40px;
	min-width: 40px;
	padding: 0;
	background: transparent;
	color: var(--wp--preset--color--ink);
	border: 0;
	border-radius: var(--wp--custom--radius);
}

.vda-header .vda-search .wp-block-search__button:hover {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--vda-blue);
}

.vda-header .vda-search .wp-block-search__button svg {
	width: 22px;
	height: 22px;
}

/* ---------------------------------------------------------------
   11. Symbole
   Die Pfade stammen wortgetreu aus index.html. Eingebunden als
   Hintergrundbild nach der Projektregel, nicht als SVG-Block.
   --------------------------------------------------------------- */

/* Symbolfeld ueber den drei Hobby-Spalten, 56px wie in der Vorlage. */
.vda-topics .wp-block-column::before {
	content: "";
	display: block;
	width: 56px;
	height: 56px;
	margin-block-end: var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--custom--periwinkle-line);
	background-color: var(--wp--custom--periwinkle-hover);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 32px 32px;
}

.vda-topics .wp-block-column:nth-child(1)::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%2300558a%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%227%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M22%2021v-2a4%204%200%200%200-3-3.87M16%203.13a4%204%200%200%201%200%207.75%22%2F%3E%3C%2Fsvg%3E");
}

.vda-topics .wp-block-column:nth-child(2)::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%2300558a%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2%204.5A2.5%202.5%200%200%201%204.5%202H9a3%203%200%200%201%203%203v16a3%203%200%200%200-3-3H4.5A2.5%202.5%200%200%200%202%2020.5Z%22%2F%3E%3Cpath%20d%3D%22M22%204.5A2.5%202.5%200%200%200%2019.5%202H15a3%203%200%200%200-3%203v16a3%203%200%200%201%203-3h4.5a2.5%202.5%200%200%201%202.5%202.5Z%22%2F%3E%3C%2Fsvg%3E");
}

.vda-topics .wp-block-column:nth-child(3)::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%2300558a%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2022a9%209%200%200%200%209-9V5l-9-3-9%203v8a9%209%200%200%200%209%209Z%22%2F%3E%3Cpath%20d%3D%22M8%2014c3.5%200%206-2.5%207-6%202%204.5.5%208-3%209.5%22%2F%3E%3Cpath%20d%3D%22M8%2014c0-2.5%201.5-4.5%204-5.5%22%2F%3E%3C%2Fsvg%3E");
}


/* Kartenzeichen im Hauptknopf des Heros. */
.vda-hero .is-style-large .wp-element-button::before {
	content: "";
	width: 20px;
	height: 20px;
	flex: 0 0 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%2523ffffff%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2010c0%205-8%2011-8%2011S4%2015%204%2010a8%208%200%201%201%2016%200Z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2210%22%20r%3D%222.5%22%2F%3E%3C%2Fsvg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}


/* ---------------------------------------------------------------
   12. Terminzeile und Newsaufmacher, Aufbau wie in index.html
   --------------------------------------------------------------- */

/* Raster 64px Datum, Text, 40px Kreispfeil. */
.vda-event-row {
	display: grid;
	grid-template-columns: 64px 1fr 40px;
	gap: var(--wp--preset--spacing--20);
	align-items: center;
	padding-block: var(--wp--preset--spacing--30);
	border-block-start: 1px solid var(--wp--preset--color--line);
}

.vda-event-row__date {
	border-inline-end: 1px solid var(--wp--preset--color--line);
	padding-inline-end: var(--wp--preset--spacing--20);
	text-align: center;
	line-height: 1.1;
}

.vda-event-row__date > * {
	margin: 0;
}

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

.vda-date__num {
	font-size: var(--wp--preset--font-size--display-6);
	font-weight: 700;
	line-height: 1;
	color: var(--wp--preset--color--ink);
}

.vda-event-row__body > * {
	margin: 0;
}

.vda-event-row__body h3 {
	margin-block-start: var(--wp--preset--spacing--05);
	font-weight: 650;
	line-height: 1.3;
}

/* Der Kreispfeil sitzt in der dritten Spalte und faellt beim Zeigen blau aus. */
.vda-event-row::after {
	content: "";
	width: 38px;
	height: 38px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 50%;
	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%2300558a%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012h14M13%206l6%206-6%206%22%2F%3E%3C%2Fsvg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 18px 18px;
	transition: background-color var(--wp--custom--transition), border-color var(--wp--custom--transition), background-image var(--wp--custom--transition);
}

.vda-event-row:hover::after {
	background-color: var(--wp--preset--color--vda-blue);
	border-color: var(--wp--preset--color--vda-blue);
	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%2523ffffff%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012h14M13%206l6%206-6%206%22%2F%3E%3C%2Fsvg%3E");
}

/* Newsaufmacher: grosses Bild, darunter Meta, Titel und Anriss. */
.vda-news-feature {
	padding-block-end: var(--wp--preset--spacing--40);
	border-block-end: 1px solid var(--wp--preset--color--line);
}

.vda-news-feature__image img {
	border-radius: var(--wp--custom--radius-small);
	object-fit: cover;
	object-position: center 35%;
	transition: transform 320ms ease;
}

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

.vda-news-feature__meta {
	gap: var(--wp--preset--spacing--20);
	margin-block-start: var(--wp--preset--spacing--30);
}

.vda-news-feature__meta > * {
	margin: 0;
}

.vda-news-feature h3 {
	margin-block: var(--wp--preset--spacing--10) 0;
	line-height: 1.15;
}

.vda-news-feature .wp-block-post-excerpt {
	margin-block-start: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--muted);
}

/* Im Terminarchiv faellt der Kreispfeil weg, dort steht mehr Text. */
.vda-event-row--wide {
	grid-template-columns: 120px 1fr;
	align-items: start;
}

.vda-event-row--wide::after {
	display: none;
}

/* Terminzeile im Mega-Menue: schlanke Variante ohne Datumsblock. */
.vda-menu-event {
	padding-block: var(--wp--preset--spacing--20);
	border-block-start: 1px solid var(--wp--preset--color--line);
}

.vda-menu-event > * {
	margin: 0;
}

.vda-menu-event h3 {
	margin-block-start: var(--wp--preset--spacing--05);
	font-weight: 650;
	line-height: 1.3;
}

.vda-menu-event h3 a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

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

/* ---------------------------------------------------------------
   Menüknopf und Navigation auf schmalen Schirmen
   Der Kopf klebt oben. Ohne Einklappen wäre er auf dem Handy über
   200 Pixel hoch und würde den halben Bildschirm belegen.
   --------------------------------------------------------------- */

.vda-menue-knopf {
	display: none;
	align-items: center;
	gap: 9px;
	min-height: 44px;
	padding: 6px 8px;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--ink);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	cursor: pointer;
}

.vda-menue-knopf__balken {
	display: flex;
	width: 22px;
	flex-direction: column;
	gap: 4px;
}

.vda-menue-knopf__balken span {
	width: 100%;
	height: 2px;
	background: currentColor;
	transition: transform 160ms ease, opacity 160ms ease;
}

.vda-menue-knopf[aria-expanded="true"] .vda-menue-knopf__balken span:nth-child(1) {
	transform: translateY(6px) rotate(45deg);
}

.vda-menue-knopf[aria-expanded="true"] .vda-menue-knopf__balken span:nth-child(2) {
	opacity: 0;
}

.vda-menue-knopf[aria-expanded="true"] .vda-menue-knopf__balken span:nth-child(3) {
	transform: translateY(-6px) rotate(-45deg);
}

/* Das Wort bleibt für Screenreader stehen, sichtbar sind die Balken. */
.vda-menue-knopf__wort {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (max-width: 1183px) {
	.vda-menue-knopf {
		display: inline-flex;
		margin-inline-start: auto;
	}

	/* Die Navigation wird zur eigenen Ebene unter dem Kopf. */
	.vda-header .vda-nav {
		position: fixed;
		inset-inline: 0;
		top: var(--wp--custom--header-height-mobile, 64px);
		z-index: 45;
		display: none;
		height: calc(100dvh - var(--wp--custom--header-height-mobile, 64px));
		overflow-y: auto;
		overscroll-behavior: contain;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		/* Oben so viel Luft, wie das Markenfeld unter die Kopfzeile
		   ragt: sonst liegt das Logo auf dem ersten Menuepunkt. Der
		   Ueberstand betraegt 23 Pixel, 28 geben etwas Abstand.
		   Seitlich nur 12 Punkte - auf einem Handy zaehlt jede
		   Zeilenbreite, und die Kacheln bringen ihren eigenen Rand
		   schon mit. */
		padding: 28px 12px 24px;
		background: var(--wp--preset--color--white);
		border-block-start: 1px solid var(--wp--preset--color--line);
	}

	.vda-header .vda-nav.is-open {
		display: flex;
	}

	.vda-nav__triggers {
		display: block;
		width: 100%;
	}

	.vda-nav__trigger .wp-element-button:hover,
	.vda-nav__trigger .wp-element-button:focus-visible {
		background: var(--wp--preset--color--blue-wash);
	}

	/* Der offene Punkt bleibt sichtbar, waehrend man die Unterpunkte
	   liest - sonst weiss man nach dem Scrollen nicht mehr, wo man
	   ist. */
	.vda-nav__trigger.is-active .wp-element-button {
		background: var(--wp--preset--color--blue-wash);
		color: var(--wp--preset--color--vda-blue);
	}

	.vda-nav__trigger {
		display: block;
		width: 100%;
		border-block-end: 1px solid var(--wp--preset--color--line);
	}

	.vda-nav__trigger .wp-element-button {
		width: 100%;
		/* 46 statt 58: fuenf Zeilen mit je 58 Punkten schoben die
		   Suche und alles darunter auf kleinen Geraeten unter den
		   Rand. 46 liegt weiter ueber dem Mass von 44 Punkten, unter
		   dem Finger daneben treffen. */
		min-height: 46px;
		justify-content: space-between;
		padding-inline: 2px;
		border-radius: var(--wp--custom--radius);
		transition: background-color var(--wp--custom--transition);
		text-align: start;
	}

	/* Der Balken unter dem Menüpunkt ergibt in der Liste keinen Sinn. */
	.vda-nav__trigger .wp-element-button::after {
		display: none;
	}

	/* Die Panels stehen im Fluss, nicht mehr als schwebende Fläche. */
	.vda-header .vda-mega-panel {
		position: static;
		max-height: none;
		overflow: visible;
		border: 0;
		box-shadow: none;
		background: var(--wp--preset--color--paper);
		padding-block: var(--wp--preset--spacing--40);
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	/* Geschlossen heißt geschlossen, auch ohne die schwebende Fläche. */
	.vda-header .vda-mega-panel[aria-hidden="true"] {
		display: none;
	}

	.vda-header__tools {
		width: 100%;
		justify-content: flex-start;
		padding-block-start: var(--wp--preset--spacing--40);
	}
}

/* Solange das Menü offen ist, scrollt die Seite dahinter nicht mit. */
body.vda-menue-offen {
	overflow: hidden;
}

/* ---------------------------------------------------------------
   Angleichung an den Entwurf
   Chevron am Menüpunkt, blaue Feature-Kachel, Mein VDA als Umriss.
   --------------------------------------------------------------- */

/* Der Chevron ist ein Quadrat mit zwei Rändern, um 45 Grad gedreht.
   Ein Zeichen aus der Schrift säße nie sauber auf der Grundlinie. */
.vda-nav__trigger .wp-element-button::before {
	content: "";
	order: 2;
	width: 7px;
	height: 7px;
	flex: none;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 160ms ease;
}

.vda-nav__trigger .wp-element-button[aria-expanded="true"]::before {
	transform: translateY(2px) rotate(225deg);
}

/* Der Balken sitzt unter dem ganzen Punkt, auch unter dem Chevron. */
.vda-nav__trigger .wp-element-button::after {
	order: 3;
}

/* Die Kachel im Panel ist blau mit weißer Schrift. */
.vda-mega-feature {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	min-height: 190px;
	padding: 22px;
	border-radius: var(--wp--custom--radius-small);
	background: var(--wp--preset--color--vda-blue);
	color: var(--wp--preset--color--white);
	transition: background-color var(--wp--custom--transition);
}

.vda-mega-feature:hover {
	background: var(--wp--preset--color--vda-blue-deep);
}

.vda-mega-feature .is-style-eyebrow,
.vda-mega-feature__label {
	color: #cfe6f4;
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-block: 0;
}

.vda-mega-feature__title {
	margin: 6px 0 13px;
	font-size: 21px;
	font-weight: 700;
	line-height: 1.12;
	color: var(--wp--preset--color--white);
}

.vda-mega-feature a,
.vda-mega-feature .wp-element-button {
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 700;
	text-decoration: none;
	background: transparent;
	padding: 0;
	min-height: 24px;
}

.vda-mega-feature a::after {
	background: transparent;
	color: inherit;
}

/* Die Einträge im Panel stehen ohne Aufzählungszeichen. */
.vda-mega-panel__group .wp-block-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Enger gestellt: das laengste Panel ("Der VDA", sechs Eintraege in
   einer Spalte) war 493 Bildpunkte hoch, das kuerzeste 380. Jetzt
   liegen alle unter der Hoehe von "Vereine & Mitgliedschaft". */
.vda-mega-panel__group .wp-block-list li + li {
	margin-block-start: 6px;
}

.vda-mega-panel__group .wp-block-list a {
	font-weight: 650;
	text-decoration: none;
	color: var(--wp--preset--color--ink);
}

.vda-mega-panel__group .wp-block-list a:hover {
	color: var(--wp--preset--color--vda-blue);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Mein VDA ist im Entwurf ein Umriss, kein gefüllter Knopf. */
.vda-header__member .wp-element-button {
	min-height: 42px;
	background: transparent;
	border: 1px solid var(--wp--preset--color--vda-blue);
	color: var(--wp--preset--color--vda-blue-deep);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	transition: background-color var(--wp--custom--transition), color var(--wp--custom--transition);
}

.vda-header__member .wp-element-button:hover,
.vda-header__member .wp-element-button:focus-visible {
	background: var(--wp--preset--color--vda-blue);
	color: var(--wp--preset--color--white);
}

@media (max-width: 1183px) {
	/* In der Liste steht der Chevron rechts am Rand. */
	.vda-nav__trigger .wp-element-button::before {
		margin-inline-start: auto;
	}
}

/* Die Spaltenüberschriften im Panel stehen im Entwurf einzeilig. */
.vda-mega-panel__group h6,
.vda-mega-panel__group h3 {
	text-wrap: balance;
	hyphens: manual;
	/* Etwas enger, damit die längste Überschrift in eine Zeile passt. */
	letter-spacing: 0.06em;
}

/* Auf der blauen Kachel muss jede Schrift hell genug sein. Der
   Textlink-Stil bringt sonst sein Blau mit und wird unlesbar. */
.vda-mega-feature .wp-block-button .wp-element-button,
.vda-mega-feature .wp-block-button.is-style-text-link .wp-element-button,
.vda-mega-feature a.wp-element-button,
.vda-mega-feature .vda-textlink {
	color: var(--wp--preset--color--white);
	background: transparent;
}

.vda-mega-feature .wp-block-button .wp-element-button:hover,
.vda-mega-feature .vda-textlink:hover {
	color: var(--wp--preset--color--white);
	background: transparent;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Die Vorzeile war mit #cfe6f4 knapp unter dem geforderten Kontrast. */
.vda-mega-feature .is-style-eyebrow,
.vda-mega-feature__label {
	color: #e7f2fa;
}

/* Werte aus dem Entwurf: schmalerer Abstand zum Trennstrich und eine
   Spur kleinere Überschrift. Sonst braucht der längste Titel drei
   Zeilen statt zwei. */
.vda-mega-panel__intro {
	padding-inline-end: 20px;
}

/* WordPress gibt die Presetklassen mit !important aus. Ohne das
   gleiche Gewicht bliebe die Schrift bei ihren 32 Pixeln. */
.vda-mega-panel__intro h2.has-display-6-font-size,
.vda-mega-panel__intro h2 {
	font-size: clamp(24px, 2.2vw, 31px) !important;
	line-height: 1.04;
	text-wrap: balance;
}


/* --- Die Einleitungsspalte im Mega-Menue ---------------------------
   Nicht die Eintraege bestimmten die Hoehe der Panels, sondern die
   Einleitung links: Vorzeile, eine zweizeilige Ueberschrift mit 31
   Bildpunkten, drei Zeilen Text und ein Knopf, dazwischen je 16.
   Zusammen 297 Bildpunkte - mehr als die sechs Eintraege daneben.

   Im Menue ist die Einleitung ein Hinweis, keine Seitenueberschrift.
   ------------------------------------------------------------------ */

/* WordPress setzt die Groesse der Preset-Klasse (has-...-font-size)
   mit !important. Ohne dasselbe Mittel bleibt die Ueberschrift bei
   31 Bildpunkten und damit zweizeilig. */
.vda-mega-panel__intro > .wp-block-heading {
	font-size: clamp(20px, 1.6vw, 25px) !important;
	line-height: 1.15;
	margin-block: 0 8px;
}

.vda-mega-panel__intro > .is-style-eyebrow {
	margin-block-end: 8px;
}

.vda-mega-panel__intro > p:not(.is-style-eyebrow) {
	margin-block-start: 8px;
	line-height: 1.45;
}

.vda-mega-panel__intro > .wp-block-buttons {
	margin-block-start: 12px;
}


/* --- Die naechsten Termine im Menue --------------------------------
   Jede Zeile trug 16 Bildpunkte Polster oben und unten und war damit
   88 hoch - drei davon ergaben mehr als die Eintragsliste daneben.
   Im Menue sind die Termine ein Ausblick, keine Beitragskarten.
   ------------------------------------------------------------------ */

.vda-mega-events .wp-block-post > * {
	padding-block: 7px;
}

.vda-mega-events .wp-block-query {
	margin-block-start: 8px;
}

.vda-mega-events h6 {
	margin-block-end: 8px;
}

/* Die Ueberschrift einer Eintragsgruppe braucht weniger Abstand als
   ein Absatz im Fliesstext. */
.vda-mega-panel__group > h6 {
	margin-block-end: 10px;
}


/* Eine Liste mit sechs Eintraegen ist in einer Spalte hoeher als das
   ganze Panel daneben. Ab sechs laeuft sie zweispaltig - dieselbe
   Zahl Eintraege, halbe Hoehe. */
@media (min-width: 1184px) {
	.vda-mega-panel__group .wp-block-list:has( > li:nth-child(6) ) {
		columns: 2;
		column-gap: var(--wp--preset--spacing--30);
	}

	.vda-mega-panel__group .wp-block-list:has( > li:nth-child(6) ) > li {
		break-inside: avoid;
	}

	.vda-mega-panel__group .wp-block-list:has( > li:nth-child(6) ) > li:first-child {
		margin-block-start: 0;
	}
}


/* Die Bildkachel im Panel "Aktuelles" war mit 273 Bildpunkten der
   hoechste Teil aller Menues. Das Bild traegt den Hinweis, es muss
   ihn nicht ausfuellen. */
@media (min-width: 1184px) {
	.vda-mega-feature figure.wp-block-image img {
		max-height: 92px;
		object-fit: cover;
	}

	.vda-mega-feature figure.wp-block-image {
		margin-block-end: 10px;
	}

	.vda-mega-feature .wp-block-buttons {
		margin-block-start: 10px;
	}

	/* Der Termin nennt Datum und Titel - beides einzeilig. */
	.vda-mega-events .wp-block-post-title {
		line-height: 1.25;
	}

	.vda-mega-events .wp-block-post > * {
		padding-block: 5px;
	}
}

/* ---------------------------------------------------------------
   Der Fuss im aufgeklappten Menue

   Am Schreibtisch unnoetig - dort haengt an jedem Menuepunkt eine
   eigene Flaeche. Auf Tablet und Mobil endete das Menue dagegen nach
   fuenf Zeilen in einer weissen Flaeche.

   Die haeufigsten Wege stehen als Kacheln, nicht als nackte Liste:
   eine Zeile Text ohne Flaeche sieht auf einer weissen Seite aus wie
   vergessener Inhalt, und mit dem Finger trifft man sie schlechter.
   --------------------------------------------------------------- */

.vda-nav__fuss {
	display: none;
}

@media (max-width: 1183px) {
	/* Die Navigation ist eine Spalte mit fester Hoehe. Ihre Kinder
	   duerfen nicht schrumpfen, sonst quetscht ein weiteres Element
	   die Menuepunkte zusammen - mit `overflow: hidden` blieben von
	   fuenf Eintraegen 15 Pixel uebrig, das Menue war unbedienbar.
	   Gescrollt wird die Navigation als Ganzes. */
	.vda-header .vda-nav > * {
		flex: 0 0 auto;
	}

	.vda-nav__fuss {
		display: grid;
		grid-template-columns: 1fr;
		gap: 14px;
		margin-block-start: 16px;
		padding-block-start: 16px;
		border-block-start: 1px solid var(--wp--preset--color--line);
	}

	@media (min-width: 640px) {
		.vda-nav__fuss {
			grid-template-columns: 1.4fr 1fr;
			gap: var(--wp--preset--spacing--30);
		}
	}

	.vda-nav__fuss .is-style-eyebrow {
		margin-block: 0 8px;
	}

	/* Zwei Spalten Kacheln, auf schmalen Geraeten eine. */
	.vda-nav__liste {
		margin: 0;
		padding: 0;
		list-style: none;
		display: grid;
		grid-template-columns: 1fr;
		gap: 4px;
	}

	.vda-nav__liste li {
		margin: 0;
	}

	/* 44 Punkte Hoehe sind das Mass, unter dem Finger daneben treffen. */
	.vda-nav__liste a {
		display: flex;
		align-items: center;
		gap: 8px;
		min-height: 42px;
		padding: 6px 10px;
		border: 1px solid var(--wp--preset--color--line);
		border-radius: var(--wp--custom--radius);
		background: var(--wp--preset--color--white);
		color: var(--wp--preset--color--ink);
		text-decoration: none;
		font-size: var(--wp--preset--font-size--small);
		font-weight: 600;
		line-height: 1.3;
		transition: border-color var(--wp--custom--transition),
			background-color var(--wp--custom--transition);
	}

	/* Der Pfeil sagt, dass es weitergeht, ohne ein Bild zu laden. */
	.vda-nav__liste a::after {
		content: "";
		flex: none;
		width: 7px;
		height: 7px;
		margin-inline-start: auto;
		border-top: 2px solid var(--wp--preset--color--periwinkle);
		border-right: 2px solid var(--wp--preset--color--periwinkle);
		transform: rotate(45deg);
		transition: border-color var(--wp--custom--transition);
	}

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

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

	/* Der Verband als abgesetzter Block, damit er nicht wie ein
	   vergessener Absatz unter den Kacheln steht. */
	.vda-nav__kontakt {
		padding: 14px;
		border-radius: var(--wp--custom--radius);
		background: var(--wp--preset--color--paper-blue, var(--wp--preset--color--blue-wash));
	}

	.vda-nav__kontakt p {
		margin-block: 0 8px;
		font-size: var(--wp--preset--font-size--small);
		line-height: 1.6;
		color: var(--wp--preset--color--muted);
	}

	.vda-nav__kontakt p a {
		color: var(--wp--preset--color--vda-blue);
		font-weight: 600;
	}

	.vda-nav__kontakt .wp-block-buttons {
		margin-block-start: 10px;
	}

	.vda-nav__kontakt .wp-element-button {
		display: flex;
		width: 100%;
		justify-content: center;
		color: var(--wp--preset--color--white);
	}
}

/* ---------------------------------------------------------------
   Das Einblenden des Menues

   Kurz und mit leichter Bewegung von oben, wie man es von Googles
   Oberflaechen kennt: 220 Millisekunden und eine Kurve, die schnell
   startet und weich ausleuft. Laenger wirkt traege, kuerzer bemerkt
   niemand.

   Die Menuepunkte kommen versetzt nach - 30 Millisekunden Abstand
   reichen, damit das Auge eine Richtung sieht, ohne zu warten.

   Wer Bewegung abgestellt hat, bekommt keine.
   --------------------------------------------------------------- */

@media (max-width: 1183px) {
	@keyframes vda-menue-auf {
		from {
			opacity: 0;
			transform: translateY(-8px);
		}
		to {
			opacity: 1;
			transform: none;
		}
	}

	@keyframes vda-zeile-auf {
		from {
			opacity: 0;
			transform: translateY(6px);
		}
		to {
			opacity: 1;
			transform: none;
		}
	}

	.vda-header .vda-nav.is-open {
		animation: vda-menue-auf 220ms cubic-bezier(0.2, 0, 0, 1) both;
	}

	/* Die Punkte laufen versetzt ein. Mehr als sechs Stufen braucht
	   es nicht - danach ist die Bewegung ohnehin vorbei. */
	.vda-header .vda-nav.is-open .vda-nav__trigger,
	.vda-header .vda-nav.is-open .vda-kopfsuche,
	.vda-header .vda-nav.is-open .vda-nav__fuss {
		animation: vda-zeile-auf 260ms cubic-bezier(0.2, 0, 0, 1) both;
	}

	.vda-header .vda-nav.is-open .vda-nav__trigger:nth-child(1) { animation-delay: 40ms; }
	.vda-header .vda-nav.is-open .vda-nav__trigger:nth-child(2) { animation-delay: 70ms; }
	.vda-header .vda-nav.is-open .vda-nav__trigger:nth-child(3) { animation-delay: 100ms; }
	.vda-header .vda-nav.is-open .vda-nav__trigger:nth-child(4) { animation-delay: 130ms; }
	.vda-header .vda-nav.is-open .vda-nav__trigger:nth-child(5) { animation-delay: 160ms; }
	.vda-header .vda-nav.is-open .vda-kopfsuche { animation-delay: 190ms; }
	.vda-header .vda-nav.is-open .vda-nav__fuss { animation-delay: 220ms; }

	/* Das aufgeklappte Panel faehrt aus, statt zu springen. */
	.vda-mega-panel.is-open {
		animation: vda-zeile-auf 200ms cubic-bezier(0.2, 0, 0, 1) both;
	}

	/* Der Pfeil dreht sich mit. */
	.vda-nav__trigger .wp-element-button::after {
		transition: transform 220ms cubic-bezier(0.2, 0, 0, 1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.vda-header .vda-nav.is-open,
	.vda-header .vda-nav.is-open .vda-nav__trigger,
	.vda-header .vda-nav.is-open .vda-kopfsuche,
	.vda-header .vda-nav.is-open .vda-nav__fuss,
	.vda-mega-panel.is-open {
		animation: none;
	}
}