/*
 * Streifen-System, siehe STREIFEN.md. 45°, Periodenlänge 119px (Diagonalwert,
 * 84 × √2 ≈ 118,8). background-color zusätzlich als Rückfall gesetzt. Rosa ist
 * immer die zweite Farbe, außer auf der Startseite selbst (dort ist Rosa die
 * Grundfarbe und Creme der Partner).
 *
 * Streifen NIE animieren, NIE background-attachment:fixed - beides ruckelt
 * auf Mobilgeräten. prefers-reduced-motion schaltet Animationen ab, NICHT die
 * Streifen selbst (statisches Muster, kein Effekt) - deshalb kein Media Query
 * hier.
 */

.is-style-streifen-merlot,
.is-style-streifen-suedsee,
.is-style-streifen-zitrone,
.is-style-streifen-orange,
.is-style-streifen-blau,
.is-style-streifen-rosa,
.is-style-streifen-band {
	position: relative;
}

.is-style-streifen-merlot {
	background-color: var(--wp--preset--color--merlot);
	background-image: repeating-linear-gradient(
		45deg,
		var(--wp--preset--color--merlot) 0 calc(var(--wp--custom--stripe-d) * .5),
		var(--wp--preset--color--rosa) calc(var(--wp--custom--stripe-d) * .5) var(--wp--custom--stripe-d)
	);
	color: var(--wp--preset--color--creme);
	--glow: var(--wp--custom--glow--restaurant);
}

.is-style-streifen-suedsee {
	background-color: var(--wp--preset--color--suedsee);
	background-image: repeating-linear-gradient(
		45deg,
		var(--wp--preset--color--suedsee) 0 calc(var(--wp--custom--stripe-d) * .5),
		var(--wp--preset--color--rosa) calc(var(--wp--custom--stripe-d) * .5) var(--wp--custom--stripe-d)
	);
	color: var(--wp--preset--color--creme);
	--glow: var(--wp--custom--glow--daily);
}

.is-style-streifen-zitrone {
	background-color: var(--wp--preset--color--zitrone);
	background-image: repeating-linear-gradient(
		45deg,
		var(--wp--preset--color--zitrone) 0 calc(var(--wp--custom--stripe-d) * .5),
		var(--wp--preset--color--rosa) calc(var(--wp--custom--stripe-d) * .5) var(--wp--custom--stripe-d)
	);
	color: var(--wp--preset--color--merlot);
	--glow: var(--wp--custom--glow--studio);
}

.is-style-streifen-orange {
	background-color: var(--wp--preset--color--orange);
	background-image: repeating-linear-gradient(
		45deg,
		var(--wp--preset--color--orange) 0 calc(var(--wp--custom--stripe-d) * .5),
		var(--wp--preset--color--rosa) calc(var(--wp--custom--stripe-d) * .5) var(--wp--custom--stripe-d)
	);
	color: var(--wp--preset--color--merlot);
	--glow: var(--wp--custom--glow--catering);
}

.is-style-streifen-blau {
	background-color: var(--wp--preset--color--blau);
	background-image: repeating-linear-gradient(
		45deg,
		var(--wp--preset--color--blau) 0 calc(var(--wp--custom--stripe-d) * .5),
		var(--wp--preset--color--rosa) calc(var(--wp--custom--stripe-d) * .5) var(--wp--custom--stripe-d)
	);
	color: var(--wp--preset--color--creme);
	--glow: var(--wp--custom--glow--events);
}

/* Startseite: Rosa ist hier die Grundfarbe, Creme der Partner - Ausnahme laut STREIFEN.md */
.is-style-streifen-rosa {
	background-color: var(--wp--preset--color--rosa);
	background-image: repeating-linear-gradient(
		45deg,
		var(--wp--preset--color--rosa) 0 calc(var(--wp--custom--stripe-d) * .5),
		var(--wp--preset--color--creme) calc(var(--wp--custom--stripe-d) * .5) var(--wp--custom--stripe-d)
	);
	color: var(--wp--preset--color--blau);
	--glow: transparent;
}

/* Streifenband vor dem Fuß: eigene, kleinere Periode, kein Textträger */
.is-style-streifen-band {
	background-color: var(--wp--preset--color--blau);
	background-image: repeating-linear-gradient(45deg, var(--wp--preset--color--blau) 0 26px, var(--wp--preset--color--creme) 26px 52px);
	--glow: transparent;
}

/* Glow: Textschatten in der Grundfarbe der Fläche + schwache Wolke dahinter */
.is-style-streifen-merlot h1, .is-style-streifen-merlot h2, .is-style-streifen-merlot h3, .is-style-streifen-merlot .eyebrow,
.is-style-streifen-suedsee h1, .is-style-streifen-suedsee h2, .is-style-streifen-suedsee h3, .is-style-streifen-suedsee .eyebrow,
.is-style-streifen-zitrone h1, .is-style-streifen-zitrone h2, .is-style-streifen-zitrone h3, .is-style-streifen-zitrone .eyebrow,
.is-style-streifen-orange h1, .is-style-streifen-orange h2, .is-style-streifen-orange h3, .is-style-streifen-orange .eyebrow,
.is-style-streifen-blau h1, .is-style-streifen-blau h2, .is-style-streifen-blau h3, .is-style-streifen-blau .eyebrow {
	text-shadow: 0 2px 14px var(--glow), 0 0 34px var(--glow);
}

.is-style-streifen-merlot p, .is-style-streifen-suedsee p, .is-style-streifen-zitrone p, .is-style-streifen-orange p, .is-style-streifen-blau p {
	text-shadow: 0 0 6px var(--glow), 0 0 14px var(--glow), 0 0 30px var(--glow);
}

.is-style-streifen-merlot::before, .is-style-streifen-suedsee::before, .is-style-streifen-zitrone::before,
.is-style-streifen-orange::before, .is-style-streifen-blau::before {
	content: "";
	position: absolute;
	z-index: 0;
	inset: -10%;
	pointer-events: none;
	opacity: .34;
	background: radial-gradient(62% 34% at 44% 48%, var(--glow) 0 18%, transparent 68%);
}

.is-style-streifen-merlot > *, .is-style-streifen-suedsee > *, .is-style-streifen-zitrone > *,
.is-style-streifen-orange > *, .is-style-streifen-blau > * {
	position: relative;
	z-index: 1;
}