body.schnuppi-celebration-mode .module-schnuppi-tool .header h1 {
	color: white;
}

body.schnuppi-celebration-mode .module-schnuppi-tool .footer-content img {
	filter: invert(100%) sepia(100%) saturate(2%) hue-rotate(220deg) brightness(108%) contrast(101%);
}

.module-schnuppi-tool {
	/* CSS Custom Properties for consistency - mobile-first base */
	--primary-color: #36286D;
	--accent-color: #00C8ED;
	--success-color: #c6f002;
	--border-radius: 8px;
	--transition: 0.3s ease;
	--spacing-xs: 0.25rem;
	--spacing-sm: 0.5rem;
	--spacing-md: 1rem;
	--spacing-lg: 1.5rem;
	--spacing-xl: 2rem;
	--header-height: 130px;
	--footer-height: 50px;
	--grid-gap: var(--spacing-sm);

	/* Layout foundation */
	font-family: Effra, sans-serif;
	@media (max-height: 720px) {
		overflow-y: auto !important;
  }

  .btn-primary {
    display: inline-block;
    margin-bottom: 0;
    padding: 15px 25px;
    background: #c6f002;
    color: #333333;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    border-radius: 33px;
    text-align: center;
    user-select: none;
    vertical-align: middle;

    &:hover, &:focus {
      background: white;
      color: #333333;
    }
        
    @media (max-width: 575px) { 
      padding: 5px 10px;
    }
  }

  .progress {
    --bs-progress-height: 1rem;
    --bs-progress-font-size: 0.75rem;
    --bs-progress-bg: var(--bs-secondary-bg);
    --bs-progress-border-radius: var(--bs-border-radius);
    --bs-progress-box-shadow: var(--bs-box-shadow-inset);
    --bs-progress-bar-color: #fff;
    --bs-progress-bar-bg: #0d6efd;
    --bs-progress-bar-transition: width 0.6s ease;
    background-color: var(--bs-progress-bg);
    border-radius: var(--bs-progress-border-radius);
    display: flex;
    font-size: var(--bs-progress-font-size);
    height: var(--bs-progress-height);
    overflow: hidden;
    
    .progress-bar {
      background-color: var(--bs-progress-bar-bg);
      color: var(--bs-progress-bar-color);
      display: flex;
      flex-direction: column;
      justify-content: center;
      overflow: hidden;
      text-align: center;
      transition: var(--bs-progress-bar-transition);
      white-space: nowrap;
    }
  }

	/* Celebration theme */
	&.celebration {
		background-color: var(--primary-color);
		*:not(a) { 
      color: white !important;
    }

		.header-content {
			height: calc(var(--header-height) * 0.6); /* 60% of normal header height */
			margin-bottom: 0 !important; /* Remove margin-bottom */
		}
	}

	.row.height-limiter {
		margin: 0; /* Remove Bootstrap row margins */
	}

	.col-12 {
		padding: 0; /* Remove Bootstrap column padding */
		display: flex;
		flex-direction: column;
	}

	.module-container {
		display: flex;
		flex-direction: column;
/*     height: var(--module-height, 100dvh); */
		width: 100%;
    padding: 0 calc(var(--bs-gutter-x) / 2);
	}

	.header-content {
		height: var(--padding-top, var(--header-height));
		padding-top: var(--padding-top, 15px);
		display: flex;
		flex-direction: column;
		flex-shrink: 0;

		h1 {
			font-family: 'QuatroSlab', "Roboto Slab", sans-serif;
			font-weight: 700;
/* 			font-size: clamp(36px, 7vw, 44px); */
			margin-bottom: 10px;
			line-height: 1.2;
			color: #333333;
      
      &.kampagne {
        margin-bottom: 28px;
        @media (max-width: 767.98px) {
          margin-bottom: 12px;
        }
      }

			@media (min-width: 576px) {
/* 				font-size: clamp(28px, 6vw, 42px); */
			}

			@media (min-width: 992px) {
/* 				font-size: clamp(24px, 8vw, 48px); */
			}
		}

		p.subtext {
			margin-bottom: 8px;
			font-weight: bold;
			font-size: clamp(14px, 3.5vw, 16px);
			line-height: 1.2;

			@media (min-width: 576px) {
				font-size: clamp(18px, 4vw, 20px);
			}
		}

		.progress {
			height: 12px;
			background-color: #e9ecef;
			border-radius: 4px;
			overflow: hidden;

			.progress-bar {
				border-top-right-radius: 10px;
				border-bottom-right-radius: 10px;
				background-color: #333333 !important;
				transition: width var(--transition);
				filter: drop-shadow(2px 1px 4px #777777B8);
			}
		}

		@media (min-width: 992px) {
			margin-bottom: 20px; /* Reduced from 40px to 20px (half) */
		}
	}

	.content {
		flex: 1;
		min-height: 0;
		overflow: hidden;

		.steps {
			height: 100%;

			.swiper-slide {
				display: flex;
				flex-direction: column;
				gap: var(--spacing-md);
				padding: var(--spacing-sm) 0;

				.row{
					margin-left: unset;
					margin-right: unset;
					height: 100%;
					width: 100%;
				}
			}

			.step-1 {
				.row {
					height: 100%;

					.col-12 {
						height: 100%;
					}
				}

				.jobs {
					display: grid;
					grid-template-columns: repeat(2, 1fr);
					grid-template-rows: repeat(4, 1fr);
					gap: 10px;
/* 					height: 100%; */
					width: 100%;

					.job {
						display: flex;
						flex-direction: column;
						cursor: pointer;
						border-radius: var(--border-radius);
						transition: transform var(--transition), box-shadow var(--transition);
						overflow: hidden;
						background: none;
						border: none;

						&.specialization {
							display: none;
						}

						.job-image {
							width: 100%;
							height: auto;
              min-height: 0;
              aspect-ratio: 3 / 1.7;
              overflow: hidden;
              @supports not (aspect-ratio: 1) {
                height: 0;
                padding-top: 56.6667%; /* 1.7 / 3 * 100% */
              }
              
							img {
								width: 100%;
								height: 100%;
								object-fit: cover;
								object-position: center;
                transition: .25s;

                &:hover {
                  scale: 1.1;
                }
							}
						}

						.job-text {
							padding-top: 5px !important;
              margin-bottom: 1rem;
							display: flex;
							align-items: flex-start;
							justify-content: flex-start;

							.label {
								font-size: clamp(12px, 3.5vw, 14px);
								font-family: 'QuatroSlab', "Roboto Slab", sans-serif;
								font-weight: 700;
								line-height: 1.2;
								text-align: left;
/* 								display: -webkit-box;
								-webkit-line-clamp: 2;
								-webkit-box-orient: vertical; */
								overflow: hidden;
								width: 100%;
							}
						}
					}

					@media (min-width: 576px) and (max-width: 991.98px) {
						gap: 15px;
            
						.job {
							.job-text {
								.label {
									font-size: clamp(13px, 2.3vw, 15px);
								}
							}
						}
					}
          
          @media (min-width: 576px) {
            grid-template-columns: repeat(4, 1fr);
            grid-template-rows: repeat(2, 1fr);
            .job {
              .job-image {
                aspect-ratio: 3 / 2;
              }
            }
          }
          
					@media (min-width: 992px) {
						gap: 30px;
						grid-template-columns: repeat(4, 1fr);
						grid-template-rows: repeat(2, 1fr);

						.job {
							.job-image {
                aspect-ratio: 16/10;
							}

							.job-text {
								.label {
									font-size: clamp(18px, 1.5vw, 24px);
								}
							}
						}
					}
          
          @media (max-height: 900px) {
            row-gap: 0;
          }
				}
			}

			.step-2 {
				/* No breakpoint-specific overrides for step-2 */
				.canton-selection {
					display: flex;
					flex-direction: column;
					gap: var(--spacing-md);

					select {
						border: 2px solid #333333;
						border-radius: var(--border-radius);
						padding: var(--spacing-sm);
						font-size: 16px; /* Prevent zoom on iOS */
						min-height: 44px;

            &:focus {
              box-shadow: 0 0 0 .25rem rgb(198 240 2 / 25%);
            }
					}

					button {
						width: 100%;
						min-height: 44px;
						font-size: 16px;
					}
				}

				.loading-animation {
					overflow: hidden;
					display: none;
					text-align: center;

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

			.step-3 {
				display: flex;
				flex-direction: column;
				gap: var(--spacing-md);
				justify-content: space-between;

				.calendar-container {
/* 					height: 70%; */
/*           height: 100%; */
/* 					max-height: 430px; */
/* 					min-height: 350px; Ensure minimum height on mobile */
/* 					position: relative;
					overflow: hidden; */
          margin-bottom: 1rem;

					@media (min-width: 992px) {
/* 						max-height: none; Remove max-height constraint */
/* 						min-height: 400px; Set minimum height of 600px for desktop */
/* 						height: auto; Allow height to be determined by min-height */
/* 						flex: 1; Take available space */
					}
				}

				.calendar {
					height: 100%;
					width: 100%;

					table { margin-bottom: 0; }

					* {
						border: none;
						color: #333333;
						font-weight: bold;
						background: none;
						text-decoration: none;
					}
          
          .fc-button-group {
            margin: 0;
          }

					.fc-selected-day {
						background-color: rgba(198, 240, 2, 0.3) !important;
						color: white;
					}

					.fc-range-start {
						background-color: rgba(198, 240, 2, 1) !important;
						border-top-left-radius: 50%;
						border-bottom-left-radius: 50%;
					}

					.fc-range-end {
						background-color: rgba(198, 240, 2, 1) !important;
						border-top-right-radius: 50%;
						border-bottom-right-radius: 50%;
					}

					.fc-day-sat,
					.fc-day-sun,
					.fc-day-past,
					.fc-day-today {
						* {
							pointer-events: none;
							opacity: 0.6;
						}
					}

					.fc-header-toolbar {
            min-height: 80px;
						margin-bottom: 10px;
						padding: 12px;
						border-radius: var(--border-radius);
						color: white;
						background-color: #333333;

						* { 
              color: white; 
            }
            
            .fc-toolbar-chunk:nth-child(3n) {
              text-align: end;
            }
					}

					.fc-view-harness {
						table.fc-col-header thead th {
							border: none;
							background: none;
						}

						tbody {
							.fc-daygrid-day-frame {
								display: flex;
								align-items: center;
								justify-content: center;
								aspect-ratio: 1/1;
								min-height: 35px;
								width: 100%;

								@media (min-width: 576px) {
									min-height: 40px;
								}
							}

							.fc-daygrid-day {
								width: 100%;
                height: auto;
								position: relative;

								&::before {
									content: '';
									display: block;
									padding-top: 100%;
								}

								.fc-daygrid-day-frame {
									position: absolute;
									top: 0;
									left: 0;
									right: 0;
									bottom: 0;
									display: flex;
									align-items: center;
									justify-content: center;
								}
							}
						}
					}

          @media (max-width: 450px) {
            .fc-toolbar-chunk {
              display: flex;
              flex-direction: column;
              
              button {
                padding: 0 !important;
              }
              
              &:nth-of-type(3) {
                flex-shrink: 0;
                flex-basis: 60px;
              }
            }
            .fc-button-group {
              flex-direction: column;
            }
          }
				}

				.calendar-loading {
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					background-color: rgba(255, 255, 255, 0.95);
					display: flex;
					align-items: center;
					justify-content: center;
					z-index: 10;

					.loading-animation {
						text-align: center;
						padding: var(--spacing-md);
						height: 100%;
						width: 100%;

						img {
							height: 100%;
						}
					}
				}

				> button {
					width: 100%;
					min-height: 50px;
					font-size: 16px;
					flex-shrink: 0;
					margin-top: 0;
				}

				.no-results {
					display: none;
					text-align: center;
					padding: var(--spacing-md);
					margin-top: var(--spacing-sm);
					background-color: #f8f9fa;
					border: 1px solid #dee2e6;
					border-radius: var(--border-radius);
					color: #6c757d;
					font-style: italic;
					flex-shrink: 0; /* Prevent shrinking */
				}
			}

			.step-4 {
				.companies {
					display: grid;
					grid-template-columns: repeat(2, 1fr);
					grid-template-rows: repeat(3, 1fr);
					gap: 10px;
					height: 80%;
					width: 100%;

					.company {
						border: 1px solid #333333;
						border-radius: var(--border-radius);
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						cursor: pointer;
						padding: calc(var(--spacing-xs) * 0.75);
						transition: transform var(--transition), box-shadow var(--transition);
						min-height: 44px;
						overflow: hidden;

						.name {
							text-align: center;
							font-size: 18px;
							font-weight: 700;
							font-family: 'QuatroSlab', "Roboto Slab", sans-serif;
							line-height: 1.1;
							margin-bottom: var(--spacing-xs);
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
							overflow: hidden;
						}

						.place {
							line-height: 1.1;
							text-align: center;
							font-size: 18px;
						}

						&.next-box {
							background-color: var(--accent-color);
							color: white;

							.show-more {
								font-size: clamp(14px, 3.5vw, 16px);
								font-weight: bold;
								margin-bottom: var(--spacing-xs);
								text-align: center;
							}

							.next-arrow {
								background-color: white;
								border-radius: 50%;
								height: clamp(28px, 6vw, 32px);
								width: clamp(28px, 6vw, 32px);
								display: flex;
								align-items: center;
								justify-content: center;
								flex-shrink: 0;

								img { width: 60%; height: 60%; }
							}
						}
					}

					@media (min-width: 576px) and (max-width: 991px) {
						gap: 12px;

						.company {
							padding: var(--spacing-sm);

							.show-more { font-size: clamp(16px, 4vw, 20px); }
							.next-arrow { height: clamp(32px, 8vw, 40px); width: clamp(32px, 8vw, 40px); }
						}
					}

					@media (min-width: 992px) {
						gap: 15px;

						grid-template-columns: repeat(3, 1fr);
						grid-template-rows: repeat(2, 1fr);
            
            height: unset;

						.company {
							aspect-ratio: 16 / 12;
							padding: var(--spacing-sm);

							.show-more { font-size: clamp(16px, 4vw, 20px); }
							.next-arrow { height: clamp(32px, 8vw, 40px); width: clamp(32px, 8vw, 40px); }
						}
					}
				}

				.pagination {
					height: 20%;
					display: flex;
					align-items: center;
					justify-content: center;
					gap: 10px;

					.item {
						width: 30px;
						height: 30px;
						border: 1px solid #333333;
						display: flex;
						align-items: center;
						justify-content: center;
						border-radius: 50%;

						&.active {
							background-color: var(--accent-color);
							border-color: var(--accent-color);
						}
					}

					@media (min-width: 992px) {
						margin-top: 30px;

						.item {
							width: 35px;
							height: 35px;
						}
					}
				}
			}

			.step-5 {
        overflow: auto;
        
				form {
					display: flex;
					flex-direction: column;
					gap: calc(var(--spacing-sm) * 0.75);
					height: 100%;
          
          input {
            &:focus {
              box-shadow: rgba(198, 240, 2, 0.25) 0px 0px 0px 0.25rem;
            }
          }

					.form-group { margin-bottom: calc(var(--spacing-sm) * 0.75); }
					input, label { font-family: Effra, sans-serif !important; }

					input[type='text'],
					input[type='email'],
					input[type='tel'] {
						border-radius: var(--spacing-sm);
						border: 2px solid #333333;
						padding: var(--spacing-sm);
						font-size: 16px;
						min-height: 44px;
            min-width: 90px;
						transition: border-color var(--transition);

						&.is-invalid {
							border-color: #dc3545;
							box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
						}            
					}

					input[type='checkbox'] { 
            border-radius: 4px; width: 20px; height: 20px; border: 2px solid #333333; 
            
            &.is-invalid {
              box-shadow: rgba(220, 53, 69, 0.25) 0px 0px 0px 0.2rem;
            }
          }
					input[type='radio'] { border: 2px solid #333333; }
					.form-check-input:checked { background-color: #333333; }

					.age-verification { 
            display: flex; 
            flex-wrap: wrap;
            flex-direction: column;
            align-items: flex-start;  
            column-gap: clamp(1rem, 1rem + 2vw, 3rem) !important;
            row-gap: 0.5rem;
            margin-bottom: 10px; 
            margin-bottom: 5px;
          }
					.parent-mobile { 
						transition: all var(--transition) ease-in-out; 
						transform-origin: top; 
						display: none; 
            margin-bottom: 0 !important;

						> div {
							display: flex;
              flex-wrap: wrap;
							column-gap: 20px;
							justify-content: space-between;
							align-items: center;

							label {
                flex-shrink: 0;
							}

							input {
                flex: 1;
								height: 44px;
							}
						}
					}

					.opt-in {
						a {
							color: #333333;
							text-decoration-color: #c6f002;
						}
					}

          .btn-submit { margin-top: auto; min-height: 44px; font-size: 16px; border-radius: 50px; margin-bottom: 1rem; }
				}

				@media (min-width: 576px) {
					form {
						gap: var(--spacing-sm);
						.form-group { margin-bottom: var(--spacing-sm); }
						.form-group.form-check { margin-bottom: var(--spacing-lg); }
						.age-verification { 
              flex-direction: row;
              align-items: center;
              margin-bottom: 10px;
            }
						.parent-mobile { transition: none; opacity: 1; max-height: none; }
					}
				}
			}

			.step-6 {
				&.celebration-content {
					text-align: center;
					display: flex;
					flex-direction: column;
					align-items: center;
					gap: var(--spacing-md);
					height: 100%;
					position: relative;

					.celebration-video {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 100%;
						height: 70%; /* Back to 70% as requested */
						margin-bottom: 20px;
						position: relative;

						img {
							width: 100%;
							height: 100%;
							object-fit: contain; /* Changed from cover to contain to prevent overflow */
							max-height: 100%; /* Ensure image doesn't exceed container */
							position: absolute;
							inset: 0;
							display: block;
							margin: auto;

							&.celebration {
								z-index: 1;
							}

							&.confetti {
								z-index: 2;
								pointer-events: none;  
								object-fit: cover;
							}
						}
					}

					.celebration-message {
						h2 {
							font-family: 'QuatroSlab', "Roboto Slab", sans-serif;
							font-weight: 700;
							font-size: clamp(20px, 5vw, 32px);
							margin-bottom: var(--spacing-sm);
						}
						p { font-size: clamp(14px, 4vw, 18px); margin-bottom: 0; }
					}

					.bottom {
						width: 100%;
						flex: 1; /* Allow bottom section to take remaining space */
						display: flex;
						flex-direction: column;
						justify-content: center;

						.celebration-actions {
							button { min-height: 44px; font-size: 16px; padding: var(--spacing-sm) var(--spacing-lg); color: #333333; width: 100%; }
						}

						.slanted-text {
							font-size: 30px;
							font-family: 'QuatroSlab', "Roboto Slab", sans-serif;
							font-weight: 700;
							transform: rotate(348deg);
							margin-top: 30px;
						}
					}

					.confetti-container { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 10; overflow: hidden; }

					@media (min-width: 992px) {
						.celebration-video { 
							height: 70%; /* 70% for desktop too */

							img {
								width: auto; /* Let width be auto to maintain aspect ratio */
								height: 100%;
								max-width: 100%; /* Prevent horizontal overflow */
							}
						}

						.bottom {
							.celebration-actions {
								button {
									width: auto; /* Don't force full width on desktop */
									font-size: 30px;
									padding: 18px 60px;
									line-height: 1;
								}
							}
						}
					}
				}
			}
		}
	}

	.footer-content {
		height: var(--footer-height);
		display: flex;
		align-items: center;
		flex-shrink: 0;

		.step-back {
			display: none;
			color: #333333;
			text-decoration: none;
			align-items: center;
			gap: var(--spacing-xs);
			min-height: 44px;
			padding: var(--spacing-xs);
			border-radius: var(--spacing-sm);
			transition: background-color var(--transition);

			> div {
				display: flex;
				align-items: center;

				img { height: 20px; width: 20px; margin-right: 10px; }

				.text { font-size: clamp(13px, 2.5vw, 15px); }
			}
		}
	}
}

/* Confetti animation */
@keyframes fall {
	0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
	100% { transform: translateY(100vh) rotate(360deg); opacity: 0; }
}

/* Loading spinner animation */
@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* Screen reader only class */
.sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}



/* incase oltian's phone doesn't work, here is a css version without nesting, perhaps that works, but i used up all the trials of the online services


body.schnuppi-celebration-mode .module-schnuppi-tool .header h1 {
  color: white;
}

body.schnuppi-celebration-mode .module-schnuppi-tool .footer-content img {
  filter: invert(100%) sepia(100%) saturate(2%) hue-rotate(220deg) brightness(108%) contrast(101%);
}

.module-schnuppi-tool {
  --primary-color: #36286D;
  --accent-color: #00C8ED;
  --success-color: #c6f002;
  --border-radius: 8px;
  --transition: 0.3s ease;
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --header-height: 130px;
  --footer-height: 50px;
  --grid-gap: var(--spacing-sm);
  font-family: Effra, sans-serif;
}

@media (max-height: 720px) {
  .module-schnuppi-tool {
    overflow-y: auto !important;
  }
}

.module-schnuppi-tool .btn-primary {
  display: inline-block;
  margin-bottom: 0;
  padding: 15px 25px;
  background: #c6f002;
  color: #333333;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  border-radius: 33px;
  text-align: center;
  user-select: none;
  vertical-align: middle;
}

.module-schnuppi-tool .btn-primary:hover,
.module-schnuppi-tool .btn-primary:focus {
  background: white;
  color: #333333;
}

@media (max-width: 575px) {
  .module-schnuppi-tool .btn-primary {
    padding: 5px 10px;
  }
}

.module-schnuppi-tool .progress {
  --bs-progress-height: 1rem;
  --bs-progress-font-size: 0.75rem;
  --bs-progress-bg: var(--bs-secondary-bg);
  --bs-progress-border-radius: var(--bs-border-radius);
  --bs-progress-box-shadow: var(--bs-box-shadow-inset);
  --bs-progress-bar-color: #fff;
  --bs-progress-bar-bg: #0d6efd;
  --bs-progress-bar-transition: width 0.6s ease;
  background-color: var(--bs-progress-bg);
  border-radius: var(--bs-progress-border-radius);
  display: flex;
  font-size: var(--bs-progress-font-size);
  height: var(--bs-progress-height);
  overflow: hidden;
}

.module-schnuppi-tool .progress .progress-bar {
  background-color: var(--bs-progress-bar-bg);
  color: var(--bs-progress-bar-color);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  text-align: center;
  transition: var(--bs-progress-bar-transition);
  white-space: nowrap;
}

.module-schnuppi-tool.celebration {
  background-color: var(--primary-color);
}

.module-schnuppi-tool.celebration *:not(a) {
  color: white !important;
}

.module-schnuppi-tool.celebration .header-content {
  height: calc(var(--header-height) * 0.6);
  margin-bottom: 0 !important;
}

.module-schnuppi-tool .row.height-limiter {
  margin: 0;
}

.module-schnuppi-tool .col-12 {
  padding: 0;
  display: flex;
  flex-direction: column;
}

.module-schnuppi-tool .module-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0 calc(var(--bs-gutter-x) / 2);
}

.module-schnuppi-tool .header-content {
  height: var(--padding-top, var(--header-height));
  padding-top: var(--padding-top, 15px);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.module-schnuppi-tool .header-content h1 {
  font-family: 'QuatroSlab', "Roboto Slab", sans-serif;
  font-weight: 700;
  margin-bottom: 10px;
  line-height: 1.2;
  color: #333333;
}

.module-schnuppi-tool .header-content h1.kampagne {
  margin-bottom: 28px;
}

@media (max-width: 767.98px) {
  .module-schnuppi-tool .header-content h1.kampagne {
    margin-bottom: 12px;
  }
}

@media (min-width: 576px) {
  .module-schnuppi-tool .header-content h1 {
  }
}

@media (min-width: 992px) {
  .module-schnuppi-tool .header-content h1 {
  }
}

.module-schnuppi-tool .header-content p.subtext {
  margin-bottom: 8px;
  font-weight: bold;
  font-size: clamp(14px, 3.5vw, 16px);
  line-height: 1.2;
}

@media (min-width: 576px) {
  .module-schnuppi-tool .header-content p.subtext {
    font-size: clamp(18px, 4vw, 20px);
  }
}

.module-schnuppi-tool .header-content .progress {
  height: 12px;
  background-color: #e9ecef;
  border-radius: 4px;
  overflow: hidden;
}

.module-schnuppi-tool .header-content .progress .progress-bar {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  background-color: #333333 !important;
  transition: width var(--transition);
  filter: drop-shadow(2px 1px 4px #777777B8);
}

@media (min-width: 992px) {
  .module-schnuppi-tool .header-content {
    margin-bottom: 20px;
  }
}

.module-schnuppi-tool .content {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.module-schnuppi-tool .content .steps {
  height: 100%;
}

.module-schnuppi-tool .content .steps .swiper-slide {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  padding: var(--spacing-sm) 0;
}

.module-schnuppi-tool .content .steps .swiper-slide .row {
  margin-left: unset;
  margin-right: unset;
  height: 100%;
  width: 100%;
}

.module-schnuppi-tool .content .steps .step-1 .row {
  height: 100%;
}

.module-schnuppi-tool .content .steps .step-1 .row .col-12 {
  height: 100%;
}

.module-schnuppi-tool .content .steps .step-1 .jobs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 10px;
  width: 100%;
}

.module-schnuppi-tool .content .steps .step-1 .jobs .job {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  border-radius: var(--border-radius);
  transition: transform var(--transition), box-shadow var(--transition);
  overflow: hidden;
  background: none;
  border: none;
}

.module-schnuppi-tool .content .steps .step-1 .jobs .job.specialization {
  display: none;
}

.module-schnuppi-tool .content .steps .step-1 .jobs .job .job-image {
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 1.7647058824;
  overflow: hidden;
}

@supports not (aspect-ratio: 1) {
  .module-schnuppi-tool .content .steps .step-1 .jobs .job .job-image {
    height: 0;
    padding-top: 56.6667%;
  }
}

.module-schnuppi-tool .content .steps .step-1 .jobs .job .job-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: 0.25s;
}

.module-schnuppi-tool .content .steps .step-1 .jobs .job .job-image img:hover {
  scale: 1.1;
}

.module-schnuppi-tool .content .steps .step-1 .jobs .job .job-text {
  padding-top: 5px !important;
  margin-bottom: 1rem;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.module-schnuppi-tool .content .steps .step-1 .jobs .job .job-text .label {
  font-size: clamp(12px, 3.5vw, 14px);
  font-family: 'QuatroSlab', "Roboto Slab", sans-serif;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
  overflow: hidden;
  width: 100%;
}

@media (min-width: 576px) and (max-width: 991.98px) {
  .module-schnuppi-tool .content .steps .step-1 .jobs {
    gap: 15px;
  }

  .module-schnuppi-tool .content .steps .step-1 .jobs .job .job-text .label {
    font-size: clamp(13px, 2.3vw, 15px);
  }
}

@media (min-width: 576px) {
  .module-schnuppi-tool .content .steps .step-1 .jobs {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
  }

  .module-schnuppi-tool .content .steps .step-1 .jobs .job .job-image {
    aspect-ratio: 1.5;
  }
}

@media (min-width: 992px) {
  .module-schnuppi-tool .content .steps .step-1 .jobs {
    gap: 30px;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
  }

  .module-schnuppi-tool .content .steps .step-1 .jobs .job .job-image {
    aspect-ratio: 1.6;
  }

  .module-schnuppi-tool .content .steps .step-1 .jobs .job .job-text .label {
    font-size: clamp(18px, 1.5vw, 24px);
  }
}

@media (max-height: 900px) {
  .module-schnuppi-tool .content .steps .step-1 .jobs {
    row-gap: 0;
  }
}

.module-schnuppi-tool .content .steps .step-2 {
}

.module-schnuppi-tool .content .steps .step-2 .canton-selection {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.module-schnuppi-tool .content .steps .step-2 .canton-selection select {
  border: 2px solid #333333;
  border-radius: var(--border-radius);
  padding: var(--spacing-sm);
  font-size: 16px;
  min-height: 44px;
}

.module-schnuppi-tool .content .steps .step-2 .canton-selection select:focus {
  box-shadow: 0 0 0 0.25rem rgba(198, 240, 2, 0.25);
}

.module-schnuppi-tool .content .steps .step-2 .canton-selection button {
  width: 100%;
  min-height: 44px;
  font-size: 16px;
}

.module-schnuppi-tool .content .steps .step-2 .loading-animation {
  overflow: hidden;
  display: none;
  text-align: center;
}

.module-schnuppi-tool .content .steps .step-2 .loading-animation img {
  max-width: 200px;
  width: 100%;
  height: auto;
}

.module-schnuppi-tool .content .steps .step-3 {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  justify-content: space-between;
}

.module-schnuppi-tool .content .steps .step-3 .calendar-container {
  margin-bottom: 1rem;
}

@media (min-width: 992px) {
  .module-schnuppi-tool .content .steps .step-3 .calendar-container {
  }
}

.module-schnuppi-tool .content .steps .step-3 .calendar {
  height: 100%;
  width: 100%;
}

.module-schnuppi-tool .content .steps .step-3 .calendar table {
  margin-bottom: 0;
}

.module-schnuppi-tool .content .steps .step-3 .calendar * {
  border: none;
  color: #333333;
  font-weight: bold;
  background: none;
  text-decoration: none;
}

.module-schnuppi-tool .content .steps .step-3 .calendar .fc-button-group {
  margin: 0;
}

.module-schnuppi-tool .content .steps .step-3 .calendar .fc-selected-day {
  background-color: rgba(198, 240, 2, 0.3) !important;
  color: white;
}

.module-schnuppi-tool .content .steps .step-3 .calendar .fc-range-start {
  background-color: #c6f002 !important;
  border-top-left-radius: 50%;
  border-bottom-left-radius: 50%;
}

.module-schnuppi-tool .content .steps .step-3 .calendar .fc-range-end {
  background-color: #c6f002 !important;
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
}

.module-schnuppi-tool .content .steps .step-3 .calendar .fc-day-sat *,
.module-schnuppi-tool .content .steps .step-3 .calendar .fc-day-sun *,
.module-schnuppi-tool .content .steps .step-3 .calendar .fc-day-past *,
.module-schnuppi-tool .content .steps .step-3 .calendar .fc-day-today * {
  pointer-events: none;
  opacity: 0.6;
}

.module-schnuppi-tool .content .steps .step-3 .calendar .fc-header-toolbar {
  min-height: 80px;
  margin-bottom: 10px;
  padding: 12px;
  border-radius: var(--border-radius);
  color: white;
  background-color: #333333;
}

.module-schnuppi-tool .content .steps .step-3 .calendar .fc-header-toolbar * {
  color: white;
}

.module-schnuppi-tool .content .steps .step-3 .calendar .fc-view-harness table.fc-col-header thead th {
  border: none;
  background: none;
}

.module-schnuppi-tool .content .steps .step-3 .calendar .fc-view-harness tbody .fc-daygrid-day-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  min-height: 35px;
  width: 100%;
}

@media (min-width: 576px) {
  .module-schnuppi-tool .content .steps .step-3 .calendar .fc-view-harness tbody .fc-daygrid-day-frame {
    min-height: 40px;
  }
}

.module-schnuppi-tool .content .steps .step-3 .calendar .fc-view-harness tbody .fc-daygrid-day {
  width: 100%;
  height: auto;
  position: relative;
}

.module-schnuppi-tool .content .steps .step-3 .calendar .fc-view-harness tbody .fc-daygrid-day::before {
  content: '';
  display: block;
  padding-top: 100%;
}

.module-schnuppi-tool .content .steps .step-3 .calendar .fc-view-harness tbody .fc-daygrid-day .fc-daygrid-day-frame {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 450px) {
  .module-schnuppi-tool .content .steps .step-3 .calendar .fc-toolbar-chunk {
    display: flex;
    flex-direction: column;
  }

  .module-schnuppi-tool .content .steps .step-3 .calendar .fc-toolbar-chunk button {
    padding: 0 !important;
  }

  .module-schnuppi-tool .content .steps .step-3 .calendar .fc-toolbar-chunk:nth-of-type(3) {
    flex-shrink: 0;
    flex-basis: 60px;
  }

  .module-schnuppi-tool .content .steps .step-3 .calendar .fc-button-group {
    flex-direction: column;
  }
}

.module-schnuppi-tool .content .steps .step-3 .calendar-loading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.module-schnuppi-tool .content .steps .step-3 .calendar-loading .loading-animation {
  text-align: center;
  padding: var(--spacing-md);
  height: 100%;
  width: 100%;
}

.module-schnuppi-tool .content .steps .step-3 .calendar-loading .loading-animation img {
  height: 100%;
}

.module-schnuppi-tool .content .steps .step-3>button {
  width: 100%;
  min-height: 50px;
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 0;
}

.module-schnuppi-tool .content .steps .step-3 .no-results {
  display: none;
  text-align: center;
  padding: var(--spacing-md);
  margin-top: var(--spacing-sm);
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: var(--border-radius);
  color: #6c757d;
  font-style: italic;
  flex-shrink: 0;
}

.module-schnuppi-tool .content .steps .step-4 .companies {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 10px;
  height: 80%;
  width: 100%;
}

.module-schnuppi-tool .content .steps .step-4 .companies .company {
  border: 1px solid #333333;
  border-radius: var(--border-radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: calc(var(--spacing-xs) * 0.75);
  transition: transform var(--transition), box-shadow var(--transition);
  min-height: 44px;
  overflow: hidden;
}

.module-schnuppi-tool .content .steps .step-4 .companies .company .name {
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  font-family: 'QuatroSlab', "Roboto Slab", sans-serif;
  line-height: 1.1;
  margin-bottom: var(--spacing-xs);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.module-schnuppi-tool .content .steps .step-4 .companies .company .place {
  line-height: 1.1;
  text-align: center;
  font-size: 18px;
}

.module-schnuppi-tool .content .steps .step-4 .companies .company.next-box {
  background-color: var(--accent-color);
  color: white;
}

.module-schnuppi-tool .content .steps .step-4 .companies .company.next-box .show-more {
  font-size: clamp(14px, 3.5vw, 16px);
  font-weight: bold;
  margin-bottom: var(--spacing-xs);
  text-align: center;
}

.module-schnuppi-tool .content .steps .step-4 .companies .company.next-box .next-arrow {
  background-color: white;
  border-radius: 50%;
  height: clamp(28px, 6vw, 32px);
  width: clamp(28px, 6vw, 32px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.module-schnuppi-tool .content .steps .step-4 .companies .company.next-box .next-arrow img {
  width: 60%;
  height: 60%;
}

@media (min-width: 576px) and (max-width: 991px) {
  .module-schnuppi-tool .content .steps .step-4 .companies {
    gap: 12px;
  }

  .module-schnuppi-tool .content .steps .step-4 .companies .company {
    padding: var(--spacing-sm);
  }

  .module-schnuppi-tool .content .steps .step-4 .companies .company .show-more {
    font-size: clamp(16px, 4vw, 20px);
  }

  .module-schnuppi-tool .content .steps .step-4 .companies .company .next-arrow {
    height: clamp(32px, 8vw, 40px);
    width: clamp(32px, 8vw, 40px);
  }
}

@media (min-width: 992px) {
  .module-schnuppi-tool .content .steps .step-4 .companies {
    gap: 15px;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    height: unset;
  }

  .module-schnuppi-tool .content .steps .step-4 .companies .company {
    aspect-ratio: 1.3333333333;
    padding: var(--spacing-sm);
  }

  .module-schnuppi-tool .content .steps .step-4 .companies .company .show-more {
    font-size: clamp(16px, 4vw, 20px);
  }

  .module-schnuppi-tool .content .steps .step-4 .companies .company .next-arrow {
    height: clamp(32px, 8vw, 40px);
    width: clamp(32px, 8vw, 40px);
  }
}

.module-schnuppi-tool .content .steps .step-4 .pagination {
  height: 20%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.module-schnuppi-tool .content .steps .step-4 .pagination .item {
  width: 30px;
  height: 30px;
  border: 1px solid #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.module-schnuppi-tool .content .steps .step-4 .pagination .item.active {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
}

@media (min-width: 992px) {
  .module-schnuppi-tool .content .steps .step-4 .pagination {
    margin-top: 30px;
  }

  .module-schnuppi-tool .content .steps .step-4 .pagination .item {
    width: 35px;
    height: 35px;
  }
}

.module-schnuppi-tool .content .steps .step-5 {
  overflow: auto;
}

.module-schnuppi-tool .content .steps .step-5 form {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing-sm) * 0.75);
  height: 100%;
}

.module-schnuppi-tool .content .steps .step-5 form input:focus {
  box-shadow: rgba(198, 240, 2, 0.25) 0px 0px 0px 0.25rem;
}

.module-schnuppi-tool .content .steps .step-5 form .form-group {
  margin-bottom: calc(var(--spacing-sm) * 0.75);
}

.module-schnuppi-tool .content .steps .step-5 form input,
.module-schnuppi-tool .content .steps .step-5 form label {
  font-family: Effra, sans-serif !important;
}

.module-schnuppi-tool .content .steps .step-5 form input[type='text'],
.module-schnuppi-tool .content .steps .step-5 form input[type='email'],
.module-schnuppi-tool .content .steps .step-5 form input[type='tel'] {
  border-radius: var(--spacing-sm);
  border: 2px solid #333333;
  padding: var(--spacing-sm);
  font-size: 16px;
  min-height: 44px;
  min-width: 90px;
  transition: border-color var(--transition);
}

.module-schnuppi-tool .content .steps .step-5 form input[type='text'].is-invalid,
.module-schnuppi-tool .content .steps .step-5 form input[type='email'].is-invalid,
.module-schnuppi-tool .content .steps .step-5 form input[type='tel'].is-invalid {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.module-schnuppi-tool .content .steps .step-5 form input[type='checkbox'] {
  border-radius: 4px;
  width: 20px;
  height: 20px;
  border: 2px solid #333333;
}

.module-schnuppi-tool .content .steps .step-5 form input[type='checkbox'].is-invalid {
  box-shadow: rgba(220, 53, 69, 0.25) 0px 0px 0px 0.2rem;
}

.module-schnuppi-tool .content .steps .step-5 form input[type='radio'] {
  border: 2px solid #333333;
}

.module-schnuppi-tool .content .steps .step-5 form .form-check-input:checked {
  background-color: #333333;
}

.module-schnuppi-tool .content .steps .step-5 form .age-verification {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: flex-start;
  column-gap: clamp(1rem, 3rem, 3rem) !important;
  row-gap: 0.5rem;
  margin-bottom: 10px;
  margin-bottom: 5px;
}

.module-schnuppi-tool .content .steps .step-5 form .parent-mobile {
  transition: all var(--transition) ease-in-out;
  transform-origin: top;
  display: none;
  margin-bottom: 0 !important;
}

.module-schnuppi-tool .content .steps .step-5 form .parent-mobile>div {
  display: flex;
  flex-wrap: wrap;
  column-gap: 20px;
  justify-content: space-between;
  align-items: center;
}

.module-schnuppi-tool .content .steps .step-5 form .parent-mobile>div label {
  flex-shrink: 0;
}

.module-schnuppi-tool .content .steps .step-5 form .parent-mobile>div input {
  flex: 1;
  height: 44px;
}

.module-schnuppi-tool .content .steps .step-5 form .opt-in a {
  color: #333333;
  text-decoration-color: #c6f002;
}

.module-schnuppi-tool .content .steps .step-5 form .btn-submit {
  margin-top: auto;
  min-height: 44px;
  font-size: 16px;
  border-radius: 50px;
  margin-bottom: 1rem;
}

@media (min-width: 576px) {
  .module-schnuppi-tool .content .steps .step-5 form {
    gap: var(--spacing-sm);
  }

  .module-schnuppi-tool .content .steps .step-5 form .form-group {
    margin-bottom: var(--spacing-sm);
  }

  .module-schnuppi-tool .content .steps .step-5 form .form-group.form-check {
    margin-bottom: var(--spacing-lg);
  }

  .module-schnuppi-tool .content .steps .step-5 form .age-verification {
    flex-direction: row;
    align-items: center;
    margin-bottom: 10px;
  }

  .module-schnuppi-tool .content .steps .step-5 form .parent-mobile {
    transition: none;
    opacity: 1;
    max-height: none;
  }
}

.module-schnuppi-tool .content .steps .step-6.celebration-content {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
  height: 100%;
  position: relative;
}

.module-schnuppi-tool .content .steps .step-6.celebration-content .celebration-video {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 70%;
  margin-bottom: 20px;
  position: relative;
}

.module-schnuppi-tool .content .steps .step-6.celebration-content .celebration-video img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  max-height: 100%;
  position: absolute;
  inset: 0;
  display: block;
  margin: auto;
}

.module-schnuppi-tool .content .steps .step-6.celebration-content .celebration-video img.celebration {
  z-index: 1;
}

.module-schnuppi-tool .content .steps .step-6.celebration-content .celebration-video img.confetti {
  z-index: 2;
  pointer-events: none;
  object-fit: cover;
}

.module-schnuppi-tool .content .steps .step-6.celebration-content .celebration-message h2 {
  font-family: 'QuatroSlab', "Roboto Slab", sans-serif;
  font-weight: 700;
  font-size: clamp(20px, 5vw, 32px);
  margin-bottom: var(--spacing-sm);
}

.module-schnuppi-tool .content .steps .step-6.celebration-content .celebration-message p {
  font-size: clamp(14px, 4vw, 18px);
  margin-bottom: 0;
}

.module-schnuppi-tool .content .steps .step-6.celebration-content .bottom {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.module-schnuppi-tool .content .steps .step-6.celebration-content .bottom .celebration-actions button {
  min-height: 44px;
  font-size: 16px;
  padding: var(--spacing-sm) var(--spacing-lg);
  color: #333333;
  width: 100%;
}

.module-schnuppi-tool .content .steps .step-6.celebration-content .bottom .slanted-text {
  font-size: 30px;
  font-family: 'QuatroSlab', "Roboto Slab", sans-serif;
  font-weight: 700;
  transform: rotate(348deg);
  margin-top: 30px;
}

.module-schnuppi-tool .content .steps .step-6.celebration-content .confetti-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 10;
  overflow: hidden;
}

@media (min-width: 992px) {
  .module-schnuppi-tool .content .steps .step-6.celebration-content .celebration-video {
    height: 70%;
  }

  .module-schnuppi-tool .content .steps .step-6.celebration-content .celebration-video img {
    width: auto;
    height: 100%;
    max-width: 100%;
  }

  .module-schnuppi-tool .content .steps .step-6.celebration-content .bottom .celebration-actions button {
    width: auto;
    font-size: 30px;
    padding: 18px 60px;
    line-height: 1;
  }
}

.module-schnuppi-tool .footer-content {
  height: var(--footer-height);
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.module-schnuppi-tool .footer-content .step-back {
  display: none;
  color: #333333;
  text-decoration: none;
  align-items: center;
  gap: var(--spacing-xs);
  min-height: 44px;
  padding: var(--spacing-xs);
  border-radius: var(--spacing-sm);
  transition: background-color var(--transition);
}

.module-schnuppi-tool .footer-content .step-back>div {
  display: flex;
  align-items: center;
}

.module-schnuppi-tool .footer-content .step-back>div img {
  height: 20px;
  width: 20px;
  margin-right: 10px;
}

.module-schnuppi-tool .footer-content .step-back>div .text {
  font-size: clamp(13px, 2.5vw, 15px);
}

@keyframes fall {
  0% {
    transform: translateY(-100vh) rotate(0deg);
    opacity: 1;
  }

  100% {
    transform: translateY(100vh) rotate(360deg);
    opacity: 0;
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
*/