/* Prinas Mega Menu
 * Grundfarben/Maße hier zentral anpassen.
 */
:root {
	/* Exakt aus vorgabe.PNG gepixelt: aktiver Tab/Tab-Text #084986, */
	/* Spalten-Überschrift + Icon #3b3b3c (Anthrazit, NICHT Blau), Link #676767. */
	--prinas-mm-accent: #084986;
	--prinas-mm-accent-text: #ffffff;
	--prinas-mm-text: #676767;
	--prinas-mm-heading: #3b3b3c;
	--prinas-mm-border: #e9ebef;
	--prinas-mm-bg: #ffffff;
	--prinas-mm-tabs-width: 320px;
	--prinas-mm-column-gap: 70px;
	--prinas-mm-radius: 3px;
	--prinas-mm-min-height: 300px;
	--prinas-mm-trigger-font-size: 16px;
}

/* Trigger / Hauptpunkt --------------------------------------------------- */
/* Vertikaler Positionierungs-Anker für alle Flyouts ist die Nav-Zeile
   (ul.sf-menu bzw. #top nav), NICHT der einzelne Menüpunkt -- top:100%
   bezieht sich dadurch immer auf "direkt unter der Nav-Zeile", unabhängig
   davon welcher Hauptpunkt gehovert wird. Horizontal wird das Flyout
   separat via left:50vw + transform auf die Viewport-Mitte zentriert
   (siehe .prinas-megamenu weiter unten). Salient setzt auf .prinas-megamenu-item
   selbst sonst position:relative mit höherer Spezifität -- deshalb hier
   !important. */
#top nav {
	position: relative !important;
}
#top nav ul.sf-menu {
	position: relative !important;
}
.prinas-megamenu-item {
	position: static !important;
}
.prinas-megamenu-item > a,
.prinas-megamenu-item > a:focus,
.prinas-megamenu-item > a:active {
	/* Salient setzt hier sonst display:block ohne !important zu verlieren --
	   dadurch griff align-items:center nie und der Chevron hing schief. */
	display: inline-flex !important;
	align-items: center !important;
	gap: 9px;
	font-weight: bold !important;
	font-size: var(--prinas-mm-trigger-font-size) !important;
	border: 0;
	outline: none;
	box-shadow: none;
}
.prinas-megamenu-caret {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	margin-top: -3px;
	opacity: 0.65;
	transition: transform 0.2s ease;
}
.prinas-megamenu-item.is-open > a .prinas-megamenu-caret {
	transform: rotate(-135deg);
	margin-top: 3px;
}

/* Flyout Container -----------------------------------------------------------
 * position:absolute, vertikal an der Nav-Zeile verankert (top:100% von
 * ul.sf-menu, siehe weiter unten) -- kein Gap, Maus bleibt beim Reinfahren
 * durchgängig im Hover-Bereich. Horizontal auf die Viewport-Mitte zentriert
 * -- reines CSS (left:50vw + translateX) würde nur relativ zum eigenen
 * Containing-Block (ul.sf-menu) zentrieren, dessen linke Kante aber selten
 * bei x=0 liegt. Deshalb berechnet megamenu.js beim Öffnen die tatsächliche
 * Bildschirmposition und setzt "left" per Inline-Style -- der Wert hier ist
 * nur der Ausgangszustand, bevor JS greift.
 */
.prinas-megamenu {
	display: none !important;
	position: absolute !important;
	top: 100% !important;
	left: 0;
	max-width: calc(100vw - 40px);
	z-index: 9999 !important;
	padding-top: 0 !important;
	float: none !important;
}
.prinas-megamenu-item.is-open > .prinas-megamenu {
	display: block !important;
}

/* Eine einzige gemeinsame Karte für Tabs + Panel -----------------------------
 * Tabs-Liste und aktives Panel sind normale Flex-Geschwister (kein
 * position:absolute mehr für das Panel) -- dadurch tragen beide zur Breite
 * und Höhe von .prinas-megamenu-inner bei und teilen sich automatisch
 * denselben Hintergrund/Schatten/Rand, statt wie zwei getrennte Boxen zu
 * wirken. Der Hover-Bereich ist dadurch außerdem lückenlos durchgängig.
 */
.prinas-megamenu-inner {
	display: flex !important;
	align-items: stretch !important;
	min-height: var(--prinas-mm-min-height);
	background: var(--prinas-mm-bg);
	border-radius: var(--prinas-mm-radius);
	box-shadow: 0 4px 14px rgba(15, 30, 60, 0.09);
}

/* Tabs (Ebene 1) ----------------------------------------------------------- */
.prinas-megamenu-tabs {
	display: block !important;
	position: static !important;
	float: none !important;
	margin: 0 !important;
	padding: 20px 0 !important;
	width: var(--prinas-mm-tabs-width) !important;
	flex: 0 0 var(--prinas-mm-tabs-width) !important;
}
.prinas-megamenu-tab {
	display: block !important;
	position: static !important;
	float: none !important;
	margin: 0 12px 22px !important;
}
.prinas-megamenu-tab:last-child {
	margin-bottom: 0 !important;
}
.prinas-megamenu-tab > a {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 15px 18px;
	border-radius: var(--prinas-mm-radius);
	color: var(--prinas-mm-accent) !important;
	font-weight: 500 !important;
	font-size: 15px;
	text-decoration: none !important;
	white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.prinas-megamenu-tab-arrow {
	display: inline-block;
	width: 9px;
	height: 9px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
	flex-shrink: 0;
	color: currentColor;
}
.prinas-megamenu-tab.is-active > a,
.prinas-megamenu-tab > a:hover,
.prinas-megamenu-tab > a:focus {
	background: var(--prinas-mm-accent) !important;
	color: var(--prinas-mm-accent-text) !important;
}
.prinas-megamenu-tab--simple > a {
	font-weight: 500 !important;
}

/* Panels ----------------------------------------------------------------------
 * .prinas-megamenu-panels wird per JS als Geschwister von .prinas-megamenu-tabs
 * angelegt; jedes .prinas-megamenu-panel liegt normal im Textfluss darin,
 * nur das aktive ist sichtbar (kein position:absolute mehr nötig).
 */
.prinas-megamenu-panels {
	display: block !important;
	position: relative !important;
	float: none !important;
	flex: 1 1 auto !important;
	min-width: 0;
}
/* Trennlinie zwischen Tabs und Panel: im Screendesign nicht randabfallend,
   sondern oben/unten eingerückt -- daher eigenes Element statt border-left,
   das sonst über die volle Höhe von .prinas-megamenu-inner laufen würde. */
.prinas-megamenu-panels::before {
	content: "";
	position: absolute;
	top: 24px;
	bottom: 24px;
	left: 0;
	width: 1px;
	background: var(--prinas-mm-border);
}
.prinas-megamenu-panel {
	display: none !important;
	position: static !important;
	float: none !important;
	min-width: 560px;
	padding: 35px 40px 32px 56px;
	box-sizing: border-box;
}
.prinas-megamenu-panel.is-active {
	display: block !important;
}

/* Spalten (Ebene 2) --------------------------------------------------------- */
.prinas-megamenu-columns {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(200px, 260px));
	grid-auto-flow: row;
	column-gap: var(--prinas-mm-column-gap);
	row-gap: 28px;
	text-align: left !important;
}
/* Nur eine Spalte im Tab (z.B. Firmenkunden > Betriebliche Vorsorge) --
   dann die volle Panel-Breite statt nur die erste 260px-Spur nutzen. */
.prinas-megamenu-columns:has(> .prinas-megamenu-column:only-child) {
	grid-template-columns: 1fr !important;
}
.prinas-megamenu-columns:has(> .prinas-megamenu-column:only-child) > .prinas-megamenu-column {
	max-width: none;
}
.prinas-megamenu-column {
	min-width: 0;
	width: 100%;
	text-align: left !important;
}
.prinas-megamenu-column-heading {
	display: flex;
	align-items: center;
	text-align: left !important;
	text-decoration: none !important;
	margin-bottom: 14px;
}
.prinas-megamenu-column-title {
	/* min-width:0 ist hier entscheidend: Flex-Kinder haben sonst ein implizites
	   min-width:auto (= Breite des unumbrochenen Texts), wodurch lange
	   Überschriften nicht umbrechen, sondern über die Nachbarspalte hinaus
	   liefen. */
	min-width: 0;
	font-weight: 700;
	font-size: 17px;
	/* Salient vererbt hier line-height:0 (vermutlich für Icon-only-Elemente
	   gedacht) -- dadurch kollabierte die Box bei zweizeiligen Überschriften
	   auf ~0px Höhe und die zweite Zeile hat sich mit der ersten bzw. den
	   Links darunter überlagert. */
	line-height: 1.3 !important;
	color: var(--prinas-mm-heading) !important;
	text-align: left !important;
	white-space: normal !important;
	overflow-wrap: break-word;
}
/* Überschrift pro Spalte ausblenden: im Menüpunkt-Editor bei "CSS-Klassen"
   die Klasse "nav-placholder" eintragen (Tippfehler bewusst mit übernommen,
   da genau so vom Kunden vorgegeben -- "nav-placeholder" wird zur Sicherheit
   ebenfalls unterstützt). */
.prinas-megamenu-column.nav-placholder > .prinas-megamenu-column-heading,
.prinas-megamenu-column.nav-placeholder > .prinas-megamenu-column-heading {
	display: none !important;
}
/* Der erste Link hat 6px padding-top (die Überschrift nicht) -- ohne
   Überschrift saß der Linktext dadurch sichtbar tiefer als die Überschrift
   der Nachbarspalte. Kompensiert, damit beide auf gleicher Höhe beginnen. */
.prinas-megamenu-column.nav-placholder > .prinas-megamenu-links,
.prinas-megamenu-column.nav-placeholder > .prinas-megamenu-links {
	margin-top: -6px;
}

/* Links (Ebene 3) ------------------------------------------------------------ */
.prinas-megamenu-links a {
	display: block;
	padding: 6px 0;
	color: var(--prinas-mm-text) !important;
	text-decoration: none !important;
	text-align: left !important;
	font-size: 15px;
	line-height: 1.5;
	white-space: normal !important;
	overflow-wrap: break-word;
	word-break: normal;
}
.prinas-megamenu-links a:hover,
.prinas-megamenu-links a:focus {
	color: var(--prinas-mm-accent) !important;
	text-decoration: underline !important;
}

/* Auf Mobil/Tablet: Mega-Menü aus, Salients Off-Canvas-Akkordeon übernimmt */
@media (max-width: 999px) {
	.prinas-megamenu {
		display: none !important;
	}
}