/* Marquee Container */
.marquee.logo-marquee.alignwide {
    overflow: hidden;
    position: relative;
    background: transparent;
    padding-top: 48px;
    margin-bottom: 48px;
}

.marquee__inner {
    display: flex;
    align-items: center;
    width: 100%;
    overflow: hidden;
}

/* Marquee Content - Animation */
.marquee__content {
    display: flex;
    align-items: center;
    height: 100%;
    animation: scroll linear infinite;
    will-change: transform;
    flex-shrink: 0;
    gap: 25px; /* Add consistent gap between items */
}

/* Logo Items */
.marquee__item.logo-item {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 292px;
    height: 166px;
    flex-shrink: 0;
    background-color: #F6F4F3;
    border-radius: 12px;
    padding: 32px;
}

.marquee.headline {
  font-size: 44px;
  line-height: 52px;
  letter-spacing: -1%;
  margin-bottom: 48px;
  font-weight: 600;
  text-align: center;
  padding: 0 20px;
}


.logo-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: grayscale(100%);
  max-height: 61px;
}

.marquee_button_area {
  text-align: center;
}

.marquee_button {
  margin: 48px auto;
  border-radius: 8px;
  display: inline-block;
  text-align: center;
  padding: 12px 32px;
  background-color: #FCFBFA;
  border: 1px solid #688;
  color: #003838;
  font-size: 18px;
  line-height: 22px;
  text-decoration: none;
  font-weight: 600;
}

.marquee_button:hover {
  box-shadow: 0 2px 12px -2px rgba(62, 101, 101, 0.5);
  background-color: #E5EAEA;
  color: #3E6565;
}

.logo-placeholder {
    width: 195px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    color: #333;
}

/* Animation */
@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-50% - 12.5px)); /* Half width plus half the gap */
    }
}

/* Pause on hover */
.marquee:hover .marquee__content {
    animation-play-state: paused;
}

.marquee__inner {
  overflow: hidden;
  width: 100%;
  height: auto; /* beide Reihen rein */
}

.marquee__track {
  display: grid;                  /* <== stapelt Rows */
  grid-template-rows: auto auto;  /* zwei Zeilen */
  row-gap: 20px;
  animation: scroll linear infinite;
  will-change: transform;
}

.marquee__row {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: max-content;
}

/* Untere Reihe versetzen */
:root {
  --logo-w: 195px;
  --logo-gap: 16px;
  --half-step: calc((var(--logo-w) + var(--logo-gap)) / 2);
}
.marquee__row--bottom {
  transform: translateX(calc(-1 * var(--half-step)));
}

@keyframes scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@media only screen and (max-width: 800px) {
  .marquee.logo-marquee.alignwide {
    padding-top: 32px;
    margin-bottom: 32px;
    margin-top: 64px;
  }

  .marquee.headline {
    font-size: 30px;
    line-height: 40px;
    margin-bottom: 24px;
  }

  .marquee__track {
    row-gap: 16px;
  }

  .marquee__item.logo-item {
    width: 200px;
    height: 120px;
  }

  .marquee_button {
    margin: 24px auto;
    font-size: 16px;
    line-height: 24px;
  }
}