/* =============================
   trustbar.css
============================= */
.trustbar_headline {
    text-align: center;
    color: #fff;
    background: rgb(181, 119, 119);
    font-size: 15px;
    font-weight: 700;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out;
}

.trustbar_headline.open {
    max-height: 100px; /* Adjust as needed */
}

.trustbar_headline p {
    margin: 0px;
    padding: 5px;
}

.trustbar {
  position: relative;
  background-color: var(--white);
  height: 70px;
  overflow: hidden;
  display: flex;
  align-items: center;
  border-top: 1px solid var(--medium-grey);
  border-bottom: 1px solid var(--medium-grey);
  cursor: pointer;
}

.trustbar-track {
  display: flex;
  flex-shrink: 0;
  min-width: max-content; /* Wichtig für dynamische Breite */
  animation: scrollLogos linear infinite;
  animation-duration: 80s; /* Dauer an Anzahl Logos anpassen */
}

/* Animation je nach Anzahl Logos optimiert */
@keyframes scrollLogos {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-100% / 2)); } /* Halbe Strecke verschieben */
}

.trustbar-group {
  display: flex;
  flex-shrink: 0;
  align-items: center;
}

.trustbar-track img {
  height: 18px;
  margin: 0 32px; /* Gleichmäßiger Abstand */
  filter: opacity(0.7);
  transition: filter 0.3s ease;
  flex-shrink: 0;
}

.trustbar-track img:hover {
  filter: unset;
}

/* Verlaufseffekte */
.trust-fade-left,
.trust-fade-right {
  position: absolute;
  top: 0;
  width: 40px;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

.trust-fade-left {
  left: 0;
  background: linear-gradient(to right, var(--white) 60%, transparent 100%);
}

.trust-fade-right {
  right: 0;
  background: linear-gradient(to left, var(--white) 60%, transparent 100%);
}

/* Responsive */
@media (max-width: 600px) {
  .trustbar {
    height: 60px;
  }
  
  .trustbar-track img {
    height: 20px;
    margin: 0 20px;
  }
  
  .trust-fade-left,
  .trust-fade-right {
    width: 30px;
  }
}