@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url('material-icons.woff2') format('woff2');

}  
  



@font-face {
  font-family: 'Merriweather';
    font-style: normal;
  font-weight: 400;
   src: local (''),  
  url('merriweather.ttf') format('truetype'),
   url('merriweather.ttf') format('embedded-opentype'); 
  font-display: swap;
}









*
{
margin: 0;
padding: 0;
border: none;
outline: none;

font-family: 'Merriweather';  hyphens: auto;
}
html {
	scroll-behavior: smooth;
}


body {



background-image: url('hintergrund.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  

}

li {margin-left:36px;}

header {display:flex; justify-content:center; align-items:center; gap:12px;}
header img {width:10vw;}
header h1 {font-size:clamp(20px,3vw,40px)}
header h2 {font-size:clamp(16px,2.4vw,32px)}

main {  display: grid;
  grid-template-columns: auto auto auto; 
   padding: 10px;
   gap:1%; gap:20px; margin:0 auto; max-width:1400px; margin:0 auto;}
figure {background:#fff; padding:10px; border-radius:20px; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.2));  margin: 0; width:calc(100% - 10px); display:flex; flex-direction:column; align-items:center;}
figure img {display:block; max-width:90%; height:50%;}

section {	display:flex; justify-content:center;}


section.dunkel {
	background-image: url('hg-dunkel.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
}


article {max-width:1400px; padding:20px;}

footer {
	background-image: url('hg-gruen.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
}



/* ~~~~~~~~~~~~~~ Material ~~~~~~~~ */

.material {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  color: #a40201;
  font-size:30px;
}

.materialgross {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  color: #a40201;
  font-size:5vw !important;
}


.materialfest {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 60px;
  color: #fff;
  text-decoraion:none;
  position:sticky;
  top:32px;
  margin-right:10px;
  float:right;
  transition: 2s all; 
}

.materialfest:hover {transition: 2s all; color:rgba(0,0,0,0.5); transform: rotate(360deg);}


.materialbutton {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 40px;
  width:48px; height:48px;
  color:#fff;
cursor:pointer;
 margin:0 auto;
	transition:2s all;
background:#398ccb;
	overflow:hidden;
	border: thin solid white;
	border-radius:50%;
	 display:flex;	justify-content : center;
	 display:flex; justify-content: center; align-items:center;
}
.materialbutton:hover {
	background:#000;
	transition:all 1.5s;
	transform: rotate(360deg);
	
}

	@media screen and (max-width: 800px) {
		.materialbutton{	 font-size: 30px;  width:38px; height:38px;}

		
	}







/* ~~~~~~~~ Datenschutz und Impressum ~~~~~~~~ */

#datenschutztext,#impressumtext,#kontakttext{
	position:fixed;
	overflow:auto;
	background-image: url('hg-gruen.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	color:#fff;
	border-radius:10px;
	border: 1px solid #fff;
	position:fixed;
	top:-20px;
	padding:0px;
	left:50%;
	right:50%;
	width:0%;
	height:0%;
	z-index:100000006;
	transition: all 2.5s;
}

 


#datenschutztext p,#impressumtext p,#kontakttext p{color:#fefefe;}
#datenschutztext h1,#impressumtext h1,#kontakttext h1{color:#fefefe;}
#datenschutztext h2,#impressumtext h2,#kontakttext h2{color:#fefefe;}
#datenschutztext a, #impressumtext a,#kontakttext a{text-decoration:none; color:#fefefe;}
#datenschutztext:hover,#impressumtext:hover,#kontakttext:hover{filter: brightness(50%);}
#datenschutztext:target,#impressumtext:target,#kontakttext:target{top:100px; width:50%; height:75%; 	padding:10px; margin-left:-25%;}

@media screen and (max-width: 800px) {
	#datenschutztext:target,#impressumtext:target,#kontakttext:target{top:10px; width:90%; height:90%; 	padding:10px; margin-left:-49%;}
}

#video {max-width:100vw; max-height:90vh;}
#videotxt {
	position: absolute;
	top:10%; transform: translate(-50%, -50%);
	margin-right:20%;
	font-size:clamp(26px,5vw,60px);
	opacity: 0;
	animation: flyIn 2.8s ease-out forwards;
	animation-delay: 2.5s;
  }
/* Definition der Flug-Animation */
@keyframes flyIn {
  0% {
    opacity: 0;
    transform: translateY(-150px); /* Startet 50px weiter oben */
  }
  100% {
    opacity: 1;
    transform: translateY(0);     /* Fliegt an die originale Position */
  }
}
#kopf {position:relative; display:flex; justify-content:center; margin:20px 0; 	background-image: url('hg-gruen.jpg');}