/*
 * Leistungsklassen im Mega-Menü, Stil „Dunkel“ (Modulparameter mega_style).
 *
 * Nur tmpl/mega.php lädt diese Datei, und nur sie gibt das Raster als
 * .klassen-mega aus. Das Template lps26 kennt dieses Raster nicht — seine
 * Regeln für .klassen__grid greifen hier nicht, die für .klasse schon;
 * deshalb der Vorspann .main-nav__mega auf jeder Regel, die etwas davon
 * überschreibt.
 *
 * Farben und Schriften kommen aus den Variablen des Templates; der
 * Ersatzwert dahinter ist der Stand von lps26 (Oktober 2026).
 */

.klassen-mega {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
}

/* Die Fläche des Menüs gehört dem Template. Dunkel wird sie nur, wenn
   unsere Karten darin stehen — wie der Kopfbereich beim Scrollen. */
.main-nav__mega:has(.klassen-mega) {
	background-color: var(--color-ink, #191a1c);
	color: #fff;
	padding: 1.25rem;
	box-shadow: 0 1.5rem 3rem rgb(0 0 0 / .5);
}

.main-nav__mega .klassen-mega .klasse {
	background-color: #202124;
	border: 1px solid var(--color-hairline, #3d3d3f);
	border-radius: 5px;
	color: #fff;
	padding: 1.5rem 1.25rem 1.25rem;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	transition: border-color .2s, background-color .2s;
}

.main-nav__mega .klassen-mega .klasse:hover,
.main-nav__mega .klassen-mega .klasse:focus-within {
	border-color: var(--color-red, #e84d4d);
	background-color: #232427;
}

/* Der Name: kein Rahmen, keine Fläche, die Schrift der Produkttitel */
.main-nav__mega .klassen-mega .klasse__badge,
.main-nav__mega .klassen-mega .klasse:hover .klasse__badge {
	color: #fff;
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	align-self: flex-start;
	font-family: var(--font-display, "League Spartan", "Helvetica Neue", Helvetica, Arial, sans-serif);
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -.01em;
	line-height: 1.1;
	transition: color .2s;
}

.main-nav__mega .klassen-mega .klasse:hover .klasse__badge,
.main-nav__mega .klassen-mega .klasse:focus-within .klasse__badge {
	color: var(--color-red, #e84d4d);
}

/* Bild zuerst — über order, nicht im Markup: mit eingeschalteten
   Eigenschaften folgen Schieber und Einsatzzwecke weiter dem Namen. */
.main-nav__mega .klassen-mega .klasse__media {
	order: -1;
	margin: 0 0 1rem;
	width: 86%;
	align-self: center;
}

.main-nav__mega .klassen-mega .klasse__image {
	width: 100%;
	height: auto;
	display: block;
	transition: transform .3s;
}

.main-nav__mega .klassen-mega .klasse:hover .klasse__image {
	transform: scale(1.04);
}

/* Eigenschaften, falls eingeschaltet: Text und Linien weiß statt tintenfarben */
.main-nav__mega .klassen-mega .klasse__specs {
	color: #fff;
	margin-block-start: 1rem;
}

.main-nav__mega .klassen-mega .klasse__flag::before {
	border-color: #fff;
}

.main-nav__mega .klassen-mega .meter {
	background-color: #fff;
}

.main-nav__mega .klassen-mega .klasse__tags li {
	color: #fff;
	border-color: #fff;
}

/* Im mobilen Menü liegt alles schon auf dunklem Grund: keine eigene
   Fläche, eine Spalte, etwas enger. */
.mobile-nav .main-nav__mega:has(.klassen-mega) {
	background: none;
	box-shadow: none;
	padding: 0;
}

.mobile-nav .klassen-mega {
	grid-template-columns: 1fr;
	gap: .75rem;
}

.mobile-nav .main-nav__mega .klassen-mega .klasse {
	padding: 1rem;
}

.mobile-nav .main-nav__mega .klassen-mega .klasse__badge {
	font-size: 1.25rem;
}

@media (prefers-reduced-motion: reduce) {
	.main-nav__mega .klassen-mega .klasse,
	.main-nav__mega .klassen-mega .klasse__badge,
	.main-nav__mega .klassen-mega .klasse__image {
		transition: none;
	}

	.main-nav__mega .klassen-mega .klasse:hover .klasse__image {
		transform: none;
	}
}