/**
 *
 * Theme Name:        YPA Theme
 * 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{
    --acc:          #C7D830;
    --acc-hover:    #A9C706;
    --white:        #ffffff;
    --dark:         #0A2336;
    --lightgrey:    #F7F7F7;
    --darkgrey:     #747B81;
    --lila:         #A268A6;
    --orange:       #F77B25;

    --br-sm:        15px;
    --br-md:        30px;
    --br-lg:        50px;
    }


body,html,*{font-size:19px;line-height:1.6;font-family:'Archivo';font-weight:500; color: var(--dark);scroll-behavior: smooth;}
html{scroll-behavior: smooth;overflow-x: hidden !important;}
body{overflow-x: hidden !important;}

a{color:var(--acc);text-decoration:none;font-size:100%;transition:all .3s ease;}
a:hover{text-decoration:none;color:var(--acc-hover);transition:all .3s ease;}
a:focus{text-decoration:none;}
a:focus-visible{outline: auto;}
p{font-weight: 300;margin-bottom: 0;}
p a{text-decoration: underline;}
p a:hover{color: var(--acc);}

strong{font-weight: 700;}

ul{padding:0;margin:0;}
li{list-style:none;padding-left:20px;position:relative;}
ul li{margin-bottom: 0.75rem;}
ul li:before{content:'';width:10px;height:10px;display:block;background-color: var(--dark);background-repeat:no-repeat;background-size:100%;
    position:absolute;top:11px;left:0; border-radius: 50%;}

header ul li{margin-bottom: 0;}
header ul li:before{display: none;}
.woocommerce ul li:before{display: none;}
#archive ul li:before{display: none;}



ol{padding-left: 20px;margin:0;}
ol li{list-style: decimal;padding-left: 30px;}

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


.headline{font-weight: 800;display: block;color: var(--dark);}
.topline{color: var(--dark);width: fit-content;position: relative;font-weight: 300;margin-bottom: 15px;font-size: 115%;line-height: 1.2;}
.subline{font-weight: 300;display: block;color: var(--dark);font-size: 115%;margin-bottom: 50px;}
h1{font-size:340%;text-transform:uppercase;display:block;position:relative;color:var(--dark);margin-bottom: 30px;line-height:1.2; font-weight: 700;}
h2{font-size:265%;display:block;color:var(--white);text-transform: uppercase;margin-bottom: 50px;line-height:1.2; font-weight: 700;}
h3{font-size:140%;display:block;color:var(--white);margin-bottom: 30px;line-height:1.2; font-weight: 700;}

.btn{position:relative;padding:15px 60px;font-weight: 700;background: var(--acc); color:var(--dark);transition:all .3s ease;text-align: center;border-radius: var(--br-sm);margin-top: 50px;letter-spacing: 1px;font-size: 110%;}
.btn:hover{background: var(--acc);transition: all .3s ease;background-color: var(--acc-hover); color:var(--dark);}
.submitbtn{width: fit-content; position: relative; line-height: 1.5; border: none; padding:15px 60px;margin-top: 5px;font-size:100%;font-weight:700;background:var(--acc);color:var(--dark);transition:all .3s ease;text-align:center; border-radius: var(--br-sm);float: right;}
.submitbtn:hover{background-color: var(--acc-hover);color: var(--dark);}
.btn:focus-visible{outline: auto;background-color: var(--acc-hover);color: var(--dark);}
.btn-zweitezeile{font-size: 85%;font-weight: 100;letter-spacing: 0;}
.btn.pfeil{float: right;background-color: transparent;padding: 0 17px 0 0;position: relative; margin-top: 0;}
.btn.pfeil::after{content: '';position: absolute;height: 17px;width: 9px;display: block;right: 0;top: 9px;background: url('media/arrow-right.svg') no-repeat;background-size: 100%;}

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

.container{max-width:1640px;width: 100%;}

#BorlabsCookieBox ul li::before{display: none;}

/*Swiper*/
.swiper-wrapper{padding-bottom: 80px;}
.swiper .nav{width: max-content!important;display: flex!important;justify-content: space-between;margin: 0 auto!important;position: relative;padding: 0 100px;max-width: 100%;}
.swiper-button-prev{position: absolute;margin-right: 40px;}
.swiper-button-prev::before{content: '';background: url('media/slider-btn.svg') no-repeat;background-size: 100%;height: 45px;width: 45px;display: block;top: 0;left: 0;transform: rotate(180deg);}
.swiper-button-next{position: absolute;margin-left: 40px;}
.swiper-button-next::before{content: '';background: url('media/slider-btn.svg') no-repeat;background-size: 100%;height: 45px;width: 45px;display: block;top: 0;right: 0;}

svg.swiper-navigation-icon{display: none;}
.swiper-pagination{width: max-content;margin: 0 auto;position: relative;gap: 25px;display: flex;justify-content: center;bottom: 0!important;}
.swiper-pagination-bullet{background-color: var(--darkgrey);height: 14px;width: 14px;border: none;opacity: 1;margin: 0 var(--swiper-pagination-bullet-horizontal-gap,0px);}
.swiper-pagination-bullet-active{background-color: var(--acc);height: 14px;width: 14px;border: none;}

/*CF7*/
input.btn:hover{transition:all .3s ease;}
input#submit{margin-top: 0;border: none;}
.fluentform input, .fluentform textarea{border: none!important; width: 100%; border-radius: var(--br-sm)!important; padding: 12px 25px!important; background-color: #edeeee!important;} 
#fluentform_5 input, #fluentform_5 textarea{border-radius: 20px!important;}
.wpcf7-form.sent .row{display: none;} 
.wpcf7-form.sent .wpcf7-response-output{border-color: var(--acc)!important;padding: 40px;text-align: center;border-radius: var(--br-sm);background-color: var(--acc);font-size: 115%;font-weight: 600;} 

label{width: 100%; font-size: 80%; color: var(--dark); font-weight: 600; margin-bottom: 15px; position: relative;}
select{width: 100%; background-color: #edeeee; border: none; border-radius: var(--br-sm); padding: 10px; color: var(--white);}
input{width: 100%; border: none; border-radius: var(--br-sm); padding: 10px 25px; background-color: #edeeee;}
textarea{width: 100%; max-height: 150px; border: none; border-radius: var(--br-sm); padding: 10px 25px; background-color: #edeeee;}
input[type="checkbox"]{width: fit-content;}
.wpcf7-form-control-wrap{width: 100%; display: block;margin-top: 5px;}
.wpcf7-list-item{margin: 0;}

.submitbtn .wpcf7-submit{padding: 0; border-radius: 0; background-color: transparent;}
.submitbtn .wpcf7-spinner{position: absolute; right: -40px;}
.formular a{text-decoration:underline;color: var(--dark);}
.pflicht p{font-size: 80%;float: right;}
.datenschutz p{width: 60%;}
.wpcf7-acceptance #confirm{position: absolute; left: 0; top: 3px; padding: 0; cursor: pointer; width: 20px; height: 20px; appearance: none; border: 2px solid var(--lila); border-radius: var(--br-sm); cursor: pointer;}
.wpcf7-acceptance #confirm:checked {position: absolute; left: 0; top: 3px; padding: 0; cursor: pointer; width: 20px; height: 20px; appearance: none; border: 2px solid var(--lila); border-radius: var(--br-sm); cursor: pointer;background-color: var(--acc);}
.wpcf7-acceptance .wpcf7-list-item-label label{font-size: 80%; padding-left: 30px;font-weight: 300;}

.btn-primary{border: none!important;}
.ff_t_c{font-size: 90%;}

.ff_tc_label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer;}
.ff_tc_checkbox {flex: 0 0 auto; line-height: 1; padding-right: 5px;}
.ff_tc_checkbox input[type="checkbox"] {display: block; padding: 0!important;
  appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin: 2px 0 0; border: 2px solid var(--acc); border-radius: 50%; background: transparent;
  display: grid; place-content: center; cursor: pointer;}
.ff_tc_checkbox input[type="checkbox"]::before { content: ""; display: block; width: 18px; height: 18px; border-radius: 50%; background: var(--acc); transform: scale(0); transition: transform 120ms ease-in-out;}
.ff_tc_checkbox input[type="checkbox"]:checked::before {transform: scale(1);}
.ff_tc_checkbox input[type="checkbox"]:focus-visible {outline: 2px solid var(--acc); outline-offset: 3px;}
.ff_tc_checkbox input[type="checkbox"]::after {content: ""; position: absolute; inset: 50%; width: 10px; height: 10px; border-radius: 50%; background: #fff;
  transform: translate(-50%, -50%) scale(0); transition: transform 120ms ease-in-out; pointer-events: none;}
.ff_tc_checkbox input[type="checkbox"]:checked::after {transform: translate(-50%, -50%) scale(1);}

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

#page-header{position:absolute;top:0;right:0;left:0;padding:20px 0;background:var(--white);z-index:999;}

#page-header .logowrapper{align-content:center;}
#page-header .logo:focus-visible{height: max-content;display: block;}

#page-header .infos{text-align: end;}
#page-header .infos a{padding-left: 75px; position: relative;color: var(--dark);font-weight: 500;}
#page-header .infos .login::before{background-image: url('media/login.svg');content: ''; display: block; position: absolute; background-repeat: no-repeat; background-size: contain; width: 20px; height: 20px; left: 47px; top: -1px;}
#page-header .logo img{max-width: 120px;}
#page-header .search{width: 270px;display: inline-block;}
#page-header .search input{border-top-left-radius: 10px;border-bottom-left-radius: 10px;border: none!important;background-color: var(--lightgrey);}
#page-header .search input:focus-visible{outline: auto;}
#page-header .search input::placeholder{color: var(--darkgrey)!important;}
#page-header .search .is-search-icon{border-top-right-radius: 10px;border-bottom-right-radius: 10px;border: none;}
#page-header .search .is-search-icon:hover{background-color: #ededed;}
#page-header .search button:focus-visible{outline: auto;}
div.is-ajax-search-result,
.is-ajax-search-post{border-radius: var(--br-sm);}
.is-ajax-search-details a, 
.is-ajax-search-result a{color: var(--dark);}


#page-header #toppermenu{padding-top: 35px;}
#page-header #toppermenu .menu{text-align: end;}
#page-header #toppermenu .menu li{display: inline-block; padding-left: 75px;position: relative;}
#page-header #toppermenu .menu li::before{display: none;}
#page-header #toppermenu .menu li a{padding:30px 0;text-decoration:none;position:relative;color: var(--dark);font-weight: 500;font-size: 115%;}
#page-header #toppermenu .menu li a:hover{color: var(--acc);}
/* #page-header #toppermenu .menu li a::before{content: '';position: absolute;width: 100%;height: 2px;border-radius: var(--br-sm);background-color: var(--white);bottom: 25px;left: 0;transform-origin: right;transform: scaleX(0);transition: transform .3s ease-in-out;} */
/* #page-header #toppermenu .menu li a:hover::before{transform-origin: left;transform: scaleX(1);} */
#page-header #toppermenu .menu li:last-child a{position:relative; padding: 15px 60px;font-size:115%;background:var(--acc);color:var(--dark)!important;transition:all .3s ease;line-height:1;text-align:center; border-radius: var(--br-sm);}
/* #page-header #toppermenu .menu li:last-child a::before{display: none;} */
#page-header #toppermenu .menu li.current-menu-item a{color: var(--acc);}
#page-header #toppermenu .menu li:last-child a:hover{color: var(--white); background-color: var(--lightgrey);}
/* #page-header #toppermenu .menu li:has(.sub-menu){padding-right: 30px;} */
#page-header #toppermenu .menu li:has(.sub-menu):after{content: ''; position: absolute; display: block; background-image: url('media/arrow_down.svg'); background-repeat: no-repeat; background-size: contain; width: 17px; height: 17px; right: 0px; top: 9px; transition: all 0.3s ease;}

#page-header #toppermenu .menu li .sub-menu li a{display: block; text-transform: uppercase; background-color: transparent;text-decoration:none;position:relative; padding: 0; text-align: left; line-height: 1.5;}
#page-header #toppermenu .menu li .sub-menu li a:after{display: none;}
#page-header #toppermenu .menu li .sub-menu li a::before{display: none;}
#page-header #toppermenu .menu li .sub-menu{display: none; width: 300px; position: absolute;top: 50px; background-color: var(--acc); padding: 10px; border-radius: var(--br-sm);}
#page-header #toppermenu .menu li:hover .sub-menu{display: block;}
#page-header #toppermenu .menu li .sub-menu li{background-color: transparent; width: 100%; padding: 10px; border-radius: var(--br-sm);}

#page-header #toppermenu .menu li .sub-menu li:hover{background-color: var(--lightgrey);}
#page-header #toppermenu .menu li .sub-menu li a:hover{background-color: transparent;}

#page-header #toppermenu.active{display: block;}

#page-header li.menu-item-has-children.open .submenu-toggle::after{transform: rotate(180deg);transition:all .3s ease;cursor: pointer;}
#page-header li.menu-item-has-children .submenu-toggle{position: relative;background-color: transparent;border: none;width: 30px;height: 20px;}
#page-header li.menu-item-has-children .submenu-toggle:focus-visible{outline: auto;}
#page-header li.menu-item-has-children .submenu-toggle::after{content: '';display: block;width: 15px;height: 10px;background: url('media/arrow-down.svg');background-position-x: 0%;background-position-y: 0%;background-repeat: repeat;background-size: auto;background-size: 100%;background-position: center;background-repeat: no-repeat;transform: rotate(0deg);position: absolute;top: 7px;margin-top: 0;right: 0;transition: all .3s ease;cursor: pointer;}


#page-header .burgerbutton{display:none; z-index: 999; width:40px;height:30px;position:absolute;top:50%;right:27px;cursor:pointer; background: none; border: none; transform: translateY(-50%);}
#page-header .burgerbutton span{display:block;width:100%;height:3px;margin:8px 0;background:var(--acc);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:0; right:0; bottom:0; transition:all .3s ease;background:var(--white);height:100vh;  width: 50vw; padding-top: 50px;box-shadow: 0 0 13px #0002;}
#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.current-menu-item a{color: var(--acc);}
#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: 900;font-size: 140%;}
#page-header .menu-mobile .menu li a::before{content: '';position: absolute;width: 100%;height: 2px;border-radius: var(--br-sm);background-color: var(--acc);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(--acc); padding: 10px 20px; border-radius: var(--br-sm); 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(--white); background-color: var(--red-hover);}


#page-header.bottom{padding: 10px 0;position:fixed;top:0;left:0;right:0;background: #fff7;-webkit-animation: fadein 2s;-moz-animation: fadein 2s; 
    -ms-animation: fadein 2s; -o-animation: fadein 2s; animation: fadein 2s;z-index:999; backdrop-filter: blur(35px);}
#page-header.bottom .infos{display:none;}
#page-header.bottom #toppermenu{padding-top:0;}
#page-header.bottom #toppermenu.active{padding-top: 75px;}
#page-header.bottom .logo img{width:auto; max-height: 80px;}
#page-header.bottom .container > .row{align-items: center;}

.sidebar{position: fixed;right: 20px;bottom: 50px;display: block;z-index: 999;height: 350px;}
.sidebar .onlinetermin{background-image: url('https://www.ypa.web101.moco-server.de/wp-content/uploads/2026/02/online-termin.webp');height: 120px;width: 110px;display: block;position: absolute;right: 0;top: -20px;background-size: 100%;background-repeat: no-repeat;transition: all ease .3s;}
.sidebar .onlinetermin:hover{animation: sidebarHover 0.6s ease-in-out 1;}
.sidebar .rabatt{background-image: url('https://www.ypa.web101.moco-server.de/wp-content/uploads/2026/02/rabatt.webp');height: 100px;width: 100px;display: block;position: absolute;right: 0;top: 120px;background-size: 100%;background-repeat: no-repeat;transition: all ease .3s;}
.sidebar .rabatt:hover{animation: sidebarHover 0.6s ease-in-out 1;}
.sidebar .azubiticket{background-image: url('https://www.ypa.web101.moco-server.de/wp-content/uploads/2026/02/azubiticket.webp');height: 140px;width: 90px;display: block;position: absolute;right: 0;top: 230px;background-size: 100%;background-repeat: no-repeat;transition: all ease .3s;}
.sidebar .azubiticket:hover{animation: sidebarHover 0.6s ease-in-out 1;}
.sidebar-toggle{position: fixed;right: 15px;bottom: 15px;width: 55px;height: 55px;border-radius: 50%;background: var(--acc);color: var(--white);font-size: 30px;border: none;cursor: pointer;z-index: 100;display: none;transition: all ease .3s;}
.sidebar-toggle::before{content: "+";position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);font-size: 32px;color: #fff;line-height: 1;height: 37px;}
.sidebar-toggle.active{position: fixed;right: 15px;bottom: 15px;width: 55px;height: 55px;border-radius: 50%;background: var(--acc);color: var(--white);font-size: 30px;border: none;cursor: pointer;z-index: 100;display: none;transform: rotate(45deg);transition: all ease .3s;}


.sidebar.intro-animation .onlinetermin,
.sidebar.intro-animation .rabatt,
.sidebar.intro-animation .azubiticket {animation-name: sidebarWiggle; animation-duration: 4.5s; animation-timing-function: ease-in-out; animation-iteration-count: 1; 
    animation-fill-mode: both; will-change: transform;}
.sidebar.intro-animation .onlinetermin {animation-delay: 0s;}
.sidebar.intro-animation .rabatt {animation-delay: 0.12s;}
.sidebar.intro-animation .azubiticket {animation-delay: 0.24s;}

@keyframes sidebarWiggle {
    0%   { transform: translateX(0) translateY(0) rotate(0deg); }
    12%  { transform: translateX(-10px) translateY(-4px) rotate(-3deg); }
    24%  { transform: translateX(8px) translateY(3px) rotate(2deg); }
    36%  { transform: translateX(-7px) translateY(-3px) rotate(-2deg); }
    48%  { transform: translateX(6px) translateY(2px) rotate(1.5deg); }
    60%  { transform: translateX(-5px) translateY(-2px) rotate(-1deg); }
    72%  { transform: translateX(4px) translateY(1px) rotate(0.5deg); }
    84%  { transform: translateX(-2px) translateY(0) rotate(-0.5deg); }
    100% { transform: translateX(0) translateY(0) rotate(0deg); }
}


@keyframes sidebarHover {
    0%   { transform: translateX(0) rotate(0deg); }
    25%  { transform: translateX(-6px) rotate(-3deg); }
    50%  { transform: translateX(5px) rotate(2deg); }
    75%  { transform: translateX(-3px) rotate(-1deg); }
    100% { transform: translateX(0) rotate(0deg); }
}


@keyframes fadein {
    from { top: -125px; }
    to   { top: 0; }
}
@-moz-keyframes fadein {
    from { top: -125px; }
    to   { top: 0; }
}
@-webkit-keyframes fadein {
    from { top: -125px; }
    to   { top: 0; }
}
@-ms-keyframes fadein {
    from { top: -125px; }
    to   { top: 0; }
}

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

#page-footer{background:var(--dark);padding:85px 0 15px; color: var(--white);z-index: 99;position: relative;}
#page-footer a{color: var(--white); font-size: 85%;}
#page-footer a:focus-visible{height: max-content;display: block;}
#page-footer a:hover{color: var(--acc);}
#page-footer .headline{font-size: 100%;text-transform: none;margin-bottom: 10px;}
#page-footer .logo{height: max-content;display: block;margin-bottom: 2rem;}
#page-footer .logo img{max-width: 150px;}

#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 .adresse{margin-bottom: 2rem;}
#page-footer .anfahrt{position: relative;}
#page-footer .anfahrt .headline.kontakt{padding-top: 25px;}
#page-footer .anfahrt .adresse p{ color: var(--white);}
#page-footer .anfahrt a{padding-left: 55px; position: relative; display: block; margin-bottom: 1.5rem; width: fit-content;}
#page-footer .anfahrt a::before{content: ''; display: block; position: absolute; background-repeat: no-repeat; background-size: contain; width: 40px; height: 40px; left: 0; top: -6px;}
#page-footer .anfahrt .email::before{background-image: url("media/mail.svg"); }
#page-footer .anfahrt .telefon::before{background-image: url("media/telefon.svg");}

#page-footer .socialmedia{position: relative;text-align: right;display: flex;justify-content: end;flex-wrap: wrap;align-content: start;}
#page-footer .socialmedia strong{width: 100%;height: max-content;margin-bottom: 10px;}
#page-footer .socialmedia *{color: var(--white);}
#page-footer .socialmedia a{position: relative; margin: 10px 0 0 10px; width: 40px;height: 40px;}
#page-footer .socialmedia a::before{content: ''; display: block; position: absolute; background-repeat: no-repeat; background-size: contain; width: 40px; height: 40px; left: 0; top: 0;}
#page-footer .socialmedia .instagram::before{background-image: url("media/instagram.svg"); }
#page-footer .socialmedia .linkedin::before{background-image: url("media/linkedin.svg");}

#page-footer .headerlink{position: absolute; transform: rotate(270deg); right: -100px; top: 55px; font-weight: 700;}
#page-footer .headerlink::after{content: ''; position: absolute; display: block; background-image: url('media/arrow_down.svg'); background-repeat: no-repeat; background-size: contain; width: 13px; height: 13px; right: -25px; top: 5px; transition: all 0.3s ease; transform: rotate(270deg);}


#page-footer .copyright, #page-footer .rechtliches{padding-top: 150px;}
#page-footer .copyright span{display:block;color:#fff;font-size:75%;font-weight: 100;}

#page-footer .rechtliches{text-align: end;padding-right: 0;}
#page-footer .rechtliches a{display: inline-block; padding: 0 10px;font-weight: 100;font-size:75%;}
#page-footer .rechtliches a:last-child{padding-right: 0;}

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

#phpsingle,
#primary,
.warenkorb .inhaltsbloecke,
.kasse .inhaltsbloecke,
#archive{margin-top:200px;}
.inhaltsbloecke{margin-top:180px;}
div[class^="flx_"], div[class*="flx_"]{margin:0 0 150px 0;}

/* .flx_headerblock{overflow: hidden;} */
.flx_headerblock .container{position: relative; z-index: 10;}
.flx_headerblock h1{font-size: 340%;width: 100%;} 
.flx_headerblock .topline{color: var(--dark);}

#headerblock{background-position: center;}
.flx_headerblock.mitslider{position:relative; background-repeat: no-repeat; background-position: top; background-size: cover;}
.flx_headerblock.mitslider::before{content: '';position: absolute;bottom: -40px;left: 0;height: 360px;width: 50%;border-top-right-radius: var(--br-lg);background-color: #fffb;backdrop-filter: blur(10px);}
.flx_headerblock.mitslider .slider{height: 73vh;}
.flx_headerblock.mitslider .swiper{height: 100%;width: 800px;margin: 0;}
.flx_headerblock.mitslider .swiper-slide{background-size: cover; background-repeat: no-repeat; background-position: center;}
.flx_headerblock.mitslider .container{position: relative;height: 100%;}
.flx_headerblock.mitslider .headlinebox{position: absolute;bottom: -20px;width: 750px;}

.flx_headerblock.nurtext{padding: 100px 0 0;}

.flx_textblock:not(.dark) h1, .flx_textblock:not(.dark) h2, .flx_textblock:not(.dark) h3{color: var(--dark);}

.flx_textblock.dark{background-color: var(--dark); padding: 75px 0;}
.flx_textblock.dark .topline,.flx_textblock.dark .headline,.flx_textblock.dark p, .flx_textblock.dark strong{color: var(--white);}
.flx_textblock.dark .btn-zweitezeile{color: var(--dark);}


.flx_textblock .text h2:not(.headline){margin: 30px 0 15px;}
.flx_textblock .text h3:not(.headline){color: var(--dark); margin: 30px 0 15px;}
.flx_textblock .text h4:not(.headline){margin: 30px 0 15px;}
.flx_textblock .text p{margin-bottom: 1rem;}
.flx_textblock .text .btn p{margin-bottom: 0;}

.flx_textblock.nurtext{padding-top: 100px;}
.flx_textblock.nurtext ol li{padding-left: 10px; padding-top: 20px;}
.flx_textblock.nurtext ol li::marker{font-size: 150%;}
.flx_textblock.nurtext em{font-style: normal;}
.flx_textblock.nurtext p{margin-bottom: 5px;}

.flx_textblock.mittrainer .text{align-content: center;}
.flx_textblock.mittrainer .trainer{align-content: center;}
.flx_textblock.mittrainer .trainerrow{padding: 0 50px;}
.flx_textblock.mittrainer .trainerrow .traineritem{padding-left: 7.5px; padding-right: 7.5px; margin-bottom: 15px;}
.flx_textblock.mittrainer .trainerrow .traineritem img{border-radius: 15px; transition: all 0.3s ease;}
.flx_textblock.mittrainer .trainerrow .traineritem a:hover img{scale: 1.1;}

.flx_bildblock{margin-bottom: 0!important;} 

/*Videoblock*/
.flx_videoblock.dunkel .videocontainer{border-radius: 80px;}
.flx_videoblock iframe{border-radius: 80px;background-color: var(--darkgrey);aspect-ratio: 16 / 9;height: auto;}
.flx_videoblock .text{text-align: center;}
.flx_videoblock .topline{width: 100%;}
.flx_videoblock p{width: 80%;margin: 0 auto 60px;}

.flx_videoblock.hell{margin-bottom: 200px;}
.flx_videoblock.hell .video{position: relative;}
.flx_videoblock.hell .ausbildungpep{position: absolute;left: -70px;top: calc(50% - 210px);transition: all ease .3s;}
.flx_videoblock.hell .ausbildungpep:hover{top: calc(50% - 220px);transition: all ease .3s;}
.flx_videoblock.hell .azubiticket{position: absolute;right: 50px;top: -50px;transition: all ease .3s;}
.flx_videoblock.hell .azubiticket:hover{top: -60px;transition: all ease .3s;}
/* .flx_videoblock.hell .azubiticket img{width: 200px;} */
.flx_videoblock.hell iframe{background-color: #F7F7F7;width: 80%;margin: 0 auto;display: block;}
.flx_videoblock.hell .videocontainer{position: relative;}
.flx_videoblock.hell .videocontainer::before{content: '';position: absolute;width: 450px;height: 450px;left: 30px;bottom: -120px;background: url('media/farbpunkte-orange.png') no-repeat;background-position: center;background-size: 100%;z-index: -1;display: block;}
.flx_videoblock.hell .videocontainer::after{content: '';position: absolute;width: 450px;height: 450px;right: 30px;top: -120px;background: url('media/farbpunkte-violett.png') no-repeat;background-position: center;background-size: 100%;z-index: -1;display: block;}

.flx_videoblock.dunkel{background-color: var(--dark);padding: 130px 0 100px;}
.flx_videoblock.dunkel *{color: var(--white);}
.flx_videoblock.dunkel .videocontainer{position: relative;box-shadow: 0 6px 20px #0005;}
.flx_videoblock.dunkel .videocontainer::before{content: '';position: absolute;width: 100%;height: 100%;left: -40%;top: -60%;background: url('media/spirale.svg') no-repeat;background-position: center;background-size: 100%;z-index: 0;display: block;}
.flx_videoblock.dunkel iframe,
.flx_videoblock.dunkel .text{position: relative;z-index: 1;}


/*Kachelblock*/
.flx_kachelblock .kachel{margin-bottom: 10px;display: block;padding: 0 5px;position: relative;top: 0;transition: all ease .3s;}
.flx_kachelblock .kachel:hover{top: -5px;transition: all ease .3s;}
.flx_kachelblock .kachel .inner{background-color: var(--lightgrey);padding: 40px 30px;height: 100%;border-radius: var(--br-lg);border: 1px solid #fff;box-shadow: 0 3px 7px #bbb5;}
.flx_kachelblock .kachel .grafik{position: relative;margin-bottom: 2rem;height: 80px;}
.flx_kachelblock .kachel .farbkreis{width: 60px;height: 60px;border-radius: 50%;display: block;opacity: .6;transition: all ease .3s;position: absolute;}
.flx_kachelblock .kachel:hover .farbkreis{width: 105px;height: 105px;border-radius: 50%;display: block;opacity: .6;transition: all ease .3s;}
.flx_kachelblock .kachel img{height: 45px; width: 45px;object-fit: contain;position: absolute;top: 30px;left: 30px;}

.flx_kachelblock.textkachel .kachel:nth-child(1)::after{content: '';position: absolute;right: -15px;bottom: -20px;height: 30px;width: 30px;border-radius: 50%;background-color: #747B81;display: block;}
.flx_kachelblock.textkachel .kachel:nth-child(2)::after{content: '';position: absolute;right: -15px;bottom: -20px;height: 30px;width: 30px;border-radius: 50%;background-color: #747B81;display: block;}
.flx_kachelblock.textkachel .kachel .inhalt{font-size: 115%;display: block;line-height: 1.3;font-weight: 600;}

.flx_kachelblock.kreislauf .headline{margin-bottom: 10px;}
.flx_kachelblock.kreislauf .subline{margin-bottom: 50px;}
.flx_kachelblock.kreislauf .headline,
.flx_kachelblock.kreislauf .subline,
.flx_kachelblock.kreislauf .topline{width: 100%;text-align: center;}
.flx_kachelblock.kreislauf .highlight{font-size: 260%!important;font-weight: 600;position: absolute;top: 28px;left: 25px;z-index: 5;line-height: 1;}
.flx_kachelblock.kreislauf .kacheln{position: relative;}
.flx_kachelblock.kreislauf .kacheln::before{content: '';position: absolute;height: calc(100% - 370px);transform: translateY(200px);width: 100%;top: 0;left: 0;right: 0;bottom: 0;border: 5px solid var(--darkgrey);border-radius: var(--br-lg);z-index: -1;}
.flx_kachelblock.kreislauf .kacheln .row{justify-content: center;width: 90%;margin: 0 auto;}
.flx_kachelblock.kreislauf .kachel{padding: 25px;}
.flx_kachelblock.kreislauf .kachel p{font-size: 115%;display: block;line-height: 1.3;}
.flx_kachelblock.kreislauf .kachel strong{font-size: 115%;display: block;line-height: 1.3;font-weight: 600;}
.flx_kachelblock.kreislauf .kachel br{display: none;}

/*Portfolio*/
.flx_portfolio .grid-container{grid-template-columns: repeat(6, 1fr);grid-template-rows: repeat(5, 1fr);display: grid;grid-gap: 15px;}
.flx_portfolio img{width: 100%;height: auto;border-radius: var(--br-sm);}


/*Kundenslider*/
.flx_kundenslider *{text-align: center;width: 100%;}
.flx_kundenslider .kunde{background-color: var(--lightgrey);border-radius: var(--br-md);display: flex;align-items: center;justify-content: center;height: 130px; position: relative;}
.flx_kundenslider .kunde a{height: 100%; align-content: center;}
.flx_kundenslider .kunde img{object-fit: contain;padding: 10px 0;width: 80%;height: auto; max-height: 100%; display: block;margin: 0 auto;;}

.flx_kundenslider .elemente{position: relative;}
.flx_kundenslider .elemente::before {content: '';width: 17%;height: 100%;position: absolute;left: 0;top: 0;background: linear-gradient(90deg, #fff 0%, #fff0 100%);z-index: 2;filter: blur(50px);}
.flx_kundenslider .elemente::after {content: '';width: 17%;height: 100%;position: absolute;right: 0;top: 0;background: linear-gradient(-90deg, #fff 0%, #fff0 100%);z-index: 1;filter: blur(10px);}
.flx_kundenslider .kundenslider{margin-bottom: 40px;height: 130px;}
.flx_kundenslider .kundenslider.last{margin-bottom:0px;}
.flx_kundenslider .kundenslider > .swiper-wrapper{transition-timing-function : linear;}

.kundenslider .swiper-slide{width: 210px;flex-shrink: 0;margin-right: 20px}
.kundenslider .swiper-wrapper{display: flex;align-items: center;}

.flx_kundenslider .btn{width: max-content;margin: 4rem auto 0;}


/*FAQ*/
.flx_faq .text p{padding-right: 50px;} 
.flx_faq .accordion{background-color: transparent;}
.flx_faq .accordion-item{background-color: transparent; border: none; border-bottom: #0E283C66 1px solid;}
.flx_faq .accordion-button{background: transparent; color: var(--dark); box-shadow: none; font-size: 70%; font-weight:500; padding: 30px 20px;}
.flx_faq .accordion-button:hover{color: var(--acc);}
.flx_faq .accordion-button::after{height: 1.5rem; width: 1.5rem; background-size: 1.5rem;}
.flx_faq .accordion-button.collapsed::after{content: '';font-size: 1.2rem;color: var(--dark);background-image: url(media/plus.svg);transform: none;}
.flx_faq .accordion-button:not(.collapsed)::after{content: '';font-size: 1.2rem;color: var(--dark);background-image: url(media/minus.svg);transform: none;}
.flx_faq .accordion-item:last-child{border-bottom: none;}
.flx_faq .accordion-body{padding: 10px 20px 30px;font-weight: 300;} 


/*Kontaktblock*/
.flx_kontakt{background-color: var(--lightgrey);padding: 100px 0;margin-bottom: 0!important;}
.flx_kontakt .headline{margin-bottom: 30px;}
.flx_kontakt .anspartner{align-items: center;}
.flx_kontakt .bild{margin: 40px 40px 40px 0;flex: 0 1 200px;}
.flx_kontakt img{width: 160px;height: 160px;object-fit: cover;border-radius: 50%;}
.flx_kontakt .kontaktinfo a{display: block; margin-bottom: 15px;padding-left: 55px;position: relative;color: var(--dark);transition: all ease .3s;}
.flx_kontakt .kontaktinfo a:hover{color: var(--acc);transition: all ease .3s;}
.flx_kontakt .tel::before{content: '';position: absolute;background: url('media/telefon-hell.png') no-repeat;background-size: 100%;background-position: center;height: 40px;width: 40px;display: block;left: 0;top: -3px;}
.flx_kontakt .mail::before{content: '';position: absolute;background: url('media/mail-hell.png') no-repeat;background-size: 100%;background-position: center;height: 40px;width: 40px;display: block;left: 0;top: -3px;}
.flx_kontakt .name{font-weight: 600;font-size: 115%;margin-bottom: 15px;}


/*Kundenstimmen*/
.flx_kundenstimmen{position: relative;}
.flx_kundenstimmen .headline{margin-bottom: 130px;}
.flx_kundenstimmen .headline,
.flx_kundenstimmen .topline{width: 100%;text-align: center;}
.flx_kundenstimmen .swiper{overflow: visible;}
.flx_kundenstimmen .swiper-slide{background-color: var(--lightgrey);border-radius: var(--br-md);padding: 50px 60px 80px;text-align: center;}
.flx_kundenstimmen .top{display: flex;justify-content: space-between;margin-bottom: 60px;align-items: flex-start;}
.flx_kundenstimmen .logo{width: auto;height: 40px;object-fit: contain;}
.flx_kundenstimmen .kundenstimme{width: 80%;margin: 0 auto 50px;}
.flx_kundenstimmen .kundenstimme p{font-size: 115%;font-style: italic;}
.flx_kundenstimmen .bild{position: absolute;left: calc(50% - 80px);top: -70px;width: 160px;height: 160px;object-fit: cover;border-radius: 50%;}

.flx_kundenstimmen::before {content: '';width: 7%;height: 100%;position: absolute;left: 0;top: 0;background: linear-gradient(90deg, #ffff 20%, #fff5 100%);z-index: 2;filter: blur(30px);}
.flx_kundenstimmen::after {content: '';width: 7%;height: 100%;position: absolute;right: 0;top: 0;background: linear-gradient(-90deg, #ffff 20%, #fff5 100%);z-index: 1;filter: blur(30px);}


/*Azubistimme*/
.flx_azubistimmen{margin-bottom: 100px!important;padding-top: 100px;}
.flx_azubistimmen .inner{align-items: center;}
.flx_azubistimmen .azubistimme{margin-bottom: 1rem;}
.flx_azubistimmen .row.outer{align-items: center;}
.flx_azubistimmen .swiper .nav{margin: 0!important;position: relative;bottom: 30px;}
/* .flx_azubistimmen .text{margin-top: 2rem;} */


/*Angebotsblock*/
.flx_angebotsblock{background-color: var(--dark);padding: 100px 0;position: relative;}
.flx_angebotsblock::before{content: '';position: absolute;width: 100%;height: 100%;left: 0;top: 0;background: url('media/spirale.svg') no-repeat;background-position: center;background-size: 100%;z-index: 0;display: block;}
.flx_angebotsblock *{color: var(--white);}
.flx_angebotsblock .btn{color: var(--dark);}
.flx_angebotsblock .container{position: relative;z-index: 1;}
.flx_angebotsblock .text{position: relative;}
.flx_angebotsblock .headline{width: 75%;}
.flx_angebotsblock .rabatt{display: block;height: 120px;width: 120px;background-repeat: no-repeat;position: absolute;right: 0px;top: 70px;transition: all ease .3s;}
.flx_angebotsblock .rabatt:hover{top: 60px;transition: all ease .3s;}
.flx_angebotsblock .angebot .inner{backdrop-filter: blur(8px);text-align: center;padding: 50px 35px 50px;border-radius: var(--br-lg);height: 100%;}
.flx_angebotsblock .highlight{font-size: 140%;margin-bottom: 40px;font-weight: 500;}
.flx_angebotsblock .subline{font-size: 110%;margin-bottom: 40px; font-weight: 600;}
.flx_angebotsblock .vorteil{margin-bottom: 25px;padding-top: 30px;position: relative;font-size: 100%;}
.flx_angebotsblock .vorteil::before{content: '';position: absolute;width: 17px;height: 13px;left: calc(50% - 8.5px);top: 0;background: url('media/check.svg') no-repeat;background-position: center;background-size: 100%;display: block;}
.flx_angebotsblock .angebot1 .inner{border: 1px solid var(--lila);background-color: #A268A633;}
.flx_angebotsblock .angebot1 .inner::before{content: '';position: absolute;width: 150px;height: 150px;background-color: #A268A699;filter: blur(50px);bottom: 90px;left: 10px;display: block;border-radius: 50%;}
.flx_angebotsblock .angebot1 .vorteil::before{filter: brightness(0) saturate(100%) invert(50%) sepia(10%) saturate(2407%) hue-rotate(248deg) brightness(91%) contrast(74%);}
.flx_angebotsblock .angebot2 .inner{border: 1px solid var(--orange);background-color: #F77B2533;}
.flx_angebotsblock .angebot2 .inner::before{content: '';position: absolute;width: 150px;height: 150px;background-color: #F77B2599;filter: blur(50px);bottom: 160px;right: 10px;display: block;border-radius: 50%;}
.flx_angebotsblock .angebot2 .vorteil::before{filter: brightness(0) saturate(100%) invert(68%) sepia(65%) saturate(3788%) hue-rotate(342deg) brightness(97%) contrast(100%);}
.flx_angebotsblock .angebot3 .inner{border: 1px solid #C7D830;background-color: #C7D83033;}
.flx_angebotsblock .angebot3 .vorteil::before{filter: brightness(0) saturate(100%) invert(83%) sepia(25%) saturate(1210%) hue-rotate(15deg) brightness(99%) contrast(89%);}
.flx_angebotsblock .angebot3 .inner::before{content: '';position: absolute;width: 150px;height: 150px;background-color: #C7D83099;filter: blur(50px);top: 90px;right: 10px;display: block;border-radius: 50%;}


/*Bilderslider*/
.flx_slider{position: relative;}
.flx_slider .topline,
.flx_slider .headline{width: 100%;text-align: center;}
.flx_slider::before {content: '';width: 7%;height: 100%;position: absolute;left: 0;top: 0;background: linear-gradient(90deg, #ffff 20%, #fff5 100%);z-index: 2;filter: blur(30px);}
.flx_slider::after {content: '';width: 7%;height: 100%;position: absolute;right: 0;top: 0;background: linear-gradient(-90deg, #ffff 20%, #fff5 100%);z-index: 1;filter: blur(30px);}

.flx_slider .slider-wrapper{position: relative;}
.flx_slider .swiper .nav{margin-top: 1rem!important;}

.flx_slider .swiper{overflow:visible;}
.flx_slider .slide-image img{height:100%;width:100%;object-fit: cover;aspect-ratio: 1 / 1;border-radius: var(--br-md);}


/*PEP Inhalte*/
.flx_pep_inhalte{background-color: #EFEFEF;padding: 100px 0;margin-bottom: 0!important;}
.flx_pep_inhalte .information{margin-bottom: 55px;}
.flx_pep_inhalte .information,
.flx_pep_inhalte .headline,
.flx_pep_inhalte .topline{width: 100%;text-align: center;}
.flx_pep_inhalte .nav-pills{justify-content:center;gap:20px;margin-bottom:50px;}
.flx_pep_inhalte .nav-pills .nav-item{margin-bottom:15px;}
.flx_pep_inhalte .nav-pills .nav-link{position:relative;padding:15px 45px;font-weight:700;color:var(--dark);transition:all .3s ease;text-align:center;border-radius:var(--br-sm);letter-spacing:1px;font-size:110%;text-transform:uppercase;border:2px solid transparent;box-shadow:0 3px 7px #bbbf;}
.flx_pep_inhalte .nav-pills .nav-link:hover{color:var(--dark);transform:translateY(-2px);box-shadow:0 6px 12px #bbb;}
.flx_pep_inhalte .nav-pills .nav-link.active,.flx_pep_inhalte .nav-pills .show > .nav-link{color:var(--dark);transform:translateY(-2px);box-shadow:0 6px 12px #bbb;}
.flx_pep_inhalte .nav-pills .nav-link.nav-link-0{background-color:var(--lila);border-color:var(--lila);}
.flx_pep_inhalte .nav-pills .nav-link.nav-link-0:hover,.flx_pep_inhalte .nav-pills .nav-link.nav-link-0.active{background-color:var(--lila);border-color:var(--lila);}
.flx_pep_inhalte .nav-pills .nav-link.nav-link-1{background-color:var(--orange);border-color:var(--orange);}
.flx_pep_inhalte .nav-pills .nav-link.nav-link-1:hover,.flx_pep_inhalte .nav-pills .nav-link.nav-link-1.active{background-color:var(--orange);border-color:var(--orange);}
.flx_pep_inhalte .nav-pills .nav-link.nav-link-2{background-color:var(--acc);border-color:var(--acc);}
.flx_pep_inhalte .nav-pills .nav-link.nav-link-2:hover,.flx_pep_inhalte .nav-pills .nav-link.nav-link-2.active{background-color:var(--acc-hover);border-color:var(--acc-hover);}
.flx_pep_inhalte .nav-pills .nav-link::before{display:none;}
.flx_pep_inhalte .nav-link-0{background-color:var(--lila);border-color:var(--lila);}
.flx_pep_inhalte .nav-link-0:hover,.flx_pep_inhalte .nav-link-0.active{background-color:var(--lila);border-color:var(--lila);}
.flx_pep_inhalte .nav-link-1{background-color:var(--orange);border-color:var(--orange);}
.flx_pep_inhalte .nav-link-1:hover,.flx_pep_inhalte .nav-link-1.active{background-color:var(--orange);border-color:var(--orange);}
.flx_pep_inhalte .nav-link-2{background-color:var(--acc);border-color:var(--acc);}
.flx_pep_inhalte .nav-link-2:hover,.flx_pep_inhalte .nav-link-2.active{background-color:var(--acc-hover);border-color:var(--acc-hover);}.flx_pep_inhalte img{border-radius: var(--br-md);border: 1px solid var(--white);box-shadow: 0 3px 7px #bbbf;margin-bottom: 1rem;position: relative;}
.flx_pep_inhalte .jahr{position: relative;}
.flx_pep_inhalte .jahr::before{content: '';position: absolute;width: 50%;height: 27px;border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;box-shadow: 0 3px 7px #bbbf;top: 0;left: 50%;transform: translateX(-50%);}
.flx_pep_inhalte .jahr .inner{padding: 60px 40px;border-radius: var(--br-md);border: 1px solid var(--white);box-shadow: 0 3px 7px #bbbf;}
.flx_pep_inhalte .jahr .inner{height: 100%;}
.flx_pep_inhalte #tab-0 .jahr .inner{background-color: #e6e1e6;}
.flx_pep_inhalte #tab-1 .jahr .inner{background-color: #ede3dc;}
.flx_pep_inhalte #tab-2 .jahr .inner{background-color: #e9eadc;}
.flx_pep_inhalte .kapitelheading{font-size: 115%;font-weight: 600;position: relative;}
.flx_pep_inhalte .kapitelheading::before{content: '';position: absolute;left: 0;width: 23px;height: 5px;left: -41px;top: 15px;}
.flx_pep_inhalte .tab-pane ul{padding-left: 40px;margin-bottom: 40px;}
.flx_pep_inhalte .tab-pane ul:last-child{margin-bottom: 0px;}
.flx_pep_inhalte .tab-pane li{padding-left: 10px;list-style-type: disc;margin-bottom: 5px;font-weight: 300;}
.flx_pep_inhalte .workbook{position: relative;}
.flx_pep_inhalte .workbook img{background-color: white;}
.flx_pep_inhalte .workbook .workbookheadline{position: absolute; top: 40px; right: 50px; font-size: 150%; font-weight: 700; z-index: 2;}
.flx_pep_inhalte .workbook .workbooksubline{position: absolute; top: 85px; right: 50px; z-index: 2; max-width: 40%; text-align: right;}

.flx_pep_inhalte #tab-0 .jahr::before,
.flx_pep_inhalte .nav-link-0::before,
.flx_pep_inhalte #tab-0 .kapitelheading::before{background-color: var(--lila);}

.flx_pep_inhalte #tab-1 .jahr::before,
.flx_pep_inhalte .nav-link-1::before,
.flx_pep_inhalte #tab-1 .kapitelheading::before{background-color: var(--orange);}

.flx_pep_inhalte #tab-2 .jahr::before,
.flx_pep_inhalte .nav-link-2::before,
.flx_pep_inhalte #tab-2 .kapitelheading::before{background-color: var(--acc);}

.flx_pep_inhalte .ueberblick{position: relative;}
.flx_pep_inhalte .ueberblick-inner{width: 90%;margin: 0 auto;}
.flx_pep_inhalte .ueberblick-inner ul li::before{display: none;}
.flx_pep_inhalte .ueberblick::before{content: '';position: absolute;height: calc(100% - 500px);transform: translateY(280px);width: 100%;top: 0;left: 0;right: 0;bottom: 0;border: 5px solid var(--darkgrey);border-radius: var(--br-lg);z-index: 0;}

.flx_pep_inhalte .jahr .mehr-erfahren-btn{display: none;}

.flx_pep_inhalte .modal-body{padding: 30px;}
.flx_pep_inhalte .modal-content .modal-body li{padding-left: 0;}
.flx_pep_inhalte .modal-content .modal-body li::before{display: none;}
/* -------------------------------WooCommerce------------------------------------------     */

.shop #sidebarIcons,
.mein-konto #sidebarIcons,
.warenkorb #sidebarIcons,
.kasse #sidebarIcons{display: none;}

.woocommerce-info{border-top-color: var(--acc);}
.woocommerce-info::before{color: var(--dark);}

.woocommerce .woocommerce-checkout #payment ul.payment_methods li{padding-left: 0;}
.woocommerce .woocommerce-checkout #payment ul.payment_methods li::before{display: none;}

/* Single-Produkt */
#primary .produkt-header{border-radius: var(--br-md);padding: 60px 60px 80px 80px;background-size: cover;position: relative; aspect-ratio: 2000/975;}
#primary .produkt-header-inner{width: 50%;margin-top: 150px;}
#primary .produkt-header *{color: var(--white);}
#primary .produkt-header p{font-weight: 300;}
#primary .produkt-ort{width: max-content;position: absolute;right: 50px ;top: 50px;padding: 4px 20px;background-color: #fff3;backdrop-filter: blur(5px);border-radius: var(--br-md);border: 1px solid #fff;font-size: 105%;font-weight: 600;}
#primary .produkt-termin{width: max-content;font-size: 120%;font-weight: 400;}
#primary h1{width: 100%;font-size: 320%;font-weight: 800;text-transform: none;}
#primary .produkt-speaker{display: flex;flex-wrap: wrap;align-items: center;margin-top: 3rem;}
#primary .produkt-speaker strong{font-weight: 800;}
#primary .produkt-speaker p{font-weight: 200;}
#primary .produkt-speaker img{width: 100px;height: 100px;object-fit: cover;border-radius: 50%;border: 5px solid var(--white);margin-right: 1rem;}

/* #primary .anmelde-box{position: absolute;right: 50px;top: 40%;width: 35%;} */
#primary { position: relative;}
#primary .anmelde-box{ position: fixed; right: calc((100vw - 1640px)/2 + 100px); max-width: 600px;z-index: 30;}
#primary .anmelde-box.mobile-anmeldung{display: none;}
#primary .anmelde-box h2{font-size: 175%; font-weight: 700; text-transform: none; margin-bottom: 30px;}
#primary .anmelde-box .inner{background-color: #dcdcdc87;backdrop-filter: blur(20px);padding: 30px;border-radius: var(--br-sm);color: var(--dark);}
#primary .anmelde-box *{color: var(--dark);}
#primary .anmelde-box select{background-color: #fff9; padding: 10px 15px;}
#primary .anmelde-box .termine{margin-top: 2rem;margin-bottom: 10px;}
#primary .anmelde-box .termin-item.is-selected{border: 5px solid var(--acc);background-color: #e5e8c6;}

#primary .anmelde-box .einzeltermine-output{margin-top: 14px;}
#primary .anmelde-box .einzeltermine-card{background-color: #fff9; backdrop-filter: blur(20px); border-radius: var(--br-sm); padding: 14px 16px; box-shadow: 0 8px 22px rgba(0,0,0,.10); margin-bottom: 15px;}
#primary .anmelde-box .einzeltermine-title{font-weight: 700; margin-bottom: 10px;}
#primary .anmelde-box .einzeltermine-grid{display: grid; grid-template-columns: 1fr 1fr; gap: 14px;}
#primary .anmelde-box .einzeltermine-col{display: grid; gap: 10px;}
#primary .anmelde-box .einzeltermin-name{padding-top: 15px;}
#primary .anmelde-box .einzeltermin-date{font-size: 85%; opacity: .8; line-height: 1.2;}
#primary .anmelde-box .einzeltermin-time{font-size: 80%; opacity: .8; line-height: 1.2;}

#primary .anmelde-box .course-price{padding-top: 15px;}
#primary .anmelde-box .btn{margin-top: 20px; width: 100%;}
#primary .anmelde-box .btn.inhouse{width: fit-content; margin: 30px auto 0; display: block;}

#primary .anmelde-box .zielgruppe,
#primary .anmelde-box .personenanzahl,
#primary .anmelde-box .ort{position: relative;padding-left: 35px;margin-bottom: 8px;}
#primary .anmelde-box .zielgruppe::before{content:'';position: absolute;top: 3px;left: 0;height: 25px;width: 25px;background: url('media/icons/zielgruppe.svg') no-repeat;background-size: 100%;background-position: center;display: block;}
#primary .anmelde-box .personenanzahl::before{content:'';position: absolute;top: 3px;left: 0;height: 25px;width: 25px;background: url('media/icons/personenanzahl.svg') no-repeat;background-size: 100%;background-position: center;display: block;}
#primary .anmelde-box .ort::before{content:'';position: absolute;top: 4px;left: 0;height: 25px;width: 25px;background: url('media/icons/ort.svg') no-repeat;background-size: 100%;background-position: center;display: block;}


#primary .anspartner{align-items: center;}
#primary .bild{margin: 40px 40px 40px 0;flex: 0 1 200px;}
#primary img{width: 160px;height: 160px;object-fit: cover;border-radius: 50%;}
#primary .kontaktinfo a{display: block; margin-bottom: 15px;padding-left: 55px;position: relative;color: var(--dark);transition: all ease .3s;}
#primary .kontaktinfo a:hover{color: var(--acc);transition: all ease .3s;}
#primary .tel::before{content: '';position: absolute;background: url('media/telefon-hell.png') no-repeat;background-size: 100%;background-position: center;height: 40px;width: 40px;display: block;left: 0;top: -3px;}
#primary .mail::before{content: '';position: absolute;background: url('media/mail-hell.png') no-repeat;background-size: 100%;background-position: center;height: 40px;width: 40px;display: block;left: 0;top: -3px;}
#primary .name{font-weight: 600;font-size: 115%;margin-bottom: 15px;}


@media (min-width: 992px) {
    /* #primary .desktop-anmeldung {position: fixed; top: 360px; width: 600px; z-index: 30; transform: none;} */
    #primary .desktop-anmeldung{position: fixed;top: 50vh;transform: translateY(-50%);right: calc((100vw - 1640px) / 2 + 65px);}
}


#primary .modal *{color: var(--dark);}
#primary .info{margin-bottom: 1rem;}
#primary select{border-radius: var(--br-md);}

#primary .produkt-content{padding: 30px;}
#primary .produkt-content h1 ,#primary .produkt-content h2, #primary .produkt-content h3{margin-top: 30px; margin-bottom: 15px;}
#primary .sprungmarken{display: flex;column-gap: 6rem;flex-wrap: wrap;margin-bottom: 2rem;}
#primary .sprungmarken a{text-transform: uppercase;color: var(--dark);position: relative;font-weight: 800;}
#primary .sprungmarken a::after{content: '';position: absolute;width: 100%;height: 7px;bottom: -5px;left: 0;transform-origin: right;transform: scaleX(0);transition: transform .3s ease-in-out;background-color: var(--orange);}
#primary .sprungmarken a:hover::after{transform-origin: left;transform: scaleX(1);}

/* ID Sprungmarken */
#primary #inhalte,
#primary #speaker,
#primary #beratung,
#primary #konzept{margin-top: -75px;padding-top: 75px;}

#primary .beratung h2,
#primary .konzept h2,
#primary .speaker h2{margin-bottom: 15px;}

#primary .accordion,
#primary .beratung,
#primary .konzept,
#primary .speaker{margin-bottom: 2rem;}

#primary .headline, #primary h2{margin-bottom: 20px; margin-top: 0;}
#primary h1, #primary h2, #primary h3{color: var(--dark);}
#primary h2, #primary h3{margin: 30px 0 15px}

#primary .accordion{display: flex;flex-direction: column;gap: 1rem;}
#primary .accordion .topline{font-size: 110%;}
#primary .accordion h2{font-size: 170%;text-transform: none;margin-bottom: 0;}
#primary .accordion .accordion-item{border: 1px solid var(--dark);border-radius: var(--br-sm);}
#primary .accordion .accordion-button{display: block!important;background-color: transparent;}
#primary .accordion .accordion-button:focus{box-shadow: none;}
#primary .accordion .accordion-button .mehr-lesen{display: none;}
#primary .accordion .accordion-button.collapsed .mehr-lesen{position: relative;float: right;padding-right: 30px;display: block;}
#primary .accordion .accordion-button.collapsed .mehr-lesen::after{content: '';position: absolute;background: url('media/arrow-down.svg') no-repeat;background-size: 100%;background-position: center;height: 11px;width: 20px;display: block;right: 0;bottom: 9px;}
#primary .accordion ul{padding-left: 20px;margin: 20px 0;}
#primary .accordion li{padding-left: 10px;font-weight: 300;list-style: disc;}

#primary .speaker{align-items: center;}
#primary .speaker .bild{margin: 40px 40px 40px 0;flex: 0 1 200px;}
#primary .speaker img{width: 160px;height: 160px;object-fit: cover;border-radius: 50%;}
#primary .speaker .info a{display: block; margin-bottom: 15px;padding-left: 55px;position: relative;color: var(--dark);transition: all ease .3s;}
#primary .speaker .info a:hover{color: var(--acc);transition: all ease .3s;}
#primary .speaker .name{font-weight: 600;font-size: 115%;margin-bottom: 0;}

#primary .speaker .bio p b, #primary .speaker .bio p strong{margin-top: 15px; display: block;}
#primary .speaker .bio h2, #primary .speaker .bio h3{font-size: 150%; font-weight: 700; text-transform: none;} 

#primary .produkt-content ul{padding-left: 20px;margin: 20px 0;}
#primary ul{padding: 10px 0 40px;}


#primary .produkt-switch-section {margin-top: 60px; margin-bottom: 60px; width: 50%;}
#primary .produkt-switch-nav {display: flex; gap: 100px; flex-wrap: wrap; margin-bottom: 32px;}
#primary .produkt-switch-button {position: relative; border: 0; background: transparent; padding: 5px 0; cursor: pointer; font-weight: 600; border-bottom: 0;}
#primary .produkt-switch-button::before {content: ''; position: absolute; width: 100%; height: 7px; bottom: -5px; left: 0; background: var(--orange); transform-origin: right; transform: scaleX(0); transition: transform .3s ease-in-out;}
#primary .produkt-switch-button:hover::before,
#primary .produkt-switch-button.is-active::before {transform-origin: left; transform: scaleX(1);}
#primary .produkt-switch-panel {display: none;}
#primary .produkt-switch-panel.is-active {display: block;}
#primary .termin-info-grid {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-bottom: 32px;}
#primary .termin-info-item {border-radius: 15px; padding: 20px; background: #f7f7f7;}
#primary .selected-termin-output{border-radius: 15px;}
#primary .starttermin-select-wrap {margin-bottom: 18px;}
#primary .starttermin-select-label {display: block; margin-bottom: 6px; font-weight: 600;}
#primary .selected-termin-details {margin-top: 16px;}
#primary .selected-einzeltermine {margin-top: 12px;}
#primary .selected-einzeltermin-group {margin-top: 8px;}
#primary .selected-einzeltermin-name {font-weight: 600;}
#primary .selected-termin-output-page {margin-bottom: 32px; padding: 24px; background: #f7f7f7;}
#primary .selected-termin-output-page .selected-termin-details { margin-top: 0;}


/* Archive */
#archive h1{margin-bottom: 50px;}

#archive .shop-products{padding-bottom: 100px;}
#archive .shop-products .onsale{display: none;}

#archive .is-search-form{width: 550px;display: inline-block;margin-bottom: 2rem;}
#archive .is-search-form input{border-top-left-radius: 10px;border-bottom-left-radius: 10px;border: none!important;background-color: var(--lightgrey);}
#archive .is-search-form input:focus-visible{outline: auto;}
#archive .is-search-form input::placeholder{color: var(--darkgrey)!important;}
#archive .is-search-form .is-search-icon{border-top-right-radius: 10px;border-bottom-right-radius: 10px;border: none;background-color: var(--lightgrey);}
#archive .is-search-form .is-search-icon:hover{background-color: #ededed;}
#archive .is-search-form button:focus-visible{outline: auto;}

#archive .shop-filters{display: flex;flex-wrap: wrap;gap: 1rem;margin-bottom: 2rem;width: 50%;}
#archive .filter-button{border: 1px solid var(--dark);background-color: transparent;color: var(--dark);padding: 5px 25px;border-radius: var(--br-sm);}
#archive .filter-button.active{border: 1px solid var(--acc);background-color: var(--acc);color: var(--dark);padding: 5px 25px;border-radius: var(--br-sm);font-weight: 600;}

#archive .products{display: grid !important;grid-template-columns: repeat(3, 1fr) !important;gap: 40px;}
#archive .product{width: 100% !important;float: none !important;padding: 0;}
#archive .product img{width: 100%;aspect-ratio: 5 / 4;border-radius: var(--br-md);margin-bottom: 1.5rem;display: block; position: relative;}

.woocommerce ul.products li.product {position: relative;}
.product-los-icon {position: absolute; top: 30px; right: 135px; z-index: 5; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center;}
.product-los-icon img {height: 35px; display: block; filter: invert(1); margin-bottom: 0!important;}


#archive .weitere_infos{position: relative;font-weight: 100;}
#archive .weitere_infos .desc.desc {display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin-bottom: 15px; padding-top: 20px;}
#archive .product .speaker img{width: 120px;height: 120px;object-fit: cover;aspect-ratio: 1 / 1;border-radius: 50%;border: 5px solid var(--white);position: absolute; right: 40px;top: -100px;}
#archive .product h2{position: absolute;top: 13rem;left: 2rem;width: 60%;font-weight: 700;font-size: 150%;}
#archive .wc-gzd-additional-info{display: none;}
#archive .product-termin{margin-bottom: 1rem;}
#archive .product-termin p{font-weight: 100;}
#archive .ort{position: absolute;top: 30px;right: 30px;background-color: #fff3;backdrop-filter: blur(10px);padding: 5px 20px;border-radius: var(--br-md);border: 1px solid var(--white);max-width: calc(100% - 60px);}
#archive .ort p{color: var(--white);font-weight: 600;}
/* #archive .product a{height: 100%;display: block;} */

#archive li.product .woocommerce-loop-product__thumbnail,
#archive li.product .woocommerce-product-gallery__image,
#archive li.product figure{
  position: relative;
}

#archive li.product .woocommerce-loop-product__thumbnail::after,
#archive li.product .woocommerce-product-gallery__image::after,
#archive li.product figure::after{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.45);
  pointer-events:none;
  z-index:2;
}

/*Warenkorb*/
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button.alt,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button{background-color: var(--acc)!important;color: var(--dark)!important;border-radius: var(--br-sm);transition: all ease .3s;float: right;font-weight: 500;}
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit.alt:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button.alt:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button.alt:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button.alt:hover,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button:hover{background-color: var(--dark)!important;color: var(--white)!important;transition: all ease .3s;}

.woocommerce #content table.cart td.actions .input-text, .woocommerce table.cart td.actions .input-text, .woocommerce-page #content table.cart td.actions .input-text, .woocommerce-page table.cart td.actions .input-text{width: max-content;max-width: 100%;}

/*Kasse*/
.woocommerce-notices-wrapper{display: none;}

/*Checkout*/
.woocommerce-checkout{display: flex;flex-wrap: wrap;gap: 30px}
.woocommerce-checkout #customer_details{display: flex;flex-direction: column;flex: 0 0 calc(50% - 30px);}
.woocommerce-checkout #order_review{flex: 0 0 50%;}
.woocommerce-checkout h3{color: var(--dark);}
.woocommerce-checkout .woocommerce-additional-fields{margin-top: 3rem;}
.woocommerce-checkout #order_review_heading{display: none;}
.woocommerce-checkout #payment{margin-bottom: 1rem;background: transparent;border-radius: var(--br-sm);border: 1px solid var(--dark);}
.woocommerce table.shop_table{border-radius: var(--br-sm);border: 1px solid var(--dark);}
.woocommerce-checkout .shop_table{background-color: transparent!important;}
.woocommerce table.shop_table th{padding: 15px 12px;}
table.woocommerce-checkout-review-order-table tr.wc-gzd-cart-item-has-thumbnail .wc-gzd-cart-item-name-wrapper,
.wc-gzd-cart-info{margin-bottom: 1rem;}
.shop_table .variation{background-color: #eee;padding: 20px;margin: 20px 0;border-radius: var(--br-sm);}
.woocommerce-checkout .wc-gzd-checkbox-placeholder{margin-bottom: 2rem;}
.woocommerce .col2-set .col-1, .woocommerce-page .col2-set .col-1,
.woocommerce .col2-set .col-2, .woocommerce-page .col2-set .col-2{width: 100%;}



/*Thankyou*/
.woocommerce-thankyou-order-received{font-weight: 600;font-size: 160%;color: var(--acc);margin-bottom: 2rem;}
.kasse h2{color: var(--dark);margin-top: 4rem!important;}
.woocommerce .woocommerce-notice--success{margin: 0 0 30px!important;}

/*-------------------------------Karriere-Single--------------------------------------------*/
/* .flx_karrieresingle{overflow: hidden;} */
/* #phpsingle-karriere .ansprechpartner{padding-top: 100px;} */





/*-------------------------------------------------------------------------------------------*/
@media (max-width:1780px){
    
    .flx_videoblock.hell .ausbildungpep{left: 15px;top: calc(50% - 125px);height: auto;width: 250px;}
    .flx_videoblock.hell .ausbildungpep:hover{top: calc(50% - 135px);}
    
    .sidebar{display: none;}
    .sidebar.active{display: block;}
    .sidebar-toggle,
    .sidebar-toggle.active{display: block;}

    .sidebar{position: fixed;right: 20px;bottom: 85px;display: block;z-index: 999;height: 290px;transform: translateY(0);opacity: 1;pointer-events: auto;transition: transform .65s cubic-bezier(.22,1,.36,1), opacity .35s ease;}
    .sidebar:not(.active){transform: translateY(30px);opacity: 0;pointer-events: none;}

    .sidebar .onlinetermin{height: 90px;width: 84px;display: block;position: absolute;right: 0;top: -20px;background-size: 100%;background-repeat: no-repeat;transform: translateY(0);transition: transform .55s cubic-bezier(.22,1,.36,1);}
    .sidebar .onlinetermin:hover{transform: translateY(-10px);}

    .sidebar .rabatt{height: 80px;width: 80px;display: block;position: absolute;right: 0;top: 96px;background-size: 100%;background-repeat: no-repeat;transform: translateY(0);transition: transform .55s cubic-bezier(.22,1,.36,1);}
    .sidebar .rabatt:hover{transform: translateY(-10px);}

    .sidebar .azubiticket{height: 112px;width: 72px;display: block;position: absolute;right: 0;top: 186px;background-size: 100%;background-repeat: no-repeat;transform: translateY(0);transition: transform .55s cubic-bezier(.22,1,.36,1);}
    .sidebar .azubiticket:hover{transform: translateY(-10px);}

    .sidebar-toggle{position: fixed;right: 15px;bottom: 15px;width: 55px;height: 55px;border-radius: 50%;background: var(--acc);color: var(--white);font-size: 30px;border: none;cursor: pointer;z-index: 1000;display: block;transition: transform .35s cubic-bezier(.22,1,.36,1), background-color .25s ease, box-shadow .25s ease;}
    .sidebar-toggle::before{content: "+";position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);font-size: 32px;color: #fff;line-height: 1;height: 37px;transition: transform .35s cubic-bezier(.22,1,.36,1);}
    .sidebar-toggle.active{position: fixed;right: 15px;bottom: 15px;width: 55px;height: 55px;border-radius: 50%;background: var(--acc);color: var(--white);font-size: 30px;border: none;cursor: pointer;z-index: 1000;display: block;transform: rotate(45deg);transition: transform .35s cubic-bezier(.22,1,.36,1), background-color .25s ease, box-shadow .25s ease;}

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

    /*Kundenstimmen*/
    .flx_kundenstimmen::before,
    .flx_kundenstimmen::after{display: none;}

    /*Single*/
    #primary .sprungmarken{column-gap: 3rem;}

    /* Footer */
    #page-footer .rechtliches a:last-child{padding-right: 15px;}


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

    h1{font-size: 220%;}
    h2{font-size: 220%;}
    .sidebar{right: 5px;}

    #phpsingle,
    #primary,
    .inhaltsbloecke{margin-top: 120px;}

    /*Header*/
    #page-header #toppermenu .menu li{padding-left: 30px;}

    #page-header .logo img{max-width: 80px;}
    #page-header #toppermenu{position:absolute;display:none; top:0; right:0; bottom:0; transition:all .3s ease;background:var(--lightgrey);height:100vh;  width: 50%; padding-top: 150px;box-shadow: 0 0 13px #0002;}
    #page-header #toppermenu.active{display: block;}
    #page-header #toppermenu .menu{position:relative; padding: 25px; text-align: center;}
    #page-header #toppermenu .menu li{display:block;margin:0 10px;padding:10px 25px 20px;position:relative;}
    #page-header #toppermenu .menu li .sub-menu{position: relative; width: 100%; text-align: center; background-color: var(--lightgrey); top: 0; margin: 10px 0 25px;}
    #page-header #toppermenu .menu li .sub-menu li{text-align: center;}
    #page-header #toppermenu .menu li:has(.sub-menu){padding-right: 0; padding-left: 0;}
    #page-header #toppermenu .menu li:has(.sub-menu)::after{display: none;}
    #page-header #toppermenu #menu-topmenu .submenu-toggle {display: block; width: 20px; height: 20px; margin-left: 10px; cursor: pointer; position: absolute; right: 0; top: 5px;}
    #page-header #toppermenu #menu-topmenu .submenu-toggle::after {content: ''; position: absolute; display: block; background-image: url('media/arrow_down.svg'); background-repeat: no-repeat; background-size: cover;
         width: 22px; height: 12px; right: 0px; top: 7px; transition: all 0.3s ease;}
    #menu-topmenu .menu-item-has-children.submenu-open > .submenu-toggle::after{transform: rotate(180deg);}
    #page-header #toppermenu .menu .menu-item-has-children.submenu-open .sub-menu{display: block;}

    #page-header #toppermenu{display: none;}
    #page-header .burgerbutton{display: block;}
    #page-header .infos{display: none;}

    .mega__promoImgs .mega__promoImg img:hover{scale: 1!important;}
    .mega__promoImgs{width: 60%!important;}


    /*Swiper*/
    .swiper-wrapper{padding-bottom: 50px;}

    /*Headerblock*/
    .flx_headerblock h1{font-size: 260%;width: 70%;}

    /*Angebotsblock*/
    .flx_angebotsblock .text{margin-bottom: 5rem;}
    .flx_angebotsblock .rabatt{right: 50px;top: 20px;}
    .flx_angebotsblock .rabatt:hover{top: 10px;}

    /*Single*/
    #primary .produkt-header{padding: 60px;background-size: cover;background-position: center;background-repeat: no-repeat;}
    #primary .produkt-header-inner{width: 100%;margin-bottom: 3rem;}
    #primary .anmelde-box{position: unset;width: 100%;}
    #primary .anmelde-box .inner{background-color: #dcdcdc;}
    #primary button.inhouse{border: 1px solid var(--white)!important;}
    #primary button.inhouse:hover{border: 1px solid var(--acc)!important;}

    #primary .anmelde-box.mobile-anmeldung{display: block; max-width: 600px; margin: 50px auto;}
    #primary .anmelde-box.desktop-anmeldung{display: none;}
    
}
/*-------------------------------------------------------------------------------------------*/
@media (max-width:1199px){

    h2 br{display: none;}
    .btn{margin-top: 30px;}


    /*Swiper*/
    .swiper-wrapper{padding-bottom: 30px;}


    /*Headerblock*/
    .flx_headerblock.mitslider::before{height: 250px;width: 60%;}

    /*Videoblock*/
    .flx_videoblock.hell .ausbildungpep{left: 15px;top: calc(50% - 90px);height: auto;width: 180px;}
    .flx_videoblock.hell .ausbildungpep:hover{top: calc(50% - 100px);}
    .flx_videoblock.hell .azubiticket{width: 130px;}
    .flx_videoblock.hell .videocontainer::before{left: -50px;}
    .flx_videoblock.hell .videocontainer::after{right: -50px;}

    /*Kachelblock*/
    .flx_kachelblock.textkachel .text{margin-bottom: 3rem;}

    /*Kundenslider*/
    .flx_kundenslider .kundenslider,
    .flx_kundenslider .kunde{height: 90px;}

    /*Angebotsblock*/
    .flx_angebotsblock .rabatt{top: 0px;}
    .flx_angebotsblock .rabatt:hover{top: -10px;}

    /*FAQ*/
    .flx_faq .text{margin-bottom: 2rem;}
    .flx_faq .accordion-button,
    .flx_faq .accordion-body{padding-right: 0;padding-left: 0;}

    /*Kontaktblock*/
    .flx_kontakt .datenschutz p{width: 100%;}
    .flx_kontakt .leer{display: none;}
    .flx_kontakt .bild{margin: 40px 0;}

    .headline{width: 100%;}



    /*Azubistimme*/
    .flx_azubistimmen{padding-top: 0;}

    /*PEP Inhalte*/
    .flx_pep_inhalte .jahr{margin-bottom: 1rem;}
    .flx_pep_inhalte .jahr .inner > .kapitelheading,
    .flx_pep_inhalte .jahr .inner ul,
    .flx_pep_inhalte .jahr .inner > .kapitelinhalt{display: none;}
    .flx_pep_inhalte .jahr .mehr-erfahren-btn{display: inline-block;margin-top: 15px;margin: 15px auto 0;display: block;background-color: transparent;border: 1px solid var(--dark);padding: 0px 40px;border-radius: var(--br-md);font-size: 90%;}
    .flx_pep_inhalte .kapitelheading::before{left: -30px;}
    .flx_pep_inhalte .headline{font-size: 110%;}


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

    h1{font-size: 160%;}
    h2{font-size: 160%;}
    .topline{font-size: 100%;margin-bottom: 10px;}

    /*Footer*/
    #page-footer .copyright, 
    #page-footer .rechtliches{padding-top: 15px;}
    #page-footer .copyright span,
    #page-footer .rechtliches{text-align: center;}
    #page-footer .rechtliches a:first-child{padding-left: 0;}


    /*Headerblock*/
    .flx_headerblock h1{font-size: 180%;width: 50%;}
    .flx_headerblock.mitslider::before{height: 200px;width: 65%;}

    /*Videoblock*/
    .flx_videoblock iframe{border-radius: var(--br-md);}
    .flx_videoblock.hell .ausbildungpep{top: calc(50% - 60px);height: auto;width: 120px;}
    .flx_videoblock.hell .ausbildungpep:hover{top: calc(50% - 70px);}
    .flx_videoblock.hell .azubiticket{right: 40px;top: -20px;width: 100px;}
    .flx_videoblock.hell .azubiticket:hover{right: 40px;top: -30px;}

    /*Textblock*/
    .flx_textblock.mitbild .leer{display: none;}
    h2 br{display: none;}

    /*Angebotsblock*/
    .flx_angebotsblock .topline{width: 70%;}
    .flx_angebotsblock .angebot .inner{padding: 40px 15px 20px;}
    .flx_angebotsblock .highlight{margin-bottom: 20px;}
    .flx_angebotsblock .subline{margin-bottom: 50px;}
    .flx_angebotsblock .vorteil{padding-top: 20px;font-size: 85%;}
    .flx_angebotsblock .rabatt{top: -30px;right: 0;}
    .flx_angebotsblock .rabatt:hover{top: -40px;right: 0;}

    /*Kundenstimmen*/
    .flx_kundenstimmen .kundenstimme{width: 100%;margin: 0 auto 30px;}
    .flx_kundenstimmen .swiper-slide{padding: 40px 50px 50px;}

    /*Azubistimme*/
    .flx_azubistimmen .swiper .nav{bottom: 0;}
    .flx_azubistimmen .swiper .nav,
    .flx_azubistimmen .swiper-button-next,
    .flx_azubistimmen .swiper-button-prev{padding-bottom: 30px;}
    .flx_azubistimmen .bildgrafik{width: 250px;}
    .flx_azubistimmen .grafik{text-align: center;}

    /*Kachelblock*/
    .flx_kachelblock .kachel .farbkreis{width: 105px;height: 105px;border-radius: 50%;display: block;opacity: .6;transition: all ease .3s;}
    .flx_kachelblock.kreislauf .kachel{padding: 10px;margin-bottom: 0;}


    /*PEP Inhalte*/
    .flx_pep_inhalte .ueberblick::before{top: 70px;}
    .flx_pep_inhalte .jahr .inner{padding: 50px 30px 30px;}
    .flx_pep_inhalte .nav-pills .show .nav-item{padding-left: 15px;}

    /*Single*/
    #primary .produkt-header-inner{margin-top: 200px; max-width: 70%;}
    #primary .produkt-header{padding: 30px;}
    #primary .produkt-switch-section {width: 100%; padding: 0 15px;}


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

    body,html,*{font-size:17px;}
    div[class^="flx_"], div[class*="flx_"]{margin: 0 0 100px 0;}

    #page-header #toppermenu{width: 70%;}

    /*Footer*/
    #page-footer .socialmedia{justify-content: start;margin-top: 2rem;}
    #page-footer .socialmedia strong{text-align: left;}
    #page-footer .copyright{padding-top: 40px!important;}
    #page-footer .rechtliches{padding-top: 10px!important;}


    /*Headerblock*/
    .flx_headerblock.mitslider::before{width: 100%;border-top-right-radius: 0;}
    .flx_headerblock h1{width: 70%;}
    .flx_headerblock.mitslider .swiper{width: 100%;}
    .flx_headerblock.mitslider .headlinebox{width: 100%;}
    #headerblock[data-bg-res]{background-image: url(attr(data-bg-res));}

    .mega__promoImgs{width: 100%!important;}

    /*Videoblock*/
    .flx_videoblock.hell iframe{width: 100%;}
    .flx_videoblock.hell .ausbildungpep{top: unset;bottom: -140px;}
    .flx_videoblock.hell .ausbildungpep:hover{bottom: -130px;top: unset;}
    .flx_videoblock.hell .azubiticket{top: unset;width: 90px;bottom: -150px;right: 10px;}
    .flx_videoblock.hell .azubiticket:hover{bottom: -140px;top: unset;}
    .flx_videoblock.hell .videocontainer::before{left: -70px;width: 250px;height: 250px;bottom: -100px;}
    .flx_videoblock.hell .videocontainer::after{right: -90px;width: 250px;height: 250px;top: -80px;}

    .flx_videoblock.dunkel{padding: 80px 0 90px;}
    .flx_videoblock p{width: 100%;}

    /*kacheblock*/
    .flx_kachelblock.textkachel .kachel:nth-child(2)::after{display: none;}
    .flx_kachelblock.textkachel .kachel:nth-child(3)::after{content: '';position: absolute;right: -15px;bottom: -20px;height: 30px;width: 30px;border-radius: 50%;background-color: #747B81;display: block;}

    /*Textblock*/
    /* .flx_textblock.mitbild .text{margin-bottom: 5rem;} */
    .flx_textblock.mittrainer .trainer{padding-top: 100px;}
    .flx_textblock .mobile-margin-bottom {margin-bottom: 50px;}
    .flx_textblock .leer {display: none;}

    /*Angebotsblock*/
    .flx_angebotsblock .angebot{padding: 0 5px;}
    .flx_angebotsblock .angebot1{padding-left: 10px;}
    .flx_angebotsblock .angebot3{padding-right: 10px;}

    /*Kundenstimmen*/
    .flx_kundenstimmen .swiper-slide{padding: 40px 30px;}
    .flx_kundenstimmen .kundenstimme p{font-size: 100%;}

    /*Kontakt*/
    .flx_kontakt .tel::before,
    .flx_kontakt .mail::before{top: -5px;}

    .wpcf7-acceptance #confirm{top: 1px;}
    .wpcf7-acceptance #confirm::after{top: -5px;left: 1px;}

    .flx_module .owl-carousel .owl-item img{object-fit: contain; height: auto;}

    /*Azubistimmen*/
    .flx_azubistimmen .grafik{text-align: left;}

    /*PEP Inhalte*/
    .flx_pep_inhalte .nav-pills{flex-direction: column;margin-bottom: 1rem;}
    .flx_pep_inhalte .nav-pills li{padding-left: 0;}
    .flx_pep_inhalte .nav-pills a{margin:0 auto 10px;width: max-content;}

    /*Single*/
    #primary .produkt-content{padding: 50px 15px;}
    #primary .content-single .container{padding-left: 0;padding-right: 0;}
    #primary .produkt-header{border-radius: 0;}
    #primary .accordion h2{font-size: 130%;margin-bottom: 20px;}
    #primary .beratung li::before{width: 8px; height: 8px; top: 8px;}
    #primary .produkt-switch-nav {gap: 18px;}
    #primary .produkt-switch-button {padding: 10px 0;}
    #primary .termin-info-grid {grid-template-columns: 1fr;}

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

    #phpsingle, #primary, .warenkorb .inhaltsbloecke, .kasse .inhaltsbloecke, #archive{margin-top: 120px;}
    div[class^="flx_"], div[class*="flx_"]{margin: 0 0 80px 0;}
    body,html,*{font-size:15px;}
    .btn{margin-top: 20px;}

    ul li::before{width: 8px; height: 8px; top: 8px;}


    #page-header #toppermenu{width: 100%;}


    /*Swiper*/
    .swiper-pagination{gap: 10px;}
    .swiper-pagination-bullet{height: 10px;width: 10px; margin: 0!important;}
    .swiper-pagination-bullet-active{height: 10px;width: 10px;}
    .swiper-button-prev{margin-right: 20px;}
    .swiper-button-next{margin-left: 20px;}
    .swiper-button-next::before,
    .swiper-button-prev::before{width: 35px;height: 35px;}


    /*Headerblock*/
    .flx_headerblock{margin-bottom: 30px!important;}
    .flx_headerblock h1{width: 100%;}

    /*Textblock*/
    .flx_textblock.mittrainer .trainerrow{padding: 0;}

    /*kacheblock*/
    .flx_kachelblock.textkachel .kachel:nth-child(1)::after,
    .flx_kachelblock.textkachel .kachel:nth-child(3)::after{display: none;}

    /*Kundenslider*/
    .flx_kundenslider .kunden{padding: 0;}
    .flx_kundenslider .kundenslider,
    .flx_kundenslider .kunde{height: 70px;}
    .flx_kundenslider .kunde{border-radius: var(--br-sm);}
    .flx_kundenslider .swiper-slide{margin-right: 30px!important;}


    /*Angebotsblock*/
    .flx_angebotsblock .angebot{margin-bottom: 1rem;padding: 0 calc(var(--bs-gutter-x) * .5)!important;}
    .flx_angebotsblock .highlight{font-size: 180%;}
    .flx_angebotsblock .subline{font-size: 125%;}
    .flx_angebotsblock .vorteil{font-size: 100%;}

    /*Kundenstimmen*/
    .flx_kundenstimmen .headline{margin-bottom: 80px;}
    .flx_kundenstimmen .bild{left: unset;right: 40px;top: -50px;width: 100px;height: 100px;}
    .flx_kundenstimmen .logo{height: 35px;}
    .flx_kundenstimmen .top{margin-bottom: 40px;}
    .flx_kundenstimmen .quote{display: none;}
    .flx_kundenstimmen p{text-align: left;}

    /*Azubistimmen*/
    .flx_azubistimmen .bildgrafik{width: 40%;position: absolute;left: 5px;top: 25%;}
    .flx_azubistimmen .inner{align-items: center;flex-wrap: wrap-reverse;}
    .flx_azubistimmen .azubibild{width: 60%;margin-bottom: 1rem;float: right;}
    .flx_azubistimmen .swiper .nav{margin: auto!important;}

    .flx_module .course-card__link{padding: 20px;margin-right: 30px;}

    /*PEP-Inhalte*/
    .flx_pep_inhalte .ueberblick::before{top: 230px;height: calc(100% - 500px);}
    .flx_pep_inhalte .workbook .workbookheadline{position: absolute; top: 30px; right: 25px; font-size: 110%; font-weight: 700; z-index: 2;max-width: 50%}
    .flx_pep_inhalte .workbook .workbooksubline{position: absolute; top: 55px; right: 25px; z-index: 2; max-width: 50%; text-align: right; font-size: 90%;}


    /*Produktseiten*/
    #primary .anmelde-box.mobile-anmeldung{margin: 50px 20px; width: auto;}
    #primary .produkt-ort{top: 30px; right: 30px; font-size: 90%;}
    #primary .produkt-header-inner{margin-top: 50px; max-width: 90%;}    
    #primary .produkt-termin{width: fit-content;}
    #primary h1{font-size: 200%;}

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

    .btn{width: 100%;padding: 10px 30px;}

    /*Swiper*/
    .swiper-pagination{gap: 0;}
    .swiper-pagination-bullets.swiper-pagination-horizontal{width: 130%;}

    /*Angebotsblock*/
    .flx_angebotsblock .rabatt{height: 90px;width: 90px;background-size: 100%;right: 10px;top: 35px;}
    .flx_angebotsblock .rabatt:hover{right: 10px;top: 25px;}

    /*Kundenstimme*/
    .flx_kundenstimmen .headline{margin-bottom: 60px;}
    .flx_kundenstimmen .bild{right: 20px;top: -35px;width: 90px;height: 90px;}
    .flx_kundenstimmen .swiper-slide{padding: 60px 25px 25px;}
    .flx_kundenstimmen .top{margin-bottom: 30px;}
    .flx_kundenstimmen .logo{max-width: 60%;}

    /*Azubistimme*/
    .flx_azubistimmen .bildgrafik{top: 20%;}




}