@layer blocks {
    .block-text-body {
        max-width: 40rem;
    }

    .hero {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: calc(var(--space-unit) * 1.5);
    }

    .hero-media {
        min-width: 0;
    }

    .hero-slides {
        display: flex;
        gap: var(--space-unit);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        overscroll-behavior-x: contain;
    }

    .hero-slide {
        flex: 0 0 88%;
        min-width: 0;
        scroll-snap-align: start;
    }

    @media (prefers-reduced-motion: no-preference) {
        html[data-motion='subtle'] .hero-slides {
            scroll-behavior: smooth;
        }
    }

    .hero-center .hero-content {
        max-width: 48rem;
        margin: 0 auto;
        text-align: center;
    }

    .hero-center .block-actions {
        justify-content: center;
    }

    .hero-subtitle {
        margin: 0;
        font-size: 1.25rem;
        color: var(--tone-muted);
    }

    .hero-eyebrow {
        margin-block-end: calc(var(--space-unit) * 0.5);
    }

    .hero-accent {
        font-style: normal;
        color: var(--tone-accent);
    }

    .hero-accent-field {
        margin: 0;
        color: var(--tone-accent);
        font-family: var(--font-ui);
        font-size: 0.875rem;
    }

    .cta {
        padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 1.5);
    }

    .cta-text {
        max-width: 40rem;
        margin: 0;
    }

    .media-text {
        display: grid;
        gap: calc(var(--space-unit) * 1.5);
        align-items: center;
    }

    .media-text-body {
        min-width: 0;
    }

    .media-text:has(> .media-text-badge) > .image,
    .media-text-badge {
        grid-row: 1;
        grid-column: 1;
    }

    .media-text-badge {
        z-index: 1;
        align-self: end;
        justify-self: start;
        max-width: calc(100% - var(--space-unit) * 2);
        margin: 0 0 calc(var(--space-unit) * 2.5) var(--space-unit);
        padding: calc(var(--space-unit) * 0.5) calc(var(--space-unit) * 0.75);
        border-radius: var(--radius-control);
        background: var(--tone-action);
        color: var(--tone-on-action);
        font-family: var(--font-ui);
        font-weight: 600;
        rotate: -3deg;
    }

    @container (min-width: 48rem) {
        .media-text {
            grid-template-columns: 1fr 1fr;
            gap: calc(var(--space-unit) * 2.5);
        }

        .media-text-end > .image {
            order: 2;
        }

        .media-text-end:has(> .media-text-badge) > .image,
        .media-text-end > .media-text-badge {
            grid-column: 2;
        }
    }

    .gallery {
        --block-grid-min: 14rem;
    }

    .gallery-item .image a {
        display: block;
    }

    .features,
    .contacts {
        align-items: start;
    }

    .feature > :last-child,
    .contact > :last-child {
        margin-bottom: 0;
    }

    .feature-title,
    .contact-name {
        margin: 0 0 calc(var(--space-unit) * 0.5);
    }

    .feature-text,
    .contact-role,
    .contact-note,
    .contact-phone,
    .contact-email,
    .contact-vcard {
        margin: 0 0 calc(var(--space-unit) * 0.25);
    }

    .contact .image {
        max-width: 10rem;
        margin-bottom: var(--space-unit);
    }

    .feature > .image {
        margin-bottom: var(--space-unit);
    }

    .feature-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        inline-size: 2.5rem;
        block-size: 2.5rem;
        margin-bottom: calc(var(--space-unit) * 0.5);
        color: var(--tone-accent);
    }

    .feature-icon .icon {
        width: 1.5rem;
        height: 1.5rem;
    }

    .feature-link {
        display: inline-block;
        margin-top: calc(var(--space-unit) * 0.5);
        color: var(--tone-link);
        font-family: var(--font-ui);
        font-weight: 600;
    }

    .contact-avatar {
        display: grid;
        place-items: center;
        justify-self: start;
        inline-size: 4rem;
        block-size: 4rem;
        margin-bottom: var(--space-unit);
        border-radius: 50%;
        background: var(--tone-action);
        color: var(--tone-on-action);
        font-family: var(--font-heading);
        font-size: 1.5rem;
        font-weight: var(--heading-weight);
        line-height: 1;
    }

    .contact-role {
        color: var(--tone-muted);
    }

    .contact-vcard {
        font-family: var(--font-ui);
        font-size: 0.875rem;
    }

    .services-text {
        max-width: 48rem;
        margin: 0 0 var(--space-unit);
    }

    .services {
        --block-grid-min: 14rem;

        align-items: start;
    }

    .service > :last-child {
        margin-bottom: 0;
    }

    .service .image {
        margin-bottom: var(--space-unit);
    }

    .service-name,
    .service-description {
        margin: 0 0 calc(var(--space-unit) * 0.5);
    }

    .service-price {
        margin: 0 0 calc(var(--space-unit) * 0.5);
        font-family: var(--font-ui);
        font-weight: 600;
        font-variant-numeric: tabular-nums;
    }

    .services-note,
    .opening-hours-note {
        max-width: 48rem;
        margin: var(--space-unit) 0 0;
        color: var(--tone-muted);
    }

    .opening-hours {
        max-width: 28rem;
        margin: 0;
    }

    .opening-hours-row {
        display: flex;
        flex-wrap: wrap;
        column-gap: var(--space-unit);
        padding-block: calc(var(--space-unit) * 0.5);
        border-bottom: 1px solid var(--tone-border);
    }

    .opening-hours-row > dt {
        font-weight: 600;
    }

    .opening-hours-row > dd {
        margin: 0;
        margin-inline-start: auto;
        text-align: end;
        font-variant-numeric: tabular-nums;
    }

    .stats {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
        gap: calc(var(--space-unit) * 1.5);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .stat-value {
        margin: 0 0 calc(var(--space-unit) * 0.25);
        font-family: var(--font-heading);
        font-size: clamp(2rem, 1.25rem + 5cqi, 3.5rem);
        font-weight: var(--heading-weight);
        line-height: 1.1;
        font-variant-numeric: tabular-nums;
    }

    .stat-label {
        margin: 0;
        color: var(--tone-muted);
    }

    .marquee {
        display: grid;
        gap: calc(var(--space-unit) * 0.5);
    }

    .marquee-viewport {
        overflow: hidden;
    }

    .marquee-track {
        display: block;
    }

    .marquee-list {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: calc(var(--space-unit) * 0.5) calc(var(--space-unit) * 1.5);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .marquee-item {
        display: flex;
        align-items: center;
        gap: calc(var(--space-unit) * 1.5);
        font-family: var(--font-heading);
        font-size: 1.25rem;
        font-weight: var(--heading-weight);
        line-height: 1.2;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .marquee-item::after {
        content: '';
        flex: none;
        inline-size: 0.5em;
        block-size: 0.5em;
        background: currentColor;
        clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    }

    .marquee-item:last-child::after,
    .marquee-copy,
    .marquee-pause {
        display: none;
    }

    .marquee-pause-input {
        margin: 0;
        accent-color: var(--tone-accent);
    }

    .timeline {
        max-width: 48rem;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .timeline-item {
        position: relative;
        display: grid;
        grid-template-columns: 1rem minmax(0, 1fr);
        column-gap: var(--space-unit);
        padding-block-end: calc(var(--space-unit) * 1.5);
    }

    .timeline-item:last-child {
        padding-block-end: 0;
    }

    .timeline-item > * {
        grid-column: 2;
    }

    .timeline-item::before {
        content: '';
        position: relative;
        z-index: 1;
        grid-row: 1;
        grid-column: 1;
        box-sizing: border-box;
        inline-size: 1rem;
        block-size: 1rem;
        margin-block-start: 0.25rem;
        border: 0.1875rem solid var(--tone-accent);
        border-radius: 50%;
        background: var(--tone-bg);
    }

    /* the line runs into the next item down to the top of its dot */
    .timeline-item::after {
        content: '';
        position: absolute;
        inset-block: 1.25rem -0.25rem;
        inset-inline-start: 0.5rem;
        inline-size: 1px;
        translate: -50% 0;
        background: var(--tone-border);
    }

    .timeline-item:last-child::after {
        content: none;
    }

    .timeline-when {
        margin: 0;
        font-family: var(--font-heading);
        font-weight: var(--heading-weight);
    }

    .timeline-title {
        margin: 0;
        font-size: 1.125rem;
    }

    .timeline-text {
        margin: calc(var(--space-unit) * 0.25) 0 0;
        color: var(--tone-muted);
    }

    @keyframes cms-marquee-slide {
        from {
            transform: translateX(0);
        }

        to {
            transform: translateX(-50%);
        }
    }

    @media (prefers-reduced-motion: no-preference) {
        html[data-motion='subtle'] .marquee-loop .marquee-track {
            display: flex;
            inline-size: max-content;
            animation: cms-marquee-slide 40s linear infinite;
        }

        html[data-motion='subtle'] .marquee-loop:has(.marquee-pause-input:checked) .marquee-track,
        html[data-motion='subtle'] .marquee-loop .marquee-viewport:hover .marquee-track,
        html[data-motion='subtle'] .marquee-loop:focus-within .marquee-track {
            animation-play-state: paused;
        }

        /* each list spans at least the block, so a short list leaves no hole in the loop;
           its end gap matches the gap between items, so the copy follows without a seam */
        html[data-motion='subtle'] .marquee-loop .marquee-list {
            flex: none;
            flex-wrap: nowrap;
            min-inline-size: 100cqi;
            padding-inline-end: calc(var(--space-unit) * 1.5);
        }

        html[data-motion='subtle'] .marquee-loop .marquee-item {
            white-space: nowrap;
        }

        html[data-motion='subtle'] .marquee-loop .marquee-item:last-child::after {
            display: block;
        }

        html[data-motion='subtle'] .marquee-loop .marquee-copy {
            display: flex;
        }

        html[data-motion='subtle'] .marquee-loop .marquee-pause {
            display: flex;
            align-items: center;
            justify-self: end;
            gap: calc(var(--space-unit) * 0.5);
            font-size: 0.875rem;
        }
    }

    .testimonials {
        --block-grid-min: 18rem;

        align-items: start;
    }

    .testimonial-figure {
        margin: 0;
    }

    .testimonial-quote {
        margin: 0 0 var(--space-unit);
    }

    .testimonial-quote > p {
        margin: 0;
    }

    .testimonial-author {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        column-gap: calc(var(--space-unit) * 0.75);
        align-items: center;
    }

    .testimonial-author:has(> .image) {
        grid-template-columns: 3rem minmax(0, 1fr);
    }

    .testimonial-author:has(> .testimonial-detail) > .image {
        grid-row: 1 / span 2;
    }

    .testimonial-author > .image img {
        border-radius: 50%;
    }

    .testimonial-name,
    .testimonial-detail {
        grid-column: -2;
    }

    .testimonial-name {
        font-weight: 600;
    }

    .testimonial-detail {
        color: var(--tone-muted);
        font-size: 0.875rem;
    }

    .team-text {
        max-width: 48rem;
        margin: 0 0 var(--space-unit);
    }

    .team {
        --block-grid-min: 14rem;

        align-items: start;
    }

    .team-member > :last-child {
        margin-bottom: 0;
    }

    .team-member .image {
        margin-bottom: var(--space-unit);
    }

    .team-name {
        margin: 0 0 calc(var(--space-unit) * 0.25);
    }

    .team-role {
        margin: 0 0 calc(var(--space-unit) * 0.5);
        color: var(--tone-muted);
    }

    .team-member-text {
        margin: 0;
    }

    .logos {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2.5);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .logo {
        max-width: 10rem;
    }

    .logo .image img {
        width: auto;
        max-width: 100%;
        height: 3rem;
        border-radius: 0;
        object-fit: contain;
    }

    .faq {
        max-width: 48rem;
    }

    .faq-item {
        border-bottom: 1px solid var(--tone-border);
    }

    .faq-item summary {
        padding: calc(var(--space-unit) * 0.75) 0;
        font-family: var(--font-heading);
        font-size: 1.125rem;
        cursor: pointer;
    }

    .faq-item .rich-text {
        padding: 0 0 var(--space-unit);
    }

    .entry > .image,
    .entry-body > .image {
        margin-bottom: calc(var(--space-unit) * 2);
    }

    .entry-date,
    .entry-card-date {
        color: var(--tone-muted);
        font-family: var(--font-ui);
        font-size: 0.875rem;
    }

    .entry-date {
        margin: 0 0 var(--space-unit);
    }

    .entry-terms {
        display: flex;
        flex-wrap: wrap;
        gap: calc(var(--space-unit) * 0.25) calc(var(--space-unit) * 0.75);
        margin: 0 0 calc(var(--space-unit) * 1.5);
        padding: 0;
        list-style: none;
    }

    .entry-term {
        font-family: var(--font-ui);
        font-size: 0.875rem;
    }

    .entry-card {
        min-width: 0;
    }

    .entry-card-title,
    .post-list .entry-card-title {
        margin: 0 0 calc(var(--space-unit) * 0.25);
    }

    .entry-card-date,
    .entry-card-perex {
        margin: 0 0 calc(var(--space-unit) * 0.25);
    }

    .listing {
        margin: 0 0 calc(var(--space-unit) * 2);
    }

    .listing-items {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
        gap: calc(var(--space-unit) * 1.5);
        margin: calc(var(--space-unit) * 2) 0 0;
    }

    .entry:has(> .entry-with-subnav, > .entry-with-aside),
    .listing {
        container-type: inline-size;
    }

    .entry-layout-narrow,
    .entry-layout-cover {
        max-width: 48rem;
        margin-inline: auto;
    }

    .entry-layout-plain,
    .entry-layout-sidenav,
    .entry-layout-sidebar,
    .listing-layout-cards,
    .listing-layout-featured,
    .listing-layout-list {
        max-width: 100%;
    }

    .entry-layout-plain {
        display: grid;
        grid-column: full;
        grid-template-columns: subgrid;
    }

    .entry-layout-plain > *,
    .entry-layout-plain > [data-canvas-root] > * {
        grid-column: content;
        min-width: 0;
    }

    .entry-layout-plain > .block[data-tone],
    .entry-layout-plain > [data-canvas-root] > .block[data-tone] {
        grid-column: full;
        padding-inline: max(var(--space-unit), (100% - var(--site-content-width)) / 2);
        border-radius: 0;
    }

    .entry-layout-plain > .block[data-tone]:has(+ .block[data-tone]),
    .entry-layout-plain > [data-canvas-root] > .block[data-tone]:has(+ .block[data-tone]) {
        margin-bottom: 0;
    }

    .entry-with-subnav,
    .entry-with-aside,
    .listing-with-aside {
        display: grid;
        gap: calc(var(--space-unit) * 2);
    }

    .entry-body,
    .listing-body {
        min-width: 0;
    }

    @container (min-width: 60rem) {
        .entry-with-subnav {
            grid-template-columns: 16rem minmax(0, 1fr);
            align-items: start;
        }

        .entry-with-aside,
        .listing-with-aside {
            grid-template-columns: minmax(0, 1fr) 18rem;
            align-items: start;
        }
    }

    .subnav {
        font-family: var(--font-ui);
    }

    .subnav ul {
        display: flex;
        flex-wrap: wrap;
        gap: calc(var(--space-unit) * 0.25) var(--space-unit);
        margin: 0;
        padding: 0 0 var(--space-unit);
        border-bottom: 1px solid var(--tone-border);
        list-style: none;
    }

    .subnav a {
        color: var(--tone-link);
        text-decoration: none;
    }

    .subnav a:hover,
    .subnav a:focus-visible {
        text-decoration: underline;
    }

    .subnav [aria-current] {
        color: var(--tone-fg);
        font-weight: 600;
    }

    .subnav-root {
        flex-basis: 100%;
        font-weight: 600;
    }

    @container (min-width: 60rem) {
        .subnav ul {
            flex-direction: column;
            padding: 0 var(--space-unit) 0 0;
            border-right: 1px solid var(--tone-border);
            border-bottom: 0;
        }

        .subnav li:not(.subnav-root) {
            padding-left: calc(var(--space-unit) * 0.75);
        }
    }

    .post-aside {
        display: grid;
        gap: calc(var(--space-unit) * 1.5);
        padding: calc(var(--space-unit) * 1.25);
        border: 1px solid var(--tone-border);
        border-radius: var(--radius-surface);
        background: var(--tone-card);
        font-family: var(--font-ui);
    }

    .post-aside-section {
        min-width: 0;
    }

    .post-aside-title {
        margin: 0 0 calc(var(--space-unit) * 0.5);
        font-size: 1.125rem;
    }

    .post-aside-list {
        display: grid;
        gap: calc(var(--space-unit) * 0.5);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .post-aside-list li {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 0 calc(var(--space-unit) * 0.5);
    }

    .post-aside-list time,
    .post-aside-count {
        color: var(--tone-muted);
        font-size: 0.875rem;
    }

    .post-aside [aria-current='page'] {
        color: var(--tone-fg);
        font-weight: 600;
    }

    .related {
        margin: calc(var(--space-unit) * 3) 0 0;
        padding: calc(var(--space-unit) * 2) 0 0;
        border-top: 1px solid var(--tone-border);
    }

    .related-title {
        margin: 0 0 calc(var(--space-unit) * 1.5);
    }

    .entry-card > .image {
        margin: 0 0 calc(var(--space-unit) * 0.75);
    }

    .entry-card > .image img {
        border-radius: var(--radius-surface);
    }

    .entry-card-featured {
        grid-column: 1 / -1;
    }

    .entry-card-featured .entry-card-title {
        font-size: 1.75rem;
    }

    .listing-layout-list .listing-items {
        grid-template-columns: minmax(0, 1fr);
    }

    .listing-layout-list .entry-card {
        padding: 0 0 var(--space-unit);
        border-bottom: 1px solid var(--tone-border);
    }

    .listing-empty {
        margin: calc(var(--space-unit) * 2) 0 0;
        color: var(--tone-muted);
    }

    .preview-notice {
        margin: 0 0 calc(var(--space-unit) * 1.5);
        padding: calc(var(--space-unit) * 0.75) var(--space-unit);
        border: 0.125rem solid var(--tone-accent);
        border-radius: var(--radius-surface);
        background: var(--tone-card);
        color: var(--tone-fg);
        font-family: var(--font-ui);
        font-weight: 600;
    }

    .block-cms-hero[data-variant='cover'] {
        position: relative;
        overflow: hidden;
    }

    .block-cms-hero[data-variant='cover'] .hero {
        min-height: calc(var(--space-unit) * 24);
        align-content: end;
    }

    .block-cms-hero[data-variant='cover'] .hero-media {
        position: absolute;
        inset: 0;
    }

    .block-cms-hero[data-variant='cover'] .hero-media > .image {
        height: 100%;
    }

    .block-cms-hero[data-variant='cover'] .hero-media > .image::after {
        content: '';
        position: absolute;
        inset: 0;
        background: color-mix(in srgb, var(--tone-bg) 72%, transparent);
    }

    .block-cms-hero[data-variant='cover'] .hero-media img {
        height: 100%;
        aspect-ratio: auto;
        border-radius: 0;
        object-fit: cover;
    }

    .block-cms-hero[data-variant='cover'] .hero-media figcaption {
        position: absolute;
        right: calc(var(--space-unit) * 0.5);
        bottom: calc(var(--space-unit) * 0.25);
        z-index: 1;
    }

    .block-cms-hero[data-variant='cover'] .hero-content {
        position: relative;
        z-index: 1;
    }

    .block-cms-features[data-variant='list'] .features,
    .block-cms-contacts[data-variant='list'] .contacts,
    .block-cms-team[data-variant='list'] .team,
    .block-cms-post_list[data-variant='list'] .post-list {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .block-cms-features[data-variant='list'] .feature,
    .block-cms-contacts[data-variant='list'] .contact,
    .block-cms-team[data-variant='list'] .team-member,
    .block-cms-post_list[data-variant='list'] .post-list > li {
        padding-block: var(--space-unit);
        border-bottom: 1px solid var(--tone-border);
    }

    .block-cms-cta[data-variant='band'] .cta,
    .block-cms-post_list[data-variant='list'] .entry-card {
        padding: 0;
    }

    .block-cms-post_list[data-variant='featured'] .post-list > li:first-child {
        grid-column: 1 / -1;
    }

    .block-cms-services[data-variant='pricelist'] .services {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .block-cms-services[data-variant='pricelist'] .service {
        padding-block: var(--space-unit);
        border-bottom: 1px solid var(--tone-border);
    }

    .block-cms-stats[data-variant='cards'] .stat {
        text-align: center;
    }

    .block-cms-testimonials[data-variant='quote'] .testimonial:first-child {
        grid-column: 1 / -1;
    }

    .block-cms-testimonials[data-variant='quote'] .testimonial:first-child .testimonial-quote {
        max-width: 48rem;
        font-family: var(--font-heading);
        font-size: clamp(1.375rem, 1rem + 2cqi, 2rem);
        font-weight: var(--heading-weight);
        line-height: 1.3;
    }

    .block-cms-team[data-variant='list'] .team-member .image {
        max-width: 8rem;
    }

    .block-cms-features[data-variant='bento'] .features {
        grid-template-columns: minmax(0, 1fr);
        grid-auto-flow: dense;
        align-items: stretch;
    }

    .block-cms-features[data-variant='bento'] .feature {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: end;
        min-height: calc(var(--space-unit) * 14);
        overflow: clip;
        border-radius: var(--radius-surface);
    }

    .block-cms-features[data-variant='bento'] .feature[data-tone='image'] {
        isolation: isolate;
    }

    /* below the text without positioning it, so the stretched link still spans the whole tile */
    .block-cms-features[data-variant='bento'] .feature[data-tone='image'] > .image {
        position: absolute;
        inset: 0;
        z-index: -1;
        margin: 0;
    }

    .block-cms-features[data-variant='bento'] .feature[data-tone='image'] > .image::after {
        content: '';
        position: absolute;
        inset: 0;
        background: color-mix(in srgb, var(--tone-bg) 72%, transparent);
    }

    .block-cms-features[data-variant='bento'] .feature[data-tone='image'] > .image img {
        height: 100%;
        aspect-ratio: auto;
        border-radius: 0;
        object-fit: cover;
    }

    .block-cms-features[data-variant='bento'] .feature[data-tone='image'] > .image figcaption {
        position: absolute;
        top: calc(var(--space-unit) * 0.25);
        right: calc(var(--space-unit) * 0.5);
        z-index: 1;
    }

    .block-cms-features[data-variant='bento']:not([data-block-id]) .feature-link::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 2;
    }

    .block-cms-features[data-variant='steps'] .features {
        counter-reset: cms-step;
    }

    .block-cms-features[data-variant='steps'] .feature {
        counter-increment: cms-step;
    }

    .block-cms-features[data-variant='steps'] .feature::before {
        content: counter(cms-step);
        display: grid;
        place-items: center;
        inline-size: 2.5rem;
        block-size: 2.5rem;
        margin-bottom: calc(var(--space-unit) * 0.75);
        border-radius: 50%;
        background: var(--tone-action);
        color: var(--tone-on-action);
        font-family: var(--font-heading);
        font-weight: var(--heading-weight);
        line-height: 1;
    }

    .block-cms-features[data-variant='checklist'] .features {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-unit) calc(var(--space-unit) * 2);
    }

    .block-cms-features[data-variant='checklist'] .feature {
        display: grid;
        grid-template-columns: 2.5rem minmax(0, 1fr);
        column-gap: calc(var(--space-unit) * 0.75);
        align-items: start;
    }

    .block-cms-features[data-variant='checklist'] .feature-icon {
        grid-row: 1 / span 3;
        margin: 0;
        border-radius: var(--radius-control);
        background: color-mix(in srgb, var(--tone-accent) 14%, transparent);
    }

    .block-cms-features[data-variant='checklist'] .feature > :not(.feature-icon) {
        grid-column: 2;
    }

    .block-cms-gallery[data-variant='strip'] .gallery {
        display: flex;
        gap: var(--space-unit);
        overflow-x: auto;
        padding-block-end: calc(var(--space-unit) * 0.5);
        scroll-snap-type: x mandatory;
        overscroll-behavior-x: contain;
    }

    .block-cms-gallery[data-variant='strip'] .gallery-item {
        flex: 0 0 min(calc(var(--space-unit) * 14), 80%);
        scroll-snap-align: start;
    }

    .block-cms-stats[data-variant='facts'] .stats {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
        gap: var(--space-unit);
    }

    .block-cms-stats[data-variant='facts'] .stat {
        padding: calc(var(--space-unit) * 0.75) var(--space-unit);
        border: 1px solid var(--tone-border);
        border-radius: var(--radius-control);
    }

    .block-cms-stats[data-variant='facts'] .stat-label {
        margin: 0 0 calc(var(--space-unit) * 0.25);
        font-family: var(--font-ui);
        font-size: 0.875rem;
    }

    .block-cms-stats[data-variant='facts'] .stat-value {
        margin: 0;
        font-size: 1.5rem;
    }

    .block-cms-cta[data-variant='glow'] .cta {
        position: relative;
        isolation: isolate;
        overflow: clip;
        padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 1.5);
        border-radius: var(--radius-surface);
    }

    .block-cms-cta[data-variant='glow'] .cta::before,
    .block-cms-cta[data-variant='glow'] .cta::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        pointer-events: none;
    }

    .block-cms-cta[data-variant='glow'] .cta::before {
        background:
            radial-gradient(circle at 12% 20%, color-mix(in srgb, var(--tone-accent) 30%, transparent), transparent 35%),
            radial-gradient(circle at 88% 78%, color-mix(in srgb, var(--tone-accent) 24%, transparent), transparent 40%);
    }

    .block-cms-cta[data-variant='glow'] .cta::after {
        background:
            radial-gradient(circle at 62% 8%, color-mix(in srgb, var(--tone-accent) 20%, transparent), transparent 28%),
            radial-gradient(circle at 30% 92%, color-mix(in srgb, var(--tone-accent) 16%, transparent), transparent 30%);
    }

    .block-cms-hero[data-variant='cover'] .hero-media {
        overflow: clip;
    }

    @supports (grid-template-rows: subgrid) {
        .block-cms-contacts:not([data-variant='list']) .contact {
            display: grid;
            grid-row: span 7;
            grid-template-rows: subgrid;
            row-gap: 0;
            align-self: stretch;
        }

        .block-cms-contacts:not([data-variant='list']) .contact > .image,
        .block-cms-contacts:not([data-variant='list']) .contact > .contact-avatar {
            grid-row: 1;
        }

        .block-cms-contacts:not([data-variant='list']) .contact > .contact-name {
            grid-row: 2;
        }

        .block-cms-contacts:not([data-variant='list']) .contact > .contact-role {
            grid-row: 3;
        }

        .block-cms-contacts:not([data-variant='list']) .contact > .contact-note {
            grid-row: 4;
        }

        .block-cms-contacts:not([data-variant='list']) .contact > .contact-phone {
            grid-row: 5;
        }

        .block-cms-contacts:not([data-variant='list']) .contact > .contact-email {
            grid-row: 6;
        }

        .block-cms-contacts:not([data-variant='list']) .contact > .contact-vcard {
            grid-row: 7;
        }
    }

    @container (min-width: 30rem) {
        .block-cms-features[data-variant='bento'] .features {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .block-cms-features[data-variant='bento'] .feature:first-child {
            grid-column: span 2;
        }

        .timeline-item {
            grid-template-columns: 8rem 1rem minmax(0, 1fr);
        }

        .timeline-item > * {
            grid-column: 3;
        }

        .timeline-item::before {
            grid-column: 2;
        }

        .timeline-item > .timeline-when {
            grid-row: 1 / span 2;
            grid-column: 1;
            text-align: end;
        }

        .timeline-item::after {
            inset-inline-start: calc(8rem + var(--space-unit) + 0.5rem);
        }

        .block-cms-services[data-variant='pricelist'] .service {
            display: grid;
            grid-template-columns: minmax(0, 1fr) fit-content(40%);
            column-gap: calc(var(--space-unit) * 2);
        }

        .block-cms-services[data-variant='pricelist'] .service > * {
            grid-column: 1;
        }

        .block-cms-services[data-variant='pricelist'] .service-price {
            grid-row: 1;
            grid-column: 2;
            text-align: end;
        }
    }

    @container (min-width: 36rem) {
        .block-cms-team[data-variant='list'] .team-member:has(> .image) {
            display: grid;
            grid-template-columns: 8rem minmax(0, 1fr);
            column-gap: calc(var(--space-unit) * 1.5);
            align-items: start;
        }

        .block-cms-team[data-variant='list'] .team-member > .image {
            grid-row: 1 / span 3;
            margin-bottom: 0;
        }

        .block-cms-team[data-variant='list'] .team-member > :not(.image) {
            grid-column: 2;
        }
    }

    @container (min-width: 40rem) {
        /* the list reaches one unit left of the block: the line before the first item of a row is clipped
           and its text lines up with the title */
        .block-cms-stats[data-variant='row'] .stats {
            column-gap: 0;
            margin-inline-start: calc(var(--space-unit) * -1);
            overflow-x: clip;
        }

        .block-cms-stats[data-variant='row'] .stat {
            padding-inline: var(--space-unit);
            border-inline-start: 1px solid var(--tone-border);
        }

        .block-cms-features[data-variant='list'] .features {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            column-gap: calc(var(--space-unit) * 2);
        }

        .block-cms-features[data-variant='checklist'] .features {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .block-cms-cta[data-variant='band'] .cta,
        .block-cms-cta[data-variant='glow'] .cta {
            display: grid;
            grid-template-columns: minmax(0, 1fr) fit-content(50%);
            column-gap: calc(var(--space-unit) * 2);
            align-items: center;
        }

        .block-cms-cta[data-variant='band'] .cta > .block-actions,
        .block-cms-cta[data-variant='glow'] .cta > .block-actions {
            grid-column: 2;
            grid-row: 1 / span 2;
            margin: 0;
        }

        /* dense packing lets the second column start on the first row again */
        .block-cms-contacts[data-variant='list'] .contact {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
            grid-auto-flow: dense;
            column-gap: calc(var(--space-unit) * 2);
        }

        .block-cms-contacts[data-variant='list'] .contact > :is(.contact-name, .contact-role, .contact-note) {
            grid-column: 1;
        }

        .block-cms-contacts[data-variant='list'] .contact > :is(.contact-phone, .contact-email, .contact-vcard) {
            grid-column: 2;
        }

        .block-cms-gallery[data-variant='mosaic'] .gallery {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .block-cms-gallery[data-variant='mosaic'] .gallery-item:first-child:not(:only-child) {
            grid-column: span 2;
            grid-row: span 2;
        }
    }

    @container (min-width: 48rem) {
        .block-cms-features[data-variant='bento'] .features {
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }

        .block-cms-features[data-variant='bento'] .feature:first-child {
            grid-row: span 2;
        }

        .block-cms-features[data-variant='bento'] .feature:nth-child(2) {
            grid-column: span 2;
        }

        .block-cms-hero[data-variant='split'] .hero:has(> .hero-media, > .hero-slides) {
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
            gap: calc(var(--space-unit) * 2.5);
            align-items: center;
        }

        .block-cms-hero[data-variant='split'] .hero-content {
            grid-row: 1;
            grid-column: 1;
        }
    }

    @keyframes cms-hero-zoom {
        from {
            scale: 1.2;
        }

        to {
            scale: 1.12;
        }
    }

    /* 5% of the photo stays inside the margin its 1.12 scale leaves, so no edge shows */
    @keyframes cms-hero-parallax {
        from {
            translate: 0 0;
        }

        to {
            translate: 0 5%;
        }
    }

    @keyframes cms-hero-rise {
        from {
            translate: 0 1.125rem;
        }

        to {
            translate: 0 0;
        }
    }

    @keyframes cms-cta-glow {
        from {
            opacity: 0.55;
            translate: 0 0;
        }

        to {
            opacity: 1;
            translate: 2% -3%;
        }
    }

    @media (prefers-reduced-motion: no-preference) {
        html[data-motion='subtle'] .block-cms-hero[data-variant='cover'] .hero-media img {
            animation: cms-hero-zoom 5s ease-out both;
        }

        @supports (animation-timeline: scroll()) {
            html[data-motion='subtle'] .block-cms-hero[data-variant='cover'] .hero-media img {
                animation: cms-hero-zoom 5s ease-out both, cms-hero-parallax auto linear both;
                animation-timeline: auto, scroll(root);
                animation-range: normal, 0 40rem;
            }
        }

        html[data-motion='subtle'] .hero-content > * {
            animation: cms-hero-rise 0.6s ease-out both;
        }

        html[data-motion='subtle'] .hero-content > :nth-child(2) {
            animation-delay: 0.08s;
        }

        html[data-motion='subtle'] .hero-content > :nth-child(3) {
            animation-delay: 0.14s;
        }

        html[data-motion='subtle'] .hero-content > :nth-child(4) {
            animation-delay: 0.2s;
        }

        html[data-motion='subtle'] .block-cms-features[data-variant='bento'] .feature[data-tone='image'] > .image img {
            transition: scale 0.4s ease-out;
        }

        html[data-motion='subtle'] .block-cms-features[data-variant='bento'] .feature[data-tone='image']:hover > .image img,
        html[data-motion='subtle'] .block-cms-features[data-variant='bento'] .feature[data-tone='image']:focus-within > .image img {
            scale: 1.05;
        }

        /* two alternating runs of 2.5 s end within the 5 s WCAG 2.2.2 allows motion without a pause control */
        html[data-motion='subtle'] .block-cms-cta[data-variant='glow'] .cta::before,
        html[data-motion='subtle'] .block-cms-cta[data-variant='glow'] .cta::after {
            animation: cms-cta-glow 2.5s ease-in-out 2 alternate both;
        }

        html[data-motion='subtle'] .block-cms-cta[data-variant='glow'] .cta::after {
            animation-direction: alternate-reverse;
        }
    }
}