@charset "utf-8";

/* montserrat-regular - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/montserrat-v25-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/montserrat-v25-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/montserrat-v25-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/montserrat-v25-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/montserrat-v25-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/montserrat-v25-latin-regular.svg#Montserrat') format('svg'); /* Legacy iOS */
}

/* nothing-you-could-do-regular - latin */
@font-face {
  font-family: 'Nothing You Could Do';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/nothing-you-could-do-v15-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/nothing-you-could-do-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/nothing-you-could-do-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/nothing-you-could-do-v15-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/nothing-you-could-do-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/nothing-you-could-do-v15-latin-regular.svg#NothingYouCouldDo') format('svg'); /* Legacy iOS */
}

/* open-sans-300 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/open-sans-v34-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/open-sans-v34-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v34-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v34-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v34-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v34-latin-300.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open-sans-v34-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/open-sans-v34-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v34-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v34-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v34-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v34-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-500 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/open-sans-v34-latin-500.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/open-sans-v34-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v34-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v34-latin-500.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v34-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v34-latin-500.svg#OpenSans') format('svg'); /* Legacy iOS */
}

/*@color: #4D926F;
#header {
  color: @color;
/* 
------------------------------------------------------------------ 
GRUNDSÄTZLICHES 
------------------------------------------------------------------ 
*/

*, *::after, *::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;								/* proportionale Schriftgröße GESAMT */
}

body {
  font-size:16rem;							/* proportionale Schriftgröße */
  font-family: "Open Sans", sans-serif; 		/* Textschrift */
  color: #2c343b;								/* Textfarbe */
  background-color: #f2f2f2;					/* Hintergrundfarbe */
}

a {
  color: #d44457;
  text-decoration: none;
}

img {
  max-width: 100%;								/* proportionale Bildgröße - Höhe klappt nicht */
}

/* ------------------------------------------------------------------------------------------------------- */
/* EINSTELLUNGEN für FOOTER		 																		   */
/* ------------------------------------------------------------------------------------------------------- */

footer ul li {
	padding: 0;
	margin: 0;
	display: inline;
	font-size: 1.0em;
	line-height: 2.3em;
	background-color:bcac00;
}

/* ------------------------------------------------------------------------------------------------------- */
/* EINSTELLUNGEN für FLOATBOXEN 																		   */
/* ------------------------------------------------------------------------------------------------------- */

#box100 {
    float: left;
    margin: 0;
    /* padding: 10px 20px 10px 20px; */
    width: 100%;
    height: auto;
	border: none;
	background: #ffffff;
	}
	
#box101 {
    float: left;
    margin: 0;
    /* padding: 10px 20px 10px 20px; */
    width: 100%;
    height: auto;
	border: none;
	background: #c1b6a3;
	}	

#ibox100 {
/*  float: left; */
    margin: 0;
    /* padding: 10px 20px 10px 20px; */
    width: 100%;
    height: auto;
	border: none;
	background: #ffffff;
	}

#ibox50 {
/*  float: left; */
    margin: 0;
    /* padding: 10px 20px 10px 20px; */
    width: 50%;
	height: 100%;
	border: none;
	background: #c1b6a3;
	text-align: left;
	}

#iboxQ50 {
/*  float: left; */
    margin: 0;
    /* padding: 10px 20px 10px 20px; */
    width: 100%;
	height: 50%;
	border: none;
	background: #b6a7a7;
	text-align: left;
	}

#iboxT33 {
/*  float: left; */
    margin: 0;
	padding: 0px 2% 0px 2%; 
    width: 29.333%;
	height: 350px;
	border: none;
	background: #ffffff;
	text-align: left;
	}
	
#ibox33 {
/*  float: left; */
    margin: 0;
	padding: 0% 0% 0% 0%; 
    width: 100%;
	height: 100%;
	border: none;
	background: #bcac00;
	text-align: center;
	color:#ffffff;
	overflow:hidden;	
	}
	
#ibox25 {
/*  float: left; */
    margin: 0;
	padding: 0% 0% 0% 0%; 
    width: 25%;
	height: 100%;
	border: none;
	background: #fff0b2;
	text-align: center;
	}

#ibox70 {
	/* Abstand innerhalb der Box > Top - right - bottom - left */
	/* margin:  0px 1% 1% 0px; */
	margin: 0;
	/* padding: 10px 20px 10px 20px; */
	border: none;
	width: 100%;
	height: 100%;
	background: #ffffff;
	}

#ibox30 {
	/* Abstand innerhalb der Box > Top - right - bottom - left */
	/* margin:  0px 1% 1% 0px; */
	margin: 0;
	/* padding: 10px 20px 10px 20px; */
	border: none;
	width: 100%;
	height: 100%;
	background: #ffffff;
	}
	


/* ------------------------------------------------------------------------------------------------------- */
/* EINSTELLUNGEN für den INHALT */
/* ------------------------------------------------------------------------------------------------------- */

#content {
	font-size:1.2em;
	text-align:center; 
	margin: 0;
	padding: 3% 5% 5% 5%; 		/* width   muss berücksichtigt werden */
	width: 90%; 				/* Padding links + rechts muss berücksichtigt werden */
	border: none;
	height: auto;
	background: #601e04;
	color: #ffffff;
	}

#content p {
	font-size:1.2em;
	text-align:justify; 
	margin: 0;
	padding: 0% 5% 0% 5%; 		/* width   muss berücksichtigt werden */
	width: 90%; 				/* Padding links + rechts muss berücksichtigt werden */
	border: none;
	height: auto;
	}

#content-1 {
	font-size:2.4em;
	text-align:left; 
	margin: 0;
	padding: 3% 5% 5% 5%; 		/* width   muss berücksichtigt werden */
	width: 90%; 				/* Padding links + rechts muss berücksichtigt werden */
	border: none;
	height: auto;
	background: #ffffff;
	color: #000000;
	}

#content-2 {
	font-size:1em;
	text-align:left; 
	margin: 0;
	padding: 3% 15% 5% 15%; 		/* width   muss berücksichtigt werden */
	width: 100%; 				/* Padding links + rechts muss berücksichtigt werden */
	border: none;
	height: auto;
	background: #ffffff;
	color: #000000;
	}


#content-2 h2 {
	font-family: 'Nothing You Could Do', cursive;
	/*font-family: 'Open Sans Condensed', sans-serif;*/
	font-size:4em;
	text-align:left; 
	margin: 0;
	padding: 3% 15% 5% 15%; 		/* width   muss berücksichtigt werden */
	width: 100%; 				/* Padding links + rechts muss berücksichtigt werden */
	border: none;
	height: auto;
	background: #ffffff;
	color: #7b7200;
	}

/* ------------------------------------------------------------------------------------------------------- */
/* ANPASSUNGEN an die ENDGERÄTE / BILDSCHIRMGRÖßEN >>> FLOATBOXEN 										   */
/* ------------------------------------------------------------------------------------------------------- */



/* Einstellungen für Bildschirmgröße > 768px */
@media only screen and (min-width: 768px) {
/* ------------------------------------------------------------------------------------------------------- */
/* EINSTELLUNGEN für FLOATBOXEN 																		   */
/* ------------------------------------------------------------------------------------------------------- */

#box100 {
    float: left;
    margin: 0;
    /* padding: 10px 20px 10px 20px; */
    width: 100%;
    height: auto;
	border: none;
	background: #ffffff;
	}
	
#box101 {
    float: left;
    margin: 0;
    /* padding: 10px 20px 10px 20px; */
    width: 100%;
    height: auto;
	border: none;
	background: #c1b6a3;
	}	

#ibox100 {
/*  float: left; */
    margin: 0;
    /* padding: 10px 20px 10px 20px; */
    width: 100%;
    height: auto;
	border: none;
	background: #ffffff;
	}

#ibox50 {
/*  float: left; */
    margin: 0;
    /* padding: 10px 20px 10px 20px; */
    width: 50%;
	height: 100%;
	border: none;
	background: #c1b6a3;
	text-align: left;
	}

#iboxQ50 {
/*  float: left; */
    margin: 0;
    /* padding: 10px 20px 10px 20px; */
    width: 100%;
	height: 50%;
	border: none;
	background: #b6a7a7;
	text-align: left;
	}

#iboxT33 {
/*  float: left; */
    margin: 0;
	padding: 0px 2% 0px 2%; 
    width: 29.333%;
	height: 350px;
	border: none;
	background: #ffffff;
	text-align: left;
	}
	
#ibox33 {
/*  float: left; */
    margin: 0;
	padding: 0% 0% 0% 0%; 
    width: 33.333%;
	height: 100%;
	border: none;
	background: #bcac00;
	text-align: center;
	color:#ffffff;
	overflow:hidden;	
	}
	
#ibox25 {
/*  float: left; */
    margin: 0;
	padding: 0% 0% 0% 0%; 
    width: 25%;
	height: 100%;
	border: none;
	background: #fff0b2;
	text-align: center;
	}

#ibox70 {
	/* Abstand innerhalb der Box > Top - right - bottom - left */
	/* margin:  0px 1% 1% 0px; */
	margin: 0;
	/* padding: 10px 20px 10px 20px; */
	border: none;
	width: 66%;
	height: 100%;
	background: #ffffff;
	}

#ibox30 {
	/* Abstand innerhalb der Box > Top - right - bottom - left */
	/* margin:  0px 1% 1% 0px; */
	margin: 0;
	/* padding: 10px 20px 10px 20px; */
	border: none;
	width: 34%;
	height: 100%;
	background: #ffffff;
	}


#content {
	font-size:1.2em;
	text-align:center; 
	margin: 0;
	padding: 3% 5% 5% 5%; 		/* width   muss berücksichtigt werden */
	width: 90%; 				/* Padding links + rechts muss berücksichtigt werden */
	border: none;
	height: auto;
	background: #601e04;
	color: #ffffff;
	}

#content p {
	font-size:1.2em;
	text-align:justify; 
	margin: 0;
	padding: 0% 5% 0% 5%; 		/* width   muss berücksichtigt werden */
	width: 90%; 				/* Padding links + rechts muss berücksichtigt werden */
	border: none;
	height: auto;
	}

#content-1 {
	font-size:1.4em;
	text-align:justify; 
	margin: 0;
	padding: 3% 5% 5% 5%; 		/* width   muss berücksichtigt werden */
	width: 90%; 				/* Padding links + rechts muss berücksichtigt werden */
	border: none;
	height: auto;
	background: #ffffff;
	color: #000000;
	}

#content-2 {
	font-size:1em;
	text-align:left; 
	margin: 0;
	padding: 3% 15% 5% 15%; 		/* width   muss berücksichtigt werden */
	width: 100%; 				/* Padding links + rechts muss berücksichtigt werden */
	border: none;
	height: auto;
	background: #ffffff;
	color: #000000;
	}

#content-2 h2 {
	font-family: 'Nothing You Could Do', cursive;
	/*font-family: 'Open Sans Condensed', sans-serif;*/
	font-size:3em;
	text-align:left; 
	margin: 0;
	padding: 3% 15% 5% 15%; 		/* width   muss berücksichtigt werden */
	width: 100%; 				/* Padding links + rechts muss berücksichtigt werden */
	border: none;
	height: auto;
	background: #ffffff;
	color: #7b7200;
	}
}

/* ------------------------------------------------------------------------------------------------------- */
/* ANPASSUNGEN an die ENDGERÄTE / BILDSCHIRMGRÖßEN >>> FLOATBOXEN 										   */
/* ------------------------------------------------------------------------------------------------------- */

@media screen and (min-width: 801px) {
	div div {
		float: left;
       	width: 100%;
		/*height: 100px;*/
		/* Abstand innerhalb der Box > Top - right - bottom - left */
       	margin: 0;
		/* margin:  0px 1% 1% 0px; */
        /* padding: 10px 20px 10px 20px; */
		background: #ffffff; 
		border: none;
		}

	.clearfix::after {
		content: "";
		clear: both;
		display: block;
		}
}
	
/* 
------------------------------------------------------------------ 
HEADER 
------------------------------------------------------------------ 
*/   

/* Einstellungen für Bildschirmgröße SMALL */
.cd-header {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: rgba(255, 255, 255, 0);		/* rgba(255, 255, 255, 0.2) = Transparenz */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Einstellungen für Bildschirmgröße > 768px */
@media only screen and (min-width: 768px) {
  .cd-header {
    height: 10%;	/* 70px;*/
    background-color: rgba(255, 255, 255, 1);		/* rgba(255, 255, 255, 0.2) = Transparenz     background-color: transparent;*/
  }
}

/* 
------------------------------------------------------------------ 
LOGO
------------------------------------------------------------------ 
*/   

/* Einstellungen für Bildschirmgröße SMALL */
#cd-logo {
  float: left;
  margin: 20px 5% 0 5%;	  							/* Oben rechts unten links 0 0 0 3%*/
}
#cd-logo img {
  display: block;
}

/* Einstellungen für Bildschirmgröße > 768px */
@media only screen and (min-width: 768px) {
  #cd-logo {
    margin: 15px 0 0 5%;							/* Oben rechts unten links 0 0 0 5%*/
	width: 350px;
  }
}

/* 
------------------------------------------------------------------ 
NAVIGATION
------------------------------------------------------------------ 
*/  

/* Einstellungen für Bildschirmgröße SMALL */   
.cd-primary-nav {
  /* mobile first - navigation hidden by default, triggered by tap/click on navigation icon */
  float: right;
  margin-right: 5%; 							/* Abstand zum Rand */
  width: 44px;									/* position icon-menu */
  height: 100%;									/* position icon-menu */
  background: url("../navigation/icon-menu.svg") no-repeat center center;
}
.cd-primary-nav ul {
  position: absolute;
  top: 0;										/* Wert 50px = 1 Navipunkt, 100px = 2 Navipunkte, ... */
  left: 0;
  width: 100%;									/* Breite der offenen Navigation */
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  -o-transform: translateY(-100%);
  transform: translateY(-100%);
}
.cd-primary-nav ul.is-visible {
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);		/* Schatten der offenen Navigation */
  -webkit-transform: translateY(50px);
  -moz-transform: translateY(50px);
  -ms-transform: translateY(50px);
  -o-transform: translateY(50px);
  transform: translateY(50px);
}
.cd-primary-nav a {
  display: block;								/* Anordnung der Navigationspunkte - block = untereinander, inline = hintereinander, flex ...*/
  height: 50px;									/* Höhe der einzelnen offenen Navigationspunkte */
  line-height: 50px;							/* Höhe der Navigationsinhalte */
  padding-left: 5%;								/* Abstand Text zum Rand */
  background: rgba(33, 39, 44, 0.9);  			/* Hintergrundfarbe der offenen Navigation z.B. #21272c */
  border-top: 1px solid #333c44;				/* Linie zwischen den navigationspunkten */
  color: #ffffff;								/* Textfarbe der offenen Navigationspunkte */
}

/* Einstellungen für Bildschirmgröße > 768px */
@media only screen and (min-width: 768px) {
  .cd-primary-nav {
    /* Löschen NavigationsWerte */
    width: auto;
    height: auto;
    background: none;
  }
  .cd-primary-nav ul {
    position: static;	
    width: auto;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
    line-height: 70px;													/* Höhe der Navigation */
  }
  .cd-primary-nav ul.is-visible {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }
  .cd-primary-nav li {
    display: inline-block;
    margin-left: 1em;
  }
  .cd-primary-nav a {
    display: inline-block; 												/* Anordnung der Navigationspunkte - block = untereinander, inline = hintereinander, flex ...*/
    height: auto;
    font-weight: 600;
    line-height: normal;
    background: transparent;											/* Hintergrundfarbe Navigationsbutton */
    padding: .6em 1em;
    border-top: none;
  }
}

/* 
------------------------------------------------------------------ 
SLIDER
------------------------------------------------------------------ 
*/  

/* Einstellungen für Bildschirmgröße SMALL */
.cd-hero {
  position: relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.cd-hero-slider {														/* SLIDER */
  position: relative;
  height: 100vh;						/* + 768 */	/* + 1170 */		/* Höhe des Slider z.B. 360px */
  overflow: hidden;
}
.cd-hero-slider li {													/* SLIDER LINKER BEREICH */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;															/* Slider in voller Breite = 100% | 50% = geteilter Bildschirm > Slider nur rechts */
  height: 100%;															/* Slider in voller Höhe = 100% | 50% = geteilter Bildschirm > Slider nur rechts */
  -webkit-transform: translateX(100%);
  -moz-transform: translateX(100%);
  -ms-transform: translateX(100%);
  -o-transform: translateX(100%);
  transform: translateX(100%);
  /* Die Schieberegler-Struktur ist ziemlich einfach: alle Rutschen werden nach rechts übersetzt, außerhalb des Ansichtsfensters (translateX (100%)); 
     Die ausgewählte Klasse wird der sichtbaren Folie hinzugefügt, um sie wieder in das Ansichtsfenster zu verschieben (translateX (0)), während die 
	 linke Klasse (.move-left) verwendet wird, um eine Folie nach links zu übersetzen (translateX (-100%)).
  */  
}
.cd-hero-slider li.selected {											/* Position SLIDERTEXT */
  position: relative;
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}
.cd-hero-slider li.move-left {
  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  -o-transform: translateX(-100%);
  transform: translateX(-100%);	 										/* SLIDERwechsel nach links */
  /* Um die reibungslose Animation zu erreichen, haben wir CSS3 Transitions verwendet, die auf die ausgewählten (.selected) und die bewegten Elemente (.is-moving) 
     angewendet werden: Wenn eine neue Folie ausgewählt ist, wird die .is-moving-Klasse der Folie zugeordnet, die sich außerhalb des Ansichtsfensters bewegt Klasse 
	 wird der ausgewählten Folie zugeordnet.
  */  
}
.cd-hero-slider li.is-moving, .cd-hero-slider li.selected {
  -webkit-transition: -webkit-transform 0.5s;
  -moz-transition: -moz-transform 0.5s;
  transition: transform 0.5s;											/* SLIDERwechsel transform + Geschwindigkeit */
}

/* Einstellungen für Bildschirmgröße > 768px */
@media only screen and (min-width: 768px) {
  .cd-hero-slider {
    height: 70vh;														/* Höhe des Slider z.B. 500px */
  }
}

/* Einstellungen für Bildschirmgröße > 1170px */
@media only screen and (min-width: 1170px) {
  .cd-hero-slider {
    height: 70vh;														/* Höhe des Slider z.B. 680px */
  }
}

/* 
------------------------------------------------------------------ 
EINZELNE SLIDER - EINSTELLUNG
------------------------------------------------------------------ 
*/  

/* Einstellungen für Bildschirmgröße SMALL */
.cd-hero-slider li {
  background-position: center center;
  background-size: cover;												/* Cover = Hintergrund voll implementiert */
  background-repeat: no-repeat;
}
.cd-hero-slider li:first-of-type {
  background-color: #bcac00;
  background-image: url("../images-slider/slider01.jpg"); 		/* + 768 */
}
.cd-hero-slider li:nth-of-type(2) {
  background-color: #bcac00;
  background-image: url("../images-slider/slider02.jpg"); 		/* + 768 */
}
.cd-hero-slider li:nth-of-type(3) {
  background-color: #bcac00;
  background-image: url("../images-slider/slider03.jpg"); 		/* + 768 */
}
.cd-hero-slider li:nth-of-type(4) {	
  background-color: #bcac00;
  background-image: url("../images-slider/slider04.jpg");		/* + 768 */
/*  background-image: url("../assets/video-replace-mobile.jpg");*/  
}
.cd-hero-slider li:nth-of-type(5) {
  background-color: #bcac00;
  background-image: url("../images-slider/slider05.jpg"); 		/* + 768 */
/*  background-image: url(../assets/img.jpg);*/
}
.cd-hero-slider li:nth-of-type(6) {										/* >>> für WEITERE SLIDER diese Bereiche erweitern */
  background-color: #bcac00;		
  background-image: url("../images-slider/slider06.jpg"); 		/* + 768 */
}

.cd-hero-slider .cd-full-width,
.cd-hero-slider .cd-half-width {
  position: absolute;
  width: 100%;										/* SLIDERINHALT verteilt über x% des SLIDERS */
  height: 100%;										/* SLIDERINHALT verteilt über x% des SLIDERS */
  z-index: 1;
  left: 0;
  top: 0;
  padding-top:100px;	  							/* padding richtet den SLIDERTEXT aus */
  text-align: center;
  /* Force Hardware Beschleunigung */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
}
.cd-hero-slider .cd-img-container {
  display: none;		  							/* SLIDERBILD nicht auf Mobilgeräten */
}
.cd-hero-slider .cd-img-container img {
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}
.cd-hero-slider .cd-bg-video-wrapper {
  display: none;									/* SLIDERVIDEO nicht auf Mobilgeräten */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.cd-hero-slider .cd-bg-video-wrapper video {
  /* NUR für JS - nicht HTML */
  display: block;
  min-height: 100%;
  min-width: 100%;
  max-width: none;
  height: auto;
  width: auto;
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}
.cd-hero-slider h2, .cd-hero-slider p {
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  line-height: 1.2;
  margin: 25% 10px 0 10px;									/*oben rechts unten links 0 auto 14px */
  color: #ffffff;									/* SLIDERTEXT - Schriftfarbe */
  width: 90%;
  max-width: 600px;		/*400px */
}
.cd-hero-slider h2 {
  font-size: 4.4rem;			/*2.4rem					/* SLIDERTEXT - Schriftgröße */
  font-weight: 800;
}
.cd-hero-slider p {
  font-size: 2.4rem;
  line-height: 1.4;		  							/* SLIDERTEXT - Schriftgröße */
  font-weight: 600;
}
.cd-hero-slider .cd-btn {							/* BUTTON in SLIDERTEXT */
  display: inline-block;
  padding: 1.2em 1.4em;
  margin-top: .8em;
  background-color: rgba(255, 255, 255, 0.2);
  font-size: 2.3rem;		/*1.3rem */
  font-weight: 700;
  letter-spacing: 1px;
  color: #ffffff;
  text-transform: lowercase;						/* lowercase = alles klein | uppercase = alles groß | capitalize = Normal */
  box-shadow: 1px 1px 1px rgba(255, 255, 255, 0.0);	/* Versatz nach rechts | ... unten | Schärfe | Farbe */  
  -webkit-transition: background-color 0.2s;
  -moz-transition: background-color 0.2s;
  transition: background-color 0.2s;
}
.cd-hero-slider .cd-btn.secondary {
  background-color: rgba(255, 255, 255, 0.2);		/* 2. BUTTON in SLIDERTEXT */
}
.cd-hero-slider .cd-btn:nth-of-type(2) {
  margin-left: 1em;
}
.no-touch .cd-hero-slider .cd-btn:hover {			
  background-color: rgba(22, 26, 30, 0.2);			/* BUTTON-Hintergrundfarbe bei MOUSEOVER z.B. #8b9cc4; */
}
.no-touch .cd-hero-slider .cd-btn.secondary:hover {
  background-color:rgba(22, 26, 30, 0.2);			/* 2. BUTTON-Hintergrundfarbe bei MOUSEOVER z.B. #161a1e; */
}

/* Einstellungen für Bildschirmgröße > 768px */
@media only screen and (min-width: 768px) {
/*
 .cd-hero-slider li:nth-of-type(2) {
    background-image: none;
  }
  .cd-hero-slider li:nth-of-type(3) {
    background-image: none;
  }
  .cd-hero-slider li:nth-of-type(4) {
    background-image: none;
  }
  .cd-hero-slider li:nth-of-type(5) {
    background-image: none;
  }
  .cd-hero-slider li:nth-of-type(6) {				/* >>> für WEITERE SLIDER diese Bereiche erweitern 
    background-image: none;
  }
*/
  .cd-hero-slider .cd-full-width,
  .cd-hero-slider .cd-half-width {
    padding-top: 100px;
  }
  .cd-hero-slider .cd-bg-video-wrapper {
    display: block;
  }
  .cd-hero-slider .cd-half-width {
    width: 45%;
  }
  .cd-hero-slider .cd-half-width:first-of-type {
    left: 5%;
  }
  .cd-hero-slider .cd-half-width:nth-of-type(2) {
    right: 5%;
    left: auto;
  }
  .cd-hero-slider .cd-img-container {
    display: block;
  }
  .cd-hero-slider h2, .cd-hero-slider p {
    max-width: 820px;
  }
  .cd-hero-slider h2 {
    font-size: 4.4em;
    font-weight: 300;
  }
  .cd-hero-slider .cd-btn {
    font-size: 1.4rem;
  }
}

/* Einstellungen für Bildschirmgröße > 1170px */
@media only screen and (min-width: 1170px) {
  .cd-hero-slider .cd-full-width,
  .cd-hero-slider .cd-half-width {
    padding-top: 320px;	/*220px*/
  }

  .cd-hero-slider h2, .cd-hero-slider p {
  text-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
  line-height: 1.2;
  margin: 0 auto 14px;									/*oben rechts unten links 0 auto 14px */
  color: #ffffff;									/* SLIDERTEXT - Schriftfarbe */
  width: 100%;
  max-width: 800px;		/*400px */
}

  .cd-hero-slider h2 {
    font-size: 6.2em;	/*3.2em*/
    font-weight: 800;
  }
  .cd-hero-slider p {
    font-size: 3.0rem;	/*1.6rem*/
    font-weight: 600;
  }
}

/* 
------------------------------------------------------------------ 
EINZELNE SLIDER - ANIMATION
------------------------------------------------------------------ 
*/  
/* 
Über die Single-Slide-Animation: Bei großen Geräten (Viewport-Breite mehr als 768px) haben wir uns entschlossen, den Eingangseffekt, der die einzelnen Slidelemente 
(.cd-half-width und .cd-full-width)	animiert, zu würzen, die ihre Deckkraft verändern und transformiere Eigenschaften.

Von links und von rechts-rechter Klassen werden verwendet, um festzustellen, ob die ausgewählte Folie von links oder rechts in das Ansichtsfenster gelangt, um eine 
andere Animation entsprechend der Eintrittsrichtung auszulösen. Damit dieser Effekt richtig funktioniert, haben wir für jedes animierte Element einen anderen 
Animationsverzögerungswert verwendet.

@media only screen and (min-width: 768px) {
  .cd-hero-slider .cd-half-width {
    opacity: 0;
    transform: translateX(40px);
  }
  .cd-hero-slider .move-left .cd-half-width {
    transform: translateX(-40px);
  }
  .cd-hero-slider .selected .cd-half-width {
    /* this is the visible slide 
    opacity: 1;
    transform: translateX(0);
  }
  .cd-hero-slider .is-moving .cd-half-width {
    /* this is the slide moving outside the viewport 
    wait for the end of the transition on the <li> parent before set opacity to 0 and translate to 40px/-40px 
    transition: opacity 0s 0.5s, transform 0s 0.5s;
  }
  .cd-hero-slider li.selected.from-left .cd-half-width:nth-of-type(2),
  .cd-hero-slider li.selected.from-right .cd-half-width:first-of-type {
    /* this is the selected slide - different animation if it's entering from left or right 
    transition: opacity 0.4s 0.2s, transform 0.5s 0.2s;
  }
  .cd-hero-slider li.selected.from-left .cd-half-width:first-of-type,
  .cd-hero-slider li.selected.from-right .cd-half-width:nth-of-type(2) {
    /* this is the selected slide - different animation if it's entering from left or right 
    transition: opacity 0.4s 0.4s, transform 0.5s 0.4s;
  }
}
*/

/* Einstellungen für Bildschirmgröße > 768px */
@media only screen and (min-width: 768px) {
  .cd-hero-slider .cd-half-width {
    opacity: 0;
    -webkit-transform: translateX(40px);
    -moz-transform: translateX(40px);
    -ms-transform: translateX(40px);
    -o-transform: translateX(40px);
    transform: translateX(40px);
  }
  .cd-hero-slider .move-left .cd-half-width {
    -webkit-transform: translateX(-40px);
    -moz-transform: translateX(-40px);
    -ms-transform: translateX(-40px);
    -o-transform: translateX(-40px);
    transform: translateX(-40px);
  }
  .cd-hero-slider .selected .cd-half-width {
    /* SLIDER der aktuell sichtbar ist */
    opacity: 1;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
  }
  .cd-hero-slider .is-moving .cd-half-width {
    /* SLIDER der sich nach aussen bewegt und auf das Ende der TRANSITION des Elternelementes <li> wartet bevor die opacity = 0 und der Slider = 40px/-40px ist */
    -webkit-transition: opacity 0s 0.5s, -webkit-transform 0s 0.5s;
    -moz-transition: opacity 0s 0.5s, -moz-transform 0s 0.5s;
    transition: opacity 0s 0.5s, transform 0s 0.5s;
  }
  .cd-hero-slider li.selected.from-left .cd-half-width:nth-of-type(2),
  .cd-hero-slider li.selected.from-right .cd-half-width:first-of-type {
    /* SLIDER - verschiedene Animationen, wenn sie von links oder rechts eingegeben werden */
    -webkit-transition: opacity 0.4s 0.2s, -webkit-transform 0.5s 0.2s;
    -moz-transition: opacity 0.4s 0.2s, -moz-transform 0.5s 0.2s;
    transition: opacity 0.4s 0.2s, transform 0.5s 0.2s;
  }
  .cd-hero-slider li.selected.from-left .cd-half-width:first-of-type,
  .cd-hero-slider li.selected.from-right .cd-half-width:nth-of-type(2) {
    /* SLIDER - verschiedene Animationen, wenn sie von links oder rechts eingegeben werden */
    -webkit-transition: opacity 0.4s 0.4s, -webkit-transform 0.5s 0.4s;
    -moz-transition: opacity 0.4s 0.4s, -moz-transform 0.5s 0.4s;
    transition: opacity 0.4s 0.4s, transform 0.5s 0.4s;
  }
  .cd-hero-slider .cd-full-width h2,
  .cd-hero-slider .cd-full-width p,
  .cd-hero-slider .cd-full-width .cd-btn {
    opacity: 0;
    -webkit-transform: translateX(100px);
    -moz-transform: translateX(100px);
    -ms-transform: translateX(100px);
    -o-transform: translateX(100px);
    transform: translateX(100px);
  }
  .cd-hero-slider .move-left .cd-full-width h2,
  .cd-hero-slider .move-left .cd-full-width p,
  .cd-hero-slider .move-left .cd-full-width .cd-btn {
    opacity: 0;
    -webkit-transform: translateX(-100px);
    -moz-transform: translateX(-100px);
    -ms-transform: translateX(-100px);
    -o-transform: translateX(-100px);
    transform: translateX(-100px);
  }
  .cd-hero-slider .selected .cd-full-width h2,
  .cd-hero-slider .selected .cd-full-width p,
  .cd-hero-slider .selected .cd-full-width .cd-btn {
    /* SLIDER der aktuell sichtbar ist */
    opacity: 1;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
  }
  .cd-hero-slider li.is-moving .cd-full-width h2,
  .cd-hero-slider li.is-moving .cd-full-width p,
  .cd-hero-slider li.is-moving .cd-full-width .cd-btn {
	/* SLIDER der sich nach aussen bewegt und auf das Ende der TRANSITION des Elternelementes <li> wartet bevor die opacity = 0 und der Slider = 100px/-100px ist */  
    -webkit-transition: opacity 0s 0.5s, -webkit-transform 0s 0.5s;
    -moz-transition: opacity 0s 0.5s, -moz-transform 0s 0.5s;
    transition: opacity 0s 0.5s, transform 0s 0.5s;
  }
  .cd-hero-slider li.selected h2 {
    -webkit-transition: opacity 0.4s 0.2s, -webkit-transform 0.5s 0.2s;
    -moz-transition: opacity 0.4s 0.2s, -moz-transform 0.5s 0.2s;
    transition: opacity 0.4s 0.2s, transform 0.5s 0.2s;
  }
  .cd-hero-slider li.selected p {
    -webkit-transition: opacity 0.4s 0.3s, -webkit-transform 0.5s 0.3s;
    -moz-transition: opacity 0.4s 0.3s, -moz-transform 0.5s 0.3s;
    transition: opacity 0.4s 0.3s, transform 0.5s 0.3s;
  }
  .cd-hero-slider li.selected .cd-btn {
    -webkit-transition: opacity 0.4s 0.4s, -webkit-transform 0.5s 0.4s, background-color 0.2s 0s;
    -moz-transition: opacity 0.4s 0.4s, -moz-transform 0.5s 0.4s, background-color 0.2s 0s;
    transition: opacity 0.4s 0.4s, transform 0.5s 0.4s, background-color 0.2s 0s;
  }
}

/* 
------------------------------------------------------------------ 
SLIDER - NAVIGATION
------------------------------------------------------------------ 
*/  

/* Einstellungen für Bildschirmgröße SMALL */   
.cd-slider-nav {
  position: absolute;
  width: 100%;
  bottom: 0;													/* Abstand zum unteren Rand z.B. 100px */
  z-index: 2;
  text-align: center;											/* Positionierung der SLIDERnavigation */	
  height: 55px;									/* + 768 */ 	/* Höhe der SLIDERnavigation */
  background-color: rgba(0, 1, 1, 0);							/* Hintergrundfarbe der SLIDERnavigation z.B. rgba(0, 1, 1, 0.5) */
}
.cd-slider-nav nav, .cd-slider-nav ul, .cd-slider-nav li, .cd-slider-nav a {
  height: 100%;									/* + 768 */		/* Hintergrundhöhe bei HOVER bezogen auf Height */
}
.cd-slider-nav nav {
  display: inline-block;										/* Anordnung der SLIDERnavigation z.B. inline-block */
  position: relative;
}
.cd-slider-nav .cd-marker {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 20px;									/* + 768 */		/* Breite der einzelnen SLIDERnavigations-Punkte z.B. 60px bei symbolen*/	
  height: 100%;													/* Höhe der einzelnen SLIDERnavigations-Punkte */
  color: #0316a5;												/* Farbe z.B. #d44457 */
  background-color: transparent;								/* Hintergrundfarbe des AKTIVEN SLIDERnavigations-Punktes z.B. #ffffff */
  box-shadow: inset 0 0 0 #000;									/* Formatierung der HOVERBOX bei jedem SLIDERnavigations-Punkt z.B. inset 0 2px 0 currentColor */
  -webkit-transition: -webkit-transform 0.2s, box-shadow 0.2s;
  -moz-transition: -moz-transform 0.2s, box-shadow 0.2s;
  transition: transform 0.2s, box-shadow 0.2s;
}
.cd-slider-nav .cd-marker.item-2 {
  -webkit-transform: translateX(100%);
  -moz-transform: translateX(100%);
  -ms-transform: translateX(100%);
  -o-transform: translateX(100%);
  transform: translateX(100%);
}
.cd-slider-nav .cd-marker.item-3 {
  -webkit-transform: translateX(200%);
  -moz-transform: translateX(200%);
  -ms-transform: translateX(200%);
  -o-transform: translateX(200%);
  transform: translateX(200%);
}
.cd-slider-nav .cd-marker.item-4 {
  -webkit-transform: translateX(300%);
  -moz-transform: translateX(300%);
  -ms-transform: translateX(300%);
  -o-transform: translateX(300%);
  transform: translateX(300%);
}
.cd-slider-nav .cd-marker.item-5 {
  -webkit-transform: translateX(400%);
  -moz-transform: translateX(400%);
  -ms-transform: translateX(400%);
  -o-transform: translateX(400%);
  transform: translateX(400%);
}
.cd-slider-nav .cd-marker.item-6 {								/* >>> für WEITERE SLIDER diese Bereiche erweitern +100% */
  -webkit-transform: translateX(500%);
  -moz-transform: translateX(500%);
  -ms-transform: translateX(500%);
  -o-transform: translateX(500%);
  transform: translateX(500%);
}


.cd-slider-nav ul::after {
  clear: both;
  content: "";
  display: table;
}
.cd-slider-nav li {
  display: inline-block;
  width: 60px;
  float: left;
}
.cd-slider-nav li.selected a {
  color: #fff;													/* Hintergundfarbe bei MOUSEOVER z.B. #2c343b ???*/
}
.no-touch .cd-slider-nav li.selected a:hover {
  background-color: transparent;
}
.cd-slider-nav a {
  display: block;
  position: relative;				
  padding-top: 35px;							/* + 768 */
  font-size: 1rem;								/* + 768 */
  font-weight: 700;
  color: #a8b4be;
  -webkit-transition: background-color 0.2s;
  -moz-transition: background-color 0.2s;
  transition: background-color 0.2s;
}
.cd-slider-nav a::before {
  content: '';
  position: absolute;
  width: 24px;
  height: 24px;
  top: 8px;										/* + 768 */
  left: 50%;
  right: auto;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);											/* >>> für WEITERE SLIDER die *.svg ändern */
  background: url(../navigation/icon-slider6-balken.svg) no-repeat 0 0;	/* PFAD zu den SLIDERnavigations-Punkten z.B.: background: url(../navigation/icon-slider5-symbol.svg) no-repeat 0 0; */
}
.no-touch .cd-slider-nav a:hover {
  background-color: rgba(0, 1, 1, 0.5);
}
.cd-slider-nav li:first-of-type a::before {
  background-position: 0 0;
}
.cd-slider-nav li.selected:first-of-type a::before {
  background-position: 0 -24px;
}
.cd-slider-nav li:nth-of-type(2) a::before {
  background-position: -24px 0;
}
.cd-slider-nav li.selected:nth-of-type(2) a::before {
  background-position: -24px -24px;
}
.cd-slider-nav li:nth-of-type(3) a::before {
  background-position: -48px 0;
}
.cd-slider-nav li.selected:nth-of-type(3) a::before {
  background-position: -48px -24px;
}
.cd-slider-nav li:nth-of-type(4) a::before {
  background-position: -72px 0;
}
.cd-slider-nav li.selected:nth-of-type(4) a::before {
  background-position: -72px -24px;
}
.cd-slider-nav li:nth-of-type(5) a::before {
  background-position: -96px 0;
}
.cd-slider-nav li.selected:nth-of-type(5) a::before {
  background-position: -96px -24px;
}
.cd-slider-nav li:nth-of-type(6) a::before {				/* >>> für WEITERE SLIDER diese Bereiche erweitern -120px */
  background-position: -120px 0;
}
.cd-slider-nav li.selected:nth-of-type(6) a::before {		/* >>> für WEITERE SLIDER diese Bereiche erweitern -120px -24px */
  background-position: -120px -24px;
}


/* Einstellungen für Bildschirmgröße > 768px */
@media only screen and (min-width: 768px) {
  .cd-slider-nav {
    height: 80px;											/* Höhe der einzelnen SLIDERnavigations-Punkte z.B. 80px bei symbolen+Text */
  }
  .cd-slider-nav .cd-marker,
  .cd-slider-nav li {
    width: 45px;											/* Breite der einzelnen SLIDERnavigations-Punkte z.B. 95px bei symbolen */
  }
  .cd-slider-nav a {
    padding-top: 48px;
    font-size: 1.1rem;
    text-transform: uppercase;
  }
  .cd-slider-nav a::before {
    top: 18px;
  }
}

/* -------------------------------- 

Main content

-------------------------------- */

/* Einstellungen für Bildschirmgröße SMALL */
.cd-main-content {
  width: 90%;												/* Breite des Textbereiches */
  max-width: 768px;
  margin: 0 auto;
  padding: 2em 0;
}
.cd-main-content p {
  font-size: 1.4rem;
  line-height: 1.8;
  color: #999999;
  margin: 2em 0;
}
/* Einstellungen für Bildschirmgröße > 1170px */
@media only screen and (min-width: 1170px) {
  .cd-main-content {
    max-width: 70%;
    padding: 3em 0;
  }
  .cd-main-content p {
	font-size: 1.6rem;
    line-height: 1.8;
    color: #000000;
    margin: 2em 0;
  }
  .import {
  font-size: 1.6rem;							/* proportionale Schriftgröße */
  font-family: "Open Sans", sans-serif; 		/* Textschrift */
  color: #ffffff;								/* Textfarbe */
  background-color: #999999;					/* Hintergrundfarbe */
  }
}

/* -------------------------------- 

Javascript disabled

-------------------------------- */
.no-js .cd-hero-slider li {
  display: none;
}
.no-js .cd-hero-slider li.selected {
  display: block;
}

.no-js .cd-slider-nav {
  display: none;
}

/* -------------------------------- 

HBS

-------------------------------- */