:root{--navy:#0C1A2E;--navy2:#0F2040;--blue:#1B56CC;--blueh:#1447B0;--bluel:#5B9BF8;--text:#0F1722;--tmid:#3D4A5C;--tmut:#6B7A90;--bord:#E4E8EF;--off:#F7F8FA;--fzacc:#e5320c;--fzacch:#c4280a;--fz-hero-img:url('bilder/hero/hero-1503376780353--2000.jpg')}
    *,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{font-family:'Manrope',system-ui,sans-serif;color:var(--text);background:#fff;line-height:1.65;-webkit-font-smoothing:antialiased}
    /* Solider dunkler Seitenhintergrund — Foto ist jetzt ein Banner oberhalb der Suche */
    html[data-theme="dark"] body{
      background-color:#0f0f12 !important;
      background-image:none !important;
      color:#E8EDF5;
    }
    h1,h2,h3{font-family:'Satoshi','Manrope',system-ui,sans-serif}
    a{text-decoration:none;color:inherit}

    /* Nav */
    .nav{background:var(--navy);padding:1rem 2.5rem;display:flex;align-items:center;gap:1rem;position:sticky;top:0;z-index:100}
    .nav-logo{font-size:1.2rem;font-weight:800;letter-spacing:-.04em;color:#fff;flex-shrink:0}
    .nav-logo span{color:var(--bluel)}
    /* Tablet (769-1024px): Logo weg; Kategorien scrollen in EINER Reihe; rechte Seite kompakt */
    @media(min-width:769px) and (max-width:1024px){
      .nav{flex-wrap:nowrap;gap:.3rem;padding:.55rem .5rem}
      .nav-logo{display:none}
      .nav-links{gap:.1rem;flex-shrink:1;min-width:0}
      .nav-links a{padding:.3rem .5rem;font-size:.74rem;white-space:nowrap}
      .nav-right{gap:.35rem;min-width:0}
      .nav-back{font-size:0!important;gap:0!important;flex-shrink:0}
      .nav-back svg{width:15px;height:15px}
      .nav-cta{padding:.36rem .5rem!important;font-size:.72rem!important;flex-shrink:0;white-space:nowrap}
      .cta-prefix{display:none}
      .vc-auth-links{gap:.35rem!important}
      .vc-login-link{font-size:.72rem!important}
      .vc-register-link{padding:.3rem .45rem!important;font-size:.72rem!important;white-space:nowrap}
      .vc-help-link{width:22px!important;height:22px!important;font-size:.76rem!important}
      .vc-locale{gap:.12rem!important;flex-shrink:0}
      .vc-ctl-btn{height:28px!important;font-size:.74rem!important;padding:0 .12rem!important}
      .vc-ctl-flag{width:18px!important;height:18px!important;font-size:1.4rem!important}
    }
    .nav-links{display:flex;align-items:center;gap:.25rem}
    .nav-links a{font-size:.78rem;font-weight:500;color:rgba(255,255,255,.55);padding:.35rem .75rem;border-radius:5px;transition:color .2s,background .2s}
    .nav-links a:hover{color:#fff;background:rgba(255,255,255,.08)}
    .nav-links a.on{color:#fff;background:transparent;border:1px solid rgba(255,255,255,.7);border-radius:999px}
    .nav-right{display:flex;align-items:center;gap:.6rem;margin-left:auto;flex-shrink:0}
    .nav-back{font-size:.8rem;color:rgba(255,255,255,.45);display:flex;align-items:center;gap:.35rem;transition:color .2s;white-space:nowrap}
    .nav-back:hover{color:rgba(255,255,255,.8)}
    .nav-cta{background:var(--blue);color:#fff!important;padding:.45rem 1.1rem;border-radius:6px;font-weight:700;font-size:.78rem;transition:background .2s;white-space:nowrap}
    .nav-cta:hover{background:var(--blueh)!important}

    /* ===== Browse-Seite — helles Layout wie Vorlage ===== */
    /* Hero hat KEIN eigenes Foto mehr — das Seiten-Hintergrundbild scheint durch; nur ein Verlauf für die Lesbarkeit der Überschrift */
    .hero{--fzacc:#e5320c;--fzacch:#c4280a;position:relative;overflow:visible;border-bottom:none;padding:0;background:transparent}
    /* Foto-Banner oberhalb der Suche (wie mobile.de) */
    .fzh-banner{position:relative;width:100%;min-height:clamp(320px,44vh,480px);display:flex;align-items:flex-end;background-image:linear-gradient(180deg,rgba(8,10,16,.10) 0%,rgba(8,10,16,0) 26%,rgba(8,10,16,.26) 56%,rgba(8,10,16,.84) 100%),var(--fz-hero-img);background-size:cover;background-position:center 32%;background-repeat:no-repeat}
    .fzh-banner-in{width:100%;max-width:1480px;margin:0 auto;padding:0 2rem 4.5rem}
    /* globales vc-dark.css setzt den Hero auf Navy-Blau (!important) -> hier überschreiben, damit das Seiten-Foto durchscheint */
    html[data-theme="dark"] .hero{background:transparent !important}
    /* Navigationsleiste mit dem Hintergrund verschmelzen (statt Navy-Balken) */
    html[data-theme="dark"] .nav{background:#0f0f12 !important;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:none !important}
    html[data-theme="dark"] .vc-tab-strip{background:#0f0f12 !important;border-bottom-color:transparent !important}
    /* Große Panels durchscheinend (neutral-anthrazit, NICHT blau) -> Bild bleibt über die ganze Seite sichtbar */
    html[data-theme="dark"] .fzd-sec,
    html[data-theme="dark"] .rs-head,
    html[data-theme="dark"] .rcard,
    html[data-theme="dark"] .filter-sidebar,
    html[data-theme="dark"] .recent-viewed{
      background:rgba(20,20,23,.72) !important;
      -webkit-backdrop-filter:blur(9px);
      backdrop-filter:blur(9px);
      border-color:rgba(255,255,255,.10) !important;
    }
    /* „Transport-Marktplatz"-CTA: keine Box, Text direkt auf dem Foto */
    html[data-theme="dark"] .list-section{background:transparent !important;border:none !important;box-shadow:none !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important}
    /* Such-Eingabe transparent (kein dunkler Balken im weißen Suchfeld) */
    html[data-theme="dark"] .fzh-search input{background:transparent !important;color:#16181c !important}
    /* Ort/PLZ-Eingabe transparent (kein dunkler Balken im Feld) */
    html[data-theme="dark"] .fzf-ort-in input{background:transparent !important;color:#f0f1f3 !important}
    /* innere Flächen neutral statt blau (Karten, Kacheln, Selects, Such-/Sortierfelder) */
    html[data-theme="dark"] .fzd-card,
    html[data-theme="dark"] .fzd-tile,
    html[data-theme="dark"] .fzd-bg-tile,
    html[data-theme="dark"] .fzd-brand,
    html[data-theme="dark"] .fzd-chip,
    html[data-theme="dark"] .fzd-img,
    html[data-theme="dark"] .rcard-img,
    html[data-theme="dark"] .rs-search,
    html[data-theme="dark"] .rs-sort,
    html[data-theme="dark"] .rs-vb select,
    html[data-theme="dark"] .rs-grp-b select{
      background:rgba(255,255,255,.055) !important;
      border-color:rgba(255,255,255,.1) !important;
    }
    html[data-theme="dark"] .fzd-chip{background:rgba(255,255,255,.08) !important;}
    .hero-bg{position:absolute;left:0;right:0;bottom:0;width:100%;height:auto;opacity:.5;pointer-events:none;z-index:0}
    .hero-in{max-width:none;margin:-2.6rem auto 0;position:relative;z-index:2;padding:0 2rem 1.5rem}
    .hero-top{display:flex;justify-content:space-between;align-items:flex-start;gap:2rem;flex-wrap:wrap;margin-bottom:2.6rem}
    .hero-text{flex:1;min-width:260px}
    @media(min-width:781px){.hero-top{min-height:122px}}  /* gleiche Höhe wie Immobilien → Suchleiste springt beim Wechsel nicht */
    .hero h1{font-size:clamp(1.7rem,3vw,2.25rem);font-weight:600;letter-spacing:-.02em;color:var(--text);line-height:1.12;margin-bottom:.55rem}
    .hero p{font-size:.92rem;color:var(--tmid);max-width:46ch;line-height:1.6}
    .nearby{display:flex;gap:.9rem;align-items:center;background:#fff;border:1px solid var(--bord);border-radius:12px;padding:.8rem;box-shadow:0 6px 24px rgba(12,26,46,.07);max-width:390px}
    .nearby-map{width:118px;height:80px;border-radius:8px;flex-shrink:0;overflow:hidden;position:relative;background:linear-gradient(135deg,#dde6f3,#eef2f8)}
    .nearby-map::after{content:'';position:absolute;inset:0;background:
      linear-gradient(transparent 49%,rgba(160,175,200,.4) 50%,transparent 51%) 0 0/100% 22px,
      linear-gradient(90deg,transparent 49%,rgba(160,175,200,.4) 50%,transparent 51%) 0 0/30px 100%}
    .nearby-map svg{position:absolute;top:50%;left:50%;transform:translate(-50%,-58%);color:var(--blue);z-index:1}
    .nearby-txt strong{display:block;font-size:.85rem;font-weight:700;color:var(--text);margin-bottom:.2rem}
    .nearby-txt span{display:block;font-size:.74rem;color:var(--tmut);margin-bottom:.5rem;line-height:1.4}
    .nearby-btn{font-size:.74rem;font-weight:700;color:var(--blue);background:#eff4fd;border:1px solid #cfe0fb;border-radius:6px;padding:.32rem .75rem;cursor:pointer;font-family:'Manrope',system-ui,sans-serif}
    .nearby-btn:hover{background:#e0ebfc}

    /* ===== AutoScout-Stil: Foto-Hero + dunkles Such-/Filterpanel (Fahrzeuge) ===== */
    /* Überschrift über dem Foto */
    .fzh-head2{max-width:780px;margin-bottom:0}
    .fzh-head2 h1{color:#fff;font-size:clamp(2.1rem,5vw,3.5rem);font-weight:800;line-height:1.03;letter-spacing:-.03em;margin-bottom:.5rem;text-shadow:0 2px 26px rgba(0,0,0,.45)}
    .fzh-head2 p{color:rgba(255,255,255,.93);font-size:clamp(1rem,1.7vw,1.27rem);font-weight:500;line-height:1.4;text-shadow:0 1px 14px rgba(0,0,0,.5)}
    /* dunkles Such-Panel auf dem Foto */
    .fzh-panel{background:rgba(22,23,26,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.09);border-radius:18px;padding:1.5rem 1.6rem;margin-bottom:1.15rem;box-shadow:0 22px 55px rgba(0,0,0,.34)}
    .fzh-ptitle{text-align:center;color:#fff;font-size:clamp(1.2rem,2.3vw,1.6rem);font-weight:700;letter-spacing:-.01em;margin-bottom:1.05rem}
    /* großes Freitext-Suchfeld (weiß) */
    .fzh-search{display:flex;align-items:center;gap:.65rem;background:#fff;border:1.5px solid rgba(229,50,12,.55);border-radius:13px;padding:.5rem .55rem .5rem 1.05rem;box-shadow:0 0 0 3px rgba(229,50,12,.16), 0 0 18px 2px rgba(229,50,12,.38), 0 8px 20px rgba(0,0,0,.16);max-width:none}
    .fzh-search-ico{color:#1b1c1f;flex-shrink:0}
    .fzh-search input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-size:1rem;font-weight:500;color:#16181c;font-family:'Manrope',system-ui,sans-serif}
    .fzh-search input::placeholder{color:#8a8f98;font-weight:500;font-style:italic}
    .fzh-search-go{width:46px;height:46px;flex-shrink:0;border:none;border-radius:11px;background:var(--fzacc);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s}
    .fzh-search-go:hover{background:var(--fzacch)}

    /* Filterkarte — dunkel, passend zum Panel */
    .fzf{display:flex;background:rgba(22,23,26,.92);border:1px solid rgba(255,255,255,.08);border-radius:16px;box-shadow:0 18px 50px rgba(0,0,0,.34);overflow:hidden}
    .fzf-types{display:flex;flex-direction:column;gap:.12rem;background:rgba(255,255,255,.03);border-right:1px solid rgba(255,255,255,.08);padding:.6rem .5rem;flex-shrink:0}
    .fzf-type{display:flex;flex-direction:column;align-items:center;gap:.25rem;width:66px;padding:.55rem .2rem;border:none;background:transparent;border-radius:11px;cursor:pointer;color:#9a9ea6;font-family:inherit;transition:background .15s,color .15s}
    .fzf-type span{font-size:.6rem;font-weight:700;letter-spacing:.01em;line-height:1}
    .fzf-type:hover{background:rgba(255,255,255,.06);color:#fff}
    .fzf-type.on{background:rgba(229,50,12,.16);color:var(--fzacc)}
    .fzf-type svg{width:25px;height:25px}
    .fzf-morebtn svg{width:22px;height:22px}
    .fzf-morebtn.on{background:rgba(229,50,12,.16);color:var(--fzacc)}
    /* Raster „Weitere Fahrzeugarten" */
    .fzf-main{position:relative}
    .fzcat-overlay{position:absolute;inset:0;z-index:40;background:rgba(18,19,23,.985);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:none;flex-direction:column;padding:1rem 1.2rem 1.2rem;overflow:auto}
    .fzcat-overlay.open{display:flex}
    .fzcat-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.85rem;flex-shrink:0}
    .fzcat-head h3{margin:0;font-size:1rem;font-weight:800;color:#fff}
    .fzcat-close{background:none;border:none;color:#aeb6c2;font-size:1.7rem;line-height:1;cursor:pointer;padding:0 .25rem}
    .fzcat-close:hover{color:#fff}
    .fzcat-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:.6rem}
    .fzcat-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;min-height:96px;padding:.85rem .45rem;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:12px;color:#E8EDF5;font-family:inherit;cursor:pointer;transition:background .15s,border-color .15s}
    .fzcat-card:hover{background:rgba(229,50,12,.12);border-color:var(--fzacc)}
    .fzcat-card.on{background:rgba(229,50,12,.18);border-color:var(--fzacc)}
    .fzcat-card svg{width:44px;height:32px;color:var(--fzacc)}
    .fzcat-card span{font-size:.82rem;font-weight:700;text-align:center;line-height:1.15}
    @media(max-width:820px){.fzcat-grid{grid-template-columns:repeat(3,1fr)}}
    @media(max-width:520px){.fzcat-grid{grid-template-columns:repeat(2,1fr)}}
    .fzf-main{flex:1;min-width:0;padding:1.05rem 1.15rem 1.1rem;display:flex;flex-direction:column;gap:.95rem}
    .fzf-fields{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem;align-items:end}
    .fzf-cell{min-width:0}
    .fzf-cell label{display:block;font-size:.66rem;font-weight:800;color:#9a9ea6;margin-bottom:.3rem;letter-spacing:.02em}
    .fzf-cell select{width:100%;height:43px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);border-radius:9px;padding:0 .65rem;font-size:.84rem;font-weight:600;color:#f0f1f3;font-family:inherit;cursor:pointer;outline:none;transition:border-color .15s}
    .fzf-cell select option{color:#16181c}
    .fzf-cell select:focus{border-color:var(--fzacc)}
    .fzf-cell select:disabled{opacity:.5;cursor:not-allowed}
    .fzmodell-wrap{position:relative;display:block;width:100%}
    .fzf-cell input.fzmodell{width:100%;height:43px;box-sizing:border-box;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);border-radius:9px;padding:0 36px 0 .65rem;font-size:.84rem;font-weight:600;color:#f0f1f3;font-family:inherit;outline:none}
    .fzf-cell input.fzmodell:focus{border-color:var(--fzacc)}
    .fzf-cell input.fzmodell::placeholder{color:#8a8f98;font-weight:500}
    html[data-theme="dark"] .fzf-cell input.fzmodell{background:rgba(255,255,255,.05) !important;color:#f0f1f3 !important}
    .rs-grp-b input.fzmodell{width:100%;height:40px;box-sizing:border-box;border:1px solid var(--bord);background:var(--off);border-radius:8px;padding:0 34px 0 .55rem;font-size:.82rem;font-weight:600;color:var(--text);font-family:inherit;outline:none}
    [data-theme="dark"] .rs-grp-b input.fzmodell{background:#0d1828;border-color:#1E2D45;color:#E8EDF5}
    .fzmodell-arrow{position:absolute;top:0;right:0;height:100%;width:34px;display:flex;align-items:center;justify-content:center;background:none;border:none;color:#9a9ea6;cursor:pointer;padding:0}
    .fzmodell-arrow:hover{color:var(--fzacc)}
    [data-theme="dark"] .rs-grp-b .fzmodell-arrow{color:#9fb0c4}
    /* Zahlungsart-Umschalter — bewusst OHNE farbige Umrandung */
    .fzf-seg{display:flex;height:43px;border:1px solid rgba(255,255,255,.12);border-radius:9px;background:rgba(255,255,255,.05);padding:3px;gap:3px}
    .fzf-seg-btn{flex:1;border:none;background:transparent;border-radius:7px;font-size:.82rem;font-weight:700;color:#9a9ea6;cursor:pointer;font-family:inherit;transition:background .15s,color .15s}
    .fzf-seg-btn.on{background:rgba(255,255,255,.14);color:#fff}
    /* Ort/PLZ */
    .fzf-ort-in{display:flex;align-items:center;gap:.45rem;height:43px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);border-radius:9px;padding:0 .65rem}
    .fzf-ort-in svg{color:#9a9ea6;flex-shrink:0}
    .fzf-ort-in input{flex:1;min-width:0;border:none;background:transparent;outline:none;font-size:.84rem;font-weight:600;color:#f0f1f3;font-family:inherit}
    .fzf-ort-in input::placeholder{color:#8a8f98;font-weight:500}
    /* roter Such-Button mit Live-Anzahl */
    .fzf-go{display:flex;align-items:center;justify-content:center;gap:.5rem;height:43px;align-self:end;background:var(--fzacc);color:#fff;border:none;border-radius:9px;font-size:.86rem;font-weight:800;cursor:pointer;font-family:inherit;padding:0 .85rem;white-space:nowrap;overflow:hidden;transition:background .2s}
    .fzf-go:hover{background:var(--fzacch)}
    .fzf-go svg{flex-shrink:0}
    /* Fußzeile: Nur Elektroautos / Zurücksetzen / Weitere Filter */
    .fzf-foot{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.09);padding-top:.9rem}
    .fzf-elek{display:flex;align-items:center;gap:.5rem;font-size:.82rem;font-weight:600;color:#f0f1f3;cursor:pointer;user-select:none}
    .fzf-elek input{width:16px;height:16px;accent-color:var(--fzacc);cursor:pointer;margin:0}
    .fzf-elek-badge{display:inline-flex;align-items:center;justify-content:center;width:21px;height:21px;border-radius:6px;background:rgba(10,143,60,.2);color:#34d17a}
    .fzf-link{display:inline-flex;align-items:center;gap:.42rem;font-size:.82rem;font-weight:700;color:#b9bdc5;background:none;border:none;cursor:pointer;font-family:inherit;padding:.2rem .1rem}
    .fzf-link:hover{color:var(--fzacc)}
    .fzf-foot-sp{flex:1}

    /* ===== Theme-Umschalter (Hell/Dunkel) ===== */
    .fz-theme-btn{width:34px;height:34px;border:none;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;padding:0;transition:background .15s,color .15s}
    .fz-theme-btn:hover{background:rgba(255,255,255,.22)}
    .fz-theme-btn svg{width:17px;height:17px}
    [data-theme="light"] .fz-theme-btn{background:rgba(15,23,34,.07);color:#0F1722}
    [data-theme="light"] .fz-theme-btn:hover{background:rgba(15,23,34,.14)}

    /* ===== HELL-MODUS: Hero-Suche & Filterkarte (sonst dunkel verdrahtet) ===== */
    [data-theme="light"] .fzh-panel{background:#fff;border-color:var(--bord);box-shadow:0 18px 48px rgba(15,23,42,.12)}
    [data-theme="light"] .fzh-ptitle{color:var(--text)}
    [data-theme="light"] .fzf{background:#fff;border-color:var(--bord);box-shadow:0 16px 42px rgba(15,23,42,.10)}
    [data-theme="light"] .fzf-types{background:var(--off);border-right-color:var(--bord)}
    [data-theme="light"] .fzf-type{color:var(--tmut)}
    [data-theme="light"] .fzf-type:hover{background:rgba(15,23,42,.05);color:var(--text)}
    [data-theme="light"] .fzf-cell label{color:var(--tmid)}
    [data-theme="light"] .fzf-cell select,
    [data-theme="light"] .fzf-cell input.fzmodell{background:var(--off) !important;border-color:var(--bord) !important;color:var(--text) !important}
    [data-theme="light"] .fzf-cell input.fzmodell::placeholder{color:var(--tmut)}
    [data-theme="light"] .fzmodell-arrow{color:var(--tmut)}
    [data-theme="light"] .fzf-seg{background:var(--off);border-color:var(--bord)}
    [data-theme="light"] .fzf-seg-btn{color:var(--tmut)}
    [data-theme="light"] .fzf-seg-btn.on{background:#fff;color:var(--text);box-shadow:0 1px 3px rgba(15,23,42,.14)}
    [data-theme="light"] .fzf-ort-in{background:var(--off);border-color:var(--bord)}
    [data-theme="light"] .fzf-ort-in svg{color:var(--tmut)}
    [data-theme="light"] .fzf-ort-in input{color:var(--text)}
    [data-theme="light"] .fzf-ort-in input::placeholder{color:var(--tmut)}
    [data-theme="light"] .fzf-foot{border-top-color:var(--bord)}
    [data-theme="light"] .fzf-elek{color:var(--text)}
    [data-theme="light"] .fzf-link{color:var(--tmid)}
    [data-theme="light"] .fzcat-overlay{background:rgba(255,255,255,.985)}
    [data-theme="light"] .fzcat-head h3{color:var(--text)}
    [data-theme="light"] .fzcat-close{color:var(--tmut)}
    [data-theme="light"] .fzcat-close:hover{color:var(--text)}
    [data-theme="light"] .fzcat-card{background:var(--off);border-color:var(--bord);color:var(--text)}

    /* ===== Entdecken-/Browse-Sektionen (sichtbar VOR der Suche) ===== */
    .main.fz-discover .mobile-filterbar{display:none !important}
    .main.fz-discover .browse-layout{display:none}
    .main.fz-results #fzDiscover{display:none}
    #fzDiscover{display:flex;flex-direction:column;gap:1.5rem;margin-bottom:1.4rem}
    .fzd-sec{background:#fff;border:1px solid var(--bord);border-radius:16px;padding:1.3rem 1.4rem 1.45rem}
    [data-theme="dark"] .fzd-sec{background:#0d1828 !important;border-color:#1E2D45}
    .fzd-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.05rem;gap:1rem}
    .fzd-head h2{font-size:1.18rem;font-weight:800;color:var(--text);letter-spacing:-.015em}
    [data-theme="dark"] .fzd-head h2{color:#E8EDF5}
    .fzd-all{font-size:.82rem;font-weight:700;color:var(--fzacc);background:none;border:none;cursor:pointer;font-family:inherit;white-space:nowrap}
    .fzd-all:hover{text-decoration:underline}
    .fzd-deals-pill{display:inline-block;background:var(--fzacc);color:#fff;font-size:.66rem;font-weight:800;letter-spacing:.05em;padding:.18rem .5rem;border-radius:7px;vertical-align:middle;transform:translateY(-2px)}
    .fzd-deal-badge{position:absolute;top:.6rem;left:.6rem;z-index:2;background:var(--fzacc);color:#fff;font-size:.66rem;font-weight:800;letter-spacing:.03em;padding:.22rem .5rem;border-radius:6px;text-transform:uppercase;box-shadow:0 2px 8px rgba(0,0,0,.25)}
    .fzd-carousel{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(258px,1fr);gap:1rem;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:.55rem;-webkit-overflow-scrolling:touch}
    .fzd-carousel.fzd-tiles{grid-auto-columns:minmax(152px,1fr)}


    .fzd-cat-t{font-size:1rem;font-weight:800;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.45)}
    .fzd-cat-s{font-size:.76rem;color:rgba(255,255,255,.85);font-weight:600}
    /* Fahrzeugtyp-Kacheln */
    .fzd-tile{scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;gap:.5rem;background:var(--off);border:1px solid var(--bord);border-radius:13px;padding:1.1rem .8rem;cursor:pointer;font-family:inherit;text-align:center;transition:transform .15s,border-color .15s}
    [data-theme="dark"] .fzd-tile{background:#111E30;border-color:#1E2D45}
    .fzd-tile:hover{transform:translateY(-2px);border-color:var(--fzacc)}
    .fzd-tile-ic{color:var(--tmid)}
    [data-theme="light"] .fzcat-head h3{color:var(--text)}
    [data-theme="light"] .fzcat-close{color:var(--tmut)}
    [data-theme="light"] .fzcat-close:hover{color:var(--text)}
    [data-theme="light"] .fzcat-card{background:var(--off);border-color:var(--bord);color:var(--text)}

    /* ===== Entdecken-/Browse-Sektionen (sichtbar VOR der Suche) ===== */
    .main.fz-discover .mobile-filterbar{display:none !important}
    .main.fz-discover .browse-layout{display:none}
    .main.fz-results #fzDiscover{display:none}
    #fzDiscover{display:flex;flex-direction:column;gap:1.5rem;margin-bottom:1.4rem}
    .fzd-sec{background:#fff;border:1px solid var(--bord);border-radius:16px;padding:1.3rem 1.4rem 1.45rem}
    [data-theme="dark"] .fzd-sec{background:#151518 !important;border-color:#28282e}
    .fzd-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.05rem;gap:1rem}
    .fzd-head h2{font-size:1.18rem;font-weight:800;color:var(--text);letter-spacing:-.015em}
    [data-theme="dark"] .fzd-head h2{color:#E8EDF5}





    /* Fahrzeug verkaufen — Banner */
    .fzd-sell{display:flex;align-items:center;gap:1.5rem;background:linear-gradient(120deg,rgba(108,52,214,.6) 0%,rgba(139,61,240,.6) 100%);border:1px solid rgba(255,255,255,.12);-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);border-radius:16px;padding:1.6rem 1.8rem;overflow:hidden}
    html[data-theme="dark"] .fzd-sell{background:linear-gradient(120deg,rgba(108,52,214,.6) 0%,rgba(139,61,240,.6) 100%) !important}
    html[data-theme="dark"] .fzd-sell-f select{background:rgba(255,255,255,.16) !important;color:#fff !important;border-color:rgba(255,255,255,.28) !important}
    .fzd-sell-tx{flex:1;min-width:0}
    .fzd-sell-tx h2{font-size:1.35rem;font-weight:800;color:#fff;letter-spacing:-.01em;margin-bottom:.3rem}
    .fzd-sell-tx p{font-size:.9rem;color:rgba(255,255,255,.9);margin-bottom:1rem;line-height:1.45}
    .fzd-sell-row{display:flex;gap:.7rem;margin-bottom:1rem;max-width:480px}
    .fzd-sell-f{flex:1;min-width:0}
    .fzd-sell-f label{display:block;font-size:.7rem;font-weight:800;color:rgba(255,255,255,.85);margin-bottom:.25rem}
    .fzd-sell-f select{width:100%;height:42px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.14);color:#fff;border-radius:9px;padding:0 .6rem;font-size:.84rem;font-weight:600;font-family:inherit;cursor:pointer;outline:none}
    .fzd-sell-f select option{color:#16181c}
    .fzd-sell-f select:disabled{opacity:.6;cursor:not-allowed}
    .fzd-sell-btn{display:inline-flex;align-items:center;justify-content:center;background:var(--fzacc);color:#fff;font-size:.92rem;font-weight:800;padding:.7rem 1.5rem;border-radius:10px;cursor:pointer;text-decoration:none;transition:background .2s}
    .fzd-sell-btn:hover{background:var(--fzacch)}
    .fzd-sell-art{flex-shrink:0;width:260px;color:rgba(255,255,255,.28)}
    @media(max-width:760px){.fzd-sell-art{display:none}.fzd-sell{padding:1.3rem}.fzd-sell-row{max-width:none}}
    /* Beliebte Automarken — Raster */
    .fzd-brandgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:.7rem}
    .fzd-bg-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;background:var(--off);border:1px solid var(--bord);border-radius:13px;padding:1.1rem .6rem;cursor:pointer;font-family:inherit;transition:transform .15s,border-color .15s}
    [data-theme="dark"] .fzd-bg-tile{background:#111E30;border-color:#1E2D45}
    .fzd-bg-tile:hover{transform:translateY(-2px);border-color:var(--fzacc)}
    .fzd-bg-badge{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.05rem;font-weight:800;color:var(--text);background:var(--bord)}









      .fs-drawer-head h3{font-size:1.05rem;font-weight:800;color:var(--text)}
      .fs-drawer-close{width:34px;height:34px;border-radius:50%;border:none;background:var(--off);font-size:1.3rem;cursor:pointer;color:var(--text);display:flex;align-items:center;justify-content:center}
      .fs-head{display:none}
      .fs-apply{position:sticky;bottom:0;margin-top:1.2rem}
      .browse-toolbar{display:none}
    }
    @media(max-width:540px){
      /* Filterfelder einspaltig auf dem Handy */
      .fzf-fields{grid-template-columns:1fr}
      .fzh-search input{font-size:.95rem}
      .fzf-type{min-width:60px}
    }

      [data-theme="dark"] .searchbar{background:transparent !important}
      [data-theme="dark"] .sb-fields{background:#111E30}
      .sb-field{padding:.45rem .6rem;gap:.55rem}
      .sb-field+.sb-field{border-top:1px solid var(--bord)}
    .rs-grp-b .fs-check input{width:15px;height:15px;flex-shrink:0;accent-color:var(--fzacc);cursor:pointer;margin:0}
    /* Filter-Fenster (Modal) */
    .fzfm-overlay{position:fixed;inset:0;z-index:4000;background:rgba(8,11,17,.62);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:flex;align-items:flex-start;justify-content:center;padding:3vh 2vw;overflow:auto}
    .fzfm-panel{width:min(1080px,100%);max-height:94vh;display:flex;flex-direction:column;background:var(--card,#fff);border:1px solid var(--bord);border-radius:18px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.5)}
    [data-theme="dark"] .fzfm-panel{background:#0f1722;border-color:#1E2D45}
    .fzfm-head{flex-shrink:0;display:flex;flex-direction:column;gap:0;padding:1.05rem 1.4rem .2rem;border-bottom:1px solid var(--bord)}
    [data-theme="dark"] .fzfm-head{border-bottom-color:#1E2D45}
    .fzfm-head-top{display:flex;align-items:center;gap:.7rem}
    .fzfm-head h2{font-size:1.25rem;font-weight:800;color:var(--text);letter-spacing:-.01em}
    [data-theme="dark"] .fzfm-head h2{color:#E8EDF5}
    .fzfm-spacer{flex:1}
    .fzfm-headcount{display:inline-flex;align-items:center;gap:.4rem;background:var(--fzacc);color:#fff;border:none;border-radius:9px;padding:.5rem 1rem;font-size:.84rem;font-weight:800;cursor:pointer;font-family:inherit;white-space:nowrap}
    .fzfm-headcount:hover{background:var(--fzacch)}
    .fzfm-tabs{display:flex;gap:.2rem;flex-wrap:wrap;padding:.6rem 0 .3rem;overflow-x:auto}
    .fzfm-tab{background:none;border:none;font-family:inherit;font-size:.84rem;font-weight:700;color:var(--tmut);padding:.4rem .7rem;border-radius:8px;cursor:pointer;white-space:nowrap}
    .fzfm-tab:hover{background:var(--off);color:var(--text)}
    [data-theme="dark"] .fzfm-tab{color:#9fb2cc}
    [data-theme="dark"] .fzfm-tab:hover{background:#1a2536;color:#E8EDF5}
    /* flach wie mobile.de: keine Boxen, immer offen, kein „ändern"/„Beliebig" */
    .filter-sidebar.in-modal .rs-grp{border:none !important;background:none !important;border-radius:0 !important;padding:0 !important}
    .filter-sidebar.in-modal .rs-grp-h{cursor:default !important;padding:0 0 .55rem !important;border:none !important;pointer-events:none}
    .filter-sidebar.in-modal .rs-grp-h .rs-change,.filter-sidebar.in-modal .rs-grp-v{display:none !important}
    .filter-sidebar.in-modal .rs-grp-b{display:grid !important;grid-template-columns:repeat(auto-fill,minmax(185px,1fr));gap:.3rem .9rem;align-items:start;max-height:none !important}
    .filter-sidebar.in-modal .fz-cnt,.filter-sidebar.in-modal .fs-count{display:none !important}
    .filter-sidebar.in-modal .rs-grp-b > div{grid-column:1/-1}
    .filter-sidebar.in-modal .rs-grp-b > #sbSchad,.filter-sidebar.in-modal .rs-grp-b > #sbFahrerhaus{display:grid;grid-template-columns:repeat(auto-fill,minmax(185px,1fr));gap:.2rem .9rem}
    .filter-sidebar.in-modal .fz-colorgrid{grid-template-columns:repeat(auto-fill,minmax(135px,1fr)) !important;gap:.3rem .9rem;max-width:none}
    .filter-sidebar.in-modal .rs-grp-t{font-size:.92rem;font-weight:800;color:var(--text)}
    [data-theme="dark"] .filter-sidebar.in-modal .rs-grp-t{color:#E8EDF5}
    .filter-sidebar.in-modal .rs-field>label{font-size:.92rem;font-weight:800;color:var(--text);margin-bottom:.3rem;display:block}
    [data-theme="dark"] .filter-sidebar.in-modal .rs-field>label{color:#E8EDF5}
    .filter-sidebar.in-modal .fzfm-sechead{grid-column:1/-1;font-size:1.18rem;font-weight:800;color:var(--text);margin:.6rem 0 .2rem;padding-top:1.1rem;border-top:1px solid var(--bord)}
    .filter-sidebar.in-modal .fzfm-sechead.first{border-top:none;padding-top:0;margin-top:0}
    [data-theme="dark"] .filter-sidebar.in-modal .fzfm-sechead{color:#fff;border-top-color:#1E2D45}
    .filter-sidebar.in-modal .fz-equiplist{max-height:none !important;display:grid !important;grid-template-columns:repeat(auto-fill,minmax(185px,1fr));gap:.2rem .9rem}
    .filter-sidebar.in-modal #sbEquipExtra{display:contents !important}
    .filter-sidebar.in-modal #sbEquipMoreBtn{display:none !important}
    .fzfm-x{width:38px;height:38px;border:none;border-radius:50%;background:var(--off);color:var(--text);font-size:1.5rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:inherit}
    .fzfm-x:hover{background:var(--bord)}
    [data-theme="dark"] .fzfm-x{background:#1a2536;color:#E8EDF5}
    .fzfm-body{flex:1;min-height:0;overflow-y:auto;padding:1.3rem 1.4rem}
    .fzfm-foot{flex-shrink:0;display:flex;align-items:center;gap:.8rem;padding:1rem 1.4rem;border-top:1px solid var(--bord);background:var(--card)}
    [data-theme="dark"] .fzfm-foot{border-top-color:#1E2D45;background:#0f1722}
    .fzfm-reset{display:inline-flex;align-items:center;gap:.45rem;background:none;border:none;color:var(--fzacc);font-size:.86rem;font-weight:800;cursor:pointer;font-family:inherit}
    .fzfm-reset:hover{text-decoration:underline}
    .fzfm-apply{display:inline-flex;align-items:center;gap:.5rem;background:var(--fzacc);color:#fff;border:none;border-radius:11px;padding:.8rem 1.6rem;font-size:.95rem;font-weight:800;cursor:pointer;font-family:inherit;transition:background .2s}
    .fzfm-apply:hover{background:var(--fzacch)}
    .filter-sidebar.in-modal{position:static !important;top:auto !important;left:auto !important;bottom:auto !important;transform:none !important;box-shadow:none !important;z-index:auto !important;width:100% !important;max-width:none !important;display:block;background:none !important;border:none !important;padding:0 !important;margin:0 !important;overflow:visible !important;max-height:none !important}
    .filter-sidebar.in-modal .rs-more,.filter-sidebar.in-modal .rs-go,.filter-sidebar.in-modal .fs-drawer-head{display:none !important}
    .filter-sidebar.in-modal .rs-grp,.filter-sidebar.in-modal .rs-field{margin:0 0 1.4rem !important;max-width:none}
    .filter-sidebar.in-modal .rs-vb{max-width:520px}
    body.fzsearch .hero{display:none}            /* Hero ausblenden, Ergebnisse als eigene Ansicht */
    body.fzsearch .main{padding-top:1.3rem}
    .rs-crumbbar{display:none}
    .main.fz-results .rs-crumbbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.1rem}
    .rs-crumb{display:flex;align-items:center;gap:.5rem;font-size:.82rem;color:var(--tmut);flex-wrap:wrap}

















































































































    .rcard{display:grid;grid-template-columns:300px 1fr;gap:0;background:#fff;border:1px solid var(--bord);border-radius:14px;overflow:hidden;cursor:pointer;transition:box-shadow .15s,transform .15s}
    [data-theme="dark"] .rcard{background:#0d1828;border-color:#1E2D45}
    .rcard:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,.15)}
    .rcard-img{position:relative;aspect-ratio:4/3;background:#eef1f5;overflow:hidden}
    [data-theme="dark"] .rcard-img{background:#0a1424}
    .rcard-img img{width:100%;height:100%;object-fit:cover;display:block}
    .rcard-noimg{display:flex;align-items:center;justify-content:center;height:100%;color:var(--tmut)}
    .rcard-main{padding:1.1rem 1.25rem;display:flex;flex-direction:column;min-width:0}
    .rcard-titlerow{display:flex;align-items:baseline;gap:.55rem;flex-wrap:wrap}
    .rcard-neu{display:inline-block;background:#f6a609;color:#3a2a00;font-size:.66rem;font-weight:900;padding:.12rem .42rem;border-radius:5px;text-transform:uppercase;letter-spacing:.03em}
    .rcard-title{font-size:1.12rem;font-weight:800;color:var(--text)}
    [data-theme="dark"] .rcard-title{color:#fff}






    [data-theme="dark"] .rcard-pricetax{color:#9fb0c4}
    /* Preis-Einschätzung (5 Balken + Label) */
    .rcard-prate{display:inline-flex;align-items:center;gap:.55rem;cursor:default}
    .rcard-bars{display:inline-flex;gap:2px}
    .rcard-prate i{width:15px;height:9px;border-radius:2px;background:var(--bord);display:inline-block}
    [data-theme="dark"] .rcard-prate i{background:#22324a}
    .rcard-prate.pr-top i.on{background:#1a9e4b}
    .rcard-prate.pr-fair i.on{background:#1a9e4b}
    .rcard-prate.pr-high i.on{background:#d97706}
    .rcard-prate b{font-size:.78rem;font-weight:700}
    .rcard-prate.pr-top b,.rcard-prate.pr-fair b{color:#1a9e4b}
    .rcard-prate.pr-high b{color:#d97706}
    /* Anbieter-Logo/Banner links neben den Sternen */
    .rcard-dlr-logo{width:48px;height:48px;border-radius:9px;flex-shrink:0;overflow:hidden;background:#fff;border:1px solid var(--bord);display:flex;align-items:center;justify-content:center}
      .hero-top{margin-bottom:1.1rem;gap:1rem}
      /* AutoScout-Hero mobil */
      .fzh-top{flex-direction:column;align-items:stretch;gap:1.1rem}
      .fzh-head h1{font-size:clamp(1.45rem,6.2vw,2rem);margin-bottom:.9rem}
    .rcard-specs{font-size:.86rem;color:var(--text);font-weight:600;margin-bottom:.7rem;line-height:1.4}
    [data-theme="dark"] .rcard-specs{color:#cfd8e6}
      .fzf{flex-direction:column;margin-top:1.3rem}
      .fzf-types{flex-direction:row;overflow-x:auto;border-right:none;border-bottom:1px solid var(--bord);padding:.5rem .4rem;gap:.3rem;-webkit-overflow-scrolling:touch}
      [data-theme="dark"] .fzf-types{border-bottom-color:#1E2D45}
      .fzf-type{width:auto;min-width:64px;flex-shrink:0}
      .fzf-main{padding:.9rem .9rem 1rem;gap:.85rem}
      .fzf-fields{grid-template-columns:repeat(2,1fr);gap:.6rem}
      .fzf-go{grid-column:1 / -1}
      .fzf-foot{gap:.9rem 1.1rem}
      .fzf-foot-sp{display:none}
      .main{padding:1.1rem 1.1rem 3.5rem}
      .list-section{padding:0;border-radius:0;margin-top:2.5rem}
      .list-section h2{font-size:clamp(1.45rem,5.5vw,1.75rem)}
      .perks{flex-direction:column;gap:.75rem;margin-bottom:1.5rem}
      .btn-row{flex-direction:column;gap:.6rem}
      .btn-row .btn{width:100%;justify-content:center}
      .foot{padding:1.25rem 1rem}
      .foot p{font-size:.73rem;line-height:1.9}
    }
    @media(max-width:380px){
    @media(max-width:780px){
      .rcard{grid-template-columns:1fr}
      .rcard-img{aspect-ratio:16/10}
      .rs-head{padding:.9rem}
      .rs-count{font-size:1.2rem}
      .rcard-dealer{flex-wrap:wrap}
      .rcard-btns{width:100%}
      .rcard-kontakt,.rcard-park{flex:1;justify-content:center}
    }
























<div class="hero">
  <svg class="hero-bg" viewBox="0 0 1440 170" preserveAspectRatio="xMidYMax meet" fill="none" stroke="#aebfdb" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
    <!-- Fernseher -->
    <rect x="80" y="54" width="172" height="102" rx="9"/><path d="M150 168h52"/><path d="M166 156v12"/>
    <!-- Laptop -->
    <rect x="330" y="70" width="132" height="80" rx="7"/><path d="M310 150h172l16 18H294z"/>
    <!-- Smartphone -->
    <rect x="544" y="54" width="60" height="116" rx="13"/><path d="M566 158h16"/>
    <!-- Kamera -->
    <rect x="668" y="92" width="142" height="78" rx="10"/><circle cx="739" cy="131" r="27"/><circle cx="739" cy="131" r="11"/><path d="M680 92l9-15h28l9 15"/>
    <!-- Kopfhörer -->
    <path d="M900 162v-32a50 50 0 01100 0v32"/><rect x="890" y="130" width="24" height="40" rx="8"/><rect x="986" y="130" width="24" height="40" rx="8"/>
    <!-- Lautsprecher -->
    <rect x="1086" y="58" width="88" height="112" rx="11"/><circle cx="1130" cy="92" r="13"/><circle cx="1130" cy="136" r="23"/>
    <!-- Schaltkreis -->
    <path d="M1240 170v-36h48v-36h66" stroke-width="2.5"/><circle cx="1354" cy="98" r="6" fill="#aebfdb" stroke="none"/><path d="M1240 134h-34" stroke-width="2.5"/><circle cx="1202" cy="134" r="6" fill="#aebfdb" stroke="none"/>
  </svg>
  <div class="hero-in">
    <div class="hero-top">
      <div class="hero-text">
        <h1>Fahrzeuge &amp; Transport entdecken</h1>
      </div>
    </div>

    <!-- Such-/Filterleiste -->
    <div class="searchbar">
      <div class="sb-fields">
      <div class="sb-field">
        <svg class="sb-ico" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
        <div class="sb-col"><label>Suche</label><input type="text" id="searchInput" placeholder="Marke, Modell oder Firma" onkeydown="if(event.key==='Enter')filterCards()"/></div>
        <button type="button" class="sb-toggle" onclick="sbToggle()" aria-label="Filter ein-/ausklappen"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg></button>
      </div>
      <div class="sb-field">
        <svg class="sb-ico" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg>
        <div class="sb-col"><label>Kategorie</label>
          <select id="sbKat">
            <option value="alle">Alle Kategorien</option>
            <option value="PKW">PKW</option>
            <option value="Transporter & Nutzfahrzeuge">Transporter &amp; Nutzfahrzeuge</option>
            <option value="LKW">LKW</option>
            <option value="Anhänger & Auflieger">Anhänger &amp; Auflieger</option>
            <option value="Land- & Forstfahrzeuge">Land- &amp; Forstfahrzeuge</option>
            <option value="Baufahrzeuge">Baufahrzeuge</option>
            <option value="Motorräder">Motorräder</option>
            <option value="Busse">Busse</option>
            <option value="Wohnmobile & Caravans">Wohnmobile &amp; Caravans</option>
            <option value="Sonstiges">Sonstiges</option>
          </select>
        </div>
      </div>
      <div class="sb-field">
<div class="hero">
  <div class="hero-in">
    <div class="fzh-top">
      <div class="fzh-head">
        <h1>Fahrzeuge &amp; Transport.<br>Eine einfache Suche.</h1>
        <div class="fzh-search">
          <svg class="fzh-search-ico" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 11l1.4-4a2 2 0 0 1 1.9-1.4h7.4a2 2 0 0 1 1.9 1.4L19 11"/><path d="M3 16v-3c0-.5.3-.9.8-1L5 11h14l1.2.2c.5.1.8.5.8 1v3a1 1 0 0 1-1 1h-1"/><path d="M6 17H4"/><circle cx="7.5" cy="16.5" r="1.9"/><circle cx="16.5" cy="16.5" r="1.9"/></svg>
          <input type="text" id="fzSearch" placeholder="Kombi mit Panoramadach und Sitzheizung" oninput="filterCards()" onkeydown="if(event.key==='Enter')filterCards()">
          <button class="fzh-search-go" onclick="filterCards()" aria-label="Suchen">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="13 6 19 12 13 18"/></svg>
          </button>
        </div>
      </div>
      <div class="fzh-art" aria-hidden="true">
        <svg viewBox="0 0 260 120" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
          <path d="M22 80h216"/>
          <path d="M40 80c0-9 7-16 16-16s16 7 16 16"/>
          <path d="M188 80c0-9 7-16 16-16s16 7 16 16"/>
          <path d="M72 80h116"/>
          <path d="M40 80H34c-7 0-12-5-12-12v-6c0-6 4-10 9-11l34-7 26-19c4-3 8-4 13-4h44c5 0 10 2 13 6l18 21 30 7c6 1 10 6 10 12v6c0 5-4 7-9 7h-5"/>
          <path d="M84 33 66 46l4 12h40V33z"/>
    [data-theme="dark"] .recent-title{color:#E8EDF5}
    @media(max-width:600px){.recent-viewed{padding:1.5rem 1.1rem}.recent-card{flex:0 0 158px;width:158px}}
    /* Karte (neu wie Vorlage) */
    .card{border:1px solid var(--bord);border-radius:12px;overflow:hidden;background:#fff;transition:border-color .2s,box-shadow .2s,transform .2s;cursor:pointer;position:relative;display:flex;flex-direction:column}
    .card:hover{border-color:rgba(27,86,204,.35);box-shadow:0 10px 30px rgba(12,26,46,.12);transform:translateY(-3px)}
    .card-img{position:relative;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#0f1722}
    .card-img img{width:100%;height:100%;object-fit:cover}
    .card-img svg.prod-icon{width:54px;height:54px;opacity:.25;color:#fff}
    .card-badge{position:absolute;top:.7rem;left:.7rem;z-index:2;font-size:.68rem;font-weight:700;padding:.28rem .65rem;border-radius:6px;color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.2)}
    .badge-neu{background:var(--blue)}
    .card-tl{position:absolute;top:.6rem;left:.6rem;z-index:3;display:flex;align-items:center;gap:.4rem}
    .card-tl .card-badge{position:static;top:auto;left:auto;box-shadow:none}
    .card-fav{position:absolute;top:.65rem;right:.65rem;z-index:3;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.92);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#6b7a90;box-shadow:0 2px 8px rgba(0,0,0,.15);transition:all .2s}
    .card-fav:hover{background:#fff;color:#dc2626}
    .card-fav.on{color:#dc2626}
    .card-fav.on svg{fill:#dc2626;transition:fill .15s}
    .card-fav svg{transition:transform .2s cubic-bezier(.2,1.6,.5,1)}
    /* Herz-Animation beim Klick */
    .card-fav.pop svg{animation:heartPop .42s cubic-bezier(.2,1.6,.5,1)}
    .card-fav.pop::after{content:'';position:absolute;inset:0;border-radius:50%;border:2px solid #dc2626;animation:heartBurst .55s ease-out forwards;pointer-events:none}
    @keyframes heartPop{0%{transform:scale(1)}30%{transform:scale(.7)}60%{transform:scale(1.35)}100%{transform:scale(1)}}
    @keyframes heartBurst{0%{transform:scale(.6);opacity:.7}100%{transform:scale(1.9);opacity:0}}
    .admin-mode .card-fav{display:none}
    .card-body{padding:.9rem 1.05rem .95rem;display:flex;flex-direction:column;flex:1}
    .card-title{font-size:.96rem;font-weight:700;color:var(--text);line-height:1.3;margin-bottom:.3rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
    .card-loc{display:flex;align-items:center;gap:.35rem;font-size:.78rem;color:var(--tmut);margin-bottom:.45rem}
    .card-rating{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;margin:-.05rem 0 .45rem}
    .card-score{display:none}  /* Desktop: Wort-Label · Handy: 1–10-Zahl */
    @media(max-width:600px){.card-score{display:inline-flex}.vcr-label{display:none}.card-rating{order:1;margin:.15rem 0 .4rem}}
    .card-loc svg{color:var(--tmut);flex-shrink:0}
    .card-price{font-size:1.12rem;font-weight:800;color:var(--blue);letter-spacing:-.02em;margin-bottom:.6rem}
    .card-specs{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;padding-top:.65rem;border-top:1px solid var(--bord)}
    .spec{display:inline-flex;align-items:center;gap:.32rem;font-size:.76rem;color:var(--tmid);font-weight:600;white-space:nowrap}
    .spec svg{color:#9aa3b0;flex-shrink:0}
    .card-cta{display:flex;align-items:center;justify-content:center;gap:.4rem;width:100%;margin-top:auto;padding:.6rem;border:1px solid var(--bord);border-radius:8px;text-align:center;font-size:.8rem;font-weight:700;color:var(--blue);transition:background .2s,color .2s,border-color .2s;cursor:pointer;font-family:'Manrope',system-ui,sans-serif;background:#fff;text-decoration:none}
    .card-cta:hover{background:var(--blue);color:#fff;border-color:var(--blue)}

    /* ── Handy: Inserate horizontal wie booking.com (Bild links, Infos rechts) ── */
    @media(max-width:600px){
      .grid{grid-template-columns:1fr;gap:.85rem}
      .card{flex-direction:row;align-items:stretch}
      .card-img{aspect-ratio:auto;width:40%;min-width:124px;max-width:168px;align-self:stretch;flex-shrink:0;position:relative;border-radius:0}
      .card-badge{left:.5rem;top:.5rem;font-size:.6rem;padding:.18rem .5rem}
      .card-fav{top:.5rem;right:.5rem;left:auto;width:27px;height:27px}
      .admin-del-btn{right:.5rem;top:.5rem}
      .card-body{padding:.75rem .85rem .8rem;min-width:0;position:relative}
      .card-title{font-size:.92rem;margin-bottom:.25rem;order:1;padding-right:2.3rem;min-height:1.65rem}
      .card-loc{font-size:.74rem;margin-bottom:.5rem;order:2}
      .card-specs{order:3;gap:.5rem .8rem;border-top:none;padding-top:0;margin-bottom:.55rem}
      .spec{font-size:.72rem}
      .card-price{order:4;font-size:1.1rem;margin:auto 0 0 auto;text-align:right}
      .card-cta{display:none}
    }

    /* ── Mobile-Filterleiste (booking.com-Stil) ── */
    .mobile-filterbar{display:none;position:sticky;top:56px;z-index:80;background:#fff;border:none;border-bottom:1px solid var(--bord);border-radius:0;padding:.4rem .15rem;gap:.2rem;margin:0 0 1rem;box-shadow:0 3px 10px rgba(12,26,46,.05)}
    .mfb-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:.4rem;background:none;border:none;border-radius:9px;padding:.55rem .3rem;font-size:.85rem;font-weight:600;color:var(--text);cursor:pointer;font-family:'Manrope',system-ui,sans-serif}
    .mfb-btn svg{opacity:.8}
    .mfb-btn:active{background:rgba(12,26,46,.06)}
    .mfb-btn .mfb-badge{background:var(--blue);color:#fff;border-radius:20px;font-size:.66rem;padding:.05rem .4rem;font-weight:800}
        Fahrzeuge finden
      </button>
    </div>
  </div>
        <div class="fs-body">
          <div class="fs-minmax">
            <select id="fPriceMin"><option value="">Min. Preis</option><option value="50">50 €</option><option value="100">100 €</option><option value="250">250 €</option><option value="500">500 €</option><option value="1000">1.000 €</option></select>
            <select id="fPriceMax"><option value="">Max. Preis</option><option value="250">250 €</option><option value="500">500 €</option><option value="1000">1.000 €</option><option value="2500">2.500 €</option><option value="5000">5.000 €</option></select>
          </div>
        </div>
      </div>

      <div class="fs-group">
        <div class="fs-gtitle" onclick="fsToggle(this)">Zustand <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="6 9 12 15 18 9"/></svg></div>
        <div class="fs-body">
          <label class="fs-check"><input type="checkbox" class="fs-cond" value="Neu"> Neu</label>
          <label class="fs-check"><input type="checkbox" class="fs-cond" value="Wie neu"> Wie neu</label>
          <label class="fs-check"><input type="checkbox" class="fs-cond" value="Gebraucht"> Gebraucht</label>
          <label class="fs-check"><input type="checkbox" class="fs-cond" value="Defekt"> Defekt</label>
        </div>
      </div>

      <div class="fs-group collapsed">
        <div class="fs-gtitle" onclick="fsToggle(this)">Versand <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="6 9 12 15 18 9"/></svg></div>
        <div class="fs-body">
<div class="main">

  <!-- Mobile-Filterleiste (nur Handy/Tablet) -->
  <div class="mobile-filterbar">
    <button class="mfb-btn" onclick="openSortDrawer()">
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="7 4 7 20"/><polyline points="3 8 7 4 11 8"/><polyline points="17 20 17 4"/><polyline points="13 16 17 20 21 16"/></svg>
      Sortieren
    </button>
    <button class="mfb-btn" onclick="openFilterDrawer()">
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><line x1="4" y1="21" x2="4" y2="14"/><line x1="4" y1="10" x2="4" y2="3"/><line x1="12" y1="21" x2="12" y2="12"/><line x1="12" y1="8" x2="12" y2="3"/><line x1="20" y1="21" x2="20" y2="16"/><line x1="20" y1="12" x2="20" y2="3"/><line x1="1" y1="14" x2="7" y2="14"/><line x1="9" y1="8" x2="15" y2="8"/><line x1="17" y1="16" x2="23" y2="16"/></svg>
      Filter <span class="mfb-badge" id="mfbCount" style="display:none">0</span>
    </button>
  </div>

  <!-- Mobile-Sortier-Schublade -->
  <div class="sort-sheet-overlay" id="sortOverlay" onclick="closeSortDrawer()"></div>
  <div class="sort-sheet" id="sortSheet">
    <div class="ss-head"><h3>Sortieren</h3><button class="fs-drawer-close" onclick="closeSortDrawer()" aria-label="Schließen">×</button></div>
    <button class="ss-opt sel" data-val="rated" onclick="applySort(this)"><span>Top bewertet</span><svg class="ss-tick" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg></button>
    <button class="ss-opt" data-val="viewed" onclick="applySort(this)"><span>Top angeschaut</span><svg class="ss-tick" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg></button>
    <button class="ss-opt" data-val="newest" onclick="applySort(this)"><span>Neueste zuerst</span><svg class="ss-tick" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg></button>
    <button class="ss-opt" data-val="price-asc" onclick="applySort(this)"><span>Preis aufsteigend</span><svg class="ss-tick" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg></button>
    <button class="ss-opt" data-val="price-desc" onclick="applySort(this)"><span>Preis absteigend</span><svg class="ss-tick" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg></button>
  </div>

  <div class="filter-overlay" id="filterOverlay" onclick="closeFilterDrawer()"></div>

  <div class="browse-layout">

    <!-- Filter-Sidebar -->
    <aside class="filter-sidebar" id="filterSidebar">
      <div class="fs-drawer-head"><h3>Filter</h3><button class="fs-drawer-close" onclick="closeFilterDrawer()" aria-label="Schließen">×</button></div>
      <div class="fs-head"><h3>Filter</h3><button class="fs-reset-link" onclick="resetFilters()">Zurücksetzen</button></div>

      <div class="fs-group">
        <div class="fs-gtitle" onclick="fsToggle(this)">Kategorie <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="6 9 12 15 18 9"/></svg></div>
        <div class="fs-body">
          <label class="fs-check"><input type="checkbox" class="fs-cat" value="PKW"> PKW <span class="fs-count">0</span></label>
          <label class="fs-check"><input type="checkbox" class="fs-cat" value="Transporter & Nutzfahrzeuge"> Transporter &amp; Nutzfahrzeuge <span class="fs-count">0</span></label>
    .btn-row{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
    .btn{display:inline-flex;align-items:center;gap:.5rem;padding:.72rem 1.5rem;border-radius:8px;font-size:.875rem;font-weight:700;cursor:pointer;border:none;transition:all .2s;font-family:'Manrope',system-ui,sans-serif}
    .btn-pri{background:var(--blue);color:#fff}
    .btn-pri:hover{background:var(--blueh);box-shadow:0 6px 20px rgba(27,86,204,.4);transform:translateY(-1px)}
    .btn-sec{background:rgba(255,255,255,.08);color:rgba(255,255,255,.75);border:1.5px solid rgba(255,255,255,.15)}
    .list-section .btn-sec{background:var(--off);color:var(--text);border:1.5px solid var(--bord)}
    .btn-sec:hover{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.3)}

    /* Footer */
    .foot{background:var(--navy);padding:1.5rem 2.5rem;text-align:center;border-top:1px solid rgba(255,255,255,.06)}
    .foot p{font-size:.78rem;color:rgba(255,255,255,.3)}
    .foot a{color:rgba(255,255,255,.45);transition:color .2s}
    .foot a:hover{color:#fff}
    .foot span{color:var(--bluel);font-weight:800}

    /* ── Admin system ──────────────────────────────────────── */
    .admin-bar{background:#052010;border-bottom:2px solid rgba(74,222,128,.2);padding:.65rem 2.5rem;display:none;align-items:center;gap:1rem;flex-wrap:wrap;position:sticky;top:56px;z-index:90}
    .admin-bar-label{font-size:.78rem;font-weight:700;color:#4ade80;display:flex;align-items:center;gap:.45rem;flex:1}
    .admin-bar-out{font-size:.75rem;font-weight:700;color:rgba(255,255,255,.45);background:transparent;border:1px solid rgba(255,255,255,.18);padding:.3rem .85rem;border-radius:5px;cursor:pointer;font-family:'Manrope',system-ui,sans-serif;transition:all .2s}
    .admin-bar-out:hover{color:#fff;border-color:rgba(255,255,255,.45)}
    .ldm-close:hover{background:rgba(15,23,34,.85)}
    .ldm-page{max-width:none;margin:0 auto;padding:1.5rem 2.25rem 3rem}
    .ldm-top{display:grid;grid-template-columns:1fr 400px;gap:2.25rem;margin-bottom:1.1rem;align-items:start}
    .ldm-gallery{min-width:0}
    .ldm-stage{position:relative;width:100%;height:405px}
    .ldm-main-img{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;background:#0f1722;display:flex;align-items:center;justify-content:center}
    .ldm-main-img img{width:100%;height:100%;object-fit:contain}
    .ldm-main-img video{width:100%;height:100%;object-fit:contain;background:#000}
    .ldm-main-img .no-img{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;color:rgba(255,255,255,.3);height:100%}
    .ldm-new-badge{position:absolute;bottom:.9rem;left:.9rem;z-index:6;background:var(--navy);color:#fff;font-size:.7rem;font-weight:700;padding:.35rem .8rem;border-radius:7px}
    .ldm-nav{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.92);border:none;box-shadow:0 2px 10px rgba(0,0,0,.2);color:#0f1722;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;z-index:6}
    .ldm-nav:hover{background:#fff;transform:translateY(-50%) scale(1.08)}
    .ldm-nav.prev{left:1rem}
    .ldm-nav.next{right:1rem}
    .ldm-counter{position:absolute;top:.9rem;right:.9rem;z-index:6;background:rgba(15,23,34,.65);color:#fff;font-size:.72rem;font-weight:600;padding:.3rem .75rem;border-radius:20px}
    .ldm-thumbs{display:flex;align-items:center;gap:.5rem;margin-top:.75rem;overflow-x:auto;scrollbar-width:thin;padding-bottom:.25rem}
    .ldm-thumbs::-webkit-scrollbar{height:6px}
    .ldm-thumb{width:96px;height:70px;flex-shrink:0;overflow:hidden;cursor:pointer;border:2px solid transparent;transition:border-color .15s,opacity .15s;opacity:.65}
    .ldm-thumb.active{border-color:var(--blue);opacity:1}
    .ldm-thumb:hover{opacity:1}
    .ldm-thumb img{width:100%;height:100%;object-fit:cover}
    .ldm-info{min-width:0}
    @media(min-width:880px){.ldm-info{position:sticky;top:70px;align-self:start}}
    .ldm-title{font-size:1.5rem;font-weight:800;color:var(--text);line-height:1.2;margin-bottom:.7rem;letter-spacing:-.02em}
    .ldm-badges{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:.8rem}
    .ldm-badge{display:inline-flex;align-items:center;gap:.3rem;font-size:.78rem;font-weight:600;padding:.25rem .7rem;border-radius:6px}
    .ldm-badge-green{background:#dcfce7;color:#15803d}
    .ldm-badge-gray{background:transparent;color:#6b7a90;padding:.25rem 0;position:relative}
    .ldm-badge-gray + .ldm-badge-gray::before{content:'•';margin-right:.5rem;color:#cbd3dd}
    .ldm-loc{display:flex;align-items:flex-start;gap:.45rem;font-size:.85rem;color:#6b7a90;margin-bottom:1rem;line-height:1.5}
    .ldm-loc svg{color:var(--blue);flex-shrink:0;margin-top:.1rem}
    .ldm-loc .ldm-loc-lines{display:flex;flex-direction:column}
    .ldm-loc .ldm-loc-1{color:var(--text);font-weight:600}
    .ldm-loc .ldm-loc-2{color:#6b7a90;font-size:.82rem}
    .ldm-price{font-size:1.9rem;font-weight:800;color:var(--blue);letter-spacing:-.03em}
    .ldm-price-label{font-size:.8rem;color:#9aa3b0;font-weight:600;margin-bottom:1.5rem}
    .ldm-specs-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1.1rem .75rem;margin-bottom:1.5rem}
    .ldm-spec-box{display:flex;align-items:flex-start;gap:.55rem}
    .ldm-spec-ico{display:flex;align-items:flex-start;justify-content:center;flex-shrink:0;color:#9aa3b0;margin-top:.1rem}
    .ldm-spec-label{font-size:.7rem;font-weight:500;color:#9aa3b0;margin-bottom:.1rem}
    .ldm-spec-val{font-size:.9rem;font-weight:700;color:var(--text);line-height:1.25}
    .ldm-close{position:relative;margin:.85rem 0 .2rem 1.1rem;z-index:30;height:42px;padding:0 1.1rem 0 .9rem;border-radius:999px;background:rgba(15,23,34,.62);backdrop-filter:blur(6px);border:none;cursor:pointer;color:#fff;font-size:.92rem;font-weight:600;font-family:inherit;display:inline-flex;align-items:center;gap:.45rem;transition:background .2s}
    html[data-theme="dark"] .ldm-close{background:#1b1b20;color:#E8EDF5}
    .ldm-close:hover{background:rgba(15,23,34,.85)}
    .ldm-rating{border-top:1px solid var(--bord);margin-top:1.5rem;padding-top:1.25rem}
    .ldm-rating-head{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1.1rem}
    .ldm-rating-summary{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap}
    .ldm-col-title{font-size:1rem;font-weight:800;color:var(--text);margin-bottom:1rem;letter-spacing:-.01em}
    .ldm-detail-row{display:flex;justify-content:space-between;gap:.75rem;padding:.4rem 0;font-size:.82rem;line-height:1.4}
    .ldm-detail-row .k{color:#9aa3b0;font-weight:500;flex-shrink:0}
    .ldm-detail-row .v{color:var(--text);font-weight:600;text-align:right}
    .ldm-desc{font-size:.84rem;color:#3d4a5c;line-height:1.75;white-space:pre-line;word-break:break-word}
    .ldm-empty{font-size:.83rem;color:#9aa3b0;font-style:italic}
    .ldm-feat{display:flex;align-items:flex-start;gap:.5rem;font-size:.83rem;color:#3d4a5c;margin-bottom:.55rem;line-height:1.4}
    .ldm-feat svg{color:#16a34a;flex-shrink:0;margin-top:.15rem}
    .ldm-addr{font-size:.84rem;color:#3d4a5c;line-height:1.6;margin-bottom:.7rem}
    .ldm-map{position:relative;overflow:hidden;border:1px solid var(--bord);background:#eef1f5}
    .ldm-map iframe{width:100%;height:190px;border:0;display:block}
    .ldm-map-btn{position:absolute;bottom:.7rem;left:50%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:.35rem;background:#fff;color:var(--text);font-size:.78rem;font-weight:600;padding:.45rem 1rem;border-radius:7px;box-shadow:0 3px 10px rgba(0,0,0,.18);text-decoration:none;white-space:nowrap;transition:background .15s}
    .ldm-map-btn:hover{background:var(--off)}
    @media(max-width:980px){
      .ldm-top{grid-template-columns:1fr;gap:1.5rem}
      .ldm-stage{height:300px}
      .ldm-bottom{grid-template-columns:1fr 1fr}
    }
    @media(max-width:560px){
      .ldm-page{padding:1rem .8rem 2rem}
      .ldm-bottom{grid-template-columns:1fr;gap:1.4rem}
      .ldm-specs-grid{grid-template-columns:1fr 1fr}
      .ldm-map iframe{height:200px}
    }

    /* ── Foto-Raster auf dem Handy (booking.com-Stil) ── */
    .ldm-photogrid{display:none}
    @media(max-width:980px){
      .ldm-stage{display:none}
      .ldm-thumbs{display:none}
      /* booking.com-Raster: 6 Spalten → oben 2 große, unten 3 kleine Bilder */
      .ldm-photogrid{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;border-radius:12px;overflow:hidden}
      .ldm-photogrid .pg-cell{position:relative;overflow:hidden;cursor:pointer;background:#0f1722;grid-column:span 3;aspect-ratio:4/3}
      .ldm-photogrid img,.ldm-photogrid video{width:100%;height:100%;object-fit:cover;display:block}
      .ldm-photogrid.pg-n1 .pg-cell{grid-column:span 6;aspect-ratio:16/10}
      .ldm-photogrid.pg-n3 .pg-cell:nth-child(1){grid-column:span 6;aspect-ratio:16/9}
      .ldm-photogrid.pg-n5 .pg-cell:nth-child(n+3){grid-column:span 2;aspect-ratio:1/1}
      .ldm-photogrid .pg-more{position:absolute;inset:0;background:rgba(8,16,30,.55);display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.3rem;font-weight:800}
      .ldm-photogrid .pg-vid{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;pointer-events:none}
    }

    /* ── Vollbild-Lightbox ── */
    .ldm-lightbox{display:none;position:fixed;inset:0;z-index:4000;background:#000;align-items:center;justify-content:center}
    .ldm-lightbox.open{display:flex}
    .lbx-stage{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
    .lbx-stage img{max-width:100%;max-height:100%;object-fit:contain}
    .lbx-stage video{max-width:100%;max-height:100%;background:#000}
    .lbx-close{position:absolute;top:max(.8rem,env(safe-area-inset-top));right:.9rem;z-index:5;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.14);border:none;color:#fff;font-size:1.5rem;cursor:pointer;display:flex;align-items:center;justify-content:center}
    .lbx-close:active{background:rgba(255,255,255,.28)}
    .lbx-count{position:absolute;top:max(1rem,env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:5;color:#fff;font-size:.85rem;font-weight:600;background:rgba(255,255,255,.12);padding:.3rem .9rem;border-radius:20px}
    .lbx-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.14);border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}
    .lbx-nav:active{background:rgba(255,255,255,.28)}
    .lbx-nav.prev{left:.7rem}
    .lbx-nav.next{right:.7rem}
    @media(min-width:781px){ .lbx-nav{width:54px;height:54px} }

    /* ── Tab strip (mobile-only section nav) ────────────────── */
    .vc-tab-strip{
      display:none;
      background:var(--navy);
      border-bottom:1px solid rgba(255,255,255,.1);
      position:sticky;
      top:54px;
      z-index:95;
      overflow-x:auto;
      scrollbar-width:none;
      white-space:nowrap;
      padding:.45rem 1.25rem;
    }
    .vc-tab-strip::-webkit-scrollbar{display:none}
    .vc-tab-strip a{
      display:inline-block;
      font-size:.74rem;font-weight:600;
      color:rgba(255,255,255,.48);
      padding:.42rem .95rem;
      text-decoration:none;
      border:1px solid transparent;border-radius:999px;
      transition:color .18s,border-color .18s;
    }
    .vc-tab-strip a:hover{color:rgba(255,255,255,.85)}
    .vc-tab-strip a.on{color:#fff;background:transparent;border-color:rgba(255,255,255,.7);font-weight:700}
    /* Top-Leiste (Vermittco + Tabs) nahtlos mit dem Seitenhintergrund verschmelzen */
    [data-theme="dark"] .nav{background:#0f0f12 !important;border-bottom:none !important}
    [data-theme="dark"] .vc-tab-strip{background:#0f0f12 !important;border-bottom-color:transparent !important}
    /* Light Mode: Top-Leiste weiß, geht nahtlos in den weißen Hintergrund über */
    [data-theme="light"] .nav{background:#fff !important;border-bottom:none !important}
    [data-theme="light"] .vc-tab-strip{background:#fff !important;border-bottom-color:transparent !important}
    [data-theme="light"] .nav-logo{color:#0F1722}
    [data-theme="light"] .nav-logo span{color:var(--blue)}
    [data-theme="light"] .nav-links a{color:rgba(15,23,34,.6)}
    [data-theme="light"] .nav-links a:hover{color:#0F1722;background:rgba(15,23,34,.06)}
    [data-theme="light"] .nav-links a.on{color:#0F1722;border-color:rgba(15,23,34,.45)}
    [data-theme="light"] .nav-back{color:rgba(15,23,34,.5)}
    [data-theme="light"] .nav-back:hover{color:#0F1722}
    [data-theme="light"] .vc-tab-strip a{color:rgba(15,23,34,.55)}
    [data-theme="light"] .vc-tab-strip a:hover{color:#0F1722}
    [data-theme="light"] .vc-tab-strip a.on{color:#0F1722;border-color:rgba(15,23,34,.5)}
    [data-theme="light"] .vc-ctl-btn{color:#0F1722}
    [data-theme="light"] .vc-ctl-btn:hover{background:rgba(15,23,34,.07)}
    /* Auch hell ohne Kasten (Betreiber-Wunsch) — nur beim Überfahren ein Hauch. */
    [data-theme="light"] .vc-user-btn{background:none;border-color:transparent}
    [data-theme="light"] .vc-user-btn:hover{background:rgba(15,23,34,.06)}
    [data-theme="light"] .vc-avatar-guest{background:rgba(15,23,34,.1);color:#0F1722}
    [data-theme="light"] .vc-chevron{color:rgba(15,23,34,.55)}
    /* Light Mode: Anmelden/Registrieren/Hilfe dunkel auf hellblauer Leiste */
    [data-theme="light"] .vc-login-link{color:rgba(15,23,34,.7)}
    [data-theme="light"] .vc-login-link:hover{color:#0F1722}
    [data-theme="light"] .vc-register-link{color:#0F1722;border-color:rgba(15,23,34,.28)}
    [data-theme="light"] .vc-register-link:hover{background:rgba(15,23,34,.06);border-color:rgba(15,23,34,.5)}
    [data-theme="light"] .vc-help-link{color:#0F1722;border-color:rgba(15,23,34,.28)}
    [data-theme="light"] .vc-help-link:hover{background:rgba(15,23,34,.06);border-color:rgba(15,23,34,.5)}

    /* ── Mobile ─────────────────────────────────────────────── */
    @media(max-width:768px){
      .nav{padding:.8rem 1.25rem}
      .nav-logo{font-size:1.1rem}
      .nav-links{display:none !important}
      .vc-tab-strip{display:block}
      .cta-prefix{display:none}
      .admin-bar{padding:.6rem 1.25rem;top:88px}
      .hero{padding:0}
      .hero h1{font-size:clamp(1.5rem,6.5vw,1.9rem);line-height:1.15;margin-bottom:.4rem}
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M2 6h11v10H2z"/><path d="M13 9h4l4 4v3h-8z"/><circle cx="6.5" cy="17.5" r="1.7"/><circle cx="17.5" cy="17.5" r="1.7"/></svg>
          <span>Transporter</span>
        </button>
        <button type="button" class="fzf-type" data-cat="LKW" onclick="fzSetType(this)" role="tab" aria-selected="false" title="LKW">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M1 6h12v9H1z"/><path d="M13 9h4l4 3.5V15h-8z"/><circle cx="5.5" cy="17.5" r="1.7"/><circle cx="17.5" cy="17.5" r="1.7"/></svg>
          <span>LKW</span>
        </button>
        <button type="button" class="fzf-type" data-cat="Sattelzüge" onclick="fzSetType(this)" role="tab" aria-selected="false" title="Sattelzüge">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M2 7h7v9H2z"/><path d="M9 16h13"/><path d="M9 10h4l3.5 3.5"/><circle cx="5.5" cy="17.6" r="1.6"/><circle cx="13.5" cy="17.6" r="1.6"/><circle cx="19" cy="17.6" r="1.6"/></svg>
          <span>Sattelzüge</span>
        </button>
        <button type="button" class="fzf-type" data-cat="Auflieger" onclick="fzSetType(this)" role="tab" aria-selected="false" title="Auflieger (Sattelauflieger)">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M2 7h18v6H2z"/><path d="M2 13h18"/><circle cx="14" cy="16" r="1.5"/><circle cx="18" cy="16" r="1.5"/><path d="M2 16h9"/></svg>
          <span>Auflieger</span>
        </button>
        <button type="button" class="fzf-type" data-cat="Anhänger" onclick="fzSetType(this)" role="tab" aria-selected="false" title="Anhänger">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="8" width="13" height="6" rx="1"/><path d="M16 12h4"/><circle cx="9.5" cy="16.5" r="1.5"/></svg>
          <span>Anhänger</span>
        </button>
        <button type="button" class="fzf-type" data-cat="Motorräder" onclick="fzSetType(this)" role="tab" aria-selected="false" title="Motorräder">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><circle cx="5" cy="16" r="3.2"/><circle cx="19" cy="16" r="3.2"/><path d="M8 16l3.5-5.5H16"/><path d="M11.5 10.5 10 8.5H7.5"/><path d="M13 11.5l3-1 2 5.5"/></svg>
          <span>Motorrad</span>
        </button>
        <button type="button" class="fzf-type" data-cat="Wohnmobile & Caravans" onclick="fzSetType(this)" role="tab" aria-selected="false" title="Wohnmobile &amp; Caravans">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M2 6h14a4 4 0 0 1 4 4v6H2z"/><path d="M20 16h2"/><path d="M2 16h6"/><circle cx="12" cy="17.5" r="1.7"/><rect x="5" y="9" width="6" height="4" rx="1"/></svg>
          <span>Caravan</span>
        </button>
        <button type="button" class="fzf-type" data-cat="Fahrräder & E-Bikes" onclick="fzSetType(this)" role="tab" aria-selected="false" title="Fahrräder &amp; E-Bikes">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><circle cx="5.5" cy="17.5" r="3.3"/><circle cx="18.5" cy="17.5" r="3.3"/><path d="M5.5 17.5l4-9h3.5"/><path d="M9.5 8.5l5.5 9"/><path d="M15 8.5h3"/><circle cx="12" cy="6" r="1"/></svg>
          <span>Fahrrad</span>
        </button>
        <button type="button" class="fzf-type" data-cat="Gabelstapler" onclick="fzSetType(this)" role="tab" aria-selected="false" title="Gabelstapler">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M4 16V6"/><path d="M4 16h8v-3H6"/><path d="M12 16V8h3l3 4v4"/><circle cx="7" cy="18.5" r="1.6"/><circle cx="16" cy="18.5" r="1.6"/><path d="M4 6h-1"/></svg>
          <span>Stapler</span>
        </button>
        <button type="button" class="fzf-type" data-cat="Baufahrzeuge" onclick="fzSetType(this)" role="tab" aria-selected="false" title="Baufahrzeuge">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="13" width="9" height="4.5" rx="1"/><circle cx="4.5" cy="19" r="1.4"/><circle cx="8.5" cy="19" r="1.4"/><path d="M11 14.5l3.5-6 2.8 1-2.6 5"/><path d="M17.3 9.5L20 8"/></svg>
          <span>Bagger</span>
        </button>
        <button type="button" class="fzf-type" data-cat="Land- & Forstfahrzeuge" onclick="fzSetType(this)" role="tab" aria-selected="false" title="Land- &amp; Forstfahrzeuge">
    @media(max-width:560px){ .ldm-head .ldm-title{font-size:1.5rem} }

    /* ── Desktop Foto-Galerie (booking.com-Stil) ── */
    .ldm-deskgrid{display:none}
    @media(min-width:981px){
      .ldm-stage{display:none}
      .ldm-thumbs{display:none}
      .ldm-deskgrid{display:block}
      .ldm-deskgrid .dg-cell{position:relative;overflow:hidden;cursor:pointer;background:#0f1722}
      .ldm-deskgrid .dg-cell img,.ldm-deskgrid .dg-cell video{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s}
      .ldm-deskgrid .dg-cell:hover img,.ldm-deskgrid .dg-cell:hover video{transform:scale(1.04)}
      .ldm-deskgrid .dg-hero{display:grid;gap:6px;height:360px;border-radius:12px;overflow:hidden}
      .ldm-deskgrid .dg-hero.dgh-1{grid-template-columns:1fr}
      .ldm-deskgrid .dg-hero.dgh-2{grid-template-columns:1.5fr 1fr}
      .ldm-deskgrid .dg-hero.dgh-3{grid-template-columns:1.5fr 1fr;grid-template-rows:1fr 1fr}
      .ldm-deskgrid .dg-hero.dgh-3 .dg-cell:nth-child(1){grid-row:1 / 3}
      .ldm-deskgrid .dg-thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:6px}
      .ldm-deskgrid .dg-thumbs .dg-cell{aspect-ratio:4/3;border-radius:8px}
      .ldm-deskgrid .dg-more{position:absolute;inset:0;background:rgba(8,16,30,.6);display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.05rem;font-weight:800}
      .ldm-deskgrid .pg-vid{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;pointer-events:none}
    }

          <div class="fzf-cell">
<div class="admin-bar" id="adminBar">
  <span class="admin-bar-label">🔐 Admin-Modus aktiv — Daten werden in Supabase gespeichert</span>
  <button class="admin-bar-out" onclick="vcLogout()">Abmelden</button>
</div>

<div class="hero">
  <div class="hero-in">
    <div class="fzh-head2">
      <h1>Mach Dich mobil.</h1>
      <p>Finde das, was zu Dir passt – auf dem Fahrzeugmarkt von Vermittco.</p>
    </div>

    <div class="fzh-panel">
      <div class="fzh-ptitle">Dein Fahrzeug. Eine einfache Suche.</div>
      <div class="fzh-search">
        <svg class="fzh-search-ico" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 11l1.4-4a2 2 0 0 1 1.9-1.4h7.4a2 2 0 0 1 1.9 1.4L19 11"/><path d="M3 16v-3c0-.5.3-.9.8-1L5 11h14l1.2.2c.5.1.8.5.8 1v3a1 1 0 0 1-1 1h-1"/><path d="M6 17H4"/><circle cx="7.5" cy="16.5" r="1.9"/><circle cx="16.5" cy="16.5" r="1.9"/></svg>
        <input type="text" id="fzSearch" placeholder="Kombi mit Panoramadach und Sitzheizung" oninput="fzMirror('fzSearch','fzSearch2')" onkeydown="if(event.key==='Enter')fzSubmitSearch()">
        <button class="fzh-search-go" onclick="fzSubmitSearch()" aria-label="Suchen">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="13 6 19 12 13 18"/></svg>
        </button>
      </div>
    </div>

    <div class="fzf">
      <div class="fzf-types" role="tablist" aria-label="Fahrzeugart">
        <button type="button" class="fzf-type" data-cat="PKW" onclick="fzSetType(this)" role="tab" aria-selected="false" title="PKW">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 17a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" /><path d="M15 17a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" /><path d="M5 17h-2v-6l2 -5h9l4 5h1a2 2 0 0 1 2 2v4h-2m-4 0h-6m-6 -6h15m-6 0v-5" /></svg>
          <span>PKW</span>
        </button>
        <button type="button" class="fzf-type" data-cat="Motorräder" onclick="fzSetType(this)" role="tab" aria-selected="false" title="Motorräder">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 16a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" /><path d="M16 16a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" /><path d="M7.5 14h5l4 -4h-10.5m1.5 4l4 -4" /><path d="M13 6h2l1.5 3l2 4" /></svg>
          <span>Motorrad</span>
        </button>
        <button type="button" class="fzf-type" data-cat="Fahrräder & E-Bikes" onclick="fzSetType(this)" role="tab" aria-selected="false" title="Fahrräder &amp; E-Bikes">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 18a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" /><path d="M16 18a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" /><path d="M12 19v-4l-3 -3l5 -4l2 3h3" /><path d="M13 5a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" /></svg>
          <span>Fahrrad</span>
        </button>
        <button type="button" class="fzf-type" data-cat="Wohnmobile & Caravans" onclick="fzSetType(this)" role="tab" aria-selected="false" title="Wohnmobile &amp; Caravans">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 18a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" /><path d="M11 18h7a2 2 0 0 0 2 -2v-7a2 2 0 0 0 -2 -2h-9.5a5.5 5.5 0 0 0 -5.5 5.5v3.5a2 2 0 0 0 2 2h2" /><path d="M8 7l7 -3l1 3" /><path d="M13 11.5a.5 .5 0 0 1 .5 -.5h2a.5 .5 0 0 1 .5 .5v2a.5 .5 0 0 1 -.5 .5h-2a.5 .5 0 0 1 -.5 -.5l0 -2" /><path d="M20 16h2" /></svg>
          <span>Caravan</span>
        </button>
        <button type="button" class="fzf-type fzf-morebtn" onclick="fzToggleCatGrid(event)" title="Weitere Fahrzeugarten" aria-label="Weitere Fahrzeugarten" aria-haspopup="true">
          <svg viewBox="0 0 24 24" fill="currentColor"><circle cx="5" cy="12" r="1.7"/><circle cx="12" cy="12" r="1.7"/><circle cx="19" cy="12" r="1.7"/></svg>
          <span>Mehr</span>
        </button>
      </div>

      <div class="fzf-main">
      <!-- Raster „Weitere Fahrzeugarten" (Nutzfahrzeuge mit Netto-Preisangabe) -->
      <div class="fzcat-overlay" id="fzCatGrid" role="dialog" aria-label="Fahrzeugart wählen">
        <div class="fzcat-head"><h3>Fahrzeugart wählen</h3><button type="button" class="fzcat-close" onclick="fzCloseCatGrid()" aria-label="Schließen">&times;</button></div>
        <div class="fzcat-grid">
          <button type="button" class="fzcat-card" data-cat="LKW" onclick="fzPickCatGrid(this)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 17a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" /><path d="M15 17a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" /><path d="M5 17h-2v-11a1 1 0 0 1 1 -1h9v12m-4 0h6m4 0h2v-6h-8m0 -5h5l3 5" /></svg><span>Lkw über 7,5&nbsp;t</span></button>
          <button type="button" class="fzcat-card" data-cat="Anhänger" onclick="fzPickCatGrid(this)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 17a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" /><path d="M6 8h12a1 1 0 0 1 1 1v6h-14v-6a1 1 0 0 1 1 -1z" /><path d="M5 12h-3" /></svg><span>Anhänger</span></button>
          <button type="button" class="fzcat-card" data-cat="Transporter & Nutzfahrzeuge" onclick="fzPickCatGrid(this)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 17a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" /><path d="M15 17a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" /><path d="M5 17h-2v-4m-1 -8h11v12m-4 0h6m4 0h2v-6h-8m0 -5h5l3 5" /><path d="M3 9l4 0" /></svg><span>Transporter bis 7,5&nbsp;t</span></button>
          <button type="button" class="fzcat-card" data-cat="Sattelzüge" onclick="fzPickCatGrid(this)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 17a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" /><path d="M14 17a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" /><path d="M3 14v-6a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v6" /><path d="M3 14h16v-3" /></svg><span>Sattelzüge</span></button>
          <button type="button" class="fzcat-card" data-cat="Auflieger" onclick="fzPickCatGrid(this)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 17a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" /><path d="M16 17a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" /><path d="M4 8h15a1 1 0 0 1 1 1v6h-17v-6a1 1 0 0 1 1 -1z" /><path d="M5 15v3" /></svg><span>Auflieger</span></button>
          <button type="button" class="fzcat-card" data-cat="Busse" onclick="fzPickCatGrid(this)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 17a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" /><path d="M16 17a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" /><path d="M4 17h-2v-11a1 1 0 0 1 1 -1h14a5 7 0 0 1 5 7v5h-2m-4 0h-8" /><path d="M16 5l1.5 7l4.5 0" /><path d="M2 10l15 0" /><path d="M7 5l0 5" /><path d="M12 5l0 5" /></svg><span>Busse</span></button>
          <button type="button" class="fzcat-card" data-cat="Land- & Forstfahrzeuge" onclick="fzPickCatGrid(this)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 15a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" /><path d="M7 15l0 .01" /><path d="M17 17a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" /><path d="M10.5 17l6.5 0" /><path d="M20 15.2v-4.2a1 1 0 0 0 -1 -1h-6l-2 -5h-6v6.5" /><path d="M18 5h-1a1 1 0 0 0 -1 1v4" /></svg><span>Agrar</span></button>
          <button type="button" class="fzcat-card" data-cat="Baufahrzeuge" onclick="fzPickCatGrid(this)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 17a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" /><path d="M11 17a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" /><path d="M13 19l-9 0" /><path d="M4 15l9 0" /><path d="M8 12v-5h2a3 3 0 0 1 3 3v5" /><path d="M5 15v-2a1 1 0 0 1 1 -1h7" /><path d="M21.12 9.88l-3.12 -4.88l-5 5" /><path d="M21.12 9.88a3 3 0 0 1 -2.12 5.12a3 3 0 0 1 -2.12 -.88l4.24 -4.24" /></svg><span>Baumaschinen</span></button>
          <button type="button" class="fzcat-card" data-cat="Gabelstapler" onclick="fzPickCatGrid(this)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 17a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" /><path d="M12 17a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" /><path d="M7 17l5 0" /><path d="M3 17v-6h13v6" /><path d="M5 11v-4h4" /><path d="M9 11v-6h4l3 6" /><path d="M22 15h-3v-10" /><path d="M16 13l3 0" /></svg><span>Stapler</span></button>

    <a href="software.html">IT &amp; Software</a>
    <a href="werkstoffe.html">Werkstoffe</a>
    <a href="maschinen.html">Maschinen</a>
    <a href="fahrzeuge.html" class="on">Fahrzeuge</a>
    <a href="verpackungen.html">Verpackungen</a>
  </div>
  <div class="nav-right">
    <a href="index.html" class="nav-back">
      <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg>
      Startseite
    </a>
    <div id="vcNavAuth"></div>
    <a href="account.html#fahrzeuge" class="nav-cta" id="navCta" onclick="return fzCreateTab(event,'account.html#fahrzeuge')"><span class="cta-prefix">Fahrzeug </span>einreichen</a>
  </div>
        <button type="button" class="fzf-type" data-cat="PKW" onclick="fzSetType(this)" role="tab" aria-selected="false" title="PKW">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 17a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" /><path d="M15 17a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" /><path d="M5 17h-2v-6l2 -5h9l4 5h1a2 2 0 0 1 2 2v4h-2m-4 0h-6m-6 -6h15m-6 0v-5" /></svg>
          <span>PKW</span>
        </button>
        <button type="button" class="fzf-type" data-cat="Motorräder" onclick="fzSetType(this)" role="tab" aria-selected="false" title="Motorräder">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 16a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" /><path d="M16 16a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" /><path d="M7.5 14h5l4 -4h-10.5m1.5 4l4 -4" /><path d="M13 6h2l1.5 3l2 4" /></svg>
          <span>Motorrad</span>
        </button>
        <button type="button" class="fzf-type" data-cat="Fahrräder & E-Bikes" onclick="fzSetType(this)" role="tab" aria-selected="false" title="Fahrräder &amp; E-Bikes">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 18a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" /><path d="M16 18a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" /><path d="M12 19v-4l-3 -3l5 -4l2 3h3" /><path d="M13 5a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" /></svg>
          <span>Fahrrad</span>
        </button>
        <button type="button" class="fzf-type" data-cat="Wohnmobile & Caravans" onclick="fzSetType(this)" role="tab" aria-selected="false" title="Wohnmobile &amp; Caravans">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 18a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" /><path d="M11 18h7a2 2 0 0 0 2 -2v-7a2 2 0 0 0 -2 -2h-9.5a5.5 5.5 0 0 0 -5.5 5.5v3.5a2 2 0 0 0 2 2h2" /><path d="M8 7l7 -3l1 3" /><path d="M13 11.5a.5 .5 0 0 1 .5 -.5h2a.5 .5 0 0 1 .5 .5v2a.5 .5 0 0 1 -.5 .5h-2a.5 .5 0 0 1 -.5 -.5l0 -2" /><path d="M20 16h2" /></svg>
          <span>Caravan</span>
        </button>
        <button type="button" class="fzf-type fzf-morebtn" onclick="fzToggleCatGrid(event)" title="Weitere Fahrzeugarten" aria-label="Weitere Fahrzeugarten" aria-haspopup="true">
          <svg viewBox="0 0 24 24" fill="currentColor"><circle cx="5" cy="12" r="1.7"/><circle cx="12" cy="12" r="1.7"/><circle cx="19" cy="12" r="1.7"/></svg>
          <span>Mehr</span>
        </button>
      </div>

      <div class="fzf-main">
      <!-- Raster „Weitere Fahrzeugarten" (Nutzfahrzeuge mit Netto-Preisangabe) -->
      <div class="fzcat-overlay" id="fzCatGrid" role="dialog" aria-label="Fahrzeugart wählen">
        <div class="fzcat-head"><h3>Fahrzeugart wählen</h3><button type="button" class="fzcat-close" onclick="fzCloseCatGrid()" aria-label="Schließen">&times;</button></div>
        <div class="fzcat-grid">
          <button type="button" class="fzcat-card" data-cat="LKW" onclick="fzPickCatGrid(this)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 17a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" /><path d="M15 17a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" /><path d="M5 17h-2v-11a1 1 0 0 1 1 -1h9v12m-4 0h6m4 0h2v-6h-8m0 -5h5l3 5" /></svg><span>Lkw über 7,5&nbsp;t</span></button>

    <div class="fzh-panel">
    <div class="fzh-panel">
      <div class="fzh-ptitle">Dein Fahrzeug. Eine einfache Suche.</div>
      <div class="fzh-search">
        <svg class="fzh-search-ico" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 11l1.4-4a2 2 0 0 1 1.9-1.4h7.4a2 2 0 0 1 1.9 1.4L19 11"/><path d="M3 16v-3c0-.5.3-.9.8-1L5 11h14l1.2.2c.5.1.8.5.8 1v3a1 1 0 0 1-1 1h-1"/><path d="M6 17H4"/><circle cx="7.5" cy="16.5" r="1.9"/><circle cx="16.5" cy="16.5" r="1.9"/></svg>
        <input type="text" id="fzSearch" placeholder="Kombi mit Panoramadach und Sitzheizung" autocomplete="off" oninput="fzMirror('fzSearch','fzSearch2')">
        <button class="fzh-search-go" onclick="fzAiSubmit()" aria-label="Suchen">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="13 6 19 12 13 18"/></svg>
        </button>
      </div>
    </div>

    <!-- AutoScout-Stil Filterkarte -->
    <div class="fzf">
      <div class="fzf-types" role="tablist" aria-label="Fahrzeugart">
        <button type="button" class="fzf-type" data-cat="PKW" onclick="fzSetType(this)" role="tab" aria-selected="false" title="PKW">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 17a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" /><path d="M15 17a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" /><path d="M5 17h-2v-6l2 -5h9l4 5h1a2 2 0 0 1 2 2v4h-2m-4 0h-6m-6 -6h15m-6 0v-5" /></svg>
          <span>PKW</span>
        </button>
        <button type="button" class="fzf-type" data-cat="Motorräder" onclick="fzSetType(this)" role="tab" aria-selected="false" title="Motorräder">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 16a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" /><path d="M16 16a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" /><path d="M7.5 14h5l4 -4h-10.5m1.5 4l4 -4" /><path d="M13 6h2l1.5 3l2 4" /></svg>
    <section class="fzd-sec" id="fzdBrandsSec">
      <div class="fzd-head"><h2>Beliebte Automarken</h2></div>
      <div class="fzd-brandgrid" id="fzdBrands"></div>
    </section>

    <section class="fzd-sec" id="fzdSearchSec">
      <div class="fzd-head"><h2>Beliebte Suchen auf unserem Fahrzeugmarkt</h2></div>
      <div class="fzd-links" id="fzdSearches"></div>
    </section>
  </div>

  <!-- Mobile-Filterleiste (nur Handy/Tablet) -->
          <select id="sbModell" onchange="filterCards()" disabled><option value="">Alle Modelle</option></select>
        </div>
      </div>

      <div class="rs-field">
        <label>Zahlungsart</label>
        <div class="fzf-seg rs-seg" role="group" aria-label="Zahlungsart">
          <button type="button" class="fzf-seg-btn sb-pay on" data-pay="kaufen" onclick="fzSetPay(this)">Kaufen</button>
          <button type="button" class="fzf-seg-btn sb-pay" data-pay="leasen" onclick="fzSetPay(this)">Leasen</button>
        </div>
      </div>

  <div class="browse-layout">

    <!-- Filter-Sidebar (mobile.de-Stil) -->
    <aside class="filter-sidebar rs-side" id="filterSidebar">
      <div class="fs-drawer-head"><h3>Filter</h3><button class="fs-drawer-close" onclick="closeFilterDrawer()" aria-label="Schließen">×</button></div>

      <button class="rs-more" onclick="rsToggleMore()"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" y1="21" x2="4" y2="14"/><line x1="4" y1="10" x2="4" y2="3"/><line x1="12" y1="21" x2="12" y2="12"/><line x1="12" y1="8" x2="12" y2="3"/><line x1="20" y1="21" x2="20" y2="16"/><line x1="20" y1="12" x2="20" y2="3"/><line x1="1" y1="14" x2="7" y2="14"/><line x1="9" y1="8" x2="15" y2="8"/><line x1="17" y1="16" x2="23" y2="16"/></svg> Weitere Filter</button>

      <div class="rs-grp collapsed" data-modes="car moto camper forklift construction tractor bus trailer transporter truck tractorunit">
        <div class="rs-grp-h" onclick="rsToggleGrp(this)"><div><div class="rs-grp-t">Fahrzeugzustand</div><div class="rs-grp-v" id="rsvCond">Beliebig</div></div><span class="rs-change">ändern</span></div>
        <div class="rs-grp-b">
          <label class="fs-check"><input type="checkbox" class="fs-cond" value="Neu" onchange="filterCards()"> Neu</label>
          <select id="sbEzBis" onchange="filterCards()"><option value="">bis</option><option value="2026">2026</option><option value="2024">2024</option><option value="2022">2022</option><option value="2020">2020</option><option value="2018">2018</option><option value="2016">2016</option><option value="2014">2014</option><option value="2010">2010</option></select>
        </div>
      </div>

      <div class="rs-field fz-motor-only">
        <label>Kilometerstand</label>
        <div class="rs-vb">
          <select id="sbKmVon" onchange="filterCards()"><option value="">von</option><option value="5000">5.000 km</option><option value="10000">10.000 km</option><option value="25000">25.000 km</option><option value="50000">50.000 km</option><option value="100000">100.000 km</option></select>
          <select id="sbKmBis" onchange="filterCards()"><option value="">bis</option><option value="10000">10.000 km</option><option value="25000">25.000 km</option><option value="50000">50.000 km</option><option value="75000">75.000 km</option><option value="100000">100.000 km</option><option value="150000">150.000 km</option><option value="200000">200.000 km</option></select>
        </div>
      </div>

      <button class="rs-go" id="rsGo" onclick="fzScrollResultsTop()"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg> <span id="rsGoCount">Angebote</span></button>

      <div class="rs-grp collapsed" id="rsMore" style="display:none">
        <div class="rs-grp-h" onclick="rsToggleGrp(this)"><div class="rs-grp-t">Ausstattung &amp; mehr</div><span class="rs-change">ändern</span></div>
        <div class="rs-grp-b">
          <label class="fs-check"><input type="checkbox" id="sbElektro" onchange="document.getElementById('fzElektro').checked=this.checked;filterCards()"> Nur Elektroautos</label>
          <label class="fs-check"><input type="checkbox" class="fs-extra" value="versand" onchange="filterCards()"> Versand möglich</label>
          <label class="fs-check"><input type="checkbox" class="fs-extra" value="abholung" onchange="filterCards()"> Abholung möglich</label>
          <label class="fs-check"><input type="checkbox" class="fs-extra" value="garantie" onchange="filterCards()"> Mit Garantie</label>
        </div>
      </div>

      <div class="rs-grp collapsed">
        <div class="rs-grp-h" onclick="rsToggleGrp(this)"><div><div class="rs-grp-t">Standort</div><div class="rs-grp-v" id="rsvOrt">Beliebig</div></div><span class="rs-change">ändern</span></div>
        <div class="rs-grp-b">
          <div class="fzf-ort-in rs-ortin"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 12-9 12s-9-5-9-12a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg><input type="text" id="sbOrt" placeholder="Ort oder PLZ" oninput="filterCards()" onkeydown="if(event.key==='Enter')filterCards()"></div>
        </div>
      </div>

      <div class="rs-field fz-bike-only" style="display:none">
        <label>Gewicht (kg)</label>
        <div class="rs-vb">
          <select id="sbGewichtVon" onchange="filterCards()"><option value="">von</option><option value="8">8 kg</option><option value="10">10 kg</option><option value="12">12 kg</option><option value="15">15 kg</option><option value="20">20 kg</option><option value="25">25 kg</option></select>
          <select id="sbGewichtBis" onchange="filterCards()"><option value="">bis</option><option value="10">10 kg</option><option value="12">12 kg</option><option value="15">15 kg</option><option value="20">20 kg</option><option value="25">25 kg</option><option value="35">35 kg</option></select>
        </div>
      </div>

      <div class="rs-field fz-bike-only" style="display:none">
        </div>
      </div>

      <div class="rs-field" data-modes="car moto camper bus trailer transporter truck tractorunit">
            </select>
          </div>
          <div class="fzf-cell fzf-ort">
            <label>Ort oder PLZ</label>
            <div class="fzf-ort-in">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 12-9 12s-9-5-9-12a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
              <input type="text" id="fzOrt" placeholder="Ort oder PLZ" oninput="fzMirror('fzOrt','sbOrt')" onkeydown="if(event.key==='Enter')fzSubmitSearch()">
            </div>
          </div>
          <button class="fzf-go" id="fzGo" onclick="fzSubmitSearch()">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
            <span id="fzGoCount">Angebote</span>
          </button>
        </div>

      <div class="fzd-head"><h2>Beliebte Automarken &amp; mehr auf unserem Fahrzeugmarkt</h2></div>
      <div class="fzd-links" id="fzdSearches"></div>
    </section>

    <section class="fzd-sec fzd-about">
      <h2>Fahrzeuge kaufen &amp; verkaufen auf Vermittco</h2>
            <input id="sbModellInput" class="fzmodell" type="text" list="sbModellList" placeholder="Modell eingeben …" oninput="fzModellInputChanged('sb')" onkeydown="if(event.key==='Enter')filterCards()">
            <button type="button" class="fzmodell-arrow" onclick="fzModellArrow('sb')" aria-label="Modell wieder auswählen" tabindex="-1"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg></button>
          </span>
          <datalist id="sbModellList"></datalist>
        </div>
      </div>

      <div class="rs-field" data-modes="forklift construction tractor bus trailer transporter truck tractorunit">
        <label>Preisangabe</label>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="main fz-discover">

  <!-- ═══ Entdecken-Landing (vor der Suche) — echte Daten ═══ -->
  <div id="fzDiscover">
    <div id="fzdEmpty" class="fzd-empty-state" style="display:none">Aktuell sind keine Fahrzeuge eingestellt. <a href="account.html#fahrzeuge" onclick="return fzCreateTab(event,'account.html#fahrzeuge')">Inseriere dein Fahrzeug</a> und sei der/die Erste.</div>

    <section class="fzd-sec" id="fzdDealsSec">
      <div class="fzd-head"><h2>Top <span class="fzd-deals-pill">DEALS</span> für dich</h2><button class="fzd-all" onclick="fzShowAll()">Alle anzeigen</button></div>
      <div class="fzd-carousel" id="fzdDeals"></div>
    </section>

    <section class="fzd-sec" id="fzdCatsSec">
      <div class="fzd-head"><h2>Ausgewählte Kategorien</h2></div>
      <div class="fzd-cats" id="fzdCats"></div>
    </section>

    <section class="fzd-sec" id="fzdPresetsSec">
      <div class="fzd-head"><h2>Beliebte Kategorien</h2></div>
      <div class="fzd-carousel fzd-presets" id="fzdPresets"></div>
    </section>

    <section class="fzd-sec" id="fzdTypesSec">
      <div class="fzd-head"><h2>Fahrzeugtypen</h2></div>
      <div class="fzd-carousel fzd-tiles" id="fzdTypes"></div>
          <select id="sbGgwVon" onchange="filterCards()"><option value="">von</option><option value="2800">2.800 kg</option><option value="3500">3.500 kg</option><option value="5000">5.000 kg</option><option value="7500">7.500 kg</option></select>
          <select id="sbGgwBis" onchange="filterCards()"><option value="">bis</option><option value="3500">3.500 kg</option><option value="5000">5.000 kg</option><option value="7500">7.500 kg</option><option value="12000">12.000 kg</option></select>
        </div>
      </div>

      <div class="rs-grp collapsed">
        <div class="rs-grp-h" onclick="rsToggleGrp(this)"><div><div class="rs-grp-t">Außenfarbe</div><div class="rs-grp-v">Beliebig</div></div><span class="rs-change">ändern</span></div>
        <div class="rs-grp-b">
          <div class="fz-colorgrid" id="sbColors"></div>
          <label class="fs-check"><input type="checkbox" class="fz-finish" value="matt" onchange="filterCards()"> Matt</label>
          <label class="fs-check"><input type="checkbox" class="fz-finish" value="metallic" onchange="filterCards()"> Metallic</label>
        </div>
      </div>

      <div class="rs-field fz-no-camper">
        <label>Qualitätssiegel</label>
        <label class="fs-check"><input type="checkbox" id="sbQuali" onchange="filterCards()"> Inserate mit Qualitätssiegel</label>
      </div>

      <div class="rs-grp collapsed fz-car-only">
        <div class="rs-grp-h" onclick="rsToggleGrp(this)"><div><div class="rs-grp-t">Klimatisierung</div><div class="rs-grp-v">Beliebig</div></div><span class="rs-change">ändern</span></div>
        <div class="rs-grp-b">
          <label class="fs-check"><input type="radio" name="fzClima" class="fz-clima-r" value="" checked onchange="filterCards()"> Beliebig</label>
          <label class="fs-check"><input type="radio" name="fzClima" class="fz-clima-r" value="keine" onchange="filterCards()"> Keine Klimaanlage/-automatik</label>
          <label class="fs-check"><input type="radio" name="fzClima" class="fz-clima-r" value="any" onchange="filterCards()"> Klimaanlage oder Klimaautomatik</label>
          <label class="fs-check"><input type="radio" name="fzClima" class="fz-clima-r" value="auto" onchange="filterCards()"> Klimaautomatik</label>
        </div>
      </div>

      <div class="rs-grp collapsed fz-moto-only" style="display:none">
        <div class="rs-grp-h" onclick="rsToggleGrp(this)"><div><div class="rs-grp-t">Antriebsart</div><div class="rs-grp-v">Beliebig</div></div><span class="rs-change">ändern</span></div>
        <div class="rs-grp-b">
          <label class="fs-check"><input type="checkbox" class="fz-antrieb" value="Kardan" onchange="filterCards()"> Kardan</label>
          <label class="fs-check"><input type="checkbox" class="fz-antrieb" value="Kette" onchange="filterCards()"> Kette</label>
          <label class="fs-check"><input type="checkbox" class="fz-antrieb" value="Riemen" onchange="filterCards()"> Riemen</label>
        </div>
      </div>

      <div class="rs-grp collapsed fz-motor-only">
        <div class="rs-grp-h" onclick="rsToggleGrp(this)"><div><div class="rs-grp-t">Ausstattung</div><div class="rs-grp-v">Beliebig</div></div><span class="rs-change">ändern</span></div>
    <button class="ss-opt" data-val="price-desc" onclick="applySort(this)"><span>Preis absteigend</span><svg class="ss-tick" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg></button>
  </div>

  <div class="filter-overlay" id="filterOverlay" onclick="closeFilterDrawer()"></div>

  <!-- Ergebnis-Breadcrumb + Aktionen -->
  <div class="rs-crumbbar">
    <nav class="rs-crumb"><a href="index.html">Startseite</a><span>›</span><span>Meine Fahrzeug-Suche</span><span>›</span><strong id="rsCrumbCount">Angebote</strong></nav>
    <button class="rs-reset" onclick="resetFilters()"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="1 4 1 10 7 10"/><path d="M3.5 15a9 9 0 1 0 2.1-9.4L1 10"/></svg> Filter zurücksetzen</button>
  </div>

  <div class="browse-layout">

    <!-- Filter-Sidebar (mobile.de-Stil) -->
    <aside class="filter-sidebar rs-side" id="filterSidebar">
      <div class="fs-drawer-head"><h3>Filter</h3><button class="fs-drawer-close" onclick="closeFilterDrawer()" aria-label="Schließen">×</button></div>

      <button class="rs-more" onclick="rsToggleMore()"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" y1="21" x2="4" y2="14"/><line x1="4" y1="10" x2="4" y2="3"/><line x1="12" y1="21" x2="12" y2="12"/><line x1="12" y1="8" x2="12" y2="3"/><line x1="20" y1="21" x2="20" y2="16"/><line x1="20" y1="12" x2="20" y2="3"/><line x1="1" y1="14" x2="7" y2="14"/><line x1="9" y1="8" x2="15" y2="8"/><line x1="17" y1="16" x2="23" y2="16"/></svg> Weitere Filter</button>

      <div class="rs-grp collapsed" data-modes="car moto camper forklift construction tractor bus trailer transporter truck tractorunit">
        <div class="rs-grp-h" onclick="rsToggleGrp(this)"><div><div class="rs-grp-t">Fahrzeugzustand</div><div class="rs-grp-v" id="rsvCond">Beliebig</div></div><span class="rs-change">ändern</span></div>
        <div class="rs-grp-b">
          <label class="fs-check"><input type="checkbox" class="fs-cond" value="Neu" onchange="filterCards()"> Neu</label>
          <label class="fs-check"><input type="checkbox" class="fs-cond" value="Gebraucht" onchange="filterCards()"> Gebraucht</label>
          <label class="fs-check"><input type="checkbox" class="fs-cond" value="Vorführwagen" onchange="filterCards()"> Vorführwagen</label>
          <label class="fs-check"><input type="checkbox" class="fs-cond" value="Generalüberholt" onchange="filterCards()"> Generalüberholt</label>
        </div>
      </div>

      <div class="rs-grp collapsed">
        <div class="rs-grp-h" onclick="rsToggleGrp(this)"><div><div class="rs-grp-t">Marke, Modell, Variante</div><div class="rs-grp-v" id="rsvMarke">Beliebig</div></div><span class="rs-change">ändern</span></div>
        <div class="rs-grp-b">
          <select id="sbMarke" onchange="sbMarkeChanged()"><option value="">Alle Marken</option></select>
          <select id="sbModell" onchange="fzModellSelChanged('sb')" disabled><option value="">Alle Modelle</option></select>
          <span class="fzmodell-wrap" id="sbModellWrap" style="display:none">
            <input id="sbModellInput" class="fzmodell" type="text" list="sbModellList" placeholder="Modell eingeben …" oninput="fzModellInputChanged('sb')" onkeydown="if(event.key==='Enter')filterCards()">
            <button type="button" class="fzmodell-arrow" onclick="fzModellArrow('sb')" aria-label="Modell wieder auswählen" tabindex="-1"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg></button>
          </span>
          <datalist id="sbModellList"></datalist>
          <input id="sbModellvariante" class="rs-textin" type="text" placeholder="Modellvariante (z. B. GTI) …" oninput="filterCards()" onkeydown="if(event.key==='Enter')filterCards()">
        </div>
      </div>

      <div class="rs-field" data-modes="car camper bus transporter truck tractorunit">
        <label>HU/TÜV mind. gültig</label>
        <div class="rs-vb"><select id="sbHuTuev" onchange="filterCards()" style="grid-column:1/-1"><option value="">Beliebig</option><option value="24">HU/AU neu (24 Monate)</option><option value="12">mind. 12 Monate</option><option value="6">mind. 6 Monate</option></select></div>
      </div>

      <div class="rs-field" data-modes="forklift construction tractor bus trailer transporter truck tractorunit">
        <label>Preisangabe</label>

      <div class="rs-grp collapsed">
        <div class="rs-grp-h" onclick="rsToggleGrp(this)"><div><div class="rs-grp-t">Anbieter</div><div class="rs-grp-v">Beliebig</div></div><span class="rs-change">ändern</span></div>
        <div class="rs-grp-b">
          <label class="fs-check"><input type="radio" name="fzAnbieter" class="fz-anbieter" value="" checked onchange="filterCards()"> Beliebig</label>
          <label class="fs-check"><input type="radio" name="fzAnbieter" class="fz-anbieter" value="Händler" onchange="filterCards()"> Händler</label>
          <label class="fs-check"><input type="radio" name="fzAnbieter" class="fz-anbieter" value="Privatanbieter" onchange="filterCards()"> Privatanbieter</label>
          <label class="fs-check"><input type="radio" name="fzAnbieter" class="fz-anbieter" value="Firmenfahrzeug" onchange="filterCards()"> Firmenfahrzeuge</label>
        </div>
      </div>

      <div class="rs-grp collapsed">
        <div class="rs-grp-h" onclick="rsToggleGrp(this)"><div><div class="rs-grp-t">Bewertung</div><div class="rs-grp-v">Beliebig</div></div><span class="rs-change">ändern</span></div>
        <div class="rs-grp-b">
          <label class="fs-check"><input type="radio" name="fzRating" class="fz-rating" value="" checked onchange="filterCards()"> Beliebig</label>
      <div class="rs-grp collapsed" data-modes="bus transporter truck tractorunit" style="display:none">
        <div class="rs-grp-h" onclick="rsToggleGrp(this)"><div><div class="rs-grp-t">Schadstoffklasse</div><div class="rs-grp-v">Beliebig</div></div><span class="rs-change">ändern</span></div>
        <div class="rs-grp-b" id="sbSchad"></div>
      </div>

      <div class="rs-field" data-modes="bus" style="display:none">
        <label>Anzahl Sitzplätze</label>
        <div class="rs-vb">
          <select id="sbSitzVon" onchange="filterCards()"><option value="">von</option><option value="8">8</option><option value="20">20</option><option value="30">30</option><option value="40">40</option><option value="50">50</option></select>
          <select id="sbSitzBis" onchange="filterCards()"><option value="">bis</option><option value="20">20</option><option value="30">30</option><option value="40">40</option><option value="50">50</option><option value="60">60</option></select>
        </div>
      </div>

      <div class="rs-grp collapsed" data-modes="car moto bike camper bus transporter truck tractorunit">
        <div class="rs-grp-h" onclick="rsToggleGrp(this)"><div><div class="rs-grp-t">Außenfarbe</div><div class="rs-grp-v">Beliebig</div></div><span class="rs-change">ändern</span></div>
        <div class="rs-grp-b">
          <button class="rs-search-go" onclick="filterCards()" aria-label="Suchen"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="13 6 19 12 13 18"/></svg></button>
        </div>
        <div class="rs-sortrow">
          <span class="rs-sortlbl">Sortieren nach</span>
          <select class="sec-sort rs-sort" onchange="sortCards(this.value)">
            <option value="rated">Standard-Sortierung</option>
            <option value="newest">Neueste zuerst</option>
            <option value="price-asc">Preis aufsteigend</option>
            <option value="price-desc">Preis absteigend</option>
            <option value="viewed">Beliebteste</option>
          </select>
        </div>
      </div>

      <!-- Ergebnisliste — gerendert von JS -->
      <div class="rs-list" id="listingGrid"></div>
    var isNew = item.created_at && (Date.now()-new Date(item.created_at).getTime()) < 3*864e5;
    // Ausstattungs-Häkchen (echte Bool-Felder)
    var labelRow = (window.vcRating && rScore != null) ? vcRating.labelHTML(rScore) : '';
    var scoreRow = (window.vcRating && rScore != null) ? '<span class="card-score">'+vcRating.badgeHTML(rScore,{compact:true})+'</span>' : '';
    var ratingRow = (starsRow || labelRow || scoreRow) ? '<div class="card-rating">'+starsRow+labelRow+scoreRow+'</div>' : '';
    var locHTML = (item.company)
      ? '<a class="card-loc" href="https://www.google.com/search?q='+encodeURIComponent(item.company)+'" target="_blank" rel="noopener" onclick="event.stopPropagation()"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 21h18M6 21V8l6-4 6 4v13"/><path d="M10 12h4M10 16h4"/></svg>'+_e(item.company)+'</a>'
      : '<div class="card-loc"></div>';
    var railHTML = '<div class="card-rail">'
      + ((window.vcRating && rScore != null) ? '<div class="card-rail-rate">'+vcRating.labelHTML(rScore)+vcRating.badgeHTML(rScore,{compact:true})+'</div>' : '')
      + ((item._views24 > 0) ? '<div class="card-views24"><span class="cv-num"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z"/><circle cx="12" cy="12" r="3"/></svg>'+item._views24+'</span><span class="cv-lbl">in den letzten 24 Stunden angeschaut</span></div>' : '')
      + '<button class="card-anfragen" onclick="event.stopPropagation();_railCta(\''+item.id+'\')">'+(((item.details&&item.details.inquiry&&item.details.inquiry.mode==='url'&&item.details.inquiry.value))?'Zur Webseite':'Anfragen')+'</button>'
      + '</div>';
    var viewsPill = (window.vcRating && vcRating.viewsHTML) ? vcRating.viewsHTML(item._views24) : '';
    var isNew    = item.created_at && (Date.now() - new Date(item.created_at).getTime()) < 3*864e5;
    var badge    = isNew ? '<span class="card-badge badge-neu">Neu</span>' : '';
    var delBtn   = vcIsAdmin
      ? '<button class="admin-del-btn" title="Produkt löschen" onclick="event.stopPropagation();deleteListing(\''+item.id+'\')">×</button>'
      : '';
    var cardImgInner = coverImg ? '<img src="'+coverImg+'" loading="lazy"/>' : catIcon(cat);
    var cardImgClass = coverImg ? 'card-img' : 'card-img '+bgCls;

    var zustand = item.condition || dt.functional || '';
    var specs = '';
    if (zustand)    specs += '<span class="spec"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="9 12 11 14 15 10"/></svg>'+_e(zustand)+'</span>';
    if (item.brand) specs += '<span class="spec"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20.59 13.41l-7.17 7.17a2 2 0 01-2.83 0L2 12V2h10l8.59 8.59a2 2 0 010 2.82z"/><line x1="7" y1="7" x2="7.01" y2="7"/></svg>'+_e(item.brand)+'</span>';
function _fzRateHTML(item){
  var pr=_fzPriceRating(item); if(!pr) return '';
  var bars=''; for(var i=1;i<=5;i++){ bars+='<i'+(i<=pr.n?' class="on"':'')+'></i>'; }
  return '<span class="rcard-prate '+pr.cls+'" title="im Vergleich zu ähnlichen Angeboten auf Vermittco">'+bars+'<b>'+pr.label+'</b></span>';
}
function _rcLogo(item){
        + '<div class="card-tl">' + badge + viewsPill + '</div>'
        + delBtn
      + '</div>'
      + '<div class="card-body">'
        + '<button class="card-fav'+(typeof vcIsFav==="function"&&vcIsFav("fz",item.id)?" on":"")+'" title="Merken" onclick="event.stopPropagation();toggleFav(this,\''+item.id+'\')"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"/></svg></button>'
        + '<div class="card-title">'+_e(item.title||'')+'</div>'
        + ratingRow
        + locHTML
        + (item.description ? '<div class="card-desc">'+_e(item.description)+'</div>' : '')
        + '<div class="card-price">'+formatPrice(item.price)+'</div>'
        + '<div class="card-specs">'+specs+'</div>'
        + '<button class="card-cta" onclick="event.stopPropagation();openListingDetail(\''+item.id+'\')">Details ansehen <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="9 18 15 12 9 6"/></svg></button>'
        + railHTML
      + '</div></div>';
  });

  grid.innerHTML = html;
        </div>
        <div class="rs-grp-h" onclick="rsToggleGrp(this)"><div><div class="rs-grp-t">Wartung &amp; Zustand</div><div class="rs-grp-v">Beliebig</div></div><span class="rs-change">ändern</span></div>
        <div class="rs-grp-b">
          <label class="fs-check"><input type="checkbox" class="fz-wartung" value="unfallfrei" onchange="filterCards()"> Unfallfrei</label>
          <label class="fs-check"><input type="checkbox" class="fz-wartung" value="serviceheft" onchange="filterCards()"> Scheckheftgepflegt</label>
          <label class="fs-check"><input type="checkbox" class="fz-wartung" value="nichtraucher" onchange="filterCards()"> Nichtraucher-Fahrzeug</label>
          <div class="fz-colorgrid" id="sbColors"></div>
          <label class="fs-check"><input type="checkbox" class="fz-finish" value="matt" onchange="filterCards()"> Matt</label>
          <label class="fs-check"><input type="checkbox" class="fz-finish" value="metallic" onchange="filterCards()"> Metallic</label>
        </div>
      </div>

      <div class="rs-field" data-modes="car moto transporter">
        <label>Qualitätssiegel</label>
        <label class="fs-check"><input type="checkbox" id="sbQuali" onchange="filterCards()"> Inserate mit Qualitätssiegel</label>
      </div>

      <div class="rs-grp collapsed" data-modes="car tractor bus transporter truck tractorunit">
        <div class="rs-grp-h" onclick="rsToggleGrp(this)"><div><div class="rs-grp-t">Klimatisierung</div><div class="rs-grp-v">Beliebig</div></div><span class="rs-change">ändern</span></div>
        <div class="rs-grp-b">
          <label class="fs-check"><input type="radio" name="fzClima" class="fz-clima-r" value="" checked onchange="filterCards()"> Beliebig</label>
          <label class="fs-check"><input type="radio" name="fzClima" class="fz-clima-r" value="keine" onchange="filterCards()"> Keine Klimaanlage/-automatik</label>
          <label class="fs-check"><input type="radio" name="fzClima" class="fz-clima-r" value="any" onchange="filterCards()"> Klimaanlage oder Klimaautomatik</label>
          <label class="fs-check"><input type="radio" name="fzClima" class="fz-clima-r" value="auto" onchange="filterCards()"> Klimaautomatik</label>
        </div>
      </div>

      <div class="rs-grp collapsed" data-modes="transporter truck tractorunit" style="display:none">
        <div class="rs-grp-h" onclick="rsToggleGrp(this)"><div><div class="rs-grp-t">Fahrerhaus</div><div class="rs-grp-v">Beliebig</div></div><span class="rs-change">ändern</span></div>
        <div class="rs-grp-b" id="sbFahrerhaus"></div>
      </div>

      <div class="rs-grp collapsed" data-modes="moto" style="display:none">
        <div class="rs-grp-h" onclick="rsToggleGrp(this)"><div><div class="rs-grp-t">Antriebsart</div><div class="rs-grp-v">Beliebig</div></div><span class="rs-change">ändern</span></div>
        <div class="rs-grp-b">
          <label class="fs-check"><input type="checkbox" class="fz-antrieb" value="Kardan" onchange="filterCards()"> Kardan</label>
          <label class="fs-check"><input type="checkbox" class="fz-antrieb" value="Kette" onchange="filterCards()"> Kette</label>
          <label class="fs-check"><input type="checkbox" class="fz-antrieb" value="Riemen" onchange="filterCards()"> Riemen</label>
        </div>
      </div>

      <div class="rs-grp collapsed" data-modes="car moto camper forklift bus trailer transporter truck tractorunit">
        <div class="rs-grp-h" onclick="rsToggleGrp(this)"><div><div class="rs-grp-t">Ausstattung</div><div class="rs-grp-v">Beliebig</div></div><span class="rs-change">ändern</span></div>
        <div class="rs-grp-b">
          <div class="fz-equiplist" id="sbEquip"></div>
  modsel.disabled = !marke || !mods.length;
  if(cur && mods.indexOf(cur)>-1) modsel.value=cur;
}
function fzMarkeChanged(){ fzFillModelle(); filterCards(); }
function fzSetType(btn){
  document.querySelectorAll('.fzf-type').forEach(function(b){ var on=(b===btn); b.classList.toggle('on',on); b.setAttribute('aria-selected', on?'true':'false'); });
  _fzCat = btn.getAttribute('data-cat')||'';
      <div class="rs-head">
        <div class="rs-count" id="countLabel">Lade …</div>
        <div class="rs-search">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
          <input type="text" id="fzSearch2" placeholder="z. B. Einparkhilfe, Panoramadach …" oninput="filterCards()" onkeydown="if(event.key==='Enter')filterCards()">
          <button class="rs-search-go" onclick="filterCards()" aria-label="Suchen"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="13 6 19 12 13 18"/></svg></button>
        </div>
        <div class="rs-sortrow">
  if(window.matchMedia('(max-width:780px)').matches){ openFilterDrawer(); }
  else { var sb=document.getElementById('filterSidebar'); if(sb) sb.scrollIntoView({behavior:'smooth',block:'start'}); }
}
function fzUpdateGoCount(n){
  if(typeof n!=='number') n=(typeof listings!=='undefined' && listings)?listings.length:0;
  var t=document.getElementById('fzGoCount');
  if(t) t.textContent = n.toLocaleString('de-DE')+' '+(n===1?'Angebot':'Angebote');
}

function filterCards() {
  updateCatCounts();
  updateFilterBadge();
  function val(id){ var e=document.getElementById(id); return e ? e.value : ''; }
  function num(id){ var v=val(id); return v ? parseFloat(v) : 0; }
  var qraw  = (val('fzSearch')||'').toLowerCase();
  var qWords = qraw.split(/[\s,]+/).filter(function(w){ return w.length>1 && !_FZ_STOP[w]; });
  var katVal = _fzCat;
  var checkedCats  = [].slice.call(document.querySelectorAll('.fs-cat:checked')).map(function(c){ return c.value; });
  var checkedConds = [].slice.call(document.querySelectorAll('.fs-cond:checked')).map(function(c){ return c.value; });
  var checkedExtra = [].slice.call(document.querySelectorAll('.fs-extra:checked')).map(function(c){ return c.value; });
  var marke = val('fzMarke'), modell = val('fzModell');
  var ezAb = num('fzEzAb'), kmBis = num('fzKmBis');
  var preisBis = num('fzPreisBis'), pMin = num('fPriceMin'), pMax = num('fPriceMax');
  var ort = (val('fzOrt')||'').toLowerCase().trim();
  var elektroEl = document.getElementById('fzElektro');
  var elektro = elektroEl && elektroEl.checked;

  var filtered = listings.filter(function(item) {
    var d = _fzDet(item);
    var price = Number(item.price)||0;
    var cond = item.condition || d.zustand || '';
    var blob = [item.title,item.company,item.cat,item.description,d.marke,d.modell,d.baureihe,d.fahrzeugtyp,d.fahrzeugkategorie,d.kraftstoff,d.getriebe,d.farbeaussen].join(' ').toLowerCase() + ' ' + fzEquipText(d);
    var matchQ = !qWords.length || qWords.every(function(w){ return blob.indexOf(w)>-1; });
    var matchKat = (!katVal || item.cat===katVal) && (checkedCats.length===0 || checkedCats.indexOf(item.cat)>-1);
    var matchMarke  = !marke  || String(d.marke||'')===marke;
    var matchModell = !modell || String(d.modell||'')===modell;
    var ez = _fzYear(d.erstzulassung); if(isNaN(ez)) ez=_fzYear(d.baujahr);

      <div class="rs-grp collapsed">
        <div class="rs-grp-h" onclick="rsToggleGrp(this)"><div><div class="rs-grp-t">Anbieter</div><div class="rs-grp-v">Beliebig</div></div><span class="rs-change">ändern</span></div>
        <div class="rs-grp-b">
          <label class="fs-check"><input type="radio" name="fzAnbieter" class="fz-anbieter" value="" checked onchange="filterCards()"> Beliebig</label>
          <label class="fs-check"><input type="radio" name="fzAnbieter" class="fz-anbieter" value="Händler" onchange="filterCards()"> Händler</label>
          <label class="fs-check"><input type="radio" name="fzAnbieter" class="fz-anbieter" value="Privatanbieter" onchange="filterCards()"> Privatanbieter</label>
          <label class="fs-check"><input type="radio" name="fzAnbieter" class="fz-anbieter" value="Firmenfahrzeug" onchange="filterCards()"> Firmenfahrzeuge</label>
        </div>
      </div>

      <div class="rs-grp collapsed">
        <div class="rs-grp-h" onclick="rsToggleGrp(this)"><div><div class="rs-grp-t">Bewertung</div><div class="rs-grp-v">Beliebig</div></div><span class="rs-change">ändern</span></div>
        <div class="rs-grp-h" onclick="rsToggleGrp(this)"><div><div class="rs-grp-t">Farbe Innenausstattung</div><div class="rs-grp-v">Beliebig</div></div><span class="rs-change">ändern</span></div>
        <div class="rs-grp-b">
          <label class="fs-check"><input type="checkbox" class="fz-farbinnen" value="Beige" onchange="filterCards()"> Beige</label>
          <label class="fs-check"><input type="checkbox" class="fz-farbinnen" value="Schwarz" onchange="filterCards()"> Schwarz</label>
          <label class="fs-check"><input type="checkbox" class="fz-farbinnen" value="Blau" onchange="filterCards()"> Blau</label>
          <label class="fs-check"><input type="checkbox" class="fz-farbinnen" value="Braun" onchange="filterCards()"> Braun</label>
          <label class="fs-check"><input type="checkbox" class="fz-farbinnen" value="Grau" onchange="filterCards()"> Grau</label>
          <label class="fs-check"><input type="checkbox" class="fz-farbinnen" value="Rot" onchange="filterCards()"> Rot</label>
        </div>
      </div>

    <!-- Inhalt -->
    <div class="browse-content">
      <div class="rs-head">
        <div class="rs-count" id="countLabel">Lade …</div>
        <div class="rs-search">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
          <input type="text" id="fzSearch2" placeholder="z. B. Einparkhilfe, Panoramadach …" oninput="filterCards()" onkeydown="if(event.key==='Enter')filterCards()">
          <button class="rs-search-go" onclick="filterCards()" aria-label="Suchen"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="13 6 19 12 13 18"/></svg></button>
        </div>
        <div class="rs-sortrow">
          <span class="rs-sortlbl">Sortieren nach</span>
  main.classList.toggle('fz-results', active);
  main.classList.toggle('fz-discover', !active);
}
function fzScrollResults(){
  var r=document.querySelector('.browse-layout');
  if(r){ var y=r.getBoundingClientRect().top + window.pageYOffset - 70; window.scrollTo({top:Math.max(0,y),behavior:'smooth'}); }
}
function fzSubmitSearch(){ _fzForceResults=true; filterCards(); fzScrollResults(); }
function fzShowAll(){ _fzClear(); _fzForceResults=true; filterCards(); fzScrollResults(); }

// alle Filter zurücksetzen (ohne Render)
function _fzClear(){
  var s=document.getElementById('fzSearch'); if(s) s.value='';
  var o=document.getElementById('fzOrt');    if(o) o.value='';
  ['fzMarke','fzModell','fzEzAb','fzKmBis','fzPreisBis','fPriceMin','fPriceMax'].forEach(function(id){ var e=document.getElementById(id); if(e) e.value=''; });
  fzFillModelle();
  _fzCat=''; _fzPay='kaufen'; _fzForceResults=false;
  document.querySelectorAll('.fzf-type').forEach(function(b){ var on=((b.getAttribute('data-cat')||'')===''); b.classList.toggle('on',on); b.setAttribute('aria-selected', on?'true':'false'); });
  document.querySelectorAll('.fzf-seg-btn').forEach(function(b){ b.classList.toggle('on', (b.getAttribute('data-pay')||'')==='kaufen'); });
  var ek=document.getElementById('fzElektro'); if(ek) ek.checked=false;
  document.querySelectorAll('.fs-cat, .fs-cond, .fs-extra').forEach(function(c){ c.checked=false; });
}

// Filter zurücksetzen -> zurück zur Entdecken-Landing
function resetFilters() {
  _fzClear();
  filterCards();
  window.scrollTo({top:0,behavior:'smooth'});
}

/* ─── Shortcuts aus der Entdecken-Landing ─── */
function fzPickTypeIdx(i){
  var t=(window._fzDiscTypes||[])[i]; if(t==null) return;
  _fzClear(); var s=document.getElementById('fzSearch'); if(s) s.value=t;
  filterCards(); fzScrollResults();
}
function fzPickBrandIdx(i){
  var m=(window._fzDiscBrands||[])[i]; if(m==null) return;
  _fzClear(); var sel=document.getElementById('fzMarke'); if(sel){ sel.value=m; fzFillModelle(); }
  filterCards(); fzScrollResults();
}
function fzPickCat(key){
  _fzClear();
  if(key==='elektro'){ var e=document.getElementById('fzElektro'); if(e) e.checked=true; }
  else if(key==='leasing'){ _fzPay='leasen'; document.querySelectorAll('.fzf-seg-btn').forEach(function(b){ b.classList.toggle('on',(b.getAttribute('data-pay')||'')==='leasen'); }); }
  else if(key==='neuwagen'){ var cn=document.querySelector('.fs-cond[value="Neu"]'); if(cn) cn.checked=true; }
  else if(key==='gebraucht'){ var cg=document.querySelector('.fs-cond[value="Gebraucht"]'); if(cg) cg.checked=true; }
  else if(key==='guenstig'){ var p=document.getElementById('fzPreisBis'); if(p) p.value='10000'; }
  filterCards(); fzScrollResults();
}

/* ─── Entdecken-Landing aus echten Daten rendern ─── */
function _fzChip(ic,txt){





























          + '</div>'
        + '</div>'
      + '</div></div>';
  });

  grid.innerHTML = html;
  var n=displayList.length;
  setCount(n.toLocaleString('de-DE') + ' ' + (n!==1 ? 'Angebote' : 'Angebot'));
}

/* ─── Filter & Sort ──────────────────────────────────────── */
// Kategorie-Zähler für Sidebar
function updateCatCounts() {
  var counts = {};
  listings.forEach(function(it){ var c = it.cat || 'Sonstiges'; counts[c] = (counts[c]||0)+1; });
  document.querySelectorAll('.fs-cat').forEach(function(c){
    var lbl = c.parentNode.querySelector('.fs-count');
    if (lbl) lbl.textContent = counts[c.value] || 0;
  });
}

/* ─── AutoScout-Stil Hero-Filter ─── */
var _fzCat = '', _fzPay = 'kaufen', _fzForceResults = false;
function _fzDet(it){ return (it && it.details) || {}; }
function _fzBool(v){ return v===true || v===1 || /^(ja|true|1|yes|x)$/i.test(String(v==null?'':v).trim()); }
function _fzNum(s){ if(s==null) return NaN; var m=String(s).replace(/[.\s]/g,'').match(/\d+/); return m?parseInt(m[0],10):NaN; }
function _fzYear(s){ if(s==null) return NaN; var m=String(s).match(/(19|20)\d{2}/); return m?parseInt(m[0],10):NaN; }
var _FZ_STOP={mit:1,und:1,oder:1,der:1,die:1,das:1,den:1,dem:1,ein:1,eine:1,einem:1,einen:1,einer:1,bei:1,'für':1,fuer:1,von:1,im:1,in:1,am:1,zu:1,'&':1,'+':1,'-':1};
var _FZ_EQUIP={sitzheizung:'sitzheizung',panoramadach:'panoramadach panorama',schiebedach:'schiebedach',navi:'navigation navi navigationssystem',klimaanlage:'klimaanlage klima',klimaautomatik:'klimaautomatik klima',ledersitze:'leder ledersitze',tempomat:'tempomat',abstandstempomat:'abstandstempomat acc',rueckfahrkamera:'rückfahrkamera rueckfahrkamera kamera',kamera360:'360 kamera rundumsicht',einparkhilfe:'einparkhilfe pdc',carplay:'apple carplay',androidauto:'android auto',bluetooth:'bluetooth',anhaengerkupplung:'anhängerkupplung ahk',allwetterreifen:'allwetterreifen ganzjahresreifen',winterreifen:'winterreifen',sommerreifen:'sommerreifen'};
function fzEquipText(d){ var s=''; for(var k in _FZ_EQUIP){ if(_fzBool(d[k])) s+=' '+_FZ_EQUIP[k]; } return s; }

// Marken-/Modell-Dropdowns aus den vorhandenen Inseraten aufbauen
function fzBuildBrands(){
  var brands={};
  listings.forEach(function(it){
    var d=_fzDet(it), m=String(d.marke||'').trim();
    if(!m) return;
    if(!brands[m]) brands[m]=[];
    var mo=String(d.modell||'').trim();
    if(mo && brands[m].indexOf(mo)<0) brands[m].push(mo);
  });
  window._fzBrands=brands;
  var keys=Object.keys(brands).sort(function(a,b){ return a.localeCompare(b,'de'); });
  var opts='<option value="">Alle Marken</option>'+keys.map(function(k){ return '<option value="'+_e(k)+'">'+_e(k)+'</option>'; }).join('');
  ['fzMarke','sbMarke'].forEach(function(id){ var s=document.getElementById(id); if(s){ var cur=s.value; s.innerHTML=opts; if(cur && keys.indexOf(cur)>-1) s.value=cur; } });
  fzFillModelle('fzMarke','fzModell');
  fzFillModelle('sbMarke','sbModell');
}
function fzFillModelle(markeId, modellId){
  markeId=markeId||'fzMarke'; modellId=modellId||'fzModell';
  var msel=document.getElementById(markeId), modsel=document.getElementById(modellId);
  if(!modsel) return;
  var marke=msel?msel.value:'';
  var cur=modsel.value;
  var mods=(marke && window._fzBrands && window._fzBrands[marke]) ? window._fzBrands[marke].slice().sort(function(a,b){ return a.localeCompare(b,'de'); }) : [];
  modsel.innerHTML='<option value="">Alle Modelle</option>'+mods.map(function(k){ return '<option value="'+_e(k)+'">'+_e(k)+'</option>'; }).join('');
  modsel.disabled = !marke || !mods.length;
  if(cur && mods.indexOf(cur)>-1) modsel.value=cur;
}
// Hero-Marke -> Sidebar spiegeln (Sidebar ist die kanonische Quelle)
function fzMarkeChanged(){
  var hv=(document.getElementById('fzMarke')||{}).value||'';
  var sb=document.getElementById('sbMarke'); if(sb) sb.value=hv;
  fzFillModelle('fzMarke','fzModell');
  fzFillModelle('sbMarke','sbModell');
  filterCards();
}
function sbMarkeChanged(){ fzFillModelle('sbMarke','sbModell'); filterCards(); }
// generisches Spiegeln Hero-Feld -> Sidebar-Feld
function fzMirror(srcId, dstId){ var s=document.getElementById(srcId), d=document.getElementById(dstId); if(s&&d) d.value=s.value; filterCards(); }
function fzSetType(btn){
  document.querySelectorAll('.fzf-type').forEach(function(b){ var on=(b===btn); b.classList.toggle('on',on); b.setAttribute('aria-selected', on?'true':'false'); });
  _fzCat = btn.getAttribute('data-cat')||'';
  filterCards();
}
function fzSetPay(btn){
  var pay = btn.getAttribute('data-pay')||'kaufen';
  _fzPay = pay;
  filterCards();
}
function fzMoreFilters(){ fzSubmitSearch(); var m=document.getElementById('rsMore'); if(m) m.style.display=''; }
function rsToggleMore(){ var m=document.getElementById('rsMore'); if(m) m.style.display=(m.style.display==='none'?'':'none'); }
function rsToggleGrp(h){ var g=h.parentNode; while(g && !(g.classList&&g.classList.contains('rs-grp'))) g=g.parentNode; if(g) g.classList.toggle('collapsed'); }
function fzScrollResultsTop(){ var r=document.querySelector('.rs-crumbbar')||document.querySelector('.browse-layout'); if(r){ var y=r.getBoundingClientRect().top+window.pageYOffset-70; window.scrollTo({top:Math.max(0,y),behavior:'smooth'}); } }
function fzUpdateGoCount(n){
  if(typeof n!=='number') n=(typeof listings!=='undefined' && listings)?listings.length:0;
  var txt=n.toLocaleString('de-DE')+' '+(n===1?'Angebot':'Angebote');
  var t1=document.getElementById('fzGoCount'); if(t1) t1.textContent=txt;
  var t2=document.getElementById('rsGoCount'); if(t2) t2.textContent=txt;
}
function _fzLabel(id,txt){ var e=document.getElementById(id); if(e) e.textContent=txt; }

/* ─── Erweiterte Filter (Kraftstoff, Getriebe, Typ, Farbe, Ausstattung) aus echten Daten ─── */
  ['skisack','Skisack'],['standheizung','Standheizung'],['startstopp','Start/Stopp-Automatik'],
  ['zentralverriegelung','Zentralverriegelung'],
  ['panoramadach','Panorama-Dach'],['ledersitze','Lederausstattung'],['rueckfahrkamera','Rückfahrkamera'],
  ['kamera360','360°-Kamera'],['einparkhilfe','Einparkhilfe'],['tempomat','Tempomat'],
  ['abstandstempomat','Abstandstempomat'],['carplay','Apple CarPlay'],['androidauto','Android Auto'],
  ['anhaengerkupplung','Anhängerkupplung'],['usb','USB-Anschluss']
];
var _FZ_EQUIP_MAIN=19;
function _fzFillChecks(containerId, cls, countMap){
  var el=document.getElementById(containerId); if(!el) return;
  var keys=Object.keys(countMap).sort(function(a,b){ return countMap[b]-countMap[a]; });
  el.innerHTML = keys.length ? keys.map(function(k){
    return '<label class="fs-check"><input type="checkbox" class="'+cls+'" value="'+_e(k)+'" onchange="filterCards()"> '+_e(k)+' <span class="fz-cnt">'+countMap[k]+'</span></label>';
  }).join('') : '<div class="fzd-empty" style="padding:.3rem .1rem">— keine Angaben —</div>';
}
function fzBuildFilters(){
  if(typeof listings==='undefined' || !listings) return;
  function cntBy(get){ var m={}; listings.forEach(function(it){ var v=get(it); v=String(v==null?'':v).trim(); if(v) m[v]=(m[v]||0)+1; }); return m; }
  _fzFillChecks('sbFuel','fz-fuel',  cntBy(function(it){return (it.details||{}).kraftstoff;}));
  _fzFillChecks('sbGear','fz-gear',  cntBy(function(it){return (it.details||{}).getriebe;}));
  _fzFillChecks('sbVType','fz-vtype',cntBy(function(it){return (it.details||{}).fahrzeugtyp;}));
  // Ausstattung (vollständige Liste + Anzahl; erste 19 sichtbar, Rest unter „Mehr …")
  var eqEl=document.getElementById('sbEquip');
  if(eqEl){
    var cntK=function(k){ var n=0; listings.forEach(function(it){ if(_fzBool((it.details||{})[k])) n++; }); return n; };
    var row=function(p){ var c=cntK(p[0]); return '<label class="fs-check"><input type="checkbox" class="fz-equip" value="'+p[0]+'" onchange="filterCards()"> '+_e(p[1])+(c?' <span class="fz-cnt">'+c+'</span>':'')+'</label>'; };
    var main=_FZ_EQUIP.slice(0,_FZ_EQUIP_MAIN), extra=_FZ_EQUIP.slice(_FZ_EQUIP_MAIN);
    eqEl.innerHTML = main.map(row).join('') + '<span id="sbEquipExtra" style="display:none">'+extra.map(row).join('')+'</span>';
    var mb=document.getElementById('sbEquipMoreBtn'); if(mb) mb.style.display = extra.length ? '' : 'none';
  }
  // Außenfarben (nur Farben mit Treffern aktiv)
  var colEl=document.getElementById('sbColors');
  if(colEl){ colEl.innerHTML=_FZ_COLORS.map(function(c){
      <button class="rs-more" onclick="rsToggleMore()" style="margin-top:.4rem"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" y1="21" x2="4" y2="14"/><line x1="4" y1="10" x2="4" y2="3"/><line x1="12" y1="21" x2="12" y2="12"/><line x1="12" y1="8" x2="12" y2="3"/><line x1="20" y1="21" x2="20" y2="16"/><line x1="20" y1="12" x2="20" y2="3"/><line x1="1" y1="14" x2="7" y2="14"/><line x1="9" y1="8" x2="15" y2="8"/><line x1="17" y1="16" x2="23" y2="16"/></svg> Weitere Filter</button>
    </aside>

    <!-- Inhalt -->
    <div class="browse-content">
      <div class="rs-head">
        <div class="rs-count" id="countLabel">Lade …</div>
        <div class="rs-search">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
          <input type="text" id="fzSearch2" placeholder="z. B. Einparkhilfe, Panoramadach …" oninput="filterCards()" onkeydown="if(event.key==='Enter')filterCards()">
          <button class="rs-search-go" onclick="filterCards()" aria-label="Suchen"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="13 6 19 12 13 18"/></svg></button>
        </div>
        <div class="rs-sortrow">
          <span class="rs-sortlbl">Sortieren nach</span>
          <select class="sec-sort rs-sort" onchange="sortCards(this.value)">
            <option value="rated">Standard-Sortierung</option>
            <option value="newest">Neueste zuerst</option>
            <option value="price-asc">Preis aufsteigend</option>
            <option value="price-desc">Preis absteigend</option>
            <option value="viewed">Beliebteste</option>
          </select>
        </div>
      </div>

      <!-- Ergebnisliste — gerendert von JS -->
      <div class="rs-list" id="listingGrid"></div>
    </div>

  </div>

  <!-- Zuletzt angesehen -->
  <section id="recentViewed" class="recent-viewed" style="display:none">
    <div class="recent-in">
      <h3 class="recent-h">Zuletzt angesehen</h3>
      <div class="recent-row" id="recentRow"></div>
    </div>
  </section>

  <!-- List product CTA -->
  <div class="list-section">
    <div class="list-in">
      <div class="list-tag">
function fzBuildFilters(){
  if(typeof listings==='undefined' || !listings) return;
  function cntBy(get){ var m={}; listings.forEach(function(it){ var v=get(it); v=String(v==null?'':v).trim(); if(v) m[v]=(m[v]||0)+1; }); return m; }
    </aside>

    <!-- Inhalt -->
    <div class="browse-content">
      <div class="rs-head">
        <div class="rs-count" id="countLabel">Lade …</div>
        <div class="rs-search">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
          <input type="text" id="fzSearch2" placeholder="z. B. Einparkhilfe, Panoramadach …" oninput="filterCards()" onkeydown="if(event.key==='Enter')filterCards()">
          <button class="rs-search-go" onclick="filterCards()" aria-label="Suchen"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="13 6 19 12 13 18"/></svg></button>
        </div>
        <div class="rs-sortrow">
          <span class="rs-sortlbl">Sortieren nach</span>
          <select class="sec-sort rs-sort" onchange="sortCards(this.value)">
            <option value="rated">Standard-Sortierung</option>
            <option value="newest">Neueste zuerst</option>
            <option value="price-asc">Preis aufsteigend</option>
            <option value="price-desc">Preis absteigend</option>
            <option value="viewed">Beliebteste</option>
          </select>
        </div>
      </div>

      <!-- Ergebnisliste — gerendert von JS -->
      <div class="rs-list" id="listingGrid"></div>
    </div>

  </div>

  <!-- Zuletzt angesehen -->
    var matchColor = !checkedColors.length || checkedColors.some(function(c){ return colorTxt.indexOf(c)>-1; });
    var matchFinish = !checkedFinish.length || checkedFinish.every(function(f){ return colorTxt.indexOf(f)>-1; });
    var rstars = (d.rating && typeof d.rating.stars==='number') ? d.rating.stars : 0;
    var matchRating = !dealerRating || rstars>=parseFloat(dealerRating);
    var matchAnbieter = !anbieter || String(d.anbietertyp||'')===anbieter;
    var matchQuali = !quali || _fzBool(d.qualitaetssiegel);
    return matchQ && matchKat && matchMarke && matchModell && matchEz && matchKm && matchPrice && matchOrt && matchPay && matchElek && matchCond && matchExtra
      && matchFuel && matchGear && matchVType && matchPS && matchClima && matchEquip && matchColor && matchFinish && matchRating && matchAnbieter && matchQuali;
  });
  renderCards(filtered);
  fzUpdateGoCount(filtered.length);
  // Sidebar-Zusammenfassungen („ändern")
  _fzLabel('rsvMarke', marke ? (marke+(modell?' '+modell:'')) : 'Beliebig');
  _fzLabel('rsvCond', checkedConds.length ? checkedConds.join(', ') : 'Beliebig');
  _fzLabel('rsvOrt', ort ? (val('sbOrt')||'') : 'Beliebig');
  var sbE=document.getElementById('sbElektro'); if(sbE && elektroEl) sbE.checked=elektroEl.checked;
  fzUpdateMode();
}

/* ─── Entdecken vs. Ergebnisse: Autos erst nach Suche anzeigen ─── */
function fzSearchActive(){
  if(_fzForceResults) return true;
  if(_fzCat) return true;
  if(_fzPay==='leasen') return true;
  var ek=document.getElementById('fzElektro'); if(ek && ek.checked) return true;
  var ids=['fzSearch','fzSearch2','sbOrt','sbMarke','sbModell','sbEzVon','sbEzBis','sbKmVon','sbKmBis','sbPreisVon','sbPreisBis','sbLeistungVon','sbLeistungBis'];
  for(var i=0;i<ids.length;i++){ var e=document.getElementById(ids[i]); if(e && e.value) return true; }
  if(document.querySelector('.fs-cond:checked, .fs-extra:checked, .fz-fuel:checked, .fz-gear:checked, .fz-vtype:checked, .fz-equip:checked, .fz-finish:checked, .fz-color.on')) return true;
  var dr=document.querySelector('.fz-rating:checked'); if(dr && dr.value) return true;
  var cr=document.querySelector('.fz-clima-r:checked'); if(cr && cr.value) return true;
  var an=document.querySelector('.fz-anbieter:checked'); if(an && an.value) return true;
  var ea=document.getElementById('sbEAutos'); if(ea && ea.checked) return true;
  var qu=document.getElementById('sbQuali'); if(qu && qu.checked) return true;
  return false;
}
function fzUpdateMode(){
  var main=document.querySelector('.main'); if(!main) return;
  var active=fzSearchActive();
  main.classList.toggle('fz-results', active);
  main.classList.toggle('fz-discover', !active);
  document.body.classList.toggle('fzsearch', active);
}
function fzScrollResults(){ window.scrollTo({top:0,behavior:'smooth'}); }
function fzSubmitSearch(){ _fzForceResults=true; filterCards(); fzScrollResults(); }
function fzShowAll(){ _fzClear(); _fzForceResults=true; filterCards(); fzScrollResults(); }

// alle Filter zurücksetzen (ohne Render)
function _fzClear(){
  ['fzSearch','fzSearch2','sbOrt','fzOrt','fzMarke','fzModell','sbMarke','sbModell','fzEzAb','sbEzVon','sbEzBis','fzKmBis','sbKmVon','sbKmBis','fzPreisBis','sbPreisVon','sbPreisBis','sbLeistungVon','sbLeistungBis'].forEach(function(id){ var e=document.getElementById(id); if(e) e.value=''; });
  fzFillModelle('fzMarke','fzModell'); fzFillModelle('sbMarke','sbModell');
  _fzCat=''; _fzPay='kaufen'; _fzForceResults=false;
  document.querySelectorAll('.fzf-type').forEach(function(b){ var on=((b.getAttribute('data-cat')||'')===''); b.classList.toggle('on',on); b.setAttribute('aria-selected', on?'true':'false'); });
function fzBuildBrands(){
  var brands={};
  listings.forEach(function(it){
    var d=_fzDet(it), m=String(d.marke||'').trim();
    if(!m) return;
    if(!brands[m]) brands[m]=[];
  var kmOpts=KM.map(function(v){ return '<option value="'+v+'">'+v.toLocaleString('de-DE')+' km</option>'; }).join('');
  function fill(id, head, body){ var s=document.getElementById(id); if(!s) return; var cur=s.value; s.innerHTML='<option value="">'+head+'</option>'+body; if(cur) s.value=cur; }
  fill('fzKmBis','Egal',kmOpts); fill('sbKmVon','von',kmOpts); fill('sbKmBis','bis',kmOpts);
  // Jahre: aktuelles Jahr … 1990 (jährlich), dann 1985/1980/1975/1970/1965/1960 und 1900
  var now=new Date().getFullYear(); var ys=[];
  for(var y=now; y>=1990; y--) ys.push(y);
  [1985,1980,1975,1970,1965,1960].forEach(function(v){ ys.push(v); }); ys.push(1900);
<div id="listingDetailModal">
  <button class="ldm-close" onclick="closeListingDetail()" aria-label="Zurück"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg>Zurück</button>
  <div class="ldm-page">

    <!-- OBEN: Galerie + Info -->
.ldm-dcard{background:var(--card,#fff);border:1.5px solid var(--bord,#E4E8EF);border-radius:14px;padding:1.1rem 1.25rem;min-width:0}
.ldm-dcard.full{grid-column:1/-1}
.ldm-dtitle{font-size:.98rem;font-weight:800;color:var(--text,#0F1722);margin:0 0 .85rem}
.ldm-deliv{display:flex;flex-wrap:wrap;gap:1.1rem 2.2rem}
/* Detailansicht: oberer Banner + Händler-/Anbieterbereich */
#ldmTopBanner{position:relative;width:100%;max-height:340px;overflow:hidden;background:#0e1726;display:block}
#ldmTopBanner img{width:100%;height:100%;max-height:340px;object-fit:cover;display:block}
/* sanfter Übergang am unteren Banner-Rand in den Seitenhintergrund — endet dort, wo die Galerie beginnt */
/* Fade muss in die ECHTE Hintergrundfarbe des Detail-Modals überblenden:
   dunkel = #0A1628 (Modal-BG), hell = #fff. Sonst entsteht eine sichtbare Kante. */
#ldmTopBanner::after{content:'';position:absolute;left:0;right:0;bottom:0;height:175px;pointer-events:none;background:linear-gradient(to bottom, rgba(10,22,40,0) 0%, #0A1628 100%)}
[data-theme="light"] #ldmTopBanner::after{background:linear-gradient(to bottom, rgba(255,255,255,0) 0%, #fff 100%)}
.ldm-dealer{margin-top:1.4rem;display:flex;flex-direction:column;gap:1rem}
.ldm-dcard{background:var(--card,#fff);border:1.5px solid var(--bord,#E4E8EF);border-radius:14px;padding:1.35rem 1.5rem;min-width:0}
.ldm-dcard.full{width:100%}
/* Über diesen Händler */
.ldm-dcount{font-size:.85rem;color:var(--blue,#1B56CC);font-weight:600;text-decoration:underline;cursor:pointer}
.ldm-dnorating{font-size:.9rem;color:var(--tmut,#6B7A90);margin:.2rem 0 .9rem}
.ldm-dtags-h{font-size:.84rem;font-weight:700;color:var(--text,#0F1722);margin:.9rem 0 .5rem}
.ldm-dtags{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.4rem}
.ldm-dtag{display:inline-flex;align-items:center;gap:.35rem;font-size:.8rem;font-weight:600;color:var(--text,#0F1722);background:var(--off,#F7F8FA);border:1px solid var(--bord,#E4E8EF);padding:.3rem .65rem;border-radius:7px}
.ldm-dtag svg{color:#16a34a}
.ldm-dstatgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem 1rem;margin:1rem 0 .2rem}
.ldm-dstatx{display:flex;align-items:flex-start;gap:.6rem}
.ldm-dstatx svg{color:var(--fzacc,#e5320c);flex:0 0 auto}
.ldm-dstatx .k{font-size:.76rem;color:var(--tmut,#6B7A90)}
.ldm-dstatx .v{font-size:1rem;font-weight:800;color:var(--text,#0F1722);margin-top:.1rem}
.ldm-ddisclaim{font-size:.74rem;color:var(--tmut,#6B7A90);line-height:1.5;margin-top:1.1rem}
/* Händler */
.ldm-dgrid2{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem 2rem}
.ldm-dsub{font-size:.82rem;font-weight:700;color:var(--text,#0F1722)}
.ldm-dval{font-size:.85rem;color:var(--tmut,#6B7A90);margin-top:.15rem;line-height:1.5}
.ldm-dpos{font-size:.82rem;color:var(--tmut,#6B7A90)}
.ldm-dline{font-size:.82rem;color:var(--tmut,#6B7A90)}
.ldm-dsep{height:0;background:transparent;margin:.9rem 0}
.ldm-dmap{border-radius:14px;overflow:hidden;border:1px solid var(--bord,#E4E8EF);background:#0e1726}
.ldm-dmap iframe{width:100%;height:360px;border:0;display:block;filter:saturate(.95)}
/* Standort ohne Karten-Box: Karte füllt die volle Breite */
.ldm-dstandort .ldm-dtitle{margin-bottom:.85rem}
.ldm-dfollow{margin-top:1.1rem;padding:1rem 1.1rem;border:1px solid var(--bord,#E4E8EF);border-radius:12px;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;background:var(--off,#F7F8FA)}
.ldm-dfollow-t b{font-size:.9rem;color:var(--text,#0F1722)}
.ldm-dfollow-t ol{margin:.45rem 0 0 1.1rem;padding:0;font-size:.8rem;color:var(--tmut,#6B7A90);line-height:1.6}
.ldm-dfollow-btn{display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap;font-family:inherit;font-size:.85rem;font-weight:700;padding:.7rem 1.1rem;border-radius:9px;cursor:pointer;border:none;background:#7c3aed;color:#fff;transition:background .2s}
.ldm-dfollow-btn:hover{background:#6d28d9}
.ldm-dfollow-btn.on{background:#16a34a}
.ldm-dtitle{font-size:.98rem;font-weight:800;color:var(--text,#0F1722);margin:0 0 .85rem}
.ldm-deliv{display:flex;flex-wrap:wrap;gap:1.1rem 2.2rem}
.ldm-deliv-item{display:flex;align-items:center;gap:.6rem;font-size:.8rem;color:var(--tmut,#6B7A90)}
.ldm-deliv-item b{display:block;color:var(--text,#0F1722);font-size:.98rem;font-weight:800;margin-top:.1rem}
.ldm-deliv-item svg{color:var(--accent,#F5511E);flex:0 0 auto}
.ldm-dscore{display:flex;align-items:center;gap:.8rem;margin-bottom:.3rem}
.ldm-dscore .num{font-size:2.2rem;font-weight:800;color:var(--text,#0F1722);line-height:1}
.ldm-dscore-r{display:flex;flex-direction:column;gap:.18rem}
.ldm-dscore .cnt{font-size:.8rem;color:var(--tmut,#6B7A90)}
.ldm-dstars.empty{opacity:.4}
.ldm-dstats{display:flex;flex-wrap:wrap;gap:1rem 2.2rem;margin:.55rem 0 .85rem}
.ldm-dstat{font-size:.78rem;color:var(--tmut,#6B7A90)}
.ldm-dstat b{display:block;color:var(--text,#0F1722);font-size:1rem;font-weight:800;margin-top:.12rem}
.ldm-ddesc{font-size:.85rem;line-height:1.55;color:var(--tmut,#6B7A90);white-space:pre-line}
.ldm-dhead{display:flex;align-items:center;gap:.85rem;margin-bottom:.7rem}
.ldm-dlogo{width:56px;height:56px;border-radius:10px;object-fit:contain;background:#fff;border:1px solid var(--bord,#E4E8EF);flex:0 0 auto;margin-bottom:.6rem}
.ldm-dlogo-ph{display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.1rem;color:#fff;background:var(--fzacc,#e5320c);border-color:transparent}
/* Banner hinter dem Profilbild im Händler-Block — Fade an allen Kanten */
.ldm-dhero{position:relative;width:100%;height:185px;border-radius:12px;overflow:hidden;margin:.2rem 0 .9rem;background:transparent}
.ldm-dhero img{width:100%;height:100%;object-fit:cover;display:block;-webkit-mask-image:radial-gradient(130% 125% at 50% 40%,#000 46%,rgba(0,0,0,0) 100%);mask-image:radial-gradient(130% 125% at 50% 40%,#000 46%,rgba(0,0,0,0) 100%)}
/* Logo sitzt IM Banner unten links → der Banner reicht bis dorthin, wo das Profilbild endet */
.ldm-dhero-logo{position:absolute;left:1.05rem;bottom:1rem;margin:0;z-index:2}
.ldm-dhero-logo .ldm-dlogo{width:66px;height:66px;border:3px solid #fff;box-shadow:0 4px 16px rgba(0,0,0,.4);margin-bottom:0}
.ldm-dname{font-weight:800;color:var(--text,#0F1722);font-size:.98rem}
.ldm-dadr{font-size:.82rem;color:var(--tmut,#6B7A90);margin-top:.18rem;line-height:1.4}
.ldm-dverif{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.55rem}
.ldm-dverif-b{display:inline-flex;align-items:center;gap:.32rem;font-size:.74rem;font-weight:700;color:#16a34a;background:rgba(22,163,74,.10);border:1px solid rgba(22,163,74,.30);border-radius:999px;padding:.2rem .6rem}
[data-theme="dark"] .ldm-dverif-b{color:#4ade80;background:rgba(34,197,94,.12);border-color:rgba(74,222,128,.35)}
.ldm-drow{font-size:.84rem;color:var(--text,#0F1722);margin:.4rem 0;display:flex;gap:.5rem}
.ldm-drow .k{color:var(--tmut,#6B7A90);min-width:130px;flex:0 0 auto}
.ldm-dgallery{display:grid;grid-template-columns:repeat(3,1fr);gap:.45rem;margin:.75rem 0}
.ldm-dgallery img{width:100%;height:82px;object-fit:cover;border-radius:8px;border:1px solid var(--bord,#E4E8EF)}
.ldm-dlink{display:inline-flex;align-items:center;gap:.4rem;color:var(--blue,#1B56CC);font-weight:700;font-size:.85rem;text-decoration:none;margin-top:.45rem}
.ldm-dlink:hover{text-decoration:underline}
.ldm-dstars{color:#f5a623;font-size:1.05rem;letter-spacing:1px}
@media(max-width:760px){.ldm-dealer{grid-template-columns:1fr}#ldmTopBanner,#ldmTopBanner img{max-height:220px}#ldmTopBanner::after{height:120px}}
[data-theme="dark"] .ldm-dcard{background:#16243b;border-color:#26344d}
        <div class="ldm-col-title">Produkt-Details</div>
        <div id="ldmDetailsList"></div>
      </div>
      <div class="ldm-col" id="ldmAusstattungCol">
        <div class="ldm-col-title">Lieferung &amp; Zustand</div>
        <div id="ldmAusstattung"></div>
      </div>
      <div class="ldm-col" id="ldmBeschreibungCol">
        <div class="ldm-col-title">Beschreibung</div>
        <div class="ldm-desc" id="ldmExtra"></div>
      </div>
    </div>

    <!-- Bewertung: Score + Aufschlüsselung -->
    <div class="ldm-rating" id="ldmRating" style="display:none">
      <div class="ldm-rating-head">
        <div class="ldm-col-title" style="margin:0">Bewertung</div>
        <div class="ldm-rating-summary" id="ldmRatingSummary"></div>
<div id="listingDetailModal">
  <div id="ldmTopBanner" class="ldm-topbanner" style="display:none"></div>
  <button class="ldm-close" onclick="closeListingDetail()" aria-label="Zurück"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg>Zurück</button>
.ldm-pricerate{display:inline-flex;align-items:center;gap:.4rem;font-size:.78rem;font-weight:600;color:var(--tmut)}
.ldm-pricerate .bars{display:inline-flex;gap:2px}
.ldm-pricerate .bars i{width:7px;height:11px;border-radius:2px;background:#cfd6e0;display:inline-block}
.ldm-pricerate.good .bars i{background:#16a34a}
.ldm-infocard .ldm-price-label{margin-bottom:.5rem}
.ldm-finance{font-size:.92rem;font-weight:800;color:var(--text)}
.ldm-finance .calc{display:block;font-size:.82rem;font-weight:700;color:var(--fzacc);margin-top:.18rem;cursor:pointer;background:none;border:none;padding:0;font-family:inherit}
.ldm-finance .calc:hover{text-decoration:underline}
.ldm-finance .ex{display:block;font-size:.68rem;font-weight:500;color:var(--tmut);margin-top:.15rem}
          <div class="ldm-counter" id="ldmCounter"></div>
          <button class="ldm-nav prev" id="ldmPrev" onclick="ldmNav(-1)">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="15 18 9 12 15 6"/></svg>
          </button>
          <button class="ldm-nav next" id="ldmNext" onclick="ldmNav(1)">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="9 18 15 12 9 6"/></svg>
          </button>
          <div class="ldm-stage-btns">
            <button class="ldm-stage-btn primary" onclick="lbxOpen(ldmCurrent)"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/></svg>Alle Bilder</button>
            <button class="ldm-stage-btn" onclick="lbxOpen(ldmCurrent)"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/><line x1="21" y1="3" x2="14" y2="10"/><line x1="3" y1="21" x2="10" y2="14"/></svg>Vergrößern</button>
          </div>
        </div>
        <div class="ldm-thumbs" id="ldmThumbs"></div>
        <!-- Handy: Foto-Raster (booking.com-Stil), Tippen öffnet Vollbild -->
        <div class="ldm-photogrid" id="ldmPhotoGrid"></div>
        <!-- Desktop-Fallback (nicht mehr genutzt, bleibt für Kompatibilität) -->
        <div class="ldm-deskgrid" id="ldmDeskGrid" style="display:none"></div>
      </div>

      <!-- Info-/Kontakt-Card (mobile.de-Stil) -->
      <div class="ldm-info">
        <div class="ldm-infocard">
          <div class="ldm-badges" id="ldmBadges"></div>
          <h1 class="ldm-title" id="ldmTitle"></h1>
          <div class="ldm-subtitle" id="ldmSubtitle" style="display:none"></div>
          <div class="ldm-pricerow">
            <span class="ldm-price" id="ldmPrice"></span>
            <span class="ldm-pricerate" id="ldmPriceRate"></span>
          </div>
          <div class="ldm-price-label" id="ldmPriceLabel"></div>
          <div class="ldm-finance" id="ldmFinance" style="display:none"></div>
          <div class="ldm-infosep"></div>
          <div class="ldm-contact" id="ldmContact"></div>
          <button class="ldm-cta-btn" id="ldmCtaBtn">
            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:middle;margin-right:.45rem"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
            E-Mail schreiben
          </button>
          <div class="ldm-actions">
            <button class="ldm-act" id="ldmPark" onclick="ldmTogglePark()"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg><span>Parken</span></button>
            <button class="ldm-act" id="ldmShare" onclick="ldmShare()"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/></svg><span>Teilen</span></button>
          </div>
          <div class="ldm-report"><span class="ldm-anz">Anzeige</span> · <a href="#" onclick="ldmReport();return false;">Dieses Inserat beanstanden</a></div>
        </div>
      </div>
    </div>

    <!-- Eckdaten + Besondere Merkmale (volle Breite, unter den Spalten) -->
    <div class="ldm-specscard">
      <div class="ldm-specs-grid" id="ldmSpecs"></div>
      <div class="ldm-merk" id="ldmMerkmale" style="display:none">
        <div class="ldm-merk-h">Besondere Merkmale laut Händler</div>
        <div class="ldm-merk-chips" id="ldmMerkChips"></div>
      </div>
    </div>

    <!-- UNTEN: 3 Spalten -->
    <div class="ldm-bottom">
      <div class="ldm-col" id="ldmDetailsCol">
        <div class="ldm-col-title">Produkt-Details</div>
        <div id="ldmDetailsList"></div>
      </div>
      <div class="ldm-col" id="ldmAusstattungCol">
        <div class="ldm-col-title">Lieferung &amp; Zustand</div>
        <div id="ldmAusstattung"></div>
      </div>
      <div class="ldm-col" id="ldmBeschreibungCol">
        <div class="ldm-col-title">Beschreibung</div>
        <div class="ldm-desc" id="ldmExtra"></div>
      </div>
    </div>

    <!-- Bewertung: Score + Aufschlüsselung -->
    <div class="ldm-rating" id="ldmRating" style="display:none">
      <div class="ldm-rating-head">
        <div class="ldm-col-title" style="margin:0">Bewertung</div>
        <div class="ldm-rating-summary" id="ldmRatingSummary"></div>
      </div>
      <div id="ldmRatingBreakdown"></div>
    </div>

    <!-- Anbieter / Händler (aus dem Firmenprofil) -->
    <div class="ldm-dealer" id="ldmDealer" style="display:none"></div>

  </div>
</div>

<!-- Vollbild-Lightbox (Bilder in voller Größe ansehen) -->
<div id="ldmLightbox" class="ldm-lightbox">
  <button class="lbx-close" onclick="lbxClose()" aria-label="Schließen">×</button>
  <div class="lbx-count" id="lbxCount"></div>
  <button class="lbx-nav prev" onclick="lbxNav(-1)" aria-label="Zurück"><svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="15 18 9 12 15 6"/></svg></button>
  <div class="lbx-stage" id="lbxStage"></div>
  <button class="lbx-nav next" onclick="lbxNav(1)" aria-label="Weiter"><svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="9 18 15 12 9 6"/></svg></button>
function applySort(btn){
  var val = btn.getAttribute('data-val') || '';
  document.querySelectorAll('#sortSheet .ss-opt').forEach(function(b){ b.classList.toggle('sel', b===btn); });
  var sel=document.querySelector('.sec-sort'); if(sel) sel.value=val;   // Desktop-Auswahl synchron halten
  sortCards(val);
  closeSortDrawer();
}
function updateFilterBadge(){
  var n=0;
  document.querySelectorAll('.fs-cond:checked, .fs-extra:checked, .fz-fuel:checked, .fz-gear:checked, .fz-vtype:checked, .fz-equip:checked, .fz-finish:checked, .fz-color.on').forEach(function(){ n++; });
  var dr=document.querySelector('.fz-rating:checked'); if(dr && dr.value) n++;
function fzScrollResultsTop(){ var r=document.querySelector('.rs-crumbbar')||document.querySelector('.browse-layout'); if(r){ var y=r.getBoundingClientRect().top+window.pageYOffset-70; window.scrollTo({top:Math.max(0,y),behavior:'smooth'}); } }
function fzUpdateGoCount(n){
  if(typeof n!=='number') n=(typeof listings!=='undefined' && listings)?listings.length:0;
  var txt=n.toLocaleString('de-DE')+' '+(n===1?'Angebot':'Angebote');
.lbx-stage.zoomed{overflow:hidden}
.lbx-stage.zoomed img{cursor:zoom-out;transform:scale(2.4)}