:root {
    --sr-duration: .55s;
    --sr-distance: 24px;
    --sr-easing: cubic-bezier(.2, .65, .3, 1);
}

/* ==========================================================================
 *  1. REVEAL SYSTEM (BASIS & EFFEKTE)
 *  ========================================================================== */

/* Gemeinsame Basis für alle registrierten WordPress-Block-Stile & manuelle Klassen */
[class*="is-style-sr-fade"],
[class*="is-style-sr-zoom"],
.sr-reveal {
    opacity: 0;
    transition:
    opacity var(--sr-duration) var(--sr-easing),
    transform var(--sr-duration) var(--sr-easing);
    will-change: opacity, transform;
}

/* Die einzelnen Ausgangspositionen (Vor dem Sichtbarwerden) */
.is-style-sr-fade-up    { transform: translateY(var(--sr-distance)); }
.is-style-sr-fade-down  { transform: translateY(calc(var(--sr-distance) * -1)); }
.is-style-sr-fade-left  { transform: translateX(var(--sr-distance)); } /* Kommt von rechts nach links */
.is-style-sr-fade-right { transform: translateX(calc(var(--sr-distance) * -1)); } /* Kommt von links nach rechts */
.is-style-sr-zoom       { transform: scale(.96); }

/* Aktiv-Zustand: Wird vom JavaScript-Observer vergeben, sobald im Viewport */
.sr-visible {
    opacity: 1 !important;
    transform: none !important;
}

/* ==========================================================================
 *  2. MODIFIKATOREN (Über "Zusätzliche CSS-Klassen" steuerbar)
 *  ========================================================================== */

/* Geschwindigkeiten (Animationsdauer / Durations) */
.sr-speed-fast       { --sr-duration: 0.3s; }
.sr-speed-slow       { --sr-duration: 0.9s; }
.sr-speed-very-slow  { --sr-duration: 1.5s; }

/* Verzögerungen (Delays - Perfekt für Staffelung/Spalten) */
.sr-delay-1 { transition-delay: .1s; }
.sr-delay-2 { transition-delay: .2s; }
.sr-delay-3 { transition-delay: .3s; }
.sr-delay-4 { transition-delay: .4s; }
.sr-delay-5 { transition-delay: .5s; }

/* ==========================================================================
 *  3. HOVER SYSTEM & BUTTONS (Aus v1.2 beibehalten)
 *  ========================================================================== */

/* Hover Lift-Effekt für Karten/Container */
.sr-hover-lift {
    transition: transform .25s ease, box-shadow .25s ease;
}

.sr-hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 35px rgba(0, 0, 0, .10);
}

/* Bild-Zoom-Effekt für Wrapper */
.sr-image-zoom {
    overflow: hidden;
}

.sr-image-zoom img {
    transition: transform .35s ease;
}

.sr-image-zoom:hover img {
    transform: scale(1.03);
}

/* Globale WordPress Buttons (Weichere Hover-Animation) */
.wp-block-button__link,
.wp-element-button {
    transition: all .2s ease;
}

.wp-block-button__link:hover,
.wp-element-button:hover {
    transform: translateY(-2px);
}

/* ==========================================================================
 *  4. COLUMN-LAYOUT (Ersatz für Twentigs stretched-blocks/justify-center)
 *  ========================================================================== */

/* Gleiche Höhe: Bild-, Group- und Cover-Blöcke innerhalb der Spalten füllen
 * die volle Spaltenhöhe, statt an ihrem eigenen Inhalt zu enden */
.wp-block-columns.is-style-sr-equal-height {
    align-items: stretch;
}

.wp-block-columns.is-style-sr-equal-height > .wp-block-column {
    display: flex;
    flex-direction: column;
}

.wp-block-columns.is-style-sr-equal-height > .wp-block-column > .wp-block-image,
.wp-block-columns.is-style-sr-equal-height > .wp-block-column > .wp-block-group,
.wp-block-columns.is-style-sr-equal-height > .wp-block-column > .wp-block-cover {
    height: 100%;
}

.wp-block-columns.is-style-sr-equal-height > .wp-block-column > .wp-block-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Spalten horizontal zentrieren, statt sie über die volle Breite zu verteilen */
.wp-block-columns.is-style-sr-justify-center {
    justify-content: center;
}

/* Listenabstand (Ersatz für Twentigs list-spacing-medium/list-spacing-loose) */
ul.is-style-sr-list-spacing-medium li,
ol.is-style-sr-list-spacing-medium li {
    margin-bottom: 0.5em;
}

ul.is-style-sr-list-spacing-loose li,
ol.is-style-sr-list-spacing-loose li {
    margin-bottom: 1em;
}

/* ==========================================================================
 *  5. ACCESSIBILITY (Barrierefreiheit)
 *  ========================================================================== */

/* Schaltet alle Animationen ab, wenn der Nutzer dies im OS festgelegt hat */
@media (prefers-reduced-motion: reduce) {
    [class*="is-style-sr-fade"],
    [class*="is-style-sr-zoom"],
    .sr-reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}