html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--col-black);
    color: var(--col-white);
}

main .section__appendix footer ul li a,
a {
    color: var(--col-white);
}

body.is-fixed {
    pointer-events: none;
}

.wrapper {
    transition: all var(--transition-duration) var(--transition-function);
}

.wrapper.is-fixed {
    filter: blur(15px);
    transform: scale(.9);
}

aside#preload {
    height: 100vh;
    height: 100dvh;
    width: 100vw;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    z-index: 1000;
    transition: var(--transition-duration) var(--transition-function) all;
}

aside#backdrop {
    height: 100vh;
    height: 100dvh;
    width: 100vw;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    z-index: 1000;
    transition: var(--transition-duration) var(--transition-function) all;
}

    @keyframes anim {
        0% {
            border-radius: var(--border-radius);
        }

        50% {
            border-radius: 20px;

        }

        100% {
            border-radius: var(--border-radius);
        }
    }

aside#preload.is-loaded {
    opacity: 0;
    pointer-events: none;
}

aside#backdrop {
    z-index: 1 !important;  
    opacity: 1;
    padding: 15vw;
    pointer-events: all;
}

aside#news {
    overflow-y: scroll;
    padding: var(--padding);
    max-width: 281px;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 243px;
    height: calc(100vh - 243px);
    background: var(--col-white--area);
    color: var(--col-black);
    opacity: var(--opacity);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

aside#news.open {
    top: 0;
    opacity: 1;
    pointer-events: all;
}

aside#news article + article {
    padding-top: var(--padding);
}

aside#news a {
    color: var(--col-black);
    text-decoration: underline;
}

main {
    position: relative;
    scroll-snap-type: y proximity;
    max-height: 100vh;
    overflow-y: scroll;
    opacity: 1;
    transition: opacity var(--transition-duration) var(--transition-function), transform var(--transition-duration) var(--transition-function);
    z-index: 10;
    background: var(--col-black);
    transform: translateY(0);
}

main.is-fading-out,
main.is-fading-in {
    pointer-events: none;
}

main.is-no-transition {
    transition: none !important;
}


main.is-fading-out {
    opacity: 0;
    transform: translateY(150px);
}

main.is-fading-in {
    opacity: 0;
    transform: translateY(-150px);
}

@media (prefers-reduced-motion: reduce) {
  main {
    transition: none !important;
    transform: none !important;
  }

  main.is-fading-out,
  main.is-fading-in,
  main.is-no-transition {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

    main section[class*="section__"] a {
        color: var(--col-white);
        text-decoration: underline;
        text-decoration-thickness: var(--thickness-smaller);
        text-underline-offset: var(--underline-offset-smaller);
        margin-bottom: 100vh;
        opacity: 1;
        transition: var(--transition-duration) var(--transition-function);
    }

    main section[class*="section__"].text__size--extra a  {
        text-decoration-thickness: var(--thickness-bigger);
        text-underline-offset: var(--underline-offset-bigger);
    }

    main section[class*="section__"] a:hover {
        opacity: .55;
    }

.is-reduced {
    opacity: 0;
    transition: var(--transition-duration) var(--transition-function) all;
}

.is-enhanced {
    opacity: 1;
    transition: var(--transition-duration) var(--transition-function) all;
}

.swiper {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
}

    @media (max-width: 768px) {
        .swiper {
            height: auto !important;
        }
    }

section {
    scroll-snap-align: start;
    scroll-snap-stop: normal;
}

.section__gallery.swiper:not(.swiper.swiper-h) .swiper-wrapper {
    gap: 20px;
}

.section__gallery.swiper:not(.swiper.swiper-h) .swiper-wrapper .swiper-slide {
    flex: 1;
}

.swiper-horizontal>.swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-horizontal {
    left: calc( var(--padding) ) ;
    width: calc(100% - 2 * var(--padding));
    bottom: 8px;
}

    .section__gallery .swiper-scrollbar,
    .section__gallery .swiper-scrollbar.swiper-scrollbar-horizontal {
        /* top: 20px; */
        bottom: 10px;
        left: calc( 2* var(--padding) ) ;
        width: calc(100% - 4 * var(--padding));
    }

    .section__video {
        position: relative;
    }

.section__video figcaption,
.section__gallery figcaption {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: var(--col-white);
    opacity: var(--opacity);
    color: var(--col-black);
    padding: var(--padding);
}

    .section__gallery.swiper-initialized figcaption {
        bottom: 24px;
    }

    #content .section__gallery figcaption,
    #focus .section__gallery figcaption {
        bottom: 20px;
    }

    #content .section__gallery.swiper-h figcaption,
    #focus .section__gallery.swiper-h figcaption {
        bottom: 25px;
        left: 20px;
    }

.swiper-scrollbar-drag {
    box-shadow: none;
    height: 3px;
    background: rgba(255, 255, 255, var(--opacity));
    border-radius: var(--border-radius)
}

.swiper.full__height .swiper-slide,
.swiper-h:not(.section__gallery) .swiper-slide {
    height: 100vh;
    height: 100dvh;
    display: flex;
}

.swiper.full__height picture,
.swiper.full__height img,
.swiper-h:not(.section__gallery) picture,
.swiper-h:not(.section__gallery) img {
    height: 100vh;
    height: 100dvh;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    object-position: center center;
}

.swiper.full__height .swiper-slide,
.swiper-h:not(.section__gallery) .swiper-slide {
    position: relative;
    max-height: 100vh;
    max-height: 100dvh;
    pointer-events: none;
    z-index: 3;
}

.swiper.full__height .swiper-slide.content,
.swiper-h:not(.section__gallery) .swiper-slide-content {
    height: 100%;
    width: 100vw;
    position: sticky;
    display: flex;
    z-index: 10;
    top: 0;
    left: 0;
}

.post__meta--bar {
    position: absolute;
    bottom: 0px;
    width: 100%;
    max-width: 100vw;
    z-index: 3;
    pointer-events: all;
}

.post__meta--bar ul {
    position: relative;
    z-index: 100000;
    color: var(--col-black);
    display: flex;
    width: 100%;
    padding: calc( 2 * var(--padding) ) var(--padding);
    justify-content: space-between;
    pointer-events: all;
    flex-direction: row;
    align-items: flex-end;
    gap: 20px;
}

    .post__caption,
    a[data-do="show-details"] {
        background: var(--col-white--area);
        /* opacity: var(--opacity);    */
        backdrop-filter: blur(6px);
        padding: calc( .75 * var(--padding)) var(--padding);
        border-radius: var(--border-radius);
        transition: all var(--transition-duration) var(--transition-function);
        color: var(--col-black);
        box-shadow: 0px 0px 2px rgba(0, 0, 0, var(--opacity));
    }

    .post__caption a {
        color: var(--col-black);
    }

    .post__caption.open,
    .post__caption:hover,
    a[data-do="show-details"]:hover {
        background: var(--col-white--area-hover);
        /* opacity: var(--opacity-active);   */
        box-shadow: 0px 0px 0px rgba(0, 0, 0, var(--opacity-active));
    }

    a[data-do="empty_focus"] svg {
        fill: var(--col-white);
        opacity: var(--opacity);   
        transition: all var(--transition-duration) var(--transition-function);
    }

    a[data-do="empty_focus"] svg path {
        stroke: var(--col-black);
        stroke-width: var(--stroke-width);
    }

    a[data-do="empty_focus"]:hover svg {
        fill: var(--col-white);
        opacity: var(--opacity-active);   
    }

.button--wrapper {
    display: flex;
    align-items: center;
}

header {
    position: fixed;
    z-index: 200;
    display: flex;
    justify-content: center;
    /* mix-blend-mode: difference; */
    color: var(--col-black);
    pointer-events: none;
    align-items: center;
    flex-direction: column;
    top: 20px;
    width: 100vw;
    transition: top var(--transition-duration) var(--transition-function);
}

    header.is-inactive {
        top: -60px;
    }

    .header--wrapper {
        background: var(--col-white--area);
        color: var(--col-black);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        border-bottom-right-radius: var(--border-radius);
        border-bottom-left-radius: var(--border-radius);
        transition: var(--transition-duration) all var(--transition-function);
        pointer-events: all;
    }

    .header--wrapper nav {
        padding: 0 calc( 1 * var(--padding)) var(--padding) calc( 1 * var(--padding));

    }

    .header--wrapper a {
        color: var(--col-black);
    }

    .header--wrapper:hover {
        background: var(--col-white--area-hover);
    }

    header ul {
        display: flex;
        justify-content: center;
        filter: blur(0px);

        flex-direction: column;
    }

    header ul li:last-of-type::after {
        content: '';
    }

    aside {
        position: fixed;
        top: 100%;
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        z-index: 100;
        transition: var(--transition-duration) all var(--transition-function);
        opacity: 0;
        pointer-events: none;
        overflow-y: scroll;
        filter: blur(0);
    }

    aside#focus,
    aside#preload,
    aside#backdrop {
        background: var(--col-black);
    }

    aside#focus {
        height: 100vh;
        height: 100dvh;
        overflow-y: hidden;
        z-index: 999;
    }

    aside.is-loaded {
        top: 0;
        opacity: 1;
        pointer-events: all;
    }

.swiper-h .swiper-button-next,
.swiper-h .swiper-button-prev {
    opacity: 0;
    transition: opacity var(--transition-duration) var(--transition-function);
    width: 50vw;
    height: calc(100vh - 50px);
    height: calc(100dvh - 50px);
    top: 0vh;
    position: absolute;
    z-index: 1;
}

.swiper-h .swiper-wrapper {
    pointer-events: none;
    z-index: 3;
}

.swiper-h .swiper-button-next {
    cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20height%3D%2224%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22M10.44%2C23.9c7.85.99%2C14.45-5.61%2C13.46-13.46C23.23%2C5.09%2C18.91.77%2C13.56.1%2C5.71-.89-.89%2C5.71.1%2C13.56c.67%2C5.35%2C4.99%2C9.67%2C10.34%2C10.34ZM3.99%2C10.98h11.76v-3.24l4.24%2C4.24-4.24%2C4.24v-3.25H3.99v-2.02.02Z%22%2F%3E%3C%2Fsvg%3E") 12 12, e-resize;
    right: 0;
}

.swiper-h .swiper-button-prev {
    cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20height%3D%2224%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22M10.44%2C23.9c7.85.99%2C14.45-5.61%2C13.46-13.46C23.23%2C5.09%2C18.91.77%2C13.56.1%2C5.71-.89-.89%2C5.71.1%2C13.56c.67%2C5.35%2C4.99%2C9.67%2C10.34%2C10.34ZM19.99%2C12.99h-11.76v3.24l-4.24-4.24%2C4.24-4.24v3.25h11.76v2.02-.02Z%22%2F%3E%3C%2Fsvg%3E") 12 12, e-resize;
    left: 0;
}

.swiper-button-next::after,
.swiper-button-prev::after {
    /* color: white;
    mix-blend-mode: difference; */
    display: none;
}

.swiper-button-next {
    justify-content: flex-end;
}

.swiper-button-prev {
    justify-content: flex-start;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    opacity: 1;
}

.swiper-scrollbar-v {
    top: 0;
    right: 7px;
    position: fixed;
    width: 1px;
    height: calc(100% - 40px);
    z-index: 10;
    padding: 20px 0;
    box-shadow: 1px 1px 5px black;
}

.swiper-info {
    position: absolute;
    z-index: 10;
    top: 10px;
    left: 10px;
}

#focus__content {
    max-height: 100vh;
    max-height: 100dvh;
    overflow-y: scroll;
    scroll-snap-type: y proximity;
    /* padding-top: var(--spacer-big); */

}

#focus__close {
    position: fixed;
    left: 20px;
    top: 25px;
    z-index: 100;
    background: none;
    height: 32px;
    width: 32px;
    display: flex;
    border-radius: var(--border-radius);
    -webkit-appearance: none;
    justify-content: center;
    align-items: center; 
}

#focus__close svg {
    pointer-events: none;
    width: 100%;
    height: 100%;
}

.project__description {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--col-white--area);
    /* opacity: var(--opacity);    */
    backdrop-filter: blur(2px);
    border-bottom-right-radius: var(--border-radius);
    border-bottom-left-radius: var(--border-radius);
    padding: var(--padding) calc(1.5* var(--padding));
    transition: var(--transition-duration) all var(--transition-function);
    pointer-events: all;
    color: var(--col-black);
    z-index: 200;
    max-width: 600px;
    width: 90vw;
    margin: 0 auto;
    transition: all var(--transition-duration) var(--transition-function);
}

    .project__description.is-hidden {
        bottom: -70px;
        background: var(--col-white--area-transparent);
        opacity: 0;
    }

    header accordion-header div.site-title,
    .project__description accordion-header div.site-title {
        width: calc(100% - 26px);
    }

        header accordion-header div.site-title {
            width: 281px;
            padding: var(--padding) calc( 1 * var(--padding));
        }

    /* header accordion-header span, */
    .project__description accordion-header span {
        display: inline;
        position: absolute;
        right: 15px;
    }

    header accordion-header span {
        top: 10px;
    }

    .post__meta--bar accordion-wrap {
        width: calc(100% - 40px);
        max-width: 650px;
    }

    .post__meta--bar accordion-header svg,
    header accordion-header svg,
    .project__description accordion-header svg {
        width: 16px;
        transition: all var(--transition-duration) var(--transition-function);
    }

    .post__meta--bar .open accordion-header svg,
    header .open accordion-header svg,
    .project__description accordion-header svg {
        transform: rotate(180deg);
    }

    .post__meta--bar .open accordion-header svg,
    .project__description .open accordion-header svg {
        transform: rotate(0deg);
    }

    .post__meta--bar accordion-content p,
    .project__description accordion-content p,
    header accordion-content li {
        opacity: 0;
        transition: opacity var(--transition-duration) var(--transition-function);
    }

    .post__meta--bar .open accordion-content p,
    .project__description .open accordion-content p,
    header .open accordion-content li {
        opacity: 1;
    }

    .post__meta--bar .open accordion-header p:nth-of-type(2),
    .project__description .open accordion-content p:nth-of-type(2),
    header .open accordion-content li:nth-of-type(2) {
        transition-delay: .2s;
    }

    .post__meta--bar .open accordion-header p:nth-of-type(3),
    .project__description .open accordion-content p:nth-of-type(3),
    header .open accordion-content li:nth-of-type(3) {
        transition-delay: .3s;
    }

    .post__meta--bar .open accordion-header p:nth-of-type(4),
    .project__description .open accordion-content p:nth-of-type(4),
    header .open accordion-content li:nth-of-type(4) {
        transition-delay: .4s;
    }

    .menu--children li::before {
        content: '\25EF';
    }

.post__meta--bar .open accordion-content,
header accordion-content,
.project__description accordion-content {
    padding-top: 0;
    transition: all var(--transition-duration) var(--transition-function);
}

.post__meta--bar .open accordion-content,
header .open accordion-content,
.project__description .open accordion-content {
    padding-top: var(--padding);
    transition: all var(--transition-duration) var(--transition-function);
}

.post__meta--bar p + p,
.project__description p + p {
    padding-top: var(--padding);
}

.section__appendix {
    height: 100vh;
    height: 100dvh;
    width: 100vw;
    display: flex;
    position: relative;
    bottom: 0;
    z-index: 1;
    justify-content: center;
    align-items: center;
    padding: 80px;
}

    footer {
        position: absolute;
        bottom: 20px;
        /* opacity: 0; */
    }

    footer a {
        text-decoration: none !important;
    }

    body.page footer,
    body.single footer,
    [data-page="contact"] footer {
        opacity: 1;
    }

main[data-page="about"] section:first-of-type,
main[data-page="contact"] section:first-of-type,
main[data-page="impressum-und-datenschutz"] section:first-of-type,
main[data-page="imprint-and-privacy"] section:first-of-type,
main[data-page="category"] section:first-of-type {
    padding-top: calc( 2 * var(--spacer-big) );
    padding-bottom: calc( .5 * var(--spacer-big) );
}

.gallery-gallery {
    display: flex;
}

.gallery-gallery .swiper {
    flex: 1;
    width: 50vw;
    height: auto;
}

.gallery-gallery .swiper-slide,
.gallery-gallery .swiper-slide img {
    width: 50vw;
    height: auto;
}

.gallery-gallery .swiper-gl-image {
    position: relative;
}

    .section__gallery.swiper,
    .section__gallery.swiper-slide,
    .section__gallery.swiper-gl-image {
        height: auto;
        max-height: 100%;
        /* max-height: 100dvh; */
    }

    @media (max-width: 1024px) {
        .section__gallery.swiper,
        .section__gallery.swiper-slide,
        .section__gallery.swiper-gl-image {
            max-height: initial !important;
        }
    }

    .section__gallery.swiper.full {
        max-height: 100dvh;
    }

    .section__video {
        justify-content: center;
        display: flex;
    }

    .section__video video,
    .section__gallery .swiper img {
        width: 100%;
    }

        .section__video {
            max-height: calc( 100vh - 20px );
        }

    .section__video-video {
        display: flex;
        gap: calc( 2 * var(--padding) );
    }

    .section__video-video .video-self {
        flex: 1;
    }

    .section__video-video .video-self video {
        width: 100%;
    }

    .section__gallery svg {
        fill: var(--col-white);
        background: var(--col-lightgray);
    }

.is-muted {
    pointer-events: none;
    transform: translateY(calc(-5% - 10px)) scale(.9);
    filter: blur(5px);
}

.section__table table {
    margin: var(--spacer-big) 20px calc( 2 * var(--spacer-big) ) 20px;
    width: calc( 100% - 40px );
}

.section__table tr {
    width: 100%;
}

    .section__table tr {
        padding-bottom: var( --padding ); 
        display: flex;
    }

    .section__table td {
        flex: 1;
    }

    .section__table tr + tr {
        border-top: 2px solid var(--col-white);
        padding-top: var( --padding );
    }

section.has__padding--top {
    padding-top: 84px !important;
}

h2.has__padding--bottom {
    margin-bottom: calc( 2 * var(--padding) ) !important;
}

section.has__padding--bottom {
    margin-bottom: calc( 3 * var(--padding) ) !important;
}

.section__subheadline + .section__text,
.section__gallery + .section__text,
.section__text + .section__text,
.section__text + .section__gallery,
.section__gallery + .section__gallery,
.section__gallery + .section__video,
.section__gallery + .section__video-video,
.section__text + .section__video,
.section__text + .section__video-video {
    padding-top: 20px;
}

section[class*="section__accordion"] {
    border-bottom: 1px solid var(--col-white);
}

section[class*="section__accordion"] accordion-header {
    padding-top: calc( 2 * var(--padding) );
    padding-bottom: calc( 2* var(--padding));
}

section[class*="section__"] {
    margin: 0 auto;
    width: calc(100vw -(4* var(--spacer-big)));
    max-width: 1200px;
}

.section__gallery {
    border-top: 0px !important;
}

/* section:not(section[class*="swiper"]):not(.has__padding--bottom) {
    padding-bottom: var(--padding) !important;
} */

.section__text {
    display: flex;
    gap: var(--padding);
    flex-direction: column;
}

    .section__text .text__columns {
        display: flex;
        gap: var(--padding);
    }

    .section__accordion tr.tr__flex--column {
        flex-direction: column;
    }
    
    .section__accordion tr td:first-of-type,
    .section__text h3 {
        flex: 1;
    }

    .section__accordion tr td:not(:first-of-type),
    .section__text div {
        flex: 3;
    }

    .section__text.text__two--col h3 {
        flex: 2;
    }

    .section__text.text__two--col div {
        flex: 3;
    }

.section__accordion .accordion__content_wrap {
    display: flex;
    flex-direction: column;
    gap: var(--padding);
    padding-bottom: calc( 2 * var(--padding));
    /* padding-top: var(--padding); */
}

.section__accordion table {
    width: 100%;
}

.section__accordion tr {
    display: flex;
    gap: var(--padding);
}

.section__accordion:not(.as--a-list) td {
    display: flex;
    flex-direction: column;
    display: inline;
}

.section__accordion:not(.as--a-list) span:after {
    content: ', ';
}

.section__accordion:not(.as--a-list) span:last-of-type:after {
    content: '';
}

.section__accordion.as--a-list td span {
    display: block;
}

.section__accordion .acc-helper {
    height: 20px;
    fill: var(--col-white);
    transition: .2s ease all;
    transform: rotate(0deg);
}

.section__accordion .open .acc-helper {
    transform: rotate(180deg);
}

/* .section__accordion.as--a-list td span::before {
    content: '• ';
} */

    accordion-header {
        /* border-bottom: 1px solid white; */
        display: flex;
        justify-content: space-between;
    }

    accordion-header:hover h3 {
        padding-left: 10px;
    }

    accordion-wrap.open accordion-header h3,
    accordion-header h3 {
        padding-left: 0px;
        display: flex;
        justify-content: space-between;
        transition: all var(--transition-duration) var(--transition-function);
    }

    accordion-header h3::after {
        /* content: '\25EF'; */
        /* font-size: .6em;
        top: -9px; */
        /* position: relative; */
    }

main[data-page="about"] .section__wrapper {
    display: flex;
    flex-direction: row;
    width: 100vw;
}


main[data-page="about"] .section__wrapper > div[class*="section__"] {
    flex: 1;
}

main[data-page="about"] .section__images img {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    object-fit: cover;
}

#category__description + .grid__work--group {
    margin-top: calc( var(--spacer-big) );
}

.grid__work--group {
    display: grid;
    /* gap: calc( 3 * var(--padding) ); */
    padding: calc( var(--padding) );
}

.grid__work--group[data-grid="2"] {
    grid-template-columns: 1fr 1fr;
}

.grid__work--group[data-grid="3"] {
    grid-template-columns: 1fr 1fr 1fr;
}

    .grid__work--group a {
        display: inline-block;
        backdrop-filter: none;
        box-shadow: none;
        opacity: var(--opacity-active);
        background: none;
        padding: 0px;
        overflow: hidden;
    }

    .grid__work--group a h2 {
        opacity: var(--opacity-active);
        transition: opacity var(--transition-duration) var(--transition-function);
        pointer-events: none;
        position: relative;
        z-index: 2;
    }

    .grid__work--group--item {
        display: flex;
        flex-direction: column;
    }

    .grid__work--group--item picture,
    .grid__work--group--item img {
        display: block;
        pointer-events: none;
    }

    .grid__work--group--item a img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform var(--transition-duration) var(--transition-function);
        transform: scale(1);
        transform-origin: center;
    }

    .grid__work--group--item a:hover img {
        transform: scale(1.01);
    }

    .grid__work--group a:hover h2 {
        opacity: var(--opacity-active);
    }

    .grid__work--group a img {
        pointer-events: none;
    }

    .grid__work--group a:hover {
        background: none;
    }

    .grid__work--group--item h2 {
        background: var(--col-white);
        color: var(--col-black);
        padding: var(--padding);    
    }

.post__news {
    display: flex;
    flex-direction: column;
}