/* ==========================================================================
   Hero mit Video rechts und breite Zitate im Slider.
   ========================================================================== */

.msf-hero--video {
    display: block;
    min-height: 0;
    padding-block: var(--msf-section-y);
    border-top: 1px solid var(--msf-line);
}

.msf-hero__zweispaltig {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: clamp(1.5rem, 5vw, 4rem);
}

.msf-hero--video .msf-hero__title { font-size: clamp(2rem, 4.5vw, 3.2rem); }
.msf-hero--video .msf-hero__lead { max-width: 42ch; }

.msf-hero__video {
    border-radius: var(--msf-radius);
    overflow: hidden;
    background: var(--msf-surface-2);
    border: 1px solid var(--msf-line);
}

.msf-hero__video video,
.msf-hero__video img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}

@media (max-width: 900px) {
    .msf-hero__zweispaltig { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------- Zitate im Slider */

.msf-zitate .msf-karussell__element { flex: 0 0 min(760px, 88vw); }

.msf-zitat--breit { width: 100%; min-height: 300px; }

.msf-zitat--breit .msf-zitat__text { font-size: clamp(1.15rem, 2vw, 1.5rem); max-width: 26ch; }

.msf-zitat--breit .msf-zitat__inhalt {
    background: linear-gradient(
        90deg,
        rgba(16, 17, 18, 0.97) 0%,
        rgba(16, 17, 18, 0.9) 50%,
        rgba(16, 17, 18, 0.25) 80%,
        rgba(16, 17, 18, 0) 100%
    );
}