

@media screen and (max-width: 1497px) {
    :root {
        --site_width: var(--site_width_lg);
        --slide_width: var(--site_width_lg);
        --naviMain-MainPaddingBlock: 2.25rem;
        --naviMain-MainPaddingInline: 1.25rem;

        }

    .headTop .inner,
    .headMain .inner,
    footer .inside {
        width: 100%;
        padding-inline: 2rem;
    }
    .logo {
        width: 18rem;
    }
   
    .boxWrapper.wstandard .box-inside {
        width: var(--site_width_lg);
    }
    h1, .txtH1, .txtH1 p,
    h2, .txtH2, .txtH2 p {
        font-size: var(--font_size10);
    }

}



@media screen and (max-width: 1297px) {
    :root {
        --site_width: 100%;
        --slide_width: 100vw;
        --headerHeight: 189px;
    }
    .logo {
        margin: -3rem auto 0 auto;
        padding-block: 0;
    }
    .headMain .inner {
        flex-direction: column;
        padding-inline: 3rem;
    }
    .naviMain {
        width: 100%;
    }
    .naviMain .level_1 {
        justify-content: center;
    }
    .naviMain a, .naviMain strong {
        padding: 1rem 1.5rem;
        font-size: var(--font_size05);
    }


    .textBox h2 {
        font-size: var(--font_size07);
    }
    .textBox p {
        font-size: var(--font_size03);
    }

    
    .boxWrapper.wstandard .box-inside,
    .boxWrapper.wsmall .box-inside, 
    footer .inside,
    .mod_breadcrumb ul {
        width: 100%;
        padding-left: 3rem;
        padding-right: 3rem;
    }
    .colAddress {
        flex: 1 1 50% !important;
    } 
    .colNav {
        flex: 1 1 30% !important;
    } 

}

@media screen and (max-width:1097px) {
    :root {
        --headerHeight: 132px;
    }

    .naviMain {
        width: 0;
        overflow: hidden;
        display: none;
    }
    .headMain .inner {
        flex-direction: row;
    }
    
    .logo {
        margin: -3rem auto 0 0;
    }


    .headNav .inner {
        padding-right: 0;
    }

    #headSearch input[type="text"] {
        width: 12rem;
    }
    .naviMeta {
        padding-right: 1rem;
    }
    .naviMeta a, .naviMeta strong {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

 
    .hamburger {
        display: block;
    }

    .heroBannerVideo.vh100 {
        width: 100%;
        min-height: auto;
        aspect-ratio: 16 / 9;
      }
    


    .mod_breadcrumb ul {
        padding-inline: 1rem;
    }

    .textBox {
        padding: 0.75rem;
    }
    .textBox h2 {
        font-size: var(--font_size06);
    }
    .textBox p {
        font-size: var(--font_size02);
    }
    .textBox .buttons.txtSizeStd a {
        font-size: var(--font_size03);
        padding: 0.75rem;
    }
    .tw75, .tw50, .tw33, .tw25 {
        width: 100%;
    } 

}

@media screen and (max-width:857px) {
    .headTop .inner, .headMain .inner {
        padding-inline: 1.5rem;
    }
    .naviMeta {
        padding-right: 0;
      }
    .logo {
        margin: -3rem auto 0 0;
    }

    body, p {
        font-size: var(--font_size04);
    }

    .boxWrapper.wstandard .box-inside, .boxWrapper.wsmall .box-inside, footer .inside {
        padding-inline: 2rem;
    }
    .mod_breadcrumb {
        padding: 0 2rem;
      }
    .mod_breadcrumb ul {
        padding-inline: 0;
    }
 
    
    h1, .txtH1, .txtH1 p {
        font-size: var(--font_size08);
    }
    h2,  .txtH2, .txtH2 p {
        font-size: var(--font_size06);
     }
    h3, .txtH3, .txtH3 p, .matterbox h3 {
        font-size:var(--font_size06);
    }
    h4, .txtH4, .txtH4 p {
        font-size:var(--font_size05);
    }
    figure.float_right,
    figure.float_left {
        float: none;
        margin-left: 0;
        margin-right: 0;
    }
    .matterbox:hover {
        transform: scale(1.05);
    }
    .benefits_karriere {
        grid-template-columns: 1fr 1fr;
    }

    /*  
   .padTop_25, .padTop_3,.padTop_35, .padTop_4, .padTop_45 {
        padding-top: 1rem;
    }
    .padBottom_15, .padBottom_2, .padBottom_25, .padBottom_3,
    .padBottom_35, .padBottom_4, .padBottom_45 {
        padding-bottom: 1rem;
    }
    */

    .content-gallery--cols-4 ul,
    .content-gallery--cols-5 ul,
    .content-gallery--cols-6 ul, 
    .content-gallery--cols-7 ul, 
    .content-gallery--cols-8 ul, 
    .content-gallery--cols-9 ul, 
    .content-gallery--cols-10 ul, 
    .content-gallery--cols-11 ul, 
    .content-gallery--cols-12 ul {
        grid-template-columns: 1fr 1fr 1fr;
    }
 


}

@media screen and (max-width: 697px) {
    :root {
        --mm-max-size: 75%;
      }

    body, p , h6, .txtH6, .txtH6 p {
        font-size: var(--font_size03);
    }
    h1, .txtH1, .txtH1 p {
        font-size: var(--font_size07);
    }
    h2,  .txtH2, .txtH2 p {
        font-size: var(--font_size05);
     }
    h3, .txtH3, .txtH3 p, .matterbox h3 {
        font-size:var(--font_size05);
    }
    h4, .txtH4, .txtH4 p,
    h5, .txtH5, .txtH5 p {
        font-size:var(--font_size04);
    }


    .headTop .inner,
    .headMain .inner,
    .boxWrapper.wstandard .box-inside,
    .boxWrapper.wsmall .box-inside, 
    footer .inside {
        padding-inline: 1.5rem;
    }
  

    .mod_breadcrumb {
        padding-inline: 1rem;
    }


    .naviMeta a, .naviMeta strong {
        font-size: var(--font_size03);
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    .naviMeta a span::before, .naviMeta strong::before {
        background-size: 0.875rem;
        padding-left: 1.25rem;
    }

    

    h1, .txtH1, .txtH1 p {
        font-size: var(--font_size07);
    }
    h2, .txtH2, .txtH2 p {
        font-size: var(--font_size06);
     }
    h3,  .txtH3, .txtH3 p {
        font-size:var(--font_size05);
    }
    h4, .txtH4, .txtH4 p {
        font-size:var(--font_size05);
    }


    .herobanner .inside-content {
        width: calc(var(--site_width) * .85);
        padding: 0;
    }
    .herobanner .inside h2 {
        font-size:var(--font_size7);
    }
    .herobanner .inside p {
        font-size:var(--font_size04);
    }
    .herobanner .inside .icon-button {
        font-size:var(--font_size03);
    }
    .toggler {
        font-size:var(--font_size05);
    }
    .ac .ac-trigger {
        font-size: var(--font_size04);
    }

    .benefit-list, .benefits_karriere {
        grid-template-columns: 1fr;
      }

    .content-gallery--cols-3 ul,      
    .content-gallery--cols-4 ul,
    .content-gallery--cols-5 ul,
    .content-gallery--cols-6 ul, 
    .content-gallery--cols-7 ul, 
    .content-gallery--cols-8 ul, 
    .content-gallery--cols-9 ul, 
    .content-gallery--cols-10 ul, 
    .content-gallery--cols-11 ul, 
    .content-gallery--cols-12 ul {
          grid-template-columns: 1fr 1fr;
    }

 
}

@media screen and (max-width: 597px) {
    h1, h2, h3, h4, h5, h6 {
        hyphens: auto;
    }
    
    .mainTop {
        padding-left: 0;
        padding-right: 0;
    }
    .mainTop .inner {
        padding: 1rem;
    }

    .logo {
        width: 13rem;
    }


    .naviMeta a, .naviMeta strong {
        font-size: var(--font_size01);
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    .naviMeta a::before, .naviMeta strong::before {
        background-size: 0.75rem;
        padding-left: 1rem;
    }


    .herobanner .inside h2 {
        font-size:var(--font_size07);
    }
    .herobanner .inside p {
        font-size:var(--font_size03);
        font-weight: bold;
    }
    .herobanner .inside .icon-button {
        font-size:var(--font_size01);
    }

    .sp-buttons {
        display: none;
    }
    .naviMeta a span::before, 
    .naviMeta strong::before {
        width: 0;
        height: 0;
        padding: 0;
        overflow: hidden;
        display: none;
    }
    .textBox {
        margin: auto;
        max-width: 80%;
    }
    .textBox h2 {
        font-size: var(--font_size05);
        margin-bottom: 0.25rem;
      }
    .textBox p {
         margin-bottom: 0.25rem;
    }
    #siteImage .textBox br {
        display: none;
    }

    .topLeft.ph5 .textBox,
    .centerLeft.ph5 .textBox,
    .bottomLeft.ph5 .textBox,
    .topRight.ph5 .textBox,
    .centerRight.ph5 .textBox,
    .bottomRight.ph5 .textBox,
    .topLeft.ph75 .textBox,
    .centerLeft.ph75 .textBox,
    .bottomLeft.ph75 .textBox,
    .topRight.ph75 .textBox,
    .centerRight.ph75 .textBox,
    .bottomRight.ph75 .textBox,
    .topLeft.ph10 .textBox,
    .centerLeft.ph10 .textBox,
    .bottomLeft.ph10 .textBox,
    .topRight.ph10 .textBox,
    .centerRight.ph10 .textBox,
    .bottomRight.ph10 .textBox,
    .topLeft.ph125 .textBox,
    .centerLeft.ph125 .textBox,
    .bottomLeft.ph125 .textBox,
    .topRight.ph125 .textBox,
    .centerRight.ph125 .textBox,
    .bottomRight.ph125 .textBox,
    .topLeft.ph15 .textBox,
    .centerLeft.ph15 .textBox,
    .bottomLeft.ph15 .textBox,
    .topRight.ph15 .textBox,
    .centerRight.ph15 .textBox,
    .bottomRight.ph15 .textBox,
    .topLeft.ph175 .textBox,
    .centerLeft.ph175 .textBox,
    .bottomLeft.ph175 .textBox,
    .topRight.ph175 .textBox,
    .centerRight.ph175 .textBox,
    .bottomRight.ph175 .textBox,
    .topLeft.ph20 .textBox,
    .centerLeft.ph20 .textBox,
    .bottomLeft.ph20 .textBox,
    .topRight.ph20 .textBox,
    .centerRight.ph20 .textBox,
    .bottomRight.ph20 .textBox,
    .topLeft.ph225 .textBox,
    .centerLeft.ph225 .textBox,
    .bottomLeft.ph225 .textBox,
    .topRight.ph225 .textBox,
    .centerRight.ph225 .textBox,
    .bottomRight.ph225 .textBox,
    .topLeft.ph25 .textBox,
    .centerLeft.ph25 .textBox,
    .bottomLeft.ph25 .textBox,
    .topRight.ph25 .textBox,
    .centerRight.ph25 .textBox,
    .bottomRight.ph25 .textBox,  
    .topLeft.pv5 .textBox,
    .topCenter.pv5 .textBox,
    .topRight.pv5 .textBox,
    .bottomLeft.pv5 .textBox,
    .bottomCenter.pv5 .textBox,
    .bottomRight.pv5 .textBox,
    .topLeft.pv75 .textBox,
    .topCenter.pv75 .textBox,
    .topRight.pv75 .textBox,
    .bottomLeft.pv75 .textBox,
    .bottomCenter.pv75 .textBox,
    .bottomRight.pv75 .textBox,
    .topLeft.pv10 .textBox,
    .topCenter.pv10 .textBox,
    .topRight.pv10 .textBox,
    .bottomLeft.pv10 .textBox,
    .bottomCenter.pv10 .textBox,
    .bottomRight.pv10 .textBox,
    .topLeft.pv125 .textBox,
    .topCenter.pv125 .textBox,
    .topRight.pv125 .textBox,
    .bottomLeft.pv125 .textBox,
    .bottomCenter.pv125 .textBox,
    .bottomRight.pv125 .textBox { 
        margin: auto;
    }

    .herobanner .inside.hxs,
    .herobanner .inside.hs,
    .herobanner .inside.hm,
    .herobanner .inside.hl,
    .herobanner .inside.hxl,
    .herobanner .inside.h2xl,
    .herobanner .inside.h3xl,
    .herobanner .inside.h4xl,
    .herobanner .inside.h5xl {
        padding-top: 8rem;
        padding-bottom: 8rem;
    }

    .media--left, .media--right {
        flex-wrap: wrap;
        gap: 1.5rem;
    }
    .media--right .rte {
        flex: 0 0 100%;
    }

    .media--right figure {
        flex: 0 0 auto;
        margin: 0 auto;
    }



    .fineuploader-container {
        width: 100% !important;
    }    
}

@media screen and (max-width: 497px) {
    .headTop .inner, .headMain .inner,
    .boxWrapper.wstandard .box-inside,
    .boxWrapper.wsmall .box-inside, 
    footer .inside {
        padding-inline: 1rem;
    }

    .logo {
        width: 12.5rem;
        margin-top: 0 !important;
    }


    .textBox {
        margin: auto;
        max-width: 70%;
    }

    #logoIcon, .naviMeta a::before, .naviMeta strong::before {
        display: none;
    }
 
    .navipath, .mod_breadcrumb {
        display: none;
     }
    
    .naviMeta a, .naviMeta strong {
        padding-inline: 0.25rem;
    }
    .widget-select label, .widget-text label, .widget-textarea label {
        display: none;
    }
    #jobForm .formRow {
        flex-direction: column;
    }

    .content-gallery--cols-2 ul,
    .content-gallery--cols-3 ul,      
    .content-gallery--cols-4 ul,
    .content-gallery--cols-5 ul,
    .content-gallery--cols-6 ul, 
    .content-gallery--cols-7 ul, 
    .content-gallery--cols-8 ul, 
    .content-gallery--cols-9 ul, 
    .content-gallery--cols-10 ul, 
    .content-gallery--cols-11 ul, 
    .content-gallery--cols-12 ul {
          grid-template-columns: 1fr;
    }
 }