/* =========================================================================
   Wegweiser – Frontend-Styles
   Einfarbige azurblaue Pfeil-Wegweiser an einem langen grauen Pfosten.
   Richtung pro Schild links/rechts, leicht unterschiedliche Neigungen.
   ========================================================================= */

.wgw-board {
	--wgw-blue: #0090d0;      /* Azurblau (einfarbig, wie das Viereck im Logo) */
	--wgw-wall: #bdc8ce;      /* helles Grau des Pfostens */
	--wgw-text: #ffffff;      /* Textfarbe */
	--wgw-h: calc(48px * var(--wgw-scale, 1));            /* Höhe eines Wegweisers */
	--wgw-point: calc(30px * var(--wgw-scale, 1));        /* Länge der Pfeilspitze */
	--wgw-gap: calc(8px * var(--wgw-scale, 1));           /* Abstand zwischen Schildern */
	--wgw-post-w: calc(150px * var(--wgw-scale, 1));      /* Breite des Pfostens */
	--wgw-post-left: calc(26px * var(--wgw-scale, 1));    /* Einzug / Überstand der Schilder */
	--wgw-post-extend: calc(230px * var(--wgw-scale, 1)); /* Länge des Pfostens unter dem letzten Schild */
	--wgw-tilt: 0deg;         /* optionale Gesamt-Neigung (0 = gerade) */

	position: relative;
	box-sizing: border-box;
	font-family: inherit;
	margin: 10px 6px;

	/* Standard = rechts-Modus: Flex-Spalte, Pfosten links */
	display: flex;
	flex-direction: column;
	gap: var(--wgw-gap);
	padding: calc(28px * var(--wgw-scale, 1)) calc(46px * var(--wgw-scale, 1)) var(--wgw-post-extend) 0;

	transform: rotate(var(--wgw-tilt));
	transform-origin: 70px 40px;
}

/* --- Der lange graue Pfosten ------------------------------------------- */
.wgw-board::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: var(--wgw-post-w);
	z-index: 1;
	background: linear-gradient(90deg,
		color-mix(in srgb, var(--wgw-wall) 88%, #000) 0%,
		color-mix(in srgb, var(--wgw-wall) 100%, #fff) 42%,
		var(--wgw-wall) 72%,
		color-mix(in srgb, var(--wgw-wall) 90%, #000) 100%);
	box-shadow:
		0 18px 34px rgba(0, 0, 0, 0.14),
		inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}

/* --- Modus RECHTS (Pfosten links) -------------------------------------- */
.wgw-mode-right::before { left: var(--wgw-post-left); }
.wgw-mode-right .wgw-sign { align-self: flex-start; transform-origin: left center; }
.wgw-mode-right .wgw-sign:nth-child(even) { margin-left: -10px; }

/* --- Modus LINKS (Pfosten rechts) -------------------------------------- */
.wgw-mode-left {
	padding: calc(28px * var(--wgw-scale, 1)) 0 var(--wgw-post-extend) calc(46px * var(--wgw-scale, 1));
}
.wgw-mode-left::before { right: var(--wgw-post-left); }
.wgw-mode-left .wgw-sign { align-self: flex-end; transform-origin: right center; }
.wgw-mode-left .wgw-sign:nth-child(even) { margin-right: -10px; }

/* --- Modus GEMISCHT (Pfosten mittig, Schilder nach beiden Seiten) ------- */
.wgw-mode-mixed {
	display: grid;
	grid-template-columns: 1fr var(--wgw-post-w) 1fr;
	row-gap: var(--wgw-gap);
	align-items: center;
	padding: calc(28px * var(--wgw-scale, 1)) calc(46px * var(--wgw-scale, 1)) var(--wgw-post-extend) calc(46px * var(--wgw-scale, 1));
}
.wgw-mode-mixed::before { left: 50%; transform: translateX(-50%); }
.wgw-mode-mixed .wgw-right {
	grid-column: 2 / 4;
	justify-self: start;
	margin-left: calc(-1 * var(--wgw-post-left));
	transform-origin: left center;
}
.wgw-mode-mixed .wgw-left {
	grid-column: 1 / 3;
	justify-self: end;
	margin-right: calc(-1 * var(--wgw-post-left));
	transform-origin: right center;
}

/* --- Logo unten im Pfosten --------------------------------------------- */
.wgw-logo {
	position: absolute;
	z-index: 3;
	bottom: calc(10px * var(--wgw-scale, 1));
	width: auto;
	height: auto;
	max-width: calc(var(--wgw-post-w) * 0.82);
	max-height: calc(var(--wgw-post-extend) - 18px); /* passt sich der Pfostenlänge an, überlappt nie die Pfeile */
	transform: translateX(-50%);
	pointer-events: none;
}
.wgw-mode-right .wgw-logo { left: calc(var(--wgw-post-left) + var(--wgw-post-w) / 2); }
.wgw-mode-left  .wgw-logo { left: calc(100% - var(--wgw-post-left) - var(--wgw-post-w) / 2); }
.wgw-mode-mixed .wgw-logo { left: 50%; }

/* --- Ein Wegweiser ------------------------------------------------------ */
.wgw-sign {
	--rot: 0deg;
	position: relative;
	z-index: 2;
	display: inline-block;
	min-width: calc(var(--wgw-post-left) + var(--wgw-post-w) + 54px * var(--wgw-scale, 1));
	text-decoration: none;
	filter: drop-shadow(2px 6px 5px rgba(0, 0, 0, 0.26));
	transform: rotate(var(--rot));
	transition: transform 0.16s ease, filter 0.16s ease;
}

/* leicht unterschiedliche Neigungen -> wirkt lebendiger, nicht steif */
.wgw-sign:nth-child(5n + 1) { --rot: -1.3deg; }
.wgw-sign:nth-child(5n + 2) { --rot: 0.8deg; }
.wgw-sign:nth-child(5n + 3) { --rot: -0.5deg; }
.wgw-sign:nth-child(5n + 4) { --rot: 1.2deg; }
.wgw-sign:nth-child(5n + 5) { --rot: -0.9deg; }

/* die „Seite" wird für den flachen Look nicht genutzt */
.wgw-sign__side { display: none; }

.wgw-sign__face {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: var(--wgw-h);
	box-sizing: border-box;
	width: 100%;

	color: var(--wgw-text);
	font-weight: 800;
	font-size: calc(clamp(14px, 1.3vw, 18px) * var(--wgw-scale, 1));
	line-height: 1.05;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	white-space: nowrap;

	background: var(--wgw-blue); /* einfarbig, kein Verlauf */
}
.wgw-sign__label { position: relative; z-index: 1; }

/* --- Pfeil nach rechts -------------------------------------------------- */
.wgw-right .wgw-sign__face {
	clip-path: polygon(0 0, calc(100% - var(--wgw-point)) 0, 100% 50%, calc(100% - var(--wgw-point)) 100%, 0 100%);
	padding: calc(8px * var(--wgw-scale, 1)) calc(var(--wgw-point) + 22px * var(--wgw-scale, 1)) calc(8px * var(--wgw-scale, 1)) calc(22px * var(--wgw-scale, 1));
	justify-content: flex-start;
}

/* --- Pfeil nach links --------------------------------------------------- */
.wgw-left .wgw-sign__face {
	clip-path: polygon(var(--wgw-point) 0, 100% 0, 100% 100%, var(--wgw-point) 100%, 0 50%);
	padding: calc(8px * var(--wgw-scale, 1)) calc(22px * var(--wgw-scale, 1)) calc(8px * var(--wgw-scale, 1)) calc(var(--wgw-point) + 22px * var(--wgw-scale, 1));
	justify-content: flex-end;
}

/* --- Hover (Neigung bleibt erhalten) ----------------------------------- */
.wgw-sign:hover {
	transform: rotate(var(--rot)) translateY(-2px);
	filter: drop-shadow(2px 10px 7px rgba(0, 0, 0, 0.30));
}

/* --- Fallback ohne color-mix (sehr alte Browser) ----------------------- */
@supports not (background: color-mix(in srgb, #000 50%, #fff)) {
	.wgw-board::before { background: var(--wgw-wall); }
}

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 600px) {
	.wgw-board {
		--wgw-h: calc(42px * var(--wgw-scale, 1));
		--wgw-point: calc(24px * var(--wgw-scale, 1));
		--wgw-post-w: calc(96px * var(--wgw-scale, 1));
		--wgw-post-left: calc(18px * var(--wgw-scale, 1));
		--wgw-post-extend: calc(150px * var(--wgw-scale, 1));
	}
	.wgw-sign__face { font-size: calc(13px * var(--wgw-scale, 1)); }
}

/* =========================================================================
   Bühne: Vollflächiger Hintergrund + Video (Fernseher) + Wegweiser
   ========================================================================= */

.wgw-stage {
	position: relative;
	width: 100%;
	line-height: 0; /* verhindert Lücke unter dem Bild */
}

/* Vollbreite über die Seite ausbrechen */
.wgw-stage--full {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.wgw-stage__bg {
	display: block;
	width: 100%;
	height: auto;
}

/* Video auf dem Fernseher */
.wgw-stage__tv {
	position: absolute;
	z-index: 2;
	aspect-ratio: 16 / 9;
	background: #000;
	object-fit: cover;
	border: 0;
	box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
	transform-origin: center center;
}

/* Wegweiser auf der Bühne */
.wgw-stage__signpost {
	position: absolute;
	z-index: 3;
	line-height: normal;
	transform-origin: top left;
}
.wgw-stage__signpost .wgw-board {
	margin: 0;
}

/* Hinweis, wenn noch kein Hintergrund gesetzt ist */
.wgw-stage--empty {
	line-height: normal;
	padding: 48px 24px;
	text-align: center;
	color: #556;
	background: #eef2f5;
	border: 2px dashed #b6c2cb;
	border-radius: 8px;
	font-family: inherit;
}