/* Block: Parallax-Section */

.myk-px {
    position: relative;
    overflow: hidden;
    color: var(--myk-c-light);
    isolation: isolate;
}

.myk-px--h-small  { min-height: 40vh; min-height: 40svh; }
.myk-px--h-medium { min-height: 60vh; min-height: 60svh; }
.myk-px--h-large  { min-height: 80vh; min-height: 80svh; }

.myk-px-bg {
    position: absolute;
    inset: -10% 0;          /* etwas Spielraum für Parallax-Bewegung */
    z-index: 0;
    will-change: transform;
}
.myk-px-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.myk-px-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(0,0,0, calc(var(--myk-px-overlay, 35%) * 0.55)) 0%,
        rgba(0,0,0, var(--myk-px-overlay, 35%)) 60%,
        rgba(0,0,0, calc(var(--myk-px-overlay, 35%) * 1.1)) 100%);
    z-index: 1;
}

.myk-px-content {
    position: relative;
    z-index: 2;
    min-height: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(3rem, 8vw, 7rem) clamp(1rem, 5vw, 3rem);
}

.myk-px-text {
    max-width: 60ch;
    display: flex;
    flex-direction: column;
    gap: clamp(0.75rem, 1.5vw, 1.25rem);
    text-align: center;
    align-items: center;
}
.myk-px-kicker {
    padding: 0.35em 0.9em;
    background: var(--myk-c-accent);
    color: var(--myk-c-light);
    border-radius: var(--myk-r-pill);
    font-size: var(--myk-fs-meta);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.myk-px-headline {
    margin: 0;
    font-size: var(--myk-fs-display);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    text-wrap: balance;
}
.myk-px-subline {
    margin: 0;
    font-size: var(--myk-fs-body);
    line-height: 1.55;
    opacity: 0.92;
    text-wrap: pretty;
}

/* Reduced motion: kein Parallax */
@media (prefers-reduced-motion: reduce) {
    .myk-px-bg { transform: none !important; }
}