-
Notifications
You must be signed in to change notification settings - Fork 0
/
rechner.html
274 lines (259 loc) · 18.8 KB
/
rechner.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
<!DOCTYPE HTML>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>IVD Leistbarkeitsrechner</title>
<link rel="apple-touch-icon" sizes="180x180" href="icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png">
<link rel="manifest" href="icons/site.webmanifest">
<link rel="mask-icon" href="icons/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="icons/favicon.ico">
<meta name="msapplication-TileColor" content="#2b5797">
<meta name="msapplication-config" content="icons/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous" onerror="this.onerror=null;this.href='static/bootstrap_5-3-3/css/bootstrap.min.css';"/>
<style>
.rightnumber {
text-align: right;
}
.input-group .input-group-text {
width: 40px;
}
.container-leistbarkeit {
display: none;
}
@media print {
body {
margin: 0;
padding: 0 !important;
min-width: 768px;
}
.container {
width: auto;
min-width: 720px;
}
.col-md-3, .col-md-9 {
float: left;
}
.col-md-9 {
width: 75%;
}
.col-md-3 {
width: 25%;
}
.offset-md-3 {
margin-left: 25%;
}
}
#result-container {
display: none;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="static/jquery-3.7.1.min.js"><\/script>')</script>
</head>
<body>
<div class="container-fluid my-2">
<div class="container bg-light">
<div class="row align-items-center px-3" id="headline_bar">
<div class="col ps-0 py-3 pe-3"><span class="fs-4" id="headline">Leistbarkeitsrechner</span></div>
<div class="col-sm-auto p-0 py-3"><img src="icons/Logo_neu_120px.png" alt="IVD Logo" width="40" height="40"></div>
</div>
</div>
</div>
<div class="container-fluid my-2">
<div class="container bg-light py-2">
<div class="row py-1 align-items-center">
<div class="col-md-3 col-lg-2 text-md-end">
<label class="col-form-label">Was möchten Sie berechnen?</label>
</div>
<div class="col-md-9 col-lg-10">
<div class="form-check">
<input class="form-check-input" type="radio" name="auswahl_berechnung_angabe" id="auswahl_berechnung_belastung" value="auswahl_berechnung_belastung" checked>
<label class="form-check-label" for="auswahl_berechnung_belastung">Wie hoch ist meine monatliche Belastung?</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="auswahl_berechnung_angabe" id="auswahl_berechnung_leistbarkeit" value="auswahl_berechnung_leistbarkeit">
<label class="form-check-label" for="auswahl_berechnung_leistbarkeit">Wie viel Immobilie kann ich mir leisten?</label>
</div>
</div>
</div>
<div class="row py-1 align-items-center container-belastung">
<div class="col-md-3 col-lg-2 text-md-end">
<label for="e_preis" class="col-form-label">Kaufpreis:</label>
</div>
<div class="col-md-9 col-lg-3">
<div class="input-group">
<input type="number" id="e_preis" name="preis" value="429000" class="form-control rightnumber" step="5000" min="0">
<span class="input-group-text fw-bold">€</span>
</div>
</div>
<div class="col-md-9 offset-md-3 col-lg-7 offset-lg-0">
<span id="e_preis_helpline" class="form-text">Kaufpreis in Euro<br>429.000 € entspricht einem durchschnittlichen Kaufpreis für ein bestehendes Einfamilienhaus. Bedenken Sie auch etwaige Sanierungskosten und kalkulieren diese entsprechend ein.</span>
</div>
</div>
<div class="row py-1 align-items-center">
<div class="col-md-3 col-lg-2 text-md-end">
<label for="nebenkosten" class="col-form-label">Kauf­neben­kosten:</label>
</div>
<div class="col-md-9 col-lg-3">
<div class="input-group">
<input type="number" id="nebenkosten" name="nebenkosten" value="12.07" class="form-control rightnumber" step="0.1" min="0">
<span class="input-group-text fw-bold">%</span>
</div>
</div>
<div class="col-md-9 offset-md-3 col-lg-7 offset-lg-0">
<span id="nebenkosten_helpline" class="form-text">Kaufnebenkosten in Prozent<br>12,07 % entsprechen zum Beispiel: 6,5 % Grunderwerbsteuer, 3,57 % Maklercourtage, 2 % Notar und Grundbuchamt</span>
</div>
</div>
<div class="row py-1 align-items-center">
<div class="col-md-3 col-lg-2 text-md-end">
<label for="zinssatz" class="col-form-label">Zinssatz:</label>
</div>
<div class="col-md-9 col-lg-3">
<div class="input-group">
<input type="number" id="zinssatz" name="zinssatz" value="3.5" class="form-control rightnumber" step="0.1" min="0">
<span class="input-group-text fw-bold">%</span>
</div>
</div>
<div class="col-md-9 offset-md-3 col-lg-7 offset-lg-0">
<span id="zinssatz_helpline" class="form-text">Zinssatz in Prozent</span>
</div>
</div>
<div class="row py-1 align-items-center">
<div class="col-md-3 col-lg-2 text-md-end">
<label for="tilgungssatz" class="col-form-label">Tilgungssatz:</label>
</div>
<div class="col-md-9 col-lg-3">
<div class="input-group">
<input type="number" id="tilgungssatz" name="tilgungssatz" value="2.0" class="form-control rightnumber" step="0.1" min="0">
<span class="input-group-text fw-bold">%</span>
</div>
</div>
<div class="col-md-9 offset-md-3 col-lg-7 offset-lg-0">
<span id="tilgungssatz_helpline" class="form-text">Tilgungssatz in Prozent</span>
</div>
</div>
<div class="row py-1 align-items-center">
<div class="col-md-3 col-lg-2 text-md-end">
<label for="einkommen" class="col-form-label">Einkommen:</label>
</div>
<div class="col-md-9 col-lg-3">
<div class="input-group">
<input type="number" id="einkommen" name="einkommen" value="45000" class="form-control rightnumber" step="500" min="0">
<span class="input-group-text fw-bold">€</span>
</div>
</div>
<div class="col-md-9 offset-md-3 col-lg-7 offset-lg-0">
<span id="einkommen_helpline" class="form-text">Nettoeinkommen in Euro<br>gegebenenfalls inkl. Kindergeld</span>
</div>
</div>
<div class="row py-1 align-items-center">
<div class="col-md-3 col-lg-2"></div>
<div class="col-md-9 col-lg-3">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="einkommen_zeit" id="einkommen_zeit_monatlich" value="einkommen_zeit_monatlich">
<label class="form-check-label" for="einkommen_zeit_monatlich">im Monat</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="einkommen_zeit" id="einkommen_zeit_jaehrlich" value="einkommen_zeit_jaehrlich" checked>
<label class="form-check-label" for="einkommen_zeit_jaehrlich">im Jahr</label>
</div>
</div>
<div class="col-md-9 offset-md-3 col-lg-7 offset-lg-0">
<span id="einkommen_zeit_helpline" class="form-text">Auf welchen Zeitraum bezieht sich obige Einkommensangabe?</span>
</div>
</div>
<div class="row py-1 align-items-top">
<div class="col-md-3 col-lg-2 text-md-end">
<label for="eigenkapital" class="col-form-label">Eigenkapital:</label>
</div>
<div class="col-md-9 col-lg-3">
<div class="input-group pb-1">
<input type="number" id="eigenkapital" name="eigenkapital" value="15" class="form-control rightnumber" step="1" min="0">
<span class="input-group-text fw-bold" id="eigenkapital_sign">%</span>
</div>
<div class="container-belastung">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="eigenkapital_angabe" id="e_eigenkapital_prozent" value="eigenkapital_prozent" checked>
<label class="form-check-label" for="e_eigenkapital_prozent">in Prozent vom Kaufpreis</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="eigenkapital_angabe" id="e_eigenkapital_euro" value="eigenkapital_euro">
<label class="form-check-label" for="e_eigenkapital_euro">in Euro</label>
</div>
</div>
</div>
<div class="col-md-9 offset-md-3 col-lg-7 offset-lg-0">
<span id="eigenkapital_helpline" class="form-text">Eigenkapital in Prozent<br>Wie viel Eigenkapital anteilig am Kaufpreis kann aufgebracht werden? Beachten Sie, dass die Kaufnebenkosten ebenfalls aus Eigenkapital beglichen werden.</span>
</div>
</div>
<div class="row py-1 align-items-center container-leistbarkeit">
<div class="col-md-3 col-lg-2 text-md-end">
<label for="l_einkommenbelastung" class="col-form-label">Einkommens­belastung:</label>
</div>
<div class="col-md-9 col-lg-3">
<div class="row">
<div class="col-9 pe-0">
<input type="range" class="form-range" value="30" min="0" max="100" step="1" id="l_einkommenbelastung" name="l_einkommenbelastung">
</div>
<div class="col-3 text-end">
<span class="fw-bold" id="l_einkommenbelastung_wert">30%</span>
</div>
</div>
</div>
<div class="col-md-9 offset-md-3 col-lg-7 offset-lg-0">
<span id="l_einkommenbelastung_helpline" class="form-text">anteilige Kreditbelastung am Einkommen in Prozent</span>
</div>
</div>
<div class="row py-1 align-items-center container-leistbarkeit">
<div class="col-md-3 col-lg-2 text-md-end">
<label for="l_anteil_eigenkapital" class="col-form-label">Mindest­anteil Eigenkapital am Kaufpreis:</label>
</div>
<div class="col-md-9 col-lg-3">
<div class="row">
<div class="col-9 pe-0">
<input type="range" class="form-range" value="20" min="0" max="100" step="1" id="l_anteil_eigenkapital" name="l_anteil_eigenkapital">
</div>
<div class="col-3 text-end">
<span class="fw-bold" id="l_anteil_eigenkapital_wert">20%</span>
</div>
</div>
</div>
<div class="col-md-9 offset-md-3 col-lg-7 offset-lg-0">
<span id="l_anteil_eigenkapital_helpline" class="form-text">Wie hoch soll der Anteil vom Eigenkapital am Kaufpreis sein?</span>
</div>
</div>
<div class="row py-2 mt-1 align-items-center">
<div class="col-md-9 offset-md-3 col-lg-10 offset-lg-2">
<p class="fw-light fs-6">Die Ergebnisse sollen keine ausführliche Finanzierungsberatung ersetzen. Sie sollen eine Orientierung bieten.</p>
</div>
<div class="col-md-9 offset-md-3 col-lg-10 offset-lg-2">
<button type="submit" id="calculate" class="btn btn-primary btn-sm">Berechnen</button>
</div>
</div>
</div>
</div>
<div class="container-fluid my-2" id="result-container">
<div class="container bg-light py-2">
<div class="row py-1 align-items-center">
<div class="col-md-9 offset-md-3 col-lg-10 offset-lg-2"><h3>Ergebnisse</h3></div>
</div>
<div id="result-fields"></div>
<div class="row py-1 align-items-center">
<div class="col-md-9 offset-md-3 col-lg-10 offset-lg-2">
<button type="button" id="print" class="btn btn-outline-secondary btn-sm" onclick="window.print()">Druckvorschau</button>
</div>
</div>
</div>
</div>
<div class="container-fluid my-2" id="footer"><footer class="container bg-light"><nav class="navbar navbar-expand-md navbar-light"><div class="container-fluid px-0"><div class="navbar-collapse" id="navbar-footer"><ul class="navbar-nav ps-2"><li class="nav-item">© <span id="jahr"></span> IVD Research</li></ul><ul class="navbar-nav ms-auto"><li class="nav-item" id="impressum"><a href="https://ivd.net/impressum/" class="nav-link px-2 text-muted" target="_blank">IVD Impressum</a></li><li class="nav-item"><a class="nav-link px-2 text-muted" data-bs-toggle="collapse" href="#datenschutz" aria-expanded="false" aria-controls="datenschutz">Datenschutzerklärung</a></li></ul></div></div></nav></footer></div>
<div class="container-fluid my-2 collapse" id="datenschutz"><div class="container bg-light p-3"><h5>Datenschutzerklärung</h5><h6>Datenerhebung</h6><p>Es werden keine Daten von der Betreiberin erhoben.</p><h6>Betreiberin und verantwortliche Stelle</h6><p>Siehe IVD Impressum</p><h6>Hosting</h6><p>Unser Hoster erhebt in sog. Logfiles folgende Daten, die Ihr Browser übermittelt:</p><p>IP-Adresse, die Adresse der vorher besuchten Website (Referer Anfrage-Header), Datum und Uhrzeit der Anfrage, Zeitzonendifferenz zur Greenwich Mean Time, Inhalt der Anforderung, HTTP-Statuscode, übertragene Datenmenge, Website, von der die Anforderung kommt und Informationen zu Browser und Betriebssystem.</p><p>Das ist erforderlich, um unsere Website anzuzeigen und die Stabilität und Sicherheit zu gewährleisten. Dies entspricht unserem berechtigten Interesse im Sinne des Art. 6 Abs. 1 S. 1 lit. f DSGVO.</p><p>Es erfolgt kein Tracking und wir haben auf diese Daten keinen direkten Zugriff, sondern erhalten lediglich eine anonymisierte, statistische Zusammenfassung. Diese beinhaltet die Adresse der vorher besuchten Seite, die Häufigkeit der jeweils aufgerufenen Seiten und die Anzahl eindeutiger Besucher. Diese Daten führen wir nicht mit anderen Daten zusammen.</p><p>Wir setzen für die Zurverfügungstellung unserer Website folgenden Hoster ein:</p><p>GitHub Inc.<br>88 Colin P Kelly Jr St<br>San Francisco, CA 94107<br>United States</p><p>Dieser ist Empfänger Ihrer personenbezogenen Daten. Dies entspricht unserem berechtigten Interesse im Sinne des Art. 6 Abs. 1 S. 1 lit. f DSGVO, selbst keinen Server in unseren Räumlichkeiten vorhalten zu müssen. Serverstandort ist USA.</p><p>Weitere Informationen zu Widerspruchs- und Beseitigungsmöglichkeiten gegenüber GitHub finden Sie unter: https://docs.github.com/en/free-pro-team@latest/github/site-policy/github-privacy-statement#github-pages</p><p>Sie haben das Recht der Verarbeitung zu widersprechen. Ob der Widerspruch erfolgreich ist, ist im Rahmen einer Interessenabwägung zu ermitteln.</p><p>Die Daten werden gelöscht, sobald der Zweck der Verarbeitung entfällt.</p><p>Die Verarbeitung der unter diesem Abschnitt angegebenen Daten ist weder gesetzlich noch vertraglich vorgeschrieben. Die Funktionsfähigkeit der Website ist ohne die Verarbeitung nicht gewährleistet.</p><p>GitHub hat Compliance-Maßnahmen für internationale Datenübermittlungen umgesetzt. Diese gelten für alle weltweiten Aktivitäten, bei denen GitHub personenbezogene Daten von natürlichen Personen in der EU verarbeitet. Diese Maßnahmen basieren auf den EU-Standardvertragsklauseln (SCCs). Weitere Informationen finden Sie unter: https://docs.github.com/en/free-pro-team@latest/github/site-policy/github-data-protection-addendum#attachment-1–the-standard-contractual-clauses-processors</p><h5>Rechtliche Hinweise</h5><p>Grundsätzlich ist ein Auftragsverarbeitungsvertrag mit dem Hoster abzuschließen. Für das Hosting rein statischer Websites besteht grundsätzlich eine Ausnahme. Für den Fall, dass die Webseite der Selbstdarstellung dient, z.B. von Vereinen oder Kleinunternehmen, keine personenbezogenen Daten an den Betreiber fließen und kein Tracking stattfindet, liegt keine Auftragsverarbeitung vor. Die Tatsache, dass auch beim Hosting von statischen Webseiten zwangsläufig IP-Adressen, d.h. personenbezogene Daten, verarbeitet werden müssen, führt nicht zur Annahme einer Auftragsverarbeitung. Das wäre nicht sachgerecht. Die (kurzfristige) IP-Adressenspeicherung ist vielmehr noch der TK-Zugangsvermittlung des Website-Hosters nach dem TKG zuzurechnen und dient in erster Linie Sicherheitszwecken des Hosters.</p></div></div>
<script src="rechner_2024-06-24.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
<script>window.bootstrap || document.write('<script src="static/bootstrap_5-3-3/js/bootstrap.bundle.min.js"><\/script>')</script>
<script src="api_params.js"></script>
</body>
</html>