-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
153 lines (145 loc) · 8.18 KB
/
index.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="https://www.rosalux.de/fileadmin/static/mietendeckel/bundle.css"
media="screen" />
</head>
<body>
<div id="customMietendeckelApplet" aria-hidden="true" aria-label="Leider steht die interaktive Visualisierung des Konzepts für einen bundesweiten Mietendeckel momentan nicht barrierefrei zur Verfügung.">
<div id="disclaimer">
<p>
Finde heraus, wie ein <span class="infolink" id="modal-paper"><span>bundesweiter Mietendeckel</span></span> die Mieter:innen in 42 deutschen Großstädten entlasten könnte.
Jeder Baustein des Konzepts kann einzeln ein- oder ausgeschaltet werden, um die Effekte auf die Mieten bundesweit
oder für jede Stadt zu beobachten. Bitte beachte, dass es sich bei allen Mietpreisen um Durchschnittsangaben handelt, die nicht unmittelbar Aussagen über konkrete Mietverhältnisse zulassen!
</p>
<p>
<select-pure id="citySelector">
<option-pure value="" disabled hidden>Wähle eine Stadt aus der Liste oder klicke sie auf der Karte an.</option-pure>
<option-pure value="Aachen">Aachen</option-pure>
<option-pure value="Berlin">Berlin</option-pure>
<option-pure value="Bielefeld">Bielefeld</option-pure>
<option-pure value="Bochum">Bochum</option-pure>
<option-pure value="Bonn">Bonn</option-pure>
<option-pure value="Braunschweig">Braunschweig</option-pure>
<option-pure value="Chemnitz">Chemnitz</option-pure>
<option-pure value="Dortmund">Dortmund</option-pure>
<option-pure value="Dresden">Dresden</option-pure>
<option-pure value="Duisburg">Duisburg</option-pure>
<option-pure value="Düsseldorf">Düsseldorf</option-pure>
<option-pure value="Erfurt">Erfurt</option-pure>
<option-pure value="Essen">Essen</option-pure>
<option-pure value="Frankfurt am Main">Frankfurt am Main</option-pure>
<option-pure value="Freiburg im Breisgau">Freiburg im Breisgau</option-pure>
<option-pure value="Gelsenkirchen">Gelsenkirchen</option-pure>
<option-pure value="Hamburg">Hamburg</option-pure>
<option-pure value="Hamm">Hamm</option-pure>
<option-pure value="Hannover">Hannover</option-pure>
<option-pure value="Heidelberg">Heidelberg</option-pure>
<option-pure value="Karlsruhe">Karlsruhe</option-pure>
<option-pure value="Kiel">Kiel</option-pure>
<option-pure value="Köln">Köln</option-pure>
<option-pure value="Krefeld">Krefeld</option-pure>
<option-pure value="Leipzig">Leipzig</option-pure>
<option-pure value="Leverkusen">Leverkusen</option-pure>
<option-pure value="Lübeck">Lübeck</option-pure>
<option-pure value="Ludwigshaden am Rhein">Ludwigshaden am Rhein</option-pure>
<option-pure value="Mainz">Mainz</option-pure>
<option-pure value="Mannheim">Mannheim</option-pure>
<option-pure value="Mönchengladbach">Mönchengladbach</option-pure>
<option-pure value="Mühlheim an der Ruhr">Mühlheim an der Ruhr</option-pure>
<option-pure value="München">München</option-pure>
<option-pure value="Münster">Münster</option-pure>
<option-pure value="Nürnberg">Nürnberg</option-pure>
<option-pure value="Oberhausen">Oberhausen</option-pure>
<option-pure value="Osnabrück">Osnabrück</option-pure>
<option-pure value="Potsdam">Potsdam</option-pure>
<option-pure value="Rostock">Rostock</option-pure>
<option-pure value="Stuttgart">Stuttgart</option-pure>
<option-pure value="Wiesbaden">Wiesbaden</option-pure>
<option-pure value="Wuppertal">Wuppertal</option-pure>
<option-pure value="reset">Karte zurücksetzen</option-pure>
</select-pure>
</p>
</div>
<div id='content'>
<div class="row">
<div class="column">
<div id="mapContainer">
</div>
</div>
<div class="column">
<div id="measureControls">
<div style="display: inline-grid;">
<button class="measureSelection" id="kappungsgrenzen" style="margin-top: 2%; margin-bottom: 5%;">
▸ Mieterhöhungen begrenzen
</button>
<div class="closedItem">
<label class="switch">
<input type="checkbox" id="kappungsgrenzenCheckbox">
<span class="slider round"></span>
</label>
<p style="float: right;width: 80%;">
In <span class="infolink" id="first-angespannt"><span>angespannten Wohnungsmärkten</span></span> dürfen die Mieten in laufenden Mietverhältnissen nur noch
in Höhe der Inflation steigen, jedoch nur bis zur <span class="infolink" id="modal-average-rent-top"><span>örtlichen Durchschnittsmiete</span></span>.
In keiner Stadt dürfen Mieterhöhungen über die örtliche Durchschnittsmiete hinausgehen.
</p>
</div>
</div>
<div style="display: inline-grid;">
<button class="measureSelection" id="mietobergrenzen" style="margin-bottom: 5%;">
▸ Mietobergrenzen
</button>
<div class="closedItem">
<label class="switch">
<input type="checkbox" id="mietobergrenzenCheckbox">
<span class="slider round"></span>
</label>
<p style="float: right;width: 80%;">
Bei Vertragsabschluss dürfen die Mieten in <span class="infolink" id="second-angespannt"><span>angespannten Wohnungsmärkten</span></span> nicht mehr als 10 % über der
<span class="infolink" id="modal-average-rent"><span>örtlichen Durchschnittsmiete</span></span> liegen - ohne die bei der <span class="infolink" id="mietpreisbremse"><span>„Mietpreisbremse“</span></span> geltenden Ausnahmen für modernisierte
oder vorher überteuerte Wohnungen.
</p>
</div>
</div>
<div style="display: inline-grid;">
<button class="measureSelection" id="mietabsenkungen" style="margin-bottom: 5%;">
▸ Mietsenkungen
</button>
<div class="closedItem">
<label class="switch">
<input type="checkbox" id="mietabsenkungenCheckbox">
<span class="slider round"></span>
</label>
<p style="float: right;width: 80%;">
Überhöhte Mieten können auf 20 % über der <span class="infolink" id="modal-average-rent-senkung"><span>örtlichen Durchschnittsmiete</span></span> gesenkt werden.
Mieter:innen können sich dafür an die örtlichen Behörden wenden.
</p>
</div>
</div>
<div style="display: inline-grid;">
<button class="measureSelection" id="wohnungenotgebiete" style="margin-bottom: 5%;">
▸ Wohnungsnotgebiete ausweisen
</button>
<div class="closedItem">
<label class="switch">
<input type="checkbox" id="wohnungsnotgebieteCheckbox">
<span class="slider round"></span>
</label>
<p style="float: right;width: 80%;">
In <span id="wohnungsnotgebiete" class="infolink"><span>Wohnungsnotgebieten</span></span> werden die oberen drei Maßnahmen verschärft.
<span id="notgebiet-regeln"></span>
</p>
</div>
</div>
</div>
<div id="consequences"></div>
<div id="subjektfoerderung"></div>
</div>
</div>
<script type="module" src="https://www.rosalux.de/fileadmin/static/mietendeckel/bundle.js"></script>
</div>
<p style="text-align: right;">Erstellt von <a href="https://www.rosalux.de/profil/es_detail/SAMVJFHM8O/linus-hagemann?cHash=c040944d13cc9f63b8bf2d7e2155b00d" target="_blank" rel="noopener noreferrer">Linus Hagemann</a></p>
</div>
</body>
</html>