/*
    die verwendeten Farben werden direkt im Programm (*.cgi) ausgegeben
    [ PROC FromCSSFiles() ]
    -------------------------------------------------------------------
*/

*{margin:0;padding:0;box-sizing:border-box
}

body,html{height:100%;font-family:HankenGrotesk-Medium}

a{font-family:HankenGrotesk-Medium;font-size:14px;line-height:1.7;color:#666;margin:0;transition:all .4s;-webkit-transition:all .4s;-o-transition:all .4s;-moz-transition:all .4s
}

a:focus{outline:none!important}

a:hover{text-decoration:none;color:#57b846}

h1,h2,h3,h4,h5,h6{margin:0}

p{font-family:HankenGrotesk-Medium;font-size:14px;line-height:1.7;color:#666;margin:0}

ul,li{margin:0;list-style-type:none}

input{outline:none;border:none}

input[type=number]{-moz-appearance:textfield;appearance:none;-webkit-appearance:none
}

input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none
}

textarea{outline:none;border:none}

textarea:focus,input:focus{border-color:transparent!important}

input:focus::-webkit-input-placeholder{color:transparent}

input:focus:-moz-placeholder{color:transparent}

input:focus::-moz-placeholder{color:transparent}

input:focus:-ms-input-placeholder{color:transparent}

textarea:focus::-webkit-input-placeholder{color:transparent}

textarea:focus:-moz-placeholder{color:transparent}

textarea:focus::-moz-placeholder{color:transparent}

textarea:focus:-ms-input-placeholder{color:transparent}

input::-webkit-input-placeholder{color:#999}

input:-moz-placeholder{color:#999}

input::-moz-placeholder{color:#999}

input:-ms-input-placeholder{color:#999}

textarea::-webkit-input-placeholder{color:#999}

textarea:-moz-placeholder{color:#999}

textarea::-moz-placeholder{color:#999}

textarea:-ms-input-placeholder{color:#999}

label{display:block;margin:0}

button{outline:none!important;border:none;background:0 0}

button:hover{cursor:pointer}

iframe{border:none!important}

.txt1{font-family:HankenGrotesk-Medium;font-size:13px;line-height:1.4;color:#999}

/* .limiter{width:100%;margin:10 auto}
/* .limiter{width:100%;} */

.container-login100{
 width:100%;
 min-height:10vh;
 margin-top: 170px;  /* muss selbe Höhe, wie 'topbox' haben, wenn es nicht in die 'topbox' hinein geschoben werden kann */
 display:-webkit-box;
 display:-webkit-flex;
 display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:wrap;
 justify-content:center;
 align-items:center;
 padding:15px;
 z-index:-1;
/*  background:#ebeeef */
}

.wrap-login100{
 width:670px;
 background:#fff;
 border-radius:10px;
 overflow:hidden;
/*  position:relative;
 top: -50px; */
 position:relative;
 top: 20px;

}

.login100-form-title{
 width:100%;
 position:relative;
 z-index:1;
 display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:wrap;
 flex-direction:column;
 align-items:center;
 background-repeat:no-repeat;
 background-size:cover;
 background-position:center;
 padding:70px 15px 74px
}

/*
.login100-form-title-1{
 font-family:HankenGrotesk-Medium;
 font-size:30px;
 color:#fff;
 text-transform:uppercase;
 line-height:1.2;
 text-align:center
}
*/
.login100-form-title::before{
 content:"";
 display:block;
 position:absolute;
 z-index:-1;
 width:100%;
 height:100%;
 top:0;
 left:0;
 background-color:rgba(54,84,99,.2)   /* opaques grau über das Foto gelegt */
}

.login100-form{
 width:100%;
 display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;
 flex-wrap:wrap;
 justify-content:space-between;
 padding:33px 88px 73px 200px
}

.wrap-input100{
 width:100%;
 position:relative;
 border-bottom:1px solid #b2b2b2
}

.label-input100{font-family:HankenGrotesk-Medium;font-size:15px;color:gray;line-height:1.2;text-align:right;position:absolute;top:14px;left:-123px;width:115px}

.input100{font-family:HankenGrotesk-Medium;font-size:15px;color:#555;line-height:1.2;display:block;width:100%;background:0 0;padding:0 5px}

.focus-input100{position:absolute;display:block;width:100%;height:100%;top:0;left:0;pointer-events:none}

.focus-input100::before{content:"";display:block;position:absolute;bottom:-1px;left:0;width:0;height:1px;-webkit-transition:all .6s;-o-transition:all .6s;-moz-transition:all .6s;transition:all .6s;background:#57b846}

input.input100{height:45px}

.input100:focus+.focus-input100::before{width:100%}

.has-val.input100+.focus-input100::before{width:100%}

.input-checkbox100{display:none}

.label-checkbox100{font-family:HankenGrotesk-Medium;font-size:13px;color:#999;line-height:1.4;display:block;position:relative;padding-left:26px;cursor:pointer}

.label-checkbox100::before{content:"\f00c";font-family:FontAwesome;font-size:13px;color:transparent;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;justify-content:center;align-items:center;position:absolute;width:18px;height:18px;border-radius:2px;background:#fff;border:1px solid #e6e6e6;left:0;top:50%;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);-o-transform:translateY(-50%);transform:translateY(-50%)
}

.input-checkbox100:checked+.label-checkbox100::before{color:#57b846}

.container-login100-form-btn{width:100%;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:wrap}

@media(max-width:576px){.login100-form{padding:43px 15px 57px 117px}}

@media(max-width:480px){.login100-form{padding:43px 15px 57px}

.label-input100{text-align:left;position:unset;top:unset;left:unset;width:100%;padding:0 5px}}

.validate-input{position:relative}

.alert-validate::before{content:attr(data-validate);position:absolute;max-width:70%;background-color:#fff;border:1px solid #c80000;border-radius:2px;padding:4px 25px 4px 10px;top:50%;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);-o-transform:translateY(-50%);transform:translateY(-50%);right:2px;pointer-events:none;font-family:HankenGrotesk-Medium;color:#c80000;font-size:13px;line-height:1.4;text-align:left;visibility:hidden;opacity:0;-webkit-transition:opacity .4s;-o-transition:opacity .4s;-moz-transition:opacity .4s;transition:opacity .4s}

.alert-validate::after{content:"\f06a";font-family:FontAwesome;display:block;position:absolute;color:#c80000;font-size:15px;top:50%;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);-o-transform:translateY(-50%);transform:translateY(-50%);right:8px}

.alert-validate:hover:before{visibility:visible;opacity:1}

@media(max-width:992px){.alert-validate::before{visibility:visible;opacity:1}}