/* ============================================================
   ALERT SECTION (unter 2-Spalten-Layout) – Farben + Symbol
   ============================================================ */
.alert-box {
    background: #fff;
    border-radius: 15px;
    padding: 18px 20px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    border: 1px solid #eee;

    display: flex;
    gap: 14px;
    align-items: flex-start;
}

/* Icon Kreis */
.alert-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;

    font-weight: 900;
    font-size: 18px;
    line-height: 1;
}

/* Textbereich */
.alert-content { flex: 1; }

.alert-meta {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 6px;
}

.alert-kind {
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 4px 10px;
    border-radius: 50px;
    border: 1px solid transparent;
}

.alert-title {
    margin: 0 0 8px 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: #222;
}

.alert-text {
    margin: 0;
    color: #444;
    line-height: 1.5;
}

/* --- Varianten nach alert_kind --- */

/* 0 = OK (grün) */
.alert-success {
    border-color: #c3e6cb;
    background: #f2fbf5;
}
.alert-success .alert-icon {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}
.alert-success .alert-kind {
    background: #d4edda;
    color: #155724;
    border-color: #c3e6cb;
}

/* 1 = Info (blau) */
.alert-info {
    border-color: #bee5eb;
    background: #f1fbff;
}
.alert-info .alert-icon {
    background: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}
.alert-info .alert-kind {
    background: #d1ecf1;
    color: #0c5460;
    border-color: #bee5eb;
}

/* 2 = Warnung (gelb) */
.alert-warning {
    border-color: #ffeeba;
    background: #fffbf0;
}
.alert-warning .alert-icon {
    background: #fff3cd;
    color: #856404;
    border: 1px solid #ffeeba;
}
.alert-warning .alert-kind {
    background: #fff3cd;
    color: #856404;
    border-color: #ffeeba;
}

/* 3 = Schwerer Fehler (rot) */
.alert-danger {
    border-color: #ffc9c9;
    background: #fff3f3;
}
.alert-danger .alert-icon {
    background: #ffe6e6;
    color: #b02a37;
    border: 1px solid #ffc9c9;
}
.alert-danger .alert-kind {
    background: #ffe6e6;
    color: #b02a37;
    border-color: #ffc9c9;
}

/* Mobile */
@media (max-width: 768px) {
    .alert-box { padding: 16px; }
    .alert-icon { width: 38px; height: 38px; min-width: 38px; }
}