/*
 * KRP action buttons
 * Resting state: transparent with a coloured outline.
 * Hover, keyboard focus and active state: filled with the assigned KRP colour.
 */

:where(.krp-site) :where(
  a.krp-button,
  button.krp-button,
  .krp-form button[type="submit"],
  .krp-contact-original form button[type="submit"],
  .krp-jobs-form__submit
) {
  --krp-action-color: #0070B7;
  --krp-action-fill-text: #FFFFFF;
  min-height: 3.25rem;
  padding: .7rem 1.75rem;
  color: var(--krp-action-color) !important;
  background: transparent !important;
  background-image: none !important;
  border: 3px solid var(--krp-action-color) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  text-decoration: none !important;
  cursor: pointer;
  transition:
    color 220ms ease,
    background-color 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease,
    transform 160ms ease !important;
}

:where(.krp-site) :where(
  a.krp-button,
  button.krp-button,
  .krp-form button[type="submit"],
  .krp-contact-original form button[type="submit"],
  .krp-jobs-form__submit
):hover,
:where(.krp-site) :where(
  a.krp-button,
  button.krp-button,
  .krp-form button[type="submit"],
  .krp-contact-original form button[type="submit"],
  .krp-jobs-form__submit
):focus-visible,
:where(.krp-site) :where(
  a.krp-button,
  button.krp-button,
  .krp-form button[type="submit"],
  .krp-contact-original form button[type="submit"],
  .krp-jobs-form__submit
):active {
  color: var(--krp-action-fill-text) !important;
  background: var(--krp-action-color) !important;
  background-image: none !important;
  border-color: var(--krp-action-color) !important;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--krp-action-color) 24%, transparent) !important;
}

@media (hover: hover) and (pointer: fine) {
  :where(.krp-site) :where(
    a.krp-button,
    button.krp-button,
    .krp-form button[type="submit"],
    .krp-contact-original form button[type="submit"],
    .krp-jobs-form__submit
  ):hover {
    transform: translateY(-1px);
  }
}

:where(.krp-site) :where(
  a.krp-button,
  button.krp-button,
  .krp-form button[type="submit"],
  .krp-contact-original form button[type="submit"],
  .krp-jobs-form__submit
):active {
  transform: scale(.98);
}

:where(.krp-site) :where(
  a.krp-button,
  button.krp-button,
  .krp-form button[type="submit"],
  .krp-contact-original form button[type="submit"],
  .krp-jobs-form__submit
):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--krp-action-color) 34%, transparent);
  outline-offset: 3px;
}

/* Recruiting keeps its established magenta KRP accent. */
.krp-site .krp-jobs-form__submit,
.krp-site.route-karriere .krp-jobs-form__submit,
.krp-site[class*="route-karriere-"] .krp-jobs-form__submit {
  --krp-action-color: #DB005D;
}

/* On blue colour bands the light CTA remains clearly visible. */
.krp-site .krp-consultation .krp-button--light {
  --krp-action-color: #FFFFFF;
  --krp-action-fill-text: #0070B7;
}

/* Mobile location choices use their respective practice colour. */
@media (max-width: 61.1875rem) {
  .krp-bottom-nav__locations a {
    --krp-action-color: #0070B7;
    --krp-action-fill-text: #FFFFFF;
    color: var(--krp-action-color) !important;
    background: transparent !important;
    border: 3px solid var(--krp-action-color) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    transition: color 220ms ease, background-color 220ms ease, transform 160ms ease !important;
  }

  .krp-bottom-nav__locations .is-wieren {
    --krp-action-color: #79B41D;
  }

  .krp-bottom-nav__locations a:hover,
  .krp-bottom-nav__locations a:focus-visible,
  .krp-bottom-nav__locations a:active {
    color: var(--krp-action-fill-text) !important;
    background: var(--krp-action-color) !important;
  }

  .krp-bottom-nav__locations a:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--krp-action-color) 34%, transparent);
    outline-offset: 3px;
  }

  .krp-bottom-nav__locations a:active {
    transform: scale(.98);
  }
}

:where(.krp-site) :where(button, input[type="submit"]):disabled {
  cursor: not-allowed;
  opacity: .55;
  transform: none !important;
  box-shadow: none !important;
}

@media (prefers-reduced-motion: reduce) {
  :where(.krp-site) :where(
    a.krp-button,
    button.krp-button,
    .krp-form button[type="submit"],
    .krp-contact-original form button[type="submit"],
    .krp-jobs-form__submit
  ),
  .krp-bottom-nav__locations a {
    transition-duration: .01ms !important;
  }
}

/*
 * Final cascade authority. The historic template contains several high-
 * specificity button declarations; keep this block last so the shared
 * outline component remains authoritative on every page type.
 */
html body.krp-site .krp-main .krp-button,
html body.krp-site .krp-main .krp-form button[type="submit"],
html body.krp-site .krp-main .krp-contact-original form button[type="submit"],
html body.krp-site .krp-main .krp-jobs-form__submit {
  color: var(--krp-action-color) !important;
  background: transparent !important;
  background-image: none !important;
  border: 3px solid var(--krp-action-color) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}

html body.krp-site .krp-main .krp-button:hover,
html body.krp-site .krp-main .krp-button:focus-visible,
html body.krp-site .krp-main .krp-button:active,
html body.krp-site .krp-main .krp-form button[type="submit"]:hover,
html body.krp-site .krp-main .krp-form button[type="submit"]:focus-visible,
html body.krp-site .krp-main .krp-form button[type="submit"]:active,
html body.krp-site .krp-main .krp-contact-original form button[type="submit"]:hover,
html body.krp-site .krp-main .krp-contact-original form button[type="submit"]:focus-visible,
html body.krp-site .krp-main .krp-contact-original form button[type="submit"]:active,
html body.krp-site .krp-main .krp-jobs-form__submit:hover,
html body.krp-site .krp-main .krp-jobs-form__submit:focus-visible,
html body.krp-site .krp-main .krp-jobs-form__submit:active {
  color: var(--krp-action-fill-text) !important;
  background: var(--krp-action-color) !important;
  background-image: none !important;
  border-color: var(--krp-action-color) !important;
}

html body.krp-site .krp-main .krp-consultation .krp-button--light {
  color: #FFFFFF !important;
  border-color: #FFFFFF !important;
}

html body.krp-site .krp-main .krp-consultation .krp-button--light:hover,
html body.krp-site .krp-main .krp-consultation .krp-button--light:focus-visible,
html body.krp-site .krp-main .krp-consultation .krp-button--light:active {
  color: #0070B7 !important;
  background: #FFFFFF !important;
  border-color: #FFFFFF !important;
}

/* Text-colour authority over legacy :not() chains used by classic sections. */
html body.krp-site .krp-main .krp-content .krp-button.krp-button,
html body.krp-site .krp-main .krp-content .krp-form button[type="submit"],
html body.krp-site .krp-main .krp-content .krp-contact-original form button[type="submit"],
html body.krp-site .krp-main .krp-content .krp-jobs-form__submit.krp-jobs-form__submit {
  color: var(--krp-action-color) !important;
}

html body.krp-site .krp-main .krp-content .krp-button.krp-button:hover,
html body.krp-site .krp-main .krp-content .krp-button.krp-button:focus-visible,
html body.krp-site .krp-main .krp-content .krp-button.krp-button:active,
html body.krp-site .krp-main .krp-content .krp-form button[type="submit"]:hover,
html body.krp-site .krp-main .krp-content .krp-form button[type="submit"]:focus-visible,
html body.krp-site .krp-main .krp-content .krp-form button[type="submit"]:active,
html body.krp-site .krp-main .krp-content .krp-contact-original form button[type="submit"]:hover,
html body.krp-site .krp-main .krp-content .krp-contact-original form button[type="submit"]:focus-visible,
html body.krp-site .krp-main .krp-content .krp-contact-original form button[type="submit"]:active,
html body.krp-site .krp-main .krp-content .krp-jobs-form__submit.krp-jobs-form__submit:hover,
html body.krp-site .krp-main .krp-content .krp-jobs-form__submit.krp-jobs-form__submit:focus-visible,
html body.krp-site .krp-main .krp-content .krp-jobs-form__submit.krp-jobs-form__submit:active {
  color: var(--krp-action-fill-text) !important;
}

html body.krp-site .krp-main .krp-content .krp-consultation .krp-button--light.krp-button--light {
  color: #FFFFFF !important;
}

html body.krp-site .krp-main .krp-content .krp-consultation .krp-button--light.krp-button--light:hover,
html body.krp-site .krp-main .krp-content .krp-consultation .krp-button--light.krp-button--light:focus-visible,
html body.krp-site .krp-main .krp-content .krp-consultation .krp-button--light.krp-button--light:active {
  color: #0070B7 !important;
}

/* Restore the original CSS circle-fill micro-interaction. */
html body.krp-site .krp-main .krp-content .krp-button.krp-button,
html body.krp-site .krp-main .krp-content .krp-form button[type="submit"],
html body.krp-site .krp-main .krp-content .krp-contact-original form button[type="submit"],
html body.krp-site .krp-main .krp-content .krp-jobs-form__submit.krp-jobs-form__submit {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: transparent !important;
  background-image: radial-gradient(circle at center, var(--krp-action-color) 0 50%, transparent 51%) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 0 0 !important;
  transition:
    color 300ms ease,
    border-color 300ms ease,
    background-size 680ms cubic-bezier(.16, 1, .3, 1),
    transform 180ms ease,
    box-shadow 300ms ease !important;
}

html body.krp-site .krp-main .krp-content .krp-button.krp-button:hover,
html body.krp-site .krp-main .krp-content .krp-button.krp-button:focus-visible,
html body.krp-site .krp-main .krp-content .krp-button.krp-button:active,
html body.krp-site .krp-main .krp-content .krp-form button[type="submit"]:hover,
html body.krp-site .krp-main .krp-content .krp-form button[type="submit"]:focus-visible,
html body.krp-site .krp-main .krp-content .krp-form button[type="submit"]:active,
html body.krp-site .krp-main .krp-content .krp-contact-original form button[type="submit"]:hover,
html body.krp-site .krp-main .krp-content .krp-contact-original form button[type="submit"]:focus-visible,
html body.krp-site .krp-main .krp-content .krp-contact-original form button[type="submit"]:active,
html body.krp-site .krp-main .krp-content .krp-jobs-form__submit.krp-jobs-form__submit:hover,
html body.krp-site .krp-main .krp-content .krp-jobs-form__submit.krp-jobs-form__submit:focus-visible,
html body.krp-site .krp-main .krp-content .krp-jobs-form__submit.krp-jobs-form__submit:active {
  background-color: transparent !important;
  background-image: radial-gradient(circle at center, var(--krp-action-color) 0 50%, transparent 51%) !important;
  background-size: 250% 500% !important;
}

@media (max-width: 61.1875rem) {
  html body.krp-site .krp-bottom-nav__locations a {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background-color: transparent !important;
    background-image: radial-gradient(circle at center, var(--krp-action-color) 0 50%, transparent 51%) !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 0 0 !important;
    transition:
      color 300ms ease,
      border-color 300ms ease,
      background-size 680ms cubic-bezier(.16, 1, .3, 1),
      transform 180ms ease !important;
  }

  html body.krp-site .krp-bottom-nav__locations a:hover,
  html body.krp-site .krp-bottom-nav__locations a:focus-visible,
  html body.krp-site .krp-bottom-nav__locations a:active {
    background-color: transparent !important;
    background-image: radial-gradient(circle at center, var(--krp-action-color) 0 50%, transparent 51%) !important;
    background-size: 250% 500% !important;
  }
}