/* ==========================================================================
   EXPANDIQ Kit · eq.css  (v1.2.0 · 2026-09-28)
   Gemeinsames Design-System für Website, Funnel, Admin, Video-Overlays.
   Quelle: ~/Downloads/EXPANDIQ-React-Motion.html (Tokens, Ease, Komponenten)
   v1.2.0: Farben auf React-Motion :root gezogen (blue-light, white, muted, muted-title);
           brand/tokens.json ist nur noch Protokoll der alten Live-Seite.
   Schrift: Sora (Headlines) + Geist (UI/Text) + Geist Mono (Zahlen) — alle SIL OFL 1.1, kit/fonts/OFL-*.txt
   Regeln: dunkles Theme, eine Akzentfarbe (Blau), kein Grün in der UI,
           Tap-Ziele >= 56 px, Fokus immer sichtbar, prefers-reduced-motion.
   Alle Klassen tragen das Präfix "eq-", damit sie nicht mit App-CSS kollidieren.
   ========================================================================== */

/* ---------- Schrift (lokal, keine CDN) ---------- */
@font-face{font-family:"Geist";src:url("fonts/Geist-latin.woff2") format("woff2"),url("fonts/Geist.ttf") format("truetype");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Sora";src:url("fonts/Sora-latin.woff2") format("woff2");font-weight:100 800;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("fonts/GeistMono-latin.woff2") format("woff2"),url("fonts/GeistMono.ttf") format("truetype");font-weight:100 900;font-style:normal;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  /* Farben. Farbquelle für den NEUEN Look (Entscheid Manager 28.09., brand/BRAND.md §Farbquelle):
     [RM :root]  = ~/Downloads/EXPANDIQ-React-Motion.html :root, Wert 1:1
     [RM Komp.]  = React-Motion, Komponentenregel (nicht :root), Wert 1:1
     [alt]       = brand/tokens.json (alte Live-Seite), nur wo React-Motion keinen Wert hat
     [Kit]       = im Kit abgeleitet, weder in React-Motion noch in tokens.json */
  --eq-ink:#070b14;          /* [RM :root --ink] Seitenhintergrund */
  --eq-surface:#0c1220;      /* [RM :root --surface] Sektionen, Footer */
  --eq-surface-2:#111a2b;    /* [RM :root --surface-2] Karten, Felder */
  --eq-surface-3:#162239;    /* [RM :root --surface-3] Hover, aktive Flächen */
  --eq-blue:#2563eb;         /* [RM :root --blue] Primär: Buttons, Flächen (nur große Schrift!) */
  --eq-blue-hover:#3573fa;   /* [RM Komp. .button.primary:hover] */
  --eq-blue-light:#91b5ff;   /* [RM :root --blue-light] kleiner blauer Text, Nummern, Fokus */
  --eq-blue-soft:#91b5ff;    /* [RM :root --blue-light] weiche Glows; seit v1.2 gleich --eq-blue-light, bleibt als Alias */
  --eq-blue-deep:#1c345b;    /* [RM Komp. .radio-card.checked] ausgewählte Karten */
  --eq-white:#f7f8fc;        /* [RM :root --white] Text */
  --eq-muted:#a4aec0;        /* [RM :root --muted] Fließtext */
  --eq-soft:#cbd5e1;         /* [alt text-soft] heller Nebentext; RM hat keinen eigenen Wert, kein Konflikt (derzeit ungenutzt) */
  --eq-muted-title:#9ba8c1;  /* [RM :root --muted-title] zweite Headline-Zeile */
  --eq-faint:#8e9bb3;        /* [RM Komp. .footer-bottom] Meta, Footer */
  --eq-line:rgba(216,228,255,.13);        /* [RM :root --line] */
  --eq-line-strong:rgba(216,228,255,.25); /* [RM :root --line-strong] */
  --eq-glow:0 6px 34px rgba(37,99,235,.27); /* [RM Komp. .button.primary:hover, #2563eb44] */
  /* Status: Fehler [RM Komp. .field-error/Fehlerbox], Warnung [Kit, Bernstein; RM hat keine Warnfarbe].
     Beide liegen außerhalb der Blau-Skala, kollidieren also nicht mit den React-Motion-Werten. */
  --eq-danger:#ffc3c8; --eq-danger-bg:#472234; --eq-danger-line:#916275;
  --eq-warn:#ffd79a;   --eq-warn-bg:#3a2d14;

  /* Schrift */
  --eq-sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --eq-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --eq-display:"Sora",var(--eq-sans);   /* Headlines: Markenschrift Sora 600–700 */
  --eq-fs-hero:clamp(36px,6.6vw,96px);
  --eq-fs-h2:clamp(36px,5vw,68px);
  --eq-fs-h3:clamp(20px,2vw,24px);
  --eq-fs-body:16px;
  --eq-fs-small:14px;
  --eq-fs-micro:11px;
  --eq-track-tight:-.045em;

  /* Form + Raster */
  --eq-r-sm:6px; --eq-r:10px; --eq-r-lg:16px; --eq-r-pill:999px;
  --eq-tap:56px;
  --eq-gutter:20px;
  --eq-container:1280px;
  --eq-space-section:clamp(88px,11vw,160px);

  /* Bewegung */
  --eq-ease:cubic-bezier(.16,1,.3,1);
  --eq-ease-io:cubic-bezier(.65,0,.35,1);
  --eq-dur:.45s; --eq-dur-slow:.9s;
  color-scheme:dark;
}
@media (min-width:801px){:root{--eq-gutter:56px}}

/* ---------- Basis (opt-in über .eq-root auf <html> oder <body>) ---------- */
.eq-root{background:var(--eq-ink);color:var(--eq-white);font-family:var(--eq-sans);font-size:var(--eq-fs-body);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-feature-settings:"ss01","cv11"}
.eq-root *,.eq-root *::before,.eq-root *::after{box-sizing:border-box}
.eq-root :focus-visible{outline:2px solid var(--eq-blue-light);outline-offset:4px;border-radius:4px}
.eq-root ::selection{background:#254b94;color:#fff}
.eq-container{width:min(var(--eq-container),calc(100% - 2*var(--eq-gutter)));margin-inline:auto}
.eq-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- Typografie ---------- */
.eq-h1,.eq-h2{font-family:var(--eq-display);font-weight:600;letter-spacing:-.04em;line-height:1.06;margin:0;text-wrap:balance}
.eq-h1{font-size:var(--eq-fs-hero);font-weight:650;letter-spacing:-.045em}
.eq-h2{font-size:var(--eq-fs-h2)}
.eq-h3{font-family:var(--eq-display);font-size:var(--eq-fs-h3);font-weight:600;letter-spacing:-.02em;line-height:1.25;margin:0}
.eq-muted-title{color:var(--eq-muted-title)}
.eq-lead{font-size:clamp(16px,1.3vw,19px);line-height:1.7;color:var(--eq-muted);max-width:60ch;text-wrap:pretty}
.eq-p{color:var(--eq-muted);line-height:1.75;margin:0}
.eq-mono,.eq-label{font-family:var(--eq-mono);font-size:var(--eq-fs-micro);letter-spacing:.14em;text-transform:uppercase;font-weight:450}
.eq-label{color:#bfc8da}
.eq-num{font-family:var(--eq-mono);color:var(--eq-blue-light);font-variant-numeric:tabular-nums}

/* ---------- Section-Header mit Nummer ---------- */
.eq-eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 24px;font-family:var(--eq-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#bfc8da}
.eq-eyebrow__num{color:var(--eq-blue-light)}
.eq-eyebrow__dot{width:6px;height:6px;border-radius:50%;background:var(--eq-blue-light);box-shadow:0 0 14px #518af57a;flex:none}
.eq-eyebrow__rule{flex:0 0 32px;height:1px;background:var(--eq-line-strong)}
.eq-section-head{display:grid;gap:24px;margin-bottom:clamp(40px,6vw,72px)}
@media (min-width:801px){.eq-section-head{grid-template-columns:1.3fr .7fr;align-items:end;gap:56px}}
.eq-section-head__aside{color:var(--eq-muted);font-size:15px;line-height:1.8;max-width:38ch}

/* ---------- Buttons ---------- */
.eq-btn{--_h:var(--eq-tap);display:inline-flex;align-items:center;justify-content:space-between;gap:20px;min-height:var(--_h);padding:8px 8px 8px 24px;border-radius:var(--eq-r-pill);border:1px solid transparent;font:500 15px/1.3 var(--eq-sans);letter-spacing:-.005em;color:var(--eq-white);text-decoration:none;cursor:pointer;background:none;transition:background .3s,box-shadow .3s,border-color .3s,color .3s,transform .45s var(--eq-ease);-webkit-tap-highlight-color:transparent;text-align:left}
.eq-btn__icon{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.14);flex:none;transition:transform .45s var(--eq-ease),background .3s}
.eq-btn__icon svg{width:18px;height:18px;transition:transform .45s var(--eq-ease)}
.eq-btn:hover .eq-btn__icon{transform:rotate(8deg)}
.eq-btn:hover .eq-btn__icon svg{transform:translate(1px,-1px)}
.eq-btn--primary{background:var(--eq-blue);box-shadow:0 4px 24px rgba(37,99,235,.12)}
.eq-btn--primary:hover{background:var(--eq-blue-hover);box-shadow:var(--eq-glow);transform:translateY(-2px)}
.eq-btn--secondary{border-color:var(--eq-line-strong)}
.eq-btn--secondary:hover{background:var(--eq-surface-2);border-color:#677da2}
.eq-btn--white{background:var(--eq-white);color:var(--eq-ink)}
.eq-btn--white .eq-btn__icon{background:var(--eq-ink);color:#fff}
.eq-btn--ghost{padding:12px 4px;min-height:var(--eq-tap);border-radius:6px;color:#c3cde0;gap:12px}
.eq-btn--ghost:hover{color:#fff}
.eq-btn--block{width:100%}
.eq-btn--sm{--_h:44px;font-size:13px;padding:4px 4px 4px 18px}
.eq-btn--sm .eq-btn__icon{width:34px;height:34px}
.eq-btn:disabled,.eq-btn[aria-disabled=true]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.eq-btn:active{transform:translateY(0) scale(.985)}
.eq-icon-btn{display:grid;place-items:center;width:var(--eq-tap);height:var(--eq-tap);border-radius:50%;border:1px solid var(--eq-line-strong);background:rgba(7,11,20,.35);color:var(--eq-white);cursor:pointer;transition:background .3s,color .3s,transform .45s var(--eq-ease)}
.eq-icon-btn:hover{background:#fff;color:var(--eq-ink);transform:rotate(6deg)}

/* ---------- Text-Link ---------- */
.eq-link{display:inline-flex;align-items:center;gap:18px;min-height:44px;padding:10px 0;border-bottom:1px solid var(--eq-line-strong);color:var(--eq-white);text-decoration:none;font-size:14px;transition:gap .35s var(--eq-ease),border-color .3s}
.eq-link svg{color:var(--eq-blue-light);width:18px;height:18px}
.eq-link:hover{gap:28px;border-color:#fff}

/* ---------- Pills / Chips / Badges ---------- */
.eq-pill{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:6px 14px;border-radius:var(--eq-r-pill);border:1px solid var(--eq-line);background:rgba(255,255,255,.03);font:500 12px/1.2 var(--eq-sans);color:#cdd6e6;white-space:nowrap}
.eq-pill__dot{width:6px;height:6px;border-radius:50%;background:var(--eq-blue-light)}
.eq-pill--blue{background:rgba(37,99,235,.16);border-color:rgba(145,181,255,.35);color:#dbe6ff}
.eq-pill--warn{background:var(--eq-warn-bg);border-color:#6b5320;color:var(--eq-warn)}
.eq-pill--mono{font-family:var(--eq-mono);letter-spacing:.1em;text-transform:uppercase;font-size:10px}
.eq-chip{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--eq-tap);padding:10px 20px;border-radius:var(--eq-r-pill);border:1px solid var(--eq-line-strong);background:transparent;color:#c9d3e6;font:500 15px/1.2 var(--eq-sans);cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.eq-chip:hover{background:var(--eq-surface-2);color:#fff}
.eq-chip[aria-pressed=true],.eq-chip.is-selected{background:#273d63;border-color:#597eb8;color:#fff}

/* ---------- Karten ---------- */
.eq-card{position:relative;background:var(--eq-surface);border:1px solid var(--eq-line);border-radius:var(--eq-r-lg);padding:clamp(22px,3vw,36px);overflow:hidden}
.eq-card--raised{background:linear-gradient(145deg,#121d31,#0e1627 80%);box-shadow:0 35px 100px rgba(0,0,0,.18)}
.eq-card--glow{background:radial-gradient(ellipse at 50% 110%,rgba(37,99,235,.22),transparent 70%),var(--eq-surface)}
.eq-card--interactive{transition:transform .5s var(--eq-ease),border-color .3s,background .3s;cursor:pointer}
.eq-card--interactive:hover{transform:translateY(-4px);border-color:var(--eq-line-strong);background:var(--eq-surface-2)}
.eq-card__media{margin:calc(-1*clamp(22px,3vw,36px));margin-bottom:24px;aspect-ratio:16/10;overflow:hidden;background:var(--eq-surface-2)}
.eq-card__media img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- Auswahlkarten (Radio/Checkbox als große Tap-Fläche) ---------- */
.eq-choice{position:relative;display:flex;align-items:center;gap:16px;min-height:72px;padding:16px 18px;border:1px solid #293a57;border-radius:var(--eq-r);background:transparent;cursor:pointer;transition:background .25s,border-color .25s}
.eq-choice:hover{background:#15223a}
.eq-choice>input{position:absolute;opacity:0;pointer-events:none}
.eq-choice:has(input:focus-visible){outline:2px solid var(--eq-blue-light);outline-offset:3px}
.eq-choice__icon{display:grid;place-items:center;width:44px;height:44px;border-radius:10px;background:var(--eq-surface-2);color:var(--eq-blue-light);flex:none}
.eq-choice__text{flex:1;display:grid;gap:2px}
.eq-choice__title{font-weight:500;font-size:16px;color:#fff}
.eq-choice__sub{font-size:13px;color:var(--eq-muted)}
.eq-choice__mark{width:20px;height:20px;border:1px solid #57719a;border-radius:50%;flex:none;position:relative}
.eq-choice__mark::after{content:"";position:absolute;inset:4px;border-radius:50%;background:#bdd4ff;transform:scale(0);transition:transform .3s var(--eq-ease)}
.eq-choice:has(input:checked),.eq-choice.is-selected{background:var(--eq-blue-deep);border-color:#597eb8}
.eq-choice:has(input:checked) .eq-choice__mark::after,.eq-choice.is-selected .eq-choice__mark::after{transform:scale(1)}

/* ---------- Formularfelder ---------- */
.eq-field{display:grid;gap:8px;margin-bottom:18px;min-width:0}
.eq-field__label{display:flex;justify-content:space-between;gap:10px;font-size:14px;color:#ced9eb}
.eq-field__hint{font-size:12px;color:#8b9fbe}
.eq-input,.eq-select,.eq-textarea{width:100%;min-height:var(--eq-tap);padding:14px 16px;border-radius:var(--eq-r);border:1px solid #2e405e;background:#0b1526;color:#edf3ff;font:16px/1.5 var(--eq-sans);outline:none;transition:border-color .2s,box-shadow .2s;-webkit-appearance:none;appearance:none}
.eq-textarea{min-height:120px;resize:vertical}
.eq-input::placeholder,.eq-textarea::placeholder{color:#7f93b3}
.eq-input:focus,.eq-select:focus,.eq-textarea:focus{border-color:var(--eq-blue-light);box-shadow:0 0 0 3px rgba(114,158,254,.2)}
.eq-input[aria-invalid=true],.eq-textarea[aria-invalid=true]{border-color:#f5acb2}
.eq-field__error{font-size:13px;color:var(--eq-danger)}
.eq-check{display:flex;align-items:flex-start;gap:12px;min-height:44px;cursor:pointer;font-size:13px;line-height:1.7;color:#aabbd5}
.eq-check input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--eq-blue);flex:none}
.eq-check a{color:#d4e1f8;text-decoration:underline;text-underline-offset:3px}
.eq-dropzone{display:grid;place-items:center;gap:10px;min-height:160px;padding:28px;border:1.5px dashed #34496d;border-radius:var(--eq-r-lg);background:rgba(17,26,43,.55);text-align:center;color:var(--eq-muted);cursor:pointer;transition:border-color .25s,background .25s}
.eq-dropzone:hover,.eq-dropzone.is-over{border-color:var(--eq-blue-light);background:rgba(37,99,235,.08);color:#fff}

/* ---------- Step-UI (Funnel) ---------- */
.eq-steps{display:flex;gap:6px;margin:0 0 28px;padding:0;list-style:none}
.eq-steps>li{flex:1;height:3px;border-radius:3px;background:#263651;overflow:hidden;position:relative}
.eq-steps>li::after{content:"";position:absolute;inset:0;background:var(--eq-blue-light);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--eq-ease)}
.eq-steps>li.is-done::after,.eq-steps>li[aria-current=step]::after{transform:scaleX(1)}
.eq-steps>li[aria-current=step]::after{background:var(--eq-blue)}
.eq-step-meta{display:flex;justify-content:space-between;align-items:center;gap:16px;font-family:var(--eq-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#adbdd5;margin-bottom:12px}
.eq-step-title{font-family:var(--eq-display);font-size:clamp(26px,4vw,38px);font-weight:600;letter-spacing:-.035em;line-height:1.08;margin:0 0 12px}
.eq-step-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:28px;padding-top:22px;border-top:1px solid var(--eq-line)}
.eq-step-enter{animation:eq-step-in .55s var(--eq-ease) both}

/* ---------- Chat-Bubbles ---------- */
.eq-chat{display:flex;flex-direction:column;gap:10px}
.eq-bubble{max-width:min(86%,560px);padding:12px 16px;border-radius:18px;font-size:15px;line-height:1.55;animation:eq-pop .4s var(--eq-ease) both;overflow-wrap:anywhere}
.eq-bubble--bot{align-self:flex-start;background:var(--eq-surface-2);border:1px solid var(--eq-line);border-bottom-left-radius:6px;color:#e6ecf7}
.eq-bubble--me{align-self:flex-end;background:var(--eq-blue);color:#fff;border-bottom-right-radius:6px}
.eq-bubble__meta{display:block;margin-top:6px;font-family:var(--eq-mono);font-size:10px;letter-spacing:.08em;color:rgba(255,255,255,.55)}
.eq-typing{display:inline-flex;gap:5px;padding:14px 16px;border-radius:18px;background:var(--eq-surface-2);border:1px solid var(--eq-line);align-self:flex-start}
.eq-typing i{width:6px;height:6px;border-radius:50%;background:var(--eq-blue-light);animation:eq-typing 1.2s infinite ease-in-out}
.eq-typing i:nth-child(2){animation-delay:.15s}.eq-typing i:nth-child(3){animation-delay:.3s}
.eq-composer{display:flex;gap:10px;align-items:flex-end;padding:10px;border:1px solid var(--eq-line-strong);border-radius:22px;background:#0b1526}
.eq-composer textarea{flex:1;min-height:44px;max-height:160px;border:0;background:none;color:#fff;font:16px/1.5 var(--eq-sans);resize:none;outline:none;padding:10px 8px}

/* ---------- Toast ---------- */
.eq-toast-region{position:fixed;left:50%;bottom:max(20px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:1000;display:grid;gap:10px;width:min(460px,calc(100% - 32px));pointer-events:none}
.eq-toast{pointer-events:auto;display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:14px;background:rgba(17,26,43,.92);border:1px solid var(--eq-line-strong);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 20px 60px rgba(0,0,0,.35);font-size:14px;line-height:1.55;color:#e8eefa;animation:eq-toast-in .5s var(--eq-ease) both}
.eq-toast__icon{color:var(--eq-blue-light);flex:none;margin-top:2px}
.eq-toast--error{border-color:var(--eq-danger-line);background:rgba(71,34,52,.94)}
.eq-toast--error .eq-toast__icon{color:var(--eq-danger)}
.eq-toast--warn .eq-toast__icon{color:var(--eq-warn)}

/* ---------- Modal (<dialog class="eq-modal">) ---------- */
.eq-modal{padding:0;border:1px solid var(--eq-line);border-radius:18px;background:var(--eq-surface);color:var(--eq-white);width:min(720px,calc(100vw - 24px));max-height:92dvh;overflow:auto;box-shadow:0 50px 160px rgba(0,0,0,.6)}
.eq-modal::backdrop{background:rgba(3,7,18,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.eq-modal[open]{animation:eq-modal-in .5s var(--eq-ease) both}
.eq-modal__body{padding:clamp(24px,5vw,56px)}
.eq-modal__close{position:absolute;top:12px;right:12px;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:rgba(12,23,43,.9);border:1px solid var(--eq-line-strong);color:#fff;cursor:pointer}
.eq-modal__close:hover{background:#253d65}
.eq-modal--full{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0;border:0}

/* ---------- Divider / Stat ---------- */
.eq-rule{height:1px;background:var(--eq-line);border:0;margin:0}
.eq-stat{display:grid;gap:8px;padding-top:20px;border-top:1px solid var(--eq-line)}
.eq-stat__value{font-family:var(--eq-mono);font-size:clamp(40px,5.4vw,76px);font-weight:500;letter-spacing:-.06em;line-height:1;font-variant-numeric:tabular-nums}
.eq-stat__label{font-size:14px;color:var(--eq-muted)}

/* ---------- Hinweise (KI-Bild, Platzhalter) ---------- */
.eq-ai-tag{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--eq-r-pill);background:rgba(7,11,20,.72);border:1px solid var(--eq-line-strong);font-family:var(--eq-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#dbe3f2;backdrop-filter:blur(8px)}
.eq-placeholder{display:inline;padding:1px 6px;border-radius:4px;background:var(--eq-warn-bg);color:var(--eq-warn);font-family:var(--eq-mono);font-size:.86em;border:1px dashed #8a6a2a}

/* ---------- Keyframes ---------- */
@keyframes eq-pop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@keyframes eq-step-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes eq-toast-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes eq-modal-in{from{opacity:0;transform:translateY(24px) scale(.98)}to{opacity:1;transform:none}}
@keyframes eq-typing{0%,80%,100%{transform:translateY(0);opacity:.4}40%{transform:translateY(-4px);opacity:1}}

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}
html[data-motion=reduced] *,html[data-motion=reduced] *::before,html[data-motion=reduced] *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}