/* Allgemeine Seiteinstellungen */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      height: 100%;
      font-family: 'Kanit', sans-serif; /* Kanit als Standardschriftart */
      background-color: #0d0d0d;
	  color: #fff;
      overflow-x: hidden;
    }

    /* Benachrichtigungsleiste */
    .notification-bar {
      background-color: rgba(13, 13, 13, 0.1);
      backdrop-filter: blur(20px) brightness(0.6);
	  border-bottom: 1.5px solid rgba(255, 255, 255, 0.2);
      color: white;
      font-size: 1rem;
      font-weight: 500;
      text-align: center;
      padding: 10px 0;
      width: 100%;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 100;
      display: none; /* Wird standardmäßig ausgeblendet */
    }

    /* Neues Hintergrund-Div mit Video */
    .background-container {
      position: relative;
      height: 60vh; /* Nimmt 60% der Höhe des sichtbaren Bereichs ein */
      display: flex;
      align-items: center; /* Zentriert vertikal */
      justify-content: center; /* Zentriert den slogan-container */
      overflow: hidden; /* Video füllt den gesamten Hintergrund */
      background-color: rgba(13, 13, 13, 0.3);
    }

    /* Video-Hintergrund */
    #video-background {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover; /* Füllt den gesamten Container */
      z-index: -1; /* Stellt sicher, dass der Video-Hintergrund hinter dem Inhalt liegt */
    }

    /* Slogan Styling */
    .slogan-container {
      max-width: 1100px; /* Container füllt den verfügbaren Platz */
      width: 90%;
      display: flex;
      justify-content: flex-start; /* Behält linksbündige Ausrichtung des Slogans */
    }
    
    .slogan {
      color: white;
      font-size: 1.2rem;
      font-weight: 500;
      text-align: center;
      display: flex;
      align-items: center; /* Vertikale Zentrierung */
      flex-wrap: wrap; /* Umbruch des Inhalts auf kleineren Geräten */
    }

    .slogan img {
      height: 10rem; /* Festgelegte Höhe des Bildes */
      max-width: 100%; /* Stellt sicher, dass das Bild nicht breiter als das übergeordnete Element ist */
      filter: drop-shadow(0px 0px 6px rgba(13, 13, 13, 0.7));
    }

    /* Schwebender Header für Desktop */
    #header {
      position: fixed;
      top: 10px;
      left: 50%;
      transform: translateX(-50%);
      width: 90%;
      max-width: 1200px;
      height: 80px;
      background-color: rgba(13, 13, 13, 0.1); /* Hintergrundfarbe für Desktop */
      border-radius: 2.55rem;
      backdrop-filter: blur(20px) brightness(0.6);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
      border: 1px solid rgba(255, 255, 255, 0.2); /* Fester Umriss für 3D-Effekt */
      z-index: 100; /* Muss unterhalb der Benachrichtigungsleiste sein */
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 20px;
      transition: all 0.5s ease;
    }

	.page {
	  display: flex;
	  justify-content: center; /* Horizontally center */
	  align-items: center; /* Vertically center */
	  min-height: 2rem; /* Full height of the viewport */
	}
	
	.content {
	  min-width: 1100px; /* Set your desired min-width */
	}

    /* Logo-Styling */
    #logo {
      height: 40%; /* Das Logo wird auf 50% der Header-Höhe skaliert */
    }

    /* Spezifisches Styling für den Link um das Logo */
    .logo-link {
      display: flex;
      align-items: center; /* Vertikale Zentrierung */
      height: 100%; /* Gleiche Höhe wie der Header */
    }

    .logo-link img {
      height: 50%; /* Logo bleibt auf 50% der Header-Höhe skaliert */
    }

    /* Links auf der rechten Seite */
    .nav-links {
      display: flex;
      gap: 20px; /* Abstand zwischen den Links */
    }

    .nav-links a {
      color: white;
      text-decoration: none;
      font-size: 1.1rem;
      position: relative;
      transition: all 0.3s ease;
    }

    /* Hover-Effekt auf Links */
    .nav-links a:hover {
      text-shadow: 0 0px 15px rgba(13, 13, 13, 0.7); /* Textschatten */
      transform: scale(1.1); /* Leichte Vergrößerung */
    }

    /* Glow-Effekt für Desktop */
    #header::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: radial-gradient(circle at var(--x) var(--y), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 70%);
      opacity: 0;
      transition: opacity 0.6s ease, background 0.6s ease-in-out;
      pointer-events: none;
    }

    /* Hover-Effekt: Stärkerer Schatten für Desktop */
    #header.glow {
      box-shadow: 0 0px 50px rgba(13, 13, 13, 0.7); /* Schatten nach Wunsch */
    }

    /* Aktivierung des Glow-Effekts */
    #header.glow::before {
      opacity: 1;
    }

    /* Overlay für den Blur-Effekt */
    .overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      backdrop-filter: blur(0);
      background-color: rgba(0, 0, 0, 0);
      z-index: 100;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      transition: backdrop-filter 0.5s ease, background-color 0.5s ease, opacity 0.5s ease;
      visibility: hidden; /* Initial unsichtbar */
      opacity: 0; /* Initial ausgeblendet */
    }

    .overlay.active {
      visibility: visible; /* Sichtbar machen */
      opacity: 1; /* Einblenden */
      backdrop-filter: blur(20px) brightness(0.6);
      background-color: rgba(13, 13, 13, 0.1);
    }

    /* Styling für das Iframe */
    .menu-iframe {
      width: 20rem;
	  border: 1px solid rgba(255, 255, 255, 0.2);
      height: 95%;
      margin-right: 1.8rem;
      border-radius: 2.55rem;
      box-shadow: 0 4px 20px rgba(13, 13, 13, 0.3);
      background-color: rgba(13, 13, 13, 0.8);
      z-index: 200;
      transform: translateX(100%); /* Startet außerhalb des Bildschirms */
      transition: transform 0.5s ease; /* Transition hinzugefügt */
    }

    .overlay.active .menu-iframe {
      transform: translateX(0); /* Gleitet herein, wenn aktiv */
    }

    /* Default setting: hide the hamburger menu on desktop */
    .hamburger {
      display: none; /* Hamburger-Menü wird auf Desktop nicht angezeigt */
    }

    /* Styling für Mobile: Header wird fixiert und Hover-Effekt entfernt */
    @media (max-width: 768px) {
      .nav-links {
        display: none; /* Links werden auf Mobilgeräten versteckt */
      }

      /* Hamburger-Menü-Styling */
      .hamburger {
        display: block;
        font-size: 1.8rem; /* Größere Symbolgröße */
        color: white; /* Symbolfarbe für besseren Kontrast */
        cursor: pointer;
        z-index: 20; /* Sicherstellen, dass es über anderen Elementen liegt */
        margin-right: 4px;
        transition: 0.3s color;
      }
      
      .hamburger:hover {
        color: rgba(105, 105, 105, 1);
      }
	  
      .hamburger:active {
        color: rgba(105, 105, 105, 1);
      }

      #header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 70px;
        border-radius: 0;
        box-shadow: 0 0px 50px rgba(13, 13, 13, 0.7); /* Konstanter Schatten für Mobil */
        backdrop-filter: blur(20px) brightness(0.6); /* Hintergrundfarbe und Blur identisch zur Desktop-Version */
        background-color: rgba(13, 13, 13, 0.1); /* Hintergrundfarbe nun gleich wie auf Desktop */
        transform: none;
        padding: 0 10px;
        border: none; /* Kein Umriss auf Mobil */
      }

      #logo {
        height: 55%; /* Größe auf Mobil */
      }

      /* Slogan-Container zentriert auf mobilen Geräten */
      .background-container {
        justify-content: center; /* Zentriert auf mobilen Geräten */
      }

      .slogan-container {
        width: 90%; /* Die maximale Breite des Containers auf mobilen Geräten */
      }

      .slogan {
        padding-left: 0;
        justify-content: flex-start; /* Slogan linksbündig auf mobilen Geräten */
        flex-wrap: wrap; /* Umbruch des Inhalts auf kleineren Geräten */
      }

      .slogan img {
        max-width: 90%; /* Maximal 90% der Bildschirmbreite für das Bild auf mobilen Geräten */
        height: auto; /* Höhe passt sich proportional an */
        filter: drop-shadow(0px 0px 6px rgba(13, 13, 13, 0.7));
      }
    }

    /* Blur für Header */
    .blurred {
      backdrop-filter: blur(10px);
    }
	
	.title {
	  text-align: center;
	  font-size: 34pt;
	  font-weight: 500;
	  font-family: Kanit;
	  color: #fff;
	  line-height: 2.1;
	  margin: auto;
	}