/**
 * Event-Carousel (View carussel, Slick) – Hero-Slide mit lesbarem Overlay.
 */

.st-carussel-view {
  width: 100%;
  min-width: 0;
  --st-carussel-overlay-bg: color-mix(in srgb, var(--st-hell-light, #e5e5e5) 78%, transparent);
  --st-carussel-overlay-text: var(--st-text, #000);
  --st-carussel-overlay-muted: color-mix(in srgb, var(--st-carussel-overlay-text) 78%, transparent);
  --st-carussel-overlay-divider: color-mix(in srgb, var(--st-carussel-overlay-text) 22%, transparent);
  --st-carussel-control-bg: color-mix(in srgb, var(--st-carussel-overlay-text) 12%, transparent);
  --st-carussel-control-border: color-mix(in srgb, var(--st-carussel-overlay-text) 28%, transparent);
  --st-carussel-control-text: var(--st-carussel-overlay-text);
  --st-carussel-dot-bg: color-mix(in srgb, var(--st-carussel-overlay-text) 30%, transparent);
  --st-carussel-dot-active: var(--st-carussel-overlay-text);
  /* Fluid 380→2056: 5px @ min, 20px @ max */
  --st-carussel-overlay-inset: clamp(
    var(--st-space-5),
    calc(var(--st-space-5) + (100vw - var(--st-logo-vw-min, 380px)) * 15 / 1676),
    var(--st-space-20)
  );
  --st-carussel-overlay-padding: var(--st-carussel-overlay-inset);
  --st-carussel-date-inset: var(--st-carussel-overlay-inset);
  --st-carussel-date-inline: var(--st-carussel-overlay-inset);
  --st-carussel-overlay-radius: 10px;
  --st-carussel-date-bg: color-mix(in srgb, var(--st-dunkel-light, #172033) 32%, var(--st-hell-light, #e5e5e5));
}

html[data-color-scheme='dark'] .st-carussel-view,
body.darkmode--activated .st-carussel-view {
  --st-carussel-overlay-bg: color-mix(in srgb, var(--st-bg-page, #1b273b) 84%, transparent);
  --st-carussel-overlay-text: var(--st-text, #fff);
  --st-carussel-date-bg: color-mix(in srgb, #000 50%, var(--st-bg-page, #1b273b));
}

@media (prefers-color-scheme: dark) {
  :root:not([data-color-scheme='light']) .st-carussel-view {
    --st-carussel-overlay-bg: color-mix(in srgb, var(--st-bg-page, #1b273b) 84%, transparent);
    --st-carussel-overlay-text: var(--st-text, #fff);
    --st-carussel-date-bg: color-mix(in srgb, #000 50%, var(--st-bg-page, #1b273b));
  }
}

.st-carussel-view .view-content,
.st-carussel-view .slick,
.st-carussel-view .slick__slider {
  width: 100%;
}

.st-carussel-view .slick__slider {
  overflow: hidden;
}

.st-carussel-view .slide__content {
  position: relative;
  display: block;
  width: min(100%, 1024px);
  max-width: 1024px;
  margin-inline: auto;
  overflow: hidden;
  border-radius: 0;
}

.st-carussel-view .slide__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--st-chrome-bg-site, #0f182b);
}

.st-carussel-view .slide__media .media--ratio {
  height: 100%;
  min-height: 100%;
  padding-bottom: 0;
}

.st-carussel-view .slide__media .b-link,
.st-carussel-view .slide__media .media,
.st-carussel-view .slide__media .media--blazy {
  display: block;
  width: 100%;
  height: 100%;
}

.st-carussel-view .slide__media img,
.st-carussel-view .slide__media .media__element {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.st-carussel-view .slide__caption {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: var(--st-carussel-overlay-inset);
  pointer-events: none;
}

.st-carussel-view .slide__description {
  pointer-events: auto;
}

.st-carussel-view .st-carussel-event,
.st-carussel-view .st-carussel-event__date,
.st-carussel-view .st-carussel-event__info {
  display: flex;
}

.st-carussel-view .st-carussel-event__date {
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.st-carussel-view .st-carussel-event__info {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.st-carussel-event {
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  width: 100%;
  max-width: 100%;
  padding: 0;
  background: var(--st-carussel-overlay-bg);
  color: var(--st-carussel-overlay-text);
  border-radius: var(--st-carussel-overlay-radius);
  backdrop-filter: blur(6px);
}

.st-carussel-event__date {
  flex: 0 0 auto;
  align-self: stretch;
  min-width: clamp(3.25rem, 12vw, 4.5rem);
  margin-block: var(--st-carussel-date-inset);
  margin-inline: var(--st-carussel-date-inline);
  padding-inline: 0;
  background: var(--st-carussel-date-bg);
  color: inherit;
  text-align: center;
  line-height: 1;
  border-right: 1px solid var(--st-carussel-overlay-divider);
  border-radius: calc(var(--st-carussel-overlay-radius) - 2px);
}

.st-carussel-event__day {
  display: block;
  font-size: clamp(1.75rem, 4vw, 2.35rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.st-carussel-event__month {
  display: block;
  margin-top: 0.35rem;
  font-size: clamp(0.75rem, 1.6vw, 0.9rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.st-carussel-event__info {
  flex: 1 1 auto;
  min-width: 0;
  padding-block: var(--st-carussel-overlay-padding);
  padding-inline-end: var(--st-carussel-overlay-padding);
  color: inherit;
}

.st-carussel-event__title {
  margin: 0 0 0.45rem;
  font-size: clamp(1.15rem, 2.4vw, 1.65rem);
  font-weight: 700;
  line-height: 1.15;
}

.st-carussel-event__title a {
  color: inherit;
  text-decoration: none;
}

.st-carussel-event__title a:hover {
  color: var(--st-link-hover, var(--st-accent, #b0004b));
  text-decoration: underline;
}

.st-carussel-event__meta {
  margin: 0 0 0.35rem;
  font-size: clamp(0.85rem, 1.6vw, 0.95rem);
  line-height: 1.35;
  color: var(--st-carussel-overlay-muted);
}

.st-carussel-event__teaser {
  margin: 0;
  font-size: clamp(0.75rem, 1.4vw, 0.85rem);
  line-height: 1.4;
  color: var(--st-carussel-overlay-muted);
}

.st-carussel-event__teaser a {
  color: inherit;
  text-decoration: none;
}

.st-carussel-event__teaser a:hover {
  color: var(--st-link-hover, var(--st-accent, #b0004b));
  text-decoration: underline;
}

.st-carussel-view .slick__arrow {
  position: absolute;
  right: calc(var(--st-carussel-overlay-inset) + var(--st-carussel-overlay-padding));
  bottom: calc(var(--st-carussel-overlay-inset) + var(--st-carussel-overlay-padding) * 0.35);
  z-index: 3;
  display: flex;
  gap: 0.35rem;
}

.st-carussel-view .slick-prev,
.st-carussel-view .slick-next {
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--st-carussel-control-border);
  border-radius: 0;
  background: var(--st-carussel-control-bg);
  color: var(--st-carussel-control-text);
  font-size: 0;
  line-height: 1;
}

.st-carussel-view .slick-prev::after,
.st-carussel-view .slick-next::after {
  font-size: 1rem;
  line-height: 2rem;
}

.st-carussel-view .slick-prev::after {
  content: "‹";
}

.st-carussel-view .slick-next::after {
  content: "›";
}

.st-carussel-view .slick-dots {
  position: absolute;
  right: calc(var(--st-carussel-overlay-inset) + var(--st-carussel-overlay-padding) + 4.5rem);
  bottom: calc(var(--st-carussel-overlay-inset) + var(--st-carussel-overlay-padding) * 0.95);
  left: auto;
  z-index: 3;
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  width: min(220px, 40%);
  margin: 0;
  padding: 0;
  list-style: none;
}

.st-carussel-view .slick-dots li {
  flex: 1 1 auto;
  width: auto;
  height: 3px;
  margin: 0;
}

.st-carussel-view .slick-dots li button {
  width: 100%;
  height: 3px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--st-carussel-dot-bg);
  font-size: 0;
}

.st-carussel-view .slick-dots li.slick-active button {
  background: var(--st-carussel-dot-active);
}

@media (max-width: 720px) {
  .st-carussel-event__day {
    font-size: clamp(1.35rem, 6vw, 1.75rem);
  }

  .st-carussel-event__month {
    font-size: clamp(0.65rem, 2.8vw, 0.75rem);
  }

  .st-carussel-view .slick-dots {
    right: var(--st-carussel-overlay-inset);
    bottom: calc(var(--st-carussel-overlay-inset) + 0.5rem);
    width: min(160px, 55%);
  }

  .st-carussel-view .slick__arrow {
    display: none;
  }
}