/* 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';
function fmtPrice(n){return n.toLocaleString('de-DE')+' €';}
function financingRate(price,months,downPct,ratePct){
const principal=price*(1-downPct/100);
const monthlyRate=ratePct/100/12;
if(monthlyRate===0)return principal/months;
const r=monthlyRate;
return (principal*r)/(1-Math.pow(1+r,-months));
}
function WipeButton({href,onClick,defaultBg,hoverBg,defaultColor,hoverColor,children,radius=16,padding='18px 0',fontSize=16,fontWeight=700,border,target,rel,extraClass}){
const Tag=href?'a':'button';
return <Tag href={href} onClick={onClick} target={target} rel={rel} className={"wipe-btn"+(extraClass?" "+extraClass:"")} style={{width:'100%',borderRadius:radius,border:border||'none'}}>
<span className="wipe-btn__default" style={{background:defaultBg,color:defaultColor,borderRadius:radius,padding,fontSize,fontWeight,fontFamily:'var(--font-body)'}}>{children}</span>
<span className="wipe-btn__hover" style={{background:hoverBg,color:hoverColor,borderRadius:radius,padding,fontSize,fontWeight,fontFamily:'var(--font-body)',position:'absolute',top:0,left:0}}>{children}</span>
</Tag>;
}
function MediaCenter({photos,onClose}){
const half=Math.ceil(photos.length/2);
const categories=[{key:'exterior',label:'Außenansichten',photos:photos.slice(0,half),offset:0},{key:'interior',label:'Innenansichten',photos:photos.slice(half),offset:half}];
/* Thumbnails: the originals are ~1MB each (4080x3072), so 40 of them took
   about 7s to appear. This CDN returns exactly the box asked for and
   &w= alone squashes the height, so both are sent at the photos' 4:3. */
function thumb(u){return u&&u.indexOf('&w=')===-1?u+'&w=1000&h=750':u;}
const refs={exterior:React.useRef(null),interior:React.useRef(null)};
function jump(key){refs[key].current&&refs[key].current.scrollIntoView({behavior:'smooth',block:'start'});}
const [viewerIdx,setViewerIdx]=React.useState(null);
/* The viewer used to be scoped to the category that was clicked, so the
   arrows only ever walked half the set. It now indexes the full list. */
function openViewer(globalIndex){setViewerIdx(globalIndex);}
function closeViewer(){setViewerIdx(null);}
const activePhotos=photos;
function prev(){setViewerIdx(i=>(i-1+activePhotos.length)%activePhotos.length);}
function next(){setViewerIdx(i=>(i+1)%activePhotos.length);}
return <div data-lenis-prevent style={{position:'fixed',inset:0,background:'#fff',zIndex:400,overflowY:'auto',padding:'32px 40px',WebkitOverflowScrolling:'touch'}}>
<button onClick={onClose} style={{border:'none',background:'none',display:'flex',alignItems:'center',gap:8,color:'var(--fg-secondary)',fontSize:14,fontWeight:600,cursor:'pointer',padding:0,marginBottom:32}}><img src="https://unpkg.com/lucide-static@0.469.0/icons/arrow-left.svg" width={15}/>Zurück zur Fahrzeugansicht</button>
<div style={{display:'flex',gap:16,marginBottom:40}}>
{categories.map(c=><div key={c.key} onClick={()=>jump(c.key)} style={{cursor:'pointer',width:150,background:'#fff',borderRadius:16,boxShadow:'0 8px 24px rgba(0,0,0,.08)',overflow:'hidden'}}>
<div style={{height:110,overflow:'hidden'}}><img src={thumb(c.photos[0])} loading="lazy" decoding="async" style={{width:'100%',height:'100%',objectFit:'cover'}}/></div>
<div style={{display:'flex',alignItems:'center',justifyContent:'space-between',gap:8,fontSize:14,fontWeight:600,color:'#141414',padding:'14px 12px'}}>{c.label}<span style={{background:'var(--slate-100)',borderRadius:999,padding:'4px 10px',fontSize:12}}>{c.photos.length}</span></div>
</div>)}
</div>
{categories.map(c=><div key={c.key} ref={refs[c.key]} style={{marginBottom:48}}>
<div style={{display:'flex',alignItems:'center',gap:12,marginBottom:20}}>
<h2 style={{fontFamily:'var(--font-display)',fontWeight:800,fontSize:28,margin:0,color:'#141414'}}>{c.label}</h2>
<span style={{background:'var(--slate-100)',borderRadius:999,padding:'4px 12px',fontSize:13,fontWeight:600,color:'var(--fg-secondary)'}}>{c.photos.length} Bilder</span>
</div>
<div style={{columnCount:2,columnGap:12}}>
{c.photos.map((p,i)=><div key={i} onClick={()=>openViewer(c.offset+i)} style={{cursor:'pointer',marginBottom:12,breakInside:'avoid'}}><img src={thumb(p)} loading="lazy" decoding="async" style={{width:'100%',display:'block',aspectRatio:'4 / 3',objectFit:'cover',background:'var(--slate-100,#eee)',borderRadius:12}}/></div>)}
</div>
</div>)}
{viewerIdx!==null&&<div style={{position:'fixed',inset:0,background:'#000',zIndex:500,display:'flex',alignItems:'center',justifyContent:'center'}}>
<span style={{position:'absolute',top:24,left:24,color:'#fff',fontSize:14,background:'rgba(255,255,255,.12)',borderRadius:999,padding:'8px 16px'}}>{viewerIdx+1} / {activePhotos.length}</span>
<button onClick={closeViewer} aria-label="Schließen" style={{position:'absolute',top:20,right:24,border:'none',background:'rgba(255,255,255,.12)',color:'#fff',fontSize:20,cursor:'pointer',width:40,height:40,borderRadius:'50%'}}>×</button>
<button onClick={prev} aria-label="Zurück" style={{position:'absolute',left:24,top:'50%',transform:'translateY(-50%)',width:44,height:44,borderRadius:'50%',border:'none',background:'rgba(255,255,255,.12)',color:'#fff',fontSize:20,cursor:'pointer'}}>‹</button>
<button onClick={next} aria-label="Weiter" style={{position:'absolute',right:24,top:'50%',transform:'translateY(-50%)',width:44,height:44,borderRadius:'50%',border:'none',background:'rgba(255,255,255,.12)',color:'#fff',fontSize:20,cursor:'pointer'}}>›</button>
<img src={activePhotos[viewerIdx]} style={{maxWidth:'80vw',maxHeight:vvh(86),objectFit:'contain',borderRadius:12}}/>
</div>}
</div>;
}
function GalleryGrid({photos,vehicle,onShowSiblings}){
const {Badge}=window.AutohausVoitelDesignSystem_21e950;
const [openGallery,setOpenGallery]=React.useState(false);
return <div style={{position:'relative'}}>
<div style={{display:'grid',gridTemplateColumns:'1.6fr 1fr',gridTemplateRows:'1fr 1fr',gap:12,height:560}} className="avd-gallery-grid">
<div style={{gridRow:'1 / 3',position:'relative',overflow:'hidden',cursor:'pointer',borderRadius:12}} onClick={()=>setOpenGallery(true)}>
{/* On phones the grid restacks and the adjacent photo drops to a small
    tile in the second row, which left the badge stranded down there. A
    copy rides the hero photo and CSS shows whichever fits the layout. */}
{(function(){var n=(window.voitelSiblings&&vehicle)?window.voitelSiblings(vehicle).length:0;return n>0?<button type="button" className="mkt-count-badge mkt-count-badge-onimg mkt-count-badge-btn mkt-count-badge-hero-tile" title={'Alle '+(n+1)+' baugleichen Fahrzeuge anzeigen'} onClick={e=>{e.stopPropagation();onShowSiblings&&onShowSiblings();}}>{n+1} verfügbar</button>:null;})()}
<img src={photos[0]} style={{width:'100%',height:'100%',objectFit:'cover',display:'block'}}/>
<div style={{position:'absolute',top:16,left:16,display:'flex',gap:8}}>
<Badge tone="neutral">{photos.length} Bilder</Badge>
</div>
<div style={{position:'absolute',bottom:16,left:16,display:'flex',alignItems:'center',gap:8,background:'rgba(20,20,20,.85)',color:'#fff',borderRadius:999,padding:'8px 16px',fontSize:13,fontWeight:600}}>
<img src="https://unpkg.com/lucide-static@0.469.0/icons/images.svg" width={15} style={{filter:'invert(1)'}}/>Galerie öffnen
</div>
</div>
{photos.slice(1,3).map((p,i)=><div key={i} style={{overflow:'hidden',position:'relative',cursor:'pointer',borderRadius:12}} onClick={()=>setOpenGallery(true)}><img src={p} style={{width:'100%',height:'100%',objectFit:'cover',display:'block'}}/>{/* Same availability pill as the result cards, on the photo beside the
    hero shot. Only for vehicles that actually have duplicates; the count
    includes this unit, matching what the listing card shows. */}
{i===0&&(function(){var n=(window.voitelSiblings&&vehicle)?window.voitelSiblings(vehicle).length:0;return n>0?<button type="button" className="mkt-count-badge mkt-count-badge-onimg mkt-count-badge-btn mkt-count-badge-second-tile" title={'Alle '+(n+1)+' baugleichen Fahrzeuge anzeigen'} onClick={e=>{e.stopPropagation();onShowSiblings&&onShowSiblings();}}>{n+1} verfügbar</button>:null;})()}</div>)}
</div>
{openGallery&&<MediaCenter photos={photos} onClose={()=>setOpenGallery(false)}/>}
</div>;
}
function ColorSwatchRow({label,name,hex}){
return <div style={{display:'flex',alignItems:'center',gap:14}}>
<div style={{width:52,height:36,borderRadius:6,background:hex,border:'1px solid var(--border-subtle)',flexShrink:0}}/>
<div><div style={{fontSize:12,color:'var(--fg-muted)',marginBottom:2}}>{label}</div><div style={{fontSize:15,fontWeight:700,color:'var(--fg-primary)'}}>{name}</div></div>
</div>;
}
function SpecRowV2({label,value}){
return <div style={{padding:'14px 0',borderTop:'1px solid var(--border-subtle)'}}>
<div style={{fontSize:12,color:'var(--fg-muted)',marginBottom:4}}>{label}</div>
<div style={{fontSize:15,fontWeight:700,color:'var(--fg-primary)'}}>{value}</div>
</div>;
}
function BouncyTabsV2({tabs,active,onChange}){
const navRef=React.useRef(null);
const indicatorRef=React.useRef(null);
function place(){
const nav=navRef.current;if(!nav)return;
const btn=nav.querySelector('[data-active="true"]');
if(!btn||!indicatorRef.current)return;
indicatorRef.current.style.left=btn.offsetLeft+'px';
indicatorRef.current.style.width=btn.offsetWidth+'px';
indicatorRef.current.style.top=btn.offsetTop+'px';
indicatorRef.current.style.height=btn.offsetHeight+'px';
/* keep the active tab in view when the strip is scrolled sideways */
const wrap=nav.parentElement;
if(wrap&&wrap.scrollWidth>wrap.clientWidth){
const l=btn.offsetLeft+nav.offsetLeft, r=l+btn.offsetWidth;
if(l<wrap.scrollLeft) wrap.scrollTo({left:l-12,behavior:'smooth'});
else if(r>wrap.scrollLeft+wrap.clientWidth) wrap.scrollTo({left:r-wrap.clientWidth+12,behavior:'smooth'});
}
}
/* re-measure when the tabs themselves change too (a tab appearing shifts the rest) */
React.useEffect(()=>{place();window.addEventListener('resize',place);return()=>window.removeEventListener('resize',place);},[active,tabs.join('|')]);
return <div style={{background:'#1414140f',borderRadius:'100em',display:'inline-flex',padding:6,position:'relative'}} ref={navRef}>
<div ref={indicatorRef} style={{position:'absolute',zIndex:2,pointerEvents:'none',background:'#141414',borderRadius:'100em',transition:'left .35s cubic-bezier(.2,.9,.2,1.3),width .35s cubic-bezier(.2,.9,.2,1.3)'}}></div>
{tabs.map(t=><button key={t} data-active={t===active} onClick={()=>onChange(t)} style={{zIndex:3,color:t===active?'#fff':'#141414',background:'none',border:'none',borderRadius:'100em',padding:'10px 20px',fontSize:13,fontWeight:600,fontFamily:'var(--font-body)',cursor:'pointer',transition:'color .3s ease',position:'relative',whiteSpace:'nowrap'}}>{t}</button>)}
</div>;
}
function InquiryModal({v,onClose,onSubmit}){
const {Input,Select,Button}=window.AutohausVoitelDesignSystem_21e950;
const [kind,setKind]=React.useState('privat');
const [sent,setSent]=React.useState(false);
const checkRow={display:'flex',alignItems:'flex-start',gap:8,fontSize:13,color:'var(--fg-secondary)',lineHeight:1.5};
return <div className="avd-inquiry-modal" onClick={onClose} style={{position:'fixed',inset:0,background:'rgba(20,20,20,.5)',zIndex:300,display:'flex',alignItems:'center',justifyContent:'center',padding:24}}>
<div onClick={e=>e.stopPropagation()} style={{background:'#fff',borderRadius:20,width:'min(560px,92vw)',margin:'auto',maxHeight:vvh(88),display:'flex',flexDirection:'column',overflow:'hidden'}}>
<div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start',padding:'32px 32px 4px',flexShrink:0}}>
<div>
<div style={{fontFamily:'var(--font-display)',fontWeight:800,fontSize:22,color:'#141414'}}>Fahrzeug anfragen</div>
<div style={{fontSize:13,color:'var(--fg-muted)',marginTop:4}}>{v.brand} {v.model} · {v.price.toLocaleString('de-DE')} €</div>
</div>
<button onClick={onClose} aria-label="Schließen" style={{border:'none',background:'none',fontSize:22,cursor:'pointer',color:'var(--fg-muted)'}}>×</button>
</div>
<div style={{overflowY:'auto',WebkitOverflowScrolling:'touch',padding:'0 32px 32px',boxSizing:'border-box'}}>
{!sent?<React.Fragment>
<div style={{fontSize:13,fontWeight:700,color:'#141414',margin:'24px 0 10px'}}>Ich bin eine...</div>
<div style={{display:'flex',gap:10,marginBottom:24}}>
<label style={{flex:1,border:'1px solid var(--border-subtle)',borderRadius:10,padding:'12px 14px',display:'flex',alignItems:'center',gap:8,cursor:'pointer',fontSize:14,fontWeight:600,background:kind==='privat'?'#14141408':'#fff'}}><input type="radio" name="kind" checked={kind==='privat'} onChange={()=>setKind('privat')}/>Privatperson</label>
<label style={{flex:1,border:'1px solid var(--border-subtle)',borderRadius:10,padding:'12px 14px',display:'flex',alignItems:'center',gap:8,cursor:'pointer',fontSize:14,fontWeight:600,background:kind==='firma'?'#14141408':'#fff'}}><input type="radio" name="kind" checked={kind==='firma'} onChange={()=>setKind('firma')}/>Firma</label>
</div>

<div style={{fontSize:13,fontWeight:700,color:'#141414',marginBottom:10}}>Ansprechpartner</div>
<div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:14,marginBottom:18}}>
<Input label="Vorname *" placeholder="z.B. Max"/>
<Input label="Nachname *" placeholder="z.B. Müller"/>
</div>

{kind==='firma'&&<React.Fragment>
<div style={{fontSize:13,fontWeight:700,color:'#141414',marginBottom:10}}>Adresse</div>
<div style={{display:'grid',gridTemplateColumns:'1fr',gap:14,marginBottom:14}}>
<Input label="Firma *" placeholder="Firmenname"/>
</div>
<div style={{display:'grid',gridTemplateColumns:'2fr 1fr',gap:14,marginBottom:14}}>
<Input label="Straße" placeholder="Straße"/>
<Input label="Hausnummer" placeholder="Nr."/>
</div>
<div style={{display:'grid',gridTemplateColumns:'1fr 2fr',gap:14,marginBottom:18}}>
<Input label="Postleitzahl" placeholder="PLZ"/>
<Input label="Ort" placeholder="Ort"/>
</div>
</React.Fragment>}

<div style={{fontSize:13,fontWeight:700,color:'#141414',marginBottom:10}}>Kontakt</div>
<div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:14,marginBottom:18}}>
<Input label="Telefon *" type="tel" placeholder="+49 …"/>
<Input label="E-Mail *" type="email" placeholder="sie@beispiel.de"/>
</div>

<div style={{fontSize:13,fontWeight:700,color:'#141414',marginBottom:10}}>Fragen oder Wünsche</div>
<div style={{display:'flex',flexDirection:'column',gap:10,marginBottom:14}}>
<label style={checkRow}><input type="checkbox" style={{marginTop:2}}/>Ich möchte ein individuelles Finanzierungs- / Leasingangebot</label>
<label style={checkRow}><input type="checkbox" style={{marginTop:2}}/>Ich möchte einen Beratungstermin vereinbaren</label>
</div>
<div style={{marginBottom:18}}>
<div style={{fontSize:12,fontWeight:700,color:'#141414',marginBottom:6}}>Weitere Hinweise</div>
<textarea placeholder="Ihre Nachricht…" style={{width:'100%',minHeight:80,border:'1px solid var(--border-subtle)',borderRadius:10,padding:'10px 12px',fontSize:14,fontFamily:'var(--font-body)',resize:'vertical',boxSizing:'border-box'}}></textarea>
</div>

<label style={{...checkRow,marginBottom:20}}><input type="checkbox" style={{marginTop:3}}/>Ich stimme der Verarbeitung meiner Daten zu, um die Anfrage zu beantworten. Ich habe die Widerrufsbelehrung und die Folgen zur Kenntnis genommen in den Datenschutzbestimmungen. *</label>

<div style={{fontSize:11.5,color:'var(--fg-muted)',marginBottom:16}}>* Pflichtfeld</div>

<Button variant="primary" onClick={e=>{
  /* sent to anfrage@ (form-send.js); the thanks only once it went through */
  const btn=e.currentTarget, root=btn.closest('.avd-inquiry-modal > div');
  const lead={vehicleId:v.id,brand:v.brand,model:v.model,name:(v.brand+' '+v.model),price:v.price,offerNo:v.offerNo,vin:v.vin,url:location.href,at:new Date().toISOString()};
  if(!window.voitelSendForm){setSent(true);onSubmit&&onSubmit(lead);return;}
  window.voitelFormTrap(root);
  window.voitelSendForm('fahrzeuganfrage',root,{anchor:btn,vehicle:{name:lead.name,offerNo:v.offerNo,price:v.price,url:location.origin+'/fahrzeug-detail?vehicle='+encodeURIComponent(v.id)}})
    .then(ok=>{if(!ok)return;setSent(true);onSubmit&&onSubmit(lead);});
}} style={{width:'100%'}}>Absenden</Button>
</React.Fragment>:
<div style={{textAlign:'center',padding:'32px 0'}}>
<div style={{fontWeight:800,fontSize:18,color:'#141414',marginBottom:8}}>Danke für Ihre Anfrage!</div>
<p style={{fontSize:14,color:'var(--fg-muted)'}}>Unser Team meldet sich in Kürze bei Ihnen.</p>
</div>}
</div>
</div>
</div>;
}
function fmtEurDe(n){try{return new Intl.NumberFormat('de-DE',{style:'currency',currency:'EUR',minimumFractionDigits:2,maximumFractionDigits:2}).format(n);}catch(e){return n+' \u20ac';}}
function VehicleDetailV2({vehicle:v,onOpenVehicle,onReserve,onShare,onOpenTradeIn,favorites,onToggleFavorite,onSubmitInquiry}){
const {Badge}=window.AutohausVoitelDesignSystem_21e950;
const [showInquiry,setShowInquiry]=React.useState(false);
const [showSibs,setShowSibs]=React.useState(false);
const msg=encodeURIComponent(`Hallo, ich interessiere mich für den ${v.brand} ${v.model} mit dem Preisschild von ${fmtPrice(v.price)}. ${location.href}`);
/* consumptionDataRequired=false vehicles carry no energyLabel, so the tab
   and its section are hidden entirely rather than rendering empty. */
const hasConsumption=!!(v.energyLabel&&(v.energyLabel.consumption||v.energyLabel.co2||v.energyLabel.co2class));
/* the dealer's own description (AUTOMANAGER), first when there is one */
const hasDesc=!!(v.desc&&String(v.desc).trim());
const sections=(hasDesc?['Fahrzeugbeschreibung']:[]).concat(['Technische Daten','Ausstattung','Weitere Ausstattungsmerkmale','Zustand & Historie']).concat(hasConsumption?['Verbrauchsinformationen']:[]);
const [section,setSection]=React.useState(sections[0]);
/* the full record (with the description) can arrive after the first render:
   the new first section becomes the active tab - unless the visitor already
   picked one */
const pickedTab=React.useRef(false);
React.useEffect(()=>{if(!pickedTab.current)setSection(sections[0]);},[hasDesc]);
const [navH,setNavH]=React.useState(90);
React.useEffect(function(){
function measure(){
var nav=document.querySelector('.gnav');
if(nav)setNavH(nav.offsetHeight);
}
measure();
window.addEventListener('resize',measure);
var t=setInterval(measure,300);
return function(){window.removeEventListener('resize',measure);clearInterval(t);};
},[]);
/* brand red (#CF0D11 = --brand-600), matching the Werkstatt-Termin CTA and price text.
   The palette already carried a 'brand' entry; the default was just never switched. */
const [ctaColor,setCtaColor]=React.useState('brand');
const palette={brand:{main:'#CF0D11',hover:'#970A0D',priceText:'#CF0D11'},navy:{main:'#1F1F1F',hover:'#141414',priceText:'#1F1F1F'}};
const c=palette[ctaColor];
const refs={'Fahrzeugbeschreibung':React.useRef(null),'Ausstattung':React.useRef(null),'Weitere Ausstattungsmerkmale':React.useRef(null),'Zustand & Historie':React.useRef(null),'Technische Daten':React.useRef(null),'Verbrauchsinformationen':React.useRef(null)};
function jump(s){pickedTab.current=true;setSection(s);refs[s].current&&refs[s].current.scrollIntoView({behavior:'smooth',block:'start'});}
const similar=window.VOITEL_MARKET.filter(x=>x.id!==v.id).slice(0,4);
const isFav=favorites&&favorites.find(f=>f.id===v.id);
const photos=v.photos&&v.photos.length?v.photos:[v.img?v.img.light:''];
return <div style={{maxWidth:1500,margin:'0 auto',padding:'24px 24px 100px',position:'relative'}} className="avd-container">
{/* Go back to wherever the visitor actually came from. Vehicles get real
    history entries (pushState per vehicle), so history.back() lands on the
    previous view; the listing reset is the fallback when this page was
    opened directly from a shared link. */}
<a href="#" onClick={e=>{e.preventDefault();
  var from=document.referrer,same=false;
  try{same=!!from&&new URL(from).origin===location.origin;}catch(_){}
  if(window.history.length>1&&(same||window.history.state)){window.history.back();}
  else if(onOpenVehicle){onOpenVehicle(null);}
  else{location.href='automarkt.html';}
}} style={{display:'flex',alignItems:'center',gap:8,color:'var(--fg-secondary)',fontSize:13,fontWeight:600,textDecoration:'none',marginBottom:16,background:'none',border:'none',cursor:'pointer'}}><img src="https://unpkg.com/lucide-static@0.469.0/icons/arrow-left.svg" width={14}/>Zurück</a>
<GalleryGrid photos={photos} vehicle={v} onShowSiblings={()=>setShowSibs(true)}/>
<div style={{display:'grid',gridTemplateColumns:'minmax(0,1fr) 420px',gap:48,marginTop:36}} className="avd-main-grid">
<div style={{paddingBottom:4}} className="avd-title-block">
<div style={{fontSize:13,fontWeight:600,color:'var(--fg-muted)',marginBottom:4,lineHeight:1.4}}>{v.brand}</div>
<div style={{fontFamily:'var(--font-display)',fontWeight:800,fontSize:34,lineHeight:1.2,letterSpacing:'normal',margin:'0 0 6px',color:'#141414'}} className="avd-model-title">{v.model}</div>
{v.energyLabel&&<div style={{fontSize:11.5,color:'var(--fg-muted)',marginBottom:14,lineHeight:1.4}}>Energieverbrauch (kombiniert): {v.energyLabel.consumption} l/100 km; CO2-Emissionen (kombiniert): {v.energyLabel.co2} g/km; CO2-Klasse (kombiniert): {v.energyLabel.co2class}</div>}
<div style={{display:'flex',gap:8}}><Badge tone="neutral" style={{background:'#1F1F1F',color:'#fff'}}>{v.condition}</Badge>{v.count>1&&<Badge tone="neutral">{v.count}× verfügbar</Badge>}</div>
</div>
<div className="avd-specs-block">
<div style={{marginTop:24}}>
{/* Same three columns and column gap as the spec grid below, so the
    Innenausstattung swatch sits directly above Erstzulassung. */}
<div style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr',gap:'28px 32px',marginBottom:10}} className="avd-swatch-grid">
<ColorSwatchRow label="Außenfarbe" name={v.color||'—'} hex={v.colorHex||'#e9ecef'}/>
<ColorSwatchRow label="Innenausstattung" name={v.upholstery||'—'} hex="#2b2b2b"/>
</div>
<div style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr',gap:'0 32px'}} className="avd-spec-grid-3">
<SpecRowV2 label="Kilometerstand" value={v.km.toLocaleString('de-DE')+' km'}/>
<SpecRowV2 label="Erstzulassung" value={v.firstReg||'—'}/>
<SpecRowV2 label="Vorbesitzer" value={v.prevOwners??'—'}/>
<SpecRowV2 label="Unfallhistorie" value="Keine Schäden oder Unfälle gemeldet"/>
<SpecRowV2 label="Ford Garantie" value="5 Jahre / 150.000 km"/>
<SpecRowV2 label="Antrieb" value={v.fuel}/>
<SpecRowV2 label="Getriebe" value={v.transmission}/>
<SpecRowV2 label="Leistung" value={v.power+' PS'}/>
</div>
</div>
<div style={{marginTop:24}}></div>
{/* Pinned flush under the fixed nav: --gnav-h is the bar's measured
    height (nav-mobile.js), so this tracks it instead of the old
    hard-coded 90px, which left a ~23px gap. */}
{/* scrolls sideways when the five tabs are wider than the column - on
    1025-1300px screens they otherwise ran underneath the price sidebar */}
<div style={{margin:'0 0 24px',position:'sticky',top:'var(--gnav-h,67px)',background:'#fff',zIndex:50,paddingTop:12,paddingBottom:4,overflowX:'auto',scrollbarWidth:'none'}} className="avd-tabs-wrap">
<BouncyTabsV2 tabs={sections} active={section} onChange={jump}/>
</div>
{hasDesc&&<div ref={refs['Fahrzeugbeschreibung']} style={{scrollMarginTop:'calc(var(--gnav-h,67px) + var(--avd-tabs-h,64px))',paddingTop:8,paddingBottom:40,borderTop:'1px solid var(--border-subtle)'}}>
<div className="avd-section-h" style={{fontFamily:'var(--font-display)',fontWeight:800,fontSize:26,lineHeight:1.3,letterSpacing:'normal',margin:'32px 0 20px',color:'#141414'}}>Fahrzeugbeschreibung</div>
<div className="avd-desc" style={{fontSize:15,lineHeight:1.7,color:'#333',whiteSpace:'pre-line',maxWidth:780,overflowWrap:'anywhere'}}>{v.desc}</div>
</div>}
<div ref={refs['Technische Daten']} style={{scrollMarginTop:'calc(var(--gnav-h,67px) + var(--avd-tabs-h,64px))',paddingTop:8,paddingBottom:40,borderTop:'1px solid var(--border-subtle)'}}>
<div className="avd-section-h" style={{fontFamily:'var(--font-display)',fontWeight:800,fontSize:26,lineHeight:1.3,letterSpacing:'normal',margin:'32px 0 20px',color:'#141414'}}>Technische Daten</div>
<h4 style={{fontSize:14,fontWeight:700,color:'#141414',marginBottom:10}}>Motor</h4>
<SpecRowV2 label="Kraftstoffart" value={v.fuel}/>
<SpecRowV2 label="Leistung" value={v.power+' PS'}/>
<SpecRowV2 label="Hubraum" value={(v.displacement||'—')+' cm³'}/>
{/* Getriebe moved up under Motor: "Fahrleistung" held Höchstgeschwindigkeit,
    Drehmoment and Getriebe, and with the first two removed the heading was
    left standing over a single gearbox row. */}
<SpecRowV2 label="Getriebe" value={v.transmission}/>
{v.dims&&<React.Fragment>
<h4 style={{fontSize:14,fontWeight:700,color:'#141414',margin:'24px 0 10px'}}>Karosserie — Abmessungen &amp; Gewichte</h4>
<SpecRowV2 label="Länge" value={v.dims.length+' mm'}/>
<SpecRowV2 label="Breite" value={v.dims.width+' mm'}/>
<SpecRowV2 label="Höhe" value={v.dims.height+' mm'}/>
<SpecRowV2 label="Radstand" value={v.dims.wheelbase+' mm'}/>
</React.Fragment>}
{v.weight&&<React.Fragment>
<SpecRowV2 label="Leergewicht" value={v.weight.empty+' kg'}/>
<SpecRowV2 label="Zulässiges Gesamtgewicht" value={v.weight.gross+' kg'}/>
</React.Fragment>}
</div>
<div ref={refs['Ausstattung']} style={{scrollMarginTop:'calc(var(--gnav-h,67px) + var(--avd-tabs-h,64px))',paddingTop:8,paddingBottom:40}}>
<div className="avd-section-h" style={{fontFamily:'var(--font-display)',fontWeight:800,fontSize:26,lineHeight:1.3,letterSpacing:'normal',marginBottom:20,color:'#141414'}}>Ausstattung</div>
{v.highlights&&<React.Fragment><h3 style={{fontSize:16,fontWeight:700,marginBottom:14,color:'#141414'}}>Ausstattungshighlights</h3>
<div className="avd-highlight-chips" style={{display:'flex',flexWrap:'wrap',gap:10,marginBottom:32}}>
{v.highlights.map((h,i)=><span key={i} className="avd-highlight-chip" style={{display:'flex',alignItems:'center',gap:6,background:'#14141408',border:'1px solid #1414141a',borderRadius:999,padding:'9px 16px',fontSize:13.5,fontWeight:600,color:'#141414'}}><svg width="17" height="17" viewBox="0 0 24 24" style={{flexShrink:0}}><path d="M12 1l2.1 2.1 2.9-.7 1.2 2.7 2.9.7-.1 3 2.4 1.8-1.6 2.6 1.1 2.8-2.7 1.3-.4 2.9-3 .1-1.7 2.4-2.9-1-2.9 1-1.7-2.4-3-.1-.4-2.9-2.7-1.3 1.1-2.8-1.6-2.6 2.4-1.8-.1-3 2.9-.7 1.2-2.7 2.9.7z" fill={c.main}/><path d="M8.5 12l2.5 2.5 5-5" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none"/></svg>{h}</span>)}
</div></React.Fragment>}
{v.equipment?Object.entries(v.equipment).map(([cat,items])=><div key={cat} style={{marginBottom:44}}>
<div style={{fontSize:20,fontWeight:700,lineHeight:1.3,letterSpacing:'normal',color:'#141414',marginBottom:6}}>{cat}</div>
{items.map((it,i)=><div key={i} style={{display:'flex',justifyContent:'space-between',alignItems:'center',padding:'20px 0',borderTop:'1px solid var(--border-subtle)',lineHeight:1.4}}><span style={{fontSize:15,color:'var(--fg-secondary)'}}>{it}</span></div>)}
</div>):<p style={{color:'var(--fg-muted)'}}>Keine Ausstattung hinterlegt.</p>}
</div>
<div ref={refs['Weitere Ausstattungsmerkmale']} style={{scrollMarginTop:'calc(var(--gnav-h,67px) + var(--avd-tabs-h,64px))',paddingTop:8,paddingBottom:40,borderTop:'1px solid var(--border-subtle)'}}>
<div className="avd-section-h" style={{fontFamily:'var(--font-display)',fontWeight:800,fontSize:26,lineHeight:1.3,letterSpacing:'normal',margin:'32px 0 20px',color:'#141414'}}>Weitere Ausstattungsmerkmale</div>
<p style={{fontSize:15,color:'var(--fg-secondary)',margin:'0 0 14px'}}>Sprechen Sie uns auf unsere umfangreichen Serviceleistungen an:</p>
<ul style={{margin:0,paddingLeft:20,display:'flex',flexDirection:'column',gap:10,fontSize:15,color:'var(--fg-secondary)'}}>
<li>Individuell auf Ihre Bedürfnisse angepasstes Finanzierungsangebot – ab 2,99% möglich!</li>
<li>Bis zu 5 Jahre Gebrauchtwagen-Garantie</li>
<li>Inzahlungnahme Ihres aktuellen Fahrzeuges</li>
<li>Nachrüstung AHK, Winterräder, Tuningumbauten</li>
<li>Deutschlandweiter Transport möglich</li>
<li>Individuelles Versicherungsangebot</li>
</ul>
</div>
<div ref={refs['Zustand & Historie']} style={{scrollMarginTop:'calc(var(--gnav-h,67px) + var(--avd-tabs-h,64px))',paddingTop:8,paddingBottom:40,borderTop:'1px solid var(--border-subtle)'}}>
<div className="avd-section-h" style={{fontFamily:'var(--font-display)',fontWeight:800,fontSize:26,lineHeight:1.3,letterSpacing:'normal',margin:'32px 0 20px',color:'#141414'}}>Zustand &amp; Historie</div>
<div className="avd-condition-grid" style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:16,marginBottom:28}}>
<div style={{background:'#14141408',borderRadius:'var(--radius-m)',padding:18,display:'flex',gap:12,alignItems:'flex-start'}}>
<svg width="22" height="22" viewBox="0 0 24 24" style={{flexShrink:0}}><path d="M12 1l2.1 2.1 2.9-.7 1.2 2.7 2.9.7-.1 3 2.4 1.8-1.6 2.6 1.1 2.8-2.7 1.3-.4 2.9-3 .1-1.7 2.4-2.9-1-2.9 1-1.7-2.4-3-.1-.4-2.9-2.7-1.3 1.1-2.8-1.6-2.6 2.4-1.8-.1-3 2.9-.7 1.2-2.7 2.9.7z" fill={c.main}/><path d="M8.5 12l2.5 2.5 5-5" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none"/></svg>
<div><div style={{fontWeight:700,fontSize:14,color:'#141414'}}>Technisch geprüft</div><div style={{fontSize:12.5,color:'var(--fg-muted)',marginTop:2}}>Nach strengen Autohaus-Voitel-Standards</div></div>
</div>
<div style={{background:'#14141408',borderRadius:'var(--radius-m)',padding:18,display:'flex',gap:12,alignItems:'flex-start'}}>
<svg width="22" height="22" viewBox="0 0 24 24" style={{flexShrink:0}}><path d="M12 1l2.1 2.1 2.9-.7 1.2 2.7 2.9.7-.1 3 2.4 1.8-1.6 2.6 1.1 2.8-2.7 1.3-.4 2.9-3 .1-1.7 2.4-2.9-1-2.9 1-1.7-2.4-3-.1-.4-2.9-2.7-1.3 1.1-2.8-1.6-2.6 2.4-1.8-.1-3 2.9-.7 1.2-2.7 2.9.7z" fill={c.main}/><path d="M8.5 12l2.5 2.5 5-5" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none"/></svg>
<div><div style={{fontWeight:700,fontSize:14,color:'#141414'}}>Optisch aufbereitet</div><div style={{fontSize:12.5,color:'var(--fg-muted)',marginTop:2}}>Nach Aufbereitungsstandards</div></div>
</div>
</div>
<SpecRowV2 label="Zustand" value={v.condition}/>
<SpecRowV2 label="Kilometerstand" value={v.km.toLocaleString('de-DE')+' km'}/>
<SpecRowV2 label="Erstzulassung" value={v.firstReg||'—'}/>
<SpecRowV2 label="Vorbesitzer" value={v.prevOwners??'—'}/>
<SpecRowV2 label="Unfallhistorie" value="Keine Schäden oder Unfälle gemeldet"/>
</div>
{hasConsumption&&<div ref={refs['Verbrauchsinformationen']} style={{scrollMarginTop:'calc(var(--gnav-h,67px) + var(--avd-tabs-h,64px))',paddingTop:8,paddingBottom:40,borderTop:'1px solid var(--border-subtle)'}}>
<div className="avd-section-h" style={{fontFamily:'var(--font-display)',fontWeight:800,fontSize:26,lineHeight:1.3,letterSpacing:'normal',margin:'32px 0 20px',color:'#141414'}}>Verbrauchsinformationen</div>
{v.energyLabel?<React.Fragment>
<SpecRowV2 label="Energieverbrauch (kombiniert)" value={v.energyLabel.consumption+' l/100 km'}/>
<SpecRowV2 label="CO₂-Emissionen (kombiniert)" value={v.energyLabel.co2+' g/km'}/>
<SpecRowV2 label="CO₂-Klasse (kombiniert)" value={v.energyLabel.co2class}/>
{v.energyLabel.energyCost15000!=null&&<SpecRowV2 label="Energiekosten bei 15.000 km/Jahr" value={fmtEurDe(v.energyLabel.energyCost15000)}/>}
{v.energyLabel.fuelAveragePrice!=null&&<SpecRowV2 label="Angenommener Kraftstoffpreis" value={fmtEurDe(v.energyLabel.fuelAveragePrice)+' /l'}/>}
{v.energyLabel.tax!=null&&<SpecRowV2 label="Kfz-Steuer (jährlich)" value={fmtEurDe(v.energyLabel.tax)}/>}
{(v.energyLabel.co2CostLow!=null||v.energyLabel.co2CostMid!=null||v.energyLabel.co2CostHigh!=null)&&<h4 style={{fontSize:14,fontWeight:700,color:'#141414',margin:'24px 0 10px'}}>CO₂-Kosten über 10 Jahre (15.000 km/Jahr)</h4>}
{v.energyLabel.co2CostLow!=null&&<SpecRowV2 label="bei niedrigem CO₂-Preis" value={fmtEurDe(v.energyLabel.co2CostLow)}/>}
{v.energyLabel.co2CostMid!=null&&<SpecRowV2 label="bei mittlerem CO₂-Preis" value={fmtEurDe(v.energyLabel.co2CostMid)}/>}
{v.energyLabel.co2CostHigh!=null&&<SpecRowV2 label="bei hohem CO₂-Preis" value={fmtEurDe(v.energyLabel.co2CostHigh)}/>}
{(v.energyLabel.co2AvgLow!=null||v.energyLabel.co2AvgMid!=null||v.energyLabel.co2AvgHigh!=null)&&<h4 style={{fontSize:14,fontWeight:700,color:'#141414',margin:'24px 0 10px'}}>Angenommener CO₂-Preis (€/t)</h4>}
{v.energyLabel.co2AvgLow!=null&&<SpecRowV2 label="niedrig" value={fmtEurDe(v.energyLabel.co2AvgLow)}/>}
{v.energyLabel.co2AvgMid!=null&&<SpecRowV2 label="mittel" value={fmtEurDe(v.energyLabel.co2AvgMid)}/>}
{v.energyLabel.co2AvgHigh!=null&&<SpecRowV2 label="hoch" value={fmtEurDe(v.energyLabel.co2AvgHigh)}/>}
<div style={{marginTop:32}}>
<div style={{fontWeight:700,fontSize:13,textTransform:'uppercase',letterSpacing:'.03em',color:'#141414',marginBottom:14}}>Energieeffizienzklasse</div>
<div style={{position:'relative',display:'flex',flexDirection:'column',gap:3,maxWidth:280}}>
{[['A','#2f9e44'],['B','#66a80f'],['C','#a9c839'],['D','#f4d61e'],['E','#f08c1e'],['F','#e8590c'],['G','#c92a2a']].map(([letter,color],i)=><div key={letter} style={{position:'relative',width:60+i*22,height:26,background:color,clipPath:'polygon(0 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,0 100%)',display:'flex',alignItems:'center',paddingLeft:8,color:'#fff',fontWeight:800,fontSize:13}}>{letter}</div>)}
<div style={{position:'absolute',left:60+['A','B','C','D','E','F','G'].indexOf(v.energyLabel.co2class)*22+20,top:['A','B','C','D','E','F','G'].indexOf(v.energyLabel.co2class)*29,width:60,height:26,background:'#141414',clipPath:'polygon(14px 0,100% 0,100% 100%,14px 100%,0 50%)',display:'flex',alignItems:'center',justifyContent:'center',color:'#fff',fontWeight:800,fontSize:15}}>{v.energyLabel.co2class}</div>
</div>
</div>
</React.Fragment>:<p style={{color:'var(--fg-muted)',fontSize:15}}>Keine Verbrauchsinformationen hinterlegt.</p>}
</div>}
{similar.length>0&&<div style={{marginTop:40,paddingTop:40,borderTop:'1px solid var(--border-subtle)'}}>
<div style={{fontFamily:'var(--font-display)',fontWeight:700,fontSize:22,marginBottom:16}}>Ähnliche Fahrzeuge</div>
<div className="avd-similar-grid" style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:16}}>
{similar.map(sv=><div key={sv.id} onClick={()=>onOpenVehicle&&onOpenVehicle(sv)} style={{cursor:'pointer'}}><window.VehicleCardExport v={sv} view="grid" onOpen={()=>{}} compareSelected={false} compareDisabled={true} onToggleCompare={()=>{}} isFavorite={false} onToggleFavorite={()=>{}}/></div>)}
</div>
</div>}
<div style={{marginTop:56}}>
<div style={{fontFamily:'var(--font-display)',fontWeight:700,fontSize:22,marginBottom:16}}>Ihr Partner vor Ort</div>
<div style={{border:'1px solid var(--border-subtle)',borderRadius:'var(--radius-l)',overflow:'hidden'}}>
<div style={{height:340}}><iframe src="https://maps.google.com/maps?q=Alleestra%C3%9Fe+6,+08525+Plauen&output=embed" loading="lazy" style={{width:'100%',height:'100%',border:0,display:'block'}}></iframe></div>
<div style={{padding:'18px 22px',borderTop:'1px solid var(--border-subtle)',fontFamily:'var(--font-display)',fontWeight:700,fontSize:18}}>Autohaus Voitel GmbH</div>
<div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',borderTop:'1px solid var(--border-subtle)',background:'var(--surface-sunken)'}}>
{[['mail','E-Mail','mailto:anfrage@auto-voitel.de'],['phone','Telefon','tel:+493741557777'],['navigation','Route','https://maps.google.com/?q=Autohaus+Voitel+Alleestra%C3%9Fe+6+08525+Plauen'],['globe','Website','https://autohaus-voitel.de']].map(([icon,label,href])=>
<a key={label} href={href} data-call-popup={icon==='phone'?'':undefined} target="_blank" rel="noreferrer" style={{textDecoration:'none',color:'var(--fg-secondary)',display:'flex',flexDirection:'column',alignItems:'center',gap:8,padding:'18px 8px',fontSize:12.5,fontWeight:600}}>
<img src={`https://unpkg.com/lucide-static@0.469.0/icons/${icon}.svg`} width={18} style={{opacity:.75}}/>{label}
</a>)}
</div>
<div style={{padding:'18px 22px',borderTop:'1px solid var(--border-subtle)'}}>
<div style={{fontWeight:700,fontSize:13,marginBottom:10}}>Kontaktdaten</div>
<div style={{display:'flex',flexDirection:'column',gap:6,fontSize:13.5}}>
<a href="https://maps.google.com/?q=Autohaus+Voitel+Alleestra%C3%9Fe+6+08525+Plauen" target="_blank" rel="noreferrer" style={{color:'var(--fg-brand)',textDecoration:'none'}}>Alleestraße 6, 08525 Plauen</a>
<a href="mailto:anfrage@auto-voitel.de" style={{color:'var(--fg-brand)',textDecoration:'none'}}>anfrage@auto-voitel.de</a>
<a href="https://autohaus-voitel.de" target="_blank" rel="noreferrer" style={{color:'var(--fg-brand)',textDecoration:'none'}}>autohaus-voitel.de</a>
<a href="tel:+493741557777" style={{color:'var(--fg-brand)',textDecoration:'none'}}>+49 3741 5577-77</a>
</div>
</div>
</div>
</div>
</div>
<div className="avd-sidebar-wrap">
<div style={{position:'sticky',top:24,background:'var(--slate-50)',borderRadius:28,padding:32,display:'flex',flexDirection:'column',gap:20}} className="avd-sidebar">
{(function(){var uvp=window.voitelMsrp&&window.voitelMsrp(v);return uvp?<div style={{fontSize:13,color:'var(--fg-muted)',marginBottom:-10}}>UVP des Herstellers <span style={{textDecoration:'line-through'}}>{fmtPrice(uvp)}</span></div>:null;})()}
<div style={{display:'flex',alignItems:'baseline',gap:10}}><div style={{fontFamily:'var(--font-display)',fontWeight:800,fontSize:36,color:c.priceText}} className="avd-price">{fmtPrice(v.price)}</div><div style={{fontSize:13,color:'var(--fg-muted)'}}>inkl. MwSt.</div></div>
{/* Net price belongs on the detail page only - the listing cards stay a
    single gross figure. netPrice is the import's own ex-VAT value, with
    price/1.19 as the fallback when it is missing. */}
<div style={{fontSize:13,color:'var(--fg-muted)',marginTop:-14}}>Nettopreis: {fmtPrice(Math.round(v.netPrice!=null?v.netPrice:v.price/1.19))}</div>
<WipeButton onClick={()=>setShowInquiry(true)} defaultBg={c.main} hoverBg="#141414" defaultColor="#fff" hoverColor="#fff">Fahrzeug anfragen</WipeButton>
<WipeButton onClick={()=>onToggleFavorite&&onToggleFavorite(v)} defaultBg="var(--slate-200)" hoverBg="var(--slate-300)" defaultColor="var(--fg-primary)" hoverColor="var(--fg-primary)"><img src="https://unpkg.com/lucide-static@0.469.0/icons/bookmark.svg" width={17}/>{isFav?'Gespeichert':'Speichern'}</WipeButton>
{/* Three channels side by side: call, WhatsApp, e-mail. The number is the
    dealership's main line, the same one the nav dials. */}
<div className="avd-contact-row" style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr',gap:10}}>
<WipeButton extraClass="btn-call" href="tel:+49374155770" defaultBg="#fff" hoverBg="#fff" defaultColor="var(--fg-primary)" hoverColor="#1C7ED6" radius={14} padding="13px 0" fontSize={14} border="1px solid var(--border-default)"><img src="https://unpkg.com/lucide-static@0.469.0/icons/phone.svg" width={16}/>Anrufen</WipeButton>
<WipeButton extraClass="btn-whatsapp" href={`https://wa.me/491757120472?text=${msg}`} target="_blank" rel="noreferrer" defaultBg="#fff" hoverBg="#fff" defaultColor="var(--fg-primary)" hoverColor="#25D366" radius={14} padding="13px 0" fontSize={14} border="1px solid var(--border-default)"><img src="https://unpkg.com/lucide-static@0.469.0/icons/message-circle.svg" width={16}/>WhatsApp</WipeButton>
<WipeButton extraClass="btn-email" href={`mailto:anfrage@auto-voitel.de?subject=${encodeURIComponent(v.brand+' '+v.model)}&body=${msg}`} defaultBg="#fff" hoverBg="#fff" defaultColor="var(--fg-primary)" hoverColor="#7C3AED" radius={14} padding="13px 0" fontSize={14} border="1px solid var(--border-default)"><img src="https://unpkg.com/lucide-static@0.469.0/icons/mail.svg" width={16}/>E-Mail</WipeButton>
</div>
<div style={{display:'flex',flexDirection:'column',gap:10,paddingTop:4}}>
{(function(){
  /* Only vehicles with a pre-generated exposé get working PDF actions.
     Everything else shows the buttons disabled rather than linking to a 404. */
  var pdf = window.voitelPdfUrl ? window.voitelPdfUrl(v) : null;
  var linkStyle = {color:'var(--fg-muted)',fontSize:12.5,fontWeight:600,textDecoration:'none',display:'flex',alignItems:'center',gap:7};
  var offStyle  = {color:'var(--fg-muted)',fontSize:12.5,fontWeight:600,display:'flex',alignItems:'center',gap:7,opacity:.4,cursor:'not-allowed'};
  if(!pdf){
    return <React.Fragment>
      <span className="avd-pdf-off" style={offStyle} title="Für dieses Fahrzeug liegt noch kein PDF-Exposé vor">
        <img src="https://unpkg.com/lucide-static@0.469.0/icons/file-down.svg" width={13}/>PDF herunterladen</span>
      <span className="avd-pdf-off" style={offStyle} title="Für dieses Fahrzeug liegt noch kein PDF-Exposé vor">
        <img src="https://unpkg.com/lucide-static@0.469.0/icons/send.svg" width={13}/>PDF senden</span>
    </React.Fragment>;
  }
  return <React.Fragment>
    <a href={pdf} download className="fade-red-link" style={linkStyle}>
      <img src="https://unpkg.com/lucide-static@0.469.0/icons/file-down.svg" width={13}/>PDF herunterladen</a>
    <a href={`mailto:?subject=${encodeURIComponent('PDF-Exposé: '+v.brand+' '+v.model)}&body=${encodeURIComponent('PDF-Exposé: ')+pdf}`} className="fade-red-link" style={linkStyle}>
      <img src="https://unpkg.com/lucide-static@0.469.0/icons/send.svg" width={13}/>PDF senden</a>
  </React.Fragment>;
})()}
<a href="#" onClick={e=>{e.preventDefault();onOpenTradeIn&&onOpenTradeIn();}} className="fade-red-link" style={{color:'var(--fg-muted)',fontSize:12.5,fontWeight:600,textDecoration:'none',display:'flex',alignItems:'center',gap:7}}><img src="https://unpkg.com/lucide-static@0.469.0/icons/repeat.svg" width={13}/>Mein Fahrzeug in Zahlung geben</a>
</div>
{v.energyLabel&&<div style={{borderTop:'1px solid var(--border-subtle)',paddingTop:16,display:'flex',flexDirection:'column',gap:6,fontSize:13}}>
<div style={{display:'flex',justifyContent:'space-between'}}><span style={{color:'var(--fg-muted)'}}>Energieverbrauch (komb.)</span><b>{v.energyLabel.consumption} l/100 km</b></div>
<div style={{display:'flex',justifyContent:'space-between'}}><span style={{color:'var(--fg-muted)'}}>CO₂-Emissionen (komb.)</span><b>{v.energyLabel.co2} g/km</b></div>
<div style={{display:'flex',justifyContent:'space-between'}}><span style={{color:'var(--fg-muted)'}}>CO₂-Klasse (komb.)</span><b>{v.energyLabel.co2class}</b></div>
</div>}
<div style={{borderTop:'1px solid var(--border-subtle)',paddingTop:16}}>
<div style={{fontWeight:700,fontSize:15,marginBottom:8,color:'#141414'}}>Autohaus Voitel GmbH</div>
<a href="https://maps.google.com/?q=Autohaus+Voitel+Alleestra%C3%9Fe+6+08525+Plauen" target="_blank" rel="noreferrer" style={{fontSize:14,color:'var(--fg-secondary)',textDecoration:'none',lineHeight:1.6}}>Alleestraße 6<br/>08525 Plauen</a>
</div>
<div style={{fontSize:12,color:'var(--fg-muted)'}}>Angebotsnummer: {v.offerNo||'—'}</div>

{(function(){
  var sibs = window.voitelSiblings ? window.voitelSiblings(v) : [];
  if(!sibs.length) return null;
  var noun = sibs.length===1 ? 'Fahrzeug' : 'Fahrzeuge';
  return <React.Fragment>
    <button type="button" className="avd-siblings avd-siblings-trigger" onClick={()=>setShowSibs(true)}>
      <span className="avd-siblings-h">{sibs.length} weitere baugleiche {noun} verfügbar</span>
      <span className="avd-siblings-sub">Gleiches Modell, gleiche Ausstattung, gleicher Preis &amp; gleiche Farbe &ndash; andere Einheit.</span>
      <span className="avd-siblings-cta">Alle anzeigen</span>
    </button>
    {/* Portalled to <body>: the sidebar is position:sticky, which makes it a
        stacking context, so this overlay's z-index:1000 only ever competed
        inside it - and the sticky tab strip (z-index:50) painted over the
        whole subtree. Out here it stacks against the page like every other
        modal on the site. */}
    {showSibs && ReactDOM.createPortal(<div className="modal-overlay open" id="siblings-modal"
      onClick={e=>{ if(e.target.id==='siblings-modal') setShowSibs(false); }}>
      <div className="modal-card" data-lenis-prevent>
        <div className="modal-head">
          <div className="modal-head-left">
            <div className="modal-icon"><img src="https://unpkg.com/lucide-static@0.469.0/icons/copy.svg" alt=""/></div>
            <div>
              <h3 className="modal-title">{sibs.length} weitere baugleiche {noun}</h3>
              <p className="modal-desc">Gleiches Modell, gleiche Ausstattung, gleicher Preis &amp; gleiche Farbe &ndash; andere Einheit.</p>
            </div>
          </div>
          <button className="modal-close" type="button" onClick={()=>setShowSibs(false)} aria-label="Schließen">✕</button>
        </div>
        <div className="avd-siblings-list">
          {sibs.map(function(s){
            var ph = s.photos && s.photos.length ? s.photos[0] : null;
            return <a key={s.id} className="avd-sibling" href={'?vehicle=' + s.id}>
              {ph ? <img className="avd-sibling-img" src={ph} alt="" loading="lazy"/>
                  : <span className="avd-sibling-img"></span>}
              <span className="avd-sibling-txt">
                <b>{s.offerNo || ('ID ' + s.id)}</b>
                <em>ID {s.id}{s.km!=null ? ' · ' + s.km + ' km' : ''}</em>
              </span>
            </a>;
          })}
        </div>
      </div>
    </div>, document.body)}
  </React.Fragment>;
})()}
</div>
</div>
</div>
{showInquiry&&<InquiryModal v={v} onClose={()=>setShowInquiry(false)} onSubmit={onSubmitInquiry||onReserve}/>}
</div>;
}
window.VehicleDetailV2Export=VehicleDetailV2;