/*
 * Komponente: Angebots-Infoseite (.angebot-*) – siehe CLAUDE.md Abschnitt 11.4.
 * Gemeinsames Gerüst der Mitmachen-Infoseiten, die vor dem jeweiligen
 * Bestellformular stehen: Herzensbaum (template-herzensbaum.php) und
 * Aufforstung (template-aufforstung.php), nach den Entwürfen
 * docs/1.Vorschlag Herzensbaum.png / docs/1.Vorschlag Aufforstung.png.
 * Ursprünglich als pages/herzensbaum.css angelegt, mit der Zweitnutzung zur
 * Komponente geworden (siehe CLAUDE.md Abschnitt 12) – wird wie map.css nur
 * auf diesen Seiten bedingt geladen (functions.php).
 *
 * Wiederverwendet werden .card, .mini-card.plain und .newsletter-banner; hier
 * stehen nur Anordnung, Bild/Text-Block, Foto-Banner und Preis-Kasten.
 */

.angebot h2 {
	color: var(--green-dark);
	font-size: 30px;
}

.angebot-intro {
	max-width: 620px;
	margin: 0 auto 40px;
	font-size: 17px;
}

/* ---------- Bild/Text-Block ---------- */
/* Cremefarbenes Panel, Text auf der einen, Foto auf der anderen Seite. Das
   Foto blendet zur Textseite hin weich aus (gleiche Masken-Technik wie
   .hero-img), wie im Entwurf. */
.angebot-split {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	background: var(--cream);
	border-radius: var(--radius-lg);
	overflow: hidden;
	margin-bottom: 48px;
}

.angebot-split.is-reversed {
	grid-template-columns: 1fr 1.15fr;
}

.angebot-split-text {
	padding: 40px 36px;
	align-self: center;
}

.angebot-split-img {
	min-height: 300px;
	background-size: cover;
	background-position: center;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
	mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
}

.angebot-split.is-reversed .angebot-split-img {
	-webkit-mask-image: none;
	mask-image: none;
}

/* ---------- Überschrift + Text mit großem Icon ---------- */
/* Standard: Icon links ("Dein Herzensbaum im Taunus"). Variante .is-panel:
   cremefarbenes Panel, Icon rechts ("Gemeinsam wächst Zukunft"). */
.angebot-iconhead {
	display: grid;
	grid-template-columns: 80px 1fr;
	gap: 24px;
	max-width: 900px;
	margin: 0 auto 28px;
}

.angebot-iconhead-icon {
	color: var(--green-dark);
}

.angebot-iconhead-icon svg {
	width: 64px;
	height: 64px;
}

.angebot-iconhead.is-panel {
	grid-template-columns: 1fr 80px;
	align-items: center;
	max-width: none;
	background: var(--cream);
	border-radius: var(--radius-lg);
	padding: 36px;
	margin-bottom: 18px;
}

.angebot-iconhead.is-panel .angebot-iconhead-icon {
	order: 2;
}

/* ---------- Foto-Banner ---------- */
/* Breites, flaches Foto über die volle Inhaltsbreite (Aufforstungsfläche,
   Wuchshüllen). Ausschnitt per background-position inline im Template. */
.angebot-banner {
	height: 280px;
	border-radius: var(--radius-lg);
	background-size: cover;
	background-position: center;
	margin-bottom: 40px;
}

/* ---------- Texte, Icon-Reihe ---------- */
.angebot-text {
	max-width: 900px;
	margin: 0 auto 40px;
}

.angebot-text > p + p {
	margin-top: 14px;
}

.angebot-features {
	max-width: 900px;
	margin: 0 auto 48px;
}

/* Drei statt vier Icons (Seite "Im Wald mit anpacken"). */
.angebot-features.cols-3 {
	grid-template-columns: repeat(3, 1fr);
}

/* Cremefarbenes Panel um Text + Icon-Reihe ("Waldpflege und
   Pflanzaktionen"), gleiche Fläche wie .angebot-iconhead.is-panel. */
.angebot-panel {
	background: var(--cream);
	border-radius: var(--radius-lg);
	padding: 36px 36px 8px;
	margin-bottom: 18px;
}

.angebot-panel .angebot-text {
	margin-bottom: 28px;
}

.angebot-panel .angebot-features {
	margin-bottom: 28px;
}

/* ---------- Zwei Spalten mit Icon (Einsatzarten) ---------- */
/* Icon links, Titel + Text rechts, Spalten durch eine feine Linie getrennt
   ("Pflanzaktionen" | "Waldpflegeaktionen" auf der Unternehmens-Seite). */
.angebot-columns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	max-width: 900px;
	margin: -16px auto 48px;
}

.angebot-column {
	display: grid;
	grid-template-columns: 52px 1fr;
	gap: 16px;
	padding: 0 28px;
}

.angebot-column:first-child {
	padding-left: 0;
}

.angebot-column + .angebot-column {
	border-left: 1px solid var(--line);
	padding-right: 0;
}

.angebot-column-icon {
	color: var(--green-dark);
}

.angebot-column-icon svg {
	width: 44px;
	height: 48px;
}

.angebot-column h3 {
	color: var(--green-dark);
	font-size: 18px;
	margin-bottom: 8px;
}

/* ---------- Preis-/Aktions-Kasten ---------- */
/* .newsletter-banner ohne Foto-Spalte, großes Icon statt Icon-Kreis. */
.angebot-preis {
	max-width: 900px;
	margin: 0 auto 54px;
	grid-template-columns: auto 1fr;
	gap: 36px;
	padding: 32px 48px;
}

.angebot-preis-icon {
	color: var(--green-dark);
}

.angebot-preis-icon svg {
	width: 80px;
	height: 94px;
}

.angebot-preis-icon.is-wide svg {
	width: 110px;
	height: 88px;
}

.angebot-preis h3 {
	color: var(--green-dark);
	margin-bottom: 4px;
}

.angebot-preis-betrag {
	display: block;
	font-size: 30px;
	color: var(--green-dark);
	margin-bottom: 8px;
}

/* ---------- Noch mehr Möglichkeiten (template-parts/mitmachen-weitere.php) ---------- */
.angebot-weitere {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-top: 18px;
}

.angebot-weitere .card {
	min-height: 0;
}

.angebot-weitere .card-img {
	height: 140px;
}

/* Breakpoint 900px – siehe CLAUDE.md Abschnitt 11.3 */
@media (max-width: 900px) {
	.angebot-split,
	.angebot-split.is-reversed {
		grid-template-columns: 1fr;
	}

	/* Foto immer über dem Text, ohne seitliche Ausblendung. */
	.angebot-split-img {
		order: -1;
		min-height: 220px;
		-webkit-mask-image: none;
		mask-image: none;
	}

	.angebot-banner {
		height: 220px;
	}

	.angebot-columns {
		grid-template-columns: 1fr;
		row-gap: 24px;
	}

	.angebot-column,
	.angebot-column:first-child {
		padding: 0;
	}

	.angebot-column + .angebot-column {
		border-left: none;
		border-top: 1px solid var(--line);
		padding-top: 24px;
	}

	.angebot-features {
		grid-template-columns: repeat(2, 1fr);
		row-gap: 24px;
	}

	.angebot-preis {
		grid-template-columns: 1fr;
		padding: 28px 22px;
	}

	.angebot-preis-icon {
		margin: 0 auto;
	}

	.angebot-weitere {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Breakpoint 600px – siehe CLAUDE.md Abschnitt 11.3 */
@media (max-width: 600px) {
	.angebot h2 {
		font-size: 26px;
	}

	.angebot-split-text {
		padding: 26px 22px;
	}

	.angebot-iconhead,
	.angebot-iconhead.is-panel {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.angebot-iconhead.is-panel {
		padding: 26px 22px;
	}

	/* Icon auch in der Panel-Variante über dem Text. */
	.angebot-iconhead.is-panel .angebot-iconhead-icon {
		order: 0;
	}

	.angebot-iconhead-icon svg {
		width: 48px;
		height: 48px;
	}

	.angebot-banner {
		height: 180px;
	}

	.angebot-panel {
		padding: 26px 22px 4px;
	}

	.angebot-features.cols-3 {
		grid-template-columns: 1fr;
	}

	.angebot-weitere {
		grid-template-columns: 1fr;
	}
}