:root {
      --primary: #004567;
      --light: #FFFFFF;
      --dark: #009B7E;
      --petrol: #3097A0;
      --blau: #2E75B6;  
      --lila: #6A257F;     
      --lightblue: #2E75B6;
  }
  
  
  .btn-primary {
  background-color: #004567;
  border-color: #004567;
}


/*** text styles ***/

p { 
      color: #000000;
    }

.text-primary {
  color: #004567 !important;
}

.text-petrol {
      color: var(--petrol);
}

.text-lila {
      color: var(--lila);
}

.text-blau {
      color: var(--blau);
}

.text-black {
      color: #000000;
}

/*** text styles END***/


.thead-dark {
      background-color:var(--petrol);
      color:#ffffff;
      }

.tabl {
      background-color:var(--primary);
      }
.fa-linkedin-in  {
  color: #009B7E !important;
}

.rundesache {
      background-color:#009B7E !important;

}

.farbe {
      color: #009B7E;
}

.titeltext {
    align-items: bottom !important;
    justify-content: bottom !important;
}
.tabellenschrift {
      color:#003232;
}

.navbar2 {
      position: fixed;
      width: 100%;
      z-index: 10000;
}


/*** Navbar ***/
.navbar.notscrolled {
      opacity: 0;
      background-color: transparent;
      height: 0;
  }

.btn-petrol {
      background-color: var(--petrol);
      color:#ffffff
}
.btn-lila {
      background-color: var(--lila);
      color:#ffffff
}
.btn-blau {
      background-color: var(--blau);
      color:#ffffff
}

/*Video oder Img - je nach Bildschrimgröße (zusammen mit custom JS) START*/
.gif-container {
      display: none;
  }
.video-container {
      display: block;
  }
  
  @media screen and (min-width: 40em) {
      .gif-container {
          display: block;
      }
      .video-container {
          display: none;
      }
  }



  /*Video oder Img - je nach Bildschrimgröße (zusammen mit custom JS) END*/
  .parent {
      position: relative;
      top: 0;
      left: 0;
    }
    .image1 {
      width:100%;
    }
  .image2 {
      position: absolute;
      top: 135px;
      left: 18%;
      display: block;
      width: 50%;


    }




  
  @media screen and (min-width: 40em) {
      #video-container {
          display: block;
      }
      #gif-container {
          display: none;
      }
  }

  



/*Bilder der Skalierbar auf Bildschirmgröße*/
@media only screen and (max-width: 500px) {
   .desktoppicture {
    display: none;
   } 
}

@media only screen and (min-width: 501px) {
   .mobilepicture {
    display: none;
   } 
}



/*Sprungmarken Höhenkorrektur*/
.sprung {
      visibility: hidden;
      height: 0px !important;
      position: absolute;
      margin: -100px;
  }



  .li-petrol {
      color: var(--petrol); 
      
}

.center {
      display: block;
      margin-left: auto;
      margin-right: auto;
      width: 50%;
    }

.mylogo{
      animation: rotation 2s infinite linear;
    }
    
    @keyframes rotation {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(359deg);
      }
    }

.wissens-text {
      padding-right: 50px;
    }

    /*Header Bild*/
    
    .py-222{padding-top:6rem !important;padding-bottom:3rem !important}

    .mb-555{margin-bottom:1rem !important}