/* --- BASIS (Hintergrund-Tapete) --- */
body, html {
    margin: 0; 
    padding: 0; 
    width: 100%; 
    height: 100%; 
    overflow: hidden;
    /* Die Textur füllt den gesamten Browser aus */
    background-image: url('background_texture.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    display: flex; 
    justify-content: center; 
    align-items: center;
}

/* --- TRESOR (Der elastische 16:9 Container) --- */
.main-container {
    position: relative;
    /* Standardmäßig auf Breite basierend */
    width: 100vw; 
    height: 56.25vw; /* 16:9 Verhältnis */
    max-width: 1920px; 
    max-height: 1080px;
    overflow: hidden;
    background: transparent;
}

/* Korrektur für Bildschirme, die höher als 16:9 sind */
@media (min-aspect-ratio: 16/9) {
    .main-container {
        width: 177.78vh;
        height: 100vh;
    }
}

/* --- IFRAME (Elastisch eingebettet) --- */
.background-iframe {
    position: absolute;
    top: 4.8%; 
    left: 2.7%; 
    width: 94.6%; 
    height: 90.4%;
    border: none;
    z-index: 1;
}

/* --- RAHMEN & LAYERS --- */
.frame-overlay, .hotspot-layer {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
}

.frame-overlay { z-index: 5; }
.hotspot-layer { z-index: 10; }

.hotspot {
    position: absolute;
    cursor: pointer;
    pointer-events: auto;
    background: rgba(255, 0, 0, 0); /* Auf 0.4 zum Testen */
}

/* Positionen Haupt-Rahmen */
.btn-back { top: 1.4%; right: 1.3%; width: 6.8%; height: 6.5%; }
.btn-logo { top: 1.4%; left: 1.3%; width: 6.2%; height: 8.3%; }

/* --- POP-UP STYLES (Floating Look & Seitlich) --- */
.popup-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0); 
    display: none;
    z-index: 100;
    pointer-events: auto; 
}

.popup-content {
    position: absolute;
    top: 12%;        /* Abstand von oben */
    left: 5%;        /* Abstand von links */
    right: auto;
    width: 22.5%;    /* Deine gewünschte Breite */
    transform: none; 
    border-radius: 5px; 
    line-height: 0; 
    /* Der weiche Schatten für den Floating-Effekt */
    box-shadow: 0 0 50px 10px rgba(0, 0, 0, 0.5);
}

.popup-content img {
    width: 100%;
    height: auto;
    display: block;
}

/* --- HOTSPOTS IM POP-UP (Bleiben proportional zum Bild) --- */
.close-x-top    { top: 2%; right: 2%; width: 8%; height: 8%; }
.arrow-next     { bottom: 4%; right: 4%; width: 10%; height: 10%; }
.arrow-back     { top: 2%; right: 2%; width: 8%; height: 8%; } 
.close-x-bottom { bottom: 4%; right: 4%; width: 10%; height: 10%; }

.hidden { display: none !important; }