*{
	margin: 0;
	padding: 0;
	text-decoration: none;
}
body {
	background-color: lightblue;
  }
.welcome{
	width: auto;
	height: 100dvh;
	height: 100vh;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	position: relative;
	background-image: url(quellenjagers.webp);
	/*Quelle: jäger.co.at*/
}
.welcometext{
	padding: 0.5em;
	position: absolute;
	top: 45%;
	left: 50%;
	transform: translate(-50%,-50%);
	font-size: 1em;
	color: silver;
	border: solid 1px silver;
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.1);
	/*box-shadow: 0 0 8px 8px darkgreen;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);*/
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	text-align: center;
}
.wrapper{
	display: flex;
	/*flex-wrap: wrap;*/
	flex-direction: column;
	margin: -3.5em 8% 0 8%;
	z-index: 1;
	position: relative;
}
.wrapperhead{
	font-size: 3em;
	text-align: center;
}
.one{
	flex:  0 0 33.3%;
	background-color: red;
}
.onechild{
	padding: 0 1em 1em 1em;
}
table{
	width: 100%;
}
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
tr:nth-child(even) {
  background-color: #D6EEEE;
}
.two{
	flex: 0 0 33.3%;
	background-color: white;
}
.twochild{
	padding: 1em 2.5em 1em 2.5em;
}
.twochildimage{
	align: center;
	width: 100%;
	height: 100%;
}
.three{
	flex: 0 0 33.3%;
	background-color: red;
}
.threechild{
	padding: 0 1em 1em 1em;
}
details{
	margin: 0 0 -6px 0;
}

.grid-container{
	display: grid;
	grid-template-areas:
	"sidebar"
	"oben"
	"unten";
}
.sidebar{
	grid-area: sidebar;
	border: solid 8px lightgrey;
	padding: 5px;
}
.oben{
	grid-area: oben;
}
.unten{
	grid-area: unten;
}

.middle{
	background-color: lightgrey;
}
.video{
	padding:56.25% 0 0 0;
	position:relative;
	/*margin: 0 5em 0 5em;*/
}
.videochild{
	height:100%;
	left:0;
	position: absolute;
	top:0;
	width:100%;
}
.knopf{
	display: flex;
	justify-content: center;
 	align-items: center;
}
.abstand{
	position: relative;
	height: 10px;
}
#button{
	padding: 2em 2em;
	background-color: red;
	border: none;
}
#button:active{
	background-color: green;
}
@media screen and (min-width: 660px) {
  .wrapper {
	flex-direction: row;
  }
 	.grid-container{
	display: grid;
	grid-template-areas:
	"sidebar sidebar oben oben oben oben oben"
	"sidebar sidebar unten unten unten unten unten";
	}
	.welcome{
	width: auto;
	height: 100dvh;
	height: 100vh;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	position: relative;
	background-image: url(quellenjager.webp);
	/*Quelle: jäger.co.at*/
	}
}

@media screen and (min-width: 1500px) {
  .wrapper {
  margin: -3.5em 0 0 0;
	left: 50%;
	transform: translate(-50%);
	max-width: 1400px;
  }
  .grid-container{
	display: grid;
	max-width: 1400px;
	position: relative;
	left: 50%;
	transform: translate(-50%);
	grid-template-areas:
	"sidebar sidebar oben oben oben oben oben"
	"sidebar sidebar unten unten unten unten unten";
	}
}