/* Version: 07.03.2016 */
@font-face {
	font-family: "Roboto Condensed";
	src: local('Roboto Condensed'),     
	url('https://fonts.pwrk.dev/ofl/robotocondensed/RobotoCondensed[wght].woff2') format('woff2');
	font-weight: 100, 200, 300, 400, 500, 600, 700, 800, 900;
	font-style: normal;
}

@font-face {
	font-family: "Roboto Condensed";
	src: local('Roboto Condensed'),     
	url('https://fonts.pwrk.dev/ofl/robotocondensed/RobotoCondensed-Italic[wght].woff2') format('woff2');
	font-weight: 100, 200, 300, 400, 500, 600, 700, 800, 900;
	font-style: italic;
}
* {
    box-sizing: border-box;
}

body {
    font-family: 'Roboto Condensed', sans-serif;
font-size: 16px;
line-height: 24px;
color: #555; 
    text-decoration: none;
    font-weight: normal;
    word-spacing: normal;
    background-color: #f1f1f1;
}

p {
    margin: 0 0 20px 0;
}

h1 {
font-size: 2rem;
line-height: 42px;
color: #3569a5;
font-weight: 100;
font-style: italic;
}

h2 {
    margin: 0px;
    line-height: 1.5;
    font-size: 1.2rem;
    color: #3569a5;
font-weight: 100;
font-style: italic;
}
.gruenhr{background-color:#3569a5;
height:5px;
width:90%;
margin:0 auto;}

h3 {
    margin: 0px;
    line-height: 1.5;
    font-size: 1rem;
   color: #3569a5;
font-weight: 100;

}

.rahmen {
    padding: 0px;
    width: 720px;
    margin-top: 20px;
    margin-right: auto;
    margin-bottom: 20px;
    margin-left: auto;
    background-color: #FFF;
    border: 1px solid #A7A9A4;
    box-shadow: -0.5px 3px 15px #999;
    position: relative;
}

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

.logo {
  margin: 20px 40%;
}

.content {
    padding: 20px 5%;
}

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

.header{width: 90%;
margin: 0 5%;
}

.content-grey {
    padding: 20px 5%;
    background: #edecec;
}

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

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

.logo_footer{
	position: absolute;
	right: 3%;
	bottom: 3%;
}

.footer {
    background: #666666;
    padding: 20px 5%;
    color: #fff;
}

.footer a:link,
.footer a:visited {
    color: #fff;
    text-decoration: none;
}

.footer a:hover {
    text-decoration: underline;
}

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

img {
    max-width: 100%;
    height: auto;
    width: auto9;
    border: 0;
    vertical-align: middle;
}
a:link{
    text-decoration: none;
    color: #3569a5;
}

a:visited {
    text-decoration: underline;
    color: #3569a5;
}

a:hover {
    text-decoration: none;
    color: #3569a5;
}

a:active {
    text-decoration: underline;
    color: #3569a5;
}

ul {
    margin-left: 5px;
    padding-left: 9px;
    margin-top: 0px;
    margin-bottom: 24px;
    list-style-type: disc;
}

li {
    margin: auto;
    padding: 0;
}

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

.hide {
    display: none;
}

.refnr {}

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

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

p:empty {
    height: 18px;
}

.table {
    display: table;
    width: 100%;
    border-collapse: collapse;
    /* table-layout: fixed; */
}

.cell {
    display: table-cell;
}

.row {
    display: table-row;
}

.flex {
    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: stretch;
    align-items: stretch;
	  flex-wrap: wrap;
}

.left,
.right {
  width: 47%;
}

.button_box {
    text-align: center;
}

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

.button a {
    background: #123487;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    cursor: pointer;
    display: inline-block;
    position: relative;
    margin: 0 auto;
    padding: 10px 40px;
}

.button a:hover {
    background: #2d5aae;
}

.slider-wrap {
border-top: 5px solid #3569a5;
    max-width: 720px;

    max-height: 450px;
    width: auto;
    height: auto;
    position: relative;
    padding-top: 28.7%;
    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 30s linear infinite;
    animation: image 30s 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;
    }
    3% {
      opacity: 1;
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out;
    }
    27% {
      opacity: 1;
    }
    30% {
      opacity: 0;
    }
    100% {
      opacity: 0;
    }
}

@-webkit-keyframes image {
    0% {
        opacity: 0;
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    3% {
        opacity: 1;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    27% {
        opacity: 1;
    }
    30% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
  
.slideshow li {
    margin:0;
    padding:0;
    list-style: none;
    -webkit-animation-delay: 30s;
    animation-delay: 30s;
}
.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;
}
.slideshow li:nth-child(4) span {
    -webkit-animation-delay: 18s;
    animation-delay: 18s;
}
.slideshow li:nth-child(5) span {
    -webkit-animation-delay: 24s;
    animation-delay: 24s;
}
ul.slideshow {
    margin: 0;
    padding-left: 0;
}

/* BEGINN Slider mit 3 Bildern mit transform Animation */

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

}
.slideshow-3-bilder li span {
  width: 100%;
  height:100%;
  position: absolute;
  top: 0;
  left: 0;
  color: transparent;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: none;
  opacity: 0;
  z-index: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-animation: image-3-bilder 24s ease-out infinite;
  animation: image-3-bilder 24s ease-out infinite;
}

@keyframes image-3-bilder {
  0% {
    opacity: 1;
    transform: translateX(100%);
  }
  
  1% {
    transform: translateX(0);
  }
  
  33.33333% {
    transform: translateX(0);
	
  }
  
  34.33333% {
    transform: translateX(-100%);

  }
	100%{
		transform: translateX(-100%);
	 opacity: 1;
	}

}

@-webkit-keyframes image-3-bilder {
0% {
    opacity: 1;
    transform: translateX(100%);
  }
  
  1% {
    transform: translateX(0);
  }
  
  33.33333% {
    transform: translateX(0);
	
  }
  
  34.33333% {
    transform: translateX(-100%);

  }
	100%{
		transform: translateX(-100%);
	 opacity: 1;
	}

}

.slideshow-3-bilder li {
    margin:0;
    padding:0;
  list-style: none;
}

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

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

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

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


.slider-wrap li::before{
                display:none;
}

.slider-wrap ul {
                margin:0;
                padding-left:0;
                list-style-type: none;
                list-style:none;
			    border-bottom:none;
	            border-color: #fff;
                border-width: 0;
				padding-bottom: 0.3125rem;
}

/* ENDE Slider mit 3 Bildern mit transform Animation */


/* BEGINN Slider mit 4 Bildern mit transform Animation */

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

.slideshow-4-bilder li span {
  width: 100%;
  height:100%;
  position: absolute;
  top: 0;
  left: 0;
  color: transparent;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: none;
  opacity: 0;
  z-index: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-animation: image-4-bilder 24s ease-out infinite;
  animation: image-4-bilder 24s ease-out infinite;
}

@keyframes image-4-bilder {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }
  
  1% {
opacity: 1;
    transform: translateX(0);
  }
  
  25% {
    transform: translateX(0);
	
  }
  
  26% {
    transform: translateX(-100%);
opacity: 1;
  }
	100%{
		transform: translateX(-100%);
	opacity: 0;
	}
}

@-webkit-keyframes image-4-bilder {
  0% {
    opacity: 1;
    transform: translateX(100%);
  }
  
  1% {
    transform: translateX(0);
  }
  
  24% {
    transform: translateX(0);
	
  }
  
  25% {
    transform: translateX(-100%);

  }
	100%{
		transform: translateX(-100%);
	opacity: 1;
	}
}

.slideshow-4-bilder li {
    margin:0;
    padding:0;
  list-style: none;
}

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

.slider-wrap li::before{
                display:none;
}

.slider-wrap ul {
                margin:0;
                padding-left:0;
                list-style-type: none;
                list-style:none;
		border-bottom:none;
	        border-color: #fff;
                border-width: 0;
		padding-bottom: 0.3125rem;
}

/* ENDE Slider mit 4 Bildern mit transform Animation */

.apply {}