/* =========================================================
   FOLLOWHAUS
   PLATFORM HOVER + NAME
   SERVICE MENU CASCADE
   SERVICE CARD HOVER
   REVIEW INFINITE MARQUEE

   KOMPLETTER ERSATZCODE
   ========================================================= */


/* =========================================================
   1. PLATFORM ITEM – BASIS
   ========================================================= */

html body .fh-platform-slider .fh-platform-item {
    position: relative !important;
    z-index: 1 !important;
    overflow: visible !important;
    cursor: pointer !important;

    transform:
        translateY(0)
        scale(1) !important;

    transform-origin:
        center center !important;

    transition:
        transform 0.30s
        cubic-bezier(0.22, 1, 0.36, 1) !important;

    -webkit-tap-highlight-color: transparent;
}


/* =========================================================
   2. PLATFORM SVG – BASIS
   ========================================================= */

html body .fh-platform-slider .fh-platform-item svg {
    transform:
        translateY(0)
        scale(1) !important;

    transform-origin:
        center center !important;

    transition:
        transform 0.30s
        cubic-bezier(0.22, 1, 0.36, 1) !important;

    will-change: transform;
}


/* =========================================================
   3. PLATFORM HOVER
   ========================================================= */

html body .fh-platform-slider .fh-platform-item:hover {
    z-index: 50 !important;

    transform:
        translateY(-5px)
        scale(1.07) !important;
}


html body .fh-platform-slider .fh-platform-item:hover svg {
    transform:
        translateY(-5px)
        scale(1.07) !important;
}


/* =========================================================
   4. SELECTED OPTISCH IGNORIEREN
   ========================================================= */

html body
.fh-platform-slider
.fh-platform-item.is-selected:not(:hover) {

    z-index: 1 !important;

    transform:
        translateY(0)
        scale(1) !important;
}


html body
.fh-platform-slider
.fh-platform-item.is-selected:not(:hover) svg {

    transform:
        translateY(0)
        scale(1) !important;
}


/* =========================================================
   5. PLATFORM CLICK / PRESS
   ========================================================= */

html body .fh-platform-slider .fh-platform-item:active {
    transform:
        translateY(-2px)
        scale(1.03) !important;

    transition-duration:
        0.10s !important;
}


html body .fh-platform-slider .fh-platform-item:active svg {
    transform:
        translateY(-2px)
        scale(1.03) !important;

    transition-duration:
        0.10s !important;
}


/* =========================================================
   6. PLATFORM NAME – BASIS
   ========================================================= */

html body .fh-platform-slider .fh-platform-item::after {
    content:
        var(--fh-platform-name, "");

    position:
        absolute !important;

    left:
        50% !important;

    top:
        -30px !important;

    transform:
        translateX(-70%)
        translateY(10px)
        scale(0.90) !important;

    transform-origin:
        center center !important;

    opacity:
        0;

    visibility:
        hidden;

    color:
        #ffffff !important;

    background:
        transparent !important;

    border:
        0 !important;

    margin:
        0 !important;

    padding:
        0 !important;

    font-family:
        "Inter",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif !important;

    font-size:
        13px !important;

    font-weight:
        700 !important;

    line-height:
        1 !important;

    letter-spacing:
        0.5px !important;

    white-space:
        nowrap !important;

    pointer-events:
        none !important;

    z-index:
        100 !important;

    transition:
        opacity 0.20s ease,
        transform 0.30s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0.20s ease !important;
}


/* =========================================================
   7. PLATFORM NAME – HOVER
   ========================================================= */

html body .fh-platform-slider .fh-platform-item:hover::after {
    opacity:
        1;

    visibility:
        visible;

    transform:
        translateX(-50%)
        translateY(0)
        scale(1) !important;
}


/* =========================================================
   8. PLATFORM NAME – NACH KLICK WIEDER WEG
   ========================================================= */

html body
.fh-platform-slider
.fh-platform-item.is-selected:not(:hover)::after {

    opacity:
        0 !important;

    visibility:
        hidden !important;

    transform:
        translateX(-70%)
        translateY(10px)
        scale(0.90) !important;
}


/* =========================================================
   9. PLATFORM NAMEN
   ========================================================= */

.fh-platform-instagram {
    --fh-platform-name: "INSTAGRAM";
}

.fh-platform-threads {
    --fh-platform-name: "THREADS";
}

.fh-platform-tiktok {
    --fh-platform-name: "TIKTOK";
}

.fh-platform-facebook {
    --fh-platform-name: "FACEBOOK";
}

.fh-platform-snapchat {
    --fh-platform-name: "SNAPCHAT";
}

.fh-platform-x {
    --fh-platform-name: "X";
}

.fh-platform-onlyfans {
    --fh-platform-name: "ONLYFANS";
}

.fh-platform-youtube {
    --fh-platform-name: "YOUTUBE";
}

.fh-platform-twitch {
    --fh-platform-name: "TWITCH";
}

.fh-platform-kick {
    --fh-platform-name: "KICK";
}

.fh-platform-discord {
    --fh-platform-name: "DISCORD";
}

.fh-platform-whatsapp {
    --fh-platform-name: "WHATSAPP";
}

.fh-platform-telegram {
    --fh-platform-name: "TELEGRAM";
}

.fh-platform-apple {
    --fh-platform-name: "APPLE";
}

.fh-platform-spotify {
    --fh-platform-name: "SPOTIFY";
}

.fh-platform-soundcloud {
    --fh-platform-name: "SOUNDCLOUD";
}

.fh-platform-shopee {
    --fh-platform-name: "SHOPEE";
}

.fh-platform-fiverr {
    --fh-platform-name: "FIVERR";
}

.fh-platform-website {
    --fh-platform-name: "WEBSITE";
}

.fh-platform-reddit {
    --fh-platform-name: "REDDIT";
}

.fh-platform-pinterest {
    --fh-platform-name: "PINTEREST";
}

.fh-platform-rumble {
    --fh-platform-name: "RUMBLE";
}

.fh-platform-tumblr {
    --fh-platform-name: "TUMBLR";
}

.fh-platform-crypto {
    --fh-platform-name: "CRYPTO";
}

.fh-platform-github {
    --fh-platform-name: "GITHUB";
}

.fh-platform-dribbble {
    --fh-platform-name: "DRIBBBLE";
}

.fh-platform-linkedin {
    --fh-platform-name: "LINKEDIN";
}

.fh-platform-roten-tomatoes {
    --fh-platform-name: "ROTEN TOMATOES";
}

.fh-platform-tripadvisor {
    --fh-platform-name: "TRIPADVISOR";
}

.fh-platform-bluesky {
    --fh-platform-name: "BLUESKY";
}

.fh-platform-amazon {
    --fh-platform-name: "AMAZON";
}

.fh-platform-apple-musik {
    --fh-platform-name: "APPLE MUSIK";
}

.fh-platform-clubhouse {
    --fh-platform-name: "CLUBHOUSE";
}

.fh-platform-deezer {
    --fh-platform-name: "DEEZER";
}

.fh-platform-e-commerce {
    --fh-platform-name: "E-COMMERCE";
}

.fh-platform-shazam {
    --fh-platform-name: "SHAZAM";
}


/* =========================================================
   10. INSTAGRAM NAME
   ========================================================= */

html body
.fh-platform-slider
.fh-platform-instagram::after {

    left:
        calc(50% + 5px) !important;
}


/* =========================================================
   11. SERVICE MENÜ
   ========================================================= */

html body:not(.elementor-editor-active)
.fh-services-grid {

    display:
        none !important;
}


/* =========================================================
   12. SERVICE MENÜ – ÖFFNEN
   ========================================================= */

html body:not(.elementor-editor-active)
.fh-services-grid.fh-menu-open {

    display:
        grid !important;

    opacity:
        1;

    pointer-events:
        auto !important;

    transform-origin:
        top center !important;

    animation:
        fhServiceMenuIn
        0.35s
        cubic-bezier(0.22, 1, 0.36, 1)
        both !important;
}


/* =========================================================
   13. SERVICE MENÜ – SCHLIESSEN
   ========================================================= */

html body:not(.elementor-editor-active)
.fh-services-grid.fh-menu-closing {

    display:
        grid !important;

    pointer-events:
        none !important;

    transform-origin:
        top center !important;

    animation:
        fhServiceMenuOut
        0.25s
        cubic-bezier(0.4, 0, 1, 1)
        both !important;
}


/* =========================================================
   14. GESAMTES MENÜ REIN
   ========================================================= */

@keyframes fhServiceMenuIn {

    0% {
        opacity:
            0;

        transform:
            translateY(-20px);
    }

    100% {
        opacity:
            1;

        transform:
            translateY(0);
    }
}


/* =========================================================
   15. GESAMTES MENÜ RAUS
   ========================================================= */

@keyframes fhServiceMenuOut {

    0% {
        opacity:
            1;

        transform:
            translateY(0);
    }

    100% {
        opacity:
            0;

        transform:
            translateY(-15px);
    }
}


/* =========================================================
   16. SERVICE-KARTEN CASCADE
   ========================================================= */

html body:not(.elementor-editor-active)
.fh-services-grid.fh-menu-open
.fh-service-card {

    opacity:
        0;

    transform:
        translateY(-10px);

    animation:
        fhServiceCardIn
        0.40s
        cubic-bezier(0.22, 1, 0.36, 1)
        forwards;
}


/* =========================================================
   17. CASCADE DELAYS
   ========================================================= */

html body:not(.elementor-editor-active)
.fh-services-grid.fh-menu-open
.fh-service-card:nth-child(1) {
    animation-delay: 0.02s;
}

html body:not(.elementor-editor-active)
.fh-services-grid.fh-menu-open
.fh-service-card:nth-child(2) {
    animation-delay: 0.04s;
}

html body:not(.elementor-editor-active)
.fh-services-grid.fh-menu-open
.fh-service-card:nth-child(3) {
    animation-delay: 0.06s;
}

html body:not(.elementor-editor-active)
.fh-services-grid.fh-menu-open
.fh-service-card:nth-child(4) {
    animation-delay: 0.08s;
}

html body:not(.elementor-editor-active)
.fh-services-grid.fh-menu-open
.fh-service-card:nth-child(5) {
    animation-delay: 0.10s;
}

html body:not(.elementor-editor-active)
.fh-services-grid.fh-menu-open
.fh-service-card:nth-child(6) {
    animation-delay: 0.12s;
}

html body:not(.elementor-editor-active)
.fh-services-grid.fh-menu-open
.fh-service-card:nth-child(7) {
    animation-delay: 0.14s;
}

html body:not(.elementor-editor-active)
.fh-services-grid.fh-menu-open
.fh-service-card:nth-child(8) {
    animation-delay: 0.16s;
}

html body:not(.elementor-editor-active)
.fh-services-grid.fh-menu-open
.fh-service-card:nth-child(9) {
    animation-delay: 0.18s;
}

html body:not(.elementor-editor-active)
.fh-services-grid.fh-menu-open
.fh-service-card:nth-child(10) {
    animation-delay: 0.20s;
}

html body:not(.elementor-editor-active)
.fh-services-grid.fh-menu-open
.fh-service-card:nth-child(11) {
    animation-delay: 0.22s;
}

html body:not(.elementor-editor-active)
.fh-services-grid.fh-menu-open
.fh-service-card:nth-child(12) {
    animation-delay: 0.24s;
}

html body:not(.elementor-editor-active)
.fh-services-grid.fh-menu-open
.fh-service-card:nth-child(13) {
    animation-delay: 0.26s;
}

html body:not(.elementor-editor-active)
.fh-services-grid.fh-menu-open
.fh-service-card:nth-child(14) {
    animation-delay: 0.28s;
}

html body:not(.elementor-editor-active)
.fh-services-grid.fh-menu-open
.fh-service-card:nth-child(15) {
    animation-delay: 0.30s;
}

html body:not(.elementor-editor-active)
.fh-services-grid.fh-menu-open
.fh-service-card:nth-child(16) {
    animation-delay: 0.32s;
}

html body:not(.elementor-editor-active)
.fh-services-grid.fh-menu-open
.fh-service-card:nth-child(17) {
    animation-delay: 0.34s;
}

html body:not(.elementor-editor-active)
.fh-services-grid.fh-menu-open
.fh-service-card:nth-child(18) {
    animation-delay: 0.36s;
}

html body:not(.elementor-editor-active)
.fh-services-grid.fh-menu-open
.fh-service-card:nth-child(19) {
    animation-delay: 0.38s;
}


/* =========================================================
   18. EINZELNE KARTE REIN
   ========================================================= */

@keyframes fhServiceCardIn {

    0% {
        opacity:
            0;

        transform:
            translateY(-10px);
    }

    100% {
        opacity:
            1;

        transform:
            translateY(0);
    }
}


/* =========================================================
   19. SERVICE-KARTEN BEIM SCHLIESSEN
   ========================================================= */

html body:not(.elementor-editor-active)
.fh-services-grid.fh-menu-closing
.fh-service-card {

    animation:
        fhServiceCardOut
        0.20s
        ease
        both;
}


@keyframes fhServiceCardOut {

    0% {
        opacity:
            1;

        transform:
            translateY(0);
    }

    100% {
        opacity:
            0;

        transform:
            translateY(-5px);
    }
}


/* =========================================================
   20. SERVICE CARD HOVER – BASIS
   ========================================================= */

html body .fh-service-card {
    position:
        relative !important;

    top:
        0;

    outline:
        1px solid transparent;

    outline-offset:
        -1px;

    transition:
        top 0.30s cubic-bezier(0.22, 1, 0.36, 1),
        outline-color 0.25s ease,
        box-shadow 0.30s ease !important;

    cursor:
        pointer;
}


/* =========================================================
   21. SERVICE CARD – HOVER
   ========================================================= */

html body .fh-service-card:hover {
    top:
        -5px;

    outline-color:
        rgba(255, 255, 255, 0.85);

    box-shadow:
        0 10px 25px
        rgba(0, 0, 0, 0.18);
}


/* =========================================================
   22. SERVICE-KARTEN INHALT
   ========================================================= */

html body .fh-service-card > * {
    transition:
        transform 0.30s
        cubic-bezier(0.22, 1, 0.36, 1) !important;
}


html body .fh-service-card:hover > * {
    transform:
        translateY(-2px);
}


/* =========================================================
   23. SERVICE CARD ICON / SVG
   ========================================================= */

html body .fh-service-card svg {
    transform:
        scale(1);

    transform-origin:
        center center;

    transition:
        transform 0.30s
        cubic-bezier(0.22, 1, 0.36, 1) !important;
}


html body .fh-service-card:hover svg {
    transform:
        scale(1.06);
}


/* =========================================================
   24. SERVICE CARD BUTTON
   ========================================================= */

html body .fh-service-card .elementor-button {
    transition:
        transform 0.25s
        cubic-bezier(0.22, 1, 0.36, 1),
        background-color 0.20s ease,
        color 0.20s ease !important;
}


html body .fh-service-card:hover .elementor-button {
    transform:
        translateY(-2px)
        scale(1.03);
}


/* =========================================================
   25. SERVICE CARD – CLICK
   ========================================================= */

html body .fh-service-card:active {
    top:
        -2px;

    transition-duration:
        0.10s !important;
}


html body .fh-service-card:active .elementor-button {
    transform:
        translateY(0)
        scale(0.98);

    transition-duration:
        0.10s !important;
}


/* =========================================================
   26. ELEMENTOR EDITOR – SERVICES
   ========================================================= */

html body.elementor-editor-active
.fh-services-grid {

    display:
        grid !important;

    opacity:
        1 !important;

    transform:
        none !important;

    animation:
        none !important;
}


html body.elementor-editor-active
.fh-service-card {

    opacity:
        1 !important;

    transform:
        none !important;

    animation:
        none !important;
}


/* =========================================================
   27. REVIEW MARQUEE – FULL WIDTH
   ========================================================= */

html body .fh-reviews-marquee {
    position:
        relative !important;

    width:
        100vw !important;

    min-width:
        100vw !important;

    max-width:
        none !important;

    margin-left:
        calc(50% - 50vw) !important;

    margin-right:
        calc(50% - 50vw) !important;

    padding:
        0 !important;

    overflow-x:
        clip !important;

    overflow-y:
        visible !important;

    box-sizing:
        border-box !important;
}


/* =========================================================
   28. REVIEW TRACK
   ========================================================= */

html body:not(.elementor-editor-active)
.fh-reviews-track {

    display:
        flex !important;

    flex-direction:
        row !important;

    flex-wrap:
        nowrap !important;

    justify-content:
        flex-start !important;

    align-items:
        stretch !important;

    gap:
        15px !important;

    width:
        max-content !important;

    min-width:
        max-content !important;

    max-width:
        none !important;

    margin:
        0 !important;

    padding:
        5px 0 25px 0 !important;

    overflow:
        visible !important;

    transform:
        translate3d(
            var(--fh-review-start, -4000px),
            0,
            0
        );

    will-change:
        transform;

    animation:
        fhReviewsMoveRight
        var(--fh-review-duration, 50s)
        linear
        infinite !important;
}


/* =========================================================
   29. REVIEW KARTE – BASIS
   400 × 280
   ========================================================= */

html body .fh-reviews-track
.fh-review-card {

    position:
        relative !important;

    top:
        0;

    flex:
        0 0 400px !important;

    flex-grow:
        0 !important;

    flex-shrink:
        0 !important;

    flex-basis:
        400px !important;

    width:
        400px !important;

    min-width:
        400px !important;

    max-width:
        400px !important;

    height:
        280px !important;

    min-height:
        280px !important;

    box-sizing:
        border-box !important;

    outline:
        1px solid transparent;

    outline-offset:
        -1px;

    transition:
        top 0.30s cubic-bezier(0.22, 1, 0.36, 1),
        outline-color 0.25s ease,
        box-shadow 0.30s ease !important;
}


/* =========================================================
   30. REVIEW KARTE – GLEICHER HOVER WIE SERVICE CARDS
   ========================================================= */

html body .fh-reviews-track
.fh-review-card:hover {

    top:
        -5px;

    z-index:
        50 !important;

    outline-color:
        rgba(255, 255, 255, 0.85);

    box-shadow:
        0 10px 25px
        rgba(0, 0, 0, 0.18);
}


/* =========================================================
   31. REVIEW INHALT – HOVER
   ========================================================= */

html body .fh-reviews-track
.fh-review-card > * {

    transition:
        transform 0.30s
        cubic-bezier(0.22, 1, 0.36, 1) !important;
}


html body .fh-reviews-track
.fh-review-card:hover > * {

    transform:
        translateY(-2px);
}


/* =========================================================
   32. REVIEW TRACK PAUSIERT BEIM HOVER
   PHP setzt fh-review-paused
   ========================================================= */

html body:not(.elementor-editor-active)
.fh-reviews-track.fh-review-paused {

    animation-play-state:
        paused !important;
}


/* =========================================================
   33. REVIEW ANIMATION – NACH RECHTS
   ========================================================= */

@keyframes fhReviewsMoveRight {

    0% {
        transform:
            translate3d(
                var(--fh-review-start, -4000px),
                0,
                0
            );
    }

    100% {
        transform:
            translate3d(
                0,
                0,
                0
            );
    }
}


/* =========================================================
   34. ELEMENTOR EDITOR – REVIEWS
   ========================================================= */

html body.elementor-editor-active
.fh-reviews-marquee {

    width:
        100% !important;

    min-width:
        0 !important;

    max-width:
        100% !important;

    margin-left:
        0 !important;

    margin-right:
        0 !important;

    overflow:
        visible !important;
}


html body.elementor-editor-active
.fh-reviews-track {

    display:
        flex !important;

    flex-direction:
        row !important;

    flex-wrap:
        nowrap !important;

    gap:
        15px !important;

    width:
        max-content !important;

    min-width:
        max-content !important;

    max-width:
        none !important;

    overflow:
        visible !important;

    transform:
        none !important;

    animation:
        none !important;
}


html body.elementor-editor-active
.fh-review-card {

    flex:
        0 0 400px !important;

    width:
        400px !important;

    min-width:
        400px !important;

    max-width:
        400px !important;

    height:
        280px !important;

    min-height:
        280px !important;
}


/* =========================================================
   35. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    html body:not(.elementor-editor-active)
    .fh-reviews-track {

        animation:
            none !important;

        transform:
            none !important;
    }
}