https://reonic.com/_next/static/chunks/pages/de-de/product/360h/oeltank-ausbau-1d60d95ccf5d9046.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[1878],{4513:(e,t,i)=>{"use strict";i.d(t,{P:()=>d,T:()=>o});var n=i(37876),s=i(52276),r=i(97460),l=i(69241),a=i(63298);function d(e){let{items:t,label:i="Features",size:d="small",className:o,labelClassName:c,iconColor:m,icon:x}=e,u="small"===d,h=u?"h-[12px] w-[12px] shrink-0 mt-[2px]":"h-[14px] w-[14px] shrink-0 mt-[4px]";return(0,n.jsxs)("div",{className:o??(u?"flex flex-col gap-2 text-xs text-neutral-500 mt-1":"flex flex-col gap-3 text-base text-zinc-600 mt-2"),children:[(0,n.jsx)("div",{className:c??(u?"border-b border-zinc-200 py-1.5 font-normal text-xs text-zinc-400":"border-b border-zinc-200 py-2 font-normal text-sm text-zinc-400"),children:i}),t.map((e,t)=>(0,n.jsxs)("span",{children:[t>0&&(0,n.jsx)("hr",{className:"border-zinc-200 mb-2"}),(0,n.jsxs)("span",{className:"flex items-start gap-2",children:[x?x(h):m?(0,n.jsx)(r.g,{icon:s.SGM,className:(0,l.A)(h,m)}):(0,n.jsx)(a.S,{icon:s.SGM,className:h}),e]})]},t))]})}function o(e){let{label:t="Features",size:i="small",className:s,labelClassName:r,iconColor:l}=e,a="small"===i;return(0,n.jsx)("div",{className:s??(a?"flex flex-col gap-2 text-xs text-neutral-500 mt-1":"flex flex-col gap-3 text-base text-zinc-600 mt-2"),children:(0,n.jsx)("div",{className:r??(a?"border-b border-zinc-200 py-1.5 font-normal text-xs text-zinc-400":"border-b border-zinc-200 py-2 font-normal text-sm text-zinc-400"),children:t})})}},15497:(e,t,i)=>{"use strict";i.d(t,{v:()=>s});var n=i(37876);function s(e){let{steps:t,variant:i="light",direction:s="horizontal"}=e,r="dark"===i;if("card"===i)return(0,n.jsx)("div",{className:"grid grid-cols-1 md:grid-cols-3 gap-4 items-stretch",children:t.map((e,i)=>{let s=i===t.length-1;return(0,n.jsxs)("div",{className:"relative flex items-stretch",children:[(0,n.jsxs)("div",{className:"flex-1 rounded-2xl border border-zinc-200 bg-white p-6 flex flex-col gap-4",children:[e.visual,(0,n.jsxs)("div",{className:"flex items-center gap-2.5",children:[(0,n.jsx)("div",{className:"w-7 h-7 rounded-md bg-offblack flex items-center justify-center shrink-0 text-xs font-semibold text-white",children:i+1}),(0,n.jsx)("h4",{className:"font-semibold text-offblack",children:e.title})]}),(0,n.jsx)("p",{className:"text-sm leading-relaxed text-zinc-500",children:e.description})]}),!s&&(0,n.jsx)("div",{className:"hidden md:flex items-center justify-center w-8 shrink-0 self-center",children:(0,n.jsx)("div",{className:"w-7 h-7 rounded-full border border-zinc-200 bg-white flex items-center justify-center text-zinc-400",children:(0,n.jsx)("svg",{width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",children:(0,n.jsx)("path",{d:"M5 12h14M13 6l6 6-6 6"})})})})]},i)})});if("vertical"===s)return(0,n.jsx)("div",{children:t.map((e,i)=>{let s=i===t.length-1;return(0,n.jsxs)("div",{children:[(0,n.jsxs)("div",{className:"flex gap-4 items-start",children:[(0,n.jsx)("div",{className:`w-8 h-8 mt-1 rounded-md flex items-center justify-center shrink-0 text-sm font-semibold ${r?"bg-zinc-800 text-white":"bg-zinc-100 text-offblack"}`,children:i+1}),(0,n.jsxs)("div",{children:[(0,n.jsx)("h4",{className:`text-sm font-medium ${r?"text-white":"text-offblack"}`,children:e.title}),(0,n.jsx)("p",{className:`text-sm mt-0.5 ${r?"text-zinc-400":"text-zinc-500"}`,children:e.description})]})]}),!s&&(0,n.jsx)("div",{className:"w-8 flex justify-center py-2.5 -mt-2",children:(0,n.jsx)("svg",{className:r?"text-zinc-600":"text-zinc-300",width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",children:(0,n.jsx)("path",{d:"M12 5v14M6 13l6 6 6-6"})})})]},i)})});let l=2===t.length?"md:grid-cols-2":3===t.length?"md:grid-cols-3":"md:grid-cols-4";return(0,n.jsx)("div",{className:`grid ${l} gap-y-4 md:gap-y-6 gap-x-4 items-stretch`,children:t.map((e,i)=>{let s=i===t.length-1;return(0,n.jsxs)("div",{className:`relative flex flex-col items-start rounded-2xl border p-4 md:min-h-[190px] md:p-5 shadow-[0_18px_45px_-34px_rgba(21,20,20,0.35)] ${r?"border-white/10 bg-white/5":"border-zinc-200 bg-offwhite"}`,children:[e.visual,(0,n.jsxs)("div",{className:`flex items-center gap-3 mb-4${s?"":" w-full"}`,children:[(0,n.jsx)("div",{className:`w-8 h-8 rounded-lg flex items-center justify-center shrink-0 text-xs font-semibold ${r?"bg-offwhite text-offblack":"bg-offblack text-white"}`,children:i+1}),(0,n.jsx)("h4",{className:`font-medium ${r?"text-white":"text-offblack"}`,children:e.title}),!s&&(0,n.jsx)("div",{className:`absolute right-[-18px] top-1/2 z-10 hidden h-9 w-9 -translate-y-1/2 items-center justify-center rounded-full border md:flex ${r?"border-white/10 bg-offblack text-white/55":"border-zinc-200 bg-offwhite text-zinc-400"}`,children:(0,n.jsx)("svg",{className:"shrink-0",width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.8",strokeLinecap:"round",strokeLinejoin:"round",children:(0,n.jsx)("path",{d:"M5 12h14M13 6l6 6-6 6"})})})]}),(0,n.jsx)("p",{className:`text-sm leading-relaxed ${r?"text-zinc-400":"text-zinc-500"}`,children:e.description})]},i)})})}},22060:(e,t,i)=>{"use strict";i.r(t),i.d(t,{default:()=>V});var n=i(37876),s=i(52276),r=i(97460),l=i(27690),a=i(8530),d=i(14232),o=i(87978);let c=[.22,1,.36,1],m="#0F172A",x="rgba(15, 23, 42, 0.08)",u="#3F3F46",h="rgba(63, 63, 70, 0.18)",b=["/features/oil-tank-service/oil-tank-removal/demo-uploads/rectangle-0.jpg","/features/oil-tank-service/oil-tank-removal/demo-uploads/rectangle-1.jpg","/features/oil-tank-service/oil-tank-removal/demo-uploads/rectangle-2.jpg","/features/oil-tank-service/oil-tank-removal/demo-uploads/rectangle-3.jpg"],p=[{project:"Projekt Nordlicht",city:"Berlin",customer:"Mara Schneider",phone:"0151 48 27 91 34",access:"Einfach",restOil:"120 L",photoCount:"4 Fotos"},{project:"Projekt Sonnenhof",city:"Leipzig",customer:"Jonas Weber",phone:"0176 52 84 13 90",access:"Mittel",restOil:"80 L",photoCount:"3 Fotos"},{project:"Projekt Westhang",city:"K\xf6ln",customer:"Lina Hoffmann",phone:"0160 31 95 84 27",access:"Schwierig",restOil:"190 L",photoCount:"5 Fotos"},{project:"Projekt Elbpark",city:"Hamburg",customer:"Noah Richter",phone:"0172 64 18 35 02",access:"Einfach",restOil:"60 L",photoCount:"2 Fotos"}],g=["project","city","customer","phone","access","restOil","photoCount","submit","processing","verified"],f=["project","city","customer","phone"],j={project:"Projektname",city:"Ort",customer:"Kundenname",phone:"Telefon",access:"Zug\xe4nglichkeit",restOil:"Rest\xf6l"},v=(e,t)=>

1e[t],w=()=>{let e=(0,d.useRef)(null),[t,i]=(0,d.useState)(!1),[o,m]=(0,d.useState)(0),[x,h]=(0,d.useState)(0),[w,C]=(0,d.useState)(0),[S,A]=(0,d.useState)(0);(0,d.useEffect)(()=>{let t=e.current;if(!t)return;let n=new IntersectionObserver(e=>{let[t]=e;return i(t.isIntersecting)},{threshold:.35});return n.observe(t),()=>n.disconnect()},[]);let F=p[o],I=g[x]??"submit",_="submit"===I,T="processing"===I,$="verified"===I,E=_||T||$||!I?"":v(F,I),L=Math.min(x,7),M=Math.min(L/7*100,100),R=1/b.length,D=L>6,O=D?b.length:Math.floor(S/R),W=D||O>=b.length?-1:O,K=-1===W?1:Math.min((S-O*R)/R,1),q=f.includes(I);return(0,d.useEffect)(()=>{if(!t)return;if(_){let e=window.setTimeout(()=>{h(e=>e+1)},2200);return()=>window.clearTimeout(e)}if(T){let e=window.setTimeout(()=>{h(e=>e+1)},3600);return()=>window.clearTimeout(e)}if($){let e=window.setTimeout(()=>{m(e=>(e+1)%p.length),h(0),C(0),A(0)},3e3);return()=>window.clearTimeout(e)}if("photoCount"===I){C(E.length),A(0);let e=window.performance.now(),t=null,i=s=>{let r=s-e,l=0;for(let e=0;e<b.length;e+=1){let t=1020*e;if(r>=t+900){l+=1/b.length;continue}if(r>t){let e=(r-t)/900;l+=1/b.length*e}break}let a=Math.min(l,1);if(A(a),a<1){n=window.requestAnimationFrame(i);return}t=window.setTimeout(()=>{h(e=>e+1)},340)},n=window.requestAnimationFrame(i);return()=>{window.cancelAnimationFrame(n),t&&window.clearTimeout(t)}}C(0);let e=0,i=null,n=window.setInterval(()=>{if(C(e+=1),e>=E.length){window.clearInterval(n);let e="phone"===I;i=window.setTimeout(()=>{h(e=>e+1)},e?700:220)}},70);return()=>{window.clearInterval(n),i&&window.clearTimeout(i)}},[I,E,t,T,_,$]),(0,n.jsxs)("div",{ref:e,className:"relative w-full max-w-[760px] xl:max-w-[720px]",children:[(0,n.jsx)("div",{className:"absolute left-16 top-12 h-36 w-36 rounded-full blur-3xl",style:{backgroundColor:"rgba(15,23,42,0.06)"}}),(0,n.jsx)("div",{className:"absolute right-10 top-20 h-32 w-32 rounded-full bg-zinc-200/80 blur-3xl"}),(0,n.jsxs)("div",{className:"relative overflow-hidden rounded-[32px] border border-zinc-200 bg-white",style:{boxShadow:"0 24px 72px rgba(15,23,42,0.1), 0 10px 24px rgba(15,23,42,0.06), inset 0 1px 0 rgba(255,255,255,0.9)"},children:[(0,n.jsxs)("div",{className:"flex items-center justify-between border-b border-zinc-200 bg-zinc-50 px-5 py-4 md:px-6",children:[(0,n.jsxs)("div",{className:"flex items-center gap-4",children:[(0,n.jsxs)("div",{className:"flex gap-1.5",children:[(0,n.jsx)("span",{className:"h-2.5 w-2.5 rounded-full bg-zinc-300"}),(0,n.jsx)("span",{className:"h-2.5 w-2.5 rounded-full bg-zinc-300"}),(0,n.jsx)("span",{className:"h-2.5 w-2.5 rounded-full bg-zinc-300"})]}),(0,n.jsx)("div",{children:(0,n.jsx)("div",{className:"text-sm font-semibold text-zinc-800",children:"\xd6ltankentsorgung"})})]}),(0,n.jsx)("button",{type:"button",className:"flex h-8 w-8 items-center justify-center rounded-full border border-zinc-200 bg-white text-zinc-500",children:(0,n.jsx)(r.g,{icon:s.EZy,className:"text-xs"})})]}),(0,n.jsx)("div",{className:"relative bg-zinc-50 p-2.5 md:p-4",children:(0,n.jsxs)("div",{className:"overflow-hidden rounded-[28px] border border-zinc-200 bg-white shadow-sm",children:[(0,n.jsxs)("div",{className:"border-b border-zinc-200 bg-white px-4 py-4 md:px-5",children:[(0,n.jsxs)("div",{className:"flex items-center justify-between text-[11px] font-medium uppercase tracking-[0.16em] text-zinc-500",children:[(0,n.jsx)("span",{children:q?"Schritt 1 von 2":"Schritt 2 von 2"}),(0,n.jsxs)("span",{children:[Math.round(M),"%"]})]}),(0,n.jsx)("div",{className:"mt-3 h-1.5 overflow-hidden rounded-full bg-zinc-100",children:(0,n.jsx)(l.P.div,{className:"h-full rounded-full",style:{backgroundColor:u},animate:{width:`${M}%`},transition:{duration:.5,ease:c}})})]}),(0,n.jsxs)("div",{className:"relative bg-zinc-50",style:{minHeight:520},children:[(0,n.jsxs)(a.N,{mode:"wait",children:[q&&!T&&!$&&(0,n.jsx)(l.P.div,{className:"px-3.5 pb-3.5 pt-4 md:px-4.5",initial:{opacity:0,x:-28},animate:{opacity:1,x:0},exit:{opacity:0,x:-28},transition:{duration:.55,ease:c},children:(0,n.jsxs)("div",{className:"space-y-4",children:[(0,n.jsx)(N,{number:"1",title:"Projekt",children:(0,n.jsxs)("div",{className:"grid gap-3 md:grid-cols-2",children:[(0,n.jsx)(k,{label:j.project,fieldKey:"project",activeField:I,value:F.project,typedLe

1ngth:w,completedFieldCount:L,fieldIndex:0}),(0,n.jsx)(k,{label:j.city,fieldKey:"city",activeField:I,value:F.city,typedLength:w,completedFieldCount:L,fieldIndex:1})]})}),(0,n.jsx)(N,{number:"2",title:"Kontakt",children:(0,n.jsxs)("div",{className:"grid gap-3 md:grid-cols-2",children:[(0,n.jsx)(k,{label:j.customer,fieldKey:"customer",activeField:I,value:F.customer,typedLength:w,completedFieldCount:L,fieldIndex:2}),(0,n.jsx)(k,{label:j.phone,fieldKey:"phone",activeField:I,value:F.phone,typedLength:w,completedFieldCount:L,fieldIndex:3})]})})]})},"step-one"),!q&&!T&&!$&&(0,n.jsx)(l.P.div,{className:"px-3.5 pb-3.5 pt-4 md:px-4.5",initial:{opacity:0,x:28},animate:{opacity:1,x:0},exit:{opacity:0,x:28},transition:{duration:.55,ease:c},children:(0,n.jsxs)("div",{className:"space-y-4",children:[(0,n.jsx)(N,{number:"3",title:"Vor-Ort-Situation",children:(0,n.jsxs)("div",{className:"grid gap-3 md:grid-cols-2",children:[(0,n.jsx)(k,{label:j.access,fieldKey:"access",activeField:I,value:F.access,typedLength:w,completedFieldCount:L,fieldIndex:4}),(0,n.jsx)(k,{label:j.restOil,fieldKey:"restOil",activeField:I,value:F.restOil,typedLe

1ngth:w,completedFieldCount:L,fieldIndex:5})]})}),(0,n.jsx)(N,{number:"4",title:"Fotos",children:(0,n.jsx)(z,{active:"photoCount"===I,completed:D,isSubmitStep:_,uploadedImageCount:O,currentUploadingIndex:W,currentUploadLocalProgress:K,uploadProgress:S,typedValue:"photoCount"===I?F.photoCount.slice(0,w):D?F.photoCount:""})})]})},"step-two")]}),(T||$)&&(0,n.jsx)("div",{className:"absolute inset-0 flex items-center justify-center bg-[linear-gradient(180deg,#ffffff_0%,#f8fbff_100%)] p-6",children:T?(0,n.jsx)(y,{}):(0,n.jsx)(P,{})})]})]})})]})]})},N=e=>{let{number:t,title:i,children:s}=e;return(0,n.jsxs)("div",{className:"rounded-3xl border border-zinc-200 bg-white p-4 shadow-[0_8px_24px_rgba(15,23,42,0.04)] md:p-5",children:[(0,n.jsxs)("div",{className:"mb-4 flex items-center gap-3",children:[(0,n.jsx)("div",{className:"flex h-8 w-8 items-center justify-center rounded-full bg-zinc-100 text-sm font-semibold text-zinc-700",children:t}),(0,n.jsx)("div",{className:"text-sm font-medium text-zinc-900",children:i})]}),s]})},k=e=>{let{label:t,fieldKey:i,activeField:s,value:r,typedLength:a,completedFieldCount:d,fieldIndex:o}=e,x=s===i,u=x?r.slice(0,a):d>o?r:"";return(0,n.jsxs)(l.P.div,{className:"relative overflow-hidden rounded-2xl border bg-white px-4 py-3",animate:{borderColor:x?"rgba(61,85,133,0.34)":"rgba(212,212,216,1)",backgroundColor:x?"rgba(245,247,252,1)":"rgba(255,255,255,1)",boxShadow:x?"0 0 0 4px rgba(61,85,133,0.08), 0 14px 28px rgba(15,23,42,0.08)":"0 1px 0 rgba(255,255,255,0.8) inset"},transition:{duration:.36,ease:c},children:[(0,n.jsx)("div",{className:"text-[11px] font-medium uppercase tracking-[0.16em] text-zinc-400",children:t}),(0,n.jsxs)("div",{className:"mt-2 min-h-6 text-sm font-medium text-zinc-900",children:[u||(0,n.jsx)("span",{className:"text-zinc-300",children:" "}),x&&(0,n.jsx)(l.P.span,{className:"ml-0.5 inline-block h-4 w-[2px] align-[-2px]",style:{backgroundColor:m},animate:{opacity:[1,0,1]},transition:{duration:1.1,repeat:Number.POSITIVE_INFINITY,ease:"linear"}})]})]})},z=e=>{let{active:t,completed:i,isSubmitStep:a,uploadedImageCount:d,currentUploadingIndex:p,currentUploadLocalProgress:g,uploadProgress:f,typedValue:j}=e,v=i?"100%":`${Math.max(100*f,10*!!t)}%`,w=i?b:b.slice(0,d);return(0,n.jsxs)(l.P.div,{className:"rounded-2xl border border-dashed px-4 py-4",animate:{borderColor:t?"rgba(15, 23, 42, 0.28)":"rgba(212,212,216,1)",backgroundColor:t?"rgba(245,247,252,0.95)":"rgba(250,250,250,1)"},transition:{duration:.36,ease:c},children:[(0,n.jsxs)("div",{className:"flex items-center gap-3",children:[(0,n.jsx)("div",{className:"flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-white text-zinc-500 shadow-sm",children:(0,n.jsx)(r.g,{icon:s.Cyq,className:"text-sm"})}),(0,n.jsxs)("div",{className:"min-w-0 flex-1",children:[(0,n.jsx)("div",{className:"text-[11px] font-medium uppercase tracking-[0.16em] text-zinc-400",children:"Fotodokumentation"}),(0,n.jsxs)("div",{className:"mt-2 min-h-6 text-sm font-medium text-zinc-900",children:[t?j:i?`${j} hochgeladen`:"",t&&(0,n.jsx)(l.P.span,{className:"ml-0.5 inline-block h-4 w-[2px] align-[-2px]",style:{backgroundColor:m},animate:{opacity:[1,0,1]},transition:{duration:1.1,repeat:Number.POSITIVE_INFINITY,ease:"linear"}})]})]}),i&&(0,n.jsx)("div",{className:"flex h-7 w-7 items-center justify-center rounded-full",style:{backgroundColor:x,color:m},children:(0,n.jsx)(r.g,{icon:s.e68,className:"text-xs"})})]}),(0,n.jsx)("div",{className:"mt-4 h-1.5 overflow-hidden rounded-full bg-zinc-200",children:(0,n.jsx)(l.P.div,{className:"h-full rounded-full",style:{backgroundColor:u},animate:{width:v},transition:{duration:.5,ease:c}})}),(0,n.jsxs)("div",{className:"mt-4 space-y-3",children:[(0,n.jsxs)("div",{className:"flex items-center justify-between text-[11px] font-medium text-zinc-500",children:[(0,n.jsxs)("span",{children:[w.length," / ",b.length," Fotos"]}),(0,n.jsx)("span",{children:i?"Upload abgeschlossen":t?"Upload l\xe4uft":"Upload bereit"})]}),(0,n.jsx)("div",{className:"grid grid-cols-4 gap-2",children:Array.from({length:4}).map((e,i)=>{let a=w[i],d=!!a,x=t&&i===p;return(0,n.jsxs)(l.P.div,{className:`overflow-hidden rounded-xl border bg-white shadow-sm ${d?"border-zinc-200":

1x?"":"border-dashed border-zinc-300"}`,style:x?{borderColor:"rgba(15, 23, 42, 0.3)"}:void 0,initial:!1,animate:{scale:d||x?1:.985,opacity:1},transition:{duration:.45,ease:c},children:[!d&&(0,n.jsxs)("div",{className:`flex aspect-square flex-col items-center justify-center px-2 text-center ${x?"":"bg-zinc-50"}`,style:x?{backgroundColor:"rgba(245,247,252,1)"}:void 0,children:[(0,n.jsx)("div",{className:`flex h-8 w-8 items-center justify-center rounded-xl bg-white shadow-sm ${x?"":"text-zinc-400"}`,style:x?{color:m}:void 0,children:(0,n.jsx)(r.g,{icon:s.Cyq,className:"text-xs"})}),(0,n.jsx)("div",{className:`mt-2 text-[10px] font-medium ${x?"":"text-zinc-400"}`,style:x?{color:m}:void 0,children:x?"Wird hochgeladen":"Upload Slot"}),x&&(0,n.jsx)("div",{className:"mt-2 h-1 w-full max-w-[44px] overflow-hidden rounded-full",style:{backgroundColor:h},children:(0,n.jsx)(l.P.div,{className:"h-full rounded-full",style:{backgroundColor:u},animate:{width:`${Math.max(100*g,6)}%`},transition:{duration:.18,ease:"linear"}})})]}),d&&(0,n.jsxs)(l.P.div,{initial:{opacity:0,scale:.9,y:10},animate:{opacity:1,scale:1,y:0},transition:{duration:.5,ease:c},children:[(0,n.jsx)("div",{className:"aspect-square overflow-hidden bg-zinc-100",children:(0,n.jsx)("img",{src:(0,o.xM)(a,"sm"),alt:"",className:"h-full w-full object-cover"})}),(0,n.jsxs)("div",{className:"border-t border-zinc-200 px-2 py-1.5 text-center text-[10px] font-medium",style:{color:m},children:["Foto ",i+1]})]})]},`upload-cell-${i}`)})})]}),(0,n.jsx)("div",{className:"mt-4 flex min-h-[72px] items-start justify-end border-t border-zinc-200 pt-4",children:(0,n.jsxs)("div",{className:"relative h-[52px] w-[188px] shrink-0",children:[(0,n.jsxs)(l.P.button,{type:"button",className:"relative h-12 w-[188px] overflow-hidden rounded-full text-sm font-medium",animate:{backgroundColor:i?u:"#E4E4E7",boxShadow:i?"0 10px 22px rgba(63,63,70,0.22)":"0 6px 14px rgba(15,23,42,0.08)"},transition:{duration:.34,ease:c},style:{color:i?"#FFFFFF":"#71717A"},children:[(0,n.jsx)(l.P.span,{className:"relative z-10 inline-flex h-full w-full items-center justify-center",animate:{scale:a?[1,.97,1]:1},transition:{duration:.5,times:[0,.45,1],ease:c},children:"Anfrage senden"}),a&&(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(l.P.span,{className:"pointer-events-none absolute inset-0",initial:{opacity:0}

1,animate:{opacity:[0,.12,0]},transition:{duration:.54,times:[0,.35,1],ease:c},style:{backgroundColor:"#FFFFFF"}}),(0,n.jsx)(l.P.span,{className:"pointer-events-none absolute inset-0 rounded-full",initial:{opacity:.22,scale:.98},animate:{opacity:[.22,0],scale:[.98,1.08]},transition:{duration:.7,ease:c},style:{border:`2px solid ${u}`}})]})]}),a&&(0,n.jsx)(l.P.div,{className:"pointer-events-none absolute left-0 top-0 z-20 text-zinc-950",initial:{x:-34,y:-26,opacity:0},animate:{x:[-34,102,102],y:[-26,10,10],opacity:[0,1,1],scale:[1,1,.82]},transition:{duration:1.4,times:[0,.72,1],ease:c},style:{filter:"drop-shadow(0 12px 18px rgba(15,23,42,0.28))"},children:(0,n.jsx)(r.g,{icon:s.ii0,className:"text-[30px]"})})]})})]})},y=()=>(0,n.jsxs)("div",{className:"w-full max-w-[320px] rounded-[28px] border bg-white p-6 text-center shadow-[0_18px_40px_rgba(61,85,133,0.08)]",style:{borderColor:x},children:[(0,n.jsx)(l.P.div,{className:"text-[11px] font-medium uppercase tracking-[0.18em]",style:{color:m},initial:{opacity:0,y:8},animate:{opacity:1,y:0},transition:{duration:.7,ease:c},children:"24 Stunden sp\xe4ter"}),(0,n.jsx)("div",{className:"mt-3 text-xl font-semibold text-zinc-900",children:"Anfrage wird gepr\xfcft"}),(0,n.jsx)("div",{className:"mt-2 text-sm leading-6 text-zinc-500",children:"Zertifikate, Termin und Partner-R\xfcckmeldung werden verarbeitet."}),(0,n.jsx)("div",{className:"mt-4 rounded-2xl px-4 py-3 text-xs font-medium",style:{backgroundColor:"rgba(245,247,252,1)",color:m},children:"Preis, Termin und Nachweis sind jetzt beim Partner eingegangen."}),(0,n.jsx)("div",{className:"mt-6 flex justify-center",children:(0,n.jsx)(l.P.div,{className:"flex h-16 w-16 items-center justify-center rounded-full",style:{backgroundColor:h},animate:{scale:[1,1.08,1],opacity:[.75,1,.75]},transition:{duration:1.8,repeat:Number.POSITIVE_INFINITY,ease:"easeInOut"},children:(0,n.jsx)(l.P.div,{className:"h-8 w-8 rounded-full border-[3px] border-transparent",style:{borderTopColor:u,borderRightColor:u,borderBottomColor:"rgba(63,63,70,0.2)",borderLeftColor:"rgba(63,63,70,0.2)"},animate:{rotate:360},transition:{duration:1.5,repeat:Number.POSITIVE_INFINITY,ease:"linear"}})})}),(0,n.jsx)("div",{className:"mt-5 h-2 overflow-hidden rounded-full",style:{backgroundColor:h},children:(0,n.jsx)(l.P.div,{className:"h-full rounded-full",style:{backgroundColor:u},initial:{width:"18%"},animate:{width:["28%","56%","84%"]},transition:{duration:2.1,times:[0,.52,1],ease:"easeInOut"}})})]}),P=()=>(0,n.jsxs)("div",{className:"w-full max-w-[320px] rounded-[28px] border bg-white p-6 text-center shadow-[0_18px_40px_rgba(61,85,133,0.08)]",style:{borderColor:x},children:[(0,n.jsx)("div",{className:"mx-auto flex h-16 w-16 items-center justify-center rounded-full",style:{backgroundColor:x,color:m},children:(0,n.jsx)(r.g,{icon:s.e68,className:"text-2xl"})}),(0,n.jsx)("div",{className:"mt-4 text-xl font-semibold text-zinc-900",children:"Verifiziert"}),(0,n.jsx)("div",{className:"mt-2 text-sm leading-6 text-zinc-500",children:"Preis, Termin und Nachweis sind im Projekt hinterlegt."}),(0,n.jsx)("div",{className:"mt-5 rounded-2xl px-4 py-3 text-sm font-medium",style:{backgroundColor:"rgba(245,247,252,1)",color:m},children:"R\xfcckmeldung innerhalb von 24 Stunden"})]});var C=i(60085),S=i(26691),A=i(83712),F=i(4513),I=i(93156),_=i(7185),T=i(8890),$=i(64836),E=i(72550),L=i(15497),M=i(97230),R=i(34009);let D=[{icon:s.LP,problem:"Zertifizierung des Ausbaus",solution:"Zertifizierter Ausbaupartner f\xfcr ganz Deutschland",bullets:["Fachbetrieb mit WHG/AwSV-Zertifikat","Fl\xe4chendeckend verf\xfcgbar, auch in l\xe4ndlichen Regionen"]},{icon:s.Yed,problem:"Hoher Organisationsaufwand",solution:"Direkt in Reonic integriert – Anfrage und Ablauf aus einer Hand",bullets:["Anfrage direkt aus dem Projektkontext heraus","Status und Dokumente bleiben im Projekt verf\xfcgbar"]},{icon:s.s5m,problem:"Undurchsichtige Preise",solution:"Verbindliches Preisangebot und Ausbau-Termin innerhalb von 24 Stunden",bullets:["Klare Kalkulationsgrundlage f\xfcr deine Angebote","Sofortige Planungssicherheit f\xfcr deine Kunden"]}],O=[{title:"Auftragsdetails einreichen",text:"Die \xd6lheizung muss raus wegen einer neuen W\xe4rmepumpe? Mit wenigen Klicks \xfcbertr\xe4gst du die Projektdetails aus Reonic an unseren Partner."},{title:"Vermittlung & Angebot",text:"Unser Partner erstellt ein verbindliches Angebot und macht einen Termin-Vorschlag auf Basis der eingereichten Angaben."},{title:"Abtransport und Entsorgung",text:"Der Abtransport und die Entsorgung erfolgen zum vereinbarten Datum."},{title:"Entsorgungsnachweise",text:"Alle Nachweise stehen anschlie\xdfend direkt in Reonic im Projekt zur Verf\xfcgung."}],W=[{question:"F\xfcr wen ist der \xd6ltank-Ausbau-Service gedacht?",answer:"Der Service r

1ichtet sich an Installateure, die ihren Kunden beim Heizungstausch oder bei Sanierungsprojekten einen professionell koordinierten \xd6ltank-Ausbau mit anbieten m\xf6chten."},{question:"Warum ist ein zertifizierter Partner wichtig?",answer:"Beim \xd6ltank-Ausbau gelten rechtliche und fachliche Anforderungen. Mit einem zertifizierten Partner l\xe4sst sich der Ausbau rechtskonform, sauber dokumentiert und f\xfcr den Endkunden verl\xe4sslich umsetzen."},{question:"Wie schnell bekomme ich Preis und Termin?",answer:"Reonic ist darauf ausgelegt, innerhalb von 24 Stunden ein verbindliches Preisangebot und einen konkreten Ausbau-Termin bereitzustellen, damit du deinen Kunden schnell Sicherheit geben kannst."},{question:"Wie f\xfcgt sich der Service in meinen Reonic-Workflow ein?",answer:"Die Anfrage wird direkt aus dem Projektkontext heraus gestartet. Dadurch bleiben Informationen, Abstimmungen und der Service-Status an derselben Stelle wie deine \xfcbrigen Projektprozesse."},{question:"Was passiert mit dem Rest\xf6l?",answer:"Das \xd6l kann entweder abtransportiert oder umgelagert werden."},{question:"Wie kann ich den Service nutzen?",answer:"Buch dir einen Termin zum Onboarding. Im Anschluss kannst du loslegen!"}],K=()=>(0,n.jsx)("div",{className:"relative w-full lg:w-[50vw] lg:max-w-[650px] lg:ml-auto",children:(0,n.jsx)(o.E9,{size:"xl",src:"/features/oil-tank-service/oeltank-hero.png",alt:"\xd6ltank-Ausbau in einem Keller",className:"h-auto w-full object-contain"})}),q=e=>{let{locale:t}=e;return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(E.t,{locale:t,title:"Reonic \xb7 \xd6ltank-Ausbau-Service f\xfcr Installateure",description:"\xd6ltank-Ausbau deutschlandweit koordiniert, zertifiziert und planbar. Mit Reonic bietest du deinen Kunden einen integrierten Service mit verbindlichen Preisen und Terminen innerhalb von 24 Stunden.",canonicalLink:`https://reonic.com/${t.toLowerCase()}/product/360h/oeltank-ausbau/`}),(0,n.jsx)($.J,{locale:t,transparent:!0,white:!0}),(0,n.jsx)(_.$,{locale:t,className:"text-white [&_.text-zinc-600]:!text-white/85 [&_.text-zinc-400]:!text-white/60 [&_.bg-zinc-300]:!bg-white/30",subtitleClassName:"text-white/85",calloutIconClassName:"text-white",badgeText:"\xd6ltank-Ausbau-Service",noDefaultBackground:!0,sectionBackground:(0,n.jsx)("div",{className:"w-full h-full",style:{backgroundImage:(0,o.SG)("/gradients/gradient-20.png"),backgroundSize:"cover",backgroundPosition:"center"}}),title:(0,n.jsx)(n.Fragment,{children:"Deutschlandweit mit wenigen Klicks zum \xd6ltank-Ausbau"}),subtitle:"Mit dem Reonic-\xd6ltankservice kannst du deinen Kunden den \xd6ltank-Ausbau mit zertifiziertem Partner, klaren Preisen und verbindlicher R\xfcckmeldung innerhalb von 24 Stunden anbieten.",showEmailInput:!1,showGoogleReviews:!1,cta:(0,n.jsx)(R.dg,{href:(0,T.W3)(t,"/book-a-meeting/"),color:"offwhite-filled",className:"px-6 py-2.5 text-sm",children:"Demo buchen"}),callouts:["Zertifizierter Partner f\xfcr ganz Deutschland","Direkt in Reonic integriert","Verbindliche Preise und Termine in 24 Stunden"],rightSide:(0,n.jsx)(K,{})}),(0,n.jsx)(M.wn,{id:"loesung",className:"py-24",children:(0,n.jsxs)("div",{className:"grid gap-10 lg:grid-cols-[1.1fr_0.9fr] lg:items-start lg:gap-14",children:[(0,n.jsx)("div",{children:(0,n.jsx)(w,{})}),(0,n.jsxs)("div",{className:"max-w-4xl",children:[(0,n.jsxs)(S.w,{size:"lg",className:"text-offblack mb-4",children:["Ein integrierter Prozess",(0,n.jsx)("br",{}),"anstatt zus\xe4tzlicher Organisationsaufwand"]}),(0,n.jsx)("p",{className:"text-lg text-zinc-600 leading-relaxed mb-8",children:"Mit Reonic bietest du den \xd6ltank-Ausbau direkt als festen Bestandteil deines eigenen Prozesses an. Alle Anfragen laufen unkompliziert \xfcber ein \xfcbersichtliches Formular und werden nahtlos an einen zertifizierten Partner weitergeleitet."}),(0,n.jsx)(F.P,{size:"medium",label:"Vorteile",items:["Zertifizierter Ausbaupartner f\xfcr ganz Deutschland","Direkt aus dem Reonic-Projekt heraus anfragen","Angebot und Ausbau-Termin innerhalb von 24 Stunden"]})]})]})}),(0,n.jsxs)(M.wn,{className:"py-20",outerClassName:"bg-white",children:[(0,n.jsxs)("div",{className:"mb-12",children:[(0,n.jsx)(S.w,{size:"lg",className:"text-offblack mb-4",children:"Drei Probleme. Eine L\xf6sung."}),(0,n.jsx)("p",{className:"text-lg text-zinc-600 leading-relaxed",children:"Der fachgerechte Ausbau alter \xd6ltanks ist f\xfcr viele Betriebe im W\xe4rmepumpen-Bereich ein wichtiges, aber oft organisatorisch aufwendiges Thema. Reonic macht diesen Schritt f\xfcr dich einfach: Wir integrieren die Anfrage, das verbindliche Angebot und den Ausbau nahtlos in deinen Prozess. So beh\xe4ltst du jederzeit den \xdcberblick und bekommst f\xfcr jedes Projekt innerhalb von 24 Stunden 

1Klarheit \xfcber Preis und Termin, direkt in Reonic."})]}),(0,n.jsx)("div",{className:"grid gap-3 md:grid-cols-3 md:grid-rows-[auto_1fr]",children:D.map(e=>(0,n.jsxs)("div",{className:"overflow-hidden rounded-2xl border-zinc-200 bg-white md:grid md:row-span-2 md:grid-rows-subgrid",children:[(0,n.jsxs)("div",{className:"p-5",children:[(0,n.jsx)("div",{className:"mb-3 text-xs font-medium uppercase tracking-[0.16em] text-zinc-500",children:"Problem"}),(0,n.jsxs)("div",{className:"flex items-center gap-4",children:[(0,n.jsx)("div",{className:"flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl bg-zinc-100 text-zinc-800",children:(0,n.jsx)(r.g,{icon:e.icon,className:"text-xl"})}),(0,n.jsx)("h3",{className:"text-xl font-semibold leading-tight text-zinc-900",children:e.problem})]})]}),(0,n.jsxs)("div",{className:"border-t border-zinc-200 p-5",children:[(0,n.jsx)("div",{className:"mb-3 text-xs font-medium uppercase tracking-[0.16em] text-zinc-500",children:"L\xf6sung"}),(0,n.jsx)("div",{className:"flex items-start gap-4",children:(0,n.jsxs)("div",{className:"min-w-0",children:[(0,n.jsx)("h3",{className:"text-xl font-semibold leading-tight text-zinc-900",children:e.solution}),(0,n.jsx)("ul",{className:"mt-4 space-y-2",children:e.bullets.map(e=>(0,n.jsxs)("li",{className:"flex items-start gap-2 text-sm text-zinc-600",children:[(0,n.jsx)("span",{className:"mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full bg-zinc-400"}),(0,n.jsx)("span",{children:e})]},e))})]})})]})]},e.problem))})]}),(0,n.jsxs)(M.wn,{id:"prozess",className:"py-28 md:py-36",outerClassName:"border-t border-zinc-200",children:[(0,n.jsxs)("div",{className:"mb-14 max-w-3xl",children:[(0,n.jsx)(S.w,{size:"lg",className:"text-offblack mb-4",children:"Der Ablauf im Detail"}),(0,n.jsx)("p",{className:"text-lg text-zinc-600 leading-relaxed",children:"Von der Anfrage bis zur vollst\xe4ndigen Dokumentation in Reonic."})]}),(0,n.jsxs)(A.P,{className:"grid grid-cols-1 lg:grid-cols-[1fr_1.5fr]",extend:["blh","brh","blv","brv","tlh","trh","tlv","trv"],border:["b","l","r","t"],children:[(0,n.jsxs)("div",{className:"p-8 lg:p-10 border-r border-zinc-200 flex flex-col justify-center",style:{backgroundImage:(0,o.SG)("/gradients/gradient-20.png"),backgroundSize:"cover",backgroundPosition:"center"},children:[(0,n.jsxs)("div",{className:"text-3xl sm:text-4xl font-semibold text-white tracking-tight leading-snug mb-4",children:["1 Klick von dir,",(0,n.jsx)("br",{}),"3 Schritte die wir \xfcbernehmen."]}),(0,n.jsx)("p",{className:"text-zinc-400 leading-relaxed",children:"Du startest die Anfrage in Reonic. Wir und unser Partner \xfcbernehmen den Rest, bis die Nachweise im Projekt liegen."})]}),(0,n.jsx)("div",{className:"p-8 lg:p-10",children:(0,n.jsx)(L.v,{direction:"vertical",steps:O.map(e=>({title:e.title,description:e.text}))})})]})]}),(0,n.jsx)(I.A,{title:"H\xe4ufig gestellte Fragen",items:[...W]}),(0,n.jsx)(C.wi,{locale:t})]})};function V(){return(0,n.jsx)(q,{locale:"DE-DE"})}},28925:(e,t,i)=>{(window.__NEXT_P=window.__NEXT_P||[]).push(["/de-de/product/360h/oeltank-ausbau",function(){return i(22060)}])},83712:(e,t,i)=>{"use strict";i.d(t,{P:()=>r});var n=i(37876),s=i(69241);let r=e=>{let{children:t,extend:i,border:r,className:l,light:a=!1}=e;return(0,n.jsxs)("div",{className:(0,s.$)("relative border border-transparent",r?.includes("l")&&(a?"border-l-zinc-100":"border-l-zinc-200"),r?.includes("r")&&(a?"border-r-zinc-100":"border-r-zinc-200"),r?.includes("t")&&(a?"border-t-zinc-100":"border-t-zinc-200"),r?.includes("b")&&(a?"border-b-zinc-100":"border-b-zinc-200"),l),children:[i.map(e=>(0,n.jsx)("div",{className:(0,s.$)("absolute border-dashed",a?"border-zinc-100":"border-zinc-200","tlv"===e&&"border-l h-[38px] -top-[41px] left-[-2px]","tlh"===e&&"border-t w-[38px] -left-[41px] top-[-2px]","trv"===e&&"border-l h-[38px] -top-[41px] right-[-1px]","blv"===e&&"border-l h-[38px] -bottom-[41px] left-[-2px]","brv"===e&&"border-l h-[38px] -bottom-[41px] right-[-1px]","trh"===e&&"border-t w-[38px] -right-[41px] top-[-2px]","blh"===e&&"border-t w-[38px] -left-[41px] bottom-[-2px]","brh"===e&&"border-t w-[38px] -right-[41px] bottom-[-2px]"),style:{maskImage:`linear-gradient(to ${e.endsWith("v")?e.startsWith("t")?"top":"bottom":e.includes("l")?"left":"right"}, black, transparent)`,WebkitMaskImage:`linear-gradient(to ${e.endsWith("v")?e.startsWith("t")?"top":"bottom":e.includes("l")?"left":"right"}, black, transparent)`}},e)),t]})}},93156:(e,t,i)=>{"use strict";i.d(t,{A:()=>

1o});var n=i(37876),s=i(77328),r=i.n(s),l=i(14232),a=i(26691),d=i(97230);function o(e){let{items:t,title:i,defaultOpen:s}=e,[o,c]=(0,l.useState)(s),m=e=>{c(o===e?void 0:e)},x={"@context":"https://schema.org","@type":"FAQPage",mainEntity:t.map(e=>({"@type":"Question",name:e.question,acceptedAnswer:{"@type":"Answer",text:e.answer}}))};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(r(),{children:(0,n.jsx)("script",{type:"application/ld+json",dangerouslySetInnerHTML:{__html:JSON.stringify(x)}})}),(0,n.jsxs)(d.wn,{className:"py-24 flex flex-col gap-10",outerClassName:"border-t border-zinc-200",children:[(0,n.jsx)(a.w,{size:"lg",className:"text-offblack",as:"div",children:i}),(0,n.jsx)("div",{className:"divide-y divide-zinc-200",children:t.map((e,t)=>{let i=o===t,s=`faq-answer-${t}`;return(0,n.jsxs)("div",{children:[(0,n.jsxs)("button",{onClick:()=>m(t),className:"w-full cursor-pointer font-medium text-offblack py-5 select-none flex items-center justify-between gap-4 text-left","aria-expanded":i,"aria-controls":s,id:`faq-question-${t}`,children:[e.question,(0,n.jsx)("svg",{className:`w-4 h-4 shrink-0 text-zinc-400 transition-transform duration-300 ${i?"rotate-180":""}`,fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",strokeWidth:2,children:(0,n.jsx)("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M19 9l-7 7-7-7"})})]}),(0,n.jsx)("div",{id:s,role:"region","aria-labelledby":`faq-question-${t}`,className:`grid transition-[grid-template-rows] duration-300 ease-in-out ${i?"grid-rows-[1fr]":"grid-rows-[0fr]"}`,children:(0,n.jsx)("div",{className:"overflow-hidden",children:(0,n.jsx)("p",{className:"text-zinc-500 leading-relaxed pb-5 pr-10",children:e.answer})})})]},t)})})]})]})}}},e=>{var t=t=>e(e.s=t);e.O(0,[9886,7164,4840,7725,8805,6701,3046,1592,2490,6091,7978,2550,9355,9682,636,6593,8792],()=>t(28925)),_N_E=e.O()}]);