@charset "UTF-8";

#mobileNav, .mobileHidden{
    display: none;
}


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

    body{
        overflow-x: hidden;
    }
    
    .mobileHidden{
        display: block;
        width: auto!important;
        height: auto!important;
        text-align: left;
        line-height: 2em;
    }
    
    .mobileHidden a{
        display: block;
        position: relative!important;
        right: auto!important;
    }
    
    .mobileHidden #mobileHeaderLoginDiv{
        display: none;
    }
    
    #mobileNav{
        display: block;
        width: 100%;
        text-align: right;
    }
    
    #mobileNav #mobileLogo{
        position: absolute;
        top: 3px;
        left: 4px;
        width: 195px;
        height: auto;
    }
    
    #mobileHeaderLoginDiv{
        margin-left: 8px;
    }
    
    #frmMobileHeaderLogin a{
        padding-left: 0!important;
    }
    
    #mobileNav img{
        margin-right: 8px;
    }
    
    #mobileTopNav{
        display: block;
    }
    
    #blackHeader{
        width: 100%!important;
    }
    
    #headerLogo{
        display: none;
    }
    
    #headerLogo img{
        max-width: 100%;
    }
    
    #topnav{
        padding-top: 0!important;
        position: relative;
        top: auto;
    }
    
    #topMenu{
        position: fixed;
        display: none;
        top: 42px;
        height: 100%;
        width: 100%;
        background-color: #000000;
        color: #ffffff;
        padding-top: 0!important;
        overflow-y: auto;
        overflow-x: hidden;
    }

	#topMenu li ul{
		display: none;
	}
	
	#topMenu li.activ > ul{
		display: block;
	}

    #topMenu ul > li{
        display: block !important;
        line-height: 2em;
        padding-left: 8px;
        text-align: left;
        width: 100%;
    }

    #topMenu ul li a{
        color: #ffffff;
        border-top: none !important;
        padding-top: 0!important;
        padding-right: 10px;
    }

    #topMenu ul li a.einkaufen.activ, #topMenu ul li a.einkaufen:hover{
        border-right: 10px solid #6b1919;
    }

    #topMenu ul li a.produzenten.activ, #topMenu ul li a.produzenten:hover{
        border-right: 10px solid #505928;
    }
    
    #topMenu ul li a.aktuell.activ, #topMenu ul li a.aktuell:hover{
        border-right: 10px solid #a8882c;
    }

    #topMenu ul li a.besuchen.activ, #topMenu ul li a.besuchen:hover {
        border-right: 10px solid #1b444f;
    }

    #topMenu ul li a.ueber-uns.activ, #topMenu ul li a.ueber-uns:hover{
        border-right: 10px solid #600938;
    }

    #topMenu ul li a.downloads.activ, #topMenu ul li a.downloads:hover{
        border-right: 10px solid #124c1e;
    }

    #topMenu ul li a.galerie.activ, #topMenu ul li a.galerie:hover{
        border-right: 10px solid #1b6c74;
    }

    #images{
        margin-top: 0!important;
        height: 31vw!important;
    }

    #mainContent, div.quoteContainer, div.quoteContainer img{
        width: 100% !important;
        padding-top: 1vw!important;
        margin-top: 15px;
    }
    
    div.quoteContainer{
        position: relative!important;
    }
    
    .quoteContent{
        padding-top: 2vw !important;
        padding-bottom: 20px !important;
    }
    
    div.quoteContainer div.quoteText{
        line-height: 5vw!important;
    }
    
    div.quoteContainer div.quoteText span.quote{
        font-size: 4vw!important;
    }
    
    div.quoteContainer div.quoteText span.author{
        font-size: 2.5vw!important;
    }
    
    #content{
        margin-top: 3vh!important;
        width: 100%!important;
    }
    
    #content h1, #teasers h1, #content p, #content #sortlist{
        padding-left: 8px;
        padding-right: 8px;
    }
    
    #content h2, #content p{
    	padding-left: 0;
    }
    
    #content h1, #teasers h1{
        line-height: 1.2em;
        font-size: 8vw;
    }
    
    #content p{
        font-size: inherit;
        line-height: 1.5em;
    }
    
    #content table{
    	max-width: 100%;
        width: 100%;
    }
    
    #content div{
    	padding: 0 8px;
    }
    
    #content div.pagination{
    	margin-right: 8px;
    }
    
    #footer{
        height: auto!important;
        padding-left: 8px;
    }
    
    #footer_content{
        width: 100% !important;
    }
    
    #footer_content #facebook, #footer_content #agb{
        position: relative;
        right: auto;
        bottom: auto;
        padding-top: 14px;
    }
    
    div.teaserItem{
        width: 100% !important;
        padding-left: 8px;
        padding-bottom: 12px;
        border-bottom: 1px dotted #000000;
        margin-bottom: 8px;
    }
    
    #content div.teaserItem{
    	width: 100% !important;
    }
    
    #content div.teaserItem img{
    	position: absolute;
    }
    
    #content div.teaserItem div.teaserContent{
    	padding-left: 25%;
    	width: 100% !important;
    }
    
    #content div.teaserItem div.teaserContent h2{
    	padding-left: 0 !important;
    }
    
    div.teaserItem img{
        max-width: 24vw;
    }
    
    div.teaserContent{
        width: 68vw !important;
    }    
    
    div.teaserContent div.teaserTitle, div.teaserContent div.teaserPrice{
        height: auto !important;
        border-bottom: none!important;
    }
    
    div.divAddToCart, div.divAufAnfrage, div.divLagermenge {
        border-bottom: none!important;
    }

    div.divLagermenge {
        margin: 10px 0;
    }

    #sidebar{
        width: 100%!important;
        padding-left: 8px;
        display: none!important;
    }
    
    div.artikelbild img{
        max-height: 200px;
    }
    
    div.listItem div.artikelbild{
    	position: absolute;
        width: 20%!important;
    }
    
    div.listItem div.listContent{
        width: 100% !important;
    }
    
    div.listItem div.listContent div.listTitle, div.listItem div.listContent div.listPrice{
    	padding-left: 20% !important;
    }
    
    div.listItem div.listContent div.listTitle h2{
    	font-size: 22px !important;
    }
    
    div.eckdaten.col{
        display: block!important;
        width: 100%;
    }
    
    div.eckdaten.col span.eckdatenIcon{
        height: 33px!important;
        vertical-align: middle;
    }
    
    div.eckdaten.col span.eckdatenText{
        width: auto!important;
    }

    div.eckdaten.col:first-child {
        padding-bottom: 0 !important;
    }

    div.eckdaten.col:last-child {
        margin-left: 0 !important;
        padding-top: 0 !important;
    }

    div.eckdaten.col:last-child p:first-child {
        padding-top: 4px !important;
        border-top: none;
    }

    /* Produkte Seiten */
   
   #content img{
       max-width: 100%;
       height: auto;
   }
}