/* Geschichte & Leitbild: route-only production banner. */
/* Mask the photograph itself so its left edge cannot form a vertical join.
   Its original 8:3 crop stays intact even on a very wide viewport. */
.ls-page-hero {
    --ls-banner-photo: url("../images/geschichte-leitbild-banner-production-v1.webp");
    --ls-banner-overlay: linear-gradient(90deg, rgba(25, 26, 28, 0.94) 0%, rgba(25, 26, 28, 0.81) 43%, rgba(25, 26, 28, 0.34) 72%, rgba(25, 26, 28, 0.09) 100%);
    background: #191a1c;
    border-bottom-color: rgba(128, 23, 34, 0.30);
}

.ls-page-hero::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: auto;
    aspect-ratio: 8 / 3;
    z-index: 0;
    background: var(--ls-banner-photo) right center / cover no-repeat;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 30%);
    pointer-events: none;
}

.ls-page-hero::after {
    content: "";
    inset: 0;
    z-index: 0;
    background: var(--ls-banner-overlay);
}

.ls-page-hero .ls-eyebrow {
    color: #f3dc94;
}

.ls-page-hero .yoast-breadcrumbs,
.ls-page-hero .wp-block-yoast-seo-breadcrumbs {
    color: rgba(255, 255, 255, 0.84);
}

.ls-page-hero .yoast-breadcrumbs a,
.ls-page-hero .wp-block-yoast-seo-breadcrumbs a {
    color: #fff;
}

.ls-page-hero a:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

.ls-page-hero .wp-block-post-title {
    color: #fff;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.24);
}

@media (max-width: 640px) {
    .ls-page-hero {
        --ls-banner-overlay: linear-gradient(90deg, rgba(25, 26, 28, 0.96) 0%, rgba(25, 26, 28, 0.88) 58%, rgba(25, 26, 28, 0.52) 100%);
    }
}

@media (forced-colors: active) {
    .ls-page-hero::before,
    .ls-page-hero::after {
        content: none;
    }

    .ls-page-hero a:focus-visible {
        outline-color: Highlight;
    }

    .ls-page-hero {
        border-bottom: 1px solid CanvasText;
        color: CanvasText;
        background: Canvas;
    }

    .ls-page-hero .ls-eyebrow,
    .ls-page-hero .wp-block-post-title,
    .ls-page-hero .yoast-breadcrumbs,
    .ls-page-hero .wp-block-yoast-seo-breadcrumbs,
    .ls-page-hero .yoast-breadcrumbs a,
    .ls-page-hero .wp-block-yoast-seo-breadcrumbs a {
        color: CanvasText;
        text-shadow: none;
    }
}