html{
    font-family: "Reddit Sans", serif;
    font-weight: 100;
background-color:black;
font-size: 100%;
overflow-x: hidden;
}
body{
    overflow-x: hidden;
}

  section{
    overflow-y: hidden;
  }
.section1 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('bg.webp'); /* Pfad zum Hintergrundbild */
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column; /* Vertikale Anordnung */
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Dunkle Überlagerung */
    z-index: 1; /* Überlagerung über dem Hintergrund */
}

.logo {
    width: 50vw; /* 50% der Breite des Viewports */
    height: 50vh; /* 50% der Höhe des Viewports */
    background-image: url('Bild4.png'); /* Pfad zum Logo */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 2; /* Logo über der Überlagerung */
}

.scroll-indicator {
    position: absolute;
    bottom: 10vw; /* Abstand vom unteren Rand */
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 3; /* Über dem Logo und der Überlagerung */
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
}

.chevron {
    position: absolute;
    width: 56px; /* 16px * 3.5 */
    height: 12.8px; /* 16px * 0.8 */
    opacity: 0; /* Anfangs unsichtbar */
    transform: scale(0.3);
    animation: move-chevron 3s ease-out infinite;
    z-index: 4; /* Sicherstellen, dass sie über anderen Elementen liegen */
}

.chevron:first-child {
    animation: move-chevron 3s ease-out 1s infinite;
}

.chevron:nth-child(2) {
    animation: move-chevron 3s ease-out 2s infinite;
}

.chevron:before,
.chevron:after {
    content: '';
    position: absolute;
    top: 0;
    height: 100%;
    width: 50%;
    background: white;
}

.chevron:before {
    left: 0;
    transform: skewY(30deg);
}

.chevron:after {
    right: 0;
    width: 50%;
    transform: skewY(-30deg);
}

@keyframes move-chevron {
    25% {
        opacity: 1; /* Sichtbar werden */
    }
    33.3% {
        opacity: 1;
        transform: translateY(60.8px); /* 16px * 3.8 */
    }
    66.6% {
        opacity: 1;
        transform: translateY(83.2px); /* 16px * 5.2 */
    }
    100% {
        opacity: 0; /* Unsichtbar werden */
        transform: translateY(128px) scale(0.5); /* 16px * 8 */
    }
}

.quote-section {
    background-color: black;
    color: white;
    width: 100%; /* Volle Breite für die Section */

    display: flex;
    justify-content: center;
    align-items: center;
    position: relative; /* Wichtig für korrekte Positionierung */
    margin-top: 100vh; /* Stellt sicher, dass es unter der ersten Section ist */
    height:20vw;
    box-shadow: 0 2px 50px rgba(0, 0, 0, 0.8);
    z-index: 20;
    background-image: url("bg2.png");
        background-size: 100%;

}

.quote-section blockquote {
    width: 80%; /* Breite des Zitats */
    
    margin: 0 auto;
    text-align: center;
    font-size: 1.5em;
    line-height: 1.6;
}

.quote-section blockquote strong {
    font-weight: 700; /* Macht "Innovation working for you" fett */
}

.about-section {
    width: 100%;
    padding: 4rem 0;
    display: flex;
    flex-direction: column;  
    justify-content: center;
    align-items: center;
    background: url("bgtest_2.png") no-repeat center center fixed; /* Fixierter Hintergrund für Parallax */
    color:white;
    background-size: cover; /* Hintergrundbild anpassen */
    min-height: 60vh;
    position: relative;
    z-index: 1; /* Sicherstellen, dass der Inhalt über dem Hintergrund liegt */
    
}

.about-section h2 {
    text-align: center;
    font-size: 4rem;
    font-weight: bold;
    margin-bottom: 3rem;  /* Mehr Abstand nach unten */
}

.about-container {
    width: 80%;
  
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4rem;
}

.about-text {
    flex: 1;
}

.about-text p {
    font-size: 1.5rem;
    line-height: 1.6;
    text-align: right;
}
.about-text strong{
    font-weight: 700;
}

.about-image {
    flex: 1;
  
    border-radius: 10px;
 
}

.about-image img {
    width: 60%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.svg-section {
    width: 100%;
    min-height: 150vh;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4rem 0;
    background-color: black;
    background-image: url("bg5.png");
    background-size: 100%;
    
}

.svg-container {
    width: 80%;
   
}

.svg-section img {
    width: 100%;
    height: auto;
}
    #image-gallery {
       
        height: 50vh; /* Höhe der Galerie */
        overflow-y: hidden; /* Verhindert vertikales Scrollen, wenn nicht gehovt */
        position: relative; /* Für das Hover-Scrolling */
       background-color: white;
        background-size: 100%;
        filter: drop-shadow(0 0px 50px rgba(0, 0, 0, 1)); /* Fügt einen weichen Schatten hinzu */
        z-index: 100;
    }
    .gallery {
      
        display: flex; /* Flexbox für nebeneinander angeordnete Bilder */
       
        gap: 10px; /* Abstand zwischen den Bildern */
        height: 98%; /* Höhe anpassen */-ms-overflow-style: none;  /* IE and Edge */
       margin-top:0.5vh;
        scrollbar-width: none; 
    }
    .gallery img {
      -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none; 
      display: block;
        border-radius: 10px; /* Optionale abgerundete Ecken */
        filter: drop-shadow(0 0px 20px rgba(0, 0, 0, 1)); /* Fügt einen weichen Schatten hinzu */
        filter: saturate(10%);
        box-shadow: 0 0px 7px rgba(0, 0, 0, 1);
        animation-duration: 2s;
    }
    .gallery img:hover {
       
          border-radius: 5px; /* Optionale abgerundete Ecken */
          filter: drop-shadow(0 0px 40px rgba(0, 0, 0, 1)); /* Fügt einen weichen Schatten hinzu */
          filter: saturate(100%);
      }
    /* Hover-Effekt für vertikales Scrollen */
    #image-gallery:hover {
        overflow-y: auto; /* Ermöglicht vertikales Scrollen beim Hover */
    }
.partner-section {
    width: 100%;
    height: 100vh;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url('ende.webp');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.partner-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Abdunkelung */
}

.partner-content {
    position: relative; /* Damit der Inhalt über der Abdunkelung liegt */
    z-index: 2;
    width: 80%;
    max-width: 1200px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.partner-image {
    max-width: 60%;
    height: auto;
}

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 5vw;
    background-color: black;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10%;
}

.header-logo {
    width: 30%; 
    height: auto;
    opacity: 0;
    transform: translateX(-20px);
    transition: all 0.3s ease;
}

.header-logo.visible {
    opacity: 1;
    transform: translateX(0);
}

.nav-container {
    width: 80%;
    max-width: 1200px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 2rem;
    margin-right: 15%;
    position: relative; /* Position für das Dropdown */
}

.nav-link {
    text-decoration: none;
    color:white;
    font-size: 1.1rem;
    font-weight: 500;
    padding: 0.5rem 1rem;
    transition: all 0.3s ease;
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #0095ff;
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}
.modelleDetails{
width:100%;
margin-top:5vw;
z-index:20;
position:relative;
}
.modelleDetails img{
width:100%;

}
.burger {
    display: none; /* Standardmäßig verstecken */
    font-size: 30px;
    cursor: pointer;
}

.nav-links {
    display: flex; /* Standardmäßig für Desktop */
}
#navN{
    display: flex;
}
#burgerN{
    display: none;
}
/* Anpassung für die Sections damit der Header sie nicht überdeckt */
.about-section, .turntable-section, .contact-section {
    scroll-margin-top: 70px;
}
.turntable-section {
    background-color:black;}
/* Mobile-First Ansatz */
@media screen and (max-width: 768px) {
    /* Adjust header styles for mobile */
    #burgerN{
        display: block;
    }
.section1 {
overflow-x:hidden;
}
    #closeSy{
        display: none;
    }
    #navN{
        display: none;
    }
    .burger {
        display: block; /* Burger-Menü für mobile Geräte anzeigen */
        text-align: right;
  }
    

    .nav-links {
        display: none; /* Navigation für mobile Geräte verstecken */
        flex-direction: column; /* Vertikale Anordnung */
        position: absolute;
        top: 60px; /* Position unter dem Burger-Menü */
        left: 0;
        background-color: rgb(0, 0, 0); /* Hintergrundfarbe */
        width: 100%; /* Breite */
        z-index: 1000; /* Über anderen Elementen */
    }

    .nav-links.active {
        display: flex; /* Navigation anzeigen, wenn aktiv */
    }
    body{
        padding: 0;
    width: 100%;
    margin-left: 0;
    }
    .header {
        height: 60px;
        padding: 0 5%;
    }
.logo{
    width: 110vw;
}
    .header-logo {
        width: 80%;
    }

   
.turntable-section {
background-color:black;}
.about-image{
display: none;
}
    .nav-link {
        font-size: 0.9rem;
        padding: 0.3rem 0.5rem;
    }
.quote-section{
    height:auto;
    padding: 10vw 0 10vw 0 ;
}
    /* About Section */
    .about-section {
        padding:  0;
    }

    .about-container {
        width: 90%;
        flex-direction: column;
        gap: 2rem;
    }

    .about-text h2 {
        font-size: 2rem;
    }

    .about-text p {
        font-size: 1rem;
    }

    .about-image {
        width: 100%;
        height: 300px;
    }

    /* SVG Section */
    .svg-section {
        padding:  0;
    }

    .svg-container {
        width: 90%;
    }

    /* Partner Section */
    .partner-section {
        min-height: auto;
        padding:  0;
    }

    .partner-content {
        width: 90%;
    }

    .partner-image {
        max-width: 90%;
    }

    /* Scroll Margin Anpassungen */
    .about-section, 
    .turntable-section, 
    .contact-section {
        scroll-margin-top: 60px;
        scroll-margin-bottom: 60px;
    }
    
    #image-gallery{
        height: 80vh;
    }
    .content-container {
        flex-direction: column; /* Ändere die Richtung auf Spalte für mobile Ansicht */
    }
    .image-container img{
        margin-left:-45% !important;
    }
#specialModel2{
margin-left:-15% !important;

}
    .video-background{
        height:150vh !important;
    }
    .text-container p, ul{
        margin-left:0% !important;
    }
    .text-container li{
        margin-top:4vw !important;
    }
    .modelleDetails{
        padding-bottom: 13vw;
    }
.video-background {
 display:none;
}
}

/* Landscape Mode */
@media screen and (max-width: 768px) and (orientation: landscape) {
.turntable-section {
background-color:black;}
    .about-section,
    .svg-section,
    .partner-section {
        min-height: auto;
        padding:  0;
    }

    .about-container {
        flex-direction: row;
        gap: 2rem;
    }

    .about-image {
        height: 250px;
    }
.video-background {
 display:none;

}}

/* Tablet Breakpoint */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .about-container,
    .svg-container,
    .partner-content {
        width: 100%;
       
    }

    .about-text h2 {
        font-size: 2.2rem;
    }

    .nav-container {
        gap: 1.5rem;
    }

}

.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.8);
    z-index: 1000;
}

.footer-nav {
    display: flex;
    justify-content: center;
    align-items: center;
}

.footer-link {
    text-decoration: none;
    color: white;
    font-size: 1rem;
    padding: 0.5rem 1rem;
    transition: all 0.3s ease;
}

.footer-link:hover {
    text-decoration: underline;
}

.turntable-section {
    position: relative; /* Setzt die Position auf relativ */
    width: 100%;
    /* Höhe der Sektion */
    overflow: hidden; /* Verhindert Überlauf */
}

.video-background {
    position: absolute; /* Absolut positioniert innerhalb der Sektion */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0; /* Video hinter dem Inhalt */
}

.video-background video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Video füllt den gesamten Bereich */
}

.turntable-content {
    position: relative; /* Relativ positioniert, damit es über dem Video liegt */
    z-index: 1; /* Höherer Z-Index, damit der Inhalt sichtbar ist */
    color: white; /* Textfarbe für bessere Lesbarkeit */
    padding: 20px; /* Abstand um den Inhalt */
    width: 100%;
}

.turntable-content img {

    width: 80%;
    margin-left:10%;
}

.content-container {
    display: flex; /* Flexbox für nebeneinander liegende Elemente */
    align-items: center; /* Vertikale Ausrichtung */
    padding: 20px; /* Abstand um den Container */
    overflow: hidden; /* Verhindert Überlauf */
margin-top: 12vh;
}

.video-background {
    position: absolute; /* Absolut positioniert innerhalb des Containers */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* Video hinter dem Inhalt */
}

.video-background video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Video füllt den gesamten Bereich */
}

.image-container {
    flex: 1; /* Bild nimmt 1 Teil des Containers ein */
    margin-right: 20px; /* Abstand zwischen Bild und Text */
    z-index: 1; /* Bild über dem Video */
    margin-top: 10vh;
}
.image-container img {
    width: 210%;
    margin-left: -20%;
    }

.text-container {
    flex: 2; /* Text nimmt 2 Teile des Containers ein */
    z-index: 1; /* Text über dem Video */
    color: white; /* Textfarbe für bessere Lesbarkeit */
	font-size:1.5em;
}
.text-container p,ul{
    margin-left:20%;
}
#main{
    width: 100%;;
}
#main h1{
    margin-top:20vh;
    color:white;
    z-index: 20;
    position: relative;
    margin-left: 30%;
    font-size: 4em;
}

.dropdown {
    position: relative; /* Position für das Dropdown */
    transition: all 0.5s ease;
}

.dropdown-menu {
    display: none; /* Standardmäßig versteckt */
    position: absolute; /* Absolut positioniert */
   color: white;
  
    z-index: 1000; /* Über anderen Elementen */

}

.dropdown:hover .dropdown-menu {
    display: block; /* Dropdown anzeigen bei Hover */
    
}

.dropdown-item {
    display: block; /* Block-Element für die Links */
    padding: 10px 20px; /* Abstand */
    margin-top:0px;
    color: white; /* Textfarbe */
    text-decoration: none; /* Keine Unterstreichung */
    transition: all 0.5s ease; /* Übergangseffekte */
    background-color: black;

}
.dropdown:hover .dropdown-item {
    margin-top:10px;
    
}
.dropdown-item:hover {
    color: #0095ff; /* Textfarbe */
    font-weight: 1000;
}

.modern-dropdown {

    border-radius: 8px; /* Abgerundete Ecken */
  
    transition: all 0.5s ease; /* Übergangseffekte */
}

.modern-dropdown .dropdown-item {
    padding: 10px 15px; /* Innenabstand */
   
}

.modern-dropdown .dropdown-item:hover {
 
   
}

.model-container {
    display: flex; /* Flexbox für die Anordnung der Modelle */
    flex-direction: column; /* Anordnung in einer Spalte */
    align-items: center; /* Zentriert die Modelle horizontal */
    margin-top: 20px; /* Abstand nach oben */
    z-index: 1; /* Sicherstellen, dass sie über dem Inhalt liegen */
}

.model1 {
  
    color: white; /* Weißer Text */
    padding: 20px; /* Innenabstand */
    margin: 10px; /* Abstand zwischen den Modellen */
    text-align: center; /* Text zentrieren */
    cursor: pointer; /* Zeigt an, dass es anklickbar ist */
    border-radius: 5px; /* Abgerundete Ecken */
    transition: background-color 0.3s; /* Übergangseffekt für Hover */
}


#model1, #model2, #model3 {
    
    text-align: center;
    cursor: pointer;
  
    position: absolute;
    width: 13%;
    height: 10%;
    z-index: 200;
}
#model1{
    margin-top: 5%;
    margin-left: 12%;
}
#model2 {
    margin-top: 18%;
    margin-left: -16%;
    width: 27%;
  }
#model3{
    margin-top: 18%;
    margin-left: 28%;
}


#model1:hover {
    
}

.turntable-section {
    display: flex; /* Flexbox für die Anordnung */
    flex-direction: column; /* Anordnung in einer Spalte */
    align-items: center; /* Zentriert die Modelle horizontal */
    box-shadow: 0 2px 50px rgba(0, 0, 0, 0.8);
    z-index: 20;
}