/* 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: 400;
    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;
}

p + .wp-block-buttons {
    margin-top: 1rem;
}

/* --- 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;
    border: var(--color--primary-1) 1px solid; */
    background-color: var(--color--primary-1);
    padding: 1rem 1.5rem;
    font-family: var(--font-family--primary);
    font-size: var(--font-size--x-small);
    letter-spacing: 0.015em;
    text-decoration: none;
}

a:hover.wp-block-button__link.wp-element-button {
    /* background-color: var(--color--secondary-3); */
    /* border: var(--color--secondary-3) 1px solid; */
    background-color: var(--color--primary-2);
    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--secondary-3);
    border: var(--color--secondary-3) 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-link .wp-block-button__link.wp-element-button{
    border: none;
}

.wp-block-button.is-style-button-link:hover .wp-block-button__link.wp-element-button {
    background-color: var(--color--secondary-1) !important;
    transition: all 0.3s linear;
    border: none;
}

.wp-block-button.is-style-button-link,
.wp-block-button.is-style-button-link {
    width: 100%;
    margin-bottom: clamp(1rem, 1vw + 0.75rem, 1.5rem);
}

.wp-block-button.is-style-button-link > div,
.wp-block-button.is-style-button-link a {
    width: 100%;
    padding-left: clamp(1rem, 2vw + 1rem, 2.5rem);
    padding-right: clamp(1rem, 1.5vw + 1rem, 2.5rem);
    padding-top: clamp(1rem, 2vw + 1rem, 2.5rem);
    padding-bottom: clamp(1rem, 2vw + 1rem, 2.5rem);
    /* margin: clamp(1rem, 1vw + 0.75rem, 1.5rem);
    margin-right: clamp(1rem, 0.75rem + 1vw, 1.5rem);
    margin-left: clamp(1rem, 0.75rem + 1vw, 1.5rem); */
    margin: 0;
    border-radius: 5px;
    text-align: left;
    font-family: var(--font-family--primary);
    font-size: var(--font-size--large);
    font-weight: var(--font-weight--copy);
    box-shadow: var(--shadow--primary);
    background-color: var(--color--primary-3);
    color: var(--color--primary-2);

    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.wp-block-button.is-style-button-link > div::after,
.wp-block-button.is-style-button-link a::after {
    content: "";
    display: block;
    width: clamp(2.15rem, 5.5vw, 3rem);
    aspect-ratio: 1;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-image: url('data:image/svg+xml,<svg viewBox="0 0 54 54" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M41.0449 12.9548L12.7607 41.2391" stroke="%235692CE" stroke-width="4"/><path d="M41.7521 36.7435L41.7523 12.2479L17.2565 12.2479" stroke="%235692CE" stroke-width="4"/></svg>');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    right: clamp(1rem, 1.5vw + 1rem, 2.5rem);
}

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