/* DEPLA slider (hero + gallery). Contract: docs/build/komponenten.md
   Measured values from docs/referenz/slider and docs/analyse/design-tokens.md. */
.c-slider {
  --slider-fade: 700ms;
  --slider-ease-back: cubic-bezier(.6, -.28, .735, .045); /* easeInBack */
  --slider-ease-sine: cubic-bezier(.47, 0, .745, .715);   /* easeInSine */
  --slider-arrow-size: 100px;
  --slider-arrow-bg: rgba(0, 0, 0, .15);
  --slider-hero-h: 100vh; /* reference: full viewport height, starts below the header */
  --slider-hero-h-mobile: 490px;
  --slider-u: min(1px, 100vw / 1240); /* layer unit: base grid 1240 x 750 like the original */
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
@supports (height: 100svh) {
  .c-slider { --slider-hero-h: 100svh; }
}
.c-slider__track { position: relative; touch-action: pan-y; }
.c-slider__slide { position: relative; min-width: 0; }
.c-slider img { display: block; max-width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }

/* ---------- fade (hero) ---------- */
.c-slider--fade .c-slider__track,
.c-slider[data-slider="hero"] .c-slider__track { display: grid; height: 100%; }
.c-slider[data-slider="hero"] .c-slider__slide { grid-area: 1 / 1; }
.c-slider[data-slider="hero"]:not(.is-ready) .c-slider__slide:not(:first-child) { visibility: hidden; }
.c-slider--fade .c-slider__slide {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--slider-fade) ease, visibility 0s linear var(--slider-fade);
}
.c-slider--fade .c-slider__slide.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
  transition: opacity var(--slider-fade) ease, visibility 0s;
}

/* ---------- slide (gallery) ---------- */
.c-slider[data-slider="gallery"]:not(.is-ready) .c-slider__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}
.c-slider[data-slider="gallery"]:not(.is-ready) .c-slider__slide { flex: 0 0 100%; scroll-snap-align: start; }
.c-slider--slide .c-slider__track {
  display: flex;
  transition: transform var(--ease-gallery);
  will-change: transform;
}
.c-slider--slide .c-slider__slide { flex: 0 0 100%; }
.c-slider--slide .c-slider__slide img { width: 100%; }
.c-slider.is-dragging .c-slider__track { transition: none; cursor: grabbing; }

/* ---------- hero ---------- */
.c-slider[data-slider="hero"] {
  height: var(--slider-hero-h);
  min-height: 400px;
  background: var(--color-secondary);
  color: var(--color-white);
}
.c-slider__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  object-position: center top;
}
.c-slider__layers {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  max-width: var(--container-max);
  margin-inline: auto;
  pointer-events: none;
}
.c-slider__layers > * { pointer-events: auto; }
/* vertical position: --layer-y in the 750 px base grid, centred like the original (y 200 / 265 / 450) */
.c-slider__title,
.c-slider__subtitle,
.c-slider__scroll {
  position: absolute;
  top: calc(50% + (var(--layer-y) - 375) * var(--slider-u));
  left: var(--container-pad);
  margin: 0;
}
.c-slider__title,
.c-slider__subtitle { right: var(--container-pad); color: inherit; }
.c-slider__title {
  --layer-y: 200;
  font: var(--fw-bold) max(22px, 50 * var(--slider-u)) / 1.1 var(--font-heading);
}
.c-slider__subtitle {
  --layer-y: 265;
  font: var(--fw-light) max(14px, 30 * var(--slider-u)) / 1.3 var(--font-body);
}
.c-slider__subtitle--large { font-size: max(14px, 35 * var(--slider-u)); }
.c-slider__scroll {
  --layer-y: 450;
  display: grid;
  place-items: center;
  width: 80px;
  height: 80px;
  border-radius: var(--radius-circle);
  background: var(--color-primary);
  color: var(--color-white);
  transition: opacity var(--ease-fast);
}
.c-slider__scroll:hover { opacity: var(--hover-opacity); }
.c-slider__scroll svg { width: 44px; height: 44px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.c-slider__scroll:has(img) { background: none; }
.c-slider__scroll img { width: 100%; height: 100%; }

/* layer motion: data-layer="left|bottom|fade", --layer-delay / --layer-duration from data attributes */
.c-slider.is-ready .c-slider__layer {
  animation: c-slider-out 500ms var(--slider-ease-sine) both;
}
.c-slider.is-ready .is-active .c-slider__layer {
  animation: c-slider-fade var(--layer-duration, 600ms) var(--slider-ease-back) var(--layer-delay, 0ms) both;
}
.c-slider.is-ready .is-active .c-slider__layer[data-layer="left"] { animation-name: c-slider-from-left; }
.c-slider.is-ready .is-active .c-slider__layer[data-layer="bottom"] { animation-name: c-slider-from-bottom; }
.c-slider.is-ready .is-leaving .c-slider__layer[data-layer="left"] { animation-name: c-slider-to-left; }
.c-slider.is-ready .is-leaving .c-slider__layer[data-layer="bottom"] { animation-name: c-slider-to-bottom; }
@keyframes c-slider-from-left { from { opacity: 0; transform: translateX(-100vw); } to { opacity: 1; transform: none; } }
@keyframes c-slider-from-bottom { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: none; } }
@keyframes c-slider-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes c-slider-to-left { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(-50px); } }
@keyframes c-slider-to-bottom { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(100vh); } }
@keyframes c-slider-out { from { opacity: 1; } to { opacity: 0; } }

/* ---------- arrows ---------- */
.c-slider__arrow,
.c-slider__toggle {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  color: var(--color-white);
  background: var(--slider-arrow-bg);
  transition: opacity var(--ease-base), background-color var(--ease-base), color var(--ease-base);
}
.c-slider__arrow {
  top: 50%;
  width: var(--slider-arrow-size);
  height: var(--slider-arrow-size);
  transform: translateY(-50%);
}
.c-slider__arrow--prev { left: 0; }
.c-slider__arrow--next { right: 0; }
.c-slider__arrow svg,
.c-slider__toggle svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.c-slider__toggle svg { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.c-slider__arrow:hover,
.c-slider__arrow:focus-visible { background: var(--color-white); color: var(--color-heading); }
.c-slider__arrow:disabled { opacity: .3 !important; cursor: default; }
.c-slider__toggle { right: 20px; bottom: 20px; width: 40px; height: 40px; }
.c-slider__arrow:focus-visible,
.c-slider__toggle:focus-visible,
.c-slider__bullet:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.c-slider.has-arrows-hover .c-slider__arrow,
.c-slider .c-slider__toggle { opacity: 0; }
.c-slider.has-arrows-hover:hover .c-slider__arrow,
.c-slider.has-arrows-hover:focus-within .c-slider__arrow,
.c-slider:hover .c-slider__toggle,
.c-slider:focus-within .c-slider__toggle { opacity: 1; }
@media (hover: none) {
  .c-slider.has-arrows-hover .c-slider__arrow { opacity: 1; --slider-arrow-size: 50px; }
}

/* timer bar (reference: 5px, white 50 %, bottom edge) */
.c-slider__progress {
  position: absolute;
  z-index: 2;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 5px;
  background: var(--color-white-50);
  transform-origin: left;
  pointer-events: none;
  animation: c-slider-progress var(--slider-autoplay, 6000ms) linear both;
}
.c-slider.is-paused .c-slider__progress { animation-play-state: paused; }
@keyframes c-slider-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- bullets (gallery) ---------- */
.c-slider__bullets {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 12px;           /* Punktmitte 24 px ueber der Bildunterkante (messestaende/375-full.png) */
  display: flex;
  justify-content: center;
}
.c-slider__bullet {
  width: 20px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.c-slider__bullet::before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  margin: auto;
  border-radius: var(--radius-circle);
  background: var(--color-white-50);
  transition: background-color var(--ease-base);
}
.c-slider__bullet[aria-current="true"]::before { background: transparent; box-shadow: inset 0 0 0 2px var(--color-white); }

/* ---------- mobile ---------- */
@media (max-width: 767px) {
  .c-slider { --slider-hero-h: var(--slider-hero-h-mobile); }
  .c-slider[data-slider="hero"] { min-height: 0; }
  /* Reference 375: the live site hides the slider on mobile (hide-mobile) and shows a static header
     instead (separate element). This is only a fallback if a hero slider is rendered on mobile anyway:
     height and layer lines as measured on that static header (subtitle 38 %, button 47 %). */
  .c-slider__title,
  .c-slider__subtitle { left: var(--container-pad-mobile); right: var(--container-pad-mobile); }
  .c-slider__title { top: auto; bottom: 62%; }
  .c-slider__subtitle { top: 38%; }
  .c-slider__scroll { top: 47%; left: var(--container-pad-mobile); }
}

@media (prefers-reduced-motion: reduce) {
  .c-slider .c-slider__track,
  .c-slider--fade .c-slider__slide { transition: none; }
  .c-slider.is-ready .c-slider__layer,
  .c-slider.is-ready .is-active .c-slider__layer { animation: none !important; opacity: 1; transform: none; }
}