﻿html {margin:0;padding:0;}
body {margin:0;padding:0;background-color: #A7D22D;font-family: "Lucida Sans", "Lucida Grande", sans-serif;font-size: 18px;box-sizing:border-box;} 

h1,h2,h3,h4,h5,h6,p {line-height: 1.45; }

h1 { font-size: 2em; }
h2 { font-size: 1.5em; margin:0;}


/* Spezial Öffnungszeiten */
.achtung { background-color: #8B0000; }
.valigncenter {display: table;margin: 0 auto;}
.tablehalf {float:left}
.christmas-date-row { /* Eine gesamte Datumszeile */
	//border-bottom: 1px dotted #ddd;
    width: 100%;
    color: #333333;
    //padding-left: 15px;
} 
@media screen and (min-width: 750px) { /*.christmas-date-row {width: 50%; }*/ }

.christmas-date {	
	 border-right: 1px dotted black;
    display: inline-block;
    padding-right: 5px;
    text-align: right;
    width: 200px;
}

.christmas-date-highlight { /* Hervorhebung von Datum und Zeit */
	font-weight: bold;
	color: #8B0000;
}

.christmas-openingtime { /* derzeit nicht benötigt*/ }

/* ENDE Spezial Öffnungszeiten */

.headerwrap {background: none repeat scroll 0 0 #79b51c; margin: 0; text-align: center; width: 100%; }
.logo{background: none repeat scroll 0 0 #FE9900; /*float: left;*/ }
.email, .phone {color: black; }
.phone {text-decoration: none;}
.slogan {color: #fff; padding: 1% 3%; width: 94%; }
.wrap { width:100%;background:#fff}
.center{text-align: center}
.impressum{margin:15px 15px 0;font-size: 90%;}
.clear{clear: both}
.bioladen{display:none}
a.regionales {display: inline-block;width: 32%;text-align: center}

nav {    
	background:#455868;
    box-shadow: 5px -24px 10px -10px rgba(0, 0, 0, 0.2) inset;
    float: left;
    font-weight: bold;
    height: 40px;
    position: relative;
    width: 100%;}
nav ul {padding: 0; margin: 0 auto; width: 100%; height: 40px; }
nav li {display: inline; float: left; width:33.333%;}
.clearfix:before, .clearfix:after {content: " "; display: table; }
.clearfix:after {clear: both; }
.clearfix {*zoom: 1; }
nav a {color: #fff; display: inline-block; line-height: 40px; text-align: center; text-decoration: none; text-transform: uppercase; width: 100%;} 
nav li a {border-right: 1px solid rgba(0,0,0,0.1); box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; }
nav li:last-child a {border-right: 0; }
nav a:hover, nav a:active {background-color: #8c99a4; }
nav a#pull {display: none; }
@media screen and (max-width: 600px) {  
    nav {height: auto; }
    nav ul {width: 100%; display: block; height: auto; }
    nav li {width: 50%; float: left; position: relative; }
    nav li a {border-bottom: 1px solid #576979; border-right: 1px solid #576979; }
    nav a {text-align: left; width: 100%; text-indent: 10%; }
}  
@media only screen and (max-width : 480px) {  
    nav {border-bottom: 0; }
    nav ul {display: none; height: auto; }
    nav a#pull {display: block; background-color: #283744; width: 100%; position: relative; }
    nav a#pull:after {content:""; background: url('../graphics/nav-icon.png') no-repeat; width: 30px; height: 30px; right:15px;display: inline-block; position: absolute; rightright: 15px; top: 10px; }
}  
@media only screen and (max-width : 320px) {  
    nav li {display: block; float: none; width: 100%; }
    nav li a {border-bottom: 1px solid #576979; }
}  


img {-ms-interpolation-mode: bicubic;}

.bis-275{display:none}
.bis-939{display:none}
.ab-940{display:none}

.nojs-foto {width:100%;height:300px;overflow: hidden;}
     
@media only screen and (min-width: 800px) and (orientation: portrait) and (max-width: 1449px) {
    .nojs-foto img { width: 100%; }
}

@media only screen and (min-width: 1450px) {
    .nojs-foto img { width: 100%; }
}

h1{color: #fff; text-align: center; margin: 0; padding: 0; font-weight: normal;}
h2 {background: none repeat scroll 0 0 #79b51c; color: #fff; /*font-size: 1.6em;*/ padding: 1% 1% 1% 10px; }

.opentimehighlight {
    display: inline-block;
    font-weight: bold;
    margin-bottom: 2px;
    margin-left: -5px;
    padding: 2px 5px 1px;
    background-color: #79b51c;
    color: #000;
}
.openingtimes {    margin-top: -19px;}
.openingtimes > ul {list-style: none outside none; padding-left: 30px; } 
.openingtimes li {margin-bottom: 15px; }
.offer li {margin-bottom: 12px; }

#nav li a {color: #7FAD29; display: table-cell; font-size: 19px; height: 60px; text-decoration: none; vertical-align: middle; padding: 0 20px}
#nav li a:hover {text-decoration: underline}
#nav li {display: inline-block; color: #F00; list-style-type: none}
#nav li.selected a {background: none repeat scroll 0 0 #FE9900; color: #FFFFFF}
#nav ul {height: 60px; margin: 0; padding: 0; text-align: center}
#nav {background: rgba(14, 19, 35, 1); height: 60px; z-index:10;width:100% !important;}
#navWrap {height: 60px}
.wrap .fb_iframe_widget {display:none}

@media only screen and (min-width : 400px) and (max-width : 1449px) and (orientation : landscape) {
	.offer {float: none; width: 100%; }
	.clear-opening-offer {clear:both;}
	h2 {margin-top: 0;}
}

@media only screen and (min-width : 400px) and (max-width : 568px) and (orientation : landscape) {
	.fotorama, .nojs-foto {float: left; width: 40% }
	.openingtimes {float: left; width: 60%; }
}

@media only screen and (min-width : 569px) and (max-width : 709px) and (orientation : landscape) {
	.fotorama, .nojs-foto {float: left; width: 50% }
	.openingtimes {float: left; width: 50%; }
}

@media only screen and (min-width : 710px) and (max-width : 943px) and (orientation : landscape) {
	.fotorama, .nojs-foto {float: left; width: 60% }
	.openingtimes {float: left; width: 40%; }
}

@media only screen and (min-width : 944px) and (max-width : 987px) and (orientation : landscape) {
	.fotorama, .nojs-foto {float: left; width: 70% }
	.openingtimes {float: left; width: 30%; }
}

@media only screen and (min-width : 988px) and (max-width : 1449px) and (orientation : landscape) {
	.fotorama, .nojs-foto {float: left; width: 65% }
	.openingtimes {float: left; width: 35%; }
}

@media only screen and (max-width : 319px) {
	.headerwrap h1 {display:none;}
	.logo{width:100%;}
}

@media only screen and (max-width : 275px) {
	.bis-275{display:block;clear: both}
	.wrap{width:100%}
	h1{font-size:1.5em;}
}

@media only screen and (min-width : 276px) and (max-width : 987px) {
	.bis-939{display:block;clear: both}
	.headerwrap {width: 100% }
}

@media only screen and (min-width : 360px) and (max-width : 1449px) and (orientation : portrait) {
	.offer, .openingtimes {float: left;width: 50%;}
}

@media only screen and (min-width : 320px) and (max-width : 987px) {
	.headerwrap {float: left; }
	.slogan {float: left; padding: 2%; width: 56%; }
	.logo {float: left; width: 40%; }
}

@media only screen and (min-width : 988px) {
	.ab-940{display:block;clear: both;border: 1px solid #79b51c;margin-bottom:15px;}
	.wrap{width:940px;margin:0 auto 20px; padding:15px;}
	.headerwrap {margin: 20px auto 0; width: 970px; height:75px; }
	.foto {width:100%;}
	.logo{float: left; padding: 10px; height:55px;}
	h1{padding: 0 14%;float: left; line-height: 185%; margin-top: 0; padding: 5px 5px 5px 13px; }
	.slogan {height: 35px; padding: 20px 67px; width:auto; }
	nav{margin-top:30px;background:#79b51c;border-radius: 8px 8px 0 0;}
	nav a:hover, nav a:active {background-color: #455868; }

.bioladen {
    background: url("https://www.schrotundkorn.de/bbl/2015/BBL_2015-155.jpg") repeat scroll -19px -46px / 115px auto rgba(0, 0, 0, 0);
    border-radius: 0 0 35px 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    display: inline-block;
    float: right;
    font-size: 0;
    height: 75px;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
    width: 88px;
}
}

@media only screen and (min-width : 1450px) {
	.openingtimes {padding: 10px 0 10px 10px;box-shadow: -5px 0 10px -5px rgba(0, 0, 0, 0.25);background: #FE9900; border-radius: 8px 0 0 8px; color: #fff; margin-left: -225px; position: fixed; top: 200px; width: 200px; }
	.wrap .fb_iframe_widget {box-shadow: 5px 0px 10px 0px rgba(0, 0, 0, 0.25);margin-left: 955px;position: fixed;top: 200px;width:230px;display:block}
	.opentext {background: none repeat scroll 0 0 #79b51c; border-radius: 8px 0 0; color: #fff; display: block; font-weight: bold; margin-left: -10px; margin-top: -33px; padding: 7px 0; text-align: center; width: 210px; }
	.openingtimes > ul {padding: 0; } 
	.email, .phone {  color: white;}
	.opentimehighlight {background-color: #fff;color: green;}
}