/* =====================================
   KFGb Flipbox – Vertical 3D (Stable)
   Hover (Maus) + Tap (Touch) + Tastatur
===================================== */

/* Wrapper */
.kfgb-flipbox {
    position: relative;
    overflow: visible;
    aspect-ratio: 2 / 3;
    perspective: 900px; /* stärkerer 3D Effekt ohne Z-Artefakte */
}

/* Inner */
.kfgb-flipbox-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform .85s cubic-bezier(.4,0,.2,1);
    will-change: transform;
}

/* Hover-Flip nur für echte Maus-Geräte */
@media (hover: hover) and (pointer: fine) {
    .kfgb-flipbox:hover .kfgb-flipbox-inner {
        transform: rotateX(180deg);
    }
}

/* Flip per Tap / Tastatur (Klasse wird per JS gesetzt) */
.kfgb-flipbox.is-flipped .kfgb-flipbox-inner {
    transform: rotateX(180deg);
}

/* Front & Back */
.kfgb-flipbox-front,
.kfgb-flipbox-back {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-style: preserve-3d;
    border-radius: 2rem;
    overflow: hidden;

    /* GPU Stabilizer */
    transform: translateZ(0);
}

/* Front */
.kfgb-flipbox-front {
    transform: rotateX(0deg);
    height: 100%;
}

.kfgb-flipbox-front img {
    object-fit: cover;
    height: 100%;
}

/* Back */
.kfgb-flipbox-back {
    transform: rotateX(180deg);
}

.kfgb-flipbox-back p {
    text-wrap: pretty;
}

/* Overlay */
.kfgb-flipbox-front::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.25);
    z-index: 1;
}

/* Touch-Geräte */
@media (hover: none), (pointer: coarse) {
    .kfgb-flipbox {
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    /* Verdeckte Rückseite darf keine Taps abfangen (z. B. Links darauf) */
    .kfgb-flipbox:not(.is-flipped) .kfgb-flipbox-back {
        pointer-events: none;
    }
}

/* Tastaturfokus sichtbar */
.kfgb-flipbox:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
    border-radius: 2rem;
}

/* Accessibility – Reduced Motion: Umschalten ohne Animation */
@media (prefers-reduced-motion: reduce) {
    .kfgb-flipbox-inner {
        transition: none;
    }
}