/*
 * Helios 3D - Grundgestaltung der 3D-Szene
 *
 * Ebenen im Element (von hinten nach vorn):
 *   .h3d-buehne   Canvas, Vorschaubild, Bedienleiste (.h3d-hud)
 *   .h3d-inhalt   Oxygen-Elemente über der Szene (Überschrift, Text, Knopf)
 * Die Leiste liegt über dem Inhalt, weil .h3d-buehne keinen eigenen Stapelkontext bildet.
 *
 * Einstellbar über CSS-Variablen (setzt das Element selbst aus den Reglern):
 *   --h3d-hoehe, --h3d-hoehe-handy, --h3d-akzent, --h3d-inhalt-x, --h3d-inhalt-y,
 *   --h3d-inhalt-abstand, --h3d-oben, --h3d-horizont, --h3d-unten
 */

.h3d-szene {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	width: 100%;
	height: var(--h3d-hoehe, 70vh);
	min-height: 220px;
	--h3d-glas: rgba(16, 18, 22, 0.52);
	--h3d-glas-hover: rgba(16, 18, 22, 0.7);
	--h3d-linie: rgba(255, 255, 255, 0.16);
	--h3d-schrift: #f3f1ec;
	--h3d-akzent-standard: #e8b36a;
	background: linear-gradient(var(--h3d-oben, #e9e7e3), var(--h3d-horizont, #f4f2ee) 60%, var(--h3d-unten, #dcd8d1));
}

.h3d-szene--welt-dunkel { background: linear-gradient(var(--h3d-oben, #141619), var(--h3d-horizont, #24272c) 60%, var(--h3d-unten, #0b0c0e)); }
.h3d-szene--welt-abend { background: linear-gradient(var(--h3d-oben, #26334d), var(--h3d-horizont, #f0a466) 62%, var(--h3d-unten, #3b2b2a)); }
.h3d-szene--welt-nacht { background: linear-gradient(var(--h3d-oben, #03060c), var(--h3d-horizont, #1c2d44) 62%, var(--h3d-unten, #070b12)); }
.h3d-szene--welt-leer { background: linear-gradient(var(--h3d-oben, #101114), var(--h3d-horizont, #16181c) 60%, var(--h3d-unten, #0c0d0f)); }
.h3d-szene--welt-transparent { background: none; }

/* Helle Welten: helles Glas mit dunkler Schrift, sonst stehen graue Flecken auf dem Bild */
.h3d-szene--welt-studio,
.h3d-szene--welt-transparent {
	--h3d-glas: rgba(255, 255, 255, 0.62);
	--h3d-glas-hover: rgba(255, 255, 255, 0.86);
	--h3d-linie: rgba(20, 22, 26, 0.12);
	--h3d-schrift: #1d1f23;
}

@media (max-width: 767px) {
	.h3d-szene { height: var(--h3d-hoehe-handy, var(--h3d-hoehe, 70vh)); }
}

.h3d-szene:focus-visible {
	outline: 2px solid var(--h3d-akzent, var(--h3d-akzent-standard));
	outline-offset: -2px;
}

.h3d-buehne {
	position: absolute;
	inset: 0;
}

.h3d-canvas {
	position: absolute;
	inset: 0;
	display: block;
	width: 100% !important;
	height: 100% !important;
	opacity: 0;
	transition: opacity 0.9s ease;
	outline: none;
	-webkit-tap-highlight-color: transparent;
}

.h3d--bereit .h3d-canvas { opacity: 1; }

.h3d-poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 0.9s ease;
	pointer-events: none;
}

.h3d--bereit .h3d-poster { opacity: 0; }

/* Oxygen-Inhalt über der Szene */
.h3d-inhalt {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: var(--h3d-inhalt-y, flex-end);
	align-items: var(--h3d-inhalt-x, flex-start);
	gap: 12px;
	padding: var(--h3d-inhalt-abstand, clamp(20px, 4vw, 48px));
	padding-bottom: calc(var(--h3d-inhalt-abstand, clamp(20px, 4vw, 48px)) + 44px);
	pointer-events: none;
}

.h3d-inhalt > * { pointer-events: auto; }

/* Dunkle Welten: heller Text als Ausgangswert. Eine eigene Farbe am Element hat Vorrang. */
.h3d-szene--welt-dunkel .h3d-inhalt,
.h3d-szene--welt-abend .h3d-inhalt,
.h3d-szene--welt-nacht .h3d-inhalt,
.h3d-szene--welt-leer .h3d-inhalt {
	color: #f6f3ee;
	text-shadow: 0 1px 14px rgba(0, 0, 0, 0.35);
}

/* Leerer Inhalt im Builder: das "+" klein in die Ecke, damit die Szene sichtbar bleibt */
.h3d-inhalt > .breakdance-empty-container {
	min-height: 56px !important;
	height: 56px;
	width: 180px;
	opacity: 0.75;
}

/* Bedienung */
.h3d-hud {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	color: var(--h3d-schrift);
	font-family: inherit;
	font-size: 12px;
	line-height: 1.3;
	letter-spacing: 0.01em;
}

.h3d-hud [hidden] { display: none !important; }

.h3d-leiste {
	position: absolute;
	right: 14px;
	bottom: 14px;
	display: flex;
	gap: 6px;
	pointer-events: auto;
}

.h3d-leiste[data-position="links"] { right: auto; left: 14px; }

.h3d-knopf {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--h3d-linie);
	border-radius: 10px;
	background: var(--h3d-glas);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: var(--h3d-schrift);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.h3d-knopf svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.h3d-knopf:hover { background: var(--h3d-glas-hover); }

.h3d-knopf[aria-pressed="true"] {
	background: var(--h3d-akzent, var(--h3d-akzent-standard));
	border-color: transparent;
	color: #15171a;
}

.h3d-knopf:focus-visible {
	outline: 2px solid var(--h3d-akzent, var(--h3d-akzent-standard));
	outline-offset: 2px;
}

@media (pointer: coarse) {
	.h3d-knopf { width: 44px; height: 44px; }
}

.h3d-hinweis,
.h3d-meldung,
.h3d-laden,
.h3d-werte {
	margin: 0;
	border: 1px solid var(--h3d-linie);
	background: var(--h3d-glas);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.h3d-hinweis {
	position: absolute;
	left: 50%;
	top: 16px;
	transform: translate(-50%, -4px);
	max-width: calc(100% - 32px);
	padding: 7px 13px;
	border-radius: 999px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	opacity: 0;
	transition: opacity 0.35s ease, transform 0.35s ease;
}

.h3d-hinweis--an { opacity: 1; transform: translate(-50%, 0); }

/* Schmal: Hinweis über die Leiste, dort kollidiert er nicht mit den Messwerten */
@media (max-width: 560px) {
	.h3d-hinweis {
		top: auto;
		bottom: 72px;
		width: max-content;
		white-space: normal;
		text-align: center;
		border-radius: 14px;
	}
}

.h3d-laden {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: grid;
	justify-items: center;
	gap: 9px;
	padding: 12px 16px;
	border-radius: 12px;
	font-variant-numeric: tabular-nums;
}

.h3d-laden-balken {
	display: block;
	width: 150px;
	height: 2px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.2);
}

.h3d-laden-balken i {
	display: block;
	height: 100%;
	background: var(--h3d-akzent, var(--h3d-akzent-standard));
	transform: scaleX(0.08);
	transform-origin: left center;
	transition: transform 0.2s linear;
}

.h3d-meldung {
	position: absolute;
	left: 14px;
	bottom: 14px;
	max-width: min(420px, calc(100% - 28px));
	padding: 9px 13px;
	border-radius: 10px;
	pointer-events: auto;
}

.h3d-meldung--fest {
	z-index: 3;
	color: var(--h3d-schrift);
	font-size: 13px;
}

.h3d-werte {
	position: absolute;
	top: 14px;
	left: 14px;
	display: grid;
	gap: 3px;
	padding: 9px 12px;
	border-radius: 10px;
	font-variant-numeric: tabular-nums;
}

.h3d-werte[data-position="rechts"] { left: auto; right: 14px; }
.h3d-werte div { display: flex; justify-content: space-between; gap: 18px; }
.h3d-werte dt { opacity: 0.66; font-size: 11px; }
.h3d-werte dd { margin: 0; font-size: 12px; }

.h3d-vignette {
	position: absolute;
	inset: 0;
	opacity: 0;
	background: radial-gradient(ellipse at 50% 46%, transparent 52%, rgba(0, 0, 0, 0.6) 100%);
	pointer-events: none;
}

.h3d-alternativ {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.h3d-canvas,
	.h3d-poster,
	.h3d-hinweis,
	.h3d-laden-balken i { transition-duration: 1ms; }
}


/* Globale Tag-Regeln wie "h2 { color: #000 }" schlagen geerbte Farben. Das doppelte :is()
   ergibt die Spezifität zweier Tags (0,0,2): stärker als eine Tag-Regel, schwächer als jede
   Klasse, also auch als eine Farbe, die am Oxygen-Element selbst eingestellt ist. */
:where(.h3d-szene--welt-dunkel, .h3d-szene--welt-abend, .h3d-szene--welt-nacht, .h3d-szene--welt-leer) :where(.h3d-inhalt) :is(h1, h2, h3, h4, h5, h6, p, li, blockquote, figcaption):is(h1, h2, h3, h4, h5, h6, p, li, blockquote, figcaption) {
	color: inherit;
}