/* STYLES EMPLOYER BRANDING */

.show_container { background-color: #FFFFFF;}

.h1_these {
        font-family: 'Prata';
        text-transform: none;
        font-size: 500%;
        font-weight: 400;
        line-height: 1.1em;
        color: #000000;
        margin-top:18px;
        margin-bottom:50px;
        text-align:center;
}
@media all and (max-width:1600px) {.h1_these {font-size: 400%; line-height: 1.2em; margin-top:0px; margin-bottom:20px;}  }
@media all and (max-width:1300px) {.h1_these {font-size: 360%; line-height: 1.2em; margin-top:0px; margin-bottom:20px;}  }
@media all and (max-width: 860px) {.h1_these {font-size: 300%; line-height: 1.2em; margin-top:0px; margin-bottom:20px;}  }
@media all and (max-width: 560px) {.h1_these {font-size: 160%; line-height: 1.2em; margin-top:0px; margin-bottom:0px;}  }




/* === FALLBEISPIELE === */
.h2_casehead {
        font-size: 500%;
        line-height: 1.0em;
        color: #FFFFFF;
        margin-top:0px;
        margin-bottom:20px;
}

@media all and (max-width: 1800px) { .h2_casehead { font-size:380%; }}
@media all and (max-width: 1600px) { .h2_casehead { font-size:300%; }}
@media all and (max-width: 960px) { .h2_casehead { font-size:260%; }}
@media all and (max-width: 560px) { .h2_casehead { font-size:250%; }}





.these {
        line-height: 1.3em;
        color: #000000;
        margin-top:60px;
        margin-bottom:0px;
        max-width:75%;
}
@media all and (max-width: 560px) {.these {max-width:100%;}  }


.ziff {font-size:400%; margin-right:-100px; margin-left:100px;}


.maincol {color: #e5eb2f;}
.bgcolor_maincol {background-color: #e5eb2f;}

.bgcolor_bluegrey {background-color: #698ba9;}

.bold {font-weight:700;}

.modaltext {font-family: 'Noto Sans'; font-size:100%;}
@media all and (max-width: 560px) {.modaltext {font-size:80%;}  }


.img_bonbon {width:40%; margin-left:30%;}
@media all and (max-width: 960px) {.img_bonbon {width:60%; margin-left:20%;}  }
@media all and (max-width: 560px) {.img_bonbon {width:80%; margin-left:10%;}  }


/* === liste oben ====== */
.ul_eb { margin-top:0px; margin-left:-8px; max-width:95%;}
@media all and (max-width: 560px) {.ul_eb {max-width:100%;}  }

.li_eb {
        font-size:90%;
        line-height: 1.7em;
        color: #3F3F3F;
        margin-bottom:0px;
        text-transform:uppercase;
        letter-spacing:0.1em;

}
@media all and (max-width: 560px) {.li_eb {font-size:65%; line-height:1.3 em; letter-spacing:0.05em; }  }


.marg0 {margin:0 0 20px 0;}





/* ========== GRID Die 4 Module / Vorgehen ========== */
.grid_module {
display: grid;
grid-template-columns: 25% 75%;
grid-template-rows: auto;
grid-column-gap: 0px;
grid-row-gap: 0px;
margin-bottom:0px;
                 border:0px solid #00BF00;
}

.grid_module_feld_1 { grid-area: 1 / 1 / 3 / 2; padding-right:30px;}
.grid_module_feld_2 { grid-area: 1 / 2 / 2 / 3; }
.grid_module_feld_3 { grid-area: 2 / 2 / 3 / 3; }

.grid_module_feld_1,
.grid_module_feld_2,
.grid_module_feld_3 { border:0px solid #FF7F00; }

@media all and (max-width: 1300px) {
         .grid_module {
          grid-template-columns: 33% 66%;
         }
         .grid_module_feld_1 { grid-area: 1 / 1 / 3 / 2; padding-right:0px;}
         .grid_module_feld_2 { grid-area: 1 / 2 / 2 / 3; }
         .grid_module_feld_3 { grid-area: 2 / 2 / 3 / 3; }
}

@media all and (max-width: 560px) {
         .grid_module {
          grid-template-columns: 100%;
          grid-template-rows: 1fr auto;
         }
         .grid_module_feld_1 { grid-area: 2 / 1 / 3 / 2; padding-right:0px;}
         .grid_module_feld_2 { grid-area: 1 / 1 / 2 / 2;}
         .grid_module_feld_3 { grid-area: 3 / 1 / 4 / 2;}

}







/* === Überschrift === */
.modul_head {
        font-family: 'Lato', sans-serif;
        font-weight:900;
        font-size: 240%;
        word-spacing: 0.05em;
        line-height: 1.0em;
        text-transform: uppercase;
        margin:0px 0 0 0;
}


.grey {  color:#AFAFAF;}

@media all and (max-width: 1900px) {.modul_head {font-size:240%; line-height: 1.0em; }}
@media all and (max-width: 1300px) {.modul_head {font-size:240%; line-height: 1.0em; }}
@media all and (max-width: 560px)  {.modul_head {font-size:240%; line-height: 1.0em; }}




/* === Zwischenüberschrift Lato uppercase == ueberhaupt verwendet? == */
.modul_inter {
        font-family: 'Lato', sans-serif;
        font-size:120%;
        font-weight:900;
        line-height:160%;
        text-transform:uppercase;
        letter-spacing:0.05em;
        margin:40px 0 0px 0;
}
@media all and (max-width: 1900px) {  .modul_inter { font-size: 105%; }}
@media all and (max-width: 1300px) {  .modul_inter { font-size: 100%; }}
@media all and (max-width: 560px)  {  .modul_inter { font-size: 90%; line-height:150%; text-align:left;}}



/* === Fließtext in Modulbereich === */
.modul_copy {
        font-size: 120%;
        font-weight: 300;
        color: #333;
        line-height:160%;
        letter-spacing: 0.0em;
}

@media all and (max-width: 1900px) {  .modul_copy { font-size: 105%; }}
@media all and (max-width: 1300px) {  .modul_copy { font-size: 100%; }}
@media all and (max-width: 560px)  {  .modul_copy { font-size: 90%; line-height:150%;}}



/* === Fließtext klein serifenlos === */
.modul_case    {
        font-family: 'Noto Sans', sans-serif;
        font-size: 95%;
        font-weight: 300;
        color: #6F6F6F;
        line-height:160%;
        letter-spacing: 0.0em;
        padding-right:30px;
}

@media all and (max-width: 1900px) {  .modul_case { font-size: 95%; }}
@media all and (max-width: 1300px) {  .modul_case { font-size: 90%; }}
@media all and (max-width: 560px)  {  .modul_case { font-size: 80%; line-height:150%; } }




.grafcontainer {width:100%;}
.grafbox {width:25%; float:left}
@media all and (max-width: 960px) {.grafbox {width:50%; float:left}   }
@media all and (max-width: 560px) {.grafbox {width:100%; float:left}   }
.graftxt {color:#FFFFFF; padding:0 30px 50px 0px;}





.caram  {color: #d4a77d;}
.black  {color: #000000;}
.reiff  {color: #FFFF00;}





@media all and (max-width: 1800px) {h6 {font-size:90%;}}
@media all and (max-width: 1000px)  {h6 {font-size:80%;}}
@media all and (max-width: 800px)  {h6 {font-size:90%;}}