*, *:before, *:after {
    -webkit-box-sizing: border-box; /* SAFARI/CHROME, ANDERE WEBKIT-BROWSER */
    -moz-box-sizing: border-box; /* FIREFOX, ANDERE GECKO-BROWSER */
    box-sizing: border-box; /* OPERA/IE 8+ */
}

html {background:#EBEBE1;}
body {font-family:Arial;}
/* ----------------------------------------------------------------------------- */

h1 {font-family:Arial; font-size:2.5em; font-weight:bold; color:#705A45; text-align:left; margin:0 0 0.5em 0;}
h2 {font-family:Arial; font-size:1.5em; font-weight:normal; color:#705A45; text-align:left; margin:0.5em 0 0.5em 0;}
h3 {font-family:Arial; font-size:1em; font-weight:bold; color:#423E3D; text-align:left; margin:0 0 0.25em 0; line-height:1.2em;}
h4 {font-family:Arial; font-size:1em; font-weight:bold; color:#E6C864; text-align:left; margin:0;}   
p {font-family:Arial; font-size:1em; line-height:1.2em; font-weight:normal; color:#423E3D; text-align:left; margin:0;}
#limarkiert {color:#FFFFFF; font-weight:bold;}
#limarkiert-h {color:#705A45; font-weight:bold;}

#Container {max-width:80em; height:auto;  margin:0 auto 0 auto; background-color:#FFFFFF;}
#Kopf {width:100%; height:auto; margin-top:0; background-image:url(images/Granulat.jpg);}
#Titel {width:94%; height:4.5em; margin:0 3% 0 3%;}
#Nav {width:94%; height:2em; margin:0.5em 3% 0 0;}
#Inhalt {width:94%; height:auto; margin:2em 3% 0 3%;}
#Linksstart {float:left; width:65%; margin:0 3% 0 3%;}
#Rechtsstart {float:right; width:28%; margin: 0 0 0 0; padding: 0.5em 1% 0.5em 1%; background:#F7EDCC;}
#Links {float:left; width:28%; margin:0 3% 0 0;}
#Linkso {width:100%; }
#Linksu {width:100%; border-top:0.3em solid #705A45; border-bottom:0.3em solid #705A45;}
#Mitte {float:left; width:38%; margin:0 0 0 3%;}
#Rechts {float:right; width:28%; margin:0 0 0 0;}
#MiRe {float:right; width:66%; margin:0 0 0 3%;}
#Fuss {float:left; width:100%; height:auto; margin:2em 0 0 0; background-image:url(images/Granulat.jpg);}
#Fuss1 {float:left; width:29%; height:auto; margin:1em 0 1em 3%; text-align:left;}
#Fuss2 {float:left; width:30%; height:auto; margin:1em 0 1em 3%; text-align:left;}
#Fuss3 {float:right; width:26%; height:auto; margin:1em 3% 1em 3%; text-align:left;}
#offcanvas {display:none;}


.ul  {float:right; margin:0; padding:0.5em; list-style-type:none; display:inline-block;} /* Navigation */
.ul > li {float:left; margin:0; color:#EBEBE1; font-size:1em; font-weight:normal; text-decoration:none;}
.ul > li > a {color:#EBEBE1; font-weight:normal; margin:0; line-height:1em; padding:0em 1em 0em 1em; text-decoration:none; text-align:center; display:block;} 
.ul > li > a:link {color:#EBEBE1; font-weight:normal; text-decoration:none;} 
.ul > li > a:hover {color:#FFFFFF; font-weight:normal; text-decoration:none;}


.ul1 {margin-left:1.5em; margin-top:0.25em;} /* Aufzählung */
.li1 {list-style-type:disc; list-style-position:outside; color:#423E3D; font-size:1em; line-height:1.2em; margin:0;}
.ul2 {margin-left:1.5em; margin-top:0;} /* Aufzählung */
.li2 {list-style-type:disc; list-style-position:outside; color:#333333; font-size:1em; line-height:1.2em;}

.image0 {width:100%; height:1em;}
.image1 {width:100%;}
.image2 {float:right; width:97%; margin:0 0 0.5em 3%;}
.image3 {float:right; width:40%; margin-left:60%;}


a:link {color:#423E3D; text-decoration:none;}
a:visited {color:#423E3D; text-decoration:none;}
a:hover {color:#423E3D; font-weight:bold; text-decoration:none;}
a:active {color:#423E3D; font-weight:bold; text-decoration:none;}

a.t:link {color:#423E3D; text-decoration:underline;}
a.t:visited {color:#423E3D; text-decoration:underline;}
a.t:hover {color:#423E3D; font-weight:bold; text-decoration:none;}
a.t:active {color:#423E3D; font-weight:bold; text-decoration:none;}

a.f:link {color:#FFFFFF; text-decoration:underline;}
a.f:visited {color:#FFFFFF; text-decoration:underline;}
a.f:hover {color:#FFFFFF; font-weight:bold; text-decoration:none;}
a.f:active {color:#FFFFFF; font-weight:bold; text-decoration:none;}



/* 900 - 750 px ----------------------------------------------------------------------------- */

@media only screen and (min-width:46.875em) and (max-width:56.25em) 
{
h1 {font-size:2em; margin:0em 0 0.5em 0;}
h2 {font-size:1.2em;}

#Container {width:100%;} 
#Titel {float:left; width:94%;}
#Nav {float:left; width:94%; margin:0.5em 3% 0 3%;}
#Linksstart {width:100%; margin:0 0 0 0:}
#Rechtsstart {width:100%; margin:1em 0 0 0:}
#Links {width:100%; margin:0 0 0 0;}
#Mitte {width:55%; margin:1em 0 0 0;}
#Rechts {width:45%; margin:1em 0 0 0;}
#MiRe {float:left; width:100%; margin:1em 0 0 0;}
#Fuss1 {width:30%;}
#Fuss2 {width:40%;}
#Fuss3 {width:15%}
#offcanvas {display:none;}  

.ul {float:left;}
.ul > li {font-size:0.9em;}
.ul > li > a {padding:0 1em 0 1em;}
}


/* 750 - 640 px ----------------------------------------------------------------------------- */

@media only screen and (min-width:40em) and (max-width:46.875em) 
{
h1 {font-size:1.75em; margin:0em 0 0.5em 2%;}
h2 {font-size:1.2em;}

#Kopf {height:7.5em;}
#Titel {float:left; width:94%;}
#Nav {display:none;}
#Linksstart {width:100%; margin: 0 0 0 0:}
#Rechtsstart {width:100%; margin: 0 0 0 0:}
#Links {width:100%; margin:0 0 0 0;}
#Mitte {width:100%; margin:1em 0 0 0;}
#Rechts {width:100%; margin:1em 0 0 0;}
#MiRe {width:100%; margin:1em 0 0 0;}
#Fuss1 {width:30%;}
#Fuss2 {width:40%;}
#Fuss3 {width:15%}
#offcanvas {float:right; width:33%; margin:0.5em 1% 0 0; display:block; color:#705A45;}
}


/* 640 - 440 px ----------------------------------------------------------------------------- */

@media only screen and (min-width:27.5em) and (max-width:40em) 
{
h1 {font-size:1.5em; margin:0em 0 0.5em 0;}  
h2 {font-size:1.2em;}

#Kopf {height:7em;}
#Titel {float:left; width:94%; height:4em;}
#Nav {display:none;}
#Linksstart {width:100%; margin: 0 0 0 0:}
#Rechtsstart {width:100%; margin: 0 0 0 0:}
#Links {width:100%; margin:0 0 0 0;}
#Mitte {width:100%; margin:1em 0 0 0;}
#Rechts {width:100%; margin:1em 0 0 0;}
#MiRe {width:100%; margin:1em 0 0 0;}
#Fuss { background-image:url(images/Granulat2.jpg);}
#Fuss1 {width:100%;}
#Fuss2 {float:left; width:100%; margin:2em 0 1em 3%;}
#Fuss3 {float:left; width:100%; margin:2em 3% 1em 3%;}
#offcanvas {float:right; width:40%; margin:0.5em 1% 0 0; display:block; color:#705A45;}

.image2 {float:left; width:100%; margin:0 0 0.5em 0;}
}


/* 440 - 320 px ----------------------------------------------------------------------------- */

@media only screen and (min-width:20em) and (max-width:27.5em)
{
h1 {font-size:1.2em; margin:0em 0 0.5em 0;} 
h2 {font-size:1.0em;}

#Kopf {height:7em;}
#Titel {float:left; width:94%; height:3em;}
#Nav {display:none;}
#Linksstart {width:100%; margin: 0 0 0 0:}
#Rechtsstart {width:100%; margin: 0 0 0 0:}
#Links {width:100%; margin:0 0 0 0;}
#Mitte {width:100%; margin:1em 0 0 0;}
#Rechts {width:100%; margin:1em 0 0 0;}
#MiRe {width:100%; margin: 1em 0 0 0; }
#Fuss { background-image:url(images/Granulat2.jpg);}
#Fuss1 {width:100%;}
#Fuss2 {float:left; width:100%; margin:2em 0 1em 3%;}
#Fuss3 {float:left; width:100%; margin:2em 3% 1em 3%;}
#offcanvas {float:right; width:50%; margin:1.5em 1% 0 0; display:block; color:#705A45;}

.image2 {float:left; width:100%; margin:0 0 0.5em 0;}
}