/* ==========================================================================
   1. KRABYTE FAHRZEUGLISTE (CSS)
   ========================================================================== */

.akvp2-vehicle-list-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Hauptkarte: Flexbox (Für Desktop) */
.akvp2-vehicle-card {
    display: flex;
    flex-direction: row;
    background: var(--akvp2-fe-bg-card, #ffffff);
    border: var(--akvp2-border-width-boxes, 1px) solid var(--akvp2-fe-list-card-border, #e1e5e9);
    border-radius: 5px;
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}

.akvp2-vehicle-card:hover {
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

/* Bild links (Desktop 300px fix) */
.akvp2-vehicle-image {
    display: flex;
    flex-direction: column;
    flex: 0 0 300px;
    max-width: 300px;
    overflow: hidden;
    position: relative;
    background: var(--akvp2-fe-bg-soft, #f8f9fa);
}

.akvp2-main-image-link {
    flex: 1 1 auto; 
    display: block;
    min-height: 150px;
}

.akvp2-main-image-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
    display: block;
}

.akvp2-vehicle-card:hover .akvp2-main-image-link img {
    transform: scale(1.05);
}

.akvp2-no-image {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--akvp2-fe-text-meta, #999999);
    font-size: 0.9rem;
}

/* Rechter Bereich */
.akvp2-vehicle-content {
    flex: 1 1 auto;
    min-width: 0; 
    padding: 20px 25px;
    display: flex;
    flex-direction: column;
}

/* 1. Beschreibung. Titel-Unterstrich (Design-Modul, mobil + Desktop
   gemeinsam): AUS = Strich UND Sonder-Abstand weg (Breite 0 / Style none /
   Gap 0), Farbe = feListTitleLine. */
.akvp2-vehicle-title {
    margin: 0 0 10px 0;
    padding: 0 0 var(--akvp2-title-underline-gap, 0px) 0;
    border-bottom: var(--akvp2-title-underline-width, 0px) var(--akvp2-title-underline-style, none) var(--akvp2-fe-list-title-line, #f0f0f0);
    font-size: 1.25rem;
    font-weight: bold;
}

.akvp2-vehicle-title a {
    text-decoration: none;
    color: var(--akvp2-fe-text-heading, #2c3e50);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.akvp2-vehicle-title a:hover { color: var(--akvp2-fe-accent, #046f41); }

/* Preise */
.akvp2-vehicle-prices { margin-bottom: 20px; }
.akvp2-price-gross { display: block; color: var(--akvp2-fe-accent, #046f41); font-size: 1.5rem; font-weight: bold; line-height: 1.2; }
/* Design 2.0 D: Netto-Zeile komplett in Größe der Detail-Netto-Zeile (0.9rem), direkt unterm Bruttopreis */
.akvp2-price-net { display: block; color: var(--akvp2-fe-text-badge, #2c3e50); font-size: 0.9rem; font-weight: 500; margin-top: 2px; }

/* Pills */
.akvp2-vehicle-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.akvp2-pill {
    display: inline-flex; align-items: center; background-color: var(--akvp2-fe-bg-field, #f4f6f8);
    border: 1px solid var(--akvp2-fe-list-pill-border, #e1e5e9); border-radius: 4px; padding: 6px 12px;
    font-size: 0.85rem; color: var(--akvp2-fe-text-heading, #2c3e50); font-weight: 500;
}
.akvp2-pill svg { margin-right: 6px; flex-shrink: 0; }
.akvp2-pill-success { background-color: var(--akvp2-fe-success-bg, #e6f4ea); border-color: var(--akvp2-fe-success-border, #b6d4c2); color: var(--akvp2-fe-accent, #046f41); }

/* Button: klein, ALLE Varianten. Standard = LINKSBÜNDIG (wie Pillen),
   Compact überschreibt rechts unten (14.10, 2. Korrektur) */
.akvp2-vehicle-actions { margin-top: auto; }
.akvp2-vehicle-actions .akvp2-btn { padding: 4px 12px; font-size: 0.8rem; }
.akvp2-btn {
    display: inline-block; background-color: var(--akvp2-fe-accent, #046f41); color: var(--akvp2-fe-text-on-accent, #ffffff) !important;
    padding: 5px 15px; border-radius: 4px; text-decoration: none; font-weight: bold;
    text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.9rem; transition: background-color 0.2s ease;
}
.akvp2-btn:hover { background-color: var(--akvp2-fe-accent-hover, #035533); }
/* 24.10: kein Unterstrich im Hover/Fokus — Seiten-CSS (a:hover underline,
   Spezifität 0,1,1) schlug sonst die Basis-Regel (0,1,0) */
.akvp2-btn:hover, .akvp2-btn:focus,
.akvp2-btn-cards2:hover, .akvp2-btn-cards2:focus { text-decoration: none; }

/* Mobile Anpassungen Listenansicht */
@media (max-width: 767px) {
    .akvp2-vehicle-card { display: block; overflow: hidden; }
    .akvp2-vehicle-image {
        float: left; flex: none; width: 120px; max-width: 120px; height: auto;
        margin: 10px 12px 5px 10px; border-radius: 4px;
    }
    .akvp2-main-image-link { min-height: 0 !important; }
    .akvp2-main-image-link img { min-height: 0 !important; height: auto !important; }
    .akvp2-vehicle-content { display: block !important; padding: 10px 10px 15px 10px; }
    /* overflow:hidden = neuer Block-Formatting-Context: Titelbox (und damit
       der Unterstrich) schrumpft RECHTS vom schwebenden Bild statt unter
       ihm durchzulaufen — Strich startet erst nach Bild + Abstand. */
    .akvp2-vehicle-title { font-size: 1rem; margin: 0 0 8px 0; overflow: hidden; }
    .akvp2-vehicle-title a {
        white-space: normal !important; overflow: hidden !important; text-overflow: ellipsis !important;
        display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    }
    .akvp2-price-gross { font-size: 1.2rem; }
    .akvp2-price-net { font-size: 0.8rem; margin-top: 2px; }
    .akvp2-vehicle-pills { clear: both; gap: 4px; margin-top: 10px; margin-bottom: 12px; }
    /* 10.10: Highlights mobil UNTER das Bild (volle Breite, eine Zeile)
       statt in der rechten Spalte — Karte flacher. Desktop unverändert. */
    .akvp2-highlights-row { clear: both; margin: 2px 0 12px; gap: 4px; }
    .akvp2-pill { padding: 4px 8px; font-size: 0.75rem; }
    /* 14.10: Button mobil NICHT mehr Full-Width — klein, rechtsbündig (alle Varianten) */
    .akvp2-vehicle-actions .akvp2-btn { width: auto; padding: 5px 12px; font-size: 0.8rem; }
    .akvp2-top-thumbnails { height: 40px; }
}

/* ==========================================================================
   TOP FAHRZEUGE (Diagonales Banner & Vorschau)
   ========================================================================== */
.akvp2-top-vehicle { background-color: var(--akvp2-fe-bg-top, #f0fdf4) !important; border-color: var(--akvp2-fe-success-border, #b6d4c2) !important; }
.akvp2-top-vehicle:hover { background-color: var(--akvp2-fe-bg-top-hover, #e6f4ea) !important; }

.akvp2-top-thumbnails {
    display: flex; flex: 0 0 auto; height: 50px; border-top: var(--akvp2-divider-thickness, 1px) solid var(--akvp2-fe-list-thumb-line, #e1e5e9); margin-top: 2px;
}
.akvp2-thumb-item { flex: 1 1 0; margin-right: 2px; overflow: hidden; }
.akvp2-thumb-item:last-child { margin-right: 0; }
.akvp2-thumb-item img { width: 100%; height: 100%; object-fit: cover; }

/* Top-Banner: Original-Look (Band in der Bildecke, Container clippt) —
   Label jetzt editierbar via CSS-Var (Design-Modul, Default TOP) */
.akvp2-top-banner {
    position: absolute; top: 0; left: 0; z-index: 20; width: 80px; height: 80px;
    overflow: hidden; pointer-events: none;
}
.akvp2-top-banner::before {
    content: var(--akvp2-top-banner-label, "TOP"); position: absolute; top: 15px; left: -25px; width: 110px; text-align: center;
    background-color: var(--akvp2-fe-top-banner-bg, #046f41); color: var(--akvp2-fe-top-banner-text, #ffffff) !important; font-size: 0.85rem; font-weight: bold;
    padding: 5px 0; text-transform: uppercase; box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    transform: rotate(-45deg); display: block;
}
@media (max-width: 767px) {
    .akvp2-top-banner { width: 60px; height: 60px; }
    .akvp2-top-banner::before { top: 10px; left: -20px; width: 85px; font-size: 0.75rem; padding: 3px 0; }
}

/* ==========================================================================
   3. FAHRZEUGFILTER (Sticky Desktop & Mobile Bottom Sheet)
   ========================================================================== */
.akvp2-filter-wrapper { position: relative; }
.akvp2-filter-box {
    background: var(--akvp2-fe-bg-card, #ffffff); border: var(--akvp2-border-width-boxes, 1px) solid var(--akvp2-fe-list-filter-border, #e9ecef); border-radius: var(--akvp2-card-radius, 12px);
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06); padding: 20px;
}
.akvp2-filter-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 15px; padding-bottom: 10px; border-bottom: var(--akvp2-divider-thickness, 1px) solid var(--akvp2-fe-list-filter-divider, #e9ecef);
}
.akvp2-filter-title { font-size: 1.2rem; font-weight: 600; color: var(--akvp2-fe-text-heading, #2c3e50); margin: 0; }
.akvp2-filter-count { font-size: 0.9rem; color: var(--akvp2-fe-text-meta, #6c757d); margin-left: auto; margin-right: 15px; }
.akvp2-filter-close { display: none; background: none; border: none; font-size: 1.5rem; color: var(--akvp2-fe-text-muted, #6c757d); }
.akvp2-filter-group { margin-bottom: 12px; }
.akvp2-filter-group label { display: block; font-size: 0.9rem; font-weight: 500; color: var(--akvp2-fe-text-muted, #6c757d); margin-bottom: 8px; }
.akvp2-filter-input { width: 100%; padding: 10px 12px; border-radius: 6px; border: 1px solid var(--akvp2-fe-border-input, #ced4da); font-size: 0.95rem; }
.akvp2-range { padding: 0; height: 6px; -webkit-appearance: none; appearance: none; background: var(--akvp2-fe-border-light, #e9ecef); border-radius: 4px; }
.akvp2-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--akvp2-fe-accent, #046f41); cursor: pointer; border: 3px solid var(--akvp2-fe-bg-card, #ffffff); box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.akvp2-range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--akvp2-fe-accent, #046f41); cursor: pointer; border: 3px solid var(--akvp2-fe-bg-card, #ffffff); box-shadow: 0 1px 3px rgba(0,0,0,0.2); }

/* Dual-Range (10.10): 2 native Range-Inputs im selben Track (von–bis).
   Track = Container-Hintergrund (Gradient, Segment via JS-Vars --akvp2-range-lo/hi);
   Inputs selbst transparent + pointer-events:none, nur Thumbs klickbar. */
.akvp2-range-dual { position: relative; height: 26px; margin-top: 2px; background-image: linear-gradient(var(--akvp2-fe-accent, #046f41), var(--akvp2-fe-accent, #046f41)); background-size: 100% 6px; background-position: 0 center; background-repeat: no-repeat; border-radius: 4px; }
.akvp2-range-dual .akvp2-range { position: absolute; inset: 0; width: 100%; height: 26px; margin: 0; padding: 0; border: none; background: transparent; border-radius: 0; pointer-events: none; }
.akvp2-range-dual .akvp2-range::-webkit-slider-thumb { pointer-events: auto; }
.akvp2-range-dual .akvp2-range::-moz-range-thumb { pointer-events: auto; }
.akvp2-range-dual .akvp2-range::-moz-range-track { background: transparent; }

/* Desktop: Sticky Fix für Filter (Nutzt die Twig Variable) */
@media (min-width: 992px) {
    .akvp2-filter-wrapper.is-sticky {
        position: -webkit-sticky;
        position: sticky;
        top: var(--akvp2-sticky-top, 120px); 
        align-self: flex-start !important; 
        height: fit-content;
        z-index: 1000;
    }
}

/* Mobile: Bottom Sheet */
.akvp2-filter-fab {
    display: none; position: fixed; bottom: 20px; right: 20px; width: 56px; height: 56px;
    background: var(--akvp2-fe-accent, #046f41); color: var(--akvp2-fe-text-on-accent, #ffffff); border: none; border-radius: 50%; box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    z-index: 1000000; cursor: pointer; align-items: center; justify-content: center;
}
@media (max-width: 991px) {
    .akvp2-filter-fab { display: flex; }
    .akvp2-filter-box {
        display: block; position: fixed; bottom: 0; left: 0; width: 100%; max-height: 85vh; background: var(--akvp2-fe-bg-card, #ffffff);
        z-index: 1000000; transform: translateY(100%); transition: transform 0.3s ease-in-out;
        border-radius: 16px 16px 0 0; box-shadow: 0 -4px 20px rgba(0,0,0,0.15); overflow-y: auto; padding: 20px;
    }
    .akvp2-filter-box.is-open { transform: translateY(0); }
    .akvp2-filter-close { display: block; background: var(--akvp2-fe-bg-soft, #f8f9fa); border-radius: 50%; width: 40px; height: 40px; line-height: 40px; text-align: center; font-size: 1.5rem; }
}

/* 4. FILTER ERWEITERUNGEN (Mobile Grid & Button Position) */
@media (max-width: 991px) {
    .akvp2-filter-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 15px; }
    .akvp2-filter-sliders { display: grid; grid-template-columns: 1fr 1fr; gap: 0 15px; margin-top: 5px; }
    .akvp2-filter-grid .akvp2-filter-group, .akvp2-filter-sliders .akvp2-filter-group { margin-bottom: 15px; }
}
.akvp2-filter-fab-left { right: auto !important; left: 20px !important; }

/* ==========================================================================
   5. ALTERNATIVES LAYOUT: GRID (Karten nebeneinander)
   ========================================================================== */

/* Das Grid Wrapper */
.akvp2-grid-layout .akvp2-vehicle-list-wrapper {
    display: grid;
    gap: 20px;
}

/* Desktop: 2-3 Spalten nebeneinander */
@media (min-width: 768px) {
    .akvp2-grid-layout .akvp2-vehicle-list-wrapper {
        grid-template-columns: 1fr 1fr; /* 2 Spalten auf Tablet */
    }
}
@media (min-width: 1200px) {
    .akvp2-grid-layout .akvp2-vehicle-list-wrapper {
        grid-template-columns: 1fr 1fr 1fr; /* 3 Spalten auf großem Desktop */
    }
}

/* Die Karte selbst um 90 Grad drehen (Bild oben, Text unten) */
.akvp2-grid-layout .akvp2-vehicle-card {
    flex-direction: column !important; /* Statt row jetzt column */
}

/* Bild: Volle Breite, feste Höhe */
.akvp2-grid-layout .akvp2-vehicle-image {
    flex: none !important;
    max-width: 100% !important;
    width: 100% !important;
    height: 200px; /* Feste Höhe für einheitliches Kartenbild */
}
.akvp2-grid-layout .akvp2-main-image-link {
    min-height: 200px !important;
}

/* Inhalt darunter */
.akvp2-grid-layout .akvp2-vehicle-content {
    padding: 15px !important;
}

/* Auf Mobile (unter 768px) wieder das Standard-Listen-Layout erzwingen, 
   damit die horizontalen Karten nicht zu klein werden */
@media (max-width: 767px) {
    .akvp2-grid-layout .akvp2-vehicle-list-wrapper {
        display: flex; /* Zurück auf Flexbox (untereinander) */
    }
    .akvp2-grid-layout .akvp2-vehicle-card {
        display: flex !important;
        flex-direction: row !important; /* Wieder horizontal */
    }
    .akvp2-grid-layout .akvp2-vehicle-image {
        height: auto;
        flex: 0 0 120px !important;
        max-width: 120px !important;
        width: 120px !important;
    }
    .akvp2-grid-layout .akvp2-main-image-link {
        min-height: 0 !important;
    }
}

/* Highlights (Badges) in der Fahrzeugliste */
.akvp2-highlights-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.akvp2-highlight-badge {
    background-color: var(--akvp2-fe-mobile-de-green, #28a745); /* mobile.de Grün */
    color: var(--akvp2-fe-text-on-accent, #ffffff);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    line-height: 1.4;
    display: inline-block;
}

/* Auf Mobile etwas kompakter (10.10: kleiner, damit 3 Badges in eine Zeile passen) */
@media (max-width: 768px) {
    .akvp2-highlight-badge {
        font-size: 0.65rem;
        padding: 3px 6px;
        white-space: nowrap;
    }
}
/* Bildpräsentation: MOBILE nativ auf Weiß (kein Crop) —
   DESKTOP unverändert Original-Verhalten (Bild volle Kartenhöhe, cover) */
@media (max-width: 767px) {
    .akvp2-vehicle-image, .akvp2-main-image-link { height: auto !important; min-height: 0 !important; }
    .akvp2-vehicle-image img, .akvp2-main-image-link img {
        width: 100% !important; height: auto !important;
        object-fit: contain !important; background: #fff;
        display: block; margin: 0; padding: 0;
    }
}

/* Red-Pencil: Preis farblich hervorheben (Variable, Default rot; ueber Design-Modul via --akvp2-fe-redpencil ueberschreibbar) */
.akvp2-has-redpencil .akvp2-price-gross { color: var(--akvp2-fe-redpencil, #d9534f); }

/* ==========================================================================
   6. KARTEN-VARIANTE „CARDS2" (19.10, Kundenwunsch Text-Layout)
   2-spaltig ab 768px (Test — evtl. später wieder 1-spaltig), mobil 1 Spalte.
   Karte im Fluss: Titel MIT Hersteller, 2 Bilder nebeneinander (3px
   Abstand, volle Inhaltsbreite, gleiche Padding-Seiten wie Text), Preis,
   Meta als Textzeile („ • "), Highlights als Text mit ✔︎, Details-Button
   dezent rechts unten (Ghost). TOP = andersfarbige Karte
   (.akvp2-top-vehicle, Design-Vars). Farben/Radius über Generator-Vars.
   ========================================================================== */
.akvp2-variant-cards2 .akvp2-vehicle-list-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 768px) {
    .akvp2-variant-cards2 .akvp2-vehicle-list-wrapper { grid-template-columns: 1fr 1fr; }
}

/* Karte: alles im Textfluss, einheitliches Padding (Bildbündigkeit = Text) */
.akvp2-variant-cards2 .akvp2-cards2-card {
    display: block; /* kontert Base-Flex-Row (Bild links) */
    padding: 12px 14px;
    border-radius: var(--akvp2-card-radius, 12px);
}

/* Titel mit Hersteller, max. 2 Zeilen (Design-Titel-Unterstrich bleibt aktiv) */
.akvp2-variant-cards2 .akvp2-vehicle-title { margin: 0 0 8px; font-size: 1.05rem; }
.akvp2-variant-cards2 .akvp2-vehicle-title a {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 2 Bilder nebeneinander, 3px Abstand; 1 Bild = voll breit */
.akvp2-variant-cards2 .akvp2-cards2-images {
    display: flex;
    gap: 3px;
    margin-bottom: 8px;
}
.akvp2-variant-cards2 .akvp2-cards2-image {
    flex: 1 1 0;
    min-width: 0;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--akvp2-fe-bg-soft, #f8f9fa);
    border-radius: calc(var(--akvp2-card-radius, 12px) / 2);
}
.akvp2-variant-cards2 .akvp2-cards2-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Preis unter den Bildern (Größen wie Kompakt-Variante) */
.akvp2-variant-cards2 .akvp2-cards2-prices { margin-bottom: 8px; }
.akvp2-variant-cards2 .akvp2-price-gross { font-size: 1.2rem; }
.akvp2-variant-cards2 .akvp2-price-net { font-size: 0.8rem; }

/* Meta: eine Textzeile, Werte mit „ • " getrennt. Farbe = PILLEN-Farbe
   (fe-text-heading, Design-Modul „Text Überschriften") statt Meta-Grau */
.akvp2-variant-cards2 .akvp2-cards2-meta {
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--akvp2-fe-text-heading, #2c3e50);
    margin-bottom: 8px;
}
/* 19.10: einzelner Wert (z.B. „110 kW (150 PS)") unteilbar — Zeilenumbruch
   nur an den „ • "-Trennern zwischen den Spans */
.akvp2-variant-cards2 .akvp2-meta-item { white-space: nowrap; }

/* Highlights: Texteinträge mit ✔︎ (inline-block: Text + ✔︎ brechen als
   EINHEIT um, Häkchen bleibt am Wort) */
.akvp2-variant-cards2 .akvp2-cards2-highlights { margin: 0 0 12px; font-size: 0.85rem; line-height: 1.5; color: var(--akvp2-fe-text-heading, #2c3e50); }
.akvp2-variant-cards2 .akvp2-cards2-highlight { display: inline-block; margin-right: 10px; }
.akvp2-variant-cards2 .akvp2-cards2-check { color: var(--akvp2-fe-accent, #046f41); font-weight: 700; margin-left: 2px; }

/* Details-Button: dezent, rechts unten (Ghost statt Fläche) */
.akvp2-variant-cards2 .akvp2-cards2-actions { text-align: right; }
.akvp2-variant-cards2 .akvp2-btn-cards2 {
    display: inline-block;
    background-color: transparent;
    color: var(--akvp2-fe-accent, #046f41) !important;
    border: 1px solid var(--akvp2-fe-accent, #046f41);
    padding: 4px 12px;
    font-size: 0.75rem;
}
.akvp2-variant-cards2 .akvp2-btn-cards2:hover {
    background-color: var(--akvp2-fe-accent, #046f41);
    color: var(--akvp2-fe-text-on-accent, #ffffff) !important;
}

/* Mobil: 1 Spalte, gleiche Karte im Fluss (kein Float/Querformat nötig) */
@media (max-width: 767px) {
    .akvp2-variant-cards2 .akvp2-vehicle-title { font-size: 1rem; }
}