body {
  background-color: #000000;
  --farbe_header: #00ff00;
  --farbe_background_for_content: #a1ffa1;
}

mark {
  margin: 0 -0.4em;
  padding: 0.1em 0.4em;
  border-radius: 0.8em 0.3em;
  background: transparent;
  background-image: linear-gradient(
    to right,
    rgba(255, 225, 0, 0.1),
    rgba(255, 225, 0, 0.7) 4%,
    rgba(255, 225, 0, 0.3)
  );
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

a img {
background-color:transparent;
border: 3px solid var(--farbe_header);
border-radius: 10px;
vertical-align:bottom;
}

a:hover {color: #303030; background: #ffffff;} 


a:hover img {border: 3px solid white; border-radius: 10px; background-color:transparent; vertical-align:middle;}

#box {

width: 1516px;
min-width: 1516px;
height: 640px;
margin: auto;
background:black;
position:relative;

}

#leftpart {
font-family: Helvetica;
font-size: 16px;
width: 300px;
height: 712px;
background: black;
border-top-left-radius:15px;
border-top-right-radius:15px;
border-bottom-left-radius:15px;
border-bottom-right-radius:15px;
background: black;
float:left;
}

#leftpart_index {
font-family: Helvetica;
font-size: 16px;
width: 300px;
height: 712px;
background: black;
border-top-left-radius:15px;
border-top-right-radius:15px;
border-bottom-left-radius:15px;
border-bottom-right-radius:15px;
background: var(--farbe_background_for_content);
display: flex;
align-items: center;
justify-content: center;
float:left;
}

#leftpart_switches {
font-family: Helvetica;
font-size: 14px;
width: 300px;
height: 40px;
background: var(--farbe_background_for_content);
border-top-left-radius:15px;
border-top-right-radius:15px;
border-bottom-left-radius:15px;
border-bottom-right-radius:15px;
display: flex;
align-items: center;
justify-content: center;
}
#leftpart_switches_left {
font-family: Helvetica;
font-size: 14px;
width: 139px;
height: 40px;
display: flex;
border-top-left-radius:15px;
border-bottom-left-radius:15px;
align-items: center;

}
#leftpart_switches_right {
font-family: Helvetica;
font-size: 14px;
width: 139px;
height: 40px;
display: flex;
align-items: center;
justify-content: right;
border-top-right-radius:15px;
border-bottom-right-radius:15px;
}


#leftpart_content {
font-family: Helvetica;
font-size: 16px;
width: 300px;
height: 672px;
background: black;
border-bottom-left-radius:15px;
border-bottom-right-radius:15px;
}

#leftpart_list {
font-family: Helvetica;
font-size: 16px;
width: 300px;
height: 422px;
background: var(--farbe_header);
border-bottom-left-radius:15px;
border-bottom-right-radius:15px;
overflow-y:auto;
overflow-x:hidden;
}

#leftpart_listhead {
font-family: Helvetica;
font-size: 11px;
width: 300px;
height: 40px;
background: var(--farbe_background_for_content);
border-top-left-radius:15px;
border-top-right-radius:15px;
display: flex;
align-items: center;
}

#hr_left {
width: 300px;
height: 5px;
background: black;
}
#leftpart_rlfilter {
font-family: Helvetica;
font-size: 10px;
width: 300px;
height: 245px;
background: var(--farbe_background_for_content);
border-top-left-radius:15px;
border-top-right-radius:15px;
border-bottom-left-radius:15px;
border-bottom-right-radius:15px;
display: flex;
align-items: center;
justify-content: center;
}

#main_links_subfamily_back {
font-family: Helvetica;
font-size: 16px;
width: 300px;
height: 26px;
background: var(--farbe_background_for_content);
display: flex;
align-items: end;
}
#main_links_subfamily_rounded {
font-family: Helvetica;
font-size: 16px;
width: 300px;
height: 26px;
background: var(--farbe_header);
border-top-left-radius:15px;
display: flex;
align-items: center;
}



#rightpart {
font-family: Helvetica;
font-size: 16px;
width: 300px;
height: 712px;
background: var(--farbe_header);
border-top-left-radius:15px;
border-top-right-radius:15px;
border-bottom-left-radius:15px;
border-bottom-right-radius:15px;
float:left;
overflow:auto;
}

#rightpart_index {
font-family: Helvetica;
font-size: 16px;
width: 300px;
height: 712px;
background: var(--farbe_background_for_content);
border-top-left-radius:15px;
border-top-right-radius:15px;
border-bottom-left-radius:15px;
border-bottom-right-radius:15px;
float:left;
overflow:auto;
}

#main_rechts_titel {
font-family: Helvetica;
font-size: 16px;
width: 300px;
height: 40px;
background: var(--farbe_header);
border-top-left-radius:15px;
border-top-right-radius:15px;
display: flex;
justify-content: center;
align-items: center;
}

#main_rechts_body {
font-family: Helvetica;
font-size: 12px;
width: 300px;
height: 672px;
background: var(--farbe_background_for_content);
border-bottom-left-radius:15px;
border-bottom-right-radius:15px;

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

overflow:auto;
}

#vr {
width: 5px;
height: 712px;
background: black;
float:left;
}


#mainpart {
width: 906px;
height: 712px;
margin: auto;
background:black;
position:relative;
float:left;
}

#mainpart_index {
width: 906px;
height: 712px;
margin: auto;
background:black;
position:relative;
background:var(--farbe_background_for_content);
border-top-left-radius:15px;
border-top-right-radius:15px;
border-bottom-left-radius:15px;
border-bottom-right-radius:15px;
float:left;
}

#mainpart_navi{
width: 906px;
height: 40px;
background:var(--farbe_background_for_content);
font-family: Helvetica;
font-size: 18px;
display: flex;
align-items: center;
border-top-left-radius:15px;
border-top-right-radius:15px;
border-bottom-left-radius:15px;
border-bottom-right-radius:15px;
float:left;
}

#mainpart_navi_left {
width: 800px;
height: 40px;
background:var(--farbe_background_for_content);
font-family: Helvetica;
font-size: 18px;
display: flex;
align-items: center;
border-top-left-radius:15px;
border-bottom-left-radius:15px;

}

#mainpart_navi_right {
width: 106px;
height: 40px;
background:var(--farbe_background_for_content);
font-family: Helvetica;
font-size: 13px;
display: flex;
align-items: center;
justify-content: right;
border-top-right-radius:15px;
border-bottom-right-radius:15px;
}


#hr_main {
width: 906px;
height: 5px;
background: black;
float:left;
}

#mainpart_content {
	
width: 906px;
height: 667px;
font-family: Helvetica;
font-size: 9px;
border-top-left-radius:15px;
border-top-right-radius:15px;
border-bottom-left-radius:15px;
border-bottom-right-radius:15px;
background:var(--farbe_background_for_content);
overflow:auto;
font-size: 9px;
text-align: center;
overflow-x:hidden;
float:left;

}

#mainpart_content_for_scroll_box {
	
width: 906px;
height: 667px;
border-top-left-radius:15px;
border-top-right-radius:15px;
border-bottom-left-radius:15px;
border-bottom-right-radius:15px;
overflow-x:hidden;
float:left;
display: flex;
align-items: center;

}

#mainpart_content_for_scroll {
	
width: 906px;
height: 643px;
font-family: Helvetica;
font-size: 9px;
border-top-left-radius:15px;
border-top-right-radius:15px;
border-bottom-left-radius:15px;
border-bottom-right-radius:15px;
background:var(--farbe_background_for_content);
overflow:auto;
font-size: 9px;
text-align: center;
overflow-x:hidden;
float:left;

}


#steckbrieftitel {
/*left: 120px;*/
width: 856px;
height: 50px;
border-top-left-radius:15px;
background: var(--farbe_header);
font-family: Helvetica;
font-variant: normal;
font-size: 35px;
font-weight: 1000;
display: flex;
align-items: center;
float:left;
}
#RL-BOX {
	width: 50px;
	height: 50px;
	background: var(--farbe_header);
	border-top-right-radius:15px;
	display: flex;
	align-items: center;
	float:left;
}


#trennbalken {
left: 120px;
width: 906px;
height: 5px;
background: var(--farbe_header);
font-family: Helvetica;
font-variant: normal;
font-size: 35px;
font-weight: 1000;
display: flex;
align-items: center;
float:left;
}
#trennbalken2 {
left: 120px;
width: 906px;
height: 6px;
background: var(--farbe_header);
font-family: Helvetica;
font-variant: normal;
font-size: 35px;
font-weight: 1000;
display: flex;
align-items: center;
float:left;
}


#RL-D {
	width: 30px;
	height: 30px;
	color: black;
	border-radius: 100px;	
	border:3px solid #000000;
	background: #d8d8d9;
	font-family: Helvetica;
	font-variant: normal;
	font-size: 15px;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	float:left;
}
#RL-3 {
	width: 30px;
	height: 30px;
	color: black;
	border-radius: 100px;	
	border:3px solid #000000;
	background: #ffff00;
	font-family: Helvetica;
	font-variant: normal;
	font-size: 15px;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	float:left;
}
#RL-2 {
	width: 30px;
	height: 30px;
	color: black;
	border-radius: 100px;	
	border:3px solid #000000;
	background: #e59324;
	font-family: Helvetica;
	font-variant: normal;
	font-size: 15px;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	float:left;
}
#RL-1 {
	width: 30px;
	height: 30px;
	color: black;
	border-radius: 100px;	
	border:3px solid #000000;
	background: #ff0000;
	font-family: Helvetica;
	font-variant: normal;
	font-size: 15px;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	float:left;
}
#RL-0 {
	width: 30px;
	height: 30px;
	color: white;
	border-radius: 100px;	
	border:3px solid #000000;
	background: #000000;
	font-family: Helvetica;
	font-variant: normal;
	font-size: 15px;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	float:left;
}
#RL-N {
	width: 30px;
	height: 30px;
	color: black;
	border-radius: 100px;	
	border:3px solid #000000;
	background: #00ff00;
	font-family: Helvetica;
	font-variant: normal;
	font-size: 15px;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	float:left;
}
#RL-G {
	width: 30px;
	height: 30px;
	color: black;
	border-radius: 100px;	
	border:3px solid #000000;
	background: #817054;
	font-family: Helvetica;
	font-variant: normal;
	font-size: 15px;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	float:left;
}
#RL-R {
	width: 30px;
	height: 30px;
	color: black;
	border-radius: 100px;	
	border:3px solid #000000;
	background: #00ffff;
	font-family: Helvetica;
	font-variant: normal;
	font-size: 15px;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	float:left;
}
#RL-V {
	width: 30px;
	height: 30px;
	color: black;
	border-radius: 100px;	
	border:3px solid #000000;
	background: #95ff00;
	font-family: Helvetica;
	font-variant: normal;
	font-size: 15px;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	float:left;
}
#mini_RL-N {
	width: 15px;
	height: 15px;
	color: black;
	border-radius: 100px;	
	border:1px solid #000000;
	background: #00ff00;
	font-family: Helvetica;
	font-variant: normal;
	font-size: 11px;
	font-weight: 400;
	display: flex;
	align-items: center;
	justify-content: center;
	float:left;
}
#mini_RL-1 {
	width: 15px;
	height: 15px;
	color: black;
	border-radius: 100px;	
	border:1px solid #000000;
	background: #ff0000;
	font-family: Helvetica;
	font-variant: normal;
	font-size: 11px;
	font-weight: 400;
	display: flex;
	align-items: center;
	justify-content: center;
	float:left;
}
#mini_RL-2 {
	width: 15px;
	height: 15px;
	color: black;
	border-radius: 100px;	
	border:1px solid #000000;
	background: #e59324;
	font-family: Helvetica;
	font-variant: normal;
	font-size: 11px;
	font-weight: 400;
	display: flex;
	align-items: center;
	justify-content: center;
	float:left;
}
#mini_RL-3 {
	width: 15px;
	height: 15px;
	color: black;
	border-radius: 100px;	
	border:1px solid #000000;
	background: #ffff00;
	font-family: Helvetica;
	font-variant: normal;
	font-size: 11px;
	font-weight: 400;
	display: flex;
	align-items: center;
	justify-content: center;
	float:left;
}
#mini_RL-V {
	width: 15px;
	height: 15px;
	color: black;
	border-radius: 100px;	
	border:1px solid #000000;
	background: #95ff00;
	font-family: Helvetica;
	font-variant: normal;
	font-size: 11px;
	font-weight: 400;
	display: flex;
	align-items: center;
	justify-content: center;
	float:left;
}
#mini_RL-G {
	width: 15px;
	height: 15px;
	color: black;
	border-radius: 100px;	
	border:1px solid #000000;
	background: #817054;
	font-family: Helvetica;
	font-variant: normal;
	font-size: 11px;
	font-weight: 400;
	display: flex;
	align-items: center;
	justify-content: center;
	float:left;
}
#mini_RL-R {
	width: 15px;
	height: 15px;
	color: black;
	border-radius: 100px;	
	border:1px solid #000000;
	background: #00ffff;
	font-family: Helvetica;
	font-variant: normal;
	font-size: 11px;
	font-weight: 400;
	display: flex;
	align-items: center;
	justify-content: center;
	float:left;
}
#mini_RL-0 {
	width: 15px;
	height: 15px;
	color: white;
	border-radius: 100px;	
	border:1px solid #000000;
	background: #000000;
	font-family: Helvetica;
	font-variant: normal;
	font-size: 11px;
	font-weight: 400;
	display: flex;
	align-items: center;
	justify-content: center;
	float:left;
}
#mini_RL-D {
	width: 15px;
	height: 15px;
	color: black;
	border-radius: 100px;	
	border:1px solid #000000;
	background: #d8d8d9;
	font-family: Helvetica;
	font-variant: normal;
	font-size: 11px;
	font-weight: 400;
	display: flex;
	align-items: center;
	justify-content: center;
	float:left;
}


#Steckbrief_box_info1 {
width: 906px;
height: 35px;
background: var(--farbe_header);
display: flex;
align-items: center;
float:left;

}
#Steckbrief_box_info1_familie {
width: 300px;
height: 35px;
background: var(--farbe_background_for_content);
border:1px solid var(--farbe_header);
font-family: Helvetica;
font-size: 18px;
font-weight: 400;
display: flex;
align-items: center;
justify-content: center;
float:left;
}
#Steckbrief_box_info1_wname {
width: 300px;
height: 35px;
background: var(--farbe_background_for_content);
border:1px solid var(--farbe_header);
font-family: Helvetica;
font-variant: normal;
font-style: italic;
font-size: 16px;
font-weight: 400;
display: flex;
align-items: center;
justify-content: center;
float:left;
}
#Steckbrief_box_info1_beschreiber {
width: 300px;
height: 35px;
background: var(--farbe_background_for_content);
border:1px solid var(--farbe_header);
font-family: Helvetica;
font-variant: small-caps;
font-size: 16px;
font-weight: 400;
display: flex;
align-items: center;
justify-content: center;
}

#Steckbrief_box_info2 {
width: 906px;
height: 35px;
background: var(--farbe_header);
display: flex;
align-items: center;
float:left;

}
#Steckbrief_box_info2_groesse {
width: 300px;
height: 35px;
background: var(--farbe_background_for_content);
border:1px solid var(--farbe_header);
font-family: Helvetica;
font-size: 14px;
font-weight: 400;
display: flex;
align-items: center;
justify-content: center;
float:left;
}
#Steckbrief_box_info2_phenogramm {
width: 602px;
height: 35px;
background: var(--farbe_background_for_content);
border:1px solid var(--farbe_header);
font-family: Helvetica;
font-variant: small-caps;
font-size: 14px;
font-weight: 400;
display: flex;
align-items: center;
justify-content: center;
float:left;
}

#Steckbrief_box_bilder1 {
width: 906px;
height: 208px;
background: var(--farbe_background_for_content);
display: flex;
align-items: center;
float:left;
}
#shot0 {
  height: 208px;
  width: 300px;
  border:1px solid var(--farbe_background_for_content);
  background: #303030;
  float:left;
  overflow:hidden;
}
#shot1 {
  height: 208px;
  width: 300px;
  border:1px solid var(--farbe_background_for_content);
  background: #303030;
  float:left;
  overflow:hidden;
}
#shot2 {
  height: 208px;
  width: 300px;
  border:1px solid var(--farbe_background_for_content);
  background: #303030;
  float:left;
  overflow:hidden;
}
#Steckbrief_box_bilder1_details {
width: 906px;
height: 40px;
background: var(--farbe_background_for_content);
display: flex;
align-items: center;
float:left;
}
#shot0_flag {
  font-family: Helvetica;
  font-size: 10px;
  height: 40px;
  width: 40px;
  border:1px solid var(--farbe_background_for_content);
  background: var(--farbe_background_for_content);
  display: flex;
  align-items: center;
  justify-content: center;
  float:left;
  overflow:hidden;
}
#shot0_info {
  font-family: Helvetica;
  font-size: 10px;
  height: 40px;
  width: 258px;
  border:1px solid var(--farbe_background_for_content);
  background: var(--farbe_background_for_content);
  display: flex;
  align-items: center;
  float:left;
  overflow:hidden;
}
#shot1_flag {
  font-family: Helvetica;
  font-size: 10px;
  height: 40px;
  width: 40px;
  border:1px solid var(--farbe_background_for_content);
  background: var(--farbe_background_for_content);
  display: flex;
  align-items: center;
  justify-content: center;
  float:left;
  overflow:hidden;
}
#shot1_info {
  font-family: Helvetica;
  font-size: 10px;
  height: 40px;
  width: 258px;
  border:1px solid var(--farbe_background_for_content);
  background: var(--farbe_background_for_content);
  display: flex;
  align-items: center;
  float:left;
  overflow:hidden;
}
#shot2_flag {
  font-family: Helvetica;
  font-size: 10px;
  height: 40px;
  width: 40px;
  border:1px solid var(--farbe_background_for_content);
  background: var(--farbe_background_for_content);
  display: flex;
  align-items: center;
  justify-content: center;
  float:left;
  overflow:hidden;
}
#shot2_info {
  font-family: Helvetica;
  font-size: 10px;
  height: 40px;
  width: 258px;
  border:1px solid var(--farbe_background_for_content);
  background: var(--farbe_background_for_content);
  display: flex;
  align-items: center;
  float:left;

}

#Steckbrief_box_bilder2 {
width: 906px;
height: 208px;
background: var(--farbe_background_for_content);
display: flex;
align-items: center;
float:left;
}
#shot3 {
  height: 208px;
  width: 300px;
  border:1px solid var(--farbe_background_for_content);
  background: #303030;
  float:left;
  overflow:hidden;
}
#shot4 {
  height: 208px;
  width: 300px;
  border:1px solid var(--farbe_background_for_content);
  background: #303030;
  float:left;
  overflow:hidden;
}
#shot5 {
  height: 208px;
  width: 300px;
  border:1px solid var(--farbe_background_for_content);
  background: #303030;
  float:left;
  overflow:hidden;
}
#Steckbrief_box_bilder2_details {
width: 906px;
height: 40px;
background: var(--farbe_background_for_content);
display: flex;
align-items: center;
float:left;
}
#shot3_flag {
  font-family: Helvetica;
  font-size: 10px;
  height: 40px;
  width: 40px;
  border:1px solid var(--farbe_background_for_content);
  background: var(--farbe_background_for_content);
  display: flex;
  align-items: center;
  justify-content: center;
  float:left;
  overflow:hidden;
}
#shot3_info {
  font-family: Helvetica;
  font-size: 10px;
  height: 40px;
  width: 258px;
  border:1px solid var(--farbe_background_for_content);
  background: var(--farbe_background_for_content);
  display: flex;
  align-items: center;
  float:left;
  overflow:hidden;
}
#shot4_flag {
  font-family: Helvetica;
  font-size: 10px;
  height: 40px;
  width: 40px;
  border:1px solid var(--farbe_background_for_content);
  background: var(--farbe_background_for_content);
  display: flex;
  align-items: center;
  justify-content: center;
  float:left;
  overflow:hidden;
}
#shot4_info {
  font-family: Helvetica;
  font-size: 10px;
  height: 40px;
  width: 258px;
  border:1px solid var(--farbe_background_for_content);
  background: var(--farbe_background_for_content);
  display: flex;
  align-items: center;
  float:left;
  overflow:hidden;
}
#shot5_flag {
  font-family: Helvetica;
  font-size: 10px;
  height: 40px;
  width: 40px;
  border:1px solid var(--farbe_background_for_content);
  background: var(--farbe_background_for_content);
  display: flex;
  align-items: center;
  justify-content: center;
  float:left;
  overflow:hidden;
}
#shot5_info {
  font-family: Helvetica;
  font-size: 10px;
  height: 40px;
  width: 258px;
  border:1px solid var(--farbe_background_for_content);
  background: var(--farbe_background_for_content);
  display: flex;
  align-items: center;
  float:left;
  overflow:hidden;
}


#Steckbrief_footer {
width: 906px;
height: 40px;
border-bottom-right-radius:15px;
border-bottom-left-radius:15px;
background: var(--farbe_header);
font-family: Helvetica;
font-variant: normal;
font-size: 10px;
font-weight: 400;
display: flex;
align-items: center;
float:left;
}

#Steckbrief_footer_erstfund {
width: 453px;
height: 40px;
border-bottom-right-radius:15px;
border-bottom-left-radius:15px;
background: var(--farbe_header);
font-family: Helvetica;
font-variant: normal;
font-size: 10px;
font-weight: 400;
display: flex;
align-items: center;
float:left;
}

#Steckbrief_footer_lastupdate {
width: 453px;
height: 40px;
border-bottom-right-radius:15px;
border-bottom-left-radius:15px;
background: var(--farbe_header);
font-family: Helvetica;
font-variant: normal;
font-size: 10px;
font-weight: 400;
display: flex;
align-items: center;
justify-content: right;
float:left;
}


#hr_full {
width: 1516px;
height: 5px;
background: #000000;
font-family: Helvetica;
font-variant: normal;
font-size: 35px;
font-weight: 1000;
display: flex;
align-items: center;
float:left;
}

#footer {
width: 1516px;
height: 44px;
border-top-left-radius:15px;
border-top-right-radius:15px;
border-bottom-left-radius:15px;
border-bottom-right-radius:15px;
background: var(--farbe_header);

font-family: Helvetica;
font-variant: normal;
font-size: 10px;
font-weight: 400;
display: flex;
align-items: center;
float:left;

}

#header {
width: 1516px;
height: 100px;
border-top-left-radius:15px;
border-top-right-radius:15px;
border-bottom-left-radius:15px;
border-bottom-right-radius:15px;
background: var(--farbe_header);
font-family: Helvetica;
font-variant: normal;
font-size: 20px;
font-weight: 1000;
display: flex;
align-items: center;
float:left;
}

#header_logo {
font-family: Helvetica;
font-size: 16px;
width: 304px;
height: 100px;
border-top-left-radius:15px;
border-bottom-left-radius:15px;
background: var(--farbe_header);
float:left;
}

#header_logo_left {
font-family: Helvetica;
font-size: 16px;
width: 10px;
height: 100px;
border-top-left-radius:15px;
border-bottom-left-radius:15px;
background: var(--farbe_header);
float:left;
}

#header_logo_middle {
font-family: Helvetica;
font-size: 16px;
width: 100px;
height: 100px;
background: var(--farbe_header);
float:left;
}

#header_logo_right {
display:flex;
align-items:center;
justify-content:center;
font-family: Helvetica;
font-size: 10px;
font-weight: 100;
text-align:center;
width: 194px;
height: 100px;
background: var(--farbe_header);
float:left;
}

#header_main {
font-family: Helvetica;
font-size: 16px;
width: 908px;
height: 100px;
float:left;
}

#header_main_top {
font-family: Helvetica;
font-size: 30px;
font-weight: 1000;
letter-spacing: -2px;
width: 908px;
height: 38px;
float:left;
}

#header_main_middle {
font-family: Helvetica;
font-size: 12px;
font-weight: 100;
letter-spacing: 1px;
display:flex;
align-items:top;
width: 908px;
height: 14px;
float:left;
}

#header_main_buttom_menu {
font-family: Helvetica;
font-size: 12px;
width: 908px;
height: 48px;
float:left;
}

#header_right {
font-family: Helvetica;
font-size: 16px;
width: 304px;
height: 100px;
border-top-right-radius:15px;
border-bottom-right-radius:15px;
float:left;
}

#header_right_left {
font-family: Helvetica;
font-size: 16px;
width: 52px;
height: 100px;
float:left;
}

#header_right_middle {
font-family: Helvetica;
font-size: 16px;
width: 200px;
height: 100px;
float:left;
}
#header_right_right {
font-family: Helvetica;
font-size: 16px;
width: 52px;
height: 100px;
border-top-right-radius:15px;
border-bottom-right-radius:15px;
float:left;
}

/*START MENU */

:root {
  --bg-color: #00ff00;
  --text-color: black;
  --accent-color: #00dd00;
  --dropdown-bg: #a1ffa1;
}

/* Haupt-Navigationsleiste */
.nav-links {
  display: flex;
  list-style: none;
  background-color: var(--bg-color);
  padding: 0;
  margin: 0;
  border: 1px;
  border-radius: 15px;
}

.nav-links li {
  position: relative; /* Wichtig für die Positionierung des Dropdowns */
}

.nav-links a {
  display: block;
  padding: 15px 20px;
  color: var(--text-color);
  text-decoration: none;
  transition: background 0.3s;
}

.nav-links a:hover {
  background-color: var(--accent-color);

}

/* Dropdown-Menü Styling */
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: var(--dropdown-bg);
  min-width: 180px;
  list-style: none;
  padding: 0;
  display: none; /* Standardmäßig ausblenden */
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
  border-radius: 15px;
  z-index: 999;
}

.dropdown-menu li a {
  padding: 12px 15px;
}

/* Einblenden bei Hover */
.dropdown:hover .dropdown-menu {
  display: block;
  animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}


/*ENDE MENU */

.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .6s;
  transition: .6s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 13px;
  width: 13px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: var(--farbe_header);

}

input:focus + .slider {
  box-shadow: 0 0 1px var(--farbe_header);

}

input:checked + .slider:before {
  -webkit-transform: translateX(19px);
  -ms-transform: translateX(19px);
  transform: translateX(19px);

}

/* Rounded sliders */
.slider.round {
  border-radius: 20px;
}

.slider.round:before {
  border-radius: 50%;
}