/*** T3SB identifier: t3sbs_footerSticky */

html {
	position:relative;
	min-height:100%
}
#page-footer {
	position:absolute;
	bottom:0;
	width:100%
}



/*** T3SB identifier: t3sbsCSSassets_173 */

/* t3sbs_assets_173 */
/* ================================================================
   AVATARI – RETROWAVE CAROUSEL  ✦  carousel-retrowave.css
   Einfügen via: <link rel="stylesheet" href="carousel-retrowave.css">
   ================================================================ */

/* ── Tokens ──────────────────────────────────────────────────── */
:root {
  --rw-cyan:     #32fbe2;
  --rw-magenta:  #ea39b8;
  --rw-orange:   #ff7a45;
  --rw-purple:   #bf00ff;
  --rw-bg:       #0d0920;
  --rw-grid:     rgba(50, 251, 226, 0.07)
  --rw-border:   rgba(234, 57, 184, 0.55);
  --rw-glow-m:   rgba(234, 57, 184, 0.6);
  --rw-glow-c:   rgba(50, 251, 226, 0.45);
  --rw-glow-o:   rgba(255, 122, 69, 0.5);
  --rw-transition: 0.7s cubic-bezier(0.77, 0, 0.175, 1);
}

/* ── Schriftart ──────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Iceland&family=Orbitron:wght@400;700;900&display=swap');

/* ================================================================
   1. WRAPPER / CONTAINER
   ================================================================ */
.carousel-container {
  position: relative;
  padding: 3rem 0 2rem;
  background:
    radial-gradient(ellipse 120% 60% at 50% -10%, rgba(234, 57, 184, .18), transparent 65%),
    radial-gradient(ellipse 80% 50% at 90% 5%,  rgba(50, 251, 226, .12), transparent 55%),
    linear-gradient(180deg, #110826 0%, #0d0920 40%, #06101e 100%);
  overflow: hidden;
}

/* Retrowave-Raster am Boden */
.carousel-container::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 280px;
  background-image:
    linear-gradient(0deg,   var(--rw-grid) 1px, transparent 1px),
    linear-gradient(90deg,  var(--rw-grid) 1px, transparent 1px);
  background-size: 60px 60px;
  transform: perspective(600px) rotateX(55deg);
  transform-origin: bottom center;
  animation: gridPulse 4s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

/* Atmosphärischer Glüh-Horizont */
.carousel-container::after {
  content: '';
  position: absolute;
  bottom: 130px; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--rw-magenta) 20%,
    var(--rw-cyan)    50%,
    var(--rw-magenta) 80%,
    transparent 100%);
  box-shadow:
    0 0 12px 3px var(--rw-glow-m),
    0 0 30px 8px var(--rw-glow-c);
  animation: horizonFlicker 3s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes gridPulse {
  0%, 100% { opacity: .7; }
  50%       { opacity: 1;  }
}
@keyframes horizonFlicker {
  0%, 100% { opacity: .8; transform: scaleX(1);    }
  40%       { opacity: 1;  transform: scaleX(1.02); }
  60%       { opacity: .9; transform: scaleX(0.99); }
}

/* ================================================================
   2. ÜBERSCHRIFT
   ================================================================ */
.carousel-container .mainheader {
  font-family: 'Orbitron', 'Iceland', sans-serif !important;
  font-weight: 900 !important;
  font-size: clamp(1.8rem, 5vw, 3.5rem) !important;
  letter-spacing: .2em !important;
  text-align: center;
  text-transform: uppercase;
  background: linear-gradient(90deg,
    var(--rw-orange)   0%,
    var(--rw-magenta) 40%,
    var(--rw-cyan)    80%,
    var(--rw-orange)  100%) !important;
  background-size: 200% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  text-shadow: none !important;
  animation: gradientShift 5s linear infinite;
  position: relative;
  z-index: 20;
  margin-bottom: 1.5rem !important;
  /* Glow als drop-shadow – bewusst kleine Blur-Werte für Schärfe */
  filter:
    drop-shadow(0 0 3px rgba(234, 57, 184, .9))
    drop-shadow(0 0 8px rgba(50, 251, 226, .6))
    drop-shadow(0 0 16px rgba(255, 122, 69, .35));
}

@keyframes gradientShift {
  0%   { background-position: 0%   50%; }
  100% { background-position: 200% 50%; }
}

/* ================================================================
   3. DAS KARUSSELL-FRAME
   ================================================================ */
#carousel-169 {
  position: relative;
  z-index: 2;
  border-radius: 28px;
  box-shadow:
    0 0 0   1px rgba(255,255,255,.05),
    0 0 0   2px var(--rw-border),
    0 0  20px  6px var(--rw-glow-m),
    0 0  40px 12px var(--rw-glow-c),
    0 0  80px 20px rgba(50, 251, 226, .15);
  animation: framePulse 6s ease-in-out infinite;
  overflow: hidden;
}

@keyframes framePulse {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(255,255,255,.05),
      0 0 0 2px var(--rw-border),
      0 0 20px  6px var(--rw-glow-m),
      0 0 40px 12px var(--rw-glow-c),
      0 0 80px 20px rgba(50,251,226,.15);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(255,255,255,.08),
      0 0 0 2px rgba(50,251,226,.7),
      0 0 30px 10px var(--rw-glow-c),
      0 0 55px 18px var(--rw-glow-m),
      0 0 100px 28px rgba(234,57,184,.2);
  }
}

/* ================================================================
   4. BILD-SLIDES
   ================================================================ */
.carousel-item {
  transition: transform var(--rw-transition), opacity var(--rw-transition) !important;
}

/* Bild selbst */
.carousel-item figure,
.carousel-item picture,
.carousel-item img {
  display: block;
  width: 100%;
}

.carousel-item img {
  object-fit: cover;
  filter: saturate(1.15) contrast(1.05) brightness(0.92);
  transition: filter 0.5s ease, transform 8s ease;
}

/* Ken-Burns: leichtes Zoom-In beim aktiven Slide */
.carousel-item.active img {
  transform: scale(1.04);
  animation: kenBurns 8s ease forwards;
}

@keyframes kenBurns {
  from { transform: scale(1);    }
  to   { transform: scale(1.06); }
}

/* Retrowave Farbüberlagerung über dem Bild */
.carousel-item figure::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      transparent        35%,
      rgba(13,9,32,.3)   65%,
      rgba(13,9,32,.85) 100%
    ),
    linear-gradient(
      120deg,
      rgba(234,57,184,.12) 0%,
      transparent          50%,
      rgba(50,251,226,.10) 100%
    );
  pointer-events: none;
  z-index: 2;
}

/* CRT Scanlines-Overlay */
.carousel-item figure::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent         2px,
    rgba(0,0,0,.08) 2px,
    rgba(0,0,0,.08) 4px
  );
  pointer-events: none;
  z-index: 3;
  animation: scanMove 8s linear infinite;
}

@keyframes scanMove {
  from { background-position: 0 0;    }
  to   { background-position: 0 100%; }
}

/* Sanfter Farbshift beim Hover – kein Ruckel-Trigger */
#carousel-169:hover .carousel-item.active img {
  filter: saturate(1.3) contrast(1.08) brightness(0.95);
  transition: filter 0.6s ease;
}

/* ================================================================
   5. CAROUSEL CAPTION / SLIDE-LABEL
   ================================================================ */
.carousel-caption {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 10 !important;
  padding: 1.5rem 2rem 2rem !important;
}

/* Höhere Spezifizität via ID + Klasse, damit alle Vererbungen sicher brechen */
#carousel-169 .carousel-caption .mainheader {
  font-family: 'Orbitron', 'Iceland', sans-serif !important;
  font-size: clamp(1.2rem, 3vw, 2.2rem) !important;
  font-weight: 700 !important;
  letter-spacing: .15em !important;
  text-transform: uppercase;
  color: #ffffff !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  /* filter:none verhindert blur-Vererbung */
  filter: none !important;
  /* Enge Blur-Radien = scharfer Text mit Neon-Rand */
  text-shadow:
    0 0  0   #fff,
    0 0  1px #fff,
    0 0  6px var(--rw-cyan),
    0 0 10px var(--rw-magenta) !important;
  animation: captionNeon 3s ease-in-out infinite;
  position: relative;
  z-index: 15;
}

@keyframes captionNeon {
  0%, 100% {
    text-shadow:
      0 0  0   #fff,
      0 0  1px #fff,
      0 0  6px var(--rw-cyan),
      0 0 10px var(--rw-magenta);
  }
  50% {
    text-shadow:
      0 0  0   #fff,
      0 0  2px #fff,
      0 0  8px var(--rw-magenta),
      0 0 12px var(--rw-cyan);
  }
}

/* Neon-Linie unter dem Caption-Text */
.carousel-caption .vignette::after {
  content: '';
  display: block;
  height: 2px;
  width: 60%;
  margin: .5rem auto 0;
  background: linear-gradient(90deg,
    transparent,
    var(--rw-magenta) 30%,
    var(--rw-cyan)    70%,
    transparent);
  box-shadow: 0 0 8px 2px var(--rw-glow-m), 0 0 16px 4px var(--rw-glow-c);
  animation: lineSlide 3s ease-in-out infinite;
}

@keyframes lineSlide {
  0%, 100% { transform: scaleX(1);   opacity: .9; }
  50%       { transform: scaleX(1.1); opacity: 1;  }
}

/* ================================================================
   6. PREV / NEXT BUTTONS
   ================================================================ */
.carousel-control-prev,
.carousel-control-next {
  width: 60px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  height: 60px !important;
  border-radius: 50% !important;
  background: rgba(13, 9, 32, 0.65) !important;
  border: 2px solid transparent !important;
  background-clip: padding-box !important;
  box-shadow:
    0 0 0 2px var(--rw-border),
    0 0 12px 4px var(--rw-glow-m),
    0 0 24px 6px var(--rw-glow-c),
    inset 0 0 20px rgba(234,57,184,.15) !important;
  opacity: 0.75 !important;
  transition: opacity 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease !important;
  backdrop-filter: blur(6px);
  will-change: transform, box-shadow, opacity;
  align-items: center !important;
  justify-content: center !important;
  display: flex !important;
}

.carousel-control-prev { left: 1.5rem !important; }
.carousel-control-next { right: 1.5rem !important; }

.carousel-control-prev:hover,
.carousel-control-next:hover {
  opacity: 1 !important;
  transform: translateY(-50%) scale(1.12) !important;
  box-shadow:
    0 0 0 2px var(--rw-cyan),
    0 0 18px  6px var(--rw-glow-c),
    0 0 36px 12px var(--rw-glow-m),
    0 0 60px 18px rgba(50,251,226,.25),
    inset 0 0 30px rgba(50,251,226,.2) !important;
}

/* Icon ersetzen durch eigene Neon-Pfeile */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  width: 22px !important;
  height: 22px !important;
  background-image: none !important;
  position: relative;
}

.carousel-control-prev-icon::before,
.carousel-control-next-icon::before {
  content: '';
  display: block;
  width: 14px;
  height: 14px;
  border-top:  3px solid var(--rw-cyan);
  border-left: 3px solid var(--rw-cyan);
  filter: drop-shadow(0 0 4px var(--rw-cyan)) drop-shadow(0 0 8px var(--rw-magenta));
}

.carousel-control-prev-icon::before {
  transform: rotate(-45deg) translateX(4px);
}

.carousel-control-next-icon::before {
  transform: rotate(135deg) translateX(4px);
}

/* ================================================================
   7. INDIKATOREN (Dots)
   ================================================================ */
.carousel-indicators {
  z-index: 20 !important;
  gap: 10px !important;
  margin-bottom: 1.25rem !important;
}

.carousel-indicators button {
  width: 36px !important;
  height: 5px !important;
  border-radius: 3px !important;
  border: none !important;
  background: rgba(255,255,255,.2) !important;
  box-shadow: none !important;
  transition: all 0.4s ease !important;
  position: relative;
  overflow: hidden;
}

/* Energie-Füllung auf aktivem Dot */
.carousel-indicators button.active {
  background: transparent !important;
  box-shadow:
    0 0 6px 2px var(--rw-glow-m),
    0 0 12px 4px var(--rw-glow-c) !important;
}

.carousel-indicators button.active::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--rw-magenta), var(--rw-cyan));
  animation: dotFill 5s linear forwards;
  transform-origin: left center;
}

/* Timer-Animation – passend zum Intervall von 5 Sek */
@keyframes dotFill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.carousel-indicators button:hover:not(.active) {
  background: rgba(50,251,226,.4) !important;
  box-shadow: 0 0 8px 2px var(--rw-glow-c) !important;
  transform: scaleY(1.5) !important;
}

/* ================================================================
   8. NEON-CORNER-BRACKETS (Ecken-Deko)
   ================================================================ */
#carousel-169::before,
#carousel-169::after {
  content: '';
  position: absolute;
  width: 40px;
  height: 40px;
  z-index: 20;
  pointer-events: none;
}

/* Oben-Links */
#carousel-169::before {
  top: 8px; left: 8px;
  border-top:  2px solid var(--rw-cyan);
  border-left: 2px solid var(--rw-cyan);
  box-shadow:
    -3px -3px 10px var(--rw-glow-c),
     0    0   14px var(--rw-glow-c);
  animation: cornerGlow 3s ease-in-out infinite;
}

/* Unten-Rechts */
#carousel-169::after {
  bottom: 8px; right: 8px;
  border-bottom: 2px solid var(--rw-magenta);
  border-right:  2px solid var(--rw-magenta);
  box-shadow:
    3px 3px 10px var(--rw-glow-m),
    0   0   14px var(--rw-glow-m);
  animation: cornerGlow 3s ease-in-out infinite reverse;
}

@keyframes cornerGlow {
  0%, 100% { opacity: .6; }
  50%       { opacity: 1;  }
}

/* ================================================================
   9. SLIDE-ÜBERGANG: Cinematic Fade + leichte Y-Translation
   ================================================================ */
.carousel-item {
  transition:
    transform    .7s cubic-bezier(0.77, 0, 0.175, 1),
    opacity      .55s ease !important;
}

/* Bei .carousel-fade den Glitch verstärken */
.carousel.carousel-fade .carousel-item {
  opacity: 0 !important;
  transition: opacity .7s ease !important;
}
.carousel.carousel-fade .carousel-item.active {
  opacity: 1 !important;
}

/* ================================================================
   10. RESPONSIVE ANPASSUNGEN
   ================================================================ */
@media (max-width: 768px) {
  .carousel-control-prev,
  .carousel-control-next {
    width: 44px !important;
    height: 44px !important;
  }
  .carousel-control-prev { left: .5rem !important; }
  .carousel-control-next { right: .5rem !important; }

  .carousel-container::before {
    height: 160px;
    background-size: 40px 40px;
  }

  .carousel-container::after {
    bottom: 80px;
  }
}

/* ================================================================
   11. LOADING SHIMMER bei nicht geladenen Bildern
   ================================================================ */
.carousel-item:not(.active) img {
  opacity: 0;
  transition: opacity .5s ease .1s;
}
.carousel-item.active img {
  opacity: 1;
}

/* ================================================================
   12. Intro-Reveal beim Page-Load (kein filter – verhindert Konflikt)
   ================================================================ */
@keyframes introReveal {
  from { opacity: 0; transform: translateY(20px) scale(.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1);   }
}

#carousel-169 {
  animation:
    framePulse   6s  ease-in-out infinite,
    introReveal  .8s ease        forwards;
  will-change: box-shadow;
}