/* CTYPE - APPEARANCE */
:root {
   --blue: #2384FF;
   --dark-blue: #0453B8;
   --blue-lighter: #F0F5FA;
   --blue-light: #D8E6F9;
   --gray: #F4F4F4;
   --mid-gray: #71747E;
   --black: #000;
   --text: #212121;
   --white: #FFF;

   --darker-blue: #09346A;
}

@font-face {
   font-family: "Sansation";
   src: url(../fonts/Sansation_Bold.ttf);
   font-weight: bold;
   font-display: swap;
}
@font-face {
   font-family: "Inter";
   src: url(../fonts/Inter.ttf);
   font-display: swap;
}
html { height: auto; }
body { overflow-x: hidden; }
.btn.btn-outline, .btn.btn-custom {
   background: transparent;
   border: 2px solid var(--dark-blue);
   color: var(--dark-blue);
   text-align: center;
   border-radius: 8px;
   padding: 12px 15px;
   display: inline-block;
   transition: all .5s ease-in-out;
}
.btn.btn-outline:hover, .btn.btn-custom:hover {
   background: var(--dark-blue);
   color: var(--white);
   transition: all .5s ease-in-out;
}
.btn.btn-outline a , .btn.btn-custom a {
   color: var(--dark-blue);
   text-decoration: none;
}
.btn.btn-outline:hover a, .btn.btn-custom:hover a {
   color: var(--white);
}

.section-headline header p { margin: 0; }
.section-headline .h3 {
   text-align: center;
   font-size: clamp(1.1rem, 2vw, 1.3rem);
   color: var(--blue);
}
.section-headline h2 {
   text-align: center;
   font-size: clamp(2.15rem, 3vw, 3rem);
   color: var(--darker-blue);
   margin-bottom: 2em;
   line-height: 1.1em;
}
h1, h2 { font-family: "Sansation"; }
h2 { color: var(--darker-blue); }
h3 { font-family: "Inter"; font-weight: 600; }
p, li, a { font-family: "Inter"; color: var(--mid-gray);}

/* NAVIGATION */
#navigation {
   padding: 11px;
   background: var(--white);
   box-shadow: 0px 3px 7px 2px rgba(0,0,0,0.1);
}
#navigation .btn-outline { float: right; }
#navigation .col-4 {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   align-content: center;
   justify-content: center;
   align-items: center;
}
#navigation .container-fluid > .row { 
   display: flex;
   align-content: center !important;
   align-items: center !important;
}
#navigation .nav-link { font-weight: 600; }
#navigation .dropdown-menu.row {
   width: 60vw;
   top: 140%;
   left: 100%;
   transform: translateX(-45%);
   right: 0;
   padding: 2em;
   box-shadow: 0px 2px 6px 3px rgba(0,0,0,0.2);
   border: none;
}
#navigation #menu-19 { left: 0%; }
#navigation .dropdown-menu.row > h4 { padding-left: 1em;}
#navigation .dropdown-container-left.col-6 { float: left; padding: 25px; }
#navigation .dropdown-container-right.col-6 {
   float: right;
   background-color: var(--blue-lighter);
   padding: 25px;
   border-radius: 8px;
}
.dropdown-container-left li { margin-bottom: 10px;}
.dropdown-container-left .dropdown-item:hover,
.dropdown-container-left .dropdown-item:focus,
.dropdown-container-left .dropdown-item.active {
   border-radius: 8px;
   background: var(--blue-lighter);
   color: var(--darker-blue);
}
.dropdown-container-left .dropdown-item { padding-left: 5em; }
.dropdown-megamenu-16::before,
.dropdown-megamenu-17::before,
.dropdown-megamenu-18::before,
.dropdown-megamenu-20::before,
.dropdown-megamenu-21::before,
.dropdown-megamenu-22::before {
   content: " ";
   position: absolute;
   width: 56px;
   height: 56px;
   display: block;
   background-repeat: no-repeat;
   background-position: center;
   background-color: var(--blue-light);
   border-radius: 8px;

}
.dropdown-megamenu-16::before { 
   background-image: url(/fileadmin/user_upload/Bilder/Neue_Icons/icon_arbeitszeit.svg);
   background-size: 42px;
}
.dropdown-megamenu-17::before { 
   background-image: url(/fileadmin/user_upload/Bilder/Neue_Icons/icon_urlaub.svg);
   background-size: 42px;
 }
.dropdown-megamenu-18::before { 
   background-image: url(/fileadmin/user_upload/Bilder/Neue_Icons/icon_krankheit.svg);
   background-size: 42px;
 }
.dropdown-megamenu-20::before {
   background-image: url(/fileadmin/user_upload/Bilder/Neue_Icons/icon_handwerk.svg);
   background-size: 42px;
}
.dropdown-megamenu-21::before {
   background-image: url(/fileadmin/user_upload/Bilder/Neue_Icons/icon_office.svg);
   background-size: 35px;
}
.dropdown-megamenu-22::before {
   background-image: url(/fileadmin/user_upload/Bilder/Neue_Icons/icon_gastronomie.svg);
   background-size: 55px;
}
.dropdown-container-left .title { font-weight: 600; }
.dropdown-container-left .subtitle { font-size: .8em; }

.dropdown-container-right h4 {
   line-height: 1em;
   color: var(--dark-blue);
   padding: 0;
}
.dropdown-container-right p { line-height: 1.3em; text-align: left; width: initial;}
.dropdown-container-right button { display: block; width: 100%; padding: 15px;}
.dropdown-container-right button a { color: var(--white); text-decoration: none; font-weight: 500;}


#hero {
   padding-top: 5%;
   background: linear-gradient(0deg, rgba(255, 255, 255, 1) 70%, rgb(219 235 252) 100%);
   position: relative;
}

/* KONTAKT */
#kontakt .kontakt {
   background: var(--dark-blue);
   color: var(--white);
   border-radius: 20px;
   padding: 2em 3em;
}
#kontakt .kontakt > .row { display: flex; align-items: center; }
#kontakt .frame-type-container { display: flex; align-items: center; }
#kontakt h2 {
   font-size: clamp(1.9rem, 3.3vw, 3.4rem);
   line-height: 0.9em;
   color: var(--white);
}
#kontakt .btn { display: inline;}
#kontakt .text-right { 
   width: initial; 
   margin: 0;
   text-align: right;
}
#kontakt .btn-outline {
   border: 1px solid var(--white);
   color: var(--white);
   display: inline-block;
}
#kontakt .btn-primary {
   background: var(--white);
   color: var(--darker-blue);
   padding: 12px 20px;
   display: inline-block;
}

/* FORMULAR */
.form-group select, .form-group textarea { margin-bottom: 2em;}
.form-check { padding-left: 0;}
.offcanvas-header h5 { display: none;}
.offcanvas-header { justify-content: flex-end;}
.offcanvas.offcanvas-end {
    background: var(--darker-blue) !important;
    color: var(--white);
}
.offcanvas.offcanvas-end h2 { color: var(--white);}
.btn-close { filter: invert(1); font-size: 1.5em;}


.frame-type-shortcut .btn-primary {
    padding: 0.8em 2em;
}

#kontaktformular-283 .mb-5 {
   display: none;
}


/* FOOTER */
footer { margin: 2em 0; }
footer img { width: 50%; margin-bottom: 1em; }
footer p {
    width: initial;
    margin: 0;
    text-align: left;
}
footer h3 { font-size: clamp(1.1rem, 2vw, 1.5rem); }
footer .nav-link { margin: 1.2em 0; }
footer ul {
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: right;
}
footer li { display: inline; margin-right: 10px; }
footer svg { width: 25px; fill: var(--darker-blue); }
footer .first {margin-bottom: 1em;}
footer hr { margin: 1em 0; }


/* TESTIMONIALS*/
#testimonials p { margin: 0; }
#testimonials .frame-type-sslider { margin-top: 5em; }
#testimonials .frame-type-sslider p { text-align: left; }

/* SWIPER SLIDER */
.s-slider .frame-type-custom_textmedia {
   border-radius: 8px;
   padding: 2em;
   width: 24vw;
}
.s-slider .frame-type-custom_textmedia p { width: 100%; }
.s-slider .frame-type-custom_textmedia img {
   width: 18%;
   margin-top: 3em;
   margin-bottom: 1em;
   border-radius: 50%;
}
.s-slider figcaption .h4 {
   font-size: clamp(.9rem, 2vw, 1rem);
   margin-top: 0.6em;
   margin-bottom: 0;
   text-align: left;
   color: var(--dark-blue);
}
.s-slider figcaption p {
   font-size: clamp(.7rem, 2vw, .9rem);
   color: var(--dark-blue);
   text-align: left;
}
.s-slider .bodytext::before {
   content: " ";
   background-image: url(/fileadmin/user_upload/Bilder/quote-right-solid.svg);
   background-repeat: no-repeat;
   background-position: center;
   width: 45px;
   height: 45px;
   display: block;
   opacity: .5;
   margin-bottom: 1em;
}
.swiper .swiper-button-prev { margin-right: 1em !important; }
.swiper .swiper-button-next,
.swiper .swiper-button-prev {
   position: relative;
   top: initial;
   left: initial;
   right: initial;
   margin: initial;
   width: 65px;
   height: 60px;
   border: 2px solid var(--gray);
   border-radius: 50%;
}
.swiper .swiper-button-next::after,
.swiper .swiper-button-prev::after { font-size: 1.5em; color: var(--mid-gray); }
.swiper .container {
   display: flex !important;
   flex-wrap: nowrap;
   align-content: center;
   align-items: center;
   flex-direction: row !important;
}
.swiper-wrapper { margin-left: 10%; }
.swiper .swiper-pagination  {
   position: relative;
   display: inline-block;
   text-align: left;
   padding: 0px 35px;
   margin-top: 15px;
   width: 100%;
}
.swiper .swiper-pagination::after {
   content: " ";
   width: 95%;
   height: 2px;
   background-color: var(--gray);
   left: 4em;
   position: relative;
   display: block;
   top: -12px;
}
.swiper-wrapper .bodytext {min-height: 210px;}

/* 01. Spaces */
.frame-space-before-extra-small { padding-top: 10px;}
.frame-space-before-small { padding-top: 20px;}
.frame-space-before-medium { padding-top: 30px;}
.frame-space-before-large { padding-top: 40px;}
.frame-space-before-extra-large { padding-top: 50px;}

.frame-space-after-extra-small { padding-bottom: 10px;}
.frame-space-after-small { padding-bottom: 20px;}
.frame-space-after-medium { padding-bottom: 30px;}
.frame-space-after-large { padding-bottom: 40px;}
.frame-space-after-extra-large { padding-bottom: 50px;}

/* Frames */
.frame-primary-color { 
   background-color: var(--primary-color);
   color: var(--text);
}
.frame-secondary-color {
   background-color: var(--secondary-color);
   color: var(--text);
}
.frame-neutral {
   background-color: var(--gray-color);
   color: var(--text);
}
.frame-bordertop {
   border-top: 1px solid #333;
}
.frame-borderbottom {
   border-bottom: 1px solid #333;
}
.frame-borderall {
   border: 1px solid #333;
}
.frame-gradient {
   background: linear-gradient(90deg, rgba(41,171,223,1) 47%, rgba(30,151,200,1) 91%);
}
.frame-hover:hover {
   background: var(--secondary-color); 
}
.frame-fullsize {
   width: 100vh;
}
.frame-card {
  background: var(--primary-color);
  border: #FFF;
  box-shadow: 1px 1px 1px #eee;
}


/* Checkliste */
#checklistev2-756 h2 {
   margin-bottom: 0.6em;
   margin-top: 2em;
}

#checklistev2-756 .form-step-items {
   position: relative;
   display: inline;
   /* display: flex;
   flex-wrap: wrap;
   justify-content: space-evenly;
   align-items: center;
   gap: 1.5em; */
}

#checklistev2-756 .form-check {
   position: relative;
   padding: 15px 10px;
   border: 1px solid #d6d6d6;
   border-radius: 9px;
   box-shadow: 0px 2px 8px 2px #eee;
   background: var(--white);
}

#checklistev2-756 input[type="checkbox"] {
   width: 20px;
   height: 20px;
   display: contents;
   vertical-align: middle;

   /* z-index: -1; */
   transition: all .5s ease-in-out;
}

#checklistev2-756 .form-check:hover {
   background: var(--blue-lighter);
}

#checklistev2-756 .form-span:hover {
   cursor: pointer;
   transition: all .5s ease-in-out;
}

#checklistev2-756 .form-navigation {
   float: right;
}

#checklistev2-756 .form-check-label {
   display: inline-block;
    width: 100%;
}

#checklistev2-756 .form-span {
   display: inline-block;
   vertical-align: middle;
   width: 100%;
   font-size: 1.1em;
   padding-left: 1em;
}

#checklistev2-756 .form-input {
   visibility: hidden;
}

#checklistev2-756 .btn-primary, #checklistev2-756 .btn-cancel {
   padding: 0.6em 1.5em;
   border: 1px solid var(--blue);
   border-radius: 10px;
}
#checklistev2-756 .special-button {
  border-radius: 10px;
}

#checklistev2-756 .c-stepper {
   list-style: none;
   display: flex;
   flex-wrap: nowrap;
   align-content: center;
   justify-content: space-around;
}
#checklistev2-756 .c-stepper__circle {
   border-radius: 8px;
   border: 1px solid #eee;
   padding: 12px 20px;
   box-shadow: 0 1px 8px 1px #eee;
}
#checklistev2-756 .c-stepper__circle span { color: var(--darker-blue); }
#checklistev2-756 .c-stepper__item--current .c-stepper__circle { background: var(--blue-light); }
#checklistev2-756 .c-stepper__item--current .c-stepper__circle span { color: var(--dark-blue);}

#checklistev2-756 .c-stepper__item button { background: var(--darker-blue); display: block; text-align: left; width: 100%; }
#checklistev2-756 .c-stepper__item button span { color: var(--white); }

#checklistev2-756 #summary{
   display: flex;
   flex-wrap: wrap;
   align-content: center;
   justify-content: space-between;
   gap: 3.5em;
   display: none;
}

#checklistev2-756 .summary-table-label {
   display: flex;
   justify-content: space-between;
}

#checklistev2-756 .summary-table-label.colored {
   padding: 1em;
   border-radius: .5em;
   background: var(--blue-light);
   border: 1px solid var(--blue);
}
#checklistev2-756 .summary-table-label.not-colored {
   padding: 1em;
   border-radius: .5em;
   background: var(--gray);
   border: 1px solid var(--mid-gray)
}
#checklistev2-756 .summary_box:last-child {
   display: none;
}

#summery_result {
   display: flex;
   justify-content: center;
}
#summery_result .sum_card {
   border-radius: .5em;
   padding: 1em;
   background: var(--blue-light);
}
#summery_result .result_value {
   background: red;
   border-radius: 50%;
   padding: 1em;
}

#checklistev2-756 .btn-cancel[value="3"] {
  display: none;
}

/*CHECKLISTE RESULT PAGE */
    /* Styling for the result card */
    .result-card {
      background-color: var(--blue-lighter);
      border-radius: 1em;
      box-shadow: 0 1px 8px 4px #eee;
      max-width: 350px;
      margin: 8em auto 5em auto;
      padding: 20px;
      text-align: center;
      font-family: Arial, sans-serif;
      color: #333;
      animation: fadeIn 0.8s ease-in-out;
  
      position: relative;
  }
  
  .emotion {
      animation: fadeIn 0.8s ease-in-out;
      font-size: 3.3em;
  }
  .additional {
      animation: fadeIn 0.8s ease-in-out;
      margin: 1.3em 0;
  }
  
  /* Fade-in animation for the result card */
  @keyframes fadeIn {
      from {
          opacity: 0;
          transform: scale(0.9);
      }
      to {
          opacity: 1;
          transform: scale(1);
      }
  }
  
  /* Progress bar container styling */
  .progress-bar-container {
      background-color: #e0e0e0;
      border-radius: 20px;
      overflow: hidden;
      height: 27px;
      margin-top: 10px;
      width: 100%;
  }
  
  /* Animated progress bar */
  .progress-bar {
      background-color: #5cde60;
      height: 100%;
      width: 0;
      border-radius: 20px;
      transition: width 1s ease-in-out;
  }
  
  
  .confetti-container {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100%;
      height: 100%;
      pointer-events: none; /* Prevent interaction with confetti */
      transform: translate(-50%, -50%); /* Center the container */
  }
  
  /* Confetti styles */
  .confetti {
      position: absolute;
      border-radius: 5px;
      opacity: 0.8;
      animation: confetti-fall 1.5s forwards; /* Animation duration */
  }
  
  /* Keyframes for falling animation */
  @keyframes confetti-fall {
      0% {
          transform: translate(-50%, -50%) translateY(0) scale(1);
          opacity: 1;
      }
      100% {
          transform: translate(-50%, -50%) translateY(200px) scale(0.5);
          opacity: 0;
      }
  }
  
  .additionalButtons { text-align: center;}
  .special-button {
      display: inline-block;
      margin-top: 20px;
      padding: 10px 20px;
      background-color: var(--darker-blue);
      color: white;
      border: none;
      border-radius: 5px;
      text-decoration: none; /* No underline */
      transition: background-color 0.3s ease; /* Smooth hover effect */
  }
  
  .special-button:hover {
      background-color: var(--dark-blue); /* Darker green on hover */
  }

@media(max-width: 592px) {
  #checklistev2-756 .c-stepper {
    flex-direction: column;	
    padding: 0;
  }
  #checklistev2-756 .c-stepper__item {
    margin-bottom: 5px;
  }
  #checklistev2-756 .form-check {
    padding: 10px 9px;
  }
  #checklistev2-756 .form-navigation {
    padding-top: 49px !important;
    float: none;
  }
  #checklistev2-756 .btn-toolbar { justify-content: center !important; }
}

@media(max-width: 767px) {
   .section-headline h2 { margin-bottom: 1em;}
}

@media(max-width: 768px) {
   #navigation button {
      position: absolute;
      top: -40px;
      right: 0;
  }
  #navigation .dropdown-menu.row {
      width: initial;
      transform: none;
      padding: 0;
      box-shadow: none;
  }
  #navigation .dropdown-menu.row .col-6 { width: 100%; padding: 0;} 
  #navigation .dropdown-container-right { display: none;}
  .dropdown-megamenu-16::before, 
  .dropdown-megamenu-17::before, 
  .dropdown-megamenu-18::before,
  .dropdown-megamenu-20::before,
  .dropdown-megamenu-21::before,
  .dropdown-megamenu-22::before {  width: 49px;  height: 49px; }
  
  .dropdown-megamenu-20::before,
  .dropdown-megamenu-21::before,
  .dropdown-megamenu-22::before { padding: 0;}
  .dropdown-container-left .dropdown-item { padding-left: 3.6em; }

  #kontakt .btn-outline { margin: 1em 0;}
  #kontakt .btn-primary,
  #kontakt .btn-outline { display: block; width: 100%; }
  .textmedia-images { flex-wrap: wrap; }

  .swiper-wrapper { margin-left: 0%; }
  .s-slider .frame-type-custom_textmedia {
      border-radius: 8px;
      padding: 1em;
      width: 100vw;
  }
  .swiper .swiper-button-next, .swiper .swiper-button-prev { width: 52px; height: 40px; }
  .swiper .swiper-button-next::after, .swiper .swiper-button-prev::after { font-size: 1.1em; }

}

@media(min-width: 768px) and (max-width: 1023px) {
   #kontakt .btn-primary,
   #kontakt .btn-outline { display: block; width: 100%; }
   #navigation button {
      position: absolute;
      top: -40px;
      right: 0;
   }
   #navigation .dropdown-menu.row {
      width: initial;
      transform: none;
      padding: 0;
      box-shadow: none;
   }
   #navigation .dropdown-menu.row .col-6 { width: 100%; padding: 0;} 
   #navigation .dropdown-container-right { display: none;}
   .dropdown-megamenu-16::before, 
   .dropdown-megamenu-17::before, 
   .dropdown-megamenu-18::before,
   .dropdown-megamenu-20::before,
   .dropdown-megamenu-21::before,
   .dropdown-megamenu-22::before { width: 49px; height: 49px; }

   .dropdown-megamenu-20::before,
   .dropdown-megamenu-21::before,
   .dropdown-megamenu-22::before { padding: 0;}
   .dropdown-container-left .dropdown-item { padding-left: 3.6em; }

   #logos img { width: 150px; height: auto; }

  .dropdown-container-right p { width: initial; text-align: left;}
  .dropdown-container-right img { width: initial; }
  .section-headline h2 { margin-bottom: 0em; }
  .section-headline header p { width: 70%; }

  .subpage-standard p { width: 77%;}
  .swiper .swiper-button-next, 
  .swiper .swiper-button-prev {
      width: 65px;
      height: 53px;
  }
  .s-slider .frame-type-custom_textmedia { width: 27vw; }
}

@media(width: 820px) {
   .swiper-wrapper { margin-left: 8%; }
   .s-slider .frame-type-custom_textmedia { padding: 0em; }
   .s-slider figcaption .h4 { font-size: clamp(0.7rem,1.8vw,1rem); }
}

@media(min-width: 992px) {
   .navbar-expand-lg .navbar-collapse {
       display: flex !important;
       flex-basis: auto;
       justify-content: center;
   }
}

@media(min-width: 1024px) and (max-width: 1128px){
  #navigation .dropdown-container-right.col-6 { width: 45%; background-color: transparent; }
  #navigation .dropdown-menu.row { width: 75vw; padding: 2em 0em;}
  .dropdown-container-right h4 { font-size: 1.6em; }
  #navigation .dropdown-container-right img { width: initial; }

  .swiper-wrapper { margin-left: 7%; }
  .swiper .swiper-button-next, .swiper .swiper-button-prev { width: 50px; height: 44px; }
  .swiper .swiper-button-next::after, .swiper .swiper-button-prev::after { font-size: 1.1em; }
}

@media(min-width: 1128px) and (max-width: 1365px) {
  #navigation .dropdown-container-right.col-6 { width: 45%; background-color: transparent; }
  #navigation .dropdown-menu.row { width: 60vw; padding: 2em 0em; }
  #navigation .dropdown-container-right img { width: initial; }

  .swiper .swiper-button-next, .swiper .swiper-button-prev { height: 57px; }
  .swiper-wrapper, .subpage .swiper-wrapper { margin-left: 8%; }
}

@media(min-width: 1366px) {
  #navigation .dropdown-container-right.col-6 { width: 45%; background-color: transparent; }
  #navigation .dropdown-menu.row { width: 50vw; padding: 2em 0em; }
  #navigation .dropdown-container-right img { width: initial; }

  .swiper-wrapper, .subpage .swiper-wrapper { margin-left: 8%; }
  .swiper .swiper-button-next, .swiper .swiper-button-prev { height: 57px; }
}

@media(min-width: 1600px) {
   .swiper-wrapper, .subpage .swiper-wrapper { margin-left: 10%; }
}

@media(min-width: 1920px) {
   #navigation .dropdown-menu.row { width: 40vw; }
   .swiper-wrapper, .subpage .swiper-wrapper { margin-left: 16%; }
}
@media(min-width: 2300px) {
   .swiper-wrapper, .subpage .swiper-wrapper { margin-left: 21%; }
}