@import url('normalize.css');
*{ box-sizing: border-box; } 
body{
    font-family: Roboto, sans-serif;
    font-size:16px;
    font-weight: 300;
    line-height: 1.5em;
    color: #454545;
    margin: 0;
    padding: 0;
}
.wrapper{
    margin: auto;
    max-width: 320px;
}
.lauf {
	border-top: 1px dashed #454545;
    border-bottom: 1px dashed #454545;
	margin-top:0px;
	margin-left:0.3em;
	margin-right:0.3em;
	height: 30px;
	width:100%;
}
header {
	background:url(../logos/banner-kl.png);
	background-repeat:no-repeat;
	width:320px;
	height: 64px;
	margin-left:auto;
	margin-right:auto;
	margin-top:40px;
	}
.quote{
    border-top: 1px dashed #454545;
    border-bottom: 1px dashed #454545;
    margin-top: 20px;
    padding: 0;
}
.footline { 
	width: 100%;
	padding: 0;
	floot: none;
}
.footline img {
	width: 100%;
}
.cpr {
	width: 20%;
	text-align:left;
	font-size: 0.7em;
	float: left;
}
.footermenu {
	width:80%;
	text-align:right;
	padding-right:2.0em;
	font-size: 0.7em;
	color:#000;
	text-decoration:none;
	float:right;
}
.footermenu a {
	text-decoration:none;
	color:#000;
}
.footermenu a:hover { 
	font-size:0.9em;
	font:bold;
	text-decoration:underline;
	color:#F00;
}
@media only screen and (min-width: 360px) {
    body{ 
        background: url(../images/background/swirl_pattern.png);
    }
    .wrapper{
        max-width: 600px;
    }
}
@media only screen and (min-width: 900px) {
    body{
    }
    .wrapper{
		background: #FFF;
        max-width: 1000px;
    }
    header, aside, footer {
        width: 100%;
        float: left;
		padding: 2%;
    }
	nav {
		width: 25%;
		float: left;
	}
    .quote {
        float: none; 
        width: 100%;
        padding: 0;
    }
    .main {
		margin-top: 0;
        width: 75%;
        float: right;
    }
	header {
		background:url(../logos/banner.png);
		width:100%;
		height: 205px;
		margin-left:auto;
		margin-right:auto;
		border: 2px solid #ccc;
		-moz-border-radius:12px;
		border-radius:12px;
		opacity:1;
		-moz-box-shadow: 0 0 5px 2px #ccc;
		-webkit-box-shadow: 0 0 5px 2px #ccc;
		box-shadow: 0 0 5px 2px #ccc;
		background-repeat: no-repeat;
	}
	.btn {
		margin-left:auto;
		margin-right:auto;
		display:inline-block;
		padding:5px 10px 6px 10px;
		border:1px solid rgba(0,0,0,0.4);
		text-decoration:none;
		background-color:#FFF;
		color:#000;
		border-radius:6px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		box-shadow: 0 0 5px 2px #ccc;
	}
	.btn:hover, ul li a:hover, .menu label:hover, .preise td a:hover{
		text-shadow: 1px 1px 1px
		rgba(0,0,0,0.5);
		cursor:pointer;
	}
	ul {
		list-style: none;
		margin-left:-1.0em;
	}
	ul li a, .preise td a {
		text-decoration:none;
		color: #000;
	}
/* To hide the checkbox */

	input.hidden {
		display: none;
	}
/* Set the cursor for the menu items to pointer ("link") */

	.menu label {
		cursor: pointer;
	}
	.menu label img {
		float: right;
		padding-right: 0.4em;
	}
/* Hide menu content */

	.group-list,
	.sub-group-list,
	.sub-sub-group-list {
		clear: both;
		max-height: 0;
		overflow: hidden;
		padding-left: 0.2em;
	}
/* reset the height when checkbox is checked */

	.nav__list input[type=checkbox]:checked + label + ul {
		max-height: 1000px;
	}
/*Design */
	.nav__list {
		width: 15em;
	}
	.nav__list li {
		background: #fff;
		padding: 0.2em 0.2em 0.2em 1.0em;
		border: 1px solid rgba(0,0,0,0.4);
		-moz-border-radius:0.7em;
		border-radius:0.7em;
		-moz-box-shadow: 0 0 5px 2px #ccc;
		-webkit-box-shadow: 0 0 5px 2px #ccc;
		box-shadow: 0 0 5px 2px #ccc;
		margin-bottom:0.2em;
	}
/*Preisliste*/
	.preise {
		float:left;
		width:100%;
		margin-top:0;
		padding:10px; 
	}
.preise table,
.preise th,
.preise td {
	border-collapse: collapse;
	padding: 0.3em 0.5em;
}

.preise table {
	margin-left: 1em;
		border: 1px solid #c0c0c0;
	border
}

.preise th,
.preise caption {
	background-color: #ccc;
	color: #000;
	border: 1px solid #c0c0c0;
}

.preise td {
	background-image: linear-gradient(#f9f9f9, #e3e3e3);

}
.preise tfoot {
	border-radius: 0 0 0.5em 0.5em;
	border: none;
	padding: 0.6em; 
}

.preise caption {
	font-size: 1.8em;
	text-decoration:underline;
	font-weight:bold;
	border-radius: 0.5em 0.5em 0 0;
	padding: 0.6em;
}
/* 2., 3. und 4. Spalte rechtsbündig */

.preise td:nth-of-type(2),
.preise td:nth-of-type(3),
.preise td:nth-of-type(4) {
	text-align: right;
}
.gruppe, .gruppe_li {
	line-height:1.5em;
	font-size: 1.2em;
	font-style:italic;
	font-weight:bold;
}
.gruppe {
	text-align:center;
}
.gruppe_li {
	text-align:right;
}
.gruppe_re {
	font-size: 0.7em;
	font-weight: 200;
}
.beitext {
	font-size: 0.8em;
	font-style: italic;
	font-weight: 200;
}
.klein {
	font-size: 0.75em;
}
.gross {
	font-size: 1.8em;
}
.prozent {
	text-decoration: line-through;
	color: red;
	text-align: right;
	padding-right: 0.3em;
	border-left: 1px solid #c0c0c0;
}
.orig {
	border-right: 1px solid #c0c0c0;
	text-align: right;
	padding-right: 0.3em;
}
}