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

/* 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. */
.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. */
	z-index: 41;
	align-self: stretch;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 var(--wp--custom--brand-width);
	width: var(--wp--custom--brand-width);
	margin-block-end: calc(-1 * var(--wp--custom--brand-overhang));
	padding-block-end: var(--wp--custom--brand-overhang);
	background: var(--wp--preset--color--vda-blue);
	transition: margin-block-end var(--wp--custom--transition), padding-block-end var(--wp--custom--transition);
}

.vda-header.is-scrolled .vda-brand {
	margin-block-end: 0;
	padding-block-end: 0;
}

.vda-header .vda-brand img {
	width: 80px;
	height: auto;
	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;
}

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

@media (max-width: 1183px) {
	.vda-header__row {
		min-height: var(--wp--custom--header-height-mobile);
	}

	.vda-header .vda-brand {
		flex-basis: 72px;
		width: 72px;
		margin-block-end: -8px;
		padding-block-end: 8px;
	}

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

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

/* ---------------------------------------------------------------
   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: die Ausgabennummer steht gross auf der Flaeche */
.vda-magazine {
	min-height: 648px;
	display: flex;
	align-items: center;
}

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

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

	.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;
		padding: 8px 18px 32px;
		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 {
		display: block;
		width: 100%;
		border-block-end: 1px solid var(--wp--preset--color--line);
	}

	.vda-nav__trigger .wp-element-button {
		width: 100%;
		min-height: 58px;
		justify-content: space-between;
		padding-inline: 0;
		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;
	}
}