#toasts {
    position: fixed;
    overflow-y: clip;
    width: 300px;
    border: 0px;
    right: 0px;
    bottom: 50px;
    z-index: 10010000;
    pointer-events: none;
}

.toast {
    min-height: 42px;
    border-radius: 3px 0 0 3px;
    padding: 8px 12px;
    padding-left: 44px;
    margin-top: 8px;

    position: relative;
    background-color: var(--white);
    color: var(--text-color);
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    animation: toast-enter 0.28s cubic-bezier(0.21, 1.02, 0.73, 1.0) 1;
    will-change: transform, opacity;
}

@keyframes toast-enter {
    0%   { opacity: 0; transform: translateX(40px) scale(0.96); }
    100% { opacity: 1; transform: translateX(0) scale(1); }
}

/* Status-Toasts: farbiger Hintergrund nach Status, Text und Icon in passendem Kontrast.
   warning ist gelblich → dunkler Text/Icon für lesbaren Kontrast; alle anderen sind
   dunkle Status-Farben → weißer Text/Icon. */
.toast.toast-info    { background-color: var(--info, #0284c7);    color: white; }
.toast.toast-success { background-color: var(--success, #2e7d32); color: white; }
.toast.toast-error   { background-color: var(--danger, #dc2626);  color: white; }
.toast.toast-warning { background-color: var(--warning, #f59e0b); color: var(--gray-800); }

.toast-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    line-height: 1;
}

.toast.toast-info .toast-icon,
.toast.toast-success .toast-icon,
.toast.toast-error .toast-icon    { color: white; }
.toast.toast-warning .toast-icon  { color: var(--gray-800); }

/* Toast mit Action-Button (z.B. "Rückgängig"). Body schrumpft auf flex:1, Button rechts. */
.toast.toast-with-action {
    padding-right: 8px;
}

.toast.toast-with-action .toast-body {
    margin-right: 8px;
}

.toast-action-btn {
    background: rgba(255, 255, 255, 0.22);
    color: inherit;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.15s ease;
    /* #toasts hat pointer-events: none (damit darunterliegende Elemente klickbar bleiben).
       Der Action-Button braucht den Override, sonst kommen Klicks nicht an. */
    pointer-events: auto;
}

    .toast-action-btn:hover {
        background: rgba(255, 255, 255, 0.35);
    }

/* Warning-Toast hat dunklen Text → Action-Button auch mit dunklen Tönen. */
.toast.toast-warning .toast-action-btn {
    background: rgba(0, 0, 0, 0.12);
    border-color: rgba(0, 0, 0, 0.25);
}

.toast.toast-warning .toast-action-btn:hover {
    background: rgba(0, 0, 0, 0.20);
}

/* Toast ohne linkes Icon (z.B. Swap-Toast mit Inline-Icon im Body): Padding rechts
   wieder normal, weil kein Platz fürs Icon reserviert wird. */
.toast.toast-no-icon { padding-left: 12px; }

/* Kompakter Toast (kein Title — der neue Standard für die meisten Fälle): eine Zeile,
   größere Schrift, vertikal mittig. Body wird zentriert wenn auch kein Icon da ist. */
.toast.toast-compact {
    display: flex;
    align-items: center;
    min-height: 48px;
}

.toast.toast-compact .toast-body {
    flex: 1;
    font-size: 1.1rem;
    line-height: 1.3;
}

.toast.toast-compact.toast-no-icon .toast-body { text-align: center; }

/* Title-Toasts (selten — nur Multi-Info-Fälle wo Title und Body unterschiedliche Infos
   tragen). Title oben, Body darunter. */
.toast-title { font-weight: bold; margin-bottom: 4px; }
.toast-body  { opacity: 0.9; }
.toast.toast-compact .toast-body { opacity: 1; }

/* === Swap-Animation ===
   Delay 280ms = Dauer der Toast-Enter-Animation. So startet das Icon-Wackeln erst,
   wenn der Toast vollständig sichtbar ist, und nicht parallel zum Slide-in. */
@keyframes toast-swap-anim {
    0%   { transform: translateY(-50%) translateX(0); }
    20%  { transform: translateY(-50%) translateX(-3px); }
    40%  { transform: translateY(-50%) translateX(3px); }
    60%  { transform: translateY(-50%) translateX(-2px); }
    80%  { transform: translateY(-50%) translateX(2px); }
    100% { transform: translateY(-50%) translateX(0); }
}
.toast-icon.toast-anim-swap {
    animation: toast-swap-anim 0.6s ease-in-out 280ms 1 both;
}

/* Inline-Variante: Icon mitten im Body-Text (z.B. "Name ↔ Name"). Ohne translateY,
   weil das Icon im Textfluss steht statt absolut positioniert zu sein. */
@keyframes toast-swap-anim-inline {
    0%   { transform: translateX(0); }
    20%  { transform: translateX(-3px); }
    40%  { transform: translateX(3px); }
    60%  { transform: translateX(-2px); }
    80%  { transform: translateX(2px); }
    100% { transform: translateX(0); }
}
.toast-body .toast-anim-swap {
    display: inline-block;
    margin: 0 6px;
    vertical-align: middle;
    font-size: 1.15em;
    animation: toast-swap-anim-inline 0.6s ease-in-out 280ms 1 both;
}