{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "toast-stapel",
 "name": "Toast-Benachrichtigungen im Stapel",
 "name_en": "Stacked toast notifications",
 "kurz": "Rückmeldungen gleiten unten rechts herein und schieben sich zu einem Stapel zusammen, ältere rücken kleiner nach hinten; Hover fächert auf und hält die Zeit an.",
 "kategorie": "Mikroanimationen",
 "kategorie_slug": "mikroanimationen",
 "kategorie_nr": 9,
 "bau_chat": "C4",
 "prioritaet": "A",
 "trendstatus": "aufsteigend",
 "belegstatus": "belegt",
 "website_belege": 2,
 "stimmung": [
  "ruhig",
  "präzise"
 ],
 "stimmung_roh": [
  "funktional",
  "modern",
  "ruhig"
 ],
 "technik": [
  "css",
  "popover-api",
  "motion",
  "vanilla-js"
 ],
 "technik_gruppen": [
  "css",
  "js",
  "andere"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Kurze Rückmeldungen erscheinen am Bildschirmrand und gleiten herein. Kommen mehrere, stapeln sie sich: Ältere rücken nach hinten, werden 5 % kleiner je Ebene und schauen nur als schmaler Rand hervor. Beim Hover oder Fokus fächert der Stapel auf. Jeder Toast schließt sich nach 4 s von selbst; Hover und Fokus halten die Zeit an. Auf Touch schließt Wischen.",
  "warum_es_wirkt": "Die Rückmeldung kommt, ohne die Handlung zu unterbrechen. Der Stapel hält viele Meldungen auf kleinem Raum und zeigt trotzdem, dass es mehrere sind. Die Tiefe ordnet nach Zeit: vorn das Neueste.",
  "wann_einsetzen": "Speichern, Kopieren, Warenkorb, kurze Netzwerkfehler, Undo-Angebote.",
  "wann_nicht": "Für kritische Fehler, die eine Entscheidung verlangen (Inline-Hinweis oder Dialog). Für Formularvalidierung (Meldung direkt am Feld). Für Inhalte, die man länger lesen muss.",
  "varianten": [
   "Stapel mit Tiefenstaffel: ältere Toasts kleiner und versetzt, Hover fächert auf (Sonner, Motion Toast stack).",
   "Liste ohne Stapel: alle sichtbaren Toasts untereinander mit festem Abstand.",
   "Undo-Toast mit Countdown-Linie: die Linie zeigt die Restzeit und hält bei Hover an.",
   "Nativ mit popover=\"manual\" im Top-Layer, Abstand per sibling-index() (Chrome)."
  ],
  "umsetzung": "Toaster fixed unten rechts (24 px Rand), Toasts absolut am unteren Rand gestapelt. Lage je Toast über Variablen: --y = −Ebene × 14 px, --s = 1 − Ebene × 0,05, Höhe der hinteren Ebenen = Höhe des vordersten, ihr Inhalt opacity 0. Aufgefächert: --y = Summe der Höhen der neueren Toasts plus 14 px Abstand, --s = 1. transition: transform, opacity, height 400 ms ease. Höchstens drei Ebenen sichtbar. Eintritt aus translateY(100%) mit opacity 0. Lebensdauer 4000 ms als Web Animation (z. B. auf der Countdown-Linie): pause() bei pointerenter und focusin, play() beim Verlassen, onfinish schließt. Nativ geht es ohne JS-Lage: popover=\"manual\" (kein Light-Dismiss), Abstand per sibling-index(), Ein- und Austritt per @starting-style und transition-behavior: allow-discrete für display und overlay. Ansage separat in einer Live-Region.",
  "mobil": "Unten über die volle Breite mit 16 px Rand. Tippen fächert den Stapel auf, Wischen schließt. Größere Trefferflächen für Schließen und Aktion.",
  "reduzierte_bewegung": "Als Liste ohne Tiefenstaffel zeigen und nur per Opacity ein- und ausblenden. Kein Gleiten, kein Skalieren.",
  "barrierefreiheit": "Meldungstext zusätzlich in eine Live-Region schreiben: role=\"status\" (polite) für Bestätigungen, role=\"alert\" für Fehler. Die Zeit hält bei Hover und Fokus an (WCAG 2.2.1). Toasts, Aktionen und Schließen sind per Tastatur erreichbar, Escape schließt den fokussierten Toast. Wichtige Aktionen nie nur im Toast anbieten."
 },
 "messwerte": {
  "easing": "ease",
  "dauer_ms": "Eintritt/Stapel 400; Auto-Dismiss 4000",
  "stagger_ms": "",
  "distanz": "Tiefenstaffel −5 % Skalierung pro älterem Toast",
  "sonstiges": "Bibliothek Sonner; auch auf supabase.com, attio.com, ramp.com, dub.co im Bundle",
  "herkunft": "beobachtet",
  "quelle": "https://cursor.com/marketing-static/_next/static/immutable/chunks/16edrfo_d-9r9.js"
 },
 "kurve": {
  "bezier": [
   0.25,
   0.1,
   0.25,
   1
  ],
  "css": "cubic-bezier(0.25, 0.1, 0.25, 1)",
  "name": "ease",
  "dauer_ms": 400
 },
 "gesehen_bei": [
  {
   "seite": "Chrome Developers: Persistent toast notifications",
   "url": "https://developer.chrome.com/docs/modern-web-guidance/guides/ui-components/persistent-toast-notifications",
   "auszeichnung": "",
   "beobachtung": "popover='manual', Close per popovertargetaction='hide', Abstand via sibling-index(), Auto-Dismiss-Beispiel 3000 ms, allow-discrete für Ein-/Austritt, Polyfill bedingt.",
   "art": "artikel"
  },
  {
   "seite": "Motion Examples: Toast – Stacked notifications",
   "url": "https://motion.dev/examples/react-toast-stack",
   "auszeichnung": "",
   "beobachtung": "Gestapelte Toasts mit 3D-Transforms und Opacity, AnimatePresence für Ein-/Austritt, whileHover/whileTap.",
   "art": "demo"
  },
  {
   "seite": "Codrops NotificationStyles (Repo)",
   "url": "https://github.com/codrops/NotificationStyles",
   "auszeichnung": "",
   "beobachtung": "Ältere Sammlung unaufdringlicher Benachrichtigungsstile.",
   "art": "demo"
  },
  {
   "seite": "Cursor",
   "url": "https://cursor.com/",
   "auszeichnung": "",
   "beobachtung": "Sonner im Bundle ([data-sonner-toaster]): Toast-Lebensdauer 4000 ms (Default), --scale: toasts-before × 0.05, Lift um --gap, transition transform .4s ease.",
   "art": "website"
  },
  {
   "seite": "Resend",
   "url": "https://resend.com/",
   "auszeichnung": "",
   "beobachtung": "Sonner mit eigenen Toast-Titeln (data-sonner-toast-title); gleiche Stapel-Parameter (Skalierung 5 % pro Ebene, 400 ms, 4000 ms).",
   "art": "website"
  }
 ],
 "tutorials": [
  {
   "titel": "Chrome: Persistent toast notifications",
   "url": "https://developer.chrome.com/docs/modern-web-guidance/guides/ui-components/persistent-toast-notifications"
  },
  {
   "titel": "Motion: Toast stack",
   "url": "https://motion.dev/examples/react-toast-stack"
  }
 ],
 "kombinierbar_mit": [
  "einblenden-starting-style",
  "kopieren-feedback",
  "token-federnd-verspielt"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/mikroanimationen/toast-stapel/",
  "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/toast-stapel/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/mikroanimationen/toast-stapel/demo"
 },
 "herkunft": {
  "quelldateien": [
   "hover.json",
   "patch-belege-1.json"
  ],
  "pruefnotizen": [
   "patch-belege-1.json: 2 Produktionsbelege (+4 weitere Seiten mit Sonner im Bundle)."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Rückmeldungen gleiten unten rechts herein und schieben sich zu einem Stapel zusammen, ältere rücken kleiner nach hinten; Hover fächert auf und hält die Zeit an.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "easing": "ease, cubic-bezier(0.25, 0.1, 0.25, 1) für Eintritt, Stapel, Auffächern, Austritt",
   "dauer_ms": 400,
   "auto_dismiss_ms": 4000,
   "skalierung_je_ebene": -0.05,
   "versatz_je_ebene_px": 14,
   "abstand_aufgefaechert_px": 14,
   "sichtbare_ebenen": 3,
   "eintritt": "translateY(100%) und opacity 0 nach Lage im Stapel",
   "austritt": "vorderster Toast translateY(+100%) und opacity 0; ältere nur opacity 0; Wischen: horizontal hinaus",
   "toast_breite_px": 356,
   "abstand_rand_px": "24 (Telefon 16, links und rechts)",
   "radius_px": 12,
   "tiefe_farbe": "color-mix(in oklab, #ffffff, #bfd6ea calc(Ebene * 30%))",
   "inhalt_hintere_ebenen": "opacity 0, Höhe = Höhe des vordersten Toasts",
   "wischen_schwelle_px": 45,
   "countdown_linie": "2 px, scaleX 1 → 0, linear 4000 ms (Variante Undo-Linie)",
   "ui_ms": 150,
   "zeiger_vorfuehrung": "cubic-bezier(0.16, 1, 0.3, 1) 550 ms"
  },
  "ausloeser": "klick",
  "touch": "Toaster unten über die volle Breite (16 px Rand). Tippen auf den Stapel fächert auf bzw. zu, Wischen ab 45 px schließt, Schließen-Knopf immer sichtbar mit 44 px Trefferfläche, Aktionsknöpfe 36 px hoch.",
  "reduziert": "Immer als Liste aufgefächert, keine Skalierung und kein Gleiten. Toasts blenden nur per opacity in 150 ms linear ein und aus; Countdown-Linie und Knopf-Federn entfallen.",
  "korrekturen": {
   "beschreibung": "Kurze Rückmeldungen erscheinen am Bildschirmrand und gleiten herein. Kommen mehrere, stapeln sie sich: Ältere rücken nach hinten, werden 5 % kleiner je Ebene und schauen nur als schmaler Rand hervor. Beim Hover oder Fokus fächert der Stapel auf. Jeder Toast schließt sich nach 4 s von selbst; Hover und Fokus halten die Zeit an. Auf Touch schließt Wischen.",
   "warum_es_wirkt": "Die Rückmeldung kommt, ohne die Handlung zu unterbrechen. Der Stapel hält viele Meldungen auf kleinem Raum und zeigt trotzdem, dass es mehrere sind. Die Tiefe ordnet nach Zeit: vorn das Neueste.",
   "wann_einsetzen": "Speichern, Kopieren, Warenkorb, kurze Netzwerkfehler, Undo-Angebote.",
   "wann_nicht": "Für kritische Fehler, die eine Entscheidung verlangen (Inline-Hinweis oder Dialog). Für Formularvalidierung (Meldung direkt am Feld). Für Inhalte, die man länger lesen muss.",
   "varianten": [
    "Stapel mit Tiefenstaffel: ältere Toasts kleiner und versetzt, Hover fächert auf (Sonner, Motion Toast stack).",
    "Liste ohne Stapel: alle sichtbaren Toasts untereinander mit festem Abstand.",
    "Undo-Toast mit Countdown-Linie: die Linie zeigt die Restzeit und hält bei Hover an.",
    "Nativ mit popover=\"manual\" im Top-Layer, Abstand per sibling-index() (Chrome)."
   ],
   "umsetzung": "Toaster fixed unten rechts (24 px Rand), Toasts absolut am unteren Rand gestapelt. Lage je Toast über Variablen: --y = −Ebene × 14 px, --s = 1 − Ebene × 0,05, Höhe der hinteren Ebenen = Höhe des vordersten, ihr Inhalt opacity 0. Aufgefächert: --y = Summe der Höhen der neueren Toasts plus 14 px Abstand, --s = 1. transition: transform, opacity, height 400 ms ease. Höchstens drei Ebenen sichtbar. Eintritt aus translateY(100%) mit opacity 0. Lebensdauer 4000 ms als Web Animation (z. B. auf der Countdown-Linie): pause() bei pointerenter und focusin, play() beim Verlassen, onfinish schließt. Nativ geht es ohne JS-Lage: popover=\"manual\" (kein Light-Dismiss), Abstand per sibling-index(), Ein- und Austritt per @starting-style und transition-behavior: allow-discrete für display und overlay. Ansage separat in einer Live-Region.",
   "mobil": "Unten über die volle Breite mit 16 px Rand. Tippen fächert den Stapel auf, Wischen schließt. Größere Trefferflächen für Schließen und Aktion.",
   "reduzierte_bewegung": "Als Liste ohne Tiefenstaffel zeigen und nur per Opacity ein- und ausblenden. Kein Gleiten, kein Skalieren.",
   "barrierefreiheit": "Meldungstext zusätzlich in eine Live-Region schreiben: role=\"status\" (polite) für Bestätigungen, role=\"alert\" für Fehler. Die Zeit hält bei Hover und Fokus an (WCAG 2.2.1). Toasts, Aktionen und Schließen sind per Tastatur erreichbar, Escape schließt den fokussierten Toast. Wichtige Aktionen nie nur im Toast anbieten."
  },
  "geprueft": "01.11.2026",
  "notiz": "Spendenseite des erfundenen Vereins Tafel Nordstadt e. V., Hannover, gestaltet nach Rezept verein-nonprofit-wirkung: Big Shoulders 800 versal für Mission und Wirkungszahlen, Archivo für Text, Geist Mono für Labels; Weiß, Navy #002e6d, helles Blau #edf5fa, Gelb #ffca0a nur für Spenden-Knöpfe. Eigene SVG-Illustration (Kiste mit geretteten Lebensmitteln) statt Fotos; Info links, Bildfläche rechts, damit der Stapel unten rechts über der Illustration liegt und keine Bedienelemente verdeckt. Vier Knöpfe lösen verschiedene Toasts aus (Spende mit Rückgängig, Schicht im Kalender, IBAN kopiert, Fehler mit role=alert). Umschalter Stapel / Liste / Undo-Linie. Werte nach Sonner (gemessen auf cursor.com, resend.com): ease 400 ms, −5 % je Ebene, 4000 ms. Versatz 14 px, drei sichtbare Ebenen und 356 px Breite sind Sonner-Standards, Wischschwelle 45 px eigene Wahl. Die Lebensdauer läuft als Web Animation, damit Pause und Countdown-Linie synchron bleiben. Vorführung: gedachter Zeiger drückt vier Knöpfe, fährt auf den Stapel (auffächern), verlässt ihn, Toasts laufen ab. Review 01.11.2026: Die Toast-Höhe wurde gemessen, bevor der Aktionsknopf seinen Text bekam; mit Text brach die zweite Zeile um und lief unten aus dem Toast. Der Knopftext wird jetzt vor dem Messen gesetzt. Zugang 02.11.2026: --leise Alpha .6 auf .68 (4,9:1 auf Hellblau), Quellenzeile auf Marineblau Alpha .5 auf .64, Knopfrahmen im Kontrastmodus."
 }
}