/* -------------------------------------------------- */
/* Vorgehen                                             */
/* -------------------------------------------------- */

.section--vorgehen h2,
.section--vorgehen .section__subheading {
	color: #fff;
}

.section--vorgehen .section__subheading {
	margin-bottom: 4rem;
}

/* Same grid and card as Unsere Leistungen (07-leistungen.css) — reused
   wholesale rather than a second timeline component, since the section sits
   on the same gradient band and three steps is exactly a full row of
   .leistungen-grid's 12 columns (3 × span 4). .vorgehen-schritte only carries
   naming; every rule that matters lives on .leistungen-grid / .leistung-card
   already. The steps are an <ol> of plain <li>, not links, so there is no
   .leistung-card__more here — the hover lift is kept anyway, purely for the
   same tactile feel as the cards above. */
.vorgehen-schritte {
	list-style: none;
	padding: 0;
}

/* .leistung-card's hover lift assumes a link. These are plain <li>, so it
   gets cancelled back to the resting state — a card that shifts under the
   pointer but does nothing when clicked reads as a broken control. */
.vorgehen-schritte .leistung-card:hover {
	transform: none;
	box-shadow: var(--shadow-card);
}

.vorgehen-schritt__nummer {
	display: block;
	margin-bottom: 0.25rem;
	font-family: var(--font-display);
	font-size: var(--text-2xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-gradient-end);
}

/* The one thing the card grid doesn't carry over on its own: these are steps
   in a sequence, not independent offers, so each one but the last gets an
   arrow parked in the gap to the next. The box is exactly the grid gap wide,
   positioned flush against the card's own edge and pushed out by its own
   width — sized and placed that way, rather than centred by eye, so it stays
   correct if the grid's gap ever changes. White because it sits on the
   gradient band, outside the white card. Turns to point down between stacked
   cards on mobile (23-mobile.css). */
.vorgehen-schritte .leistung-card:not(:last-child)::after {
	content: "→";
	position: absolute;
	top: calc(var(--badge-size) / 2 - 0.6em);
	right: 0;
	width: 1.5rem;
	transform: translateX(100%);
	text-align: center;
	font-family: var(--font-display);
	font-size: 1.25rem;
	line-height: 1;
	color: #fff;
	z-index: 2;
	pointer-events: none;
}