Embed

<div id="immo-app" style="--bg:#111725; --panel:#0b141c; --text:#ffffff; --muted:#9fb0c8; --accent:#4caf50; font-family:Inter, Arial, sans-serif; background:var(--bg); color:var(--text); padding:28px;">
  <style>
    #immo-app .container { max-width:1200px; margin:0 auto; }
    #immo-app .grid { display:grid; grid-template-columns: 1.2fr 1fr; gap:32px; align-items:start; }
    #immo-app svg { width:100%; height:420px; display:block; }
    #immo-app .inputs { display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; margin-top:18px; }
    #immo-app label { display:block; color:var(--text); font-size:15px; margin-bottom:6px; }
    #immo-app input[type="number"] {
      width:100%; background:#fff; color:#000; border:1px solid #d0d6e0;
      border-radius:10px; padding:10px 12px; font-size:15px;
    }
    #immo-app .panel { background:var(--panel); border-radius:12px; padding:18px; color:var(--text); box-shadow:0 6px 18px rgba(2,6,12,0.4); }
    #immo-app .panel h3 { margin:0 0 12px; font-size:18px; }
    #immo-app .row, #immo-app .small-row { display:grid; grid-template-columns: 1fr 110px 28px; gap:8px; align-items:center; margin-bottom:8px; }
    #immo-app .result { text-align:center; margin-top:12px; }
    #immo-app .result .big { font-size:28px; font-weight:800; }
    @media(max-width:980px){ #immo-app .grid { grid-template-columns:1fr; } svg{height:320px;} .inputs{grid-template-columns:repeat(2,1fr);} }
  </style>

  <div class="container">
    <h1 style="text-align:center; font-size:28px; font-weight:700; margin:6px 0 18px;">Immobilienrechner</h1>

    <div class="grid">
      
      <div>
        <svg id="immo-svg" viewBox="0 0 760 420" preserveAspectRatio="xMidYMid meet">
          
          <line id="line-top" stroke="#9fb0c8" stroke-width="3" marker-end="url(#arrowhead)"/>
          <line id="line-bot" stroke="#9fb0c8" stroke-width="3" marker-end="url(#arrowhead)"/>
          
          <line id="line-mid" x1="80" y1="220" x2="500" y2="220" stroke="var(--accent)" stroke-width="4" marker-end="url(#arrowhead-green)"/>
          
          <defs>
            <marker id="arrowhead" markerWidth="10" markerHeight="10" refX="2" refY="2" orient="auto">
              <polygon points="0 0, 4 2, 0 4" fill="#9fb0c8"/>
            </marker>
            <marker id="arrowhead-green" markerWidth="10" markerHeight="10" refX="2" refY="2" orient="auto">
              <polygon points="0 0, 4 2, 0 4" fill="var(--accent)"/>
            </marker>
          </defs>
          
          <text x="520" y="80" fill="var(--text)" font-size="15" font-weight="600">Wertentwicklung</text>
          <text id="svg-top-val" x="520" y="105" fill="var(--text)" font-size="20" font-weight="800">0 €</text>
          <text x="520" y="200" fill="var(--accent)" font-size="14" font-weight="700">Vermögensaufbau</text>
          <text id="svg-mid-val" x="520" y="225" fill="var(--accent)" font-size="28" font-weight="900">0 €</text>
          <text x="520" y="330" fill="var(--text)" font-size="15" font-weight="600">Restschuld</text>
          <text id="svg-bot-val" x="520" y="355" fill="var(--text)" font-size="20" font-weight="800">0 €</text>
          <text id="svg-years" x="360" y="400" fill="var(--text)" font-size="16" font-weight="700" text-anchor="middle">10 Jahre</text>
        </svg>

        
        <div class="inputs">
          <div><label for="price">Kaufpreis (€)</label><input id="price" type="number" value="447000"/></div>
          <div><label for="equity">Eigenkapital (€)</label><input id="equity" type="number" value="22350"/></div>
          <div><label for="growth">Wertentwicklung p.a. (%)</label><input id="growth" type="number" step="0.1" value="1.5"/></div>
          <div><label for="tilg-pct">Tilgung (%)</label><input id="tilg-pct" type="number" step="0.1" value="1.5"/></div>
          <div><label for="years">Laufzeit (Jahre)</label><input id="years" type="number" value="10"/></div>
          <div><label for="zins-pct">Zins (%)</label><input id="zins-pct" type="number" step="0.1" value="3"/></div>
        </div>
      </div>

      
      <div style="display:flex; flex-direction:column; gap:18px;">
        <div class="panel">
          <h3>Aufwendungen (einmalig)</h3>
          <div class="row"><div>Eigenkapital:</div><input id="once-ek" type="number" value="22350"/><div>€</div></div>
          <div class="row"><div>Kaufnebenkosten:</div><input id="once-nk" type="number" value="22350"/><div>€</div></div>
          <div class="row"><div>Maklergebühr:</div><input id="once-makler" type="number" value="0"/><div>€</div></div>
        </div>
        <div class="panel">
          <h3>Aufwendungen (monatlich)</h3>
          <div class="small-row"><div>Zins:</div><input id="mon-zins" type="number" disabled value="0"/><div>€</div></div>
          <div class="small-row"><div>Tilgung:</div><input id="mon-tilg" type="number" disabled value="0"/><div>€</div></div>
          <div class="small-row"><div>Verwaltung:</div><input id="mon-verw" type="number" value="100"/><div>€</div></div>
        </div>
        <div class="panel">
          <h3>Einnahmen (monatlich)</h3>
          <div class="row"><div>Miete:</div><input id="mon-miete" type="number" value="1300"/><div>€</div></div>
          <div class="row"><div>Steuervorteil:</div><input id="mon-steuer" type="number" value="200"/><div>€</div></div>
        </div>
        <div class="panel result">
          <div class="big" id="eigenaufwand">0 € monatlicher Eigenaufwand</div>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
(function(){
  const $=id=>document.getElementById(id);
  const fmt=n=>(isFinite(n)?Math.round(n).toLocaleString('de-DE')+" €":"0 €");

  const inpPrice=$('price'), inpEquity=$('equity'), inpGrowth=$('growth'), inpTilgPct=$('tilg-pct'), inpYears=$('years'), inpZinsPct=$('zins-pct');
  const monZins=$('mon-zins'), monTilg=$('mon-tilg'), monVerw=$('mon-verw'), inpMiete=$('mon-miete'), inpSteuer=$('mon-steuer');
  const onceEK=$('once-ek');
  const svgTopVal=$('svg-top-val'), svgMidVal=$('svg-mid-val'), svgBotVal=$('svg-bot-val'), svgYears=$('svg-years');
  const lineTop=$('line-top'), lineBot=$('line-bot');
  const outEigen=$('eigenaufwand');

  function syncEquity(from){
    if(from==="left"){ onceEK.value=inpEquity.value; }
    else if(from==="right"){ inpEquity.value=onceEK.value; }
    recalc();
  }

  function recalc(){
    const P=parseFloat(inpPrice.value)||0;
    const EK=parseFloat(inpEquity.value)||0;
    const growth=parseFloat(inpGrowth.value)||0;
    const tilgPct=parseFloat(inpTilgPct.value)||0;
    const Jahre=parseFloat(inpYears.value)||0;
    const zinsPct=parseFloat(inpZinsPct.value)||0;

    const darlehen=P-EK;
    const zinsMonthly=(darlehen*(zinsPct/100))/12;
    const tilgMonthly=(P*(tilgPct/100))/12;
    monZins.value=Math.round(zinsMonthly);
    monTilg.value=Math.round(tilgMonthly);

    const verw=parseFloat(monVerw.value)||0;
    const miete=parseFloat(inpMiete.value)||0;
    const steuer=parseFloat(inpSteuer.value)||0;

    const ausgaben=zinsMonthly+tilgMonthly+verw;
    const einnahmen=miete+steuer;
    const eigenaufwand=ausgaben-einnahmen;

    outEigen.textContent=fmt(eigenaufwand)+" monatlicher Eigenaufwand";
    outEigen.style.color=(einnahmen>=ausgaben)?"#4caf50":"#e02b2b";

    const futureValue=P*Math.pow(1+(growth/100),Jahre);
    const annualRepay=(tilgPct/100)*P;
    const restAfter=Math.max(0, darlehen-annualRepay*Jahre);
    const vermZuwachs=Math.max(0, futureValue-restAfter);

    const x0=80, y0=220, xEnd=500;
    const yTop=100, yBot=340;
    lineTop.setAttribute("x1",x0); lineTop.setAttribute("y1",y0);
    lineTop.setAttribute("x2",xEnd); lineTop.setAttribute("y2",yTop);
    lineBot.setAttribute("x1",x0); lineBot.setAttribute("y1",y0);
    lineBot.setAttribute("x2",xEnd); lineBot.setAttribute("y2",yBot);

    svgTopVal.textContent=fmt(futureValue);
    svgBotVal.textContent=fmt(restAfter);
    svgMidVal.textContent=fmt(vermZuwachs);
    svgYears.textContent=Jahre+" Jahre";
  }

  inpEquity.addEventListener('input',()=>syncEquity("left"));
  onceEK.addEventListener('input',()=>syncEquity("right"));
  document.querySelectorAll('#immo-app input').forEach(i=>i.addEventListener('input',recalc));
  recalc();
})();
</script>