/**
 * WFX3D – Frontend-Styles.
 */

.wfx3d-viewer {
	position: relative;
	overflow: hidden;
	display: block;
	box-sizing: border-box;
	border-radius: 4px;
	/* Default-Hoehe aus Custom-Property (vom PHP inline gesetzt).
	   Aus dem Stylesheet, NICHT inline – sonst koennte die Media-Query
	   unten den Mobile-Wert nicht anwenden (Inline-Spezifitaet > MQ). */
	height: var(--wfx3d-h, 400px);
}

/* Responsive Hoehe: wenn der Container die Custom-Property --wfx3d-h-mobile
   gesetzt hat, wird sie unterhalb von 768px Viewport-Breite verwendet
   (= Smartphones im Hoch- und Querformat). iPads im Hochformat (768px)
   bekommen weiterhin die Desktop-Hoehe. Greift nur bei Containern OHNE
   aspect-ratio (deren Hoehe wird automatisch aus der Breite abgeleitet). */
@media (max-width: 767px) {
	.wfx3d-viewer {
		height: var(--wfx3d-h-mobile, var(--wfx3d-h, 400px));
	}
}

.wfx3d-viewer .wfx3d-canvas {
	display: block;
	width: 100% !important;
	height: 100% !important;
	outline: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* Loader (zentrierter Spinner mit Beschriftung). */
.wfx3d-viewer .wfx3d-loader {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	z-index: 2;
	pointer-events: none;
	color: #555;
	font-size: 14px;
	text-align: center;
}

/* Loader-Text + Prozentzahl. */
.wfx3d-viewer .wfx3d-loader-text {
	font-variant-numeric: tabular-nums; /* Ziffern wackeln nicht beim Hochzaehlen */
	font-size: 13px;
	letter-spacing: 0.2px;
	color: #444;
}
.wfx3d-viewer .wfx3d-loader-percent {
	display: inline-block;
	min-width: 3.5em;
	text-align: left;
	margin-left: 6px;
	color: rgb(0, 96, 124);
	font-weight: 600;
}
.wfx3d-viewer .wfx3d-loader-percent:empty {
	display: none;
}

/* Progress-Bar – schmal, modern, mit Brand-Akzent. */
.wfx3d-viewer .wfx3d-progress {
	width: 60%;
	max-width: 240px;
	min-width: 140px;
	height: 3px;
	background: rgba(0, 0, 0, 0.08);
	border-radius: 999px;
	overflow: hidden;
	position: relative;
}
.wfx3d-viewer .wfx3d-progress-bar {
	height: 100%;
	width: 0;
	background: rgb(0, 96, 124);
	border-radius: inherit;
	transform-origin: left center;
	/* Smooth wachsen statt zucken. */
	transition: width 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
	will-change: width;
}

/* Indeterminate-Mode: animierter „Sweep", wenn die Gesamtgroesse unbekannt ist. */
.wfx3d-viewer .wfx3d-progress-indeterminate .wfx3d-progress-bar {
	width: 35%;
	transition: none;
	animation: wfx3d-progress-sweep 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes wfx3d-progress-sweep {
	0%   { transform: translateX(-100%); }
	100% { transform: translateX(285%); } /* 100% / 0.35 ~ 285% bis komplett rechts raus */
}

/* Fallback-Hinweis bei fehlendem WebGL oder Lade-Fehler. */
.wfx3d-viewer .wfx3d-fallback {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	z-index: 3;
	color: #444;
	background: rgba(255, 255, 255, 0.92);
	font-size: 14px;
	line-height: 1.4;
	text-align: center;
}

/* Admin-Hinweis (nur für eingeloggte Redakteure sichtbar). */
.wfx3d-admin-notice {
	display: block;
	padding: 12px 16px;
	background: #fff3cd;
	border: 1px solid #ffeeba;
	color: #856404;
	border-radius: 4px;
	font-size: 14px;
}

/* Reset-Button rechts oben. */
.wfx3d-viewer .wfx3d-reset-btn {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 4;
	width: 32px;
	height: 32px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.85);
	color: #333;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 4px;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.15s ease;
}

.wfx3d-viewer .wfx3d-reset-btn:hover,
.wfx3d-viewer .wfx3d-reset-btn:focus {
	background: rgba(255, 255, 255, 1);
	outline: none;
	transform: scale(1.05);
}

.wfx3d-viewer .wfx3d-reset-btn:focus-visible {
	box-shadow: 0 0 0 2px #2271b1;
}

/* HQ-Toggle-Button: rechts neben dem Reset-Button (oder am rechten Rand,
   falls kein Reset-Button da ist).
   Default-Style: dezent, wie ein Pill, mit „HQ"-Schrift.
   Aktiv-Style: Brand-Blau-Hintergrund, weisser Text. */
.wfx3d-viewer .wfx3d-hq-btn {
	position: absolute;
	top: 8px;
	right: 48px; /* 32px Reset-Btn + 8px gap + 8px Rand */
	z-index: 4;
	min-width: 36px;
	height: 32px;
	padding: 0 9px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.85);
	color: #333;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 4px;
	cursor: pointer;
	font-family: inherit;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.5px;
	line-height: 1;
	transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.wfx3d-viewer .wfx3d-hq-btn:hover,
.wfx3d-viewer .wfx3d-hq-btn:focus {
	background: rgba(255, 255, 255, 1);
	outline: none;
	transform: scale(1.05);
}

.wfx3d-viewer .wfx3d-hq-btn:focus-visible {
	box-shadow: 0 0 0 2px #2271b1;
}

.wfx3d-viewer .wfx3d-hq-btn-active {
	background: rgb(0, 96, 124);
	color: #fff;
	border-color: rgb(0, 96, 124);
}

.wfx3d-viewer .wfx3d-hq-btn-active:hover,
.wfx3d-viewer .wfx3d-hq-btn-active:focus {
	background: rgb(0, 76, 100); /* etwas dunkler bei Hover */
}

.wfx3d-viewer .wfx3d-hq-btn:disabled {
	opacity: 0.6;
	cursor: wait;
}

/* Wenn kein Reset-Button da ist, klebt der HQ-Button am rechten Rand.
   Wir nutzen `:has()` (alle modernen Browser ab 2023). Bei sehr alten
   Browsern bleibt der 48px-Abstand als gutmuetiger Fallback. */
.wfx3d-viewer:not(:has(.wfx3d-reset-btn)) .wfx3d-hq-btn {
	right: 8px;
}

/* Bei sehr kleinen Containern den Reset-Button etwas schrumpfen. */
@media (max-width: 480px) {
	.wfx3d-viewer .wfx3d-reset-btn {
		width: 28px;
		height: 28px;
	}
}

/* ----------------------------------------------------------------------------
 * Credit-Zeile: Modell-Ersteller (links) und WFX3D-Branding (rechts).
 * Liegt unten im Viewer, halbtransparenter Hintergrund, klickbar.
 * -------------------------------------------------------------------------- */

.wfx3d-viewer .wfx3d-credits {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 6px 10px;
	pointer-events: none; /* Container ignoriert Klicks – nur Kinder reagieren. */
	font-size: 11px;
	line-height: 1.2;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif;
	/* Dezente Lesbarkeit auf jedem Hintergrund: zarter Halo um die Schrift,
	   ohne sichtbaren Box-Hintergrund. Funktioniert sowohl auf hellen als
	   auch auf dunklen Modellen. */
	color: #555;
	text-shadow:
		0 0 2px rgba(255, 255, 255, 0.85),
		0 0 6px rgba(255, 255, 255, 0.6);
}

.wfx3d-viewer .wfx3d-credit-author {
	pointer-events: auto;
	max-width: 65%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wfx3d-viewer .wfx3d-credit-author a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: rgba(85, 85, 85, 0.4);
	text-underline-offset: 2px;
}

.wfx3d-viewer .wfx3d-credit-author a:hover,
.wfx3d-viewer .wfx3d-credit-author a:focus {
	text-decoration-color: rgba(85, 85, 85, 0.9);
}

/* Debug-Overlay: oben links, kompakt, monospace, Brand-Akzent. */
.wfx3d-viewer .wfx3d-debug {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 10;
	padding: 6px 9px;
	background: rgba(0, 0, 0, 0.78);
	color: #fff;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	font-size: 11px;
	line-height: 1.45;
	border-radius: 4px;
	pointer-events: none;
	letter-spacing: 0.2px;
	border-left: 2px solid rgb(0, 96, 124);
	min-width: 130px;
	font-variant-numeric: tabular-nums;
}

.wfx3d-viewer .wfx3d-debug-row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
}

.wfx3d-viewer .wfx3d-debug-label {
	color: rgba(255, 255, 255, 0.55);
}

.wfx3d-viewer .wfx3d-debug-value {
	color: #fff;
	font-weight: 600;
}

/* FPS-Wertfarbe je nach Bereich. */
.wfx3d-viewer .wfx3d-debug-fps-good { color: #4ade80; }   /* >= 50 */
.wfx3d-viewer .wfx3d-debug-fps-ok   { color: #fbbf24; }   /* 30..50 */
.wfx3d-viewer .wfx3d-debug-fps-bad  { color: #f87171; }   /*  < 30 */

/* Wenn kein Author gesetzt ist, schiebt der leere Platzhalter das Branding
   nach rechts – wir nutzen margin-left:auto. */
.wfx3d-viewer .wfx3d-brand {
	pointer-events: auto;
	margin-left: auto;
	display: inline-flex;
	align-items: baseline;
	gap: 0;
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.5px;
	line-height: 1;
	text-decoration: none;
	transition: opacity 0.15s ease;
	opacity: 0.85;
}

.wfx3d-viewer .wfx3d-brand:hover,
.wfx3d-viewer .wfx3d-brand:focus {
	opacity: 1;
	outline: none;
}

.wfx3d-viewer .wfx3d-brand:focus-visible {
	box-shadow: 0 0 0 2px rgba(0, 96, 124, 0.6);
	border-radius: 2px;
}

/* Farbgebung der Buchstaben: W in WORLDGRAFX-Blau, FX und 3D im neutralen
   Mittelgrau, damit das Branding zur dezenten Credit-Zeile passt. */
.wfx3d-viewer .wfx3d-brand-w {
	color: rgb(0, 96, 124);  /* W – WORLDGRAFX-Blau */
}
.wfx3d-viewer .wfx3d-brand-fx {
	color: #555;             /* FX – Mittelgrau */
}
.wfx3d-viewer .wfx3d-brand-3d {
	color: rgb(0, 96, 124);  /* 3D – ebenfalls Brand-Blau, damit das W…3D-Klammer-Effekt entsteht */
	margin-left: 2px;
}