/* Heights relative to the screen: svh where supported. On an iPhone plain vh
is the height with Safari's toolbars hidden, so an 88vh box is taller than
what is visible while they show - centred overlays then lost their header
off the top edge. */
var vvh=n=>(window.CSS&&CSS.supports&&CSS.supports('height','1svh'))?n+'svh':n+'vh';
/* Empty search result -> the same "notify me" capture the homepage uses
on its no-match path, so a visitor who finds nothing still leaves a
contact. Copy and field set mirror #dreamspec-nomatch. */
function NoResultsNotify({onReset}){
var [sent,setSent]=React.useState(false);
var [f,setF]=React.useState({first:'',last:'',email:'',phone:'',method:'E-Mail'});
function set(k,v){setF(function(s){var n=Object.assign({},s);n[k]=v;return n;});}
var valid=f.first.trim()&&f.last.trim()&&/.+@.+\..+/.test(f.email);
var lbl={display:'block',fontSize:12,fontWeight:700,color:'var(--fg-primary)',marginBottom:6};
var inp={width:'100%',boxSizing:'border-box',padding:'11px 12px',fontSize:14,
border:'1px solid var(--border-default,#e2ddd2)',borderRadius:10,
fontFamily:'var(--font-body)',outline:'none',background:'#fff'};
var pill={display:'flex',alignItems:'center',justifyContent:'center',gap:6,
border:'1px solid var(--border-default,#e2ddd2)',borderRadius:10,
padding:'9px 6px',fontSize:12,fontWeight:500,cursor:'pointer'};
if(sent) return
Danke — wir melden uns.
Sobald ein passendes Fahrzeug eintrifft, benachrichtigen wir Sie.
;
return
Aktuell keine Treffer
Hinterlassen Sie Ihre Kontaktdaten und wir benachrichtigen Sie, sobald ein
passendes Fahrzeug verfügbar ist.
set('first',e.target.value)}/>
set('last',e.target.value)}/>
set('email',e.target.value)}/>
set('phone',e.target.value)}/>
{/* One channel only: these notifications go out through Mailchimp. */}
Sie werden als Erste oder Erster per E-Mail benachrichtigt, sobald ein passendes Fahrzeug eintrifft.
;
}
/* Auto-cycling hero images. Same behaviour as the static pages: runs only
while on screen, and holds still under prefers-reduced-motion. State is
kept as one object so idx/prev always advance together. */
function ImageCycle({images,duration}){
var secs=duration||2.5;
var [st,setSt]=React.useState({idx:0,prev:-1});
var ref=React.useRef(null);
React.useEffect(function(){
if(!images||images.length<2)return;
if(window.matchMedia&&window.matchMedia('(prefers-reduced-motion:reduce)').matches)return;
var el=ref.current; if(!el)return;
var timer=null;
var io=new IntersectionObserver(function(entries){
if(entries[0].isIntersecting){
if(!timer)timer=setInterval(function(){
setSt(function(s){return {idx:(s.idx+1)%images.length,prev:s.idx};});
},secs*1000);
}else{ clearInterval(timer); timer=null; }
},{threshold:0});
io.observe(el);
return function(){ clearInterval(timer); io.disconnect(); };
},[images,secs]);
return
{images.map(function(src,n){
var state=n===st.idx?'active':(n===st.prev?'previous':'not-active');
return
;
})}
;
}
window.VOITEL_HERO_CYCLE=['assets/photos/hero-cycle-1.jpg','assets/photos/hero-cycle-2.jpg','assets/photos/hero-cycle-3.jpg'];
const isTouchDevice=typeof window!=='undefined'&&(window.matchMedia('(hover:none)').matches||window.matchMedia('(max-width:1024px)').matches);
function ListingRow({v,onOpen,compareSelected,onToggleCompare,compareDisabled,isFavorite,onToggleFavorite,primaryLabel,onPrimary,secondaryLabel,onSecondary,showCompareCheckbox=true}){
const photos=v.photos&&v.photos.length?v.photos:null;
const [frame,setFrame]=React.useState(0);
const [hovered,setHovered]=React.useState(false);
function prevFrame(e){e.stopPropagation();setFrame(f=>(f-1+photos.length)%photos.length);}
function nextFrame(e){e.stopPropagation();setFrame(f=>(f+1)%photos.length);}
const dot=' · ';
/* Finger-swipe through the card's photos. Horizontal intent only, so a
vertical drag still scrolls the page; a completed swipe then swallows the
click the browser fires afterwards, which would otherwise open the
vehicle mid-gesture. */
const touchRef=React.useRef(null), swipedRef=React.useRef(false);
function onTouchStart(e){var t=e.touches[0];touchRef.current={x:t.clientX,y:t.clientY};swipedRef.current=false;}
function onTouchEnd(e){
if(!touchRef.current||!photos||photos.length<2)return;
var t=e.changedTouches[0],dx=t.clientX-touchRef.current.x,dy=t.clientY-touchRef.current.y;
touchRef.current=null;
if(Math.abs(dx)<40||Math.abs(dx)onOpen(v)} className="v-listing-row" style={{cursor:'pointer',background:'#fff',borderRadius:'var(--radius-m)',padding:24,minWidth:0,width:'100%'}}>
{window.voitelIsFresh&&window.voitelIsFresh(v)&&
Frisch eingetroffen
}
setHovered(true)} onMouseLeave={()=>setHovered(false)} onTouchStart={onTouchStart} onTouchEnd={onTouchEnd} onClickCapture={swallowClickAfterSwipe} style={{position:'relative',height:290,borderRadius:'var(--radius-m)',overflow:'hidden',background:photos?`url(${photos[frame]}) center/cover`:v.img.light,touchAction:'pan-y'}}>
{v.offer&&Sonderangebot}
{/* Mirror of the Sonderangebot pill on the opposite corner of the same
photo - same 10px inset and pill radius, so the two read as a pair.
It used to sit on the card root, floating over the card's border with
nothing to anchor to. */}
{v._groupCount>1&&{v._groupCount} verfügbar}
{/* Was window.fmtPrice(Math.round(v.price*1.12/100)*100) - a struck-through
"former price" invented by adding 12%. Only a real UVP from the import
is shown now, and nothing at all when there is none. */}
{(function(){var uvp=window.voitelMsrp&&window.voitelMsrp(v);return uvp?{window.fmtPrice(uvp)}:null;})()}
{window.fmtPrice(v.price)}MwSt. ausweisbar
{showCompareCheckbox?:secondaryLabel&&}
{showCompareCheckbox&&}
{v.energyLabel&&
Kraftstoffverbrauch (kombiniert): {v.energyLabel.consumption} l/100 km · CO₂-Emissionen (kombiniert): {v.energyLabel.co2} g/km
;
}
function PortalCard({v,onOpen,compareSelected,onToggleCompare,compareDisabled,isFavorite,onToggleFavorite}){
const oldPrice=Math.round(v.price*1.12/100)*100;
const photos=v.photos&&v.photos.length?v.photos.slice(0,5):null;
const totalFrames=photos?photos.length+1:2;
const [frame,setFrame]=React.useState(0);
const [hovered,setHovered]=React.useState(false);
const [open,setOpen]=React.useState(false);
const [showContact,setShowContact]=React.useState(false);
const msg=encodeURIComponent(`Hallo, ich interessiere mich für den ${v.brand} ${v.model} mit dem Preisschild von ${window.fmtPrice(v.price)}. ${location.href}`);
function prevFrame(e){e.stopPropagation();setFrame(f=>(f-1+totalFrames)%totalFrames);}
function nextFrame(e){e.stopPropagation();setFrame(f=>(f+1)%totalFrames);}
return
;
}
function HeroCard({hero,onOpenVehicle,favorites,compareList,toggleCompare,onToggleFavorite}){
const photos=hero.photos&&hero.photos.length?hero.photos.slice(0,5):null;
const [frame,setFrame]=React.useState(0);
const [hovered,setHovered]=React.useState(false);
function prevFrame(e){e.stopPropagation();setFrame(f=>(f-1+photos.length)%photos.length);}
function nextFrame(e){e.stopPropagation();setFrame(f=>(f+1)%photos.length);}
return
;
}
function MarketScreenPortal({onOpenVehicle,onOpenSavedSearch,onOpenTradeIn,compareList,setCompareList,onOpenCompare,favorites,onToggleFavorite,onLimitReached}){
const {Select,Button,Badge,Input}=window.AutohausVoitelDesignSystem_21e950;
const [searchOpen,setSearchOpen]=React.useState(false);
const [recentSearches,setRecentSearches]=React.useState(()=>{try{return JSON.parse(localStorage.getItem('voitel_recent_searches')||'[]');}catch(e){return [];}});
const searchWrapRef=React.useRef(null);
const suggestions=['Elektrofahrzeug mit hoher Reichweite','Puma Gen-E unter 30.000 km','Kombi mit Anhängerkupplung'];
function commitSearch(q){
if(!q)return;
setFilter('modelText',q);
setRecentSearches(prev=>{const next=[q,...prev.filter(x=>x!==q)].slice(0,5);try{localStorage.setItem('voitel_recent_searches',JSON.stringify(next));}catch(e){}return next;});
setSearchOpen(false);
setBrowseAll(true);
}
React.useEffect(()=>{
function onDocClick(e){if(searchWrapRef.current&&!searchWrapRef.current.contains(e.target))setSearchOpen(false);}
document.addEventListener('mousedown',onDocClick);
return ()=>document.removeEventListener('mousedown',onDocClick);
},[]);
function toggleCompare(v){setCompareList(cl=>{if(cl.find(x=>x.id===v.id))return cl.filter(x=>x.id!==v.id);if(cl.length>=2){onLimitReached&&onLimitReached();return cl;}return [...cl,v];});}
const count=window.VOITEL_MARKET.length;
/* 'Frisch eingetroffen' is driven by firstSeenDate, not hardcoded ids.
Newest first; the hero is the newest arrival. */
const freshList=window.voitelCollapse(window.VOITEL_MARKET
.filter(v=>window.voitelIsFresh&&window.voitelIsFresh(v))
.sort((a,b)=>new Date(b.firstSeenDate)-new Date(a.firstSeenDate)));
const hero=freshList[0]||window.VOITEL_MARKET.find(v=>v.offer)||window.VOITEL_MARKET[0];
const dayDeals=freshList.slice(1,5);
const emptyFilters={brand:'Alle Marken',modelText:'',yearFrom:'',type:'Alle Typen',transmission:'Alle',fuel:'Alle',priceMin:'',priceMax:'',kmMax:'',dispMin:'',powerMin:'',seats:'Alle',electric:false,offer:false,/* advanced search */ brands:[],modelExt:'',bodyCats:[],usage:[],fuels:[],priceFrom:'',priceTo:'',vat:false,finFrom:'',finTo:'',leaseFrom:'',leaseTo:'',drive:'Alle',colorOut:'Alle',colorIn:'Alle',equip:[]};
/* The results view is a real step in the journey, so it gets its own history
entry. Without one, Back from an open vehicle popped straight past the
results to the portal landing, because browseAll lived only in React state
and nothing in the URL described it. Every existing setBrowseAll call site
keeps working - the wrapper just syncs the URL alongside the state. */
var VIEW_DEFAULT=false; /* this page opens on the portal landing */
const [browseAll,setBrowseAllState]=React.useState(function(){
try{var p=new URLSearchParams(location.search);return p.has('view')?p.get('view')==='results':VIEW_DEFAULT;}catch(e){return VIEW_DEFAULT;}
});
function setBrowseAll(on){
setBrowseAllState(on);
try{
var u=new URL(location.href);
u.searchParams.set('view',on?'results':'landing');
u.searchParams.delete('vehicle');
var next=u.pathname+u.search;
if(next!==location.pathname+location.search)
history.pushState(Object.assign({},history.state||{},{view:on?'results':null}),'',next);
}catch(e){}
}
React.useEffect(function(){
function syncFromUrl(){
try{
var p=new URLSearchParams(location.search);
setBrowseAllState(p.has('view')?p.get('view')==='results':VIEW_DEFAULT);
/* restore the search as well, or Back lands on the results with
everyone else's filters */
var s=voitelReadSearch();
setFiltersState(s.filters);
setSort(s.sort);
setFreshOnly(p.get('fresh')==='1'||window.VOITEL_FRESH_ONLY===true);
}catch(e){}
}
window.addEventListener('popstate',syncFromUrl);
return function(){window.removeEventListener('popstate',syncFromUrl);};
},[]);
const [freshOnly,setFreshOnly]=React.useState(function(){try{return window.VOITEL_FRESH_ONLY===true||new URLSearchParams(location.search).get('fresh')==='1';}catch(e){return window.VOITEL_FRESH_ONLY===true;}});
const [advOpen,setAdvOpen]=React.useState(false);
/* The search lives in the URL, so Back returns to the results the visitor was
actually reading - and so a search can be shared or bookmarked. One named
parameter per filter (?brand=Ford&model=Kuga) rather than an encoded blob.
Only values that differ from the defaults are written, so a plain listing
URL stays clean. */
var VOITEL_SEARCH_PARAMS={
brand:'brand', modelText:'model', yearFrom:'year', type:'type',
transmission:'transmission', fuel:'fuel', priceMin:'priceMin', priceMax:'priceMax',
kmMax:'kmMax', dispMin:'dispMin', powerMin:'powerMin', seats:'seats',
electric:'electric', offer:'offer',
/* Erweiterte Suche */
brands:'brands', modelExt:'modelExt', bodyCats:'bodyCats', usage:'usage', fuels:'fuels',
priceFrom:'priceFrom', priceTo:'priceTo', vat:'vat',
finFrom:'finFrom', finTo:'finTo', leaseFrom:'leaseFrom', leaseTo:'leaseTo',
drive:'drive', colorOut:'colorOut', colorIn:'colorIn', equip:'equip'
};
function voitelReadSearch(){
var out={filters:Object.assign({},emptyFilters),sort:'Neu hinzugefügt'};
try{
var q=new URLSearchParams(location.search);
/* links shared before the readable parameters landed */
var legacy=q.get('f');
if(legacy)out.filters=Object.assign({},emptyFilters,JSON.parse(legacy));
Object.keys(VOITEL_SEARCH_PARAMS).forEach(function(k){
var p=VOITEL_SEARCH_PARAMS[k];
if(!q.has(p))return;
var raw=q.get(p), def=emptyFilters[k];
if(Array.isArray(def)) out.filters[k]=raw?raw.split(',').filter(Boolean):[];
else if(typeof def==='boolean') out.filters[k]=(raw==='1'||raw==='true');
else out.filters[k]=raw;
});
if(q.get('sort'))out.sort=q.get('sort');
}catch(e){}
return out;
}
var voitelInitialSearch=voitelReadSearch();
const [sort,setSort]=React.useState(voitelInitialSearch.sort);
const [filters,setFiltersState]=React.useState(voitelInitialSearch.filters);
function setFilter(k,v){setFiltersState(s=>({...s,[k]:v}));}
function resetFilters(){setFiltersState(emptyFilters);}
/* replaceState, not push: narrowing a search refines the current view rather
than adding a step, so Back still leaves the results in one go - but the
entry the vehicle pushes on top carries the search with it. */
React.useEffect(function(){
try{
var u=new URL(location.href);
Object.keys(VOITEL_SEARCH_PARAMS).forEach(function(k){
var p=VOITEL_SEARCH_PARAMS[k], v=filters[k], def=emptyFilters[k];
if(JSON.stringify(v)===JSON.stringify(def)){u.searchParams.delete(p);return;}
if(Array.isArray(v))u.searchParams.set(p,v.join(','));
else if(typeof v==='boolean')u.searchParams.set(p,'1');
else u.searchParams.set(p,String(v));
});
u.searchParams.delete('f'); /* superseded by the named parameters */
if(sort&&sort!=='Neu hinzugefügt')u.searchParams.set('sort',sort); else u.searchParams.delete('sort');
if(freshOnly)u.searchParams.set('fresh','1'); else u.searchParams.delete('fresh');
var next=u.pathname+decodeURIComponent(u.search).replace(/ /g,'%20');
if(next!==location.pathname+decodeURIComponent(location.search).replace(/ /g,'%20'))
history.replaceState(history.state,'',next);
}catch(e){}
},[filters,sort,freshOnly]);
let list=window.VOITEL_MARKET.filter(v=>{
if(freshOnly&&!(window.voitelIsFresh&&window.voitelIsFresh(v)))return false;
/* --- Erweiterte Suche --- */
if(filters.brands.length&&filters.brands.indexOf(v.brand)===-1)return false;
if(filters.modelExt&&!String(v.modelExtension||v.model||'').toLowerCase().includes(filters.modelExt.toLowerCase()))return false;
if(filters.bodyCats.length&&filters.bodyCats.indexOf(window.voitelBodyCategory(v.type))===-1)return false;
if(filters.usage.length&&filters.usage.indexOf(v.condition)===-1)return false;
if(filters.fuels.length&&!filters.fuels.some(f=>window.voitelFuelGroup(v.fuel)===f))return false;
if(filters.priceFrom&&v.priceNumber(filters.priceTo))return false;
if(filters.vat&&!v.vatDeductible)return false;
if(filters.drive!=='Alle'&&v.driveMechanism!==filters.drive)return false;
if(filters.colorOut!=='Alle'&&v.basePaintColor!==filters.colorOut)return false;
if(filters.colorIn!=='Alle'&&v.seatCoverBaseColor!==filters.colorIn)return false;
if(filters.equip.length&&!filters.equip.every(e=>window.voitelHasEquip(v,e)))return false;
/* Finanzierung / Leasing: no monthly-rate field exists in the API data, so these
are intentionally NOT applied - see the notice rendered in the panel. */
if(filters.brand!=='Alle Marken'&&v.brand!==filters.brand)return false;
if(filters.modelText&&!(v.model+' '+v.brand).toLowerCase().includes(filters.modelText.toLowerCase()))return false;
/* v.type holds the raw AUTOMANAGER body name ("Geländewagen", "Coupé"),
while the dropdown lists categories, so an exact match found almost
nothing. Same grouping the Erweiterte Suche panel already uses. */
if(filters.type!=='Alle Typen'&&window.voitelBodyCategory(v.type)!==filters.type)return false;
if(filters.transmission!=='Alle'&&v.transmission!==filters.transmission)return false;
if(filters.fuel!=='Alle'&&window.voitelFuelGroup(v.fuel)!==filters.fuel)return false;
/* v.fuel holds raw values ("Super", "Plug-In-Hybrid (Benzin/Elektro)"), so an
exact match against the dropdown's groups only ever hit a handful. */
if(filters.yearFrom){var _y=String(v.firstReg||'').match(/(\d{4})/); if(!_y||Number(_y[1])Number(filters.priceMax))return false;
if(filters.kmMax&&v.km>Number(filters.kmMax))return false;
if(filters.dispMin&&v.displacement=7:v.seats===Number(filters.seats)))return false;
if(filters.electric&&!v.electric)return false;
if(filters.offer&&!v.offer)return false;
return true;
});
if(sort==='Preis aufsteigend')list=[...list].sort((a,b)=>a.price-b.price);
else if(sort==='Preis absteigend')list=[...list].sort((a,b)=>b.price-a.price);
else if(sort==='Verfügbare Angebote')list=list.filter(v=>v.offer);
else list=[...list].sort((a,b)=>new Date(b.added)-new Date(a.added));
/* The cards stay collapsed - one per group - but every count reported to
the visitor is of real inventory units, so a group of 6 identical vans
counts 6. Taken before the collapse, after all filtering. */
const unitCount=list.length;
/* collapse duplicate listings to one card per group (listing view only) */
list=window.voitelCollapse?window.voitelCollapse(list):list;
const FilterPanel=window.FilterPanelExport;
const [mobileFiltersOpen,setMobileFiltersOpen]=React.useState(false);
if(browseAll)return
e.stopPropagation()} style={{background:'#fff',borderRadius:'20px 20px 0 0',padding:20,width:'100%',maxHeight:vvh(80),overflowY:'auto',WebkitOverflowScrolling:'touch',overscrollBehavior:'contain',touchAction:'pan-y'}}>
setFilter('modelText',e.target.value)}/>
}
{/* The toolbar stays in view while the results scroll. top tracks the
measured nav height, like the detail page's tab strip, and the negative
margins let the white background span the column's padding so rows do
not show through as they pass under it. */}
Jetzt anrufen
Per WhatsApp
Per E-Mail
setSearchOpen(true)} onChange={e=>{setFilter('modelText',e.target.value);setSearchOpen(true);}} onKeyDown={e=>{if(e.key==='Enter')commitSearch(filters.modelText);}} style={{width:'100%',padding:'16px 16px 16px 46px',fontSize:16,borderRadius:'var(--radius-pill)',border:'1px solid var(--border-default)',outline:'none',fontFamily:'inherit',background:'#fff',color:'var(--fg-primary)',position:'relative'}}/>
{searchOpen&&
{q}
{s}
{it}