/*
 * Komponente: Hero (.hero) – siehe CLAUDE.md Abschnitt 11.4. Ursprünglich
 * seitenspezifisch in pages/front-page.css, seit 2026-08-19 auch auf der
 * Neuigkeiten-Seite (home.php) genutzt – gemäß CLAUDE.md Abschnitt 12
 * wandert ein zweitfach genutztes Muster von pages/ nach components/.
 *
 * Foto+Verlauf-Technik 1:1 aus dem Original-Design-Entwurf übernommen:
 * .hero-img rechts positioniert, dunkler Verlauf von links darüber, damit
 * der linksbündige Hero-Text lesbar bleibt (siehe CLAUDE.md Abschnitt 8).
 * .hero-actions/.hero-note sind optional – Seiten ohne CTA-Buttons/Hinweis
 * lassen die Elemente im Markup einfach weg.
 */
.hero {
	position: relative;
	min-height: 330px;
	background: #173d18;
	color: #fff;
	overflow: hidden;
}

.hero-img {
	position: absolute;
	right: 0;
	top: 0;
	width: 63%;
	height: 100%;
	object-fit: cover;
	/* Weicher Übergang an der linken Bildkante: Der Verlauf in .hero::before
	   ist dort noch nicht ganz deckend und sein Grünton weicht leicht vom
	   .hero-Hintergrund ab, wodurch die Kante sonst als harte Linie sichtbar
	   bleibt. Die Maske blendet das Foto selbst nach links hin aus. */
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%);
	mask-image: linear-gradient(90deg, transparent 0%, #000 10%);
}

.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(90deg, rgba(15, 45, 14, .98) 0%, rgba(15, 45, 14, .88) 42%, rgba(15, 45, 14, .2) 65%, rgba(15, 45, 14, .05) 100%);
}

.hero .wrap {
	position: relative;
	z-index: 2;
	padding: 45px 0;
}

.hero-copy {
	max-width: 520px;
}

.hero h1 {
	/* Bewusst die einzige Stelle im Theme mit --font-hero (Caveat) – siehe
	   assets/css/base/fonts.css und CLAUDE.md Abschnitt 11.2. Gilt für jede
	   .hero-h1, unabhängig davon auf wie vielen Seiten die Komponente
	   inzwischen eingesetzt wird – nur außerhalb von .hero weiterhin nicht
	   ohne Rücksprache verwenden. */
	font-family: var(--font-hero);
	font-size: 52px;
	line-height: 1.02;
	margin: 0 0 18px;
	font-weight: 700;
	color: #fff;
}

.hero p {
	font-size: 17px;
	max-width: 470px;
	margin: 0 0 22px;
	color: rgba(255, 255, 255, .88);
}

/* Fett gesetzte Unterzeile direkt unter der Überschrift - Flächen-Detailseite
   ("266 Zukunftsbäume. …") und Herzensbaum-Infoseite ("Ein Baum, der von
   Herzen kommt."). */
.hero p.hero-tagline {
	margin: 0 0 12px;
	font-size: 18px;
	font-weight: 700;
	color: #fff;
}

.hero-actions {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}

.hero-note {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 22px;
	font-size: 13px;
	opacity: .92;
}

.hero-note-icon {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
}

/* Primary-Button innerhalb eines Foto-Hero: die sitebreite .cta.primary-Farbe
   (--green, siehe components/buttons.css) geht auf dem dunkelgrünen
   Foto-Hintergrund optisch unter. --green3 (heller, wärmerer Olivton, siehe
   style.css) sorgt hier für mehr Kontrast/Pop; bewusst nur hier per
   Nachfahren-Selektor überschrieben statt sitebreit, da --green auf hellen
   Sections (Kachel-/Newsletter-CTAs) weiterhin die richtige Wahl bleibt.
   Hover geht in die andere Richtung (--green, dunkler) statt in --green-dark,
   damit auch der Hover-Zustand innerhalb der bestehenden Palette bleibt. */
.hero-actions .cta.primary {
	background: var(--green3);
	border-color: var(--green3);
}

.hero-actions .cta.primary:hover {
	background: var(--green);
	border-color: var(--green);
}

/* Breakpoint 900px – siehe CLAUDE.md Abschnitt 11.3 */
@media (max-width: 900px) {
	.hero-img {
		width: 100%;
		opacity: .55;
		/* Bild füllt hier die volle Breite, es gibt keine sichtbare Kante. */
		-webkit-mask-image: none;
		mask-image: none;
	}

	.hero::before {
		background: linear-gradient(90deg, rgba(15, 45, 14, .96), rgba(15, 45, 14, .7));
	}

	.hero h1 {
		font-size: 42px;
	}
}