.flash-container {
    position: fixed;
    bottom: 10px;
    left: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 1050;
}

.flash-message {
    min-width: 280px;
    max-width: 350px;
    padding: 18px 24px;
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0;
    animation: slideInFromLeft 0.3s ease-out forwards;
}

.flash-message i {
    font-size: 1.4rem;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    flex-shrink: 0;
}

.flash-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    border-radius: 16px 16px 0 0;
    animation: flashBarAnimation 5s forwards;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

@keyframes slideInFromLeft {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutToLeft {
    0% {
        transform: translateX(0);
        opacity: 1;
    }

    100% {
        transform: translateX(-100%);
        opacity: 0;
    }
}

@keyframes flashBarAnimation {
    0% {
        width: 100%;
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        width: 0;
        opacity: 0.5;
    }
}

.flash-message.fade-out {
    animation: slideOutToLeft 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

/* Glassmorphism-Effekte für verschiedene Typen */
.flash-message.success {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(21, 128, 61, 0.15));
    border-color: rgba(34, 197, 94, 0.3);
}

.flash-message.danger {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(185, 28, 28, 0.15));
    border-color: rgba(239, 68, 68, 0.3);
}

.flash-message.warning {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(217, 119, 6, 0.15));
    border-color: rgba(245, 158, 11, 0.3);
}

.flash-message.info {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(29, 78, 216, 0.15));
    border-color: rgba(59, 130, 246, 0.3);
}

/* Farbige Flash-Bars */
.flash-bar.success {
    background: linear-gradient(90deg, #22c55e, #16a34a);
}

.flash-bar.danger {
    background: linear-gradient(90deg, #ef4444, #dc2626);
}

.flash-bar.warning {
    background: linear-gradient(90deg, #f59e0b, #d97706);
}

.flash-bar.info {
    background: linear-gradient(90deg, #3b82f6, #2563eb);
}

/* Icon-Farben für bessere Sichtbarkeit */
.flash-message.success i {
    color: #4ade80;
}

.flash-message.danger i {
    color: #f87171;
}

.flash-message.warning i {
    color: #fbbf24;
}

.flash-message.info i {
    color: #60a5fa;
}

/* Pulsing-Effekt für kritische Nachrichten */
.flash-message.danger {
    animation: slideInFromLeft 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) forwards,
               pulse 2s ease-in-out 1s infinite;
}