/* ==========================================================
   CTA BACKGROUND IMAGE + OVERLAY
========================================================== */

.elementor-widget-pkfg-cta .pkfg-cta-full {

    position: relative;

    background-image:
        linear-gradient(
            rgba(48, 48, 47, var(--pkfg-cta-overlay, .72)),
            rgba(35, 35, 34, var(--pkfg-cta-overlay, .72))
        ),
        var(--pkfg-cta-bg-image),
        radial-gradient(
            circle at 78% 0%,
            rgba(246,139,42,.18),
            transparent 36%
        ),
        linear-gradient(
            135deg,
            #575756 0%,
            #3d3d3c 100%
        ) !important;

    background-size:
        cover,
        cover,
        cover,
        cover !important;

    background-position:
        center center,
        var(--pkfg-cta-position, center center),
        center center,
        center center !important;

    background-repeat:
        no-repeat !important;
}


/* dezente zusätzliche Tiefe */

.elementor-widget-pkfg-cta .pkfg-cta-full::after {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.08),
            transparent 32%,
            transparent 70%,
            rgba(246,139,42,.05)
        );

    z-index: 0;
}


.elementor-widget-pkfg-cta
.pkfg-cta-inner {

    position: relative;

    z-index: 2;
}


/* ==========================================================
   SCROLL ANIMATION – BASIS

   Wird nur aktiv, wenn JS erfolgreich läuft.
========================================================== */

html.pkfg-effects-ready
.pkfg.pkfg-reveal
.pkfg-eyebrow,

html.pkfg-effects-ready
.pkfg.pkfg-reveal
h1,

html.pkfg-effects-ready
.pkfg.pkfg-reveal
h2,

html.pkfg-effects-ready
.pkfg.pkfg-reveal
.pkfg-lead,

html.pkfg-effects-ready
.pkfg.pkfg-reveal
.pkfg-heading > p,

html.pkfg-effects-ready
.pkfg.pkfg-reveal
.pkfg-text,

html.pkfg-effects-ready
.pkfg.pkfg-reveal
.pkfg-cta-eyebrow,

html.pkfg-effects-ready
.pkfg.pkfg-reveal
.pkfg-cta-inner > p,

html.pkfg-effects-ready
.pkfg.pkfg-reveal
.pkfg-button {

    opacity: 0;

    translate:
        0
        22px;

    transition:
        opacity .75s ease,
        translate .75s cubic-bezier(.22,.61,.36,1);

    transition-delay:
        var(--pkfg-delay, 0ms);
}


/* sichtbar */

html.pkfg-effects-ready
.pkfg.pkfg-reveal.is-visible
.pkfg-eyebrow,

html.pkfg-effects-ready
.pkfg.pkfg-reveal.is-visible
h1,

html.pkfg-effects-ready
.pkfg.pkfg-reveal.is-visible
h2,

html.pkfg-effects-ready
.pkfg.pkfg-reveal.is-visible
.pkfg-lead,

html.pkfg-effects-ready
.pkfg.pkfg-reveal.is-visible
.pkfg-heading > p,

html.pkfg-effects-ready
.pkfg.pkfg-reveal.is-visible
.pkfg-text,

html.pkfg-effects-ready
.pkfg.pkfg-reveal.is-visible
.pkfg-cta-eyebrow,

html.pkfg-effects-ready
.pkfg.pkfg-reveal.is-visible
.pkfg-cta-inner > p,

html.pkfg-effects-ready
.pkfg.pkfg-reveal.is-visible
.pkfg-button {

    opacity: 1;

    translate:
        0
        0;
}


/* ==========================================================
   BILDER
========================================================== */

html.pkfg-effects-ready
.pkfg.pkfg-reveal
.pkfg-image-box,

html.pkfg-effects-ready
.pkfg.pkfg-reveal
.pkfg-feature-image,

html.pkfg-effects-ready
.pkfg.pkfg-reveal
.pkfg-certificate {

    opacity: 0;

    translate:
        0
        30px;

    scale: .975;

    transition:
        opacity .9s ease,
        translate .9s cubic-bezier(.22,.61,.36,1),
        scale .9s cubic-bezier(.22,.61,.36,1);

    transition-delay:
        160ms;
}


html.pkfg-effects-ready
.pkfg.pkfg-reveal.is-visible
.pkfg-image-box,

html.pkfg-effects-ready
.pkfg.pkfg-reveal.is-visible
.pkfg-feature-image,

html.pkfg-effects-ready
.pkfg.pkfg-reveal.is-visible
.pkfg-certificate {

    opacity: 1;

    translate:
        0
        0;

    scale: 1;
}


/* ==========================================================
   KARTEN
========================================================== */

html.pkfg-effects-ready
.pkfg.pkfg-reveal
.pkfg-fact,

html.pkfg-effects-ready
.pkfg.pkfg-reveal
.pkfg-info-card,

html.pkfg-effects-ready
.pkfg.pkfg-reveal
.pkfg-gallery-card,

html.pkfg-effects-ready
.pkfg.pkfg-reveal
.pkfg-check,

html.pkfg-effects-ready
.pkfg.pkfg-reveal
.pkfg-training-facts > div,

html.pkfg-effects-ready
.pkfg.pkfg-reveal
.pkfgg-item {

    opacity: 0;

    translate:
        0
        24px;

    scale: .985;

    transition:
        opacity .65s ease,
        translate .65s cubic-bezier(.22,.61,.36,1),
        scale .65s cubic-bezier(.22,.61,.36,1),
        transform .28s ease,
        box-shadow .28s ease;

    transition-delay:
        var(--pkfg-delay, 100ms);
}


html.pkfg-effects-ready
.pkfg.pkfg-reveal.is-visible
.pkfg-fact,

html.pkfg-effects-ready
.pkfg.pkfg-reveal.is-visible
.pkfg-info-card,

html.pkfg-effects-ready
.pkfg.pkfg-reveal.is-visible
.pkfg-gallery-card,

html.pkfg-effects-ready
.pkfg.pkfg-reveal.is-visible
.pkfg-check,

html.pkfg-effects-ready
.pkfg.pkfg-reveal.is-visible
.pkfg-training-facts > div,

html.pkfg-effects-ready
.pkfg.pkfg-reveal.is-visible
.pkfgg-item {

    opacity: 1;

    translate:
        0
        0;

    scale: 1;
}


/* ==========================================================
   STAGGER
========================================================== */

.pkfg-reveal
.pkfg-fact:nth-child(1),

.pkfg-reveal
.pkfg-info-card:nth-child(1),

.pkfg-reveal
.pkfg-gallery-card:nth-child(1),

.pkfg-reveal
.pkfg-check:nth-child(1),

.pkfg-reveal
.pkfg-training-facts > div:nth-child(1),

.pkfg-reveal
.pkfgg-item:nth-child(1) {

    --pkfg-delay: 90ms;
}


.pkfg-reveal
.pkfg-fact:nth-child(2),

.pkfg-reveal
.pkfg-info-card:nth-child(2),

.pkfg-reveal
.pkfg-gallery-card:nth-child(2),

.pkfg-reveal
.pkfg-check:nth-child(2),

.pkfg-reveal
.pkfg-training-facts > div:nth-child(2),

.pkfg-reveal
.pkfgg-item:nth-child(2) {

    --pkfg-delay: 160ms;
}


.pkfg-reveal
.pkfg-fact:nth-child(3),

.pkfg-reveal
.pkfg-gallery-card:nth-child(3),

.pkfg-reveal
.pkfg-check:nth-child(3),

.pkfg-reveal
.pkfg-training-facts > div:nth-child(3),

.pkfg-reveal
.pkfgg-item:nth-child(3) {

    --pkfg-delay: 230ms;
}


.pkfg-reveal
.pkfg-check:nth-child(4),

.pkfg-reveal
.pkfgg-item:nth-child(4) {

    --pkfg-delay: 300ms;
}


.pkfg-reveal
.pkfg-check:nth-child(5),

.pkfg-reveal
.pkfgg-item:nth-child(5) {

    --pkfg-delay: 370ms;
}


.pkfg-reveal
.pkfg-check:nth-child(6),

.pkfg-reveal
.pkfgg-item:nth-child(6) {

    --pkfg-delay: 440ms;
}


/* Galerie danach nicht immer langsamer machen */

.pkfg-reveal
.pkfgg-item:nth-child(n+7) {

    --pkfg-delay: 180ms;
}


/* ==========================================================
   BADGES
========================================================== */

html.pkfg-effects-ready
.pkfg.pkfg-reveal
.pkfg-badge,

html.pkfg-effects-ready
.pkfg.pkfg-reveal
.pkfg-image-label,

html.pkfg-effects-ready
.pkfg.pkfg-reveal
.pkfg-certificate-badge {

    opacity: 0;

    scale: .88;

    transition:
        opacity .6s ease,
        scale .6s cubic-bezier(.22,.61,.36,1);

    transition-delay:
        420ms;
}


html.pkfg-effects-ready
.pkfg.pkfg-reveal.is-visible
.pkfg-badge,

html.pkfg-effects-ready
.pkfg.pkfg-reveal.is-visible
.pkfg-image-label,

html.pkfg-effects-ready
.pkfg.pkfg-reveal.is-visible
.pkfg-certificate-badge {

    opacity: 1;

    scale: 1;
}


/* ==========================================================
   HERO ABSTUFUNG
========================================================== */

.pkfg-hero.pkfg-reveal
.pkfg-eyebrow {

    --pkfg-delay: 40ms;
}


.pkfg-hero.pkfg-reveal
h1 {

    --pkfg-delay: 120ms;
}


.pkfg-hero.pkfg-reveal
.pkfg-lead {

    --pkfg-delay: 200ms;
}


/* ==========================================================
   CTA ANIMATION
========================================================== */

.pkfg-cta-full.pkfg-reveal
.pkfg-cta-eyebrow {

    --pkfg-delay: 50ms;
}


.pkfg-cta-full.pkfg-reveal
h2 {

    --pkfg-delay: 120ms;
}


.pkfg-cta-full.pkfg-reveal
.pkfg-cta-inner > p {

    --pkfg-delay: 190ms;
}


.pkfg-cta-full.pkfg-reveal
.pkfg-button {

    --pkfg-delay: 270ms;
}


/* ==========================================================
   REDUCED MOTION
========================================================== */

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

    .pkfg *,
    .pkfg *::before,
    .pkfg *::after {

        animation-duration:
            .01ms !important;

        transition-duration:
            .01ms !important;

        transition-delay:
            0ms !important;
    }

}