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

         overflow: hidden;

         border: 0px #000000 solid;

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

#formular .hilfe {
         cursor: pointer;

         display: block;
         width: calc(100% - 10px);
         background: var(--second-color) url(../images/dot_info.png) right center no-repeat;
         background-size: 28px;

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

         font-family: var(--second-font);
         font-size: 0.9em;
         color: var(--font-color-light);
         text-shadow: rgba(0,0,0,0.2) 1px 1px 0px;
         text-align: left;

         -webkit-border-radius: 20px;
         -moz-border-radius: 20px;
         border-radius: 20px;
}
#formular .hilfe.no { background-image: none; }
#formular .hilfe.a_c { text-align: center; }

#formular .hilfe .frage {
         display: inline-block;
         float: right;
         margin-top: -3px;
         cursor: pointer;
}

#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;
         width: calc((100% / 3) - (40px / 3) - 5px);
         height: 100px;

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

         background: #FFFFFF;

         -webkit-box-shadow: 0px 12px 8px -8px rgba(0, 0, 0, 0.05);
         -moz-box-shadow:    0px 12px 8px -8px rgba(0, 0, 0, 0.05);
         box-shadow:         0px 12px 8px -8px rgba(0, 0, 0, 0.05);

         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.3s ease-in-out;
}
#formular div[id^="form_step"] label:nth-child(3n + 2), #formular div[id^="form_step"] .label:nth-child(3n + 2) { margin: 5px 20px 5px 20px; }

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

#formular div[id^="form_step"] label:hover,
#formular div[id^="form_step"] .label:hover {
         border: 1px solid var(--second-color);
         background: var(--second-color);
}
#formular div[id^="form_step"] label.nohover,
#formular div[id^="form_step"] .label.nohover { background: #FFFFFF!important; }

#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.75em;
         font-weight: bold;
}

#formular div[id^="form_step"] label > input[type="radio"] + img {
         cursor: pointer;
         padding: 5px 5px;
         background: transparent;
         border: 2px solid transparent;
         margin-bottom: 0px;

         opacity: 0.7;

         width: 50px;
         height: auto;
}

#formular div[id^="form_step"] label > input[type="radio"]:hover + img {
         opacity: 1.0;
}

#formular div[id^="form_step"] label > input[type="radio"]:checked + img {
          border: 2px solid transparent;
          background: var(--second-color);
}


/* Anpassungen */
#formular #form_step_2 label { height: 110px !important; }
#formular #form_step_7 .label.gb { width: calc(100% - 2px); height: 50px; padding-top: 12px; text-align: center; }
#formular #form_step_7 .label.gb i { display: inline-block; height: 30px; padding: 12px 5px 0px 0px; text-align: center; }
#formular #form_step_10 .label.karte { width: calc(100% - 2px); height: 200px; }
#formular #form_step_12 .label { width: calc(100% - 2px); height: 250px; text-align: center; }

#formular input[name="region_plz"] { width: 50px; margin-top: 5px; padding: 5px; font-size: 1.0em; }
#formular input[name="region_ort"] { width: calc(90% - 90px); margin-top: 5px; padding: 5px; font-size: 1.0em; }
#formular input[name="vorname"] { width: 140px; }
#formular input[name="nachname"] { width: 140px; }
#formular input[name="strasse"] { width: 220px; }
#formular input[name="nr"] { width: 60px; }
#formular input[name="plz"] { width: 80px; }
#formular input[name="ort"] { width: 200px; }
#formular input[name="telefon"] { width: 300px; font-size: 0.9em; }
#formular input[name="email"] { width: 300px; font-size: 0.9em; }
#formular select[name="geburtsdatum_tag"] { width: 62px; padding: 5px; font-size: 1.0em; }
#formular select[name="geburtsdatum_monat"] { width: 62px; padding: 5px; font-size: 1.0em; }
#formular select[name="geburtsdatum_jahr"] { width: 95px; padding: 5px; font-size: 1.0em; }
#formular input.error,
#formular select.error,
#formular #box_datenschutz.error, #formular #grc-box.error
{ border: 1px #DF0000 solid; }

#formular #box_datenschutz { width:313px; margin: 5px auto; padding: 5px 0px !important; font-size: 0.8em; border: 1px transparent solid; }
#formular input[type="submit"] { width: 315px; }

#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 #karte {
         font-size: 0.9em;
         text-align: left;
         width: calc(100% - 40%);

         height: 160px;
         background: #FFFFFF url(../images/karte.png) 10% top no-repeat;
         background-size: 160px 180px;
         padding-top: 30px;
         padding-left: 40%;
         margin-top: 0px;
}

#formular #karte .button { display: block; margin: 0px 0px 0px 0px; width: 207px; }



#formular .select_check {
         display: inline-block;
         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); }


/* Datenblock über Formular */
#formular #daten_info {
         display: block;
         width: calc(100% - 2px);

         line-height: 1.1em;
         text-align:left;
         font-size: 0.75em;
         color: #FFFFFF;
         text-shadow: rgba(0,0,0,0.2) 1px 1px 0px;
}

#formular #daten_info .counter {
         float:left;
         display: table-cell;

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

         line-height: 50px;
         width:50px;


         background-color: var(--main-color);

         border-radius: 50%;

         font-size:1.8em;
         font-weight: bold;
         vertical-align: middle;
         text-align: center;
         color: var(--font-color-light);
         text-shadow: rbga(0,0,0,0,1) 1px 1px 1px;
}

#formular #daten_info .tarif_info { float:left; width: calc(100% - 100px); margin-left: 10px; }
#formular #daten_info .tarif_info u { display: block; margin-bottom: 4px; opacity: 0.6; font-size: 0.9em; }

/* 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 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;
}
#formular #form_step_12 div[id^="error_"] { margin: -20px 0px 0px 0px; }

#formular #tarif_info_counter {
        font-size: 1.1em;
         font-weight: bold;
         height: 30px;
         vertical-align: bottom;
         margin-bottom: 20px;
         text-align: center;
}

#formular #tarif_info_counter .counter {
         display: inline-block;
         width: 30px;
         height: 22px;
}

#formular #tarife_laden img.versicherer { width: 100%; height: auto; max-width: 300px; }


/* Pfeile  */
#formular #button_panel { display: block; height: 40px; border: 0px #000000 solid; margin-top: 10px; text-align: center; }
#formular #button_panel .kill { display: inline-block; height: 30px; margin-top: 8px; }

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

         background-repeat: no-repeat;
         background-size: 30px;

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

         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,0.8);
         text-shadow: 0px 0px 3px rgba(0,0,0,0.2);

         transition: all 0.3s ease-in-out;
}
#formular #button_panel button span { display: block; width: 92px; height: 18px; border: 0px #000000 solid; padding: 8px 0px 8px 18px; text-align: left; }

#formular #button_panel button.f_b {
         float:left;
         background-color: rgba(0,0,0,0.12);
         background-image: url(../images/dot_back.png);
         background-position: center left;
         padding-left: 35px;
         text-align: left;
}
#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/dot_next.png);
         background-position: 78px center;
         padding-right: 40px;
         text-align: right;

         width: 110px;
         height: 36px;
}
#formular #button_panel .f_n:hover { background-color: var(--main-color); }

#formular #button_panel button[disabled]{ opacity: 0.75; }
#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;
}