﻿html 	{	width: 100%; height: 100%; } 

body 	{	width: 100%; height: 100%; }

	*	{	margin: 0; padding: 0; border: 0; border-style: solid; }
	img	{	display: block; border: 0; }
	
	a			{	text-decoration: none; }
	a:hover		{	cursor: pointer; }
	a.txt		{	display: inline-block; }
	a.txt:hover	{	text-decoration: underline; }
	
	#page 		{	position: relative; width: 100%; height: 100%; }
			
	section 			{	position: relative; width: 100%; padding: 110px 0 4rem; /* border-bottom-width: 1px; */ }
	section#intro 		{	padding: 0; }
	section#preview	 	{	padding: 2rem 0 2rem; }
	section#descript 	{	padding: 0 0 4rem; }
	section#proof	 	{	padding: 2rem 0 4rem; }
	section#help	 	{	padding: 2rem 0; }
	
/* ================================================================
		HEADER + INDEX
================================================================ */

	.motiv	{	position: fixed; top: 0; left: 0; width: 100%; z-index: -1; } 
		
	header	{	position: fixed; top: 0; left: 0; width: 100%; height: 80px; z-index: 4; }
		 
		.brand		{	position: absolute; top: 5px; height: 70px; width: 260px; margin-left: 5%; }
		.call			{	display: block; margin: 0 auto; padding-top: 5px; }
		.call > span	{	display: block; opacity: 0.6; }
		
		.sticker	{	position: absolute; top: 8rem; right: 5%; width: 12rem; height: 7rem; border-radius: 20px; z-index: 3; overflow: hidden; transform: rotate(7deg);
					 }
	      	.sticker img {
	      		height: 95%;
	      		margin: 0px auto;
	      	}

			.claim		{	position: absolute; bottom: 4rem; width: 100%; }
			.claim span					{	display: block;  }
			.claim span:nth-child(2)	{	display: block; width: 80%; margin: 0.30rem auto 0; padding: 0.50rem 1.00rem; border-radius: 4px; }
		
	a.more		{	display: block; width: 3.00rem; height: 3.00rem; margin: 4rem auto 0; border-width: 0.20rem; border-radius: 100%;
					background: url('../img/svg/arrow-bottom-white.svg') no-repeat center; background-size: 2rem; }	
		
	.colorline	{	position: relative; width: 100%; height: 4px; }

	
	.teaser			{	position: relative; padding: 0 1rem 1rem; margin-bottom: 2rem; border-right-width: 1px; } 
	.teaser	> img		{	width: 100%; margin: 0 auto 1rem; } 
	.teaser:hover > img	{	opacity: 0.8; } 
	.teaser	> span	{	position: absolute; bottom: 0; width: calc(100% - 2rem); height: 0.5rem; } 
	
	.proof			{	position: relative; min-width: calc(16.66% - 2rem); padding: 0 1rem ; } 
	.proof > img, .proof a > img	{	height: 5rem; margin: 1rem auto 1rem; } 
	
	.partner		{	position: relative; padding: 0 1rem 0; margin-bottom: 2rem; border-right-width: 1px; } 
	.partner > img, .partner a > img	{	height: 8rem; max-width: 200px; margin: 0 auto 1rem; } 
	
	footer			{	position: relative; width: 100%; padding: 1.00rem 0 3.00rem; }
	footer a		{	display: inline-block; margin: 0 0.30rem; }
	footer a:hover	{	opacity: 0.6; }
	
	.medien		{	position: relative; width: 100%; margin: 2.00rem 0 1.00rem 0; font-size: 0; }
	.sm 		{	width: 3rem; height: 3rem; margin-bottom: 1.00rem; }

/* ================================================================
		CONTENT
================================================================ */

		article:first-child	{	flex: 2; padding-right: 2.00rem; border-right-width: 1px; }
		article:last-child	{	flex: 1; padding-left:  2.00rem;  }
		article img			{	width: 100%; margin-bottom: 1rem; } 
		

		article.full			{	width: 100%; text-align: center; padding: 0; }
			.full figure		{	width: calc(20% - 1.50rem); margin: 1.6em 0.2em 0; display: inline-block; }
			.full figure img	{	width: 100%; margin-bottom: 0.6em; }
										
a.sbox				{	position: relative; flex: 0 30%; max-height: 3.80rem; margin: 0 0 2rem 0; padding: 0; border-width: 1px; overflow: hidden; 
						background-image: url('../img/svg/plus-gray.svg'); background-repeat: no-repeat; background-position: right 0.50rem top 0.50rem; background-size: 0.80em; }
						 
a.sbox > span.img	{	position: absolute; display: inline-block; top: 0.50rem; left: 0.50rem; width: 2.80rem; height: 2.80rem; background-repeat: no-repeat; background-position: center; background-size: 2.40rem; } 
a.sbox > span.txt	{	position: absolute; display: inline-block; top: 1.50rem; left: 4.00rem; } 
a.sbox > ul			{	margin: 3.80rem 0.5rem 0.5rem 0.5rem ; } 

a.sbox:hover		{	max-height: 500px; background-image: url('../img/svg/minus-gray.svg'); } 
a.sbox:hover > ul	{	height: auto; } 

					a.sbox > span.img.smart		{	background-image: url('../img/icon/services/cm-icon-smart-invers.svg'); }
					a.sbox > span.img.richtbank	{	background-image: url('../img/icon/services/cm-icon-richtbank-invers.svg'); }
					a.sbox > span.img.lack		{	background-image: url('../img/icon/services/cm-icon-lack-invers.svg'); }
					a.sbox > span.img.dellen	{	background-image: url('../img/icon/services/cm-icon-dellen-invers.svg'); }
					a.sbox > span.img.glas		{	background-image: url('../img/icon/services/cm-icon-glas-invers.svg'); }
					a.sbox > span.img.klima		{	background-image: url('../img/icon/services/cm-icon-klima-invers.svg'); }
					a.sbox > span.img.leasing	{	background-image: url('../img/icon/services/cm-icon-leasing-invers.svg'); }
					a.sbox > span.img.plaste	{	background-image: url('../img/icon/services/cm-icon-plaste-invers.svg'); }
					a.sbox > span.img.pimp		{	background-image: url('../img/icon/services/cm-icon-pimp-invers.svg'); }
					a.sbox > span.img.oldtimer	{	background-image: url('../img/icon/services/cm-icon-oldtimer-invers.svg'); }
					a.sbox > span.img.finanz	{	background-image: url('../img/icon/services/cm-icon-finanz-invers.svg'); }
					a.sbox > span.img.schrott	{	background-image: url('../img/icon/services/cm-icon-schrott-invers.svg'); }
					a.sbox > span.img.unfall	{	background-image: url('../img/icon/services/cm-icon-unfall-invers.svg'); }										

/* ================================================================
		ELEMENTS
================================================================ */

	a.toplink 	{	position: fixed; display: block; z-index: 3; bottom: 0; right: 0; width: 3.00rem; height: 3.00rem;  
					background-image: url('../img/svg/arrow-top-white.svg'); background-repeat: no-repeat; background-position: center; background-size: 2.00rem; }
					
	a.btn	 	{	display: inline-block; padding: 0.50rem 1rem; margin-top: 1.00rem; border-width: 0.20rem; }

	.cover		{	position: absolute; z-index: 1; width: 100%; height: 100%; } 
	.center		{	position: relative; z-index: 3; height: 100%; } 
	
	.flexbox	{	width: 100%;  
						display: 			flex;
						flex-direction: 	row; 
						justify-content: 	space-between;
						align-content: 		space-between;						
						flex-wrap: 			wrap; }
					  
	.spacing	{	width: 100%; height: 2rem; background: url('../img/spacing.png') no-repeat top center; background-size: 60%; } 
	
/* ================================================================
		CLEARFIX
================================================================ */

/* Clearfix */
.group:after {	content: "."; display: block; clear: both; font-size: 0; height: 0; visibility: hidden; }
/* IE-Patch für IE 7*/
*:first-child+html .group { min-height: 0; } 
/* IE-Patch für IE 6*/
* html .group { height: 1%; }

.clear				{	clear:	 both; }
a:active, a:focus	{	outline: none; }

/*
*:last-child	{	margin-bottom: 0; }

/* ================================================================
		THE END
================================================================ */
.full-height {
	height: calc(680px);
}

ul.contact-person {
	font-size: 0.90rem;
}
ul.contact-person li {
	list-style-type: none;
	margin-bottom: 0.3rem;
}
ul.contact-person li:first-child {
	font-weight: bold;
}
ul.contact-person + img, ul.contact-person + ul {
	margin-top: 2rem;
}
ul.item + p {
	margin-top: 1rem;
}

table.service-partner {
	width: 100%;
	margin-top: 2rem;
}
@media(min-width: 1620px) {
	table.service-partner td:first-child {
	float: left;
}
table.service-partner td:last-child {
	float: right;
}
}

table.service-partner td {
	max-width: 300px;
}

.cover {
	z-index: 3;
}