Ratgeber + Konfigurator: /rechner (Klima-Rechner mit kW/BTU + Empfehlung→Preis/Monteur), /soforthilfe (Hitze-Tipps Dachgeschoss/Haus, Quellen), /klimaanlage-installieren (SHK fest, Preise+Alternativen); Nav/Footer/Home-Verlinkung
This commit is contained in:
@@ -0,0 +1,112 @@
|
||||
---
|
||||
import Base from '../layouts/Base.astro';
|
||||
import { allProducts } from '../lib/pricing';
|
||||
const products = allProducts.map(p=>({slug:p.slug,name:p.name,type:p.type,btuh:p.btuh,uvp:p.uvp,badge:p.badge,apartment:p.apartmentSuitable,room:p.roomSizeM2}));
|
||||
---
|
||||
<Base title="Klima-Rechner: Welche Leistung & welches Gerät brauche ich? | Kühlfinder" description="Sag uns Raumgröße, Typ und wie du kühlen willst – der Klima-Rechner zeigt die nötige Leistung (kW/BTU), ob mobil oder fest sinnvoll ist, und passende Geräte mit Preis-/Verfügbarkeits-Link.">
|
||||
<section class="wrap" style="margin-top:1.6rem;max-width:920px">
|
||||
<span class="eyebrow"><span class="dot ok live"></span>Klima-Rechner</span>
|
||||
<h1>Was brauche ich für meinen Raum?</h1>
|
||||
<p class="muted" style="max-width:48rem">Drei Eingaben – sofort die nötige Kühlleistung, eine ehrliche Empfehlung (mobil als Brücke oder feste Anlage als Lösung) und passende Geräte mit direktem Link zu Verfügbarkeit/Preis oder Monteur.</p>
|
||||
|
||||
<div class="calc">
|
||||
<div class="ctrl card">
|
||||
<label class="big">Raumgröße <span class="num" id="m2-out">25 m²</span></label>
|
||||
<input type="range" id="m2" min="8" max="80" step="1" value="25" />
|
||||
|
||||
<label>Raumtyp</label>
|
||||
<div class="seg" id="room">
|
||||
<button class="segbtn on" data-v="schlafzimmer">Schlafzimmer</button>
|
||||
<button class="segbtn" data-v="wohnzimmer">Wohnzimmer</button>
|
||||
<button class="segbtn" data-v="homeoffice">Homeoffice</button>
|
||||
<button class="segbtn" data-v="dachgeschoss">Dachgeschoss</button>
|
||||
</div>
|
||||
|
||||
<label>Sonne / Lage</label>
|
||||
<div class="seg" id="sun">
|
||||
<button class="segbtn" data-v="wenig">wenig</button>
|
||||
<button class="segbtn on" data-v="mittel">mittel</button>
|
||||
<button class="segbtn" data-v="viel">viel Sonne</button>
|
||||
</div>
|
||||
|
||||
<label>Wie willst du kühlen?</label>
|
||||
<div class="seg col" id="mode">
|
||||
<button class="segbtn on" data-v="abends">Nur abends / nachts (Schlafen)</button>
|
||||
<button class="segbtn" data-v="tag">Den ganzen Tag</button>
|
||||
<button class="segbtn" data-v="mehr">Mehrere Räume gleichzeitig</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="result card" id="result"></div>
|
||||
</div>
|
||||
</section>
|
||||
</Base>
|
||||
<style>
|
||||
.calc{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.2rem;align-items:start}
|
||||
.ctrl{display:flex;flex-direction:column;gap:.5rem}
|
||||
.ctrl label{font-weight:600;font-size:.9rem;margin-top:.6rem}
|
||||
.ctrl label.big{display:flex;justify-content:space-between;align-items:baseline;font-size:1rem}
|
||||
.ctrl label.big .num{font-size:1.2rem;color:var(--petrol-deep)}
|
||||
.seg{display:flex;gap:.35rem;flex-wrap:wrap;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:4px}
|
||||
.seg.col{flex-direction:column}
|
||||
.segbtn{font-family:var(--font-body);font-weight:500;font-size:.85rem;border:0;background:transparent;color:var(--slate);padding:.45rem .8rem;border-radius:9px;cursor:pointer;text-align:left;transition:background .15s,color .15s}
|
||||
.segbtn.on{background:var(--petrol);color:#fff}
|
||||
.result{min-height:300px}
|
||||
.rkw{display:flex;gap:1.4rem;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:.8rem;margin-bottom:.8rem}
|
||||
.rkw .v{font-size:1.7rem;font-weight:600;font-family:var(--mono);color:var(--petrol-deep)}
|
||||
.rkw small{color:var(--slate);font-size:.78rem}
|
||||
.verdict{background:var(--petrol-soft);border-radius:12px;padding:.8rem 1rem;margin:.4rem 0 .8rem;font-size:.95rem}
|
||||
.verdict.warm{background:var(--warm-bg)}
|
||||
.rec{display:flex;justify-content:space-between;align-items:center;gap:.6rem;padding:.6rem 0;border-bottom:1px solid var(--line)}
|
||||
.rec .rn{font-weight:600}.rec .rb{font-size:.78rem;color:var(--slate)}
|
||||
.rcta{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.9rem}
|
||||
@media(max-width:820px){.calc{grid-template-columns:1fr}}
|
||||
</style>
|
||||
<script define:vars={{ products }}>
|
||||
const euro=n=>new Intl.NumberFormat('de-DE',{style:'currency',currency:'EUR',maximumFractionDigits:0}).format(n);
|
||||
const S={m2:25,room:'schlafzimmer',sun:'mittel',mode:'abends'};
|
||||
const $=s=>document.querySelector(s),$$=s=>Array.from(document.querySelectorAll(s));
|
||||
function calc(){
|
||||
let f=0.06; // kW pro m² Grundlast
|
||||
if(S.room==='dachgeschoss')f+=0.025; if(S.room==='wohnzimmer')f+=0.01;
|
||||
if(S.sun==='viel')f+=0.02; if(S.sun==='wenig')f-=0.01;
|
||||
let kw=S.m2*f;
|
||||
const btu=Math.round(kw*3412/100)*100;
|
||||
kw=Math.round(kw*10)/10;
|
||||
// recommendation logic
|
||||
let verdict, warm=false, picks=[], ctaPrimary, ctaSec;
|
||||
const fit=products.filter(p=>p.btuh>=btu-1500).sort((a,b)=>a.btuh-b.btuh);
|
||||
const apt=fit.filter(p=>p.apartment);
|
||||
if(S.mode==='mehr'){
|
||||
warm=true;
|
||||
verdict='Mehrere Räume gleichzeitig kühlst du am sinnvollsten mit einer <strong>fest installierten Multisplit-Anlage</strong> (ein Außengerät, mehrere leise Innengeräte). Mobil bräuchtest du pro Raum ein Gerät.';
|
||||
picks=apt.filter(p=>p.type==='mobile_split').slice(0,2);
|
||||
ctaPrimary={t:'Feste Anlage / Monteur',href:'/klimaanlage-installieren'};
|
||||
ctaSec={t:'Mobile Brücke ansehen',href:'/karte'};
|
||||
} else if(S.mode==='tag'){
|
||||
verdict='Für den <strong>Ganztagsbetrieb</strong> lohnt sich Effizienz und Leise: eine <strong>fest installierte Split-/Wärmepumpenanlage</strong> ist langfristig am besten (heizt auch im Winter). Als Sofort-Brücke geht ein gutes mobiles Gerät.';
|
||||
picks=apt.slice(0,2);
|
||||
ctaPrimary={t:'Feste Anlage / Monteur',href:'/klimaanlage-installieren'};
|
||||
ctaSec={t:'Jetzt verfügbar (mobil)',href:'/karte?modell='+(picks[0]?.slug||'')};
|
||||
} else {
|
||||
verdict='Für <strong>abends/nachts</strong> reicht meist ein gutes mobiles Gerät – mobile Split ist leiser, Monoblock flexibler. Sieh direkt, wo es verfügbar ist.';
|
||||
picks=apt.slice(0,2);
|
||||
ctaPrimary={t:'Preise & Verfügbarkeit',href:'/karte?modell='+(picks[0]?.slug||'')};
|
||||
ctaSec={t:'Oder fest installieren',href:'/klimaanlage-installieren'};
|
||||
}
|
||||
if(!picks.length)picks=fit.slice(0,2);
|
||||
const recHtml=picks.map(p=>`<div class="rec"><div><div class="rn">${p.name}</div><div class="rb">${p.badge} · ${p.btuh.toLocaleString('de-DE')} BTU · ab ${euro(Math.round(p.uvp*0.92))}</div></div><a class="btn sm ghost" href="/karte?modell=${p.slug}">prüfen</a></div>`).join('');
|
||||
$('#result').innerHTML=`
|
||||
<div class="rkw"><div><div class="v">${kw.toLocaleString('de-DE')} kW</div><small>empfohlene Kühlleistung</small></div>
|
||||
<div><div class="v">${btu.toLocaleString('de-DE')}</div><small>BTU/h (Richtwert)</small></div>
|
||||
<div><div class="v">${S.m2} m²</div><small>${S.room}</small></div></div>
|
||||
<div class="verdict ${warm?'warm':''}">${verdict}</div>
|
||||
<div class="recs"><strong>Passende Geräte</strong>${recHtml}</div>
|
||||
<div class="rcta"><a class="btn" href="${ctaPrimary.href}">${ctaPrimary.t}</a><a class="btn ghost" href="${ctaSec.href}">${ctaSec.t}</a></div>
|
||||
<p class="note" style="margin-top:.8rem">Richtwert nach Faustformel (Raumgröße, Lage, Sonne). Genaue Auslegung macht der Fachbetrieb. <a href="/finder">Lieber Schritt-für-Schritt? Zum Finder</a></p>`;
|
||||
}
|
||||
$('#m2').addEventListener('input',e=>{S.m2=+e.target.value;$('#m2-out').textContent=S.m2+' m²';calc();});
|
||||
['room','sun','mode'].forEach(g=>$$('#'+g+' .segbtn').forEach(b=>b.addEventListener('click',()=>{
|
||||
$$('#'+g+' .segbtn').forEach(x=>x.classList.remove('on'));b.classList.add('on');S[g]=b.dataset.v;calc();})));
|
||||
calc();
|
||||
</script>
|
||||
Reference in New Issue
Block a user