/**
 * Custom Shape Dividers CSS
 * 
 * Uses custom classes instead of Elementor's built-in system.
 * 
 * Class naming convention:
 * - Desktop: nnl-sd-[top|bot]-[1-4][A-D]
 * - Mobile: nnl-sdm-[top|bot]-[1-4][a-d]
 * - Mobile solid rectangle: nnl-sdm-top-rect, nnl-sdm-bot-rect
 *
 * Examples:
 * - nnl-sd-top-3A = desktop top, shape 3, variant A
 * - nnl-sdm-top-1c = mobile top, shape 1, variant c
 * - nnl-sdm-top-rect = mobile top, solid rectangle
 * - nnl-sd-bot-1B = desktop bottom, shape 1, variant B
 * - nnl-sdm-bot-4a = mobile bottom, shape 4, variant a
 * - nnl-sdm-bot-rect = mobile bottom, solid rectangle
 */

/* ========================================
   BASE STYLES
   ======================================== */



/* ========================================
   DESKTOP BASE STYLES
   ======================================== */

/* Desktop dividers - repeat horizontally */
.nnl-sd-top-1A::before,
.nnl-sd-top-1a::before,
.nnl-sd-top-1B::before,
.nnl-sd-top-1b::before,
.nnl-sd-top-2A::before,
.nnl-sd-top-2a::before,
.nnl-sd-top-2B::before,
.nnl-sd-top-2b::before,
.nnl-sd-top-3A::before,
.nnl-sd-top-3a::before,
.nnl-sd-top-3B::before,
.nnl-sd-top-3b::before,
.nnl-sd-top-4A::before,
.nnl-sd-top-4a::before,
.nnl-sd-top-4B::before,
.nnl-sd-top-4b::before,
.nnl-sd-bot-1A::after,
.nnl-sd-bot-1a::after,
.nnl-sd-bot-1B::after,
.nnl-sd-bot-1b::after,
.nnl-sd-bot-2A::after,
.nnl-sd-bot-2a::after,
.nnl-sd-bot-2B::after,
.nnl-sd-bot-2b::after,
.nnl-sd-bot-3A::after,
.nnl-sd-bot-3a::after,
.nnl-sd-bot-3B::after,
.nnl-sd-bot-3b::after,
.nnl-sd-bot-4A::after,
.nnl-sd-bot-4a::after,
.nnl-sd-bot-4B::after,
.nnl-sd-bot-4b::after {
	content: '';
	position: absolute;
	left: 0;
	width: 100%;
	height: 100px;
	background: var(--white);
	z-index: 1;
	will-change: mask-image;
	backface-visibility: hidden;
	mask-mode: alpha;
	-webkit-mask-mode: alpha;
	mask-position: center 0;
	mask-repeat: repeat-x;
	-webkit-mask-position: center 0;
	-webkit-mask-repeat: repeat-x;
}

.nnl-sd-top-1A::before,
.nnl-sd-top-1a::before,
.nnl-sd-top-1B::before,
.nnl-sd-top-1b::before,
.nnl-sd-top-2A::before,
.nnl-sd-top-2a::before,
.nnl-sd-top-2B::before,
.nnl-sd-top-2b::before,
.nnl-sd-top-3A::before,
.nnl-sd-top-3a::before,
.nnl-sd-top-3B::before,
.nnl-sd-top-3b::before,
.nnl-sd-top-4A::before,
.nnl-sd-top-4a::before,
.nnl-sd-top-4B::before,
.nnl-sd-top-4b::before{
	top: 0;
	transform: translateY(-97%);
}

.nnl-sd-bot-1A::after,
.nnl-sd-bot-1a::after,
.nnl-sd-bot-1B::after,
.nnl-sd-bot-1b::after,
.nnl-sd-bot-2A::after,
.nnl-sd-bot-2a::after,
.nnl-sd-bot-2B::after,
.nnl-sd-bot-2b::after,
.nnl-sd-bot-3A::after,
.nnl-sd-bot-3a::after,
.nnl-sd-bot-3B::after,
.nnl-sd-bot-3b::after,
.nnl-sd-bot-4A::after,
.nnl-sd-bot-4a::after,
.nnl-sd-bot-4B::after,
.nnl-sd-bot-4b::after{
	bottom: 0;
	transform: translateY(97%);
}

.nnl-sd-top-site-color::before,
.nnl-sd-bot-site-color::after {
	background: var(--site-color);
}

/* ========================================
   DESKTOP TOP DIVIDERS - IMAGES ONLY
   ======================================== */

.nnl-sd-top-1A::before,
.nnl-sd-top-1a::before,
.nnl-sd-bot-1a::after,
.nnl-sd-bot-1A::after {
	mask-image: url('https://development2.jut-so.de/nnl/wp-content/themes/nnl-child-theme/assets/shape-dividers/shape_01A.svg');
	-webkit-mask-image: url('https://development2.jut-so.de/nnl/wp-content/themes/nnl-child-theme/assets/shape-dividers/shape_01A.svg');
	aspect-ratio: 1440 / 100;
}

.nnl-sd-top-1B::before,
.nnl-sd-top-1b::before,
.nnl-sd-bot-1B::after,
.nnl-sd-bot-1b::after {
	mask-image: url('https://development2.jut-so.de/nnl/wp-content/themes/nnl-child-theme/assets/shape-dividers/shape_01B.svg');
	-webkit-mask-image: url('https://development2.jut-so.de/nnl/wp-content/themes/nnl-child-theme/assets/shape-dividers/shape_01B.svg');
	aspect-ratio: 1440 / 100;
}

.nnl-sd-top-2A::before,
.nnl-sd-top-2a::before,
.nnl-sd-bot-2A::after,
.nnl-sd-bot-2a::after {
	mask-image: url('https://development2.jut-so.de/nnl/wp-content/themes/nnl-child-theme/assets/shape-dividers/shape_02A.svg');
	-webkit-mask-image: url('https://development2.jut-so.de/nnl/wp-content/themes/nnl-child-theme/assets/shape-dividers/shape_02A.svg');
	aspect-ratio: 1440 / 101;
}

.nnl-sd-top-2B::before,
.nnl-sd-top-2b::before,
.nnl-sd-bot-2B::after,
.nnl-sd-bot-2b::after {
	mask-image: url('https://development2.jut-so.de/nnl/wp-content/themes/nnl-child-theme/assets/shape-dividers/shape_02B.svg');
	-webkit-mask-image: url('https://development2.jut-so.de/nnl/wp-content/themes/nnl-child-theme/assets/shape-dividers/shape_02B.svg');
	aspect-ratio: 1440 / 101;
}

.nnl-sd-top-3A::before,
.nnl-sd-top-3a::before,
.nnl-sd-bot-3A::after,
.nnl-sd-bot-3a::after {
	mask-image: url('https://development2.jut-so.de/nnl/wp-content/themes/nnl-child-theme/assets/shape-dividers/shape_03A.svg');
	-webkit-mask-image: url('https://development2.jut-so.de/nnl/wp-content/themes/nnl-child-theme/assets/shape-dividers/shape_03A.svg');
	aspect-ratio: 1441 / 100;
}

.nnl-sd-top-3B::before,
.nnl-sd-top-3b::before,
.nnl-sd-bot-3B::after,
.nnl-sd-bot-3b::after {
	mask-image: url('https://development2.jut-so.de/nnl/wp-content/themes/nnl-child-theme/assets/shape-dividers/shape_03B.svg');
	-webkit-mask-image: url('https://development2.jut-so.de/nnl/wp-content/themes/nnl-child-theme/assets/shape-dividers/shape_03B.svg');
	aspect-ratio: 1440 / 100;	
}

.nnl-sd-top-4A::before,
.nnl-sd-top-4a::before,
.nnl-sd-bot-4A::after,
.nnl-sd-bot-4a::after {
	mask-image: url('https://development2.jut-so.de/nnl/wp-content/themes/nnl-child-theme/assets/shape-dividers/shape_04A.svg');
	-webkit-mask-image: url('https://development2.jut-so.de/nnl/wp-content/themes/nnl-child-theme/assets/shape-dividers/shape_04A.svg');
	aspect-ratio: 1440 / 101;
}

.nnl-sd-top-4B::before,
.nnl-sd-top-4b::before,
.nnl-sd-bot-4B::after,
.nnl-sd-bot-4b::after {
	mask-image: url('https://development2.jut-so.de/nnl/wp-content/themes/nnl-child-theme/assets/shape-dividers/shape_04B.svg');
	-webkit-mask-image: url('https://development2.jut-so.de/nnl/wp-content/themes/nnl-child-theme/assets/shape-dividers/shape_04B.svg');
	aspect-ratio: 1440 / 100;
}

.site-color:before,
.site-color:after {
	background-color: var(--site-color);
}

/* ========================================
   MOBILE BASE STYLES
   ======================================== */

@media screen and (max-width: 1024px) {

	/* ========================================
	   MOBILE SOLID RECTANGLE DIVIDER
	   ======================================== */

	.nnl-sdm-top-rect::before,
	.nnl-sdm-bot-rect::after {
		content: '';
		position: absolute;
		left: 0;
		width: 100%;
		z-index: 1;
		backface-visibility: hidden;

	}

	.nnl-sdm-top-rect::before {
		top: 0;
		transform: translateY(-97%);
	}

	.nnl-sdm-bot-rect::after {
		bottom: 0;
		transform: translateY(97%);
	}

	.nnl-sdm-top-rect.nnl-sd-top-site-color::before,
	.nnl-sdm-bot-rect.nnl-sd-bot-site-color::after {
		background: var(--site-color);
	}

	/* Mobile dividers - cover, no repeat */
	.nnl-sdm-top-1a::before,
	.nnl-sdm-top-1A::before,
	.nnl-sdm-top-1b::before,
	.nnl-sdm-top-1B::before,
	.nnl-sdm-top-1c::before,
	.nnl-sdm-top-1C::before,
	.nnl-sdm-top-1d::before,
	.nnl-sdm-top-1D::before,
	.nnl-sdm-top-2a::before,
	.nnl-sdm-top-2A::before,
	.nnl-sdm-top-2b::before,
	.nnl-sdm-top-2B::before,
	.nnl-sdm-top-2c::before,
	.nnl-sdm-top-2C::before,
	.nnl-sdm-top-2d::before,
	.nnl-sdm-top-2D::before,
	.nnl-sdm-top-3a::before,
	.nnl-sdm-top-3A::before,
	.nnl-sdm-top-3b::before,
	.nnl-sdm-top-3B::before,
	.nnl-sdm-top-3c::before,
	.nnl-sdm-top-3C::before,
	.nnl-sdm-top-3d::before,
	.nnl-sdm-top-3D::before,
	.nnl-sdm-top-4a::before,
	.nnl-sdm-top-4A::before,
	.nnl-sdm-top-4b::before,
	.nnl-sdm-top-4B::before,
	.nnl-sdm-top-4c::before,
	.nnl-sdm-top-4C::before,
	.nnl-sdm-top-4d::before,
	.nnl-sdm-top-4D::before,
	.nnl-sdm-bot-1a::after,
	.nnl-sdm-bot-1A::after,
	.nnl-sdm-bot-1b::after,
	.nnl-sdm-bot-1B::after,
	.nnl-sdm-bot-1c::after,
	.nnl-sdm-bot-1C::after,
	.nnl-sdm-bot-1d::after,
	.nnl-sdm-bot-1D::after,
	.nnl-sdm-bot-2a::after,
	.nnl-sdm-bot-2A::after,
	.nnl-sdm-bot-2b::after,
	.nnl-sdm-bot-2B::after,
	.nnl-sdm-bot-2c::after,
	.nnl-sdm-bot-2C::after,
	.nnl-sdm-bot-2d::after,
	.nnl-sdm-bot-2D::after,
	.nnl-sdm-bot-3a::after,
	.nnl-sdm-bot-3A::after,
	.nnl-sdm-bot-3b::after,
	.nnl-sdm-bot-3B::after,
	.nnl-sdm-bot-3c::after,
	.nnl-sdm-bot-3C::after,
	.nnl-sdm-bot-3d::after,
	.nnl-sdm-bot-3D::after,
	.nnl-sdm-bot-4a::after,
	.nnl-sdm-bot-4A::after,
	.nnl-sdm-bot-4b::after,
	.nnl-sdm-bot-4B::after,
	.nnl-sdm-bot-4c::after,
	.nnl-sdm-bot-4C::after,
	.nnl-sdm-bot-4d::after,
	.nnl-sdm-bot-4D::after {
		mask-size: cover;
		mask-position: center;
		mask-repeat: no-repeat;
		-webkit-mask-size: cover;
		-webkit-mask-position: center;
		-webkit-mask-repeat: no-repeat;
		height: auto;
		width: 100%;
	}
	
	/* ========================================
	   MOBILE TOP DIVIDERS - IMAGES ONLY
	   ======================================== */
	
	.nnl-sdm-top-1a::before,
	.nnl-sdm-top-1A::before,
	.nnl-sdm-bot-1a::after,
	.nnl-sdm-bot-1A::after {
		mask-image: url('https://development2.jut-so.de/nnl/wp-content/themes/nnl-child-theme/assets/shape-dividers/shape_01-mobile-A.svg');
		-webkit-mask-image: url('https://development2.jut-so.de/nnl/wp-content/themes/nnl-child-theme/assets/shape-dividers/shape_01-mobile-A.svg');
		aspect-ratio: 320 / 45;
	}
	
	.nnl-sdm-top-1b::before,
	.nnl-sdm-top-1B::before,
	.nnl-sdm-bot-1b::after,
	.nnl-sdm-bot-1B::after {
		mask-image: url('https://development2.jut-so.de/nnl/wp-content/themes/nnl-child-theme/assets/shape-dividers/shape_01-mobile-B.svg');
		-webkit-mask-image: url('https://development2.jut-so.de/nnl/wp-content/themes/nnl-child-theme/assets/shape-dividers/shape_01-mobile-B.svg');
		aspect-ratio: 320 / 44;
	}
	
	.nnl-sdm-top-1c::before,
	.nnl-sdm-top-1C::before,
	.nnl-sdm-bot-1c::after,
	.nnl-sdm-bot-1C::after {
		mask-image: url('https://development2.jut-so.de/nnl/wp-content/themes/nnl-child-theme/assets/shape-dividers/shape_01-mobile-C.svg');
		-webkit-mask-image: url('https://development2.jut-so.de/nnl/wp-content/themes/nnl-child-theme/assets/shape-dividers/shape_01-mobile-C.svg');
		aspect-ratio: 320 / 45;
	}
	
	.nnl-sdm-top-1d::before,
	.nnl-sdm-top-1D::before,
	.nnl-sdm-bot-1d::after,
	.nnl-sdm-bot-1D::after {
		mask-image: url('https://development2.jut-so.de/nnl/wp-content/themes/nnl-child-theme/assets/shape-dividers/shape_01-mobile-D.svg');
		-webkit-mask-image: url('https://development2.jut-so.de/nnl/wp-content/themes/nnl-child-theme/assets/shape-dividers/shape_01-mobile-D.svg');
		aspect-ratio: 320 / 44;
	}
	
	.nnl-sdm-top-2a::before,
	.nnl-sdm-top-2A::before,
	.nnl-sdm-bot-2a::after,
	.nnl-sdm-bot-2A::after {
		mask-image: url('https://development2.jut-so.de/nnl/wp-content/themes/nnl-child-theme/assets/shape-dividers/shape_02-mobile-A.svg');
		-webkit-mask-image: url('https://development2.jut-so.de/nnl/wp-content/themes/nnl-child-theme/assets/shape-dividers/shape_02-mobile-A.svg');
		aspect-ratio: 320 / 23;
	}
	
	.nnl-sdm-top-2b::before,
	.nnl-sdm-top-2B::before,
	.nnl-sdm-bot-2b::after,
	.nnl-sdm-bot-2B::after {
		mask-image: url('https://development2.jut-so.de/nnl/wp-content/themes/nnl-child-theme/assets/shape-dividers/shape_02-mobile-B.svg');
		-webkit-mask-image: url('https://development2.jut-so.de/nnl/wp-content/themes/nnl-child-theme/assets/shape-dividers/shape_02-mobile-B.svg');
		aspect-ratio: 320 / 23;
	}
	
	.nnl-sdm-top-2c::before,
	.nnl-sdm-top-2C::before,
	.nnl-sdm-bot-2c::after,
	.nnl-sdm-bot-2C::after {
		mask-image: url('https://development2.jut-so.de/nnl/wp-content/themes/nnl-child-theme/assets/shape-dividers/shape_02-mobile-C.svg');
		-webkit-mask-image: url('https://development2.jut-so.de/nnl/wp-content/themes/nnl-child-theme/assets/shape-dividers/shape_02-mobile-C.svg');
		aspect-ratio: 320 / 45;
	}
	
	.nnl-sdm-top-2d::before,
	.nnl-sdm-top-2D::before,
	.nnl-sdm-bot-2d::after,
	.nnl-sdm-bot-2D::after {
		mask-image: url('https://development2.jut-so.de/nnl/wp-content/themes/nnl-child-theme/assets/shape-dividers/shape_02-mobile-D.svg');
		-webkit-mask-image: url('https://development2.jut-so.de/nnl/wp-content/themes/nnl-child-theme/assets/shape-dividers/shape_02-mobile-D.svg');
		aspect-ratio: 320 / 45;
	}
	
	.nnl-sdm-top-3a::before,
	.nnl-sdm-top-3A::before,
	.nnl-sdm-bot-3a::after,
	.nnl-sdm-bot-3A::after {
		mask-image: url('https://development2.jut-so.de/nnl/wp-content/themes/nnl-child-theme/assets/shape-dividers/shape_03-mobile-A.svg');
		-webkit-mask-image: url('https://development2.jut-so.de/nnl/wp-content/themes/nnl-child-theme/assets/shape-dividers/shape_03-mobile-A.svg');
		aspect-ratio: 320 / 45;
	}
	
	.nnl-sdm-top-3b::before,
	.nnl-sdm-top-3B::before,
	.nnl-sdm-bot-3b::after,
	.nnl-sdm-bot-3B::after {
		mask-image: url('https://development2.jut-so.de/nnl/wp-content/themes/nnl-child-theme/assets/shape-dividers/shape_03-mobile-B.svg');
		-webkit-mask-image: url('https://development2.jut-so.de/nnl/wp-content/themes/nnl-child-theme/assets/shape-dividers/shape_03-mobile-B.svg');
		aspect-ratio: 320 / 44;
	}
	
	.nnl-sdm-top-3c::before,
	.nnl-sdm-top-3C::before,
	.nnl-sdm-bot-3c::after,
	.nnl-sdm-bot-3C::after {
		mask-image: url('https://development2.jut-so.de/nnl/wp-content/themes/nnl-child-theme/assets/shape-dividers/shape_03-mobile-C.svg');
		-webkit-mask-image: url('https://development2.jut-so.de/nnl/wp-content/themes/nnl-child-theme/assets/shape-dividers/shape_03-mobile-C.svg');
		aspect-ratio: 320 / 44;
	}
	
	.nnl-sdm-top-3d::before,
	.nnl-sdm-top-3D::before,
	.nnl-sdm-bot-3d::after,
	.nnl-sdm-bot-3D::after {
		mask-image: url('https://development2.jut-so.de/nnl/wp-content/themes/nnl-child-theme/assets/shape-dividers/shape_03-mobile-D.svg');
		-webkit-mask-image: url('https://development2.jut-so.de/nnl/wp-content/themes/nnl-child-theme/assets/shape-dividers/shape_03-mobile-D.svg');
		aspect-ratio: 320 / 44;
	}
	
	.nnl-sdm-top-4a::before,
	.nnl-sdm-top-4A::before,
	.nnl-sdm-bot-4a::after,
	.nnl-sdm-bot-4A::after {
		mask-image: url('https://development2.jut-so.de/nnl/wp-content/themes/nnl-child-theme/assets/shape-dividers/shape_04-mobile-A.svg');
		-webkit-mask-image: url('https://development2.jut-so.de/nnl/wp-content/themes/nnl-child-theme/assets/shape-dividers/shape_04-mobile-A.svg');
		aspect-ratio: 320 / 23;
	}
	
	.nnl-sdm-top-4b::before,
	.nnl-sdm-top-4B::before,
	.nnl-sdm-bot-4b::after,
	.nnl-sdm-bot-4B::after {
		mask-image: url('https://development2.jut-so.de/nnl/wp-content/themes/nnl-child-theme/assets/shape-dividers/shape_04-mobile-B.svg');
		-webkit-mask-image: url('https://development2.jut-so.de/nnl/wp-content/themes/nnl-child-theme/assets/shape-dividers/shape_04-mobile-B.svg');
		aspect-ratio: 320 / 23;
	}
	
	.nnl-sdm-top-4c::before,
	.nnl-sdm-top-4C::before,
	.nnl-sdm-bot-4c::after,
	.nnl-sdm-bot-4C::after {
		mask-image: url('https://development2.jut-so.de/nnl/wp-content/themes/nnl-child-theme/assets/shape-dividers/shape_04-mobile-C.svg');
		-webkit-mask-image: url('https://development2.jut-so.de/nnl/wp-content/themes/nnl-child-theme/assets/shape-dividers/shape_04-mobile-C.svg');
		aspect-ratio: 320 / 45;
	}
	
	.nnl-sdm-top-4d::before,
	.nnl-sdm-top-4D::before,
	.nnl-sdm-bot-4d::after,
	.nnl-sdm-bot-4D::after {
		mask-image: url('https://development2.jut-so.de/nnl/wp-content/themes/nnl-child-theme/assets/shape-dividers/shape_04-mobile-D.svg');
		-webkit-mask-image: url('https://development2.jut-so.de/nnl/wp-content/themes/nnl-child-theme/assets/shape-dividers/shape_04-mobile-D.svg');
		aspect-ratio: 320 / 44;
	}
}

@media screen and (max-width: 767px) {
	.nnl-sdm-top-rect::before,
	.nnl-sdm-bot-rect::after {
		height: 60px;
		mask-image: none;
		-webkit-mask-image: none;
	}
}