.contentGalleryCarousel {
  --bg-color: transparent; /* var(--logo-color-1-light, #888888); */
  --font-color: var(--font-color-dark, #333);   /* Schriftfarbe im Menü*/
  --hover-color: var(--logo-color-2, #ffffff);  /* Hover Linkfarbe im Menü*/
  --button-color: #fff; /* var(--logo-color-1); */
  --slide-color: var(--neutral-color-light); /* var(--logo-color-1); */
  --title-color: #fff; /* var(--logo-color-1); */
  --height: 400px;
  /* --columns: 4; */
  --gap-width: 10px;
  --top-margin: 10px;
  --element-radius: var(--border-radius, 10px);
  --button-radius: var(--border-radius-small, 5px);
}

.contentGalleryCarousel .container {
  margin: var(--top-margin) 0 0 0;
  padding: 0;
  background: var(--bg-color);
  display: flex;
  justify-content: space-around;
  column-gap: var(--gap-width);
}

.contentGalleryCarousel .slider-container {
  /* height: 300px;
  max-width: 1400px; */
  width: 100%;  /* rho war 85vw; */
  background: var(--bg-color);
  position: relative;
  overflow: hidden;
  padding: 20px;
}

.contentGalleryCarousel .slider-container .slider {
  display: flex;
  align-items: flex-start;
  width: 100%;
  height: 100%; 
  transition: all .5s;
}

.contentGalleryCarousel .slider-container .slider .slide {
  margin: 0 var(--gap-width);           /* auto var(--gap-width); wenn vertikal zentriert */
  height: 100%;
  background-color: var(--slide-color);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  cursor: pointer;
  flex-basis: calc(100% / var(--columns) - var(--gap-width) / var(--columns) * (var(--columns) - 1) - 5px );
  flex-shrink: 0;
  border-radius: var(--element-radius);
}

.contentGalleryCarousel .slider-container .slider .slide img {
  max-height: min( var(--maxHeight), var(--height) );
  width: 100%;
  max-width: 100%;
  object-fit: scale-down;
  border-radius: var(--element-radius) var(--element-radius) 0 0;
}

.contentGalleryCarousel .slider-container .slider .slide .text {
  flex-basis: 20%;
  padding: 1rem;
  color: var(--font-color);
}
.contentGalleryCarousel .slider-container .slider .slide .text .title { color: var(--title-color); }

.contentGalleryCarousel .slider-container .btn {
  position: absolute;
  top: calc(50% - 30px);
  height: 30px;
  width: 30px;
  border-left: 8px solid var(--button-color);
  border-top: 8px solid var(--button-color);
  cursor: pointer;
  transition: all .3s;
}

.contentGalleryCarousel .slider-container .btn:hover {
  scale: 1.2;
}

.contentGalleryCarousel .slider-container .btn.inactive {
  border-color: rgb(153, 121, 126)
}

.contentGalleryCarousel .slider-container .btn:first-of-type {
  transform: rotate(-45deg);
  left: 10px
}

.contentGalleryCarousel .slider-container .btn:last-of-type {
  transform: rotate(135deg);
  right: 10px;
}

/* wenn diese Originalversion verwendet werden soll, muss .slide ohne flex-shrink und ohne flex-basis und .slider width 1000% 
aber dann funktionieren die Verschiebeabstände bei unterschiedlicher Anzahl Slides / Seite nicht mehr richtig
ursprünglich -20px statt - var(--gap-width) * 2, gap ist margin von .slide, auf jeder Seite, deshalb var(--gap-width) * 2 */
.contentGalleryCarousel .slider-container .slider { width: 1000%; }
.contentGalleryCarousel .slider-container .slider .slide { flex-basis: auto; flex-shrink: inherit; }
@media only screen and (min-width: 1100px) { .contentGalleryCarousel .slider-container .slider .slide { flex-basis: calc(2.5% - var(--gap-width) * 2); } }
@media only screen and (max-width: 1100px) { .contentGalleryCarousel .slider-container .slider .slide { flex-basis: calc(3.3333333% - var(--gap-width) * 2); } }
@media only screen and (max-width: 900px) {  .contentGalleryCarousel .slider-container .slider .slide { flex-basis: calc(5% - var(--gap-width) * 2); } }
@media only screen and (max-width: 550px) {  .contentGalleryCarousel .slider-container .slider .slide { flex-basis: calc(10% - var(--gap-width) * 2); } }
/*
@media only screen and (min-width: 1100px) { .contentGalleryCarousel  { --columns: 4; } }
@media only screen and (max-width: 1100px) { .contentGalleryCarousel  { --columns: 3; } }
@media only screen and (max-width: 900px) {  .contentGalleryCarousel  { --columns: 2; } }
@media only screen and (max-width: 550px) {  .contentGalleryCarousel  { --columns: 1; } }
*/