/*
 * Light Mode CSS für FusionFitness Ulmen
 * Speziell für Physiotherapie und Diagnosen Seiten
 */

.light-mode {
  --bg-color: #ffffff;
  --bg-secondary: #f8f9fa;
  --bg-tertiary: #e9ecef;
  --text-primary: #212529;
  --text-secondary: #495057;
  --text-muted: #6c757d;
  --border-color: #dee2e6;
  --shadow-color: rgba(0, 0, 0, 0.1);
  --primary-yellow: #ffc107;
  --primary-yellow-dark: #e0a800;
}

/* Body und Grundelemente */
.light-mode body {
  background-color: var(--bg-color);
  color: var(--text-primary);
}

.light-mode .container {
  background-color: transparent;
}

/* Header und Navigation */
.light-mode .page-header {
  color: #212529;
}

/* Spezifisches Header-Bild für Physiotherapie und Diagnosen Seiten */
body[data-page="physiotherapie"] .page-header,
body[data-page="diagnosen"] .page-header {
  background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('../images/physio.webp');
  background-position: center;
}

body[data-page="physiotherapie"] .light-mode .page-header,
body[data-page="diagnosen"] .light-mode .page-header {
  background-image: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)), url('../images/physio.webp');
  color: #212529;
}

.light-mode .breadcrumb a {
  color: #495057;
}

/* Sektionen */
.light-mode .section {
  background-color: var(--bg-color);
  color: var(--text-primary);
}

/* Titel und Text */
.light-mode .section-title h2 {
  color: var(--text-primary);
}

.light-mode .lead {
  color: var(--text-secondary);
}

.light-mode .feature-title {
  color: var(--text-primary);
}

.light-mode .feature-description {
  color: var(--text-secondary);
}

/* Feature Cards */
.light-mode .feature-card {
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  box-shadow: 0 2px 8px var(--shadow-color);
  color: var(--text-primary);
  transition: all 0.3s ease;
}

.light-mode .feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 20px var(--shadow-color);
  border-color: var(--primary-yellow);
}

/* Kategorie-Buttons */
.light-mode .kurs-category {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: 2px solid var(--border-color);
  transition: all 0.3s ease;
}

.light-mode .kurs-category:hover {
  background: var(--primary-yellow);
  color: #212529;
  border-color: var(--primary-yellow);
  transform: translateY(-2px);
}

.light-mode .kurs-category.active {
  background: var(--primary-yellow);
  color: #212529;
  border-color: var(--primary-yellow-dark);
}

.light-mode .kurs-category i {
  color: var(--primary-yellow-dark);
}

.light-mode .kurs-category.active i,
.light-mode .kurs-category:hover i {
  color: #212529;
}

/* Grid Layout */
.light-mode .grid {
  gap: 2rem;
}

.light-mode .contact-card p {
  color: var(--text-primary);
}

/* Spezifische Anpassungen für Bilder */
.light-mode .feature-card img {
  border-radius: 8px;
  opacity: 0.9;
}

.light-mode .feature-card:hover img {
  opacity: 1;
}

/* Toggle Button Styling */
.theme-toggle {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
  background: var(--primary);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.theme-toggle:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.theme-toggle i {
  font-size: 1rem;
  color: #212529;
  transition: transform 0.3s ease;
}

.light-mode .theme-toggle {
  background: var(--text-primary);
}

.light-mode .theme-toggle i {
  color: var(--primary-yellow);
}

/* Animationen für Theme-Wechsel */
body {
  transition: background-color 0.3s ease, color 0.3s ease;
}

.section,
.feature-card,
.kurs-category {
  transition: all 0.3s ease;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .theme-toggle {
    width: 45px;
    height: 45px;
    top: 15px;
    right: 15px;
  }
  
  .theme-toggle i {
    font-size: 1rem;
  }
}

/* FAQ Accordion Styling */
.light-mode .faq-item {
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  box-shadow: 0 2px 8px var(--shadow-color);
}

.light-mode .faq-question {
  /* background: var(--bg-tertiary); */
  color: var(--text-primary) !important;
  /* border-bottom: 1px solid var(--border-color); */
}

.light-mode .faq-question h3 {
  color: var(--text-primary) !important;
}

/* .light-mode .faq-question:hover {
  background: var(--bg-tertiary);
  color: #212529 !important;
} */

.light-mode .faq-question:hover h3 {
  color: #212529 !important;
}

.light-mode .faq-answer {
  background: var(--bg-color);
  color: var(--text-secondary) !important;
}

.light-mode .faq-answer p {
  color: var(--text-secondary) !important;
}

/* Prozess-Elemente Styling */
.light-mode .process-step {
  color: var(--text-primary) !important;
}

.light-mode .process-content {
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px var(--shadow-color);
  color: var(--text-primary) !important;
}

.light-mode .process-step h3 {
  color: var(--text-primary) !important;
}

.light-mode .process-step p {
  color: var(--text-secondary) !important;
}

.light-mode .process-content h3 {
  color: var(--text-primary) !important;
}

.light-mode .process-content p {
  color: var(--text-secondary) !important;
}

.light-mode .process-content ul {
  color: var(--text-secondary) !important;
}

.light-mode .process-content ul li {
  color: var(--text-secondary) !important;
}

.light-mode .process-number {
  background: var(--primary-yellow);
  color: #212529 !important;
}

/* Footer Styling */
.light-mode footer {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border-top: 1px solid var(--border-color);
}

.light-mode footer h3,
.light-mode footer h4 {
  color: var(--text-primary);
}

.light-mode footer p,
.light-mode footer li {
  color: var(--text-secondary);
}

.light-mode footer a {
  color: var(--text-secondary);
  transition: color 0.3s ease;
}

.light-mode footer a:hover {
  color: var(--primary-yellow);
}

.light-mode .footer-social a {
  background: var(--bg-color);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

.light-mode .footer-social a:hover {
  background: var(--primary-yellow);
  color: #212529;
  border-color: var(--primary-yellow);
}

/* CTA Section Styling */
.light-mode .cta-section {
  background: var(--bg-color);
  color: var(--text-primary);
}

.light-mode .cta-wrapper {
  background: var(--bg-tertiary);
}

.light-mode .cta-section h2 {
  color: var(--text-primary);
}

.light-mode .cta-section p {
  color: var(--text-secondary);
}

.light-mode .cta-section .btn {
  background: var(--primary-yellow);
  color: #212529;
  border: 2px solid var(--primary-yellow);
}

.light-mode .cta-section .btn:hover {
  background: transparent;
  color: var(--primary-yellow);
  border-color: var(--primary-yellow);
}

.light-mode .cta-section .btn-outline {
  background: transparent;
  color: var(--text-primary);
  border: 2px solid var(--text-primary);
}

.light-mode .cta-section .btn-outline:hover {
  background: var(--text-primary);
  color: var(--bg-color);
}

/* Zusätzliche Verbesserungen für besseren Kontrast */
.light-mode .kurs-categories {
  padding: 2rem 0;
  border-radius: 10px;
  margin-bottom: 2rem;
}

.light-mode .features-content {
  background: var(--bg-color);
  border-radius: 10px;
  padding: 2rem;
  box-shadow: 0 4px 20px var(--shadow-color);
}