body.modal-open {
  overflow: hidden;
  height: 100vh;
  width: 100vw;
}



#konfigurator .btn_modal,#konfigurator .details_konfiguration {
}
 .entry-header {
    display:none
}
 .frm_forms .hidden {
}
 #field_referrer_url {
}
 #dev {
    background:#fcbbbb;
    margin-bottom:30px;
    padding:15px;
    display:none
}
 .gesamtpreis {
    display: flex;
    justify-content: space-between;
    gap: 0px;
    padding: 10px;
    margin-bottom:20px;
}
 .gesamtpreis .item {
    flex: 1;
     font-size:14px
}
 .gesamtpreis .item span {
    display:block;
    font-weight:bold
}
 .gesamtpreis .item p {
    margin:0;
}
 video {
    width:100%!important;
    height:auto!important
}
/* CSS, um die divs standardmäßig auszublenden */
 .select_sales, .select_marketing, .select_service, .select_faktura, .select_projekte {
     display: none;
}
 #konfigurator {
    font-size:14px!important;
}
 @media (min-width: 992px) {
     #konfigurator {
         display: flex;
         flex-direction: row;
         gap: 40px;
         max-width: 1400px !important;
         font-size:18px!important;
         margin-bottom:100px
    }
     #konfigurator .left {
         width: calc(70% - 20px);
        /* Optional: Höhe hinzufügen, falls nötig */
    }
     #konfigurator .right {
         width: calc(30% - 20px);
         display: flex;
         flex-direction: column;
    }
}
 .rabatt {
    display:none
}
 .rabatt.true {
    display:block
}
 .switch_control {
    line-height:50px!important;
    font-weight:bold;
    font-size:16px
}
 .switch {
     position: relative;
     display: inline-block;
     width: 60px;
     height: 30px;
     top:9px;
     margin:0 10px;
}
/* Hide default HTML checkbox */
 .switch input {
     display: none!important;
}
/* The slider */
 .slider {
     position: absolute;
     cursor: pointer;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-color: #f2f2f2;
     -webkit-transition: .4s;
     transition: .4s;
}
 .slider:before {
     position: absolute;
     content: "";
     height: 22px;
     width: 22px;
     left: 4px;
     bottom: 4px;
     background-color: #ff3c00;
     -webkit-transition: .4s;
     transition: .4s;
}
 input:checked+.slider {
     background-color: #f2f2f2;
}
 input:focus+.slider {
     box-shadow: 0 0 1px #ff3c00;
}
 input:checked+.slider:before {
     -webkit-transform: translateX(26px);
     -ms-transform: translateX(26px);
     transform: translateX(26px);
}
/* Rounded sliders */
 .slider.round {
     border-radius: 34px;
}
 .slider.round:before {
     border-radius: 50%;
}
 .menu2 {
     display:none;
}
 #konfigurator{
    max-width:960px;
    margin:0 auto;
    padding:20px 0;
    font-family: "Inter var", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
    font-size:18px
}
 #konfigurator :focus{
    outline:none
}
 #konfigurator h3{
    margin:0 0 15px;
    font-size:20px
}
 #konfigurator .anzahl_benutzer_wrapper{
    background:#fff;
    border-radius:5px;
    padding:30px;
    position:relative;
    box-shadow:0 2px 10px 0 rgba(0,0,0,.1)
}
 #konfigurator .anzahl_benutzer_wrapper .beschreibung{
    width:80%
}
 #konfigurator .anzahl_benutzer_wrapper #userRange{
    background:#e5f7f3;
    width:15%;
    display:block;
    line-height:45px;
    text-align:center;
    font-size:25px;
    font-weight:700;
    position:absolute;
    top:30px;
    right:30px;
    color:#00b48f;
    border-radius:5px;
    padding:0;
    border:0
}
 #konfigurator .anzahl_benutzer #range_slider{
    margin-top:30px;
    height:10px
}
 #konfigurator .anzahl_benutzer .ui-widget-content{
    border:0!important;
    background:#e5f7f3!important;
    border-radius:99px!important
}
 #konfigurator .anzahl_benutzer #range_slider .ui-slider-range{
    background-color:#e5f7f3;
    height:100%;
    border-radius:99px!important;
    border:0
}
 #konfigurator .anzahl_benutzer #range_slider .ui-slider-handle{
    background-color:#00b48f;
    border:none;
    width:25px;
    height:25px;
    border-radius:50%;
    top:-8px;
    cursor:pointer;
    transition:transform .2s ease
}
 #konfigurator .anzahl_benutzer #range_slider .ui-slider-handle:hover{
    transform:scale(1.1)
}
 #konfigurator .anzahl_benutzer #range_slider .ui-slider-handle:active{
    background-color:#00b48f;
    border:none!important
}
 #konfigurator .anzahl_benutzer .slider-container{
    position:relative;
    margin-bottom:30px
}
 #konfigurator .anzahl_benutzer .slider-labels{
    display:flex;
    justify-content:space-between;
    position:absolute;
    top:30px;
    width:100%
}
 #konfigurator .anzahl_benutzer .slider-labels .slider-label-min,#konfigurator .slider-labels .slider-label-max{
    font-size:12px
}
 #konfigurator .service_levels{
    margin-top:30px
}
 #konfigurator .service_levels h3 {
    display:block;
    width:100%;
    margin:0 0 15px 0
}
 #konfigurator .service_levels .service_level p.service_title{
    font-size:14px;
    font-weight:normal;
    margin:0 0 15px 0;
    width:95%
}
 #konfigurator .service_levels .service_level p.service_title span {
    font-size:20px;
    font-weight:700;
    margin:0 10px 0 0!important
}
 .show-more-btn {
    padding-left:25px;
    position:relative;
    cursor:pointer;
}
 .show-more-btn:hover span, .show-more-btn.active span{
    color:#00b48f
}
 .show-more-btn svg {
    width:18px!important;
    height:18px!important;
    display:inline!important;
    position:absolute;
    top:4px;
    left:0;
    transition: transform 0.3s ease;
}
 .show-more-btn.active svg {
    transform: rotate(180deg);
}
 #konfigurator .service_levels .service_level{
    background:#fff;
    border-radius:5px;
    margin-top:0;
    box-shadow:0 2px 10px 0 rgba(0,0,0,.1);
}
 #konfigurator .service_levels .service_level ul {
     list-style-type: none;
     padding: 0;
     margin: 0;
}
 #konfigurator .service_levels .service_level ul li {
     padding: 0 0 0 18px;
     margin:5px 0;
     position:relative;
     font-size:16px 
}

 @media (min-width: 992px) {
   #konfigurator .service_levels .service_level ul {
     display: flex;
     flex-wrap: wrap;
     gap: 20px;
}
 #konfigurator .service_levels .service_level ul li {
     flex: 0 0 calc(45%);
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
     margin:0;
     font-size:15px;
}   
}


 #konfigurator .service_levels .service_level ul li::before{
    position:absolute;
    top:8px;
    left:0;
    width:10px;
    height:10px;
    content:'';
    background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSI1MTIiIGhlaWdodD0iNTEyIiB4PSIwIiB5PSIwIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUxMiA1MTIiIHhtbDpzcGFjZT0icHJlc2VydmUiIGNsYXNzPSIiPjxnPjxnIGZpbGw9IiMwMDAiPjxwYXRoIGQ9Ik0xMi43NSAxMWEuNzUuNzUgMCAwIDAtMS41IDB2NmEuNzUuNzUgMCAwIDAgMS41IDB6IiBmaWxsPSIjZmYzYzAwIiBvcGFjaXR5PSIxIiBkYXRhLW9yaWdpbmFsPSIjMDAwMDAwIj48L3BhdGg+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMTIgMS4yNUM2LjA2MyAxLjI1IDEuMjUgNi4wNjMgMS4yNSAxMlM2LjA2MyAyMi43NSAxMiAyMi43NSAyMi43NSAxNy45MzcgMjIuNzUgMTIgMTcuOTM3IDEuMjUgMTIgMS4yNXpNMi43NSAxMmE5LjI1IDkuMjUgMCAxIDEgMTguNSAwIDkuMjUgOS4yNSAwIDAgMS0xOC41IDB6IiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiNmZjNjMDAiIG9wYWNpdHk9IjEiIGRhdGEtb3JpZ2luYWw9IiMwMDAwMDAiPjwvcGF0aD48cGF0aCBkPSJNMTMgOGExIDEgMCAxIDEtMiAwIDEgMSAwIDAgMSAyIDB6IiBmaWxsPSIjZmYzYzAwIiBvcGFjaXR5PSIxIiBkYXRhLW9yaWdpbmFsPSIjMDAwMDAwIj48L3BhdGg+PC9nPjwvZz48L3N2Zz4=);
    background-size:contain;
}
 #konfigurator .service_level.basis {
    display:block;
    border:2px solid #00b48f;
    background:#f2fcfa
}
 #konfigurator .service_level{
    margin-bottom:20px!important;
    padding:20px;
    border-radius:5px;
    position:relative;
}
 @media (min-width: 992px) {
     #konfigurator .service_level{
        padding:20px 30px 30px 30px;
    }
}
 #konfigurator .service_level input {
    position:absolute;
    top:30px;
    right:30px
}
 #konfigurator .beratung {
    margin-top:10px;
    text-align:center;
    padding:20px 30px
}

#konfigurator .beratung p {
    font-size:14px
}
   
 #konfigurator .beratung a {
    display:inline-block;
    background:transparent;
    padding:15px 30px ;
    border-radius:99px;
    color:#00b48f;
    text-decoration:none;
    border:1px solid #00b48f;
    font-size:16px;
    font-weight:bold
}
 #konfigurator .beratung a:hover {
    transform:scale(1.1)
}
 .service_accordion{
     height:65px;
     overflow: hidden;
     transition: height 0.3s ease!important;
     position: relative;
     padding:30px;
}


 .expanded {
     height:auto;
     min-height: 320px;

}
 @media (min-width: 992px) {
     .service_accordion{
    }
     .expanded {
    }
}
 .radio-container {
     display: inline-block;
     position: relative;
     width: 24px;
     height: 24px;
     position:absolute;
     top:20px;
     right:20px;
}

   /* Versteckt den Standard-Radio-Button */
 .radio-container input[type="checkbox"] {
     position: absolute;
     opacity: 0;
     cursor: pointer;
}

  /* Quadratischer Hintergrund */
 .checkmark {
     width: 100%;
     height: 100%;
     background-color: #fff;
     border-radius: 3px;
     border: 2px solid #00b48f;
     display: flex;
     align-items: center;
     justify-content: center;
     width:25px;
     height:25px;
}
/* Häkchen anzeigen, wenn Radio-Button aktiviert */
 .radio-container input[type="checkbox"]:checked + .checkmark::after {
     content: "✓";
     font-size: 18px;
     font-weight:bold;
     color: #00b48f;
} 
   
label.radio-container  {
     padding:0!important;
     background:none!important;
   }
   
 #konfigurator .right .sidebar_sticky {
    border-radius:5px;
    overflow:hidden;
}
 #konfigurator .right .details_konfiguration {
    background:#fff;
    padding-bottom:10px;
    -webkit-border-bottom-right-radius: 5px;
     -webkit-border-bottom-left-radius: 5px;
     border-bottom-right-radius: 5px;
     border-bottom-left-radius: 5px;
     border:1px solid #f2f2f2
}
 #konfigurator .right .konfigurator_sidebar {
     display:block;
     background: #1e2850;
     padding: 30px;
     color:#fff;
}
 #konfigurator .right .konfigurator_sidebar button.button_berater {
     background: #00b48f;
     display: block;
     padding: 15px 20px;
     text-align: center;
     color: #fff;
     text-decoration: none;
     margin-top: 10px;
     border-radius: 5px;
     font-weight:bold;
     width:100%;
}
 .konfigurator_sidebar p.title {
    text-align:center;
    text-transform:uppercase;
    font-weight:bold;
    font-size:16px;
    margin:0 0 10px 0
}
 .konfigurator_sidebar .switch_control {
    text-align:center
}
 .konfigurator_sidebar #yeardefaultuser,.konfigurator_sidebar #monthdefaultuser {
    font-size:45px;
    font-weight:bold;
    text-align:center;
    display:block;
    margin:20px 0
}
 .konfigurator_sidebar p.preisinfo {
    text-align:center;
    font-size:13px

}
 #konfigurator .sidebar_sticky .details_konfiguration .item {
    padding:10px 15px 5px 15px;
    border:1px solid #d2d4dc;
    margin:15px 20px ;
    border-radius:5px;
    position:relative
}
 .details_konfiguration .item p.title {
    font-weight:700;
    margin: 0;
    line-height:1;
    margin-bottom:-3px
}
 .details_konfiguration .main_headline {
    padding:20px 20px 0 20px;
    text-align:center;
    font-weight:bold;
    font-size:14px;
    text-transform:uppercase;
}
 .details_konfiguration .item .result {
    position:absolute;
    top:10px;
    right:10px;
    background:#fbebe6;
    color:#e8522a;
    font-size:12px;
    font-weight:600;
    padding:3px 7px;
    border-radius:4px
}
 .details_konfiguration .item .remove_checkbox svg {
    display:block;
    width:18px;
    height:18px;
    text-align:center;
    border-radius:99px;
    font-size:13px;
    position:absolute;
    top:-8px;
    right:-8px;
    background:#d2d4dc;
    border:1px solid #fff;
    padding:3px;
    cursor:pointer
}
 .details_konfiguration .item small {
    font-size:12px;
    line-height:1;
}
 .details_konfiguration .item ul {
     list-style:none;
     margin:0;
     padding:0;
}
 .details_konfiguration .item ul li {
     position: relative;
     padding: 0;
     font-size:14px;
     margin: 0 0 0 15px;
}
 .details_konfiguration .item ul li::before {
     content: "•";
     color: #ff3c00;
     font-size: 18px;
     position: absolute;
     left: -15px;
     top:-4px;
}
/* Modal Container */
 .modal {
     display: none;
     position: fixed;
     top: 0;
     left: 0;
     min-width: 100%;
     height: 100%;
     background: rgba(249, 250, 252, 0.95);
     overflow-y: auto;
     z-index:9999;
     font-family: "Inter var", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
    font-size:14px 
}
/* Modal Content */
 .modal-content {
     background: white;
     margin: 0 auto;
    /* Center the modal vertically with margin */
     padding: 20px;
     border-radius: 8px;
     max-width: 1200px;
     box-shadow: 0 0 25px rgba(0, 0, 0, 0.2);
     position: relative;
}
/* Close Button */
 .close {
     cursor: pointer;
     color: #aaa;
     font-size: 25px;
     position: absolute;
     top: 10px;
     right: 15px;
     font-weight: bold;
     color:#000;
}
 .modal.anfrageformular .modal-content {
    max-width:640px;
}
 .popup_header_left h3 {
    margin:0 0 15px 0!important;
    font-size:30px
}
 .popup_header_right img {
    width:100%;
    border-radius:10px
}
 .popup_funktionen h4 {
    font-size:20px;
}
 .popup_funktionen strong {
    font-size:18px
}
 .btn_modal {
    padding:0 25px 0 0;
    background:none;
    color:#00b48f;
    text-decoration:none;
    text-transform:none;
    margin-top:20px;
    position:relative
}
 .btn_modal svg {
    display:inline;
    width:20px;
    position:absolute;
    top:0;
    right:0
}
 .btn_modal:hover {
    text-decoration:none
}
 .popup_module h4 {
    font-size:20px
}
 .popup_module .modul .title  img {
    width:25px!important;
	height:auto!important;
	margin-right:10px;
    display:block
}
 .popup_module .modul p {
    margin:0;
}
 .popup_module .modul {
    margin-top:30px
}
 .popup_module .modul .title {
    font-weight:bold;
    margin:10px 0;
    font-size:18px;
	display: flex;
	align-items: center
}
 @media (min-width: 992px) {
     .modal {
        font-size:18px
    }
     .modal-content {
         margin: 50px auto;
         padding: 50px;
    }
     .popup_funktionen h4 {
        font-size:25px;
    }
     .popup_module h4 {
        font-size:25px
    }
     .popup_header {
         display: flex;
         align-items: center;
         gap: 0px;
    }
     .popup_header_left {
         flex: 0 0 40%;
         padding-right:20px;
    }
     .popup_header_right {
         flex: 0 0 60%;
         text-align:center;
         padding-left:20px;
    }
     .popup_funktionen .items .inner {
         display: flex;
         gap: 0px;
         border-top:1px solid #ccc;
         padding:30px 0 15px 0;
    }
     .popup_funktionen .items .inner .left {
         flex: 0 0 40%;
         padding-right:20px;
    }
     .popup_funktionen .items .inner .right {
         flex: 0 0 60%;
         padding-left:20px;
    }
     .popup_module .items {
         display: flex;
         flex-wrap: wrap;
        /* Zeilenumbruch bei zu vielen Elementen */
         gap: 20px;
        /* Abstand zwischen den Modulen */
         justify-content: space-between;
        /* Gleichmäßige Verteilung der Module */
    }
     .popup_module .modul {
         flex: 0 0 calc(33.333% - 20px);
    }
}