body {
	padding-top: 5rem;
	background: #f5f7fb;
}

.hero-section {
	background: linear-gradient(135deg, #ffffff 0%, #eef4ff 100%);
}

.hero-image-wrap {
	min-height: 100%;
	display: flex;
	background: linear-gradient(180deg, rgba(13, 110, 253, 0.08), rgba(13, 110, 253, 0.02));
	overflow: hidden;
}

.hero-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	min-height: 320px;
	flex: 1;
}

@media (max-width: 991.98px) {
	.hero-image {
		min-height: 240px;
	}
}

.card-img-top {
    width: 80px;
    height: 80px;
    object-fit: contain;
}

:root {
  --marquee-gap: 3rem; /* Der Abstand zwischen den einzelnen Wörtern (entspricht me-5) */
}

.banner-track {
  display: flex;
  gap: var(--marquee-gap);
  width: max-content;
  animation: moveBanner 35s linear infinite;
  /* Erzwingt Hardware-Beschleunigung gegen Zittern/Ruckeln */
  will-change: transform; 
}

.banner-content {
  display: flex;
  align-items: center;
  gap: var(--marquee-gap); /* Gleicher Abstand innerhalb der Liste */
  white-space: nowrap;
  flex-shrink: 0;
}

/* Gestaltet die einzelnen Einträge wie deine hstack-Kombination */
.banner-content span {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem; /* Entspricht Bootstrap gap-1 */
}

@keyframes moveBanner {
  0% {
    transform: translateX(0);
  }
  100% {
    /* Die mathematisch exakte Endposition inklusive Lückenberechnung */
    transform: translateX(calc(-50% - var(--marquee-gap) / 2));
  }
}

/* Optional: Pausieren bei Maus-Hover */
.banner-track:hover {
  animation-play-state: paused;
}