<script src="../../../../javascripts/tools.js" async="async">
</script>
<div class="advantage-calculator" id="advantage-calculator" data-source="/data/advantage-calculator.json">
<div class="box">
<div class="box__content">
<h3 class="advantage-calculator__heading">Der hkk-Vorteil: Jetzt Preis und Leistung vergleichen!</h3>
<form class="form form--inline" v-on:submit.prevent="handleSubmit">
<div class="form__inner">
<div class="form-group form-group--small">
<label class="label advantage-calculator__label" for="current-health-insurance">Aktuelle Krankenkasse</label>
<div class="form-group__inner">
<select class="select select--borderless advantage-calculator__select" id="current-health-insurance" name="current-health-insurance" v-model="selected" v-on:change="handleInsuranceChange" v-bind:class="{ 'select--selected': isInsuranceSelected }">
<option class="select__hint" disabled="disabled" selected="selected" value="">Auswählen</option>
<option v-for="item in items" v-bind:value="item.name" v-bind:id="asId(item.name)" v-bind:insurance-value="item.value">{{ item.name }}</option>
</select>
</div>
</div>
<div class="form-group form-group--small">
<label class="label advantage-calculator__label" for="gross-income">Mtl. Bruttoeinkommen</label>
<div class="form-group__inner">
<input class="input input--text input--borderless advantage-calculator__input" id="gross-income" type="text" placeholder="Mtl. Bruttoeinkommen" required="required" name="gross-income" v-on:input="handleIncomeChange" v-bind:value="currentIncomeDisplay"
/>
</div>
</div>
<div class="form__submit form__submit--nextline form__submit--right">
<button class="button button--red" type="submit" v-bind:class="{ 'button--inactive': !isFilled }">Vorteil berechnen</button>
</div>
</div>
</form>
<div class="advantage-calculator__body">
<div class="advantage-calculator__message" v-bind:class="{ 'advantage-calculator__message--visible': isIncomeBelowFlexibleZoneMessageVisible }">Sie haben angegeben, dass Sie nicht mehr als 450,00 € Einkommen im Monat haben. Für Beschäftigte in einem sogenannten Minijob existiert eine besondere Beitragsberechnung. Für weitere Informationen besuchen Sie bitte unsere Seite für Arbeits-
und Sozialversicherungsrecht für Minijobber oder kontaktieren Sie unseren Kundenservice.</div>
<div class="advantage-calculator__message" v-bind:class="{ 'advantage-calculator__message--visible': isIncomeInFlexibleZoneMessageVisible }">Sie haben angegeben, dass Sie nicht mehr als 850,00 € Einkommen im Monat haben. Für Beschäftigte im Niedriglohnbereich existiert eine besondere Beitragsberechnung. Dadurch soll die Beitragsbelastung der Beschäftigten abgemildert werden.
Bitte nutzen Sie zur Berechnung der Beiträge den <a href="#">hkk-Gleitzonenrechner</a>.</div>
<div class="advantage-calculator__result" v-bind:class="{ 'advantage-calculator__result--visible': isResultVisible }">
<h3 class="advantage-calculator__title">Beitragsvorteil 2020</h3>
<ul class="advantage-calculator__list">
<li class="advantage-calculator__list-item"><span class="advantage-calculator__duration">pro Monat</span><span class="advantage-calculator__price">{{ totalMonthlyAsCurrency }}</span></li>
<li class="advantage-calculator__list-item"><span class="advantage-calculator__duration">pro Jahr</span><span class="advantage-calculator__price advantage-calculator__price--large">{{ totalYearlyAsCurrency }}</span></li>
</ul>
</div>
</div>
<div class="advantage-calculator__service">
<div class="advantage-calculator__service-info">
<p>Preis und Leistung im Vergleich: Die hkk ist 2020 nicht nur zum sechsten Mal die günstigste deutschlandweite Krankenkasse – sie bietet auch überdurchschnittliche Leistungen. Aktuelle Krankenkasse wählen und die Übersichten als PDF
herunterladen.</p>
</div>
<div class="advantage-calculator__service-links">
<ul class="icon-list">
<li class="icon-list__item">
<a class="icon-block" target="_blank" rel="noopener noreferrer" href="https://example.org">
<svg class="icon icon-block__icon icon--download" id="icon-7d02" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-download"></use>
</svg>Leistungsübersicht hkk
</a>
</li>
<li class="icon-list__item" v-if="isInsuranceSelected">
<a class="icon-block" href="#" v-bind:href="selectedInsurance.serviceOverviewUrl" target="_blank" rel="noopener noreferrer">
<svg class="icon icon-block__icon icon--download" id="icon-dfdb" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-download"></use>
</svg>Leistungsübersicht {{ selectedInsurance.name }}
</a>
</li>
</ul>
</div>
</div>
<footer class="advantage-calculator__footer">
<ul class="advantage-calculator__footer-list">
<li class="advantage-calculator__footer-list-item"><a class="button button--red button--outline" href="#">Infos anfordern</a></li>
<li class="advantage-calculator__footer-list-item"><a class="button button--red" href="#">Jetzt wechseln</a></li>
</ul>
</footer>
</div>
</div>
</div>
-
//- Service links
serviceLinks = [
{
text: 'Leistungsübersicht hkk',
icon: 'download',
link: 'https://example.org',
attr: {
target: '_blank',
rel: 'noopener noreferrer',
},
},
{
text: 'Leistungsübersicht {{ selectedInsurance.name }}',
icon: 'download',
itemAttr: {
'v-if': 'isInsuranceSelected',
},
attr: {
href: null,
'v-bind:href': 'selectedInsurance.serviceOverviewUrl',
target: '_blank',
rel: 'noopener noreferrer',
},
},
];
if script
script(src=`${relativeRoot}javascripts/tools.js`, async)
#advantage-calculator.advantage-calculator(data-source='/data/advantage-calculator.json')
.box
.box__content
h3.advantage-calculator__heading Der hkk-Vorteil: Jetzt Preis und Leistung vergleichen!
form.form.form--inline(v-on:submit.prevent='handleSubmit')
.form__inner
.form-group.form-group--small
label.label.advantage-calculator__label(for='current-health-insurance') Aktuelle Krankenkasse
.form-group__inner
if autocomplete
select#current-health-insurance.select.select--borderless.advantage-calculator__select.select-choices.js-select-choices(name='current-health-insurance', v-model='selected', v-on:change='handleInsuranceChange', v-bind:class='{ \'select--selected\': isInsuranceSelected }')
option.select__hint(disabled='disabled', selected='selected', value='') Aktuelle Krankenkasse
option(v-for='item in items', v-bind:value='item.name', v-bind:id='asId(item.name)', v-bind:insurance-value='item.value') {{ item.name }}
else
select#current-health-insurance.select.select--borderless.advantage-calculator__select(name='current-health-insurance', v-model='selected', v-on:change='handleInsuranceChange', v-bind:class='{ \'select--selected\': isInsuranceSelected }')
option.select__hint(disabled='disabled', selected='selected', value='') Auswählen
option(v-for='item in items', v-bind:value='item.name', v-bind:id='asId(item.name)', v-bind:insurance-value='item.value') {{ item.name }}
.form-group.form-group--small
label.label.advantage-calculator__label(for='gross-income') Mtl. Bruttoeinkommen
.form-group__inner
input#gross-income.input.input--text.input--borderless.advantage-calculator__input(type='text', placeholder='Mtl. Bruttoeinkommen', required='required', name='gross-income', v-on:input='handleIncomeChange', v-bind:value='currentIncomeDisplay')
.form__submit.form__submit--nextline.form__submit--right
button.button.button--red(type='submit', v-bind:class='{ \'button--inactive\': !isFilled }') Vorteil berechnen
.advantage-calculator__body
.advantage-calculator__message(v-bind:class='{ \'advantage-calculator__message--visible\': isIncomeBelowFlexibleZoneMessageVisible }')
| Sie haben angegeben, dass Sie nicht mehr als 450,00 € Einkommen im Monat haben. Für Beschäftigte in einem sogenannten Minijob existiert eine besondere Beitragsberechnung. Für weitere Informationen besuchen Sie bitte unsere Seite für Arbeits- und Sozialversicherungsrecht für Minijobber oder kontaktieren Sie unseren Kundenservice.
.advantage-calculator__message(v-bind:class='{ \'advantage-calculator__message--visible\': isIncomeInFlexibleZoneMessageVisible }')
| Sie haben angegeben, dass Sie nicht mehr als 850,00 € Einkommen im Monat haben. Für Beschäftigte im Niedriglohnbereich existiert eine besondere Beitragsberechnung. Dadurch soll die Beitragsbelastung der Beschäftigten abgemildert werden. Bitte nutzen Sie zur Berechnung der Beiträge den #[a(href='#') hkk-Gleitzonenrechner].
.advantage-calculator__result(v-bind:class='{ \'advantage-calculator__result--visible\': isResultVisible }')
h3.advantage-calculator__title Beitragsvorteil 2020
ul.advantage-calculator__list
li.advantage-calculator__list-item
span.advantage-calculator__duration pro Monat
span.advantage-calculator__price {{ totalMonthlyAsCurrency }}
li.advantage-calculator__list-item
span.advantage-calculator__duration pro Jahr
span.advantage-calculator__price.advantage-calculator__price--large {{ totalYearlyAsCurrency }}
.advantage-calculator__service
.advantage-calculator__service-info
p Preis und Leistung im Vergleich: Die hkk ist 2020 nicht nur zum sechsten Mal die günstigste deutschlandweite Krankenkasse – sie bietet auch überdurchschnittliche Leistungen. Aktuelle Krankenkasse wählen und die Übersichten als PDF herunterladen.
.advantage-calculator__service-links
!= include('@icon-list', { items: serviceLinks })
footer.advantage-calculator__footer
ul.advantage-calculator__footer-list
li.advantage-calculator__footer-list-item: a.button.button--red.button--outline(href='#') Infos anfordern
li.advantage-calculator__footer-list-item: a.button.button--red(href='#') Jetzt wechseln
{
"script": true
}
$advantage-calculator-list-item-padding: 1.5rem;
$advantage-calculator-footer-item-margin: 0.5rem;
.advantage-calculator {
margin-bottom: 7.5rem;
.box {
position: relative;
}
.box::after {
background-color: #fff;
bottom: 0;
content: '';
display: block;
height: 45px;
left: 0;
position: absolute;
width: 100%;
}
&__body {
border-top: 5px solid $color-steelgrey-dark;
margin-bottom: 2rem;
margin-top: 3rem;
padding-top: 1rem;
}
&__message {
background-color: $color-turquoise-light;
border: 1px solid $color-turquoise;
display: none;
font-size: 1.3rem;
margin-top: $advantage-calculator-list-item-padding;
padding: 1rem;
@include mq($from: m) {
font-size: 1.5rem;
}
}
&__message--visible {
display: block;
}
&__message > * {
margin: 0;
}
&__message > :not(:last-child) {
margin-bottom: 0.5em;
}
&__message a {
text-decoration: underline;
}
&__message a:hover {
text-decoration: none;
}
&__result {
display: none;
}
&__result--visible {
display: block;
@include mq($from: m) {
display: flex;
justify-content: space-between;
width: 100%;
}
}
&__heading {
color: $color-red;
}
&__title {
color: $color-red;
margin: 0;
padding-top: $advantage-calculator-list-item-padding;
@include mq($from: m) {
padding-right: $advantage-calculator-list-item-padding;
}
}
&__label,
&__select,
&__input {
color: $color-blue;
}
&__list {
list-style: none;
margin: 0;
padding: 0;
@include mq($from: m) {
width: 55%;
}
}
&__list-item {
border-bottom: 1px solid $color-steelgrey;
padding: $advantage-calculator-list-item-padding 0;
}
&__duration {
color: $color-blue;
}
&__price {
color: $color-blue;
float: right;
font-weight: bold;
}
&__price--large {
font-size: 2.5rem;
line-height: 0.8;
}
&__service {
margin-top: 2rem;
}
&__service-info {
color: $color-blue;
font-weight: bold;
margin-bottom: 1rem;
max-width: 65ch;
}
&__service-info > :last-child {
margin-bottom: 0;
}
.icon-block[href] {
color: $color-blue;
font-weight: normal;
text-decoration: underline;
}
.icon-block[href]:hover,
.icon-block[href]:focus {
color: $color-red;
}
&:not(.is-loaded) [v-if='isInsuranceSelected'] {
display: none;
}
&__footer {
padding-bottom: 1.5rem;
padding-top: 1.5rem;
@include mq($from: m) {
text-align: right;
}
}
&__footer-list {
list-style: none;
margin: -$advantage-calculator-footer-item-margin;
padding: 0;
position: relative;
z-index: 1;
}
&__footer-list-item {
display: inline-block;
margin: $advantage-calculator-footer-item-margin;
@include mq($until: m) {
width: 20rem;
}
}
&__footer-list-item .button {
@include mq($until: m) {
display: block;
}
}
}
.box__content {
.select-choices .select-choices__inner,
.select-choices .select-choices__inner:focus,
.select-choices .select-choices__inner:hover,
.select-choices__list--dropdown {
border-color: transparent;
}
}
Previews are currently not available for this file type.
There are no notes for this item.