@charset "utf-8";
/* CSS Document */

body {
	background-color: #333333;
	font-family:arial;
	color: #000000;
}

#hauptfoto{
	position: absolute;
	width: 90%;
	height: 90%;
	overflow: hidden;
	top: 5%;
	left: 5%;
}

h1 {
	font-size: 24px;
	color: #6E4706;
}

p {
	font-size:16px;
}

#hauptfoto .titelfoto {
	position: absolute;
	top:0px;
	left:0px;
	right: 0px;
	bottom:0px;
	overflow: hidden;
	background-size: cover;
	background-position: center center;
	opacity: 0;
		
	z-index: 50;
	
	-webkit-transition: all 1000ms ease-in-out;
	-moz-transition: all 1000ms ease-in-out;
	-ms-transition: all 1000ms ease-in-out;
	-o-transition: all 1000ms ease-in-out;
	transition: all 1000ms ease-in-out;
}

#hauptfoto .titelfoto.sichtbar {
	opacity: 1;
}

#szene{
	position: absolute;
	width: 90%;
	height: 90%;
	overflow: hidden;
	top: 5%;
	left: 5%;
	z-index: 60;
}

#clipOben {
	position: absolute;
	width: 110%;
	height: 20%;
	top: 3%;
	right: -5%;
	background-image: url(../pict/balk_gelb.svg);
	background-size: contain;
	background-repeat: no-repeat;
}

#clipUnten {
	position: relative;
	width: 120%;
	height: 20%;
	top: 65%;
	right: 3%;
	transform: rotate(-25deg);
	background-image: url(../pict/balk_gelb.svg);
	background-size: contain;
	background-repeat: no-repeat;
}

#balkenOben {
	position: relative;
	width: 100%;
	top: 20%;
	left: -45%;
	transform: rotate(80deg);
}

#balkenUnten {
	position: relative;
	width: 40%;
	height: 10%;
	top: 60%;
	left: -5%;
	background-image: url(../pict/balk_cyan.svg);
	background-size: contain;
	background-repeat: no-repeat;
}

#kamera {
	position: absolute;
	width: 18%;
	height: 42%;
	top: 5%;
	right: 2%;
	background-image: url(../pict/kamera_k.png);
	background-size: contain;
	background-repeat: no-repeat;
}

.kameraFoto {
	width: 80%;
}

#logo {
	position: absolute;
	bottom: 1%;
	left: 1%;
}

/* 	************************
	******** INHALT ********
	************************ */
#begrenzung {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	overflow: hidden;
	z-index: 70;
}	

#inhalt {
	position: absolute;
	width: 66%;
	height: 90%;
	left: 22%;
	padding: 10px;
	padding-left: 110px;
	padding-top: 30px;
	padding-right: 110px;
	padding-bottom: 30px;
	bottom: -100%;
	-webkit-border-radius: 8px 8px 0 0;
	border-radius: 8px 8px 0 0;
	/*border-width: 1px;
	border-style: solid;
	border-color: #111111;
	/*background-color: rgba(183,200,195,0.9);*/
	background-image: url(../pict/flaeche.svg);
	background-size: 100%;
	background-repeat: no-repeat;
	-webkit-transition: all 500ms linear;
	-moz-transition: all 500ms linear;
	-ms-transition: all 500ms linear;
	-o-transition: all 500ms linear;
	transition: all 500ms linear;	
}

#inhalt.inhaltauf {
	bottom: 0;
}

/* 	************************
	****** NAVI-MENU  ******
	************************ */
	
#navi:hover, #navi.hover {
	width: 400px;
	height: 300px;
	
}

#navi {
	position:absolute;
	top: -5px;
	left: -5px;
	width: 150px;
	height: 33px;
	padding-top: 12px;
	background-color: rgba(0,0,0,0.8);
	border-width: 2px;
	border-style: solid;
	-webkit-border-radius: 0 0 5px 0;
	border-radius: 0 0 5px 0;
	border-color: #111111;
	vertical-align: center;
	text-align: center;
	overflow: hidden;
	
	-webkit-transition: all 500ms linear;
	-moz-transition: all 500ms linear;
	-ms-transition: all 500ms linear;
	-o-transition: all 500ms linear;
	transition: all 500ms linear;
	
	z-index: 90;
}

#navi b, #navi h3 {
	font-size:18px;
	/*font-style: bold;*/
	color: #ffffff;
	margin: 0px;
	padding: 0px;
}

#navi h4, #navi a {
	font-weight: lighter;
	font-size:15px;
	color: #ffffff;
	padding: 15px;
	padding-left: 40px;
	line-height: 0;
	margin-top: 0;
	margin-bottom: 0;
}
#navi p {
	font-size:15px;
	color: #ffffff;
	line-height: 20px;
	padding-left: 20px;
	margin-top: 0;
}

#hauptnavi {
	position: absolute;
	left: 5px;
	top: 50px;
	width: 190px;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #ffffff;
	text-align: left;
}

#infonavi {
	position: absolute;
	left: 196px;
	top: 50px;
	width: 190px;
	height: 200px;
	text-align: left;
}

#infokurz {
	position: absolute;
	left: 196px;
	top: 50px;
	width: 190px;
	height: 200px;
	text-align: left;
}

.unsichtbar {
	visibility: hidden;
}

.tasteover {
	width: 70%;
	background-color: #6E4706;
}

.tastefest {
	width: 70%;
	background-color: #C78514;
}

#suchconti {
	position: absolute;
	left: 50px;
	top: 270px;
	width: 300px;
	height: 30px;
	vertical-align: center;
	overflow: hidden;
	background-color: #222222;
	-webkit-border-radius: 15px;
	border-radius: 15px;
	border: solid;
	border-width: 1px;
	border-color: #ffffff;
}

#sucher {
	background-color: #bbbbbb;
	width: 250px;
	height: 30px;
	padding-left: 20px;
	position: absolute;
	left: -1px;
	top: -1px;
	-webkit-border-radius: 15px 0 0 15px;
	border-radius: 15px 0 0 15px;
	border: none;
}

#lupe {
	position: absolute;
	right: 5px;
	top: 5px;
}

#schloss {
	position: absolute;
	right: 5px;
	top: 15px;
	width: 25px;
	height: 25px;
	/*overflow: hidden;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	border: solid;
	border-width: 1px;
	border-color: #ffffff;*/
}

.schlossauf {
	background-image: url(../pict/schlossauf.svg);
	background-size: 80%;
	background-repeat: no-repeat;
}

.schlosszu {
	background-image: url(../pict/schlosszu.svg);
	background-size: 80%;
	background-repeat: no-repeat;
}

/********** DEBUG STYLES **********/
.debug,.debugCleanString,.debugCheckInputString,.debugCheckEmail,.debugImageUpload,.debugDb,.debugClass  {
	background-color: dodgerblue;
	padding: 2px 5px;
	margin-bottom: 2px;
	margin-top: 2px;
	margin-left: 10px;
	font-family: arial;
	font-size: 0.8em;
	color: white;
}
.debugCleanString {
	background-color: palegreen;
	color: black;
}
.debugCheckInputString {
	background-color: springgreen;
	color: black;
}
.debugCheckEmail {
	background-color: chartreuse;
	color: black;
}
.debugImageUpload {
	background-color: darkcyan;
}
.debugDb {
	background-color: darkorange;
}
.debugClass {
	background-color: lightblue;
	font-family: courier new;
	font-size: 0.9em;
	color: #333;
}
.err {
	border-left: 10px solid red;
	border-radius: 0.8em;
	margin-left: 0px;
}
.ok {
	border-left: 10px solid lime;
	border-radius: 0.8em;
	margin-left: 0px;
}