/* =========================================================
   GMZ STUDIOS — Slider (Startseite & Galerie)
   ========================================================= */

.slider {
  --dur: 7000ms;
  position: relative; overflow: hidden; isolation: isolate;
  height: min(86vh, 800px); min-height: 560px;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: #000; user-select: none; touch-action: pan-y;
}
.slider__slide {
  position: absolute; inset: 0; z-index: 0;
  visibility: hidden; clip-path: inset(0 0 0 100%);
  display: flex; align-items: center;
}
.slider[data-dir="prev"] .slider__slide:not(.is-active):not(.is-leaving) { clip-path: inset(0 100% 0 0); }
.slider__slide.is-active { visibility: visible; z-index: 2; clip-path: inset(0 0 0 0); transition: clip-path 1.2s var(--ease); }
.slider__slide.is-leaving { visibility: visible; z-index: 1; clip-path: inset(0 0 0 0); }

/* Hintergrund / Visual */
.slider__media { position: absolute; inset: 0; transform: scale(1.12); transition: transform 1.2s var(--ease), filter 1.2s var(--ease); }
.slider__slide.is-active .slider__media { transform: scale(1); transition: transform 8s linear; }
.slider__slide.is-leaving .slider__media { transform: scale(.94) translateX(-6%); filter: brightness(.3); }
.slider__slide::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.6) 40%, rgba(0,0,0,.05) 75%),
              linear-gradient(0deg, rgba(0,0,0,.7), transparent 40%);
}

/* Inhalt mit gestaffeltem Einflug */
.slider__content { position: relative; z-index: 3; width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; padding-bottom: 60px; }
.slider__content > * { max-width: 560px; opacity: 0; transform: translateY(40px); transition: opacity .5s, transform .5s; }
.slider__slide.is-active .slider__content > * {
  opacity: 1; transform: none;
  transition: opacity 1s var(--ease), transform 1.1s var(--ease);
  transition-delay: calc(.45s + var(--i, 0) * .09s);
}
.slider__content > :nth-child(1) { --i: 0; }
.slider__content > :nth-child(2) { --i: 1; }
.slider__content > :nth-child(3) { --i: 2; }
.slider__content > :nth-child(4) { --i: 3; }
.slider__content > :nth-child(5) { --i: 4; }
.slider__kicker { display: flex; gap: 12px; align-items: center; margin-bottom: 22px; }
.slider__title { font-size: clamp(56px, 9vw, 128px); line-height: .9; letter-spacing: .03em; margin: 0 0 22px; }
.slider__content > .slider__title { max-width: 820px; }
.slider__title--sm { font-size: clamp(40px, 5.6vw, 80px); letter-spacing: 0; }
.slider .keyart__hud { inset: 20px 24px 120px; }
.slider__content p { font-size: clamp(16px, 1.5vw, 19px); margin-bottom: 32px; color: #c4c4cc; }

/* UI: Zähler, Fortschrittsbalken, Pfeile */
.slider__ui {
  position: absolute; z-index: 5; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: 28px;
  padding: 24px clamp(20px, 3vw, 40px);
}
.slider__count { font-family: var(--font-mono); font-size: 12px; letter-spacing: .16em; color: var(--muted); white-space: nowrap; }
.slider__count b { font-family: var(--font-display); font-weight: 300; font-size: 30px; color: #fff; letter-spacing: 0; margin-right: 6px; display: inline-block; min-width: 1.4em; }
.slider__dots { flex: 1; display: flex; gap: 10px; }
.slider__dot { flex: 1; height: 28px; position: relative; text-align: left; }
.slider__dot::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(255,255,255,.2); }
.slider__dot i { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: #fff; box-shadow: 0 0 8px #fff; transform-origin: 0 50%; transform: scaleX(0); }
.slider__dot.is-done i { transform: scaleX(1); }
.slider__dot.is-active i { animation: sliderFill var(--dur) linear forwards; }
.slider.is-paused .slider__dot.is-active i { animation-play-state: paused; }
.slider.no-autoplay .slider__dot.is-active i { animation: none; transform: scaleX(1); }
.slider__dot span {
  position: absolute; left: 0; bottom: 100%; font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em;
  color: var(--faint); text-transform: uppercase; white-space: nowrap; transition: color .3s;
}
.slider__dot.is-active span, .slider__dot:hover span { color: #fff; }
@keyframes sliderFill { to { transform: scaleX(1); } }
.slider__arrows { display: flex; gap: 10px; }
.slider__arrow {
  width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line-strong);
  display: grid; place-items: center; background: rgba(0,0,0,.35); backdrop-filter: blur(6px);
  transition: background .3s, border-color .3s, color .3s;
}
.slider__arrow:hover { background: #fff; border-color: #fff; color: #000; }
.slider__arrow svg { width: 18px; height: 18px; }

/* Slide-Visuals */
.sv-studio { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(circle at 70% 50%, #15151b, #000 65%); }
.sv-studio__wrap { position: absolute; left: 70%; top: 50%; transform: translate(-50%, -50%); width: min(560px, 70vw); aspect-ratio: 1; display: grid; place-items: center; }
.sv-studio__wrap img { width: 34%; filter: drop-shadow(0 0 28px rgba(255,255,255,.5)); position: relative; }
.sv-studio__wrap span { position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; }
.sv-studio__wrap span:nth-child(2) { inset: 12%; border-style: dashed; animation: spinPlain 50s linear infinite; }
.sv-studio__wrap span:nth-child(3) { inset: 24%; border-color: rgba(255,255,255,.3); animation: spinPlain 30s linear infinite reverse; border-top-color: #fff; }

.sv-waves { position: absolute; inset: 0; background: radial-gradient(circle at 70% 55%, #121218, #000 60%); }
.sv-waves span {
  position: absolute; left: 70%; top: 55%; width: 120px; height: 120px; margin: -60px 0 0 -60px;
  border: 1px solid rgba(255,255,255,.5); border-radius: 50%;
  animation: wave 4s var(--ease) infinite;
}
.sv-waves span:nth-child(2) { animation-delay: 1s; }
.sv-waves span:nth-child(3) { animation-delay: 2s; }
.sv-waves span:nth-child(4) { animation-delay: 3s; }
.sv-waves b {
  position: absolute; left: 70%; top: 55%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 30px 6px rgba(255,255,255,.5);
}
.sv-waves i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.7); animation: blink 2.4s infinite; }
@keyframes wave { from { transform: scale(.2); opacity: 1; } to { transform: scale(6); opacity: 0; } }

.sv-locked { position: absolute; inset: 0; background: repeating-linear-gradient(45deg, #07070a 0 18px, #0c0c10 18px 36px); }
.sv-locked__stamp {
  position: absolute; left: 70%; top: 50%; transform: translate(-50%, -50%) rotate(-8deg);
  border: 2px solid rgba(255,255,255,.7); padding: 14px 26px;
  font-family: var(--font-mono); font-size: clamp(22px, 3vw, 40px); letter-spacing: .3em; color: #fff;
  text-shadow: 0 0 20px rgba(255,255,255,.4); animation: stampFlicker 5s linear infinite;
}
@keyframes stampFlicker { 0%, 92%, 96%, 100% { opacity: 1; } 94% { opacity: .2; } }

/* Galerie-Variante */
.slider--gallery { height: min(72vh, 680px); min-height: 380px; }
.slider--gallery .slider__slide::after { background: linear-gradient(0deg, rgba(0,0,0,.88), transparent 50%), linear-gradient(90deg, rgba(0,0,0,.55), transparent 55%); }
.slider--gallery .slider__content { align-self: flex-end; padding-bottom: 110px; }
.slider--gallery .keyart__rings { left: 50%; top: 50%; }

@media (max-width: 860px) {
  .slider { height: 88svh; min-height: 540px; }
  .slider__slide { align-items: flex-end; }
  .slider__slide::after { background: linear-gradient(0deg, rgba(0,0,0,.95) 20%, rgba(0,0,0,.4) 60%, rgba(0,0,0,.1)); }
  .slider__content { padding-bottom: 150px; }
  .slider__content .btn-row .btn { --h: 46px; }
  .sv-studio__wrap, .sv-waves span, .sv-waves b, .sv-locked__stamp { left: 50% !important; top: 34% !important; }
  .slider__ui { flex-wrap: wrap; gap: 14px 20px; }
  .slider__dots { order: 3; flex-basis: 100%; }
  .slider__dot span { display: none; }
  .slider__arrows { margin-left: auto; }
  .slider__arrow { width: 44px; height: 44px; }
}