/* --- BASIS & TRESOR --- */
body, html {
    margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden;
    background-image: url('background_texture.png');
    background-size: cover; background-position: center;
    display: flex; justify-content: center; align-items: center;
}

.main-container {
    position: relative;
    width: 100vw; height: 56.25vw;
    max-width: 1920px; max-height: 1080px;
    overflow: hidden;
}

@media (min-aspect-ratio: 16/9) {
    .main-container { width: 177.78vh; height: 100vh; }
}

/* --- INHALTE (MAP & INFO) --- */
#map-frame {
    position: absolute;
    top: 14.5%; 
    left: 4.5%; 
    /* Wir erhöhen die Breite auf 91%, genau wie beim Placeholder */
    width: 91%; 
    height: 71.5%; 
    border: none; 
    z-index: 1;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    
    /* WICHTIG: Damit die Map innerhalb des Iframes nicht springt */
    object-fit: cover;
}

#map-frame.show {
    opacity: 1;
    /* Erhöht, aber immer noch UNTER der Info-Spalte (z-index 6) 
       und UNTER dem Rahmen (z-index 5) */
    z-index: 3; 
}

/* LÖSUNG: PARTIELLES ANHEFTEN & BLEED-UNDER */
#map-placeholder {
    position: absolute;
    top: 14.5%; 
    left: 4.5%; 
    /* Breite auf ca. 91% erhöht, damit es unter die Info-Spalte ragt */
    width: 91%; 
    height: 71.5%; 
    z-index: 2; 
    object-fit: cover;
    /* ANKERPUNKT: Legende und Titel bleiben immer sichtbar */
    object-position: top left; 
}

.info-column {
    position: absolute;
    top: 14.5%; 
    right: 4.65%; 
    width: 27.5%; 
    height: 71.5%;
    /* WICHTIG: Z-Index höher als Map-Placeholder (2), damit sie ihn überdeckt */
    z-index: 6; 
    background-color: #fdf2f4; /* Gleiche Farbe wie Textur, um Map zu verdecken */
}

.info-column img { width: 100%; height: 100%; object-fit: contain; }

/* --- RAHMEN & HOTSPOTS --- */
.bg-mask {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 5; pointer-events: none; object-fit: contain;
}

.hotspot {
    position: absolute; z-index: 10; cursor: pointer;
    background: rgba(255, 0, 0, 0); outline: 1px solid transparent;
}

.nav-btn { top: 9%; width: 8%; height: 4%; }
#btn-visit-seeds { left: 32%; }
#btn-sponsors { left: 41%; width: 14%; height: 4%;}
#btn-back-to-map { left: 57%; }
#btn-info { left: 67%; width: 5%; height: 4%;}
#btn-group-gif { bottom: 5%; right: 2%; width: 10%; height: 10%; }
#btn-visit-gold-extra { left: 83%; width: 10%; height: 7%;}
#btn-back { 
    left: 74%; /* Hier schiebst du ihn nach rechts oder links */
    width: 6%;  /* Falls er schmaler sein soll als die anderen 8% */
}

.map-area-btn { z-index: 15; width: 7%; height: 7%; }
#area-lehen { top: 29%; left: 32%; }
#area-strand { top: 37.5%; left: 26%; }
#area-braeu { top: 45%; left: 34%; }
#area-hanusch { top: 54%; left: 41%; }

/* --- POP-UPS & UTILS --- */
/* EBENE: POP-UPS (Hintergrund jetzt unsichtbar) */
.popup-overlay {
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    /* Hintergrund auf transparent setzen */
    background: rgba(0, 0, 0, 0); 
    z-index: 20;
    display: none; 
    justify-content: center; 
    align-items: center;
    /* Verhindert, dass man versehentlich durch das Pop-up klickt */
    pointer-events: auto; 
}

/* DAS POP-UP SELBST (Mit Schatten-Aura) */
.popup-content { 
    position: relative; 
    background: #fff; /* Falls das PNG Transparenzen hat, gibt das eine feste Basis */
    line-height: 0;   /* Verhindert kleine weiße Ränder unter dem Bild */
    
    /* DER SCHATTEN: 
       0px (X-Versatz) 0px (Y-Versatz) 50px (Weichzeichnung) 10px (Ausbreitung) */
    box-shadow: 0 0 50px 10px rgba(0, 0, 0, 0.5); 
    
    border-radius: 5px; /* Optionale leichte Abrundung der Ecken */
}

/* Das Bild im Pop-up */
#popup-img {
    max-width: 80vw;
    max-height: 80vh;
    display: block;
}
/* DAS UNSICHTBARE KREUZ ZUM SCHLIESSEN */
.close-x {
    position: absolute;
    /* Positioniere es grob oben rechts im Popup-Fenster */
    top: 10px;    
    right: 10px;  
    
    /* Die Größe der Klickfläche - passend zum X in deiner Grafik */
    width: 45px; 
    height: 45px; 
    
    /* Wichtig, damit man merkt, dass man klicken kann */
    cursor: pointer;
    
    /* Muss über dem Popup-Bild (z-index 20) liegen */
    z-index: 30; 

    /* RÖNTGENBLICK: Damit du siehst, wo du schiebst */
    background: rgba(255, 0, 0, 0); 
    border: 2px solid transparent;
    
    /* Falls du das rote Quadrat abrunden willst: */
    border-radius: 5px;
}


.hidden { display: none !important; }