.message {
    background-color: cornsilk;
    color: chocolate;
    padding: 10px;
}

@supports (display: grid) {
    .message {
        display: none;
    }
}



/* CSS-Reset (wir setzen alle margins und paddings auf 0) und Defaults (überall gleiche Schriftfarbe und Schriftart) */

* {
    margin: 0px;
    padding: 0px;
    font-family: Arial, Helvetica, Verdana, sans-serif;
    color: #000000;
}


/* Alle Hyperlinks ohne Unterstreichung */

a {
    text-decoration: none;
}


/* unvisited link */

a:link {
    color: black;
}


/* mouse over link */

a:hover {
    /*font-weight: 600;*/
    color: blue;
}

.spez {
    /*font-weight: 600;*/
    color: blue;
}

.list2:link {
    color: goldenrod;
}

.list2:visited {
    color: goldenrod;
}

h2 {
    padding-bottom: 25px;
}

h3 {
    padding-left: 170px;
    padding-bottom: 10px;
}

h4 {
    padding-top: 10px;
    padding-bottom: 10px;
}

.list1 {
    padding-bottom: 15px;
}

ul {
    list-style-type: none;
}


/* Die Kopfgrafik realisieren wir als Hintergrund. Die Angabe 'background-size: cover' sorgt dafür, dass das Bild automatisch skaliert und auf die Höhe von 225px abgeschnitten wird. Dabei hat background-position den Effekt, dass das Bild immer zentriert bleibt. */

header {
    height: 230px;
    background-image: url("images/bruecke.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    margin-bottom: 40px;
}

nav {
    /* margin-left: 100px;*/
    font-size: 16pt;
    /*margin-bottom: 50px;*/
}

.week {
    font-size: 12pt;
}

.sidebar {
    grid-area: sidebar;
}

.sidebar2 {
    grid-area: sidebar2;
}

.content {
    grid-area: content;
}

.header {
    grid-area: header;
}

.footer {
    grid-area: footer;
}

.wrapper {
    background-color: #fff;
    color: #444;
}

.wrapper {
    display: grid;
    grid-gap: 1em;
    grid-template-areas: "header" "sidebar" "content" "sidebar2" "footer"
}

@media only screen and (min-width: 500px) {
    .wrapper {
        grid-template-columns: 20% auto;
        grid-template-areas: "header   header" "sidebar  content" "sidebar2 sidebar2" "footer   footer";
    }
}

@media only screen and (min-width: 600px) {
    .wrapper {
        grid-gap: 35px;
        grid-template-columns: 120px auto 300px;
        grid-template-areas: "header  header  header" "sidebar content sidebar2" "footer  footer  footer";
        max-width: 100%;
        padding-left: 100px;
        padding-right: 100px;
    }
}

.box {
    /*background-color: #444;
    color: #fff;*/
    border-radius: 5px;
    padding: 10px;
    /*font-size: 150%;*/
}

.bdue {
    padding-left: 100px;
}

.sdl {
    padding-left: 95px;
}

.l10n {
    padding-left: 115px;
}

.foto {
    padding-left: 115px;
}

.table {
    padding-left: 167px;
}

#termcoord {
    border-spacing: 30px;
}

.footer {
    background-color: lightseagreen;
}

.sidebar2 {
    /*background-color: #ccc;
    color: #444;*/
}


/*von mir*/

.footer {
    /*position: relative;
    bottom: 0px;
    max-width: 100%;*/
    margin-top: auto;
}

.imageContainerGerman {
    float: left;
}

germanbooks {
    position: absolute;
    left: 630px;
    top: 1200px;
}

.imageContainerEnglish {
    float: left;
}

englishbooks {
    position: relative;
    left: 0px;
    top: 40px;
}