/* Version:  Februar 2023 */

@font-face { 
	font-family: "Roboto";
	src: url('https://fonts.pwrk.dev/ofl/roboto/Roboto[wdth,wght].woff2') format('woff2') ;
	font-weight: 300, 400, 500, 600, 700, 800, 900;
	font-style: normal;
}

/* --- Italic --- */
@font-face { 
	font-family: "Roboto";
	src: url('https://fonts.pwrk.dev/ofl/roboto/Roboto-Italic[wdth,wght].woff2') format('woff2') ;
	font-weight: 300, 400, 500, 600, 700, 800, 900;
	font-style: italic;
}


/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
 html {

  -webkit-text-size-adjust: 100%; /* 2 */
}

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

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

.frame-outer {
  position: relative;
  width: 780px; /*	maximale Breite: 782px	*/
  margin: 1.3rem auto;
  background-color: #fff;
  border: 0.02rem solid #a7a9a4;
  box-shadow: -0.1rem 0.1rem 1rem #999;
  font-size: 0.8rem; /*	minimale Schriftgröße 0.6rem	*/
	border-top: 0.5rem solid #222222;
}

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



/*	für Titel	*/
h1 {
  margin: 0;
  font-size: 2rem;
  font-weight: 700;
}

h1 span {
	font-size: 1rem;
}

/*	für Untertitel (Vollzeit, Teilzeit/Standort)	*/
h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
	
}

/*	für Überschiften	*/
h3 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 300;
	color: #004389;
}

/*	für kleine/unter Überschiften	*/
h4 {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 400;
}

#header {
	position: relative;
}

#logo {
	background-color: #fff;
   
	padding: 1rem 25%;
	position: relative;
	text-align: center;
	z-index: 5;
}


#logo img {
	width: 12rem;
}	
	


#logo_box {
	position: absolute;
	top: 4rem;
	left: 25%;
	right: 25%;

	text-align: center;
	z-index: 10;

}

#logo_box img {
	width: 20rem;
}

.brand-box {
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  position: absolute;
  left: 50%;
  top: 4.5rem;
	z-index: 20;
}




#slogan_top {
	position: absolute;
	top: 1rem;
	left: 4%;
	background-color: #fff;
	padding: 0.5rem 3%;
	z-index: 1;
}

#slogan_bottom {
	position: absolute;
	bottom: 1rem;
	right: 4%;
	background-color: #fff;
	padding: 0.5rem 3%;
	z-index: 2;
}

.content {
  position: relative;
  padding: 1.5rem 4%;
	background-image: url(//anzeigen.jobsintown.de/job/files/1313717/bg.jpg);
	background-repeat: no-repeat;
	background-size: cover;
}

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

/*	für Stellentitel */
#title { 
  position: relative;
  padding: 1.5rem 4%;

	color: #fff;
}

#footer {
  position: relative;
  padding: 1.0rem 4%;
	background-color: #004389;
	color: #fff;
}

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

.bg_bild {
	background: no-repeat center ;
	background-size: cover;	
}

.flex {
  display: flex;
  display: -ms-flexbox;
  display: -webkit-flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  align-items: flex-start;
  flex-direction: row;
  flex-wrap: wrap;

}

.left {
  width: 48%;
 
}

.right {
  width: 48%;

}

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

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

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

/*	Links - bitte für unterschiedliche Hintergründe farblich anpassen!	*/
a:link, a:visited, a:active  {
    text-decoration: none;
	color: #004389;
}

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

#box {
  height: -webkit-calc(100% - 30px);
  height: -moz-calc(100% - 30px);
  height: calc(100% - 30px);
  border: none;
  background-color: #fff;
  overflow: hidden;
  margin-top: 15px;
  margin-bottom: 15px;

  -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  -ms-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  border-radius: 0.3125rem;
	padding: 0.75rem 3%;
}

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

#footer a:hover {
  text-decoration: none;
  color: #f000ff;
}
/*	Listen	*/
ul {
  margin: 0.5rem 0 0 0;
  list-style-type: none;
}

li {
  position: relative; 
  margin: auto;
	padding: 0 0 0 1rem;

}

li:last-child{
               padding-bottom: 0;
}

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

/*	Eingrückte Listenpunkte	*/
li ul{ 
  margin: 0 0 0 0;
  padding: 0 0 0 1rem;}



/*	Button	*/
.button_box {
  text-align: center;
}

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

.button a {
  display: inline-block;
  background: #004389;

  padding: 0.6rem 2rem 0.6rem 2rem;
  margin: 1rem auto;
  cursor: pointer;
  -webkit-border-radius: 0.5rem;
  border-radius: 0.5rem;
  border: 0.1rem solid #004389;
  transition: all 140ms ease 0s;
  -moz-transition: all 140ms ease 0s;
  -webkit-transition: all 140ms ease 0s;
  color: #fff;
}
.button a:hover {
  background-color: #fff;
  text-decoration: none;
  color: #004389;
  border: 0.1rem solid #004389;
}

/*	Slider editierbar 	*/

.slider-wrap {
    max-width: 800px;
    width: auto;
    height: auto;
    position: relative;    
    margin: 0;
    overflow: hidden;

}

.slider-wrap img {
	display: block;
}
  
.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 24s linear infinite;
    animation: image 24s 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;
    }
    25% {
      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;
    }
    5% {
        opacity: 1;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    25% {
        opacity: 1;
    }
    30% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
  
.slideshow li {
    margin:0;
    padding:0;
    list-style: none;
}
.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;
}



ul.slideshow {
    margin: 0;
    padding-left: 0;
}

.slideshow li::before {
	display: none;
}










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

.slideshow_5 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;
}
  
@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;
    }
    20% {
      opacity: 1;
    }
    25% {
      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;
    }
    20% {
        opacity: 1;
    }
    25% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
  
.slideshow_5 li {
    margin:0;
    padding:0;
    list-style: none;
}
.slideshow_5 li:nth-child(1) span {}
.slideshow_5 li:nth-child(2) span {
    -webkit-animation-delay: 6s;
    animation-delay: 6s;
}
.slideshow_5 li:nth-child(3) span {
    -webkit-animation-delay: 12s;
    animation-delay: 12s;
}
.slideshow_5 li:nth-child(4) span {
    -webkit-animation-delay: 18s;
    animation-delay: 18s;
}

.slideshow_5 li:nth-child(5) span {
    -webkit-animation-delay: 24s;
    animation-delay: 24s;
}

ul.slideshow_5 {
    margin: 0;
    padding-left: 0;
}

.slideshow_5 li::before {
	display: none;
}





/*	Angaben Bilder Video etc.	*/

iframe {
	display: block;
    width: 100%;
}

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

strong{ font-weight: 700;}

p {
	margin:0;
}

p:empty {
  height: 1rem;
}

.hide_m {  
    }

.hide {
  display: none;
}

.refnr {}

.apply {}