/* =========================================================
   ELITE FLIPBOX – FRONTEND
   Kein Scroll-JS. Keine Waypoints. Keine Layout-Höhenanimation.
   ========================================================= */

.efb-flip {
    width: 100%;
    min-height: var(--efb-min-d);
    perspective: 1200px;
    -webkit-perspective: 1200px;
    outline: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    contain: layout paint;
}

.efb-flip__inner {
    position: relative;
    width: 100%;
    min-height: inherit;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transition: transform var(--efb-duration) cubic-bezier(.4, 0, .2, 1);
    will-change: transform;
}

.efb-flip__face {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: var(--efb-vertical);
    width: 100%;
    min-height: inherit;
    padding: var(--efb-pad-d);
    /* Enfold setzt auf vielen DIVs global eine border-color.
       !important stellt sicher, dass die pro Flipbox gewählte Rahmenfarbe gewinnt. */
    border-width: var(--efb-border-width) !important;
    border-style: solid !important;
    border-color: var(--efb-border) !important;
    border-radius: var(--efb-radius) !important;
    overflow: hidden;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

.efb-flip__front {
    background: var(--efb-front-bg);
    color: var(--efb-front-text);
    text-align: var(--efb-front-align);
}

.efb-flip__back {
    background: var(--efb-back-bg);
    color: var(--efb-back-text);
    text-align: var(--efb-back-align);
}

.efb-flip--horizontal .efb-flip__back {
    transform: rotateY(180deg);
}

.efb-flip--vertical .efb-flip__back {
    transform: rotateX(180deg);
}

/* Desktop / präziser Zeiger: Hover + Tastatur */
@media (hover: hover) and (pointer: fine) {
    .efb-flip--horizontal:hover .efb-flip__inner,
    .efb-flip--horizontal:focus .efb-flip__inner {
        transform: rotateY(180deg);
    }

    .efb-flip--vertical:hover .efb-flip__inner,
    .efb-flip--vertical:focus .efb-flip__inner {
        transform: rotateX(180deg);
    }
}

/* Mobile/Touch sowie expliziter JS-Zustand */
.efb-flip--horizontal.is-flipped .efb-flip__inner {
    transform: rotateY(180deg);
}

.efb-flip--vertical.is-flipped .efb-flip__inner {
    transform: rotateX(180deg);
}

.efb-flip__content {
    width: 100%;
}

.efb-flip__title {
    margin: 0 0 14px !important;
    color: inherit !important;
    font-size: var(--efb-title-d) !important;
    font-weight: var(--efb-title-weight) !important;
    line-height: var(--efb-title-lh) !important;
    letter-spacing: -0.02em;
}

.efb-flip__body,
.efb-flip__body p {
    color: inherit !important;
    font-size: var(--efb-body-d) !important;
    font-weight: var(--efb-body-weight) !important;
    line-height: var(--efb-body-lh) !important;
}

.efb-flip__body p:last-child {
    margin-bottom: 0;
}

.efb-flip__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    padding: 11px 20px;
    border: 0;
    border-radius: 999px;
    background: var(--efb-button-bg);
    color: var(--efb-button-text) !important;
    font-size: var(--efb-button-size);
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none !important;
    transition: transform .2s ease, opacity .2s ease;
}

.efb-flip__button:hover,
.efb-flip__button:focus {
    transform: translateY(-2px);
    opacity: .9;
}

.efb-flip__hint {
    display: none;
}

@media (max-width: 767px) {
    .efb-flip {
        min-height: var(--efb-min-m);
    }

    .efb-flip__face {
        padding: var(--efb-pad-m);
    }

    .efb-flip__title {
        font-size: var(--efb-title-m) !important;
    }

    .efb-flip__body,
    .efb-flip__body p {
        font-size: var(--efb-body-m) !important;
    }

    .efb-flip__hint {
        display: inline-block;
        margin-top: 18px;
        font-size: 11px;
        line-height: 1.3;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--efb-accent);
    }
}

/* Barrierefreiheit: Bewegung reduzieren = kein 3D-Flip, sondern sofortiger Seitenwechsel */
@media (prefers-reduced-motion: reduce) {
    .efb-flip__inner {
        transition: none !important;
    }
}


/* =========================================================
   FLIPBOX-RASTER
   Shortcode: [elite_flipboxes ids="..." columns="3"]
   ========================================================= */
.efb-grid {
    display: grid;
    grid-template-columns: repeat(var(--efb-grid-cols-d, 3), minmax(0, 1fr));
    gap: var(--efb-grid-gap, 24px);
    width: 100%;
}

.efb-grid__item {
    min-width: 0;
}

/* Tablet */
@media (max-width: 989px) {
    .efb-grid {
        grid-template-columns: repeat(var(--efb-grid-cols-t, 2), minmax(0, 1fr));
    }
}

/* Smartphone */
@media (max-width: 767px) {
    .efb-grid {
        grid-template-columns: repeat(var(--efb-grid-cols-m, 1), minmax(0, 1fr));
    }
}

/* 1.2.0: Gruppen nutzen dasselbe Raster wie der bisherige Mehrfach-Shortcode. */

/* =========================================================
   1.3.0 – ICON AUF DER VORDERSEITE
   PNG bleibt in Originalfarben; SVG nutzt --efb-icon-color.
   ========================================================= */
.efb-flip__icon {
    display: block;
    margin: 0 0 var(--efb-icon-gap) 0;
    color: var(--efb-icon-color);
    line-height: 0;
}

.efb-flip__icon img,
.efb-flip__icon svg {
    display: inline-block;
    width: var(--efb-icon-d);
    height: var(--efb-icon-d);
    max-width: 100%;
    object-fit: contain;
    vertical-align: top;
}

/* Vorhandene SVG-Farben werden auf die eingestellte Icon-Farbe gesetzt.
   fill="none" bzw. stroke="none" bleiben respektiert. */
.efb-flip__icon svg [fill]:not([fill="none"]) {
    fill: currentColor !important;
}

.efb-flip__icon svg [stroke]:not([stroke="none"]) {
    stroke: currentColor !important;
}

/* Einfache Vollflächen-SVGs ohne explizites fill/stroke ebenfalls färben. */
.efb-flip__icon svg path:not([fill]):not([stroke]),
.efb-flip__icon svg circle:not([fill]):not([stroke]),
.efb-flip__icon svg rect:not([fill]):not([stroke]),
.efb-flip__icon svg polygon:not([fill]):not([stroke]),
.efb-flip__icon svg ellipse:not([fill]):not([stroke]) {
    fill: currentColor !important;
}

@media (max-width: 767px) {
    .efb-flip__icon img,
    .efb-flip__icon svg {
        width: var(--efb-icon-m);
        height: var(--efb-icon-m);
    }
}