Website erstellen lassen

.servit-cc{--bg:#ffffff;--card:#f6f7f9;--muted:#5b6570;--border:#e3e7ee;--text:#0b1720;--accent:#008fbf;--focus:#7fd3ec} .servit-cc{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:16px;padding:20px;max-width:860px;margin:auto;box-shadow:0 8px 24px rgba(0,0,0,.06)} .servit-cc__title{margin:0 0 4px;font-size:1.6rem;font-weight:800} .servit-cc__subtitle{margin:0 0 18px;color:var(--muted);font-size:.95rem} .servit-cc__field{margin-bottom:14px} .servit-cc__field label{display:block;margin-bottom:6px;font-weight:600} .servit-cc__field small{display:block;color:var(--muted);margin-top:6px} .servit-cc select,.servit-cc input[type=number]{width:100%;padding:10px 12px;background:#fff;color:var(--text);border:1px solid var(--border);border-radius:10px;outline:none} .servit-cc select:focus,.servit-cc input[type=number]:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,143,191,.15)} .servit-cc__fieldset{border:1px dashed var(--border);padding:12px;border-radius:12px;margin:10px 0;background:#fff} .servit-cc__fieldset legend{padding:0 6px;color:var(--muted)} .servit-cc .chk{display:inline-flex;gap:8px;align-items:center;margin:6px 12px 6px 0} .servit-cc__grid{display:grid;grid-template-columns:1fr 1fr;gap:12px} @media (max-width:680px){.servit-cc__grid{grid-template-columns:1fr}} .servit-cc__result{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:12px;margin-top:8px} .servit-cc__range{display:flex;align-items:center;justify-content:space-between;gap:12px} .servit-cc__label{color:var(--muted);font-size:.85rem} .servit-cc__value{font-weight:800;font-size:1.35rem} .servit-cc__breakdown{background:#fff;border:1px solid var(--border);border-radius:10px;padding:12px;white-space:pre-wrap;overflow:auto;margin-top:10px} .servit-cc__cta{display:flex;flex-direction:column;gap:8px;margin-top:14px} .servit-cc__btn{cursor:pointer;border-radius:12px;border:1px solid var(--border);padding:10px 14px;font-weight:700} .servit-cc__btn.primary{background:var(--accent);border-color:transparent;color:#fff} .servit-cc__btn.ghost{background:transparent;color:var(--muted)} .servit-cc .req{color:#b55600} .servit-cc__pill{display:inline-block;background:#eef6fa;border:1px solid #d6e9f2;color:#0b1720;padding:6px 10px;border-radius:999px;font-weight:600}(() => { const CONFIG = { currency: '€', hourly: 90, baseHours: { wp: 50, laravel: 140, onepager: 24 }, designMultipliers: { base: 1.0, client_design: 1.2, figma_custom: 1.4 }, deadlineMultipliers: { flex: 0.95, standard: 1.0, rush: 1.2 }, qaMultipliers: { std: 1.0, plus: 1.15 }, per5PagesHours: { wp: 8, laravel: 10, onepager: 0 }, featureHours: { newsletter: { wp: 6, laravel: 8, onepager: 4 }, gallery: { wp: 6, laravel: 8, onepager: 4 }, blog: { wp: 10, laravel: 12, onepager: 6 }, crm_api: { wp: 16, laravel: 30, onepager: 12 }, booking: { wp: 10, laravel: 16, onepager: 8 }, multilang: { wp: 10, laravel: 8, onepager: 6 }, seo: { wp: 8, laravel: 10, onepager: 6 }, hosting: { wp: 6, laravel: 8, onepager: 4 }, dsgvo: { wp: 4, laravel: 4, onepager: 3 } }, range: { low: 0.9, high: 1.2 }, redirect: { enabled: true, targetUrl: '#projekt-anfragen', paramMap: { project_type: 'projectType', implementation: 'implementation', page_count: 'pageCount', design_level: 'designLevel', features: 'featuresCsv', deadline: 'deadline', qa: 'qaLevel', estimate_low: 'estimateLow', estimate_high: 'estimateHigh', calc_json: 'calcJson' } } }; const $ = (s, e=document) => e.querySelector(s); const $$ = (s, e=document) => Array.from(e.querySelectorAll(s)); const form = document.querySelector('#servit-cc-form'); const els = { implType: $('#implType'), pageCount: $('#pageCount'), designLevel: $('#designLevel'), features: $$('.servit-cc__fieldset input[type=checkbox]'), estLow: $('#estLow'), estHigh: $('#estHigh'), breakdown: $('#breakdown'), toggleBreakdown: $('#toggleBreakdown'), requestBtn: $('#requestBtn'), deadline: $('#deadline'), qaLevel: $('#qaLevel'), pageCountField: $('#pageCountField') }; function getValues(){ const implementation = els.implType.value; const pageCount = Math.max(1, parseInt(els.pageCount.value||'1',10)); const designLevel = els.designLevel.value; const deadline = els.deadline.value; const qaLevel = els.qaLevel.value; const features = els.features.filter(c=>c.checked && !c.disabled).map(c=>c.value); return { implementation, pageCount, designLevel, deadline, qaLevel, features }; } function calcEstimate(){ const v = getValues(); if(!v.implementation) return { valid:false }; const base = CONFIG.baseHours[v.implementation]||0; const per5 = CONFIG.per5PagesHours[v.implementation]||0; const pageBlocks = v.implementation==='onepager'?0:Math.ceil(Math.max(0,v.pageCount-5)/5); let hours = base + pageBlocks*per5; let featureDetails=[]; v.features.forEach(f=>{const fh=(CONFIG.featureHours[f]&&CONFIG.featureHours[f][v.implementation])||0;hours+=fh;featureDetails.push(`${f}: ${fh}h`)}); const mDesign=CONFIG.designMultipliers[v.designLevel]||1; const mDeadline=CONFIG.deadlineMultipliers[v.deadline]||1; const mQA=CONFIG.qaMultipliers[v.qaLevel]||1; const hoursMult=hours*mDesign*mDeadline*mQA; const baseCost=hoursMult*CONFIG.hourly; const low=Math.round(baseCost*CONFIG.range.low/10)*10; const high=Math.round(baseCost*CONFIG.range.high/10)*10; return{valid:true,breakdown:{inputs:v,baseHours:base,pageBlocks,featureHours:featureDetails,hoursTotal:hoursMult,estimateLow:low,estimateHigh:high,rate:CONFIG.hourly}}; } function updateUI() { const impl = els.implType.value; els.pageCountField.style.display = impl === 'onepager' ? 'none' : 'block'; const res = calcEstimate(); if (!res.valid) { els.estLow.textContent = '–'; els.estHigh.textContent = '–'; els.breakdown.textContent = ''; return; } const b = res.breakdown; const format = n => n.toLocaleString('de-DE', { minimumFractionDigits: 2, maximumFractionDigits: 2 }); els.estLow.textContent = format(b.estimateLow); els.estHigh.textContent = format(b.estimateHigh); const v = b.inputs; const breakdownTxt = `Eingaben: - Umsetzungsart: ${v.implementation} - Seiten: ${v.implementation === 'onepager' ? 'Landingpage + Impressum + Datenschutz (fix)' : v.pageCount} - Design: ${v.designLevel} - Deadline: ${v.deadline} - QA: ${v.qaLevel} - Features: ${v.features.length ? v.features.join(', ') : '—'} Berechnung: - Basisstunden: ${b.baseHours}h - Seitenblöcke (>5, je 5): ${b.pageBlocks} - Gesamtstunden: ${Math.round(b.hoursTotal * 10) / 10}h - Satz: ${b.rate} €/h Schätzung netto: ${format(b.estimateLow)} – ${format(b.estimateHigh)} €`; els.breakdown.textContent = breakdownTxt; } // Events ['change','input'].forEach(ev => form.addEventListener(ev, updateUI)); els.toggleBreakdown.addEventListener('click', () => { const isHidden = els.breakdown.hasAttribute('hidden'); if (isHidden) els.breakdown.removeAttribute('hidden'); else els.breakdown.setAttribute('hidden',''); }); els.requestBtn.addEventListener('click', () => { const r = calcEstimate(); if (!r.valid) return; const v = r.breakdown.inputs; const featuresCsv = v.features.join(','); const q = new URLSearchParams({ project_type: 'Webseite erstellen lassen', implementation: v.implementation, page_count: v.implementation==='onepager' ? '3' : String(v.pageCount), design_level: v.designLevel, features: featuresCsv, deadline: v.deadline, qa: v.qaLevel, estimate_low: r.breakdown.estimateLow, estimate_high: r.breakdown.estimateHigh, calc_json: JSON.stringify(r.breakdown) }); window.location.href = CONFIG.redirect.targetUrl + '?' + q.toString(); }); // Init updateUI(); // Dev tests (open console). Use ?test=1 function runDevTests(){ function simulate(impl,pages,design,features,deadline='standard',qa='std'){ els.implType.value=impl; if(impl!=='onepager') els.pageCount.value=String(pages); els.designLevel.value=design; els.deadline.value=deadline; els.qaLevel.value=qa; els.features.forEach(c=>{ if(!c.disabled) c.checked = features.includes(c.value); }); return calcEstimate(); } const t=[ ['wp',8,'base',[]], ['laravel',12,'client_design',['crm_api','seo','hosting']], ['onepager',1,'figma_custom',['newsletter','booking']] ]; // Additional tests (do not change existing ones) t.push(['wp',15,'figma_custom',['newsletter','gallery','multilang'],'rush','plus']); t.push(['laravel',20,'client_design',['crm_api','booking','seo','hosting'],'standard','std']); console.group('%cSERVIT CC Tests','color:#008fbf;font-weight:bold'); t.forEach(spec=>{const r=simulate(...spec); console.log(spec[0], r.valid? r.breakdown : r); }); console.groupEnd(); } if(new URLSearchParams(location.search).get('test')==='1'){ runDevTests(); } })();