html {
	height: 100.2%;
	background: url(../bilder/background/bkgr01.jpg) no-repeat center center fixed;
	-webkit-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	overflow-y: scroll;
}

body {
	margin: 0;
	padding: 0;
	background-color: rgba(255, 255, 255, 0);
}

/* Schrifttypen einbinden */
@font-face {
	font-family: 'Boon';
		src: url('../fonts/boon-300-webfont.eot');
		src: url('../fonts/boon-300-webfont.eot?#iefix') format('embedded-opentype'),
			url('../fonts/boon-300-webfont.woff2') format('woff2'),
			url('../fonts/boon-300-webfont.woff') format('woff'),
			url('../fonts/boon-300-webfont.ttf') format('truetype'),
			url('../fonts/boon-300-webfont.svg#boonlight') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Roundstyle';
		src: url('../fonts/roundstylebasic-webfont.eot');
		src: url('../fonts/roundstylebasic-webfont.eot?#iefix') format('embedded-opentype'),
			url('../fonts/roundstylebasic-webfont.woff2') format('woff2'),
			url('../fonts/roundstylebasic-webfont.woff') format('woff'),
			url('../fonts/roundstylebasic-webfont.ttf') format('truetype'),
			url('../fonts/roundstylebasic-webfont.svg#boonlight') format('svg');
	font-weight: normal;
	font-style: normal;
}
/* Ende Schrifttypen einbinden */

header {z-index: 2;}

h1 {font-size: 1.5em; text-align: center; color: rgba(0, 0, 0, 1); font-family: Boon;}
h2 {font-size: 18pt; text-align: center; color: rgba(0, 0, 0, 1); font-family: Boon;}
h3 {font-size: 16pt; color: rgba(0, 0, 0, 1); font-family: Boon;}
h4 {font-size: 14pt; color: rgba(0, 0, 0, 1); font-family: Boon;}
p, .folgeseiten li {font-size: 13pt; font-family: Boon; margin-top: 6px;}
.folgeseiten p, .folgeseiten h1, .folgeseiten h2, .folgeseiten h3, .folgeseiten h4 {line-height: 140%; margin-left: 15px; margin-right: 15px;}
footer p {font-size: 12pt; line-height: 130%; margin-left: 15px; margin-right: 15px;}

.zentriert {text-align: center;}

nav li {font-size: 13pt; font-family: Boon; font-weight: bold;}
nav a, a {text-decoration: none;}
nav a:link, content a:link {text-decoration: none; color: rgba(128, 128, 255, 1);}
footer a:link {text-decoration: none; color: rgba(50, 50, 200, 1);}

nav a:visited, content a:visited {text-decoration: none; color: rgba(120, 120, 120, 1);}
content a:visited {text-decoration: none; color: rgba(50, 50, 120, 1);}
footer a:visited {text-decoration: none; color: rgba(20, 20, 100, 1);}

nav a:hover {text-decoration: none; color: rgba(80, 80, 255, 1);}
content a:hover {text-decoration: underline; color: rgba(80, 80, 255, 1);}
footer a:hover {text-decoration: underline; color: rgba(30, 30, 160, 1);}

.folgeseiten {background-color: rgba(255, 255, 255, 0.8);}

.folgeseiten ul li p {margin-left: 0px;}


.trennstrich {
	display:block;
	margin: 0px auto 20px;
	width: 95%;
	height: 1px;
}

.liste-einrueckung {
	margin-left: 30px;
}

footer {
	background-color: rgba(180, 180, 180, 0.8);
}

#copyright {
  font-size: 9pt;
  font-weight: bold;
  margin: 4px 15px 30px 15px;
  color: rgba(255, 255, 255, 1);
}

/* Auflösung von Mobiltelefonen und andere mit weniger als 920px Breite */
@media screen and (max-width: 919px) {
	header {
		width: 100%;
		height: auto;
		background-color: rgba(255, 255, 255, 0.9);
		padding: 4px 0px 4px 0px;
		/*position: fixed;
		top: 0px;
		border: 1px solid red;*/
	}

	navigation {
		background-color: rgba(255, 255, 255, 1);
		height: auto;
	}

	.navigation-mobile-icon img {
		width: 38px;
		height: 33px;
		display: block;
		margin: 10px auto;
		padding: 0px;
	}

	.topnav {
		display: none;
	}

	.topnav.responsive {
		display: block;
		height: auto;
	}

	nav ul a {
		display: block;
		transition: all .15s ease-in;
		padding: 10px 10px 10px 10px;
		border-left: 3px solid rgba(255, 255, 255, 1);
	}

	nav ul ul a {
		padding: 10px 10px 10px 30px;
	}

	nav ul a:focus,
	nav ul a:hover {
		color: rgba(50,80,125,1);
		background-color: rgba(255, 255, 255, 1);
		border-left: 3px solid rgba(80, 80, 255, 0.5);
	}

	body.start nav ul li a#start,
	body.aktuelles nav ul li a#aktuelles,
	body.arbeiten nav ul li a#arbeiten,
	body.kontakt nav ul li a#kontakt,
	body.impressum nav ul li a#impressum,
	body.links nav ul li a#links,
	body.person nav ul li a#person
	{
		border-left: 3px solid rgba(80, 80, 255, 0.5);
	}


	nav ul, nav ul ul {
		list-style: none;
		margin: 0px 0px 0px 0px;
		padding: 0px 0px 0px 0px;
	}

	nav .submenue {
		visibility: hidden;
		height: 0;
		z-index: 1000;
	}

	nav .submenue li {
		display: block;
	}

	nav li:hover .submenue,
	nav li:active .submenue,
	nav li:focus .submenue,
	nav li:focus-within .submenue {
		visibility: visible;
		height: auto;
	}

	.folgeseiten {
		display: block;
		width: 100%;
		margin: 0px auto;
		padding: 0px;
		border: 1px solid rgba(255, 255, 255, 0);
	}

	.folgeseiten img {
		max-width: 95%;
	}

	p.arbeiten {
		margin: 30px 10% 30px;
		text-align:left;
	}

	footer, copyright {
		display: block;
		width: 100%;
		margin: 0px auto;
		padding: 0px;
		border: 1px solid rgba(255, 255, 255, 0);
	}

	footer hr {
		height: 1px;
		border: 0px;
		color: rgba(220, 220, 220, 0.4);
		background-color: rgba(220, 220, 220, 0.4);
		margin: 0px 10px 10px 10px;
	}

}

/* Auflösung von Mobiltelefonen und andere mit mehr als 920px Breite */
@media screen and (min-width: 920px) {
	header {
		width: 100%;
		height: auto;
		background-color: rgba(255, 255, 255, 0.9);
		padding: 4px 0px 4px 0px;
		margin: 0px 0px -1px 0px;
		position: fixed;
		top: 0px;
		/*border: 1px solid red;*/
	}

	navigation {
		display: block;
		width: 900px;
		height: auto;
		margin: 10px auto;
	}

	.navigation-mobile-icon img {
		display: none;
		height: 0px;
		margin: 0px;
		padding: 0px;
	}

	nav {
		height: 40px;
		width: 100%;
		background-color: transparent;
	}

	nav ul {
		margin: 0px;
		padding: 0px;
	}

	nav ul .submenue {
		margin: 0px;
		padding: 0px;
		position: absolute;
		visibility: hidden;
		background-color: rgba(255, 255, 255, 1);
	}

	nav ul li {
		margin: 0px;
		padding: 0px;
		list-style: none;
		text-align: center;
		float: left;
	}

	nav ul a {
		display: block;
		width: 225px;
		height: 20px;
		margin: 0px 0px 0px 0px;
		padding: 7px 0px 10px 0px;
	}

	nav  a.level1:hover {
		border-bottom: 3px solid rgba(80, 80, 255, 0.5);
	}

	body.start nav ul li a#start,
	body.aktuelles nav ul li a#aktuelles,
	body.arbeiten nav ul li a#arbeiten,
	body.kontakt nav ul li a#kontakt,
	body.impressum nav ul li a#impressum,
	body.links nav ul li a#links,
	body.person nav ul li a#person
	{
		border-bottom: 3px solid rgba(80, 80, 255, 0.5);
	}

	nav ul li:hover {
		position: relative;
	}

	a.level2 {
		padding: 15px 0px 15px 0px;
	}

	nav ul li:hover > a.level2 {
		background-color: rgba(200, 200, 255, 0.9);
	}

	nav ul li a:hover {
		position: relative;
	}

	nav ul li:hover ul, nav ul li a:hover ul {
		left: 0px;
		top: 40px;
		visibility: visible;
	}

	.startseite, .folgeseiten {
		display: block;
		width: 900px;
		margin: 117px auto 0px;
/*		padding: 4px 50x 4px 50px;*/
		border: 1px solid rgba(255, 255, 255, 0);
	}

	p.arbeiten {
		margin: 50px 140px 70px;
		text-align:left;
	}


	footer {
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 900px;
		margin: 0px auto 0px;
/*		padding: 4px 0x 4px 0px;*/
		border: 1px solid rgba(255, 255, 255, 0);
	}

	.footer-left {
		flex: 1;
		order: 1;
		flex-grow: 1;
		height: auto;
	}

	.footer-right {
		flex: 1;
		order: 2;
		flex-grow: 1;
		height: auto;
	}

	footer hr {
		display: none;
	}

	copyright {
		display: block;
		width: 900px;
		margin: 0px auto 0px;
/*		padding: 4px 50x 4px 50px;*/
		border: 1px solid rgba(255, 255, 255, 0);
	}
}