/* =====================================================================
   DARK MODE - nur [data-theme="dark"] Overrides
   Keine Basis-Styles hier duplizieren – Layout/Basis kommen aus
   style.css (pages-common, buttons-forms-cards, pages, …).
   ===================================================================== */
[data-theme="dark"] {
  /* Farben Markenwelt - Dark Mode */
  --primary: #2a3d5f;
  --primary-600: #1a2d4f;
  --primary-100: var(--bg-subtle);
  /* Textfarben - Dark Mode (Text ist hell auf dunklem Hintergrund) */
  --text-dark: #111111;
  --text-light: #ffffff;
  --text-muted: #a0a8b0;
  --text: var(--text-light);
  --muted: var(--text-muted);

  /* Rahmenfarben - Dark Mode */
  --border: #3a4a5a;
  --border-strong: #4a5a6a;

  /* Hintergrundfarben - Dark Mode */
  --bg-surface: #1a1f2e;
  --bg-dark: #1a1f2e;
  --bg-subtle: #252a35;
  --bg: var(--bg-dark);

  /* Hover & Schatten - Dark Mode */
  --primaryHover: #3a4d6f;
  --shadow: rgba(0, 0, 0, 0.4);
  /* Fokus - Dark Mode */
  --focus-ring: 3px solid #00d4ff;
  --focus-alt: 3px solid #66d4ff;
  --skip-bg: var(--primary);
  --skip-color: var(--text-light);

  /* Admin Partner-Form: kein dunkler Block/Balken, Hell/Dunkel über Variablen */
  --partner-fieldset-bg: transparent;
  --partner-fieldset-border: rgba(255, 255, 255, 0.06);
  --partner-section-title-border: none;
  --partner-section-title-color: var(--text-light);
  --partner-input-bg: var(--bg-dark);
  --partner-input-color: var(--text-light);
  --partner-input-border: 1px solid rgba(255, 255, 255, 0.12);
  --partner-label-color: var(--text-light);
  --partner-placeholder-color: var(--text-muted);
}

/* Dark Mode - Überschreibe explizite Farben */
[data-theme="dark"] html {
  background: var(--bg-dark);
}

[data-theme="dark"] body {
  background: var(--bg-dark);
  color: var(--text-light);
}

[data-theme="dark"] main {
  background: var(--bg-dark);
  color: var(--text-light);
}

[data-theme="dark"] #main-content {
  background: var(--bg-dark);
  color: var(--text-light);
}

/* Dark Mode - Alle Text-Elemente */
[data-theme="dark"] p,
[data-theme="dark"] span,
[data-theme="dark"] div,
[data-theme="dark"] li,
[data-theme="dark"] td,
[data-theme="dark"] th,
[data-theme="dark"] label {
  color: var(--text-light);
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
  color: var(--secondary);
}

/* Dark Mode - Überschreibe alle festen Textfarben */
[data-theme="dark"] *[style*="color: #111"],
[data-theme="dark"] *[style*="color:#111"],
[data-theme="dark"] *[style*="color: #000"],
[data-theme="dark"] *[style*="color:#000"],
[data-theme="dark"] *[style*="color: #1b1b1b"],
[data-theme="dark"] *[style*="color:#1b1b1b"],
[data-theme="dark"] *[style*="color: #333"],
[data-theme="dark"] *[style*="color:#333"] {
  color: var(--text-light);
}

[data-theme="dark"] .service-wrapper {
  background: var(--bg-dark) !important;
  color: var(--text-light) !important;
}

[data-theme="dark"] .service-content,
[data-theme="dark"] .service-section {
  background: var(--bg-dark) !important;
  color: var(--text-light) !important;
}

/* Dark Mode - Service Section mit höherer Spezifität */
[data-theme="dark"] .service-content .service-section,
[data-theme="dark"] #main-content .service-section,
[data-theme="dark"] main .service-section {
  background: var(--bg-dark) !important;
  color: var(--text-light) !important;
}

/* Dark Mode - Service Section spezifische Styles */
[data-theme="dark"] .service-section * {
  color: var(--text-light);
}

[data-theme="dark"] .service-section h2 {
  color: var(--secondary) !important;
  border-left-color: var(--secondary) !important;
}

[data-theme="dark"] .service-section h1,
[data-theme="dark"] .service-section h3,
[data-theme="dark"] .service-section h4,
[data-theme="dark"] .service-section h5,
[data-theme="dark"] .service-section h6 {
  color: var(--secondary) !important;
}

[data-theme="dark"] .card {
  background: var(--bg-surface);
  border-color: var(--border);
  color: var(--text-light);
}

[data-theme="dark"] .card header {
  border-bottom-color: var(--border);
  background: var(--primary);
  color: var(--text-light);
}

[data-theme="dark"] .card header h1,
[data-theme="dark"] .card header h2,
[data-theme="dark"] .card header h3 {
  color: var(--secondary);
}

[data-theme="dark"] .card .body,
[data-theme="dark"] .card .content {
  background: var(--bg-surface);
  color: var(--text-light);
}

/* Dark Mode - Alle Karten-Varianten */
[data-theme="dark"] .card *:not(header *):not(.btn):not(button):not(a.btn) {
  color: var(--text-light);
}

[data-theme="dark"] .card header,
[data-theme="dark"] .card header * {
  color: var(--text-light);
}

/* Dark Mode - Alle Karten mit festen Hintergründen */
[data-theme="dark"] .card[style*="background"],
[data-theme="dark"] .card[style*="background: #fff"],
[data-theme="dark"] .card[style*="background:#fff"],
[data-theme="dark"] .card[style*="background: white"],
[data-theme="dark"] .card[style*="background:white"] {
  background: var(--bg-surface) !important;
}

[data-theme="dark"] .service-sidebar {
  background: var(--bg-dark);
  border-color: var(--border);
  color: var(--text-light);
}

[data-theme="dark"] .service-sidebar * {
  color: var(--text-light);
}

[data-theme="dark"] .service-sidebar a {
  color: var(--text-light);
}

[data-theme="dark"] .service-sidebar a:hover {
  background: var(--accent, #0096a6);
  color: var(--text-light);
}

[data-theme="dark"] .service-sidebar a.is-active {
  background: var(--accent, #0096a6);
  color: var(--text-light);
}

[data-theme="dark"] .form-group,
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background: var(--bg-dark) !important;
  color: var(--text-light) !important;
  border-color: var(--border) !important;
}

/* Dark Mode - Textarea bleibt schwarz auch bei Hover/Focus */
[data-theme="dark"] textarea:hover,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] .mp-textarea:hover,
[data-theme="dark"] .mp-textarea:focus {
  background: var(--bg-dark) !important;
  color: var(--text-light) !important;
  border-color: var(--border) !important;
}

[data-theme="dark"] .alert {
  background: var(--bg-subtle);
  border-color: var(--border);
  color: var(--text-light);
}

[data-theme="dark"] .alert.error {
  background: var(--bg-subtle);
  border-color: var(--border-strong);
}

[data-theme="dark"] .register {
  background: var(--bg-subtle);
  border-color: var(--border);
}

[data-theme="dark"] .notice {
  background: var(--bg-subtle);
  border-color: var(--border);
  color: var(--text-light);
}

/* Überschreibe alle festen Hintergrundfarben im Dark Mode */
[data-theme="dark"] [style*="background: #f5f7fb"],
[data-theme="dark"] [style*="background:#f5f7fb"],
[data-theme="dark"] [style*="background: #eefaf1"],
[data-theme="dark"] [style*="background:#eefaf1"],
[data-theme="dark"] [style*="background: #fff4f4"],
[data-theme="dark"] [style*="background:#fff4f4"],
[data-theme="dark"] [style*="background: #f0f5ff"],
[data-theme="dark"] [style*="background:#f0f5ff"] {
  background: var(--bg-subtle) !important;
}

/* Dark Mode für weitere wichtige Elemente */
[data-theme="dark"] .messages,
[data-theme="dark"] .messages li {
  background: var(--bg-subtle);
  color: var(--text-light);
  border-color: var(--border);
}

[data-theme="dark"] .hint,
[data-theme="dark"] small.hint {
  color: var(--text-muted);
}

/* Dark Mode - Kontakt-Seite: Hinweis und category-info bleiben dunkel beim Hover */
[data-theme="dark"] main.page-kontakt .hint,
[data-theme="dark"] main.page-kontakt .hint:hover {
  background: transparent !important;
  color: var(--text-muted) !important;
}

[data-theme="dark"] main.page-kontakt .category-info {
  background: var(--bg-subtle) !important;
  border-color: var(--border) !important;
  color: var(--text-light) !important;
}

[data-theme="dark"] main.page-kontakt .category-info:hover {
  background: var(--bg-subtle) !important;
  border-left-color: var(--secondary) !important;
  color: var(--text-light) !important;
}

[data-theme="dark"] main.page-kontakt .category-info__title {
  color: var(--secondary) !important;
}

[data-theme="dark"] main.page-kontakt .category-info__description {
  color: var(--text-light) !important;
}

[data-theme="dark"] .site-header {
  background: var(--primary);
  border-bottom-color: var(--border);
}

/* Theme-Toggle: Im Dark Mode Mond anzeigen, Sonne ausblenden */
[data-theme="dark"] .theme-icon--sun {
  display: none !important;
}

[data-theme="dark"] .theme-icon--moon {
  display: block !important;
}

[data-theme="dark"] .theme-toggle {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: var(--text-light) !important;
}

[data-theme="dark"] .theme-toggle:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

[data-theme="dark"] .main-nav {
  background: var(--primary);
  border-color: var(--border);
}

/* Dark Mode - Überschreibe alle weißen Hintergründe */
[data-theme="dark"] * {
  /* Überschreibe explizite weiße Hintergründe */
}

[data-theme="dark"] [style*="background: #fff"],
[data-theme="dark"] [style*="background:#fff"],
[data-theme="dark"] [style*="background: #ffffff"],
[data-theme="dark"] [style*="background:#ffffff"],
[data-theme="dark"] [style*="background: white"],
[data-theme="dark"] [style*="background:white"] {
  background: var(--bg-surface) !important;
}

[data-theme="dark"] [style*="color: #111"],
[data-theme="dark"] [style*="color:#111"],
[data-theme="dark"] [style*="color: #000"],
[data-theme="dark"] [style*="color:#000"],
[data-theme="dark"] [style*="color: #1b1b1b"],
[data-theme="dark"] [style*="color:#1b1b1b"] {
  color: var(--text-dark) !important;
}

/* Dark Mode für spezifische Klassen mit festen Farben */
[data-theme="dark"] .service-sidebar {
  background: var(--bg-dark);
}

[data-theme="dark"] #main-content .service-sidebar {
  background: var(--bg-dark);
  border-color: var(--border);
  color: var(--text-light);
}

[data-theme="dark"] #main-content .service-sidebar * {
  color: var(--text-light);
}

[data-theme="dark"] #main-content .service-sidebar a {
  color: var(--text-light);
}

[data-theme="dark"] #main-content .service-sidebar a:hover,
[data-theme="dark"] .service-layout .service-sidebar a:hover {
  background: var(--accent, #0096a6);
  color: var(--text-light);
}

[data-theme="dark"] #main-content .service-sidebar a.is-active,
[data-theme="dark"] .service-layout .service-sidebar a.is-active {
  background: var(--accent, #0096a6);
  color: var(--text-light);
}

/* Dark Mode - Überschreibe feste Farben in CSS-Klassen */
[data-theme="dark"] .nav-user__menu {
  background: var(--bg-dark) !important;
  color: var(--text-light) !important;
  border-color: var(--border) !important;
}

[data-theme="dark"] .nav-user__menu * {
  color: var(--text-light) !important;
}

[data-theme="dark"] .nav-user__menu a,
[data-theme="dark"] .nav-user__menu a:link,
[data-theme="dark"] .nav-user__menu a:visited {
  color: var(--text-light) !important;
  background: transparent !important;
}

[data-theme="dark"] .nav-user__menu a:hover,
[data-theme="dark"] .nav-user__menu a:focus {
  background: var(--secondary) !important;
  color: #000000 !important;
}

/* Dark Mode - Alle Text-Elemente beim Hover schwarz (überschreibt die * Regel und Standard-Regeln) */
[data-theme="dark"] .nav-user__menu a:hover,
[data-theme="dark"] .nav-user__menu a:hover *,
[data-theme="dark"] .nav-user__menu a:focus,
[data-theme="dark"] .nav-user__menu a:focus * {
  color: #000000 !important;
}

/* Dark Mode - Icons/Logos im User-Menü weiß */
[data-theme="dark"] .nav-user__menu svg,
[data-theme="dark"] .nav-user__menu path,
[data-theme="dark"] .nav-user__menu use,
[data-theme="dark"] .nav-user__menu i {
  fill: var(--text-light) !important;
  color: var(--text-light) !important;
  stroke: var(--text-light) !important;
}

/* Dark Mode - Icons beim Hover schwarz (weil Hintergrund türkis) */
[data-theme="dark"] .nav-user__menu a:hover svg,
[data-theme="dark"] .nav-user__menu a:hover path,
[data-theme="dark"] .nav-user__menu a:hover use,
[data-theme="dark"] .nav-user__menu a:hover i {
  fill: #000000 !important;
  color: #000000 !important;
  stroke: #000000 !important;
}

/* Dark Mode - Gruppentitel und Separator im User-Menü */
[data-theme="dark"] .nav-user__menu .nav-user__group-title {
  color: var(--secondary) !important;
}

[data-theme="dark"] .nav-user__menu .nav-user__separator {
  background: var(--border) !important;
}

[data-theme="dark"] #home-main .jump-nav nav {
  background: var(--bg-surface);
  color: var(--text-light);
}

/* Überschreibe alle CSS-Klassen mit background: #fff */
[data-theme="dark"] .jump-nav nav,
[data-theme="dark"] .nav-user__menu {
  background: var(--bg-dark) !important;
  color: var(--text-light) !important;
  border-color: var(--border) !important;
}

/* Dark Mode - Feature Items, Donation Counter, Wer-wir-sind, Contact Card */
[data-theme="dark"] .feature-item,
[data-theme="dark"] .donation-counter,
[data-theme="dark"] .donation-counter--top,
[data-theme="dark"] .donation-counter__inner,
[data-theme="dark"] .wer-wir-sind,
[data-theme="dark"] #wer-wir-sind,
[data-theme="dark"] .contact-card,
[data-theme="dark"] main.page-kontakt .contact-card,
[data-theme="dark"] .creator-title,
[data-theme="dark"] .creator-section,
[data-theme="dark"] main.page-partner .creator-section,
[data-theme="dark"] main.page-partner .creator-section .card,
[data-theme="dark"] .steps-list,
[data-theme="dark"] #aktivierung .steps-list {
  background: var(--bg-dark) !important;
  color: var(--text-light) !important;
  border-color: var(--border) !important;
}

/* Dark Mode - Creator Title spezifische Styles */
[data-theme="dark"] .creator-title *,
[data-theme="dark"] .creator-section *,
[data-theme="dark"] main.page-partner .creator-section * {
  color: var(--text-light);
}

[data-theme="dark"] .creator-title h1,
[data-theme="dark"] .creator-title h2,
[data-theme="dark"] .creator-title h3,
[data-theme="dark"] .creator-section h1,
[data-theme="dark"] .creator-section h2,
[data-theme="dark"] .creator-section h3,
[data-theme="dark"] main.page-partner .creator-section h1,
[data-theme="dark"] main.page-partner .creator-section h2,
[data-theme="dark"] main.page-partner .creator-section h3 {
  color: var(--secondary) !important;
}

/* Dark Mode - Creator Section mit höherer Spezifität */
[data-theme="dark"] main.page-partner .creator-section {
  background: var(--bg-dark) !important;
  color: var(--text-light) !important;
}

[data-theme="dark"] main.page-partner .creator-section .card {
  background: var(--bg-dark) !important;
  color: var(--text-light) !important;
  border-color: var(--border) !important;
}

/* Dark Mode - Social Links: dunkelblau normal, türkis hover */
[data-theme="dark"] main.page-partner .socials a,
[data-theme="dark"] .socials a {
  background: var(--primary) !important;
  color: var(--text-light) !important;
  border-color: var(--primary) !important;
}

[data-theme="dark"] main.page-partner .socials a:hover,
[data-theme="dark"] .socials a:hover {
  background: var(--secondary) !important;
  color: var(--text-light) !important;
  border-color: var(--secondary) !important;
}

[data-theme="dark"] main.page-partner .socials a:focus-visible,
[data-theme="dark"] .socials a:focus-visible {
  outline: 2px solid var(--secondary) !important;
  outline-offset: 2px;
}

/* Dark Mode - Buttons von Unternehmen: Hover türkis */
[data-theme="dark"] .btn:hover,
[data-theme="dark"] .btn-primary:hover,
[data-theme="dark"] #unterstuetzen .btn:hover,
[data-theme="dark"] .feature-item .btn:hover,
[data-theme="dark"] .card .btn:hover {
  background: var(--secondary) !important;
  border-color: var(--secondary) !important;
  color: #000000 !important;
}

/* Dark Mode - Alle Texte in Buttons beim Hover schwarz (Unternehmen) */
[data-theme="dark"] #unterstuetzen .btn:hover,
[data-theme="dark"] #unterstuetzen .btn:hover span,
[data-theme="dark"] #unterstuetzen .btn:hover div,
[data-theme="dark"] #unterstuetzen .btn:hover p,
[data-theme="dark"] #unterstuetzen .btn:hover *:not(svg):not(path):not(use) {
  color: #000000 !important;
}

/* Dark Mode - Partner Seite Buttons: Hover türkis */
[data-theme="dark"] main.page-partner .btn,
[data-theme="dark"] main.page-partner .btn-primary {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--text-light) !important;
}

[data-theme="dark"] main.page-partner .btn:hover,
[data-theme="dark"] main.page-partner .btn-primary:hover,
[data-theme="dark"] main.page-partner .card .btn:hover,
[data-theme="dark"] main.page-partner .feature-item .btn:hover,
[data-theme="dark"] main.page-partner .creator-section .btn:hover,
[data-theme="dark"] main.page-partner .card .btn-primary:hover,
[data-theme="dark"] main.page-partner .grid .btn:hover {
  background: var(--secondary) !important;
  border-color: var(--secondary) !important;
  color: #000000 !important;
  filter: none !important;
  transform: none !important;
}

/* Dark Mode - Icons in Buttons beim Hover schwarz */
[data-theme="dark"] .btn:hover svg,
[data-theme="dark"] .btn:hover path,
[data-theme="dark"] .btn:hover use,
[data-theme="dark"] .btn-primary:hover svg,
[data-theme="dark"] .btn-primary:hover path,
[data-theme="dark"] .btn-primary:hover use,
[data-theme="dark"] main.page-partner .btn:hover svg,
[data-theme="dark"] main.page-partner .btn:hover path,
[data-theme="dark"] main.page-partner .btn:hover use,
[data-theme="dark"] main.page-partner .btn-primary:hover svg,
[data-theme="dark"] main.page-partner .btn-primary:hover path,
[data-theme="dark"] main.page-partner .btn-primary:hover use {
  fill: #000000 !important;
  color: #000000 !important;
  stroke: #000000 !important;
}

/* Dark Mode - Text in Buttons beim Hover schwarz */
[data-theme="dark"] .btn:hover,
[data-theme="dark"] .btn:hover *,
[data-theme="dark"] .btn-primary:hover,
[data-theme="dark"] .btn-primary:hover *,
[data-theme="dark"] main.page-partner .btn:hover,
[data-theme="dark"] main.page-partner .btn:hover *,
[data-theme="dark"] main.page-partner .btn-primary:hover,
[data-theme="dark"] main.page-partner .btn-primary:hover *,
[data-theme="dark"] #unterstuetzen .btn:hover,
[data-theme="dark"] #unterstuetzen .btn:hover *,
[data-theme="dark"] .feature-item .btn:hover,
[data-theme="dark"] .feature-item .btn:hover *,
[data-theme="dark"] .card .btn:hover,
[data-theme="dark"] .card .btn:hover * {
  color: #000000 !important;
}

/* Dark Mode - Icons in Influencer/Creator Section beim Hover schwarz */
[data-theme="dark"] .creator-section .btn:hover svg,
[data-theme="dark"] .creator-section .btn:hover path,
[data-theme="dark"] .creator-section .btn:hover use,
[data-theme="dark"] main.page-partner .creator-section .btn:hover svg,
[data-theme="dark"] main.page-partner .creator-section .btn:hover path,
[data-theme="dark"] main.page-partner .creator-section .btn:hover use,
[data-theme="dark"] .creator-section .socials a:hover svg,
[data-theme="dark"] .creator-section .socials a:hover path,
[data-theme="dark"] main.page-partner .creator-section .socials a:hover svg,
[data-theme="dark"] main.page-partner .creator-section .socials a:hover path {
  fill: #000000 !important;
  color: #000000 !important;
  stroke: #000000 !important;
}

/* Dark Mode - Contact Card spezifische Styles */
[data-theme="dark"] .contact-card *,
[data-theme="dark"] main.page-kontakt .contact-card * {
  color: var(--text-light);
}

[data-theme="dark"] .contact-card h1,
[data-theme="dark"] .contact-card h2,
[data-theme="dark"] .contact-card h3,
[data-theme="dark"] .contact-card .contact-title,
[data-theme="dark"] main.page-kontakt .contact-card .contact-title {
  color: var(--secondary) !important;
}

/* Dark Mode - Kontakt Formular Input-Felder: schwarz mit weißer Schrift */
[data-theme="dark"] main.page-kontakt .contact-form input,
[data-theme="dark"] main.page-kontakt .contact-form textarea,
[data-theme="dark"] main.page-kontakt .contact-form select {
  background: var(--bg-dark) !important;
  color: var(--text-light) !important;
  border-color: var(--border) !important;
}

[data-theme="dark"] main.page-kontakt .contact-form input::placeholder,
[data-theme="dark"] main.page-kontakt .contact-form textarea::placeholder {
  color: var(--text-muted) !important;
}

[data-theme="dark"] main.page-kontakt .contact-form label {
  color: var(--text-light) !important;
}

[data-theme="dark"] #main-content #wer-wir-sind.service-header--split {
  background: var(--bg-dark);
  color: var(--text-light);
}

[data-theme="dark"] #main-content #wer-wir-sind .hero-copy h2 {
  color: var(--secondary);
}

/* Dark Mode - Feature Body Text */
[data-theme="dark"] .feature-body,
[data-theme="dark"] .feature-body p,
[data-theme="dark"] .feature-body span,
[data-theme="dark"] .feature-body div,
[data-theme="dark"] .feature-body li,
[data-theme="dark"] .feature-body * {
  color: var(--text-light);
}

/* Dark Mode - Spezifische Feature Body Varianten */
[data-theme="dark"] #unterstuetzen .feature-body,
[data-theme="dark"] #unterstuetzen .feature-body p,
[data-theme="dark"] #warum .feature-body,
[data-theme="dark"] #warum .feature-body p,
[data-theme="dark"] #vorteile .feature-body,
[data-theme="dark"] #vorteile .feature-body p,
[data-theme="dark"] #vorteile .feature-body * {
  color: var(--text-light);
}

/* Dark Mode - Überschriften in Türkis */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
  color: var(--secondary) !important;
}

/* Dark Mode - Feature Body Überschriften bleiben türkis */
[data-theme="dark"] .feature-body h1,
[data-theme="dark"] .feature-body h2,
[data-theme="dark"] .feature-body h3,
[data-theme="dark"] .feature-body h4,
[data-theme="dark"] .feature-body h5,
[data-theme="dark"] .feature-body h6 {
  color: var(--secondary);
}

/* Dark Mode - Alle Karten-Überschriften in Türkis */
[data-theme="dark"] .card h1,
[data-theme="dark"] .card h2,
[data-theme="dark"] .card h3,
[data-theme="dark"] .card h4,
[data-theme="dark"] .card h5,
[data-theme="dark"] .card h6,
[data-theme="dark"] .card .body h1,
[data-theme="dark"] .card .body h2,
[data-theme="dark"] .card .body h3,
[data-theme="dark"] .card .body h4,
[data-theme="dark"] .card .body h5,
[data-theme="dark"] .card .body h6,
[data-theme="dark"] .card .content h1,
[data-theme="dark"] .card .content h2,
[data-theme="dark"] .card .content h3,
[data-theme="dark"] .card .content h4,
[data-theme="dark"] .card .content h5,
[data-theme="dark"] .card .content h6,
[data-theme="dark"] .card .card__title,
[data-theme="dark"] .cards .card__title,
[data-theme="dark"] .warum-title,
[data-theme="dark"] #warum-title,
[data-theme="dark"] #warum #warum-title,
[data-theme="dark"] .aktivierung-title,
[data-theme="dark"] #aktivierung-title,
[data-theme="dark"] #aktivierung .aktivierung-title,
[data-theme="dark"] .claim,
[data-theme="dark"] #aktivierung .claim,
[data-theme="dark"] .title,
[data-theme="dark"] [class*="title"],
[data-theme="dark"] [class*="Title"],
[data-theme="dark"] [id*="title"],
[data-theme="dark"] [id*="Title"] {
  color: var(--secondary) !important;
}

/* Dark Mode - Spezifische h3 Überschriften */
[data-theme="dark"] #aktivierung h3,
[data-theme="dark"] #aktivierung h3.claim,
[data-theme="dark"] section h3,
[data-theme="dark"] .section h3,
[data-theme="dark"] article h3,
[data-theme="dark"] .article h3,
[data-theme="dark"] div h3,
[data-theme="dark"] .card h3,
[data-theme="dark"] .feature-item h3 {
  color: var(--secondary) !important;
}

/* Dark Mode - Spezifische Titel-Selektoren mit höherer Spezifität */
[data-theme="dark"] #aktivierung .aktivierung-title,
[data-theme="dark"] #aktivierung #aktivierung-title {
  color: var(--secondary) !important;
}

/* Dark Mode - Partner Seite Grid und Karten */
[data-theme="dark"] main.page-partner .grid {
  background: var(--bg-dark);
  color: var(--text-light);
}

[data-theme="dark"] main.page-partner .card {
  background: var(--bg-dark);
  color: var(--text-light);
  border-color: var(--secondary, #00b3c7);
  border-width: 2px;
  box-shadow: 0 2px 12px rgba(0, 179, 199, 0.15);
}

[data-theme="dark"] main.page-partner .section {
  background: var(--bg-dark);
  color: var(--text-light);
}

[data-theme="dark"] main.page-partner .card * {
  color: var(--text-light);
}

[data-theme="dark"] main.page-partner .card h1,
[data-theme="dark"] main.page-partner .card h2,
[data-theme="dark"] main.page-partner .card h3,
[data-theme="dark"] main.page-partner .card h4,
[data-theme="dark"] main.page-partner .card h5,
[data-theme="dark"] main.page-partner .card h6 {
  color: var(--secondary);
}

/* Dark Mode - Alle h3 sind bereits türkis durch die allgemeine Regel oben */
/* Zusätzlich sicherstellen, dass h3 in verschiedenen Kontexten türkis sind */
[data-theme="dark"] section h3,
[data-theme="dark"] .section h3,
[data-theme="dark"] article h3,
[data-theme="dark"] .article h3,
[data-theme="dark"] div h3 {
  color: var(--secondary);
}

/* Dark Mode - Section Content für Newsletter */
[data-theme="dark"] section.content:has(.newsletter-editor) {
  background: var(--bg-dark);
  color: var(--text-light);
}

[data-theme="dark"] section.content:has(.newsletter-editor) h2,
[data-theme="dark"] section.content:has(.newsletter-editor) h3 {
  color: var(--secondary);
}

/* Dark Mode - News: Abhebung vom Seitenhintergrund, Weiterlesen-Button mit Accent-Hover */
[data-theme="dark"] .news-article {
  background: var(--bg-subtle);
  border: 1px solid var(--border, #3a4a5a);
  border-radius: 12px;
  padding: 1rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .news-meta {
  border-bottom-color: var(--border, #3a4a5a);
}

[data-theme="dark"] .news-date,
[data-theme="dark"] .news-type {
  color: var(--text-muted, #a0a8b0);
}

[data-theme="dark"] .news-article h2 {
  color: var(--text-light, #fff);
}

[data-theme="dark"] .news-content,
[data-theme="dark"] .news-content p {
  color: var(--text-light, #e0e0e0);
}

[data-theme="dark"] .news-full {
  border-top-color: var(--border, #3a4a5a);
}

[data-theme="dark"] .news-toggle {
  background: var(--bg-subtle);
  border: 1px solid var(--accent, #0096a6);
  color: var(--accent, #00b3c7);
}

[data-theme="dark"] .news-toggle:hover {
  background: var(--accent, #0096a6);
  border-color: var(--accent, #0096a6);
  color: var(--text-light, #fff);
}

[data-theme="dark"] .news-toggle:focus-visible {
  outline: 2px solid var(--accent, #00d4ff);
  outline-offset: 2px;
}

/* Dark Mode - Konto und Sicherheit */
[data-theme="dark"] #konto-sicherheit {
  background: var(--bg-dark);
  color: var(--text-light);
}

[data-theme="dark"] #konto-sicherheit * {
  color: var(--text-light);
}

[data-theme="dark"] #konto-sicherheit h2,
[data-theme="dark"] #konto-sicherheit h3 {
  color: var(--text-light);
}

[data-theme="dark"] #konto-sicherheit .card {
  background: var(--bg-dark);
  border-color: var(--border);
  color: var(--text-light);
}

[data-theme="dark"] #konto-sicherheit .card * {
  color: var(--text-light);
}

[data-theme="dark"] #konto-sicherheit .card.danger {
  background: var(--bg-dark);
  border-color: var(--border);
  color: var(--text-light);
}

[data-theme="dark"] #konto-sicherheit .card.danger * {
  color: var(--text-light);
}

[data-theme="dark"] #konto-sicherheit label {
  color: var(--text-light);
}

[data-theme="dark"] #konto-sicherheit input[type="password"],
[data-theme="dark"] #konto-sicherheit input[type="text"] {
  background: var(--bg-subtle);
  color: var(--text-light);
  border-color: var(--border);
}

[data-theme="dark"] #konto-sicherheit input[type="password"]:focus,
[data-theme="dark"] #konto-sicherheit input[type="text"]:focus {
  background: var(--bg-subtle);
  color: var(--text-light);
  border-color: var(--secondary);
}

[data-theme="dark"] #konto-sicherheit input[type="checkbox"] {
  accent-color: var(--secondary);
}

[data-theme="dark"] #konto-sicherheit .btn {
  color: var(--text-light);
}

[data-theme="dark"] #konto-sicherheit .btn-danger {
  background: #dc3545;
  color: white;
  border-color: #dc3545;
}

[data-theme="dark"] #konto-sicherheit .btn-danger:hover {
  background: #c82333;
  border-color: #c82333;
}

[data-theme="dark"] #konto-sicherheit p,
[data-theme="dark"] #konto-sicherheit small {
  color: var(--text-light);
}

/* Dark Mode - Newsletter Einstellungen */
[data-theme="dark"] #konto-sicherheit .newsletter-settings {
  color: var(--text-light);
}

[data-theme="dark"] #konto-sicherheit .newsletter-settings h3 {
  color: var(--text-light);
}

[data-theme="dark"] #konto-sicherheit .newsletter-settings .hint {
  color: var(--text-muted);
}

[data-theme="dark"] #konto-sicherheit .newsletter-settings label {
  color: var(--text-light);
}

[data-theme="dark"] #konto-sicherheit .newsletter-settings input[type="checkbox"] {
  accent-color: var(--secondary);
}

/* Dark Mode - Toggle Password Icon (Auge) */
[data-theme="dark"] #konto-sicherheit .toggle-password {
  color: var(--text-light) !important;
}

[data-theme="dark"] #konto-sicherheit .toggle-password svg {
  fill: var(--text-light) !important;
  color: var(--text-light) !important;
}

[data-theme="dark"] #konto-sicherheit .toggle-password:hover,
[data-theme="dark"] #konto-sicherheit .toggle-password:focus {
  color: var(--secondary) !important;
}

[data-theme="dark"] #konto-sicherheit .toggle-password:hover svg,
[data-theme="dark"] #konto-sicherheit .toggle-password:focus svg {
  fill: var(--secondary) !important;
  color: var(--secondary) !important;
}

[data-theme="dark"] #konto-sicherheit .toggle-password.active {
  color: var(--secondary) !important;
}

[data-theme="dark"] #konto-sicherheit .toggle-password.active svg {
  fill: var(--secondary) !important;
  color: var(--secondary) !important;
}

/* =====================================================================
   Admin: Pass-Statistiken – lesbar im Dark Mode
   ===================================================================== */
[data-theme="dark"] .stat-item {
  border: 1px solid var(--border);
}

[data-theme="dark"] .stat-item--default {
  background: var(--bg-subtle) !important;
  color: var(--text-light);
}

[data-theme="dark"] .stat-item--success {
  background: rgba(46, 125, 50, 0.25) !important;
  border-color: rgba(46, 125, 50, 0.5);
  color: var(--text-light);
}

[data-theme="dark"] .stat-item--warning {
  background: rgba(245, 124, 0, 0.2) !important;
  border-color: rgba(245, 124, 0, 0.5);
  color: var(--text-light);
}

[data-theme="dark"] .stat-item--info {
  background: rgba(123, 31, 162, 0.2) !important;
  border-color: rgba(123, 31, 162, 0.5);
  color: var(--text-light);
}

[data-theme="dark"] .stat-item--neutral {
  background: rgba(84, 110, 122, 0.2) !important;
  border-color: var(--border);
  color: var(--text-light);
}

[data-theme="dark"] .stat-label {
  color: var(--text-muted) !important;
}

[data-theme="dark"] .stat-value {
  color: var(--text-light) !important;
}

[data-theme="dark"] .stat-value--default {
  color: var(--text-light) !important;
}

[data-theme="dark"] .stat-value--success {
  color: #81c784 !important;
}

[data-theme="dark"] .stat-value--warning {
  color: #ffb74d !important;
}

[data-theme="dark"] .stat-value--info {
  color: #ce93d8 !important;
}

[data-theme="dark"] .stat-value--neutral {
  color: #90a4ae !important;
}

[data-theme="dark"] .stat-meta {
  color: var(--text-muted) !important;
}

[data-theme="dark"] .stats-hint {
  border-top-color: var(--border) !important;
}

[data-theme="dark"] .stats-hint small {
  color: var(--text-muted) !important;
}

/* =====================================================================
   Multipass-Admin (admin_multipass.php): Dark Mode + Autofill lesbar
   ===================================================================== */
[data-theme="dark"] #multipass-admin {
  background: var(--bg-dark) !important;
  color: var(--text-light);
}

[data-theme="dark"] #multipass-admin .card,
[data-theme="dark"] #multipass-admin section.card {
  background: var(--bg-surface) !important;
  border-color: var(--border) !important;
  color: var(--text-light);
}

[data-theme="dark"] #multipass-admin .card *,
[data-theme="dark"] #multipass-admin .card .content,
[data-theme="dark"] #multipass-admin .card header {
  color: var(--text-light);
}

[data-theme="dark"] #multipass-admin .card header {
  border-bottom-color: var(--border);
}

[data-theme="dark"] #multipass-admin input,
[data-theme="dark"] #multipass-admin select {
  background: var(--bg-dark) !important;
  color: var(--text-light) !important;
  border-color: var(--border) !important;
}

/* Autofill: Browser setzt oft weißen/gelben Hintergrund – im Dark Mode überschreiben */
[data-theme="dark"] #multipass-admin input:-webkit-autofill,
[data-theme="dark"] #multipass-admin input:-webkit-autofill:hover,
[data-theme="dark"] #multipass-admin input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text-light) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--bg-subtle) inset !important;
  box-shadow: 0 0 0 1000px var(--bg-subtle) inset !important;
  caret-color: var(--text-light);
}

[data-theme="dark"] #multipass-admin .notice.error {
  background: rgba(220, 53, 69, 0.2) !important;
  border-color: var(--border-strong);
  color: var(--text-light);
}

[data-theme="dark"] #multipass-admin .notice.success {
  background: rgba(40, 167, 69, 0.2) !important;
  border-color: var(--border);
  color: var(--text-light);
}

[data-theme="dark"] #multipass-admin .hint {
  color: var(--text-muted);
}

/* =====================================================================
   Admin Partner (admin_partner.php): Dark Mode – nichts bleibt weiß
   ===================================================================== */
[data-theme="dark"] main.page-admin-partners {
  background: var(--bg-dark) !important;
  color: var(--text-light) !important;
}

[data-theme="dark"] main.page-admin-partners .service-header {
  background: var(--primary) !important;
  color: var(--text-light);
}

[data-theme="dark"] main.page-admin-partners .card {
  background: var(--bg-surface) !important;
  border-color: var(--border) !important;
  color: var(--text-light) !important;
}

[data-theme="dark"] main.page-admin-partners .card * {
  color: var(--text-light);
}

[data-theme="dark"] main.page-admin-partners h2 {
  color: var(--secondary) !important;
  border-bottom-color: var(--border) !important;
}

/* Partner-Form: Hell/Dunkel über Variablen (--partner-*), keine !important nötig */

/* Autofill auf Admin-Partner lesbar */
[data-theme="dark"] main.page-admin-partners input:-webkit-autofill,
[data-theme="dark"] main.page-admin-partners input:-webkit-autofill:hover,
[data-theme="dark"] main.page-admin-partners input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text-light) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--bg-subtle) inset !important;
  box-shadow: 0 0 0 1000px var(--bg-subtle) inset !important;
  caret-color: var(--text-light);
}

[data-theme="dark"] main.page-admin-partners table {
  color: var(--text-light);
}

[data-theme="dark"] main.page-admin-partners table thead th {
  background: var(--bg-subtle) !important;
  color: var(--text-muted) !important;
  border-bottom-color: var(--border) !important;
}

[data-theme="dark"] main.page-admin-partners table tbody td {
  border-bottom-color: var(--border) !important;
  color: var(--text-light);
}

[data-theme="dark"] main.page-admin-partners table tbody tr:hover {
  background: var(--bg-subtle) !important;
}

[data-theme="dark"] main.page-admin-partners .btn {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--text-light) !important;
}

[data-theme="dark"] main.page-admin-partners .btn:hover {
  background: var(--primaryHover) !important;
  filter: none;
}

[data-theme="dark"] main.page-admin-partners .btn-save:hover,
[data-theme="dark"] main.page-admin-partners .btn.btn-primary.btn-save:hover {
  background: var(--secondary) !important;
  border-color: var(--secondary) !important;
  color: var(--text-light) !important;
}

[data-theme="dark"] main.page-admin-partners .btn.alt {
  background: var(--bg-subtle) !important;
  border-color: var(--border) !important;
  color: var(--text-light) !important;
}

[data-theme="dark"] main.page-admin-partners .muted {
  color: var(--text-muted) !important;
}

[data-theme="dark"] main.page-admin-partners .form-hint {
  color: var(--text-muted);
}

/* Form-Sektion (Firma/Creator): im Dark Mode kein weißer Hintergrund – nur im Hellmodus hell */
[data-theme="dark"] main.page-admin-partners .form-section,
[data-theme="dark"] main.page-admin-partners fieldset.form-section {
  background: transparent;
}

/* Typ auswählen: Nicht-aktiver Button nicht weiß */
[data-theme="dark"] main.page-admin-partners .type-toggle-group {
  border-bottom-color: var(--border) !important;
}

[data-theme="dark"] main.page-admin-partners .type-toggle-label {
  color: var(--text-light) !important;
}

[data-theme="dark"] main.page-admin-partners .type-toggle-btn {
  background: var(--bg-subtle) !important;
  border-color: var(--border) !important;
  color: var(--text-light) !important;
}

[data-theme="dark"] main.page-admin-partners .type-toggle-btn:hover {
  background: var(--bg-subtle) !important;
  border-color: var(--border-strong) !important;
  color: var(--text-light) !important;
}

[data-theme="dark"] main.page-admin-partners .type-toggle-btn.active {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--text-light) !important;
}

[data-theme="dark"] main.page-admin-partners .type-toggle-btn .icon-inline {
  fill: currentColor;
  color: inherit;
}

/* Switch (Aktiv-Status): Slider und Knopf im Dark Mode dunkel, nicht weiß */
[data-theme="dark"] main.page-admin-partners .switch-slider {
  background: rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] main.page-admin-partners .switch-slider::before {
  background: var(--bg-subtle);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] main.page-admin-partners .switch-input:checked + .switch-slider {
  background: var(--secondary);
}

[data-theme="dark"] main.page-admin-partners .switch-input:checked + .switch-slider::before {
  background: var(--primary);
}

[data-theme="dark"] main.page-admin-partners .switch-text {
  color: var(--text-light);
}

/* Logo hochladen: Button und Hover im Dark Mode nicht weiß */
[data-theme="dark"] main.page-admin-partners .logo-upload-btn {
  background: var(--bg-subtle);
  border-color: var(--border);
  color: var(--text-light);
}

[data-theme="dark"] main.page-admin-partners .logo-upload-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--border-strong);
  color: var(--text-light);
}