@font-face {
    font-family: 'Kumbh Sans';
    src: url('../font/KumbhSans-Regular.woff2') format('woff2'),
        url('../font/KumbhSans-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Kumbh Sans';
    src: url('../font/KumbhSans-Bold.woff2') format('woff2'),
        url('../font/KumbhSans-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}



body, html {
    height: 100%;
	font-family:'Kumbh Sans';
}

#background-video {
    /* Fixiert das Video im Hintergrund des Viewports */
    position: fixed; 
    top: 0;
    left: 0;
    z-index: -1; /* Hält das Video hinter allen anderen Elementen */

    width: 100vw;
    height: 100vh;
    object-fit: cover; /* Streckt das Video über den gesamten Bereich */
    
    filter: blur(10px); /* Unschärfe-Filter */
    transform: scale(1.05); /* Verhindert abgeschnittene Blur-Ränder */
}

/* -------------------- HEADER / LOGO ZENTRIERUNG -------------------- */

/* Neue Header-Struktur: full-header-container */
.full-header-container {
    /* Referenzpunkt für das absolut positionierte Logo */
    position: relative;
    overflow: hidden;
    z-index: 1; /* Stellt sicher, dass der Header über dem Video liegt */
    min-height: 250px; 
}

/* Header-Bild muss 100% Breite des Containers einnehmen */
.full-header-container .headerpic {
    overflow: hidden; 
    position: relative; /* Muss relativ sein, damit absolute Positionierung funktioniert */
    min-height: 250px;
}
.full-header-container .headerpic img {
    position: absolute;
    width: 100%; 
    height: auto; 
    
    /* Verschiebt das gesamte Bild um 50 Pixel nach oben. 
       Dadurch wird der Bereich 50 Pixel UNTER dem ursprünglichen oberen Rand sichtbar. */
    top: -750px; 
    left: 0;
}

/* Logo-Wrapper über die gesamte Fläche legen und zentrieren */
.logo-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10; /* Bringt das Logo vor das Headerbild */
    
    /* Flexbox für vertikale und horizontale Zentrierung */
    display: flex;
    justify-content: center; /* Horizontale Mitte */
    align-items: center; /* Vertikale Mitte */
}

.logo-overlay .logo {
    /* Größe des Logos definieren */
    max-width: -50px; 
    height: auto;
}

.hero-image {
  background-image:  url("/assets/bild.png");
  height: 25%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}


.hero-text {
	background-image:  url("/assets/lo-neu.jpg");
	width: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.stellarnav {
	margin-bottom:5vH;
}

aside {
	font-size:85%;
}

footer {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px 15px; /* Etwas mehr Padding */
    
    text-align: center; /* Zentriert den gesamten Footer-Inhalt auf mobilen Geräten */
}

.footer-content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 960px;
}

.footer-links {
    margin-bottom: 15px;
    width: 100%;
}

.footer-links a {
    text-decoration: none;
    color: #0d2744;
    margin: 0 10px;
    font-size: 0.9em;
}

.footer-links a:hover {
    text-decoration: underline;
}

.container{
background-color: rgba(125, 224, 42, 0.6); 

    border: 3px solid #000038; 	
}
.container p{
	opacity: 1;
}

.stellarnav.dark {
    display: flex; /* Stellt sicher, dass Flexbox aktiv ist (falls noch nicht geschehen) */
    justify-content: center; /* Verteilt die Elemente gleichmäßig mit Platz dazwischen */
    width: 100%; /* Stellt sicher, dass der Container die volle Breite nutzt, um Platz zu verteilen */
}
.stellarnav.dark ul li a:hover {
    /* Fügt einen box-shadow (Schatten) hinzu, der wie ein Schimmer wirkt */
    box-shadow: 0 0 10px #7ce031,   /* Schmaler, intensiver innerer Schimmer */
                0 0 20px #7ce031;   /* Breiterer, weicher äußerer Schimmer */
    
    /* Optional: Ändert die Textfarbe des Links beim Hover zur besseren Sichtbarkeit */
    color: #7ce031; 
    
    /* Optional: Macht den Übergang weicher (Animation) */
    transition: all 0.3s ease-in-out; 
}

/* Optional: Fügen Sie dem Link-Element selbst die Transition hinzu, 
   damit der Effekt beim Verlassen sanft verschwindet */
.stellarnav.dark ul li a {
    transition: all 0.3s ease-in-out;
}

/* Leistungen CSS Teil */
  .gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
	margin-top: 20px;   
    margin-bottom: 20px;
  }

.gallery img {
  width: 200px;
  height: 150px;
  object-fit: cover;
  cursor: pointer;
  border-radius: 4px;
  transition: transform 0.2s;
	}

  .gallery img:hover {
    transform: scale(1.05);
  }

  .lightbox {
    display: none;
    position: fixed;
    z-index: 999;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background-color: rgba(0,0,0,0.8);
    align-items: center;
    justify-content: center;
  }

  .lightbox img {
    max-width: 90%;
    max-height: 90%;
    box-shadow: 0 0 20px #fff;
    border-radius: 8px;
  }

/* Kontaktformular */

/* Einheitliches Styling für alle Eingabefelder */
.miniform input[type="text"],
.miniform input[type="email"],
.miniform textarea {
    background-color: #ffffff; /* Weißer Hintergrund */
    color: #000000;            /* Schwarzer Text */
    border: 1px solid #ccc;    /* Dezente Umrandung */
    padding: 0.5em;
    width: 100%;
    box-sizing: border-box;
}

/* Optional: Fokus-Stil, wenn ein Feld aktiv ist */
.miniform input:focus,
.miniform textarea:focus {
    outline: none;
    border-color: #80DE2F; /* Deine Akzentfarbe */
    background-color: #ffffff;
}