/* 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-file a:first-child {
    font-size: var(--font-size--medium);
}

.wp-block-file__button.wp-element-button,
.wp-block-button .wp-block-button__link {
    font-family: var(--font-family--primary);
    font-weight: 700;
    font-size: var(--font-size--x-small);
    margin-top: clamp(2px, 15vw, 15px);
    padding: 0.9rem 1.5rem;
    /* padding-bottom: 0.9rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem; */
    color: white;
    display: inline-block;
    border-radius: var(--border-radius--small);
}

.wp-block-file__button.wp-element-button {
    margin: 0;
}

/* --- Standard, gefüllt ---------------------------------------------------------------------- */

.wp-block-file__button.wp-element-button,
.wp-block-button__link.wp-element-button {
    border-radius: var(--border-radius--medium);
    background-color: var(--color--primary-1);
    transition: all 0.3s linear;
    border: var(--color--primary-1) 1px solid;
}

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

/* --- Ghost ---------------------------------------------------------------------- */
.wp-block-file__button.wp-element-button,
.is-style-outline .wp-block-button__link.wp-element-button {
    background-color: transparent;
    border: var(--color--primary-2) 1px solid;
    color: var(--color--primary-2);
    display: inline-flex;
    align-items: center;
    width: fit-content;
    transition: all 0.3s ease-in-out;
    position: relative;
    min-width: max-content;
}

.wp-block-button__link.wp-element-button[href="javascript:history.back()"]:after {
    content: none !important;
}

.wp-block-button__link.wp-element-button[href="javascript:history.back()"]:before {
    content: "";
    background: url('data:image/svg+xml,<svg viewBox="0 0 16 13" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 6.5H15M15 6.5L9.77778 1M15 6.5L9.77778 12" stroke="%235692CE" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-position-x: 0%;
    background-position-y: 0%;
    background-repeat: repeat;
    background-size: auto;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    height: 16px;
    width: 0;
    display: inline-block;
    margin-left: 0;
    position: relative;
    top: -2px;
    opacity: 0;
    transform: scaleX(-1);
    transition: all 0.3s ease-in-out;
    margin-top: auto;
}

.wp-block-button__link.wp-element-button[href="javascript:history.back()"]:hover:before {
    background: url('data:image/svg+xml,<svg viewBox="0 0 16 13" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 6.5H15M15 6.5L9.77778 1M15 6.5L9.77778 12" stroke="white" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    width: 19px;
    margin-right: 8px;
    opacity: 1;
    margin-top: auto;
}

.wp-block-file__button.wp-element-button[download=""] {
    color: var(--color--primary-2);
}

.wp-block-file__button.wp-element-button[download=""]:before {
    content: "";
    /* SVG als mask verwenden statt background */
    mask: url('data:image/svg+xml,<svg width="16" height="18" viewBox="0 0 16 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.8629 11.8942C15.1716 10.4957 12.1609 10.3587 10.5992 10.394C9.67699 9.44391 8.59363 8.23635 7.78635 7.06057C8.65613 4.46549 8.86372 2.7322 8.4031 1.90533C7.82392 0.86572 7.02421 0.747927 6.4689 0.984043C5.49962 1.39638 4.84921 3.07935 5.553 5.38608C5.72979 5.96556 6.04308 6.58912 6.43761 7.22168C5.94142 8.61821 5.3104 10.0872 4.64614 11.4121C3.0621 11.9557 1.26346 12.8631 0.318705 14.3287C-0.0530511 14.9054 -0.102638 15.6208 0.18604 16.2426C0.658966 17.2611 1.69702 17.5357 2.93966 16.2833C3.38667 15.8328 3.87618 15.1882 4.39466 14.3676C4.76096 13.7878 5.13593 13.1272 5.50423 12.4186C6.94566 11.9767 8.58389 11.7118 10.1018 11.6349C10.9385 12.4763 11.575 13.046 11.6618 13.1233C12.3343 13.7356 13.4244 14.3611 14.3631 14.2507C14.9013 14.1874 15.358 13.9001 15.6837 13.4196C16.1533 12.7269 15.9976 12.1666 15.8629 11.8942ZM3.40102 13.6514C2.10541 15.72 1.48429 15.8834 1.40252 15.8957C1.3861 15.8808 1.34499 15.836 1.29471 15.7278C1.18527 15.4921 1.20495 15.2098 1.34605 14.991C1.80345 14.2815 2.62544 13.6361 3.73358 13.1018C3.62226 13.2919 3.51119 13.4755 3.40102 13.6514ZM6.94741 2.10885C6.95218 2.10681 6.95768 2.10579 6.96387 2.10579C7.03253 2.10579 7.18528 2.23104 7.33526 2.50024C7.47599 2.75286 7.51201 3.6781 6.95259 5.62839C6.85871 5.42271 6.78101 5.22257 6.72209 5.0294C6.18621 3.27293 6.66619 2.22847 6.94741 2.10885ZM6.22227 10.9578C6.60377 10.138 6.9653 9.28749 7.28755 8.44757C7.82938 9.16383 8.43036 9.86272 9.00914 10.4929C8.06606 10.5872 7.11724 10.7445 6.22227 10.9578ZM14.6719 12.7337C14.5091 12.9739 14.3457 13.0217 14.2216 13.0366C13.618 13.1091 12.7419 12.4529 12.4835 12.2182C12.4813 12.2162 12.4791 12.2142 12.4769 12.2123C12.4662 12.2028 12.2276 11.9898 11.8521 11.6333C11.8654 11.634 11.8787 11.6347 11.8919 11.6355C13.7637 11.7417 14.6369 12.1724 14.7672 12.4359C14.8043 12.5111 14.7359 12.6393 14.6719 12.7337Z" fill="black"/></svg>');
    -webkit-mask: url('data:image/svg+xml,<svg width="16" height="18" viewBox="0 0 16 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.8629 11.8942C15.1716 10.4957 12.1609 10.3587 10.5992 10.394C9.67699 9.44391 8.59363 8.23635 7.78635 7.06057C8.65613 4.46549 8.86372 2.7322 8.4031 1.90533C7.82392 0.86572 7.02421 0.747927 6.4689 0.984043C5.49962 1.39638 4.84921 3.07935 5.553 5.38608C5.72979 5.96556 6.04308 6.58912 6.43761 7.22168C5.94142 8.61821 5.3104 10.0872 4.64614 11.4121C3.0621 11.9557 1.26346 12.8631 0.318705 14.3287C-0.0530511 14.9054 -0.102638 15.6208 0.18604 16.2426C0.658966 17.2611 1.69702 17.5357 2.93966 16.2833C3.38667 15.8328 3.87618 15.1882 4.39466 14.3676C4.76096 13.7878 5.13593 13.1272 5.50423 12.4186C6.94566 11.9767 8.58389 11.7118 10.1018 11.6349C10.9385 12.4763 11.575 13.046 11.6618 13.1233C12.3343 13.7356 13.4244 14.3611 14.3631 14.2507C14.9013 14.1874 15.358 13.9001 15.6837 13.4196C16.1533 12.7269 15.9976 12.1666 15.8629 11.8942ZM3.40102 13.6514C2.10541 15.72 1.48429 15.8834 1.40252 15.8957C1.3861 15.8808 1.34499 15.836 1.29471 15.7278C1.18527 15.4921 1.20495 15.2098 1.34605 14.991C1.80345 14.2815 2.62544 13.6361 3.73358 13.1018C3.62226 13.2919 3.51119 13.4755 3.40102 13.6514ZM6.94741 2.10885C6.95218 2.10681 6.95768 2.10579 6.96387 2.10579C7.03253 2.10579 7.18528 2.23104 7.33526 2.50024C7.47599 2.75286 7.51201 3.6781 6.95259 5.62839C6.85871 5.42271 6.78101 5.22257 6.72209 5.0294C6.18621 3.27293 6.66619 2.22847 6.94741 2.10885ZM6.22227 10.9578C6.60377 10.138 6.9653 9.28749 7.28755 8.44757C7.82938 9.16383 8.43036 9.86272 9.00914 10.4929C8.06606 10.5872 7.11724 10.7445 6.22227 10.9578ZM14.6719 12.7337C14.5091 12.9739 14.3457 13.0217 14.2216 13.0366C13.618 13.1091 12.7419 12.4529 12.4835 12.2182C12.4813 12.2162 12.4791 12.2142 12.4769 12.2123C12.4662 12.2028 12.2276 11.9898 11.8521 11.6333C11.8654 11.634 11.8787 11.6347 11.8919 11.6355C13.7637 11.7417 14.6369 12.1724 14.7672 12.4359C14.8043 12.5111 14.7359 12.6393 14.6719 12.7337Z" fill="black"/></svg>');
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;

    /* Hintergrundfarbe die durch die Maske sichtbar wird */
    background-color: var(--color--primary-2);

    width: 20px;
    height: 20px;
    display: inline-block;
    margin-right: 0.5rem;

    /* Smooth transition für Farbwechsel */
    transition: background-color 0.3s ease-in-out;
}

/* Hover-Zustand: Nur die Hintergrundfarbe ändern */
.wp-block-file__button.wp-element-button[download=""]:hover:before {
    background-color: white;
}

/* Button Hover-Zustand */
.wp-block-file__button.wp-element-button[download=""]:hover {
    color: var(--color--primary-3);
    transition: color 0.3s ease-in-out;
}
.wp-block-file__button.wp-element-button[download=""]:hover {
    color: var(--color--primary-3);
}

.wp-block-file__button.wp-element-button::after,
.is-style-outline .wp-block-button__link.wp-element-button::after {
    content: "";
    background: url('data:image/svg+xml,<svg viewBox="0 0 16 13" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 6.5H15M15 6.5L9.77778 1M15 6.5L9.77778 12" stroke="%235692CE" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    height: 16px;
    width: 0;
    display: inline-block;
    margin-left: 0;
    position: relative;
    top: -2px;
    opacity: 0;
    transition: all 0.3s ease-in-out;
    margin-top: auto;
}

.wp-block-file__button.wp-element-button:hover,
.is-style-outline .wp-block-button__link.wp-element-button:hover {
    background-color: var(--color--primary-2);
    border: var(--color--primary-2) 1px solid;
    color: var(--color--primary-3);
    /* transform: scale(1.05); */
    transform-origin: left center;
}

.wp-block-file__button.wp-element-button:hover::after,
.is-style-outline .wp-block-button__link.wp-element-button:hover::after {
    background: url('data:image/svg+xml,<svg viewBox="0 0 16 13" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 6.5H15M15 6.5L9.77778 1M15 6.5L9.77778 12" stroke="white" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    width: 19px;
    margin-left: 8px;
    opacity: 1;
    margin-top: auto;
}

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

.wp-block-button__link.wp-element-button.report-limeco-retrospective-post-link {
    margin: 0;
}


/* Geschichten und Rückblick Button */

.report-limeco-post .wp-block-button__link.wp-element-button,
.report-limeco-retrospective .wp-block-button__link.wp-element-button,
.report-limeco-archive-year-post .wp-block-button__link.wp-element-button,
.report-limeco-retrospective-archive-year-post .wp-block-button__link.wp-element-button {
    background-color: var(--color--primary-2);
    border: var(--color--primary-2) 1px solid;
    color: var(--color--primary-3);
    /* transform: scale(1.05); */
    transform-origin: left center;
     transition: all 0.3s ease-in-out;
}

.report-limeco-post .wp-block-button__link.wp-element-button::after,
.report-limeco-retrospective .wp-block-button__link.wp-element-button::after,
.report-limeco-archive-year-post .wp-block-button__link.wp-element-button::after,
.report-limeco-retrospective-archive-year-post .wp-block-button__link.wp-element-button::after {
    background: url('data:image/svg+xml,<svg viewBox="0 0 16 13" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 6.5H15M15 6.5L9.77778 1M15 6.5L9.77778 12" stroke="white" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    width: 19px;
    margin-left: 6px;
    opacity: 1;
    margin-top: auto;
     transition: all 0.3s ease-in-out;
}

.report-limeco-post .wp-block-button__link.wp-element-button:hover,
.report-limeco-retrospective .wp-block-button__link.wp-element-button:hover,
.report-limeco-archive-year-post .wp-block-button__link.wp-element-button:hover,
.report-limeco-retrospective-archive-year-post .wp-block-button__link.wp-element-button:hover {
    background-color: transparent;
    border: var(--color--primary-2) 1px solid;
    color: var(--color--primary-2);
    display: inline-flex;
    align-items: center;
    width: fit-content;
    transition: all 0.3s ease-in-out;
    position: relative;
    min-width: max-content;
}

.report-limeco-post .wp-block-button__link.wp-element-button:hover::after,
.report-limeco-retrospective .wp-block-button__link.wp-element-button:hover::after,
.report-limeco-archive-year-post .wp-block-button__link.wp-element-button:hover::after,
.report-limeco-retrospective-archive-year-post .wp-block-button__link.wp-element-button:hover::after {
    background: url('data:image/svg+xml,<svg viewBox="0 0 199 159" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.60718 79.2857H191.607M191.607 79.2857L122.599 6.60718M191.607 79.2857L122.599 151.964" stroke="%23007D82" stroke-width="13.2143" stroke-linecap="round" stroke-linejoin="round"/></svg>');    margin-left: 8px;
    opacity: 1;
    margin-top: auto;
    margin-left: 10px;
    background-repeat: no-repeat;
    background-position: center;
    top: -2.1px;
    transition: all 0.3s ease-in-out;
}



/* Schriftgrössen bei Kleinstgeräten anpassen */
@media (max-width: 480px) {
    .wp-block-button .wp-block-button__link {
        font-size: var(--font-size--xx-small);
    }
    .wp-block-file__button.wp-element-button,
    .wp-block-button .wp-block-button__link {
        padding: 0.8rem 1.2rem;
    }
}

/* Touch-Feedback für mobile Geräte */
@media (hover: none) and (pointer: coarse) {
    /* Hover Effekte für Mobile Buttons deaktivieren */
    .wp-block-button__link.wp-element-button {
        transition: none;
    }

    /* Standard gefüllte Buttons - Hover deaktivieren */
    button:hover.wp-block-button__link.wp-element-button,
    a:hover.wp-block-button__link.wp-element-button {
        background-color: var(--color--primary-1) !important;
        border: var(--color--primary-1) 1px solid !important;
        color: white !important;
    }

    /* Ghost/Outline Buttons - Hover deaktivieren */
    .wp-block-file__button.wp-element-button:hover,
    .is-style-outline .wp-block-button__link.wp-element-button:hover {
        background-color: transparent !important;
        border: var(--color--primary-2) 1px solid !important;
        color: var(--color--primary-2) !important;
        transform: none !important;
    }

    /* After-Pseudo-Element (Pfeil) - Hover deaktivieren */
    .wp-block-file__button.wp-element-button:hover::after,
    .is-style-outline .wp-block-button__link.wp-element-button:hover::after {
        background: url('data:image/svg+xml,<svg viewBox="0 0 16 13" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 6.5H15M15 6.5L9.77778 1M15 6.5L9.77778 12" stroke="%235692CE" stroke-linecap="round" stroke-linejoin="round"/></svg>') !important;
        width: 0 !important;
        margin-left: 0 !important;
        opacity: 0 !important;
    }

    /* Download Button - Hover deaktivieren */
    .wp-block-file__button.wp-element-button[download=""]:hover {
        color: var(--color--primary-2) !important;
    }

    .wp-block-file__button.wp-element-button[download=""]:hover:before {
        background-color: var(--color--primary-2) !important;
    }

    /* Back Button - Hover deaktivieren */
    .wp-block-button__link.wp-element-button[href="javascript:history.back()"]:hover:before {
        background: url('data:image/svg+xml,<svg viewBox="0 0 16 13" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 6.5H15M15 6.5L9.77778 1M15 6.5L9.77778 12" stroke="%235692CE" stroke-linecap="round" stroke-linejoin="round"/></svg>') !important;
        width: 0 !important;
        margin-right: 0 !important;
        opacity: 0 !important;
    }

    /* Link-Style Button - Hover deaktivieren */
    .wp-block-button.is-style-button-link:hover .wp-block-button__link.wp-element-button {
        background-color: var(--color--primary-3) !important;
        color: var(--color--primary-2) !important;
    }

    /* Touch-Feedback statt Hover - kurze Aktiv-States */
    .wp-block-button__link.wp-element-button:active {
        transform: scale(0.98);
        transition: transform 0.1s ease-out;
    }

    /* Outline Buttons - Touch-Feedback */
    .is-style-outline .wp-block-button__link.wp-element-button:active {
        background-color: var(--color--primary-2);
        color: var(--color--primary-3);
        transition: all 0.1s ease-out;
    }

    /* Focus-Styles auch entfernen für bessere UX */
    .wp-block-button__link.wp-element-button:focus:not(:focus-visible) {
        background-color: transparent;
        border: var(--color--primary-2) 1px solid;
        color: var(--color--primary-2);
        outline: none;
    }
}