Rezeptseite: Portionen drehen laesst die Seite stehen

Bisher setzte jede Aenderung an den Portionen das Rezept auf null - die
ganze rechte Karte verschwand und zeigte "Links ein Rezept waehlen",
bevor sie neu aufbaute. Bei einem Druck auf den Zahlenpfeil ist das ein
Flackern, bei getippten Zahlen dreimal hintereinander.

Jetzt bleibt stehen, was sich nicht aendert: Rezeptname, Portionenfeld
und die Zutatenliste. Nur die drei Wertespalten (Gebraucht, Im Haus,
Zustand) sind waehrend des Rechnens unklar und zeigen einen schimmernden
Platzhalter; das Ergebnis blendet sich danach ein (.wert-ein, 0.28s, mit
Ruecksicht auf prefers-reduced-motion). Das Kopf-Abzeichen sagt in der
Zeit "wird gerechnet..." statt eine veraltete Zahl, und die roten/gelben
Zeilenfarben setzen aus - sie gelten fuer die alten Mengen.

Dazu zwei Dinge, die ohne das Standenbleiben nicht aufgefallen waeren:

- Das Zahlenfeld reagiert sofort, die Anfrage wartet 280 ms. Wer von 4
  auf 12 tippt, bekam sonst erst ein Ergebnis fuer 1.
- Antworten koennen in falscher Reihenfolge eintreffen. Eine laufende
  Nummer je Anfrage verwirft alles, was nicht die neueste ist - sonst
  gewinnt beim schnellen Klicken zufaellig die langsamere Antwort.

Ausserdem: Eine Knopfreihe direkt unter einer Angabenliste klebte am
letzten Wert (Mealie-Karte in den Einstellungen). .kv hat bewusst keinen
Aussenabstand und .field-inline nur einen nach unten - den fehlenden
setzt jetzt eine Geschwisterregel, damit es ueberall gilt, wo dieses
Paar vorkommt.

Von Hand geprueft gegen eine Mealie-Attrappe: Pfannkuchen von 4 auf 12
Portionen - waehrend des Ladens 15 Platzhalter und die Zutatennamen
stehen, danach 250 g -> 750 g und 2 EL -> 6 EL (60 g), keine leere Karte
dazwischen.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

web/src/styles.css

@@ -980,6 +980,19 @@ select.zeitraum:hover { color: var(--text); }
   animation: skeleton-glanz 1.4s ease infinite;
   border-radius: var(--radius-sm);
 }
+/* Neu gerechnete Werte blenden sich ein, statt hart umzuspringen. Der
+   React-Schluessel (stand) laesst die Animation bei jedem Ergebnis neu
+   anlaufen. */
+.wert-ein { animation: wert-ein 0.28s ease both; }
+@keyframes wert-ein {
+  from { opacity: 0; transform: translateY(2px); }
+  to { opacity: 1; transform: none; }
+}
+/* Wer Animationen abbestellt hat, bekommt den Wert sofort. */
+@media (prefers-reduced-motion: reduce) {
+  .wert-ein { animation: none; }
+  .skeleton { animation: none; }
+}
 @keyframes skeleton-glanz {
   from { background-position: 100% 0; }
   to { background-position: 0 0; }
@@ -1020,6 +1033,10 @@ select.zeitraum:hover { color: var(--text); }
 .kv { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-2) var(--sp-5); margin: 0; }
 .kv dt { color: var(--muted); font-size: 0.85rem; }
 .kv dd { margin: 0; }
+/* Eine Knopfreihe direkt unter einer Angabenliste klebte am letzten Wert -
+   .kv hat bewusst keinen Aussenabstand, .field-inline nur einen nach unten.
+   Den fehlenden Abstand setzt deshalb die Geschwisterregel. */
+.kv + .field-inline { margin-top: var(--sp-4); }
 
 /* ---------- Utilities ---------- */
 .muted { color: var(--muted); }