body {


    font-family: pt-sans-pro, sans-serif;
    font-weight: 600;
    font-style: normal;
    letter-spacing: 0.25em;


}

body,
a {
    color: #000
}

.grid {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    grid-auto-rows: 20px;
    grid-gap: 50px 120px;
    margin-top: 35px;
}

@media only screen and (max-width: 480px) {

    .grid {
        grid-gap: 22px 120px;
    }

}

.wrapper {
    padding: 73px 18px 5rem;
    position: relative;
}

.media-controls {
    opacity: 1
}

img {
    width: 100%;
    height: 100%;
}

.bu {
    font-size: 13px;
    font-family: pt-sans-pro, sans-serif;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 0.2em;
    text-align: center;
    text-transform: uppercase;
    /*letter-spacing: .15em;*/
    padding-top: 8px;

}

.bu span {
    font-weight: normal;
    line-height: 1.8em;
}

.content {}

figure {
    margin: 0
}

/*---------  nav -----------------------------------------------*/
#nav {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 999;
    display: block;
    margin: 0 auto;
    padding-bottom: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background: rgba(255, 255, 255, 1);

}



.global__nav--list-mobile {

    /*position: fixed;
    z-index: 22;
    top: 0;
    left: 0;*/
    width: 100%;
    height: 75px;
    overflow: hidden;
    background: #fff;
    max-width: 1280px;

}

.name {
    text-transform: uppercase;
    position: absolute;
    top: 19px;
    left: 2vw;
    letter-spacing: 0.25em;
    text-decoration: none;
    font-size: 19px;
}

.logo {
    display: block;
    position: fixed;
    background: url("../pics/b_icon.jpg") no-repeat;
    background-position-x: 0%;
    background-position-y: 0%;
    background-size: auto;
    background-size: 100% 100%;
    background-position: center;
    z-index: 999;
    left: 50%;
    top: 6px;
    margin-left: -50px;
    width: 100px;
    height: 85px;
}

.nav__logo-link {
    position: relative;
    height: 44px;
    background-size: 31px 31px;
    background-repeat: no-repeat;
    background-image: url(../pics/dff_logo.svg);
    background-position: left top;
    line-height: 2.82353em;
    display: inline-block;
    padding: 0 23px;
    box-sizing: border-box;
}

.nav__top--sprache {
    right: 4vw;
    position: absolute;
    top: 0;
    width: auto;
    z-index: 1;
}

.nav__top--sprache-desktop {
    right: calc(4% - 24px);
    position: absolute;
    width: auto;
    z-index: 1;
}

.nav__top--sprache-desktop-link {
    position: relative;
    height: 46px;
    /* Bildhöhe */
    background-size: 24px;
    /*erster wert mit Padding abstimmen ergibt BG-bildbreite*/
    background-repeat: no-repeat;
    background-image: url(../pics/icon_f.svg);
    background-position: center top;
    line-height: 2.82353em;
    display: inline-block;
    padding: 0 24px;
    /*Bildbreite oder rechter Abstand oben */
    box-sizing: border-box;
}


.nav__top--sprache-link {
    position: relative;
    height: 46px;
    /* Bildhöhe */
    background-size: 24px 48px;
    /*erster wert mit Padding abstimmen ergibt BG-bildbreite*/
    background-repeat: no-repeat;
    background-image: url(../pics/icon_f.svg);
    background-position: center center;
    line-height: 2.82353em;
    display: inline-block;
    padding: 0 12px;
    box-sizing: border-box;
}

.nav__menu--icon {
    right: 4vw;
    position: absolute;
    z-index: 2;
    top: 0;
    width: 33px;
    height: 48px;
    border-bottom: none;
}

.nav__menu--icon-label {
    display: block;
    position: absolute;
    z-index: 3;
    top: 0;
    width: 33px;
    height: 48px;
    cursor: pointer;
    right: 0;
}

#nav .nav__menu--icon-burger {
    position: absolute;
    z-index: 3;
    top: 16px;
    width: 32px;
    height: 25px;
    transition: opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}



#nav .nav__menu--icon-burger-line {
    display: block;
    width: 32px;
    height: 2px;
    background: #233091;
    position: absolute;
    z-index: 1;
}

#global__nav-menustatus {
    display: none;
}

#global__nav-menustatus:checked~#nav {
    height: 100%;
    transition: background 0s linear 0s, height 0.2s linear 0s;
    overflow-y: auto;
}

#nav .nav__menu--icon-burger-oben {
    transition: -webkit-transform .1806s cubic-bezier(0.04, 0.04, 0.12, 0.96);
    transition: transform .1806s cubic-bezier(0.04, 0.04, 0.12, 0.96);
    transition: transform .1806s cubic-bezier(0.04, 0.04, 0.12, 0.96), -webkit-transform .1806s cubic-bezier(0.04, 0.04, 0.12, 0.96);
    -webkit-transform: none;
    transform: none;
    z-index: 4;
}

#nav .nav__menu--icon-burger-line-oben {
    top: 11px;
    -webkit-transform: translateY(-3px);
    transform: translateY(-3px);
    transition: -webkit-transform .1596s cubic-bezier(0.52, 0.16, 0.52, 0.84) .1008s;
    transition: transform .1596s cubic-bezier(0.52, 0.16, 0.52, 0.84) .1008s;
    transition: transform .1596s cubic-bezier(0.52, 0.16, 0.52, 0.84) .1008s, -webkit-transform .1596s cubic-bezier(0.52, 0.16, 0.52, 0.84) .1008s;
}

#global__nav-menustatus:checked~#nav .nav__menu--icon-burger-oben {
    transition: -webkit-transform .3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) .1008s;
    transition: transform .3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) .1008s;
    transition: transform .3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) .1008s, -webkit-transform .3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) .1008s;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

#global__nav-menustatus:checked~#nav .nav__menu--icon-burger-line-oben {
    transition: -webkit-transform .1806s cubic-bezier(0.04, 0.04, 0.12, 0.96);
    transition: transform .1806s cubic-bezier(0.04, 0.04, 0.12, 0.96);
    transition: transform .1806s cubic-bezier(0.04, 0.04, 0.12, 0.96), -webkit-transform .1806s cubic-bezier(0.04, 0.04, 0.12, 0.96);
    -webkit-transform: none;
    transform: none;
}

#nav .nav__menu--icon-burger-unten {
    transition: -webkit-transform .1806s cubic-bezier(0.04, 0.04, 0.12, 0.96);
    transition: transform .1806s cubic-bezier(0.04, 0.04, 0.12, 0.96);
    transition: transform .1806s cubic-bezier(0.04, 0.04, 0.12, 0.96), -webkit-transform .1806s cubic-bezier(0.04, 0.04, 0.12, 0.96);
    -webkit-transform: none;
    transform: none;
}

#global__nav-menustatus:checked~#nav .nav__menu--icon-burger-unten {
    transition: -webkit-transform .3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) .1008s;
    transition: transform .3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) .1008s;
    transition: transform .3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) .1008s, -webkit-transform .3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) .1008s;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);

}

#global__nav-menustatus:checked~#nav .nav__menu--icon-burger-line-unten {
    transition: -webkit-transform .1806s cubic-bezier(0.04, 0.04, 0.12, 0.96);
    transition: transform .1806s cubic-bezier(0.04, 0.04, 0.12, 0.96);
    transition: transform .1806s cubic-bezier(0.04, 0.04, 0.12, 0.96), -webkit-transform .1806s cubic-bezier(0.04, 0.04, 0.12, 0.96);
    -webkit-transform: none;
    transform: none;
}

.nav__menu--icon-burger-line-mitte {
    top: 17px;
    -webkit-transform: translateY(-3px);
    transform: translateY(-3px);
    transition: -webkit-transform .1596s cubic-bezier(0.52, 0.16, 0.52, 0.84) .1008s;
    transition: transform .1596s cubic-bezier(0.52, 0.16, 0.52, 0.84) .1008s;
    transition: transform .1596s cubic-bezier(0.52, 0.16, 0.52, 0.84) .1008s, -webkit-transform .1596s cubic-bezier(0.52, 0.16, 0.52, 0.84) .1008s;
}

#nav .nav__menu--icon-burger-line-unten {
    bottom: 11px;
    -webkit-transform: translateY(3px);
    transform: translateY(3px);
    transition: -webkit-transform .1596s cubic-bezier(0.52, 0.16, 0.52, 0.84) .1008s;
    transition: transform .1596s cubic-bezier(0.52, 0.16, 0.52, 0.84) .1008s;
    transition: transform .1596s cubic-bezier(0.52, 0.16, 0.52, 0.84) .1008s, -webkit-transform .1596s cubic-bezier(0.52, 0.16, 0.52, 0.84) .1008s;
}
.active {
    border-bottom: 2px solid #9a042b;
}
.nav__active-none {

    cursor: pointer;
    text-transform: uppercase;
    font-size: 17px;
    position: relative;

}

.nav__active-none:hover {
    opacity: 0.7;
}


.nav__top--logo {
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -25px;
    z-index: 1;
    text-align: center;
    width: 50px;
    height: 44px;
}

.nav__logo {
    width: 50px;
    top: -3px;
    left: 0;
    margin-left: 0
}

/* ---------------------------- nav ende ---------------------------*/


/* ------------------- slider styles ------------------------*/
.project-media-container {}

.project-title {
    text-align: center;
    padding-bottom: 30px;
    font-weight: 400;

    margin-top: 10px;
}

.project-title h2 {
    font-size: 17px;
    line-height: 27px;
    text-transform: uppercase;

    color: #333;
    opacity: 1;

}

.project-title p {
    color: #333;
    opacity: 1;
    font-size: 17px !important;
    line-height: 27px;
}

.media-controls {
    opacity: 0.75
}

.close {
    position: fixed;
    top: 20px;
    right: 15px;
    font-size: 27px;
}

.info {
    position: absolute;
    top: 13px;
    left: 25px;
    font-size: 27px;
}

.previous-project {
    position: absolute;
    bottom: 25px;
    left: 12px;
    font-size: 25px;
}

.overview {
    position: absolute;
    bottom: 32px;
    font-size: 18px;
    text-transform: uppercase;
    left: 20vw;
    right: 20vw;
    text-align: center;
    font-weight: 400;
}

.next-project {
    position: absolute;
    bottom: 25px;
    right: 12px;
    font-size: 25px;

}

.previous-project,
.next-project,
.close,
.info,
.overview {
    text-decoration: none;


}

.next-project::before,
.previous-project::before,
.close::before {
    content: "\e876";
    font-family: 'Linearicons-Free';
    font-weight: bold;
}

.previous-project::before {
    content: "\e875";
}

.close {
    position: fixed;
    top: 13px;
    right: 15px;
    font-size: 25px;
    display: none;

}

.close::before {
    content: "\e870";
}

.info {
    font-family: sans-serif;
    font-size: 25px;
    width: 25px;
    height: 25px;
    display: none;
}

.media-holder img {
    max-height: 65vh;
    height: auto;
    margin: 0 45vh;
    max-width: 100%;
    width: auto;
}



.media-holder-portrait img {
    max-height: 150px;
    height: 150px;
    margin: 0 45vh;
    max-width: 140px;
    width: 150px;
}

header {
    position: fixed;
    top: 0;
    left: 0;
    background: #fff;
    width: 100%;
    height: 55px;
}

.nav-active {
    color: #000;
    cursor: default;
    background: #fff;
}

#nav .global__nav--list {
    color: #fff;
    visibility: hidden;
    margin: 0;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
    padding: 80px 9vw;
    padding-top: 80px;
}

.global__nav--list-wrapper {
    visibility: hidden;
}


.global__nav {
    padding: 0;
    position: relative;
    top: 0;
    width: 100%;
    height: 55px;
    max-width: 1280px;
    margin: 0;

}






@media only screen and (min-width: 768px) {
    .wrapper {
        max-width: 1200px;
        padding: 8rem 5vw 9rem;
        margin: 0 auto;
    }



    .nav__category--link {
        padding: 3px 0;
        text-decoration: none;
    }


    .project-header {
        display: none
    }

    .project-media-container {
        margin-top: 0
    }

    .project {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        max-width: 100%;
        padding: 15px 20px;

    }

    .blue {
        background: #1a294d;
    }

    .violet {
        background: #1b1561
    }

    .black {
        background: #000
    }

    .medcolor {
        background: #646f83
    }


    .previous-project,
    .next-project,
    .close,
    .info,
    .overview {

        color: #fff;
        opacity: 0.85;
    }

    .close {

        right: 25px;
        display: block;

    }

    .previous-project {
        left: 25px
    }

    .next-project {
        right: 25px
    }

    .project-title p,
    .project-title h2 {
        color: #fff;
        font-family: pt-sans-pro, sans-serif;
        font-size: 19px;

    }

    .overview {
        display: none;
    }

    .project-title {

        margin-top: 0;
    }

    .project-title h2::after {
        white-space: pre;
        content: "\A —";
    }

    .info {
        background: url("../pics/icon_i.png") no-repeat;
        background-size: contain;
    }

    .border {
        /*        border: 12px solid #fff*/
    }

}




/*@media only screen and (max-width: 980px) {*/



.nav__category .nav__active:after {
    visibility: hidden
}





#global__nav-menustatus:checked~#nav {
    height: 100%;
    transition: background 0s linear 0s, height 0.2s linear 0s;

}


#nav {
    max-height: none;

}

#nav .global__nav--list {

    color: #fff;
    visibility: hidden;
    margin: 0;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
    padding: 80px 9vw;
}

.global__nav--list-wrapper {
    visibility: hidden
}



#global__nav-menustatus:checked~#nav .global__nav--list-wrapper {
    visibility: visible;
    position: relative;
    display: block;
    top: 75px;
    z-index: 21;
    bottom: 0;
    left: 0;
    overflow-x: hidden;
    overflow-y: hidden;
    width: 100%;
}

#global__nav-menustatus:checked~#nav .global__nav--list {
    visibility: visible;
    height: auto;
    background: rgba(255, 255, 255, 1);
    transition: height 0s linear, visibility 0s linear;
}

#nav .global__nav--list-mobile {}


#nav .nav__logo,
#nav .nav__top--sprache-desktop-link {
    display: none
}



.nav__category {
    width: 100%;
    /*height: 44px;*/
    padding: 10px 0 13px;

}

#global__nav-menustatus:checked~#nav .nav__category {
    color: #fff;
    grid-column: 2;

}


.nav__category--link {
    background-position: left center;
    display: block;
    outline-offset: 0;
    padding: 0;
    width: auto;
    max-width: none;
    font-size: 24px;
    text-decoration: none;
    font-weight: 400;
    text-align: left;
    line-height: 30px;
    letter-spacing: 0.06em;
    font-weight: bold;
    color: #000;

}



.nav-active-link {
    color: #000;
    /*    text-transform: uppercase;*/

    border-bottom: 3px solid black;



}

.nav-active-link:hover {
    color: #999;
    border-color: #999
}

.global-nav-first {
    padding: 80px 0 10px;
    font-size: 18px;

}

.global-nav-last {
    padding: 20px 0 0;
    font-size: 18px;

}

.nav-active-link {
    position: relative;
    /*        text-transform: uppercase;*/
    font-size: 18px;
}

/*}*/

.legal {
    font-size: 14px;
    letter-spacing: 0.1em;
    line-height: 1.4em;
    padding: 85px 0 40px;
}

.center {
    width: 70%;
    margin: 0 auto
}

.centerfooter {
    width: 100%
}

.portrait-wrapper {
    display: grid;
    grid-template-columns: 150px 1fr;
    grid-column-gap: 15px;
}

.portrait {
    max-width: 135px;
    height: auto;
    justify-self: start;
    grid-column: 1;
    align-self: start;
    padding-top: 10px;
}

.portrait-first {

    align-self: start;
    grid-column: 3
}


.global-nav-first,
.contact,
.center {
    text-align: center;
}
.notai{position: fixed;width: 115px;bottom: 10px;left: 14px;}

@media only screen and (min-width: 981px) {


    .logo {

        top: 12px;
        margin-left: -60px;
        width: 120px;
        height: 105px;
    }


    .global__nav--list {

        cursor: default;
        margin-top: 70px;
        width: 100%;
        padding: 0 0 20px;
        display: grid;
    }


    .global__nav {
        margin: 0 auto;
    }

    .nav__category {
        box-sizing: border-box;
        display: inline-block;
        position: relative;
        z-index: 1;
        top: 0;

        text-align: center;
        display: grid;
        align-content: center;
        line-height: 2;
        width: 100%;
    }

    .global-nav-last {
        text-align: center;
    }

    .nav__active-none {}

    .nav-active-link {
        position: relative;
    }


    
    .nav__active-none:hover {

        font-weight: 500
    }

    /*.global__nav--list {

        height: 51px;
    }*/
    .nav__category--link .nav__active-none:hover::after {
        visibility: visible;
        -webkit-transform: scaleX(0.5);
        transform: scaleX(0.5);
        background: #f34949;
    }

    .nav__active-none::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 2px;
        top: 42px;
        left: -2px;
        background: #fff;
        visibility: hidden;
        -webkit-transform: scale(0);
        transform: scaleX(0);
        transition: .25s cubic-bezier(0.4, 0, 1, 1);
    }

    .nav__category .nav__active:after {
        content: "";
        position: absolute;
        width: 100%;
        height: 3px;
        bottom: 20px;
        left: 0;
        background: #9a042b;
        visibility: visible;

    }

    .nav__active-none:hover {

        font-weight: 500
    }

    .global__nav--list {

        height: 51px;
    }


    .section__gallery-slick {
        margin-top: 63px;
        margin-bottom: 40px
    }

    #nav {}

    .header__top {
        margin-top: 63px;
    }
}



@media only screen and (max-width: 450px) {
    .name-second-sibling {
        padding-left: 1rem;
    }


    .nav__category--link,
    .nav-active-link {
        font-size: 16px;
        line-height: 22px;
    }

    .contact,
    .nav-active-link {
        line-height: 24px;
        font-size: 14px;
    }

    .center {
        width: 100%;
    }
}

@media only screen and (max-width: 650px) {
    #nav .global__nav--list {
        padding-top: 10px;
    }

    .portrait-mobile {
        max-width: 150px;
        margin-left: auto;
        margin-right: auto;
        display: block;
        padding-bottom: 20px;
    }

    .nav__category--link {
        text-align: center
    }

    .portrait-wrapper {

        grid-template-columns: 1fr;
    }

    .portrait {
        margin: 0 auto
    }



    .global-nav-first {
        padding: 80px 0 20px;
    }

    .media-holder-portrait {
        display: none
    }
    .notai{bottom: -6px;left: -6px;}
}

@media only screen and (min-width: 651px) {
    .portrait-mobile {
        display: none
    }
}



@media only screen and (max-width: 767px) {

    .media-holder img {
        max-height: 100%;
        height: auto;
        padding: 0 0 14px;
        margin: 0;
    }




}

@media only screen and (max-width: 981px) {


    .nav__category--link,
    .nav-active-link {
        font-size: 18px;
        line-height: 24px;
    }



}
@media only screen and (max-width: 320px) {
    .name {font-size: 17px; }      
}