/* Redaktioneller Block – Bild neben Text, abwechselnd gespiegelt. Steht auf
   der Kategorieseite unter dem Raster (der SEO-Text der Live-Seite, aber mit
   Flächen und Bildern statt als Textwand) und seit dem 16. September 2026 auch
   auf der Produktseite: am Desktop lief der Kaufbereich sonst ins Leere.

   Das Motiv füllt seine Spalte, der Text steht daneben und bricht auf dem
   Handy darunter um. */

.editorial {
	display: grid;
	gap: var(--ffg-space-6);
	margin-top: var(--ffg-space-10);
}

/* Nur das Motiv, nicht jedes Bild im Abschnitt: als „.editorial img“ traf die
   Regel auch das Symbol im Hinweiskasten und blies es auf volle Spaltenbreite
   auf – der Text daneben wurde aus der Seite gedrückt. */
.editorial__media img {
	width: 100%;
	height: 100%;
	min-height: 12rem;
	object-fit: cover;
	border-radius: var(--ffg-radius-card);
}

.editorial__body h2 {
	margin: 0;
}

.editorial__body p {
	margin: var(--ffg-space-3) 0 0;
	max-width: 38rem;
}

.editorial__list {
	margin: var(--ffg-space-3) 0 0;
	padding: 0;
	list-style: none;
}

.editorial__list li {
	display: flex;
	gap: var(--ffg-space-2-5);
	margin-top: var(--ffg-space-2);
	font-size: var(--ffg-size-base);
}

.editorial__list li::before {
	content: "✓";
	flex: 0 0 auto;
	color: var(--ffg-green);
	font-weight: 700;
}

/* Weiß mit brauner Kante wie der Lieferkasten der Produktseite. Bis zum
   6. Oktober 2026 rosa – der Kunde wollte Braun statt Rosa-Rot. */
.editorial__hint {
	margin: var(--ffg-space-3) 0 0;
	padding: var(--ffg-space-3) var(--ffg-space-4);
	border-left: 0.1875rem solid var(--ffg-brown-logo);
	border-radius: var(--ffg-radius);
	background: var(--ffg-white);
	color: var(--ffg-charcoal);
	font-size: var(--ffg-size-sm);
}

@media (min-width: 62rem) {
	.editorial {
		grid-template-columns: 1fr 1fr;
		gap: var(--ffg-space-12);
		align-items: center;
	}

	.editorial--flip .editorial__media {
		order: -1;
	}
}