html, body {
    margin: 0;
    padding: 0;
	font-family: 'Open Sans';
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

main {
	min-height: 75vh;
}

footer {
	margin-top: auto;
}

h1 {
	font-size: 90px;
}

h2 {
	font-size: 35px;
}

h3 {
	font-size: 23px;
}

@font-face {
  font-family: 'Open Sans';
  src: url('../assets/fonts/OpenSans/OpenSans-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'Open Sans';
  src: url('../assets/fonts/OpenSans/OpenSans-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Open Sans';
  src: url('../assets/fonts/OpenSans/OpenSans-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}


.configurator-heading p {
	max-width: 50%;
}

.hero-img {
	opacity:60%;
	z-index: 2;
	height: 100%; 
	background-image: url(../../../assets/img/home/hero.webp); 
	background-position: 60% 15%;
	background-size: cover;
}

a.disabled {
    pointer-events: none;
    color: #ccc;
}
.custom-placeholder::placeholder {
	color: rgba(20, 20, 20, 0.2)!important;
}

#sig canvas {
    width: 100%!important;
    height: auto;
}

#signature64 {
    display: none;
}

#sig {
    width: 100%;
    max-height: 150px;
}

.p-header-m-header {
    margin-top: 300px!important;
    margin-bottom: 40px!important;
}

.cstm-fs-18 {
    font-size: 18px;
}

.cstm-fs-16 {
    font-size: 16px;
}

.radio-20 {
    width:20px!important;
    height:20px!important;
}

.shadow-black {
	text-shadow: #000 1px 0 2px;
}

.shadow-white {
	text-shadow: #FFF 1px 0 2px;
}

a {
	line-height: 1.3;
}

#hero {
	height: 800px; 
	background-color: black;
}

.nav-item {
	margin: 0 15px;
}

.product-data {
	max-height: 80px; 
	min-height: 60px; 
	height: 70px;
}

.products {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 20px;
}

.products-width {
	width:200px;
}

.bd-filter {
	backdrop-filter: blur(10px);
}

.pd-hover:hover {
	background-color: var(--primary);
	transition: background-color 0.3s ease-in-out;
	cursor: pointer;
}

.am-hover:hover {
	background-color: var(--grey);
	transition: background-color 0.3s ease-in-out;
	cursor: pointer;
}

.product {
	transition: transform 0.2s ease-in-out;
}

.product:hover {
	transform: translateY(-20px);
	transition: transform 0.2s ease-in-out;
}

.main-bs {
	box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}

.text-bs {
	box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
}

.btn-bs {
	box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

.tables-bs {
	box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
}

.navbar-brand {
	order: 0
}

.navbar-toggler {
	order: 1;
}

.list-unstyled {
	order: 2;
}

.number:hover {
	background-color: lightgrey;
	border-radius: 400px;
	transition: background-color 0.3s ease-in-out;
}

.faq-box {
	border-radius: 8px;
	border: none;
	border-bottom-width: 0;
	
}

.products-width {
    width: 100px;
    height: auto;
}

.product-card {
    padding: 16px;
}

.products-data {
	max-height: 90px; 
	min-height: 70px; 
	height: 70px;
}



.fade-out-right {
  animation: fadeOutRight 0.4s forwards;
}

.fade-out-left {
  animation: fadeOutLeft 0.4s forwards;
}

@keyframes fadeOutRight {
  0% { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(50px); }
}

@keyframes fadeOutLeft {
  0% { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(-50px); }
}




.accordion-button:not(.collapsed) {
	background-color: #FFF;
}

/*.carousel-inner {
    display: flex;
    justify-content: center;
}*/

.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 40%;
}

.carousel-control-next-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='var(--grey)'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.carousel-control-prev-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='var(--grey)'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}

.nav-link {
  position: relative;
  display: inline-block;
  padding-bottom: 4px;
  text-decoration: none;
  color: inherit;
}

.nav-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 3px;
  background-color: var(--primary); /* oder z. B. #333 */
  transition: all 0.5s ease;
  transform: translateX(-50%);
}

.nav-link:hover::after {
  width: 80%;
}

.custom-range::-webkit-slider-thumb {
  background-color: #0d6efd; /* Bootstrap primary color */
  border: none;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  cursor: pointer;
}

.custom-range::-webkit-slider-runnable-track {
  background: #dee2e6;
  height: 0.4rem;
  border-radius: 0.5rem;
}

.custom-range::-moz-range-thumb {
  background-color: #0d6efd;
  border: none;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  cursor: pointer;
}

.custom-range::-moz-range-track {
  background: #dee2e6;
  height: 0.4rem;
  border-radius: 0.5rem;
}

.config-table {
	max-height: 46vh;
}

.table-header .table-header-inner {
	min-height: 12vh;
}

#productsTable, #selectionTable {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.table-header {
  z-index: 10;
}

#products-list, #choosen-products-list {
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 60vh; /* oder so viel, wie du willst */
}


.tooltip-inner {
	background-color: var(--secondary); /* Dein Wunsch-Farbcode */
	color: #fff;
	font-size: 14px;
}

.bs-tooltip-top .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before {
	border-top-color: #18656d !important;
}

.form-col {
	width: 49%;
}

.form-col-3 {
	width: 29%;
}

.form-col-9 {
	width: 69%;
}


@media (max-width: 1200px) {
	.nav-item {
		margin: 0 4px;
	}
	
	.products {
		grid-template-columns: 1fr 1fr 1fr;
	}
}

@media (max-width: 992px) {
	.list-unstyled {
		order: 1;
	}
	
	.navbar-toggler {
		order: 2;
	}
	
	#navbarNavDropdown {
		order: 3;
	}
	
	.p-header-m-header {
		margin-top: 200px!important;
	}
	.products-width {
		width: 180px;
	}
	.products {
		grid-template-columns: 1fr 1fr;
	}
	.configurator-heading p {
		max-width: 100%;
	}
} 

.invalid-input {
  border: 2px solid var(--red);
  background-color: #ffe6e6;
}

input.was-touched:invalid,
select.was-touched:invalid,
textarea.was-touched:invalid {
  border: 2px solid var(--red);
  background-color: #ffe6e6;
}

input.was-touched:valid,
select.was-touched:valid,
textarea.was-touched:valid {
  border: 2px solid var(--primary);
}

input[type="radio"].was-touched:invalid,
input[type="checkbox"].was-touched:invalid {
  outline: 2px solid var(--primary);
  outline-offset: 4px;
}


@media (max-width: 768px) {
	.form-col, .form-col-3, .form-col-9 {
		width: 100%;
	}
	
	.list-unstyled {
		width: 100%;
		order: 3;
	}
	
	
	.list-unstyled .nav-item {
		width: 100%;
	}
	
	.navbar-toggler {
		order: 1;
	}
	#navbarNavDropdown {
		order: 2;
		padding-bottom: 2px;
	}
	.p-header-m-header {
		margin-top: 100px!important;
	}
	
	h1 {
		font-size: 70px;
	}
	
	#hero {
		height: 500px;
	}
	
	.products-data {
		max-height: 100px; 
		min-height: 90px; 
	}
	
	.config-table {
		max-height: 60vh;
	}
	
	.product:hover {
		transform: none;
	}
	
	.pd-hover:hover {
		background-color: none;
		transition: none;
	}
	
} 

@media (max-width: 575px) {
	.p-header-m-header {
		margin-top: 100px!important;
	}
	
	#hero {
		height: 600px;
	}
	
	h1 {
		font-size: 58px;
	}
	
	h2 {
  		font-size: 28px;
	}
	
	
	
} 

.fs-7 {
	font-size: 12px;
}