/* Badge – kurze Auszeichnung an Bild, Karte oder Kasten: „Preishammer“,
   „Bestseller“, „Neu“, „-10 %“.
   Vorher lagen drei Fassungen da: „.badge“ auf der Produktseite, „.productcard__badge“
   in der Produktkarte, „.pickup__tag“ im Abholkasten – drei Innenabstände,
   zwei Laufweiten, zweierlei Groß- und Kleinschreibung. */

.badge {
	display: inline-block;
	padding: var(--ffg-space-1) var(--ffg-space-2-5);
	border-radius: var(--ffg-radius);
	background: var(--ffg-red);
	color: var(--ffg-white);
	font-size: var(--ffg-size-xs);
	font-weight: 700;
	letter-spacing: var(--ffg-ls-badge);
	line-height: 1.4;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Grün für den zweiten Zustand neben dem roten Aktionshinweis, etwa
   „Sofort lieferbar“ neben „Preishammer“. */
.badge--stock {
	background: var(--ffg-green);
}

/* Braun für die entschärften Fälle: MHD-Ware, Restposten. */
.badge--muted {
	background: var(--ffg-brown-logo);
}

/* Auf hellem Grund innerhalb des dunklen Abholkastens bleibt Rot lesbar –
   dort braucht das Badge nur Abstand nach unten. */
.badge--block {
	margin-bottom: var(--ffg-space-2);
}

/* Über dem Produktbild sitzt das Badge absolut; die Position kommt aus der
   jeweiligen Karte, hier steht nur der gemeinsame Stapelabstand. */
.badges {
	position: absolute;
	top: var(--ffg-space-3);
	left: var(--ffg-space-3);
	z-index: 1;
	display: flex;
	gap: var(--ffg-space-2);
	flex-wrap: wrap;
}