@font-face{font-family:'Lato-Regular';src:url('includes/Lato-Regular.ttf')format('truetype');}
@font-face{font-family:'Lato-Bold';src:url('includes/Lato-Bold.ttf')format('truetype');}
@font-face{font-family:'Lato-Black';src:url('includes/Lato-Black.ttf')format('truetype');}
@font-face{font-family:'Lato-Light';src:url('includes/Lato-Light.ttf')format('truetype');}
body, html{
    margin:0px;
    padding:0px;
    font-family:Lato-Regular;
    min-height: 100%;
    height: 100%;
}
.bggrau{
    background-color: rgb(146,146,146);
}
.bggruen{
    background-color: rgb(146,193,54);
}
.schriftgrau{
    color: rgb(146,146,146);
}
.schriftgruen{
    color: rgb(146,193,54);
}

.wrapper{
    margin:0 auto; 
    width:calc(100%-40px);
    padding:20px; 
    max-width: 1400px;
    position: relative;
}
.footer .wrapper{
    display: flex; 
    justify-content: space-between;
    color:#ffffff;
    flex-wrap:wrap;
}
a{
    text-decoration: none;
    font-family:Lato-Black;
    color:#ffffff;
    cursor: pointer;
}
td{vertical-align: top;}
a:hover{
    text-decoration: underline;
}
input:focus{
    border: 1px solid rgb(146,193,54);
    padding:2px;
}
#anjoba-logo{
    position: absolute;
    top: 5px;
    right:30px;
    height: 98px;
}
.header .wrapper{
    padding-right: 330px;
    width:calc(100% - 360px);
    max-width: 1100px;
    text-align: right;
    min-height: 40px;
    vertical-align: text-bottom;
}
.header .wrapper a{
    padding:0px 10px;
}
.bgred{
    background-color: #ff0000;
}
.itembox{
    width:calc(100% - 60px);
    max-width: 400px;
    border:1px solid rgb(146,193,54);
    position: relative;
    padding:10px;
    margin:10px;
    display: inline-block;
}
.itembox:hover{
    border:1px solid rgb(146,146,146);
    background-color: rgba(146,193,54,0.5);
}
.itemname{
    overflow: hidden;
    font-size:25px;
    white-space: nowrap;
}
.itembox img{
    width: 100%;
}
.btn{
    background-color: rgb(146,193,54);
    cursor: pointer;
    margin:3px;
    padding:3px;
    border-bottom: 2px solid rgb(146,193,54);
    border-right: 2px solid rgb(146,193,54);
}
.itembox:hover .btn{
    background-color: rgb(146,146,146);
    border-bottom-color: rgb(146,146,146);
    border-right-color: rgb(146,146,146);
}
.itembox:hover .btn:hover{
    background-color: rgb(146,146,146);
    border-bottom-color: rgb(255,255,255);
    border-right-color: rgb(255,255,255);
}
.preis{
    font-size: 50px;
    font-family:  Lato-Bold;
    text-align: right;
}
.itembox a{
    font-family: Lato-Regular;
    color:#000000;
}
.itembox a:hover{
    text-decoration: none;
}
.itembox .btns{
    margin-top:30px;
    display: flex;
    justify-content: space-between;
}
.itembox .img{
    width:100%;
    height:400px;
    background-position: center center;
    background-size:100%;
    background-repeat:no-repeat;
}
.itembox .img:hover{
    background-size: 150%;
}
#content{
    overflow-x: hidden;
}
.bcindex #WarenKorb, 
.bcmeinedaten #WarenKorb, 
.bcmeinekaeufe #WarenKorb{
    width:300px;
    min-height: 600px;
    position: fixed;
    right:-320px;
    z-index: 99;
    padding-top: 30px;
    margin-top:30px;
    border: 1px solid #ffffff;
}
#WarenKorb{
    padding:10px;
    background-color: rgba(146,146,146, 1);
}
#content{
    display: flex;
    justify-content: space-between;
    flex-wrap:wrap;
    min-height: 500px;
    min-height: calc(100% - 240px);
}
#Infobox{
    position: fixed;
    height:100%;
    background-color: rgba(146,146,146,0.8);
    width: 100%;
    z-index: 100;
    text-align: center;
}
#Infobox div h1{
    text-align: center;
}
#Infobox div{
    width:400px; margin: 0 auto;
    background-color: #ffffff;
    padding:10px;
}
#Infobox div .btn{
    font-size:60px;
    float:left;
}
.closeWK{
    position: absolute;
    right:-3px;
    top:-3px;
}
.WkItem{
    position: relative;
    padding-bottom: 35px;
    margin-top: 30px;
    color: #ffffff;
}
.WkItem img{
    width:60px;
    float:left;
    margin-right: 10px;
}
.btentf{
    float:right;
    margin-top: 5px;
}
.WkItem:hover{
    background-color: rgba(255,255,255,0.2);
}
.subpreis{
    font-size:12px;
    text-align: right;
}
.WkPreis{
    text-align: right;
    font-family: Lato-Bold;
}
.WkTotalPreis{
    text-align: right;
    font-family: Lato-Bold;
    font-size: 25px;
    color:#ffffff;
    clear:both;
    margin-top:30px;
    margin-bottom: 45px;
}
.headWK{
    color:#ffffff;
    font-family: Lato-Black;
    font-size:20px;
}
.kaufab{
    bottom:4px;
    text-align: center;
    color:#ffffff;
    font-size: 20px;
    position: absolute;
    width:calc(100% - 34px);
}
#LoginBoxtop, 
#LoginBox, 
#RegisterBox{
    padding:10px;
    background-color: rgb(146,193,54);
    width:calc(100% - 24px);
    max-width:300px;
}
#LoginBox, #RegisterBox{
    max-height: 200px;
    margin: 20px;
    position: relative;
}
#RegisterBox{
    min-height: 300px;
}

#RegisterBox .btn{
    background-color: rgb(146,146,146);
    border-bottom: 2px solid rgb(146,146,146);
    border-right: 2px solid rgb(146,146,146);
}
#RegisterBox .btn:hover{
    border-bottom: 2px solid #ffffff;
    border-right: 2px solid #ffffff;
}
#LoginBoxtop{
    margin:0 auto;
    position: absolute;
    right:0px;
    z-index: 150;
    top: -300px;
    border:2px solid #ffffff;
}
#LoginBox input,
#LoginBoxtop input,
#RegisterBox input{
    width:100%;
    margin-bottom:10px;
}
.btorwm{
    position: absolute;
    width:calc(100% - 34px);
    bottom:0px;
    text-align: center;
}
#ERROR{
    position: absolute;
    width:100%;
    padding:30px 0px;
    font-family: Lato-Black;
    font-size:20px;
    text-align: center;
    background-color: #ff6666;
    color:#ffffff;
    top:100px;
    z-index:200;
}
.groessentabelle{
    width:300px;
}
.bold{
    font-weight: bold;
}
.m20{
    margin:20px;
}
.MeineDaten50{
    width:calc(50% - 40px);
}
.MeineDaten33{
    width:calc(33% - 40px);
}
.MeineDaten50 input,.MeineDaten33 input{
    width:100%;
}
.MeineDaten33 h2 span,.MeineDaten50 h2 span{
    cursor: pointer;
    font-size:12px;
}
.footer .wrapper span{
    margin:10px 10px 10px 0px;
}
.footer .wrapper a{
    margin-left:15px;
}
@media(max-width:1150px){
    .MeineDaten33{
        width:calc(50% - 40px); 
    }
}
@media(max-width:700px){
    #anjoba-logo{
        position: relative;
        right:0px;
        display: block;
        margin-bottom: 25px; 
    }
    .header .wrapper{
        padding-top:10px;
        padding-right: 30px;
        width:calc(100% - 60px);
    }
    .MeineDaten33, .MeineDaten50{
        width:100%; 
    }
    .footer .wrapper a{
        display: block;
        width:100%;
        margin:0px;
    }    
}

@media(max-width:400px){
    .itembox .btns .btn{
        font-size:12px;
    }
    .itemname{
        font-size: 18px;white-space:normal;
    }
    .itembox .img{
        height: 350px;
    }
    .itembox{
        height:auto;
    }
    #anjoba-logo{
        width:100%;
    }
    #WarenKorb{
        width:100%;
    }
    #LoginBox, #RegisterBox{
        margin:20px 0px;
        width:100%;
        max-width:none;
    }

}

/* debug */
#debug{
    position: absolute;
    width:500px;
    min-height:50px;
    background-color: #ff6666;
    z-index:200;
    padding:10px;
    display: none;
}
/* ende debug */