/* ============================================================ Komponente: toast ------------------------------------------------------------ Quelle: Figma „Design System" → toast, node 11157-796, übergeben am 27.08.2026. Ersetzt: error toast · success message · Undo-Banner. ABGRENZUNG ZU message (§20) toast läuft nach Zeit ab und SCHWEBT unten über dem Inhalt. Schatten allseitig. message bleibt stehen, bis sich der Zustand ändert, und steht im Fluss. → message.css Eine Dimension: art = fehler · erfolg · undo Standzeiten (§20) fehler 5 s · erfolg 5 s · undo 8 s Undo bleibt länger, weil der Nutzer lesen, entscheiden und treffen muss. Fortschrittsbalken hat NUR fehler — bei undo ist Verpassen folgenlos, die Aktion lässt sich wiederholen. VERWENDUNG
NICHT AUS FIGMA ÜBERGEBEN, hier als Gerüst gebaut und noch zu bestätigen: der Innenaufbau (Klassennamen, Gap, Icon-Farben je art) und die Position der Schicht über der Bottom Nav. Der Innenaufbau folgt message.css, damit beide gleich zu bauen sind. Werte, die übergeben wurden, sind unten markiert. ============================================================ */ /* Schwebeschicht. Der Toast liegt über dem Inhalt, aber nie über der Bottom Nav — sonst verdeckt er die einzige jederzeit sichtbare Struktur der App (§7). */ .toast-schicht { position: fixed; left: var(--layout-screen-margin); right: var(--layout-screen-margin); bottom: var(--space-md); z-index: 100; display: flex; flex-direction: column; gap: var(--space-xs); pointer-events: none; } .toast-schicht > * { pointer-events: auto; } .toast { position: relative; overflow: hidden; /* für den Balken */ display: flex; align-items: center; gap: var(--space-2xs); width: 100%; /* übergeben: FILL */ padding: var(--space-md); /* übergeben: 16 */ border-radius: var(--radius-md); /* übergeben: 20 */ /* Der Strich liegt in Figma INNEN und zählt nicht zur Höhe; ein CSS-border tut das bei automatischer Höhe doch und macht das Element 2 px höher. AGENTS.md §8a verbietet ihn ausdrücklich („NIE ein CSS-border an beiden"). Er liegt deshalb als inset box-shadow in --toast-outline. Nachgezogen am 04.09.2026, zusammen mit .btn. */ --toast-outline: transparent; /* übergeben: 1 px je art */ /* DER SCHATTEN IST SUBTILER GEWORDEN (09.09.2026, Lisi: „drop shadow ist in figma angepasst, muss subtiler sein"). Am Effekt der Komponente abgelesen: X 0, Y 0, Weichzeichnen 35, Streuung 0, Farbe Black 15. Vorher standen hier 24 px Weichzeichnen auf scrim-full-black-60 — kleiner gestreut und viermal so kräftig, was den Toast wie ausgeschnitten aussehen ließ. Jetzt liegt er weiter und leiser: die Kante trägt der 1-px-Strich, nicht der Schatten. */ box-shadow: inset 0 0 0 var(--outline-default) var(--toast-outline), 0 0 35px var(--transparent-black-15); /* gemessen */ } .toast__icon { display: flex; flex: 0 0 auto; padding-block: var(--space-2xs); } .toast__texte { display: flex; flex-direction: column; gap: var(--space-2xs); flex: 1; min-width: 0; padding-left: var(--space-xs); /* gleiche Achse wie in message.css */ } .toast__titel { font-size: var(--font-size-small-text); font-weight: var(--font-weight-bold); line-height: var(--line-height-small-text); color: var(--text-primary); } .toast__untertitel { font-size: var(--font-size-small-text); font-weight: var(--font-weight-regular); line-height: var(--line-height-small-text); color: var(--text-primary); } /* ✕ steht rechts — Toast ist eine Fläche über dem Inhalt (§19.2). aria-label benennt, was geschlossen wird, nie nur „Schließen" (§19.6). Touch-Target über .touch-target aus base.css. */ .toast__schliessen { flex: 0 0 auto; background: none; border: 0; padding: 0; color: var(--text-primary); cursor: pointer; } /* Slot für den Link Button („Rückgängig"). Erbt seine Textfarbe selbst, Padding wie in message.css. */ .toast__aktion { flex: 0 0 auto; padding: var(--space-2xs) var(--space-xs); font-size: var(--font-size-small-text); line-height: var(--line-height-small-text); } /* ------------------------------------------------------------ Fortschrittsbalken — nur art=fehler ------------------------------------------------------------ Zeigt die Restzeit. Nicht das einzige Signal: das ✕ schließt jederzeit sofort, und der Balken ist aria-hidden. ------------------------------------------------------------ */ .toast__balken { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; transform-origin: left center; background-color: var(--red-label-text); animation: toast-restzeit var(--toast-dauer) linear forwards; } @keyframes toast-restzeit { from { transform: scaleX(1); } to { transform: scaleX(0); } } @media (prefers-reduced-motion: reduce) { .toast__balken { animation: none; } } /* ------------------------------------------------------------ Arten ------------------------------------------------------------ */ .toast--fehler { --toast-dauer: 5s; /* übergeben */ background-color: var(--warning-red-fill); --toast-outline: var(--red-label-stroke); } .toast--fehler .toast__icon { color: var(--red-label-text); } /* Kein Balken, keine Aktion. */ .toast--erfolg { --toast-dauer: 5s; /* übergeben */ background-color: var(--green-label-fill); --toast-outline: var(--green-label-stroke); } .toast--erfolg .toast__icon { color: var(--green-label-text); } /* ------------------------------------------------------------ art=undo ------------------------------------------------------------ Quelle: Figma „Design System" → toast, node 11570:104, ausgelesen am 04.09.2026. Kein Balken, kein ✕ — nur „Rückgängig". Er weicht in vier Punkten von den anderen beiden ab; die vier standen bis zum 04.09.2026 im Tablet-Prototypen und stehen jetzt hier: Polster 16 seitlich, 12 oben und unten (sonst 16 rundum) Abstand 12 zwischen Meldung und Aktion Schatten Radius 12 (sonst 24) Textgewicht regular (sonst bold) — er meldet einen Zustand, keinen Erfolg Die Höhe von 69 ergibt sich: 12 + 45 Link Button + 12. Der Link Button behält also seine 45, obwohl der Toast nur 69 hoch ist. Wer ihm hier `height: auto` gibt, bekommt 61. ------------------------------------------------------------ */ .toast--undo { --toast-dauer: 8s; /* übergeben */ background-color: var(--surface-card); --toast-outline: var(--label-outline); align-items: center; gap: var(--space-sm); /* 12 */ padding: var(--space-sm) var(--space-md); /* 12 / 16 */ /* Derselbe Schatten wie an den anderen Arten — siehe oben. Hier standen 12 px, also noch enger. */ box-shadow: inset 0 0 0 var(--outline-default) var(--toast-outline), 0 0 35px var(--transparent-black-15); /* gemessen */ } /* Der Link Button ist in der Komponente ein direktes Kind — der Slot bringt kein eigenes Polster mit. Mit den 4 aus .toast__aktion wäre der Toast 77 statt 69. */ .toast--undo .toast__aktion { padding: 0; } /* Der Text meldet einen Zustand, er feiert nichts — regular. */ .toast--undo .toast__titel { font-weight: var(--font-weight-regular); } /* Der durchgestrichene Stern ist 19, nicht 17 wie die anderen Toast-Icons (11577:708). */ .toast--undo .toast__icon .ikon { width: 19px; height: 19px; } .toast--erfolg .toast__balken, .toast--undo .toast__balken, .toast--undo .toast__schliessen { display: none; }