/* =========================================================================
   KSAplate — Designsystem für die Fahrzeugseiten (/cars)
   Stufe 1: Token-Schicht und Basiskomponenten.

   WARUM EINE STATISCHE DATEI UND KEIN TAILWIND
   Das gebaute Bundle (public/build) ist eingefroren: es stammt vom 23.08.2026,
   während Blade-Dateien bis zum 19.09. geändert wurden. Ein `npm run build`
   würde Tailwind dazu bringen, alle seither hinzugefügten Utility-Klassen zu
   honorieren — und damit das Aussehen der GANZEN Seite verändern. Deshalb:
   kein Build, und in neuem Markup keine Tailwind-Utilities. Jede
   Layout-Eigenschaft steht hier von Hand.

   REGELN FÜR DIESE DATEI
   - Namensraum `.kc-` (kein Zusammenstoß mit dem Bundle oder mit `.cxh-*`).
   - Nur das helle Thema. `dark:`-Klassen kompilieren hier zu
     prefers-color-scheme und haben schon einen Fehler verursacht.
   - Durchgehend logische Eigenschaften (inline-start/-end), damit die
     arabische, urdusprachige Fassung ohne zweiten Regelsatz stimmt.
   - Die Marken-Variablen --ksa-green/--ksa-gold kommen aus dem Layout und
     werden hier nur gelesen, nie neu deklariert.
   ========================================================================= */

/* ---------------------------------------------------------------- Tokens */
:root {
    /* Struktur-Variablen, die das Fahrzeug-Designsystem voraussetzt. */
    --kc-ease: cubic-bezier(0.23, 1, 0.32, 1);
    /* Die Kopfleiste dieser Seite scrollt weg, ist also nicht klebend.
       Dieser Wert ist daher reiner Atemabstand, nicht die Höhe des Headers. */
    --kc-sticky-top: 1rem;
    /* Von einem Skript im Layout gesetzt; 0 ist der richtige Rückfall für
       eine Seite, die noch nicht scrollt. */
    --kc-scrollbar: 0px;

    --kc-radius-control: 0.625rem;
    --kc-radius-card: 0.75rem;

    /* Flächen und Linien. */
    --kc-paper: #ffffff;
    --kc-sunken: #fafafa;
    --kc-raised: #ffffff;
    --kc-ink-1: #18181b;
    --kc-ink-2: #52525b;
    --kc-ink-3: #a1a1aa;
    --kc-rule: #e4e4e7;
    --kc-rule-strong: #d4d4d8;

    /* Zwei getönte Graus, und sie sind ein PAAR: --kc-panel ist eine getönte
       Fläche in einer weißen Karte, --kc-panel-2 das, was eine Pille darauf
       wird. Panel auf Panel wäre unsichtbar — dafür gibt es das zweite. */
    --kc-panel: #edf0f5;
    --kc-panel-2: #e0e3eb;
    --kc-affix: #e6eaf1;

    /* ---- Farbrollen -----------------------------------------------------
       Die Vorlage gibt EINE laute Farbe pro Seite aus. Bei uns ist das Gold;
       Saudi-Grün bleibt Identität, Fläche und Zustand. Das trennt die beiden
       Aufgaben sauber: Grün sagt „das sind wir", Gold sagt „hier handeln". */
    --kc-go: #D4AF37;
    --kc-go-hover: #B8932D;
    --kc-go-ink: #3a2f08;          /* Schrift auf Gold — Gold trägt kein Weiß */

    --kc-accent: var(--ksa-green, #006C35);
    --kc-accent-hover: var(--ksa-green-dark, #004F26);
    --kc-accent-ink: var(--ksa-green-dark, #004F26);
    --kc-accent-soft: #eaf5ee;

    /* Auswahl ist Tinte, keine Farbe: so bleibt sie lesbar, ohne eine zweite
       Palette zu pflegen, und konkurriert nicht mit der Handlungsfarbe. */
    --kc-pick-line: var(--kc-ink-1);
    --kc-pick-tint: rgba(0, 108, 53, 0.10);

    /* Semantisch, nicht Marke: „Angebot" und Preisauszeichnung. */
    --kc-deal-bg: #fde4d6;
    --kc-deal-ink: #b4460f;
    --kc-deal-dot: #e2661f;

    --kc-ok: var(--ksa-green, #006C35);
    --kc-bad: #c0342a;
}

/* --------------------------------------------------- Layout-Grundbausteine
   Ersetzen die Tailwind-Utilities, die in diesem Projekt nicht mehr
   nachkompiliert werden können. Bewusst wenige und bewusst generisch. */
.kc-wrap { width: 100%; max-width: 1100px; margin-inline: auto; padding-inline: 1rem; }
.kc-wrap--wide { max-width: 1240px; }

/* Zieht ein Element aus JEDER zentrierten Spalte an die Fensterkanten, ohne
   deren Breite zu kennen. `100vw` zählt die Scrollleiste mit, die Seite nicht
   — deshalb die Korrektur um --kc-scrollbar, sonst überhängt es um genau
   diese Breite und die Seite scrollt waagerecht. */
.kc-bleed {
    width: calc(100vw - var(--kc-scrollbar));
    margin-inline: calc(50% - 50vw + var(--kc-scrollbar) / 2);
}

.kc-stack { display: flex; flex-direction: column; }
.kc-stack > * + * { margin-top: var(--kc-gap, 1rem); }
.kc-row { display: flex; align-items: center; gap: var(--kc-gap, 0.75rem); }
.kc-row--between { justify-content: space-between; }
.kc-row--wrap { flex-wrap: wrap; }
.kc-grid { display: grid; gap: var(--kc-gap, 1rem); }
.kc-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kc-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kc-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kc-spacer { flex: 1 1 auto; }
.kc-hide { display: none !important; }

@media (max-width: 1023px) {
    .kc-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kc-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
    .kc-grid--2, .kc-grid--3, .kc-grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------------ Typo */
.kc-h2 { font-size: 1.375rem; font-weight: 700; letter-spacing: -0.01em; color: var(--kc-ink-1); }
.kc-h3 { font-size: 1.0625rem; font-weight: 700; color: var(--kc-ink-1); }
.kc-sub { font-size: 0.875rem; color: var(--kc-ink-2); }
.kc-muted { color: var(--kc-ink-3); }
/* Ziffern, die in Spalten untereinander stehen, brauchen gleiche Breite. */
.kc-num { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------- Knöpfe */
.kc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 2.75rem;
    padding-inline: 1.25rem;
    border: 1px solid transparent;
    border-radius: var(--kc-radius-control);
    font-size: 0.9375rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 150ms var(--kc-ease),
                border-color 150ms var(--kc-ease),
                transform 160ms var(--kc-ease);
}
.kc-btn:active { transform: scale(0.98); }
.kc-btn svg { flex: none; width: 1.125rem; height: 1.125rem; }

/* Die eine laute Sache pro Seite. */
.kc-btn--go { background-color: var(--kc-go); color: var(--kc-go-ink); }
.kc-btn--go:hover { background-color: var(--kc-go-hover); }

/* Hohl: für die zweite Wahl neben der lauten. Zwei gefüllte Knöpfe
   nebeneinander machen keinen von beiden zur Antwort. */
.kc-btn--ghost {
    background-color: var(--kc-paper);
    border-color: var(--kc-rule-strong);
    color: var(--kc-ink-1);
}
.kc-btn--ghost:hover { background-color: var(--kc-panel); border-color: var(--kc-ink-3); }

/* Marke statt Handlung: Navigation, Zustand, „zur Übersicht". */
.kc-btn--accent { background-color: var(--kc-accent); color: #fff; }
.kc-btn--accent:hover { background-color: var(--kc-accent-hover); }

.kc-btn--block { width: 100%; }
.kc-btn[disabled], .kc-btn.is-disabled { opacity: 0.55; cursor: not-allowed; pointer-events: none; }

/* --------------------------------------------------------------- Felder */
.kc-label {
    display: block;
    margin-bottom: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--kc-ink-2);
}

.kc-input, .kc-select, .kc-textarea {
    width: 100%;
    min-height: 2.75rem;
    padding-block: 0.625rem;
    padding-inline: 0.875rem;
    border: 1px solid var(--kc-rule-strong);
    border-radius: var(--kc-radius-control);
    background-color: var(--kc-paper);
    color: var(--kc-ink-1);
    font-size: 0.9375rem;
    transition: border-color 150ms var(--kc-ease);
}
.kc-input::placeholder, .kc-textarea::placeholder { color: var(--kc-ink-3); }
.kc-input:focus, .kc-select:focus, .kc-textarea:focus {
    outline: 2px solid var(--kc-accent);
    outline-offset: 1px;
    border-color: var(--kc-accent);
}
.kc-textarea { min-height: 6rem; }

/* Der Pfeil sitzt in einer blassen Fläche bündig an der Innenkante. Das sagt
   „das öffnet sich", was ein nackter Haken auf weißem Grund nicht tut.
   Als Hintergrundbild kann er keine CSS-Variable lesen — die Farbe steht
   deshalb als %23-Hex im data-URI und muss dort geändert werden. */
.kc-select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    padding-inline-end: 3.5rem;
    background-repeat: no-repeat;
    background-position: right 1px center;
    background-size: 44px 44px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Crect width='44' height='44' rx='9' fill='%23e6eaf1'/%3E%3Cpath d='M16 19l6 6 6-6' fill='none' stroke='%2318181b' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* `background-position: right` ist physisch und spiegelt nicht mit. */
[dir="rtl"] .kc-select {
    background-position: left 1px center;
    padding-inline: 3.5rem 0.875rem;
}
.kc-select--bare { background-image: none; padding-inline-end: 0.875rem; }
/* Nie `disabled` für „noch nicht wählbar“: ein deaktiviertes Feld schluckt
   den Klick und verblasst zu einem leeren Rechteck. Grau statt tot. */
.kc-select.is-idle { border-color: var(--kc-rule); color: var(--kc-ink-3); }
.kc-select:disabled { opacity: 1; color: var(--kc-ink-3); cursor: not-allowed; }

.kc-field-error { margin-top: 0.375rem; font-size: 0.8125rem; color: var(--kc-bad); }
.kc-field-hint { margin-top: 0.375rem; font-size: 0.75rem; color: var(--kc-ink-3); }

/* Eine Einheit im Feld („km“, „SAR“). */
.kc-suffix { position: relative; }
.kc-suffix .kc-input { padding-inline-end: 3rem; }
.kc-suffix-unit {
    position: absolute;
    inset-inline-end: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.875rem;
    color: var(--kc-ink-3);
    pointer-events: none;
}

/* -------------------------------------------------------- Karte (Raster)
   Die Kachel in einer Reihe oder einem Raster. Feste senkrechte Rhythmik:
   jeder Block über dem Standort hat eine Höhe, die nicht vom Text abhängt,
   der Standort ist unten verankert. Zwei Karten nebeneinander fluchten damit
   auf jedem Element, egal was der Verkäufer getippt hat. */
.kc-lcard {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: var(--kc-paper);
    border: 1px solid var(--kc-rule);
    border-radius: var(--kc-radius-card);
    transition: box-shadow 150ms var(--kc-ease), border-color 150ms var(--kc-ease);
}
.kc-lcard:hover { border-color: var(--kc-rule-strong); box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.2); }

.kc-lcard-photo {
    position: relative;
    aspect-ratio: 320 / 190;
    overflow: hidden;
    background-color: var(--kc-panel);
}
.kc-lcard-photo img { width: 100%; height: 100%; object-fit: cover; }
.kc-lcard-nophoto {
    display: grid;
    place-items: center;
    height: 100%;
    font-size: 0.75rem;
    color: var(--kc-ink-3);
}

.kc-fav {
    position: absolute;
    top: 0.625rem;
    inset-inline-end: 0.625rem;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, 0.92);
    color: var(--kc-ink-1);
    cursor: pointer;
    transition: transform 160ms var(--kc-ease), color 150ms var(--kc-ease);
}
.kc-fav:active { transform: scale(0.9); }
.kc-fav.is-saved { color: var(--kc-go); }
.kc-fav.is-saved svg path { fill: currentColor; }

/* Das Herz liegt als Geschwister NEBEN dem Link, nicht darin: ein <button>
   in einem <a> ist ungueltiges Markup. Es braucht deshalb einen eigenen
   positionierten Rahmen um beide. */
.kc-cardwrap { position: relative; }

/* Auszeichnungen auf dem Foto. Logische Seiten, damit die arabische Fassung
   ohne zweiten Regelsatz stimmt. */
.kc-badges {
    position: absolute;
    top: 0.625rem;
    inset-inline-start: 0.625rem;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem;
}
.kc-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.6;
}
/* Das Kennzeichen-Bundle ist ein Merkmal des Angebots, keine Handlung —
   deshalb Marke (Gruen), nicht die Handlungsfarbe. */
.kc-badge--plate { background-color: var(--kc-accent); color: #fff; }

.kc-photocount,
.kc-dealerflag {
    position: absolute;
    bottom: 0.5rem;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1875rem 0.5rem;
    border-radius: 0.5rem;
    font-size: 0.625rem;
    font-weight: 600;
    line-height: 1.6;
    color: #fff;
}
.kc-photocount {
    inset-inline-end: 0.5rem;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.kc-dealerflag {
    inset-inline-start: 0.5rem;
    background-color: color-mix(in srgb, var(--kc-accent) 90%, transparent);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.kc-lcard-body { display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem; flex: 1 1 auto; }

/* Zwei Zeilen, immer: ein kurzer Titel reserviert die zweite, damit er den
   Preis nicht hochzieht; ein langer wird abgeschnitten. */
.kc-lcard-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(2 * 1.35em);
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--kc-ink-1);
}
.kc-lcard-title a { color: inherit; display: block; }
.kc-lcard-title a:hover { text-decoration: underline; }

.kc-lcard-price { font-size: 1.125rem; font-weight: 700; color: var(--kc-ink-1); }
.kc-lcard-facts {
    font-size: 0.8125rem;
    color: var(--kc-ink-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Ein Raster statt umbrechendem Flex: vier Merkmale unterschiedlicher
   Textbreite brachen sonst 3 + 1, und das vierte stand allein. */
.kc-chips {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: 0.5rem;
    align-content: start;
}
.kc-chips > .kc-chip:last-child:nth-child(odd) { grid-column: 1 / -1; }

.kc-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-width: 0;
    height: 1.875rem;
    padding-inline: 0.625rem;
    border-radius: 0.5rem;
    background-color: var(--kc-panel);
    font-size: 0.75rem;
    color: var(--kc-ink-1);
}
.kc-chip-icon { flex: none; width: 1rem; height: 1rem; }
.kc-chip-text { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.kc-lcard-loc {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: auto;
    font-size: 0.8125rem;
    color: var(--kc-ink-2);
}
.kc-lcard-loc svg { flex: none; width: 0.875rem; height: 0.875rem; }

/* Das Angebots-Fähnchen. Semantische Farbe, nicht die Marke: es beschreibt
   den Preis, nicht uns. Der Platzhalter hält die Zeile frei, damit zwei
   Karten nebeneinander fluchten, auch wenn nur eine ein Angebot ist. */
.kc-deal {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 0.375rem;
    min-height: 1.625rem;
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    background-color: var(--kc-deal-bg);
    color: var(--kc-deal-ink);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.kc-deal::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background-color: var(--kc-deal-dot); }
.kc-deal--ghost { visibility: hidden; }

/* ------------------------------------------------------- Karte (Zeile) */
.kc-rescard {
    overflow: hidden;
    background-color: var(--kc-paper);
    border: 1px solid var(--kc-rule);
    border-radius: 0.875rem;
    transition: box-shadow 150ms var(--kc-ease);
}
.kc-rescard:hover { box-shadow: 0 10px 26px -14px rgba(0, 0, 0, 0.28); }

.kc-rescard-main {
    position: relative;
    display: grid;
    grid-template-columns: 278px minmax(0, 1fr);
    gap: 1.25rem;
    padding: 1rem;
}
.kc-rescard-photo {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 0.625rem;
    background-color: var(--kc-panel);
}
.kc-rescard-photo img { width: 100%; height: 100%; object-fit: cover; }

.kc-rescard-body { display: flex; flex-direction: column; gap: 0.375rem; min-width: 0; }
.kc-rescard-title { font-size: 1rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: var(--kc-ink-1); }
.kc-rescard-title a { color: inherit; }
.kc-rescard-title a:hover { text-decoration: underline; }
.kc-rescard-price {
    margin-top: 0.375rem;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--kc-ink-1);
    font-variant-numeric: tabular-nums;
}
.kc-rescard-facts { margin-top: 0.375rem; font-size: 0.875rem; line-height: 1.5; color: var(--kc-ink-1); }

/* Der Titel darf nicht unter das schwebende Herz laufen. */
@media (min-width: 640px) { .kc-rescard-title { padding-inline-end: 3rem; } }

.kc-rescard-fav {
    position: absolute;
    top: 1.5rem;
    inset-inline-end: 1.5rem;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 999px;
    background-color: var(--kc-paper);
    color: var(--kc-ink-2);
    cursor: pointer;
    box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.25);
}
.kc-rescard-fav:hover { color: var(--kc-go); }
.kc-rescard-fav.is-saved { color: var(--kc-go); }
.kc-rescard-fav.is-saved svg path { fill: currentColor; }

.kc-rescard-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-top: 1px solid var(--kc-rule);
}
.kc-rescard-seller { flex: 1 1 auto; min-width: 0; }
.kc-rescard-actions { display: flex; flex: none; gap: 0.625rem; }
.kc-rescard-actions > .kc-btn { min-width: 8.75rem; height: 2.5rem; padding-inline: 0.75rem; font-size: 0.875rem; font-weight: 500; border-radius: 0.5rem; }

@media (max-width: 639px) {
    /* Querformat statt gestapelt: Bild links, Fakten rechts — so passen
       mehrere Fahrzeuge auf einen Bildschirm. */
    .kc-rescard-main { grid-template-columns: 40% minmax(0, 1fr); gap: 0.875rem; padding: 0.8125rem; }
    .kc-rescard-photo { align-self: start; }
    .kc-rescard-title { font-size: 0.9375rem; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
    .kc-rescard-price { font-size: 1.25rem; }
    .kc-rescard-facts { font-size: 0.8125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .kc-rescard-fav { top: 0.5rem; inset-inline-end: 0.5rem; width: 30px; height: 30px; }
    .kc-rescard-foot { flex-direction: column; align-items: stretch; gap: 0.625rem; }
    .kc-rescard-actions { width: 100%; }
    .kc-rescard-actions > .kc-btn { flex: 1 1 0; min-width: 0; }
}

/* ------------------------------------------------------------- Karussell */
.kc-carousel { position: relative; }
.kc-carousel-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: var(--kc-item, 320px);
    gap: var(--kc-gap, 1rem);
    padding-block: 0.25rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
}
.kc-carousel-track::-webkit-scrollbar { display: none; }
.kc-carousel-track > * { scroll-snap-align: start; }
.kc-carousel-track:focus { outline: none; }
.kc-carousel-track:focus-visible { outline: 2px solid var(--kc-pick-line); outline-offset: 4px; border-radius: var(--kc-radius-card); }

.kc-carousel-arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    border: 1px solid var(--kc-rule);
    border-radius: 999px;
    background-color: var(--kc-paper);
    color: var(--kc-ink-1);
    cursor: pointer;
    box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.25);
    transition: opacity 150ms var(--kc-ease), transform 160ms var(--kc-ease);
}
.kc-carousel-arrow svg { width: 20px; height: 20px; }
.kc-carousel-arrow:active { transform: scale(0.92); }
.kc-carousel-arrow[disabled] { opacity: 0.35; cursor: default; }
.kc-carousel-arrow--prev { inset-inline-start: -12px; }
.kc-carousel-arrow--next { inset-inline-end: -12px; }
/* Der Pfeil ist ein Richtungssymbol und spiegelt mit; seine Seite tut das
   über die logischen Eigenschaften oben bereits von selbst. */
[dir="rtl"] .kc-carousel-arrow svg { transform: scaleX(-1); }

@media (max-width: 640px) {
    .kc-carousel-arrow { display: none; }
    .kc-carousel-track { margin-inline: -1rem; padding-inline: 1rem; }
}

/* ----------------------------------------------------------- Hinweise */
.kc-notice {
    padding: 0.625rem 0.875rem;
    border-radius: var(--kc-radius-control);
    background-color: var(--kc-accent-soft);
    color: var(--kc-accent-ink);
    font-size: 0.875rem;
}
.kc-notice--warn { background-color: var(--kc-deal-bg); color: var(--kc-deal-ink); }

.kc-panelbox {
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--kc-rule);
    border-radius: var(--kc-radius-card);
    background-color: var(--kc-paper);
}

/* Versteckt, aber nicht per -9999px: ein solcher Versatz erzeugt auf der
   arabischen Seite eine 10.000 px breite Querscrollleiste. */
.kc-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ------------------------------------------------------ Bewegungsarmut */
@media (prefers-reduced-motion: reduce) {
    .kc-btn,
    .kc-lcard,
    .kc-rescard,
    .kc-fav,
    .kc-carousel-arrow,
    .kc-input, .kc-select, .kc-textarea { transition: none; }
    .kc-carousel-track { scroll-behavior: auto; }
}

/* =========================================================================
   Suchergebnisse — Filterschiene, Kopf, Trefferliste
   ========================================================================= */

/* Grauer Grund, der bis an die Fensterkanten läuft. Die Trefferliste ist der
   Inhalt, die Schiene ist Werkzeug — der Farbunterschied sagt das. */
.kc-results {
    width: calc(100vw - var(--kc-scrollbar));
    margin-inline: calc(50% - 50vw + var(--kc-scrollbar) / 2);
    padding-bottom: 3rem;
    background-color: #eceef1;
}
.kc-results-wrap { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: 1rem; }

.kc-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding-block: 1rem;
    font-size: 0.8125rem;
    /* Feste Tinten: der Grund ist #eceef1 und folgt keinem Thema. */
    color: #52525b;
}
.kc-crumbs a { color: #52525b; }
.kc-crumbs a:hover { color: #18181b; text-decoration: underline; }

.kc-results-grid {
    display: grid;
    grid-template-columns: 264px minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}
@media (max-width: 1023px) { .kc-results-grid { grid-template-columns: minmax(0, 1fr); } }

/* --- Die Schiene --- */
.kc-rail {
    position: sticky;
    top: var(--kc-sticky-top);
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1.25rem;
    background-color: var(--kc-paper);
    border-radius: 1rem;
}
.kc-rail-block { padding-block: 1rem; border-top: 1px solid var(--kc-rule); }
.kc-rail-block:first-of-type { border-top: none; padding-top: 0; }
.kc-rail-legend { display: block; font-size: 0.875rem; font-weight: 600; color: var(--kc-ink-1); }
.kc-rail-legend + * { margin-top: 0.5rem; }

/* Jede Spanne ist zwei Felder, von und bis — nie ein breites. */
.kc-rail-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }

/* Kürzer als das Formularfeld: ein Dutzend 44px-Felder wäre höher als der
   Bildschirm, und die Schiene soll überblickbar bleiben. */
.kc-rail-select {
    width: 100%;
    height: 40px;
    min-height: 0;
    padding-inline: 0.625rem 2rem;
    font-size: 0.875rem;
    background-size: 34px 34px;
    background-position: right 2px center;
}
[dir="rtl"] .kc-rail-select { background-position: left 2px center; padding-inline: 2rem 0.625rem; }

.kc-rail-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-block: 0.25rem;
    font-size: 0.875rem;
    color: var(--kc-ink-1);
    cursor: pointer;
}
.kc-rail-check input { flex: none; width: 16px; height: 16px; accent-color: var(--kc-go); }
.kc-rail-count { margin-inline-start: auto; color: var(--kc-ink-3); font-size: 0.8125rem; }

.kc-rail-apply { width: 100%; }
.kc-rail-reset {
    display: block;
    width: 100%;
    margin-top: 0.625rem;
    font-size: 0.875rem;
    color: var(--kc-accent-ink);
    text-align: center;
    text-decoration: underline;
    background: none;
    border: 0;
    cursor: pointer;
}

/* --- Der Kopf über der Liste --- */
.kc-results-head { padding: 1.25rem; background-color: var(--kc-paper); border-radius: 1rem; }
.kc-results-count { font-size: 1.375rem; font-weight: 700; color: var(--kc-ink-1); }

.kc-filterchips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.kc-filterchip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.3125rem 0.5rem 0.3125rem 0.625rem;
    border-radius: 0.5rem;
    background-color: var(--kc-panel);
    font-size: 0.8125rem;
    color: var(--kc-ink-1);
}
.kc-filterchip-x {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--kc-ink-2);
    font-size: 0.875rem;
    line-height: 1;
    cursor: pointer;
}
.kc-filterchip-x:hover { background-color: var(--kc-panel-2); color: var(--kc-ink-1); }

.kc-sortrow {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
}

/* Gefüllt in Panel-Grau, nicht weiß: als weißes Feld mit Haarlinie las es
   sich wie ein Texteingabefeld. Grau sagt „das öffnet sich". */
.kc-sort-select {
    width: auto;
    min-width: 230px;
    height: 48px;
    min-height: 0;
    background-color: var(--kc-panel);
    border-color: var(--kc-rule);
}

/* Die eine laute Sache in diesem Kopf, weil sie das Einzige ist, worum er
   den Käufer bittet. */
.kc-savesearch { height: 48px; }
.kc-savesearch.is-saved {
    background-color: transparent;
    border: 1px solid var(--kc-go);
    color: var(--kc-go-hover);
}

.kc-results-list { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; }
.kc-results-empty {
    padding: 3rem 1.5rem;
    background-color: var(--kc-paper);
    border-radius: 1rem;
    text-align: center;
}

/* --- Der Telefon-Streifen --- */
/* Eine Zeile, die seitlich scrollt und nie umbricht: eine zweite Zeile hier
   ist genau das, was dieser Streifen vermeiden soll. */
.kc-mfilter { display: none; }
@media (max-width: 1023px) {
    .kc-mfilter {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-inline: -1rem;
        margin-bottom: 0.75rem;
        padding-inline: 1rem;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .kc-mfilter::-webkit-scrollbar { display: none; }
    .kc-mfilter > * { flex: none; }
    .kc-mfilter-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        height: 2.25rem;
        padding-inline: 0.875rem;
        border: 0;
        border-radius: 0.5rem;
        background-color: var(--kc-go);
        color: var(--kc-go-ink);
        font-size: 0.875rem;
        font-weight: 700;
        white-space: nowrap;
        cursor: pointer;
    }

    /* Die Schiene wird auf dem Telefon erst zur Karte, wenn sie offen ist.
       Als gepolsterter weißer Kasten stehen gelassen zeichnete sie ein
       leeres Feld unter den Streifen. */
    .kc-rail { position: static; max-height: none; overflow: visible; padding: 0; background: none; border-radius: 0; }
    .kc-rail-body { display: none; }
    .kc-rail-body.is-open {
        display: block;
        padding: 1.25rem;
        margin-bottom: 0.75rem;
        background-color: var(--kc-paper);
        border-radius: 1rem;
    }
    .kc-results-head { padding: 0; background: none; border-radius: 0; }
    .kc-results-count { font-size: 1.25rem; }
    .kc-sortrow { flex-wrap: nowrap; align-items: center; gap: 0.5rem; margin-top: 0.75rem; }
    /* flex-basis 0, nicht auto: mit `auto` behält das Feld seine Mindestbreite
       von 230px, die Zeile läuft über und der Pfeil wird abgeschnitten. */
    .kc-sortrow > .kc-sortcell { flex: 1 1 0; min-width: 0; }
    .kc-sort-select { width: 100%; min-width: 0; height: 2.75rem; }
    .kc-savesearch { flex: none; height: 2.75rem; padding-inline: 0.875rem; font-size: 0.875rem; }
}
@media (min-width: 1024px) {
    .kc-rail-body { display: block !important; }
}

/* =========================================================================
   Fahrzeugseite — Galerie, Fakten, Technik, Ausstattung, Panel
   ========================================================================= */
.kc-detail {
    width: calc(100vw - var(--kc-scrollbar));
    margin-inline: calc(50% - 50vw + var(--kc-scrollbar) / 2);
    padding-bottom: 3rem;
    background-color: #eceef1;
}
.kc-detail-wrap { width: 100%; max-width: 1160px; margin-inline: auto; padding-inline: 1rem; }
.kc-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 1.25rem;
    align-items: start;
}
.kc-detail-col { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }

.kc-card { padding: 1.25rem 1.5rem; background-color: var(--kc-paper); border-radius: 1rem; }
.kc-card-title { font-size: 1.25rem; font-weight: 700; color: var(--kc-ink-1); }

/* --- Galerie --- */
.kc-gallery { padding: 0; overflow: hidden; }
.kc-gallery-stage { position: relative; aspect-ratio: 4 / 3; background-color: var(--kc-panel); }
.kc-gallery-stage img { width: 100%; height: 100%; object-fit: cover; }
/* Alle Fotos liegen übereinander und eines ist sichtbar. Die Adresse EINES
   Bildes zu tauschen hiesse: holen und dekodieren vor dem Zeichnen — das war
   die halbe Wartezeit an den Pfeilen. */
.kc-gallery-slide { position: absolute; inset: 0; display: none; }
.kc-gallery-slide.is-on { display: block; }
.kc-gallery-empty { display: grid; place-items: center; height: 100%; font-size: 0.875rem; color: var(--kc-ink-3); }

/* Ein Verlauf statt eines Kastens: die Zählung braucht auf einem hellen Foto
   etwas, wogegen sie steht, ohne irgendwo eine sichtbare Kante zu ziehen. */
.kc-gallery-stage::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 22%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.28), transparent);
    pointer-events: none;
    z-index: 1;
}
.kc-gallery-counter {
    position: absolute;
    top: 0.75rem;
    /* `left`, nicht logisch: ein Foto spiegelt nicht, also seine Marke auch nicht. */
    left: 0.75rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    padding: 0.3125rem 0.5rem;
    border-radius: 0.5rem;
    background-color: rgba(24, 24, 27, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.kc-gallery-nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, 0.92);
    /* Feste dunkle Tinte: der Knopf ist immer weiß, weil er auf einem Foto
       sitzt. Eine Themen-Tinte würde hier irgendwann weiß auf weiß ergeben. */
    color: #18181b;
    cursor: pointer;
    transform: translateY(-50%);
    box-shadow: 0 2px 10px -2px rgba(0, 0, 0, 0.35);
}
.kc-gallery-nav:hover { background-color: #fff; }
.kc-gallery-nav[disabled] { opacity: 0.35; pointer-events: none; }
.kc-gallery-nav--prev { inset-inline-start: 0.75rem; }
.kc-gallery-nav--next { inset-inline-end: 0.75rem; }
[dir="rtl"] .kc-gallery-nav svg { transform: scaleX(-1); }

.kc-gallery-strip {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 84px;
    gap: 0.5rem;
    padding: 0.5rem;
    overflow-x: auto;
    scrollbar-width: none;
}
.kc-gallery-strip::-webkit-scrollbar { display: none; }
.kc-gallery-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 0;
    border-radius: 0.375rem;
    padding: 0;
    background: none;
    opacity: 0.6;
    cursor: pointer;
    transition: opacity 150ms var(--kc-ease);
}
.kc-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.kc-gallery-thumb:hover { opacity: 0.85; }
.kc-gallery-thumb.is-current { opacity: 1; outline: 2px solid var(--kc-pick-line); outline-offset: -2px; }

/* --- Eckdaten --- */
.kc-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem 1rem; }
.kc-facts-item { display: flex; align-items: center; gap: 0.75rem; }
.kc-facts-icon { flex: none; width: 1.25rem; color: var(--kc-accent); text-align: center; }
.kc-facts-label { display: block; font-size: 0.75rem; color: var(--kc-ink-2); }
.kc-facts-value { display: block; font-size: 0.9375rem; font-weight: 700; color: var(--kc-ink-1); }

/* --- Technische Daten --- */
.kc-spectable { width: 100%; margin-top: 0.75rem; border-collapse: collapse; }
.kc-spectable th,
.kc-spectable td { padding: 0.5rem 0.75rem; font-size: 0.875rem; text-align: start; vertical-align: top; }
.kc-spectable th { width: 45%; font-weight: 400; color: var(--kc-ink-2); }
.kc-spectable td { color: var(--kc-ink-1); }
/* Zebra statt Linien: eine lange Tabelle braucht das Auge entlang der Zeile
   geführt, und vierzig Haarlinien sind ein Gitter, keine Liste. */
.kc-spectable tr:nth-child(even) { background-color: var(--kc-panel); }

/* --- Ausstattung --- */
.kc-equip-group {
    margin-top: 1.125rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--kc-ink-2);
}
.kc-equip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.5rem; margin-top: 0.375rem; }
.kc-equip-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.25rem;
    border-bottom: 1px solid var(--kc-rule);
    font-size: 0.875rem;
    color: var(--kc-ink-1);
}
.kc-equip-tick { flex: none; color: var(--kc-accent); }

.kc-showmore {
    display: block;
    width: 100%;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border: 0;
    border-top: 1px solid var(--kc-rule);
    background: none;
    color: var(--kc-accent-ink);
    font-size: 0.875rem;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
}
.kc-showmore:hover { text-decoration: underline; }

/* --- Das klebende Panel --- */
.kc-panel { position: sticky; top: var(--kc-sticky-top); }
.kc-panel-title { font-size: 1.25rem; font-weight: 700; line-height: 1.3; color: var(--kc-ink-1); }
.kc-panel-price { margin-top: 0.75rem; font-size: 1.75rem; font-weight: 700; color: var(--kc-ink-1); font-variant-numeric: tabular-nums; }
.kc-panel-note { font-size: 0.8125rem; color: var(--kc-ink-2); }
.kc-panel-rule { height: 1px; margin-block: 1rem; background-color: var(--kc-rule); }
/* Eine Zeile mit Auslassung: ein langer Händlername schob sonst den
   Kontaktknopf das Panel hinunter. */
.kc-panel-seller {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--kc-ink-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kc-panel-cta { width: 100%; height: 48px; margin-top: 0.875rem; font-size: 1rem; }
/* Das Grün des Dienstes selbst, kein Marken-Token: an dieser Farbe wird der
   Knopf erkannt, und ein goldener wäre etwas anderes. */
.kc-panel-cta--wa { background-color: #25d366; color: #fff; }
.kc-panel-cta--wa:hover { background-color: #1da851; }
.kc-panel-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0.625rem; margin-top: 0.625rem; }
/* Eine Rufnummer liest sich in jeder Sprache von links nach rechts. */
.kc-tel { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
    .kc-detail-grid { grid-template-columns: minmax(0, 1fr); }
    /* Das Panel kommt auf dem Telefon an ZWEITE Stelle, direkt unter die
       Galerie: nach dem Foto will ein Käufer den Preis, nicht die Technik.
       `display: contents` löst die Spalte auf, damit `order` die Karten
       einzeln umsortieren kann. */
    .kc-detail-col { display: contents; }
    .kc-detail-col > * { order: 3; }
    .kc-detail-col > .kc-gallery { order: 1; }
    .kc-detail-panel { order: 2; }
    .kc-panel { position: static; }
    .kc-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kc-equip { grid-template-columns: minmax(0, 1fr); }
    .kc-card { padding: 1.125rem 1rem; }
    /* Randlos: auf dem Telefon IST das Foto die Seite. */
    .kc-gallery { margin-inline: -1rem; padding: 0; border-radius: 0; }
    .kc-gallery-strip { padding-inline: 1rem; }
}

/* --- Der Verkaeufer im Fuss der Trefferzeile ---
   Ein Monogramm statt eines Standardsymbols, wenn kein Logo vorliegt:
   zwanzig gleiche Symbole untereinander sagen dem Auge nichts, zwei
   Buchstaben schon. */
.kc-dlr-mark {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 2.25rem;
    overflow: hidden;
    border: 1px solid var(--kc-rule);
    border-radius: 0.5rem;
    background-color: var(--kc-panel);
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1;
    color: var(--kc-accent-ink);
}
.kc-dlr-mark img { width: 100%; height: 100%; object-fit: contain; padding: 0.25rem; }

.kc-dlr-name {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--kc-ink-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kc-dlr-name:hover { text-decoration: underline; }

/* Kein Nadelsymbol vor der zweiten Zeile: ein Symbol davor schoebe den Text
   von der linken Kante des Namens weg, und der ganze Block laese sich dann
   als schief. */
.kc-dlr-where {
    display: block;
    font-size: 0.875rem;
    line-height: 1.3;
    color: var(--kc-ink-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}