/* ingredient: eine Zutat einer Umsetzung — welches Produkt, wie viel davon,
   und der Weg, es wieder zu entfernen.

   Kompakt gehalten: Ein Rezept hat schnell zehn Zutaten, und jede Karte, die
   drei Zeilen zu viel hat, kostet zehnmal drei Zeilen. Deshalb Name, Marke
   und Menge dicht untereinander und der Entfernen-Knopf klein daneben — er
   wird selten gebraucht. */
.ingredient-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.ingredient {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
  padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.ingredient__name {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  color: var(--color-text);
  text-decoration: none;
}

@media (hover: hover) {
  .ingredient__name:hover { text-decoration: underline; }
}

.ingredient__name:active { text-decoration: underline; }

.ingredient__sub {
  font-size: var(--text-sm);
  line-height: var(--leading-tight);
  color: var(--color-text-muted);
}

/* Aktionen der Karte in einer eigenen Reihe — über oder unter dem Inhalt,
   nie neben dem Namen, weil Namen lang werden.

   Ein Symbolknopf ist 44 px hoch und breit, das Symbol darin nur 18. Der
   Überstand wird ringsum herausgerechnet: die Reihe kostet dann so viel
   Platz wie das Symbol, die Trefferfläche bleibt volle 44 px und ragt
   unsichtbar in die Polsterung der Karte. */
.ingredient__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-1);
  margin-block: var(--control-flush);
  margin-inline-end: var(--control-flush);
}