/* ══════════════════════════════════════════════════════════════════
   nx-fx-mode.css — Darstellung bei ausgeschalteten Effekten
   Der Schalter sitzt in .n-actions, gesetzt von js/nx-fx-mode.js.
   Das JS biegt prefers-reduced-motion um; CSS-Animationen hören da
   nicht drauf, die werden hier abgeräumt.
   ══════════════════════════════════════════════════════════════════ */

/* ── Der Schalter ──────────────────────────────────────────────── */
.nx-fx-btn {
  display: flex; align-items: center; justify-content: center;
  /* 44×44 Trefferfläche (WCAG 2.5.5), negative Ränder halten den Platzbedarf bei 30 + 4 px */
  width: 44px; height: 44px; padding: 0; margin: -7px -3px -7px -7px;
  background: none; border: none; cursor: pointer; cursor: none;
  color: currentColor; opacity: .55;
  transition: opacity .2s ease, color .2s ease;
}
.nx-fx-btn:hover { opacity: 1; color: var(--o, #ff6b00); }
.nx-fx-btn:focus-visible { outline: 2px solid var(--o, #ff6b00); outline-offset: 2px; opacity: 1; }
html[data-fx="off"] .nx-fx-btn { opacity: .8; }

/* ── Effekte aus: alle laufenden CSS-Animationen stilllegen ─────── */
html[data-fx="off"] *,
html[data-fx="off"] *::before,
html[data-fx="off"] *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  animation-delay: 0s !important;
  transition-duration: .001ms !important;
  transition-delay: 0s !important;
}
html[data-fx="off"] { scroll-behavior: auto !important; }

/* Endzustand statt Startzustand zeigen — sonst bliebe Inhalt unsichtbar,
   der normalerweise erst von einer Animation eingeblendet wird. */
html[data-fx="off"] .lbx-anim .lbx-fx-inner,
html[data-fx="off"] .lbx-anim .lbx-effect-inner { opacity: 1 !important; }
html[data-fx="off"] .lbx-fx-layer,
html[data-fx="off"] .lbx-fx-ghost { display: none !important; }

/* Dauerhaft rechnende Zierflächen abschalten */
html[data-fx="off"] #heroParticleBg,
html[data-fx="off"] .nx-webgl-hero canvas,
html[data-fx="off"] .footer-art canvas { display: none !important; }