/* CSS Document */

/* ############################################################# */
/* HTML Standart */
/* ############################################################# */

body, html{
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    -webkit-box-shadow: 0px 0px;
    box-shadow: 0px 0px;
}

h2{
	text-align: center;
	margin: 100px auto 0 auto;
	font-size: 55px;
	line-height: 60px
}

.balken{
	margin: 6px auto 10px auto; 
	height: 5px;
	width: 80px;
}

.button{
	text-transform: uppercase;
	padding: 10px 30px 10px 30px;
	display: inline-block;
	margin: 40px 0 20px 0;
}

a{
	text-decoration: none;
}

/* ############################################################# */
/* Zusammengefasste Klassen */
/* ############################################################# */

footer, header, #kontakt .balken, #uberUns, #speisekarte, #gallery, #maps, .balken_h3{
	background: #fff;
}

.page{
	background-color: #444444;
}

#kontakt h2, #startseite h2, #startseite .button, #kontakt .adressen, #kontakt .adressen a, h3{
	color: #fff;
}

p, a, header nav ul li a, header nav ul li{
	color: #666;
}

footer, footer a{
	color: #666;
}

#uberUns h2, #gallery h2, #speisekarte h2, #uberUns h3, #maps h2, header nav ul li a:hover{
	color: #111;
}

#uberUns .balken, #speisekarte .balken, #gallery .balken, #maps .balken{
	background-color: #111;
}

header nav ul li{
	font-family: "tamarillo-jf",sans-serif;
	
}

p{
	font-family: "swister",sans-serif;
}

h3{
	font-family: "bickham-script-pro-3",sans-serif;
	font-weight: 1px;
}

h2{
	font-family: "alana",sans-serif;
	
}

h4, #kontakt .adressen ul li{
	font-family: "swister",sans-serif;
	font-size: 20px;
}

h5{
	font-family: "orator-std",monospace;
	line-height: 1px
}

header, header nav ul li a, header nav ul, header #logo{
	transition: all 300ms;
	-ms-transition: all 300ms;
	-moz-transition: all 300ms;
	-o-transition: all 300ms;
	-transition: all 300ms;
}

/* ############################################################# */
/* Umfassende Klassen */
/* ############################################################# */

.page{
	width: 100%;
	min-height: 100%;
	overflow: hidden;
	float: left;
}

/* ############################################################# */
/* Header */
/* ############################################################# */


/*
header{
	position: fixed;
	z-index: 99;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 40px; 
	border-bottom: 1px solid #dfdfdf;
}

header #logo{
	float: left;
	width: 60px;
	margin: 2px 0 0 8px;
}

header #logo img{
	width: 100%;
	height: auto;
}



header nav{
	float: right;
	height: 40px;
	margin: 0;
	padding: 0;
}

header nav ul {
	margin: 6px 40px 0 0; 
	padding: 0;
}

header nav ul li{
	margin: 0 10px 0 0;
	padding: 0;
	list-style-type: none;
	float: left;
}

header nav ul li a{
	font-size: 12px;
}

/* ######## */

/*
header:hover{
	height: 140px;
}

header:hover > #logo{
	width: 220px; 
	margin: 4px 0 0 20px;
}

header:hover > nav ul{
	margin: 50px 100px 0 0;
}

header:hover > nav ul li{
	margin: 0 40px 0 0;
}

header:hover > nav ul li a{
	font-size: 30px;
}

*/
@media screen and (max-width: 600px){
	header{
		position: fixed;
		z-index: 99;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 60px; 
		border-bottom: 1px solid #dfdfdf;
	}
	nav #logo{
		display: none;
	}
	nav #logo img{
		display: none;
	}
	nav{
		display: flex;
		justify-content: center;
		flex-direction: row;
		width: 100%;
		margin: 0;
		padding: 0;
	}
	
	nav ul{
		display: flex;
		justify-content: center;
		flex-direction: row;
		list-style-type: none;
		margin: 14px 0 0 0;
	}
	nav ul li{
		margin: 0 20px 0 0;
		list-style-type: none;
	}
	nav ul li a{
		font-size: 18px;
	}
	#menu{
		display: none;
	}
	
	



}
@media screen and (min-width: 600px) and (max-width: 1100px){
	header{
		position: fixed;
		z-index: 99;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 60px; 
		border-bottom: 1px solid #dfdfdf;
	}
	nav #logo{
		align-self: flex-start;
		width: 80px;
		margin: 7px 0 auto 20px;
	}
	nav #logo img{
		width: 100%;
		height: auto;
	}
	nav{
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		width: 100%;
		margin: 0;
		padding: 0;
	}
	
	nav ul{
		display: flex;
		justify-content: center;
		flex-direction: row;
		list-style-type: none;
		margin: 14px 20px 0 0;
	}
	nav ul li{
		margin: 0 20px 0 0;
		list-style-type: none;
	}
	nav ul li a{
		font-size: 22px;
	}
	#menu{
		display: none;
	}
}
@media screen and (min-width: 1101px){
	header{
		position: fixed;
		z-index: 99;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 40px; 
		border-bottom: 1px solid #dfdfdf;
	}
	nav #logo{
		align-self: flex-start;
		width: 60px;
		margin: 5px 0 auto 20px;
	}
	nav #logo img{
		width: 100%;
		height: auto;
	}
	nav{
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		width: 100%;
		margin: 0;
		padding: 0;
		background-color: white;
		border-bottom: 1px solid #dfdfdf;
	}


	nav ul{
		display: flex;
		justify-content: center;
		flex-direction: row;
		list-style-type: none;
		margin: 7px 20px 0 0;
	}
	nav ul li{
		margin: 0 10px 0 0;
		list-style-type: none;
	}
	nav ul li a{
		font-size: 12px;
	}
	#menu{
		display: none;
	}

	nav:hover{
		height: 140px;
	}

	nav:hover > #logo{
		width: 220px; 
		margin: 4px 0 0 20px;
	}

	nav:hover > ul{
		margin: 50px 100px 0 0;
	}

	nav:hover > ul li{
		margin: 0 40px 0 0;
	}

	nav:hover > ul li a{
		font-size: 30px;
	}
}








/* ############################################################# */
/* Startseite */
/* ############################################################# */

#startseite{
    background-image: url(../images/bg_startseite.jpg);
    background-size: cover;
    background-attachment: fixed;
    background-position: left bottom;
}
#intro{
	position: absolute; 
	bottom: 200px;
	left: 50px;
}
#intro h2{
	text-align: left;
	margin: 450px 0 0 0;
	font-size: 80px;
	line-height: 110px;
	text-shadow: 5px 5px 10px #111
}
#intro .button{
	border: 2px solid #fff;
	font-family: "orator-std",monospace;
	box-shadow: 5px 5px 20px #111;
	text-shadow: 5px 5px 8px #000;
}
#intro .button:hover{
	border: 2px solid #333;
	color: #333;
	box-shadow: 5px 5px 20px #111;
	text-shadow: 5px 5px 8px #000;
}

	@media screen and (max-width: 600px){
		#intro {
			left: 10%;
			width: 80%;
			bottom: 250px;
			
		}
		#intro h2{
			text-align: left;
			margin: 450px 0 20px 0;
			font-size: 50px;
			line-height: 55px;
			
		}
		#startseite{
			background-position: -100% bottom ;
		}
		#intro .button:hover{
			border: 2px solid #fff;
			color: #fff;
		}		
		#intro .button:active{
			color: #333;
		}
	}


/* ############################################################# */
/* über uns */
/* ############################################################# */

#uberUns .uberUns{
	float: left;
	width: 42.5%;
	margin: 50px 2.5% 0 5%;
}
#uberUns .uberUns article{
	width: 70%;
	text-align: center;
	margin: 100px auto 100px auto;
	font-size: 20px;
}



#uberUns .box_uber{
	display: flex;
	flex-direction: column;
	justify-content: center;
    float: right;
    width: 42.5%;
    margin: 50px 5% 0 2.5%;
}

#uberUns #martinsaur{
	width: 70%;
	margin: 50px auto 0 auto;	
}
#uberUns #martinsaur img{
	width: 100%;
	height: auto;
}

#uberUns .offnungszeiten{
	width: 100%;
	margin: 0 0 0 0;
	align-self: center;
}
#uberUns .offnungszeiten article{
	width: 70%;
	text-align: center;
	margin: 25px auto 100px auto;
	color: #999
}
#uberUns .offnungszeiten article h3{
	color: #999;
	font-size: 50px; 
	margin: 0 0 -40px 0;
	align-self: center;
}


	    @media screen and (max-width: 500px){
			#uberUns .offnungszeiten article h3{
				font-size: 20px; 
				margin: 0 0 -10px 0;
			}	
			#uberUns .uberUns article{
				font-size: 16px;
				line-height: 20px;
				margin: 0 0 0 0;
				text-align: left;
			}
			#uberUns .uberUns{
				width: 80%;
				float: left;
				margin: 0 10% 0 10%;
				display: flex;
				flex-direction: row;
				justify-content: center;
			}

			#uberUns .box_uber{
				width: 80%;
				float: left;
				margin: 5% 10% 0 10%;
				display: flex;
				flex-direction: column;
				justify-content: center;
			}
			#uberUns .offnungszeiten article h4{
				font-size: 12px; 
				margin: 0 0 -10px 0;
			}
			#uberUns .offnungszeiten article h3{
				font-size: 20px; 
				margin: 0 0 -10px 0;
			}
			#uberUns .offnungszeiten{
				width: 50%;
				margin: 0 0 0 0;
			}
			#uberUns #martinsaur{
				width: 50%;
				margin: 0 0 0 0;
				align-self: center;
			}

		}
		
		@media screen and (min-width: 501px) and (max-width: 800px){
			#uberUns .offnungszeiten article h3{
				font-size: 20px; 
				margin: 0 0 -10px 0;
			}	
			#uberUns .uberUns article{
				font-size: 16px;
				line-height: 20px;
				margin: 0 0 0 0;
				text-align: left;
			}
			#uberUns .uberUns{
				width: 80%;
				float: left;
				margin: 0 10% 0 10%;
				display: flex;
				flex-direction: row;
				justify-content: center;
			}

			#uberUns .box_uber{
				width: 80%;
				float: left;
				margin: 5% 10% 0 10%;
				display: flex;
				flex-direction: row;
				justify-content: center;
			}
			#uberUns .offnungszeiten article h4{
				font-size: 15px; 
				margin: 0 0 -10px 0;
			}
			#uberUns .offnungszeiten{
				width: 50%;
				margin: 0 0 0 0;
			}
			#uberUns #martinsaur{
				width: 50%;
				margin: 0 0 0 0;
			}

		}

		@media screen and (min-width: 801px) and (max-width: 1100px){
			#uberUns .uberUns{
				width: 80%;
				float: left;
				margin: 0 10% 0 10%;
				display: flex;
				flex-direction: row;
				justify-content: center;
			}

			#uberUns .box_uber{
				width: 80%;
				float: left;
				margin: 5% 10% 0 10%;
				display: flex;
				flex-direction: row;
				justify-content: center;
			}
			#uberUns .uberUns article{
				width: 70%;
				text-align: center;
				margin: 0 0 0 0;
				line-height: 25px;

			}
			#uberUns .offnungszeiten article h3{
				font-size: 30px; 
				margin: 0 0 -10px 0;
			}
			#uberUns .offnungszeiten article h4{
				font-size: 15px; 
				margin: 0 0 -10px 0;
			}
			#uberUns .offnungszeiten{
				width: 50%;
			}
			#uberUns #martinsaur{
				width: 50%;
				margin: 0 0 0 0;
			}
		}
		
		@media screen and (min-width: 1600px){
			#uberUns .uberUns article p{
				width: 70%;
				margin: 0 auto 35px auto;
				font-size: 18px;
				line-height: 25px;
				
			}
		}
        @media screen and (min-width: 2000px){
			#uberUns .uberUns article p{
				width: 70%;
				margin: 0 auto 35px auto;
				font-size: 20px;
				line-height: 30px;
				
			}
		}
		


		

	

/* ############################################################# */
/* Speisekarte */
/* ############################################################# */

 .speisen{
	width: 90%;
	margin: 50px auto 0 auto;
}
 .speisen .ul{
	width: 100%; 
	height: 100%; 
	display: flex;
	flex-direction: row;
	flex-flow: wrap;
	justify-content: center;
}
 .speisen .ul article{
	position: relative;
	width: 48%;
	margin: 5px 2.5px 0 2.5px;
	background-size: cover;
	min-height: 200px;
}
 .speisen .ul article:last-child{
	width: 96%;
}



 .balken_h3{
	margin: 0 0 0 0;
	width: 40px;
	height: 2px;
	visibility: hidden;
}
 .speisen .ul article .box{
	position: absolute;
	bottom: 25px;
	width: 80%;
	left: 25px;
}
 .speisen .ul article .box h3{
	font-size: 50px; 
	margin: 0 0 -30px 0;
	text-shadow: 5px 5px 10px #000
	
}

	@media screen and (min-width:601px){
		.speisen .ul article{
			min-height: 220px;
		}
	}
	@media screen and (max-width: 600px){
		.speisen .ul article{
			min-height: 160px;
			width: 100%;
		}
		.speisen .ul{
			display: flex;
			flex-direction: column;
			flex-flow: wrap;
			justify-content: center;
		}

		.speisen .ul article{
			margin: 1% 0 0 0;
		}
		.speisen{
			width: 100%;
			margin: 50px auto 0 auto;
		}
		.speisen .ul article:last-child{
			width: 100%;
		}
		
	}
	@media screen and (max-width: 950px){
		.speisen .ul article .box h3{
			font-size: 30px; 
			margin: 0 0 -30px 0;
			text-shadow: 5px 5px 10px #000
		}		
	}

article .coffee{
    background-attachment: fixed;
    background-image: url(../images/coffee.jpg);
    background-position: 223% -48px;
}
	@media screen and (max-width: 600px){
		article .coffee{
			background-position: center center;
		}
	}
article .tea{
    background-image: url(../images/tea.jpg);
    background-attachment: fixed;
    background-position: 221px bottom;
}
	@media screen and (max-width: 600px){
		article .tea{
			background-position: center center;
		}
	}
article .cake{
    background-image: url(../images/cake.jpg);
    background-attachment: fixed;
    background-position: -300px top;
}
	@media screen and (max-width: 600px){
		article .cake{
			background-position: center center;
		}
	}
article .breakfast{
    background-image: url(../images/breakfast.jpg);
    background-attachment: fixed;
    background-position: center bottom;
}
	@media screen and (max-width: 600px){
		article .breakfast{
			background-position: center center;
		}
	}
article .buy{
	background-image: url(../images/beans.jpg);
	background-attachment: fixed;
}
	@media screen and (max-width: 600px){
		article .buy{
			background-position: center center;
		}
	}


/* ############################################################# */
/* Google Maps */
/* ############################################################# */

#map{
	margin: 10% 0 20% 0;
	width: 100%;
}

/* ############################################################# */
/* Kontakt */
/* ############################################################# */

#kontakt{
	position: relative;
	background-image: url(../images/bg_kontakt1.jpg);
	background-position: center center;
	background-size: cover;
	background-attachment: fixed;
}

#kontakt .adressen{
	width: 100%;
	text-align: center;
}
#kontakt .adressen ul{
	margin: 100px 0 0 0;
	padding: 0;

}
#kontakt .adressen ul li{
	margin: 0 0 15px 0; 
	padding: 0;
	list-style: none;
	font-size: 33px;
	text-shadow: 3px 2px 2px #000
}
#kontakt .adressen ul li a{
	text-decoration: underline;
	
}



/* ############################################################# */
/* footer */
/* ############################################################# */

footer{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 150px;
	text-align: center;
	padding: 30px 0 0 0;
	font-size: 10px;
}
#kontakt footer .logo{
	width: 100%;
}
#kontakt footer .logo img{
	width: 130px;
	height: auto;
}
#kontakt footer #meta_nav{
	margin: 20px 0 0 0;
	
}
#kontakt footer #meta_nav ul{
	margin: 0; 
	padding: 0;
	display: flex;
	justify-content: center;
	width: 100%;
}
#kontakt footer #meta_nav ul li{
	margin:0;
	padding: 0 3px 0 3px;
	list-style: none; 
	display: inline;
	border-right: 1px solid #999;
	text-align: center;
}
#kontakt footer #meta_nav ul li:last-child{
	border: none;
}

@media screen and (max-width: 800px){
	#kontakt .adressen ul{
		margin: 70px 0 0 0;
	}
	#kontakt footer{
		height: 110px;
		padding: 20px 0 0 0;
	}
	#kontakt footer #meta_nav {margin: 0;}
}