/*
	Theme Name: WPCarSync Base Theme
	Theme URI: https://www.wpcarsync.de/
	Description: Theme für WPCarSync
	Author: DXMedia GmbH
	Author URI: https://www.dxmedia.de/
	Version: 1.0
	Text Domain: wpcs
	Tags: wpcs, WPCS, WPCarSync
*/

/* ============================================================
   Theme-Markup-CSS — basiert ausschließlich auf den
   Plugin-Design-Tokens (--wpcs-*) aus
   wp-content/plugins/WPCarSync/css/modern/style.css.
   Keine eigenen Tokens, keine Hardcoded-Farben/Fonts/Spacing.
   ============================================================ */

/* Aktion-Filter-Buttons: Active-State zwingend sichtbar.
   Override hier im Theme-CSS (lädt nach Plugin-CSS), damit Cache-Probleme
   und Plugin-Hover-Specificity garantiert übersteuert werden. */
body .wpcs-aktion-filters .wpcs_offer_group_filter_button.active,
body .wpcs-aktion-filters .wpcs_offer_group_filter_button.active:hover,
body .wpcs-aktion-filters .wpcs_offer_group_filter_button.active:focus,
body .wpcs-aktion-filters .wpcs-btn.active,
body .wpcs-aktion-filters .wpcs-btn.active:hover,
body .wpcs-aktion-filters .wpcs-btn.active:focus {
    background: var(--wpcs-color-primary) !important;
    color: var(--wpcs-color-surface) !important;
    border-color: var(--wpcs-color-primary) !important;
    box-shadow: 0 0 0 2px var(--wpcs-color-primary-glow);
}

/* --- Globale Link-Defaults ---
   Niedrige Specificity (:where = 0) — überschreibt nichts spezifisches
   (Plugin-Komponenten, Buttons, Cards behalten ihre eigenen Farben). */
a:where(:link, :visited) {
    color: var(--wpcs-color-text);
    text-decoration: none;
    transition: color var(--wpcs-transition);
}

a:where(:link, :visited):hover,
a:where(:link, :visited):focus-visible {
    color: var(--wpcs-color-primary);
}

/* --- Skip-Link & Screen-Reader --- */

.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link:focus {
    position: fixed;
    top: var(--wpcs-space-sm);
    left: var(--wpcs-space-sm);
    width: auto;
    height: auto;
    padding: var(--wpcs-space-sm) var(--wpcs-space-md);
    background: var(--wpcs-color-surface);
    color: var(--wpcs-color-text);
    border-radius: var(--wpcs-radius-md);
    clip: auto;
    z-index: 1000;
}

/* --- Layout-Container --- */

.wpcs-content-wrapper {
    max-width: var(--wpcs-content-width);
    padding-inline: 0;
    margin-inline: auto;
}

/* Layout-Toggles (Theme-Settings → Header & Footer → Layout).
   Default: Header/Footer-Background läuft full-width, Hero ist boxed. */

/* Header / Footer als Box: auf den Cap zentrieren, Background wird boxed,
   Body-Background wird links/rechts sichtbar. Plus Abstand zum Browser-Rand
   damit das Element nicht oben/unten klebt. */
body.is-header-boxed .site-topbar {
    max-width: var(--wpcs-content-width);
    margin-inline: auto;
}

/* Im boxed-Modus internes Padding einfügen, damit Logo / Menu / Tools nicht
   am Rand der Box kleben. Negative-Margin-Korrektur (Edge-Bündigkeit aus
   dem fullwidth-Modus) wieder neutralisieren. */
body.is-header-boxed .site-topbar .wpcs-content-wrapper {
    padding-inline: var(--wpcs-space-lg);
}
body.is-header-boxed .site-nav {
    margin-inline-start: 0;
}
body.is-header-boxed .site-topbar__tools {
    margin-inline-end: 0;
}

body.is-footer-boxed .site-footer {
    max-width: var(--wpcs-content-width);
    margin-inline: auto;
}

body.is-footer-boxed .site-footer .wpcs-content-wrapper {
    padding-inline: var(--wpcs-space-lg);
}

/* === HERO VOLL-BREITE (eigenes Toggle: layout_hero_fullwidth) ===
   Macht den Hero über die ganze Browser-Breite, mit Bild als full-bleed-Cover
   und Text als Overlay (vertikal zentriert, linksbündig zur Content-Edge). */
body.is-hero-fullwidth .site-hero-wrapper {
    max-width: none;
    padding-inline: 0;
}

/* Alle Overrides sind auf `.site-hero-wrapper` gescoped, damit Plugin-eigene
   Hero-Sektionen (Vehicle-Single, Offer-Single, Brand-Page, …) unangetastet
   bleiben — die nutzen `.wpcs-hero` auch, sind aber nicht in einem
   .site-hero-wrapper gewickelt. */
body.is-hero-fullwidth .site-hero-wrapper .wpcs-hero {
    display: flex;
    align-items: center;
    position: relative;
    min-height: 80vh;
    padding: 0;
    border-bottom: 0;
    overflow: hidden;
}

/* Darken-Gradient für Lesbarkeit der Hero-Texte auf hellem Bild. */
body.is-hero-fullwidth .site-hero-wrapper .wpcs-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.15) 55%, rgba(0, 0, 0, 0) 100%);
    z-index: 1;
    pointer-events: none;
}

body.is-hero-fullwidth .site-hero-wrapper .wpcs-hero__image {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    border-radius: 0;
    background: transparent;
    z-index: 0;
}

body.is-hero-fullwidth .site-hero-wrapper .wpcs-hero__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

body.is-hero-fullwidth .site-hero-wrapper .wpcs-hero__info {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--wpcs-content-width);
    margin-inline: auto;
    padding-block: var(--wpcs-space-xl);
    padding-inline: 0;
    color: var(--wpcs-color-surface);
}

body.is-hero-fullwidth .site-hero-wrapper .wpcs-hero__eyebrow,
body.is-hero-fullwidth .site-hero-wrapper .wpcs-hero__headline {
    color: var(--wpcs-color-surface);
}

body.is-hero-fullwidth .site-hero-wrapper .wpcs-hero__body,
body.is-hero-fullwidth .site-hero-wrapper .wpcs-hero__disclaimer {
    color: rgba(255, 255, 255, 0.92);
}

/* Slider-Pfeile sind im Default unten-links nebeneinander (siehe hero-slider.css).
   Im fullwidth-Modus läuft das Carousel bis an die Browser-Edge — den linken
   Pfeil dann auf die Content-Edge (1440-Cap) shiften, damit er bündig zur
   Hero-Text-Spalte sitzt. Der rechte Pfeil shiftet entsprechend mit. */
body.is-hero-fullwidth .site-hero-wrapper .wpcs-carousel--hero .wpcs-carousel__nav--prev {
    left: max(var(--wpcs-content-padding), calc((100vw - var(--wpcs-content-width)) / 2));
}
body.is-hero-fullwidth .site-hero-wrapper .wpcs-carousel--hero .wpcs-carousel__nav--next {
    left: calc(max(var(--wpcs-content-padding), calc((100vw - var(--wpcs-content-width)) / 2)) + var(--wpcs-form-height) + var(--wpcs-space-sm));
}

/* === HEADER ÜBER HERO POSITIONIEREN ===
   Sobald der Hero voll-breite ist UND ein Hero-Wrapper im DOM existiert,
   schwebt der Header automatisch über dem Hero — ohne extra Toggle.
   Background bleibt opak (Default), wird nur durch is-header-transparent weg. */
body.is-hero-fullwidth:has(.site-hero-wrapper) .site-topbar {
    position: absolute;
    top: 0;
    inset-inline: 0;
    z-index: 10;
}

body.is-hero-fullwidth:has(.site-hero-wrapper) #site-main {
    padding-block-start: 0;
}

/* Slider-Wrapper Top-Padding weg, damit Bild bündig am Browser-Rand startet. */
body.is-hero-fullwidth:has(.site-hero-wrapper) .wpcs-carousel--hero {
    padding-block-start: 0;
}

/* PageBuilder-Article-Wrapper Top-Padding weg, falls Slider darin liegt. */
body.is-hero-fullwidth:has(.site-hero-wrapper) #site-main > .wpcs-content-wrapper {
    padding-block-start: 0;
}
body.is-hero-fullwidth:has(.site-hero-wrapper) #site-main > .wpcs-content-wrapper > .site-page-content:has(.site-hero-wrapper) {
    margin-block-start: 0;
    padding-block-start: 0;
}

/* Defensive Margin-Resets im Hero-Stack. */
body.is-hero-fullwidth:has(.site-hero-wrapper) .site-hero-wrapper,
body.is-hero-fullwidth:has(.site-hero-wrapper) .site-hero-wrapper .wpcs-carousel,
body.is-hero-fullwidth:has(.site-hero-wrapper) .site-hero-wrapper .wpcs-hero {
    margin-block-start: 0;
}

/* === HEADER TRANSPARENT (eigenes Toggle: layout_header_transparent) ===
   Greift NUR in Kombination mit is-hero-fullwidth — sonst würde der
   transparente Header auf Pages ohne Hero seltsam wirken. Macht den
   Header-Background transparent + Border weg. Schriftfarben bleiben unverändert. */
body.is-hero-fullwidth.is-header-transparent .site-topbar {
    background: transparent;
    border-bottom: 0;
}

/* Wenn Header transparent UND Header boxed kombiniert sind: das Edge-Padding
   aus is-header-boxed wieder weg, damit Logo / Menü / Tools bündig zur
   Content-Edge stehen (wie im Default-Header-Layout). */
body.is-hero-fullwidth.is-header-transparent.is-header-boxed .site-topbar .wpcs-content-wrapper {
    padding-inline: 0;
}
body.is-hero-fullwidth.is-header-transparent.is-header-boxed .site-nav {
    margin-inline-start: calc(-1 * var(--wpcs-space-sm));
}
body.is-hero-fullwidth.is-header-transparent.is-header-boxed .site-topbar__tools {
    margin-inline-end: calc(-1 * var(--wpcs-space-sm));
}

@media (max-width: 1024px) {
    body.is-hero-fullwidth .wpcs-hero__info {
        padding-inline: var(--wpcs-content-padding);
    }
}

@media (max-width: 768px) {
    body.is-hero-fullwidth .site-hero-wrapper .wpcs-hero {
        min-height: 60vh;
    }
}

.site-main {
    min-height: 50vh;
    padding-block: var(--wpcs-space-xl);
}

/* ============================================================
   Site-Topbar
   ============================================================ */

.site-topbar {
    position: relative;
    background: var(--wpcs-color-surface);
    border-bottom: 1px solid var(--wpcs-color-border);
}

.site-topbar__row {
    border-bottom: 1px solid var(--wpcs-color-border);
}

.site-topbar__row:last-child {
    border-bottom: 0;
}

.site-topbar__row--brand .site-topbar__inner {
    display: flex;
    align-items: center;
    gap: var(--wpcs-space-lg);
    padding-block: var(--wpcs-space-md);
}

.site-topbar__row--nav .site-topbar__inner {
    display: flex;
    align-items: center;
    gap: var(--wpcs-space-lg);
    padding-block: var(--wpcs-space-sm);
}

/* Negative Margins kompensieren das Inline-Padding der ersten/letzten
   Items, damit Menu-Text bzw. Tool-Icons exakt auf der Content-Edge sitzen. */
.site-nav {
    margin-inline-start: calc(-1 * var(--wpcs-space-sm));
}

.site-topbar__tools {
    margin-inline-end: calc(-1 * var(--wpcs-space-sm));
}

.site-topbar__logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: var(--wpcs-color-text);
}

.site-topbar__logo img {
    display: block;
    max-height: 56px;
    width: auto;
}

.site-topbar__logo-text {
    font-family: var(--wpcs-font-label);
    font-size: var(--wpcs-text-xl);
    font-weight: 600;
}

.site-topbar__brand-logos {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: var(--wpcs-space-md);
    overflow: hidden;
    justify-content: end;
}

.site-topbar__cta {
    flex: 0 0 auto;
}

.site-topbar__nav {
    flex: 1 1 auto;
}

/* Burger-Toggle — Desktop versteckt, ab ≤768px sichtbar */
.site-nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    padding: var(--wpcs-space-xs);
    color: var(--wpcs-color-text);
    cursor: pointer;
    border-radius: var(--wpcs-radius-sm);
    transition: var(--wpcs-transition);
}

.site-nav-toggle:hover,
.site-nav-toggle:focus-visible,
.site-nav-toggle[aria-expanded="true"] {
    color: var(--wpcs-color-primary);
    background: var(--wpcs-color-primary-dim);
}

.site-nav-toggle__bars {
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
    width: 22px;
    height: 16px;
}

.site-nav-toggle__bars > span {
    display: block;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform var(--wpcs-transition), opacity var(--wpcs-transition);
}

.site-nav-toggle[aria-expanded="true"] .site-nav-toggle__bars > span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.site-nav-toggle[aria-expanded="true"] .site-nav-toggle__bars > span:nth-child(2) {
    opacity: 0;
}

.site-nav-toggle[aria-expanded="true"] .site-nav-toggle__bars > span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.site-nav,
.site-nav .sub-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wpcs-space-xs);
}

.site-nav > li {
    position: relative;
}

.site-nav a {
    display: block;
    padding: var(--wpcs-space-xs) var(--wpcs-space-sm);
    font-family: var(--wpcs-font-body);
    font-size: var(--wpcs-text-base);
    color: var(--wpcs-color-text);
    text-decoration: none;
    border-radius: var(--wpcs-radius-sm);
    transition: var(--wpcs-transition);
    white-space: nowrap;
}

.site-nav a:hover,
.site-nav a:focus,
.site-nav .current-menu-item > a,
.site-nav .current-menu-ancestor > a {
    color: var(--wpcs-color-primary);
    background: var(--wpcs-color-primary-dim);
}

.site-nav .menu-item-has-children > a::after {
    content: "";
    display: inline-block;
    margin-left: var(--wpcs-space-xs);
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid currentColor;
    vertical-align: middle;
}

/* Submenu (Desktop: Dropdown beim Hover/Focus) */
.site-nav .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 50;
    min-width: 220px;
    padding: var(--wpcs-space-xs);
    background: var(--wpcs-color-surface);
    border: 1px solid var(--wpcs-color-border);
    border-radius: var(--wpcs-radius-md);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    visibility: hidden;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity var(--wpcs-transition), transform var(--wpcs-transition), visibility 0s linear var(--wpcs-transition);
}

.site-nav > li:hover > .sub-menu,
.site-nav > li:focus-within > .sub-menu {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition: opacity var(--wpcs-transition), transform var(--wpcs-transition), visibility 0s;
}

.site-nav .sub-menu .sub-menu {
    top: 0;
    left: 100%;
}

.site-nav .sub-menu a {
    border-radius: var(--wpcs-radius-sm);
}

/* --- Topbar-Tools (Suche / Park / Compare) --- */

.site-topbar__tools {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
}

.site-tool {
    position: static;
    display: inline-block;
    color: var(--wpcs-color-text);
    text-decoration: none;
}

.site-tool:link,
.site-tool:visited,
.site-tool:hover {
    color: var(--wpcs-color-text);
    text-decoration: none;
}

.site-tool__trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--wpcs-space-xs);
    min-width: var(--wpcs-form-height);
    height: var(--wpcs-form-height);
    padding: 0 6px;
    color: var(--wpcs-color-text);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--wpcs-radius-md);
    cursor: pointer;
    list-style: none;
    text-decoration: none;
    transition: var(--wpcs-transition);
}

.site-tool__trigger::-webkit-details-marker,
.site-tool__trigger::marker { display: none; content: ""; }

.site-tool__trigger:hover,
.site-tool[open] .site-tool__trigger {
    background: var(--wpcs-color-surface-3);
    border-color: var(--wpcs-color-border);
}

.site-tool__icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    color: var(--wpcs-color-text);
}

.site-tool__icon path,
.site-tool__icon line,
.site-tool__icon circle {
    stroke: currentColor;
    fill: none;
}

.site-tool__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--wpcs-color-primary);
    color: var(--wpcs-color-surface);
    font-family: var(--wpcs-font-body);
    font-size: var(--wpcs-text-xs);
    font-weight: 600;
}

.site-tool__panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 50;
    width: auto;
    min-width: 0;
    max-width: none;
    background: var(--wpcs-color-surface);
    border-top: 1px solid var(--wpcs-color-border);
    border-bottom: 1px solid var(--wpcs-color-border);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.site-tool__panel-inner {
    padding-block: var(--wpcs-space-md);
}

/* ============================================================
   Site-Footer
   ============================================================ */

.site-footer {
    background: var(--wpcs-color-surface);
    border-top: 1px solid var(--wpcs-color-border);
    margin-top: var(--wpcs-space-xl);
}

.site-footer__inner {
    padding-block: var(--wpcs-space-xl);
}

.site-footer__columns {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) repeat(3, 2fr);
    gap: var(--wpcs-grid-gap-lg);
    align-items: start;
}

.site-footer__col--logo {
    display: flex;
    align-items: flex-start;
}

.site-footer__logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: var(--wpcs-color-text);
}

.site-footer__logo img {
    display: block;
    max-width: 180px;
    height: auto;
}

.site-footer__logo-text {
    font-family: var(--wpcs-font-label);
    font-size: var(--wpcs-text-xl);
    font-weight: 600;
}

.site-footer__widget-title {
    font-family: var(--wpcs-font-label);
    font-size: var(--wpcs-text-lg);
    margin: 0 0 var(--wpcs-space-sm);
    color: var(--wpcs-color-text);
}

.site-footer__widget {
    color: var(--wpcs-color-text-muted);
    font-family: var(--wpcs-font-body);
    font-size: var(--wpcs-text-base);
    line-height: 1.6;
}

.site-footer__widget + .site-footer__widget {
    margin-top: var(--wpcs-space-md);
}

/* Listen in Widget-Areas (z.B. WP-Nav-Menu-Widget, Pages-Widget, Custom-Listen) */
.site-footer__widget ul,
.site-footer__widget ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--wpcs-space-xs);
}

.site-footer__widget li {
    margin: 0;
}

.site-footer__widget li a {
    display: inline-block;
    color: var(--wpcs-color-text-muted);
    text-decoration: none;
    transition: color var(--wpcs-transition);
}

.site-footer__widget li a:hover,
.site-footer__widget li a:focus-visible {
    color: var(--wpcs-color-primary);
}

/* Aktive Menü-Items hervorgehoben */
.site-footer__widget .current-menu-item > a,
.site-footer__widget .current_page_item > a {
    color: var(--wpcs-color-text);
    font-weight: 600;
}

/* Submenüs einrücken */
.site-footer__widget .sub-menu,
.site-footer__widget .children {
    margin-top: var(--wpcs-space-xs);
    padding-left: var(--wpcs-space-md);
    border-left: 1px solid var(--wpcs-color-border);
}

/* Generischer Text + inline-Links in Widget-Body */
.site-footer__widget p {
    margin: 0 0 var(--wpcs-space-sm);
}

.site-footer__widget p:last-child {
    margin-bottom: 0;
}

.site-footer__widget p a,
.site-footer__widget .textwidget a {
    color: var(--wpcs-color-text);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.site-footer__widget p a:hover,
.site-footer__widget .textwidget a:hover {
    color: var(--wpcs-color-primary);
}

.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--wpcs-space-md);
    margin-top: var(--wpcs-space-xl);
    padding-top: var(--wpcs-space-md);
    border-top: 1px solid var(--wpcs-color-border);
    color: var(--wpcs-color-text-muted);
    font-family: var(--wpcs-font-body);
    font-size: var(--wpcs-text-sm);
}

.site-footer__copyright {
    margin: 0;
}

.site-nav--footer {
    gap: var(--wpcs-space-sm);
}

.site-nav--footer a {
    padding: 0;
    font-size: var(--wpcs-text-sm);
}

/* ============================================================
   Hero — Modifier für Theme-Settings-Hero ohne Bild
   ============================================================ */

.wpcs-hero.wpcs-hero--no-image {
    grid-template-columns: 1fr;
}

/* Bei aktivem Theme-Hero den Plugin-eigenen Page-Header (z.B. auf
   Jobs-/Angebote-Archive) ausblenden, damit nicht beides erscheint.
   Body-Klasse `.has-theme-hero` wird in theme-functions.php gesetzt. */
body.has-theme-hero .wpcs-page-header {
    display: none;
}

/* ============================================================
   Page-Header (Archive/Home/Index)
   ============================================================ */

.site-page-header {
    margin-bottom: var(--wpcs-space-xl);
}

.site-page-header__title {
    margin: 0 0 var(--wpcs-space-sm);
    font-family: var(--wpcs-font-label);
    font-size: var(--wpcs-text-hero);
    line-height: 1.1;
    color: var(--wpcs-color-text);
}

.site-page-header__description {
    color: var(--wpcs-color-text-muted);
}

/* ============================================================
   Post-List (Fallback in index.php)
   ============================================================ */

.site-post-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--wpcs-space-xl);
}

.site-post-list__item {
    border-bottom: 1px solid var(--wpcs-color-border);
    padding-bottom: var(--wpcs-space-xl);
}

.site-post-list__item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.site-post__title {
    margin: 0 0 var(--wpcs-space-xs);
    font-family: var(--wpcs-font-label);
    font-size: var(--wpcs-text-3xl);
    line-height: 1.2;
}

.site-post__title a {
    color: var(--wpcs-color-text);
    text-decoration: none;
}

.site-post__title a:hover {
    color: var(--wpcs-color-primary);
}

.site-post__meta {
    margin: 0 0 var(--wpcs-space-sm);
    color: var(--wpcs-color-text-muted);
    font-family: var(--wpcs-font-body);
    font-size: var(--wpcs-text-sm);
}

.site-post__excerpt {
    margin-bottom: var(--wpcs-space-md);
    color: var(--wpcs-color-text);
}

.site-post__more {
    margin: 0;
}

/* ============================================================
   Homepage-Fahrzeugsuche (front-page.php, direkt unter Hero)
   Zwei Layouts via Theme-Setting: --compact (Toolbar) | --hero (groß).
   ============================================================ */

.site-homepage-search {
    margin-block: var(--wpcs-space-lg);
}

/* Gemeinsame Card-Optik */
.site-homepage-search__inner {
    background: var(--wpcs-color-surface);
    border: 1px solid var(--wpcs-color-border);
    border-radius: var(--wpcs-radius-lg);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05);
    padding: var(--wpcs-space-md);
}

.site-homepage-search__field {
    flex: 1 1 200px;
    min-width: 0;
}

/* Plugin-Default `margin-bottom: 16px` auf `.wpcs-filter` neutralisieren —
   Spacing wird vom flex-`gap` des fields-Containers übernommen. */
.site-homepage-search__fields .wpcs-filter {
    margin-bottom: 0;
}

.site-homepage-search__submit {
    flex: 0 0 auto;
}

.site-homepage-search__submit .wpcs-btn {
    height: var(--wpcs-form-height);
    white-space: nowrap;
}

/* === COMPACT (Toolbar mit Filtern + Counter-Pill + Submit) === */
.site-homepage-search--compact .site-homepage-search__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--wpcs-space-md);
}

.site-homepage-search--compact .site-homepage-search__fields {
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--wpcs-space-md);
    min-width: 0;
}

.site-homepage-search--compact .site-homepage-search__count {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 2px;
    padding: var(--wpcs-space-xs) var(--wpcs-space-md);
    background: var(--wpcs-color-primary-dim);
    border-radius: var(--wpcs-radius-md);
    line-height: 1;
}

.site-homepage-search--compact .site-homepage-search__count-num {
    font-family: var(--wpcs-font-label);
    font-size: var(--wpcs-text-hero-sm);
    font-weight: 700;
    color: var(--wpcs-color-primary);
    transition: color var(--wpcs-transition);
}

.site-homepage-search--compact .site-homepage-search__count-label {
    font-family: var(--wpcs-font-body);
    font-size: var(--wpcs-text-xs);
    color: var(--wpcs-color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* === HERO (Eyebrow + großer Counter-Headline + Filter-Reihe + voll-breiter Submit) === */
.site-homepage-search--hero .site-homepage-search__inner {
    display: flex;
    flex-direction: column;
    gap: var(--wpcs-space-lg);
    padding: var(--wpcs-space-xl);
}

.site-homepage-search--hero .site-homepage-search__eyebrow {
    margin: 0;
    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);
    display: flex;
    align-items: center;
    gap: 10px;
}

.site-homepage-search--hero .site-homepage-search__eyebrow::before {
    content: '';
    width: 20px;
    height: 1px;
    background: currentColor;
    display: block;
    flex-shrink: 0;
}

.site-homepage-search--hero .site-homepage-search__headline {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--wpcs-space-sm);
    font-family: var(--wpcs-font-label);
    line-height: 1.05;
}

.site-homepage-search--hero .site-homepage-search__headline-num {
    font-size: var(--wpcs-text-hero);
    font-weight: 700;
    color: var(--wpcs-color-primary);
    transition: color var(--wpcs-transition);
}

.site-homepage-search--hero .site-homepage-search__headline-text {
    font-size: var(--wpcs-text-3xl);
    font-weight: 600;
    color: var(--wpcs-color-text);
}

.site-homepage-search--hero .site-homepage-search__fields {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wpcs-space-md);
}

.site-homepage-search--hero .site-homepage-search__submit .wpcs-btn {
    width: 100%;
    height: auto;
    min-height: calc(var(--wpcs-form-height) + 8px);
    font-size: var(--wpcs-text-lg);
}

@media (max-width: 768px) {
    .site-homepage-search--compact .site-homepage-search__inner,
    .site-homepage-search--compact .site-homepage-search__fields {
        flex-direction: column;
        align-items: stretch;
    }
    .site-homepage-search--compact .site-homepage-search__count {
        align-items: center;
    }
    .site-homepage-search--compact .site-homepage-search__submit .wpcs-btn {
        width: 100%;
    }
    .site-homepage-search--hero .site-homepage-search__inner {
        padding: var(--wpcs-space-lg);
        gap: var(--wpcs-space-md);
    }
    .site-homepage-search--hero .site-homepage-search__fields {
        flex-direction: column;
    }
    /* Vertikaler Abstand zwischen den gestapelten Filter-Feldern auf Mobile
       enger ziehen — Default `--wpcs-space-md` (20px) ist im Stack zu viel. */
    .site-homepage-search__fields {
        gap: var(--wpcs-space-sm);
    }
    /* `flex: 1 1 200px` greift bei column-direction als 200px Mindest-HÖHE —
       deshalb wirkten die Felder vertikal viel zu groß. Auf Mobile auf
       intrinsische Höhe schrumpfen. */
    .site-homepage-search__field {
        flex: 0 0 auto;
    }
}

/* ============================================================
   Homepage-Sektionen (front-page.php — optional via Theme-Settings)
   ============================================================ */

.site-home-section {
    margin-block: var(--wpcs-space-xl);
}

.site-home-section + .site-home-section {
    margin-top: var(--wpcs-space-xl);
}

.site-home-section__title {
    margin: 0 0 var(--wpcs-space-lg);
    font-family: var(--wpcs-font-label);
    font-size: var(--wpcs-text-3xl);
    line-height: 1.2;
    color: var(--wpcs-color-text);
}

/* ============================================================
   Single-Post (single-post.php)
   ============================================================ */

.site-single {
    margin-block: var(--wpcs-space-xl);
}

.site-single__meta {
    margin: 0 0 var(--wpcs-space-md);
    font-family: var(--wpcs-font-mono);
    font-size: var(--wpcs-text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wpcs-color-text-muted);
}

.site-single__meta-sep {
    margin-inline: var(--wpcs-space-xs);
}

.site-single__body {
    margin-block: var(--wpcs-space-xl);
}

.site-single__footer {
    margin-top: var(--wpcs-space-xl);
    padding-top: var(--wpcs-space-md);
    border-top: 1px solid var(--wpcs-color-border);
}

.site-single__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wpcs-space-xs);
    margin: 0;
    align-items: center;
    font-family: var(--wpcs-font-body);
    font-size: var(--wpcs-text-sm);
}

.site-single__tags-label {
    color: var(--wpcs-color-text-muted);
    margin-right: var(--wpcs-space-xs);
}

.site-single__tag {
    display: inline-block;
    padding: var(--wpcs-space-xs) var(--wpcs-space-sm);
    background: var(--wpcs-color-surface-3);
    color: var(--wpcs-color-text);
    border-radius: var(--wpcs-radius-sm);
    text-decoration: none;
    transition: var(--wpcs-transition);
}

.site-single__tag:hover {
    background: var(--wpcs-color-primary-dim);
    color: var(--wpcs-color-primary);
}

.site-related-posts {
    margin-block: var(--wpcs-space-xl);
    padding-top: var(--wpcs-space-xl);
    border-top: 1px solid var(--wpcs-color-border);
}

.site-related-posts__title {
    margin: 0 0 var(--wpcs-space-lg);
    font-family: var(--wpcs-font-label);
    font-size: var(--wpcs-text-3xl);
    color: var(--wpcs-color-text);
}

/* ============================================================
   Kategorie-Filter (home.php) + Archive-Back (archive.php)
   ============================================================ */

.site-cat-filter {
    margin-bottom: var(--wpcs-space-lg);
}

.site-cat-filter__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--wpcs-space-xs);
}

.site-cat-filter__item {
    display: inline-flex;
    align-items: center;
    gap: var(--wpcs-space-xs);
    padding: 0 var(--wpcs-space-md);
    height: 36px;
    background: var(--wpcs-color-surface-3);
    color: var(--wpcs-color-text);
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: var(--wpcs-font-body);
    font-size: var(--wpcs-text-sm);
    text-decoration: none;
    transition: var(--wpcs-transition);
    white-space: nowrap;
}

.site-cat-filter__item:hover {
    background: var(--wpcs-color-primary-dim);
    color: var(--wpcs-color-primary);
}

.site-cat-filter__item.is-active {
    background: var(--wpcs-color-primary);
    color: var(--wpcs-color-surface);
}

.site-cat-filter__count {
    font-family: var(--wpcs-font-mono);
    font-size: var(--wpcs-text-xs);
    opacity: 0.7;
}

.site-archive-back {
    display: inline-flex;
    align-items: center;
    gap: var(--wpcs-space-xs);
    margin-bottom: var(--wpcs-space-md);
    color: var(--wpcs-color-text-muted);
    font-family: var(--wpcs-font-mono);
    font-size: var(--wpcs-text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    transition: var(--wpcs-transition);
}

.site-archive-back:hover {
    color: var(--wpcs-color-primary);
}

/* ============================================================
   Post-Grid + Post-Card (home.php / archive.php)
   ============================================================ */

.site-post-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--wpcs-grid-gap-lg);
    margin-block: var(--wpcs-space-xl);
}

.site-post-card {
    display: flex;
    flex-direction: column;
    background: var(--wpcs-color-surface);
    border: 1px solid var(--wpcs-color-border);
    border-radius: var(--wpcs-radius-lg);
    overflow: hidden;
    transition: border-color var(--wpcs-transition), transform var(--wpcs-transition);
}

.site-post-card:hover {
    border-color: var(--wpcs-color-border-hover);
}

.site-post-card__media {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--wpcs-color-surface-3);
}

.site-post-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--wpcs-transition-slow);
}

.site-post-card:hover .site-post-card__media img {
    transform: scale(1.03);
}

.site-post-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--wpcs-space-sm);
    padding: var(--wpcs-space-md);
    flex: 1 1 auto;
}

.site-post-card__meta {
    margin: 0;
    font-family: var(--wpcs-font-mono);
    font-size: var(--wpcs-text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wpcs-color-text-muted);
}

.site-post-card__meta a {
    color: inherit;
    text-decoration: none;
}

.site-post-card__meta a:hover {
    color: var(--wpcs-color-primary);
}

.site-post-card__meta-sep {
    margin-inline: var(--wpcs-space-xs);
}

.site-post-card__title {
    margin: 0;
    font-family: var(--wpcs-font-label);
    font-size: var(--wpcs-text-2xl);
    font-weight: 700;
    line-height: 1.25;
}

.site-post-card__title a {
    color: var(--wpcs-color-text);
    text-decoration: none;
}

.site-post-card__title a:hover {
    color: var(--wpcs-color-primary);
}

.site-post-card__excerpt {
    margin: 0;
    font-family: var(--wpcs-font-body);
    font-size: var(--wpcs-text-base);
    line-height: 1.6;
    color: var(--wpcs-color-text-muted);
}

.site-post-card__cta {
    align-self: flex-start;
    margin-top: auto;
}

/* ============================================================
   Page-Content (page.php)
   ============================================================ */

.site-page-content {
    margin-block: var(--wpcs-space-xl);
}

.site-page-content__pages {
    margin-top: var(--wpcs-space-lg);
    padding-top: var(--wpcs-space-md);
    border-top: 1px solid var(--wpcs-color-border);
    font-family: var(--wpcs-font-body);
    font-size: var(--wpcs-text-sm);
    color: var(--wpcs-color-text-muted);
}

.site-page-content__pages-label {
    margin-right: var(--wpcs-space-xs);
}

.site-page-content__pages a,
.site-page-content__pages > span:not(.site-page-content__pages-label) {
    display: inline-block;
    padding: 0 var(--wpcs-space-xs);
    color: var(--wpcs-color-text);
    text-decoration: none;
}

.site-page-content__pages a:hover {
    color: var(--wpcs-color-primary);
}

.site-edit-link {
    margin: var(--wpcs-space-md) 0 var(--wpcs-space-xl);
    font-family: var(--wpcs-font-body);
    font-size: var(--wpcs-text-sm);
    color: var(--wpcs-color-text-muted);
    text-align: right;
}

.site-edit-link a {
    color: var(--wpcs-color-text-muted);
    text-decoration: underline;
}

.site-edit-link a:hover {
    color: var(--wpcs-color-primary);
}

/* ============================================================
   Scroll-to-Top
   ============================================================ */

.site-scroll-top {
    position: fixed;
    right: var(--wpcs-space-lg);
    bottom: var(--wpcs-space-lg);
    z-index: 90;
    width: 48px;
    height: 48px;
    padding: 0;
    background: var(--wpcs-color-primary);
    color: var(--wpcs-color-surface);
    border: 0;
    border-radius: 999px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    cursor: pointer;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity var(--wpcs-transition), transform var(--wpcs-transition), background var(--wpcs-transition);
}

.site-scroll-top[hidden] {
    display: none;
}

.site-scroll-top.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.site-scroll-top:hover {
    background: var(--wpcs-color-primary-bright, var(--wpcs-color-primary));
}

.site-scroll-top svg {
    width: 22px;
    height: 22px;
    display: block;
    margin: auto;
}

/* ============================================================
   404 / Empty State
   ============================================================ */

.site-error,
.site-empty {
    max-width: var(--wpcs-content-text-width);
    margin: 0 auto;
    padding-block: var(--wpcs-space-xl);
    text-align: center;
}

.site-error__code {
    margin: 0;
    font-family: var(--wpcs-font-label);
    font-size: var(--wpcs-text-price);
    font-weight: 700;
    line-height: 1;
    color: var(--wpcs-color-primary);
}

.site-error__title {
    margin: var(--wpcs-space-sm) 0 var(--wpcs-space-md);
    font-family: var(--wpcs-font-label);
    font-size: var(--wpcs-text-hero);
    line-height: 1.1;
    color: var(--wpcs-color-text);
}

.site-error__lead {
    margin: 0 0 var(--wpcs-space-lg);
    color: var(--wpcs-color-text-muted);
    font-size: var(--wpcs-text-lg);
}

.site-error__search {
    max-width: 480px;
    margin: 0 auto var(--wpcs-space-lg);
    text-align: left;
}

.site-error__ctas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--wpcs-space-sm);
}

/* ============================================================
   Search-Form (Default-Markup, finalisiert in Step 3)
   ============================================================ */

.site-search-form {
    display: flex;
    gap: var(--wpcs-space-sm);
}

.site-search-form__input {
    flex: 1 1 auto;
    height: var(--wpcs-form-height);
    padding: 0 var(--wpcs-form-padding-x);
    font-family: var(--wpcs-font-body);
    font-size: var(--wpcs-form-font-size);
    color: var(--wpcs-form-inner-color);
    background: var(--wpcs-form-bg-color);
    border: 1px solid var(--wpcs-form-border-color);
    border-radius: var(--wpcs-form-border-radius);
}

.site-search-form__input:focus {
    border-color: var(--wpcs-color-primary);
    outline: none;
}

/* ============================================================
   Responsive — Mobile
   ============================================================ */

@media (max-width: 1024px) {
    .wpcs-content-wrapper {
        padding-inline: var(--wpcs-content-padding);
    }
    .site-nav,
    .site-topbar__tools {
        margin-inline-start: 0;
        margin-inline-end: 0;
    }
    .site-topbar__row--brand .site-topbar__inner,
    .site-topbar__row--nav .site-topbar__inner {
        gap: var(--wpcs-space-md);
    }
    .site-footer__columns {
        grid-template-columns: 1fr 1fr;
    }
    .site-footer__col--logo {
        grid-column: 1 / -1;
    }
}

@media (max-width: 768px) {
    /* Plugin-Default `--wpcs-content-padding: 48px` ist auf Smartphones
       zu großzügig — reduziert auf 16px. Wirkt überall wo die Variable
       gelesen wird (Content-Wrapper, .wpcs-page-Breiten, Sticky-Bar). */
    :root {
        --wpcs-content-padding: 16px;
    }
    /* Im boxed-Modus sind Header/Footer-Wrapper hardcoded auf
       `--wpcs-space-lg` (32px). Auf Mobile gleich auf die Content-Padding
       runterziehen, damit Header/Footer/Body bündig sind. */
    body.is-header-boxed .site-topbar .wpcs-content-wrapper,
    body.is-footer-boxed .site-footer .wpcs-content-wrapper {
        padding-inline: var(--wpcs-content-padding);
    }
    /* Plugin-Page-Container (Vehicle-Archive, Vehicle-Single, Offer-Archive,
       alle Plugin-Templates) nutzen `width: 100% - var(--content-padding)` —
       das ist die Variable als GESAMT-Abzug interpretiert, während
       `.wpcs-content-wrapper` sie als padding PRO Seite nutzt. Auf Mobile
       angleichen, damit überall identische 16px je Seite herauskommen. */
    .wpcs-page,
    .wpcs-page--narrow,
    .wpcs-page--wide,
    .wpcs-sticky-bar__inner {
        width: 100%;
        max-width: var(--wpcs-content-width);
        padding-inline: var(--wpcs-content-padding);
        box-sizing: border-box;
    }
    /* Hero-Stats: Label etwas von der Zahl absetzen. Plugin-Default `gap: 4px`
       ist auf Mobile (schmale Stat-Boxes) zu eng. */
    .wpcs-hero .wpcs-hero-stat {
        gap: 8px;
    }
    .site-topbar__brand-logos {
        display: none;
    }
    .site-topbar__row--nav .site-topbar__inner {
        flex-wrap: wrap;
    }
    .site-nav-toggle {
        display: inline-flex;
    }
    .site-topbar__nav {
        order: 3;
        flex: 1 1 100%;
        display: none;
    }
    .site-topbar.is-nav-open .site-topbar__nav {
        display: block;
    }
    .site-nav {
        flex-direction: column;
        gap: 0;
    }
    .site-nav > li {
        position: static;
    }
    .site-nav a {
        display: block;
        padding-block: var(--wpcs-space-sm);
        border-bottom: 1px solid var(--wpcs-color-border);
    }
    .site-nav .sub-menu {
        position: static;
        visibility: visible;
        opacity: 1;
        transform: none;
        min-width: 0;
        padding: 0 0 0 var(--wpcs-space-md);
        background: transparent;
        border: 0;
        box-shadow: none;
    }
    .site-nav .sub-menu .sub-menu {
        top: auto;
        left: auto;
    }
    .site-footer__columns {
        grid-template-columns: 1fr;
    }
    .site-footer__col--logo {
        grid-column: auto;
    }
    .site-footer__bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}