﻿/*	=================================
		SOFAs
	================================= */

.btn, nav div > a:hover, .permanentlink, #quick a, .faqs > label:before, .slider label:before, .teaser .row > div > span:nth-child(1), footer .partner, #reference > div > .run > a, #reference a.close
{	background-color: rgba(045,150,205,1.00); color: rgba(255,255,255,1.00); }

p > a, li > a, td > a, label > a, #quick *, .txt-sofa, h3, p a, .link, .include > span.ok, header > div > span:nth-child(2) > span
{	color: rgba(045,150,205,1.00); }

.calc-on .panel > div > div:nth-child(3)
{	box-shadow: inset 0 0 0 0.50em rgba(045,150,205,0.25); }

.tipp > a > span
{	border-color: rgba(045,150,205,1.00); }

.tipp > a > span:after
{	box-shadow: inset 0 0 0 2px rgba(045,150,205,1.00); }

/* --- BG Action --- */
#calc:before
{	background-color: rgba(249,178,000,1.00); }

.txt-action, .potential .value
{	color: rgba(249,178,000,1.00); }

/*	=================================
		Backgrounds
	================================= */

/* --- BG White --- */
header, header + article, #vimeo:before, footer, .tipp a > span, .webinar
{	background-color: rgba(255,255,255,1.00); }

/* --- BG Light #fafafa--- */
body, .overlay > div, #contactform, .faqs > input:checked + label, .faqs > input:checked + label:before, .faqs > input:checked + label + div, .table .sub, .page .prices
{	background-color: rgba(250,250,250,1.00); }

/* --- BG Light #f0f0f0 --- */
article:nth-child(2n+1), .panel > div > div, .panel > div > div:nth-child(2):before, .panel > div > div:nth-child(2):after
{	background-color: rgba(240,240,240,1.00); }

/* --- BG Dark #1d394f --- */
nav > div, #teaser, #vimeo, .fazit:before, .fzn li:before, .webinar > div:nth-child(1), a.hotline, #reference > div > .run > span
{	background-color: rgba(029,057,079,1.00); }

/* --- BG Transparent --- */
input:disabled
{	background-color: transparent; }

/*	=================================
		Text
	================================= */

/* --- TXT White --- */
nav a, .teaser *, #vimeo h3, .vimeo, .slider label:after, .webinar > div:nth-child(1) *, a.hotline *, footer .partner *, #reference *
{	color: rgba(255,255,255,1.00); }

/* --- TXT Light #6f6f6f --- */
body, .potential, .webinar
{	color: rgba(097,097,097,1.00); }

/* --- TXT Dark #1d394f --- */
h1, h2, header *, .fazit, #vimeo:before, footer *
{	color: rgba(029,057,079,1.00); }

/*	=================================
		Borders
	================================= */

*
{	border-color: rgba(000,000,000,0.12); }

input, textarea, select, input + label:before
{	box-shadow: inset 0 0 0 1px rgba(000,000,000,0.12); }

input:focus, textarea:focus, input:checked + label:before
{	box-shadow: inset 0 0 0 1px rgba(000,000,000,0.60); }

.btn, .tacho, .permanentlink, .teaser .row > div > span:nth-child(1), .tipp > a > span, #reference > div > .run > a
{	box-shadow: 0 2px 3px 0 rgba(000,000,000,0.15); }

/*	=================================
		Gradients + Moves
	================================= */

nav > div,
#vimeo, #teaser	{	background-image: radial-gradient(farthest-corner at left bottom, rgba(045,150,205,0.50) 0.00%, rgba(045,150,205,0.00) 72.00%); }

#vimeo:before	{	background-image: linear-gradient(180deg, white 62.00%, rgba(240,240,240,1.00) 65.00%, rgba(240,240,240,1.00) 100.0%); }

/* --- Move --- */

.move			{	position: absolute; bottom: 0; background-repeat: no-repeat; background-position: bottom center; background-size: contain; }
#move-1			{	width: 25.00vw; height: 10.00vw; left:  -9.00%; background-image: url(../img/Illu-fahrzeug-1.png); }
#move-2			{	width: 25.00vw; height: 10.00vw; right:  -5.00%; background-image: url(../img/Illu-fahrzeug-2.png); }

#move-1.active 	{	animation-name:				move-1;
	animation-duration: 		6s;
	animation-iteration-count: 	1;
	animation-timing-function: 	ease-out; }

@keyframes move-1 {
	00.00% 	{	left:  -9.00%; opacity: 1; }
	80.00% 	{	left:  100.0%; opacity: 1; }
	81.00% 	{	left:  100.0%; opacity: 0; }
	90.00% 	{	left: -35.00%; opacity: 0; }
	91.00% 	{	left: -35.00%; opacity: 1; }
	100.0% 	{	left:  -9.00%; opacity: 1; }}

#move-2.active 	{	animation-name:				move-2;
	animation-duration: 		6s;
	animation-iteration-count: 	1;
	animation-timing-function: 	ease-out; }

@keyframes move-2 {
	00.00% 	{	right:  -5.00%; opacity: 1; }
	80.00% 	{	right:  100.0%; opacity: 1; }
	81.00% 	{	right:  100.0%; opacity: 0; }
	90.00% 	{	right: -35.00%; opacity: 0; }
	91.00% 	{	right: -35.00%; opacity: 1; }
	100.0% 	{	right:  -5.00%; opacity: 1; }}

@media screen and (max-width : 800px)		{	move	{	display: none; }}

/*	=================================
		END
	================================= */
