/* Opt-in für Inhaltssektionen: reale Hintergründe, keine kopierten Farbflächen.
 * Klassen stehen an Sektion A; Sektion B folgt unmittelbar im selben Container.
 * JS aktiviert nur gültige Paare. Ohne JS bleiben normale Divi-Sektionen stehen.
 */
.et_pb_section.burnabit-section-divider--auto {
	--burnabit-divider-radius: clamp(2.5rem, 4vw, 3.5rem);
}

.et_pb_section[data-burnabit-divider-layer] {
	position: relative;
	z-index: var(--burnabit-divider-layer) !important;
}

.et_pb_section[data-burnabit-divider-out],
.et_pb_section[data-burnabit-divider-in] {
	box-sizing: border-box;
	background-origin: border-box !important;
	background-clip: border-box !important;
}

/* Transparente Ränder reservieren Platz außerhalb des Inhalts und erweitern
 * dabei den originalen Hintergrund. Divi-Paddings bleiben unverändert. */
.et_pb_section[data-burnabit-divider-in] {
	border-top: var(--burnabit-divider-incoming) solid transparent !important;
}
.et_pb_section[data-burnabit-divider-out] {
	--burnabit-divider-band: calc(2 * var(--burnabit-divider-radius));
	border-bottom: var(--burnabit-divider-band) solid transparent !important;
	margin-bottom: calc(var(--burnabit-divider-margin, 0px) - var(--burnabit-divider-band)) !important;
	-webkit-mask: var(--burnabit-divider-mask);
	mask: var(--burnabit-divider-mask);
}

/* All variants share a two-radius band and the same middle boundary.
 * Closing occupies its upper half, opening its lower half. */
.et_pb_section[data-burnabit-divider-out="closing"] {
	--burnabit-divider-mask:
		linear-gradient(#000 0 0) top / 100% calc(100% - 2 * var(--burnabit-divider-radius)) no-repeat,
		linear-gradient(#000 0 0) left 50% bottom var(--burnabit-divider-radius) / calc(100% - 2 * var(--burnabit-divider-radius)) var(--burnabit-divider-radius) no-repeat,
		radial-gradient(circle at 100% 0, #000 calc(var(--burnabit-divider-radius) - .5px), transparent var(--burnabit-divider-radius)) left 0 bottom var(--burnabit-divider-radius) / var(--burnabit-divider-radius) var(--burnabit-divider-radius) no-repeat,
		radial-gradient(circle at 0 0, #000 calc(var(--burnabit-divider-radius) - .5px), transparent var(--burnabit-divider-radius)) right 0 bottom var(--burnabit-divider-radius) / var(--burnabit-divider-radius) var(--burnabit-divider-radius) no-repeat;
}

.et_pb_section[data-burnabit-divider-out="opening"] {
	--burnabit-divider-mask:
		linear-gradient(#000 0 0) top / 100% calc(100% - var(--burnabit-divider-radius)) no-repeat,
		radial-gradient(circle at 100% 100%, transparent calc(var(--burnabit-divider-radius) - .5px), #000 var(--burnabit-divider-radius)) bottom left / var(--burnabit-divider-radius) var(--burnabit-divider-radius) no-repeat,
		radial-gradient(circle at 0 100%, transparent calc(var(--burnabit-divider-radius) - .5px), #000 var(--burnabit-divider-radius)) bottom right / var(--burnabit-divider-radius) var(--burnabit-divider-radius) no-repeat;
}

/* Explizite Vier-Werte-Position: Firefox verwirft hier die Drei-Werte-Syntax. */
.et_pb_section[data-burnabit-divider-out="close-left-open-right"] {
	--burnabit-divider-mask:
		linear-gradient(#000 0 0) top / 100% calc(100% - 2 * var(--burnabit-divider-radius)) no-repeat,
		linear-gradient(#000 0 0) right 0 bottom var(--burnabit-divider-radius) / calc(100% - var(--burnabit-divider-radius)) var(--burnabit-divider-radius) no-repeat,
		radial-gradient(circle at 100% 0, #000 calc(var(--burnabit-divider-radius) - .5px), transparent var(--burnabit-divider-radius)) left 0 bottom var(--burnabit-divider-radius) / var(--burnabit-divider-radius) var(--burnabit-divider-radius) no-repeat,
		radial-gradient(circle at 0 100%, transparent calc(var(--burnabit-divider-radius) - .5px), #000 var(--burnabit-divider-radius)) right bottom / var(--burnabit-divider-radius) var(--burnabit-divider-radius) no-repeat;
}
.et_pb_section[data-burnabit-divider-out="open-left-close-right"] {
	--burnabit-divider-mask:
		linear-gradient(#000 0 0) top / 100% calc(100% - 2 * var(--burnabit-divider-radius)) no-repeat,
		linear-gradient(#000 0 0) left 0 bottom var(--burnabit-divider-radius) / calc(100% - var(--burnabit-divider-radius)) var(--burnabit-divider-radius) no-repeat,
		radial-gradient(circle at 0 0, #000 calc(var(--burnabit-divider-radius) - .5px), transparent var(--burnabit-divider-radius)) right 0 bottom var(--burnabit-divider-radius) / var(--burnabit-divider-radius) var(--burnabit-divider-radius) no-repeat,
		radial-gradient(circle at 100% 100%, transparent calc(var(--burnabit-divider-radius) - .5px), #000 var(--burnabit-divider-radius)) left bottom / var(--burnabit-divider-radius) var(--burnabit-divider-radius) no-repeat;
}

@media (max-width: 767px) {
	.et_pb_section.burnabit-section-divider--auto { --burnabit-divider-radius: 2.5rem; }
}