html,
body,
#wrapper {
    height: 100%;
}

body {
    font-family: hdi-gerling_sansregular, Arial, Helvetica, Verdana, sans-serif;
    font-size: 1.1rem;
    line-height: 1.5;
    color: #333333;
    background: #f0f3f1;
}

.site {
    height: auto;
    min-height: 100%;
    padding-bottom: 6rem;
}

section {
    margin-top: 5rem;
}

h1, h2 {
    font-weight: 500;
    line-height: 1.2;
}

h1 {
    font-family: hdi-gerling_sansBdCn, Arial, Helvetica, Verdana, sans-serif;
    color: #333;
    font-size: 2.5rem;
    line-height: 2.5rem;
    margin-bottom: 3rem;
}

h2 {
    color: #666;
    font-family: hdi-gerling_sansBdCn, Arial, Helvetica, Verdana, sans-serif;
    font-size: 1.85rem;
    line-height: 1.85rem;
}

.auswahl h2:first-child {
    margin-top: 0;
}

.auswahl {
    margin-bottom: 3rem;
}

.auswahl .col-xs-12 {
    margin-bottom: 20px;
}

a {
    color: #006729;
    text-decoration: none;
}

a:hover {
    color: #00501a;
    text-decoration: underline;
}

section button {
    padding: 15px 0 15px 18px;
    display: block;
    width: 100%;
    position: relative;
    font-size: 1rem;
    line-height: 1.5;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
}

section button.active,
section button:hover {
    background-color: #005a24;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}

section button.submit {
    position: relative;
    margin: 2rem 0 6rem 0;
    padding-right: 35px;
    width: auto;
    font-size: 1rem;
    background-color: #006729;
    text-transform: uppercase;
    letter-spacing: .05rem;
    color: #fff;
    background-image: url("/apps/versicherungsrechner/fvv/media/images/icons/chevron-right.svg");
    background-repeat: no-repeat;
    background-position: right 5px top 14px;
    font-family: hdi-gerling_sansbold, Arial, Helvetica, Verdana, sans-serif;
}

section button.submit:hover {
    background-color: #005a24;
}

section button.submit:hover:after {
    background-color: #4ea637;
}

.buttonchooser {
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    margin: 0 0 -1.5rem -1.5rem
}

.buttonchooser button {
    margin: 0 0 1.5rem 1.5rem
}

.buttonchooser button.vermittler {
    width: 250px;
    height: 100px;
    padding: 0;
}

.buttonchooser button.wagnis {
    width: 180px;
    height: 180px;
    padding: 0;
}

.buttonchooser button.wagnis img {
    width: 80px;
    margin-bottom: 5px;
}

.buttonchooser button {
    font-size: 1.25rem;
}

.buttonchooser button {
    font-size: 1.25rem;
}

.form-control::placeholder {
    color: #6c757d;
    opacity: 1;
}

.form-control {
    color: #333;
    padding: .313rem .75rem;
}

.form-control {
    display: block;
    width: 100%;
    font-size: 1rem;
    line-height: 1.5;
    background-color: #fff;
}

select.form-control:not([size]):not([multiple]) {
    height: calc(1.876rem + 2px);
}

.form-control:focus {
    -webkit-box-shadow: none;
    box-shadow: none;
    outline: 0;
}

.error-msg {
    color: #dc3545;
    padding: 7px 0;
    font-size: 13px;
    display: none;
}

button {
    font-family: hdi-gerling_sansBlkCn, Arial, Helvetica, Verdana, sans-serif;
    text-align: center;
    position: relative;
    border: none;
    color: #fff;
    font-size: 1.2rem;
    background: #006729;
}

button i {
    font-size: 5rem;
    height: 100px;
    display: table;
    width: 180px;
    vertical-align: middle;
}

button i:before {
    display: table-cell;
    vertical-align: middle;
}

button i.icons8-camper:before {
    margin: -17px 0 0 0;
}

header {
    background: #fff;
    padding-top: 3rem;
    padding-bottom: 3rem;
}

header #logo a {
    display: block;
    width: 92px;
    height: 37px;
    background-image: url("/apps/versicherungsrechner/fvv/media/images/logo-hdi.png");
    background-repeat: no-repeat;
    background-size: contain;
}

header #logo span {
    display: none;
}

footer {
    padding-top: 2rem;
    padding-bottom: 2rem;
    clear: both;
    background: #006729;
    color: #fff;
    height: 100px;
    margin-top: -100px; /* Höhe des Footers */
}

footer a {
    color: #fff;
}

footer a:hover {
    color: #fff;
    text-decoration: none;
}

@media (min-width: 576px) {
    footer .text-left {
        text-align: right !important;
    }
}

/*
 * INDIVIDUELLE MANDANTEN
 */
body.fvv-bbbankendkunde {
    background: #fff;
    font-family: Arial, sans-serif;
}

body.fvv-bbbankendkunde header {
    border-bottom: 1px solid #d0d0d0;
}

body.fvv-bbbankendkunde h1 {
    color: #005aab;
    font-family: Arial, sans-serif;
    font-weight: 400;
}

body.fvv-bbbankendkunde h2 {
    color: #636363;
    font-family: Arial, sans-serif;
    font-weight: 400;
}

body.fvv-bbbankendkunde header #logo a {
    width: 153px;
    height: 50px;
    background-image: url("/apps/versicherungsrechner/fvv/media/images/logo-bbbankendkunde.png");
}

body.fvv-bbbankendkunde section button {
    background-color: #005aab;
    padding: 10px 0 10px 13px;
    font-family: Arial, sans-serif;
}

body.fvv-bbbankendkunde section button.active,
body.fvv-bbbankendkunde section button:hover {
    background-color: #8dc226;
}

body.fvv-bbbankendkunde section button.submit {
    text-transform: none;
    letter-spacing: normal;
    padding-right: 30px;
    background-color: #8dc226;
}

body.fvv-bbbankendkunde section button.submit:hover {
    text-decoration: underline;
}

body.fvv-bbbankendkunde section button.submit:hover:after {
    text-decoration: none;
}

body.fvv-bbbankendkunde section button.submit.icons8-next-page:after {
    background-color: #8dc226;
    padding: 8px 5px 0 0;
    font-size: 1.25rem
}

body.fvv-bbbankendkunde section button.submit:hover {
    text-decoration: underline;
}

body.fvv-bbbankendkunde section button {
    background-color: #003da4;
}

.fvv-bbbankendkunde footer {
    background: #003da4;
}

.fvv-bbbankendkunde footer a:hover {
    text-decoration: underline;
}

/* vdi_direkt */
body.fvv-vdi_direkt header #logo a {
    width: 180px;
    background-image: url("/apps/versicherungsrechner/fvv/media/images/logo-vdi_direkt.png");
}

.fvv-vdi_direkt footer {
    background: #003da4;
}

body.fvv-vdi_direkt section button {
    background-color: #003da4;
}

body.fvv-vdi_direkt section button.submit {
    background-color: #fe5a00;
}

body.fvv-vdi_direkt section button.active,
body.fvv-vdi_direkt section button:hover {
    background-color: #fe5a00;
}

@font-face {
    font-family: hdi-gerling_sansbold;
    src: url(../fonts/hdi-gerlingsans-bold-webfont.woff2) format("woff2"), url(../fonts/hdi-gerlingsans-bold-webfont.woff) format("woff");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: hdi-gerling_sansregular;
    src: url(../fonts/hdi-gerlingsans-regular-webfont.woff2) format("woff2"), url(../fonts/hdi-gerlingsans-regular-webfont.woff) format("woff");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: hdi-gerling_sansBlkCn;
    src: url(../fonts/hdi-gerlingsanscond-black-webfont.woff2) format("woff2"), url(../fonts/hdi-gerlingsanscond-black-webfont.woff) format("woff");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: hdi-gerling_sansBdCn;
    src: url(../fonts/hdi-gerlingsanscond-bold-webfont.woff2) format("woff2"), url(../fonts/hdi-gerlingsanscond-bold-webfont.woff) format("woff");
    font-weight: 400;
    font-style: normal
}

#logo img {
    max-width: 153px; // for bbbank
}