/**
 * Messages CSS
 * 
 * Definiert die Message-Styles für Erfolgs-, Fehler- und Warnmeldungen mit modernem Design.
 */

.message-success {
    background-color: var(--color-success-bg);
    color: var(--color-success);
    padding: 16px 24px;
    margin-bottom: 24px;
    border-left: 5px solid var(--color-success);
    border-radius: 8px;
    font-weight: 500;
    font-size: var(--font-size-base);
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    gap: 12px;
}

.message-error {
    background-color: var(--color-error-bg);
    color: var(--color-error);
    padding: 16px 24px;
    margin-bottom: 24px;
    border-left: 5px solid var(--color-error);
    border-radius: 8px;
    font-weight: 500;
    font-size: var(--font-size-base);
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    gap: 12px;
}

.message-warning {
    background-color: var(--color-warning-bg);
    color: var(--color-warning);
    padding: 16px 24px;
    margin-bottom: 24px;
    border-left: 5px solid var(--color-warning);
    border-radius: 8px;
    font-weight: 500;
    font-size: var(--font-size-base);
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    gap: 12px;
}

.message-info {
    background-color: var(--color-info-bg);
    color: var(--color-info);
    padding: 16px 24px;
    margin-bottom: 24px;
    border-left: 5px solid var(--color-info);
    border-radius: 8px;
    font-weight: 500;
    font-size: var(--font-size-base);
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    gap: 12px;
}