.kontaktformular {
    width: 91.66667%;
    max-width: 480px;
    margin: 2rem auto 2rem auto;
}

@media screen and (min-width: 640px) {
    .kontaktformular {
        width: 100%;
    }
}

.contact-grid {
    display: grid;
    gap: 0.5rem;
    grid-template-areas:
    "f f"
    "n n"
    "e e"
    "a a"
}

.berechnung-grid {
    display: grid;
    gap: 0.5rem;
    grid-template-areas:
    "f f"
    "n n"
    "e e"
    "fl fl"
    "an an"
    "a a"
}

#contact-form textarea::placeholder,
#contact-form input::placeholder { 
    opacity: 0.9;
    color: black;
}

#contact-form textarea,
#contact-form input {
    border: 1px solid black;
    width: 100%;
    padding: .6rem .6rem;
}

#contact-form input[type=submit] {
    width: max-content;
    padding: .5rem 2rem;
}

#contact-form textarea:focus,
#contact-form input:focus {
    outline-color: var(--clr-grey);
}

#contact-form .contact-checkbox {
    position: relative;
    top: 5px;
    display: inline-block;
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

@media screen and (min-width: 1024px){
    #contact-form .contact-checkbox {
        width: 20px;
        height: 20px;
    }
}

.contact-name {
    grid-area: n;
}

.contact-firma {
    grid-area: f;
}

.contact-email {
    grid-area: e;
}

.contact-flaeche {
    grid-area: fl;
}

.contact-anteil {
    grid-area: an;
}

.contact-agree {
    width: 100%;
    grid-area: a;
}

.kontaktformular p {
    margin: 0.5rem 0 2rem 0;
}

.pflicht {
    color: rgb(192, 51, 51);
    font-size: 14px;
    margin-top: .5rem;
}

#status-message {
    opacity: 0;
    color: var(--clr-black);
    text-align: center;
    margin: 1rem 0 2rem 0;
    line-height: 1;
    transition: opacity .3s linear;
    font-weight: bold;
}

#status-message.error {
    color: rgb(192, 51, 51);
}

#status-message.success {
    color: rgb(68, 177, 68);
}

@media screen and (min-width: 1024px){
    #status-message {
        margin: 2rem 0 4rem 0;
    }
}