/* ======= Yunicu Slider Styles v1.1 ======= */
.ys-slider-wrap {
  position: relative;
  width: 100%;
  margin-inline: auto;
  padding-block: clamp(24px, 5vw, 56px);
  max-width: 1400px;
  perspective: 1200px;
}

.ys-slider { overflow: visible; }
.ys-slider .swiper-wrapper { align-items: center; }

.ys-slide {
  position: relative;
  width: clamp(240px, 60vw, 420px);
  aspect-ratio: 10 / 16;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0,0,0,.35);
  transform: scale(.86);
  filter: grayscale(1);
  opacity: .95;
  transition: transform .6s cubic-bezier(.2,.7,.2,1), filter .6s, opacity .6s;
  will-change: transform, filter, opacity;
}

.ys-slide.swiper-slide-active {
  transform: scale(1);
  filter: grayscale(0);
  opacity: 1;
}

/* Hover colorize (enabled via .hover-colorize) */
.ys-slider-wrap.hover-colorize .ys-slide:not(.swiper-slide-active):hover {
  filter: grayscale(0);
}

/* background image */
.ys-slide__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

/* dark gradient to ensure text legibility */
.ys-slide__overlay {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.55) 60%, rgba(0,0,0,.85) 100%);
  pointer-events: none;
  transition: opacity .4s;
}

.ys-slide__inner {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: clamp(16px, 3vw, 24px);
  color: #fff;
}

/* top content */
.ys-slide__logo {
  width: clamp(36px, 6vw, 56px);
  height: auto;
  margin-bottom: 10px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.35));
}

.ys-slide__content {
  align-self: end;
  margin-bottom: 56px; /* make space for CTA */
}

.ys-slide__heading {
  font-size: clamp(18px, 2.4vw, 26px);
  line-height: 1.15;
  margin: 0;
  font-weight: 700;
}

.ys-slide__sub {
  font-size: clamp(16px, 2.2vw, 22px);
  line-height: 1.15;
  margin-top: 4px;
  opacity: .95;
  font-weight: 600;
}

.ys-slide__text {
  font-size: clamp(12px, 1.8vw, 14px);
  line-height: 1.5;
  margin-top: 10px;
  opacity: .9;
  max-width: 32ch;
}

/* CTA circular arrow */
.ys-cta {
  position: absolute;
  left: clamp(12px, 3vw, 20px);
  bottom: clamp(12px, 3vw, 20px);
  display: grid;
  place-items: center;
  width: clamp(42px, 8vw, 54px);
  height: clamp(42px, 8vw, 54px);
  border-radius: 9999px;
  background: #fff;
  color: #111;
  text-decoration: none;
  transform: translateY(8px) scale(.98);
  opacity: 0;
  pointer-events: none;
  transition: transform .4s, opacity .4s, box-shadow .2s;
  box-shadow: 0 10px 22px rgba(0,0,0,.25);
}

.ys-cta__icon { display: block; }

.ys-slide.swiper-slide-active .ys-cta {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}

.ys-cta:hover { box-shadow: 0 8px 16px rgba(0,0,0,.3); }

/* Pagination dots centered below slider */
.ys-pagination {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: clamp(18px, 3vw, 28px);
}

.ys-pagination .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #666;
  opacity: .6;
  transition: width .3s, opacity .3s, background .3s;
}

.ys-pagination .swiper-pagination-bullet-active {
  width: 26px;
  opacity: 1;
  background: #f9eb09; /* Wunschfarbe */
}

/* Fancy content animations */
@keyframes ysFadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes ysPop {
  from { opacity: 0; transform: translateY(8px) scale(.92); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.ys-fancy .ys-slide .ys-slide__logo,
.ys-fancy .ys-slide .ys-slide__heading,
.ys-fancy .ys-slide .ys-slide__sub,
.ys-fancy .ys-slide .ys-slide__text {
  opacity: 0;
  transform: translateY(8px);
}

.ys-fancy .ys-slide.ys-animate .ys-slide__logo { animation: ysFadeUp .5s ease-out .05s forwards; }
.ys-fancy .ys-slide.ys-animate .ys-slide__heading { animation: ysFadeUp .55s ease-out .12s forwards; }
.ys-fancy .ys-slide.ys-animate .ys-slide__sub { animation: ysFadeUp .55s ease-out .18s forwards; }
.ys-fancy .ys-slide.ys-animate .ys-slide__text { animation: ysFadeUp .6s ease-out .24s forwards; }
.ys-fancy .ys-slide.ys-animate .ys-cta { animation: ysPop .45s ease-out .28s forwards; }

/* Responsiveness */
@media (max-width: 767px) {
  .ys-slide { width: clamp(260px, 82vw, 360px); }
  .ys-slide__content { margin-bottom: 52px; }
}

.ys-slider-wrap .swiper { margin-inline: auto; }