FIELDS;COLOR_WEBSITE_BACKGROUND;COLOR_TEXT_ALL;COLOR_TEXT_LINKS;COLOR_HEADER_BACKGROUND;COLOR_MENU_TITEL_BACKGROUND;COLOR_MENU_TITEL_TEXT;COLOR_FOOTER;COLOR_INPUTFIELD1_TEXT;COLOR_INPUTFIELD1_BACKGROUND;COLOR_INPUTFIELD2_TEXT;COLOR_INPUTFIELD2_BACKGROUND;CONT_WIDTH_SMALL;CONT_WIDTH_MIDDLE;CONT_WIDTH_LARGE;LOGO_MAXWIDTH;MENU_HEIGHT;TEXT_SIZE_SITE;LINE_HEIGHT_SITE;TEXT_SIZE_HEADER1;LINE_HEIGHT_HEADER1;TEXT_SIZE_HEADER2;LINE_HEIGHT_HEADER2;TEXT_SIZE_HEADER3;LINE_HEIGHT_HEADER3;TEXT_SIZE_MENU_TITLE;LINE_HEIGHT_MENU_TITLE;COLOR_MENU_TITEL_HOVER_TEXT;COLOR_MENU_TITEL_HOVER_BACKGROUND;COLOR_MENU_DROPDOWN_TEXT;COLOR_MENU_DROPDOWN_BACKGROUND;COLOR_MENU_DROPDOWN_HOVER_TEXT;COLOR_MENU_DROPDOWN_HOVER_BACKGROUND;TEXT_SIZE_MENU_DROPDOWN;LINE_HEIGHT_MENU_DROPDOWN
STANDARD;white;black;red;none;white;black;whiteblack,white,black,white,1000,1200,1440,35

@charset "utf-8";

/*CSS

Das Menü wird in diesem CSS ab 640 in ein Hamburger Menü gewechselt


FONTS:
Standardfont: font-family: FONTS_WEBSITE_MANAGED;
... ist im .body für das gesamte Dokument definiert

Die weiteren Schriftarten sind:
- text-mini: kleine Schriften
- text-grau: Im Footer


STRUKTUREN:
body enthält Grundstruktur der Site als Block = untereinander 
darunter wird für ein Zeileninhalt (Container) gesetzt, der Elemente (element) enthält 
Ab 700 Pixel werden Container die üblicherweise die Elemente horizontal anzeigen die Elemente untereinander anzeigen

BREIT MITTEL SCHMAL
als zweite Klasse können Zeilen in der Breite auf unterschiedliche Breiten festgelegt werden

HINTERGRUND
als zweite Klasse kann der Hintergrund von Elementen oder Containern festgelegt werden
es gibt hintergrund hintergrund1 hintergrund2  können im Content Manager ausgewählt werden


Sonstige Felder:
menudiv
inputfield, inputfield-hell: Eingabefelder
button, buttongrey: die Buttons zum Formular absenden


Bilder:
flagge - Rand nach rechts / oben

*/




INSERT_FONTS_FROM_FONTSMANAGER





/*Links im normalen Text - und im Menü*/

		body {
			display: block;
			justify-content: center;
			align-items: top;
			background-color: COLOR_WEBSITE_BACKGROUND;
			font-family: FONTS_WEBSITE_MANAGED;
			font-size: TEXT_SIZE_SITE;
			line-height: LINE_HEIGHT_SITE;
			color: COLOR_TEXT_ALL;
			margin: 0px;
			padding: 0px;
		}

		body a {
			color:COLOR_TEXT_LINKS;
			text-decoration:none;
			font-weight:600;
		}


		.element-content a {color: COLOR_TEXT_LINKS;}
		.element-content a:hover {color: COLOR_TEXT_ALL;}
		
	

/* BILDER */


		img {max-width:100%; height:auto; }
			
				
		imgelement {
			max-width: 1600px;
			height: auto;
			border-radius: 0px;
			background-color: #fff;
			text-align: center;   /*zentriert die Inhalte im element*/	
			margin: 5px;
			margin-right: 5px;
			}

		.flagge {
			padding-right: 0.2em;
			padding-top:0.2em;
			}

		.bildpc {
			height: auto;
			max-width: 1600px;
			border-radius: 5px;
			background-color: #fff;
			margin: auto;   /* nebeneinander im gleichen Abstand*/
			text-align: center;   /*zentriert die Inhalte im element*/
			margin-bottom:10px;
			}	

		.titelbildpc {
			height: auto;
			max-width: 1600px;
			border-radius: 5px;
			background-color: #fff;
			margin: auto;   /* nebeneinander im gleichen Abstand*/
			text-align: center;   /*zentriert die Inhalte im element*/
			margin-bottom:10px;
			}

		.imgrandlinks {
			border:16px solid;
			border-color:#000;
		}

		/*Nutzung: Galerien*/
		.floating-box-bilder {
			display: inline-block;
			text-align:center;	
			vertical-align:bottom;
			margin-left: 7px;
			margin-right: 7px;
			margin-bottom: 14px;
			}

		.galeriebild {
			max-width: 150px;
			vertical-align:bottom;
			margin: 0px;
			padding:0px;
			}


@media all and (min-width : 641px) {
		.bildmobil {display:none;}	
		.searchmobile {display:none;} 
		.mobilemenupic {display:none;}	
		.mobil {display:none;}	
		}



@media all and (max-width : 640px) {
		.bildpc {display:none;}	
		#bildpc {display:none;}	/*braucht das Menü*/
		.pc {display:none;}	
		
		
		.bildmobil {
			width: auto;
			height: auto;
			max-width: 1600px;
			border-radius: 5px;
			background-color: #fff;
			margin: auto;   /* nebeneinander im gleichen Abstand*/
			text-align: center;   /*zentriert die Inhalte im element*/
			margin-bottom:25px;	
			}	

		.input-checkbox {
		-webkit-appearance: none;
		border-radius: 0;
		}	

		.floating-box-bilder {
			margin-left: 3px;
			margin-right: 2px;
			margin-bottom: 2px;
			}

		.galeriebild {max-width: 140px;}
		}




/* um Zeilen/Container in der Breite zu definieren */
		.breit {
			max-width: CONT_WIDTH_LARGE;
		}

		.mittel {
			max-width: CONT_WIDTH_MIDDLE;
			margin:0px;
			padding:0px;
		}

		.schmal {
			max-width: CONT_WIDTH_SMALL;
		}




/* um text linksbündig zu setzen mit etwas Rand*/
		.links {
		text-align:left;
		margin-left:15px;
		margin-right:15px;
		}





/* CONTAINER für die Zeilen*/

		
		.container_overheader {
			/*ein Container der oberhalb des Bildes gezeigt wird, und beim scrollen nach unten verschwindet*/
			display: flex;
			justify-content: center;
			align-items: center;
			top:0;	
			width: auto;	
			min-height:28px;  /*sorgt bei schmalem Bildschirm dass die Zeile höher wird Zeilenumbruch*/
		/*	background-color: #000;*/
			margin: auto;   /* nebeneinander im gleichen Abstand*/
			text-align: center;   /*zentriert die Inhalte im element*/
		}

		.container_header {
			display: flex;
			justify-content: center;	
			align-items: center;
			background-color:COLOR_HEADER_BACKGROUND;
			top:0;  /*Abstand von oben */
			position:sticky; 
			width: auto;
			margin: auto;   /* nebeneinander im gleichen Abstand*/
			margin-bottom:15px; /*der größere Abstand ggf.*/
			/*text-align: center; */  /*zentriert die Inhalte im element*/
			z-index:500;
		}
		
@media all and (max-width : 640px) {
		.container_header  {
		
			margin-bottom:50px;}
		}		
	



		.element-menuleiste {
			display: flex;			/*um die Menüpunkte nach rechts zu verschieben display:block setzen*/
			justify-content: center;	
			align-items: center;
			font-family: FONTS_WEBSITE_MANAGED;
			width: 100%;
			height: auto;
			border-radius: 0px 0px 5px 5px;
			margin: auto;   /* nebeneinander im gleichen Abstand*/
			/*text-align: center; */  /*zentriert die Inhalte im element*/
			margin-bottom:5px;
		}		
		
		.navskills	{	
			font-family: FONTS_WEBSITE_MANAGED;
			max-width:100%;  /* Verkleinerung Inhalt möglich*/
			padding-bottom:20px; /*Abstand unter Menü*/
			font-size: 16px;   /*Schriftgröße Menüleiste*/
			margin-left: auto;  /*left und right auto zentriert Seite*/
			margin-right: auto;
			height: MENU_HEIGHTpx;		/*Höhe des Kastens in dem das Menü sitzt*/
			background-color: COLOR_MENU_TITEL_BACKGROUND;
			/*text-align: center; */  /*zentriert die Inhalte im element*/
		}	

		.menupunkt { 
			background: COLOR_MENU_TITEL_BACKGROUND;
			color: COLOR_MENU_TITEL_TEXT;		}   /*Hintergrund Menüpunkte ohne Untermenü*/
			
		/*.toggle { background: whitesmoke; }   /*Hintergrund Menüpunkte ohne Untermenü*/
							




		/* jede Zeile wird mit container_zeile oder container_zeile_horizontal eingeleitet*/
		/* container_zeile stellt elemente untereinander dar */
		/* container_zeile_horizontal stelle elemenete NEBENEINANDER dar*/
		/* große Bilder erhalten class bildpc oder bildmobil */
		/* Hintergrund wird mit zweiter class = xyz hintergrund gesetzt*/
		

		
		.container_zeile {
			display: block;
			justify-content: center;
			align-items: center;
			width: auto;
			margin: auto;   /* nebeneinander im gleichen Abstand*/
			margin-top:20px;
			padding-top:10px;
			/*text-align: center; */  /*zentriert die Inhalte im element*/
		}		


		.container_zeile_horizontal {
			display: flex;
			justify-content: center;
			align-items: top;
			width: auto;
			margin-left: auto;   /* nebeneinander im gleichen Abstand*/
			margin-right: auto;
		/*	margin-top:10px;*/ /*ausgeschaltet für über CMD eingestellt*/
			margin-bottom:0px;
			/*text-align: center;   zentriert die Inhalte im element*/
		}			

		@media all and (max-width : 700px) {
			.container_zeile_horizontal {display: block;width: 100%;}
			}
		

		.element-content {

			height: auto;
			width: 100%;
			/*max-width: 100%;*/
			border-radius: 0px;
			/*margin: auto;    nebeneinander im gleichen Abstand*/
			text-align: center;   /*zentriert die Inhalte im element*/
			margin-bottom:0px;
			
			margin-left: auto;   /* nebeneinander im gleichen Abstand*/
			margin-right: auto;
			margin-top:0px;
			margin-bottom:0px;
			
		}


		.element-content-links {
			max-width: 100%;
			border-radius: 0px;
			margin-left: auto;
			margin-right: auto;
			margin-top:0px;
			margin-bottom:0px;
			padding: 15px;
			box-sizing: border-box;  /* fasst Breite + padding + border zusammen*/
			text-align: left;   /*zentriert die Inhalte im element*/
		}
		


		.popup {
			position: fixed;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			width: 40%;           /* Hier einsetzen, was auch immer ihre wollt */
			height: 50%;          /* Ebenfalls einsetzen, was auch immer ihre wollt, wenn die Höhe überhaupt nötig ist */
			padding: 20px;  
			background: rgba(0,128,128, .8);
			color: white;
			text-align: center;
			box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
		}



		.container_footer {
			display: block;
			justify-content: center;
			align-items: center;
			width: auto;
			max-width: 1600px;
			min-heigt: 150px;
			margin: auto;   /* nebeneinander im gleichen Abstand*/
			margin-top:20px;
			margin-bottom:50px;
		
			clear:left;
			background-color:COLOR_FOOTER;
			padding-bottom:20px;
			padding-top:30px;
			text-align:center;
			width: 100%;
			}
				






/*SCHRIFTEN*/

			
		a.text-klein:link,visited,hover,current {
			color: red;
			font-size: 1.0em;
			text-decoration:none; }

		.text-mini  { 
			color: #000000;
			font-size: 0.8em;
			line-height: 1.4em; }

		h1, h2, h3, h4, h5, h6 {
			margin: 0px;
			padding: 0px;
		}

		h1 { 
			font-weight: 700;
			line-height: LINE_HEIGHT_HEADER1;
			font-size: TEXT_SIZE_HEADER1; 
		}
		
		h2 { 
			font-weight: 700;
			line-height: LINE_HEIGHT_HEADER2;
			font-size: TEXT_SIZE_HEADER2; 
		}


		h4, h5, h6 {
			font-weight: 200;
			font-size:14px;
			line-height:16px;
		}



		h3 { 
			line-height: LINE_HEIGHT_HEADER3;
			font-size: TEXT_SIZE_HEADER3; 
			font-weight: 100;
			/*margin: .67em 0;*/
		}

		h3 a { color: COLOR_TEXT_LINKS; }


		footer .text-grau  { 
			color: COLOR_TEXT_ALL;
			font-size: 1.0em; }
			
	


@media all and (max-width : 640px) {
	


		h1 { 
			font-weight: bold;
			line-height: LINE_HEIGHT_HEADER1;
			font-size: TEXT_SIZE_HEADER1; 
		}


		h2 { 
			font-weight: bold;
			line-height: LINE_HEIGHT_HEADER2;
			font-size: TEXT_SIZE_HEADER2; 
		}


		h4, h5, h6 {
			font-weight: 200;
			font-size:14px;
			line-height:14px;
		}



		h3 { 
			font-weight: 300;
			line-height: LINE_HEIGHT_HEADER3;
			font-size: TEXT_SIZE_HEADER3; 
			/*margin: .67em 0;*/
		}

		h3 a { color: COLOR_TEXT_LINKS; }
	
	}



















		.inputfield {
		color: COLOR_INPUTFIELD1_TEXT;
		font-size: 13px;
		font-family: FONTS_WEBSITE_MANAGED;
		background-color: COLOR_INPUTFIELD1_BACKGROUND;
		padding: 5px;
		margin-top:15px;
		border: 2px;
		border-style:solid;
		border-color: COLOR_INPUTFIELD1_TEXT;
		border-radius: 6px 6px 6px 6px;
		}

		.inputfieldhell {
		color: COLOR_INPUTFIELD2_TEXT;
		font-size: 13px;
		font-family: FONTS_WEBSITE_MANAGED;
		background-color: COLOR_INPUTFIELD2_BACKGROUND;
		padding: 5px;
		margin-top:15px;
		border: 1px;
		border-style:solid;
		border-color: COLOR_INPUTFIELD2_TEXT;
		border-radius: 6px 6px 6px 6px;
		}
	 



		.buttonsubmit {
		color: COLOR_WEBSITE_BACKGROUND;
		font-size: 13px;
		font-family: FONTS_WEBSITE_MANAGED;
		font-weight: 600;
		background-color: COLOR_MENU_TITEL_TEXT;
		padding: 10px;
		margin-top: 5px;
		border: 1px;
		border-style: solid;
		border-color: COLOR_MENU_TITEL_TEXT;
		border-radius: 8px 8px 8px 8px;
		}


		.button {
		color: COLOR_MENU_TITEL_TEXT;
		font-size: 15px;
		font-family: FONTS_WEBSITE_MANAGED;
		background-color: COLOR_MENU_TITEL_BACKGROUND;
		padding: 5px;
		margin-top:20px;
		cursor: pointer;
		border: 1px;
		border-color:COLOR_MENU_TITEL_TEXT;
		border-style:solid;
		border-radius: 6px 6px 6px 6px;
		}

		.button a {
		color: #fff;
		}

		.buttongrey {
		color: #fff;
		font-size: 15px;
		font-family: FONTS_WEBSITE_MANAGED;
		background-color: #666666;
		padding: 5px;
		margin-top:20px;
		cursor: pointer;
		border: 1px;
		border-style:solid;
		border-radius: 6px 6px 6px 6px;
		}

		.buttongrey a {
		color: #fff;
		}

	.checkbox {
		display:none;
		}



		#container {
		  margin: 0 auto;
		  max-width: 390px;
		}


		p { text-align: left; }


		.toggle, [id^=drop] {
		 display: none;
		}


/* MENÜ */
/* Um die Höhe der Menüinhalte zu ändern alle Punkte mit 40 oder -40 abändern*/

nav {
	display: block;
  margin: 0;
  padding: 0;
   font-size: TEXT_SIZE_MENU_TITLE;   /*Schriftgröße Menüleiste*/
   line-height: LINE_HEIGHT_MENU_TITLE;   /*Höhe der Zeile*/
  background-color: #fff; /*Hintergrund Menüleiste*/
}



nav a {
  display: block;
  padding: 0 20px; /*Abstand der Menüpunkte*/
  color: COLOR_MENU_TITEL_TEXT;
  background: COLOR_MENU_TITEL_BACKGROUND; 
  font-size: TEXT_SIZE_MENU_TITLE;    
  line-height: LINE_HEIGHT_MENU_TITLE;   
  font-weight: 300;  
  text-decoration: none;
}

nav a:hover {background-color: COLOR_MENU_TITEL_HOVER_BACKGROUND; color:COLOR_MENU_TITEL_HOVER_TEXT;} 


#logo {
  display: block;
  padding-left: 30px;
  padding-right: 30px;
  float: left;
  max-width: LOGO_MAXWIDTH;
}



#picture {
  display: block;
  padding: 5px;
  float: left;
  line-height: 40px;
}

#text {
  display: block;
  padding: 5px;
  max-width: 100%;
  float: left;
  font-size: 54px;
  line-height: 22px;
}


nav:after {
  content: "";
  display: table;
  /*font-size: 24px;  */
  clear: both;
}

nav ul {
  float: right;
  color: #666;
  padding: 0;
  margin: 0;
  list-style: none;
  position: relative;
}

nav ul li {
  margin: 0px;
  display: inline-block;
  float: left;
  background-color: COLOR_MENU_TITEL_BACKGROUND;
}


nav ul li ul li:hover {background-color: COLOR_MENU_DROPDOWN_HOVER_BACKGROUND; color:COLOR_MENU_DROPDOWN_HOVER_TEXT;}



.umenupunkt	 {
  display: block;	 
  background-color: COLOR_MENU_DROPDOWN_BACKGROUND;
  padding: 0 20px;
  color: COLOR_MENU_DROPDOWN_TEXT;
  font-size: TEXT_SIZE_MENU_DROPDOWN;    
  line-height: LINE_HEIGHT_MENU_DROPDOWN;
  text-decoration: none;
  border: none;
}


.umenupunkt:hover {
  background-color: COLOR_MENU_DROPDOWN_HOVER_BACKGROUND;
  color: COLOR_MENU_DROPDOWN_HOVER_TEXT;
}

nav ul ul {
  display: none;
  position: absolute;
  top: 40px;
}

nav ul li:hover > ul { display: inherit;   font-size: TEXT_SIZE_MENU_DROPDOWN;    
  line-height: LINE_HEIGHT_MENU_DROPDOWN;background-color: COLOR_MENU_DROPDOWN_HOVER_BACKGROUND; color:COLOR_MENU_DROPDOWN_HOVER_TEXT;   }

nav ul ul li {
  width: 200px;
  float: none;
  display: list-item;
  position: relative;
}

nav ul ul ul li {
  position: relative;
  top: -40px;
  left: 170px;
}

li > a:after { content: ' '; }  /* hier ein PLUS einfügen wenn beim MEnü eines gezeigt werden soll*/

li > a:only-child:after { content: ''; }





/* Media Queries  FUER DAS MENÜ
--------------------------------------------- */


@media all and (max-width : 640px) {

#logo {
  display: none;
  padding: 0;
  width: 100%;
  text-align: center;
  float: none;
}

nav { margin: 0; }

.menupunkt	 {
  display: block;	 
  background-color: COLOR_MENU_TITEL_BACKGROUND;
  padding: 0 20px;
  color: COLOR_MENU_TITEL_TEXT;
  font-size: 18px;
  line-height: 60px;
  text-decoration: none;
  border: none;
}



.toggle + a,
 .menu { display: none; }

.toggle {
  display: block;	 
  background-color: COLOR_MENU_TITEL_BACKGROUND;
  padding: 0 20px;
  color: COLOR_MENU_TITEL_TEXT;
  font-size: 18px;
  line-height: 60px;
  text-decoration: none;
  border: none;
}

.toggle:hover {  background-color: COLOR_MENU_TITEL_BACKGROUND; }



[id^=drop]:checked + ul { display: block; }

nav ul li {
  display: block;
  width: 100%;
}

nav ul ul .toggle,
 nav ul ul a { padding: 0 40px;  background-color: COLOR_MENU_TITEL_BACKGROUND; }

nav ul ul ul a { padding: 0 80px; }

nav a:hover,
 nav ul ul ul a { 
 background-color: COLOR_MENU_TITEL_BACKGROUND; 
 color: COLOR_MENU_TITEL_TEXT;  
 font-size: 18px;}

nav ul li ul li .toggle,
 nav ul ul a { 
 background-color: COLOR_MENU_TITEL_BACKGROUND; 
 color: COLOR_MENU_TITEL_TEXT;  
 font-size: 16px;}

nav ul ul {
  float: none;
  position: static;
  color: COLOR_MENU_TITEL_BACKGROUND;
}

nav ul ul li:hover > ul,
nav ul li:hover > ul { display: none; }

nav ul ul li {
  display: block;
  width: 100%;
}

nav ul ul ul li { position: static;

}
}

@media all and (max-width : 330px) {

nav ul li {
  display: block;
  width: 94%;
}

}









/* ZUSÄTZLICHE FEATURES */


/* MARQUEE Laufschriften können mit div id = marquee class marquee eingefügt werden */


.marquee {
	max-width: 100vw; /* iOS braucht das */
	white-space: nowrap;
	overflow: hidden;
	/* hier evtl. noch font-size, color usw. */
}

.marquee span {
	display: inline-block;
	padding-left: 105%; /* die zusätzlichen 5% erzeugen einen verzögerten Start und vermeiden so ein Ruckeln auf langsamen Seiten */
	animation: marquee 10s linear infinite;
}

/* Optional: mouseover (oder Tipp auf dem Touchscreen) pausiert die Laufschrift */
.marquee span:hover {
	animation-play-state: paused 
}

/* Make it move */
@keyframes marquee {
	0%   { transform: translateX(0); }
	100% { transform: translateX(-100%); }
}