/* ======================================================= */
/*    General
/* ======================================================= */

/* Load Fonts */

@import url('https://fonts.googleapis.com/css?family=Inter:400,400i,500,600,700');

* { box-sizing: border-box; }


:root {
  --error-color: rgb(227, 6, 19);
  --error-color-20: rgba(227, 6, 19, 0.2);

  --success-color: rgb(58, 170, 53);
  --success-color-20: rgba(58, 170, 53, 0.2);

  --text-color: #1D1D1F;
  --text-color-light: rgba(29, 29, 31, 0.5);
}


html, body {
   width: 100%;
   height: 100%;
   margin: 0;
   padding: 0;
   font-family: 'Inter', sans-serif;
   font-weight: 400;
   font-size: 18px;
   font-style: normal;
   line-height: 1.4;
   letter-spacing: 0rem;
   background-color: #FFFFFF;
   color: var(--text-color);
   -webkit-font-smoothing: antialiased;
}


/* ======================================================= */
/*    HTML Tags
/* ======================================================= */


img, object, embed, svg { max-width: 100%; margin: 0px; line-height: 0; }

img { height: auto; }

a {
   cursor: pointer;
   text-decoration: underline;
   color: var(--text-color);
}

a:hover {
   text-decoration: underline;
}

p { margin: 0 auto 10px auto; }

h1, h2, h3, h4, h5, h6 { margin-top: 0px; margin-bottom: 0px; }

h1 {
   font-size: 50px;
   font-size: clamp(32px, 4.2vw, 50px);
   font-weight: bold;
   font-style: normal;
   line-height: 1.3;
}

h2 {
   font-size: 35px;
   font-size: clamp(26px, 4.2vw, 35px);
   font-weight: bold;
   font-style: normal;
   line-height: 1.3;
}

h3 {
   font-size: 26px;
   font-weight: bold;
   font-style: normal;
   line-height: 1.3;
}

h4 {
   font-size: 23px;
   font-weight: bold;
   font-style: normal;
   line-height: 1.3;
}

h5 {
   font-size: 18px;
   font-weight: bold;
   font-style: normal;
   line-height: 1.3;
}

hr {
   border-top: 1px solid #CCC;
   border-bottom: none;
}



/* ======================================================= */
/*    Colors
/* ======================================================= */


.bgcolor_fred { background-color: #d4edfc; }

.highlight { color: #e30385; }



/* ======================================================= */
/*    Misc.
/* ======================================================= */


.small { font-size: 14px; }

.italic { font-style: italic; }

.center { text-align: center; }

.left { text-align: left; }
.left_2c { text-align: left;}

.right { text-align: right; }
.right_2c { text-align: right; }

.inline { display: inline-block; }

.uc { text-transform: uppercase; }



/* ======================================================= */
/*    Distances
/* ======================================================= */


.pd_0 { padding: 0px; }
.pd_xs { padding: 5px; }
.pd_s { padding: 10px; }
.pd_m { padding: 20px; }
.pd_l { padding: 30px; }
.pd_xl { padding: 50px; }

.pd_top_0 { padding-top: 0px; }
.pd_top_xs { padding-top: 5px; }
.pd_top_s { padding-top: 10px; }
.pd_top_m { padding-top: 20px; }
.pd_top_l { padding-top: 30px; }
.pd_top_xl { padding-top: 50px; }
.pd_top_xxl { padding-top: 80px; }

.pd_btm_0 { padding-bottom: 0px; }
.pd_btm_xs { padding-bottom: 5px; }
.pd_btm_s { padding-bottom: 10px; }
.pd_btm_m { padding-bottom: 20px; }
.pd_btm_l { padding-bottom: 30px; }
.pd_btm_xl { padding-bottom: 50px; }
.pd_btm_xxl { padding-bottom: 80px; }

.mg_0 { margin: 0px; }
.mg_xs { margin: 5px; }
.mg_s { margin: 10px; }
.mg_m { margin: 20px; }
.mg_l { margin: 30px; }
.mg_xl { margin: 50px; }

.mg_btm_0 { margin-bottom: 0px; }
.mg_btm_s { margin-bottom: 10px; }
.mg_btm_m { margin-bottom: 20px; }
.mg_btm_l { margin-bottom: 30px; }
.mg_btm_xl { margin-bottom: 50px; }

.mg_top_0 { margin-top: 0px; }
.mg_top_s { margin-top: 10px; }
.mg_top_m { margin-top: 20px; }
.mg_top_l { margin-top: 30px; }
.mg_top_xl { margin-top: 50px; }
.mg_top_xxl { margin-top: 80px; }

.mg_auto { margin-left: auto; margin-right: auto; }


.td_50 { width: 50%; }



/* ======================================================= */
/*    Content
/* ======================================================= */


/* Header & Footer */

#header, #footer {
   width: 100%;
   margin: 0px auto;
   padding: 30px 0px;
   text-align: center;
   background-color: #FFFFFF;
}

#logo {
   width: 90%;
   max-width: 250px;
   margin: 0px auto;
   padding: 0px;
   vertical-align: bottom;
}

#logo_footer {
   width: 90%;
   max-width: 220px;
   margin: 0px auto;
   padding: 0px;
   vertical-align: bottom;
}


/* Body */


.section {
   width: 100%;
   margin: 0px;
   padding: 0px;
   text-align: center;
   border: 0px solid #FF0000;
}

.container {
   width: 100%;
   max-width: 1200px;
   margin: 0px auto;
   padding-left: 15px;
   padding-right: 15px;
   border: 0px solid #FF0000;
}

.limited_width {
   max-width: 680px;
}

.table {
   display: table;
   margin: 0;
   padding: 0;
   width: 100%;
}

.td {
   display: table-cell;
   margin: 0;
   padding: 0;
   vertical-align: top;
}

.card {
   background-color: #FFFFFF;
   border-radius: 7px;
   padding: 25px;
}



/* ======================================================= */
/*    Buttons
/* ======================================================= */


.btn {
   display: inline-block;
   text-decoration: none;
   background-color: #1D1D1F;
   color: #FFFFFF;
   font-size: 16px;
   font-weight: bold;
   text-decoration: none;
   border-radius: 30px;
   padding: 15px 50px;
   text-align: center;
   cursor: pointer;
   width: auto;
   vertical-align: middle;
}

.btn:hover {
   text-decoration: none;
   background-color: rgba(29,29,31,.7);
}


/* Lists */

ul {
   text-align: left;
   margin: 0 auto;
   padding: 0px 0px 0px 10px;
}

li  {
   margin-left: 30px;
   margin-top: 3px;
   margin-bottom: 5px;
   list-style: inherit;
   text-align: left;
 }

.checklist li {
   margin-left: 0px;
   margin-bottom: 7px;
   text-align: left;
   list-style: none;
   padding-left: 37px;
   padding-bottom: 15px;
   background-image: url('../images/icon_list.svg');
   background-size: 23px 23px;
   background-position: left 1px;
   background-repeat: no-repeat;
}


/* ======================================================= */
/*    Form
/* ======================================================= */


form { display: inline; margin: 0px; }


/* Input Text */

.input_text {
   display: block;
   position: relative;
   border: 0px solid red;
   border-radius: 0px;
   max-width: 400px;
   height: 64px;
   padding: 0px;
}

.input_text input {
   outline: none;
   font-size: 18px;
   background-color: #FFF;
   border: 1px solid #9da3a6;
   border-radius: 4px;
   outline: 0px;
   padding: 26px 13px 9px 13px;
   width: 100%;
   -webkit-appearance: none;
   -moz-appearance: none;
}

.input_text_error input {
   box-shadow: 0 0 0 4px var(--error-color-20);
   border: 2px solid var(--error-color);
   padding: 25px 12px 8px 12px;
}

.input_text input:hover {
   box-shadow: none;
   padding: 26px 13px 9px 13px;
   border: 1px solid var(--main-color);
}

.input_text input:focus {
   box-shadow: 0 0 0 4px var(--main-color-20);
   border: 2px solid var(--main-color);
   padding: 25px 12px 8px 12px;
}

.input_text .label {
   position: absolute;
   top: 19px;
   left: 13px;
   font-size: 18px;
   color: #9da3a6;
   pointer-events: none;
   transition: .25s ease all;
   font-weight: 400;
}

.input_text input:focus + .label {
   top: 6px;
   font-size: 14px;
}

.input_text input:not(:placeholder-shown) + .label {
   top: 6px;
   font-size: 14px;
}

.input_text input:not(:-moz-placeholder-shown) + .label {
   top: 6px;
   font-size: 14px;
}

.input_text input:not(:-ms-input-placeholder) + .label {
   top: 6px;
   font-size: 14px;
}

/* IOS Switch */

.toogle_switch {
    display: flex;
    cursor: pointer;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
}

.toogle_switch input {
    display: none;
}

.toogle_switch .label {
    /*position: relative;
    height: 24px;
    padding-left: 15px;
    */
}

.toogle_switch .toggle {
    position: relative;
    width: 52px;
    height: 30px;
    background-color: #D9DADC;
    border-radius: 23px;
    vertical-align: text-bottom;
    transition: all 0.3s;
    flex-shrink:0
}

.toogle_switch input:checked + .toggle {
    background-color: var(--main-color);
}

.toogle_switch .toggle::after {
    content: "";
    position: absolute;
    left: 0;
    width: 26px;
    height: 26px;
    background-color: #fff;
    border-radius: 13px;
    /*box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);*/
    transform: translate3d(2px, 2px, 0);
    transition: all 0.2s ease-in-out;
    background-size: 13px 13px;
    background-position: center center;
    background-repeat: no-repeat;
}

.toogle_switch input:checked + .toggle::after {
    transform: translate3d(24px, 2px, 0);
    background-image: url('../images/icon_check.svg');
}



.input_textarea {
   outline: none;
   font-size: 18px;
   font-family: 'Lato', sans-serif;
   text-align: left;
   background-color: #F9F9F9;
   border: 1px solid #DEDEDE;
   margin: 0px;
   padding: 12px 10px;
   width: 100%;
   border-radius: 0px;
   -webkit-appearance: none;
   -moz-appearance: none;
}

.label_text {
   display: block;
   margin: 0px;
   padding: 0px;
   font-size: 15px;
   text-align: left;
}

.input_number {
   outline: none;
   font-size: 18px;
   text-align: center;
   background-color: #F9F9F9;
   border: 1px solid #DEDEDE;
   margin: 0px;
   padding: 12px 10px;
   border-radius: 0px;
   -webkit-appearance: none;
   -moz-appearance: none;
}

.input_select {
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
   border: 1px solid #9da3a6;
   text-align: left;
   outline: none;
   cursor: pointer;
   width: 100%;
   background-color: #FFF;
   color: var(--text-color);
   font-size: 18px;
   border-radius: 4px;
   outline: 0px;
   padding: 18px 42px 18px 13px;
   background-image: url('../images/icon_arrow_down.svg');
   background-repeat: no-repeat;
   background-size: 18px 18px;
   background-position: calc(100% - 15px) center;
   margin: auto;
}

.input_select::-ms-expand { display: none; }

.input_select:hover {
   border: 1px solid var(--main-color);
}

/* Input CHECKBOX */

.input_checkbox {
   display: none;
}

.label_checkbox {
   display: block;
   font-size: 18px;
   padding: 15px 20px 15px 45px;
   margin: 0 auto;
   text-align: left;
   cursor: pointer;
   background-image: url('../images/icon_input_checkbox.svg');
   background-repeat: no-repeat;
   background-size: 25px 25px;
   background-position: 10px 18px;
}

.input_checkbox:checked + label {
   background-image: url('../images/icon_input_checkbox_checked.svg');
}

#preload-01 { background: url('../images/icon_input_checkbox_checked.svg') no-repeat -9999px -9999px; }


.btn_send {
   display: inline-block;
   text-decoration: none;
   background-color: var(--main-color);
   color: #FFFFFF;
   font-size: 17px;
   font-weight: 700;
   text-decoration: none;
   border-radius: 30px;
   padding: 15px 50px;
   text-align: center;
   cursor: pointer;
   width: 100%;
   max-width: 400px;
   outline: none;
   border: 0;
   -webkit-appearance: button;
}

.btn_send:hover {
   background-color: var(--main-color-90);
   text-decoration: none;
}


/* Fehlermeldungen */

.input_error {
   border: 1px solid #FF0000;
}

.input_error:focus {
   border: 1px solid #FF0000;
}

.error_text {
   color: #FF0000;
   font-size: 16px;
}

.error_box {
   color: var(--error-color);
   background-color: var(--error-color-20);
   padding: 20px 20px 20px 50px;
   line-height: 1.5;
   text-align: left;
   font-size: 16px;
   border-radius: 5px;
   background-image: url('../images/icon_error.svg');
   background-size: 20px 20px;
   background-position: 15px center;
   background-repeat: no-repeat;
}

.success_box {
   color: var(--success-color);
   background-color: var(--success-color-20);
   padding: 20px 20px 20px 50px;
   line-height: 1.5;
   text-align: left;
   font-size: 16px;
   border-radius: 5px;
   background-image: url('../images/icon_success.svg');
   background-size: 20px 20px;
   background-position: 15px center;
   background-repeat: no-repeat;
}


/* ======================================================= */
/*   Message Boxen
/* ======================================================= */


.msg_box {
   background-color: #F7F7F7;
   border-radius: 5px;
   padding: 25px;
}

.msg_box_alert {
   background-color: #fef0ce;
   border-radius: 5px;
   padding: 25px;
}

.msg_box_success {
   background-color: var(--success-color-20);
   border-radius: 5px;
   padding: 25px;
}


/* ======================================================= */
/*    Responsive
/* ======================================================= */

@media only screen and (max-width: 1200px) {


}


@media only screen and (max-width: 1040px) {



}


@media only screen and (max-width: 960px) {


}

@media only screen and (max-width: 480px) {

   #logo {
      width: 200px;
      margin: 0px auto;
      padding: 0px;
   }
}