/* Aria: Raum öffnet sich. Progressive enhancement, no hidden content baseline.
   Deliberately scoped away from the contact form and its controls. */
.hero-statement .motion-line {
    display: block;
    overflow: clip;
    padding-bottom: 0.13em;
    margin-bottom: -0.13em;
}

.motion-line > span {
    display: inline-block;
}

.motion-enabled .site-header::after {
    position: absolute;
    inset: auto 0 -1px;
    height: 3px;
    background: var(--color-brand-dark);
    content: "";
    pointer-events: none;
    transform: scaleX(var(--reading-progress, 0));
    transform-origin: left;
}

.motion-enabled .site-nav > ul > li > a {
    position: relative;
}

.motion-enabled .site-nav > ul > li > a::after {
    position: absolute;
    right: 0.72rem;
    bottom: 5px;
    left: 0.72rem;
    height: 2px;
    background: var(--color-brand-dark);
    content: "";
    transform: scaleX(0);
    transform-origin: left;
}

.motion-enabled .site-nav > ul > li > a[aria-current="location"]::after {
    transform: scaleX(1);
}

.motion-enabled .project-photo {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: clip;
    border-radius: 18px;
}

.motion-enabled .hero-visual__image,
.motion-enabled .project-photo .project-photo__image {
    position: absolute;
    inset: 0;
    height: 100%;
}

/* Explicit off-state covers live OS preference changes and printing. */
.motion-enabled[data-motion="off"] .site-header::after {
    display: none;
}

.motion-enabled[data-motion="off"] :is(.hero, .site-header, #leistungen, #ablauf, .preparation-grid, .local-section, #faq),
.motion-enabled[data-motion="off"] :is(.hero, .site-header, #leistungen, #ablauf, .preparation-grid, .local-section, #faq) *,
.motion-enabled[data-motion="off"] :is(.hero, .site-header, #leistungen, #ablauf, .preparation-grid, .local-section, #faq) *::before,
.motion-enabled[data-motion="off"] :is(.hero, .site-header, #leistungen, #ablauf, .preparation-grid, .local-section, #faq) *::after {
    transition: none !important;
}

@media (prefers-reduced-motion: no-preference) {
    html.motion-enabled:not([data-motion="off"]) {
        scroll-behavior: smooth;
    }

    .motion-enabled:not([data-motion="off"]) .site-header {
        transition: box-shadow 240ms ease;
    }

    .motion-enabled:not([data-motion="off"]) .site-header.is-scrolled {
        box-shadow: 0 6px 24px rgba(27, 39, 45, 0.07);
    }

    .motion-enabled:not([data-motion="off"]) .site-nav > ul > li > a::after {
        transition: transform 260ms var(--ease-out-studio);
    }

    .motion-enabled:not([data-motion="off"]) .service-card {
        position: relative;
        isolation: isolate;
    }

    .motion-enabled:not([data-motion="off"]) .service-card::before {
        position: absolute;
        z-index: -1;
        inset: 0;
        background: var(--color-paper);
        content: "";
        opacity: 0;
        transform: scaleX(0.92);
        transform-origin: left;
        transition: opacity 240ms ease, transform 400ms var(--ease-out-studio);
    }

    .motion-enabled:not([data-motion="off"]) .service-card:focus-within::before {
        opacity: 1;
        transform: scaleX(1);
    }

    .motion-enabled:not([data-motion="off"]) .process-step::before {
        transition: background-color 360ms ease, color 360ms ease, box-shadow 360ms ease;
    }

    .motion-enabled:not([data-motion="off"]) .process-step::after {
        background: var(--color-brand-dark);
        transform: scaleY(0);
        transform-origin: top;
        transition: transform 700ms var(--ease-out-studio);
    }

    .motion-enabled:not([data-motion="off"]) .process-step[data-motion-seen]::before {
        background: var(--color-brand-dark);
        color: var(--color-white);
        box-shadow: 0 0 0 5px var(--color-brand-soft);
    }

    .motion-enabled:not([data-motion="off"]) .process-step[data-motion-seen]::after {
        transform: scaleY(1);
    }

    @media (min-width: 860px) {
        .motion-enabled:not([data-motion="off"]) .process-step::before,
        .motion-enabled:not([data-motion="off"]) .process-step::after {
            transition-delay: calc(var(--motion-index, 0) * 80ms);
        }

        .motion-enabled:not([data-motion="off"]) .process-step::after {
            transform: scaleX(0);
            transform-origin: left;
        }

        .motion-enabled:not([data-motion="off"]) .process-step[data-motion-seen]::after {
            transform: scaleX(1);
        }
    }

    @media (hover: hover) and (pointer: fine) {
        .motion-enabled:not([data-motion="off"]) .service-card:hover::before {
            opacity: 1;
            transform: scaleX(1);
        }

        .motion-enabled:not([data-motion="off"]) .service-card h3,
        .motion-enabled:not([data-motion="off"]) .service-icon,
        .motion-enabled:not([data-motion="off"]) .hero-explore svg {
            transition: transform 360ms var(--ease-out-studio);
        }

        .motion-enabled:not([data-motion="off"]) .service-card:hover:not(:focus-within) h3 {
            transform: translateX(6px);
        }

        .motion-enabled:not([data-motion="off"]) .service-card:hover .service-icon {
            transform: rotate(-6deg) scale(1.08);
        }

        .motion-enabled:not([data-motion="off"]) .hero-explore:hover svg {
            transform: translateY(5px);
        }

    }
}

@media print {
    .motion-enabled .site-header::after {
        display: none !important;
    }
}