/*---Formular---*/
#main-wrap {
    padding: 1em;
}

#kontakt-txt form {
    display: inline-flex;
    flex-direction: column;
    width: 100%;
}

.form_wrap {
    display: flex;
    justify-content: center;
}

.input-txt, textarea {
    width: 100%;
}

.error, #submit-bestaetigung {
    max-width: 26rem;
}

/* Formulare + Input-Felder */
/*Label*/
main label {
    padding: .1em 0 .2em;
    cursor: pointer;
}

/* Input-Felder */
.input-txt, textarea {
    margin-top: .3em;
    font-size: .81rem;
    padding: 3px 7px;
    border: 1px solid #a6a6a6;
    border-top-color: #949494;
    border-radius: 3px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 1px 0 rgba(0, 0, 0, .07) inset;
    outline: none;
}

.input-txt {
    height: 1.75rem;
    background-color: #F5F5F5;
    background-image: linear-gradient(rgba(221, 221, 221, 1), white 1.75rem);
}

textarea {
    padding: 4px 7px;
    background-color: #F5F5F5;
    background-image: linear-gradient(rgba(221, 221, 221, 1), rgba(221, 221, 221, 0) 1.75rem);
    line-height: 1.5;
}

/* Hover + Focus von Input& Textarea */
.input-txt:hover, textarea:hover {
    border-color: #0060DF;
    box-shadow: 0 0 3px 1px rgba(0, 96, 223, 0.3);
}

.input-txt:focus, textarea:focus {
    border-color: #0060DF;
    box-shadow: 0 0 1px 1px #0060DF, 0 0 4px 3px rgba(0, 96, 223, 0.3);
}

.alert {
    position: relative;
    padding: .75em 1.25em;
    margin-bottom: 1em;
    border: 1px solid transparent;
    border-radius: .25em
}

.alert-success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb
}

/*Check*/
#check-wrap {
    display: inline-block;
    position: relative;
    line-height: 1rem;
    margin-bottom: 1.5em;
}

#check-input {
    position: absolute;
    z-index: -999;
    left: -99999px;
    overflow: hidden;
    height: 1px;
    width: 1px;
    margin: 0;
    padding: 0;
    border: none;

}

#check-label {
    display: inline-block;
    cursor: pointer;
    line-height: 1.5rem;
    padding: 1px 0;
}

#check-label::before {
    line-height: 1rem;
    content: '';
    position: relative;
    top: 2px;
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 1px solid #A6A6A6;
    border-radius: 3px;
    background-color: #F5F5F5;
    background-image: linear-gradient(rgba(221, 221, 221, 1), white);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 1px 0 rgba(0, 0, 0, .07) inset;
}

#check-label:hover::before {
    border-color: #0060DF;
    box-shadow: 0 0 3px 1px rgba(0, 96, 223, 0.3);
}

.check-input:focus + #check-label::before {
    border-color: #0060DF;
    box-shadow: 0 0 1px 1px #0060DF, 0 0 4px 3px rgba(0, 96, 223, 0.3);
}

.check-input:checked + #check-label::before {
    border-color: #008000;
    box-shadow: 0 0 1px 1px #008000, 0 0 4px 3px rgba(0, 128, 0, 0.3);
}

#check-input:checked + #check-label::after {
    display: inline-block;
    content: '';
    height: 6px;
    width: 10px;
    border-left: 2px solid black;
    border-bottom: 2px solid black;
    transform: rotate(-45deg);
    position: absolute;
    left: 4px;
    top: 7px;
}


/*submit*/
#submit-wrap {
    text-align: center;
    margin: 0 auto 2em;
}

/* Error */
.error {
    text-align: left;
    margin-top: .5em;
    color: #FF0000;
}

.error-wrap {
    margin: 0 0 1em;
}

.error > p {
    max-width: 40rem;
    margin: 0 auto 1rem;
}

.error a:hover {
    text-decoration: underline;
}

/* JS-Feedback */
.true:hover, .true:focus, #check-wrap:hover .true-check + #check-label::before, .true-check:focus + #check-label::before {
    border-color: #008000;
    box-shadow: 0 0 3px 1px rgba(0, 128, 0, 0.3);
}

.false:hover, .false:focus, #check-wrap:hover .false-check + #check-label::before, .false-check:focus + #check-label::before {
    border-color: #FF0000;
    box-shadow: 0 0 3px 1px rgba(255, 0, 0, 0.3);
}

.true {
    border-color: #008000;
    box-shadow: 0 0 1px 1px #008000, 0 0 4px 3px rgba(0, 128, 0, 0.3);
}

.false, .false-check + #check-label::before {
    border-color: #FF0000;
    box-shadow: 0 0 1px 1px #FF0000, 0 0 4px 3px rgba(255, 0, 0, 0.3);
}

@media screen and (min-width: 899px) {
    #main-wrap {
        max-width: 900px;
        margin: auto;
    }
}