/* Button Styling */

/* Button Primary */
.btn.btn-primary,
.em.pixelbones a.btn.btn-primary {
    background: var(--grundfarbe_jugendstellen) !important;
    padding: 12px 20px !important;
    color: var(--e-global-color-text) !important;    
    border: none !important;
    text-decoration: none;
}

.btn.btn-primary:hover,
.em.pixelbones a.btn.btn-primary:hover {
    background: var(--grundfarbe_hover_jugendstellen) !important;
}

.btn.btn-primary.icon,
.em.pixelbones a.btn.btn-primary.icon {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.btn.btn-primary.icon::after,
.em.pixelbones a.btn.btn-primary.icon::after {
    content: '';
    margin-left: 8px;
    background-image: url('../assets/icons/arrow_forward.svg');
    background-size: contain;
    background-repeat: no-repeat;
    width: 24px;
    height: 24px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.btn.bja-alle-link.icon {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background: var(--grundfarbe_veranstaltungen);
    color: var(--e-global-color-3e57056);
    padding: 12px 20px;    
    font-weight: 500;
}

.btn.bja-alle-link.icon:hover {
    background: var(--grundfarbe_hover_veranstaltungen);
}

.btn.bja-alle-link.icon::after {
    content: '';
    margin-left: 8px;
    background-image: url('../assets/icons/arrow_forward_white.svg');
    background-size: contain;
    background-repeat: no-repeat;
    width: 24px;
    height: 24px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.btn.bja-alle-news-btn.icon {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background: var(--grundfarbe_bja);
    color: var(--e-global-color-text);
    padding: 12px 20px;    
    font-weight: 500;
}

.btn.bja-alle-news-btn.icon:hover {
    background: var(--grundfarbe_hover_bja);
}

.btn.bja-alle-news-btn.icon::after {
    content: '';
    margin-left: 8px;
    background-image: url('../assets/icons/arrow_forward.svg');
    background-size: contain;
    background-repeat: no-repeat;
    width: 24px;
    height: 24px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.bja-acf-btn {
    display: flex;
    flex-direction: row;
    width: fit-content;
    max-width: 100%;
}