/* Richtung 1 mit Icon-Set E „Versatz“. Platz der Icons auf der Seite, Route im selben Stil wie die Icons. */

:root {
	--e-versatz: 0.15625rem; /* 2.5 von 96 bei 6rem Icongröße */
}

.e-icon {
	display: block;
	width: 4.5rem;
	height: auto;
}

/* Vorgehen: Haltepunkte wie Papier mit versetzter grüner Fläche */

.route__punkt {
	box-shadow: calc(var(--e-versatz) * -1) var(--e-versatz) 0 var(--gruen-40);
}

.vorgehen__schritte .e-icon {
	width: 6rem;
	margin-bottom: 1.75rem;
}

/* Ergebniskette auf Wald: die Linien der Icons sind Wald, deshalb liegen sie auf einem weißen Blatt */

.kette .e-icon {
	width: 6rem;
	margin-bottom: 1.75rem;
	padding: 0.5rem;
	border-radius: var(--radius);
	background: var(--weiss);
	box-shadow: calc(var(--e-versatz) * -2) calc(var(--e-versatz) * 2) 0 var(--gruen);
}

/* Leistungen: Icon und Nummer in einer Zeile */

.leistungen__raster > li {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 1rem;
	align-content: start;
}

.leistungen__raster .e-icon {
	width: 4.5rem;
}

.leistungen__raster .nummer {
	justify-self: end;
}

.leistungen__raster h3,
.leistung__text {
	grid-column: 1 / -1;
}

.leistungen__raster h3 {
	margin-top: 1.25rem;
}

@media (max-width: 56rem) {
	.vorgehen__schritte .e-icon,
	.kette .e-icon {
		width: 4.5rem;
	}
}