@charset "UTF-8";
/* CSS Document */



body, html { font-size: 100%; 	padding: 0; margin: 0;  scroll-behavior: smooth;}



img, a { border: none; text-decoration:none  }


aside, nav, article, figure, footer, section, header, main, div, ul, li, h1, h2, h3, h4, p {
	display: block; margin:0; padding:0; box-sizing: border-box;
	-moz-hyphens: auto; hyphens: auto;
}



body {
	font-family: 'Source Sans Pro', sans-serif;	font-weight:400;
	background-color:#fff;
	margin: 0;
	padding: 0;
	color: #000;
	text-align:left;	
}


	
header {
	width:100%;
	max-width:1200px;
	height:auto;
	margin:0 auto;

	}
	

main {
	width:100%;
	max-width:1200px;
	margin:0 auto;
	clear:both;
	padding: 2rem 4rem

	}

section article {text-align: left; max-width: 800px;  margin: 0 auto}



nav {
	float: left;
	font-size:1.15rem;
	color: #fff;
	margin-bottom:.25rem;
	
	}
	
nav a {
	color:#fff;
	padding:.25rem .5rem;

	box-sizing:border-box;
	
	background-color: #277;
/*	border-left: 2px dashed #ddd;
	border-top: 3px solid #ddd;
	border-right: 3px solid #ddd;*/
	
	-moz-border-radius:4px 0 0 0;
	-webkit-border-radius:4px 0 0 0;
	border-radius:4px 0 0 0;
	

	}

#mobile a {background-color:transparent}
	
	
nav a:hover, nav a:active, li a.anmeldung:hover {
	
	
	background-color: #1d3a3a;
	color:#fff;
	text-shadow:#000 0 1px 0;
	
	-moz-border-radius:4px 0 0 0;
	-webkit-border-radius:4px 0 0 0;
		border-radius:4px 0 0 0;

	overflow:hidden;
	
	}	
	
ul {margin:3rem 0 0 0}
li {float:left; margin-right:1.7rem; text-align: left}

.but {
	margin: 5rem 0;
	width:350px;
	height:80px;
	background-color:#cc3;
	color:#FFFFFF;
	border-radius: 4px;
	font-size: 1.5rem;
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	border: none;
	
background-image: -webkit-linear-gradient(bottom right, rgb(0 0 0 / 0.2), rgb(0 0 0 / 0.2) 30%, transparent);
background-image: -o-linear-gradient(bottom right, rgb(0 0 0 / 0.2), rgb(0 0 0 / 0.2) 30%, transparent);
background-image: linear-gradient(to top left, rgb(0 0 0 / 0.2), rgb(0 0 0 / 0.2) 30%, transparent);;
  box-shadow:
    inset 4px 4px 6px rgb(255 255 255 / 0.6),
    inset -4px -4px 6px rgb(0 0 0 / 0.6);
}
	
.but:hover {background-color: #277; color:#fff; cursor: pointer}

.hit {

	
	background-color: #1d3a3a;
	color:#fff;
	
	
	-moz-border-radius:4px 0 0 0;
	-webkit-border-radius:4px 0 0 0;
	border-radius:4px 0 0 0;
	
	overflow:hidden;
	
	text-shadow:#000 0 1px 0;
	
	padding:.25rem .5rem;
	margin-bottom:.25rem;

	
	}	
	

	
	
#logo {
	width:100%;
	border-top:0;
	text-align:center;
	margin: 0 auto 4rem;
	box-sizing:border-box;
	padding:3rem 0 5rem;
	background-color:#1d3a3a;
	overflow: hidden;


	
	}
	
#logo a {
		color:#fff;
		font-size:10rem;
		line-height: 7rem;
		letter-spacing:-3px;		
		font-family: 'Poppins', sans serif;
		font-weight: 700;
		text-shadow: 2px 2px 0 #cc3

		}



#logo a i {
	font-family: Baskerville, 'Palatino Linotype', Palatino, 'Century Schoolbook L', 'Times New Roman', 'serif';
	line-height: 3rem;
	letter-spacing: 0;
	font-size: 4rem;
	color:#cc3;
	text-shadow: none;
	}

#logo a figure {margin-bottom: 3rem}


	
#mobile {
	float:left;
	display:none;
	widows: 40px;
	height:30px
	}
	

.wein {
  position: relative;
margin-top:2rem;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 Seitenverhältnis, anpassbar */
  height: 0;
  overflow: hidden;
}

.wein iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}






h3 {
	color:#277;
	font-weight:700;
	font-size:.8rem;
	margin:1rem 0 .5rem;
	text-transform: uppercase;
	padding: .25rem 0 .15rem .5rem;
	font-family: 'Poppins', sans-serif;

	/*
	border-top: 5px solid #339999;
	border-right: 5px solid #339999;
	
	border-radius:4px 0  4px 0;
	-moz-border-radius:4px 0  4px 0;
	-webkit-border-radius:4px  0 4px 0;
	*/
	
	}	
	
h1 {
	color:#000;
	text-transform:uppercase;
	font-size:1.75rem;
	margin-bottom:.5rem;
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	line-height:1.75rem
	}	
	
	
h2 {

	color:#277;
	font-size:1.3rem;
	margin:2rem 0 1rem;
	line-height: 1.5rem;
	font-family: 'Poppins', sans-serif;
	font-weight: 400;
	}

main h2::before {content:"★ "; color:#ff6600}




.sub {
	color:#277;
	float:left;
	width:300px;
	margin:.5rem .75rem 0rem -10rem;
	font-style:italic;
	border-right:1px solid #000;
	padding: .5rem .5rem .5rem 0;
	box-sizing:border-box;
	font-size:.85rem;
	text-align:right;
	line-height:1.15rem;
	font-weight: 700
	
	

	}



.weinglas {margin:2rem 0 0.5rem}


main ul {margin:0; }

main ul li {
	font-size:1rem;
	list-style-image:url(../images/bullet-point.gif);
	display: list-item;
	float:none;
	line-height: 1.75rem;
	list-style-position:inherit
}

/*#numbers ul li  {
	list-style-image:url(i_max/bullet.gif);
	display: list-item;
	color:#666;
	padding:0 1rem;
	margin:0 1rem 0 1rem;
	line-height:1.5rem;
	*/
	

ul li:last-child {margin-right:0}


div#menue  {margin: 0 0 2rem 0}

div#menue ul li {list-style: none; margin-bottom: .5rem}





span.sc {
	background-color:#cccc33;
	font-family:'Source Sans Pro', sans-serif;
	color:#000;
	padding:0 .15rem;
	}


p {	font-size:1.1rem;
	margin-bottom:.75rem;
	line-height:1.5rem;
	text-align: left
	
}

 small, figcaption  {font-size:.75rem; font-style:italic; line-height: .5rem}

.autor-beschreibung {font-size:.75rem; line-height: 1rem; color: #333}

span {line-height:100%}








.form  {
	font-family: 'Source Sans Pro', sans-serif;	font-weight:400;
 	padding:0 .5rem;
	font-size:.9rem;
	background-color:#fff;
	border: none;
	height:2rem;
	color:#000;
	
	
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
 }

#search input {font-size:1rem;margin-bottom: 1em}
#search input[type=text] {width: 12em;max-width: 70%}

input::-webkit-input-placeholder {opacity:.8;}
input:focus::-webkit-input-placeholder {opacity:.2;} 
 
 .short {
		width:auto; 
		background-color:#fff;
		color:#000;
		border:none;
		font-size:1rem;
		height:2rem;
		cursor:pointer;

}

.form2  { 
	font-family: 'Source Sans Pro', sans-serif;
 	margin:0.25rem 0;
	padding:0.5rem;
	font-size:1rem;
	font-weight:300;
	background-color:#eee;
	border: none;
	
	color:#666;
	
	width:95%;
	

	transition: ease-in .2s;
	-webkit-transition:ease-in .2s;
	-moz-transition:ease-in .2s;
	-o-transition:ease-in .2s;
	

 }
 

.form2:focus {
	color:#fff;
	background-color:#339999;
	
	}
	

.short2 {
		width:25%; 
		font-weight:300;
		background-color:#666;
		color:#fff;
		border:none;
		cursor:pointer
		}



li a.anmeldung { 

	color:#666;
	padding:.25rem .5rem;
	border-top: 3px solid #ff6600;
	border-right: 3px solid #ff6600;
	box-sizing:border-box;


}



/*td .big {text-transform:uppercase}*/


main a {color:#000; padding: 0 .25rem; }

main .but a {background-color: transparent; }

main .but:hover a {color:#fff}

p a:hover, p a:active {background-color:#ff0; color:#000; padding: 0 .25rem 0; }





p a.dont, figure a.dont {background-color: transparent}

p a.dont:hover {text-decoration: underline; color:#000000}




aside p a:hover, aside p a:active {background-color:#cc3; color:#000; }

aside p a.short2 {padding:.5rem}

#mobile a {padding:0; margin:0}
	




sup {line-height:100%}

.clear {
	clear:both;
	}
	
.info-box {
	font-size:.75rem;
	background-color:#eee;
	padding:.75rem 1rem;
	box-sizing:border-box;
	font-weight:400;
	font-style:italic;
	margin-top:2rem
	
	}	
	
.info-box span { font-style:normal; font-weight:700 }
	
.arrow {color:#277; font-size:0.6rem; vertical-align: middle}	
	
	
@media screen and (max-width:1100px) {
	
	
	header {
	width:800px; 
	}
	
	aside {
	margin-top:3.15rem;
	
	}
	
	main {
	width:800px; 
	}
	
	li {margin-right:.7rem}

	

	
	
	#logo a {
		font-size:8rem;
		
		
		}
	
	#logo a i {
	font-size: 3rem;
	}
		
}




@media screen and (max-width:850px) {
	
	header {
	width:650px; 
	}
	
	
	main {
	width:630px; 
	}
	

	
	nav {
	width:100%;
	font-size:1rem
	}
	
	nav a {
	padding:.25rem ;
	
	}
	
	li {margin-right:.5rem}



	#content {
	width:100%;
	}
		
	
	
	aside {
		width:100%;
		margin-top: -1rem;
		font-size:.7rem;
		clear:both;
		}
	
	#logo {padding:.5rem 0 1.5rem}
		
		#logo a { font-size:5.5rem;	line-height:5rem; text-shadow: #cc3 1px 1px 0px;}
		
	
		#logo a i { font-size:2.5rem;}
	
	
	
}
	
	
	
	@media screen and (max-width:670px) {
	
	
	
	header {
	height:auto;
	width:400px;
	}
	
	
	
	main {
	width:400px;
	margin-top:3%;
	}
	

	#content {
	width:100%;
	}
		
	#logo {
	margin:1rem 0 1rem;
	}
	
	
	#mobile {
	display:  block;
	float:left;
	padding:.75rem 0 0  0;		
	}
	
	

	
nav {
	float:right;
	height:0.01rem;
	overflow:hidden;
	width: 330px;
	margin:0;
	font-size:1.1rem;
	
	transition: linear .5s;
	-moz-transition: linear .5s;
	-o-transition: linear .5s;
	-webkit-transition: linear  .5s;

 }	
	
#menu_open:target nav  {
	
	height:12rem;
	
	transition: linear .5s;
	-moz-transition: linear .5s;
	-o-transition: linear .5s;
	-webkit-transition: linear  .5s;
	

	}
	
a.open {display:block}

a.close {display:none}
	
#menu_open:target a.open {display:none}

#menu_open:target a.close {display:block}

	
	
	
	
	
	ul {margin:.5rem 0}
	li  {float:none; margin:0 0 .05rem 0; padding:0}
	
	nav a { display:block}
	
	.hit {margin:0; display:block}
	
	h1 {
	font-size:1.5rem;
	
	}
	

	
	
	main ul li {font-size:.8rem}
	
	
	.sub {
	width:300px;
	margin:1rem .75rem 1rem -8rem;
	padding: 0 .5rem 0 0;
	
	
	
	}
	

}


@media screen and (max-width:450px) {
	
	
	header {
		width:350px;
		}
	
	main {
		width: 350px;
		margin-top:.5rem;
	}
	
	nav {
		width:270px; 
		
		}
	
	
	
	}