/*
 * JoNa Digital Solutions – Homepage Arbeitsweise (JDS-10)
 * ===========================================================================
 * Ruhige Sektion unter den Projekten: Intro + drei Prozessschritte als echte
 * geordnete Liste. Bewusst KEINE Cards, KEINE Icons, KEIN CTA, KEIN Hover –
 * visuelles Leitsystem sind die nummerierten Kreise.
 * Ausschließlich Design-Tokens (--jds-*); nur HTML + CSS, kein JavaScript.
 *
 * Layout:
 *   Desktop >= 1000px : 3 Schritte horizontal mit feiner Verbindungslinie
 *   Tablet 690–999px  : gestapelt, ohne Verbindung
 *   Mobile   < 690px  : gestapelt, ohne Verbindung
 *
 * Version: 0.9.0
 */

/* ===========================================================================
 * DIVI-NEUTRALISIERUNG (nur wenn die Sektion vorhanden ist)
 * =========================================================================== */
.et_pb_section:has(.jds-workflow) {
	padding: 0;
	background-color: var(--jds-bg-soft);
}

.et_pb_section:has(.jds-workflow) > .et_pb_row {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}

.et_pb_section:has(.jds-workflow) .et_pb_column {
	margin: 0;
	padding: 0;
}

.et_pb_section:has(.jds-workflow) .et_pb_code_inner {
	width: 100%;
}

/* ===========================================================================
 * SEKTION
 * =========================================================================== */
.jds-workflow {
	background-color: var(--jds-bg-soft);
	color: var(--jds-text);
	/* Bewusst kompakt (kein Hero-Maß). */
	padding-block: var(--jds-section-space-sm);
}

.jds-workflow *,
.jds-workflow *::before,
.jds-workflow *::after {
	box-sizing: border-box;
}

/* ===========================================================================
 * INTRO
 * =========================================================================== */
.jds-workflow__intro {
	max-width: var(--jds-content-text);
	margin: 0 0 var(--jds-space-2xl);
}

.jds-workflow__eyebrow {
	margin: 0 0 var(--jds-space-md);
	color: var(--jds-green-dark);
}

.jds-workflow__title {
	margin: 0 0 var(--jds-space-md);
	font-size: var(--jds-font-size-h2);
	line-height: var(--jds-line-height-h2);
	letter-spacing: var(--jds-letter-spacing-h2);
	color: var(--jds-heading);
	text-wrap: balance;
}

.jds-workflow__lead {
	margin: 0;
	color: var(--jds-text-muted);
	font-size: var(--jds-font-size-body-lg);
	line-height: var(--jds-line-height-body-lg);
}

/* ===========================================================================
 * PROZESS (offene Items, bewusst ohne Card-Box)
 * =========================================================================== */
.jds-workflow__steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--jds-grid-gap);
	align-items: start;
	margin: 0;
	padding: 0;
	list-style: none;
}

.jds-workflow-step {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: var(--jds-space-md);
}

/* Nummernkreis: Grundlage ist das bestehende Process-Index-Token. */
.jds-workflow-step__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--jds-card-process-index-size);
	height: var(--jds-card-process-index-size);
	flex: 0 0 auto;
	border-radius: var(--jds-radius-pill);
	background-color: var(--jds-navy);
	color: var(--jds-text-inverse);
	font-family: var(--jds-font-mono);
	font-size: var(--jds-font-size-body-sm);
	font-weight: var(--jds-font-weight-semibold);
	line-height: var(--jds-line-height-ui);
}

.jds-workflow-step__body {
	min-width: 0;
}

.jds-workflow-step__title {
	margin: 0 0 var(--jds-space-xs);
	font-size: var(--jds-font-size-h4);
	line-height: var(--jds-line-height-h4);
	font-weight: var(--jds-font-weight-semibold);
	color: var(--jds-heading);
}

.jds-workflow-step__text {
	margin: 0;
	color: var(--jds-text-muted);
	font-size: var(--jds-font-size-body);
	line-height: var(--jds-line-height-body);
}

/* Dezente Verbindung nur auf Desktop: feine Linie zwischen den Schritten. */
.jds-workflow-step:not(:last-child)::after {
	content: "";
	position: absolute;
	top: calc(var(--jds-card-process-index-size) / 2);
	right: calc(-1 * var(--jds-grid-gap) / 2 - 10px);
	width: 20px;
	height: 1px;
	background-color: var(--jds-border-strong);
}

/* ===========================================================================
 * TABLET (690–999px): gestapelt, ohne Verbindung
 * =========================================================================== */
@media (min-width: 690px) and (max-width: 999px) {
	.jds-workflow {
		padding-block: var(--jds-section-space-sm);
	}

	.jds-workflow__intro {
		margin-bottom: var(--jds-space-xl);
	}

	.jds-workflow__steps {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--jds-space-xl);
	}

	.jds-workflow-step:not(:last-child)::after {
		content: none;
	}
}

/* ===========================================================================
 * MOBILE (< 690px): klar vertikal, ohne Verbindung
 * =========================================================================== */
@media (max-width: 689px) {
	.jds-workflow {
		padding-block: var(--jds-space-2xl);
	}

	.jds-workflow__intro {
		margin-bottom: var(--jds-space-xl);
	}

	.jds-workflow__steps {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--jds-space-lg);
	}

	.jds-workflow-step:not(:last-child)::after {
		content: none;
	}

	.jds-workflow-step {
		gap: var(--jds-space-sm);
	}
}