/* Version: 05.03.2018 */

@import url(../../css2_c84865d587252b0d.css);

 /* ------------------- NICHT VERÄNDERN ------------------------- */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
	 line-height: 1.15; /* 1 */
	-webkit-text-size-adjust: 100%; /* 2 */
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

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

body {
	font-family: 'Lato', sans-serif;
	/* ------------------- NICHT VERÄNDERN ------------------------- */
	font-size: 100%;
	/* ------------------------------------------------------------ */
	color: #000;
	text-decoration: none;
	font-weight: normal;
	word-spacing: normal;
	line-height: 1.3;
	background-color: #FFF;
	/*	Hintergrundbilder werden in Chrome mit ausgedruckt	*/
	-webkit-print-color-adjust:exact;
}

p {
	margin: 0 0 0.2rem 0;
}

h1 {
	line-height: 1.8rem;
	font-size: 1.5rem;
	font-weight: 700;
	padding: 0;
	margin: 0;
    text-transform: uppercase;
}

h1 span {
	line-height: 1.5;
	font-size: 1.45rem;
	font-weight: 300;
	padding: 0;
	margin: 0;
    text-transform: uppercase;
}

h2 {
	margin: 1rem 0;
	line-height: 1.8rem;
	font-size: 1.6rem;
	font-weight: 700;
    color: #008dd1;
}

h2 span {
	font-size: 1.3rem;
	font-weight: 400;
    color: #a2c63b;
}

h3 {
	line-height: 1.1rem;
	font-size: 0.95rem;
	font-weight: 700;
	padding: 0 0 0.5rem;;
	margin: 0;
}

.farbe_dunkelblau {
    color: #003863;
}
.farbe_blau {
    color: #008dd1;
}
.farbe_hellblau {
    color: #20bade;
}
.farbe_guen {
    color: #a2c63b;
}
.farbe_rot {
    color: #d94368;
}
.farbe_orange {
    color: #f18926;
}

.light {
    color: #58a8c3;
}

.grey {
    color: #c6c7c8;
}

.p-b {
    padding-bottom: 0.5rem;
}

.frame-outer {
	position: relative;
	padding: 0;
	width: 780px;
	margin: 1.3rem auto;
	background-color: #fff;
	font-size: 0.85rem;
}

.frame-outer::after {
	content: "";
	display: block;
	clear: both;
}

.content {
	padding: 1rem;
    background-color: #E4E4E4;
}

.content::after {
	content: "";
	display: block;
	clear: both;
}

.header{
	position: relative;
}

.logo-bg {
    width: 100%;
    padding: 1rem;
}

.logo {
	width: 10rem;
}

hr.grey-1 {
    border: solid 1px #f1f1f1;
    margin: 1.5rem 0
}

#title-block {
	position: absolute;
	bottom: 3%;
	right: 1rem;
	padding: 0.5rem 3%;
	/* -- FALLBACK FÜR BROWSER DIE RGBA-WERTE NICHT UNTERSTÜTZEN -- */
	background: rgb(0, 0, 0);
	/* -------------------------------------------------------------- */
	background: rgba(0, 0, 0, 0.7);
	color: #fff;
    width: 96%;
}

.box-left {
	float: left;
	width: 57%;
}

.box-right {
	float: right;
	width: 40.5%;
}

.right-content {
    background-color: #FFF;
    border-top: solid 3px #008D7A;
    padding: 1.0rem;
    margin-bottom: 0.8rem;
}

.left-content {
    background-color: #FFF;
    border-top: solid 3px #003863#003863;
    padding: 1.0rem;
    margin-bottom: 0.8rem;
}

.no-mag {
    margin-bottom: 0;
    }

.box-mitte {
	width: 100%;
}
.mitte-content {
    background-color: #FFF;
    border-top: solid 3px #003863;
    padding: 1.0rem;
    margin-bottom: 0.8rem;
}

#footer {
    padding: 1.5rem 1rem;
    background-color: #003863;
    color: #FFF;
    text-align: right;
    font-size: 0.75rem;
    border-top: solid 2px #FFF;
}

#footer::after {
	content: "";
	display: block;
	clear: both;
}

img {
	max-width: 100%;
	height: auto;
	width: auto9;
	border: 0;
	vertical-align: middle;
}


#footer a:link {
	color: #FFF;
	text-decoration: none;
}

#footer a:visited {
	text-decoration: none;
	color: #FFF;
}

#footer a:hover {
	text-decoration: underline;
	color: #fff;
}

#footer a:active {
	text-decoration: none;
	color: #fff;
}

a:link {
	color: #008dd1;
	text-decoration: none;
}

a:visited {
	text-decoration: none;
	color: #008dd1;
}

a:hover {
	text-decoration: underline;
	color: #20bade;
}

a:active {
	text-decoration: none;
	color: #20bade;
}

ul {
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 1rem;
	margin-left: 1.5rem;
	padding-left: 0.5rem;
	list-style-type: disc;
}

li {
	/*-- FALLS ETWAS ANDERES ALS DIE STANDARD AUFZÄHLUNGSZEICHEN GEWÜNSCHT --*/
	/* position: relative; */
	/* --------------------------------------------------------------------- */
	margin: auto;
	padding: 0 0 0.3rem;
}

/* -- FALLS ETWAS ANDERES ALS DIE STANDARD AUFZÄHLUNGSZEICHEN GEWÜNSCHT --  */

/* 
li::before {
	position: absolute;
	top: 0;
	left: -0.8rem;
	content: "■";
	font-size: 0.8rem;
	color: red;
} 
*/

/*
_______________________

KAPITÄLCHEN, BULLETPOINT
_______________________

<span class="capital" style="float: left; width: 43px; height: 20px; line-height: 47px; background: transparent; font-size: 38px; margin-top: -5px; margin-right: -32px; margin-bottom: 5px; background-color: transparent;">I</span>

ul li {
background: url(bp.jpg) no-repeat 2px 5px; padding-left:8px;
}
*/

.flex_oben {
	display: flex;
	display: -ms-flexbox;
	display: -webkit-flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	margin: 0.8rem 0;
}
.flex_oben img {
	width:20%;
	padding-bottom: 0.7rem;
}


.box1{
	width: 20%;
	padding: 1rem 1%;
	font-size: 90%;
	text-align: center;
	
}
.box2{
	width: 20%;
	padding: 1rem 1%;
	font-size: 90%;
	text-align: center;
	
}
.box3{
	width: 20%;
	padding: 1rem 1%;
	font-size: 90%;
	text-align: center;
	
}
.box4{
	width: 20%;
	padding: 1rem 1%;
	font-size: 90%;
	text-align: center;
	
}
.box5{
	width: 20%;
	padding: 1rem 1%;
	font-size: 90%;
	text-align: center;
	
}
.left {
	width: 100%;
	padding: 1rem 3%;
	margin-right: 0.4rem;
}

.right {
	width: 100%;
	padding: 1rem 3%;
	margin-left: 0.4rem;
}

/* -------------- FLEXBOX EIGENSCHAFTEN -------------------- */
/* -----GENERELL: FLEXBOX STATT FLOAT NEHMEN, DA SIE BESSERE OPTIONEN ZUR GESTALTUNG BIETEN, 
JEDOCH DARAUF ACHTEN, DASS FLEXBOXEN NICHT VOM INTERNET EXPLORER 9 UND ABWÄRTS UNTERSTÜTZT WERDEN. => IN DEM FALL FLOATEN --------------------- */
/* 
.flex {
	display: table;
	display: flex;
	display: -ms-flexbox;
	display: -webkit-flex;
	-webkit-flex-direction: row;
	flex-direction: row;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-align-items: flex-start;
	align-items: flex-start;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	margin: 1rem 0;
} 
*/
/* -- FLEXBOX EIGENSCHAFTEN FÜR GLEICHE HOHE BOXEN MIT "PLATZ ZWISCHEN DEN BOXEN" (siehe "justify-content: space-between;") -- */

p:empty {
	height: 0.625rem;
}

.clear {
	clear: both;
	font-size: 0;
	line-height: 0;
}

.hide {
	display: none;
}

.refnr {}

.justifier {
	text-align: justify;
	text-align-last: justify;
}

.justifier:after {
	content: "";
	display: inline-block;
	width: 100%;
}

.table {
	display: table;
	width: 100%;
	/* -- LÄSST GRENZEN VERSCHWINDEN, SODASS KEINe BEGRENZUNG ERSCHEINT -- */
	/* border-collapse: collapse; */
	/* --------------------------------------------------------------------*/
	table-layout: fixed;
	/* ----- ERSTELLT EINEN BEGRENZUNGSRAHMEN JEDOCH AN ALLEN SEITEN ----- */
	/* border-spacing: 3rem; */
	/* --------------------------------------------------------------------*/
}

.row {
	display: table-row;
}

#cell-left,
#cell-right {
	display: table-cell;
	vertical-align: bottom;
	padding: 1rem 3%;
}

#cell-left {
	border-right: 15px solid #fff;
}

#cell-right {
	border-left: 15px solid #fff;
}

.bg-darkblue {
	background: rgb(78, 147, 250);
}

.bg-lightblue {
	background: rgb(127, 174, 245);
}

.button_box {
	text-align: center;
}

.button_box::after {
	clear: both;
	content: "";
	display: block;
}

/*_______________________

BUTTON MIT ANIMATION
_______________________
*/

.button a {
	display: inline-block;
	background: #d94368;
	padding: 10px 30px;
	margin: 0 auto;
	cursor: pointer;
	-webkit-border-radius: 0;
	border-radius: 0;
	transition: all 140ms ease 0s;
	-moz-transition: all 140ms ease 0s;
	-webkit-transition: all 140ms ease 0s;
	color: #fff;
    font-weight: bold;
    font-size: 1.3rem;
}
.button a:hover {
	background-position: 15px center;
	background-color: #f18926;
	text-decoration: none;
	color: #FFF;
}
/* ------------------ Slider 3 Bilder ------------------------ */


.slider-wrap {
  max-width: 100%;
  width: auto;
  height: auto;
  position: relative;
  padding-top: 0;
  margin: 0;
  overflow: hidden;
}

.slideshow {
  position: absolute;
  width: 100%;
  top: 0px;
  left: 0px;
  z-index: 0;
}
.slideshow li span {
  width: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  color: transparent;
  opacity: 0;
  z-index: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-animation: image 18s linear infinite;
  animation: image 18s linear infinite;
}

/*

Keyframe-Berechnung:

1. 100 / Anzahl der Bilder
2. Ergebnis ist das Intervall eines einzelnen Keyframes
(Im Beispiel unten ist es die 51% {opacity: 0;})
3. Also passiert eine einzelne Animation zwischen 0% und 51%.
(0% - 8% (Differenz 8%) wird das Bild eingeblendet. Von 43% - 51% (Differenz 8%) sollte dann das Bild ausgeblendet werden)
4. Falls die Geschwindigkeit erhöht werden soll, kann die Differenz verringert werden, wobei dies am Anfang sowie am Ende gleichbleibend sein muss, damit die Animation symmetrisch abläuft.

*/

@keyframes image {
  0% {
    opacity: 0;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  5% {
    opacity: 1;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  38.333% {
    opacity: 1;
  }
  43.333% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes image {
  0% {
    opacity: 0;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  5% {
    opacity: 1;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  38.333% {
    opacity: 1;
  }
  43.333% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

.slideshow li {
  margin:0;
  padding:0;
  list-style: none;
  -webkit-animation-delay: 18s;
  animation-delay: 18s;
}
.slideshow li:nth-child(1) span {}
.slideshow li:nth-child(2) span {
  -webkit-animation-delay: 6s;
  animation-delay: 6s;
}
.slideshow li:nth-child(3) span {
  -webkit-animation-delay: 12s;
  animation-delay: 12s;
}
ul.slideshow {
  margin:0;
  padding-left: 0;
}
.slideshow li::before{
	content:"";
	position: absolute;

}


/* ------------------ Slider 4 Bilder ------------------------ */


.slideshow-4-bilder {
  position: absolute;
  width: 100%;
  top: 0px;
  left: 0px;
  z-index: 0;
}

.slideshow-4-bilder li span {
  width: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  color: transparent;
  opacity: 0;
  z-index: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-animation: image 24s linear infinite;
  animation: image-4-bilder 24s linear infinite;
}

@keyframes image-4-bilder {
  0% {
    opacity: 0;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  
  1% {
opacity: 1;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  
  25% {
   opacity: 1;
	
  }
  
  26% {
opacity: 0;
  }
	100%{
	opacity: 0;
	}
}

@-webkit-keyframes image-4-bilder {
  0% {
    opacity: 0;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  
  1% {
opacity: 1;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  
  25% {
   opacity: 1;
	
  }
  
  26% {
opacity: 0;
  }
	100%{
	opacity: 0;
	}
}

.slideshow-4-bilder li {
    margin:0;
    padding:0;
  list-style: none;
	  -webkit-animation-delay: 24s;
  animation-delay: 24s;
}

.slideshow-4-bilder li:nth-child(1) span {}

.slideshow-4-bilder li:nth-child(2) span {
  -webkit-animation-delay: 6s;
  animation-delay: 6s;
}

.slideshow-4-bilder li:nth-child(3) span {
  -webkit-animation-delay: 12s;
  animation-delay: 12s;
}

.slideshow-4-bilder li:nth-child(4) span {
  -webkit-animation-delay: 18s;
  animation-delay: 18s;
}

ul.slideshow-4-bilder {
    margin:0;
}




/*
_______________________

MARKIERTER TEXT
_______________________

::selection {
background: #ffb7b7;
}
::-moz-selection {
background: #ffb7b7;
}

*/
.apply {}