.c3-mobile-back,
.c3-category__mobile-title,
.c3-category__current-year {
    display: none;
}

.c3-sidebar {
    width: 100vw;
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 98;
    font-family: var(--c3-typography-primary-font-family), serif;
    font-weight: var(--c3-typography-primary-font-weight);
    opacity: 1;
    filter: blur(0);
    pointer-events: none;
    transition: opacity var(--c3-animation-duration) var(--c3-animation-timing), filter var(--c3-animation-duration) var(--c3-animation-timing);
    -webkit-transition: opacity var(--c3-animation-duration) var(--c3-animation-timing), filter var(--c3-animation-duration) var(--c3-animation-timing);
}

.c3--focus-post .c3-sidebar {
    opacity: 0;
    filter: blur(0.5rem);
}

.c3-categories {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

.c3-category {
    display: block;
    width: 25vw;
    height: 100%;
    position: absolute;
    top: 0;
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    pointer-events: auto;
    transition: width var(--c3-animation-duration) var(--c3-animation-timing), transform var(--c3-animation-duration) var(--c3-animation-timing);
    -webkit-transition: width var(--c3-animation-duration) var(--c3-animation-timing), transform var(--c3-animation-duration) var(--c3-animation-timing);
}

.c3--focus-page .c3-category:nth-child(1) {
    transform: translate(-100%, 0);
    -webkit-transform: translate(-100%, 0);
}

.c3--focus-page .c3-category:nth-child(2) {
    transform: translate(100%, 0);
    -webkit-transform: translate(100%, 0);
}

.c3-category:nth-child(1) {
    left: 0;
}

.c3-category--expand-submenu:nth-child(1) {
    transform: translate(100%, 0);
    -webkit-transform: translate(100%, 0);
}

.c3-category--expand-posts:nth-child(1) {
    transform: translate(50vw, 0);
    -webkit-transform: translate(50vw, 0);
}

.c3-category:nth-child(2) {
    right: 0;
}

.c3-category--expand-submenu:nth-child(2) {
    transform: translate(-100%, 0);
    -webkit-transform: translate(-100%, 0);
}

.c3-category--expand-posts:nth-child(2) {
    transform: translate(-50vw, 0);
    -webkit-transform: translate(-50vw, 0);
}

.c3-category__header,
.c3-category__menu,
.c3-category__posts {
    height: 100%;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
}

.c3-category__menu,
.c3-category__posts {
    overflow: hidden;
}

.c3-category__header {
    display: block;
    width: 100%;
    height: 10rem;
}

.c3-category:nth-child(1) .c3-category__header {
    left: 0;
}

.c3-category:nth-child(1) .c3-category__menu {
    right: 100%;
}

.c3-category:nth-child(1) .c3-category__posts {
    right: 200%;
}

.c3-category:nth-child(2) .c3-category__header {
    right: 0;
}

.c3-category:nth-child(2) .c3-category__menu {
    left: 100%;
}

.c3-category:nth-child(2) .c3-category__posts {
    left: 200%;
}

.c3-category__title {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
    padding: 2rem 4rem;
    font-size: 4.8vw;
    white-space: nowrap;
    transition: width var(--c3-animation-duration) var(--c3-animation-timing);
    -webkit-transition: width var(--c3-animation-duration) var(--c3-animation-timing);
}

.c3-category:nth-child(1) .c3-category__title {
    left: 0;
    transform-origin: 0 50%;
    -webkit-transform-origin: 0 50%;
}

.c3-category:nth-child(2) .c3-category__title {
    right: 0;
    transform-origin: 100% 50%;
    -webkit-transform-origin: 100% 50%;
}

.c3-category__link {
    display: block;
    position: relative;
}

.c3-category__link:before {
    display: none;
}

.c3-category__title-capitalize {
    height: 100%;
    position: absolute;
}

.c3-category:nth-child(1) .c3-category__title-capitalize {
    left: 0;
}

.c3-category:nth-child(2) .c3-category__title-capitalize {
    right: 0;
    transition: right var(--c3-animation-duration) var(--c3-animation-timing);
    -webkit-transition: right var(--c3-animation-duration) var(--c3-animation-timing);
}

.c3-category:nth-child(2):hover .c3-category__title-capitalize,
.c3-category--expand-submenu:nth-child(2) .c3-category__title-capitalize {
    right: 100%;
}

.c3-category__title-hideout {
    display: inline;
    letter-spacing: 0.5rem;
    opacity: 0;
    transition: letter-spacing var(--c3-animation-duration) var(--c3-animation-timing), opacity var(--c3-animation-duration) var(--c3-animation-timing);
    -webkit-transition: letter-spacing var(--c3-animation-duration) var(--c3-animation-timing), opacity var(--c3-animation-duration) var(--c3-animation-timing);
}

.c3-category:nth-child(1) .c3-category__title-hideout {
    margin-left: 4vw;
}

.c3-category:hover .c3-category__title-hideout,
.c3-category--expand-submenu .c3-category__title-hideout {
    letter-spacing: 0;
    opacity: 1;
}

.c3-category__menu {
    width: 25vw;
    font-family: var(--c3-typography-text-font-family);
    font-weight: var(--c3-typography-text-font-weight);
    font-size: 1rem;
    line-height: 4;
    text-align: center;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: line-height var(--c3-animation-duration) var(--c3-animation-duration) var(--c3-animation-timing), opacity var(--c3-animation-duration) var(--c3-animation-duration) var(--c3-animation-timing);
    -webkit-transition: line-height var(--c3-animation-duration) var(--c3-animation-duration) var(--c3-animation-timing), opacity var(--c3-animation-duration) var(--c3-animation-duration) var(--c3-animation-timing);
}

.c3-category--expand-submenu .c3-category__menu {
    line-height: 3;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.c3-category__menu-items {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}

.c3-category__menu-item {
    position: relative;
}

.c3-category__menu-item:before {
    content: '';
    display: block;
    width: 0;
    height: 1px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%) translateZ(0) scale(1);
    -webkit-transform: translateY(-50%) translateZ(0) scale(1);
    background-color: var(--c3-color-text);
    pointer-events: none;
    transition: width var(--c3-animation-duration) var(--c3-animation-timing);
    -webkit-transition: width var(--c3-animation-duration) var(--c3-animation-timing);
}

.c3-category:nth-child(1) .c3-category__menu-item:before {
    right: calc(100% + 2rem);
}

.c3-category:nth-child(2) .c3-category__menu-item:before {
    left: calc(100% + 2rem);
}

.c3-category__menu-item--active:before {
    width: 20rem;
}

.c3-category__posts {
    width: 25vw;
    visibility: visible;
    opacity: 1;
    transition: visibility var(--c3-animation-duration) 0ms, opacity var(--c3-animation-duration) 0ms;
    -webkit-transition: visibility var(--c3-animation-duration) 0ms, opacity var(--c3-animation-duration) 0ms;
}

.c3-category__posts--loading {
    visibility: hidden;
    opacity: 0;
    transition: visibility var(--c3-animation-duration) var(--c3-animation-duration), opacity var(--c3-animation-duration) 0ms;
    -webkit-transition: visibility var(--c3-animation-duration) var(--c3-animation-duration), opacity var(--c3-animation-duration) 0ms;
}

.c3-category__post-items {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 10rem 6rem 10rem 6rem;
    overflow-x: hidden;
    overflow-y: scroll;
    scrollbar-width: none;
}

.c3-category__post-items::-webkit-scrollbar {
    display: none;
}

@media (min-width: 768px) {
    [data-category="malereien"] .c3-category__post-items {
        padding-right: 2rem;
    }

    [data-category="zeichnungen"] .c3-category__post-items {
        padding-left: 2rem;
    }
}

.c3-category__post-item {
    position: relative;
    transform: translate(0, 25%);
    -webkit-transform: translate(0, 25%);
    visibility: hidden;
    opacity: 0;
    transition: transform var(--c3-animation-duration) var(--c3-animation-timing), visibility var(--c3-animation-duration) var(--c3-animation-timing), opacity var(--c3-animation-duration) var(--c3-animation-timing);
    -webkit-transition: transform var(--c3-animation-duration) var(--c3-animation-timing), visibility var(--c3-animation-duration) var(--c3-animation-timing), opacity var(--c3-animation-duration) var(--c3-animation-timing);
}

.c3-category__post-item:not(:last-child) {
    margin-bottom: 2rem;
}

.c3-category__post-item.c3-category__post-item--ready {
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    visibility: visible;
    opacity: 1;
}

.c3-category__post-thumbnail {
    width: 100%;
}

.c3-category__post-image {
    display: block;
    width: 100%;
    max-width: none;
    min-height: 100px;
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    box-shadow: var(--c3-image-shadow);
    animation: c3-skeleton 1200ms linear infinite;
    -webkit-animation: c3-skeleton 1200ms linear infinite;
    transition: transform 300ms, box-shadow 300ms;
    -webkit-transition: transform 300ms, box-shadow 300ms;
}

.c3-category__post-item:hover .c3-category__post-image {
    transform: translate(0, -0.2rem);
    -webkit-transform: translate(0, -0.2rem);
}

.c3-category__post-thumbnail .c3-category__post-link {
    display: block;
}

.c3-category__post-entry {
    margin-top: 1rem;
    padding: 0 0.5rem;
    font-family: var(--c3-typography-text-font-family), sans-serif;
    font-weight: var(--c3-typography-text-font-weight);
    font-size: 0.86rem;
    line-height: 1.6;
}

.c3-category__post-title {
    margin: 0;
    font-size: 1.2rem;
    font-weight: inherit;
    line-height: 1;
    opacity: 0.6;
    transition: opacity 300ms;
    -webkit-transition: opacity 300ms;
}

.c3-category__post-content {
    opacity: 0.4;
}

.c3-category__post-content > * {
    margin: 0 0 1rem 0;
}

.c3-category__post-content > *:last-child {
    margin: 0;
}

.c3-category__post-title,
.c3-category__post-content {
    transition: opacity 300ms;
    -webkit-transition: opacity 300ms;
}

.c3-category__post-item:hover .c3-category__post-title,
.c3-category__post-item:hover .c3-category__post-content {
    opacity: 1;
}

/**
 * Reset
 */
.c3-category__link:before,
.c3-category__menu-item-link:before,
.c3-category__post-link:before {
    display: none;
}

@media (max-width: 767px) {
    .c3-category {
        width: 100vw;
        left: 0;
        right: auto;
        pointer-events: none;
        --c3-panel-offset: -100%;
    }

    .c3-category:nth-child(2) {
        --c3-panel-offset: 100%;
    }

    .c3-category__link {
        pointer-events: auto;
    }

    .c3-category__title {
        padding: 1rem 1.25rem;
        font-size: clamp(2.5rem, 12vw, 4rem);
    }

    .c3-category:nth-child(1) .c3-category__title-hideout {
        margin-left: 12vw;
    }

    .c3-category:not(.c3-category--expand-submenu) .c3-category__title-hideout {
        display: none;
    }

    .c3-category:not(.c3-category--expand-submenu) .c3-category__link {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 3rem;
        height: 5rem;
    }

    .c3-category:not(.c3-category--expand-submenu) .c3-category__title-capitalize {
        height: auto;
        position: static;
    }

    .c3--focus-sidebar .c3-category:not(.c3-category--expand-submenu) {
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
    }

    .c3-category--expand-submenu,
    .c3-category--expand-posts {
        width: 100vw;
        left: 0 !important;
        right: auto !important;
        transform: none !important;
        -webkit-transform: none !important;
    }

    .c3-category--expand-submenu .c3-category__header {
        width: 100%;
        height: 2rem;
        top: 4.8rem;
        left: 0 !important;
        right: auto !important;
        z-index: 2;
        transform: none;
        -webkit-transform: none;
    }

    .c3-category--expand-submenu .c3-category__title {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0 !important;
        right: auto !important;
        transform: none;
        -webkit-transform: none;
        padding: 0.75rem 1rem;
        font-size: 1.4rem;
        text-align: center;
    }

    .c3-category--expand-submenu .c3-category__link {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .c3-category--expand-submenu .c3-category__title-capitalize {
        height: auto;
        position: static;
        margin: 0 0.15rem 0 0;
    }

    .c3-category--expand-submenu:nth-child(1) .c3-category__title-hideout,
    .c3-category--expand-submenu:nth-child(2) .c3-category__title-hideout {
        display: inline;
        margin-left: 0;
        letter-spacing: 0;
        opacity: 1;
    }

    .c3-category .c3-category__menu,
    .c3-category .c3-category__posts {
        width: 100%;
        height: auto;
        top: 9rem;
        bottom: 6rem;
        left: 0 !important;
        right: auto !important;
        transform: translateX(var(--c3-panel-offset));
        -webkit-transform: translateX(var(--c3-panel-offset));
        visibility: hidden;
        pointer-events: none;
        opacity: 1;
        transition: transform var(--c3-animation-duration) var(--c3-animation-timing), visibility 0s var(--c3-animation-duration);
    }

    .c3-category .c3-category__menu {
        line-height: 2.6;
    }

    .c3-category--expand-submenu:not(.c3-category--expand-posts) .c3-category__menu,
    .c3-category--expand-posts .c3-category__posts {
        transform: translateX(0);
        -webkit-transform: translateX(0);
        visibility: visible;
        pointer-events: auto;
        transition-delay: 0s;
    }

    .c3-category__current-year {
        display: block;
        position: absolute;
        top: 7rem;
        width: 100%;
        text-align: center;
        font-family: var(--c3-typography-text-font-family), sans-serif;
        font-size: 1rem;
        line-height: 1.4;
        opacity: 0;
        transition: opacity var(--c3-animation-duration);
    }

    .c3-category--expand-posts .c3-category__current-year {
        opacity: 1;
    }

    .c3-mobile-back {
        display: block;
        position: fixed;
        right: 1rem;
        bottom: calc(6.5rem + env(safe-area-inset-bottom));
        width: 3rem;
        height: 3rem;
        padding: 0.65rem;
        border-radius: 2rem;
        background: var(--c3-color-background);
        font-family: var(--c3-typography-text-font-family), sans-serif;
        font-size: 1rem;
        z-index: 3;
        visibility: hidden;
        pointer-events: none;
    }

    .c3--focus-sidebar:not(.c3--focus-post):not(.c3--focus-page) .c3-mobile-back {
        visibility: visible;
        pointer-events: auto;
    }

    .c3-mobile-back:before {
        display: none;
    }

    .c3-category__menu-items {
        align-items: center;
        width: 100%;
    }

    .c3-category__menu-item--active:before {
        display: none;
    }

    .c3-category__post-items {
        width: 100%;
        padding: 1rem 0.75rem 5rem;
    }

    .c3-category__post-item {
        padding: 0.75rem;
        transform: none;
        -webkit-transform: none;
        visibility: visible;
        opacity: 1;
    }

    .c3-category__post-image {
        min-height: 0;
    }

    .c3-category__post-entry {
        padding: 0;
        font-size: 0.82rem;
    }

    .c3-category__post-title {
        font-size: 1rem;
        opacity: 0.8;
    }

    .c3-category__post-content {
        opacity: 0.65;
    }

    /* Keep the heading in a stable position so both transition directions
       interpolate instead of jumping between the start and menu layouts. */
    .c3-category__mobile-title {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 4.8rem;
        left: 0;
        width: 100%;
        height: 2rem;
        font-size: 1.4rem;
        transform: scale(1.5);
        opacity: 0;
        filter: blur(0.5rem);
        visibility: hidden;
        pointer-events: none;
        transition: transform var(--c3-animation-duration) var(--c3-animation-timing),
            opacity var(--c3-animation-duration) var(--c3-animation-timing),
            filter var(--c3-animation-duration) var(--c3-animation-timing),
            visibility 0s var(--c3-animation-duration);
    }

    .c3-category--expand-submenu .c3-category__mobile-title {
        transform: scale(1);
        opacity: 1;
        filter: blur(0);
        visibility: visible;
        transition-delay: 0s;
    }

    .c3-category--expand-submenu .c3-category__title {
        visibility: hidden;
    }
}