@layer reset, tokens, base, vendor, grid, components, tt_content, plugins, page, utilities, overrides;

/* #region reset =========================================================== */
@layer reset {
    *,
    *::before,
    *::after {
        box-sizing: border-box;
        -webkit-tap-highlight-color: transparent;
    }

    * {
        margin: 0;
    }

    html {
        tab-size: 4;
    }

    input,
    button,
    textarea,
    select {
        font: inherit;
        color: inherit;
        letter-spacing: inherit;
    }

    img {
        height: auto;
    }

    iframe {
        border: 0;
    }

    img,
    picture,
    video,
    canvas,
    svg {
        max-width: 100%;
    }

    [hidden] {
        display: none;
    }

    @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
            scroll-behavior: auto !important;
        }
    }
}
/* #endregion */

/* #region tokens ========================================================== */
@layer tokens {
    :root {
        color-scheme: light;

        /* --- FARBE --- */
        --background: light-dark(#fff, #fff);
        --foreground: light-dark(#001844, #001844);

        --card: light-dark(#fff, #fff);
        --card-foreground: light-dark(#001844, #001844);

        --primary: light-dark(#001844, #001844);
        --primary-foreground: light-dark(#fafafa, #18181b);

        --secondary: light-dark(#eee8df, #eee8df);
        --secondary-foreground: light-dark(#001844, #001844);

        --action: light-dark(#005FC3, #005FC3);
        --action-foreground: light-dark(#fafafa, #fafafa);

        --promotion: light-dark(#22cfa1, #22cfa1);
        --promotion-foreground: var(--primary);

        --promotion-coral: light-dark(#ff7662, #ff7662);
        --promotion-yellow: light-dark(#fff493, #fff493);

        --muted: light-dark(#f4f4f5, #27272a);
        --muted-foreground: light-dark(#71717a, #a1a1aa);

        --faint: light-dark(#fafafa, #1e1e21);
        --faint-foreground: light-dark(#a1a1aa, #71717a);

        --accent: light-dark(#f4f4f5, #27272a);
        --danger: light-dark(#d32f2f, #f4807b);
        --danger-foreground: light-dark(#fafafa, #18181b);
        --success: light-dark(#008032, #6cc070);
        --success-foreground: light-dark(#fafafa, #18181b);
        --warning: light-dark(#a65b00, #f0a030);
        --warning-foreground: #09090b;

        --border: light-dark(#d4d4d8, #52525b);
        --input: light-dark(#d4d4d8, #52525b);
        --ring: light-dark(#574747, #d4d4d8);

        /* --- ELEMENTE --- */
        --nav: light-dark(rgb(249 248 243 / 1), rgb(249 248 243 / 1));
        --nav-hover: light-dark(rgb(216 211 199 / 1), rgb(216 211 199 / 1));
        --nav-hidden: light-dark(rgb(249 248 243 / 0.78), rgb(249 248 243 / 0.78));
        --nav-border: light-dark(rgb(255 255 255 / 0.8), rgb(255 255 255 / 0.8));
        --nav-bar: light-dark(rgb(255 255 255 / 0.8), rgb(255 255 255 / 0.8));
        --nav-backdrop: saturate(1.8) blur(20px);
        --nav-foreground: var(--primary);

        --card-surface: light-dark(#f3f2ee, #f3f2ee);
        --nav-separator: light-dark(rgb(229 226 216 / 1), rgb(229 226 216 / 1));

        --surface: var(--nav);

        /* --- BREADCRUMB --- */
        --breadcrumb-font-size: var(--text-7);
        --breadcrumb-font-size-mobile: var(--text-8);

        /* --- FORM FIELDS --- */
        --field-pad-block: var(--space-4);
        --field-pad-inline: var(--space-5);
        --field-font-size: var(--text-6);
        --field-label-size: var(--text-8);
        --field-border: var(--primary);
        --field-bg: var(--background);
        --field-ring: rgb(from var(--action) r g b / 0.3);
        --field-ring-width: 4px;

        /* --- SPACING --- */
        --space-1: 0.25rem;
        --space-2: 0.5rem;
        --space-3: 0.75rem;
        --space-4: 1rem;
        --space-5: 1.25rem;
        --space-6: 1.5rem;
        --space-8: 2rem;
        --space-10: 2.5rem;
        --space-12: 3rem;
        --space-14: 3.5rem;
        --space-16: 4rem;
        --space-18: 4.5rem;
        --space-24: 6rem;
        --space-36: 9rem;

        /* --- VERTIKALER RHYTHMUS --- */
        --space-content: var(--space-24);
        --flow-gap: var(--space-content);

        --section-pad: var(--space-content);
        --box-pad: var(--space-8);

        --space-step-none: 0px;
        --space-step-small: var(--space-12);
        --space-step-medium: var(--space-content);
        --space-step-large: var(--space-36);

        --radius-small: 0.125rem;
        --radius-medium: 0.375rem;
        --radius-large: 0.75rem;
        --radius-xlarge: 1.1rem;
        --radius-full: 9999px;

        --bar-height: 0.5rem;

        /* --- IKONEN --- */
        --icon-caret-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");
        --icon-caret-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z'/%3E%3C/svg%3E");
        --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");
        --icon-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z'/%3E%3C/svg%3E");
        --icon-check-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm45.66,85.66-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");

        /* --- FONT --- */
        --font-sans: Inter, sans-serif;
        --font-sans-variable: InterVariable, sans-serif;
        --font-mono: ui-monospace, Consolas, monospace;

        --text-1: clamp(2.25rem, 1.25rem + 2.5vw, 3.5rem);
        --text-2: clamp(1.75rem, 1.15rem + 1.5vw, 2.5rem);
        --text-3: clamp(1.5rem, 1.1rem + 1vw, 2rem);
        --text-4: clamp(1.375rem, 1.1rem + 0.75vw, 1.5rem);
        --text-5: 1.25rem;
        --text-6: 1.125rem;
        --text-7: 0.875rem;
        --text-8: 0.75rem;
        --text-regular: var(--text-6);

        --leading-normal: 1.5;
        --leading-tight: 1.25;

        --font-normal: 400;
        --font-medium: 500;
        --font-semibold: 600;
        --font-bold: 800;

        /* --- SHADOW --- */
        --shadow-small: 0 1px 2px 0 rgb(0 0 0 / 0.05);
        --shadow-medium: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
        --shadow-large: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);

        --shadow-nav: 0 5px 15px rgb(0 0 0 / 0.05);
        --shadow-dropdown: 0 8px 32px rgb(0 0 0 / 0.14);

        /* --- VERLAUF --- */
        --fade-primary: linear-gradient(to top,
            var(--primary) 0%,
            rgb(from var(--primary) r g b / 0.85) 45%,
            rgb(from var(--primary) r g b / 0) 100%);

        /* --- ANIMATION --- */
        --ease: cubic-bezier(0.4, 0, 0.2, 1);
        --transition-quick: 150ms var(--ease);
        --transition-fast: 200ms var(--ease);
        --transition-medium: 250ms var(--ease);
        --transition-slow: 350ms var(--ease);
        --transition: 500ms var(--ease);

        /* --- Z-INDEX --- */
        --z-raised: 10;
        --z-dropdown: 50;
        --z-floating: 99;
        --z-header: 100;
        --z-modal: 200;
        --z-overlay: 300;

        /* --- LAYOUT --- */
        --grid-cols: 12;
        --grid-gap: 2rem;
        --nav-max: 1080px;
        --container-max: 1360px;
        --container-pad: 1rem;

        --nav-btn-size: 40px;
        --nav-top: var(--space-8);
        --nav-edge-gap: 16px;
        --nav-col-width: 280px;
        --nav-panel-width: 480px;
        --nav-panel-min-h: 480px;
        --nav-dropdown-max-h: min(72vh, 620px);

        --bp-md: 768px;
        --bp-nav: 1120px;
    }

    @media (width <= 1120px) {
        :root {
            --nav-top: var(--space-4);
        }
    }

    @media (width <= 768px) {
        :root {
            --space-content: var(--space-14);
            --box-pad: var(--space-6);

            --space-step-small: var(--space-8);
            --space-step-large: var(--space-24);
        }
    }
}
/* #endregion */

/* #region base ============================================================ */
@layer base {
    :root {
        font-family: var(--font-sans);
        line-height: var(--leading-normal);
        color: var(--foreground);
    }

    body {
        font-size: var(--text-regular);
        background-color: var(--background);
        color: var(--foreground);
        -webkit-font-smoothing: antialiased;
    }

    @media (prefers-reduced-motion: no-preference) {
        :root {
            scroll-behavior: smooth;
        }
    }

    @supports (font-variation-settings: normal) {
        :root {
            font-family: var(--font-sans-variable);
            font-optical-sizing: auto;
        }
    }

    ::selection {
        background-color: var(--primary);
        color: var(--primary-foreground);
    }

    p,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        overflow-wrap: break-word;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-weight: var(--font-bold);
        line-height: var(--leading-tight);

        &:first-child {
            margin-block-start: 0;
        }
    }

    h1 {
        font-size: var(--text-1);
        margin-block: var(--space-10) var(--space-6);
    }

    h2 {
        font-size: var(--text-2);
        margin-block: var(--space-8) var(--space-5);
    }

    h3 {
        font-size: var(--text-3);
        margin-block: var(--space-6) var(--space-4);
    }

    h4 {
        font-size: var(--text-4);
        margin-block: var(--space-5) var(--space-3);
    }

    h5 {
        font-size: var(--text-5);
        margin-block: var(--space-4) var(--space-2);
    }

    h6 {
        font-size: var(--text-regular);
        margin-block: var(--space-4) var(--space-2);
    }

    h1:has(+ h2),
    header:has(+ h2) > h1:last-child {
        margin-block-end: var(--space-3);
    }

    h1:has(+ p),
    header:has(+ p) > h1:last-child {
        margin-block-end: var(--space-3);
    }

    h1 + h2,
    header:has(> h1:last-child) + h2 {
        margin-block-start: 0;
    }

    p {
        margin-block-end: var(--space-4);

        &:last-child {
            margin-block-end: 0;
        }
    }

    :is(.card__text, .boatvertizer-detail__text, .news-item__teaser, .news-detail__text, .contact-form__message) > :first-child {
        margin-block-start: 0;
    }

    :is(.card__text, .boatvertizer-detail__text, .news-item__teaser, .news-detail__text) > :last-child {
        margin-block-end: 0;
    }

    a {
        color: var(--primary);
        text-decoration: underline;
        text-underline-offset: 2px;
        transition: color var(--transition-fast);

        &:hover {
            color: rgb(from var(--primary) r g b / 0.8);
        }
    }

    strong,
    b {
        font-weight: var(--font-semibold);
    }

    em,
    i {
        font-style: italic;
    }

    small {
        font-size: var(--text-7);
    }

    code {
        font-family: var(--font-mono);
        font-size: 0.875em;
        padding: calc(var(--space-1) / 2) var(--space-1);
        background-color: var(--faint);
        border-radius: var(--radius-small);
    }

    pre {
        font-family: var(--font-mono);
        padding: var(--space-4);
        background-color: var(--faint);
        border-radius: var(--radius-medium);
        overflow-x: auto;
        margin-block-end: var(--space-4);

        code {
            padding: 0;
            background: none;
            border-radius: 0;
        }
    }

    blockquote {
        border-inline-start: 4px solid var(--border);
        padding-inline-start: var(--space-4);
        margin-block: var(--space-4);
        color: var(--muted-foreground);
        font-style: italic;
    }

    hr {
        border: none;
        border-top: 1px solid var(--border);
        margin-block: var(--space-2);
    }

    ul,
    ol {
        padding-inline-start: var(--space-6);
        margin-block-end: var(--space-4);
    }

    ul {
        list-style-type: disc;
    }

    ol {
        list-style-type: decimal;
    }

    li {
        margin-block-end: var(--space-1);
    }

    mark {
        background-color: rgb(from var(--warning) r g b / 0.3);
        padding: calc(var(--space-1) / 2) var(--space-1);
        border-radius: var(--radius-small);
    }

    :focus-visible {
        outline: 2px solid var(--ring);
        outline-offset: 2px;
    }

    :disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }
}
/* #endregion */

/* #region vendor ========================================================== */
@layer vendor {
    /* ---- fluid_styled_content ------------------------------------------ */
    .ce-align-left { text-align: left; }
    .ce-align-center { text-align: center; }
    .ce-align-right { text-align: right; }

    .ce-table td, .ce-table th { vertical-align: top; }

    .ce-textpic, .ce-image, .ce-nowrap .ce-bodytext, .ce-gallery, .ce-row, .ce-uploads li, .ce-uploads div { overflow: hidden; }

    .ce-left .ce-gallery, .ce-column { float: left; }
    .ce-center .ce-outer { position: relative; float: right; right: 50%; }
    .ce-center .ce-inner { position: relative; float: right; right: -50%; }
    .ce-right .ce-gallery { float: right; }

    .ce-gallery figure { display: table; margin: 0; }
    .ce-gallery figcaption { display: table-caption; caption-side: bottom; }
    .ce-gallery img { display: block; }
    .ce-gallery iframe { border-width: 0; }
    .ce-border img,
    .ce-border iframe {
        border: 4px solid #000000;
        padding: 0px;
    }

    .ce-intext.ce-right .ce-gallery, .ce-intext.ce-left .ce-gallery, .ce-above .ce-gallery {
        margin-bottom: 30px;
    }
    .ce-image .ce-gallery { margin-bottom: 0; }
    .ce-intext.ce-right .ce-gallery { margin-left: 30px; }
    .ce-intext.ce-left .ce-gallery { margin-right: 30px; }
    .ce-below .ce-gallery { margin-top: 30px; }

    .ce-column { margin-right: 30px; }
    .ce-column:last-child { margin-right: 0; }

    .ce-row { margin-bottom: 30px; }
    .ce-row:last-child { margin-bottom: 0; }

    .ce-above .ce-bodytext { clear: both; }

    .ce-intext.ce-left ol, .ce-intext.ce-left ul { padding-left: 40px; overflow: auto; }

    /* Headline */
    .ce-headline-left { text-align: left; }
    .ce-headline-center { text-align: center; }
    .ce-headline-right { text-align: right; }

    /* Uploads */
    .ce-uploads { margin: 0; padding: 0; }
    .ce-uploads li { list-style: none outside none; margin: 1em 0; }
    .ce-uploads img { float: left; padding-right: 1em; vertical-align: top; }
    .ce-uploads span { display: block; }

    /* Table */
    .ce-table { width: 100%; max-width: 100%; }
    .ce-table th, .ce-table td { padding: 0.5em 0.75em; vertical-align: top; }
    .ce-table thead th { border-bottom: 2px solid #dadada; }
    .ce-table th, .ce-table td { border-top: 1px solid #dadada; }
    .ce-table-striped tbody tr:nth-of-type(odd) { background-color: rgba(0,0,0,.05); }
    .ce-table-bordered th, .ce-table-bordered td { border: 1px solid #dadada; }

    /* Frame */
    .frame-ruler-before:before { content: ''; display: block; border-top: 1px solid rgba(0,0,0,0.25); margin-bottom: 2em; }
    .frame-ruler-after:after { content: ''; display: block; border-bottom: 1px solid rgba(0,0,0,0.25); margin-top: 2em; }
}
/* #endregion */

/* #region grid ============================================================ */
@layer grid {
    @layer wrapper, columns;

    @layer wrapper {
        .grid {
            width: 100%;
            margin-inline: auto;
            padding-inline: var(--container-pad);
        }

        :is(.grid, .container) .grid {
            max-width: var(--container-max);
            padding-inline: 0;
        }
    }

    @layer columns {
        .row {
            display: grid;
            grid-template-columns: repeat(var(--grid-cols), 1fr);
            gap: var(--grid-gap);
            width: 100%;
        }

        .col,
        [class*="col-"] {
            grid-column-end: span var(--span, var(--grid-cols));
        }

        .col-1  { --span: 1; }
        .col-2  { --span: 2; }
        .col-3  { --span: 3; }
        .col-4  { --span: 4; }
        .col-5  { --span: 5; }
        .col-6  { --span: 6; }
        .col-7  { --span: 7; }
        .col-8  { --span: 8; }
        .col-9  { --span: 9; }
        .col-10 { --span: 10; }
        .col-11 { --span: 11; }
        .col-12 { --span: 12; }

        .offset-1 { grid-column-start: 2; }
        .offset-2 { grid-column-start: 3; }
        .offset-3 { grid-column-start: 4; }
        .offset-4 { grid-column-start: 5; }
        .offset-5 { grid-column-start: 6; }
        .offset-6 { grid-column-start: 7; }

        .col-end {
            grid-column-start: span var(--span, 1);
            grid-column-end: -1;
        }

        @media (width <= 768px) {
            .row {
                --grid-cols: 4;
                --grid-gap: 1rem;
            }

            .col,
            [class*="col-"] {
                --span: 4;
            }

            [class*="offset-"] {
                grid-column-start: auto;
            }
        }
    }
}
/* #endregion */

/* #region page ============================================================ */
@layer page {
    @layer header, nav, banner, content, footer, consent, float;

    /* ---- page.header ---------------------------------------------------- */
    @layer header {
        #main-navigation {
            position: fixed;
            z-index: var(--z-header);
            inset: var(--nav-top) 0 auto 0;
            transition: top var(--transition);
        }

        .navigation-wrapper {
            position: relative;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            gap: var(--space-4);

            width: calc(100% - 2 * var(--nav-edge-gap));
            max-width: var(--nav-max);
            margin-inline: auto;
            padding: 5px;

            border: 1px solid transparent;
            color: var(--nav-foreground);
        }

        .navigation-wrapper::before {
            content: "";
            position: absolute;
            inset: -1px;
            z-index: -1;
            background: var(--nav-bar);
            border: 1px solid var(--nav-border);
            border-radius: var(--radius-full);
            box-shadow: var(--shadow-nav);
            -webkit-backdrop-filter: var(--nav-backdrop);
            backdrop-filter: var(--nav-backdrop);
            pointer-events: none;
        }

        #main-navigation.main-header--not-top,
        #main-navigation.main-header--not-pinned {
            top: -200px;
        }

        #main-navigation.main-header--top,
        #main-navigation.main-header--pinned {
            top: var(--nav-top);
        }

        .logo-wrapper {
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 10px 22px 10px 10px;

            background-color: var(--primary);
            border-radius: var(--radius-full);

            transition: opacity var(--transition-fast), transform var(--transition-fast);
        }

        a.logo-wrapper:hover {
            opacity: 0.9;
            transform: scale(1.02);
        }

        a.logo-wrapper:active {
            opacity: 0.9;
            transform: scale(0.98);
        }
    }

    /* ---- page.nav ------------------------------------------------------- */
    @layer nav {
        @media (1120px < width <= 1180px) {
            :root {
                --nav-col-width: 240px;
                --nav-panel-width: 320px;
            }
        }

        @keyframes nav-fade-in {
            from { opacity: 0; }
            to   { opacity: 1; }
        }

        /* -- Hamburger -- */
        .nav-hamburger {
            display: none;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 5px;
            width: var(--nav-btn-size);
            height: var(--nav-btn-size);
            padding: 0;
            background: none;
            border: none;
            border-radius: var(--radius-full);
            cursor: pointer;
            flex-shrink: 0;
            transition: background var(--transition-fast);
        }

        .nav-hamburger:hover {
            background: var(--secondary);
        }

        .nav-hamburger span {
            display: block;
            width: 20px;
            height: 2px;
            background: var(--foreground);
            border-radius: 2px;
            transform-origin: center;
            transition: transform var(--transition-medium),
                        opacity var(--transition-medium),
                        width var(--transition-medium);
        }

        .nav-hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
        .nav-hamburger.is-open span:nth-child(2) { opacity: 0; width: 0; }
        .nav-hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

        #main-navigation:has(#nav-overlay.is-open) {
            top: var(--nav-top);
        }

        /* -- Hauptebene -- */
        #main-navigation nav {
            flex-grow: 1;
        }

        .nav-main {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            padding: 0;
            margin: 0;
            list-style: none;
        }

        .nav-main__item {
            list-style: none;
            margin-block-end: 0;
            position: static;
        }

        .nav-main__row,
        .nav-dropdown__row {
            display: contents;
        }

        .nav-main__link {
            display: inline-flex;
            align-items: center;
            gap: var(--space-2);
            padding: var(--space-3) var(--space-4);
            border-radius: var(--radius-full);
            font-size: var(--text-6);
            color: var(--nav-foreground);
            text-decoration: none;
            white-space: nowrap;
            transition: background var(--transition-fast), color var(--transition-fast);
        }

        .nav-main__link:hover,
        .nav-main__item.is-open .nav-main__link {
            background: var(--nav-hover);
        }

        .nav-main__item.is-current .nav-main__link {
            text-decoration: underline;
            text-underline-offset: 3px;
        }

        button.nav-main__link {
            background: none;
            border: 0;
            cursor: pointer;
        }

        :is(.nav-main__link, .nav-toggle) .nav-arrow {
            flex-shrink: 0;
            transition: transform var(--transition-medium);
        }

        .nav-main__item.is-open > .nav-main__row .nav-arrow {
            transform: rotate(180deg);
        }

        .nav-main__item--meta .nav-arrow {
            display: none;
        }

        .nav-main__item--meta {
            margin-inline-start: var(--space-3);
            padding-inline-start: var(--space-2);
            border-inline-start: 1px solid var(--nav-separator);
        }
        .nav-main__item--meta button.nav-main__link {
            padding-inline-start: var(--space-5);
            padding-inline-end: var(--space-5);
        }

        /* -- Aufklapp-Buttons -- */
        .nav-toggle {
            display: none;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            width: 44px;
            height: 44px;
            padding: 0;
            background: none;
            border: none;
            border-radius: var(--radius-full);
            color: inherit;
            cursor: pointer;
        }

        /* -- Mega-Dropdown -- */
        .nav-dropdown {
            position: absolute;
            top: 100%;
            left: 50%;
            z-index: var(--z-dropdown);

            width: min(var(--nav-max), calc(100vw - 2 * var(--nav-edge-gap)));
            padding-top: 10px;

            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transform: translateX(-50%) translateY(-6px);

            transition: opacity var(--transition-fast),
                        transform var(--transition-fast),
                        visibility 0s 200ms;
        }

        .nav-main__item.is-open > .nav-dropdown {
            opacity: 1;
            visibility: visible;
            transform: translateX(-50%) translateY(0);
            transition: opacity var(--transition-fast),
                        transform var(--transition-fast),
                        visibility 0s;
        }

        .nav-dropdown__inner {
            display: flex;
            align-items: stretch;
            margin-inline-start: var(--nav-dropdown-offset, 0px);
            width: var(--nav-col-width);
            max-width: calc(100vw - 2 * var(--nav-edge-gap));
            max-height: var(--nav-dropdown-max-h);
            transition: width var(--transition-medium);
            background: var(--nav);
            border: 1px solid var(--nav-border);
            border-radius: var(--radius-large);
            box-shadow: var(--shadow-dropdown);
            overflow: hidden;
            pointer-events: none;
        }

        .nav-main__item.is-open .nav-dropdown__inner {
            pointer-events: auto;
        }

        .nav-dropdown__list,
        .nav-dropdown__sublists,
        .nav-dropdown__panels {
            scrollbar-width: thin;
            scrollbar-color: var(--border) transparent;
            overscroll-behavior: contain;
        }

        :is(.nav-dropdown__list, .nav-dropdown__sublist) {
            padding: var(--space-3) var(--space-2);
            margin: 0;
            list-style: none;
        }

        .nav-dropdown__list {
            flex: 0 0 var(--nav-col-width);
            overflow-y: auto;
        }

        .nav-dropdown__sublists {
            flex: 0 0 var(--nav-col-width);
            overflow-x: hidden;
            overflow-y: auto;
            box-shadow: inset 1px 0 0 var(--border);
        }

        .nav-dropdown__subwrap {
            display: none;
            width: var(--nav-col-width);
        }

        .nav-dropdown__subwrap.is-active {
            display: block;
            animation: nav-fade-in var(--transition-fast) both;
        }

        .nav-dropdown__item,
        .nav-dropdown__subitem {
            margin: 0;
            list-style: none;
        }

        :is(.nav-dropdown__link, .nav-dropdown__sublink) {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: var(--space-2);
            padding: var(--space-2) var(--space-4);
            font-size: var(--text-6);
            color: var(--foreground);
            text-decoration: none;
            border-radius: var(--radius-full);
            transition: background var(--transition-fast), color var(--transition-fast);
        }

        :is(.nav-dropdown__link, .nav-dropdown__sublink):hover,
        .nav-dropdown__item.is-active .nav-dropdown__link,
        .nav-dropdown__subitem.is-active .nav-dropdown__sublink {
            background: var(--nav-hover);
            color: var(--nav-foreground);
        }

        :is(.nav-dropdown__item, .nav-dropdown__subitem).is-current .nav-label {
            text-decoration: underline;
            text-underline-offset: 3px;
        }

        .nav-dropdown__item.has-children .nav-dropdown__link::after,
        .nav-dropdown__sublink::after {
            content: "";
            flex-shrink: 0;
            width: 14px;
            height: 14px;
            background: currentColor;
            mask: var(--icon-caret-right) center / contain no-repeat;
            opacity: 0;
            transition: opacity var(--transition-quick), transform var(--transition-quick);
        }

        :is(.nav-dropdown__item, .nav-dropdown__subitem).is-active :is(.nav-dropdown__link, .nav-dropdown__sublink)::after,
        :is(.nav-dropdown__link, .nav-dropdown__sublink):hover::after {
            opacity: 1;
            transform: translateX(2px);
        }

        /* Panels (rechts) */
        .nav-dropdown__panels {
            flex: 0 0 var(--nav-panel-width);
            overflow-x: hidden;
            overflow-y: auto;
            background: var(--primary);
        }

        @media (width > 1120px) {
            .nav-dropdown__inner:has(.nav-dropdown__subwrap.is-active) {
                width: calc(2 * var(--nav-col-width));
            }

            .nav-dropdown__inner:has(.nav-dropdown__panel.is-active) {
                width: calc(2 * var(--nav-col-width) + var(--nav-panel-width));
                min-height: min(var(--nav-dropdown-max-h), var(--nav-panel-min-h));
            }

            .nav-dropdown__inner:has(.nav-dropdown__panel.is-active):not(:has(.nav-dropdown__subwrap.is-active)) {
                width: calc(var(--nav-col-width) + var(--nav-panel-width));
            }

            .nav-dropdown__inner:not(:has(.nav-dropdown__subwrap.is-active)):has(.nav-dropdown__panel.is-active) .nav-dropdown__sublists {
                display: none;
            }
        }

        .nav-dropdown__panel {
            display: none;
            width: var(--nav-panel-width);
            min-height: 100%;
        }

        .nav-dropdown__panel.is-active {
            display: flex;
            animation: nav-fade-in var(--transition-fast) both;
        }

        .nav-dropdown__panel-link {
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            flex: 1;
            overflow: hidden;
            color: var(--primary-foreground);
            text-decoration: none;
        }

        .nav-dropdown__panel-image {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform var(--transition-slow);
        }

        .nav-dropdown__panel-link:hover .nav-dropdown__panel-image {
            transform: scale(1.03);
        }

        .nav-dropdown__panel-body {
            position: relative;
            display: flex;
            flex-direction: column;
            gap: var(--space-2);
            padding: var(--space-16) var(--space-8) var(--space-8);
            background: var(--fade-primary);
        }

        .nav-dropdown__panel-title {
            font-size: var(--text-4);
            line-height: 1.2;
        }

        .nav-dropdown__panel-desc {
            color: rgb(from var(--primary-foreground) r g b / 0.8);
            font-size: var(--text-7);
            max-width: 42ch;
        }

        .nav-dropdown__panel-logo {
            --banner-logo-h: 2.25rem;
            --banner-logo-pad: var(--space-3) var(--space-4);
            align-self: flex-end;
            max-width: 60%;
            margin-block-start: var(--space-4);
        }

        .nav-dropdown__panel-link:focus-visible {
            outline: 2px solid var(--primary-foreground);
            outline-offset: -4px;
        }

        /* -- Mobile -- */
        @media (width <= 1120px) {
            body:has(#nav-overlay.is-open) {
                overflow: hidden;
            }

            .logo-wrapper {
                padding: 6px 16px 6px 6px;
            }

            .logo-wrapper img {
                width: auto;
                height: 32px;
            }

            .navigation-wrapper::before {
                z-index: calc(var(--z-overlay) + 1);
            }

            .logo-wrapper,
            .nav-hamburger {
                position: relative;
                z-index: calc(var(--z-overlay) + 2);
            }

            .nav-hamburger {
                display: flex;
                margin-inline-end: var(--space-2);
            }

            .nav-arrow {
                width: 18px;
                height: 18px;
            }

            .nav-toggle {
                display: inline-flex;
            }

            nav#nav-overlay {
                position: fixed;
                inset: 0;
                z-index: var(--z-overlay);
                display: flex;
                flex-direction: column;
                padding: calc(var(--nav-top) + 56px + var(--space-6)) var(--space-5) var(--space-12);
                background: var(--nav);
                overflow-y: auto;
                overscroll-behavior: contain;
                transform: translateX(100%);
                visibility: hidden;
                transition: transform var(--transition-slow), visibility 0s 350ms;
            }

            nav#nav-overlay.is-open {
                transform: translateX(0);
                visibility: visible;
                transition: transform var(--transition-slow), visibility 0s;
            }

            .nav-main {
                flex-direction: column;
                align-items: stretch;
                gap: 0;
            }

            .nav-main__item {
                border-bottom: 1px solid var(--border);
            }

            .nav-main__row,
            .nav-dropdown__row {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: var(--space-2);
            }

            .nav-main__link {
                flex: 1;
                padding: var(--space-4) var(--space-2);
                border-radius: 0;
                font-size: var(--text-5);
                white-space: normal;
            }

            .nav-main__link:hover,
            .nav-main__item.is-open .nav-main__link {
                background: transparent;
            }

            .nav-dropdown__item.is-active > .nav-dropdown__row .nav-arrow {
                transform: rotate(180deg);
            }

            .nav-main__item--meta {
                margin-inline-start: 0;
                padding-inline-start: 0;
                border-inline-start: 0;
            }

            .nav-main__item--meta button.nav-main__link {
                padding-inline-start: var(--space-2);
                padding-inline-end: calc((44px - 18px) / 2);
            }

            .nav-main__item--meta .nav-arrow {
                display: block;
                margin-inline-start: auto;
            }

            .nav-dropdown {
                position: static;
                display: grid;
                grid-template-rows: 0fr;
                width: auto;
                padding-top: 0;
                opacity: 1;
                visibility: visible;
                pointer-events: auto;
                transform: none;
                transition: grid-template-rows var(--transition-slow);
            }

            .nav-main__item.is-open > .nav-dropdown {
                grid-template-rows: 1fr;
                transform: none;
                transition: grid-template-rows var(--transition-slow);
            }

            .nav-dropdown__inner {
                flex-direction: column;
                margin-inline-start: 0;
                width: auto;
                max-width: none;
                min-height: 0;
                max-height: none;
                overflow: hidden;
                background: transparent;
                border: none;
                border-radius: 0;
                box-shadow: none;
                pointer-events: auto;
                visibility: hidden;
                transition: visibility 0s 350ms;
            }

            .nav-main__item.is-open > .nav-dropdown > .nav-dropdown__inner {
                visibility: visible;
                transition: visibility 0s;
            }

            .nav-dropdown__list {
                flex: none;
                padding: 0 0 var(--space-2);
                overflow: visible;
            }

            .nav-dropdown__sublists {
                display: contents;
            }

            .nav-dropdown__panels {
                display: none;
            }

            .nav-dropdown__item > .nav-dropdown__subwrap {
                display: grid;
                grid-template-rows: 0fr;
                width: auto;
                transition: grid-template-rows var(--transition-slow);
            }

            .nav-dropdown__item.is-active > .nav-dropdown__subwrap {
                grid-template-rows: 1fr;
            }

            .nav-dropdown__subwrap > .nav-dropdown__sublist {
                min-height: 0;
                overflow: hidden;
                padding: 0;
                visibility: hidden;
                transition: visibility 0s 350ms;
            }

            .nav-dropdown__item.is-active > .nav-dropdown__subwrap > .nav-dropdown__sublist {
                visibility: visible;
                transition: visibility 0s;
            }

            .nav-dropdown__item {
                border-top: 1px solid rgb(from var(--border) r g b / 0.5);
            }

            .nav-dropdown__subitem {
                border-top: 1px solid rgb(from var(--border) r g b / 0.35);
            }

            :is(.nav-dropdown__link, .nav-dropdown__sublink) {
                flex: 1;
                padding: var(--space-3) var(--space-2);
                font-size: var(--text-6);
                border-radius: 0;
            }

            .nav-dropdown__link {
                padding-left: var(--space-5);
            }

            .nav-dropdown__sublink {
                padding-left: var(--space-8);
            }

            :is(.nav-dropdown__link, .nav-dropdown__sublink):hover,
            .nav-dropdown__item.is-active .nav-dropdown__link,
            .nav-dropdown__subitem.is-active .nav-dropdown__sublink {
                background: transparent;
            }

            .nav-dropdown__item.has-children .nav-dropdown__link::after,
            .nav-dropdown__sublink::after {
                display: none;
            }
        }
    }

    /* ---- page.banner ---------------------------------------------------- */
    @layer banner {
        #banner {
            --banner-top: calc(var(--nav-top) + var(--nav-btn-size) + 10px + var(--space-14));
            --container-max: 1500px;

            position: relative;
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            overflow: hidden;
        }

        #banner > :is(.banner__image, .banner__content) {
            grid-area: 1 / 1;
        }

        #banner :is(.container, .grid) {
            max-width: var(--container-max);
            padding-block: var(--space-12);
        }

        #banner .subheader::before,
        .nav-dropdown__panel-body .subheader::before {
            background-color: var(--primary-foreground);
        }

        #banner .banner__image {
            position: relative;
            align-self: stretch;
            width: 100%;
            min-height: min(100vw * var(--banner-h) / var(--banner-w), 90vh);
        }

        #banner .banner__slide {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0;
            transition: opacity 1.2s var(--ease);
        }

        #banner .banner__slide.is-active {
            opacity: 1;
        }

        #banner .banner__video {
            container-type: size;
            overflow: hidden;
        }

        #banner .banner__video-frame {
            position: absolute;
            top: 50%;
            left: 50%;
            width: max(100cqw, 100cqh * 16 / 9);
            height: max(100cqh, 100cqw * 9 / 16);
            translate: -50% -50%;
            border: 0;
            pointer-events: none;
            opacity: 0;
            transition: opacity 1.2s var(--ease);
        }

        #banner .banner__video.is-playing .banner__video-frame {
            opacity: 1;
        }

        #banner:has(> .banner__video-toggle) .banner__content > .container {
            padding-block-end: calc(var(--space-12) + var(--space-8));
        }

        #banner .banner__video-toggle {
            position: absolute;
            z-index: calc(var(--z-raised) + 1);
            inset: auto var(--space-4) var(--space-4) auto;

            display: inline-flex;
            align-items: center;
            gap: var(--space-2);
            min-width: 2.5rem;
            min-height: 2.5rem;
            padding: var(--space-2) var(--space-4);

            font-size: var(--text-7);
            color: var(--primary-foreground);
            background: rgb(from var(--primary) r g b / 0.45);
            backdrop-filter: blur(12px);
            border: 1px solid rgb(from var(--primary-foreground) r g b / 0.4);
            border-radius: var(--radius-full);
            cursor: pointer;

            transition: background var(--transition-fast),
                        color var(--transition-fast),
                        border-color var(--transition-fast);
        }

        #banner .banner__video-toggle[hidden] {
            display: none;
        }

        #banner .banner__video-toggle:not([data-state="consent"]) {
            justify-content: center;
            padding: var(--space-2);
        }

        #banner .banner__video-toggle:is(:hover, :focus-visible) {
            color: var(--primary);
            background: var(--primary-foreground);
            border-color: var(--primary-foreground);
        }

        #banner .banner__video-toggle[data-state="playing"] .banner__video-icon-play,
        #banner .banner__video-toggle:not([data-state="playing"]) .banner__video-icon-pause {
            display: none;
        }

        #banner .banner__promotion {
            position: absolute;
            inset: var(--banner-top) 0 auto 0;
            z-index: calc(var(--z-raised) + 1);
            pointer-events: none;
        }

        #banner .banner__promotion .button-promotion {
            pointer-events: auto;
        }

        #banner .banner__promotion .grid {
            padding-block: 0;
        }

        #banner .button-promotion {
            max-width: 100%;
            white-space: normal;
        }

        #banner .button-promotion svg {
            flex: 0 0 auto;
        }

        #banner .is-clamped {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: var(--banner-clamp);
            overflow: hidden;
        }

        #banner .banner__badges {
            display: flex;
            flex-wrap: wrap;
            gap: var(--space-2);
            margin: var(--space-4) 0 0;
            padding: 0;
            list-style: none;

            & > li {
                margin: 0;
            }
        }

        #banner .banner__aside {
            align-self: end;

            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: var(--space-6);
        }

        .banner__logo {
            padding: var(--banner-logo-pad, var(--space-4) var(--space-6));
            background: rgb(from var(--primary) r g b / 0.45);
            backdrop-filter: blur(12px);
            border-radius: var(--radius-full);
        }

        .banner__logo img {
            display: block;
            width: auto;
            max-height: var(--banner-logo-h, 3rem);
            filter: brightness(0) invert(1);
        }

        #banner .breadcrumb {
            max-width: 100%;
            min-width: 0;
            font-size: var(--breadcrumb-font-size);
        }

        #banner .breadcrumb__list {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-end;
            align-items: center;
            gap: var(--space-1) var(--space-3);
            margin: 0;
            padding: 0;
            list-style: none;
        }

        #banner .breadcrumb__item {
            display: inline-flex;
            align-items: center;
            gap: var(--space-3);
            white-space: nowrap;
        }

        #banner .breadcrumb__item + .breadcrumb__item::before {
            content: "/" / "";
            color: rgb(from var(--primary-foreground) r g b / 0.6);
        }

        #banner .breadcrumb__link {
            display: inline-flex;
            align-items: center;
            color: rgb(from var(--primary-foreground) r g b / 0.75);
            text-decoration: none;
        }

        #banner .breadcrumb__link--home svg {
            width: 1.25em;
            height: 1.25em;
        }

        #banner .breadcrumb__link:is(:hover, :focus-visible) {
            color: var(--primary-foreground);
            text-decoration: underline;
        }

        #banner .breadcrumb__link[aria-current="page"] {
            color: var(--primary-foreground);
            font-weight: var(--font-semibold);
            text-decoration: none;
        }

        @media (width <= 768px) {
            #banner .banner__aside {
                align-items: flex-start;
            }

            #banner .breadcrumb {
                align-self: stretch;
                font-size: var(--breadcrumb-font-size-mobile);
            }

            #banner .breadcrumb__list {
                justify-content: flex-start;
            }

            #banner .breadcrumb__item {
                white-space: normal;
            }
        }

        #banner .banner__dots {
            position: absolute;
            z-index: calc(var(--z-raised) + 1);
            inset: auto 0 var(--space-4) 0;

            display: flex;
            justify-content: center;
            gap: var(--space-3);
        }

        #banner .banner__dot {
            width: 0.5rem;
            height: 0.5rem;
            padding: 0;

            background: transparent;
            border: 1px solid var(--primary-foreground);
            border-radius: var(--radius-full);
            cursor: pointer;

            transition: background var(--transition-fast);
        }

        #banner .banner__dot.is-active {
            background: var(--primary-foreground);
        }

        #banner .banner__content {
            position: relative;
            align-self: end;
            z-index: var(--z-raised);
            padding-block-start: calc(var(--banner-top) + var(--space-12));

            display: flex;
            justify-content: center;
            align-items: flex-end;
            min-height: 33vh;

            background: linear-gradient(
                to top,
                var(--primary) 0%,
                rgb(from var(--primary) r g b / 0) 100%
            );
            color: var(--primary-foreground);
        }
    }

    /* ---- page.content --------------------------------------------------- */
    @layer content {
        #content {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            gap: var(--flow-gap);

            padding-block: var(--flow-gap);
        }
    }

    /* ---- page.footer ---------------------------------------------------- */
    @layer footer {
        footer {
            --footer-image-h: min(60vh, 520px);
            --footer-fade-h: 12rem;

            --container-max: 1580px;

            --footer-rule: rgb(from var(--primary-foreground) r g b / 0.2);

            background: var(--primary);
            color: var(--primary-foreground);
            padding-bottom: var(--space-16);
        }

        .footer__stage {
            position: relative;
            min-height: var(--footer-image-h);
        }

        .footer__image {
            position: absolute;
            inset: 0 0 auto 0;
            height: var(--footer-image-h);
        }

        .footer__image img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .footer__image::after {
            content: '';
            position: absolute;
            inset: auto 0 0 0;
            height: var(--footer-fade-h);
            background: linear-gradient(
                to bottom,
                rgb(from var(--primary) r g b / 0) 0%,
                var(--primary) 100%
            );
        }

        .footer__content {
            position: relative;
            padding-block-start: calc(var(--footer-image-h) - var(--footer-fade-h));

            --flow-gap: var(--space-12);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: var(--flow-gap);
        }

        :where(.footer__content) > .frame {
            --frame-pad-inline: var(--container-pad);
        }

        .footer__bar {
            --flow-gap: var(--space-6);
            padding-block: var(--space-12);
        }

        .footer__bar .grid {
            max-width: var(--container-max);
        }

        .footer__stage + .footer__bar .row {
            padding-block-start: var(--space-12);
            border-block-start: 1px solid var(--footer-rule);
        }

        .footer__col {
            font-size: var(--text-7);
        }

        .footer__col--meta {
            align-items: center;
            text-align: center;
            justify-content: flex-end;
        }

        .footer__col--actions {
            align-items: flex-end;
            text-align: right;
        }

        .footer__col--actions .contact-actions {
            justify-content: flex-end;
        }

        .footer__copyright,
        .footer__disclaimer {
            margin: 0;
        }

        .footer__disclaimer {
            font-size: var(--text-8);
            color: rgb(from var(--primary-foreground) r g b / 0.7);
        }

        .footer__service-list {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: var(--space-2) var(--space-5);
            margin: 0;
            padding: 0;
            list-style: none;
        }

        @media (width <= 768px) {
            footer {
                --footer-image-h: min(50vh, 360px);
                --footer-fade-h: 8rem;
            }

            .footer__col--meta,
            .footer__col--actions {
                align-items: flex-start;
                text-align: left;
            }

            .footer__service-list,
            .footer__col--actions .contact-actions {
                justify-content: flex-start;
            }
        }
    }

    /* ---- page.consent --------------------------------------------------- */
    @layer consent {
        #cookie-consent {
            position: fixed;
            z-index: var(--z-floating);
            left: var(--space-8);
            bottom: var(--space-8);
            width: 3rem;
            height: 3rem;
            padding: var(--space-2);

            background: var(--card);
            color: var(--card-foreground);
            border: none;
            border-radius: var(--radius-full);
            box-shadow: var(--shadow-medium);
            cursor: pointer;

            transition: background var(--transition-fast), color var(--transition-fast);
        }

        #cookie-consent:hover {
            background: var(--primary);
            color: var(--primary-foreground);
        }

        body:has(#nav-overlay.is-open) #cookie-consent {
            display: none;
        }

        @media (width <= 1024px) {
            body {
                position: relative;
            }

            #cookie-consent {
                position: absolute;
                left: var(--container-pad);
                bottom: var(--space-4);
            }
        }
    }

    /* ---- page.float ----------------------------------------------------- */
    @layer float {
        .contact-float {
            --contact-float-edge: var(--space-8);

            position: fixed;
            z-index: var(--z-floating);
            right: var(--contact-float-edge);
            bottom: calc(var(--contact-float-edge) + env(safe-area-inset-bottom, 0px));
            box-shadow: var(--shadow-nav);

            opacity: 0;
            visibility: hidden;
            translate: 0 var(--space-4);
            transition: opacity var(--transition-medium),
                        translate var(--transition-medium),
                        background var(--transition-fast),
                        visibility 0s 250ms;
        }

        body:has(#main-navigation.main-header--not-top:not(.main-header--pinned)) .contact-float {
            opacity: 1;
            visibility: visible;
            translate: 0 0;
            transition: opacity var(--transition-medium),
                        translate var(--transition-medium),
                        background var(--transition-fast),
                        visibility 0s;
        }

        .contact-float:hover {
            filter: brightness(1.15);
        }

        body:has(#nav-overlay.is-open) .contact-float {
            display: none;
        }

        @media (width <= 768px) {
            .contact-float {
                --contact-float-edge: var(--space-4);
                --button-pad: var(--space-3) var(--space-5);
                font-size: var(--text-7);

                inset-inline: 0;
                width: fit-content;
                max-width: calc(100% - 2 * var(--contact-float-edge));
                margin-inline: auto;
            }
        }
    }
}
/* #endregion */

/* #region components ====================================================== */
@layer components {
    @layer subheader, button, field, list, actions, card, feature, brands, slideshow, tabs, layer, pagination;

    @layer list {
        .list-pill {
            display: flex;
            flex-wrap: wrap;
            align-items: flex-start;
            gap: var(--space-3);
            padding-left: 0;
            margin-left: 0;
        }
        .list-pill li {
            display: inline-flex;
            align-items: center;
            justify-content: flex-start;
            gap: var(--space-3);

            font-weight: var(--font-bold);

            border-radius: var(--radius-full);

            list-style: none;
            background: var(--background);
            color: var(--foreground);
            padding: var(--space-2) var(--space-4);
            margin: 0;
        }

        .list-feature li {
            padding-left: var(--space-2);
        }

        .list-feature li::before {
            content: '';
            flex: 0 0 auto;
            width: var(--space-6);
            height: var(--space-6);
            background: var(--primary);
            mask: var(--icon-check-circle) center / contain no-repeat;
        }
    }

    @layer button {
        .button {
            --button-bg: var(--action);
            --button-fg: var(--action-foreground);
            --button-bg-hover: rgb(from var(--primary) r g b / 0.85);
            --button-border: transparent;
            --button-pad: var(--space-4) var(--space-8);

            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: var(--space-2);

            padding: var(--button-pad);
            background: var(--button-bg);
            color: var(--button-fg);
            border: 1px solid var(--button-border);
            border-radius: var(--radius-full);

            font-size: var(--text-6);
            font-weight: var(--font-bold);
            line-height: var(--leading-tight);
            line-height: round(up, var(--leading-tight) * 1em, 1px);
            text-decoration: none;
            white-space: nowrap;
            cursor: pointer;

            transition: background var(--transition-fast),
                        color var(--transition-fast),
                        border-color var(--transition-fast);
        }
        .button:hover {
            opacity: .75;
        }

        @media (width <= 768px) {
            .button {
                --button-pad: var(--space-3) var(--space-6);
            }
        }

        .button.button-main {
            --button-bg: var(--primary);
            --button-fg: var(--primary-foreground);
        }

        .button.button-light {
            --button-bg: rgb(from var(--primary-foreground) r g b / 0.5);
            --button-fg: var(--primary);
        }

        .button.button-promotion {
            --button-bg: var(--promotion);
            --button-fg: var(--promotion-foreground);
            --button-pad: var(--space-2) var(--space-4) var(--space-2) var(--space-6);
            gap: var(--space-4);
            font-size: var(--text-7);
        }

        .button.button-promotion.button-promotion--primary {
            --button-bg: var(--primary);
            --button-fg: var(--primary-foreground);
        }

        .button.button-promotion.button-promotion--coral {
            --button-bg: var(--promotion-coral);
        }

        .button.button-promotion.button-promotion--yellow {
            --button-bg: var(--promotion-yellow);
        }

        @media (width <= 768px) {
            .button.button-promotion {
                --button-pad: var(--space-1) var(--space-2) var(--space-1) var(--space-4);
                gap: var(--space-2);
                font-size: var(--text-8);
            }

            .button.button-promotion svg {
                width: 16px;
                height: 16px;
            }
        }

        .button.button-arrow::before {
            content: "";
            flex: none;
            width: 20px;
            height: 20px;
            background: currentColor;
            mask: var(--icon-arrow-right) center / contain no-repeat;
        }

        .button.button-light:hover {
            --button-bg: rgb(from var(--primary-foreground) r g b / 0.62);
            --button-border: var(--action);
            opacity: 1;
        }
    }

    @layer actions {
        .contact-actions {
            display: flex;
            flex-wrap: wrap;
            gap: var(--space-3);
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .contact-actions__item {
            display: flex;
        }
    }

    @layer card {
        .card {
            position: relative;
            isolation: isolate;
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            grid-template-rows: auto 1fr;
            height: 100%;
            overflow: hidden;

            background: var(--card-surface);
            color: var(--primary);
            border-radius: var(--radius-xlarge);
        }

        .card__media {
            position: relative;
            aspect-ratio: 3 / 2;
            overflow: hidden;
        }

        .card__image {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: scale var(--transition), filter var(--transition);
        }

        .card--linked:hover .card__image {
            scale: 1.03;
        }

        .card--overlay.card--linked:hover .card__image {
            filter: blur(4px);
        }

        .card__top {
            position: absolute;
            inset: var(--space-6) var(--space-6) auto var(--space-6);
            z-index: var(--z-raised);

            display: flex;
            align-items: flex-start;
            gap: var(--space-4);
        }

        .card__badges {
            flex: 1 1 0;

            display: flex;
            flex-wrap: wrap;
            gap: var(--space-2);
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .card__logo {
            --banner-logo-h: 2.25rem;
            --banner-logo-pad: var(--space-3) var(--space-4);
            flex: 0 1 auto;
            min-width: 0;
            margin-inline-start: auto;
        }

        .card__logo img {
            max-width: 100%;
            height: auto;
        }

        .card__badge {
            padding: var(--space-1) var(--space-4);
            white-space: nowrap;
            background: var(--promotion);
            color: var(--promotion-foreground);
            border-radius: var(--radius-full);

            font-size: var(--text-7);
            font-weight: var(--font-bold);
            line-height: var(--leading-normal);
        }

        .card__badge.card__badge--primary {
            background: var(--primary);
            color: var(--primary-foreground);
        }

        .card__badge.card__badge--coral {
            background: var(--promotion-coral);
        }

        .card__badge.card__badge--yellow {
            background: var(--promotion-yellow);
        }

        .card__body {
            display: flex;
            flex-direction: column;
            gap: var(--space-2);
            padding: var(--space-8) var(--space-10);
        }

        .card__title {
            margin: 0;
            font-size: var(--text-4);
            font-weight: var(--font-semibold);
        }

        .card__link {
            color: inherit;
            text-decoration: none;
        }

        .card__link::after {
            content: '';
            position: absolute;
            inset: 0;
            z-index: var(--z-raised);
        }

        .card__link:focus-visible {
            outline: none;
        }

        .card:has(.card__link:focus-visible) {
            outline: 2px solid var(--action);
            outline-offset: 3px;
        }

        .card__price {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: var(--space-1);
            margin: auto 0 0;
            padding-block-start: var(--space-4);
            line-height: var(--leading-tight);
        }

        .card__price-old {
            font-size: var(--text-7);
        }

        .card__price-current {
            font-weight: var(--font-semibold);
            font-size: var(--text-4);
        }

        /* -- Variante: Text auf dem Bild -- */
        .card--overlay {
            grid-template-rows: auto;
            background: var(--primary);
            color: var(--primary-foreground);
        }

        .card--overlay > :is(.card__media, .card__body) {
            grid-area: 1 / 1;
        }

        .card--overlay .card__media {
            align-self: stretch;
            aspect-ratio: 1;
            z-index: -1;
            width: 100%;
        }

        .card--overlay .card__body {
            align-self: end;
            padding: var(--space-24) var(--space-12) var(--space-10);
            background: var(--fade-primary);
        }

        .card--overlay .card__text {
            font-weight: var(--font-bold);
        }

        .frame-type-cards:only-child {
            flex-grow: 1;
        }

        @media (width <= 768px) {
            .card__body,
            .card--overlay .card__body {
                padding-inline: var(--space-6);
                padding-block-end: var(--space-8);
            }

            .card__body {
                padding-block-start: var(--space-8);
            }

            .card__top {
                inset: var(--space-4) var(--space-4) auto var(--space-4);
            }
        }
    }

    @layer feature {
        .feature-cards {
            --feature-columns: 6;
            --feature-gap: var(--space-4);

            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: var(--feature-gap);
            margin: 0;
            padding: 0;
        }

        .feature-card {
            flex: 0 0 calc((100% - (var(--feature-columns) - 1) * var(--feature-gap)) / var(--feature-columns));
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            gap: var(--space-6);
            min-width: 0;
            padding: var(--space-6) var(--space-4) var(--space-4) var(--space-6);

            background: var(--feature-card-bg, var(--card-surface));
            color: var(--primary);
            border-radius: var(--radius-xlarge);
        }

        .feature-card__label {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            font-size: var(--text-7);
            line-height: var(--leading-tight);
        }

        .feature-card__label svg {
            flex-shrink: 0;
        }

        .feature-card__value {
            margin: 0;
            text-align: end;
            font-size: var(--text-5);
            line-height: var(--leading-tight);
            overflow-wrap: anywhere;
        }

        @media (width <= 1024px) {
            .feature-cards {
                --feature-columns: 3;
            }
        }

        @media (width <= 768px) {
            .feature-cards {
                --feature-columns: 2;
                --feature-gap: var(--space-3);
            }

            .feature-card {
                gap: var(--space-6);
                padding: var(--space-5) var(--space-3) var(--space-3) var(--space-4);
            }

            .feature-card__value {
                font-size: var(--text-6);
            }
        }
    }

    @layer subheader {
        .subheader,
        .card__kicker,
        .news-item__kicker {
            display: flex;
            align-items: center;
            font-size: 0.9rem;
            font-weight: var(--font-semibold);
        }

        .subheader::before,
        .card__kicker::before,
        .news-item__kicker::before {
            content: '';
            flex: none;
            align-self: flex-start;
            width: var(--space-8);
            height: 1px;
            margin-block-start: calc(0.5lh - 0.5px);
            margin-right: var(--space-2);
        }

        .subheader::before {
            display: block;
            background-color: var(--primary);
        }

        :is(.card__kicker, .news-item__kicker) {
            order: -1;
            margin: 0;
        }

        :is(.card__kicker, .news-item__kicker)::before {
            background-color: currentColor;
        }

        header .subheader {
            margin-bottom: var(--space-1);
        }

        header .subheader + h1,
        header .subheader + h2 {
            margin-block-start: 0;
        }

        .subheader.ce-headline-center {
            justify-content: center;
        }

        .subheader.ce-headline-right {
            justify-content: flex-end;
        }
    }

    @layer brands {
        .brands {
            --brands-h: 3.75rem;
            --brands-logo-h: 1.5rem;
            --brands-logo-w: 7.5rem;
            --brands-pad-end: var(--space-6);
            --brands-inner-gap: var(--space-3);

            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: var(--space-6) var(--space-4);
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .brands__item {
            margin: 0;
        }

        .brands__link {
            display: flex;
            align-items: center;
            gap: var(--brands-inner-gap);
            height: var(--brands-h);
            min-width: 9rem;
            padding: 4px var(--brands-pad-end) 4px 4px;
            background: var(--background);
            border-radius: var(--radius-full);
            color: var(--primary);
            text-decoration: none;
            transition: transform var(--transition-fast), box-shadow var(--transition-fast);
        }

        .brands__link:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgb(0 0 0 / 0.18);
        }

        .brands__link:focus-visible {
            outline: 2px solid var(--background);
            box-shadow: 0 0 0 5px var(--primary);
            outline-offset: 5px;
        }

        .brands__photo {
            flex: none;
            width: calc(var(--brands-h) - 8px);
            height: calc(var(--brands-h) - 8px);
            border-radius: 50%;
            object-fit: cover;
        }

        .brands__logo {
            flex: 1;
            display: flex;
            justify-content: center;
            background-color: var(--primary);
            mask: var(--brand-logo) center / contain no-repeat;
        }

        .brands__logo img {
            display: block;
            width: auto;
            height: var(--brands-logo-h);
            max-width: var(--brands-logo-w);
            object-fit: contain;
            opacity: 0;
        }

        @media (width <= 768px) {
            .brands {
                --brands-h: 2.75rem;
                --brands-logo-h: 1rem;
                --brands-logo-w: 5rem;
                --brands-pad-end: var(--space-3);
                --brands-inner-gap: var(--space-2);
                gap: var(--space-2);
            }

            .brands__link {
                min-width: 0;
            }
        }
    }

    @layer slideshow {
        .slideshow {
            --slideshow-nav-size: 52px;

            --slideshow-accent: var(--primary);
            --slideshow-accent-foreground: var(--primary-foreground);
            --slideshow-dot-border: var(--border);

            display: flex;
            flex-direction: column;
            gap: var(--space-8);
            width: 100%;
        }

        .slideshow__stage {
            position: relative;
            display: flex;
            align-items: center;
            gap: var(--space-6);
        }

        .slideshow__viewport {
            flex: 1;
            min-width: 0;

            display: flex;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            overscroll-behavior-x: contain;

            scrollbar-width: none;
        }

        .slideshow__viewport::-webkit-scrollbar {
            display: none;
        }

        .slideshow__slide {
            flex: 0 0 100%;
            scroll-snap-align: center;
            scroll-snap-stop: always;
            margin: 0;
        }

        .slideshow__slide > a,
        .slideshow__image {
            display: block;
        }

        .slideshow__image {
            width: 100%;
            aspect-ratio: 16 / 9;
            object-fit: contain;
        }

        .slideshow__nav {
            flex: 0 0 auto;
            display: inline-flex;
            align-items: center;
            justify-content: center;

            width: var(--slideshow-nav-size);
            height: var(--slideshow-nav-size);

            background: var(--slideshow-accent);
            color: var(--slideshow-accent-foreground);
            border: 0;
            border-radius: var(--radius-full);
            cursor: pointer;

            transition: opacity var(--transition-fast);
        }

        .slideshow__nav:hover {
            opacity: .75;
        }

        .slideshow__dots {
            display: flex;
            justify-content: center;
            gap: var(--space-3);
        }

        .slideshow__dot {
            width: 2.75rem;
            height: var(--bar-height);
            padding: 0;

            background: transparent;
            border: 1px solid var(--slideshow-dot-border);
            border-radius: var(--radius-full);
            cursor: pointer;

            transition: background var(--transition-fast),
                        border-color var(--transition-fast);
        }

        .slideshow__dot.is-active {
            background: var(--slideshow-accent);
            border-color: var(--slideshow-accent);
        }

        @media (width <= 768px) {
            .slideshow {
                --slideshow-nav-size: 40px;
                gap: var(--space-6);
            }

            .slideshow__stage {
                gap: 0;
            }

            .slideshow__nav {
                position: absolute;
                top: 50%;
                translate: 0 -50%;
                z-index: var(--z-raised);
                background: rgb(from var(--slideshow-accent) r g b / 0.85);
            }

            .slideshow__nav--prev {
                left: var(--space-2);
            }

            .slideshow__nav--next {
                right: var(--space-2);
            }
        }
    }

    @layer tabs {
        .tabs {
            display: flex;
            flex-direction: column;
            gap: var(--space-8);
            width: 100%;
        }

        .tabs__bar {
            overflow-x: auto;
            overscroll-behavior-x: contain;
            scrollbar-width: none;

            padding-block: var(--space-1);
        }

        .tabs__bar::-webkit-scrollbar {
            display: none;
        }

        .tabs__list {
            display: flex;
            justify-content: center;
            gap: var(--space-4);
            width: max-content;
            min-width: 100%;
        }

        .tabs__tab {
            flex: 0 0 auto;
            padding: var(--space-3) var(--space-6);

            background: transparent;
            color: var(--primary);
            border: 1px solid var(--primary);
            border-radius: var(--radius-full);

            font-size: var(--text-7);
            font-weight: var(--font-bold);
            line-height: var(--leading-tight);
            white-space: nowrap;
            cursor: pointer;

            transition: background var(--transition-fast),
                        color var(--transition-fast);
        }

        .tabs__tab:hover {
            background: rgb(from var(--primary) r g b / 0.08);
        }

        .tabs__tab.is-active {
            background: var(--primary);
            color: var(--primary-foreground);
        }

        .tabs__tab.is-active:hover {
            background: var(--primary);
        }

        .tabs__panel {
            display: none;
        }

        .tabs__panel.is-active {
            display: flex;
            flex-direction: column;
            gap: var(--flow-gap);
        }

        @media (width <= 768px) {
            .tabs__bar {
                margin-inline: calc(var(--container-pad) * -1);
                padding-inline: var(--container-pad);
            }
        }
    }

    @layer field {
        .field {
            position: relative;
            display: block;
            min-width: 0;
        }

        .field__label {
            position: absolute;
            z-index: 1;
            top: calc(1px + var(--field-pad-block) / 2 - var(--field-label-size) * (var(--leading-tight) - 1) / 2);
            inset-inline: calc(1px + var(--field-pad-inline));

            font-size: var(--field-label-size);
            font-weight: var(--font-normal);
            line-height: var(--leading-tight);
            color: var(--muted-foreground);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            pointer-events: none;
        }

        .field__control {
            display: block;
            width: 100%;
            padding: var(--field-pad-block) var(--field-pad-inline);

            background: var(--field-bg);
            color: var(--primary);
            border: 1px solid var(--field-border);
            border-radius: var(--radius-full);

            font-size: max(1rem, var(--field-font-size));
            line-height: var(--leading-tight);
            line-height: round(up, var(--leading-tight) * 1em, 1px);
            outline: var(--field-ring-width) solid transparent;
            outline-offset: 0;
            transition: border-color var(--transition-fast), outline-color var(--transition-fast);
        }

        .field:has(> .field__label) > .field__control {
            padding-block: calc(var(--field-pad-block) / 2 + var(--field-label-size) + 0.25rem)
                           calc(var(--field-pad-block) * 1.5 - var(--field-label-size) - 0.25rem);
        }

        :is(.field__control, .field-check__input):focus-visible {
            outline-color: var(--field-ring);
        }

        textarea.field__control {
            min-height: 9rem;
            border-radius: var(--radius-xlarge);
            resize: vertical;
        }

        select.field__control {
            padding-inline-end: calc(var(--field-pad-inline) + 1.75rem);
            appearance: none;
            text-overflow: ellipsis;
            cursor: pointer;
        }

        .field:has(> select.field__control)::after {
            content: '';
            position: absolute;
            top: calc(1px + var(--field-pad-block) + round(up, max(1rem, var(--field-font-size)) * var(--leading-tight), 1px) / 2);
            right: calc(1px + var(--field-pad-inline));
            width: 1rem;
            height: 1rem;
            translate: 0 -50%;
            background: var(--primary);
            mask: var(--icon-caret-down) center / contain no-repeat;
            pointer-events: none;
        }

        .field.is-invalid,
        .field__control.is-invalid,
        .field-check__input.is-invalid {
            --field-border: var(--danger);
            --field-ring: rgb(from var(--danger) r g b / 0.25);
        }

        /* -- Checkbox / Radio -- */
        .field-check {
            display: inline-flex;
            align-items: center;
            gap: var(--space-3);
            font-size: var(--field-font-size);
            line-height: var(--leading-tight);
            cursor: pointer;
        }

        .field-check__input {
            flex: none;
            display: grid;
            place-content: center;
            width: 1.5rem;
            height: 1.5rem;
            margin: 0;
            appearance: none;

            background: var(--field-bg);
            border: 1px solid var(--field-border);
            border-radius: var(--radius-full);
            outline: var(--field-ring-width) solid transparent;
            outline-offset: 0;
            cursor: pointer;
            transition: background var(--transition-quick), outline-color var(--transition-fast);
        }

        .field-check__input::before {
            content: '';
            width: 0.875rem;
            height: 0.875rem;
            background: var(--primary-foreground);
            mask: var(--icon-check) center / contain no-repeat;
            scale: 0;
            transition: scale var(--transition-quick);
        }

        .field-check__input:checked {
            background: var(--primary);
        }

        .field-check__input:checked::before {
            scale: 1;
        }

        .field-check__input[type="radio"]::before {
            width: 0.625rem;
            height: 0.625rem;
            border-radius: var(--radius-full);
            mask: none;
        }
    }

    @layer layer {
        .contact-layer {
            --layer-gap: var(--space-4);
            --layer-pad: var(--space-10);
            --layer-close-size: 2.75rem;

            position: fixed;
            inset: var(--layer-gap) var(--layer-gap) var(--layer-gap) auto;
            width: min(30rem, 100% - 2 * var(--layer-gap));
            max-width: none;
            height: auto;
            max-height: none;
            margin: 0;
            padding: 0;
            overflow: hidden;

            background: var(--surface);
            color: var(--card-foreground);
            border: none;
            border-radius: var(--radius-xlarge);
            box-shadow: var(--shadow-dropdown);

            translate: calc(100% + var(--layer-gap)) 0;
            transition: translate var(--transition-slow),
                        display var(--transition-slow) allow-discrete,
                        overlay var(--transition-slow) allow-discrete;
        }

        .contact-layer[open] {
            display: flex;
            flex-direction: column;
            translate: 0 0;
        }

        @starting-style {
            .contact-layer[open] {
                translate: calc(100% + var(--layer-gap)) 0;
            }
        }

        .contact-layer::backdrop {
            background: rgb(from var(--primary, #001844) r g b / 0);
            transition: background var(--transition-slow),
                        display var(--transition-slow) allow-discrete,
                        overlay var(--transition-slow) allow-discrete;
        }

        .contact-layer[open]::backdrop {
            background: rgb(from var(--primary, #001844) r g b / 0.4);
        }

        @starting-style {
            .contact-layer[open]::backdrop {
                background: rgb(from var(--primary, #001844) r g b / 0);
            }
        }

        html:has(.contact-layer[open]) {
            overflow: hidden;
        }

        .contact-layer__body {
            flex: 1 1 auto;
            min-height: 0;
            padding: var(--layer-pad);
            overflow-y: auto;
            overscroll-behavior: contain;
        }

        .contact-layer__close {
            position: absolute;
            z-index: 1;
            top: var(--space-5);
            right: var(--space-5);
            display: grid;
            place-items: center;
            width: var(--layer-close-size);
            height: var(--layer-close-size);
            padding: 0;

            background: var(--surface);
            color: var(--primary);
            border: 1px solid var(--primary);
            border-radius: var(--radius-full);
            cursor: pointer;
            transition: background var(--transition-fast), color var(--transition-fast);
        }

        .contact-layer__close:hover {
            background: var(--primary);
            color: var(--primary-foreground);
        }

        .contact-layer__status {
            color: var(--muted-foreground);
        }

        .contact-layer .frame {
            --frame-pad-inline: 0px;
            max-width: none;
        }

        .contact-layer .frame > header {
            padding-inline-end: calc(var(--layer-close-size) + var(--space-2));
            margin-block-end: var(--space-6);
        }

        .contact-layer .frame > header > :is(h1, h2, h3) {
            margin: 0;
            font-size: var(--text-3);
        }

        @media (width <= 768px) {
            .contact-layer {
                --layer-gap: var(--space-2);
                --layer-pad: var(--space-6);
            }
        }
    }

    @layer pagination {
        .pagination__list {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: var(--space-2);
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .pagination__list > li {
            margin: 0;
        }

        .pagination__link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 2.75rem;
            height: 2.75rem;
            padding-inline: var(--space-3);

            color: var(--primary);
            border: 1px solid var(--primary);
            border-radius: var(--radius-full);

            font-size: var(--text-7);
            font-weight: var(--font-bold);
            text-decoration: none;
            transition: background var(--transition-fast), color var(--transition-fast);
        }

        .pagination__link:hover {
            background: rgb(from var(--primary) r g b / 0.08);
            color: var(--primary);
        }

        .pagination__link.is-active {
            background: var(--primary);
            color: var(--primary-foreground);
        }

        .pagination__gap {
            align-self: center;
            padding-inline: var(--space-1);
        }

        @media (width <= 768px) {
            .pagination__edge,
            .pagination__gap {
                display: none;
            }

            .pagination__page:not(
                :has(> .is-active),
                :has(+ .pagination__page > .is-active),
                .pagination__page:has(> .is-active) + .pagination__page
            ) {
                display: none;
            }
        }
    }
}
/* #endregion */

/* #region tt_content ====================================================== */
@layer tt_content {
    @layer flow, frame, section, background, media;

    /* === ABSTANDSMODELL === */

    @layer flow {
        .container,
        .row > .col,
        .row > [class*="col-"] {
            display: flex;
            flex-direction: column;
            gap: var(--flow-gap);
        }
    }

    @layer frame {
        .frame {
            --frame-pad-inline: 0px;

            width: 100%;
            max-width: calc(var(--container-max) + 2 * var(--frame-pad-inline));
            padding-inline: var(--frame-pad-inline);
        }

        :where(#content) > .frame {
            --frame-pad-inline: var(--container-pad);
        }

        :is(.frame, .container) {
            &.frame-space-before-none   { margin-block-start: calc(var(--space-step-none)   - var(--flow-gap)); }
            &.frame-space-before-small  { margin-block-start: calc(var(--space-step-small)  - var(--flow-gap)); }
            &.frame-space-before-medium { margin-block-start: calc(var(--space-step-medium) - var(--flow-gap)); }
            &.frame-space-before-large  { margin-block-start: calc(var(--space-step-large)  - var(--flow-gap)); }

            &.frame-space-after-none    { margin-block-end: calc(var(--space-step-none)   - var(--flow-gap)); }
            &.frame-space-after-small   { margin-block-end: calc(var(--space-step-small)  - var(--flow-gap)); }
            &.frame-space-after-medium  { margin-block-end: calc(var(--space-step-medium) - var(--flow-gap)); }
            &.frame-space-after-large   { margin-block-end: calc(var(--space-step-large)  - var(--flow-gap)); }
        }

        :is(.frame, .container)[class*="frame-space-after-"]:has(+ :is(.frame, .container)[class*="frame-space-before-"]) {
            margin-block-end: 0;
        }
    }

    @layer section {
        .container {
            width: 100%;
            margin-inline: auto;
            padding-inline: var(--container-pad);

            align-items: center;
        }

        :is(.container, .grid) .container {
            max-width: var(--container-max);
            padding-inline: 0;
        }

        .container .row {
            max-width: var(--container-max);
        }
    }

    /* === HINTERGRUNDVARIANTEN === */
    @layer background {
        .container[class*="container--color-"] {
            padding-block: var(--section-pad);
        }

        .frame[class*="frame-color-"] {
            padding-block: var(--box-pad);
            --frame-pad-inline: var(--box-pad);
        }

        :is(.container--color-primary, .frame-color-primary) {
            background-color: var(--primary);
            color: var(--primary-foreground);
        }

        :is(.container--color-primary, .frame-color-primary, footer) ::selection {
            background-color: var(--primary-foreground);
            color: var(--primary);
        }

        :is(.container--color-primary, .frame-color-primary, footer) .subheader::before {
            background-color: var(--primary-foreground);
        }

        :is(.container--color-primary, .frame-color-primary, footer) .list-feature:not(.list-pill) li::before {
            background: var(--primary-foreground);
        }

        :is(.container--color-primary, .frame-color-primary, footer) .slideshow {
            --slideshow-accent: var(--primary-foreground);
            --slideshow-accent-foreground: var(--primary);
            --slideshow-dot-border: rgb(from var(--primary-foreground) r g b / 0.4);
        }

        :is(.container--color-primary, .frame-color-primary, footer) a:not(.button) {
            color: var(--action-foreground);

            &:hover {
                color: rgb(from var(--action-foreground) r g b / 0.8);
            }
        }

        :is(.container--color-primary, .frame-color-primary, footer) .card a.card__link {
            color: inherit;

            &:hover {
                color: inherit;
            }
        }

        :is(.container--color-primary, .frame-color-primary, footer) .list-pill a:not(.button) {
            color: var(--primary);

            &:hover {
                color: rgb(from var(--primary) r g b / 0.8);
            }
        }

        :is(.container--color-primary, .frame-color-primary, footer) .feature-cards {
            --feature-card-bg: var(--card);
        }

        :is(.container--color-secondary, .frame-color-secondary) {
            background-color: var(--secondary);
            color: var(--secondary-foreground);
        }

        :is(.container--color-white-blur, .frame-color-white-blur) {
            background-color: rgb(255 255 255 / 0.72);
            backdrop-filter: blur(12px);
            color: var(--foreground);
        }
    }

    @layer media {
        figcaption.image-caption {
            margin-top: var(--space-3);
            font-size: var(--text-8);
            font-style: italic;
        }

        .video-embed > :is(iframe, [data-service]) {
            display: block;
            width: 100% !important;
            height: auto !important;
            aspect-ratio: 16 / 9;
        }

        .ce-gallery:has(figure.video) {
            --ce-columns: 1;
            display: grid;
            grid-template-columns: repeat(var(--ce-columns), minmax(0, 1fr));
            gap: var(--grid-gap);

            &[data-ce-columns="2"] { --ce-columns: 2; }
            &[data-ce-columns="3"] { --ce-columns: 3; }
            &[data-ce-columns="4"] { --ce-columns: 4; }

            .ce-outer,
            .ce-inner,
            .ce-row {
                display: contents;
            }

            .ce-column {
                margin: 0;
            }

            figure {
                display: block;
            }
        }

        @media (width <= 768px) {
            .ce-gallery:has(figure.video) {
                grid-template-columns: minmax(0, 1fr);
                float: none;
                margin-inline: 0;
            }

            .ce-gallery:where(:not([data-ce-columns="1"]):not(:has(figure.video))) {
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: var(--space-4);
                float: none;
                margin-inline: 0;

                .ce-outer,
                .ce-inner,
                .ce-row {
                    display: contents;
                }

                .ce-column {
                    margin: 0;
                }

                figure,
                figcaption,
                figure > a {
                    display: block;
                }

                img {
                    width: 100%;
                }
            }
        }

        .frame-type-image.frame-layout-1 {
            .ce-gallery {
                display: grid;
                grid-template-columns: 1fr;
                gap: 0;
            }

            .ce-gallery[data-ce-columns="2"] { grid-template-columns: repeat(2, 1fr); }
            .ce-gallery[data-ce-columns="3"] { grid-template-columns: repeat(3, 1fr); }
            .ce-gallery[data-ce-columns="4"] { grid-template-columns: repeat(4, 1fr); }
            .ce-gallery[data-ce-columns="5"] { grid-template-columns: repeat(5, 1fr); }
            .ce-gallery[data-ce-columns="6"] { grid-template-columns: repeat(6, 1fr); }

            @media (width <= 768px) {
                .ce-gallery[data-ce-columns="4"] { grid-template-columns: repeat(2, 1fr); }
                .ce-gallery[data-ce-columns="5"],
                .ce-gallery[data-ce-columns="6"] { grid-template-columns: repeat(3, 1fr); }
            }

            .ce-outer,
            .ce-inner,
            .ce-row {
                display: contents;
            }

            .ce-column {
                margin: 0;
            }

            figure,
            figcaption,
            figure > a {
                display: block;
            }

            .ce-gallery img {
                width: 100%;
                height: auto;
                aspect-ratio: 1;
                object-fit: cover;
            }
        }
    }
}
/* #endregion */

/* #region plugins ========================================================= */
@layer plugins {
    @layer boatvertizer, news, form;

    /* ---- plugins.boatvertizer ------------------------------------------ */
    @layer boatvertizer {
        .boatvertizer {
            display: flex;
            flex-direction: column;
            gap: var(--space-8);
            width: 100%;
        }

        .boatvertizer__count,
        .boatvertizer__notice {
            margin: 0;
        }

        .boatvertizer__count {
            font-weight: var(--font-semibold);
        }

        /* -- Filter -- */
        .boatvertizer-filter {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
            align-items: end;
            gap: var(--space-4) var(--space-6);
            padding: var(--space-6) var(--space-8);

            background: var(--card-surface);
            color: var(--primary);
            border-radius: var(--radius-xlarge);
        }

        .boatvertizer-filter--sort-only {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-end;
            padding: 0;

            background: none;
            color: inherit;
            border-radius: 0;
        }

        .boatvertizer-filter--sort-only .boatvertizer-filter__field {
            flex: 0 1 14rem;
        }

        .boatvertizer-filter--sort-only .boatvertizer-filter__actions > .button {
            flex: 0 0 auto;
        }

        .boatvertizer-filter--sort-only .boatvertizer-filter__reset {
            flex: 0 0 100%;
            text-align: end;
        }

        .boatvertizer-filter__actions {
            display: flex;
        }

        .boatvertizer-filter__actions > .button {
            flex: 1 1 auto;
        }

        .boatvertizer-filter__reset {
            grid-column: 1 / -1;
            justify-self: start;
            font-size: var(--text-7);
            font-weight: var(--font-semibold);
        }

        /* -- Raster der Karten -- */
        .boatvertizer-grid {
            --boatvertizer-cols: 3;

            display: grid;
            grid-template-columns: repeat(var(--boatvertizer-cols), minmax(0, 1fr));
            gap: var(--grid-gap);
            width: 100%;
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .boatvertizer-grid--cols-1 { --boatvertizer-cols: 1; }
        .boatvertizer-grid--cols-2 { --boatvertizer-cols: 2; }
        .boatvertizer-grid--cols-3 { --boatvertizer-cols: 3; }
        .boatvertizer-grid--cols-4 { --boatvertizer-cols: 4; }

        .boatvertizer-grid__item {
            margin: 0;
        }

        .card__media--empty {
            display: grid;
            place-items: center;
            background: var(--secondary);
            color: rgb(from var(--primary) r g b / 0.3);
        }

        @media (width <= 1024px) {
            .boatvertizer-grid--cols-4 { --boatvertizer-cols: 2; }
        }

        /* -- Versetztes Raster (Masonry) -- */
        @media (width > 768px) {
            .boatvertizer-grid--masonry {
                container-type: inline-size;
            }

            .boatvertizer-grid--masonry > .boatvertizer-grid__item {
                grid-column: var(--boatvertizer-start) / span var(--boatvertizer-span);
            }
        }

        @media (width <= 768px) {
            .boatvertizer-grid { --boatvertizer-cols: 1; }

            .boatvertizer-filter:not(.boatvertizer-filter--sort-only) {
                padding: var(--space-6);
            }
        }

        /* -- Detailansicht -- */
        .boatvertizer-detail {
            display: flex;
            flex-direction: column;
            gap: var(--space-10);
        }

        .boatvertizer-detail__summary {
            display: flex;
            flex-wrap: wrap;
            align-items: baseline;
            justify-content: space-between;
            gap: var(--space-2) var(--space-6);
            padding-block: var(--space-6);
            border-block: 1px solid var(--border);
        }

        .boatvertizer-detail__price {
            margin: 0;
            font-size: var(--text-3);
            font-weight: var(--font-bold);
            line-height: var(--leading-tight);
        }

        .boatvertizer-detail__facts {
            margin: 0;
            font-weight: var(--font-semibold);
        }

        .boatvertizer-detail__price-info {
            display: block;
            margin-block-start: var(--space-1);
            font-size: var(--text-7);
            font-weight: var(--font-normal);
        }

        .boatvertizer-detail__price-old {
            display: block;
            margin-block-end: var(--space-1);
            font-size: var(--text-7);
            font-weight: var(--font-normal);
        }

        .boatvertizer-detail__equipment {
            columns: 3 14rem;
            column-gap: var(--grid-gap);
            margin: 0;

            & > li {
                break-inside: avoid;
            }
        }

        .boatvertizer-detail__links {
            display: flex;
            flex-wrap: wrap;
            gap: var(--space-2) var(--space-6);
            margin: 0;
            padding: 0;
            list-style: none;

            & > li {
                margin: 0;
            }
        }

        .boatvertizer-detail__section {
            display: flex;
            flex-direction: column;
            gap: var(--space-4);

            & > h2 {
                margin: 0;
                font-size: var(--text-3);
            }
        }

        .boatvertizer-detail__back {
            margin: 0;
        }

        .boatvertizer-specs {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            column-gap: var(--grid-gap);
            margin: 0;
        }

        .boatvertizer-specs__row {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
            gap: var(--space-4);
            padding-block: var(--space-3);
            border-bottom: 1px solid var(--border);
        }

        .boatvertizer-specs__label {
            opacity: 0.75;
        }

        .boatvertizer-specs__value {
            margin: 0;
            font-weight: var(--font-semibold);
            overflow-wrap: anywhere;
        }

        @media (width <= 768px) {
            .boatvertizer-specs {
                grid-template-columns: 1fr;
            }
        }
    }

    /* ---- plugins.news -------------------------------------------------- */
    @layer news {
        .news-list {
            --news-cols: 2;
            --news-row-gap: var(--space-12);

            display: flex;
            flex-direction: column;
            gap: var(--space-12);
            width: 100%;
        }

        header + .news-list--teaser {
            margin-block-start: var(--space-12);
        }

        .news-list__items {
            display: grid;
            grid-template-columns: repeat(var(--news-cols), minmax(0, 1fr));
            gap: 0 var(--grid-gap);
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .news-list__item {
            margin: 0;
        }

        .news-list__item:nth-child(n + 3) {
            margin-block-start: var(--news-row-gap);
            padding-block-start: var(--news-row-gap);
            border-block-start: 1px solid var(--border);
        }

        .news-list__notice,
        .news-list__more {
            margin: 0;
        }

        .news-list__more {
            display: flex;
            justify-content: center;
        }

        /* -- Eintrag -- */
        .news-item {
            position: relative;
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            gap: var(--space-6) var(--space-8);
            align-items: start;
        }

        .news-item--media {
            grid-template-columns: minmax(0, 5fr) minmax(0, 3fr);
        }

        .news-item__body {
            display: flex;
            flex-direction: column;
            gap: var(--space-4);
        }

        .news-item__title {
            margin: 0;
            font-size: var(--text-3);
        }

        .news-item__link {
            color: inherit;
            text-decoration: none;
        }

        .news-item:hover .news-item__link {
            text-decoration: underline;
            text-decoration-thickness: 2px;
            text-underline-offset: 4px;
        }

        .news-item__link::after {
            content: '';
            position: absolute;
            inset: 0;
            z-index: var(--z-raised);
        }

        .news-item__link:focus-visible {
            outline: none;
        }

        .news-item:has(.news-item__link:focus-visible) {
            outline: 2px solid var(--action);
            outline-offset: 6px;
        }

        .news-item__media {
            margin: 0;
        }

        .news-item__image {
            display: block;
            width: 100%;
            height: auto;
            aspect-ratio: 1;
            object-fit: cover;
        }

        @media (width <= 1024px) {
            .news-list {
                --news-cols: 1;
            }

            .news-list__item:nth-child(n + 2) {
                margin-block-start: var(--news-row-gap);
                padding-block-start: var(--news-row-gap);
                border-block-start: 1px solid var(--border);
            }
        }

        @media (width <= 768px) {
            .news-list {
                --news-row-gap: var(--space-8);
            }

            .news-item--media {
                grid-template-columns: minmax(0, 1fr);
            }

            .news-item__media {
                order: -1;
            }

            .news-item__image {
                aspect-ratio: 3 / 2;
            }
        }

        /* -- Detailansicht -- */
        .news-detail {
            display: flex;
            flex-direction: column;
            gap: var(--space-10);
            width: 100%;
            max-width: 52rem;
            margin-inline: auto;
        }

        .news-detail__figure {
            margin: 0;
        }

        .news-detail__figure img,
        .news-detail__video {
            display: block;
            width: 100%;
            height: auto;
        }

        .news-detail__video {
            aspect-ratio: 16 / 9;
            border: 0;
        }

        .news-detail__content {
            display: flex;
            flex-direction: column;
            gap: var(--flow-gap);
        }

        .news-detail__section {
            display: flex;
            flex-direction: column;
            gap: var(--space-4);

            & > h2 {
                margin: 0;
            }
        }

        .news-detail__links {
            display: flex;
            flex-direction: column;
            gap: var(--space-3);
            margin: 0;
            padding: 0;
            list-style: none;

            & > li {
                margin: 0;
            }
        }

        .news-detail__link-description {
            display: block;
            font-size: var(--text-7);
            color: var(--muted-foreground);
        }

        .news-detail__back {
            margin: 0;
        }
    }

    /* ---- plugins.form -------------------------------------------------- */
    @layer form {
        .form-element .invalid-feedback {
            display: block;
            margin-block-start: var(--space-1);
            padding-inline: var(--field-pad-inline);
            font-size: var(--text-7);
            color: var(--danger);
        }

        .form-element .required {
            margin-inline-start: 0.125em;
        }

        fieldset.form-element {
            min-width: 0;
            margin: 0;
            padding: 0;
            border: none;
        }

        .form-element :is([role="group"], [role="radiogroup"]) {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: var(--space-3);
        }

        /* -- Anfrage -- */
        .contact-form {
            max-width: 40rem;
            color: var(--primary);
        }

        .contact-form form {
            display: flex;
            flex-direction: column;
            gap: var(--space-4);
        }

        .contact-form form > div:not([class]) {
            display: contents;
        }

        .contact-form [role="radiogroup"] {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: var(--space-3) var(--space-6);
        }

        .contact-form .actions {
            margin-block-start: var(--space-4);
        }

        .contact-form .form-navigation {
            display: flex;
            justify-content: center;
        }

        .contact-form [aria-busy="true"] .button {
            cursor: progress;
        }

        .contact-form__privacy {
            font-size: var(--text-8);
            line-height: var(--leading-normal);
            color: var(--muted-foreground);
        }

        .contact-form__privacy a {
            color: inherit;
        }

        /* -- Danke -- */
        .contact-form--done {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: var(--space-4);
        }

        .contact-form__done-icon {
            color: var(--action);
        }

        .contact-form__message > :is(h2, h3) {
            font-size: var(--text-3);
        }

        .frame:has([data-contact-form-done]) > header {
            display: none;
        }
    }
}
/* #endregion */

/* #region utilities ======================================================= */
@layer utilities {
    @layer text, layout, spacing, a11y;

    @layer text {
        .align-left   { text-align: start; }
        .align-center { text-align: center; }
        .align-right  { text-align: end; }
        .align-justify { text-align: justify; }

        .text-light   { color: var(--muted-foreground); }
        .text-lighter { color: var(--faint-foreground); }
        .text-big     { font-size: var(--text-3); }
        .text-bold    { font-weight: var(--font-semibold); }
    }

    @layer layout {
        .flex            { display: flex; }
        .flex-col        { flex-direction: column; }
        .items-center    { align-items: center; }
        .justify-center  { justify-content: center; }
        .justify-between { justify-content: space-between; }
        .justify-end     { justify-content: flex-end; }
        .w-100           { width: 100%; }

        .hstack {
            display: flex;
            align-items: center;
            align-content: flex-start;
            flex-wrap: wrap;
            gap: var(--space-4);
            height: auto;

            * {
                margin: 0;
            }
        }

        .vstack {
            display: flex;
            flex-direction: column;
            gap: var(--space-3);
        }

        :is(ul, ol, a).unstyled {
            list-style: none;
            text-decoration: none;
            padding: 0;
        }
    }

    @layer spacing {
        .gap-1 { gap: var(--space-1); }
        .gap-2 { gap: var(--space-2); }
        .gap-4 { gap: var(--space-4); }

        .mt-2 { margin-block-start: var(--space-2); }
        .mt-4 { margin-block-start: var(--space-4); }
        .mt-6 { margin-block-start: var(--space-6); }

        .mb-2 { margin-block-end: var(--space-2); }
        .mb-4 { margin-block-end: var(--space-4); }
        .mb-6 { margin-block-end: var(--space-6); }

        .p-4  { padding: var(--space-4); }
    }

    @layer a11y {
        .visually-hidden {
            position: absolute;
            width: 1px;
            height: 1px;
            margin: -1px;
            padding: 0;
            overflow: hidden;
            clip-path: inset(50%);
            white-space: nowrap;
            border: 0;
        }
    }
}
/* #endregion */

/* #region overrides ======================================================= */
@layer overrides {
}
/* #endregion */