/* Richtung 2 mit isometrischen Icons. Ersetzt die Liniensymbole und gibt Vorgehen und Leistungen je ein Icon. */

.iso {
	width: 6rem;
	height: 6rem;
	margin-left: -0.75rem;
}

/* Warum */

.warum .iso {
	width: 6.5rem;
	height: 6.5rem;
}

.warum h3 {
	margin-top: 1rem;
}

/* Vorgehen: Icon rechts neben dem Schritt */

.weg li {
	display: grid;
	grid-template-columns: 1fr 8rem;
	grid-template-rows: auto 1fr;
	grid-template-areas:
		"titel bild"
		"text bild";
	gap: 0 2.5rem;
	align-items: start;
}

.weg h3 {
	grid-area: titel;
}

.weg p {
	grid-area: text;
}

.iso--weg {
	grid-area: bild;
	width: 8rem;
	height: 8rem;
	margin: -1.5rem 0 0;
}

/* Ergebniskette */

.kette__karten .iso {
	width: 7rem;
	height: 7rem;
	margin: -1rem 0 0 -1rem;
}

.kette__karten .kette__schritt {
	margin-top: 1rem;
}

/* Leistungen: Icon links, Text rechts */

.leistungen > li {
	display: grid;
	grid-template-columns: 6rem 1fr;
	gap: 0 2.5rem;
}

.leistungen > li::before,
.leistungen h3,
.leistung__text {
	grid-column: 2;
}

.iso--leistung {
	grid-row: 1 / span 3;
	grid-column: 1;
	margin: -0.5rem 0 0 -0.75rem;
}

@media (max-width: 40rem) {
	.weg li {
		grid-template-columns: 1fr;
		grid-template-areas:
			"bild"
			"titel"
			"text";
	}

	.iso--weg {
		width: 6rem;
		height: 6rem;
		margin: -1rem 0 0.5rem -0.75rem;
	}

	.leistungen > li {
		grid-template-columns: 1fr;
	}

	.leistungen > li::before,
	.leistungen h3,
	.leistung__text,
	.iso--leistung {
		grid-row: auto;
		grid-column: 1;
	}

	.iso--leistung {
		margin-bottom: 0.5rem;
	}
}