@charset "utf-8";
/*
Hellgruen: a9c500
Olive: 7b950d
Gruen: 338c26
creme: fffeee
*/


#logo { display:block; width:300px; margin-left: auto; margin-right: auto; }


.menue-button {
	display: block;
	background-color: #338c26;
	position: absolute;
	right: 0;
	top: 0;
	padding: 10px;
	margin-right: 10px;
	color: white;
	cursor: pointer;
	text-decoration: none;
}	
#navigation {
	float: left;
	width: 100%;
	display: none;
}
#navigation li {
	width: 100%;
}	


/* die Magie, um die navigation einzublenden (auch auf mobile Devices) */
#nav-menue:target #navigation {
    display: block;
}
/* ausblenden des Menü-Buttons zum öffnen - somit wird der zum Schließen sichtbar */
#nav-menue:target .menue-button-beschr-open {
    display: none ; 
}    
/* Allgemein Anweisungen */
section {
    padding: 0.5em;
    float: left;
    width: 100%;
}

.navilist {
	list-style-type: none;
	margin: 0 0 0 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
	list-style: none;
}

.untermenue {
	display:block;
	list-style-type: none;
	margin: 0 0 0 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
	list-style: none;
}

.navipunkt {
	width: auto;
	float:left;
	margin: 3px 0 0 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
	list-style: none;
}

.navitext {
    font: normal small-caps normal 14px/150% 'Raleway ', sans-serif;
    float: none;
    color: #fff;
    background-color: #95c019;
    text-decoration: none;
    padding-left: 8px;
}

.navitext:link {text-decoration:none; color: #fff; }
.navitext:visited {text-decoration:none; color: #fff; }
.navitext:active {text-decoration:none; color: #fff; }
.navitext:hover {text-decoration:none; background-color:#7b950d; color: #fffeee;}

.untermenue-button {
    font: normal small-caps normal 14px/150% 'Raleway ', sans-serif;
    float: none;
    color: #fffeee;
    background-color: #7b950d;
    text-decoration: none;
    padding-left: 28px;
}
.untermenue-button:link {text-decoration:none; color: #fff; }
.untermenue-button:visited {text-decoration:none; color: #fff; }
.untermenue-button:active {text-decoration:none; color: #fff; }
.untermenue-button:hover {text-decoration:none; background-color:#338c26; color: #fffeee;}


.xing {
	display: block;
	background-color: #338c26;
	position: absolute;
	right: 0;
	top: 0;
	padding: 10px;
	margin-right: 169px;
	color: white;
	cursor: pointer;
	text-decoration: none;
}

.fb {
	display: block;
	background-color: #338c26;
	position: absolute;
	right: 0;
	top: 0;
	padding: 10px;
	margin-right: 130px;
	color: white;
	cursor: pointer;
	text-decoration: none;
}

.pin {
	display: block;
	background-color: #338c26;
	position: absolute;
	right: 0;
	top: 0;
	padding: 10px;
	margin-right: 91px;
	color: white;
	cursor: pointer;
	text-decoration: none;
}

.tw {
	display: block;
	background-color: #338c26;
	position: absolute;
	right: 0;
	top: 0;
	padding: 10px;
	margin-right: 50px;
	color: white;
	cursor: pointer;
	text-decoration: none;
}



@media screen and (min-width: 560px) {

	#schlagworte {
		display: block;
	}
	
	.headergruen {
		background-image:url(../images/0-TR-Wuerfel-TW-Slider-Website.png);
		background-color: #95c019;
		width: 100%;
		object-fit: cover;
		display: block;
		background-repeat: no-repeat;
		background-size: cover;
}


@media screen and (min-width: 844px) {

/* ------------------------------------------------------ NAVIGATION 844px Viewport ------------------------------------------------------*/

	#header {
		background-repeat: no-repeat;
		background-position: center;
		width:100%;
		height: 262px;
		margin-left:auto;
		margin-right:auto;
	}

	.logomobil { display: none;}

	.xing, .fb, .tw, .pin {
		display: none;
	}

	.menue-button {
		display:none;
	}
	#nav {
		padding-top: 260px;
		margin-left: auto;
		margin-right: auto;
		width: 100%;
	}

	.navilist {
		list-style-type: none;
		margin: 0 0 0 0;
		padding: 0;
		border: 0;
		outline: 0;
		font-weight: inherit;
		font-style: inherit;
		font-size: 100%;
		font-family: inherit;
		vertical-align: baseline;
		list-style: none;
	}

	.untermenue {
		display:none;
	}


    .navipunkt {
		width: auto;
		float:left;
		margin: 3px 0 0 0;
		padding: 0;
		border: 0;
		outline: 0;
		font-weight: inherit;
		font-style: inherit;
		font-size: 100%;
		font-family: inherit;
		vertical-align: baseline;
		list-style: none;
	}

    .navitext {
		text-transform: uppercase;
		font: normal small-caps normal 12px/150% 'Raleway ', sans-serif;
		float: none;
		color: #000;
		background-color: transparent;
		text-decoration:none;
	    padding-left: 0;
		font-family: helvetica;
	}

	.blatt01 {
		float:none;
		border-top: solid #ef7f2c 5pt;
		width:100%;
		height:12px;
	}
    .navipunkt:hover .navitext { text-decoration:none; color: #7b950d; background-color: transparent;}
	.navipunkt:hover .blatt01 {text-decoration:none; border-top: solid #7b950d 5pt;}

	.navitext:hover {text-decoration:none; background-color:#7b950d; color: #fffeee;}


	.blatt02 {
		float:none;
		border-top: solid #ef7f2c 5pt;
		width:100%;
		height:12px;
	}
	.navipunkt:hover .blatt02 {text-decoration:none; border-top: solid #7b950d 5pt;}

	.blatt03 {
		float:none;
		border-top: solid #ef7f2c 5pt;
		width:100%;
		height:12px;
	}
	.navipunkt:hover .blatt03 {text-decoration:none; border-top: solid #7b950d 5pt;}

	.blatt04 {
		float:none;
		border-top: solid #ef7f2c 5pt;
		width:100%;
		height:12px;
	}
	.navipunkt:hover .blatt04 {text-decoration:none; border-top: solid #7b950d 5pt;}

	.blatt05 {
		float:none;
		border-top: solid #ef7f2c 5pt;
		width:100%;
		height:12px;
	}
	.navipunkt:hover .blatt05 {text-decoration:none; border-top: solid #7b950d 5pt;}

	.blatt06 {
		float:none;
		border-top: solid #ef7f2c 5pt;
		width:100%;
		height:12px;
	}
	.navipunkt:hover .blatt06 {text-decoration:none; border-top: solid #7b950d 5pt;}

	header {
		width: 100%;
		float: left;
	}
	
	#navigation li {
		list-style: none;
		float: left;
	}
	#navigation a {
		display: block;
		height: 100%;
		/* width: 100%; */
		padding: 0.5em;
		text-decoration: none;
		color: white;
		float:left;
	}    
	.menue-button {
		display: none;
	}    
	#navigation {
		width: 100%;
		text-align: center;
		float: right;
		display: block;
	}

/* ------------------------------------------------------ Fixed JS ------------------------------------------------------*/
	.fixed {
		position: fixed;
		top: 0px;
		background-color: #f5f5f5;
		opacity:10;
	}
	
	.fixed + .content {
		padding-top: 200px;
	}
	
	#navi {
		display:block;
		margin-left: auto;
		margin-right: auto;
		width: 100%;
		z-index: 15;
	}
	
	.navimitte {
		width: 800px;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}

}
	


@media screen and (min-width: 1125px) {

/* ------------------------------------------------------ NAVIGATION 1040px Viewport ------------------------------------------------------*/

	.navitext {
		font-size: 17px;
	}	
	
	#nav {
		padding-top: 250px;
		margin-left: auto;
		margin-right: auto;
		width: 100%;
	}
	
	#navi {
		width: 100%;
		padding-top: 10px;
	}

	.navimitte {
		width: 1100px;
	}

}