/**
 *
 * Theme Name:        LC Handels GmbH
 * Theme URI:         https://www.moleco.de
 * Description:       Dieses Theme wurde erstellt durch die MOLECO GmbH - Agentur für digitale Kommunikation
 * Version:           1.0.0
 * Author:            MOLECO GmbH
 * Author URI:        https://www.moleco.de
 * Tested up to:      6.8.1
 * Requires at least: 6.8.1
 * Requires PHP:      8.3.22
 *
 */



:root{

--main: #242424;
--mainhover: #1B3043;
--sec: #444444 ;
--button: #ffa838;
--buttonhover: #242424;
--orange: #ffa838;
--dark: #242424;
--light: #F5F5F5;
--white: #ffffff;
--water: #00417A;
--lightgray: #E9E9E9;
}
/* ----- Area Normal Trial */
body,html,*{font-size:20px;line-height:1.3;font-family: 'Area Normal';font-weight:300;letter-spacing:0.5px;}
html{scroll-behavior: smooth;}



p{font-weight:300;}

a{color:var(--main); font-size:100%;transition:all .3s ease;}
a:hover{color:var(--sec);transition:all .3s ease;}

li{list-style:none;padding-left:30px;position:relative;}
li:before{content:'';width:7.5px;height:7.5px;display:block;background:var(--main);position:absolute;top:7.5px;left:0;border-radius:50%;}

ul{padding:0;margin:0;}

img{max-width:100%;height:auto;}

h1{font-size:425%;display:block;position:relative;color:var(--main);margin:0;line-height:1.2; font-weight: 800;}
h2{font-size:250%;display:block;color:var(--main);margin:0;line-height:1.2; font-weight: 800;}
h3{font-size:175%;display:block;color:var(--main);margin:0;line-height:1.2; font-weight: 800;}
h4{font-size:125%;display:block;color:var(--main);margin:0;line-height:1.2; font-weight: 800;}

.headline{font-weight:800;display:block;color:var(--main);margin-bottom:25px;line-height:1.2;}
.subline{font-size:160%;font-weight:300;display:block;color:var(--sec);margin-bottom:25px;}

.btn{position:relative; padding: 15px 50px; border-radius: 10px; transition: all 0.3s ease;font-size:100%;font-weight:600;background:var(--button);color:var(--white);transition:all .3s ease;line-height:1.2;text-align:center;text-decoration:none;border-radius:10px;}
.btn:hover{background:var(--buttonhover);transition:all .3s ease;color:var(--button);}
.btn.light{color: var(--button); background-color: transparent; border: 2px solid var(--button);}
.btn.light:hover{background-color: var(--button); color: var(--white);}

.backbtn{margin-bottom: 50px; font-size: 80%; font-weight: 800; display: block; position: relative; padding-left: 30px;}
.backbtn:before{display: block; content: ''; position: absolute; width: 20px; height: 2px; top: 50%; left: 0; transform: translateY(-50%); background-color: black;}


strong{font-weight:800;font-size:100%;}

.container{max-width:1640px;}
.container.wide{max-width:1850px;}

.col-lg-20{position: relative; max-width: 20%; flex: 0 0 20%; -ms-flex: 0 0 50%; padding-right: 15px; padding-left: 15px;}
.col-md-20{position: relative; max-width: 20%; flex: 0 0 20%; -ms-flex: 0 0 50%; padding-right: 15px; padding-left: 15px;}
.col-sm-20{position: relative; max-width: 20%; flex: 0 0 20%; -ms-flex: 0 0 50%; padding-right: 15px; padding-left: 15px;}


.owl-nav{margin-top: 25px;}
.owl-nav .owl-prev{margin-right: 15px;}
.owl-nav .owl-prev img {transform: rotate(180deg);}
.owl-nav button{width: 30px; height: 30px;}
.owl-nav-top{margin-bottom: 25px;text-align: right;}
.owl-nav-top .owl-prev, .owl-nav-top .owl-next{border: none; padding: 0; background: none;}

.owl-dot {width: 12px; height: 12px; border-radius: 50%; transition: all 0.3s;}

.owl-dot.active-dot {transform: scale(1.3);}
/*------------------------------------Header-------------------------------------------------*/

#page-header{position:absolute;top:0;right:0;left:0;padding:20px 0 40px;background:white; z-index:9999;}
#page-header .logo img{width: 80%;}

#page-header .mainheader{padding:15px 0;}
#page-header .mainheader #toppermenu{height:100%;align-content:center;text-align:right;}
#page-header .mainheader #toppermenu .menu{position:unset;}
#page-header .mainheader #toppermenu .menu li{display:inline-block;margin:0 10px;padding:5px 25px;position:unset;}
#page-header .mainheader #toppermenu .menu li:before{display:none;}
#page-header .mainheader #toppermenu .menu li .maintopic{text-decoration:none;position:relative;font-weight:bold; padding: 30px 0;}
#page-header .mainheader #toppermenu .menu li .maintopic::before{content: '';position: absolute;width: 100%;height: 2px;border-radius: 5px;background-color: var(--main);bottom: 25px;left: 0;transform-origin: right;transform: scaleX(0);transition: transform .3s ease-in-out;}
#page-header .mainheader #toppermenu .menu li .maintopic:hover::before{transform-origin: left;transform: scaleX(1);}
#page-header .mainheader #toppermenu .menu > li:last-child a{color: var(--white); background-color: var(--orange); padding: 15px 50px; padding-bottom: 12px; border-radius: 10px; transition: all 0.3s ease;}
#page-header .mainheader #toppermenu .menu > li:last-child a::before{display: none;}
#page-header .mainheader #toppermenu .menu > li:last-child a:hover{color: var(--orange); background-color: var(--main);}
#page-header .mainheader #toppermenu .menu li .sub-menu{display:none;background:#fff;padding:0;width:100%;border-radius:0;transform:none;text-align:left;margin:0;z-index:1;position:absolute;left:0;top:calc(100% + 7px);right:0;-webkit-box-shadow:0px 0px 10px 0px rgba(0,0,0,0.15);box-shadow:0px 0px 10px 0px rgba(0,0,0,0.15);}
#page-header .mainheader #toppermenu .menu li:hover .sub-menu{display: block;}
#page-header .mainheader #toppermenu .menu li .sub-menu.smallSub{width:30%;left:45%!important;}
#page-header .mainheader #toppermenu .menu li .sub-menu .tabblock{display:flex;align-items:flex-start!important;}
#page-header .mainheader #toppermenu .menu li .sub-menu .nav{margin:0!important;width:20%;background:#f3f3f3;}
#page-header .mainheader #toppermenu .menu li .sub-menu .nav.kompletteBreite{width:100%;}
#page-header .mainheader #toppermenu .menu li .sub-menu .nav .nav-link{width:100%;background:#E9E9E9 ;color:var(--main);border-radius:0;text-align:left;font-weight:600;padding:20px 15px;position:relative;box-shadow:none;border:none;border-bottom:solid 1px #fff;display:flex;align-items:center;line-height:1;}
#page-header .mainheader #toppermenu .menu li .sub-menu .nav .nav-link:after{content:'';display:block;width:10px;height:27.5px;transform:rotate(90deg);position:absolute;right:15px;top:17.5px;background:url('media/right.svg');background-size:100%;background-repeat:no-repeat;background-position:center;/*filter: brightness(0) saturate(100%) invert(91%) sepia(34%) saturate(6596%) hue-rotate(214deg) brightness(152%) contrast(119%);*/}
#page-header .mainheader #toppermenu .menu li .sub-menu .nav .nav-link.active, #page-header .navigation #toppermenu .menu .sub-menu .nav .nav-link:hover{background:var(--orange);color:var(--main);transition:all .3s ease;}
#page-header .mainheader #toppermenu .menu li .sub-menu .nav .nav-link.active:after, #page-header .navigation #toppermenu .menu .sub-menu .nav .nav-link:hover:after{filter:unset;transform:rotate(00deg);}
#page-header .mainheader #toppermenu .menu li .sub-menu .nav .nav-link img{margin-right:10px;max-width:20px;/*filter: brightness(0) saturate(100%) invert(91%) sepia(34%) saturate(6596%) hue-rotate(214deg) brightness(152%) contrast(119%);*/}
#page-header .mainheader #toppermenu .menu li .sub-menu .nav .nav-link.active img, #page-header .navigation #toppermenu .menu .sub-menu .nav .nav-link:hover img{filter:unset;}
#page-header .mainheader #toppermenu .menu li .sub-menu .tab-content .tab-pane .mobileheadernav img{display:none;}
#page-header .mainheader #toppermenu .menu li .sub-menu .tab-content{position:relative;width:80%}
#page-header .mainheader #toppermenu .menu li .sub-menu .tab-content.nichtSichtbar{display:none;}
#page-header .mainheader #toppermenu .menu li .sub-menu .tab-content .tab-pane{display:flex;flex-wrap: wrap;padding:0 25px;position: absolute;top: 0;left: 0;right: 0;bottom: 0;}
#page-header .mainheader #toppermenu .menu li .sub-menu .tab-content .tab-pane.fade:not(.show){display:none;}
#page-header .mainheader #toppermenu .menu li .sub-menu .tab-content .tab-pane .mobileheadernav a{text-decoration:none;}
#page-header .mainheader #toppermenu .menu li .sub-menu .tab-content .tab-pane .mobileheadernav .headline{color:var(--main);font-weight:600;font-size:135%;padding:10px;display:inline-block;width:70%;margin:10px 0 25px;}
#page-header .mainheader #toppermenu .menu li .sub-menu .tab-content .tab-pane .mobileheadernav .btn{padding:5px 35px 7px;font-size: 85%;}
#page-header .mainheader #toppermenu .menu li .sub-menu .tab-content .tab-pane .mobileheadernav .btn::before{display: none;}
#page-header .mainheader #toppermenu .menu li .sub-menu .tab-content .tab-pane .mobileheadernav .btn::after{display: none;}
#page-header .mainheader #toppermenu .menu li .sub-menu .tab-content .tab-pane .mobileheadernav .mobileclose{display:none;}
#page-header .mainheader #toppermenu .menu li .sub-menu .tab-content .tab-pane ul{width:100%;}
#page-header .mainheader #toppermenu .menu li .sub-menu .tab-content .tab-pane ul li{margin:0;padding:10px 10px;display: inline-block;width:49%; border-bottom: 1px solid var(--main);}
#page-header .mainheader #toppermenu .menu li .sub-menu .tab-content .tab-pane ul li a:before{bottom:5px;}
#page-header .mainheader #toppermenu .menu li .sub-menu li a{color:var(--main);font-size:100%;font-weight:500;position: relative;padding:10px 0;}


#page-header .burgerbutton{display:none; z-index: 999; width:40px;height:30px;position:absolute;top:0;right:55px;cursor:pointer; background: none; border: none;}
#page-header .burgerbutton.active{position: fixed; top: 35px;}
#page-header.bottom .burgerbutton.active{position: fixed; top: 35px;}
#page-header .burgerbutton span{display:block;width:100%;height:3px;margin:8px 0;background:var(--sec);border-radius:20px;transition:all .3s ease;}
#page-header .burgerbutton span:nth-child(1){margin-top: 0px;}
#page-header .burgerbutton.active span:nth-child(1){transform:rotate(45deg);transition:all .3s ease;margin-top:4px;}
#page-header .burgerbutton.active span:nth-child(2){opacity:0;transition:all .3s ease;}
#page-header .burgerbutton.active span:nth-child(3){transform:rotate(-45deg);transition:all .3s ease;margin-top:-22px;}

#page-header .menu-mobile{position:absolute;display:none;top:-10px;right:0;bottom:0;transition:all .3s ease;background:var(--white);height:100vh;  width: 50vw; padding-top: 50px;}
#page-header .menu-mobile.active{display: block;}
#page-header .menu-mobile .menu{position:relative; padding: 25px; text-align: center;}
#page-header .menu-mobile .menu li{display:block;margin:0 10px;padding:10px 25px;position:unset;}
#page-header .menu-mobile .menu li:before{display:none;}
#page-header .menu-mobile .menu li a{padding:30px 0;text-decoration:none;position:relative; font-weight: 800;}
#page-header .menu-mobile .menu li a::before{content: '';position: absolute;width: 100%;height: 2px;border-radius: 5px;background-color: var(--main);bottom: 25px;left: 0;transform-origin: right;transform: scaleX(0);transition: transform .3s ease-in-out;}
#page-header .menu-mobile .menu li a:hover::before{transform-origin: left;transform: scaleX(1);}
#page-header .menu-mobile .menu li:last-child{padding-top: 30px;}
#page-header .menu-mobile .menu li:last-child a{color: var(--white); background-color: var(--orange); padding: 15px 50px; border-radius: 10px; transition: all 0.3s ease;}
#page-header .menu-mobile .menu li:last-child a::before{display: none;}
#page-header .menu-mobile .menu li:last-child a:hover{color: var(--orange); background-color: var(--main);}



#page-header.bottom{padding:20px 0 30px;position:fixed;top:0;left:0;right:0;  background:var(--white);-webkit-animation: fadein 2s; -moz-animation: fadein 2s; -ms-animation: fadein 2s; -o-animation: fadein 2s; animation: fadein 2s;z-index:9999; -webkit-box-shadow: 0px 0px 20px -7px rgba(0,0,0,0.4);  box-shadow: 0px 0px 20px -7px rgba(0,0,0,0.65);}
#page-header.bottom .topheader{display:none;}
#page-header.bottom .logo img{width:50%;}
#page-header.bottom .mainheader{padding:0;}
#page-header.bottom .burgerbutton{position: absolute; top: 0;}

@keyframes fadein {
    from { top: -150px; }
    to   { top: 0; }
}
@-moz-keyframes fadein {
    from { top: -150px; }
    to   { top: 0; }
}
@-webkit-keyframes fadein {
    from { top: -150px; }
    to   { top: 0; }
}
@-ms-keyframes fadein {
    from { top: -150px; }
    to   { top: 0; }
}


/*------------------------------------Footer-------------------------------------------------*/

#page-footer{background:var(--dark);padding:75px 0 0;}
#page-footer .logo img{max-width:250px;}
#page-footer .inhalt{margin-top:50px;}
#page-footer .inhalt h3{font-size: 175%;margin-bottom:25px;}

#page-footer .infos{display:block;width:100%;}
#page-footer .infos .title{display:block;margin-bottom:15px;font-weight:500;}
#page-footer .infos .adresse{margin-bottom:25px;}
#page-footer .infos li{padding:0;margin:5px 0;}
#page-footer .infos li:before{display:none;}
#page-footer .social{margin-top:15px;}
#page-footer .social ul{text-align: start;}
#page-footer .social li{display:inline-block;padding:0;margin:5px 15px;}
#page-footer .social li:first-child{margin-left:0;}
#page-footer .social li:before{display:none;}
#page-footer .social img{height: 40px; filter: invert(80%);}

#page-footer a, #page-footer span{color: var(--white);}
#page-footer a{text-decoration: underline;}
#page-footer a:hover{color: var(--orange);}

#page-footer #footerbottom{margin-top:300px;}
#page-footer #footerbottom .copyright{display:block;width:100%;}
#page-footer #footerbottom .copyright p{display:inline-block;color:var(--white);font-size:70%;font-weight:300;text-decoration:none;transition:all .3s ease;}

#page-footer #footerbottom .rechtliches ul{text-align:right;}
#page-footer #footerbottom .rechtliches ul li{display:inline-block;padding:0 5px;}
#page-footer #footerbottom .rechtliches ul li:before{display:none;}
#page-footer #footerbottom .rechtliches ul li a{text-decoration:none; transition: all ease 0.3s;font-size:70%;}



#page-footer .bottom .copyright{display:block;width:100%;padding:15px 0;}
#page-footer .bottom .copyright span{display:inline-block;color:var(--white);font-size:100%;font-weight:300;text-decoration:none;transition:all .3s ease;}
#page-footer .bottom .copyright a{display:inline-block;color:var(--white);font-size:100%;font-weight:300;text-decoration:none;transition:all .3s ease;position: relative;}
#page-footer .bottom .copyright a::before{content: '';position: absolute;width: 100%;height: 2px;border-radius: 5px;background-color: var(--orange);bottom: -3px;left: 0;transform-origin: right;transform: scaleX(0);transition: transform .3s ease-in-out;}
#page-footer .bottom .copyright a:hover::before{transform-origin: left;transform: scaleX(1);}
#page-footer .bottom .copyright .placer{display:inline-block;margin:0 5px;}

/*-------------------------Templates------------------------*/
.uebersichtheader{position:relative;padding:0!important; height: 500px;}
.uebersichtheader .container{position: relative; padding: 50px 0; height: 100%;}
.uebersichtheader .content{width:100%;height: 100%;}
.uebersichtheader .content .headerbox{width:100%;height:100%;align-content: center;}
.uebersichtheader .content .headerbox .headline{color:var(--dark);font-size:525%;font-weight:800;margin-bottom:35px;display:block;width:100%;text-align:center;}
.uebersichtheader .content .headerbox .subline{color:var(--dark);font-size:150%;font-weight:800;margin-bottom: 0;display:block;text-align:center;}

.flx_produktuebersicht{padding:40px;}

.flx_produktuebersicht a:hover{text-decoration: none;}
.flx_produktuebersicht .produkt-kategorie-block{margin-bottom:50px;}
.flx_produktuebersicht .kategorie-header{display:flex;align-items:center;gap:20px;margin-bottom:15px;}
.flx_produktuebersicht .kategorie-bild{max-width:80px;height:auto;}
.flx_produktuebersicht .kategorie-header h2{margin:0;font-size:350%; font-weight: 800; padding-top: 50px;}
.flx_produktuebersicht .kategorie-header h2 a{font-weight: 800;}
.flx_produktuebersicht .kategorie-header a{text-decoration:none;}
.flx_produktuebersicht .kategorie-header .katbtn{position: relative; margin-left: auto;}
.flx_produktuebersicht .produkt-item{background:#fff;padding:10px;text-align:center;}
.flx_produktuebersicht .produkt-item img{max-width:100%;height:auto;margin-bottom:10px;}
.flx_produktuebersicht .produkt-item h2{margin:0;font-size:110%;}
.flx_produktuebersicht .produkt-item .btn{margin-top: 20px;}
.flx_produktuebersicht .owl-carousel .owl-nav{width: fit-content; margin-left: auto;}

.flx_produkt_kategorie{padding:40px;}
.flx_produkt_kategorie h1{font-size: 250%; display: block; margin-bottom: 50px; position: relative;line-height:1;}
.flx_produkt_kategorie h1::before{display: block; content: ''; width: 40px; height: 40px; position: absolute; left: 5px; top: calc(50% + 2.5px); background-size: contain; 
    background-repeat: no-repeat; transform: translateY(-50%);}
.flx_produkt_kategorie .single-image{margin-bottom: 25px;}
.flx_produkt_kategorie .kategorie-header-image{text-align:center;margin-bottom:20px;}
.flx_produkt_kategorie .kategorie-header-image img{max-width:300px;height:auto;}
.flx_produkt_slider .produkt-item{text-align:center;padding:15px;}
.flx_produkt_slider .produkt-item img{max-width:100%;height:auto;border:1px solid #ddd;}
.produktpreview_slider .owl-dot {width: 12px; height: 12px; border-radius: 50%; margin: 5px; display: inline-block; background: white; /* default inactive color */}

.kategorie-acf-blocks{margin-top:40px;}
.kategorie-acf-blocks .block-text{padding:20px;background:#f7f7f7;margin-bottom:20px;}
.kategorie-acf-blocks .block-image{text-align:center;margin-bottom:20px;}
.kategorie-acf-blocks .block-image img{max-width:100%;height:auto;}

.flx_produkt_kategorie a{text-decoration: none;}
.flx_produkt_kategorie .produkt-item{background-color: var(--light); border-radius: 20px; padding: 20px 20px 60px 20px; text-align: center;}
.flx_produkt_kategorie .produkt-item .btn{font-size: 85%; padding: 12.5px 0; width: 100%;}
.flx_produkt_kategorie .produkt-item h4{padding: 40px 0;}
.flx_produkt_kategorie .produkt-item .produkt-information{padding-top: 25px;}
.flx_produkt_kategorie .produkt-info-item{text-align: center; width: 100%; padding-top: 50px;}
.flx_produkt_kategorie .produkt-item .titel{font-size: 85%;}
.flx_produkt_kategorie .produkt-item .info-text p{font-size: 80%;font-weight:500;letter-spacing: 0.8;line-height: 1.5;}
.flx_produkt_kategorie .produkt-info-item .titel{margin-bottom: 10px; font-weight: 800;}
.flx_produkt_kategorie .produkt-info-item img{width: 33px; height: 33px; margin: auto; margin-bottom: 15px;}
.flx_produkt_kategorie .owl-carousel .owl-nav{width: fit-content; margin-left: auto;}

/*--------------------------------Produkte Single---------------------------------*/
.single-produkt{margin-top: 100px;}
.single-produkt h1{padding-bottom: 25px; font-size: 250%; width: 100%;}
.single-produkt .produkt-grid{display: grid;grid-template-columns: 1.8fr 1.2fr;grid-gap: 20px;align-items:start;}
.single-produkt .left-column{display:flex;flex-direction:column;gap:20px;}
.single-produkt .produkt-video video{width:100%;height:auto;display:block;}
.single-produkt .right-column{display:flex;flex-direction:column;gap:20px;}
.single-produkt .produkt-image img{width:100%;height:auto;display:block;}
.single-produkt .produkt-beschreibung {padding: 50px; padding-left: 0;}
.single-produkt .produkt-beschreibung p{font-weight: 500;line-height: 1.7;font-size: 85%;}

.single-produkt .kachel{background-color: var(--lightgray); text-align: center; height: 100%; padding: 25px; border-radius: 20px;}
.single-produkt .kachel h3{font-size: 120%; margin-bottom: 20px;}
.single-produkt .kachel .btn{font-weight: 800; font-size: 80%; padding: 8px 0; width: 100%;}

.single-produkt .formular{padding: 100px 0;}
.single-produkt .formular h2{padding-bottom: 25px;}
.single-produkt .formular label{padding-bottom: 20px; font-weight: 800;}
.single-produkt .formular input{padding: 10px 25px; border-radius: 5px; background:var(--lightgray);border:none;}
.single-produkt .formular input[type="submit"]{background:var(--button);color:var(--white);transition:all .3s ease;}
.single-produkt .formular input[type="submit"]:hover{background:var(--buttonhover);color:var(--button);transition:all .3s ease;}
.single-produkt .formular textarea{padding: 10px 25px; border-radius: 5px; background:var(--lightgray);border:none;}
.single-produkt .wpcf7 form.sent .wpcf7-response-output{padding: 10px; text-align: center; border-radius: 10px;}

.single-produkt .aehnliches_produkt{padding: 200px 0;}
.single-produkt .aehnliches_produkt .inner{background-color: var(--light); border-radius: 20px;}
.single-produkt .aehnliches_produkt .inner .bild{text-align: center;}
.single-produkt .aehnliches_produkt .inner .bild img{width: 70%;}
.single-produkt .aehnliches_produkt .inner .text{position: absolute; top: 50%; transform: translateY(-50%); width: 75%;}
.single-produkt .aehnliches_produkt .inner .text h2{font-size: 225%; padding-bottom: 25px;}
.single-produkt .aehnliches_produkt .inner .text .btn{padding: 20px 0; width: 100%;}
.single-produkt .haendler{padding-bottom: 200px;}
.single-produkt .haendler .inner{background:var(--orange);border-radius: 20px; padding:100px 0;position:relative;overflow:hidden;}
.single-produkt .haendler .inner h2{font-size: 450%; font-weight: 800; padding-left: 125px; padding-right: 25px; padding-bottom: 25px;}
.single-produkt .haendler .inner a{padding-left: 125px; position: relative;font-weight:600;}
.single-produkt .haendler .inner a::after{content: ''; display: inline-block; background-color: var(--dark); width: 220px; height: 2px; margin-left: 10px; margin-bottom: 5px;}
.single-produkt .haendler .inner .swipe{display: block;width: 100%;height:100%;background: url('media/Swipe.svg');background-size: 100%;background-position: center;background-repeat: no-repeat;position: absolute;top: 0;right:0;}
.single-produkt .haendler .inner .row{z-index:5;position:relative;}


@media (max-width:1800px){
    #page-header .navigation #toppermenu .menu .sub-menu{right:0;padding: 60px;width: 100%;max-height: max-content;}
    #page-header .navigation #toppermenu .menu li{padding: 5px 20px;}
    #page-header .navigation #toppermenu .menu li#sub1 .sub-menu{min-width: 900px;}
    #page-header .navigation #toppermenu .menu .sub-menu li{margin: 10px 0;}
    #page-header .navigation #toppermenu .menu .leistungen .sub-menu{min-width: 1050px;}
    #page-header .navigation #toppermenu.desktop .menu .leistungen-uebersicht .sub-menu{min-width: 1150px;}
    
    #page-header.newmenu .navigation #toppermenu.desktop .menu .leistungen-uebersicht .sub-menu{right:0;padding: 60px;width: 100%;}
    #page-header.newmenu .navigation #toppermenu .menu .sub-menu{right:0;padding: 60px 0 60px 50px;width: 1100px;}
    #page-header.newmenu .navigation #toppermenu .menu .sub-menu.smallSub{width:35%;left:45%!important;}
    #page-header.newmenu .navigation #toppermenu .menu li{padding: 5px 20px;}
    #page-header.newmenu .navigation #toppermenu .menu .subsub-menu li{padding-left: 0;}
    #page-header.newmenu .navigation #toppermenu .menu li#sub1 .sub-menu{min-width: 900px;}
    #page-header.newmenu .navigation #toppermenu .menu .sub-menu li{margin: 10px 0;}
    #page-header.newmenu .navigation #toppermenu .menu .leistungen .sub-menu{min-width: 1050px;}
    
    #page-header.newmenu .navigation #toppermenu .menu .online-marketing-beratung .sub-menu .headline::after{width: 30%;}
    #page-header.newmenu .navigation #toppermenu .menu .ueber-uns .sub-menu .headline::after{width: 30%;}
    #page-header.newmenu .navigation #toppermenu .menu .karriere .sub-menu .headline::after{width: 30%;}
    #page-header.newmenu .navigation #toppermenu .menu .blog .sub-menu .headline::after{width: 30%;}
}


@media (max-width:1280px) {

    body.menu-open {overflow: hidden;}

    #page-header #toppermenu{display: none;}
    #page-header #toppermenu.active{display: block; width: 100vw; height: 100vh; position: fixed; right: 0; top: 0; background-color: var(--white); overflow-y: auto; -webkit-overflow-scrolling: touch;}
    #page-header .burgerbutton{display: block;}
    #page-header .mainheader #toppermenu .menu li{display: block;margin-bottom: 30px;}
    #page-header .mainheader #toppermenu .menu li .sub-menu.open{display: block; position: relative;}
    .col-lg-20{max-width: 50%; flex: 0 0 50%; margin-bottom: 30px;}
 
    #page-header .mainheader #toppermenu .menu li .sub-menu .tab-content{width: 100%; padding-bottom: 25px;}

    #page-header .mainheader #toppermenu{text-align: left; align-content: baseline; padding-top: 50px;box-sizing: border-box;}

    #page-header .mainheader #toppermenu .menu li .sub-menu{margin-top: 25px;}
    #page-header .mainheader #toppermenu .menu li .sub-menu .tabblock{display: block;}
    #page-header .mainheader #toppermenu .menu li .sub-menu .nav{width: 100%; position: relative; display: flex;flex-wrap: wrap;}
    #page-header .mainheader #toppermenu .menu li .sub-menu .tab-content .tab-pane{position: relative;}
    #page-header .mainheader #toppermenu .menu li .sub-menu .nav .nav-link{max-width: 50%; flex: 0 0 50%;}

    #page-header .mainheader #toppermenu .menu li .sub-menu .tab-content .tab-pane .mobileheadernav .btn{margin-bottom: 15px;}
    #page-header .mainheader #toppermenu .menu li .maintopic{padding: 0;}
    #page-header .mainheader #toppermenu .menu li .maintopic::before{bottom: 0;}

}

@media (max-width:991px){

}

@media (max-width:767px) {
    h1{font-size: 350%;}
    h2{font-size: 200%;}
    h3{font-size: 150%;}
    .col-md-20{max-width: 100%; flex: 0 0 100%; margin-bottom: 30px;}
    #page-header .menu-mobile{width: 100vw;}

    #page-header .mainheader #toppermenu .menu li .sub-menu .nav .nav-link{padding: 10px;}
    #page-header .mainheader #toppermenu .menu li .sub-menu .tab-content .tab-pane .mobileheadernav .headline{width: 100%; margin-bottom: 10px;}
    #page-header .mainheader #toppermenu .menu li .sub-menu .tab-content .tab-pane .mobileheadernav .btn{display: none;}
    #page-header .mainheader #toppermenu .menu li .sub-menu li a{font-size: 90%;}

    .single-produkt h1{font-size: 200%;}
    .single-produkt .aehnliches_produkt .inner .text{position: relative; padding: 50px;}
    .single-produkt .haendler .inner h2{font-size: 300%;padding-left:25px;}
    .single-produkt .haendler .inner .swipe{background-size:300%;background-position:right;}
    .single-produkt .produkt-grid{grid-template-columns:1fr;flex-direction: column-reverse;}
    .single-produkt .right-column{flex-direction:row;flex-wrap:wrap; order: -1;}
    .single-produkt .produkt-image{flex:1 1 48%;}

    .uebersichtheader .content .headerbox .headline{font-size: 400%;}

    #page-footer{position: relative;}
    #page-footer .rechtliches{position: absolute; bottom: 100px;}
}
@media (max-width:600px) {

    h1{font-size: 200%;}
    h2{font-size: 150%;}
    h3{font-size: 120%;}

    .flx_produkt_kategorie h1::before {width: 35px; height: 35px;}

    #page-header .burgerbutton{right: 20px;}
    .col-sm-20{max-width: 100%; flex: 0 0 100%;}
    .col-lg-20{max-width: 100%; flex: 0 0 100%;}

    #page-header .mainheader #toppermenu .menu li .sub-menu .nav .nav-link::after{display: none;}
    #page-header .mainheader #toppermenu .menu li .sub-menu .tab-content .tab-pane ul li{width: 100%;}

    .flx_produkt_kategorie h1{font-size: 200%;}
    .flx_produktuebersicht .kategorie-header h2{font-size: 150%;}

    .single-produkt .haendler{padding-bottom: 100px;}
    .single-produkt .haendler .inner h2{font-size: 200%;}
    .single-produkt .haendler .inner a::after {display: none;}
}
@media (max-width:480px){
    .single-produkt .produkt-image{flex:1 1 100%;}
}
