body {
    padding: 10px;
    background-color: #252525 !important;

  }
  
  header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    background-color: #252525 !important;


    display: flex;
    align-items: center; /* Vertically align items */
    justify-content: space-between;
    padding-right: 80px !important;
    padding-left: 80px !important;
  }

  .navbar-toggler {
    background-color: #FFF !important;
  }

  .bg-body-tertiary {
    --bs-bg-opacity: 0 !important;}

.dropdown-menu {
  background-color: #252525 !important;
  color: #FFF !important;

  font-family: Jost !important;
  font-size: 14px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: normal !important;
  letter-spacing: 0.66px !important;
}

  .content01 {
    padding-top: 350px ;
  }

  .werte {
border-color: #FFF;
border-style: solid;
border-width: 1px;
border-radius: 25px;
padding: 25px;
margin-bottom: 30px;
  }


  .abstandshalter-50 {
    padding-top: 25px;
    padding-bottom: 25px;
  }

  .abstandshalter-sections {
    padding-top: 80px;
    padding-bottom: 80px;
  }

p {
  color: #FFF;
  font-family: Jost !important;
  font-size: 18px  !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: normal !important;
  letter-spacing: 1.8px !important;
  text-align: left  !important;
}

 h6 {
  color: #FFF!important;
  font-family: Jost !important;
  font-size: 18px  !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: normal !important;
  letter-spacing: 1.8px !important;
  text-align: left  !important;
}

ul,  li {
	 color: #FFF!important;
  font-family: Jost !important;
  font-size: 18px  !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: normal !important;
  letter-spacing: 1.8px !important;
  text-align: left  !important;
}


.heading01 {
    color: #F7F7F7;
/* H1 */
font-family: Jost;
font-size: 110px;
font-style: normal;
font-weight: 333;
line-height: normal;
letter-spacing: 8px;
text-align: left  !important;
  }

.heading02 {
color: #FFF;
/* H2 */
font-family: Jost;
font-size: 54px;
font-style: normal;
font-weight: 400;
line-height: 68px; /* 125.926% */
letter-spacing: 1.62px;
text-align: left  !important;
  }

.heading03 {
color: #FFF;
font-family: Jost;
font-size: 40px;
font-style: normal;
font-weight: 400;
line-height: 68px; /* 125.926% */
letter-spacing: 1.62px;
text-align: left  !important;
  }

  .tagline {
    color: #C3ACC5;
font-family: Jost;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: 1.8px;
text-transform: uppercase;
text-align: left  !important;
  }

.zwischenheading {
  color: #FFF;
  font-family: Jost !important;
  font-size: 22px  !important;
  font-style: normal !important;
  font-weight: 600 !important;
}

.highlight {
  color: #2F2F2F;
font-family: Jost;
font-size: 18vw !important;
font-style: normal;
font-weight: 900;
line-height: normal;
letter-spacing: 30px;
}

.nav {
  background-color: #252525 !important;
  padding-right: 35px;
  padding-left: 35px;
  padding-top: 10px;
}

.nav-item .nav-link {
  color: #FFF !important;

font-family: Jost !important;
font-size: 14px !important;
font-style: normal !important;
font-weight: 400 !important;
line-height: normal !important;
letter-spacing: 0.66px !important;

}


.kleineslogo {
  width: 32px;
height: 32px;
flex-shrink: 0;
}

a {
  color: #FFF !important;
  text-decoration: none !important;
}

a:hover {
  color: #9c9c9c !important;
  text-decoration: none !important;
}

.footer {
  text-align: center!important;
}

.mitte {
  display: flex;
    align-items: center;
    justify-content: center;}

.hero-bild {
  border-radius: 25px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);

}



@media only screen and (max-width: 767px) {
header {
  padding-right: 10px !important;
  padding-left: 10px !important;
}}


/*Column-reverser*/




@media screen and (max-width: 767px){

.column-reverse{

    display: flex;

    flex-direction: column-reverse;

}}


/*FadeIn*/

.animate {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

/*=== FADE IN  ===*/
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
.fadeIn {
    -webkit-animation-name: fadeIn;
	animation-name: fadeIn;
}


/*==== FADE IN RIGHT ===*/
@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}


/*=== FADE IN LEFT ===*/
@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}