/* Motion system (Change Request 6, 3 Nov 2026): smooth, fast, quiet. Every animated value on the site comes from
   these tokens. Three kinds of motion exist: reveal, hover, count/draw; plus the short page fade. Nothing runs after
   the content has arrived. Loaded by partials/header.php; behaviour in assets/js/motion.js.

   The reveal targets are listed once, in partials/header.php: that list is written into the inline rules that hide
   them and handed to motion.js. Hiding needs html.m-on, which only the inline script sets, so without JavaScript
   everything is visible, and a watchdog there removes it if motion.js does not load. Heroes use CSS alone (below). */
:root {
  --m-dur: 280ms;     /* standard */
  --m-dur-s: 180ms;   /* small interactions */
  --m-draw: 600ms;    /* first draw of a chart line or bar (none on the site yet) */
  --m-tween: 300ms;   /* a value moving to its new value */
  --m-out: 150ms;     /* page fade out */
  --m-in: 200ms;      /* page fade in */
  --m-ease: cubic-bezier(.2, .7, .2, 1);
}

/* ------------------------------------------------------------------ one easing, one speed.
   The old theme carries its own durations and easings on many elements (every link: `all .4s ease`). Instead of
   chasing them, everything defaults to the small-interaction speed; the few specified exceptions are named here. */
a, button, input, select, textarea {
  transition: color var(--m-dur-s), background-color var(--m-dur-s), border-color var(--m-dur-s), box-shadow var(--m-dur-s), transform var(--m-dur-s);
}
@media (prefers-reduced-motion: no-preference) {
  *, *::before, *::after {
    transition-timing-function: var(--m-ease) !important;
    transition-duration: var(--m-dur-s) !important;
  }
  /* standard speed */
  .fd, .svc-faq__panel-wrap, .fh__link::after, .faq-answer, .scroll-top { transition-duration: var(--m-dur) !important; }
  /* a fade plus an instant visibility switch */
  .mm-panel, .fh__dd { transition-duration: var(--m-dur-s), 0s !important; }
  body::after { transition-duration: var(--m-dur), 0s !important; }
  /* page fade out */
  html.m-leaving body > * { transition-duration: var(--m-out) !important; }
  /* the logo dot and the accent line that follows it change colour slowly (Change Request 4) */
  .fh-logo .cls-1, .dl-hero-claim::after { transition-duration: .8s !important; }
  /* tied to the scroll position, not an animation */
  .scroll-top path { transition-duration: 10ms !important; }
}

/* ------------------------------------------------------------------ hero: in view on arrival, so it needs no script
   and the largest element of the page never waits for one. Text and image together: a delay on the image would
   postpone the largest paint on pages where the image is the largest element. */
@media screen and (prefers-reduced-motion: no-preference) {
  html.m-on .breadcumb-content, html.m-on .breadcumb-thumb, html.m-on .st-hero .dl-hero, html.m-on .st-hero .dl-hero-media {
    animation: m-rise var(--m-dur) var(--m-ease) backwards;
  }
}
@keyframes m-rise { from { opacity: 0; transform: translateY(14px); } }

/* ------------------------------------------------------------------ hover: cards */
.st-card, .dl-card, .dl-hilfe__col, .zg-card, .zg-tile, .rv__card figure, .svc-related__card {
  transition: transform var(--m-dur-s) var(--m-ease), box-shadow var(--m-dur-s) var(--m-ease), border-color var(--m-dur-s) var(--m-ease);
}
@media (any-hover: hover) {
  .st-card:hover, .dl-card:hover, .dl-hilfe__col:hover, .zg-card:hover, .zg-tile:hover, .rv__card figure:hover, .svc-related__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(0, 0, 0, .08);
    border-color: #D5D5D5;
  }
}

/* ------------------------------------------------------------------ hover: buttons */
.global-btn, .st-btn, .fh__cta, .fkr-btn, .finaro-zg-switch__btn {
  transition: background-color var(--m-dur-s) var(--m-ease), border-color var(--m-dur-s) var(--m-ease), color var(--m-dur-s) var(--m-ease), transform var(--m-dur-s) var(--m-ease), box-shadow var(--m-dur-s) var(--m-ease);
}
.global-btn::before, .global-btn::after { transition-duration: var(--m-dur-s); transition-timing-function: var(--m-ease); }
@media (any-hover: hover) {
  .global-btn:hover, .st-btn:hover, .fh__cta:hover, .fkr-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
  }
}
.global-btn:active, .st-btn:active, .fh__cta:active, .fkr-btn:active, .finaro-zg-switch__btn:active { transform: scale(.98); }

/* ------------------------------------------------------------------ page transition: header and footer stay */
html.m-leaving body > :not(header, .fd, .fn-footer, .scroll-top, script, style, link, noscript) {
  opacity: 0;
  transition: opacity var(--m-out) var(--m-ease);
}
html.m-enter body > :not(header, .fd, .fn-footer, .scroll-top, script, style, link, noscript) {
  animation: m-fade var(--m-in) var(--m-ease);
}
@keyframes m-fade { from { opacity: 0; } }

/* ------------------------------------------------------------------ mobile menu backdrop */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1090;
  background: rgba(0, 0, 0, .28);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--m-dur) var(--m-ease), visibility 0s linear var(--m-dur);
}
html.fd-lock body::after { opacity: 1; visibility: visible; transition-delay: 0s; }

/* ------------------------------------------------------------------ reduced motion: nothing moves */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    transition-duration: 0ms !important;
    transition-delay: 0ms !important;
    animation-duration: 0ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
  }
  .st-card:hover, .dl-card:hover, .dl-hilfe__col:hover, .zg-card:hover, .zg-tile:hover, .rv__card figure:hover, .svc-related__card:hover,
  .global-btn:hover, .st-btn:hover, .fh__cta:hover, .fkr-btn:hover,
  .global-btn:active, .st-btn:active, .fh__cta:active, .fkr-btn:active, .finaro-zg-switch__btn:active {
    transform: none;
    box-shadow: none;
  }
}