/* ==================== */
/* CTA, siehe WATRS-677 */
/* ==================== */

.component .actionbutton.next {
  background-color: var(--cta-color);
  color: var(--cta-text-color);
}

.component.uinavigation .actionbutton.next {
  border-color: var(--cta-color);
}

.component.uinavigation .actionbutton.next:hover {
  background-color: var(--cta-hover-color);
  border-color: var(--cta-hover-color);
}

.component.uinavigation .actionbutton.next .text:after {
  content: url("data:image/svg+xml;utf8,<svg width='40px' height='28px' viewBox='6 -10 42 32' version='1.1' xmlns='http://www.w3.org/2000/svg'><path d='M 30 1 L 40 11 L 30 21' stroke='%2311284e' stroke-width='3' fill='none'/></svg>");
}

.component .actionbutton .spinner {
  border-color: transparent var(--cta-text-color);
}

.component.uiactionbutton.forward .actionbutton {
  transition-property: background-color, border-color;
  transition: .3s ease-in-out;
  border-color: var(--cta-color);
  background-color: var(--cta-color);
  color: var(--cta-text-color);
}

.component.uiactionbutton.forward .actionbutton:hover {
  border-color: var(--cta-hover-color);
  background-color: var(--cta-hover-color);
}

/* =============== */
/* Tarifkomponente */
/* =============== */

.bluelink a {
  display: block;
  flex: 1;
  color: var(--primary-color);
  font-size: 125%;
  font-weight: 600;
  border: none;
  background: none;
  text-align: center;
  margin-bottom: 30px;
  margin-top: 6px;
}

.bluelink a:focus {
  box-shadow: none;
}

@media (max-width: 760px) {
  .bluelink a {
    font-size: 90%;
  }
}

@media (max-width: 400px) {
  .bluelink a {
    font-size: 75%;
  }
}

.component.uiinputtarif {
  padding-top: 12px;
  padding-bottom: 4px;
}

.component.uiinputtarif:focus {
  box-shadow: none;
}