body {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	grid-template-areas:
		"header"
		"name"
		"navi"
		"instrument"
		"text"
		"kontakt"
		"footer";
		
	/* Wichtig für Handy-Scrollen */
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;

	/* verhindert horizontales Wischen */
	overflow-x: hidden;
}

	
.header { grid-area: header; }
.name { grid-area: name;}
.navi { grid-area: navi;}
.instrument {grid-area: instrument;}
.text { grid-area: text; }
.kontakt { grid-area: kontakt; }
.footer { grid-area: footer; }

.header {
	background-color:  #A9D18e;
	color: #222;
	font-size: clamp(1.2rem, 3.5vw, 3rem);
	font-family: Garamond, Verdana, Arial, sans-serif;
	font-weight: bold;
	text-align: center;
	padding-top: 20px;
}

.name {
	background-color:  #A9D18e;
	color: #222;
	font-size: clamp(1rem, 2.2vw, 3rem);
	font-family: Garamond, Verdana, Arial, sans-serif;
	font-weight: bold;
	text-align: center;
	padding-bottom: 20px;
	padding-top: 10px;
}

.navi {
	background: #fff;
	font-size: clamp(0,2rem, 0.5vw, 3rem);
	font-family: Garamond, Verdana, Arial, sans-serif;
	font-weight: bold;
}

.navi ul {
	max-width: 20rem;
	margin: auto;
	padding: 10px;
	background: #fff;
	list-style: none;
	border-radius: 0.2rem;
	display: block;
}
	
.navi li {
	border: 1px solid black;
	border-radius: 0.2rem;
}	

.navi a {
	text-decoration: none;
	color: #222;
	text-align: center;
	display: block;
	padding: 0.5rem 1rem;
}

.navi a:hover {
	color: #A9D18e;
	background: #222;
}
    
.instrument {
	color: #222;
	font-size: clamp(1rem, 1.6vw, 2rem);
	font-family: Garamond, Verdana, Arial, sans-serif;
	font-weight: bold;
	text-align: center;
}

.text {
	color: #222;
	font-size: clamp(1rem, 1.5vw, 5rem);
	font-family: Garamond, Verdana, Arial, sans-serif;
	font-weight: bold;
	text-align: left;
	padding-left: 10px;
	padding-right: 10px;
}

.kontakt {
	color: #222;
	font-size: clamp(1rem, 1.6vw, 5rem);
	font-family: Garamond, Verdana, Arial, sans-serif;
	font-weight: bold;
	text-align: center;
}

.footer {
	background-color:  #A9D18e;
	color: #222;
	font-size: clamp(1rem, 1vw, 3rem);
	font-family: Garamond, Verdana, Arial, sans-serif;
	font-weight: bold;
	color: #fff;	
	text-align: right;
}





/*Desktop Layout */
@media screen and (min-width:1000px)

{

body {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-template-rows: auto;
	grid-template-areas:
		"header header header header margret"
		"name name name name margret"
		"navi navi navi navi margret"
		"instrument text text text kontakt"
		"footer footer footer footer footer";
}

	
.header { grid-area: header; }
.name {grid-area: name}
.anrede { grid-area: anrede; }
.margret { grid-area: margret;}
.navi{ grid-area: navi;}
.text {grid-area: text; }
.kontakt { grid-area: kontakt; }
.footer { grid-area: footer; }

.header {
	background-color:  #A9D18e;
	color: #222;
	font-size: clamp(1rem, 3.5vw, 3rem);
	font-family: Garamond, Verdana, Arial, sans-serif;
	font-weight: bold;
	text-align: center;
	padding-top: 20px;
}

.name {
	background-color:  #A9D18e;
	color: #222;
	font-size: clamp(1rem, 2.2vw, 3rem);
	font-family: Garamond, Verdana, Arial, sans-serif;
	font-weight: bold;
	text-align: center;
	padding-bottom: 20px;
}


.navi {
	background: #fff;
	font-size: clamp(1rem, 2.2vw, 3rem);
	font-family: Garamond, Verdana, Arial, sans-serif;
	font-weight: bold;
}

.navi ul {
	max-width: 65rem;
	margin: auto;
	padding: 15px;
	background: #fff;
	list-style: none;
	border-radius: 0.2rem;
	display: flex;
	justify-content: space-between;

	}

	
.navi li {
	border: 1px solid black;
	border-radius: 0.2rem;
	
    }	

.navi a {
	text-decoration: none;
	color: #222;

	text-align: center;
	display: block;
	padding: 0.5rem 1rem;
    }

.navi a:hover {
	color: #A9D18e;
	background: #222;
    }

    
.instrument {
	color: #222;
	font-size: clamp(1rem, 1.6vw, 2rem);.
	font-family: Garamond, Verdana, Arial, sans-serif;
	font-weight: bold;
	text-align: center;
}

.text {
	color: #222;
	font-size: clamp(1rem, 1.8vw, 5rem);
	font-family: Garamond, Verdana, Arial, sans-serif;
	font-weight: bold;
	text-align: left;
	padding-left: 100px;
	padding-right: 100px;
}

.kontakt {
	color: #222;
	font-size: clamp(1rem, 1.6vw, 5rem);
	font-family: Garamond, Verdana, Arial, sans-serif;
	font-weight: bold;
	text-align: center;
}


.footer {
background-color:  #A9D18e;
	color: #222;
	font-size: clamp(1rem, 1vw, 3rem);
	font-family: Garamond, Verdana, Arial, sans-serif;
	font-weight: bold;
	color: #fff;	
	text-align: right;
}

}