/* Thank you for looking at this stylesheet	*/
/* Copyright Chris Völkle					*/

/* ================== ALLGEMEINE DEFINITIONEN ================== */


html {
	background:url(img/bg3.jpg) no-repeat center center fixed; /* auf hintergrund fixieren */
	background-size:cover; 
	min-height:100%;
}

div {
	box-sizing:border-box; /* damit padding und border nicht addiert werden */
}

body {
	font-family: 'Gudea', sans-serif;
	line-height:1.5em;
	margin:0px;
	padding:0px;
	min-height:100%;
}

h1 {
	font-size:1.75em;
}

input,select,textarea {
	font-family: 'Gudea', sans-serif;
	font-size:1em;
}

.bild_rechts {
	border:1px solid #6b6b6b;
	float:right;
	margin:1% 2% 2% 2%;
	padding:1px;	
}

/* ============= ALLGEMEINE DEFINITIONEN FÜR LINKS ============= */

a:link {
	color:rgba(17,71,10,0.90);
	text-decoration:none;	
}

a:hover {
	color:rgba(17,71,10,1);
	text-decoration:underline;
}

a:visited {
	color:rgba(28,120,16,0.50);
	text-decoration:none;	
}

a:active {
	color:rgba(28,120,16,0.20);	
}

/* ======================== CLASSES-LAYOUT ========================= */

.inactive {
	color: rgba(165,165,165,0.29)
}


/* ======================== DIV-LAYOUT ========================= */

#alles {
	position:relative;
	margin:0 auto;
	max-width:1100px;
	min-height:100%;
	height:auto;
}

#container {	
	/* background:rgba(0,0,0,0.0);
	border:1px solid #6b6b6b; */
	box-sizing:border-box;
	/* box-shadow:0px 0px 30px 5px rgba(0,0,0,0.8); */
	color:#000;
	margin:0px; /* zentriert zum oberen element (body) */
	width:850px; /* nie breiter als 1000 pixel */
	padding:20px;
	float:right;
	/*display: inline-block;
	vertical-align:top;*/
}

#titelbalkenmobil {
	display:none;
}

#titelbalken {
	background:rgba(255,255,255,0.9);
	border:1px solid #6b6b6b;
	/* border-radius:10px 10px 0px 0px; */
	font-family: 'Oswald', sans-serif;	/*font-size:1.5em;  grösse im verhältniss zum standart (16px)*/
	min-height:120px;
	margin-bottom:20px;
	padding:10px;
	text-transform:uppercase;
}

.logo1 {
	float:left;
	text-align:center;
	height:100px;
	width:13%;	
}

.logo1 img {
	width:100%;
	margin-top:5px;
}

.titel  {
	float:left;
	line-height:1.5em;
	align-content:center;
	font-size:2em;
	height:100px;
	text-align:center;
	width:65%;
}

.logo2  {
	background:#fff;
	float:left;
	align-content:center;
	height:100px;
	width:22%;
}

.logo2 img {
	width:100%;
	margin-top:5px;

}

#spalte {
	/*border:1px solid #6b6b6b;*/
	/*display: inline-block;
	vertical-align: top;*/
	float:right;
	/*height:500px; */
	width:190px;
	margin:20px;
	-webkit-box-sizing: border-box;
  	   -moz-box-sizing: border-box;
  	        box-sizing: border-box;
}

#sprache {
	background:rgba(255,255,255,0.9);
	border:1px solid #6b6b6b;
	margin-bottom:20px;
	font-size:1.5em;
	text-align:center;
	padding:20px;
	
	position:center;		
}


#hamburger {
	display:none;	
}

#navigation {
	background:rgba(255,255,255,0.9);
	line-height:2.5em;
	border:1px solid #6b6b6b;
	margin-bottom:20px;
	text-align:left;
	padding:20px;
	
	position:center;
}

#adresse {
	background:rgba(255,255,255,0.9);
	border:1px solid #6b6b6b;
	font-family: "Titillium Web", sans-serif;
	font-size:0.8em;	
	line-height:1.5em;
	margin-bottom:5px;
	text-align:left;
	padding:20px;
	
	position:center;	
}

#inhalt {
	background:rgba(255,255,255,0.9);
	border:1px solid #6b6b6b;
	float:left;
	margin-bottom:20px;
	padding:20px;
	width:100%;
}

#seitenanfang {
	background:rgba(0,0,0,0.7);
	border:1px solid #6b6b6b;
	color:#fff;
	font-size:1.2em;
	width:50px;
	height:50px;
	line-height:30px; /* vertikale zentrierung bei einzeilern */
	opacity:0.75;
	padding:10px 10px 10px 10px;
	text-align:center;
	transition:0.3s ease;
	
	/* positionierung eines divs */
	position:fixed;
	bottom:0px;
	right: calc( ( 100vw - 1100px ) / 2 + 20px);	
}

#seitenanfang:hover {
	opacity:1;
	transition:0.5s ease;
}

#seitenanfang a:link {
	color:#999;
}

#seitenanfang a:visited {
	color:#999;
}

#seitenanfang a:hover {
	color:#fff;
}

#fusszeile {
	background:rgba(255,255,255,0.9);
	border:1px solid #999;
	clear:both; /* damit beidseitig nichts mehr schwebt */
	font-size:0.7em;
	padding:10px;	
	position: bottom;
	color:rgba(0,0,0,0.5);
}

#drucken {
	float:right;
	padding:10px;
}

.fa-print {
	display:inline;
}

.clearfix {
	clear:both;
}



@media screen and (max-width: 1100px) {
	
	#alles {
		max-width:950px;
	}
	
	#container {	
		width:700px;
	}
	
	.logo1 {
		float:left;
		text-align:center;
		height:100px;
		width:16%;	
	}
	
	.logo1 img {
		min-width:50px;
		width:100%;
		max-width:80px;
		margin-top:10px;
	}

	.titel  {
		font-size:1.5em;
		width:60%;
	}
	
	.logo2  {
		background:#fff;
		float:left;
		height:100px;
		width:22%;
	}
	
	.logo2 img {
		width:100%;
		margin-top:5px;	
	}	
	
	#seitenanfang {
		right: calc( ( 100vw - 950px ) / 2 + 20px);	
	}
		
}


@media screen and (max-width:960px) {

	html {
		background:#54AB47;
		background-size:cover; 
	}

	#titelbalken {
		display:none;
	}
	
	#titelbalkenmobil {
		background:rgba(255,255,255,0.9) !important;
		display:block;
		font-family: 'Oswald', sans-serif;	/*font-size:1.5em;  grösse im verhältniss zum standart (16px)*/
		margin-bottom:20px;
		height:100px;
		padding:5px;
	}
	
	.logo1 {
		float:left;
		text-align:center;
		height:100px;
		width:30%;	
	}
	
	.logo1 img {
		min-width:50px;
		width:100%;
		max-width:100px;
		margin-top:0px;
	}

	.titel  {
		float:left;
		line-height:1.5em;
		font-size:1.45em;
		height:100px;
		text-align:center;
		width:70%;
	}
	
	.logo2  {
		display:none;
	}

	.logo2 img {
		display:none;
	
	}
	
	.bild_rechts {
		display:none;	
	}
	
	#container {
		border:none;
		background:rgba(0,0,0,0.0);
		width:100%;
		float:none;
	}
	
	#spalte {
		width:100%;
		float: none;
		margin:0px;
		padding:20px 20px 0px 20px ;
	}
	
	#navigation {
		margin-bottom:0px;
		height:70px;
		overflow:hidden;
		padding:15px 30px;
	}

	#hamburger {
		display:block;
		font-size:1.5em;
	}
		
	#seitenanfang {
		background:rgba(255,255,255,0.3);
		border:1px solid rgba(0,0,0,0.4);
		color:#000;
		opacity:0.55;	
		right: 0;
	}
	
	#seitenanfang:hover {
		opacity:1;
		transition:0.5s ease;
	}
	
	#seitenanfang a:link {
		color:#000;
	}
	
	#seitenanfang a:visited {
		color:#000;
	}
	
	#seitenanfang a:hover {
		color:#000;
	}

	#adresse {
		display:none;
	}
	
	.fa-print {
		display:none;
	}

}