/* record-list: eine Liste von Datensätzen als Karten — Produkte, Rezepte,
   was auch immer eine Übersicht braucht.

   Je Karte: ein Name, darunter eine leise Unterzeile, darunter die Angaben,
   jede in einer eigenen Zeile. Alles einspaltig — bei 300px ist für zwei
   Spalten kein Platz, und sobald ein Wert in der Länge schwankt, drückt er
   den anderen weg. Siehe project-rules.md.

   Die Karte ist ein einziger Link, damit am Handy die ganze Fläche trifft. */
.record-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

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

@media (hover: hover) {
  .record:hover { border-color: var(--color-border-strong); }
}

/* Beim Antippen ändert sich die Fläche, nicht nur der Rand — ein Rand von
   einem Pixel sieht man unter dem Finger nicht. */
.record:active {
  border-color: var(--color-border-strong);
  background: var(--color-surface-muted);
}

.record:focus-visible {
  outline: var(--focus-ring) solid var(--color-focus);
  outline-offset: var(--focus-offset);
}

.record__name {
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
}

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

/* Wertezeilen: je Angabe eine eigene Zeile, Beschriftung und Wert
   untereinander wären zu viel Höhe — deshalb steht die Beschriftung im
   Satz mit, nicht als eigene Spalte. */
.record__facts {
  display: flex;
  flex-direction: column;
  gap: var(--space-05);
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.record__value {
  font-weight: var(--weight-medium);
  color: var(--color-text);
}

/* Eine einzelne Angabe, die auffallen soll — etwa nova 4 bei einem Produkt. */
.record__fact--alert .record__value { color: var(--color-danger); }