@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');


body {
	/* Eigenschaft: Eigenschaftswert*/
	background-color: grey; /*Farbwert RGB Hexadezimal */
}

p {  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "width" 100;
	font-size:22px;
	
}
ul{ font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "width" 100;
	font-size: 22px;
	
}

	
	
	
	
	
	
	
	



.Impressum {
	
}
	
	

.grid-container {
  display: grid;
  grid-template-areas:
  'header'
  'menu'
  'main'
  'facts'
  'footer';
  background-color: grey;
  gap: 10px;
}

.header {
  grid-area: header;
  background-color: blue;
  text-align: center;
  color: #ffffff;
}
.menu li {
	background-color:yellow;
	width: 70%;
	padding: 10px;
  border: 5px dotted  gray; 
  margin: 20px;
}
.menu {
  grid-area: menu;
  
}

.content {
  grid-area: main;
  background-color: grey;
}

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

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

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

/* Desktop Ansicht - Area 2 - 3spaltig */

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