/**
*  Einführung unter dem Hero (Design V3)
*
*  Bis 991px: Haupttext, darunter die Seitenspalte mit Linie oben.
*  Ab 992px: zwei Spalten im Verhältnis 62 : 38, getrennt durch eine senkrechte Linie.
*
*  Kontraste (WCAG AA, geprüft, auf --paper):
*  - Eyebrow --fresh-3: 4,5 : 1
*  - Titel   --ink-navy: 15 : 1
*  - Text    --ink-navy-soft: 12 : 1
**/

.c-intro {
	padding-block: var(--space-xl);
	background: var(--paper);
}

.c-intro__inner {
	display: grid;
	gap: var(--space-l);
}

.c-intro__main,
.c-intro__aside {
	min-inline-size: 0;
}

.c-intro__eyebrow {
	--eyebrow-color: var(--fresh-3);
	margin-block-end: var(--space-2xs);
}

.c-intro__title,
.c-intro__subtitle {
	margin: 0;
	color: var(--ink-navy);
	font-family: var(--font-editorial);
	font-weight: 700;
	letter-spacing: var(--ls-h2);
	text-wrap: balance;
}

.c-intro__title {
	font-size: clamp(1.625rem, 1.3rem + 1.5vw, 2.5rem);
	line-height: var(--lh-h1);
}

.c-intro__subtitle {
	font-size: var(--fs-h2);
	line-height: var(--lh-h2);
}

.c-intro__text {
	margin: var(--space-s) 0 0;
	padding: 0;
	color: var(--ink-navy-soft);
	font-family: var(--font-editorial);
	font-size: var(--fs-0);
	line-height: var(--lh-body);
}

.c-intro__portrait {
	display: block;
	float: right;
	inline-size: 50%;
	block-size: auto;
	aspect-ratio: 1 / 1;
	margin: 0 0 var(--space-s) var(--space-s);
	border-radius: 50%;
	object-fit: cover;
}

/* Rutscht die Seitenspalte nach unten, wird sie eingerückt. */
.c-intro__aside {
	display: flow-root;
	margin-inline-start: 3em;
	padding-block-start: var(--space-l);
	border-block-start: 1px solid color-mix(in srgb, var(--ink-navy) 15%, transparent);
}

@media (min-width: 992px) {

	.c-intro__inner {
		grid-template-columns: minmax(0, 62fr) minmax(0, 38fr);
		gap: 0;
	}

	.c-intro__main {
		padding-inline-end: var(--space-xl);
	}

	/* Schmale Spalte: Porträt kleiner, rechtsbündig über dem Text statt daneben. */
	.c-intro__portrait {
		float: none;
		inline-size: 40%;
		margin: 0 0 var(--space-m) auto;
	}

	.c-intro__aside {
		margin-inline-start: 0;
		padding-block-start: 0;
		padding-inline-start: var(--space-l);
		border-block-start: 0;
		border-inline-start: 1px solid color-mix(in srgb, var(--ink-navy) 15%, transparent);
	}
}