html {
	background-color: #000;
}


body {
  font-family: 'Sans Serif', Arial, sans-serif;
  background-color: #000;
  color: #000;
  font-size: 16px;
  line-height: 32px;
  font-weight: 500;
  overflow-x: hidden; /* Hauptfix */
            width: 100%; /* Stellt sicher, dass keine Breite über den Viewport hinausgeht */
            max-width: 100vw; /* Hilft, Überläufe durch Subpixel zu vermeiden */
            margin: 0; /* Standard-Margin entfernen */
            padding: 0; /* Standard-Padding entfernen */
            position: relative; /* Kann bei manchen iOS-Problemen helfen */
}

h1 {
  margin-top: 0px;
  margin-bottom: 0px;
  font-family: 'Serif Display', sans-serif;
  font-size: 75px;
  line-height: 120%;
  font-weight: 600;
  text-transform: capitalize;
}

h2 {
  margin-top: 0px;
  margin-bottom: 24px;
  font-family: 'Serif Display', sans-serif;
  font-size: 64px;
  line-height: 110%;
  font-weight: 600;
}

h4 {
  margin-top: 0px;
  margin-bottom: 24px;
  color: #fcff00;
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
}

h5 {
  margin-top: 0px;
  margin-bottom: 0px;
  font-size: 14px;
  line-height: 24px;
  font-weight: 800;
  letter-spacing: 6px;
  text-transform: uppercase;
}

p {
  margin-bottom: 32px;
}

a {
  color: #fcff00;
  text-decoration: none;
}

#background-video {
   position: fixed;  
  left: 0;
  right: 0;
  z-index: 0;
    width: 100%;
	height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: 50% 0%;
    object-position: 50% 0%;
    
}

 .fixed-icons-container {
            position: fixed;
            top: 0;
            right: 0;
            z-index: 1050;
            /* Grund-Padding für Querformat */
            padding-right: 0.0rem;
            padding-top: 0.0rem;
			height: 100%;
            display: flex; /* Machen wir den Container selbst zum Flexbox */
            flex-direction: column; /* Standard: Vertikale Ausrichtung (Querformat) */
            align-items: flex-end; /* Rechts ausrichten */
			background-color: rgba(0, 0, 0, 0.15); /* Leicht transparenter weißer Hintergrund */
            backdrop-filter: blur(8px) saturate(1.8); /* Weichzeichner und Sättigung für den Frosted Effekt */
            -webkit-backdrop-filter: blur(8px) saturate(1.8);
        }
		
.bottom-right-icon-container {
            position: fixed;
            bottom: 0; /* Unten positioniert */
            right: 0;  /* Rechts positioniert */
            z-index: 1050;
            padding-right: 0.0rem;
            padding-bottom: 1.5rem; /* Abstand vom unteren Rand */            
        }
		
		.bottom-right-icon-container .animated-link i {
            animation: pulse 1.5s infinite ease-in-out; /* Name, Dauer, Wiederholung, Timing-Funktion */
			color: #fcff00;
        }

        /* Optional: Animation bei Hover pausieren, damit der Farbwechsel besser sichtbar ist */
        .bottom-right-icon-container .animated-link:hover i {
            animation-play-state: paused;
        }
		

        .animated-link {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center; /* Icons/Text in der Mitte des Links */
            height: 3rem;
            text-decoration: none;
            color: inherit;
            box-sizing: border-box;
            margin-bottom: 0.5rem; /* Abstand zwischen den einzelnen Links (Vertikal) */

            
            min-width: 3rem; /* Mindestbreite für Icon */
            transition: background-color 0.3s ease-in-out; /* Übergang für Hintergrundfarbe */
        }

        .animated-link i {
            /* Das Icon ist immer sichtbar und zentriert im Link */
            color: #fff;
            transition: color 0.3s ease-in-out; /* Übergang für Icon-Farbe */
        }

        /* Der Text ist standardmäßig unsichtbar und spielt keine Rolle mehr bei Mouseover */
        .animated-link .icon-text {
            display: none; /* Text wird nie angezeigt */
        }

        /* Hover-Zustand: Farbwechsel */
        .animated-link:hover {
            background-color: rgba(0, 0, 0, 0.0); /* Dunklerer Hintergrund bei Hover */
        }

        .animated-link:hover i {
            color: #fcff00; /* Beispiel: Gold-Farbe bei Hover (Bootstrap yellow) */
            /* Alternativ: spezifische Farben
            &.fa-facebook { color: #3b5998; }
            &.fa-instagram { color: #E1306C; }
            etc.
            */
        }
		
		@keyframes pulse {
            0% {
                transform: scale(1.08); /* Normale Größe */
                opacity: 1;
            }
            50% {
                transform: scale(1.0); /* Leicht größer */
                opacity: 0.5; /* Leicht transparenter */
            }
            100% {
                transform: scale(1.08); /* Zurück zur normalen Größe */
                opacity: 1;
            }
        }

        /* --- MEDIA QUERY FÜR HOCHFORMAT --- */
        @media (orientation: portrait) {
            .fixed-icons-container {
                flex-direction: row; /* Horizontal ausrichten */
                width: 100%; /* Die Leiste nimmt die volle Breite ein */
                height: 3em;
				justify-content: flex-end; /* Elemente rechts ausrichten */
                
            }

            .animated-link {
                margin-bottom: 0; /* Kein vertikaler Abstand mehr */
                margin-left: 0.5rem; /* Horizontaler Abstand zwischen den Icons */
            }
			
			.bottom-right-icon-container {
           flex-direction: row; /* Horizontal ausrichten */
                padding-left: 0.5rem; /* Links fest, damit es zentriert wirken kann, wenn Platz ist */
                width: 3em; /* Die Leiste nimmt die volle Breite ein */
                height: 3em;
				justify-content: flex-end; /* Elemente rechts ausrichten */
                bottom: 0; /* Oben fixiert */
                left: 0; /* Rechts fixiert */
			    background-color: rgba(0, 0, 0, 0);
        }
        }			

.tree {
	position: relative;
	top: 150px;
	z-index: 60;
	width: 100%;
	display: flex;
  justify-content: center;
}

.grass {
	position: relative;
	top: 130px;
	z-index: 50;
	width: 100%;
	display: flex;
  justify-content: center;
}

.vg {
  width: 260%;    
}

.vg-1 {
  width: 60vw;    
}

.vg-2 {
  width: 100%;    
}

.content {
	background-color: #000000;
	position: relative;
	top: 130px;	
	color: #000000;
	z-index: 2;
	width: 100vw;
}

.footer {
	background-color: #000000;
	width: 100%;
	position: relative;
	top: 140px;
	left: 0;
	right: 0 ;
	z-index: 5;
}

.contact {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
}

.footer-link {
  margin-bottom: 8px;
  -webkit-transition: all 200ms ease;
  transition: all 200ms ease;
  color: #fff;
  font-weight: 300;
  font-size: 16px;
  text-decoration: none;
}

.footer-link:hover {
  color: #fcff00;
}

.logo {
	width: 200px;
}

.copyright {
	opacity: 0.5;
}

.dataterm {
	opacity: 0.5;
	text-decoration: none;
}

.author {
  border-bottom: 2px solid hsla(0, 0%, 100%, 0.3);
  -webkit-transition: all 200ms ease;
  transition: all 200ms ease;
  color: #fff;
  text-decoration: none;
}

.author:hover {
  border-bottom-color: rgba(251, 215, 132, 0.3);
  color: #fcff00;
}

@media screen and (max-width: 768px) {
	
.vg-1 {
  width: 100vw;    
}	

.logo {
	width: 150px;
}
	
.contact {
	padding-top: 40px;
}

.copyright {
	font-size: 11px;
}

.dataterm {
	font-size: 12px;
}
	




.footer-link {
  margin-bottom: 8px;
  -webkit-transition: all 200ms ease;
  transition: all 200ms ease;
  color: #fff;
  font-weight: 300;
  font-size: 13px;
  text-decoration: none;
}
  }
}