/* ==========================================================
   LUMA IMMOBILIEN
   KONTAKTFORMULAR
   Datei: luma-formular.css
========================================================== */


/* ----------------------------------------------------------
   KONTAKTDATEN
---------------------------------------------------------- */

.contact-data{

    margin:40px 0 50px;

}

.contact-data h3{

    margin:0 0 20px;

    font-size:1.25rem;

    font-weight:500;

    color:#1A1A18;

}

.contact-data p{

    margin:0 0 24px;

    line-height:1.8;

    color:#444;

}


/* ----------------------------------------------------------
   TRENNLINIE
---------------------------------------------------------- */

.content-divider{

    border:0;

    border-top:1px solid #d8d8d8;

    margin:50px 0;

}


/* ----------------------------------------------------------
   FORMULARBOX
---------------------------------------------------------- */

.contact-form{

    margin-top:10px;

    padding:45px;

    border:1px solid #d9d9d9;

    background:#ffffff;

}


/* ----------------------------------------------------------
   FORMULARÜBERSCHRIFT
---------------------------------------------------------- */

.contact-form h3{

    margin:0 0 35px;

    font-size:1.55rem;

    font-weight:300;

    color:#1A1A18;

}


/* ----------------------------------------------------------
   LABELS
---------------------------------------------------------- */

.contact-form label{

    display:block;

    margin-bottom:8px;

    font-size:.95rem;

    font-weight:500;

    color:#333;

}


/* ----------------------------------------------------------
   EINGABEFELDER
---------------------------------------------------------- */

.contact-form input[type=text],
.contact-form input[type=email],
.contact-form textarea{

    width:100%;

    padding:15px 18px;

    margin-bottom:26px;

    border:1px solid #cfcfcf;

    background:#ffffff;

    font:inherit;

    color:#1A1A18;

    transition:border-color .25s ease,
               box-shadow .25s ease;

    box-sizing:border-box;

}


/* ----------------------------------------------------------
   TEXTAREA
---------------------------------------------------------- */

.contact-form textarea{

    resize:vertical;

    min-height:220px;

}


/* ----------------------------------------------------------
   FOCUS
---------------------------------------------------------- */

.contact-form input:focus,
.contact-form textarea:focus{

    outline:none;

    border-color:#38b54a;

    box-shadow:0 0 0 3px rgba(56,181,74,.08);

}


/* ----------------------------------------------------------
   CONSENT
---------------------------------------------------------- */

.consent{

    display:flex;

    align-items:flex-start;

    gap:12px;

    margin:15px 0 35px;

}

.consent input{

    margin-top:5px;

}

.consent label{

    margin:0;

    font-size:.90rem;

    line-height:1.6;

    font-weight:400;

}

.consent a{

    color:#1A1A18;

    text-decoration:underline;

}

.consent a:hover{

    color:#b31c69;

}


/* ----------------------------------------------------------
   BUTTON
---------------------------------------------------------- */

.contact-form button{

    display:inline-block;

    padding:15px 34px;

    border:none;

    background:#38b54a;

    color:#ffffff;

    font-size:.95rem;

    font-weight:500;

    letter-spacing:.05em;

    cursor:pointer;

    transition:all .25s ease;
    
    border-radius:2px;

}

.contact-form button:hover{

    background:#b31c69;

}
/* ----------------------------------------------------------
   HONEYPOT
---------------------------------------------------------- */

.hp-field{

    position:absolute;

    left:-9999px;

}


/* ----------------------------------------------------------
   MOBILE
---------------------------------------------------------- */

@media screen and (max-width:980px){

    .contact-form{

        padding:30px;

    }

}


@media screen and (max-width:640px){

    .contact-form{

        padding:24px;

    }

    .contact-form button{

        width:100%;

    }

}