@layer pages {
    .legal-article,
    :is([data-view="imprint"], [data-view="privacy"]) .legal-article {
        z-index: 1;
        position: relative;
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: var(--content-width);
        padding: 3rem 5% 4rem;
    }

    .legal-article {
        &__header {
            position: static;
            display: block;
            width: auto;
            height: auto;
            margin: 0 0 0.5rem;
            padding: 0;
            background: transparent;
            border: none;
            box-shadow: none;
        }

        .subtitle {
            color: var(--color-blue);
            font-size: 1.5rem;
            line-height: 1.65rem;
            margin: 0 0 0.35rem;
        }

        h1 {
            z-index: 25;
            color: var(--color-darkblue);
            font-size: 1.7rem;
            line-height: 2rem;
            margin: 0 0 2.5rem;
        }

        :is(p, span, li) {
            z-index: 25;
            color: var(--color-darkblue);
        }

        p {
            margin-bottom: 2rem;

            &.gap--before {
                margin-top: 2rem;
            }
        }

        ul {
            margin: 0 0 2rem;
            padding-inline-start: 1.25rem;
        }

        li {
            margin-bottom: 0.35rem;
        }

        :is(h2, h3) {
            z-index: 25;
            color: var(--color-darkblue);
            font-size: 1em;
            font-weight: 700;
            line-height: 1.5;
            margin: 0 0 0.5rem;
        }

        h2 {
            margin-top: 2rem;
        }

        .legal-article__header + h2,
        h1 + h2 {
            margin-top: 0;
        }

        a {
            color: var(--color-link);
            text-decoration: underline;
            text-underline-offset: 0.15em;

            &:visited {
                color: var(--color-link);
            }

            &:is(:hover, :focus-visible) {
                color: var(--color-darkblue);
            }
        }

        button.link-button {
            cursor: pointer;
            display: inline;
            margin: 0;
            padding: 0;
            border: none;
            background: none;
            color: var(--color-link);
            font: inherit;
            text-decoration: underline;
            text-underline-offset: 0.15em;

            &:is(:hover, :focus-visible) {
                color: var(--color-darkblue);
            }
        }
    }

    /* Full-page route (not overlay); hero gradient via utilities .legal-hero shared rule */
    :is([data-view="imprint"], [data-view="privacy"]) #main {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        background-color: var(--color-white);
    }
}