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

/* Mobiles Layout (bis 768px) */
@media only screen and (max-width: 768px) {
    .overlay-text {
        font-size: 6vw; /* Anpassung der Schriftgröße für kleinere Bildschirme */
    }
    .overlay-image {
        width: 20vw; /* Kleinere Breite für das Overlay-Bild auf mobilen Geräten */
    }
    .mr-nav-links {
        flex-wrap: wrap;
        justify-content: center;
        max-width: 600px; /* Maximale Breite, damit die Links auf zwei Zeilen verteilt werden */
    }
    .footer-button {
        width: 15vw; /* Breite für kleinere Bildschirme */
        height: 12vh;
        bottom: 3vh; /* Vertikale Positionierung */
    }
}

/* Tablets (769px bis 1024px) */
@media only screen and (min-width: 769px) and (max-width: 1024px) {
    .overlay-text {
        font-size: 5vw; /* Anpassung der Schriftgröße für Tablets */
    }
    .overlay-image {
        width: 18vw; /* Angepasste Breite für das Overlay-Bild auf Tablets */
    }
    .mr-nav-links {
        flex-wrap: wrap;
        justify-content: center;
        max-width: 600px;
    }
    .footer-button {
        width: 14vw; /* Mittlere Größe */
        height: 11vh;
        bottom: 4vh;
    }
}

/* Große Bildschirme (1025px bis 1440px) */
@media only screen and (min-width: 1025px) and (max-width: 1440px) {
    .mr-nav-links {
        flex-wrap: nowrap; /* Auf größeren Bildschirmen bleiben die Links in einer Zeile */
        justify-content: center;
    }
    .footer-button {
        width: 10vw; /* Standardgröße */
        height: 9vh;
        bottom: 5vh;
    }
}

/* Sehr große Desktops (1441px und höher) */
@media only screen and (min-width: 1441px) {
    .video-container {
        height: 80vh; /* Größere Höhe für große Bildschirme */
    }
    .overlay-container {
        min-width: 40vw; /* Anpassung für größere Bildschirme */
    }
    .overlay-text {
        font-size: 6vw; /* Anpassung der Schriftgröße für größere Bildschirme */
    }
    .overlay-image {
        width: 17vw; /* Größere Breite für das Overlay-Bild auf großen Bildschirmen */
    }
    .footer-button {
        width: 8vw; /* Kleinere Größe für große Bildschirme */
        height: 7vh;
        bottom: 6vh; /* Vertikale Position */
    }
}