html, body 		{	width: 100.0%; } 
		*		{	list-style: none; margin: 0; padding: 0; border: 0; border-style: solid; transition: all 300ms ease-in-out 0ms; }
img, hr, video	{	display: block; }
		
			hr	{	border-bottom-width: 1px; margin: 1.00em auto; }
		 video	{	width: 100.0%; height: auto; cursor: pointer; }
	
	*:after, *:before	{	transition: all 300ms ease-in-out 0ms; }

.row				{	width: calc(100.0% + 2.00em); margin: -1.00em -1.00em; display: flex; flex-flow: row wrap; justify-content: space-between; align-content: stretch; align-items: stretch; /* background: red; */ }
.row > *			{	position: relative; flex: 1 1 10.00%; min-width: 240px; margin: 1.00em; }
.row > *.full		{	flex: 1 1 100.0%; }
.row > *:empty		{	margin: 0 1.00em; }
	
#content	{	width: 100.0%; margin: 70px auto 0; display: flex; flex-flow: row wrap; justify-content: space-between; align-content: stretch; align-items: stretch; }

	aside				{	order: 1; flex: 1 1 1.00%; min-width: 17.50em; }
	aside > div			{	width: calc(100.00% - 1px); height: calc(100.00% - 2px); border-width: 1px 1px 0 0; }
	aside > div	> div	{	width: calc(100.00% - 2.00em); height: calc(100.00% - 2.00em); margin: 1.00em; }

	main		{	order: 2; flex: 5 1 1.00%; }
	main.small	{	width: 94.00%; max-width: 1024px; min-height: calc(100.0vh - 70px - 15.00em); margin: 0 auto; padding-top: 70px; }
	
	@media screen and (max-width : 600px)	{	aside  {	order: 2; }
												main   {	order: 1; }}

			/* --- FAQ --- */
	
			#faq	{	width: calc(100.0% - 2px); margin: 1.00em auto; border-width: 1px; overflow: hidden; }
			
			#faq input[name=faq] + label				{	position: relative; display: block; width: calc(100.0% - 4.00em); margin: 0; padding: 1.00em 1.00em 1.00em 3.00em; overflow: hidden; }
			#faq input[name=faq] + label:before			{	position: absolute; top: 0.75em; left: 0.50em; width: 2.00em; height: 2.00em; content: ''; background: url('../img/picts/add_red.svg') no-repeat center; font-size: 1.00em; }
			#faq input[name=faq] + label > span			{	display: block; width: 100.0%; height: auto; max-height: 0; overflow: hidden; }
			#faq input[name=faq] + label > span > span	{	display: block; margin: 0.50em 0; }
				
				#faq label + input[name=faq] + label 	{	border-top-width: 1px; }
	
			#faq input[name=faq]:checked + label > span	{	max-height: 300em; }
			#faq input[name=faq]:checked + label:before	{	transform: rotate(-45deg); }

		article						{	width: 100.0%; margin: 0 auto; display: flex; flex-flow: row wrap; justify-content: space-between; align-content: stretch; align-items: stretch; }
		article + article			{	border-top-width: 1px; }
		article > div				{	flex: 2.5 1 1.00%; position: relative; min-width: 320px; display: flex; flex-flow: row wrap; justify-content: center; align-content: flex-start; align-items: flex-start; }
		article > div + div			{	flex: 1 1 1.00%; }
		article > *:nth-child(1)	{	align-content: center; align-items: center; }
		article > div > div			{	width: 100.00%; margin: 3.00vw; }

		article	section + section	{	margin-top: 4.00vw; }

		
			article > div .menu					{	position: sticky; top: 30px; left: 0; width: 100%; padding: 0 3.00vw; margin: 0; min-width: 320px; z-index: 2	}	
			article > div > .menu > a			{	position: relative; padding: 1.00em 2.00em 1.00em 3.00em	}
			article > div > .menu > a.on		{	background: white	}
			article > div > .menu > a:before	{	content: ''; position: absolute; top: 1.10em; left: 1.00em; width: 1.00em; aspect-ratio: 1/1; border-radius: 100.0%;	}

/* --- Intro --- */

	.intro > div 			{	display: flex; flex-flow: row wrap; justify-content: space-between; align-content: flex-end; align-items: flex-end; }
	.intro > div + div		{	align-content: center; align-items: center; }
	.intro > div > *		{	z-index: 2; display: block; width: 100.0%; }
	.intro > div > span		{	display: block; }
	.intro img				{	width: 50.00%; height: auto; margin: 0 auto 1.50em; }
	.intro.ecare img		{	width: 38.00%; margin: 0 auto; }
	.intro hr				{	border-bottom-width: 2px; border-bottom-color: white; }

	
		.intro > div > .eyecatcher			{	position: absolute; top: 1.00vw; right: 1.00vw; width: 10.00em; aspect-ratio: 1 / 1; border-radius: 100.0%; display: flex; flex-flow: row wrap; justify-content: center; align-content: flex-start; align-items: flex-start; 
												background-image: url(../img/Logo_Toyota-eCARE_inv.svg); background-repeat: no-repeat; background-position: center bottom 4.25em; background-size: 82.0% auto; background-color: black; transform: rotate(6deg); overflow: hidden;	}
		.intro > div > .eyecatcher:before	{	content: 'Jetzt inklusive'; margin-top: 1.75em; color: white	}
		.intro > div > .eyecatcher:after	{	content: '+ Qualitäts-\A sicherung'; margin-top: 3.50em; color: white	} 
	
/* --- Contact --- */

	#contact 				{	border-top-width: 0; }
	#contact > div:after	{	position: absolute; z-index: 2; top: 0; left: -1px; width: 1px; height: 100.0%; content: ''; background-color: white; opacity: 0.30; }
	#contact > div			{	order: 2; }
	#contact > div + div	{	order: 1; }

/* --- Quote --- */

#webinar > div				{	order: 1; padding: 4.00vw 0; align-content: center; align-items: center; }
#webinar > div + div		{	order: 2; border-right-width: 1px; }

#webinar > div > div		{	margin: 0 4.00vw; display: flex; flex-flow: row wrap; justify-content: space-between; align-content: center; align-items: center; }
#webinar > div > div + div	{	border-top-width: 2px; border-top-style: dotted; }

	#webinar > div > div > div			{	flex: 1 1 1.00%; padding: 2.00vw 0; }
	#webinar > div > div > div + div	{	flex: 2.5 1 1.00%; }
						
		#webinar span			{	display: block; }
		#webinar span	+ span	{	margin-top: 0.25em; }

		#quote #webinar				{ } 
		#quote #webinar > div		{	} 
		#quote #webinar > div > img	{	width: calc(100.0% - 2.00em); height: auto; } 
		#quote #webinar > div + div	{	flex: 1 1 10.00%; } 
				
/* --- Header + Footer --- */

header 			{	position: fixed; z-index: 5;  top: 0; left: 0; width: 100.0%; height: 70px; }
header > div	{	position: relative; width: calc(100.0% - 4.00vw); height: 100.0%; margin: 0 auto; display: flex; flex-flow: row wrap; justify-content: space-between; align-content: flex-start; align-items: flex-start; overflow: hidden; }
header span		{	height: 100.0%; display: flex; flex-flow: row wrap; justify-content: space-between; align-content: center; align-items: center; }
header span > a	{	display: flex; flex-flow: row wrap; justify-content: space-between; align-content: center; align-items: center; }
header img		{	display: inline-block; width: 48px; height: auto; margin-right: 2.00em; }

	.sticky header 	{	width: 100.0%; height: 40px; border-bottom-width: 1px; }

footer 			{	width: 100.0%; padding: 3.00em 0 9.00em; border-top-width: 1px; }
footer > div	{	position: relative; width: calc(100.0% - 8.00vw); margin: 0 auto; display: flex; flex-flow: row wrap; justify-content: space-between; align-content: flex-start; align-items: flex-start; }

header a + a, 
footer a + a	{	margin-left: 1.50em; }

header a.login			{	background-image: url(../img/picts/person_outline.svg); background-repeat: no-repeat; background-position: center left; background-size: contain; padding-left: 2.00em; }
header a.login:hover	{	background-image: url(../img/picts/person_outline_red.svg); }

/* --- ILLU eCARE --- */

.illu 				{	width: 100.0%; margin: 2.00em auto 1.50em; display: flex; flex-flow: row wrap; justify-content: center; align-content: flex-start; align-items: flex-start; }
.illu > div 		{	flex: 0 0 25.0%; min-width: 12.50em; aspect-ratio: 1 / 1; margin: 0 0.50em 0.50em; }
.illu > div > div	{	content: ''; position: relative; width: 68.00%; aspect-ratio: 1 / 1; margin: 0 auto 3.00em; }
.illu > div span	{	display: block; width: 100.0%; }

	.illu > div > div:before, .illu > div > div:after 	
								{	content: ''; position: absolute; aspect-ratio: 1 / 1; border-radius: 100.0%; display: flex; flex-flow: row wrap; justify-content: center; align-content: center; align-items: center; }
	.illu > div > div:before 	{	bottom: -2.00em; left: calc(50.00% - 2.00em); width: 4.00em; }
	.illu > div > div:after 	{	bottom: -1.00em; left: calc(50.00% - 1.00em); width: 2.00em; background: white; }
	
		.illu > div:nth-child(1) > div	{	background-image: url('../img/picts-illu/notifications_active.svg'), url('../img/picts-illu/directions_car.svg'); background-repeat: no-repeat, no-repeat; background-position: center top 10.00%, center bottom 30.00%; background-size: 40.00% auto; }
		.illu > div:nth-child(2) > div	{	background-image: url('../img/picts-illu/transportation.svg'),       url('../img/picts-illu/Logo_Toyota.svg');   background-repeat: no-repeat, no-repeat; background-position: center top 10.00%, center bottom 30.00%; background-size: 40.00% auto; }
		.illu > div:nth-child(3) > div	{	background-image: url('../img/picts-illu/headset_mic.svg'); background-repeat: no-repeat; background-position: center top 35.00%; background-size: 60.00% auto; }
		
		.illu > div:nth-child(1) > div:after	{	content: '1'; }
		.illu > div:nth-child(2) > div:after 	{	content: '2'; }
		.illu > div:nth-child(3) > div:after	{	content: '3'; }

img[src="resources/img/qr-toyota-ecare.svg"]	{	width: 9.00em; margin-top: 1.00em; }

/* --- ILLU qs --- */
.illu-qs												{	width: 100.0%; margin: 2.00em auto 1.50em; display: flex; flex-flow: row wrap; justify-content: space-between; align-content: center; align-items: center;	}
.illu-qs > div											{	flex: 1 1 25.0%; min-width: 12.50em; margin: 0 0.50em 0.50em; display: flex; gap: 2.00em; flex-flow: column wrap; justify-content: center; align-content: stretch; align-items: stretch;	}
.illu-qs > div + div									{	position: relative; padding-left: 2.00em;}
.illu-qs > div > div									{	position: relative; aspect-ratio: 1 / 0.5;	padding: 1.00em;	display: flex;	gap: 0.50em 0em;	flex-flow: row wrap;	justify-content: flex-start;	align-content: center;	align-items: center;	}
.illu-qs > div + div > div > span:nth-child(1)			{	position: absolute; top: 0; left: -2.00em; width: 2.00em; height: 100.0%; overflow: hidden;	}
.illu-qs > div + div > div > span:nth-child(1):before	{	content: ''; position: absolute; top: calc(50.00% - 2.00em); left: -3.00em; width: 4.00em; aspect-ratio: 1 / 1; transform: rotate(45deg);	background-color: rgba(204,204,206,1.00);	}
.illu-qs > div + div > div:after						{	content: '1';	position: absolute; top: -0.50em; right: -0.50em; width: 2.00em; aspect-ratio: 1 / 1; border-radius: 100.0%; display: flex; flex-flow: row wrap; justify-content: center; align-content: center; align-items: center; border-width: 0.375em; border-style: solid; background: white; color: rgba(230,000,001,1.00)	}
.illu-qs > div + div > div + div:after					{	content: '2';	}
.illu-qs > div + div + div > div:after					{	content: '3';	}


/* --- Kino --- */

#kino > div				{	margin: 3.00vw; display: grid; gap: 1.00em 3.00vw; grid-template-columns: 3fr 1fr; align-content: flex-start; align-items: flex-start;  }
#kino label				{	position: relative; order: 2; margin: 0; padding: 1.00em; border-width: 1px; transition: all 0ms ease-in-out 0ms; }
#kino label:before		{	content: ''; z-index: 2; position: absolute; top: 0; left: 0; width: 100.0%; height: 100.0%; }

#kino input:checked + label				{	order: 1; grid-row-end: span 3; }
#kino input:checked + label:before		{	display: none; }

	#kino label	> span			{	margin-top: 1.00em; display: flex; flex-flow: row wrap; justify-content: space-between; align-content: flex-start; align-items: flex-start; }
	#kino label	> span > span	{	flex: 1 1 20.00%; }
	#kino label	> span > img	{	width: 20.00%; max-width: 7.50em; margin-left: 2.00em; }

	#kino label	> span > span > span			{	display: block; }
	#kino label	> span > span > span + span		{	margin-top: 0.25em; }

	@media screen and (max-width : 1200px)	{	#kino > div						{	gap: 3.00vw; grid-template-columns: 1fr; }
												#kino input:checked + label		{	order: 2; grid-row-end: span 3; }
												#kino label	> span > img		{	max-width: 5.00em; }}

/* --- Elements --- */

iframe			{	border-width: 1px; }

.toplink		{	opacity: 0.25; position: fixed; z-index: 2; display: none; right: 1.00em; top: calc(50.00% - 1.50em); padding: 1.50em; background: url('../img/picts/arrow_circle_up.svg') no-repeat center; background-size: contain; }
.toplink:hover	{	opacity: 0.50; }

.btn		{	padding: 0.75em 2.00em 0.88em; margin-top: 2.00em; }
.btn:hover	{	filter: grayscale(0.25); } 
 
	.btn.primary 		{	}
	.btn.secondary		{	}

/* --- OTR --- */

#otr-content		{	position: relative; margin-top: 70px; width: 100.0%; min-height: calc(100.0vh - 70px - 10.00em); display: flex; flex-flow: row wrap; justify-content: space-between; align-content: center; align-items: center; }
#otr-content > div	{	margin: 3.00em auto; }

		.thank 			{	display: block; height: auto;}
		.thank span		{	display: block; }
		.thank > span	{	position: relative; margin-top: 1.50rem; padding: 1.00rem 2.00rem 1.00rem 1.00rem; border-radius: 0.25em; 
							background-image: url('../img/picts/cancel.svg'); background-repeat: no-repeat; background-position: top 1.00rem right 0.50rem; background-size: 1.25rem; }
		
				.thank-on .thank 					{	max-height: 300px; }
				.thank-on form[name=form-otr] .btn 	{	opacity: 0.25; filter: grayscale(1.00); }
				
/*	=================================
		END
	================================= */