/* Vertikaler Abstand wird komplett vom .team-hero-inner-Padding gesteuert,
   nicht vom globalen "section { padding: var(--sectionPadding) }". */
.block-14-team-hero {
	padding-top: 0;
	padding-bottom: 0;
	position: relative;
	background: var(--black);
	overflow: hidden;
}

.block-14-team-hero .team-hero-bg {
	position: absolute;
	inset: 0;
}

.block-14-team-hero .team-hero-bgimg {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 35%;
	opacity: 0.32;
}

.block-14-team-hero .team-hero-gradient {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(23, 41, 51, 0.96) 0%, rgba(23, 41, 51, 0.82) 45%, rgba(23, 41, 51, 0.55) 100%);
}

.block-14-team-hero .team-hero-inner {
	position: relative;
	z-index: 3;
	display: flex;
	align-items: center;
	min-height: 600px;
	padding-top: 72px;
	padding-bottom: 72px;
}

/* Cutout ist jetzt direktes Kind der Section (nicht des .container), damit
   er nicht auf die 1170px-Containerbreite + Padding beschränkt ist, sondern
   bis zum echten Viewport-/Section-Rand gehen und größer sein kann. Breite in
   vw (Viewport), damit "größer" nicht automatisch "in den Text hinein"
   bedeutet — der Text bleibt im schmaleren .container auf der linken Seite. */
.block-14-team-hero .team-hero-cutout {
	position: absolute;
	right: 0;
	bottom: 0;
	width: min(50vw, 980px);
	height: 100%;
	object-fit: contain;
	object-position: bottom right;
	pointer-events: none;
	z-index: 1;
}

/* Läuft NICHT vom Text weg dunkel-zu-hell, sondern umgekehrt: links (Text)
   bleibt komplett klar, ab da wo das Bild anfängt wird's dunkler — blendet
   die linke Kante des Bilds in den Hintergrund statt den Text zu verdunkeln. */
.block-14-team-hero .team-hero-cutout-fade {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(90deg, rgba(23, 41, 51, 0) 0%, rgba(23, 41, 51, 0) 42%, rgba(23, 41, 51, 0.55) 58%, rgba(23, 41, 51, 0.3) 100%);
}

.block-14-team-hero .team-hero-content {
	position: relative;
	z-index: 3;
	max-width: 46%;
}

/* Nur die Hero-spezifischen Abweichungen vom globalen h1 (3rem/700/2.3) —
   Größe und Zeilenhöhe für ein großformatiges Hero-Headline. In rem statt px,
   damit die Schrift wie im Rest des Themes am 767px-Umbruch mitschrumpft
   (html { font-size: 10px → 9px }) — sonst wirkt der Hero-Text auf Mobile
   unproportional groß im Vergleich zum Rest der Seite. */
.block-14-team-hero h1 {
	font-size: 4.6rem;
	line-height: 1.15;
	color: #fff;
	margin-bottom: 2.4rem;
	text-wrap: balance;
}

/* line-height:inherit statt dem globalen "h1 span { line-height: 2.3 }" —
   sonst reißt der Zeilenabstand zwischen weißem und orangenem Text auseinander. */
.block-14-team-hero h1 span {
	line-height: inherit;
	padding: 0.2rem 1rem;
}

.block-14-team-hero p {
	font-size: 2rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.86);
	margin: 0;
}

/* Gleicher Umbruch (992px) wie die globalen h1/h2/h3-Anpassungen im Theme,
   damit Headline UND Fließtext gemeinsam und im selben Schritt schrumpfen. */
@media (max-width: 992px) {
	.block-14-team-hero h1 {
		font-size: 3.4rem;
	}

	.block-14-team-hero p {
		font-size: 1.8rem;
	}

	.block-14-team-hero .team-hero-inner {
		min-height: 460px;
		padding-top: 56px;
		padding-bottom: 56px;
	}
}

/* Unter 600px kein Overlay mehr: Bild bleibt sichtbar, wird aber als eigener
   Block UNTER dem Text gestapelt. column-reverse jetzt auf der SECTION
   selbst (Bild ist ihr direktes Kind, nicht mehr im .container), dreht die
   visuelle Reihenfolge — im DOM bleibt das Bild vor dem Text. So
   überschneiden sich Bild und Text auf schmalen Screens nie, und das Bild
   sitzt am unteren Rand. */
@media (max-width: 600px) {
	.block-14-team-hero {
		display: flex;
		flex-direction: column-reverse;
	}

	.block-14-team-hero .team-hero-inner {
		align-items: stretch;
		min-height: 0;
		padding-top: 32px;
		padding-bottom: 0;
	}

	.block-14-team-hero .team-hero-cutout {
		position: static;
		width: 100%;
		height: 280px;
		object-fit: contain;
		object-position: bottom center;
		margin-top: 24px;
	}

	.block-14-team-hero .team-hero-cutout-fade {
		display: none;
	}

	.block-14-team-hero .team-hero-content {
		max-width: none;
	}

	.block-14-team-hero h1 {
		font-size: 2.8rem;
	}

	.block-14-team-hero p {
		font-size: 1.7rem;
	}
}