/* markoon Megamenü */

.markoon-megamenu {
	position: relative;
}

/* --- Navigationsleiste --- */
.markoon-megamenu .mmm-top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.markoon-megamenu .mmm-top-item {
	position: static; /* Panel spannt über die volle Breite */
	margin: 0;
}

.markoon-megamenu .mmm-top-link {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	padding: 0;
	margin: 0;
	background: none;
	border: 0;
	font: inherit;
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}

.markoon-megamenu .mmm-caret {
	width: .5em;
	height: .5em;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: translateY(-.15em) rotate(45deg);
	transition: transform .2s ease-in-out;
}

.markoon-megamenu .mmm-top-item.is-open .mmm-caret {
	transform: translateY(.1em) rotate(-135deg);
}

/* --- Dropdown ---
   Fest positioniert, damit das Panel unabhängig davon über die volle
   Fensterbreite läuft, wie schmal oder wie tief verschachtelt die
   Navigation im Header sitzt. Den Abstand nach oben setzt das Skript
   anhand der Unterkante des Headers. */
.markoon-megamenu .mmm-panel {
	position: fixed;
	top: var(--mmm-top, 0px);
	left: 0;
	right: 0;
	z-index: 999;
	/* Deckt wie im Original den gesamten Bereich unter dem Header ab, damit
	   die Seite dahinter vollständig zurücktritt. */
	height: calc(100vh - var(--mmm-top, 0px));
	overflow-y: auto;
}

.markoon-megamenu .mmm-panel[hidden] {
	display: none;
}

.markoon-megamenu .mmm-panel-inner {
	margin: 0 auto;
}

.markoon-megamenu .mmm-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 30px;
	/* stretch: alle Karten einer Reihe sind gleich hoch */
	align-items: stretch;
}

/* --- Karten --- */
.markoon-megamenu .mmm-card {
	position: relative;
	display: flex;
	align-items: flex-start;
	text-decoration: none;
	transform: scale(1);
	transition: transform .25s ease-in-out;
	backdrop-filter: blur(8px);
}

/* scale statt Versatz: die Karte wächst aus ihrer Mitte, die Reihe bleibt
   dabei stehen, weil transform keinen Umbruch auslöst. */
.markoon-megamenu .mmm-card:hover,
.markoon-megamenu .mmm-card:focus-visible,
.markoon-megamenu .mmm-card:focus-within {
	transform: scale(var(--mmm-card-scale, 1.05));
	z-index: 1;
}

.markoon-megamenu .mmm-card-icon {
	flex: 0 0 auto;
	line-height: 0;
}

.markoon-megamenu .mmm-card-icon img,
.markoon-megamenu .mmm-card-icon svg {
	display: block;
	width: 100%;
	height: auto;
}

.markoon-megamenu .mmm-card-content {
	min-width: 0;
	flex: 1 1 auto;
	padding-left: 30px;
}

.markoon-megamenu .mmm-card:not(:has(.mmm-card-icon)) .mmm-card-content {
	padding-left: 0;
}

.markoon-megamenu .mmm-card-label {
	display: block;
	margin-bottom: 15px;
	text-decoration: none;
	color: inherit;
}

/* Roter Strich unter dem Kartentitel — nur bei Karten mit Unterpunkten.
   Karten ohne Unterpunkte tragen ihn im Original nicht, auch nicht beim
   Überfahren. */
.markoon-megamenu .mmm-card--group .mmm-card-label::after {
	content: "";
	display: block;
	width: var(--mmm-rule-width, 60px);
	height: 2px;
	margin-top: 3px;
	background: var(--mmm-rule-color, #D70F46);
}

.markoon-megamenu .mmm-card-description {
	margin-top: 0;
}

.markoon-megamenu .mmm-card-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.markoon-megamenu .mmm-card-list a {
	text-decoration: none;
}

.markoon-megamenu .mmm-card-list a:hover,
.markoon-megamenu .mmm-card-list a:focus-visible {
	text-decoration: underline;
}

/* --- Lichtschein am Mauszeiger --- */
.markoon-megamenu .mmm-card.shine::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	opacity: 0;
	transition: opacity .15s ease-in-out;
	background: radial-gradient(
		750px circle at var(--xPos, 50%) var(--yPos, 50%),
		rgba(255, 255, 255, .25),
		transparent 35%
	);
}

.markoon-megamenu .mmm-card.shine:hover::before {
	opacity: 1;
}

/* Der Lichtschein ist reine Dekoration und folgt dem Zeiger — bei reduzierter
   Bewegung ebenso abschalten wie den Hover-Versatz. */
@media (prefers-reduced-motion: reduce) {
	.markoon-megamenu .mmm-card,
	.markoon-megamenu .mmm-caret {
		transition: none;
	}
	.markoon-megamenu .mmm-card:hover,
	.markoon-megamenu .mmm-card:focus-visible,
	.markoon-megamenu .mmm-card:focus-within {
		transform: none;
	}
	.markoon-megamenu .mmm-card.shine::before {
		display: none;
	}
}

/* --- Tastaturfokus --- */
.markoon-megamenu a:focus-visible,
.markoon-megamenu button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}