/* ------------------------------------------------------ */
/* --------------- Grid - Anweisungen ------------------- */
/* ------------------------------------------------------ */
* { padding: 0; margin: 0; }

body {
	display: grid;
	gap: 8px;
	padding: 0.3rem 0.3rem 0.3rem 0.3rem;
}



@media (min-width: 40rem) {	/*  Wichtig für die Darstellung bei Handys und co. */

	body {
		grid-template-columns: 3fr 1fr; 	/*  Spalten */
		grid-template-rows:   auto auto auto auto;
		padding: 0.3rem 3.0rem;
	}
	
	header {
		grid-column: 1 / 4;	/* Spalten von Anfang bis Ende () grid-column: 1 / -1; */
		grid-row: 1 / 2;			/* Zeilen  */ 
	}

	footer {
		height:2rem;
		grid-column: 1 / 4;		/* Spalten von Anfang bis Ende */
		grid-row: 6 / 7;			/* Zeilen  */ 
	}
	
	nav {
		height:3rem;
		grid-column: 1 / 4;		/* Spalten von Anfang bis Ende */
		grid-row: 2 / 3;			/* Zeilen  */ 
	}

	.div1 {
		grid-column: 1 / 3;   	/* Spalten */ 
		grid-row: 3 / 6;			/* Zeilen  */ 
	}

	.div2 {
		grid-column: 3 / 4;   	/* Spalten */ 
		grid-row: 3 / 6;			/* Zeilen  */ 
	}
}


/* ------------------------------------------------- */ 
/* ----------- Grid für die Class = div1 ----------- */ 
/* ------------------------------------------------- */ 

	.div1 {
		display:grid;
	}

@media (min-width: 60rem) {	/*  Wichtig für die Darstellung bei Handys und co. */

	.div1 {
		grid-template-columns: 1fr 1fr; 	
		grid-template-rows:    auto;
	}
	
	.div1_1 {
		grid-column: 1 / 2;	/* Spalten von Anfang bis Ende () grid-column: 1 / -1; */
		grid-row: 1 / 2;
	}

	.div1_2 {
		grid-column: 2 / 3;	/* Spalten von Anfang bis Ende () grid-column: 1 / -1; */
		grid-row: 1 / 2;
	}
}

/* ------------------------------------------------- */ 
/* ----------- Grid header & footer ----------- */ 
/* ------------------------------------------------- */ 

header {  
	display:grid;
	grid-template-columns: auto; 	
	grid-template-rows:    auto;
}

footer {
	display:grid;
}

/* ------------------------------------------------- */ 
/* ----------- Weitere Formatierungen -------------- */ 
/* ------------------------------------------------- */ 
	header, .div1, .div2, footer, nav {
		border-radius: 0px 8px 8px;
		border-width: 2px;    /* --------Dicke ----------------- */ 
		border-style: solid;
		border-color:silver;
	}

	body {
		background-color:#000;
	}
	
	header {
		background-color:#708090;
	}

	nav {
		background-color:#222;
	}
	footer {
		background-color:#222;
	}

	.div1 { 
		background-color:#444;
	}

	.div2 {
		background-color:#222;
	}