/* ========================================
   HERO.CSS - Hero-Bereich
   Kompletter Neuaufbau Schritt für Schritt nach Masterprompt
   ======================================== */

/* CSS-Variablen wurden nach css/variables.css verschoben */

/* ========================================
   SCHRITT 1: HERO CONTAINER BASIS
   Höhe: volle Viewport-Höhe (100vh)
   ======================================== */
.hero {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 100vh;
  min-height: 100vh;
  max-height: 100vh;
  overflow: hidden;
  overflow-x: hidden;
  overflow-y: hidden;
  /* KEINE Scrollbar im Hero-Bereich */
  z-index: 10;
  /* Über Hintergrundbild (z-index 1), Sonnenaufgang (z-index 2), Glasplatte (z-index 3) und traurigem Mann (z-index 4) */
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  display: block;
  /* Hintergrund entfernt - soll transparent sein wie Main-Bereich */
  background: transparent;
  background-image: none;
  filter: none;
  /* Sanfter Übergang oben - keine harte Kante */
  border-top: none;
  box-shadow: none;
}

/* Mobile Optimierung: Performance-Verbesserungen + Layout-Fixes */
@media (max-width: 768px) {
  .hero {
    background-attachment: scroll;
    background-position: center center;
    /* GPU-intensive Effekte deaktivieren */
    will-change: auto;
  }

  /* Filter-Effekte stark reduzieren auf Mobile */
  .hero-energy-veins {
    filter: blur(4px);
    opacity: 0.2;
    /* Animationen deaktivieren */
    animation: none;
  }

  .hero-particles-foreground {
    opacity: 0.3;
    filter: none;
    /* Animationen deaktivieren */
    animation: none;
  }

  .hero-particles {
    opacity: 0.2;
    /* Animationen deaktivieren */
    animation: none;
  }

  /* Hero-Sad-Man Filter stark reduzieren */
  .hero-sad-man {
    filter: brightness(1.05) contrast(1.05);
    /* Komplexe Drop-Shadows entfernen */
    /* GPU-intensive Effekte deaktivieren */
    will-change: auto;
  }

  /* Alle Partikel-Animationen deaktivieren auf Mobile */
  .hero-particles *,
  .hero-particles-foreground *,
  .hero-particles-background *,
  .hero-particles-middle * {
    animation: none;
    will-change: auto;
  }

  /* Hero-Content: Zentriert auf Mobile - wieder am Hero gebunden */
  .hero-content {
    position: absolute;
    left: 0;
    right: 0;
    max-width: 100%;
    top: calc(50% - 50px);
    /* 50px höher als vorher */
    z-index: 10;
    /* Über Glasplatte (z-index 7), Sonnenaufgang (z-index 4) und Hintergrundbild (z-index 3) */
    padding: clamp(1.5rem, 5vw, 2rem) clamp(1rem, 4vw, 1.5rem);
    align-items: center;
    overflow: visible;
    overflow-x: visible;
    overflow-y: visible;
    /* KEINE Höhenbeschränkung die Scrollbar verursachen könnte */
    height: auto;
    max-height: none;
    min-height: auto;
    text-align: center;
    gap: clamp(1rem, 3vw, 1.5rem);
    transform: translate3d(0, calc(-50% + var(--hero-content-shift, 0px)), 0);
    /* Scroll-Shift wieder aktiviert */
    opacity: var(--hero-content-opacity, 1);
  }

  /* Hero-Title: Textumbruch erlauben, optimierte Größe */
  .hero-title {
    white-space: normal;
    word-break: break-word;
    text-align: center;
    font-size: clamp(1.75rem, 6vw, 2.5rem);
    line-height: 1.3;
    margin-bottom: clamp(0.75rem, 2vw, 1rem);
    padding: 0 clamp(0.5rem, 2vw, 1rem);
  }

  /* Hero-Subline: Optimierte Größe und Abstände */
  .hero-subline {
    font-size: clamp(0.95rem, 3vw, 1.15rem);
    line-height: 1.6;
    margin-bottom: clamp(1rem, 3vw, 1.5rem);
    padding: 0 clamp(0.5rem, 2vw, 1rem);
    max-width: 100%;
  }

  /* Hero-Stats: Vertikal stapeln auf Mobile */
  .hero-stats {
    flex-direction: column;
    flex-wrap: wrap;
    gap: clamp(0.75rem, 2vw, 1rem);
    margin-left: 0;
    margin-top: clamp(1rem, 3vw, 1.5rem);
    margin-bottom: clamp(1rem, 3vw, 1.5rem);
    width: 100%;
    align-items: center;
    padding: 0 clamp(0.5rem, 2vw, 1rem);
  }

  .hero .hero-stats {
    margin-left: 0;
  }

  /* Stat-Items: Volle Breite auf Mobile, optimierte Größe */
  .hero .hero-stats .stat-item {
    width: 100%;
    max-width: 300px;
    min-width: 0;
    padding: clamp(0.75rem, 2vw, 1rem) clamp(0.875rem, 2.5vw, 1.25rem);
    margin: 0;
  }

  /* Stat-Items: Font-Sizes optimiert */
  .hero .hero-stats .stat-item .stat-number {
    font-size: clamp(1.1rem, 3.5vw, 1.5rem);
    line-height: 1.2;
  }

  .hero .hero-stats .stat-item .stat-label {
    font-size: clamp(0.8rem, 2.5vw, 0.95rem);
    line-height: 1.4;
    margin-top: clamp(0.25rem, 1vw, 0.5rem);
  }

  /* Hero-CTA-Group: Volle Breite, vertikal stapeln */
  .hero-cta-group {
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    gap: clamp(0.75rem, 2vw, 1rem);
    margin-top: clamp(1rem, 3vw, 1.5rem);
    margin-bottom: clamp(1rem, 3vw, 1.5rem);
    padding: 0 clamp(0.5rem, 2vw, 1rem);
  }

  .hero .hero-content .hero-cta-group {
    min-width: 0;
    max-width: 100%;
    flex-direction: column;
  }

  /* CTA-Buttons: Volle Breite auf Mobile, optimierte Größe */
  .hero-cta-group .cta-button,
  .hero .hero-content .hero-cta-group .cta-button {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: clamp(0.875rem, 2.5vw, 1rem) clamp(1.25rem, 4vw, 1.75rem);
    font-size: clamp(0.875rem, 2.5vw, 1rem);
    min-height: clamp(44px, 5vw, 50px);
    gap: clamp(0.5rem, 1.5vw, 0.75rem);
  }

  /* Hero-Progress: Volle Breite auf Mobile */
  .hero-progress {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-top: clamp(0.75rem, 2vw, 1rem);
    margin-bottom: clamp(0.75rem, 2vw, 1rem);
    padding: 0 clamp(0.5rem, 2vw, 1rem);
  }

  /* GPU-intensive Effekte deaktivieren */
  .hero * {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* Komplexe Box-Shadows reduzieren */
  .hero .glass-card,
  .hero .stat-item {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  }
}

/* Tablet Optimierung */
@media (min-width: 769px) and (max-width: 1024px) {
  .hero {
    background-position: center center;
  }
}

/* Hero-zu-Main Übergang - entfernt (deaktiviert) */

/* ========================================
   DUNKLE ÜBERLAGERUNG (.hero-dark-overlay)
   Entfernt (deaktiviert)
   ======================================== */

/* ========================================
   SCHRITT 2: EBENE A - FARBVERLAUF (::before)
   Entfernt (deaktiviert)
   ======================================== */

/* ========================================
   SCHRITT 3: EBENE B - NEBEL-VOLUMEN (.hero-fog-layer)
   Farbe: #0A1F2F, 4-7 Flächen, Größen 220-480px Breite, 120-260px Höhe
   Deckkraft: 0.06-0.10, Blur 8px
   Bewegung: Lineare Translation X-Achse, 6px/s, 120s Animation
   ======================================== */
.hero-fog-layer {
  /* Grauer Schleier entfernt - komplett deaktiviert */
  display: none;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  background: none;
  animation: none;
}

@keyframes atmosphericFogDrift {
  0% {
    transform: translateX(0) translateY(0);
    opacity: 0.3;
  }

  50% {
    transform: translateX(360px) translateY(-10px);
    opacity: 0.25;
  }

  100% {
    transform: translateX(720px) translateY(0);
    opacity: 0.3;
  }
}

/* ========================================
   SCHRITT 4: EBENE C - AZOTH-LICHTADERN (.hero-energy-veins)
   Linienbreite: 2-3px, unregelmäßige Kurven
   Farbe Kern: #EFFFFF, Verlauf: var(--color-primary)
   Glow: Blur 12px, Opacity 0.35, Spread 10px
   6-10 Linien, keine parallelen Linien, keine Rasterstruktur
   ======================================== */
.hero-energy-veins {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(ellipse 200% 150% at 30% 40%, transparent 0%, transparent 15%, var(--color-primary-25) 35%, transparent 50%, transparent 65%, transparent 80%),
    radial-gradient(ellipse 180% 120% at 70% 60%, transparent 0%, transparent 20%, var(--color-primary-24) 40%, transparent 55%, transparent 70%, transparent 85%),
    radial-gradient(ellipse 160% 100% at 50% 50%, transparent 0%, transparent 25%, var(--color-primary-23) 45%, transparent 60%, transparent 80%),
    radial-gradient(ellipse 220% 140% at 20% 70%, transparent 0%, transparent 18%, var(--color-primary-25) 38%, transparent 52%, transparent 75%),
    radial-gradient(ellipse 190% 130% at 80% 30%, transparent 0%, transparent 22%, var(--color-primary-24) 42%, transparent 58%, transparent 82%),
    radial-gradient(ellipse 170% 110% at 45% 80%, transparent 0%, transparent 20%, var(--color-primary-23) 40%, transparent 55%, transparent 78%);
  background-size: 200% 150%, 180% 120%, 160% 100%, 220% 140%, 190% 130%, 170% 110%;
  background-position: 30% 40%, 70% 60%, 50% 50%, 20% 70%, 80% 30%, 45% 80%;
  filter: blur(12px) drop-shadow(0 0 10px var(--color-primary-30));
  opacity: 0.45;
  animation: azothVeins 18s ease-in-out infinite;
  /* Performance-Optimierung - will-change nur bei aktiver Animation */
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  contain: layout style paint;
}

@keyframes azothVeins {

  0%,
  100% {
    opacity: 0.45;
    transform: scale(1) translateX(0) rotate(0deg);
    filter: blur(14px) drop-shadow(0 0 12px var(--color-primary-30)) drop-shadow(0 0 20px var(--color-primary-20));
  }

  25% {
    opacity: 0.55;
    transform: scale(1.03) translateX(5px) rotate(0.5deg);
    filter: blur(15px) drop-shadow(0 0 15px var(--color-primary-35)) drop-shadow(0 0 25px var(--color-primary-25));
  }

  50% {
    opacity: 0.6;
    transform: scale(1.05) translateX(8px) rotate(0deg);
    filter: blur(16px) drop-shadow(0 0 18px var(--color-primary-40)) drop-shadow(0 0 30px var(--color-primary-30));
  }

  75% {
    opacity: 0.55;
    transform: scale(1.03) translateX(5px) rotate(-0.5deg);
    filter: blur(15px) drop-shadow(0 0 15px var(--color-primary-35)) drop-shadow(0 0 25px var(--color-primary-25));
  }
}

/* ========================================
   SCHRITT 5: EBENE D - PARTIKEL-FELD (.hero-particles)
   ERSETZT durch azoth-particles-enhanced.css
   Neue Version: Scharfe Partikel (0.2px-1px), wirre Bewegungen,
   verschiedene Geschwindigkeiten, manche mit Blur
   ======================================== */
.hero-particles {
  /* Alte Definition entfernt - wird durch azoth-particles-enhanced.css ersetzt */
  /* Nur Basis-Styles bleiben */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  pointer-events: none;
  overflow: visible;
  /* will-change wird dynamisch von JavaScript gesetzt, wenn Partikel animiert werden */
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  contain: layout style paint;
  /* Partikel werden durch JavaScript in azoth-particles.js erstellt */
  background-image: none;
  background-size: none;
  background-position: none;
  background-repeat: no-repeat;
  opacity: 1;
  /* Animationen werden durch JavaScript auf einzelne Partikel angewendet */
  animation: none;
  filter: none;
}

/* Alte Partikel-Animationen entfernt - werden durch azoth-particles-enhanced.css ersetzt */

/* ========================================
   VORDERGRUND-PARTIKEL (.hero-particles-foreground)
   Dezente Lichtkugeln im Vordergrund (über dem Mann)
   ======================================== */
.hero-particles-foreground {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 7;
  /* Über dem Mann (z-index 6), unter dem Content (z-index 10) */
  pointer-events: none;
  overflow: visible;
  /* Performance-Optimierung - will-change wird dynamisch von JavaScript gesetzt */
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  contain: layout style paint;
  /* Größere, sichtbarere Partikel im Vordergrund */
  background-image:
    radial-gradient(circle 6px at 20% 25%, var(--color-primary-18), transparent),
    radial-gradient(circle 7px at 35% 15%, var(--color-primary-20), transparent),
    radial-gradient(circle 5px at 50% 30%, var(--color-primary-16), transparent),
    radial-gradient(circle 8px at 65% 20%, var(--color-primary-22), transparent),
    radial-gradient(circle 6px at 80% 35%, var(--color-primary-19), transparent),
    radial-gradient(circle 7px at 25% 50%, var(--color-primary-18), transparent),
    radial-gradient(circle 5px at 40% 45%, var(--color-primary-16), transparent),
    radial-gradient(circle 6px at 55% 55%, var(--color-primary-19), transparent),
    radial-gradient(circle 8px at 70% 60%, var(--color-primary-22), transparent),
    radial-gradient(circle 6px at 85% 50%, var(--color-primary-18), transparent),
    radial-gradient(circle 7px at 15% 70%, var(--color-primary-20), transparent),
    radial-gradient(circle 5px at 30% 75%, var(--color-primary-16), transparent),
    radial-gradient(circle 6px at 45% 80%, var(--color-primary-19), transparent),
    radial-gradient(circle 7px at 60% 70%, var(--color-primary-18), transparent),
    radial-gradient(circle 5px at 75% 75%, var(--color-primary-16), transparent);
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  background-position: 20% 25%, 35% 15%, 50% 30%, 65% 20%, 80% 35%, 25% 50%, 40% 45%, 55% 55%, 70% 60%, 85% 50%, 15% 70%, 30% 75%, 45% 80%, 60% 70%, 75% 75%, 10% 40%, 45% 25%, 60% 45%, 30% 60%, 70% 35%, 50% 65%, 80% 60%, 20% 80%, 90% 25%, 5% 55%;
  background-repeat: no-repeat;
  opacity: 0.65;
  /* Erhöht für bessere Sichtbarkeit im Vordergrund */
  animation: particlesForegroundFloat 18s ease-in-out infinite, particlesForegroundTwinkle 4s ease-in-out infinite;
  filter: drop-shadow(0 0 6px var(--color-primary-30));
  /* Optimiert: Reduziert von 2 auf 1 drop-shadow, will-change wird dynamisch gesetzt */
}

@keyframes particlesForegroundFloat {

  0%,
  100% {
    transform: translateY(0) translateX(0) scale(1);
    opacity: 1;
  }

  25% {
    transform: translateY(-10px) translateX(5px) scale(1.05);
    opacity: 0.95;
  }

  50% {
    transform: translateY(-5px) translateX(-5px) scale(0.95);
    opacity: 0.9;
  }

  75% {
    transform: translateY(-12px) translateX(8px) scale(1.08);
    opacity: 0.95;
  }
}

@keyframes particlesForegroundTwinkle {

  0%,
  100% {
    opacity: 0.25;
    /* Dezenter */
    filter: drop-shadow(0 0 2px var(--color-primary-20));
  }

  50% {
    opacity: 0.35;
    /* Dezenter */
    filter: drop-shadow(0 0 4px var(--color-primary-25)) drop-shadow(0 0 8px var(--color-primary-15));
  }
}

/* ========================================
   KLEINE SCHLANGEN-BLITZE (.hero-god-rays)
   Hart dünne, 2-5cm lange Schlangen die sich durchs Bild schlängeln
   ======================================== */
.hero-god-rays {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
}

.snake {
  position: absolute;
  width: 2px;
  height: 30px;
  background: linear-gradient(to bottom,
      transparent 0%,
      var(--color-primary-50) 10%,
      var(--color-primary-70) 25%,
      var(--color-primary-60) 50%,
      var(--color-primary-70) 75%,
      var(--color-primary-50) 90%,
      transparent 100%);
  border-radius: 50%;
  filter: blur(0.3px) drop-shadow(0 0 1px var(--color-primary-60));
  opacity: 0;
  transform-origin: center center;
  animation: snakeSlitherDownRight 3s ease-in-out infinite;
}

.snake::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  border-radius: inherit;
  transform: translateX(3px) rotate(15deg);
  opacity: 0.6;
}

.snake::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  border-radius: inherit;
  transform: translateX(-3px) rotate(-15deg);
  opacity: 0.6;
}

/* Unterschiedliche Längen: 20px (2cm) bis 50px (5cm) - Random Richtungen */
.snake-1 {
  height: 25px;
  left: 8%;
  top: 12%;
  animation-delay: 0s;
  animation-duration: 2.8s;
  animation-name: snakeSlitherDownRight;
}

.snake-2 {
  height: 35px;
  left: 15%;
  top: 25%;
  animation-delay: 0.3s;
  animation-duration: 3.2s;
  animation-name: snakeSlitherDownLeft;
}

.snake-3 {
  height: 30px;
  left: 22%;
  top: 18%;
  animation-delay: 0.6s;
  animation-duration: 2.9s;
  animation-name: snakeSlitherRight;
}

.snake-4 {
  height: 45px;
  left: 28%;
  top: 35%;
  animation-delay: 0.9s;
  animation-duration: 3.5s;
  animation-name: snakeSlitherDownRight;
}

.snake-5 {
  height: 20px;
  left: 35%;
  top: 15%;
  animation-delay: 1.2s;
  animation-duration: 2.6s;
  animation-name: snakeSlitherLeft;
}

.snake-6 {
  height: 40px;
  left: 42%;
  top: 28%;
  animation-delay: 1.5s;
  animation-duration: 3.3s;
  animation-name: snakeSlitherUpRight;
}

.snake-7 {
  height: 30px;
  left: 48%;
  top: 22%;
  animation-delay: 1.8s;
  animation-duration: 3s;
  animation-name: snakeSlitherDownLeft;
}

.snake-8 {
  height: 50px;
  left: 55%;
  top: 40%;
  animation-delay: 2.1s;
  animation-duration: 3.8s;
  animation-name: snakeSlitherDiagonalRight;
}

.snake-9 {
  height: 25px;
  left: 62%;
  top: 16%;
  animation-delay: 2.4s;
  animation-duration: 2.7s;
  animation-name: snakeSlitherRight;
}

.snake-10 {
  height: 35px;
  left: 68%;
  top: 32%;
  animation-delay: 2.7s;
  animation-duration: 3.1s;
  animation-name: snakeSlitherDownRight;
}

.snake-11 {
  height: 30px;
  left: 75%;
  top: 20%;
  animation-delay: 0.2s;
  animation-duration: 2.9s;
  animation-name: snakeSlitherLeft;
}

.snake-12 {
  height: 40px;
  left: 82%;
  top: 38%;
  animation-delay: 0.5s;
  animation-duration: 3.4s;
  animation-name: snakeSlitherUpLeft;
}

.snake-13 {
  height: 25px;
  left: 12%;
  top: 45%;
  animation-delay: 0.8s;
  animation-duration: 2.8s;
  animation-name: snakeSlitherUpRight;
}

.snake-14 {
  height: 35px;
  left: 25%;
  top: 55%;
  animation-delay: 1.1s;
  animation-duration: 3.2s;
  animation-name: snakeSlitherDiagonalLeft;
}

.snake-15 {
  height: 45px;
  left: 38%;
  top: 62%;
  animation-delay: 1.4s;
  animation-duration: 3.6s;
  animation-name: snakeSlitherDownLeft;
}

.snake-16 {
  height: 30px;
  left: 52%;
  top: 50%;
  animation-delay: 1.7s;
  animation-duration: 3s;
  animation-name: snakeSlitherRight;
}

.snake-17 {
  height: 40px;
  left: 65%;
  top: 58%;
  animation-delay: 2s;
  animation-duration: 3.3s;
  animation-name: snakeSlitherUpLeft;
}

.snake-18 {
  height: 25px;
  left: 78%;
  top: 48%;
  animation-delay: 2.3s;
  animation-duration: 2.7s;
  animation-name: snakeSlitherLeft;
}

.snake-19 {
  height: 35px;
  left: 18%;
  top: 68%;
  animation-delay: 2.6s;
  animation-duration: 3.1s;
  animation-name: snakeSlitherDownRight;
}

.snake-20 {
  height: 30px;
  left: 45%;
  top: 72%;
  animation-delay: 2.9s;
  animation-duration: 2.9s;
  animation-name: snakeSlitherUpRight;
}

/* Nach unten rechts */
@keyframes snakeSlitherDownRight {
  0% {
    opacity: 0;
    transform: translateX(0) translateY(0) rotate(45deg);
  }

  10% {
    opacity: 0.8;
    transform: translateX(8px) translateY(8px) rotate(50deg);
  }

  20% {
    opacity: 0.9;
    transform: translateX(15px) translateY(15px) rotate(40deg);
  }

  30% {
    opacity: 0.85;
    transform: translateX(22px) translateY(22px) rotate(50deg);
  }

  40% {
    opacity: 0.8;
    transform: translateX(28px) translateY(28px) rotate(45deg);
  }

  50% {
    opacity: 0.7;
    transform: translateX(35px) translateY(35px) rotate(50deg);
  }

  60% {
    opacity: 0.5;
    transform: translateX(40px) translateY(40px) rotate(40deg);
  }

  70% {
    opacity: 0.3;
    transform: translateX(45px) translateY(45px) rotate(45deg);
  }

  80% {
    opacity: 0.1;
    transform: translateX(50px) translateY(50px) rotate(45deg);
  }

  100% {
    opacity: 0;
    transform: translateX(55px) translateY(55px) rotate(45deg);
  }
}

/* Nach unten links */
@keyframes snakeSlitherDownLeft {
  0% {
    opacity: 0;
    transform: translateX(0) translateY(0) rotate(-45deg);
  }

  10% {
    opacity: 0.8;
    transform: translateX(-8px) translateY(8px) rotate(-50deg);
  }

  20% {
    opacity: 0.9;
    transform: translateX(-15px) translateY(15px) rotate(-40deg);
  }

  30% {
    opacity: 0.85;
    transform: translateX(-22px) translateY(22px) rotate(-50deg);
  }

  40% {
    opacity: 0.8;
    transform: translateX(-28px) translateY(28px) rotate(-45deg);
  }

  50% {
    opacity: 0.7;
    transform: translateX(-35px) translateY(35px) rotate(-50deg);
  }

  60% {
    opacity: 0.5;
    transform: translateX(-40px) translateY(40px) rotate(-40deg);
  }

  70% {
    opacity: 0.3;
    transform: translateX(-45px) translateY(45px) rotate(-45deg);
  }

  80% {
    opacity: 0.1;
    transform: translateX(-50px) translateY(50px) rotate(-45deg);
  }

  100% {
    opacity: 0;
    transform: translateX(-55px) translateY(55px) rotate(-45deg);
  }
}

/* Nach rechts */
@keyframes snakeSlitherRight {
  0% {
    opacity: 0;
    transform: translateX(0) translateY(0) rotate(0deg);
  }

  10% {
    opacity: 0.8;
    transform: translateX(10px) translateY(2px) rotate(15deg);
  }

  20% {
    opacity: 0.9;
    transform: translateX(20px) translateY(-2px) rotate(-15deg);
  }

  30% {
    opacity: 0.85;
    transform: translateX(30px) translateY(3px) rotate(20deg);
  }

  40% {
    opacity: 0.8;
    transform: translateX(40px) translateY(-3px) rotate(-20deg);
  }

  50% {
    opacity: 0.7;
    transform: translateX(50px) translateY(2px) rotate(15deg);
  }

  60% {
    opacity: 0.5;
    transform: translateX(60px) translateY(-2px) rotate(-15deg);
  }

  70% {
    opacity: 0.3;
    transform: translateX(70px) translateY(1px) rotate(10deg);
  }

  80% {
    opacity: 0.1;
    transform: translateX(80px) translateY(0) rotate(0deg);
  }

  100% {
    opacity: 0;
    transform: translateX(90px) translateY(0) rotate(0deg);
  }
}

/* Nach links */
@keyframes snakeSlitherLeft {
  0% {
    opacity: 0;
    transform: translateX(0) translateY(0) rotate(180deg);
  }

  10% {
    opacity: 0.8;
    transform: translateX(-10px) translateY(2px) rotate(165deg);
  }

  20% {
    opacity: 0.9;
    transform: translateX(-20px) translateY(-2px) rotate(195deg);
  }

  30% {
    opacity: 0.85;
    transform: translateX(-30px) translateY(3px) rotate(160deg);
  }

  40% {
    opacity: 0.8;
    transform: translateX(-40px) translateY(-3px) rotate(200deg);
  }

  50% {
    opacity: 0.7;
    transform: translateX(-50px) translateY(2px) rotate(165deg);
  }

  60% {
    opacity: 0.5;
    transform: translateX(-60px) translateY(-2px) rotate(195deg);
  }

  70% {
    opacity: 0.3;
    transform: translateX(-70px) translateY(1px) rotate(170deg);
  }

  80% {
    opacity: 0.1;
    transform: translateX(-80px) translateY(0) rotate(180deg);
  }

  100% {
    opacity: 0;
    transform: translateX(-90px) translateY(0) rotate(180deg);
  }
}

/* Nach oben rechts */
@keyframes snakeSlitherUpRight {
  0% {
    opacity: 0;
    transform: translateX(0) translateY(0) rotate(135deg);
  }

  10% {
    opacity: 0.8;
    transform: translateX(8px) translateY(-8px) rotate(130deg);
  }

  20% {
    opacity: 0.9;
    transform: translateX(15px) translateY(-15px) rotate(140deg);
  }

  30% {
    opacity: 0.85;
    transform: translateX(22px) translateY(-22px) rotate(130deg);
  }

  40% {
    opacity: 0.8;
    transform: translateX(28px) translateY(-28px) rotate(135deg);
  }

  50% {
    opacity: 0.7;
    transform: translateX(35px) translateY(-35px) rotate(130deg);
  }

  60% {
    opacity: 0.5;
    transform: translateX(40px) translateY(-40px) rotate(140deg);
  }

  70% {
    opacity: 0.3;
    transform: translateX(45px) translateY(-45px) rotate(135deg);
  }

  80% {
    opacity: 0.1;
    transform: translateX(50px) translateY(-50px) rotate(135deg);
  }

  100% {
    opacity: 0;
    transform: translateX(55px) translateY(-55px) rotate(135deg);
  }
}

/* Nach oben links */
@keyframes snakeSlitherUpLeft {
  0% {
    opacity: 0;
    transform: translateX(0) translateY(0) rotate(-135deg);
  }

  10% {
    opacity: 0.8;
    transform: translateX(-8px) translateY(-8px) rotate(-130deg);
  }

  20% {
    opacity: 0.9;
    transform: translateX(-15px) translateY(-15px) rotate(-140deg);
  }

  30% {
    opacity: 0.85;
    transform: translateX(-22px) translateY(-22px) rotate(-130deg);
  }

  40% {
    opacity: 0.8;
    transform: translateX(-28px) translateY(-28px) rotate(-135deg);
  }

  50% {
    opacity: 0.7;
    transform: translateX(-35px) translateY(-35px) rotate(-130deg);
  }

  60% {
    opacity: 0.5;
    transform: translateX(-40px) translateY(-40px) rotate(-140deg);
  }

  70% {
    opacity: 0.3;
    transform: translateX(-45px) translateY(-45px) rotate(-135deg);
  }

  80% {
    opacity: 0.1;
    transform: translateX(-50px) translateY(-50px) rotate(-135deg);
  }

  100% {
    opacity: 0;
    transform: translateX(-55px) translateY(-55px) rotate(-135deg);
  }
}

/* Diagonal rechts (steiler) */
@keyframes snakeSlitherDiagonalRight {
  0% {
    opacity: 0;
    transform: translateX(0) translateY(0) rotate(30deg);
  }

  10% {
    opacity: 0.8;
    transform: translateX(12px) translateY(6px) rotate(35deg);
  }

  20% {
    opacity: 0.9;
    transform: translateX(24px) translateY(12px) rotate(25deg);
  }

  30% {
    opacity: 0.85;
    transform: translateX(36px) translateY(18px) rotate(35deg);
  }

  40% {
    opacity: 0.8;
    transform: translateX(48px) translateY(24px) rotate(30deg);
  }

  50% {
    opacity: 0.7;
    transform: translateX(60px) translateY(30px) rotate(35deg);
  }

  60% {
    opacity: 0.5;
    transform: translateX(72px) translateY(36px) rotate(25deg);
  }

  70% {
    opacity: 0.3;
    transform: translateX(84px) translateY(42px) rotate(30deg);
  }

  80% {
    opacity: 0.1;
    transform: translateX(96px) translateY(48px) rotate(30deg);
  }

  100% {
    opacity: 0;
    transform: translateX(108px) translateY(54px) rotate(30deg);
  }
}

/* Diagonal links (steiler) */
@keyframes snakeSlitherDiagonalLeft {
  0% {
    opacity: 0;
    transform: translateX(0) translateY(0) rotate(-30deg);
  }

  10% {
    opacity: 0.8;
    transform: translateX(-12px) translateY(6px) rotate(-35deg);
  }

  20% {
    opacity: 0.9;
    transform: translateX(-24px) translateY(12px) rotate(-25deg);
  }

  30% {
    opacity: 0.85;
    transform: translateX(-36px) translateY(18px) rotate(-35deg);
  }

  40% {
    opacity: 0.8;
    transform: translateX(-48px) translateY(24px) rotate(-30deg);
  }

  50% {
    opacity: 0.7;
    transform: translateX(-60px) translateY(30px) rotate(-35deg);
  }

  60% {
    opacity: 0.5;
    transform: translateX(-72px) translateY(36px) rotate(-25deg);
  }

  70% {
    opacity: 0.3;
    transform: translateX(-84px) translateY(42px) rotate(-30deg);
  }

  80% {
    opacity: 0.1;
    transform: translateX(-96px) translateY(48px) rotate(-30deg);
  }

  100% {
    opacity: 0;
    transform: translateX(-108px) translateY(54px) rotate(-30deg);
  }
}

/* ========================================
   SCHLANGEN IM VORDERGRUND (.hero-lightning-foreground)
   Zusätzliche Schlangen vor dem Mann
   ======================================== */
.hero-lightning-foreground {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 7;
  pointer-events: none;
  overflow: hidden;
}

.hero-lightning-foreground .snake {
  filter: blur(0.2px) drop-shadow(0 0 1.5px var(--color-primary-70));
}

/* Vordergrund-Schlangen mit höherer Opacity */
.snake-fg-1 {
  height: 30px;
  left: 20%;
  top: 15%;
  animation-delay: 0.1s;
  animation-duration: 2.7s;
  animation-name: snakeSlitherRight;
}

.snake-fg-2 {
  height: 40px;
  left: 35%;
  top: 30%;
  animation-delay: 0.4s;
  animation-duration: 3.1s;
  animation-name: snakeSlitherDownLeft;
}

.snake-fg-3 {
  height: 25px;
  left: 50%;
  top: 20%;
  animation-delay: 0.7s;
  animation-duration: 2.8s;
  animation-name: snakeSlitherUpRight;
}

.snake-fg-4 {
  height: 45px;
  left: 65%;
  top: 35%;
  animation-delay: 1s;
  animation-duration: 3.4s;
  animation-name: snakeSlitherDiagonalRight;
}

.snake-fg-5 {
  height: 30px;
  left: 80%;
  top: 25%;
  animation-delay: 1.3s;
  animation-duration: 2.9s;
  animation-name: snakeSlitherLeft;
}

.snake-fg-6 {
  height: 35px;
  left: 30%;
  top: 50%;
  animation-delay: 1.6s;
  animation-duration: 3.2s;
  animation-name: snakeSlitherUpLeft;
}

.snake-fg-7 {
  height: 40px;
  left: 55%;
  top: 60%;
  animation-delay: 1.9s;
  animation-duration: 3.3s;
  animation-name: snakeSlitherDownRight;
}

.snake-fg-8 {
  height: 30px;
  left: 70%;
  top: 55%;
  animation-delay: 2.2s;
  animation-duration: 3s;
  animation-name: snakeSlitherDiagonalLeft;
}

/* ========================================
   SCHRITT 6: EBENE E - VIGNETTE (.hero-vignette)
   Randabdunklung radial
   Zentrum: 0.0 Opacity, Außenrand: 0.8 Opacity
   Farbe: Schwarz (#000000)
   Übergang weich, Gaussian Blur 20px
   ======================================== */
.hero-vignette {
  /* Deaktivierte Animationen - Code entfernt */
}

@keyframes vignettePulse {

  0%,
  100% {
    opacity: 0.15;
    /* Reduziert für helleren Hero */
    filter: blur(25px);
  }

  50% {
    opacity: 0.12;
    /* Reduziert für helleren Hero */
    filter: blur(30px);
  }
}

/* ========================================
   ÜBERGANG ZUM UNTEREN BEREICH (.hero-transition)
   Sanfter Gradient-Übergang mit schräger Form für dynamischen Look
   Basierend auf Recherche: Gradient + schräge Form für fließenden Übergang
   ======================================== */
.hero-transition {
  /* Deaktivierte Animationen - Code entfernt */
}

/* ========================================
   SCHRITT 7: TRAURIGER MANN (.hero-sad-man)
   Bildquelle: HeroTraurig.png
   Position: absolute, Anchor: top-left, top: 0, left: 0
   Skalierung: width: 45vw, max-width: 860px, min-width: 520px
   z-index: 3
   Sichtbarer Bereich: Kopf und Helm vollständig sichtbar, Augenlinie auf ca. 28% der Hero-Höhe
   Schatten: drop-shadow(40px 0 80px rgba(0,0,0,0.6)) unterhalb der PNG-Form
   KEINE Border
   KEINE Transparenzverläufe am Bildrand
   ======================================== */
.hero-sad-man {
  position: fixed;
  /* EPISCHER EFFEKT: Trauriger Mann bleibt fixiert wie Hintergrund */
  top: 0;
  left: 0;
  z-index: 4;
  /* Hintergrundbild (Trauriger Mann) - über Hintergrund (z-index 1), Sonnenaufgang (z-index 2) und Glasplatte (z-index 3), unter Hero-Content (z-index 20) */
  height: 100vh;
  width: auto;
  object-fit: contain;
  object-position: left top;
  border: 0;
  border-width: 0;
  border-style: none;
  border-color: transparent;
  outline: 0;
  outline-width: 0;
  outline-style: none;
  outline-color: transparent;
  filter:
    blur(0.2px) brightness(1.0) contrast(1.15) saturate(1.25);
  /* Kein drop-shadow im Filter - Schatten über ::after */
  mix-blend-mode: normal;
  opacity: 1;
  /* Wird direkt von JavaScript überschrieben */
  margin: 0;
  padding: 0;
  transform-origin: left top;
  transform-style: preserve-3d;
  perspective: 1000px;
  /* Stärkere Perspektive für mehr 3D-Effekt */
  /* KEINE Animationen - alle Bewegungen entfernt */
  /* Performance-Optimierung: will-change nur bei Bedarf (wird von JavaScript gesetzt) */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* contain: style entfernt, da es display: none blockieren kann */
  /* Sanfte Transition für Fade-Out/In basierend auf Scroll-Fortschritt */
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              visibility 0.3s ease-out,
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  transform: translate3d(0, 0, 0);
  /* Schlagschatten über ::after Pseudo-Element - erbt Opacity vom Parent */
}

/* Klasse zum Verstecken des traurigen Mannes */
.hero-sad-man.hidden {
  display: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* Filter (Drop-Shadow) beibehalten auch beim Verstecken */
  filter:
    blur(0.2px) brightness(1.05) contrast(1.15) saturate(1.25) drop-shadow(50px 20px 60px rgba(0, 0, 0, 0.9)) drop-shadow(80px 40px 100px rgba(0, 0, 0, 0.7)) drop-shadow(120px 60px 150px rgba(0, 0, 0, 0.5));
}

.hero-sad-man.hidden::before {
  display: none;
  opacity: 0;
  visibility: hidden;
}

/* Kombinierte Animation: Atmung + Bewegung + 3D + Schatten + Kopf drehen + starkes Nicken */
/* WICHTIG: Bewegungen wurden reduziert, damit der metallische Helm stabiler wirkt */
/* Performance: Filter nur bei Bedarf, Transform für GPU-Beschleunigung */
@keyframes manComplete3D {

  /* Start: Ruheposition */
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg) rotateY(0deg) rotateX(0deg) scale(1) scaleY(1) scaleX(1);
    filter: blur(0.2px) brightness(1.05) contrast(1.15) saturate(1.25);
  }

  /* Einatmen + Kopf beginnt sich nach rechts zu drehen - Helm bewegt sich minimal */
  10% {
    transform: translate3d(0.3px, -0.5px, 15px) rotate(0.05deg) rotateY(1deg) rotateX(0.5deg) scale(1.001) scaleY(1.0005) scaleX(0.9998);
    filter: blur(0.2px) brightness(1.06) contrast(1.16) saturate(1.26);
  }

  /* Weiter einatmen + Kopf dreht sich stärker nach rechts + beginnt nach rechts zu nicken - Helm stabiler */
  20% {
    transform: translate3d(0, -1px, 25px) rotate(0deg) rotateY(2deg) rotateX(1.5deg) scale(1.003) scaleY(1.001) scaleX(0.9995);
    filter: blur(0.2px) brightness(1.07) contrast(1.17) saturate(1.27);
  }

  /* Höchster Punkt: voll eingeatmet + Kopf maximal nach rechts gedreht + stark nach rechts/unten genickt - Helm sehr stabil */
  30% {
    transform: translate3d(0, -1.5px, 35px) rotate(0deg) rotateY(3deg) rotateX(2.5deg) scale(1.005) scaleY(1.002) scaleX(0.999);
    filter: blur(0.2px) brightness(1.08) contrast(1.18) saturate(1.28);
  }

  /* Langsam zurück drehen + weiter nach rechts/unten nicken */
  40% {
    transform: translate3d(-0.3px, -1.2px, 18px) rotate(-0.05deg) rotateY(2deg) rotateX(2deg) scale(1.004) scaleY(1.0015) scaleX(0.9992);
    filter: blur(0.2px) brightness(1) contrast(1.15) saturate(1.22);
  }

  /* Ausatmen + Kopf dreht sich weiter zurück */
  50% {
    transform: translate3d(-0.3px, -1px, 15px) rotate(-0.05deg) rotateY(1deg) rotateX(1.5deg) scale(1.003) scaleY(1.001) scaleX(0.9995);
    filter: blur(0.2px) brightness(1) contrast(1.15) saturate(1.22);
  }

  /* Weiter ausatmen + Kopf dreht sich zurück zur Mitte */
  60% {
    transform: translate3d(0, -0.5px, 8px) rotate(0deg) rotateY(0.5deg) rotateX(0.8deg) scale(1.0015) scaleY(1.0005) scaleX(0.9998);
    filter: blur(0.2px) brightness(0.99) contrast(1.13) saturate(1.21);
  }

  /* Zurück zur Ruheposition */
  70% {
    transform: translate3d(0, 0, 0) rotate(0deg) rotateY(0deg) rotateX(0deg) scale(1) scaleY(1) scaleX(1);
    filter: blur(0.2px) brightness(0.98) contrast(1.12) saturate(1.2);
  }

  /* Leichte Gewichtsverlagerung - Helm bleibt stabil */
  80% {
    transform: translate3d(0.5px, -0.3px, 5px) rotate(0.08deg) rotateY(0.3deg) rotateX(0deg) scale(1.001) scaleY(1) scaleX(0.9999);
    filter: blur(0.2px) brightness(0.98) contrast(1.12) saturate(1.2);
  }

  /* Nochmal leichte Kopfdrehung nach rechts - Helm minimal */
  90% {
    transform: translate3d(0.3px, -0.2px, 3px) rotate(0.05deg) rotateY(0.8deg) rotateX(0.3deg) scale(1.0005) scaleY(1) scaleX(0.99995);
    filter: blur(0.2px) brightness(0.98) contrast(1.12) saturate(1.2);
  }
}

@keyframes manLivingMovementWithNod {

  /* Lebendige, natürliche Körperbewegung kombiniert mit Nickbewegung */
  0%,
  100% {
    transform: translateY(0) translateX(0) rotate(0deg) rotateY(0deg) rotateX(0deg);
  }

  /* Leichte Gewichtsverlagerung nach rechts */
  8% {
    transform: translateY(-1px) translateX(1px) rotate(0.15deg) rotateY(0.2deg) rotateX(0deg);
  }

  /* Zurück zur Mitte, beginnt leicht nach vorne zu nicken */
  15% {
    transform: translateY(-0.5px) translateX(0) rotate(0deg) rotateY(0deg) rotateX(0.8deg);
  }

  /* Weiter nach vorne nicken */
  25% {
    transform: translateY(0) translateX(0) rotate(0deg) rotateY(0deg) rotateX(2deg);
  }

  /* Höchster Punkt - voll nach vorne genickt */
  35% {
    transform: translateY(0.5px) translateX(0) rotate(0deg) rotateY(0deg) rotateX(3deg);
  }

  /* Langsam zurück, leichte Gewichtsverlagerung nach links */
  45% {
    transform: translateY(0) translateX(-1px) rotate(-0.15deg) rotateY(-0.2deg) rotateX(2deg);
  }

  /* Weiter zurück zur Mitte */
  55% {
    transform: translateY(-0.5px) translateX(0) rotate(0deg) rotateY(0deg) rotateX(0.8deg);
  }

  /* Zurück zur Ausgangsposition */
  65% {
    transform: translateY(0) translateX(0) rotate(0deg) rotateY(0deg) rotateX(0deg);
  }

  /* Leichte Vorwärtsbewegung (wie beim Einatmen) */
  75% {
    transform: translateY(-1.5px) translateX(0.5px) rotate(0.1deg) rotateY(0.1deg) rotateX(0deg);
  }

  /* Zurück */
  85% {
    transform: translateY(-0.5px) translateX(0) rotate(0deg) rotateY(0deg) rotateX(0deg);
  }

  /* Leichte Rückwärtsbewegung (wie beim Ausatmen) */
  95% {
    transform: translateY(0.5px) translateX(-0.5px) rotate(-0.1deg) rotateY(-0.1deg) rotateX(0deg);
  }
}

.hero-sad-man::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../assets/images/HeroTraurig.webp');
  background-size: contain;
  background-position: left top;
  background-repeat: no-repeat;
  /* STARKER Schlagschatten für Tiefe */
  filter: blur(50px) brightness(0) opacity(1);
  transform: translate(70px, 40px) translateZ(-100px) scale(1.2);
  z-index: -1;
  pointer-events: none;
  transform-origin: center bottom;
  transform-style: preserve-3d;
  /* Performance-Optimierung */
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  contain: layout style paint;
  /* Opacity wird vom Parent-Element geerbt - blendet mit Hero-Sad-Man mit */
  opacity: inherit;
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  /* INTENSIVER box-shadow für 3D-Tiefe - reduziert unten für weniger Dunkelheit */
  box-shadow:
    0 0 120px rgba(0, 0, 0, 0.7),
    -30px -20px 100px rgba(0, 0, 0, 0.75),
    -60px -40px 150px rgba(0, 0, 0, 0.65),
    -90px -60px 200px rgba(0, 0, 0, 0.55),
    -120px -80px 250px rgba(0, 0, 0, 0.45),
    -150px -100px 300px rgba(0, 0, 0, 0.35),
    -180px -120px 350px rgba(0, 0, 0, 0.25);
}

@keyframes shadowPulse {

  0%,
  100% {
    opacity: 0.75;
    transform: translate(45px, 30px) translateZ(-30px) scale(1.05);
  }

  50% {
    opacity: 0.8;
    transform: translate(50px, 35px) translateZ(-38px) scale(1.08);
  }
}

@keyframes shadowBreathing {

  /* Schatten bewegt sich mit der Atmung - synchronisiert mit manBreathing */
  0% {
    transform: translate(45px, 30px) translateZ(-30px) scaleY(1) scaleX(1);
  }

  15% {
    transform: translate(45px, 29px) translateZ(-31px) scaleY(1.001) scaleX(0.9995);
  }

  30% {
    transform: translate(45px, 28px) translateZ(-32px) scaleY(1.002) scaleX(0.999);
  }

  45% {
    transform: translate(45px, 27px) translateZ(-33px) scaleY(1.003) scaleX(0.9985);
  }

  50% {
    transform: translate(45px, 26.5px) translateZ(-33.5px) scaleY(1.0035) scaleX(0.998);
  }

  55% {
    transform: translate(45px, 27px) translateZ(-33px) scaleY(1.003) scaleX(0.9985);
  }

  70% {
    transform: translate(45px, 28px) translateZ(-32px) scaleY(1.002) scaleX(0.999);
  }

  85% {
    transform: translate(45px, 29px) translateZ(-31px) scaleY(1.001) scaleX(0.9995);
  }

  100% {
    transform: translate(45px, 30px) translateZ(-30px) scaleY(1) scaleX(1);
  }
}

@keyframes shadow3DDepth {

  0%,
  100% {
    transform: translate(45px, 30px) translateZ(-30px) scale(1.05);
  }

  25% {
    transform: translate(50px, 33px) translateZ(-38px) scale(1.07);
  }

  50% {
    transform: translate(55px, 37px) translateZ(-45px) scale(1.09);
  }

  75% {
    transform: translate(50px, 33px) translateZ(-38px) scale(1.07);
  }
}

@keyframes shadowPopOut {

  0%,
  100% {
    transform: translate(45px, 30px) translateZ(-30px) scale(1.05);
    opacity: 0.75;
  }

  25% {
    transform: translate(50px, 33px) translateZ(-40px) scale(1.08);
    opacity: 0.8;
  }

  50% {
    transform: translate(55px, 37px) translateZ(-50px) scale(1.1);
    opacity: 0.85;
  }

  75% {
    transform: translate(50px, 33px) translateZ(-40px) scale(1.08);
    opacity: 0.8;
  }
}

.hero-sad-man::after {
  content: none;
  /* Deaktivierte Animationen - Code entfernt */
}

@keyframes manGlow {

  0%,
  100% {
    opacity: 0.7;
  }

  50% {
    opacity: 0.8;
  }
}

@keyframes manDepth {

  0%,
  100% {
    transform: scale(1) translateZ(0);
  }

  50% {
    transform: scale(1.001) translateZ(2px);
  }
}

@keyframes man3DDepth {

  0%,
  100% {
    transform: translateZ(0) rotateY(0deg) rotateX(0deg) scale(1);
    filter: blur(0.2px) brightness(0.98) contrast(1.12) saturate(1.2) drop-shadow(0 0 30px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 60px rgba(0, 0, 0, 0.4)) drop-shadow(-15px 0 40px rgba(0, 0, 0, 0.6)) drop-shadow(-25px 0 60px rgba(0, 0, 0, 0.5)) drop-shadow(10px -10px 35px rgba(0, 0, 0, 0.45));
  }

  25% {
    transform: translateZ(12px) rotateY(2deg) rotateX(-1.2deg) scale(1.003);
    filter: blur(0.2px) brightness(0.99) contrast(1.13) saturate(1.21) drop-shadow(0 0 35px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 70px rgba(0, 0, 0, 0.45)) drop-shadow(-18px 0 50px rgba(0, 0, 0, 0.65)) drop-shadow(-30px 0 70px rgba(0, 0, 0, 0.55)) drop-shadow(12px -12px 40px rgba(0, 0, 0, 0.5));
  }

  50% {
    transform: translateZ(22px) rotateY(0deg) rotateX(0deg) scale(1.008);
    filter: blur(0.2px) brightness(1) contrast(1.15) saturate(1.22) drop-shadow(0 0 40px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 80px rgba(0, 0, 0, 0.5)) drop-shadow(-20px 0 60px rgba(0, 0, 0, 0.7)) drop-shadow(-35px 0 80px rgba(0, 0, 0, 0.6)) drop-shadow(15px -15px 45px rgba(0, 0, 0, 0.55));
  }

  75% {
    transform: translateZ(12px) rotateY(-2deg) rotateX(1.2deg) scale(1.003);
    filter: blur(0.2px) brightness(0.99) contrast(1.13) saturate(1.21) drop-shadow(0 0 35px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 70px rgba(0, 0, 0, 0.45)) drop-shadow(-18px 0 50px rgba(0, 0, 0, 0.65)) drop-shadow(-30px 0 70px rgba(0, 0, 0, 0.55)) drop-shadow(12px -12px 40px rgba(0, 0, 0, 0.5));
  }
}

@keyframes manPopOut {

  0%,
  100% {
    transform: translateZ(0) scale(1);
    filter: brightness(0.98) contrast(1.12);
  }

  25% {
    transform: translateZ(18px) scale(1.005);
    filter: brightness(0.99) contrast(1.13);
  }

  50% {
    transform: translateZ(30px) scale(1.01);
    filter: brightness(1) contrast(1.15);
  }

  75% {
    transform: translateZ(18px) scale(1.005);
    filter: brightness(0.99) contrast(1.13);
  }
}

@keyframes man3DOverlay {

  0%,
  100% {
    transform: translateZ(0) rotateY(0deg) scale(1);
    opacity: 0.8;
  }

  25% {
    transform: translateZ(3px) rotateY(0.8deg) scale(1.001);
    opacity: 0.82;
  }

  50% {
    transform: translateZ(6px) rotateY(0deg) scale(1.002);
    opacity: 0.84;
  }

  75% {
    transform: translateZ(3px) rotateY(-0.8deg) scale(1.001);
    opacity: 0.82;
  }
}

@keyframes manLightReflection {

  0%,
  100% {
    opacity: 0.8;
    filter: brightness(1) contrast(1);
  }

  25% {
    opacity: 0.82;
    filter: brightness(1.01) contrast(1.01);
  }

  50% {
    opacity: 0.84;
    filter: brightness(1.02) contrast(1.02);
  }

  75% {
    opacity: 0.82;
    filter: brightness(1.01) contrast(1.01);
  }
}

/* Subtile Gesichtsbewegung: Nasenflügel und Lippen */
/* Subtile Gesichtsbewegung für Nasenflügel und Lippen - auf ::after Overlay */
@keyframes manFacialMovement {

  0%,
  100% {
    transform: scaleX(1) scaleY(1);
  }

  /* Nasenflügel leicht ausdehnen (wie beim Einatmen) */
  20% {
    transform: scaleX(1.003) scaleY(1.001);
  }

  /* Lippen leicht öffnen */
  40% {
    transform: scaleX(1.001) scaleY(1.004);
  }

  /* Nasenflügel zurück */
  60% {
    transform: scaleX(0.998) scaleY(1);
  }

  /* Lippen leicht zusammen */
  80% {
    transform: scaleX(1) scaleY(0.997);
  }
}

/* Sehr subtile Gesichtsbewegung direkt auf dem Bild - kombiniert mit Hauptanimation */
@keyframes manFacialSubtle {

  0%,
  100% {
    transform: scaleX(1) scaleY(1);
  }

  /* Nasenflügel-Bereich leicht ausdehnen */
  25% {
    transform: scaleX(1.0015) scaleY(1.0008);
  }

  /* Lippen-Bereich leicht öffnen */
  50% {
    transform: scaleX(1.0008) scaleY(1.002);
  }

  /* Zurück */
  75% {
    transform: scaleX(0.9995) scaleY(0.999);
  }
}



/* ========================================
   SCHRITT 8: HERO CONTENT BLOCK (.hero-content)
   Position: absolute, right: 280px, top: 160px
   Max-Breite: 540px
   Padding: 12px
   Background: transparent
   Textausrichtung: links
   ======================================== */
.hero-content {
  position: absolute;
  /* Am Hero-Container verankert - scrollt mit nach oben raus */
  left: 50%;
  right: clamp(2rem, 4vw, 4rem);
  top: calc(50% - 60px);
  /* 60px höher vom Hero-Center */
  transform: translate3d(0, -50%, 0) scale(0.92);
  /* Zentriert + dezent kleiner */
  width: auto;
  max-width: 42%;
  /* Dezent kleiner: 42% statt 45% */
  padding: 10px;
  /* Dezent weniger Padding */
  background: transparent;
  text-align: left;
  position: relative;
  z-index: 20;
  /* Über Hintergrundbild (z-index 1), Sonnenaufgang (z-index 2), Glasplatte (z-index 3) und traurigem Mann (z-index 4) */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0;
  margin-left: 0;
  margin-right: 0;
  /* Scrollt mit nach oben */
  overflow: visible;
  overflow-x: visible;
  overflow-y: visible;
  /* KEINE Höhenbeschränkung */
  height: auto;
  max-height: none;
  min-height: auto;
  pointer-events: auto;
  opacity: 1;
  will-change: transform;
}

/* ========================================
   SCHRITT 9: HEADLINE (.hero-title)
   Font-Size: 56px
   Line-Height: 1.1
   Letter-Spacing: 0.6px
   Color: #E6EDF3
   Glow: 0 0 14px var(--color-primary-25)
   ======================================== */
.hero-title {
  font-size: clamp(2.5rem, 6vw, 4rem);
  line-height: 1.1;
  letter-spacing: 2px;
  margin: 0 0 6px 0;
  padding: 0;
  font-weight: 900;
  font-family: 'Inter', 'Cinzel', sans-serif;
  position: relative;
  display: inline-block;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  color: #FFFFFF;
  text-shadow: none;
  filter: none;
  z-index: 10;
  white-space: nowrap;
}

/* Englische Überschrift: Anpassung für kürzeren Text */
html[lang="en"] .hero-title {
  font-size: clamp(2.5rem, 6vw, 4rem);
  letter-spacing: 1.5px;
}

/* @keyframes titleGlow ENTFERNT - keine Animationen mehr */

/* Shimmer Animation entfernt - wird nicht mehr verwendet */

/* ========================================
   SCHRITT 10: SUBHEADLINE (.hero-subline)
   Font-Size: 18px
   Color: #9FB7C8
   Margin-Top: 6px
   ======================================== */
.hero-subline {
  font-size: var(--font-size-md);
  color: #9FB7C8;
  letter-spacing: 0.4px;
  margin-top: 6px;
  margin-bottom: 0;
  font-weight: 400;
  font-family: 'Inter', sans-serif;
}

/* ========================================
   SCHRITT 11: STAT-KARTEN CONTAINER (.hero-stats)
   3 Karten, horizontal layout, Gap: 22px
   ======================================== */
.hero-stats {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-lg);
  justify-content: flex-start;
  align-items: center;
  margin: 24px 0;
  margin-left: 10px;
  /* 10px nach rechts verschoben (von 20px auf 10px reduziert = 10px nach links) */
  width: 100%;
  flex-wrap: nowrap;
  /* Stat-Panels immer nebeneinander */
}

/* Hero Stats Optimierung - Spezifischere Selektoren statt !important */
.hero .hero-stats {
  margin-left: 50px;
}

/* ========================================
   STAT-KARTEN (.stat-item)
   Größe: 220px × 95px
   Radius: 16px
   Background: rgba(10,27,43,0.82)
   Border: 1px solid var(--color-primary-32)
   Shadow: 0 8px 28px rgba(0,0,0,0.4)
   Hover: scale(1.04), border glow 0 0 18px var(--color-primary-60)
   ======================================== */
/* Remove Infinity Symbol - Spezifischerer Selektor statt !important */
.hero .hero-stats .stat-item:nth-child(3) .stat-number,
.hero .hero-stats .stat-item:nth-child(3) span.stat-number,
.hero-stats .stat-item:nth-child(3) .stat-number {
  display: none;
  visibility: hidden;
  opacity: 0;
  height: 0;
  width: 0;
  min-height: 0;
  min-width: 0;
  max-height: 0;
  max-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: absolute;
  left: -9999px;
  font-size: 0;
  line-height: 0;
  text-indent: -9999px;
  white-space: nowrap;
}

/* Drittes Stat-Item: Icon größer (Unendlich) - Mittig ausrichten */
.hero .hero-stats .stat-item:nth-child(3) .stat-icon,
.hero .hero-stats .stat-item:nth-child(3) img.stat-icon {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  max-width: 32px;
  max-height: 32px;
  margin: 0 auto;
  margin-bottom: 8px;
  align-self: center;
  display: block;
}

/* Drittes Stat-Item: Label ohne zusätzlichen Abstand */
.hero .hero-stats .stat-item:nth-child(3) .stat-label {
  margin-top: 0;
  text-align: center;
}

/* Responsive Infinity Symbol Removal */
@media (max-width: 768px) {

  .hero .hero-stats .stat-item:nth-child(3) .stat-icon,
  .hero .hero-stats .stat-item:nth-child(3) img.stat-icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    max-width: 28px;
    max-height: 28px;
    margin-bottom: 6px;
  }
}

@media (max-width: 480px) {

  .hero .hero-stats .stat-item:nth-child(3) .stat-icon,
  .hero .hero-stats .stat-item:nth-child(3) img.stat-icon {
    width: 26px;
    height: 26px;
    min-width: 26px;
    min-height: 26px;
    max-width: 26px;
    max-height: 26px;
    margin-bottom: 4px;
  }
}

.stat-item {
  /* Angepasst: width: 230px (20px länger), height: 92px, border-radius: 12px */
  width: 230px;
  /* 20px länger: 210px + 20px = 230px */
  height: 92px;
  min-width: 230px;
  min-height: 92px;
  max-width: 230px;
  max-height: 92px;
  border-radius: 12px;
  /* EXAKT NACH MASTERPROMPT */
  /* EXAKT NACH MASTERPROMPT: background: rgba(10,27,43,0.65) */
  background: rgba(10, 27, 43, 0.65);
  /* EXAKT NACH MASTERPROMPT: border: 1px solid var(--color-primary-25) */
  border: 1px solid var(--color-primary-25);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px;
  box-sizing: border-box;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Hero Stats Optimierung - Spezifischere Selektoren statt !important */
.hero .hero-stats .stat-item {
  /* Optimiertes Padding für bessere Ausnutzung */
  padding: 8px 12px;
  gap: 4px;
  /* Größe: 20px länger (230px statt 210px) */
  width: 230px;
  min-width: 230px;
  max-width: 230px;
  height: 92px;
  min-height: 92px;
  max-height: 92px;
}

/* Mobile: Stat-Items anpassen */
@media (max-width: 768px) {
  .hero .hero-stats .stat-item {
    width: 100%;
    max-width: 280px;
    min-width: 0;
    height: auto;
    min-height: 80px;
    max-height: none;
  }

  /* Flexbox für optimale Ausrichtung */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  /* Box-Sizing für korrekte Größenberechnung */
  box-sizing: border-box;

  /* Overflow verhindern */
  overflow: hidden;
}

.stat-item:hover {
  transform: scale(1.04);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4), 0 0 18px var(--color-primary-60);
  border-color: var(--color-primary-30);
}

/* Ziel-Stat-Card (50.000) mit Glow-Effekt */
.stat-item-goal {
  border-color: var(--color-primary-50);
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.4),
    0 0 20px rgba(0, 207, 255, 0.6),
    0 0 40px rgba(0, 207, 255, 0.4),
    0 0 60px rgba(0, 207, 255, 0.2);
}

.stat-item-goal .stat-goal-number {
  color: var(--color-primary-100);
  text-shadow:
    0 0 10px rgba(0, 207, 255, 1),
    0 0 20px rgba(0, 207, 255, 0.8),
    0 0 30px rgba(0, 207, 255, 0.6),
    0 0 40px rgba(0, 207, 255, 0.4),
    0 2px 4px rgba(0, 0, 0, 0.8);
  filter: drop-shadow(0 0 8px rgba(0, 207, 255, 0.9)) drop-shadow(0 0 16px rgba(0, 207, 255, 0.6));
  animation: goalGlow 2s ease-in-out infinite alternate;
}

@keyframes goalGlow {
  0% {
    text-shadow:
      0 0 10px rgba(0, 207, 255, 1),
      0 0 20px rgba(0, 207, 255, 0.8),
      0 0 30px rgba(0, 207, 255, 0.6),
      0 0 40px rgba(0, 207, 255, 0.4),
      0 2px 4px rgba(0, 0, 0, 0.8);
  }

  100% {
    text-shadow:
      0 0 15px rgba(0, 207, 255, 1),
      0 0 30px rgba(0, 207, 255, 0.9),
      0 0 45px rgba(0, 207, 255, 0.7),
      0 0 60px rgba(0, 207, 255, 0.5),
      0 2px 4px rgba(0, 0, 0, 0.8);
  }
}

.stat-item-goal:hover {
  transform: scale(1.06);
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.4),
    0 0 30px rgba(0, 207, 255, 0.8),
    0 0 50px rgba(0, 207, 255, 0.6),
    0 0 70px rgba(0, 207, 255, 0.4);
  border-color: var(--color-primary-70);
}

/* ========================================
   SCHRITT 12: STAT-ICON (.stat-icon)
   Größe: 22px
   Farbe: var(--color-primary)
   Position: zentriert oben
   Glow: 0 0 12px var(--color-primary-50)
   ======================================== */
.stat-icon {
  width: 22px;
  height: 22px;
  color: #00CFFF;
  margin-bottom: 8px;
  margin-top: 0;
  margin-left: auto;
  margin-right: auto;
  display: block;
  filter: drop-shadow(0 0 12px rgba(0, 207, 255, 0.5));
}

/* ========================================
   SCHRITT 13: STAT-NUMBER (.stat-number)
   Font-Size: 34px
   Font-Weight: 600
   Color: #E6EDF3
   ======================================== */
.stat-number {
  font-size: var(--font-size-stat-number);
  font-weight: 600;
  color: var(--color-primary);
  line-height: 1;
  margin: 0;
  font-family: 'Inter', sans-serif;
}

/* Unterstützer-Zahl kleiner */
.stat-item:nth-child(1) .stat-number {
  font-size: var(--font-size-stat-number-small);
}

/* Hero Stats Optimierung - Spezifischere Selektoren statt !important */
.hero .hero-stats .stat-item .stat-number {
  font-size: clamp(1.3rem, 2.2vw + 0.4rem, 1.75rem);
  font-weight: 600;
  line-height: 1;
  margin: 0;
  padding: 0;

  /* Zentrierte Ausrichtung */
  text-align: center;
  white-space: nowrap;

  /* Flex für optimale Positionierung */
  flex-shrink: 0;
}

/* Unterstützer-Zahl: Etwas kleiner für längere Zahlen und weiß */
.hero .hero-stats .stat-item:nth-child(1) .stat-number {
  font-size: clamp(1.1rem, 2vw + 0.35rem, 1.6rem);
  color: #FFFFFF;
}

/* Drittes Stat-Item: ∞-Symbol ausblenden */
.hero .hero-stats .stat-item:nth-child(3) .stat-number,
.hero .hero-stats .stat-item:nth-child(3) span.stat-number {
  display: none;
  visibility: hidden;
  opacity: 0;
  height: 0;
  width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: absolute;
  left: -9999px;
  font-size: 0;
  line-height: 0;
}

/* Zweites Stat-Item: "1" ausblenden */
.hero .hero-stats .stat-item:nth-child(2) .stat-number {
  display: none;
  visibility: hidden;
  opacity: 0;
  height: 0;
  margin: 0;
  padding: 0;
}

/* ========================================
   SCHRITT 14: STAT-LABEL (.stat-label)
   Font-Size: 13px
   Color: #9FB7C8
   ======================================== */
.stat-label {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  margin-top: 4px;
  margin-bottom: 0;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
}

/* Zweites Stat-Panel: Einzigartiges Spiel - größer und weiß */
.stat-item:nth-child(2) .stat-label {
  font-size: 1.125rem;
  color: #FFFFFF;
  font-weight: 700;
}

/* ========================================
   SCHRITT 15: CTA BUTTONS CONTAINER (.hero-cta-group)
   Goldene Akzentlinien hinter den Buttons
   ======================================== */
.hero-cta-group {
  display: flex;
  flex-direction: row;
  gap: 12px;
  margin: 24px 0;
  width: 100%;
  max-width: 759px;
  min-width: 759px;
  flex-wrap: nowrap;
  /* CTA-Buttons immer nebeneinander */
  position: relative;
  padding-bottom: 4px;
  justify-content: flex-start;
  align-items: stretch;
}

/* Mobile: Flex-Wrap aktivieren und Min-Width entfernen */
@media (max-width: 1024px) {
  .hero-cta-group {
    min-width: 0;
    max-width: 100%;
    flex-wrap: wrap;
  }
}

/* Spezifischerer Selektor für Hero Content CTA Group */
.hero .hero-content .hero-cta-group {
  width: 100%;
  max-width: 759px;
  min-width: 759px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 12px;
  justify-content: flex-start;
  align-items: stretch;
}

/* Mobile: Hero CTA Group - min-width entfernen */
@media (max-width: 1024px) {
  .hero .hero-content .hero-cta-group {
    min-width: 0;
    max-width: 100%;
    flex-wrap: wrap;
  }
}

/* Azoth Blau Akzentlinie hinter Buttons */
.hero-cta-group::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 25px;
  right: 25px;
  height: 2px;
  background: linear-gradient(90deg,
      transparent 0%,
      var(--color-primary-40) 20%,
      var(--color-primary-60) 50%,
      var(--color-primary-40) 80%,
      transparent 100%);
  border-radius: 1px;
  box-shadow: 0 0 8px var(--color-primary-30);
}

/* ========================================
   CTA BUTTON (.cta-button) - Vereinheitlicht
   ======================================== */
.cta-button {
  height: var(--cta-height-primary);
  min-height: var(--cta-height-primary);
  padding: var(--cta-padding-y) var(--cta-padding-x);
  border-radius: var(--cta-border-radius);
  border: 1.5px solid var(--cta-azoth-border);
  background-image:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.25), transparent 55%),
    var(--cta-azoth-gradient);
  color: var(--cta-azoth-text);
  font-family: 'Inter', sans-serif;
  font-size: var(--cta-font-size);
  font-weight: var(--cta-font-weight);
  letter-spacing: var(--cta-letter-spacing);
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  cursor: pointer;
  box-sizing: border-box;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition:
    transform var(--cta-transition-duration) var(--cta-transition-timing),
    box-shadow var(--cta-transition-duration) var(--cta-transition-timing),
    border-color var(--cta-transition-duration) var(--cta-transition-timing),
    background-image var(--cta-transition-duration) var(--cta-transition-timing);
  box-shadow: var(--cta-shadow-subtle);
  /* Pulsing-Animation entfernt für professionelleres Design */
}

/* Hero CTA-Buttons: Alle gleich groß und in einer Reihe */
.hero-cta-group .cta-button {
  flex: 1 1 0%;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0%;
  min-width: 0;
  width: auto;
  max-width: none;
  padding: 12px 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: keep-all;
  overflow-wrap: normal;
}

/* Spezifischerer Selektor für Hero Content CTA Buttons */
.hero .hero-content .hero-cta-group .cta-button {
  flex: 1 1 0%;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0%;
  min-width: 0;
  width: auto;
  max-width: none;
  padding: 12px 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: keep-all;
  overflow-wrap: normal;
}

.cta-button .cta-label {
  position: relative;
  z-index: 1;
}

.cta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0.15rem;
  line-height: 0;
  transition:
    transform var(--cta-transition-duration) var(--cta-transition-timing),
    opacity var(--cta-transition-duration) var(--cta-transition-timing),
    background var(--cta-transition-duration) var(--cta-transition-timing);
}

.cta-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* Discord-Button: Schrift zentriert, Icon entfernt */
.cta-button.discord {
  justify-content: center;
  text-align: center;
}

.cta-button.discord .cta-label {
  text-align: center;
  width: 100%;
}

.cta-button .cta-icon {
  background: rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.15);
}

/* Discord-Button: Spezifisches Hover-Verhalten */
.cta-button.discord:hover .cta-icon {
  transform: translateX(3px);
  background: rgba(88, 101, 242, 0.25);
  box-shadow: inset 0 0 8px rgba(88, 101, 242, 0.2);
}

.cta-button:hover .cta-icon {
  transform: translateX(3px);
  background: rgba(255, 255, 255, 0.32);
}

/* Pulsing-Animation entfernt - zu übertrieben für Premium-Design */

.cta-button::before,
.cta-button::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.cta-button::before {
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.4) 30%,
      rgba(255, 255, 255, 0.6) 50%,
      rgba(255, 255, 255, 0.4) 70%,
      transparent 100%);
  transform: translateX(-100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}

.cta-button::after {
  border: 2px solid var(--cta-azoth-border);
  filter: blur(4px);
  opacity: 0.4;
  transition: opacity 0.4s ease;
  z-index: -1;
}

.cta-button:hover {
  transform: var(--cta-hover-transform);
  box-shadow: var(--cta-shadow-hover-subtle);
  background-image:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.35), transparent 55%),
    var(--cta-azoth-gradient-hover);
  border-color: var(--cta-azoth-border-hover);
}

.cta-button:hover::before {
  opacity: 1;
  animation: shimmer 0.8s ease-out;
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%) skewX(-15deg);
  }

  100% {
    transform: translateX(200%) skewX(-15deg);
  }
}

.cta-button:hover::after {
  opacity: 0.5;
}

.cta-button:active {
  transform: translateY(-1px) scale(0.99);
  transition-duration: 0.15s;
}

/* ========================================
   SCHRITT 17: PROGRESS BAR CONTAINER (.hero-progress)
   ======================================== */
.hero-progress {
  width: 100%;
  max-width: 759px;
  min-width: 759px;
  margin: 24px 0 0 0;
  display: block;
  overflow: visible;
}

.progress-bar-container {
  width: 100%;
  max-width: 100%;
  min-width: 100%;
  height: 40px;
  position: relative;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.progress-bar {
  flex: 1;
  height: 40px;
  border-radius: 20px;
  background: var(--color-primary-08);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  /* 3D-Effekte: Mehr Tiefe und Dimension */
  box-shadow:
    inset 0 4px 8px rgba(0, 0, 0, 0.4),
    inset 0 -2px 4px var(--color-primary-10),
    0 4px 16px rgba(0, 0, 0, 0.3),
    0 8px 24px var(--color-primary-20);
  border: 2px solid var(--color-primary-30);
  transform: perspective(1000px) rotateX(2deg);
}

.progress-bar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: var(--progress-width, 0%);
  min-width: 0;
  max-width: 100%;
  background: linear-gradient(90deg,
      var(--color-primary) 0%,
      #4FFFFF 50%,
      var(--color-primary) 100%);
  background-size: 200% 100%;
  /* 3D-Effekte für den Füllbalken */
  box-shadow:
    0 0 24px var(--color-primary-100),
    0 4px 12px var(--color-primary-60),
    inset 0 2px 4px rgba(255, 255, 255, 0.4),
    inset 0 -2px 4px rgba(0, 0, 0, 0.2);
  border-radius: 20px;
  animation: progressFlow 2s ease-in-out infinite, progressShimmer 3s linear infinite, fillFromLeft 2s ease-out;
  transition: width 1.5s ease-out;
  z-index: 1;
  box-sizing: border-box;
}

/* Fill-Effekt von links nach rechts beim Laden */
@keyframes fillFromLeft {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Prozentzahl in der Mitte der Progress Bar */
.progress-percentage {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.85rem, 1.2vw + 0.3rem, 1rem);
  font-weight: 700;
  color: #FFFFFF;
  white-space: nowrap;
  text-shadow:
    0 2px 8px rgba(0, 0, 0, 0.8),
    0 0 12px var(--color-primary-60);
  z-index: 10;
  pointer-events: none;
  letter-spacing: 0.05em;
}

.progress-goal {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Inter', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: #FFFFFF;
  white-space: nowrap;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
  z-index: 3;
  pointer-events: none;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(90deg,
      #FFFFFF 0%,
      rgba(255, 255, 255, 0.8) 50%,
      #FFFFFF 100%);
  background-size: 200% 100%;
  animation: shimmerText 2s ease-in-out infinite;
}

@keyframes shimmerText {
  0% {
    background-position: -200% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

@keyframes progressShimmer {
  0% {
    background-position: -200% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

@keyframes progressFlow {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.9;
  }
}


/* ========================================
   SCHRITT 18: SCROLL HINWEIS ANIMATION NACH UNTEN
   Dezente Scroll-Hinweis Animation nach unten
   ======================================== */
.hero-scroll-hint {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  pointer-events: none;
  opacity: 0.7;
  animation: scrollHintBounce 2s ease-in-out infinite;
}

.scroll-hint-arrow {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Gleiche Styles wie die alte Raute */
  color: var(--color-primary-80);
  filter: drop-shadow(0 0 12px var(--color-primary-50));
  animation: arrowPulse 2s ease-in-out infinite;
}

.scroll-hint-arrow svg {
  width: 100%;
  height: 100%;
  stroke: var(--color-primary-80);
  /* Gleicher Glow-Effekt wie die alte Raute */
  filter: drop-shadow(0 0 12px var(--color-primary-50));
}

@keyframes arrowPulse {

  0%,
  100% {
    opacity: 0.8;
    transform: translateY(0) scale(1);
  }

  50% {
    opacity: 1;
    transform: translateY(0) scale(1.1);
  }
}

@keyframes scrollHintBounce {

  0%,
  100% {
    transform: translateX(-50%) translateY(0);
    opacity: 0.7;
  }

  50% {
    transform: translateX(-50%) translateY(10px);
    opacity: 0.4;
  }
}