/* ═══════════════════════════════════════════════════════════
   Feed-AI — Theme System
   Gespeichert in localStorage als 'feedai_theme'
   Themes: dark (default) | light | hc | chorusx
   ═══════════════════════════════════════════════════════════ */

/* ── THEME 1: DARK (Standard) ── */
:root,
[data-theme="dark"] {
  --bg:          #0C0F18;
  --card:        #141928;   /* Karten: deutlich vom BG abheben */
  --card2:       #1C2438;   /* Sekundär-Karten, Inputs */
  --border:      #647290;   /* 4.0:1 gegen BG, 3.6:1 gegen Card — klar sichtbar */
  --text:        #E4EAF5;
  --muted:       #C4CFDF;
  --green:       #00E5A0;
  --blue:        #0055FF;
  --accent:      #00E5A0;
  --accent2:     #0055FF;
  --accent3:     #8855FF;
  --sidebar:     #0F1422;
  --dark:        #0C0F18;
  --nav-active-bg:     #00E5A015;
  --nav-active-border: #00E5A040;
  --nav-active-color:  #00E5A0;
  --input-bg:    #1C2438;
  --input-border:#647290;
  --btn-text:    #07090F;
  --glow:        #00E5A040;
  --stat-glow:   #00E5A030;
  --logo-text:   #E4EAF5;
}

/* ── THEME 2: LIGHT (Silber-Grau) ── */
[data-theme="light"] {
  --bg:          #EEF1F6;
  --card:        #FFFFFF;
  --card2:       #F5F7FA;
  --border:      #D0D8E8;
  --text:        #1A2535;
  --muted:       #5A6A85;
  --green:       #007A55;
  --blue:        #0052CC;
  --accent:      #007A55;
  --accent2:     #0052CC;
  --accent3:     #6633CC;
  --sidebar:     #F0F3F8;
  --dark:        #1A2535;
  --nav-active-bg:     #007A5515;
  --nav-active-border: #007A5535;
  --nav-active-color:  #007A55;
  --input-bg:    #FFFFFF;
  --input-border:#C0CCE0;
  --btn-text:    #FFFFFF;
  --glow:        #007A5530;
  --stat-glow:   #007A5520;
  --logo-text:   #1A2535;
}

/* ── THEME 3: HIGH CONTRAST (WCAG AAA) ── */
[data-theme="hc"] {
  --bg:          #000000;
  --card:        #0A0A0A;
  --card2:       #0A0A0A;
  --border:      #FFFFFF;
  --text:        #FFFFFF;
  --muted:       #DDDDDD;
  --green:       #FFFF00;
  --blue:        #00FFFF;
  --accent:      #FFFF00;
  --accent2:     #00FFFF;
  --accent3:     #FF9900;
  --sidebar:     #000000;
  --dark:        #000000;
  --nav-active-bg:     #FFFF0020;
  --nav-active-border: #FFFF00;
  --nav-active-color:  #FFFF00;
  --input-bg:    #000000;
  --input-border:#FFFFFF;
  --btn-text:    #000000;
  --glow:        transparent;
  --stat-glow:   transparent;
  --logo-text:   #FFFFFF;
}

/* ── THEME 4: CHORUSX (Waldgrün · Bernstein · Orange) ── */
[data-theme="chorusx"] {
  --bg:          #0D1208;
  --card:        #111A0C;
  --card2:       #141F0E;
  --border:      #2A3A18;
  --text:        #F0E8D8;
  --muted:       #B0A278;
  --green:       #D4820A;
  --blue:        #4A8A28;
  --accent:      #D4820A;
  --accent2:     #4A8A28;
  --accent3:     #C86010;
  --sidebar:     #0A0F06;
  --dark:        #0D1208;
  --nav-active-bg:     #D4820A15;
  --nav-active-border: #D4820A40;
  --nav-active-color:  #D4820A;
  --input-bg:    #111A0C;
  --input-border:#3A5020;
  --btn-text:    #0D1208;
  --glow:        #D4820A40;
  --stat-glow:   #D4820A25;
  --logo-text:   #F0E8D8;
}

/* ═══════════════════════════════════════════════════════════
   THEME-SENSITIVE OVERRIDES
   ═══════════════════════════════════════════════════════════ */

/* Body background always from theme */
body { background: var(--bg) !important; color: var(--text) !important; }

/* Sidebar */
[data-theme] .sidebar { background: var(--sidebar) !important; border-right-color: var(--border) !important; }

/* Cards */
[data-theme] .card,
[data-theme] .stat-card,
[data-theme] .table-card,
[data-theme] .step-card,
[data-theme] .price-card,
[data-theme] .feature-card { background: var(--card) !important; border-color: var(--border) !important; }

/* Nav items */
[data-theme] .nav-item.active,
[data-theme] .sidebar-link.active {
  background: var(--nav-active-bg) !important;
  border-color: var(--nav-active-border) !important;
  color: var(--nav-active-color) !important;
}

/* Inputs */
[data-theme] input,
[data-theme] textarea,
[data-theme] select {
  background: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--text) !important;
}

/* Primary buttons — alle accent-farbigen Buttons */
[data-theme] .add-btn,
[data-theme] .btn-primary,
[data-theme] .btn-next,
[data-theme] .price-btn.primary,
[data-theme] .price-btn.highlight,
[data-theme] .nav-cta {
  background: var(--accent) !important;
  color: var(--btn-text) !important;
  box-shadow: 0 4px 16px var(--glow) !important;
}

/* Hover-Effekt für alle primären Buttons */
[data-theme] .btn-primary:hover,
[data-theme] .btn-next:not(:disabled):hover {
  opacity: 0.88;
  transform: translateY(-1px);
}

/* Stat values */
[data-theme] .stat-val { color: var(--accent) !important; text-shadow: 0 0 20px var(--stat-glow) !important; }

/* Active nav color */
[data-theme] .nav-item.active { color: var(--nav-active-color) !important; }

/* Logo accent */
[data-theme] .logo span,
[data-theme] .sidebar-logo span,
[data-theme] .logo-text span { color: var(--accent) !important; }

/* Logo is now an SVG - always consistent */

/* High contrast specific */
[data-theme="hc"] .stat-val { text-shadow: none !important; font-weight: 900 !important; }
[data-theme="hc"] .card,
[data-theme="hc"] .stat-card,
[data-theme="hc"] .table-card,
[data-theme="hc"] .price-card { border: 2px solid #FFFFFF !important; }
[data-theme="hc"] .sidebar { border-right: 2px solid #FFFFFF !important; }
[data-theme="hc"] .add-btn,
[data-theme="hc"] .btn-primary,
[data-theme="hc"] .btn-next { font-weight: 900 !important; color: #000000 !important; }

/* Alle inline-style Accent-Buttons im hc-Theme explizit auf schwarzen Text */
[data-theme="hc"] a[style*="background:var(--accent)"],
[data-theme="hc"] button[style*="background:var(--accent)"] { color: #000000 !important; }
[data-theme="hc"] * { outline-color: #FFFF00 !important; }

/* Light mode text corrections */
[data-theme="light"] .page-title,
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] .sidebar-logo,
[data-theme="light"] .logo { color: var(--text) !important; }
[data-theme="light"] .nav-item,
[data-theme="light"] .sidebar-link { color: var(--muted) !important; }
[data-theme="light"] .nav-item:hover,
[data-theme="light"] .sidebar-link:hover { color: var(--text) !important; }
[data-theme="light"] .table-card { box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
[data-theme="light"] .stat-card { box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
[data-theme="light"] header,
[data-theme="light"] .topbar { background: #FFFFFF !important; border-bottom-color: var(--border) !important; }
[data-theme="light"] nav ul a { color: var(--muted) !important; }
[data-theme="light"] footer { background: #E4E8F0 !important; border-top-color: var(--border) !important; }
[data-theme="light"] .price-btn.default { background: #E8EDF5 !important; color: var(--text) !important; }
[data-theme="light"] .hero-section { background: #E4E8F0 !important; }

/* ChorusX ambient glow on main */
[data-theme="chorusx"] .main-content,
[data-theme="chorusx"] main {
  background-image:
    radial-gradient(ellipse at 15% 20%, #4A8A2810 0%, transparent 45%),
    radial-gradient(ellipse at 85% 75%, #D4820A0E 0%, transparent 45%) !important;
}

/* ═══════════════════════════════════════════════════════════
   THEME SWITCHER WIDGET — inline in header/topbar
   ═══════════════════════════════════════════════════════════ */

#theme-switcher {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Toggle button — compact pill for header */
#theme-switcher-toggle {
  height: 34px;
  padding: 0 12px;
  border-radius: 8px;
  background: var(--card);
  border: 1px solid var(--border);
  cursor: pointer;
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600;
  color: var(--muted);
  transition: all 0.15s;
  white-space: nowrap;
  font-family: 'DM Sans', sans-serif;
}
#theme-switcher-toggle:hover {
  color: var(--text);
  border-color: var(--accent);
}
#theme-switcher-toggle .toggle-icon { font-size: 15px; }
#theme-switcher-toggle .toggle-label {
  font-size: 12px;
}
@media (max-width: 640px) {
  #theme-switcher-toggle .toggle-label { display: none; }
  #theme-switcher-toggle { padding: 0 10px; }
}

/* Dropdown panel — opens downward from header */
#theme-panel {
  display: none;
  position: absolute;
  top: calc(100% + 8px); right: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px;
  width: 215px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.45);
  animation: panelIn 0.16s ease;
  z-index: 9999;
}
[data-theme="hc"] #theme-panel { border: 2px solid #FFFFFF; }

@keyframes panelIn {
  from { opacity:0; transform: translateY(-6px) scale(0.97); }
  to   { opacity:1; transform: translateY(0) scale(1); }
}

#theme-panel.open { display: block; }

.theme-panel-title {
  font-size: 10px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: var(--muted);
  padding: 2px 8px 8px; border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}

.theme-option {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 9px; border-radius: 9px;
  cursor: pointer; border: 1px solid transparent;
  transition: all 0.13s; margin-bottom: 2px;
  background: transparent;
  width: 100%; text-align: left;
  font-family: 'DM Sans', sans-serif;
}
.theme-option:last-child { margin-bottom: 0; }
.theme-option:hover { background: var(--nav-active-bg); border-color: var(--nav-active-border); }
.theme-option.active { background: var(--nav-active-bg); border-color: var(--nav-active-border); }

.theme-dot {
  width: 22px; height: 22px; border-radius: 50%;
  flex-shrink: 0; display: flex; align-items: center;
  justify-content: center; font-size: 12px;
}
.theme-option-info { flex: 1; }
.theme-option-name {
  font-size: 13px; font-weight: 600; color: var(--text);
  line-height: 1.2;
}
.theme-option-desc {
  font-size: 10px; color: var(--muted); margin-top: 1px;
}
.theme-option.active .theme-option-name { color: var(--nav-active-color); }
.theme-check {
  font-size: 13px; color: var(--accent);
  visibility: hidden;
}
.theme-option.active .theme-check { visibility: visible; }

/* ═══════════════════════════════════════════════════════════
   INDEX.HTML — LIGHT + CHORUSX OVERRIDES
   Alle hardcoded dunklen Hintergründe überschreiben
   ═══════════════════════════════════════════════════════════ */

/* ── NAV ── */
[data-theme="light"] nav,
[data-theme="chorusx"] nav {
  background: color-mix(in srgb, var(--bg) 88%, transparent) !important;
  backdrop-filter: blur(16px);
}

/* ── LOGOS SECTION (AI-Logos Streifen) ── */
[data-theme="light"] .logos-section,
[data-theme="chorusx"] .logos-section {
  background: linear-gradient(180deg, var(--bg) 0%, var(--card) 100%) !important;
}
[data-theme="light"] .ai-logo,
[data-theme="chorusx"] .ai-logo {
  background: var(--card) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
[data-theme="light"] .ai-logo:hover,
[data-theme="chorusx"] .ai-logo:hover {
  background: var(--bg) !important;
  border-color: var(--accent) !important;
}

/* ── STEP CARDS ── */
[data-theme="light"] .step-inner,
[data-theme="chorusx"] .step-inner {
  background: var(--card) !important;
}
[data-theme="light"] .step h3,
[data-theme="chorusx"] .step h3 {
  color: var(--text) !important;
}
[data-theme="light"] .step p,
[data-theme="chorusx"] .step p {
  color: var(--muted) !important;
}

/* ── PROBLEM SECTION (dark card) ── */
[data-theme="light"] [style*="background:#0D1119"],
[data-theme="chorusx"] [style*="background:#0D1119"],
[data-theme="light"] [style*="background: #0D1119"],
[data-theme="chorusx"] [style*="background: #0D1119"] {
  background: var(--card) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

/* ── COMPARISON / CHAT BOXES ── */
[data-theme="light"] [style*="background:#1A0A0A"],
[data-theme="chorusx"] [style*="background:#1A0A0A"],
[data-theme="light"] [style*="background:#1A1A2A"],
[data-theme="chorusx"] [style*="background:#1A1A2A"] {
  background: var(--bg) !important;
  border-color: var(--border) !important;
}
[data-theme="light"] [style*="background:#1A1A2A"],
[data-theme="chorusx"] [style*="background:#1A1A2A"] {
  background: var(--bg) !important;
}

/* ── PRICING CARDS ── */
[data-theme="light"] .price-card,
[data-theme="chorusx"] .price-card {
  background: var(--card) !important;
  border-color: var(--border) !important;
}
[data-theme="light"] .price-btn.default,
[data-theme="chorusx"] .price-btn.default {
  background: var(--bg) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
[data-theme="light"] .price-btn.default:hover,
[data-theme="chorusx"] .price-btn.default:hover {
  background: var(--border) !important;
}

/* ── PRICING SECTION BACKGROUND ── */
[data-theme="light"] #pricing,
[data-theme="chorusx"] #pricing {
  background: linear-gradient(135deg, var(--bg) 0%, var(--card) 100%) !important;
}

/* ── CONTACT SECTION + CARD ── */
[data-theme="light"] #contact,
[data-theme="chorusx"] #contact {
  background: var(--bg) !important;
  border-top-color: var(--border) !important;
}
[data-theme="light"] .cf-card,
[data-theme="chorusx"] .cf-card {
  background: var(--card) !important;
  border-color: var(--border) !important;
}
[data-theme="light"] .cf-input,
[data-theme="light"] .cf-select,
[data-theme="light"] .cf-textarea,
[data-theme="chorusx"] .cf-input,
[data-theme="chorusx"] .cf-select,
[data-theme="chorusx"] .cf-textarea {
  background: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--text) !important;
}
[data-theme="light"] .cf-select option,
[data-theme="chorusx"] .cf-select option {
  background: var(--card) !important;
  color: var(--text) !important;
}

/* ── KI CHAT DEMO BLOCK ── */
[data-theme="light"] [style*="#131C2E"],
[data-theme="chorusx"] [style*="#131C2E"] {
  background: var(--card2) !important;
  border-radius: 10px 10px 2px 10px;
}

/* ── CHAT BUBBLE TAGS ── */
[data-theme="light"] [style*="background:#1A1A2A"][style*="border:#2A2A3A"],
[data-theme="chorusx"] [style*="background:#1A1A2A"][style*="border:#2A2A3A"] {
  background: var(--bg) !important;
  border-color: var(--border) !important;
  color: var(--muted) !important;
}

/* ── HERO SECTION ── */
[data-theme="light"] .hero,
[data-theme="chorusx"] .hero {
  background: var(--bg) !important;
}
[data-theme="light"] .hero-badge,
[data-theme="chorusx"] .hero-badge {
  background: var(--nav-active-bg) !important;
  border-color: var(--nav-active-border) !important;
}

/* ── TEXT COLORS ── */
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4 { color: var(--text) !important; }
[data-theme="light"] p { color: var(--muted) !important; }
[data-theme="chorusx"] h1,
[data-theme="chorusx"] h2,
[data-theme="chorusx"] h3 { color: var(--text) !important; }

/* ── FEATURE COMPARISON (Ohne/Mit Feed-AI) ── */
[data-theme="light"] .comparison-card,
[data-theme="chorusx"] .comparison-card {
  background: var(--card) !important;
  border-color: var(--border) !important;
}
[data-theme="light"] .comparison-header,
[data-theme="chorusx"] .comparison-header {
  background: var(--bg) !important;
  border-color: var(--border) !important;
}

/* ── HIGH CONTRAST EXTRA ── */
[data-theme="hc"] nav {
  background: #000000 !important;
  border-bottom: 2px solid #FFFFFF !important;
}
[data-theme="hc"] .step-inner { background: #000 !important; border: 2px solid #FFFFFF !important; }
[data-theme="hc"] .step h3 { color: #FFFFFF !important; }
[data-theme="hc"] .step p { color: #DDDDDD !important; }
[data-theme="hc"] .price-card { background: #000 !important; border: 2px solid #FFFFFF !important; }
[data-theme="hc"] .logos-section { background: #000 !important; }
[data-theme="hc"] .ai-logo { background: #000 !important; border: 2px solid #FFFFFF !important; color: #FFFFFF !important; }
[data-theme="hc"] #contact { background: #000 !important; }
[data-theme="hc"] .cf-card { background: #000 !important; border: 2px solid #FFFFFF !important; }
[data-theme="hc"] .cf-input, [data-theme="hc"] .cf-select, [data-theme="hc"] .cf-textarea {
  background: #000 !important; border: 2px solid #FFFFFF !important; color: #FFFFFF !important;
}

/* ── CLASS-BASED OVERRIDES (index.html inline-styled elements) ── */
[data-theme="light"] .theme-dark-card,
[data-theme="chorusx"] .theme-dark-card {
  background: var(--card) !important;
  border-color: var(--border) !important;
}
[data-theme="light"] .theme-dark-card--accent,
[data-theme="chorusx"] .theme-dark-card--accent {
  border-color: var(--nav-active-border) !important;
}
[data-theme="light"] .theme-tag,
[data-theme="chorusx"] .theme-tag {
  background: var(--bg) !important;
  border-color: var(--border) !important;
  color: var(--muted) !important;
}
[data-theme="light"] .theme-error-box {
  background: #FFF0F0 !important;
  border-color: #FFCCCC !important;
}
[data-theme="chorusx"] .theme-error-box {
  background: #1A0A00 !important;
  border-color: #3A1A00 !important;
}
[data-theme="light"] .theme-scroll-btn,
[data-theme="chorusx"] .theme-scroll-btn {
  background: var(--card) !important;
  border-color: var(--border) !important;
}
[data-theme="hc"] .theme-dark-card {
  background: #000 !important;
  border: 2px solid #FFFFFF !important;
}
[data-theme="hc"] .theme-tag {
  background: #000 !important;
  border: 1px solid #FFFFFF !important;
  color: #FFFFFF !important;
}

/* Fix nav text colors in light mode */
[data-theme="light"] nav ul a,
[data-theme="light"] nav ul a:hover { color: var(--text) !important; }
[data-theme="light"] .nav-logo { color: var(--text) !important; }
[data-theme="chorusx"] nav ul a { color: var(--muted) !important; }
[data-theme="chorusx"] nav ul a:hover { color: var(--text) !important; }

/* ═══════════════════════════════════════════════════════════
   LIGHT/HC/CHORUSX — UMFASSENDE DARK-ELEMENT OVERRIDES
   Alle hardcoded dunklen Hintergründe auf allen Seiten
   ═══════════════════════════════════════════════════════════ */

/* ── ALLGEMEINE DARK CARDS / BOXEN ── */
[data-theme="light"] .auth-card,
[data-theme="light"] .login-card,
[data-theme="light"] .step-panel,
[data-theme="light"] .wizard-card,
[data-theme="light"] .onboarding-card,
[data-theme="light"] .contact-box,
[data-theme="light"] .plan-card,
[data-theme="light"] .invoice-table,
[data-theme="light"] .ki-info-banner,
[data-theme="chorusx"] .auth-card,
[data-theme="chorusx"] .login-card,
[data-theme="chorusx"] .step-panel,
[data-theme="chorusx"] .wizard-card,
[data-theme="chorusx"] .onboarding-card,
[data-theme="chorusx"] .contact-box,
[data-theme="chorusx"] .plan-card,
[data-theme="chorusx"] .invoice-table,
[data-theme="chorusx"] .ki-info-banner {
  background: var(--card) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

/* ── INPUTS, SELECTS, TEXTAREAS ÜBERALL ── */
[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
[data-theme="light"] select,
[data-theme="light"] textarea,
[data-theme="chorusx"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
[data-theme="chorusx"] select,
[data-theme="chorusx"] textarea {
  background: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--text) !important;
}
[data-theme="light"] select option,
[data-theme="chorusx"] select option {
  background: var(--card) !important;
  color: var(--text) !important;
}

/* ── HOVER EFFEKT SIDEBAR NAV ── */
[data-theme="light"] .nav-item:hover,
[data-theme="light"] .sidebar-link:hover,
[data-theme="chorusx"] .nav-item:hover,
[data-theme="chorusx"] .sidebar-link:hover {
  background: var(--nav-active-bg) !important;
  color: var(--text) !important;
}
[data-theme="hc"] .nav-item:hover,
[data-theme="hc"] .sidebar-link:hover {
  background: var(--nav-active-bg) !important;
  color: var(--accent) !important;
  outline: 2px solid var(--accent) !important;
}

/* ── TOGGLE BUTTONS (Ja/Nein, Bool-Felder) ── */
[data-theme="light"] .toggle-btn,
[data-theme="light"] .bool-btn,
[data-theme="light"] [class*="toggle"],
[data-theme="chorusx"] .toggle-btn,
[data-theme="chorusx"] .bool-btn,
[data-theme="chorusx"] [class*="toggle"] {
  background: var(--card) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

/* ── TABELLEN ── */
[data-theme="light"] table th,
[data-theme="light"] thead th,
[data-theme="light"] .table-header-row th,
[data-theme="chorusx"] table th,
[data-theme="chorusx"] thead th {
  background: var(--card2) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
[data-theme="light"] table td,
[data-theme="light"] tbody td,
[data-theme="chorusx"] table td,
[data-theme="chorusx"] tbody td {
  background: var(--bg) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
[data-theme="light"] table tr:nth-child(even) td,
[data-theme="chorusx"] table tr:nth-child(even) td {
  background: var(--card) !important;
}
[data-theme="hc"] table th { background: #000 !important; color: #FFFF00 !important; border: 2px solid #FFF !important; }
[data-theme="hc"] table td { background: #000 !important; color: #FFF !important; border: 1px solid #FFF !important; }

/* ── UPLOAD ZONE ── */
[data-theme="light"] .upload-zone,
[data-theme="light"] .dropzone,
[data-theme="light"] [class*="upload"],
[data-theme="chorusx"] .upload-zone,
[data-theme="chorusx"] .dropzone,
[data-theme="chorusx"] [class*="upload"] {
  background: var(--card) !important;
  border-color: var(--border) !important;
  color: var(--muted) !important;
}

/* ── CODE-BLÖCKE / PRE ── */
[data-theme="light"] pre,
[data-theme="light"] .code-block,
[data-theme="chorusx"] pre,
[data-theme="chorusx"] .code-block {
  background: var(--card2) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

/* ── INLINE STYLE BACKGROUNDS - universal override für #07090F #080B12 #0D1119 #090C14 #0A0D14 ── */
/* Login card */
[data-theme="light"] [style*="background:#0"],
[data-theme="light"] [style*="background: #0"] {
  background: var(--card) !important;
}
[data-theme="chorusx"] [style*="background:#0"],
[data-theme="chorusx"] [style*="background: #0"] {
  background: var(--card) !important;
}

/* But NOT buttons that should stay green/accent colored */
[data-theme="light"] [style*="background:#00E5A0"],
[data-theme="light"] [style*="background: #00E5A0"],
[data-theme="chorusx"] [style*="background:#00E5A0"],
[data-theme="chorusx"] [style*="background: #00E5A0"] {
  background: var(--accent) !important;
}
[data-theme="light"] [style*="background:#EF4444"],
[data-theme="chorusx"] [style*="background:#EF4444"] {
  background: #EF4444 !important;
}

/* ── BORDER COLORS ── */
[data-theme="light"] [style*="border:1px solid #1"],
[data-theme="light"] [style*="border: 1px solid #1"],
[data-theme="chorusx"] [style*="border:1px solid #1"],
[data-theme="chorusx"] [style*="border: 1px solid #1"] {
  border-color: var(--border) !important;
}

/* ── TOPBAR / HEADER auf Seiten mit Sidebar ── */
[data-theme="light"] .topbar,
[data-theme="chorusx"] .topbar {
  background: var(--bg) !important;
  border-bottom-color: var(--border) !important;
}
[data-theme="light"] .topbar h1,
[data-theme="chorusx"] .topbar h1 {
  color: var(--text) !important;
}

/* ── ABONNEMENT PLAN CARDS ── */
[data-theme="light"] .plan-option,
[data-theme="light"] [class*="price-card"],
[data-theme="light"] [class*="plan-card"],
[data-theme="chorusx"] .plan-option,
[data-theme="chorusx"] [class*="price-card"],
[data-theme="chorusx"] [class*="plan-card"] {
  background: var(--card) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

/* ── KI SICHTBARKEIT BANNER ── */
[data-theme="light"] [style*="background:linear-gradient"],
[data-theme="chorusx"] [style*="background:linear-gradient"] {
  /* Only override if it's a dark gradient - we selectively fix below */
}

/* ── VALIDATION ERROR MESSAGES ── */
[data-theme="light"] .error-msg,
[data-theme="light"] .validation-error,
[data-theme="light"] .field-error,
[data-theme="chorusx"] .error-msg,
[data-theme="chorusx"] .validation-error,
[data-theme="chorusx"] .field-error {
  background: #FFF0F0 !important;
  border-color: #FFAAAA !important;
  color: #CC0000 !important;
}

/* ── SIDEBAR BACKGROUND ── */
[data-theme="light"] .sidebar,
[data-theme="chorusx"] .sidebar {
  background: var(--sidebar) !important;
}

/* ── MAIN CONTENT BACKGROUND ── */
[data-theme="light"] .main-content,
[data-theme="light"] main,
[data-theme="light"] .content,
[data-theme="chorusx"] .main-content,
[data-theme="chorusx"] main,
[data-theme="chorusx"] .content {
  background: var(--bg) !important;
}

/* ── TEXT OVERRIDES ── */
[data-theme="light"] .page-title,
[data-theme="light"] [style*="color:#fff"],
[data-theme="light"] [style*="color: #fff"],
[data-theme="light"] [style*="color:#F0F6FF"],
[data-theme="light"] [style*="color:#D8E0EE"],
[data-theme="chorusx"] [style*="color:#fff"],
[data-theme="chorusx"] [style*="color: #fff"],
[data-theme="chorusx"] [style*="color:#F0F6FF"] {
  color: var(--text) !important;
}

/* ── MUTED TEXT ── */
[data-theme="light"] [style*="color:#8090A8"],
[data-theme="light"] [style*="color:#9AA8C0"],
[data-theme="light"] [style*="color:#6A8BAA"],
[data-theme="chorusx"] [style*="color:#8090A8"],
[data-theme="chorusx"] [style*="color:#9AA8C0"],
[data-theme="chorusx"] [style*="color:#6A8BAA"] {
  color: var(--muted) !important;
}

/* ── FOOTER ── */
[data-theme="light"] footer,
[data-theme="chorusx"] footer {
  background: var(--card) !important;
  border-top-color: var(--border) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   COMPREHENSIVE FIXES — Session 13
   ═══════════════════════════════════════════════════════════════════ */

/* ── C) Impressum green text readable in light mode ── */
[data-theme="light"] .legal a,
[data-theme="light"] a[style*="color:var(--green)"],
[data-theme="light"] a[style*="color: var(--green)"] {
  color: var(--accent) !important;
}
[data-theme="light"] .page-tag,
[data-theme="chorusx"] .page-tag { color: var(--accent) !important; }

/* ── A) Price text readable in light mode (produkt.html) ── */
[data-theme="light"] .price-big,
[data-theme="chorusx"] .price-big { color: var(--text) !important; }
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="chorusx"] h1,
[data-theme="chorusx"] h2,
[data-theme="chorusx"] h3,
[data-theme="chorusx"] h4 { color: var(--text) !important; }
[data-theme="light"] .logo,
[data-theme="chorusx"] .logo { color: var(--logo-text) !important; }
[data-theme="light"] .not-found h2,
[data-theme="chorusx"] .not-found h2 { color: var(--text) !important; }

/* ── G) Bool-Buttons aktiver Zustand deutlicher im Light-Mode ── */
[data-theme="light"] .bool-btn,
[data-theme="chorusx"] .bool-btn {
  background: var(--card2) !important;
  border: 2px solid var(--border) !important;
  color: var(--muted) !important;
  font-weight: 500 !important;
}
/* Ja-Button aktiv */
[data-theme="light"] .bool-btn.selected-ja,
[data-theme="light"] .bool-btn[data-val="ja"].active,
[data-theme="light"] .bool-btn.active-ja,
[data-theme="light"] .bool-btn:first-child.selected,
[data-theme="chorusx"] .bool-btn.selected-ja,
[data-theme="chorusx"] .bool-btn.active-ja {
  background: #007A5520 !important;
  border: 2px solid var(--accent) !important;
  color: var(--accent) !important;
  font-weight: 700 !important;
}
/* Nein-Button aktiv */
[data-theme="light"] .bool-btn.selected-nein,
[data-theme="light"] .bool-btn.active-nein,
[data-theme="chorusx"] .bool-btn.selected-nein,
[data-theme="chorusx"] .bool-btn.active-nein {
  background: #EF444415 !important;
  border: 2px solid #EF4444 !important;
  color: #CC0000 !important;
  font-weight: 700 !important;
}

/* ── H) HC-Mode: Subtext / muted text deutlich heller ── */
[data-theme="hc"] .muted,
[data-theme="hc"] p,
[data-theme="hc"] .subtitle,
[data-theme="hc"] .sub-text,
[data-theme="hc"] .hero-sub,
[data-theme="hc"] .hero p,
[data-theme="hc"] section p,
[data-theme="hc"] .step-desc,
[data-theme="hc"] .feature-desc,
[data-theme="hc"] .problem-text,
[data-theme="hc"] li,
[data-theme="hc"] .nav-item,
[data-theme="hc"] .sidebar-link,
[data-theme="hc"] .page-sub,
[data-theme="hc"] label,
[data-theme="hc"] .field-label,
[data-theme="hc"] .ki-label,
[data-theme="hc"] .ki-badge,
[data-theme="hc"] small,
[data-theme="hc"] .note,
[data-theme="hc"] .topbar-sub,
[data-theme="hc"] [style*="color:#9"],
[data-theme="hc"] [style*="color:#8"],
[data-theme="hc"] [style*="color:#6"],
[data-theme="hc"] [style*="color: #9"],
[data-theme="hc"] [style*="color: #8"],
[data-theme="hc"] [style*="color: #6"],
[data-theme="hc"] [style*="color:var(--muted)"] {
  color: #FFFFFF !important;
}
/* HC: --muted override to full white */
[data-theme="hc"] { --muted: #FFFFFF !important; }

/* HC: Colored text on hero/sections */
[data-theme="hc"] .tag,
[data-theme="hc"] .badge,
[data-theme="hc"] .onboarding-tag {
  color: var(--accent) !important;
  border-color: var(--accent) !important;
  background: transparent !important;
}

/* ── B) Remaining dark box fix — nav-item hover on all pages ── */
[data-theme="light"] .nav-item:hover,
[data-theme="light"] .sidebar-link:hover,
[data-theme="light"] a.nav-item:hover,
[data-theme="chorusx"] .nav-item:hover,
[data-theme="chorusx"] .sidebar-link:hover {
  background: var(--nav-active-bg) !important;
  color: var(--nav-active-color) !important;
}
/* Make sure normal nav-items are light-colored */
[data-theme="light"] .nav-item,
[data-theme="light"] .sidebar-link,
[data-theme="chorusx"] .nav-item,
[data-theme="chorusx"] .sidebar-link {
  color: var(--muted) !important;
}
[data-theme="light"] .nav-item.active,
[data-theme="light"] .sidebar-link.active,
[data-theme="chorusx"] .nav-item.active,
[data-theme="chorusx"] .sidebar-link.active {
  color: var(--nav-active-color) !important;
  background: var(--nav-active-bg) !important;
}

/* ── Topbar on light mode ── */
[data-theme="light"] .topbar,
[data-theme="chorusx"] .topbar {
  background: var(--card) !important;
  border-bottom-color: var(--border) !important;
}
[data-theme="light"] .topbar .page-title,
[data-theme="light"] .topbar h1,
[data-theme="chorusx"] .topbar h1 { color: var(--text) !important; }
[data-theme="light"] .topbar .page-sub,
[data-theme="chorusx"] .topbar .page-sub { color: var(--muted) !important; }

/* ── Logo color in light mode ── */
[data-theme="light"] .logo,
[data-theme="light"] .sidebar-logo,
[data-theme="light"] .nav-logo {
  color: var(--text) !important;
}
[data-theme="light"] .logo span,
[data-theme="light"] .sidebar-logo span,
[data-theme="chorusx"] .logo span,
[data-theme="chorusx"] .sidebar-logo span {
  color: var(--accent) !important;
}

/* ── HC: Alle Textelemente auf allen Seiten → Weiß ── */
[data-theme="hc"] body { color: #FFFFFF !important; }
[data-theme="hc"] * { color: inherit; }
[data-theme="hc"] p,
[data-theme="hc"] span:not(.accent-span):not(.add-btn span):not(.btn-primary span):not(.btn-next span):not(.cf-submit span),
[data-theme="hc"] li,
[data-theme="hc"] label,
[data-theme="hc"] small,
[data-theme="hc"] td,
[data-theme="hc"] th { color: #FFFFFF !important; }
/* Buttons with accent background: text MUST be black — highest specificity */
[data-theme="hc"] .add-btn,
[data-theme="hc"] .add-btn span,
[data-theme="hc"] .add-btn *,
[data-theme="hc"] .btn-primary,
[data-theme="hc"] .btn-primary span,
[data-theme="hc"] .btn-primary *,
[data-theme="hc"] .btn-next,
[data-theme="hc"] .btn-next span,
[data-theme="hc"] .btn-next *,
[data-theme="hc"] .cf-submit,
[data-theme="hc"] .cf-submit span,
[data-theme="hc"] .cf-submit *,
[data-theme="hc"] button[style*="background:var(--accent)"],
[data-theme="hc"] button[style*="background:var(--accent)"] span,
[data-theme="hc"] button[style*="background:var(--accent)"] *,
[data-theme="hc"] a[style*="background:var(--accent)"],
[data-theme="hc"] a[style*="background:var(--accent)"] span,
[data-theme="hc"] a[style*="background:var(--accent)"] *,
[data-theme="hc"] .price-btn.primary,
[data-theme="hc"] .price-btn.primary span,
[data-theme="hc"] .price-btn.highlight,
[data-theme="hc"] .price-btn.highlight span { color: #000000 !important; font-weight: 900 !important; }
[data-theme="hc"] [style*="color:var(--green)"],
[data-theme="hc"] [style*="color:var(--accent)"],
[data-theme="hc"] h1 span,
[data-theme="hc"] .logo span,
[data-theme="hc"] .sidebar-logo span { color: var(--accent) !important; }
/* (accent button rules merged above) */
/* Headings */
[data-theme="hc"] h1,
[data-theme="hc"] h2,
[data-theme="hc"] h3,
[data-theme="hc"] h4 { color: #FFFFFF !important; }
/* Inline color overrides */
[data-theme="hc"] [style*="color:#9"],
[data-theme="hc"] [style*="color:#8"],
[data-theme="hc"] [style*="color:#7"],
[data-theme="hc"] [style*="color:#6"],
[data-theme="hc"] [style*="color:#5"],
[data-theme="hc"] [style*="color:#4A"] { color: #FFFFFF !important; }
/* HC buttons text */
[data-theme="hc"] .nav-cta,
[data-theme="hc"] .btn-submit,
[data-theme="hc"] .btn-primary { color: #000000 !important; }
/* HC sidebar text */
[data-theme="hc"] .nav-item,
[data-theme="hc"] .sidebar-link { color: #FFFFFF !important; }
[data-theme="hc"] .nav-item.active,
[data-theme="hc"] .sidebar-link.active { color: #FFFF00 !important; outline: 1px solid #FFFF00; }
/* HC link visibility */
[data-theme="hc"] a { color: var(--accent) !important; }
[data-theme="hc"] a:hover { text-decoration: underline !important; }

/* ── HAMBURGER / MOB-MENU-BTN ── */
[data-theme="light"] .mob-menu-btn,
[data-theme="chorusx"] .mob-menu-btn {
  background: var(--card) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
[data-theme="hc"] .mob-menu-btn {
  background: #000 !important;
  border: 2px solid #FFFF00 !important;
  color: #FFFF00 !important;
}
/* Hamburger spans (custom hamburger icons) */
[data-theme="light"] .hamburger span,
[data-theme="chorusx"] .hamburger span {
  background: var(--text) !important;
}
[data-theme="hc"] .hamburger span {
  background: #FFFF00 !important;
}
/* Mobile overlay */
[data-theme="light"] .mob-overlay,
[data-theme="chorusx"] .mob-overlay {
  background: rgba(0,0,0,0.3) !important;
}


/* ═══════════════════════════════════════════════════════════════
   GLOBALER LIGHT/CHORUSX OVERRIDE — hardcodierte dunkle Farben
   Deckt alle inline-style background-Werte ab die im Dark-Theme
   hartcodiert wurden und im Light-Mode schwarz erscheinen.
   Selektoren greifen nur wenn data-theme="light"|"chorusx" gesetzt.
   ═══════════════════════════════════════════════════════════════ */

/* Alle direkten Kind-Elemente die noch dunkle Inline-Backgrounds haben */
[data-theme="light"] [style*="background:#0"],
[data-theme="light"] [style*="background: #0"],
[data-theme="light"] [style*="background-color:#0"],
[data-theme="light"] [style*="background:#1"],
[data-theme="light"] [style*="background: #1"],
[data-theme="chorusx"] [style*="background:#0"],
[data-theme="chorusx"] [style*="background: #0"],
[data-theme="chorusx"] [style*="background-color:#0"],
[data-theme="chorusx"] [style*="background:#1"],
[data-theme="chorusx"] [style*="background: #1"] {
  background: var(--card) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* Ausnahmen: Elemente die absichtlich dunkle/farbige Backgrounds haben sollen */
/* Akzentfarben, Badges, Status-Indikatoren — NICHT überschreiben */
[data-theme="light"] [style*="background:#00E5A0"],
[data-theme="light"] [style*="background:#0055FF"],
[data-theme="light"] [style*="background:#EF4444"],
[data-theme="light"] [style*="background:#F59E0B"],
[data-theme="light"] [style*="background:#22C55E"],
[data-theme="light"] [style*="background:linear-gradient"],
[data-theme="light"] [style*="background: linear-gradient"],
[data-theme="chorusx"] [style*="background:#00E5A0"],
[data-theme="chorusx"] [style*="background:#0055FF"],
[data-theme="chorusx"] [style*="background:#EF4444"],
[data-theme="chorusx"] [style*="background:#F59E0B"],
[data-theme="chorusx"] [style*="background:#22C55E"],
[data-theme="chorusx"] [style*="background:linear-gradient"],
[data-theme="chorusx"] [style*="background: linear-gradient"] {
  background: revert !important;
  color: revert !important;
  border-color: revert !important;
}

/* Spezifische bekannte Werte die Ausnahmen brauchen */
/* Semi-transparente Akzent-Tints (z.B. #00E5A015, #0055FF15) */
[data-theme="light"] [style*="background:#00E5A0"],
[data-theme="chorusx"] [style*="background:#00E5A0"] {
  background: #00E5A015 !important;
  color: var(--text) !important;
}

/* Nav/Sidebar hardcodiert */
[data-theme="light"] nav[style*="#0"],
[data-theme="chorusx"] nav[style*="#0"] {
  background: var(--card) !important;
}

/* Input-Felder mit hardcoded dark backgrounds */
[data-theme="light"] input[style*="background:#0"],
[data-theme="light"] input[style*="background:#1"],
[data-theme="light"] textarea[style*="background:#0"],
[data-theme="light"] textarea[style*="background:#1"],
[data-theme="light"] select[style*="background:#0"],
[data-theme="light"] select[style*="background:#1"],
[data-theme="chorusx"] input[style*="background:#0"],
[data-theme="chorusx"] input[style*="background:#1"],
[data-theme="chorusx"] textarea[style*="background:#0"],
[data-theme="chorusx"] textarea[style*="background:#1"],
[data-theme="chorusx"] select[style*="background:#0"],
[data-theme="chorusx"] select[style*="background:#1"] {
  background: var(--input-bg) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* Hardcodierte dunkle Textfarben im Light-Mode aufhellen */
[data-theme="light"] [style*="color:#07090F"],
[data-theme="light"] [style*="color: #07090F"],
[data-theme="chorusx"] [style*="color:#07090F"],
[data-theme="chorusx"] [style*="color: #07090F"] {
  color: var(--text) !important;
}
[data-theme="light"] [style*="color:#9AA8C0"],
[data-theme="light"] [style*="color:#8090A8"],
[data-theme="light"] [style*="color:#7080A0"],
[data-theme="light"] [style*="color:#2A3A55"],
[data-theme="chorusx"] [style*="color:#9AA8C0"],
[data-theme="chorusx"] [style*="color:#8090A8"],
[data-theme="chorusx"] [style*="color:#7080A0"],
[data-theme="chorusx"] [style*="color:#2A3A55"] {
  color: var(--muted) !important;
}

/* Stripe-Hinweis-Box und ähnliche dark cards */
[data-theme="light"] .stripe-note,
[data-theme="chorusx"] .stripe-note {
  background: var(--card2) !important;
  border-color: var(--border) !important;
  color: var(--muted) !important;
}
[data-theme="light"] .stripe-note *,
[data-theme="chorusx"] .stripe-note * {
  color: var(--muted) !important;
}

/* Progress-Bar Hintergründe */
[data-theme="light"] [style*="background:#161D2E"],
[data-theme="chorusx"] [style*="background:#161D2E"] {
  background: var(--border) !important;
}

/* ═══ END GLOBALER OVERRIDE ═══ */

/* ═══════════════════════════════════════════════════════════════════════
   SPRACHUMSCHALTER i18n
   ═══════════════════════════════════════════════════════════════════════ */
#lang-switcher {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 3px;
  flex-shrink: 0;
}

.i18n-switcher-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  font-family: 'DM Sans', sans-serif;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.i18n-switcher-btn:hover {
  background: var(--border);
  color: var(--text);
}

.i18n-switcher-btn.active {
  background: var(--accent);
  color: var(--btn-text);
}

.i18n-flag {
  font-size: 20px;
  line-height: 1;
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
  display: inline-block;
}
.i18n-label { display: none; }  /* Nur Flagge zeigen */

/* Rechtliche Übersetzungshinweis-Box */
.legal-translation-notice {
  background: var(--card2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 20px;
  display: none;
}
[lang="en"] .legal-translation-notice,
[lang="fr"] .legal-translation-notice,
[lang="es"] .legal-translation-notice {
  display: block;
}

@media(max-width:480px) {
  .i18n-label { display: none; }
  .i18n-switcher-btn { padding: 4px 6px; }
}

/* KI-Tracking Timeline Timing-Badges — Theme-Overrides */
[data-theme="light"] .tl-timing.future { background:#E8ECF2;color:#5A6A85;border-color:#D0D8E0 }
[data-theme="light"] .tl-timing.now { background:#FFF7E0;color:#B45309;border-color:#F59E0B40 }
[data-theme="light"] .tl-timing.done { background:#E8FFF4;color:#059669;border-color:#00E5A040 }
[data-theme="chorusx"] .tl-timing.future { background:#1A1A0A;color:#A09060;border-color:#2A3A18 }
[data-theme="hc"] .tl-timing { border:2px solid #FFFFFF !important }
[data-theme="hc"] .tl-timing.future { background:#000;color:#FFFFFF }
[data-theme="hc"] .tl-timing.now { background:#000;color:#FFFF00;border-color:#FFFF00 !important }
[data-theme="hc"] .tl-timing.done { background:#000;color:#00FF00;border-color:#00FF00 !important }