:root {
	--gelb: 		#d6cd1f;
	--blassGelb: 	#c6c6c6;
	--blau: 		#91b6ff;
	--blassBlau: 	#c6c6c6;
	--gruen: 		#6ec400;
	--blassGruen: 	#a9ca7e;
	--orange:		#ff7f27;
	--blassOrange:			#ddddda;
	--rot:			#f24a50;
	--blassRot:				#dddddb;
	--lila:			#ffaec8;
	--blassLila:			#dddddc;
	--citrogelb:	#ffca18;
	--blassCitrogelb:		#ddddde;
	--himmelblau:	#8cfffb;
	--blassHimmelblau:		#dddddf;
	--grau:			#c3c3c3;
	--blassGrau:	#dddddd;
	--deskTop: 		#587a91;
	--mittelGruen:	#407040;
	--deskTopDark:	#4d687b;
}

h1 {
  position: absolute;
  left: 200px;
  top: 10px;
}

h2 {
  color: #305500;
  font-family: Tahoma, sans-serif;
  font-size:x-large;
  font-style: italic;
  font-weight: 900;
}

a {
  color: 6ec400;
  font-family: Tahoma, sans-serif;
  font-size:x-large;
  font-style: italic;
  font-weight: 900;
}

main {
  position: absolute;
  left: 200px;
  top: 18px;
}

.tooltip {  					/* Köpfe Info 407040 */
	color: #305500;
	text-decoration: bolder;
	cursor: help;
	position: relative;
}

.tooltip span[role=tooltip] {
	display: none;
}
.tooltip:hover span[role=tooltip] {
	display: block;
	position: absolute;
	bottom: 3em;
	left: -8em;
	width: 10em;
	padding: 0.5em;
	z-index: 100;
	color: #000000;
	font-family:Tahoma;
	background-color: #0ed145;
	border: solid 1px #0c7e2c;
	border-radius: 1em;
}


.tooltipTR { 					/* Köpfe Infos tiefer und rechts */
	color: #305500;
	text-decoration: bolder;
	cursor: help;
	position: relative;
}

.tooltipTR span[role=tooltipTR] {
	display: none;
}
.tooltipTR:hover span[role=tooltipTR] {
	display: block;
	position: absolute;
	bottom: -3em;
	left: 3em;
	width: 10em;
	padding: 0.5em;
	z-index: 100;
	color: #000000;
	font-family:Tahoma;
	background-color: #0ed145;
	border: solid 1px #0c7e2c;
	border-radius: 1em;
}

.tooltip1 {					/*Infos in der Wolke */
	color: #305500;
	text-decoration: bolder;
	cursor: help;
	position: relative;
}
.tooltip1 span[role=tooltip1] {
	display: none;
}
.tooltip1:hover span[role=tooltip1] {
	display: block;
	position: absolute;
	bottom: 1em;
	left: 5em;
	width: 40em;
	padding: 0.5em;
	z-index: 100;
	color: #000000;
    font-family: Tahoma;
    font-size:18;
    font-style: italic;
	background-color: #0ed145;
	border: solid 1px #0c7e2c;
	border-radius: 1em;
}

.infotip {					/*Info Punkte */
	color: #305500;
	text-decoration: bolder;
	cursor: help;
	position: relative;
}
.infotip span[role=infotip] {
	display: none;
}
.infotip:hover span[role=infotip] {
	display: block;
	position: absolute;
	bottom: -5em;
	left: 5em;
	width: 40em;
	padding: 0.5em;
	z-index: 100;
	color: #000000;
    font-family: Tahoma;
    font-size:18;
    font-style: italic;
	background-color: #0ed145;
	border: solid 1px #0c7e2c;
	border-radius: 1em;
}

.qwirkletip {					/*Info Punkte */
	color: #305500;
	text-decoration: bolder;
	cursor: help;
	position: relative;
}
.qwirkletip span[role=qwirkletip] {
	display: none;
}
.qwirkletip:hover span[role=qwirkletip] {
	display: block;
	position: absolute;
	bottom: -25em;
	left: -16em;
	width: 40em;
	padding: 0.5em;
	z-index: 1;
	color: #000000;
    font-family: Tahoma;
    font-size:18;
    font-style: italic;
	background-color: #0ed145;
	border: solid 1px #0c7e2c;
	border-radius: 1em;
}


/* .button {	
  border: none;
  color: white;
  padding: 128px 128px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 48px;
  margin: 4px 2px;
  cursor: pointer;
}


.button1 {background-color: #4CAF50; outline: 4px solid red;} /* Green 
.button2 {background-color: #008CBA; outline: 4px solid red;} /* Blue * */