/* Schlanker Lade-Fortschrittsbalken oben am Viewport (wie der Startbalken bei Google/YouTube).
   Treiber: js/app/loading-bar.js. Zeigt sich beim ersten Seitenaufruf (Karte + Daten), kurz beim Nachladen
   der Kacheln (Zoom/Pan) und waehrend der Server-Routenberechnung. Rein dekorativ (pointer-events:none,
   aria-hidden), position:fixed -> beeinflusst kein Layout.
   Fuellung ueber WIDTH (nicht transform: scaleX -- das kam auf manchen Setups nicht durch). Gedecktes
   Bronze/Antik-Gold (passt zur Pergament-Optik), dunkel genug fuer Kontrast auf dem hellen Hintergrund. */
.avesmaps-loading-bar {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 4px;
	z-index: 2000000;
	pointer-events: none;
	opacity: 0;
	transition: opacity 250ms ease;
}

.avesmaps-loading-bar--active {
	opacity: 1;
}

.avesmaps-loading-bar__fill {
	height: 100%;
	width: 0%;
	background: linear-gradient(90deg, #6b3f10 0%, #a9741f 50%, #cf9a34 100%);
	box-shadow: 0 0 6px rgba(169, 116, 31, 0.5), 0 1px 2px rgba(0, 0, 0, 0.22);
	transition: width 200ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
	.avesmaps-loading-bar,
	.avesmaps-loading-bar__fill {
		transition-duration: 0ms;
	}
}