/* mtr-km-deps: basis */
/* Vorteile-Liste: Symbol links, darunter feine Trennlinie je Eintrag. */
.elementor-widget-mtr-vorteile .mtr-perks {
	list-style: none;
	margin: 26px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px 22px;
}

.elementor-widget-mtr-vorteile .mtr-perks li {
	position: relative;
	padding: 10px 0 12px 32px;
	border-bottom: 1px solid var(--mtr-line);
	font-size: .9375rem;
}

.elementor-widget-mtr-vorteile .mtr-perks li > svg {
	position: absolute;
	left: 0;
	top: 11px;
	width: 20px;
	height: 20px;
	color: var(--mtr-red);
	flex: none;
}

.elementor-widget-mtr-vorteile .mtr-perks li b {
	display: block;
	font-weight: 700;
	line-height: 1.4;
}

.elementor-widget-mtr-vorteile .mtr-perks li span {
	display: block;
	margin-top: 3px;
	font-size: .875rem;
	line-height: 1.5;
	color: #4a4a4a;
}

/* Tablet: zwei Spalten, genau drei Vorteile bleiben nebeneinander. Die
   Ausnahme steht in :where(), damit Seiten-CSS die Liste weiter umstellen kann. */
@media (max-width: 1024px) {
	.elementor-widget-mtr-vorteile .mtr-perks:where(:not(:has(> li:first-child:nth-last-child(3)))) {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.elementor-widget-mtr-vorteile .mtr-perks {
		grid-template-columns: 1fr;
		margin-top: 20px;
	}

	/* Einspaltig braucht der letzte Eintrag keine Trennlinie: darunter folgt
	   ohnehin die Linie des nächsten Abschnitts (Startseite, Kultur). */
	.elementor-widget-mtr-vorteile .mtr-perks > li:last-child {
		border-bottom: 0;
	}
}

/* Volle Reihen (2.1.11): Die Zahl der Vorteile ist frei, deshalb bleibt nie ein
   einzelner Eintrag neben leerem Platz stehen. Tablet: ein übriger Eintrag
   reicht über beide Spalten. Desktop: das Raster hat sechs Spuren, jeder
   Eintrag belegt zwei. Bleiben zwei übrig, teilen sie sich die Reihe; bleibt
   einer übrig, stehen die letzten vier zu zweit. Das gilt nur für breite
   Listen (Abfrage auf die Breite des Moduls), eine Liste in einer schmalen
   Spalte behält ihre Einstellung von der Seite.
   Die Breitenabfrage braucht container-type am Modul. Das Modul misst dann
   seine eigene Breite nicht mehr aus dem Inhalt, und in Spalten mit
   Umbruch (flex-wrap, auf dem Handy die Regel) rechnet der Browser die Höhe
   bei zu geringer Breite und behält sie: unter der Liste bleibt leerer
   Platz. Deshalb nur dort, wo die Abfrage gebraucht wird. */

@media (min-width: 1025px) {
	.elementor-widget-mtr-vorteile {
		container-type: inline-size;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	.elementor-widget-mtr-vorteile .mtr-perks > li:only-child,
	.elementor-widget-mtr-vorteile .mtr-perks > li:last-child:nth-child(2n+5) {
		grid-column: 1 / -1;
	}
}

@media (min-width: 1025px) {
	@container (min-width: 800px) {
		.elementor-widget-mtr-vorteile .mtr-perks {
			grid-template-columns: repeat(6, minmax(0, 1fr));
		}

		.elementor-widget-mtr-vorteile .mtr-perks > li {
			grid-column: span 2;
		}

		.elementor-widget-mtr-vorteile .mtr-perks > li:nth-last-child(2):nth-child(3n+1),
		.elementor-widget-mtr-vorteile .mtr-perks > li:last-child:nth-child(3n+2),
		.elementor-widget-mtr-vorteile .mtr-perks > li:nth-last-child(4):nth-child(3n+1),
		.elementor-widget-mtr-vorteile .mtr-perks > li:nth-last-child(4):nth-child(3n+1) ~ li {
			grid-column: span 3;
		}

		.elementor-widget-mtr-vorteile .mtr-perks > li:only-child {
			grid-column: 1 / -1;
		}
	}
}

/* Stufen mit Nummer (05.10.2026): eine geordnete Folge, zum Beispiel die
   Laufbahn. Gleiche Formensprache wie die Anforderungen auf den
   Stellenseiten: eine weiße Karte mit feinem Rand, die Stufen als Zeilen
   mit feinen Trennlinien, links die Nummer in einem hellroten Kreis von
   28 px, senkrecht mittig zum Text der Zeile (rechts fett die
   Ausgangslage, darunter kleiner, was daraus folgt). Keine Stufe ist
   hervorgehoben, keine Verbindungslinie. Die Ziffer steht im dunkleren
   Rot, weil das MTR-Rot auf dem hellroten Grund für kleine Schrift zu
   wenig Kontrast hat. Eigene Klassen (ol.mtr-stufen), die Regeln der
   Vorteile-Liste oben gelten hier nicht. */

.elementor-widget-mtr-vorteile ol.mtr-stufen {
	list-style: none;
	margin: 26px 0 0;
	padding: 30px;
	background: #fff;
	border: 1px solid #E6E6E6;
	border-radius: 8px;
}

.elementor-widget-mtr-vorteile .mtr-stufen .mtr-stufen__stufe {
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr);
	column-gap: 16px;
	align-items: start;
	margin: 0;
	padding: 12px 0 13px;
	border-bottom: 1px solid #E6E6E6;
	font-size: .9375rem;
	line-height: 1.5;
}

.elementor-widget-mtr-vorteile .mtr-stufen .mtr-stufen__stufe:first-child {
	padding-top: 0;
}

.elementor-widget-mtr-vorteile .mtr-stufen .mtr-stufen__stufe:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.elementor-widget-mtr-vorteile .mtr-stufen .mtr-stufen__nr {
	grid-column: 1;
	grid-row: 1 / span 2;
	align-self: center;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #FDE9EB;
	color: var(--mtr-red-dunkel, #C11C29);
	font-size: .875rem;
	font-weight: 700;
	line-height: 1;
}

.elementor-widget-mtr-vorteile .mtr-stufen .mtr-stufen__lage {
	grid-column: 2;
	grid-row: 1;
	display: block;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--mtr-ink);
}

.elementor-widget-mtr-vorteile .mtr-stufen .mtr-stufen__text {
	grid-column: 2;
	grid-row: 2;
	display: block;
	margin-top: 2px;
	font-size: .9375rem;
	line-height: 1.5;
	color: #4a4a4a;
}

@media (max-width: 767px) {
	.elementor-widget-mtr-vorteile ol.mtr-stufen {
		margin-top: 20px;
		padding: 20px 18px;
	}
}