/*Quelle :  https://kulturbanause.de/blog/css-grid-layout-module/#responsive-css-grids  */
body {
 height:100vh; 
  display: grid; 
  grid-template-rows: 100px 20px 4fr 100px; 
  grid-template-columns: 100%; 
  grid-template-areas:  
    "header" 
    "nav" 
    "main" 
    "footer" 
  ; 
      font-size: 13px;
      background-color:white;
} 
	header {grid-area : header;
		justify-self: center ;
 		transform: scale(0.6);}
main {  grid-area: main;
		text-align: center;
				max-width: 80em;
/*		background:gold;	*/
		transform: scale(1);}	
article {
			text-align: left;
		max-width: 45em;
}		
nav {  grid-area: nav;
		transform: scale(1);}	
iframe {
			justify-self: center ;
		transform: scale(0.9);}
footer {grid-area : footer;
		transform: scale(0.9); }						

@media screen and (min-width: 44.001em) { 
  body { 
    display: grid;
    grid-template-rows: 130px 1fr 100px; 
    grid-template-columns: 10% 90%; 
    grid-template-areas:  
      "nav header" 
      "nav main" 
      "nav footer" 
    ; 
    max-width: 150vh;
    font-size: 14px;
  } 
  	header {grid-area : header;
  	 		 		display: table;	/* zentriert */
  		margin-left: auto;
  		margin-right: auto;	
		transform: scale(0.8);}
	main {  grid-area: main;
		transform: scale(0.9);}
	nav {  grid-area: nav;
		transform: scale(1);}	
	iframe {transform: scale(1);}
	footer {grid-area : footer;
		justify-self: center ;
		transform: scale(1); }	
}