/*
 * intro.css — Geteilte Intro-Section (.tintro).
 *
 * WARUM (23.07.2026): Loest .uinfo (template-parts/ueberuns/info.php,
 * zweispaltig ab 1024px) und .cinfo (template-parts/karriere/info.php,
 * zweispaltig ab 900px) ab. Referenz ist .kinfo__title-area auf der
 * Kompetenzseite: Eyebrow, Titel und Fliesstext immer untereinander,
 * nie nebeneinander.
 *
 * Breite: .content-band aus global.css — kein Eintrag in layout.css noetig.
 *
 * Laedt nach components.css (siehe functions.php).
 */

/* ------------------------------------------------------------------ */
/*  Wrapper                                                             */
/* ------------------------------------------------------------------ */

.tintro {
	padding-block: var(--space-8);
	background-color: var(--color-bg);
}

/* ------------------------------------------------------------------ */
/*  Inneres Layout                                                      */
/* ------------------------------------------------------------------ */

.tintro__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
	max-width: 60%;
}

/* ------------------------------------------------------------------ */
/*  Titel-Bereich: Eyebrow + H2 untereinander                          */
/* ------------------------------------------------------------------ */

.tintro__title-area {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.tintro__eyebrow {
	font-family: var(--font-heading);
	font-size: var(--fs-heading-5xs);
	line-height: var(--lh-heading-5xs);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--tracking-tight);
	color: var(--color-accent);
	margin: 0;
}

.tintro__title {
	color: var(--color-text);
	margin: 0;
}

/* ------------------------------------------------------------------ */
/*  Fliesstext                                                          */
/* ------------------------------------------------------------------ */

.tintro__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

/* Absatzgruppe: enger intern, mehr Luft aussen (gap vom parent). */
.tintro__group {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.tintro__p {
	font-family: var(--font-body);
	font-size: var(--fs-body-m);
	line-height: var(--lh-body-m);
	letter-spacing: var(--tracking-tight);
	color: var(--color-text);
	margin: 0;
}

/* ------------------------------------------------------------------ */
/*  Desktop                                                             */
/* ------------------------------------------------------------------ */

@media (min-width: 1024px) {
	.tintro {
		padding-block: var(--space-9);
	}
}