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


/* Kundenspezifische Variablen festlegen */
:root {

	--textColor: #000;
	--negativeColor: #fff;

	--backgroundColor: #fff;
	--backgroundColor60: #E5E5E5;
	--backgroundColor40: #f4f4f4;

	--mainColor :  #004D91;
	--mainColor60: #6694bd;
	--mainColor40: #99b8d3;
	--maincolor20: #ccdbe9;

	/* Rot */
	--color1 : #971724;
	--color160: #c1747c;
	--color140: #d5a2a7;
	--color120: #ead1d3;

	/* Grün */
	--color2 : #006837;
	--color260: #66a487;
	--color240: #99c3af;
	--color220: #cce1d7;

	/* Gelb */
	--color3 : #FDE801;
	--color360: #fef167;
	--color340: #fef699;
	--color320: #fffacc;

	/* Highlight */
	--highlight : #FDE801;
	--highlight60: #fef167;
	--highlight40: #fef699;
	--highlight20: #fffacc;

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

	--font-body:'Atkinson Hyperlegible Regular', Helvetica, Arial, sans-serif;
	--font-headline:'Atkinson Hyperlegible Regular', Helvetica, Arial, sans-serif;
}

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


*{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin:0px;
	padding:0px;
	font-family: var(--font-body);
	text-shadow: none;
}


body{
	background-color: var(--backgroundColor);
	color: var(--textColor);
  font-family: var(--font-body);
  font-size:	18px;
	line-height:130%;
	font-weight: normal;
	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 ######################
#################################################*/

h1, .likeH1{
font-size: 2rem;
line-height: 120%;
font-weight: bold;
}

h3, .likeH3{
  font-size:1.25rem;
  line-height:120%;
  font-weight:bold;
  color: var(--mainColor);
}

.smallText{
font-family: var(--font-body);
font-size: 0.8rem;
font-weight: 400;
color: var(--black);
display: inline-block;
}

h1, .likeH1, .mainHeadline{
	font-family: var(--font-headline);
	font-size: 2.5rem;
	font-weight: bold;
	color: var(--black);
	margin-top:5px;
	margin-bottom:10px;
	display:inline-block !important;
}

/* Textmarker-Effekt */
.highlighter{
	width: auto;
	display:inline;

  background-position-y: 120%;
  background-image: linear-gradient( rgba(255,255,255,0) 70%, var(--color3) 50%);
  background-size: 2px;
  background-size: auto 175%;
}


.subHeadline{
	font-family: var(--font-headline);
	font-size: 2rem;
	line-height: 120%;
	font-weight: normal;
	font-style: italic;
	margin-top:5px;
	margin-bottom:10px;
  max-width: 66%;
}


h2, .sectionHeadline{
font-size: 2rem;
line-height: 120%;
font-family: var(--font-headline);
font-weight:bold;
color: var(--mainColor);
padding-top: 5px;
padding-bottom: 10px;
}

h3, .likeH3, .teaserHeadline{
	font-family: var(--font-headline);
	font-size:1.25rem;
	line-height:120%;
	font-weight:bold;
	color: var(--textColor);
	padding-top: 5px;
padding-bottom: 10px;
}

.highlighter{
	padding-top:0px;
	padding-bottom:0px;
}

/* ##################################################
################## Buttons ###########################
################################################## */

.btnBig, .btn{
	font-size:1.5rem;
	font-weight: bold;
  background-color: var(--mainColor);
  border: 0px;
  text-align: center;
  color: var(--negativeColor);
  border-radius: 5px;
  line-height: 125%;
  display:inline-block;
	padding: 12px 25px;
}

.btn{
	font-size:1rem;
}

.smallBtn{
	font-size: 0.7rem;
  text-transform: uppercase;
  font-weight: normal;
  padding: 5px;
  border-radius: 4px;
}


.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);
}

.fbLink, .igLink{
	width:18px!important;
}
/* ##############################################################
##################### Zusatzklassen ##############################
#################################################################*/

.mainSection{
	padding-top:45px;
	padding-bottom:30px;
}

.bottomborder{
	border-bottom: 3px solid var(--mainColor);
}

.bgBox{
	background-color:var(--backgroundColor60);
}

.bgBoxMain{
	background-color:var(--mainColor);
	color: #fff;
}

.bgBoxMain li, .bgBoxMain h2, .bgBoxMain h3, .bgBoxMain h4, .bgBoxMain p{
	color:#fff;
}

.borderTop{
	padding-top:30px;
	margin-top:60px;
	border-top:3px solid var(--backgroundColor60);
}




/* ##############################################################
##################### Media-Queries ##############################
#################################################################*/

@media (max-width: 1272px) {
.ms-gliderBody{
	margin-left:30px;
	left:0px;
}

}

@media (max-width: 992px) {

	.slider{
		padding-bottom:130%;
	}

	.sliderBtnArea {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
	}

	.ms-slideImage {
    height: calc( 100% - 200px );
	}

	.slider .sliderIMG figcaption {
    position: absolute;
    bottom: 80px;
    left: 15px;
	}

}

@media (max-width: 768px) {

	.slider{
		padding-bottom:130%;
	}

	.sliderBtnArea {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
	}

	.ms-slideImage {
    height: calc( 100% - 200px );
	}

	.slider .sliderIMG figcaption {
    position: absolute;
    bottom: 80px;
    left: 15px;
	}

}