:root { 
 
  --baseFontSize:  calc(1.8vmin  + 0.3em);
 --baseFontSize: calc(1.8vmin + 0.193em);
  --baseFontSize:  calc(1.125vmin  + 0.5em);
  --baseFontSize: calc(1.00000000125vmin + 0.550em); 
  --baseFontSizeRel: calc(1vh);
 
 
 --baseFontSize: calc(1.01230000000125vh + 0.450em);
--baseFontSizeRel: calc(1.2vh);

  --baseFontSize: calc(1.00000000125vmin + 0.550em); 

 /**
 
 background-color: rgba(255, 255, 255, 1.0);
 
 
 $styleVersion = 1;
 ***/
  --colorPaletteBG: #ffffff22;
  --colorPaletteBG: #ffffffff;
 
  --colorPalette1: 	#00437a;
  --colorPalette2: 	#0088c2;
  --colorPalette3:	#d4d7e8;
  --colorPalette4: 	#d4eaf5;
  --colorPalette5: 	#e5e5e5;

  --colorPalette6: 	#ffffff;

  --colorTopNavText:   		var(--colorPalette6);
  --colorTopNavTextHover:  var(--colorPalette5);

  --colorTopNav2Text:   	#00538f;/* red;	var(--colorPalette6); */
  --colorTopNav2TextHover:  #009fe3;/* var(--colorPalette1);*/

  --akzentColor: var(--colorPalette2);
  --navBgColor: 	var(--colorPalette2);/*			#020410; */
  --headerColor: 	var(--colorPalette1);/*		green	#020410; */

  --colorText:   var(--colorPalette1);

  
  --baseHue: 207;   
  --hue1: hsl(calc(var(--baseHue)), 255, 62,1.0);
  --hue2: hsl(calc(var(--baseHue)), 127, 62,1.0);
  --hue3: hsl(calc(var(--baseHue)),  63, 62,1.0);
  --hue4: hsl(calc(var(--baseHue)), 255, 62,0.5);
  --hue5: hsl(calc(var(--baseHue)), 127, 62,0.5);
  --hue6: hsl(calc(var(--baseHue)),  63, 62,0.5);


  --zitatColor: 				#f00;	
  --zitatBgColor: 		#152875;
  --zitatQuColor: 				#00f;
  
  --zitatColor2: 				var(--hue1);
  --zitatBgColor2: 				var(--hue2);
  --zitatQuColor2: 				var(--hue3);


  --zitatColor3: 				var(--colorPalette5);
  --zitatBgColor3: 		#152875;
  --zitatQuColor3: 				var(--colorPalette6);









  --primary: hsl(     var(--baseHue)       , 80%, 40%);
  --accent1: hsl(calc(var(--baseHue) - 231), 80%, 40%);
  --backgr1: hsl(calc(var(--baseHue) - 231), 80%, 40%,.15);
  --accent2: hsl(calc(var(--baseHue) - 200), 80%, 50%);
  --backgr2: hsl(calc(var(--baseHue) - 200), 80%, 50%,.15);  
 

  --textColor: 					#102166; /*#ccc; #999999;*/

  
  --navLiColor: 				#00ff00; /* #f2f2f2; */
  --navBg2Color: 			#3466ff;/*	#83feff;  #ddd; */

  



  
  --accordionColor: 			#444;
  --accordionBackgroundColor: 	#eee;
  
  
  --footerBackgroundColor: 		#9c9c9a;
  --footerAktiveColor: 			#003399;
  
  
  --bottomNavLiColor:			#dbdbd9;
  --bottomNavBgColor:			#020410;/* #04AA6D; */
  --bottomNavBg2Color:		#3466ff;/*	#83feff; #ddd; */



  --whitecolor:					#fff; /* white; */
  --blackcolor:					#000; /* black; */
  --redcolor:					#f00; /* red; */
  
  --cloudColor: 				#4d628d;





  --navLiColor: 				#ff0000; /* #f2f2f2; */
  --navBg2Color: 				#0000ff;/*	#83feff;  #ddd; */




 }
 
 
 audio
 {
	 height:	2em;
 }
 
 
@media screen and (min-width: 200px)
{
.root
{
	--baseFontSize: calc(1.00000000125vmin + 0.550em);
	--baseFontSizeRel: calc(1.2vh);
}
}


@media screen and (min-width: 600px)
{
.root
{
	--baseFontSize: calc(2.0000000125vh + 0.450em);
	--baseFontSizeRel: calc(1.2vh);
}
}

@media screen and (min-width: 1900px)
{
.root
{
	--baseFontSize: calc(3.0000000125vh + 0.350em);
	--baseFontSizeRel: calc(1.2vh);
}
}

a:visited {
	color: var(--colorPalette4);
}
a:hover {
	color: var(--colorPalette3);
}

a {
	color: var(--colorPalette2);
}



.content{
	padding: 0em;
	margin:0em;
	margin-top:2em;
	padding-left: 3em;
	padding-bottom: 2em;
}


*
{
	font-family: 'Verdana Regular','Arial', sans-serif; 
	font-family: 'Verdana','Arial', sans-serif; 
/***
	font-size: calc(var(--baseFontSize) * 1.0);
***/
	line-height: 120%;
}

body
{
	font-family: 'Verdana','Arial', sans-serif; 
	font-size: 20px;
	line-height: 120%;
/***
	font-size: calc(2vw + 1em);
	font-size: 2vmin;
	font-size: calc(2vw /2.5 + 0.5em);

	font-size: calc(2vmax /4.5 + 0.5em);
	font-size: calc(2vmax /9 + 0.5em);
	font-size: calc((2vmin / 8.5 + 0.8em) );
	font-size: calc((2hmax / 1.5 + 0.5em) * 1.0);
***/	
	font-size: calc(var(--baseFontSize) * 1.0);
	
	
	line-height: 1.4em;

	display: block;
   margin: 0px;
}	

html, body {
  height: 100%;
  margin: 0;

    scroll-behavior: smooth;
	
 hyphens: auto;

}


.center_img
{
	width: fit-content;
	margin: auto;
}

.content_grid_1_3
{
	display: grid;
	height: auto;
	
	width:100%;
	

	
	margin-left: auto;
	margin-right: auto;

  /***						1 image left 30% ***/
  grid-template-columns: 	33% 53%;
  
    grid-template-areas: 'cont_grid_item_img cont_grid_item_txt';

  gap: 1.25em;
/* background-color: #2196F3; */
  padding: 0em;
  
}

.content_grid_item1of3
{
	padding-left: 0em;
	color: var(--colorPalette1);

}
.content_grid_item3of3
{
	padding-left: 0em;
	color: var(--colorPalette1);

}

.Entwurf
{
	margin-left: 0.2em;
}


.content_grid_item_img
{
	/*!  background-color: rgba(255, 0, 0, 0.8); !*/
  grid-area: cont_grid_item_img;
}


.content_grid_item_txt
{ 
/*	background-color: rgba(255, 0, 0, 0.8); */
	grid-area: cont_grid_item_txt;
}




wrapper {
/**	
//position: sticky;
//top: 100px;
**/	
  min-height: 100%;

  /* Equal to height of footer */
  /* But also accounting for potential margin-bottom of last child */
  margin-bottom: -50px;
}
.push {
  height: 50px;
}

.footer {
  background-color: green;
}

.footer {
   position: fixed;
   left: 0;
   bottom:-14px;
   width: 100%;
   background-color: red;
   color: white;
   text-align: center;
}

.push {
  background-color: red;
}


.contentXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX {
  min-height: calc(100vh - 70px);

}

/**
h1 {
	 color: rgba(rgb(128,0,0),0.5);

   font-size: calc(var(--baseFontSize) * 2.4);
	margin-bottom: 0.5em;
}
***/
h1 {
	color: rgb(var(--colorPalette3));
	font-size: 190%;
	line-height: 150%;
    font-size: calc(var(--baseFontSize) * 1.8);
    margin-bottom: 0em;
    font-weight: bold;
    letter-spacing: 0.08em;
    word-spacing: -0.18em;
}

	
h2 {
	color: rgba(var(--colorPalette3),0.9);
	font-size: 160%;
	line-height: 140%;
	font-size: calc(var(--baseFontSize) * 1.6);
	margin-bottom: 0.3em;
}
h3 {
	 color: rgba(var(--colorPalette3),0.8);
	font-size: 130%;
	line-height: 130%;
	font-size: calc(var(--baseFontSize) * 1.4);
	margin-bottom: 0.15em;
}
h4 {
	 color: rgba(var(--colorPalette3),0.7);
	font-size: 120%;
	line-height: 130%;
	font-size: calc(var(--baseFontSize) * 1.2);
	margin-bottom: 0.15em;
}

/*** *** /
h1:before {
  content: 'h1: ';
}

h2:before {
  content: 'h2: ';
}

h3:before {
  content: 'h3: ';
}

h4:before {
  content: 'h4: ';
}


p:before {
  content: 'text: ';
}
/*** ***/


.old{
display:none;
/* display:grid; */
}
.old{
background-color: #0f0;
}


.red{
background-color: #d3ff00;
color: var(--akzentColor);
display:none;
font-weight: bold;
}

.ellipsis
{
	margin-left: -0.2em;
}
.header
{
	width:100%;
	margin-left: auto;
	margin-right: auto;
/*!  background-color: rgba(55, 55, 55, 0.8); !*/


}	
.banner
{
	width:100%;
/**	height: 100%;**/
height: auto;
	margin-left: auto;
	margin-right: auto;
	
	margin-top: 0px;
	/***
//	position: relative;
//	top: 200px;
**/
}

.banner_grid
{
	display: grid;
/*!	height: auto; !*/
	
	width:100%;
	margin-left: auto;
	margin-right: auto;

  /***						4 images ***/
  grid-template-columns: 	repeat(auto-fill, minmax(600px, 1fr));
  gap: 0px;
/*!  background-color: #2196F3; !*/
  padding: 0px;
  
}

.grid-item
{
}






.banner
{
	width:100%;
/**	height: 100%;***/
	margin-left: auto;
	margin-right: auto;
/**
	position: relative;
top: 10vh;
-***/
margin-bottom: -16vh;	
}


.banner_grid
{
	display: grid;
	height: auto;
	
	width:100%;
	margin-left: auto;
	margin-right: auto;

  /***						4 images ***/
  grid-template-columns: 	1fr;
  gap: 0px;
/*!  background-color: #2196F3; !*/
  padding: 0px;
  
}
}
	

@media screen and (min-width: 200px)
{
.banner
{
	width:100%;
/**	height: 100%;**/
	margin-left: auto;
	margin-right: auto;
	margin-bottom: -1vh;	
}
	
.banner_grid
{
	display: grid;
	height: auto;
	
	width:100%;
	margin-left: auto;
	margin-right: auto;

  /***						4 images ***/
  grid-template-columns: 	1fr;
  gap: 0px;
/*!  background-color: #2196F3; !*/
  padding: 5px;
  padding-left: 	2px;
  padding-right: 	2px;
  
}
}
	
@media screen and (min-width: 0px)
{
.banner
{
	width:100%;
/**	height: 100%;**/
	margin-left: auto;
	margin-right: auto;
	margin-bottom: -1vh;
}

.banner_grid
{
	display: grid;
	height: auto;
	
	width:100%;
	margin-left: auto;
	margin-right: auto;

  /***						4 images ***/
  grid-template-columns: 	auto auto auto auto;
  gap: 0px;
/*!  background-color: #2196F3; !*/
  padding: 0px;
  
}

}
	
@media screen and (min-width: 800px)
{
	
.banner
{
	width:100%;
	height: auto;
/**	height: 100%;**/
	margin-left: auto;
	margin-right: auto;
	margin-bottom: -16vh;}

.banner_grid
{
	display: grid;
	height: auto;
	
	width:100%;
	margin-left: auto;
	margin-right: auto;

  /***						4 images ***/
  grid-template-columns: 	auto auto auto auto;
  gap: 0px;
/*!  background-color: #2196F3; !*/
  padding: 0px;
  
}
}

.content
{
/*!	background: gray;  !*/
	width:100%;
	margin-left: auto;
	margin-right: auto;
/*!	min-width: 290px; !*/
	padding-left: 	1em;
	padding-right: 	1em;


	padding: 0em;
	margin:0em;
	margin-top:2em;
	padding-left: 2em;
	padding-bottom: 2em;
}
.footer
{
	width:100%;
	margin-left: auto;
	margin-right: auto;
	background-color: var(--footerBackgroundColor); 
/*	background-image: linear-gradient(var(--footerBackgroundColor), black);*/
}	
 
 
 
 
 
  
p.txtxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx {
	color: var(--textColor); 
	margin-top: 0.3em;
}

p {
	margin-top: 0.3em;
	margin-bottom: 0.0em;
}	
ul {
/**	color: var(--textColor);**/
	margin-top: 0.3em;
}

li::marker {
	color: var(--akzentColor);
}

.question {
	padding-top: 	0em;
	padding-bottom: 0em;
}	

.question a{
	/* font-variant:small-caps; */
	color: var(--headerColor);

/* text-decoration: none;	 */
}

.question a:link{
	color: var(--headerColor);
}

.question a:visited {
	color: #7F0000;
}

.question a:hover
 {
	background-color: var(--akzentColor);
}


.questionText {
	color: var(--headerColor);
}	

.answerText {
	color: var(--headerColor);
}






/**** accordion ***/

.buttonLink {
	background-color: var(--accordionBackgroundColor);
	color: var(--accordionColor);
	cursor: pointer;
	padding: 9px;
	width:min-content;
	border: none;
	text-align: left;
	outline: none;
	font-size: 15px;
	transition: 0.4s;

	border-radius: 10px;
	/*! display:none; !*/
	color: var(--akzentColor);
	text-decoration: none;
}
.buttonLink:hover {
	background-color: var(--akzentColor);
	color: #ffffff;
/*	background-image: linear-gradient(#83feff, #102166, #102166, #83feff); */
    box-shadow: 0 0 20px #64cdf6;
}
.buttonLink:hover:before {
  color: #ffffff;
}

.buttonLink:before {
/*!  content: '\002B'; !*/
  content: '\27A5';
  
  color: var(--akzentColor);
  font-weight: bold;
/**  float: right; **/
/**  margin-left: 5px; **/
}


/***
.accordion:hover {
	color: var(--colorTopNavTextHover);
	background-color: var(--akzentColor);
    box-shadow: 0 0 20px #64cdf6;
}

.active:hover {
	color: var(--colorTopNavTextHover);
	background-color: #ccc;
	background-color: var(--accordionBackgroundColor);
}

.accordion:after {
  content: '\002B';
  content: '\f5d9';
  
  color: #777;
  font-weight: bold;
}
***/
button.focus::after {
  content: "\2212";
  color: var(--whitecolor);
  font-weight: bold;
/**  float: right; **/
/**  margin-left: 5px; **/
}



  /*question open f5da book-open-reader      f5d9  book closed*/
  /***
.active:after {
  content: "\2212";
  content: '\f5da';
  color: var(--whitecolor);
}
***/

.buttonLink {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 9px;
  width:min-content;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;

border-radius: 10px;
/*! display:none; !*/
  color: #003399;
  text-decoration: none;


}
.buttonLink:hover {
  background-color: #003399;
	color: var(--colorTopNavTextHover);
    box-shadow: 0 0 20px #64cdf6;
	background-color: var(--accordionBackgroundColor);
}
a.active {
  background-color: #ffffff;/*#7F7F7F;*/
}
.buttonLink:before {
/*!  content: '\002B'; !*/
  content: '\27A5';
  color: #003399;
  font-weight: bold;
/**  float: right; **/
/**  margin-left: 5px; **/
}








/**** accordion ***/
button.active {
  color: #ffffff;
}


.accordion {
/***
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 9px;
  width:min-content;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;

border-radius: 10px;
***/

/*! display:none; !*/
  background-color: #ff000000;

	background-image: url("button-faq-plus.svg");
	float: left;
display: block;
	text-align: center;
	text-decoration: none;
	position: relative;
	padding-top:	0.0em;
	padding-bottom:	0.0em;

	color: #ff0000;
	color: var(--colorTopNavText);
	
	background-image: url("menue-v4-hg.svg");
	background-image: url("button-faq-plus.svg");

background-size: 5px;
background-repeat: no-repeat;

background-size: auto;
background-repeat: repeat-y;

	
	margin-right: 0.3em;
	
	border-bottom-width: 0.15em;
	border-bottom-style: outset;
	border-bottom-color: var(--colorPalette1);


  transition: 1.4s;


min-width:   	130px;
padding-left:	3em;
}


.accordion:hover {
/***

  background-color: #003399;
	color: var(--colorTopNavTextHover);
    box-shadow: 0 0 20px #64cdf6;
	background-color: var(--accordionBackgroundColor);



***/


	background-image: url("menue-v4-hg-rollover.svg");
	background-image: url("button-faq-plus.svg");
	background-size: auto;
	background-repeat: repeat;


background-size: contain;
background-repeat: unset;

background-size: contain;
background-repeat: unset;



background-size: 5px;
background-repeat: no-repeat;

background-size: auto;
background-repeat: repeat-y;
/*! background-size: 35px; !*/

  height: 2em;


  	border-bottom-color: #25abe3;
	
  	border-bottom-color: var(--colorTopNav2TextHover);
/** Glow effekt 
    box-shadow: 0 0 20px #64cdf6;
    box-shadow: 1px 1px 5px red;
	**/

}

.active {
	color: var(--colorTopNavTextHover);


	background-image: url("menue-v4-hg-rollover.svg");
	background-image: url("button-faq-plus.svg");
	background-image: url("button-faq-minus.svg");
	background-size: auto;
	background-repeat: repeat;


background-size: contain;
background-repeat: unset;

background-size: contain;
background-repeat: unset;



background-size: 5px;
background-repeat: no-repeat;

background-size: auto;
background-repeat: repeat-y;

  	border-bottom-color: #25abe3;
	
  	border-bottom-color: var(--colorTopNav2TextHover);
/** Glow effekt 
    box-shadow: 0 0 20px #64cdf6;
    box-shadow: 1px 1px 5px red;
	**/

  transition: 1.4s;


min-width:   	130px;
padding-left:	3em;
}

.active:hover {
	color: var(--colorTopNavTextHover);


	background-image: url("menue-v4-hg-rollover.svg");
	background-image: url("button-faq-plus.svg");
	background-image: url("button-faq-minus.svg");
	background-size: auto;
	background-repeat: repeat;


background-size: contain;
background-repeat: unset;

background-size: contain;
background-repeat: unset;



background-size: 15px;
background-repeat: no-repeat;

background-size: auto;
background-repeat: repeat-y;

  	border-bottom-color: #25abe3;
	
  	border-bottom-color: var(--colorTopNav2TextHover);
/** Glow effekt 
    box-shadow: 0 0 20px #64cdf6;
    box-shadow: 1px 1px 5px red;
	**/
}

.accordion:after {
  content: '\002B';
  color: #777;
  font-weight: bold;
/**  float: right; **/
/**  margin-left: 5px; **/
  content: 'Antwort';

font-size: 200%;
color: var(--colorTopNav2TextHover);
}

.accordion .active:after {
  content: "\2212";
  color: white;

  content: 'Frage';
}

/**** accordion hide panel ***/

.panel {
  padding: 0 3em;
  background-color: white;
  max-height: 0px;
  overflow: hidden;
  transition: max-height 1.52s ease-in;
border-radius: 15px;
}


.panelShort {
/*  padding: 0 18px;*/
  padding: 0 3em;
/*! background-color: green; !*/
  max-height: 0px;
  overflow: hidden;
  transition: max-height 0.52s ease-out;
}
/**** accordion ***/



.zitat
{
	margin-top: 0em;
	font-size: 111%;
	font-weight: bold;
	margin-bottom: 0.5em;
	font-size: calc(var(--baseFontSize) * 1.11);
	
}

.zitatQuelle
{
	margin-top: 0em;
	font-size: 90%;
	font-size: calc(var(--baseFontSize) * 0.9);
}

/*** ~~~~~~~~~~~ NAVI  **/
/** topnav **/


/***** style Header ***/

#divHeader {
	background-color: rgba(155, 155, 255, 1.0);
	 
	background-color: var(--colorPaletteBG);

/***
	position: fixed;
	left: 	0px;
	top: 	0px;
	position: inherit;
***/
	
	position: sticky;
	top: -25vh;

	height: fit-content;
	width:100%;

	display: grid;
	grid-template-columns: 2em 25% 2em auto 0% 4em;

	gap: 0px;
	/*!  background-color: #2196F3; !*/
	padding: 0px;

	grid-template-areas: 'header1 headerLogo header3 headerNavi header5	headerIco';

z-index: 999;
}

/**
@media screen and (max-width: 1070px)
{
#divHeader {
	background-color: rgba(255, 255, 255, 0.9875);
	position: fixed;
	left: 	0px;
	left: 	0px;
	top: 	0px;


	position: inherit;
height: fit-content;
width:100%;

display: grid;
grid-template-columns: 2em 10em 2em auto 0% 4em;

	gap: 0px;
	padding: 0px;
	padding: 0px;

	grid-template-areas: 	'header1 headerLogo headerLogo headerLogo header3	headerIco' 
							'header1 headerNavi headerNavi headerNavi header5	headerIco';

z-index: 999;
}
}

**/
.spaceSticky
{

	
		height:5px;
	background-color:red;
}

/***
#divHeader {
  background-color: rgba(255, 255, 255, 0.8);
}
.headerItem4.mobile
  text-align: center;
  padding: 20px 0;
font-size: 140%;
font-size: calc(2vmax /1 - 0.61em);
}
***/

@media screen and (max-width: 1200px)
{

}

@media screen and (max-width: 800px)
{

	
.content_grid_1_3
{
	display: grid;
	height: auto;
	
width: fit-content;
	max-width: 90%;
	
	margin-left: 0em;
	margin-right: auto;

  /***						1 image and 1 Text ***/
  grid-template-columns: 	auto;
  grid-template-rows: 	 auto;
  
    grid-template-areas: 	'cont_grid_item_img'
							'cont_grid_item_txt';

  gap: 10px;
/* background-color: #ff96F3; */
  padding: 1em;
  
}

	
	
	
}

.headerItem1 {
/*!  background-color: rgba(255, 0, 0, 0.8); !*/
  grid-area: header1;
}


.headerItem2 {
/*!  background-color: rgba(255, 255, 0, 0.8); !*/
  grid-area: headerLogo;
  max-width: 100%;
  max-width: 39em;
}

.headerItem3 {
/*!  background-color: rgba(255, 255, 255, 0.8); !*/
  grid-area: header3;
}

.headerItem4 {
/*!  background-color: rgba(0,   255, 255, 0.8); !*/
  grid-area: headerNavi;
  
}


.headerItem4.mobile {
  grid-area: headerNavi;

  background-color: rgba(255, 255, 255, 0.0);  
  text-align: center;
  padding: 20px 0;
/* font-size: 105%; 
font-size: calc(var(--baseFontSize) * 1.25);
*/
font-size: calc(var(--baseFontSize) * 1.25);

  height: auto;
  display: grid;
  /***						navi		icon ***/
/**  grid-template-columns: 	auto		2em;**/
  grid-template-rows: 		auto	auto   ;
  gap: 1px;
/*!  background-color: #2196F3; !*/
  padding: 0px;
  margin: 0;
 margin-top: 12em; 
/**  
 grid-template-areas: 'header1 headerLogo header3 headerNavi header5	headerIco';
 grid-template-areas: 'headerNavi headerIco' 'headerNavi headerNavi' 'headerNavi headerNavi'
**/
}

.headerItem4.mobile .icon{
	text-align: right;
	display: none;
}



.headerItem5 {
/*!  background-color: rgba(0, 	0, 255,	0.8); !*/
  grid-area: header5;
}

.headerItem6 {
/*!  background-color: rgba(0, 0, 0, 0.8); !*/
  grid-area: headerIco;
	text-align: right;
}


.headerItem7 {
	
	
background-color: rgba(255, 255, 255, 0.5);
grid-area: headerHamburger;
text-align: left;
position: relative;
bottom: 0.5em;
height: fit-content;
margin-top: auto;
display:none;	
}

@media screen and (max-width: 1069px	)
{

#divHeader {
  background-color: red;
  background-color: rgba(255, 255, 255, 1.0); 
 
  background-color: var(--colorPaletteBG);

  text-align: left;
  padding: 20px 0;
/**	font-size: 115%;**/
font-size: 110%;

	
	
/***					empty	Logo/navi	empty	ICON				**/
grid-template-columns: 	1em 	auto 		1em 	4.5em;
    grid-template-rows: auto auto;
    gap: 1px;
    padding: 10px;
    grid-template-areas:
        'header1 headerLogo  header3 		headerIco '
        'header5 headerNavi  headerNavi 	headerHamburger';
    text-align: left;
    padding: 20px 0;	

//width: 95%;
margin: auto;
}
	
.headerItem4.mobile {
 margin-top: -3em; 
}
	
.headerItem4.mobile .icon{

	display: block;
	color: var(--akzentColor);
}	
.headerItem4.mobile {
  /***						empty	Logo/navi		**/
  grid-template-columns: 	3.5%	auto 3.5%;
  grid-template-rows: 		auto   ;
  gap: 1px;
/*!  background-color: #2196F3; !*/
  padding: 10px;
  
  grid-template-areas: 'header1 headerNavi header3 ';	
	
/*!  background-color: rgba(255, 255, 255, 0.8); !*/
  text-align: left;
  padding: 20px 0;
	font-size: 120%;
}

.headerItem7 {
	display:block;	
}

.icon
{
	color: var(--akzentColor);
	
	position: relative;
	top: -10px;
}

}


/**** style nav-top ***/

ul.navi {	
padding-left: 0;
list-style: disc;
list-style-position: inside; 
/** background: gray; **/

display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;

}

ul.navi li{
padding-left: 1em;
 background: green; 
	
}

ul.navi li::before {
  content: "\2B27";/*! "\2022"; !*/
  color: var(--redcolor);
  font-weight: bold;
/*!  display: inline-block;  !*/
/*!  width: 1em; !*/
  margin-left: -1em;
}

ul.navi a{
	/* font-variant:small-caps; */
	color: var(--headerColor);

/** text-decoration: none;	**/
}




/**** style nav-top ***/




a.active {
	background-color: #ffffff;/*#7F7F7F;*/
/*	background-image: linear-gradient(#83feff, #102166, #102166, #83feff); */
	background-color: var(--accordionBackgroundColor);
	background-color: #f00fff;/*#7F7F7F;*/


	color: var(--colorTopNavTextHover);

	background-image: url("button_active_bg.png");
	background-size: cover;
	background-repeat: round;
  padding: 0px 10px;
  margin: 0px;
}


.topnav {
  overflow: hidden;
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.275); 
	/* font-variant:small-caps; */	
	width:auto;
	width:max-content;

	padding:0;
	margin: auto;
	margin-top: 4.5em;
	
	position: relative;
	bottom: -1.4em;
}



.topnav a {
  float: left;
  display: block;
display: inline list-item;  
  text-align: center;
 padding: 0.4em 0.4em;
padding: 0.1em 0.4em;
  text-decoration: none;


  color: var(--colorTopNavText);
}

.topnav a:hover {
	color: var(--colorTopNavTextHover);
/***
//	background-image: url("bmenue-hg-rollover.svg");
//	background-image: url("button_pressed_bg.png");
****/
	background-size: cover;
	background-repeat: round;
  margin: 0px;
  
  
  
}

.topnav a:active {
	color: var(--colorTopNavTextHover);
	background-image: url("button_active_bg.png");
	background-size: cover;
	background-repeat: round;
  margin: 0px;
}
.topnav a:active:hover {
	color: var(--colorTopNavTextHover);
	background-image: url("button_active_bg.png");
	background-size: cover;
	background-repeat: round;
  margin: 0px;
}

.topnav li .active {
	color: red;/*var(--colorTopNavTextHover);*/

	background-image: url("button_bg_pressed.png");
	background-image: url("button_pressed_bg.png");
	background-size: cover;
	background-repeat: round;
}

	
.topnav a:active {
  background-color: var(--navBgColor);
  color: var(--whitecolor);
	color: var(--colorTopNavTextHover);
color: #green;
	background-image: url("button_pressed_bg.png");

	background-size: cover;
	background-repeat: round;
}


.topnav  	.active  {
  background-color: var(--navBgColor);
	color: var(--colorTopNavTextHover);
  color: red;

	background-image: url("menue-hg-rollover.svg");
	background-image: url("menue-hg-rollover.png");
background-size: contain;
background-repeat: unset;
}

.topnav .active:hover {
  background-color: var(--navBgColor);
  color: var(--whitecolor);
	color: var(--colorTopNavTextHover);

	background-image: url("button_pressed_bg.png");
	background-size: cover;
	background-repeat: round;
}

.topnav li:hover {
  background-color: var(--navBgColor);
  color: var(--whitecolor);
	color: var(--colorTopNavTextHover);
  color: yellow;

	background-image: url("menue-hg-rollover.svg");
	background-image: url("menue-hg-rollover.png");
background-size: contain;
background-repeat: unset;


}

.topnav .icon {
  display: none;
}

.topnav li {
	float: left;
with:400px;

	display: contents;
	text-align: center;
	/*!  padding: 14px 16px; !*/
	/*!  padding-left: 10px; !*/
	text-decoration: none;

	position: relative;
	/*!    float: none; !*/
	display: block;
/*!	text-align: left; !*/
	/*!margin-bottom: 1em;!*/
	padding-top:	0.25em;
	padding-bottom:	0.25em;

	color: var(--colorTopNavText);

	background-image: url("menue-hg.svg");
	background-image: url("menue-hg.png");

/*** V2 *** /
background-size: 5px;
background-repeat: no-repeat;
***/

background-size: contain;
background-repeat: unset;
	
	
	background-image: url("menue-hg.png");
background-size: auto;
background-repeat: round;
	
	
	margin-right: 0.3em;
}

.topnav a:hover {
	color: var(--colorTopNavTextHover);
/**
//	background-image: url("button_active_bg.png");**/
	background-size: cover;
	background-repeat: round;
}

.topnav a:active {
	color: var(--colorTopNavTextHover);
/**
//	background-image: url("button_active_bg.png");
//	background-image: url("button_pressed_bg.png");**/
	background-size: cover;
	background-repeat: round;
}

.topnav li:active {
  background-color: var(--navBgColor);
  color: var(--whitecolor);


	color: var(--colorTopNavTextHover);
/**
//	background-image: url("button_pressed_bg.png");**/
	background-size: cover;
	background-repeat: round;
}

.toplist ul li a .active{
background-color: red;
color: green;
	background-image: url("button_pressed_bg.png");
	background-size: cover;
	background-repeat: round;
}


ul.topnav li::before {
	/*!
  content: "\2022";
  content: "\2B27"; 
  !*/
  content: "";
  color: var(--redcolor);
  color: var(--akzentColor);
  font-weight: bold;
/*!  display: inline-block; !*/
/*!width: 0.4em;!*/
/*!margin-left: -0.4em;!*/
margin-left: 0.0em;
/*! background-color: gainsboro; !*/
}

ul.topnav li:first-child:before {
  display: none; 
}

  .topnav a {
    float: none;
    display: inline flow-root list-item;
    display: inline;
    text-align: left;
  }

  .topnav li {
	position: relative;
  
    display: block;
    text-align: left;
	
  }
  
ul.topnav {
	list-style-type: none;
  }
  


@media screen and (max-width: 1069px) {
/**
  .topnav a:not(:first-child) {display: none;}

  .topnav a.icon {
    float: left;
    display: block;
  }
  **/
  
ul.topnav li::before {
	display: none;
}  

.topnav li
{
	padding-left:0px;
}
  .topnav li:not(:first-child) {display: none;}
ul.topnav li:first-child:before {
/*	  display: inline-block; */
}

  .topnav a {
    float: none;
    display: inline flow-root list-item;
	display: inline;
    text-align: left;
 padding: 0.3em 0.4em;


 }

  .topnav li {
	position: relative;
    float: none;
    display: block;
    text-align: center;
/*!	background-color: var(--redcolor); !*/
	
	
  }



/**
  .topnav_V2 a:not(:first-child) {display: none;}

  .topnav_V2 a.icon {
    float: left;
    display: block;
  }
  **/
  
ul.topnav_V2 li::before {
	display: none;
}  

.topnav_V2 li
{
	padding-left:0px;
}

.topnav_V2 li:not(:first-child) 
{
	  display: none;
}
ul.topnav_V2 li:first-child:before {
/*	  display: inline-block; */
}

  .topnav_V2 a {
    float: none;
    display: inline flow-root list-item;
	display: inline;
    text-align: left;
 padding: 0.3em 0.4em;


 }

  .topnav_V2 li {
	position: relative;
    float: none;
	float: left;
width:400px;
    display: block;
    text-align: center;
/*!	background-color: var(--redcolor); !*/
	
	width:	auto;
  }



}

@media screen and (max-width: 1069px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  
  .topnav.responsive a {
    float: none;
    display: inline flow-root list-item;
    display: inline;
    text-align: left;
  }

  .topnav.responsive li {
	position: relative;
    float: none;
    display: block;
    text-align: center;
	width: auto;
  }




  .topnav_V2.responsive {
	  position: relative;
	  width: fit-content;
}
  .topnav_V2.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
	width: auto;
  }
  
  .topnav_V2.responsive a {
    float: none;
    display: inline flow-root list-item;
    display: inline;
    text-align: left;
  }

  .topnav_V2.responsive li {
	position: relative;
    float: none;
    display: block;
    text-align: center;
	width: auto;
  }
}
/***** style footer ***/

#divFooter {
  height: auto;
  display: grid;
  /***						empty	navi	empty ***/
  grid-template-columns: 	3.5%	auto 	3.5%;
  gap: 1px;
/*!  background-color: #2196F3; !*/
  padding: 10px;
  
  grid-template-areas: 'footer1 footerNavi footer3';
}




#divFooter {
/*!  background-color: rgba(255, 255, 255, 0.8); !*/
	text-align: center;
	padding: 0px 0;
	font-size: 150%;
	
	/* font-variant:small-caps; */
}

/***
@media screen and (max-width: 800px)
{
	
#divFooter {
  /-***						empty	navi		**-/
  grid-template-columns: 	3.5%	auto 3.5%;
  grid-template-rows: 		auto	auto   ;
  gap: 1px;
  padding: 10px;
  
  grid-template-areas: 'footer1 footer2 footer3';	
	
  text-align: left;
  padding: 20px 0;
}

}
****/
@media screen and (max-width: 800px)
{
#divFooter {
    grid-template-columns: auto max-content auto;
  text-align: center;
}
}


.footerItem1 {
/*!  background-color: rgba(255, 0, 0, 0.8); !*/
  grid-area: footer1;
}

.footerItem2 {
/*!  background-color: rgba(0,   255, 255, 0.8); !*/
  grid-area: footerNavi;
/*!  background-color: yellow;!*/

}

.footerItem3 {
/*!  background-color: rgba(255, 255, 255, 0.8); !*/
  grid-area: footer3;
}




/*** ~~~~~~~~~~~ NAVI  **/







/**** style wolke ***/

ul.cloud {	
/**
/	First remove the dots and indents in front of the list
**/
list-style: none;
padding-left: 0;

/**
/	Then set it upulIt is displayed in flexbox with 
/	horizontal and vertical center to ensure that all label elements are displayed 
/	in one or more lines
**/
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;

}

/**
/ Add a certain vertical distance between the upper height and each other, and the final UL element style is as follows:	
**/
ul.cloud {
  list-style: none;
  padding-left: 5px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  line-height: 200%;
}

/**
Colorize:

ul.cloud li:nth-child(2n+1) a { color: #181; }
ul.cloud li:nth-child(3n+1) a { color: #33a; }
ul.cloud li:nth-child(4n+1) a { color: #c38; }
**/

/**
/	Adjust the size of the label according to the weight
/
/	Let’s start with a few small changes to the label
**/
ul.cloud a {
  color: var(--cloudColor);
  display: block;
  font-size: 50%;
  text-decoration: none;
  position: relative;
}

/**
One way of web standards is that CSS can attr()Method to read the data property value of HTML, so we can read it in the following waysdata-weight
attr([attribute-name] [attribute-unit]? [, default-value]?)
**/

/**
/	Unfortunately, no browser currently supports this representation and functionality. Instead, attr () will return only one string and can only be used in the content attribute.
/
/	If the web standard supports this approach, it’s easy to do. We can directly read the data of attribute weights, save them to CSS variables, and directly operate on them, as shown below:
***/
ul.cloud a {
  --size: attr(data-weight number, 2); 
  font-size: calc(var(--size) * 1rem);
}


ul.cloud li {
  padding: 1.2vh 0.5vh;
  padding: 0.5vh 0.3vh;
}

/**
a:after {content: " (" attr(href) ")";}
**/

ul.cloud a[data-weight="1"] { --size: 1; }
ul.cloud a[data-weight="2"] { --size: 2; }
ul.cloud a[data-weight="3"] { --size: 3; }
ul.cloud a[data-weight="4"] { --size: 4; }
ul.cloud a[data-weight="5"] { --size: 5; }
ul.cloud a[data-weight="6"] { --size: 6; }
ul.cloud a[data-weight="7"] { --size: 7; }
ul.cloud a[data-weight="8"] { --size: 8; }
ul.cloud a[data-weight="9"] { --size: 9; }
ul.cloud a[data-weight="10"] { --size: 10; }
ul.cloud a[data-weight="11"] { --size: 11; }
ul.cloud a[data-weight="12"] { --size: 12; }
ul.cloud a[data-weight="13"] { --size: 13; }
ul.cloud a[data-weight="14"] { --size: 14; }
ul.cloud a[data-weight="15"] { --size: 15; }
ul.cloud a[data-weight="16"] { --size: 16; }
ul.cloud a[data-weight="17"] { --size: 17; }
ul.cloud a[data-weight="18"] { --size: 18; }
ul.cloud a[data-weight="19"] { --size: 19; }
ul.cloud a[data-weight="20"] { --size: 20; }
ul.cloud a[data-weight="21"] { --size: 21; }
ul.cloud a[data-weight="22"] { --size: 22; }

ul.cloud a {
  font-size: calc(var(--size) * 0.25vw + 0.25vw + 1em);
  font-size: calc(var(--size) * 0.10vw + 0.15vw + 1em);
font-size: calc(var(--size) * 0.050vw + 0.05vw + 0.5em);
  line-height: 120%;
  padding-left: 10px;
  padding-right: 10px;
  /* ... */
}





















/***   extra ***/

.body-body {
	margin-top:30em;
}


.body1__ {
    background-image:url("../hp_layout_3/Screenshot_1.png");

	background-repeat:no-repeat;
    background-size: 100% auto;
}


.spaceSticky2
{
  position: relative;
  top: 2em;
  height: 20px;
/**  background-color: red;**/

}
.contentZitat3
{
	/**
	background-color: var(--zitatBgColor);
	background-color: red;
	background-color: var(--zitatBgColor3);
**/
	background-color: #00ff00a0;
	background-color: var(--zitatBgColor);

	position: relative;
	top: 1em;

    margin-top: 	0em;
    margin-bottom:  0em;
	
	
	margin-left: 47.6%;
	margin-right: auto;
	padding: 0em;
	z-index: 9;
	margin-left: 0em;
	color: #fff;
/**	
	margin-top: -15em;
	
	position: relative;
	top: 0px;
	***/
	
	max-width: 100%;
}

.zitat3 {
/**
	background-color: var(--zitatBgColor3);
**/	
	color: var(--zitatColor3);
    margin:    0em;

    font-size: 110%;
/**
    font-size: calc(var(--baseFontSize) * 0.8);
    font-weight: bold;
font-weight: 600;
**/
	line-height: 130%;
	
	padding: 0.5em;   
	background-color: darkred; 
}

.zitatQuelle3
{
	color: var(--zitatQuColor3);
	margin-top: 0em;
	font-size: 90%;
    font-size: calc(var(--baseFontSize) * 0.7);
    padding-left: 0.5em;
}


.div-cloud {
    width: 100%;
	 max-width: 1250px;
    margin-left: auto;
    margin-right: auto;
}



.content
{
/*!	background: gray;  !*/

	width:100%;
	padding: 0em;
	margin:0em;
	margin-top:2em;
	padding-left: 2em;
	padding-bottom: 2em;
}

.blocksatz {
    text-align: justify;
}



.headingText {
    font-size: calc(var(--baseFontSize) * 1.5);
}



.contentZitat
{
	background-color: var(--zitatBgColor);
  background-color: #00000075;
	background-color: var(--zitatBgColor);

	position: relative;
	top: -40%;
top: -25vh;
top: 0em;
left: 0em;
	padding: 0em;
	padding-bottom: 1.5em;

	z-index: 9999;

	margin-right: auto;
	margin-left: 0;
	margin-top: 0em;
	margin-right: auto;


width: 100%;
	color: #000;
	
	
  z-index: 9;

  color: #fff;

	
	visibility: hidden;
}	


.zitat {
	background-color: var(--zitatBgColor3);
	color: var(--zitatColor3);
    margin-top: 5px;
    font-size: 142%;
    font-size: calc(var(--baseFontSize) * 1.35);
/**
    font-weight: bold;
font-weight: 600;
**/
	margin-bottom: 0.0em;
	line-height: 130%;
    
}


@media screen and (min-width: 600px) {
	
	.contentZitat3
	{
		position: relative;
		top: -34vh;
		font-size:102%;
		top: -19vh;
		top: 1vh;

font-size: 75%;

		background-color: var(--zitatBgColor);



		display: none;	
		display: grid;

margin: auto;
margin-left:0;
margin-right:0;
padding:0em;

	
	}
	
}

@media screen and (min-width: 600px) {
	
	.contentZitat3
	{
		position: relative;
		top: -34vh;
		font-size:102%;
		top: -19vh;
		top: 1vh;

font-size: 75%;

		background-color: var(--zitatBgColor);



		display: none;	
		display: grid;

margin: auto;
margin-left:0;
margin-right:0;
padding:0px;

	
	}
	
}
@media screen and (min-width: 800px) {
	
	.contentZitat3
	{
		position: relative;
		top: -34vh;
		font-size:102%;
		top: -19vh;
		top: 1vh;

font-size: 75%;

		background-color: #00000000;
	}
	
}
@media screen and (min-width: 1070px) {
	
	
}

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

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

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


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


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

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



@media screen and (min-width: 600px) {
	
	.contentZitat
	{
		background-color: var(--zitatBgColor);
		
		position: relative;
		left: 0%;
		top: -34vh;
		top: -19vh;
		top: 1vh;
		font-size:75%;


		margin-left:0;
		padding-left:0;
		





		display: none;	
		display: grid;

		width: 100%;
margin: 0;
padding: 0;
		max-width: 95%;
		margin-left:0;
		margin-right:0;
padding:2%;
padding-right:15%;
	}	
}

@media screen and (min-width: 800px) {
	
	.contentZitat
	{
		
		position: relative;
		left: 0%;
		top: -34vh;
		top: -19vh;
		top: 1vh;
		font-size:75%;
		background-color: #00000000;
		width: 40%;
	}
	.contentZitat
	{
		margin-left:0;
		padding-left:0;
	}	
}

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

	
}

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

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


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

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

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

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

@media screen and (max-width: 800px) {
body
{
	position: absolute;
	top: -11em;
	top: 0em;
}
/***
.contentZitat
{
	background-color: var(--zitatBgColor);


    margin-top: 0px;
	padding: 0.5em;
	padding-bottom: 1.5em;
	z-index: 9999;

	margin-right: auto;
margin-left: 53%;
width: 40%;
	color: #000;
}
***/
.contentZitatxxxx
{
	background-color: var(--zitatBgColor);
/*
	background-color: green;
*/
    margin-top: 0px;
	padding: 0.5em;
	padding-bottom: 1.5em;
	z-index: 9999;

	margin-right: auto;
	margin-left: auto;
	width: 100%;

	color: #000;
	
	position: relative;
top: 6vh;
		top: 1vh;
}

/**
.zitat3 {
	background-color: var(--zitatBgColor3);
	color: var(--zitatColor3);
    margin-top: 15px;
    font-size: 142%;
    font-size: calc(var(--baseFontSize) * 1.35);

	margin-bottom: 0.0em;
	line-height: 130%;
    font-size: 90%;
}
**/


.content
{
	padding: 0em;
	margin:0em;
	margin-top:2em;

/*!	background: gray;  !*/
	width:	fit-content;
	margin-left: auto;
	margin-right: auto;
/*!	min-width: 290px; !*/

}

.panel {
  padding: 0em;
}


.col-10 {
  float: left;
  width: 18%;
  background-color: antiquewhite;
}

.col-20 {
  float: left;
  width: 37%;
}

/***   extra *** /


ul.topnav_V2 {
	list-style-type: none;
  }

ul.topnav_V2 li::before {
  content: "";
  font-weight: bold;
	margin-left: 0.0em;
/*! background-color: gainsboro; !*/
}



ul.bulletPfeil {
/**	color: #fff; **/
	display: inline-block;
	list-style-type: none;
  }

ul.bulletPfeil li::before {
  content: '';
  display: inline-block;
  height: 1em;
  width: 1em;
  background-image: url("bullet-pfeil.svg");
  background-repeat: no-repeat;
  width: 3em;
  height: 3em;
  position: relative;
  top: 3em;
  left: -2em;
  background-size: 1.5em;
}



ul.bulletPfeilRollover {
/**	color: #fff; **/
	display: inline-block;
	list-style-type: none;
	margin:0em;
  }

ul.bulletPfeilRollover li::before {

  content: '';
  display: inline-block;
  height: 1em;
  width: 1em;
  background-image: url("bullet-pfeil-rollover.svg");
  background-repeat: no-repeat;
  width: 3em;
  height: 3em;
  position: relative;
  top: 3em;
  left: -2em;
  background-size: 1.5em;

}



/**
ul.bullet li {
	background-color: #fff;
	display: inline-block;
	list-style-type: none;
  }
***/  
ul.bullet li:first-child {
/**	background-color: #f0f; **/
	display: inline-block;
	list-style-type: none;
margin-top: -1.0em;
  }
  
  
ul.bullet li::first-line {
/**	background-color: #f0f; **/
	display: inline-block;
	list-style-type: none;
  }


ul.bullet {
/**	color: #fff; **/
	display: inline-block;
	list-style-type: none;
	margin-top: -0.7em;
  }

ul.bullet li::before {
  content: '';
  display: inline-block;
  height: 1em;
  width: 1em;
  background-image: url("bullet.svg");
  background-repeat: no-repeat;
  width: 3em;
  height: 3em;
  position: relative;
  top: 3em;
  left: -2em;
  background-size: 1.5em;
}


ul.bulletRollover {
/**	color: #fff; **/
	display: inline-block;
	list-style-type: none;
  }

ul.bulletRollover li::before {
  content: '';
  display: inline-block;
  height: 1em;
  width: 1em;
  background-image: url("bullet-rollover.svg");
  background-repeat: no-repeat;
  width: 3em;
  height: 3em;
  position: relative;
  top: 3em;
  left: -2em;
  background-size: 1.5em;
}


ul.bullet2 li::before{

  width: 	1.5em;
  height: 	1.5em;
  position: relative;
  top: 		1.75em;
  left: 	-1.5em;
  background-size: 1.0em;
}


ul.topnav_V2 {
	list-style-type: none;
 	float: left;
width:23vh;
margin: auto;
font-size: large;
 }


.topnav_V2 {
  overflow: hidden;
  background-color: rgba(55, 255, 255, 0.000000075); 
	/* font-variant:small-caps; */	
	width:auto;
	width:max-content;

	padding:0;
	margin: auto;
	margin-top: 0.5em;
	
	position: relative;
top: 2em;	
top: 86%;
top: 2.2em;	
/**	
//position: sticky;
//top: 2em;	
***/
}




.topnav_V2 li {
	float: left;
display: block;
	text-align: center;
	/*!  padding: 14px 16px; !*/
	/*!  padding-left: 10px; !*/
	text-decoration: none;

	position: relative;
	/*!    float: none
	display: block;
/*!	text-align: left; !*/
	/*!margin-bottom: 1em;!*/
	padding-top:	0.0em;
	padding-bottom:	0.0em;

	color: #ff0000;
	color: var(--colorTopNavText);
	
	background-image: url("menue-v4-hg.svg");

/*** V2 *** /
background-size: 5px;
background-repeat: no-repeat;
***/
background-size: 5px;
background-repeat: no-repeat;

background-size: auto;
background-repeat: repeat-y;

	
	margin-right: 0.3em;
	
	border-bottom-width: 0.15em;
	border-bottom-style: outset;
	border-bottom-color: var(--colorPalette1);



}


.topnav_V2 li:hover {
	background-image: url("menue-v4-hg-rollover.svg");
	background-size: auto;
	background-repeat: repeat;


background-size: contain;
background-repeat: unset;

background-size: contain;
background-repeat: unset;



background-size: 5px;
background-repeat: no-repeat;

background-size: auto;
background-repeat: repeat-y;

  	border-bottom-color: #25abe3;
	
  	border-bottom-color: var(--colorTopNav2TextHover);
/** Glow effekt 
    box-shadow: 0 0 20px #64cdf6;
    box-shadow: 1px 1px 5px red;
	**/
}

/***
.topnav  .active  {
  background-color: var(--navBgColor);
	color: var(--colorTopNavTextHover);
  color: #blue;

	background-image: url("menue-hg-rollover.svg");
	background-size: contain;
	background-repeat: unset;
}
***/

.topnav_V2 a:hover {

	
	color:	var(--colorTopNav2TextHover);
}

.topnav_V2 a:active {
	color: var(--colorTopNav2TextHover);
 
	background-image: url("menue-v4-hg-rollover.svg");
	background-size: cover;
	background-repeat: round;

  margin: 0px;
  
background-size: 5px;
background-repeat: no-repeat;

background-size: auto;
background-repeat: repeat-y;
  
  
}
.topnav_V2 a:active:hover {
	color: var(--colorTopNav2TextHover);
 
	background-image: url("menue-v4-hg-rollover.svg");
  margin: 0px;
}

.topnav_V2 a {
  float: left;
  display: block;
  display: inline list-item;  
  text-align: center;


padding: 0.1em 0.4em;
padding-left: 0.7em;


text-decoration: none;

color: #0ff000;
color: var(--colorTopNav2Text);

}


.topnav_V2 {
color: #ff0000;
background-size: 5em;
background-repeat: no-repeat;
}

.topnav_V2 .active:hover {
	color: var(--whitecolor);
	color: var(--colorTopNav2TextHover);

}



ul.bottomnav {
	list-style-type: none;
  }


.bottomnav {
	overflow: hidden;
/*	background-color: var(--footerBackgroundColor);  */
	font-variant: small-caps;
	width: fit-content;
	padding: 0.5em;
	margin: auto;
	font-size:2vh
/***
border-radius: 10px;

	background-color: yellow;  
***/
}

.bottomnav li {
	float: left;
display: block;
	text-align: center;

	text-decoration: none;

	position: relative;

	padding-top:	0.0em;
	padding-bottom:	0.0em;

	margin-top:		0.3em;
	margin-bottom:	1.0em;

	color: #ff0000;
	color: var(--colorTopNavText);
	
	background-image: url("menue-v4-hg.svg");


background-size: 5px;
background-repeat: no-repeat;

background-size: auto;
background-repeat: repeat-y;

	
	margin-right: 0.3em;
	
	border-bottom-width: 0.15em;
	border-bottom-style: outset;
	border-bottom-color: var(--colorPalette1);
}


.bottomnav li:hover {
	background-image: url("menue-v4-hg-rollover.svg");

background-size: contain;
background-repeat: unset;



background-size: 5px;
background-repeat: no-repeat;

background-size: auto;
background-repeat: repeat-y;

  	border-bottom-color: #25abe3;
	
  	border-bottom-color: var(--colorTopNav2TextHover);
/** Glow effekt 
    box-shadow: 0 0 20px #64cdf6;
    box-shadow: 1px 1px 5px red;
	**/
}


.bottomnav a:hover {

	
	color:	var(--colorTopNav2TextHover);
}


.bottomnav a:active {
	color: var(--colorTopNav2TextHover);
 
	background-image: url("menue-v4-hg-rollover.png");
	background-size: cover;
	background-repeat: round;

  margin: 0px;
  
background-size: 5px;
background-repeat: no-repeat;

background-size: auto;
background-repeat: repeat-y;
  
  
}
.bottomnav a:active:hover {
	color: var(--colorTopNav2TextHover);
 
	background-image: url("menue-v4-hg-rollover.svg");
  margin: 0px;
}

.bottomnav a {
  float: left;
  display: block;
  display: inline list-item;  
  text-align: center;


padding: 0.1em 0.4em;
padding-left: 0.7em;


text-decoration: none;

color: #0ff000;
color: var(--colorTopNav2Text);

}


.bottomnav {
color: #ff0000;
background-size: 5em;
background-repeat: no-repeat;
}

.bottomnav .active:hover {
	color: var(--whitecolor);
	color: var(--colorTopNav2TextHover);

}







/***   extra ***/

@media screen and (max-width: 800px	)
{
	.topnav{
		margin-top: 1em;
		width: 100%;
		margin-bottom: 2em;
	}

	.topnav_V2{
		margin-top: 1em;
		width: max-content;
		margin-bottom: 2em;

		position: relative;
		top: 2em;	
	}


	.contentZitat3xx
	{
		display: none;
		
		display: grid;
position: relative;
top: 10vh;
		top: 1vh;
width: 100%;
margin: auto;
max-width: 97%;
font-size: 30%;
	background-color: var(--zitatBgColor);
	
	font-size: 75%;
	}

	.contentZitat3xxx
	{
		padding:1em;
	}
}

/***   extra ***/

/**
@media (prefers-color-scheme: dark) {
    html, body {
        background-color: dimgrey;
        color: white;
    }
}

@media (prefers-color-scheme: light) {
    html, body {
        background-color: antiquewhite;
        color: black;
    }

}
**/

body {
 hyphens: auto;
 width: 100%;
}
 
 
* {
 hyphens: auto;
}

.smart
{
	background-color: rgba(var(--colorPalette1),1.0);
	background-color: var(--colorPalette1);
	color: var(--colorPalette6);
	padding: 2em;
	margin:0;
	margin-top:2em;
}

.cloud
{
margin-top: 2em;
}
.onlinemarketing
{
	background-color: rgba(var(--colorPalette4),1.0);
	background-color: var(--colorPalette4);
	color: var(--colorPalette1);
	padding: 2em;
}
.seo
{
	background-color: rgba(var(--colorPalette3),1.0);
	background-color: var(--colorPalette3);
	color: var(--colorPalette1);
	padding: 2em;
}
.sea
{
	background-color: rgba(var(--colorPalette2),1.0);
	background-color: var(--colorPalette2);
	color: var(--colorPalette6);
	padding: 2em;
}
.displayAds
{
	background-color: rgba(var(--colorPalette5),1.0);
	background-color: var(--colorPalette5);
	color: var(--colorPalette1);
	padding: 2em;
}
.www
{
	background-color: rgba(var(--colorPalette5),1.0);
	background-color: var(--colorPalette1);
	color: var(--colorPalette6);
	padding: 2em;
}

.frq
{
	background-color: rgba(var(--colorPalette5),1.0);
	background-color: var(--colorPalette5);
	color: var(--colorPalette1);
	padding: 2em;
}
.ueber
{
	background-color: rgba(var(--colorPalette5),1.0);
	background-color: var(--colorPalette3);
	color: var(--colorPalette1);
	padding: 2em;
	
	margin-top: -6em;
}

.extras
{
	color: var(--colorPalette1);
	padding: 2em;
	
	margin-top: -6em;
}




.startContent
{
background-color: red;
	
	position: relative;
top: 0vh;
	
}

.cloud_icon {
  width: 38em;
  max-width: 95%;
}


@media screen and (min-width: 600px)
{
.startContent
{
/**	background-color: red;**/
	
	position: relative;
//top: -10em;
	
}

.cloud {
  //margin-top: -8em;
}

.cloud_icon
{
	width:  38em;
	max-width: 95%;
}


.banner
{
	margin-bottom: -1vh;
}



	
	.contentZitat
	{
		
		position: relative;
		top: -39vh;
		top: -11vh;
		left: 2.7%;
		font-size: 105%;
		background-color: #00000000;
		width: 40%;
		
		display: none
	}
	
	.contentZitat
	{
		margin-left:0;
		padding-left:0;



		position: relative;
left: 0px;
top: 1em;
font-size: 100%;
background-color: var(--zitatBgColor);
padding-left: 0em;
width: 100%;

	}

	
	.contentZitat3
	{
		position: relative;
		top: 1em;
		font-size:102%;
		background-color: #00000000;
background-color: var(--zitatBgColor);
padding: 0em;
margin: 0em;		
	}
}


.startContent
{
	background-color: green;	
	background-color: darkred; 
	background-color: darkgray; 
	position: relative;
	top: 0em;
	
}


@media screen and (min-width: 800px)
{
.startContent
{
/**	background-color: red;**/
	
	position: relative;
//top: -10em;
	
}

.cloud {
  ////margin-top: -8em;
}

.cloud_icon
{
	width:  38em;
	max-width: 95%;
}


.banner
{
	margin-bottom: -1vh;
}



	
	.contentZitat
	{
		
		position: relative;
		top: -39vh;
		top: -7em;
		left: 2.7%;
		font-size: 105%;
		background-color: #00000000;
		width: 40%;

		margin-left:0;
		padding-left:0;



left: 0px;
font-size: 100%;
background-color: var(--zitatBgColor);
width: 88%;

	}

	
	.contentZitat3
	{
		position: relative;
		top: -8em;
		font-size:102%;
		background-color: #00000000;
		
	}
	
	
}


@media screen and (min-width: 1070px)
{
	ul.topnav_V2 {
  list-style-type: none;
  float: left;
  width: 100%;
  
  margin: auto;
font-size: large;
}





.topnav_V2 {
top: -0.30em;
}

.startContent
{
/**	background-color: red;**/
	
	position: relative;
/**
top: -10em;
**/	
}

.cloud {
  /**
  margin-top: -8em;
  **/
}

.cloud_icon
{
	width:  38em;
	max-width: 95%;
}


.banner
{
	margin-bottom: -1vh;
}



	
	.contentZitat
	{
		
		position: relative;
		top: -39vh;
		top: -13vh;
		left: 2.7%;
		font-size: 105%;
		background-color: #00000000;
		width: 40%;
	}
	.contentZitat
	{
		margin-left:0;
		padding-left:0;



		position: relative;
left: 0px;
top: -20vh;
font-size: 100%;
background-color: var(--zitatBgColor);
padding-left: 3%;
width: 100%;

	}

	
	.contentZitat3
	{
		position: relative;
		top: -10.7em;
		font-size:102%;
		background-color: #00000000;
		width: 41vh;
		width: 168vh;
padding-left: 3%;
		
	}
	
}

@media screen and (min-width: 1500px)
{
	ul.topnav_V2 {
  list-style-type: none;
  float: left;
  width: 90%;
  
  margin: auto;
font-size: large;
}

.topnav_V2 {
top: 0.60em;
}
}

@media screen and (min-width: 1700px)
{
	ul.topnav_V2 {
  list-style-type: none;
  float: left;
  width: 100%;
  
  margin: auto;
font-size: large;
}

.topnav_V2 {
top: 2.20em;
}

.startContent
{
/**	background-color: red;**/
	
	position: relative;
/**
top: -10em;
**/	
}

.cloud {
  /**
  margin-top: -8em;
  **/
}

.cloud_icon
{
	width:  38em;
	max-width: 95%;
}


.banner
{
	margin-bottom: -1vh;
}



	
	.contentZitat
	{
		
		position: relative;
		top: -39vh;
		top: -11vh;
		left: 2.7%;
		font-size: 105%;
		background-color: #00000000;
		width: 40%;
	}
	.contentZitat
	{
		margin-left:0;
		padding-left:0;



		position: relative;
left: 0px;
top: -22vh;
font-size: 100%;
background-color: var(--zitatBgColor);
padding-left: 3%;
width: 100%;

	}

	
	.contentZitat3
	{
		position: relative;
		top: -10em;
		font-size:102%;
		background-color: #00000000;
		
	}
	
	
}

@media screen and (min-width: 1500px)
{
.startContent
{
/**	background-color: red;**/
	
	position: relative;
/**
top: -10em;
**/	
}

.cloud {
  /**
  margin-top: -8em;
  **/
}

.cloud_icon
{
	width:  38em;
	max-width: 95%;
}

.banner
{
	margin-bottom: 0vh;
}


	
	.contentZitat
	{
		
		position: relative;
		top: -39vh;
		top: -11vh;
		left: 2.7%;
		font-size: 105%;
		background-color: #00000000;
		width: 40%;
	}
	.contentZitat
	{
		margin-left:0;
		padding-left:0;



		position: relative;
left: 0px;
top: -12vh;
font-size: 100%;
background-color: var(--zitatBgColor);
padding-left: 3%;
width: 100%;

	}

	
	.contentZitat3
	{
		position: relative;
		top: -15em;
		font-size:103%;
		background-color: #00000000;
		
	}
	

	.topnav_V2 {
		top: -0.3em;
	}

}


@media screen and (min-width: 1900px)
{
.startContent
{
/**	background-color: red;**/
	
	position: relative;
	
}


.cloud {
  /**
  margin-top: -8em;
  **/
}

.cloud_icon
{
	width:  38em;
	max-width: 95%;
}


.banner
{
	margin-bottom: 0vh;
}

	
	.contentZitat3
	{
		position: relative;
		top: -35vh;
		top: -15em;
		font-size:107%;
		background-color: #00000000;

		padding-left:	1.5em;
		margin-left:	0em;
	}
	
	.contentZitat
	{
		
		position: relative;
		top: -39vh;
		top: -12em;
		left: 0em;
		font-size: 109%;

		padding-left:	1.5em;
		margin-left:	0em;
	}


	.topnav_V2 {
		top: 2.1em;
	}

}
@media screen and (min-width: 2500px)
{
.startContent
{
	
	position: relative;
//top: 0vh;
	//top: -23em;
}


.cloud {
  margin-top: -21em;
}

.cloud_icon
{
	width:  38em;
	max-width: 95%;
}

.banner
{
	margin-bottom: 0vh;
}

	
	.contentZitat
	{
		
		position: relative;
		top: -36vh;
		top: -19vh;
		top: -21em;
		left: 2em;
		font-size: 110%;
		background-color: #00000000;
		width: 40%;

		padding-left:	0em;
		margin-left:	0em;
	}
	
	.contentZitat3
	{
		position: relative;
		top: -20em;
		left: 0.5em;
		font-size:110%;
width: 40%;
	}


	.topnav_V2 {
		top: 2.1em;
	}

}	

@media screen and (min-width: 3000px)
{
.startContent
{
	
	position: relative;
//top: 0vh;
//	top: -21em;
}


.cloud {
  margin-top: -20em;
}

.cloud_icon
{
	width:  38em;
	max-width: 40vh;
	max-width: 95%;
}

.banner
{
	margin-bottom: 0vh;
}

	
	.contentZitat
	{
		
		position: relative;
		top: -36vh;
		top: -19vh;
		top: -21em;
		left: 1em;
		font-size: 109%;
		background-color: #00000000;
		width: 40%;

		padding-left:	0.5em;
		margin-left:	0em;
	}
	
	.contentZitat3
	{
		position: relative;
		top: -18em;
		left: 0.0em;
		font-size:110%;
		background-color: #00000000;
	}

	
  
	.topnav_V2 {
		top: 0.8em;
	}

}

@media screen and (min-width: 3018px)
{
  
	.topnav_V2 {
		top: 2.2em;
	}

}

@media screen and (min-width: 3500px)
{
.startContent
{
	
	position: relative;
//top: 0vh;
//	top: -21em;
}


.cloud {
  margin-top: -20em;
}

.cloud_icon
{
	width:  38em;
	max-width: 40vh;
	max-width: 95%;
}

.banner
{
	margin-bottom: 0vh;
}


	
	.contentZitat
	{
		
		position: relative;
		top: -36vh;
		top: -19vh;
		top: -21em;
		left: 4em;
		font-size: 109%;
		background-color: #00000000;
		width: 40%;
		padding-left:	0.5em;
		margin-left:	0em;
max-width: 85vh;
	}
	
	.contentZitat3
	{
		position: relative;
		top: -21em;
		left: 3em;
		font-size:110%;
		background-color: #00000000;
max-width: 85vh;
	}

	
	.topnav_V2 {
		top: 5vh;
	}


}


@media screen and (min-width: 3800px)
{
.startContent
{
	
	position: relative;
//top: 0vh;
	//top: -21em;
}


.cloud {
  margin-top: -20em;
}

.cloud_icon
{
	width:  38em;
	max-width: 40vh;
	max-width: 95%;
}

.banner
{
	margin-bottom: 0vh;
}

	
	
	.contentZitat
	{
		
		position: relative;
		top: -30vh;
		top: -52vh;
		left: 12em;
		font-size: 		109%;
		background-color: #00ffff00;
		width: 33%;
max-width: 85vh;


		padding-left:	0.5em;
		margin-left:	0em;
	}
	
	.contentZitat3
	{
		position: relative;
		top: -30vh;
		top: -52vh;
		left: 10em;
		font-size:120%;
		background-color: #ff00ff00;
max-width: 100vh;
	}
	
	.topnav_V2 {
		top: 5vh;
	}

}