@import url("holzmarkterhebung.css");

:root {

    /*
           ! IE 11 kennt keine Variablen - also dennoch alles vor Ort definieren
     */

}

body {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: var(--header-height) var(--main-height) var(--footer-height);
    grid-template-areas:
        "header"
        "content"
        "footer";
    height: 100vh;
    width: 100vw;
    padding: 0;
    margin: 0;
    background: var(--primeColor_1);
}

@media (max-width: 999px) {
    :root {
        --ratio: 2;
    }
}

@media (min-width: 1000px){
    :root {
        --ratio: 3;
    }
}

@media (min-width: 1700px){
    :root {
        --ratio: 4;
    }
}

#content picture {
    grid-area: picture;
    height: var(--picture-height);
}

#content img {
    height: var(--picture-height);
}

/*
        WebKit
 */

/*
        Internet Explorer
 */

@media (min-width: 1000px){
    .ie-body {
        -ms-grid-rows: calc((100vh - (100vw / 3)) / 2) calc(100vw / 3) calc((100vh - (100vw / 3)) / 2);
    }

    .ie-picture {
        height: calc(100vw / 3);
    }

    .ie-picture-img {
        height: calc(100vw / 3);
    }
}

@media (min-width: 1700px){
    .ie-body {
        -ms-grid-rows: calc((100vh - (100vw / 4)) / 2) calc(100vw / 4) calc((100vh - (100vw / 4)) / 2);
    }

    .ie-picture {
        height: calc(100vw / 4);
    }

    .ie-picture-img {
        height: calc(100vw / 4);
    }
}

@media (max-width: 999px){
    .ie-body {
        -ms-grid-rows: calc((100vh - (100vw / 2)) / 2) calc(100vw / 2) calc((100vh - (100vw / 2)) / 2);
    }

    .ie-picture {
        height: calc(100vw / 2);
    }

    .ie-picture-img {
        height: calc(100vw / 2);
    }
}