@charset "utf-8";

/* =============================================
   POPUP STYLING FÜR POP-TROX BILDER
   ============================================= */

/* Verhindert das Highlighten beim Tippen auf mobilen Geräten */
.poptrox-overlay {
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

/* Styling für das Popup-Fenster */
.poptrox-popup {
    background: transparent;
    cursor: default;
    width: 80%; /* Popup nimmt 80% der Breite ein */
    height: auto; /* Höhe passt sich automatisch an */
}

/* Styling für die Bilder im Popup */
.poptrox-popup img {
    box-shadow: 0.3em 0.3em 1em 0.2em rgba(0, 0, 0, 0.15); /* Bildschatten */
    border:1px solid #000;
    width: auto; /* Breite proportional */
    height: 60%; /* Bildhöhe auf 60% des Containers festgelegt */
}

/* Overlay-Effekt für das Popup */
.poptrox-popup:before {
    transition: opacity 0.2s ease-in-out;
    content: '';
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 110%; /* Leicht über dem Popup */
    z-index: 1;
    opacity: 1; /* Standard-Opazität */
}

/* =============================================
   NAVIGATIONSELEMENTE (VORHER/NÄCHSTES BILD)
   ============================================= */

/* Grundlegende Stile für die Navigationspfeile */
.poptrox-popup .nav-previous,
.poptrox-popup .nav-next {
    transition: opacity 0.2s ease-in-out;
    background-image: url("../../img/000_GUI/svg/arrow_right_black.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 3em;
    cursor: pointer;
    height: 20%;
    margin-top: -1em; /* Pfeile etwas über dem unteren Rand */
    opacity: 0.7;
    position: absolute;
    top: 100%;
    width: 40%;
    z-index: 2;
}

/* Pfeil für vorheriges Bild (horizontal gespiegelt) */
.poptrox-popup .nav-previous {
    transform: scaleX(-1); /* Horizontal gespiegelt */
    left: 0;
}

/* Pfeil für nächstes Bild */
.poptrox-popup .nav-next {
    right: 0;
}

/* =============================================
   CAPTION (BESCHRIFTUNG) FÜR POPUP
   ============================================= */

/* Beschriftungsbereich */
.poptrox-popup .caption {
    bottom: -3em;
    position: absolute;
    text-align: center;
    width: 100%;
    z-index: 2;
}


/* =============================================
   SPINNER (LADE-ANZEIGE)
   ============================================= */

/* Spinner-Anzeige beim Laden */
.poptrox-popup .loader {
    animation: spinner 1s infinite linear !important; /* Endlos drehender Spinner */
    background-image: url("../../assets/img/svg/not_used/spinner.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    height: 2em;
    left: 50%;
    margin: -1em 0 0 -1em;
    opacity: 0.25; /* Halb durchsichtig */
    position: absolute;
    top: 50%;
    width: 2em;
}

/* =============================================
   HOVER-EFFEKTE FÜR DAS POPUP
   ============================================= */

/* Hover-Effekte für die Schließen- und Navigationsbuttons */
.poptrox-popup:hover .closer,
.poptrox-popup:hover .nav-previous,
.poptrox-popup:hover .nav-next {
    opacity: 0.5; /* Sichtbarer bei Hover */
}

/* Bei erneutem Hover volle Opazität */
.poptrox-popup:hover .closer:hover,
.poptrox-popup:hover .nav-previous:hover,
.poptrox-popup:hover .nav-next:hover {
    opacity: 1.0; /* Voll sichtbar */
}

/* Overlay verschwindet beim Laden */
.poptrox-popup.loading:before {
    opacity: 0;
}

/* Sichtbarkeit der Navigationselemente auf Touch-Geräten */
body.touch .poptrox-popup .closer,
body.touch .poptrox-popup .nav-previous,
body.touch .poptrox-popup .nav-next {
    opacity: 1.0 !important; /* Immer sichtbar */
}

/* =============================================
   MEDIA QUERIES (RESPONSIVE ANPASSUNGEN)
   ============================================= */

/* Anpassung für Bildschirme bis zu 1080px */
@media screen and (max-width: 1080px) {
    .poptrox-popup {
        width: 80%; /* Breiteres Popup */
    }
    .poptrox-popup img {
        height: 50%; /* Kleinere Bildhöhe */
    }
}

/* Anpassung für Bildschirme bis zu 800px */
@media screen and (max-width: 800px) {
    .poptrox-popup {
        width: 90%; /* Popup fast vollbreit */
    }
    .poptrox-popup img {
        height: 40%; /* Bild wird kleiner */
    }
    .poptrox-popup .nav-previous,
    .poptrox-popup .nav-next {
        width: 7em; /* Kleinere Pfeile */
        background-size: 2.5em;
    }
}

/* Anpassung für Bildschirme bis zu 480px */
@media screen and (max-width: 480px) {
    .poptrox-popup {
        width: 95%; /* Fast die volle Breite */
    }
    .poptrox-popup img {
        height: 30%; /* Noch kleinere Bildhöhe */
    }
    .poptrox-popup .nav-previous,
    .poptrox-popup .nav-next {
        width: 5em; /* Kleinere Navigationselemente */
        background-size: 2em;
    }
}