/* --- 1. DER FUSSBODEN (Die Textur für alles) --- */
body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    /* Hier liegt die Textur jetzt ganzflächig und darf sich dehnen */
    background-image: url('background_texture.png');
    background-size: cover;
    background-position: center;
    
    display: flex;
    justify-content: center;
    align-items: center;
}

/* --- 2. DER TRESOR (Das 16:9 Projekt) --- */
.main-container {
    position: relative; /* Nicht mehr absolute, da flexbox zentriert */
    width: 100vw;
    height: 56.25vw; 
    max-width: 1920px;
    max-height: 1080px;
    
    /* Optional: Falls die Textur im Tresor genau so weiterlaufen soll */
    background: background: rgba(253, 242, 244, 0.3); 
    overflow: hidden;
    /* Ein dezent Schlagschatten hilft, das Projekt von der Puffer-Ebene abzuheben */
    box-shadow: 0 0 30px rgba(0,0,0,0.2); 
}

/* Korrektur für sehr schmale/hohe Fenster */
@media (min-aspect-ratio: 16/9) {
    .main-container {
        width: 177.78vh;
        height: 100vh;
    }
}

/* --- 3. DIE ELEMENTE (Unverändert stabil) --- */
.bg-mask {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 5;
    pointer-events: none;
    object-fit: contain; 
}

.image-box {
    position: absolute;
    z-index: 1;
    overflow: hidden;
    background: #000;
}

/* ... (Deine restlichen Box-Werte % von oben bleiben gleich) ... */
.box-center-top { top: 7.7%; left: 30.55%; width: 36.69%; height: 41.78%; }
.box-center-bottom { top: 50.0%; left: 30.55%; width: 36.69%; height: 41.78%; }
.info-column { top: 7.4%; left: 67.4%; width: 26.4%; height: 81.2%; z-index: 1; }

/* INFO SPALTE RECHTS */
.info-column {
    position: absolute;
    top: 4.8%; 
    left: 67.9%; 
    width: 29.04%; /* Diese %-Breite sorgt für die Skalierung des Bereichs */
    height: 89.32%;
    z-index: 1;
}

.info-column img {
    /* WICHTIG: Das Bild muss sich an den Container anpassen */
    width: 100%; 
    height: 100%; 
    object-fit: contain; /* Verhindert Verzerrung des Inhalts */
}
/* ZURÜCK-BUTTON (Oben Rechts) */
.btn-back { 
    top: 3.8%; 
    right: 2%; 
    width: 7%;    /* Breite skaliert mit */
    height: 6%;   /* Höhe skaliert mit */
}

/* PFEIL UNTEN RECHTS (Next) */
.btn-arrow-next { 
    bottom: 7.0%; 
    left: 91%; 
    width: 4%; 
    height: 6%; 
}

/* PFEIL UNTEN LINKS (Prev) */
.btn-arrow-prev { 
    bottom: 7.0%; 
    left: 69%; 
    width: 4%; 
    height: 6%; 
}

/* DIE BASIS-LOGIK FÜR ALLE SCHALTFLÄCHEN */
.hotspot {
    position: absolute;
    z-index: 10;        /* Sorgt dafür, dass sie ganz oben liegen */
    cursor: pointer;    /* Macht die "Hand" beim Drüberfahren */
    
    /* RÖNTGENBLICK: 0.4 zum Testen, 0 für das fertige Projekt */
    background: rgba(255, 0, 0, 0); 
    outline: 2px solid transparent; /* Hilfslinie für die Kanten */
}