/**
*  Hero der Magazinseite
*
*  Mobil und Tablet: Bild als Hintergrund, dunkle Abdunklung, helle Schrift.
*  Ab 992px: heller Verlauf von links, dunkle Schrift.
*
*  Kontraste (WCAG AA, geprüft):
*  - Eyebrow --fresh-3 auf --paper-white: 4,9 : 1
*  - Titel   --ink-navy auf --paper-white: 16 : 1
*  - Button  --paper-white auf --warm-2: 4,6 : 1
*  - Helle Schrift auf Abdunklung (72 % --cool-2) auch über weißen Bildpartien > 6 : 1
**/

.c-hero {
	--hero-text: var(--paper-white);
	--eyebrow-color: var(--paper-white);
	position: relative;
	isolation: isolate;
	display: grid;
	align-items: end;
	min-block-size: 30rem;
	padding-block: var(--space-xl);
	background: var(--cool-2);
	color: var(--hero-text);
	overflow: clip;
}

.c-hero__image {
	position: absolute;
	inset: 0;
	z-index: -2;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: 55% 75%;
}

/* Abdunklung für den Textkontrast */
.c-hero--image::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: color-mix(in srgb, var(--cool-2) 72%, transparent);
}

.c-hero__inner {
	max-inline-size: var(--container-max-width);
}

.c-hero__eyebrow {
	margin-block-end: var(--space-xs);
}

.c-hero__title {
	max-inline-size: 14ch;
	margin: 0;
	padding-inline-start: var(--space-s);
	border-inline-start: 4px solid var(--stripe);
	color: var(--hero-text);
	font-family: var(--font-editorial);
	font-size: var(--fs-h1);
	font-weight: 800;
	letter-spacing: var(--ls-h1);
	line-height: var(--lh-h1);
	text-wrap: balance;
}

.c-hero__lead {
	max-inline-size: 34rem;
	margin: var(--space-s) 0 0;
	color: var(--hero-text);
}

.c-hero__button {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	margin-block-start: var(--space-m);
	padding: 0.75em 1.25em;
	border-radius: var(--border-radius);
	background: var(--warm-2);
	color: var(--paper-white);
	font-family: var(--font-interface);
	font-size: var(--fs-0);
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	transition: background 0.3s ease-out;

	&::after {
		content: "→";
		content: "→" / "";
	}

	&:hover {
		background: var(--warm-3);
	}

	&:focus-visible {
		outline: 3px solid var(--paper-white);
		outline-offset: 2px;
		box-shadow: 0 0 0 6px var(--cool-1);
	}
}

@media (min-width: 992px) {

	.c-hero {
		--hero-text: var(--ink-navy);
		--eyebrow-color: var(--fresh-3);
		align-items: center;
		min-block-size: 34rem;
		background: var(--paper-white);
	}

	/* Bild nimmt die rechte Seite ein, links läuft es weich in das Papier aus. */
	.c-hero--image::before {
		background: linear-gradient(
			90deg,
			var(--paper-white) 0,
			var(--paper-white) 38%,
			color-mix(in srgb, var(--paper-white) 0%, transparent) 50%
		);
	}

	.c-hero__image {
		inset-inline-start: 38%;
		inline-size: 62%;
		object-position: 50% 85%;
	}
}