/*SELECT; INPUT; TEXTAREA, "Auswahl"-kontaktieren -> #nf-field-9-wrap */
form .nf-form-content #nf-field-9-wrap,
form .nf-form-content .field-wrap.list-select-wrap .nf-field-element,
form .nf-form-content select,
form .nf-form-content textarea,
form .nf-form-content input,
form .nf-form-content input[type=email],
form .nf-form-content input[type=text]{
    background: var(--brigthBlue);
    border:2px solid var(--brigthBlue);
    color:var(--mainFontColor) !important;
    text-transform: uppercase;
    letter-spacing: var(--letterspacingversalien);
}

form .nf-form-content textarea,
form .nf-form-content input{
    text-transform:initial !important;
    letter-spacing: inherit !important;
}

form .nf-form-content .field-wrap.list-select-wrap .nf-field-element:hover,
form .nf-form-content .field-wrap.list-select-wrap .nf-field-element:focus,
form .nf-form-content textarea:hover,
form .nf-form-content input:hover,
form .nf-form-content textarea:focus,
form .nf-form-content input:hover,
form .nf-form-content input:focus,
form .nf-form-content input[type=text]:focus,
form .nf-form-content input[type=email]:focus{
    background: var(--brigthBlue);
    border:2px solid var(--blaeulich);
    box-shadow: 0 30px 25px -20px rgb(0 0 0 / 40%);
    outline: none;
    
}
select{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
select.ninja-forms-field{
    background: var(--darkBlue) !important;
}
.field-wrap.list-select-wrap .nf-field-element:after{
    position: absolute;
    content: "\F282";
    font-family: var(--fontBootstrap);
    color: var(--mainFontColor);
    right: 10px;
    top: 17px;
    z-index: 2;
    font-size: 24px;
}
.field-wrap.list-select-wrap .nf-field-element:hover:after,
.field-wrap.list-select-wrap .nf-field-element:focus:after{
    color: white;
}

/*CHECKBOX*/
.checkbox-wrap .nf-field-element label:after, 
.checkbox-wrap .nf-field-label label:after, 
.listcheckbox-wrap .nf-field-element label:after, 
.listcheckbox-wrap .nf-field-label label:after{
    background: transparent !important;
    border-color: white !important;
    width: 30px !important;
    height: 30px !important;
    top: -6px !important;
    border-width: 2px!important;
}
.checkbox-wrap.nf-fail.nf-error label:after,
.checkbox-wrap .nf-field-element label:hover:after, 
.checkbox-wrap .nf-field-label label:hover:after, 
.listcheckbox-wrap .nf-field-element label:hover:after, 
.listcheckbox-wrap .nf-field-label label:hover:after{
    border-color: var(--blaeulich) !important;
}
body.design .checkbox-wrap.nf-fail.nf-error label:after,
body.design-und-kommunikation .checkbox-wrap.nf-fail.nf-error label:after,
body.design .checkbox-wrap .nf-field-element label:hover:after, 
body.design .checkbox-wrap .nf-field-label label:hover:after, 
body.design .listcheckbox-wrap .nf-field-element label:hover:after, 
body.design .listcheckbox-wrap .nf-field-label label:hover:after,
body.design-und-kommunikation .checkbox-wrap .nf-field-element label:hover:after, 
body.design-und-kommunikation .checkbox-wrap .nf-field-label label:hover:after, 
body.design-und-kommunikation .listcheckbox-wrap .nf-field-element label:hover:after, 
body.design-und-kommunikation .listcheckbox-wrap .nf-field-label label:hover:after{
    border-color: var(--neonGreen) !important;
}

.checkbox-container.label-right .nf-field-label{
    width:auto !important;
}
.label-right .nf-field-description{
    width:calc(100% - 20px) !important;
    margin-right: 0 !important;
    padding-left: 20px;
    }
    .label-right .nf-field-description p{
        font-size: 14px;
    }
.checkbox-wrap .nf-field-element label:before, 
.checkbox-wrap .nf-field-label label:before, 
.listcheckbox-wrap .nf-field-element label:before, 
.listcheckbox-wrap .nf-field-label label:before{
    color: var(--blaeulich) !important;
    left: -25px !important;
    content:"\F272" !important;
    font-family: var(--fontBootstrap) !important;
}
body.design .checkbox-wrap .nf-field-element label:before, 
body.design .checkbox-wrap .nf-field-label label:before, 
body.design .listcheckbox-wrap .nf-field-element label:before, 
body.design .listcheckbox-wrap .nf-field-label label:before,
body.design-und-kommunikation .checkbox-wrap .nf-field-element label:before, 
body.design-und-kommunikation .checkbox-wrap .nf-field-label label:before, 
body.design-und-kommunikation .listcheckbox-wrap .nf-field-element label:before, 
body.design-und-kommunikation .listcheckbox-wrap .nf-field-label label:before{
    color: var(--neonGreen) !important;
}
body.design .nf-field-element input:hover, 
body.design-und-kommunikation .nf-field-element input:hover,
body.design .nf-field-element input:focus, 
body.design-und-kommunikation .nf-field-element input:focus,
body.design .nf-field-element textarea:focus, 
body.design-und-kommunikation .nf-field-element textarea:hover
{
    border-color: var(--neonGreen) !important;
}
.submit-container .nf-field-element {
    text-align: right;
}


/*Kontaktform*/
.nf-after-form-content .nf-form-hp label{
    /*Bugfix*/
    position: fixed;
}

form .nf-form-content{
    --paddingForm:20px;
    max-width: var(--containerMaxWidth);
    }
    form .nf-form-content nf-fields-wrap{
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        gap: 2%;
        }
        /*Felder-Breite*/
        form .nf-form-content nf-fields-wrap nf-field:nth-child(1),
        form .nf-form-content nf-fields-wrap nf-field:nth-child(2),
        form .nf-form-content nf-fields-wrap nf-field:nth-child(6),
        form .nf-form-content nf-fields-wrap nf-field:nth-child(7),
        form .nf-form-content nf-fields-wrap nf-field:nth-child(8){
            width:100%
        }
        form .nf-form-content nf-fields-wrap nf-field:nth-child(3),
        form .nf-form-content nf-fields-wrap nf-field:nth-child(4),
        form .nf-form-content nf-fields-wrap nf-field:nth-child(5){
            width:32%
        }

        form .nf-form-content nf-fields-wrap nf-field:nth-child(2),
        form .nf-form-fields-required{
            display:none
        }

        /*Requirements*/
        form .ninja-forms-req-symbol{
            color:var(--colorText);
        }
        .nf-form-fields-required{
            color: var(--brigthGrey);;
            text-align: right;
            padding: 5px;
            max-width: var(--containerMaxWidth);
            margin: 0 auto;
            margin-bottom: 10px;
            font-size: 12px;
            }

        .checkbox-wrap .ninja-forms-req-symbol{
            top:-12px;
            left:6px;
        }
        
        /*Errors*/
        form .nf-form-content .nf-error .nf-error-msg{
            position: absolute;
            color:var(--blaeulich);
            font-size: 14px
        }
        form .nf-form-content .checkbox-wrap.nf-error label{
            border-color: var(--blaeulich) !important;
        }
        form .nf-form-content .nf-error .ninja-forms-field{
            border-color:var(--blaeulich) !important;
        }
        form .nf-form-content .nf-error.field-wrap .nf-field-element:after{
            display: none;
        }
        body.design form .nf-form-content .nf-error .nf-error-msg,
        body.design-und-kommunikation form .nf-form-content .nf-error .nf-error-msg{
            color:var(--neonGreen);
        }
        body.design form .nf-form-content .nf-error .ninja-forms-field,
        body.design-und-kommunikation form .nf-form-content .nf-error .ninja-forms-field{
            border-color:var(--neonGreen) !important;
        }
        body.design-und-kommunikation form .nf-form-content .checkbox-wrap.nf-error label,
        body.design form .nf-form-content .checkbox-wrap.nf-error label{
            border-color: var(--neonGreen) !important;
        }
        /*Fields*/
        form .nf-form-content .nf-field-container{
            margin-bottom:56px
            }
            form .nf-form-content .nf-field-container .nf-field-element input{
                padding: var(--paddingForm);
                height: 60px;
                width: 100%;
            }
            form .nf-form-content .nf-field-container .nf-field-element input[type=submit]{
                height: auto;
                text-transform: uppercase !important;
                letter-spacing: var(--letterspacingversalien) !important;
            }

            /*Label*/
            form .nf-form-content p{
                margin-left: 0;
                margin-right: 0;
                max-width: 100%;
            }

            form .nf-form-content .nf-field-container:not(.checkbox-container) .nf-field-label{
                position: absolute;
                z-index: 1;
                left: var(--paddingForm);
                top: var(--paddingForm);
                }
                form .nf-form-content label{
                    text-transform: uppercase;
                    letter-spacing: var(--letterspacingversalien);
                    font-size: 16px;
                    font-weight: 400;
                    }
                    .nf-form-content label::placeholder{
                        display:none;
                        }

                form .nf-form-content .nf-field-container:not(.checkbox-container) .nf-fail.nf-error .nf-field-label,
                form .nf-form-content .nf-field-container:not(.checkbox-container) .focus-input .nf-field-label{
                    left: 0;
                    top: -30px;
                    }
                    form .nf-form-content .nf-field-container:not(.checkbox-container) .nf-fail.nf-error .nf-field-label label,
                    form .nf-form-content .nf-field-container:not(.checkbox-container) .focus-input .nf-field-label label{
                        color:var(--brigthGrey);
                        }

            /*Auswahl - kontaktieren*/
            #nf-label-field-9,#nf-label-field-10{
                display: none;
            }
            #nf-field-9-container{
                cursor: pointer;
                background: transparent;
                }
                body.design #nf-field-9-container:after,
                body.design-und-kommunikation #nf-field-9-container:after,
                body.architektur #nf-field-9-container:after{
                    display: none;
                }
                #nf-field-9-container:after{
                    font-family: var(--fontBootstrap);
                    content:"\F282";
                    font-size: 20px;
                    position: absolute;
                    top: 25px;
                    right: 12px;
                    }
                #nf-field-9-container.open-select:after{
                    content:"\F286";
                    }
                    #nf-field-9-container #nf-field-9-wrap{    
                        border:2px solid white;
                    }
                    #nf-field-9-container.open-select #nf-field-9-wrap{
                        border-bottom: 2px solid var(--brigthBlue);
                        transition: none;
                        }
                        #nf-field-9-container .nf-field-element{
                            background: var(--darkBlue);
                            }

                        #nf-field-9-container .nf-field-element p{
                            margin-bottom:0;
                            padding: var(--paddingForm);
                            color:white;
                            line-height: 125%;
                            height: 60px;
                            }
                    #nf-field-9-container.is-disabled #nf-field-9-wrap{
                        border: 2px solid var(--brigthGrey);       
                        }
                        #nf-field-9-container.is-disabled #nf-field-9-wrap p{
                            color:var(--brigthGrey);
                        }

                /*Auswahl - kontaktieren Dropdown*/        
                form .nf-form-content nf-fields-wrap nf-field:nth-child(2){
                    transition: none;
                    background: var(--brigthBlue) !important;
                    top: -58px;
                    border: 2px solid white;
                    border-top: 0;
                    }

                body.architektur #nf-field-9-wrap .nf-field-element,
                body.design #nf-field-9-wrap .nf-field-element,
                body.design-und-kommunikation #nf-field-9-wrap .nf-field-element{
                    background: var(--darkBlue) !important;
                    cursor: default;
                }
                body.architektur form .nf-form-content nf-fields-wrap nf-field:nth-child(2),
                body.design form .nf-form-content nf-fields-wrap nf-field:nth-child(2),
                body.design-und-kommunikation form .nf-form-content nf-fields-wrap nf-field:nth-child(2){
                    display:none !important
                }
                    #nf-field-10-container{
                        margin-bottom: -10px;
                        }
                        #nf-field-10-container ul li{
                            padding: 0 !important;
                            margin-bottom: 0 !important;
                        }
                        #nf-field-10-container ul li:first-child{
                            border-bottom:1px solid var(--darkBlue);
                        }
                        #nf-field-10-container label{
                            cursor: pointer;
                            text-transform: uppercase;
                            color:var(--brigthGrey);
                            padding: var(--paddingForm) !important;
                            margin-left: 0 !important;
                            display: block;
                        }
                        #nf-field-10-container label:hover{
                            color:var(--darkBlue);
                            background: var(--blaeulich);
                        }
                        body.design #nf-field-10-container label:hover,
                        body.design-und-kommunikation #nf-field-10-container label:hover{
                            background: var(--neonGreen);
                        }
                        body.design #nf-field-9-container:after,
                        body.design-und-kommunikation #nf-field-9-container:after,
                        #nf-field-10-container label:before,
                        #nf-field-10-container label:after,
                        #nf-field-10-container input{
                            position: fixed;
                            opacity: 0;
                            pointer-events: none;
                        }

            /* Text Area "Ihre Nachricht" */
            #nf-field-3-container textarea{
                width: 100%;
                min-height: 250px;
                padding: 1rem;
            }
            /* Senden button */
            #nf-field-4{
                width: auto;
            }
                        
            /* Checkbox Datenschutz */
            #nf-field-8{
                display: none;
            }
            #nf-field-8-wrap{
                display: flex;
                align-items: center;
                }
                #nf-label-field-8{
                    width: 30px;
                    height: 30px;
                    display: block;
                    border: 2px solid white;
                    overflow: hidden;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    }
                    #nf-label-field-8 span {
                        display: none;
                    }
                    #nf-label-field-8:before{
                        position: relative;
                        /* transition: all 0.3s ease-in-out; */
                        font-size: 1.5rem;
                    }
                    #nf-label-field-8.nf-checked-label:before{
                        left: 0 !important;
                    }
                #nf-field-8-wrap .nf-field-description p{
                    margin-bottom: 0;
                }
                .nf-field-container .checkbox-wrap .nf-field-label label:after{
                    left:-30px !important
                }

/*Architekten*/ 
body.architektur form .nf-form-content .field-wrap.list-select-wrap .nf-field-element:hover, 
body.architektur form .nf-form-content .field-wrap.list-select-wrap .nf-field-element:focus, 
body.architektur form .nf-form-content textarea:hover, 
body.architektur form .nf-form-content input:hover, 
body.architektur form .nf-form-content textarea:focus, 
body.architektur form .nf-form-content input:hover, 
body.architektur form .nf-form-content input:focus, 
body.architektur form .nf-form-content input[type=text]:focus, 
body.architektur form .nf-form-content input[type=email]:focus,
body.architektur form .nf-form-content .nf-error .ninja-forms-field,
body.architektur form .nf-form-content .checkbox-wrap.nf-error label{
    border-color:white !important
}

body.architektur form .nf-form-content .checkbox-wrap label:before,
body.architektur form .nf-form-content .nf-error-msg{
    color: white !important;
}


            /*After Form*/
            .nf-after-form-content{
                position: absolute;
                margin-top: -80px;
                }
                .nf-after-form-content .nf-error-field-errors{
                    color:var(--blaeulich);
                    font-size: 14px;
                    display: none !important;
                }
                body.design .nf-after-form-content .nf-error-field-errors,
                body.design-und-kommunikation .nf-after-form-content .nf-error-field-errors{
                    color:var(--neonGreen);
                    font-size: 14px;
                }
                
                /*Messages*/
                .nf-error-wrap.nf-error{
                    margin-top:10px
                }

                .nf-response-msg{
                    background: var(--blaeulich);
                    display: none;
                    padding: 18px 30px;
                    border-radius: 10px;
                    margin-bottom: 70px;
                }
                .nf-error.listimage-wrap .nf-field-element ul, 
                .nf-error .ninja-forms-field{
                    border-width:2px !important;
                }
                body.design .nf-response-msg,
                body.design-und-kommunikation .nf-response-msg{
                        background: var(--neonGreen);
                    
                    }
                    .nf-response-msg p{
                        margin-bottom: 0;
                        color: var(--middleBlue);
                        font-family: 'Montserrat Medium';
                        text-align: center;
                        font-size: 20px;
                        }
                
                form .nf-pass .ninja-forms-field{
                    border-color: transparent!important;
                    }
                    .nf-pass.field-wrap .nf-field-element:after{
                        content:"";display:none;
                    }
                    .checkbox-wrap .nf-field-element label:after, 
                    .checkbox-wrap .nf-field-label label:after{
                        border:0
                    }
/*SearchForm*/
.search-form .search-field{
    border:var(--inputBorder) !important;
    background: var(--inputBackground) !important;
    color:var(--brigthBlue) !important;
}