.category {
  width: min(90vw, 1600px);
  margin: 0 auto;
}

.category-feed {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.category-item {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.category-series,
.category-slider-wrap,
.category-slider {
  min-width: 0;
  max-width: 100%;
}

.category-series-title {
  margin: 0 0 0.8rem;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1;
}


/* --------------------------------------------------
   Series slider
-------------------------------------------------- */

.category-slider-wrap {
  position: relative;
  width: 100%;
}

.category-slider {
  width: 100%;
  height: var(--series-height, auto);

  display: flex;

  overflow-x: auto;
  overflow-y: hidden;

  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.category-slider::-webkit-scrollbar {
  display: none;
}

.category-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  margin: 0;

  scroll-snap-align: start;
  scroll-snap-stop: always;

  display: flex;
  justify-content: center;
  align-items: center;
}

.category-slide img {
  display: block;

  height: var(--series-height, auto);
  width: auto;

  max-width: 100%;
  max-height: 100%;

  object-fit: contain;
}


/* --------------------------------------------------
   Navigation
   Mobile: hidden by default
-------------------------------------------------- */

.category-nav {
  display: none;
}


/* --------------------------------------------------
   Meta + counter
-------------------------------------------------- */

.category-bottom {
  width: 100%;
  margin-top: 0.6rem;

  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.category-meta,
.category-counter {
  font-size: 1.6rem;
  line-height: 1.3;
}


/* --------------------------------------------------
   Single photos
-------------------------------------------------- */

.category-single {
  display: block;
}

.category-single img {
  display: block;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}


/* --------------------------------------------------
   Desktop
-------------------------------------------------- */

@media (min-width: 900px) {

  .site-header {
    width: min(90vw, 1600px);
    margin: 0 auto;
    padding-left: 0;
    padding-right: 0;
  }

  .site-title {
    font-size: 2.8rem;
  }

  .category-item {
    width: var(--series-frame-width, 100%);
    margin-left: auto;
    margin-right: auto;
  }

  .category-single img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 70vh;
    object-fit: contain;

    /* Single wie Series horizontal zentrieren */
    margin-left: auto;
    margin-right: auto;
  }


  /* Navigation only on desktop */

  .category-nav {
    display: block;

    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;

    border: 0;
    background: transparent;
    color: #000;

    font-family: inherit;
    font-size: 3rem;
    line-height: 1;

    cursor: pointer;
  }

  .category-nav-prev {
    left: -3rem;
  }

  .category-nav-next {
    right: -3rem;
  }

}


/* --------------------------------------------------
   Mobile
-------------------------------------------------- */

@media (max-width: 899px) {

  .category {
    width: 90vw;
  }

  .category-feed {
    gap: 2rem;
  }

  .category-series-title {
    font-size: 1.45rem;
    margin-bottom: 0.5rem;
  }

  .category-single img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 60vh;
    object-fit: contain;

    /* Mobile weiterhin linksbündig */
    margin-left: 0;
    margin-right: auto;
  }

  .category-meta,
  .category-counter {
    font-size: 0.9rem;
    line-height: 1.25;
  }

}