.calculator			{	transform: scale(0.00); z-index: 999; position: fixed; top: 0; left: 0; width: 100.0%; height: 100.0%; overflow: hidden;
						display: flex; flex-flow: row wrap; justify-content: center; align-content: center; align-items: center;  }
.calculator:target	{	transform: scale(1.00); }
.calculator > a		{	position: absolute; top: 0; left: 0; width: 100.0%; height: 100.0%; background-color: black; opacity: 0.50; }

/* --- Panel --- */

.panel 				{	width: 1200px; min-width: 960px; margin: 0 auto; padding: 2.00em; background-color: white; }
.panel > div		{	width: calc(100.0% + 2.00em); margin: 0 -2.00em -2.00em -2.00em; padding: 1.00em; display: flex; flex-flow: row wrap; justify-content: space-between; align-content: stretch; align-items: stretch; }
.panel > div > div	{	position: relative; flex: 1 1 10.00%; margin: 1.00em; padding: 1.00em 2.00em; }

.panel > div > div:nth-child(2)		{	flex: 1 1 20.00%; }
.panel > div > div:nth-child(3)		{	flex: 1 1 40.00%; }
.panel > div > div:nth-child(4)		{	flex: 1 1 100.0%; padding: 0; box-shadow: none; justify-content: center; background-color: transparent; }

.panel > div > div:nth-child(2)		{	position: relative; }

.panel > div > div:nth-child(2):before,
.panel > div > div:nth-child(2):after	{	position: absolute; z-index: -1; right: -1.75em; width: 16.00em; height: 16.00em; content: ''; }
.panel > div > div:nth-child(2):before	{	top: calc(50.00% - 16.00em); transform: rotate(-6.50deg); transform-origin: bottom right; }
.panel > div > div:nth-child(2):after	{	top: calc(50.00% + 0.00em);  transform: rotate(6.50deg);  transform-origin: top right;    }


.panel > div > div:nth-child(2) > div.control	{	display: flex; flex-flow: row wrap; justify-content: flex-end; align-content: center; align-items: center;}

.panel > div > div:nth-child(3)			{	padding: 1.00em 1.00em; display: flex; flex-flow: row wrap; justify-content: space-between; align-content: stretch; align-items: stretch; }
.panel > div > div:nth-child(3)	> div 	{	flex: 1 1 10.00%;  margin: 0 1.00em; }

.panel .line				{	height: 3.00em; display: flex; flex-flow: row wrap; justify-content: space-between; align-content: center; align-items: center; }
.panel .line > span			{	flex: 1 1 10.00%; text-align: center; }
.panel .line > span + span	{	margin-left: 0.50em; }
.panel .line > span > input	{	height: 100.0%; }
.panel .line .label			{	flex: 2.5 1 10.00%; text-align: left; }

/* --- Tipp --- */

.panel .line > .tipp		{	z-index: 3; transition: none}
.panel .line > .tipp > a	{	position: relative; display: inline-block; margin: 0 0 -0.50em 0.50em; border-radius: 100.0%; width: 1.75em; height: 1.75em; 
								background-image: url('../img/picts/info.svg'); background-repeat: no-repeat; background-position: center; background-size: cover; transition: none}

.panel .line > .tipp > a > span		{	position: absolute; bottom: -1.75em; left: 3.25em; width: 0; height: 0; padding: 1.00em 1.00em 1.00em 1.50em; border-width: 2.5px; border-radius: 0.50em; opacity: 0.00; text-align: left; transition: none}

.panel .line > .tipp > a > span:before,
.panel .line > .tipp > a > span:after 		{	position: absolute; content: ''; background: white; transition: none }
.panel .line > .tipp > a > span:before 		{	z-index: -1; top: 0; left: 0; width: 100.0%; height: 100.0%; border-radius: 0.50em; transition: none }
.panel .line > .tipp > a > span:after 		{	z-index: -2; bottom: 1.50em; left: -0.75em; width: 2.00em; height: 2.00em; transform: rotate(45deg); transition: none }

.panel .line > .tipp > a:hover > span > i	{	display: block; margin-bottom: 0.25em; transition: none}
.panel .line > .tipp > a:hover > span 		{	opacity: 1.00; width: 20.00em; height: auto; transition: none}

.panel > .head > *	{	text-align: center; }

/* --- Summary --- */

.panel > div > .summary 					{	flex: 1 1 100.0%; height: auto; overflow: hidden; }
.panel > div > .summary > div 				{	position: relative; width: calc(100.0% + 4.00em); height: auto; margin: -2.00em; padding: 0; display: flex; flex-flow: row wrap; justify-content: space-between; align-content: stretch; align-items: stretch; }
.panel > div > .summary > div > div			{	flex: 1 1 10.00%; margin: 1.00em; padding: 1.00em; display: flex; flex-flow: column wrap; justify-content: space-between; align-content: stretch; align-items: stretch; }
.panel > div > .summary > div:nth-child(1)	{	height: auto; }

.panel > div > .summary > div > div:nth-child(2)	{	flex: 1 1 30.00%; padding: 1.00em; justify-content: center; }

/* --- calc-on --- 

.panel > div > div:nth-child(3)					{	opacity: 0.25; }
.calc-on .panel > div > div:nth-child(3) 		{	opacity: 1.00; }

.panel > div > div:nth-child(3) input			{	color: transparent; }
.calc-on .panel > div > div:nth-child(3) input	{	color: inherit; }

.panel > div > .summary				{	max-height: 0; margin: 0 1.00em; padding: 0 1.00em; overflow: hidden; }
.calc-on .panel > div > .summary	{	max-height: 50.00em; margin: 1.00em; padding: 1.00em; }

/* --- Elemente --- */

.panel .btn 	{	display: block; margin-top: 1.00em; }

.panel button:before			{	content: 'Kalkulation starten' }
.calc-on .panel button:before	{	content: 'Eingaben zuücksetzen' }

/*	=================================
		Tacho
	================================= */

.tacho					{	position: relative; width: 100.0%; margin: 0 auto; border-radius: 1000px; display: flex; flex-flow: row wrap; justify-content: space-between; align-content: center; align-items: center;
							background-image: url('../img/calculator/Logo_Hyundai_calc.svg'); background-repeat: no-repeat; background-position: top 12.00% center; background-size: 18.00% auto; }
.tacho .round			{	position: relative; width: 40.00%; margin: 0.75em; border-radius: 100.0%; }
.tacho .round:before	{	position: absolute; top: 3.00%; left: 3.00%; width: 94.00%; height: 94.00%; border-radius: 100.0%; content: ''; }
.tacho .round:after		{	position: absolute; top: 3.00%; left: 3.00%; width: 94.00%; height: 94.00%; border-radius: 100.0%; content: ''; z-index: 2; }
.tacho .round > img		{	width: 100.0%; height: 100.0%; }
.tacho .round > img + div			{	position: absolute; top: 16.00%; left: 16.00%; width: 68.00%; height: 68.00%; border-radius: 100.0%; transform: rotate(180deg); opacity: 0.60; }
.tacho .round > img + div:before	{	position: absolute; top:  3.00%; left:  3.00%; width: 94.00%; height: 94.00%; border-radius: 100.0%; content: ''; }
.tacho .round > img + div + div		{	position: absolute; top: 7.00%; left: 7.00%; width: 86.00%; height: 86.00%; border-radius: 100.0%; background-repeat: no-repeat; background-position: center; background-size: cover; }

.tacho .round > img + div + div + div			{	position: absolute; bottom: 50.00%; left: 49.00%; width: 2.00%; height: 36.00%; transform-origin: bottom center; z-index: 3; transform: rotate(-120deg); transition: all 1200ms ease-in-out 600ms; ; }
.tacho .round > img + div + div + div:before,
.tacho .round > img + div + div + div:after		{	content: ''; position: absolute; top: 0.00%; width: 100.0%; height: 103.0%; border-radius: 2px; transform-origin: top center; background: red; }
.tacho .round > img + div + div + div:before	{	left:  0; transform: rotate(-3.00deg); }
.tacho .round > img + div + div + div:after		{	right: 0; transform: rotate( 3.00deg); }

.tacho .round > img + div + div + div + div		{	position: absolute; top: 68.00%; left: 0.00%; width: 100.0%; color: white; font-family: 'sofo-digi'; font-size: 1.50em; font-weight: 800; letter-spacing: 0.10em; text-align: center; }

.tacho .support			{	position: absolute; bottom: 1.00em; left: 0; width: 100.0%; height: 30.00%; background-repeat: no-repeat; background-position: center; background-size: auto 100.0%; background-image: url('../img/calculator/scala-ma.svg');  }
.tacho .support	> div	{	position: absolute; left: 0; bottom: 0; width: 100.0%; color: white; font-family: 'sofo-digi'; font-size: 1.75em; font-weight: 100; letter-spacing: 0.10em; text-align: center; line-height: 1.0; }

.light			{	position: absolute; bottom: 5.00%; right: 34.00%; width: 3.00%; height: auto; border-radius: 100.0%; }
.light > img	{	width: 100.0%; height: auto; }

/* -- BGs + Schadows -- */

.tacho,
.tacho .round:before,
.tacho .round > img + div:before	{	background-color: rgba(000,000,000,1.00); }

.tacho .round	{	background-image: 	linear-gradient(-45deg,
										rgba(255,255,255,0.50) 10.00%,
										rgba(255,255,255,0.20) 20.00%,
										rgba(255,255,255,0.05) 45.00%,
										rgba(255,255,255,0.05) 55.00%,
										rgba(255,255,255,0.20) 80.00%,
										rgba(255,255,255,0.50) 90.00%);
					box-shadow: -0.10em -0.10em 0 0.10em rgba(255,255,255,0.20);
					box-shadow:  0.10em  0.10em 0 0.10em rgba(255,255,255,0.20); }
						
.tacho .round:after		{	background-image: radial-gradient(farthest-corner at right bottom, rgba(255,255,255,0.50) 0.00%, rgba(255,255,255,0.00) 72.00%); }

.tacho .round.max  > img + div			{	background-image: conic-gradient(black 17.00%, red 16.00%, orange 50.00%, green 83.00%, black 83.00%, black 100.0%); }
.tacho .round.real > img + div			{	background-image: conic-gradient(black 17%.00, red 16.00%, red 39.00%, orange 39.00%, orange 61.00%, green 61.00%, green 83.00%, black 83%.00, black 100%); }

.tacho .round.max  > img + div + div	{	background-image: url('../img/calculator/scala-max.svg');  }
.tacho .round.real > img + div + div	{	background-image: url('../img/calculator/scala-real.svg'); }

.tacho .round > img + div + div + div	{	box-shadow: 0.50em -0.50em 0.50em rgba(000,000,000,1.00); }

.tacho .round > img + div + div + div:before,
.tacho .round > img + div + div + div:after		{	 background-image: linear-gradient(rgba(000,000,000,0.00) 0.00%, rgba(000,000,000,0.00) 5.00%, rgba(000,000,000,0.25) 100.0%); }

.light	{   box-shadow: 	inset 	 0   0  6px white,
							inset 	 2px 0  8px yellow,
							inset 	-2px 0  8px lime,
							inset 	 2px 0 30px yellow,
							inset 	-2px 0 30px lime,
							0 0  5px 	white,
							-3px 0 18px 3px	yellow,
							3px 0 18px 3px	lime; }
			
/*	=================================
		Tacho Illu
	================================= */

#calc .tacho .round > img + div + div + div			{	transform: rotate(-120deg); animation-timing-function: ease-in-out; }
#calc .tacho .round.max  > img + div + div + div	{	animation: fortschritt-1; animation-delay: 3s; animation-duration: 9s; animation-iteration-count: infinite; }
#calc .tacho .round.real > img + div + div + div	{	animation: fortschritt-2; animation-delay: 1s; animation-duration: 6s; animation-iteration-count: infinite; }

@keyframes fortschritt-1 { 	 0.00% { transform: rotate(-120deg); }
	20.00% { transform: rotate(-120deg); }
	60.00% { transform: rotate(60deg);   }
	80.00% { transform: rotate(-120deg); }
	100.0% { transform: rotate(-120deg); }}

@keyframes fortschritt-2 { 	 0.00% { transform: rotate(-120deg); }
	10.00% { transform: rotate(-120deg); }
	55.00% { transform: rotate(120deg);  }
	90.00% { transform: rotate(-120deg); }
	100.0% { transform: rotate(-120deg); }}

#calc .tacho .light	{	opacity: 0.30; animation: light; animation-timing-function: ease-in-out; animation-delay: 1s; animation-duration: 6s; animation-iteration-count: infinite; }

@keyframes light 	{ 	 0.00% { opacity: 0.30; }
	10.00% { opacity: 0.30; }
	55.00% { opacity: 1.00; }
	90.00% { opacity: 0.30; }
	100.0% { opacity: 0.30; }}

/*	=================================
		END
	================================= */