/**
 * Megamenü Hauptnavigation (Desktop ab 1025px).
 * Das Panel hängt an .wpbf-nav-wrapper und läuft über die volle Containerbreite.
 */

@media (min-width: 1025px) {

	/* Hauptpunkt statisch, damit das Panel am Nav-Container ausgerichtet wird. */
	.wpbf-navigation .wpbf-menu > .menu-item.wn-has-mega {
		position: static;
	}

	/* Panel */
	.wpbf-navigation .wpbf-menu > .menu-item.wn-has-mega > .sub-menu.wn-mega {
		position: absolute;
		top: 100%;
		right: 0;
		left: 0;
		width: auto;
		min-width: 0;
		max-width: none;
		margin: 0;
		padding: 0;
		list-style: none;
		background: #fff;
		border-top: 1px solid rgba(0, 0, 0, .07);
		border-radius: 0 0 4px 4px;
		box-shadow: 0 28px 54px -20px rgba(10, 20, 35, .35);
		z-index: 130;
	}

	.wn-mega__wrap {
		float: none;
		width: 100%;
		margin: 0;
		padding: 0;
		list-style: none;
		border: 0;
	}

	.wn-mega__inner {
		display: grid;
		grid-template-columns: minmax(220px, 290px) 1fr;
		gap: 46px;
		align-items: start;
		padding: 38px 18px 42px;
	}

	/* ---------- Intro ---------- */

	.wn-mega__intro {
		position: relative;
		padding-right: 46px;
	}

	.wn-mega__intro::after {
		content: "";
		position: absolute;
		top: 4px;
		right: 0;
		bottom: 4px;
		width: 1px;
		background: rgba(0, 0, 0, .09);
	}

	.wn-mega__eyebrow {
		display: block;
		margin-bottom: 13px;
		color: #0f4ba3;
		font-size: 11px;
		font-weight: 700;
		letter-spacing: .17em;
		line-height: 1.2;
		text-transform: uppercase;
	}

	.wn-mega__heading {
		display: block;
		margin-bottom: 13px;
		color: #14181d;
		font-size: 21px;
		font-weight: 600;
		line-height: 1.3;
	}

	.wn-mega__text {
		display: block;
		margin-bottom: 22px;
		color: #5b6068;
		font-size: 14px;
		line-height: 1.65;
	}

	/* Menü-Padding des Themes in allen Panel-Links zurücksetzen. */
	.wpbf-navigation .wpbf-menu .wn-mega a {
		display: block;
		padding: 0;
		margin: 0;
		line-height: inherit;
		text-decoration: none;
	}

	.wpbf-navigation .wpbf-menu .wn-mega a.wn-mega__link {
		display: inline-flex;
		align-items: center;
		gap: 9px;
		color: #0f4ba3;
		font-size: 14px;
		font-weight: 600;
	}

	.wpbf-navigation .wpbf-menu .wn-mega a.wn-mega__link:hover {
		color: #0b3a80;
	}

	.wn-mega__arrow {
		display: inline-block;
		transition: transform .25s ease;
	}

	.wpbf-navigation .wpbf-menu .wn-mega a.wn-mega__link:hover .wn-mega__arrow {
		transform: translateX(4px);
	}

	/* ---------- Karten ---------- */

	.wn-mega__grid {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 28px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.wpbf-navigation .wpbf-menu .wn-mega .wn-mega__item {
		position: relative;
		float: none;
		width: auto;
		margin: 0;
		padding: 0;
		border: 0;
		list-style: none;
	}

	.wn-mega__media {
		display: block;
		position: relative;
		overflow: hidden;
		margin-bottom: 14px;
		border-radius: 3px;
		background: #eceef1;
		aspect-ratio: 4 / 3;
	}

	.wn-mega__media::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(180deg, rgba(15, 75, 163, 0) 45%, rgba(15, 75, 163, .22) 100%);
		opacity: 0;
		transition: opacity .35s ease;
	}

	.wn-mega__media img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: transform .55s cubic-bezier(.2, .7, .3, 1);
	}

	.wn-mega__card:hover .wn-mega__media img,
	.wn-mega__card:focus-visible .wn-mega__media img {
		transform: scale(1.06);
	}

	.wn-mega__card:hover .wn-mega__media::after,
	.wn-mega__card:focus-visible .wn-mega__media::after {
		opacity: 1;
	}

	.wn-mega__card:focus-visible {
		outline: 2px solid #0f4ba3;
		outline-offset: 4px;
	}

	.wn-mega__title {
		display: block;
		min-height: 2.7em; /* zwei Zeilen, damit alle Kurztexte auf einer Höhe starten */
		margin-bottom: 6px;
		color: #14181d;
		font-size: 15px;
		font-weight: 600;
		line-height: 1.35;
		transition: color .2s ease;
	}

	.wn-mega__card:hover .wn-mega__title,
	.wn-mega__card:focus-visible .wn-mega__title {
		color: #0f4ba3;
	}

	.wn-mega__desc {
		display: block;
		color: #6a7078;
		font-size: 13px;
		font-weight: 400;
		line-height: 1.55;
	}

	/* Aktive Unterseite hervorheben. */
	.wn-mega__item.current-menu-item .wn-mega__title,
	.wn-mega__item.current_page_item .wn-mega__title {
		color: #0f4ba3;
	}

	/* Pfeil am Hauptpunkt dreht beim Öffnen. */
	.wpbf-navigation .wpbf-menu > .menu-item.wn-has-mega > a .wpbff-arrow-down {
		transition: transform .25s ease;
	}

	.wpbf-navigation .wpbf-menu > .menu-item.wn-has-mega:hover > a .wpbff-arrow-down,
	.wpbf-navigation .wpbf-menu > .menu-item.wn-has-mega.wpbf-sub-menu-focus > a .wpbff-arrow-down {
		transform: rotate(180deg);
	}

	/* Schmalere Desktops: Intro schmaler, Abstände enger. */
	@media (max-width: 1360px) {
		.wn-mega__inner {
			grid-template-columns: minmax(190px, 240px) 1fr;
			gap: 34px;
			padding: 32px 18px 36px;
		}

		.wn-mega__intro {
			padding-right: 34px;
		}

		.wn-mega__heading {
			font-size: 19px;
		}

		.wn-mega__grid {
			gap: 22px;
		}
	}

	/* Sehr schmale Desktops: Intro über die volle Breite, Karten zweizeilig. */
	@media (max-width: 1140px) {
		.wn-mega__inner {
			grid-template-columns: 1fr;
			gap: 26px;
			padding: 28px 18px 32px;
		}

		.wn-mega__intro {
			padding-right: 0;
			max-width: 640px;
		}

		.wn-mega__intro::after {
			display: none;
		}

		.wn-mega__text {
			margin-bottom: 16px;
		}

		.wn-mega__grid {
			grid-template-columns: repeat(4, minmax(0, 1fr));
			gap: 20px;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.wn-mega__media img,
		.wn-mega__arrow,
		.wn-mega__title,
		.wn-mega__media::after {
			transition: none;
		}
	}
}

/**
 * Mobiles Menü: Unterpunkte mit Vorschaubild und eigener Fläche,
 * damit die zweite Ebene erkennbar ist.
 */
@media (max-width: 1024px) {

	.wpbf-mobile-menu .sub-menu {
		background: #f5f6f8;
	}

	.wpbf-mobile-menu .sub-menu > .menu-item > a {
		display: flex;
		align-items: center;
		gap: 14px;
		padding-top: 11px;
		padding-bottom: 11px;
		line-height: 1.35;
	}

	.wn-msub__thumb {
		display: block;
		flex: 0 0 auto;
		overflow: hidden;
		width: 64px;
		height: 48px;
		border-radius: 3px;
		background: #e4e7ea;
	}

	.wn-msub__thumb img,
	.wn-msub__img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

/**
 * Trefferflaechen der Kopfzeile am Handy, 09.09.2026.
 *
 * Gemessen mit Playwright: der Hamburger-Button war 18x18px gross, der
 * Suche-Schalter 18x31px. Empfohlen sind mindestens 44x44px (Apple HIG)
 * bzw. 48x48px (Material). Beide lagen ausserdem nur 18px auseinander.
 *
 * Die Icons selbst bleiben unveraendert bei 18px. Es waechst nur die
 * antippbare Flaeche um das Icon herum. Das Suchfeld-Dropdown ist
 * position:absolute und wird vom Flex-Kontext nicht beruehrt.
 */
@media (max-width: 1024px) {

	.wpbf-menu-toggle-container .wpbf-mobile-nav-item {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
	}

	/* Der Hamburger steht ganz aussen. Das negative Margin haelt das Icon
	   optisch an seiner alten Position, die Flaeche waechst nach innen. */
	.wpbf-menu-toggle-container #wpbf-mobile-menu-toggle {
		margin-right: -13px;
	}
}