/* ========================================
   PREMIUM FOOTER COMPONENT
   MysteryErlebnis - Enterprise Design
   ======================================== */

/* ======================================== 
   MAIN FOOTER CONTAINER 
   ======================================== */
.main-footer {
  /* Dramatischer Gradient - Von dunkelster Burgundrot zu Tiefschwarz */
  background: linear-gradient(180deg, 
    var(--color-primary-darker) 0%,    /* #1A0000 - Deepest Mystery */
    var(--color-black) 100%);          /* #000000 - Pure Black */
  color: var(--color-secondary);
  padding: var(--space-5xl) 0 0;
  margin-top: var(--space-7xl);
  position: relative;
  overflow: hidden;
  /* Luxury Shadow für Tiefe */
  box-shadow: 0 -20px 40px -20px rgba(97, 0, 0, 0.3);
}

/* ======================================== 
   SPEKTAKULÄRE GOLDENE GLOW-LINIE 
   ======================================== */
.main-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    transparent 20%,
    var(--color-accent) 50%,     /* #FFD700 - Golden Mystery */
    transparent 80%,
    transparent 100%);
  animation: glowSlide 5s linear infinite;
  z-index: var(--z-10);
}

/* Wandernde Goldlinie Animation */
@keyframes glowSlide {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* ======================================== 
   FOOTER TOP SECTION 
   ======================================== */
.footer-top {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding) var(--space-4xl);
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(0, 1.4fr);
  gap: var(--space-4xl);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* ======================================== 
   FOOTER BRAND - Premium Logo & Tagline
   ======================================== */
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  position: relative;
}

.footer-logo {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--font-black);
  letter-spacing: -0.02em;
  display: inline-block;
  color: var(--color-secondary);    /* Weiß */
}

.footer-logo .logo-accent {
  color: var(--color-accent);       /* #FFD700 - Gold-Akzent */
  position: relative;
  /* Subtiler Glow-Effekt für "Erlebnis" */
  text-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
}

.footer-tagline {
  font-size: var(--text-base);
  color: rgba(255, 255, 255, 0.9);  /* 90% Weiß - subtil gedimmt */
  line-height: var(--leading-relaxed);
  max-width: 280px;
  font-weight: var(--font-medium);
  /* Mystery-Marketing für Gutschein-Seite */
}

/* ======================================== 
   FOOTER LINKS - 3-Spalten Grid
   ======================================== */
.footer-links {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4xl);
}

.footer-column {
  flex: 1;
  max-width: 220px;
}

.footer-column h4 {
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  color: var(--color-accent);        /* #FFD700 - Goldene Überschrift */
  margin-bottom: var(--space-lg);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  position: relative;
  /* Luxury-Typografie */
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.2);
}

/* Goldene Unterlinie - 30px breit */
.footer-column h4::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 30px;
  height: 2px;
  background: var(--color-accent);   /* #FFD700 */
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
}

.footer-column ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.footer-column a {
  color: rgba(255, 255, 255, 0.9);  /* 90% Weiß */
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  transition: all var(--transition-base);
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) 0;
  position: relative;
}

/* Eleganter Slide-In-Effekt mit 5px Einzug */
.footer-column a:hover {
  color: var(--color-secondary);     /* 100% Weiß */
  transform: translateX(5px);
  padding-left: 5px;
}

/* Gleitender Pfeil-Effekt */
.footer-column a::before {
  content: '→';
  color: var(--color-accent);
  opacity: 0;
  transform: translateX(-10px);
  transition: all var(--transition-base);
  font-weight: var(--font-bold);
}

.footer-column a:hover::before {
  opacity: 1;
  transform: translateX(0);
}

/* ======================================== 
   FOOTER BOTTOM - Legal & Payment
   ======================================== */
.footer-bottom {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-xl) var(--container-padding);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-lg);
}

.footer-legal {
  display: flex;
  align-items: center;
  gap: var(--space-2xl);
  flex-wrap: wrap;
}

.footer-legal p {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.6);    /* Stark gedimmt */
  font-weight: var(--font-medium);
}

.footer-legal ul {
  display: flex;
  gap: var(--space-lg);
  list-style: none;
}

.footer-legal a {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.6);    /* Stark gedimmt */
  transition: color var(--transition-base);
  position: relative;
}

.footer-legal a:hover {
  color: var(--color-accent);          /* Gold bei Hover */
}

/* Separator dots */
.footer-legal li:not(:last-child)::after {
  content: '•';
  margin-left: var(--space-lg);
  color: rgba(255, 255, 255, 0.4);
}

/* ======================================== 
   PAYMENT ICONS 
   ======================================== */
.footer-payment {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.footer-payment span {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.6);
  font-weight: var(--font-medium);
  /* "Sichere Zahlung:" */
}

.payment-icons {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
}

.payment-text {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.6);
  font-weight: var(--font-medium);
}

/* ======================================== 
   BACK TO TOP BUTTON - Premium Design
   ======================================== */
.back-to-top {
  position: absolute;
  top: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  z-index: 10;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-secondary);
  box-shadow: var(--shadow-xl);
  cursor: pointer;
  transition: all var(--transition-base);
  border: 2px solid rgba(255, 255, 255, 0.1);
}

.back-to-top:hover {
  transform: translateY(-8px);
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
  color: var(--color-black);
  box-shadow: var(--shadow-glow-accent);
}

.back-to-top svg {
  width: 24px;
  height: 24px;
  transition: all var(--transition-base);
}

/* ======================================== 
   RESPONSIVE FOOTER 
   ======================================== */
/* iPad-spezifische Anpassungen (768px - 1024px) */
@media (max-width: 1024px) and (min-width: 769px) {
  .footer-top {
    grid-template-columns: 1fr;
    gap: var(--space-3xl);
    text-align: center;
  }
  
  .footer-brand {
    align-items: center;
    text-align: center;
  }
  
  .footer-tagline {
    max-width: 100%;
    text-align: center;
    margin: 0 auto;
  }
  
  /* Footer-Links alle untereinander auf iPad */
  .footer-links {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    max-width: 600px;
    margin: 0 auto;
  }
}

/* Tablet allgemein (bis 1024px) */
@media (max-width: 1024px) {
  .footer-top {
    grid-template-columns: 1fr;
    gap: var(--space-3xl);
    text-align: center;
  }
  
  .footer-brand {
    align-items: center;
    text-align: center;
  }
  
  .footer-tagline {
    max-width: 100%;
    text-align: center;
    margin: 0 auto;
  }
  
  .footer-links {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
    justify-items: center;
    text-align: center;
  }
  
  .footer-column {
    width: 100%;
    max-width: none;
  }
  
  .footer-column ul {
    align-items: center;
  }
  
  .footer-column h4::after {
    left: 50%;
    transform: translateX(-50%);
  }
  
  .footer-column a {
    justify-content: center;
    padding-left: 0;
  }
  
  .footer-column a::before {
    display: none;
  }
  
  .footer-column a:hover {
    transform: none;
  }
}

@media (max-width: 768px) {
  .main-footer {
    padding-top: var(--space-4xl);
    margin-top: var(--space-5xl);
  }
  
  .footer-links {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    justify-items: center;
    text-align: center;
  }
  
  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: var(--space-md);
  }
  
  .footer-legal {
    flex-direction: column;
    gap: var(--space-md);
    text-align: center;
  }
  
  .footer-legal ul {
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .footer-payment {
    flex-direction: column;
    gap: var(--space-sm);
  }
  
  .back-to-top {
    top: 40px;
    right: 20px;
  }
}

@media (max-width: 640px) {
  .footer-logo {
    font-size: var(--text-2xl);
  }
  
  .footer-brand {
    align-items: center;
    text-align: center;
  }
  
  .footer-tagline {
    font-size: var(--text-sm);
    text-align: center;
    margin: 0 auto;
    max-width: 280px;
    line-height: var(--leading-relaxed);
  }
  
  .footer-column h4 {
    font-size: var(--text-sm);
  }
  
  .footer-column a {
    font-size: var(--text-xs);
  }
  
  .footer-legal p,
  .footer-legal a {
    font-size: var(--text-xs);
  }
}

/* ======================================== 
   PREMIUM ANIMATIONS & EFFECTS
   ======================================== */

/* Floating Brand Element */
@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-8px);
  }
}

.footer-brand::after {
  content: '';
  position: absolute;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, 
    var(--color-primary) 0%, 
    transparent 70%);
  opacity: 0.08;
  border-radius: 50%;
  animation: float 6s ease-in-out infinite;
  pointer-events: none;
  top: 20%;
  right: -20%;
  z-index: var(--z-negative);
}

/* Accessibility: Focus States */
.footer-column a:focus,
.footer-legal a:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Performance: Will-Change für Animationen */
.main-footer::before,
.footer-column a,
.back-to-top {
  will-change: transform;
}

/* ======================================== 
   ENTERPRISE-LEVEL GESAMTEINDRUCK
   ======================================== */
/* 
🏆 PREMIUM DARK-MODE FOOTER FEATURES:
✅ Dramatischer Schwarz-zu-Burgundrot Gradient 
✅ Spektakuläre wandernde Goldlinie (5s Animation)
✅ Konsistente Mystery-Farbharmonie (#610000, #FFD700, Weiß)
✅ Hochwertige Hover-Animationen (Slide-In, Scale, Glow)
✅ Professionelle Content-Struktur (3-Spalten Grid)
✅ Mystery-orientiertes Newsletter-Marketing ("Bleib überrascht")
✅ Luxury Mikro-Interaktionen für Premium-Feel
✅ Vollständig Responsive (Desktop → Mobile)
✅ Accessibility-optimiert (Focus States, ARIA)
✅ Performance-optimiert (will-change, blur-filter)

🎯 Enterprise-Level Design für MysteryErlebnis!
*/

/* ======================================== 
   SEAMLESS SECTION TRANSITION FIX
   ======================================== */
/* Fix: Footer berührt direkt die darüber liegende Sektion ohne Abstand */
main + .main-footer {
  margin-top: 0 !important;
  padding-top: var(--space-3xl) !important;  /* Kleineres internes Padding für Inhalte */
}

/* Voucher-Seite: Footer direkt nach letzter Sektion (kein <main> vorhanden) */
.success-section + .main-footer,
.purchase-section + .main-footer,
.how-gift-works + .main-footer,
.voucher-options + .main-footer,
.why-experiences + .main-footer,
.voucher-hero + .main-footer {
  margin-top: 0 !important;
  padding-top: var(--space-3xl) !important;
}