/*
 * en2x Text 2-Spaltig – structural styles.
 *
 * Centered headline (colour inline per instance), a horizontal divider, then two
 * text columns. The "meet in the middle" alignment (col 1 right, col 2 left) is
 * applied here for desktop and automatically becomes left-aligned for BOTH
 * columns on mobile, so editors never set a text alignment manually. Side gutter
 * aligns to the container edge in full-width rows. Font inherited (Rubik).
 */

.en2x-text2 {
	margin: 0 var(--en2x-side-gutter, 20px) 40px;
	box-sizing: border-box;
	font-family: inherit;
}

.en2x-text2__headline {
	margin: 0 0 24px;
	font-size: clamp(26px, 3.4vw, 38px);
	font-weight: 600;
	line-height: 1.15;
	text-align: center;
	text-transform: uppercase;
	color: inherit;
}

.en2x-text2__divider {
	margin: 0 0 36px;
	border: 0;
	border-top: 1px solid rgba(37, 15, 81, 0.14);
	height: 0;
}

.en2x-text2__cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px 64px;
}

.en2x-text2__col {
	min-width: 0;
	font-size: 16px;
	line-height: 1.7;
	color: inherit;
}

.en2x-text2__col p {
	margin: 0 0 16px;
}

.en2x-text2__col :last-child {
	margin-bottom: 0;
}

.en2x-text2__col a {
	color: var(--en2x-color-primary, #221182);
}

/* "Zur Mitte": first column right-aligned, last column left-aligned (desktop).
 * Targeting the direct grid children (first/last) is robust regardless of any
 * element wrapper. The "links" variant leaves both at the default left. */
.en2x-text2--mitte .en2x-text2__cols > :first-child {
	text-align: right;
}

.en2x-text2--mitte .en2x-text2__cols > :last-child {
	text-align: left;
}

/* ---------------------------------------------------------------------------
 * Mobile: stack columns; alignment per the "Ausrichtung (Mobil)" option
 * (default left, optionally centered). !important is used because a media query
 * does not raise specificity over the desktop alignment rules above.
 * ------------------------------------------------------------------------- */

@media (max-width: 768px) {
	.en2x-text2__cols {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	/* Default: headline + both columns left-aligned. */
	.en2x-text2--mobil-links .en2x-text2__headline,
	.en2x-text2--mobil-links .en2x-text2__cols > * {
		text-align: left !important;
	}

	/* Option "Zentriert": headline + both columns centered. */
	.en2x-text2--mobil-zentriert .en2x-text2__headline,
	.en2x-text2--mobil-zentriert .en2x-text2__cols > * {
		text-align: center !important;
	}
}