/* ===================================================================
   BKK Formulare – Page Transition
   EXIT  : slide left  + fade out  (220 ms)
   ENTER : snap right  → slide to normal + fade in  (340 ms)
   =================================================================== */

/* No base transition — transitions are added per state */
.bkk-formulare-gf-wrap {
    will-change: opacity, transform;
}

/* ── EXIT ────────────────────────────────────────────────────────── */
.bkk-formulare-gf-wrap.bkk-exit {
    opacity:         0;
    transform:       translateX(-16px);
    transition:      opacity 220ms ease-out, transform 220ms ease-out;
    pointer-events:  none;
    user-select:     none;
}

/* ── ENTER: snap to start (right, invisible) – no transition ──────── */
.bkk-formulare-gf-wrap.bkk-enter {
    opacity:    0;
    transform:  translateX(16px);
    transition: none !important;
}

/* ── ENTER active: animate to normal ─────────────────────────────── */
.bkk-formulare-gf-wrap.bkk-enter.bkk-enter-active {
    opacity:   1;
    transform: translateX(0);
    transition:
        opacity   340ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 340ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* ── Reduced motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .bkk-formulare-gf-wrap.bkk-exit {
        transition: opacity 100ms ease !important;
        transform:  none !important;
    }
    .bkk-formulare-gf-wrap.bkk-enter {
        transform: none !important;
    }
    .bkk-formulare-gf-wrap.bkk-enter.bkk-enter-active {
        transition: opacity 100ms ease !important;
        transform:  none !important;
    }
}