Keine einfache, allein nutzbare Web-App, um bereiste Länder auf einer 3D-Erdkugel zu…

Problem: Keine einfache, allein nutzbare Web-App, um bereiste Länder auf einer 3D-Erdkugel zu verfolgen. Goal: Eine eigenständige Reise-Tracker-Web-App im Browser (Handy und Computer) mit drehbarer 3D-Erdkugel, allen 204 Ländern mit echter Hauptstadt und Einwohnerzahl (aus einer statischen JSON-Datei, keine erfundenen Fakten), Markierung besuchter Länder als grüne Fläche oder Stecknadel, Detail-Kachel mit Notiz/Bewertung/Datum/Favorit, Suche, gespeicherte Orte, Fortschrittsbalken als Prozent der besuchten Länder von 204. Success metric: Nutzer öffnet die App, sieht alle 204 Länder auf der Kugel, klickt ein Land an, speichert Notiz/Bewertung/Datum, sucht einen Ort, sieht den Fortschrittsbalken als Prozentsatz der besuchten Länder von 204 – alles ohne Konto und Server.

Ein einzelner Nutzer (Besitzer). Keine Rollen, keine Registrierung, keine Multi-User-Funktionen. Alle Daten gehören diesem einen Nutzer und werden nur auf seinem Gerät gespeichert (LocalStorage oder IndexedDB).

1. App öffnen → drehbare 3D-Erdkugel mit allen 204 Ländern laden.
2. Land/Ort/Spot anklicken → Detail-Kachel mit Fakten (Hauptstadt, Einwohnerzahl, historische/kulturelle Infos), Notiz-Feld, Sternebewertung 1–5, Besuchsdatum-Felder, Favoriten-Schalter.
3. Änderungen speichern → lokal auf dem Gerät speichern, Kachel schließt sich oder bleibt offen.
4. Ort suchen → Suchleiste oben, Trefferliste, Klick öffnet Detail-Kachel.
5. Gespeicherte Orte aufrufen → Liste aller Orte mit Notizen/Bewertungen, Klick öffnet Detail-Kachel.
6. Fortschritt prüfen → Fortschrittsbalken oben zeigt Prozentsatz der besuchten Länder von 204.

Features & requirements (must-haves):

• Globe view: 3D-Erdkugel mit Globe.gl, drehbar per Drag/Maus und Touch, alle 204 Länder sichtbar und klickbar, besuchte Länder als grüne Fläche passend zur Landfläche oder als Stecknadel kenntlich gemacht.
• Detail tile: Beim Anklicken öffnet sich eine Kachel über dem Globus mit echten Fakten (Hauptstadt, Einwohnerzahl, historische/kulturelle Infos), freiem Text für Notizen, Sternebewertung 1–5, einem oder mehreren Besuchsdaten und einem Favoriten-Schalter. Speichern- und Schließen-Button.
• Save locally: Alle Änderungen (Notiz, Bewertung, Datum, Favorit, besucht/nicht besucht) nur im Browser des Nutzers gespeichert (LocalStorage oder IndexedDB), kein Server, kein Konto.
• Search: Suchleiste oben, durchsucht alle 204 Länder und gespeicherte Orte, klickbare Trefferliste, Klick öffnet Detail-Kachel.
• Saved places: Liste aller gespeicherten Orte, sortierbar nach Name oder Datum, Klick öffnet Detail-Kachel.
• Progress bar: Oben angezeigt, berechnet als (besuchte Länder ÷ 204) × 100, visueller Balken plus Prozentzahl, aktualisiert sich sofort nach Speichern.
• Country facts: Echte Hauptstadt und Einwohnerzahl für alle 204 Länder aus einer mitgelieferten statischen JSON-Datei, keine erfundenen Daten.

• Scope:
• Must: oben genannte sieben Features, lokaler Speicher, responsive Bedienung auf Handy und Computer, kostenloses Hosting auf Vercel/Netlify.
• Later: Export/Import von Daten als JSON, mehrere Reisen/Tagebücher, Fotos zu Orten, Offline-Nutzung (PWA), Länder ohne feste Hauptstadt.
• Never: Multi-User, Konto/Registrierung, Synchronisation zwischen Geräten, Backend-Server, Bezahlfunktionen, Werbung, Social Sharing.

1. Main globe view: drehbare 3D-Erdkugel im Vollbild, Fortschrittsbalken oben, Suchleiste oben, Favoriten-/Liste-Button, alle 204 Länder als klickbare Flächen, besuchte Länder als grüne Fläche oder Stecknadel (siehe images/screenshot-1.jpg).
2. Detail tile (overlay): öffnet sich über dem Globus bei Klick auf Land/Ort/Spot; zeigt Fakten, Notiz-Feld, Sternebewertung, Besuchsdatum, Favoriten-Schalter, Speichern- und Schließen-Button (siehe images/screenshot-2.jpg).
3. Saved places list: zeigt alle gespeicherten Orte mit kurzer Info und Bewertung, Klick öffnet Detail-Kachel.

Component library: keine externen UI-Komponenten; reines Vanilla JS mit DOM-Elementen und CSS.

• Colors: Hintergrund #0a0a0a, Text #e5e5e5, Sekundärtext #94a3b8, Akzent/besucht/grün #22c55e, Suchleiste-Hintergrund #1a1a1a, Suchleiste-Text #e5e5e5, Buttons #e5e5e5 auf #0a0a0a, Border #334155.
• Font: System-Schrift (Inter oder system-ui, sans-serif).
• Corner radius: 12 px für Kacheln, 8 px für Buttons und Suchleiste.
• Spacing: 16 px Grundraster, 24 px bei Kacheln und Listen.
• Light/dark mode: nur Dark Mode.
• Look & feel: dunkle Web-App wie die beigefügten Screens (images/screenshot-1.jpg zeigt den Globus mit Suchleiste oben, images/screenshot-2.jpg zeigt die Detail-Kachel mit Notizen, Datum, Bewertung und Tags).

Default: UI-Komponenten, Schriftart, Corner-Radius, Spacing, Look & feel. The user already gave colors and dark mode.

Not needed: keine externen APIs, kein Backend, keine Drittdienste. Alle 204 Länder kommen aus einer statischen JSON-Datei, die mit der App ausgeliefert wird.

Default: Keine Integrationen.

Not needed: keine Registrierung, kein Login, kein Multi-User. Es gibt einen einzigen Besitzer (den Nutzer am Gerät) und keine Berechtigungen.

Default: Kein Auth.

• Performance: die 3D-Erdkugel mit allen 204 Ländern lädt in unter 3 Sekunden auf einem mittleren Smartphone; der Fortschrittsbalken aktualisiert sich sofort nach dem Speichern.
• Privacy: alle Daten (Notizen, Bewertungen, Daten, Favoriten, besucht/nicht besucht) bleiben im LocalStorage/IndexedDB des Browsers; nichts verlässt das Gerät.
• Accessibility: Suchleiste und Buttons sind per Tastatur bedienbar; alle interaktiven Elemente haben sichtbare Fokus-Ränder; Kontraste mindestens WCAG AA (weißer Text #e5e5e5 auf #0a0a0a, grün #22c55e auf #0a0a0a).

• Leerer LocalStorage beim ersten Besuch: Fortschritt 0 %, keine gespeicherten Orte, Kachel zeigt nur Länderfakten.
• Land ohne feste Hauptstadt: Detail-Kachel zeigt '--' statt Hauptstadt.
• Ungültige Suchbegriffe: Trefferliste leer, Hinweis 'Keine Treffer'.
• LocalStorage voll/verweigert: App zeigt Fehlermeldung 'Speicher nicht verfügbar' und lässt dennoch das Anklicken und Betrachten zu (Speichern deaktiviert).
• JSON-Datei nicht ladbar: App zeigt 'Länderdaten konnten nicht geladen werden' statt einer leeren Kugel.
• Touch-Geräte: Drag zum Drehen der Kugel und Tippen zum Auswählen funktionieren wie Maus-Klick.

• Framework: Vanilla JavaScript mit Vite (Build-Tool, dev-Server, Production-Build).
• 3D-Globus: globe.gl (basiert auf Three.js), für drehbaren Globus, Länderflächen und Marker.
• Länder-Daten: statische JSON-Datei im Projektverzeichnis (public/countries.json), mitgeliefert mit der App, keine externe API.
• Lokaler Speicher: LocalStorage (Schlüssel 'traveltracker_visits'), Fallback IndexedDB nur wenn LocalStorage nicht verfügbar.
• Hosting: statische Seite auf Vercel oder Netlify (kostenloser Tier, kein Server, keine Build-Schritte außer Vite).
• Keine separaten Dienste: keine API-Server, keine Datenbank, keine Queues, keine Caches, keine Kubernetes, keine Mikroservices.

Default: Stack, Build-Tool, Hosting-Anbieter, Speicherlösung.

Not needed: Greenfield-Projekt, es gibt keinen bestehenden Code, den der Coding Agent beachten oder nicht ändern darf.

Default: Kein vorhandener Code.

• Slice 1 – Projekt-Gerüst und Globus: Vite-Projekt anlegen, globe.gl einbinden, statische Länder-JSON laden, 3D-Erdkugel mit allen 204 Ländern rendern, per Drag/Maus und Touch drehbar machen, Ladefehler der JSON abfangen ('Länderdaten konnten nicht geladen werden'). Ergebnis: lauffähige leere Kugel.
• Slice 2 – Interaktion und Detail-Kachel: Länder klickbar machen, Overlay-Detail-Kachel öffnen (Fakten: Hauptstadt, Einwohnerzahl; Notiz-Feld, Sternebewertung 1–5, Besuchsdatum, Favoriten-Schalter, Speichern-/Schließen-Button). Ergebnis: Klick auf Land öffnet Kachel.
• Slice 3 – Lokaler Speicher und Fortschritt: Kachel-Daten im LocalStorage speichern/laden, besuchte Länder als grüne Fläche oder Stecknadel markieren, Fortschrittsbalken (besuchte ÷ 204 × 100) oben anzeigen und sofort aktualisieren. Ergebnis: Daten überleben Seiten-Refresh.
• Slice 4 – Suche und gespeicherte Orte: Suchleiste oben (durchsucht alle 204 Länder und gespeicherte Orte, Trefferliste, Klick öffnet Kachel), Liste aller gespeicherten Orte (sortierbar nach Name oder Datum). Ergebnis: Suche und Liste funktionieren.
• Slice 5 – Qualität und Deployment: Tastaturbedienung und Fokus-Ränder, WCAG-AA-Kontraste, Performance (Kugel lädt unter 3 Sekunden), Fehlerbehandlung bei vollem LocalStorage ('Speicher nicht verfügbar'), Build auf Vercel/Netlify deployen und auf Handy + Computer testen. Ergebnis: fertige, gehostete Web-App.

Default: Fünf Slices in dieser Reihenfolge, jeder lauffähig allein.

1. App öffnet im Browser auf Handy und Computer, die 3D-Erdkugel mit allen 204 Ländern ist sichtbar und drehbar.
2. Klick auf ein Land öffnet die Detail-Kachel mit echter Hauptstadt und Einwohnerzahl aus der JSON-Datei.
3. Notiz, Sternebewertung (1–5), Besuchsdatum und Favorit können eingetragen und gespeichert werden; nach Refresh sind die Daten noch da.
4. Besuchte Länder werden als grüne Fläche oder Stecknadel auf der Kugel markiert.
5. Fortschrittsbalken zeigt (besuchte Länder ÷ 204) × 100 als Balken plus Prozentzahl und aktualisiert sich sofort nach Speichern.
6. Suchleiste findet Länder und gespeicherte Orte; Trefferliste ist klickbar und öffnet die Detail-Kachel.
7. Liste der gespeicherten Orte ist sortierbar nach Name oder Datum.
8. Keine Daten verlassen das Gerät; alles bleibt in LocalStorage.
9. Bei vollem LocalStorage zeigt die App 'Speicher nicht verfügbar' und erlaubt weiterhin Betrachten (Speichern deaktiviert).
10. Bei nicht-ladbarer JSON zeigt die App 'Länderdaten konnten nicht geladen werden'.

Default: Diese zehn Tests als Abnahmekriterien.

• Hosting: statische Seite auf Vercel oder Netlify (kostenloser Tier).
• Build: vite build erzeugt statische Dateien (dist/), die über den Host bereitgestellt werden.
• Environments: nur Production (keine separate Staging-Umgebung nötig für Einzelnutzer-Tool).
• Secrets: keine (keine API-Keys, keine Datenbank-Zugangsdaten, kein Backend).
• Domain: kostenlose Subdomain des Hosts (z. B. name.vercel.app oder name.netlify.app).
• CI/CD: automatischer Build und Deploy bei Push ins Git-Repository (Vercel/Netlify integriert).

Default: Vercel als Host, kostenlose Subdomain, keine Staging-Umgebung, keine Secrets.

• Default: Länder-JSON-Quelle (der Coding Agent nutzt eine öffentlich verfügbare REST-Countries-Exportdatei mit 204 Ländern, Hauptstadt und Einwohnerzahl und legt sie als public/countries.json ins Projekt).
• Default: UI-Komponenten, Schriftart, Corner-Radius, Spacing, Look & feel (dunkles Design, Hintergrund #0a0a0a, Text #e5e5e5, Akzent #22c55e, Suchleiste #1a1a1a, System-Schrift, 12px Kacheln, 8px Buttons, 16px Raster).
• Default: LocalStorage als Speicherort, Schlüsselname 'traveltracker_visits', Feldnamen, Feldtypen.
• Default: Keine Integrationen.
• Default: Kein Auth.
• Default: Kein PWA, normale Web-App im Browser.
• Default: Fünf Build-Slices in der beschriebenen Reihenfolge.
• Default: Die zehn Abnahmetests oben.
• Default: Vercel als Host, kostenlose Subdomain, keine Staging-Umgebung, keine Secrets.