/* Slider Styles    slider.css */

.slider, .slider * {box-sizing: border-box; line-height: 0;}

.slider {
  display: inline-block; width:100%; max-width: 22rem; float:left;
  margin: 0 1.6rem 0 0; padding: 0;
  position:relative;
}
.slider.zoomed {
  display: block;
  float: none;
  margin: 0;
  margin-top: 0px;
  clear: both;
  width: 100%; max-width: 100%;
}

@media only screen and (max-width: 1024px) {
  .slider {
    display: block;
    float: none;
    margin: 0;
    margin-top: 0px;
    clear: both;
    width: 100%; max-width: 100%;
  }
}

.slider-image {
  position: relative; display:inline-block; width:100%; aspect-ratio: 4/3;
  margin: 0 0 2.2rem 0;
  z-index: 500;
  cursor: zoom-in;
  border: 1px solid #e4e4e4;
}/*background:lime;*/

.slider.zoomed .slider-image {cursor: zoom-out;}

.slider ul{
  display: flex;
  gap:.4rem;
  flex-wrap: wrap;
  justify-content: flex-start; /*space-between;*/
  align-content: space-between;
  margin: 0;
  padding: 0;
  list-style: none;
}/*background:yellow;*/

.slider li{
  flex: 0 0 20%;
  width: 20%;
  min-width: 3.3rem;
  max-width: 6rem;
  border: 1px solid #e4e4e4;
  background: #ebebeb center/contain no-repeat;
}/*background:red;*/

.slider ul span.slider-container{
  display: inline-block;
  width:100%; aspect-ratio: 4/3;
  text-align: center;
}

/* the Magic*/
.slider input{position: fixed; left: -10000px;top: -10000px;}

.slider img{height: 100%; max-height: 100%; max-width: 100%; margin: 0 auto;}

.slider li:has(input:checked) {border-color:red; outline: 1px solid red; outline-offset: 0;}

.slider input:checked + label span.slider-container{width:100%;
  position: absolute; top:0; left:0;
}

.slider input:checked + label img{display: block;}
.slider input:checked + label span.slider-caption{display: block;}

.slider span.slider-caption {
  display:none;
  margin: 0; padding: 0; line-height: 1rem;
  font-style: italic; text-align: left;
}



.slider-nav {
  position: absolute; top: 0; left: 0;
  display: inline-block;
  width: 1.5rem; height: calc(81% - 2.7em);
  z-index: 1000;
  background: transparent url(../templates/nullbarriere/images/slides-prev.png) no-repeat 0;
  cursor: pointer;
}
.slider-nav.slider-right {left:unset; right:0; background: transparent url(../templates/nullbarriere/images/slides-next.png) no-repeat right;}

.slider.image-only ul li{
  display:inline-block;
  width:100%; min-width: unset; max-width: 100%;
  position: absolute; top:0; left:0;
  border:none; outline:none;
  background:none;
}
.slider.image-only .slider-nav {display:none;}