/* =========================================================
   form-errors.css
   Fehlermeldungen und Fehlerzustände für Kontaktformular
   Wichtig: Klassen wurden nicht umbenannt.
========================================================= */

/* ---------- Gemeinsames Design für alle Fehlermeldungen ---------- */
.error-Surname,
.error-Name,
.error-Email,
.error-Phone,
.error-Message {
    display: block;

    min-height: 18px;
    margin-top: 4px;
    margin-bottom: 4px;

    color: #dc2626;
    font-family: "Nunito", sans-serif;
    font-size: 0.88rem;
    font-weight: 800;
    line-height: 1.35;

    position: relative;
    z-index: 2;
}

/* Nachricht-Feld braucht etwas mehr Abstand */
.error-Message {
    margin-top: 8px;
}

/* ---------- Rote Umrandungen bei Fehlern ---------- */
.field input.input-errorSurname,
.field input.input-errorName,
.field input.input-errorEmail,
.field input.input-errorPhone,
.field textarea.textarea-errorMessage {
    border: 1.5px solid #dc2626;
    background: rgba(254, 242, 242, 0.95);
}

/* ---------- Fokus trotz Fehler professionell anzeigen ---------- */
.field input.input-errorSurname:focus,
.field input.input-errorName:focus,
.field input.input-errorEmail:focus,
.field input.input-errorPhone:focus,
.field textarea.textarea-errorMessage:focus {
    border-color: #dc2626;
    box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.14);
    background: #ffffff;
}

/* ---------- Kleine Animation, wenn Fehler erscheint ---------- */
.error-Surname:not(:empty),
.error-Name:not(:empty),
.error-Email:not(:empty),
.error-Phone:not(:empty),
.error-Message:not(:empty) {
    animation: errorFadeIn 0.25s ease;
}

@keyframes errorFadeIn {
    from {
        opacity: 0;
        transform: translateY(-3px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}