/* 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;
	}
}

/* ---- Was waehrend des Startlaufs wartet ----------------------------------------------------
   Owner 12.08.2026: „beim laden ist die seite nicht responsiv, kann man nicht buttons anzeigen
   nachdem alles geladen hat?" -- die Kartenknoepfe stehen sofort da, koennen aber nichts, solange
   keine Kartendaten geladen sind: die Suche findet nichts, das Auge schaltet Ebenen, die es noch
   nicht gibt, die Ansichts-Kachel ebenso. Sie kommen jetzt mit den Daten.
   Die Klasse setzt und entfernt js/app/loading-bar.js -- dieselbe Stelle, die den Balken fuehrt,
   und damit dieselbe Antwort auf „wann ist der Start vorbei?" samt ihrem 20-Sekunden-Netz.
   💣 `opacity`/`visibility`, nicht `display: none`: der Knopfbund wird gemessen
   (syncMapCornerStack schreibt --avesmaps-corner-stack aus seiner Hoehe), und ein ausgeblendeter
   Bund misst 0. Gleiche Begruendung wie beim Ausblenden hinter der offenen Infobox
   (css/features/infopanel.css).
   ⚠️ Der Knopfbund UND der Zoom (Owner 12.08.2026: „kannst du ausserdem die zoom +/- buttons in die
   nachladekaskade aufnehmen"). Beide wandern ohnehin schon gemeinsam, wenn die Infobox aufgeht
   (css/features/infopanel.css) -- sie warten jetzt auch gemeinsam. Am groben Zeiger ist der Zoom
   ganz ausgeblendet (css/layout/map-layout.css), dort greift die Regel auf nichts.
   ⚠️ Die beiden Randlaschen standen hier bis zum 12.08.2026 mit drin und sind wieder heraus (Owner:
   „ich meinte nicht, dass die tab-lasche nachgeladen wird") -- eine Lasche, die aufploppt, ist genau
   das Nachladen, das nicht gemeint war. Der Planer selbst faehrt stattdessen herein, siehe die Regel
   darunter.
   ⚠️ Kein Riegel gegen Tastaturbefehle: die Knoepfe sind nur unsichtbar, nicht abgeschaltet --
   was sie tun, tut auch der laufende Code weiter, sobald es etwas zu tun gibt. */
html.avesmaps-booting #map-corner-actions,
html.avesmaps-booting .leaflet-control-zoom {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.22s ease, visibility 0s linear 0.22s;
}

/* ---- Und der Routenplaner faehrt herein, wenn die Daten da sind ----------------------------
   Owner 12.08.2026: „das ganze panel von links nach rechts reinfaehrt, wenn das laden fertig ist."
   Startstellung ist ganz links draussen; faellt die Klasse, gleitet er auf seinen Platz. Die Dauer
   steht bei ihm selbst (css/layout/map-layout.css) -- hier steht nur, WO er anfaengt.
   💣 Die Lasche braucht ihre EIGENE Verschiebung. Sie steht NEBEN dem Panel, nicht darin (seit
   11.08.2026 -- als Kind des scrollenden #search war sie auf iOS an dessen Kasten gebunden und
   verschwand ganz; die Zusicherung dazu steht in js/app/__tests__/touch-scale.test.js). Ein
   `transform` am Panel erreicht sie deshalb nicht: gemessen blieb sie bei 350..380 stehen und
   schwebte frei auf der Karte, waehrend der Planer draussen war. Beide bewegen sich um dieselbe
   Panelbreite, also um denselben Token.
   💣 Am Telefon NICHT: dort startet der Planer eingeklappt (route-planner-toggle.js), es gibt also
   nichts hereinzufahren. Die Lasche wuerde nur doppelt nach aussen wandern und am Ende auf ihren
   Platz springen -- genau das Aufploppen, das hier vermieden werden soll.
   ⚠️ Bekannte Luecke, klein und bewusst: `avesmaps-phone` setzt runtime-state.js, das am ENDE des
   Body steht -- diese Datei laeuft im Kopf. Bis dahin gilt die Regel auch am Telefon. Der Planer
   selbst wird aber erst 750 Zeilen HTML vor runtime-state.js ueberhaupt geparst, das Fenster ist
   also wenige Millisekunden lang und liegt vor dem ersten Bild. Es zu schliessen hiesse, entweder
   die Ladereihenfolge umzustellen (sie ist ein Vertrag) oder die Telefon-Heuristik hier ein zweites
   Mal hinzuschreiben -- und dass es davon nur EINE gibt, ist eine Zusicherung mit eigenem Test. */
html:not(.avesmaps-phone).avesmaps-booting #search,
html:not(.avesmaps-phone).avesmaps-booting #toggle-button {
	transform: translateX(calc(-1 * var(--avesmaps-planner-width)));
}

/* ---- Der Startschleier ---------------------------------------------------------------------
   Owner 19.08.2026: „sollen die kacheln im hintergrund leicht weiss erscheinen waehrend im
   vordergrund zentriert mittig ein ladebalkenzirkel erscheint bis die labels geladen und die
   routenplanung verfuegbar ist". Entwurf:
   docs/superpowers/specs/2026-08-19-startladen-schleier-und-windrose-design.md
   Den Knoten baut js/app/loading-bar.js -- dieselbe Datei, die weiss, WANN der Startlauf vorbei
   ist; hier steht nur, WIE er aussieht. Damit haengt er an derselben einen Stelle wie der Balken,
   der Knopfbund und der Planer, samt ihrem 20-Sekunden-Netz.
   🔴 `pointer-events: none` ist ein Owner-Entscheid, keine Feinheit: Schieben und Zoomen gehen
   waehrend des Ladens weiter wie bisher. Wer das umdreht, sperrt den Besucher bei einem
   haengenden Ladevorgang 20 Sekunden aus.
   💣 Der z-index liegt UNTER dem des Balkens (2000000). Darueber verdeckte der Schleier genau den
   schmalen Streifen, der laut Auftrag bleiben soll -- der Test liest beide Zahlen und vergleicht.
   💣 `opacity`/`visibility`, nicht `display: none`: dieselbe Begruendung wie beim Knopfbund
   weiter oben -- aus `display: none` gibt es kein Ausblenden, nur ein Verschwinden. */
.avesmaps-boot-veil {
	position: fixed;
	inset: 0;
	z-index: 1999000;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	background: var(--color-boot-veil);
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.28s ease, visibility 0s linear 0.28s;
}
html.avesmaps-booting .avesmaps-boot-veil {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.28s ease, visibility 0s linear 0s;
}

.avesmaps-boot-veil__text {
	font-size: 14px;
	color: var(--color-text-strong);
	letter-spacing: 0.01em;
}

/* ---- Die Windrose im Schleier ----------------------------------------------------------------
   Gebaut in js/app/loading-bar.js (windroseMarkup); hier stehen ihre Farben und ihre Bewegung.
   💣 Die Farben stehen NUR hier. Das Markup traegt Klassen und keinen einzigen Farbwert -- ein
   Literal im JS-String faende kein CSS-Sweep je (AGENTS.md §12), und im dunklen Thema stuende es
   als schwarzer Fleck da. */
.avesmaps-boot-veil__rose {
	display: block;
	width: 64px;
	height: 64px;
}
.avesmaps-boot-veil__pale { fill: var(--color-boot-ring-pale); }
.avesmaps-boot-veil__ink { fill: var(--color-boot-ring-ink); }
.avesmaps-boot-veil__hub { fill: var(--color-accent-strong); }
.avesmaps-boot-veil__track { stroke: var(--color-boot-ring-track); }

/* 🔴 Das EINZIGE, was sich bewegt. Die Rose selbst steht -- eine kreiselnde Kompassrose liest sich
   als „verirrt", nicht als „laedt" (Owner 19.08.2026).
   💣 `transform-box: fill-box` ist tragend: ohne sie ist der Bezugspunkt einer Drehung bei einem
   SVG-Teilelement der ganze Zeichenbereich, und das Goldstueck liefe auf einer KREISBAHN um die
   Rose herum, statt sich an Ort und Stelle zu drehen. Das sieht aus wie ein Fehler im Pfad und
   ist keiner. */
.avesmaps-boot-veil__sweep {
	stroke: var(--color-accent-strong);
	transform-box: fill-box;
	transform-origin: center;
	animation: avesmaps-boot-sweep 1.5s linear infinite;
}

@keyframes avesmaps-boot-sweep {
	to { transform: rotate(360deg); }
}

/* ⚠️ Ein voellig stehender Kreis sagt nichts -- er saehe aus, als waere die Seite eingefroren,
   also genau nach dem, was er widerlegen soll. Statt der Drehung blendet er langsam auf und ab:
   das ist keine vestibulaere Bewegung und bleibt trotzdem ein Lebenszeichen. */
@keyframes avesmaps-boot-pulse {
	0%, 100% { opacity: 0.35; }
	50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.avesmaps-boot-veil__sweep {
		animation: avesmaps-boot-pulse 1.8s ease-in-out infinite;
	}
}

/* ---- Und die rechte Kante faehrt herein ------------------------------------------------------
   Owner 19.08.2026: „info bzw. editor panel ebenfalls rechts versteckt bleiben und nach links
   ausklappen sobald geladen ist" -- spiegelbildlich zum Planer weiter oben, gleiche 0,22s.
   Betroffen sind vier Flaechen: die beiden Rand-Laschen und die beiden Panels dahinter. Die
   Panels tragen ihre Startstellung ueber `.is-hidden` ohnehin schon; die Regel hier wirkt bei
   ihnen nur in dem einen Fall, der sonst durchfiele -- ein Panel, das im Edit-Modus bereits
   offen ist, waehrend der Startlauf noch laeuft.
   💣 `transform`, nicht `right`. `right` waere naheliegend -- beide Laschen haben schon eine
   right-Transition fuers Andocken an die Panelkante, und diese Datei laedt NACH css/styles.css
   (index.html:55/56), gewoenne bei gleicher Spezifitaet also sogar. Aber `right` IST hier bereits
   belegt: die Andockregeln in css/features/infopanel.css fahren die Laschen damit zwischen
   Bildschirm- und Panelkante hin und her. Eine zweite Bedeutung auf derselben Eigenschaft hiesse,
   dass beide Bewegungen sich gegenseitig ueberschreiben, sobald sich der Andockzustand waehrend
   des Startlaufs aendert. `transform` ist frei und kollidiert mit nichts.
   💣 Verschoben wird um 100% der EIGENEN Breite, nicht um eine Zahl: am Telefon ist die Lasche
   26px breit statt 30 (--avesmaps-tab-w im Finger-Block von tokens.css), und ein Token waere hier
   eine zweite Stelle, die das wissen muesste. */
html.avesmaps-booting .avesmaps-infopanel__handle,
html.avesmaps-booting .avesmaps-infopanel,
html.avesmaps-booting #review-panel {
	transform: translateX(100%);
}
/* 💣 Und DESHALB steht die Editor-Lasche nicht in der Regel darueber, obwohl es dieselbe Strecke
   ist: sie traegt schon `transform: rotate(180deg)` (css/features/review-panel.css). Ein
   danebengeschriebenes translateX ERSETZT die Drehung -- die Beschriftung stuende kopf. Und weil
   nach der Drehung ihre eigene x-Achse nach LINKS zeigt, muss es MINUS heissen: ein +100% schoebe
   sie ueber die Karte statt aus dem Bild. Beide Vorzeichen sind einzeln im Test festgenagelt. */
html.avesmaps-booting #review-panel-toggle {
	transform: rotate(180deg) translateX(-100%);
}
/* 💣 Steht ein Panel offen, docken die Laschen NICHT an der Bildschirmkante, sondern an der
   PANELkante (`right: var(--avesmaps-ip-w)`, css/features/infopanel.css). Die eigene Breite
   reicht dann nicht: sie muessen zusaetzlich um die Panelbreite weichen. Ohne das schwebt ein
   30x140-Knopf waehrend des ganzen Startlaufs frei auf der Karte und rueckt am Ende nur um seine
   eigene Breite -- wortgleich der Fehler, der weiter oben fuer die Planer-Lasche vermerkt ist.
   ⚠️ Das ist kein Randfall, sondern der VORGABEfall im Editor: ohne gespeicherten Zustand steht
   das Editor-Panel am Zeiger offen (restoreReviewPanelState in js/review/review-panels.js), und
   damit traegt <html> die Klasse `avesmaps-any-panel-open`, bevor der Startlauf endet. */
html.avesmaps-booting.avesmaps-any-panel-open .avesmaps-infopanel__handle {
	transform: translateX(calc(100% + var(--avesmaps-ip-w)));
}
html.avesmaps-booting.avesmaps-any-panel-open #review-panel-toggle {
	transform: rotate(180deg) translateX(calc(-100% - var(--avesmaps-ip-w)));
}