/*
 * Leistungsklassen als Abschnitt, Darstellung „Hell, wie das Menü“
 * (Modulparameter card_style).
 *
 * tmpl/default.php lädt diese Datei und hängt .klassen--hell an den
 * Abschnitt. Die Karten behalten Markup und Klassen des Templates, damit
 * main.js sie weiter nacheinander einlaufen lässt — hier wird nur
 * umgestaltet. Gegenstück zu mega.css: dieselbe Karte auf hellem Grund.
 *
 * Farben und Schriften kommen aus den Variablen des Templates; der
 * Ersatzwert dahinter ist der Stand von lps26 (Oktober 2026).
 */

.klassen--hell .klasse {
	background-color: var(--color-surface, #f3f3f3);
	border: 1px solid rgb(25 26 28 / .1);
	border-radius: 5px;
	padding: 1.5rem;
	transition: border-color .2s, background-color .2s;
}

.klassen--hell .klasse:hover,
.klassen--hell .klasse:focus-within {
	border-color: var(--color-red, #e84d4d);
	background-color: #f7f7f7;
}

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

.klassen--hell .klasse__image {
	transition: transform .3s;
}

.klassen--hell .klasse:hover .klasse__image {
	transform: scale(1.04);
}

/* Der Name: kein Rahmen, keine Fläche, die Schrift der Produkttitel */
.klassen--hell .klasse__badge,
.klassen--hell .klasse:hover .klasse__badge {
	color: var(--color-ink, #191a1c);
	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;
}

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

/* Mit Eigenschaften: Luft zwischen Name und Schiebern */
.klassen--hell .klasse__specs {
	margin-block-start: 1.25rem;
}

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

	.klassen--hell .klasse:hover .klasse__image {
		transform: none;
	}
}