/*
 * Gems Marpingen – Abschnittsgestaltung der Startseite (ab 0.6.6)
 * Wird nur geladen, wenn unter „Design → Darstellung GemS“ eine der Varianten A, B oder C gewählt ist,
 * die Schulmerkmale eingeschaltet sind und die Startseite angezeigt wird (Body-Klassen gems-gestaltung,
 * gems-gestaltung--a|b|c). Bisherige Gestaltung: diese Datei wird nicht geladen.
 *
 * Grundsätze: reine Dekoration als Pseudo-Elemente (kein Inhalt, nicht fokussierbar, pointer-events: none) hinter den
 * Inhalten; keine Muster hinter Fließtext oder Bedienelementen (nur an äußeren Rändern, im Leerraum der Abschnitte oder
 * hinter deckenden weißen Karten); kein waagerechter Überlauf (overflow-x: clip nur an den dekorierten Abschnitten,
 * Inhalte liegen innerhalb der Abschnittsränder); mobil reduziert; im Druck, bei erzwungenen Farben und bei
 * „mehr Kontrast“ ausgeblendet. Stärke: Stufe Dezent/Deutlich der Schulmerkmale.
 *
 * Konzept, Projektkoordination und technische Betreuung: Sebastian J. · Schul-IT Landkreis St. Wendel
 */

/* ---------- gemeinsame Grundlage ---------- */
.gems-gestaltung {
	/* Breite des äußeren Randes neben der breiten Inhaltsspalte (Abschnitte sind seitenbreit) */
	--gems-g-rand: max(var(--wp--style--root--padding-left, 1rem), calc((100vw - var(--wp--style--global--wide-size, 1320px)) / 2));
	--gems-g-deko: 0.75;
	--gems-g-mass: 1;
}
.gems-gestaltung.gems-schulmerkmale--deutlich { --gems-g-deko: 1; --gems-g-mass: 1.22; }

.gems-gestaltung .gems-main--startseite .gems-news,
.gems-gestaltung .gems-main--startseite .gems-schwerpunkte,
.gems-gestaltung .gems-main--startseite .gems-partner,
.gems-gestaltung .gems-engagement {
	position: relative;
	isolation: isolate;
	overflow-x: clip;
}
/* Die D1-Randakzente am Abschnitt „Einblicke“ werden durch die gewählte Gestaltung ersetzt (keine doppelten Sprayer). */
.gems-gestaltung .gems-main--startseite .gems-news::before,
.gems-gestaltung .gems-main--startseite .gems-news::after { content: none; }

.gems-gestaltung .gems-main--startseite .gems-news > *,
.gems-gestaltung .gems-main--startseite .gems-schwerpunkte > *,
.gems-gestaltung .gems-main--startseite .gems-partner > *,
.gems-gestaltung .gems-engagement > * { position: relative; }

/* Beitragskarten auf ruhigem, deckendem weißem Grund */
.gems-gestaltung .gems-news .gems-postcard {
	background: #fff;
	border-radius: var(--gems-radius);
	box-shadow: 0 1px 2px rgba(24, 54, 90, 0.07), 0 8px 22px rgba(24, 54, 90, 0.07);
}
.gems-gestaltung .gems-news .gems-postcard__image { border-radius: var(--gems-radius) var(--gems-radius) 0 0; }
.gems-gestaltung .gems-news .gems-postcard__body { padding: 1rem 1.15rem 1.25rem; }

/* ==========================================================================
 * A – Schulmuster
 * ========================================================================== */
.gems-gestaltung--a { --gems-g-deko: 0.92; }
.gems-gestaltung--a .gems-main--startseite .gems-news { background: #EDF6F8; }
.gems-gestaltung--a .gems-main--startseite .gems-news::before,
.gems-gestaltung--a .gems-main--startseite .gems-news::after,
.gems-gestaltung--a .gems-main--startseite .gems-schwerpunkte::before,
.gems-gestaltung--a .gems-main--startseite .gems-schwerpunkte::after,
.gems-gestaltung--a .gems-main--startseite .gems-partner::before {
	content: "";
	display: block;
	position: absolute;
	z-index: -1;
	pointer-events: none;
	background-repeat: no-repeat;
	opacity: var(--gems-g-deko);
}
/* Versetzte offene Quadrate an den beiden unteren Ecken des Abschnitts: sichtbar im äußeren Rand und im Leerraum
   unter den Karten (oberer Teil liegt hinter den deckenden Karten), enden vor der nächsten Überschrift. */
.gems-gestaltung--a .gems-main--startseite .gems-news::before {
	--w: calc(clamp(10rem, 14vw, 14rem) * var(--gems-g-mass));
	inset: auto auto -3rem calc(var(--gems-g-rand) - var(--w) * 0.62);
	width: var(--w);
	height: var(--w);
	background-image: url("../img/spray-blau-punkte.svg"), url("../img/gestaltung-a-quadrate.svg");
	background-size: 34% auto, contain;
	background-position: 100% 100%, center;
}
.gems-gestaltung--a .gems-main--startseite .gems-news::after {
	--w: calc(clamp(9rem, 12.5vw, 12.5rem) * var(--gems-g-mass));
	inset: auto calc(var(--gems-g-rand) - var(--w) * 0.6) -2.5rem auto;
	width: var(--w);
	height: var(--w);
	background-image: url("../img/gestaltung-a-quadrate.svg");
	background-size: contain;
	background-position: center;
	transform: scaleX(-1) rotate(-6deg);
}
/* „Was uns ausmacht“ bleibt weiß: ein Farbakzent oben rechts im Leerraum neben der Überschrift … */
.gems-gestaltung--a .gems-main--startseite .gems-schwerpunkte::before {
	--w: calc(clamp(6rem, 9vw, 9rem) * var(--gems-g-mass));
	inset: 3rem calc(var(--gems-g-rand) - var(--w) * 0.8) auto auto;
	width: var(--w);
	height: var(--w);
	background-image: url("../img/spray2-gelb-klein.svg");
	background-size: contain;
}
/* … und ein gezeichneter Trenner zum Partnerbereich */
.gems-gestaltung--a .gems-main--startseite .gems-schwerpunkte::after {
	inset: auto var(--gems-g-rand) 0 var(--gems-g-rand);
	height: 18px;
	background-image: url("../img/gestaltung-trenner.svg");
	background-size: 100% 100%;
	opacity: 1;
}
/* Partner: kleiner türkisfarbener Spritzer am linken Rand unten */
.gems-gestaltung--a .gems-main--startseite .gems-partner::before {
	--w: calc(clamp(5rem, 7vw, 7rem) * var(--gems-g-mass));
	inset: auto auto 1rem calc(var(--gems-g-rand) - var(--w) * 0.8);
	width: var(--w);
	height: var(--w);
	background-image: url("../img/spray2-tuerkis-klein.svg");
	background-size: contain;
}

/* ==========================================================================
 * B – Fotohintergrund (genau ein Abschnitt; Standard „Einblicke ins Schulleben“)
 * ========================================================================== */
.gems-gestaltung--b {
	--gems-g-schleier-oben: 0.78;
	--gems-g-schleier-mitte: 0.86;
}
.gems-gestaltung--b.gems-schulmerkmale--deutlich {
	--gems-g-schleier-oben: 0.66;
	--gems-g-schleier-mitte: 0.78;
}
.gems-gestaltung--foto-news .gems-main--startseite .gems-news,
.gems-gestaltung--foto-schwerpunkte .gems-main--startseite .gems-schwerpunkte { background: #fff; }
.gems-gestaltung--foto-news .gems-main--startseite .gems-news::before,
.gems-gestaltung--foto-schwerpunkte .gems-main--startseite .gems-schwerpunkte::before {
	content: "";
	display: block;
	position: absolute;
	z-index: -1;
	inset: 0;
	width: auto;
	height: auto;
	pointer-events: none;
	background:
		linear-gradient(to bottom,
			#fff 0%,
			rgba(255, 255, 255, var(--gems-g-schleier-oben)) 14%,
			rgba(255, 255, 255, var(--gems-g-schleier-mitte)) 62%,
			#fff 100%),
		var(--gems-g-foto, none) var(--gems-g-foto-pos, 50% 25%) / cover no-repeat,
		#EEF5F7;
}
/* Ohne verfügbares Foto: ruhige helle Fläche, keine Fehlfläche */
.gems-gestaltung--ohne-foto.gems-gestaltung--foto-news .gems-main--startseite .gems-news::before,
.gems-gestaltung--ohne-foto.gems-gestaltung--foto-schwerpunkte .gems-main--startseite .gems-schwerpunkte::before {
	background: linear-gradient(to bottom, #fff 0%, #EEF5F7 14%, #F3F8FA 70%, #fff 100%);
}
/* Text direkt im Fotoabschnitt „Was uns ausmacht“: ruhiger deckender Untergrund ohne Layoutänderung */
.gems-gestaltung--foto-schwerpunkte .gems-main--startseite .gems-schwerpunkte .gems-features {
	background: rgba(255, 255, 255, 0.92);
	box-shadow: 0 0 0 clamp(0.75rem, 2vw, 1.5rem) rgba(255, 255, 255, 0.92);
	border-radius: 2px;
}
/* der jeweils andere Abschnitt: sehr helle Fläche mit wenigen bestehenden Schulakzenten */
.gems-gestaltung--foto-news .gems-main--startseite .gems-schwerpunkte { background: #F1F8F7; }
.gems-gestaltung--foto-schwerpunkte .gems-main--startseite .gems-news { background: var(--gems-surface); }
.gems-gestaltung--foto-news .gems-main--startseite .gems-schwerpunkte::before,
.gems-gestaltung--foto-news .gems-main--startseite .gems-schwerpunkte::after,
.gems-gestaltung--foto-schwerpunkte .gems-main--startseite .gems-news::after {
	content: "";
	display: block;
	position: absolute;
	z-index: -1;
	pointer-events: none;
	background: center / contain no-repeat;
	opacity: var(--gems-g-deko);
}
.gems-gestaltung--foto-news .gems-main--startseite .gems-schwerpunkte::before,
.gems-gestaltung--foto-schwerpunkte .gems-main--startseite .gems-news::after {
	--w: calc(clamp(6rem, 9vw, 9rem) * var(--gems-g-mass));
	inset: 0.5rem calc(var(--gems-g-rand) - var(--w) * 0.6) auto auto;
	width: var(--w);
	height: var(--w);
	background-image: url("../img/spray2-gelb-klein.svg");
}
.gems-gestaltung--foto-news .gems-main--startseite .gems-schwerpunkte::after {
	--w: calc(clamp(5rem, 7vw, 7.5rem) * var(--gems-g-mass));
	inset: auto auto 1.5rem calc(var(--gems-g-rand) - var(--w) * 0.85);
	width: var(--w);
	height: var(--w);
	background-image: url("../img/spray2-tuerkis-klein.svg");
}
.gems-gestaltung--b .gems-engagement { background: var(--gems-surface); }

/* ==========================================================================
 * C – Farbflächen und Pinselränder
 * ========================================================================== */
.gems-gestaltung--c {
	--gems-g-tuerkis: #E4F4F2;
	--gems-g-gelb: #FFF8E0;
	--gems-g-pinsel: 2.25rem;
}
.gems-gestaltung--c.gems-schulmerkmale--deutlich {
	--gems-g-tuerkis: #D8EFEC;
	--gems-g-gelb: #FFF3CC;
	--gems-g-pinsel: 2.75rem;
}
.gems-gestaltung--c .gems-main--startseite .gems-news,
.gems-gestaltung--c .gems-main--startseite .gems-partner { background: transparent; }
.gems-gestaltung--c .gems-main--startseite .gems-news::before,
.gems-gestaltung--c .gems-main--startseite .gems-news::after,
.gems-gestaltung--c .gems-main--startseite .gems-schwerpunkte::before,
.gems-gestaltung--c .gems-main--startseite .gems-schwerpunkte::after,
.gems-gestaltung--c .gems-main--startseite .gems-partner::before,
.gems-gestaltung--c .gems-main--startseite .gems-partner::after,
.gems-gestaltung--c .gems-engagement::after {
	content: "";
	display: block;
	position: absolute;
	z-index: -1;
	pointer-events: none;
	background-repeat: no-repeat;
}
/* Farbflächen mit weichen, unregelmäßigen Pinselrändern oben und unten (innerhalb des Abschnitts) */
.gems-gestaltung--c .gems-main--startseite .gems-news::before,
.gems-gestaltung--c .gems-main--startseite .gems-partner::before {
	inset: 0;
	width: auto;
	height: auto;
	background-color: var(--gems-g-tuerkis);
	background-image:
		radial-gradient(ellipse 40% 60% at 12% 30%, rgba(255, 255, 255, 0.35), transparent 70%),
		radial-gradient(ellipse 35% 55% at 82% 70%, rgba(119, 201, 187, 0.12), transparent 70%);
	-webkit-mask-image: url("../img/gestaltung-pinselrand-oben.svg"), linear-gradient(#000, #000), url("../img/gestaltung-pinselrand-unten.svg");
	mask-image: url("../img/gestaltung-pinselrand-oben.svg"), linear-gradient(#000, #000), url("../img/gestaltung-pinselrand-unten.svg");
	-webkit-mask-size: 100% var(--gems-g-pinsel), 100% calc(100% - var(--gems-g-pinsel) * 1.4), 100% var(--gems-g-pinsel);
	mask-size: 100% var(--gems-g-pinsel), 100% calc(100% - var(--gems-g-pinsel) * 1.4), 100% var(--gems-g-pinsel);
	-webkit-mask-position: top, center, bottom;
	mask-position: top, center, bottom;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}
.gems-gestaltung--c .gems-main--startseite .gems-partner::before {
	background-color: var(--gems-g-gelb);
	background-image: radial-gradient(ellipse 45% 70% at 85% 40%, rgba(255, 255, 255, 0.4), transparent 70%);
}
/* Randakzente rechts an „Einblicke“: blaue Schraffur und gelber Spritzer (unter der Überschriftenzeile) */
.gems-gestaltung--c .gems-main--startseite .gems-news::after {
	--w: calc(clamp(6rem, 9vw, 9.5rem) * var(--gems-g-mass));
	inset: 30% 0 12% auto;
	width: calc(var(--gems-g-rand) + var(--w) * 0.35);
	background-image: url("../img/gestaltung-schraffur.svg"), url("../img/spray2-gelb-klein.svg");
	background-size: calc(var(--w) * 0.8) auto, var(--w) auto;
	background-position: right 0.75rem top 0, right calc(var(--w) * -0.35) bottom 0;
	opacity: var(--gems-g-deko);
}
/* „Was uns ausmacht“ bleibt weiß: großes, sehr blasses offenes Quadrat am rechten Rand. Es liegt vollständig im
   äußeren Rand; reicht der Rand nicht, rückt es in den Leerraum neben der Überschrift (oberhalb der Merkmale) –
   hinter den Texten der Merkmale liegt nichts. */
.gems-gestaltung--c .gems-main--startseite .gems-schwerpunkte::before {
	--q: clamp(7rem, calc(var(--gems-g-rand) - 2rem), calc(18rem * var(--gems-g-mass)));
	top: 0.5rem;
	right: max(0.25rem, calc((var(--gems-g-rand) - var(--q)) / 2));
	width: var(--q);
	height: var(--q);
	background-image: url("../img/gestaltung-c-quadrat.svg");
	background-size: contain;
	background-position: center;
	opacity: var(--gems-g-deko);
}
/* zweiter, kleiner Akzent im Rand: blaue Schraffur unter dem Quadrat (nur bei breitem Rand sichtbar) */
.gems-gestaltung--c .gems-main--startseite .gems-schwerpunkte::after {
	top: calc(0.5rem + clamp(7rem, calc(var(--gems-g-rand) - 2rem), calc(18rem * var(--gems-g-mass))) + 1rem);
	right: 0.75rem;
	width: calc(var(--gems-g-rand) - 1.5rem);
	height: 5rem;
	background-image: url("../img/gestaltung-schraffur.svg");
	background-size: min(100%, 7rem) auto;
	background-position: center top;
	opacity: var(--gems-g-deko);
}
@media (max-width: 1499px) {
	.gems-gestaltung--c .gems-main--startseite .gems-schwerpunkte::after { display: none; }
}
/* Partner: gelber Spritzer links oben am Übergang (endet oberhalb der Überschrift), überwiegend im äußeren Rand */
.gems-gestaltung--c .gems-main--startseite .gems-partner::after {
	--w: calc(clamp(5rem, 8vw, 8rem) * var(--gems-g-mass));
	inset: calc(var(--w) * -0.6) auto auto calc(var(--gems-g-rand) - var(--w) * 0.7);
	width: var(--w);
	height: var(--w);
	background-image: url("../img/spray2-gelb-klein.svg");
	background-size: contain;
	opacity: var(--gems-g-deko);
}
/* Engagement (nur Startseite): kleiner türkisfarbener Spritzer rechts oben im Leerraum neben der Überschrift */
.gems-gestaltung--c .gems-engagement::after {
	--w: calc(clamp(4.5rem, 6vw, 6rem) * var(--gems-g-mass));
	inset: 0.25rem calc(var(--gems-g-rand) - var(--w) * 0.55) auto auto;
	width: var(--w);
	height: var(--w);
	background-image: url("../img/spray2-tuerkis-klein.svg");
	background-size: contain;
	opacity: var(--gems-g-deko);
}

/* ==========================================================================
 * Schmale Bildschirme: Randmuster reduzieren, Flächen behalten, kein zusätzlicher Platzbedarf
 * ========================================================================== */
@media (max-width: 1099px) {
	.gems-gestaltung--a .gems-main--startseite .gems-news::after { display: none; }
}
@media (max-width: 781px) {
	.gems-gestaltung { --gems-g-mass: 0.8; }
	.gems-gestaltung.gems-schulmerkmale--deutlich { --gems-g-mass: 0.9; }
	.gems-gestaltung--a .gems-main--startseite .gems-news::before {
		--w: 6rem;
		inset: auto auto -1.5rem -2.25rem;
		height: 6rem;
		background-image: url("../img/gestaltung-a-quadrate.svg");
		background-size: contain;
		background-position: center;
	}
	.gems-gestaltung--a .gems-main--startseite .gems-schwerpunkte::before { --w: 4.5rem; inset: 0.25rem -1.75rem auto auto; }
	.gems-gestaltung--a .gems-main--startseite .gems-partner::before { display: none; }
	/* Foto nur als oberes Band (kleine Bildgröße), darunter ruhiges Weiß; Überschrift und Link liegen auf schmalen
	   Bildschirmen dichter auf dem Foto – deshalb stärker aufgehellt */
	.gems-gestaltung--b { --gems-g-schleier-oben: 0.86; --gems-g-schleier-mitte: 0.9; }
	.gems-gestaltung--b.gems-schulmerkmale--deutlich { --gems-g-schleier-oben: 0.8; --gems-g-schleier-mitte: 0.86; }
	.gems-gestaltung--foto-news .gems-main--startseite .gems-news::before,
	.gems-gestaltung--foto-schwerpunkte .gems-main--startseite .gems-schwerpunkte::before { bottom: auto; height: min(100%, 26rem); }
	.gems-gestaltung--foto-news .gems-main--startseite .gems-schwerpunkte::after { display: none; }
	.gems-gestaltung--c { --gems-g-pinsel: 1.25rem; }
	.gems-gestaltung--c.gems-schulmerkmale--deutlich { --gems-g-pinsel: 1.5rem; }
	.gems-gestaltung--c .gems-main--startseite .gems-news::after,
	.gems-gestaltung--c .gems-main--startseite .gems-schwerpunkte::before,
	.gems-gestaltung--c .gems-engagement::after { display: none; }
	.gems-gestaltung--c .gems-main--startseite .gems-partner::after { --w: 4rem; inset: -0.75rem auto auto -1.5rem; }
}

/* ==========================================================================
 * Druck, erzwungene Farben, mehr Kontrast: keine Dekoration, keine Fotofläche
 * ========================================================================== */
@media print {
	.gems-gestaltung .gems-news::before, .gems-gestaltung .gems-news::after,
	.gems-gestaltung .gems-schwerpunkte::before, .gems-gestaltung .gems-schwerpunkte::after,
	.gems-gestaltung .gems-partner::before, .gems-gestaltung .gems-partner::after,
	.gems-gestaltung .gems-engagement::after { display: none !important; }
	.gems-gestaltung .gems-news, .gems-gestaltung .gems-schwerpunkte, .gems-gestaltung .gems-partner { background: none !important; }
	.gems-gestaltung .gems-news .gems-postcard, .gems-gestaltung .gems-features { box-shadow: none !important; }
}
@media (forced-colors: active), (prefers-contrast: more) {
	.gems-gestaltung .gems-news::before, .gems-gestaltung .gems-news::after,
	.gems-gestaltung .gems-schwerpunkte::before, .gems-gestaltung .gems-schwerpunkte::after,
	.gems-gestaltung .gems-partner::before, .gems-gestaltung .gems-partner::after,
	.gems-gestaltung .gems-engagement::after { display: none !important; }
}
@media (forced-colors: active) {
	.gems-gestaltung .gems-news .gems-postcard { border: 1px solid CanvasText; box-shadow: none; }
}