@layer components {
    .cb-frame {
        background: var(--onepager-section-bg);
        color: var(--onepager-section-text);
    }

    .cb-frame__container {
        width: 100%;
        max-width: var(--container-max);
        margin-inline: auto;
        /* padding-inline: var(--container-padding); */
    }

    .cb-frame--width-narrow .cb-frame__container {
        max-width: 48rem;
    }

    .cb-frame--width-wide .cb-frame__container {
        max-width: 86rem;
    }

    .cb-frame--width-full .cb-frame__container {
        max-width: none;
    }

    .cb-frame--bg-none {
        background: transparent;
    }

    .cb-frame--bg-light {
        background: var(--onepager-section-bg-alt);
    }

    .cb-frame--bg-accent {
        background: var(--onepager-section-bg-accent);
    }

    .cb-frame--bg-dark {
        background: color-mix(in srgb, var(--color-bg), #000000 14%);
        color: var(--onepager-section-text-invert);
    }

    .cb-frame--bg-image {
        position: relative;
        background: var(--onepager-overlay-color);
        color: var(--onepager-section-text-invert);
        background-image: var(--cb-bg-image);
        background-size: cover;
        background-position: center;
    }

    .cb-frame--bg-image::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          to bottom,
          color-mix(in srgb, var(--onepager-overlay-color-soft), transparent 10%),
          color-mix(in srgb, var(--onepager-overlay-color), transparent 55%)
        );
        pointer-events: none;
    }

    .cb-frame--bg-image .cb-frame__container {
        position: relative;
        z-index: 1;
    }

    .cb-frame--py-compact {
        padding-block: var(--space-6);
    }

    .cb-frame--py-default {
        padding-block: var(--section-padding-y);
    }

    .cb-frame--py-spacious {
        padding-block: calc(var(--section-padding-y) + var(--space-8));
    }

    /* .cb-frame--px-compact .cb-frame__container {
        padding-inline: var(--space-4);
    }

    .cb-frame--px-default .cb-frame__container {
        padding-inline: var(--container-padding);
    } 

    .cb-frame--px-spacious .cb-frame__container {
        padding-inline: clamp(1.25rem, 5vw, 3rem);
    } */

    .cb-headline {
        margin: 0 0 var(--space-6);
    }

    .cb-headline__title {
        margin: 0;
    }

    .cb-headline__subtitle {
        margin: var(--space-2) 0 0;
        color: var(--onepager-section-text-muted);
    }

    .cb-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-3);
        margin-top: var(--space-6);
    }

    .onepager-icon {
        width: 1.25rem;
        height: 1.25rem;
        display: inline-block;
        flex: none;
        color: currentColor;
    }

    .onepager-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-2);
        padding: 0.75rem 1.1rem;
        border-radius: var(--radius-full);
        border: 1px solid var(--color-border);
        background: var(--color-surface);
        color: var(--color-text);
        text-decoration: none;
        font-weight: var(--font-weight-semibold);
        box-shadow: var(--shadow-sm);
        transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease;
    }

    .onepager-button:hover,
    .onepager-button:focus-visible {
        background: color-mix(in srgb, var(--color-surface), var(--color-primary) 8%);
        border-color: color-mix(in srgb, var(--color-border), var(--color-primary) 45%);
        transform: translateY(-1px);
    }

    .onepager-button--primary {
        background: var(--color-primary);
        border-color: transparent;
        color: var(--color-text-invert);
    }

    .onepager-button--primary:hover,
    .onepager-button--primary:focus-visible {
        background: var(--color-primary-hover);
        border-color: transparent;
    }

    .onepager-container {
        position: relative;
    }

    .onepager-container * {
        margin: 0;
    }

    .breadcrumb {
        list-style: none;
        margin: 0 0 var(--space-4);
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);
        align-items: center;
        font-size: var(--font-size-small);
    }

    .breadcrumb li + li::before {
        content: "/";
        margin-right: var(--space-2);
        color: var(--color-muted);
    }

    /* Container-CE: Raster (frame / Gridelements-Klassen bleiben erhalten) */
    .c-hero__inner,
    .c-hero-startseite__inner,
    .c-columns-3x2__inner {
        display: grid;
        gap: var(--space-6);
        width: 100%;
        max-width: var(--container-max);
        margin-inline: auto;
        padding-inline: var(--container-padding);
    }

    .c-hero__inner {
        grid-template-columns: 1fr;
    }

    @media (min-width: 768px) {
        .c-hero__inner {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    .c-hero-startseite__inner {
        grid-template-columns: 1fr;
    }

    @media (min-width: 768px) {
        .c-hero-startseite__inner {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .c-hero-startseite__slot--1 {
            grid-column: 1 / -1;
        }
    }

    .c-columns-3x2__inner {
        grid-template-columns: 1fr;
    }

    @media (min-width: 768px) {
        .c-columns-3x2__inner {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    }

    .onepager-section {
        position: relative;
        min-height: 100vh;
        padding: var(--section-padding-y) var(--container-padding);
        scroll-margin-top: calc(var(--onepager-nav-offset) + 5rem);
    }

    .onepager-section__overlay {
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 0;
    }

    .section-content {
        position: relative;
        z-index: 1;
        max-width: var(--container-max);
        margin: 0 auto;
    }

    .onepager-empty {
        text-align: center;
        padding: var(--space-16) var(--container-padding);
        color: var(--color-muted);
    }

    @media (max-width: 768px) {
        .onepager-section {
            min-height: auto;
        }
    }
}