#header { grid-area: header; }
#main { grid-area: main; }
#footer { grid-area: footer; }
@media screen and (min-width: 1200px){
	body{
		margin: 0;
		background-image: url("../photo/tree-38221491.jpg");
		font-family: sans-serif;
		font-size: large;
	}
	#gridcontainer {
		display: grid;
		grid-template-areas:
			'header header header header'
			'main main main main'
			'footer footer footer footer';
		
	}
	.maindiv {
		margin-top: 9%;
		height: 26%;
		background-color: white;
		display: flex;
		flex-flow: row;
		flex-wrap:nowrap;
	}
	#header{
		display: flex;
		height: 400px;
		justify-content: center;
		align-items: center;
		background-image: linear-gradient(-90deg, rgba(255, 255, 255, 0) 5%, rgba(255, 255, 255, 0.671) 25%, rgba(255, 255, 255, 0.87) 50%, rgba(255, 255, 255, 0.671) 75%, rgba(255, 255, 255, 0) 95%);
	}
	#onlinelink{
		position: absolute;
		left: 50%;
		margin-left: 350px;
		top: 6%;
		cursor: pointer;
	}
	#massage {
		flex-flow: row-reverse;
		background-image: linear-gradient(-90deg, #ffffff, #ffffff 30%, rgb(216, 154, 104) 85%);
	}
	#beratung {
		background-image: linear-gradient(90deg, #ffffff, #ffffff 30%, rgb(247, 205, 115) 85%);
		margin-top: 0;
	}
	#autogenesTrening {
		background-image: linear-gradient(90deg, #ffffff, #ffffff 30%, #9b651f 85%);
	}
	#ich {
		flex-flow: row-reverse;
		background-image: linear-gradient(-90deg, #ffffff, #ffffff 30%, rgb(94, 139, 42) 85%);
		margin-top: 150px;
	}
	.linkdiv {
		visibility: hidden;
		opacity: 0;
		transition: padding-top 1s, opacity 1s;
		position: absolute;
		margin-top: -50px;

	}
	.link {
		display: flex;
		margin-top: 20px;
		width: 120px;
		height: 40px;
		text-decoration: none;
		background-color: rgb(55, 47, 104);
		color: white;
		align-items: center;
		justify-content: center;
		border-bottom-right-radius: 10px;
		border-top-left-radius: 10px;
		border-color: #682768;
		box-shadow: 1px 2px 4px black;
	}
	.menudiv:hover + .linkdiv, .linkdiv:hover {	
		visibility: visible;
		padding-top: 60px;
		opacity: 1;
	}
	.link:active {
		border-style: groove;
		background-color: #7d73bf;
		
	}
	.img {
		width: 100%;
		height: auto;
		
		box-shadow: 1px 2px 5px black;
	}
	.menubut {
		margin-top: 7px;
		width: 30px;
		height: 4px;
		background-color: black;
		cursor: pointer;

	}
	.menudiv {
		display: flex;
		cursor: pointer;
	}
	.menudiv > div {margin-top: 24px; margin-right:5px; }
	/**.titel h1::before{
		content: "";
		position: absolute;
		height: 10px;
		width: 10px;
		border-bottom-style: solid;
		border: 5px 5px 5px 5px;
		box-shadow: 1px 2px 1px black
		border-color: white;
		margin-left: -30px;

	}**/
	.titel {
		margin-top: 20px;
		color: rgb(55, 47, 104);
		cursor: pointer;
	}
	/**.contenttext::before {
		content: url(../photo/anfuerungszeichen.png);
		display: flex;
		justify-content: flex-end;
		margin-right: -70px;
	}
	.contenttext::after {
		content: url(../photo/anfuerungszeichen1.png);
		margin-left: -90px;
	}**/
	.contentimg {
		align-self: center;
		width: 100%;
	}
	/**.contentimg div {
		position: absolute;
		height: 330px;
		width: 850px;
		background-image: linear-gradient(to right, rgba(255,255,255,0.6) 1%, rgba(255,255,255,0) 60%);
	}**/
	.contenttext {
		display: flex;
		text-align: center;
		align-self: center;
		max-width: 40%;
		padding: 1.8%;	
	}
	.contenttext > img{
		width: auto;
		height: 30px;
		margin-left: 3%;
		margin-right: 3%;
	}
}