/* Stile für Kategorien */
.category-container {
  margin-bottom: 20px;
}

.category-container:before {
  content: "";
  display: block;
  height: 60px; /* Same as your navbar's height */
  margin-top: -105px; /* Negative margin equal to your navbar's height */
  visibility: hidden;
}

.category-heading {
  font-size: 30px;
  margin-bottom: 10px;
  padding-top: 20px;
  border-top: 1px solid #363636;
}

.sign-container {
  display: inline-block;
  margin-bottom: 10px;
  margin-right: 10px;
  width: 250px; /* Container Width */
}

.video-title-container {
  font-size: 18px;
  margin-bottom: 5px; /* Abstand zwischen Titel und Video */
}

/* Allgemeiner Stil für Stern-Icons */
.video-star,
.category-star {
  visibility: hidden;
  color: #ffd700; /* Klassisches Stern-Gelb */
  cursor: pointer; /* Ändert den Mauszeiger zu einer Hand, um Klickbarkeit anzudeuten */
  margin-left: 5px; /* Abstand zwischen Titel und Stern */
}

.video-star.fas,
.category-star.fas {
  visibility: visible;
}

.sign-container:hover .video-star,
.category-container:hover .category-star {
  visibility: visible;
}

.video-container {
  width: 250px;
  height: 250px;
  overflow: hidden; /* Hide excess parts of the video */
  display: flex;
  justify-content: center; /* Center video horizontally */
  align-items: center; /* Center video vertically */
}

.video-container video {
  height: 250px; /* Set fixed height for video */
  width: auto; /* Width will be auto-scaled */
}

.video-title {
  color: inherit;
  text-decoration: none;
  font-size: inherit;
}