@charset "utf-8";

/*CSS

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


FONTS:
Standardfont: font-family: Montserrat, Verdana, sans-serif;
... 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

*/




/* montserrat-regular - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/montserrat-v25-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('./fonts/montserrat-v25-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('./fonts/montserrat-v25-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('./fonts/montserrat-v25-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('./fonts/montserrat-v25-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('./fonts/montserrat-v25-latin-regular.svg#Montserrat') format('svg'); /* Legacy iOS */
}

/* montserrat-700 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: url('./fonts/montserrat-v25-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('./fonts/montserrat-v25-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('./fonts/montserrat-v25-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('./fonts/montserrat-v25-latin-700.woff') format('woff'), /* Modern Browsers */
       url('./fonts/montserrat-v25-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('./fonts/montserrat-v25-latin-700.svg#Montserrat') format('svg'); /* Legacy iOS */
}

/* montserrat-italic - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 400;
  src: url('./fonts/montserrat-v25-latin-italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('./fonts/montserrat-v25-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('./fonts/montserrat-v25-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('./fonts/montserrat-v25-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('./fonts/montserrat-v25-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('./fonts/montserrat-v25-latin-italic.svg#Montserrat') format('svg'); /* Legacy iOS */
}

/* montserrat-700italic - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 700;
  src: url('./fonts/montserrat-v25-latin-700italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('./fonts/montserrat-v25-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('./fonts/montserrat-v25-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('./fonts/montserrat-v25-latin-700italic.woff') format('woff'), /* Modern Browsers */
       url('./fonts/montserrat-v25-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('./fonts/montserrat-v25-latin-700italic.svg#Montserrat') format('svg'); /* Legacy iOS */
}






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

		body {
			display: block;
			justify-content: center;
			align-items: top;
			background-color: white;
			font-family: Montserrat, Verdana, sans-serif;
			font-size: 15px;
			line-height: 24px;
			color: black;
			margin: 0px;
			padding: 0px;
		}

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


		.element-content a {color: #b4d05b;}
		.element-content a:hover {color: black;}
		
	

/* 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: 100%;
		}

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

		.schmal {
			max-width: 800px;
		}




/* 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:white;
			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: Montserrat, Verdana, sans-serif;
			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 {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 24px;
			width: 100%;
			max-width: 100%;
			min-height: 75px;
			margin: 0 auto;
			padding: 10px clamp(22px, 3vw, 52px);
			box-sizing: border-box;
			font-family: Montserrat, Verdana, sans-serif;
			font-size: 13px;
			background-color: white;
			position: relative;
		}	

		.menupunkt { 
			background: white;
			color: #33363b;		}   /*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:white;
			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: 36px;
			font-size: 30px; 
		}
		
		h2 { 
			font-weight: 700;
			line-height: 32px;
			font-size: 25px; 
		}


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



		h3 { 
			line-height: 26px;
			font-size: 18px; 
			font-weight: 100;
			/*margin: .67em 0;*/
		}

		h3 a { color: #b4d05b; }


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


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


		h1 { 
			font-weight: bold;
			line-height: 36px;
			font-size: 30px; 
		}


		h2 { 
			font-weight: bold;
			line-height: 32px;
			font-size: 25px; 
		}


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



		h3 { 
			font-weight: 300;
			line-height: 26px;
			font-size: 18px; 
			/*margin: .67em 0;*/
		}

		h3 a { color: #b4d05b; }
	
	}



















		.inputfield {
		color: #33363b;
		font-size: 13px;
		font-family: Montserrat, Verdana, sans-serif;
		background-color: white;
		padding: 5px;
		margin-top:15px;
		border: 2px;
		border-style:solid;
		border-color: #33363b;
		border-radius: 6px 6px 6px 6px;
		}

		.inputfieldhell {
		color: #33363b;
		font-size: 13px;
		font-family: Montserrat, Verdana, sans-serif;
		background-color: white;
		padding: 5px;
		margin-top:15px;
		border: 1px;
		border-style:solid;
		border-color: #33363b;
		border-radius: 6px 6px 6px 6px;
		}
	 



		.buttonsubmit {
		color: white;
		font-size: 13px;
		font-family: Montserrat, Verdana, sans-serif;
		font-weight: 600;
		background-color: #33363b;
		padding: 10px;
		margin-top: 5px;
		border: 1px;
		border-style: solid;
		border-color: #33363b;
		border-radius: 8px 8px 8px 8px;
		}


		.button {
		color: #33363b;
		font-size: 15px;
		font-family: Montserrat, Verdana, sans-serif;
		background-color: white;
		padding: 5px;
		margin-top:20px;
		cursor: pointer;
		border: 1px;
		border-color:#33363b;
		border-style:solid;
		border-radius: 6px 6px 6px 6px;
		}

		.button a {
		color: #fff;
		}

		.buttongrey {
		color: #fff;
		font-size: 15px;
		font-family: Montserrat, Verdana, sans-serif;
		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Ü
------------------------------------------------------------ */

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

.navskills,
.navskills * {
	box-sizing: border-box;
}

.navskills a {
	text-decoration: none;
}

#logo {
	flex: 0 0 auto;
	width: auto;
	max-width: 60px;
	margin: 0;
	padding: 0;
	background: transparent !important;
}

#logo img {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: calc(75px - 20px);
	height: auto;
	padding: 0;
	margin: 0;
}

.logo-link {
	display: block;
	padding: 0;
	margin: 0;
	line-height: 0;
	background: transparent !important;
}

.logo-link:hover {
	background: transparent !important;
	text-decoration: none;
}

.navskills > .menu {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: nowrap;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
	position: relative;
}

.navskills > .menu > li {
	display: block;
	position: relative;
	margin: 0;
	padding: 0;
	background-color: white;
}

.navskills .menupunkt,
.navskills > .menu > li > a {
	display: flex;
	align-items: center;
	min-height: 35px;
	padding: 0 16px;
	color: #33363b;
	background-color: white;
	font-size: 13px;
	line-height: 1.2;
	font-weight: 300;
	white-space: nowrap;
	border-radius: 4px;
	transition:
		color .18s ease,
		background-color .18s ease;
}

.navskills .menupunkt:hover,
.navskills > .menu > li > a:hover,
.navskills > .menu > li:focus-within > a {
	color: #b4d05b;
	background-color: white;
}

.navskills ul ul {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1000;
	min-width: 220px;
	margin: 0;
	padding: 6px 0;
	list-style: none;
	background-color: white;
	border: 1px solid rgba(0, 0, 0, .08);
	border-radius: 8px;
	box-shadow: 0 14px 34px rgba(0, 0, 0, .14);
}

.navskills li:hover > ul,
.navskills li:focus-within > ul {
	display: block;
}

.navskills ul ul li {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	position: relative;
}

.navskills .umenupunkt,
.navskills ul ul a {
	display: block;
	width: 100%;
	padding: 11px 16px;
	color: black;
	background-color: white;
	font-size: 12px;
	line-height: 13px;
	font-weight: 400;
	white-space: normal;
	border: 0;
}

.navskills .umenupunkt:hover,
.navskills ul ul a:hover,
.navskills ul ul li:focus-within > a {
	color: #b4d05b;
	background-color: white;
}

.navskills ul ul ul {
	top: -6px;
	left: calc(100% + 6px);
}

/*
 * Die letzten Hauptmenüpunkte öffnen ihre Untermenüs nach links innen.
 * So ragen breite Dropdowns nicht über den rechten Bildschirmrand hinaus.
 */
.navskills > .menu > li:nth-last-child(-n+3) > ul {
	left: auto;
	right: 0;
}

/*
 * Verschachtelte Untermenüs in den letzten Menüpunkten ebenfalls
 * nach links öffnen.
 */
.navskills > .menu > li:nth-last-child(-n+3) ul ul {
	left: auto;
	right: calc(100% + 6px);
}

.menu-cart {
	margin-left: 10px !important;
}

.menu-cart-link {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	min-height: 40px !important;
	padding: 0 15px !important;
	border-radius: 999px !important;
	background: #33363b !important;
	color: white !important;
	font-weight: 600 !important;
	white-space: nowrap;
}

.menu-cart-link:hover {
	opacity: .9;
}

.menu-protected,
.menu-protected:visited,
.menu-protected:hover,
.menu-protected:focus {
	color: #d00000 !important;
}

/* Mobilmenü ab 960 px, damit lange Übersetzungen nicht kollidieren */
@media all and (max-width : 960px) {

	.navskills {
		display: block;
		min-height: 0;
		padding: 0;
		max-width: 100%;
	}

	#logo {
		display: none;
	}

	.togglemenu {
		display: block;
		width: 100%;
		margin: 0;
		padding: 0;
		cursor: pointer;
		background-color: white;
	}

	.mobilemenupic {
		display: block;
		width: 100%;
		line-height: 0;
	}

	.mobilemenupic img {
		display: block;
		width: 100%;
		height: auto;
	}

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

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

	.navskills > .menu {
		width: 100%;
		margin: 0;
		padding: 0;
		background-color: white;
	}

	.navskills > .menu > li {
		display: block;
		width: 100%;
	}

	.navskills .menupunkt,
	.navskills > .menu > li > a,
	.toggle {
		display: block;
		width: 100%;
		min-height: 0;
		padding: 0 20px;
		color: #33363b;
		background-color: white;
		font-size: 18px;
		line-height: 60px;
		font-weight: 400;
		border-radius: 0;
	}

	.toggle {
		cursor: pointer;
	}

	.navskills ul ul {
		display: none;
		position: static;
		width: 100%;
		min-width: 0;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}

	.navskills li:hover > ul,
	.navskills li:focus-within > ul {
		display: none;
	}

	.navskills ul ul .toggle,
	.navskills ul ul a,
	.navskills .umenupunkt {
		padding: 0 40px;
		color: black;
		background-color: white;
		font-size: 16px;
		line-height: 52px;
		border-radius: 0;
	}

	.navskills ul ul ul a {
		padding-left: 70px;
	}

	.menu-cart {
		margin-left: 0 !important;
	}

	.menu-cart-link {
		display: flex !important;
		margin: 10px 20px 16px;
		justify-content: center;
	}

}

@media all and (max-width : 380px) {
	.navskills .menupunkt,
	.navskills > .menu > li > a,
	.toggle {
		padding-left: 15px;
		padding-right: 15px;
		font-size: 17px;
	}
}









/* 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%); }
}