@charset "iso-8859-1";

body, html {
	background-color:#fff;
	margin:0px auto;
	text-align:left;
 	font-family: 'Arial',sans-serif;
	font-size:100%;
  	line-height:145%;
 	min-height:101%;
    color:#333;
}
#header .visually-hidden {display:none;}
.container {
    margin-left: 21.5%;
    margin-right: auto;
    width: 100%;
  	max-width: 1080px;
  	text-align:left;
}
#inhalt {  
  position:relative;
  width: 100%;
  min-height: 260px;
  margin: 0 auto;
  background:#fff;
    margin-top:40px;
}
#inhalt1 {  
  position:relative;
  width: 100%;
  min-height: 260px;
  max-width:1080px;
  margin: 0 auto;
  background:#fff;
  padding:4.777775% 0 2.777775% 0;
}
a {color: #94c01b; text-decoration: none;}
.wrapper {
   position:relative;
	width:90%; /* Establecemos que el ancho sera del 90% */
	max-width:1080px; /* Aqui le decimos que el ancho máximo sera de 1000px */
	margin:auto; /* Centramos los elementos */
}
#header {
 	position: fixed;
  	width: 100%;
    height:74px;
  	padding: 10px 0;
  	background: #fff;
  	z-index: 9999;
  	top: 0;
  	box-shadow: 0px 8px 6px -6px #888;
}

#header ul {
	position:absolute;
	left:320px;
	margin:0px;
	padding:0px;
	top:15px;
}
#header li ul {
   	position:absolute;
   	z-index:200;
 	display: none;
	left:0;
  	padding:0px;
  	margin:0px;
    color: #fff;
  	min-width:180px;
  	top:25px;
}
#header ul li {
  	float:left;
 	list-style:none;
 	position:relative;
 	padding:15px;
 	color:#000;
}
#header ul li ul li {
  display:block;
  padding:5px 0px 5px 15px;
}
#header li:hover ul { display:inline-block; background:#000;}
#header ul li a {
  display: inline;
  text-decoration: none;
  color: #333;
  margin:0px;
  padding:0px;
  font-size: 0.95em;
  padding-bottom:5px;
}
#header ul li ul {
  position:absolute;
  text-decoration: none;
  color: #fff;
  margin:15px 0 0 0;
  padding:0px;
}
#header ul li ul li ul{
  margin:5px 0 0 0;
}
#header li ul li a {position:relative; color: #fff; padding:0px; margin:0px; }
.nav-header, .item-177 {font-weight:bold;color:#ccc;}

.menue-button {display: none;}	
#steuerung {z-index:200;}
#header #menu {
  clear: both;
  max-height: 0;
  transition: max-height .2s ease-out;
}
#header .menu-icon {
  cursor: pointer;
  display: inline-block;
  float: right;
  padding: 28px 20px;
  position: relative;
  user-select: none;
}
#header .menu-icon .navicon:before,
#header .menu-icon .navicon:after {
  background: #333;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}
#header .menu-icon .navicon {
  background: #333;
  display: block;
  height: 2px;
  position: relative;
  transition: background .2s ease-out;
}
#header .menu-icon .navicon:before { top: 5px;}
#header .menu-icon .navicon:after { top: -5px;}
#header .menu-btn { display: none;}
#bild { position:relative; width:100%; display: block; animation-delay: 50px; padding:0px; margin:0px; margin-top:70px;}
h1 {
	text-align:left;
	font-size:200%;
  	width:450px;
	color:#000;
	text-transform:uppercase;
  	line-height:120%;
	margin:0 50px 0 0;
}
h2 {
	text-align:center;
	font-size:450%;
  	width:1080px;
	color:#fff;
	text-transform:uppercase;
  	line-height:120%;
	margin:350px 0px 0 0;
  	float:left;
  	height:300px;
}
h3 {
	text-align:left;
	font-size:100%;
	color:#000;
  	line-height:120%;
  	margin:0;
  	padding:0;
}
h4 {
	text-align:left;
	font-size:200%;
  	width:450px;
	color:#ccc;
	text-transform:uppercase;
  	line-height:120%;
	margin:0 50px 0 0;
}
h5 {
  	font-size:120%;
	text-align:left;
	color:#ccc;
  	line-height:120%;
  	margin:0;
  	padding:0;
  	font-weight: normal;
}
ul{
  	list-style:square;
  	font-weight: 400;
  	line-height: 25px;
	color: #000;
 	margin:0;
  	padding:0;
  	list-style-position: inside;
}
span { color: #333; font-weight: 400; line-height: 25px; text-align:left;}
li.item-176, li.item-177 {background-color:#333;display:inline-block;width:100% !important;}
#header ul li ul li.item-177 {padding:5px 0px 5px 0px;}
#header ul li ul li.item-177 a {padding-left:15px;}
p.bestellung {
  display: inline; 
  float: left;
  margin-right:30px;
}
a.newsletter {
  display:inline-block;
  background-color:#94c01b;
  color:#fff !important;
  padding:7px;
  float:left;
  border:2px solid #94c01b;
}
a.newsletter:hover {
  display:inline-block;
  background-color:#85aa1e;
  color:#fff;
  padding:7px;
  float:left;
  border-top:2px solid #6f882b;
  border-left:2px solid #6f882b;
  border-right:2px solid #94c01b;
  border-bottom:2px solid #94c01b;
}
#footer  {
	position: relative;
 	width:100%;
  	background-color:#000;
    margin: 0 auto;
  	text-align:center;
	clear: both;
  	padding:15px 0px 12px 0px;
  	min-height:55px;
}
#footer div.custom {
   	position:relative;
  	display:block;
  	margin: 0 auto;
  	width:1080px;
	text-align:left;
	font-size:100%;
  	line-height:120%;
  	color:#fff;
}
#footer a.agb {
  position:relative;
  display:block;
  width: 150px;
  padding:15px 7px 7px 7px;
  margin-left:50%;
  float:right;
  color:#fff;
}
#footer a.agb:hover {
  color:#85aa1e;
}
#logo {
  margin-top:18px;
  padding:0px;
  width:200px;
  height:auto;
}
#slide7 {
	background:url('/images/glaswein.jpg') 100% 0 no-repeat fixed;
	color: #fff;
	height: 600px;
	padding: 165px 0px 165px 0;
	background-size: cover;  
}

#section-1, #section-2, #section-4, #section-5, #section-7, #section-8, #section-9, #section-10 {
	background-color: #fff;
	color: #333333;
	margin: 0 auto;
	height:90%;
	overflow: hidden;
	padding: 40px 0px 200px 0px;
  	width:99.5% !important;
	font-size:1em;
}
#section-2 {
  	background:url('/images/weinkeller2.jpg') 45% 0 no-repeat fixed;
	color: #fff;
	height: 1000px;
	padding: 0px 0px 40px 20%;
	background-size: cover;  
  width:100%;
}
#section-4 {
	background-color: #fff;
	color: #333333;
	margin: 0 auto;
	height:90%;
	overflow: hidden;
	padding: 60px 0px 60px 0px;
  	width:100%;
}
#section-5 {
	background-color: #fff;
	color: #333333;
	margin: 0 auto;
	height:90%;
	overflow: hidden;
	padding: 120px 0px 120px 0px;
  	width:100%;
}
#section-7 {
  	background:#fff;
	color: #333;
	height: 150px;
	padding: 40px 0px 40px 0px;
 	width:100%;
}
#section-8 {
  	background:#333;
	color: #fff;
 	min-height:550px;
	height: auto;
	padding: 120px 0px 40px 22%;
	background-size: cover;  
  	width:100%;
}
#section-9 {
	background:url('/images/weinkeller.jpg') 45% 0 no-repeat fixed;
	color: #fff;
	height: 390px;
	padding: 165px 0px 40px 20%;
	background-size: cover; 
  	width:100%;
}
#section-10 {
	background:url('/images/inhaber_1.webp') 45% 0 no-repeat fixed;
	color: #fff;
	height: 580px;
	padding: 165px 0px 40px 20%;
	background-size: cover; 
  	width:100%;
}
#section-1 a:link, #section-2 a:link, #section-4 a:link, #section-5 a:link, #section-7 a:link, #section-8 a:link, #section-9 a:link #section-10 a:link, 
#section-1 a:visited, #section-2 a:visited, #section-4 a:visited, #section-5 a:visited, #section-7 a:visited, #section-8 a:visited, #section-9 a:visited, #section-10 a:visited {
	    color:#94c01b;
	text-decoration:none;
}
.section a:hover {
	color: #503f37;
	text-decoration:none;
}
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6 {
    display: inline;
    float: left;
    margin-right: 10px;
    margin-left: 0px;
    text-align:left;
  	margin-bottom:20px;
	font-size:1em;
}
.container .grid_1 {
    width: 120px;
}
.container .grid_1-1 {
    width: 35%;
  	max-width:150px;
  	float:left;
  	margin-right:10px;
}
.container .grid_2 {
    width: 260px;
}
.container .grid_3 {
    width: 400px;
}
.container .grid_4 {
    width: 540px;
}
.container .grid_4-1 {
    width: 60%;
  	float:left;
  	margin-top:40px;
}
.container .grid_5 {
	width: 680px;
}
.grid_6 {
    width: 100%;
	max-width:1080px;
  	clear:left;
}
.container .suffix_1 {
    padding-right:120px;
}
.container .suffix_2 {
  padding-right: 260px;
}
.container .suffix_4 {
  padding-right: 540px;
}
.container .suffix_5 {
  padding-right: 680px;
}
.container td {
	font-size:0.8em;
}
#nav .active a {
  color:#94c01b;
}
#nav .active ul li a {
  color:#fff;
}
#nav .active ul li.current a, #nav .current ul li a:hover {
  color:#94c01b;
}
#clear {
  clear:both;
}

@media (min-width: 10em) {
#header .menu-icon {
    display: none;
}
#header .menu {
    clear: none;
    float: right;
    max-height: none;
}
#header ul { margin:0px; padding:0px; width:100%;}
#header li { display:block; width:100%;}
#header li a { padding: 0px 10px;}
#header li a:hover { color:#94c01b;}
}
@media (min-width: 25em) {
#header li { float: left; display:block; width:50%;}
}
@media (min-width: 40em) {
#header li { float: left; display:block; width:auto;}
#header ul { padding:0px; margin:0px;}
#header li ul li { clear:left;}  
}
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1169px){
.wrapper {
  	position:relative;
   	width:100%;
  	max-width:1169px; /* Aqui le decimos que el ancho máximo sera de 1000px */
    height:120px;
}
#header {
 	position: relative;
  	width: 100%;
    height:120px;
  	padding: 10px 0px 0px 0px;
  	background: #fff;
  	z-index: 9999;
  	top: 0;
  	box-shadow: 0px 8px 6px -6px #888;
}
#bild {margin-top:0px;}
.container {
  margin-left: 4%;
  margin-right: auto;
  max-width: 90%;
  text-align:left;
}
#inhalt {  
  position:relative;
  width: 100%;
  min-height: 260px;
  margin: 0 auto; 
      margin-top:0px;
}
#section-2 {
	height: 300px;
	padding: 60px 0px 60px 4%;
	background-size: cover;
	max-width: 96%;
	background: url('/images/weinkeller2.jpg');
	background-size: 100%;
	background-repeat: no-repeat;
}
#section-3 {
	padding: 60px 0px 60px 4%;
	max-width: 96%;
}
#section-8 {
	padding: 60px 0px 60px 4%;
	max-width: 96%;
}
#section-9 {
	height: 300px;
  	margin-top:0px;
	padding: 60px 0px 60px 4%;
	background-size: cover;
	max-width: 96%;
	background: url('/images/weinkeller.jpg');
	background-size: 100%;
	background-repeat: no-repeat;
}
#section-10 {
	height: 300px;
	padding: 60px 0px 60px 4%;
	background-size: cover;
	max-width: 96%;
	background: url('/images/inhaber.jpg');
	background-size: 100%;
	background-repeat: no-repeat;
}
#header ul li ul {
  text-decoration: none;
  color: #fff;
  margin:0 0 20px 0;
  padding:0px;
}
#header ul li ul li {
    padding:0px;
}
#header ul li ul li a {
  padding:1% 4%;
}
#nav .active ul li a {
  color:#000;
}
#nav .active a {
  color:#fff;
}
  #nav .active ul li.current a {
    color:#94c01b;
  }
#header .menu-btn:checked ~ ul.menu { 
  display:block; top:103px;
}
#header li ul li a {
  display:block;
  background: #fff;
  color:#333;
  border-bottom:1px solid #333;
  padding-left:34px;
}  
#header ul li a {
  border-bottom:1px solid #fff;
}  
#logo { margin-top:10px; margin-bottom:20px; padding:0px;}	
#footer  {
	position: relative;
 	width:100%; 	
    margin: 0 auto;
  	text-align:center;
	clear: both;
  	padding:0px 0px 0px 0px;
}
#footer div.custom {
   	position:relative;
  	display:block;
  	margin: 0 auto;
  	max-width:96%;
	text-align:left;
	font-size:100%;
  	line-height:120%;
  	color: #fff; 
  	text-align: left;
  	padding: 20px 0px 20px 4%;
  	background-color:#000;
}
}
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1169px)
  and (orientation:portrait) {
    .grid_4-2 {clear:left;}
}
@media screen and (max-width:1170px) {
#bild { position:relative; width:100%; display: block; animation-delay: 50px; padding:0px; margin:0px; margin-top:0px;}

#logo { 
	padding-left: 4%;
	margin-top:10px;
	margin-bottom:150px; 
}
#header ul {
    position:absolute;
    top:103px;
    left:0px;
}  
#header ul li ul {
    position:relative;
    display:block;
    z-index:0;
    top:0px;
    padding:0px;
    margin:0px;
}
#header .menu {
  clear: both;
  max-height: 0;
  transition: max-height .2s ease-out;
}
#header li a:hover {
   background-color:#000;
	color:#94c01b;
}
#header li ul li a {
  display:block;
  background: #fff;
  color:#333;
  border-bottom:1px solid #94c01b;
  padding-left:4%;
}
#header li ul li a:hover {
  	display:block;
  	background: #000;
  	color:#94c01b;
} 
#header li { 
  display:block; 
  width:100%;
}
#header li a { 
  padding: 0px 10px;
}
#header ul li{
	float:left;
   	list-style:none;
   	position:relative;
  	padding:0px;
}
#header ul li a {
  position:relative;
  display: block;
  padding:15px;
  padding-left:4%;
  top:7px;
  color:#fff; 
  background:#94c01b;
}
#header .menu-icon {
  cursor: pointer;
  display: inline-block;
  float: right;
  padding: 28px 20px;
  position: relative;
  user-select: none;
}
#header .menu-icon .navicon {
  background: #333;
  display: block;
  height: 2px;
  position: relative;
  transition: background .2s ease-out;
  width: 18px;
}
#header .menu-icon .navicon:before {
  background: #333;
  content: '';
	display: block;
  height: 100%;
  top:5px;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}
#header .menu-icon .navicon:after {
  background: #333;
  content: '';
  display: block;
  height: 100%;
  top:-5px;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
} 
#header .menu-icon .navicon:before {
  top: 0px;
}
#header .menu-icon .navicon:after {
  top: 0px;
}
#header .menu-btn {
  display: none;
}
#header .menu-btn:not(:checked) ~ .menu {
  max-height: 0px;
}
#header .menu-btn:checked ~ .menu-icon .navicon {
  background: transparent;
}
#header .menu-btn:checked ~ .menu-icon .navicon:before {
  transform: rotate(-45deg);
}
#header .menu-btn:checked ~ .menu-icon .navicon:after {
  transform: rotate(45deg);
}
#header .menu-btn:not(:checked) ~ .menu-icon:not(.steps) .navicon:before,
#header .menu-btn:not(:checked) ~ .menu-icon:not(.steps) .navicon:after {
  top: 0;
  margin: 5px 0px 0px 0px;
}
#header .menu-btn:not(:checked) ~ .menu-icon:not(.steps) .navicon:before {
  background: #000;
  margin:10px 0px 0px 0px;
}
#header ul.menu { display:none;}
#header .menu-btn:checked ~ ul.menu { display:block;}

}
@media (max-width: 767px) {
     /* mobile Geraete */ 
.container {
  	margin-left: 4%;
  	margin-right: auto;
  	width: 90%;
 	text-align:left;
}
#inhalt {  
	position:relative;
  	width:100%;
      margin-top:0px;

}
.grid_6 {
    width: 100%;
	max-width:767px;
  	clear:left;
}
.wrapper {
  	position:relative;
   	width:100%;
  	max-width:767px; /* Aqui le decimos que el ancho máximo sera de 1000px */
    height:120px;
}
#header {
 	position: relative;
  	width: 100%;
    height:120px;
  	padding:0;
  	background: #fff;
  	z-index: 9999;
  	top: 0;
  	box-shadow: 0px 8px 6px -6px #888;
}
#header ul li a {
  border-bottom:1px solid #fff;
} 
  #header ul li ul li {
    padding:0px;
  }
#header ul li ul li a {
  padding:15px;
}
#nav .active ul li a {
  color:#000;
}
#nav .active a {
  color:#fff;
}
  #nav .active ul li.current a {
    color:#94c01b;
  }
#bild { position:relative; width:100%; display: block; margin-top:0px;}
  #logo {margin-top:10px;}

#section-2 {
  	padding: 60px 0px 60px 4%;
  	width:96%;
	background-size: cover;
	background: url('/images/weinkeller2.jpg');
	background-size: 100%;
	background-repeat: no-repeat;
  	height:110px;
}
#section-3 {
	padding: 60px 0px 60px 4%;
  width:96%;
}
#section-4 {
	background-color: #fff;
	color: #333333;
	height:90%;
	overflow: hidden;
	padding: 20px 0px 20px 0px;
  	width:96%;
}
#section-5 {
	background-color: #fff;
	color: #333333;
	height:90%;
	overflow: hidden;
    max-width:300px;
    margin-left: 4%;
  	width:96%;
  	padding:10px 0 0 0;
}
#section-7 {
  	background-color: #fff;
	color: #333333;
	height:90%;
	overflow: hidden;
	padding: 20px 0px 20px 0%;
  	width:96%;
}
#section-8 {
	padding: 60px 0px 60px 4%;
  	max-width:96%;
}
#section-9 {  
	padding: 60px 0px 60px 4%;
    width:96%;
	background-size: cover;
	background: url('/images/weinkeller.jpg');
	background-size: 100%;
	background-repeat: no-repeat;
  	height:90px;
}
#section-10 {
  	padding: 60px 0px 60px 0%;
  	width:96%;
	background-size: cover;
	background: url('/images/inhaber.jpg');
	background-size: 100%;
	background-repeat: no-repeat;
  	height:90px;
}
h1 {
	text-align:left;
	font-size:200%;
	color:#000;
	text-transform:uppercase;
  	line-height:120%;
    	width: 90%;
}
#footer  {
	position: relative;
	clear: both;
}
#footer div.custom {
   	position:relative;
  	display:block;
  	margin: 0 auto;
	font-size:100%;
  	color: #fff; 
  	text-align: left;
  	padding: 4% 0 4% 4%;
  	width:96%;
  	background-color:#000;
}
}