#contactform {padding-top:min(100px, 10%);padding-bottom:min(100px, 10%); background: #d3cbbe url(images/eingebaute-duschwanne.jpg) left center no-repeat; background-size:cover; color:#000000; max-width: var(--seitenbreite); margin:0 auto 15px; font-size: 14px; font-family: 'SFPRODISPLAYMEDIUM';
& .cfs {max-width:1528px;}
& .item {flex:1 1 400px; border-radius: 20px; padding:min(70px,5%); margin:0 20px 30px; background: rgba(255,255,255,.4); backdrop-filter: blur(12px); & h3 {margin-bottom: 40px;}}
& .item2 {text-align: center; & h3 {text-align: center;}}
& input {color:#000000; font-size: 16px; padding: 8px 0; border: 0;height: 38px;background: transparent;border-bottom: 1px solid rgba(0,0,0,.5); position:relative;}
& input::placeholder {color:rgba(0,0,0,.5);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;padding: 4px 0 0 8px;}
& form-group label {width: 140px; padding: 0 10px; text-align: left;}
& .form-group2 {font-size:15px; margin-top:40px; & input {text-align: center; margin:10px 0 20px;}}
& textarea {height: 150px; flex:1; padding: 4px 0 0 8px;; font-size: 16px; line-height: 22px; border:0; font-family: sans-serif;  background: rgba(255,255,255,.2); color:#000000;border-bottom: 1px solid rgba(0,0,0,.5);}
& textarea::placeholder {color:rgba(0,0,0,.5); 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; margin-top:50px; padding: 11px 0; background: transparent; color: #000000; letter-spacing: .5px; font-size: 16px; cursor: pointer; transition: all .3s ease; border-radius: 100px; border: 2px solid #000000;width: 100%;
    max-width: 360px;
    margin: 50px auto 0;}
& button:hover {scale:1.05; background:#000;color:#fff; transition: all .3s ease;}
& input.image_upload {border-bottom: 1px solid rgba(0,0,0,.5); position:relative;}
& .upload {padding:10px 0;font-size: 14px; font-family: 'SFPRODISPLAYMEDIUM';}
& .input-hidden {padding: 6px 0px 0 29px; border:0;}
& .max {margin-bottom: 9px;width: 100%;}
& .max_button {margin-bottom: 9px;width: 100%; text-align: center;}
/*
& .input-hidden {width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; position: absolute;  z-index: -1;}
*/
& .btn-upload {position:absolute; bottom: 9px; left:0; display: inline-flex; width:163px;  align-items: center; padding: 10px 15px; background-color: #1e1f2c; color: #fff; cursor: pointer; border-radius: 5px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);transition: all .3s ease;}
& .btn-upload:hover {background-color: #737594; transition: all .3s ease;}
& .btn-upload:hover .pfeil {animation: aniborder 1s linear;}

& .button-icon {margin-right: 8px; color: inherit; font-size: 14px;}
& .pfeil {border-radius: 50px; transform: rotateZ(90deg);width: 20px;}
  
}

#danke {background: #4e5659 url(images/eingebaute-duschwanne.jpg) center center no-repeat; background-size:cover; color:#000000;       
& .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; }
    & .cfs {width: 100%; padding:0}
    & .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;}
     }
}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active {
    /* Setzt den Hintergrund auf Transparent und fügt einen "inneren" Schatten in der gleichen Farbe wie Ihr gewünschter Hintergrund hinzu */
    transition: background-color 5000s ease-in-out 0s;
    -webkit-text-fill-color: #000; /* Stellt sicher, dass die Textfarbe schwarz bleibt */
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: 0 0 0 1000px #FFF inset !important; /* #FFF durch Ihre gewünschte Hintergrundfarbe ersetzen (z.B. #F0F0F0, wenn Ihr Formular grau ist) */
}

/* Für Firefox (Gecko-Browser) */
input:-moz-ui-invalid {
  box-shadow: none;
}

/* Optional: Um sicherzustellen, dass die Textfarbe korrekt ist, falls der Browser sie ändert */
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset;
    box-shadow: 0 0 0 1000px white inset;
    -webkit-text-fill-color: black;
}