verantwortlich für Texte, Bilder, Layout:

Herr Christoph Terbonsen

Bildernachweis:

Bannerbild auf allen Seiten: Adobe Stock |  Radebeul Schloss Wackerbarth – Radebeul palace Wackerbarth 01 von LianeM , Bild Über uns: Adobe Stock |  Successful lawyer giving consultation to family couple about buy von deagreez, Starte Deine Karriere Jetzt! Von Coloures-Pic, Bild Hintergrund Kontaktformular: Colibri

Supported by:

Website created for free using WordPress and Colibri, Supported by WEB & DESIGN

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Baufinanzierungsrechner – Zinsbindung</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<style>
:root {
    --primary: #2c7be5;
    --bg: #f4f6f8;
    --card: #ffffff;
    --input-bg: #eaf2ff;
}

body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: var(--bg);
}

.container {
    max-width: 1200px;
    margin: auto;
    padding: 20px;
}

h1 {
    text-align: center;
    margin-bottom: 20px;
}

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.card {
    background: var(--card);
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}

.card h2 {
    margin-top: 0;
    color: var(--primary);
}

label {
    font-size: 14px;
    margin-top: 10px;
    display: block;
}

input {
    width: calc(100% - 20px); /* Abstand zum rechten Rand */
    padding: 10px;
    margin-top: 4px;
    border-radius: 6px;
    border: 1px solid #ccc;
    background: var(--input-bg);
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.05);
    font-weight: bold;
}

button {
    width: 100%;
    padding: 12px;
    margin-top: 15px;
    font-size: 16px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.result-line {
    margin: 6px 0;
    font-weight: bold;
}

.highlighted-rate {
    font-size: 20px;
    color: #2c7be5;
    font-weight: bold;
    background: #eaf2ff;
    padding: 8px;
    border-radius: 6px;
    display: inline-block;
    margin-top: 8px;
}

canvas {
    margin-top: 20px;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    font-size: 14px;
}

th, td {
    border: 1px solid #ccc;
    padding: 6px;
    text-align: right;
}

th {
    background-color: #f0f0f0;
}

th:first-child, td:first-child {
    text-align: center;
}

.legal {
    margin-top: 20px;
    font-size: 12px;
    color: #555;
    border-top: 1px solid #ccc;
    padding-top: 10px;
}

@media (max-width: 900px) {
    .grid {
        grid-template-columns: 1fr;
    }
}
</style>
</head>

<body>

<div class="container">
<h1>🏠 Baufinanzierungsrechner</h1>

<div class="grid">

<!-- Eingaben -->
<div class="card">
<h2>1️⃣ Eingaben</h2>

<h3>📌 Immobilie</h3>
<label>Kaufpreis (€)</label>
<input type="number" id="price" value="400000">

<label>Eigenkapital (€)</label>
<input type="number" id="equity" value="80000">

<h3>📌 Kaufnebenkosten (Sachsen)</h3>
<label>Makler (%)</label>
<input type="number" id="broker" value="3.57" step="0.01">

<label>Notar & Grundbuch (%)</label>
<input type="number" id="notary" value="2.00" step="0.01">

<label>Grunderwerbsteuer (%)</label>
<input type="number" id="tax" value="5.50" step="0.01">

<h3>📌 Finanzierung</h3>
<label>Zinssatz p.a. (%)</label>
<input type="number" id="interest" value="3.50" step="0.01">

<label>Anfängliche Tilgung (%)</label>
<input type="number" id="repayment" value="2.00" step="0.01">

<label>Sondertilgung p.a. (€)</label>
<input type="number" id="extra" value="0">

<label>Zinsbindungsdauer (Jahre)</label>
<input type="number" id="fixedRateYears" value="10">

<button onclick="calculate()">Berechnen</button>
</div>

<!-- Ergebnisse -->
<div class="card">
<h2>2️⃣ Ergebnis</h2>
<div id="summary"></div>
<canvas id="chart"></canvas>
<div id="schedule"></div>
<div class="legal">
<strong>Hinweis:</strong> Die Berechnung dient nur zur Orientierung. Sie ersetzt keine individuelle Beratung durch Banken oder Finanzdienstleister. Keine Haftung für Vollständigkeit, Richtigkeit oder Aktualität.
</div>
</div>

</div>
</div>

<script>
let chart;

function euro(v) {
    return new Intl.NumberFormat("de-DE", {style: "currency", currency: "EUR"}).format(v);
}

function calculate() {
    const price = +priceInput.value;
    const equity = +equityInput.value;
    const broker = +brokerInput.value / 100;
    const notary = +notaryInput.value / 100;
    const tax = +taxInput.value / 100;
    const interest = +interestInput.value / 100;
    const repayment = +repaymentInput.value / 100;
    const extra = +extraInput.value;
    const fixedRateYears = +fixedRateYearsInput.value;

    const brokerCost = price * broker;
    const notaryCost = price * notary;
    const taxCost = price * tax;

    const totalCost = price + brokerCost + notaryCost + taxCost;
    const loan = totalCost - equity;

    const monthlyInterest = interest / 12;
    const months = fixedRateYears * 12;

    // Monatsrate unverändert
    const monthlyRate = loan * (interest + repayment) / 12;

    let rest = loan;
    let labels = [], interestData = [], repaymentData = [];
    let scheduleHTML = `<table>
        <tr><th>Jahr</th><th>Zinsen</th><th>Tilgung</th><th>Sondertilgung</th><th>Restschuld</th></tr>`;
    let restAfterFix = 0;

    for (let y = 1; y <= fixedRateYears; y++) {
        let yearInterest = 0;
        let yearRepay = 0;
        let yearExtra = 0;

        for (let m = 1; m <= 12 && rest > 0; m++) {
            const i = rest * monthlyInterest;
            let t = monthlyRate - i;
            rest -= t;
            yearInterest += i;
            yearRepay += t;
        }

        // Sondertilgung jährlich
        if (extra > 0) {
            rest -= extra;
            yearExtra = extra;
            yearRepay += extra;
        }
        if (rest < 0) rest = 0;

        scheduleHTML += `<tr>
            <td>${y} 🔒</td>
            <td>${euro(yearInterest)}</td>
            <td>${euro(yearRepay - yearExtra)}</td>
            <td style="background-color:#eaf2ff; font-weight:bold;">${yearExtra > 0 ? euro(yearExtra) : '-'}</td>
            <td>${euro(rest)}</td>
        </tr>`;

        labels.push("Jahr " + y);
        interestData.push(yearInterest);
        repaymentData.push(yearRepay);

        if (y === fixedRateYears) restAfterFix = rest;
    }

    scheduleHTML += "</table>";

    summary.innerHTML = `
        <div class="result-line">Gesamtkosten: ${euro(totalCost)}</div>
        <div class="result-line">Darlehen: ${euro(loan)}</div>
        <div class="result-line highlighted-rate">Monatliche Rate: ${euro(monthlyRate)}</div>
        <div class="result-line">Makler: ${euro(brokerCost)}</div>
        <div class="result-line">Notar: ${euro(notaryCost)}</div>
        <div class="result-line">Grunderwerbsteuer: ${euro(taxCost)}</div>
        <div class="result-line">Restschuld nach Zinsbindung (${fixedRateYears} Jahre): ${euro(restAfterFix)}</div>
    `;

    schedule.innerHTML = scheduleHTML;

    if(chart) chart.destroy();
    chart = new Chart(chartCanvas, {
        type:"line",
        data:{
            labels,
            datasets:[
                {label:"Zinsen", data:interestData, borderColor:"#e5533d", fill:false},
                {label:"Tilgung", data:repaymentData, borderColor:"#2c7be5", fill:false}
            ]
        },
        options:{
            responsive:true,
            scales:{y:{ticks:{callback:v=>euro(v)}}}
        }
    });
}

// Shortcut-IDs
const priceInput = document.getElementById("price");
const equityInput = document.getElementById("equity");
const brokerInput = document.getElementById("broker");
const notaryInput = document.getElementById("notary");
const taxInput = document.getElementById("tax");
const interestInput = document.getElementById("interest");
const repaymentInput = document.getElementById("repayment");
const extraInput = document.getElementById("extra");
const fixedRateYearsInput = document.getElementById("fixedRateYears");
const summary = document.getElementById("summary");
const schedule = document.getElementById("schedule");
const chartCanvas = document.getElementById("chart");
</script>

</body>
</html>

Zur Verwaltung der eingesetzten Cookies und ähnlichen Technologien (Tracking-Pixel, Web-Beacons etc.) und diesbezüglicher Einwilligungen setzen wir das Consent Tool „Real Cookie Banner“ ein. Details zur Funktionsweise von „Real Cookie Banner“ findest du unter https://devowl.io/de/rcb/datenverarbeitung/.

Rechtsgrundlagen für die Verarbeitung von personenbezogenen Daten in diesem Zusammenhang sind Art. 6 Abs. 1 lit. c DS-GVO und Art. 6 Abs. 1 lit. f DS-GVO. Unser berechtigtes Interesse ist die Verwaltung der eingesetzten Cookies und ähnlichen Technologien und der diesbezüglichen Einwilligungen.

Die Bereitstellung der personenbezogenen Daten ist weder vertraglich vorgeschrieben noch für den Abschluss eines Vertrages notwendig. Du bist nicht verpflichtet die personenbezogenen Daten bereitzustellen. Wenn du die personenbezogenen Daten nicht bereitstellst, können wir deine Einwilligungen nicht verwalten.

 

Consent Management Platform von Real Cookie Banner