/*-------------------------------------------------------------------------------------------*/
@media (min-width:1920px){

    img{width:100%;height:auto;}

    #page-header .logo img{width:auto;}

    .flx_headerblock .content{width:35%;}

    .flx_benefits .benefits .item .icon{width:50%;}

}
/*-------------------------------------------------------------------------------------------*/
@media (max-width:1600px){

    .container{padding:0 30px;}

    h1{font-size:500%;}

    #page-header .mainheader #toppermenu .menu li{margin:0 35px;}

    .flx_headerblock .content{width:60%;top:10%;}
    .flx_headerblock.mitfarbe{height:250px;}

    .flx_werteblock .gridwrapper .item .schlagwortwrapper .schlagwort{font-size:175%;}
    .flx_werteblock .gridwrapper .item .schlagwortwrapper .topline{font-size:125%;}
    .flx_werteblock .gridwrapper .item .schlagwortwrapper .subline{font-size:125%;}

    .flx_jobs .item .inner .btn{margin-top:0;}

    #karrieresingle .heroimage .content{max-width:60%;}

}
/*-------------------------------------------------------------------------------------------*/
@media (max-width:1480px){

    h1{font-size:450%;}
    h2{font-size:275%;}

    #page-header .mainheader #toppermenu .menu li{margin:0 20px;}

    .flx_headerblock .content .headerbox .subline{font-size:275%;}

    .flx_textblock.mitslider .sliderwrapper .slider .owl-controls{width:50%;}

    .flx_serviceblock .services .item .headline{font-size:200%;}
    .flx_serviceblock .services .item:hover .headline{font-size:210%;}
    
    .flx_karriereteaser .content{width:50%;}

    .flx_werteblock .gridwrapper .item .schlagwortwrapper .schlagwort{font-size:150%;}
    .flx_werteblock .gridwrapper .item .schlagwortwrapper .topline{font-size:100%;}
    .flx_werteblock .gridwrapper .item .schlagwortwrapper .subline{font-size:100%;}    

}
/*-------------------------------------------------------------------------------------------*/
@media (max-width:1199px){

    .inhaltsbloecke{margin-top:75px;}

    h1{font-size:375%;}
    h2{font-size:200%;}

    #page-header .mainheader #toppermenu .menu li{margin:0 10px;}
    #page-header .mainheader #toppermenu .menu li.btn{padding:0 30px 5px 30px;}

    .flx_headerblock .content{width:calc(100% - 60px);bottom:10%;top:unset;}

    .flx_serviceblock .services .item img{height:200px;}
    .flx_serviceblock .services .item .headline{font-size:175%;}
    .flx_serviceblock .services .item:hover .headline{font-size:185%;}

    .flx_karriereteaser .content{width:100%;position:relative;background:var(--main);padding:25px;margin-top:-100px;transform: unset;top:unset;}

    .flx_maerkte .item .inner .adressbox{display:block;}
    .flx_maerkte .item .inner .adressbox .ort{width:100%;display:block;}
    .flx_maerkte .item .inner .adressbox .adresse{width:100%;display:block;text-align:left;padding-left:25px;font-size:90%;}

    /* .flx_werteblock .gridwrapper .griditem1{grid-column: 1/span 10;grid-row: 1/span 1;}
    .flx_werteblock .gridwrapper .griditem2{grid-column: 11/span 10;grid-row: 1/span 1;}
    .flx_werteblock .gridwrapper .griditem3{grid-column: 11/span 10;grid-row: 2/span 1;}
    .flx_werteblock .gridwrapper .griditem4{grid-column: 1/span 10;grid-row: 2/span 1;}
    .flx_werteblock .gridwrapper .griditem5{grid-column: 11/span 10;grid-row: 3/span 1;}
    .flx_werteblock .gridwrapper .griditem6{grid-column: 1/span 10;grid-row: 3/span 1;}
    .flx_werteblock .gridwrapper .griditem7{grid-column: 1/span 10;grid-row: 4/span 1;}
    .flx_werteblock .gridwrapper .griditem8{grid-column: 11/span 10;grid-row: 4/span 1;}
    .flx_werteblock .gridwrapper .griditem9{grid-column: 1/span 10;grid-row: 5/span 1;}
    .flx_werteblock .gridwrapper .griditem10{grid-column: 11/span 10;grid-row: 5/span 1;}
    .flx_werteblock .gridwrapper .griditem11{grid-column: 11/span 10;grid-row: 6/span 1;}
    .flx_werteblock .gridwrapper .griditem12{grid-column: 1/span 10;grid-row: 6/span 1;} */

    .flx_werteblock .gridwrapper .griditem1{grid-column: 1/span 10;grid-row: 1/span 1;}
    .flx_werteblock .gridwrapper .griditem2{grid-column: 11/span 10;grid-row: 1/span 1;}
    .flx_werteblock .gridwrapper .griditem3{grid-column: 11/span 10;grid-row: 2/span 1;}
    .flx_werteblock .gridwrapper .griditem4{grid-column: 1/span 10;grid-row: 2/span 1;}
    .flx_werteblock .gridwrapper .griditem5{grid-column: 1/span 10;grid-row: 3/span 1;}
    .flx_werteblock .gridwrapper .griditem6{grid-column: 11/span 10;grid-row: 3/span 1;}
    .flx_werteblock .gridwrapper .griditem7{grid-column: 11/span 10;grid-row: 4/span 1;}
    .flx_werteblock .gridwrapper .griditem8{grid-column: 1/span 10;grid-row: 4/span 1;}
    .flx_werteblock .gridwrapper .griditem9{grid-column: 1/span 10;grid-row: 5/span 1;}
    .flx_werteblock .gridwrapper .griditem10{display:block;grid-column: 11/span 10;grid-row: 5/span 1;}
    /* .flx_werteblock .gridwrapper .griditem11{grid-column: 11/span 10;grid-row: 5/span 1;}
    .flx_werteblock .gridwrapper .griditem12{grid-column: 1/span 10;grid-row: 6/span 1;} */

    .flx_benefits .benefits .item .beschreibung{width:100%;}

    .flx_mitarbeiterstimmen .mitarbeiter .inner{padding:75px;}

    #karrieresingle .heroimage .content{max-width:70%;}
    #karrieresingle .inhaltswrapper .formular .inner{padding:25px;margin-top:-100px;}
    #karrieresingle .inhaltswrapper .formular .inner .headline{font-size:275%;}
}
/*-------------------------------------------------------------------------------------------*/
@media (max-width:991px) {

    div[class^="flx_"], div[class*="flx_"]{padding:50px 0;}
    .inhaltsbloecke{margin-top:60px;}
    .kassenzettel_offnungszeiten{right:30px;}

    #page-header.bottom{padding:10px 0 15px;}
    #page-header.bottom .logo img{max-width:100%;}

    #page-header .mainheader{padding:10px 0 15px;}
    #page-header .mainheader #toppermenu{display:none;}
    #page-header .mainheader #toppermenu.active{display:block;}

    #page-header .mainheader #toppermenu .menu{position: fixed;top: 0;right: 0;bottom: 0;left: 50%;background: var(--main);align-content: center;padding: 50px;}
    #page-header .mainheader #toppermenu .menu li{display:block;text-align:center;margin:35px 0;}

    #page-header .mainheader .burgerbutton{display:block;}
    #page-header .mainheader .burgerbutton.active span:nth-child(1){transform:rotate(45deg);margin-top:12px;transition:all .3s ease;}
    #page-header .mainheader .burgerbutton.active span:nth-child(2){opacity:0;transition:all .3s ease;}
    #page-header .mainheader .burgerbutton.active span:nth-child(3){transform:rotate(-45deg);margin-top:-26px;transition:all .3s ease;}

    .flx_headerblock.mitvideo::before{background: linear-gradient(0deg,rgba(33, 33, 33, 1) 0%, rgba(33, 33, 33, 0.80) 50%, rgba(33, 33, 33, 0) 90%);}

    .flx_textblock .text{order:1;}
    .flx_textblock .bild{order:2;margin-top:25px;}
    .flx_textblock .sliderwrapper{order:2;}
    .flx_textblock.mitslider .sliderwrapper .slider{width:100vw;left:0;}

    .flx_maerkte .item{margin-bottom:25px;}

    .flx_timeline ul.timeline-list::before, .flx_timeline ul.timeline-list li::before{left:0;}
    .flx_timeline ul.timeline-list li::after, .flx_timeline ul.timeline-list li:nth-child(2n)::after{left:5%;z-index:-1;}
    .flx_timeline ul.timeline-list li .timeline_content, .flx_timeline ul.timeline-list li:nth-child(2n) .timeline_content{float:left;width:calc(100% - 5%);margin:5%;text-align:left;}

    .flx_jobs .headerbox{width:100%;}
    .flx_benefits .headerwrapper{width:100%;}
    .flx_mitarbeiterstimmen .headerwrapper{width:100%;}

    .flx_tastingblock .anmeldenpopup{width:95%;}
    
    #karrieresingle .heroimage .content{width:100%}
    #karrieresingle .inhaltswrapper .content{padding-bottom:25px;}
    #karrieresingle .inhaltswrapper .content .inhalt{margin:25px 0;}
    #karrieresingle .inhaltswrapper .formular .inner{margin-top:0;}

    #page-footer .bottom .copyright .slogan{order:1;}
    #page-footer .bottom .copyright .rechtliches{order:2;text-align:center;margin:15px 0;}
    #page-footer .bottom .copyright .copy{order:3;text-align:center;}

}
/*-------------------------------------------------------------------------------------------*/
@media (max-width:767px) {

    h1{font-size:325%;}

    .kassenzettel_offnungszeiten{width:250px;}
    .kassenzettel_offnungszeiten .inner .headline{font-size:125%;}
    .kassenzettel_offnungszeiten .inner .zeiten .item p{font-size:75%;}

    #page-header .logo img{position:relative;z-index: 5;}
    #page-header .mainheader .burgerbutton{top:10px;}
    #page-header .mainheader #toppermenu .menu{left:25%;}

    .flx_headerblock.mitbild::before, .flx_headerblock.mitvideo:before{display:none;}
    .flx_headerblock.mitvideo video{height:40vh}
    .flx_headerblock .content{position:unset;padding:25px 0;}
    .flx_headerblock .content .headerbox .headline, .flx_headerblock .content .headerbox .subline, .flx_headerblock .content .headerbox p{color:var(--main);}
    .flx_headerblock .content .headerbox .subline{font-size:200%;margin-bottom:15px;}
    .flx_headerblock.mitfarbe .content .headerbox .headline{margin-bottom:25px;font-size:325%;}
    .flx_headerblock.mitfarbe .content .headerbox .headline, .flx_headerblock.mitfarbe .content .headerbox .subline, .flx_headerblock.mitfarbe .content .headerbox p{color:var(--white);}

    .flx_tastingblock .anmeldenpopup .inner{padding:50px 25px;}
    .flx_tastingblock .anmeldenpopup .inner .headline{font-size:250%;}
    .flx_tastingblock .anmeldenpopup .closepopup{width:50px;height:50px;font-size:150%;}

    .flx_mitarbeiterstimmen .mitarbeiter .slider .owl-controls{width:75%;}

    .flx_galerieblock .gridwrapper{grid-auto-rows:250px;}
    .flx_galerieblock .gridwrapper .item:nth-child(6n+1), .flx_galerieblock .gridwrapper .item:nth-child(6n+2), .flx_galerieblock .gridwrapper .item:nth-child(6n+3), .flx_galerieblock .gridwrapper .item:nth-child(6n+4), .flx_galerieblock .gridwrapper .item:nth-child(6n+5), .flx_galerieblock .gridwrapper .item:nth-child(6n+6){grid-column: span 6;}

    .flx_galerieblock .owl-controls .owl-nav{gap:250px;margin-top:15px;}
    .flx_galerieblock .owl-controls .owl-nav .owl-prev, .flx_galerieblock .owl-controls .owl-nav .owl-next{width:30px;height:30px;}
    .flx_galerieblock .owl-controls .owl-dots{margin-top:-25px;}

    #karrieresingle{margin-top:60px;}
    #karrieresingle .heroimage{height:350px;}
    #karrieresingle .heroimage .content{max-width:90%;bottom:5%;}
    #karrieresingle .heroimage .content h1{font-size:275%;}
    #karrieresingle .heroimage .content > span{padding:5px 20px;margin-right:0;}

    #karrieresingle .backbtn{left:unset;right:30px;bottom:75px;}

    .flx_jobs .slider .owl-controls{width:100%;}

}
/*-------------------------------------------------------------------------------------------*/
@media (max-width:575px) {

    div[class^="flx_"], div[class*="flx_"]{padding:25px 0;}

    h1{font-size:275%;}
    h2{font-size:175%;}

    .container{padding:0 20px;}

    #page-header .mainheader #toppermenu .menu{left:0%;}
    #page-header .mainheader .burgerbutton{top:-40px;right:20px;}

    .flx_werteblock .gridwrapper .item{height:175px;}
    .flx_werteblock .gridwrapper .item .schlagwortwrapper .topline_schlagwort{font-size:100%;}
    .flx_werteblock .gridwrapper .item .schlagwortwrapper .schlagwort{font-size:125%;}

    .flx_textblock.mitslider .sliderwrapper .slider .owl-controls{width:calc(100% - 10px);}

    .flx_textblock .buttonwrapper .btn{width:100%;}

    .flx_headerblock.mitfarbe .content .headerbox .headline{font-size:275%;}

    .flx_timeline ul.timeline-list li .timeline_content img{margin-top:25px;}

    /* .flx_werteblock .gridwrapper .griditem1{grid-column: 1/span 20;grid-row: 1/span 1;}
    .flx_werteblock .gridwrapper .griditem2{grid-column: 1/span 20;grid-row: 2/span 1;}
    .flx_werteblock .gridwrapper .griditem3{grid-column: 1/span 20;grid-row: 3/span 1;}
    .flx_werteblock .gridwrapper .griditem4{grid-column: 1/span 20;grid-row: 4/span 1;}
    .flx_werteblock .gridwrapper .griditem5{grid-column: 1/span 20;grid-row: 6/span 1;}
    .flx_werteblock .gridwrapper .griditem6{grid-column: 1/span 20;grid-row: 5/span 1;}
    .flx_werteblock .gridwrapper .griditem7{grid-column: 1/span 20;grid-row: 8/span 1;}
    .flx_werteblock .gridwrapper .griditem8{grid-column: 1/span 20;grid-row: 7/span 1;}
    .flx_werteblock .gridwrapper .griditem9{grid-column: 1/span 20;grid-row: 9/span 1;}
    .flx_werteblock .gridwrapper .griditem10{grid-column: 1/span 20;grid-row: 10/span 1;}
    .flx_werteblock .gridwrapper .griditem11{grid-column: 1/span 20;grid-row: 11/span 1;}
    .flx_werteblock .gridwrapper .griditem12{grid-column: 1/span 20;grid-row: 12/span 1;} */

    .flx_werteblock .gridwrapper .griditem1{grid-column: 1/span 20;grid-row: 1/span 1;}
    .flx_werteblock .gridwrapper .griditem2{grid-column: 1/span 20;grid-row: 2/span 1;}
    .flx_werteblock .gridwrapper .griditem3{grid-column: 1/span 20;grid-row: 3/span 1;}
    .flx_werteblock .gridwrapper .griditem4{grid-column: 1/span 20;grid-row: 4/span 1;}
    .flx_werteblock .gridwrapper .griditem5{grid-column: 1/span 20;grid-row: 5/span 1;}
    .flx_werteblock .gridwrapper .griditem6{grid-column: 1/span 20;grid-row: 6/span 1;}
    .flx_werteblock .gridwrapper .griditem7{grid-column: 1/span 20;grid-row: 7/span 1;}
    .flx_werteblock .gridwrapper .griditem8{grid-column: 1/span 20;grid-row: 8/span 1;}
    .flx_werteblock .gridwrapper .griditem9{grid-column: 1/span 20;grid-row: 9/span 1;}
    .flx_werteblock .gridwrapper .griditem10{display:none;}
    .flx_werteblock .gridwrapper .griditem11{grid-column: 1/span 20;grid-row: 11/span 1;}
    .flx_werteblock .gridwrapper .griditem12{grid-column: 1/span 20;grid-row: 12/span 1;}

    .flx_headerblock .content .headerbox .subline{font-size:150%;}
    .flx_headerblock .content .headerbox .subline::after{width:35px;height:35px;top:0;right:-50px;}

    #karrieresingle .heroimage{height:auto;}
    #karrieresingle .heroimage::before{display:none;}
    #karrieresingle .heroimage .content{position:unset;}
    #karrieresingle .heroimage .content h1{font-size:250%;color:var(--main);}
    #karrieresingle .heroimage .content > span{display:block;width:max-content;margin-bottom:15px;}

    .flx_headerblock .content{width:100%;}
    .flx_headerblock .content .headerbox .subline::after{width:25px;height:25px;top:-10px;right:-20px;}
    
    .flx_benefits .benefits .item .icon{max-width:70%;}
    .flx_benefits .benefits .item .beschreibung{font-size:80%;}

    .flx_karriereteaser .bildwrapper{height:250px;}
    .flx_karriereteaser .bildwrapper img{height:100%;object-fit:cover;object-position:right;}

    .flx_galerieblock.filter .kategorie .btn{padding:8px 35px 10px 35px;margin-top:10px;}

    .flx_galerieblock .gridwrapper{grid-auto-rows:200px;}
    /* .flx_galerieblock .gridwrapper .item:nth-child(6n+1), .flx_galerieblock .gridwrapper .item:nth-child(6n+2), .flx_galerieblock .gridwrapper .item:nth-child(6n+3), .flx_galerieblock .gridwrapper .item:nth-child(6n+4), .flx_galerieblock .gridwrapper .item:nth-child(6n+5), .flx_galerieblock .gridwrapper .item:nth-child(6n+6){grid-column: span 12;} */

    #karrieresingle .inhaltswrapper .formular .inner .headline{font-size:225%;}

    .flx_textblock.mitslider .sliderwrapper .slider .owl-controls .owl-nav{padding:0 35px;}

    #page-footer .socials{top:-50px;right:25px;}
    #page-footer .socials a{margin:10px 0;}

}
/*-------------------------------------------------------------------------------------------*/
@media (max-width:400px) {

}