/* ==========================================================================
   Zeitleiste (nummerierte Schritte mit senkrechter Linie), z. B. "Für Eigentümer"
   Aufbau im Divi Builder:
     Abschnitt  -> CSS-Klasse "zeitleiste"
     Zeile      -> CSS-Klasse "zeitleiste-schritt" (je Schritt eine Zeile: links Bild, rechts Text)
   Die Nummer im Kreis zählt automatisch (01, 02, …); die Linie verbindet jeden Kreis mit dem nächsten
   und endet nach dem letzten Schritt. Zeilen kopieren/löschen genügt, nichts ist von Hand zu nummerieren.
   ========================================================================== */

.zeitleiste {
	--zl-kreis: 80px;
	--zl-abstand: 64px;
	--zl-linie: rgba(5, 36, 83, 0.2);
	counter-reset: zeitleiste-schritt;
}

/* Divi legt zwischen den Zeilen eines Abschnitts selbst einen Abstand (60px) an; hier steuert allein --zl-abstand,
   damit die Linie exakt bis zum nächsten Kreis reicht. */
.zeitleiste.et_pb_section {
	row-gap: 0 !important;
}

.zeitleiste .et_pb_row.zeitleiste-schritt {
	position: relative;
	counter-increment: zeitleiste-schritt;
	/* Platz links für den Kreis (Kreis + 32px Luft) */
	padding-left: calc(var(--zl-kreis) + 32px) !important;
	margin-bottom: var(--zl-abstand) !important;
}

.zeitleiste .et_pb_row.zeitleiste-schritt:last-child {
	margin-bottom: 0 !important;
}

/* Kreis mit automatischer Nummer */
.zeitleiste .et_pb_row.zeitleiste-schritt::before {
	content: counter(zeitleiste-schritt, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 0;
	box-sizing: border-box;
	width: var(--zl-kreis);
	height: var(--zl-kreis);
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--color-primary);
	border-radius: 50%;
	background: var(--color-surface);
	color: var(--color-primary);
	font-family: var(--font-body);
	font-weight: var(--weight-light);
	font-size: 30px;
	line-height: 1;
	z-index: 1;
}

/* Linie vom Kreis bis zum Kreis des nächsten Schritts */
.zeitleiste .et_pb_row.zeitleiste-schritt::after {
	content: "";
	position: absolute;
	left: calc(var(--zl-kreis) / 2 - 0.5px);
	top: var(--zl-kreis);
	bottom: calc(var(--zl-abstand) * -1);
	width: 1px;
	background: var(--zl-linie);
}

/* Nach dem letzten Schritt keine Linie */
.zeitleiste .et_pb_row.zeitleiste-schritt:not(:has(~ .zeitleiste-schritt))::after {
	display: none;
}

/* Kleine Zeile über/unter der Überschrift (Eyebrow) in Backstein-Rot wie im Entwurf */
.zeitleiste .eyebrow {
	--eyebrow-farbe: var(--color-accent);
}

/* Bilder einheitlich im Format 4:3 */
.zeitleiste .zeitleiste-schritt .et_pb_image .et_pb_image_wrap,
.zeitleiste .zeitleiste-schritt .et_pb_image img {
	display: block;
	width: 100%;
}

.zeitleiste .zeitleiste-schritt .et_pb_image img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

@media (max-width: 767px) {
	.zeitleiste {
		--zl-kreis: 52px;
		--zl-abstand: 48px;
	}

	.zeitleiste .et_pb_row.zeitleiste-schritt {
		padding-left: calc(var(--zl-kreis) + 16px) !important;
	}

	.zeitleiste .et_pb_row.zeitleiste-schritt::before {
		font-size: 20px;
	}
}