/* ######################################################################## */
/* #################### Diese CSS definiert individuelle Anpassungen an der Seite ############################## */
/* ######################################################################## */

/* Variables */
:root {

	--textColor: #fff;

	--backgroundColor: #252C2E;
	--backgroundColor60: #4D5551;
	--backgroundColor40: #707070;

	--mainColor : #8f75b4;
	--mainColor60: #bcacd2;
	--mainColor40: #d2c8e1;
	--maincolor20: #e9e3f0;

	--color1 : #15ab5b;
	--color160: #73cd9d;
	--color140: #a1ddbd;
	--color120: #d0eede;

	--color2 : #87B91E;
	--color260: #B7D578;
	--color240: #CFE3A5;
	--color220: #E7F1D2;

	--color3 : #FF634D;
	--color360: #FFA194;
	--color340: #FFC1B8;
	--color320: #FFE8E4;

	--black: #000;
	--black60: #666;
	--black40: #999;
	--black20: #ccc;
	--black10: #eaeaea;


	--font-body: 'Roboto', sans-serif;
	--font-headline: 'Roboto', sans-serif;
}


/* Font-Familys */
@import url('font.css');



*{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin:0px;
	padding:0px;
	color:var(--textColor);
	font-size: 16px;
	line-height:160%;
	font-family: var(--font-body);
	text-shadow: none;
}

body{
	background-color: var(--backgroundColor);
	color: var(--textColor);
  font-family: var(--font-body);
  font-size:	1rem;
	font-weight: 200;
	text-rendering:								optimizeLegibility;
  -webkit-font-smoothing: 			antialiased;
  -webkit-tap-highlight-color: 	transparent;
}

a{text-decoration:none;}
main {display: block;}

/* Farbklassen */

.color2{color:var(--color2);}
.color1{color:var(--color1);}
.mainColor{color:var(--mainColor);}
.color3{color:var(--color3);}


/* Headlines */



.mainHeadline{
	font-family: var(--font-headline);
	font-size: 2.5rem;
	font-weight: 800;
	color: var(--black);
}

.subHeadline{
	font-family: var(--font-headline);
	font-size: 2rem;
	font-weight: normal;
	color: var(--black60);
}

.teaserHeadline{
	font-family: var(--font-headline);
	font-size:1.25rem;
	line-height:120%;
	font-weight:800;
	color: var(--textColor);
}


a.teaserHeadline:after {
    content: '';
    height: 3px;
    width: 50px;
    display: block;
    background: #fff;
    margin-top: 14px;
}

.centerText a.teaserHeadline:after{
	    margin: 14px auto 0px auto;
}
/* Buttons */

.btn{cursor:pointer}
.btnBig{cursor:pointer}

.btnBig .btnHoverEffect,
.btn .btnHoverEffect{
	position:absolute;
	width:0px;
	height:100%;
	left:0px;
	top:0px;
	background-color:var(--black);
	overflow:hidden;

	transition-property: width;
  transition-duration: 0.35s;
  transition-delay: 0.15s;
	transition-timing-function: ease-in-out;
}

.btnBig .btnHoverEffect span,
.btn .btnHoverEffect span{
	color:#fff;
	font-size:1.5rem;
	font-weight: bold;
	display:inline-block;
	padding:5px 10px;
	height:100%;
	width: 500px;
	text-align:left!important;
}

.btn .btnHoverEffect span{
font-size:1rem;
}


.btnBig:hover .btnHoverEffect,
.btn:hover .btnHoverEffect{
	width:100%;
	transition-property: width;
  transition-duration: 0.35s;
  transition-delay: 0.15s;
	transition-timing-function: ease-in-out;
}

.btnBig.color2,
.btn.color2{
	border: 3px solid var(--color2);
	color:var(--color2);
}

.btnBig.color2 .btnHoverEffect,
.btn.color2 .btnHoverEffect{
	background-color:var(--color2);
}

.btnBig.color1,
.btn.color1{
	border: 3px solid var(--color1);
	color:var(--color1);
}

.btnBig.color1 .btnHoverEffect,
.btn.color1 .btnHoverEffect{
	background-color:var(--color1);
}

.btnBig.mainColor,
.btn.mainColor{
	border: 3px solid var(--mainColor);
	color:var(--mainColor);
}

.btnBig.mainColor .btnHoverEffect,
.btn.mainColor .btnHoverEffect{
	background-color:var(--mainColor);
}

/* wechselnde Hintergrundfarbe */
.color2BGSwitched{
	background-color:var( --mainColor );
}

.color2BGSwitched:nth-of-type(even){
	background-color:var( --mainColor60 );
}

.square a{
	color:var(--black);
}

.color2BGSwitched h3,
.color2BGSwitched h3 a{
	color:#fff;
}

.headlinneUnderlinecolor2 h3 a:after{
  background: var(--mainColor);
}