/**
 *
 * Theme Name:        Jürgen Wieling GmbH X MOLECO 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:  #333331 ;
--sec:   #E30614 ;
--hover: #722F37 ;
--white: #FFFFFF;
--light: #EFEFEF;
--black: #000000;

}

body,html,*{font-size:18px;line-height:1.8;font-family:'Barlow';font-weight:300;}
html{scroll-behavior: smooth;}
html{overflow-x: hidden;}

a{text-decoration:none;font-size:100%;transition:all .3s ease; color: var(--main);}
a:hover{text-decoration:none;color:var(--sec);transition:all .3s ease;}
a:focus{text-decoration:none;}

li{list-style:none;padding-left:30px;position:relative;}

ul{padding:0;margin:0;}

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

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

.topline{font-size:135%;font-weight:800;display:block;color:var(--main);text-transform:uppercase;margin-bottom:25px;line-height:1;}
.headline{font-weight:800;display:block;color:var(--main);text-transform:uppercase;margin-bottom:50px;line-height:1;letter-spacing:2px;}
.subline{font-size:135%;font-weight:800;display:block;color:var(--main);text-transform:uppercase;margin-top:10px;line-height:1;}

.btn{position:relative;padding:10px 50px 13px 50px;border-radius:35px;font-size:100%;font-weight:400;background:var(--sec);color:var(--white);transition:all .3s ease;line-height:1;text-align:center;}
.btn:hover{background:var(--hover);transition:all .3s ease;color:var(--white);}

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

.container{max-width:1640px;}
.container.wide{max-width:1800px;}

.row > *{position: relative;}

/*------------------------------------Formular CF7-------------------------------------------*/

input, select, textarea{background:var(--light);border-radius:30px;border:none;box-shadow:none;width:100%;padding:7.5px 15px;}
input[type="checkbox"]{width:15px;margin-right:5px;}
input[type="submit"]{width:35%;margin-top:50px;float:right;}
select{padding:12.5px 15px;}
textarea{height:150px;}


.wpcf7-list-item{margin-left:0!important;}

.formwrapper{display:flex;flex-direction:row;flex-wrap:wrap;}
.fbox{width:50%;padding:5px 10px;}
.fbox.ganz{width:100%;}
.fbox.drittel{width:35%;}
.fbox.zweidrittel{width:65%;}
.fbox p{margin:0;}
.fbox label{margin-left:10px;}

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

#page-header{position:absolute;top:0;right:0;left:0;z-index:99999;}
#page-header .container > .row{align-items: center;}
#page-header:after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;mix-blend-mode: multiply;background: rgba(0,0,0,0.7); backdrop-filter: blur(50px);z-index:-1;}
#page-header a{color: var(--white);}
#page-header .telefon{position: absolute; right: 0px; top: 0; background: var(--main); padding: 10px 150px 10px 50px; clip-path: polygon(0 0, 100% 0, 100% 100%, 3% 100%);z-index: 2;}
#page-header .telefon a{position: relative; padding-left: 30px;}
#page-header .telefon a::before{content: ''; display: block; position: absolute; left: 2px; top: 2px; background-image: url('media/phone.svg'); height: 20px; width: 20px; background-repeat: no-repeat; background-size: contain;}
#page-header .container{position: relative;}
#page-header .zentrale::after{content: "|"; color: var(--white); display: inline-block; padding: 0 20px;}
#page-header .logo{margin-top:25px;display:block;}
#page-header .logo img{max-width:75%;}
#page-header .topmenu{padding-right: 0;}
#page-header #toppermenu{margin-top: 35px; text-align: right;z-index: 2;}
#page-header #toppermenu .menu li{display: inline-block;padding:40px 15px 25px;position:unset;}
#page-header #toppermenu .menu li a{color: var(--white); text-transform: uppercase; font-weight: 700;}

#page-header #toppermenu .menu li.menu-item-has-children .sub-menu{display:none;position:absolute;margin-top: 0;left:0;top:132px;width:1000px;z-index:1000;text-align:left;padding:10px;}
#page-header #toppermenu .menu li.menu-item-has-children .sub-menu:after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;mix-blend-mode: multiply;background: rgba(0,0,0,0.7);z-index:-1;}
#page-header #toppermenu .menu li.menu-item-has-children.open .sub-menu{display:block;}
#page-header #toppermenu .menu li.menu-item-has-children:hover > .sub-menu{display:block;}
#page-header #toppermenu .menu li.menu-item-has-children .sub-menu li{padding:10px;width:25%;float:left;text-align:left;}
#page-header #toppermenu .menu li.menu-item-has-children .sub-menu li::after{display: none;}
#page-header #toppermenu .menu li.menu-item-has-children .sub-menu li a{padding:0;position:relative;overflow:hidden;font-size: 100%; z-index: 5;display:block;line-height:1.2;}
#page-header #toppermenu .menu li.menu-item-has-children .sub-menu li a img{width:100%;transition:all .3s ease;}
#page-header #toppermenu .menu li.menu-item-has-children .sub-menu li a:hover{color:var(--sec);transition:all .3s ease;}
#page-header #toppermenu .menu li.menu-item-has-children .sub-menu li a:hover img{transform:scale(1.05);transition:all .3s ease;}
#page-header #toppermenu .menu li.menu-item-has-children .sub-menu li a span{z-index: 5; position: absolute;top:0;left:0;padding: 15px;line-height:1.2;font-size: 100%;font-weight: 700;color:var(--white);width:100%;height:100%;align-content:end;text-align:center;}
#page-header #toppermenu .menu li.menu-item-has-children .sub-menu li a span::after{position: absolute; content:'';background: linear-gradient(0deg, rgba(227,6,20,1) 0%, rgba(227,6,20,0) 100%);bottom: 0; right: 0;height: 50%;width: 100%;mix-blend-mode: multiply;z-index:-1;}
#page-header #toppermenu .menu li.menu-item-has-children .sub-menu li.current-menu-item a{color: var(--sec);}
#page-header #toppermenu .menu li.menu-item-has-children .sub-menu li a::before{display:none;}
#page-header #toppermenu .menu li.menu-item-has-children .sub-menu li.menu-item-has-children .sub-menu{left:100%;top:-10px;background:var(--main);}
#page-header #toppermenu .menu li.menu-item-has-children .sub-menu li.menu-item-has-children .sub-menu li a{color:var(--white);}

#page-header #menu-item-670 > a{cursor: default;}
#page-header .menubuttonburger{display:none;width:45px;height:40px;cursor:pointer;float:right;background:none;border:none;z-index: 2;position: relative;}
#page-header .menubuttonburger span{display:block;width:40px;height:3px;background:var(--white);transition:all .3s ease;}
#page-header .menubuttonburger span:nth-child(2){margin:7.5px 0;}
#page-header .menubuttonburger.active span:nth-child(1){transform:rotate(45deg);margin-top:0px;transition:all .3s ease;}
#page-header .menubuttonburger.active span:nth-child(2){opacity:0;transition:all .3s ease;}
#page-header .menubuttonburger.active span:nth-child(3){transform:rotate(-45deg);margin-top:-21px;transition:all .3s ease;}

#page-header.bottom{position:fixed;top:0;left:0;right:0;-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */              -moz-animation: fadein 2s; /* Firefox < 16 */-ms-animation: fadein 2s; /* Internet Explorer */-o-animation: fadein 2s; /* Opera < 12.1 */animation: fadein 2s;z-index:99999;}
#page-header.bottom .logo{margin:0;height:100%;align-content:center;}
#page-header.bottom .logo img{max-width:75%;margin:0 auto;display:block;}
#page-header.bottom #toppermenu{margin-top:0;}
#page-header.bottom #menu-topmenu{padding-right:15px;}
#page-header.bottom #toppermenu .menu li{padding:25px 15px 25px;}
#page-header.bottom #toppermenu .menu li.menu-item-has-children .sub-menu{top:82px;}
#page-header.bottom .telefon{display:none;}
#page-header.bottom .container{padding: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; }
}


.angebot{position: fixed;bottom:0;right: 2.5%;z-index: 999;width: 25%;padding:15px 25px 0;background:var(--sec);border-top-left-radius: 10px;border-top-right-radius: 10px;transition:all .3s ease;}.angebot .header{position:relative;cursor: pointer;z-index: 1;}
.angebot .header .headline{font-size:125%;margin-bottom:15px;color:var(--white);width:100%;}
.angebot .header .headline:before{content:'';background:url('media/plus.svg');background-size:100%;background-position:center;background-repeat:no-repeat;position:absolute;right:0;top:-10px;display:block;width:40px;height:40px;transition:all .3s ease;}
.angebot .content, .angebot .preiswrapper{height:0;opacity:0;transition:all .3s ease;margin:0;}
.angebot .content .angebotsheadline{font-size:200%;margin-bottom:0;color:var(--white);width:100%;display:block;font-weight:900;text-transform:uppercase;}
.angebot .content p{color:var(--white);line-height:1.2;}
.angebot .preiswrapper{display:flex;flex-direction:row;justify-content:center;}
.angebot .preiswrapper .streichpreis{font-size:135%;color:var(--white);font-weight:700;margin-right:50px;text-decoration:line-through;text-decoration-thickness:2px;}
.angebot .preiswrapper .angebotspreis{font-size:175%;color:var(--white);font-weight:700;line-height:1;padding:8px 25px 10px;background:var(--sec);border-radius:30px;}

.angebot.active{background: rgba(0,0,0,0.7);backdrop-filter: blur(50px);}
.angebot.active .content{height:auto;opacity:1;transition:all .3s ease;}
.angebot.active .preiswrapper{margin:30px 0;height:auto;opacity:1;transition:all .3s ease;}
.angebot.active .header .headline:before{transform:rotate(180deg);background:url('media/minus.svg');background-size:100%;background-position:center;background-repeat:no-repeat;transition:all .3s ease;}

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

#page-footer{background:var(--light);padding:50px 0 20px;position: relative;z-index: 1000;}
#page-footer .headline{font-size:115%;margin-bottom:15px;}

#page-footer .backtotop{transform: rotate(270deg);position:absolute;top:60px;left:-20px;width: max-content;}
#page-footer .backtotop a{cursor: pointer;}
#page-footer .backtotop .scrollup img{transform:rotate(90deg);margin-left:20px;}

#page-footer .zertifikate img{margin-bottom:10px;}

#page-footer .socialicons{text-align:right;}
#page-footer .socialicons a{display:block;margin-bottom:10px;}
#page-footer .socialicons a img{transition:all .3s ease;}
#page-footer .socialicons a:hover img{transform:scale(1.05);transition:all .3s ease;}

#page-footer .copyright{margin-top:100px;}
#page-footer .copyright span{display:block;text-align:center;font-size:75%;}
#page-footer .copyright a{font-size:75%;margin-right:50px;}
#page-footer .copyright a:last-child{margin-right:0;}
#page-footer .kontakt a{display: block;}



/*------------------------------------Modal-------------------------------------------------*/

.modal .inner{position:fixed;background:#fff;top:60px;z-index:99999999999;  margin-left: 50%;left: -300px;width:80%;max-width:600px;padding:40px;}
.modal .inner a{color:#cc0202;}
.modal .inner .popup-close{background:#cc0202;color:#fff;position:absolute;top:0;right:0;padding: 5px 15px;cursor:pointer;}
.modal_background{position:fixed;background:rgba(30,30,30,0.7);top:0;right:0;bottom:0;left:0;z-index:9999999999;}


/* -----------------------------------Image------------------------------------------------ */

.flx_bildblock img{min-width: 100%;}


/* -----------------------------------Headline--------------------------------------------- */

.flx_leistungblock .headline{text-align: left;}


/* -----------------------------------List Items------------------------------------------- */

.flx_textblock .text ul li::before{content: '';display: block;width: 10px;height: 10px;border-radius: 50%;background-color: black;position: relative;left: -25px;top: 22px;}