/* ==========================================================================
   Kajinga Sticky — Container/Section-Sticky-System (v0.55.0)
   --------------------------------------------------------------------------
   Vier Sticky-Modi, State-basierte Trafos via .ke-sticky--stuck-Klasse.
   JS toggelt Klassen; CSS rendert die Übergänge.

   Modi:
     .ke-sticky-mode-top
     .ke-sticky-mode-bottom
     .ke-sticky-mode-top-on-scroll-up
     .ke-sticky-mode-top-after-offset

   Scope:
     .ke-sticky-scope-viewport  → position: fixed
     .ke-sticky-scope-parent    → position: sticky

   States (vom JS gesetzt):
     .ke-sticky--stuck   — Element ist aktuell sticky
     .ke-sticky--hidden  — Element ist im Hide-on-Scroll-Down-Modus versteckt

   Spacer-DIV (vom JS eingefügt wenn stuck): .ke-sticky-spacer
   ========================================================================== */

.ke-sticky-yes {
    --ke-sticky-offset: 0px;
    --ke-sticky-z: 100;
    --ke-sticky-transition: 300ms;
    /* `--ke-sticky-admin-bar-offset` wird vom JS gesetzt (0 oder 32/46px) */
    transition:
        background-color var(--ke-sticky-transition) ease,
        padding var(--ke-sticky-transition) ease,
        box-shadow var(--ke-sticky-transition) ease,
        border-color var(--ke-sticky-transition) ease,
        border-radius var(--ke-sticky-transition) ease,
        transform var(--ke-sticky-transition) ease;
    will-change: transform, background-color, padding;
}

/* --- Viewport-Scope (position: fixed) --- */
.ke-sticky-yes.ke-sticky-scope-viewport.ke-sticky--stuck {
    position: fixed;
    left: 0;
    right: 0;
    z-index: var(--ke-sticky-z);
    margin: 0;
}

.ke-sticky-yes.ke-sticky-scope-viewport.ke-sticky-mode-top.ke-sticky--stuck,
.ke-sticky-yes.ke-sticky-scope-viewport.ke-sticky-mode-top-on-scroll-up.ke-sticky--stuck,
.ke-sticky-yes.ke-sticky-scope-viewport.ke-sticky-mode-top-after-offset.ke-sticky--stuck {
    top: calc(var(--ke-sticky-offset) + var(--ke-sticky-admin-bar-offset, 0px));
    bottom: auto;
}

.ke-sticky-yes.ke-sticky-scope-viewport.ke-sticky-mode-bottom.ke-sticky--stuck {
    bottom: var(--ke-sticky-offset);
    top: auto;
}

/* --- Parent-Scope (position: sticky — Element bleibt im Layout-Fluss) --- */
.ke-sticky-yes.ke-sticky-scope-parent {
    position: sticky;
    z-index: var(--ke-sticky-z);
}

.ke-sticky-yes.ke-sticky-scope-parent.ke-sticky-mode-top {
    top: calc(var(--ke-sticky-offset) + var(--ke-sticky-admin-bar-offset, 0px));
}

.ke-sticky-yes.ke-sticky-scope-parent.ke-sticky-mode-bottom {
    bottom: var(--ke-sticky-offset);
}

/* Hinweis: top-on-scroll-up / top-after-offset im Parent-Scope sind nicht
   sinnvoll (position: sticky kann nicht versteckt werden). Im JS gibt's
   einen Guard, der bei dieser Kombination auf top-Modus zurückfällt. */

/* --- Hide-on-Scroll-Down (translateY off-screen) --- */
.ke-sticky-yes.ke-sticky-mode-top-on-scroll-up.ke-sticky--stuck.ke-sticky--hidden {
    transform: translateY(-100%);
    /* Pointer-Events vermeiden Tap-Through während der Animation. */
    pointer-events: none;
}

/* --- Spacer (vom JS eingefügt, hält den Platz wenn position:fixed) --- */
.ke-sticky-spacer {
    display: block;
    width: 100%;
    /* Höhe wird vom JS inline gesetzt */
}

/* --- Editor-Mode: Sticky nicht aktiv (JS rendert keinen Stuck-State) ---
   Optional: visueller Hinweis im Editor-Preview, dass Sticky aktiv WIRD.
   Aktuell weggelassen — der Editor zeigt das Element regulär ohne Sticky-Pos. */

/* --- prefers-reduced-motion: harte Schaltung statt Transition --- */
@media (prefers-reduced-motion: reduce) {
    .ke-sticky-yes {
        transition: none !important;
    }
    .ke-sticky-yes.ke-sticky--hidden {
        transform: none;
        /* Ohne Translate-Animation klassisch ausblenden via opacity-Fallback */
        opacity: 0;
        pointer-events: none;
    }
}