main > section{
    margin-top:7.5rem;

    &:first-child{
        margin-top:15rem;
    }
}

.layout{
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;

    &.bg{
        background: #F5F5F5;
        padding: 2rem;
    }
}


/**************************HOME***************************/
html.home header{
    animation-delay: 2s;
}

body main > section.home{
    background:url('../img/bg.webp') no-repeat center center;
    background-size:cover;
    max-width: 100%;
    height: 100vh;
    height: 100dvh;
    display:flex;
    justify-content: end;
    flex-direction: column;
    padding:0;
    position: fixed;
    top:0;
    left:0;
    right:0;
    margin-top:0;
    overflow: hidden;

    & div{
        display:flex;
        flex-direction: row;
    }

    & h2{
        color:#fff;
        text-align: right;
        align-self: start;
        font-weight: 400;
        margin:-4rem  0 0 20rem;
		line-height: 2.5rem;
    }

    & h1{
        mix-blend-mode: exclusion;
        color: #fff;
        font-size: 20rem;
        margin:0;
        line-height: .8em;
        margin-left:-2rem;
        font-weight: 700;
        background:none;
        animation-name: titleAnimation;
        animation-delay: 1.5s;
        animation-fill-mode: forwards;
        animation-duration: 2s;
        -webkit-text-fill-color: initial;
        animation-iteration-count: 1;
    }

    & article > h1{
        text-align: right;
        font-size: 13rem;
        display:block;
        margin-bottom: 1rem;
        margin-right:-.3rem;
    }


    & .animation{
        width:100%;
        height:60%;
        position: absolute;
        top:0;
        left:0;
        right:0;

		& canvas{
			position: absolute;
			top:0;
			left:0;
			bottom:0;
		}
    }

    &::after,
    &::before{
        content:'welcome to systopia!';
		font-size:9rem;
        position: fixed;
        left:0;
        height:50.1%;
        right:0;
        z-index: 900;
        animation-delay: 0s, 1.2s, 1.6s;
        animation-duration: 0.5s, 1s, 1s;
        animation-fill-mode: forwards;
        background:var(--highlight);
        overflow: hidden;
		display:flex;
		justify-content: center;
		line-height: 0;
		color:var(--systopic);
		font-weight:600;
		transition: ease-in-out all;
    }

    &::before{
        top:0;
        animation-name:logoMoveIn, logoSlideUp, IntroOut;
		align-items: flex-end;
		line-height: 2rem;
		margin-right: -2rem;
    }

    &::after{
        animation-name:logoMoveIn, logoSlideDown, IntroOut;
        bottom:0;
		align-items: flex-start;
		height: calc(50% + 1rem);
		margin-left: -2rem;
    }

}

html.home aside{
	margin: 2rem;

	& a{
		color: #fff;
		font-size: 1.3rem;
		opacity: .7;

		&::before{
			filter: brightness(100);
			transform:rotate(0) translateY(.125rem);
		}
	}

	&.desktopOnly{
		text-align: right;
		position: absolute;
		right:0;
		margin-top:-3.5rem;
	}
}



/**************************TEAM***************************/
.team h4,
.partner h4{
    margin-top:.8rem;
}

.team  a{
    text-decoration: none;
}

div.team .threeTwelfths > div{
    position:relative;
    line-height:0;
    --noise-texture: url(../img/noise.png);
    --gif-texture: url(../img/noise.gif);

    &:after {
        content:'';
        display:block;
        position: absolute;
        background-image:var(--gif-texture);
        height: 100%;
        width: 100%;
        translate:0px 0px;
        background-repeat: no-repeat;
        background-position-y:-20px;
        background-size: cover;
        mix-blend-mode: screen;
        pointer-events: none;
        opacity: 64%;
        z-index: 3;
        top:0;
        left:0;
    }

    &:before {
        content: "";
        display: block;
        position: absolute;
        background-image:var(--noise-texture);
        height: 100%;
        width: 100%;
        mix-blend-mode: overlay;
        pointer-events: none;
        z-index: 3;
    }

}


/**************************Partner***************************/
section.partner > .layout:first-child{
    & h1, h2{
        margin-bottom: 0;
    }

    & h2{
        margin-top:auto;
    }
}

.partner p{
    margin-bottom: 1.4rem;
}

.partner .threeTwelfths > div{
    position:relative;
    margin-bottom:2rem;

    &:before{
        content: "";
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 100%;
        top: 1rem;
        left: 1rem;
        border-radius: inherit;
        background: repeating-linear-gradient(
            45deg,
            var(--systopic),
            var(--systopic) 2px,
            transparent 2px,
            transparent 6px
            );
        transition: all 0.3s ease;
    }

    &:hover::before {
        top: 1.5rem;
        left: 1.5rem;
    }
}


/**************************Marke***************************/
div.marke .layout{
    margin:1rem 0 2rem 0;
    padding:0 0  2rem 0;
    border-bottom: 1px solid darkgray;

    & a{
        font-weight: 500;
        text-decoration: none;
    }
}

div.marke .layout:last-of-type{
    border:none;
}


/**************************KUNDEN***********************/
div.logoItem {
    display:flex;
    justify-content: left;
    padding:2rem 0;
}

div.logoItem a{
    display:flex;
    justify-content: center;
}

div.logoItem svg {
    width: 100%;
    object-fit: contain;
}

div.logoItem a:not(:hover) svg * {
    fill: var(--highlight) !important;
    stroke: var(--bg-color) !important;
}

div.logoItem.nostroke a:not(:hover) svg * {
    stroke: initial !important;
}

div.logoItem.TU_Darmstadt a:not(:hover) svg * {
    stroke: none !important;
    fill: var(--highlight) !important;
}

div.logoItem.TU_Darmstadt a:not(:hover) svg #path11746 {
    stroke: var(--highlight) !important;
    fill: var(--highlight) !important;
}

div.logoItem.steiff a svg .st0_173 {
    stroke: none !important;
    fill: none !important;
}


div.logoItem.TU_Darmstadt a:not(:hover) svg #path11762,
div.logoItem.TU_Darmstadt a:not(:hover) svg #path11750,
div.logoItem.TU_Darmstadt a:not(:hover) svg #path11752,
div.logoItem.TU_Darmstadt a:not(:hover) svg #path11754,
div.logoItem.TU_Darmstadt a:not(:hover) svg #path11756,
div.logoItem.TU_Darmstadt a:not(:hover) svg #path11758,
div.logoItem.TU_Darmstadt a:not(:hover) svg #path11760,
div.logoItem.TU_Darmstadt a:not(:hover) svg #path11762 {
    fill: var(--highlight) !important;
}

div.logoItem.spacewood a:not(:hover) svg path.st1_45 {
    fill: var(--bg-color) !important;
    stroke: var(--highlight) !important;
}

div.logoItem.Wedo_-_Werner_Dorsch_GmbH_de svg .st3_9 {
    stroke: transparent;
}


/**************************PROJECTS***************************/
.projectTeaser{
    margin-bottom: 3rem;

    & h2{
        margin-top: 3rem;
        margin-bottom: .5rem;

        & *{
            font-weight: 600;
            font-size: 1.4rem;
        }
    }

    & p{
        color:var(--gray);
        margin-bottom: 0;
    }

    & .textOverflowCrop{
        height:6rem;
        position: relative;
    }

    & a{
        position: absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
    }
}

.projectTeaser .image{
    aspect-ratio: 16/9;
    background-size: 105%;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    transition: ease-in-out background-size .2s;

    & video{
        width:100%;
        height:100%;
        object-fit:cover;
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        opacity:0;
        transition:ease-in-out .2s opacity;
    }

    &::after{
        content:'';
        transition: ease-in-out all .2s;
        position: absolute;
        top:1rem;
        right:1rem;
        width:1rem;
        height:1rem;
        background:url(../img/chevron.svg) no-repeat top right / 100%;
        transform: rotate(45deg);
    }

    & > div.patchwork{
        width:100%;
        height:100%;
        object-fit:cover;
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        padding:0;

    }

    &:hover{
        background-size: 100%;
        &::after{
            top:2rem;
            right:2rem;
        }
    }
}


/**************************PROJECT***************************/
article.projectHeader{
    padding:7.5rem 2rem 2rem 2rem;
    width:100%;
    height:100vh;


    &.invert{
        & .image div.headline{
            filter:invert();
        }
    }


    & > .image{
        width:100%;
        height:100%;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        display:flex;
        flex: 0 0 100%;
        position:relative;
        overflow:hidden;

        & div.headline{
            align-self: end;
            padding:2rem;
            width: 100%;
            flex-basis: 100%;
            z-index:5;
        }

        & > div.patchwork{
            width:100%;
            height:100%;
            object-fit:cover;
            position:absolute;
            top:0;
            left:0;
            right:0;
            bottom:0;
            padding:0;

        }

        & video{
            width:100%;
            height:100%;
            object-fit:cover;
            position:absolute;
            top:0;
            left:0;
            right:0;
            bottom:0;
        }
    }

    & h3{
        color: #000;
    }
    & h1{
        color: #000;
        margin-bottom: 0;
        background:none;
        -webkit-text-fill-color: initial;
        width: 100%;
    }

    & h3{
        margin-bottom: 0;
    }

    & .tags{
        border:none;
        margin-bottom: 0rem;

        & a.tag{
            font-size: .65rem;
            text-transform: uppercase;
            padding:.3rem .9rem;
            background:rgba(0,0,0,.8);
            border-radius: 1rem;
            color:#fff;
            font-weight: 300;
            margin-right: .8rem;
            margin-bottom: .8rem;
            display:none;

            &[data-group_id="21"]{
                display:inline-block;
            }
        }
    }
}



article.projectHeader + article{
    background:#F5F5F5;
    padding:6rem 0 2rem;
    z-index:10;
    position:relative;

    & section{
        margin-top:0;
        margin-top: 7rem;


        & .text{
            margin-bottom: 7rem;
        }

        & > div{

            & > div > *:last-child{
                margin-bottom: 0;

            }

            & > div:not(:empty){
                margin-bottom: 3%;
            }

            &:last-child > div:not(:empty){
                margin-bottom:0;
            }

            & p, img{
                margin-bottom:0;
                margin-top:1rem;


                &:first-child{
                    margin-top:0;
                }

            }

            & img{
                margin-top:6%;
            }

            & img + br{
                display:none;

            }

            & p:empty{
                display:none;
            }
        }

    }
}


/**************************LESITUNGEN***************************/
.leistungen .nineTwelfths{
    column-count: 2;
}


@media (prefers-color-scheme: dark) {
    :root {
        --bg-color:#43434C;
    }

    body{
        background:#43434C;
        color:#f5f5f5;
    }

    a{
        color:#f5f5f5;
    }

    .tagFilter {
        & div.tags {
            & a.tag {
                color:#f5f5f5;
                &.active{
                    color:#f5f5f5;
                }
            }
        }
    }

    .layout{
        &.bg{
            background: #5D5D69;
        }
    }

    img[alt='logo_palestreet'],
    img[alt='logo_fluxo']{
        filter:invert();
    }

    .projectTeaser {
        & p {
            color:#f5f5f5;
        }
    }

    article.projectHeader + article{
        background: #3B3B3F;
    }
}