/* pair: eine Beschriftung und ihr Wert, die zusammengehören — „Energie" und
   „1561 kJ", „Gesamtmenge" und „320 g".

   Das ist keine zweispaltige Anordnung: Es gibt keine feste Spaltenbreite.
   Beide stehen nebeneinander, solange sie in eine Zeile passen; wird es zu
   eng, rutscht der Wert in die nächste Zeile. Nichts wird gedrückt,
   abgeschnitten oder springt hin und her.

   Deshalb ist das die einzige Bauform, in der bei 300 px zwei Dinge in einer
   Zeile stehen dürfen. Sobald ein dritter dazukäme, gilt wieder die Regel
   aus project-rules.md. */
.pair {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--space-3);
  row-gap: var(--space-05);
  min-width: 0;
}

/* Die Beschriftung darf wachsen und umbrechen, der Wert nicht — er ist kurz
   und soll am Stück lesbar bleiben. */
.pair__key {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}

.pair__value {
  flex: 0 0 auto;
  margin-left: auto;
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Werte, die Text sind statt einer Zahl mit Einheit — eine Marke etwa. Sie
   dürfen umbrechen; eine Zahl darf das nicht, die gehört zusammen. */
.pair__value--text {
  white-space: normal;
  text-align: right;
}

/* Rutscht der Wert um, steht er allein in seiner Zeile und beginnt links. */
.pair__value:only-child,
.pair__key + .pair__value {
  margin-left: auto;
}

/* Mehrere Paare untereinander, durch dünne Linien getrennt. */
.pair-list {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-block: var(--border-width) solid var(--color-border);
}

.pair-list .pair {
  padding-block: var(--space-2);
}

.pair-list .pair + .pair {
  border-block-start: var(--border-width) solid var(--color-border);
}

/* Untergeordnete Zeile, etwa „davon Zucker" unter „Kohlenhydrate". */
.pair--child .pair__key {
  padding-inline-start: var(--space-4);
}