.get-inspired-layout {
	
	main {
		padding: 0;

		.elementor-element.elementor-widget.elementor-widget-text-editor {
			ul {
				padding-left: 0;
				li  {
					list-style: none;
					position: relative;
					padding: 0.625rem 0 0 3.75rem;
					min-height: 2.75rem;
					margin: 0 0 0.75rem 0;
					color: inherit;
					&::before {
						content: '\f00c';
						font-family: "Font Awesome 6 Pro";
						font-weight: 600;
						font-size: 0.875rem;
						display: flex;
						justify-content: center;
						align-items: center;
						width: 1.5rem;
						height: 1.5rem;
						position: absolute;
						top: 0.5625rem;
						left: 0.5625rem;
						border-radius: 100%;
						color: var(--white);
						background: var(--black);
						line-height: 1;
					}
					&::after {
						content: '';
						width: 2.75rem;
						height: 2.75rem;
						position: absolute;
						top: 0;
						left: 0;
						border: 0.0625rem solid var(--black);
						border-radius: 100%;
					}
				}
			}
			&.white {
				ul {
					li {
						&::before {
							color: var(--black);
							background: var(--white);
						}
						&::after {
							border-color: var(--white);
						}
					}
				}
			}
		}
		
		.elementor-element.elementor-element-edit-mode.elementor-element--toggle-edit-tools.elementor-widget {
			ul.elementor-editor-element-settings.elementor-editor-widget-settings  {
				li.elementor-editor-element-setting.elementor-editor-element-edit {
					
					align-items: center;
					color: var(--e-p-border-widget-invert);
					cursor: pointer;
					display: flex;
					font-size: 11px;
					justify-content: center;
					margin: 0;
					padding: 0;
					transition: var(--e-a-transition-hover);
					width: 25px;
					height: 25px;
					min-height: 25px;
					line-height: 1;
					
					&::after {
						content: none !important;
						display: none;
					}
					&::before {
						content: none !important;
						display: none;
					}
				}
			}
		}
		
	}
	
	.section-background {
		
		.bottle {
			filter: drop-shadow(0 0 3.125rem rgba(0,0,0,0.05));
		}
		
		&.lightsoff {
			.bottle {
				filter: drop-shadow(0 0 3.125rem rgba(6,10,32,0.3));
			}
		}
		
		.bottle {
			filter: drop-shadow(0 0 3.125rem rgba(6,10,32,0.3));
		}
	}
	
	.section-intro {
		
		.intro-headline span {
			font-size: 8.1875rem;
		}
		@media (max-width: 767px) {
			.intro-headline span {
				font-size: 6.1875rem;
			}
		}
		
	}
	
	.section-benefits {
		
		
		@media (max-width: 767px) {
			background: var(--white);
			&.lightsoff {
				background: var(--black);
			}
		}
		
		@media (max-width: 767px) {
			
			.elementor-element.elementor-widget-ucaddon_button {
				width: 100%;
				.pjur-button-container {
					width: 100%;
					text-align: center;
				}
			}
		}
		
	}
	
	.section-single-product {
		
		.bottle {
			filter: drop-shadow(0 0 3.125rem rgba(0,0,0,0.05));
		}
		
		&.lightsoff {
			.bottle {
				filter: drop-shadow(0 0 3.125rem rgba(6,10,32,0.3));
			}
		}
		
		.bottle {
			filter: drop-shadow(0 0 3.125rem rgba(6,10,32,0.3));
		}
		
		.pjur-button-container.align-center {
			.pjur-btn {
				display: block;
			}
		}
		
		@media (max-width: 1024px) {
			
			.pjur-button-container.align-center {
				.pjur-btn {
					display: inline-block;
				}
			}
		}
	}
	
	.section-tiles {
		
		.tile--square {
			background: var(--white):
		}
		
		.tile--square.layout1,
		.tile--square.layout2 {
			.bottle {
				filter: drop-shadow(0 3.125rem 3.125rem rgba(0,0,0,0.03));
			}
		}
		
		&.lightsoff {
			
			.tile--square {
				background: var(--black):
			}
			
			.tile--square.layout1,
			.tile--square.layout2 {
				.bottle {
					filter: drop-shadow(0 3.125rem 3.125rem rgba(6,10,32,0.3));
				}
			}
		}
	}
	
	.section-teaser {
		.product-image {
			filter: drop-shadow(0 0 1.5625rem rgba(6,10,32,0.1));
		}
	}
	
	footer {
		position: relative;
		z-index: 1;
		background: #fff;
	}
	
	.blur {
		filter: blur(3.125rem);
	}
	
	.hard-light {
		mix-blend-mode: hard-light;
	}
	.multiply {
		mix-blend-mode: multiply;
	}

}

/** Wert in px/1400px (Bildschirmbreite) * 100 **/

.tile--square {
	aspect-ratio: 1 / 1;
	position: relative;

	.tile__content {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		padding: 60px;
		padding: clamp(20px, 4.166666666666667vw, 60px);
	}
	
	&.topseller, &.new, &.neu {
		.tile__content {
			padding-top: 100px;
			padding-top: clamp(40px, 6.944444444444444vw, 100px);
		}
		
		&::before {
			position: absolute;
			width: auto;
			height: auto;
			top: clamp(10px, 1.388888888888889vw, 20px);
			font-weight: 600;
			line-height: 1;
			text-transform: uppercase;
			left: 0;
			z-index: 2;
			font-size: clamp(10px, 0.8333333333333333vw, 12px);
			padding-top: clamp(6px, 0.5555555555555556vw, 8px);
			padding-bottom: clamp(6px, 0.5555555555555556vw, 8px);
			padding-right: clamp(10px, 0.8333333333333333vw, 12px);
			padding-left: clamp(10px, 0.8333333333333333vw, 12px);
		}
	}
	
	&.topseller {
		&::before {
			content: 'Topseller';
			background: linear-gradient(45deg, #B2D5FE 0%, #D0C0F5 100%);
		}
	}
	
	&.new {
		&::before {
			content: 'New Product';
			background: linear-gradient(45deg, #FFEE57 0%, #F8B9A7 100%);
		}
	}
	
	&.neu {
		&::before {
			content: 'Neues Produkt';
			background: linear-gradient(45deg, #FFEE57 0%, #F8B9A7 100%);
		}
	}

	&.layout1 {
		.slogan {
			.agrandir-font {
				font-size: 81px;
				font-size: clamp(51px, 5.625vw, 81px);
				line-height: 1;
			}
			.spitzkant-font {
				font-size: 131px;
				font-size: clamp(101px, 9.097222222222222vw, 131px);
				line-height: 1;
			}
		}
		
		.text {
			h3 {
				font-size: clamp(24px, 2.222222222222222vw, 32px);
				margin-bottom: clamp(10px, 1.388888888888889vw, 20px);
			}
			.description {
				padding-right: 30%;
				font-size: clamp(12px, 1.111111111111111vw, 16px);
			}
		}
		
		.bottle {
			width: 100%;
			height: 533px;
			height: clamp(333px, 37.01388888888889vw, 533px);
			bottom: clamp(-150px, -13.88888888888889vw, -200px) !important;
		}
	}
	
	&.layout2 {
		.slogan {
			margin-bottom: 40px;
			margin-bottom: clam(20px, 2.777777777777778vw, 40px);
			.spitzkant-font {
				font-size: 84px;
				font-size: clamp(54px, 5.833333333333333vw, 84px);
				line-height: 1;
				margin-bottom: 24px;
				margin-bottom: clamp(15px, 1.666666666666667vw, 24px);
			}
			.agrandir-font {
				font-size: 81px;
				font-size: clamp(51px, 5.625vw, 81px);
				line-height: 1;
			}
		}
		
		.text {
			h3 {
				font-size: clamp(24px, 2.222222222222222vw, 32px);
				margin-bottom: clamp(10px, 1.388888888888889vw, 20px);
			}
			.description {
				font-size: clamp(12px, 1.111111111111111vw, 16px);
				margin-bottom: clamp(10px, 1.388888888888889vw, 20px);
				padding-right: 40%;
			}
		}
		
		.bottle {
			width: 139px;
			width: clamp(87px, 9.652777777777778vw, 139px);
			height: 533px;
			height: clamp(333px, 37.01388888888889vw, 533px);
			top: 10.5% !important;
			right: clamp(60px, 8.333333333333333vw, 120px) !important;
		}
	}
	
	&.layout3 {
		
		&.new, &.neu {
			.tile__content {
				padding-top: 60px;
				padding-top: clamp(40px, 4.166666666666667vw, 60px);
			}
		}
		
		.slogan {
			margin-bottom: 50px;
			margin-bottom: clamp(30px, 3.472222222222222vw, 50px);
			.spitzkant-font {
				font-size: 131px;
				font-size: clamp(101px, 9.097222222222222vw, 131px);
				line-height: 90px;
				line-height: clamp(60px, 6.25vw, 90px);
			}
			.agrandir-font {
				font-size: 128px;
				font-size: clamp(98px, 8.888888888888889vw, 128px);
				line-height: 1;
			}
		}
		
		.text {
			h3 {
				font-size: clamp(24px, 2.222222222222222vw, 32px);
				margin-bottom: clamp(10px, 1.388888888888889vw, 20px);
			}
			.description {
				font-size: clamp(12px, 1.111111111111111vw, 16px);
				margin-bottom: clamp(10px, 1.388888888888889vw, 20px);
				padding-right: 50%;
				margin-bottom: 30px;
				margin-bottom: clamp(20px, 2.083333333333333vw, 30px);
			}
		}
		
		.bottle {
			width: 227px;
			width: clamp(100px, 15.76388888888889vw, 227px);
			height: 556px;
			height: clamp(245px, 38.61111111111111vw, 556px);
			bottom: -0.0625rem !important;
			right: 6.25rem !important;
			right: clamp(20px, 6.944444444444444vw, 100px) !important;
			mask-image: url('/wp-content/themes/pjur-theme/assets/img/flasche-anschnitt.svg');
			mask-position: bottom center;
			mask-size: contain;
			mask-repeat: no-repeat;
			&::before {
				content: '';
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				background: url('/wp-content/themes/pjur-theme/assets/img/pjur-bottle-dot.svg') no-repeat center top/contain;
			}
		}
	}

	
}


@media (max-width: 1024px) {

.tile--square {
	aspect-ratio: auto;
	width: 100%;
	max-width: 660px;
	margin-inline: auto !important;
	margin-bottom: 25px !important;

	.tile__content {
		position: relative;
		height: auto;
		width: auto;
		top: auto;
		left: auto;
		padding: 60px;
		/*padding: clamp(20px, 4.166666666666667vw, 60px);*/
	}
	
	&.topseller, &.new, &.neu {
		
		.tile__content {
			padding-top: 100px;
		}
		
		&::before {
			top: 20px;
			padding: 8px 12px;
		}
	}
	
	.pjur-button-container {
		.pjur-btn  {
			font-size: 16px;
			font-weight: 600 !important;
		}
	}
	
	&.layout1 {
		.slogan {
			margin-bottom: 100px;
			/*margin-bottom: clamp(40px, 6.944444444444444vw, 100px);*/
			.agrandir-font {
				font-size: 81px;
				/*font-size: clamp(41px, 5.625vw, 81px);*/
				line-height: 1;
			}
			.spitzkant-font {
				font-size: 131px;
				/*font-size: clamp(71px, 9.097222222222222vw, 131px);*/
				line-height: 1;
			}
		}
		
		.text {
			h3 {
				font-size: 32px;
				margin-bottom: 20px;
				/*
				font-size: clamp(24px, 2.222222222222222vw, 32px);
				margin-bottom: clamp(10px, 1.388888888888889vw, 20px);
				*/
			}
			.description {
				padding-right: 30%;
				font-size: 16px;
				/*
				font-size: clamp(12px, 1.111111111111111vw, 16px);
				*/
			}
		}
		
		.bottle {
			width: 100%;
			height: 533px;
			bottom: -200px !important;
			/*
			height: clamp(333px, 37.01388888888889vw, 533px);
			bottom: clamp(-150px, -13.88888888888889vw, -200px) !important;
			*/
		}
	}
	
	&.layout2 {
		.slogan {
			margin-bottom: 40px;
			/*margin-bottom: clam(20px, 2.777777777777778vw, 40px);*/
			.spitzkant-font {
				font-size: 84px;
				/*font-size: clamp(54px, 5.833333333333333vw, 84px);*/
				margin-bottom: 24px;
				/*margin-bottom: clamp(15px, 1.666666666666667vw, 24px);*/
			}
			.agrandir-font {
				font-size: 81px;
				/*font-size: clamp(51px, 5.625vw, 81px);*/
			}
		}
		
		.text {
			h3 {
				font-size: 32px;
				margin-bottom: 20px;
				/*
				font-size: clamp(24px, 2.222222222222222vw, 32px);
				margin-bottom: clamp(10px, 1.388888888888889vw, 20px);
				*/
			}
			.description {
				font-size: 16px;
				margin-bottom: 20px;
				/*
				font-size: clamp(12px, 1.111111111111111vw, 16px);
				margin-bottom: clamp(10px, 1.388888888888889vw, 20px);
				*/
				padding-right: 40%;
			}
		}
		
		.bottle {
			width: 139px;
			/*width: clamp(87px, 9.652777777777778vw, 139px);*/
			height: 533px;
			/*height: clamp(333px, 37.01388888888889vw, 533px);*/
			top: 35px !important;
			/*right: clamp(60px, 8.333333333333333vw, 120px) !important;*/
			right: 120px !important;
		}
	}
	
	&.layout3 {
		
		&.new, &.neu {
			.tile__content {
				padding-top: 60px;
				/*padding-top: clamp(40px, 4.166666666666667vw, 60px);*/
			}
		}
		
		.slogan {
			margin-bottom: 50px;
			/*margin-bottom: clamp(20px, 3.472222222222222vw, 50px);*/
			.spitzkant-font {
				font-size: 131px;
				/*font-size: clamp(101px, 9.097222222222222vw, 131px);*/
				line-height: 90px;
				/*line-height: clamp(60px, 6.25vw, 90px);*/
			}
			.agrandir-font {
				font-size: 128px;
				/*font-size: clamp(98px, 8.888888888888889vw, 128px);*/
				line-height: 1;
			}
		}
		
		.text {
			h3 {
				font-size: 32px;
				margin-bottom: 20px;
				/*
				font-size: clamp(24px, 2.222222222222222vw, 32px);
				margin-bottom: clamp(10px, 1.388888888888889vw, 20px);
				*/
			}
			.description {
				font-size: 16px;
				margin-bottom: 30px;
				padding-right: 50%;
				/*font-size: clamp(12px, 1.111111111111111vw, 16px);
				margin-bottom: 30px;
				margin-bottom: clamp(20px, 2.083333333333333vw, 30px);*/
			}
		}
		
		.bottle {
			width: 227px;
			/*width: clamp(100px, 15.76388888888889vw, 227px);*/
			height: 556px;
			/*height: clamp(245px, 38.61111111111111vw, 556px);*/
			bottom: -0.0625rem !important;
			right: 6.25rem !important;
			/*right: clamp(20px, 6.944444444444444vw, 100px) !important;*/
		}
	}

	
}
	
}

@media (max-width: 767px) {

.tile--square {
	max-width: 500px;

	.tile__content {
		padding: 60px;
		padding: clamp(20px, 4.166666666666667vw, 60px);
	}
	
	&.topseller, &.new, &.neu {
		.tile__content {
			padding-top: 40px;
		}
		&::before {
			top: clamp(10px, 1.388888888888889vw, 20px);
			font-size: clamp(10px, 0.8333333333333333vw, 12px);
			padding-top: clamp(6px, 0.5555555555555556vw, 8px);
			padding-bottom: clamp(6px, 0.5555555555555556vw, 8px);
			padding-right: clamp(10px, 0.8333333333333333vw, 12px);
			padding-left: clamp(10px, 0.8333333333333333vw, 12px);
		}
	}
	
	.pjur-button-container {
		.pjur-btn  {
			font-size: 14px;
			font-weight: 500 !important;
			padding: 10px 18px;
			&:hover,  &:focus-visible {
				padding-left: 14px;
				padding-right: 22px;
				&::after {
					right: 12px;
				}
			}
		}
	}
	
	&.layout1 {
		.slogan {
			margin-bottom: 100px;
			margin-bottom: clamp(40px, 6.944444444444444vw, 100px);
			.agrandir-font {
				font-size: 81px;
				font-size: clamp(41px, 5.625vw, 81px);
				line-height: 1;
			}
			.spitzkant-font {
				font-size: 131px;
				font-size: clamp(71px, 9.097222222222222vw, 131px);
				line-height: 1;
			}
		}
		
		.text {
			h3 {
				font-size: clamp(24px, 2.222222222222222vw, 32px);
				margin-bottom: clamp(10px, 1.388888888888889vw, 20px);
			}
			.description {
				padding-right: 30%;
				font-size: clamp(12px, 1.111111111111111vw, 16px);
			}
		}
		
		.bottle {
			width: 100%;
			height: 533px;
			height: clamp(333px, 37.01388888888889vw, 533px);
			bottom: clamp(-150px, -13.88888888888889vw, -200px) !important;
		}
	}
	
	&.layout2 {
		
		.tile__content {
			min-height: 400px;
		}
		
		
		.slogan {
			margin-bottom: 40px;
			margin-bottom: clamp(20px, 2.777777777777778vw, 40px);
			.spitzkant-font {
				font-size: 84px;
				font-size: clamp(54px, 5.833333333333333vw, 84px);
				margin-bottom: 24px;
				margin-bottom: clamp(15px, 1.666666666666667vw, 24px);
			}
			.agrandir-font {
				font-size: 81px;
				font-size: clamp(51px, 5.625vw, 81px);
			}
		}
		
		.text {
			h3 {
				font-size: clamp(24px, 2.222222222222222vw, 32px);
				margin-bottom: clamp(10px, 1.388888888888889vw, 20px);
			}
			.description {
				font-size: clamp(12px, 1.111111111111111vw, 16px);
				margin-bottom: clamp(10px, 1.388888888888889vw, 20px);
				padding-right: 40%;
			}
		}
		
		.bottle {
			width: 139px;
			width: clamp(87px, 9.652777777777778vw, 139px);
			height: 533px;
			height: clamp(333px, 37.01388888888889vw, 533px);
			top: 10.5% !important;
			right: clamp(10px, 8.333333333333333vw, 120px) !important;
		}
	}
	
	&.layout3 {

		&.new, &.neu {
			.tile__content {
				padding-top: 60px;
				padding-top: clamp(40px, 4.166666666666667vw, 60px);
			}
		}
		
		.slogan {
			margin-bottom: 50px;
			margin-bottom: clamp(30px, 3.472222222222222vw, 50px);
			.spitzkant-font {
				font-size: 131px;
				font-size: clamp(71px, 9.097222222222222vw, 131px);
				line-height: 90px;
				line-height: clamp(50px, 6.25vw, 90px);
			}
			.agrandir-font {
				font-size: 128px;
				font-size: clamp(71px, 8.888888888888889vw, 128px);
				line-height: 1;
			}
		}
		
		.text {
			h3 {
				font-size: clamp(24px, 2.222222222222222vw, 32px);
				margin-bottom: clamp(10px, 1.388888888888889vw, 20px);
			}
			.description {
				font-size: clamp(12px, 1.111111111111111vw, 16px);
				margin-bottom: clamp(10px, 1.388888888888889vw, 20px);
				padding-right: 50%;
				margin-bottom: 30px;
				margin-bottom: clamp(20px, 2.083333333333333vw, 30px);
			}
		}
		
		.bottle {
			width: 227px;
			height: 556px;
			
			/*
			width: clamp(100px, 15.76388888888889vw, 227px);
			height: clamp(245px, 38.61111111111111vw, 556px);
			*/
			
			width: clamp(126px, 15.76388888888889vw, 227px);
			height: clamp(310px, 38.61111111111111vw, 556px);
			
			bottom: -0.0625rem !important;
			right: 6.25rem !important;
			right: clamp(20px, 6.944444444444444vw, 100px) !important;
			mask-image: url('/wp-content/themes/pjur-theme/assets/img/flasche-anschnitt.svg');
			mask-position: bottom center;
			mask-size: contain;
			&::before {
				content: '';
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				background: url('/wp-content/themes/pjur-theme/assets/img/pjur-bottle-dot.svg') no-repeat center top/contain;
			}
		}
	}

	
}
	
}





/*** Buttons ***/

.elementor-element.elementor-widget-button {
	z-index: 2;
	a.elementor-button {
		min-height: auto;
		&::after {
			margin-top: -8.5px;
		}
	}
}

@media (max-width: 1280px) {
	
	.tile--square {
		.elementor-widget-button {
			a.elementor-button {
				font-size: 14px;
				padding: 10px 16px;
				&:hover {
					padding-left: 12px;
					padding-right: 20px;
					&::after {
						right: 10px;
					}
				}
			}
		}
	}

}
@media (max-width: 1024px) {
	
	.tile--square {
		.elementor-widget-button {
			a.elementor-button {
				font-size: 1rem;
				padding: 0.75rem 1.5rem 0.75rem 1.5rem;
				&:hover {
					padding-left: 1.25rem;
					padding-right: 1.75rem;
					&::after {
						right: 0.875rem;
					}
				}
			}
		}
	}

}
@media (max-width: 767px) {
	
	.tile--square {
		.elementor-widget-button {
			a.elementor-button {
				font-size: 14px;
				padding: 10px 16px;
				&:hover {
					padding-left: 12px;
					padding-right: 20px;
					&::after {
						right: 10px;
					}
				}
			}
		}
	}

}