/*
 * Section-Kurven – die Divi-"curve"-Divider der Homepage als native
 * Gutenberg-Bausteine.
 *
 * Verwendung:
 *   - Block-Stil "Kurve oben" / "Kurve unten" im Stile-Panel, oder
 *   - als Zusätzliche CSS-Klasse `.ff-curve-top` / `.ff-curve-bottom`.
 *
 * Kombinierbar mit anderen Effekten (z. B. dem Reveal-System): Da das
 * Stile-Panel nur EINE Auswahl zulässt, den zweiten Effekt einfach als
 * Zusätzliche CSS-Klasse eintragen – z. B. Block-Stil "Kurve oben" plus
 * Zusatzklasse `is-style-reveal-group`.
 *
 * Steuerung (pro Block überschreibbar):
 *   --ff-curve-color   Füllfarbe der Kurve (Standard: #ffffff)
 *   --ff-curve-height  Höhe der Kurve      (Standard: 2.5vw)
 *
 * Die Kurvenform entspricht 1:1 dem Divi-Divider (`viewBox 0 0 1280 140`,
 * `preserveAspectRatio="none"`), damit die Krümmung responsiv gleich bleibt.
 */

.is-style-curve-top,
.is-style-curve-bottom,
.ff-curve-top,
.ff-curve-bottom {
	position: relative;
	--ff-curve-color: #ffffff;
	--ff-curve-height: 2.5vw;
}

.is-style-curve-top::before,
.ff-curve-top::before,
.is-style-curve-bottom::after,
.ff-curve-bottom::after {
	content: "";
	position: absolute;
	left: 0;
	z-index: 2;
	width: 100%;
	height: var(--ff-curve-height);
	background-color: var(--ff-curve-color);
	pointer-events: none;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
}

.is-style-curve-top::before,
.ff-curve-top::before {
	top: 0;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201280%20140'%20preserveAspectRatio='none'%3E%3Cpath%20d='M640%20140C286.54%20140%200%200%200%200h1280S993.46%20140%20640%20140z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201280%20140'%20preserveAspectRatio='none'%3E%3Cpath%20d='M640%20140C286.54%20140%200%200%200%200h1280S993.46%20140%20640%20140z'/%3E%3C/svg%3E");
}

.is-style-curve-bottom::after,
.ff-curve-bottom::after {
	bottom: 0;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201280%20140'%20preserveAspectRatio='none'%3E%3Cpath%20d='M1280%20140V0S993.46%20140%20640%20139%200%200%200%200v140z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201280%20140'%20preserveAspectRatio='none'%3E%3Cpath%20d='M1280%20140V0S993.46%20140%20640%20139%200%200%200%200v140z'/%3E%3C/svg%3E");
}