/* roboto-regular - latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/roboto-v29-latin-regular.eot'); /* IE9 Compat Modes */
    src: local(''),
    url('../fonts/roboto-v29-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/roboto-v29-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/roboto-v29-latin-regular.woff') format('woff'), /* Modern Browsers */
    url('../fonts/roboto-v29-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/roboto-v29-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-condensed-regular - latin */
@font-face {
    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/roboto-condensed-v24-latin-regular.eot'); /* IE9 Compat Modes */
    src: local(''),
    url('../fonts/roboto-condensed-v24-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/roboto-condensed-v24-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/roboto-condensed-v24-latin-regular.woff') format('woff'), /* Modern Browsers */
    url('../fonts/roboto-condensed-v24-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/roboto-condensed-v24-latin-regular.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
}


/***********************************************************************************************************************
* Variablen, Basis Styles
***********************************************************************************************************************/

:root {
    --content-width: 1140px;

    --color-blue: #7691A6; /* Menu */
    --color-red: #E90111;

}

* {
    box-sizing: border-box;
}

/*
Zentrierter Content
*/
.centered {
    box-sizing: content-box;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: var(--content-width);
}

.img-responsive {
    width: 100%;
    height: auto;
}


/***********************************************************************************************************************
* Header
***********************************************************************************************************************/

header {
    display: grid;
    grid-template-rows: [top] 1.4rem [background] 10rem [banner] 16.25rem [bottom];
    grid-template-columns: [start] 1.25rem [logo] 10rem [nav] 30rem [brand] 1fr [end];

}

#stripe-top {
    grid-row: top / background;
    grid-column: start / end;
    background-color: var(--color-red);
}

#header-bg {
    background-image: url('../img/bg_woman.jpg');
    background-repeat: no-repeat;
    background-size: cover;

    grid-row: background / bottom;
    grid-column: start / end;
    margin-top: 0.3rem;

    border: 1px solid lightgray;
}

img#woman {
    display: block;
    grid-row: top / bottom;
    grid-column: start / end;
    justify-self: right;
    height: 100%;
}
img#woman_mobil {
    display: none;
}

#logo {
    grid-row: top / banner;
    grid-column: logo / nav;
    width: auto;
    height: 100%;
}
#logo img {
    width: 100%;
    height: auto;
}

nav#header-nav {
    grid-row-start: top;
    grid-column: nav / brand;
    padding-left: 1.3rem;
}

header nav ul {
    display: flex;
}

header nav ul a {
    text-decoration: none;
    color: white;
    background-color: var(--color-blue);
    color: white;
    list-style: none;
    margin-right: 0.4rem;
    width: 25%;
    height: 2.5rem;
    display: grid;
    align-content: end;
    justify-content: center;
    padding-bottom: 0.3rem;
    font-family: 'Roboto Condensed', sans-serif;
    box-shadow: 0.15rem 0.15rem black;
}

header nav ul a:hover {
    box-shadow: 0.25rem 0.25rem black;
}


#banner-header {
    grid-row: banner / bottom;
    grid-column: start / brand;
    align-self: center;
    justify-content: start;
}

#banner-header img {
    width: 90%;
    margin-bottom: 0.8rem;
    margin-left: 1rem;
}


#banner-menu {
    grid-row: background / banner;
    grid-column: nav / brand;
    align-self: end;
    justify-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 2rem;
}

img#banner-menu-arrow {
    display: block;
    width: 20%;
    margin-bottom: 0.3rem;
}
img#banner-menu-arrow-mobile {
    display: none;
}

img#banner-menu-teaser {
    display: block;
    width: 70%;
}
img#banner-menu-teaser-mobile {
    display: none;
}

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

    header {
        display: grid;
        grid-template-rows: [top] 1.4rem [background] 18rem [bg-bottom] 3.5rem [banner] 3.5rem [end];
        grid-template-columns: [start] 1rem [logo] 1fr [content-end] 1rem [end];

    }

    #stripe-top {
        grid-row: top / background;
        grid-column: start / end;
        background-color: var(--color-red);
    }

    #header-bg {
        background-image: url('../img/bg_woman_mobile.jpg');

        grid-row: background / bg-bottom;
        grid-column: start / end;
        margin-top: 0.3rem;
    }

    img#woman {
        display: none;
    }
    img#woman_mobil {
        display: block;
        grid-row: top / bg-bottom;
        grid-column: start / end;
        margin-right: 6vw;
        justify-self: right;
        height: 100%;
    }

    #logo {
        grid-row-start: top;
        grid-column-start: logo;
        width: 22vw;
        height: auto;
    }

    nav#header-nav {
        grid-row: bg-bottom / banner;
        grid-column: logo / content-end;
        padding-left: 0;
        margin-top: -0.5rem
    }
    header nav ul a {
        align-content: center;
        height: 2.3rem;
        box-shadow: 0.1rem 0.1rem black;
    }
    header nav ul li {
        font-size: 0.9rem;
        margin-top: 0.3rem;
    }

    #banner-header {
        grid-row: background / bg-bottom;
        grid-column: start / content-end;
        align-self: flex-end;
        margin-bottom: 1.5rem;
    }

    #banner-header img:first-child {
        width: 60%;
        margin-bottom: 0.6rem;
        margin-left: 0.8rem;
    }

    #banner-header img:nth-child(2) {
        width: 75%;
    }

    #banner-menu {
        grid-row: banner / end;
        grid-column: logo / content-end;
        margin-bottom: 0;
    }
    img#banner-menu-arrow {
        display: none;
    }
    img#banner-menu-arrow-mobile {
        display: block;
        width: 45%;
        margin-bottom: 0.3rem;
    }
    img#banner-menu-teaser {
        display: none;
    }
    img#banner-menu-teaser-mobile {
        display: block;
        width: 99%;
    }

}
@media only screen and (max-width: 450px) {
    header {
        display: grid;
        grid-template-rows: [top] 1.7rem [background] 18rem [bg-bottom] 3.5rem [banner] 2rem [end];
    }
}



/***********************************************************************************************************************
* Teaser-Reihe
***********************************************************************************************************************/


#teaser-row {
    padding: 1rem 0;
}
#teaser-row {
    display: grid;
    grid-template-columns: 6fr 4fr 4fr;
    grid-gap: 0.5rem;
    align-items: stretch;
}

@media only screen and (max-width: 600px) {
    #teaser-row {
        grid-template-columns: 1fr 1fr;
    }
}

.teaser-small {
    display: flex;
    align-items: center;
}
#img_box_abo {
    display: inline;
}
#img_box_abo_mobil {
    display: none;
}
@media only screen and (max-width: 600px) {
    .teaser-small {
        grid-column: span 2;
    }
    #img_box_abo {
        display: none;
    }
    #img_box_abo_mobil {
        display: inline;
    }
}



.teaser-big img:first-child {
    margin-bottom: 0.3rem;
}

#two-part-teaser {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

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

footer {
    background-color: var(--color-blue);
    font-family: 'Roboto', sans-serif;
}
footer * {
    color: white;
}
#footer-content {
    display: grid;
    grid-template-columns: 1fr 2fr;
    padding: 1rem 0;
}
footer nav {
    justify-self: end;
}
footer nav ul {
    display: flex;
}
footer nav ul a {
    text-decoration: none;
}
footer nav ul li {
    padding-right: 0.3rem;
    font-size: 0.8rem;
}
footer nav li + li::before {
    content: " | ";
}
#disclaimer {
    margin-top: 1rem;
    font-size: 0.8rem;
    line-height: 1.1rem;
}
footer nav {
    grid-column-start: 2;
    grid-row-start: 1;
}

img#funke-logo {
    grid-column-start: 1;
    grid-row-start: 1;
    height: 1.7rem;
}

@media only screen and (max-width: 600px) {
    img#funke-logo {
        grid-column-start: 1;
        grid-row-start: 2;
        width: 25vw;
        height: auto;
    }
    #disclaimer {
        grid-row-start: 3;
        grid-column: 1 / 3;
    }
    #footer-content {
        padding: 1rem 1rem;
    }
    footer nav {
        grid-column: 1 / 3;
        margin-bottom: 1.5rem;
    }
    footer nav ul li {
        font-size: 0.6rem;
    }
    #disclaimer {
        font-size: 0.6rem;
        line-height: 1rem;
    }
}

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

    #footer-content {
        padding: 1rem 1rem;
    }
}