/* ==========================================================================
   Content Block: activewerbung/header-slider
   --------------------------------------------------------------------------
   Full width header image(s) with headline and button.
   Design reference: PDF "LeibbrandWeb2026-20" (artboard 1360 px: image 2:1,
   headline ~70 px Roboto Light, button 245 × 55 px, round arrows 47 px).
   Uses the global tokens / components (theme.css, components.css: .btn).

   01. Stage (height, image, scrim)
   02. Content (RTE: headline, text, buttons)
   03. Slider controls (arrows, dots, pause)
   ========================================================================== */

.header-slider {
  --header-slider-arrow: 3rem;
  --header-slider-arrow-inset: clamp(0.75rem, 3vw, 2.5rem);   /* 40px at 1360 */

  position: relative;
  isolation: isolate;
  background: var(--c-text);   /* while the image loads */
  color: var(--c-white);

  /* Swiper theme: white dots */
  --swiper-pagination-color: var(--c-white);
  --swiper-pagination-bullet-inactive-color: var(--c-white);
  --swiper-pagination-bullet-inactive-opacity: 0.5;
}


/* ==========================================================================
   01. STAGE
   Fixed ratio = no layout shift. Smartphone 4:5 (own crop), from 48rem 2:1.
   Never taller than the visible viewport below the header (--header-h: main-nav-top.js).
   Selector with parent class: must win over Swiper's .swiper-slide { display: block }.
   width: 100% is needed: with aspect-ratio + max-height and auto width the browser
   shrinks the width to keep the ratio (single image without Swiper, wide screens).
   ========================================================================== */
.header-slider .header-slider__slide {
  position: relative;
  display: grid;
  width: 100%;
  aspect-ratio: 4 / 5;
  max-height: calc(100svh - var(--header-h, 0px));
  min-height: 22rem;
  overflow: hidden;
}
@media (min-width: 48rem) {
  .header-slider .header-slider__slide {
    aspect-ratio: 2 / 1;
    min-height: 26rem;
  }
}

.header-slider__picture,
.header-slider__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.header-slider__image { object-fit: cover; }

/* Scrim: keeps the white headline readable on bright photos (not in the layout, needed for contrast) */
.header-slider__slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 75% 65% at 50% 50%, rgb(0 0 0 / 0.3), transparent 75%),
    linear-gradient(rgb(0 0 0 / 0.08), rgb(0 0 0 / 0.18));
  pointer-events: none;
}


/* ==========================================================================
   02. CONTENT
   ========================================================================== */
.header-slider__content {
  position: relative;
  z-index: 1;
  place-self: center;
  width: 100%;
  max-width: 84rem;
  /* Same space top and bottom = optically centered (bottom keeps the dots / pause bar free),
     side space for the arrows */
  padding: 4.5rem calc(var(--header-slider-arrow-inset) + var(--header-slider-arrow) + 1rem);
  color: var(--c-white);
  text-align: center;                                /* always centered: no alignment buttons in this RTE (HeaderSlider.yaml) */
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 2px 24px rgb(0 0 0 / 0.35);
}
@media (max-width: 47.99rem) {
  .header-slider__content { padding-inline: var(--gutter); }
}

/* RTE content on the image. :where() = low specificity, so the RTE options
   ("Schriftgröße" .fs-*, "Schriftart" .ff-*, colors) still win */
.header-slider__content > * { margin-inline: auto; }

/* Headline: Roboto Light, large like the layout (70px at 1360, max 80px) */
.header-slider__content :where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--ff-base);
  font-size: clamp(1.75rem, 0.6rem + 4.4vw, 5rem);
  font-weight: 300;
  line-height: 1.1;                                  /* large display size: tighter than the 1.2 of other headings */
}
.header-slider__content > :where(p, ul, ol) { font-size: var(--fs-lead); }
.header-slider__content > * + :is(p:has(> .link-button)) { margin-top: clamp(1.25rem, 2.5vw, 2rem); }
.header-slider__content p:has(> .link-button) { justify-content: center; }
.header-slider__content a:not([class]) { text-decoration-color: currentColor; }

/* Buttons (RTE styles) look like everywhere else (components.css), only without the text shadow */
.header-slider__content .link-button { text-shadow: none; }

/* Focus on photos: white ring with dark halo, visible on any image */
.header-slider :focus-visible {
  outline: 2px solid var(--c-white);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--c-text);
}


/* ==========================================================================
   03. SLIDER CONTROLS
   ========================================================================== */

/* ---- Arrows (round, like the layout; from 48rem, on smartphones swipe + dots) ---- */
.header-slider__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: none;
  place-items: center;
  width: var(--header-slider-arrow);
  height: var(--header-slider-arrow);
  border-radius: 50%;
  background: rgb(255 255 255 / 0.75);
  color: var(--c-text);
  font-size: 1.5rem;
  translate: 0 -50%;
  transition: background-color var(--transition);
}
.header-slider__arrow:hover { background: var(--c-white); }
.header-slider__arrow--prev { left: var(--header-slider-arrow-inset); }
.header-slider__arrow--next { right: var(--header-slider-arrow-inset); }
@media (min-width: 48rem) {
  .header-slider__arrow { display: grid; }
}

/* ---- Bottom bar: pause button + dots ---- */
.header-slider__controls {
  position: absolute;
  bottom: clamp(0.75rem, 2vw, 1.5rem);
  left: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  background: rgb(0 0 0 / 0.3);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  translate: -50% 0;
}

.header-slider__pagination { display: flex; }
/* Dots: 8px visible, 24px tap target (WCAG 2.5.8). Same look as the textmedia slider */
.header-slider .swiper-pagination-bullet {
  position: relative;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0 !important;
  padding: 0.5rem;
  background-clip: content-box;
  opacity: var(--swiper-pagination-bullet-inactive-opacity);
  transition: opacity var(--transition);
}
.header-slider .swiper-pagination-bullet-active { opacity: 1; }

/* Autoplay running (.is-autoplay, frontend.js): the active dot stays a circle and fills up
   clockwise until the next image (--autoplay-progress from Swiper's autoplayTimeLeft).
   Slightly larger (10px) so the fill is visible. Stops with the autoplay (keyboard focus),
   plain dot again when the visitor stops it. */
.header-slider.is-autoplay .swiper-pagination-bullet-active {
  padding: 0.4375rem;                              /* 10px visible, 24px tap target */
  background-color: rgb(255 255 255 / 0.45);
}
.header-slider.is-autoplay .swiper-pagination-bullet-active::after {
  content: "";
  position: absolute;
  inset: 0.4375rem;
  border-radius: 50%;
  background: conic-gradient(var(--c-white) calc(var(--autoplay-progress, 0) * 1turn), transparent 0);
}

.header-slider__autoplay {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  color: var(--c-white);
  font-size: 1rem;
}
.header-slider__autoplay[data-playing="true"] .header-slider__icon-play,
.header-slider__autoplay[data-playing="false"] .header-slider__icon-pause { display: none; }