

* {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	padding:0;
	margin:0;
}

body {
	font-family: 'Open Sans', Arial, sans-serif;
	font-size: .9em;
    height: 100%;
	background-color:black;
}

img {
	max-width:100%;
	height:auto;
}

.site-nav,
.site-header,
.site-inhalt,
.site-oeffnunszeiten,
.site-map,
.site-footer {
	width:100%;
	float:left;
}

.site-nav {
	background:#232323;
	border-bottom: 1px solid #333333;
	position: fixed;
	top:0;	
}

.site-nav ul,
.kontakt-nav ul {
	margin: 0;
	list-style: none;
	padding: 0;
}

.site-nav a,
.kontakt-nav a{
	padding: 1em;
	display: block;
	background: #232323;
	margin-bottom: 1px;
	color: white;
	text-decoration: none;
	z-index:1;
}
.kontakt-nav a{
	padding-left:3em;
	padding-right:3em;
	border-right: 1px solid #000;
}
.site-nav a:active, 
.site-nav a:hover {
	outline: 0;
	background: #444;
}

.site-map {
	background:#000;
	color:#CCCCCC;
}

.site-map a{
	text-decoration:none;
	color:white;
	font-size:1.5em;
}

.site-map a:hover {
	text-decoration:underline;
	color:#CCCCCC;	
}

.rahmen {
		widht:100%;

		background-color:#000;
		margin-top:100px;
		border-top:1px solid #999;
}

.iframe-map {
	width:100%; 
	height:35em;
	margin-bottom:2em; 
}

@media screen and (max-width:550px) {

	/* nav slider */
	
	a.nav-show,
	a.nav-hide {float: right;}
	
	a.nav-hide {display:none;}
	
	.nav-slider {display:none;}
	
	#nav-open:target .nav-slider,
	#nav-open:target a.nav-hide {display:block;}
	
	#nav-open:target a.nav-show {display:none;}	
	
}

@media screen and (max-width:650px) {
	h1{font-size:1.5em}	
	.rahmen {padding:25px;}
}
@media screen and (max-width:550px) {
	h1{font-size:1.2em}	
}

@media screen and (min-width:550px) {
	a.nav-show,
	a.nav-hide {display:none;}	
	.site-nav li {float:left;}	
}

.site-angebot {
	background: url(../img/bg.jpg) 50% 18px no-repeat;
	background-repeat: no-repeat;
	background-color:#000;
	background-size:auto;
}

#cont-schnitzel {
	display:none;
}

#cont-hamburger {
}

.site-header {
	background:#000;
	text-align:center;
	margin-top:50px;
}

.title {
	font-size: 1.9em;
}

.title span {
	font-size: .7em;
	font-weight: normal;
}

@media screen and (min-width:500px) {
	
	.title {
		font-size: 2.3em;
	}
	
}

@media screen and (min-width:600px) {
	
	.title {
		font-size: 2.6em;
	}
	
}

@media screen and (min-width:700px) {	
	.title {
		font-size: 3em;
	}
	
}

.site-inhalt
.site-angebot {
	padding-top:1em;
	padding-bottom:2em;
	text-align:center;
}

.site-oeffnunszeiten {
	padding-top:1em;
	padding-bottom:1em;
	background:#000;
	color:silver;
	margin-top:2em;
	margin-bottom:2em;
}
.site-oeffnunszeiten a {
	color:white;
	text-align: center;
	display:block;
	background:#900;
	padding:1em;
	border-radius:10px;
	margin-top:1em;
	text-decoration:none;
}

.telefon {
	height:2em;
	width:2em;
	top:0.5em;
}

.telefonnummer {
	font-size:1.5em;
}

.site-rezensionen {
	padding-top:2em;
	padding-bottom:2em;
}

.site-calltoaction {
	padding-top:2em;
	padding-bottom:2em;
}

.site-footer {
	background:#171717;
	color:#999;
	padding-top:2em;
	padding-bottom:2em;
	
}

.float-right{
	float:right;
}

.footerlink {
	text-decoration:none;
	color:#999;
}

.line {
	border-right:1px solid #333;
}

.bildernachweis {
	color:#515151;
}

.oeffnungszeiten-footer{
	margin-bottom:2em;
	color:silver;
	font-size:1.2em;
}

.clear { 
	clear:both;
}
	
/* Raster */

.container {
	max-width:960px;
	margin:0 auto;
}

.row {
	width:100%;
	float:left;
}

.columns {
	float:left;
	padding-left:1em;
	padding-right:1em;
}

@media screen and (max-width:800px) {
	/* 2 spaltiges Raster in der kleinen Layout-Version */
	.small-1 {width:50%;}
	.small-2 {width:100%;}
	.float-right{float:left;margin-top:1em;}
	.toparea {height:30px;}
}

@media screen and (min-width:800px) {

	/* 12-spaltiges Raster in der großen Layout-Version */
	.large-1 {width:8.333333%;}
	.large-2 {width:16.666666%;}
	.large-3 {width:25%;}
	.large-4 {width:33.333333%;}
	.large-5 {width:41.666666%;}
	.large-6 {width:50%;}
	.large-7 {width:58.333333%;}
	.large-8 {width:66.666666%;}
	.large-9 {width:75%;}
	.large-10 {width:83.333333%;}
	.large-11 {width:91.666666%;}
	.large-12 {width:100%;}

}



