/* GLASS-SLIDER | Version 3.0.0 | Tag: GS-300 */
/* =========================================================
   FLOATING / INVISIBLE SLIDER
   Zentrale Stellschrauben ganz oben.
   ========================================================= */

.hb-fashion-slider-section{
  /* Bühne */
  --hb-slider-height: clamp(560px, 74vh, 940px);
  --hb-slider-radius: 0px;
  --hb-stage-width: min(1600px, calc(100vw - 48px));
  --hb-media-inset: clamp(12px, 2vw, 28px);

  /* Typo */
  --hb-title-color: #262b31;            /* helles Anthrazit */
  --hb-title-size: clamp(64px, 9.2vw, 168px);
  --hb-title-weight: 900;
  --hb-title-line-height: .86;
  --hb-title-letter-spacing: -0.06em;

  /* Tiefe in der Typo-Animation */
  --hb-line-enter-y: 58px;
  --hb-line-enter-blur: 12px;
  --hb-line-shadow:
    0 8px 22px rgba(255,255,255,0.08),
    0 24px 44px rgba(0,0,0,0.10);

  /* Bild-Intro */
  --hb-image-enter-y: 18px;
  --hb-image-enter-blur: 4px;

  /* Progress */
  --hb-progress-gradient: linear-gradient(90deg, #20a0fa 0%, #7b5cff 55%, #ff3cd0 100%);
  --hb-progress-track: rgba(0,0,0,0.10);

  /* Navigation */
  --hb-nav-color: rgba(38,43,49,0.70);

  position: relative;
  width: var(--hb-stage-width);
  margin: clamp(16px, 3vw, 34px) auto clamp(40px, 6vw, 76px);
  background: transparent;
}

.hb-fashion-slider{
  position: relative;
  width: 100%;
  height: var(--hb-slider-height);
  border-radius: var(--hb-slider-radius);
  overflow: hidden;
  background: transparent;
}

.hb-fashion-slider,
.hb-fashion-slider .swiper-wrapper,
.hb-fashion-slider .swiper-slide{
  background: transparent !important;
}

.hb-slide{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: transparent;
}

.hb-media{
  position: absolute;
  inset: var(--hb-media-inset);
  background: transparent;
  pointer-events: none;
}

/* =========================================================
   HAUPTBILD
   - echte Zentrierung
   - vollständige Sichtbarkeit
   - keine künstliche Oversize-Fläche
   ========================================================= */
.hb-slide-img{
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center center;
  background: transparent;
  opacity: 0;
  filter: blur(var(--hb-image-enter-blur));
  will-change: transform, opacity, filter;
  transform:
    translate(-50%, -50%)
    translate3d(
      calc(clamp(-240px, var(--img-nudge-x, 0px), 240px) + var(--img-shift-x, 0px) + var(--img-wiggle-x, 0px)),
      calc(clamp(-180px, var(--img-nudge-y, 0px), 180px) + var(--img-shift-y, 0px) + var(--img-wiggle-y, 0px) + var(--hb-image-enter-y)),
      0
    )
    rotate(var(--img-rotate, 0deg))
    scale(calc(var(--img-scale, 100) / 100));
  transition:
    transform 1500ms cubic-bezier(.22,.61,.36,1),
    opacity 1000ms ease,
    filter 1000ms ease;
}

.hb-fashion-slider .swiper-slide-active .hb-slide-img{
  opacity: 1;
  filter: blur(0);
  transform:
    translate(-50%, -50%)
    translate3d(
      calc(clamp(-240px, var(--img-nudge-x, 0px), 240px) + var(--img-shift-x, 0px) + var(--img-wiggle-x, 0px)),
      calc(clamp(-180px, var(--img-nudge-y, 0px), 180px) + var(--img-shift-y, 0px) + var(--img-wiggle-y, 0px)),
      0
    )
    rotate(var(--img-rotate, 0deg))
    scale(calc(var(--img-scale, 100) / 100));
}

/* =========================================================
   OPTIONALE ZUSATZLAYER
   - pro Slide bis zu 3 frei zuschaltbare PNG-Layer
   - später einfach im HTML einkommentieren
   ========================================================= */
.hb-slide-layer{
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center center;
  background: transparent;
  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity, filter;
  transition:
    transform 1700ms cubic-bezier(.22,.61,.36,1),
    opacity 1000ms ease,
    filter 1000ms ease;
}

.hb-slide-layer--1{
  z-index: 2;
  transform:
    translate(-50%, -50%)
    translate3d(
      calc(clamp(-240px, var(--layer1-nudge-x, 0px), 240px) + var(--layer1-shift-x, 0px) + var(--layer1-wiggle-x, 0px)),
      calc(clamp(-180px, var(--layer1-nudge-y, 0px), 180px) + var(--layer1-shift-y, 0px) + var(--layer1-wiggle-y, 0px) + 24px),
      0
    )
    rotate(var(--layer1-rotate, 0deg))
    scale(calc(var(--layer1-scale, 100) / 100));
}

.hb-slide-layer--2{
  z-index: 3;
  transform:
    translate(-50%, -50%)
    translate3d(
      calc(clamp(-240px, var(--layer2-nudge-x, 0px), 240px) + var(--layer2-shift-x, 0px) + var(--layer2-wiggle-x, 0px)),
      calc(clamp(-180px, var(--layer2-nudge-y, 0px), 180px) + var(--layer2-shift-y, 0px) + var(--layer2-wiggle-y, 0px) + 18px),
      0
    )
    rotate(var(--layer2-rotate, 0deg))
    scale(calc(var(--layer2-scale, 100) / 100));
}

.hb-slide-layer--3{
  z-index: 4;
  transform:
    translate(-50%, -50%)
    translate3d(
      calc(clamp(-240px, var(--layer3-nudge-x, 0px), 240px) + var(--layer3-shift-x, 0px) + var(--layer3-wiggle-x, 0px)),
      calc(clamp(-180px, var(--layer3-nudge-y, 0px), 180px) + var(--layer3-shift-y, 0px) + var(--layer3-wiggle-y, 0px) + 14px),
      0
    )
    rotate(var(--layer3-rotate, 0deg))
    scale(calc(var(--layer3-scale, 100) / 100));
}

.hb-fashion-slider .swiper-slide-active .hb-slide-layer{
  opacity: 1;
  filter: blur(0);
}

.hb-fashion-slider .swiper-slide-active .hb-slide-layer--1{
  transform:
    translate(-50%, -50%)
    translate3d(
      calc(clamp(-240px, var(--layer1-nudge-x, 0px), 240px) + var(--layer1-shift-x, 0px) + var(--layer1-wiggle-x, 0px)),
      calc(clamp(-180px, var(--layer1-nudge-y, 0px), 180px) + var(--layer1-shift-y, 0px) + var(--layer1-wiggle-y, 0px)),
      0
    )
    rotate(var(--layer1-rotate, 0deg))
    scale(calc(var(--layer1-scale, 100) / 100));
}

.hb-fashion-slider .swiper-slide-active .hb-slide-layer--2{
  transform:
    translate(-50%, -50%)
    translate3d(
      calc(clamp(-240px, var(--layer2-nudge-x, 0px), 240px) + var(--layer2-shift-x, 0px) + var(--layer2-wiggle-x, 0px)),
      calc(clamp(-180px, var(--layer2-nudge-y, 0px), 180px) + var(--layer2-shift-y, 0px) + var(--layer2-wiggle-y, 0px)),
      0
    )
    rotate(var(--layer2-rotate, 0deg))
    scale(calc(var(--layer2-scale, 100) / 100));
}

.hb-fashion-slider .swiper-slide-active .hb-slide-layer--3{
  transform:
    translate(-50%, -50%)
    translate3d(
      calc(clamp(-240px, var(--layer3-nudge-x, 0px), 240px) + var(--layer3-shift-x, 0px) + var(--layer3-wiggle-x, 0px)),
      calc(clamp(-180px, var(--layer3-nudge-y, 0px), 180px) + var(--layer3-shift-y, 0px) + var(--layer3-wiggle-y, 0px)),
      0
    )
    rotate(var(--layer3-rotate, 0deg))
    scale(calc(var(--layer3-scale, 100) / 100));
}

/* =========================================================
   TEXTBLOCK
   - pro Slide frei positionierbar
   - kein Panel / keine Box
   ========================================================= */
.hb-copy{
  position: absolute;
  left: var(--copy-left, 5%);
  right: var(--copy-right, auto);
  top: var(--copy-top, auto);
  bottom: var(--copy-bottom, 8%);
  z-index: 10;
  width: max-content;
  max-width: min(86vw, 1160px);
  pointer-events: none;
  transform: translate3d(var(--copy-wiggle-x, 0px), var(--copy-wiggle-y, 0px), 0);
  transition: transform 1400ms cubic-bezier(.22,.61,.36,1);
}

.hb-headline{
  margin: 0;
  color: var(--hb-title-color);
  font-size: var(--hb-title-size);
  font-weight: var(--hb-title-weight);
  line-height: var(--hb-title-line-height);
  letter-spacing: var(--hb-title-letter-spacing);
  text-transform: none;
}

.hb-line{
  display: block;
  opacity: 0;
  text-shadow: var(--hb-line-shadow);
  will-change: transform, opacity, filter;
}

/* Zeile 1 */
.hb-line--1{
  --rest-x: var(--line1-x, 0px);
  --rest-y: var(--line1-y, 0px);
  transform: translate3d(var(--rest-x), calc(var(--rest-y) + var(--hb-line-enter-y)), 0) scale(.985);
  filter: blur(var(--hb-line-enter-blur));
  transition:
    transform var(--hb-line1-transform-duration, 1250ms) cubic-bezier(.18,.9,.24,1) var(--line1-delay, 0ms),
    opacity var(--hb-line1-opacity-duration, 950ms) ease var(--line1-delay, 0ms),
    filter var(--hb-line1-filter-duration, 950ms) ease var(--line1-delay, 0ms);
}

/* Zeile 2 */
.hb-line--2{
  --rest-x: var(--line2-x, 0px);
  --rest-y: var(--line2-y, 0px);
  transform: translate3d(var(--rest-x), calc(var(--rest-y) + var(--hb-line-enter-y)), 0) scale(.985);
  filter: blur(var(--hb-line-enter-blur));
  transition:
    transform var(--hb-line2-transform-duration, 1450ms) cubic-bezier(.18,.9,.24,1) var(--line2-delay, 140ms),
    opacity var(--hb-line2-opacity-duration, 1050ms) ease var(--line2-delay, 140ms),
    filter var(--hb-line2-filter-duration, 1050ms) ease var(--line2-delay, 140ms);
}

.hb-fashion-slider .swiper-slide-active .hb-line--1,
.hb-fashion-slider .swiper-slide-active .hb-line--2{
  opacity: 1;
  filter: blur(0);
}

.hb-fashion-slider .swiper-slide-active .hb-line--1{
  transform: translate3d(var(--rest-x), var(--rest-y), 0) scale(1);
}

.hb-fashion-slider .swiper-slide-active .hb-line--2{
  transform: translate3d(var(--rest-x), var(--rest-y), 0) scale(1);
}

/* =========================================================
   PROGRESS / NAV
   ========================================================= */
.hb-slider-progress{
  position: absolute;
  top: 10px;
  left: clamp(10px, 2vw, 22px);
  right: clamp(10px, 2vw, 22px);
  width: auto !important;
  height: 3px !important;
  border-radius: 999px;
  overflow: hidden;
  background: var(--hb-progress-track);
}

.hb-slider-progress .swiper-pagination-progressbar-fill{
  background: var(--hb-progress-gradient);
  border-radius: 999px;
}

.hb-slider-nav{
  width: 56px;
  height: 56px;
  color: var(--hb-nav-color);
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.hb-slider-nav::after{
  font-size: 32px;
  font-weight: 800;
}

.hb-slider-nav.swiper-button-prev{
  left: clamp(6px, 1.4vw, 16px);
}

.hb-slider-nav.swiper-button-next{
  right: clamp(6px, 1.4vw, 16px);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 991px){
  .hb-fashion-slider-section{
    --hb-stage-width: min(100vw - 24px, 1600px);
    --hb-slider-height: clamp(460px, 68vh, 760px);
    --hb-media-inset: clamp(8px, 1.8vw, 18px);
    --hb-title-size: clamp(48px, 9vw, 112px);
  }

  .hb-slider-nav{
    width: 46px;
    height: 46px;
  }

  .hb-slider-nav::after{
    font-size: 26px;
  }
}

@media (max-width: 640px){
  .hb-fashion-slider-section{
    --hb-slider-height: 72svh;
    --hb-title-size: clamp(38px, 11vw, 78px);
    --hb-media-inset: 8px;
    --hb-line-enter-y: 40px;
  }

  .hb-slider-nav.swiper-button-prev{
    left: 2px;
  }

  .hb-slider-nav.swiper-button-next{
    right: 2px;
  }
}

/* Consolidated from slider.variants.ref.css */
/* HB _SliderVarianten_01: Diese Referenz-CSS ergänzt vier unterschiedliche Slider-Typen für die Projekte-Seite, ohne die bestehende Fashion-Slider-Basis zu überschreiben. */

/* HB _SliderVarianten_03: Die Slider-Bühne wird auf Desktop stärker begrenzt, damit der Seitenraum klar sichtbar wird; mobil bleibt die Breite fast vollständig erhalten. */
.hb-fashion-slider-section,
.hb-variant-slider-section {
  width: min(1120px, calc(100vw - clamp(140px, 24vw, 460px)));
}

.hb-variant-slider-section {
  --hb-variant-height: clamp(460px, 68vh, 820px);
  --hb-variant-radius: 28px;
  --hb-variant-shadow: 0 28px 90px rgba(11, 12, 16, 0.16);
  --hb-variant-progress: linear-gradient(90deg, #20a0fa 0%, #7b5cff 55%, #ff3cd0 100%);
  --hb-variant-progress-track: rgba(11, 12, 16, 0.1);

  position: relative;
  margin: clamp(18px, 3vw, 36px) auto clamp(40px, 6vw, 76px);
}

.hb-variant-frame {
  position: relative;
  width: 100%;
  height: var(--hb-variant-height);
}

.hb-variant-slider {
  width: 100%;
  height: 100%;
}

/* HB _SliderVarianten_08: Die Zusatz-Slider werden visuell näher an den Fashion-Slider gezogen; klare Bühnenrahmen und dominante Slider-UI werden reduziert, ohne die eigentliche Slider-Logik zu entkernen. */
.hb-variant-slider-section .hb-slider-progress.swiper-pagination-progressbar {
  position: absolute;
  top: 18px;
  left: 18px;
  right: 18px;
  width: auto;
  height: 1px;
  background: rgba(11, 12, 16, 0.12);
  z-index: 14;
}

.hb-variant-slider-section .hb-slider-progress .swiper-pagination-progressbar-fill {
  background: var(--hb-variant-progress);
  opacity: 0.58;
}

.hb-variant-slider-section .hb-slider-nav {
  color: rgba(38, 43, 49, 0.52);
}

.hb-variant-slider-section .hb-slider-nav::after {
  font-size: 16px;
}

.hb-variant-slider-section--peek .hb-variant-frame {
  /* HB _SliderVarianten_04: Der Peek-Slider bekommt innen Luft fuer Nachbarslides, bleibt aber lokal gekappt, damit die Seite keinen horizontalen Overflow mehr erzeugt. */
  box-sizing: border-box;
  overflow: hidden;
  padding-inline: clamp(18px, 4vw, 56px);
}

.hb-variant-slider-section--peek .hb-variant-slider {
  overflow: visible;
}

.hb-variant-slider-section--peek .hb-variant-slide {
  width: min(72%, 920px);
  height: 100%;
  opacity: 0.55;
  filter: saturate(0.88);
  transition: transform 0.6s ease, opacity 0.6s ease, filter 0.6s ease;
}

.hb-variant-slider-section--peek .swiper-slide-active {
  opacity: 1;
  filter: none;
}

.hb-variant-slider-section--peek .hb-variant-label {
  color: #fff;
  text-shadow: 0 10px 30px rgba(0, 0, 0, 0.32);
}

.hb-variant-slider-section--peek .hb-variant-label-kicker {
  color: rgba(255, 255, 255, 0.84);
}

.hb-variant-slider-section--peek .hb-slider-nav {
  color: rgba(255, 255, 255, 0.9);
}

.hb-variant-slider-section--stack .hb-variant-frame {
  /* HB _SliderVarianten_06: Die Zusatz-Slider folgen jetzt enger den Original-Templates; externe Label entfallen und die eigentliche Slide-Struktur trägt wieder die Wirkung. */
  border-radius: 22px;
  overflow: hidden;
  background: #0e0f13;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}

.hb-stack-layer {
  position: absolute;
  inset: 0;
}

.hb-stack-layer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hb-stack-layer--bg {
  z-index: 1;
  filter: blur(8px) brightness(0.6);
}

.hb-stack-layer--bg img,
.hb-stack-layer--mid img {
  transform: scale(1.1);
}

.hb-stack-layer--mid {
  z-index: 2;
  opacity: 0.7;
}

.hb-stack-layer--fg {
  z-index: 3;
}

.hb-variant-slider-section--stack .swiper-slide-active .hb-stack-layer--fg img {
  transform: scale(1.15);
  transition: transform 1.2s ease;
}

.hb-variant-slider-section--fan .hb-variant-frame {
  /* HB _SliderVarianten_07: Shooting nutzt jetzt den originalen Fan-Stack-Charakter mit drei sichtbaren Karten statt des flächigen Stack-Aufbaus. */
  position: relative;
  overflow: visible;
  background: transparent;
  box-shadow: none;
}

.hb-variant-slider-section--fan .hb-variant-frame::before {
  display: none;
}

.hb-fan-stage {
  position: relative;
  width: 100%;
  height: 100%;
}

.hb-fan-card {
  position: absolute;
  width: 46%;
  aspect-ratio: 4 / 5;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
  border: 0;
  background: transparent;
}

.hb-fan-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hb-fan-card--left {
  display: none;
}

.hb-fan-card--center {
  left: 12%;
  top: 8%;
  width: 52%;
  transform: rotate(0deg) scale(1);
  z-index: 3;
}

.hb-fan-card--right {
  right: 10%;
  top: 20%;
  width: 38%;
  transform: rotate(11deg) scale(0.9);
}

.hb-variant-slider-section--fan .swiper-slide-active .hb-fan-card--center {
  animation: hbFanCenter 5.5s ease-in-out infinite;
}

.hb-variant-slider-section--fan .swiper-slide-active .hb-fan-card--right {
  animation: hbFanRight 6.2s ease-in-out infinite;
}

.hb-fan-label {
  position: absolute;
  left: 18px;
  bottom: 18px;
  z-index: 10;
}

.hb-fan-label h2 {
  margin: 0;
  color: #262b31;
  font-size: clamp(40px, 5.8vw, 96px);
  line-height: 0.78;
  letter-spacing: -0.08em;
  font-weight: 900;
  text-transform: uppercase;
}

.hb-fan-label div {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 700;
  opacity: 0.72;
}

/* HB _SliderHeadlines_03: Die Varianten-Slider uebernehmen fuer den Test
   dieselbe kleinere Headline-Groesse und die dunkle Push-Farbe. */
.hb-fan-label h2,
.hb-slot-title,
.hb-counter-title,
.hb-float-tag {
  color: #262b31;
  font-size: clamp(40px, 5.8vw, 96px);
}

@keyframes hbFanLeft {
  0%, 100% { transform: rotate(-16deg) translateY(0) scale(0.86); }
  50% { transform: rotate(-13deg) translateY(-8px) scale(0.88); }
}

@keyframes hbFanCenter {
  0%, 100% { transform: rotate(0deg) translateY(0) scale(1); }
  50% { transform: rotate(0deg) translateY(-12px) scale(1.03); }
}

@keyframes hbFanRight {
  0%, 100% { transform: rotate(16deg) translateY(0) scale(0.86); }
  50% { transform: rotate(13deg) translateY(-8px) scale(0.88); }
}

.hb-variant-halo {
  position: absolute;
  inset: -15%;
  pointer-events: none;
  filter: blur(70px);
  background:
    radial-gradient(circle at 15% 30%, rgba(250, 2, 240, 0.35), transparent 26%),
    radial-gradient(circle at 85% 70%, rgba(20, 176, 255, 0.35), transparent 26%);
}

.hb-peek-panel {
  position: relative;
  height: 100%;
  border-radius: 26px;
  overflow: hidden;
  background: #0b0d12;
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.35);
  transform: rotate(-2deg);
  transition: transform 0.8s ease;
}

.hb-variant-slider-section--peek .swiper-slide:nth-child(even) .hb-peek-panel {
  transform: rotate(2deg);
}

.hb-variant-slider-section--peek .swiper-slide-active .hb-peek-panel {
  transform: rotate(0deg) scale(1.02);
}

.hb-peek-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.06);
  transition: transform 1s ease;
}

.hb-variant-slider-section--peek .swiper-slide-active .hb-peek-photo {
  transform: scale(1.12);
}

.hb-peek-blob {
  position: absolute;
  border-radius: 999px;
  filter: blur(14px);
  mix-blend-mode: screen;
  opacity: 0.88;
}

.hb-peek-blob--1 {
  width: 180px;
  height: 180px;
  left: -40px;
  top: 16%;
  background: rgba(250, 2, 240, 0.35);
}

.hb-peek-blob--2 {
  width: 140px;
  height: 140px;
  right: -20px;
  bottom: 14%;
  background: rgba(20, 176, 255, 0.35);
}

.hb-variant-slider-section--slot .hb-variant-frame {
  overflow: visible;
  background: transparent;
  box-shadow: none;
}

.hb-slot-guide {
  position: absolute;
  left: 12%;
  right: 12%;
  height: 16px;
  z-index: 10;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.65), 0 1px 0 rgba(255, 255, 255, 0.05);
}

.hb-slot-guide--top {
  top: 12%;
}

.hb-slot-guide--bottom {
  bottom: 12%;
}

.hb-slot-light {
  position: absolute;
  left: 20%;
  right: 20%;
  top: 15%;
  bottom: 15%;
  z-index: 1;
  border-radius: 24px;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.06) 45%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(ellipse at 50% 50%, rgba(250, 2, 240, 0.12), transparent 55%),
    radial-gradient(ellipse at 50% 50%, rgba(20, 176, 255, 0.12), transparent 55%);
  filter: blur(10px);
  opacity: 0.38;
}

.hb-slot-stage {
  position: absolute;
  inset: 0;
}

.hb-slot-shadowcard {
  position: absolute;
  left: 16%;
  right: 16%;
  top: 18%;
  bottom: 18%;
  width: auto;
  border-radius: 18px;
  background: #000;
  opacity: 0.08;
  filter: blur(12px);
  transform: translate3d(calc(var(--mx, 0px) * -0.04), calc(var(--my, 0px) * -0.04), 0) scale(0.96);
}

/* HB _SliderVarianten_11: Der Schlagschatten der Slot-Karte wird fuer den
   aktuellen Test komplett entfernt, damit nur die eigentliche Karte wirkt. */
.hb-slot-shadowcard {
  display: none;
}

.hb-slot-card {
  position: absolute;
  left: 16%;
  right: 16%;
  top: 18%;
  bottom: 18%;
  width: auto;
  border-radius: 0;
  overflow: hidden;
  background: transparent;
  box-shadow: none;
  transform: translate3d(calc(var(--mx, 0px) * -0.09), calc(var(--my, 0px) * -0.09), 0);
}

.hb-slot-photo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  display: block;
  transform: none;
}

.hb-variant-slider-section--slot .swiper-slide-active .hb-slot-photo {
  transform: none;
}

.hb-slot-peek {
  position: absolute;
  left: 33%;
  bottom: 14.5%;
  z-index: 6;
  width: 34%;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.06));
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.12);
}

.hb-slot-caption {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 22px;
  z-index: 8;
  color: #fff;
  text-align: center;
}

.hb-slot-title {
  margin: 0;
  color: #262b31;
  font-size: clamp(40px, 5.8vw, 96px);
  line-height: 0.8;
  letter-spacing: -0.08em;
  font-weight: 900;
  text-transform: uppercase;
}

.hb-slot-sub {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 700;
  opacity: 0.78;
}

.hb-variant-slider-section--counter .hb-variant-frame {
  overflow: visible;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.hb-variant-slider-section--counter .hb-variant-frame::after {
  display: none;
}

.hb-counter-layer {
  position: absolute;
  overflow: hidden;
  border-radius: 22px;
  box-shadow: 0 22px 60px rgba(11, 12, 16, 0.16);
}

.hb-counter-layer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hb-counter-layer--a {
  inset: 12%;
  left: 8%;
  right: 36%;
  transform: rotate(-3deg);
}

.hb-counter-layer--b {
  left: 42%;
  right: 10%;
  top: 18%;
  bottom: 18%;
  transform: rotate(3deg);
}

.hb-counter-copy {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 10;
}

.hb-counter-kicker {
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.55;
  font-weight: 800;
}

.hb-counter-title {
  margin: 0;
  color: #262b31;
  font-size: clamp(40px, 5.8vw, 96px);
  line-height: 0.8;
  letter-spacing: -0.08em;
  font-weight: 900;
  text-transform: uppercase;
}

.hb-counter-sub {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 700;
  opacity: 0.72;
  max-width: 38ch;
}

.hb-variant-slider-section--float .hb-variant-frame {
  position: relative;
  overflow: visible;
  box-shadow: none;
  background: transparent;
}

.hb-variant-slider-section--float .hb-variant-frame::before,
.hb-variant-slider-section--float .hb-variant-frame::after {
  display: none;
}

.hb-float-bg {
  display: none;
}

.hb-float-card {
  position: absolute;
  border-radius: 22px;
  overflow: hidden;
  /* HB _SliderVarianten_09: Die Alltag-Karten bleiben als Ebenen erhalten, verlieren aber ihre feste Bühnenanmutung; Bilder werden ohne hartes Zuschneiden im jeweiligen Kartenraum gezeigt. */
  box-shadow: none;
  border: 0;
  transform-style: preserve-3d;
  transition: transform 0.8s ease, opacity 0.8s ease;
  background: transparent;
}

.hb-float-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  display: block;
}

.hb-float-card--back1 {
  left: 8%;
  top: 18%;
  width: 58%;
  aspect-ratio: 4 / 5;
  transform: rotate(-10deg) scale(0.82);
  opacity: 0.55;
  filter: blur(1px);
}

.hb-float-card--back2 {
  right: 10%;
  top: 12%;
  width: 58%;
  aspect-ratio: 4 / 5;
  transform: rotate(9deg) scale(0.78);
  opacity: 0.55;
  filter: blur(1px);
}

.hb-float-card--main {
  left: 18%;
  top: 10%;
  width: 64%;
  aspect-ratio: 4 / 5;
  transform: rotate(-2deg) scale(1);
}

.hb-variant-slider-section--float .swiper-slide-active .hb-float-card--main {
  animation: hbFloatMain 5s ease-in-out infinite;
}

.hb-variant-slider-section--float .swiper-slide-active .hb-float-card--back1 {
  animation: hbFloatBack1 6s ease-in-out infinite;
}

.hb-variant-slider-section--float .swiper-slide-active .hb-float-card--back2 {
  animation: hbFloatBack2 6.5s ease-in-out infinite;
}

.hb-float-tag {
  position: absolute;
  left: 20px;
  bottom: 20px;
  z-index: 20;
  color: #262b31;
  font-size: clamp(40px, 5.8vw, 96px);
  line-height: 0.84;
  letter-spacing: -0.06em;
  font-weight: 900;
  text-transform: uppercase;
  text-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

.hb-float-tag-small {
  display: block;
  font-size: clamp(14px, 1.6vw, 18px);
  letter-spacing: 0;
  text-transform: none;
  font-weight: 700;
  opacity: 0.85;
  margin-top: 10px;
}

@keyframes hbFloatMain {
  0%, 100% { transform: rotate(-2deg) translateY(0); }
  50% { transform: rotate(-2deg) translateY(-10px); }
}

@keyframes hbFloatBack1 {
  0%, 100% { transform: rotate(-10deg) translateY(0) scale(0.82); }
  50% { transform: rotate(-10deg) translateY(-6px) scale(0.82); }
}

@keyframes hbFloatBack2 {
  0%, 100% { transform: rotate(9deg) translateY(0) scale(0.78); }
  50% { transform: rotate(9deg) translateY(-8px) scale(0.78); }
}

@media (max-width: 960px) {
  .hb-fashion-slider-section,
  .hb-variant-slider-section {
    width: min(100%, calc(100vw - 24px));
  }

  .hb-variant-slider-section--peek .hb-variant-slide {
    width: min(82%, 680px);
  }

  .hb-variant-label strong {
    font-size: clamp(42px, 14vw, 84px);
  }

  .hb-slot-card,
  .hb-slot-shadowcard {
    left: 18%;
    width: 64%;
  }

  .hb-slot-peek {
    left: 24%;
    width: 52%;
  }

  .hb-counter-layer--a {
    right: 22%;
  }

  .hb-counter-layer--b {
    left: 30%;
  }

  .hb-float-card--back1,
  .hb-float-card--back2,
  .hb-float-card--main {
    width: 62%;
  }

  .hb-float-card--back1 {
    left: 4%;
  }

  .hb-float-card--back2 {
    right: 4%;
  }

  .hb-float-card--main {
    left: 19%;
  }

  /* HB _SliderHeadlines_04: Auch auf kleineren Screens bleiben die
     Varianten-Slider in derselben reduzierten Typogroesse wie die
     Fashion-basierten Slider. */
  .hb-fan-label h2,
  .hb-slot-title,
  .hb-counter-title,
  .hb-float-tag {
    font-size: clamp(24px, 9vw, 48px);
  }
}