:root {
    --fontSize: 14px;
    --lineHeight: 16px; /* 114% */

    --fontSizeXL: 21px;
    --lineHeightXL: 24px; /* 114% */

    --margin: 7px;
    --opacity: 0.2;
    --transition: 300ms ease-in-out;

    --desktop: 1000px;
    --tablet: 750px;
}

@font-face {
    font-family: "ABC Synt";
    src: url("../fonts/ABCSynt-Regular-Trial.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
}

html, body {
    margin: 0;
    padding: 0;
    background-color: white;
    font-size: var(--fontSize);
    line-height: var(--lineHeight);
    font-family: "ABC Synt";
    font-weight: normal;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased; /* For Safari and Chrome (WebKit/Blink) */
    -moz-osx-font-smoothing: grayscale; /* For Firefox (OS X specifically) */
}

.disable-transitions * {
  transition: none !important;
}

::selection {
  all: unset;
  color: rgba(0, 0, 0, 0.2);
}

a {
    all: unset;
    cursor: pointer;
}

p {
    margin-top: 0;
    margin-bottom: var(--lineHeight);
}

.tabularFigures {
    font-feature-settings: "tnum";
}

.case {
    font-feature-settings: "case";
}

.pointer {
    cursor: pointer;
}

.loadingWrapper {
    z-index: 9999;
    width: 100vw;
    height: 100dvh;
    box-sizing: border-box;
    background-color: white;
    position: absolute;
    /* Transition -> active */
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--transition);
}

.loadingWrapper.active {
    pointer-events: all;
    opacity: 1;
}

.loadingText {
    width: 100vw;
    height: var(--lineHeight);
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 14px 1fr 14px 1fr 14px 1fr 14px 1fr 14px;
    position: absolute;
    /* Transition -> active */
    top: 4px;
    transition: top var(--transition);
}

.loadingText.active {
    top: calc(50dvh - (0.5 * var(--lineHeight)));
}

.loadingText.home {
    top: calc(50dvh - (0.5 * var(--lineHeight)));
}

.loadingTitle {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Transition -> .active */
    opacity: 1;
    transition: opacity var(--transition);
}

.loadingText .loadingTitle {
    grid-column: 2 / span 5;
}

@media screen and (min-width: 1000px) {

    .loadingText .loadingTitle {
        grid-column: 2 / span 1;
    }

}





/* XXX */
.menuWrapper {
    z-index: 100;
    width: 100vw;
    height: var(--lineHeight);
    position: absolute;
    display: grid;
    grid-template-columns: 14px 1fr auto 14px;
    pointer-events: none;
    color: white;
    mix-blend-mode: difference;
    /* Transition -> .active */
    top: 4px;
    transition: top var(--transition)
}

.menuWrapper.active {
    top: calc(50dvh - (0.5 * var(--lineHeight)));
}

.menuWrapper.home {
    top: calc(50dvh - (0.5 * var(--lineHeight)));
}

.title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Transition -> .active */
    opacity: 1;
    transition: opacity var(--transition);
}

.title.active {
    opacity: 0;
}

.menu {
    display: grid;
    grid-template-columns: 14px auto;
    /* Transition -> .active */
    opacity: 1;
    pointer-events: all;
    transition: opacity var(--transition);
}

.menu.active {
    opacity: 0;
    pointer-events: none;
}

.arrow {
    text-align: end;
    font-feature-settings: "case";
    /* Transition -> .active */
    opacity: 0;
    transition: opacity var(--transition);
}

.arrow.active {
    opacity: 1;
    pointer-events: all;
}

.toggleMenuBtn {
    cursor: pointer;
}

.aboutBtn, .closeBtn, .closeOverviewBtn, .closeContextBtn {
    width: 100vw;
    height: var(--lineHeight);
    display: grid;
    grid-template-columns: 14px 1fr 14px 1fr 14px 1fr 14px 1fr 14px;
    position: absolute;
    /* Transition -> .active */
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition);
}

.aboutBtn.active, .closeBtn.active, .closeOverviewBtn.active, .closeContextBtn.active {
    opacity: 1;
    pointer-events: all;
}

.closeOverviewBtn, .closeContextBtn {
    z-index: 501;
    bottom: 4px;
}

.closeBtn {
    z-index: 120;
    top: 4px;
}

.aboutBtn {
    z-index: 150;
    bottom: 4px;
}

.slideshowMenu {
    z-index: 50;
    width: 100vw;
    height: var(--lineHeight);
    display: grid;
    grid-template-columns: 14px 1fr auto 1fr 14px;
    position: absolute;
    box-sizing: border-box;
    bottom: 4px;
    /* Transition -> .active */
    opacity: 1;
    pointer-events: all;
    transition: opacity var(--transition);
}

.slideshowMenu.active {
    opacity: 0;
    pointer-events: none;
}

@media screen and (min-width: 1000px) {
    .slideshowMenu {
        padding-left: calc((100vw - 2 * var(--margin)) / 4 );
        padding-right: calc((100vw - 2 * var(--margin)) / 4 );

        /* additional Transition */
        top: 4px;
        transition: top var(--transition), opacity var(--transition);
    }
    .slideshowMenu.active {
        top: calc(50dvh - (0.5 * var(--lineHeight)));
    }
}

#counter span {
  opacity: var(--opacity);
  transition: opacity var(--transition);
}

#counter span.active {
  opacity: 1;
}

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

.workWrapper > :first-child, .workWrapper > :last-child {
    height: calc(50dvh - (0.5 * var(--lineHeight)));
}

.workWrapper > div {
    padding-left: 7px;
    scroll-snap-align: center;
    align-items: center;
    display: flex;
    height: var(--lineHeight);
}

.aboutWrapper, .scrollWrapper {
    width: 100vw; 
    height: 100dvh;
    position: absolute; 
    overflow-y: scroll;

    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE and Edge */

    /* Transition -> .active */
    opacity: 0;
    transition: opacity var(--transition);
    pointer-events: none;
}

#aboutWrapepr::-webkit-scrollbar, .scrollWrapper::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge */
}

.aboutWrapper {
    z-index: 125;
    backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.5);
}

.scrollWrapper {
    z-index: 11;
    scroll-snap-type: y mandatory;
    scroll-snap-stop: always;
    color: white;
    mix-blend-mode: difference;
}

.aboutWrapper.active, .scrollWrapper.active {
    opacity: 1;
    pointer-events: all;
}

.aboutText {
    margin: 4px 7px 0px 7px;  /* top right bottom left */
    font-size: var(--fontSizeXL);
    line-height: var(--lineHeightXL);
}

.aboutGrid {
    display: grid;
    grid-template-columns: repeat(2, 7px) 1fr repeat(2, 7px);   
    width: 100vw;
}

.list {
    text-indent: -33.32px;  /* erste Zeile nach links versetzen */
    padding-left: 33.32px;  /* alle Zeilen einrücken */
}

#exhibitions, #publications, #awards_and_scolarships, #public_collections {
    grid-column: 2 / span 3;
}

.exhibitionsBtn, .publicationsBtn, .awardsAndScolarshipsBtn, .publicCollectionsBtn {
    height: var(--lineHeight);
    grid-column: 1 / span 5;
    box-sizing: border-box;
    cursor: pointer;

    display: grid;
    grid-template-columns: 14px 1fr auto 14px;
}

#exhibitions, #publications, #awards_and_scolarships, #public_collections {
    height: 0px;
    overflow: hidden;
    transition: height var(--transition);
}

#public_collections {--collectionsHeight: 0px;}
#public_collections.active {height: var(--collectionsHeight);}

#exhibitions {--exhibitionsHeight: 0px;}
#exhibitions.active {height: var(--exhibitionsHeight);}

#publications {--publicationsHeight: 0px;}
#publications.active {height: var(--publicationsHeight);}

#awards_and_scolarships {--awardsHeight: 0px;}
#awards_and_scolarships.active {height: var(--awardsHeight);}


.cross {
    transform: rotate(0deg);
    transition: transform var(--transition);
}

.cross.active {
    transform: rotate(45deg);
}

.counter {
    font-feature-settings: "sups";
}

@media screen and (min-width: 1000px) {

    .publicCollectionsBtn, .exhibitionsBtn, .publicationsBtn, .awardsAndScolarshipsBtn {
        display: none;
    }


    #exhibitions, #exhibitions.active, #publications, #publications.active, #awards_and_scolarships, #awards_and_scolarships.active, #public_collections, #public_collections.active {
        height: fit-content;
    }

    .aboutGrid {    
        grid-template-columns: repeat(2, 7px) 1fr repeat(2, 7px) 1fr repeat(2, 7px) 1fr repeat(2, 7px) 1fr repeat(2, 7px);
    }

    #exhibitions {grid-column: 2 / span 2;}
    #publications {grid-column: 5 / span 2;}
    #awards_and_scolarships {grid-column: 8 / span 2;}
    #public_collections {grid-column: 11 / span 2;}

}

.collapse {
    width: 100vw;
    display: grid;
    grid-template-columns: 14px 1fr 14px;
}

.collapseSymbol {
    float: right;
    font-feature-settings: "case";
    /* Transition */
    transition: transform var(--transition); 
}

.collapseSymbol:hover {
    transform: rotate(45deg);
}

.observe {
    pointer-events: none;
}

.scrollWrapper.active .observe div {
    pointer-events: all;
    cursor: pointer;
}

.thumbnailWrapper {
    z-index: 10;
    width: 100vw; 
    height: 100dvh;
    position: absolute;
    pointer-events: none;
    /* center child-elements */
    align-items: center;
    justify-content: center;
    display: flex;
    /* Transition -> .active & blur */
    opacity: 0;
    transition: opacity var(--transition), filter var(--transition);
}

.thumbnailWrapper.active {
    opacity: 1;
}

.thumbnailWrapper > img {
    width: calc((100vw - 2 * var(--margin)) * 0.75);
    height: calc(100dvh - 2 * var(--margin) - 6 * var(--lineHeight));
    position: absolute;
    object-fit: contain;
    /* Transition -> .active */
    opacity: 0;
    transition: width var(--transition), height var(--transition), opacity var(--transition);
}

/* small IMG size */

.thumbnailWrapper > img.small, .imageWrapper > img.small {
    width: calc((100vw - 2 * var(--margin)) * 0.25);
    height: calc(100dvh - 2 * var(--margin) - 8 * var(--lineHeight));
}

@media screen and (min-width: 1000px) {
    .thumbnailWrapper > img.small, .imageWrapper > img.small {
        width: calc((100vw - 2 * var(--margin)) * 0.125);
    }
}


.thumbnailWrapper > img.active {opacity: 1;}

.slideshowWrapper {
    z-index: 5;
    width: 100vw; 
    height: 100dvh;
    position: absolute;
    pointer-events: none;
    box-sizing: border-box;
    /* Transition -> blur */
    opacity: 0;
    transition: opacity var(--transition), filter var(--transition);
}

.slideshowWrapper.active {
    opacity: 1;
}

.slideshowWrapper.blur, .thumbnailWrapper.blur {
    opacity: 0.25;
    filter: blur(20px);
}

.slideshowWrapper.blur .prevBtn, .slideshowWrapper.blur .nextBtn {
    pointer-events: none;
}

.slideshowWrapper .prevBtn, .slideshowWrapper .nextBtn {
    position: absolute;
    width: 50vw;
    height: 100dvh;
    box-sizing: border-box;
    top: 0;
    pointer-events: all;
}

.overviewWrapper, .contextWrapper {
    z-index: 400;
    width: 100vw; 
    height: 100dvh;
    position: absolute;
    backdrop-filter: blur(20px);
    background-color: rgba(255, 255, 255, 0.75);
    box-sizing: border-box;
    /* transitions –> active */ 
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition);
}

.overviewWrapper.active, .contextWrapper.active {
    opacity: 1;
    pointer-events: all;
}

.overviewWrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}

.contextWrapper {
    overflow-y: scroll;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE and Edge */
}

.contextWrapper::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge */
}

.contextText {
     padding: 4px 7px 0px 7px;  /* top right bottom left */
     text-align: justify;
     hyphens: auto;
     overflow-wrap: break-word;
}

.overviewWrapper div {
    justify-content: center;
    flex-wrap: wrap;
    display: flex;
    margin: calc(0.5 * var(--margin));
}

.overviewWrapper div img {
    height: calc(4 * var(--lineHeight));
    width: auto;
    margin: calc(0.5 * var(--margin));
    cursor: pointer;
}

.imageWrapper {
    width: 100vw;
    height: 100dvh;
    position: absolute;
    box-sizing: border-box;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.imageWrapper > .image {
    width: calc((100vw - 2 * var(--margin)) * 0.75);
    height: calc(100dvh - 2 * var(--margin) - 6 * var(--lineHeight));
    position: absolute;
    object-fit: contain;
    /* transition */ 
    opacity: 0;
    transition: width var(--transition), height var(--transition), opacity var(--transition);
}

.imageWrapper .image.active {
    opacity: 1;
}

.prevBtn {left: 0;  cursor: w-resize;}
.nextBtn {right: 0; cursor: e-resize;}

.desktop {display: none;}

@media screen and (min-width: 1000px) {
    .desktop {display: flex;}
}

/* BLUR BLUR BLUR */

.blurScrollWrapper {
    width: 100vw;
    height: 100dvh;
    position: absolute;
    z-index: 12;
    box-sizing: border-box;
    opacity: 1;
    pointer-events: none;
}

.blurScrollWrapper > .blurWrapper {
    position: absolute;
}

.blurScrollWrapper .blurWrapper.top {
    top: 0;
    transform: rotate(180deg);
}

.blurScrollWrapper .blurWrapper.bottom {
    bottom: 0;
}

.blurWrapper {
    height: calc(3 * var(--lineHeight) + var(--margin));
    width: 100vw;
    position: sticky;
    left: 0;
    bottom: 0;
    box-sizing: border-box;
    pointer-events: none;
}

.blurWrapper > .blur-filter {
    position: absolute;                
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.blurWrapper > .blur-filter:nth-child(1) {
    backdrop-filter: blur(0.3px);
    -webkit-backdrop-filter: blur(0.3px);
    mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 12.5%, rgba(0, 0, 0, 1) 25%, rgba(0, 0, 0, 0) 37.5%);
}

.blurWrapper > .blur-filter:nth-child(2) {
    backdrop-filter: blur(0.6px);
    -webkit-backdrop-filter: blur(0.6px);
    mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 12.5%, rgba(0, 0, 0, 1) 25%, rgba(0, 0, 0, 1) 37.5%, rgba(0, 0, 0, 0) 50%);
}

.blurWrapper > .blur-filter:nth-child(3) {
    backdrop-filter: blur(0.9px);
    -webkit-backdrop-filter: blur(0.9px);
    mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 1) 37.5%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 62.5%);
}

.blurWrapper > .blur-filter:nth-child(4) {
    backdrop-filter: blur(1.5px);
    -webkit-backdrop-filter: blur(1.5px);
    mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 37.5%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 1) 62.5%, rgba(0, 0, 0, 0) 75%);
}

.blurWrapper > .blur-filter:nth-child(5) {
    backdrop-filter: blur(2.4px);
    -webkit-backdrop-filter: blur(2.4px);
    mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 62.5%, rgba(0, 0, 0, 1) 75%, rgba(0, 0, 0, 0) 87.5%);
}

.blurWrapper > .blur-filter:nth-child(6) {
    backdrop-filter: blur(3.9px);
    -webkit-backdrop-filter: blur(3.9px);
    mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 62.5%, rgba(0, 0, 0, 1) 75%, rgba(0, 0, 0, 1) 87.5%, rgba(0, 0, 0, 0) 100%);
}

.blurWrapper > .blur-filter:nth-child(7) {
    backdrop-filter: blur(6.3px);
    -webkit-backdrop-filter: blur(6.3px);
    mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 1) 87.5%, rgba(0, 0, 0, 1) 100%);
}

.blurWrapper > .gradient {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom,
        rgba(255, 255, 255, 0.0) 0%,
        rgba(255, 255, 255, 1.0) 99%,
        rgba(255, 255, 255, 1.0) 100%
        );
}