body, html {
    overflow: hidden;
    margin: 0;
    -webkit-user-select: none;  /* Chrome, Safari, Opera */
    -moz-user-select: none;     /* Firefox */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none;          /* Standard syntax */
}

.vr-modal{
    top: 100px !important;
    margin-left:50px !important;
    width:  calc(100% - 50px) !important;
    height:  calc(100% - 150px) !important;
}

.help-modal{
    top: 100px !important;
    height:  calc(100% - 150px) !important;
}

.terms-modal {
    top: 100px !important;
}

#help-modal{
    margin-top: 50px;
    height:  calc(100% - 50px) !important;
    z-index: 999;
}


#showcasediv{
    margin: 0;
}

#showcasediv iframe {
    margin: 0;
    border: none;
    position: absolute;
    width: 100%;
    height: 100%;
}
#porscheVideo {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    z-index: 4; 
}
#woodhouseMapBackground {
    background-color: rgba(0, 0, 0, 0.85);
    position: absolute; 
    display: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 7;
}

#woodhouseMap {
    position: absolute;
    display: none;
    width: auto;
    height: 45%;
    top: 50%;
    left: 50%;
    border-radius: 10px;
    transform: translate(-50%, -50%);
    z-index: 10;
}
#challangeHillMapDiv{
    display: none;

}
#challangeHillMap {
    position: absolute;
    width: auto;
    height: 170px;
    bottom: 10px;
    right: 10px;
    border-radius: 10px;
    z-index: 4;
}

@keyframes pulsatingStroke {
    0% {
        border-color: rgb(0, 0, 0);
    }
    50% {
        border-color: rgba(0, 0, 0, 0.5);
    }
    100% {
        border-color: rrgb(0, 0, 0);
    }
}

#resizer {
    position: absolute;
    width: 15px;
    height: 15px;
    background: transparent; /* Hintergrund transparent machen */
    cursor: nwse-resize;
    bottom: 215px;
    right: 170px;
    border-top-left-radius: 15px; /* kompletter Kreis an der oberen linken Ecke */
    border-top: 3px solid rgb(242, 208, 94); /* nur obere Grenze */
    border-left: 3px solid rgb(242, 208, 94); /* nur linke Grenze */
    transform: rotate(2deg); /* leicht nach rechts rotieren */
    z-index: 3;
    animation: pulsatingStroke 1.5s infinite; /* pulsierende Animation hinzufügen */
}

#resizerButton {
    position: absolute;
    display: none;
    width: 24px;
    height: 24px;
    bottom: 150px;
    right:  195px;
    cursor: pointer;
    background: white;
    z-index: 5;
}

#headingDiv {
    display: none;
    align-items: center;
    justify-content: center;
    position: absolute;
    min-width: 200px; /* Mindestbreite des Divs */
    height: 50px;
    top: 25px;
    left: 50%;
    border-radius: 10px;
    border-bottom-left-radius: 0px; 
    border-bottom-right-radius: 0px; 
    background-color: rgba(0, 0, 0, 0.8);
    transform: translateX(-50%);
    z-index: 100;
}

#heading {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 17px;
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    overflow: hidden; /* Verhindert das Umbruch des Texts */
}

#controls {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 200px;
    height: 50px;
    top: 50px; /* Sie können die Top-Position nach Bedarf anpassen */
    left: 50%;
    border-bottom-left-radius: 10px; 
    border-bottom-right-radius: 10px; 
    background-color: rgba(0, 0, 0, 0.8);
    transform: translateX(-50%);
    z-index: 5;
}

#controls button {
    width: 50px;
    height: 50px;
    cursor: pointer;
    border: none;
    margin: 0 10px; /* Abstand zwischen den Steuerelementen anpassen */
    border-radius: 50%; /* Runder Rand für die Buttons */
    background-color: transparent; /* Transparenter Hintergrund */
    transition: background-color 0.3s ease;
}
#playButton{
    display: block;
}
#pauseButton{
    display: none;
    
}
#controls button:hover {
    background-color: rgba(0, 0, 0, 0.2); /* Hintergrundfarbe bei Hover-Effekt */
}

#leftArrow::before, #rightArrow::before, #pauseButton::before {
    content: "";
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

#leftArrow::before {
    content: url('../assets/skip_previous_FILL0_wght400_GRAD200_opsz48.svg'); /* Pfad zur SVG-Datei für den linken Pfeil */
}

#rightArrow::before {
    content: url('../assets/skip_next_FILL0_wght400_GRAD200_opsz48.svg'); /* Pfad zur SVG-Datei für den rechten Pfeil */
}

#pauseButton::before {
    content: url('../assets/stop_circle_FILL0_wght400_GRAD200_opsz48.svg'); /* Pfad zur SVG-Datei für das Pause-Icon */
}
#playButton::before {
    content: url('../assets/play_circle_FILL0_wght400_GRAD200_opsz48.svg'); /* Pfad zur SVG-Datei für das Pause-Icon */
}

  #mapIcon{
    position: absolute;
    cursor: pointer;
    top: 0;
    right: 0;
    padding: 10px;
    width: auto;
    height: 80px;
    z-index: 100;
  }
  #mapIcon:hover{
    transform: scale(1.05);

  }
  #mapIcon1{
    position: absolute;
    cursor: pointer;
    top: 20vh;
    right: 0;
    width: auto;
    height: 13vh;
    z-index: 100;
  }
  #logoIcon{
    position: absolute;
    top: 0;
    left: 0;
    padding: 10px;
    width: auto;
    height: 90px;
    z-index: 100;
  }
  #closeIcon{
    right: 0;
    top: 0;
    padding: 10px;
    height: 17vh;
    width: auto;
    z-index: 100;
  }

/* Grundlegender Stil für den Ladebildschirm */
#loadingScreen {
    margin: 0;
    padding: 0;
    position: fixed; /* Geändert von 'absolute' zu 'fixed', um sicherzustellen, dass es den gesamten Bildschirm bedeckt */
    top: 0;
    left: 0;
    width: 100vw; /* Setzt die Breite auf 100% der Viewport-Breite */
    height: 100vh; /* Setzt die Höhe auf 100% der Viewport-Höhe */
    display: none; /* Standardmäßig nicht angezeigt */
    background-color: rgb(0, 0, 0);
    background-size: cover; /* Stellt sicher, dass das Hintergrundbild den Container vollständig abdeckt */
    background-position: center; /* Zentriert das Hintergrundbild */
    z-index: 1000;
    opacity: 1;
    transition: opacity 10s ease;
}
#loadingScreenImg{
    margin: 0;
    padding: 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: none; /* bleibt versteckt bis aktiviert */
    background-size: cover;
    background-position: center;
    z-index: 1;
    animation: fadeIn 10s ease-in-out; /* Hier kannst du die Dauer und den Übergangstyp anpassen */
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 0.5;
    }
}

#loadingText{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    z-index: 9999;
}

#locationPopUp{
    position: absolute;
    display: none;
    width: 70%;
    height: 70%;
    top: 50%;
    left: 50%;
    border-radius: 10px;
    transform: translate(-50%, -50%);
    border-radius: 10px;
    justify-content: center;
    align-items: center;
    background-color: rgb(255, 255, 255);
    z-index: 1000;
}

#locationPopUpClose{
    position: absolute;
    display: block;
    width: 20px;
    height: 20px;
    top: 10px;
    right: 10px;
    cursor: pointer;
    z-index: 1001;
}

#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7); /* Halbtransparentes Schwarz */
    backdrop-filter: blur(5px); /* Weichzeichner */
    display: none; /* Startet versteckt */
    z-index: 999; /* Hinter dem Popup, aber vor anderen Inhalten */
}

#generalPopUp {
    position: fixed; /* Empfohlen, damit das Popup immer relativ zum Viewport positioniert ist */
    display: none;
    background-color: white;
    width: 70%;
    height: 75%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 10px;
    z-index: 1000;
    overflow: hidden; /* Verhindert Scrollbars am Popup selbst */
} 
#generalPopUpContent {
    overflow: auto; /* Ermöglicht Scrollbars nur innerhalb dieses Containers */
    height: 100%; /* Höhe anpassen, um den Header und den Schließbutton zu berücksichtigen */
    position: relative;
}
#generalPopUpImgDiv {
    width: 100%;
    height: 20vw;
    overflow: hidden;
}

#generalPopUpImg {
    width: 100%;
    display: block;
    z-index: 1;
}

#generalPopUpImg:hover {
    transform: scale(1.005);
}
  
  #generalPopUpHeader {
    background-color: rgb(245, 199, 80);
    padding: 0.5vw 1vw;
    color: rgb(0, 0, 0);
    font-family: Arial, sans-serif;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
  }
  
  #generalPopUpText {
    padding: 10px;
    padding-left: 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 15px;
    color: #333;
    line-height: 1.6;
  }

#generalPopUpClose{
    position: absolute;
    display: block;
    width: 30px;
    height: 30px;
    top: 10px;
    right: 10px;
    cursor: pointer;
    z-index: 1001;
}


#navPopUp{
    position: absolute;
    display: none;
    width: 70%;
    height: 70%;
    top: 50%;
    left: 50%;
    border-radius: 10px;
    transform: translate(-50%, -50%);
    border-radius: 10px;
    justify-content: center;
    align-items: center;
    background-color: rgb(255, 255, 255);
    z-index: 1000;
}

#navPopUpClose{
    position: absolute;
    display: block;
    width: 20px;
    height: 20px;
    top: 10px;
    right: 10px;
    cursor: pointer;
    z-index: 1001;
}

/* Stil für den Text */
#loadingText {
    color: white;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 24px;
    letter-spacing: 2px;
}

#loadingDiv{
    position: absolute;
    display: none;
    z-index: 1;
}
#loadingImg{
    width: 100%;
}
/* Stil für die animierten Punkte */
#loadingText span {
    opacity: 0; /* Anfangszustand: unsichtbar */
    animation: fadeInOut 1.5s infinite;
}

/* Animation für jeden Punkt */
#loadingText span:nth-child(1) {
    animation-delay: 0s;
}

#loadingText span:nth-child(2) {
    animation-delay: 0.5s;
}

#loadingText span:nth-child(3) {
    animation-delay: 1s;
}

/* Keyframes für die fadeInOut-Animation */
@keyframes fadeInOut {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}

#ThreejsBillboard {
    display: none;
    position: absolute;
    background-color: black;
    top: 50vh;
    left: 50vw;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    border: none;
    border-radius: 0;
    overflow: hidden;
    z-index: 50;
}

#CloseThreejsBillboard {
    position: absolute;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 24px;
    width: 160px;
    height: 55px;
    border-radius: 10px;
    display: flex;
    bottom: 60px;
    left: 50vw;
    background-color: rgb(0, 0, 0);
    transform: translateX( -50%);
    cursor: pointer;
    padding: 0.75rem 0.75rem;
    align-items: center; 
    justify-content: center; 
    z-index: 51;
}
#CloseThreejsBillboard:hover {
    background-color: rgb(245, 199, 80);
}

#spinner {
    position: absolute;
    top: 50vh;
    left: 50vw;
    border: 5px solid #f3f3f3; /* Light grey background */
    border-top: 5px solid rgb(245, 199, 80); /* Blue color */
    border-radius: 50%;
    width: 40px;
    height: 40px;
    transform: translate(-50%, -50%);
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

#navigationMenu {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 50px; /* Breite des Menüs im eingeklappten Zustand */
    height: auto; /* Höhe automatisch an Inhalt anpassen */
    max-height: 70%;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    background-color: rgba(255, 255, 255, 0.95);
    transition: width 0.5s;
    z-index: 1000;
    flex-direction: column; /* Menüpunkte vertikal anordnen */
    overflow-x: hidden;
}

@media only screen and (min-width: 489px) and (min-height: 488px) {
    .terms-modal {
        top: 55% !important;
    }
} 
@media only screen and (min-width: 600px) and (min-height: 488px) {
    .vr-modal{
        top: 55% !important;
    }
    .help-modal{
        top: 55% !important;
    }
}

@media only screen and (min-width: 600px) {
    #generalPopUpText {
        padding: 10px;
        padding-left: 20px;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size: 16px;
        color: #333;
        line-height: 1.6;
      }

#navigationMenu:hover {
    width: 220px; /* Breite des Menüs im ausgeklappten Zustand */
}
}
#navigationMenu.hover-active {
    width: 220px; /* Breite des Menüs im ausgeklappten Zustand */
}


.menu-item {
    display: flex; /* Flexibles Layout für jedes Menüelement */
    align-items: center; /* Zentriert die Inhalte vertikal */
    list-style: none;
    position: relative; /* Für die Positionierung des Submenüs */
    height: 50px; /* Festgelegte Höhe für jeden Menüeintrag */
}

.menu-icon {
    float: left; /* Icon linksbündig */
    width: 45px;
    height: 45px;
    padding: 10px;
    text-align: center;
    line-height: 50px;
    cursor: pointer;
    z-index: 10;
}

.menu-title {
    /* Anfangszustand: unsichtbar und links verschoben */
    position: relative; /* Für die Positionierung des Submenüs */
    display: none;
    height: 50px;
    left: 0;
    color: rgb(99, 99, 99);
    padding: 2px;
    line-height: 50px;
    cursor: pointer;
    overflow:hidden;
    white-space: nowrap; /* Text nicht umbrechen */
    opacity: 0; /* Unsichtbar machen */
    transform: translateX(-100%); /* Nach links verschieben */
    transition: transform 0.5s, opacity 0.5s; /* Übergänge für Verschiebung und Sichtbarkeit */
}

/* Right-align 'Presented by' */
.presented-by-container {
    text-align: right;
    font-size: 12px;
    color: rgb(99, 99, 99);
    display: flex; /* Flexibles Layout für jedes Menüelement */
    align-items: center; /* Zentriert die Inhalte vertikal */
    list-style: none;
    position: relative; /* Für die Positionierung des Submenüs */
    height: 10px; 
    margin: 10px;
    line-height: 0.1;

}

/* Add this class to the 'Presented by' container */
.menu-item.presented-by-container {
    display: flex;
    justify-content: flex-end; /* Align to the right */
}



a.menu-link {
    text-decoration: none; /* Entfernt die unterstrichene Textdekoration von Links */
    color: inherit; /* Vererbt die Textfarbe des übergeordneten Elements */
    cursor: inherit; /* Vererbt den Mauszeiger des übergeordneten Elements */
    display: inline-block; /* Stellt sicher, dass der Link inline im Text fließt */
    /* Weitere Stile hier, wenn nötig */
}

.menu-title-selected {
    color: rgb(0, 0, 0); /* Weiße Textfarbe */
}
@media only screen and (min-width: 600px) {

#navigationMenu:hover .menu-title {
    opacity: 1;
    display: block;
    transform: translateX(0%);
}
}
#navigationMenu.hover-active .menu-title {
    opacity: 1;
    display: block;
    transform: translateX(0%);
}


.titleDivScolling{
    position: absolute;
    width: 220px;
    height: 50px;
    overflow: hidden;
    clip-path: inset(0 0 0 50px);
}
.menu-title.scrolling {
    position: absolute;
    left: 0;
    white-space: nowrap; /* Verhindert Zeilenumbrüche im Text */
    animation: scrollText 5s linear infinite; /* Animiert den Text */
}

@keyframes scrollText {
0%{
    transform: translateX(50px);
}
}

.submenu {
 display: none; /* Standardmäßig versteckt */
    position: absolute; /* Absolut zur Position des übergeordneten menu-item */
    left: 0; /* Rechts vom menu-item */
    height: auto;
    max-height: 200%;
    color: rgb(99, 99, 99);
    top: 30px; /* Positioniert das Submenü direkt unter dem Menütitel */
    width: 90%;
    list-style: none;
    flex-direction: column; /* Submenüelemente vertikal anordnen */
    z-index: 1001; /* Über dem Hauptmenü */
    overflow-x:hidden; /* Scrollbar, wenn Inhalt größer als die maximale Höhe ist */
}



.submenu a {
    display: block;
    padding: 5px 10px;
    color: rgb(99, 99, 99);
    text-decoration: none;
}

.submenu-arrow {
    margin-left: 5px; /* Abstand zwischen Text und Pfeil */
    display: inline-block;
    transition: transform 0.3s;
}

.submenu-arrow.rotated {
    transform: rotate(90deg);
}


@media only screen and (min-width: 300px) {
    #challangeHillMap {
        height: 200px;
    }
}
@media only screen and (min-width: 400px) {
    #challangeHillMap {
        height: 250px;
    }
}
@media only screen and (min-width: 500px) {
    #challangeHillMap {
        height: 300px;
    }
}
@media only screen and (min-width: 600px) {
    #woodhouseMap {
        height: 75%;
    }
    #resizerButton{
        display: block;
    }
    #challangeHillMap {
        height: 170px;
    }
}