/** * * Theme Name: RBBL Design * 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: #071F35 ; --mainhover: #1B3043; --sec: #444444 ; --button: #FF2A37; --buttonhover: #e5202c; --white: #ffffff; --lightgray: #E9E9E9; --blue: #0037E7; --dark: #151515; } body,html,*{font-size:20px;line-height:1.5;font-family:'Inter 18pt';font-weight:300; } html{scroll-behavior: smooth;} p{font-family:'Inter 18pt';font-weight:300;} a{color:var(--main);text-decoration:underline;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; filter: grayscale(1); transition: all 0.3s ease;} img:hover{filter: grayscale(0);} h1{font-size:300%;display:block; font-weight: 900; position:relative;color:var(--main);margin:0;line-height:1.1;} h2{font-size:250%;display:block; font-weight: 900; color:var(--main);margin:0;line-height:1.1;letter-spacing: 1px;} h3{font-size:150%;display:block; font-weight: 900; color:var(--main);margin:0;line-height:1.1;letter-spacing: 1px;} .headline{font-weight:600;display:block;color:var(--main);margin-bottom:25px;line-height:1.1;} .subline{font-size:160%;font-weight:300;display:block;color:var(--sec);margin-bottom:25px;} .btn{position:relative;padding:13px 50px 15px 50px; border-radius: 0; font-size:110%;font-weight:900;background:var(--button);color:var(--white);transition:all .3s ease;line-height:1;text-align:center;text-decoration:none; text-transform: uppercase;} .btn:hover{background:var(--buttonhover);transition:all .3s ease;color:var(--white);} .btn.blue{color: var(--blue); background-color: var(--white);} .btn.blue:hover{background-color: var(--lightgray);} .btn.light{border:none;background:none;color:var(--main);padding:0 30px 0 0;position:relative;} .btn.light:after{content:'';display:block;width:20px;height:20px;background:url('media/right-circle.svg');background-repeat:no-repeat;background-position:center;background-size:100%;position:absolute;top:0;right:0;transition:all .3s ease;} .btn.light:hover{color:var(--buttonhover);} .btn.light:hover:after{right:-5px;transition:all .3s ease;} strong{font-weight:600;font-size:100%;} .container{max-width:1640px;} .container.wide{max-width:1850px;} /*------------------------------------Header-------------------------------------------------*/ #page-header{position:absolute;top:0;right:0;left:0;padding:0;background:var(--white);-webkit-box-shadow: 0px 10px 50px -35px rgba(0,0,0,0.5);-moz-box-shadow: 0px 10px 50px -35px rgba(0,0,0,0.5);box-shadow: 0px 10px 50px -35px rgba(0,0,0,0.5);z-index:9999;} #page-header .logo img{max-height: 100px; filter: none;} #page-header .mainheader{padding:15px 0;} #page-header{padding:20px 0;} #page-header #toppermenu .menu li.menu-item-has-children .submenu-toggle{position: relative; display: inline-block; background-color: transparent;border: none; vertical-align: middle; width: 25px; height: 25px; margin-left: 5px; line-height: 1; padding: 0;} #page-header #toppermenu .menu li.menu-item-has-children .submenu-toggle:focus-visible{outline: auto;} #page-header #toppermenu .menu li.menu-item-has-children .submenu-toggle::after{content: '';display: block;width: 10px;height: 25px;background: url('media/arrow-left.svg');background-size: contain;background-position: center;background-repeat: no-repeat;transform: rotate(-91deg);position: absolute;top: 0;margin-top: 0;right: 0;transition:all .3s ease;cursor: pointer;} #page-header #toppermenu .menu li.menu-item-has-children.open .submenu-toggle::after{transform: rotate(91deg);transition:all .3s ease;cursor: pointer;} #page-header #toppermenu .menu li.menu-item-has-children .submenu .submenu-toggle::after{content: '';display: block;width: 10px;height: 25px;background: url('media/arrow-left.svg');background-size: contain;background-position: center;background-repeat: no-repeat;transform: rotate(-91deg);position: absolute;top: 0;margin-top: 0;right: 0;transition:all .3s ease;cursor: pointer;} #page-header #toppermenu .menu li.menu-item-has-children .sub-menu{display:none;position:absolute;top:30px;left:0;width:300px;background:var(--white);-webkit-box-shadow: 0px 10px 50px -25px rgba(0,0,0,0.5);-moz-box-shadow: 0px 10px 50px -25px rgba(0,0,0,0.5);box-shadow: 0px 10px 50px -25px rgba(0,0,0,0.5);z-index:1000;text-align:left;padding:10px 0 10px 15px;} #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:0px 15px;width:100%;text-align:left; transition:all .3s ease;} #page-header #toppermenu .menu li.menu-item-has-children .sub-menu li a{padding:5px 30px 5px 0px;color:var(--green); transition:all .3s ease;} #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:hover{background-color:var(--blue); color: var(--white);} #page-header #toppermenu .menu li.menu-item-has-children .sub-menu li:hover a{background-color:var(--blue); color: var(--white);} #page-header #toppermenu .menu li.menu-item-has-children .sub-menu li.current-menu-item a{color:var(--blue);} #page-header #toppermenu .menu li.menu-item-has-children .sub-menu li.current-menu-item:after{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(--red);} #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 .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 10px;} #page-header .mainheader #toppermenu .menu li:before{display:none;} #page-header .mainheader #toppermenu .menu li a{padding:30px 0;text-decoration:none;position:relative; text-transform: uppercase; font-weight: 900;} #page-header .mainheader #toppermenu .menu li a::before{content: '';position: absolute;width: 50px;height: 10px;background-color: var(--blue);bottom: 20px;left: 0;transform-origin: right;transform: scaleX(0);transition: transform .3s ease-in-out;} #page-header .mainheader #toppermenu .menu li a:hover::before{transform-origin: left;transform: scaleX(1);} #page-header .mainheader #toppermenu .menu li:last-child a{background-color: var(--button); color: var(--white); padding: 10px 45px; transition: all 0.3s ease;} #page-header .mainheader #toppermenu .menu li:last-child a:hover{background-color: var(--buttonhover);} #page-header .mainheader #toppermenu .menu li:last-child a:hover::before{display: none;} #page-header .mainheader #toppermenu .menu li .sub-menu{display:none;background:#fff;padding:0;width:fit-content;border-radius:0;transform:none;text-align:left;margin:0;z-index:1;position:absolute;left:15px;top:50px;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 li{display: block; padding: 15px; transition: all 0.3s ease; margin: 0;} #page-header .mainheader #toppermenu .menu li .sub-menu li a{padding: 5px; background-color: var(--white); color: var(--dark); transition: all 0.3s ease; font-weight: 900; width: 100%;} #page-header .burgerbutton{display:none; z-index: 999; width:40px;height:30px;position:absolute;top:50%;right:55px;cursor:pointer; background: none; border: none; transform: translateY(-50%);} #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 .mainheader #toppermenu.open{display: block;position:absolute; align-content: baseline; top:-10px;right:0;bottom:0;transition:all .3s ease;background:var(--white);height:100vh; width: 50vw; padding-top: 50px;} #page-header .mainheader #toppermenu.open .menu{position:relative; padding: 25px; text-align: center; display: none;} #page-header .mainheader #toppermenu.open .menu.active{display: block;} #page-header .mainheader #toppermenu.open .menu li{display:block;margin:0 10px;padding:20px 25px;position:unset;} #page-header .mainheader #toppermenu.open .menu li:before{display:none;} #page-header .mainheader #toppermenu.open .menu li a{padding:30px 0;text-decoration:none;position:relative; font-weight: 900;} #page-header .mainheader #toppermenu.open .menu li a::before{content: '';position: absolute;width: 50px;height: 10px;background-color: var(--blue);bottom: 20px;left: 0;transform-origin: right;transform: scaleX(0);transition: transform .3s ease-in-out;} #page-header .mainheader #toppermenu.open .menu li a:hover::before{transform-origin: left;transform: scaleX(1);} #page-header .mainheader #toppermenu.open .menu li:last-child a{background-color: var(--button); color: var(--white); padding: 10px 45px; transition: all 0.3s ease;} #page-header .mainheader #toppermenu.open .menu li:last-child a:hover{background-color: var(--buttonhover);} #page-header .mainheader #toppermenu.open .menu li .sub-menu{top: 85px; left: 50%; transform: translateX(-50%);} #page-header .mainheader #toppermenu.open .menu li .sub-menu li:hover{background-color: var(--blue);} #page-header .mainheader #toppermenu.open .menu li .sub-menu li:last-child a{background-color: var(--white); color: var(--dark); padding: 10px 0;} #page-header .mainheader #toppermenu.open .menu li .sub-menu li:last-child a::before{display: none;} #page-header.bottom{padding:20px 0;position:fixed;top:0;left:0;right:0;background:var(--white);-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:9999;} #page-header.bottom .topheader{display:none;} #page-header.bottom .logo img{max-width:50%;} #page-header.bottom .mainheader{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; } } /*------------------------------------Footer-------------------------------------------------*/ #page-footer{background:var(--dark);padding:75px 0 0; overflow: hidden;} #page-footer span, #page-footer a,#page-footer p{color: var(--white); display: block;} #page-footer .container{position: relative;} #page-footer .container::after{content: 'RBBL DESIGN'; letter-spacing: 5px; color: var(--white); opacity: 0.1; font-size: 800%; font-weight: 900; z-index: 0; position: absolute; bottom: -75px; left: 0;} #page-footer .backtotop .scrollup{cursor:pointer;} #page-footer .backtotop .scrollup:hover img{transform:scale(1.1);transition:all .3s ease;} #page-footer .backtotop .scrollup img{margin:0 auto;display:block;transition:all .3s ease;} #page-footer .topfooter{margin-bottom: 60px;} #page-footer .main{display:block; position: relative;} #page-footer .main .headline{color:var(--white);font-size:150%;font-weight:900;display:block;margin-bottom:15px; margin-left: 15px; text-transform:none; display: inline-block;} #page-footer .main .logo{display: inline-block;} #page-footer .main .logo img{filter: none; display: inline-block;} #page-footer .main .ueberschrift{font-weight: 900; margin-bottom: 15px;} #page-footer .main .kontakt a{margin-bottom: 15px; padding-left: 50px; position: relative;} #page-footer .main .kontakt .adresse::before{content: ''; display: block; position: absolute; width: 25px; height: 25px; left: 0; top: 3px; background: url("media/adresse.svg") no-repeat; background-size: contain;} #page-footer .main .kontakt .telefon::before{content: ''; display: block; position: absolute; width: 25px; height: 25px; left: 0; top: 3px; background: url("media/telefon.svg") no-repeat; background-size: contain;} #page-footer .main .kontakt .email::before{content: ''; display: block; position: absolute; width: 25px; height: 25px; left: 0; top: 3px; background: url("media/email.svg") no-repeat; background-size: contain;} #page-footer .main .zeiten .zeit,#page-footer .main .zeiten .tag{color: var(--white);} #page-footer .main .leistungen a{margin-bottom: 7.5px;} #page-footer .socials{position: absolute; top: 0; right: 0;} #page-footer .socials .instagram{width: 40px; height: 40px;} #page-footer .socials .instagram img{width: 100%;} #page-footer .socials .folgeuns{font-weight: 900; font-size: 150%; color: var(--white); width: max-content; position: relative; transform: rotate(270deg); color: var(--white); position: absolute; top: 250px; right: -63px;} #page-footer .socials .folgeuns::after{content:''; width: 100px; height: 3px; background-color: var(--white); display: block; position: absolute; top: 50%; right: -120px; transform: translateY(-50%);} #page-footer .bottom{width: 100%; padding: 100px 0 50px;} #page-footer .bottom .copyright{display:flex; justify-content: space-between; align-items: center; z-index: 1;} #page-footer .bottom .copyright .center{position: absolute; left: 50%; transform: translateX(-50%); text-align: center; font-size: 75%;} #page-footer .bottom .copyright .links{display: flex;gap: 35px; margin-left: auto;} #page-footer .bottom .copyright a{display:inline-block;color:var(--white);font-size:75%;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(--white);bottom: -3px;left: 0;transform-origin: right;transform: scaleX(0);transition: transform .3s ease-in-out;} @media (max-width:1600px) { #page-header{padding: 0;} #page-header .mainheader #toppermenu .menu li{margin: 0 5px; padding: 0 10px;} #page-header .mainheader #toppermenu .menu li a{font-size: 80%;} #page-header .mainheader #toppermenu .menu li:last-child a{padding: 10px 20px;} } @media (max-width: 1399px) { img{filter: none;} } @media (max-width:1199px) { #page-header .logo img{max-height: 70px;} #page-header .burgerbutton{display: block;} #page-header #toppermenu.open{height: 100vh;transition: all ease .5s;} #page-header #toppermenu .menu{display:none;position:absolute;top:0;right:0;left:0;bottom:0;transition:all .3s ease;} #page-header #toppermenu .menu.active{display: block;transition:all .3s ease;} #page-footer .bottom .copyright .links{margin-top: 75px;} #page-footer .container::after{font-size: 500%; bottom: -40px;} } @media (max-width:991px) { #page-footer .container{padding-right: 50px;} #page-footer .container::after{font-size: 350%; bottom: -30px;} #page-footer .socials{right: -40px;} #page-footer .main .kontakt,#page-footer .main .zeiten,#page-footer .main .leistungen{padding-top: 50px;} } @media (max-width:767px) { h1,h1.headline{font-size: 350%;} h2,h2.headline{font-size: 200%;} h3,h3.headline{font-size: 150%;} #page-header .burgerbutton{right: 40px;} #page-header.bottom .burgerbutton{right: 40px;} #page-header .mainheader #toppermenu.open{width: 100vw;} #page-footer .container::after{font-size: 250%; bottom: -20px;} } @media (max-width:576px) { #page-header .logo img{max-height: 50px;} #page-header.bottom .logo img{max-width: 100%;} #page-footer .bottom .copyright .links{gap: 15px;} }