/* =============================================================
   Team Garaventa – Animations CSS
   ============================================================= */

/* ------------------------------------------------------------------
   1. BURGER-MENÜ: nur auf iPhone (bis 926px)
   ------------------------------------------------------------------ */
.menu-icon,
.header3 .menu-icon {
    display: none !important;
}

@media only screen and (max-width: 926px) {

    /* Header: Abstand nach oben damit Logo nicht am Burger klebt */
    .header3 {
        padding-top: 75px !important;
    }

    /* Burger: fixed oben rechts, 20px Abstand */
    .menu-icon,
    .header3 .menu-icon {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: fixed !important;
        top: 20px !important;
        right: 20px !important;
        width: 44px !important;
        height: 44px !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        z-index: 9000 !important;
    }

    .menu-icon a,
    .header3 .menu-icon a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .menu-icon i,
    .header3 .menu-icon i {
        padding: 0 !important;
        margin: 0 !important;
        line-height: 1 !important;
        font-size: 18px !important;
    }

    /* X-Button: fixed oben rechts */
    .close-menu {
        position: fixed !important;
        top: 20px !important;
        right: 20px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        height: 44px !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        z-index: 999999 !important;
    }

    .close-menu a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .close-menu i {
        padding: 0 !important;
        margin: 0 !important;
        line-height: 1 !important;
        font-size: 18px !important;
    }

    /* Mobile Menü Overlay */
    .header3-menu {
        display: none;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 99998 !important;
        overflow-y: auto !important;
    }
}

/* ------------------------------------------------------------------
   2. SCROLL-REVEAL – auch auf Mobile aktiv
   ------------------------------------------------------------------ */

.tg-sr-enter-top {
    opacity: 0;
    transform: translateY(-8px) scale(0.95);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.tg-sr-enter-top.tg-sr-done {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.tg-sr-enter-bottom {
    opacity: 0;
    transform: translateY(8px) scale(0.95);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.tg-sr-enter-bottom.tg-sr-done {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.tg-sr-enter-left {
    opacity: 0;
    transform: translateX(-8px) scale(0.95);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.tg-sr-enter-left.tg-sr-done {
    opacity: 1;
    transform: translateX(0) scale(1);
}

.tg-sr-service {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    transition: opacity 1s ease, transform 1s ease;
}
.tg-sr-service.tg-sr-done {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.tg-sr-scale {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.tg-sr-scale.tg-sr-done {
    opacity: 1;
    transform: scale(1);
}

.tg-sr-cta {
    opacity: 0;
    transform: translateY(-25px) scale(0.95);
    transition: opacity 1.5s cubic-bezier(0.6,0.2,0.1,1),
                transform 1.5s cubic-bezier(0.6,0.2,0.1,1);
}
.tg-sr-cta.tg-sr-done {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* ------------------------------------------------------------------
   3. SLIDER-CAPTION (schwarze Box)
   Auf allen Geräten aktiv inkl. Mobile
   ------------------------------------------------------------------ */
/* Caption: alle versteckt, JS animiert sie */
.um-slide-caption {
    opacity: 0 !important;
    will-change: opacity;
    visibility: hidden;
}
.um-slide-caption.tg-caption-animate {
    visibility: visible;
    transition: opacity 0.55s ease;
}
.um-slide-caption.tg-caption-visible {
    opacity: 1 !important;
    visibility: visible;
}

/* Caption auch auf iPhone Portrait sichtbar */
@media only screen and (max-width: 480px) {
    .um-slide-caption {
        display: block !important;
        width: 180px !important;
        height: auto !important;
        padding: 18px !important;
    }
    .um-slide-caption h3 {
        font-size: 16px !important;
        line-height: 22px !important;
    }
}
/* Fallback: falls JS nicht greift, erste Caption trotzdem sichtbar */
.no-js .um-slides li:first-child .um-slide-caption {
    opacity: 1;
    transform: none;
}