/* ============================================================================
   AnchorIT Website — Prototyp
   Arbeitsstand. Keine endgültigen Designfestlegungen.

   Verbindlich umgesetzt:
   - Ausschliesslich die AnchorIT Corporate Colour Palette (REQ-DES-020 ff.)
   - Poppins als vorläufige Schriftfamilie (REQ-DES-033, REQ-DES-034)
   - WCAG 2.2 AA als Zielstandard (REQ-A11Y-010)
   - prefers-reduced-motion (REQ-ANI-031, REQ-ANI-032)

   TEMPORÄR und noch offen:
   - Gewichtsstaffelung der Typografie (OPEN-027)
   - Zuordnung der Farben zu allen UI-Rollen (OPEN-023)
   - Rahmen-/Trennlinienfarbe: hier als Transparenzabstufung vorhandener
     Palettenfarben gelöst, damit KEINE neue Corporate-Farbe entsteht
     (REQ-DES-022). Endgültige Lösung ist offen (OPEN-023).
   ========================================================================== */

/* ---------- 1 · Tokens ---------------------------------------------------- */
:root {
  /* Corporate Colour Palette — verbindlich, unveränderbar (REQ-DES-020) */
  --deep-ocean: #0E3D6E;
  --harbour:    #1B5E8B;
  --teal:       #2A8FA0;
  --gold:       #E8A020;
  --salt-white: #F2F6FA;
  --white:      #FFFFFF;
  --dark:       #111111;
  --slate:      #4A5568;

  /* Semantische Rollen — VORSCHLAG, noch nicht bestätigt (OPEN-023) */
  --surface:            var(--salt-white);
  --surface-raised:     var(--white);
  --surface-deep:       var(--deep-ocean);
  --ink:                var(--dark);        /* 17.39:1 auf surface */
  --ink-muted:          var(--slate);       /*  6.93:1 auf surface */
  --ink-inverse:        var(--white);       /* 10.99:1 auf surface-deep */
  --ink-inverse-muted:  var(--salt-white);  /* 10.12:1 auf surface-deep */
  --accent-on-deep:     var(--gold);        /*  4.96:1 auf surface-deep */
  --link:               var(--deep-ocean);  /* 10.12:1 auf surface */
  --focus:              var(--deep-ocean);
  --focus-on-deep:      var(--white);
  /* TEMPORÄR: Transparenzabstufungen, keine neuen Farben (OPEN-023) */
  --border:             color-mix(in srgb, var(--slate) 22%, transparent);
  --border-on-deep:     color-mix(in srgb, var(--white) 22%, transparent);

  /* Typografie — Poppins, selbst gehostet (siehe fonts.css).
     Der Fallback-Stack greift nur, bis die Schrift geladen ist. */
  --font: "Poppins", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  --fs-h1:    clamp(2.00rem, 1.20rem + 3.6vw, 4.25rem);
  --fs-h1-sub:clamp(1.05rem, 0.90rem + 0.7vw, 1.50rem);
  --fs-h2:    clamp(1.65rem, 1.25rem + 1.8vw, 2.75rem);
  --fs-h3:    clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem);
  --fs-lead:  clamp(1.10rem, 1.00rem + 0.5vw, 1.40rem);
  --fs-body:  clamp(1.02rem, 0.98rem + 0.2vw, 1.13rem);
  --fs-small: clamp(0.86rem, 0.84rem + 0.1vw, 0.94rem);

  /* Spacing — 4px-Basis, gestuft */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  --section-y: clamp(72px, 9vw, 160px);
  --gutter:    clamp(20px, 4vw, 64px);
  --container: 1200px;
  --measure:   68ch;
  --radius:    5px;

  --ease: cubic-bezier(.22,.61,.36,1);

  /* Scrollfortschritt — wird von main.js gesetzt */
  --p: 0;      /* 0 … 1  Intro-Transformation gesamt   */
  --p-late: 0; /* 0 … 1  letzter Abschnitt (Header)    */
}

/* ---------- 2 · Reset / Basis --------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip; /* Sicherung gegen horizontalen Overflow (REQ-RWD-004) */
}
img, svg { display: block; max-width: 100%; height: auto; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; }
p { margin: 0 0 var(--s-4); }
a { color: var(--link); }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}
.section--deep :focus-visible,
.site-header :focus-visible,
.intro :focus-visible { outline-color: var(--focus-on-deep); }

.skip-link {
  position: absolute; left: var(--s-4); top: -100px; z-index: 100;
  background: var(--surface-deep); color: var(--ink-inverse);
  padding: var(--s-3) var(--s-4); border-radius: var(--radius);
  text-decoration: none; font-weight: 600;
  transition: top .15s var(--ease);
}
.skip-link:focus { top: var(--s-4); }

/* ---------- 3 · Layout ---------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--text { max-width: calc(var(--measure) + 2 * var(--gutter)); }

.section { padding-block: var(--section-y); }
.section--deep { background: var(--surface-deep); color: var(--ink-inverse); }
.section--deep p { color: var(--ink-inverse-muted); }
.section--deep a { color: var(--accent-on-deep); }

.section__head, h2 { font-size: var(--fs-h2); margin-bottom: var(--s-4); }
h3 { font-size: var(--fs-h3); }

.eyebrow {
  font-size: var(--fs-small); font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-muted); margin-bottom: var(--s-3);
}
.eyebrow--on-deep { color: var(--accent-on-deep); }
.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--ink); }
.section--deep .lead { color: var(--ink-inverse); }
.container--text p { max-width: var(--measure); }

/* ---------- 4 · Header ---------------------------------------------------- */
.site-header {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 50;
  background: var(--surface-deep);
  border-bottom: 1px solid var(--border-on-deep);
  transform: translate3d(0, calc((var(--p-late) - 1) * 100%), 0);
  will-change: transform;
}
/* Auf Unterseiten ohne Intro gibt es keinen Scrollfortschritt: Der Header
   steht dort dauerhaft, statt scrollgesteuert einzufahren. */
.site-header--statisch { position: sticky; transform: none; }

.site-header__inner {
  max-width: var(--container); margin-inline: auto;
  padding: var(--s-3) var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-5);
}
.site-header__brand { display: block; color: var(--ink-inverse); }
.site-header__brand img { width: 132px; height: auto; }
.site-nav ul { display: flex; align-items: center; gap: clamp(var(--s-3), 1.6vw, var(--s-6)); }
.site-nav a {
  color: var(--ink-inverse); text-decoration: none;
  font-size: var(--fs-small); font-weight: 600;
  padding: var(--s-2) 0; display: inline-block;
}
.site-nav a:hover { color: var(--accent-on-deep); }
.site-nav__cta { color: var(--accent-on-deep) !important; font-weight: 600; }
.nav-toggle {
  display: none; align-items: center; gap: var(--s-3);
  background: none; border: 1px solid var(--border-on-deep);
  border-radius: var(--radius); color: var(--ink-inverse);
  font: inherit; font-size: var(--fs-small); font-weight: 600;
  padding: var(--s-2) var(--s-4); min-height: 44px; cursor: pointer;
}
.nav-toggle:hover { border-color: var(--ink-inverse-muted); }
.nav-toggle__balken { position: relative; width: 16px; height: 1px; background: currentColor; }
.nav-toggle__balken::before, .nav-toggle__balken::after {
  content: ""; position: absolute; left: 0; width: 16px; height: 1px; background: currentColor;
}
.nav-toggle__balken::before { top: -5px; }
.nav-toggle__balken::after  { top: 5px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__balken { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__balken::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__balken::after  { top: 0; transform: rotate(-45deg); }

@media (max-width: 899px) {
  .site-header__inner { flex-wrap: wrap; }
  .nav-toggle { display: inline-flex; }
  .site-nav { display: none; width: 100%; order: 3; }
  .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding-bottom: var(--s-3); }
  .site-nav li { width: 100%; }
  .site-nav a { display: block; padding: var(--s-4) 0; border-top: 1px solid var(--border-on-deep); }
}

/* ---------- 5 · Intro & Hero (eine Section) ------------------------------- */
.intro-track { height: 200vh; }              /* Strecke der Transformation */
.intro {
  position: sticky; top: 0;
  height: 100svh; min-height: 480px;
  display: grid; place-items: center;
  background: var(--surface-deep);           /* statischer Fallback (REQ-ANI-030) */
  color: var(--ink-inverse);
  overflow: hidden; isolation: isolate;
}
.intro__waves {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%;
  opacity: 0; transition: opacity .9s var(--ease);
}
.intro__waves.is-ready { opacity: 1; }

.intro__content {
  display: grid; justify-items: center; gap: clamp(var(--s-6), 5vh, var(--s-9));
  padding-inline: var(--gutter); text-align: center;
  width: 100%; max-width: 940px;
}
.intro__brand {
  margin: 0;
  transform: translate3d(0, calc(var(--p) * -14vh), 0) scale(calc(1 - var(--p) * .42));
  opacity: calc(1 - var(--p-late));
  will-change: transform, opacity;
}
.intro__brand img { width: clamp(210px, 34vw, 340px); height: auto; }

.intro__text {
  transform: translate3d(0, calc(var(--p) * -6vh), 0);
  will-change: transform;
}
.h1 { font-size: var(--fs-h1); display: grid; gap: var(--s-4); justify-items: center; }
.h1__claim { font-weight: 600; }
.h1__sub {
  font-size: var(--fs-h1-sub); font-weight: 400; line-height: 1.45;
  color: var(--ink-inverse-muted); max-width: 46ch; letter-spacing: 0;
}
.intro__hint {
  position: absolute; bottom: clamp(16px, 4vh, 40px); left: 50%;
  transform: translateX(-50%);
  margin: 0; font-size: var(--fs-small); letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-inverse-muted);
  display: grid; justify-items: center; gap: var(--s-2);
  opacity: calc(1 - var(--p) * 2.2);
}
.intro__hint-line { width: 1px; height: 34px; background: var(--border-on-deep); }

/* ---------- 6 · Ebenenkette (5 Cluster, 9 Ebenen) ------------------------ */
.kette-layout { display: grid; gap: var(--s-8); }
.kette-layout__kopf { max-width: 46ch; }
@media (min-width: 1000px) {
  .kette-layout {
    grid-template-columns: minmax(260px, 21rem) 1fr;
    gap: clamp(var(--s-8), 6vw, var(--s-10));
    align-items: start;
  }
  /* Der Kopf bleibt stehen, waehrend die Kette durchlaeuft. */
  .kette-layout__kopf { position: sticky; top: 104px; }
}

.kette { position: relative; display: grid; }
.kette__cluster {
  position: relative;
  padding: 0 0 var(--s-8) clamp(30px, 4vw, 52px);
  border-left: 1px solid var(--border-on-deep);
}
.kette__cluster:last-child { padding-bottom: 0; border-left-color: transparent; }

/* Marke auf der Linie */
.kette__cluster::before {
  content: ""; position: absolute; left: -5px; top: .38em;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent-on-deep);
}
/* Die Linie, die sich beim Durchlaufen fuellt */
.kette__cluster::after {
  content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 1px;
  background: var(--ink-inverse-muted);
}
.kette__cluster:last-child::after { content: none; }

.kette__titel {
  display: flex; align-items: baseline; gap: var(--s-3);
  font-size: var(--fs-small); font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent-on-deep);
  margin-bottom: var(--s-5);
}
.kette__nr { color: var(--ink-inverse-muted); font-variant-numeric: tabular-nums; }

.kette__ebenen { display: grid; gap: var(--s-6); }
.ebene h4 {
  font-size: var(--fs-h3); color: var(--ink-inverse);
  margin-bottom: var(--s-2); line-height: 1.25;
}
.ebene p { margin: 0; color: var(--ink-inverse-muted); }
.kette__cluster--ziel .ebene h4 { color: var(--accent-on-deep); }

/* ---------- 6b · Bewegung beim Eintritt -----------------------------------
   TEMPORÄR (OPEN-028): dezente Einblendung, ausschliesslich transform und
   opacity. Greift nur mit JavaScript und nur, wenn keine Bewegungsreduktion
   eingestellt ist. Ohne JS sind alle Inhalte sofort vollstaendig sichtbar.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {

  /* Allgemeine Einblendung, z. B. Leistungscluster */
  .js .reveal {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
    transition: opacity .55s var(--ease) var(--d, 0ms),
                transform .55s var(--ease) var(--d, 0ms);
  }
  .js .reveal.is-visible { opacity: 1; transform: none; }

  /* Harvey Ball laedt sich auf, sobald der Schritt sichtbar wird. */
  .js .step .harvey__fuell {
    stroke-dashoffset: 50.27;
    transition: stroke-dashoffset 1.1s var(--ease) var(--d, 0ms);
  }
  .js .step.is-visible .harvey__fuell { stroke-dashoffset: 0; }

  /* Ebenenkette: Eintritt, Marke und sich fuellende Linie */
  /* Der noch nicht erreichte Teil der Kette ist gedaempft, bleibt aber
     lesbar: Bei einer Deckkraft von 0.62 erreichen die Ueberschriften 5.23:1
     und der Fliesstext 4.92:1 gegen Deep Ocean — beides ueber AA. Das
     Fortschrittssignal tragen die Marke und die sich fuellende Linie. */
  .js .kette__cluster {
    opacity: .62;
    transform: translate3d(0, 10px, 0);
    transition: opacity .55s var(--ease), transform .55s var(--ease);
  }
  .js .kette__cluster.is-active { opacity: 1; transform: none; }

  .js .kette__cluster::before {
    background: var(--surface-deep);
    box-shadow: inset 0 0 0 1px var(--ink-inverse-muted);
    transform: scale(.5);
    transition: transform .45s var(--ease) .1s,
                background .45s var(--ease) .1s,
                box-shadow .45s var(--ease) .1s;
  }
  .js .kette__cluster.is-active::before {
    background: var(--accent-on-deep); box-shadow: none; transform: scale(1);
  }

  .js .kette__cluster::after {
    transform: scaleY(0); transform-origin: top;
    transition: transform .9s var(--ease);
  }
  .js .kette__cluster.is-active::after { transform: scaleY(1); }
}

/* ---------- 7 · Leistungen ------------------------------------------------ */
.cluster-grid {
  display: grid; gap: var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.cluster { padding-top: var(--s-5); border-top: 1px solid var(--border); }
.cluster h3 { margin-bottom: var(--s-3); }
.cluster p { color: var(--ink-muted); margin: 0; }

/* ---------- 8 · Arbeitsweise ---------------------------------------------- */
.steps {
  display: grid; gap: var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  counter-reset: step;
}
.step { padding-top: var(--s-5); border-top: 1px solid var(--border); }
.step__kopf {
  display: flex; align-items: center; gap: var(--s-3);
  margin-bottom: var(--s-4);
}
.step__no {
  font-size: var(--fs-small); font-weight: 600;
  letter-spacing: .1em; color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

/* Harvey Ball: laedt sich beim Eintritt des Schritts auf.
   Der Fuellkreis hat eine Strichbreite von 2 x Radius und deckt damit die
   gesamte Scheibe ab; ueber stroke-dashoffset entsteht ein Tortenstueck. */
.harvey { display: block; width: 26px; height: 26px; flex: none; }
.harvey svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.harvey__spur { fill: none; stroke: var(--border); stroke-width: 1.5; }
.harvey__fuell {
  fill: none; stroke: var(--deep-ocean); stroke-width: 16;
  stroke-dasharray: 50.27;   /* Umfang bei r = 8 */
  stroke-dashoffset: 0;      /* Standard: gefuellt, auch ohne JavaScript */
}
.step h3 { margin-bottom: var(--s-2); }
.step p { color: var(--ink-muted); margin: 0; }

/* ---------- 10 · Links, Buttons ------------------------------------------- */
.link { color: var(--link); text-decoration: underline; text-underline-offset: .22em; }

.btn {
  display: inline-block; min-height: 44px;
  padding: var(--s-3) var(--s-6);
  border-radius: var(--radius); text-decoration: none;
  font-weight: 600; font-size: var(--fs-lead); line-height: 1.5;
  transition: filter .15s var(--ease);
}
.btn--primary { background: var(--gold); color: var(--dark) !important; } /* 8.52:1 */
.btn--primary:hover { filter: brightness(1.08); }
.section--contact .contact__mail { margin-top: var(--s-6); }

/* ---------- 10b · Kontaktformular ---------------------------------------- */
.kontaktform { margin-top: var(--s-8); max-width: 34rem; }
.kontaktform__intro {
  font-size: var(--fs-small); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-inverse-muted); margin-bottom: var(--s-5);
}
.feld { display: grid; gap: var(--s-2); margin-bottom: var(--s-5); }
.feld label { font-size: var(--fs-small); font-weight: 600; color: var(--ink-inverse); }
.feld input, .feld textarea {
  font: inherit; font-size: var(--fs-body);
  color: var(--ink-inverse);
  background: transparent;
  border: 1px solid var(--border-on-deep);
  border-radius: var(--radius);
  padding: var(--s-3) var(--s-4);
  min-height: 44px;
  width: 100%;
  transition: border-color .15s var(--ease);
}
.feld textarea { resize: vertical; min-height: 140px; line-height: 1.55; }
.feld input:hover, .feld textarea:hover { border-color: var(--ink-inverse-muted); }
.feld input:focus-visible, .feld textarea:focus-visible {
  outline: 2px solid var(--focus-on-deep); outline-offset: 2px;
  border-color: var(--focus-on-deep);
}
.feld__pflicht { color: var(--accent-on-deep); }
.kontaktform__pflicht {
  font-size: var(--fs-small); color: var(--ink-inverse-muted);
  margin-bottom: var(--s-5);
}
/* Fehlerzustand erst nach der Eingabe, nie allein über Farbe: der Browser
   zeigt zusätzlich seine Meldung im Klartext an. */
.feld input:user-invalid, .feld textarea:user-invalid {
  border-color: var(--accent-on-deep);
  border-width: 2px;
  padding: calc(var(--s-3) - 1px) calc(var(--s-4) - 1px);
}
.kontaktform__hinweis {
  font-size: var(--fs-small); color: var(--ink-inverse-muted);
  margin-bottom: var(--s-6);
}
.kontaktform__hinweis a { color: var(--accent-on-deep); }
/* Honeypot: fuer Menschen unsichtbar, fuer Bots vorhanden. Nicht display:none,
   damit einfache Bots das Feld nicht als versteckt erkennen. */
.honigtopf {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden;
}


/* ---------- 10c · Rechtsseiten -------------------------------------------- */
.rechtsseite { padding-block: var(--s-10) var(--section-y); }
.rechtsseite h1 { font-size: var(--fs-h2); margin-bottom: var(--s-6); }
.rechtsseite h2 {
  font-size: var(--fs-h3); margin: var(--s-8) 0 var(--s-3);
  padding-top: var(--s-5); border-top: 1px solid var(--border);
}
.rechtsseite p { max-width: var(--measure); }
.rechtsseite ul {
  list-style: disc; padding-left: 1.4em; margin: 0 0 var(--s-4);
  max-width: var(--measure); color: var(--ink-muted);
}
.rechtsseite li { margin-bottom: var(--s-2); }
.rechtsseite__anmerkung {
  font-size: var(--fs-small); color: var(--ink-muted);
  border-left: 2px solid var(--border); padding-left: var(--s-4);
}
.rechtsseite__stand {
  margin-top: var(--s-9); padding-top: var(--s-5);
  border-top: 1px solid var(--border);
  font-size: var(--fs-small); color: var(--ink-muted);
}
.rechtsseite__zurueck { margin-top: var(--s-5); }

/* Auszufüllende Stellen der Vorlage */
.pf {
  background: color-mix(in srgb, var(--gold) 30%, transparent);
  color: var(--ink); padding: 0 .3em; border-radius: 3px;
  font-weight: 600;
}

/* Hinweis auf den Arbeitsstand — erscheint nicht auf der Startseite */
.hinweisbox {
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  background: var(--surface-raised);
  padding: var(--s-5);
  margin-bottom: var(--s-8);
  max-width: var(--measure);
}
.hinweisbox p { margin-bottom: var(--s-3); }
.hinweisbox p:last-child { margin-bottom: 0; }

/* ---------- 11 · Footer --------------------------------------------------- */
.site-footer {
  background: var(--surface-deep); color: var(--ink-inverse-muted);
  padding-block: var(--s-8);
  border-top: 1px solid var(--border-on-deep);
}
.site-footer__inner { display: grid; gap: var(--s-5); }
.site-footer__brand { font-weight: 600; color: var(--ink-inverse); margin: 0; }
.site-footer__social { margin: 0; display: flex; align-items: center; gap: var(--s-1); }
.social-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-left: -11px;   /* optisch buendig */
  color: var(--ink-inverse-muted);
  transition: color .15s var(--ease);
}
.social-link:hover { color: var(--accent-on-deep); }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: var(--s-5); }
.site-footer__legal a { color: var(--ink-inverse-muted); text-decoration: underline; text-underline-offset: .22em; }
.site-footer__legal a:hover { color: var(--accent-on-deep); }
/* Reihenfolge im Footer: Marke, LinkedIn, Rechtliches, Hinweis. Bewusst
   gestapelt, damit LinkedIn oberhalb der Rechtslinks steht. */
.site-footer__inner { gap: var(--s-4); }
.site-footer__brand { margin-bottom: var(--s-2); }

/* ---------- 12 · Bewegungsreduktion (REQ-ANI-031, REQ-ANI-032) ------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .intro-track { height: auto; }
  .intro { position: static; height: 100svh; }
  .intro__brand, .intro__text { transform: none; opacity: 1; }
  .intro__hint { display: none; }
  .site-header { position: sticky; transform: none; }
  .kette__cluster, .reveal { opacity: 1; transform: none; }
  .intro__waves { transition: none; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}