/**
 * Signature-Design-Elemente: Papierkante, Pattern Shapes, Geschenkband.
 * Bewusst sparsam in den Templates eingesetzt (siehe front-page.php,
 * template-parts/homepage/*.php) - nicht auf jeder Section.
 */

/* -----------------------------------------------------------------
 * 1. Papierkante: dezenter "gerissener Papier"-Uebergang an Section-Raendern.
 * --------------------------------------------------------------- */
.musterlaune-pattern-edge {
	position: relative;
	--musterlaune-tear-color: var(--color-background);
}

.musterlaune-pattern-edge--top::before,
.musterlaune-pattern-edge--bottom::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 14px;
	background-image:
		linear-gradient(135deg, var(--musterlaune-tear-color) 50%, transparent 50%),
		linear-gradient(225deg, var(--musterlaune-tear-color) 50%, transparent 50%);
	background-size: 20px 14px;
	background-repeat: repeat-x;
}

.musterlaune-pattern-edge--top::before {
	top: 0;
	background-position: top;
}

.musterlaune-pattern-edge--bottom::after {
	bottom: 0;
	background-position: bottom;
	transform: scaleY(-1);
}

/* -----------------------------------------------------------------
 * 2. Pattern Shapes: CSS-generierte Platzhaltermuster fuer Kategorie-/
 * Stil-Karten, solange noch kein echtes Produktfoto hinterlegt ist.
 * Sobald ein Kategoriebild gepflegt wird (siehe musterlaune_get_child_categories),
 * ersetzt das echte Foto diese Muster automatisch.
 * --------------------------------------------------------------- */
.pattern-1 {
	background-color: var(--color-background-alt-warm);
	background-image: radial-gradient(var(--color-primary) 5px, transparent 6px);
	background-size: 28px 28px;
}

.pattern-2 {
	background-color: var(--color-background-alt-cool);
	background-image: repeating-linear-gradient(90deg, var(--color-secondary) 0 10px, transparent 10px 24px);
}

.pattern-3 {
	background-color: var(--color-secondary-dark);
	background-image: repeating-linear-gradient(60deg, rgba(255,255,255,0.06) 0 2px, transparent 2px 22px);
}

.pattern-4 {
	background-color: #FBEAE0;
	background-image:
		radial-gradient(var(--color-primary) 4px, transparent 5px),
		radial-gradient(var(--color-secondary) 3px, transparent 4px),
		radial-gradient(var(--color-accent) 3px, transparent 4px);
	background-size: 40px 40px, 40px 40px, 40px 40px;
	background-position: 0 0, 20px 10px, 10px 25px;
}

.pattern-5 {
	background-color: #EEF0FC;
	background-image: radial-gradient(var(--color-highlight) 3px, transparent 4px);
	background-size: 26px 26px;
}

/* -----------------------------------------------------------------
 * 3. Geschenkband: sehr dezentes, geschwungenes Trennelement zwischen
 * zwei Sections. Rein dekorativ (aria-hidden im Markup).
 * --------------------------------------------------------------- */
.musterlaune-ribbon-divider {
	/* Farbe im data-URI ist hart codiert (%23E1487B = --color-primary),
	   da CSS Custom Properties innerhalb von SVG-data-URIs nicht aufgeloest
	   werden. Bei Aenderung der Primaerfarbe in tokens.css hier manuell
	   nachziehen. */
	height: 32px;
	margin-inline: auto;
	max-width: var(--container-width);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M0 10 C 40 -5, 60 25, 100 10 S 160 -5, 200 10' fill='none' stroke='%23E1487B' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;
	opacity: 0.5;
}

@media (prefers-reduced-motion: no-preference) {
	.musterlaune-pattern-edge--bottom::after,
	.musterlaune-pattern-edge--top::before {
		will-change: auto;
	}
}