.karriere-list-title {
  font-size: 20px;
  font-weight: 600;
  color: black;
}
.karriere-list-text {
  color: gray;
}

/* Blende anfangs das product-overview-dropdown aus */
.divMainMenuWrapper {
  display: none;
}
.hide {
  display: none;
}

.text-bold {
  font-weight: 600;
}

.banner-img {
  width: 100%;
  max-height: 375px;
  object-fit: contain;
}

.changelog-text {
  white-space: pre-line;
}
.margin-all-16 {
  margin: 16px;
}

.logo-container-wrapper {
  display: flex;
  flex-direction: row;
  min-width: fit-content;
  flex-wrap: wrap;
  justify-content: center;
}

#divLogo img.max-width-200 {
  max-width: 200px;
}

.logo-text-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* text-align: left; */
}
.logo-text-header {
  white-space: nowrap;
  font-weight: 600;
  color: black;
  font-size: 16px;
}

.registration-text {
  display: flex;
  align-items: center;
  width: fit-content;
  margin-left: auto;

  p {
    margin: 0;
    color: white;
    line-height: 1.3;
    text-align: right;
  }

  .contact-text {
    font-size: 12px;
  }

  .question-text {
    font-weight: 600;
  }
}
.registration-text:hover .mail-text {
    text-decoration: underline;
}

/* Kleiner Hack, damit im Deutschen bei kleinen Bildschrim kein "Kontaktieren Sie uns" sondern einfach knapp "Kontakt" dasteht und es nicht in 3 Zeilen umbricht */
.registration-text .de-text-long {
    display: inline-block;
}
.registration-text .de-text-short {
    display: none;
}
@media (max-width: 990px) {
  .registration-text .de-text-long {
      display: none;
  }
  .registration-text .de-text-short {
      display: inline-block;
  }
}


.black-toolbar-buttons {
  max-width: fit-content;

  /* Verhindere dass sich die li in eine neue Zeile brechen und damit die black-toolbar dick machen */
  ul {
    display: flex;
    flex-wrap: nowrap;
  }
}
.black-toolbar-container {
  display: flex;
}

.slide-text-container {
  background-color: rgba(0, 0, 0, 0.65);
  padding: 2rem;
  border-radius: 8px;
  margin-bottom: 1rem;

  h2, h4 {
    overflow-wrap: break-word;
    word-break: break-word;
  }

  h2 {
    /* Titel etwas kleiner, weil öfters mit mehr Wörtern */
    font-size: 50px;
    line-height: 1.05;
  }
  h4 {
    margin-bottom: 0;
    margin-top: 14px;
  }
}

@media (max-width: 990px) {
  .slide-text-container {
    padding: 1rem;

    h2 {
      font-size: 30px;
    }
  }
}

/* Fallback Background für die Slides falls kein Bild im portaltext hinterlegt ist.
Es wird per js oder so dann das background-image direkt im element.style überschrieben, dadurch verschwindet der gradient wenn wir ein Bild haben */
.bg-img {
  background-color: #0f172a; /* fallback base */
  background-image: linear-gradient(
    135deg,
    #0f172a 0%,
    #1e293b 40%,
    #0b3a5b 100%
  );
  background-size: cover;
  background-position: center;
}

.scale-08 {
  scale: 0.8;
}

/* Newsübersicht-Seite */
.news-line {
  display: flex;
  border-radius: 4px;
  background-color: white;
  padding: 8px;

  .bg-img {
    width: 100px;
    min-width: 100px;

    .img-wrapper, img {
      height: 100%;
      width: 100%;
    }
    img {
      object-fit: cover;
    }
  }

  .news-line-text {
    display: flex;
    flex-direction: column;
  }
}
.news-line:hover {
  cursor: pointer;
  filter: brightness(0.95);
}

/* Newsartikel-Seite */
.news-article-container {
  display: flex;
  gap: 1rem 2rem;
  flex-wrap: wrap;

  .bg-img {
    width: 400px;
    height: 300px;

    .img-wrapper, img {
      height: 100%;
      width: 100%;
    }
    img {
      object-fit: cover;
    }
  }
  
  .news-article-text-container {
    flex: 1;
  }
}

/* Artikel-Kachelübersicht */
.img-wh-cover {
  /* Damit die Bilder nicht abgeschnitten werden */
  object-fit: contain;
}

/* Artikel-Ansicht */

.product-view-img-container {
  .easyzoom {
    height: 300px;
    max-height: 300px;
    width: 100%;
    overflow: hidden;
  }
  /* Das Styling mit dem wir das Bild innerhalb des containers anzeigen, macht die easyzoom logik kaputt, deswegen deaktivieren wir sie onhover  */
  .easyzoom:not(:hover) img {
    object-fit: contain;
    height: 100%;
  }

  /* Thumbnails */
  .list-unstyled li {
    height: 60px;
    max-height: 60px;
    max-width: 80px;
    padding-right: 5px;
    padding-left: 5px;
    img {
      height: 100%;
      object-fit: contain;
    }
  }
}

.katalog-tile-image {
  object-fit: contain;
}