Pixel-Sonnensystem

Implementiere vollständig eine „interaktive Sonnensystem-Website im schwarzweißen Pixel-Art-Stil“ (rein statisch, lokal ausführbar, auf statischem Hosting bereitstellbar). Alle Anforderungen sind unten aufgeführt; setze sie entsprechend um und überprüfe jeden Punkt.

[1. Technische Basis]
1. Rein statische Website: importmap + natives ESM; three.js und alle Abhängigkeiten lokal eingebunden; kein CDN, kein Build-Schritt, kein Backend; Einstiegspunkt ist index.html.
2. Zweigleisige Asset-Strategie: Die Geometrie verwendet die integrierten Kugeln / parametrischen Meshes von three.js; Texturen verwenden echte astronomische Bilder (NASA Visible Earth, LRO-Mondkarten, SolarSystemScope), organisiert in drei Qualitätsstufen — Standard / HD 4K / Ultra 8K — mit einem Textur-Lademanager (Promise-Cache, Unterscheidung zwischen SRGB- und linearem Farbraum, Anisotropie ≤ 8, erneuter Versuch bei Fehlern und Rückfall auf die Standardstufe).
3. Renderer: Antialiasing, SRGB-Ausgabe, ACESFilmicToneMapping (Belichtung ≈ 1.05), DPR ≤ 2 (≤ 1.5 auf Mobilgeräten), Near Plane 0.002, schwarzer Szenenhintergrund.

[2. Szeneninhalt (alles Echtzeit-3D; keine als 3D ausgegebenen Bilder oder Videos)]
1. Objekte: Sonne + acht Planeten + Mond (gebunden rotiert, umkreist die Erde). Innere Planeten umkreisen schneller, äußere langsamer, rotieren mit proportional realen Geschwindigkeiten und haben reale Achsenneigungen (Saturn 27°, Uranus 82°).
2. Sonne: selbstleuchtende Kugel + schwacher Halo; ein Punktlicht zur Beleuchtung + schwaches Umgebungslicht.
3. Erde: Tag-/Nacht-Dualtexturen werden in Echtzeit über das „Skalarprodukt aus Normalen- und Sonnenrichtung“ umgeschaltet (Tag-Nacht-Grenze); Stadtlichter auf der Nachtseite leuchten selbst (separat umschaltbar); separate Wolkenhülle (1.006R, alphaMap) und atmosphärische Fresnel-Randlichthülle (1.025R, multipliziert mit einem Sonnenlichtfaktor) — alle drei Ebenen einzeln umschaltbar.
4. Saturn: Kugel und Ringe verwenden dieselbe 27°-Neigungsgruppe; der Ring ist ein parametrisches Mesh in der XZ-Ebene, UVs ordnen eine Langstreifen-Textur nach Radius zu, beidseitig, alphaTest ≈ 0.04, depthWrite = false.
5. Mond: 8K-Textur der Mondoberfläche (im Web 4K- / 8K-Stufen anbieten); die Nahbeleuchtung muss für ein realistisches Mittelgrau abgedunkelt werden.
6. Hintergrund: wenige feste Sternpunkte (keine große Nebeltextur).

[3. Interaktionssystem]
1. Objektauswahl: Klick im Katalog / Raycast-Klick in der Szene (kleine Objekte erhalten eine vergrößerte unsichtbare Auswahlkugel) / Wechsel vor-zurück.
2. Fokus-Kamera: Die Kamera bleibt kontinuierlich auf das bewegte Zielobjekt ausgerichtet (in jedem Frame synchron verschoben) und wird nie von der Umlaufbewegung mitgerissen; Betrachtungsabstand = Begrenzungsradius / Ansichtsfüllfaktor (Standard 0.7, Mond 0.78, Sonne 0.45 mit schwarzem Rand); weiche Ease-out-Übergänge über 850 ms, die das Ziel auch während des Übergangs in Echtzeit verfolgen; beim Ziehen übernimmt der Nutzer sofort (programmiertes Bewegen der Kamera abbrechen).
3. Ansichtsvorgaben: sechs Kamerapositionen — beleuchtete Seite / Tag-Nacht-Grenze / Polarregion / Rand / Nachtseite / Detail (aus Versätzen „Richtung zur Sonne × seitlich × oben“ zusammengesetzt; befindet sich das Ziel im Ursprung, eine feste Richtung verwenden, um eine Degeneration zum Nullvektor zu vermeiden).
4. Zeit und Anzeige: alles pausieren, Rotation separat umschaltbar, Umlauf separat umschaltbar, Geschwindigkeit 0–4×, Umlaufbahnen umschalten, Beschriftungen umschalten, Ansicht zurücksetzen; Rotations-/Umlaufzustände müssen stets exakt mit der UI synchron bleiben.

[4. Schwarzweiße UI im Pixel-Stil (angelehnt an careers.kimi.com, reines Schwarz/Weiß/Grau, kein Blau)]
1. Monospace-Schrift als Grundlage; Pixelschrift für Zahlen / kurze Überschriften / Navigation (OFL-lizenziert, selbst gehostet); klare Textschrift für chinesischen Fließtext.
2. Obere Leiste: SOLAR SYSTEM-Logo (englischer Text plus chinesischer Name) links, „Übersicht / Himmelskörper / Anzeigeeinstellungen“ rechts.
3. Himmelskörper-Auswahl: nach Stern / Planet / Mond gruppiert, zweistellige Nummerierung, aktuelles Element hervorgehoben (keine großen Farbflächen), scrollbar.
4. Namensschild unten links: Nummer (z. B. 05/10) + großer Titel (chinesischer Name + Englisch) + Typbezeichnung + eine poetische Zeile + Durchmesserdaten + „Details ansehen ↗“; im Übersichtsmodus „Größen und Entfernungen für die Darstellung angepasst“ anzeigen.
5. Untere Werkzeugleiste: Pause / Rotation / Umlauf / Geschwindigkeit / Umlaufbahnen / Ansicht zurücksetzen (Symbol + Kurztext) + Schrittsteuerung zurück/weiter (englischer Name des aktuellen Himmelskörpers in der Mitte).
6. Detailbereich (fährt rechts heraus): Einführung, wichtige Fakten (mit Einheiten und „ca.“-Kennzeichnungen), Beobachtungsfokus-Schaltflächen (jeweils an einen echten Kamera-/Ebenenzustand gebunden und mit „aktuell“), Datenquellen, weiterführende Links; der Einstellungsbereich ist in die Gruppen „Ansicht / Qualität“ unterteilt.
7. Ereignisdurchleitung: Die Vollbild-UI-Ebene verwendet pointer-events: none; nur Schaltflächen / Listen / Bereiche / Werkzeugleiste verwenden auto; das Scrollen innerhalb eines Bereichs darf nicht an die Canvas weitergegeben werden. Ersetze das Sonnensystem durch das Exoplanetensystem TRAPPIST-1: einen roten Zwerg und sieben Gesteinsplaneten. Behalte die UI im Pixel-Art-Stil, die Fokus-Kamera und die Zeitsteuerung bei und verwende für jeden Planeten die realen TRAPPIST-1-Parameter. [5. Verpixelter Einstieg und Bewegungseffekte]
1. Einstieg: Vollbild-Mondoberfläche mit 1-Bit-Bayer-Ordered-Dithering (Bildabtastung → Graustufenquantisierung → 4 Graustufen → 4×4-Matrix); die Dither-Blockgröße wird mit dem Ladefortschritt sanft von 14 px auf 1.5 px geschärft (der Fortschritt selbst ist die Ladeanzeige), mit zentriertem Titel in Pixelschrift, dunkler radialer Maske und einer Schaltfläche „Erkundung starten →“; der Einstieg erfordert einen Nutzerklick (kein automatischer Einstieg).
2. Ausstieg: Nach dem Klick blendet der Titel innerhalb von 220 ms aus, dann löst sich die Zahlenmatrix wellenförmig auf — eine diagonale Wellenfront läuft darüber (mit Störung pro Zelle), Pixelblöcke schrumpfen und blenden entlang des Wellengradienten aus, und nach etwa 800 ms erscheint die Sonnensystemübersicht.
3. Weitere Bewegungseffekte: Beim Wechseln von Himmelskörpern erscheinen großer Titel und poetische Zeile über einen Scramble-Decoding-Effekt (etwa 320/420 ms); Zeichen in Navigationsschaltflächen führen eine zweischichtige Rollbewegung aus (350 ms, 30 ms Staffelung pro Zeichen, bei Hover und Fokus ausgelöst); Bereiche wechseln mit Deckkraft + 12 px Versatz (etwa 220 ms); der Titel des Detailbereichs wird durch eine spärliche Blockmaske enthüllt (≤ 700 ms).
4. Bei prefers-reduced-motion wird alles auf direkte Wechsel reduziert.

[6. Informationsverbesserungen]
1. Beobachtungsfadenkreuz: Ein dünnes Fadenkreuz folgt der Maus; oben rechts werden die LAT/LON-Koordinaten der anvisierten Planetenoberfläche live angezeigt (auf Touchscreens ausgeblendet).
2. Katalog-Vorschaukarte beim Hover (Name / Durchmesser / Entfernung zur Sonne / poetische Zeile).
3. Vollständige Tastatursteuerung: ←/→ Himmelskörper wechseln, ↑/↓ Dolly, Leertaste Pause, 1–0 direkt springen, O Übersicht, D Details, S Einstellungen, H Tastenkürzelkarte, Esc Bereiche schließen.
4. Beobachtungsprotokoll: Unten rechts erscheint ein scrollender Monospace-Eintrag der letzten 3 Aktionen.

[7. Mobilgeräte und Barrierefreiheit]
1. Horizontal scrollbarerer Katalog, wobei das ausgewählte Element automatisch in den Sichtbereich gescrollt wird; Details / Einstellungen als schließbare Bottom Sheets; Touch-Ziele ≥ 44 px; Anpassung an Safe Areas; Werkzeugleiste und Bereiche dürfen sich nicht überlappen.
2. Semantische Schaltflächen, korrektes aria-pressed / aria-selected, sichtbarer Fokus, Escape schließt Bereiche und gibt den Fokus an die auslösende Schaltfläche zurück, Ladezustand wird über eine schlanke Live-Region angekündigt.

[8. Abnahmekriterien (jeden Punkt testen)]
1. Der Pixel-Einstieg ist beim Start sichtbar; ein Klick löst ihn wellenförmig zur Übersicht auf (Sonne zentriert, Umlaufbahnen, Planetenbeschriftungen).
2. Alle zehn Himmelskörper nacheinander durchwechseln: Name / Katalogauswahl / Daten bleiben synchron, die Kamera verfolgt flüssig ohne das Ziel zu verlieren, keine schwarzen Kugeln, keine Shader-Kompilierfehler, keine 404-Fehler.
3. Die drei Ebenenschalter der Erde zeigen sichtbare Effekte, Saturns Ringe liegen in einer Ebene mit seinem Äquator, die Tag-Nacht-Grenze des Mondes wirkt natürlich ohne weiß auszuwaschen, und die Sonne ist eine Scheibe mit schwarzem Rand (keine Vollbild-Sonnenoberfläche).
4. Mit Screenshots auf Desktop 1440×900 und Smartphone 390×844 prüfen: keine Überdeckung, kein Überlauf; keine Konsolenfehler; bei aktiviertem Reduced Motion vollständig nutzbar.

Liste zuerst die Implementierungsreihenfolge auf (Szene → Interaktion → UI → Bewegung → Abnahme), liefere dann direkt ausführbare Dateien. Liefere keine halbfertigen Platzhalter und erfinde keine Assets oder Daten.

Implementiere vollständig eine „interaktive Sonnensystem-Website im schwarzweißen Pixel-Art-Stil“ (rein statisch, lokal ausführbar, auf statischem Hosting bereitstellbar). Alle Anforderungen sind unten aufgeführt; setze sie entsprechend um und überprüfe jeden Punkt.

[1. Technische Basis]
1. Rein statische Website: importmap + natives ESM; three.js und alle Abhängigkeiten lokal eingebunden; kein CDN, kein Build-Schritt, kein Backend; Einstiegspunkt ist index.html.
2. Zweigleisige Asset-Strategie: Die Geometrie verwendet die integrierten Kugeln / parametrischen Meshes von three.js; Texturen verwenden echte astronomische Bilder (NASA Visible Earth, LRO-Mondkarten, SolarSystemScope), organisiert in drei Qualitätsstufen — Standard / HD 4K / Ultra 8K — mit einem Textur-Lademanager (Promise-Cache, Unterscheidung zwischen SRGB- und linearem Farbraum, Anisotropie ≤ 8, erneuter Versuch bei Fehlern und Rückfall auf die Standardstufe).
3. Renderer: Antialiasing, SRGB-Ausgabe, ACESFilmicToneMapping (Belichtung ≈ 1.05), DPR ≤ 2 (≤ 1.5 auf Mobilgeräten), Near Plane 0.002, schwarzer Szenenhintergrund.

[2. Szeneninhalt (alles Echtzeit-3D; keine als 3D ausgegebenen Bilder oder Videos)]
1. Objekte: Sonne + acht Planeten + Mond (gebunden rotiert, umkreist die Erde). Innere Planeten umkreisen schneller, äußere langsamer, rotieren mit proportional realen Geschwindigkeiten und haben reale Achsenneigungen (Saturn 27°, Uranus 82°).
2. Sonne: selbstleuchtende Kugel + schwacher Halo; ein Punktlicht zur Beleuchtung + schwaches Umgebungslicht.
3. Erde: Tag-/Nacht-Dualtexturen werden in Echtzeit über das „Skalarprodukt aus Normalen- und Sonnenrichtung“ umgeschaltet (Tag-Nacht-Grenze); Stadtlichter auf der Nachtseite leuchten selbst (separat umschaltbar); separate Wolkenhülle (1.006R, alphaMap) und atmosphärische Fresnel-Randlichthülle (1.025R, multipliziert mit einem Sonnenlichtfaktor) — alle drei Ebenen einzeln umschaltbar.
4. Saturn: Kugel und Ringe verwenden dieselbe 27°-Neigungsgruppe; der Ring ist ein parametrisches Mesh in der XZ-Ebene, UVs ordnen eine Langstreifen-Textur nach Radius zu, beidseitig, alphaTest ≈ 0.04, depthWrite = false.
5. Mond: 8K-Textur der Mondoberfläche (im Web 4K- / 8K-Stufen anbieten); die Nahbeleuchtung muss für ein realistisches Mittelgrau abgedunkelt werden.
6. Hintergrund: wenige feste Sternpunkte (keine große Nebeltextur).

[3. Interaktionssystem]
1. Objektauswahl: Klick im Katalog / Raycast-Klick in der Szene (kleine Objekte erhalten eine vergrößerte unsichtbare Auswahlkugel) / Wechsel vor-zurück.
2. Fokus-Kamera: Die Kamera bleibt kontinuierlich auf das bewegte Zielobjekt ausgerichtet (in jedem Frame synchron verschoben) und wird nie von der Umlaufbewegung mitgerissen; Betrachtungsabstand = Begrenzungsradius / Ansichtsfüllfaktor (Standard 0.7, Mond 0.78, Sonne 0.45 mit schwarzem Rand); weiche Ease-out-Übergänge über 850 ms, die das Ziel auch während des Übergangs in Echtzeit verfolgen; beim Ziehen übernimmt der Nutzer sofort (programmiertes Bewegen der Kamera abbrechen).
3. Ansichtsvorgaben: sechs Kamerapositionen — beleuchtete Seite / Tag-Nacht-Grenze / Polarregion / Rand / Nachtseite / Detail (aus Versätzen „Richtung zur Sonne × seitlich × oben“ zusammengesetzt; befindet sich das Ziel im Ursprung, eine feste Richtung verwenden, um eine Degeneration zum Nullvektor zu vermeiden).
4. Zeit und Anzeige: alles pausieren, Rotation separat umschaltbar, Umlauf separat umschaltbar, Geschwindigkeit 0–4×, Umlaufbahnen umschalten, Beschriftungen umschalten, Ansicht zurücksetzen; Rotations-/Umlaufzustände müssen stets exakt mit der UI synchron bleiben.

[4. Schwarzweiße UI im Pixel-Stil (angelehnt an careers.kimi.com, reines Schwarz/Weiß/Grau, kein Blau)]
1. Monospace-Schrift als Grundlage; Pixelschrift für Zahlen / kurze Überschriften / Navigation (OFL-lizenziert, selbst gehostet); klare Textschrift für chinesischen Fließtext.
2. Obere Leiste: SOLAR SYSTEM-Logo (englischer Text plus chinesischer Name) links, „Übersicht / Himmelskörper / Anzeigeeinstellungen“ rechts.
3. Himmelskörper-Auswahl: nach Stern / Planet / Mond gruppiert, zweistellige Nummerierung, aktuelles Element hervorgehoben (keine großen Farbflächen), scrollbar.
4. Namensschild unten links: Nummer (z. B. 05/10) + großer Titel (chinesischer Name + Englisch) + Typbezeichnung + eine poetische Zeile + Durchmesserdaten + „Details ansehen ↗“; im Übersichtsmodus „Größen und Entfernungen für die Darstellung angepasst“ anzeigen.
5. Untere Werkzeugleiste: Pause / Rotation / Umlauf / Geschwindigkeit / Umlaufbahnen / Ansicht zurücksetzen (Symbol + Kurztext) + Schrittsteuerung zurück/weiter (englischer Name des aktuellen Himmelskörpers in der Mitte).
6. Detailbereich (fährt rechts heraus): Einführung, wichtige Fakten (mit Einheiten und „ca.“-Kennzeichnungen), Beobachtungsfokus-Schaltflächen (jeweils an einen echten Kamera-/Ebenenzustand gebunden und mit „aktuell“), Datenquellen, weiterführende Links; der Einstellungsbereich ist in die Gruppen „Ansicht / Qualität“ unterteilt.
7. Ereignisdurchleitung: Die Vollbild-UI-Ebene verwendet pointer-events: none; nur Schaltflächen / Listen / Bereiche / Werkzeugleiste verwenden auto; das Scrollen innerhalb eines Bereichs darf nicht an die Canvas weitergegeben werden. Füge einen Klassenraummodus mit vier Kapiteln hinzu — Stern, Gesteinsplaneten, Gasriesen, Monde. Die Kamera hält bei jeder Station an, zeigt drei Kernpunkte im Tafelstil, und die Lehrkraft geht mit der Leertaste jeden Punkt weiter. [5. Verpixelter Einstieg und Bewegungseffekte]
1. Einstieg: Vollbild-Mondoberfläche mit 1-Bit-Bayer-Ordered-Dithering (Bildabtastung → Graustufenquantisierung → 4 Graustufen → 4×4-Matrix); die Dither-Blockgröße wird mit dem Ladefortschritt sanft von 14 px auf 1.5 px geschärft (der Fortschritt selbst ist die Ladeanzeige), mit zentriertem Titel in Pixelschrift, dunkler radialer Maske und einer Schaltfläche „Erkundung starten →“; der Einstieg erfordert einen Nutzerklick (kein automatischer Einstieg).
2. Ausstieg: Nach dem Klick blendet der Titel innerhalb von 220 ms aus, dann löst sich die Zahlenmatrix wellenförmig auf — eine diagonale Wellenfront läuft darüber (mit Störung pro Zelle), Pixelblöcke schrumpfen und blenden entlang des Wellengradienten aus, und nach etwa 800 ms erscheint die Sonnensystemübersicht.
3. Weitere Bewegungseffekte: Beim Wechseln von Himmelskörpern erscheinen großer Titel und poetische Zeile über einen Scramble-Decoding-Effekt (etwa 320/420 ms); Zeichen in Navigationsschaltflächen führen eine zweischichtige Rollbewegung aus (350 ms, 30 ms Staffelung pro Zeichen, bei Hover und Fokus ausgelöst); Bereiche wechseln mit Deckkraft + 12 px Versatz (etwa 220 ms); der Titel des Detailbereichs wird durch eine spärliche Blockmaske enthüllt (≤ 700 ms).
4. Bei prefers-reduced-motion wird alles auf direkte Wechsel reduziert.

[6. Informationsverbesserungen]
1. Beobachtungsfadenkreuz: Ein dünnes Fadenkreuz folgt der Maus; oben rechts werden die LAT/LON-Koordinaten der anvisierten Planetenoberfläche live angezeigt (auf Touchscreens ausgeblendet).
2. Katalog-Vorschaukarte beim Hover (Name / Durchmesser / Entfernung zur Sonne / poetische Zeile).
3. Vollständige Tastatursteuerung: ←/→ Himmelskörper wechseln, ↑/↓ Dolly, Leertaste Pause, 1–0 direkt springen, O Übersicht, D Details, S Einstellungen, H Tastenkürzelkarte, Esc Bereiche schließen.
4. Beobachtungsprotokoll: Unten rechts erscheint ein scrollender Monospace-Eintrag der letzten 3 Aktionen.

[7. Mobilgeräte und Barrierefreiheit]
1. Horizontal scrollbarerer Katalog, wobei das ausgewählte Element automatisch in den Sichtbereich gescrollt wird; Details / Einstellungen als schließbare Bottom Sheets; Touch-Ziele ≥ 44 px; Anpassung an Safe Areas; Werkzeugleiste und Bereiche dürfen sich nicht überlappen.
2. Semantische Schaltflächen, korrektes aria-pressed / aria-selected, sichtbarer Fokus, Escape schließt Bereiche und gibt den Fokus an die auslösende Schaltfläche zurück, Ladezustand wird über eine schlanke Live-Region angekündigt.

[8. Abnahmekriterien (jeden Punkt testen)]
1. Der Pixel-Einstieg ist beim Start sichtbar; ein Klick löst ihn wellenförmig zur Übersicht auf (Sonne zentriert, Umlaufbahnen, Planetenbeschriftungen).
2. Alle zehn Himmelskörper nacheinander durchwechseln: Name / Katalogauswahl / Daten bleiben synchron, die Kamera verfolgt flüssig ohne das Ziel zu verlieren, keine schwarzen Kugeln, keine Shader-Kompilierfehler, keine 404-Fehler.
3. Die drei Ebenenschalter der Erde zeigen sichtbare Effekte, Saturns Ringe liegen in einer Ebene mit seinem Äquator, die Tag-Nacht-Grenze des Mondes wirkt natürlich ohne weiß auszuwaschen, und die Sonne ist eine Scheibe mit schwarzem Rand (keine Vollbild-Sonnenoberfläche).
4. Mit Screenshots auf Desktop 1440×900 und Smartphone 390×844 prüfen: keine Überdeckung, kein Überlauf; keine Konsolenfehler; bei aktiviertem Reduced Motion vollständig nutzbar.

Liste zuerst die Implementierungsreihenfolge auf (Szene → Interaktion → UI → Bewegung → Abnahme), liefere dann direkt ausführbare Dateien. Liefere keine halbfertigen Platzhalter und erfinde keine Assets oder Daten.