@charset "UTF-8";

.grid-container.fluid {
    padding-right: 0;
    padding-left: 0;
}

body {
    font-family: "Helvetica Neue";
    font-size: 1em;
    font-weight: 300;
    background-color: #FaF8F8;
}

.grid-container {
    padding: 1em;
}

/* --- global --- */


.adress-top,
.adress-bottom,
.nav p span a,
.kostrzewa h1,
.berger h1,
footer .bottom ul li a,
header .nav.top ul li a,
#name {
    color: #fff
}

.adress-top,
.adress-bottom,
.nav,
.kostrzewa h1 span,
.berger h1 span {
    background: #03142C;
}

/* --- banner efre --- */

#banner {
    padding-bottom: 0
}

#banner .grid-x {
    background-color: rgb(255, 255, 255);
}

#banner .grid-x img {
    padding: 1em 0 1em 1em
}

/* --- header --- */

#main {
    margin: 0;
}

p.fone {
    content: normal;
}

/* --- company name + logo --- */

.logo-container {
    position: relative;
    background-color:
        /* #ccc */
        #D5D5D5;
}

.logo-medium-xlarge {
    background: #ccc;
    position: relative;

}

.logo-svg {
    position: absolute;
    align-self: baseline;
    width: 75%;
    top: 3.4em;
    right: 12%;
}

.company {
    background-color: #D5D5D5;
    font-weight: 200;
    letter-spacing: 0.1rem;
}

.company p {
    padding: 3.4375rem 1rem 0 1rem;

}

.company .first-name {
    font-size: 4rem;
    display: block;
    text-transform: uppercase;
}

.company .last-name {
    font-size: 2rem;
    text-transform: uppercase;
}

/* --- adresse top --- */

.adress-top {
    padding: 0.05rem 1rem;
    font-weight: 400;
    letter-spacing: 0.08em;
}

.adress-top p {
    margin-bottom: 0;
}

.adress-top p.fon {
    font-size: 2.5rem;
}

.adress-top p.adress-street {
    font-size: 1.125rem;
}

.adress-top p.adress-mail {
    font-size: 1rem;
}


.adress-top .hours {

    font-size: 0.875rem;
}

.adress-top .grid-x:nth-child(3n) {
    margin-bottom: 0.5em;
}

/* --- article --- */


#kostrzewa,
#berger {
    background-color: #e1e1e1;
}


#main {
    position: relative;
    margin-bottom: 1em;
}

.index #main {
    margin-bottom: 0;
}


/* --- footer --- */

footer {
    margin: 0;
    border-top: 1px #D5D5D5 solid;
}

.index footer {
    border-top: none;
}


footer .grid-container {
    padding-bottom: 1em;

}

.maps {
    max-width: 100%;
    background-color: transparent;
    padding: 0.188rem 0;
}


footer .bottom ul {
    float: right;
}

footer .bottom ul li a {
    font-weight: 400;
}

#projekt {
    background-color: rgb(255, 255, 255);
}

#projekt .first {
    padding: 0 1em 1em 0;
}


















/* --- impressum --- */

.imprint-left {
    padding-right: 1em;
}

.imprint-right {
    padding-left: 1em;
}

#name {
    padding: 1em;
    text-align: right;
    background-color: #03142C;
    margin: 1em 0 2em 0;
}


#name .women {
    display: block;
    font-size: 1.25em;
    font-weight: 300;

}

#name .plus_sign {
    display: block;
    font-size: 1em;
    font-weight: 200;
    padding-right: 1.5em
}

#name .man {
    display: block;
    font-size: 1.25em;
    font-weight: 300;
    margin-bottom: 1.5em
}

.imprint-left p.adress,
.imprint-left p.adress-street,
.imprint-left p.fon {
    margin-bottom: 0.25em;
}

.imprint-left p.adress-city {
    margin-bottom: 1em;
}


.imprint-left p.mail {
    margin-bottom: 1.5em;
}

.imprint h1 {
    color: #03142C;
}

.imprint h2 {
    font-size: 1.125rem;
    color: #03142C
}

#main .imprint-heading {
    margin-top: 1em;
    font-size: 1.5rem
}

#main p:nth-child(5n+1) {
    padding-bottom: 2em:
}


/* --- media queries ---

++	Small: any screen.
++	Medium: any screen 640 pixels or wider.
++	Large: any screen 1024 pixels or wider.
++ small: 0px,
++ medium: 640px,
++ large: 1024px,
++ xlarge: 1200px,
++ xxlarge: 1440px,
*/

/* small bis 384px */

@media screen and (min-width: 17.5em) and (max-width: 24em) {

    #banner .grid-x img {
        padding: 0.1875em
    }

    header .nav.top {
        display: none;
    }

    header .logo-medium-xlarge {
        display: none;
    }

    header .adress-top {
        display: none;
    }

    /* -- logo-small -- */
    header .logo-small {
        position: relative;
    }

    header .logo-small .logo-svg-small {
        position: absolute;
        background-size: contain;
        height: 70%;
        width: auto;
        top: 15%;
        left: 5%;
    }

    .logo-small p {
        padding: 2% 0 0.75rem 30%;
        margin: 0;
        line-height: 1.5;
    }

    .logo-small p .first-name {
        font-size: 8vw;
    }

    .logo-small p .last-name {
        font-size: 6vw;
    }

    /* -- bild + beschreibung -- */
    .kostrzewa,
    .berger {
        text-align: left;
        padding: 0.5rem 0
    }

    .kostrzewa h1,
    .berger h1 {
        font-size: 4.5vw;
        margin: 0;
        padding: 0 0.188rem;
    }

    .kostrzewa h1 span,
    .berger h1 span {
        margin: 0;
        padding: 0.188rem;
    }

    .kostrzewa .zusatz,
    .berger .zusatz {
        font-size: 3.5vw;
        margin: 0;
        padding: 0 0.188rem;
    }


    /* -- adress bottom -- */


    .adress-bottom {
        font-weight: 400;
        letter-spacing: 0.08em;
    }

    .adress-bottom.links {
        padding: 1rem 1rem 0.25rem 1rem;
    }

    .adress-bottom.rechts {
        padding: 1rem 0 0.25rem 0;
    }


    .adress-bottom.mail {
        padding: 1rem 0 0.5rem 1rem;
    }

    .adress-bottom h2 {
        font-size: 3.6vw;
    }

    .adress-bottom p {
        margin-bottom: 0;
    }

    .adress-bottom p,
    .adress-bottom li {
        font-size: 2.5vw;
    }

    .adress-bottom ul {
        margin-left: 0;
        padding: 0;
        margin: 0;
    }

    .adress-bottom ul li {
        list-style: none;
        margin-left: 0;
    }

    .adress-bottom li span.mo,
    .adress-bottom li span.we,
    .adress-bottom li span.th,
    .adress-bottom li span.fr {
        display: block;
        margin-left: 0;
        padding: 0 0 0.125rem 0;
    }

    .adress-bottom.mail {
        padding-top: 0;
    }

    #main #name {
        display: none;
    }

    #main .imprint-heading {
        font-size: 1.5rem;
        margin-top: 1rem;
    }

    .imprint-right {
        padding-left: 0;
    }

    footer .bottom ul li a {
        font-size: 3vw;
    }
}


/* small 385px bis 639px */

@media screen and (min-width: 24.063em) and (max-width: 39.9375em) {

    #banner .grid-x img {
        padding: 0.1875em
    }

    header .nav.top {
        display: none;
    }

    header .logo-medium-xlarge {
        display: none;
    }

    header .adress-top {
        display: none;
    }

    /* -- logo-small -- */
    header .logo-small {
        position: relative;
    }

    header .logo-small .logo-svg-small {
        position: absolute;
        background-size: contain;
        height: 70%;
        width: auto;
        top: 15%;
        left: 5%;
    }

    .logo-small p {
        padding: 2% 0 0.75rem 30%;
        margin: 0;
        line-height: 1.5;
    }

    .logo-small p .first-name {
        font-size: 8vw;
    }

    .logo-small p .last-name {
        font-size: 6vw;
    }

    /* -- bild + beschreibung -- */
    .kostrzewa,
    .berger {
        text-align: left;
        padding: 0.5rem 0
    }

    .kostrzewa h1,
    .berger h1 {
        font-size: 4.5vw;
        margin: 0;
        padding: 0 0.188rem;
    }

    .kostrzewa h1 span,
    .berger h1 span {
        margin: 0;
        padding: 0.188rem;
    }

    .kostrzewa h2.zusatz,
    .berger h2.zusatz {
        font-size: 3.5vw;
        margin: 0;
        padding: 0 0.188rem;
    }


    /* -- adress bottom -- */


    .adress-bottom {
        padding: 1rem 1rem 0.25rem 1rem;
        font-weight: 400;
        letter-spacing: 0.08em;
    }

    .adress-bottom h2 {
        font-size: 3.6vw;
    }

    .adress-bottom p {
        margin-bottom: 0;
    }

    .adress-bottom p {
        font-size: 2.5vw;
    }

    .adress-bottom.rechts .cell {
        margin-bottom: 0.25rem
    }

    .adress-bottom .adress-city {
        padding-bottom: 0.5em;
    }


    .adress-bottom.mail {
        padding: 0 0 1rem 1rem;
    }

    .adress-bottom .adress-mail {}

    /* -- impressum -- */

    #main #name {
        display: none;
    }

    #name .man {
        margin-bottom: 0.5rem;
    }


    #main .imprint-heading {
        font-size: 1.5rem;
        margin-top: 1rem;
    }

    .imprint-left {
        padding-left: 1em;
    }

    .imprint-right {
        padding: 0 1em;
    }

    footer .bottom ul li a {
        font-size: 3vw;
    }

}

/* media queries medium ab 640px  */
@media screen and (min-width: 40em) {
    .logo-svg-small {
        display: none;
    }

    #berger img {
        border-left: 1px #fff solid;
    }

    #kostrzewa img {
        border-right: 1px #fff solid;
    }

}

/* media queries medium von 640px bis 1023.98px */
@media screen and (min-width: 40em) and (max-width: 63.9375em) {

    /* --- nav top --- */
    .nav.top {
        display: none;
    }

    /* --- adress bottom --- */
    #main .adress-bottom {
        display: none;
    }

    /* --- company --- */
    .company .first-name {
        font-size: 4.5vw;
    }

    .company .last-name {
        font-size: 3vw;
    }

    /* --- adress top --- */
    .adress-top {
        padding: 0.5em 0 0 2.188em;

    }

    .adress-top p.fon {
        font-size: 4vw;
    }

    .adress-top p.adress-street {
        font-size: 2.2vw;
    }

    .adress-top p.adress-mail {
        font-size: 1.64vw;
        padding-bottom: 0.375em;
    }

    .adress-top .hours {
        font-size: 1.6vw;
    }

    /* --- main --- */
    #main {
        position: relative;
    }

    /* --- bilder + beschreibung --- */

    .kostrzewa {
        text-align: right;
    }

    .berger {
        text-align: left;
    }


    .kostrzewa,
    .berger {
        position: absolute;
        background: #fff;
        bottom: 2%;
    }

    .kostrzewa h1,
    .berger h1 {
        font-size: 1.5vw;
        margin: 0;
        padding: 0.315rem 0.188rem;
        background: #03142C;
    }


    h2.zusatz {
        font-size: 1.3vw;
        display: block;
        padding: 0.313rem 0.5rem;
        margin-bottom: 0;
    }

    .kostrzewa h1 span,
    .berger h1 span {
        padding: 0.313rem;
        width: 100%
    }

    .kostrzewa {
        left: 1%;
        text-align: left;
    }

    .berger {
        right: 1%;
    }

    /* -- impressum -- */

    .imprint-right {
        margin-top: 4em;
        padding-right: 1em;
    }

    #name {
        margin: 0.5em 0 1em 0;
        padding: 0.5rem 0.5rem 0 0
    }

    #name p {
        font-size: 1.4vw;
    }

    .imprint-left p,
    .imprint-right p {
        font-size: 1.5vw;
    }

    .imprint-heading h1 {
        font-size: 3vw;
    }

    .imprint h2 {
        font-size: 2vw;
    }

    .imprint-right {
        padding-right: 1em;
    }

    .imprint-left {
        padding-left: 1em;
    }

    footer .bottom ul li a {
        font-size: 2vw;
    }
}


/* media queries ab 1024px */
@media print,
screen and (min-width: 64em) {

    #main .adress-bottom {
        display: none;
    }

    footer .nav.bottom ul {
        display: none;
    }

    footer .nav.bottom {
        height:
            /*1.4375rem*/
            1rem;
        background-color: #D5D5D5;
    }


}

/* media queries large ab 1024px */
@media screen and (min-width: 64em) {

    /* --- logo --- */
    .logo-svg {
        position: absolute;
        align-self: baseline;
        width: 75%;
        top: 2.5em;
        right: 12%;
    }

    /* --- nav --- */
    .nav.top {
        margin: 0;
        position: relative;
        background: #132339;
    }

    .nav.top ul {
        position: absolute;
        display: inline-block;
        right: 5%;
        bottom: 5%;
    }

    .nav.top li span {
        margin: 0;
        font-size: 0.75rem;
        padding: 0 1rem;
        font-weight: 400;
        letter-spacing: 0.08em;
    }

    .nav.top li {
        text-align: right;
    }

    .nav.top li {
        font-weight: 400;
    }

    .nav.top li a {
        padding: 0.417em;
    }

    /* --- company --- */
    .company .first-name {
        font-size: 3.313rem;
    }

    .adress-top p.adress-mail {
        font-size: 0.875rem;
        padding-bottom: 0.5rem
    }

    .company p {
        padding-top: 3.438rem;
    }

    /* --- nav --- */
    .nav p span {
        padding-right: 0.5em;
        font-size: 0.688rem
    }

    /* --- adress main --- */
    #main .adress-main {
        display: none;
    }

    /* --- bilder + beschreibung --- */
    .kostrzewa,
    .berger {
        position: absolute;
        background: #fff;
        bottom: 2%;
        letter-spacing: 0.02em;
    }

    .kostrzewa h1,
    .berger h1 {
        font-size: 1em;
        margin: 0;
        padding: 0.315rem 0.188rem;
        background: #03142C;
    }

    h2.zusatz {
        font-size: 0.875em;
        display: block;
        padding: 0.313rem 0.5rem;
        margin-bottom: 0;
    }

    .kostrzewa h1 span,
    .berger h1 span {
        padding: 0.313rem;
        width: 100%
    }

    .kostrzewa {
        left: 1%;
        text-align: left;
    }

    .berger {
        right: 1%;
    }

    .imprint-right {
        margin-top: 4em;
        padding-right: 1em;
    }

    .imprint-right {
        padding-right: 1em;
    }

    .imprint-left {
        padding-left: 1em;
    }

    footer .bottom ul li a {
        font-size: 2vw;
    }
}