@font-face {
    font-family: "HaasText";
    src: url("NeueHaasTextRoman.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
}

html,
body {

    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    overflow: hidden;
    font-family: "HaasText", sans-serif;
    user-select: none;
    font-size: clamp(16px, 2.2vw, 36px);

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;

}

p {

    padding: 0px;
    margin: 0px;
    margin-block-start: 0px;
    margin-block-end: 0px;
    text-align: left;
    /* font-size: 1.8vw; */
    /* margin-top:-1vw; */
    vertical-align: top;

}

.credits {

    color: #9c9c9c;

}

.descriptionText {

    font-size: .7rem;

}

.extraText {

    white-space: pre-wrap;

}

#outerDiv {

    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    overflow: auto;
    overflow-y: scroll;
    text-align: center;
    overscroll-behavior: none;

}

#sideDiv {

    position: absolute;
    top: 0px;
    left: 0px;
    width: 8%;
    height: 100%;
    text-align: right;
    z-index: 0;
    pointer-events: none;

}

#logo {

    will-change: top;
    position: relative;
    margin-left: 4vw;
    /* margin-top: min(7vw, 105px); */
    width: 10vw;
    max-width: 100px;
    z-index: 0;
    top: clamp(69px, 6vw, 72px);

}

#logoDiv {

    z-index: 0;

}

#mainDiv {

    position: relative;
    width: 80%;
    height: 100%;
    height: calc(100% - 69px);
    max-width: 1200px;
    display: inline-grid;
    /* align-items: center; */
    justify-items: center;
    z-index: 2;
    padding: 0px;
    margin: 0px;

}

#homePageDiv {

    display: block;
    width: 100%;

}

#mainContentDiv {

    width: 100%;
    height: 100%;
    display: grid;
    justify-items: center;
    gap: min(2vw, 24px);
    grid-template-rows: auto auto;

}

.fillerTop {

    height: min(7vw, 105px);

}

#menuOuterDiv {

    display: block;
    position: sticky;
    top: 0px;
    left: 0px;
    width: 100%;
    z-index: 99;
    user-select: none;
    text-align: center;
    font-size: clamp(24px, 2.2vw, 36px);
    height: clamp(69px, 6vw, 72px);
    /* transition: height 200ms; */

}

#testDiv {

    width: 100%;

}

#menuDiv {

    width: 80%;
    height: 100%;
    display: inline-grid;
    display: inline-flex;
    justify-content: space-between;
    align-content: center;
    flex-wrap: wrap;
    /* padding-top: min(2vw, 30px); */
    /* padding-bottom: min(2vw, 30px); */
    grid-template-columns: 2fr 1fr;
    grid-template-columns: auto auto;
    z-index: 99;
    /* transition: padding 200ms; */
    max-width: 1200px;
    background-color: #ffffff;

}

.menuLeftDiv {

    display: inline-grid;
    justify-self: end;
    grid-template-columns: 1fr 1fr;

}

#menuRightDiv {

    display: inline-flex;
    justify-self: start;
    grid-template-columns: 1fr;



}

#menuProjectenDiv {

    display: inline-block;
    grid-row: 1;
    justify-self: start;
    user-select: none;
    cursor: pointer;
    /* border-bottom: .2vw solid black; */

}


/* 
.menuAnimate:after {
    content: '';
    display: block;
    margin: auto;
    height: .18vw;
    width: 0px;
    margin-top: .05vw;
    background: transparent;
    transition: width .5s ease, background-color .5s ease;
}


.menuAnimate:hover:after {
    width: 100%;
    background: rgb(0, 0, 0);
} */

.menuAnimate {

    transition: color .5s ease, background-color .5s ease;

}

.menuAnimate:hover {

    color: rgb(119, 119, 119);

}


#projectMenuprojectenDiv {

    display: inline-block;
    grid-row: 1;
    justify-self: start;
    user-select: none;
    cursor: pointer;

}

#homeButton {

    height: clamp(22px, 2vw, 36px);
    vertical-align: middle;
}

#homeButtonDiv {

    height: fit-content;
    display: inline-block;
    display: none;
    cursor: pointer;
    user-select: none;

}

#menuTitelDiv {

    display: inline-block;
    user-select: none;
    cursor: pointer;
    text-align: left;
    text-wrap: nowrap;

}

#menuHomeDiv {

    display: inline-block;
    grid-row: 1;
    justify-self: start;
    user-select: none;
    cursor: pointer;

}

#menuContactDiv {

    display: inline-block;
    justify-self: end;
    grid-row: 1;
    user-select: none;
    cursor: pointer;

}

#homeWrapper {

    display: grid;
    gap: min(3vw, 45px);

}

.homeProjectDiv {

    display: grid;
    grid-column-start: 2;

}

.homeProjectTextOverlay {

    display: block;
    grid-column: 1 / 1;
    grid-row: 1 / 1;
    align-self: end;
    justify-self: start;
    color: #ffffff;
    margin: min(2vw, 24px);
    font-size: .8em;
    text-align: left;

}

.homeProjectImage {

    display: block;
    grid-column: 1 / 1;
    grid-row: 1 / 1;
    width: 100%;
    cursor: pointer;

}

#projectSelectionPageDiv {

    display: none;
    text-align: center;
    width: 100%;

}

#projectSelectionWrapper {

    display: inline-grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: min(3vw, 45px);
    width: 100%;
    justify-items: stretch;
    align-items: stretch;

}

.projectSelectionOuterDiv {

    margin: 0;
    display: inline-grid;
    /* grid-template-rows: 1fr auto; */
    /* margin-bottom: 30px; */
    break-inside: avoid;
    /* width:100%; */
    /* height: auto; */
    justify-items: stretch;
    align-items: stretch;

}

.projectSelectionDiv {

    /* width: 100%; */
    /* height: 100%; */
    display: inline-grid;
    min-height: 100px;
    cursor: pointer;
    overflow: hidden;
    /* height: 30vw; */
    justify-items: stretch;
    align-items: stretch;
    object-fit: cover;

}

.projectSelectionImage:hover {

    transform: scale(1.05);

}

.projectSelectionImage {

    will-change: transform;
    display: block;
    width: 100%;
    height: 100%;
    grid-column: 1;
    grid-row: 1;
    transition: transform 200ms;
    object-fit: cover;
    z-index: 0;
    height: 28vw;
    max-height: 450px;

}

.projectSelectionTitleOverlay {

    display: inline-grid;
    position: relative;
    width: 100%;
    height: 100%;
    font-size: .6em;
    color: #ffffff;
    grid-column: 1;
    grid-row: 1;
    justify-items: start;
    align-items: end;
    padding: min(2vw, 24px);
    padding-bottom: min(2vw, 24px);
    box-sizing: border-box;
    pointer-events: none;
    text-align: left;
    object-fit: contain;

}

#projectBottomDiv {

    width: 100%;
    height: 100%;
    font-size: .6em;
    grid-column-start: 2;

}

#projectPageDiv {

    display: none;
    text-align: center;
    width: 100%;

}

#projectWrapper {

    display: grid;
    gap: min(1.3vw, 19.5px);


}

#projectTextOuterDiv {

    display: inline-block;
    width: 100%;
    grid-column-start: 2;
    justify-items: start;
    align-items: end;
    text-align: left;

}

#projectTitleDiv {

    /* margin-top: max(-.5vw, -7px); */
    margin-top: -.2em;
    padding-bottom: min(.8vw, 12px);
    width: 100%;
    font-size: .8em;
    vertical-align: top;

}

#projectDienstverbandDiv {

    width: 100%;
    text-align: right;

}

#projectDescriptionDiv {

    text-align: left;
    font-size: .6em;
    width: 80%;

}

.projectPhoto {

    display: block;
    width: 100%;
    grid-column-start: 2;

}

#footer {

    display: inline-block;
    width: 100%;
    padding-bottom: clamp(12px, 2vw, 24px);
    text-align: right;
    user-select: none;
    font-size: .8em;
    margin-top: auto;
}

#grid {

    display: inline-grid;
    justify-self: end;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-start: 2;
    width: 100%;
    gap: min(2vw, 30px);
    overflow: hidden;
    justify-items: stretch;
    align-items: stretch;

}

.gridImage {

    display: block;
    width: 100%;
    height: 28vw;
    object-fit: cover;
    overflow: hidden;
    cursor: pointer;
    max-height: 420px;

}

.projectImage {

    display: inline-block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;

}

.homeProjectOuterDiv {

    display: inline-block;
    width: 100%;

}

.projectItemOuterDiv {

    display: block;
    width: 100%;

}

.projectDiv {

    display: inline-grid;
    width: 100%;
    height: 100%;
    grid-column-start: 2;
    padding-bottom: 30px;

}

.dienstverband {

    text-align: right;
    color: #9c9c9c;
    font-size: .7rem;
    padding-top: min(.6vw, 7.2px);

}

#projectExtraDiv {

    width: 75%;
    font-size: .6rem;
    padding-top: min(2vw, 24px);

}

#imageViewerOuterDiv {

    display: grid;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    z-index: 99;
    justify-items: center;
    align-items: center;
    display: none;
    padding: 0px;
    margin: 0px;
    background-color: #fafafae0;
    /* background-color: #ffffff; */
    /* backdrop-filter: blur(1px); */
    box-shadow: 0px 0px 15px rgb(157, 157, 157);

}

#imageViewerInnerDiv {

    position: absolute;
    left: min(4.4vw, 52.8px);
    /* top: min(4vw, 25.2px);
    top: clamp(26px, 2vw, 32px); */
    top: 0px;
    /* top: 26px; */
    left: 4.4vw;



    width: 91.2vw;
    height: 100%;
    display: grid;
    background-position: center;
    grid-template-columns: 1fr 8fr 1fr;
    grid-template-rows: auto 1fr;
    justify-items: center;
    align-items: center;

}

#imageViewerImageDiv {

    display: inline-grid;
    box-sizing: border-box;
    justify-items: center;
    align-items: center;

}

#imageViewerImage {

    position: relative;
    display: inline-block;
    height: 100%;
    width: 100%;

}

#closeImageViewerDiv {
    display: inline-block;
    padding: 0px;
    margin: 0px;
    justify-self: end;
    align-self: start;
    grid-column: 3;
    grid-row: 1;
    user-select: none;

}

#closeCross {
    padding-top: 28px;

    display: inline-block;
    width: clamp(16px, 1.5vw, 24px);

    height: auto;
    user-select: none;
    cursor: pointer;
    vertical-align: top;

}

#imageLeftDiv {

    justify-self: start;
    grid-row: 2;
    grid-column: 1;
    user-select: none;

}

#imageRightDiv {

    justify-self: end;
    align-self: center;
    grid-row: 2;
    grid-column: 3;
    user-select: none;

}

.arrow {
    width: clamp(36px, 4vw, 48px);
    cursor: pointer;
    filter: drop-shadow(0px 0px 16px rgb(255, 255, 255));
    filter: invert(20%);
    user-select: none;

}

#infoPageDiv {

    display: none;
    text-align: center;
    width: 100%;

}

#infoWrapper {

    display: inline-grid;
    gap: min(6vw, 72px);
    width: 100%;
    grid-template-columns: 1fr;

}

#contactDiv {

    font-size: .8em;
    color: black;

}

#contactTextDiv {

    align-self: center;

}

#contactDiv a {

    text-decoration: none;
    color: black;
    transition: color .5s ease, background-color .5s ease;

}

#contactDiv a:hover {

    color: rgb(119, 119, 119);

}

#contactTitleDiv {
    display: none;
}


#infoDiv {

    grid-row: 2;

}

#infoTextDiv {
    /* grid-column-start: 2; */

}

#infoDiv p {

    padding-bottom: min(1.2vw, 14.4px);


}

#clientsDiv {

    /* font-size: .8em; */
    padding-bottom: min(4vw, 48px);

}

#clientsTextDiv p {

    display: inline-block;
    padding-right: 1em;

}

#photoDiv {

    justify-self: start;
    grid-column: 1;
    grid-row: 1;

}

#infoPhoto {

    /* width: min(20vw, 240px); */
    width: 100%
}

.infoSection {

    display: inline-grid;
    grid-template-columns: min(22vw, 264px) auto;
    width: 100%;
    gap: min(4vw, 48px);

}

.infoBodyText {

    text-align: left;
    font-size: .6em;
    /* grid-column-start: 2; */
    text-wrap:pretty;

}

.infoTitleText {

    font-size: .8em;
    text-align: left;
    /* padding-bottom: 1.2vw; */


}

#extraDiv {

    grid-row: 3;

}

#extraDiv p {

    display: inline-block;

}

ul {

    list-style-type: "–  ";
    margin: 0px;
    /* padding:0px; */
    padding-inline-start: min(3vw, 36px);
    padding: 0px;

}

li {

    /* padding: 0px; */
    /* padding-inline-start: 0px; */
    /* display: block; */
    text-indent: 0;
    list-style-position: inside;
    /* display: inline-block; */

}

li ::marker {

    display: inline-block;

}

#clientsDiv ul {

    list-style-type: "";
    padding: 0px;

}

@media (max-width: 900px) {

    #homeButtonDiv {

        display: inline-block;

    }

    #menuTitelDiv {
        display: none;
    }


}


@media (max-width: 800px) {

    /* html,
    body {


        font-size: max(2.2vw, 11px);

    } */
    /* #mainDiv {
        height: calc(100% - 69px);
    } */

    #projectSelectionWrapper {

        grid-template-columns: 1fr 1fr;

    }

    .infoSection {

        display: inline-grid;
        grid-template-columns: 1fr;

        width: 100%;
        gap: min(4vw, 48px);
    }

    #infoPhoto {

        width: max(20vw, 180px);

    }

    .dienstverband {
        font-size: 9px;
    }

    #infoWrapper {
        font-size: 6vw;

    }
    #infoDiv p {
    padding-bottom: 3vw;
}
}

/* @media (max-width: 480px) {
    #projectSelectionWrapper {

        grid-template-columns: 1fr;

    }

} */