Kurzmeldungen als Overlay, Liniendiagramm fuellt die Karte, Zeitraum ab 1 Tag

Meldungen:
"Gespeichert", "Anordnung gespeichert" und die uebrigen Erfolgsmeldungen standen
als Leiste mitten in der Seite - beim Speichern sprang dadurch das ganze Layout
ein Stueck nach unten. Sie erscheinen jetzt als Overlay am unteren Rand und
verschwinden nach fuenf Sekunden von selbst; ein Kreuz blendet sie sofort aus.
Umgestellt in Uebersicht, Einstellungen, Gefahrenbereich, Benutzer,
Produktformular sowie Ein- und Auslagern.

Bewusst NICHT umgestellt: Fehlermeldungen. Ein Fehler, der nach fuenf Sekunden
verschwindet, ist genau dann weg, wenn man ihn noch braucht - der bleibt an
seiner Stelle stehen.

Rollbalken beim Liniendiagramm:
Den hatte ich mir mit der Zeitraum-Auswahl selbst eingebaut. Das Diagramm hatte
eine feste Hoehe von 200 px; zusammen mit der Auswahl darueber passte das nicht
mehr in die Karte. Jetzt wird auch die Hoehe gemessen, das Diagramm fuellt den
verbleibenden Platz.

Zeitraum "1 Tag":
Ein einzelner Tag ergibt genau einen Messpunkt - eine Linie aus einem Punkt
waere unsinnig. Das Diagramm zeigt in dem Fall die blanke Zahl. Die
Backend-Begrenzung laesst jetzt einen Tag zu.

Geprueft: "npm run build" laeuft durch; kein Verweis mehr auf die entfernten
Meldungszustaende.

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

web/src/styles.css

@@ -560,7 +560,10 @@ select.zeitraum { margin-top: 0; width: auto; min-width: 0; flex: 0 0 auto; alig
 
 /* ---------- Startseite: Kartentypen ---------- */
 .card-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
-.card-stack { display: flex; flex-direction: column; gap: var(--sp-3); height: 100%; }
+/* Inhalt einer Karte, der die volle Höhe nutzen soll: Die Auswahl oben behält
+   ihre Größe, das Diagramm darunter bekommt den Rest. Ohne min-height:0 wächst
+   ein Flex-Kind über seinen Platz hinaus – genau das erzeugte den Rollbalken. */
+.card-stack { display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; min-height: 0; }
 
 .kpi-row { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
 .kpi { flex: 1 1 120px; min-width: 0; }
@@ -605,9 +608,16 @@ select.zeitraum { margin-top: 0; width: auto; min-width: 0; flex: 0 0 auto; alig
 .bar-total { font-size: 0.8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
 .chart-hint { font-size: 0.8rem; color: var(--muted); margin-top: var(--sp-2); }
 
-.chart-line { width: 100%; }
-.line-plot { position: relative; }
+.chart-line { width: 100%; display: flex; flex-direction: column; flex: 1; min-height: 0; }
+/* Der Zeichenbereich nimmt den verbleibenden Platz – seine Groesse wird
+   gemessen, das SVG zeichnet danach in echten Pixeln. */
+.line-plot { position: relative; flex: 1; min-height: 100px; }
 .line-plot svg { display: block; }
+
+/* Ein einzelner Tag: blanke Zahl statt Linie aus einem Punkt. */
+.chart-line.einzelwert { align-items: center; justify-content: center; gap: var(--sp-2); }
+.einzel-reihe { display: flex; align-items: baseline; gap: var(--sp-2); }
+.einzel-zahl { font-size: 2rem; font-weight: 680; letter-spacing: -0.02em; }
 .line-tooltip {
   position: absolute; top: 4px; transform: translateX(-50%);
   background: var(--surface); border: 1px solid var(--border-strong);
@@ -618,6 +628,41 @@ select.zeitraum { margin-top: 0; width: auto; min-width: 0; flex: 0 0 auto; alig
 .line-tooltip .tip-row { display: flex; align-items: center; gap: 6px; }
 .line-tooltip .tip-name { color: var(--muted); }
 
+/* ---------- Kurzmeldungen (Overlay unten) ----------
+   Liegt ueber dem Inhalt statt in ihm: So verschiebt eine Meldung beim
+   Speichern nicht das ganze Layout. */
+.toasts {
+  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
+  z-index: 200; display: flex; flex-direction: column; gap: var(--sp-2);
+  align-items: center; pointer-events: none;
+  width: max-content; max-width: min(92vw, 520px);
+}
+.toast {
+  pointer-events: auto;
+  display: flex; align-items: center; gap: var(--sp-2);
+  padding: 10px var(--sp-3) 10px var(--sp-4);
+  border-radius: var(--radius); font-size: 0.875rem;
+  background: var(--surface); color: var(--text);
+  border: 1px solid var(--border-strong);
+  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.18);
+  animation: toast-auf 160ms ease-out;
+}
+.toast.ok { border-left: 3px solid var(--ok); }
+.toast.ok .icon { color: var(--ok); }
+.toast.warn { border-left: 3px solid var(--warn); }
+.toast.warn .icon { color: var(--warn); }
+.toast-text { flex: 1; min-width: 0; }
+.toast .btn-icon { flex: 0 0 auto; }
+
+@keyframes toast-auf {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+/* Wer Bewegung reduziert haben moechte, bekommt sie eingeblendet ohne Fahrt. */
+@media (prefers-reduced-motion: reduce) {
+  .toast { animation: none; }
+}
+
 /* ---------- Login ---------- */
 .login-wrap { min-height: 100vh; display: grid; place-items: center; padding: var(--sp-4); }
 .login-card { width: 100%; max-width: 360px; }