/* ============================================
   Brand Logo Block - KISS Version
   ============================================ */


.brand-title,
.brand-subheader {
  margin-bottom: 2rem;
}

/* ============================================
   Grid Layout - Fixed Grid
   ============================================ */

.brand-grid-container {
  display: grid;
  gap: var(--bs-gutter-x);
  grid-template-columns: repeat(var(--cols-xxl, 3), 1fr);
  grid-template-rows: repeat(var(--rows, 2), 1fr);
}

/* Responsive Breakpoints */
@media (max-width: 1400px) {
  .brand-grid-container {
    grid-template-columns: repeat(var(--cols-xl, 3), 1fr);
  }
}

@media (max-width: 1200px) {
  .brand-grid-container {
    grid-template-columns: repeat(var(--cols-lg, 2), 1fr);
  }
}

@media (max-width: 992px) {
  .brand-grid-container {
    grid-template-columns: repeat(var(--cols-md, 2), 1fr);
  }
}

@media (max-width: 768px) {
  .brand-grid-container {
    grid-template-columns: repeat(var(--cols-sm, 2), 1fr);
  }
}

@media (max-width: 576px) {
  .brand-grid-container {
    grid-template-columns: repeat(var(--cols-xs, 1), 1fr);
  }
}

.brand-grid-item {
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand-logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  opacity: 1;
}

/* Crossfade Transition nur wenn data-fade="1" */
.brand-logo-block[data-fade="1"] .brand-logo-item {
  transition: opacity 0.2s ease-in-out;
}

.brand-logo-block[data-fade="1"] .brand-logo-item.is-fading {
  opacity: 0;
}

/* Ohne Fade: Instant */
.brand-logo-block[data-fade="0"] .brand-logo-item {
  transition: none;
}

.brand-logo-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-decoration: none;
}

.brand-logo-link img {
  width: 100%;
  height: auto;
  max-width: 200px;
  object-fit: contain;
  transition: filter 0.3s ease, transform 0.3s ease;
}

/* ============================================
   Hover Effects
   ============================================ */

.brand-logo-link:hover img {
  transform: scale(1.05);
}

/* ============================================
   Slider - Infinite Loop
   ============================================ */

.brand-logo-wrapper {
  overflow: hidden;
  padding: 0px 0;
  white-space: nowrap;
  position: relative;
  container-type: inline-size;
}


.brand-logo-block[data-fade="1"] .brand-logo-wrapper {
  /* Fade-Laenge pro Seite: 2 × Gutter */
  --fade: calc(var(--bs-gutter-x) * 3);

  -webkit-mask-image: linear-gradient(
    to right,
    /* Links: lange fast unsichtbar */
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, 0.12) calc(var(--fade) * 0.1),
    /* Dann relativ schnell auf voll sichtbar */
    black var(--fade),

    /* Mittelbereich voll sichtbar */
    black calc(100% - var(--fade)),

    /* Rechts symmetrisch wieder rausfaden:
       erst kurz vor Ende leicht sichtbar, dann transparent */
    rgba(0, 0, 0, 0.12) calc(100% - (var(--fade) * 0.1)),
    rgba(0, 0, 0, 0) 100%
  );
          mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, 0.12) calc(var(--fade) * 0.1),
    black var(--fade),
    black calc(100% - var(--fade)),
    rgba(0, 0, 0, 0.12) calc(100% - (var(--fade) * 0.1)),
    rgba(0, 0, 0, 0) 100%
  );

  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
/*
.brand-logo-wrapper:hover .brand-logo-slide {
  animation-play-state: paused;
}
*/
.brand-logo-slide {
  display: inline-block;
  animation: var(--bs-brand-duration, 35s) slide infinite linear;
}

.brand-logo-slide .brand-logo-slide-item {
  display: inline-block;
  margin: 0 calc(var(--bs-gutter-x) * .5);
  background-color: var(--bs-body-bg);
}

.brand-logo-slide-item img[src$=".svg"] {
  width: 100%;
  object-fit: contain;
}

@keyframes slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}