/* CSS Document */

@font-face{
	font-family:'Open Sans', sans-serif;
	src:url('https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,600i,700,700i&display=swap');
}

@font-face {
	font-family: 'Libre Baskerville', serif;
	src:url('https://fonts.googleapis.com/css?family=Libre+Baskerville:400,400i,700&display=swap');
}
	
body {
	font-family: Open Sans;
	/*	color: #5C6565; Grau*/
	color: rgba(92,101,101,1.0);
	font-size: 1em;
	margin: 0;
	line-height: 1.5;
}
.body-angebot {
	font-family: Open Sans;
	color: rgba(92,101,101,1.0);
	font-size: 1em;
	line-height: 1.2em;
}
.body-footer {
	font-family: Open Sans;
	font-size: 0.8em;
	font-face: normal;
	color: white;/*
	word-spacing: 2px;
	text-align: justify;
*/
}
.container {
	max-width: 1000px;
	margin: 0 auto; /* Element Zentrieren */
	overflow: hidden;
}
.kopfbereich {
	background: url("img/1_Header_Home_web.JPG");
	background-size: cover;
	background-position: center;
	height: 150px;
	color: white;
	text-align: center;
}
.kopfbereich-Portfolio {
	background: url("img/2_Header_Portfolio_web.jpg");
	background-size: cover;
	background-position: center;
	height: 150px;
	color: white;
	text-align: center;
}
.kopfbereich-Angebot {
	background: url("img/3_Header_Angebot_web.jpg");
	background-size: cover;
	background-position: center;
/*	background-position: 50% 40%; Positionierung des Headerbilds, wenn man das Bild etwas verschieben will*/
	height: 150px;
	color: white;
	text-align: center;
}
.kopfbereich-Ueber_mich {
	background: url("img/4_Header_Ueber_mich_web.JPG");
	background-size: cover;
	background-position: center;
	height: 150px;
	color: white;
	text-align: center;
}
.kopfbereich-Kontakt {
	background: url("img/5_Header_Kontakt_web.jpg");
	background-size: cover;
	background-position: center;
	height: 150px;
	color: white;
	text-align: center;
}
.kopfbereich h6 {
	color: white;
	text-align: left;
	padding: 100px 0 0;
}
.titelbox {
	max-width: 50%;
	margin: 0 auto;
	text-align: left;
}
.boxen {
	font-size: 0;
}
.textbox {
	background: rgba(255,255,255, 1.00);
	padding: 0 50px 0 0px;
	border-radius: 0px;
	display: inline-block; /*	Nebeneinader */
	/*	width: 31.33%;*/
	box-sizing: border-box; /*	width-Angabe - Padding, Border miteinander beziehen*/
	font-size: 1rem; /*	Schrift zurücksetzen Schriftgrösse*/
	line-height: 1.5;
	vertical-align: top; /*	box oben positionieren*/
	margin: 0 3% 0 0% /*		margin muss abgerechnet werden*/
}
.textbox_Ueber_mich {
	background: rgba(255,255,0,1.00);
	padding: 0px 0 0;
	border-radius: 0px;
	display: inline-block; /*	Nebeneinader */
	/*	width: 31.33%;*/
	box-sizing: border-box; /*	width-Angabe - Padding, Border miteinander beziehen*/
	font-size: 1.2em; /*	Schrift zurücksetzen Schriftgrösse*/
	vertical-align: top; /*	box oben positionieren*/
	margin: 0 1% /*		margin muss abgerechnet werden*/
}
main {
	padding: 0 5px;
}
h3, h4, h5 {
	font-family: Open Sans;
	color: rgba(144,50,115,1.0);
}
h1 {
	font-family: Libre Baskerville;
	color: rgba(92,101,101,1.00);
	/*	color: #5C6565; Grau*/
	/*	color: rgba (144,50,115,1.00)
	#903373; Purpur*/
	font-size: 2.5em;
}
h2 {
	font-family: Open Sans;
	color: rgba(144,50,115,1.00); /*	Purpur*/
	font-size: 1.5em;
}
h3 {
	font-family: Open Sans;
	color: rgba(144,50,115,1.0);
	font-size: 1.05em;
}
h4 {
	font-family: Open Sans;
	/*	color: #5C6565; Grau*/
	color: rgba(144,50,115,1.0);
	font-size: 1.25em;/*	line-height: 1.5;*/
}
h6 {/*	Titel im Bild*/
	font-family: Open Sans;
	color: rgba(255,255,255,1.00); /*	weiss*/
	font-size: 3em;
	padding: 0px;
}
.h6 {
	font-family: Open Sans;
	color: rgba(144,50,115,1.00); /*	purpur*/
	font-size: 3em;
	padding: 0px;
}
nav {
	font-weight: normal;
}
a {
	font-family: Open Sans;
	display: inline;
	line-height: 1em;
	color: rgba(144,50,115,1.0); /*	rgb = purpur*/
	text-decoration: none;
}
a _impressum {
	color: rgba(144,50,115,1.00);
	font-family: Open Sans;
	text-decoration: none;
	display: inline;
	font-size: 0.75em;
}

/*
Der Text wird gekennzeichnet, wenn er vom Besucher angeklickt wird
a:visited {
	color: yellow; 
}
*/

a:hover {
	color: white;
	cursor: pointer;
}
input[type="text"], input[type="date"], textarea, select {
	width: 500px;
	border: 1px solid #903373;
	padding: 8px 15px;
	font-family: Open Sans;
	border-radius: 0px;
	margin-bottom: 0px;
	/*	font-size: 30px;*/
	box-sizing: border-box;
}
input[type="submit"] {
	width: 200px;
	border: 0px;
	padding: 15px 40px;
	font-family: Open Sans;
	font-size: 1em;
	border-radius: 0px;
}
input:focus, select:focus, textarea:focus {
	background: #f2f2f2;
	border-color: black;
	outline: none;
	box-shadow: 10px 10px 10px rgba(148,152,154,0.2);
}
label {
	font-weight: normal;
}
#knopf {
	background: #903373;
	color: white;
	padding: 20px;
}
#knopf:hover {
	background: #5c6565;
	cursor: pointer;
}
header {
	background: white;
	padding: 10px;
}
header nav li {
	display: inline;/*	margin: 5px;*/
}
header nav li a {
	padding: 5px;
	color: rgba(144,50,115,1.0);
	text-transform: uppercase;
}
header nav li a:hover {
	color: rgba(92,101,101,1.0);
	text-decoration-line: underline;
	transition: 0.3s;
}
header nav {
	text-align: right;
	padding-top: 50px;
}
footer {
	background: rgba(92,101,101,1.0);
	background-size: cover;
	height: 200px;
	text-align: center;
	margin: 0px;
	margin-top: 20px;
	padding: 20px;
}
footer na li {
	display: inline;
	margin: 5px;
}
footer nav {
	text-align: center;
	font-family: Open Sans;
	font-size: 0.8em;
	font-face: normal;
}
.box {
	width: 100%;
	height: 300px;
	background: rgba(92,101,101,1.0);
	display: table-cell;
	vertical-align: bottom;
}
img.large {
	width: 1920px;
	height: 900px;
}
img.medium {
	width: 680px;
	height: 482px;
}
img.small {
	width: 450px;
	height: 330px;
}
.button-purpur {
	width: 200px;
	height: 60px;
	color: white;
	font-family: Open Sans;
	font-size: 1em;
	line-height: 1.25;
	background: rgba(144,50,115, 1.0);
	/* old browsers */
	
/*    Dies ist ein Hintergrund mit einem linearen Verlauf*/
/*	background: linear-gradient(to bottom, white, #903373); */
/*
    Dies ist ein Hintergrund mit einem weissen Rahmen
	box-shadow: inset 0px 0px 6px #fff,inset 0px -1px 6px #fff;
*/
	box-shadow: inset 0px 0px 0px #fff, inset 0px 0px 0px #fff;
	/*	border: 1px solid black;*/
	border-radius: 0em;
	margin: 1em 0em;
}
.button-purpur-breit {
	width: 500px;
	height: 60px;
	color: white;
	font-family: Open Sans;
	font-size: 1em;
	line-height: 1.5;
	background: rgba(144,50,115, 1.0);
	box-shadow: inset 0px 0px 0px #fff, inset 0px 0px 0px #fff;
	/*	border: 1px solid black;*/
    
	border-radius: 0em;
	margin: 1em;
}
.button-purpur:hover {
	background: #5C6565;
	cursor: pointer;
}
.button-purpur:focus {
	background: #5C6565;
	border-color: black;
	outline: none;
	box-shadow: rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
}
.button-purpur-breit:hover {
	background: #5C6565;
	cursor: pointer;
}
.button-purpur-breit:focus {
	background: #5C6565;
	border-color: black;
	outline: none;
	box-shadow: rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
}
.float-box {
	float: right;
	width: 33.33%;
}
.logo {
	float: left;
}
.copyright {
	font-family: Open Sans;
	color: white;
	font-weight: normal;
	font-size: 0.8em;
}
.style {
}
.dropdown {
	display: inline-block;
}
.menu li:hover > .submenu {
	display: block;
}
.menu > li::after {
	content: "|";
	color: black;
	margin: 17px;
}
.menu > li:last-child::after {
	/*	kein Rahmen für das letzte Element*/
	content: '';
}
.box {
	background: lightblue;
	width: 200px;
	padding: 20px;
}
.box-1 {
	background: lightblue;
	position: absolute;
	opacity: 0.8;
	top: 200px;
	/*			right: 0;*/
	left: 1200px;/*			bottom: 0;*/
}
.box-2 {
	background: orange;
	position: relative;
	top: 0px;
	left: 400px;
}
.box-3 {
	background: #EE0F13;
	position: static;
	top: 400px;
	/*			standard, nicht verschiebar*/
	left: 400px;
}
/*		scrollender text*/
.box-4 {
	background: pink;
	position: fixed;
	top: 10px;
	right: 10px;
	border-radius: 100%;
	Width: 50px;
	height: 50px;
	text-align: center;
}

/*Für Tabletansicht*/
@media screen and (min-width: 768px){
	.textbox {
		width: 30%;
	}

	.kopfbereich h6 {
		font-size: 2.5em;
		text-align: right;
		padding-right: 200px;
		width: 30%;
	}
	.kopfbereich, .kopfbereich-Portfolio, .kopfbereich-Angebot, .kopfbereich-Ueber_mich, .kopfbereich-Kontakt {
	height: 600px;
	}
}

@media screen and (min-width: 1200px){
	.kopfbereich h6 {
		font-size: 2.5em;
		text-align: right;
		padding-right: 300px;
		width: 30%;
	}
}