/* Clarity – Logo-Karussell (draggo_clarity_logos)
   Das Swiper-Bundle-CSS lädt nach diesem Stylesheet → Slider-Regeln über
   .cl-logos .cl-logos__swiper … verstärkt. */
.cl-logos { container-type: inline-size; position: relative; }

.cl-logos .cl-logos__swiper { --cll-n: var(--cll-n1, 2); position: relative; z-index: 1; display: block; margin: 0; padding: 0 0 30px; overflow: hidden; list-style: none; }
.cl-logos.cl-logos--nav-arrows .cl-logos__swiper, .cl-logos.cl-logos--nav-none .cl-logos__swiper { padding-bottom: 0; }
.cl-logos .cl-logos__wrapper { position: relative; z-index: 1; display: flex; box-sizing: content-box; width: 100%; height: 100%; }
.cl-logos .cl-logos__slide { position: relative; flex-shrink: 0; display: flex; align-items: center; justify-content: center; height: calc(var(--cll-h, 200px) + 20px); margin: 0; padding: 10px; box-sizing: border-box; }
/* Vor dem Start von Swiper bzw. im Editor (kein JS): die ersten Logos in einer Reihe */
.cl-logos .cl-logos__swiper:not(.swiper-initialized) .cl-logos__wrapper { gap: var(--cll-gap, 10px); }
.cl-logos .cl-logos__swiper:not(.swiper-initialized) .cl-logos__slide { width: calc((100% - (var(--cll-n) - 1) * var(--cll-gap, 10px)) / var(--cll-n)); }
@container (min-width: 768px) { .cl-logos .cl-logos__swiper { --cll-n: var(--cll-n2, 3); } }
@container (min-width: 1025px) { .cl-logos .cl-logos__swiper { --cll-n: var(--cll-n3, 5); } }

.cl-logos .cl-logos__link { display: block; max-width: 100%; line-height: 0; text-decoration: none; }
.cl-logos .cl-logos__img { display: block; width: var(--cll-w, 200px); max-width: 100%; height: var(--cll-h, 200px); margin: 0; object-fit: contain; filter: grayscale(100%); transition: transform .3s, filter .3s; }
.cl-logos .cl-logos__img:hover, .cl-logos .cl-logos__link:focus-visible .cl-logos__img { filter: none; transform: scale(1.2); }
.cl-logos.cl-logos--color .cl-logos__img { filter: none; }

/* Paginierung (Punkte) */
.cl-logos .cl-logos__swiper .cl-logos__pagination { position: absolute; z-index: 10; left: 0; right: 0; top: auto; bottom: 7px; width: 100%; height: 6px; text-align: center; line-height: 0; transform: none; }
.cl-logos .cl-logos__swiper .cl-logos__pagination .swiper-pagination-bullet { display: inline-block; width: 6px; height: 6px; margin: 0 6px; padding: 0; border: 0; border-radius: 50%; background: #000; opacity: .2; cursor: pointer; vertical-align: top; }
.cl-logos .cl-logos__swiper .cl-logos__pagination .swiper-pagination-bullet-active { background: #000; opacity: 1; }

/* Dezente Pfeile am Rand */
.cl-logos .cl-logos__swiper .cl-logos__prev, .cl-logos .cl-logos__swiper .cl-logos__next { position: absolute; z-index: 10; top: calc(var(--cll-h, 200px) / 2 + 10px); display: flex; align-items: center; justify-content: center; width: 25px; height: 25px; margin: -12.5px 0 0; padding: 0; border: 0; background: transparent; color: rgba(237, 237, 237, .9); cursor: pointer; }
.cl-logos .cl-logos__swiper .cl-logos__prev { left: 0; right: auto; }
.cl-logos .cl-logos__swiper .cl-logos__next { right: 0; left: auto; }
.cl-logos .cl-logos__swiper .cl-logos__prev::after, .cl-logos .cl-logos__swiper .cl-logos__next::after { content: none; }
.cl-logos .cl-logos__swiper .cl-logos__prev svg, .cl-logos .cl-logos__swiper .cl-logos__next svg { width: 100%; height: 100%; object-fit: contain; fill: currentColor; }
.cl-logos .cl-logos__swiper .cl-logos__prev svg { transform: rotate(180deg); }
.cl-logos .cl-logos__swiper .swiper-button-lock, .cl-logos .cl-logos__swiper .swiper-pagination-lock { display: none; }
/* Ohne Swiper (Editor): statischer Platzhalter für die Punkte */
.cl-logos .cl-logos__swiper:not(.swiper-initialized) .cl-logos__pagination { left: calc(50% - 45px); width: 90px; background: radial-gradient(circle, rgba(0, 0, 0, .25) 0 3px, transparent 3.5px) 0 0 / 18px 6px repeat-x; }

@media (prefers-reduced-motion: reduce) {
    .cl-logos .cl-logos__img { transition: none; }
}