/* @epsa/design · Grund: Hintergrund auf html, Schrift, Fokus, „Bewegung reduzieren“.
   Reihenfolge in der App: tokens.css, fonts.css, base.css, components.css. Werte nur aus tokens.css. */
html {
  /* Grund auf html, nicht nur auf body (07); body bleibt transparent, sonst übermalt es das Raumlicht. */
  background: var(--epsa-bg);
}
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: transparent;
  color: var(--epsa-fg);
  font-family: var(--epsa-font-family-ui);
  font-size: var(--epsa-font-size-body);
  font-weight: var(--epsa-font-weight-regular);
  line-height: var(--epsa-font-line-height-body);
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: var(--epsa-size-outline) solid var(--epsa-accent); outline-offset: var(--epsa-size-outline); }

/* Leistungsbudget 05: bei „Bewegung reduzieren“ keine Übergänge und Animationen (wie Admin). Die Flower zeigt dann
   von sich aus ein Standbild. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}