/* Reset default browser CSS */



html{
    width: 100%;
    height:100%;

}


* {
    padding: 0;
    margin: 0;
    -ms-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    -ms-word-wrap: break-word;
     word-wrap: break-word;

     /* Non standard for WebKit */
     word-break: break-word;

    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;

}


body{
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    color: #333333;
    --max-size: 14;
    --min-size: 10;
    font-size: var(--responsive);
    font-family:  "Lucida Sans Unicode", "Lucida Grande", "sans-serif", "Icofont";
    padding: 0;
    margin: 0;

}

.website {

   padding:0;
   margin:0;
   background-position: center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}


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

}
.max3{
max-width: 3rem !IMPORTANT;

}
.max4{
max-width: 4rem !IMPORTANT;

}
.maxhalb5{
max-width: 4.5rem !IMPORTANT;

}
.max5{
max-width: 5rem !IMPORTANT;

}
.max6{
max-width: 6rem !IMPORTANT;

}
.max7{
max-width: 7rem !IMPORTANT;

}
.max8{
max-width: 8rem !IMPORTANT;

}
.max9{
max-width: 9rem !IMPORTANT;

}
.max10{
max-width: 10rem !IMPORTANT;

}
.max11{
max-width: 11rem !IMPORTANT;

}
.max12{
max-width: 12rem !IMPORTANT;

}

.max13{
max-width: 13rem !IMPORTANT;

}

.max14{
max-width: 14rem !IMPORTANT;

}

.max15{
max-width: 15rem !IMPORTANT;

}

.max20{
max-width: 20rem !IMPORTANT;

}

.max25{
max-width: 25rem !IMPORTANT;
width: 100%;
}

.max30{
max-width: 30rem !IMPORTANT;

}
.max35{
max-width: 35rem !IMPORTANT;

}
.max40{
max-width: 40rem !IMPORTANT;
}
.max45{
max-width: 45rem !IMPORTANT;
}
.max50{
max-width: 50rem !IMPORTANT;

}
.max60{
max-width: 60rem !IMPORTANT;

}

a.system{
    color: inherit;
    text-decoration: none;
}

span.icon:hover,
*[data-href]:hover,
a:hover{
    cursor: pointer;
}

span.icon{
    font-family: Icofont;
    margin:2px 4px;
    --max-size: 32;
    --min-size: 24;
    font-size: var(--responsive);
}



p.icon{
    position:relative;
    display:flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    margin:2px;
}

/* ----------SCrollbar-----------------------*/
.scroll { overflow:auto; -ms-overflow-style: none; scrollbar-base-color: hsla(0, 0%, 100%, 0.1); scroll-behavior: smooth;}
.scroll::-webkit-scrollbar {width: 0px; height: 0px;}
.scroll::-webkit-scrollbar-button {width: 0px;height: 0px; }
.scroll::-webkit-scrollbar-corner { background: transparent; }

body, article { overflow:auto; -ms-overflow-style: none; scrollbar-base-color: hsla(0, 0%, 100%, 0.1); scroll-behavior: smooth;}
body::-webkit-scrollbar, article::-webkit-scrollbar {width: 0; height: 0;}
body::-webkit-scrollbar-button, article::-webkit-scrollbar-button {width: 3px;height: 20px; }
body::-webkit-scrollbar-corner, article::-webkit-scrollbar-corner { background: #3366ff; }

 /* Layout Scrollbar */

/* width */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

/* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
    border-radius: 5px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #336699;
    border-radius: 5px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #cecece;
}



div.msg-button{
    position:fixed;
    display:none;
    justify-content:center;
    align-items: center;
    right:5vw;
    bottom:2vw;
    width:10rem;
    height:3rem;
    z-index:100;
    font-family: "Lucida Console", Monaco, monospace;
    --max-size: 10;
    --min-size: 8;
    font-size: var(--responsive);
    font-weight: bold;
    background-color:var(--chat-background-color);
    border:var(--chat-border);
    border-radius: var(--chat-button-border-radius);
    box-shadow: var(--chat-box-shadow);
}

div.msg-button.show{
    display:inline-flex;
 }

div.msg-box{
     position:fixed;
     display:none;
     flex-direction: column;
     justify-content:center;
     align-items: center;
     right:5vw;
     bottom:5vw;
     max-width:30rem;
     width:90%;
     max-height:0;
     height:auto;
     font-family: "Lucida Console", Monaco, monospace;
     background-color:var(--chat-background-color);
    border:var(--chat-border);
    border-radius: var(--chat-button-border-radius);
    box-shadow: var(--chat-box-shadow);
    opacity: 0;
    visibility: hidden;
    z-index:100;

   transform:  all 550ms ease-in-out;
 }

div.msg-box.show{
    display:inline-flex;
    max-height:25rem;
    opacity: 1;
    visibility: visible;

 }
div.msg-box h3{
   position:relative;
   width:100%;
   height:auto;
   padding: 5px 10px;
   margin:0;
}

div.msg-box h3 span{
    position:absolute;
    top:3px;
    right:5px;
    width:auto;
    height: auto;

}
div.msg-box div.msg-inbox{
    position:relative;
   width:100%;
   max-height:15rem;
   height:auto;
   overflow-y:scroll;
   padding: 5px 10px;
   margin:0;

}

div.msg-box div.msg-inbox p{
   width:100%;
   height:auto;
   background-color:#fefefe;
   color:#333;
   padding: 5px 10px;
   margin:0;
}
div.msg-box div.msg-inbox p:nth-of-type(even){
   background-color:#9999aa;
   color:#fff;

}

div.msg-box form{
    position:relative;
   width:90%;
   height:auto;
   padding: 5px 10px;
   margin:10px auto 20px auto;

}

div.msg-box form label{
    position:relative;
    display:flex;
    justify-content: center;
    align-items: stretch;
   width:100%;
   height:auto;
   padding: 0;
   margin:0;

}

div.msg-box form label textarea{
    flex: 1 1 70%;
   width:70%;
   height:5rem;
   border:1px solid #333;
   padding: 5px;
   margin:0;

}

div.msg-box form label input{
    flex: 1 1 70%;
   width:70%;
   height:2rem;
   border:1px solid #333;
   padding: 5px;
   margin:2rem 0 0;

}

div.msg-box form label button{
    flex : 1 1 5rem;
        display:flex;
    justify-content: center;
    align-items: flex-start;
    align-content: flex-start;
   width:25%;
   height:5rem;
   font-family: Icofont;
   color:#ffffff;
   background-color:rgba(10, 101, 194, 1);
   padding: 8px 0 0;
   margin:0;

}


div.msg-box form label button:hover{
    color:#aaa;
    text-shadow: 2px 2px 4px #333;


}


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

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

/*-----------master-background----------------------*/
.zentriert,.baustelle,#wall {
    position: fixed;
    display: none;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 1200;
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
        overflow: hidden;
    }


.zentriert{
    display:flex;
    justify-content: center;
    align-items: center;

}

#wall{
    justify-content: center;
    align-items: center;
   background-color:rgba(125, 125, 125, 0.3);
}

.baustelle{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    --max-size: 12;
    --min-size: 10;
    font-size: var(--responsive);
    color: #ffffff;
    background-color:rgba(10, 0, 125, 0.9);
    backdrop-filter: blur(15px);
}

.baustelle form{
    --max-size: 14;
    --min-size: 10;
    font-size: var(--responsive);
    color: #333333;
}


#wall > *{
    width: min( 90vw, 95%);
    margin: 0 auto;

    z-index: 1220;

}




#wall.show {
    display:flex;
    }

#infobox{
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1200;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background-color:rgba(125, 125, 125, 0.3);
}

#infobox div.content{
    position: relative;
    display: inline-block;
    max-width: 30rem;
    width: 90%;
    height: auto;
    color: #333333;
    background-color: #ffffff;
    border: 1px solid #565656;
    box-shadow: 3px 3px 5px #000000;

}

#infobox div.content h3{
    width: 100%;
    height: auto;
    background-color: #0033CC;
    color: #ffffff;
   padding: 10px 25px;
   margin: 0 auto;

}

#infobox div.content blockquote{
    width: 80%;
    height: auto;
    color: #333333;
   padding: 10px;
   margin: 1rem auto;

}

#infobox div.content button{
    display: block;
    width: auto;
    height: auto;
    color: #ffffff;
    background-color: #0033cc;
    border-radius: 8px;
    padding: 8px 15px;
    margin: 1.25rem auto 2.5rem;
}

#infobox div.content button:hover{
    background-color: #3366FF;
}



/*   CSS Weblink zu WebyTyper.de  */


.website div.wrapper div.weblink{
    grid-area: weblink;
    position: relative;
    display: block;
    max-width: 95vw;
    width: 95%;
    background:transparent;
    text-align: right;
    margin: 1.5rem auto 0.5rem;
    }

.website div.wrapper div.weblink a{
font-family: Verdana, Geneva, sans-serif;
color: #000000;
 text-shadow: 1px 1px 2px #000000;
 animation: color 60s linear infinite;
    --max-size: 12;
    --min-size: 10;
    font-size: var(--responsive);
 font-weight: bold;
 text-decoration:none;
 padding: 5px 0 20px;
 margin: 0;
 }

.website div.wrapper div.weblink a:hover{ cursor:pointer;}

@keyframes color {
    0%{
         color:#000000;
         text-shadow: 1px 1px 2px #999999;
    }
    12.5%{
           color:#aaaaaa;
           text-shadow: 1px 1px 2px #000000;
    }
    25%{
          color:#ffffff;
          text-shadow: 1px 1px 2px #aaaaaa;
    }
    37.5%{
           color:#336699;
           text-shadow: 1px 1px 2px #ffffff;
    }
    50%{
         color:#880000;
         text-shadow: 1px 1px 2px #336699;
    }
    67.5%{
         color:#FF9900;
         text-shadow: 1px 1px 2px #880000;
    }
    75%{
         color:#990099;
         text-shadow: 1px 1px 2px #ff9900;
    }
    87.5%{
         color:#009900;
         text-shadow: 1px 1px 2px #990099;
    }
    100%{
         color:#003366;
         text-shadow: 1px 1px 2px #009900;
    }

 }

body.wartung {
    position: relative;
    width: 100%;
    height: 100%;
    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;
    padding:0;
    margin:0;
}
body.wartung > div {
            position:absolute;
            max-width:40rem;
            height:auto;
            width:90%;
            top:50%;
            left:50%;
            transform: translate(-50%,-50%);
            z-index:1500;
            font-family: Verdana, Geneva, sans-serif;
            --max-size: 14;
            --min-size: 10;
            font-size: var(--responsive);
            background-color:#ffffff;
            border-radius:8px;
            padding:25px;
            margin:0;

}

body.wartung > div h1{
    position: relative;
    display: block;
    width: 90%;
    height: auto;
    --max-size: 24;
    --min-size: 18;
    font-size: var(--responsive);
    border-bottom: 1px solid #333333;
    padding: 8px 1rem;
    margin: 0 auto;
}

body.wartung > div blockquote{
    position: relative;
    display: block;
    width: 80%;
    height: auto;
    padding: 0;
    margin: 1rem auto;
}

body.wartung > div footer {
    position: relative;
    display:flex;
    justify-content: space-around;
    align-items:center;
     width:100%;
}
body.wartung > div footer a{
    color: #333;
    text-decoration: none;
    cursor:pointer;

}
body.wartung > div footer img{
max-width: 150px;
height:auto;
}

span#uptotop{
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    bottom: 5rem;
    right: 5rem;
    z-index: 50;
    max-width: 3rem;
    aspect-ratio: 1 / 1;
    width: 100%;
    height: auto;
    box-shadow: 0 1px 1px 1px inset #565656,  1px 2px 1px #565656;
    border-radius: 5px;
    color: #333333;
    background-color: #ffffff;
    font-family: Icofont;
    --max-size: 32;
    --min-size: 24;
    font-size: var(--responsive);
    padding: 1px;
    visibility: hidden;
    opacity: 0;
        -webkit-transition: all 500ms ease-in-out;
    -moz-transition:  all 500ms ease-in-out;
    -o-transition:  all 500ms ease-in-out;
    -ms-transition:  all 500ms ease-in-out;
    transition:  all 500ms ease-in-out;

}

span#uptotop.show{
    visibility: visible;
    opacity: 1;
}

    .info-box1{
        position: relative;
        display: inline-block;
        min-height: 10rem;
        max-width: 35rem;
        width: 95%;
        height: auto;
        background-color: #ffffff;
        border-radius: 0.7rem;
        box-shadow: 5px 10px 25px #666666;
        padding: 0 1rem 1rem;
        margin: 0 auto;
    }

    .info-box1 h1:first-child,
    .info-box1 h2:first-child,
    .info-box1 h3:first-child,
    .info-box1 h4:first-child,
    .info-box1 h5:first-child,
    .info-box1 h6:first-child{
        position: relative;
        display: block;
        width: 95%;
        height: auto;
    --max-size: 20;
    --min-size: 18;
    font-size: var(--responsive);
        border-bottom: 1px solid #333333;
        padding: 5px 0 5px 25px;
        margin: 0 auto 1rem;
    }


.info-box1 article{
    position: relative;
    display: inline-flex;
    flex-wrap;
    justify-content: center;
    align-items: center;
    width: 85%;
    height: auto;
    --max-size: 14;
    --min-size: 10;
    font-size: var(--responsive);
    padding: 0;
    margin: 1rem auto;
}

.info-box1 div.button-line{
    position: relative;
    display: block;
    width: 95%;
    height: auto;
    text-align: center;
    padding: 0;
    margin: 1rem auto 0.5rem;

}

.info-box1 div.button-line button{
    position:relative;
    display:inline-block;
    color: #000000;
    font-family: Verdana, Geneva, sans-serif, Icofont;
    --max-size: 14;
    --min-size: 10;
    font-size: var(--responsive);
    text-transform: uppercase;
    width: auto;
    height: auto;
    border: 1px solid #565656;
    border-radius: 4px;
    background-color: #D7D7D7;
    color: #333333;
    padding: 5px 15px;
    margin: 0;

}


.info-box1 div.button-line button:hover{
    background-color: #3366FF;
    color: #d7d7d7;
    cursor: pointer;
}

.cookie-remove{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
    height: auto;
    --max-size: 12;
    --min-size: 10;
    font-size: var(--responsive);
    text-align: center;
    background-color: rgba(170, 170, 170, 0.5);
    color: #ffffff;
    padding: 0;
    margin: 0 auto;
    transition: all 500ms;
}


.cookie-remove:hover{
    --max-size: 16;
    --min-size: 10;
    font-size: var(--responsive);

    background-color: rgba(170, 170, 170, 1);
    color: #000000;

}

.cookie-remove p{
    width: auto;
    height: auto;
    margin: 2px 10px;

}

.cookie-remove a{
    width: auto;
    height: auto;
    color: #880000;
    margin: 2px 10px;
    text-decoration: none;
}

.cookie-remove a:hover{
    cursor: pointer;
    text-decoration: underline;
}



#cookieinfo{
    position: fixed;
    z-index: 2000;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: 'cookie-header' 'cookie-main' 'cookie-footer';
    max-width: 50rem;
    width: 90%;
    height: auto;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 5px 10px 25px #666666;
    color: #333333;
    padding: 0;
    margin: 0;

}

#cookieinfo.hidden{
    display: none;
    }

div.cookie-header{
    grid-area: cookie-header;
    min-height: 3rem;
    }

div.cookie-header h3{
    position: relative;
    display: block;
    width: 90%;
    --max-size: 24;
    --min-size: 16;
    font-size: var(--responsive);
    border-bottom: 1px solid #333333;
    padding: 10px 0 5px 20px;
    margin: 0 auto;
}
div.cookie-main{
    grid-area: cookie-main;
    padding: 1rem 3rem;
}

div.cookie-sources{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    max-width: 45rem;
    width: 90%;
    height: auto;
    padding: 1rem;
    margin: 1.5rem auto;
}

div.cookie-sources label{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    max-width: 10rem;
    width: auto;
    height: auto;
    padding: 10px 20px;
    margin: 4px;
}

div.cookie-footer{
    grid-area: cookie-footer;
    position: relative;
    display: block;
    text-align: center;
    min-height: 3rem;
    padding: 5px 0;
}

div.cookie-footer button{
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-content: center;
    min-width: 8rem;
    width: auto;
    text-transform: uppercase;
    --max-size: 14;
    --min-size: 10;
    font-size: var(--responsive);
    color: #FFFFFF;
    background-color: #555555;
    border: 1px solid #000000;
    border-radius: 6px;
    padding: 5px 15px;
    margin: 3px;
}

div.cookie-footer button:nth-child(2){
    background-color: #FFFFFF;
    color: #333333;
    font-weight: bold;
    }

div.cookie-footer button:nth-child(3){
    background-color: #FF0000;
    color: #ffffff;
    }



@media  only screen and (max-device-width: 24.375rem), only screen and (max-device-width: 31.25rem), only screen and (min-width: 31.26rem) and (max-device-width: 48.99rem){


span#uptotop{

    bottom: 5rem;
    right: 1.5rem;
}


}

 //* ----------------- Grunddaten ENDE ------------------------*//