/* Allgemein ================================================================== */

:root {
  --bgcol-form: 		   rgba(0,0,0,0.5);  	/* Hintergrundfarbe Kontaktformular */
  --bordercol-form: 	   #aaa;				/* Farbe des Rahmens um das Kontaktformular */
  --footer-color:		   #666;				/* Farbe der Schrift im Footer */
  --color-list-item:       white;				/* Farbe eines Listen-Punktes */ 
  --color-main-text:	   #666;				/* Textfarbe */ 
  --color-background:	   white;				/* Hintegrundfarbe gesamte Website */
  --color-menuitem:		   #00CED1;				/* Farbe aktive Menuepunkte und Footer */
  --color-menuitem-hoover: #999;				/* Farbe aktive Menuepunkte und Footer Hoover*/
  --color-title: 		   rgb(0,140,198);		/* Farbe Überschriften */
  --button-font-size:      100.01%;				/* Schriftgrösse in Buttons */
}

/*       height 102% to force a scrollbar to prevent page jumping */
html { height:102%; margin: 0 0 0 0; padding:0 0 0 0; scroll-behavior: smooth !important; }
@media (max-width: 838px)  { html { height:100%;} }

/* * {margin:0;padding:0;} */
* {margin:0;}
* {padding-top:0; padding-right:0; padding-bottom:0; }

#background { width:100%; height:100%; position: absolute; z-index: -1; top: 0; left:0; }
#adminbar {visibility:hidden;height:25px;position:fixed;z-index:105;top:0;}
#preload { display: none; }
#preload img {
	height: 0; width: 0; border: none;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: -30;
}

/*
@font-face {
	font-family:	'arial-black';
	src: url("../site_fonts/arial-black.eot");
	src: url("../site_fonts/arial-black.otf") format("opentype");
	src: url("../site_fonts/arial-black.eot?#iefix") format('embedded-opentype'), 
		 url("../site_fonts/arial-black.woff") format("woff"),
	     url("../site_fonts/arial-black.ttf") format("truetype");
}
*/

.wichtig,.getinfo,.hide { display:none !important; }
.show    		{ display:block; }
.block   		{ text-align:justify; }
.bold    		{ font-weight: bold; }
.normal			{ font-weight: normal; }
.italic 		{ font-style:italic; }
.red     		{ color: red; }
.green     		{ color: green; }
.black   		{ color: black; }
.white			{ color: white; }
.blue			{ color: blue; }
.paypalblue		{ color: rgb(0,69,124); } /* Paypal blue */
.sbig    		{ font-size: 110.01%; }
.errmsg			{ color: #b5124b; font-weight: bold; }
.grad      img 	{ height: 13px; width: 19px; border: 0; z-index: 0;}
body[id="Administration"] #maincont_inner .errmsg { display:none; }
body[id="Administration"] #maincont_inner div.textblock .errmsg { display:block; }
.okmsg			{ color: green;   font-weight: bold; }
.filefmt		{ color: black;   font-weight: normal; font-style:italic; }
.aboutright  	{ border: 0px solid blue; width:300px;margin-left:430px; }
.aboutright2 	{ border: 0px solid blue; width:400px;margin-left:330px; }
.aboutright3 	{ border: 0px solid blue; width:500px;margin-left:230px; }
.tright  	 	{ text-align:right; }

.eeven		 	{ background-color:#eeeeee; }
.thbg           { background-color:#dddddd;padding-left:10px; }
.delfile        { width:600px; border: 0px solid blue;  }
.upld           { width:400px; border: 0px solid blue;  }
.outlined 		{ border: 2px solid #6F6F6F; }
.frame_left,   .left    				 {  text-align:left;    float:left; 	margin: 15px 20px 20px  0px;}
.frame_right,  .right, .frame_right_mob  { 	text-align:right;   float:right;	margin: 15px  0px 20px 20px;}
.frame_center, .center  				 { 	text-align:center;             		margin: 15px  0px 20px  0px;}

input#country[readonly] {
  background: #f8f7ff !important;
  color: #888 !important;
}



@media (max-width: 838px) {.frame_right_mob { text-align:left;   float:left; margin: 15px 0px 20px 0px;}} 
#map_canvas { width:50%;height:300px; }
@media (max-width: 838px) { #map_canvas { width:100%;height:300px; }}

body {
     	margin:  	0;
        padding: 	0;
		font:   	90.01% Verdana, arial, helvetica, sans-serif;
		color:  	var(--color-main-text);
		background-color: var(--color-background); 
        text-align: center;
}


div {	text-align: left; /* text-align:center wieder aufheben, damit DIV-Inhalte linksbündig ausgerichtet sind */}

h1, h2, h3 	{font-weight: normal; background-color:transparent;color: var(--color-title); /*dunkelgrau*/ font-family: Verdana, arial, helvetica, sans-serif; }
h1			{font-size: 140.01%; font-size: 2.25em; letter-spacing: .1em; ;padding-bottom:15px; font-weight:600; padding-top:20px; text-transform: uppercase; letter-spacing: 1.5px!important;}
h2			{font-size: 130.01%; font-size: 1.75em; letter-spacing: .2em; line-height: 2;text-transform: uppercase;}
h3			{font-size: 110.01%; padding-bottom:7px; letter-spacing: .2em; }
h4			{font-size: 110.01%; padding-bottom:7px; letter-spacing: .1em; color:black; font-weight:600;}
a 			{background-color:transparent;color:rgb(0,140,198); outline: none; font-weight: normal; }
p 			{margin-bottom:  15px;	}
img 			{border: 0; }
ul > li::marker	{color:var(--color-list-item);} 
br 			{clear: left;}
@media (max-width: 904px) { h1 {font-size:2.05em; } h2 {font-size:1.35em; }}
@media (max-width: 565px) { h1 {font-size:1.35em; } h2 {font-size:1.25em; }}
@media (max-width: 390px) { h1 {font-size:1.15em; } h2 {font-size:1.05em; }}
@media (max-width: 325px) { h1 {font-size:1.1em; }  h2 {font-size:1.0em; }}



#container { margin: 0 auto; margin-top: 0px; background: transparent;}


* html #container {height:1%; }
#scroll { font-size: 1px; }

.gesamt_breite_aussen { width: 1024px;        min-width: 320px; }
.dynamic .gesamt_breite_aussen { width:  100%; min-width: 320px;}


.inner_width      		  { width: 924px; }  /* innerer Platz des Containers: gesamt_breite_aussen - rahmen dicke */
.dynamic .inner_width { width: 90%;  }
@media (max-width: 910px)  {.dynamic .inner_width { width: 100%;  }}


/* ############################ [Rahmen-Definitionen] ######################### */
/* Rahmen: Breite */
/* hier rahmen breite links und rechts einstellen */
.left_border_width   { margin-left:  0px; }		
.right_border_width { margin-right: 0px; }
.border_high 		{ height: 0px; }
.border_corner_width{ width:  0px; }
 



#wrap_header_area {}
#wrap_main_and_left { background-color: var(--color-background); border: 0px solid #dddddd;}

/* clearfix zum Aufheben der Floatumgebung */
.clearfix:after {
	content: 	".";
	display: 	block;
	height: 	0;
	clear: 		both;
	visibility: 	hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

.header_mid_high { height: 150px; }
#header1 {position:fixed;width:100%; background-color:rgb(0,140,198);z-index:90;} /* gleiche Farbe wie body color */
nav {height:150px;} /* um den header zu kompensieren */
body[id="Startseite"] .header_mid_high { height:0;}

/* für Startseite und Slideshow als Abstandhalter, gleiche Werte Höhe wie aus index.php  400, 320, 220 */
body[id="Startseite"] nav {height:400px; background-color:#666;}        /* den 666 Hintergrund sieht man, wenn die Seite lädt oder JS abgeschaltet ist */
@media (max-width: 990px)  {body[id="Startseite"] nav {height:320px;}}  /* siehe dazu auch site_no_script.css */
@media (max-width: 640px)  {body[id="Startseite"] nav {height:220px;}}



div.langswitch {
		position:		fixed;
        right:			0;
		top:			5px;
        padding:		3px 8px;
		font-size:		80%;
        text-align:		right;
        border:       	0px solid white;
        float:			right;
        display:		inline;
		background:     transparent url(../images/transp_grey.png) left top repeat-x; 
		z-index:		99;
}

a.langswitch     		{ display: inline; outline: none;}
a.langswitch 	       	{color: #7d7d7d; text-decoration:none; font-weight: bold;outline: none;}
a.langswitch:hover    {color: #2D5EAE; /* blue */	 text-decoration:none; font-weight: bold;}
.spact, .spact:hover {color: #9d9d9d; text-decoration:none; font-weight: bold; text-transform: lowercase;cursor:default;}
.spact  {background: transparent url(../images/transp_grey.png) left top repeat-x;z-index:5;}

img.langswitch  { position:relative;float:left;padding-left:5px;border:0; }
.DE { background: transparent url(../images/DE.gif) left top no-repeat; position:relative;width:19px;height:13px;display:inline;}.EN { background: transparent url(../images/EN.gif) left top no-repeat; position:relative;width:19px;height:13px;display:inline;}.RU { background: transparent url(../images/RU.gif) left top no-repeat; position:relative;width:19px;height:13px;display:inline;}.IT { background: transparent url(../images/IT.gif) left top no-repeat; position:relative;width:19px;height:13px;display:inline;}



#headerrinc__ {
		position:	relative;
		margin-left: 	 60px;
        width:		157px;
        height:		261px;
        z-index:	44;
        border: 	0px solid yellow;
        float:		left;
}

#logo, #slogo {  
		background: transparent url(../site_images/raute-gd-schwarz.png) center top no-repeat;
		position:	fixed;
		left: calc(50% - 25px);
		top:		0px;
		width:		50px;
		height:		75px;
		background-size:    50px 75px;
		z-index:	91;
		-webkit-filter: drop-shadow(-2px 5px 5px #222);
		filter: drop-shadow(-2px 5px 5px #222)
}
#logo:hover {filter: drop-shadow(-2px 2px 15px #fff);}
#schrift {  
		position: 	fixed;
		top: 		10px;
		bottom: 	0px;
		right: 		0px;
		width: 		500px;
		height: 	50px;
		border: 	0px solid red;
		z-index: 	91;
		left: 		calc(50% - 250px);
		text-align: center;
		color:		white;
		-webkit-filter: drop-shadow(-2px 3px 3px #222);
		filter: 	drop-shadow(-2px 3px 3px #222);
		font:   	42px  Verdana, arial, helvetica, sans-serif;
}
body[id="Startseite"] #schrift {position:absolute;}
@media (max-width: 500px)  { #schrift {width: 460px;left: calc(50% - 230px);} }
@media (max-width: 460px)  { #schrift {font-size: 35px; width: 400px;left: calc(50% - 200px);} }
@media (max-width: 400px)  { #schrift {font-size: 30px; width: 360px;left: calc(50% - 180px);} }

#statusbar, #statusbar1 {   /* Statusbar, optional */
		position: 			relative;
        height:				25px;
        background-color:	red;
        font-size:			14px;
        font-weight:    	bold;
        color:				white;
        border-top:			2px solid black;
        border-bottom:		2px solid black;
                      	  /* oben rechts unten links */
		padding:	      	3px 20px 1px 20px;
        overflow:			hidden;
        clear:				both;
}

		/* mleft (18) + menubar (822) + mright (186) = mwrap (1026) px */	
		
#mwrap {		
		background: 		rgba(0,0,0,0.45) url(../site_images/head-grafik-3.jpg) center top no-repeat;
		height:				90px; 
		clear: 				both; 
		overflow: 			hidden; 
		border-top: 		2px solid rgb(214,247,239);  
		border-bottom: 		2px solid rgb(0,140,198);  
		top:				30px;
		z-index:			90;
		width:				100%;
		position:			fixed;
}
body[id="Startseite"] #mwrap {background-image: none;}


#mleft, #mright   { 	background-color:	transparent;}
#menubar, #menubar2, #menubar_leer {     /* menubar: Menu */
		position: 			relative;
        border:0; padding:0;
        border-top: 		0px solid gray;
        background-color: 	transparent;
        font-size:			0px;
}


#menubar2, #menubar_leer  {	background-color: 	transparent; }
#menubar { padding-right:16%; padding-left:16%; padding-top:25px; height:65px;}
@media (max-width: 1080px)  {#menubar { padding-right:5%; padding-left:5%; }}


#mainbox {
        border:0; margin:0; padding:0;
        height:  			100%;
        background-color: 	transparent;
}

#contents {
        overflow:			hidden;
        padding:			0;
        margin: 			0;    /* 3-COLUMN */
        z-index:			4;
		width:				100%;
}
#inner { height:1%;} /* to avoid the IE6 3 pixel jog bug - sonst ist text nach float um 3px versetzt */

/* ######### begin: 3-column design main area */
/* column container */
.colmask {
	position:	relative;	/* This fixes the IE7 overflow hidden bug */
	clear:		both;
	float:		left;
	width:		100%;		/* width of whole page */
	overflow:	hidden;		/* This chops off any overhanging divs */
	z-index:	5;
}
/* common column settings */
.colright,
.colmid,
.colleft {
	float:		left;
	width:		100%;		/* width of page */
	position:	relative;
}
.maincont,
.lfa,
.rechts {
	float:		left;
	position:	relative;
	padding:	0 0 1em 0;  /* no left and right padding on columns, we just make them narrower instead 
								only padding top and bottom is included here, make it whatever value you need */
	overflow:	hidden;
}
.lfa, .maincont, #maincont_inner { z-index:4; top:0px; }


/* Basis von: http://matthewjamestaylor.com/blog/perfect-3-column.htm */
/* 3 Column settings */
.threecol {
	background:var(--color-background);		/* right column background colour */
}
body[id="login"] .threecol, body[id="Administration"] .threecol { background:white; }

/* Attention: the colum setting is found in the followings files:

lfa.css		- 2 columns, left:15%, middle: 85%, right:0%
no_lfa.css	- 1 column,  left:0%,  middle:100%, right:0%
3col.css	- 3 columns, left:15%, middle: 70%, right:15% (this layout is not used)
*/
/* column setting for the 3col case */
.colmid  { background:var(--color-background);	/* center column background colour */ }
body[id="login"] .colmid, body[id="Administration"] .colmid { background:white; }
.threecol .colmid {
	right:16%;			/* width of the right column */
}
body[id="Startseite"] .threecol .colmid { /* andere LFA Breite, individuell o.a. */ }
body[id^="Shop_x_x"] .threecol .colmid {right:0;}
body[id="basket"] .threecol .colmid {right:0;}
body[id="datainput"] .threecol .colmid {right:0;}
body[id="checkout"] .threecol .colmid {right:0;}
body[id="receipt"] .threecol .colmid {right:0;}
@media (max-width: 838px)  {.threecol .colmid {right:0;}}


.threecol .colleft {
	right:68%;			/* width of the middle column */
	background:var(--color-background);		/* left column background colour */
	border-right: 0px solid #bbb;
}
body[id="login"] .threecol .colleft, body[id="Administration"] .threecol .colleft { background:white; }
body[id^="Shop_x_x"] .threecol .colleft {right:100%;}
body[id="basket"] .threecol .colleft {right:100%;}
body[id="datainput"] .threecol .colleft {right:100%;}
body[id="checkout"] .threecol .colleft {right:100%;}
body[id="receipt"] .threecol .colleft {right:100%;}
@media (max-width: 838px)  {.threecol .colleft {right:100%;}}


.threecol .maincont {
	width:68%;	/* width of center column content (column width minus padding on either side) */
	left:100%;	/* 100% plus left padding of center column */
}
body[id^="Shop_x_x"] .threecol .maincont {width:100%;}
body[id="basket"] .threecol .maincont {width:100%;}
body[id="datainput"] .threecol .maincont {width:100%;}
body[id="checkout"] .threecol .maincont {width:100%;}
body[id="receipt"] .threecol .maincont {width:100%;}
@media (max-width: 838px)  {.threecol .maincont {width:100%;}}


.threecol .lfa {
	width:16%;	/* Width of left column content (column width minus padding on either side) */
	left:16%;	/* width of (right column) plus (center column left and right padding) plus 
			  (left column left padding) */
}
body[id^="Shop_x_x"] .threecol .lfa {width:0;left:0;}
body[id="basket"] .threecol .lfa {width:0;left:0;}
body[id="datainput"] .threecol .lfa {width:0;left:0;}
body[id="checkout"] .threecol .lfa {width:0;left:0;}
body[id="receipt"] .threecol .lfa {width:0;left:0;}
@media (max-width: 838px)  {.threecol .lfa {width:0;left:0;}}


.threecol .rechts {
	width:16%;	/* Width of right column content (column width minus padding on either side) */
	left:84%;	/* Please make note of the brackets here:
			(100% - left column width) plus (center column left and right padding) plus 
			(left column left and right padding) plus (right column left padding) */
}
body[id^="Shop_x_x"] .threecol .rechts {width:0;left:100%;}
body[id="basket"] .threecol .rechts {width:0;left:100%;}
body[id="datainput"] .threecol .rechts {width:0;left:100%;}
body[id="checkout"] .threecol .rechts {width:0;left:100%;}
body[id="receipt"] .threecol .rechts {width:0;left:100%;}
@media (max-width: 838px)  {.threecol .rechts {width:0;left:100%;}}

/* ######### end: 3-column design main area */


#maincont_inner { 
	position:	relative; 
	margin: 	0 auto;
	height:		100%;
	width:		100%;    /* if #lfa_ctl:3%, then here 97% */
	float:		left;
	padding: 	0;
	display:	inline-block;
	border: 	0px solid green;
	color:  	var(--color-main-text);
}


div.textblock,  div.textblock2, div.smid {
             	  /* oben rechts unten links */
		margin:	      10px 25px 20px 25px;
		display:      block;
		padding:      0;
		text-align:   left;   /* wegen Anna */
		-webkit-hyphens:  auto;
		-moz-hyphens: 	  auto;
		-ms-hyphens: 	  auto;
		-o-hyphens: 	  auto;
		hyphens: 	  	  auto;
}
@media (max-width: 530px) {div.textblock { margin: 10px 5px 20px 5px;}}
div.textblock2 {  margin: 10px 0px 20px 0px; }
div.textblock2 ul, div.textblock ul {
        line-height: 			1.5em;
		text-indent: 			2px;
		list-style-position: 	outside;
		/*list-style-type: 		disc;*/
        margin-left:			15px;
}
div.textblock2 h2, div.textblock h2 { padding-bottom: 10px; padding-top: 15px; }








/* Menue Definitionen ========================================================= */

/* Es gibt insgesamt 4 Menue-Arten: 
	1) Hauptmenu, oben, horizontal 																							==> (mainnav)
	2) 2.Menue-Ebene, oben, horizontal, direkt unter Hauptmenue (wird zur Zeit nicht benutzt) 								==> (mainnav2)
	3) 3.Menue-Ebene, links, wird als Submenue benutzt, wenn Hauptmenue horizontal ist										==> (menu)
	4) komplettes Accordeon-Menue links, beinihaltet Hauptmenue + Submenue (3.Ebene), hierfür gibt es 2 Anwendungsfaelle: 	==> (cssmenu)
			A) in menu.php als 'mobiles Menue'
			B) fuer Webseiten mit vertikalem Menue
*/

/* ###################### Menue oben, Hauptmenue ################### */
/*.menubar_height   { height:	25px;  }  */
/* .menu_item_width  { width: 	19%; } */ /* innere_width dividiert durch Anzahl der Menuepunkte, z.B. 800/5=160 */
div.mainnav, div.mainnav2 {
		position:		relative;
        padding-top:	3px;
        padding-bottom:	0px;
        margin-right:  	0px;
		margin-left: 	0px;
        overflow:		hidden;
        font-size:		16px;
        border:			0;
		display: 		flex;
		justify-content: center;
		align-items: 	center;
}
@media (max-width: 838px)  {div.mainnav {justify-content:left;}}


/* Menue oben + 2.Ebene  */
a.mainnav, a.mainnav2, #nav10  {
            /* oben rechts unten links */
        margin: 0px    0      0px     0;
				  /* oben/unten links/rechts */
		padding:  		8px      0px;
        font-size:		16px;
        font-weight:	normal;
        font-family: 	veranda,Arial, Helvetica, sans-serif;
		font-family: 	Trebuchet MS, veranda, Arial, Helvetica, sans-serif;
        text-align: 	center;
        text-decoration:none;
        color:			white;
        border: 		0px solid black;
        float:			left;
        display: 		inline;
		outline: 		none;
		text-transform:	uppercase;
}

a.mainnav, #nav10 { top: 0px; 	
	margin-left:  5px;  /* sorgt für gleichen Abstand */
	margin-right: 5px;
}

a.mainnav { top: 0px; }
a.mainnav:link,
a.mainnav:visited {
		background-color: 	transparent;
        border-top:    		0px solid #000066;
        border-bottom: 		0px solid #000066;
}
#nav10:hover, a.mainnav:hover {   border: 0px solid red; color: var(--color-menuitem-hoover); cursor:pointer;}
#nav10 {user-select:none;}


a.mainnav2 {
		padding-bottom:	4px;
		padding-top:	25px;
		width: 			auto;
		font-size:		100.01%;
		float:			right;
		font-weight:	normal;
		color:			black;  
}

a.mainnav2:link,
a.mainnav2:visited {
		background-color: 	transparent;
        border-top:    		0px solid #000066;
        border-bottom: 		0px solid #000066;
}
a.mainnav2:hover {   background-color: transparent; border: 0px solid black; color: var(--color-menuitem-hoover); /* orange */ }

/* Menue-Tags, Ebene 1, oben - wenn selected */
#menu			 						#nav10 a,
body[id^="Startseite"]	#nav11 a, 
body[id^="Wir_ueber_uns"]	#nav12 a,
body[id^="Service"]	#nav13 a,
body[id^="Projekte"]	#nav14 a,
body[id^="Shop"]	#nav15 a,
body[id^="Veranstaltungen"]	#nav16 a,
body[id^="Kontakt"]	#nav17 a,
body[id^="dummy02"]	#nav18 a,
body[id^="dummy02"]	#nav19 a,
body[id^="dummy02"]	#nav110 a
{
		 color:				var(--color-menuitem); /* DarkTurquoise */
         background-color: 	transparent;
		 cursor:			default;
         float:				left;
}
#nav10 {
		display:			none;
		height:				30px;

}



@media (max-width: 838px)  { span[id^="nav1"]  {display:none;} span[id^="lnav"]  {display:none;} #nav10 {display:inline;}  }

#mobnav10 {display:none;}
.mainnav #menu0 {padding-left:35px;}

/* Menue-Tags, Ebene 2, oben - wenn selected */
#dummy #dummnav
{
         color: 			#2D5EAE;   /* blau */
         background-color: 	transparent;
         cursor:			default;
         /*width: 			170px;*/
         float:				right;
}



/* ######################### Menue links, Submenue ########################## */
a.menu {
        font-family: 		veranda, Arial, Helvetica, sans-serif;
        text-align: 		right;
        text-decoration:	none;
        font-weight:		normal;
        display: 			block;
		outline: 			none;		
		padding: 			10px;
        color: 				rgb(99,99,99);			
		font-size: 			13px;
		text-transform:		capitalize;
		text-overflow:  	ellipsis;
		overflow:			hidden;
		white-space:		nowrap;
		
		background-color:   #efefef;
		background-image: 	     linear-gradient(to right, #efefef 0%, white 100%);
		background-image: 	-webkit-linear-gradient(right, #efefef 0%, white 100%);		
		margin: 3px 10px 3px 10%;
		
   -moz-transition-property:all;
   -moz-transition-duration:500ms;
-webkit-transition-property:all;
-webkit-transition-duration:500ms;
	 -o-transition-property:all;
	 -o-transition-duration:500ms;
	-ms-transition-property:all;
	-ms-transition-duration:500ms;
		transition-property:all;
		transition-duration:500ms;

}
.left_sub {margin-top:80px;position:fixed;width:16%;} /* breite wie linke spalte */
body[id^="Shop_x_x"] .left_sub {display:none;}
body[id="basket"] .left_sub {display:none;}
.vis_no,.vis_no span, a.vis_no {height:0 !important;font-size:0;padding:0; }
.vis_,.vis_ span, a.vis_ {height:0 !important;font-size:0;padding:0; }
a.eodd     	{ background: #f4f4f4; 	border:0; border-bottom: 1px solid #e0e0e0;}
a.eeven 	{ background: #fff; 	border:0; border-bottom: 1px solid #e0e0e0;}          
a.menu:hover {  color:black;background-color: rgb(214,247,239)}


/* Menue-Tags (Ebene 2 oder 3), links - wenn selected */
#Wir_ueber_uns_x_xGerman_Division #lnav01 a,
#Wir_ueber_uns_x_xsub51 #lnav02 a,
#Wir_ueber_uns_x_xsub52 #lnav03 a,
#Wir_ueber_uns_x_xsub53 #lnav04 a,
#Wir_ueber_uns_x_xsub54 #lnav05 a,
#Wir_ueber_uns_x_xsub55 #lnav06 a,
#Wir_ueber_uns_x_xsub56 #lnav07 a,
#Wir_ueber_uns_x_xsub57 #lnav08 a,
#Wir_ueber_uns_x_xsub58 #lnav09 a,
#Wir_ueber_uns_x_xsub59 #lnav10 a,
#Wir_ueber_uns_x_xsub60 #lnav11 a,
#Wir_ueber_uns_x_xsub61 #lnav12 a,
#Wir_ueber_uns_x_xsub62 #lnav13 a,
#Wir_ueber_uns_x_xsub63 #lnav14 a,
#Wir_ueber_uns_x_xsub64 #lnav15 a,
#Wir_ueber_uns_x_xsub65 #lnav16 a,
#Wir_ueber_uns_x_xsub66 #lnav17 a,
#Wir_ueber_uns_x_xsub67 #lnav18 a,
#Wir_ueber_uns_x_xsub68 #lnav19 a,
#Wir_ueber_uns_x_xsub69 #lnav20 a,
#Wir_ueber_uns_x_xsub70 #lnav21 a,
#Wir_ueber_uns_x_xsub71 #lnav22 a,
#Wir_ueber_uns_x_xsub72 #lnav23 a,
#Wir_ueber_uns_x_xsub73 #lnav24 a,
#Wir_ueber_uns_x_xsub74 #lnav25 a,
#Wir_ueber_uns_x_xsub75 #lnav26 a,
#Wir_ueber_uns_x_xsub76 #lnav27 a,
#Wir_ueber_uns_x_xsub77 #lnav28 a,
#Wir_ueber_uns_x_xsub78 #lnav29 a,
#Wir_ueber_uns_x_xsub79 #lnav30 a,
#Wir_ueber_uns_x_xsub80 #lnav31 a,
#Wir_ueber_uns_x_xsub81 #lnav32 a,
#Wir_ueber_uns_x_xsub82 #lnav33 a,
#Wir_ueber_uns_x_xsub83 #lnav34 a,
#Wir_ueber_uns_x_xsub84 #lnav35 a,
#Wir_ueber_uns_x_xsub85 #lnav36 a,
#Wir_ueber_uns_x_xsub86 #lnav37 a,
#Wir_ueber_uns_x_xsub87 #lnav38 a,
#Wir_ueber_uns_x_xsub88 #lnav39 a,
#Wir_ueber_uns_x_xsub89 #lnav40 a,
#Wir_ueber_uns_x_xsub90 #lnav41 a,
#Wir_ueber_uns_x_xsub91 #lnav42 a,
#Wir_ueber_uns_x_xsub92 #lnav43 a,
#Wir_ueber_uns_x_xsub93 #lnav44 a,
#Wir_ueber_uns_x_xsub94 #lnav45 a,
#Wir_ueber_uns_x_xsub95 #lnav46 a,
#Wir_ueber_uns_x_xsub96 #lnav47 a,
#Wir_ueber_uns_x_xsub97 #lnav48 a,
#Wir_ueber_uns_x_xsub98 #lnav49 a,
#Wir_ueber_uns_x_xsub99 #lnav50 a,
#Service_x_xUeberblick #lnav01 a,
#Service_x_xsub101 #lnav02 a,
#Service_x_xsub102 #lnav03 a,
#Service_x_xsub103 #lnav04 a,
#Service_x_xsub104 #lnav05 a,
#Service_x_xsub105 #lnav06 a,
#Service_x_xsub106 #lnav07 a,
#Service_x_xsub107 #lnav08 a,
#Service_x_xsub108 #lnav09 a,
#Service_x_xsub109 #lnav10 a,
#Service_x_xsub110 #lnav11 a,
#Service_x_xsub111 #lnav12 a,
#Service_x_xsub112 #lnav13 a,
#Service_x_xsub113 #lnav14 a,
#Service_x_xsub114 #lnav15 a,
#Service_x_xsub115 #lnav16 a,
#Service_x_xsub116 #lnav17 a,
#Service_x_xsub117 #lnav18 a,
#Service_x_xsub118 #lnav19 a,
#Service_x_xsub119 #lnav20 a,
#Service_x_xsub120 #lnav21 a,
#Service_x_xsub121 #lnav22 a,
#Service_x_xsub122 #lnav23 a,
#Service_x_xsub123 #lnav24 a,
#Service_x_xsub124 #lnav25 a,
#Service_x_xsub125 #lnav26 a,
#Service_x_xsub126 #lnav27 a,
#Service_x_xsub127 #lnav28 a,
#Service_x_xsub128 #lnav29 a,
#Service_x_xsub129 #lnav30 a,
#Service_x_xsub130 #lnav31 a,
#Service_x_xsub131 #lnav32 a,
#Service_x_xsub132 #lnav33 a,
#Service_x_xsub133 #lnav34 a,
#Service_x_xsub134 #lnav35 a,
#Service_x_xsub135 #lnav36 a,
#Service_x_xsub136 #lnav37 a,
#Service_x_xsub137 #lnav38 a,
#Service_x_xsub138 #lnav39 a,
#Service_x_xsub139 #lnav40 a,
#Service_x_xsub140 #lnav41 a,
#Service_x_xsub141 #lnav42 a,
#Service_x_xsub142 #lnav43 a,
#Service_x_xsub143 #lnav44 a,
#Service_x_xsub144 #lnav45 a,
#Service_x_xsub145 #lnav46 a,
#Service_x_xsub146 #lnav47 a,
#Service_x_xsub147 #lnav48 a,
#Service_x_xsub148 #lnav49 a,
#Service_x_xsub149 #lnav50 a,
#Projekte_x_xUeberblick #lnav01 a,
#Projekte_x_xsub151 #lnav02 a,
#Projekte_x_xsub152 #lnav03 a,
#Projekte_x_xsub153 #lnav04 a,
#Projekte_x_xsub154 #lnav05 a,
#Projekte_x_xsub155 #lnav06 a,
#Projekte_x_xsub156 #lnav07 a,
#Projekte_x_xsub157 #lnav08 a,
#Projekte_x_xsub158 #lnav09 a,
#Projekte_x_xsub159 #lnav10 a,
#Projekte_x_xsub160 #lnav11 a,
#Projekte_x_xsub161 #lnav12 a,
#Projekte_x_xsub162 #lnav13 a,
#Projekte_x_xsub163 #lnav14 a,
#Projekte_x_xsub164 #lnav15 a,
#Projekte_x_xsub165 #lnav16 a,
#Projekte_x_xsub166 #lnav17 a,
#Projekte_x_xsub167 #lnav18 a,
#Projekte_x_xsub168 #lnav19 a,
#Projekte_x_xsub169 #lnav20 a,
#Projekte_x_xsub170 #lnav21 a,
#Projekte_x_xsub171 #lnav22 a,
#Projekte_x_xsub172 #lnav23 a,
#Projekte_x_xsub173 #lnav24 a,
#Projekte_x_xsub174 #lnav25 a,
#Projekte_x_xsub175 #lnav26 a,
#Projekte_x_xsub176 #lnav27 a,
#Projekte_x_xsub177 #lnav28 a,
#Projekte_x_xsub178 #lnav29 a,
#Projekte_x_xsub179 #lnav30 a,
#Projekte_x_xsub180 #lnav31 a,
#Projekte_x_xsub181 #lnav32 a,
#Projekte_x_xsub182 #lnav33 a,
#Projekte_x_xsub183 #lnav34 a,
#Projekte_x_xsub184 #lnav35 a,
#Projekte_x_xsub185 #lnav36 a,
#Projekte_x_xsub186 #lnav37 a,
#Projekte_x_xsub187 #lnav38 a,
#Projekte_x_xsub188 #lnav39 a,
#Projekte_x_xsub189 #lnav40 a,
#Projekte_x_xsub190 #lnav41 a,
#Projekte_x_xsub191 #lnav42 a,
#Projekte_x_xsub192 #lnav43 a,
#Projekte_x_xsub193 #lnav44 a,
#Projekte_x_xsub194 #lnav45 a,
#Projekte_x_xsub195 #lnav46 a,
#Projekte_x_xsub196 #lnav47 a,
#Projekte_x_xsub197 #lnav48 a,
#Projekte_x_xsub198 #lnav49 a,
#Projekte_x_xsub199 #lnav50 a,
#Shop_x_xUeberblick #lnav01 a,
#Shop_x_xsub201 #lnav02 a,
#Shop_x_xsub202 #lnav03 a,
#Shop_x_xsub203 #lnav04 a,
#Shop_x_xsub204 #lnav05 a,
#Shop_x_xsub205 #lnav06 a,
#Shop_x_xsub206 #lnav07 a,
#Shop_x_xsub207 #lnav08 a,
#Shop_x_xsub208 #lnav09 a,
#Shop_x_xsub209 #lnav10 a,
#Shop_x_xsub210 #lnav11 a,
#Shop_x_xsub211 #lnav12 a,
#Shop_x_xsub212 #lnav13 a,
#Shop_x_xsub213 #lnav14 a,
#Shop_x_xsub214 #lnav15 a,
#Shop_x_xsub215 #lnav16 a,
#Shop_x_xsub216 #lnav17 a,
#Shop_x_xsub217 #lnav18 a,
#Shop_x_xsub218 #lnav19 a,
#Shop_x_xsub219 #lnav20 a,
#Shop_x_xsub220 #lnav21 a,
#Shop_x_xsub221 #lnav22 a,
#Shop_x_xsub222 #lnav23 a,
#Shop_x_xsub223 #lnav24 a,
#Shop_x_xsub224 #lnav25 a,
#Shop_x_xsub225 #lnav26 a,
#Shop_x_xsub226 #lnav27 a,
#Shop_x_xsub227 #lnav28 a,
#Shop_x_xsub228 #lnav29 a,
#Shop_x_xsub229 #lnav30 a,
#Shop_x_xsub230 #lnav31 a,
#Shop_x_xsub231 #lnav32 a,
#Shop_x_xsub232 #lnav33 a,
#Shop_x_xsub233 #lnav34 a,
#Shop_x_xsub234 #lnav35 a,
#Shop_x_xsub235 #lnav36 a,
#Shop_x_xsub236 #lnav37 a,
#Shop_x_xsub237 #lnav38 a,
#Shop_x_xsub238 #lnav39 a,
#Shop_x_xsub239 #lnav40 a,
#Shop_x_xsub240 #lnav41 a,
#Shop_x_xsub241 #lnav42 a,
#Shop_x_xsub242 #lnav43 a,
#Shop_x_xsub243 #lnav44 a,
#Shop_x_xsub244 #lnav45 a,
#Shop_x_xsub245 #lnav46 a,
#Shop_x_xsub246 #lnav47 a,
#Shop_x_xsub247 #lnav48 a,
#Shop_x_xsub248 #lnav49 a,
#Shop_x_xsub249 #lnav50 a,
#Veranstaltungen_x_xUeberblick #lnav01 a,
#Veranstaltungen_x_xsub251 #lnav02 a,
#Veranstaltungen_x_xsub252 #lnav03 a,
#Veranstaltungen_x_xsub253 #lnav04 a,
#Veranstaltungen_x_xsub254 #lnav05 a,
#Veranstaltungen_x_xsub255 #lnav06 a,
#Veranstaltungen_x_xsub256 #lnav07 a,
#Veranstaltungen_x_xsub257 #lnav08 a,
#Veranstaltungen_x_xsub258 #lnav09 a,
#Veranstaltungen_x_xsub259 #lnav10 a,
#Veranstaltungen_x_xsub260 #lnav11 a,
#Veranstaltungen_x_xsub261 #lnav12 a,
#Veranstaltungen_x_xsub262 #lnav13 a,
#Veranstaltungen_x_xsub263 #lnav14 a,
#Veranstaltungen_x_xsub264 #lnav15 a,
#Veranstaltungen_x_xsub265 #lnav16 a,
#Veranstaltungen_x_xsub266 #lnav17 a,
#Veranstaltungen_x_xsub267 #lnav18 a,
#Veranstaltungen_x_xsub268 #lnav19 a,
#Veranstaltungen_x_xsub269 #lnav20 a,
#Veranstaltungen_x_xsub270 #lnav21 a,
#Veranstaltungen_x_xsub271 #lnav22 a,
#Veranstaltungen_x_xsub272 #lnav23 a,
#Veranstaltungen_x_xsub273 #lnav24 a,
#Veranstaltungen_x_xsub274 #lnav25 a,
#Veranstaltungen_x_xsub275 #lnav26 a,
#Veranstaltungen_x_xsub276 #lnav27 a,
#Veranstaltungen_x_xsub277 #lnav28 a,
#Veranstaltungen_x_xsub278 #lnav29 a,
#Veranstaltungen_x_xsub279 #lnav30 a,
#Veranstaltungen_x_xsub280 #lnav31 a,
#Veranstaltungen_x_xsub281 #lnav32 a,
#Veranstaltungen_x_xsub282 #lnav33 a,
#Veranstaltungen_x_xsub283 #lnav34 a,
#Veranstaltungen_x_xsub284 #lnav35 a,
#Veranstaltungen_x_xsub285 #lnav36 a,
#Veranstaltungen_x_xsub286 #lnav37 a,
#Veranstaltungen_x_xsub287 #lnav38 a,
#Veranstaltungen_x_xsub288 #lnav39 a,
#Veranstaltungen_x_xsub289 #lnav40 a,
#Veranstaltungen_x_xsub290 #lnav41 a,
#Veranstaltungen_x_xsub291 #lnav42 a,
#Veranstaltungen_x_xsub292 #lnav43 a,
#Veranstaltungen_x_xsub293 #lnav44 a,
#Veranstaltungen_x_xsub294 #lnav45 a,
#Veranstaltungen_x_xsub295 #lnav46 a,
#Veranstaltungen_x_xsub296 #lnav47 a,
#Veranstaltungen_x_xsub297 #lnav48 a,
#Veranstaltungen_x_xsub298 #lnav49 a,
#Veranstaltungen_x_xsub299 #lnav50 a,

#dumm     #dummxx a
{ 
		 color: 			#00CED1; /* DarkTurquoise */
         cursor:			default;
		 font-weight:		bold;
		 background-color:  rgb(214,247,239);

}

/* ######################### Menue links, Accordeon-Menue ########################## */
/* design of left jquery accordeon menu ==> Gesamtmenü, welche links genutzt wird für menu.php und für verticales Seitemenü */
/* design ist ähnlich wie linkes Menü bei horizontalen Seiten */
#cssmenu 	{ width: 100%;}
#cssmenu,
#cssmenu ul,
#cssmenu li,
#cssmenu a {
  margin: 			0;
  padding: 			0;
  border: 			0;
  list-style: 		none;
  font-weight: 		normal;
  text-decoration: 	none;
  line-height: 		1;
  font-size: 		14px;
  position: 		relative;
}
#cssmenu a 	{ 
	line-height: 1.3;
	
   -moz-transition-property:all;
   -moz-transition-duration:500ms;
-webkit-transition-property:all;
-webkit-transition-duration:500ms;
	 -o-transition-property:all;
	 -o-transition-duration:500ms;
	-ms-transition-property:all;
	-ms-transition-duration:500ms;
		transition-property:all;
		transition-duration:500ms;
}

#cssmenu > ul > li > a {
  padding-right: 	40px;
  font-size: 		25px;
  font-weight: 		bold;
  display: 			block;
  background: 		rgb(0,165,198);	/* noch dunkleres rot von 'Nummern-Box', rechts im 1st level menu */
  color: 			white;
  border-bottom: 	1px solid #5e071b; /* dunkles lila, Linie unten 1st level menu */
  text-transform: 	uppercase;
  position: 		relative;
}
#cssmenu > ul > li > a > span {
  background: 		rgb(0,140,198); 	/* dunkles rot, left 1st level menu */
  padding: 			10px;
  display: 			block;
  font-size: 		13px;
  font-weight: 		300;
}
#cssmenu > ul > li > a:hover 		{ text-decoration: none; }
#cssmenu > ul > li > a > span:hover 	{ color:black; background-color: rgb(214,247,239);  /* altrosa fuer hover, 1st level menu */ }
#cssmenu > ul > li.active 			{ border-bottom: none; }
#cssmenu > ul > li.active > a 		{ color: white; }
#cssmenu > ul > li.active > a span 	{ background: rgb(0,165,198); /* dunkleres rot, wie Nummern-Box */ }
#cssmenu span.cnt {
  position: 		absolute;
  top: 				8px;
  right: 			15px;
  padding: 			0;
  margin: 			0;
  background: 		none;
}

#cssmenu ul ul 	{ display: none; background-color:#ddd;}
#cssmenu ul ul li 	{	border: 1px solid #e0e0e0;	border-top: 0;}
#cssmenu ul ul a {
  padding: 			10px;
  display: 			block;
  color: 			rgb(0,140,198);	/* dunkles rot, wie von left 1st level menu */
  font-size: 		13px;
  text-transform:	capitalize;
}
#cssmenu ul ul a:hover 	{ color: white; background-color: rgb(214,247,239); /* altrosa fuer hover, 2nd level menu */ }
#cssmenu ul ul li.odd 	{ background: #f4f4f4; }
#cssmenu ul ul li.even 	{ background: white; }

body[id^="Startseite"]	#mobnav11 > span, 
body[id^="Wir_ueber_uns"]	#mobnav12 > span,
body[id^="Service"]	#mobnav13 > span,
body[id^="Projekte"]	#mobnav14 > span,
body[id^="Shop"]	#mobnav15 > span,
body[id^="Veranstaltungen"]	#mobnav16 > span,
body[id^="Kontakt"]	#mobnav17 > span,
body[id^="dummy02"]	#mobnav18 > span,		/* Achtung: hier irgendwo noch impressum + datenschutz eintragen statt dummy02 */
body[id^="dummy02"]	#mobnav19 > span,
body[id^="dummy02"]	#mobnav110 > span
{
		color:			#EEA2AD; /* LightPink2 */	 
		cursor:			default;
		background: 	rgb(0,165,198); /* dunkleres rot, wie Nummern-Box */
}




/*sphider search*/
.ssearchbox { 
	position:relative;
	height:39px;
	width:185px;
	border:0px solid red; 
	padding-top:12px; 
	padding-left:42px; 
	cursor:pointer;
	
}

.input1 {
		color:white;
		font-size: 14px;
		line-height: 1.5;
		border: 0px solid black;
		background-color: #777777;
}


/* die Class 'button' wird auch im CMS verwendet, nicht nur auf der Website selbst */
.ui-dialog-buttonset .ui-button, .ui-dialog-buttonset .ui-button:hover,
.button, .button:hover {
    border: 			none;
    padding: 			2px 8px;
    width:				180px;
	height:				35px;
    text-align:			center;
    font-size: 			var(--button-font-size);
	color: 				white !important;
	background-image: 	linear-gradient(to bottom, #2e434f 0%, #4a6c7f 100%) !important;
	background-image: 	-webkit-linear-gradient(top, #2e434f 0%, #4a6c7f 100%) !important;
	border-radius: 		5px !important;
	border: 			1px solid #dadae5 !important;
}
.ui-widget .ui-widget { font-size: var(--button-font-size) !important; }

.ui-dialog-buttonset .ui-button:hover,
.button:hover {
	background-image: 	linear-gradient(to top,    #2e434f 0%, #afc4d0 100%) !important;
	background-image: 	-webkit-linear-gradient(bottom, #2e434f 0%, #afc4d0 100%) !important;	
	cursor:				pointer;
	font-weight:		400;
}
.ui-dialog-buttonset .ui-button:active, .ui-dialog-buttonset .ui-button:focus,
.button:active, .button:focus {
	background-image: 	linear-gradient(to top,    #2e434f 0%, #66a3ff 100%) !important;
	background-image: 	-webkit-linear-gradient(bottom, #2e434f 0%, #66a3ff 100%) !important;
	color: #ccc;
}
.button::-moz-focus-inner {border: 1px dotted transparent;}


/* column classes for markdown tables */
.mrktab   { width:800px; border-spacing: 5px; margin-left:5%; }
.colcl_0 { width:20%; }
.colcl_1 { width:80%; }

/* alignment for markdown tables */
.align_left { text-align:left; }
.align_right { text-align:right; }
.align_center { text-align:center; }


/* contact form */
.cont_form form { background-color: var(--bgcol-form); margin: 10px auto; width: 90%; }
.cont_form > noscript > p { color: #b5124b; font-weight: bold; }
@media (max-width: 948px) { .cont_form form   {width:100%; } }

#myForm fieldset {
  border: 			2px solid var(--bordercol-form);
  min-width:		290px;
  background-color: var(--bgcol-form);
  position: 		relative;
  margin: 			0;
  padding:			5px;
  border-radius: 	5px;
}
#myForm fieldset .fbody 	{ background-color : transparent; padding: 22px; margin: 15px 0 0; }
#myForm fieldset.okmsg2  	{ border: 2px solid #99CC00;}
#myForm fieldset.errmsg2 	{ border: 2px solid #FF8181;}
#myForm legend 				{ background-color:transparent;position : absolute;}
#myForm ol 					{ list-style-type: none; margin: 0; padding: 0; }
#myForm li  				{ float: left;  padding: 0; width:100%; }
#myForm li.last 			{ float: none; clear: both; text-align: center; }

#myForm label {
  display:		block;
  cursor: 		pointer;
  font-weight: 	bold;
  line-height: 	24px;
  text-align: 	left;
}
#myForm  input[id='company'], 		#myForm  input[id='phone'],		#myForm  input[id='phone_wide'],
#myForm  input[id='firstname'], 	#myForm  input[id='lastname'],	
#myForm input[id='captcha'],
#myForm  input[id='address'], 	#myForm  input[id='email'],
#myForm  input[id='fupld'],
#myForm textarea {
  background-color: #fff;
  color: 			#4d4d4d;
  border: 			1px solid #c4c4c4;
  font: 			13px Helvetica, Arial, "Nimbus Sans L", FreeSans, sans-serif;
  padding: 			5px 8% 5px 2%;
  width:			90%;
  border-radius: 	5px;
  box-shadow: 		2px 2px 5px #e2e2e2, inset 2px 2px 5px #e2e2e2;
}
#myForm textarea { overflow:auto;}
#myForm input.valid, #myForm textarea.valid { 
	border-color: 	#99CC00; /* green */
	box-shadow: 	1px 1px 3px #99CC00, inset 1px 1px 3px #99CC00;
	background: 	#fff url(../images/tick.png) 98% 3px no-repeat;
}
#myForm  input[id='company'].valid, #myForm  input[id='phone'].valid, #myForm  input[id='phone_wide'].valid, #myForm  input[id='firstname'].valid, #myForm  input[id='lastname'].valid, #myForm  input[id='fupld'].valid {background-position: 97% 3px;}
#myForm input.error, #myForm textarea.error { 
	border-color: 	#FF8181; /* red */
	box-shadow: 	1px 1px 3px #FF8181, inset 1px 1px 3px #FF8181;
	background: 	#fff url(../images/wrong.png) 98% 3px no-repeat;
}
#myForm label.error { color: #c50a1f; /* red */ font-weight:normal; padding:0;margin:0; width:89%;float:left; line-height: 12px; font-size:10px; overflow:hidden;white-space:nowrap;}
#myForm label[id='datenschutz-error'].error {float:none; width:auto;}
#myForm label[id='datenschutz-error'].valid {float:left !important; }
#dslink {text-decoration:none;color:green; font-weight:bold;}
#myForm  input[id='company'].error, #myForm  input[id='phone'].error, #myForm  input[id='phone_wide'].error, #myForm  input[id='firstname'].error, #myForm  input[id='lastname'].error, #myForm  input[id='fupld'].error  {background-position: 97% 3px;}

#myForm  input[id='company']:focus,		#myForm  input[id='phone']:focus,	#myForm  input[id='phone_wide']:focus,
#myForm  input[id='firstname']:focus, 	#myForm  input[id='lastname']:focus,
#myForm input[id='captcha']:focus,
#myForm  input[id='address']:focus, 	#myForm  input[id='email']:focus,
#myForm  input[id='fupld']:focus, 		#myForm  textarea:focus { 
	border-color: 	#3399FF;  /* blue */
	box-shadow: 	1px 1px 3px #3399FF, inset 1px 1px 3px #3399FF;
	background-image: none;
}
#myForm  input[id='company'], 		#myForm  input[id='phone'],		#myForm  input[id='phone_wide'],
#myForm label[for='company'], 		#myForm label[for='phone'],		#myForm label[for='phone_wide'],
#myForm  input[id='firstname'], 	#myForm  input[id='lastname'],
#myForm label[for='firstname'], 	#myForm label[for='lastname']	{width:90%;}
#myForm li[id='comp'],  #myForm li[id='phon'],
#myForm li[id='fname'], #myForm li[id='lname']  	{width:49%;}
#myForm input[id='captcha'] {width:60px;position:relative;float:left;}
#myForm label[for='captcha'] {clear:both;padding-top:5px;}
#myForm li[id='phon'], #myForm li[id='lname'] 	{padding-left:2%;}

@media (max-width: 948px) {
	#myForm li,
	#myForm li[id='comp'],  #myForm li[id='phon'],
	#myForm li[id='fname'], #myForm li[id='lname']
		{width:90%;padding:0px 8% 0px 2%;min-width:270px;}
}

.place_holder1 {width:1%;height:24px;}
.place_holder2 {width:1%;height:65px;}

/* fileupload form */
.fileUpload {
	background: 			rgb(38, 115, 38);
	background: -webkit-linear-gradient(167deg, rgba(151,242,121,1) 0%, rgba(12,156,15,1) 27%, rgba(18,145,21,1) 37%, rgba(2,28,2,1) 73%);
	background: -moz-linear-gradient(167deg, rgba(151,242,121,1) 0%, rgba(12,156,15,1) 27%, rgba(18,145,21,1) 37%, rgba(2,28,2,1) 73%);
	background: -o-linear-gradient(167deg, rgba(151,242,121,1) 0%, rgba(12,156,15,1) 27%, rgba(18,145,21,1) 37%, rgba(2,28,2,1) 73%);
	background: linear-gradient(167deg, rgba(151,242,121,1) 0%, rgba(12,156,15,1) 27%, rgba(18,145,21,1) 37%, rgba(2,28,2,1) 73%);
	-webkit-border-radius: 	7px;
	-moz-border-radius: 	7px;
	border-radius: 			7px;
	color: 					#ccc;
	font-size: 				1em;
	text-transform:			uppercase;
	font-weight: 			bold;
	margin: 				1.25em auto;/*20px/16px 0*/
	margin-left:			0;
	overflow: 				hidden;
	padding: 				8px 20px;
	position: 				relative;
	text-align: 			center;
	width: 					max-content;
    cursor: 				pointer;
	border:					2px solid #ccc;
	-webkit-transition: 	2s;  
    -moz-transition: 		2s;  
    -o-transition: 			2s; 
	transition:				2s;
}
.fileUpload:hover, .fileUpload:active, .fileUpload:focus {
	background: 	rgb(51, 153, 51);
	background: 	-webkit-linear-gradient(167deg, rgba(81,200,42,1) 10%, rgba(47,99,48,1) 29%, rgba(2,28,2,1) 63%, rgba(20,212,20,1) 93%);
	background: 	-moz-linear-gradient(167deg, rgba(81,200,42,1) 10%, rgba(47,99,48,1) 29%, rgba(2,28,2,1) 63%, rgba(20,212,20,1) 93%);
	background: 	-o-linear-gradient(167deg, rgba(81,200,42,1) 10%, rgba(47,99,48,1) 29%, rgba(2,28,2,1) 63%, rgba(20,212,20,1) 93%);
	background: 	linear-gradient(167deg, rgba(81,200,42,1) 10%, rgba(47,99,48,1) 29%, rgba(2,28,2,1) 63%, rgba(20,212,20,1) 93%);
	cursor: 		pointer;
	color:			white;
	border:			2px solid white;
	box-shadow: 	inset 0 0 20px 1px #00a7d1; 
}
.fileUpload #fupld2 {
    position: 		absolute;
    top: 			0;
    right: 			0;
    margin: 		0;
    padding: 		0;
    font-size: 		20px;
    cursor: 		pointer;
    opacity: 		0;
    filter: 		alpha(opacity=0);
    width: 			148px;
    height: 		46px;
	cursor: 		pointer;
}

input[type="file"] {
    position: 		fixed;
    right: 			100%;
    bottom: 		100%;
}
body[id="Administration"] input[type="file"] { position:unset;}
#showdown_wrap input[type="file"] { position:unset;}



/* footer area ############################################################# */
/* potentielle footer Links, wenn aktiv */
#agb        		#navagb  a,
#banner     		#navban  a,
#partner    		#navpart a,
#about4       		#navjobs a,
#impressum  		#navimpr a,
#datenschutz  		#navdat  a
{
		 color:			var(--color-menuitem);
         font-weight:	bold;
         text-decoration:none;
         cursor:		default;
}

#footer, #footer_pre {
        clear: 			both;
        height: 		45px;
        border-top: 	1px solid gray;
        font-weight:	bold;
        font-size:		11px;
        font-family:	veranda, Arial,Helvetica;
        text-decoration:none;
        text-align: 	center;
        color: 			var(--footer-color);
        padding-top:	 3px;
        padding-right:  15px;
        padding-left:   15px;
        padding-bottom:  5px;
        overflow:		hidden;
        z-index:		3;
}
#footer_pre {
		border-top: 	0px solid gray;
		padding:		0;   /* 3-COLUMN */
		height: 		0px;
}
#footer { 
		position: 		relative;
		top: 			0px;
		border-top: 	0px solid gray;	
		background-color: transparent;
}
@media (max-width: 910px)  { #footer { top:15px; height:95px;} }
@media (max-width: 838px)  { #footer { visibility: hidden;   } }


#footer a, #footer_left a {
		outline: 			none;
		font-weight:		bold;
		font-family:		Veranda,Arial,Helvetica;
		text-decoration:	none;
		background-color:	transparent;
		color:				var(--footer-color);
		vertical-align:		bottom;
		}
#footer a:hover, #footer_left a:hover {
		background-color:	transparent;
		color:				var(--color-menuitem-hoover); /* DarkTurquoise */
		font-weight:		bold;
}

#footer_left {
        float:				left;
        text-align: 		left;
        padding-left:   	15px;
        padding-bottom:  	 5px;
}
#jumpback {position: absolute; right: 0; padding: 20px; font-size: 50px;}



/* Facebook plugin */
.fb_post {
		clear:				both;
		overflow:			hidden;
		border: 			2px solid #aaa;
		margin: 			10px;
		padding: 			10px;
		background-color: 	#eee;
		border-radius: 		 5px;
}



/* für Kalendereintrag */
.calentry > i { font-size:200%; color:#ff9900;position:relative;float:left;line-height:75px;padding:0 25px 0 0; clear:both;margin-left:20%;}
@media (max-width: 500px) { .calentry > i  {margin-left:0;}}
@media (max-width: 400px) { .calentry > h3  {font-size:90.01%;} .caladdress {font-size:80.01%;} }
@media (max-width: 370px) { .calentry > h3  {font-weight:normal;font-size:80.01%;}  .calentry > i  {padding:0 10px 0 0;line-height:70px;} .caladdress {font-size:70.01%;}}
h3 { padding-top:20px;}
.caladdress { position: relative; top:5px; }

/* Openstreetmap */
iframe { border: none; 	overflow: hidden;	margin-top: 0;	margin-bottom: 0; }


/* eingebettetes Youtube-Video via CMS Editor eingefuegt */
.embedvideo-wrapper {
    max-width: 		100%;
    left: 			0;
    right: 			0;
    margin: 		auto;
}
@media only screen and (max-width: 600px)  { .embedvideo-wrapper {width:100% !important;}}
div.embedvideo {
    position: 		relative;
    padding-bottom: 56.25%;
    height: 		0;
    overflow: 		hidden;
    box-shadow: 	0px 10px 12px 0px rgba(49, 49, 49, 0.4);
	border:			0;
}
.embedvideo iframe {
    position: 		absolute;
    left: 			0;
    top: 			0;
    width: 			100%;
    height: 		100%;
}

#mob_menu {display:none;position:relative;z-index:199;width:100%;top:-100px;}

.fversion {font-size:12px;margin-left:15px;}

/* shop definitions */
/* see custom last, it must fit to the camera css definitions */
.item_show {width:60%;float:left;position:relative;}
.item_func {width:calc( 40% - 20px );float:right;position:relative;padding: 10px 10px 20px 10px;}
.item_descr {width:calc( 100% - 40px );clear:both;padding: 10px 20px 20px 20px;}
@media (max-width: 814px) {
	.item_show, .item_func {width:90%;padding: 0px 5% 20px 5%;}
}
.price, .cent {font-family:arial;font-size:28px;color:black;line-height:60px;font-weight: 600;letter-spacing: .05em;}
.cent {font-size:14px;vertical-align:super;font-weight:300;}
.avail   {color:#007600;font-size:18px;line-height:40px}
.soldout {background-color:#a31553;color:white;font-size:18px;line-height:40px;padding:5px 25px 5px 25px;font-weight:700;width: 150px;
  text-align: center;
  transform: rotate(-10deg);
  user-select:none;}
h3.shopitem {color:black;font-size:26px;letter-spacing: .02em;}
.unit {font-size:26px;}
.sitem {width:300px;border-radius:15px;}


.subbutton {
	background-color: 	#ffcc00;
	color: 				black;
	padding: 			10px 30px 10px 30px;
	margin-top: 		25px;
	position: 			relative;
	top: 				0;
	border-radius: 		30px;
	font-style: 		normal;
	font-weight: 		normal;
	font-size: 			20px;
	text-transform: 	uppercase;
	display: 			block;
	width: 				max-content;
	transition: 		2s;
	text-decoration:	none;
}
.subbutton:hover {
	background-color: 	#990033;
	color: 				white;
	transform:			scale(1.1);
	filter: 			drop-shadow(-4px 4px 10px #fff);
	cursor:				pointer;
	user-select: 		none;
}

@media (max-width: 674px) { 
	.avail {font-size:16px;}
	.sitem {width:200px;}
	.subbutton {font-size:14px;}
	h3.shopitem {font-size:20px;}
}
@media (max-width: 508px) {
	.avail {font-size:14px;}	
	.sitem {width:100px;}
	body[id="Shop_x_xUeberblick"] .subbutton {font-size:12px;left:-50%;}
	body[id="Shop_x_xUeberblick"] h3.shopitem {font-size:18px;left:-50%;position:relative;width: 125%;}
}
@media (max-width: 392px) {
	div.dataTables_length>label {font-size: 14px; display: inline-flex; line-height: 26px; position: relative;}
	div.dataTables_length>label>select {width:50px;margin-right: 5px;}
}

.hcart {
	position:	fixed;
	top:		0;
	right:		100px;
	z-index:	100;
	color:		black;
	font-size:	24px;
	float:		right;
	background-color: transparent;
    border: 0;
}
.hcart:hover {cursor: pointer;color:#444;}
.lnbut, .llnbut {
	position:	fixed;
	top:		0;

	z-index:	100;
	color:		black;
	font-size:	16px;
	float:		right;
	background-color: transparent;
    border: 0;
}
.lnbut:hover {cursor: pointer;color:#444;}
#de {right:	50px;}
#en {right: 20px;}
#item_nb {
	color: 		white;
	position: 	relative;
	left: 		-40%;
	top:		-8px;
	font-size:	14px;
}

#mycheckout fieldset {
  margin-top: 10px;
  background-color: #fff;
  padding: 10px;
  border: 1px solid #dadae5;
  border-radius: 3px;
  background-clip: padding-box;
  line-height: 24px;
  position: relative;
}

#mycheckout li {
  float: left;
  padding: 0;
  width: 100%;
}
#mycheckout ol {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
#mycheckout input,  #mycheckout label {display:block;width:100%;}
#mycheckout label {padding-top:10px;}

#mycheckout li[id='fname'],  #mycheckout li[id='lname']  {width:49%;}
#mycheckout li[id='postco'], #mycheckout li[id='cty']  	 {width:49%;}
#mycheckout li[id='lname'],  #mycheckout li[id='cty']    {float:right;}
#mycheckout li[id='cntry'] 	{width:49%;}
#mycheckout li[id='addr'] 	{width:100%;}