/*** Local Google Web Fonts ***/

/* open-sans-300 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: url('font/open-sans-v15-latin-300.eot'); /* IE9 Compat Modes */
  src: local('Open Sans Light'), local('OpenSans-Light'),
       url('font/open-sans-v15-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('font/open-sans-v15-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('font/open-sans-v15-latin-300.woff') format('woff'), /* Modern Browsers */
       url('font/open-sans-v15-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('font/open-sans-v15-latin-300.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('font/open-sans-v15-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Open Sans Regular'), local('OpenSans-Regular'),
       url('font/open-sans-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('font/open-sans-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('font/open-sans-v15-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('font/open-sans-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('font/open-sans-v15-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-600 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url('font/open-sans-v15-latin-600.eot'); /* IE9 Compat Modes */
  src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
       url('font/open-sans-v15-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('font/open-sans-v15-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
       url('font/open-sans-v15-latin-600.woff') format('woff'), /* Modern Browsers */
       url('font/open-sans-v15-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
       url('font/open-sans-v15-latin-600.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-700 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('font/open-sans-v15-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Open Sans Bold'), local('OpenSans-Bold'),
       url('font/open-sans-v15-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('font/open-sans-v15-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('font/open-sans-v15-latin-700.woff') format('woff'), /* Modern Browsers */
       url('font/open-sans-v15-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('font/open-sans-v15-latin-700.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-800 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 800;
  src: url('font/open-sans-v15-latin-800.eot'); /* IE9 Compat Modes */
  src: local('Open Sans ExtraBold'), local('OpenSans-ExtraBold'),
       url('font/open-sans-v15-latin-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('font/open-sans-v15-latin-800.woff2') format('woff2'), /* Super Modern Browsers */
       url('font/open-sans-v15-latin-800.woff') format('woff'), /* Modern Browsers */
       url('font/open-sans-v15-latin-800.ttf') format('truetype'), /* Safari, Android, iOS */
       url('font/open-sans-v15-latin-800.svg#OpenSans') format('svg'); /* Legacy iOS */
}



/*************************************/



html{
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}
body{
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	font-size: 1em;
}
/* 	--------------------------------
		HEADER
		-------------------------------- */
header{
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	display: block;
	background:#ffffff url(../images/background.jpg) top center no-repeat;
	background-size: cover;
}
#header{
	width: 1080px;
	padding: 0 20px;
	height: 80px;
	margin: 0 auto;
	background: #ffffff;
	box-sizing: border-box;
	overflow: hidden;
	border-radius: 5px;
	box-shadow: 0 0 5px #b4b4b4;
}
#logo{
	background: #ffffff url(../images/logo-header1.png) center center no-repeat;
	width: 245px;
	height: 80px;
	float: left;
	padding: 2px;
	box-sizing: border-box;
}
h1{
	text-indent: -9999px;
}
/* 	--------Navigation---------*/
nav{
	float: right;
	overflow: hidden;
	width: 480px;
	display: block;
	margin: 0;
	padding: 0;
}
#header ul{
	margin: 0;
	padding: 0;
	margin-top: 25px;
	width: 100%;
}
#header ul li{
	float: left;
	list-style: none; 
	display: inline-block;
	margin-right: 6%;
}
#header ul li:last-child{
	margin-right: 0;
}
#header ul li a{
	text-decoration: none;
	color: #000000;
	display: block;
	padding: 1px;
	text-transform: uppercase;
	font-weight: 600;
	font-size: 1em;
}
#header ul li a.active{
	border-bottom: 4px solid #000000;
}
#header ul li a:hover, #header ul li a:focus{
	border-bottom: 4px solid #957cb6;
}
#header ul li a.active:hover, #header ul li a.active:focus{
	border-bottom: 4px solid #000000;
}
/* 	--------Menübutton---------*/
/* Positionierung */
.menubutton{
	display: block;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 1000;
}
/* Gestaltung */
.menubutton a{
	display: block;
	text-decoration: none;
	padding: 30px 50px;
	text-indent: -9999px;
	background: url(../images/menu.png) center center no-repeat;
}
.menubutton a.hidenavlist{
  display: none;
}
.menubutton a.shownavlist{
  display: none;
}
/* 	--------Logo in Bild-Mitte---------*/
.logo-mitte{
	width: 60%;
	padding: 15% 0 30% 0;
	margin: 0 auto;
}
.logo-mitte img{
	width: 100%;
	height: auto;
	margin: 0 auto;
}
.header-unten{
	width: 1080px;
	height: auto;
	margin: 0 auto;
}
.logo-mitte .linie-oben{
	width: 100%;
	height: auto;
	overflow: hidden;
	margin: 3% auto;
}
.logo-mitte .linielinks{
	width: 19%;
	margin-left: 26%;
	height: 4px;
	float: left;
	background: #000000;
	margin-top: 3.8%;
}
.logo-mitte .linierechts{
	width: 19%;
	height: 4px;
	float: left;
	background: #000000;
	margin-top: 3.8%;
}
.logo-mitte .logo-innung-mitte{
	width: 8%;
	height: auto;
	float: left;
	margin: 0 1%;
}
.logo-mitte .logo-innung-mitte img{
	width: 98.5%;
	height: auto;
}
.pfeile{
	width: 10%;
	height: auto;
	margin: 0 auto;
}
.pfeile img{
	width: 100%;
	height: auto;
}
/* 	--------------------------------
		MAIN
		-------------------------------- */
main{
	background: #ffffff;
	width: 100%;
	height: auto;
	margin-bottom: 140px;
}
/* 	--------Überschrift mit Linien---------*/
.uberschrift{
	width: 1080px;
	margin: 120px auto;
	background: #ffffff;
	height: auto;
	box-sizing: border-box;
	padding: 0 20px;
}
.uberschrift .linie-oben{
	width: 100%;
	height: auto;
	overflow: hidden;
}
.uberschrift .linie{
	width: 46.5%;
	height: 4px;
	float: left;
	background: #000000;
	margin-top: 2.4%;
}
.uberschrift .logo-innung-mitte{
	width: 5%;
	height: auto;
	float: left;
	margin: 0 1%;
}
.uberschrift .logo-innung-mitte img{
	width: 100%;
	height: auto;
}
h3{
	font-size: 3em;
	text-transform: uppercase;
	font-weight: 400;
	text-align: center;
	margin: 0;
	padding: 0;
	margin-top: -1%;
}
.linie-unten{
	width: 40%;
	height: 4px;
	background: #000000;
	margin: 0 auto;
	margin-top: 1.5%;
}
/* 	--------Text Allgemeines---------*/
.text{
	width: 1080px;
	padding: 0 200px;
	box-sizing: border-box;
	margin: 0 auto;
}
p{
	text-align: center;
	margin-bottom: 50px;
	color: #505050;
	letter-spacing: 0.1em;
	word-spacing: 0.1em;
	line-height: 180%;
	font-size: 0.9em;
}
/* 	--------------------------------
		FOOTER
		-------------------------------- */
footer{
	width: 1080px;
	height: 80px;
	background: #000000;
	margin: 0 auto;
	border-radius: 5px;
	padding: 0 20px;
	box-sizing: border-box;
	box-shadow: 0 0 5px #b4b4b4;
	bottom: 0;
}
footer ul{
	margin: 0;
	padding: 0;
	float: right;
	margin-top: 25px;
}
footer ul li{
	list-style: none;
	float: right;
}
footer ul li a{
	text-decoration: none;
	color: #ffffff;
	display: block;
	padding: 1px;
	text-transform: uppercase;
	font-weight: 600;
	font-size: 1em;
}
footer ul li a:hover{
	border-bottom: 4px solid #957cb6;
}
a.active-footer{
	border-bottom: 4px solid #ffffff;
}
/* 	--------------------------------
		LINKS
		-------------------------------- */
h4{
	font-size: 1.4em;
	font-weight: 600;
	word-spacing: 0.1em;
	line-height: 180%;
	text-transform: uppercase;
	text-align: center;
	margin: 0;
	padding: 0;
}
a.links{
	color: #505050;
	border-bottom: 2px solid #957cb6;
	text-decoration: none;
	margin: 0;
	padding: 1px;
}
a.links:hover{
	color: #957cb6;
	border-bottom: none;
}
p.links-text{
	margin-bottom: 100px;
}
/* 	--------------------------------
		KONTAKT
		-------------------------------- */
.maps{
	margin: 80px auto;
	width: 1080px;
	height: 300px;
	box-sizing: border-box;
	padding: 0 20px;

}
/* 	--------------------------------
		IMPRESSUM
		-------------------------------- */
h4.uberschrift-impressum{
	font-size: 1.2em;
	font-weight: 600;
	word-spacing: 0.3em;
	line-height: 140%;
	text-align: center;
	margin: 0;
	padding: 0;
	letter-spacing: 0.025em;
	margin-top: -5px;
	text-transform: none;
}
h5{
	font-size: 1.2em;
	font-weight: 600;
	word-spacing: 0.3em;
	line-height: 140%;
	text-align: center;
	margin: 0;
	padding: 0;
	letter-spacing: 0.1em;
	margin-top: 10px;
	text-transform: none;
}
/* 	--------------------------------
		PFEILE NACH OBEN
		-------------------------------- */
.pfeileoben{
	box-sizing: border-box;
	margin: 0 auto;
	padding: 0 auto;
	width: 100%;
	margin-top: 120px;
	text-align: center;
}
.pfeileoben a{
	display: inline-block;
}

@media screen and (max-width: 1100px) and (min-width: 1px) {
#header{
	width: 100%;
}
.header-unten{
	width: 100%;
}
/* Überschrift */
.uberschrift{
	width: 100%;
}
.text{
	width: 100%;
}
footer{
	width: 100%;
}
/* 	--------------------------------
		KONTAKT
		-------------------------------- */
.maps{
	width: 100%;
}
}
@media screen and (max-width: 850px) and (min-width: 1px) {
#header ul{
	margin: 0;
	top: 80px;
	right: 0;
	height: 0;
	overflow: hidden;
	position: absolute;
}
#header ul li{
	float: left;
	list-style: none; 
	display: block;
	width: 100%;
}
#header ul li a{
	text-decoration: none;
	color: #000000;
	display: block;
	padding: 10px;
	text-transform: uppercase;
	font-weight: 600;
	font-size: 1.5em;
	background: #ffffff;
	border-radius: 5px;
	border-bottom: 1px solid #000000;
	text-align: center;
}
#header ul li a.active{
	background: #957cb6;
	border-bottom: 1px solid #000000;
}
#header ul li a:hover, #header ul li a:focus{
	background: #ded2ee;
	border-bottom: 1px solid #000000;
}
#header ul li a.active:hover, #header ul li a.active:focus{
	background: #957cb6;
	border-bottom: 1px solid #000000;
}
.menubutton a.shownavlist{
  display: block;
}
#menu:target #header ul{
	height: 275px;
}
#menu:target a.shownavlist{
	display: none;
}
#menu:target a.hidenavlist{
	display: block;
}
footer{
	text-align: center;
}
footer ul{
	float: none;
}
footer ul li{
	float: none;
}
footer ul li a{
	display: inline-block;
	margin-top: 20px;
	font-size: 1.5em;
}
}
@media screen and (max-width: 700px) and (min-width: 1px) {
.text{
	padding: 0 20px;
}
h3{
	font-size: 2.3em;
}
}
@media screen and (max-width: 500px) and (min-width: 1px) {
.logo-mitte{
	width: 100%;
	padding: 15% 20px 30%;
	margin: 0 auto;
	box-sizing: border-box;
}
#logo{
	background: #ffffff url(../images/logo-header-kleiner1.png) center center no-repeat;
	width: 180px;
	height: 43px;
	margin-top: 20px;
}
}