*,*::before,*::after{box-sizing:border-box}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}ul[role='list'],ol[role='list']{list-style:none}body{min-height:100vh;line-height:1.5}h1,h2,h3,h4,button,input,label{line-height:1.1}
h1,h2,h3,h4{text-wrap:balance; font-size:1em;}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}img,picture,video{max-width:100%;display:block;height:auto}input,button,textarea,select{font:inherit}textarea:not([rows]){min-height:10em}
h1, h2, h3, h4, h5, h6{ font-weight: normal; }
h1, h2, h3, h4, h5, h6, p, ul, ol{  margin: 0; padding: 0; }

@font-face {
    font-family: "Sabon";
    src: url('/assets/sabon.woff2') format('woff2');
}

*{
    box-sizing: border-box;
}

html{

    --padding: 3rem;
    --marginBlock: 7rem;

    --c1: rgb(242,242,242);
    --c2: rgb(232,232,232);
    --link-background-padding: 1.3em;

    --bgColor: white;
    --textColor: black;

    @media (max-width: 1200px){
        --padding: 2rem;
    }

    @media (max-width: 800px){
        --padding: 1rem;
    }

    &:has(.open-nav){
        overflow: hidden;
    }
}

body{
    font-family: "Sabon", sans-serif;
    line-height: 1.16;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    background-color: var( --bgColor );
    color: var( --textColor );
}

a {
    cursor: pointer;

    &:link, &:visited, &:hover, &:active{
        color: inherit;
    }
}

#skip-to-content-link {
    position: fixed;
    top: 0;

    background: black;
    color: white;
    left: 50%;
    padding: 8px;

    transform: translate(-50%, -150%);
    transition: transform 0.3s;
    z-index: 100;

    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;

    &:focus {
        transform: translate(-50%, 0);
    }
}

.visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.uppercase{
    text-transform: uppercase;
}

.pt11{
    font-size: 0.8rem;
}

.pt25{
    font-size: 1.8rem;

    @media (max-width: 800px){
        font-size: 1.2rem;
    }
}

.pt60{
    font-size: 4.28rem;

    font-size: min(4.7vh, 4vw);

    @media (max-width: 800px){
        font-size: 1.8rem;
    }
}

.tracking-10{ letter-spacing: 0.01em; }
.tracking-20{ letter-spacing: 0.01em; }

#main-header{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 5;

    display: flex;
    justify-content: center;
    gap: 1ch;
    align-items: baseline;
    flex-wrap: wrap;

    padding: 0.5rem var( --padding );

    a{
        text-decoration: none;
    }

    @media (max-width: 800px){
        display: grid;
        grid-template-columns: 1fr auto;

        top: calc( env(safe-area-inset-top) + 1rem );
        gap: 2lh 2ch;

        .logo{
            font-size: 0.8rem;
            grid-column: 1 / -1;
            display: block;
            width: 100%;
            text-align: center;
        }
    }

    .breadcrumbs{
        display: flex;
        justify-content: center;
        gap: 1ch;
        align-items: baseline;

        @media (max-width: 800px){
            opacity: 0.25;
            justify-content: start;

            & > *:not(.current):not(.seperator:first-child) {
                display: none;
            }
        }
    }

    .open-nav &{
        .breadcrumbs{
            visibility: hidden;
        }
    }
}

button{
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    font: inherit;
    color: currentColor;
    cursor: pointer;
    line-height: 1;
}

#toggle-menu-btn{
    display: none;

    @media (max-width: 800px){
        display: grid;
    }

    grid-template-columns: 7.5ch 1ch;
    gap: 1ch;

    span:nth-child(2){ display: none; }

    .icon{
        position: relative;
        width: 1cap;
        aspect-ratio: 1;
        transition: rotate 0.2s ease-out;

        &::after,
        &::before{
            content: " ";
            position: absolute;
            top: 50%;
            width: 100%;
            height: 1.2px;
            left: 0;
            rotate: var( --rotate, 0deg );
            display: block;
            background: currentColor;
        }

        &::after{
            --rotate: 90deg;
        }
    }

    .open-nav &{
        span:nth-child(1){ display: none; }
        span:nth-child(2){ display: initial; }

        .icon{
            rotate: 45deg;
        }

    }
}

#main-nav{
    display: none;

    @media (max-width: 800px){
        overflow: auto;

        .open-nav &{
            display: block;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 4;

            padding-top: 1rem;

            background-color: var( --bgColor );
            color: var( --textColor );
        }
    }

    .list{
        margin-bottom: 2rem;

        .list{
            padding-left: 1rem;
            margin-top: 1em;
            margin-bottom: 0;
        }
    }

    .bg-color-link{
        width: fit-content;

        h2{
            display: inline;
        }
    }

    .seperator{
        margin-left: 1.5ch;
    }
}


.start{
    .slide{
        display: none;
    }

    &[data-slide="1"]{ .slide:nth-child(1){ display: block; } }
    &[data-slide="2"]{ .slide:nth-child(2){ display: block; } }
    &[data-slide="3"]{ .slide:nth-child(3){ display: block; } }
    &[data-slide="4"]{ .slide:nth-child(4){ display: block; } }
    &[data-slide="5"]{ .slide:nth-child(5){ display: block; } }
    &[data-slide="6"]{ .slide:nth-child(6){ display: block; } }
    &[data-slide="7"]{ .slide:nth-child(7){ display: block; } }
    &[data-slide="8"]{ .slide:nth-child(8){ display: block; } }
    &[data-slide="9"]{ .slide:nth-child(9){ display: block; } }
    &[data-slide="10"]{ .slide:nth-child(10){ display: block; } }

    h1{
        position: fixed;
        top: 50%;
        translate: 0 -50%;
        z-index: 3;

        left: var( --padding );
        right: var( --padding );

        text-wrap: stable;

        pointer-events: none;
    }

    .enter{
        position: fixed;
        bottom: 0.5rem;
        left: 50%;
        translate: -50% 0;
        z-index: 3;
        pointer-events: none;

        @media (max-width: 800px){
            bottom: 1.5rem;
        }
    }

    .swiper-slide{
        height: 100dvh;

        /* background-color: var( --color, transparent ); */

        &::before{
            content: " ";
            background-color: var( --color, transparent );
            z-index: 2;
            position: absolute;
            inset: 0;
            pointer-events: none;
            opacity: 0.7;
        }

    }
}

.swiper{
    height: 100dvh;
    pointer-events: none;

    /*
    .swiper-button-prev,
    .swiper-button-next {
        position: absolute;
        top: 0;
        width: 50%;
        height: 100%;
        z-index: 0;

        &::after, svg {
            display: none;
        }

        @media (pointer: coarse){
            display: none;
        }
    }

     */

    /* cursor in project/_entry damit farbe richtig gesetzt wird */
    /*
    .swiper-button-prev {
        left: 0;
    }

    .swiper-button-next {
        right: 0;
    }
     */
}

.swiper-slide{
    height: auto;

    &.fullscreenCover,
    &.fullscreenContain{
        .inner{
            &, picture, img, video{
                height: 100dvh;
                width: 100%;
            }
        }
    }

    &.fullscreenCover{
        .inner{
            img, video{
                object-fit: cover;
            }
        }

        &.containInPortraitMode{
            @media (orientation: portrait){
                img, video{
                    object-fit: contain;
                }
            }
        }
    }

    &.fullscreenContain{
        .inner{
            img, video{
                object-fit: contain;
            }
        }
    }

    &.large,
    &.medium,
    &.small{
        --size-block: 75%;
        --size-inline: 75%;

        .inner{
            height: 100%;
            max-height: 100vh;

            display: grid;
            place-content: center;
            grid-template: var( --size-block ) / var( --size-inline );

            picture, img, video{
                height: 100%;
                object-fit: contain;
                object-position: center center;
            }
        }
    }

    &.medium{
        --size-block: 50%;
        --size-inline: 60%;
    }

    &.small{
        --size-block: 30%;
        --size-inline: 50%;
    }

    &.cols1,
    &.cols2,
    &.cols3,
    &.cols4,
    &.cols5{
        display: grid;
        place-content: center;

        --gap: 2rem;
        --rows-template: 1fr;

        @media (max-width: 800px){
            --gap: 1rem;
        }

        .inner{
            margin-inline: auto;

            display: grid;
            grid-template-columns: repeat( var( --cols, 2 ), minmax(0,1fr) );
            grid-template-rows: var( --rows-template, auto);

            gap: var( --gap, 0 );

            align-content: center;
            align-items: center;

            padding: var( --marginBlock ) var( --padding );

            picture, img, video{
                /* height: 100%;
                width: 100%;
                object-fit: contain;

                contain: size; */

                object-position: var( --pos-inline, center ) var( --pos-block, center );
            }

            @media (max-width: 800px){
                margin-block: 2lh;
            }
        }
    }

    &.cols1{
        --cols: 1;

        &[data-images="2"]{ --rows-template: 1fr 1fr; }
        &[data-images="3"]{ --rows-template: 1fr 1fr 1fr; }
    }

    &.cols2{
        --cols: 2;

        &[data-images="3"], &[data-images="4"]{ --rows-template: 1fr 1fr; }
        &[data-images="5"], &[data-images="6"]{ --rows-template: 1fr 1fr 1fr; }

        /*
            zwei bilder nebeneinander sollen nicht
            größer sein als medium bilder
         */
        &[data-images="2"]{
            .inner{
                height: 50%;
                padding-block: 0;

                picture, img{
                    height: 100%;
                    width: 100%;
                    object-fit: contain;
                }

                picture{
                    max-height: 50vh;

                    &:nth-of-type(1){
                        --pos-inline: right;
                    }

                    &:nth-of-type(2){
                        --pos-inline: left;
                    }
                }

                img{
                    contain: size;
                }
            }
        }
    }

    &.cols3{
        --cols: 3;

        &[data-images="4"], &[data-images="5"], &[data-images="6"]{ --rows-template: 1fr 1fr; }
        &[data-images="7"], &[data-images="8"], &[data-images="9"]{ --rows-template: 1fr 1fr 1fr; }
        &[data-images="10"], &[data-images="11"], &[data-images="12"]{ --rows-template: 1fr 1fr 1fr; }
        &[data-images="13"], &[data-images="14"], &[data-images="15"]{ --rows-template: 1fr 1fr 1fr; }

    }

    &.cols4{
        --cols: 4;

        &[data-images="5"], &[data-images="6"], &[data-images="7"], &[data-images="8"]{ --rows-template: 1fr 1fr; }
        &[data-images="9"], &[data-images="10"], &[data-images="11"], &[data-images="12"]{ --rows-template: 1fr 1fr 1fr; }
        &[data-images="13"], &[data-images="14"], &[data-images="15"], &[data-images="16"]{ --rows-template: 1fr 1fr 1fr 1fr; }
        &[data-images="17"], &[data-images="18"], &[data-images="19"], &[data-images="20"]{ --rows-template: 1fr 1fr 1fr 1fr 1fr; }
    }

    &.cols5{
        --cols: 5;

        &[data-images="6"], &[data-images="7"], &[data-images="8"], &[data-images="9"], &[data-images="10"]{ --rows-template: 1fr 1fr; }
        &[data-images="11"], &[data-images="12"], &[data-images="13"], &[data-images="14"], &[data-images="15"]{ --rows-template: 1fr 1fr 1fr; }
        &[data-images="16"], &[data-images="17"], &[data-images="18"], &[data-images="19"], &[data-images="20"]{ --rows-template: 1fr 1fr 1fr 1fr; }
        &[data-images="21"], &[data-images="22"], &[data-images="23"], &[data-images="24"], &[data-images="25"]{ --rows-template: 1fr 1fr 1fr 1fr 1fr; }
    }

    .project &{
        &:not(.swiper-slide-active):not(.swiper-slide-prev):not(.swiper-slide-next){
            img{
                display: none;
            }
        }
    }
}

.overview,
.category{
    main{
        min-height: 100dvh;
        display: grid;
        place-content: center;

    }
}

.overview{
    @media (max-width: 800px){
        #main{
            margin-top: 2lh;
        }
    }
}

.list{
    display: flex;
    flex-direction: column;
    gap: 1em;
    list-style-type: "";
    padding: 0;
    margin: var( --marginBlock ) var( --padding );

    li:has(.overline){
        margin-top: .25em;

    }

    /*
    &:has(.overline){
        gap: 1.5em;

        @media (max-width: 800px){
            gap: 2em;
        }
    }
    */


}

a.bg-color-link{
    position: relative;
    background-color: var( --c1 );
    transition: background-color 0.2s ease-out, color 0.2s ease-out;

    padding-bottom: var( --link-background-padding );
    line-height: 1;

    text-decoration: none;

    display: block;
    color: black;

    @supports(text-box: trim-both cap alphabetic){
        text-box: trim-both cap alphabetic;
    }

    &:hover{
        background-color: var( --color, var( --c2 ) );
        color: var( --projectTextColor, black );
    }

    .link-text{
        translate: 0 -0.05em;
        display: inline-block;

        @media (max-width: 800px){
            translate: 0 -0.15em;
        }

        @supports(text-box: trim-both cap alphabetic){
            display: inline; /* inline block wird nur für translate benötigt */
            translate: 0 0;
        }
    }

    & > img{
        height: 1cap;
        width: auto;
        display: inline-block;
        translate: 0 -0.05em;

        @supports(text-box: trim-both cap alphabetic){
            translate: 0 0;
        }
    }

    &:has(.overline){
        .overline{
            position: absolute;
            top: -2em;
            color: var( --projectTextColor, currentColor );
        }
    }

    @media (max-width: 800px){
        line-height: 1.125;
    }
}

.current{
    background-color: var( --c1 );
    padding-bottom: var( --link-background-padding );
    line-height: 1;
    text-decoration: none;
    color: black;
    position: relative;

    @media (max-width: 800px){
        padding: 0;
        background-color: transparent;

        &::after{
            content: "/";
            position: absolute;
            right: -1.5ch;
        }

        .project &,
        .about &,
        .contact &{
            &::after{
                display: none;
            }
        }
    }
}


.project{

    &:has(.swiper-slide-active.invert-header){
        #main-header{
            color: white;

            .current{
                background-color: color-mix( in srgb, var( --c1 ), transparent 75%);
                color: white;
            }
        }

    }

    &:has(.swiper-slide-active.invert-footer){
        footer{
            color: white;
        }
    }

    #main{
        position: fixed;
        inset: 0;
        height: 100dvh;
    }


    .intro,
    .outro{
        position: absolute;
        inset: 0;
        z-index: 2;

        height: 100%;
        display: grid;
        padding: var( --padding );

        & > *:not(.bg){
            z-index: 2;
        }

        h1{
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .text{
            display: flex;
            flex-direction: column;
            justify-content: end;

            @media (max-width: 800px){
                padding-bottom: 3lh;
            }
        }

        .bg{
            position: absolute;
            inset: 0;
            background-color: var( --projectColor );
            opacity: .8;
        }
    }

    .intro{
        color: var( --projectTextColor, black );
        grid-template-rows: 1fr 1fr;
    }

    .outro{
        place-content: center;

        a{
            .overline{
                --projectTextColor: currentColor;
            }
        }
    }


    footer{
        position: absolute;
        z-index: 3;
        bottom: 0.5rem;
        text-align: center;
        left: var( --padding );
        right: var( --padding );

        display: flex;
        justify-content: center;
        gap: 3ch;

        .pagination{
            width: max-content;
        }

        @media (max-width: 800px){
            bottom: 2lh;
        }
    }

    @media (max-width: 800px){
        &:has(.swiper-slide:first-child.swiper-slide-active){
            #main-header .breadcrumbs{
                visibility: hidden;
            }
        }
    }

    .swiper-slide{
        display: grid;
        align-items: center;
        grid-template: 1fr / 1fr;
    }

    .swiper-slide:has(.outro):not(.activate-click){
        .outro a{
            pointer-events: none;
        }
    }

    &:has(.swiper-slide:first-child.swiper-slide-active),
    &:has(.swiper-slide:last-child.swiper-slide-active){
        footer .caption{
            display: none;
        }
    }

    .caption{
        &:empty{
            margin-left: -3ch;
        }
    }
}

.about,
.contact{

    --bgColor: black;
    --textColor: white;

    #main-header{
        .current{
            color: black;
        }

        .breadcrumbs{
            opacity: 0.8;
        }
    }

    #main{
        min-height: 100dvh;
        display: grid;

        align-content: center;
        padding:  var( --marginBlock ) var( --padding );

        @media (max-width: 800px){
            margin-top: 2lh;
        }
    }

    .inner{
        p + p{
            margin-top: 1lh;
        }

        a{
            text-decoration: none;
            color: #ccc;

            &:hover{
                color: red;
            }
        }
    }
}

.contact{
    #main .inner{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4lh 2em;

        @media (max-width: 850px){
            grid-template-columns: 1fr;
        }
    }
}

@media (prefers-reduced-motion: no-preference) {
    @view-transition {
        navigation: auto;
    }
}

.overview,
.category{
    #main{
        view-transition-name: main-content;
    }
}

/*
::view-transition-old(main-content) {
    animation: 500ms ease-out both slide-out;
}

::view-transition-new(main-content) {
    animation: 500ms ease-out both slide-in;
}

 */

@keyframes slide-out-left {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    50%{
        opacity: 0;
    }
    100% {
        transform: translateX(-100%);
        opacity: 0;
    }
}

@keyframes slide-in-left {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slide-out-right {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    50%{
        opacity: 0;
    }
    100% {
        transform: translateX(100%);
        opacity: 0;
    }
}

@keyframes slide-in-right {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

html:active-view-transition-type(forward) {
    &::view-transition-old(main-content) {
        animation: 400ms ease-out both slide-out-left;
    }
    &::view-transition-new(main-content) {
        animation: 400ms ease-out both slide-in-left;
    }
}

html:active-view-transition-type(backward) {
    &::view-transition-old(main-content) {
        animation: 400ms ease-out both slide-out-right;
    }
    &::view-transition-new(main-content) {
        animation: 400ms ease-out both slide-in-right;
    }
}

.edit-link{
    position: fixed;
    z-index: 100;
    padding: 0.5rem;
}