/*
 * JoNa Digital Solutions – Homepage Finaler CTA (JDS-11)
 * ===========================================================================
 * Abschluss der Startseite direkt vor dem globalen Footer: Eyebrow, H2 mit
 * grünem Akzent, Kurztext, drei neutrale Vertrauenspunkte und zwei CTAs auf
 * /kontakt/. Die Sektion selbst ist die dunkle Fläche – bewusst KEINE Card,
 * keine weiße Box, kein Glassmorphism, kein zweiter Hintergrund.
 * Ausschließlich Design-Tokens (--jds-*); nur HTML + CSS, kein JavaScript.
 *
 * Übergang zum Footer: Der Footer ist --jds-navy-deep. Damit beide dunklen
 * Bereiche visuell unterscheidbar bleiben, läuft die CTA-Fläche von
 * --jds-navy-deep (oben) zu --jds-navy-band (unten) und endet mit einer
 * dezenten hellen Trennlinie (--jds-border-on-dark). Kein neuer Farbwert.
 *
 * Kontrast (geprüft, siehe docs/HOMEPAGE-FINAL-CTA.md):
 *   Weiß auf Navy Deep/Band        >= 12.83:1
 *   Inverse-Muted auf Navy          9.65:1
 *   Green (Eyebrow) auf Navy Deep   5.16:1
 *   Weiß auf Green-Dark (Primary)   5.06:1
 *
 * Layout:
 *   Desktop >= 1000px : zweispaltig – links Eyebrow/Titel/Text,
 *                       rechts Vertrauenspunkte + CTAs
 *   Tablet 690–999px  : gestapelt, CTAs bleiben nebeneinander (wrap)
 *   Mobile   < 690px  : gestapelt, CTAs volle Breite, min. 48px Touchhöhe
 *
 * Version: 1.0.0
 */

/* ===========================================================================
 * DIVI-NEUTRALISIERUNG (nur wenn die Sektion vorhanden ist)
 * =========================================================================== */
.et_pb_section:has(.jds-final-cta) {
	padding: 0;
	border-bottom: var(--jds-border-width) solid var(--jds-border-on-dark);
	background-color: var(--jds-navy-band);
	background-image: linear-gradient(
		180deg,
		var(--jds-navy-deep) 0%,
		var(--jds-navy-band) 100%
	);
}

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

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

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

/* ===========================================================================
 * SEKTION
 * =========================================================================== */
.jds-final-cta {
	background-color: var(--jds-navy-band);
	background-image: linear-gradient(
		180deg,
		var(--jds-navy-deep) 0%,
		var(--jds-navy-band) 100%
	);
	color: var(--jds-text-inverse);
	/* Kompakt: dezenter Abschluss, kein zweiter Hero. */
	padding-block: var(--jds-section-space-sm);
	border-bottom: var(--jds-border-width) solid var(--jds-border-on-dark);
}

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

.jds-final-cta__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: var(--jds-grid-gap);
	align-items: start;
}

/* ===========================================================================
 * INHALT (links)
 * =========================================================================== */
.jds-final-cta__content {
	min-width: 0;
}

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

.jds-final-cta__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-text-inverse);
	text-wrap: balance;
	max-width: 22ch;
}

/* Green-Akzent als Teil der H2 (Fluss bleibt Text). */
.jds-final-cta__accent {
	color: var(--jds-green);
}

.jds-final-cta__text {
	margin: 0;
	max-width: var(--jds-measure-tight);
	color: var(--jds-text-inverse-muted);
	font-size: var(--jds-font-size-body);
	line-height: var(--jds-line-height-body);
}

/* ===========================================================================
 * ASIDE (rechts): Vertrauenspunkte + CTAs
 * =========================================================================== */
.jds-final-cta__aside {
	display: flex;
	flex-direction: column;
	gap: var(--jds-space-lg);
	min-width: 0;
}

.jds-final-cta__trust {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--jds-space-sm);
}

.jds-final-cta__trust-item {
	display: flex;
	align-items: center;
	gap: var(--jds-space-xs);
	color: var(--jds-text-inverse);
	font-size: var(--jds-font-size-body);
	line-height: var(--jds-line-height-ui);
}

/* Grüner Haken – rein per CSS, keine Icon-Library. */
.jds-final-cta__check {
	position: relative;
	display: inline-block;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	border-radius: var(--jds-radius-pill);
	background-color: var(--jds-accent-tint);
}

.jds-final-cta__check::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 4px;
	width: 7px;
	height: 4px;
	border-left: 2px solid var(--jds-green);
	border-bottom: 2px solid var(--jds-green);
	transform: rotate(-45deg);
}

.jds-final-cta__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--jds-space-md);
}

.jds-final-cta__cta {
	min-height: var(--jds-btn-min-height);
}

.jds-final-cta__cta-arrow {
	display: inline-block;
	transition: transform var(--jds-transition-fast);
}

.jds-final-cta__cta:hover .jds-final-cta__cta-arrow,
.jds-final-cta__cta:focus-visible .jds-final-cta__cta-arrow {
	transform: translateX(2px);
}

/* ===========================================================================
 * TABLET (690–999px): gestapelt, CTAs bleiben nebeneinander (wrap)
 * =========================================================================== */
@media (min-width: 690px) and (max-width: 999px) {
	.jds-final-cta {
		padding-block: var(--jds-section-space);
	}

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

	.jds-final-cta__title {
		max-width: 30ch;
	}

	.jds-final-cta__text {
		max-width: var(--jds-measure);
	}
}

/* ===========================================================================
 * MOBILE (< 690px): klar vertikal, CTAs volle Breite
 * =========================================================================== */
@media (max-width: 689px) {
	.jds-final-cta {
		padding-block: var(--jds-section-space-sm);
	}

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

	.jds-final-cta__title {
		max-width: none;
	}

	.jds-final-cta__text {
		max-width: none;
	}

	.jds-final-cta__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.jds-final-cta__cta {
		width: 100%;
	}
}