#formular {
         display: block;
         width: calc(100% - 4px);
         max-width: 600px;
         height: auto;
         margin: 0px auto;

         overflow: hidden !important;

         border: 0px rgba(0,0,0,0.2) dotted;

         font-size: 1.1em;
         font-family: var(--second-font);
}

#formular b { color: var(--main-color); }

#formular .hilfe {
         cursor: pointer;

         display: block;
         width: calc(100% - 10px);

         margin: 0px 0px 5px 0px;
         padding: 5px 0px 5px 10px;

         font-family: var(--second-font);
         font-size: 1.2em;
         color: var(--font-color);
         text-shadow: rgba(0,0,0,0.0) 1px 1px 0px;
         text-align: center;
         font-weight: 600;

         -webkit-border-radius: 20px;
         -moz-border-radius: 20px;
         border-radius: 20px;
}

#formular .hilfe .icon {
         display: inline-block;
         cursor: pointer;
         width: 24px;
         height: 24px;
         margin: 0px 0px 0px 5px;
         background-image: url(../images/icon_hilfe_info.png);
         background-color: transparent;
         background-size: 24px 24px;
         background-position: center center;
         background-repeat: no-repeat;
}
#formular .hilfe .icon_tag {
         display: inline-block;
         cursor: pointer;
         width: 20px;
         height: 20px;
         margin: 0px 5px 0px 0px;
         background-image: url(../images/icons_tag.png);
         background-color: transparent;
         background-size: 20px 20px;
         background-position: center center;
         background-repeat: no-repeat;
}

#formular div[id^="hilfe_info_"] {
         display: none;
         width: calc(100% - 20px - 10px - 5px);

         text-align: left;
         font-size: 0.8em;
         color: var(--main-color);

         margin: 0px 0px 10px 5px;
         padding: 5px 10px 5px 10px;

         border: 1px var(--main-color) solid;
         border-left: 4px var(--main-color) solid;
         background: #FFFFFF;
}

#formular div[id^="form_step"] {
        text-align: center;
        margin: 0px;
        padding: 0px;
        border: 1px transparent solid;
}

#formular div[id^="form_step"] label, #formular div[id^="form_step"] .label {
         cursor: pointer;
         display: inline-block;
         float: left;
         width: calc((100% / 3) - 20px - 2px);
         /*max-width: 140px;*/
         height: auto;

         padding: 5px 0px 10px 0px;
         margin: 0px 10px 5px 10px;

         background: #FFFFFF;

         -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
         -moz-box-shadow:    0px 0px 10px 0px rgba(0, 0, 0, 0.1);
         box-shadow:         0px 0px 10px 0px rgba(0, 0, 0, 0.1);

         border: 1px solid rgba(0,0,0,0.2);
         -webkit-border-radius: 6px;
         -moz-border-radius: 6px;
         border-radius: 6px;

         font-family: var(--second-font);

         transition: all 0.1s ease-in-out;
}

#formular div[id^="form_step"] .label {
         width: calc(90% - 40px);
         max-width: calc(90% - 40px - 2px);
         height: auto;

         padding: 10px 20px 10px 20px;
         margin: 0px 5% 10px 5%;
         text-align: center;
}


#formular div[id^="form_step"] label.checked,
#formular div[id^="form_step"] label input[type="radio"]:checked {
         border: 1px solid var(--main-color);
         background: var(--main-color);
}

#formular div[id^="form_step"] label:hover {
         border: 1px solid var(--main-color);
         background: var(--main-color);
}

#formular div[id^="form_step"] label > input[type="radio"] {
          visibility: hidden;
          position: absolute;
}

#formular div[id^="form_step"] label span {
         display: block;

         font-size: 0.8em;
         font-weight: bold;
         height: 38px;
         line-height: 18px;
         padding: 0px;
         margin: 0px;
}

#formular div[id^="form_step"] label.checked span,
#formular div[id^="form_step"] label:hover span,
#formular div[id^="form_step"] label > input[type="radio"]:checked span {
         color: #FFFFFF;
}

#formular div[id^="form_step"] label div[class^="image_"]{
         display: block;
         cursor: pointer;
         width: 100%;
         height: 100px;
         margin: 0px 0px 10px 0px;
         background-color: transparent;
         background-size: 90px 90px;
         background-position: center center;
         background-repeat: no-repeat;
}
#formular div[id^="form_step"] label .image_0_0 { background-image: url(../images/icons_1_3.png); }
#formular div[id^="form_step"] label:hover .image_0_0, #formular div[id^="form_step"] label.checked .image_0_0 { background-image: url(../images/icons_1_3_active.png); }

#formular div[id^="form_step"] label .image_1_1 { background-image: url(../images/icons_1_1.png); }
#formular div[id^="form_step"] label:hover .image_1_1, #formular div[id^="form_step"] label.checked .image_1_1 { background-image: url(../images/icons_1_1_active.png); }
#formular div[id^="form_step"] label .image_1_2 { background-image: url(../images/icons_1_2.png); }
#formular div[id^="form_step"] label:hover .image_1_2, #formular div[id^="form_step"] label.checked .image_1_2 { background-image: url(../images/icons_1_2_active.png); }
#formular div[id^="form_step"] label .image_1_3 { background-image: url(../images/icons_1_3.png); }
#formular div[id^="form_step"] label:hover .image_1_3, #formular div[id^="form_step"] label.checked .image_1_3 { background-image: url(../images/icons_1_3_active.png); }

#formular div[id^="form_step"] label .image_2_1 { background-image: url(../images/icons_2_1.png); }
#formular div[id^="form_step"] label:hover .image_2_1, #formular div[id^="form_step"] label.checked .image_2_1 { background-image: url(../images/icons_2_1_active.png); }
#formular div[id^="form_step"] label .image_2_2 { background-image: url(../images/icons_2_2.png); }
#formular div[id^="form_step"] label:hover .image_2_2, #formular div[id^="form_step"] label.checked .image_2_2 { background-image: url(../images/icons_2_2_active.png); }
#formular div[id^="form_step"] label .image_2_3 { background-image: url(../images/icons_2_3.png); }
#formular div[id^="form_step"] label:hover .image_2_3, #formular div[id^="form_step"] label.checked .image_2_3 { background-image: url(../images/icons_2_3_active.png); }
#formular div[id^="form_step"] label .image_2_4 { background-image: url(../images/icons_2_4.png); }
#formular div[id^="form_step"] label:hover .image_2_4, #formular div[id^="form_step"] label.checked .image_2_4 { background-image: url(../images/icons_2_4_active.png); }
#formular div[id^="form_step"] label .image_2_5 { background-image: url(../images/icons_2_5.png); }
#formular div[id^="form_step"] label:hover .image_2_5, #formular div[id^="form_step"] label.checked .image_2_5 { background-image: url(../images/icons_2_5_active.png); }
#formular div[id^="form_step"] label .image_2_6 { background-image: url(../images/icons_2_6.png); }
#formular div[id^="form_step"] label:hover .image_2_6, #formular div[id^="form_step"] label.checked .image_2_6 { background-image: url(../images/icons_2_6_active.png); }
#formular div[id^="form_step"] label .image_2_7 { background-image: url(../images/icons_2_7.png); }
#formular div[id^="form_step"] label:hover .image_2_7, #formular div[id^="form_step"] label.checked .image_2_7 { background-image: url(../images/icons_2_7_active.png); }
#formular div[id^="form_step"] label .image_2_8 { background-image: url(../images/icons_2_8.png); }
#formular div[id^="form_step"] label:hover .image_2_8, #formular div[id^="form_step"] label.checked .image_2_8 { background-image: url(../images/icons_2_8_active.png); }

#formular div[id^="form_step"] label .image_3_1 { background-image: url(../images/icons_3_1.png); }
#formular div[id^="form_step"] label:hover .image_3_1, #formular div[id^="form_step"] label.checked .image_3_1 { background-image: url(../images/icons_3_1_active.png); }
#formular div[id^="form_step"] label .image_3_2 { background-image: url(../images/icons_3_2.png); }
#formular div[id^="form_step"] label:hover .image_3_2, #formular div[id^="form_step"] label.checked .image_3_2 { background-image: url(../images/icons_3_2_active.png); }
#formular div[id^="form_step"] label .image_3_3 { background-image: url(../images/icons_3_3.png); }
#formular div[id^="form_step"] label:hover .image_3_3, #formular div[id^="form_step"] label.checked .image_3_3 { background-image: url(../images/icons_3_3_active.png); }

#formular div[id^="form_step"] label .image_4_1 { background-image: url(../images/icons_4_1b.png); }
#formular div[id^="form_step"] label:hover .image_4_1, #formular div[id^="form_step"] label.checked .image_4_1 { background-image: url(../images/icons_4_1b_active.png); }
#formular div[id^="form_step"] label .image_4_2 { background-image: url(../images/icons_4_2b.png); }
#formular div[id^="form_step"] label:hover .image_4_2, #formular div[id^="form_step"] label.checked .image_4_2 { background-image: url(../images/icons_4_2b_active.png); }
#formular div[id^="form_step"] label .image_4_3 { background-image: url(../images/icons_4_3b.png); }
#formular div[id^="form_step"] label:hover .image_4_3, #formular div[id^="form_step"] label.checked .image_4_3 { background-image: url(../images/icons_4_3b_active.png); }

#formular div[id^="form_step"] div[class^="zusatzinfo_"]{
         position: relative;
         background-color: rgba(255 ,255 ,255 ,1);
         display: none;
         width: 95%;
         max-width: calc(3 * 140px + 10px);

         font-size: 0.8em;
         padding: 0px 20px;
         margin: 15px 0px 10px 0px;

         -webkit-border-radius: 4px;
         -moz-border-radius: 4px;
         border-radius: 4px;

         border: 1px solid rgba(0,0,0,0.1);
         -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
         -moz-box-shadow:    0px 0px 10px 0px rgba(0, 0, 0, 0.1);
         box-shadow:         0px 0px 10px 0px rgba(0, 0, 0, 0.1);
}
#formular div[id^="form_step"] div[class^="zusatzinfo_"].show { display: inline-block !important; }

#formular div[id^="form_step"] div[class^="zusatzinfo_"]:after, #formular div[id^="form_step"] div[class^="zusatzinfo_"]:before {
        bottom: 100%;
        left: 50%;
        border: solid transparent;
        content: "";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
}
#formular div[id^="form_step"] .zusatzinfo_basis.show:after, #formular div[id^="form_step"] .zusatzinfo_basis.show:before { left: 75px; }
#formular div[id^="form_step"] .zusatzinfo_premium.show:after, #formular div[id^="form_step"] .zusatzinfo_premium.show:before { left: calc(100% - 75px); }

#formular div[id^="form_step"] div[class^="zusatzinfo_"]:after {
        border-color: rgba(255, 255, 255, 0);
        border-bottom-color: #ffffff;
        border-width: 10px;
        margin-left: -10px;
}
#formular div[id^="form_step"] div[class^="zusatzinfo_"]:before {
        border-color: rgba(255, 255, 255, 0);
        border-bottom-color: rgba(0,0,0,0.1);
        border-width: 11px;
        margin-left: -11px;
}

#formular div[id^="form_step"] div[class^="zusatzinfo_"] .item { display: block; background: transparent url(../images/dot_check_hl.png) center left no-repeat; background-size: 20px; padding: 4px 0px 4px 30px; margin: 3px 0px 3px 0px; font-size: 1.0em; border-bottom: 2px rgba(0,0,0,0.2) dotted; }
#formular div[id^="form_step"] div[class^="zusatzinfo_"] .item:last-child { border-bottom: 0px rgba(0,0,0,0.2) dotted; }
#formular div[id^="form_step"] div[class^="zusatzinfo_"] .item b { float: right; }

/* Anpassungen */
#formular #form_step_2 label, #formular #form_step_2 .label { width: calc((100% / 2) - 10px - 2px); padding: 10px 0px 10px 0px; margin: 5px 5px 5px 5px; font-size: 1.0em;  text-align: center; }
#formular #form_step_2 label span, #formular #form_step_2 .label span { height: 18px; }
#formular #form_step_2 label div[class^="image_"]{ height: 70px; background-size: 60px 60px; }

#formular #form_step_5 .gb i { display: inline-block; width: 10px; height: 30px; padding: 12px 0px 0px 0px; text-align: left; }
#formular #form_step_5 .gb b { display: block; width: 100%; padding: 5px 0px 10px 0px; text-align: center; font-style: italic; color: var(--main-color); }


#formular input[type="text"], #formular select  { width: calc(100% - 15px - 0px); font-size: 0.9em; padding: 4px 4px 3px 6px; margin: 3px 5px 3px 0px; }
#formular input[name="vorname"] { width: calc(50% - 15px - 5px); min-width: 140px; }
#formular input[name="nachname"] { width: calc(50% - 15px - 5px + 0px); min-width: 140px; }
#formular input[name="strasse"] { width: calc(70% - 15px - 0px); min-width: 200px; }
#formular input[name="nr"] { width: calc(30% - 15px - 5px); min-width: 80px; }
#formular input[name="plz"] { width: calc(30% - 15px - 5px); min-width: 80px; }
#formular input[name="ort"] { width: calc(70% - 15px - 5px); min-width: 200px; }
#formular select[name="geburtsdatum_tag"] { width: calc(25% - 10px - 5px); min-width: 62px; padding: 5px; }
#formular select[name="geburtsdatum_monat"] { width: calc(25% - 10px - 5px); min-width: 62px; padding: 5px; }
#formular select[name="geburtsdatum_jahr"] { width: calc(50% - 5px); min-width: 95px; padding: 5px; }
#formular input[name="telefon"] { float: left;width: calc(100% - 60px - 0px); min-width: 200px; }

select option:disabled { color: rgba(0,0,0,0.5) !important; }

#formular input.error,
#formular select.error,
#formular #box_datenschutz.error, #formular #grc-box.error
{ border: 1px #DF0000 solid; }

#formular #box_datenschutz { width:100%; margin: 5px auto; padding: 5px 0px !important; font-size: 0.9em; border: 1px transparent solid; }

#formular .button {
         cursor: pointer;
         width: 205px;
         background: #74c011 url(../images/arrow.png) right center no-repeat;
         padding: 5px 35px 5px 10px;
         margin: 5px auto 0px auto;

         color: #FFFFFF;
         font-weight: 700;

         -webkit-border-radius: 4px;
         -moz-border-radius: 4px;
         border-radius: 4px;
}

#formular .select_check {
         display: inline-block;
         display: none;
         position: absolute;
         width: 24px;
         height: 24px;

         background-color: #FFFFFF;
         background-repeat: no-repeat;
         background-position: center center;
         background-size: 20px 20px;

         padding: 0px 0px;
         margin: -87px 0px 0px 62px;

         -webkit-border-radius: 50px;
         -moz-border-radius: 50px;
         border-radius: 50px;
}

#formular #form_step_2 .select_check { margin: -104px 0px 0px 62px; }
#formular label:hover .select_check.no { background-color: #DFDFDF; background-image: url(../images/dot_select_yes_hover.png);  }
#formular .select_check.no { background-image: none; }
#formular .select_check.yes { background-color: #6a9b24; background-image: url(../images/dot_select_yes_hover.png); }


/* Sonstiges  */
#count_sparen { display: inline; color: var(--main-color); }
#waiting { display: none; position: relative; width: 540px; height: 360px; margin-top: -360px; background: #f7f7f6 url(../images/waiting_animation.gif) center center no-repeat; background-size: 100% auto; }

/* Slider  */
#slider_berufsstatus { display: block; width: calc(100% - 0px); min-height: 300px; margin: 0% 0px; text-align: center; }
#slider_berufsstatus .s_items { display: block; width: calc(100% - 0px); min-height: 300px; padding: 0px 0px; text-align: center; }
#slider_berufsstatus .s_items .itemgroup { display: none; width: calc(100% - 0px); padding: 0px; border: 0px #000000 solid; }

#slider_berufsstatus .s_bar { display: inline-block; width: calc(50% - 0px); width: auto; height: 40px; padding: 0px; border: 0px #000000 solid; }
#slider_berufsstatus .s_bar .s_dots { display: inline-block; width: calc(100% - 82px); width: auto; height: 40px; padding: 0px; border: 0px #000000 solid; }
#slider_berufsstatus .s_bar .s_dots .slick-dots { display: block; height: 40px; min-width: 40px; margin: 0px; padding: 0px; text-align: center;}
#slider_berufsstatus .s_bar .s_dots .slick-dots li { display: inline-block; list-style: none; width: 14px; height: 40px; margin: 0px 5px; padding: 0px; text-align: center; background-image: none !important; border: 0px #00FF14 solid; cursor: pointer; }
#slider_berufsstatus .s_bar .s_dots .slick-dots li button { border: 0px #000000 solid; background: rgba(0,0,0,0.6); display: block; height: 14px; width: 14px; outline: none; line-height: 40px; font-size: 0; color: transparent; padding: 0px; margin-top: 12px; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; }
#slider_berufsstatus .s_bar .s_dots .slick-dots li:hover button,
#slider_berufsstatus .s_bar .s_dots .slick-dots li:focus button,
#slider_berufsstatus .s_bar .s_dots .slick-dots li.slick-active button { background: var(--second-color); }


#slider_berufsstatus .s_bar .s_l { cursor: pointer; float: left; display: inline-block; display: none; width: 40px; height: 40px; background: transparent url(../images/arrow_l_grey.png) center center no-repeat; background-size: 14px auto; }
#slider_berufsstatus .s_bar .s_l:hover {  background-image: url(../images/arrow_l_highlight.png); }
#slider_berufsstatus .s_bar .s_r { cursor: pointer; float: right; display: inline-block; display: none; width: 40px; height: 40px; background: transparent url(../images/arrow_r_grey.png) center center no-repeat; background-size: 14px auto; }
#slider_berufsstatus .s_bar .s_r:hover {  background-image: url(../images/arrow_r_highlight.png); }


/* Datenschutz Label unter Formular */
#formular .datenschutz { text-align: left; font-size: 0.75em; }
#formular .datenschutz b { display: block; }
#formular .datenschutz img { float:left; margin-right: 10px; width: 50px; height: 50px; }
#formular .datenschutz .hilfe { text-align: left !important; margin-top: 10px; margin-bottom: 0px; font-weight: bold; font-size: 1.0em; }
#formular .datenschutz .hilfe img { width: 20px; height: 20px;}

#formular .datenschutz_hinweis { background: transparent url(../images/icon_secure.png) left center no-repeat; background-size: 30px; padding-left: 40px; font-size: 0.65em; }


#formular table { font-size: 0.9em; }
#formular td:nth-child(odd) { text-align: right; border-bottom: 2px #EFEFEF dotted; }
#formular td:nth-child(even) { text-align: left; border-bottom: 2px #EFEFEF dotted; color: #000000; }

/* Error Handling */
#formular div[id^="error_"] {
         position: relative;
        background: #DF0000;

         font-size: 0.7em;
         color: #FFFFFF;

         padding: 2px 5px;
         margin: 0px 0px 0px 0px;
}


/* Button Pannel */
#formular #button_panel { display: inline-block; width: calc(100% - 2px); height: 40px; line-height: 40px; border: 0px #000000 solid; margin-top: 5px; text-align: center; }
#formular #button_panel input[type="submit"] { display: inline-block; float: right; width: 300px; font-size: 1.1em; font-weight: bold; text-align: center; padding: 6px 30px 6px 10px; }

#formular #button_panel button {
         display: inline-block;
         cursor: pointer;
         width: auto;
         height: 32px;

         background-repeat: no-repeat;
         background-size: 12px auto !important;

         margin: 0px 0px 0px 0px;
         padding: 0px 15px 0px 15px;

         border: 0px #000000 solid;
         -webkit-border-radius: 20px;
         -moz-border-radius: 20px;
         border-radius: 20px;

         font-size: 0.9em;
         font-weight: bold;
         color: rgba(255,255,255,1.0);
         text-shadow: 0px 0px 3px rgba(0,0,0,0.2);

         transition: all 0.3s ease-in-out;
}

#formular #button_panel button.f_b {
         float:left;
         background-color: rgba(0,0,0,0.12);
         background-image: url(../images/arrow_l.png);
         background-position: 10px center;
         padding-left: 35px;
         text-align: right;
}
#formular #button_panel button.f_b:hover { background-color: rgba(0,0,0,0.20); }


#formular #button_panel .f_n {
         float:right;
         background-color: var(--second-color);
         background-image: url(../images/arrow_r.png);
         background-position: calc(100% - 10px) center;
         padding-right: 40px;
         text-align: left;

         width: auto;
         height: 36px;
}

#formular #button_panel .f_n:hover { background-color: var(--main-color); }

#formular #button_panel.start { margin-top: 20px; }
#formular #button_panel.start .f_n { float: left; width: 220px; margin-left: calc(50% - 110px); font-size: 1.3em; height: 40px; padding-left: 30px; }

#formular #button_panel button.opa { opacity: 0.2; }
#formular #button_panel button[disabled]{ opacity: 0.5; }

#formular #button_panel button.none { cursor: default; opacity: 0.0; filter: alpha(opacity=0); }

#formular .bg.error, #formular .big.error {
         border: 2px #DF0000 solid;
         margin-bottom: 10px;
}