/* Horizontal-Abstände zwischen den einzelnen Buttons */
.wp-block-buttons {
    column-gap: clamp(1rem, 3vw, 30px);
    row-gap: 0;
}

/* sämtliche Buttons standarmässig zentrieren */
.wp-block-buttons>.wp-block-button {
    margin: auto;
}

.center.wp-block-button {
    margin: auto !important;
}

.wp-block-button .wp-block-button__link {
    font-family: var(--font-family--primary);
    font-weight: 800;
    font-size: var(--font-size--x-small);
    margin-top: clamp(2px, 15vw, 15px);
    border-radius: var(--border-radius--small);
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    padding-left: 1rem;
    padding-right: 1rem;
    color: white;
}

/* --- Standard, gefüllt ---------------------------------------------------------------------- */
.wp-block-button__link.wp-element-button {
    border-radius: 0.5rem;
    background-color: var(--color--primary-1);
    transition: all 0.3s linear;
}

a:hover.wp-block-button__link.wp-element-button {
    background-color: var(--color--secondary-1);
    transition: all 0.3s linear;
}



/* --- Ghost ---------------------------------------------------------------------- */
.is-style-button-ghost .wp-block-button__link.wp-element-button {
    background-color: white;
    border: var(--color--primary-1) 1px solid;
    color: var(--color--primary-1)
}
.is-style-button-ghost:hover .wp-block-button__link.wp-element-button {
    background-color: var(--color--primary-1);
    border: var(--color--primary-1) 1px solid;
    color: white;
}


/* --- Ghost-Underline ---------------------------------------------------------------------- */
.is-style-button-underline .wp-block-button__link.wp-element-button {
    background-color: unset;
    border: none;
    border-radius: 0;
    border-bottom: var(--color--primary-1) 2px solid;
    color: var(--color--primary-1);
    padding: 0;
    padding-bottom: 2px;
    position: relative;
}

.is-style-button-underline:hover .wp-block-button__link.wp-element-button {
    background-color: var(--color--primary-1);
    color: white;
}


/* Schriftgrössen bei Kleinstgeräten anpassen */
@media (max-width: 400px) {
    .wp-block-button .wp-block-button__link {
        font-size: var(--font-size--xx-small);
    }

}