/**
 * Molekül: Papier-Formen
 *
 * Die gerissenen Papierkanten der Marke als wiederverwendbare Masken.
 * Varianten sind Modifier – Redaktion wählt nichts davon aus.
 */
:root {
	--mask-paper-product: url("../../masks/paper-product.svg");
	--mask-paper-panel: url("../../masks/paper-panel.svg");
	--mask-paper-label: url("../../masks/hero-label.svg");
	--pattern-image: url("../../images/story-pattern.webp");
}

/* Musterfläche mit wählbarem Farbakzent */
.pattern-surface {
	isolation: isolate;
	position: relative;
}

.pattern-surface::before {
	background-image: var(--pattern-image);
	background-position: center;
	background-repeat: repeat;
	background-size: var(--pattern-size, clamp(15rem, 22vw, 24rem)) auto;
	content: "";
	filter: var(--pattern-filter, none);
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: -1;
}

.pattern--sand { --pattern-filter: var(--pattern-filter-sand); }
.pattern--green { --pattern-filter: var(--pattern-filter-green); }
.pattern--rose { --pattern-filter: var(--pattern-filter-rose); }
.pattern--lavender { --pattern-filter: var(--pattern-filter-lavender); }

/* Gerissene Panel-Kante */
.paper-panel::before {
	-webkit-mask: var(--mask-paper-panel) center / 100% 100% no-repeat;
	mask: var(--mask-paper-panel) center / 100% 100% no-repeat;
}

/* Produktkachel */
.paper-tile {
	align-items: center;
	aspect-ratio: 1 / 1.07;
	display: flex;
	isolation: isolate;
	justify-content: center;
	overflow: hidden;
	padding: clamp(1rem, 2vw, 2.5rem);
	position: relative;
}

.paper-tile::before {
	background: var(--theme-tile-bg);
	content: "";
	inset: 0;
	-webkit-mask: var(--mask-paper-product) center / 100% 100% no-repeat;
	mask: var(--mask-paper-product) center / 100% 100% no-repeat;
	position: absolute;
	transition: transform var(--duration-slow) var(--ease-out);
	z-index: -1;
}

/* Wiederholte Kacheln nicht mechanisch identisch */
.paper-tile--flip-x::before { transform: scaleX(-1); }
.paper-tile--flip-y::before { transform: scaleY(-1); }
.paper-tile--flip-xy::before { transform: scale(-1); }