/* ALL *******************************************************************************************************/
@media
{
	#accordion
	{
		font-weight: lighter;
		gap: 1vw;
		width: 40vw;
	}
	.question
	  {
		cursor: pointer;
		height: 3vw;
		justify-content: space-between;
		padding: 0 2vw;
		flex-direction: row;
		background-color: var(--faq_black);
		text-align: left;
	  }

	.answer
	  {
		background-color: var(--black);
		height: 0vw;
		overflow: hidden;
		transition: 0.2s ease-out;
		text-align: left;
	  }

	.answer p
		{
			padding: 2vw;
		}

	.answer.activ
		{
			height: 8vw; /* height cannot be auto, because than the transition is not working (cannot be animated!) */
		}

	.hook
		{
			height: 0.6vw;
			transition: 0.3s ease-out;
		}

	.hook.activ
		{
		  transform: rotate(90deg);
		}
}

/* 1400 px *******************************************************************************************************/
@media (max-width: 1400px)
{
	#accordion
	{
		width: 60vw;
		
	}
	.question
	  {
		height: 5vw;
		padding: 0 3vw;
	  }
	.hook
		{
			height: 1vw;
		}

	.answer p
		{
			padding: 3vw;
		}
	.answer.activ
		{
			height: 12vw; /* height cannot be auto, because than the transition is not working (cannot be animated!) */
		}	
		
}


/* 800 px *******************************************************************************************************/
@media (max-width: 800px)
{
	#accordion
	{
		width: 90vw;
		gap: 5vw;
	}
	.question
	  {
		height: 15vw;
		padding: 0 5vw;
	  }	

	.hook
		{
			height: 2vw;

		}	
	.answer p
	{
		padding: 5vw;
		text-align: justify;
	}
	.answer.activ
		{
			text-align: left;
			height: 25vw; /* height cannot be auto, because than the transition is not working (cannot be animated!) */
		}	
	
	
}