/* --- BASIS & TRESOR-SYSTEM --- */
/* --- BASIS (Hintergrund-Tapete) --- */
body, html {
    margin: 0; 
    padding: 0; 
    width: 100%; 
    height: 100%; 
    overflow: hidden;
    
    /* NEU: Die Textur für die gesamte Seite */
    background-image: url('background_texture.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    display: flex; 
    justify-content: center; 
    align-items: center;
}

.main-container {
    position: relative;
    /* Behält das 16:9 Verhältnis bei */
    width: 100vw; 
    height: 56.25vw; 
    max-width: 1920px; 
    max-height: 1080px;
    display: block;
    
    /* Sicherstellen, dass der Container selbst transparent ist, 
       damit die Textur durchscheinen kann (falls gewünscht) */
    background-color: transparent;
}

/* Fix für sehr schmale/hohe Bildschirme */
@media (min-aspect-ratio: 16/9) {
    .main-container {
        width: 177.78vh;
        height: 100vh;
    }
}
/* --- HINTERGRUND & STREIFEN --- */
.bg-mask, .overlay-img {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 1; pointer-events: none; object-fit: contain;
}

.overlay-img { z-index: 5; }

.strips-wrapper {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    display: flex; z-index: 2;
}

.strip { position: relative; height: 100%; flex: 1; overflow: hidden; }

.strip img {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover; transition: opacity 0.5s ease-in-out; opacity: 0;
}

.strip img.active { opacity: 1; }

/* --- SKALIERBARE HOTSPOTS (Prozent-Lösung) --- */
.hotspot-layer {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 10; pointer-events: none;
}

.hotspot {
    position: absolute; display: block; cursor: pointer; pointer-events: auto;
    background: rgba(255, 0, 0, 0); /* RÖNTGENBLICK: Für Finale auf 0 setzen */
}

/* Hauptstreifen: Stoppen bei ca. 86% Höhe (rettet die 150px Logoleiste) */
.main-strip-left, .main-strip-mid, .main-strip-right {
    top: 0; height: 86%; z-index: 10;
}
.main-strip-left  { left: 0; width: 33.33%; }
.main-strip-mid   { left: 33.33%; width: 33.33%; }
.main-strip-right { left: 66.66%; width: 33.33%; }

/* Logoleiste: Positionen von Pixel in % umgerechnet (Basis 1920x1080) */
.logo-kronberger, .logo-arge, .logo-sponsors, .logo-goldextra {
    z-index: 50; bottom: 2%; height: 7.5%;
}

.logo-kronberger { left: 10.3%; width: 15.8%; } 
.logo-arge       { left: 36.4%; width: 13.4%; } 
.logo-sponsors   { right: 35.8%; width: 8.8%; }  
.logo-goldextra  { right: 11.8%;   width: 11.5%; } 

/* Impressum Button */
.link-impressum {
    position: absolute; bottom: 1%; right: 2.6%; 
    width: 6.2%; height: 3.7%;
    background: rgba(0, 0, 0, 0);
    border: 1px solid rgba(0, 0, 0, 0.4);
    border-radius: 6px; z-index: 100;
    display: flex; justify-content: center; align-items: center;
    pointer-events: auto; cursor: pointer;
}

/* --- POPUP SYSTEM --- */
.popup-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.5); display: none; z-index: 1000;
}

.popup-content {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}

.close-hotspot {
    position: absolute; top: 1%; right: 1%;
    width: 8%; height: 8%;
    background: rgba(0, 0, 0, 0); border: 2px solid transparent;
    cursor: pointer; z-index: 1010;
}