/* ------------------- Google Fonts ------------------------- */

@font-face {
  font-family: "Work Sans";
  src: url('https://fonts.pwrk.dev/ofl/worksans/WorkSans[wght].woff2') format('woff2');
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: "Work Sans";
  src: url('https://fonts.pwrk.dev/ofl/worksans/WorkSans[wght].woff2') format('woff2');
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: "Work Sans";
  src: url('https://fonts.pwrk.dev/ofl/worksans/WorkSans[wght].woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "Work Sans";
  src: url('https://fonts.pwrk.dev/ofl/worksans/WorkSans[wght].woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Work Sans";
  src: url('https://fonts.pwrk.dev/ofl/worksans/WorkSans[wght].woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Work Sans";
  src: url('https://fonts.pwrk.dev/ofl/worksans/WorkSans[wght].woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "Work Sans";
  src: url('https://fonts.pwrk.dev/ofl/worksans/WorkSans[wght].woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Work Sans";
  src: url('https://fonts.pwrk.dev/ofl/worksans/WorkSans[wght].woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: "Work Sans";
  src: url('https://fonts.pwrk.dev/ofl/worksans/WorkSans[wght].woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: "Work Sans";
  src: url('https://fonts.pwrk.dev/ofl/worksans/WorkSans-Italic[wght].woff2') format('woff2');
  font-weight: 300;
  font-style: italic;
}

@font-face {
  font-family: "Work Sans";
  src: url('https://fonts.pwrk.dev/ofl/worksans/WorkSans-Italic[wght].woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: "Work Sans";
  src: url('https://fonts.pwrk.dev/ofl/worksans/WorkSans-Italic[wght].woff2') format('woff2');
  font-weight: 500;
  font-style: italic;
}

@font-face {
  font-family: "Work Sans";
  src: url('https://fonts.pwrk.dev/ofl/worksans/WorkSans-Italic[wght].woff2') format('woff2');
  font-weight: 600;
  font-style: italic;
}

@font-face {
  font-family: "Work Sans";
  src: url('https://fonts.pwrk.dev/ofl/worksans/WorkSans-Italic[wght].woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
}

@font-face {
  font-family: "Work Sans";
  src: url('https://fonts.pwrk.dev/ofl/worksans/WorkSans-Italic[wght].woff2') format('woff2');
  font-weight: 800;
  font-style: italic;
}

@font-face {
  font-family: "Work Sans";
  src: url('https://fonts.pwrk.dev/ofl/worksans/WorkSans-Italic[wght].woff2') format('woff2');
  font-weight: 900;
  font-style: italic;
}

/* ------------------- Allgemein ------------------------- */

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

html {
	line-height: 1.2;
	-webkit-text-size-adjust: 100%;
}

body {
	font-family: 'Work Sans', sans-serif;
	font-size: 100%;
	font-weight: 300;
	line-height: 1.2;
	word-spacing: normal;
	text-decoration: none;
	color: #323232;
	background-color: #323232;
	-webkit-print-color-adjust: exact;
}

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

p {
  	margin: 0 0 1rem 0;
}

p strong {
	font-weight: 600;
}

h1 {
	font-family: 'Work Sans', sans-serif;
	font-size: 1.8rem;
	font-weight: 700;
	color:#d10019;
}

h2 {
	font-family: 'Work Sans', sans-serif;
	font-size: 1.2rem;
	font-weight: 500;
}

h3 {
	font-family: 'Work Sans', sans-serif;
	font-size: 1rem;
	font-weight: 500;
	background-color:#323232;
	padding: 0.2rem 1.5%;
	max-width:20rem;
	color:#fff;
}

a {
	text-decoration: underline;
  	color: #d10019;
}

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

hr {
	color: #000;
	border-color: #000;
	background-color: #000;
	border: none;
	margin: 1.75rem 0;
	height: 0.1rem;
}

/* ------------------- Struktur ------------------------- */

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

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

.content {
	position: relative;
	padding: 1.5rem 8%;
	border-bottom: solid 1rem #323232;
}

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

.footer{
	position: relative;
	padding: 1.5rem 8%;
	border-top: solid 0.2rem #d10019;
}

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

/* ------------------- Abstände ------------------------- */

.nomag { margin-bottom: 0; }
.mag025 { margin-bottom: 0.25rem; }
.mag05 { margin-bottom: 0.5rem; }
.mag075 { margin-bottom: 0.75rem; }
.mag1 { margin-bottom: 1rem; }
.mag125 { margin-bottom: 1.25rem; }
.mag15 { margin-bottom: 1.5rem; }
.mag175 { margin-bottom: 1.75rem; }
.mag2 { margin-bottom: 2rem; }
.mag25 { margin-bottom: 2.5rem; }

/* ------------------- Inhalte ------------------------- */

.logo {
	width: 20%;
	float: right;
	margin: 1rem 8% 0rem 8%;
}

.button a {
  	display: block;
	margin: 2rem 14.5rem;
	padding: 0.6rem 2.5rem 0.6rem 2.5rem;
	text-align: center;
	text-decoration: none;
  	background: #d10019;
	color: #fff;
	border: 0.1rem solid #d10019;
	cursor: pointer;
  	transition: all 140ms ease 0s;
  	-moz-transition: all 140ms ease 0s;
  	-webkit-transition: all 140ms ease 0s;
}

.button a:hover {
	text-decoration: none;
  	background-position: 15px center;
  	background-color: transparent;
  	color: #d10019;
}

/* ------------------ Listen & Tabellen ------------------------ */

ul {
	/* position: relative; */ /* Bei individuell festgelegten Bullet Points muss diese Zeile auch auskommentiert werden! */
  	margin: 0 auto 1rem 0.5rem;
	padding-left: 0.4rem;
  	list-style-type: disc;
}

li {
  	margin: auto;
  	padding: 0;
}

/*
li::before {
  	position: absolute;
  	left: -0.46rem;
	line-height: 1.6;
  	content: "■";
  	font-size: 0.9rem;
  	color: #b12933;
}
*/

/*Slider*/

.slider-wrap {
    max-width: 800px;

    width: auto;
    height: auto;
    position: relative;
    margin: 0;
    overflow: hidden;

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

.slideshow6 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 36s linear infinite;
    animation: image 36s 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;
    }
    11.6% {
      opacity: 1;
    }
    16.6% {
      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;
    }
    11.6% {
        opacity: 1;
    }
    16.6% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
  
.slideshow6 li {
    margin:0;
    padding:0;
    list-style: none;
    -webkit-animation-delay: 36s;
    animation-delay: 36s;
}
.slideshow6 li:nth-child(1) span {}
.slideshow6 li:nth-child(2) span {
    -webkit-animation-delay: 6s;
    animation-delay: 6s;
}
.slideshow6 li:nth-child(3) span {
    -webkit-animation-delay: 12s;
    animation-delay: 12s;
}
.slideshow6 li:nth-child(4) span {
    -webkit-animation-delay: 18s;
    animation-delay: 18s;
}
.slideshow6 li:nth-child(5) span {
    -webkit-animation-delay: 24s;
    animation-delay: 24s;
}
.slideshow6 li:nth-child(6) span {
    -webkit-animation-delay: 30s;
    animation-delay: 30s;
}
ul.slideshow6 {
    margin: 0;
    padding-left: 0;
}


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


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

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

.slideshow-4-bilder li span {
  width: 100%;
  height:100%;
  position: absolute;
  top: 0px;
  left: 0px;
  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 24s linear infinite;
  animation: image-4-bilder 24s linear infinite;
}

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

@-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-3-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:0px;
                list-style-type: none;
                list-style:none;
		border-bottom:none;
	        border-color: #fff;
                border-width: 0px;
		padding-bottom:5px;
}


/* ------------------- Sonstiges ------------------------- */

.show {
	display: none;
}

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

/* ------------------- Individueller Code ------------------------- */

/* Neue Klassen und IDs am besten, der Einfachheit halber, hier unten eintragen. */

.refnr {}

.apply {}