body {
	display: grid;	
	margin: auto;
/*	margin: auto;*/
	font-family: roboto, Open Sans, verdana, arial, sans-serif;
	font-size: clamp(1rem, 1.5vw, 2rem);/*macht Schrift responsiv*/
	font:  100%/1.3rem;					/*0.9rem;*/
	line-height: 1.2rem; 				/* rem = Zeilenabstand*/
	color: #666;						/*Schriftfarbe*/

	grid-template-columns: 1fr;
	grid-template-areas:
		"header" /*menu*/
		"sidebar"
		"intro"
		"aside"
		"main"
		"section"
		"footer";			
	padding: .4em; 					/*1em etwas sehr breit - außen Rahmen Rand*/
	background-color:  b5e82;
	background-repeat: no-repeat;	/* sonst vererbt sich backround */
}	

	
.head {
	text-indent:0.2em; /*Abstand zum Punkt */
	display:inline-block;
	color:#fff;
	font-family:roboto, Open Sans, Verdana;
    font-size: 2.2vw; /*damit wird schrift responsiv! top:1px; width:100%;*/ 
    font-weight:bold;
	font-style:italic;	
	height:2.3em;
	line-height:2.3em;
/*	text-decoration:0; ?*/
	text-shadow:1px 1px 0px #3b5e82;
/*	width:960px; ?*/
	order: 1;
	}
	
img1 {
  	float: left;						/*für text neben Bild und Abstände um das Bild herum - erweitern für small to large */
  	margin:10px 5px 0px 10px;
  	border-style: none; border: 0;
  	}
  
img {
	margin: 10px 5px 5px 0px; / orul  	/*Abstände um das Bild herum */
	clear: both; 
	height: auto; width: auto;
	border-style: none; border: 0;
	}
	
h1		{font-size: 2em;   color: #5b81a6; margin-top: 1px; padding-left: 5px; }
h2		{font-size: 1.5em; color: #5b81a6; margin-top: 1px; padding-left: 5px; }
h3,h4,h5{font-size: 1.2em; color: #5A7583; margin-top: 1px; padding-left: font-weight: normal; }
 
a:link {text-decoration:none; color: #336699; } 
a:active {text-decoration:none; color:#330066; } 
a:hover {text-decoration:none; color:#ff6633; background: #fee99e; } 
a:visited {text-decoration:none; color:#003366; } 

.bee   { background: #f0e18d; padding: 2px; } /* #f0e18d */
#beetext { color: #fee99e; } /* <span id="beetext"> */
.extra { background: #fff; color: #5A7583; font-weight:small; font-size: 0.9rem; line-height: 1.8; font-style:italic; border-radius: 5px; padding: 1.2em; }

/* smal, mobile first ============================================================================== */

.container {
	display: grid;
  	grid-template-columns: 100%; 1fr;
    height:100vh; 
    margin:0px auto;*/
  	grid-template-rows: 100%/*25% auto 200px;*/ 
	}

grid-template-areas:  
 	{
    display: grid;	
	margin: auto;
	}

 .header {
  grid-row: 1 / 2;
  background-color: #aabbcc;
  display: flex; height: 60px; 
   /*align-items: center;vertical-align: middle;*/
  text-align: justify; /*font-weight:bold;*/
  color:#fff;
	}

h1 	{ font-size: 2.3vw; font-size 2.0rem; line-height: 1.3; 
  	margin-left: 5px;
  	color: #89a2b6;
  	font-style:italic;
}

.menu {
/*  grid-column: 3 / 4;*/
  grid-row: 2 / 3; 
  display: flex; height: 48px;
/*  float: right;*/
  background-color: #aabbcc;
 	}

.sidebar {
  /*display: none;*/ 
  background-color: #fff;
  padding: 8em; 
  font-size: 0.9rem;
  padding:0.1em;
  height: 300 px;
  order: 2;
	}
	
.intro { 
/*  grid-column: 2 / 3;*/
  grid-row: 3 /7;
  background-color: #fff; 	/* hautton - repeat */
  padding: 0.8em;  
  border-radius: 10px;
  font-size: 0.8rem;
  color:#9A7B5D; 			/* wo und wie pflanzt sich das fort? */	
  order: 1;
 }	

.aside {
  grid-column: 4 / 5;
 /* grid-row: 2 / 3;  */ 
  background-color: #f7f2df;
  border-radius: 10px;
  padding:0.8em; 
} 

.main {
  grid-column: 5 / 6;

  padding: .5em;
  border-radius: 10px;
}

.section {
	grid-column: 6 / 7;
  /*  grid-row: 4 / 5; */
  background-color: #f7f2df;
  padding: .8em;
  border-radius: 10px;
  font-size: 0.9rem; /* margin-bottom: 12px;*/ 
  order: 4;
}

.footer {
 	grid-column: 7 /8 ;
/*   grid-row: 2 / 5;
  	width:960px;*/
	height: 5em;
	background-color: #aabbcc;
	padding: .5em; 
	float:left;
}
 
/* 2 medium =@media screen and (min-width: 600px) =====================/*0.1em ======================================================== */
@media (min-width: 40em)
 { 
body {
	.grid-container {
    display: grid;
	margin: auto;
	background-color: #aabbcc; 		/*Taubenblau*/

  }
  
.container { 
 	grid-template-columns: repeat/2; 1fr);
	grid-template-rows: 200px auto; 
  /*  grid-template-columns: 150px auto 25% 250px; */
    grid-template-areas:  
      "header header" 
      "sidebar intro"
	  "sidebar main"
	  "sidebar section" 
      "footer footer "; 
 	 } 
	 
.grid-item {
  /*background-color: (200, 220, 230, 0.8);  #c8dce6; grundiert alles hellblau*/
  padding: 0.1em; /* 0.5em; Abstand Inhalt zu item-box*/
	}

.header {
  grid-column: 1 / 4;
  grid-row: 1 / 2;
/*  background-color:#aabbcc; 6c849c;6b849d;/*6584a2/*3b5e82; /*5584b3; /*~~~++~*/
  display: flex;
  height: 60px; 
  align-items: center; /*vertical-align: middle;*/
  text-align: justify; /*font-weight:bold;*/
  color:#ffffff;
  }

.menu {
  grid-column: 3 / 4;
  grid-row: 1 / 2;
  display: flex;
  height: 60px;
  align-items: right; 
  /*background-color: #aabbcc;*/
}


.sidebar {
  display: grid; 
  grid-column: 1 /2;
  grid-row: 2 / 6;                                                                                                                                                            ;
  font-size: 10 px; font-size: 0.9rem;	/* 3.2vw;*/
  background-color: #D5E3F0;
  padding: 0.5em;
  border-radius: 10px;
  width: 220px; /*textarea? Breite ist maximal 50% oder 400px */
  height: auto; 						/*width: auto;*/
  }
  
.intro { 
  grid-column: 2 / 3;
  grid-row: 2 /3;
/*  background-color: #f7f2df;*/
  border-radius: 10px;
  padding:0.3em;
  font-size: 0.8rem;
}

.aside {
  grid-column: 3 / 4;
  grid-row: 2 / 3;  
/*vererbt: background-color: #f7f2df; */
  border-radius: 10px;
  padding:0.3em;
}  

.main {
  grid-column: 2 / 4;
  grid-row: 3 / 4; 
  background-color: #fafafa;
  padding: .5em;
  border-radius: 10px;
}

.section {
  grid-column: 2 / 4;
  grid-row: 4 / 5; 
  	}
	
.footer {
  height: 1em;
  grid-column: 1 / 4;
  grid-row: 5 / 6; 
  position: absolut/*fixed*/;
  display: flex;
  width: minmax (320px, 600px);
  justify-self: center;  /* Der Footer soll sich der Breite nach den drüberliegenden Column anpassen: minmax(320px, auto);*/ 
  padding: 0.5em;
  bottom: 0;
  width: 100%;
/*  background-color: #aabbcc;*/ 
  border-top: 0px;
	}
.hidden-on-mobile {
    /* Diese Area wird nun angezeigt und bekommt ihren Platz */
    display: grid; /* Oder 'block' je nach Bedarf */
    grid-area: sidebar;
	}

.sidebar {
  grid-column: 1 /2 ;
  grid-row: 2 / 5;
  font-size: 10 px; font-size: 0.9rem;	/* 3.2vw;*/
  background-color: #D5E3F0;
  padding: 0.5em;
  border-radius: 10px;
 /* width: minmax (360px, 500px);textarea */
  width: min-max(20%, 25%); /* Breite ist maximal 50% oder 400px */
  height: auto; 						/*width: auto;*/
  }
}


/* 2 large, PC,  breites Browserfenster @media screen and (min-width: 950px5=====( min-width: 44.001em)=========================================== */

@media (min-width: 60em)
{
body {
.grid-container {
    display: grid;	
	grid-gap: 2px;margin: auto;	
/*.grid-item { ? erforderlich?*/
	background-color:  #aabbcc; 		/*grundiert alles blaugrau und vererbt da weiter! background: url(../navi/bg_links.gif);*/ 
 /* padding: 0.1em;/* /* 0.5em; Abstand Inhalt zu item-box
	}??  */
	padding: 0.8em; /*1em etwas sehr breit - außen Rahmen Rand*/
	
	grid-template-colums: repeat/3; 1fr);
	grid-template-areas: "header" 	"header"  "header"
			 			"sidebar" 	"intro"	  "aside"
			 			"sidebar" 	"main" 	  "main"
						"sidebar" 	"section" "section"
			 			"footer"	"footer"  "footer";

/*	background-color: orange;*#aabbcc;	 Taubenblau*/
   }
	 
	
.header {
  grid-column: 1 / 4;
  grid-row: 1 / 2;
 /* background-color: #aabbcc;6c849c;6b849d;/*6584a2/*3b5e82; /*5584b3; /*~~~++~*/
  display: flex; height: 60px; 
  align-items: center; /*vertical-align: middle;*/
  text-align: justify; /*font-weight:bold;*/
  color:#ffffff;}


/*.menu {
  grid-column: 3 / 4;
  grid-row: 1 / 2;
  display: flex; /* height: 60px; */
  align-items: center; 
  background-color: #aabbcc;
}*/

.sidebar {
  grid-column: 1 /2 ;
  grid-row: 2 / 6;
  font-size: 10 px; font-size: 0.9rem;/* 3.2vw;*/
  background-color: #D5E3F0;  /*hellblau* Rahmen umd sidebar*/
  padding:0.1em;
	}
  
.intro { 
  grid-column: 2 / 3;
  grid-row: 2 /3;
  background-color: #f7f2df;
  border-radius: 10px;
  padding:0.3em;
  font-size: 1rem;
}

.aside {
  grid-column: 3 / 4;
  grid-row: 2 / 3;  */
  /*background: url(../navi/bg #f7f2df; .gif);  */
  border-radius: 10px;
  padding:0.3em;
} 

.main {
  grid-column: 2 / 4;
  grid-row: 3 / 4; 
  width: minmax (320px, 600px);
 							 /*background-color: #fafafa;*/
  padding: .5em;
  border-radius: 10px;
	}

.section {
  grid-column: 2 / 4;
  grid-row: 4 / 5; 
  	}

.footer {
  height: 1em;
  grid-column: 1 / 4;
  grid-row: 5 / 7; 
  position: absolut/*fixed*/;
  display: flex;
  width: minmax (320px, auto); /* Der Footer soll sich der Breite nach den drüberliegenden Column anpassen: minmax(320px, auto);*/ 
  justify-self: center;  
  padding: 0.5em;
  bottom: 0;
  width: 100%;
  background-color: #aabbcc;
  border-top: 0px;
}
}