/* 🌘 Universeller Darkmode mit Ausnahmen für .card – logisch & harmonisch */
@media (prefers-color-scheme: dark) {
  html, body {
    background-color: #111 !important;
    color: #f1f1f1 !important;
  }

  section,
  .hero,
  .cta,
  .about-section,
  .leistungen,
  .angebot-detail,
  .therapy-info,
  .therapy-target,
  .form-box,
  .form-wrapper,
  .contact-section,
  .praxisinfo,
  .textblock,
  .white-box,
  .gray-section,
  .highlight,
  .highlight-area,
  .modal,
  .tooltip,
  .info-box {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
    border-color: #333 !important;
  }

  header,
  nav,
  footer,
  .footer,
  .footer-top,
  .footer-bottom {
    background-color: #111 !important;
    color: #ffffff !important;
  }

  .footer p span {
    background-color: rgba(255,255,255,0.1);
  }

  h1, h2, h3, h4, h5, h6,
  p, li, span, label, strong,
  .text, .content, .description {
    color: #ffffff !important;
  }

  a {
    color: #9ad3ff !important;
  }

  a:hover {
    color: #c6f0ff !important;
  }

  button,
  .button,
  .btn-primary,
  .submit-button,
  .cta a.button,
  .cta button {
    background-color: #2a2a2a !important;
    color: #ffffff !important;
    border: 1px solid #444 !important;
  }

  input,
  textarea,
  select {
    background-color: #222 !important;
    color: #ffffff !important;
    border: 1px solid #555 !important;
  }

  input::placeholder,
  textarea::placeholder {
    color: #aaaaaa !important;
  }

  .muted,
  .note,
  small,
  .secondary {
    color: #bbbbbb !important;
  }

  img.dark-invert,
  svg.dark-invert {
    filter: invert(1) hue-rotate(180deg);
  }
}


/* ✅ FAQ-Farben im Darkmode überschreiben */
#faq,
#faq * {
  background-color: #ffffff !important;
  color: #111111 !important;
}

/* ✅ Universeller Darkmode-Fix für alle FAQ-Blöcke */
.faq-item,
[class*="faq"] {
  background-color: #ffffff !important;
  color: #111111 !important;
}

/* 🛡 Stärkerer FAQ-Fix bei CSS-Kollisionen */
body.darkmode .faq-item,
body.darkmode [class*="faq"] {
  background-color: #ffffff !important;
  color: #111111 !important;
}

/* 🐞 DEBUG-STYLES für FAQ im Darkmode sichtbar machen */
body.darkmode .faq-item,
body.darkmode [class*="faq"] {
  background-color: #ffffff !important;
  color: #111111 !important;
  position: relative;
}


/* 🛠️ Sichtbarkeit der FAQ-Inhalte sicherstellen im Darkmode */
body.darkmode .faq-item *,
body.darkmode [class*="faq"] * {
  color: #111111 !important;
  visibility: visible !important;
  opacity: 1 !important;
  display: block !important;
}

/* ✅ Gezielter Fix: Textfarbe in FAQ-Boxen schwarz setzen */
body.darkmode .faq-item p,
body.darkmode .faq-item span,
body.darkmode .faq-item h3,
body.darkmode .faq-item div {
  color: #000000 !important;
  border-left: 3px solid green; /* sichtbar für Debug-Zwecke */
}

/* 🚫 Entferne störende Markierungen, Umrandungen und Schatten */
body.darkmode .faq-item,
body.darkmode .faq-item * {
  border: none !important;
  border-left: none !important;
  outline: none !important;
  box-shadow: none !important;
  background-image: none !important;
}