/*
 * Musterkacheln. Sieben Formen entstehen hier ohne Datei; die fünf organischen
 * liegen als SVG unter assets/muster/.
 *
 * Standard ist die Originalpaarung des Corporate Designs: Blüte auf Nacht.
 * Ein früherer Versuch mit stark abgeschwächter Lagune auf Düne wurde verworfen
 * — abgeschwächte Zweitfarben ergeben ein trübes Graubeige statt einer ruhigen
 * Fläche. Die Muster sind als kräftiger Akzent gedacht, nicht als Flüstern.
 *
 * Die Paarung bleibt über die beiden Variablen frei setzbar; für ruhigere
 * Flächen sind die mitgelieferten Modifikatoren unten gedacht.
 */
/*
 * Das Aufzählungszeichen im Fliesstext ist dieselbe Kachel, nur klein — die
 * Regeln stehen deshalb hier und nicht ein zweites Mal in abschnitte.css.
 * Größe, Versatz und durchsichtiger Grund kommen dort dazu.
 */
.jev-muster,
.jev-fliess ul li::before {
	--jev-muster-figur: var(--jev-signal);
	--jev-muster-grund: var(--jev-text);
	--jev-muster-kachel: 48px;
	background-color: var(--jev-muster-grund);
	color: var(--jev-muster-figur);
}

/* Alternative Paarungen aus dem CD, alle mit voller Farbkraft. */
.jev-muster--lagune { --jev-muster-figur: var(--jev-flaeche-hell);   --jev-muster-grund: var(--jev-text-titel); }
.jev-muster--duene  { --jev-muster-figur: var(--jev-text);    --jev-muster-grund: var(--jev-flaeche-hell); }
.jev-muster--terrakotta { --jev-muster-figur: var(--jev-grund); --jev-muster-grund: var(--jev-terrakotta); }

.jev-muster--kreis {
	background-image: radial-gradient(circle at 50% 50%, currentColor 48%, transparent 49%);
	background-size: var(--jev-muster-kachel) var(--jev-muster-kachel);
}
.jev-muster--halbkreis {
	background-image: radial-gradient(circle at 0% 50%, currentColor 48%, transparent 49%);
	background-size: var(--jev-muster-kachel) var(--jev-muster-kachel);
}
.jev-muster--schachbrett {
	background-image:
		linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%),
		linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%);
	background-size: var(--jev-muster-kachel) var(--jev-muster-kachel);
	background-position: 0 0, calc(var(--jev-muster-kachel) / 2) calc(var(--jev-muster-kachel) / 2);
}
.jev-muster--raute,
.jev-fliess ul li::before {
	background-image:
		linear-gradient(45deg,  currentColor 25%, transparent 25%),
		linear-gradient(-45deg, currentColor 25%, transparent 25%),
		linear-gradient(45deg,  transparent 75%, currentColor 75%),
		linear-gradient(-45deg, transparent 75%, currentColor 75%);
	background-size: var(--jev-muster-kachel) var(--jev-muster-kachel);
}
.jev-muster--pfeil {
	background-image: linear-gradient(135deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%);
	background-size: var(--jev-muster-kachel) var(--jev-muster-kachel);
}
.jev-muster--linien {
	background-image: repeating-linear-gradient(
		to bottom,
		currentColor 0, currentColor 2px,
		transparent 2px, transparent 8px
	);
	background-size: var(--jev-muster-kachel) var(--jev-muster-kachel);
}
.jev-muster--bogen {
	background-image: radial-gradient(circle at 0% 100%, currentColor 70%, transparent 71%);
	background-size: var(--jev-muster-kachel) var(--jev-muster-kachel);
}

/*
 * Die fünf organischen Kacheln als SVG-Maske: so nehmen auch sie die Textfarbe
 * an, statt eine feste Füllung mitzubringen.
 */
.jev-muster--flower,
.jev-muster--tulip,
.jev-muster--eye,
.jev-muster--funnel,
.jev-muster--opening {
	background-color: var(--jev-muster-grund);
	background-image: none;
}
.jev-muster--flower  { --jev-muster-datei: url("../muster/flower.svg"); }
.jev-muster--tulip   { --jev-muster-datei: url("../muster/tulip.svg"); }
.jev-muster--eye     { --jev-muster-datei: url("../muster/eye.svg"); }
.jev-muster--funnel  { --jev-muster-datei: url("../muster/funnel.svg"); }
.jev-muster--opening { --jev-muster-datei: url("../muster/opening.svg"); }

.jev-muster--flower::before,
.jev-muster--tulip::before,
.jev-muster--eye::before,
.jev-muster--funnel::before,
.jev-muster--opening::before {
	content: "";
	position: absolute;
	inset: 0;
	background: currentColor;
	-webkit-mask: var(--jev-muster-datei) 0 0 / var(--jev-muster-kachel) var(--jev-muster-kachel) repeat;
	mask: var(--jev-muster-datei) 0 0 / var(--jev-muster-kachel) var(--jev-muster-kachel) repeat;
}
.jev-muster--flower,
.jev-muster--tulip,
.jev-muster--eye,
.jev-muster--funnel,
.jev-muster--opening { position: relative; }
/*
 * Die Figurenebene übernimmt die Rundung ihres Elements.
 *
 * Sie liegt als eigene Ebene über dem Grund. Ohne diese Zeile schnitt eine
 * abgerundete Kachel nur ihren Grund ab — die Blüten standen in den Ecken
 * über den Rand hinaus (kleine Symbole im Profil, Chips im Angebot).
 * `inherit` statt eines festen Werts: Eine Kachel ohne Rundung erbt 0.
 */
.jev-muster--flower::before,
.jev-muster--tulip::before,
.jev-muster--eye::before,
.jev-muster--funnel::before,
.jev-muster--opening::before { border-radius: inherit; }

/*
 * Als Band eingesetzt — der übliche Fall.
 *
 * Die Höhe MUSS ein Vielfaches der Kachelgröße sein, sonst wird die unterste
 * Kachelreihe angeschnitten. Eine feste Höhe (etwa 2.5rem bei 48px Kachel)
 * schneidet jede Kachel um 8px ab; bei den organischen Formen zerfällt das
 * Muster sichtbar.
 */
.jev-band {
	height: var(--jev-muster-kachel);
	width: 100%;
}
.jev-band--doppelt { height: calc(var(--jev-muster-kachel) * 2); }

/* Feinere oder gröbere Kachelung, weiterhin schnittfrei. */
.jev-muster--fein { --jev-muster-kachel: 32px; }
.jev-muster--grob { --jev-muster-kachel: 72px; }

/*
 * Signatur-Muster: die 45° gedrehte Kachelung mit Lagune-Fugen aus der
 * CD-Präsentation. Im Marken-Paket lag sie nicht als Datei vor, sondern nur die
 * zwölf Einzelkacheln — komposition.svg setzt sie daraus zusammen.
 *
 * Anders als die übrigen Muster bringt sie ihre Farben fest mit (Blüte, Nacht,
 * Lagune), weil das Zusammenspiel der drei die Wirkung ausmacht. Sie ist als
 * großflächiger Akzent gedacht: Bühnenhintergrund, Trennband, Bildersatz.
 */
.jev-muster--komposition {
	background-color: var(--jev-flaeche-tief);
	background-image: url("../muster/komposition.svg");
	background-size: 560px 560px;
	background-repeat: repeat;
}
.jev-muster--komposition::before { content: none; }

.jev-flaeche { min-height: 320px; }