/* Version: 05.03.2018 */

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

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


 /* ------------------- 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: "Roboto", Arial, Helvetica, sans-serif;
  /* ------------------- NICHT VERÄNDERN ------------------------- */
    font-size: 100%;
   /* ------------------------------------------------------------ */
    text-decoration: none;
    word-spacing: normal;
    background-color: #ffffff;
    /*	Hintergrundbilder werden in Chrome mit ausgedruckt	*/
    -webkit-print-color-adjust:exact;
  }
  
  /*
  BG oben und unten
  
  .frame-outer {
    background: url(bgHellgruen.jpg) top left no-repeat, url(bg_bottom.jpg) bottom left no-repeat;
    background-size: 100%;
  }
  
  */
  
  .frame-outer {
    position: relative;
    padding: 0;
    width: 720px;
    margin: 1.3rem auto;
    background-color: #FFF;
    border: 0.02rem solid #A7A9A4;
    box-shadow: -0.1rem 0.1rem 1rem #999;
    line-height: 1.4;
    color:#444f50;
    font-weight: 400;
    font-size: 0.75rem;
  }
  
  .frame-outer::after {
    content: "";
    display: block;
    clear: both;
  }
  
  #logo{
      z-index: 10;
      position: absolute;
      top:2.5rem;
      right:5%;
      width:30%;
  }
  
  #logo img{
      width:100%;
  }
  
  #headerbild{
      position:relative;
  }
  
  .content {
    padding: 1rem 10%;
  }
  
  .content::after {
    content: "";
    display: block;
    clear: both;
  }
  
  p {
    margin:0;
  }
  
  p:empty {
    height: 1rem;
  }
  
  .farbeBlau{color:#30b7c0 !important;}
  .farbeGrau{color:#444f50 !important;}
  
  .red{
  color:#b82637 !important;}

  .grey{
  color:#585858 !important;}

  .abstand10{
      margin-top:0.625rem;
  }
  
  .abstand15{
      margin-top:0.9rem;
  }
  
  .abstand25{
      margin-top:1.5rem;
  }
  
  .textGross{font-size:0.95rem;}
  
  h1 {
      margin: 0;
      padding: 0;
      line-height: 1.2;
      font-size: 1.5rem;
      font-weight: 400;
      color:#30b7c0;
  }
  
  h2 {
      margin: 0 0 0.3rem 0;
      padding: 0;
      line-height: 1.2;
      font-size: 0.85rem;
      font-weight: 700;
      color:#30b7c0;
  }
  
  /*
  
  H1 Linie
  
  
  h1{
  display:flex;
  width:100%;
  align-items:center;
                 
  }
  h1::after, h1::before
  {
  content: "";
  height:.1rem;
  margin:.2rem;
  flex:1;
  background-color:black;
  }
  
  
  */
  
  /*
  Writing Mode
  
  writing-mode: horizontal-tb;
  writing-mode: vertical-rl;
  writing-mode: vertical-lr;
  
  */
  
  .zweispaltig{
      -webkit-column-count: 2;
      -moz-column-count: 2;
      column-count: 2;
      -webkit-column-gap: 1rem;
      -moz-column-gap: 1rem;
      column-gap: 1rem;
  }
  
  
  .zentriert{
      position: relative;
      top: 50%;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
  }
  
  .word{word-spacing:-0.05rem;}
  .letter{letter-spacing:-0.01rem;}
  .spacing{
      word-spacing:-0.05rem;
      letter-spacing:-0.01rem;
  }
  
  /* -------------- FLEXBOX -------------------- */
  
  .flex {
    display: flex;
    display: -ms-flexbox;
    display: -webkit-flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    margin:1rem 0;
      flex-wrap: wrap;
    flex-direction: row;
  }
  
  .left{
      width:48%;
  }
  
  .right{
      width:48%;
  }
  


.kreis{
position: absolute;
top: 9rem;
right: -2rem;
font-size: 1.2rem;
color: #fff;
background-color: red;
padding: 1.5rem;
border-radius: 108%;
padding-left: 4rem;
padding-right: 4rem;
overflow: hidden;
}

  /* -------------- FLEXBOX -------------------- */
  
  .box-left {
    float: left;
    width: 48%;
  }
  
  .box-right {
    float: right;
    width: 48%;
  }
  
  .clear {
    clear: both;
    font-size: 0;
    line-height: 0;
  }
  
  #footer {
      margin: 1.5rem 0 0 0;
  }
  
  .footerflex {
    display: flex;
    display: -ms-flexbox;
    display: -webkit-flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
      flex-wrap: wrap;
    flex-direction: row;
  }
  
  #bgFooterBlau{
      background:#002b4a;
      width:8%;
  }
  
  #bgFooterred{
      background:#b82637;
      width:8%;
  }
  
  #adresse{
      width:92%;
      padding: 0 10% 3rem 2%;
      font-size: 0.65rem;
  }
  
  #footer::after {
    content: "";
    display: block;
    clear: both;
  }
  
  img {
        max-width: 100%;
      width: 100%;
      height: auto;
      width: auto9; /* ie8 */
      border:none !important;
      display: block;
  }
  
  a:link {
    color:#444f50;
    text-decoration: none;
  }
  
  a:visited {
    text-decoration: none;
    color:#444f50;
  }
  
  a:hover {
    text-decoration: none;
    color:#30b7c0;
  }
  
  a:active {
    text-decoration: none;
    color:#444f50;
  }
  
  a.red_l:link {
    color:#444f50;
    text-decoration: none;
  }
  
  a.red_l:visited {
    text-decoration: none;
    color:#444f50;
  }
  
  a.red_l:hover {
    text-decoration: none;
    color:#b82637;
  }
  
  a.red_l:active {
    text-decoration: none;
    color:#444f50;
  }
  
  ul {
      margin:0;
      padding:0;
      list-style-type: none;
      list-style:none;
  }
  
  li {
      position: relative;
      padding: 0 0 0 1rem;
  }
  
  li::before{
      content:"▪";
      position: absolute;
      top: -0.3rem;
      left: 0.05rem;
      font-size: 1.1rem;
      color:#30b7c0;
  }
  
  ul.ul_red {
      margin:0;
      padding:0;
      list-style-type: none;
      list-style:none;
  }
  ul.ul_grey {
      margin:0;
      padding:0;
      list-style-type: none;
      list-style:none;
  }
  ul.ul_grey li {
      position: relative;
      padding: 0 0 0 1rem;
  }
 ul.ul_grey li::before{
      content:"▪";
      position: absolute;
      top: -0.3rem;
      left: 0.05rem;
      font-size: 1.1rem;
      color: #585858;
  }
  ul.ul_red li {
      position: relative;
      padding: 0 0 0 1rem;
  }
  
  ul.ul_red li::before{
      content:"▪";
      position: absolute;
      top: -0.3rem;
      left: 0.05rem;
      font-size: 1.1rem;
      color:#b82637;
  }
  
  
  
  
  /*
  ul {
      padding: 0;
      margin: 0 0 0 0.9rem;
  }
  
  li {
      padding: 0px;
  }
  */
  
  /*
  
  Zeichen:
  ----------------
  Punkt: •
  Kleiner Punkt mittig: ‧
  Quadrat Klein: ▪
  Quadrat Gross: ■
  Kreis Klein: ○
  Kreis Gross: ◯
  Doppelpfeil: »
  Haken: ✓
  
  */
  
  .ausblenden {
  }
  
  .einblenden {
      display:none;
  }
  
  /* -------------- 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;") -------------------- */
  
  /* -------------- FLEXBOX -------------------- */
  
  /*
  .flex {
    display: flex;
    display: -ms-flexbox;
    display: -webkit-flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    margin: 1rem 0;
      flex-wrap: wrap;
    flex-direction: row;
  }
  
  .left {
    width: 48%;
    padding: 1rem 3%;
  }
  
  .right {
    width: 48%;
    padding: 1rem 3%;
  }
  */
  
  /* -------------- FLEXBOX -------------------- */
  
  
  .linksbuendig {
    text-align: left;
  }
  
  .rechtsbuendig {
    text-align: right;
  }
  
  .center {
    text-align: center;
  }
  
  .justify {
    text-align: justify;
  }
  
  .justifier {
    text-align: justify;
    text-align-last: justify;
  }
  
  .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;
  }
  
  .button_box {
    text-align: center;
  }
  
  .button_box::after {
    clear: both;
    content: "";
    display: block;
  }
  
  
  /*_______________________
  
  BUTTON MIT ANIMATION
  _______________________
  */
  
  .button a {
      cursor: pointer;
      padding: 0;
      line-height: 1;
      -webkit-transition: all 500ms ease;
      -moz-transition: all 500ms ease;
      transition: all 500ms ease;
      margin-top: .2rem;
      padding: 0.6rem 2.2rem;
      background-color: #b51d29;
      border: 2px solid #b51d29;
      color: #fff;
      font-weight: bold;
      margin: 0rem 0;
      display: inline-block;
  }
  .button a:hover {
      background-color: transparent;
      border: 2px solid #b51d29;
      color:#b51d29;
  }
  
  /*
  _______________________
  
  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;
  }
  
  
  /*
  _______________________
  
  MARKIERTER TEXT
  _______________________
  
  ::selection {
  background: #ffb7b7;
  }
  ::-moz-selection {
  background: #ffb7b7;
  }
  
  */
  
  .refnr{}
  .apply{}
  
  /*-----Slider-----*/
  
  #sliderBox{
      position: relative;
  }
  
  .slider-wrap {
    max-width: 720px;
    width: auto;
    height: auto;
    position: relative;
    overflow: hidden;
      z-index: 2;
  }
  
  .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 9s linear infinite;
    animation: image 9s linear infinite;
  }
  
  @keyframes image {
    0% {
      opacity: 0;
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
    }
    4% {
      opacity: 1;
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out;
    }
    35% {
      opacity: 1;
    }
    39% {
      opacity: 0;
    }
    100% {
      opacity: 0;
    }
  }
  @-webkit-keyframes image {
    0% {
      opacity: 0;
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
    }
    4% {
      opacity: 1;
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out;
    }
    35% {
      opacity: 1;
    }
    39% {
      opacity: 0;
    }
    100% {
      opacity: 0;
    }
  }
  
  .slideshow li {
    margin:0 !important;
    padding:0 !important;
    list-style: none !important;
  }
  .slideshow li:nth-child(1) span {}
  .slideshow li:nth-child(2) span {
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
  }
  .slideshow li:nth-child(3) span {
    -webkit-animation-delay: 6s;
    animation-delay: 6s;
  }
  
  ul.slideshow {
      margin:0 !important;
      padding: 0 !important;
  }
  
  .slideshow li::before{
      display:none !important;
  }
  
  .slideshow ul {
      margin:0 !important;
      padding-left:0 !important;
      list-style-type: none !important;
      list-style:none !important;
  }
  
  /*
  
  <div class="slider-wrap">
  <img style="opacity: 0;" src="aerztlicher-dienst.jpg" alt="">
  <ul class="slideshow">
  <li><span><img src="aerztlicher-dienst.jpg" alt=""></span></li>
  <li><span><img src="auszubildende.jpg" alt=""></span></li>
  <li><span><img src="med-fachberufe.jpg" alt=""></span></li>
  </ul>
  </div><!--slider-wrap-->
  
  */
  
  
  /*
  SLIDER SCHIEBEN
  
  .slider-wrap{
      margin: 0;
      width: auto;
      height: auto;
      position: relative;
      overflow: hidden;
      z-index: 1;
  }
  
  .slideshow {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 0;
  }
  .slideshow 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 30s linear infinite;
    animation: image 30s linear infinite;
  }
  @keyframes image {
  0% {
   opacity: 0;
        transform: translateX(100%);
      }
      0.01%{
          opacity: 1;
      }  
  
      2% {
        transform: translateX(0);
      }
  
      20% {
        transform: translateX(0);
      }
  
      22% {    
        transform: translateX(-100%);
          opacity: 1;
      }
      23%{
          opacity: 0;
      }
  }
  @-webkit-keyframes image {
  0% {
   opacity: 0;
        transform: translateX(100%);
      }
      0.01%{
          opacity: 1;
      }  
  
      2% {
        transform: translateX(0);
      }
  
      20% {
        transform: translateX(0);
      }
  
      22% {    
        transform: translateX(-100%);
          opacity: 1;
      }
      23%{
          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;
  }
  .slideshow li:nth-child(5) span {
    -webkit-animation-delay: 24s;
    animation-delay: 24s;
  }
  
  ul.slideshow {
      margin:0 !important;
      padding: 0 !important;
  }
  
  .slideshow li::before{
      display:none !important;
  }
  
  .slideshow ul {
      margin:0 !important;
      padding-left:0 !important;
      list-style-type: none !important;
      list-style:none !important;
  }
  
  
  */
  .refnr {}
  
  .apply {}