/**
 * Megamenü Hauptnavigation (Desktop ab 1025 px), Elementor Pro Nav-Menu-Widget.
 *
 * Das Panel hängt am Header-Container (Elementor-Template 41, sticky, position
 * fixed, z-index 99) und läuft über die volle Viewportbreite. Der Inhalt ist
 * auf die Content-Box des Headers ausgerichtet: boxed 1400 px, Container-
 * Padding 10 px, Zeilen-Padding 10 px (gemessen am 26.09.2026).
 *
 * SmartMenus setzt beim Öffnen Inline-Styles auf das Panel (top, left, margin,
 * width, min-/max-width, z-index). Die !important-Regeln übersteuern genau die.
 */

@media (min-width: 1025px) {

	/* Bezugspunkt ist der Header-Container. Alles dazwischen wird statisch,
	   sonst richtet sich das Panel am Nav-Widget (917 px) aus. */
	.elementor-location-header .e-con-inner > .e-con,
	.elementor-location-header .elementor-widget-nav-menu,
	.elementor-location-header .elementor-nav-menu--main .elementor-nav-menu,
	.elementor-location-header .elementor-nav-menu--main .elementor-nav-menu > .ps-has-mega {
		position: static;
	}

	/* ---------- Panel ---------- */

	.elementor-nav-menu--main .elementor-nav-menu > .ps-has-mega > .ps-mega {
		position: absolute;
		top: 100% !important;
		right: 0 !important;
		left: 0 !important;
		width: auto !important;
		min-width: 0 !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 0;
		list-style: none;
		background: #fff;
		border: 0;
		border-top: 1px solid rgba(0, 0, 0, .06);
		box-shadow: 0 28px 54px -20px rgba(15, 20, 30, .28);
		white-space: normal;
		z-index: 130 !important;
	}

	/* Unsichtbare Brücke über die 21 px zwischen Menüpunkt und Panel,
	   damit die Maus auf dem Weg nach unten nicht "das Menü verlässt". */
	.ps-mega::before {
		content: "";
		position: absolute;
		right: 0;
		bottom: 100%;
		left: 0;
		height: 24px;
	}


	/* Verschachtelte Listen im Panel: Elementor macht aus jedem ul ein
	   absolutes, verstecktes 12em-Dropdown. Zurücksetzen. */
	.elementor-nav-menu--main .elementor-nav-menu .ps-mega ul {
		display: block;
		position: static;
		width: auto;
		min-width: 0;
		max-width: none;
		margin: 0;
		padding: 0;
		border: 0;
		list-style: none;
	}

	/* Elementor gibt jedem Menülink flex, nowrap und 13px 20px Padding. */
	.elementor-nav-menu--main .elementor-nav-menu .ps-mega a,
	.elementor-nav-menu--main .elementor-nav-menu .ps-mega a:hover,
	.elementor-nav-menu--main .elementor-nav-menu .ps-mega a:focus,
	.elementor-nav-menu--main .elementor-nav-menu .ps-mega a.highlighted {
		display: block;
		padding: 0;
		margin: 0;
		border: 0;
		background: transparent;
		line-height: inherit;
		white-space: normal;
		text-decoration: none;
		transition: color .2s ease;
	}

	.elementor-nav-menu--main .elementor-nav-menu .ps-mega li {
		position: static;
		float: none;
		width: auto;
		margin: 0;
		padding: 0;
		border: 0;
		list-style: none;
	}

	/* Höher als das Fenster: der Inhalt scrollt, sonst wäre die untere
	   Kartenreihe unter dem fixierten Header unerreichbar. Das Scrollen sitzt
	   am inneren li, nicht am Panel, damit die Brücke (::before) sichtbar bleibt. */
	.ps-mega__wrap {
		display: block;
		width: 100%;
		max-height: calc(100vh - 88px);
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	/* Das Custom CSS des Nav-Widgets setzt auf jedes li im Desktop-Menü
	   white-space: nowrap (Spezifität 0,4,1). Im Panel muss Text umbrechen. */
	.ps-mega__inner,
	.elementor-location-header .elementor-nav-menu--main .elementor-nav-menu .ps-mega .ps-mega__inner li {
		white-space: normal;
	}

	.ps-mega__inner {
		box-sizing: border-box;
		display: grid;
		grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
		gap: 48px;
		align-items: start;
		max-width: 1420px; /* 1400 px Content-Box + 2 × 10 px Container-Padding */
		margin: 0 auto;
		padding: 36px 20px 40px; /* 20 px = Container-Padding 10 + Zeilen-Padding 10: fluchtet mit dem Logo */
	}

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

	.ps-mega__intro {
		position: relative;
		padding-right: 48px;
	}

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

	.ps-mega__eyebrow {
		display: block;
		margin-bottom: 12px;
		color: #697787;
		font-size: 11px;
		font-weight: 600;
		letter-spacing: .17em;
		line-height: 1.2;
		text-transform: uppercase;
	}

	.ps-mega__heading {
		display: block;
		margin-bottom: 12px;
		color: #111;
		font-size: 22px;
		font-weight: 600;
		line-height: 1.3;
	}

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

	.elementor-nav-menu--main .elementor-nav-menu .ps-mega a.ps-mega__link {
		display: inline-flex;
		align-items: center;
		gap: 9px;
		color: #697787;
		font-size: 14px;
		font-weight: 600;
	}

	.elementor-nav-menu--main .elementor-nav-menu .ps-mega a.ps-mega__link:hover {
		color: #111;
	}

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

	.ps-mega a.ps-mega__link:hover .ps-mega__arrow {
		transform: translateX(4px);
	}

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

	.elementor-nav-menu--main .elementor-nav-menu .ps-mega ul.ps-mega__grid {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 28px 24px;
	}

	/* Wenige Karten: drei Spalten, damit sie nicht in einem leeren Raster stehen. */
	.elementor-nav-menu--main .elementor-nav-menu .ps-mega--n1 ul.ps-mega__grid,
	.elementor-nav-menu--main .elementor-nav-menu .ps-mega--n2 ul.ps-mega__grid,
	.elementor-nav-menu--main .elementor-nav-menu .ps-mega--n3 ul.ps-mega__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		max-width: 900px;
	}

	.elementor-nav-menu--main .elementor-nav-menu .ps-mega li.ps-mega__item {
		position: relative;
	}

	.ps-mega__media {
		display: block;
		position: relative;
		overflow: hidden;
		margin-bottom: 12px;
		border-radius: 5px;
		background: #ecedef;
		aspect-ratio: 3 / 2;
	}

	.ps-mega__media::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(180deg, rgba(105, 119, 135, 0) 45%, rgba(105, 119, 135, .28) 100%);
		opacity: 0;
		transition: opacity .35s ease;
	}

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

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

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

	.ps-mega__card:focus-visible,
	.ps-mega__sublink:focus-visible,
	.ps-mega__link:focus-visible {
		outline: 2px solid #697787;
		outline-offset: 4px;
	}

	.ps-mega__title {
		display: block;
		min-height: 2.6em; /* zwei Zeilen, damit alle Kurztexte auf einer Höhe starten */
		margin-bottom: 4px;
		color: #111;
		font-size: 15px;
		font-weight: 600;
		line-height: 1.3;
		transition: color .2s ease;
	}

	.ps-mega__card:hover .ps-mega__title,
	.ps-mega__card:focus-visible .ps-mega__title,
	.ps-mega__item.current-menu-item > .ps-mega__card .ps-mega__title,
	.ps-mega__item.current_page_item > .ps-mega__card .ps-mega__title {
		color: #697787;
	}

	.ps-mega__desc {
		display: -webkit-box;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		color: #6a7078;
		font-size: 13px;
		font-weight: 400;
		line-height: 1.5;
	}

	/* ---------- Dritte Ebene: Linkliste unter der Karte ---------- */

	.elementor-nav-menu--main .elementor-nav-menu .ps-mega ul.ps-mega__sub {
		margin-top: 12px;
		padding-top: 10px;
		border-top: 1px solid rgba(0, 0, 0, .08);
	}

	.elementor-nav-menu--main .elementor-nav-menu .ps-mega a.ps-mega__sublink {
		padding: 4px 0;
		color: #333;
		font-size: 13.5px;
		font-weight: 400;
		line-height: 1.4;
	}

	.elementor-nav-menu--main .elementor-nav-menu .ps-mega a.ps-mega__sublink:hover,
	.elementor-nav-menu--main .elementor-nav-menu .ps-mega a.ps-mega__sublink:focus,
	.ps-mega__subitem.current-menu-item > a.ps-mega__sublink {
		color: #697787;
	}

	/* Pfeil am Hauptpunkt dreht, solange das Panel offen ist (SmartMenus
	   setzt dann `highlighted` auf den Link). */
	.elementor-nav-menu--main .elementor-nav-menu > .ps-has-mega > a .sub-arrow i {
		transition: transform .25s ease;
	}

	.elementor-nav-menu--main .elementor-nav-menu > .ps-has-mega > a.highlighted .sub-arrow i {
		transform: rotate(180deg);
	}

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

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

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

		.elementor-nav-menu--main .elementor-nav-menu .ps-mega ul.ps-mega__grid {
			gap: 22px 20px;
		}
	}

	/* Sehr schmale Desktops: Intro über die volle Breite, Karten darunter. */
	@media (max-width: 1140px) {
		.ps-mega__inner {
			grid-template-columns: minmax(0, 1fr);
			gap: 24px;
			padding-top: 26px;
			padding-bottom: 30px;
		}

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

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

		.ps-mega__text {
			margin-bottom: 14px;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.ps-mega__media img,
		.ps-mega__media::after,
		.ps-mega__arrow,
		.ps-mega__title,
		.elementor-nav-menu--main .elementor-nav-menu > .ps-has-mega > a .sub-arrow i {
			transition: none;
		}
	}
}

/**
 * Tablet und Mobil: Elementor-Dropdown bleibt, die zweite Ebene bekommt ein
 * kleines Vorschaubild vor dem Titel.
 */
@media (max-width: 1024px) {

	.elementor-nav-menu--dropdown .sub-menu > .menu-item > a.elementor-sub-item {
		gap: 12px;
	}

	.ps-msub__thumb {
		display: block;
		flex: 0 0 auto;
		overflow: hidden;
		width: 56px;
		height: 42px;
		border-radius: 4px;
		background: #e4e7ea;
	}

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