/* Reset  ********************************************** */


*, *::before, *::after{
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

a {
    text-decoration-skip-ink: auto;
    color: #000;
}



a:hover {
    color: #000;
}


ul {
    list-style-type: square;
}

img, picture, svg, video, canvas{
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

input, button, textarea, select{
    font: inherit;
}


body, html{
    width: 100%;
    overflow-x: hidden;
    min-height: 100%;
    scroll-behavior: smooth;
}






/* General  ********************************************** */

:root {
    font-size: 16px;
    scroll-behavior: smooth;
    font-family: 'Inter', Arial, Helvetica, sans-serif;
}

:root {
    --pm: 5.5rem;
}

@media(max-width: 1025px) { :root { --pm: 4rem; } }
@media(max-width: 576px) { :root { --pm: 2rem; } }






/* Main content ********************************************** */



section {
    margin: 0;
    margin-top: var(--pm);
    padding: var(--pm);
    scroll-margin-top: 15vh;
    width: 100%;
    position: relative;
}

.narrow {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 1300px;
}

.withbg {
    background-color: #eeeeef;
    background-color: #fefefe;
    background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23888888' fill-opacity='0.4' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
}


h1 {
    font-size: clamp(1.8rem, 5vw, 6rem);
    margin-bottom: 2rem;
}

h2 {
    font-size: max(2.2rem, 2.8vw);
    margin-bottom: 1.5rem;
}

h3 {
    font-size: max(1.8rem, 2.3vw);
    margin-bottom: 1.5rem;
}


h4, h5 {
    font-size: 1.3rem;
    color: #222;
    margin-bottom: 1rem;
    margin-top: 2rem;
}





.roofline {
    display: block;
    font-size: max(0.4em, 0.8rem);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #444;
    margin-bottom: 0.5rem;
}



p {
    margin-bottom: 1rem;
}


ul {
    margin-bottom: 1rem;
    padding-left: 2rem;
}

li {
    margin-bottom: 1rem;
}



.hlist {
    padding: 0;
}

.hlist li {
    padding: 1.5rem 0;
    margin: 0;
    list-style-type: none;
}

.hlist li::before {
    content: '';
    border-bottom: 2px solid #444;
    width: 3rem;
    top: -1rem;
    position: relative;
    display: block;
}

.hlist li strong {
    font-size: 1.2em;
    display: block;
    margin-bottom: 0.25rem;
}





.copytext {
    font-size: 1.3rem;
    line-height: 1.8rem;
}

@media(max-width: 1201px) {
    .copytext {
        font-size: 1rem;
        line-height: 1.4rem;
    }
}


.bordertop {
    border-top: 1px solid #ccc;
}

.mt0 {
    margin-top: 0;
}

.mtm {
    margin-top: 2rem;
}

.mtl {
    margin-top: 4rem;
}


.sw {
    max-width: 960px;
}


.cols {
    display: flex;
    flex-wrap: wrap;
    gap: 0 4rem;
}

.cols2 > * {
    width: calc((100% - 4rem) / 2);
}

.cols3 > * {
    width: calc((100% - 8rem) / 3);
}

@media(max-width: 769px) {

    .cols {
        display: block;
        gap: unset;
        max-width: 100%;
    }

    .cols > * {
        width: unset;
    }

}


.revealBtn {
    cursor: pointer;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: inline-block;

    background-color: #000;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='16'%3E%3C/line%3E%3Cline x1='8' y1='12' x2='16' y2='12'%3E%3C/line%3E%3C/svg%3E");
    background-position: 12px center;
    background-repeat: no-repeat;

    padding: 0 1rem 0 2.5rem;
    font-size: 0.9rem;
    color: #fff;

    border-radius: 4px;
    text-wrap-mode: nowrap;

    height: 2rem;
    display: flex;
    width: fit-content;
    align-items: center;
}

@media (hover: hover) and (pointer: fine) {
    .revealBtn:hover {
        background-color: #444;
    }
}

.revealBtn.open {
    width: 2.5rem;
    padding: 0;
    color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='8' y1='12' x2='16' y2='12'%3E%3C/line%3E%3C/svg%3E");
}

.reveal > div {    
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 1s ease-in-out;
}

.reveal.open > div {
    grid-template-rows: 1fr;
    padding-bottom: var(--pm);
}

.reveal > div > div {
    overflow: hidden;
}


.scol {
    display: flex;
    gap: 4rem;
}

.scol > div:first-child {
    flex: 2 1 50%;
}

.scol > div:last-child {
    flex: 1 1 50%;
}

.scol > div:last-child > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    box-shadow: 0px 0px 30px #55555555;
}


@media (max-width: 769px) {
    .scol {
        display: flex;
        gap: 2rem;
        flex-direction: column-reverse;
    }
}



/* Fact boxes ********************************************** */

#facts ul {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    gap: 2rem;
    list-style-type: none;
    word-wrap: break-word;
}

#facts li {
    color: #000;
    width: calc((100% - (2 * 2rem)) / 3);
    background-color: #fff;
    padding: 1.5rem;
    margin: 0;
    aspect-ratio: 16 / 9;
}

#facts li.img { 
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    filter: saturate(50%);
}

#facts li:first-child { 
    color: #fff;
    text-shadow: 0 0 5px #333333aa;
}

#facts li > strong {
    display: block;
    font-size: 2.8rem;
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 3rem;
}

#facts li > strong.long {
    font-size: 1.4rem;
    line-height: 1.5rem;
}

#facts li .copytext {
    font-size: 1.1rem;
    line-height: calc(1.1rem * 1.4);
}

@media(max-width: 1201px) {
    #facts li { 
        width: calc((100% - 2rem) / 2);
    }
}

@media(max-width: 769px) {
    #facts li { 
        width: 100%;
    }
}






/* GSAP  ********************************************** */

.gsap-marker-marker-start,
.gsap-marker-marker-end,
.gsap-marker-scroller-start,
.gsap-marker-scroller-end {
    z-index: 9999999999999 !important;
}







/* Header and menu  ********************************************** */

header {
    position: fixed;
    z-index: 7000;
    top: 0;
    left: 0;
    width: 100%;
    height: 8rem;
    padding: 0 var(--pm);
    padding-top: 2rem;
    background-color: #ffffffee;
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    transition: height 150ms ease-in-out;
    transition-property: height, padding-top;
}

header.compact {
    padding-top: 0;
    height: 4rem;
    background-color: #ffffffee;
}

#logo {
    display: block;
    height: 2.5rem;
    aspect-ratio: 500 / 90;
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' id='Ebene_3' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='500px' height='90px' viewBox='0 0 500 90' enable-background='new 0 0 500 90' xml:space='preserve'%3E%3Cg%3E%3Cpath fill='%23333333' d='M19.75,45.292c0,14.875,11.833,28.166,39.167,28.166c31.833,0,35.666-17.666,35.666-17.666h10 c0,0-3.666,25-45.5,25c-44,0-48.666-27.625-48.666-35.5s4.666-35.5,48.666-35.5c41.834,0,44.667,22.667,44.667,22.667h-10 c0,0-3-15.333-34.833-15.333C31.583,17.125,19.75,30.417,19.75,45.292z'/%3E%3Cpath fill='%23EC7404' d='M188.25,17.417h-67.167v-7h67.167V17.417z M188.25,73.209h-67.167v7h67.167V73.209z M180.083,40.563H129.25 v7h50.833V40.563z'/%3E%3Cpath fill='%23333333' d='M268.583,43.167c0,0,15.25-2.604,15.25-15.375c0-13.125-12-17.375-24-17.375h-54.75v69.791h53.271 c16.417,0,29.254-8.082,29.254-19.563C287.607,44.625,268.583,43.167,268.583,43.167z M215.083,17.417h40.834 c11.166,0,18.291,2.457,18.291,10.62v0.005c0,9.625-10.082,12.521-18.291,12.521h-40.834V17.417z M255.75,73.209 c-5.5,0-40.667,0-40.667,0V47.563c0,0,33.334,0,41.167,0s20.833,0.396,20.833,12.729S261.25,73.209,255.75,73.209z'/%3E%3Cpath fill='%23333333' d='M314.583,80.208V49.563c0,0,30.708,0,38.542,0c9.791,0,20.833,3.312,20.833,12.729v17.916h9.375V62.645 c0-16.019-15.167-16.353-15.167-16.353S385,42.542,385,28.792c0-13.125-12-18.375-24-18.375h-56.417v69.791H314.583z M314.583,17.417h42.501c11.166,0,17.749,3.457,17.749,11.62v0.005c0,9.625-9.54,13.521-17.749,13.521h-42.501V17.417z'/%3E%3Cpath fill='%23333333' d='M448.708,10.417h-11.625l-40.875,69.791h10.36l12.162-20.77h48.328l12.164,20.77h10.36L448.708,10.417z M422.83,52.438l20.063-34.261l20.066,34.261H422.83z'/%3E%3C/g%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: height 150ms ease-in-out;
}


header.compact #logo {
    height: 1.5rem;
}

#mobilemenu {
    display: none;
}

#menu {
    flex: 1;
    text-align: right;
}

#menu a, #menu span {
    position: relative;
    display: inline-block;
    margin-left: 3vw;
    color: #000;
    font-size: 1.3rem;
    text-decoration: none;
    padding: 6px 0px 4px 0px;
    outline: none;
}

#menu a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    width: 0;
    transform: translateX(-50%);
    border-bottom: 2px solid #000;
    transition: width 200ms ease-in-out;
}

#menu a.active::after {
    width: 1rem;
}

@media (hover: hover) and (pointer: fine) {
    #menu a:hover::after {
        width: 98%;
    }
}

#menu span {
    color: #999;
}

#toggleMenu {
    display: none;
}


@media (max-width: 1201px) {
    #menu a, #menu span {
        font-size: 1.2rem;
    }
}


@media (max-width: 1025px) {

    header {
        position: absolute;
        height: 6rem;
        backdrop-filter: unset;
    }

    header.compact {
        height: 6rem;
        padding-top: 2rem;
        background-color: #ffffffee;
    }

    #logo {
        height: 2.0rem;
    }

    header.compact #logo {
        height: 2.0rem;
    }    

    #toggleMenu {
        position: fixed;
        display: block;
        z-index: 9000;
        top: 2.75rem;
        right: min(calc(var(--pm) - 0.5rem), 2rem);
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 2px;
        background-color: #ffffff99;
        background-image: url(../images/menu.svg);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 60%;
        cursor: pointer;
        transform: rotateZ(0deg);
        transition: transform 200ms ease-in-out;
        transition-property: transform, top;
    }

    .menuOpen #toggleMenu {
        transform: rotateZ(90deg);
        background-image: url(../images/close.svg);
        background-color: #000;
    }

    #menu {
        display: none;
    }


    #mobilemenu {
        position: fixed;
        z-index: 8000;
        top: 0;
        right: 0;
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        transform: translateX(100%);
        background-color: #000;
        display: flex;
        flex-direction: column;
        justify-content: center;
        transition: transform 500ms ease-in-out;
    }

    .menuOpen #mobilemenu {
        display: flex;
        transform: translateX(0%);
    }

    #mmlogo {
        position: absolute;
        left: 20vw;
        top: 3.75rem;
        display: block;
        height: 1rem;
        aspect-ratio: 500 / 90;
        background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' id='Ebene_3' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='500px' height='90px' viewBox='0 0 500 90' enable-background='new 0 0 500 90' xml:space='preserve'%3E%3Cg%3E%3Cpath fill='%23888888' d='M19.75,45.292c0,14.875,11.833,28.166,39.167,28.166c31.833,0,35.666-17.666,35.666-17.666h10 c0,0-3.666,25-45.5,25c-44,0-48.666-27.625-48.666-35.5s4.666-35.5,48.666-35.5c41.834,0,44.667,22.667,44.667,22.667h-10 c0,0-3-15.333-34.833-15.333C31.583,17.125,19.75,30.417,19.75,45.292z'/%3E%3Cpath fill='%23888888' d='M188.25,17.417h-67.167v-7h67.167V17.417z M188.25,73.209h-67.167v7h67.167V73.209z M180.083,40.563H129.25 v7h50.833V40.563z'/%3E%3Cpath fill='%23888888' d='M268.583,43.167c0,0,15.25-2.604,15.25-15.375c0-13.125-12-17.375-24-17.375h-54.75v69.791h53.271 c16.417,0,29.254-8.082,29.254-19.563C287.607,44.625,268.583,43.167,268.583,43.167z M215.083,17.417h40.834 c11.166,0,18.291,2.457,18.291,10.62v0.005c0,9.625-10.082,12.521-18.291,12.521h-40.834V17.417z M255.75,73.209 c-5.5,0-40.667,0-40.667,0V47.563c0,0,33.334,0,41.167,0s20.833,0.396,20.833,12.729S261.25,73.209,255.75,73.209z'/%3E%3Cpath fill='%23888888' d='M314.583,80.208V49.563c0,0,30.708,0,38.542,0c9.791,0,20.833,3.312,20.833,12.729v17.916h9.375V62.645 c0-16.019-15.167-16.353-15.167-16.353S385,42.542,385,28.792c0-13.125-12-18.375-24-18.375h-56.417v69.791H314.583z M314.583,17.417h42.501c11.166,0,17.749,3.457,17.749,11.62v0.005c0,9.625-9.54,13.521-17.749,13.521h-42.501V17.417z'/%3E%3Cpath fill='%23888888' d='M448.708,10.417h-11.625l-40.875,69.791h10.36l12.162-20.77h48.328l12.164,20.77h10.36L448.708,10.417z M422.83,52.438l20.063-34.261l20.066,34.261H422.83z'/%3E%3C/g%3E%3C/svg%3E");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

    #mobilemenu > a {
        display: block;
        width: fit-content;
        padding: 1.1vh 1rem 1.1vh 20vw;
        font-size: clamp(2rem, 5vw, 5vh);
        color: #fff;
        text-decoration: none;
        outline: none;
    }

    #mobilemenu #mobilelang {
        margin-top: 2rem;
        padding: 1.1vh 1rem 1.1vh 20vw;
        color: #fff;
    }

    #mobilemenu #mobilelang a,
    #mobilemenu #mobilelang span {
        display: inline-block;
        margin-right: 1rem;
        font-size: calc(clamp(2rem, 5vw, 5vh) * 0.6);
        color: #fff;
        text-decoration: none;
        outline: none;
    }

    #mobilemenu #mobilelang span {
        border-bottom: 2px solid #fff;
    }

    @media (hover: hover) and (pointer: fine) {
        #mobilemenu a:hover {
            color: #999;
        }
    }    

    a#mmfooterlink {
        position: absolute;
        left: 20vw;
        bottom: 3.75rem;
        display: block;
        font-size: 0.8rem;
        color: #888;
        padding: 0;
    }
}


@media (max-width: 1025px) and (orientation: landscape) {
    .menuOpen #mobilemenu {
        flex-direction: row;
        flex-wrap: wrap;
        align-content: center;
        justify-content: flex-start;
        padding: 0 var(--pm);
    }

    #mmlogo {
        left: var(--pm);
    }

    #mobilemenu > a {
        padding: 1rem 2rem 1rem 0;
    }

    a#mmfooterlink {
        left: var(--pm);
        bottom: 2rem;
    }

}






/* Top link  ********************************************** */

#toplink{
    position: fixed;
    display: block;
    z-index: 6000;
    bottom: 2rem;
    right: min(calc(var(--pm) - 0.5rem), 2rem);
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 2px;
    background-color: #ffffff99;
    background-image: url(../images/arrow-up.svg);
    transform: rotateX(90deg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 60%;
    cursor: pointer;
    transform: rotateZ(0deg);
    transition: transform 200ms ease-in-out;
    transition-property: transform, top;
}






/* Top section  ********************************************** */

@media (orientation: portrait) {

    body {
        padding-top: 0;
    }

    #topsection {        
        height: auto;
    }
}




/* Header services  ********************************************** */


#headerservices {
    padding: max(30vh, calc((var(--pm) * 1.2) + 8rem)) var(--pm) var(--pm) var(--pm);
    margin: 0;
    font-weight: 200;
}

@media (max-height: 576px) {
    #headerservices {
        padding: calc(10rem) var(--pm) var(--pm) var(--pm);
    }
}

#headerservices span {
    display: inline-block;
    transform: translateY(100%);
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
}


@media (orientation: portrait) {
    #headerservices-outer {
        position: relative;
        height: 50vh;
        height: 50svh;
    }
    #headerservices {
        position: absolute;
        bottom: 0;
        padding: 0 var(--pm) var(--pm) var(--pm);
        margin: 0;
        font-size: max(5vw, 1.8rem);
        font-weight: 200;
    }
}





/* Header slider  ********************************************** */

#headerslider {
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 80vh;
    max-height: 80svh;
    background-color: #000;
    position: relative;
    overflow: hidden;
}


@media (orientation: portrait) {
    #headerslider {
        min-height: 50vh;
        min-height: 50svh;
    }
}

.headerslide  {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s linear;
    overflow: hidden;
}

.headerslide.active {
    opacity: 1;
}

#headerslider.noAutoplay .headerslide {
    transition: unset;
}


.headerslide img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    transform: scale(1);
    transition: transform 15s linear;
}

.headerslide .imgtop img {
    object-position: center top;
}

.headerslide .imgbottom img {
    object-position: center bottom;
}

.headerslide.active img {
    transform: scale(1.2);
}

#headerslider.noAutoplay .headerslide img {
    transition: unset;
}

#headerslider.noAutoplay .headerslide.active img {
    transform: scale(1);
}

.headerslide .headerslideInfo {
    background-color: #00000099;
    position: absolute;
    bottom: 0;
    right: var(--pm);
    left: calc(var(--pm) + (2.5rem * 2));
    height: 2.5rem;
    padding: 0;
    padding-left: 0.5rem;
    font-size: clamp(0.7rem, 3vw, 1rem);
    color: #fff;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.headerslide .headerslideInfo strong {
    font-weight: 700;
}

.headerslide .creator {
    position: absolute;
    right: 10px;
    bottom: 1rem;
    transform: rotate(-90deg) translateX(100%);
    color: #fff;
    opacity: 0.8;
    text-shadow: 2px 2px 4px #000;
    transform-origin: bottom right;
    font-size: 10px;
    font-weight: 200;
}


#headersliderControls div {
    position: absolute;
    bottom: 0;
    height: 2.5rem;
    width: 2.5rem;
    background-color: #00000099;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 50%;
    cursor: pointer;
}

#headersliderPrev {
    background-image: url(../images/arrow-left.svg);
    left: var(--pm);
}

#headersliderNext {
    background-image: url(../images/arrow-right.svg);
    left: calc(var(--pm) + 2.5rem);
}







/* Claim  ********************************************** */


#claim {
    font-size: max(2.3vw, 1.5rem);
    font-weight: 200;
    color: #444;
    overflow: hidden;
}

#claim > div {
    transform: translateY(80px);
    opacity: 0;
}

#claim span {
    font-weight: 700;
    color: #000;
}








/* Projectlist  ********************************************** */

.projectswrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 3.5rem 1rem;
    align-content: flex-start;
    justify-content: flex-start;
    align-items: stretch;
    margin-top: var(--pm);
}

.projectswrapper .project {
    position: relative;
    background-color: #fff;
    cursor: pointer;
    flex-shrink: 0;
    flex-grow: 0;
    flex-basis: calc((100% - 3rem) / 4);
}


@media (max-width: 1201px) {
    .projectswrapper .project {
        flex-basis: calc((100% - 2rem) / 3);
    }
}

@media (max-width: 769px) {
    .projectswrapper .project {
        flex-basis: calc((100% - 1rem) / 2);
    }
}

@media (max-width: 576px) {
    .projectswrapper .project{
        flex-basis: 100%;
    }
}


.projectswrapper .projectimage {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    position: relative;
}

.projectswrapper img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    pointer-events: none;
    transform: scale(1);
    transition: transform 200ms ease-in-out;
}

.projectswrapper .projectimage picture:last-child {
    display: none;
}

.projectswrapper .imagecreator {
    position: absolute;
    bottom: 0.5rem;
    right:  0.5rem;
    text-align: right;
    color: #fff;
    font-size: 0.5rem;
    text-shadow: 0 0 3px #000;
    opacity: 0.8;
}


.projectswrapper .details {
    padding: 1rem 0;
    transform: translateY(0);
    transition: transform 200ms ease-in-out;
}

.projectswrapper .category,
.lbProjects .category {
    text-transform: uppercase;
    margin-bottom: 4px;
    font-size: 0.8rem;
    font-weight: bold;
    letter-spacing: 1px;
    color: #444;
}

.projectswrapper .title,
.lbProjects .title {
    margin-top: 6px;
    font-size: 1.25rem;
    font-weight: bold;
}

.projectswrapper .subline,
.lbProjects .subline {
    margin-top: 10px;
    color: #777;
    font-size: 0.8rem;
}

.projectswrapper .subline span,
.lbProjects .subline span {
   display: inline-block;
   margin-right: 1rem;
   padding-left: 1rem;
   background-repeat: no-repeat;
   background-position: 0 50%;
}

.projectswrapper .subline span.location,
.lbProjects .subline span.location {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23555555' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'%3E%3C/path%3E%3Ccircle cx='12' cy='10' r='3'%3E%3C/circle%3E%3C/svg%3E");
}

.projectswrapper .subline span.customer,
.lbProjects .subline span.customer {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23555555' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='12' cy='7' r='4'%3E%3C/circle%3E%3C/svg%3E");
}


.projectswrapper .projectplus {
    position: absolute;
    right: 1rem;
    top: 1rem;
    font-size: 1.5rem;
    color: #ffffffaa;
    text-shadow: 0 0 2px #000;
    display: flex;
    align-items: center;
    line-height: 1rem;
    pointer-events: none;
}


.moreprojects {
    margin: 3.5rem auto 0 auto;
    background-color: #000;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='16'%3E%3C/line%3E%3Cline x1='8' y1='12' x2='16' y2='12'%3E%3C/line%3E%3C/svg%3E");
    background-position: 12px center;
    background-repeat: no-repeat;
    padding: 8px 16px 8px 38px;
    font-size: 0.9rem;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    width: fit-content;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 4px;
    text-wrap-mode: nowrap;
}



@media (hover: hover) and (pointer: fine) {

    .projectswrapper .projectplus {
        opacity: 0;
    }

    .projectswrapper .project:hover .projectplus {
        opacity: 1;
    }

    .projectswrapper .project:hover .details {
        transform: translateY(2%);
    }
    .projectswrapper .project:hover img {
        transform: scale(1.05);
    }

    .moreprojects:hover {
        background-color: #444;
    }
}




.lbProjects {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    background-color: #000;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    pointer-events: none;
    opacity: 0;
    transform: scale(0);
    transition: opacity 200ms linear;
    transition-property: transform;
}

.lbProjects.open {
    opacity: 1;
    transform: scale(1);
    pointer-events: all;
}


@media (orientation: portrait) {
    .lbProjects {
        background-size: contain;
    }
}

.lbProjects .lbFooter {
    position: absolute;
    left: 2rem;
    bottom: 0;
    width: 25rem;
    max-width: calc(100% - 4rem);
}

@media (max-height: 576px) {
    .lbProjects .lbFooter {
        transform-origin: left bottom;
        transform: scale(0.8);
        left: 1.5rem;
        bottom: 0;
        width: 20rem;
    }
}

.lbProjects .details {
    padding: 1rem;
    background-color: #ffffff;
}


.lbProjects .lbControls {
    background-color: #888;
    height: 3rem;
    display: flex;
    gap: 1px;
}

.lbProjects .lbControls > div {
    background-color: #444;
    height: 100%;
    flex: 1;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 1.5rem;
    cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
    .lbProjects .lbControls > div:hover {
        background-color: #333;
    }    
}

.lbProjects .lbPrev {
    background-image: url(../images/arrow-left.svg);
}

.lbProjects .lbClose {
    background-image: url(../images/close.svg);
}

.lbProjects .lbNext {
    background-image: url(../images/arrow-right.svg);
}

.lbProjects .lbCreator {
    height: 2rem;
    color: #ffffff99;
    font-size: 0.7rem;
    text-shadow: 1px 1px 1px #000;
    display: flex;
    align-items: center;
}




/* Contact  ********************************************** */

#contact {
    scroll-margin-top: 0;
    padding-bottom: calc(var(--pm) * 2);
}

#contactcta {
    background-color: #fff; 
    padding: 2rem;
}

#contactcta h2 {
    margin: 0; 
}

#contactcta h3 {
    margin: 0; 
    margin-top: 0.5rem;
    font-weight: 200;
}

#contactcta h3 span {
    display: block;
}

#contact ul {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    gap: 2rem;
    list-style-type: none;
    word-wrap: break-word;
}

#contact li {
    color: #000;
    width: calc((100% - (2 * 2rem)) / 3);
    background-color: #fff;
    padding: 1.5rem;
    margin: 0;
}

#contact li h2 {
    font-size: calc(max(2.2rem, 2.8vw) * 0.5);
    line-height: 90%;
}


#contact li .copytext {
    font-size: 1.1rem;
    line-height: calc(1.1rem * 1.4);
}

@media(max-width: 1201px) {
    #contact li { 
        width: calc((100% - 2rem) / 2);
    }
}

@media(max-width: 769px) {

    #contact .mtl {
        margin-top: 2rem;
    }

    #contact h3 span {
        display: inline;
    }

    #contact li { 
        width: 100%;
    }
}





/* Footer  ********************************************** */

footer {
    margin: 0;
    padding: 2rem var(--pm) 2rem var(--pm);
    scroll-margin-top: 15vh;
    width: 100%;
    position: relative;
    background-color: #000;
    color: #fff;
}

footer a {
    color: #fff;
    display: inline-block;
    margin-right: 2rem;
    padding: 0.5rem 0 0.5rem 1.2rem;
    background-image: url(../images/arrow-right.svg);
    background-position: left center;
    background-repeat: no-repeat;
    background-size: 0.8rem;
    text-decoration: none;
}

footer a:hover {
    color: #fff;
}

@media (hover: hover) and (pointer: fine) {
    footer a:hover {
        color: #999;
    }
}

.legalinfo {
    display: none;
    padding-top: 0;
}

.legalinfo.open {
    display: block;
}




.footerback {
    cursor: pointer;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: inline-block;

    background-color: #000;
    background-image: url(../images/arrow-left.svg);
    background-position: 12px center;
    background-size: 1rem;
    background-repeat: no-repeat;


    margin-top: 3rem;
    margin-bottom: 3rem;
    padding: 0 1rem 0 2.5rem;
    font-size: 0.9rem;
    color: #fff;
    text-decoration: none;

    border-radius: 4px;
    text-wrap-mode: nowrap;

    height: 2rem;
    display: flex;
    width: fit-content;
    align-items: center;
}

@media (hover: hover) and (pointer: fine) {
    .footerback:hover {
        background-color: #444;
        color: #fff;
    }
}