/* ============================================
   GRÜNDE FÜR VERKAUF SEITE - KOMPLETT NEU
   ============================================ */

/* Überschreibe alle Fade-In Animationen - Elemente sofort sichtbar */
main .fade-in,
main .fade-in-up,
main .intro-content.fade-in,
main .reason-card.fade-in-up,
main .reasons-cta.fade-in,
main .faq-reasons-header.fade-in,
main .faq-reason-item.fade-in-up,
main .why-professional-content.fade-in,
main .next-steps-content.fade-in {
  opacity: 1 !important;
  transform: translateY(0) !important;
  visibility: visible !important;
  display: block !important;
  transition: none !important;
  animation: none !important;
}

main .fade-in.visible,
main .fade-in-up.visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Hero Section - Komplett neu gestylt */
main .reasons-hero {
  background: linear-gradient(135deg, rgba(255, 122, 24, 0.1), rgba(43, 108, 246, 0.1)) !important;
  padding: 5rem 6vw !important;
  min-height: 450px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative;
  overflow: hidden;
  margin: 0;
}

main .reasons-hero .hero-container {
  max-width: 1200px !important;
  margin: 0 auto !important;
  width: 100% !important;
  padding: 0 2rem !important;
  text-align: center !important;
}

main .reasons-hero .hero-content {
  max-width: 900px !important;
  margin: 0 auto !important;
}

main .reasons-hero .hero-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding: 0.5rem 1.25rem !important;
  background: rgba(255, 255, 255, 0.95) !important;
  border-radius: 50px !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  color: var(--primary) !important;
  margin-bottom: 1.5rem !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
}

main .reasons-hero h1 {
  font-size: clamp(2rem, 4vw, 2.75rem) !important;
  font-weight: 700 !important;
  color: var(--text-dark) !important;
  margin-bottom: 1.25rem !important;
  line-height: 1.2 !important;
}

main .reasons-hero .hero-description {
  font-size: 1.1rem !important;
  color: var(--text-gray) !important;
  line-height: 1.7 !important;
  margin-bottom: 2rem !important;
}

main .reasons-hero .hero-actions {
  display: flex !important;
  gap: 1rem !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  margin-top: 0 !important;
}

/* Intro Section - Komplett neu gestylt */
main .intro-section {
  padding: 4rem 6vw !important;
  background: #fff !important;
  margin: 0 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  min-height: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

main .intro-section .container {
  max-width: 1000px !important;
  margin: 0 auto !important;
  padding: 0 2rem !important;
  display: block !important;
  visibility: visible !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

main .intro-content {
  text-align: center !important;
  max-width: 900px !important;
  margin: 0 auto !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

main .intro-content h2 {
  font-size: clamp(1.75rem, 3vw, 2.25rem) !important;
  font-weight: 700 !important;
  color: var(--text-dark) !important;
  margin-bottom: 1.25rem !important;
  display: block !important;
  visibility: visible !important;
}

main .intro-content p {
  font-size: 1.05rem !important;
  color: var(--text-gray) !important;
  line-height: 1.75 !important;
  margin-bottom: 1.25rem !important;
  display: block !important;
  visibility: visible !important;
}

main .intro-content p:last-child {
  margin-bottom: 0 !important;
}

/* Verkaufsgründe Section - Komplett neu gestylt */
main .reasons-section {
  padding: 4rem 6vw !important;
  background: #f8fafc !important;
  margin: 0 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

main .reasons-container {
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 0 2rem !important;
  display: block !important;
  visibility: visible !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

main .reasons-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 2rem !important;
  margin-bottom: 3rem !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
}

main .reason-card {
  background: #fff !important;
  border-radius: 16px !important;
  padding: 2.25rem !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
  border: 1px solid rgba(30, 64, 175, 0.1) !important;
  transition: all 0.3s ease !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  overflow: visible !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transform: translateY(0) !important;
  animation: none !important;
}

main .reason-card.fade-in-up {
  opacity: 1 !important;
  transform: translateY(0) !important;
  visibility: visible !important;
}

main .reason-card::before {
  display: none !important;
}

main .reason-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 24px rgba(30, 64, 175, 0.12) !important;
  border-color: var(--primary-blue) !important;
}

main .reason-card-full {
  grid-column: 1 / -1 !important;
}

main .reason-icon {
  width: 56px !important;
  height: 56px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, rgba(30, 64, 175, 0.1), rgba(255, 122, 24, 0.1)) !important;
  border-radius: 12px !important;
  color: var(--primary-blue) !important;
  margin-bottom: 1.25rem !important;
  flex-shrink: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
}

main .reason-card h2 {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: var(--text-dark) !important;
  margin-bottom: 1rem !important;
  line-height: 1.3 !important;
  display: block !important;
  visibility: visible !important;
}

main .reason-intro {
  font-size: 0.95rem !important;
  color: var(--text-gray) !important;
  line-height: 1.65 !important;
  margin-bottom: 1.25rem !important;
  font-style: italic !important;
  display: block !important;
  visibility: visible !important;
}

main .reason-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;
  flex: 1 !important;
  visibility: visible !important;
  opacity: 1 !important;
}

main .reason-list li {
  visibility: visible !important;
  opacity: 1 !important;
}

main .reason-list li {
  padding-left: 1.5rem !important;
  position: relative !important;
  color: var(--text) !important;
  line-height: 1.65 !important;
  font-size: 0.95rem !important;
}

main .reason-list li::before {
  content: '•' !important;
  position: absolute !important;
  left: 0 !important;
  color: var(--primary-blue) !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
}

main .reason-list li strong {
  color: var(--text-dark) !important;
  font-weight: 600 !important;
}

/* Reasons CTA - Komplett neu gestylt */
main .reasons-cta {
  background: linear-gradient(135deg, rgba(30, 64, 175, 0.05), rgba(255, 122, 24, 0.05)) !important;
  border-radius: 16px !important;
  padding: 3rem 2.5rem !important;
  text-align: center !important;
  border: 1px solid rgba(30, 64, 175, 0.1) !important;
  margin-top: 2rem !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

main .reasons-cta-content {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
}

main .reasons-cta-content h2 {
  font-size: clamp(1.75rem, 3vw, 2.25rem) !important;
  font-weight: 700 !important;
  color: var(--text-dark) !important;
  margin-bottom: 1rem !important;
  display: block !important;
  visibility: visible !important;
}

main .reasons-cta-content p {
  font-size: 1.05rem !important;
  color: var(--text-gray) !important;
  line-height: 1.7 !important;
  margin-bottom: 1.75rem !important;
  max-width: 600px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
  visibility: visible !important;
}

/* FAQ Reasons Section - Komplett neu gestylt */
main .faq-reasons-section {
  padding: 4rem 6vw !important;
  background: #fff !important;
  margin: 0 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

main .faq-reasons-section .container {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 2rem !important;
  display: block !important;
  visibility: visible !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

main .faq-reasons-header {
  text-align: center !important;
  margin-bottom: 3rem !important;
}

main .faq-reasons-header h2 {
  font-size: clamp(1.75rem, 3vw, 2.25rem) !important;
  font-weight: 700 !important;
  color: var(--text-dark) !important;
  margin-bottom: 0.75rem !important;
}

main .faq-reasons-header p {
  font-size: 1.05rem !important;
  color: var(--text-gray) !important;
}

main .faq-reasons-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 1.5rem !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
}

main .faq-reason-item {
  background: #f8fafc !important;
  border-radius: 12px !important;
  padding: 1.75rem !important;
  border: 1px solid rgba(30, 64, 175, 0.1) !important;
  transition: all 0.3s ease !important;
  visibility: visible !important;
  opacity: 1 !important;
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

main .faq-reason-item:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
  border-color: var(--primary) !important;
  background: #fff !important;
}

main .faq-reason-item h3 {
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: var(--text-dark) !important;
  margin-bottom: 0.75rem !important;
  line-height: 1.4 !important;
  display: block !important;
  visibility: visible !important;
}

main .faq-reason-item p {
  font-size: 0.95rem !important;
  color: var(--text-gray) !important;
  line-height: 1.65 !important;
  margin: 0 !important;
  display: block !important;
  visibility: visible !important;
}

/* Why Professional Section - Komplett neu gestylt */
main .why-professional-section {
  padding: 4rem 6vw !important;
  background: #f8fafc !important;
  margin: 0 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

main .why-professional-section .container {
  max-width: 1000px !important;
  margin: 0 auto !important;
  padding: 0 2rem !important;
  display: block !important;
  visibility: visible !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

main .why-professional-content {
  max-width: 900px !important;
  margin: 0 auto !important;
  display: block !important;
  visibility: visible !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

main .why-professional-text {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
}

main .why-professional-text h2 {
  font-size: clamp(1.75rem, 3vw, 2.25rem) !important;
  font-weight: 700 !important;
  color: var(--text-dark) !important;
  margin-bottom: 1.25rem !important;
  text-align: center !important;
  display: block !important;
  visibility: visible !important;
}

main .why-professional-text > p {
  font-size: 1.05rem !important;
  color: var(--text-gray) !important;
  line-height: 1.75 !important;
  margin-bottom: 2rem !important;
  text-align: center !important;
  display: block !important;
  visibility: visible !important;
}

main .why-professional-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1.25rem !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
}

main .why-professional-list li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 1rem !important;
  padding: 1.5rem !important;
  background: #fff !important;
  border-radius: 12px !important;
  border-left: 3px solid var(--primary) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.3s ease !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

main .why-professional-list li:hover {
  transform: translateX(4px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

main .why-professional-list li svg {
  flex-shrink: 0 !important;
  color: var(--primary) !important;
  margin-top: 0.2rem !important;
  width: 22px !important;
  height: 22px !important;
  visibility: visible !important;
  opacity: 1 !important;
  display: block !important;
}

main .why-professional-list li div {
  flex: 1 !important;
  font-size: 0.95rem !important;
  color: var(--text-gray) !important;
  line-height: 1.65 !important;
  visibility: visible !important;
  opacity: 1 !important;
  display: block !important;
}

main .why-professional-list li strong {
  color: var(--text-dark) !important;
  font-weight: 600 !important;
  display: block !important;
  margin-bottom: 0.4rem !important;
  font-size: 0.95rem !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Next Steps Section - Komplett neu gestylt */
main .next-steps-section {
  padding: 4rem 6vw !important;
  background: #fff !important;
  margin: 0 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

main .next-steps-section .container {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 2rem !important;
  display: block !important;
  visibility: visible !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

main .next-steps-content {
  text-align: center !important;
  display: block !important;
  visibility: visible !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

main .next-steps-content h2 {
  font-size: clamp(1.75rem, 3vw, 2.25rem) !important;
  font-weight: 700 !important;
  color: var(--text-dark) !important;
  margin-bottom: 1rem !important;
}

main .next-steps-content > p {
  font-size: 1.05rem !important;
  color: var(--text-gray) !important;
  margin-bottom: 2.5rem !important;
  max-width: 700px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  line-height: 1.75 !important;
}

main .next-steps-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1.5rem !important;
  margin-bottom: 2.5rem !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
}

main .next-step-card {
  background: #f8fafc !important;
  border-radius: 12px !important;
  padding: 2rem 1.75rem !important;
  border: 1px solid rgba(30, 64, 175, 0.1) !important;
  transition: all 0.3s ease !important;
  visibility: visible !important;
  opacity: 1 !important;
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

main .next-step-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1) !important;
  border-color: var(--primary) !important;
  background: #fff !important;
}

main .next-step-number {
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, var(--primary), var(--primary-blue)) !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  margin: 0 auto 1.25rem !important;
  box-shadow: 0 4px 16px rgba(255, 122, 24, 0.25) !important;
}

main .next-step-card h3 {
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: var(--text-dark) !important;
  margin-bottom: 0.75rem !important;
  display: block !important;
  visibility: visible !important;
}

main .next-step-card p {
  font-size: 0.95rem !important;
  color: var(--text-gray) !important;
  line-height: 1.65 !important;
  margin: 0 !important;
  display: block !important;
  visibility: visible !important;
}

main .next-steps-cta {
  margin-top: 1.5rem !important;
}

/* Responsive Design */
@media (max-width: 968px) {
  main .reasons-hero {
    padding: 4rem 4vw !important;
    min-height: 400px !important;
  }

  main .intro-section,
  main .reasons-section,
  main .faq-reasons-section,
  main .why-professional-section,
  main .next-steps-section {
    padding: 3rem 4vw !important;
  }

  main .reasons-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  main .reason-card {
    padding: 2rem !important;
  }

  main .reason-card-full {
    grid-column: 1 !important;
  }

  main .reason-icon {
    width: 56px !important;
    height: 56px !important;
    margin-bottom: 1rem !important;
  }

  main .reason-card h2 {
    font-size: 1.5rem !important;
    margin-bottom: 1rem !important;
  }

  main .reason-list li {
    font-size: 0.95rem !important;
    padding-left: 1.25rem !important;
  }

  main .reasons-cta {
    padding: 2.5rem 2rem !important;
  }

  main .faq-reasons-grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }

  main .next-steps-grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }
}

@media (max-width: 768px) {
  main .reasons-hero {
    padding: 3rem 3vw !important;
    min-height: 350px !important;
  }

  main .reasons-hero .hero-actions {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  main .reasons-hero .hero-actions .btn {
    width: 100% !important;
  }

  main .intro-section,
  main .reasons-section,
  main .faq-reasons-section,
  main .why-professional-section,
  main .next-steps-section {
    padding: 2.5rem 3vw !important;
  }

  main .reasons-cta {
    padding: 2.5rem 2rem !important;
  }
}

@media (max-width: 480px) {
  main .reasons-hero {
    padding: 2.5rem 2vw !important;
    min-height: 320px !important;
  }

  main .intro-section,
  main .reasons-section,
  main .faq-reasons-section,
  main .why-professional-section,
  main .next-steps-section {
    padding: 2rem 2vw !important;
  }

  main .reason-card,
  main .faq-reason-item,
  main .why-professional-list li,
  main .next-step-card {
    padding: 1.5rem !important;
  }

  main .reasons-cta {
    padding: 2rem 1.5rem !important;
  }
}