/* ============================================================
   WPCS Design System — style.css
   Globale Variablen & wiederverwendbare Klassen
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@400;500;600;700&family=Outfit:wght@300;400;500&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ============================================================
   DESIGN TOKENS
   ============================================================ */

:root {

    /* --- Colors --- */
    --wpcs-color-bg:          #f0f2f4;
    --wpcs-color-surface:     #ffffff;
    --wpcs-color-surface-2:   #ffffff;
    --wpcs-color-surface-3:   #f5f7f8;
    --wpcs-color-border:      #dde1e6;
    --wpcs-color-border-hover:#b0bbc6;

    --wpcs-color-primary:        #00c4a0;
    --wpcs-color-primary-bright: #00d4ae;
    --wpcs-color-primary-dim:    rgba(0, 196, 160, 0.10);
    --wpcs-color-primary-glow:   rgba(0, 196, 160, 0.22);
    --wpcs-color-secondary:      #c87820;

    --wpcs-color-text:        #1a1f24;
    --wpcs-color-text-muted:  #6b7785;
    --wpcs-color-text-dim:    #676768;

    /* --- Form Tokens (genutzt von WPCSSelect + eigenen Elementen) --- */
    --wpcs-form-bg-color:           var(--wpcs-color-surface-2);
    --wpcs-form-border-color:       var(--wpcs-color-border);
    --wpcs-form-border-radius:      var(--wpcs-radius-sm);
    --wpcs-form-inner-color:        var(--wpcs-color-text);
    --wpcs-form-handle-icon-color:  var(--wpcs-color-primary);
    --wpcs-form-active-color:       var(--wpcs-color-primary-dim);
    --wpcs-form-active-inner-color: var(--wpcs-color-primary);
    --wpcs-form-height:             48px;
    --wpcs-form-padding-x:          16px;
    --wpcs-form-font-size:          var(--wpcs-text-lg);

    /* --- Spacing --- */
    --wpcs-space-xs:  6px;
    --wpcs-space-sm:  12px;
    --wpcs-space-md:  20px;
    --wpcs-space-lg:  32px;
    --wpcs-space-xl:  52px;

    /* --- Layout --- */
    --wpcs-content-width:      1440px;
    --wpcs-content-padding:    48px;
    --wpcs-content-body-width: 820px;
    --wpcs-content-text-width: 680px;

    /* --- Grid --- */
    --wpcs-grid-gap:    16px;
    --wpcs-grid-gap-lg: 28px;

    /* --- Border Radius --- */
    --wpcs-radius-sm:  4px;
    --wpcs-radius-md:  8px;
    --wpcs-radius-lg:  16px;
    --wpcs-radius-xl:  24px;

    /* --- Typography — Fonts --- */
    --wpcs-font-label: 'Exo 2', sans-serif;
    --wpcs-font-body:  'Outfit', sans-serif;
    --wpcs-font-mono:  'IBM Plex Mono', monospace;

    /* --- Typography — Scale --- */
    --wpcs-text-2xs:     11px;                      /* badge labels, micro UI */
    --wpcs-text-xs:      12px;                      /* chips, notes, captions */
    --wpcs-text-sm:      13px;                      /* buttons, nav, eyebrows */
    --wpcs-text-md:      14px;                      /* meta, sidebar small */
    --wpcs-text-base:    15px;                      /* body text, item labels */
    --wpcs-text-lg:      16px;                      /* default content, titles */
    --wpcs-text-xl:      18px;                      /* card titles, emphasized */
    --wpcs-text-2xl:     20px;                      /* body size, featured */
    --wpcs-text-3xl:     22px;                      /* large UI elements */
    --wpcs-text-4xl:     24px;                      /* price values, rates */
    --wpcs-text-5xl:     32px;                      /* prominent numbers */
    --wpcs-text-hero-sm: clamp(30px, 3.5vw, 48px); /* detail hero title */
    --wpcs-text-hero:    clamp(34px, 4vw, 52px);    /* page header title */
    --wpcs-text-price:   clamp(38px, 5vw, 58px);    /* main price display */

    /* --- Transitions --- */
    --wpcs-transition:       160ms ease;
    --wpcs-transition-slow:  380ms ease;

    /* --- Responsive Breakpoints (unitless, nur Referenz — Werte direkt in @media nutzen) ---
       Anpassen der Werte hier = Konzept-Dokumentation. Media-Query-Werte unten separat.
       --wpcs-bp-lg:  1024   →  @media (max-width: 1024px)  Tablet Landscape / kleiner Desktop
       --wpcs-bp-md:   768   →  @media (max-width: 768px)   Tablet Portrait / Smartphone
    */
    --wpcs-bp-lg: 1024;
    --wpcs-bp-md: 768;
}


/* ============================================================
   BASE RESET
   ============================================================ */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--wpcs-font-body);
    background: var(--wpcs-color-bg);
    color: var(--wpcs-color-text);
    font-size: var(--wpcs-text-2xl);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}


/* ============================================================
   REUSABLE COMPONENTS (.wpcs-*)
   ============================================================ */


/* --- Utility --- */

.wpcs_hidden {
    display: none !important;
}

/* Standort/Person-Wrapper: gleicher Abstand wie Sidebar */
#wpcs_locations_persons_select,
.location_wrapper,
.wpcs-contact-persons {
    display: flex;
    flex-direction: column;
    gap: var(--wpcs-space-md);
}

.dxim_clearfix::after {
    content: '';
    display: table;
    clear: both;
}


/* ============================================================
   PROSE — typografische Defaults für freien WP-Content
   (Gutenberg-Blöcke, the_content(), Markenbeschreibungen, Modellbeschreibungen,
   Fahrzeugbeschreibungen, etc.)

   Generisch — überall wo "richtiger" Body-Text mit Headlines, Absätzen, Listen
   und Links gerendert wird. Der Klasse `.wpcs-prose` einfach an den Wrapper.
   ============================================================ */

.wpcs-prose {
    font-family: var(--wpcs-font-body);
    font-size: var(--wpcs-text-base);
    line-height: 1.75;
    color: var(--wpcs-color-text-muted);
    max-width: var(--wpcs-content-body-width);
}

.wpcs-prose > *:first-child { margin-top: 0; }
.wpcs-prose > *:last-child  { margin-bottom: 0; }

.wpcs-prose p {
    margin: 0 0 1em;
}
.wpcs-prose p:last-child { margin-bottom: 0; }

.wpcs-prose h2,
.wpcs-prose h3,
.wpcs-prose h4 {
    font-family: var(--wpcs-font-label);
    font-weight: 700;
    color: var(--wpcs-color-text);
    line-height: 1.25;
    margin: 1.6em 0 0.5em;
}

.wpcs-prose h2 { font-size: var(--wpcs-text-2xl); }
.wpcs-prose h3 { font-size: var(--wpcs-text-xl); }
.wpcs-prose h4 { font-size: var(--wpcs-text-lg); }

.wpcs-prose a {
    color: var(--wpcs-color-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--wpcs-transition);
}

.wpcs-prose a:hover {
    color: var(--wpcs-color-primary-bright, var(--wpcs-color-primary));
}

.wpcs-prose ul,
.wpcs-prose ol {
    margin: 0 0 1em;
    padding-left: 1.4em;
}

.wpcs-prose li {
    margin: 0.3em 0;
}

.wpcs-prose ul li::marker {
    color: var(--wpcs-color-primary);
}

.wpcs-prose strong,
.wpcs-prose b {
    color: var(--wpcs-color-text);
    font-weight: 700;
}

.wpcs-prose em,
.wpcs-prose i {
    font-style: italic;
}

.wpcs-prose blockquote {
    margin: 1.4em 0;
    padding: 0 0 0 18px;
    border-left: 3px solid var(--wpcs-color-primary);
    color: var(--wpcs-color-text);
    font-style: italic;
}

.wpcs-prose img,
.wpcs-prose figure {
    max-width: 100%;
    height: auto;
    border-radius: var(--wpcs-radius-md);
    margin: 1.2em 0;
}

.wpcs-prose figure img {
    margin: 0;
}

.wpcs-prose figcaption {
    font-family: var(--wpcs-font-mono);
    font-size: var(--wpcs-text-xs);
    color: var(--wpcs-color-text-dim);
    margin-top: 6px;
}

.wpcs-prose hr {
    margin: 2em 0;
    border: 0;
    border-top: 1px solid var(--wpcs-color-border);
}

.wpcs-prose code {
    font-family: var(--wpcs-font-mono);
    font-size: 0.92em;
    background: var(--wpcs-color-surface-3);
    padding: 1px 6px;
    border-radius: var(--wpcs-radius-sm);
}


/* --- Breadcrumbs --- */

.wpcs_breadcrumbs ol {
    list-style: none;
    margin: 0;
    padding: 16px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--wpcs-font-body);
    font-size: var(--wpcs-text-base);
    color: var(--wpcs-color-text-muted);
    white-space: nowrap;
    flex-wrap: wrap;
}

.wpcs_breadcrumbs ol li {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
}

.wpcs_breadcrumbs ol li::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23b0bbc6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") no-repeat center;
    flex-shrink: 0;
}

.wpcs_breadcrumbs ol li:first-child::before {
    content: none;
    display: none;
}

.wpcs_breadcrumbs ol li a {
    color: var(--wpcs-color-text-muted);
    text-decoration: none;
    transition: color var(--wpcs-transition);
}

.wpcs_breadcrumbs ol li a:hover {
    color: var(--wpcs-color-primary);
}

.wpcs_breadcrumbs ol li:last-child {
    color: var(--wpcs-color-text);
    font-weight: 600;
}


/* --- Hero Section (einheitlich für alle Seitentypen) --- */

.wpcs-hero {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 52px;
    align-items: center;
    padding: var(--wpcs-space-xl) 0 var(--wpcs-space-xl); margin-bottom:var(--wpcs-space-xl);
    border-bottom: 1px solid var(--wpcs-color-border);
}

.wpcs-hero__info {
    display: flex;
    flex-direction: column;
}

.wpcs-hero__eyebrow {
    font-family: var(--wpcs-font-mono);
    font-size: var(--wpcs-text-xs);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--wpcs-color-text-muted);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.wpcs-hero__eyebrow::before {
    content: '';
    width: 20px;
    height: 1px;
    background: currentColor;
    display: block;
    flex-shrink: 0;
}

.wpcs-hero__headline {
    font-family: var(--wpcs-font-label);
    font-size: var(--wpcs-text-hero-sm);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--wpcs-color-text);
    margin-bottom: 20px;
}

.wpcs-hero__body {
    font-family: var(--wpcs-font-body);
    font-size: var(--wpcs-text-lg);
    line-height: 1.85;
    color: var(--wpcs-color-text-muted);
    max-width: var(--wpcs-content-text-width);
}

.wpcs-hero__image {
    aspect-ratio: 3 / 2;
    border-radius: var(--wpcs-radius-lg);
    overflow: hidden;
    background: var(--wpcs-color-surface-3);
}

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

.wpcs-hero__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--wpcs-font-mono);
    font-size: var(--wpcs-text-xs);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wpcs-color-text-muted);
    text-decoration: none;
    margin-bottom: 16px;
    transition: color var(--wpcs-transition);
}

.wpcs-hero__back:hover {
    color: var(--wpcs-color-primary);
}

.wpcs-hero__badge {
    font-family: var(--wpcs-font-mono);
    font-size: var(--wpcs-text-xs);
    color: var(--wpcs-color-text-muted);
    margin-bottom: 8px;
}

.wpcs-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 12px;
    margin-bottom: 12px;
}

.wpcs-hero__badges {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.wpcs-hero__actions {
    display: flex;
    gap: 12px;
    margin-top: 28px;
    flex-wrap: wrap;
}

.wpcs-hero__icon {
    width: 56px;
    height: 56px;
    border-radius: var(--wpcs-radius-md);
    background: var(--wpcs-color-primary-dim);
    color: var(--wpcs-color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-bottom: 12px;
}

.wpcs-hero__address {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    font-family: var(--wpcs-font-body);
    font-size: var(--wpcs-text-sm);
    color: var(--wpcs-color-text-muted);
}

/* Hero im Teaser: Body ohne max-width */
.wpcs-hero .wpcs-hero__body {
    max-width: none;
}


/* ============================================================
   HERO-STATS — Statistik-Block (Anzahl Fahrzeuge, Angebote etc.)
   Wird von Brand, Standort, Modell, Job, Service genutzt — daher generisch.
   ============================================================ */

.wpcs-hero-stats {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--wpcs-color-border);
    border: 1px solid var(--wpcs-color-border);
    border-radius: var(--wpcs-radius-lg);
    overflow: hidden;
    min-width: 220px;
}

.wpcs-hero-stat {
    background: var(--wpcs-color-surface);
    padding: 18px 28px;
    display: flex;
    align-items: center;
    gap: 18px;
    transition: background var(--wpcs-transition);
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.wpcs-hero-stat:hover {
    background: var(--wpcs-color-surface-3);
}

.wpcs-hero-stat__value {
    font-family: var(--wpcs-font-label);
    font-size: var(--wpcs-text-5xl);
    font-weight: 700;
    color: var(--wpcs-color-primary);
    line-height: 1;
    min-width: 52px;
    text-align: right;
}

.wpcs-hero-stat__label {
    font-family: var(--wpcs-font-mono);
    font-size: var(--wpcs-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--wpcs-color-text-muted);
    line-height: 1.4;
}

/* Stats im Hero: horizontal nebeneinander */
.wpcs-hero .wpcs-hero-stats {
    flex-direction: row;
    margin-top: 32px;
    min-width: 0;
}

.wpcs-hero .wpcs-hero-stat {
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    padding: 16px 20px;
    gap: 4px;
}

.wpcs-hero .wpcs-hero-stat__value {
    font-size: var(--wpcs-text-4xl);
    min-width: unset;
    text-align: left;
}


/* ============================================================
   THEME-SECTION — gemeinsamer Wrapper für Content-Sektionen auf
   Theme-Single-Seiten (Brand, Standort, Modell, Job, Service, OfferGroup).
   Klassenname `.wpcs-brand-section` historisch — bleibt bestehen, wird
   aber generisch eingesetzt. Ggf. in späterem Refactor umbenennen.
   ============================================================ */

.wpcs-brand-section {
    margin-top: var(--wpcs-space-xl);
}

.wpcs-brand-section__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 24px;
    gap: 16px;
}

.wpcs-brand-section__header .wpcs-section-title {
    margin-bottom: 0;
    border-bottom: none;
    padding-bottom: 0;
}

.wpcs-brand-section__link {
    font-family: var(--wpcs-font-mono);
    font-size: var(--wpcs-text-sm);
    color: var(--wpcs-color-primary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition: color var(--wpcs-transition);
    flex-shrink: 0;
}

.wpcs-brand-section__link:hover {
    color: var(--wpcs-color-primary-bright);
}


@media (max-width: 1024px) {
    .wpcs-hero {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .wpcs-hero__image {
        order: -1;
        aspect-ratio: 16 / 7;
    }
}

@media (max-width: 768px) {
    .wpcs-hero {
        padding: 28px 0 36px;
    }
    .wpcs-hero__headline {
        font-size: clamp(24px, 7vw, 36px);
    }
    .wpcs-hero__actions {
        flex-direction: column;
    }
    .wpcs-hero__actions .wpcs-btn {
        width: 100%;
        justify-content: center;
    }
    .wpcs-hero__image {
        aspect-ratio: 4 / 3;
    }
}


/* --- Footnotes ---
   Container-Block (Single-Page): wird als eigene Sektion gerendert,
   volle Breite innerhalb `.wpcs-page` (zwischen Layout-Container und
   Kontakt-Formular). Card-Look mit dezentem Hintergrund.
   Inline-Trigger (Loop-Cards): `.wpcs_footnote_icon` als klickbares
   Info-Icon hinter Preis/Titel; `.wpcs_footnote_links` als hochgestellte
   Nummer (1, 2, 3, …) auf Single-Pages. */

.wpcs_offer_footnotes {
    margin: 40px 0;
    padding: 24px 28px;
    background: var(--wpcs-color-surface);
    border: 1px solid var(--wpcs-color-border);
    border-radius: var(--wpcs-radius-md);
}

.wpcs_footnote_area {
    margin-bottom: 12px;
}

.wpcs_footnote_area:last-child {
    margin-bottom: 0;
}

.wpcs_footnote_area .wpcs_footnote_nr {
    font-family: var(--wpcs-font-label);
    font-size: var(--wpcs-text-base);
    font-weight: 700;
    color: var(--wpcs-color-text);
}

.wpcs_footnote_area .wpcs_footnote_nr::after {
    content: ") ";
}

.wpcs_footnote_area .wpcs_footnote {
    font-family: var(--wpcs-font-body);
    font-size: var(--wpcs-text-sm);
    line-height: 1.6;
    color: var(--wpcs-color-text-muted);
}

.wpcs_footnote_area .wpcs_footnote::after {
    content: " ";
}

/* Inline-Hochstellzahl (Single-Pages) */
sup.wpcs_footnote_links {
    font-size: var(--wpcs-text-xs);
    vertical-align: super;
    color: var(--wpcs-color-primary);
    cursor: pointer;
    margin-left: 2px;
}

/* Inline-Info-Icon (Loop / Archive — Trigger für 2-Slide-Toggle).
   Sichtbar als kleines Info-Symbol neben Preis-Wert. */
.wpcs_footnote_icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: 4px;
    color: var(--wpcs-color-text-dim);
    font-size: 16px;
    line-height: 1;
    vertical-align: middle;
    transition: color var(--wpcs-transition);
}

.wpcs_2slides_activate:hover .wpcs_footnote_icon,
.wpcs_2slides_activate:focus-visible .wpcs_footnote_icon {
    color: var(--wpcs-color-primary);
}

/* Trigger-Anchor selbst: kein Underline, vererbt Cursor von Icon */
.wpcs_2slides_activate {
    text-decoration: none;
    cursor: pointer;
}

#wpcs_generated_footnotes {
    padding: 20px 0;
    font-family: var(--wpcs-font-body);
    font-size: var(--wpcs-text-base);
    color: var(--wpcs-color-text-muted);
    line-height: 1.6;
}


/* --- Card --- */

.wpcs-card {
    background: var(--wpcs-color-surface);
    border: 1px solid var(--wpcs-color-border);
    border-radius: var(--wpcs-radius-lg);
    padding: var(--wpcs-space-lg);
}


/* --- Section Title --- */

.wpcs-section-title {
    font-family: var(--wpcs-font-label);
    font-size: var(--wpcs-text-lg);
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--wpcs-color-text-dim);
    margin-bottom: var(--wpcs-space-md);
    padding-bottom: var(--wpcs-space-sm);
    border-bottom: 1px solid var(--wpcs-color-border);
}


/* --- Divider --- */

.wpcs-divider {
    height: 1px;
    background: var(--wpcs-color-border);
    margin: var(--wpcs-space-lg) 0;
}


/* --- Grid (Utility + View-Toggle-State) ---
   Zwei Klassen-Familien greifen auf dasselbe Pattern:
   - `.wpcs-grid-N`  — vom Layout-Code direkt gesetzt (Service-, Model-, Job-Grid …)
   - `.view-grid-N`  — vom View-Toggle (form-elements.js) zur Laufzeit gesetzt
                       (z.B. Offer-Archive Grid/List-Switch)

   Cards haben eine harte Mindestbreite (--wpcs-grid-min, 240px). Sobald
   N×Min nicht mehr in den Container passen, springt das Grid automatisch
   auf weniger Spalten (auto-fit + minmax-Pattern). Daher kein expliziter
   Mobile-Breakpoint mehr — funktioniert containerbreitenabhängig.

   Pro N: max-Spaltenzahl = N, min-Spaltenbreite = max(--wpcs-grid-min,
   calc((100% − Gaps) / N)). Gap ist konstant `var(--wpcs-grid-gap)`. */

.wpcs-grid {
    display: grid;
    gap: var(--wpcs-grid-gap);
}

.wpcs-grid-1, .view-grid-1,
.wpcs-grid-2, .view-grid-2,
.wpcs-grid-3, .view-grid-3,
.wpcs-grid-4, .view-grid-4,
.wpcs-grid-5, .view-grid-5 {
    display: grid;
    gap: var(--wpcs-grid-gap);
    --wpcs-grid-min: 240px;
}

.wpcs-grid-1, .view-grid-1 { grid-template-columns: 1fr; }
.wpcs-grid-2, .view-grid-2 {
    grid-template-columns: repeat(auto-fit, minmax(max(var(--wpcs-grid-min), calc((100% - 1 * var(--wpcs-grid-gap)) / 2)), 1fr));
}
.wpcs-grid-3, .view-grid-3 {
    grid-template-columns: repeat(auto-fit, minmax(max(var(--wpcs-grid-min), calc((100% - 2 * var(--wpcs-grid-gap)) / 3)), 1fr));
}
.wpcs-grid-4, .view-grid-4 {
    grid-template-columns: repeat(auto-fit, minmax(max(var(--wpcs-grid-min), calc((100% - 3 * var(--wpcs-grid-gap)) / 4)), 1fr));
}
.wpcs-grid-5, .view-grid-5 {
    grid-template-columns: repeat(auto-fit, minmax(max(var(--wpcs-grid-min), calc((100% - 4 * var(--wpcs-grid-gap)) / 5)), 1fr));
}


/* ============================================================
   STICKY BAR
   Modulare Sticky-Bar die beim Scrollen über ein Trigger-Element
   eingeblendet wird. Per data-wpcs-sticky-trigger="<selector>" gesteuert.
   ============================================================ */

.wpcs-sticky-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--wpcs-color-surface);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--wpcs-color-border);
    transform: translateY(-100%);
    transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1);
}

.wpcs-sticky-bar.visible {
    transform: translateY(0);
}

.wpcs-sticky-bar__inner {
    width: min(var(--wpcs-content-width), 100% - var(--wpcs-content-padding));
    margin: 0 auto;
    height: 60px;
    display: flex;
    align-items: center;
    gap: 24px;
}

.wpcs-sticky-bar__title {
    flex: 1;
    min-width: 0;
}

.wpcs-sticky-bar__main {
    font-family: var(--wpcs-font-label);
    font-size: var(--wpcs-text-lg);
    font-weight: 700;
    color: var(--wpcs-color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wpcs-sticky-bar__sub {
    font-family: var(--wpcs-font-mono);
    font-size: var(--wpcs-text-sm);
    color: var(--wpcs-color-text-muted);
}

.wpcs-sticky-bar__price {
    font-family: var(--wpcs-font-label);
    font-size: var(--wpcs-text-2xl);
    font-weight: 700;
    color: var(--wpcs-color-text);
    white-space: nowrap;
}

.wpcs-sticky-bar__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wpcs-sticky-bar .wpcs-btn {
    height: 38px;
    flex-shrink: 0;
}

.wpcs-sticky-bar .wpcs-btn-ghost {
    padding: 0 14px;
    gap: 6px;
}

.wpcs-sticky-bar__logo-link {
    flex-shrink: 0;
    line-height: 0;
}

.wpcs-sticky-bar__logo {
    height: 32px;
    width: auto;
    object-fit: contain;
}

.wpcs-sticky-bar__stats {
    display: flex;
    align-items: center;
    gap: 16px;
}

.wpcs-sticky-bar__stat {
    font-family: var(--wpcs-font-mono);
    font-size: var(--wpcs-text-xs);
    color: var(--wpcs-color-text-muted);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--wpcs-transition);
}

.wpcs-sticky-bar__stat:hover {
    color: var(--wpcs-color-primary);
}

.wpcs-sticky-bar__nav {
    display: flex;
    align-items: center;
    gap: 4px;
}

.wpcs-sticky-bar__nav a {
    font-family: var(--wpcs-font-mono);
    font-size: var(--wpcs-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--wpcs-color-text-muted);
    text-decoration: none;
    padding: 6px 10px;
    border-radius: var(--wpcs-radius-sm);
    transition: color var(--wpcs-transition), background var(--wpcs-transition);
    white-space: nowrap;
}

.wpcs-sticky-bar__nav a:hover,
.wpcs-sticky-bar__nav a.active {
    color: var(--wpcs-color-text);
    background: var(--wpcs-color-surface-3);
}

.wpcs-sticky-bar__stat strong {
    font-family: var(--wpcs-font-label);
    font-size: var(--wpcs-text-base);
    font-weight: 700;
    color: var(--wpcs-color-text);
}

.wpcs-sticky-bar .wpcs-btn-primary {
    padding: 0 20px;
}


/* ============================================================
   PAGE STRUCTURE
   Wiederverwendbare Layout-Blöcke für alle Seiten.
   Jede Seite kombiniert diese Klassen — keine seitenspezifischen
   Struktur-Klassen außerhalb dieser Definitionen.
   ============================================================ */


/* --- Page Container --- */

.wpcs-page {
    width: min(var(--wpcs-content-width), 100% - var(--wpcs-content-padding));
    margin: 0 auto;
    padding-bottom: 80px;
}

.wpcs-page--narrow { width: min(960px, 100% - var(--wpcs-content-padding)); }
.wpcs-page--wide   { width: min(var(--wpcs-content-width), 100% - var(--wpcs-content-padding)); }


/* --- Page Header --- */

.wpcs-page-header {
    padding: 48px 0 36px;
    border-bottom: 1px solid var(--wpcs-color-border);
    margin-bottom: 36px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.wpcs-page-header__body {
    display: flex;
    flex-direction: column;
}

.wpcs-page-header__eyebrow {
    font-family: var(--wpcs-font-mono);
    font-size: var(--wpcs-text-xs);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--wpcs-color-text-muted);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.wpcs-page-header__eyebrow::before {
    content: '';
    width: 20px;
    height: 1px;
    background: currentColor;
    display: block;
    flex-shrink: 0;
}

.wpcs-page-header__title {
    font-family: var(--wpcs-font-label);
    font-size: var(--wpcs-text-hero);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--wpcs-color-text);
    overflow: hidden;
}

.wpcs-page-header__subtitle {
    font-family: var(--wpcs-font-body);
    font-size: var(--wpcs-text-lg);
    color: var(--wpcs-color-text-muted);
    margin-top: 10px;
}

.wpcs-page-header__meta {
    font-family: var(--wpcs-font-mono);
    font-size: var(--wpcs-text-xs);
    color: var(--wpcs-color-text-muted);
    text-align: right;
}

.wpcs-page-header__meta strong {
    color: var(--wpcs-color-primary);
    font-weight: 500;
}

.wpcs-page-header__actions {
    display: flex;
    gap: var(--wpcs-space-sm);
    align-items: center;
}


/* --- Layout (Sidebar + Main) --- */

.wpcs-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 32px;
    align-items: start;
}

.wpcs-layout--no-sidebar {
    grid-template-columns: 1fr;
}

.wpcs-layout--sidebar-right {
    grid-template-columns: 1fr 360px;
}

.wpcs-layout--sidebar-right > .wpcs-sidebar {
    grid-column: 2;
    grid-row: 1;
}

.wpcs-layout--sidebar-right > .wpcs-main {
    grid-column: 1;
    grid-row: 1;
}

.wpcs-layout--sidebar-wide {
    grid-template-columns: 320px 1fr;
}


/* --- Sidebar --- */

.wpcs-sidebar {
    position: sticky;
    top: 24px;
    display: flex;
    flex-direction: column;
    gap: var(--wpcs-space-md);
}

.wpcs-sidebar__card {
    background: var(--wpcs-color-surface);
    border: 1px solid var(--wpcs-color-border);
    border-radius: var(--wpcs-radius-lg);
    overflow: hidden;
}

.wpcs-sidebar__card::before {
    content: '';
    display: block;
    height: 2px;
    background: linear-gradient(
        90deg,
        var(--wpcs-color-primary) 0%,
        var(--wpcs-color-primary-bright) 60%,
        transparent 100%
    );
}

.wpcs-sidebar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 16px;
    border-bottom: 1px solid var(--wpcs-color-border);
}

.wpcs-sidebar__header-title {
    font-family: var(--wpcs-font-label);
    font-size: var(--wpcs-text-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--wpcs-color-text);
}

.wpcs-sidebar__header-action {
    font-family: var(--wpcs-font-body);
    font-size: var(--wpcs-text-xs);
    color: var(--wpcs-color-text-muted);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: color var(--wpcs-transition);
}

.wpcs-sidebar__header-action:hover,
.wpcs-sidebar__header-action:focus {
    color: var(--wpcs-color-primary);
    background: none;
    outline: none;
}

.wpcs-sidebar__header-action:focus-visible {
    outline: 2px solid var(--wpcs-color-primary-dim);
    outline-offset: 2px;
}

/* Filter-Toggle: Icon + "Filter" Text, immer sichtbar */
.wpcs-sidebar__filter-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-align: left;
    color: var(--wpcs-color-text);
    font-family: var(--wpcs-font-label);
    font-size: var(--wpcs-text-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.wpcs-sidebar__body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.wpcs-sidebar__section + .wpcs-sidebar__section {
    padding-top: 20px;
    border-top: 1px solid var(--wpcs-color-border);
}

.wpcs-sidebar__section-title {
    font-family: var(--wpcs-font-label);
    font-size: var(--wpcs-text-2xs);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--wpcs-color-text-dim);
    margin-bottom: 14px;
}

.wpcs-sidebar__footer {
    padding: 16px 20px;
    border-top: 1px solid var(--wpcs-color-border);
}

/* Checkboxen in der Sidebar immer 2-spaltig */
.wpcs-sidebar__body .wpcs-checkbox-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 12px;
}


/* --- Main Content --- */

.wpcs-main {
    min-width: 0; /* verhindert Grid-Overflow */
}


/* --- Filter Bar (Layout 2: Filter oben, volle Breite) --- */

.wpcs-filter-bar {
    background: var(--wpcs-color-surface);
    border: 1px solid var(--wpcs-color-border);
    border-radius: var(--wpcs-radius-lg);
    margin-bottom: 24px;
    overflow: hidden;
}

.wpcs-filter-bar::before {
    content: '';
    display: block;
    height: 2px;
    background: linear-gradient(90deg, var(--wpcs-color-primary), var(--wpcs-color-primary-bright) 60%, transparent);
}

.wpcs-filter-bar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 16px;
    border-bottom: 1px solid var(--wpcs-color-border);
}

/* Toggle-Button: Icon + "Filter" Text (analog zur Sidebar) */
.wpcs-filter-bar__toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--wpcs-color-text);
    font-family: var(--wpcs-font-label);
    font-size: var(--wpcs-text-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* Reset-Button: nur Icon */
.wpcs-filter-bar__reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--wpcs-color-text-muted);
    padding: 0;
    transition: color var(--wpcs-transition);
}

.wpcs-filter-bar__reset:hover,
.wpcs-filter-bar__reset:focus {
    color: var(--wpcs-color-primary);
    background: none;
    outline: none;
}

.wpcs-filter-bar__reset:focus-visible {
    outline: 2px solid var(--wpcs-color-primary-dim);
    outline-offset: 2px;
}

.wpcs-filter-bar--collapsed .wpcs-filter-bar__body {
    display: none;
}

.wpcs-filter-bar__body {
    padding: 20px;
}

/* Filter-Grid: Spalten-Wrapper als Grid-Items, Filter untereinander pro Spalte.
   Global — funktioniert auch frei platziert per Shortcode [WPCS_filterform]. */
.wpcs-filter-form[data-columns] {
    display: grid;
    gap: 20px;
    width: 100%;
}

.wpcs-filter-form[data-columns="1"] { grid-template-columns: 1fr; }
.wpcs-filter-form[data-columns="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wpcs-filter-form[data-columns="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wpcs-filter-form[data-columns="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.wpcs-filter-form__column {
    gap: 16px;
    min-width: 0;
}

/* Sidebar: immer 1 Spalte (Sidebar ist schmal) */
.wpcs-sidebar .wpcs-filter-form[data-columns] {
    grid-template-columns: 1fr;
}


/* --- Topbar (Sortierung, View-Toggle, Treffer) --- */

.wpcs-topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.wpcs-topbar__start {
    margin-right: auto;
}

.wpcs-topbar__count {
    font-family: var(--wpcs-font-mono);
    font-size: var(--wpcs-text-xs);
    color: var(--wpcs-color-text-muted);
}

.wpcs-topbar__count strong {
    color: var(--wpcs-color-text);
    font-weight: 500;
}

.wpcs-topbar__end {
    display: flex;
    align-items: center;
    gap: 12px;
}


/* --- View Toggle --- */

.wpcs-view-toggle {
    display: inline-flex;
    gap: 2px;
    background: var(--wpcs-color-surface);
    border: 1px solid var(--wpcs-color-border);
    border-radius: var(--wpcs-radius-sm);
    padding: 3px;
    width: fit-content;
    max-width: 100%;
    vertical-align: middle;
}

.wpcs-view-toggle__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 3px;
    background: transparent;
    color: var(--wpcs-color-text-muted);
    cursor: pointer;
    transition: all var(--wpcs-transition);
}

/* Explizite SVG-Größen + Display, damit Themes mit svg{width:100%} u.ä.
   die Icons nicht zerlegen — wichtig für freie PageBuilder-Platzierung
   ohne .wpcs-page Wrapper. */
.wpcs-view-toggle__btn svg {
    display: block;
    width: 14px;
    height: 14px;
    overflow: visible;
    fill: currentColor;
    stroke: none;
    pointer-events: none;
    flex-shrink: 0;
    max-width: none;
    max-height: none;
}

.wpcs-view-toggle__btn svg rect,
.wpcs-view-toggle__btn svg path {
    fill: currentColor;
    stroke: none;
}

.wpcs-view-toggle__btn:hover {
    color: var(--wpcs-color-text);
}

.wpcs-view-toggle__btn.active {
    background: var(--wpcs-color-primary);
    color: white;
}


/* ============================================================
   THEME PROTECTION — SVG-Icons in Buttons
   WordPress-Themes überschreiben oft generisch button-Styles
   und machen SVG-Icons unsichtbar. Dieser Block setzt alle
   relevanten Properties explizit innerhalb von .wpcs-page,
   damit Theme-CSS keine Chance hat sie zu überschreiben.
   ============================================================ */

/* Alle SVGs innerhalb des Plugin-Wrappers: Grundregeln */
.wpcs-page svg {
    display: inline-block;
    overflow: visible;
    pointer-events: none;
    flex-shrink: 0;
    max-width: none;
    max-height: none;
    vertical-align: middle;
}

/* Stroke-basierte Icons (fill=none, stroke=currentColor) */
/* fav-Button, Chevron, Pfeil-Icons */
.wpcs-vehicle-card__fav svg,
.wpcs-sidebar__toggle-chevron,
.wpcs-sidebar__toggle-chevron polyline,
.wpcs-sidebar__toggle-chevron path {
    fill: none;
    stroke: currentColor;
}

/* View-Toggle-SVG-Regeln stehen oben global (siehe .wpcs-view-toggle__btn svg) */

/* Buttons: explizite Größen-Resets gegen font-size:0 o.ä. Theme-Tricks */
.wpcs-vehicle-card__fav,
.wpcs-view-toggle__btn,
.wpcs-sidebar__filter-toggle {
    font-size: var(--wpcs-text-base);
    line-height: 1;
}

/* Fav-Button: explizite Farbe damit currentColor funktioniert */
.wpcs-vehicle-card__fav {
    color: var(--wpcs-color-text-muted);
}
.wpcs-vehicle-card__fav:hover {
    color: #e53935;
}

/* View-Toggle: explizite Farbe */
.wpcs-view-toggle__btn {
    color: var(--wpcs-color-text-muted);
}
.wpcs-view-toggle__btn.active {
    color: white;
}

/* Filter-Toggle: explizite Farbe damit Chevron sichtbar bleibt */
.wpcs-sidebar__filter-toggle {
    color: var(--wpcs-color-text);
}


/* ============================================================
   RESPONSIVE
   Breakpoints:  --wpcs-bp-lg: 1024px  |  --wpcs-bp-md: 768px
   ============================================================ */


/* ============================================================
   1024px — Tablet Landscape / Kleiner Desktop
   ============================================================ */

@media (max-width: 1024px) {

    .wpcs-page-header {
        padding: 36px 0 28px;
        margin-bottom: 28px;
    }

    .wpcs-page-header__title {
        font-size: var(--wpcs-text-hero-sm);
    }

    /* Sidebar etwas schmaler, aber bleibt als Spalte */
    .wpcs-layout {
        grid-template-columns: 240px 1fr;
        gap: 24px;
    }

    .wpcs-layout--sidebar-right {
        grid-template-columns: 1fr 240px;
    }

    .wpcs-layout--sidebar-wide {
        grid-template-columns: 260px 1fr;
    }

}


/* ============================================================
   768px — Tablet Portrait / Smartphone
   ============================================================ */

@media (max-width: 768px) {

    .wpcs-page,
    .wpcs-page--narrow,
    .wpcs-page--wide,
    .wpcs-sticky-bar__inner {
        width: min(var(--wpcs-content-width), 100% - calc(var(--wpcs-content-padding) / 2));
    }

    /* Filter-Bar: 1-spaltig auf Mobile */
    .wpcs-filter-bar .wpcs-filter-form {
        grid-template-columns: 1fr !important;
    }

    /* `.wpcs-grid-N` / `.view-grid-N` regeln sich automatisch über
       auto-fit + minmax — keine explizite Mobile-Override nötig. */

    /* --- Sticky Bar --- */
    .wpcs-sticky-bar__inner {
        padding: 0 16px;
        gap: 10px;
    }

    .wpcs-sticky-bar__sub,
    .wpcs-sticky-bar__price,
    .wpcs-sticky-bar__stats,
    .wpcs-sticky-bar__nav {
        display: none;
    }

    /* --- Page Header --- */
    .wpcs-page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 24px 0 20px;
        margin-bottom: 24px;
    }

    .wpcs-page-header__title {
        font-size: clamp(24px, 7vw, 36px);
    }

    .wpcs-page-header__meta {
        text-align: left;
        opacity: 1;
    }

    .wpcs-page-header__eyebrow,
    .wpcs-page-header__subtitle {
        opacity: 1;
    }

    /* --- Layout: Einspaltig, Sidebar stapelt unten --- */
    .wpcs-layout,
    .wpcs-layout--sidebar-right,
    .wpcs-layout--sidebar-wide {
        grid-template-columns: 1fr;
        gap: 0;
    }

    /* Main kommt nach Sidebar (Filter oben, Content unten) */
    .wpcs-layout .wpcs-main,
    .wpcs-layout--sidebar-right .wpcs-main,
    .wpcs-layout--sidebar-wide .wpcs-main {
        order: 2;
    }

    /* Sidebar-Right: explizite Grid-Platzierung aufheben → normaler Flow */
    .wpcs-layout--sidebar-right > .wpcs-sidebar,
    .wpcs-layout--sidebar-right > .wpcs-main {
        grid-column: auto;
        grid-row: auto;
    }

    .wpcs-layout--sidebar-right > .wpcs-sidebar {
        order: 1;
    }


    /* Sidebar: kein sticky auf Mobile */
    .wpcs-sidebar {
        position: static;
    }

    /* Checkboxen in Sidebar: 1-spaltig auf Mobile */
    .wpcs-sidebar__body .wpcs-checkbox-group {
        grid-template-columns: 1fr;
    }

    /* Mobile: Toggle-Button nimmt flex 1 ein, Reset-Button bleibt sichtbar */
    .wpcs-sidebar__filter-toggle {
        flex: 1;
    }

    /* Body: eingeklappt auf Mobile, GSAP animiert height */
    #sidebar-filter-body {
        overflow: hidden;
        height: 0;
        padding: 0 20px;
    }

    .wpcs-sidebar--open #sidebar-filter-body {
        padding: 20px;
    }

    /* --- Topbar --- */
    .wpcs-topbar {
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 16px;
    }

    .wpcs-topbar__start {
        flex: 1 0 100%;
        margin-right: 0;
    }

    .wpcs-topbar__end {
        flex: 1;
        justify-content: flex-end;
    }

}