:root{
    --yellow:       #eaaf21;
    --black:        #0C0C0D;
    --grey:         #D9D9D9;
    --light-grey:   #F2F2F2;
    --white:        #FFFFFF;
}

body,html,*{font-size: 16px;font-family: 'Montserrat';font-weight: 400;line-height: 1.8;color: var(--black);}
html{scroll-behavior: smooth;}

a{color: var(--black);text-decoration: none;font-size: 100%;transition: all .3s ease;}
a:hover{text-decoration: none;color: var(--yellow);transition: all .3s ease;}
a:focus{border:none;outline: none;}
*:focus-visible {outline: none;}

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

.headline{font-size: 200%;font-weight: 600;text-align: left;display: block;color: var(--black);margin-bottom: 20px;line-height: 1.2;}
.headline span{font-size: 100%;font-weight: 500;color: var(--yellow);}
.topline{position: relative;font-weight: 500;font-size: 100%;display:block;color: var(--black);margin-bottom: 20px;width: fit-content;background-color: var(--yellow);padding: 5px 20px;border-radius: 5px;}

.btn{position: relative;padding: 15px 50px 15px 20px;background: var(--yellow);color: var(--black);background-image: url('media/icons/right-arrow.svg');background-size: 13%;background-repeat: no-repeat;background-position: center right 15px;transition: all .3s ease;line-height: 1;text-align: center;border-radius: 30px;font-size: 90%;font-weight: 500;}
.btn:hover{background-position: center right 13px;}
.ctablock{display: flex;gap: 20px;margin-top: 20px;}

strong{font-weight: 600;font-size: 100%;}

.container{max-width: 1600px;}

/*------------------------------------Header-------------------------------------------------*/

#page-header{background-color: #ffffff;position: fixed;width: 100%;z-index: 1000;padding: 10px 0;}

#page-header .container{display: flex;justify-content: space-between;align-items: center;}

#page-header .topbar{display: flex;width: 100%;justify-content: space-between;align-items: center;}

#page-header .topbar .logo{flex: 0 0 auto;}
#page-header .topbar .logo img{height: 70px;width: auto;}

#page-header .topbar .navigation{flex: 1;display: flex;justify-content: center;}

#page-header .topbar .navigation .main-menu li{list-style: none;padding: 0;position: relative;}
#page-header .topbar .navigation .main-menu li:hover::after{content: '';background-color: var(--yellow);height: 3px;border-radius: 50px;width: 100%;position: absolute;left: 0;right: 0;bottom: 0;}
#page-header .topbar .navigation .main-menu li:hover a{color: var(--black);}
#page-header .topbar .navigation .main-menu li a{text-decoration: none;}
#page-header .topbar .navigation .main-menu li.current_page_item::before{content: '';background-color: var(--yellow);height: 3px;border-radius: 50px;width: 100%;position: absolute;left: 0;right: 0;bottom: 0;}
#page-header .topbar .navigation .main-menu li.current_page_item a{font-weight: 500;}

/* #page-header .topbar .navigation .menu .menu-item-has-children::after{content: ''; display: block; width: 20px; height: 20px; background: url('media/icons/down-arrow.svg')no-repeat;background-size: 100%;width: 25px;height: 25px;position: absolute;right: 0px;top: 5px;transition: 0.3s;} */

#page-header .topbar .navigation .menu{display: flex;gap: 50px;margin: 0;}

#page-header .topbar .navigation .menu .sub-menu{display: none;}
#page-header .topbar .navigation .menu .menu-item-has-children:hover .sub-menu{display: block;position: absolute; width: 200px; background-color: #ffffff;padding: 10px 20px;box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;}
#page-header .topbar .navigation .menu .menu-item-has-children:hover .sub-menu li{margin-bottom: 10px; width: fit-content;}

#page-header .topbar .extras{flex: 0 0 auto;display: flex;align-items: center;gap: 15px;}

#page-header .topbar .extras #kontakt{border: solid 1px var(--black);border-radius: 50px;padding: 5px 15px;transition: 0.3s;}
#page-header .topbar .extras #kontakt:hover{background-color: var(--yellow);border-color: var(--yellow);color: var(--black);transition: 0.3s;}

#menuburgerbutton{display: none;flex-direction: column;cursor: pointer;}
#menuburgerbutton span{width: 25px;height: 3px;background-color: #333;margin: 4px 0;transition: 0.4s;}

#page-header.bottom{position: fixed;top: 0;left: 0;right: 0;box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;}

#page-header.bottom .logo object{max-width: 50%;}
#page-header.bottom .header-top{display: none;}

#page-header #menuburgerbutton{display: none;width:40px;height: 40px;transition: .5s ease-in-out;  cursor: pointer;z-index: 100;}
#page-header #menuburgerbutton span{margin: 8px 0; display: block;height: 3px;width: 100%;background: var(--black);opacity: 1;-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-o-transform: rotate(0deg);transform: rotate(0deg);-webkit-transition: .25s ease-in-out;-moz-transition: .25s ease-in-out;-o-transition: .25s ease-in-out;transition: .25s ease-in-out;}

#page-header #menuburgerbutton.open span:nth-child(0n+1) {-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg);margin-top: 18px;background-color:var(--black);}
#page-header #menuburgerbutton.open span:nth-child(0n+2){display: none;}
#page-header #menuburgerbutton.open span:nth-child(0n+3) {-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-o-transform: rotate(-45deg);transform: rotate(-45deg);margin-top: -10px;background-color:var(--black);}

/*------------------------------------Footer-------------------------------------------------*/

#page-footer{background: var(--black);padding: 50px 0 20px 0;position: relative;}
#page-footer p, #page-footer a, #page-footer .headline{color: #fff;}
#page-footer p{max-width:75%;}
#page-footer .headline{font-size: 130%;text-transform: none;margin-bottom: 10px;color: var(--yellow);}
#page-footer li{padding: 0;}
#page-footer a:hover{color: var(--yellow);}
#page-footer .backtotop{position: absolute;right: 125px;transform: rotate(-90deg);max-width: 25px;cursor: pointer;}
#page-footer .about .col-xl-4:first-child{position: relative;}

#page-footer .kontaktmoeglichkeiten{padding: 0;}

#page-footer .rechtliches ul{padding: 0;}

#page-footer .about .col-xl-4:last-child img{width: 150px;opacity: 0.5;margin-left: 1.5rem;margin-top: 5%;}
#page-footer .about .socialmedia{display: flex;gap: 20px;margin-top: 20px;}

#page-footer .footer-bottom{margin-top: 50px;padding-top: 20px;border-top: solid 1px rgba(255, 255, 255, 0.2);}
#page-footer .footer-bottom .links{text-align: right;}

#page-footer .backtotop{position:absolute;right:50px;top:50px;max-width:40px;margin:0;transition:0.3s;}
#page-footer .backtotop img{max-width:100%;margin:0;padding: 0;}

/*------------------------------ACF-Flexible-Content-----------------------------------------*/

div[class^="flx_"], div[class*="flx_"]{margin-bottom: 80px;position: relative;}

.inhaltsbloecke{padding-top: 90px;}

.flx_topheader .headline{text-align: center;font-size: 250%;}

.flx_topheader.hintergrundbild::before{content: '';background-color: #00000081;width: 100%;height: 100%;position: absolute;top: 0;right: 0;bottom: 0;left: 0;}
.flx_topheader.hintergrundbild .contentblock{position: relative;z-index: 1;display: flex;flex-direction: column;align-items: center;max-width: 80%;margin: 0 auto;}
.flx_topheader.hintergrundbild .contentblock .headline, .flx_topheader.hintergrundbild .contentblock p{color: var(--white);}

.flx_topheader.text{min-height: 50vh;display: flex;align-items: center;text-align: center;}
.flx_topheader.text .content{padding-top: 100px;}
.flx_topheader.text .content .headlinebox .headline{font-size: 250%;font-weight: 600;margin-bottom: 20px; text-align: center;}
.flx_topheader.text .content .headerbild{margin: 30px 0;}
.flx_topheader.text .content .headerbild img{border-radius: 10px;}
.flx_topheader.text .content .banner{margin-bottom: 30px;}
.flx_topheader.text .content .banner img{max-width: 25%;}
.flx_topheader.text .content .cta{display: flex;justify-content: center;align-items: center;gap: 20px;}
.flx_topheader.text .content .cta .buttonblock{margin: 0;display: flex;gap: 20px;align-items: center;}
.flx_topheader.text .content .cta .ansprechpartner{display: flex;align-items: center;gap: 10px;}
.flx_topheader.text .content .cta .ansprechpartner .personbild img{max-width: 45px;}
.flx_topheader.text .content .cta .ansprechpartner .personinfos{text-align: left;}
.flx_topheader.text .content .cta .ansprechpartner .personinfos span{display: block;line-height: 1.2;}

.flx_textblock .headline{text-align: left!important;}

.flx_textblock.text-bild .text{display: flex;align-items: center;}

.flx_textblock.text-text .headline{text-align: start; font-weight: 400;}
.flx_textblock.text-text .inner{text-align: start;}
.flx_textblock.text-text .cta .btn{margin-right: 15px; margin-bottom: 15px; border: var(--black) 2px solid;}
.flx_textblock.text-text .cta .btn:nth-child(2n){filter: invert(100%); background-color: black; border: white 2px solid;}

.flx_textblock.text-bild{position: relative;}
.flx_textblock.text-bild .inner{text-align: left;}
.flx_textblock.text-bild .bild .badge{position: absolute;top: -50px;right: 200px;}
.flx_textblock.text-bild .bild .badge img{max-width: 70%;}

.flx_teaser.klein{background-color: var(--black);padding: 50px 0;}
.flx_teaser.klein .item{padding: 0 5px;}
.flx_teaser.klein .item .inner{text-align: center;background: #101010;padding: 60px;transition: 0.3s;}
.flx_teaser.klein .item .inner:hover{background: var(--yellow);transition: 0.3s;}
.flx_teaser.klein .item .inner span{font-size: 120%;font-weight: 600;text-transform: uppercase;color: #fff;}
.flx_teaser.klein .item .inner:hover span{color: var(--black);}

.flx_teaser.tabs .inhalt {margin-bottom: 50px;}
.flx_teaser.tabs .item {padding: 20px;}
.flx_teaser.tabs .item .inner {background-color: var(--light-grey); height: 100%; padding: 30px; border-radius: 15px; box-shadow: 0 8px 20px rgba(0,0,0,0.1); transition: transform 0.3s, box-shadow 0.3s;}
.flx_teaser.tabs .item .inner:hover {transform: translateY(-5px); box-shadow: 0 12px 30px rgba(0,0,0,0.15);}
.flx_teaser.tabs .item .headline {font-size: 130%; width: fit-content; padding: 0 10px; margin-bottom: 20px; background-color: var(--yellow); border-radius: 10px; line-height: 1.8;}
.flx_teaser.tabs .item .beschreibung p {margin-bottom: 0; font-weight: 400;}

.flx_teaser.kachelnxl .item{position: relative;}
.flx_teaser.kachelnxl .item::before{content: '';background-color: #000000a8;width: 100%;height: 100%;position: absolute;top: 0;right: 0;bottom: 0;left: 0;transition: 0.3s;}
.flx_teaser.kachelnxl .item:hover::before{background-color: var(--black)5d;transition: 0.3s;}
.flx_teaser.kachelnxl .item a{display: block;height: 100%;}
.flx_teaser.kachelnxl .item .inner{display: flex;align-items: end;justify-content: flex-start;height: 100%;position: relative;z-index: 1;padding: 0 0 40px 40px;}
.flx_teaser.kachelnxl .item .inner .headline{color: #ffffff;font-weight: 400;margin: 0;}

.flx_logos .headline{text-align: center;margin-bottom: 50px;}
.flx_logos .slider .owl-stage{display: flex;align-items: center;}
.flx_logos .slider .item img{max-width: 60%;margin: 0 auto;}
.flx_logos .slider .owl-controls .owl-nav .owl-prev{content: '';background: url('media/icons/double-chevron-grey.png')no-repeat;background-size: 100%;width: 20px;height: 20px;display: block;position: absolute;left: -70px;top: 30px;transform: rotate(180deg);}
.flx_logos .slider .owl-controls .owl-nav .owl-next{content: '';background: url('media/icons/double-chevron-grey.png')no-repeat;background-size: 100%;width: 20px;height: 20px;display: block;position: absolute;right: -70px;top: 30px;}
.flx_logos .swiper-wrapper{display: flex;align-items: center;}
.flx_logos .item img{display: block;margin: 0 auto;max-width: 60%;}
.flx_logos .swiper-button-next, .flx_logos .swiper-button-prev{color: var(--black);}

.flx_benefits p{max-width: 80%;margin: 0 auto 30px;text-align: center;}
.flx_benefits .benefit{text-align: center;}
.flx_benefits .benefit p{margin-bottom: 0;margin-top: 10px;line-height: 1.4;font-weight: 600;}
.flx_benefits .benefit img{max-width: 90px;}

.flx_kontaktformular .text .ansprechpartner{margin-top: 30px;}
.flx_kontaktformular .text .ansprechpartner .personbild{margin-bottom: 10px;}
.flx_kontaktformular .text .ansprechpartner .kontaktdaten .name{display: block;font-size: 130%;font-weight: 600;margin-bottom: 5px;}
.flx_kontaktformular .text .ansprechpartner .kontaktdaten .telefon::before{content: '';background: url('media/icons/phone.png')no-repeat;background-size: 100%;width: 15px;height: 15px;display: block;position: absolute;left: 0;top: 6px;}
.flx_kontaktformular .text .ansprechpartner .kontaktdaten .mail::before{content: '';background: url('media/icons/mail.png')no-repeat;background-size: 100%;width: 15px;height: 15px;display: block;position: absolute;left: 0;top: 6px;}
.flx_kontaktformular .text .ansprechpartner .kontaktdaten a{display: block;position: relative;padding-left: 25px;}
.flx_kontaktformular .formular .topper{display: block;margin-bottom: 5px;}
.flx_kontaktformular .formular input{border-radius: 0;border: solid 1px #d1d1d1;padding: 10px;margin-bottom: 20px;width: 100%;}
.flx_kontaktformular .formular select{border-radius: 0;border: solid 1px #d1d1d1;padding: 10px;margin-bottom: 20px;width: 100%;background: #fff;}
.flx_kontaktformular .formular textarea{border-radius: 0;border: solid 1px #d1d1d1;padding: 10px;width: 100%;}
.flx_kontaktformular .formular .datenschutz{margin: 20px 0;}
.flx_kontaktformular .formular .submitbox .btn{margin: 0;padding: 15px 30px;border: none;}
.flx_kontaktformular .formular .datenschutz input{width: 15px;margin-bottom: 0;}
.flx_kontaktformular .formular .datenschutz p{display: inline;}
.flx_kontaktformular .formular .pflicht{margin-top: 20px;}

.flx_kontaktformular.ankauf{margin-bottom: 50px!important;}
.flx_kontaktformular.ankauf .formular .kontakt{padding-right: 100px;}
.flx_kontaktformular.ankauf .formular .text{margin-bottom: 50px;}
.flx_kontaktformular.ankauf .formular .uploadbereich{margin-top: 30px;}
.flx_kontaktformular.ankauf .formular .uploadbereich .headline{font-size: 100%;text-transform: none;margin-bottom: 5px;}
.flx_kontaktformular.ankauf .formular .uploadbereich input{border: none;padding: 10px 0;margin: 0;}
.flx_kontaktformular.ankauf .formular .ansprechpartner{margin-bottom: 50px;}
.flx_kontaktformular.ankauf .formular .ansprechpartner .personbild{margin-bottom: 10px;}
.flx_kontaktformular.ankauf .formular .ansprechpartner .kontaktdaten .name{display: block;font-size: 130%;font-weight: 600;margin-bottom: 5px;}
.flx_kontaktformular.ankauf .formular .ansprechpartner .kontaktdaten .telefon::before{content: '';background: url('media/icons/phone.png')no-repeat;background-size: 100%;width: 15px;height: 15px;display: block;position: absolute;left: 0;top: 5px;}
.flx_kontaktformular.ankauf .formular .ansprechpartner .kontaktdaten .mail::before{content: '';background: url('media/icons/mail.png')no-repeat;background-size: 100%;width: 15px;height: 15px;display: block;position: absolute;left: 0;top: 5px;}
.flx_kontaktformular.ankauf .formular .ansprechpartner .kontaktdaten a{display: block;position: relative;padding-left: 25px;}

.flx_kranmodelle .modelle{margin-top: 30px;}
.flx_kranmodelle .mietmodell .inner {padding: 30px 30px;background-color: #f5f5f5; text-align: left; height: 100%; position: relative; margin-bottom: 60px;border-radius: 15px;}
/* .flx_kranmodelle .mietmodell .inner:hover {transform: translateY(-5px); box-shadow: 0 12px 30px rgba(0,0,0,0.15);} */
.flx_kranmodelle .mietmodell .inner .kranbezeichnung {font-size: 130%; font-weight: 600; margin-bottom: 20px; display: block; background-color: var(--yellow); padding: 0 10px; border-radius: 10px; width: max-content;}
.flx_kranmodelle .mietmodell .inner .details {padding-top: 20px; border-top: solid 1px #000;}
.flx_kranmodelle .mietmodell .inner .buttonblock {position: absolute; bottom: 30px;}

/*-------------------------------Kontaktformular----------------------------------------------*/

.wpcf7 label{color: #A6A2B5; font-weight: 600; font-size: 90%; width: 90%; padding-bottom: 25px;}
.wpcf7 select{background-color: white;}
.wpcf7 textarea{height: 125px;}
.wpcf7 input, .wpcf7 optgroup, .wpcf7 select, .wpcf7 textarea{width: 100%; position: relative; z-index: 0; padding: 7px 10px; border: solid 2px var(--grey); border-radius: 10px;}
.wpcf7 input.wpcf7-submit{border: none;display: block; width: fit-content; background-color: var(--yellow); color: white; padding: 10px 100px; border-radius: 10px; font-size: 90%; font-weight: 500; transition: all 0.3s ease;}
.wpcf7 input[type="checkbox"]{width: auto;}

/*-------------------------------------------------------------------------------------------*/
@media (min-width:1921px){
    
    .flx_banner .text{padding-left: 440px;}
    .flx_banner .bild{height: 550px!important;}
    
    .flx_textblock.text-bild .bild .badge{right: 370px;}
    
}
/*-------------------------------------------------------------------------------------------*/
@media (max-width:1780px){
    
    .swiper-pagination{left:40px;}

    .flx_slider .item img {max-width:90%;margin:auto;}
    .flx_slider .owl-controls .owl-nav .owl-prev{left: 0px;top: 140px;}
    .flx_slider .owl-controls .owl-nav .owl-next{right: 0px;top: 140px;}
}
/*-------------------------------------------------------------------------------------------*/
@media (max-width:1480px){
    
    .headline{font-size: 300%;}
    
    #page-header #menuburgerbutton{display: block;}

    #page-header .topbar .navigation .menu{display: none;}
    #page-header .topbar .navigation .menu.open{display: block;position: fixed;top: 0;left: 0;right: 0;height: 100vh;background-color: #ffffff;padding: 100px 20px;z-index: 1;}
    #page-header .topbar .navigation .main-menu li{margin-bottom: 10px;}
    #page-header .topbar .navigation .menu.open li a{color: var(--black);font-size: 130%;}
    #page-header .topbar .navigation .menu.open li.menu-item-has-children::after{content: '';background: url('media/icons/down-arrow.svg')no-repeat;background-size: 100%;width: 25px;height: 25px;position: absolute;right: 0px;top: 5px;transition: 0.3s;}
    #page-header .topbar .navigation .menu.open li.menu-item-has-children.active::after{transform: rotate(180deg);transition: 0.3s;}
    #page-header .topbar .navigation .main-menu li:hover::after{left: unset;}

    #page-header .topbar .navigation .menu .menu-item-has-children:hover .sub-menu{display: none;}
    #page-header .topbar .navigation .main-menu li.menu-item-has-children .sub-menu{display: none;}
    #page-header .topbar .navigation .main-menu li.menu-item-has-children.active .sub-menu{display: block; position: relative; width: 100%; background-color: #f5f5f5; 
        box-shadow: none; border-radius: 10px;}

    #page-header .topbar .navigation .menu.open li.menu-item-has-children.active > .sub-menu{background-color: #f5f5f5;padding: 10px 30px; } 

    #page-header .topbar .extras #kontakt{display: none;}
    
    div[class^="flx_"], div[class*="flx_"]{margin-bottom: 100px;}
    
    .flx_topheader.slide .owl-controls .owl-dots{left: 40px;}
    .flx_topheader .suchleiste{max-width: 100%;}
    
    .flx_logos .slider .owl-controls .owl-nav .owl-prev{left: 10px;top: 40px;}
    .flx_logos .slider .owl-controls .owl-nav .owl-next{right: 10px;top: 40px;}
    
    .flx_banner .text{padding-top: 40px;padding-bottom: 40xp;padding-left: 35px;}
    
    .flx_textblock.bild-text-hintergrund .bild{height: 600px!important;}
    .flx_textblock.bild-text-hintergrund .textbox{padding-right: 0;}
    .flx_textblock.bild-text-hintergrund .textbox .inner{min-height: 600px;}
    
    .flx_kontaktformular .text .ansprechpartner .personbild{max-width: 50%;}

    .swiper-pagination{left:40px;}

    .fahrzeugslider .owl-prev{left: 10px!important;}
    .fahrzeugslider .owl-next{right: 10px!important;}
    
    #page-footer .about .truck_group{width:100%;}
    #page-footer .about .truck_group::after{display:none;}
    #page-footer .about .truck_group img{width:250px;margin-left:0;}
}
/*-------------------------------------------------------------------------------------------*/
@media (max-width:1199px){

    body, html, *{font-size: 14px;}
    
    .headline{font-size: 250%;}
    .container{padding: 0 30px;}

    #page-header .logo img{max-width: 100%;}
    
    div[class^="flx_"], div[class*="flx_"]{margin-bottom: 50px;}
    
    .flx_topheader{margin-bottom: 100px!important;}
    .flx_topheader .teaser{margin-top: 25px;}
    .flx_topheader .teaser .item .inner .headline{font-size: 150%;}
    .flx_topheader .teaser .item{max-width: 33%;flex: 0 0 33%;}
    
    .flx_bestseller .text{margin-bottom: 30px;}
    
    .flx_banner .text .item{max-width: 50%;flex: 0 0 50%;margin-bottom: 30px;}
    .flx_banner .bild{height: 600px!important;}
    
    .flx_textblock.text-bild .text{margin-bottom: 30px;}
    .flx_textblock.text-bild .bild .badge{top: 300px;}
    
    .flx_textblock.bild-text-hintergrund .textbox .inner{min-height: 450px;}
    
    .flx_kontaktformular .text .ansprechpartner .personbild{max-width: 100%;}
    
    .flx_bestseller .fahrzeuge{padding: 0 50px;}
    
    .flx_fahrzeugausgabe .item{max-width: 50%;flex: 0 0 50%;margin-bottom: 50px;}
    
    .flx_fahrzeugbau .item{max-width: 50%;flex: 0 0 50%;}
    .flx_fahrzeugbau .item .inner{min-height: 500px;}
    .flx_fahrzeugbau .item .inner .buttons .btn{margin-right: 0;}
    
    #fahrzeuge .fahrzeuginfos{padding-top: 0;padding-left: 20px;}
    #fahrzeuge .tabs{max-width: 100%;flex: 0 0 100%;}
    #fahrzeuge .inhaltsbloecke{margin-top: 50px;}
    
    #page-footer .col-md-2, #page-footer .col-md-4{max-width: 50%;flex: 0 0 50%;margin-bottom: 20px;}

    #wpcs_template_content{margin-top: 100px!important;}
    
}
/*-------------------------------------------------------------------------------------------*/
@media (max-width:991px){
    
    #page-header.bottom .logo img{max-width: 100%;}
    #page-header .logo object{max-width: 100%;}
    
    div[class^="flx_"], div[class*="flx_"]{margin-bottom: 50px;}
    
    .flx_topheader{margin-bottom: 50px!important;}
    .flx_topheader .teaser .item{max-width: 50%;flex: 0 0 50%;margin-bottom: 30px;}
    .flx_topheader .contentblock .headline{font-size: 350%;}
    
    .flx_topheader.schmal{height: 200px!important;}

    .flx_topheader.text .content .banner img{max-width: 35%;}
    
    .flx_textblock.bild-klein-text .bild{margin-bottom: 30px;}
    .flx_textblock.bild-klein-text .bild, .flx_textblock.bild-klein-text .text{max-width: 100%;flex: 0 0 100%;}
    .flx_textblock.bild-klein-text .text{padding-left: 15px;}
    
    .flx_teaser.klein .item{max-width: 50%;flex: 0 0 50%;margin-bottom: 20px;padding: 0 10px;}
    
    .flx_benefits .benefit{margin-bottom: 30px;}
    
    .flx_textblock.text-bild .text{margin-bottom: 50px;}
    
    .flx_logos .slider .owl-controls .owl-nav .owl-next, .flx_logos .slider .owl-controls .owl-nav .owl-prev{top: 25px;}
    
    .flx_banner .text, .flx_banner .bild{max-width: 100%;flex: 0 0 100%;}
    .flx_banner .bild::before{background-image: linear-gradient(180deg, var(--yellow) 0%, transparent 100%);right: 0;}
    .flx_banner .text .item{max-width: 33%;flex: 0 0 33%;margin-bottom: 0px;}
    .flx_banner .bild{height: 450px!important;}
    
    .flx_textblock.text-bild .bild .badge{right: 50px;}
    
    .flx_textblock.bild-text-hintergrund .bild{height: 350px!important;}
    
    .flx_kontaktformular .text{max-width: 100%;flex: 0 0 100%;margin-bottom: 30px;}
    .flx_kontaktformular .formular{max-width: 100%;flex: 0 0 100%;margin-bottom: 50px;}
    .flx_kontaktformular .text .ansprechpartner .personbild{max-width: 40%;}
    .flx_kontaktformular .text .ansprechpartner{margin-top: 50px;}

    .flx_kontaktbuttons .inner{padding:20px 53px;}
    
    .flx_dreidfahrzeug .fahrzeugbezeichnung span{font-size: 150px}

    #fahrzeuge{margin-top: 150px;}
    #fahrzeuge .fahrzeugbilder, #fahrzeuge .fahrzeuginfos{max-width: 100%;flex: 0 0 100%;}
    #fahrzeuge .fahrzeugbilder{margin-bottom: 30px;}

    #wpcarsyncfahrzeug .headlinebox{display: block;}
    #wpcarsyncfahrzeug .model_description{font-size: 170%;}
    #wpcarsyncfahrzeug .headlinebox .dxim_vehicle_price{max-width: fit-content;}
    #wpcarsyncfahrzeug .ablauf .item{margin-bottom: 30px;}
    
}
/*-------------------------------------------------------------------------------------------*/
@media (min-width:767px){

    #page-footer .about .col-xl-4:first-child::after{content:'';position:absolute;height: 50px;width: 2px;background-color: white;opacity: 0.5;float:right;right: -15px;bottom: 10px;}
}
/*-------------------------------------------------------------------------------------------*/
@media (max-width:767px){

    .headline{font-size: 200%;}

    .ctablock{flex-direction: column;}

    #page-header .logo object, #page-header.bottom .logo object{max-width: 70%;}
    
    #page-header.bottom .logo img{max-width: 60%;}

    .flx_topheader.text .content .headlinebox .headline{font-size: 200%;}
    .flx_topheader.text .content .banner img{max-width: 45%;}
    
    .flx_kontaktbuttons .col-md-5{margin-bottom: 30px;}
    
    .flx_bestseller .fahrzeuge .fahrzeugslider .owl-controls .owl-nav .owl-next, .flx_bestseller .fahrzeuge .fahrzeugslider .owl-controls .owl-nav .owl-prev{top: 145px;}
    
    .flx_textblock.text-bild .bild .badge{top: 320px;}
    .flx_textblock.text-bild .bild .badge img{max-width: 50%;}

    .flx_kranmodelle .mietmodell{margin-bottom: 30px;}
    
    .flx_fahrzeugausgabe .item{max-width: 100%;flex: 0 0 100%;}
    
    .flx_kontaktformular .text .ansprechpartner .personbild{max-width: 60%;}
    .flx_kontaktformular .formular .col-md-6{justify-content: flex-start!important;margin-top: 20px;}
    
    .flx_fahrzeugbau .item{max-width: 100%;flex: 0 0 100%;}
    .flx_fahrzeugbau .popup.active{width: 100%;}
    
    .flx_dreidfahrzeug .fahrzeugbezeichnung span{font-size: 100px}

    #fahrzeuge .tabs #bildergalerie .item{max-width: 50%;flex: 0 0 50%;margin-bottom: 30px;}
    #fahrzeuge .flx_kontaktformular .formular{margin-bottom: 0;}

    #wpcs_template_content{margin-top: 110px!important;}
    #wpcarsyncfahrzeug .model_description{margin-bottom: 20px;}
    #wpcarsyncfahrzeug .ansprechpartner{margin-bottom: 30px;}
    
}
/*-------------------------------------------------------------------------------------------*/
@media (max-width:600px) {
    
    body, html, *{font-size: 14px;}
    .btn{line-height: 1.2;}

    .container{padding: 0 20px;}
    
    .subline{font-size: 100%;}
    .headline{font-size: 170%;}
    .subheadline{font-size: 120%;}

    #page-header .logo{padding: 0;}
    #page-header .logo a{display: flex;}
    #page-header .logo object{max-width: 100%;}

    #page-header .topbar .navigation .menu.open li.menu-item-has-children.active > .sub-menu{background-color: #f5f5f5;padding: 10px 30px;}
    #page-header .topbar .navigation .main-menu li.current_page_item::before{bottom: -5px;}

    #page-header .topbar .extras #kontakt{display: none;}

    #page-header .navigation #toppermenu .gtranslate_wrapper{justify-content: flex-end;margin-bottom: 20px;}
    
    #page-header.bottom{padding: 5px 0;}
    #page-header.bottom .logo object{max-width: 80%;}

    .flx_topheader.hintergrundbild .contentblock{max-width: 100%;}
    
    .flx_topheader .contentblock{background-color: unset;}

    .flx_topheader.slide .hintergrundbild{height: 100vh!important;}
    .flx_topheader.swiper-wrapper{height: 80vh!important;}
    .flx_topheader .suchleiste{left: 0;transform: unset;position: relative;}
    .flx_topheader .suchleiste .item{margin-bottom: 15px;}
    .flx_topheader .contentblock .headline{font-size: 200%;}
    .flx_topheader .teaser{position: relative;z-index: 1;margin-top:-120px;}
    .flx_topheader .teaser .item{max-width: 100%;flex: 0 0 100%;}
    .flx_topheader .teaser .item .inner{padding: 30px;}

    .flx_benefits .benefit{margin-bottom: 30px;}
    .flx_benefits .benefit img{max-width: 80px;}

    .flx_topheader.bild .contentblock .headline{font-size: 220%;}
    
    .flx_textblock.bild-klein-text .text .inhalt-links{margin-bottom: 20px;}
    
    .flx_teaser.klein .item{max-width: 100%;}
    .flx_teaser.klein .item .inner{padding: 15px 10px;}

    .flx_teaser.kachelnxl .item{height: 350px!important;margin-bottom: 10px;}
    
    .flx_bestseller .fahrzeuge .fahrzeugslider .owl-controls .owl-nav .owl-next, .flx_bestseller .fahrzeuge .fahrzeugslider .owl-controls .owl-nav .owl-prev{top: 85px;}
    
    .flx_banner .text .item{max-width: 100%;flex: 0 0 100%;margin-bottom: 30px;}

    .flx_benefits .benefit{max-width: 50%;flex: 0 0 50%;}
    
    .flx_textblock.text-bild .bild .badge{top: 420px;right: 0px;left:165px;}
    .flx_textblock.text-bild .bild .badge img{max-width: 40%;}
    
    .flx_textblock.bild-klein-text .text ul li::before{width: 15px;height: 15px;top: 3px;}
    
    .flx_textblock.bild-klein-text .text{order: 1;margin-bottom: 30px;}
    .flx_textblock.bild-klein-text .bild{order: 2;}
    
    .flx_textblock.bild-text-hintergrund .bild{height: 250px!important;}
    .flx_textblock.bild-text-hintergrund .textbox .inner{padding: 30px;}

    .flx_dreidfahrzeug .fahrzeugbezeichnung span{font-size: 70px}
    
    .flx_kontaktformular .text .ansprechpartner .personbild{max-width: 70%;}
    .flx_kontaktformular .text .ansprechpartner{display: block;}
    .flx_kontaktformular .text .ansprechpartner .kontaktdaten{padding-top: 20px;}
    .flx_kontaktformular .formular input, .flx_kontaktformular .formular select{margin-bottom: 0;}
    .flx_kontaktformular .formular .col-md-12{margin-top: 20px;}
    .flx_kontaktformular .formular .pflicht{margin-top: 0;}
    .flx_kontaktformular .formular .submitbox{width: 100%;}
    .flx_kontaktformular .formular .submitbox .btn{width: 100%;}
    .flx_kontaktformular.ankauf .formular .kontakt{padding-right:0;}
    
    .flx_kontaktbuttons .inner{padding: 40px;}

    .flx_kategorien .kategorie .inner .content{display: block;}
    .flx_kategorien .kategorie .inner .kategoriename{font-size: 130%;}
    .flx_kategorien .kategorie .inner .content .rechenbeispiel{width: 80%;margin: 20px auto 0;}
    
    #page-footer .col-md-2, #page-footer .col-md-4{max-width: 100%;flex: 0 0 100%;margin-bottom: 30px;}
    #page-footer .footer-bottom .socialmedia{text-align: left;margin-top: 10px;}
    #page-footer .backtotop{right: 20px;max-width: 40px;}
    #page-footer .about .col-xl-4:first-child::after{content:'';position:absolute;height: 50px;width: 2px;background-color: white;opacity: 0.5;float:right;right: -15px;bottom: 20px;}
    
    .kontakt .inhaltsbloecke, .ankauf .inhaltsbloecke, .impressum .inhaltsbloecke, .datenschutz .inhaltsbloecke, .agb-vermietung .inhaltsbloecke, .agb-gebrauchtwagen .inhaltsbloecke{margin-top: 200px;}

    .flx_kontaktbuttons{bottom: -10px;position: unset;display: block;z-index: 9;width:100%;margin-bottom:0px!important;}
    .flx_kontaktbuttons .inner{padding:30px;}
    .flx_kontaktbuttons a.telefon::before {position: relative;margin:auto;left:0;right:0;}
    .flx_kontaktbuttons a.mail::before {position: relative;margin:auto;left:0;right:0;}
    
    .flx_fahrzeugbau .item .inner .buttons .btn{width: 100%;margin-bottom: 20px;}

    .flx_topheader.schmal{margin-top: 60px;margin-bottom: 50px!important;}
    .flx_topheader.schmal .banner{top: unset;bottom: 0;position: relative;}
    .flx_topheader.schmal .banner img{max-width: 70%;}
    
}
/*-------------------------------------------------------------------------------------------*/
@media (max-width:400px) {
    
    #page-header .header-top .konto{left: 200px;}
    
    #fahrzeuge #fahrzeugdetails span{width:48%;margin: 0 0px 15px 0;padding: 5px;}
    
    #fahrzeuge .fahrzeuginfos .ansprechpartner .kontaktdaten{padding-bottom:30px;}
    #fahrzeuge .fahrzeuginfos .ansprechpartner .kontaktdaten .telefon{display:block;}

}