/* --- 1. AUTOMATISCHER BILD-CONTAINER --- */

/* Der Container verhält sich jetzt wie ein DIV */
.zoom-container {
    display: block;      
    max-width: 750px;
    width: 100%;
    margin: 0 auto 20px;
    position: relative;  /* Absolut wichtig: Anker für die Lupe */
    z-index: 1;
    line-height: 0;
    /* Wir nutzen KEIN Flexbox, aber erzwingen das zentrierte Layout */
    text-align: center; 
}


/* --- 2. DIE LUPE (STABILE VERSION OHNE URL-FEHLER) --- */
.zoom-container::after {
    content: '';
    display: block;
    position: absolute;
/* Zentrierung per absolute-Abstände statt transform */
    top: 0; left: 0; right: 0; bottom: 0;
    margin: auto; 
    
    width: 60px;
    height: 60px;
    
    /* Deine SVG-Technik: Weiß im Standard */
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2 -2 30 32'%3E%3Cpath fill='%23ffffff' stroke='%23333333' stroke-width='.9' d='M16 12.5v1c0 .3-.2.5-.5.5h-3.5v3.5c0 .3-.2.5-.5.5h-1c-.3 0-.5-.2-.5-.5v-3.5h-3.5c-.3 0-.5-.2-.5-.5v-1c0-.3.2-.5.5-.5h3.5v-3.5c0-.3.2-.5.5-.5h1c.3 0 .5.2.5.5v3.5h3.5c.3 0 .5.2.5.5zM18 13c0-3.9-3.1-7-7-7s-7 3.1-7 7 3.1 7 7 7 7-3.1 7-7zM26 26c0 1.1-.9 2-2 2-.5 0-1-.2-1.4-.6l-5.4-5.3c-1.8 1.3-4 1.9-6.2 1.9-6.1 0-11-4.9-11-11s4.9-11 11-11 11 4.9 11 11c0 2.2-.7 4.4-1.9 6.2l5.4 5.4c.3.3.6.8.6 1.4z'/%3E%3C/svg%3E") no-repeat center;
    
    
    background-size: contain;
    
     /* Höhere Deckkraft im Ruhezustand */
    opacity: 0.4; 
 
    z-index: 999;
    pointer-events: none;
    /* Plopp-Effekt ohne Transition beim Transform */
    transition: opacity 0.3s ease;
    transform: scale(1);
}

/* --- DARK-MODE ANPASSUNG DER LUPE --- */
.alt-theme-color .zoom-container::after {    
    /* Höhere Grund-Sichtbarkeit im Dark Mode */
    opacity: 0.6; 
    /* Ein leichter heller Schein statt eines dunklen Schattens */
    xxfilter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.1));

}


/* --- 4. HOVER-EFFEKT (STABIL BLEIBEN) --- */
.zoom-container:hover::after {
 	opacity: 0.7;
    transform: scale(1.15); /* Nur noch Skalierung, kein Ruckeln mehr */
}


.zoom-img {
    cursor: zoom-in;
    max-width: 100%;
    height: auto;
}

/* --- 5. LIGHTBOX STYLING (OHNE FLEXBOX) --- */
#custom-lightbox {
    display: none;
    position: fixed;
    z-index: 10000;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    cursor: zoom-out;
    opacity: 0;
    transition: opacity 0.3s ease;
}

#custom-lightbox.active {
    display: block; /* Einfaches Einblenden */
    opacity: 1;
}

#custom-lightbox img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Zentriert das Bild exakt */
    max-width: 90%;
    max-height: 85%;
    border-radius: 4px;
    box-shadow: 0 0 30px rgba(0,0,0,0.8);
}

#lb-caption {
    position: absolute;
    width: 100%;
    bottom: 5%; /* Platziert den Text fest unten */
    text-align: center;
    color: #7e8e98;
    font-family: sans-serif;
    text-shadow: 1px 1px 2px #000;
}



/* --- 2. DAS SCHLIESSEN-X (OHNE WACKELN) --- */
#lb-close {
position: absolute;
    top: 20px;
    right: 25px;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    
    /* Hintergrundfarbe im Ruhezustand */
    background-color: rgba(0, 0, 0, 0.4);
    
    
    /* SVG als Hintergrundbild - Korrekte URL */
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px;
    
    cursor: pointer;
    z-index: 10001;
    
/* KEINE Transition für transform = sofortiger Sprung */
    transition: background-color 0.2s ease; 
    transform: scale(1);
}

#lb-close:hover {
background-color: rgba(0, 0, 0, 0.7);
    /* Sofortiger Sprung ohne Ruckeln */
    transform: scale(1.15); 
    
    
}


/* DARK MODE FÜR DAS X */
.alt-theme-color #lb-close {
    /* Gleiches SVG, nur mit fill='%237e8e98' (dein Graublau) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%237e8e98'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E");
}




@media (max-width: 600px) {
    #custom-lightbox img {
        max-width: 100%;  /* Nutzt die volle Breite am Handy */
        max-height: 90%;  /* Lässt nur noch minimal Platz für die Caption */
        border-radius: 0; /* Spart Platz an den Ecken */
    }
    
    #lb-caption {
        font-size: 0.9rem; /* Text etwas kleiner machen */
        bottom: 2%;        /* Text weiter nach unten schieben */
    }

    #lb-close { /* Größerer Button für Finger-Bedienung */
        top: 15px;
        right: 15px;
        width: 55px;
        height: 55px;
        background-size: 30px; /* Macht das X größer */
    }
}