/* ── Bonusprogramm ──────────────────────────────────────────────────────── */

/* Sammelpunkte standen live nur in der Notification-Bar – hier als eigener
   Abschlussblock. Foto: Platzhalter, bis die Shots aus dem Shooting da sind. */

.bonus {
	overflow: hidden;
	border-radius: var(--ffg-radius-card);
	background: var(--ffg-white);
	box-shadow: var(--ffg-shadow);
}

/* Kein min-height mehr: die Höhe kommt vom Text, das Bild folgt. Vorher trieb
   eine feste Blockhöhe das Foto in einen Hochkant-Crop und ließ daneben eine
   leere Fläche stehen. */

.bonus img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	object-position: center 35%;
}

.bonus__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: var(--ffg-space-4);
	padding: var(--ffg-space-8) var(--ffg-space-5);
}

.bonus__body p {
	margin: 0;
	max-width: 30rem;
}

.bonus__eyebrow {
	color: var(--ffg-brown-logo);
	font-size: var(--ffg-size-eyebrow);
	font-weight: 600;
	letter-spacing: var(--ffg-ls-eyebrow);
	text-transform: uppercase;
}

.bonus__lead {
	font-size: var(--ffg-size-lg);
	line-height: var(--ffg-lh-relaxed);
}

/* Die drei Schritte geben der Textspalte eine Aufgabe, statt sie mit Leerraum
   zu füllen – und beantworten die Frage, wofür die Punkte gut sind. */

.bonus__steps {
	display: grid;
	gap: var(--ffg-space-4);
	counter-reset: bonus;
	margin: var(--ffg-space-2) 0;
	padding: 0;
	max-width: 30rem;
	list-style: none;
}

.bonus__step {
	display: flex;
	align-items: baseline;
	gap: var(--ffg-space-3);
	font-size: var(--ffg-size-base);
}

.bonus__step::before {
	content: counter(bonus);
	counter-increment: bonus;
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	background: var(--ffg-beige);
	color: var(--ffg-charcoal);
	font-size: var(--ffg-size-sm);
	font-weight: 800;
}

.bonus__step strong {
	display: block;
	color: var(--ffg-charcoal);
}

@media (min-width: 62rem) {
	.bonus {
		display: grid;
		grid-template-columns: 1fr 1fr;
		align-items: stretch;
	}

	.bonus img {
		height: 100%;
		aspect-ratio: auto;
	}

	.bonus__body {
		padding: var(--ffg-space-12) var(--ffg-space-10);
	}
}