/**
 *
 * Theme Name:        Bruno-der-Gartenzwerg
 * 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:     #0E463A ;
    --acc:      #ED6C26 ;
    --sec:      #FC9D12;
    --acc-dark: #C23A14;
    --grey:     #F9F5F3;
    --white:    #fff;
}

body,html,*{font-size:16px;line-height:1.8;font-family:'Outfit';font-weight:300;}
html{scroll-behavior: smooth;}


a{color:var(--acc);text-decoration:underline;font-size:100%;transition:all .3s ease;}
a:hover{color:var(--main);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:500%;display:block;width:max-content;position:relative;color:var(--acc);margin:0;line-height:1;font-family:'Sour Gummy';text-transform:uppercase;width: 100%;}
h2{font-size:310%;display:block;color:var(--acc);margin:0;line-height:1;font-family:'Sour Gummy';text-transform:uppercase;width: 100%;}
h3{font-size:155%;display:block;color:var(--acc);margin:0;line-height:1;font-family:'Sour Gummy';text-transform:uppercase;width: 100%;}

.headline{font-weight:600;display:block;color:var(--acc);margin-bottom:25px;line-height:1;font-family:'Sour Gummy';text-transform:uppercase;width: 100%;}
.topline{font-size:115%;font-weight:500;text-transform: uppercase;padding-left: 35px;display:block;color:var(--main);margin-bottom: 1rem;width: max-content;max-width: 100%;font-family:'Sour Gummy';position: relative;}
.topline::before{position: absolute;content: '';background: url('media/pflanze-gruen.svg') no-repeat;background-size: 100%;left: 0;top: 4px;height: 24px;width: 24px;}

.btn{position:relative;padding:10px 20px 10px 50px;text-transform: uppercase;font-size:100%;font-weight:600;background:var(--sec);color:var(--grey);transition:all .3s ease;line-height:1;text-align:center;text-decoration:none;border-radius:20px;font-family:'Sour Gummy';margin-top: 1rem;}
.btn::before{content: '';position: absolute;background: url('media/schuppen.svg') no-repeat 100%;height: 19px;width: 19px;display: block;left: 20px;top: 6px;}
.btn::after{content: '';position: absolute;background: url('media/pflanze.svg') no-repeat;background-size: 100%;height: 26px;width: 26px;display: block;right: -6px;top: -15px;}
.btn:hover{background:var(--main);transition:all .3s ease;color:var(--grey);}

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

.container{max-width:1400px;}
.container.wide{max-width:1850px;}

button.burgerbutton{border: none;background-color: transparent;}

.swiper-button-prev::after{display: none;}
.swiper-button-next::after{display: none;}


/*------------------------------------Header-------------------------------------------------*/
/* #page-header{position:absolute;top:-120px;right:0;left:0;padding:0 0 40px 0;background:var(--grey);-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:99;} */
#page-header {position: fixed;top: 0;left: 0;right: 0;padding: 40px 0;background: var(--grey);box-shadow: 0px 10px 50px -35px rgba(0,0,0,0.5);z-index: 999;transition: all 0.3s ease;}
#page-header.single{padding: 70px 0 40px;}
#page-header.single, .schuppen #page-header{background:var(--white);}
#page-header.single .rechtes-menu, .schuppen #page-header .rechtes-menu{position: relative;}
#page-header.single .rechtes-menu .kontakt, .schuppen #page-header .rechtes-menu .kontakt{position: absolute;top: -50px;right: 50px;}
#page-header.single a.tel, #page-header.single a.mail,
.schuppen #page-header a.tel, .schuppen #page-header a.mail{display: flex;width: 30px;}
#page-header.single a.mail::before,
.schuppen #page-header a.mail::before{left: 50px;}

#page-header.bottom.single .rechtes-menu .kontakt, .schuppen #page-header.bottom .rechtes-menu .kontakt{display: none;}

#page-header .logocol{display: flex;justify-content: center;}
#page-header .logo{position: absolute;top: -60px;}
#page-header.single .logo{position: absolute;top: -80px;}
#page-header .logo img{max-height: 170px;}

#page-header .mobile-menu{display: none;}

#page-header .desktop-menu .menu{display: flex;}
#page-header .desktop-menu > .row{align-items: end;}
#page-header .desktop-menu .rechtes-menu .menu{justify-content: end;}
#page-header .desktop-menu .menu li{list-style: none;padding: 0 20px;}
#page-header .desktop-menu .menu li:last-child{padding-right: 0;}
#page-header .desktop-menu .menu li::before{display: none;}
#page-header .desktop-menu .menu li a{text-decoration: none;font-family: 'Sour Gummy';color: var(--acc);font-size: 125%;}
#page-header .desktop-menu .menu li a:hover{color: var(--main);}
#page-header .desktop-menu .menu-rechtes-menue-container li:last-child a{position:relative;padding:10px 20px 10px 50px;display: block;text-transform: uppercase;font-size:100%;font-weight:600;background:var(--sec);color:var(--grey);transition:all .3s ease;line-height:1;text-align:center;text-decoration:none;border-radius:20px;font-family:'Sour Gummy';}
#page-header .desktop-menu .menu-rechtes-menue-container li:last-child a:hover{background:var(--main);color:var(--grey);transition:all .3s ease;}
#page-header .desktop-menu .menu-rechtes-menue-container li:last-child a::before{content: '';position: absolute;background: url('media/schuppen.svg') no-repeat 100%;height: 19px;width: 19px;display: block;left: 20px;top: 6px;}
#page-header .desktop-menu .menu-rechtes-menue-container li:last-child a::after{content: '';position: absolute;background: url('media/pflanze-grau.svg') no-repeat;background-size: 100%;height: 26px;width: 26px;display: block;right: -6px;top: -15px;}

#page-header.bottom{padding:20px 0;position:fixed;top:0;left:0;right:0;background:var(--grey);-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 {padding: 20px 0;background: var(--grey);box-shadow: 0px 5px 20px -10px rgba(0,0,0,0.3);}
#page-header.bottom .desktop-menu > .row{align-items: center;}
#page-header.bottom .logo{top: 0;position: relative;}
#page-header.bottom .logo img{max-height: 80px;}

@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(--main);padding:3rem 0 0;margin-top: 3rem;}
#page-footer *{color: var(--grey);}
#page-footer a{text-decoration: none;}
#page-footer a:hover{text-decoration: underline;}

#page-footer .homelink{font-weight: 600;font-family: 'Sour Gummy';font-size: 155%;}
#page-footer .kontakt a{display: block;padding-left: 45px;position: relative;margin-bottom: 1rem;line-height: 1.8;}
a.tel::before{content: '';position: absolute;background: url('media/tel.svg') no-repeat 100%;height: 30px;width: 31px;display: block;left: 0;}
a.mail::before{content: '';position: absolute;background: url('media/mail.svg') no-repeat 100%;height: 31px;width: 31px;display: block;left: 0;}
a.adresse::before{content: '';position: absolute;background: url('media/adresse.svg') no-repeat 100%;height: 30px;width: 31px;display: block;left: 0;}

#page-footer .main{margin:3rem 0 0;display:block;}

#page-footer .bottom{padding: 2rem 0 1.5rem;}
#page-footer .footermenu ul{display: flex;justify-content: end;}
#page-footer .footermenu li{margin: 0 1rem;}
#page-footer .footermenu li:last-child{margin-right: 0;}


/*------------------------------------ACF-Flexible-Content-----------------------------------*/
.inhaltsbloecke{margin-top:110px;overflow:hidden;}
.startseite .inhaltsbloecke{margin-top:180px;}
.single .inhaltsbloecke{margin-top:140px;overflow:hidden;}
.inhaltsbloecke img{border-radius: 30px;}

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

/*Textblock*/
#ueber-uns{margin-top: -100px;padding-top: 100px;}
.flx_textblock.mitbildrechts.zweibilder .firstimage{width: 70%;float: right;max-height: 350px;object-fit: cover;}
.flx_textblock.mitbildrechts.zweibilder .secondimage{border: 14px solid #fff;position: relative;width: 70%;top: -70px;max-height: 350px;object-fit: cover;}

.flx_textblock.mitbildlinks.zweibilder .firstimage{width: 70%;}
.flx_textblock.mitbildlinks.zweibilder .secondimage{border: 14px solid #fff;position: relative;width: 80%;top: -70px;float: right;}
.flx_textblock.mitbildlinks .bild{padding-right: 50px;}
.flx_textblock.mitbildlinks .kontakt{display: flex;margin: 2rem 0;}
.flx_textblock.mitbildlinks .kontakt a{font-weight: 400;text-decoration: none;padding-left: 40px;position: relative;margin: .5rem 2rem .5rem 0;}
.flx_textblock.mitbildlinks .kontakt a.tel::before{content: '';position: absolute;background: url('media/tel-orange.svg') no-repeat 100%;height: 30px;width: 31px;display: block;left: 0;}
.flx_textblock.mitbildlinks .kontakt a.mail::before{content: '';position: absolute;background: url('media/mail-orange.svg') no-repeat 100%;height: 31px;width: 31px;display: block;left: 0;}

.flx_textblock.mitbildrechts .text .headline{font-size: 350%;}
.flx_textblock.mitbildrechts .bild{padding-left: 50px;}

.flx_textblock.textbilder .container{position: relative;}
.flx_textblock.textbilder .text{margin-bottom: 4rem;}
.flx_textblock.textbilder img{height: 100%;width: 100%;object-fit: cover;max-height: 440px;}
.flx_textblock.textbilder .bild-inner{position: absolute;right: 0;bottom: 6rem;max-width: 31%;height: 100%;}
.flx_textblock.textbilder .bild3{border: 14px solid #fff;height: 90%;position: absolute;bottom: 0;max-height:unset;}
.flx_textblock.textbilder .bild2{padding: 0;}

/*Logoslider*/
#partner{margin-top: -100px;padding-top: 100px;}
.flx_logoslider{position: relative;margin-top: 50px;}
.flx_logoslider .topline{font-size: 195%;padding-left: 0;text-align: center;margin: 0 auto 3rem;}
.flx_logoslider .topline::before{display: none;}
.flx_logoslider img{border-radius: 0;max-height: 90px;max-width: 160px;object-fit: contain;}
.flx_logoslider .swiper{padding: 0 80px;margin-bottom: 5rem;}
.flx_logoslider .swiper::before{position: absolute;left: -15px;top: -20px;bottom: 0;width: 70px;height: 160px;background: #fff;display: block;content: '';z-index: 5;filter: blur(5px);}
.flx_logoslider .swiper::after{position: absolute;right: -15px;top: -20px;bottom: 0;width: 70px;height: 160px;background: #fff;display: block;content: '';z-index: 5;filter: blur(5px);}
.flx_logoslider .swiper-wrapper{display: flex;align-items: center;}
.flx_logoslider .swiper-slide{text-align: center;}
.flx_logoslider .swiper-button-prev::before{content: '';display: block;position: absolute;background: url('media/arrow-orange.svg') no-repeat;background-size: 100%;height: 30px;width: 30px;top: calc(50% - 15px);left: 0;transform: rotate(180deg);z-index: 6;}
.flx_logoslider .swiper-button-next::before{content: '';display: block;position: absolute;background: url('media/arrow-orange.svg') no-repeat;background-size: 100%;height: 30px;width: 30px;top: calc(50% - 15px);right: 0;z-index: 6;}

/*Leistungsblock*/
/* #leistungen{margin-top: -100px;padding-top: 100px;} */
.flx_leistungsblock{background-color: var(--grey);position: relative;margin: 200px 0;}
.flx_leistungsblock::before{content:'';position: absolute;background: url('media/fransen.svg');top: -295px; left: 0;display:block;width: 100%;height: 100%;z-index: -1;}
.flx_leistungsblock::after{content:'';position: absolute;background: url('media/fransen.svg');bottom: -295px; left: 0;display:block;width: 100%;height: 100%;transform: rotate(180deg);z-index: -1;}
.flx_leistungsblock .center-image{position: relative;display: flex;justify-content: center;align-items: center;margin-top: 50px;}

.flx_leistungsblock .text{width: 80%;}
.flx_leistungsblock .leistung{position: absolute;z-index: 2;}
.flx_leistungsblock .lstng-text{cursor: pointer;background: var(--acc-dark);color: #fff;padding: 6px 25px;border-radius: 60px;font-weight: 600;text-transform: uppercase;max-width: 100%;display: block;text-align: center;font-family: 'Sour Gummy'; font-size: 125%;line-height: 1.3;transition: all ease .3s;}
.flx_leistungsblock .lstng-text:hover{background: var(--main);transition: all ease .3s;}
.flx_leistungsblock .lstng-text::before{content: '';display: block;width: 70px;height: 5px;position: absolute;background: var(--acc-dark);z-index: -1;}
.flx_leistungsblock .leistung.links .lstng-text::before{top: 45%;left: -4rem;transform: rotate(0deg);}
.flx_leistungsblock .leistung.rechts .lstng-text::before{top: 45%;right: -4rem;transform: rotate(0deg);}
.flx_leistungsblock .popup{display: none;position: fixed;top: 0; left: 0; right: 0; bottom: 0;background: rgba(0,0,0,0.6);justify-content: center;align-items: center;z-index: 1000;}
.flx_leistungsblock .popup[aria-hidden="false"]{display: flex;}
.flx_leistungsblock .popup-inner{background: #fff;padding: 50px;border-radius: 12px;max-width: 400px;text-align: left;position: relative;}
.flx_leistungsblock .popup-headline{font-size: 125%;font-weight: 600;margin-bottom: 2rem;font-family: 'Sour Gummy';line-height: 1.3;display: block;}
.flx_leistungsblock .popup-close{color: var(--acc);position: absolute;top: 10px; right: 10px;background: none;border: none;font-size: 18px;cursor: pointer;font-weight: 600;transition: all ease .3s;}
.flx_leistungsblock .popup-close:hover{color: var(--sec);transition: all ease .3s;}




/*Headerblock*/
.flx_headerblock.mitbild{padding: 0 0 70px!important;}
.flx_headerblock .bilderbox{position: relative;}
.flx_headerblock .bilderbox::before{position: absolute;content: '';top: 0;right: 0;bottom: 0;left: 0;width: 100%; height: 100%;background-color: #000a;}
.flx_headerblock .content{position: relative;}
.flx_headerblock .headerbox{position: absolute;z-index: 2;bottom: 10rem;display: block;text-align: center;left: 0;right: 0;}
.flx_headerblock .headerbox *{color: var(--grey);}
.flx_headerblock .iconbox{position: relative;z-index: 2;bottom: 90px;background-color: var(--grey);padding: 50px;display: flex;border-radius: 30px;margin: 0 auto -100px;}
.flx_headerblock .iconbox .item{display: flex;align-items: center;}
.flx_headerblock .iconbox .highlight{font-weight: 600;}
.flx_headerblock .iconbox p{line-height: 1.4;margin-bottom: 0px;}
.flx_headerblock .iconbox img{height: 70px;width: 70px;object-fit: contain;}
.flx_headerblock picture img{border-radius: 0;height: 70vh;width: 100%;object-fit: cover;}

.flx_headerblock.mitfarbe{padding: 100px 0 60px!important;}
.flx_headerblock.mitfarbe h1{font-size: 300%;}

/*Produktübersicht*/
/* .flx_produktubersicht{margin-bottom: 7rem;} */

/*Produktteaser*/
.flx_produktteaser .row{align-items: end;}
.flx_produktteaser .swiper{padding-bottom: 4rem;}
.flx_produktteaser .swiper-slide a{position: relative;height: max-content;display: block;}
.flx_produktteaser .kaufbadge::before{content: 'kaufen';position: absolute;background-color: var(--sec);color: var(--white);width: 100px;height: 30px;right: 25px;top: 25px;display: block;transition: all ease .3s;text-align: center;border-radius: 40px;font-weight: 600;text-transform: uppercase;}
.flx_produktteaser .mietenbadge::before{content: 'mieten';position: absolute;background-color: var(--main);color: var(--white);width: 100px;height: 30px;right: 25px;top: 25px;display: block;transition: all ease .3s;text-align: center;border-radius: 40px;font-weight: 600;text-transform: uppercase;}
.flx_produktteaser .mietenkaufenbadge::before{content: 'mieten/ kaufen';position: absolute;background-color: var(--acc-dark);color: var(--white);width: 100px;height: 60px;right: 25px;top: 25px;display: block;transition: all ease .3s;text-align: center;border-radius: 40px;font-weight: 600;text-transform: uppercase;line-height: 1;padding: 14px 0 0 0;}
.flx_produktteaser .swiper-topseller img{aspect-ratio: 1/1;object-fit: contain;width: 100%;margin-bottom: 1rem;background-color: #f5f5f5;padding: 30px;}
.flx_produktteaser a{text-decoration: none!important;}
.flx_produktteaser a:focus-visible{height: max-content;}
.flx_produktteaser .detail .headline{width: 100%;margin-bottom: 0;color: var(--main);min-height: 50px;}
.flx_produktteaser .detail span{font-weight: 500;font-size: 115%;}
.flx_produktteaser h2{font-size: 150%;}

.flx_produktteaser .swiper-saison img{aspect-ratio: 1/1.2;object-fit: contain;width: 100%;margin-bottom: 1rem;background-color: #f5f5f5;padding: 30px;}
.flx_produktteaser .swiper-pagination{text-align: left;}
.flx_produktteaser .swiper-button-prev{top: unset;left: unset;right: 70px;bottom: 15px;height: 30px;width: 30px;}
.flx_produktteaser .swiper-button-next{top: unset;left: unset;bottom: 15px;height: 30px;width: 30px;}
.flx_produktteaser .swiper-button-prev::before{content: '';display: block;position: absolute;background: url('media/arrow-orange.svg') no-repeat;background-size: 100%;height: 30px;width: 30px;bottom: 0;left: 0;transform: rotate(180deg);z-index: 6;}
.flx_produktteaser .swiper-button-next::before{content: '';display: block;position: absolute;background: url('media/arrow-orange.svg') no-repeat;background-size: 100%;height: 30px;width: 30px;bottom: 0;left: 0;z-index: 6;}


.swiper-pagination-bullet{height: 17px;width: 17px;border-radius: 50%;background-color: var(--acc);}
.swiper-pagination-bullet-active{background-color: var(--acc-dark);}

/*Kontaktformular*/
.flx_kontaktblock{background-color: var(--grey);padding: 100px 0!important;}
.flx_kontaktblock .formularinner{background-color: var(--white);border-radius: 30px;padding: 60px 50px 20px;}
.flx_kontaktblock .textinner p{width: 90%;}
#kontakt{margin-top: -100px;padding-top: 100px;}

/*Kontaktform 7*/
label[for="nachricht"] span{margin-left: .5rem;}
input{height: 45px;}

label,
.wpcf7 p{margin-bottom: 0;}

input,
textarea{border-radius: 10px;background-color: var(--grey);width: 100%;border: none;margin-bottom: 1rem;}

input#confirm{width: max-content;margin: 8px 10px 0 0;height: max-content;}
input#submit{width: max-content;padding: 10px 30px;float: right;margin-top: 0;background-color: var(--main);}
input#submit:hover{background-color: var(--acc);}
.wpcf7-form-control-wrap label{display: flex;}
.wpcf7-not-valid-tip{margin: -15px 0 10px;}
.wpcf7-acceptance .wpcf7-list-item{margin: 0;}

.wpcf7-form.sent .row{display: none;}
.wpcf7-form.sent .wpcf7-response-output{border-color: var(--main)!important;background-color: var(--main);padding: 20px;text-align: center;font-weight: 500;color: var(--white);border-radius: 10px;}



/*---------------------------------Shopseite---------------------------------*/

.schuppen .inhaltsbloecke{margin-top: 100px;}


/*---------------------------------PHP SINGLE---------------------------------*/
#phpsingle{margin-top: 300px;}
#phpsingle img{border-radius: 20px;}
#phpsingle .grid-container{display: grid;grid-template-columns: repeat(3, 1fr);grid-auto-rows: 140px;gap: 1rem;}
#phpsingle .fancybox:first-child{grid-column: 1 / span 3;grid-row: 1 / span 3;width: 100%;object-fit: cover;max-height: 450px;}
#phpsingle .grid-container img{width: 100%;height: 100%;object-fit: contain;}

#phpsingle h1{font-size: 315%;margin-bottom: 2rem;}
#phpsingle h2{font-size: 215%;margin-bottom: 1rem;}

#phpsingle .kurzbeschreibung{margin: 2rem 0;}
#phpsingle .preis{color: var(--sec);font-size: 200%;font-weight: 600;line-height: 1;margin-bottom: 1rem;}

#phpsingle .popup{display: none;position: fixed;z-index: 9999;left: 0; top: 0;width: 100%; height: 100%;background: rgba(0,0,0,0.6);overflow: scroll;}
#phpsingle .popup[aria-hidden="false"]{display: block;}
#phpsingle .popup-inner{background: #fff;max-width: 1000px;margin: 4% auto;padding: 30px;border-radius: 30px;position: relative;}
#phpsingle .popup-close{position: absolute;top: 0px;right: 15px;background: none;border: none;font-size: 40px;cursor: pointer;}

#phpsingle .mieten-btn{position: relative;padding:10px 30px;text-transform: uppercase;font-size:100%;font-weight:600;background:var(--main);color:var(--white);transition:all .3s ease;line-height:1;text-align:center;text-decoration:none;border-radius:20px;font-family:'Sour Gummy';margin-top: 1rem;border: none;}
#phpsingle .mieten-btn:hover{background:var(--acc);color:var(--white);transition:all .3s ease;}
/* #phpsingle .mieten-btn::after{content: '';position: absolute;background: url('media/pflanze.svg') no-repeat;background-size: 100%;height: 26px;width: 26px;display: block;right: -6px;top: -15px;} */

#phpsingle .kaufen-btn{position: relative;padding:10px 30px;text-transform: uppercase;font-size:100%;font-weight:600;background:var(--sec);color:var(--white);transition:all .3s ease;line-height:1;text-align:center;text-decoration:none;border-radius:20px;font-family:'Sour Gummy';margin: 0 1rem 1rem 0;border: none;}
#phpsingle .kaufen-btn:hover{background:var(--acc);color:var(--white);transition:all .3s ease;}
/* #phpsingle .kaufen-btn::after{content: '';position: absolute;background: url('media/pflanze.svg') no-repeat;background-size: 100%;height: 26px;width: 26px;display: block;right: -6px;top: -15px;} */

#phpsingle .produktdetails{background-color: var(--grey);padding: 100px 0;margin: 75px 0;}
#phpsingle .produktdetails .editor{width: 75%;}
#phpsingle .produktdetails .h2{margin-bottom: 2rem;}

/*Ähnliche Produkte (Single) und Produktübersicht*/
#phpsingle .ahnliche-produkte,
.flx_produktubersicht .produkt-item{text-align: center;margin-bottom: 6rem;}
.flx_produktubersicht .headline,
#phpsingle .ahnliche-produkte .headline{margin-bottom: 3rem;}
.flx_produktubersicht img,
#phpsingle .ahnliche-produkte img{aspect-ratio: 1 / 1; object-fit: contain;margin-bottom: 2rem;width: 100%;background-color: #f5f5f5;padding: 30px;}
#phpsingle .ahnliche-produkte span,
.flx_produktubersicht a span{margin-top: 1rem;padding: 10px 20px ;background-color: var(--sec);color: var(--white);transition: all ease .3s;border-radius: 20px;font-family: 'Sour GUmmy';text-transform: uppercase;font-weight: 400;}
#phpsingle .ahnliche-produkte span:hover,
.flx_produktubersicht a span:hover{background-color: var(--main);color: var(--white);transition: all ease .3s;}
.flx_produktubersicht a,
#phpsingle .ahnliche-produkte a{text-decoration: none;}
.flx_produktubersicht a:focus-visible,
#phpsingle .ahnliche-produkte a:focus-visible{height: max-content;display: block;}
#phpsingle .ahnliche-produkte .headline,
.flx_produktubersicht .produkt-item .headline{color: var(--main);}






/*-------------------------------------------RESPONSIVE--------------------------------------------------------*/


@media (max-width:1480px){

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

    .flx_leistungsblock .center-image{justify-content: space-evenly;}
    .flx_leistungsblock .leistungen{display: flex;flex-direction: column;gap: 2rem;}
    .flx_leistungsblock .leistung{position: unset;}
    .flx_leistungsblock .lstng-text{width: max-content;text-align: left;}
    .flx_leistungsblock .lstng-text::before{display: none;}

}
/*-------------------------------------------------------------------------------------------*/
@media (max-width:1199px){
    #page-header,
    #page-header.single{padding: 15px 0;}
    #page-header .desktop-menu{display: none;}
    #page-header .menues{display: none;}
    #page-header .menues.active{display: block;display: block;position: absolute;right: 0;top: 0;width: 50%;padding: 10rem 4rem 4rem 4rem;background-color: var(--grey);height: 100vh;box-shadow: 0 5px 10px #0005;}
    #page-header .menues.active li{padding-left: 0;padding-bottom: 1rem;}
    #page-header .menues.active li a{text-decoration: none;font-size: 125%;font-weight: 600;text-transform: uppercase;font-family: 'Sour Gummy';}
    #page-header .menues.active li::before{display: none;}
    #page-header .mobile-menu{display: flex;}
    #page-header .logo{position: unset;}
    #page-header .logo img{max-height: 100px;}
    #page-header .mobile-menu .menu.active{display: block;}

    #page-header .burgerbutton{display: block;width:40px;height: 40px;cursor: pointer;  -webkit-transform: rotate(0deg);  -moz-transform: rotate(0deg);  -o-transform: rotate(0deg);  transform: rotate(0deg);  -webkit-transition: .5s ease-in-out;  -moz-transition: .5s ease-in-out;  -o-transition: .5s ease-in-out;  transition: .5s ease-in-out;  cursor: pointer;z-index: 100;right: 35px;position: absolute;border: none;background-color: transparent;top: 30px}
    #page-header .burgerbutton span{margin: 8px 0; display: block;height: 4px;border-radius: 4px;width: 100%;background-color: var(--acc);opacity: 1;left: 0;-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 .burgerbutton.active span:nth-child(1) {-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg);margin-top: 12.5px;background-color: var(--acc);}
    #page-header .burgerbutton.active span:nth-child(2){display: none;}
    #page-header .burgerbutton.active span:nth-child(3) {-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-o-transform: rotate(-45deg);transform: rotate(-45deg);margin-top: -11.5px;background-color: var(--acc);}


    #page-header.single .logo{position: unset;}

    .inhaltsbloecke,
    .schuppen .inhaltsbloecke,
    .single .inhaltsbloecke,
    .startseite .inhaltsbloecke{margin-top: 130px;}

    .flx_textblock.mitbildlinks .text{order: 1;margin-bottom: 3rem;}
    .flx_textblock.mitbildlinks .bild{order: 2;}

    .flx_leistungsblock{margin: 150px 0;}

    .flx_kontaktblock .formularinner{margin: 20px;}

    #phpsingle{margin-top: 200px;}
}
/*-------------------------------------------------------------------------------------------*/
@media (max-width:991px) {

    .topline{line-height: 1;}
    .topline::before{top: -2px;}
    h1{font-size: 290%!important;}
    h2{font-size: 220%!important;}
    h3{font-size: 110%!important;}

    .flx_produktteaser .detail .headline{font-size: 130%!important;}
    .flx_textblock.mitbildrechts .text{margin-bottom: 2rem;}

    .flx_textblock.textbilder .bild2{padding: 0 15px;}
    .flx_textblock.textbilder .bild-inner{bottom: 0;max-width: 33%;height: max-content;}
    .flx_textblock.textbilder .bild3{border: 0;height: max-content;position: unset;}
    
    .flx_leistungsblock .text{width: 100%;}
    
    .flx_leistungsblock .center-image{flex-direction: column;}
    .flx_leistungsblock .leistungen{margin-top: 3rem;gap: 1rem;flex-wrap: wrap;justify-content: center;flex-direction: unset;}
    .flx_leistungsblock .leistung{width: max-content;margin: 0;}

    .flx_produktteaser .topseller{margin-bottom: 5rem;}

    .flx_produktubersicht .headline, #phpsingle .ahnliche-produkte .headline{margin-bottom: 2rem;}

    #phpsingle .produktdetails .editor{width: 100%;}
    
}
/*-------------------------------------------------------------------------------------------*/
@media (max-width:767px) {
    
    #page-header .menues.active{width: 70%;}
    
    .flx_textblock.mitbildlinks .kontakt{flex-direction: column;}
    
    .flx_textblock.textbilder .bild-inner{display: none;}
    /* .flx_textblock.textbilder .bild img{margin-bottom: 2rem;display: block;} */
    .flx_textblock.textbilder .bild .row > div{margin-bottom: 2rem;}
    
    #phpsingle .ahnliche-produkte, .flx_produktubersicht .produkt-item{text-align: left;}
    h3{font-size: 160%!important;}

    #phpsingle .grid-container{order: 2;}
    #phpsingle .infos{order: 1;}

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

    *{font-size: 14px;}

    #page-header .menues.active{width: 80%;}

    .flx_headerblock .iconbox{padding: 30px;}

    .flx_logoslider img{max-height: 60px;max-width: 100px;}

    .flx_textblock.textbilder .bild-inner{display: block;position: unset;max-width: unset;}

    .flx_produktteaser .mietenkaufenbadge::before{height: 53px;}
    .flx_produktteaser .mietenbadge::before,
    .flx_produktteaser .kaufbadge::before{height: 26px;}
}
/*-------------------------------------------------------------------------------------------*/
@media (max-width:400px) {

    #page-header .menues.active{width: 100%;}


}