/* Sortenliste im Kaufbereich – Finding P-1 aus dem Review.

   Bei 93 Euro für 28 Kilogramm ist „was ist drin" die Kaufentscheidung. Der
   Inhalt stand bisher nur im Beschreibungs-Akkordeon hinter zwei Absätzen
   Fließtext, also hinter dem Warenkorb-Button. Hier steht er davor – als
   Faktenliste, nicht als Prosa.

   Zwei Spalten: Menge links, Sorte rechts. Die Menge ist die
   Vergleichsgröße, deshalb steht sie in der schmalen festen Spalte und
   fängt das Auge. */

/* Kein eigener Rahmen: In der Kaufkarte lag die Liste als weißer Kasten in
   einer weißen Fläche – eine Linie, die nichts trennt. Die Karte gliedert
   ihre Banden über Haarlinien, die Liste ist eine davon. */
.sorten {
	margin: 0;
}

.sorten__title {
	margin: 0 0 var(--ffg-space-2);
	color: var(--ffg-charcoal);
	font-size: var(--ffg-size-base);
	font-weight: 700;
}

.sorten__list {
	display: grid;
	gap: var(--ffg-space-2);
	margin: 0;
}

.sorten__list > div {
	display: grid;
	grid-template-columns: 4.75rem 1fr;
	gap: var(--ffg-space-2);
	align-items: baseline;
}

.sorten__list dt {
	color: var(--ffg-charcoal);
	font-size: var(--ffg-size-base);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.sorten__list dd {
	margin: 0;
	color: var(--ffg-text);
	font-size: var(--ffg-size-base);
	line-height: var(--ffg-lh-base);
}

/* Produktdaten. Dieselbe zweispaltige Anlage wie die Sortenliste darüber und
   wie Versand und Widerruf im Kaufbereich: Stichwort links in fester Spalte,
   Angabe rechts. Bei Tiefkühlware gehören Lagertemperatur und Haltbarkeit
   dazu – sie entscheiden mit, ob jemand Vorrat bestellt. */
.specs {
	display: grid;
	gap: var(--ffg-space-2);
	margin: 0;
}

.specs > div {
	display: grid;
	grid-template-columns: 9rem 1fr;
	gap: var(--ffg-space-2);
	align-items: baseline;
}

.specs dt {
	color: var(--ffg-charcoal);
	font-size: var(--ffg-size-base);
	font-weight: 700;
}

.specs dd {
	margin: 0;
	color: var(--ffg-text);
	font-size: var(--ffg-size-base);
	line-height: var(--ffg-lh-base);
}

/* Erst auf den schmalsten Geräten untereinander: zweispaltig bleibt die Liste
   halb so hoch, und „Zusammensetzung" ist das längste Stichwort. */
@media (max-width: 22rem) {
	.specs > div {
		grid-template-columns: 1fr;
		gap: var(--ffg-space-1);
	}
}