From c7d27c73c4410ee3d765d8b2cf22fc14f8ec1dcc Mon Sep 17 00:00:00 2001
From: Philipp Lang <philipp@aweos.de>
Date: Fri, 20 Aug 2021 13:23:36 +0200
Subject: [PATCH] Mod frontend

---
 views/client.twig.htm   |   4 +-
 views/daten.twig.htm    | 135 ++++++++++++++++++----------------------
 views/mail.twig.htm     |  12 ++++
 views/stepper.twig.htm  |  84 ++++++++++++++++---------
 views/vorhaben.twig.htm |  95 +++++++++++++++++-----------
 5 files changed, 185 insertions(+), 145 deletions(-)

diff --git a/views/client.twig.htm b/views/client.twig.htm
index 21eb4be..7eb90eb 100644
--- a/views/client.twig.htm
+++ b/views/client.twig.htm
@@ -1,9 +1,9 @@
 Vielen Dank für Ihre Anfrage.
+Unsere Experten werden sich in den nächsten 48 Stunden bei Ihnen melden!
 
 Anbei Ihre Daten:
 
 Name: {{firstname}} {{lastname}}
-Adresse: {{zip}} {{location}}
 Tel: {{phone}}
 Mail: {{email}}
 
@@ -20,4 +20,4 @@ Anfrage für: {{kind}}
 * Bezahlt: {{bau.bezahlt}} €
 * Baukosten: {{bau.baukosten}} €
 * Eigenkapital: {{bau.eigenkapital}} €
-{% endif %}
+{% endif %}
\ No newline at end of file
diff --git a/views/daten.twig.htm b/views/daten.twig.htm
index 7254190..75f0c25 100644
--- a/views/daten.twig.htm
+++ b/views/daten.twig.htm
@@ -1,81 +1,66 @@
 <div>
-    <h2 class="gradient">Geben Sie Ihre persönlichen Daten ein</h2>
-
-    <div class="form-container">
-        <div class="field-grid">
-
-            <label for="greeting">
-                <span>Anrede</span>
-                <select x-model="value.greeting" id="greeting">
-                    <template x-for="greeting in greetings">
-                        <option :value="greeting.value" x-text="greeting.label"></option>
-                    </template>
-                </select>
-            </label>
-
-            <label for="title">
-                <span>Titel</span>
-                <select x-model="value.title" id="title">
-                    <template x-for="title in titles">
-                        <option :value="title.value" x-text="title.label"></option>
-                    </template>
-                </select>
-            </label>
-
-            <label for="firstname">
-                <span>Vorname</span>
-                <input type="text" x-model="value.firstname" id="firstname">
-            </label>
-
-            <label for="lastname">
-                <span>Nachname</span>
-                <input type="text" x-model="value.lastname" id="lastname">
-            </label>
-
-            <label for="zip">
-                <span>PLZ</span>
-                <input type="text" x-model="value.zip" id="zip">
-            </label>
-
-            <label for="location">
-                <span>Ort</span>
-                <input type="text" x-model="value.location" id="location">
-            </label>
-
-            <label for="phone">
-                <span>Telefon</span>
-                <input type="tel" x-model="value.phone" id="phone">
-            </label>
-
-            <label for="email">
-                <span>E-Mail-Adresse</span>
-                <input type="email" x-model="value.email" id="email">
-            </label>
-
-            <label for="job">
-                <span>Beruf des Hauptverdieners</span>
-                <select x-model="value.job" id="job">
-                    <template x-for="job in jobs">
-                        <option :value="job.value" x-text="job.label"></option>
-                    </template>
-                </select>
-            </label>
+  <div class="geschafft">
+    <div class="check-geschafft">
+      <h3>Fast geschafft!</h3>
+      <p>Wir ermitteln jetzt das passende Finanzierungsangebot für Sie und prüfen Ihre Finanzierung bei der Bank innerhalb 48 Stunden.</p>
+    </div>
+  </div>
+  <h2 class="gradient">Für die Angebotserstellung benötigen wir noch Kontaktdaten von Ihnen</h2>
 
-            <label for="haushalt">
-                <span>Haushaltsnetto monatlich</span>
-                <input type="text" x-model="value.haushalt" id="haushalt">
-            </label>
+  <div class="form-container last-step">
+    <div class="field-grid stepper-contact">
+      <div class="one-half">
+        <label for="firstname" :class="{'is-invalid': error('firstname')}">
+          <span>Vorname <span class="required-star">*</span></span>
+          <input type="text" x-model="value.firstname" id="firstname" placeholder="Max">
+          <var class="field-error" x-show="error('firstname')" x-text="error('firstname')"></var>
+        </label>
 
-            <label for="einnahme">
-                <span>Netto-Mieteinnahme monatlich</span>
-                <input type="text" x-model="value.einnahme" id="einnahme">
-            </label>
+        <label for="lastname" :class="{'is-invalid': error('lastname')}">
+          <span>Nachname <span class="required-star">*</span></span>
+          <input type="text" x-model="value.lastname" id="lastname" placeholder="Mustermann">
+          <var class="field-error" x-show="error('lastname')" x-text="error('lastname')"></var>
+        </label>
+      </div>
+      <div class="one-half">
 
-            <div class="button-row">
-                <button @click="slideTo($event, step-1)" type="button">Zurück</button>
-                <button type="submit">Absenden</button>
-            </div>
+        <label for="phone" :class="{'is-invalid': error('phone')}">
+          <span>Telefon <span class="required-star">*</span></span>
+          <input type="tel" x-model="value.phone" id="phone" placeholder="0212 123456">
+          <var class="field-error" x-show="error('phone')" x-text="error('phone')"></var>
+        </label>
 
-        </div>
+        <label for="email" :class="{'is-invalid': error('email')}">
+          <span>E-Mail-Adresse <span class="required-star">*</span></span>
+          <input type="email" x-model="value.email" id="email" placeholder="max@mustermann.de">
+          <var class="field-error" x-show="error('email')" x-text="error('email')"></var>
+        </label>
+      </div>
+      <h4>Optionale Bedürfnisse (Förderung & Modernisierungsarbeiten)</h4>
+      <div class="open-query">
+        <label for="modernisierung" class="fancy-checkbox">
+          <input type="checkbox" x-model="value.modernisierung" id="modernisierung">
+          <span>Ich benötige Hilfe bei der Planung der Modernisierungsarbeiten sowie der dazugehörigen Kostenaufstellung. RCK stellt den Hauseigenen Architekten für ein Informationsgespräch kostenfrei zur Verfügung.</span>
+        </label>
+        <label for="energetisch" class="fancy-checkbox">
+          <input type="checkbox" x-model="value.energetisch" id="energetisch">
+          <span>Ich interessiere mich für die energetische Förderung durch Photovoltaik, Solar, Erdwärme etc.. RCK verfügt über hervorragende Verbindungen zu Fördermittelberatern und Produktanbietern (made in Germany).</span>
+        </label>
+      </div>
+      <label for="datenschutz" class="fancy-checkbox" :class="{'is-invalid': error('datenschutz')}">
+        <input type="checkbox" x-model="value.datenschutz" id="datenschutz">
+        <span>Ich habe die <a href="/datenschutzerklaerung/" target="_blank">Datenschutzerklärung</a> zur Kenntnis genommen.</span>
+        <var class="field-error" x-show="error('datenschutz')" x-text="error('datenschutz')"></var>
+      </label>
+      <div class="button-row letzter-step">
+        <button type="submit" class="weiter-step">Finanzierungsangebot erhalten</button>
+      </div>
+      <div class="usp-form">
+        <ul>
+          <li>SSL Verschlüsselt</li>
+          <li>Schnelle Rückmeldung</li>
+        </ul>
+      </div>
     </div>
-</div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/views/mail.twig.htm b/views/mail.twig.htm
index b6c23ee..32ac98b 100644
--- a/views/mail.twig.htm
+++ b/views/mail.twig.htm
@@ -5,6 +5,18 @@ Adresse: {{zip}} {{location}}
 Tel: {{phone}}
 Mail: {{email}}
 
+{% if energetisch %}
+Der Kunde interessiert sich für eine energetische Förderung.
+{% endif %}
+
+{% if modernisierung %}
+Der Kunde wünscht eine Modernisierung.
+{% endif %}
+
+{% if datenschutz %}
+Der Kunde hat die Datenschutzerklärung akzeptiert.
+{% endif %}
+
 Anfrage für: {{kind}}
 
 {% if kind == 'kauf' %}
diff --git a/views/stepper.twig.htm b/views/stepper.twig.htm
index 2ddeb6f..8bd46b7 100644
--- a/views/stepper.twig.htm
+++ b/views/stepper.twig.htm
@@ -1,18 +1,29 @@
-<div class="stepper" x-data="{ ...stepper, sprite: '{{sprite|raw}}' }">
+<div class="stepper"
+     x-data="{ ...stepper, step: {{data.step}}, value: { ...stepper.value, kind: '{{data.kind}}', {% if data.kind %} {{data.kind}}: { ...stepper.value.{{data.kind}}, eigenkapital: {{data.eigenk}}, kaufpreis: {{data.kaufpreis}} }  {% endif %} }, sprite: '{{sprite|raw}}' }"
+     {% if data.step == 1 %} x-init="slideTo(null, {{data.step}})" {% endif %}>
 
-    <div class="step"><div :style="'width: '+parseInt(step / 3 * 100)+'%;'"></div></div>
+    <div class="step">
+        <div :style="'width: '+parseInt(step / 3 * 100)+'%;'"></div>
+    </div>
 
     <form @submit.prevent="submit" novalidate>
 
         <div x-ref="slider" class="slider" x-on:resize.debounce.window="$refs.slider.scrollLeft = $refs.slider.scrollWidth / slides.length * active">
             <div>
-                <h2>Was möchten Sie finanzieren</h2>
+                <h2 class="desktop">Das beste <span>Finanzierungsangebot</span> finden!</h2>
+                <h2 class="mobil">Kostenloses Finanzierungsangebot einholen</span></h2>
+                <p class="finanz-angebot">Als unabhängiger Finanzberater ermitteln wir bei hunderten Anbietern das passende Angebot für Sie und prüfen Ihre Finanzierung kostenlos bei der Bank innerhalb 48 Stunden!
+                </p>
+                <h4 class="sub-was">Schritt 1 von 3:</h4>
+                <h3 class="was-finanzieren">Was möchten Sie finanzieren?</h3>
                 <div class="radio-grid">
                     <template x-for="ckind in kinds">
                         <label>
                             <input @change="slideTo($event, step+1)" type="radio" name="kind" :value="ckind.value" x-model="value.kind">
                             <span>
-                                <span x-html="svg(ckind.icon)"></span>
+                                <span>
+                                    <img :src="'/wp-content/plugins/rck-stepper/assets/svg/'+ckind.icon+'.svg'" :class="'icon-'+ckind.icon">
+                                </span>
                                 <span x-text="ckind.label"></span>
                             </span>
                         </label>
@@ -21,50 +32,59 @@
             </div>
 
             {% include 'vorhaben.twig.htm' with {
-                'kind': "bau",
-                bezahlt: true,
-                second: {label: 'Baukosten', value: 'baukosten'},
-                main: {label: 'Grundstückspreis', value: 'grundstueckspreis'}
+            'kind': "bau",
+            bezahlt: true,
+            second: {label: 'Baukosten', value: 'baukosten'},
+            main: {label: 'Grundstückspreis', value: 'grundstueckspreis'}
             } %}
 
             {% include 'vorhaben.twig.htm' with {
-                'kind': "kauf",
-                bezahlt: false,
-                second: {label: 'Modernisierung', value: 'modernisierung'},
-                main: {label: 'Kaufpreis', value: 'kaufpreis'}
+            'kind': "kauf",
+            bezahlt: false,
+            second: {label: 'Modernisierung', value: 'modernisierung'},
+            main: {label: 'Kaufpreis', value: 'kaufpreis'}
             } %}
 
             <div x-show="value.kind == 'anschluss'">
-                <h2 class="gradient">Das Vorhaben in Zahlen</h2>
+                <h4 class="sub-was-second">Schritt 2 von 3:</h4>
+                <h2 class="gradient" style="padding-top:0;">Das Vorhaben in Zahlen</h2>
 
                 <div class="form-container">
                     <div class="form-grid">
-                        <label>Objektwert</label>
-                        <input type="tel" {{cprop('value.anschluss.objektwert', 'currency') | raw}}>
-                        <span class="unit">€</span>
+                        <label>Objektwert <span class="popup-info"><img src="https://rck-finanzmakler.de/wp-content/uploads/2021/03/info.svg">
+                                <div class="open-popup">aktueller Verkehrswert, evtl. Gutachten (bei RCK erhältlich).</div>
+                            </span></label>
+                            <input type="tel" {{cprop('value.anschluss.objektwert', 'currency') | raw}}>
+                            <span class="unit">€</span>
                     </div>
                     <div class="separator"></div>
                     <div class="form-grid">
-                        <label>Umschuldung</label>
-                        <input type="tel" {{cprop('value.anschluss.umschuldung', 'currency') | raw}}>
-                        <span class="unit">€</span>
-                        <span class="comment">Bitte geben Sie hier die Summe der gleichzeitig umzuschuldenden Darlehen an.</span>
+                        <label>Umschuldung <span class="popup-info"><img src="https://rck-finanzmakler.de/wp-content/uploads/2021/03/info.svg">
+                                <div class="open-popup">aktuell noch neu zu finanzierende Restschuld.</div>
+                            </span></label>
+                            <input type="tel" {{cprop('value.anschluss.umschuldung', 'currency') | raw}}>
+                            <span class="unit">€</span>
+                            <span class="comment">Bitte geben Sie hier die Summe der gleichzeitig umzuschuldenden Darlehen an.</span>
                     </div>
                     <div class="separator"></div>
                     <div class="form-grid">
-                        <label>Zusätzl. Kapital</label>
-                        <input type="tel" {{cprop('value.anschluss.zuskap', 'currency') | raw}}>
-                        <span  class="unit">€</span>
+                        <label>Kapitalbeschaffung <span class="popup-info"><img src="https://rck-finanzmakler.de/wp-content/uploads/2021/03/info.svg">
+                                <div class="open-popup">z.B. für Modernisierung, Reparaturen, Sauna, Klimaanlage.</div>
+                            </span></label>
+                            <input type="tel" {{cprop('value.anschluss.zuskap', 'currency') | raw}}>
+                            <span class="unit">€</span>
                     </div>
                     <div class="separator primary"></div>
-                    <div>
-                        <div>Darlehensbetrag</div>
-                        <div x-text="units.currency.to(Math.round(parseInt(value.anschluss.umschuldung) / 1000 + parseInt(value.anschluss.zuskap) / 1000) * 1000)"></div>
+                    <div class="form-grid">
+                        <div class="darlehen-name"><span class="yellow-darlehen">=</span>Darlehensbetrag <span class="popup-info"><img src="https://rck-finanzmakler.de/wp-content/uploads/2021/03/info.svg">
+                                <div class="open-popup">der Betrag, der durch die Bank finanziert wird.</div>
+                            </span></div>
+                            <div x-text="units.currency.to(Math.round(parseInt(value.anschluss.umschuldung) / 1000 + parseInt(value.anschluss.zuskap) / 1000) * 1000)" class="text-right darlehen-zahl"></div>
                     </div>
                     <div class="separator gray"></div>
                     <div class="button-row">
-                        <button @click="slideTo($event, step-1)" type="button">Zurück</button>
-                        <button @click="slideTo($event, step+1)" type="button">Werte übernehmen und weiter zum letzten Schritt</button>
+                        <button @click="slideTo($event, step-1)" type="button" class="zurueck-step">Zurück</button>
+                        <button @click="slideTo($event, step+1)" type="button" class="weiter-step">Weiter zum letzten Schritt</button>
                     </div>
                 </div>
             </div>
@@ -72,8 +92,12 @@
             {% include 'daten.twig.htm' %}
 
             <div>
-                <div class="form-container">
-                    Vielen Dank für Ihre Anfrage.
+                <div class="form-container fertig-container">
+                    <div class="fertig-step">
+                        Vielen Dank für Ihre Anfrage!<br>
+                        Unsere Experten werden sich in den nächsten 48 Stunden bei Ihnen melden.<br>
+                        In der Zwischenzeit können Sie sich gerne weitere Informationen zum Thema <a href="/baufinanzierung/">Baufinanzierung</a> einholen oder unser <a href="/team/">Team</a> kennenlernen.
+                    </div>
                 </div>
             </div>
 
diff --git a/views/vorhaben.twig.htm b/views/vorhaben.twig.htm
index cf51868..6c09bb4 100644
--- a/views/vorhaben.twig.htm
+++ b/views/vorhaben.twig.htm
@@ -1,74 +1,93 @@
 <div x-show="value.kind == '{{kind}}'">
-    <h2 class="gradient">Ihr Bauvorhaben</h2>
+    {% if kind == 'bau' %} <h4 class="sub-was-second">Schritt 2 von 3:</h4>
+    <h2 class="gradient" style="padding-top:0;">Das Vorhaben in Zahlen</h2>{% endif %}
+    {% if kind == 'kauf' %} <h4 class="sub-was-second">Schritt 2 von 3:</h4>
+    <h2 class="gradient" style="padding-top:0;">Das Vorhaben in Zahlen</h2>{% endif %}
+
 
     <div class="form-container">
         <div class="form-grid">
-            <label>{{main.label}}</label>
-            <input type="tel" {{cprop('value.' ~ kind ~ '.' ~ main.value, 'currency') | raw}}>
-            <span class="unit">€</span>
+            <label>{{main.label}} <span class="popup-info"><img src="https://rck-finanzmakler.de/wp-content/uploads/2021/03/info.svg">
+                    {% if kind == 'bau' %} <div class="open-popup">Notariell zu vereinbarender Kaufpreis.</div> {% endif %}
+                    {% if kind == 'kauf' %} <div class="open-popup">Notariell zu vereinbarender Kaufpreis, möglichst ohne Zubehör wie Küche, Gartenmöbel, Rasenmäher etc.</div> {% endif %}
+                </span></label>
+                <input type="tel" {{cprop('value.' ~ kind ~ '.' ~ main.value, 'currency') | raw}}>
+                <span class="unit">€</span>
         </div>
         {% if bezahlt %}
         <div class="form-grid">
-            <label>Bereits bezahlt?</label>
-            <select name="bezahlt" x-model="value.{{kind}}.bezahlt">
-                <option value="1">Ja</option>
-                <option value="0">Nein</option>
-            </select>
+            <label>Bereits bezahlt? <span class="popup-info"><img src="https://rck-finanzmakler.de/wp-content/uploads/2021/03/info.svg">
+                    <div class="open-popup">Kaufpreis fürs Grundstück, Planungskosten etc.).</div>
+                </span></label>
+                <select name="bezahlt" x-model="value.{{kind}}.bezahlt">
+                    <option value="1">Ja</option>
+                    <option value="0">Nein</option>
+                </select>
         </div>
         {% endif %}
         <div class="separator"></div>
         <div class="form-grid">
-            <label>{{second.label}}</label>
-            <input type="tel" {{cprop('value.' ~ kind ~ '.' ~ second.value, 'currency') | raw}}>
-            <span  class="unit">€</span>
+            <label class="plus">{{second.label}} <span class="popup-info"><img src="https://rck-finanzmakler.de/wp-content/uploads/2021/03/info.svg">
+                    {% if kind == 'bau' %} <div class="open-popup">Kosten zur Herstellung des Gebäudes inkl. Baunebenkosten wie Planung durch Architekt und Fachingenieure etc.</div> {% endif %}
+                    {% if kind == 'kauf' %} <div class="open-popup">Alle Kosten für Material + Lohn für z.B. Malerarbeiten.</div> {% endif %}
+                </span></label>
+                <input type="tel" {{cprop('value.' ~ kind ~ '.' ~ second.value, 'currency') | raw}}>
+                <span class="unit">€</span>
         </div>
         <div class="separator"></div>
         <div class="form-grid">
-            <label>Notar- & Gerichtskosten</label>
-            <span>
-                <span class="result-label" x-text="units.percent.to(parts.notar * 100)"></span>
-                <span class="result" x-text="units.currency.to(value.{{kind}}.{{main.value}} * parts.notar)"></span>
+            <label class="plus">Notar- & Gerichtskosten</label>
+            <span class="text-right">
+                <span class="result-label prozent-zahl" x-text="units.percent.to(parts.notar * 100)"></span>%
+                <span class="result wert-zahl" x-text="units.currency.to(value.{{kind}}.{{main.value}} * parts.notar)"></span>
             </span>
             <span class="unit">€</span>
         </div>
-        <div class="separator primary"></div>
+        <div class="separator"></div>
         <div class="form-grid">
-            <label>Grunderwerbsteuer</label>
-            <span>
-                <span class="result-label" x-text="units.percent.to(parts.grundsteuer * 100)"></span>
-                <span class="result" x-text="units.currency.to(value.{{kind}}.{{main.value}} * parts.grundsteuer)"></span>
+            <label class="plus">Grunderwerbsteuer</label>
+            <span class="text-right">
+                <span class="result-label prozent-zahl" x-text="units.percent.to(parts.grundsteuer * 100)"></span>%
+                <span class="result wert-zahl" x-text="units.currency.to(value.{{kind}}.{{main.value}} * parts.grundsteuer)"></span>
             </span>
             <span class="unit">€</span>
+            <span class="comment">Diese Beträge sind gesetzlich vorgegeben und werden deshalb automatisch ermittelt.</span>
         </div>
         <div class="separator"></div>
         <div class="form-grid">
-            <label>
+            <label class="plus">
                 Makler
                 <span x-html="`${units.percent.to(parts.makler * 100)} %`"></span>
-            </label>
-            <input type="tel" :value="units.currency.to(value.{{kind}}.{{main.value}} * parts.makler)"
-                @focus="$event.target.value = Math.round(value.{{kind}}.{{main.value}} * parts.makler)"
-                @blur="console.log($event); ($event.target || $event.originalTarget).value = units.currency.to(value.{{kind}}.{{main.value}} * parts.makler);"
-                   @change="console.log('change'); parts.makler = units.currency.from($event.target.value) / value.{{kind}}.{{main.value}};"
-            >
-            <span class="unit">€</span>
-            <span class="comment">Die vorgeschlagene Maklercourtage gentspricht der regional üblichen Höhe. Sie können diese jedoch bei Bedarf verändern oder auch komplett entfallen lassen.</span>
+                <span class="popup-info"><img src="https://rck-finanzmakler.de/wp-content/uploads/2021/03/info.svg">
+                    <div class="open-popup">s.o.</div>
+                </span></label>
+                <input type="tel" :value="units.currency.to(value.{{kind}}.{{main.value}} * parts.makler)" @focus="$event.target.value = Math.round(value.{{kind}}.{{main.value}} * parts.makler)"
+                       @blur="console.log($event); ($event.target || $event.originalTarget).value = units.currency.to(value.{{kind}}.{{main.value}} * parts.makler);"
+                       @change="console.log('change'); parts.makler = units.currency.from($event.target.value) / value.{{kind}}.{{main.value}};">
+                <span class="unit">€</span>
+                <span class="comment">Die vorgeschlagene Maklercourtage entspricht der regional üblichen Höhe. Sie können diese jedoch bei Bedarf verändern oder auch komplett entfallen lassen.</span>
         </div>
         <div class="separator"></div>
         <div class="form-grid">
-            <label>Eigenkapital</label>
-            <input type="tel" {{cprop('value.' ~ kind ~ '.eigenkapital', 'currency') | raw}}>
-            <span class="unit">€</span>
+            <label class="minus">Eigenkapital <span class="popup-info"><img src="https://rck-finanzmakler.de/wp-content/uploads/2021/03/info.svg">
+                    <div class="open-popup">Bitte nur das Kapital ansetzen, dass Sie wirklich auch einsetzen wollen.</div>
+                </span></label>
+                <input type="tel" {{cprop('value.' ~ kind ~ '.eigenkapital', 'currency') | raw}}>
+                <span class="unit">€</span>
         </div>
         <div class="separator primary"></div>
-        <div>
-            <div><span>=</span>Darlehensbetrag</div>
-            <div x-text="units.currency.to(  Math.round((value.{{kind}}.{{main.value}} * (1+parts.notar+parts.grundsteuer+parts.makler) + value.{{kind}}.{{second.value}} - value.{{kind}}.eigenkapital) / 1000)*1000  )"></div>
+        <div class="form-grid darlehen-grid">
+            <div class="darlehen-name"><span class="yellow-darlehen">=</span>Darlehensbetrag <span class="popup-info"><img src="https://rck-finanzmakler.de/wp-content/uploads/2021/03/info.svg">
+                    <div class="open-popup">Der Betrag, der durch die Bank finanziert wird.</div>
+                </span></div>
+                <div class="text-right darlehen-zahl"
+                     x-text="units.currency.to(  Math.round((value.{{kind}}.{{main.value}} * (1+parts.notar+parts.grundsteuer+parts.makler) + value.{{kind}}.{{second.value}} - value.{{kind}}.eigenkapital -  (value.{{kind}}.bezahlt == 1 ? value.{{kind}}.grundstueckspreis : 0)) / 1000)*1000  )">
+                </div><span class="unit" style="font-weight:bold;">€</span>
         </div>
         <div class="separator gray"></div>
         <div class="button-row">
-            <button @click="slideTo($event, step-1)" type="button">Zurück</button>
-            <button @click="slideTo($event, step+1)" type="button">Werte übernehmen und weiter zum letzten Schritt</button>
+            <button @click="slideTo($event, step-1)" type="button" class="zurueck-step">Zurück</button>
+            <button @click="slideTo($event, step+1)" type="button" class="weiter-step">Weiter zum letzten Schritt</button>
         </div>
     </div>
 </div>