:root {
    /* Default palette mirrors the plugin's backend admin design
       (.cws-admin-shell in admin.css) for a consistent corporate identity
       between backend and frontend, theme-independent. The runtime inline CSS
       in class-assets.php re-emits these on :root, with active dealer tokens
       overriding; these values are the ultimate fallback. */
    --cws-primary: #1f4490;
    --cws-primary-text: #ffffff;
    --cws-primary-button: #1f4490;
    --cws-primary-button-text: #ffffff;
    --cws-secondary: #5f6f85;
    --cws-secondary-text: #ffffff;
    --cws-secondary-button: #5f6f85;
    --cws-secondary-button-text: #ffffff;
    --cws-accent: transparent;
    --cws-accent-text: currentColor;
    --cws-price-bg: transparent;
    --cws-price-text: currentColor;
    --cws-monthly-bg: transparent;
    --cws-monthly-text: currentColor;
    --cws-archive-bg: #f1f4f8;
    --cws-card-bg: #ffffff;
    --cws-heading: #1f2937;
    --cws-label: #5f6f85;
    --cws-content-text: #374151;
    --cws-meta-text: #5f6b7d;
    --cws-list-marker: rgba(95, 111, 133, 0.5);
    --cws-spec-badge-bg: #f1f4f8;
    --cws-spec-badge-text: #5f6f85;
    --cws-radius: 14px;
    --cws-card-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    /* Neutral, theme-independent default font stack (not bundled, references
       OS fonts only — GDPR-safe). Dealers can pick "Use theme font" (inherit)
       or "Classic Serif" in Design > Website > Font style. */
    --cws-font-default: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    --cws-font: var(--cws-font-default);
    --cws-container-max: 1200px;
    --cws-line: #dee2e6;
    --cws-soft: #f8f9fa;
    --cws-muted: #5b6166;
}

/* ==========================================================================
   Theme-independent frontend root (.cws-frontend)
   Every public surface (archive, detail page, search, finance calculator,
   expose form, PDF button, EnVKV label) carries .cws-frontend. It owns the
   font baseline, a self-contained content container and a defensive reset so
   the plugin looks consistent on ANY theme (Divi, Elementor, block themes,
   minimal themes) WITHOUT taking over the theme header/footer/nav.
   Modifiers:
     --inline : inline surfaces (PDF button) — font/reset, no block container
     --full   : opt out of the max-width container (intentional narrow column)
     --bare   : fully inert hook (EnVKV statutory label — must stay pixel-exact)
   ========================================================================== */
.cws-frontend:not(.cws-frontend--bare) {
    font-family: var(--cws-font, var(--cws-font-default));
    color: var(--cws-content-text, var(--cws-secondary));
    box-sizing: border-box;
}

/* Self-contained content width. Harmless when nested inside a theme container
   (only caps width — internal padding stays on the existing wrappers, so no
   double gutter). Fixes edge-to-edge sprawl on full-width theme templates. */
.cws-frontend:not(.cws-frontend--inline):not(.cws-frontend--full):not(.cws-frontend--bare) {
    width: 100%;
    max-width: var(--cws-container-max, 1200px);
    margin-inline: auto;
}

.cws-frontend--inline {
    display: inline;
}

/* Bleed-in reset — Tier 1. The WHOLE selector is wrapped in :where() (ancestor
   included) so it has ZERO specificity: the plugin's own .cws-* component rules
   (e.g. .cws-btn / .cws-pdf-link colors) and the dealer Design overrides always
   win, while it still neutralizes theme styles that distort plugin elements on
   minimal/block themes. The statutory EnVKV label opts out via --bare.
   NOTE: do NOT raise this to a class-level selector — `:not(.cws-frontend--bare)`
   outside :where() would add (0,1,0) and override button text colors. */
:where(.cws-frontend:not(.cws-frontend--bare))
    :where(h1, h2, h3, h4, h5, h6, p, a, ul, ol, li, label, blockquote, figure) {
    font-family: inherit;
    letter-spacing: normal;
    text-transform: none;
}
/* Form controls + buttons don't inherit font by default — give them a
   consistent baseline (font + size) so any plugin field/button stays sized
   correctly on any theme even if its component rule omits font-size. */
:where(.cws-frontend:not(.cws-frontend--bare))
    :where(input, select, textarea, button) {
    font-family: inherit;
    font-size: 15px;
    line-height: 1.4;
    letter-spacing: normal;
    text-transform: none;
}
:where(.cws-frontend:not(.cws-frontend--bare)) :where(a) {
    text-decoration: none;
}
:where(.cws-frontend:not(.cws-frontend--bare)) :where(img) {
    max-width: 100%;
    height: auto;
}

/* Bleed-in reset — Tier 2 (root-scoped, specificity 0,2,0 / 0,2,1). Re-asserts
   the few component props that classic themes attack with .entry-content
   button/input rules (0,1,1). Only re-asserts what themes mangle; it does not
   redefine the components. */
.cws-frontend .cws-btn,
.cws-frontend button.cws-btn {
    font-family: inherit;
    text-transform: none;
    letter-spacing: normal;
    line-height: 1.2;
}
.cws-frontend .cws-filter-grid input,
.cws-frontend .cws-filter-grid select,
.cws-frontend .cws-finance-grid input,
.cws-frontend .cws-expose-form input,
.cws-frontend .cws-expose-form select,
.cws-frontend .cws-expose-form textarea {
    font-family: inherit;
    letter-spacing: normal;
    text-transform: none;
}

.cws-archive-wrap,
.cws-finance-calculator,
.cws-expose-form-wrap {
    font-family: var(--cws-font);
    color: var(--cws-content-text, var(--cws-secondary));
}

.cws-archive-wrap {
    position: relative;
    margin-top: 0;
    background: radial-gradient(
        circle at 20% 0%,
        #ffffff 0%,
        var(--cws-archive-bg) 70%
    );
    border: var(--cws-card-border-width, 1px) solid var(--cws-line);
    border-radius: calc(var(--cws-radius) + 2px);
    box-shadow: var(--cws-card-shadow);
    padding: 24px;
    overflow: hidden;
}

.cws-archive-wrap.cws-plain-wrap {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    overflow: visible;
}

.cws-archive-wrap.cws-plain-wrap::before {
    display: none;
}

.cws-archive-wrap::before {
    content: "";
    position: absolute;
    right: -120px;
    top: -120px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(13, 110, 253, 0.12) 0%,
        rgba(13, 110, 253, 0) 72%
    );
    background: radial-gradient(
        circle,
        color-mix(in srgb, var(--cws-primary) 14%, transparent) 0%,
        transparent 72%
    );
    pointer-events: none;
}

.cws-archive-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.cws-archive-header h2 {
    margin: 0;
    font-size: 1.5rem;
    line-height: 1.2;
    letter-spacing: 0.1px;
    color: var(--cws-heading, var(--cws-secondary));
}

.cws-result-count {
    margin: 0;
    color: var(--cws-meta-text, var(--cws-muted));
    font-weight: 500;
}

.cws-filter-form {
    margin-bottom: 20px;
    background: var(--cws-card-bg, #ffffff);
    border: var(--cws-card-border-width, 1px) solid var(--cws-line);
    border-radius: var(--cws-radius);
    padding: 14px;
    box-shadow: var(--cws-card-shadow);
    touch-action: pan-y;
    position: relative;
    z-index: 4;
    pointer-events: auto;
}

.cws-search-form-only {
    position: relative;
    z-index: 2147480;
    isolation: isolate;
    pointer-events: auto;
}

.cws-search-form-only .cws-filter-form {
    position: relative;
    z-index: 2147481;
    pointer-events: auto;
}

.cws-form-focus-guard {
    pointer-events: none !important;
}

.cws-form-focus-guard .cws-search-form-only,
.cws-form-focus-guard .cws-filter-form,
.cws-form-focus-guard .cws-filter-form * {
    pointer-events: auto !important;
}

.cws-search-form-slider-host-active,
.cws-search-form-slider-host-active * {
    pointer-events: none !important;
    cursor: default !important;
}

.cws-search-form-slider-host-active .cws-search-form-only,
.cws-search-form-slider-host-active .cws-filter-form,
.cws-search-form-slider-host-active .cws-filter-form * {
    pointer-events: auto !important;
}

.cws-search-form-slider-host-active .cws-filter-form input,
.cws-search-form-slider-host-active .cws-filter-form textarea {
    cursor: text !important;
}

.cws-search-form-slider-host-active .cws-filter-form select,
.cws-search-form-slider-host-active .cws-filter-form button,
.cws-search-form-slider-host-active .cws-filter-form a,
.cws-search-form-slider-host-active .cws-filter-form label {
    cursor: pointer !important;
}

.cws-filter-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.cws-filter-grid label,
.cws-expose-form label,
.cws-finance-grid label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--cws-label, #2b2f32);
}

.cws-filter-grid input,
.cws-filter-grid select,
.cws-expose-form input,
.cws-expose-form textarea,
.cws-finance-grid input {
    box-sizing: border-box;
    width: 100%;
    border: 1px solid var(--cws-line, #ced4da);
    border-radius: var(--cws-button-radius, 10px);
    padding: 10px 12px;
    background: var(--cws-field-bg, #fff);
    min-height: 42px;
    /* Form controls do NOT inherit font by default — set it explicitly so the
       fields stay a consistent size on any theme (text/number/search inputs
       would otherwise differ per UA/theme and look oversized). */
    font-family: inherit;
    font-size: 15px;
    line-height: 1.4;
    color: var(--cws-content-text, #212529);
}

.cws-filter-grid input:focus,
.cws-filter-grid select:focus,
.cws-expose-form input:focus,
.cws-expose-form textarea:focus,
.cws-finance-grid input:focus {
    border-color: var(--cws-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.12);
    box-shadow: 0 0 0 3px
        color-mix(in srgb, var(--cws-primary) 18%, transparent);
}

.cws-filter-grid input::placeholder,
.cws-expose-form input::placeholder,
.cws-expose-form textarea::placeholder {
    color: var(--cws-meta-text, #95a0a9);
}

.cws-filter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: 12px;
}

.cws-view-switch {
    margin-left: auto;
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border-radius: 999px;
    background: var(--cws-spec-badge-bg, #e9ecef);
    border: var(--cws-card-border-width, 1px) solid var(--cws-line, #dce2e8);
}

.cws-view-select {
    display: none;
}

.cws-view-link {
    text-decoration: none;
    color: var(--cws-meta-text, #495057);
    font-weight: 600;
    padding: 8px 12px;
    border-radius: 999px;
    transition:
        background-color 0.15s ease,
        color 0.15s ease;
}

.cws-view-link:hover {
    color: var(--cws-primary);
}

.cws-view-link.is-active {
    background: var(--cws-primary);
    color: var(--cws-primary-text, #ffffff);
    box-shadow: 0 0.125rem 0.25rem rgba(13, 110, 253, 0.2);
    box-shadow: 0 0.125rem 0.25rem
        color-mix(in srgb, var(--cws-primary) 28%, transparent);
}

.cws-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    text-decoration: none;
    border: 0;
    border-radius: var(--cws-button-radius, 10px);
    padding: 10px 14px;
    min-height: 42px;
    background: var(--cws-primary-button, var(--cws-primary));
    color: var(--cws-primary-button-text, var(--cws-primary-text, #fff));
    /* <button> and <a> do NOT inherit font the same way; set it explicitly so
       the submit <button> and the reset/PDF <a> render identically on any
       theme (Divi masked this with a global input,button{font:inherit}). */
    font-family: inherit;
    font-size: 15px;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: 0.1px;
    cursor: pointer;
    transition:
        background-color 0.15s ease,
        transform 0.12s ease,
        box-shadow 0.12s ease;
}

.cws-btn:hover {
    background: #0a58ca;
    background: color-mix(in srgb, var(--cws-primary-button, var(--cws-primary)) 88%, #000000);
    transform: translateY(-1px);
    box-shadow: 0 0.25rem 0.75rem rgba(13, 110, 253, 0.28);
    box-shadow: 0 0.25rem 0.75rem
        color-mix(in srgb, var(--cws-primary-button, var(--cws-primary)) 36%, transparent);
}

.cws-btn:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.22);
    box-shadow: 0 0 0 3px
        var(--cws-focus, color-mix(in srgb, var(--cws-primary-button, var(--cws-primary)) 30%, transparent));
}

.cws-btn-muted {
    background: var(--cws-secondary-button, #212529);
    color: var(--cws-secondary-button-text, #ffffff);
}

.cws-btn-muted:hover {
    background: color-mix(in srgb, var(--cws-secondary-button, #212529) 88%, #000000);
    color: var(--cws-secondary-button-text, #ffffff);
    box-shadow: none;
}

.cws-pdf-link {
    background: var(--cws-pdf-button-bg, var(--cws-primary-button, var(--cws-primary)));
    color: var(--cws-pdf-button-text, var(--cws-primary-button-text, var(--cws-primary-text, #ffffff)));
}

.cws-pdf-link:hover {
    background: color-mix(in srgb, var(--cws-pdf-button-bg, var(--cws-primary-button, var(--cws-primary))) 88%, #000000);
    color: var(--cws-pdf-button-text, var(--cws-primary-button-text, var(--cws-primary-text, #ffffff)));
}

.cws-vehicles {
    position: relative;
}

.cws-view-grid .cws-vehicle-track {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
}

.cws-view-list .cws-vehicle-track {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

.cws-view-list .cws-vehicle-card {
    display: grid;
    grid-template-columns: 300px 1fr;
}

/* Listenansicht (Desktop): Karten-Body als 2-Spalten-Raster — Titel/Specs
   links, rechts eine feste Spalte mit Preis, Rate und CTA. Alle drei rechten
   Elemente teilen sich die Spaltenbreite → exakt gleich breit, Ränder fluchten
   mit dem PDF-Button, nichts ragt aus der Karte. Tablet/Mobile-Kollaps unten in
   den bestehenden 1200px-/992px-Breakpoints. */
.cws-view-list .cws-card-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    grid-template-areas:
        "title   side"
        "specs   side"
        "envkv   side";
    align-content: start;
    column-gap: 18px;
    row-gap: 8px;
}

.cws-view-list .cws-card-body h3 {
    grid-area: title;
    min-height: 0;
}

.cws-view-list .cws-card-body .cws-specs {
    grid-area: specs;
    align-content: flex-start;
}

.cws-view-list .cws-card-body .cws-envkv-block {
    grid-area: envkv;
    align-self: start;
}

/* Rechte Spalte: Preis, Rate und Button als EIN tighter Block oben gruppiert
   (kein Leerraum zwischen Rate und Button); EnVKV bleibt links. */
.cws-view-list .cws-card-side {
    grid-area: side;
    align-self: start;
    margin-top: 0;
    min-width: 0;
}

.cws-view-list .cws-card-pricing {
    align-items: stretch;
}

.cws-view-list .cws-card-pricing .cws-price,
.cws-view-list .cws-card-pricing .cws-monthly {
    width: 100%;
}

/* Der vollständige Ratentext bleibt in der dafür bemessenen Listenspalte als
   eine zusammengehörige Information lesbar. Andere Ansichten dürfen weiterhin
   responsiv umbrechen. */
.cws-view-list .cws-card-pricing .cws-monthly {
    white-space: nowrap;
}

.cws-view-list .cws-card-actions {
    justify-content: flex-start;
    min-width: 0;
}

.cws-view-carousel .cws-vehicle-track {
    --cws-carousel-gap: 12px;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc(
        (
                100% -
                    (
                        var(--cws-carousel-gap) *
                            (var(--cws-carousel-per-slide, 3) - 1)
                    )
            ) /
            var(--cws-carousel-per-slide, 3)
    );
    gap: var(--cws-carousel-gap);
    align-items: stretch;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 4px;
    scrollbar-width: thin;
}

.cws-view-carousel .cws-vehicle-card {
    scroll-snap-align: start;
}

.cws-view-carousel.cws-carousel-style-3d .cws-vehicle-track {
    --cws-deck-card-width: 340px;
    display: block;
    position: relative;
    min-height: clamp(460px, 62vw, 680px);
    overflow: hidden;
    perspective: 1800px;
    transform-style: preserve-3d;
    contain: layout paint;
    padding: 0;
}

.cws-view-carousel.cws-carousel-style-3d .cws-vehicle-card {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(var(--cws-deck-card-width, 340px), calc(100% - 26px));
    max-width: var(--cws-deck-card-width, 340px);
    height: auto;
    scroll-snap-align: unset;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    transition:
        transform 0.62s cubic-bezier(0.2, 0.75, 0.2, 1),
        opacity 0.24s ease;
}

.cws-view-carousel.cws-carousel-style-fan .cws-vehicle-track {
    --cws-deck-card-width: 340px;
    display: block;
    position: relative;
    min-height: clamp(460px, 62vw, 680px);
    overflow: hidden;
    contain: layout paint;
    padding: 0;
}

.cws-view-carousel.cws-carousel-style-fan .cws-vehicle-card {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(var(--cws-deck-card-width, 340px), calc(100% - 26px));
    max-width: var(--cws-deck-card-width, 340px);
    height: auto;
    scroll-snap-align: unset;
    backface-visibility: hidden;
    transition:
        transform 0.56s cubic-bezier(0.2, 0.75, 0.2, 1),
        opacity 0.22s ease,
        filter 0.22s ease;
}

.cws-view-carousel.cws-carousel-style-3d .cws-vehicle-card.is-active,
.cws-view-carousel.cws-carousel-style-3d .cws-vehicle-card.is-near,
.cws-view-carousel.cws-carousel-style-3d .cws-vehicle-card.is-far,
.cws-view-carousel.cws-carousel-style-fan .cws-vehicle-card.is-active,
.cws-view-carousel.cws-carousel-style-fan .cws-vehicle-card.is-near,
.cws-view-carousel.cws-carousel-style-fan .cws-vehicle-card.is-far {
    will-change: transform, opacity;
}

.cws-view-carousel.cws-carousel-style-3d.cws-deck-no-anim .cws-vehicle-card,
.cws-view-carousel.cws-carousel-style-fan.cws-deck-no-anim .cws-vehicle-card {
    transition: none !important;
}

.cws-view-carousel.cws-carousel-style-fan .cws-vehicle-card.is-near {
    filter: saturate(0.88) brightness(0.76);
}

.cws-view-carousel.cws-carousel-style-fan .cws-vehicle-card.is-far {
    filter: saturate(0.72) brightness(0.58);
}

.cws-view-carousel.cws-carousel-style-fan .cws-vehicle-card.is-active {
    filter: none;
}

.cws-view-carousel.cws-carousel-style-fanflip .cws-vehicle-card {
    perspective: 1600px;
}

.cws-fanflip-inner {
    position: relative;
    min-height: 100%;
    /* Fill the (JS-equalized) card height and pass the flex chain down so the
       front face's card-body can bottom-anchor the pricing cluster. */
    flex: 1;
    display: flex;
    flex-direction: column;
    transform-style: preserve-3d;
    transition: transform 0.56s cubic-bezier(0.2, 0.75, 0.2, 1);
}

.cws-fanflip-face {
    backface-visibility: hidden;
    border-radius: inherit;
}

.cws-fanflip-face-front {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.cws-fanflip-face-back {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cws-fanflip-back-bg, #101820);
    color: #ffffff;
    transform: rotateY(180deg);
    border: var(--cws-card-border-width, 1px) solid var(--cws-line);
    box-shadow: var(--cws-card-shadow);
    pointer-events: none;
    padding: 18px;
}

.cws-fanflip-face-back img {
    max-width: 74%;
    max-height: 52%;
    object-fit: contain;
}

.cws-fanflip-back-label {
    display: inline-block;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-align: center;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.34);
    background: rgba(255, 255, 255, 0.08);
}

.cws-view-carousel.cws-carousel-style-fanflip
    .cws-vehicle-card
    .cws-fanflip-inner {
    transform: rotateY(180deg);
}

.cws-view-carousel.cws-carousel-style-fanflip.cws-deck-no-anim
    .cws-fanflip-inner {
    transition: none !important;
}

.cws-view-carousel.cws-carousel-style-fanflip
    .cws-vehicle-card.is-active
    .cws-fanflip-inner {
    transform: rotateY(0deg);
}

.cws-view-carousel.cws-carousel-style-3d .cws-carousel-nav,
.cws-view-carousel.cws-carousel-style-fan .cws-carousel-nav {
    --cws-nav-transform: translateY(-50%);
    top: 50%;
    z-index: 8;
    opacity: 0;
    pointer-events: none;
}

.cws-view-carousel.cws-carousel-style-3d .cws-carousel-nav.prev,
.cws-view-carousel.cws-carousel-style-fan .cws-carousel-nav.prev {
    left: 6px;
}

.cws-view-carousel.cws-carousel-style-3d .cws-carousel-nav.next,
.cws-view-carousel.cws-carousel-style-fan .cws-carousel-nav.next {
    right: 6px;
}

.cws-view-carousel.cws-carousel-style-3d .cws-carousel-nav.is-positioned,
.cws-view-carousel.cws-carousel-style-fan .cws-carousel-nav.is-positioned {
    opacity: 1;
    pointer-events: auto;
}

.cws-view-grid .cws-vehicle-card,
.cws-view-carousel .cws-vehicle-card,
.cws-view-compact .cws-vehicle-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.cws-view-compact .cws-vehicle-track {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.cws-view-compact .cws-vehicle-card {
    border: var(--cws-card-border-width, 1px) solid var(--cws-line);
}

.cws-view-compact .cws-card-image {
    aspect-ratio: 4 / 3;
    min-height: 148px;
}

.cws-view-compact .cws-card-body {
    padding: 10px;
}

.cws-view-compact .cws-card-body h3 {
    font-size: 15px;
    min-height: 38px;
}

.cws-view-compact .cws-price {
    font-size: 18px;
}

.cws-view-compact .cws-monthly {
    font-size: 13px;
}

.cws-view-compact .cws-card-actions {
    flex-wrap: wrap;
}

.cws-view-compact .cws-btn {
    flex: 0 0 auto;
    font-size: 13px;
    padding: 8px 10px;
}

.cws-carousel-nav {
    --cws-nav-transform: translateY(0);
    position: absolute;
    top: 42%;
    z-index: 5;
    border: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(33, 37, 41, 0.88);
    color: #fff;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    font-size: 0;
    line-height: 0 !important;
    cursor: pointer;
    transform: var(--cws-nav-transform);
    transition:
        transform 0.12s ease,
        background-color 0.12s ease;
}

.cws-carousel-nav::before,
.cws-carousel-nav::after {
    content: none !important;
    display: none !important;
}

.cws-carousel-nav-icon {
    display: block;
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin: 0;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cws-carousel-nav.prev .cws-carousel-nav-icon {
    transform: rotate(180deg);
}

.cws-carousel-nav:hover {
    transform: var(--cws-nav-transform) scale(1.04);
    background: #212529;
}

.cws-carousel-nav.prev {
    left: -12px;
}

.cws-carousel-nav.next {
    right: -12px;
}

.cws-vehicle-card {
    --cws-card-stack-gap: 8px;
    border: var(--cws-card-border-width, 1px) solid var(--cws-line);
    border-radius: var(--cws-radius);
    background: var(--cws-card-bg);
    overflow: hidden;
    box-shadow: var(--cws-card-shadow);
    transition:
        transform 0.16s ease,
        box-shadow 0.16s ease;
}

.cws-vehicle-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.09);
}

.cws-vehicle-card[data-cws-card-link] {
    cursor: pointer;
}

.cws-vehicle-card[data-cws-card-link]:focus-visible {
    outline: 3px solid var(--cws-focus, color-mix(in srgb, var(--cws-primary) 45%, transparent));
    outline-offset: 1px;
}

.cws-card-image {
    display: block;
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--cws-spec-badge-bg, #e9ecef);
}

.cws-card-ribbon {
    position: absolute;
    top: 13px;
    right: -42px;
    min-width: 148px;
    padding: 6px 14px;
    background: var(--cws-ribbon-bg, #d7263d);
    color: var(--cws-ribbon-color, #fff);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 700;
    font-size: 12px;
    line-height: 1.1;
    transform: rotate(36deg);
    z-index: 3;
    pointer-events: none;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.18);
}

.cws-view-carousel.cws-carousel-style-3d.cws-card-layout-image-only
    .cws-vehicle-card.cws-vehicle-card-image-only,
.cws-view-carousel.cws-carousel-style-fan.cws-card-layout-image-only
    .cws-vehicle-card.cws-vehicle-card-image-only {
    border: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

.cws-view-carousel.cws-carousel-style-3d.cws-card-layout-image-only
    .cws-vehicle-card.cws-vehicle-card-image-only
    .cws-card-image,
.cws-view-carousel.cws-carousel-style-fan.cws-card-layout-image-only
    .cws-vehicle-card.cws-vehicle-card-image-only
    .cws-card-image {
    border-radius: 18px;
    overflow: hidden;
    background: var(--cws-spec-badge-bg, #dfe6ec);
    box-shadow: 0 16px 34px rgba(11, 22, 36, 0.28);
}

.cws-view-carousel.cws-carousel-style-3d.cws-card-layout-image-only
    .cws-vehicle-card.cws-vehicle-card-image-only
    .cws-card-ribbon,
.cws-view-carousel.cws-carousel-style-fan.cws-card-layout-image-only
    .cws-vehicle-card.cws-vehicle-card-image-only
    .cws-card-ribbon {
    right: -46px;
}

.cws-card-image img,
.cws-card-image .wp-post-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cws-image-placeholder {
    display: grid;
    place-content: center;
    width: 100%;
    height: 100%;
    color: var(--cws-meta-text, #6c757d);
}

.cws-card-image .cws-image-placeholder,
.cws-vehicle-details-media .cws-image-placeholder {
    position: absolute;
    inset: 0;
}

.cws-image-placeholder-hidden {
    display: none;
}

.cws-card-body {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 auto;
}

.cws-card-body h3 {
    margin: 0;
    font-size: 18px;
    line-height: 1.3;
    min-height: 46px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cws-card-body h3 a {
    color: var(--cws-heading, var(--cws-secondary));
    text-decoration: none;
}

.cws-card-body h3 a:hover {
    color: var(--cws-primary);
}

.cws-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.cws-view-grid .cws-specs,
.cws-view-carousel .cws-specs,
.cws-view-compact .cws-specs {
    min-height: 72px;
    align-content: flex-start;
}

.cws-specs li {
    background: var(--cws-spec-badge-bg, #f1f3f5);
    border: 1px solid var(--cws-line, #e9ecef);
    border-radius: var(--cws-badge-radius, 999px);
    padding: 5px 10px;
    font-size: 13px;
    color: var(--cws-spec-badge-text, #495057);
    list-style: none !important;
}

.cws-vehicle-card .cws-specs:not(.cws-specs-layout-rows) li {
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cws-specs li::before,
.cws-specs li::marker {
    content: none !important;
}

.cws-vehicle-card .cws-specs.cws-specs-layout-rows {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    min-height: 0;
}

.cws-vehicle-card .cws-specs.cws-specs-layout-rows li {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
    align-items: baseline;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
}

.cws-vehicle-card .cws-specs.cws-specs-layout-rows .cws-spec-label {
    color: var(--cws-label, #5b6b7c);
    font-size: 12px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cws-vehicle-card .cws-specs.cws-specs-layout-rows .cws-spec-value {
    color: var(--cws-content-text, #25394c);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cws-price {
    margin: 0;
    box-sizing: border-box;
    font-size: 24px;
    font-weight: 700;
    color: var(--cws-price-text);
    background: var(--cws-price-bg);
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: var(--cws-badge-radius, 10px);
    line-height: 1.2;
    min-height: 34px;
}

.cws-monthly {
    margin: 0;
    box-sizing: border-box;
    color: var(--cws-monthly-text);
    font-weight: 600;
    background: var(--cws-monthly-bg);
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: var(--cws-badge-radius, 10px);
    line-height: 1.25;
    min-height: 22px;
}

/* One pricing/action stack owns the bottom rhythm in every complete vehicle
   card. View variants may place or size this block, but never redefine its
   internal spacing or vertical anchoring. */
.cws-card-pricing {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--cws-card-stack-gap);
    min-width: 0;
}

.cws-card-side {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--cws-card-stack-gap);
    margin-top: auto;
    min-width: 0;
}

.cws-card-side > .cws-card-actions {
    margin-top: 0;
}

.cws-card-pricing > .cws-price,
.cws-card-pricing > .cws-monthly {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
}

.cws-card-pricing > .cws-monthly {
    padding-inline: 12px;
}

/* EnVKV-Pflichtangaben (Pkw-EnVKV Anlage 4) auf den Archiv-Karten als
   strukturierter Block: je Zeile Label links, Wert rechts; CO2-Klasse als
   offizielle Klassen-Plakette (.cws-envkv-co2class--compact mit gesetzlicher
   A–G-Farbskala, dieselbe wie die CO2-Klassentreppe/das PDF-Label). Gilt in
   allen Ansichten; in der Liste an die Grid-Area `envkv` gekoppelt. */
.cws-envkv-block {
    margin: 0;
    padding: 8px 10px;
    border: 1px solid var(--cws-line, #e0e3e8);
    border-radius: var(--cws-radius, 8px);
    background: color-mix(in srgb, var(--cws-line, #e0e3e8) 22%, transparent);
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    line-height: 1.3;
}

.cws-envkv-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0;
}

.cws-envkv-row-label {
    margin: 0;
    color: var(--cws-meta-text, #5e6f80);
}

.cws-envkv-row-value {
    margin: 0;
    text-align: right;
    font-weight: 600;
    color: var(--cws-content-text, #25394c);
}

.cws-view-compact .cws-envkv-block {
    font-size: 11px;
    padding: 7px 9px;
}

/* CO2-Klassen-Plakette: kompakte, dezente Größe — identisch in der Block-Zeile
   der Übersichts-/Slider-Karten UND in der CO2-Klasse-Zeile der Detailkarte, so
   wirkt sie überall gleich klein (nicht so groß wie die freistehende Plakette).
   Eine Regel = eine Größe für beide Stellen. */
.cws-envkv-row--class .cws-envkv-co2class--compact,
.cws-vehicle-details-environment-classrow .cws-envkv-co2class--compact {
    min-width: 28px;
    height: 22px;
    padding: 0 8px;
    font-size: 13px;
}

.cws-monthly-footnote {
    margin: 4px 0 0;
    font-size: 11px;
    line-height: 1.3;
    color: var(--cws-meta-text, #5e6f80);
}

.cws-card-actions {
    display: flex;
    gap: 8px;
    margin-top: auto;
    flex-wrap: wrap;
}

.cws-view-grid .cws-card-actions,
.cws-view-carousel .cws-card-actions,
.cws-view-compact .cws-card-actions {
    min-height: 42px;
    align-items: flex-end;
    /* The parent pricing/action stack owns both anchoring and spacing. */
    margin-top: 0;
}

.cws-pdf-card-hint {
    margin: 4px 0 0;
    width: 100%;
    font-size: 11px;
    line-height: 1.3;
    color: var(--cws-meta-text, #5e6f80);
}

.cws-pagination ul {
    display: flex;
    list-style: none;
    gap: 6px;
    padding: 0;
    margin: 16px 0 0;
}

.cws-pagination ul li {
    list-style: none !important;
}

.cws-pagination ul li::before,
.cws-pagination ul li::marker {
    content: none !important;
}

.cws-pagination a,
.cws-pagination span {
    display: inline-block;
    min-width: 34px;
    text-align: center;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid var(--cws-line, #dce2e8);
    background: var(--cws-spec-badge-bg, #f8f9fa);
    text-decoration: none;
    color: var(--cws-meta-text, #495057);
}

.cws-pagination a:hover {
    border-color: var(--cws-line, #b6c2ce);
}

.cws-pagination .current {
    background: var(--cws-primary);
    color: #fff;
    border-color: var(--cws-primary);
}

.cws-finance-calculator {
    margin-top: 20px;
    border-radius: var(--cws-radius);
    border: var(--cws-card-border-width, 1px) solid var(--cws-line);
    padding: 18px;
    background: var(--cws-card-bg, #fff);
    box-shadow: var(--cws-card-shadow);
}

.cws-finance-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.cws-finance-grid input[type="range"] {
    accent-color: var(--cws-primary);
}

.cws-finance-downpayment-output,
.cws-finance-balloon-output {
    font-size: 13px;
    color: var(--cws-meta-text, var(--cws-muted));
}

.cws-finance-result {
    margin-top: 14px;
    font-size: 20px;
    color: var(--cws-monthly-text);
    font-weight: 700;
    background: var(--cws-monthly-bg);
    display: inline-block;
    padding: 8px 12px;
    border-radius: 10px;
}

.cws-finance-result strong {
    color: inherit;
}

.cws-finance-summary-table {
    margin-top: 12px;
}

.cws-vehicle-details-finance-quick {
    border: 1px solid var(--cws-line, #e7ecf2);
    border-radius: var(--cws-detail-panel-radius, var(--cws-radius, 12px));
    background: var(--cws-detail-panel-subtle-bg, #f9fbfd);
    padding: 14px;
    display: grid;
    gap: 12px;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.cws-vehicle-details-finance-rate {
    margin: 0;
    font-weight: 700;
    color: var(--cws-monthly-text);
    background: var(--cws-monthly-bg);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: var(--cws-radius, 10px);
    justify-self: start;
    max-width: 100%;
}

.cws-vehicle-details-finance-rate strong,
.cws-vehicle-details-finance-rate .cws-vehicle-finance-monthly {
    color: inherit;
}

.cws-vehicle-details-finance-note {
    margin: 0;
    color: var(--cws-content-text, #1f2f42);
    font-size: 14px;
    font-weight: 600;
}

.cws-vehicle-details-finance-result-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 16px;
}

.cws-vehicle-details-finance-result-grid p {
    margin: 0;
    font-size: 14px;
    color: var(--cws-content-text, #314255);
    padding: 10px 12px;
    border: 1px solid var(--cws-line, #e7edf4);
    border-radius: var(--cws-radius, 12px);
    background: var(--cws-field-bg, #ffffff);
}

.cws-vehicle-details-finance-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
    /* Separate the editable inputs from the read-only result summary above so
       the two groups read as distinct ("Ergebnis" vs "Eingaben") instead of one
       dense block. */
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--cws-line, #e7edf4);
}

.cws-vehicle-details-finance-controls label {
    display: grid;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--cws-label, #314255);
}

.cws-vehicle-details-finance-controls input {
    box-sizing: border-box;
    width: 100%;
    border: 1px solid var(--cws-line, #ced6de);
    border-radius: var(--cws-button-radius, 10px);
    min-height: 42px;
    padding: 10px 12px;
    background: var(--cws-field-bg, #ffffff);
    font-family: inherit;
    font-size: 15px;
    line-height: 1.4;
    color: var(--cws-content-text, #1f2f42);
}

.cws-vehicle-details-finance-controls input[readonly] {
    background: var(--cws-spec-badge-bg, #f3f6fa);
    color: var(--cws-meta-text, #627487);
    cursor: default;
}

.cws-vehicle-details-finance-controls input:focus {
    border-color: var(--cws-primary);
    outline: none;
    box-shadow: 0 0 0 3px
        color-mix(in srgb, var(--cws-primary) 18%, transparent);
}

.cws-vehicle-details-finance-actions {
    display: flex;
    justify-content: flex-start;
    gap: 8px;
    flex-wrap: wrap;
}

.cws-vehicle-details-finance-disclaimer {
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--cws-meta-text, #5e6f80);
}

.cws-finance-detail-modal {
    position: fixed;
    inset: 0;
    z-index: 2147484;
    display: none;
    /* The modal is portaled to <body> on open (see frontend.js) to escape any
       ancestor stacking context / transformed ancestor — e.g. a Divi sticky
       header or a section with transform/filter, which would otherwise trap the
       fixed positioning and z-index and paint over the popup. Once outside the
       .cws-frontend wrapper it no longer inherits the themed text colour/font,
       so it themes itself from the :root design vars. */
    color: var(--cws-content-text, #1f2937);
    font-family: var(--cws-font, inherit);
}

.cws-finance-detail-modal.is-open {
    display: block;
}

.cws-finance-detail-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 15, 30, 0.54);
}

.cws-finance-detail-modal-dialog {
    box-sizing: border-box;
    position: relative;
    margin: var(--cws-modal-top-offset, 4vh) auto 8px;
    width: min(760px, calc(100% - 24px));
    max-height: calc(100vh - var(--cws-modal-top-offset, 4vh) - 8px);
    max-height: calc(100dvh - var(--cws-modal-top-offset, 4vh) - 8px);
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: var(--cws-card-bg, #ffffff);
    border-radius: 16px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.26);
    padding: 18px;
}

.cws-finance-detail-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.cws-finance-detail-head h3 {
    margin: 0;
    font-size: 1.2rem;
}

.cws-finance-detail-close {
    border: 0;
    background: transparent;
    /* A <button> uses the UA `buttontext` colour (≈ black) and does NOT inherit
       the themed wrapper colour, so on dark design templates the × was nearly
       invisible on the dark card. Follow the surrounding themed text colour so
       the close glyph stays readable on every template. */
    color: inherit;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    display: inline-grid;
    place-items: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: var(--cws-button-radius, 10px);
}

.cws-finance-detail-close:focus-visible {
    outline: 3px solid var(--cws-focus, var(--cws-primary));
    outline-offset: 2px;
}

.cws-finance-detail-grid {
    width: 100%;
    border-collapse: collapse;
}

.cws-finance-detail-grid th,
.cws-finance-detail-grid td {
    padding: 9px 10px;
    text-align: left;
}

.cws-finance-detail-grid tr:nth-child(odd) {
    background: var(--cws-spec-badge-bg, #f2f4f7);
}

.cws-finance-detail-grid tr:last-child {
    border-top: 1px solid var(--cws-line, #d5dde8);
    font-weight: 700;
}

.cws-gallery-fullscreen-modal {
    position: fixed;
    inset: 0;
    /* Portaled to <body> on open (see frontend.js) to escape ancestor stacking
       contexts / transformed ancestors (Divi sticky headers/sections). Raised
       from 10000 — that sat below typical sticky-header z-indexes (~99999), so
       even portaled the header could still paint over it. Self-theme from :root
       vars since it leaves the .cws-frontend wrapper. */
    z-index: 2147483;
    color: var(--cws-content-text, #1f2937);
    font-family: var(--cws-font, inherit);
    display: none;
}

.cws-gallery-fullscreen-modal.is-open {
    display: block;
}

.cws-gallery-fullscreen-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 15, 30, 0.66);
}

.cws-gallery-fullscreen-modal-dialog {
    position: relative;
    margin: 2vh auto;
    width: min(1160px, calc(100% - 24px));
    max-height: 96vh;
    overflow: auto;
    background: var(--cws-card-bg, #ffffff);
    border-radius: 16px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.3);
    padding: 18px;
    display: grid;
    gap: 12px;
}

.cws-gallery-fullscreen-slider {
    position: relative;
}

.cws-gallery-fullscreen-stage {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: #0f1722;
    min-height: min(72vh, 720px);
}

.cws-gallery-fullscreen-stage img {
    width: 100%;
    height: min(72vh, 720px);
    object-fit: contain;
    display: block;
}

.cws-gallery-fullscreen-stage .cws-image-placeholder {
    color: #d8e2ed;
}

.cws-gallery-fullscreen-nav {
    border: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(16, 22, 36, 0.9);
    color: #ffffff;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

.cws-gallery-fullscreen-nav.prev {
    left: 10px;
}

.cws-gallery-fullscreen-nav.next {
    right: 10px;
}

.cws-gallery-fullscreen-nav:hover {
    background: rgba(11, 18, 30, 0.96);
}

.cws-gallery-fullscreen-counter {
    margin: 0;
    text-align: center;
    color: #3a4b5e;
    font-weight: 600;
}

.cws-vehicle-360-modal {
    position: fixed;
    inset: 0;
    z-index: 2147483;
    /* Portaled to <body> on open (see frontend.js) to escape ancestor stacking
       contexts / transformed ancestors (Divi). Self-theme from :root vars since
       it leaves the .cws-frontend wrapper. */
    color: var(--cws-content-text, #1f2937);
    font-family: var(--cws-font, inherit);
    display: none;
}

.cws-vehicle-360-modal.is-open {
    display: block;
}

.cws-vehicle-360-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 15, 30, 0.66);
}

.cws-vehicle-360-modal-dialog {
    --cws-modal-top: max(16px, calc(env(safe-area-inset-top, 0px) + 8px));
    position: relative;
    margin: var(--cws-modal-top) auto 12px;
    width: min(980px, calc(100% - 24px));
    max-height: calc(100vh - var(--cws-modal-top) - 12px);
    overflow: auto;
    background: var(--cws-card-bg, #ffffff);
    border-radius: 16px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.3);
    padding: 18px;
    display: grid;
    gap: 12px;
}

.cws-vehicle-360-stage {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: #0f1722;
    height: min(68vh, 640px);
    min-height: 320px;
    touch-action: none;
}

.cws-vehicle-360-panorama {
    position: absolute;
    inset: 0;
    background-repeat: repeat-x;
    background-size: auto 100%;
    background-position: 0 50%;
    cursor: grab;
    user-select: none;
}

.cws-vehicle-360-stage.is-dragging .cws-vehicle-360-panorama {
    cursor: grabbing;
}

.cws-vehicle-360-stage:not(.is-ready) .cws-vehicle-360-panorama {
    display: none;
}

.cws-vehicle-360-stage .cws-image-placeholder {
    color: #d8e2ed;
}

.cws-vehicle-360-hint {
    margin: 0;
    text-align: center;
    color: var(--cws-meta-text, #5e6f80);
    font-size: 13px;
}

.cws-vehicle-details-note {
    margin: 10px 0 0;
    color: var(--cws-content-text, #314255);
    background: var(--cws-card-bg, #f7f9fc);
    border: 1px solid var(--cws-line, #e3eaf2);
    border-radius: 12px;
    padding: 12px;
    line-height: 1.5;
}

.cws-vehicle-details-note + .cws-vehicle-details-note {
    margin-top: 10px;
}

.cws-expose-form-wrap {
    margin-top: 20px;
    border-radius: var(--cws-radius);
    border: var(--cws-card-border-width, 1px) solid var(--cws-line);
    background: var(--cws-card-bg, #fff);
    padding: 18px;
    box-shadow: var(--cws-card-shadow);
}

.cws-vehicle-details {
    margin-top: 20px;
    border-radius: var(--cws-radius);
    border: var(--cws-card-border-width, 1px) solid var(--cws-line);
    background: var(--cws-archive-bg, #fff);
    padding: 18px;
    box-shadow: var(--cws-card-shadow);
    color: var(--cws-content-text, #2f4458);
}

/* Hide theme-level author/date meta on singular vehicle pages. */
body.single-cws_vehicle .entry-meta,
body.single-cws_vehicle .entry-info,
body.single-cws_vehicle .post-meta,
body.single-cws_vehicle .post-meta-info,
body.single-cws_vehicle .entry-title,
body.single-cws_vehicle .post-title,
body.single-cws_vehicle .wp-block-post-title,
body.single-cws_vehicle .entry-byline,
body.single-cws_vehicle .posted-on,
body.single-cws_vehicle .byline,
body.single-cws_vehicle .author,
body.single-cws_vehicle .et_pb_post .post-meta,
body.single-cws_vehicle .et_pb_title_meta_container,
body.single-cws_vehicle .ast-single-post-meta,
body.single-cws_vehicle .elementor-post-info,
body.single-cws_vehicle .wp-block-post-author,
body.single-cws_vehicle .wp-block-post-date,
body.single-cws_vehicle .wp-block-post-author-name,
body.single-cws_vehicle .wp-block-comments,
body.single-cws_vehicle .wp-block-post-comments,
body.single-cws_vehicle .entry-footer,
body.single-cws_vehicle .entry-meta-bar {
    display: none !important;
}

body.single-cws_vehicle #main-content .container:before,
body.single-cws_vehicle.et_right_sidebar #main-content .container:before {
    display: none !important;
}

body.single-cws_vehicle #left-area,
body.single-cws_vehicle .content-area {
    width: 100% !important;
    max-width: 100% !important;
    padding-right: 0 !important;
    float: none !important;
}

body.single-cws_vehicle #sidebar,
body.single-cws_vehicle .widget-area {
    display: none !important;
}

/* Divi-only: Divi's full-width single template overlaps the content with a
   large title header, so push the detail card down. Guarded behind Divi's
   body class (body.et-db) so non-Divi themes are NOT pushed down 200px
   (which was a cross-theme layout bug). */
@media (min-width: 981px) {
    body.et-db.single-cws_vehicle .cws-vehicle-details {
        margin-top: 200px !important;
    }
}

.cws-vehicle-details-rich {
    --cws-detail-zone-gap: 16px;
    --cws-detail-panel-gap: 12px;
    --cws-detail-panel-padding: 16px;
    --cws-detail-panel-radius: var(--cws-radius, 14px);
    --cws-detail-panel-border: var(--cws-line, #e8eef5);
    --cws-detail-panel-bg: var(--cws-card-bg, #ffffff);
    --cws-detail-panel-subtle-bg: var(--cws-card-bg, #f8fafc);
    --cws-detail-panel-notice-bg: var(--cws-card-bg, #ffffff);
    --cws-detail-panel-feature-bg: var(--cws-card-bg, #ffffff);
    --cws-detail-panel-shadow: var(--cws-card-shadow, 0 10px 28px rgba(25, 44, 62, 0.06));
    --cws-detail-hero-side-inset: 12px;
    --cws-detail-hero-content-rail: 14px;
    display: grid;
    gap: var(--cws-detail-zone-gap);
}

.cws-vehicle-details-rich[data-cws-detail-preset="modern_card"] {
    --cws-detail-zone-gap: 16px;
    --cws-detail-panel-gap: 12px;
    --cws-detail-panel-padding: 16px;
    --cws-detail-panel-radius: var(--cws-radius, 14px);
}

.cws-vehicle-details-zone,
.cws-vehicle-details-zone-slot,
.cws-vehicle-details-module {
    display: grid;
    gap: var(--cws-detail-panel-gap);
    min-width: 0;
}

.cws-vehicle-details-zone--hero_zone {
    container-name: cws-vehicle-hero-zone;
    container-type: inline-size;
}

.cws-vehicle-details-secondary-stack {
    display: grid;
    gap: var(--cws-detail-panel-gap);
}

.cws-vehicle-details-zone-slot--technical_data {
    /* Stack the modules (Basisdaten first, then Fahrzeug & Zustand), each full
       width, so a short module no longer leaves a big empty column next to a
       long one. Each module's field table flows in 2 columns below. */
    grid-template-columns: 1fr;
    align-items: start;
}

/* Full-width technical-data tables in a 2-column field grid (scoped to this
   slot only, so the EnVKV table elsewhere is untouched). */
.cws-vehicle-details-zone-slot--technical_data .cws-vehicle-details-table,
.cws-vehicle-details-zone-slot--technical_data .cws-vehicle-details-table tbody {
    display: block;
}
.cws-vehicle-details-zone-slot--technical_data .cws-vehicle-details-table tbody {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 30px;
    box-sizing: border-box;
    padding: 0 var(--cws-detail-panel-padding) 8px !important;
}
.cws-vehicle-details-zone-slot--technical_data .cws-vehicle-details-table tr {
    display: grid;
    grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
    align-items: baseline;
    gap: 12px;
    /* Divi applies ID-scoped padding to table rows in addition to its cell
       padding. Own the complete row rhythm here so customer themes cannot
       create double vertical spacing or theme-coloured separators. */
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}
.cws-vehicle-details-zone-slot--technical_data .cws-vehicle-details-table th,
.cws-vehicle-details-zone-slot--technical_data .cws-vehicle-details-table td {
    border-bottom: 0;
    /* Divi and similar themes use ID-scoped table-cell padding. Keep this
       narrowly scoped reset authoritative so identical vehicle data retains
       the same row rhythm in shortcode and native detail-page contexts. */
    padding: 8px 0 !important;
    width: auto;
    min-width: 0;
    overflow-wrap: normal;
    word-break: normal;
}

.cws-vehicle-details-panel {
    min-width: 0;
}

.cws-vehicle-details-panel--panel_base,
.cws-vehicle-details-panel--panel_feature,
.cws-vehicle-details-panel--panel_notice,
.cws-vehicle-details-panel--panel_utility {
    border: 1px solid var(--cws-detail-panel-border);
    border-radius: var(--cws-detail-panel-radius);
    background: var(--cws-detail-panel-bg);
    box-shadow: var(--cws-detail-panel-shadow);
    overflow: hidden;
}

.cws-vehicle-details-panel--panel_feature {
    background: var(--cws-detail-panel-feature-bg);
}

.cws-vehicle-details-panel--panel_notice {
    background: var(--cws-detail-panel-notice-bg);
}

.cws-vehicle-details-panel--panel_utility {
    background: var(--cws-detail-panel-notice-bg);
}

.cws-vehicle-details-panel--panel_plain {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.cws-vehicle-details-zone--hero_zone > .cws-vehicle-details-module {
    gap: 0;
}

.cws-vehicle-details-module--qr_module {
    text-align: center;
}

.cws-vehicle-contact-person-body {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    padding: var(--cws-detail-panel-padding, 16px) var(--cws-detail-panel-padding, 16px) 12px;
}

.cws-vehicle-contact-person-body--no-image {
    grid-template-columns: 1fr;
}

.cws-vehicle-contact-person-image {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--cws-soft, #f8f9fa);
}

.cws-vehicle-contact-person--dealer .cws-vehicle-contact-person-image {
    object-fit: contain;
    padding: 9px;
    background: var(--cws-card-bg, #ffffff);
    border: 1px solid var(--cws-detail-panel-border, var(--cws-line, #e7ecf2));
    box-sizing: border-box;
}

.cws-vehicle-contact-person-content {
    min-width: 0;
}

.cws-vehicle-contact-person-name {
    color: var(--cws-heading, #212529);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
}

.cws-vehicle-contact-person-role,
.cws-vehicle-contact-person-availability {
    margin-top: 4px;
    color: var(--cws-meta-text, #5e6f80);
    font-size: 14px;
    line-height: 1.4;
}

.cws-vehicle-contact-person-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 8px;
    margin-top: 2px;
    grid-column: 1 / -1;
}

.cws-vehicle-contact-action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border: 1px solid var(--cws-primary, #0d6efd);
    border-radius: 999px;
    background: var(--cws-primary, #0d6efd);
    color: #ffffff;
    text-decoration: none;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.18s ease;
}

.cws-vehicle-contact-action-button:hover,
.cws-vehicle-contact-action-button:focus-visible {
    background: var(--cws-primary-hover, var(--cws-primary, #0d6efd));
    border-color: var(--cws-primary-hover, var(--cws-primary, #0d6efd));
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.16);
    outline: none;
}

.cws-vehicle-contact-action-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}

.cws-vehicle-contact-person-whatsapp-button {
    background: #1f9d55;
    border-color: #1f9d55;
    color: #ffffff;
}

.cws-vehicle-contact-person-whatsapp-button:hover,
.cws-vehicle-contact-person-whatsapp-button:focus-visible {
    background: #168a49;
    border-color: #168a49;
    color: #ffffff;
}

.cws-vehicle-details-hero-submodule--contact_module {
    padding-inline-start: var(--cws-detail-hero-content-rail);
    box-sizing: border-box;
}

.cws-vehicle-details-hero-submodule--contact_module .cws-vehicle-details-module {
    margin: 0;
}

.cws-vehicle-contact-person--hero {
    border: 1px solid
        var(--cws-hero-border, var(--cws-detail-panel-border, var(--cws-line, #e7ecf2)));
    border-radius: var(--cws-detail-panel-radius, var(--cws-radius, 12px));
    background: var(--cws-hero-card-bg, var(--cws-detail-panel-bg, var(--cws-card-bg, #ffffff)));
    padding: var(--cws-hero-card-padding, 14px);
    display: grid;
    gap: 10px;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.cws-vehicle-contact-person--hero .cws-vehicle-details-section-title {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    min-height: 0;
    height: auto;
    margin: calc(var(--cws-hero-card-padding, 14px) * -1)
        calc(var(--cws-hero-card-padding, 14px) * -1) 0;
    padding: 14px 16px;
    background: var(--cws-hero-card-bg, var(--cws-detail-panel-bg, var(--cws-card-bg, #ffffff)));
    border-bottom: 1px solid
        var(--cws-hero-border, var(--cws-detail-panel-border, var(--cws-line, #e7ecf2)));
    color: var(--cws-heading, #212529);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    text-transform: none;
    letter-spacing: 0;
}

.cws-vehicle-contact-person--hero .cws-vehicle-contact-person-body {
    grid-template-columns: 60px minmax(0, 1fr) minmax(150px, auto);
    gap: 12px;
    align-items: start;
    padding: 0;
}

.cws-vehicle-contact-person--hero .cws-vehicle-contact-person-body--no-image {
    grid-template-columns: minmax(0, 1fr) minmax(150px, auto);
}

.cws-vehicle-contact-person--hero
    .cws-vehicle-contact-person-body--no-image
    .cws-vehicle-contact-person-links {
    grid-column: 2;
}

.cws-vehicle-contact-person--hero .cws-vehicle-contact-person-image {
    width: 60px;
    height: 60px;
}

.cws-vehicle-contact-person--hero.cws-vehicle-contact-person--dealer
    .cws-vehicle-contact-person-image {
    padding: 8px;
}

.cws-vehicle-contact-person--hero .cws-vehicle-contact-person-name {
    font-size: 16px;
}

.cws-vehicle-contact-person--hero .cws-vehicle-contact-person-role,
.cws-vehicle-contact-person--hero .cws-vehicle-contact-person-availability {
    font-size: 13px;
}

.cws-vehicle-contact-person--hero .cws-vehicle-contact-person-links {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 8px;
    margin-top: 0;
    grid-column: 3;
    grid-row: 1;
    align-self: start;
}

.cws-vehicle-contact-person--hero .cws-vehicle-contact-action-button {
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
}

.cws-vehicle-contact-person--card {
    height: 100%;
}

.cws-vehicle-contact-person--card .cws-vehicle-details-section-title {
    margin: 0;
}

.cws-vehicle-contact-person--card .cws-vehicle-contact-person-body {
    padding-bottom: 14px;
}

.cws-vehicle-contact-person .cws-form-message {
    display: grid;
    align-items: center;
    width: calc(100% - (var(--cws-detail-panel-padding, 16px) * 2));
    min-height: 42px;
    margin: 0 var(--cws-detail-panel-padding, 16px);
    padding: 0 12px;
    line-height: 1.35;
    box-sizing: border-box;
}

.cws-vehicle-contact-form {
    display: grid;
    gap: 12px;
    padding: 0 var(--cws-detail-panel-padding, 16px) var(--cws-detail-panel-padding, 16px);
}

.cws-vehicle-contact-form-fields,
.cws-vehicle-contact-form-options,
.cws-vehicle-contact-form-actions {
    min-width: 0;
}

.cws-vehicle-contact-form-fields {
    display: grid;
    gap: 12px;
}

.cws-vehicle-contact-form-options {
    display: grid;
    gap: 8px;
    padding-top: 2px;
}

.cws-vehicle-contact-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.cws-vehicle-contact-person--hero .cws-vehicle-contact-form {
    padding: 0;
}

.cws-vehicle-contact-person--hero .cws-form-message {
    width: 100%;
    margin: 0;
}

.cws-vehicle-contact-form label {
    display: grid;
    gap: 6px;
    min-width: 0;
    color: var(--cws-label, #2b2f32);
    font-size: 14px;
    font-weight: 600;
}

.cws-vehicle-contact-form input,
.cws-vehicle-contact-form textarea {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    border: 1px solid var(--cws-line, #ced6de);
    border-radius: var(--cws-button-radius, 10px);
    padding: 10px 12px;
    background: var(--cws-field-bg, #fff);
    color: var(--cws-content-text, #212529);
    box-sizing: border-box;
}

.cws-vehicle-contact-form textarea {
    resize: vertical;
    min-height: 96px;
}

.cws-vehicle-contact-form input:focus,
.cws-vehicle-contact-form textarea:focus {
    border-color: var(--cws-primary, #0d6efd);
    outline: none;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.12);
    box-shadow: 0 0 0 3px
        color-mix(in srgb, var(--cws-primary, #0d6efd) 18%, transparent);
}

.cws-vehicle-contact-form input::placeholder,
.cws-vehicle-contact-form textarea::placeholder {
    color: var(--cws-meta-text, #95a0a9);
}

.cws-vehicle-contact-form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.cws-vehicle-contact-form-grid--name-phone {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cws-vehicle-contact-whatsapp-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    gap: 8px;
    align-items: start;
    padding: 0 var(--cws-detail-panel-padding, 16px);
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.cws-vehicle-contact-whatsapp-row .cws-vehicle-contact-action-button {
    justify-self: end;
}

.cws-vehicle-contact-form .cws-consent {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    align-items: start;
    column-gap: 8px;
    row-gap: 0;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.35;
}

.cws-vehicle-contact-form .cws-consent input[type="checkbox"] {
    width: 16px;
    min-width: 16px;
    height: 16px;
    min-height: 16px;
    padding: 0;
    margin: 1px 0 0;
    align-self: start;
    justify-self: start;
    box-sizing: border-box;
    accent-color: var(--cws-primary);
}

/* Themed opt-in checkboxes (consent + expose-PDF request) — a custom box that
   follows the design instead of staying system-white. Purely visual; keeps the
   16px box size, so the responsive layout is unaffected. */
.cws-frontend .cws-vehicle-contact-form input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
    border: 1px solid var(--cws-line, #ced6de);
    border-radius: 4px;
    background: var(--cws-field-bg, #ffffff);
    cursor: pointer;
    position: relative;
    flex: 0 0 auto;
    box-sizing: border-box;
    transition:
        background-color 0.12s ease,
        border-color 0.12s ease;
}

.cws-frontend .cws-vehicle-contact-form input[type="checkbox"]:checked {
    background: var(--cws-primary);
    border-color: var(--cws-primary);
}

.cws-frontend .cws-vehicle-contact-form input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 1px;
    width: 4px;
    height: 8px;
    border: solid var(--cws-primary-text, #ffffff);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.cws-frontend .cws-vehicle-contact-form input[type="checkbox"]:focus-visible {
    outline: 2px solid
        var(--cws-focus, color-mix(in srgb, var(--cws-primary) 45%, transparent));
    outline-offset: 1px;
}

/* Themed scrollbars across the plugin frontend (textarea, modals, thumb strips)
   so they don't stay system-white on dark/custom designs. scrollbar-color is
   inherited, so descendants pick it up automatically. */
.cws-frontend {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--cws-primary) 55%, transparent)
        transparent;
}

.cws-frontend ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.cws-frontend ::-webkit-scrollbar-track {
    background: transparent;
}

.cws-frontend ::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--cws-primary) 45%, transparent);
    border-radius: 8px;
}

.cws-frontend ::-webkit-scrollbar-thumb:hover {
    background: var(--cws-primary);
}

.cws-vehicle-contact-form .cws-consent span {
    display: block;
    min-width: 0;
    line-height: 1.35;
}

.cws-vehicle-contact-form .cws-consent a {
    color: var(--cws-primary, #0d6efd);
    text-decoration: underline;
}

.cws-vehicle-contact-form input.cws-vehicle-contact-validation-attention,
.cws-vehicle-contact-form textarea.cws-vehicle-contact-validation-attention,
.cws-vehicle-contact-form .cws-consent.cws-vehicle-contact-validation-attention {
    border-color: var(--cws-primary-button, var(--cws-primary, #0d6efd));
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.12);
    box-shadow: 0 0 0 3px
        color-mix(
            in srgb,
            var(--cws-primary-button, var(--cws-primary, #0d6efd)) 16%,
            transparent
        );
}

.cws-vehicle-contact-validation-message {
    margin: -4px 0 0;
    padding: 0;
    color: #b42318;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
}

.cws-vehicle-contact-whatsapp-row .cws-consent {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    align-items: start;
    column-gap: 8px;
    row-gap: 0;
    min-width: 0;
    color: var(--cws-hero-helper-color, var(--cws-meta-text, #5e6f80));
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
}

.cws-vehicle-contact-whatsapp-row .cws-consent input[type="checkbox"] {
    width: 16px;
    min-width: 16px;
    height: 16px;
    min-height: 16px;
    padding: 0;
    margin: 1px 0 0;
    align-self: start;
    justify-self: start;
    box-sizing: border-box;
}

.cws-vehicle-contact-whatsapp-row .cws-consent span {
    display: block;
    min-width: 0;
    line-height: 1.35;
}

.cws-vehicle-contact-whatsapp-row .cws-consent a {
    color: var(--cws-primary, #0d6efd);
    text-decoration: underline;
}

.cws-vehicle-contact-whatsapp-consent {
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 0;
    box-sizing: border-box;
}

.cws-vehicle-contact-whatsapp-consent--attention {
    border-color: #1f9d55;
    box-shadow: 0 0 0 3px rgba(31, 157, 85, 0.14);
}

.cws-vehicle-contact-whatsapp-consent-error {
    margin: -4px 0 0;
    padding: 0 var(--cws-detail-panel-padding, 16px);
    color: #b42318;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
}

.cws-vehicle-contact-form > .cws-btn,
.cws-vehicle-contact-form-actions .cws-btn {
    justify-self: start;
    align-self: start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    max-width: 100%;
    height: 42px;
    min-height: 42px;
    max-height: 42px;
    padding-inline: 14px;
    line-height: 1;
    white-space: nowrap;
}

.cws-vehicle-contact-person--hero .cws-vehicle-contact-form {
    gap: 10px;
    padding: 0;
}

.cws-vehicle-contact-person--hero .cws-vehicle-contact-whatsapp-row {
    grid-template-columns: minmax(0, 1fr) 42px;
    gap: 8px;
    padding: 0;
    width: 100%;
}

.cws-vehicle-contact-person--hero .cws-vehicle-contact-whatsapp-consent-error {
    padding: 0;
}

.cws-vehicle-contact-person--hero .cws-vehicle-contact-form-fields {
    gap: var(--cws-hero-field-gap);
}

.cws-vehicle-contact-person--hero .cws-vehicle-contact-form-options {
    gap: 7px;
    padding-top: 0;
}

.cws-vehicle-contact-person--hero .cws-vehicle-contact-form label {
    font-size: var(--cws-hero-label-font-size, 13px);
}

.cws-vehicle-contact-person--hero
    .cws-vehicle-contact-form
    input:not([type="checkbox"]),
.cws-vehicle-contact-person--hero .cws-vehicle-contact-form textarea {
    min-height: var(--cws-hero-control-height, 40px);
    border-color: var(--cws-hero-border, var(--cws-line, #d6dee8));
    border-radius: var(--cws-button-radius, 10px);
    background: var(--cws-hero-input-bg, var(--cws-field-bg, var(--cws-card-bg, #ffffff)));
    font-size: var(--cws-hero-control-font-size, 13px);
}

.cws-vehicle-contact-person--hero .cws-vehicle-contact-form textarea {
    min-height: 108px;
}

.cws-vehicle-contact-person--hero .cws-vehicle-contact-form > .cws-btn,
.cws-vehicle-contact-person--hero .cws-vehicle-contact-form-actions .cws-btn {
    justify-self: start;
    width: auto;
}

.cws-vehicle-contact-person--card .cws-vehicle-contact-form {
    gap: 14px;
}

.cws-vehicle-contact-person--card .cws-vehicle-contact-form-fields {
    gap: 12px;
}

.cws-vehicle-contact-person--card .cws-vehicle-contact-form-options {
    gap: 9px;
    padding-top: 4px;
}

.cws-vehicle-details-hero-offer .cws-vehicle-contact-person--hero {
    gap: 10px;
}

.cws-vehicle-details-hero-offer
    .cws-vehicle-contact-person--hero
    .cws-vehicle-details-section-title {
    font-size: 16px;
}

.cws-vehicle-details-hero-offer
    .cws-vehicle-contact-person--hero
    .cws-vehicle-contact-person-body {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 10px;
}

.cws-vehicle-details-hero-offer
    .cws-vehicle-contact-person--hero
    .cws-vehicle-contact-person-body--no-image {
    grid-template-columns: 1fr;
}

.cws-vehicle-details-hero-offer
    .cws-vehicle-contact-person--hero
    .cws-vehicle-contact-person-image {
    width: 52px;
    height: 52px;
}

.cws-vehicle-details-hero-offer .cws-vehicle-contact-form,
.cws-vehicle-details-hero-contact .cws-vehicle-contact-form {
    gap: var(--cws-hero-field-gap);
}

.cws-vehicle-details-hero-offer .cws-vehicle-contact-form-fields,
.cws-vehicle-details-hero-contact .cws-vehicle-contact-form-fields {
    gap: var(--cws-hero-field-gap);
}

.cws-vehicle-details-hero-offer .cws-vehicle-contact-form-options,
.cws-vehicle-details-hero-contact .cws-vehicle-contact-form-options {
    gap: 7px;
}

.cws-vehicle-details-hero-offer .cws-vehicle-contact-form-grid,
.cws-vehicle-details-hero-contact .cws-vehicle-contact-form-grid {
    gap: var(--cws-hero-field-gap);
}

.cws-vehicle-details-hero-offer .cws-vehicle-details-finance-controls {
    gap: var(--cws-hero-field-gap) 12px;
}

.cws-vehicle-details-hero .cws-vehicle-contact-form label,
.cws-vehicle-details-hero-offer .cws-vehicle-details-finance-controls label {
    gap: 5px;
    font-size: var(--cws-hero-label-font-size);
    font-weight: 600;
    color: var(--cws-label, #314255);
}

.cws-vehicle-details-hero-offer
    .cws-vehicle-contact-form
    input:not([type="checkbox"]),
.cws-vehicle-details-hero-offer .cws-vehicle-contact-form textarea,
.cws-vehicle-details-hero-contact
    .cws-vehicle-contact-form
    input:not([type="checkbox"]),
.cws-vehicle-details-hero-contact .cws-vehicle-contact-form textarea,
.cws-vehicle-details-hero-offer .cws-vehicle-details-finance-controls input {
    min-height: var(--cws-hero-control-height);
    padding: var(--cws-hero-control-padding-y) var(--cws-hero-control-padding-x);
    border: 1px solid var(--cws-hero-border, #ced6de);
    border-radius: var(--cws-button-radius, 10px);
    background: var(--cws-hero-input-bg, var(--cws-field-bg, #ffffff));
    color: var(--cws-content-text, #1f2f42);
    font-size: var(--cws-hero-control-font-size);
}

.cws-vehicle-details-hero-offer .cws-vehicle-contact-form textarea {
    min-height: 74px;
}

.cws-vehicle-details-hero-offer .cws-vehicle-details-finance-note,
.cws-vehicle-details-hero .cws-vehicle-details-finance-disclaimer,
.cws-vehicle-details-hero .cws-vehicle-contact-form .cws-consent {
    font-size: var(--cws-hero-helper-font-size);
    line-height: 1.35;
    font-weight: 500;
    color: var(--cws-hero-helper-color);
}

.cws-vehicle-details-hero .cws-vehicle-contact-form .cws-consent span {
    line-height: 1.35;
}

.cws-vehicle-details-hero-offer .cws-vehicle-details-finance-controls input[readonly] {
    background: var(--cws-hero-surface-bg, var(--cws-field-bg, #f3f6fa));
}

.cws-vehicle-details-hero-offer
    .cws-vehicle-contact-form
    .cws-consent
    input[type="checkbox"] {
    width: 16px;
    min-width: 16px;
    height: 16px;
    min-height: 16px;
    padding: 0;
    margin: 1px 0 0;
}

.cws-vehicle-details-hero-offer .cws-vehicle-contact-person-links {
    gap: 8px;
}

.cws-vehicle-details-hero-offer .cws-vehicle-contact-action-button {
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
    padding: 0;
}

.cws-vehicle-details-hero-offer .cws-vehicle-contact-form > .cws-btn,
.cws-vehicle-details-hero-offer .cws-vehicle-contact-form-actions .cws-btn,
.cws-vehicle-details-hero-contact .cws-vehicle-contact-form-actions .cws-btn {
    height: var(--cws-hero-control-height);
    min-height: var(--cws-hero-control-height);
    max-height: var(--cws-hero-control-height);
    padding: var(--cws-hero-control-padding-y) 12px;
}

.cws-vehicle-details-hero-contact .cws-vehicle-details-hero-submodule {
    padding-inline-start: 0;
}

.cws-vehicle-details-hero-contact .cws-vehicle-contact-person--hero {
    gap: 12px;
}

.cws-vehicle-details-hero-contact .cws-vehicle-contact-form-grid {
    grid-template-columns: 1fr;
}

.cws-vehicle-details-hero-contact .cws-vehicle-contact-form-grid--name-phone {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cws-vehicle-details-hero-contact .cws-vehicle-contact-form textarea {
    min-height: 112px;
}

.cws-contact-hp {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

.cws-vehicle-details-panel > .cws-vehicle-details-section,
.cws-vehicle-details-panel > .cws-vehicle-details-environment,
.cws-vehicle-details-panel > .cws-vehicle-details-secondary-panel,
.cws-vehicle-details-panel > .cws-vehicle-details-sections {
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

.cws-vehicle-details-hero {
    --cws-hero-card-padding: var(--cws-detail-panel-padding, 16px);
    --cws-hero-control-font-size: 13px;
    --cws-hero-label-font-size: 13px;
    --cws-hero-helper-font-size: 12px;
    --cws-hero-helper-color: var(--cws-meta-text, var(--cws-muted, #5e6f80));
    --cws-hero-control-height: 38px;
    --cws-hero-control-padding-y: 8px;
    --cws-hero-control-padding-x: 10px;
    --cws-hero-module-gap: 14px;
    --cws-hero-field-gap: 8px;
    --cws-hero-tile-gap-row: 10px;
    --cws-hero-tile-gap-column: 16px;
    --cws-hero-tile-radius: var(--cws-radius, 12px);
    display: grid;
    grid-template-columns: minmax(300px, 58%) minmax(300px, 1fr);
    grid-template-areas: "stage offer";
    gap: var(--cws-detail-zone-gap);
    align-items: start;
}

.cws-vehicle-details-hero-stage {
    grid-area: stage;
    display: grid;
    gap: 10px;
    min-width: 0;
}

.cws-vehicle-details-hero-offer {
    grid-area: offer;
    display: grid;
    gap: var(--cws-hero-module-gap);
    min-width: 0;
    align-content: start;
}

.cws-vehicle-details-hero-offer-card,
.cws-vehicle-details-hero-offer .cws-vehicle-details-finance-quick,
.cws-vehicle-details-hero .cws-vehicle-contact-person--hero,
.cws-vehicle-details-quick-info-hero {
    padding: var(--cws-hero-card-padding, var(--cws-detail-panel-padding, 16px));
    border: 1px solid
        var(--cws-hero-border, var(--cws-detail-panel-border, var(--cws-line, #e8eef5)));
    border-radius: var(--cws-detail-panel-radius, var(--cws-radius, 14px));
    background: var(--cws-hero-card-bg, var(--cws-detail-panel-bg, var(--cws-card-bg, #ffffff)));
    box-shadow: var(--cws-detail-panel-shadow, var(--cws-card-shadow, none));
    box-sizing: border-box;
}

.cws-vehicle-details-media {
    display: block;
    position: relative;
    border-radius: var(--cws-radius, 12px);
    overflow: hidden;
    background: var(--cws-card-bg, #e9ecef);
    min-height: 200px;
}

.cws-vehicle-details-media-wrap {
    display: grid;
    gap: 10px;
    align-content: start;
    position: relative;
    min-width: 0;
}

.cws-vehicle-details-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cws-gallery-open-trigger {
    cursor: zoom-in;
}

.cws-gallery-open-trigger:focus-visible {
    outline: 3px solid var(--cws-focus, color-mix(in srgb, var(--cws-primary) 45%, transparent));
    outline-offset: -3px;
}

.cws-vehicle-details-thumbs-wrap {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 38px;
    gap: 8px;
    align-items: stretch;
    min-width: 0;
}

.cws-vehicle-details-thumbs {
    display: flex;
    gap: 8px;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
    padding-bottom: 1px;
}

.cws-vehicle-thumbs-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 62px;
    border: 1px solid var(--cws-line, #d5dee7);
    border-radius: var(--cws-badge-radius, 8px);
    background: var(--cws-card-bg, #ffffff);
    color: var(--cws-content-text, #203040);
    cursor: pointer;
    font-size: 24px;
    line-height: 1;
}

.cws-vehicle-thumbs-nav:hover,
.cws-vehicle-thumbs-nav:focus-visible {
    border-color: var(--cws-primary);
    color: var(--cws-primary);
}

.cws-vehicle-details-media-actions {
    display: flex;
    justify-content: flex-start;
}

.cws-vehicle-thumb {
    flex: 0 0 86px;
    border: 1px solid var(--cws-line, #d5dee7);
    border-radius: var(--cws-badge-radius, 8px);
    overflow: hidden;
    padding: 0;
    background: var(--cws-card-bg, #ffffff);
    cursor: pointer;
    line-height: 0;
    scroll-snap-align: start;
}

.cws-vehicle-thumb img {
    width: 100%;
    height: 62px;
    object-fit: cover;
    display: block;
}

.cws-vehicle-thumb.is-active {
    border-color: var(--cws-primary);
    box-shadow: 0 0 0 1px
        color-mix(in srgb, var(--cws-primary) 55%, transparent);
}

.cws-vehicle-details-intro {
    display: grid;
    align-content: start;
    gap: 16px;
    min-width: 0;
    justify-items: stretch;
}

.cws-vehicle-details-intro-primary,
.cws-vehicle-details-intro-meta {
    display: grid;
    gap: 12px;
    width: 100%;
    min-width: 0;
    align-items: start;
}

.cws-vehicle-details-intro-primary > *,
.cws-vehicle-details-intro-meta > * {
    width: 100%;
    min-width: 0;
}

.cws-vehicle-details-hero-content,
.cws-vehicle-details-hero-main {
    display: grid;
    gap: 12px;
    width: 100%;
    min-width: 0;
    align-items: start;
}

.cws-vehicle-details-hero-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 16px;
    align-items: start;
    padding-inline-start: var(--cws-detail-hero-content-rail);
    box-sizing: border-box;
}

.cws-vehicle-details-hero-summary
    .cws-vehicle-details-hero-submodule {
    padding-inline-start: 0;
}

.cws-vehicle-details-hero-summary
    .cws-vehicle-details-hero-submodule--hero_action_module {
    width: auto;
    justify-self: end;
}

.cws-vehicle-details-hero-offer-card--summary
    .cws-vehicle-details-hero-summary {
    align-items: stretch;
}

.cws-vehicle-details-hero-offer-card--summary
    .cws-vehicle-details-hero-submodule--hero_action_module {
    display: flex;
    align-self: end;
    justify-self: end;
    padding-block: 0;
}

.cws-vehicle-details-hero-offer-card--summary
    .cws-vehicle-details-hero-submodule--hero_action_module
    .cws-vehicle-details-actions {
    align-items: flex-end;
}

.cws-vehicle-details-hero-offer-card--summary
    .cws-vehicle-details-hero-submodule--hero_action_module
    .cws-vehicle-details-actions
    .cws-btn {
    align-self: flex-end;
}

.cws-vehicle-details-hero-offer .cws-vehicle-details-hero-content {
    gap: var(--cws-hero-module-gap);
}

.cws-vehicle-details-hero-offer h1.cws-vehicle-details-subtitle {
    padding-inline-start: 0;
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.1;
    font-weight: 800;
}

.cws-vehicle-details-hero-offer .cws-detail-lang-form {
    margin-inline-start: 0;
}

.cws-vehicle-details-hero-offer .cws-vehicle-details-hero-summary {
    padding-inline-start: 0;
}

.cws-vehicle-details-hero-offer-modules {
    display: grid;
    gap: var(--cws-hero-module-gap);
    min-width: 0;
}

.cws-vehicle-details-hero-offer-modules
    .cws-vehicle-details-hero-submodule {
    padding-inline-start: 0;
}

.cws-vehicle-details-hero-offer .cws-vehicle-details-finance-quick,
.cws-vehicle-details-hero .cws-vehicle-contact-person--hero {
    height: auto;
}

.cws-vehicle-details-hero-offer .cws-vehicle-details-finance-result-grid p {
    border-color: var(--cws-hero-border, #e7edf4);
    background: var(--cws-hero-surface-bg, var(--cws-field-bg, #ffffff));
}

.cws-vehicle-details-hero-offer .cws-vehicle-details-finance-result-grid {
    gap: var(--cws-hero-tile-gap-row) var(--cws-hero-tile-gap-column);
}

.cws-vehicle-details-hero-offer .cws-vehicle-details-finance-result-grid p {
    padding: 10px 12px;
    border-radius: var(--cws-hero-tile-radius);
    font-size: var(--cws-hero-control-font-size);
    line-height: 1.35;
}

.cws-vehicle-details-hero-facts {
    min-width: 0;
}

.cws-vehicle-details-hero-facts--mobile {
    display: none;
}

.cws-vehicle-details-hero-facts .cws-vehicle-details-hero-submodule,
.cws-vehicle-details-quick-info-hero {
    min-width: 0;
}

.cws-vehicle-details-quick-info-hero {
    box-shadow: var(--cws-detail-panel-shadow, var(--cws-card-shadow, none));
    display: grid;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.cws-vehicle-details-quick-info-hero-center {
    display: grid;
    place-items: center;
    min-width: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.cws-vehicle-details-quick-info-hero-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--cws-hero-tile-gap-row, 10px) var(--cws-hero-tile-gap-column, 16px);
    width: min(100%, 360px);
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0 !important;
    padding-inline-start: 0 !important;
    list-style: none;
    box-sizing: border-box;
}

.cws-vehicle-details-quick-info-hero-item {
    display: grid;
    place-items: center;
    gap: 4px;
    padding: 10px 12px;
    text-align: center;
    width: 100%;
    min-width: 0;
    min-height: 50px;
    border: 1px solid var(--cws-hero-border, var(--cws-line, #e7edf4));
    border-radius: var(--cws-hero-tile-radius, 12px);
    background: var(--cws-hero-surface-bg, var(--cws-field-bg, #ffffff));
    box-sizing: border-box;
    overflow-wrap: anywhere;
}

.cws-vehicle-details-quick-info-hero-label,
.cws-vehicle-details-quick-info-hero-value {
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
}

.cws-vehicle-details-quick-info-hero-label {
    font-size: 12px;
    line-height: 1.25;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    color: var(--cws-label, #66798b);
}

.cws-vehicle-details-quick-info-hero-value {
    font-size: 13px;
    line-height: 1.3;
    font-weight: 700;
    color: var(--cws-content-text, #203040);
}

@media (min-width: 981px) {
    .cws-vehicle-details-hero--finance_contact.cws-vehicle-details-hero--has-facts,
    .cws-vehicle-details-hero--finance_only.cws-vehicle-details-hero--has-facts,
    .cws-vehicle-details-hero--plain.cws-vehicle-details-hero--has-facts {
        align-items: stretch;
    }

    .cws-vehicle-details-hero--finance_contact.cws-vehicle-details-hero--has-facts
        .cws-vehicle-details-hero-stage,
    .cws-vehicle-details-hero--finance_only.cws-vehicle-details-hero--has-facts
        .cws-vehicle-details-hero-stage {
        grid-template-rows: auto minmax(0, 1fr);
        height: 100%;
        min-height: 0;
    }

    .cws-vehicle-details-hero--finance_contact.cws-vehicle-details-hero--has-facts
        .cws-vehicle-details-hero-contact,
    .cws-vehicle-details-hero--finance_contact.cws-vehicle-details-hero--has-facts
        .cws-vehicle-details-hero-submodule--contact_module,
    .cws-vehicle-details-hero--finance_contact.cws-vehicle-details-hero--has-facts
        .cws-vehicle-details-hero-submodule--contact_module
        .cws-vehicle-details-module,
    .cws-vehicle-details-hero--finance_contact.cws-vehicle-details-hero--has-facts
        .cws-vehicle-contact-person--hero {
        display: grid;
        height: 100%;
        min-height: 0;
    }

    .cws-vehicle-details-hero--finance_contact.cws-vehicle-details-hero--has-facts
        .cws-vehicle-contact-person--hero {
        align-content: start;
    }

    .cws-vehicle-details-hero--finance_contact.cws-vehicle-details-hero--has-facts
        .cws-vehicle-details-hero-offer,
    .cws-vehicle-details-hero--finance_only.cws-vehicle-details-hero--has-facts
        .cws-vehicle-details-hero-offer,
    .cws-vehicle-details-hero--plain.cws-vehicle-details-hero--has-facts
        .cws-vehicle-details-hero-offer {
        grid-template-rows: auto minmax(0, 1fr);
        height: 100%;
        min-height: 0;
    }

    .cws-vehicle-details-hero--finance_contact.cws-vehicle-details-hero--has-facts
        .cws-vehicle-details-hero-offer-modules,
    .cws-vehicle-details-hero--finance_only.cws-vehicle-details-hero--has-facts
        .cws-vehicle-details-hero-offer-modules,
    .cws-vehicle-details-hero--plain.cws-vehicle-details-hero--has-facts
        .cws-vehicle-details-hero-offer-modules {
        grid-template-rows: minmax(0, 1fr) auto;
        align-content: stretch;
        height: 100%;
        min-height: 0;
    }

    .cws-vehicle-details-hero--finance_only.cws-vehicle-details-hero--has-facts
        .cws-vehicle-details-hero-offer-modules {
        grid-template-rows: auto;
        align-content: end;
    }

    .cws-vehicle-details-hero--finance_contact.cws-vehicle-details-hero--has-facts
        .cws-vehicle-details-hero-facts--desktop,
    .cws-vehicle-details-hero--finance_only.cws-vehicle-details-hero--has-facts
        .cws-vehicle-details-hero-facts--desktop,
    .cws-vehicle-details-hero--plain.cws-vehicle-details-hero--has-facts
        .cws-vehicle-details-hero-facts--desktop {
        order: 1;
        display: grid;
        height: 100%;
        min-height: 0;
        align-self: stretch;
    }

    .cws-vehicle-details-hero--finance_contact.cws-vehicle-details-hero--has-facts
        .cws-vehicle-details-hero-submodule--finance_quick_module {
        order: 2;
    }

    .cws-vehicle-details-hero--finance_contact.cws-vehicle-details-hero--has-facts
        .cws-vehicle-details-hero-facts--desktop
        .cws-vehicle-details-hero-submodule--quick_info_module,
    .cws-vehicle-details-hero--finance_only.cws-vehicle-details-hero--has-facts
        .cws-vehicle-details-hero-facts--desktop
        .cws-vehicle-details-hero-submodule--quick_info_module,
    .cws-vehicle-details-hero--plain.cws-vehicle-details-hero--has-facts
        .cws-vehicle-details-hero-facts--desktop
        .cws-vehicle-details-hero-submodule--quick_info_module {
        display: grid;
        height: 100%;
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .cws-vehicle-details-hero--finance_contact.cws-vehicle-details-hero--has-facts
        .cws-vehicle-details-hero-facts--desktop
        .cws-vehicle-details-quick-info-hero,
    .cws-vehicle-details-hero--finance_only.cws-vehicle-details-hero--has-facts
        .cws-vehicle-details-hero-facts--desktop
        .cws-vehicle-details-quick-info-hero,
    .cws-vehicle-details-hero--plain.cws-vehicle-details-hero--has-facts
        .cws-vehicle-details-hero-facts--desktop
        .cws-vehicle-details-quick-info-hero {
        height: 100%;
        min-height: 0;
    }

    .cws-vehicle-details-hero--finance_contact.cws-vehicle-details-hero--has-facts
        .cws-vehicle-details-hero-facts--desktop
        .cws-vehicle-details-quick-info-hero-center,
    .cws-vehicle-details-hero--finance_only.cws-vehicle-details-hero--has-facts
        .cws-vehicle-details-hero-facts--desktop
        .cws-vehicle-details-quick-info-hero-center,
    .cws-vehicle-details-hero--plain.cws-vehicle-details-hero--has-facts
        .cws-vehicle-details-hero-facts--desktop
        .cws-vehicle-details-quick-info-hero-center {
        min-height: 0;
    }

    .cws-vehicle-details-hero-facts--desktop
        .cws-vehicle-details-quick-info-hero-grid {
        width: 100%;
    }

    .cws-vehicle-details-hero--contact_only.cws-vehicle-details-hero--has-facts
        .cws-vehicle-details-hero-offer-modules {
        align-content: start;
    }

    .cws-vehicle-details-hero--has-documents
        .cws-vehicle-details-hero-offer {
        grid-template-rows: auto auto minmax(0, 1fr);
    }

    .cws-vehicle-details-hero .cws-vehicle-contact-form > .cws-btn,
    .cws-vehicle-details-hero .cws-vehicle-contact-form-actions .cws-btn {
        justify-self: start;
        align-self: start;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: auto;
        max-width: 100%;
        height: 42px;
        min-height: 42px;
        max-height: 42px;
        padding: 0 14px;
        box-sizing: border-box;
        flex: 0 0 auto;
        line-height: 1;
        white-space: nowrap;
    }

}

@media (min-width: 981px) and (max-width: 1180px) {
    .cws-vehicle-details-quick-info-hero-grid {
        gap: var(--cws-hero-tile-gap-row, 10px) var(--cws-hero-tile-gap-column, 16px);
        width: 100%;
    }

    .cws-vehicle-details-quick-info-hero-item {
        padding: 9px 10px;
    }

    .cws-vehicle-details-quick-info-hero-label {
        font-size: 12px;
    }

    .cws-vehicle-details-quick-info-hero-value {
        font-size: 12px;
    }
}

.cws-vehicle-details-hero-side {
    display: grid;
    gap: 12px;
    width: 100%;
    min-width: 0;
    align-items: start;
}

.cws-vehicle-details-hero-side > * {
    width: 100%;
    min-width: 0;
}

.cws-vehicle-details-hero-submodule {
    width: 100%;
    min-width: 0;
}

.cws-vehicle-details-hero-submodule--price_module,
.cws-vehicle-details-hero-submodule--finance_quick_module {
    padding-inline-start: var(--cws-detail-hero-content-rail);
    box-sizing: border-box;
}

.cws-vehicle-details-pricing {
    display: grid;
    gap: 6px;
    width: 100%;
    min-width: 0;
}

.cws-vehicle-details-kicker {
    margin: 0;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--cws-label, #66798b);
}

.cws-detail-lang-form {
    display: inline-flex;
    align-items: center;
    margin-bottom: 2px;
    margin-inline-start: var(--cws-detail-hero-content-rail);
}

.cws-detail-lang-form label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--cws-label, #516172);
}

.cws-detail-lang-form select {
    border: 1px solid var(--cws-line, #d2dae3);
    border-radius: var(--cws-button-radius, 8px);
    min-height: 36px;
    padding: 6px 10px;
    background: var(--cws-field-bg, var(--cws-card-bg, #ffffff));
    color: var(--cws-content-text, #212529);
}

/* Native <select> dropdown options follow the design (readable on dark/custom
   themes — the default white option list was unreadable on dark cards). */
.cws-frontend select option {
    background: var(--cws-card-bg, #ffffff);
    color: var(--cws-content-text, #212529);
}

.cws-vehicle-details h2,
.cws-vehicle-details h3 {
    margin: 0;
    font-size: 1.5rem;
    line-height: 1.2;
    color: var(--cws-heading, #212529);
}

.cws-vehicle-details-subtitle {
    margin: 0;
    color: var(--cws-heading, #516172);
}

.cws-vehicle-details-intro h1.cws-vehicle-details-subtitle {
    font-size: 40px;
    line-height: 1.1;
    font-weight: 800;
    padding-inline-start: var(--cws-detail-hero-content-rail);
}

.cws-vehicle-details-price {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--cws-price-text);
    background: var(--cws-price-bg);
    display: inline-block;
    /* The pricing block is a full-width grid, which stretched this price chip
       across the whole hero column into a heavy full-width bar. Shrink it to its
       content width so the priced surface stays a compact, balanced badge. */
    justify-self: start;
    padding: 8px 14px;
    border-radius: var(--cws-button-radius, 10px);
    line-height: 1.2;
}

/* Paragraph rules in Divi set the last paragraph's bottom padding to zero.
   The price is intentionally a paragraph/grid item, so keep its complete
   compact colour surface authoritative inside the existing offer card. */
.cws-vehicle-details-hero-offer-card .cws-vehicle-details-price {
    display: inline-block !important;
    width: auto !important;
    padding: 8px 14px !important;
}

.cws-vehicle-details-price-net {
    margin: -4px 0 0;
    text-align: left;
    font-size: 0.82rem;
    color: var(--cws-meta-text, #516172);
}

.cws-vehicle-details-specs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%;
    min-width: 0;
}

.cws-vehicle-details-specs li {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--cws-line, #e7edf4);
    border-radius: var(--cws-radius, 12px);
    background: var(--cws-card-bg, #f8fafc);
}

.cws-vehicle-details-spec-label {
    font-size: 11px;
    line-height: 1.25;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    color: var(--cws-label, #66798b);
}

.cws-vehicle-details-spec-value {
    font-size: 15px;
    line-height: 1.35;
    font-weight: 700;
    color: var(--cws-content-text, #203040);
}

.cws-vehicle-details-actions {
    display: flex;
    flex-wrap: wrap;
    margin-top: 0;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    width: 100%;
    justify-self: stretch;
    align-self: stretch;
    padding-block: 0;
    padding-inline-start: 0;
    box-sizing: border-box;
}

.cws-vehicle-details-actions .cws-btn {
    width: auto;
    min-width: 0;
    align-self: flex-start;
}

.cws-vehicle-details-hero-submodule--hero_action_module {
    padding-block: 4px;
    box-sizing: border-box;
}

.cws-vehicle-qr {
    margin: 0;
}

.cws-vehicle-qr .cws-vehicle-qr-image {
    width: 96px;
    height: 96px;
    display: block;
    box-sizing: border-box;
    border: 1px solid var(--cws-line, #d6dee8);
    border-radius: var(--cws-radius, 10px);
    background: var(--cws-card-bg, #fff);
    padding: 6px;
}

.cws-vehicle-qr .cws-vehicle-qr-image > svg {
    display: block;
    width: 100%;
    height: 100%;
}

.cws-vehicle-details-qr-bottom {
    margin-top: 0;
    display: flex;
    justify-content: center;
    width: 100%;
    padding: var(--cws-detail-panel-padding);
    box-sizing: border-box;
}

.cws-vehicle-details-qr-bottom .cws-vehicle-qr {
    margin: 0;
}

.cws-vehicle-details-qr-bottom .cws-vehicle-qr .cws-vehicle-qr-image {
    width: 192px;
    height: 192px;
    max-width: min(100%, 52vw);
    max-height: min(100%, 52vw);
}

.cws-vehicle-details-description {
    border: 1px solid var(--cws-detail-panel-border);
    border-radius: var(--cws-detail-panel-radius);
    padding: 14px 16px;
    background: var(--cws-detail-panel-subtle-bg);
    color: var(--cws-content-text, #3d4f60);
}

.cws-vehicle-details-description p {
    margin: 0 0 8px;
    font-size: 15px;
    line-height: 1.45;
}

.cws-vehicle-details-description p:last-child {
    margin-bottom: 0;
}

.cws-vehicle-details-description h3 {
    margin: 18px 0 12px;
    font-size: 14px;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--cws-heading, #2f4458);
}

.cws-vehicle-details-description ul {
    margin: 0 0 14px 20px;
    padding: 0;
}

.cws-vehicle-details-description li {
    margin: 0 0 7px;
    line-height: 1.45;
    font-size: 15px;
}

.cws-vehicle-details-secondary-panel {
    padding: var(--cws-detail-panel-padding);
}

.cws-vehicle-details-secondary-panel .cws-vehicle-details-section-head {
    margin-bottom: 14px;
}

.cws-vehicle-details-secondary-panel .cws-vehicle-details-section-title {
    padding: 0;
    background: transparent;
    border-bottom: 0;
}

.cws-vehicle-details-module--description_module .cws-vehicle-details-section,
.cws-vehicle-details-module--equipment_module .cws-vehicle-details-section {
    padding: 0;
}

.cws-vehicle-details-module--description_module
    .cws-vehicle-details-section-head,
.cws-vehicle-details-module--equipment_module
    .cws-vehicle-details-section-head {
    margin-bottom: 0;
}

.cws-vehicle-details-module--description_module
    .cws-vehicle-details-description {
    border: 0;
    border-radius: 0;
    background: transparent;
}

.cws-vehicle-details-card-content {
    box-sizing: border-box;
    padding: var(--cws-detail-panel-padding);
}

.cws-vehicle-details-note {
    color: var(--cws-meta-text, #536576);
    font-size: 14px;
    line-height: 1.65;
}

.cws-vehicle-details-qr-section {
    padding: 0;
    text-align: center;
}

.cws-vehicle-details-equipment {
    padding: 0;
}

.cws-vehicle-details-section-head {
    margin-bottom: 16px;
}

.cws-vehicle-details-equipment-groups {
    display: grid;
    /* Stack the groups (Sonderausstattung first, then Serienausstattung), each
       full width, so their item lists can spread across more columns and fill
       the page better. */
    grid-template-columns: 1fr;
    gap: 20px;
}

.cws-vehicle-details-module--equipment_module {
    container-name: cws-vehicle-equipment;
    container-type: inline-size;
}

.cws-vehicle-details-equipment-toggle {
    display: none;
    margin-top: 8px;
    width: 100%;
    max-width: none;
}

.cws-vehicle-details-finance-quick,
.cws-vehicle-contact-person {
    container-type: inline-size;
}

.cws-mobile-disclosure-toggle {
    display: none;
    width: 100%;
    max-width: none;
}

@media (max-width: 600px) {
    @container (max-width: 560px) {
        html.cws-mobile-disclosures-ready .cws-mobile-disclosure-toggle {
            display: inline-flex;
        }

        html.cws-mobile-disclosures-ready
            :not(.is-mobile-disclosure-expanded)
            > .cws-mobile-disclosure-content {
            display: none;
        }

        .cws-vehicle-details-finance-quick
            .cws-vehicle-details-finance-actions
            .cws-btn {
            width: 100%;
            max-width: none;
        }
    }
}

@container cws-vehicle-equipment (max-width: 560px) {
    .cws-vehicle-details-equipment-group.is-collapsible:not(.is-expanded)
        .cws-vehicle-details-equipment-list li:nth-child(n + 9) {
        display: none;
    }

    .cws-vehicle-details-equipment-toggle {
        display: inline-flex;
    }
}

.cws-vehicle-details-equipment-group {
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0;
    min-width: 0;
}

.cws-vehicle-details-equipment-title {
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 1.35;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    color: var(--cws-heading, #2f4458);
}

.cws-vehicle-details-equipment-body {
    min-width: 0;
}

.cws-vehicle-details-equipment-list {
    margin: 0;
    padding: 0;
    list-style: none;
    /* Full-width group -> 4 item columns on desktop (steps down responsively). */
    columns: 4;
    column-gap: 24px;
}

.cws-vehicle-details-equipment-list li {
    break-inside: avoid;
    position: relative;
    margin: 0 0 8px;
    padding-left: 14px;
    font-size: 15px;
    line-height: 1.45;
    color: var(--cws-content-text, #304456);
    list-style: none !important;
}

.cws-vehicle-details-equipment-list li::before,
.cws-vehicle-details-equipment-list li::marker {
    list-style: none !important;
}

.cws-vehicle-details-equipment-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: var(--cws-list-marker, color-mix(in srgb, var(--cws-secondary) 58%, transparent));
    transform: translateY(-50%);
}

.cws-vehicle-details-equipment-item-note {
    font-weight: 500;
}

.cws-vehicle-details-table {
    width: 100%;
    border-collapse: collapse;
    border: 0;
    border-radius: 0;
    overflow: visible;
}

.cws-vehicle-details-table-inline {
    margin: 0 var(--cws-detail-panel-padding) var(--cws-detail-panel-padding);
    width: calc(100% - (var(--cws-detail-panel-padding) * 2));
}

.cws-vehicle-details-section {
    min-width: 0;
}

.cws-vehicle-details-section-title {
    margin: 0;
    padding: 14px 16px;
    background: var(--cws-detail-panel-subtle-bg);
    border-bottom: 1px solid var(--cws-detail-panel-border);
    /* Section headings clearly above the 15px body data for a readable
       hierarchy (were 16px = barely larger than the rows). */
    font-size: 18px;
    line-height: 1.3;
    color: var(--cws-heading, #212529);
}

.cws-vehicle-details-module--technical_data_module .cws-vehicle-details-section-head {
    margin-bottom: 0;
}

.cws-vehicle-details-environment {
    padding: calc(var(--cws-detail-panel-padding) + 2px);
}

.cws-vehicle-details-environment-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.cws-vehicle-details-environment .cws-vehicle-details-section-title {
    padding: 0;
    background: transparent;
    border-bottom: 0;
}

.cws-vehicle-details-environment-heading {
    min-width: 0;
}

.cws-vehicle-details-environment-subtitle {
    margin: 6px 0 0;
    color: var(--cws-meta-text, #5b6e81);
    font-size: 14px;
    line-height: 1.5;
}

.cws-vehicle-details-environment-actions {
    flex-shrink: 0;
}

.cws-vehicle-details-environment-layout {
    display: grid;
    /* CO2 class scale on the left (narrow track), data table on the right
       (wide track). The scale is moved into the first track via `order`; on
       narrow screens the order is reset so the data table stays first. */
    /* Min 300px so the PHEV dual CO2 scale (two 44px arrows + divider + two lane
       headers) always has room; the data table keeps the wide 2fr track. Below
       992px the layout stacks (full-width scale), so this only applies in 2-col
       mode. */
    grid-template-columns: minmax(340px, 0.95fr) minmax(0, 2fr);
    gap: 18px;
    align-items: start;
}
.cws-vehicle-details-environment-side {
    order: -1;
    display: grid;
    gap: 12px;
}

/* The official statutory CO2 scale (legal colours + indicator arrow) sits on a
   light panel so the regulated graphic stays faithful and readable on every
   design template — the scale uses white letters + a black arrow designed for a
   light background. */
.cws-vehicle-details-environment-co2 {
    background: #ffffff;
    color: #15202b;
    border: 1px solid #e3e8ef;
    border-radius: 12px;
    padding: 14px 16px;
}
.cws-vehicle-details-environment-co2 .cws-envkv-co2scale__sub {
    color: #51606f;
}
/* Detail-page only (the pixel-exact PDF/local-label arrow is untouched — scoped
   to the detail card): trim only the arrow body width (57px → 44px) so it is not
   too long next to the smaller on-page staircase. Full height (matching the
   opposing class bar) and the sharp tip stay exactly as in the official scale. */
.cws-vehicle-details-environment-co2 .cws-envkv-co2scale__arrow {
    width: 44px;
}
/* PHEV dual scale inside the narrow detail side panel: the binding master uses
   fixed px arrow/divider offsets (calc(49% + 96px) …) that need ≈300px to fit.
   This card's left track is only minmax(260px, …) → ≈228px inner width, so the
   "bei entladener Batterie" arrow + lane heading ran off the right edge. Scoped
   to the detail card ONLY (the A4 PDF/label keeps the pixel-exact master geometry
   untouched). Only the horizontal POSITIONS are made proportional so they scale
   with the panel; the arrow body keeps the SAME fixed 44px width as the single-
   energy scale above (the inherited .cws-vehicle-details-environment-co2 arrow
   rule), so both arrows look identical — only the spacing between the two dual
   arrows is tightened to fit the narrow column. */
/* The combined arrow keeps the base 49% position (NOT overridden here) so it is
   pixel-identical to the single-energy scale: same 44px width, same offset. The
   discharged arrow and divider are anchored at FIXED px offsets from that same
   49% — so the gap between the two arrows (and to the divider) is CONSTANT at
   every panel width and the arrow body can never grow into the divider. The
   min-300px track above guarantees both 44px arrows + both lane headers fit. */
/* The arrow body is 64px wide on screen (44px width + 11px/9px padding, content-
   box) — same as the single-energy arrow, so the sizes match. The combined arrow
   keeps the base 49% anchor, so its right edge sits at 49% + 64px; the divider
   and discharged arrow are offset further right (fixed px) to clear it with a
   constant gap at every width. The min-340px track guarantees the discharged
   arrow's right edge (49% + 144px) stays inside the panel. */
.cws-vehicle-details-environment-co2 .cws-envkv-co2scale--dual .cws-envkv-co2scale__arrow--discharged {
    left: calc(49% + 80px);
}
.cws-vehicle-details-environment-co2 .cws-envkv-co2scale--dual .cws-envkv-co2scale__divider {
    left: calc(49% + 72px);
}
/* Lane headers centred EXACTLY over their arrow. Each arrow box is 64px wide
   (44px + 11/9px padding, content-box), so its centre is its `left` + 32px:
   combined arrow left 49% → centre 49% + 32px; discharged arrow left 49% + 80px
   → centre 49% + 112px. Pin each label centre to that point with a fixed offset
   + translateX(-50%) instead of a width-dependent `right`, so the label stays in
   sync with its arrow at every panel width (the old `right: 0` made the
   discharged label drift far right on the narrow detail panel). */
.cws-vehicle-details-environment-co2 .cws-envkv-co2scale--dual .cws-envkv-co2scale__lane--combined {
    left: calc(49% + 32px);
    right: auto;
    transform: translateX(-50%);
    text-align: center;
}
.cws-vehicle-details-environment-co2 .cws-envkv-co2scale--dual .cws-envkv-co2scale__lane--discharged {
    left: calc(49% + 112px);
    right: auto;
    transform: translateX(-50%);
    text-align: center;
}
.cws-vehicle-details-environment-co2 .cws-envkv-co2scale--dual .cws-envkv-co2scale__lane {
    font-size: 10px;
    line-height: 1.15;
}

/* Statutory EnVKV explanatory footnotes (small print, like Carzilla). */
.cws-vehicle-details-environment-footnotes {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--cws-line, #e7edf4);
    display: grid;
    gap: 0;
}
/* Uniform hairline between every statutory footnote (consistent in both the
   left inline group and the right column). */
.cws-vehicle-details-environment-footnote + .cws-vehicle-details-environment-footnote {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--cws-line, #e7edf4);
}
.cws-vehicle-details-environment-footnote {
    margin: 0;
    /* 12px keeps the statutory small-print above Lighthouse's legible-font
       threshold (≥12px) for a clean SEO/PageSpeed audit. */
    font-size: 12px;
    line-height: 1.5;
    color: var(--cws-meta-text, #5e6f80);
}

/* Carzilla-style "Umwelt & Normen" — compact, structured data list (denser
   than the Basisdaten table, in the spirit of the equipment points). Left
   column: consumption/emission summary + fuel-consumption breakdown; the
   official statutory CO2 scale stays in the right column. The double-class
   selector raises specificity above the base `.cws-vehicle-details-table`
   rules that follow later in the file. */
.cws-vehicle-details-environment-main {
    min-width: 0;
}
.cws-vehicle-details-table.cws-vehicle-details-environment-table {
    margin: 0;
}
.cws-vehicle-details-table.cws-vehicle-details-environment-table th,
.cws-vehicle-details-table.cws-vehicle-details-environment-table td {
    padding: 6px 0;
    font-size: 15px;
    line-height: 1.45;
    border-bottom: 1px solid var(--cws-line, #eef2f7);
}
.cws-vehicle-details-table.cws-vehicle-details-environment-table th {
    width: 58%;
    font-weight: 600;
    color: var(--cws-label, #516172);
}
.cws-vehicle-details-table.cws-vehicle-details-environment-table td {
    color: var(--cws-content-text, #2f4458);
}
.cws-vehicle-details-table.cws-vehicle-details-environment-table
    .cws-vehicle-details-environment-tablegroup th {
    width: auto;
    padding-top: 14px;
    padding-bottom: 2px;
    border-bottom: 0;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--cws-heading, #2f4458);
}
.cws-vehicle-details-table.cws-vehicle-details-environment-table
    tr:last-child th,
.cws-vehicle-details-table.cws-vehicle-details-environment-table
    tr:last-child td {
    border-bottom: 0;
}

/* Energy & CO2 cost block — compact prose lines exactly like the official
   Anlage-1 PDF/label and Carzilla: label left, value right, bullet scenario
   lines (mid emphasised), a parenthetical price-basis sub-line, statutory
   notes. */
.cws-vehicle-details-environment-costs {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--cws-detail-panel-border);
}
.cws-vehicle-details-environment-costs-title {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--cws-heading, #1f2f42);
}
/* Cost lines (left) + statutory footnotes (right) sit side by side on wide
   screens so the long small-print no longer pushes the whole card down; the
   columns stack on narrow screens. */
.cws-vehicle-details-environment-costs-layout {
    display: grid;
    gap: 14px 26px;
}
.cws-vehicle-details-environment-costs-layout.is-split {
    /* Cost lines get 2/3 so the scenario prose lines wrap less; the statutory
       small-print footnotes take the remaining 1/3. */
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    align-items: start;
}
.cws-vehicle-details-environment-costs-main {
    min-width: 0;
}
.cws-vehicle-details-environment-costlines {
    display: grid;
    gap: 2px;
}
.cws-vehicle-details-environment-costline {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    font-size: 15px;
    line-height: 1.4;
    color: var(--cws-content-text, #2f4458);
}
.cws-vehicle-details-environment-costline-label {
    min-width: 0;
}
.cws-vehicle-details-environment-costline-value {
    flex-shrink: 0;
    font-weight: 600;
    white-space: nowrap;
    color: var(--cws-heading, #1f2f42);
}
.cws-vehicle-details-environment-costline--bullet {
    padding-left: 16px;
    position: relative;
    color: var(--cws-meta-text, #566778);
}
.cws-vehicle-details-environment-costline--bullet
    .cws-vehicle-details-environment-costline-value {
    font-weight: 400;
    color: var(--cws-content-text, #2f4458);
}
.cws-vehicle-details-environment-costline--bullet::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 0.62em;
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: var(--cws-list-marker, color-mix(in srgb, var(--cws-secondary) 58%, transparent));
    transform: translateY(-50%);
}
.cws-vehicle-details-environment-costline--bullet.is-emphasis {
    color: var(--cws-content-text, #2f4458);
}
.cws-vehicle-details-environment-costline--bullet.is-emphasis
    .cws-vehicle-details-environment-costline-label,
.cws-vehicle-details-environment-costline--bullet.is-emphasis
    .cws-vehicle-details-environment-costline-value {
    font-weight: 700;
    color: var(--cws-heading, #1f2f42);
}
.cws-vehicle-details-environment-costline-heading {
    margin: 10px 0 3px;
    font-size: 15px;
    line-height: 1.4;
    font-weight: 600;
    color: var(--cws-content-text, #2f4458);
}
.cws-vehicle-details-environment-costsub {
    margin: 1px 0 3px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--cws-meta-text, #66798b);
}

/* PHEV dual-value table: combined value | "bei entladener Batterie" value.
   Double-class selectors raise specificity above the later base table rules. */
.cws-vehicle-details-environment-table.cws-vehicle-details-environment-table--dual th {
    width: 40%;
}
.cws-vehicle-details-environment-table.cws-vehicle-details-environment-table--dual td {
    width: 30%;
}
.cws-vehicle-details-table.cws-vehicle-details-environment-table
    .cws-vehicle-details-environment-tablehead th,
.cws-vehicle-details-table.cws-vehicle-details-environment-table
    .cws-vehicle-details-environment-tablehead td {
    border-bottom: 0;
    padding-top: 0;
    padding-bottom: 3px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--cws-label, #6a7c8d);
}

/* PHEV electric range (EAER): full-width lead row above the weighted-combined |
   discharged-battery comparison. Electric-only, so the value spans both value
   columns instead of sitting in the "gewichtet kombiniert" column. It inherits
   the normal label/value styling, so the value reads like every other figure.
   The "gewichtet kombiniert | bei entladener Batterie" header below gets the
   same 14px breathing room above it that the "Weitere Verbrauchswerte" group
   gives the lower "rein elektrisch | bei entladener Batterie" header, so both
   comparison headers sit identically spaced below their separator line. */
.cws-vehicle-details-table.cws-vehicle-details-environment-table
    .cws-vehicle-details-environment-rangerow
    + .cws-vehicle-details-environment-tablehead th,
.cws-vehicle-details-table.cws-vehicle-details-environment-table
    .cws-vehicle-details-environment-rangerow
    + .cws-vehicle-details-environment-tablehead td {
    padding-top: 14px;
}

/* PHEV "Weitere Verbrauchswerte": the group title and the two column headers
   ("rein elektrisch" | "bei entladener Batterie") share ONE continuous row —
   title in the label column, headers over their data columns — so they line up
   exactly like the upper comparison header instead of stacking on two lines.
   14px above mirrors the upper header's gap; the title reads darker (heading)
   than the column labels. th width matches the dual data table for alignment. */
.cws-vehicle-details-table.cws-vehicle-details-environment-table
    .cws-vehicle-details-environment-tablegrouphead th,
.cws-vehicle-details-table.cws-vehicle-details-environment-table
    .cws-vehicle-details-environment-tablegrouphead td {
    border-bottom: 0;
    padding-top: 14px;
    padding-bottom: 3px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    vertical-align: bottom;
}
.cws-vehicle-details-table.cws-vehicle-details-environment-table.cws-vehicle-details-environment-table--dual
    .cws-vehicle-details-environment-tablegrouphead th {
    width: 40%;
    color: var(--cws-heading, #2f4458);
}
.cws-vehicle-details-table.cws-vehicle-details-environment-table
    .cws-vehicle-details-environment-tablegrouphead td {
    color: var(--cws-label, #6a7c8d);
}

/* CO2-class row: the value cell holds the coloured A–G class chip (not text).
   A little vertical padding keeps the 30px chip from crowding the row borders;
   the chip carries its own colour from the shared `--cws-envkv-*` source. */
.cws-vehicle-details-table.cws-vehicle-details-environment-table
    .cws-vehicle-details-environment-classrow td {
    padding-top: 4px;
    padding-bottom: 4px;
    vertical-align: middle;
}

/* MOBILE — PHEV dual comparison table. The base detail-table rule stacks every
   cell to a full-width block on narrow screens. For the two-value PHEV table
   that strips each value of its column ("gewichtet kombiniert" vs "bei
   entladener Batterie") and shows two unlabelled numbers — misleading and a
   legal risk. Fix: hide the now-orphaned column-header rows and print each
   value's column name inline from `data-cws-col`, so every figure stays clearly
   attributed (e.g. "Bei entladener Batterie: 5,9 l/100 km"). Desktop is
   unaffected — the header rows there carry the columns and `::before` is off. */
@media (max-width: 760px) {
    /* The desktop dual-column widths (40/30/30) have higher specificity than the
       base mobile `width:100%`, so they survive the block stacking and cram each
       value into ~30% — hence the heavy wrapping. Reset them to full width. */
    .cws-vehicle-details-environment-table.cws-vehicle-details-environment-table--dual th,
    .cws-vehicle-details-environment-table.cws-vehicle-details-environment-table--dual td {
        width: 100%;
    }
    /* Orphan column-header rows are replaced by the inline per-value labels. */
    .cws-vehicle-details-environment-table .cws-vehicle-details-environment-tablehead,
    .cws-vehicle-details-environment-table .cws-vehicle-details-environment-tablegrouphead td {
        display: none;
    }
    /* Metric name as a compact heading above its (now full-width) values. */
    .cws-vehicle-details-environment-table th {
        padding-top: 10px;
        color: var(--cws-heading, #2f4458);
    }
    /* Each value on ONE line: column label left (muted), value right — uses the
       horizontal space instead of stacking label above a slivered value. */
    .cws-vehicle-details-environment-table td[data-cws-col] {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 12px;
        text-align: right;
    }
    .cws-vehicle-details-environment-table td[data-cws-col]::before {
        content: attr(data-cws-col);
        flex: 0 1 auto;
        text-align: left;
        font-weight: 400;
        color: var(--cws-label, #6a7c8d);
    }
    /* Class chips align centre against their label. */
    .cws-vehicle-details-environment-classrow td[data-cws-col] {
        align-items: center;
    }

    /* Single-energy table (no second column): match the PHEV look — each metric
       on ONE line, name left, value right — instead of the stacked "name above
       value" the base block rule would produce. Keeps the mobile card homogeneous
       across single- and multi-energy vehicles. The row becomes the flex box, so
       the separator line moves onto the row (a cell border would only underline
       half the row). The group heading stays a full-width line. */
    .cws-vehicle-details-environment-table:not(.cws-vehicle-details-environment-table--dual) tbody tr {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 12px;
        border-bottom: 1px solid var(--cws-line, #eef2f7);
    }
    .cws-vehicle-details-environment-table:not(.cws-vehicle-details-environment-table--dual) th,
    .cws-vehicle-details-environment-table:not(.cws-vehicle-details-environment-table--dual) td {
        width: auto;
        border-bottom: 0;
    }
    .cws-vehicle-details-environment-table:not(.cws-vehicle-details-environment-table--dual) td {
        text-align: right;
    }
    /* "Weitere Verbrauchswerte" heading spans the full width, not a label·value row. */
    .cws-vehicle-details-environment-table:not(.cws-vehicle-details-environment-table--dual) .cws-vehicle-details-environment-tablegroup {
        display: block;
        border-bottom: 0;
    }
    /* Chip row centres the chip against its label. */
    .cws-vehicle-details-environment-table:not(.cws-vehicle-details-environment-table--dual) .cws-vehicle-details-environment-classrow {
        align-items: center;
    }
}

/* Footnotes when shown in the right cost column: drop the full-width
   separator/spacing they use as a stacked block. */
.cws-vehicle-details-environment-costs-layout .cws-vehicle-details-environment-footnotes {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
    gap: 0;
}
/* First footnote moved under the cost lines (left column) to balance the two
   columns — keeps a clear separator from the notes above it. */
/* First footnote moved under the cost lines (left column). The official-note
   divider above already separates it, so no extra top border here. */
.cws-vehicle-details-environment-footnotes--inline {
    margin-top: 12px;
}

.cws-vehicle-details-environment-meta {
    margin: 14px 0 0;
    color: var(--cws-meta-text, #66798b);
    font-size: 13px;
    line-height: 1.5;
}

/* Legal disclaimer pointing to the binding official label — deliberately
   prominent (heading colour, larger, divider below) so it cannot be missed. */
.cws-vehicle-details-environment-official-note {
    margin: 12px 0 0;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--cws-detail-panel-border);
    color: var(--cws-heading, #1f2f42);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
}

/* Statutory footnote reference superscripts (¹ ²), mirroring the PDF/label. */
.cws-vehicle-details-environment-fnref {
    font-size: 0.7em;
    font-weight: 700;
    line-height: 0;
    color: var(--cws-heading, #1f2f42);
}

.cws-vehicle-details-table-inline th,
.cws-vehicle-details-table-inline td {
    padding-top: 8px;
    padding-bottom: 8px;
}

.cws-vehicle-details-table th,
.cws-vehicle-details-table td {
    border-bottom: 1px solid var(--cws-detail-panel-border);
    padding: 12px 14px;
    text-align: left;
    vertical-align: top;
    /* Explicit size so the data sheet stays consistent with the rest of the
       detail page (cost lines, notes) instead of inheriting an oversized theme
       body font. */
    font-size: 15px;
    line-height: 1.45;
}

.cws-vehicle-details-table th {
    width: 34%;
    color: var(--cws-label, #516172);
    font-weight: 600;
    background: transparent;
}

.cws-vehicle-details-table td {
    color: var(--cws-content-text, #2f4458);
}

.cws-vehicle-details-table tr:last-child th,
.cws-vehicle-details-table tr:last-child td {
    border-bottom: 0;
}

.cws-vehicle-details-action-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 18px;
}

.cws-vehicle-details-module--documents_module {
    container-name: cws-vehicle-documents;
    container-type: inline-size;
    box-sizing: border-box;
}

.cws-vehicle-details-module--documents_module .cws-vehicle-details-section-head {
    margin-bottom: 0;
}

.cws-vehicle-document-public-item {
    box-sizing: border-box;
    width: 100%;
    inline-size: 100%;
    max-width: none;
    text-align: center;
}

@container cws-vehicle-documents (max-width: 820px) {
    .cws-vehicle-details-action-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.cws-expose-form {
    display: grid;
    gap: 10px;
}

.cws-expose-form textarea {
    min-height: 116px;
    resize: vertical;
}

.cws-consent {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    color: var(--cws-muted);
}

.cws-form-message {
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid transparent;
}

.cws-form-message.success {
    background: rgba(2, 194, 122, 0.1);
    border-color: rgba(2, 194, 122, 0.2);
    color: #0f7e54;
}

.cws-form-message.error {
    background: rgba(252, 24, 90, 0.1);
    border-color: rgba(252, 24, 90, 0.2);
    color: #9b1840;
}

@media (max-width: 1200px) {
    .cws-filter-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .cws-view-grid .cws-vehicle-track {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cws-view-compact .cws-vehicle-track {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* Tablet: rechte Spalte würde neben Bild + Specs zu eng → Body einspaltig
       stapeln. EnVKV-Block UND der Preis/Rate/Button-Block teilen sich dieselbe
       Max-Breite (280px, linksbündig), damit alles bündig untereinander steht.
       Bild bleibt links bis 992px. */
    .cws-view-list .cws-card-body {
        grid-template-columns: 1fr;
        grid-template-areas:
            "title"
            "specs"
            "envkv"
            "side";
        align-content: start;
    }

    .cws-view-list .cws-card-body .cws-envkv-block,
    .cws-view-list .cws-card-side {
        align-self: start;
        max-width: 280px;
    }

    .cws-vehicle-details-equipment-list {
        columns: 3;
    }
}

@media (max-width: 992px) {
    /* List-Karte stapelt: Bild oben, Body darunter. Body bleibt einspaltig
       (vom 1200px-Breakpoint geerbt). */
    .cws-view-list .cws-vehicle-card {
        grid-template-columns: 1fr;
    }

    .cws-view-carousel .cws-vehicle-track {
        grid-auto-columns: calc(
            (
                    100% -
                        (
                            var(--cws-carousel-gap) *
                                (var(--cws-carousel-per-slide-tablet, 2) - 1)
                        )
                ) /
                var(--cws-carousel-per-slide-tablet, 2)
        );
    }

    .cws-vehicle-details-hero {
        --cws-hero-card-padding: 14px;
        grid-template-columns: 1fr;
        grid-template-areas: none;
    }

    .cws-vehicle-details-hero-offer,
    .cws-vehicle-details-hero-stage {
        display: contents;
    }

    .cws-vehicle-details-media-wrap {
        order: 2;
    }

    .cws-vehicle-details-hero-facts--desktop {
        display: none !important;
    }

    .cws-vehicle-details-hero-facts--mobile {
        display: grid;
        order: 3;
    }

    .cws-vehicle-details-hero-facts--mobile
        .cws-vehicle-details-quick-info-hero-grid {
        width: 100%;
    }

    .cws-vehicle-details-hero-contact {
        order: 6;
    }

    .cws-vehicle-details-hero-offer-card--summary {
        order: 1;
    }

    .cws-vehicle-details-hero-offer
        > .cws-vehicle-details-module--documents_module {
        order: 4;
    }

    .cws-vehicle-details-hero-offer-modules {
        order: 5;
    }

    .cws-vehicle-details-hero--plain .cws-vehicle-details-hero-offer-modules,
    .cws-vehicle-details-hero--contact_only
        .cws-vehicle-details-hero-offer-modules {
        display: none;
    }

    .cws-vehicle-details-hero-submodule--finance_quick_module {
        order: 1;
    }

    .cws-vehicle-details-hero-summary {
        padding-inline-start: 0;
    }

    .cws-vehicle-details-hero-summary
        .cws-vehicle-details-hero-submodule--hero_action_module {
        width: auto;
        justify-self: start;
    }

    .cws-vehicle-details-hero-summary .cws-vehicle-details-actions {
        justify-content: flex-start;
    }

    .cws-vehicle-details-hero-summary .cws-vehicle-details-actions .cws-btn {
        width: auto;
        max-width: 100%;
    }

    .cws-vehicle-details-intro h1.cws-vehicle-details-subtitle,
    .cws-detail-lang-form {
        padding-inline-start: 0;
        margin-inline-start: 0;
    }

    .cws-vehicle-details-hero-submodule--contact_module {
        padding-inline-start: 0;
    }

    .cws-vehicle-details-media {
        min-height: 220px;
    }

    .cws-vehicle-details-zone-slot--technical_data {
        grid-template-columns: 1fr;
    }

    .cws-vehicle-details-environment-layout,
    .cws-vehicle-details-environment-costs-layout.is-split {
        grid-template-columns: 1fr;
    }

    /* Stacked single column: keep the data table first, scale below. */
    .cws-vehicle-details-environment-side {
        order: 0;
    }

    /* Stacked footnotes regain a clear separator from the cost lines above. */
    .cws-vehicle-details-environment-costs-layout.is-split
        .cws-vehicle-details-environment-footnotes {
        margin-top: 4px;
        padding-top: 12px;
        border-top: 1px solid var(--cws-line, #e7edf4);
    }

    .cws-vehicle-details-equipment-groups {
        grid-template-columns: 1fr;
    }

    .cws-vehicle-details-equipment-list {
        columns: 2;
    }

    .cws-vehicle-details-module--description_module
        .cws-vehicle-details-section,
    .cws-vehicle-details-module--equipment_module
        .cws-vehicle-details-section {
        padding: 0;
    }

    .cws-vehicle-details-module--description_module
        .cws-vehicle-details-description,
    .cws-vehicle-details-equipment-groups {
        padding: 14px;
    }
}

@media (max-width: 992px) {
    @container cws-vehicle-hero-zone (min-width: 720px) {
        .cws-vehicle-details-hero--has-documents.cws-vehicle-details-hero--has-facts {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .cws-vehicle-details-hero--has-documents.cws-vehicle-details-hero--has-facts
            .cws-vehicle-details-hero-offer-card--summary,
        .cws-vehicle-details-hero--has-documents.cws-vehicle-details-hero--has-facts
            .cws-vehicle-details-media-wrap,
        .cws-vehicle-details-hero--has-documents.cws-vehicle-details-hero--has-facts
            .cws-vehicle-details-hero-offer-modules,
        .cws-vehicle-details-hero--has-documents.cws-vehicle-details-hero--has-facts
            .cws-vehicle-details-hero-contact {
            grid-column: 1 / -1;
        }

        .cws-vehicle-details-hero--has-documents.cws-vehicle-details-hero--has-facts
            .cws-vehicle-details-hero-facts--mobile {
            grid-column: 1;
            grid-row: auto;
            align-self: stretch;
        }

        .cws-vehicle-details-hero--has-documents.cws-vehicle-details-hero--has-facts
            .cws-vehicle-details-hero-offer
            > .cws-vehicle-details-module--documents_module {
            grid-column: 2;
            grid-row: auto;
            order: 3;
            align-self: stretch;
        }

        .cws-vehicle-details-hero--has-documents.cws-vehicle-details-hero--has-facts
            .cws-vehicle-details-hero-facts--mobile
            .cws-vehicle-details-hero-submodule--quick_info_module,
        .cws-vehicle-details-hero--has-documents.cws-vehicle-details-hero--has-facts
            .cws-vehicle-details-hero-facts--mobile
            .cws-vehicle-details-quick-info-hero,
        .cws-vehicle-details-hero--has-documents.cws-vehicle-details-hero--has-facts
            .cws-vehicle-details-hero-offer
            > .cws-vehicle-details-module--documents_module {
            height: 100%;
            min-height: 0;
        }

        .cws-vehicle-details-hero--has-documents.cws-vehicle-details-hero--has-facts
            .cws-vehicle-details-hero-offer-modules {
            order: 4;
        }

        .cws-vehicle-details-hero--has-documents.cws-vehicle-details-hero--has-facts
            .cws-vehicle-details-hero-contact {
            order: 5;
        }
    }
}

@media (max-width: 760px) {
    .cws-vehicle-details-zone-slot--technical_data .cws-vehicle-details-table tbody {
        grid-template-columns: 1fr;
    }

    /* Auf schmalen Telefonen teilen sich lange Bezeichnungen und Werte keine
       zu kleine Zeile. Das bestehende Datenblatt wird lediglich einspaltig
       projiziert: Label oben, zugehöriger Wert direkt darunter. */
    .cws-vehicle-details-zone-slot--technical_data .cws-vehicle-details-table tr {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
        gap: 0;
    }

    .cws-vehicle-details-zone-slot--technical_data .cws-vehicle-details-table th,
    .cws-vehicle-details-zone-slot--technical_data .cws-vehicle-details-table td {
        width: 100%;
        overflow-wrap: anywhere;
    }

    .cws-vehicle-details-zone-slot--technical_data .cws-vehicle-details-table th {
        padding-bottom: 2px !important;
    }

    .cws-vehicle-details-zone-slot--technical_data .cws-vehicle-details-table td {
        padding-top: 2px !important;
    }

    .cws-archive-wrap {
        padding: 14px;
    }

    .cws-archive-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .cws-filter-grid,
    .cws-finance-grid {
        grid-template-columns: 1fr;
    }

    .cws-vehicle-details-finance-controls {
        grid-template-columns: 1fr;
    }

    .cws-vehicle-details-finance-result-grid {
        grid-template-columns: 1fr;
    }

    .cws-vehicle-details-specs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cws-vehicle-details-environment {
        padding: 16px;
    }

    .cws-vehicle-details-environment-head {
        flex-direction: column;
        align-items: stretch;
    }

    .cws-vehicle-details-environment-actions .cws-btn {
        width: 100%;
    }

    .cws-vehicle-details-equipment-list {
        columns: 1;
    }

    .cws-vehicle-details-note {
        font-size: 13px;
    }

    .cws-view-grid .cws-vehicle-track {
        grid-template-columns: 1fr;
    }

    .cws-view-compact .cws-vehicle-track {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cws-view-carousel .cws-vehicle-track {
        grid-auto-columns: 100%;
    }

    .cws-view-switch {
        margin-left: 0;
    }

    .cws-view-carousel:not(.cws-carousel-style-3d):not(.cws-carousel-style-fan)
        .cws-carousel-nav {
        display: none;
    }

    .cws-view-carousel.cws-carousel-style-3d .cws-carousel-nav,
    .cws-view-carousel.cws-carousel-style-fan .cws-carousel-nav {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        font-size: 20px;
    }

    .cws-vehicle-details-table th,
    .cws-vehicle-details-table td {
        display: block;
        width: 100%;
    }

    .cws-vehicle-details-table th {
        padding-bottom: 0;
        border-bottom: 0;
    }

    .cws-vehicle-details-media {
        min-height: 180px;
    }

    .cws-vehicle-details-hero-summary {
        grid-template-columns: 1fr;
    }

    .cws-vehicle-details-hero-summary
        .cws-vehicle-details-hero-submodule--hero_action_module {
        width: auto;
        justify-self: start;
    }

    .cws-vehicle-details-hero-summary .cws-vehicle-details-actions {
        justify-content: flex-start;
    }

    .cws-vehicle-details-hero-summary .cws-vehicle-details-actions .cws-btn {
        width: auto;
        max-width: 100%;
    }

    .cws-vehicle-contact-person--hero .cws-vehicle-contact-person-body,
    .cws-vehicle-contact-person-body {
        grid-template-columns: 52px minmax(0, 1fr);
    }

    .cws-vehicle-contact-person--hero .cws-vehicle-contact-person-body--no-image,
    .cws-vehicle-contact-person-body--no-image {
        grid-template-columns: 1fr;
    }

    .cws-vehicle-contact-person--hero .cws-vehicle-contact-person-image,
    .cws-vehicle-contact-person-image {
        width: 52px;
        height: 52px;
    }

    .cws-vehicle-contact-person--hero .cws-vehicle-contact-person-links {
        display: flex;
        flex-wrap: wrap;
        grid-column: 1 / -1;
        grid-row: auto;
    }

    .cws-vehicle-contact-form-grid--name-phone,
    .cws-vehicle-details-hero-contact .cws-vehicle-contact-form-grid--name-phone {
        grid-template-columns: 1fr;
    }

    .cws-vehicle-contact-whatsapp-row,
    .cws-vehicle-contact-person--hero .cws-vehicle-contact-whatsapp-row {
        grid-template-columns: minmax(0, 1fr) 42px;
        width: 100%;
    }

    .cws-vehicle-contact-action-button {
        width: 42px;
        height: 42px;
        min-width: 42px;
        min-height: 42px;
    }

    .cws-finance-detail-modal-dialog,
    .cws-gallery-fullscreen-modal-dialog,
    .cws-vehicle-360-modal-dialog {
        --cws-mobile-modal-top: max(
            64px,
            calc(env(safe-area-inset-top, 0px) + 8px)
        );
    }

    .cws-finance-detail-modal-dialog {
        margin: var(--cws-modal-top-offset, var(--cws-mobile-modal-top)) auto
            8px;
        width: min(760px, calc(100% - 16px));
        max-height: calc(
            100vh - var(--cws-modal-top-offset, var(--cws-mobile-modal-top)) -
                8px
        );
        max-height: calc(
            100dvh - var(--cws-modal-top-offset, var(--cws-mobile-modal-top)) -
                8px
        );
        padding: 12px;
    }

    .cws-gallery-fullscreen-modal-dialog {
        margin: var(--cws-mobile-modal-top) 0 0;
        width: 100%;
        max-height: calc(100vh - var(--cws-mobile-modal-top));
        border-radius: 0;
        height: calc(100vh - var(--cws-mobile-modal-top));
        padding: 12px;
    }

    .cws-vehicle-360-modal-dialog {
        --cws-modal-top: var(--cws-mobile-modal-top);
        margin: var(--cws-modal-top) auto 8px;
        width: min(980px, calc(100% - 16px));
        max-height: calc(100vh - var(--cws-modal-top) - 8px);
        padding: 12px;
    }

    .cws-gallery-fullscreen-stage {
        min-height: calc(100vh - var(--cws-mobile-modal-top) - 220px);
    }

    .cws-gallery-fullscreen-stage img {
        height: calc(100vh - var(--cws-mobile-modal-top) - 220px);
    }

    .cws-vehicle-360-stage {
        min-height: calc(100vh - var(--cws-mobile-modal-top) - 200px);
        height: calc(100vh - var(--cws-mobile-modal-top) - 200px);
    }
}

@media (max-width: 560px) {
    .cws-view-switch {
        display: none;
    }

    .cws-view-select {
        display: block;
        box-sizing: border-box;
        width: 100%;
        min-height: 42px;
        margin: 0;
        padding: 8px 36px 8px 12px;
        border: var(--cws-card-border-width, 1px) solid var(--cws-line, #dce2e8);
        border-radius: var(--cws-radius, 10px);
        background-color: var(--cws-field-bg, var(--cws-card-bg, #ffffff));
        color: var(--cws-content-text, #25394c);
        font: inherit;
    }

    .cws-card-actions {
        flex-wrap: wrap;
    }

    .cws-card-actions .cws-btn {
        width: 100%;
    }

    .cws-vehicle-details-actions {
        gap: 8px;
    }

    .cws-vehicle-details-specs {
        grid-template-columns: 1fr;
    }

    .cws-vehicle-details-environment {
        padding: 14px;
    }

    .cws-vehicle-details-equipment-group {
        padding: 0;
    }

    .cws-vehicle-details-module--description_module
        .cws-vehicle-details-section,
    .cws-vehicle-details-module--equipment_module
        .cws-vehicle-details-section {
        padding: 0;
    }

    .cws-vehicle-details-module--description_module
        .cws-vehicle-details-description,
    .cws-vehicle-details-equipment-groups {
        padding: 12px 14px;
    }

    .cws-vehicle-qr .cws-vehicle-qr-image {
        width: 84px;
        height: 84px;
    }

    .cws-vehicle-details-qr-bottom .cws-vehicle-qr .cws-vehicle-qr-image {
        width: 96px;
        height: 96px;
        max-width: min(100%, 52vw);
        max-height: min(100%, 52vw);
    }

    .cws-view-compact .cws-vehicle-track {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   EnVKV label (Pkw-Energieverbrauchskennzeichnung, Anlage 1) — local renderer.
   Pure-view; values come server-side. Body text is statutory German. Layout
   matches the real label (Label.png) and the legal Anlage-1 text: DIN A4 width,
   schwarz auf weiss, Source Sans Pro (same font the CWS worker uses for the
   official label); Schriftgrade pt (Ueberschrift 26 fett; Kasten 1/2/3 16 min
   14; Kasten 4 min 12; Kasten 5 + VIN/Datum min 10); CO2-Klasse-Block >= 2/3
   Breite; A-G class arrows as a staircase with white letters; black indicator
   arrow with white letter, tip opposite.
   ========================================================================== */
/* SINGLE SOURCE of the statutory CO2/efficiency A–G colours for every EnVKV
   component shown on the website (detail CO2 staircase `.cws-envkv-co2scale`,
   overview-card class badge `.cws-envkv-co2class--compact`, label preview).
   Declared on `.cws-frontend` so all of them — including the isolated
   `.cws-frontend--bare` variants — inherit it (`--bare` does not reset custom
   properties). Change the colours HERE to update everything on the website.
   Values sampled from the official Anlage-1 template
   (cws/assets/envkv_templates/m1_petrol_template-1.png, DENA master).
   NOTE: the actual statutory PDF label is rendered separately by the
   `cws-envkv-worker`; the `.cws-envkv-label` block below keeps its own copy for
   that label-render context. */
.cws-frontend {
    --cws-envkv-a: #01a650;
    --cws-envkv-b: #4fbd38;
    --cws-envkv-c: #b5db18;
    --cws-envkv-d: #fef105;
    --cws-envkv-e: #f9b30c;
    --cws-envkv-f: #f25d1a;
    --cws-envkv-g: #ed1c26;
}

.cws-envkv-label {
    /* Label-render context mirror — keep in sync with `.cws-frontend` above. */
    --cws-envkv-a: #01a650;
    --cws-envkv-b: #4fbd38;
    --cws-envkv-c: #b5db18;
    --cws-envkv-d: #fef105;
    --cws-envkv-e: #f9b30c;
    --cws-envkv-f: #f25d1a;
    --cws-envkv-g: #ed1c26;
    box-sizing: border-box;
    width: 210mm;
    max-width: 100%;
    margin: 0 auto;
    border: 1px solid #000;
    padding: 11mm 11mm 7mm;
    background: #fff;
    color: #000;
    font-family: Arial, Helvetica, "Liberation Sans", "Nimbus Sans", sans-serif;
    font-size: 12pt;
    line-height: 1.28;
}
.cws-envkv-label *,
.cws-envkv-label *::before,
.cws-envkv-label *::after { box-sizing: border-box; }
.cws-envkv-label__title {
    margin: 0 0 12px;
    text-align: center;
    font-size: 26pt;
    font-weight: 700;
    line-height: 1.16;
}

/* shared box */
.cws-envkv-label__box {
    border: 1px solid #000;
    padding: 6px 10px;
    margin: 0 0 8px;
    font-size: 16pt;
}

/* Kasten 1 — base data, exactly like the authoritative DENA master (Anlage 1
   Teil II, Nr. 2). Two columns; the right column is a flex stack whose last item
   ("anderer Energieträger") is pinned to the bottom so it aligns with the left
   column's "Kraftstoff" row. The gap under "Handelsbezeichnung" is reserve for a
   second line, which therefore does not push the left column or the pinned item:
     Marke:        | Handelsbezeichnung:
     Antriebsart:  | (reserve for a wrapped Handelsbezeichnung)
     Kraftstoff:   | anderer Energieträger:
   Each item is "Label: value" inline (value left, directly after the label).
   Kasten 2 (Energie/CO2) stays single-column with the value pushed right. */
.cws-envkv-label__base-cols { display: flex; gap: 0 24px; align-items: stretch; }
.cws-envkv-label__base-col { flex: 1 1 0; min-width: 0; }
.cws-envkv-label__base-col--right { display: flex; flex-direction: column; }
.cws-envkv-label__base-item { padding: 1px 0; }
.cws-envkv-label__base-item--pin { margin-top: auto; }
.cws-envkv-label__kv {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 1px 0;
}
.cws-envkv-label__base-label,
.cws-envkv-label__kv-label { font-weight: 700; }
.cws-envkv-label__base-value { font-weight: 400; }
.cws-envkv-label__kv-value { font-weight: 400; text-align: right; white-space: nowrap; }
/* The "(gewichtet, kombiniert)" / "(EAER)" / "(kombiniert)" qualifier is NOT
   bold on the official label — only the main term is. */
.cws-envkv-label__kv-qual { font-weight: 400; }

/* Kasten 3 — CO2-class block (>= 2/3) + Weitere Angaben */
.cws-envkv-label__cols {
    display: flex;
    border: 1px solid #000;
    margin: 0 0 8px;
}
.cws-envkv-label__col { padding: 10px 12px; min-width: 0; }
.cws-envkv-label__col--scale { flex: 0 0 66.666%; font-size: 16pt; }
.cws-envkv-label__col--more { flex: 0 0 33.333%; border-left: 1px solid #000; font-size: 12pt; }

/* --- CO2 scale: A-G staircase, white letters + black indicator arrow --- */
/* A–G colours inherited from the single `.cws-frontend` source above. */
.cws-envkv-co2scale {
    margin: 0;
}
.cws-envkv-co2scale__head { display: flex; flex-direction: column; margin-bottom: 10px; }
.cws-envkv-co2scale__title { font-weight: 700; }
.cws-envkv-co2scale__sub { font-size: 12pt; font-weight: 400; }
.cws-envkv-co2scale__rows {
    list-style: none; margin: 0; padding: 0; position: relative;
    display: flex; flex-direction: column; gap: 6px;
}
/* Bar height/gap/tip measured from the worker A4 PDF (bar ~29px, gap ~6px,
   tip a long chevron point); arrow height equals the bar height. */
.cws-envkv-co2scale__row { position: relative; display: flex; align-items: center; min-height: 30px; }
.cws-envkv-co2scale__bar {
    display: inline-flex;
    align-items: center;
    height: 29px;
    padding: 0 0 0 12px;
    color: #fff;
    font-weight: 700;
    font-size: 14pt;
    clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 50%, calc(100% - 11px) 100%, 0 100%);
}
/* Staircase widths measured pixel-exact from the official Anlage-1 template
   (m1_petrol_template-1.png): bar-left x=164, scale-column divider x=1604
   (content width 1440px); bar tip lengths 258/322/363/403/445/492/537px ->
   18/22/25/28/31/34/37% of the column. The bars deliberately reach only ~37%
   so a wide white lane + the black indicator arrow sit to their right. */
.cws-envkv-co2scale__row[data-class="A"] .cws-envkv-co2scale__bar { width: 18%; background: var(--cws-envkv-a); }
.cws-envkv-co2scale__row[data-class="B"] .cws-envkv-co2scale__bar { width: 22%; background: var(--cws-envkv-b); }
.cws-envkv-co2scale__row[data-class="C"] .cws-envkv-co2scale__bar { width: 25%; background: var(--cws-envkv-c); }
.cws-envkv-co2scale__row[data-class="D"] .cws-envkv-co2scale__bar { width: 28%; background: var(--cws-envkv-d); }
.cws-envkv-co2scale__row[data-class="E"] .cws-envkv-co2scale__bar { width: 31%; background: var(--cws-envkv-e); }
.cws-envkv-co2scale__row[data-class="F"] .cws-envkv-co2scale__bar { width: 34%; background: var(--cws-envkv-f); }
.cws-envkv-co2scale__row[data-class="G"] .cws-envkv-co2scale__bar { width: 37%; background: var(--cws-envkv-g); }
/* Black indicator arrow: left-pointing, white letter, in the fixed lane right
   of the staircase (template: left tip at ~49% of the column, width ~12%),
   vertically centred on the active class row. */
.cws-envkv-co2scale__arrow {
    position: absolute;
    left: 49%;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    width: 57px;
    height: 29px;
    padding: 0 9px 0 11px;
    background: #000;
    color: #fff;
    font-weight: 700;
    font-size: 14pt;
    clip-path: polygon(11px 0, 100% 0, 100% 100%, 11px 100%, 0 50%);
}

/* PHEV dual scale: two labelled lanes (weighted combined + discharged battery)
   each with its own arrow on one A-G staircase (Anlage 1). */
.cws-envkv-co2scale__plot { position: relative; }
/* Vertical divider between the two arrow columns. It lives inside __rows, so it
   runs from the TOP of class A down through the staircase (per the official
   Muster) — it does NOT extend up into the lane-header text. */
/* Arrow/divider geometry taken from the DENA master profile (m3_phev.json,
   co2_marker_dual): the combined arrow sits on the SAME lane as the single-arrow
   marker (base_x 208.6 ≈ single 208.8 → left 49%); the discharged arrow is +72pt
   to its right, the divider +57.4pt. 72pt = 96 CSS px and 57.4pt ≈ 76px at the
   print 96dpi, so the offsets are expressed as calc(49% + …px) — robust to the
   column width and matching the master base-to-base spacing exactly. */
.cws-envkv-co2scale__divider {
    position: absolute;
    left: calc(49% + 76px);
    top: 0;
    bottom: 0;
    width: 1px;
    margin: 0;
    padding: 0;
    background: #000;
}
.cws-envkv-co2scale__lanes {
    position: relative;
    height: 2.7em;
    margin: 0 0 4px;
    font-size: 12pt;
    line-height: 1.12;
}
.cws-envkv-co2scale__lane {
    position: absolute;
    bottom: 0;
    text-align: center;
}
/* Each lane header is CENTERED within its zone (DENA master): "gewichtet,
   kombiniert" between the G-arrow tip (staircase end ~37%) and the divider;
   "bei entladener Batterie" between the divider and the right column edge. The
   zone edges are tied to the divider position calc(49% + 76px) so they stay in
   sync with the vertical separator below. */
.cws-envkv-co2scale__lane--combined { left: 37%; right: calc(51% - 76px); }
.cws-envkv-co2scale__lane--discharged { left: calc(49% + 76px); right: 0; }
/* Inner block: shrinks to the widest line (explicit <br> in markup), centered by
   the lane's text-align, with both lines left-aligned to each other. */
.cws-envkv-co2scale__lane-text { display: inline-block; text-align: left; }
/* Combined arrow on the single-marker lane; discharged +72pt (96px) to the right. */
.cws-envkv-co2scale__arrow--combined { left: 49%; }
.cws-envkv-co2scale__arrow--discharged { left: calc(49% + 96px); }

/* compact standalone chip */
.cws-envkv-co2class--compact {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 34px; height: 30px; padding: 0 12px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700; font-size: 16px; color: #fff;
}
/* A–G colours inherited from the single `.cws-frontend` source above. */
.cws-envkv-co2class--compact[data-class="A"] { background: var(--cws-envkv-a); }
.cws-envkv-co2class--compact[data-class="B"] { background: var(--cws-envkv-b); }
.cws-envkv-co2class--compact[data-class="C"] { background: var(--cws-envkv-c); }
.cws-envkv-co2class--compact[data-class="D"] { background: var(--cws-envkv-d); }
.cws-envkv-co2class--compact[data-class="E"] { background: var(--cws-envkv-e); }
.cws-envkv-co2class--compact[data-class="F"] { background: var(--cws-envkv-f); }
.cws-envkv-co2class--compact[data-class="G"] { background: var(--cws-envkv-g); }

/* Weitere Angaben (rechts) — bullets, fits 1/3 column, values normal */
.cws-envkv-label__more-head { font-weight: 700; margin: 0 0 4px; }
.cws-envkv-label__more-group { font-weight: 700; margin: 4px 0 1px; }
/* One grid for the whole group: label column + value column are shared by
   every row, so the values line up in a single left-aligned column like the
   worker label (independent of value width — kWh vs l). */
.cws-envkv-label__more-grid {
    display: grid; grid-template-columns: max-content max-content;
    column-gap: 10px; row-gap: 2px; align-items: baseline;
}
.cws-envkv-label__more-label { white-space: nowrap; }
.cws-envkv-label__more-value { font-weight: 400; white-space: nowrap; text-align: left; }
/* Main (non-bullet) rows — e.g. "kombiniert" — are bold like the template. */
.cws-envkv-label__more-cell--main { font-weight: 700; }

/* Kasten 4 — costs: main labels bold, values NORMAL, scenario bullets */
/* Kasten 2 — sized so the long PHEV line ("Energieverbrauch (gewichtet,
   kombiniert): 16,5 kWh/100 km plus 1,1 l/100 km") stays on ONE line at A4,
   like the official template / worker PDF (no wrap of label or value). */
.cws-envkv-label__energy { font-size: 14pt; }
.cws-envkv-label__energy .cws-envkv-label__kv-label { white-space: nowrap; }
/* Kasten 4 must never drop below 12pt (Pkw-EnVKV Anlage 1 Teil I, Nr. 8:
   "Die Angaben in diesem Kasten dürfen einen Schriftgrad von 12 pt nicht
   unterschreiten."). Legal minimum, not a layout preference. */
.cws-envkv-label__costs { font-size: 12pt; }
.cws-envkv-label__cost-row {
    display: flex; justify-content: space-between; gap: 16px; padding: 2px 0;
}
.cws-envkv-label__cost-row > .cws-envkv-label__cost-label { font-weight: 700; min-width: 0; }
.cws-envkv-label__cost-row > .cws-envkv-label__cost-value { font-weight: 700; text-align: right; white-space: nowrap; flex: none; }
.cws-envkv-label__cost-row--sub { padding-left: 0; }
/* Bullet scenario lines: normal weight, hanging indent so wrapped lines align
   under the text after the bullet instead of under the bullet itself. */
.cws-envkv-label__cost-row--sub > .cws-envkv-label__cost-label { font-weight: 400; padding-left: 1.1em; text-indent: -1.1em; }
/* Scenario VALUES are normal too — only the mittlere (primary) scenario line is
   bold (label + value), as on the official label; niedrig/hoch stay normal. */
.cws-envkv-label__cost-row--sub > .cws-envkv-label__cost-value { font-weight: 400; }
.cws-envkv-label__cost-row--primary > .cws-envkv-label__cost-label,
.cws-envkv-label__cost-row--primary > .cws-envkv-label__cost-value { font-weight: 700; }

/* Kasten 5 — footnotes + footer (VIN/date) min 10pt */
.cws-envkv-label__fnref { font-size: 0.7em; vertical-align: super; line-height: 0; }
.cws-envkv-label__footnotes { border: 1px solid #000; padding: 8px 10px; margin: 0 0 8px; }
.cws-envkv-label__footnote { margin: 0 0 6px; font-size: 10pt; line-height: 1.36; }
.cws-envkv-label__footnote:last-child { margin-bottom: 0; }
.cws-envkv-label__footer {
    display: flex; justify-content: space-between; gap: 12px;
    font-size: 10pt; font-weight: 400;
}
.cws-envkv-label__pdf { margin-top: 14px; }
.cws-envkv-label__pdf-link {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 16px; border-radius: 6px; background: #1c1f23; color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 600; font-size: 13px; text-decoration: none;
}
.cws-envkv-label__pdf-link:hover,
.cws-envkv-label__pdf-link:focus { background: #34393f; color: #fff; }

@media (max-width: 760px) {
    .cws-envkv-label { padding: 16px 12px 10px; }
    .cws-envkv-label__title { font-size: 19pt; }
    .cws-envkv-label__box { font-size: 13pt; }
    .cws-envkv-label__cols { flex-direction: column; }
    .cws-envkv-label__col--scale { flex: none; font-size: 14pt; }
    .cws-envkv-label__col--more { flex: none; border-left: 0; border-top: 1px solid #000; font-size: 13pt; }
}

/* A4 reference: the full label (shortcode adds --a4) must have a true DIN-A4
   page footprint (210x297mm) on screen, not just A4 width. Isolated building
   blocks (co2_class etc.) stay unsized. The 760px shrink above only applies to
   narrow viewports; on those the responsive width wins (max-width:100%). */
.cws-envkv-label--a4 { min-height: 297mm; }
/* Bare: individual building blocks placed freely on the site (Carzilla-style
   inline widgets). Drops the A4 outer frame/width; the inner Kasten boxes and
   the CO2 staircase keep their statutory look. */
.cws-envkv-label--bare {
    width: auto;
    max-width: none;
    border: 0;
    padding: 0;
    font-size: 14px;
}
.cws-envkv-label--bare .cws-envkv-label__box,
.cws-envkv-label--bare .cws-envkv-label__cols { font-size: 14px; }
.cws-envkv-label--bare .cws-envkv-label__col--more { font-size: 12.5px; }
@media (max-width: 760px) {
    /* Don't force a 297mm column on phones — let it flow. */
    .cws-envkv-label--a4 { min-height: 0; }
}

/* Print: render the full label as a clean single A4 page (Strg+P / Save-as-PDF).
   No local PDF library — the legal PDF stays the server worker output. */
@page { size: A4 portrait; margin: 12mm; }
@media print {
    .cws-envkv-label {
        width: 210mm;
        min-height: 297mm;
        max-width: none;
        margin: 0;
        border: 0;
        box-shadow: none;
        page-break-inside: avoid;
    }
    .cws-envkv-label__pdf { display: none; } /* PDF download button is screen-only */
}

/* ==========================================================================
   Design controls: card style, hover effects, accent gradient (v1.0.770)
   The controlling class sits on the .cws-frontend root (archive wrap / detail
   section / finance / expose); card surfaces are descendants. Theme-independent,
   scoped to plugin surfaces only — no theme coupling.
   ========================================================================== */

/* Card style — bordered: crisp border, no shadow (flat). */
.cws-cardstyle-bordered .cws-vehicle-card,
.cws-cardstyle-bordered .cws-filter-form {
    box-shadow: none;
    border-width: 1.5px;
    border-color: color-mix(in srgb, var(--cws-content-text) 22%, transparent);
}

/* Card style — elevated: deeper shadow, borderless. */
.cws-cardstyle-elevated .cws-vehicle-card,
.cws-cardstyle-elevated .cws-filter-form {
    border-color: transparent;
    box-shadow: 0 0.75rem 1.6rem rgba(0, 0, 0, 0.14);
}

/* Card style — glass: translucent card + backdrop blur (glassmorphism).
   Degrades to a solid card where backdrop-filter is unsupported. */
.cws-cardstyle-glass .cws-vehicle-card,
.cws-cardstyle-glass .cws-filter-form {
    background: color-mix(in srgb, var(--cws-card-bg) 58%, transparent);
    border-color: color-mix(in srgb, #ffffff 22%, transparent);
    box-shadow:
        0 0.6rem 1.8rem rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    -webkit-backdrop-filter: blur(16px) saturate(1.15);
    backdrop-filter: blur(16px) saturate(1.15);
}

/* Hover effects — opt-in card lift and/or image zoom. Suppressed when the user
   prefers reduced motion. The base card keeps its subtle default lift. */
@media (prefers-reduced-motion: no-preference) {
    .cws-hover-lift .cws-vehicle-card:hover,
    .cws-hover-lift-zoom .cws-vehicle-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 0.9rem 1.6rem rgba(0, 0, 0, 0.16);
    }
    .cws-hover-zoom .cws-card-image img,
    .cws-hover-zoom .cws-card-image .wp-post-image,
    .cws-hover-lift-zoom .cws-card-image img,
    .cws-hover-lift-zoom .cws-card-image .wp-post-image {
        transition: transform 0.3s ease;
    }
    .cws-hover-zoom .cws-vehicle-card:hover .cws-card-image img,
    .cws-hover-zoom .cws-vehicle-card:hover .cws-card-image .wp-post-image,
    .cws-hover-lift-zoom .cws-vehicle-card:hover .cws-card-image img,
    .cws-hover-lift-zoom .cws-vehicle-card:hover .cws-card-image .wp-post-image {
        transform: scale(1.05);
    }
}

/* Accent gradient — primary buttons, PDF link and price surface use the
   derived primary gradient (muted/secondary buttons stay flat). */
.cws-accent-gradient .cws-btn:not(.cws-btn-muted),
.cws-accent-gradient .cws-pdf-link,
.cws-accent-gradient .cws-price {
    background: var(--cws-primary-gradient, var(--cws-primary-button, var(--cws-primary)));
}

/* ==========================================================================
   3D depth (v1.0.778) — light edges + layered shadows for a three-dimensional
   skin. PURELY VISUAL: only `box-shadow` is set (never background/layout), so
   it composes with the accent gradient and never affects the responsive
   structure of the hero or cards. Controlled by the `depth_style` control via
   the `cws-depth-raised` / `cws-depth-deep` root classes.
   ========================================================================== */

/* Card/panel elevation — layered drop shadow. */
.cws-depth-raised .cws-vehicle-card,
.cws-depth-raised .cws-filter-form,
.cws-depth-raised .cws-finance-calculator,
.cws-depth-raised .cws-expose-form-wrap {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 20px rgba(0, 0, 0, 0.09);
}
.cws-depth-deep .cws-vehicle-card,
.cws-depth-deep .cws-filter-form,
.cws-depth-deep .cws-finance-calculator,
.cws-depth-deep .cws-expose-form-wrap {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08), 0 16px 36px rgba(0, 0, 0, 0.16);
}

/* Filled colour surfaces (buttons, price, monthly) get a beveled, glossy look
   via inset highlight (top) + inset shade (bottom) + a soft drop shadow. Hue-
   agnostic: works on any colour and does not touch `background`. */
.cws-depth-raised .cws-btn,
.cws-depth-raised .cws-pdf-link,
.cws-depth-raised .cws-price,
.cws-depth-raised .cws-monthly {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28),
        inset 0 -1px 0 rgba(0, 0, 0, 0.10), 0 1px 2px rgba(0, 0, 0, 0.14);
}
.cws-depth-deep .cws-btn,
.cws-depth-deep .cws-pdf-link,
.cws-depth-deep .cws-price,
.cws-depth-deep .cws-monthly {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38),
        inset 0 -2px 0 rgba(0, 0, 0, 0.14), 0 3px 7px rgba(0, 0, 0, 0.24);
}

/* Keep the existing hover lift visible on top of depth shadows. */
@media (prefers-reduced-motion: no-preference) {
    .cws-depth-raised.cws-hover-lift .cws-vehicle-card:hover,
    .cws-depth-deep.cws-hover-lift .cws-vehicle-card:hover,
    .cws-depth-raised.cws-hover-lift-zoom .cws-vehicle-card:hover,
    .cws-depth-deep.cws-hover-lift-zoom .cws-vehicle-card:hover {
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.10), 0 20px 42px rgba(0, 0, 0, 0.20);
    }
}