@charset "UTF-8";

:root{
    --white: #FFFFFF;

    --size0: 11px;
    --size1: 15px;
    --size2: 15.5px;
    --size3: 17.5px;
    --size4: 21px;
    --size5: 50px;
    --size6: 27px;
    --size7: 50px;
    --size8: 73px;

    --edge0: 3px;
    --edge1: 10px;
    --edge2: 12px;
    --edge3: 14px;
    --edge34: 17px;
    --edge4: 19px;
    --edge5: 20px;
    --edge6: 27px;
    --edge7: 30px;
    --edge8: 40px;
    --edge9: 50px;
    --edge10: 100px;
    --edge11: 110px;

    --line-margin: 8px;

    --line: 1px;
    --point: 13px;
    --radius: 11px;

    --regular: "WalzeBeta02-Regular";
    --italic: "WalzeBeta02-Italic";
}
*{
	margin:0;
	padding:0;
	list-style:none;
    box-sizing: border-box;
}
body{
    font-family: var(--regular);
    font-size: var(--size1);
    background: var(--white2);
    color: var(--black);
    line-height: 1.2;
    -webkit-font-smoothing: antialiased;
    margin: 0;
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
*::-webkit-scrollbar {
    display: none;
}
h1, h2, h3, h4, h5, h6{
    font-size: unset;
    font-weight: 400;
}
.caps{
    text-transform: uppercase;
}
.mobile{
    display: none;
}
.transition{
    position: fixed;
    top: 0;
    height: 100vh;
    width: 100vw;
    background: var(--white2);
    z-index: 999;
}
.size1{
    font-size: var(--size1);
    letter-spacing: 0.9px;
}
.size2{
    font-size: var(--size2);
    letter-spacing: 0.32px;
}
.size3{
    font-size: var(--size3);
    letter-spacing: 0.585px;
}
.size4{
    font-size: var(--size4);
}
.size6{
    font-size: var(--size6);
}
.size7{
    font-size: var(--size7);
    line-height: 1;
    letter-spacing: 1px;
}
h4{
    letter-spacing: 0.675px;
}
.gap1{
    gap: var(--edge2);
}
.gap2{
    gap: var(--edge6);
}
.gap3{
    gap: var(--edge7);
}
.margin{
    margin-top: var(--edge5);
}
.margin-1{
    margin-top: var(--edge1);
}
.margin-2{
    margin-top: calc(var(--edge10) * 2);
}
.flex{
    display: flex;
}
.flex a:not(.imprint-button){
    display: flex;
    gap: calc(var(--edge1) * 0.25);
    align-items: center;
}
#work{
    transition: 500ms ease-in;
    /* transform: translateY(200px); */
}
/* #work.focus{
    transform: none;
} */
.center{
    width: max-content;
    margin: auto;
}
.section-heading{
    text-align: center;
    text-transform: uppercase;
}
a{
    text-decoration: none;
    color: var(--black);
}
nav,header, main, footer{
    padding: 0 var(--edge4);
}
nav{
    position: fixed;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: var(--white2);
    z-index: 99;
    transition: top 300ms;
}
.nav{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.nav-link{
    cursor: pointer;
}
.nav-link.current, .nav-link.active{
    color: var(--pink);
}
.home-button{
    cursor: pointer;
}
.home-button.active{
    color: var(--pink);
}
.home-button.active .logo-hover{
    display: block;
}
.home-button.active .logo{
    visibility: hidden;
}
@media (hover: hover) and (pointer: fine) {
    a:hover{
        color: var(--pink);
    }
    footer a:hover{
        color: var(--white);
    }
    .home-button:hover, .nav-link:hover{
        color: var(--pink);
    }
    .home-button:hover .logo-hover{
        display: block;
    }
    .home-button:hover .logo{
        visibility: hidden;
    }
    .imprint-button:hover{
        color: var(--black);
        background: var(--white);
    }
    .link:hover{
        color: var(--pink);
    }
    .department:hover .point{
        background: none;
        box-shadow: inset 0px 0px 0px 2px var(--pink);
        transition: box-shadow 300ms ease;
    }
    .info:hover, .buy a:hover{
        color: var(--pink);
    }
}
.logo-container{
    position: relative;
    margin-left: -2px;
}
.logo-title{
    margin-left: -2px;
    margin-top: -1px;
}
.logo, .logo-hover{
    display: block;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    padding: 2px;
}
.logo-hover{
    position: absolute;
    display: none;
    top: 0;
}
.background-header{
    display: block;
    width: 100%;
    height: calc(100vh - var(--nav-height) - var(--edge1));
    object-fit: cover;
    border-radius: var(--radius) var(--radius) 0px 0px; 
}
.intro-text{
    line-height: 1.04;
    letter-spacing: calc((var(--size8) / 100) * -1);
    font-size: var(--size8);
}
.intro-text strong{
    font-weight: 400;
    color: var(--pink);
    margin-top: var(--edge1);
}
.filter-container{
    justify-content: center;
    height: var(--nav-height);
    align-items: center;
    top: 0;
    position: sticky;
    z-index: 100;
    pointer-events: none;
    width: 100%;
    transition: top 300ms;
    margin-top: calc(var(--edge0) * -1);
}
.department{
    align-items: center;
    gap: calc(var(--edge1)/2);
    cursor: pointer;
    pointer-events: all;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.point{
    width: var(--point);
    height: var(--point);
    background: var(--buttonColor);
    border-radius: 50%;
    box-shadow: inset 0px 0px 0px 0px var(--pink);
}
.department.active .point{
    background: var(--pink);
}
.project-grid{
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--edge2) var(--edge3);
}
.project{
    position: relative;
    grid-column: span 1;
    overflow: hidden;
}
.project-image-container{
    position: relative;
    width: 100%;
    aspect-ratio: 4/5;
    border-radius: var(--radius) var(--radius) 0px 0px;
    border-collapse: separate;
    overflow: hidden;
    transform: translateZ(0);
    isolation: isolate;
}
.image-content{
    display: flex;
    position: relative;
    align-items: center;
    overflow: hidden;
    height: 100%;
    scrollbar-width: none;
    overflow-y: hidden;
    overscroll-behavior-x: none;
    border-radius: var(--radius) var(--radius) 0px 0px;
    -webkit-overflow-scrolling: touch;
}

.image-content > :first-child{
    position: relative;
    left: 0;
}
.project-image, .department-image{
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 4/5;
}
.project-image{
    left: 100vw;
}
.arrow-container{
    position: absolute;
    display: flex;
    top: 0;
    left: 50%;
    height: 100%;
    width: 100%;
    transform: translateX(-50%);
    justify-content: space-between;
    align-items: center;
    pointer-events: none;
    mix-blend-mode: difference;
}
.project-arrow{
    display: flex;
    cursor: pointer;
    pointer-events: all;
    width: 50%;
    height: 100%;
    align-items: center;
    opacity: 0;
    transition: opacity 400ms ease-in-out;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    touch-action: manipulation;
}
.project-arrow.arrow-left{
    justify-content: left;
}
.project-arrow.arrow-right{
    justify-content: right;
}
.project-arrow img{
    width: var(--size1);
    margin: 0 var(--edge2);
}
.project-arrow .left{
    rotate: 180deg;
}
.project-overlay, .department-overlay{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: absolute;
    background: var(--white2);
    border-radius: var(--radius) var(--radius) 0px 0px;
    height: 100%;
    width: 100%;
    top: 100%;
    z-index: 1;
}
.project-title{
    margin-top: calc(var(--edge1)*0.8);
}
.project-description{
    line-height: 1.3;
}
.link{
    color: var(--gray);
}
.project-table .row{
    display: flex;
    border-top: var(--line) solid var(--black);
    gap: var(--edge2);
    padding-top: calc(var(--size2)* 0.2);
    padding-bottom: calc(var(--size2)* 0.35);
}
.project-table .row:last-child{
    border-bottom: var(--line) solid var(--black);
}
.project-table .row div{
    width: 50%;
}
.project-info{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    margin-top: var(--edge0);
    line-height: 1.2;
    gap: var(--edge3);
    align-items: flex-start;
}
.index{
    grid-column: 1/3;
    transition: 300ms;
    font-variant-numeric: tabular-nums;
}
.index, .department-title{
    font-size: calc(var(--size1) + 0.2);
}
.info.active{
    color: var(--pink);
}
.arrow{
    transition: 300ms;
}
.info, .buy{
    gap: calc(var(--edge1) * 0.25);
    cursor: pointer;
}
.info{
    grid-column: span 1;
    align-items: center;
}
.buy{
    grid-column: 4/-1;
}
.studio-image{
    display: block;
    width: 100%;
    border-radius: var(--radius) var(--radius) 0px 0px;
}
.img-desc{
    margin-top: var(--edge0);
    line-height: 1.2;
}
.department-title{
    line-height: 1.2;
    grid-column: 1/3;
}
.department-grid{
    display: grid;
    width: 100%;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--edge2) var(--edge3);
    margin-top: var(--edge3);
}
.studio-department{
    position: relative;
    grid-column: span 2;
    overflow: hidden;
}
.portrait{
    position: relative;
    grid-column: span 1;
    overflow: hidden;
}
.portrait .department-title{
    grid-column:  span 4;
}
.cv-container{
    display: flex;
    gap: var(--edge3);
    margin-top: var(--edge8);
}
.cv-list{
    width: 50%;
    line-height: 1.3;
}
.cv-list p, .cv-list a{
    display: block;
}
.line{
    height: var(--line);
    background: var(--black);
}
.cv-line{
    margin: calc((var(--size4)*1.3)/2) 0;
}
.project-line{
    margin: var(--line-margin) 0;
}
footer{
    margin-top: calc(var(--doc-height) - var(--cv-height) - var(--footer-height) - var(--nav-height) - var(--edge8) - var(--edge3));
    padding: 0 var(--edge4);
}
.footer{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: var(--edge3);
    background: var(--pink2);
    padding: var(--edge34) var(--edge4);
    border-radius: var(--radius) var(--radius) 0px 0px; 
}
.footer-section{
    grid-column: span 1;
    line-height: 1.3;
    justify-content: space-between;
}
.fixed-imprint{
    position: fixed;
    bottom: 0;
    right: 0;
    padding: calc((var(--size4) * 1.2) + var(--edge34)) calc(var(--edge4)*2);
}
.footer-link{
    display: block;
}
.imprint-button{
    display: inline-block;
    color: var(--white);
    background: var(--black);
    border-radius: 50px;
    letter-spacing: 1.05px;
    text-transform: uppercase;
    padding: calc(var(--edge1)/2) var(--edge3) calc(var(--edge1)*0.6);
    cursor: pointer;
}
.imprint-button.active{
    background: var(--pink);
}
.imprint-button.active:hover{
    color: var(--white);
}
#index, #imprint{
    margin-top: calc(var(--nav-height) + var(--edge1));
}
.imprint-grid{
    display: grid;
    gap: var(--edge3);
    width: 100%;
    grid-template-columns: repeat(12, 1fr);
    margin-bottom: var(--edge11);
}
.contact-text br{
    display: none;
}
.contact-container{
    grid-column: span 4;
    line-height: 1.3;
}
.disclaimer-container{
    grid-column: 5/-1;
    line-height: 1.3;
}
.disclaimer-content{
    column-count: 2;
    column-gap: var(--edge3);
}
.disclaimer-content p:not(:first-of-type){
    margin-top: calc(var(--size4) * 1.3);
}
.disclaimer-content strong{
    font-weight: 400;
}
.mobile-footer{
    display: none;
}

@media only screen and (max-width: 1800px) {
    :root{
        --size8: 61px;
    }
}

@media only screen and (max-width: 1500px) {
    :root{
        --size0: 10px;
        --size1: 13px;
        --size2: 14px;
        --size3: 15px;
        --size4: 18px;
        --size5: 35px;
        --size6: 23px;
        --size7: 45px;
        --size8: 55px;

        --edge0: 2px;
        --edge1: 9px;
        --edge2: 10px;
        --edge3: 12px;
        --edge34: 13px;
        --edge4: 15px;
        --edge5: 20px;
        --edge6: 20px;
        --edge7: 20px;
        --edge8: 35px;
        --edge9: 50px;
        --edge10: 94px;
        --edge11: 110px;
    }
    .logo, .logo-hover{
        width: 40px;
        height: 40px;
    }
}

@media only screen and (max-width: 1200px) {
    :root{
        --size0: 8px;
        --size1: 12px;
        --size2: 13px;
        --size3: 14px;
        --edge34: 15px;
        --size4: 16px;
        --size5: 30px;
        --size6: 21px;
        --size7: 42px;
        --size8: 37px;
    }
    .logo, .logo-hover{
        width: 35px;
        height: 35px;
    }
    footer{
        margin-top: var(--edge11);
    }
    .disclaimer-content{
        column-count: unset;
    }
    .contact-text br{
        display: block;
    }
    .project-grid{
        grid-template-columns: 1fr 1fr;
    }
    .department-grid{
        grid-template-columns: repeat(8, 1fr);
        align-items: end;
    }
    .studio-department{
        grid-column: span 4;
    }
    .portrait{
        grid-column: span 3;
    }
    .cv-container{
        display: block;
    }
    .cv-list{
        width: 100%;
    }
    .footer-section{
        display: flex;
        flex-direction: column;
        gap: var(--edge5);
    }
    .footer-section:first-of-type{
        grid-column: span 3;
    }
    .footer-section:nth-of-type(2), .footer-section:nth-of-type(3){
        display: none;
    }
    .imprint-grid{
        display: block;
    }
    .disclaimer-container{
        margin-top: var(--edge10);
    }
    .contact-text br{
        display: none;
    }
    .fixed-imprint{
        padding: var(--edge4);
    }
    .mobile-footer{
        display: block;
    }
}

@media only screen and (max-width: 1000px) {
    :root{
        --size4: 15px;
        --size5: 24px;
        --size6: 20px;
        --size7: 41px;
        --size8: 31px;
    }
    .filter-container{
        top: var(--nav-height);
        background: var(--white2);
        padding: var(--edge3);
        z-index: 98;
    }
}

@media only screen and (max-width: 800px) {
    :root{
        --size0: 7px;
        --size1: 10px;
        --size2: 12px;
        --size3: 13px;
        --edge34: 14px;
        --size4: 15px;
        --size5: 19px;
        --size6: 19px;
        --size7: 40px;
        --size8: 25px;

        --edge0: 1.5px;
        --edge1: 8px;
        --edge2: 8px;
        --edge3: 10px;
        --edge4: 10px;
        --edge5: 18px;
        --edge6: 14px;
        --edge7: 12px;
        --edge8: 32px;
        --edge9: 50px;
        --edge10: 105px;
        --edge11: 120px;


        --line-margin: 6px;
        --point: 11px;
    }
    .desktop{
        display: none;
    }
    .mobile{
        display: block;
    }
    .logo, .logo-hover{
        width: 30px;
        height: 30px;
    }
    .intro-text{
        line-height: 1.12;
    }
    .project-grid{
        grid-template-columns: 1fr;
    }
    .department-grid{
        grid-template-columns: repeat(4, 1fr);
    }
    .studio-department{
        grid-column: span 4;
    }
    .portrait{
        grid-column: span 3;
    }
    .studio-image{
        object-fit: cover;
        aspect-ratio: 4/5;
    }
    .margin-2{
        margin-top: var(--edge10);
    }
    .project-table .row{
        padding: calc(var(--size2)* 0.275) 0;
    }
    .flex a:not(.imprint-button), .info, .buy{
        gap: calc(var(--edge1) * 0.125);
    }
}

@media only screen and (max-width: 400px) {
    :root{
        --size1: 10px;
        --size2: 11px;
        --size3: 12px;

        --edge7: 8px;
    }
    .filter-heading{
        display: none;
    }
}