/* ZEYNAH — DIE ANLAGE VON ALLEN SEITEN
   ─────────────────────────────────────────────────────────────────────────
   08.09.2026. Gehoert zu `zeynah-anlage3d.js`.

   KEINE EIGENEN FARBEN. Jeder Wert hier ist eine Variable aus
   `zeynah-grundlage.css`. Das Farbgesetz vom 13.08. gilt auch fuer ein
   3D-Bild: kein Schwarz, kein reines Weiss, kein Braun. Die Szene selbst
   liest dieselben Variablen zur Laufzeit aus — siehe `palette()` im JS.

   Der Baustein sitzt IN einem vorhandenen Band, nicht in einem eigenen.
   Das Schachbrett zaehlt Baender, und ein zusaetzliches haette den
   Rhythmus der ganzen Seite verschoben.                                  */

.a3-huelle {
	margin: 28px 0 34px;
}

/* Die Buehne. Das Seitenverhaeltnis steht fest, damit beim Laden nichts
   springt — ein Container, der erst beim Start der Szene Hoehe bekommt,
   schiebt die halbe Seite nach unten. */
.a3-buehne {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 10;
	max-height: 560px;
	border-radius: 22px;
	overflow: hidden;
	border: 1px solid var(--zy-rand-4);
	background:
		radial-gradient(120% 90% at 50% 0%,
			rgba(var(--zy-tief-2-rgb), .55), transparent 70%),
		radial-gradient(90% 80% at 20% 100%,
			rgba(0, 113, 227, .12), transparent 65%),
		var(--zy-tief);
	box-shadow: 0 20px 48px -22px rgba(var(--zy-schatten), .55);
	cursor: grab;
	touch-action: pan-y;
}

.a3-buehne.a3-greift { cursor: grabbing; }

.a3-buehne canvas {
	display: block;
	width: 100%;
	height: 100%;
}

/* Was zu sehen ist, bevor die Szene laeuft — und was zu sehen bleibt,
   wenn sie nie laeuft. Eine Flaeche, die leer bleibt, sieht aus wie ein
   Fehler; ein Satz, der sagt was fehlt, ist einer. */
.a3-ersatz {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 24px;
	text-align: center;
	color: var(--zy-schwach);
	font-size: 14px;
	line-height: 1.55;
}

.a3-ersatz strong {
	color: var(--zy-blau-hell);
	font-weight: 600;
	font-size: 15px;
}

/* Die Bedienleiste — Glasknoepfe, wie ueberall sonst auch. */
.a3-leiste {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
	align-items: center;
}

.a3-knopf {
	appearance: none;
	font: inherit;
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	padding: 9px 14px;
	border-radius: 999px;
	cursor: pointer;
	color: var(--zy-blau-t);
	/* Creme, nicht Weiss. Die Grundlage macht helles Glas mit
	   rgba(240,233,221,.88) — reines Weiss ist seit dem 13.08. verboten
	   und wurde hier am 08.09. vom Farbwaechter gefunden. */
	background: rgba(250, 247, 242, .62);
	border: 1px solid var(--zy-rand-3);
	backdrop-filter: var(--zy-glas-blur);
	-webkit-backdrop-filter: var(--zy-glas-blur);
	transition: transform .18s ease, box-shadow .18s ease,
	            background .18s ease;
}

.a3-knopf:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 18px -10px rgba(var(--zy-schatten), .6);
}

.a3-knopf[aria-pressed="true"] {
	color: var(--zy-creme);
	background: var(--zy-blau-t);
	border-color: var(--zy-blau-t);
}

.zy-dunkel .a3-knopf {
	color: var(--zy-blau-hell);
	background: rgba(var(--zy-tief-2-rgb), .55);
	border-color: var(--zy-rand-1);
}

.zy-dunkel .a3-knopf[aria-pressed="true"] {
	color: var(--zy-tief);
	background: var(--zy-blau-hell);
}

.a3-hinweis {
	font-size: 12.5px;
	color: var(--zy-leise);
	margin: 10px 2px 0;
	line-height: 1.5;
}

/* Die Karte zum ausgewaehlten Bauteil. Sie liegt NEBEN der Buehne, nicht
   darueber: Ein Fenster ueber dem Bild verdeckt genau das, worueber es
   spricht. */
.a3-gitter {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
	gap: 18px;
	align-items: start;
}

@media (max-width: 860px) {
	.a3-gitter { grid-template-columns: 1fr; }
	.a3-buehne { aspect-ratio: 4 / 3; }
}

.a3-karte {
	border-radius: 18px;
	padding: 18px 18px 16px;
	border: 1px solid var(--zy-rand-4);
	background: rgba(240, 233, 221, .82);
	backdrop-filter: var(--zy-glas-blur);
	-webkit-backdrop-filter: var(--zy-glas-blur);
	box-shadow: 0 16px 36px -20px rgba(var(--zy-schatten), .5);
}

.zy-dunkel .a3-karte {
	background: rgba(var(--zy-tief-2-rgb), var(--zy-deckkraft-dunkel));
	border-color: var(--zy-rand-1);
}

.a3-karte-auge {
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--zy-blau-t);
	margin-bottom: 6px;
}

.a3-karte h3 {
	font-size: 19px;
	line-height: 1.25;
	margin: 0 0 8px;
	color: var(--zy-text-tief);
}

.a3-karte p {
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--zy-leise);
	margin: 0 0 12px;
}

.a3-feld {
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--zy-leise);
	margin: 14px 0 7px;
}

.a3-pillen {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.a3-pille {
	font-size: 12px;
	line-height: 1;
	padding: 6px 10px;
	border-radius: 999px;
	color: var(--zy-blau-t);
	border: 1px solid var(--zy-rand-4);
	background: rgba(0, 113, 227, .07);
}

.zy-dunkel .a3-pille {
	color: var(--zy-blau-hell);
	border-color: var(--zy-rand-1);
	background: rgba(127, 188, 255, .1);
}

/* Laeuft zu diesem Paket gerade eine echte Vergabe, steht sie hier. Sie
   kommt aus `ZEYNAH_INTEL_LIVE` — also aus TED, nicht aus dieser Datei. */
.a3-vergabe {
	margin-top: 14px;
	padding: 12px 13px;
	border-radius: 13px;
	border: 1px solid var(--zy-rand-3);
	background: rgba(0, 113, 227, .08);
}

.zy-dunkel .a3-vergabe {
	border-color: var(--zy-rand-1);
	background: rgba(127, 188, 255, .12);
}

.a3-vergabe-kopf {
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--zy-blau-t);
	margin-bottom: 5px;
}

.zy-dunkel .a3-vergabe-kopf { color: var(--zy-blau-hell); }

.a3-vergabe-titel {
	font-size: 13px;
	line-height: 1.45;
	color: var(--zy-text-tief);
	margin: 0 0 6px;
}

.a3-vergabe-fuss {
	font-size: 12px;
	color: var(--zy-leise);
	margin: 0;
}

.a3-liste {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 4px;
}

.a3-liste li {
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--zy-leise);
	padding-left: 15px;
	position: relative;
}

.a3-liste li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .55em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--zy-blau-t);
	opacity: .55;
}

.zy-dunkel .a3-liste li::before { background: var(--zy-blau-hell); }

/* Bewegung ist Beiwerk. Wer sie abbestellt hat, bekommt ein ruhiges Bild
   und verliert nichts an Inhalt. */
@media (prefers-reduced-motion: reduce) {
	.a3-knopf { transition: none; }
}

/* Die Auswahlreihe. Sie kam am 08.09. dazu, weil ein Rasterlauf zeigte,
   dass „Stromanschluss" in 560 Klicks genau einmal zu treffen war — und
   weil eine Szene, die nur auf Klicks ins Bild hoert, mit der Tastatur
   nicht bedienbar ist. */
.a3-wahl {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 10px;
}

.a3-wahl-knopf {
	appearance: none;
	font: inherit;
	font-size: 12px;
	line-height: 1;
	padding: 7px 11px;
	border-radius: 999px;
	cursor: pointer;
	color: var(--zy-blau-t);
	background: rgba(250, 247, 242, .55);
	border: 1px solid var(--zy-rand-4);
	transition: background .16s ease, color .16s ease, transform .16s ease;
}

.a3-wahl-knopf:hover { transform: translateY(-1px); }

.a3-wahl-knopf[aria-pressed="true"] {
	color: var(--zy-creme);
	background: var(--zy-blau-t);
	border-color: var(--zy-blau-t);
}

/* Die zwei Pakete ohne Bauwerk sind auswaehlbar, sehen aber anders aus —
   sonst sucht jemand im Bild nach einem Gebaeude, das es nicht gibt. */
.a3-wahl-knopf.a3-ohne-bau {
	border-style: dashed;
	opacity: .85;
}

.zy-dunkel .a3-wahl-knopf {
	color: var(--zy-blau-hell);
	background: rgba(var(--zy-tief-2-rgb), .5);
	border-color: var(--zy-rand-1);
}

.zy-dunkel .a3-wahl-knopf[aria-pressed="true"] {
	color: var(--zy-tief);
	background: var(--zy-blau-hell);
}