@charset "UTF-8";
/* CSS Document */

* {
  margin:0;
  padding:0;
  font-family: Verdana, Tahoma, sans-serif;
}

.item-header {
  grid-area: header;
	/* background-color: white; */
}
.item-navi {
  grid-area: navi;
	/* background-color: white; */
  padding: 10px;
}
.item-main {
  grid-area: main;
	/* background-color: #5394CF; */
  background: rgba(236,242,246,0.6);
  padding: 10px;
  margin: 10px;
  box-shadow: -1px 11px 15px 0px #041945;
}
.item-sidebar {
  grid-area: sidebar;
	/* background-color: white; */
  padding: 10px;
}
.item-footer {
  grid-area: footer;
	/* background-color: #5394CF;*/
  background-color: #EBF2F6;
  padding: 10px;
}

.container {

  display: grid;
  grid-row-gap: 10px;
  column-gap: 10px;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas:
    "header header header header header"
		"navi navi navi navi navi"
    ". main main main sidebar"
    "footer footer footer footer footer";
}

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 80%;
}
/* Klassen für Extrabilder */
.klein {
  width: 111px;
}

.pfeil {
  /* isplay: inline nimmt display: block raus */
  display: inline;
  width: 70px;
}

.logo {
  width: 300px;
  margin-left: auto;
  margin-right: 20px;
  box-shadow: -1px 11px 15px 0px #041945;
}



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

	.container {
	  display: grid;
	  grid-template-columns: 1fr;
	  grid-template-rows: auto;
	  grid-template-areas:
	    "header"
			"navi"
	    "main"
			"sidebar"
	    "footer";
	}

img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 70%;
    }

    .klein {
    width: 111px;
    }

    .logo {
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    }

  }