/* ====================================================   GLOBAL DEFINITION   ==================================================== */


html {
    margin: 0;
    padding: 0;
}

body {
    font-family: Verdana, sans-serif;
    font-style: normal;
    margin: 0 auto;
    animation: fadein 0.5s; -moz-animation: fadein 1.0s; -webkit-animation: fadein 0.5s;
}


/* ====================================================  HEADER   ==================================================== */

header {
    width: 94%;
	position: relative;
    margin: 0 auto;
    margin-top: .5em;
}
h0 {
    font-size: 0;
    height: 0;
}
img.titel {
    width: 100%;
    margin: 0 auto;
   	border-radius: .2em;
}
img.menu {
	width: 0%;
}
img.logo {
	width: 11em;
    float: right;
    padding: 0;
    margin-top: -.7em;
    margin-bottom: 1em;
    margin-right: 1.5em;
}
img.icon {
    float: right;
	width: 2.7em;
	margin: .5em 1.5em 1em 0;
    padding: 0;    
    border-radius: .3em;
}
img.icon:hover, img.icon:active  {
	background-color: rgba(250,250,250,.4);
    transition: background-color ease-in .3s;
}
p.light {
    float: right;
    line-height: 1.2em;
    font-size: .8em;
    margin: 0;
    padding-right: .5em;
    margin-top: 1em;
    color: rgba(255,255,255, .4);
}


/* ====================================================  NAV   ==================================================== */

nav	{ 
    max-width: 75em;
    margin: 0 auto;
}
nav ul {
    float: left;
    margin: 0;
    margin-top: .3em;
    padding-left: 3%;
    list-style-type: none;
}
nav ul li {
	float: left; 
    margin: 0;
	list-style-type: none; 
}
nav ul li a {
    float: left;
	font-size: 1.2em;
    padding: .3em 1.3em .3em 1.3em;
    text-decoration: none;    
    color: rgb(0,81,158);
    border-right: 1px rgb(0,81,158) dotted; 
}
nav ul li a:hover, nav ul li a:active {
    background-color: rgba(250,250,250,.4);
    transition: background-color ease-in .3s;
}
nav ul li a.menu {
    font-size: 0;
    border: none;
}

.toggleBox1 {
    position: relative;
}
/* Ausblenden des Input-Feldes */
.toggleBox1 input {
    position: absolute;
    left: -9999px;
}
/* Gestaltung der labels */
.toggleBox1 label {
    font-size: 1em;
}
/* Der Aufklappmechanismus */
.toggleBox1 input:not(:checked) ~ div {
    opacity: 1;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -ms-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}
.toggleBox1 input:checked ~ div {
    opacity: 1;
}
/* Steuerung der Sichtbarkeit der labels */
.toggleBox1 input:not(:checked) ~ .close, .toggleBox1 input:checked ~ .open {
    display: none;
}


/* ====================================================   ASIDE 1   ==================================================== */

main	{
    position: relative;
    margin: 0 auto;
    width: 94%;
    max-width: 75em;
    margin-top: 1em;
}
section {
    position: relative;    
    width: 100%;
    float: left;
    background-color: rgb(255,255,255);
	background-color: rgba(255,255,255, .8);
    border-radius: .2em;
}

aside1  {
    position: relative;
    float: left;
    width: 69%;
}
article {
    position: relative;
    padding-top: 3em;
    padding-bottom: 3em;
}
article:first-child {
    padding-top: 0;
    padding-bottom: 2em;
}

nav2 ul {
    float: right;
    margin: 0;
    padding: 0;
    list-style-type: none;
}
nav2 ul li {
	float: right; 
    margin: 0;
	list-style-type: none; 
}
nav2 ul li a {
    float: right;
    font-size: 1.1em;
    padding: .3em 1em .3em 1em;
	text-decoration: none;    
    color: rgb(120,120,120);
    border-right: 1px rgb(120,120,120) dotted; 
}
nav2 ul li a:hover, nav ul li a:active {
    background-color: rgba(250,250,250,.9);
    transition: background-color ease-in .3s;
}

h1 {
    font-size: 1.6em;
    text-transform: uppercase;
    line-height: 1.4em;
    margin-left: 4%;    
    margin-right: 3%;
    margin-top: 2.4em;
   	margin-bottom: .2em;
    padding-left: 3%;
	color: rgb(0,128,0);
	border-bottom: .05em solid #008000;
}
h2 {
    font-size: 1.3em;
    font-weight: bold;
	margin-bottom: 1em;
    margin-top: 0;
    margin-left: 4%;
    margin-right: 3%;
    color: rgb(70,70,70);
}
h4 {
    font-size: 1em;
    font-weight: normal;
    text-transform: uppercase;
    margin-bottom: 1em;
    margin-left: 4%;
    margin-right: 3%;
	color: rgb(50,50,50);
}
h5 {
    font-weight: bold;
    font-size: 1em;
    padding-top: 2em;
	margin-bottom: 1em;
    margin-left: 4%;
    margin-right: 3%;
	color: rgb(50,50,50);
}
p {
    font-style: normal;
    font-size: .9em;
    line-height: 1.5em;
    margin-left: 4%;
    margin-right: 3%;
    margin-bottom: .7em;
	color: rgb(50,50,50);
    -moz-hyphens: auto;
   	-webkit-hyphens: auto;
   	-ms-hyphens: auto;
   	hyphens: auto;
}
p.infront {
    font-size: .8em;
    margin-bottom: .5em;
	color: rgb(60,60,60);
}
p.small {
    font-size: .75em;
    line-height: 1.2em;
    color: #555555; 
    padding: 0 30px 0 30px;
    margin-bottom: 2em;
}
a {
    text-decoration: none;
	color: rgb(120,120,120);
}
a:hover, a:active {
    background-color: rgba(250,250,250,.9);
    transition: color ease-in .2s;
    transition: background-color ease-in .3s;
}
aside1 ul {
    margin-left: 4%;
    margin-right: 3%;
	padding-left: 4em;
    color: rgb(50,50,50);
	list-style-type: disc;
}
aside1 ul li {
	font-size: .85em;
    line-height: 1.4em;
    padding-bottom: .4em;
    color: rgb(50,50,50);
}
aside1 ul li:last-child {
	margin-bottom: .5em;
}

aside1 img {
    float: right;
	width: 45%;
   	padding: 1% 0 1% 1%;
    border-radius: .4em;
}
img.logo1 {
    float: none;
	width: 200px;
   	padding-left: 5%;
    padding-top: 2%;
    border-radius: 0;
}
img.logo2 {
    float: none;
	width: 150px;
   	padding-left: 5%;
    padding-top: 2%;
    border-radius: 0;
}
img.oben1 {
    width: 2.7em;
    float: right;
    padding: 0;
    margin-right: 3%;
    margin-bottom: 1em;
    border-radius: .3em;
}
img.oben1:hover, img.oben1:active {
    background-color: rgba(250,250,250,.9);
    transition: background-color ease-in .3s;
}

/* ====================================================   ASIDE 2   ==================================================== */

aside2 {
    float: right;
	position: relative;
    width: 28%;
    margin: 2.1em 2% 3% 0;
	background-color: rgb(220,220,220);
	background-color: rgba(220,220,220, .7);
	border-radius: .5em;
}

h3 { 
    font-weight: normal;
	color: #008000;
    background-color: rgba(255,255,255, .8);
    padding: 0 2% 0 1em;
    margin: 6em 0 1.5em 3%;
}
h3:first-child {
    margin-top: 2em;
}
aside2 p {
    font-size: .8em;
    line-height: 1.5em;
    padding: 0;
    margin: .7em 2% 0 4%;
    margin-bottom: .3em;
    -moz-hyphens: auto;
   	-o-hyphens: auto;
   	-webkit-hyphens: auto;
   	-ms-hyphens: auto;
   	hyphens: auto;
}
aside2 p:last-child {
    padding-bottom: 2em;
}

aside2 a:hover, aside li a:focus {
    background-color: rgba(245,245,245, .7);
    transition: background-color ease-in .3s;
}
aside2 img {
    width: 75%;
    max-width: 300px;
    float: none;
    margin-left: 1em;
    margin-bottom: 1em;
}
img.oben2 {
    width: 0;
    float: right;
    padding: 0;
    margin: 0;
}
img.oben2:hover, img.oben1:active {
    background-color: rgba(250,250,250,.9);
    transition: background-color ease-in .3s;
}


/* ====================================================   FOOTER   ==================================================== */

footer {
    max-width: 75em;
    width: 94%;
    margin: 0 auto;
    list-style-type: none;
}
div.left {
    margin-left: 2%;
}

footer p {
	float: right;
    font-size: 1em;
    margin-right: 2%;
    margin-top: 1.3em;
    line-height: 1.3em;
    color: rgb(255,255,255);
}
footer p:last-child {
	margin-bottom: .7em;
}

footer img.icon {
	float: left;
    margin-top: 1.5em;
    margin-bottom: 1.5em;
    border-radius: .3em;
}
img.footer {
    float: right;
    width: 1.5em;
	padding: .3em;
    margin-top: -1em;
    margin-right: 0;
    margin-bottom: -.3em;
    border-radius: .3em;
}
footer img.icon:hover, footer img.icon:active, img.footer:hover, img.footer:active {
	background-color: rgba(250,250,250,.4);
    transition: background-color ease-in .3s;
}


/* ==================================================== tablet ================================================================== */
@media only screen and (max-width: 74em) {

img.logo {
	width: 9em;
    margin-right: 2%;
    margin-top: -.9em;
    margin-bottom: .8em;
}
img.icon {
	width: 2.5em;
	margin: .4em 2% .7em 0;
}
p.light {
    font-size: .7em;
}

nav ul {
    padding-left: 2%;
    margin-top: .3em;
}
nav ul li {
	float: left; 
    margin-top: -.3em;
	list-style-type: none; 
}
nav ul li a {
    float: left;
	font-size: 1em;
    padding: .2em .9em .2em .9em;
    text-decoration: none;    
    color: rgb(0,81,158);
    border-right: 1px rgb(0,81,158) dotted; 
}

aside1 {
    width: 65%;
}
nav2 ul li a {
    font-size: 1em;
    padding: .2em .9em .2em .9em;
}
h1 { 
	font-size: 1.3em; 
}
h2 { 
	font-size: 1.1em;
    margin-bottom: .5em;
}
h4 { 
	font-size: 1em; 
}
h5  { 
	font-size: .95em;
    margin-bottom: .5em;
}
p { 
	font-size: .85em;
	margin-bottom: .6em;
}
p.infront {
    font-size: .75em;
    margin-bottom: .4em;
}
p.small { 
	font-size: .7em; 
}
aside1 ul {
	padding-left: 3em;
}
aside1 ul li { 
	font-size: .8em; 
	line-height: 1.2em; 
}
article img {
	width: 50%
}
img.oben {
    width: 2.5em;
}

aside2 {
    width: 32%;
    margin: 1.3em 2% 3% 0;
}
h3 { 
	font-size: 1.1em; 
}
aside2 p {
    font-size: .75em;
    margin-bottom: .3em;
}

footer p { 
	font-size: .9em; 
}
footer img.icon {
    margin-top: 1.2em;
}
}


/* ================================================= smartphone1 ======================================================== */
@media only screen and (max-width: 50em) {

header {
    margin-top: .3em;
}  
h0 {
    font-size: 1em;
    text-transform: uppercase;
    margin: .2em 0 .5em .3em;
    color: rgb(255,255,255);
}
img.titel {
	width: 0%;
	height: 0%;
}
p.light {
    margin: -9999px;
}
img.logo {
    width: 9em;
    margin-top: -.7em;
    margin-bottom: .9em;
    margin-right: 0;
}
img.icon {
    width: 0;
}
img.menu { 
    float: left;
	width: 2.3em;
	margin: .5em .7em 1em 0;
    border-radius: .3em;
}
img.menu:hover, img.menu:active, img.icon:hover, img.icon:active {
	background-color: rgba(250,250,250,.4);
    transition: background-color ease-in .3s;
}

nav ul {
    background: transparent;
	padding-left: 0;
    padding-top: .2em;
    padding-bottom: 0;
    margin: .4em 0 1em 0;
    width: 10.5em;
}
nav ul li {
    width: 100%;
    margin: 0;
}
nav ul li a {
    width: 8.5em;
	font-size: .9em;
	color: rgb(0,81,158);
    margin-left: .4em;
    padding-top: .4em; 
    padding-bottom: .4em;
    border: none;
    border-bottom: 1px rgba(0,51,158, .5) dotted;
}
nav ul li a.menu {
    font-size: .9em;
    width: 9em;
    margin-bottom: .2em;
}
nav ul li a.menu:hover, nav ul li a.menu:active { 
    background-color: rgba(240,240,240,.4);
    transition: background-color ease-in .3s;
}

article {
    padding-top: 2em;
    padding-bottom: 2em;
}
article:first-child {
    padding-top: 0;
    padding-bottom: 1em;
}
aside1 {
    width: 100%;
}
h1  {
    margin-top: 1em;
}

article img {
	width: 60%;
	margin-left: 0;
    margin-top: 0;
	margin-bottom: 2%;
}
article img.logo1 {
	width: 150px;
}
article img.logo2 {
	width: 100px;
}
img.oben1 {
    width: 2.3em;
    margin-right: 3%;
    margin-bottom: 1em;
}

aside2 {
    width: 94%;
    float: left;
    margin: 1% 3% 0 3%;
}
aside2 img {
    margin-left: 4%;
}
img.oben2 {
    width: 2.3em;
    float: right;
    margin-right: 3%;
    margin-top: .3em;
    margin-bottom: .3em;
    border-radius: .3em;
}

footer {
    width: 100%;
    margin-top: .5em;
}
div.left {
    margin-left: 4%;
}	
footer p {
    font-size: .8em;
    margin-top: 1em;
    padding: 0 4% 0 0;
}
footer p:last-child {
	margin-bottom: .5em;
}
img.footer {
    margin-bottom: .5em;
}
footer img.icon {
    width: 2.3em;
    margin: 1.1em 0 0 1em;
}
.toggleBox1 label {
    font-size: 1em
}
.toggleBox1 input:checked ~ div {
    display: none;
}
}

/* ================================================= smartphone2 ======================================================== */
@media only screen and (max-width: 35em) {
    h0 {font-size: .8em;}
    img.logo {width: 8em; padding-top: .4em; margin-bottom: .8em;}
    img.menu {width: 2.2em; margin: 0.4em .5em .3em 0;}
    nav ul {width: 8.3em; margin: .3em 0 .8em 0;}
    nav ul li a {font-size: .8em; width: 7.2em;}
    nav ul li a.menu {font-size: .8em; width: 7.2em;}
    h1 {font-size: 1.2em;}
    h2 {font-size: 1em;}
    h4 {font-size: .9em;}
    h5 {font-size: .85em;}
    p {font-size: .8em;}
    p.infront {font-size: .7em; margin-bottom: .3em;}
    nav2 ul li a {padding: .2em .7em .2em .7em;}
    article img {width: 100%;}
    aside1 ul {padding-left: 4%;}
    aside1 ul li {font-size: .75em;}
    img.oben1 {width: 2.2em;}
    img.oben2 {width: 2.2em;}
    footer p {font-size: .7em;}
    footer img.icon {width: 2.2em; margin-left: .9em; margin-top: .8em;}
}

/* ================================================= smartphone3 ======================================================== */
@media only screen and (max-width: 20em) {
    h0 {font-size: .75em;}
    img.logo {width: 7em;}
}


@keyframes fadein{from{opacity:0;}to{opacity:1;}}@-moz-keyframes fadein{from{opacity:0;}to{opacity:1;}}@-webkit-keyframes fadein{from{opacity:0;}to{opacity:1;}}@-o-keyframes fadein{from{opacity:0;}to{opacity:1;}}