/*
  Small CTA box ("Störer") on the hero of the start page.
  Markup: site/snippets/hero-cta.php
  Font sizes come from the h3 class in main2.css.
*/

.hmiHeroCta {
  position: absolute;
  z-index: 4; /* Above the hero text (3). Below the fixed header (100). */
  /* 170px below the top of the hero, measured from the mockups. Root font size is 10px. */
  top: 17rem;
  right: 0;
  padding: 0.3em 0.5em;
  background: #fff;
}

/* main2.css recolors every a:hover and a:focus. Setting the colors on the lines keeps them stable. */
.hmiHeroCta--text {
  display: block;
  color: #111;
}

.hmiHeroCta--link {
  display: block;
  color: var(--hero-cta-color, #ff5f48);
  transition: transform 0.2s ease-out; /* Same as .arrow links in main2.css */
}

.hmiHeroCta:hover .hmiHeroCta--link,
.hmiHeroCta:focus-visible .hmiHeroCta--link {
  transform: translateX(0.5rem);
}