/* Schriftarten */
/*@import url('https://fonts.googleapis.com/css2?family=Lacquer&display=swap');*/
@import url('https://fonts.googleapis.com/css2?family=Chango&display=swap');



* {
  box-sizing: border-box;
}

h1,h2,h3 {
	font-family: "Chango", system-ui;
	font-weight: 400;
	font-style: normal;
	color: black;
}

body {
	
	/* Eigenschaft: Eigenschaftswert;*/
	/*background-color: #5ea1b5;*/
	background-color: white;
	
}


/* Styled allgemein alle Divisions */
div {
	color: #0099cc;
	
}


/* class */

.headline {
  background-color: #0099cc;
  color: 00ccff;
  width: 66%;
  margin: left; /* zentriert Boxen */
  padding: 20px;
  text-align: center; /* zentrierte Schrift */
  
}


.grid-container {
  display: grid;
  gap: 10px;
  /*background-color: grey;*/
  /* Standard Handy-Layout: alles untereinander */
  grid-template-columns: 1fr;
  grid-template-areas:
    "header"
	"menu"
    "content"
    "facts"
    "footer";
}



.content {
  grid-area: content;
}



.header {
  grid-area: header;
  background-color:  #0000b3;
  text-align: center;
  color: white;
  padding-top: 20px;
  padding-bottom: 20px;
  font-family: "Chango", system-ui;
  font-size: 40px;
  }

/*
.header > h1 { 
  font-size: 40px;
  
}
*/



/*.menu {
  grid-area: menu;
  }
 */ 
.menu ul { /* Alle Unordered Lists in Menu */
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu li { /* Alle Listenpunkte in Menu */
  padding: 2px;
  margin-bottom: 7px;
  background-color: LightCoral;
  color: white;
}

.menu li:hover { /* hover - wenn ich mit dem Maus-Cursor drüber fahre */
  background-color: #D3D3D3;
}









.facts {
  grid-area: facts;
  border: 1px solid #0099cc;
  background-color: #D3D3D3;
  padding: 10px;
}

.facts > h2 {
  font-size: 20px;
}

.facts li {
  margin-bottom: 5px;
}

.footer {
  grid-area: footer;
  background-color: black;
  color: white;
  text-align: center;
}



/* MEDIA QUERIES */

/* Standardmäßig werden die divs 100% des Fensters breit - span 6 */
/* Funktioniert nur, wenn die div class vorher richtig angewendet wurde */


/* AB 768px: 2 Spalten (5/6 + 1/6) */
@media (min-width: 768px) {
  .grid-container {
    grid-template-columns: 4fr 2fr;
    grid-template-areas:
      "header header"
      "content facts"
      "footer footer";
  }
}


@media (min-width: 768px) {
  .header { grid-area: 1 / span 6; }
  .content { grid-area: 2 / span 4; }
  .facts { grid-area: 2 / span 2; }
  .footer { grid-area: 3 / span 6; }
}