/* ===== Dark mode (body.dark-mode) — used ONLY on index-v2.html ===== */
/* Strategy: re-declare the neutral design tokens so everything cascading
   from var(--nv-*) inverts. Brand greens stay identical. */

body.dark-mode {
  /* Inverted neutrals */
  --nv-ink: #f5f4f0;          /* primary text — was almost black */
  --nv-ink-2: #ecebe5;
  --nv-graphite: #c8ccc8;     /* secondary body text */
  --nv-steel: #8c918e;        /* muted */
  --nv-mist: #4a4f4d;
  --nv-fog: #2a2f2d;
  --nv-paper: #0e1110;        /* base background — was light beige */
  --nv-paper-2: #1a1f1d;      /* slightly lighter dark for cards */
  --nv-white: #ffffff;        /* keep pure white as a strong accent */

  /* Rule colour needs to be light to be visible on dark bg */
  --rule: 1px solid rgba(255, 255, 255, 0.12);

  background: var(--nv-paper);
  color: var(--nv-ink);
}

/* ----- Component fixups ----- */

/* Nav bar — uses backdrop-blur over rgba paper, flip the rgba */
body.dark-mode .nav {
  background: rgba(14, 17, 16, 0.92);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
body.dark-mode .nav-links a { color: var(--nv-graphite); }
body.dark-mode .nav-links a:hover { color: var(--nv-green-light); }
body.dark-mode .nav-cta {
  background: var(--nv-white); color: var(--nv-ink);
  border: 1px solid var(--nv-white);
}
body.dark-mode .nav-cta:hover { background: var(--nv-green); color: var(--nv-white); border-color: var(--nv-green); }
body.dark-mode .nav-burger .bars span { background: var(--nv-ink); }

/* Page-hero ::before grid pattern — needs light gridlines on dark */
body.dark-mode .page-hero::before {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
}

/* hero-v3-veil already darkens the bg image — fine as-is */

/* The 3-product-families strip uses --nv-paper bg + cards */
body.dark-mode .hero-fam-card { background: var(--nv-paper-2); }
body.dark-mode .hero-fam-card:hover { background: var(--nv-fog); }

/* Marquee strip — stays dark, already styled */

/* KPI block was originally light section — make cards readable on dark */
body.dark-mode .kpi { background: var(--nv-paper-2); }

/* Industry panel tabs — flip card bg */
body.dark-mode .panels-tabs button { color: var(--nv-graphite); }
body.dark-mode .panels-tabs button.active { color: var(--nv-green-light); }
body.dark-mode .panel-text { color: var(--nv-graphite); }

/* Buttons */
body.dark-mode .btn.primary { background: var(--nv-green); color: var(--nv-white); border-color: var(--nv-green); }
body.dark-mode .btn.primary:hover { background: var(--nv-green-light); }
body.dark-mode .btn.hero-v3-ghost {
  color: var(--nv-ink); border: 1px solid var(--nv-ink);
  background: transparent;
}
body.dark-mode .btn.hero-v3-ghost:hover { background: var(--nv-white); color: #0e1110; }
body.dark-mode .btn.dark {
  background: var(--nv-white); color: #0e1110; border-color: var(--nv-white);
}

/* Cards on news list */
body.dark-mode .news-row .np-img { background: var(--nv-paper-2); }
body.dark-mode .news-row { border-color: rgba(255,255,255,0.1); }

/* Process steps & section dividers */
body.dark-mode .process-step { background: var(--nv-paper-2); }

/* Imgslot background (paper-2 token already handled) — kept clean */

/* Variant switcher — show as dark pill on dark mode */
body.dark-mode .variant-switch {
  background: var(--nv-paper-2); border: 1px solid rgba(255,255,255,0.15);
  box-shadow: 4px 4px 0 rgba(255,255,255,0.08);
  color: var(--nv-ink);
}
body.dark-mode .variant-switch:hover { box-shadow: 6px 6px 0 rgba(255,255,255,0.12); }
body.dark-mode .variant-switch .vs-label { color: var(--nv-ink); }
body.dark-mode .variant-switch .vs-toggle { background: var(--nv-fog); }
body.dark-mode .variant-switch .vs-dot {
  /* Dot on the right side to indicate "B" position */
  left: auto; right: 2px;
}

/* Cookie banner — already dark; just ensure border colour adapts */
body.dark-mode .cookie-banner { border-color: rgba(255,255,255,0.2); }

/* dark-section blocks were already designed dark — they look fine, just */
/* ensure their internal text stays readable when --nv-ink flipped */
body.dark-mode .dark-section { background: #050707; }
body.dark-mode .dark-section h2,
body.dark-mode .dark-section h3 { color: var(--nv-white); }
body.dark-mode .dark-section p { color: var(--nv-graphite); }

/* ===== Fixups 12.06.2026 — Bänder, die im Light-Design dunkel sind (bg: var(--nv-ink)),
   wurden durch die Token-Invertierung hell, während ihre Texte hell blieben.
   Sie bleiben im Dark-Mode bewusst dunkel, leicht vom Seitenhintergrund abgesetzt. ===== */

/* Util-Bar (oben) */
body.dark-mode .util-bar { background: #0a0d0c; color: #8c918e; }

/* Sprachbuttons — inaktive waren mit invertiertem --nv-mist fast unsichtbar */
body.dark-mode .util-bar .langs button,
body.dark-mode .lang-btn { color: #9aa09d !important; }
body.dark-mode .util-bar .langs button:hover,
body.dark-mode .lang-btn:hover { color: #ffffff !important; }
body.dark-mode .util-bar .langs button.active,
body.dark-mode .lang-btn.active { color: #ffffff !important; }

/* Marquee-Band */
body.dark-mode .marquee { background: #0a0d0c; color: #8c918e; border-top-color: rgba(255,255,255,0.08); }

/* Footer — Hintergrund wieder dunkel, gedämpfte Texte aufgehellt */
body.dark-mode .footer { background: #141816; color: #8c918e; }
body.dark-mode .footer .ftop a, body.dark-mode .footer .ftop p { color: #9aa09d; }
body.dark-mode .footer .ftop a:hover { color: #ffffff; }
body.dark-mode .footer .fbot { color: #8c918e; }
body.dark-mode .footer .fbot a { color: #9aa09d; }
body.dark-mode .footer .fbot a:hover { color: #ffffff; }
body.dark-mode .footer .brand-mark .logo-circles .c.grey { background: #8c918e; }
body.dark-mode .footer .brand-mark .name small { color: #8c918e; }

/* Nav-CTA — color:var(--nv-ink) wurde durch Invertierung weiß-auf-weiß */
body.dark-mode .nav-cta { color: #0e1110; }
body.dark-mode .nav-cta:hover { color: #ffffff; }

/* Nav-Logo (dunkler Schriftzug) — im Dark-Mode als Weiß-Variante */
body.dark-mode .nav-logo img { filter: brightness(0) invert(1); }

/* Mobile-Drawer Logo ebenso, falls vorhanden */
body.dark-mode .mobile-drawer img[src*="logo-novatec"] { filter: brightness(0) invert(1); }