: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.webp)}*,*: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}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{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)}@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:#ffffff8c;padding:.35rem .75rem;border-radius:5px;transition:color .2s,background .2s}.nav-links a:hover{color:#fff;background:#ffffff14}.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:#ffffff73;display:flex;align-items:center;gap:.35rem;transition:color .2s;white-space:nowrap}.nav-back:hover{color:#fffc}.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}.hero{--fzacc:#e5320c;--fzacch:#c4280a;position:relative;overflow:visible;border-bottom:none;padding:0;background:transparent}.fzh-banner{position:relative;width:100%;min-height:clamp(320px,44vh,480px);display:flex;align-items:flex-end;background-image:linear-gradient(180deg,#080a101a,#080a1000 26%,#080a1042 56%,#080a10d6),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}html[data-theme=dark] .hero{background:transparent!important}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}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:#141417b8!important;-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);border-color:#ffffff1a!important}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}html[data-theme=dark] .fzh-search input{background:transparent!important;color:#16181c!important}html[data-theme=dark] .fzf-ort-in input{background:transparent!important;color:#f0f1f3!important}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:#ffffff0e!important;border-color:#ffffff1a!important}html[data-theme=dark] .fzd-chip{background:#ffffff14!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}}.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 #0c1a2e12;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}.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:#ffffffed;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)}.fzh-panel{background:#16171ad1;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 #00000057}.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}.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 #e5320c29,0 0 18px 2px #e5320c61,0 8px 20px #00000029;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)}.fzf{display:flex;background:#16171aeb;border:1px solid rgba(255,255,255,.08);border-radius:16px;box-shadow:0 18px 50px #00000057;overflow:hidden}.fzf-types{display:flex;flex-direction:column;gap:.12rem;background:#ffffff08;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:#ffffff0f;color:#fff}.fzf-type.on{background:#e5320c29;color:var(--fzacc)}.fzf-type svg{width:25px;height:25px}.fzf-morebtn svg{width:22px;height:22px}.fzf-morebtn.on{background:#e5320c29;color:var(--fzacc)}.fzf-main{position:relative}.fzcat-overlay{position:absolute;inset:0;z-index:40;background:#121317fb;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:#ffffff0a;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:#e5320c1f;border-color:var(--fzacc)}.fzcat-card.on{background:#e5320c2e;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:#ffffff0d;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:#ffffff0d;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:#ffffff0d!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}.fzf-seg{display:flex;height:43px;border:1px solid rgba(255,255,255,.12);border-radius:9px;background:#ffffff0d;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:#ffffff24;color:#fff}.fzf-ort-in{display:flex;align-items:center;gap:.45rem;height:43px;border:1px solid rgba(255,255,255,.12);background:#ffffff0d;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}.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}.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:#0a8f3c33;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}.fz-theme-btn{width:34px;height:34px;border:none;border-radius:50%;background:#ffffff1f;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:#ffffff38}.fz-theme-btn svg{width:17px;height:17px}[data-theme=light] .fz-theme-btn{background:#0f172212;color:#0f1722}[data-theme=light] .fz-theme-btn:hover{background:#0f172224}[data-theme=light] .fzh-panel{background:#fff;border-color:var(--bord);box-shadow:0 18px 48px #0f172a1f}[data-theme=light] .fzh-ptitle{color:var(--text)}[data-theme=light] .fzf{background:#fff;border-color:var(--bord);box-shadow:0 16px 42px #0f172a1a}[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:#0f172a0d;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 #0f172a24}[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:#fffffffb}[data-theme=dark] .fzd-sec{background:#0d1828!important;border-color:#1e2d45}.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 #00000040}.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:#ffffffd9;font-weight:600}.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)}.main.fz-discover .mobile-filterbar{display:none!important}.main.fz-discover .browse-layout,.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}.fzd-sell{display:flex;align-items:center;gap:1.5rem;background:linear-gradient(120deg,#6c34d699,#8b3df099);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,#6c34d699,#8b3df099)!important}html[data-theme=dark] .fzd-sell-f select{background:#ffffff29!important;color:#fff!important;border-color:#ffffff47!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:#ffffffe6;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:#ffffffd9;margin-bottom:.25rem}.fzd-sell-f select{width:100%;height:42px;border:1px solid rgba(255,255,255,.25);background:#ffffff24;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:#ffffff47}@media(max-width:760px){.fzd-sell-art{display:none}.fzd-sell{padding:1.3rem}.fzd-sell-row{max-width:none}}.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){.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}.fzfm-overlay{position:fixed;inset:0;z-index:4000;background:#080b119e;-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 #00000080}[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}.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}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 #00000026}.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}.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,.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}.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}.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}}.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:#1b56cc59;box-shadow:0 10px 30px #0c1a2e1f;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 #0003}.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:#ffffffeb;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#6b7a90;box-shadow:0 2px 8px #00000026;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)}.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)}to{transform:scale(1)}}@keyframes heartBurst{0%{transform:scale(.6);opacity:.7}to{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}@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)}@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-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 #0c1a2e0d}.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:#0c1a2e0f}.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 €</option></select> <select id="fPriceMax"><option value="">Max. Preis</option><option value="250">250 €</option><option value="500">500 €</option><option value="1000">1 €</option><option value="2500">2.5 €</option><option value="5000">5 €</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 #1b56cc66;transform:translateY(-1px)}.btn-sec{background:#ffffff14;color:#ffffffbf;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:#ffffff24;color:#fff;border-color:#ffffff4d}.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:#ffffff4d}.foot a{color:#ffffff73;transition:color .2s}.foot a:hover{color:#fff}.foot span{color:var(--bluel);font-weight:800}.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:#ffffff73;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:#ffffff73}.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:#ffffff4d;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:#ffffffeb;border:none;box-shadow:0 2px 10px #0003;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:#0f1722a6;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:#0f17229e;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:#0f1722d9}.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:translate(-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 #0000002e;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}}.ldm-photogrid{display:none}@media(max-width:980px){.ldm-stage,.ldm-thumbs{display:none}.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:#08101e8c;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:#0000008c;display:flex;align-items:center;justify-content:center;pointer-events:none}}.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:#ffffff24;border:none;color:#fff;font-size:1.5rem;cursor:pointer;display:flex;align-items:center;justify-content:center}.lbx-close:active{background:#ffffff47}.lbx-count{position:absolute;top:max(1rem,env(safe-area-inset-top));left:50%;transform:translate(-50%);z-index:5;color:#fff;font-size:.85rem;font-weight:600;background:#ffffff1f;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:#ffffff24;border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}.lbx-nav:active{background:#ffffff47}.lbx-nav.prev{left:.7rem}.lbx-nav.next{right:.7rem}@media(min-width:781px){.lbx-nav{width:54px;height:54px}}.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:#ffffff7a;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:#ffffffd9}.vc-tab-strip a.on{color:#fff;background:transparent;border-color:#ffffffb3;font-weight:700}[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}[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:#0f172299}[data-theme=light] .nav-links a:hover{color:#0f1722;background:#0f17220f}[data-theme=light] .nav-links a.on{color:#0f1722;border-color:#0f172273}[data-theme=light] .nav-back{color:#0f172280}[data-theme=light] .nav-back:hover{color:#0f1722}[data-theme=light] .vc-tab-strip a{color:#0f17228c}[data-theme=light] .vc-tab-strip a:hover{color:#0f1722}[data-theme=light] .vc-tab-strip a.on{color:#0f1722;border-color:#0f172280}[data-theme=light] .vc-ctl-btn{color:#0f1722}[data-theme=light] .vc-ctl-btn:hover{background:#0f172212}[data-theme=light] .vc-user-btn{background:none;border-color:transparent}[data-theme=light] .vc-user-btn:hover{background:#0f17220f}[data-theme=light] .vc-avatar-guest{background:#0f17221a;color:#0f1722}[data-theme=light] .vc-chevron{color:#0f17228c}[data-theme=light] .vc-login-link{color:#0f1722b3}[data-theme=light] .vc-login-link:hover{color:#0f1722}[data-theme=light] .vc-register-link{color:#0f1722;border-color:#0f172247}[data-theme=light] .vc-register-link:hover{background:#0f17220f;border-color:#0f172280}[data-theme=light] .vc-help-link{color:#0f1722;border-color:#0f172247}[data-theme=light] .vc-help-link:hover{background:#0f17220f;border-color:#0f172280}@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}}.ldm-deskgrid{display:none}@media(min-width:981px){.ldm-stage,.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:#08101e99;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:#0000008c;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;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 km</option><option value="10000">10 km</option><option value="25000">25 km</option><option value="50000">50 km</option><option value="100000">100 km</option></select> <select id="sbKmBis" onchange="filterCards()"><option value="">bis</option><option value="10000">10 km</option><option value="25000">25 km</option><option value="50000">50 km</option><option value="75000">75 km</option><option value="100000">100 km</option><option value="150000">150 km</option><option value="200000">200 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.8 kg</option><option value="3500">3.5 kg</option><option value="5000">5 kg</option><option value="7500">7.5 kg</option></select> <select id="sbGgwBis" onchange="filterCards()"><option value="">bis</option><option value="3500">3.5 kg</option><option value="5000">5 kg</option><option value="7500">7.5 kg</option><option value="12000">12 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"});} 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();} function _fzChip(ic,txt){+ "</div>" + "</div>" + "</div></div>";});grid.innerHTML = html;var n=displayList.length;setCount(n.toLocaleString("de-DE") + " " + (n!==1 ? "Angebote" : "Angebot"))}// 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;})}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}["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(); } 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} #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} #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%} .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} .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)} .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} .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%)} .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,.1);border:1px solid rgba(22,163,74,.3);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)}}}})}})})})}}