/* ============================================================
   53-ophyr-wirkung.css  –  v2.0
   Ophyr Wirkung Page · Immersive Editorial
   
   ARCHITEKTUR:
   Cinematischer Dark-Hell-Rhythmus · Fullscreen-Säulen-Intros
   Riesen-Nummern · Staggered Gold-Bullets · Parallax Reveals
   Mobile-First · Clean Luxury · 120Hz GPU-Stable
   ============================================================ */

/* ──────────────────────────────────────────────────────────────
   DESIGN TOKENS (Wirkung-spezifisch)
   ────────────────────────────────────────────────────────────── */
:root {
    --wrk-bg-dark: #0f0e0c;
    --wrk-bg-card: #1a1816;
    --wrk-bg-warm: #16140f;
    --wrk-text-light: rgba(255, 255, 255, 0.92);
    --wrk-text-muted: rgba(255, 255, 255, 0.6);
    --wrk-text-subtle: rgba(255, 255, 255, 0.35);
    --wrk-border: rgba(196, 161, 105, 0.18);
    --wrk-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --wrk-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ──────────────────────────────────────────────────────────────
   HERO SECTION: Cinematischer Einstieg (Dark)
   ────────────────────────────────────────────────────────────── */
.wirkung-hero {
    position: relative;
    min-height: 60vh;
    min-height: 60svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--wrk-bg-dark);
    overflow: hidden;
    padding: clamp(6rem, 18vw, 10rem) var(--container-padding);
}

/* Subtiler atmosphärischer Gold-Glow */
.wirkung-hero::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(20rem, 60vw, 45rem);
    height: clamp(20rem, 60vw, 45rem);
    border-radius: 50%;
    background: radial-gradient(circle,
            rgba(196, 161, 105, 0.06) 0%,
            rgba(196, 161, 105, 0.02) 40%,
            transparent 70%);
    pointer-events: none;
    animation: wrkGlowPulse 6s ease-in-out infinite;
}

.wirkung-hero__overtitle {
    font-family: var(--font-accent);
    font-size: var(--fs-micro, 0.72rem);
    font-weight: 400;
    letter-spacing: 0.5em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
    opacity: 0;
    animation: wrkFadeUp 1.2s var(--wrk-ease) 0.3s forwards;
    position: relative;
    z-index: 1;
}

.wirkung-hero__title {
    font-family: var(--font-accent);
    font-size: clamp(1.8rem, 6vw, 3.5rem);
    font-weight: 300;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--wrk-text-light);
    margin: 0 0 clamp(1.5rem, 4vw, 2rem);
    line-height: 1.2;
    opacity: 0;
    animation: wrkFadeUp 1.4s var(--wrk-ease) 0.6s forwards;
    position: relative;
    z-index: 1;
}

.wirkung-hero__divider {
    width: 3rem;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    margin: 0 auto clamp(1.5rem, 4vw, 2rem);
    opacity: 0;
    animation: wrkFadeUp 1s var(--wrk-ease) 1s forwards;
    position: relative;
    z-index: 1;
}

.wirkung-hero__subtitle {
    font-family: var(--font-editorial);
    font-size: clamp(1rem, 3vw, 1.35rem);
    font-weight: 300;
    font-style: italic;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.65);
    max-width: 34rem;
    margin: 0 auto;
    letter-spacing: 0.02em;
    opacity: 0;
    animation: wrkFadeUp 1.4s var(--wrk-ease) 1.2s forwards;
    position: relative;
    z-index: 1;
}

/* ──────────────────────────────────────────────────────────────
   INTRO SECTION: Heller Editorial-Block
   ────────────────────────────────────────────────────────────── */
.wirkung-intro {
    background: var(--ivory, #F0F0F0);
    padding: var(--section-padding) var(--container-padding);
    position: relative;
    text-align: center;
}

.wirkung-intro::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg,
            transparent 5%,
            rgba(196, 161, 105, 0.3) 25%,
            rgba(196, 161, 105, 0.5) 50%,
            rgba(196, 161, 105, 0.3) 75%,
            transparent 95%);
}

.wirkung-intro .legal-title {
    color: var(--dark-grey, #1a1a1a);
    opacity: 0.82;
    margin-bottom: clamp(1rem, 3vw, 1.8rem);
}

.wirkung-intro-text {
    font-family: var(--font-primary);
    font-size: clamp(0.95rem, 2.2vw, 1.15rem);
    font-weight: 300;
    line-height: 1.85;
    color: var(--text-body);
    max-width: 40rem;
    margin: 0 auto;
    letter-spacing: 0.015em;
    text-wrap: balance;
}

/* ──────────────────────────────────────────────────────────────
   ORNAMENT DIVIDER
   ────────────────────────────────────────────────────────────── */
.wirkung-ornament {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: clamp(1.5rem, 4vw, 2.5rem) auto;
}

.wirkung-ornament svg {
    width: clamp(5rem, 15vw, 8rem);
    height: auto;
    opacity: 0.5;
}

/* ──────────────────────────────────────────────────────────────
   PILLAR INTRO: Fullscreen Dark-Sektion mit Riesen-Nummer
   ────────────────────────────────────────────────────────────── */
.wirkung-pillar-intro {
    position: relative;
    min-height: 70vh;
    min-height: 70svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: linear-gradient(180deg,
            var(--wrk-bg-dark) 0%,
            var(--wrk-bg-card) 50%,
            var(--wrk-bg-dark) 100%);
    overflow: hidden;
    padding: clamp(5rem, 15vw, 8rem) var(--container-padding);
}

/* Gold-Separator oben und unten */
.wirkung-pillar-intro::before,
.wirkung-pillar-intro::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
            transparent 5%,
            rgba(196, 161, 105, 0.3) 25%,
            rgba(196, 161, 105, 0.5) 50%,
            rgba(196, 161, 105, 0.3) 75%,
            transparent 95%);
}

.wirkung-pillar-intro::before {
    top: 0;
}

.wirkung-pillar-intro::after {
    bottom: 0;
}

/* Riesen-Nummer als Wasserzeichen */
.wirkung-pillar-intro__watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-editorial);
    font-size: clamp(12rem, 35vw, 25rem);
    font-weight: 200;
    font-style: italic;
    color: rgba(196, 161, 105, 0.04);
    line-height: 1;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

/* Subtiler Glow hinter der Nummer */
.wirkung-pillar-intro__glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(16rem, 45vw, 30rem);
    height: clamp(16rem, 45vw, 30rem);
    border-radius: 50%;
    background: radial-gradient(circle,
            rgba(196, 161, 105, 0.05) 0%,
            rgba(196, 161, 105, 0.02) 40%,
            transparent 70%);
    pointer-events: none;
    z-index: 0;
    animation: wrkGlowPulse 5s ease-in-out infinite;
}

/* Pillar Intro Content Header Tile */
.wirkung-pillar-intro__header-tile {
    width: 100%;
    max-width: 44rem;
    padding: clamp(2.5rem, 5vw, 3.5rem) clamp(1.5rem, 4vw, 3rem) clamp(2rem, 4vw, 3rem);
    background: rgba(18, 18, 18, 0.95);
    border: 1px solid rgba(196, 161, 105, 0.15);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    box-sizing: border-box;
    z-index: 2;
    position: relative;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Pillar Intro Image Block containing background image and bullets/details */
.wirkung-pillar-intro__image-block {
    width: 100%;
    max-width: 44rem;
    position: relative;
    border: 1px solid rgba(196, 161, 105, 0.15);
    border-radius: 0 0 8px 8px;
    overflow: hidden;
    box-sizing: border-box;
    z-index: 1;
}

/* Pillar Intro Content */
.wirkung-pillar-intro__content {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: clamp(3rem, 8vw, 5rem) clamp(1rem, 3vw, 2.5rem);
    box-sizing: border-box;
}

.wirkung-pillar-intro__label {
    font-family: var(--font-accent);
    font-size: var(--fs-micro, 0.72rem);
    font-weight: 400;
    letter-spacing: 0.5em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: clamp(0.5rem, 1.5vw, 0.8rem);
    opacity: 0.75;
}

.wirkung-pillar-intro__subtitle {
    font-family: var(--font-accent);
    font-size: clamp(0.65rem, 1.8vw, 0.82rem);
    font-weight: 400;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--gold-light);
    margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
    opacity: 0.6;
}

.wirkung-pillar-intro__title {
    font-family: var(--font-accent);
    font-size: clamp(1.4rem, 4.5vw, 2.2rem);
    font-weight: 300;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1.3;
    margin: 0 0 clamp(2rem, 5vw, 3rem);
    background: linear-gradient(135deg,
            var(--gold) 0%,
            var(--gold-light) 50%,
            var(--gold) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ──────────────────────────────────────────────────────────────
   PILLAR BULLETS: Die 3 Schlagworte
   ────────────────────────────────────────────────────────────── */
.wirkung-pillar-intro__bullets {
    position: relative;
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 38rem;
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 2.5vw, 1.5rem);
}

/* Lokale vertikale Fortschrittslinie hinter den Rauten */
.wirkung-pillar-bullets-line {
    position: absolute;
    width: 2px;
    background: rgba(196, 161, 105, 0.1);
    transform: translateX(-50%);
    z-index: 1;
    pointer-events: none;
}

.wirkung-pillar-bullets-line-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom,
            rgba(166, 133, 78, 0.7) 0%,
            rgba(196, 161, 105, 0.7) 50%,
            rgba(212, 188, 145, 0.7) 100%);
    transform: scaleY(0);
    transform-origin: top center;
    will-change: transform;
    box-shadow: 0 0 0.5rem rgba(196, 161, 105, 0.5);
}

.wirkung-pillar-intro__bullet {
    display: flex;
    align-items: flex-start;
    gap: clamp(0.8rem, 2vw, 1.2rem);
    text-align: left;
    position: relative;
    z-index: 2;
}

.wirkung-pillar-intro__bullet-icon {
    flex-shrink: 0;
    width: 0.5rem;
    height: 0.5rem;
    margin-top: 0.55rem;
    background: #111111;
    border: 1px solid rgba(196, 161, 105, 0.35);
    transform: rotate(45deg);
    transition: background 0.6s var(--wrk-ease), border-color 0.6s var(--wrk-ease), box-shadow 0.6s var(--wrk-ease);
    position: relative;
}

/* Edler, minimalistischer Lichteffekt (Ring-Expansion) */
.wirkung-pillar-intro__bullet-icon::after {
    content: '';
    position: absolute;
    inset: -4px;
    border: 1px solid var(--gold);
    transform: rotate(0deg) scale(0.8);
    opacity: 0;
    pointer-events: none;
    border-radius: 2px;
}

.wirkung-pillar-intro__bullet.is-active .wirkung-pillar-intro__bullet-icon {
    background: var(--gold);
    border-color: var(--gold);
    box-shadow: 0 0 0.8rem var(--gold);
}

.wirkung-pillar-intro__bullet.is-active .wirkung-pillar-intro__bullet-icon::after {
    animation: bulletLichteffekt 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes bulletLichteffekt {
    0% {
        transform: rotate(0deg) scale(0.6);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    100% {
        transform: rotate(90deg) scale(2.2);
        opacity: 0;
    }
}

.wirkung-pillar-intro__bullet-text {
    font-family: var(--font-primary);
    font-size: clamp(0.88rem, 2.2vw, 1.05rem);
    font-weight: 300;
    line-height: 1.65;
    color: var(--wrk-text-light);
    letter-spacing: 0.02em;
    opacity: 0;
    transform: translate3d(20px, 0, 0);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.wirkung-pillar-intro__bullet.is-active .wirkung-pillar-intro__bullet-text {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* ──────────────────────────────────────────────────────────────
   PILLAR EDITORIAL: Helle Mechanismus/Nutzen-Sektion
   ────────────────────────────────────────────────────────────── */
.wirkung-pillar-editorial {
    background: var(--ivory, #F0F0F0);
    padding: clamp(3rem, 8vw, 5rem) var(--container-padding);
    position: relative;
}

.wirkung-pillar-editorial::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg,
            transparent 5%,
            rgba(196, 161, 105, 0.3) 25%,
            rgba(196, 161, 105, 0.5) 50%,
            rgba(196, 161, 105, 0.3) 75%,
            transparent 95%);
}

.wirkung-pillar-editorial__inner {
    max-width: 72rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: clamp(2rem, 5vw, 3rem);
    align-items: center;
}

/* Bild */
.wirkung-pillar-editorial__image {
    width: 100%;
    max-width: 28rem;
    border-radius: 0.5rem;
    overflow: hidden;
    position: relative;
}

.wirkung-pillar-editorial__image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    aspect-ratio: 1 / 1;
    border-radius: 0.5rem;
    transition: transform 1.2s var(--wrk-ease);
}

.wirkung-pillar-editorial:hover .wirkung-pillar-editorial__image img {
    transform: scale(1.03);
}

/* Text-Content */
.wirkung-pillar-editorial__text {
    width: 100%;
    max-width: 36rem;
}

.wirkung-pillar-editorial__section-label {
    font-family: var(--font-accent);
    font-size: var(--fs-micro, 0.72rem);
    font-weight: 500;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: clamp(0.8rem, 2vw, 1.2rem);
    opacity: 0.75;
}

.wirkung-pillar-editorial__body {
    font-family: var(--font-primary);
    font-size: clamp(0.92rem, 2vw, 1.05rem);
    font-weight: 300;
    line-height: 1.82;
    color: var(--text-body);
    margin-bottom: clamp(2rem, 5vw, 3rem);
    text-align: justify;
    hyphens: auto;
}

.wirkung-pillar-editorial__body:last-child {
    margin-bottom: 0;
}

/* Divider zwischen Mechanismus und Nutzen */
.wirkung-pillar-editorial__divider {
    width: 3rem;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    margin: 0 0 clamp(2rem, 5vw, 3rem);
    opacity: 0.4;
}

/* ──────────────────────────────────────────────────────────────
   CTA SECTION (Dark)
   ────────────────────────────────────────────────────────────── */
.wirkung-cta {
    text-align: center;
    padding: clamp(5rem, 12vw, 8rem) var(--container-padding);
    position: relative;
    background: linear-gradient(180deg,
            var(--wrk-bg-dark) 0%,
            var(--wrk-bg-card) 50%,
            var(--wrk-bg-dark) 100%);
    overflow: hidden;
}

.wirkung-cta::before,
.wirkung-cta::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
            transparent 5%,
            rgba(196, 161, 105, 0.3) 25%,
            rgba(196, 161, 105, 0.5) 50%,
            rgba(196, 161, 105, 0.3) 75%,
            transparent 95%);
}

.wirkung-cta::before {
    top: 0;
}

.wirkung-cta::after {
    bottom: 0;
}

.wirkung-cta__title {
    font-family: var(--font-accent);
    font-size: clamp(1.4rem, 4.5vw, 2.2rem);
    font-weight: 300;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: clamp(1rem, 3vw, 1.5rem);
    background: linear-gradient(135deg,
            var(--gold) 0%,
            var(--gold-light) 50%,
            var(--gold) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.wirkung-cta__text {
    font-family: var(--font-editorial);
    font-size: clamp(1rem, 3vw, 1.35rem);
    font-weight: 300;
    font-style: italic;
    line-height: 1.8;
    color: var(--wrk-text-muted);
    max-width: 30rem;
    margin: 0 auto clamp(2rem, 5vw, 3rem);
}

/* CTA Button — Gold on Dark (wie Ritual Ambassador) */
.wirkung-cta .btn-primary {
    background: linear-gradient(160deg, #d4b87a 0%, #c4a169 40%, #b8935a 100%);
    color: #1a1610;
    border: 1px solid rgba(160, 130, 75, 0.35);
    border-radius: 62.5rem;
    transition: background 0.6s var(--wrk-ease-out),
        color 0.6s var(--wrk-ease-out),
        border-color 0.6s var(--wrk-ease-out),
        box-shadow 0.6s var(--wrk-ease-out);
}

.wirkung-cta .btn-primary::after {
    display: none;
}

.wirkung-cta .btn-primary:hover {
    background: linear-gradient(160deg, #dfc68c 0%, #d0ad75 40%, #c4a169 100%);
    color: #12100c;
    border-color: rgba(180, 150, 90, 0.5);
    box-shadow: 0 0.25rem 1.5rem rgba(196, 161, 105, 0.25),
        0 0 3rem rgba(196, 161, 105, 0.1);
}



/* ──────────────────────────────────────────────────────────────
   SCROLL REVEAL SYSTEM (Legacy + Upgraded Parallax)
   ────────────────────────────────────────────────────────────── */
.wirkung-reveal {
    opacity: 0;
    transform: translateY(2rem);
    transition: opacity 0.9s var(--wrk-ease),
        transform 1.1s var(--wrk-ease);
    will-change: transform, opacity;
}

.wirkung-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
    will-change: auto;
}

/* Gehobenes Parallax-Reveal (1:1 Focus-Effekt): scale(0.97) + translateY */
.wirkung-parallax-reveal {
    opacity: 0;
    transform: translateY(4rem) scale(0.97);
    transition:
        opacity 0.9s var(--wrk-ease),
        transform 1.1s var(--wrk-ease);
    will-change: opacity, transform;
}

.wirkung-parallax-reveal.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Gestaffelte Verzögerungen für parallax-reveal */
.wirkung-parallax-reveal[data-delay="1"] {
    transition-delay: 0.12s;
}

.wirkung-parallax-reveal[data-delay="2"] {
    transition-delay: 0.24s;
}

.wirkung-parallax-reveal[data-delay="3"] {
    transition-delay: 0.36s;
}

/* Staggered delays for bullets */
.wirkung-reveal[data-delay="1"] {
    transition-delay: 0.15s;
}

.wirkung-reveal[data-delay="2"] {
    transition-delay: 0.3s;
}

.wirkung-reveal[data-delay="3"] {
    transition-delay: 0.45s;
}

.wirkung-reveal[data-delay="4"] {
    transition-delay: 0.6s;
}

/* ──────────────────────────────────────────────────────────────
   PROGRESS INDICATOR: Horizontaler Gold-Bar (unter Header)
   ────────────────────────────────────────────────────────────── */
.wirkung-progress {
    position: fixed;
    top: var(--nav-height, 3.4rem);
    left: 0;
    width: 100%;
    height: 4px;
    z-index: 999;
    pointer-events: none;
    background: rgba(196, 161, 105, 0.15);
}

.wirkung-progress__fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--gold), var(--gold-light));
    transition: width 0.15s linear;
    border-radius: 0 2px 2px 0;
    box-shadow: 0 0 0.75rem rgba(196, 161, 105, 0.5),
        0 0 1.5rem rgba(196, 161, 105, 0.2);
}

/* ──────────────────────────────────────────────────────────────
   KEYFRAMES
   ────────────────────────────────────────────────────────────── */
@keyframes wrkFadeUp {
    from {
        opacity: 0;
        transform: translateY(1.5rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes wrkGlowPulse {

    0%,
    100% {
        opacity: 0.5;
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.05);
    }
}

/* ──────────────────────────────────────────────────────────────
   DESKTOP: Side-by-Side Editorial
   ────────────────────────────────────────────────────────────── */
@media (min-width: 52rem) {
    .wirkung-pillar-editorial__inner {
        flex-direction: row;
        align-items: flex-start;
        gap: clamp(3rem, 6vw, 5rem);
    }

    .wirkung-pillar-editorial__image {
        flex: 0 0 40%;
        max-width: 28rem;
    }

    .wirkung-pillar-editorial__text {
        flex: 1;
        padding-top: clamp(1rem, 2vw, 2rem);
    }

    /* Alternierende Reihenfolge */
    .wirkung-pillar-editorial--reverse .wirkung-pillar-editorial__inner {
        flex-direction: row-reverse;
    }

    .wirkung-intro-text {
        font-size: 1.12rem;
        line-height: 1.85;
        max-width: 42rem;
    }

    .wirkung-pillar-intro {
        min-height: 80vh;
        min-height: 80svh;
    }

    .wirkung-pillar-intro__bullets {
        flex-direction: column;
        max-width: 42rem;
    }
}

/* ──────────────────────────────────────────────────────────────
   LARGE DESKTOP
   ────────────────────────────────────────────────────────────── */
@media (min-width: 80rem) {
    .wirkung-pillar-editorial__inner {
        max-width: 76rem;
    }

    .wirkung-pillar-editorial__image {
        flex: 0 0 38%;
        max-width: 30rem;
    }

    .wirkung-pillar-intro__title {
        font-size: 2.4rem;
    }

    .wirkung-pillar-editorial__body {
        font-size: 1.08rem;
    }
}

/* ──────────────────────────────────────────────────────────────
   MOBILE FINE-TUNING
   ────────────────────────────────────────────────────────────── */
@media (max-width: 47.99rem) {
    .wirkung-hero {
        min-height: 50vh;
        min-height: 50svh;
    }

    .wirkung-pillar-intro {
        min-height: auto;
        padding: clamp(4rem, 12vw, 6rem) var(--container-padding);
    }

    .wirkung-pillar-editorial__image {
        max-width: 100%;
    }

    .wirkung-pillar-editorial__text {
        max-width: 100%;
    }

    .wirkung-pillar-editorial__body {
        text-align: left;
        hyphens: none;
    }

    .wirkung-pillar-intro__watermark {
        font-size: clamp(8rem, 25vw, 14rem);
    }
}

/* ──────────────────────────────────────────────────────────────
   REDUCED MOTION
   ────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

    .wirkung-reveal,
    .wirkung-parallax-reveal {
        transition: none !important;
        opacity: 1;
        transform: none;
    }

    .wirkung-hero__overtitle,
    .wirkung-hero__title,
    .wirkung-hero__divider,
    .wirkung-hero__subtitle {
        animation: none !important;
        opacity: 1;
        transform: none;
    }

    .wirkung-pillar-editorial__image img {
        transition: none !important;
    }

    .wirkung-pillar-intro__glow {
        animation: none !important;
    }

    .wirkung-hero::before {
        animation: none !important;
    }

    .wirkung-pillar-chevron {
        transition: none !important;
    }

    .wirkung-pillar-detail {
        transition: none !important;
    }

    .wirkung-pillar-bullets-line-fill {
        transition: none !important;
    }
}

/* ──────────────────────────────────────────────────────────────
   PILLAR BACKGROUND IMAGE (Ghost-Image)
   ────────────────────────────────────────────────────────────── */
.wirkung-pillar-intro__bg-image {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.75;
    overflow: hidden;
}

.wirkung-pillar-intro__bg-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center 30%;
}

/* ──────────────────────────────────────────────────────────────
   CHEVRON TRIGGER
   ────────────────────────────────────────────────────────────── */
.wirkung-pillar-chevron {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-top: clamp(2rem, 5vw, 3rem);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    z-index: 2;
    padding: 1rem;
    background: none;
    border: none;
}

.wirkung-pillar-chevron__label {
    font-family: var(--font-accent);
    font-size: clamp(0.6rem, 1.7vw, 0.72rem);
    font-weight: 600;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--gold);
    opacity: 0.8;
    transition: opacity 0.4s var(--wrk-ease);
}

.wirkung-pillar-chevron:hover .wirkung-pillar-chevron__label,
.wirkung-pillar-chevron:focus-visible .wirkung-pillar-chevron__label {
    opacity: 1;
}

.wirkung-pillar-chevron__icon {
    width: 1.875rem;
    height: 1.875rem;
    stroke: var(--gold);
    stroke-width: 3.0;
    /* 100% mehr Gewicht */
    fill: none;
    transition: transform 0.5s var(--wrk-ease), opacity 0.4s var(--wrk-ease);
    opacity: 0.75;
}

.wirkung-pillar-chevron:hover .wirkung-pillar-chevron__icon {
    opacity: 1;
    transform: translateY(0.2rem);
}

.wirkung-pillar-chevron.is-open .wirkung-pillar-chevron__icon {
    transform: rotate(180deg);
    opacity: 1;
}

.wirkung-pillar-chevron.is-open .wirkung-pillar-chevron__label {
    opacity: 0;
}

.wirkung-pillar-chevron:focus-visible {
    outline: 1px solid var(--gold);
    outline-offset: 0.25rem;
    border-radius: 0.25rem;
}

/* ──────────────────────────────────────────────────────────────
   DETAIL ACCORDION — «Cinema Dissolve» (120Hz Luxury)
   ────────────────────────────────────────────────────────────── */

/* ── Container: Spring-Easing mit Deceleration ── */
.wirkung-pillar-detail {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 1.2s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 38rem;
    margin: 0 auto;
}

.wirkung-pillar-detail.is-open {
    grid-template-rows: 1fr;
}

.wirkung-pillar-detail__content {
    overflow: hidden;
}

/* ── Inner: Gestaffelter Reveal ── */
.wirkung-pillar-detail__inner {
    padding-top: clamp(2rem, 5vw, 3rem);
    border-top: 1px solid rgba(196, 161, 105, 0.15);
    margin-top: clamp(1.5rem, 4vw, 2rem);
}

/* Jedes Kind-Element startet unsichtbar + leicht verschoben */
.wirkung-pillar-detail__inner>* {
    opacity: 0;
    transform: translate3d(0, 1.2rem, 0);
    transition:
        opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

/* Gestaffelte Verzögerungen: Vorhang-Effekt */
.wirkung-pillar-detail__inner>*:nth-child(1) {
    transition-delay: 0.15s;
}

.wirkung-pillar-detail__inner>*:nth-child(2) {
    transition-delay: 0.30s;
}

.wirkung-pillar-detail__inner>*:nth-child(3) {
    transition-delay: 0.45s;
}

.wirkung-pillar-detail__inner>*:nth-child(4) {
    transition-delay: 0.55s;
}

.wirkung-pillar-detail__inner>*:nth-child(5) {
    transition-delay: 0.65s;
}

/* Wenn offen: Alle Elemente einblenden */
.wirkung-pillar-detail.is-open .wirkung-pillar-detail__inner>* {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* Beim Schliessen: Kein Stagger, alles gleichzeitig */
.wirkung-pillar-detail:not(.is-open) .wirkung-pillar-detail__inner>* {
    transition-delay: 0s;
    transition-duration: 0.3s;
}

.wirkung-pillar-detail__section-label {
    font-family: var(--font-accent);
    font-size: var(--fs-micro, 0.72rem);
    font-weight: 500;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: clamp(0.8rem, 2vw, 1.2rem);
    opacity: 0.75;
    text-align: left;
}

/* Override: Wenn im offenen Detail, eigene opacity nutzen */
.wirkung-pillar-detail.is-open .wirkung-pillar-detail__section-label {
    opacity: 0.75;
}

.wirkung-pillar-detail__body {
    font-family: var(--font-primary);
    font-size: clamp(0.92rem, 2vw, 1.05rem);
    font-weight: 300;
    line-height: 1.82;
    color: var(--wrk-text-muted);
    margin-bottom: clamp(2rem, 5vw, 3rem);
    text-align: left;
}

.wirkung-pillar-detail__body:last-child {
    margin-bottom: 1rem;
}

.wirkung-pillar-detail__divider {
    width: 3rem;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    margin: 0 0 clamp(2rem, 5vw, 3rem);
    opacity: 0.3;
}

/* ── BG-Bild Zoom bei geöffnetem Detail ── */
.wirkung-pillar-intro__bg-image img {
    transition: transform 2.5s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.wirkung-pillar-intro.is-detail-open .wirkung-pillar-intro__bg-image img {
    transform: scale(1.3);
}

/* Zurück-Zoom beim Schliessen: etwas langsamer */
.wirkung-pillar-intro:not(.is-detail-open) .wirkung-pillar-intro__bg-image img {
    transition: transform 3s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Responsive: Detail & BG-Image Desktop ── */
@media (min-width: 52rem) {
    .wirkung-pillar-detail {
        max-width: 44rem;
    }

    .wirkung-pillar-detail__body {
        text-align: justify;
        hyphens: auto;
    }

    .wirkung-pillar-intro__bg-image {
        opacity: 0.60;
    }
}

@media (min-width: 80rem) {
    .wirkung-pillar-detail {
        max-width: 48rem;
    }

    .wirkung-pillar-detail__body {
        font-size: 1.08rem;
    }
}

/* ══════════════════════════════════════════════════════════════
   VERTICAL SCROLL PROGRESS BAR & ACTIVE GLOW STATES
   ══════════════════════════════════════════════════════════════ */

/* ── Pillars Container (Positionsreferenz für Progress-Bar) ── */
.wirkung-pillars-container {
    position: relative;
}

/* Rechte dezente Scroll-Linie */
.wirkung-right-progress {
    position: absolute;
    width: 2px;
    background: rgba(255, 255, 255, 0.15);
    z-index: 10;
    pointer-events: none;
    transform: translateX(-50%);
    opacity: 0.5;
    /* 50% dunkler/dezentere Darstellung */
}

.wirkung-right-progress__fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom,
            var(--gold-dark, #a6854e) 0%,
            var(--gold, #c4a169) 50%,
            var(--gold-light, #d4bc91) 100%);
    transform: scaleY(0);
    transform-origin: top center;
    will-change: transform;
    box-shadow: 0 0 0.3rem rgba(196, 161, 105, 0.4);
}

/* ── Active Pillar Glow States ──
   Wenn der Scroll den Punkt erreicht, leuchten Titel + Wasserzeichen auf */

/* Wasserzeichen Gold-Glow */
.wirkung-pillar-intro.is-pillar-active .wirkung-pillar-intro__watermark {
    color: rgba(196, 161, 105, 0.08);
    text-shadow: 0 0 3rem rgba(196, 161, 105, 0.06);
    transition: color 0.8s var(--wrk-ease), text-shadow 0.8s var(--wrk-ease);
}

/* Pillar-Titel: Gold → Weiss → Gold Gradient-Shift */
.wirkung-pillar-intro.is-pillar-active .wirkung-pillar-intro__title {
    background: linear-gradient(135deg,
            var(--gold-light, #d4bc91) 0%,
            #ffffff 50%,
            var(--gold-light, #d4bc91) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: background 0.8s var(--wrk-ease);
}

/* Säulen-Label Gold-Intensivierung */
.wirkung-pillar-intro.is-pillar-active .wirkung-pillar-intro__label {
    opacity: 1;
    transition: opacity 0.8s var(--wrk-ease);
}

/* Subtitle leuchtet heller */
.wirkung-pillar-intro.is-pillar-active .wirkung-pillar-intro__subtitle {
    opacity: 0.85;
    transition: opacity 0.8s var(--wrk-ease);
}

/* Glow-Orb intensiviert sich */
.wirkung-pillar-intro.is-pillar-active .wirkung-pillar-intro__glow {
    background: radial-gradient(circle,
            rgba(196, 161, 105, 0.10) 0%,
            rgba(196, 161, 105, 0.04) 40%,
            transparent 70%);
    transition: background 1.2s var(--wrk-ease);
}

/* Bullet-Icons: volle Gold-Opazität */
.wirkung-pillar-intro.is-pillar-active .wirkung-pillar-intro__bullet-icon {
    background: var(--gold);
    box-shadow: 0 0 0.8rem var(--gold);
    transition: background 0.6s var(--wrk-ease), box-shadow 0.6s var(--wrk-ease);
}