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

:root {
    --schriftart1: 'Arial', 'Verdana';
    --groesse1: calc(10px + 0.5vw);
    --groesse2: calc(10px + 1.5vw);
    --groesse3: calc(10px + 0.1vw);
    --farbe1: rgba(50, 50, 50, 1);
    --farbe2: rgba(255, 255, 255, 1);
    --farbe3: rgba(0, 0, 255, 1);
    --farbe4: rgba(150, 150, 150, 1);
}

body {
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-columns: 1fr 3fr;
    grid-template-areas:
        "header header"
        "nav main"
        "footer footer";
    gap: 4em;
    min-height: 100vh;
    margin: 2em;
    background-color: var(--farbe2);
    font-family: var(--schriftart1);
    font-size: var(--groesse1);
    line-height: 1.3em;
}

header { grid-area: header; }
nav    { grid-area: nav; }
main   { grid-area: main; }
footer { grid-area: footer; }

img {
    max-width: 100%;
}

a {
    color: var(--farbe1);
    text-decoration: none;
}

footer {
    font-size: var(--groesse3);
    color: var(--farbe4);
}

footer > a {
    color: var(--farbe4);
}

h1 {
    margin: 0;
    font-weight: normal;
    font-size: var(--groesse2);
    line-height: 1.3em;
}

nav {
    display: flex;
    flex-direction: column;
    text-transform: lowercase;
    font-size: var(--groesse2);
    line-height: 1.3em;
}

nav img {
    height: 1em;
    margin-top: 1em;
}

nav a.aktuell {
    color: var(--farbe3);
}

div.teaserArbeiten {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6em 2em;
    place-items: center;
    text-align: center;
}

div.teaserArbeit img {
    object-fit: contain;
    max-height: 90vh;
    width: 100%;
    padding: 0 3em 1em 3em;
    box-sizing: border-box;
}

article.grossesbild {
    display: grid;
    grid-template-rows: 90vh auto;
    position: fixed;
    inset: 0;
    background-color: var(--farbe2);
}

article.grossesbild img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 25px 50px;
    box-sizing: border-box;
}

article.grossesbild > span {
    max-width: 900px;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 0 50px 50px;
    text-align: center;
}

@media only screen and (max-width: 640px) {
    body {
        grid-template-rows: auto auto auto;
        grid-template-columns: auto;
        grid-template-areas:
            "header"
            "nav"
            "main"
            "footer";
        min-height: auto;
    }

    div.teaserArbeiten {
        grid-template-columns: 1fr;
    }

    header {
        grid-template-columns: 1fr;
    }
}