/* Header Button */
.header-button-wrapper--is-mobile-menu-button,
.header-main-row > .header-button-wrapper {
    position: absolute;
    right: 0;
    height: 100%; 
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--accent);
    color: var(--on-accent);
    padding-left: 3rem; /* Platz für die schräge Kante */
    clip-path: polygon(3rem 0%, 100% 0%, 100% 100%, 0% 100%);
    z-index: 150; 
}


@media (max-width: 767px) {
    .header-main-row > .header-button-wrapper:not(.header-button-wrapper--is-mobile-menu-button) {
        display: none !important;
    }
}


.header-button-wrapper--is-mobile-menu-button { 
    padding: 1rem 1rem 1rem 4rem;
    z-index: 160; 
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (min-width: 768px) {
    .header-button-wrapper--is-mobile-menu-button {
        display: none;
    }
}


.header-button-wrapper.header-button {
    font-size: 1.2rem;
    text-transform: uppercase;
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-heading);
    text-decoration: none;
    display: flex; 
    align-items: center;
    justify-content: center;
    padding-left: 4rem;
    padding-right: 2rem;
    transition: ease all 400ms;
}
.header-button-wrapper.header-button:focus-visible,
.header-button-wrapper.header-button:focus {
    text-decoration: underline !important;
    outline: -webkit-focus-ring-color auto 1px;
}
.header-button-wrapper.header-button:focus,
.header-button-wrapper.header-button:hover {
    background-color: oklch(from var(--accent) calc(l * .9) c h);
    color: var(--on-accent);
    text-decoration: none;
}


/* Social Icons */

.header-button-wrapper.header-button--social-icons {
    display: flex; 
    gap: 1rem;
    flex-direction: row;
}

/* Button in Mobile Menu*/

@media (max-width: 767px) {
    .header-button-wrapper.header-button--social-icons {
        justify-content: flex-start;
        padding: 0;
    }
    .header-button-wrapper.header-button--social-icons:hover  {
        background: transparent
    }
    .header-button-wrapper.header-button--social-icons {
        color: var(--foreground-0);
    }
    .nav-center__list_header-button .header-button-wrapper.header-button:not(.header-button--social-icons) {
        background: var(--accent);
        color: var(--on-accent);
        padding: 0 1.5rem;
        width: fit-content;
        transform: skew(-4deg);        
    }

   
}