/* Datei: /u98810968/Homepage_MR_MultiReality/assets/css/main.css */

/* Video Container */
.video-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed; /* Sicherstellen, dass der Container über den gesamten Bildschirm fixiert ist */
    top: 44%; /* Setzt den Container vertikal in die Mitte */
    left: 50%; /* Setzt den Container horizontal in die Mitte */
    transform: translate(-50%, -50%); /* Verschiebt den Container, um die Zentrierung abzuschließen */
    width: 100%;
    height: calc(100vh - var(--header-height) - var(--footer-height)); /* Berechnung der Höhe zwischen Header und Footer */
    overflow: hidden;
    z-index: 1; /* Sicherstellen, dass der Container hinter dem Header und Footer liegt */
}

/* Video Styling */
video {
    width: 100vw;
    height: 100vh;
    object-fit: cover; /* Passt das Video an, damit es den gesamten Container ausfüllt */
    object-position: center;
}
/* Gemeinsamer Container für Logo und Text */
.overlay-container {
    display: flex;
    justify-content: center; /* Zentriert beide Elemente horizontal */
    align-items: center; /* Zentriert beide Elemente vertikal */
    gap: 10px; /* Abstand zwischen Logo und Text, anpassen nach Bedarf */
    position: absolute;
    top: 15%; /* Zentriere den gesamten Container vertikal */
    left: 50%; /* Zentriere den gesamten Container horizontal */
    transform: translate(-50%, -50%);
    z-index: 3; /* Höherer Z-Index, damit der Container über dem Video liegt */
    white-space: nowrap; /* Verhindert den Zeilenumbruch */
}

/* Overlay Bild - VR Headset */
.overlay-image {
    position: absolute;
    top: 15%; /* Zentriere das Bild vertikal */
    left: 50%; /* Zentriere das Bild horizontal */
    transform: translate(-50%, -50%);
    width: 15vw; /* Die Breite des Bildes wird relativ zur Breite des Viewports festgelegt, damit es proportional skaliert */
    pointer-events: none; /* Verhindert, dass das Bild anklickbar ist */
    filter: drop-shadow(0 0 45px rgba(255, 255, 255, 0.7)) drop-shadow(0 0 45px rgba(255, 255, 255, 0.5)); /* Schatteneffekt */
    z-index: 2; /* Z-Index liegt zwischen Video und Text, damit das Bild vor dem Video, aber hinter dem Text liegt */
}

.overlay-text {
    position: absolute;
    top: 27%; /* Abstand von ca. 27% unterhalb des oberen Randes */
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 4vw; /* Schriftgröße relativ zur Breite des Viewports */
    font-family: 'Orbitron', sans-serif; /* Gleiche futuristische Schriftart wie der Rest */
    font-weight: bold;
    color: white; /* Textfarbe weiß */
    text-shadow: 
        0 0 10px #000, /* Dicke schwarze Umrandung */
        0 0 20px rgba(255, 255, 255, 0.7), /* Mittlerer Schatten */
        0 0 40px rgba(255, 255, 255, 0.5); /* Weiterer auslaufender Schatten */
    z-index: 3; /* Höherer Z-Index, damit der Text vor dem Bild liegt */
}




/* Textfarbe für "MR" im Overlay-Text */
.mr-blue {
    color: #00b4d8; /* Blaue Farbe passend zum Logo */
    text-shadow: 
        0 0 15px #000,  /* Dickere schwarze Umrandung */
        0 0 30px rgba(255, 255, 255, 0.7), /* Mittlerer Schatten */
        0 0 45px rgba(255, 255, 255, 0.5); /* Weiterer auslaufender Schatten */
}

/* Stil für das Overlay-Logo "MR" */
.mr-overlay-logo {
    font-size: 3vw; /* Größe des Logos relativ zur Breite des Viewports */
    font-family: 'Orbitron', sans-serif;
    font-weight: bold;
    color: #00b4d8; /* Blau wie im Header */
    text-shadow: 
        0 0 15px #000,  /* Dickere schwarze Umrandung */
        0 0 40px rgba(0, 0, 0, 0.7), /* Mittlerer Schatten */
        0 0 60px rgba(0, 0, 0, 0.5); /* Weiterer auslaufender Schatten */

}

/* Zusätzliche Variablen für die Höhe von Header und Footer */
:root {
    --header-height: 80px; /* Beispielhöhe für den Header, anpassen nach Bedarf */
    --footer-height: 25vh; /* Beispielhöhe für den Footer, anpassen nach Bedarf */
}

/* Verhindere das Scrollen der gesamten Seite */
body {
    overflow: hidden;
}