html {
    scroll-behavior: smooth;
}

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

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,
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;
}


aside#loader {
    top: 0;
    transition: var(--transition-duration) var(--transition-function) all;
    opacity: 0;
    backdrop-filter: blur(5px) brightness(.2);
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 300;
}

aside#loader.is-active {
    opacity: 1;
    cursor: progress;
    pointer-events: all;
}

    aside#loader h1 {
        background: var(--col-white);
        opacity: var(--opacity);
        padding: calc(.5* var(--padding)) var(--padding);
        color: var(--col-black);    
        animation: anim calc( 4 * var(--transition-duration) ) var(--transition-function) infinite; 
    }

    @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;
}


main {
    position: relative;
    scroll-snap-type: y proximity;
    max-height: 100vh;
    overflow-y: scroll;
    transition: var(--transition-duration) all var(--transition-function);
    z-index: 10;
}

    

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

    main section[class*="section__"].text__size--bigger a  {
        text-decoration-thickness: var(--thickness-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;
}

section {
    scroll-snap-align: start;
}

.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;
    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;
}

    @media (max-width: 1024px) {
        .section__gallery[data-imagesperview="2"] .swiper-wrapper,
        .section__gallery[data-imagesperview="3"] .swiper-wrapper {
            flex-direction: column;
            gap: var(--padding);
        }
    }

    @media (min-width: 1025px) {
        .swiper .post__meta--bar {
            opacity: 0;
            transition: opacity var(--transition-duration) var(--transition-function);
        }

        .swiper.in-view:hover .swiper-slide-prev .post__meta--bar,
        .swiper.in-view:hover .swiper-slide-active .post__meta--bar,
        .swiper.in-view:hover .swiper-slide-next .post__meta--bar {
            opacity: 1;
        }
    }

.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);
        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);
        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;
    }

        @media (max-width: 1024px) {
            header.is-inactive {
                top: -120px;
            }
        }

    .header--wrapper {
        background: var(--col-white);
        color: var(--col-black);
        opacity: var(--opacity);
        backdrop-filter: blur(10px);
        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;
    }

    .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 {
        opacity: var(--opacity-active);
    }

    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);
        background: var(--col-black);
    }

    aside#focus {
        height: 100vh;
        overflow-y: hidden;
    }

    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;
    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);
    opacity: var(--opacity);   
    backdrop-filter: blur(10px);
    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;
    }

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

        header accordion-header h1 {
            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;
    }

.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;
}

    @media (max-width: 1024px) {
        .section__appendix {
            padding: 40px;
        }
    }

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

    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%;
    }

    @media (max-width: 1024px) {
       .section__gallery.swiper-h .swiper-slide {
            max-height: 100vh;
            width: 100vw;
            height: 100%;
        }
    }

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

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

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

    @media (max-width: 1024px) {
        main[data-page="startseite"] .swiper-slide video {
            background-position: center center;
            width: 100vw;
            height: 100vh;
            object-fit: cover;
        }
    }

    .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;
}

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

.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"] {
    padding-top: calc( 2 * var(--padding) );
    padding-bottom: calc(2* var(--padding));
    border-bottom: 1px solid var(--col-white);
}

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

section[class*="section__"].text__size--bigger {
        max-width: inherit;
        margin: 0 20px;
    }

@media (min-width: 1025px) {

    section[class*="section__"].full {
        width: 100vw;
        /* padding: 0 20px; */
        max-width: inherit;
    }

}

@media (max-width: 1280px) {
    section[class*="section__text"] {
        padding-left: 20px;
        padding-right: 20px;
    }
}


/* .about--list--item__single {
    display: block;

}

.about--list--item__single::before {
    content: '• ';
    margin-right: 10px;
} */

/* main[data-page="about"] section:not(:first-of-type),
main[data-page="about"] section p:not(:first-of-type) {
    padding-top: var(--padding);
} */

.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;
    }

    .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-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;
}

@media (max-width: 1024px) {
    .section__text .text__columns {
        flex-direction: column;
        gap: var(--padding);
    }

    .section__accordion {
        padding: 0 var(--padding);
    }

    .section__accordion tr {
        flex-direction: column;
    }
}

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

    accordion-header {
        /* border-bottom: 1px solid white; */
    }

    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;
}

    @media (max-width: 1024px) {
        main[data-page="about"] .section__wrapper {
            flex-direction: column;
        }
    }

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;
}

.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;
    }

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

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

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

        @media (max-width: 1024px) {
            .grid__work--group[data-grid="2"],
            .grid__work--group[data-grid="3"]  {
                grid-template-columns: 1fr;
            }

        }