﻿@charset "utf-8";
/* Standard */

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	min-height: 100%;
}
	
body {
	color: #000;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 0.875em;
	line-height: 1.4;
}

#wrapper {
	background-color: #fff;
	border: thin solid #fff;
	margin: 1rem auto;
	max-width: 50rem;
	overflow: hidden;
	padding: 0 1.75rem 1.75rem;
	position: relative;
}

p + p {
	margin: 1rem 0 0 0;
}

h1 {
	margin: 3rem 0;
	font-size: 2.25rem;
	line-height: 1.2;
	font-weight:lighter;
	text-align:center;
	text-transform: uppercase;
}

h1 span {
	font-weight: normal;
}

h2 {
	font-size: 1rem;
	line-height: 1.2;
	margin-bottom: 1rem;
	text-align: center;
}

h3 {
	font-size: 1rem;
	line-height: 1.2;
	margin: 2.5rem 0 1rem;
	text-align: center;
}

h4 {
	background-color: #1CC1DF;
	padding: 0.625rem;
	width: 45%;
	text-align: center;
	margin: 3rem auto;
	text-transform: uppercase;
}
h4:hover {
	background-color: #2285a2;
}
h5 {
	background-color: #1CC1DF;
	padding: 0.625rem;
	width: 27%;
	margin: 4rem 0 1.5rem;
	color: #FFF;
	font-size: 0.875rem;
	text-align:center;
	text-transform: uppercase;
}

a:link, a:active, a:visited {
	color: #fff;
	text-decoration: none;
}

a:hover {
	background-color: #2285a2;
	text-decoration: none;
}

footer a:link, footer a:active, footer a:visited {
	color: #000;
	text-decoration: none;
}

footer a:hover {
	text-decoration: none;
	background-color: #fff;
	color: #1cc1df
}

img {
	display: block;
	height: auto;
	max-width: 100%;
	border: none;
}

ul {
	padding-left: 1rem;
}

li {
	list-style-image: url(../images/ulli.gif);
	padding-bottom: 0.2rem;
}


hr {
	border: none;
	border-top: 0.063rem solid #000;
	width: 17%;
	margin: 0 auto;
	padding-bottom: 1rem;
}

header {
	margin: 0 -1.563rem 1rem;
}
article p:nth-of-type(1) {
	padding: 0 3rem;
	margin-bottom: 3rem;
}

article div  {
	display: table;
	margin-bottom: 3rem;
}
article div section:nth-of-type(1), article div section:nth-of-type(3)  {
	border: thin dashed #999;
	box-shadow: 4px 4px 15px #aeaaaa;
	padding: 1.5rem 1.5rem ;
	display: table-cell;
	width: 47%;
}
article div section:nth-of-type(2) {
	border: none;
	width: 4%;
	display:table-cell;
}

aside {
	display: table;
	margin: 1rem 0 5rem;
	font-size: 0.813rem;
	font-weight: bold;
	width: 100%;
}
aside section:nth-of-type(1),
aside section:nth-of-type(2), 
aside section:nth-of-type(3), 
aside section:nth-of-type(4),
aside section:nth-of-type(5) {
	display: table-cell;
	text-align: center;
	width: 24%;
	padding: 0 0.5rem 0 0;
}

aside section:nth-of-type(4) {
	width: 24%;
}

aside section:nth-of-type(5) {
	padding: 0;
}

aside img {
	margin: 0 auto;
	padding-bottom: 0.5rem;
}
aside p:nth-of-type(1) {
	margin: 0;
	padding:0;
}

nav {
	display: table;
	margin: 1rem auto;
}
nav section:nth-of-type(1), nav section:nth-of-type(2), 
nav section:nth-of-type(3){
	display: table-cell;
	width: 25%;
	padding: 0 0.5rem 0 0;
}

nav section:nth-of-type(4) {
display: table-cell;
	width: 25%;
	padding: 0;
}

footer section:nth-of-type(1) {
	float: left;
	width: 55%;
}
footer section:nth-of-type(2) {
	float: right;
	width: 40%;
}

.clearfix:after {
	clear: both;
	content: ".";
	display: block;
	height: 0;
	visibility: hidden;
}

/* Responsive */
@media only screen and (max-width:50rem) {
#wrapper {
	border: none;
	margin: 0 auto;
	padding: 0.625rem;
}
a:link, a:active, a:visited {
	font-size: 1rem;
}
a:hover {
	text-decoration: none;
}

}

@media only screen and (max-width:40rem) {
body {
	font-size: 0.813em;
}
h1 {
	margin: 1.5rem 0;
	font-size: 1.75rem;
	line-height: 1.2;

}
h2 {
	font-size:0.875rem;
}
article p:nth-of-type(1) {
	padding: 0 0.5rem;
	margin-bottom: 1.5rem;
}

article div  {
	display: block;
}
article div section:nth-of-type(1), article div section:nth-of-type(3)  {
	border: thin dashed #999;
	box-shadow: 4px 4px 15px #aeaaaa;
	padding: 1.5rem 1.5rem ;
	display: block;
	width: 100%;
	margin-bottom: 1rem;
}
article div section:nth-of-type(2) {
	border: none;
	width: 4%;
	display:none;
}

aside {
	display: block;
	margin: 0.75rem 0 0;
}
aside section:nth-of-type(1),
aside section:nth-of-type(2), 
aside section:nth-of-type(3), 
aside section:nth-of-type(4),
aside section:nth-of-type(5) {
	display: inline-block;
	width: 100%;
}
h3 {
	margin: 1rem 0 1rem;
}
h4 {
	width: 100%;
}
h5 {
	font-size: 0.813rem;
}
nav {
	margin: 0.25rem auto;
}
footer section:nth-of-type(1) {
	float: none ;
	width: 100%;
}
footer section:nth-of-type(2) {
	float: none;
	width: 35%;
	margin: 1rem auto;
}


}

/* Ende Responsive */
