body {	
	Font-Family : Comfortaa, Century Gothic, Arial,sans-serif;
	Color : #333333;  margin:0; padding:0;
scrollbar-highlight-color:rgb(214,91,0); 
scrollbar-base-color:white; 
scrollbar-arrow-color:rgb(51,51,51); 
scrollbar-track-color:rgb(228,228,228);  
}

/* comfortaa-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/comfortaa-v45-latin-regular.eot'); /* IE9 Compat Modes */
  src: url('fonts/comfortaa-v45-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/comfortaa-v45-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('fonts/comfortaa-v45-latin-regular.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('fonts/comfortaa-v45-latin-regular.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('fonts/comfortaa-v45-latin-regular.svg#Comfortaa') format('svg'); /* Legacy iOS */
}


/* handlee-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Handlee';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/handlee-v18-latin-regular.eot'); /* IE9 Compat Modes */
  src: url('fonts/handlee-v18-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/handlee-v18-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('fonts/handlee-v18-latin-regular.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('fonts/handlee-v18-latin-regular.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('fonts/handlee-v18-latin-regular.svg#Handlee') format('svg'); /* Legacy iOS */
}

a	  { Color :#45570F; text-decoration:none; }
a:visited { Color :#45570F; text-decoration:none; }
a:active  { Color :#639800; Font-Weight : Bold;}
a:hover   { Color :#639800; Font-Weight : Bold;}

hr {height: 1px; color: #639800; width:80%; margin: 0 auto; align: center;} 


/* ------------------------------------------- Grid-Definition -------------------------------------*/

.container {
  display: grid; 
  max-width: 100%;
  grid-template-columns: 170px 780px; 
  grid-template-rows: 170px auto 60px; 
  gap: 0px 0px; 
  grid-template-areas: "header header" "leftnav content" "footer footer"; 
  justify-content: center; 
}

.header  { grid-area: header; }
.leftnav { grid-area: leftnav;  width: 170px;}
.content { grid-area: content; }
.footer  { grid-area: footer; }

	
/* ----------------------------------------------Wrapper-------------------------------------*/

#wrapper {
	display:block;
	background: linear-gradient(#f4f8ea, #639800);
	width:100%;
	margin:0;
}

/* ----------------------------------------------Header-------------------------------------*/

.header { 
	background-color: #ebebeb;}

.imglinks {
	width:170px; height:170px; 
	border-right:5px solid #639800; }

.imgrechts {
	width: 150px; height:150px; 
	border:0; padding:10;}

.header h1 {
  	color: #639800;
	font-family: Handlee, Comic Sans MS, Verdana,Arial,sans-serif;
	font-weight: bold;
	font-size: 30px;
	padding-top: 60px;
	margin-left: 200px;
	text-align: left;
	line-height: 30px;
}

.header h2{
	font-size:18px;
	font-weight: normal;
	margin-left: 200px;
	text-align: left;
}

/* ---------------------------------------------- weisse Leerzeile -------------------------------------*/

#leerzeile { background-color: white; width:100%; height:30px; }

/* ----------------------------------------------Navigation-------------------------------------*/

.leftnav{ 
	background-color: white;
	padding-top:20px;
	text-align: left;
	}

.leftnav ul, .leftnav li{
	list-style:none;
	font-size:14px;
	}

.leftnav li{
	padding: 10px;
	background-color: #ebebeb;
	margin:5px;
	margin-left: -25px;
	width: 160px;
	}
	
.leftnav li a	  { Color:#333; text-decoration:none; }
.leftnav li a:visited { Color :#333; text-decoration:none;}
.leftnav li a:active  { Color :#639800; Font-Weight : Bold;}
.leftnav li a:hover{ color: #639800; font-weight: bold; }
.leftnav .aktiv { color: #639800; font-weight: bold; }
	
/* ----------------------------------------------Content-------------------------------------*/

.content { background-color:white;}

.content h1 {color: #639800;
	font-family: Handlee, Comic Sans MS, Verdana,Arial,sans-serif;
	font-weight: bold;
	font-size: 30px;
	padding-top: 20px;
	text-align: center;
	line-height: 40px;}

.content h2 {color: #639800;
	font-family: Handlee, Comic Sans MS, Verdana,Arial,sans-serif;
	font-weight: normal;
	font-size: 24px;
	padding-top: 20px;
	text-align: center;
	line-height: 40px;}

.content h3 {color: #639800;
	font-family: Handlee, Comic Sans MS, Verdana,Arial,sans-serif;
	font-weight: normal;
	font-size: 18px;
	text-align: center;
	line-height: 30px;}

.content h4 {color: #639800;
	font-weight: bold;
	font-size: 16px;
	text-align: left;
	margin-left:30px; margin-right:30px;}

.content p, li{
	font-size:14px;
	font-weight: normal;
line-height: 18px;
	color: #333;
	margin-left:30px; margin-right:30px;}

.oben { text-align: right; font-size: 12px; margin-bottom:50px; margin-right:30px}

.mittig {text-align: center;}
.links  {text-align: right;}
.rechts {text-align: right;}

.colleft  { display:block; width:50%; padding:0; float:left; }
.colright { display:block; width:50%; padding:0; float:right; }

.rahmen {border:1px solid #639800; margin:15px; padding-top:20px}
.hellgruen { background-color: #f0f5e3; margin:15px; padding-top:20px; padding-bottom:20px;}

/* ----------------------------------------------Footer-------------------------------------*/

.footer{
	text-align: center;
	margin-top: -20px;
	font-size: 12px;
	background-color: #ebebeb;
	}

/* --------------------- -------Rechtliches - ganz unten-------------------------------------*/

#rechtliches{ 
	text-align: center;
	width: 100%;
	padding-bottom:10px;
	background-color: white;
	font-size: 14px;}

/* ---------------------------------------------- Tablet ------------------------------------*/

@media only screen and ( min-width: 440px ) and ( max-width: 900px )
{

/*-------------------- Allgemein ----------------------------------*/

.container {
  display: grid;
  max-width: 100%;
 
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-template-areas: 
    "header" "header"
    "leftnav" "leftnav"
    "content" "content"
    "footer" "footer"; 
justify-content: center;
}

.header h1 {
	font-size: 25px;
	padding-top:0px;
	line-height: 30px;}

.header h2{ font-size:12px;}

.colleft  {width:65%; margin-left: 5px;}
.colright {width:65%; margin-right:5px;}
/*-------------------- Header ----------------------------------*/

/*-------------------- Navigation----------------------------------*/

/*-------------------- Content ----------------------------------*/

}




/*---------------------------------------------- Mobile -------------------------------------*/

@media only screen and ( max-width: 440px ) 
{
.container {
  display: grid;
  max-width: 100%;
 
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-template-areas: 
    "header" "header"
    "leftnav" "leftnav"
    "content" "content"
    "footer" "footer"; 
justify-content: center;
}

.header h1 {
	font-size: 25px;
	padding-top:0px;
	line-height: 30px;}

.header h2{ font-size:12px;}
.respo {width:90%; height:auto;}
.colleft  {display:block; width:90%; padding:0; margin-left:1%;  float: left;}
.colright {display:block; width:90%; padding:0; margin-right:1%; float: left; }

}