@font-face							{   font-family: 'BankGothic';
										src: url('https://www.bikespeed.de/font/BNKGOTHM.woff2') format('woff2'),
											 url('https://www.bikespeed.de/font/BNKGOTHM.woff') format('woff'),
											 url('https://www.bikespeed.de/font/BNKGOTHM.ttf ') format('truetype');}

:root								{
										--top-backcolor:			#DDDDDD;
										--link-backcolor:			#888888;
										--link-color:				#008800;
										--language-color:			#AAAAAA;
										--table-header-backcolor:	#008800;
										--shop-backcolor:			#DDDDDD;
										--hint-backcolor:			#FFD878;}

html, body, form					{	width:					100%;
										margin:					0;
										padding:				0;										
										color:					#000000;
										font-family:			Helvetiva, Sans-Serif;
										font-size:				110%;
										line-height:			1.2;
										overflow:				hidden;}
										
body								{	overflow-x:				none;}

h1									{	padding:				0;
										margin:					0;
										font-family:			Tahoma, Helvetiva, Sans-Serif;
										font-weight:			bold;
										font-size:				200%;
										margin-bottom:			20px;}
		
h2									{	padding:    	        0;
										margin:     	        0;
										font-family:			Tahoma, Helvetiva, Sans-Serif;
										font-weight:			bold;
										font-size:  	        150%;
										margin-bottom:			20px;}
		
h3									{	padding:				0px;
										margin:					0px;
										font-family:			Tahoma, Helvetiva, Sans-Serif;
										font-weight:			bold;
										font-size:				120%;
										margin-bottom:			20px;}



a									{   font-size:				100%;
										font-weight:			bold;
										text-decoration:		none;
										color:					var(--link-color);}
a:hover,
a:focus								{   text-decoration:		underline;}

input								{	font-size:				1rem;}



.Logo								{	width:					30%;
										max-width:				500px;
										color:					#000000;
										display:				flex;
										align-items:			center;
										justify-content:		center;
										font-family:			BankGothic, Helvetiva, Sans-Serif;
										font-weight:			bold;
										font-size:				70px;
										font-size:				4vw;
										position:				absolute;
										top:					80px;
										right:					120px;}
										
.LogoFaster							{	width:					334px;
										height:					40px;
										position:				absolute;
										top:					140px;
										right:					220px;}

.LogoBike							{	width:					141px;
										height:					100px;
										position:				absolute;
										top:					80px;
										right:					30px;}

.Backframe							{	height:					100%;
										min-width:				850px;
										overflow-x:				auto;
										overflow-y:				hidden;
										display:				grid;
										padding:				0;
										margin:					0;}

.HeaderWrapper						{	width:					100%;
										height:					70px;
										position:				absolute;
										top:					0;
										left:					0;
										z-index:				10;
										display:				grid;
										grid-template-columns:	1fr 150px;
										flex-wrap:				nowrap;
										padding:				0;
										margin:					0;}

.HeaderFrame						{	width:					100%;
										height:					70px;
										background-color:		var(--top-backcolor);
										opacity:				0.9;
										display:				flex;
										align-items:			center;}

.HeaderNav							{	min-width:				300px;}

.HeaderNav a						{	float:					left;
										margin-left:			20px;}

.ContentWrapper						{	width:					100%;
										height:					100%;
										position:				absolute;
										top:					0;
										left:					0;
										overflow-y:				auto;
										padding:				0;
										margin:					0;}

.ContentHeader						{	background-color:		#FFFFFF;
										min-width:				850px;
										min-height:				100px;
										padding-top:			80px;
										display:				grid;
										grid-template-columns:	1fr 500px;
										flex-wrap:				nowrap;}

.ContentFrame						{	background-color:		#FFFFFF;
										min-width:				850px;
										min-height:				500px;
										padding:				10px;}

.ContentWindowFrame					{	width:					60%;
										max-width:				900px;
										border-radius:			20px;
										box-shadow:				10px 10px 15px rgba(0, 0, 0, 0.3);
										background-color:		#EEEEEE;
										margin-bottom:			50px;
										margin-right:			20px;
										padding:				20px;}

.ContentWindowFrame img				{	width:					300px;
										height:					200px;
										border:					solid 2px #000000;
										float:					right;
										margin-left:			20px;
										margin-bottom:			20px;}

.ContentWindowFrame table			{	font-size:				70%;
										border:					solid 1px #000000;
										border-spacing:			0;}

.ContentWindowFrame table tr th		{	font-weight:			bold;
										border:					solid 1px #000000;
										vertical-align:			top;
										text-align:				left;
										background-color:		var(--table-header-backcolor);
										color:					#FFFFFF;
										padding:				2px;}

.CompatibilityFrame					{	width:					90%;
										max-width:				950px;}

.CompatibilityFrame table tr th:nth-child(1) {	  width:		100px;}
.CompatibilityFrame table tr th:nth-child(2) {	  width:		100px;}
.CompatibilityFrame table tr th:nth-child(3) {	  width:		180px;}
.CompatibilityFrame table tr th:nth-child(4) {	  width:		180px;}
.CompatibilityFrame table tr th:nth-child(5) {	  width:		180px;}
.CompatibilityFrame table tr th:nth-child(6) {	  width:		100px;}

.CompatibilityFrame table tr td		{	border:					solid 1px #000000;
										vertical-align:			top;
										background-color:		#FFFFFF;
										color:					#000000;
										padding:				2px;}

.HintFrame							{	margin:					10px;
										padding:				10px;
										background-color:		var(--hint-backcolor);
										box-shadow:				10px 10px 15px rgba(0, 0, 0, 0.3);
										border-radius:			20px;
										margin-bottom:			30px;}

.CookieFrame						{	width:					80%;
										display:				grid;
										grid-template-columns:	1fr 100px;
										flex-wrap:				nowrap;
										font-size:				80%;
										margin-bottom:			50px;}

.FooterFrame						{	width:					100%;
										height:					40px;
										font-size:				12px;
										vertical-align:			bottom;
										padding:				0;
										margin:					0;}

#Rechtliches_content>ul				{	line-height:			0.75;}

.ULlist								{	list-style-type:		square;
										margin:					0;
										padding:				0 0 0 1rem;}

.ULlist li							{	margin:					0;
										padding:				0 0 0 1rem;}

 .whatsapp-business					{	background-color:		#25D366;
										color:					#FFFFFF;
										padding:				10px 20px;
										border:					none;
										border-radius:			5px;
										text-decoration:		none;
										display:				inline-block;
										cursor:					pointer;
										transition:				background-color 0.3s;}
.whatsapp-business:hover			{	background-color:		#1DA851;}

.ShopStatusFrame					{	position:				fixed;
										left:					25%;
										top:					40%;
										width:					50%;
										height:					20%;
										border:					solid 5px #FF0000;
										display:				flex;
										flex-direction:			column;
										align-items:			center;
										justify-content:		space-between;
										font-weight:			bold;
										font-size:				150%;
										background-color:		var(--hint-backcolor);
										border-radius:			20px;
										box-shadow:				10px 10px 15px rgba(0, 0, 0, 0.3);
										padding:				20px;
										z-index:				5;}

.ShopStatusFrame a					{	width:					200px;
										height:					3rem;
										display:				flex;
										align-items:			center;
										justify-content:		center;
										background-color:		var(--link-backcolor);
										color:					#000000;
										border-radius:			5px;}
										
.ShopStatusFrame a:hover,
.ShopStatusFrame a:focus			{	background-color:		var(--link-color);
										text-decoration:		none;}
									
.ShopFrame							{	margin:					10px;
										padding:				10px;
										background-color:		var(--shop-backcolor);
										box-shadow:				10px 10px 15px rgba(0, 0, 0, 0.3);
										margin-right:			15px;
										margin-top:				2em;
										border-radius:			20px;}

.ShopGrid							{	display:				flex;
										flex-flow:				row wrap;
										align-items:			flex-start;
										justify-content:		flex-start;}

.ShopGrid>a							{	width:					25%;
										max-width:				220px;
										display:				flex;
										flex-flow:				column wrap;
										background-color:		#AAAAAA;
										color:					var(--link-color);
										border-radius:			20px;
										align-items:			center;
										justify-content:		center;
										margin:					10px;
										padding:				0 0 0.5rem 0;}
										
.ShopGrid>a:hover,
.ShopGrid>a:focus					{	background-color:		var(--link-color);
										color:					#000000;
										text-decoration:		none;}

.ShopGrid>a:hover .ShopTuningDescr,
.ShopGrid>a:focus .ShopTuningDescr	{	background-color:		#DDFFDD;}

.ShopGrid img						{	width:					80%;
										height:					auto;
										border-radius:			5px;
										margin:					10px 10px 0.75rem 10px;
										padding:				0;}

.ShopGrid span						{	display:				block;
										text-align:				center;
										margin-left:			0.5rem;
										margin-right:			0.5rem;}

.ShopGrid>div						{	width:					25%;
										max-width:				220px;
										display:				flex;
										flex-flow:				column wrap;
										border-radius:			20px;
										align-items:			center;
										justify-content:		center;
										margin:					0 10px;
										padding:				0;}

.ShopGrid>div>a						{	margin-bottom:			0.5rem;}

.ShopGridTunings					{	align-items:			stretch;}
 
.ShopGridTunings>a					{	width:					100%;
										padding:				10px;
										display:				flex;
										flex-flow:				column;
										justify-content:		space-between;
										align-items:			flex-start;}

.ShopGridTunings>a>div				{	width:					100%;}

.ShopGridTunings>a>div:first-child	{	margin-bottom:			20px;}

.ShopTuningDescr					{	width:					calc(100%-20px);
										background-color:		#FFFFFF;
										color:					#000000;
										border-radius:			5px;
										font-size:				70%;
										font-weight:			normal;
										margin:					10px 10px 0.75rem 10px;
										padding:				5px;}										

.ShopTuningDescr>span				{	text-align:				left;
										margin:					0;
										padding:				0;}
										
.ShopTuningPrice					{	width:					100%;
										display:				block;
										text-align:				right;
										font-weight:			bold;}
										
.ShopTuningHint						{	width:					100%;
										display:				block;
										text-align:				left;
										color:					#CC0000;
										font-size:				70%;
										font-weight:			bold;
										margin-top:				0.75rem;}

.ShopTuningHint span				{	display:				inline;
										text-align:				left;
										margin-left:			0;
										margin-right:			0;}

.ShopCartList						{	list-style-type:		none;
										margin:					0;
										padding:				0;}

.ShopCartList li					{	width:					80%;
										height:					1.5rem;
										display:				grid;
										grid-template-columns:	50px 20px 1fr 100px 30px;
										flex-wrap:				nowrap;}

.ShopCartTrenner					{	width:					80%;
										height:					2px;
										background-color:		#000000}

.ShopCartArtikelDetails				{	display:				block;
										background-color:		#888888;
										border-radius:			20px;
										width:					100%;
										font-size:				80%;
										margin-top:				0.5rem;
										margin-bottom:			0.5rem;
										padding:				10px;}

.ShopCartAccessoiresFrame			{	width:					100%;
										display:				grid;
										grid-template-columns:	350px 1fr;
										flex-wrap:				nowrap;
										margin-top:				20px;}

.ShopCartAccessoiresFrame:first-child	{	margin-top:			0;}

.Cart								{	width:					230px;
										height:					3rem;
										position:				absolute;
										top:					230px;
										right:					50px;
										background-color:		#888888;
										color:					#000000;
										box-shadow:				10px 10px 15px rgba(0, 0, 0, 0.3);
										text-align:				center;
										border-radius:			20px;
										padding:				10px;
										opacity:				0.75;
										z-index:				2;
										transition:				opacity 250ms;
										transition:				background-color 250ms;}
										
.Cart:hover,
.Cart:focus							{	opacity:				1;
										background-color:		var(--link-color);}
										
.Cart a								{	color:					inherit;}

.Cart a:hover,
.Cart a:focus						{	text-decoration:		none;}

.ShopAddressFrame					{	width:					80%;
										height:					2.5rem;
										display:				grid;
										grid-template-columns:	200px 1fr;}

.ShopAddressFrame input				{	width:					100%;
										height:					2rem;}

.RScCheckboxList					{	list-style-type:		none;
										margin:					0.5rem 0 0 0;
										padding:				0;}

.RScCheckboxList li					{	vertical-align:			center;}

.RScCheckboxList li>span			{	width:					80px;
										height:					2rem;
										padding-top:			0.5rem;
										float:					left;}

.RScKeySelect						{	width:					500px;
										display:				flex;
										align-items:			center;
										justify-content:		flex-start;
										float:					left;}

.RScKeySelect li					{	height:					2.5rem;
										list-style:				none;
										margin:					0;
										padding:				0;}

.RScKeySelect li>span				{	height:					2rem;
										display:				flex;
										align-items:			center;}

.RScKeySelect a						{	width:					120px;
										height:					2rem;
										display:				flex;
										justify-content:		center;
										align-items:			center;
										background-color:		var(--link-backcolor);
										color:					#000000;
										border-radius:			5px;
										font-size:				80%;
										text-align:				center;
										margin-right:			20px;}

.RScKeySelect a.active				{	background-color:		#008800;}

.RScKeySelect a:hover,
.RScKeySelect a:focus				{	background-color:		var(--link-color);
										color:					inherit;
										text-decoration:		none;}

.RScCheckboxListTrenner				{	display:				grid;
										grid-template-columns:	60% 1fr;
										align-items:			center;
										height:					1rem;
										margin:					0;
										padding:				0;}

.RScCheckboxListTrenner hr			{	margin:					0;
										padding:				0;}
										
.RScCheckboxListTrenner div			{	height:					1rem;
										font-size:				80%;
										margin-left:			0.5rem;}

.CheckboxDiv						{	height:					2.5rem;
										display:				grid;
										grid-template-columns:	3rem 1fr;
										font-weight:			bold;}

.RScCheckboxDiv						{	width:					60%;
										max-width:				500px;
										float:					left;}
										
.CheckboxDiv input					{	width:					2rem;
										height:					2rem;}

.CheckboxDiv label					{	width:					100%;
										min-height:				2rem;
										padding-top:			0.5rem;}

.CheckboxDiv:hover,
.CheckboxDiv:focus					{	color:					var(--link-color);}

.RScRadioList						{	list-style-type:		none;
										margin:					0;
										padding:				0;}

.RScRadioList li					{	height:					2.5rem;
										display:				flex;
										justify-content:		flex-start;
										align-items:			center;}

.RScRadioList input					{	border:					0;
										width:					2rem;
										height:					2rem;}

.RScRadioList span					{	width:					80%;
										margin-left:			1rem;
										font-weight:			bold;}

.RScRadioList span:hover,
.RScRadioList span:focus			{	color:					var(--link-color);
										cursor:					pointer;}

.SpeedLimitedSign					{	border:					solid 2px #FFFFFF;
										background-color:		#FF0000;
										border-radius:			100%;
										margin:					0 0 0 10px;
										padding:				0;}

.SpeedLimitedSign>div				{	width:					70%;
										height:					70%;
										background-color:		#FFFFFF;
										color:					#000000;
										border-radius:			100%;
										font-size:				80%;
										font-weight:			bold;
										display:				flex;
										align-items:			center;
										justify-content:		center;
										margin-left:			15%;
										margin-top:				15%;
										padding:				0;}

.SpeedUnlimitedSign					{	border:					solid 2px #000000;
										background-color:		#FFFFFF;
										border-radius:			100%;
										overflow:				hidden;
										margin:					0 0 0 10px;
										padding:				0;
										position:				relative;}

.SpeedUnlimitedSign div				{	width:					200%;
										height:					200%;
										border-bottom:			solid 2px #000000;
										position:				absolute;}

.SpeedUnlimitedSign div:first-child	{	-webkit-transform:
											translateY(-50%)
											translateX(-77%)
											rotate(-45deg);}


.SpeedUnlimitedSign div:nth-child(2) {	-webkit-transform:
											translateY(-50%)
											translateX(-72%)
											rotate(-45deg);}

.SpeedUnlimitedSign div:nth-child(3) {	-webkit-transform:
											translateY(-50%)
											translateX(-67%)
											rotate(-45deg);}

.SpeedUnlimitedSign div:nth-child(4) {	-webkit-transform:
											translateY(-50%)
											translateX(-62%)
											rotate(-45deg);}

.RScInfoLink						{	width:					150px;
										height:					2rem;
										display:				flex;
										background-color:		var(--link-backcolor);
										color:					#000000;
										font-size:				80%;
										border-radius:			5px;
										justify-content:		center;
										align-items:			center;
										float:					left;}

.RScInfoLink:hover,
.RScInfoLink:focus					{	background-color:		var(--link-color);
										color:					inherit;
										text-decoration:		none;}

.RScInfoDiv							{	width:					calc(60% + 2rem);
										background-color:		#FF9900;										
										display:				none;
										grid-template-columns:	1fr 160px;
										border-radius:			20px;
										box-shadow:				10px 10px 15px rgba(0, 0, 0, 0.3);
										margin-top:				0.5rem;
										margin-left:			2rem;
										margin-right:			0;
										margin-bottom:			30px;
										padding:				10px;}

.RScInfoDiv span					{	font-size:				80%;
										margin-right:			20px;}

.RScCartFrame						{	width:					100%;}

.RScCartFrame>div					{	width:					50%;
										height:					6rem;
										display:				flex;
										flex-direction:			column;
										justify-content:		flex-end;
										float:					left;
										position:				relative;}

.addtoCartButton					{	width:					300px;
										height:					4rem;
										display:				flex;
										flex-direction:			column;
										justify-content:		center;
										align-items:			center;
										background-color:		var(--link-backcolor);
										color:					#000000;
										font-weight:			bold;
										border-radius:			10px;
										position:				absolute;}

.addtoCartButton:hover,
.addtoCartButton:focus				{	background-color:		var(--link-color);
										text-decoration:		none;}

.PayPalButton						{	height:					3rem;
										display:				flex;
										flex-direction:			column;
										justify-content:		center;
										align-items:			center;
										border-radius:			10px;}

.PayPalButton:hover,
.PayPalButton:focus					{	opacity:				0.75;}

.clearCartButton					{	width:					300px;
										height:					4rem;
										display:				flex;
										flex-direction:			column;
										justify-content:		center;
										align-items:			center;
										background-color:		#FF8888;
										color:					#000000;
										font-weight:			bold;
										border-radius:			10px;
										position:				absolute;}

.clearCartButton:hover,
.clearCartButton:focus				{	background-color:		var(--link-color);
										text-decoration:		none;}

.ShippingCountryFrame				{	width:					100%;
										display:				grid;
										grid-template-columns:	350px 1fr;}

.ShippingCountryFrame select		{	width:					300px;
										height:					3rem;
										font-size:				1rem;}

.ShippingRadio input				{	border:					0;
										width:					2rem;
										height:					2rem;}

.ShippingRadio label				{	width:					calc(80% - 3rem);
										height:					2rem;
										margin-left:			1rem;
										font-weight:			bold;}

.ShippingRadio label:hover,
.ShippingRadio label:focus			{	color:					var(--link-color);
										cursor:					pointer;}

.ShippingRadio div					{	width:					calc(100% - 6rem);
										margin-left:			6rem;
										display:				block;
										margin-top:				0.5rem;}

.FooterFrame a						{	width:					20%;
										height:					12px;
										display:				flex;
										align-items:			center;
										justify-content:		center;
										float:					left;}

.MenuFrame							{	width:					850px;
										max-height:				1000px;
										overflow-x:				hidden;
										overflow-y:				auto;
										background-color:		var(--top-backcolor);
										border-radius:			0 0 50px 0;
										box-shadow:				10px 10px 15px rgba(0, 0, 0, 0.3);
										padding:				10px;
										position:				absolute;
										left:					0px;
										top:					-50%;
										display:				grid;
										grid-template-columns:	1fr 1fr;
										flex-wrap:				nowrap;
										z-index:				2;
										pointer-events:			none;
										opacity:				0;
										transition:				opacity 150ms ease-in-out, top 150ms ease-in-out;}
										
.MenuFrame.active					{	pointer-events:			auto;
										opacity:				1;
										top:					70px;}

.MenuFrame a						{	display:				inline-block;
										height:					35px;
										font-size:				120%;}

#menu_button						{	width:					50px;
										height:					50px;
										border-radius:			15px;
										background-color:		var(--link-backcolor);
										display:				flex;
										flex-flow:				column wrap;
										align-items:			center;
										justify-content:		space-evenly;
										float:					left;
										margin-left:			10px;}

#menu_button:hover,
#menu_button:focus					{	background-color: 		var(--link-color);}

#menu_button div					{	width:					40px;
										height:					5px;
										border-radius:			5px;
										background-color:		#FFFFFF;}

.LanguageButton						{	width:					50px;
										height:					30px;
										background-color:		var(--language-color);
										border-radius:			10px;
										display:				flex;
										align-items:			center;
										justify-content:		center;
										color:					#000000;
										float:					left;
										margin-right:			10px;}

.LanguageButton:hover,
.LanguageButton:focus				{	background-color:		var(--link-color);
										text-decoration:		none;}

.LanguageSelected					{	background-color:		var(--top-backcolor);}

.VergleichWrapper					{	display:				grid;
										grid-template-columns:	1fr 1fr;
										flex-wrap:				nowrap;}
.VergleichWrapper div				{	float:					left;}
.VergleichFrameLeft					{	border-right:			1px solid #000000;
										padding-right:			10px;}
.VergleichFrameRight				{	border-left:			1px solid #000000;
										padding-left:			10px;}

.VergleichWrapper div ul			{	margin:					0px 0px 0px 20px;
										padding:				0;}
										
.EinbauWrapper						{	margin-top:				50px;
										display:				grid;
										grid-template-columns:	1fr 360px;
										flex-wrap:				nowrap;}

.EinbauWrapper div					{	padding-right:			20px;}

.EinbauFrameRight					{	background-color:		#DDDDDD;
										border-radius:			20px;
										padding:				20px;}

.EinbauFrameRight embed				{	width:					320px;
										height:					410px;
										background-color:		#FFFFFF;}

.GearRatioHint						{	display:				inline-block;
										font-size:				2em;
										animation-name:			GearRatioAnimation;
										animation-duration:		1s;
										animation-direction:	normal;
										animation-play-state:	running;
										animation-iteration-count:	infinite;
										animation-timing-function: ease-out;}

@keyframes GearRatioAnimation		{
										from		{ translate: 100px 0 }
										to			{ translate: 0 0 } }



@keyframes input_blinking {
  50% {
    background-color: var(--link-color);
  }
}