

#contactform {padding-top:min(100px, 10%);padding-bottom:min(100px, 10%); background: #4e5659 url(images/bg.jpg) left center no-repeat; background-size:cover; color:#fff; max-width: var(--seitenbreite); margin:0 auto 15px;
& .cfs {align-items: center; max-width:1528px;}
& .formtable {border-radius: 20px; padding: 65px 10% 35px; background: rgba(255,255,255,.05); backdrop-filter: blur(6px); & h3 {margin-bottom: 40px;}}
& .item2 {margin-top:66px;}
& input {color:#fff; font-size: 16px; padding: 8px 0; border: 0;height: 38px;background: transparent;border-bottom: 1px solid rgba(255,255,255,.5); position:relative;}
& input::placeholder {color:#fff;transition: all .5s ease;}
& input:active, input:focus {border:0; background:rgba(255,255,255,.15); outline:none;}
& input:focus::placeholder {color:transparent; transition: all .5s ease;}
& label {line-height: 16px; padding:0 20px; font-size: 14px; display: none;}
& .form-group {display: flex;flex-wrap: wrap; margin-bottom: 10px; align-items: center; opacity:0; transform: translate(0, 20px);transition: all .4s ease;}
& .form-group.in-view {opacity: 1; transition: all 1.5s ease; transition-delay: .2s; transform: translate(0, 0);}
& .form-group input {flex: 1 1 auto;}
& .form-group label {width: 140px; padding: 0 10px; text-align: left;}
& .item {flex:1 1 400px; text-align: center; padding:0 20px;}
& .form-group2 {font-family: sans-serif; font-weight: 400;}
& textarea {height: 150px; flex:1; padding: 5px 0; font-size: 16px; line-height: 22px; border:0; font-family: sans-serif;  background: transparent; color:#fff;border-bottom: 1px solid rgba(255,255,255,.5);}
& textarea::placeholder {color: #fff; transition: all .5s ease;}
& textarea:focus::placeholder {color:transparent; transition: all .5s ease;}
& textarea:active, textarea:focus {outline:none;background:rgba(255,255,255,.15);}
& button {width: 170px; padding: 11px 0; background: transparent; color: #fff; letter-spacing: .5px; font-size: 16px; cursor: pointer; transition: all .3s ease; border-radius: 100px; border: 2px solid #fff;}
& button:hover {scale:1.2; transition: all .3s ease;}
& .form-group3 {display: flex;margin: 7px 0 22px; justify-content: space-between; align-items: center;flex-wrap: wrap; opacity:0; transform: translate(0, 20px);transition: all .4s ease;
    & input {height: 38px; display: block; text-align: center; margin: 0 auto 40px;}
    & label {flex:1; padding:0 10px 0 0; text-align: left;}
    & div {margin-top: 40px; width: 100%;}
}
& .form-group3.in-view {opacity: 1; transition: all 1.5s ease; transition-delay: .2s; transform: translate(0, 0);}
}

@media screen and (width < 1000px) {
    #contactform {background:#323536;}
}



#danke {background:url(images/Hintergrund.jpg) center center no-repeat; background-size:cover; color:#fff;       
& .cfs {height: 100vh;  align-items: center; display: flex; justify-content: center;font-family: sans-serif; font-size: 20px;}
& .item {text-align: center;}
& p {color: #fff; font-size:20px;}
& .button {display: inline-block; text-decoration: none; margin:30px 0 0; background: #fff; color:#000000; padding:7px 40px; font-weight: 400; transition: all .3s ease; border-radius: 40px;}
& .button:hover {scale:1.2; box-shadow: 0px 8px 16px rgba(0,0,0,.2); transition: all .3s ease;}
}



@media screen and (width < 600px) {
    #danke {background:#4e5659;}
    #contactform {
    & .form-group label {width: 100%;}
    & .form-group label {padding:0; margin:10px 0 5px; }
    & .item {padding:0;}
    & .cfs {width: 100%;}
    & .form-group3 label {width: 100%; text-align: right; flex:1 1 200px;}
    & .form-group3 input {margin:13px auto; flex:1 1 200px;}
    & textarea {margin-top:20px;}
    & .item {text-align: center;}
    }
}
@media screen and (width < 444px) {
    #contactform {
    & .form-group3 label {text-align: center;}
    & .formtable {padding: 21px 2% 0px;}
     }
}

.kontaktcontainer {
    padding: 3%;
    border-bottom: 1px solid rgba(255,255,255,.2);
    width: 400px;
    margin: 0 auto;
    font-size: 17px;
    font-family: sans-serif;
    font-weight: 100;
    line-height: 30px;
}