.subpage-sidebar .sidebar-heading {
    width: fit-content;
    display: block;
    background-color: var(--accent);
    color: var(--on-accent);
    padding: .2rem .8rem;
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-heading);
    font-style: italic;
    text-decoration: none;
    font-size: calc(var(--body-text-size) * 1.4);
    margin-bottom: .5rem;
}

.subpage-sidebar .post-menu li{
    display: flex;
    flex-direction: column;
}

/* Datum über dem Post-Titel */
.subpage-post-date {
    display: block;
    font-size: 0.9rem;
    color: var(--on-accent);
    font-weight: 400;
}

/* Sidebar Datum */
.post-menu li .post-date {
    display: block;
    font-size: 0.8rem;
    color: var(--foreground-70);
    margin-top: 0.2rem;
}
/* 
.post-menu li:hover .post-date {
    color: var(--accent);
} */


.post-sidebar .group-title {
    width: 100%; 
    text-align: center;
}
.post-sidebar > div:has(.group-title) { 
    width: 100%;
    padding: 1rem
}
.post-sidebar .all-posts-link {
    text-align: center;
}


/* ----------------------------------------------------------------------- */
/* SUB PAGE MENU - MOBILE ANIMATION */
/* ----------------------------------------------------------------------- */

@media screen and (max-width: 768px) {
    .post-sidebar {
        grid-column-gap: 3em;
        grid-row-gap: .5em;
        pointer-events: auto;
        flex-flow: column;
        justify-content: flex-start;
        align-items: center;
        width: 100%;
        max-height: calc(100vh - var(--headerHeight) - var(--subHeaderHeight) - 2rem);
        display: flex;
        position: relative;
        overflow: auto;
    }
    .post-sidebar .post-menu {
        width: 100%;
        padding: 1rem 1rem 5rem 1rem;  
    }
    .all-posts-link {
        margin-top: 1.5rem;
    }
    .post-sidebar .post-menu li { 
        text-align: center;
        padding: 0.75rem 1rem;
    }
    .post-sidebar .post-menu li, .subpage-sidebar .menu-item {
        transition: all 0.6s cubic-bezier(0.625, 0.05, 0, 1);
        opacity: 0;
        transform: translate(0px, 2em);
    }
    [data-navigation-status="active"] .post-sidebar .post-menu li, [data-navigation-status="active"] .menu-item {
        opacity: 1;
        transform: translate(0px, 0em);
    }
}