/*-------------------Formular--------------------------------*/
:root{
    --color-1: #fefefe;
    --color-2: #333333;
    --color-3: #f1f1f1;
    --color-4: #666666;
    --color-5: #b5b5b5;
    --color-6: #efefef;
    --color-7: #ffffff;
    --color-8: #333333;
    --color-9: #111111;
    --color-10: #000000;
    --color-11: #afafaf;
    --color-12: #efefef;
    --color-13: #d6d6d6;
    --color-14: #b5b5b5;
    --color-15: #c5c5c5;
    --color-16: #dadada;
    --color-17: #aaaaaa;
    --border-color: #111111;

}

.zentriert {
    position: fixed;
    z-index: 5000;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    padding:0;
    margin:0;

}

.zentriert.z-bg-1{
    background-color: hsla(0, 0%, 0%, 0.3);
    -webkit-backdrop-filter: blur(3px); /* Für Safari */
}

.zentriert.bg-image {
    background: url(https://webtyper.de/images/wt-bg-img.jpg);
    -o-background-size: 100% 100%;
    -moz-background-size:  100% 100%;
    -webkit-background-size:  100% 100%;
    background-size:  100% 100%;
    background-attachment: fixed;
}


/*-----------master-background----------------------*/


#wall{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    flex-wrap: wrap;
    z-index: 5000;
    width: 0;
    height: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: all 450ms ease-in-out;
}


#wall{
    background-color: hsla(0, 0%, 0%, 0.6);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px); /* Für Safari */

}


#wall.show {
    height: 100%;
    width: 100%;
    opacity: 1;
    visibility: visible;
}


/*--------------Cookie---------------------*/


div.cookie-box{
        position: relative;
        display: block;
        max-width: 45rem;
        width: 95%;
        height: auto;
        background-color: #f5f5f5;
        color: #333333;
        border: 1px solid #222222;
        border-radius: 5px;
        box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
        overflow: hidden;
}

div.cookie-box h3{
        position: relative;
        display: flex;
        width: 100%;
        height: auto;
        --min-size: 12;
        --max-size: 16;
        font-size: var(--responsive-size);
        background-color: #e6e6e6;
        padding: 1.5em 0 1em 1em;
        margin: 0 auto;

}

div.cookie-box blockquote{
        position: relative;
        display: inline-block;
        width: 90%;
        min-height: 4em;
        max-height: 30em;
        height: auto;
        overflow-y: auto;
        text-align: justify;
        padding: 1em;
        margin: 0 auto;

}

div.cookie-box div{
        position: relative;
        display: flex;
        width: 100%;
        height: auto;

}

div.cookie-box div.cookie-setup{
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        border-top: 1px solid #222222;
        border-bottom: 1px solid #222222;
}

div.cookie-box div.cookie-setup div{
    position: relative;
    width: 100%;
    height: auto;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #222222;
    padding: 1em 2em;
}

div.cookie-box div.cookie-setup div p{
    width: auto;
}


div.cookie-box div.cookie-setup div label.switch{
    position: relative;
    width: 57px;
    height: 27px;
    display: inline-block;


}

div.cookie-box div.cookie-setup div label.switch span {
    position: absolute;
    background-color: #ccc;
    border-radius: 13.5px;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition: background-color .4s;
}

div.cookie-box div.cookie-setup div label.switch span::before {
    background-color: white;
    border-radius: 50%;
    content: "";
    position: absolute;
    left: 4px;
    bottom: 4px;
    height: 19px;
    width: 19px;
}


div.cookie-box div.cookie-setup div label.switch input:checked + span {
    background-color: #0f3faf;
}

div.cookie-box div.cookie-setup div label.switch input:checked + span::before {
    transform: translateX(28px);
}


div.cookie-box div.cookie-setup div label.switch input {
    display: none;
}
div.cookie-box div.cookie-setup div:first-child{
        border-left: 1px solid transparent;
}
div.cookie-box div.cookie-setup div:last-child{
        border-right: 1px solid transparent;
        border-bottom: 1px solid transparent;
}


div.cookie-box div.cookie-button{
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 1em;
        padding: 2em 0;

}

div.cookie-box div.cookie-button button{
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        max-width: 20rem;
        width: 90%;
        min-height: 2em;
        height: auto;
        --min-size: 12;
        --max-size: 16;
        font-size: var(--responsive-size);
        background-color: #0f3faf;
        color: #eeeeee;
        padding: 0.5em 0;
        margin: 0;

}



div.cookie-box footer{
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        overflow: hidden;
        gap: 0.5vw;
        width: 100%;
        height: auto;
        padding: 0.5vw 0;
        margin: 0 auto 0.5em;
}

div.cookie-box footer a{
        position: relative;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        width: auto;
        height: auto;
        color: #333333;
        --min-size: 9;
        --max-size: 13;
        font-size: var(--responsive-size);
        text-decoration: none;
        padding: 0.5em;

}

div.cookie-box footer a:hover{
        cursor: pointer;
        color: #000000;
}



/*----------------font color-----------------------------*/



.font-white{
    color: #ffffff !important;
}

.font-blue{
    color: #0044FF !important;
}
.font-red{
    color: #880C0C !important;
}
.font-lemen{
    color: #ccff00 !important;
}
.font-green{
    color: #73E600 !important;
}
.font-black{
    color: #000000 !important;
}
.font-grey{
    color: #666666 !important;
}

.font-skyblue{
    color: #0099FF !important;
 }

 .font-orange{
     color: #FF9900 !important;
 }

 .font-violet{
     color: #FF33CC !important;
 }

 .font-lila{
     color: #8B008B !important;

 }

.font-lightred{
    color: #cc0990 !important;
    background-color: #fefefe !important;

}


.bg-white{
    background-color: #ffffff !important;
}
.bg-lemen{
    background-color: #ccff00 !important;
}
.bg-green{
    background-color: #73E600 !important;
}
.bg-red{
    background-color: #880c0c !important;
}
.bg-blue{
    background-color: #0044FF !important;
}
.bg-lila{
    background-color: #990099 !important;
}
.bg-rose{
    background-color: #FA8072 !important;
}
.bg-yellow{
    background-color: #FFFF00 !important;
}

.bg-skyblue{
    background-color: #6699ff !important;
}

.bg-grey{
    background-color: #aaaaaa !important;
}
.bg-black{
    background-color: #000000 !important;
}
.bg-silver{
    background-color: #C0C0C0 !important;
}

.padding-16{
    padding: 0 1.25em;
}
.padding-32{
    padding: 0 2.25em;
}

span.checkbox-label{
    position: relative;
    display: flex;
    gap: 5px;
    width: auto;
    height: auto;
    margin: 5px 0.5em;
}

span.checkbox-label input[type="checkbox"]{
    position: relative;
    display: flex;
    width: 1em;
    height: auto;
    margin: 0;
}

span.checkbox-label label{
    position: relative;
    display: inline-block;
    width: auto;
    height: auto;
    padding: 0 8px;
    margin: 0;
}

span.absolute{
    position: absolute;
    top: 2px;
    right: 5px;
    width: auto;
    height: auto;
}

.font-size9{
    font-size: 9px !important;
}
.font-size10{
    font-size: 10px !important;
}
.font-size11{
    font-size: 11px !important;
}
.font-size12{
    font-size: 12px !important;
}

.font-size13{
    font-size: 13px !important;
}
.font-size14{
    font-size: 14px;
}



*[data-action]:hover,
*[data-href]:hover,
a:hover{
    cursor: pointer;
}

span.icon{
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1 / 1;
    width: auto;
    height: auto;
  font-family: "Icofont";
    --max-size: 24;
    --min-size: 18;
    font-size: var(--responsive-size);

  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  line-height: 1;
/* Better Font Rendering =========== */
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
   overflow: hidden;
    padding: 0;
   margin: 2px 4px;
}




input,
select,
textarea{
    position: relative;
    display: inline-block;
    width: 95%;
    height: auto;
    background-color: #eeeeee;
    border: 1px solid #000000;
    outline: 0;
    border-radius: 4px;
    padding: 5px 10px;
    margin: 0 auto;
}

input[type="file"]{
   visibility:hidden;
}

input[type="file"]::-webkit-file-upload-button {
    visibility: hidden;
}


textarea.hidden{
    display: none !important;
}

textarea{
    min-height: 6em;
}

textarea.height-8{
    min-height: 8em;
}

textarea.height-10{
    min-height: 10em;
}


button,
input[type="submit"],
input[type="button"]{
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: auto;
    height: auto;
    --min-size: 10;
    --max-size: 12;
    font-size: var(--responsive-size);
    font-weight: normal;
    text-transform: uppercase;
    color: #000000;
    background-color: rgba(238, 238, 238, 1.0);
    border: 2px solid rgba(34, 68, 238, 0.5);
    border-radius: 4px;
    padding: 5px 8px;
    transition: background-color 50ms ease-in;
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover{
    cursor: pointer;
    background-color: rgba(34, 68, 238, 0.3);
    border-color: #2244EE;
}



input[type="submit"]:disabled{
    color: #aaaaaa;
}




/*--------------------------Container-----------------------------------*/


div.contbox{
    position: relative;
    display: inline-flex;
    justify-content: flex-start;
    align-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 1em;
    min-height: 25vh;
    max-width: 60em;
    width: 100%;
    height: auto;
    --min-size: 13;
    --max-size: 15;
    font-size: var(--responsive-size);
    overflow-y: auto;
    padding: 1em 1em 2em;
    margin: 0 auto;
}

div.contbox h2{
    position: relative;
    display: inline-flex;
    justify-content: center;
    width: 100%;
    height: auto;
    --min-size: 20;
    --max-size: 24;
    font-size: var(--responsive-size);
    padding: 0.5em 0;
}
div.contbox h3{
    position: relative;
    display: inline-flex;
    width: 100%;
    height: auto;
    --min-size: 16;
    --max-size: 20;
    font-size: var(--responsive-size);
    padding: 0.5em 0;
}



div.formular{
    position: relative;
    display: block;
    width: 95%;
    height: auto;
    background-color: var(--color-1);
    color: var(--color-2);
    overflow: hidden;
    border-radius: 8px 8px 4px 4px;
}



div.formular.box-shadow {
    border-radius: 8px 8px 4px 4px;
    box-shadow: rgba(50, 50, 93, 0.5) 0px 13px 40px -1px, rgba(0, 0, 0, 0.3) 0px 8px 32px -3px;
 }
div.formular.box-shadow2 {
    border: 1px solid #a5a5a5;
    border-radius: 8px 8px 4px 4px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
 }
div.formular.border {
    border: 1px solid #a5a5a5;
    border-radius: 8px 8px 4px 4px;
    overflow: hidden;
 }


div.formular h2{
    position: relative;
    display: flex;
    width: 100%;
    height: auto;
    --min-size: 16;
    --max-size: 18;
    font-size: var(--responsive-size);
    background-color: var(--color-3);
    color: var(--color-4);
    padding: 0.5em 0 0.3em 1em;
    margin: 0 auto;

}

div.formular h2.border{
    width: 95%;
    border-bottom: 1px solid #666666;
}
div.formular h2.background{
    background-color: var(--color-3);
    color: var(--color-4);
}
div.formular h2.background-blue{
    background-color: #0f3faf;
    color: #eeeeee;
}


div.formular h2.form-title-logo{

    position: relative;
    display: flex;
    justify-content: flex-start;
    align-content: center;
    align-items: center;
    width: 100%;
    height: auto;
    --max-size: 18;
    --min-size: 14;
    font-size: var(--responsive-size);
    background-color: var(--color-12);
    color: var(--color-8);
    padding: 15px 0 5px 20px;
    margin: 0 auto;

}

div.formular h2.form-title-logo img{
    max-width: 70px;
    width: 100%;
    height: auto;
    padding: 0;
    margin: 0 50px  0 25px;
}


div.formular blockquote{
    position: relative;
    display: inline-block;
    width: 90%;
    height: auto;
    min-height: 4em;
    text-align: justify;
    padding: 1em;
    margin: 0 auto;

}


div.formular blockquote.center{
    text-align: center;
}



div.formular form{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    width: 90%;
    height: auto;
    margin: 1em auto;

}


div.formular blockquote > div,
div.formular form div{
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 5px;
    width: 100%;
    height: auto;
    margin: 0;

}


div.formular div.button-left,
div.formular div.button-center,
div.formular div.button-between,
div.formular div.button-right{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    width: 100%;
    height: auto;
    gap: 0.5em;
    margin: 1em auto 0.4em;

}

div.formular div.button-left{
    justify-content: flex-start;
}
div.formular div.button-center{
    justify-content: center;
}
div.formular div.button-right{
    justify-content: flex-end;
}
div.formular div.button-between{
    justify-content: space-between;

}

div.formular div.button-between span{
    position: relative;
    display: inline-flex;
    align-items: flex-start;
    gap: 2em;
    width: auto;
    height: auto;
    padding: 0.2em 1em;

}



div.formular form > div{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    width: 100%;
    height: auto;
    margin: 0 auto 0.7em;

}

div.formular form > div.error-info{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
    color: #800800;
    font-weight: bold;
    margin: 0 auto;

}

div.formular form > div span.form-info{
    position: relative;
    display: none;
    width: 100%;
    height: auto;
    border: 0;
    color: #800800;
    text-transform: uppercase;
    font-size: 12px;
    overflow: hidden;
    padding: 4px 0 0 1.2em;
    margin: 0 auto;
}

div.formular form > div span.form-info.show{
    display: inline-block;
}




div.formular form > div.flex-wrap{
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
}

div.formular form > div h3{
    position: relative;
    width: 100%;
    height: auto;
    --min-size: 13;
    --max-size: 17;
    font-size: var(--responsive-size);
    padding: 0 0 0.2em  1.5em;
}

div.formular footer{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    overflow: hidden;
    gap: 0.5em;
    width: 100%;
    height: auto;
    padding: 0.5em 0;
    margin: 0 auto 0.5em;
}

div.formular footer a{
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: auto;
    height: auto;
    color: #333333;
    --min-size: 11;
    --max-size: 13;
    font-size: var(--responsive-size);
    text-decoration: none;
    padding: 0.5em 1em;

}

div.formular footer a:hover{
    cursor: pointer;
    color: #000000;
}



/*-----------Styles Vorlagen---------------------*/

ul.navi-menu-1{
    background-color: #000000;
    font-family: Verdana, Geneva, sans-serif, Icofont;
}

ul.navi-menu-1  li{
    border-left: 1px solid #ffffff;
}

ul.navi-menu-1  li:first-child{

    border-left: none;
}

ul.navi-menu-1  li a{
    max-height: 98%;
    min-width: 10rem;
    color: #ffffff;
    background-color: #000000;
    font-size: 1.25rem;


}

ul.navi-menu-1  li a:hover{

    background-color: #ffffff;
    color: #000000;

}

ul.navi-menu-1  li ul.sub-menue{
    color: #ffffff;
    background-color: #000000;

}


ul.navi-menu-1  li ul.sub-menue li{
    border-left: 1px solid #000000;
    border-bottom: 1px solid #ffffff;
}

ul.navi-menu-1  li ul.sub-menue li:last-child{

    border-bottom: none;
}


ul.navi-menu-1  li ul.sub-menue li a{
    min-width: 10rem;
    color: #ffffff;
    background-color: #000000;
    font-size: 1.25rem;
    font-family: Verdana, Geneva, sans-serif, Icofont;

}

ul.navi-menu-1  li ul.sub-menue li a:hover{

    background-color: #ffffff;
    color: #000000;

}

ul.navi-menu-2{
    background-color: #ffffff !important;
    min-height: 3rem;
    font-family: Verdana, Geneva, sans-serif, Icofont;
}

ul.navi-menu-2   li{
    border-left: 1px solid #000000;
}

ul.navi-menu-2   li:first-child{

    border-left: none;
}

ul.navi-menu-2   li a{
    max-height: 98%;
    min-width: 10rem;
    background-color: #ffffff;
    color: #000000;
    font-size: 1.25rem;


}

ul.navi-menu-2  li a:hover{

    color: #ffffff;
    background-color: #000000;

}

ul.navi-menu-2  li ul.sub-menue{
    background-color: #ffffff;
    color: #000000;

}


ul.navi-menu-2  li ul.sub-menue li{
    border-left: 1px solid #ffffff;
    border-bottom: 1px solid #000000;
}

ul.navi-menu-2  li ul.sub-menue li:last-child{

    border-bottom: none;
}


ul.navi-menu-2  li ul.sub-menue li a{
    min-width: 10rem;
    background-color: #ffffff;
    color: #000000;
    font-size: 1.25rem;
    font-family: Verdana, Geneva, sans-serif, Icofont;

}

ul.navi-menu-2  li ul.sub-menue li a:hover{

    color: #ffffff;
    background-color: #000000;

}

ul.navi-button-1{
    background-color: #000000;
    font-family: Verdana, Geneva, sans-serif, Icofont;
}


ul.navi-button-1  li button{
    max-height: 98%;
    min-width: 10rem;
    color: #ffffff;
    background-color: #000000;
    font-size: 1.25rem;
    border: 1px solid;
    border-color: #ffffff;
    border-radius: 5px;
    padding: 5px 0;
    margin: 3px;
}

ul.navi-button-1  li button:hover{

    background-color: #ffffff;
    color: #000000;
    border-color: #000000;
}



ul.navi-button-2{
    background-color: #ffffff;
    font-family: Verdana, Geneva, sans-serif, Icofont;
}


ul.navi-button-2 li button{
    max-height: 98%;
    min-width: 10rem;
    color: #000000;
    background-color: #ffffff;
    font-size: 1.25rem;
    border: 1px solid;
    border-color: #000000;
    border-radius: 5px;
    padding: 5px 0;
    margin: 3px;
}

ul.navi-button-2 li button:hover{

    background-color: #000000;
    color: #ffffff;
    border-color: #ffffff;
}



ul.navi-link-1{
    background-color: #000000;
    font-family: Verdana, Geneva, sans-serif, Icofont;
}


ul.navi-link-1 li a{
    max-height: 98%;
    min-width: 10rem;
    color: #ffffff;
    font-size: 0.9rem;
    padding: 5px 0;
    margin: 3px;
}

ul.navi-link-1 li a:hover{
    color: #aaaaaa;

}
ul.navi-link-2{
    background-color: #ffffff;
    font-family: Verdana, Geneva, sans-serif, Icofont;
}


ul.navi-link-2 li a{
    max-height: 98%;
    min-width: 10rem;
    color: #000000;
    font-size: 0.9rem;
    padding: 5px 0;
    margin: 3px;
}

ul.navi-link-2 li a:hover{
    color: #aaaaaa;

}




/*---------------Max-Width--------------------------*/

.max-auto{
max-width: none;
width: auto !IMPORTANT;
}

.max2{
    max-width: 2em;
}
.max3{
    max-width: 3em;
}
.max4{
    max-width: 4em;
}
.max5{
    max-width: 5em;
}
.max6{
    max-width: 6em;
}
.max7{
    max-width: 7em;
}
.max8{
    max-width: 8em;
}
.max9{
    max-width: 9em;
}
.max10{
    max-width: 10em;
}
.max15{
    max-width: 15em;
}
.max20{
    max-width: 20em;
}
.max25{
    max-width: 25em;
}
.max30{
    max-width: 30em;
}
.max35{
    max-width: 35em;
}
.max40{
    max-width: 40em;
}
.max50{
    max-width: 50em;
}
.max60{
    max-width: 60em;
}
.max70{
    max-width: 70em;
}
.max80{
    max-width: 80em;
}




@media only screen and (max-width: 767px){


}   /*   ENDE VIEWPORT 600 */



@media only screen and (min-width: 601px) and (max-width: 767px){



}  /*   ENDE VIEWPORT 601 */


@media only screen and (min-width: 768px){

.max-eindrittel{
max-width: 30% !IMPORTANT;

}
.max-zweidrittel{
max-width: 60% !IMPORTANT;

}
.max-halb{
max-width: 45% !IMPORTANT;
width: 100%;
}

.max-dreiviertel{
max-width: 70% !IMPORTANT;

}

.max-einviertel{
max-width: 22% !IMPORTANT;

}

div.cookie-box div.cookie-setup{
    flex-wrap: nowrap;

}

div.cookie-box div.cookie-setup div{
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    min-width: 24%;
    max-width: 32%;
    width: 100%;
    height: auto;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
    border-left: 1px solid #222222;
    border-bottom: 1px solid transparent;
    padding: 0.75em 0;
}


div.cookie-box div.cookie-button button{
        max-width: 13rem;
        width: 100%;

}



}  /*   ENDE VIEWPORT 768 */

@media only screen and (min-width: 992px){



} /* ENDE VIEWPORT 992 */




@media only screen and (min-width: 1200px){



} /* ENDE VIEWPORT 1200 */




@media only screen and (min-width: 1600px){



}  /*  ENDE VIEWPORT 1600 */